/* 수강생 사이트 — 시안 H 「커머스형」(Docs/설계/화면설계/시안/수강생사이트-시안H-커머스형.html). 모바일 먼저.
   대표 색(--pri)은 콘솔 브랜딩 설정으로 바뀌고, 그 위 글자색(--on-pri) · 글자로 쓰는 대표 색(--pri-ink)은 서버(Site.view)가 계산해 layout 의 style 로 넣는다.
   아이콘은 layout 의 SVG 묶음(<symbol id="i-…">)을 <svg class="ic"><use href="#i-…"/></svg> 로 쓴다. */
/* 시안과 같은 글꼴 — 설치형이라 외부 CDN 대신 제품 안에 넣는다(Pretendard, SIL OFL 1.1 · fonts/Pretendard-LICENSE.txt) */
@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url('../fonts/PretendardVariable.woff2') format('woff2-variations'),url('../fonts/PretendardVariable.woff2') format('woff2')}
:root{
  --pri:#e8344e; --on-pri:#fff; --pri-ink:#d42a44;
  --pri-soft:color-mix(in srgb,var(--pri) 10%,#fff);
  --ink:#1a1a1a; --ink2:#424242; --sub:#757575; --muted:#9e9e9e; --line:#ececec; --line2:#f2f2f2; --bg:#fff; --soft:#f6f6f6; --card:#fff;
  --red:#f03e3e; --orange:#f76707; --star:#fab005;
  --ok:#2b8a3e; --ok-bg:#ebfbee; --err:#c92a2a; --err-bg:#fff5f5; --warn:#d9480f; --warn-bg:#fff4e6;
  --r:12px; --sh:0 2px 10px rgba(0,0,0,.06);
  --kr:'Pretendard Variable','Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo','Segoe UI','Malgun Gothic',sans-serif;
  --hd:115px; /* 머리글 높이(두 줄) — 고정 탭 · 신청 카드 위치 기준 */
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-padding-top:calc(var(--hd) + 60px)}
body{font-family:var(--kr);color:var(--ink);background:var(--bg);word-break:keep-all;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55;letter-spacing:-.01em}
a{color:var(--pri-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font-family:var(--kr);font-size:15px}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--pri-ink);outline-offset:2px}
img{max-width:100%}
h1{font-size:26px;margin:0 0 8px;letter-spacing:-.035em;line-height:1.3}
h2{font-size:20px;margin:0 0 12px;letter-spacing:-.03em}
h3{font-size:17px;margin:0 0 10px;letter-spacing:-.02em}
.muted{color:var(--muted)}.small{font-size:13px}.sub{color:var(--sub)}
svg.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;flex:none}
svg.ic.fill{fill:currentColor}

