/* 허봇스 개편 1102 — 공통 틀 (11-03 시각 90 판 · 2차)
   정본: 시안_1027\03_규칙.md (색 6 · 글자 단계 · 간격 5단계 · 단추 2종) + 개편_1102\효과지도_1103.md (화면별 주연 효과).
   그라데이션은 한 줄도 없다 — 빛은 전부 「둥근 상자를 흐린 것」과 clip-path 로 만든다.

   11-03 2차에서 바뀐 것: 흐림 등장 전부 삭제(제목은 낱말 마스크로 0.6초 안에 솟고, 본문은 0.45초) · 고정 구간 길이 30% 단축·섹션 여백 축소(죽은 화면 없앰) ·
   세 페이지 뒤에 고정된 점 한 장(.spine, WebGL 하나)이 화면마다 그 화면의 모양으로 모인다 · 후기 벽·세 기둥은 파란 먹빛 단색 + 작은 판 + 위아래 어둠 ·
   회전목마는 왼쪽 큰 글자·오른쪽 판 · 터널은 빛나는 문틀 · 큰 제목은 커서 근처 글자만 밝아짐(.proxi) · 거대한 이름은 아래에서 위로 차오름.
   v2(11-03 대표님 피드백 9 + 클로드 4): 등뼈 점 모양은 전부 둥근 것(은하 나선·고리 터널·레이더·궤도·빛무리·호)으로, 스크롤 진행도로 연속 보간 · 문 카드 점 테두리는 카드 자리에 정확히 ·
   수업일지는 가운데 정렬(.jn) · 터널 글 판은 틀 없이 · 제목 낱말 등장 0.45초.
   효과 층은 전부 html.fx(자바스크립트 + GSAP + 움직임 허용) 아래에만 있다. 그 밖(움직임 줄이기·JS 없음·GSAP 없음)은 평범한 세로 배치로 전부 읽힌다.

   규칙과 달리 정한 것 하나: 주 단추 글자는 규칙의 「흰 글」 대신 바탕색(#0A0A0B)이다(대비 5.7:1). */

@font-face{font-family:"P";src:url(fonts/pretendard-200.woff2) format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"P";src:url(fonts/pretendard-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"P";src:url(fonts/pretendard-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"P";src:url(fonts/pretendard-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"P";src:url(fonts/pretendard-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"P";src:url(fonts/pretendard-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"B";src:url(fonts/bahn-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"B";src:url(fonts/bahn-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0A0A0B; --bg0:#0A0A0B; --face:#141416; --line:#242426; --ink:#F2F0EB; --ink2:#ABABA6; --blue:#4F86F7;
  --ink-a18:rgba(242,240,235,.18); --ink-a10:rgba(242,240,235,.1); --blue-rgb:79,134,247; --face-rgb:20,20,22; --ink-rgb:242,240,235;
  --sans:"P",system-ui,-apple-system,"Malgun Gothic",sans-serif; --num:"B","P",system-ui,sans-serif;
  --t0:128px; --t1:96px; --t2:56px; --t3:32px; --t4:20px; --t5:18px; --t6:14px; --num-big:56px;
  --s1:8px; --s2:16px; --s3:32px; --s4:64px; --s5:clamp(72px,10vh,144px);
  --gut:64px; --bar:64px; --r:16px;
}
@media (max-width:1100px){:root{--gut:32px;--t0:96px;--t1:72px}}
@media (max-width:720px){:root{--t0:56px;--t1:44px; --t2:32px; --t3:22px; --t4:18px; --t5:16px; --t6:13px; --num-big:36px; --gut:16px}}

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + var(--s2));scroll-behavior:smooth;transition:background-color 1.2s}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t5)/1.65 var(--sans);letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;-webkit-font-smoothing:antialiased;transition:background-color 1.2s}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
/* ── 줄 바꿈 (문안정본_1103 규칙 6) — 제목은 balance + 조사 뒤에서만, 본문은 pretty. 정본의 ⏎ 자리는 PC(900px 이상)에서만 br.pc 로 끊고 휴대폰은 자연 줄바꿈.
   강조 단어(몇 번째·답답·2.3배·카드 12장…)는 한 줄에 묶는다(.nw · 제목 안 b/em/.blue/.glint/[data-land]). 낱말 마스크(.wm)끼리 띄어쓰기 없이 붙은 자리는 JS 가 .nw 로 묶어 조사가 떨어지지 않는다 */
h1,h2,h3{text-wrap:balance;word-break:keep-all}
p,li,label,small,.route a,.ladder a,.doors .say{text-wrap:pretty}
br.pc{display:none}
@media (min-width:900px){br.pc{display:inline}}
.nw,h1 b,h1 em,h2 b,h2 em,h3 b,h1 .blue,h2 .blue,h3 .blue,.glint,[data-land],.big .blue{white-space:nowrap}
.pc-only{display:inline}.m-only{display:none}
@media (max-width:720px){.pc-only{display:none}.m-only{display:inline}}
/* ── 얻는 것 줄 — 입력·신청·결제가 있는 화면마다 제목 바로 위 같은 자리. 명사 셋 이하, 「·」 구분. 눈에 띄되 제목보다 작게(파란 점 하나 + 본색 글자) */
.gain{display:flex;align-items:center;gap:var(--s1);font-size:var(--t6);font-weight:500;letter-spacing:.06em;line-height:1.6;color:var(--ink);margin-bottom:var(--s2)}
.gain::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px 2px rgba(var(--blue-rgb),.55)}
h1,h2,.h-size1,.h-size2{font-weight:800;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
h1,.h-size1{font-size:var(--t1)}
h2,.h-size2{font-size:var(--t2)}
h3{font-size:var(--t4);font-weight:700;letter-spacing:-.02em;line-height:1.35}
.lead{font-size:var(--t0);font-weight:200;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.lead b{font-weight:800}
.big{font-size:var(--t3);font-weight:300;line-height:1.4;letter-spacing:-.02em;max-width:24em;text-wrap:pretty}
.big b{font-weight:700}
.sub{color:var(--ink2);max-width:34em;margin-top:var(--s2);text-wrap:pretty}
.small{font-size:var(--t6);font-weight:500;letter-spacing:.02em;line-height:1.6;color:var(--ink2)}
.small b{color:var(--ink);font-weight:500}
.lab{font-size:var(--t6);font-weight:500;letter-spacing:.06em;line-height:1.6;color:var(--ink2);margin-bottom:var(--s2);text-transform:uppercase}
.blue{color:var(--blue)}
.numf{font-family:var(--num);font-variant-numeric:tabular-nums}
.wrap{width:100%;max-width:1312px;margin:0 auto;padding-inline:var(--gut)}
.blk{padding-top:var(--s5);position:relative}
.blk.last{padding-bottom:var(--s5)}
.skip{position:absolute;left:var(--s2);top:calc(var(--s1) * -8);min-height:44px;display:inline-flex;align-items:center;background:var(--ink);color:var(--bg0);padding:var(--s1) var(--s2);border-radius:var(--r);z-index:30}
.skip:focus{top:var(--s1)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--s1)}

/* ── 상단 — 스크롤 내리면 유리처럼 흐려지고 줄어든다 ── */
.top{position:sticky;top:0;z-index:20;height:var(--bar);background:var(--bg);transition:background-color .5s,height .4s,box-shadow .5s}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.logo{font-size:var(--t4);font-weight:800;letter-spacing:-.02em;min-height:44px;display:inline-flex;align-items:center}
.top nav{display:flex;align-items:center;gap:var(--s3);color:var(--ink2)}
.top nav a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;transition:color .2s}
.top nav a.me{color:var(--ink);border:1px solid var(--ink-a18);border-radius:999px;padding-inline:var(--s2)}
.fx .top.thin{height:52px;background:rgba(var(--face-rgb),.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--ink-a10)}
@media (max-width:720px){.top nav{gap:var(--s2);font-size:var(--t6)}
  .fx .top.thin{background:rgba(var(--face-rgb),.86)}} /* 11-03 모바일 점검: 폰은 큰 제목이 상단 줄 바로 뒤를 지나며 55% 로는 글이 비쳐 보였다 → 86%(흐림은 그대로) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.fx .top.thin{background:rgba(var(--face-rgb),.96)}} /* 흐림이 안 되는 브라우저는 거의 불투명하게 */

.small a,.both a,.legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}

/* ── 단추 2종 — 자석처럼 커서를 따라오고(JS), 올리면 테두리를 따라 빛이 한 바퀴 돈다(.sp) ── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);border-radius:999px;cursor:pointer;border:0;background:none;font-family:var(--sans);text-align:center;overflow:hidden;transition:background-color .25s,border-color .25s,color .25s}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none;transition:transform .3s}
.btn-main{min-height:52px;padding:var(--s1) var(--s3);background:var(--blue);color:var(--bg0);font-size:var(--t5);font-weight:700}
.btn-sub{min-height:44px;padding:var(--s1) var(--s2);border:1px solid var(--ink-a18);color:var(--ink);font-size:var(--t5);font-weight:500}
.btn .sp,.ladder a .sp{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--ink);filter:blur(7px);opacity:0;pointer-events:none;offset-path:inset(2px round 999px);offset-distance:0%;offset-rotate:0deg;z-index:0}
.btn-main .sp{background:var(--ink);mix-blend-mode:screen}
@keyframes spark{0%{offset-distance:0%;opacity:0}12%{opacity:.95}88%{opacity:.95}100%{offset-distance:100%;opacity:0}}
.act{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ── 유리 판 ── */
.glass{position:relative;background:rgba(var(--face-rgb),.62);border:1px solid rgba(var(--ink-rgb),.12);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(var(--ink-rgb),.16),inset 0 -1px 0 rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.45);overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.glass::after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,-40%);width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:var(--ink);filter:blur(50px);opacity:0;pointer-events:none;transition:opacity .5s}
.fx .glass.lit::after{opacity:.07}
.glass>*{position:relative;z-index:1}

