/* ==========================================================================
   newCreditCourseDetail.css
   과정상세 리뉴얼 전용 스타일
   퍼블 common_230906.css 의 "과정 상세 리뉴얼" 섹션을 분리
   ========================================================================== */

/* 공통 섹션 타이틀 */
.section-title{font-size:22px; font-weight:700; color:#333; margin-bottom:20px;}

/* 과정 상세 리뉴얼 */
body.scroll-lock{overflow:hidden !important; touch-action:none; -webkit-overflow-scrolling:none;}
.md_block{display:none;}

.button{color:#333; border:1px solid #ddd; background:#fff;}
.button.md{height:40px; padding:0 20px; border-radius:4px; font-size:15px;}
.button.lg{height:48px; padding:0 20px; border-radius:8px; font-size:17px;}
.button.full{width:100%;}
.button.flex{display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.button.apply-btn{color:#fff; font-weight:500; background:#4272f9; border:none;}

.request-detail{display:flex; gap:40px; align-items:stretch;}
.top-location{display:none;}
.request-detail .left-column{flex:1.09; display:flex; flex-direction:column; gap:10px;}
.request-detail .right-column{flex:1; display:flex; flex-direction:column; gap:10px;}

.request-detail .request-cnt{display:flex; flex-direction:column; gap:50px; flex:1;}
.request-detail .location{display:flex; align-items:flex-start; justify-content:space-between;}
.request-detail .location ul{display:flex; font-size:14px; gap:30px}
.request-detail .location li{position:relative;}
.request-detail .location a{color:#b8b8b8}
.request-detail .location li.active a{color:#686868}
.request-detail .location li + li::before{content:''; position:absolute; top:50%; transform:translateY(-50%); left:-18px; width:6px; height:12px; background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_arrow.svg'); background-size:contain;}
.request-detail .location div{display:flex; gap:15px;}
.request-detail .location button{width:16px; height:16px;}
.request-detail .title-group{display:flex; flex-direction:column; gap:30px; padding:0 20px;}
.request-detail .title-group h4{font-weight:500; font-size:28px; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.request-detail .label-list{display:flex; gap:10px; flex-wrap:wrap;}
.request-detail .label-list label{min-width:50px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:100px; padding:0 10px; border:1px solid #ddd; background:#fafafb; color:#4272f9}
.request-detail .like-btn svg *{transition:all .3s ease;}
.request-detail .like-btn.active svg *{fill:#e7181f; stroke:#e7181f;}

.request-detail .goods-info-cnt{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.goods-info-cnt .info-item{display:flex; gap:10px; flex-wrap:wrap; color:#666; position:relative; padding-left:30px}
.goods-info-cnt .info-item::before{content:''; position:absolute; top:5px; left:0; width:16px; height:16px; background-size:contain !important; opacity:.5;}
.goods-info-cnt .time::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info01.svg') no-repeat center}
.goods-info-cnt .method::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info02.svg') no-repeat center}
.goods-info-cnt .like::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info03.svg') no-repeat center}
.goods-info-cnt .target::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info04.svg') no-repeat center}
.goods-info-cnt .period::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info05.svg') no-repeat center}
.goods-info-cnt .status::before{background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_ic_info06.svg') no-repeat center}
.goods-info-cnt small{color:#aaa; font-size:12px;}
.info-guide{display:flex; gap:5px; font-size:12px; align-items:center; color:#aaa; cursor:pointer;}
.info-guide svg{width:16px; height:16px; margin-top:2px;}
.goods-info-cnt .target{justify-content:space-between;}
.goods-info-cnt .target .toggle-btn{margin-left:auto;}
.goods-info-cnt .target .toggle-txt{margin-bottom:10px;}
.toggle-btn{display:flex; gap:10px; align-items:center; color:#aaa; font-size:13px}
.toggle-btn svg{width:13px; height:13px; transition:all .3s ease;}
.toggle-btn.active svg{transform:rotate(-90deg);}
.toggle-txt{display:none; font-size:14px;}

.digital-cnt{border-top:1px solid #ddd; padding-top:20px; height:187px;}
.digital-cnt .tit{display:flex; align-items:center; justify-content:space-between;}
.digital-cnt .tit p{display:flex; align-items:center; gap:10px; color:#8a8a8a; font-size:14px;}
.num-blt{display:inline-block; font-size:11px; color:#fff; background:#474747; border-radius:2px; height:18px; line-height:18px; min-width:45px; text-align:center; padding:0 10px;}
.request-detail .digital-list{margin-top:20px;}
.digital-list{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;}
.digital-list li{display:flex; flex-direction:column; gap:15px; align-items:center;}
.digital-list label{display:inline-flex; align-items:center; font-size:13px; padding:0 15px; border-radius:100px; height:34px; border:1px solid #ddd; background:#fafafb; color:#555;}
.digital-list img{width:50px; display:none;}
.digital-list.active img{display:block;}

.request-detail .video-group{position:relative; padding-bottom:56%; border-radius:12px; overflow:hidden;}
.request-detail .video-group img,
.request-detail .video-group iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.request-detail .video-cnt{position:relative;}
.request-detail .video-cnt .play-btn{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:64px; height:64px; background:url(../images/icon/ic_play_btn1.png) no-repeat 0 0; background-size:contain}

.price-group{border:1px solid #ddd; background:#fafafb; border-radius:12px;padding:20px; display:flex; flex-direction:column; gap:10px;}
.price-group .coupon-cnt{display:flex; align-items:flex-start; justify-content:space-between; position:relative;}
.price-group .coupon-download-box{position:absolute; top:100%; right:0; width:390px; border:4px solid #1d4281; background:#fff; text-align:center; z-index:999;}
.price-group .coupon-download-box .tit-box{background:#1d4281; color:#fff; padding:10px; position:relative;}
.price-group .coupon-download-box .tit-box > span{float:left;}
.price-group .coupon-download-box .tit-box > button{float:right; position:absolute; right:10px; top:13px; width:13px; height:13px; background:url(../images/icon/ic_top_search_close_w.png) no-repeat 0 0; border:none; cursor:pointer;}
.price-group .coupon-download-box .bottom-box{padding:15px;}
.price-group .new-blt{display:flex; gap:10px;}
.price-group button{display:flex; gap:5px; align-items:center; justify-content:center; font-weight:500; border:1px solid #ddd; background:#fff; border-radius:4px; height:33px; width:125px; font-size:14px;}
.price-group button > *{flex-shrink:0;}
.price-group .coupon-btn{color:#ec407a}
.price-group .coupon-btn i{width:17px; height:17px; background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_coupon.svg') no-repeat center; background-size:contain;}
.price-cnt{display:flex; align-items:flex-end; justify-content:space-between;}
.price-cnt .price{display:flex; gap:20px; align-items:baseline;}
.price-cnt .origin{color:#888888; text-decoration:line-through;}
.price-cnt .current{font-size:23px; font-weight:bold;}
.price-cnt .preview-btn{color:#484748;}
.price-cnt .preview-btn i{width:17px; height:17px; background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_preview.svg') no-repeat center; background-size:contain; margin-top:2px;}

.apply-group{margin-top:20px; position:relative;}
.apply-group .btn-cnt{display:flex; gap:10px;}
.info-quick{position:absolute; left:calc(100% + 20px); top:0; border:1px solid #4272f9; border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:5px; color:#333; width:240px; background:#fff; z-index:10;}
.info-quick.fix{position:fixed; top:auto; bottom:20px; left:auto; right:20px;}
.info-quick .tit{font-size:15px; font-weight:500;}
.info-quick .info{display:flex; align-items:center; justify-content:space-between;}
.info-quick small{font-size:12px; color:#666}
.info-quick .apply-btn{margin-top:10px;}
.apply-group .price-cnt{gap:5px;}
.apply-group .origin{font-size:12px; color:#999}
.apply-group .current{font-size:13px;}
.info-quick .top-btn{position:absolute; top:-58px; left:50%; margin-left:-24px; width:48px; height:48px; background:#fff; border-radius:100%; box-shadow:0 0 4px 1px rgba(0,0,0,.1);}
.info-quick .top-btn svg{width:18px; height:18px; margin-top:2px;}

.main-view-content .review-swiper{margin:20px 0 50px}
.review-swiper .title{display:flex; gap:10px; align-items:center; margin-bottom:10px;}
.review-swiper .title h5{font-size:18px;}
.review-swiper .swiper{overflow:hidden; padding-bottom:2px;}
.review-swiper .swiper-slide{border:1px solid #ddd; border-radius:4px; padding:20px; cursor:pointer;}
.review-swiper .tit{display:flex; align-items:center; gap:20px; font-size:13px; color:#aaa}
.star-cnt{display:flex; gap:2px;}
.star-cnt .star{width:15px; height:15px; background:url('../images/icon/ic_point_star.png') no-repeat 0 0; background-size:contain}
.star-cnt .star.on{background-image:url('../images/icon/ic_point_star_on.png');}
.review-swiper .txt{font-size:13px; color:#666; margin-top:15px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.dot-pagination{display:flex; justify-content:center; gap:5px; margin-top:20px;}
.dot-pagination .swiper-pagination-bullet{width:12px; height:12px; background:#929393;}
.main-view-content .main_content{margin-bottom:50px;}
#js-credit4-area{border-top:none; margin-top:0; padding-top:0;}
.main-view-content .main_more{margin-bottom:40px;}

.detail-tab{display:flex; gap:50px; justify-content:center; position:relative;}
.detail-tab::before{content:''; position:absolute; bottom:0; left:50%; width:100dvw; transform:translateX(-50%); height:1px; background:#ddd;}
.detail-tab a{padding:0 15px 10px; font-size:16px; font-weight:500; position:relative; color:#666;}
.detail-tab a.on::before{content:''; position:absolute; bottom:0; left:0; width:100%; height:3px; background:#4272f9}
.detail-tab.fix{position:fixed; top:0; left:0; width:100vw; background:#fff; z-index:99;}
.detail-tab.fix a{padding:15px}

.tab-view-area{color:#666;}
.tab-view-area .tab-view{display:flex; flex-direction:column; gap:20px;}
.tab-view .tab-box{border:1px solid #ddd; border-radius:4px; padding:30px;}
.train-noti{display:flex; align-items:center; justify-content:space-between; background:#fdfae9; gap:20px; padding:25px; border-radius:4px; font-size:16px; color:#333; text-align:left !important; width:100%;}
.tab-view .tab-box.img-box{display:grid; grid-template-columns:200px auto; align-items:flex-start; gap:40px;}
.tab-view .tab-box.img-box .img{position:relative; height:242px; border:1px solid #ddd; overflow:hidden;}
.tab-view .tab-box.img-box .img img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-height:100%;}
.tab-view .tab-box.img-box .editor-txt{gap:30px}
.train-noti.sm{padding:15px 20px}
.train-noti ul{display:flex; flex-direction:column; gap:5px;}
.train-noti li{position:relative; padding-left:25px; word-break:keep-all;}
.train-noti li::before{content:'💡'; position:absolute; top:0; left:0;}

.respon_tbl{border:1px solid #ddd; border-radius:4px;}
.respon_tbl table{width:100%;}
.respon_tbl table.fixed{table-layout:fixed;}
.respon_tbl th{padding:15px 30px; font-size:16px; font-weight:500; border-bottom:1px solid #ddd;}
.respon_tbl td{padding:10px 30px; text-align:center;}
.respon_tbl tbody tr:first-child td{padding-top:20px;}
.respon_tbl tbody tr:last-child td{padding-bottom:20px;}
.tab-view-area .train-content{padding:0}

.editor-txt{display:flex; flex-direction:column; gap:20px;}
.editor-txt .txt-box{display:flex; flex-direction:column; gap:5px;}
.editor-txt .tit{font-size:18px; font-weight:bold; color:#333;}
.editor-txt .txt{font-size:16px; word-break:keep-all; line-height:1.5; color:#666;}

.tab-title{font-size:17px; font-weight:500; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #ddd; color:#333;}
.tab-title label{display:inline-flex; align-items:center; height:27px; color:#fff; padding:0 15px; font-size:15px; background:#86c35d}

.choice-cnt{display:flex; flex-direction:column; gap:20px;}
.choice-cnt li{display:flex; gap:5px; align-items:flex-start; flex-wrap:wrap;}
.choice-cnt li strong{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:4px; background:#999; color:#fff; flex-shrink:0; margin-top:2px;}
.choice-cnt li em{font-style:normal; display:block; width:100%; margin-top:5px; padding-left:29px; color:#999; font-size:13px;}
.choice-cnt li em label{background:#474747; padding:3px 15px; border-radius:100px; color:#fff; font-size:13px; margin-right:5px;}

/* ══ 차시 판매 영역 (2차 개선 기획안) ══ */

/* 타이틀 */
/* 안내 배지 + 설명 */
.cntn-guide{display:flex; align-items:flex-start; gap:15px; padding:20px; background:none; border-bottom:2.5px solid #ebebeb; border-radius:0; margin-bottom:25px;}
.cntn-badge{flex-shrink:0; display:inline-flex; align-items:center; height:28px; padding:0 14px; background:#dbeafe; color:#306ddf; font-size:16px; font-weight:700; white-space:nowrap;}
.cntn-guide-list{list-style:disc inside; padding-left:5px; margin:0; font-size:16px; color:#666; line-height:1.8;}
.cntn-guide-list li{display:list-item;}
.cntn-guide-list strong{font-weight:700;}

/* 모두 펼치기 헤더 */
.cntn-list-header{display:flex; justify-content:flex-end; margin-bottom:10px;}
.toggle-all-btn{border:none; background:transparent; padding:6px 0; font-size:16px; color:#666; cursor:pointer; display:flex; align-items:center; gap:6px;}
.toggle-all-btn:hover{color:#333;}
.toggle-all-btn .cntn-arrow{transition:transform .25s; color:#888;}
.toggle-all-btn.expanded .cntn-arrow{transform:rotate(180deg);}

/* 차시 리스트 */
.cntn-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.cntn-list li{border:1px solid #ddd; border-radius:4px; background:#fafafa; overflow:hidden; transition:border-color .2s, background .2s;}
.cntn-list li.selected{border-color:#1d4281; background:#f0f4ff;}

/* 차시 행: [아코디언▼] [순번] [차시명] ··· [체크박스□] */
.cntn-row{display:flex; align-items:center; padding:16px 20px; gap:12px; min-height:56px;}
.cntn-accordion{flex-shrink:0; width:28px; height:28px; border:none; border-radius:4px; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;}
.cntn-accordion:hover{background:#e8e8e8;}
.cntn-arrow{transition:transform .25s; color:#888;}
.cntn-accordion[aria-expanded="true"] .cntn-arrow{transform:rotate(180deg);}
.cntn-num{flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:4px; background:#999; color:#fff; font-size:13px; font-weight:700;}
.cntn-name{flex:1; min-width:0; font-size:17px; color:#333; line-height:1.5;}
.cntn-list li.no-sell .cntn-name{color:#333;}
.cntn-check{flex-shrink:0; width:32px; height:32px; display:flex; align-items:center;}
.cntn-check input[type="checkbox"]{width:32px; height:32px; cursor:pointer; accent-color:#1d4281;}
.cntn-check label{display:none;}

/* 디지털 스킬 라벨 (cntn-name 내부 줄바꿈) */
.cntn-name em{font-style:normal; display:block; margin-top:5px; color:#999; font-size:13px;}
.cntn-name em label{background:#474747; padding:3px 15px; border-radius:100px; color:#fff; font-size:13px; margin-right:5px; cursor:default;}

/* 차시 내용 아코디언 영역 */
.cntn-toggle-view{padding:15px 20px 15px 72px; background:#fff; border-top:1px solid #eee; font-size:16px; line-height:1.8; color:#666;}

/* 클립 카드 리스트 (AS-IS common_230906.css 기반) */
.cntn-toggle-view:has(.clip-card-list){padding:20px;}
.clip-card-list{display:flex; flex-wrap:wrap; gap:20px;}
.clip-card{position:relative; flex:0 0 calc((100% - 80px) / 5); border-radius:20px; background:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/clip_play01.png') no-repeat center 43% #eaf0ff; overflow:hidden;}
.clip-card::before{content:''; display:block; padding-bottom:177.16%;}
.clip-card::after{content:''; position:absolute; bottom:0; left:0; width:100%; height:50%; background:linear-gradient(to top, rgba(0,0,0,.15), transparent);}
.clip-card > div{position:absolute; top:0; left:0; width:100%; height:100%; display:grid; grid-template-rows:20px auto 10px; gap:40px; padding:20px; z-index:1;}
.clip-card-num{color:#4272f9; font-size:13px; font-weight:700;}
.clip-card-tit{align-self:end; font-size:17px; font-weight:700; line-height:1.3;}
.clip-card-logo{height:100%; display:block; margin:0 auto;}

/* 하단 합계 + 버튼 */
.cntn-bottom{margin-top:20px; display:flex; align-items:center; justify-content:flex-end; gap:15px; padding:18px 20px; border:none; border-radius:0; background:none;}
.cntn-bottom-info{font-size:17px; color:#333;}
.cntn-bottom-info .blue{color:#1d4281; font-weight:700;}
.cntn-bottom-btns{display:flex; gap:10px;}
.cntn-cart-btn{height:44px; padding:0 28px; border-radius:8px; border:1px solid #aaa; background:#fff; font-size:15px; font-weight:600; color:#333; cursor:pointer;}
.cntn-order-btn{height:44px; padding:0 28px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer;}
.cntn-cart-btn:hover{background:#f5f5f5;}
.cntn-order-btn:hover{opacity:.9;}

.new-pop{position:fixed; top:0; left:0; width:100dvw; height:100dvh; background:rgba(0,0,0,.5); z-index:1000; display:none; align-items:center; justify-content:center;}
.new-pop .pop-wrap{position:relative; background:#fff; border-radius:8px; padding:40px 20px 20px; width:calc(100% - 20px)}
.new-pop .pop-wrap.md{max-width:630px;}
.new-pop .pop-con{display:flex; flex-direction:column; gap:40px; max-height:70dvh; overflow:auto; padding:0 10px; margin:0 -10px;}
.new-pop .pop-con::-webkit-scrollbar{width:6px}
.new-pop .pop-close{position:absolute; top:20px; right:20px; width:13px; height:13px; opacity:.6; transition:all .3s ease;}
.new-pop .pop-close:hover{opacity:1;}
.new-pop .title{font-size:18px; font-weight:500; border-bottom:1px solid #ddd; padding-bottom:15px; margin-bottom:15px;}
.new-pop .txt{color:#666; font-size:15px; letter-spacing:-.5px;}
.new-pop .pop-btn{margin-top:20px; display:flex; gap:10px;}
.mark-noti{display:block; position:relative; padding-left:15px; font-size:13px; color:#888}
.mark-noti::before{content:'※'; position:absolute; top:0; left:0}
.pop-radio{display:flex; flex-direction:column; gap:10px}
.pop-radio li{font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.pop-radio .com-radio{margin:0; width:100%}
.pop-radio .com-radio label{font-size:14px; font-weight:normal; letter-spacing:-.5px; width:100%}
.pop-radio .com-radio label div{display:flex; align-items:center; justify-content:space-between; gap:20px}
.pop-radio .com-radio strong{font-weight:bold; color:#333; flex-shrink:0;}
.pop-price{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; background:#fafafb; border-radius:8px;}
.pop-price div{display:flex; flex-direction:column; gap:5px;}
.pop-price .tit{font-size:14px; font-weight:500;}
.pop-price .price{font-size:20px; font-weight:bold;}

.info-bubble{display:inline-block; vertical-align:middle; margin-left:5px; position:relative;}
.info-bubble svg{width:16px; height:16px; cursor:pointer;}
.info-bubble .info-icon:hover + .pop-bubble{display:block}
.pop-bubble{position:absolute; bottom:35px; left:-4px; background:#fff; padding:20px; border-radius:4px; white-space:nowrap; text-align:left; border:1px solid #888; color:#333; font-size:15px; display:none}
.pop-bubble::before{content:''; position:absolute; bottom:-10px; left:10px; width:0; height:0; border-style:solid; border-width:9px 13px 0 0; border-color:#888 transparent transparent transparent;}
.pop-bubble::after{content:''; position:absolute; bottom:-8px; left:11px; width:0; height:0; border-style:solid; border-width:8px 11px 0 0; border-color:#fff transparent transparent transparent;}
.pop-bubble .pop-con{display:flex; flex-direction:column; gap:20px;}

/* 상세이미지 영역 오버라이드 */
.main-view-content .tab-view-area .editor-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

/* ── 모바일 (max-width: 1000px) ── */
@media (max-width: 1000px) {
  .md_block{display:block;}
  .md_hidden{display:none;}

  .button.md{height:34px; font-size:13px; padding:0 15px}
  .button.lg{height:38px; font-size:14px; padding:0 15px; border-radius:4px;}

  .request-detail{flex-direction:column; gap:20px;}
  .top-location{display:block}
  .request-detail .left-column, .request-detail .right-column{display:contents;}
  .request-detail .video-cnt{order:1;}
  .request-detail .request-cnt{order:2; gap:30px;}
  .digital-cnt{order:3; height:auto;}
  .detail-price{order:4;}

  .request-detail .title-group{padding:0; gap:10px;}
  .request-detail .title-group h4{font-size:17px; text-align:center;}
  .request-detail .label-list{justify-content:center;}
  .request-detail .label-list label{min-width:40px; height:24px; font-size:12px;}

  .request-detail .goods-info-cnt{gap:15px;}
  .goods-info-cnt .info-item{font-size:13px; padding-left:20px;}
  .goods-info-cnt .info-item::before{top:3px; width:13px; height:13px;}
  .goods-info-cnt .target .toggle-btn span{display:none;}

  .num-blt{min-width:40px}
  .request-detail .digital-list{margin-top:10px;}
  .digital-list{margin:0 -10px; padding:0 10px; gap:5px; flex-wrap:nowrap; white-space:nowrap; overflow:auto; -ms-overflow-style:none; scrollbar-width:none;}
  .digital-list label{padding:0 10px; font-size:12px; height:30px;}
  .price-group{padding:15px; display:flex; flex-direction:column; gap:5px; border-radius:8px;}
  .price-group .new-blt{gap:5px;}
  .price-group button, .price-group .coupon-btn{width:110px; font-size:13px; border:1px solid #ddd; background:#fff; height:28px; font-weight:normal; border-radius:4px;}
  .price-group button i, .price-group .coupon-btn i{width:14px; height:14px; margin-top:2px;}
  .price-group .preview-btn{color:#333}
  .price-group .preview-btn i{background-image:url('https://tvcache.teacherville.co.kr/teacherville2/image/web/icon/26_preview.svg');}
  .price-group button svg{display:none;}
  .price-group .price{gap:10px;}
  .price-group .origin{font-size:13px;}
  .price-group .current{font-size:18px;}

  .apply-group{position:fixed; bottom:0; left:0; width:100%; background:#fff; z-index:99; padding:20px 10px; margin:0; border-radius:15px 15px 0 0; border-top:1px solid #ddd; box-shadow:3px 0 10px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:20px}
  .info-quick{position:relative; left:auto; border:none; width:100%; padding:0;}
  .info-quick .apply-btn{display:none;}
  .info-quick .tit{font-size:14px;}
  .info-quick .top-btn{width:36px; height:36px; top:-65px; background-size:auto 14px; left:auto; margin-left:0; right:0; background-color:rgba(255,255,255,.8)}
  .info-quick .top-btn svg{width:16px; height:16px;}

  .main-view-content .review-swiper{margin-bottom:30px;}
  .review-swiper .swiper{margin:0 -10px; padding:0 10px;}
  .review-swiper .swiper-slide{padding:15px}
  .review-swiper .tit{font-size:12px;}
  .star-cnt .star{width:12px; height:12px}
  .review-swiper .txt{margin-top:10px;}
  .dot-pagination{margin-top:15px;}
  .dot-pagination .swiper-pagination-bullet{width:10px; height:10px;}

  .detail-tab{gap:0; justify-content:space-between;}
  .detail-tab a{font-weight:normal; font-size:14px; padding:0 5px 10px}
  .detail-tab.fix a{padding:15px 10px}

  .main-view-content .tab-view-area .tab-view{margin-top:20px;}
  .train-noti{font-size:13px; padding:10px; flex-direction:column; gap:10px; align-items:flex-start;}
  .train-noti.sm{padding:7px}
  .train-noti li{padding-left:20px;}
  .train-noti button{align-self:center;}

  .respon_tbl{padding:10px;}
  .respon_tbl thead{display:none;}
  .respon_tbl tbody{display:flex; flex-direction:column; gap:15px;}
  .respon_tbl tr{display:grid; grid-template-columns:1.5fr 1fr; gap:5px;}
  .respon_tbl tr > *{padding:0 !important; font-size:14px; text-align:left;}
  .respon_tbl td{display:flex;}
  .respon_tbl td:not(.tit, .noti)::before{content:attr(data-label); width:90px; font-weight:500; color:#333;}
  .respon_tbl td.tit{grid-column:1 / 3; grid-row:1; color:#333;}

  .tab-view .tab-box{padding:15px; gap:30px;}
  .editor-txt .txt-box{gap:5px;}
  .editor-txt .tit{font-size:16px; font-weight:bold;}
  .editor-txt .txt{font-size:14px; line-height:1.5;}

  .tab-title{font-size:16px; margin:0 -15px 15px; padding:0 15px 15px;}

  .choice-cnt{gap:15px; font-size:14px;}
  .choice-cnt li strong{width:20px; height:20px; font-size:13px; font-weight:500;}
  .cntn-title{font-size:18px; margin-bottom:15px;}
  .cntn-guide{flex-direction:column; gap:10px; padding:15px;}
  .cntn-guide-list{font-size:13px;}
  .cntn-row{padding:12px 15px; gap:8px; min-height:44px;}
  .cntn-accordion-btn{width:24px; height:24px;}
  .cntn-num{width:24px; height:24px; font-size:12px;}
  .cntn-name{font-size:14px;}
  .cntn-toggle-view{padding:12px 15px 12px 56px; font-size:13px;}
  .cntn-bottom{flex-wrap:wrap; justify-content:center; gap:10px; padding:15px;}
  .cntn-bottom-info{width:100%; text-align:center; font-size:14px;}
  .cntn-cart-btn, .cntn-order-btn{height:40px; padding:0 20px; font-size:14px;}
  .tab-view .tab-box.img-box{grid-template-columns:1fr; gap:20px;}
  .tab-view .img-box .info-cnt{display:contents;}
  .tab-view .img-box .tab-title{order:1;}
  .tab-view .img-box .img{order:2; width:200px; margin:0 auto}
  .tab-view .img-box .editor-txt{order:3;}

  .clip-card{flex:0 0 calc((100% - 40px) / 3);}
  .clip-card > div{gap:20px; padding:15px;}
  .clip-card-tit{font-size:15px;}
}

/* ── 모바일 소형 (max-width: 767px) ── */
@media (max-width: 767px) {
  .new-pop{align-items:flex-end;}
  .new-pop .pop-wrap{width:100%; max-height:100%; border-radius:15px 15px 0 0; padding:30px 10px 20px; touch-action:none; display:flex; flex-direction:column;}
  .new-pop .pop-wrap::before{content:''; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:50px; height:4px; border-radius:10px; background:#eee}
  .new-pop .pop-con{gap:20px; max-height:none; flex:1;}
  .new-pop .pop-close{display:none}
  .new-pop .title{font-size:15px; margin-bottom:10px; padding-bottom:10px;}
  .new-pop .txt{font-size:14px;}
  .mark-noti{font-size:12px;}

  .respon_tbl tr{grid-template-columns:1fr;}
  .respon_tbl td.tit{grid-column:auto;}
  .main-view-content .tab-view-area .tab-view .notice-txt{font-size:13px;}
  .pop-radio .com-radio label{padding:10px; border-radius:4px; border:1px solid #ddd;}
  .pop-radio .com-radio label::before{content:none;}
  .pop-radio .com-radio input:checked + label{border-color:#4272f9; background:rgba(66,114,249,.05)}
  .pop-price{padding:20px 0 0; background:0; position:relative;}
  .pop-price::before{content:''; position:absolute; top:0; left:-10px; right:-10px; height:1px; background:#ddd;}
  .pop-price .price{font-size:16px;}

  .cntn-toggle-view:has(.clip-card-list){padding:10px;}
  .clip-card-list{flex-wrap:nowrap; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none;}
  .clip-card-list::-webkit-scrollbar{display:none;}
  .clip-card{flex:0 0 calc(50% - 5px); border-radius:15px; scroll-snap-align:start;}
  .clip-card > div{gap:15px; padding:12px;}
  .clip-card-num{font-size:12px;}
  .clip-card-tit{font-size:14px;}
  .clip-card-logo{max-height:20px;}

  .toggle-all-btn{font-size:14px;}

  .info-bubble svg{vertical-align:middle; margin-top:-2px;}
  .pop-bubble{position:fixed; bottom:0; left:0; width:100%; height:auto;  border:none; border-top:1px solid #ddd; transform:none !important;white-space:normal; font-size:14px; padding:0; border:0; z-index:100; background:none}
  .pop-bubble .pop-con{border-radius:15px 15px 0 0; padding:30px 10px 20px; background:#fff; transform:translateY(100%); transition:transform 0.3s ease, height 0.3s ease;}
  .pop-bubble.is-open .pop-con{transform:translateY(0);}
  .pop-bubble::after{content:none;}
  .pop-bubble::before{position:fixed; top:0; left:0; width:100dvw; height:100dvh; background:rgba(0,0,0,.5); border:none; z-index:-1; opacity:0; pointer-events:none;}
  .pop-bubble.is-open::before{opacity:1; pointer-events:auto;}
  .pop-bubble .pop-con::before{content:''; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:50px; height:4px; border-radius:10px; border:0; background:#eee; z-index:3;}
}