/* 머리글 — 1줄: 로고 · 찾기 · 내 메뉴, 2줄: 사이트 메뉴 */
.dev-band{background:#c92a2a;color:#fff;font-weight:800;font-size:13px;padding:8px 16px;text-align:center}
.hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.hd-in{max-width:1200px;margin:0 auto;padding:0 24px}
.hd .r1{height:68px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.04em;color:var(--ink);flex:none}
.brand:hover{text-decoration:none}
.brand i{width:30px;height:30px;border-radius:9px;background:var(--pri);color:var(--on-pri);display:grid;place-items:center;font-style:normal;font-size:15px}
.brand img{height:32px;display:block}
.hd .search{flex:1;max-width:460px}
.search{display:flex;align-items:center;gap:10px;height:44px;border-radius:22px;background:var(--soft);padding:0 18px;color:var(--sub);border:1px solid transparent}
.search:focus-within{background:#fff;border-color:var(--ink)}
.search input{flex:1;border:0;background:none;padding:0;min-height:0;font-size:14.5px;color:var(--ink);outline:none;width:100%}
.search input[type=search],.search input[type=text]{border:0;background:none;padding:0;min-height:0;border-radius:0;box-shadow:none}
.search input:focus,.search input[type=text]:focus{box-shadow:none;border:0}
.search button{border:0;background:var(--ink);color:#fff;border-radius:16px;padding:6px 14px;font-size:13.5px;font-weight:700}
.hd .sp{flex:1}
.icons{display:flex;gap:4px;align-items:center}
.icons a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--ink2);padding:4px 8px;max-width:84px}
.icons a:hover{text-decoration:none;color:var(--ink)}
.icons a svg{width:22px;height:22px;stroke-width:1.8}
.icons a .lb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:11px;font-weight:400;margin:0} /* 입력칸 이름표 .lb(14px · 굵게)와 이름이 겹쳐 시안 크기로 고정 */
.icons a.me{padding:4px 0 4px 6px;max-width:none}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:14px;font-weight:700}
.icons a.me:hover .ava{background:var(--pri);color:var(--on-pri)}
/* 프로필 사진(카카오 — 2026-11-09). 사진이 없으면 같은 자리에 이름 첫 글자 */
img.ava{object-fit:cover;background:var(--soft)}
.ava.sm{width:22px;height:22px;display:inline-block;vertical-align:middle;margin-right:4px}
.ava.lg{width:44px;height:44px;display:inline-block;vertical-align:middle;margin-right:8px}
.who{display:flex;align-items:center;gap:2px}
.photo-row{display:inline-flex;align-items:center}
.icons a.btn{flex-direction:row;font-size:13.5px;color:var(--on-pri);margin-left:6px;max-width:none}
/* 회원가입 글자 링크 — 로그인 버튼 옆(2026-11-09). 휴대폰 폭에서는 머리가 좁아 빼고, 로그인 화면의 「회원가입」 버튼으로 간다 */
.icons a.signup{flex-direction:row;font-size:13.5px;font-weight:600;max-width:none;padding:4px 6px}
@media (min-width:861px){.icons a.signup{transform:translateY(-2px)}}
@media (max-width:860px){.icons a.signup{display:none}}
/* 카카오 로그인 버튼 — 카카오 디자인 가이드: 노란 바탕 #FEE500 · 검은 글자(85%) · 말풍선 기호 */
.btn.kakao{background:#fee500;color:rgba(0,0,0,.85);border-color:#fee500;gap:8px;font-weight:600}
.btn.kakao:hover{background:#fada0a;border-color:#fada0a;color:rgba(0,0,0,.85);text-decoration:none}
.btn.kakao svg{width:18px;height:18px;flex:none}
.box .or{display:flex;align-items:center;gap:10px;margin:16px 0 12px;color:var(--muted);font-size:12.5px}
.box .or::before,.box .or::after{content:"";flex:1;border-top:1px solid var(--line)}
/* 로그인 ↔ 회원가입 바꿔 가기 */
.login-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.login-alt .muted{display:block;margin-bottom:8px;font-size:13.5px}
/* 착시 보정 — 옆 「내 강의실」은 아이콘(진함) 위 · 작은 글자(연함) 아래라 눈에 보이는 무게 중심이 상자 가운데보다 위에 있다.
   상자 가운데끼리 맞추면 버튼이 처져 보이므로 PC(글자가 보이는 머리말)에서만 2px 올린다(4px 은 너무 올라가 보였음). */
@media (min-width:861px){.icons a.login{transform:translateY(-2px)}}
.hd .r2{height:46px;display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.hd .r2 a{color:var(--ink);height:100%;display:flex;align-items:center}
.hd .r2 a:hover{text-decoration:none;color:var(--pri-ink)}
.hd .r2 a.on{color:var(--pri-ink);box-shadow:inset 0 -2px 0 var(--pri)}
.hd .r2 .right{margin-left:auto;margin-bottom:0}
.hd .r2 .linkbtn{margin:0;font-size:13px;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:24px 24px 48px}
.narrow{max-width:480px;margin:0 auto;padding:32px 16px 48px}

/* 공통 부품 */
.box,.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px}
.msg{padding:12px 14px;border-radius:11px;margin:0 0 14px;font-size:14px}
.msg.ok{background:var(--ok-bg);color:var(--ok)}.msg.err{background:var(--err-bg);color:var(--err)}
.msg.warn{background:var(--warn-bg);color:var(--warn)}.msg.info{background:var(--pri-soft);color:var(--pri-ink)}
.pill{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--soft);color:var(--sub)}
.pill.on{background:var(--ok-bg);color:var(--ok)}.pill.off{background:var(--err-bg);color:var(--err)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.info{background:var(--pri-soft);color:var(--pri-ink)}
.tg{display:inline-block;font-size:11px;font-weight:800;padding:4px 7px;border-radius:5px;background:#fff;color:var(--ink);letter-spacing:0;line-height:1.2;white-space:nowrap}
.tg.hurry{background:var(--orange);color:#fff}.tg.free{background:var(--ok);color:#fff}.tg.dim{background:rgba(0,0,0,.6);color:#fff}
.tg-row{display:flex;gap:4px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:10px;font-weight:700;font-size:14.5px;cursor:pointer;border:1px solid #dedede;background:#fff;color:var(--ink);line-height:1.2;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--soft);text-decoration:none}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}.btn.pri:hover{background:color-mix(in srgb,var(--pri) 90%,#000)}
.btn.danger{background:#fff;border-color:#ffc9c9;color:var(--err)}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn.lg{min-height:54px;padding:0 22px;font-size:16px}
.btn.wide{width:100%;padding:15px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}
.stack{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sp{flex:1}

.f{margin-bottom:14px}
.lb{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.lb small{color:var(--muted);font-weight:400}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=search],textarea,select{width:100%;padding:12px 14px;border:1px solid #dedede;border-radius:10px;background:#fff;color:var(--ink);min-height:46px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin:8px 0}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--pri);flex:none}
/* 가입 화면 「모두 동의」 — 아래 항목들과 선으로 나눈다 */
.check.all{font-size:15px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.check.all small{display:block;font-size:12px;margin-top:2px}
.radios{display:flex;flex-direction:column;gap:8px}
.radios label{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff}
.radios label:has(input:checked){border-color:var(--ink)}
.radios input{accent-color:var(--pri);margin-top:3px}
.radios small{display:block;color:var(--muted);font-size:13px}
.otp{font-size:26px;letter-spacing:.4em;text-align:center;font-weight:800}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:14px}
.kv span{color:var(--muted)}
.kv:last-child{border-bottom:0}
.page-h{margin:4px 0 20px}.page-h h1{font-size:28px}.page-h p{color:var(--sub);margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);font-size:12.5px;margin-top:6px;text-decoration:underline}

/* 썸네일 — 사진이 있으면 사진만, 없으면 대표 색 + 제목으로 그린다 */
.th{aspect-ratio:16/10;border-radius:var(--r);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;color:#fff;
  background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 45%,#111))}
.th::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.th b{font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.04em;position:relative;z-index:1;text-shadow:0 1px 8px rgba(0,0,0,.2)}
.th small{opacity:.88;font-size:12px;font-weight:600;position:relative;z-index:1;margin-bottom:4px}
.th.v1{background:linear-gradient(135deg,#343a40,#111)}
.th.v2{background:linear-gradient(135deg,color-mix(in srgb,var(--pri) 60%,#1c7ed6),color-mix(in srgb,var(--pri) 50%,#111))}
.th.v3{background:linear-gradient(135deg,#f59f00,#e8590c)}
.th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .4s}
.th.img::after{display:none}
.th.img>small,.th.img>b{display:none}
.th .tg-row{position:absolute;left:10px;top:10px;z-index:3}

/* 홈 */
.home{padding-top:24px}
.hero{position:relative}
.slides{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1200/400;background:var(--soft)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}.slide.on{opacity:1;pointer-events:auto}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.ctrl{position:absolute;right:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:4px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);border-radius:20px;padding:4px 6px;color:#fff;font-size:13px;font-variant-numeric:tabular-nums}
.ctrl button{color:#fff;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;border:0;background:none;padding:0}.ctrl button:hover{background:rgba(255,255,255,.15)}
.ctrl span{padding:0 6px}
.fhero{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:20px;overflow:hidden;background:#1a1a1a;color:#fff;min-height:340px}
.fhero:hover{text-decoration:none}
.fhero .tx{padding:44px 48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.fhero .bd{display:inline-flex;font-size:13px;font-weight:700;padding:6px 12px;border-radius:20px;background:var(--pri);color:var(--on-pri)}
.fhero h1{font-size:36px;line-height:1.25;letter-spacing:-.045em;font-weight:800;margin:14px 0 10px}
.fhero p{margin:0 0 10px;font-size:16px;opacity:.78}
.fhero .who{font-size:14px;opacity:.8;margin-bottom:22px}
.fhero .btn{margin-top:6px}
.fhero .th{border-radius:0;aspect-ratio:auto;height:100%}
.fhero .th:not(.img)>b,.fhero .th:not(.img)>small{display:none}
.fhero.empty{grid-template-columns:1fr}
.quick{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:32px 0 8px}
.quick a{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink2);padding:6px 4px;border-radius:14px;text-align:center}
.quick a:hover{background:var(--soft);text-decoration:none}
.quick span{width:60px;height:60px;border-radius:20px;background:var(--soft);display:grid;place-items:center;font-size:26px;color:var(--ink)}
.quick span svg{stroke-width:1.8}
.quick span.ch{font-size:22px;font-weight:800}
.quick a.hot span{background:var(--pri-soft);color:var(--pri-ink)}
.sec{margin-top:64px}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.sh h2{font-size:24px;letter-spacing:-.035em;margin:0;font-weight:800}
.sh p{margin:4px 0 0;color:var(--sub);font-size:14px}
.sh .more{font-size:14px;color:var(--sub);display:flex;align-items:center;gap:2px;white-space:nowrap}
.coupon{margin-top:64px;border-radius:20px;background:linear-gradient(100deg,#1a1a1a,#333);color:#fff;display:flex;align-items:center;gap:28px;padding:26px 36px}
.coupon .tk{flex:none;width:150px;height:86px;border-radius:12px;background:var(--pri);color:var(--on-pri);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.coupon .tk::before,.coupon .tk::after{content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#262626;transform:translateY(-50%)}
.coupon .tk::before{left:-9px}.coupon .tk::after{right:-9px}
.coupon .tk b{font-size:28px;font-weight:900;letter-spacing:-.04em;line-height:1}.coupon .tk small{font-size:12px;font-weight:700;opacity:.9;margin-top:4px}
.coupon h3{margin:0 0 4px;font-size:21px;letter-spacing:-.03em}.coupon p{margin:0;opacity:.7;font-size:14px}
.coupon .btn{margin-left:auto}
.teachers{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tc{text-align:center;color:var(--ink)}.tc:hover{text-decoration:none}
.tc img,.tc .av{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;margin-bottom:12px;background:var(--soft);display:grid;place-items:center;font-size:36px;font-weight:800;color:var(--sub)}
.tc b{font-size:15.5px}.tc p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rvc{border-radius:16px;background:var(--soft);padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.rvc:hover{text-decoration:none;background:#f0f0f0}
.rvc p{margin:0;font-size:15px;line-height:1.65;color:var(--ink2);flex:1}
.rvc .by{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub)}
.rvc .by i{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--ink2)}
.rvc .by b{color:var(--ink);font-size:13.5px}
.rvc .ok{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ok);display:flex;gap:3px;align-items:center}
.rvc .crs{padding-top:12px;border-top:1px solid #e6e6e6;font-size:12.5px;color:var(--sub)}
.notice{border-top:2px solid var(--ink)}
.notice .kv{padding:15px 4px;color:var(--ink)}.notice .kv b{font-weight:600}.notice .kv:hover{text-decoration:none;background:var(--soft)}

/* 일정 */
.sched{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sch{border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:16px;display:flex;gap:14px;align-items:center}
.sch .d{width:60px;flex:none;text-align:center;border-radius:12px;background:var(--pri-soft);color:var(--pri-ink);padding:9px 0}
.sch .d b{display:block;font-size:22px;line-height:1.2}.sch .d small{font-size:12px;font-weight:700}
.sch .t{min-width:0}.sch .t b{display:block;margin:2px 0}
.sch .k{font-size:12px;font-weight:800;color:var(--pri-ink)}

/* 강의 카드 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.pc{display:flex;flex-direction:column;color:var(--ink);min-width:0}
.pc:hover{text-decoration:none}
.pc:hover .th img{transform:scale(1.04)}
.pc .meta{margin-top:12px;font-size:12.5px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .tt{font-size:15.5px;font-weight:700;line-height:1.4;margin:3px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;letter-spacing:-.025em}
.pc .rate{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--sub)}
.pc .rate b{color:var(--ink);display:flex;align-items:center;gap:2px}.pc .rate svg{color:var(--star)}
.pc .when{margin-top:8px;font-size:12px;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:4px}
.pc .bd{display:flex;flex-direction:column;gap:6px;padding-top:12px}
.pc .bd .tt{margin:0}.pc .bd .meta{margin:0}
.price{display:flex;align-items:baseline;gap:6px;margin-top:4px;flex-wrap:wrap;font-weight:800;font-size:17px;letter-spacing:-.02em}
.price b{font-weight:800}
.price .dc{color:var(--red);font-weight:800}
.price s{color:#adb5bd;font-weight:500;font-size:13px;letter-spacing:0}
.tags{display:flex;gap:4px;flex-wrap:wrap}

/* 목록 */
.filters,.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin:0 0 16px;scrollbar-width:none}
.filters a,.chips a{white-space:nowrap;border:1px solid #dedede;border-radius:999px;padding:8px 15px;font-size:14px;color:var(--ink2);font-weight:600;background:#fff}
.filters a:hover,.chips a:hover{text-decoration:none;border-color:var(--ink)}
.filters a.on,.chips a.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* 상세 */
.pdp{padding-top:0}
.crumb{display:flex;gap:4px;align-items:center;font-size:13px;color:var(--sub);padding:20px 0 14px}.crumb a{color:var(--sub)}
.dt{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.dbanner{border-radius:18px;aspect-ratio:16/9;padding:44px}
.dbanner b{font-size:38px;line-height:1.2;max-width:80%}
.dbanner small{font-size:14px}
.dbanner .play{position:absolute;right:24px;bottom:22px;z-index:3;display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:14px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);padding:10px 16px;border-radius:24px}
.dbanner .play:hover{text-decoration:none;background:rgba(0,0,0,.7)}
.tabs{position:sticky;top:var(--hd);z-index:10;background:#fff;display:flex;gap:30px;border-bottom:1px solid var(--line);margin-top:30px;font-size:16px;font-weight:700;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:16px 0;color:var(--sub);white-space:nowrap}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.blk{padding:44px 0 4px}
.blk h3{font-size:23px;letter-spacing:-.035em;margin:0 0 16px}
.blk ul{margin:0;padding-left:20px;color:var(--ink2)}.blk li{margin:5px 0}
.intro p{white-space:pre-line;color:var(--ink2);font-size:15.5px;line-height:1.75}
.intro h3{margin-top:30px}.intro h3:first-child{margin-top:0}
.cur .wk{border:1px solid var(--line);overflow:hidden}
.cur .wk+.wk{border-top:0}
.cur .wk:first-of-type{border-radius:14px 14px 0 0}.cur .wk:last-of-type{border-radius:0 0 14px 14px}.cur .wk:only-of-type{border-radius:14px}
.cur .wk summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:17px 20px;font-weight:700;font-size:15.5px}
.cur .wk summary::-webkit-details-marker{display:none}
.cur .wk summary .w{font-size:12px;font-weight:800;color:var(--pri-ink);background:var(--pri-soft);padding:3px 8px;border-radius:6px;flex:none}
.cur .wk summary .c{margin-left:auto;font-size:13px;font-weight:500;color:var(--sub);flex:none}
.cur .wk summary .chev{transition:transform .2s;color:var(--sub)}.cur .wk[open] .chev{transform:rotate(180deg)}
.cur .ls{display:flex;align-items:center;gap:12px;padding:13px 20px 13px 24px;font-size:14.5px;color:var(--ink2);background:#fcfcfc;border-top:1px solid #f3f3f3}
.cur .ls svg{color:#adb5bd}
.cur .ls .pv{font-size:12px;font-weight:700;color:var(--pri-ink);border:1px solid currentColor;padding:1px 8px;border-radius:12px;flex:none}
.cur .ls .t{margin-left:auto;font-size:13px;color:var(--sub);flex:none}
.ins{display:grid;grid-template-columns:160px 1fr;gap:26px;align-items:start;border-radius:18px;background:var(--soft);padding:24px;margin-bottom:14px}
.ins .av{width:160px;height:190px;border-radius:14px;object-fit:cover;background:#fff;display:grid;place-items:center;font-size:44px;font-weight:800;color:var(--sub)}
.ins b{font-size:20px;letter-spacing:-.03em}
.ins p{white-space:pre-line;margin:10px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.buy{position:sticky;top:calc(var(--hd) + 20px);border-radius:18px;box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.06);padding:24px;background:#fff}
.buy h1{font-size:22px;line-height:1.35;letter-spacing:-.04em;margin:10px 0 6px}
.buy .sum{margin:0 0 6px;color:var(--sub);font-size:14px}
.buy .rt{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--sub)}.buy .rt b{color:var(--ink);display:flex;gap:2px;align-items:center}.buy .rt svg{color:var(--star)}
.buy .tg{background:var(--soft)}.buy .tg.hurry{background:var(--orange)}.buy .tg.dim{background:var(--ink)}
.pbox{margin:16px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pbox .o{font-size:13.5px;color:#adb5bd;text-decoration:line-through;min-height:1em}
.pbox .n{display:flex;align-items:baseline;gap:8px}.pbox .n .dc{color:var(--red);font-size:26px;font-weight:900}.pbox .n b{font-size:28px;font-weight:900;letter-spacing:-.03em}
.pbox .mo{font-size:13px;color:var(--sub);margin-top:2px}.pbox .mo:empty{display:none}
.opt{display:block;border-radius:12px;box-shadow:inset 0 0 0 1px #dedede;padding:13px 16px;margin-bottom:8px;cursor:pointer;position:relative}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked){box-shadow:inset 0 0 0 2px var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--pri-ink);outline-offset:2px}
.opt.off{opacity:.5;cursor:not-allowed}
.opt .r{display:flex;justify-content:space-between;gap:10px;font-weight:700;font-size:15px}
.opt small{display:block;font-size:12.5px;color:var(--sub);margin-top:3px}
.opt .left{color:var(--orange);font-weight:700}
.buy .act{display:grid;grid-template-columns:54px 1fr;gap:8px;margin-top:14px}
.ic-btn{height:54px;border-radius:10px;border:1px solid #d9d9d9;background:#fff;display:grid;place-items:center;font-size:20px;color:var(--ink)}
.ic-btn:hover{background:var(--soft)}.ic-btn.done{color:var(--ok);border-color:var(--ok)}
.perks{margin:18px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink2);display:grid;gap:8px}
.perks li{display:flex;gap:8px;align-items:center}.perks svg{color:var(--sub);width:16px;height:16px}.perks a{color:var(--ink2);text-decoration:underline}
.seat{height:6px;background:var(--soft);border-radius:3px;overflow:hidden;margin:6px 0 2px}.seat i{display:block;height:100%;background:var(--orange)}
.mbar{display:none}

/* 강의실 · 차시 — 시안 H 톤. 내 강의실 목록 · 강의실 홈(.rm) · 차시(.room, 집중형: 왼쪽 영상 · 오른쪽 목차) */
.prog{height:6px;border-radius:3px;background:#eceff1;overflow:hidden;flex:1}
.prog i{display:block;height:100%;background:var(--pri);border-radius:3px}
.pg{display:flex;align-items:center;gap:10px}.pg b{font-size:13px;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.empty-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 20px;border-radius:18px;background:var(--soft);color:var(--sub)}
.empty-box>svg{width:40px;height:40px;stroke-width:1.5}.empty-box b{color:var(--ink);font-size:17px}
.sec.first:first-of-type{margin-top:8px}
.pc.past{opacity:.6}
.pc .go{margin-top:4px;font-size:13.5px;font-weight:700;color:var(--pri-ink)}
.rm{padding-top:0}
.rm-hero{display:grid;grid-template-columns:400px 1fr;gap:36px;align-items:center;padding:4px 0 8px}
.rm-hero .th{border-radius:16px}
.rm-hero .th b{font-size:24px}
.rm-hero .k{display:inline-block;font-size:12px;font-weight:800;color:var(--pri-ink);background:var(--pri-soft);padding:3px 9px;border-radius:6px}
.rm-hero h1{font-size:30px;letter-spacing:-.045em;margin:10px 0 16px}
.rm-hero .pg{max-width:460px}.rm-hero .pg .prog{height:10px;border-radius:5px}.rm-hero .pg b{font-size:18px;min-width:52px}
.facts2{display:flex;gap:18px;flex-wrap:wrap;margin:12px 0 22px;font-size:14px;color:var(--sub)}
.facts2 span{display:flex;align-items:center;gap:6px}.facts2 .warn{color:var(--warn);font-weight:700}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.rm-hero .nx{margin:10px 0 0}
.rm .sec{margin-top:52px}
.sch.done{opacity:.55}
.sch .t .btn{margin-top:6px}
.cur .ls .t1{flex:1;min-width:0}
.cur .ls.go{color:var(--ink)}.cur .ls.go:hover{text-decoration:none;background:var(--soft)}
.cur .ls.lock{color:var(--muted)}
.cur .ls .pbar{width:80px;display:flex}
.cur .ls .btn{flex:none}
.ck{width:22px;height:22px;border-radius:50%;border:2px solid #ced4da;flex:none;display:grid;place-items:center;color:#fff}
.ck svg{width:22px;height:22px;stroke-width:2.4}
.ck.ok{background:var(--ok);border-color:var(--ok)}
.ck.ok svg circle{display:none}

.room{display:grid;grid-template-columns:minmax(0,1fr) 360px;min-height:calc(100vh - var(--hd));background:#fff}
.room~.ft,main:has(.room)+.ft{margin-top:0}
.main{min-width:0;padding:0 0 48px}
.stage-v{background:#0b0b0b;padding:0}
.stage-v .player{border-radius:0;max-height:calc(100vh - var(--hd) - 110px);margin:0 auto;aspect-ratio:16/9}
.under{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:20px 28px 0;flex-wrap:wrap}
.under .ttl{min-width:0}.under .k{font-size:13px;font-weight:700;color:var(--pri-ink);margin-bottom:4px}
.under h1{margin:0;font-size:23px;letter-spacing:-.04em}
.pn{display:flex;gap:8px}
.note{margin:12px 28px 0;font-size:13px;color:var(--sub)}
.pane{margin:18px 28px 0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:20px}
.pane h3{font-size:16px;margin:0 0 12px}
.pane.post{font-size:15.5px;color:var(--ink2)}
.main form{margin:18px 28px 0}
.mat{display:flex;gap:8px;flex-wrap:wrap}
.mat a{display:flex;align-items:center;gap:6px;border-radius:10px;background:var(--soft);padding:10px 14px;font-size:14px;color:var(--ink);font-weight:600}
.mat a:hover{text-decoration:none;background:#eee}
.chap{display:flex;flex-wrap:wrap;gap:8px}
.chap button{border:1px solid #dedede;background:#fff;border-radius:999px;padding:7px 13px;font-size:13px;color:var(--ink2)}
.chap button:hover{border-color:var(--ink)}
.chap button b{color:var(--pri-ink);margin-right:6px;font-variant-numeric:tabular-nums}
.side{border-left:1px solid var(--line);background:#fafafa;padding:20px 18px;overflow:auto;max-height:calc(100vh - var(--hd));position:sticky;top:var(--hd)}
.side .back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--sub)}
.side h2{font-size:17px;margin:10px 0 10px;letter-spacing:-.03em}
.side .pg{margin-bottom:4px}
.side .w{margin-top:20px}.side .w>b{display:block;font-size:12.5px;color:var(--sub);margin-bottom:4px}
.side .l{display:flex;gap:10px;align-items:center;padding:10px 10px;border-radius:10px;font-size:14px;margin-top:2px;color:var(--ink)}
.side .l:hover{text-decoration:none;background:#f0f0f0}
.side .l.on{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:700}
.side .l.lock{color:var(--muted)}.side .l.lock>svg{width:16px;height:16px;margin:0 3px}
.side .l .t{flex:1;min-width:0}
.side .l small{color:var(--muted);font-weight:400;font-size:12px;flex:none}
.side .l .ck{width:20px;height:20px}.side .l .ck svg{width:20px;height:20px}

.player{position:relative;background:#0b1220;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wm{position:absolute;z-index:3;color:rgba(255,255,255,.5);font-size:13px;font-weight:700;pointer-events:none;text-shadow:0 0 3px rgba(0,0,0,.6);transition:top 1s,left 1s}
.stopped{position:absolute;inset:0;z-index:4;background:rgba(10,18,32,.86);color:#fff;display:grid;place-items:center;text-align:center;padding:20px}
.ticket{text-align:center}
.ticket .no{font-size:24px;font-weight:800;letter-spacing:.08em}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--line2)}
th{color:var(--muted);font-size:12.5px;font-weight:700}
td.r,th.r{text-align:right}

.post{white-space:pre-wrap;line-height:1.75}
.cmt{border-top:1px solid var(--line2);padding:10px 0}
.cmt.ans{background:var(--pri-soft);border-radius:10px;padding:10px 12px;border-top:0;margin-top:8px}

/* 바닥글 */
.ft{margin-top:88px;border-top:1px solid var(--line);background:#fafafa;font-size:13px;color:var(--sub)}
.ft-in{max-width:1200px;margin:0 auto;padding:0 24px}
.ft .top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;padding:44px 0 32px}
.ft h4{margin:0 0 12px;font-size:14px;color:var(--ink)}
.ft ul{list-style:none;margin:0;padding:0;line-height:2.1}.ft ul a{color:var(--sub)}
.ft .cs b{display:block;font-size:24px;color:var(--ink);letter-spacing:-.03em;margin:2px 0 6px}
.ft .biz{border-top:1px solid var(--line);padding:22px 0 40px;line-height:1.9;font-size:12px}
.ft .biz .lk a{color:var(--ink2);margin-right:14px}.ft .biz b{color:var(--ink)}
.room-page .ft{margin-top:0}

/* 후기 */
.star{color:var(--star);letter-spacing:1px}
.rate-line{display:inline-flex;gap:6px;align-items:center;margin-top:10px;font-size:14px;color:var(--ink)}
.rv-sum{display:flex;gap:32px;align-items:center;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:24px;margin-bottom:12px;flex-wrap:wrap}
.rv-sum .big{display:flex;flex-direction:column;align-items:center;min-width:140px}.rv-sum .big b{font-size:48px;font-weight:900;letter-spacing:-.04em;line-height:1.05}
.rv-sum .dist{flex:1;min-width:200px}.rv-sum .dist>div{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--sub);margin:3px 0}
.rv-sum .bar{flex:1;height:8px;background:var(--soft);border-radius:4px;overflow:hidden}.rv-sum .bar i{display:block;height:100%;background:var(--star)}
.rv{border-bottom:1px solid var(--line);padding:20px 0}
.rv .tt{display:block;margin-top:8px}.rv .post{margin:6px 0 0;color:var(--ink2);font-size:15px}
.rv .reply{background:var(--soft);border-radius:10px;padding:12px 16px;margin-top:10px;font-size:14px}.rv .reply .post{margin:4px 0 0}
.rv-mine .post{color:var(--sub)}
details.box>summary{cursor:pointer}
.stars-in{display:inline-flex;flex-direction:row-reverse;gap:2px}
.stars-in input{position:absolute;opacity:0;width:1px;height:1px}
.stars-in label{font-size:30px;color:#dee2e6;cursor:pointer;line-height:1}
.stars-in input:checked~label,.stars-in label:hover,.stars-in label:hover~label{color:var(--star)}
.stars-in input:focus-visible+label{outline:2px solid var(--pri-ink);outline-offset:2px}

/* 쿠폰함 */
.cp{display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:10px;background:#fff}
.cp .amt{width:120px;flex:none;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri-ink);font-weight:800;font-size:19px;border-right:2px dashed var(--line);padding:16px 8px;text-align:center}
.cp .bd{padding:14px 16px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cp small{color:var(--muted);font-size:12.5px}
.cp.off{opacity:.5}

/* 반응형 */
.m-only{display:none!important}
.burger{display:none;background:none;border:0;padding:6px;font-size:24px;color:var(--ink)}
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr)}.teachers{grid-template-columns:repeat(4,1fr)}
  .dt{grid-template-columns:minmax(0,1fr) 340px;gap:28px}
}
@media (max-width:860px){
  :root{--hd:56px}
  .hd-in{padding:0 16px}
  .hd .r1{height:56px;gap:12px}
  .hd .search,.icons .lb,.icons .pc-only{display:none}
  .icons a{padding:6px}
  .burger{display:inline-flex}
  .hd .r2{display:none}
  .hd .r2.open{display:flex;flex-direction:column;align-items:stretch;height:auto;gap:0;padding:6px 0 12px;border-top:1px solid var(--line)}
  .hd .r2.open a{padding:11px 0;height:auto}.hd .r2.open a.on{box-shadow:none}
  .hd .r2.open .m-only{display:flex!important}
  .hd .r2.open .right{margin:8px 0 0}
  .wrap{padding:16px 16px 40px}
  .home{padding-top:12px}
  .slides{aspect-ratio:4/3;border-radius:14px}
  .ctrl{right:12px;bottom:12px}
  .fhero{grid-template-columns:1fr;border-radius:14px;min-height:0}
  .fhero .th{order:-1;aspect-ratio:16/10}.fhero .th:not(.img){display:none}
  .fhero .tx{padding:22px 20px 24px}.fhero h1{font-size:25px}.fhero p{font-size:14.5px}.fhero .btn{width:100%}
  .quick{grid-template-columns:repeat(4,1fr);gap:4px 0;margin-top:22px}.quick span{width:52px;height:52px;font-size:22px;border-radius:17px}.quick a{font-size:12.5px}
  .sec{margin-top:44px}.sh h2{font-size:20px}
  .grid{grid-template-columns:1fr 1fr;gap:22px 12px}
  .th{padding:10px}.th b{font-size:14.5px}.th small{font-size:10.5px}
  .pc .tt{font-size:14px}.price{font-size:15px}
  .coupon{flex-wrap:wrap;padding:22px;gap:16px;border-radius:16px}.coupon .btn{margin-left:0;width:100%}.coupon .tk{width:120px;height:72px}
  .teachers{grid-template-columns:repeat(3,1fr);gap:16px 12px}
  .reviews,.sched{grid-template-columns:1fr}
  .ft{margin-top:56px}.ft .top{grid-template-columns:1fr 1fr;gap:24px}.ft .top>div:first-child{grid-column:span 2}
  .crumb{display:none}
  .pdp{padding-top:0}
  .dt{grid-template-columns:1fr;gap:0}
  .dmain{display:contents}
  .dbanner{order:1;border-radius:0;margin:0 -16px;aspect-ratio:4/3;padding:20px}.dbanner b{font-size:26px;max-width:none}
  .dbanner .play{top:14px;right:14px;bottom:auto;font-size:13px;padding:8px 13px}
  .buy{order:2;position:static;box-shadow:none;padding:18px 0 0;border-radius:0}
  .buy .act{display:none}
  .dmain>*:not(.dbanner){order:3}
  .tabs{top:var(--hd);gap:20px;font-size:15px;margin-top:20px}
  .blk h3{font-size:20px}
  .ins{grid-template-columns:1fr;padding:20px}.ins .av{width:100%;height:240px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:#fff;border-top:1px solid var(--line);padding:10px 16px 14px;gap:12px;align-items:center}
  .mbar .price{margin:0;flex:1;display:block;line-height:1.2}.mbar .price small{display:block;font-size:12px;color:var(--sub);font-weight:500}
  .mbar .btn{flex:1.4}.mbar .ic-btn{width:50px;height:50px;flex:none}
  .pdp~.ft,.pdp .blk:last-child{padding-bottom:20px}
  body:has(.mbar) .ft{padding-bottom:84px}
  .room{grid-template-columns:1fr}
  .side{border-left:0;border-top:1px solid var(--line);position:static;max-height:none;padding:18px 16px}
  .main{padding:0 0 20px}
  .stage-v{position:sticky;top:var(--hd);z-index:12}
  .under{padding:16px 16px 0}.under h1{font-size:19px}.pn{width:100%}.pn .btn{flex:1}
  .note{margin:10px 16px 0}.pane{margin:14px 16px 0;padding:16px}.main form{margin:14px 16px 0}
  .rm-hero{grid-template-columns:1fr;gap:18px}.rm-hero h1{font-size:23px}.acts .btn{flex:1}.acts .btn.pri{flex-basis:100%}
  .rm .sec{margin-top:40px}
}
/* ── 시안 H 전체 기능(D-39) ───────────────────────────── */
/* 맨 위 띠 */
.promo{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:9px 44px;position:relative;line-height:1.5}
.promo b{color:#ffd43b}.promo a{white-space:nowrap;color:#fff;text-decoration:underline;text-underline-offset:2px;margin-left:10px;opacity:.85}
.promo .x{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#fff;opacity:.7;background:none;border:0;padding:6px;display:grid}
.promo .x:hover{opacity:1}
/* 머리글 — 전체 카테고리 · 알림 점 · 신규 N */
.hd .r2 .allcat{position:relative;height:100%;display:flex;align-items:center;margin-right:4px}
.hd .r2 .all{display:flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-weight:700;color:var(--ink);padding:0;height:100%}
.hd .r2 .all:hover{color:var(--pri-ink)}
.catmenu{position:absolute;top:100%;left:-12px;z-index:40;background:#fff;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 16px 40px rgba(0,0,0,.12);padding:10px;display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:2px;min-width:380px}
.catmenu[hidden]{display:none}
.hd .r2 .catmenu a{height:auto;display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;font-size:14px;font-weight:600}
.hd .r2 .catmenu a:hover{background:var(--soft);color:var(--ink)}
.catmenu .ci{width:32px;height:32px;border-radius:10px;background:var(--soft);display:grid;place-items:center;font-size:16px;font-weight:800;flex:none}
.hd .r2 .new{font-size:10px;font-weight:800;color:var(--pri-ink);margin-left:2px;align-self:flex-start;margin-top:10px}
.icons a{position:relative}
.icons .dot{position:absolute;top:3px;right:calc(50% - 14px);width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px #fff}
/* 카드 — 링크 + 하트 */
.pcw{position:relative}
.pcw .pl{display:flex;flex-direction:column;color:var(--ink);min-width:0}
.pcw .pl:hover{text-decoration:none}
.pcw .pl:hover .th img{transform:scale(1.04)}
.wish{position:absolute;right:8px;top:8px;z-index:4;margin:0}
.wish button,.wish>span{width:34px;height:34px;display:grid;place-items:center;color:#fff;font-size:20px;background:none;border:0;padding:0;border-radius:50%}
.wish svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.wish:hover button,.wish:hover>span{background:rgba(0,0,0,.18)}
.wish.on button{color:var(--red)}.wish.on svg{fill:currentColor}
.rank{min-width:24px;height:22px;padding:0 6px;border-radius:5px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;display:inline-grid;place-items:center}
.tg.best{background:var(--pri);color:var(--on-pri)}.tg.new{background:#1c7ed6;color:#fff}
.price .mo{width:100%;font-size:12px;color:var(--sub);font-weight:500;letter-spacing:0}
/* 목록 정렬 */
.sorts{display:flex;gap:18px;margin:4px 0 20px;font-size:14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sorts a{color:var(--sub);padding:10px 0;white-space:nowrap;font-weight:600}
.sorts a:hover{color:var(--ink);text-decoration:none}
.sorts a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.search.wide-s{max-width:none;margin-bottom:14px;height:48px}
/* 곧 시작하는 기수 */
.cohorts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.co{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);align-items:center;color:var(--ink)}
.co:hover{text-decoration:none;box-shadow:inset 0 0 0 1px #d0d0d0,var(--sh)}
.co .th{aspect-ratio:16/10;border-radius:10px;padding:8px}.co .th b{font-size:12px}.co .th small{display:none}
.co .bd{min-width:0}
.co .dd{display:inline-block;font-size:12px;font-weight:800;color:var(--pri-ink);background:var(--pri-soft);padding:3px 8px;border-radius:6px}
.co h3{font-size:16px;margin:8px 0 4px;letter-spacing:-.03em;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co .d{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:5px}
.co .bar{height:6px;border-radius:3px;background:var(--soft);margin:10px 0 5px;overflow:hidden}.co .bar i{display:block;height:100%;background:var(--orange);border-radius:3px}
.co .sl{font-size:12px;color:var(--sub);display:flex;justify-content:space-between}.co .sl b{color:var(--orange)}
/* 숫자 띠 */
.nums{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;border-radius:20px;background:var(--soft);padding:30px 0}
.nums div{text-align:center}.nums div+div{border-left:1px solid #e3e3e3}
.nums b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em}.nums span{font-size:13.5px;color:var(--sub)}
/* 상세 — 소개 블록 */
.blk>h2,.blk h2{font-size:24px;letter-spacing:-.035em;margin:0 0 6px}
.blk p.s{margin:0 0 20px;color:var(--sub)}
.blk .gap,.blk h2.gap{margin-top:44px}
.tabs a small{font-size:13px;margin-left:3px;color:var(--pri-ink)}
.fits{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fits div{display:flex;gap:12px;align-items:flex-start;background:var(--soft);border-radius:14px;padding:18px;font-size:15px;line-height:1.5;font-weight:500}
.fits svg{flex:none;color:var(--pri-ink);width:22px;height:22px;margin-top:1px}
.gains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gain{border-radius:16px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.gain img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gain div{padding:16px 18px 20px}.gain b{font-size:16px;letter-spacing:-.03em}.gain p{margin:6px 0 0;font-size:14px;color:var(--sub);line-height:1.55}
.gain .n{display:block;font-size:12px;font-weight:800;color:var(--pri-ink);margin-bottom:4px}
#preview-box h2{margin-bottom:14px}
/* 상세 — 강사 */
.ins h3{margin:0;font-size:22px;letter-spacing:-.03em}.ins h3 small{font-size:14px;color:var(--sub);font-weight:500;margin-left:8px}
.careers{margin:12px 0 4px;padding:0;list-style:none;line-height:1.9;font-size:14.5px;color:var(--ink2)}
.careers li{display:flex;gap:8px;align-items:flex-start}.careers svg{color:var(--sub);margin-top:5px}
.ist{display:flex;gap:28px;margin-top:16px}.ist b{display:block;font-size:20px;letter-spacing:-.03em}.ist span{font-size:12.5px;color:var(--sub)}
/* 상세 — 후기 */
.rv .hd2{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--sub)}
.rv .hd2>i{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--ink2);flex:none}
.rv .hd2 b{display:block;color:var(--ink);font-size:14px}.rv .hd2 .star{font-size:12px}
.rv .hd2 .when{margin-left:auto;text-align:right}
.rv .tt,.rv .post,.rv .reply,.rv .act{margin-left:48px}
.rv .act{display:flex;align-items:center;gap:14px;margin-top:10px}
.rv .act form{margin:0}
.help{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--sub);background:#fff;border:1px solid #dedede;border-radius:16px;padding:5px 11px}
.help:hover{border-color:var(--ink);color:var(--ink)}
.help.on{border-color:var(--pri);color:var(--pri-ink);background:var(--pri-soft)}
.help.ro{border-color:transparent;padding-left:0}
.rv .linkbtn{margin:0}
/* 상세 — 자주 묻는 질문 · 환불 표 */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;display:flex;gap:10px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary b{color:var(--pri-ink)}.faq summary span{flex:1}
.faq summary .chev{color:var(--sub);transition:transform .2s;margin-top:3px}.faq details[open] .chev{transform:rotate(180deg)}
.faq details p{margin:0 0 18px 24px;color:var(--ink2);font-size:14.5px;line-height:1.7;white-space:pre-line}
.rf{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px;border-top:1px solid var(--line)}
.rf th,.rf td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left}.rf th{background:var(--soft);font-weight:600;width:55%;color:var(--ink2);font-size:14px}
/* 상세 — 신청 카드 */
.buy .rt a{display:flex;align-items:center;gap:6px;color:var(--sub)}.buy .rt{flex-wrap:wrap;gap:2px}
.pbox .cpn{margin-top:12px;display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--pri) 7%,#fff);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--pri-ink);font-weight:600}
.pbox .cpn b{margin-left:auto;font-size:15px}.pbox .cpn[hidden]{display:none}
.buy .act{grid-template-columns:54px 54px 1fr}
.ic-wish{position:static}
.ic-wish button.ic-btn{width:100%;height:54px;color:var(--ink);border:1px solid #d9d9d9;background:#fff;border-radius:10px}
.ic-wish.on button.ic-btn{color:var(--red)}.ic-wish.on svg{fill:currentColor}
.ic-wish button svg{filter:none}
a.ic-btn{color:var(--ink)}a.ic-btn:hover{text-decoration:none}
/* 알림 */
.alerts{border-top:2px solid var(--ink)}
.al{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.al:hover{text-decoration:none;background:var(--soft)}
.al .ai{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:20px;flex:none}
.al .ai.LIVE{background:var(--pri-soft);color:var(--pri-ink)}.al .ai.COUPON,.al .ai.DEPOSIT{background:var(--warn-bg);color:var(--warn)}.al .ai.ANSWER,.al .ai.REFUND{background:var(--ok-bg);color:var(--ok)}
.al .tx{flex:1;min-width:0;display:flex;flex-direction:column}.al .tx span{font-size:13.5px;color:var(--sub)}
.al .go{color:var(--muted)}
.empty-box span{font-size:14px}
/* 바닥글 — 운영 시간 · SNS */
.ft .hours{margin:0 0 6px;white-space:pre-line;line-height:1.7}
.ft .sns{display:flex;gap:8px;margin-top:14px}
.ft .sns a{width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;font-size:17px;color:var(--ink2)}
.ft .sns a:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:1080px){.cohorts{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .promo{font-size:12px;padding:8px 36px}
  .catmenu{position:static;box-shadow:none;padding:0 0 6px;grid-template-columns:1fr 1fr;min-width:0}
  .hd .r2.open .allcat{height:auto;flex-direction:column;align-items:stretch}
  .hd .r2.open .all{padding:11px 0}
  .cohorts,.fits,.gains{grid-template-columns:1fr}
  .co{grid-template-columns:120px 1fr}
  .nums{grid-template-columns:1fr 1fr;row-gap:20px;margin-top:44px}.nums div:nth-child(3){border-left:0}.nums b{font-size:24px}
  .ist{gap:20px}
  .rv .tt,.rv .post,.rv .reply,.rv .act{margin-left:0}
  .mbar .ic-wish button.ic-btn,.mbar a.ic-btn{width:50px;height:50px}
  .mbar .ic-wish{flex:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 레이어 팝업(D-40) — 뒤를 어둡게 덮고 화면 가운데. 여러 개면 가운데에 나란히, 휴대폰은 가운데 한 장씩 */
.pops{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:flex;gap:16px;align-items:center;justify-content:center;padding:24px}
.pops[hidden]{display:none}
.pop{width:360px;max-width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.pop-img{display:block}.pop-img img{display:block;width:100%;height:auto;max-height:calc(100vh - 120px);object-fit:cover}
.pop-bar{display:flex;border-top:1px solid var(--line)}
.pop-bar button{flex:1;border:0;background:#fff;padding:12px 8px;font-size:13.5px;color:var(--ink2)}
.pop-bar button+button{border-left:1px solid var(--line);font-weight:700;color:var(--ink)}
.pop-bar button:hover{background:var(--soft)}
@media (max-width:720px){
  .pops{padding:20px}
  .pop{width:min(340px,100%)}
  .pop:not(:first-child){display:none}
  .pop-img img{max-height:calc(100vh - 140px)}
}

/* 홈 중간 배너 슬라이드(D-40) — 한 장씩 가로로 넘긴다 */
.bands{margin-top:64px;position:relative;overflow:hidden;border-radius:20px}
.bands-track{display:flex;transition:transform .5s ease}
.bands .coupon{flex:0 0 100%;margin-top:0;border-radius:0}
.bands-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px}
.bands-dots button{width:7px;height:7px;border-radius:4px;border:0;padding:0;background:rgba(255,255,255,.35);transition:width .2s}
.bands-dots button.on{width:20px;background:#fff}
@media (prefers-reduced-motion:reduce){.bands-track{transition:none}}
@media (max-width:720px){.bands{border-radius:16px}.bands-dots{bottom:8px}}

/* 히어로 배너 글자(D-40) — 시안 H: 왼쪽 어둡게 + 배지 13px · 제목 40px/800 · 서브 16px · 버튼 · 연관 강사 */
.slide-bg{position:absolute;inset:0;display:block}.slide-bg picture{display:block;height:100%}
.slide.tx-on .slide-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78) 0,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 75%)}
.slide .tx{position:absolute;left:56px;top:50%;transform:translateY(-50%);z-index:1;color:#fff;max-width:560px;pointer-events:none}
.slide .tx a{pointer-events:auto}
.slide .tx .bd{display:inline-flex;align-items:center;font-size:13px;font-weight:700;padding:6px 12px;border-radius:20px;background:var(--pri);color:var(--on-pri)}
.slide .tx h2{font-size:40px;line-height:1.22;letter-spacing:-.04em;font-weight:800;margin:14px 0 12px;color:#fff}
.slide .tx p{margin:0 0 22px;font-size:16px;opacity:.85}
.slide .tx .row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.slide .tx .hbtn{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.slide .tx .hbtn:hover{text-decoration:none;filter:brightness(1.06)}
.slide .tx .who{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.92}
.slide .tx .who img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}
@media (max-width:720px){
  .slide.tx-on .slide-bg::after{background:linear-gradient(180deg,rgba(0,0,0,0) 25%,rgba(0,0,0,.85))}
  .slide .tx{left:20px;right:20px;top:auto;bottom:66px;transform:none;max-width:none}
  .slide .tx h2{font-size:26px;margin:10px 0 8px}
  .slide .tx p{font-size:14px;margin-bottom:12px}
  .slide .tx .hbtn{padding:10px 16px;font-size:14px;min-height:0}
  .slide .tx .who{font-size:13px}
}

/* 강사 지원(D-40) */
.teach{max-width:760px}
.teach-f{padding:24px}
.teach .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.teach .f{margin-bottom:14px}
.teach .req{font-size:11px;font-weight:700;color:var(--pri-ink);margin-left:4px}
.teach .lb small{font-weight:400;color:var(--sub);font-size:12.5px;margin-left:4px}
.teach input[type=text],.teach input[type=email],.teach input[type=tel],.teach input[type=url],.teach textarea{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.agree-box{background:var(--soft);border-radius:12px;padding:16px 18px;margin:6px 0 18px;font-size:13.5px}
.agree-box table{width:100%;border-collapse:collapse;margin:10px 0}
.agree-box th{width:84px;text-align:left;font-weight:600;color:var(--ink2);padding:5px 0;vertical-align:top}
.agree-box td{padding:5px 0;color:var(--ink2)}
.agree-box p{margin:0 0 10px;color:var(--sub);font-size:12.5px}
.btn.block{display:flex;width:100%;justify-content:center}
.done-card{text-align:center;padding:48px 24px}
.done-card .ic.big{width:52px;height:52px;color:var(--ok);stroke-width:1.6}
.done-card h1{margin:14px 0 8px;font-size:24px}.done-card p{color:var(--sub);margin:0 0 22px}
@media (max-width:720px){.teach .grid2{grid-template-columns:1fr}.teach-f{padding:18px}}
/* 자동 넘김 멈춤 버튼(D-40) — 움직임 줄이기 설정이면 효과 없이 바로 바뀐다 */
.bands-dots{align-items:center}
.bands-dots .bp{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;margin-left:4px}
.bands-dots .bp .ic{width:12px;height:12px;stroke-width:2.4}
.bands-dots .bp.on,.bands-dots .bp:hover{background:rgba(255,255,255,.25);width:22px}
.ctrl #hp .ic{width:15px;height:15px;stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

/* 아바타 메뉴(D-41) — 로그아웃 등 개인 메뉴 */
.me-wrap{position:relative}
.icons .me{border:0;background:none;padding:4px 0 4px 6px;cursor:pointer;border-radius:50%}
.icons .me:hover .ava,.icons .me[aria-expanded=true] .ava{background:var(--pri);color:var(--on-pri)}
.me-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:120;width:220px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px}
.me-menu[hidden]{display:none}
.me-h{padding:10px 12px 10px;border-bottom:1px solid var(--line2);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.me-h b{font-size:14.5px;color:var(--ink)}.me-h small{font-size:12px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-menu a,.me-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:9px;font-size:14px;color:var(--ink2);background:none;border:0;text-align:left;cursor:pointer;flex-direction:row;max-width:none}
.me-menu a:hover,.me-menu button:hover,.me-menu a:focus-visible,.me-menu button:focus-visible{background:var(--soft);color:var(--ink);text-decoration:none}
.me-menu .ic{width:17px;height:17px;color:var(--sub)}
.me-menu form{margin:4px 0 0;padding-top:4px;border-top:1px solid var(--line2)}
/* 처리 중 · 불러오는 중 암전 레이어(화면 구현 원칙 2026-11-06 · D-42) — on: 바로 클릭을 막음(투명) · dim: 0.2초 넘으면 어둡게 + 글 */
.busy{position:fixed;inset:0;z-index:2000;display:none;place-items:center;background:transparent;cursor:progress}
.busy.on{display:grid}
.busy.dim{background:rgba(0,0,0,.45);transition:background .15s}
.busy-box{display:none;align-items:center;gap:10px;background:#fff;color:#111;border-radius:12px;padding:14px 20px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.busy.dim .busy-box{display:flex}
.busy-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid #ddd;border-top-color:var(--pri,#e8344e);animation:busy-r .8s linear infinite}
@keyframes busy-r{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.busy-spin{animation-duration:2.4s}.busy.dim{transition:none}}

/* D-44 상품 구성 — 가격 단계 배지 · 「포함」 구성품 · 수강생 전용 · 구성품별 환불 표 · 강의실 구성품 이름 */
.tg.tier,.buy .tg.tier{background:var(--red,#e11d48);color:#fff}
.tg.tier[hidden]{display:none}
.pb-tier{display:flex;align-items:center;gap:8px;min-height:0}.pb-tier .urg{font-size:13px;font-weight:700;color:var(--orange)}.pb-tier .urg:empty{display:none}
.opt .r .pr{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.opt .r .pr s{font-size:12.5px;font-weight:500;color:#adb5bd}
.opt .r .tg.tier{margin-left:4px;vertical-align:1px}
.opt-parts{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;font-size:12.5px}
.opt-parts li{background:var(--soft);border-radius:6px;padding:2px 7px;color:var(--ink2)}
.opt-parts li.h{background:none;padding:2px 0;font-weight:700;color:var(--sub)}
.opt small.urg,p.urg{color:var(--orange);font-weight:700;margin:4px 0 0}
.opt small.only{display:flex;align-items:center;gap:4px;color:var(--pri-ink);font-weight:600}.opt small.only .ic{width:13px;height:13px}
.opt small.why{color:var(--err);font-weight:600}
.opt.off small.why{opacity:1}
.ptbl{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0}
.ptbl th,.ptbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ptbl thead th{background:var(--soft);font-weight:600;color:var(--ink2);white-space:nowrap}
.ptbl tfoot th{font-weight:600;color:var(--sub)}
.ptbl td:last-child,.ptbl th:last-child{text-align:right;white-space:nowrap}
@media (max-width:560px){.ptbl{font-size:12.5px}.ptbl th,.ptbl td{padding:8px 6px}}
.pc .ent-part{font-size:12.5px;font-weight:700;color:var(--pri-ink);margin:-2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 상담 버튼(D-45) — 오른쪽 아래. 상품 상세의 모바일 구매 띠(.mbar) 위로 비켜 선다 */
.consult{position:fixed;right:20px;bottom:20px;z-index:30;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.consult a,.consult button{display:inline-flex;align-items:center;gap:7px;height:48px;padding:0 18px;border-radius:24px;border:0;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:none}
.consult .ic{width:20px;height:20px;fill:currentColor;stroke:none}
.consult [hidden]{display:none}
.consult-kk{background:#fee500;color:#191600}
.consult-ct{background:var(--pri);color:var(--on-pri)}
@media (max-width:860px){
  .consult{right:14px;bottom:14px}
  .consult a,.consult button{width:48px;padding:0;justify-content:center}
  .consult span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body:has(.mbar) .consult{bottom:92px}
}
@media print{.consult{display:none}}

/* 결과 안내 알림 — 맨 위 안내 문구가 화면 밖일 때 아래쪽에 잠깐(2026-11-09) */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:1000;max-width:min(92vw,520px);padding:12px 18px;border-radius:12px;
  background:#1f2a37;color:#fff;font-size:14px;font-weight:600;line-height:1.5;box-shadow:0 8px 28px rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#b42318}
@media print{.toast{display:none}}
@media (max-width:860px){body:has(.mbar) .toast{bottom:92px}}