/* ── 길 고르기 (칩 대신 선 목록) — 줄 선이 왼쪽부터 그어지고, 올리면 줄에 빛이 스치며 글자가 밀린다 ── */
.route{margin-top:var(--s4);max-width:760px;position:relative}
.route a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:64px;padding-block:var(--s1);font-size:var(--t4);font-weight:300;letter-spacing:-.02em;line-height:1.35;transition:color .2s}
.route a::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.route a::after{content:"";position:absolute;left:0;bottom:-2px;width:120px;height:5px;border-radius:50%;background:var(--ink);filter:blur(4px);opacity:0;transform:translateX(-120px)}
.route a span{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.route a svg{width:16px;height:16px;stroke:var(--ink2);fill:none;stroke-width:1.5;flex:none;transition:transform .2s}
.fx .route a::before{transform:scaleX(0)}
.fx .route a.on::before{transform:scaleX(1)}
@keyframes linesweep{0%{opacity:0;transform:translateX(-120px)}15%{opacity:.9}85%{opacity:.9}100%{opacity:0;transform:translateX(760px)}}
.both{color:var(--ink2);font-size:var(--t6);font-weight:500;letter-spacing:.02em;line-height:1.6}
.both b{color:var(--ink);font-weight:500}

/* ── 네 칸 (세로 배치·휴대폰·효과 없음) ── */
.four{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s4);border-top:1px solid var(--line)}
.four>div{padding:var(--s3) var(--s3) var(--s3) 0;border-left:1px solid var(--line);padding-left:var(--s3)}
.four>div:first-child{border-left:0;padding-left:0}
.four h3{margin-bottom:var(--s4)}
.four .n{display:block;font:500 var(--t1)/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.four .n em{font:400 var(--t4) var(--sans);color:var(--ink2);margin-left:var(--s1)}
.four p{color:var(--ink2)}
.note{margin-top:var(--s3);padding-left:var(--s2);border-left:1px solid var(--line);color:var(--ink2);max-width:42em}
.note b{color:var(--ink);font-weight:400}
@media (max-width:1100px){.four{grid-template-columns:1fr 1fr}.four>div:nth-child(3){border-left:0;padding-left:0}.four>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:720px){.four{grid-template-columns:1fr}.four>div{border-left:0;padding:var(--s3) 0;border-top:1px solid var(--line)}.four>div:first-child{border-top:0}.four h3{margin-bottom:var(--s2)}}

/* ── 네 칸 · 트레이너 = 하나의 길(선) 위를 파란 점이 지나가는 가로 구간 ── */
.fourh{position:relative}
.fourh .fh-stage{position:relative}
.fourh .fh-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s4);border-top:1px solid var(--line)}
.fourh .fh-track>div{padding:var(--s3) var(--s3) var(--s3) 0;border-left:1px solid var(--line);padding-left:var(--s3)}
.fourh .fh-track>div:first-child{border-left:0;padding-left:0}
.fourh .fh-track h3{margin-bottom:var(--s4)}
.fourh .fh-track .n{display:block;font:500 var(--t1)/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
.fourh .fh-track .n em{font:400 var(--t4) var(--sans);color:var(--ink2);margin-left:var(--s1)}
.fourh .fh-track p{color:var(--ink2)}
.fourh .fh-line,.fourh .fh-dot{display:none}
@media (max-width:1100px){.fourh .fh-track{grid-template-columns:1fr 1fr}.fourh .fh-track>div:nth-child(3){border-left:0;padding-left:0}.fourh .fh-track>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:720px){.fourh .fh-track{grid-template-columns:1fr}.fourh .fh-track>div{border-left:0;padding:var(--s3) 0;border-top:1px solid var(--line)}.fourh .fh-track>div:first-child{border-top:0}.fourh .fh-track h3{margin-bottom:var(--s2)}}
.fx .fourh .fh-line{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fx .fourh .fh-line path{fill:none;stroke:rgba(var(--ink-rgb),.35);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fx .fourh .fh-line path.lit{stroke:var(--blue);stroke-width:2}
.fx .fourh .fh-dot{display:block;position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);box-shadow:0 0 14px 4px var(--blue),0 0 40px 10px rgba(var(--blue-rgb),.45);pointer-events:none;z-index:2} /* v2: 파란 점은 무대(.fh-stage) 기준 — PC 는 은하 나선 팔을 따라, 휴대폰은 칸 옆 세로선을 따라 */
@media (min-width:901px){
  .fx .fourh{height:180vh}
  .fx .fourh .fh-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .fx .fourh .fh-track{display:flex;width:max-content;margin-top:var(--s4);border-top:0;padding-inline:0;will-change:transform;gap:0}
  .fx .fourh .fh-track>div{flex:0 0 auto;width:min(620px,52vw);border-left:0;border-top:1px solid var(--line);padding:var(--s4) var(--s4) var(--s4) 0;margin-right:var(--s4)}
  .fx .fourh .fh-track>div:first-child{padding-left:0}
  .fx .fourh .fh-track h3{font-size:var(--t3);margin-bottom:var(--s4)}
  .fx .fourh .fh-track .n{font-size:var(--t0)}
  .fx .fourh .fh-track p{font-size:var(--t4);max-width:20em}
}
@media (max-width:900px){.fx .fourh .fh-track{margin-left:var(--s3)}.fx .fourh .fh-track>div{border-top:0}}

/* ── 교육생 캡처 (센터 C3) — 흩어진 책상처럼 놓였다가 스크롤로 정돈되고 핵심 문구가 크게 떠오른다 ── */
.proofs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s4)}
.proof{min-width:0}
.proof .shot{display:block;background:var(--face);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;aspect-ratio:9/16}
.proof .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.proof .shot.tall img{object-fit:contain;object-position:center top}
.proof h3{margin-top:var(--s2)}
.proof .small{margin-top:var(--s1)}
.proof .small a{color:var(--ink)}
.desk-cap{display:none}
@media (min-width:1101px){#c3 .proofs{grid-template-columns:repeat(3,minmax(0,300px))}}
@media (max-width:1100px){.proofs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
  .proofs{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none;margin-top:var(--s3)}
  .proofs::-webkit-scrollbar{display:none}
  .proof{flex:0 0 72vw;scroll-snap-align:center}
}
@media (min-width:901px){
  .fx .desk{height:130vh}
  .fx .desk .desk-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--s3)}
  .fx .desk .proofs{margin-top:var(--s3);perspective:1400px;max-width:820px;margin-inline:auto}
  .fx .desk .proof{will-change:transform;transform-origin:center}
  .fx .desk .proof .shot{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px var(--ink-a10)}
  .fx .desk .proof figcaption{opacity:0;transition:opacity .5s}
  .fx .desk.tidy .proof figcaption{opacity:1}
  .fx .desk-cap{display:block;position:relative;text-align:center;font-size:var(--t1);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-top:var(--s3);text-wrap:balance;opacity:0;will-change:transform,opacity}
}

/* ── 두 칸 ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.two.top-align{align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr;gap:var(--s3)}.two .first-on-m{order:-1}}

/* ── 30초 재 보기 ── */
.tool{padding:var(--s3)}
.tool .fld{display:grid;grid-template-columns:1fr minmax(0,160px);gap:var(--s2);align-items:center;padding-block:var(--s1);position:relative}
.tool .fld span{color:var(--ink2)}
.tool .fld .in{position:relative;display:block}
.tool .fld .in i{position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);font-style:normal;color:var(--ink2);pointer-events:none}
.tool .fld .gauge{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--line);display:none}
.tool .fld .gauge i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--blue);transition:width 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px 2px rgba(var(--blue-rgb),.6)}
.tool[data-fx="gauge"] .fld{padding-bottom:var(--s2)}
.tool[data-fx="gauge"] .fld .gauge{display:block}
input.inp{width:100%;min-height:52px;background:var(--bg0);border:1px solid var(--line);border-radius:var(--r);padding-inline:var(--s2);color:var(--ink);font-size:var(--t5);transition:border-color .2s,box-shadow .4s;appearance:none;-moz-appearance:textfield}
input.inp::-webkit-outer-spin-button,input.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input.inp::placeholder{color:var(--ink2)}
input.inp:focus{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 0 28px rgba(var(--blue-rgb),.4);outline:0}
input.inp.err{border-color:var(--ink)}
.tool .fld .inp{padding-right:var(--s4);font-family:var(--num);font-weight:500;font-variant-numeric:tabular-nums}
.tool .res{margin-top:var(--s3)}
.tool .rank{font:500 var(--num-big)/1.1 var(--num);letter-spacing:-.02em;color:var(--ink2);font-variant-numeric:tabular-nums;font-family:var(--num);display:flex;align-items:baseline;gap:0;white-space:nowrap}
.tool .rank.on{color:var(--blue)}
.tool .rank .rd{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;line-height:1.1}
.tool .rank .rd i{display:block;font-style:normal;height:1.1em;line-height:1.1}
.tool .say{color:var(--ink2);margin-top:var(--s1);min-height:1.65em}
.ridge-box{position:relative;margin-top:var(--s3)}
.ridge{display:block;width:100%;height:96px}
@media (min-width:1100px){.ridge{height:140px}.tool .rank{font-size:var(--t1)}.tool{padding:var(--s4)}.h-big+.sub{font-size:var(--t4)}#check{padding-top:var(--s4)}#check .tool .fld{padding-block:var(--s2)}#check .res{margin-top:var(--s4)}}
/* 30초 칸 제목은 1200px 이상에서만 96px — 글 열을 1.15배 넓혀 한 줄 7자(「리뷰 수 하나면」)가 들어가게 한다. 그 아래 폭에서는 h2 기본 56px */
@media (min-width:1200px){.h-big{font-size:var(--t1)}#check .two,#t-check .two{grid-template-columns:1.15fr 1fr}#c4 .two{grid-template-columns:1fr 1.15fr}.one-price .p{font-size:var(--t0)}}
.ridge path{fill:var(--ink-a18);stroke:var(--ink2);stroke-width:1;vector-effect:non-scaling-stroke}
.fx .ridge path{fill-opacity:0;transition:fill-opacity .8s .6s}
.fx .ridge.drawn path{fill-opacity:1}
.mark{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);left:0;opacity:0;transform:scaleY(0);transform-origin:bottom;transition:left .5s cubic-bezier(.2,.8,.2,1),opacity .3s,transform .7s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 16px 3px rgba(var(--blue-rgb),.75),0 0 44px 8px rgba(var(--blue-rgb),.35)}
.mark.on{opacity:1;transform:none}
.mid{position:absolute;top:0;bottom:0;width:1px;background:var(--ink2);opacity:.5}
.ridge-foot{display:flex;justify-content:space-between;gap:var(--s2);margin-top:var(--s1)}
.tool .other{margin-top:var(--s2);border-top:1px solid var(--line);padding-top:var(--s2);display:grid;gap:var(--s1)}
.tool .other p{display:flex;justify-content:space-between;gap:var(--s2);color:var(--ink2)}
.tool .other b{color:var(--ink);font-weight:500;font-family:var(--num)}
.next{margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
@media (max-width:720px){.tool{padding:var(--s2)}.tool .fld{grid-template-columns:1fr 120px}}

/* ── 신청 칸 ── */
.form{display:grid;gap:var(--s2);margin-top:var(--s3)}
.form label{display:grid;gap:var(--s1);color:var(--ink2)}
.form .btn-main{justify-self:start}
.form .msg{min-height:0;color:var(--ink)}
.form .msg:empty{display:none}
.form .msg.pv{padding:var(--s2);background:var(--face);border:1px solid var(--line);border-radius:var(--r)}
.safe{color:var(--ink);font-weight:500}
@media (max-width:720px){.form .btn-main{justify-self:stretch}}
.agree{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--s2);align-items:start;color:var(--ink2);cursor:pointer;min-height:44px}
.agree input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--blue);cursor:pointer}
.agree span{display:block}
.agree small{display:block;font-size:var(--t6);font-weight:500;letter-spacing:.02em;line-height:1.6;color:var(--ink2);margin-top:var(--s1)}
.pv-tag{color:var(--ink2);font-size:var(--t6);font-weight:500;letter-spacing:.02em}

/* ── 사진·화면 ── */
.screenshot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--face)}
.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tilt.live{transition:transform .12s linear}
.narrow-shot{max-width:460px;margin-inline:auto;width:100%}
.phone-shot{max-width:320px;margin-inline:auto;width:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--face)}
.foil{position:relative;overflow:hidden;border-radius:var(--r)}
.foil .sheen{position:absolute;left:var(--mx,50%);top:var(--my,50%);width:70%;aspect-ratio:1;margin:-35% 0 0 -35%;border-radius:50%;background:var(--blue);filter:blur(40px);opacity:0;mix-blend-mode:screen;pointer-events:none;transition:opacity .4s}
.fx .foil.live .sheen{opacity:.55}
.foil .edge{position:absolute;inset:0;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.2),inset 0 1px 0 rgba(var(--ink-rgb),.35);pointer-events:none}

/* ── 한 문장 큰 구간 ── */
.statement h2{max-width:14em}
/* ① 글자 차오름 — 읽는 속도대로 어절이 색을 얻는다(흐림 없음) */
.fill{font-size:var(--t2);}
/* 6-3(11-03 저녁): 세 줄 문장(22자 · 16자 · 24자)이 96px 한 줄에 안 들어가 「허재윤 ·」만 남는 줄이 생겨, PC 도 t2(56px)로 — 대표님 ⏎ 세 줄이 그대로 선다 */
@media (min-width:1100px){.fill{font-size:var(--t2);max-width:24em}}
.fill{font-weight:300;letter-spacing:-.03em;line-height:1.22;max-width:21em;text-wrap:pretty;color:var(--ink)}
.fill b{font-weight:800}
.fill .w{display:inline-block;color:rgba(242,240,235,.18);transition:color .35s}
.fill .w.on{color:var(--ink)}
.fill .w.on.blue-w{color:var(--blue)}
html:not(.fx) .fill .w{color:var(--ink)}

/* ── 수업일지: 화면 고정 + 단어만 교체(줄 마스크) · 폰 화면은 스스로 채워진다.
   v2(11-03 대표님 4번): PC 는 전부 가운데 정렬 — 얻는 것 줄 → 큰 단어(폰 위) → 폰(가운데) → 설명 한 줄(폰 아래, JS 가 .jn-say 로 옮김) → 진행 줄 → 단추.
   폰 폭은 세로 공간에서 나머지(얻는 것 줄+단어+설명+단추 ≈ 290px)를 뺀 높이로 정해 한 화면에 전부 들어간다 ── */
.pin .steps>li{padding-block:var(--s3);border-top:1px solid var(--line)}
.pin .steps b{display:block;font-size:var(--t1);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin-bottom:var(--s2)}
.pin .steps span{display:block;color:var(--ink2);max-width:26em}
.pin .steps img{margin-top:var(--s3)}
.pin-phone,.jn-say{display:none}
.pin .steps b i{font-style:normal}
.jn-pair{display:none}
.pin-anchor{position:absolute;left:0;width:1px;height:1px}
@media (min-width:901px){
  .fx .pin{height:160vh}
  .fx .pin .stick{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:flex;align-items:center}
  .fx .pin .jn{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s2);padding-block:var(--s2)}
  .fx .pin .jn .gain{margin-bottom:0}
  .fx .pin .steps{position:relative;width:100%;height:calc(var(--t1) * 1.1)}
  .fx .pin .steps>li{position:absolute;inset:0;padding:0;border:0;opacity:0;transition:opacity .4s}
  .fx .pin .steps>li.on{opacity:1}
  .fx .pin .steps b{overflow:hidden;font-size:var(--t1);margin-bottom:0}
  .fx .pin .steps b i{display:block;font-style:normal;transform:translateY(110%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
  .fx .pin .steps>li.on b i{transform:none}
  .fx .pin .steps>li.on b{color:var(--blue)}
  .fx .pin .steps>li span,.fx .pin .steps img{display:none}
  .fx .pin .jn-say{display:block;position:relative;width:100%;height:calc(var(--t3) * 1.4);margin:0}
  .fx .pin .jn-say span{position:absolute;left:0;right:0;top:0;display:block;margin-inline:auto;color:var(--ink2);font-size:var(--t3);font-weight:300;line-height:1.4;letter-spacing:-.02em;max-width:24em;opacity:0;transform:translateY(12px);transition:transform .5s .12s,opacity .5s .12s}
  .fx .pin .jn-say span.on{opacity:1;transform:none}
  .fx .pin-phone{display:block;position:relative;width:min(300px,calc((100vh - var(--bar) - 290px) * .462));aspect-ratio:600/1298;margin-inline:auto;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--face);box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 60px rgba(var(--blue-rgb),.15)}
  .pin-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.2,.8,.2,1)}
  .pin-phone img.on{clip-path:inset(0 0 0 0);z-index:1}
  .pin-phone img.was{clip-path:inset(0 0 0 0);transition:none;z-index:0}
  .fx .pin .prog{margin-top:0;justify-content:center}
  .fx .pin .act{margin-top:0;justify-content:center}
}
.prog{display:flex;gap:var(--s1);margin-top:var(--s3)}
.prog i{width:32px;height:1px;background:var(--line);transition:background-color .3s}
.prog i.on{background:var(--ink)}
@media (max-width:900px),(prefers-reduced-motion:reduce){.prog{display:none}}
@media (max-width:900px){.pin .steps img{display:none}
  .pin .steps>li{padding-block:var(--s2)}
  .pin .steps b{font-size:var(--t2);margin-bottom:var(--s1)}
  .jn-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin:var(--s3) 0 0;max-width:520px}
  .jn-pair img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r)}
  .jn-pair figcaption{margin-top:var(--s1);text-align:center;color:var(--ink2);font-size:var(--t6)}}

/* ── 멤버십 한 칸 — 「9,900」이 크게 들어왔다가 제자리로 쿵 ── */
.one-price{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:end;margin-top:var(--s4);padding:var(--s3)}
.one-price .p{font:500 var(--t1)/1 var(--num);letter-spacing:-.02em;white-space:nowrap;display:inline-block;transform-origin:left bottom}
.one-price .p em{font:400 var(--t4) var(--sans);color:var(--ink2);margin-right:var(--s1)}
.one-price .thud{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:2px solid var(--blue);opacity:0;pointer-events:none;z-index:0}
@media (max-width:720px){.one-price{grid-template-columns:1fr;gap:var(--s3);padding:var(--s2)}}

/* ── 숫자 띠 (문) — 28,200 이 화면을 가득 채웠다가 스크롤로 줄어들어 띠 칸에 안착한다 ── */
.band{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s4)}
.band>div{padding:var(--s3);border-left:1px solid var(--line)}
.band>div:first-child{border-left:0;padding-left:0}
.band small{display:block;font-size:var(--t5);font-weight:400;letter-spacing:0;line-height:1.5;color:var(--ink2);min-height:calc(var(--s3) + var(--s2));margin-bottom:var(--s3)}
.band strong{display:block;font:500 var(--t0)/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.band strong .pre,.band strong em{font:400 var(--t4) var(--sans);color:var(--ink2);font-style:normal}
.band strong .pre{margin-right:var(--s1)}
.band strong em{margin-left:var(--s1)}
.huge{display:none}
@media (max-width:720px){.band{grid-template-columns:1fr}.band>div{border-left:0;padding:var(--s3) 0;border-top:1px solid var(--line)}.band>div:first-child{border-top:0}.band small{min-height:0;margin-bottom:var(--s2)}}
@media (min-width:901px){
  .fx .bandpin{height:130vh}
  .fx .bandpin .band-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .fx .huge{display:block;position:absolute;left:0;top:0;font:500 1px/1 var(--num);letter-spacing:-.04em;white-space:nowrap;transform-origin:left top;will-change:transform;pointer-events:none;font-variant-numeric:tabular-nums}
  .fx .bandpin .band>div:first-child strong .n28{opacity:0}
  .fx .bandpin.landed .band>div:first-child strong .n28{opacity:1}
  .fx .bandpin.landed .huge{opacity:0}
  .fx .bandpin h2,.fx .bandpin .band{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .fx .bandpin.landed h2,.fx .bandpin.landed .band{opacity:1;transform:none}
}

/* ── 28,200개의 점 — 문. 점은 뒤에 고정된 등뼈 캔버스(.spine)가 그리고, 이 무대는 그 위에 글·문만 놓는다 ── */
.door{position:relative}
.door-stick{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s3) var(--gut) var(--s4)}
.who,.count-in,.burst{display:none}
.door-title{position:relative;text-align:center;z-index:2}
.door-title h1{max-width:12em;margin-inline:auto;font-size:var(--t0);font-weight:200} /* 6-5: 「회원이 늘지 않는 이유,」 11자가 한 줄에 */
.door-title h1 .blue{font-weight:800}
.door-title .go{margin-top:var(--s3)}
.door-title .door-pre{margin-bottom:var(--s2);letter-spacing:.06em}
.door-note{text-align:center;text-wrap:balance;z-index:2;position:relative}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);width:100%;max-width:1040px;margin-inline:auto;grid-auto-rows:1fr}
.doors a{display:flex;flex-direction:column;height:100%;padding:var(--s3);min-height:240px;transition:border-color .25s,background-color .25s;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.doors b{display:block;font-size:var(--t2);font-weight:800;letter-spacing:-.035em;line-height:1.14}
.doors .say{display:block;color:var(--ink2);margin-top:var(--s2)}
.doors .go{display:flex;align-items:center;gap:var(--s1);margin-top:auto;padding-top:var(--s3);font-weight:500}
.doors .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.door-open .both{max-width:1040px;margin:0 auto var(--s2);text-align:center;color:var(--ink2)}
.door-open .both b{color:var(--ink);font-weight:600}
.door-open{width:100%;z-index:3}
@media (max-width:720px){
  .doors{grid-template-columns:1fr;gap:var(--s1)}
  .door-title h1{font-size:var(--t1)}
  .doors a{padding:var(--s3) var(--s2);min-height:0;gap:var(--s1)} /* 6-1(11-03 저녁): 폰은 카드 높이를 내용에 맞추고(최소 높이 없음) 제목은 카드 폭에 맞게 32px — 글·설명·「들어가기」가 카드 안을 고르게. iPhone 13 무대 600px 에 둘 다 들어간다 */
  .doors{grid-auto-rows:auto} /* 카드마다 내용 높이 — 한쪽만 길어 빈 자리가 생기지 않게 */
  .doors b{font-size:26px;font-weight:800;line-height:1.15;letter-spacing:-.03em} /* 제목 안 <br> 은 폰에서도 살림: 「PT샵·헬스장· ⏎ 필라테스 원장」 두 줄(32px 는 한 줄에 안 들어가 「PT샵·」만 남던 것) */
  .doors .say{margin-top:0;font-size:var(--t5)}
  .doors .go{padding-top:var(--s1);min-height:44px;font-size:var(--t5)}
  .door-open .both{margin:0 0 var(--s1);text-align:left;font-size:var(--t6)}
}
@media (min-width:721px) and (max-width:1100px){.doors a{padding:var(--s2) var(--s3)}.doors b{font-size:var(--t3)}}
.fx:not(.nostars) .door{height:calc(185vh - var(--bar));height:calc(185svh - var(--bar))}
.fx:not(.nostars) .door-stick{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));height:calc(100svh - var(--bar));min-height:560px;display:block;padding:0;background:transparent}
/* 폰(11-03 모바일 점검): 고정 구간은 150vh 아래로, iOS 주소창을 뺀 svh 기준 */
.fx:not(.nostars) .count-in{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font:200 var(--t0)/1 var(--num);letter-spacing:-.04em;font-variant-numeric:tabular-nums;pointer-events:none;z-index:2;color:var(--ink)}
.fx:not(.nostars) .count-in b{font-weight:200}
.fx:not(.nostars) .count-in small{display:block;font:500 var(--t6)/1.6 var(--sans);letter-spacing:.06em;color:var(--ink2);margin-top:var(--s2)}
.fx:not(.nostars) .burst{display:block;position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;border-radius:50%;background:var(--blue);filter:blur(60px);opacity:0;pointer-events:none;z-index:1;will-change:transform,opacity}
.fx:not(.nostars) .who{display:block;position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);box-shadow:0 0 14px 4px var(--blue),0 0 44px 12px rgba(var(--blue-rgb),.5);pointer-events:none;z-index:2;will-change:transform;animation:beat 1.4s ease-in-out infinite}
.fx:not(.nostars) .who::before,.fx:not(.nostars) .who::after{content:"";position:absolute;inset:-14px;border:1px solid rgba(var(--blue-rgb),.7);border-radius:50%;animation:ring 2.6s ease-out infinite}
.fx:not(.nostars) .who::after{animation-delay:1.3s}
.fx:not(.nostars) .who em{position:absolute;left:24px;top:-11px;white-space:nowrap;font:500 var(--t6) var(--sans);letter-spacing:.02em;color:var(--ink);font-style:normal}
@media (max-width:720px){.fx:not(.nostars) .who em{left:auto;right:22px}
  /* 6-6(11-03 저녁): 폰 첫 화면이 흐리던 원인 셋 — ① 제목 가는 굵기(200) → 500, 색 순백 ② 제목 뒤 반투명 어둠(rgba .72) 제거(나선은 _공통.js 에서 더 아래로 내려 대비 확보) ③ 흐림 등장 없이 바로 또렷(_공통.js runIntro). 파랑은 한 단계 밝게 */
  .door-title h1{font-weight:500;color:#FFF}
  .door-title h1 .blue{color:#6B9CFF}}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(2.4);opacity:0}}
@keyframes beat{0%,100%{box-shadow:0 0 14px 4px var(--blue),0 0 44px 12px rgba(var(--blue-rgb),.5)}50%{box-shadow:0 0 20px 7px var(--blue),0 0 70px 18px rgba(var(--blue-rgb),.6)}}
/* 제목은 위(9%), 문 둘은 아래(bottom 6%) — 아래로 내리는 만큼 문이 떠오른다 */
.fx:not(.nostars) .door-title{position:absolute;left:var(--gut);right:var(--gut);top:9%;pointer-events:none;will-change:opacity;opacity:0}
.fx:not(.nostars) .door-title h1{font-size:var(--t1)}
@media (max-width:720px){.fx:not(.nostars) .door-title h1{font-size:38px}}
.fx:not(.nostars) .door-title h1{text-shadow:0 2px 14px rgba(10,10,11,.75),0 4px 60px rgba(10,10,11,.85)}
.fx:not(.nostars) .door-open{position:absolute;left:0;right:0;bottom:6%;padding-inline:var(--gut);opacity:0;visibility:hidden;will-change:transform,opacity}
.fx:not(.nostars) .door-note{opacity:0;transition:opacity 1s;margin-top:var(--s2)}
.fx:not(.nostars) .door.ready .door-note{opacity:1}
/* 「다시 보기」 단추는 6-2(11-03 저녁)로 삭제 — 맨 위로 스크롤하면 진행도가 0 으로 돌아가 문이 스스로 닫힌다 */

.fillcard{position:fixed;z-index:50;background:var(--face);border:1px solid var(--ink-a18);border-radius:var(--r);pointer-events:none}

/* ── 12장 가로 이동 (휴대폰·효과 없음) / 카드 덱 돌리기 (센터 PC) ── */
.hs .track{display:flex;gap:var(--s2);margin-top:var(--s4)}
.hs .card-it{flex:0 0 auto;width:min(300px,72vw)}
.hs .card-it img{border:1px solid var(--line);border-radius:var(--r);width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--face)}
.hs .card-it p{margin-top:var(--s1);color:var(--ink2)}
.hs .rail{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.hs .rail::-webkit-scrollbar{display:none}
.hs .card-it{scroll-snap-align:center}
@media (min-width:901px){
  .fx .hs{height:200vh}
  .fx .hs .stick{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--s3)}
  .fx .hs .stick>.wrap:last-child{flex:1;display:flex;flex-direction:column;min-height:0}
  .fx .hs .rail{overflow:visible;margin:0;padding:0;flex:1;position:relative;min-height:0}
  .fx .hs .track{position:absolute;inset:0;margin:0;display:block;perspective:1600px}
  .fx .hs .card-it{position:absolute;left:50%;bottom:var(--s3);width:var(--cw,160px);margin-left:calc(var(--cw,160px) * -.5);transform-origin:center;will-change:transform;opacity:0}
  .fx .hs .card-it img{box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 0 1px var(--ink-a10)}
  .fx .hs .card-it p{opacity:0;transition:opacity .4s;font-size:var(--t6)}
  .fx .hs.spread .card-it p{opacity:1}
  .fx .hs.spread .card-it img{transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:center bottom}
  @media (hover:hover){.fx .hs.spread .card-it:hover{z-index:40 !important}.fx .hs.spread .card-it:hover img{transform:scale(1.9)}}
}

/* ── 준비 중 세 칸 — 김 서린 유리 ── */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.card{padding:var(--s3)}
.card h3{margin-bottom:var(--s1)}
.card p{color:var(--ink2)}
.card a{display:block}
.card-link{transition:border-color .25s;display:block}
.card .fog{display:none}
.fx .card.fogged .fog{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2)}
@media (max-width:900px){.tri,.duo{grid-template-columns:1fr}}

/* ── 하단 — v3(11-03 대표님 1번): 사다리 4칸은 유리 판 카드(테두리 · 안쪽 여백 · 오른쪽 아래 화살표). 올리면 테두리를 따라 빛이 한 바퀴 돌고(.sp, 단추와 같은 규칙) 살짝 떠오른다. 폰은 2×2.
   작은 링크 4개는 밑줄 + 화살표로 링크임을 보인다 ── */
.foot{margin-top:var(--s5);border-top:1px solid var(--line);padding-block:var(--s4);background:var(--bg0)}
.foot .lab{margin-bottom:var(--s2)}
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.ladder a{display:flex;flex-direction:column;gap:var(--s1);min-height:128px;padding:var(--s2) var(--s2) var(--s2) var(--s2);transition:border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.ladder a b{font-size:var(--t5);font-weight:700;letter-spacing:-.01em;line-height:1.35}
.ladder a span{color:var(--ink2);font-size:var(--t6);font-weight:500;letter-spacing:.02em}
.ladder a svg{width:20px;height:20px;stroke:var(--ink2);fill:none;stroke-width:1.5;flex:none;margin-top:auto;align-self:flex-end;transition:transform .3s,stroke .2s}
.ladder a .sp{offset-path:inset(2px round calc(var(--r) - 2px))}
/* 6-4(11-03 저녁): 작은 링크 4개도 테두리 있는 칩 단추(44px 이상). PC 는 한 줄, 폰은 2×2 */
.sublinks{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);color:var(--ink);font-size:var(--t6);font-weight:500}
.sublinks a{min-height:44px;padding-inline:var(--s2);border:1px solid var(--ink-a18);border-radius:999px;justify-content:center;display:inline-flex;align-items:center;gap:6px;transition:border-color .2s,color .2s}
.sublinks a::after{content:"→";display:inline-block;color:var(--ink2);transition:transform .2s}
.notice{margin-top:var(--s3);color:var(--ink);font-size:var(--t6);font-weight:500;letter-spacing:.02em}
.legal{margin-top:var(--s2);color:var(--ink2);font-size:var(--t6);font-weight:400;line-height:1.8}
.legal b{color:var(--ink);font-weight:500}
.legal a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){.ladder{grid-template-columns:1fr 1fr}.ladder a{min-height:112px}.sublinks{display:grid;grid-template-columns:1fr 1fr}.legal{overflow-wrap:anywhere}}

/* ── 마우스 기기에서만 — 터치 기기에서는 :hover 가 탭 뒤에 남으므로(iOS) 올림 효과는 전부 이 안에만 ── */
@media (hover:hover){
  input.inp:hover{border-color:var(--ink2)}
  .cols .col:hover img{filter:none}
  .ladder a:hover{border-color:var(--ink2);transform:translateY(-4px)}
  .ladder a:hover svg{stroke:var(--ink);transform:translate(3px,-3px)}
  .fx .ladder a:hover .sp{animation:spark 1.1s linear 1}
  .sublinks a:hover{border-color:var(--ink)}
  .sublinks a:hover::after{transform:translateX(3px);color:var(--ink)}
  .top nav a:hover{color:var(--ink)}
  .btn-main:hover{background:var(--ink)}
  .btn-sub:hover{border-color:var(--ink)}
  .fx .btn:hover .sp{animation:spark 1.1s linear 1}
  .fx .btn:hover svg{transform:translateX(3px)}
  .route a:hover svg{stroke:var(--ink);transform:translateY(2px)}
  .fx .route a:hover span{transform:translateX(12px)}
  .fx .route a:hover::after{animation:linesweep .9s cubic-bezier(.2,.8,.2,1) 1}
  .doors a:hover{border-color:var(--ink2)}
  .card-link:hover{border-color:var(--ink2)}
  .ladder a:hover span{color:var(--ink)}
  .sublinks a:hover{color:var(--ink)}
  .legal a:hover{color:var(--ink)}
}

/* ── 미리보기 알림 (배포 때 뺀다) ── */
.toast{position:fixed;left:50%;bottom:var(--s3);transform:translateX(-50%);z-index:40;width:min(560px,calc(100vw - var(--s3)));background:var(--face);border:1px solid var(--ink2);border-radius:var(--r);padding:var(--s2);font-size:var(--t6);font-weight:500;letter-spacing:.02em;line-height:1.6}

/* ── 등장 — 흐림 없음. 본문은 0.45초 올라오기, 제목은 낱말 마스크로 0.6초 안에 솟기(줄마다 70ms). 끝 상태는 언제나 본색 ── */
.fx .rv{opacity:0;transform:translateY(22px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.fx .rv.on{opacity:1;transform:none}
.fx .rv.wm-host{opacity:1;transform:none;transition:none}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.wm>i{display:inline-block;font-style:normal}
.fx .wm>i{transform:translateY(112%);transition:transform .45s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--l,0) * 70ms)} /* v2: 제목 등장 0.45초(6번 — 등장 중에 찍으면 잘린 것처럼 보이는 시간을 줄임) */
.fx .on .wm>i{transform:none}
.wm.free{overflow:visible}
.fx .wm.free>i{transform:none}
/* 줄 마스크 — 손으로 줄을 나눈 큰 제목(.mask .ln) */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>i{display:block;font-style:normal}
.fx .ln>i{transform:translateY(112%);transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.fx .ln.on>i,.fx .on .ln>i{transform:none}
/* 빛이 스치는 글자 — 같은 글자를 한 겹 더 얹고 clip-path 띠로 지나가게 한다 */
.glint{position:relative;display:inline-block}
.glint .gl{position:absolute;left:0;top:0;color:var(--ink);pointer-events:none;clip-path:polygon(calc(var(--gx,-30%) - 10%) 0,calc(var(--gx,-30%) + 2%) 0,calc(var(--gx,-30%) - 6%) 100%,calc(var(--gx,-30%) - 18%) 100%);white-space:nowrap}
html:not(.fx) .glint .gl{display:none}
/* 커서 근처 글자만 밝아지는 큰 제목(.proxi) */
.proxi .ch{text-shadow:0 0 14px rgba(var(--ink-rgb),var(--b,0)),0 0 36px rgba(var(--blue-rgb),calc(var(--b,0) * .6))}
/* 커졌다 작아지며 안착하는 단어(data-land) */
.fx [data-land]{display:inline-block;transform-origin:center;will-change:transform}
.fx .breath{animation:breath 3.2s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.45}50%{opacity:1}}

/* ── 뒤에 고정된 점 한 장(.spine) + 마우스를 따라오는 빛 + 점 커서 + 섹션마다 번지는 빛 + 필름 입자 ── */
.bgfx{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bgfx i{position:absolute;left:0;top:0;border-radius:50%;background:var(--blue);display:block;will-change:transform}
.bgfx .light{width:760px;height:760px;margin:-380px 0 0 -380px;filter:blur(110px);opacity:.1}
.bgfx .glow{width:1000px;height:1000px;margin:-500px 0 0 -500px;filter:blur(140px);opacity:.07;transition:transform 1.8s cubic-bezier(.2,.7,.2,1),opacity 1.8s}
html:not(.fx) .bgfx{display:none}
.instage .bgfx{visibility:hidden}
/* 폰(11-03 모바일 점검): 커서를 따라오는 빛(.light)은 손가락 기기에서 따라올 커서가 없어 끈다(매 프레임 움직이는 흐림 층 하나 줄임). 섹션마다 번지는 빛(.glow)만 작게 남긴다 */
@media (max-width:720px){.bgfx .light{display:none}.bgfx .glow{width:480px;height:480px;margin:-240px 0 0 -240px;filter:blur(80px);opacity:.1}}
.spine{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;display:none}
.fx:not(.nostars) .spine{display:block}
main,.foot{position:relative;z-index:1}
main{overflow-x:clip}
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:2;opacity:.05;display:none;mix-blend-mode:screen}
.fx .grain{display:block}
/* 폰(11-03 모바일 점검): 화면 전체 섞기 층(입자)은 끄고, 유리 판 흐림은 14 → 10px — 스크롤 중 프레임을 지킨다 */
@media (max-width:720px){.fx .grain{display:none}.glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}}
.dot{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);mix-blend-mode:difference;pointer-events:none;z-index:40;opacity:0;transition:width .25s,height .25s,margin .25s,opacity .25s,background-color .25s;will-change:transform;display:flex;align-items:center;justify-content:center}
.dot em{font:500 var(--t6)/1 var(--sans);font-style:normal;letter-spacing:.04em;color:var(--bg0);opacity:0;transition:opacity .2s;white-space:nowrap}
.dot.big{width:22px;height:22px;margin:-11px 0 0 -11px}
.dot.pick,.dot.drag{width:76px;height:76px;margin:-38px 0 0 -38px;mix-blend-mode:normal;background:var(--ink)}
.dot.pick em,.dot.drag em{opacity:1}
.dot.link{background:rgba(var(--blue-rgb),.25);box-shadow:inset 0 0 0 1.5px var(--blue);mix-blend-mode:normal}
@media (pointer:fine){.fx.cur,.fx.cur *{cursor:none}}
.veil{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
.fx .veil{display:block}

/* ── 입체 회전목마 (트레이너 T3) — 왼쪽에 아주 큰 실제 문구, 오른쪽에 도는 유리 판 ── */
.ringpin{position:relative}
.ring-stage{position:relative}
.ring-grid{display:block}
.ring-wrap{position:relative;margin-top:var(--s4)}
.ring{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
.ring::-webkit-scrollbar{display:none}
.ring .pane{flex:0 0 min(300px,72vw);scroll-snap-align:center;padding:var(--s2)}
.ring .pane img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:calc(var(--r) - 4px);background:var(--face)}
.ring .pane q{display:block;quotes:none;margin-top:var(--s2);font-size:var(--t4);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.ring .pane .small{margin-top:var(--s1)}
.ring-cap{display:none}
@media (min-width:901px){
  .fx .ringpin{height:190vh}
  .fx .ring-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;display:flex;flex-direction:column;justify-content:center}
  .fx .ring-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s4);align-items:center}
  .fx .ring-grid>div:first-child{min-width:0}
  .fx .ring-grid h2{max-width:9em}
  .fx .ring-wrap{height:min(64vh,620px);perspective:1600px;margin-top:0;position:relative}
  .fx .ring{position:absolute;left:50%;top:50%;width:0;height:0;overflow:visible;margin:0;padding:0;display:block;transform-style:preserve-3d;will-change:transform}
  .fx .ring .pane{position:absolute;left:0;top:0;width:min(280px,21vw);margin-left:calc(min(280px,21vw) * -.5);transform:translateY(-50%) rotateY(var(--a)) translateZ(var(--rz));backface-visibility:hidden;transition:opacity .6s}
  .fx .ring .pane img{filter:grayscale(1) brightness(.45);transition:filter .6s}
  .fx .ring .pane.front img{filter:none}
  .fx .ring .pane q,.fx .ring .pane .small{display:none}
  .fx .ring-cap{display:block;position:relative;min-height:calc(var(--t1) * 3.4)}
  .fx .ring-cap p{position:absolute;left:0;right:0;top:0;font-size:var(--t1);font-weight:800;letter-spacing:-.04em;line-height:1.08;text-wrap:balance;opacity:0;transform:translateY(18px);transition:opacity .45s,transform .45s}
  .fx .ring-cap p.on{opacity:1;transform:none}
  .fx .ring-cap p small{display:block;font:500 var(--t6)/1.6 var(--sans);letter-spacing:.04em;color:var(--ink2);margin-top:var(--s2)}
}

/* ── 순위표 후기 벽 (트레이너 T3-b) — 파란 먹빛으로 누른 작은 판이 곡면으로 흐르고, 커서 주변(손이 없으면 떠도는 빛)만 본색 ── */
.wall{position:relative;overflow:hidden;margin-top:var(--s3);padding-block:var(--s2)}
.wall .rows{display:grid;gap:var(--s2);position:relative}
.wall .row{display:flex;gap:var(--s2);width:max-content}
.wall .row img{width:clamp(150px,13vw,186px);aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:var(--s1);border:1px solid var(--line);background:var(--face)}
.wall .wall-lit,.wall .lamp,.wall .edge{display:none}
html:not(.fx) .wall .row{width:auto;overflow-x:auto;scrollbar-width:none}
.fx .wall{height:min(68vh,700px)}
.fx .wall .rows{transform:perspective(1600px) rotateX(18deg) scale(1.06);transform-origin:center 40%}
.fx .wall .wall-dim img{filter:grayscale(1) sepia(1) hue-rotate(188deg) saturate(2.8) brightness(.42)}
.fx .wall .wall-lit{display:block;position:absolute;inset:0;padding-block:var(--s2);clip-path:circle(0px at -100px -100px);pointer-events:none}
.fx .wall .wall-lit img{filter:none}
.fx .wall .lamp{display:block;position:absolute;left:0;top:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:var(--ink);filter:blur(80px);opacity:0;pointer-events:none;mix-blend-mode:screen;will-change:transform;transition:opacity .4s}
.fx .wall.hot .lamp{opacity:.2}
.fx .wall .edge{display:block;position:absolute;left:-10%;right:-10%;height:160px;background:var(--bg);filter:blur(34px);pointer-events:none;z-index:3}
.fx .wall .edge.t{top:-110px}.fx .wall .edge.b{bottom:-110px}
.fx .wall .row.lit img{filter:none}
@media (max-width:900px){.fx .wall{height:auto}.fx .wall .rows{transform:none}.fx .wall .wall-lit,.fx .wall .lamp,.fx .wall .edge{display:none}.fx .wall .wall-dim img{transition:filter .8s}.fx .wall .wall-dim img{filter:grayscale(1) brightness(.45)}}

/* ── 100점 진단 (트레이너 T5) ── */
.dialpin{position:relative}
.dial-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.dial{position:relative;width:min(100%,420px);aspect-ratio:1;margin-inline:auto}
.dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial .tick{stroke:rgba(var(--ink-rgb),.28);stroke-width:1}
.dial .tick.ten{stroke:var(--ink);stroke-width:1.5}
.dial .tick.lit{stroke:var(--blue);stroke-width:2}
.dial .lbl{font:500 14px var(--num);fill:var(--ink2);text-anchor:middle}
.dial .needle{stroke:var(--blue);stroke-width:2}
.dial .core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dial .core b{font:500 var(--t1)/1 var(--num);letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;min-width:2.2em}
.dial .core small{display:block;font:500 var(--t6)/1.6 var(--sans);letter-spacing:.04em;color:var(--ink2);margin-top:var(--s1)}
@media (max-width:900px){.dial-stage{grid-template-columns:1fr}.dial{width:min(100%,280px)}}
@media (min-width:901px){
  .fx .dialpin{height:130vh}
  .fx .dial-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden}
  .fx .dial{width:min(82vh,660px)}
  .fx .dial .core b{font-size:var(--t0)}
}

/* ── 트레이너 첫 화면 — 고정 없이, 스크롤하면 제목이 커지며 지나가고 다음 화면이 바로 뒤따른다 ── */
.hero{position:relative}
.hero .hero-stage{position:relative}
.hero h1{font-size:var(--t1)}
@media (min-width:1200px){.hero h1{font-size:var(--t0)}}
@media (min-width:901px){
  .hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s3) var(--s4);align-items:start}
  .hero h1{grid-column:1 / -1}
  .hero .sub{grid-column:1;margin-top:var(--s2)}
  .hero .route{margin-top:0;grid-column:2;grid-row:2;max-width:none}
  .fx .hero .hero-stage{min-height:calc(100vh - var(--bar));display:flex;flex-direction:column;justify-content:center;transform-origin:center 45%;will-change:transform,opacity}
}

/* ── 센터 첫 화면 — 동네 격자는 등뼈 점이 그린다. v3(11-03 3번): 제목 두 줄(「회원이 오게 하는 방법, ⏎ 알고 싶으신가요」), 첫 줄 11자가 128px 한 줄에 안 들어가 t1(96px) ─ 트레이너 첫 제목과 같은 단계.
   제목 위 작은 글(.lab) 한 줄. 첫 화면 높이는 iOS 주소창을 뺀 svh ── */
.gridhero{position:relative;display:flex;align-items:center;min-height:calc(100vh - var(--bar));min-height:calc(100svh - var(--bar))}
.gridhero .wrap{position:relative;z-index:1}
.gridhero h1{font-size:var(--t1)}
.gridhero .lab{margin-bottom:var(--s2)}
@media (min-width:901px){.gridhero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s3) var(--s4);align-items:start}.gridhero .lab{grid-column:1 / -1;grid-row:1;margin-bottom:0}.gridhero h1{grid-column:1 / -1;grid-row:2}.gridhero .sub{grid-column:1;grid-row:3;margin-top:var(--s2)}.gridhero .route{margin-top:0;grid-column:2;grid-row:3;max-width:none}.gridhero .both{grid-column:1 / -1;grid-row:4}}
.gridhero .reelw{display:inline-block;position:relative;min-width:1.1em;text-align:center}
.gridhero .reelw i{font-style:normal;font-family:var(--num);font-weight:500;display:none}
.fx .gridhero .reelw i{display:inline}

/* ── 터널 (센터 C2) — v2(11-03 대표님 9번): 네모 문틀 없음. 고리 터널(동심원 4개)은 등뼈 점이 무대 정중앙에 그리고, 글 판 4장이 틀 없이 고리 가운데를 차례로 통과한다.
   소실점·글 판 중심 = 무대 가운데(50% 50%). 뒤 판은 작게 비치고 앞 판은 지나가며 커진다 ── */
.tunnel{position:relative}
.tunnel .tn-stage{position:relative}
.tunnel .gates{display:none}
@media (min-width:901px){
  .fx .tunnel{height:210vh}
  .fx .tunnel .tn-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding-block:var(--s3)}
  .fx .tunnel .four{display:none}
  .fx .tunnel .gates{display:block;position:absolute;inset:0;perspective:800px;perspective-origin:50% 50%}
  .fx .tunnel .gate{position:absolute;left:50%;top:50%;width:min(760px,60vw);height:min(420px,52vh);margin:calc(min(420px,52vh) * -.5) 0 0 calc(min(760px,60vw) * -.5);padding:var(--s3);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform-style:preserve-3d;will-change:transform,opacity}
  .fx .tunnel .gate .n{display:block;font:500 var(--t0)/1 var(--num);letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-bottom:var(--s2)}
  .fx .tunnel .gate .n em{font:400 var(--t4) var(--sans);color:var(--ink2);margin-left:var(--s1);font-style:normal}
  .fx .tunnel .gate h3{font-size:var(--t2);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin-bottom:var(--s2);text-wrap:balance}
  .fx .tunnel .gate p{color:var(--ink2);font-size:var(--t4);max-width:24em}
  .fx .tunnel .gate .k{display:block;font:500 var(--t6)/1.6 var(--num);letter-spacing:.06em;color:var(--ink2);margin-bottom:var(--s2)}
  .fx .tunnel .gate.far>*{opacity:0}
}

/* ── 후기 벽 (센터 C3-b) — 작은 판 다섯 기둥이 서로 다른 속도, 파란 먹빛, 위아래는 어둠에 녹음 ── */
.cols{position:relative;margin-top:var(--s3);overflow:hidden;height:min(64vh,640px);--nc:5}
.cols .col{position:absolute;top:0;display:grid;gap:var(--s2);width:calc((100% - var(--s2) * (var(--nc) - 1)) / var(--nc));left:calc(var(--i) * ((100% - var(--s2) * (var(--nc) - 1)) / var(--nc) + var(--s2)))}
.cols img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:var(--s1);border:1px solid var(--line);background:var(--face);filter:grayscale(1) sepia(1) hue-rotate(188deg) saturate(2.8) brightness(.42);transition:filter .5s}
.cols .edge{position:absolute;left:-10%;right:-10%;height:150px;pointer-events:none;z-index:2;background:var(--bg);filter:blur(34px)}
.cols .edge.t{top:-100px}.cols .edge.b{bottom:-100px}
html:not(.fx) .cols{height:auto;overflow:visible;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
html:not(.fx) .cols .col{position:static;width:auto}
html:not(.fx) .cols img{filter:none}
html:not(.fx) .cols .edge{display:none}
@media (max-width:900px){.cols{--nc:3}.cols .col:nth-child(n+6){display:none}}
@media (max-width:720px){.cols{height:auto;overflow:visible}.cols .col{position:static;width:auto}.cols .col:nth-child(n+4){display:none}.cols .edge{display:none}.cols img{filter:none}}

/* ── 2.3배 (센터 C6) ── */
.bars{margin-top:var(--s3);display:grid;gap:var(--s2);position:relative}
.bars .bar{display:grid;grid-template-columns:9em 1fr;gap:var(--s2);align-items:center}
.bars .bar span{color:var(--ink2);font-size:var(--t6);font-weight:500;letter-spacing:.02em}
.bars .bar i{display:block;height:44px;border-radius:var(--s1);background:var(--ink-a18);transform-origin:left;position:relative}
.bars .bar.hi i{background:var(--blue);box-shadow:0 0 30px rgba(var(--blue-rgb),.35)}
.bars .bar b{position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);font:500 var(--t4)/1 var(--num);color:var(--bg0);font-variant-numeric:tabular-nums}
.bars .bar:not(.hi) b{color:var(--ink)}
.x23{display:none}
@media (max-width:720px){.bars .bar{grid-template-columns:1fr;gap:var(--s1)}}
@media (min-width:901px){
  .fx .barpin{height:120vh}
  .fx .barpin .bar-stage{position:sticky;top:var(--bar);height:calc(100vh - var(--bar));display:flex;align-items:center;overflow:hidden}
  .fx .barpin .two{width:100%}
  .fx .x23{display:block;position:absolute;left:0;top:0;font:500 1px/1 var(--num);letter-spacing:-.04em;white-space:nowrap;transform-origin:left top;will-change:transform;pointer-events:none;color:var(--blue)}
  .fx .x23 em{font-style:normal;color:var(--ink2)}
  .fx .barpin .bars .bar i{transform:scaleX(0)}
  .fx .barpin .x23-slot{opacity:0}
  .fx .barpin.landed .x23-slot{opacity:1}
  .fx .barpin.landed .x23{opacity:0}
}

/* ── ⑤ 맨 끝 거대한 이름 — 글자 전체가 아래에서 위로 함께 차오른다(clip-path). 트레이너는 파랑이 같이 차오르며 이름이 뚫린다 ── */
.giant{position:relative;overflow:hidden;padding-block:var(--s5) 0;text-align:center;line-height:1;min-height:56vh;display:flex;align-items:flex-end;justify-content:center}
.giant b{position:relative;display:inline-block;font-size:30vw;line-height:1;font-weight:800;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(242,240,235,.45);z-index:1}
.giant b::after{content:attr(data-t);position:absolute;inset:0;color:var(--ink);-webkit-text-stroke:0;clip-path:inset(calc(100% - var(--g,0%)) 0 0 0)}
.giant .gl{font-size:30vw;font-weight:800;letter-spacing:-.05em;z-index:2}
.giant.blue-end .gl{color:var(--bg0)}
html:not(.fx) .giant b::after{clip-path:none}
.giant .blue-fill{position:absolute;inset:0;background:var(--blue);clip-path:inset(100% 0 0 0);z-index:0;display:none}
.giant.blue-end .blue-fill{display:block}
.giant.blue-end b{-webkit-text-stroke:1.5px rgba(10,10,11,.6)}
.giant.blue-end b::after{color:var(--bg0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .giant .blue-fill{clip-path:none}
}
html:not(.fx) .giant.blue-end .blue-fill{clip-path:none}

/* ── 패널 1103 반영(11-03 저녁) ── */
.band-src{margin-top:var(--s3);max-width:40em}
.src{margin-top:var(--s2);max-width:46em;color:var(--ink2)}
.inlist{margin-top:var(--s2);display:grid;gap:var(--s1);color:var(--ink2);padding-left:0;list-style:none}
.inlist li{position:relative;padding-left:16px}
.inlist li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.inlist b{color:var(--ink);font-weight:600}
.one-price .inlist{margin-bottom:var(--s2)}
.next-say{color:var(--ink);font-weight:500;margin-bottom:var(--s1)}
.next-say:empty{display:none}
.jn-note{margin-top:var(--s2);text-align:center}
.phone-shot p{padding:var(--s1) var(--s2);text-align:center}
.route-hint{margin-top:var(--s1)}
@media (max-width:720px){
  .wall .row:nth-child(n+3){display:none}                       /* 폰: 86장 벽은 두 줄만 */
  .ladder a b{font-size:var(--t6)}
}

/* 폰 문 첫 화면: 제목은 위, 문 둘은 아래. 문이 나올 때 제목이 빠지므로 짧은 화면에서도 겹치지 않는다 */
@media (max-width:720px){.fx:not(.nostars) .door-title{top:4%}
  .fx:not(.nostars) .door-open{bottom:var(--s2)}}
.door-cue{display:none}
.fx:not(.nostars) .door-cue{display:block;position:absolute;left:50%;bottom:var(--s3);width:28px;height:28px;margin-left:-14px;color:var(--ink);pointer-events:none;z-index:3;opacity:0;transition:opacity .4s}
.door-cue svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-4px);opacity:.45}50%{transform:translateY(5px);opacity:1}}
.member-shot{margin-top:var(--s4);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--face);max-width:340px}
.member-shot img{display:block;width:100%;height:auto}
.member-shot p{padding:var(--s1) var(--s2)}
/* 상단 메뉴 6칸(11-03 밤) — 폰은 넓은 것 둘 숨김, 글자 작게 */
.top nav{gap:var(--s2)}
@media (max-width:720px){.top nav a.wide{display:none}.top nav{gap:2px;font-size:13px}.top nav a.me{padding-inline:12px}}
@media (min-width:721px) and (max-width:1000px){.top nav{gap:var(--s2);font-size:var(--t6)}}
/* 센터 길 끝 두 칸 */
.duo.nextduo{margin-top:var(--s4);align-items:stretch}
.duo.nextduo .card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4)}
.duo.nextduo .card .lab{margin-bottom:0}
.duo.nextduo .card h3{font-size:var(--t3);margin-bottom:0}
.duo.nextduo .card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:720px){.duo{grid-template-columns:1fr}.duo.nextduo .card{padding:var(--s3)}.duo.nextduo .card .btn{align-self:stretch}}

/* 가격 화면(/plan/) — 카드 안 값이 주연, 약관 같은 줄은 표처럼 또렷하게 */
#p-head h1{max-width:12em}
.pick{display:grid;gap:var(--s1)}
.pick h3,.pick p{margin:0}
.pick strong{font:500 var(--t2)/1.1 var(--num);letter-spacing:-.02em;color:var(--ink)}
.pick strong em{font:500 var(--t5) var(--sans);font-style:normal;color:var(--ink2);margin-left:4px}
.shop,.tiers{margin-top:var(--s4);align-items:stretch}
.shop .card,.tiers .card{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
.shop .card>.lab,.tiers .card>.lab{margin-bottom:0}
.shop .card .p,.tiers .card .p{font:500 var(--t2)/1.1 var(--num);letter-spacing:-.02em;white-space:nowrap}
.shop .card .p em,.tiers .card .p em{font:500 var(--t5) var(--sans);font-style:normal;color:var(--ink2);margin:0 4px}
.shop .card .act,.tiers .card .act{margin-top:auto;padding-top:var(--s2);display:flex;flex-wrap:wrap;gap:var(--s1)}
.terms{display:grid;gap:var(--s1);margin:var(--s2) 0 0}
.terms div{display:grid;grid-template-columns:72px 1fr;gap:var(--s1);padding-top:var(--s1);border-top:1px solid var(--line)}
.terms dt{color:var(--ink2)}
.terms dd{margin:0}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.tier-hi{border-color:rgba(var(--blue-rgb),.55)}
.tier-note{padding-top:var(--s1);border-top:1px solid var(--line)}
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.faqs dt{font-weight:500;color:var(--ink)}
.faqs dd{margin:var(--s1) 0 0;color:var(--ink2)}
@media (max-width:1000px){.tiers{grid-template-columns:1fr}}
@media (max-width:720px){.faqs{grid-template-columns:1fr}.terms div{grid-template-columns:60px 1fr}}
.fx:not(.nostars) .door:not(.ready) .who em{opacity:0}
/* 첫 화면 네 갈래(11-06) — 고민 두 줄은 강의, 프로그램 두 줄은 구독. 카드 안 맨 아래에 값·다음 행동 */
#paths .path-lab{margin-top:var(--s4)}
#paths .path-lab:first-of-type{margin-top:var(--s2)}
#paths .duo{align-items:stretch}
#paths .path{display:flex;flex-direction:column;gap:var(--s1);min-height:200px;padding:var(--s3)}
#paths .path h3{font-size:var(--t3);line-height:1.3;margin:0}
#paths .path>p{color:var(--ink2);margin:0}
#paths .path-foot{margin-top:auto;padding-top:var(--s2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1);border-top:1px solid var(--line)}
#paths .path-foot .go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;color:var(--ink)}
#paths .path-foot .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
@media (max-width:720px){#paths .path{min-height:0}}
/* 강의 화면 /courses/ (11-06) — 옛 홈 #/vod 내용을 새 길 생김새로. 카드·버튼은 가격 화면과 같은 것 */
#c-head .vpick{margin-top:var(--s4);padding:var(--s3);display:grid;gap:var(--s1);border-color:rgba(var(--blue-rgb),.55)}
#c-head .vpick h3{font-size:var(--t3);margin:0}
#c-head .vpick p{color:var(--ink2);margin:0}
#c-head .vpick .act{margin-top:var(--s1)}
.crs-jump{margin-top:var(--s4);align-items:stretch}
.crs-all,.crs-shop .card,.crs-tri .card{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
.crs-all{margin-top:var(--s4);border-color:rgba(var(--blue-rgb),.55)}
.crs-all .p,.crs-shop .p,.crs-tri .p{font:500 var(--t2)/1.1 var(--num);letter-spacing:-.02em;white-space:nowrap}
.crs-all .p em,.crs-shop .p em,.crs-tri .p em{font:500 var(--t5) var(--sans);font-style:normal;color:var(--ink2);margin-left:4px}
.crs-all>.lab,.crs-shop .card>.lab,.crs-tri .card>.lab{margin-bottom:0}
.crs-all .act,.crs-shop .act,.crs-tri .act{margin-top:auto;padding-top:var(--s2)}
@media (min-width:901px){.crs-all{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s4)}.crs-all>*{grid-column:1}.crs-all .inlist{grid-column:2;grid-row:1 / span 5;margin-top:0;align-self:center}.crs-all .act{padding-top:var(--s1)}}
.crs-shop{margin-top:var(--s2);align-items:stretch}
.crs-tri{margin-top:var(--s2);align-items:stretch}
.crs-gain{color:var(--ink);margin-top:var(--s1);padding-top:var(--s1);border-top:1px solid var(--line)}
.crs-gain b{color:var(--blue);font-weight:600}
.crs-cert{margin-top:var(--s1)}
.crs-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-top:var(--s1)}
.crs-sub a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:var(--s1) 12px;border:1px solid var(--ink-a18);border-radius:12px;transition:border-color .25s}
.crs-sub a span{font-size:var(--t6);color:var(--ink2)}
.crs-sub a b{font-weight:500;color:var(--ink)}
.crs-sub a:hover{border-color:var(--blue)}
.crs-list{margin-top:var(--s1)}
.crs-list summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink);font-weight:500}
.crs-list ul{list-style:none;padding:0;display:grid;gap:0}
.crs-list li a{display:flex;justify-content:space-between;gap:var(--s1);min-height:44px;align-items:center;border-top:1px solid var(--line)}
.crs-list li a b{font-weight:500;color:var(--ink)}
.crs-list li a span{font-size:var(--t6);color:var(--ink2)}
.crs-note{margin-top:var(--s3)}
#c-soon .two{align-items:center}
#c-soon .crs-soon{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
#c-soon .crs-soon h3{font-size:var(--t3);line-height:1.3;margin:0}
#c-soon .crs-soon>p{color:var(--ink2);margin:0}
#c-soon .path-foot{margin-top:var(--s2);padding-top:var(--s2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1);border-top:1px solid var(--line)}
#c-soon .path-foot .go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;color:var(--ink)}
#c-soon .path-foot .go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.crs-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.crs-vid{display:block;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:var(--r)}
.crs-vid .im{display:block;position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat}
.crs-vid .im::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.6))}
.crs-vid .pl{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;padding:16px;border-radius:50%;background:rgba(var(--face-rgb),.7);border:1px solid rgba(var(--ink-rgb),.3);fill:var(--ink);z-index:1;transition:background-color .25s}
.crs-vid:hover .pl{background:var(--blue)}
.crs-vid .ln{position:absolute;right:var(--s1);bottom:var(--s1);z-index:1;font-size:var(--t6);color:var(--ink);background:rgba(0,0,0,.7);padding:0 var(--s1);border-radius:4px}
.crs-vid .tt{display:block;padding:var(--s2);font-weight:700;line-height:1.45;color:var(--ink)}
.crs-lsn{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.crs-lsn a{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);min-height:180px}
.crs-lsn .n{font-size:var(--t3);color:var(--blue)}
.crs-lsn b{font-weight:600;line-height:1.45;color:var(--ink)}
.crs-lsn .small{margin-top:auto}
.crs-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:var(--s2)}
.crs-modal .in{width:min(960px,100%);display:grid;gap:var(--s1)}
.crs-modal .x{justify-self:end}
.crs-modal .fr{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.crs-modal iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:900px){.crs-vids,.crs-lsn{grid-template-columns:1fr}.crs-lsn a{min-height:0}}
@media (max-width:720px){.crs-sub{grid-template-columns:1fr}.crs-sub a{flex-direction:row;justify-content:space-between;align-items:center}}
/* 프로그램 화면 /tools/ (11-06) — 정본 16개, 층마다 한 칸 */
.tl-jump{margin-top:var(--s4);align-items:stretch}
.tl-jump .pick .lab{margin-bottom:0}
.tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s4);align-items:stretch}
.tl{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
.tl .no{font-size:var(--t3);color:var(--blue);line-height:1}
.tl h3{margin:0}
.tl p{margin:0}
.tl .tl-go{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:500;color:var(--ink);border-top:1px solid var(--line)}
.tl .tl-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;transition:transform .3s}
.tl .tl-go:hover svg{transform:translateX(4px)}
.tl-note{margin-top:var(--s2)}
@media (max-width:1100px){.tl-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.tl-grid{grid-template-columns:1fr}}
/* 11-06 대표님 지적: 문 둘 위 한마디 · 네 갈래는 문 카드와 달라 보이게(파란 테두리) · 숫자 띠는 28,200 하나만 */
.door-ask{text-align:center;font-size:var(--t3);font-weight:800;letter-spacing:-.03em;line-height:1.3;color:var(--ink);margin:0 auto var(--s1)}
@media (max-width:720px){.door-ask{text-align:left;font-size:var(--t4)}}
#paths .path{border-color:rgba(var(--blue-rgb),.42);box-shadow:inset 0 1px 0 rgba(var(--blue-rgb),.35),0 24px 64px rgba(0,0,0,.45)}
#paths .path-foot{border-top-color:rgba(var(--blue-rgb),.28)}
#paths .path-foot .go{color:var(--blue)}
.band.one{grid-template-columns:1fr}
/* 센터 화면 11-06: 네 단계는 구조만(큰 숫자 대신 단계 번호) · 플레이스 성적 표 · 무료 둘 크게 */
.ptable{margin-top:var(--s3);border-top:1px solid var(--line);max-width:880px}
.ptable>div{display:grid;grid-template-columns:1.1fr 2.4fr .8fr;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line);align-items:baseline}
.ptable span{color:var(--ink2)}
.ptable b{font-weight:600;color:var(--ink)}
.ptable .pt-h span{font-size:var(--t6);letter-spacing:.06em}
@media (max-width:720px){.ptable>div{grid-template-columns:1fr auto;gap:2px var(--s2)}.ptable>div b{grid-column:1 / -1;grid-row:2}.ptable .pt-h span:nth-child(2){display:none}}
.duo.free2{margin-top:var(--s3)}
.duo.free2 .card{border-color:rgba(var(--blue-rgb),.42)}
/* 트레이너 수업일지 칸 11-06: 큰 단어(남긴다·쌓인다·쓴다)보다 먼저 한 문장 */
.jn-lead{text-align:center;padding-bottom:var(--s4)}
.jn-lead .gain{justify-content:center}
.jn-lead .sub{margin-inline:auto}
/* 프로그램 카드 그림(11-06 대표님): 16개 모두 같은 선·같은 파랑, 그림만 다르게. 움직임은 느린 반복 넷(자람·깜빡임·그려짐) */
.tl-fig{aspect-ratio:16/9;border-radius:12px;background:rgba(var(--ink-rgb),.04);border:1px solid var(--line);margin-bottom:var(--s1);overflow:hidden}
.tl-fig svg{display:block;width:100%;height:100%;fill:none;stroke:rgba(var(--ink-rgb),.42);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-fig .b{stroke:var(--blue)}
.tl-fig .f{fill:var(--blue);stroke:none}
.tl-fig .d{fill:rgba(var(--ink-rgb),.16);stroke:none}
.tl-fig .up{transform-box:fill-box;transform-origin:50% 100%;animation:tlUp 3.6s ease-in-out infinite}
.tl-fig .pu{animation:tlPu 2.6s ease-in-out infinite}
.tl-fig .dr{stroke-dasharray:160;animation:tlDr 4.2s ease-in-out infinite}
@keyframes tlUp{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1)}}
@keyframes tlPu{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes tlDr{0%{stroke-dashoffset:160}55%,100%{stroke-dashoffset:0}}
.still .tl-fig *{animation:none}
@media (prefers-reduced-motion:reduce){.tl-fig *{animation:none}}
.tl:hover .tl-fig{border-color:rgba(var(--blue-rgb),.5)}
/* 무료 자료 화면 /free/ (11-06) */
.fr-count{margin-top:var(--s4);margin-bottom:0}
.fr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s2);align-items:stretch}
.fr{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);min-height:220px;border-color:rgba(var(--blue-rgb),.42)}
.fr .no{font-size:var(--t3);color:var(--blue);line-height:1}
.fr h3,.fr p{margin:0}
.fr .tl-go{margin-top:auto;padding-top:var(--s2);display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:500;color:var(--blue);border-top:1px solid var(--line)}
.fr .tl-go svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.fr.soon{border-color:rgba(var(--ink-rgb),.12)}
.fr.soon .no,.fr.soon .tl-go{color:var(--ink2)}
@media (max-width:1100px){.fr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.fr-grid{grid-template-columns:1fr}.fr{min-height:0}}
/* 점 입체 그림(11-06, _점입체.js) — 카드 그림 칸을 가득 채우는 캔버스. 칸 바탕은 아주 옅은 파란 빛 */
.tl-fig{position:relative;background:rgba(var(--blue-rgb),.05)}
.tl-fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fr .tl-fig{aspect-ratio:16/10}
.tl-fig{aspect-ratio:4/3}
.fr .tl-fig{aspect-ratio:16/11}
/* 결과·검증 /proof/ · 소개 /about/ (11-06) */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4);align-items:stretch}
.pf-fact{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
.pf-fact .pf-n{font:500 var(--t1)/1 var(--num);letter-spacing:-.03em;color:var(--ink);white-space:nowrap}
.pf-fact .pf-n em{font:400 var(--t4) var(--sans);font-style:normal;color:var(--ink2);margin-left:var(--s1)}
.pf-fact h3{margin:var(--s1) 0 0}
.pf-fact p{margin:0}
.pf-myth{margin-top:var(--s2);padding:var(--s3);border-color:rgba(var(--blue-rgb),.42)}
.pf-myth b{color:var(--blue);font-weight:500}
.pf-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s2);margin-top:var(--s3)}
.pf-shot{margin:0}
.pf-shot img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.pf-shot figcaption{margin-top:var(--s2)}
.pf-shot h3{margin:0 0 var(--s1)}
@media (max-width:1100px){.pf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.pf-grid{grid-template-columns:1fr}.pf-shots{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s1)}}
.ab-steps{list-style:none;padding:0;margin-top:var(--s4);display:grid;gap:var(--s1)}
.ab-step{display:grid;grid-template-columns:56px 1fr auto auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3)}
.ab-step .no{font-size:var(--t3);color:var(--ink2);line-height:1}
.ab-step.free{border-color:rgba(var(--blue-rgb),.42)}
.ab-step.free .no{color:var(--blue)}
.ab-step h3,.ab-step p{margin:0}
.ab-step .btn{min-width:120px}
@media (max-width:900px){.ab-step{grid-template-columns:44px 1fr;gap:var(--s1) var(--s2)}.ab-step .ab-chip,.ab-step .btn{grid-column:2;justify-self:start}}
/* 강의 화면 11-06: ATC 묶음 대신 4T 한 편짜리 강의 4개 */
.crs-one{display:block}
.crs-lab{margin-top:var(--s4);margin-bottom:0}
.crs-four{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s2);align-items:stretch}
.crs-four .card{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3)}
.crs-four .card>.lab{margin-bottom:0}
.crs-four .p{font:500 var(--t3)/1.1 var(--num);letter-spacing:-.02em;white-space:nowrap}
.crs-four .p em{font:500 var(--t6) var(--sans);font-style:normal;color:var(--ink2);margin-left:4px}
.crs-four .act{margin-top:auto;padding-top:var(--s2)}
.card .crs-gain a{display:inline;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
@media (min-width:901px){.crs-one .card{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1) var(--s4)}.crs-one .card>*{grid-column:1}.crs-one .card>.inlist,.crs-one .card>.crs-sub,.crs-one .card>.crs-list{grid-column:2}.crs-one .card>.inlist{grid-row:1 / span 3;margin-top:0}.crs-one .card>.crs-sub{grid-row:4}.crs-one .card>.crs-list{grid-row:5}.crs-one .card>.act{grid-row:5;align-self:end}}
@media (max-width:1100px){.crs-four{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.crs-four{grid-template-columns:1fr}}
/* 11-10 검토단(시각) 고침 — PC 계산기 제목이 화면을 석 줄로 덮던 것을 줄이고, 캡처 벽을 덜 어둡게, 가격 숫자는 본문 흰색으로 */
@media (min-width:1200px){.h-big{font-size:clamp(40px,4.2vw,60px)}}
.fx .wall .wall-dim img{filter:grayscale(1) sepia(1) hue-rotate(188deg) saturate(1.6) brightness(.62)}
@media (max-width:900px){.fx .wall .wall-dim img{filter:grayscale(1) brightness(.6)}}
.shop .card .p,.tiers .card .p,.crs-all .p,.crs-shop .p,.crs-tri .p,.crs-four .p{color:var(--ink)}
/* 11-10 검토단(시각) — 노트북 높이(900px 안팎)에서 첫 화면 큰 제목이 메뉴바에 닿고 고르기 목록이 잘리던 것: 제목을 화면 높이에 맞춘다 */
@media (min-width:1200px){.hero h1{font-size:clamp(72px,11.5vh,128px)}}

/* 11-10 남은 작은 스타일 정리 (시각 검토 8·11·14·15·17·25) — 글자는 그대로, 생김새만 */
/* 네 갈래: 파란 테두리는 지금 바로 결제되는 멤버십 한 장만, 나머지 셋은 옅게 */
#paths .path{border-color:rgba(var(--blue-rgb),.18);box-shadow:inset 0 1px 0 rgba(var(--ink-rgb),.12),0 24px 64px rgba(0,0,0,.45)}
#paths .path-foot{border-top-color:var(--line)}
#paths .path[href^="/pay/"]{border-color:rgba(var(--blue-rgb),.62);box-shadow:inset 0 1px 0 rgba(var(--blue-rgb),.4),0 0 48px rgba(var(--blue-rgb),.16),0 24px 64px rgba(0,0,0,.45)}
#paths .path[href^="/pay/"] .path-foot{border-top-color:rgba(var(--blue-rgb),.3)}
/* 버튼 높이 두 단계(주 56 · 보조 48), 폰에서는 버튼 묶음을 세로 전폭으로 */
.btn-main{min-height:56px}
.btn-sub{min-height:48px}
@media (max-width:720px){.act{flex-direction:column;align-items:stretch}.act .btn{width:100%}}
/* 체크박스 한 벌 — 흰 기본 상자 대신 얇은 테두리, 고르면 파랑 */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;flex:0 0 20px;border:1.5px solid rgba(var(--ink-rgb),.38);border-radius:6px;background:transparent;display:inline-grid;place-content:center;cursor:pointer;transition:background-color .15s,border-color .15s}
input[type=checkbox]::before{content:"";width:10px;height:5px;border-left:2px solid var(--bg0);border-bottom:2px solid var(--bg0);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .15s}
input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
input[type=checkbox]:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 작은 보조 글은 굵게 쓰지 않는다 — 빽빽함을 덜고, 강조(b·strong)만 흰색 */
.small,.agree small{font-weight:400}
.small b,.small strong{color:var(--ink);font-weight:600}
/* 프로그램 카드 링크는 무료 자료처럼 파랑 한 색 */
.tl .tl-go{color:var(--blue)}
/* 프로그램 폰: 카드 16장을 가로 배치로(그림 왼쪽 작게) — 길이가 1/3 쯤으로 */
@media (max-width:720px){
  .tl{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:var(--s2);row-gap:6px;align-items:start;padding:var(--s2)}
  .tl .tl-fig{grid-column:1;grid-row:1 / span 3;margin:0;aspect-ratio:1}
  .tl>:not(.tl-fig){grid-column:2;margin:0}
  .tl .tl-go{grid-column:1 / -1;padding-top:var(--s1)}
}
/* 강의 화면: 아래 세 장의 가격 크기를 위 네 장과 같게 · 「자세히 보기」가 눌리는 줄로 보이게 */
.crs-tri .p{font-size:var(--t3)}
.crs-tri .p em{font-size:var(--t6)}
.crs-list>summary{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(var(--ink-rgb),.35);cursor:pointer}
/* 근거 화면 폰: 캡처 2열의 제목 줄 수를 맞춰 아래 줄이 나란히 */
@media (max-width:720px){.pf-shot h3{min-height:2.7em}}
/* 센터 폰: 30초 계산기보다 제목·설명이 먼저 */
@media (max-width:900px){#c4 .two>.tool{order:2}}