/* LIFT 홈 시안 v9 · V5-dark-cinema · 결은 mock-v8/C-athletics(검정·Inter Tight) · 둥근 모서리·그라데이션·그림자 상자·갈색 0
   글 크기 위계(1440): 머리 13px : LIFT 글자 높이 약 190px(≈14.6) : 슬로건 칸 글자 자리 32px(≈2.5) : 작은 줄 16px(≈1.2) */
:root {
  --bg: #101010; --ink: #ffffff; --mute: #8c8c8c; --slot: rgba(255,255,255,.42);
  --pad: 24px;
  --sans: "Inter Tight", "Pretendard", system-ui, sans-serif;
  --ko: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; border-radius: 0; box-shadow: none; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all; }
p, h1 { margin: 0; }
a { color: inherit; text-decoration: none; }

/* 머리 — 장면 1·2 엔 숨김, 슬로건과 함께 나옴(script.js 가 .on) */
.head { position: fixed; inset: 0 0 auto; z-index: 5; height: calc(64px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
  display: flex; justify-content: space-between; align-items: center;
  opacity: 0; transform: translateY(-8px); pointer-events: none; will-change: opacity, transform; }
.head.on { opacity: 1; transform: none; pointer-events: auto; }
.brand { font: 400 12px/44px var(--ko); letter-spacing: .32em; text-transform: uppercase; opacity: .55; min-height: 44px; display: inline-flex; align-items: center; }
.nav { display: flex; gap: 28px; font: 400 12px/44px var(--ko); letter-spacing: .32em; text-transform: uppercase; opacity: .55; }
.nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* 무대 — 높이 320vh, 안쪽은 붙박이 한 화면 · 글자(뒤 판) < 캔버스(앞 판, 둘레 투명) */
.stage { position: relative; height: 500vh; height: 500svh; }   /* 박자 셋 × 약 100vh */
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.lift { position: absolute; left: 0; top: 0; z-index: 1; margin: 0; transform-origin: 0 0; will-change: transform, opacity;
  font: 400 100px/1 "DM Serif Display", "Noto Serif KR", serif; white-space: nowrap; color: transparent; background: #6a6a6a; opacity: 0; -webkit-background-clip: text; background-clip: text; padding-bottom: .04em; }
.plate { position: absolute; left: 0; top: 0; z-index: 0; max-width: none; pointer-events: none; will-change: transform, opacity; }
.cut { position: absolute; left: 0; top: 0; z-index: 2; max-width: none; pointer-events: none; will-change: transform, filter; }
.pelvis { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: block; }
.media { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 50% 50%; pointer-events: none; display: block; will-change: transform; }
.still { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
.slot { border: 1px dashed var(--slot); display: flex; align-items: center; justify-content: center;
  font: 400 12px/1.3 var(--ko); color: var(--mute); letter-spacing: .02em; }
.slogan { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; will-change: transform, opacity; }

/* 설명 구역 — 검정 그대로 글만 · 한 단씩 아래에서 떠오름 */
.about { min-height: 100vh; padding-block: 18vh 22vh; display: flex; flex-direction: column; align-items: center; gap: 28px;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.para { width: 640px; max-width: 100%; height: 112px; }
.para.short { height: 72px; }
.facts { margin-top: 36px; text-align: center; }
.course { font: 300 16px/1.5 var(--ko); }
.person { margin-top: 4px; font: 300 14px/1.5 var(--ko); color: var(--mute); }
.links { margin-top: 24px; display: flex; gap: 8px; align-items: center; justify-content: center; font: 300 15px/1 var(--ko); }
.links span { color: var(--mute); }
.links a { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rise { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.on { opacity: 1; transform: none; }


@media (max-width: 600px) {
  :root { --pad: 16px; }
  .head { height: calc(56px + env(safe-area-inset-top, 0px)); }
  .brand { font-size: 11px; letter-spacing: .24em; }
  .nav { gap: 12px; font-size: 14px; }
  .slot { font-size: 11px; }
  .para { height: 88px; }
  .para.short { height: 56px; }
  .course { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { height: 100vh; height: 100svh; }
  .rise, .head { transition: none !important; }
}

/* 배치를 재기 전엔 LIFT·슬로건을 숨김 — 첫 순간 왼쪽 위에 큰 LIFT 가 번쩍이던 것 막음 */
html:not(.laid) .lift, html:not(.laid) .slogan { visibility: hidden; }

/* 벤치마크 덧층(mock-v9/bench-film.md) — 바탕 #050505 · 구석 #000 */
.vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%); }
.grain { position: absolute; inset: -40px; z-index: 4; pointer-events: none; mix-blend-mode: overlay; animation: grain 1s steps(1) infinite; }
.grain svg { display: block; }
@keyframes grain { 0%{transform:translate(0,0)} 12.5%{transform:translate(-12px,8px)} 25%{transform:translate(9px,-14px)} 37.5%{transform:translate(-6px,-4px)}
  50%{transform:translate(14px,10px)} 62.5%{transform:translate(-10px,15px)} 75%{transform:translate(5px,-9px)} 87.5%{transform:translate(-15px,-11px)} }
.disc { position: absolute; left: 0; top: 0; z-index: 0; opacity: .4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 45%, transparent 70%); }
.beam { position: absolute; top: 0; height: 100%; width: 22vw; transform: translateX(-50%); z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 50%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
/* 레터박스 2.39:1 — 박자 ①②에만, ③ 들어가며 0.6초에 걷음 · 작은 화면은 안 씀 */
.lbox { position: absolute; left: 0; right: 0; z-index: 6; background: #000; pointer-events: none;
  height: max(0px, calc((100vh - 100vw / 2.39) / 2)); }
.lbox.top { top: 0; } .lbox.bot { bottom: 0; }

@media (max-width: 700px) { .lbox { display: none; } }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } .lbox { display: none; } }

/* 화면 빛 처리(?fx=slit|graze) — 골반 알파 안에만 빛 · 앞 판 위 */
.fx { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.fx.floor { -webkit-mask-image: none; mask-image: none; z-index: 1; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 50%, transparent 72%); }

/* V6 층 — 뒤 판(사진 바탕) 끔 · 빛 층은 글자 뒤(z0) — 글자가 빛을 가리고 골반은 빛 앞 */
.plate { display: none !important; }
.light { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
/* 층 하나만 내보내기(?solo=…) — 바탕 투명 */
html[data-solo], html[data-solo] body { background: transparent !important; }
html[data-solo] .head, html[data-solo] .lbox, html[data-solo] .about, html[data-solo] .slogan { display: none !important; }
html[data-solo]:not([data-solo="pelvis"]) .cut, html[data-solo]:not([data-solo="light"]) .light, html[data-solo]:not([data-solo="text"]) .lift,
html[data-solo]:not([data-solo="vignette"]) .vignette, html[data-solo]:not([data-solo="grain"]) .grain { display: none !important; }
html[data-solo="grain"] .grain { mix-blend-mode: normal; opacity: 1 !important; }

/* V7 — 흰 석고: 핀이 닿는 윗면만 밝고 아래는 그늘로 잦아듦 */
.cut { -webkit-mask-image: linear-gradient(180deg, #000 22%, rgba(0,0,0,.28) 100%); mask-image: linear-gradient(180deg, #000 22%, rgba(0,0,0,.28) 100%); }
.lift { will-change: transform, opacity, filter; }

/* V8 — 빛 층·고임 층은 합성만(will-change) · 흐림 없음 */
.light { will-change: transform, opacity; filter: blur(0px); }
.light { filter: none; }
.pool { position: absolute; z-index: 0; pointer-events: none; filter: blur(8px); will-change: opacity; }
.lift { will-change: transform, opacity; }
.cut { will-change: filter; }
html.frames .grain { animation: none; }

.cut-black { position: absolute; left: 0; top: 0; z-index: 2; max-width: none; pointer-events: none; filter: brightness(0); }
/* V9 효과 넷 */
.light { mix-blend-mode: screen; }                                  /* ① 빛줄기를 screen 으로 겹침 */
.dust { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
html[data-solo]:not([data-solo="light"]) .dust { display: none !important; }
.lm { overflow: clip; }                                              /* ④ 줄 마스크 — 줄 상자가 잘라 줌 */
.lm-in { display: inherit; align-items: inherit; justify-content: inherit; gap: inherit; width: 100%; height: 100%; will-change: transform; }
.slogan { transform: none !important; }
.rise { opacity: 1; transform: none; transition: none; }
.rise.para { opacity: 0; transition: opacity .4s linear; } .rise.para.on { opacity: 1; }
.rise .lm-in, .rise.lm .lm-in { transform: translate3d(0,110%,0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.rise.on .lm-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .rise .lm-in { transform: none; transition: none; } .rise.para { opacity: 1; } }
/* V10 */
.lift-glow { pointer-events: none; opacity: 0; }
.lglow { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.14) 55%, transparent 100%); filter: blur(6px); }
/* 세트 2(골반 빛): 핀 빛줄기·먼지·바닥 고임·글자 빛·레터박스 없음 — 빛은 골반 둘레에만 */
.light, .dust, .pool, .lglow, .lift-glow, .lbox, .beam { display: none !important; }
.halo { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(ellipse 50% 50% at 50% 42%, rgba(255,255,255,.085) 0%, rgba(255,255,255,.035) 45%, transparent 100%); }
/* V13 「밝기는 조금 밝게 하고 다만 하단으로 가면 그라데이션 어둡게」: 바탕 #101010 · 아래 35% 를 점점 #000 으로 · 비네팅은 위 구석만 약하게 */
.vignette { background: radial-gradient(ellipse 45% 55% at 0 0, rgba(0,0,0,.45), transparent 100%), radial-gradient(ellipse 45% 55% at 100% 0, rgba(0,0,0,.45), transparent 100%); }
.vignette::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, #000 100%); }
.cut-black { display: none !important; }   /* 글자가 골반 뒤에 없으니 검은 실루엣 필요 없음 — 밝은 바탕에선 검은 그림자로 보임 */

/* V15: 글자별 span — 겉색은 span 이 가짐(부모 background-clip 끔) · 끝값 L·I·T #cfcfcf · F #f4f4f4 · 밝기는 script 의 brightness 로 점점 */
.lift { background: none; color: #cfcfcf; -webkit-background-clip: border-box; background-clip: border-box; }
.lift .ch { display: inline-block; color: #cfcfcf; will-change: transform, opacity, filter; }
.lift .ch-f { color: #f4f4f4; }

/* V16 약자 줄 — C2 .acr 꼴(Inter Tight 300 · 회색 #9a9a9a · 머리글자 흰색 400) */
.acr { margin: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 400 15px/1 'Inter Tight', Pretendard, sans-serif; letter-spacing: .14em; color: #9a9a9a; }   /* 상용: 300 → 400 (1x 화면 흐림) */
.acr b { font-weight: 500; color: #fff; }
@media (max-width: 600px) { .acr { font-size: 12px; letter-spacing: .06em; } }   /* 견제 Medium: 11px → 12px */

/* V16 견제(design-senior) High 두 가지: 머리 메뉴 대비 4.28 → 올림 · 한글에 걸린 영문식 자간 .32em → .08em */
.brand, .nav { opacity: .72; letter-spacing: .08em; }
@media (max-width: 600px) { .brand { letter-spacing: .06em; } }

/* V16 상용(11/9 대표 「하나메디퀸즈 교육 이런 거 없애고 … 폰트도 … 상용화 바로 한다고 생각하고」 · 「세리프로 가 노토 프리텐다드 믹스」)
   글꼴 셋만: LIFT·표지 = DM Serif Display · 한글 정보 줄 = Noto Serif KR · 약자 줄 = Inter Tight · 메뉴·칸 = Pretendard */
.brand { font: 400 20px/44px "DM Serif Display", "Noto Serif KR", serif; letter-spacing: .02em; text-transform: none; opacity: 1; color: #f2f2f2; }
@media (max-width: 600px) { .brand { font-size: 18px; letter-spacing: .02em; } }
.course { font: 600 16px/1.5 "Noto Serif KR", serif; }
.person { font: 400 14px/1.5 "Noto Serif KR", serif; }
.links { font-weight: 400; }
@media (max-width: 600px) { .course { font-size: 15px; } }
/* 그림이 안 오면 깨진 그림 자리를 지움 — 글은 그대로(script.js 오류 갈래가 no-photo 를 붙임) */
html.no-photo .plate, html.no-photo .cut, html.no-photo .cut-black { display: none !important; }

/* ===== V17 원페이지 아래 구역 — 대표 11/9 「세리프로 가 노토 프리텐다드 믹스」 · 「그거 벤치마크 밖으로 안 나가고 뉴욕 스타일로~」
   글꼴: 영문 큰 글자 DM Serif Display · 한글 제목 Noto Serif KR · 본문·메뉴·작은 글 Pretendard · 색은 V16 토큰(검정·흰·회색)만 · 갈색 0 */
:root { --line: rgba(255,255,255,.14); --soft: #c4c4c4; --dim: #a6a6a6;
  --en: "DM Serif Display", "Noto Serif KR", serif; --kserif: "Noto Serif KR", "Apple SD Gothic Neo", serif; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.h1 { margin: 0; font: inherit; }
.about { display: block; min-height: 0; padding-block: 0; gap: 0; align-items: stretch; }
.sec { max-width: 1280px; margin: 0 auto; padding-block: 144px; border-top: 1px solid var(--line); }
html.js .sec .rise { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
html.js .sec .rise.on { opacity: 1; transform: none; }

/* 머리 — 「02 — Why now」 + 흰 세리프 영문 + 회색 한글 세리프(Code and Theory 2단 제목) */
.sec-head { display: grid; grid-template-columns: 3fr 9fr; gap: 24px; margin-bottom: 72px; }
.idx { font: 400 12px/1.6 var(--ko); letter-spacing: .08em; color: var(--mute); padding-top: 22px; }
.idx i { font-style: normal; margin: 0 .35em; }
.sec h2 { margin: 0; font-weight: 400; min-width: 0; }
.en { display: block; font: 400 112px/.98 var(--en); letter-spacing: -.012em; color: var(--ink); }
.ko { display: block; margin-top: 24px; font: 400 30px/1.45 var(--kserif); color: var(--dim); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 24px; }
.grid > * { min-width: 0; }
.c-7 { grid-column: span 7; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; }
.lead { font: 300 24px/1.65 var(--ko); color: #e9e9e9; }
.body { font: 300 17px/1.75 var(--ko); color: var(--soft); margin: 0; }
.h3 { margin: 0 0 18px; font: 400 21px/1.45 var(--kserif); color: var(--ink); }
.h4 { margin: 0 0 16px; font: 400 19px/1.45 var(--kserif); color: var(--ink); }
.sub-h { margin-top: 112px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
.sub-h span { font: 400 13px/1.5 var(--ko); color: var(--mute); }
.rows { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rows li { border-top: 1px solid var(--line); padding: 16px 0; font: 300 17px/1.6 var(--ko); color: #e3e3e3; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows.num li { display: grid; grid-template-columns: 40px 1fr; counter-increment: r; }
.rows.num li::before { content: counter(r, decimal-leading-zero); font: 400 15px/1.7 var(--en); color: var(--mute); }

.four { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.four li { border-top: 1px solid var(--ink); padding-top: 22px; min-width: 0; }
.four b { display: block; font: 400 19px/1.45 var(--kserif); margin-bottom: 12px; }
.four p { margin: 0; font: 300 15px/1.7 var(--ko); color: var(--soft); }
.four p.to { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--dim); }
.four p.to::before { content: "→ "; color: var(--mute); }
.pull { margin-top: 128px; font: 400 60px/1.3 var(--kserif); color: var(--ink); letter-spacing: -.01em; }
.pull::before { content: "“"; font-family: var(--en); color: var(--mute); margin-right: .08em; }
.pull::after { content: "”"; font-family: var(--en); color: var(--mute); margin-left: .04em; }

/* 03 약자 — 줄마다 머리글자 흰색 · 나머지 회색 · 올리면 글자색이 밝아짐(Gretel·Hyperakt 호버 = 글자색만) */
.acro { list-style: none; margin: 0 0 104px; padding: 0; }
.acro li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid var(--line); padding: 8px 0 12px; }
.acro li:last-child { border-bottom: 1px solid var(--line); }
.acro .w { font: 400 104px/1.08 var(--en); color: #9a9a9a; transition: color .3s; min-width: 0; }   /* V18 design-senior High #5a5a5a → 약자 줄과 같은 한 색 #9a9a9a · 호버 .3s */
.acro .w b { font-weight: 400; color: inherit; }   /* V18: 머리글자 강조 없앰(대표 「강조하지 말고 하나의 폰트 색」) */
.acro .k { font: 400 22px/1.4 var(--kserif); color: var(--mute); transition: color .3s; flex: none; }
.acro li:hover .w { color: #bdbdbd; } .acro li:hover .k { color: var(--ink); }

/* 가로 넘김 — Athletics·Function 가로 스크롤 칸 · 「1 / 7」 Kinfolk */
.rail { margin-top: 64px; }
.rail-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font: 400 13px/1 var(--ko); color: var(--mute); }
.rail-n b { font: 400 22px/1 var(--en); color: var(--ink); margin-right: 4px; }
.rail-btns { display: flex; gap: 8px; }
.rail-btns button { width: 44px; height: 44px; background: none; border: 1px solid var(--line); color: var(--ink); font: 400 16px/1 var(--ko); cursor: pointer; transition: border-color .3s; }
.rail-btns button:hover { border-color: var(--ink); }
.rail-btns button:disabled { opacity: .3; cursor: default; }
.rail-track { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail-track::-webkit-scrollbar { display: none; }
.card { flex: 0 0 calc((100% - 72px) / 3.4); scroll-snap-align: start; min-height: 280px; padding: 28px; border: 1px solid var(--card-line); background: #141414; display: flex; flex-direction: column; }
.card-k { font: 400 12px/1.5 var(--ko); letter-spacing: .04em; color: var(--mute); }
.card h4 { margin: 40px 0 16px; font: 400 40px/1.15 var(--en); color: var(--ink); }
.card p:last-child:not(.card-k) { margin-top: auto; font: 300 15px/1.7 var(--ko); color: var(--soft); }

/* 04 탭 — 더드림 「산모 / 신생아」 탭 꼴 · 가는 밑줄 하나 */
.kw { margin: -32px 0 48px; font: 300 15px/1.6 var(--ko); color: var(--mute); }
.tablist { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; border-bottom: 1px solid var(--line); }   /* 견제 M4: gap 24 → 탭 머리가 오른쪽 칸 축(1440 406 · 1024 274)에 맞음 */
.tablist button { background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; color: #6e6e6e; text-align: left;
  padding: 18px 12px 20px 0; font: 400 34px/1 var(--en); cursor: pointer; transition: color .3s, border-color .3s; min-height: 44px; }
.tablist button small { display: block; margin-top: 10px; font: 400 13px/1.4 var(--ko); color: var(--mute); }   /* V18 design-senior High */
.tablist button:hover { color: var(--soft); }
.tablist button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tablist button:focus-visible, .rail-btns button:focus-visible, summary:focus-visible, .rail-track:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.panel { padding-top: 56px; }
.h3.big { font-size: 44px; line-height: 1.2; margin-bottom: 16px; }
.nums { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin: 56px 0 72px; }
.nums div { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.nums dd { margin: 0; font: 400 104px/1 var(--en); color: var(--ink); }
.nums dt { margin-top: 14px; font: 400 13px/1.5 var(--ko); color: var(--mute); }
.days { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 72px; }
.day { border-top: 1px solid var(--ink); padding-top: 20px; min-width: 0; }
.day p.day-n { font: italic 400 20px/1 var(--en); color: var(--mute); }   /* V18 design-senior High: .day p 에 덮이던 것 */
.day h4 { margin: 14px 0 14px; font: 400 32px/1.3 var(--kserif); }
.day p { margin: 0; font: 300 16px/1.75 var(--ko); color: var(--soft); }
.day .small { margin-top: 14px; font-size: 14px; color: var(--mute); }
.goals { margin-bottom: 72px; }
.chips { list-style: none; margin: 0 0 72px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { border: 1px solid var(--line); padding: 11px 16px; font: 300 14px/1.3 var(--ko); color: #e3e3e3; }
.facts2 { margin: 0; border-top: 1px solid var(--line); }
.facts2 div { display: grid; grid-template-columns: 3fr 9fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts2 dt { font: 400 13px/1.7 var(--ko); color: var(--mute); }
.facts2 dd { margin: 0; font: 300 16px/1.7 var(--ko); color: #e3e3e3; min-width: 0; }

/* 05 원장님 — 왼쪽 칸 붙박이(Porto Rocha 왼쪽 칸 sticky) · 이력은 한 줄씩 떠오름 */
.fac { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.fac-pin { position: sticky; top: 96px; margin: 0; min-width: 0; }
.fac-pin img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.06) brightness(.86); }
.fac-pin figcaption { margin-top: 12px; font: 400 13px/1.5 var(--ko); color: var(--mute); }
.cv { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); min-width: 0; }
.cv li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.cv-k { font: 400 20px/1.5 var(--kserif); color: var(--mute); }
.cv p { margin: 0; font: 300 21px/1.6 var(--ko); color: var(--ink); min-width: 0; }

/* 06 근거 — 「누가·언제·무엇을 기준으로」 머리 상자(현명신경외과 꼴) · 숫자 띠(Sword·Stripe·리본) · 펼침(Balanced Body 접이칸) */
.byline { border-left: 1px solid var(--ink); padding: 4px 0 4px 20px; max-width: 1000px; font: 300 16px/1.75 var(--ko); color: var(--soft); }
.byline b { font-weight: 500; color: var(--ink); margin-right: 12px; }
.nums.wide { margin-bottom: 0; }
.fold { border-top: 1px solid var(--line); }
.fold:last-child, .faq .fold:last-child { border-bottom: 1px solid var(--line); }
#evidence .fold { margin-top: 112px; border-bottom: 1px solid var(--line); }
.fold summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; min-height: 44px; cursor: pointer; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary .h3 { margin: 0; font-size: 24px; transition: color .3s; }
.fold summary:hover .h3 { color: var(--soft); }
.plus { position: relative; flex: none; width: 18px; height: 18px; }
.plus::before, .plus::after { content: ""; position: absolute; left: 0; top: 8.5px; width: 18px; height: 1px; background: var(--ink); transition: transform .3s; }
.plus::after { transform: rotate(90deg); }
.fold[open] .plus::after { transform: rotate(0deg); }
.fold > .body { padding-bottom: 28px; max-width: 860px; }
.tbl { overflow-x: auto; padding-bottom: 32px; }
.tbl table { width: 100%; border-collapse: collapse; font: 300 15px/1.6 var(--ko); color: #e3e3e3; }
.tbl th { text-align: left; font: 400 12px/1.5 var(--ko); color: var(--mute); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.tbl td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td b { font-weight: 500; color: var(--ink); }

/* 07 단계 — TONI&GUY 01·02·03 큰 번호 */
.steps { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.steps li { border-top: 1px solid var(--ink); padding-top: 20px; min-width: 0; }
.step-n { display: block; margin-bottom: 28px; font: 400 72px/1 var(--en); color: var(--ink); }
.steps p { margin: 0; font: 300 15px/1.7 var(--ko); color: var(--soft); }
.wide-slot { width: 100%; height: 96px; }
.faq { max-width: 980px; margin-left: auto; }

/* 09 신청 · 바닥 */
.apply .en { font-size: 176px; }
.apply .facts2 { margin-bottom: 40px; }
.slots2 .slot { height: 88px; }
.apply .links { justify-content: flex-start; margin-top: 40px; flex-wrap: wrap; }
.foot { max-width: 1280px; margin: 0 auto; padding-block: 48px 72px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px;
  font: 400 13px/1.6 var(--ko); color: var(--mute); }
.foot p { margin: 0; }
.foot-l { font: 400 28px/1 var(--en); color: var(--ink); }
.foot-l span { margin-left: 12px; font: 300 12px/1 'Inter Tight', Pretendard, sans-serif; letter-spacing: .14em; color: #9a9a9a; }

/* 중간 폭 · 폰 폭 */
@media (max-width: 1100px) {
  .en { font-size: 88px; } .apply .en { font-size: 128px; }
  .four, .steps { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; }
  .nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .acro .w { font-size: 80px; }
  .card { flex-basis: calc((100% - 24px) / 2.2); }
}
@media (max-width: 600px) {
  .nav .wide { display: none; }
  .sec { padding-block: 88px; }
  .sec-head { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; }
  .idx { padding-top: 0; }
  .en { font-size: 58px; line-height: 1; } .apply .en { font-size: 84px; }
  .ko { font-size: 22px; margin-top: 14px; }
  .grid { grid-template-columns: 1fr; gap: 40px; }
  .c-7, .c-5, .c-6 { grid-column: auto; }
  .lead { font-size: 19px; }
  .body { font-size: 16px; }
  .sub-h { margin-top: 72px; }
  .four, .steps { grid-template-columns: 1fr; row-gap: 32px; }
  .pull { margin-top: 80px; font-size: 32px; }
  .acro { margin-bottom: 72px; }
  .acro li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0 12px; }
  .acro .w { font-size: 46px; }
  .acro .k { font-size: 16px; }
  .card { flex-basis: 84%; min-height: 240px; padding: 22px; }
  .card h4 { font-size: 32px; margin-top: 28px; }
  .kw { margin: -20px 0 32px; font-size: 14px; }
  .tablist { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0; }   /* 견제 M4 의 gap 은 PC 축 맞춤 — 폰 두 줄 탭은 앞과 같게 */
  .tablist button { font-size: 26px; padding: 14px 8px 16px 0; }
  .tablist button small { font-size: 12px; margin-top: 8px; }
  .panel { padding-top: 40px; }
  .h3.big { font-size: 30px; }
  .nums { margin: 40px 0 56px; gap: 16px; }
  .nums dd { font-size: 68px; }
  .days { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; }
  .day h4 { font-size: 25px; }
  .goals { margin-bottom: 56px; }
  .facts2 div { grid-template-columns: 1fr; gap: 4px; }
  .fac { grid-template-columns: 1fr; gap: 32px; }
  .fac-pin { position: static; }
  .cv li { grid-template-columns: 52px 1fr; gap: 14px; padding: 22px 0; }
  .cv-k { font-size: 16px; }
  .cv p { font-size: 17px; }
  .fold summary .h3 { font-size: 19px; }
  #evidence .fold { margin-top: 72px; }
  .step-n { font-size: 54px; margin-bottom: 18px; }
  .foot-l span { display: block; margin: 10px 0 0; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .sec .rise { opacity: 1; transform: none; transition: none; }
}

/* V17 토마스 11/9 상용 덧붙임 — 첫 장면은 로우키 그대로 · 더하는 것은 둘(머리 줄 옅게 · 가는 세로선) · 무대 500vh → 250vh(빛 셈·골반 크기·자리는 p 비율이라 그대로) */
.stage { height: 250vh; height: 250svh; }
.head { opacity: .88; transform: none; pointer-events: auto; }   /* V21: .7 → .88(script HEAD0 과 같음) */
.cue { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 7; width: 1px; height: 48px;   /* 레터박스(.lbox z 6) 위 */
 
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55)); transform: translateX(-50%); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .stage { height: 100vh; height: 100svh; } .cue { display: none; } }


/* V18 대표 11/9 「리프트 더 크게 · 약자 구성도 조금 더 크게 · 강조하지 말고 그냥 하나의 폰트 색으로」 · 「스크롤을 많이 해야 하는 문제」
   무대 250vh → 한 화면 + min(65vh, 600px) — 1440×900 에서 165vh · 큰 화면도 스크롤 길이 600px 를 넘지 않음(휠 칸 수가 화면 크기에 덜 묶임) */
.stage { height: calc(100vh + min(65vh, 600px)); height: calc(100svh + min(65svh, 600px)); }
.acr { font-size: 20px; letter-spacing: .12em; }
.acr b { font-weight: inherit; color: inherit; }                    /* 머리글자 강조 없앰 — 한 색 #9a9a9a(#101010 위 대비 6.7) · 한 굵기 */
@media (max-width: 600px) { .acr { font-size: 14px; letter-spacing: .01em; } }
/* 대기 효과 자리 — 골반 뒤(idle-back)·앞(idle-front) 빈 층 · script 가 골반 상자를 따라 옮기고 --idle(1 → 0)을 넣음 · 효과는 대표 벤치 고른 뒤 */
.idle-fx { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.idle-back { z-index: 0; }
.idle-front { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .stage { height: 100vh; height: 100svh; } .idle-fx { display: none; } }

/* V18 design-senior Medium·Nit — 머리 메뉴 14px · 표지 좌우 4px */
.nav { font-size: 14px; }
.brand { padding-inline: 4px; }

/* V18 대기 효과 — 벤치 c5(Framer Cinematic background) 꼴을 CSS 로만(idle-bench-261109 권하는 안 · 웹GL·그림 파일 없음)
   ① 흑백 안개 두 장: 뒤(골반 뒤 · 52초) · 앞(골반 앞 · 아주 옅게 · 44초 반대로) — 회색·흰 rgba 만 · 갈색·푸른 기 없음
   ② 필름 그레인: 이미 있는 .grain 층(SVG feTurbulence · 불투명 .06) 그대로
   ③ 골반 숨쉬기: 밝기 .42 ↔ .47 · 5초 · 사선 빛줄기는 넣지 않음(선택 안)
   --idle(script · 처음 1 → 골반이 다 내려오면 0)로 안개를 처음에 더 짙게 · 움직임 줄이기면 멈춤(위 줄에서 숨김) */
.idle-fx::before, .idle-fx::after { content: ""; position: absolute; inset: -45% -70%; pointer-events: none; will-change: transform; filter: blur(28px); }
.idle-back { opacity: calc(.5 + .5 * var(--idle, 1)); }
.idle-back::before { background:
    radial-gradient(38% 30% at 30% 55%, rgba(255,255,255,0.22), transparent 70%),
    radial-gradient(30% 24% at 68% 42%, rgba(255,255,255,0.18), transparent 72%),
    radial-gradient(46% 20% at 50% 78%, rgba(220,220,220,0.14), transparent 70%);
  animation: idleFogA 52s ease-in-out infinite; }
.idle-back::after { background:
    radial-gradient(28% 22% at 22% 35%, rgba(255,255,255,0.14), transparent 70%),
    radial-gradient(34% 26% at 78% 66%, rgba(255,255,255,0.16), transparent 70%);
  animation: idleFogB 44s ease-in-out infinite; }
.idle-front { opacity: calc(.25 + .75 * var(--idle, 1)); }
.idle-front::before { background:
    radial-gradient(30% 14% at 36% 70%, rgba(255,255,255,0.10), transparent 70%),
    radial-gradient(26% 12% at 66% 82%, rgba(255,255,255,0.08), transparent 70%);
  animation: idleFogB 44s ease-in-out infinite reverse; }
.idle-front::after { display: none; }
@keyframes idleFogA { 0%, 100% { transform: translate3d(-9%, 2%, 0) scale(1.04); } 50% { transform: translate3d(9%, -3%, 0) scale(1.14); } }
@keyframes idleFogB { 0%, 100% { transform: translate3d(8%, -1.5%, 0) scale(1.12); } 50% { transform: translate3d(-8%, 3%, 0) scale(1.02); } }
.cut { animation: idleBreathe 7s ease-in-out infinite alternate; }
@keyframes idleBreathe { from { filter: brightness(.40) contrast(1.15); } to { filter: brightness(.52) contrast(1.15); } }   /* V19: .42↔.47 5초 → .40↔.52 7초 — 보일 만큼, 느리게 */
/* V19 빛결 — 골반 겉면을 사선 빛 한 줄이 11초에 한 번 천천히 쓸고 지나감(screen · 흰빛만) */
.sheen { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(105deg, transparent 46%, rgba(255,255,255,.06) 48.5%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 51.5%, transparent 54%) no-repeat;   /* 견제 B1: 띠가 골반보다 넓어 「번쩍임」 → 가는 광택 · 선형으로 천천히 */
  background-size: 300% 100%; animation: sheenSweep 14s linear infinite; }
@keyframes sheenSweep { 0% { background-position: 100% 0; } 70%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .idle-fx, .sheen { display: none; } .cut { animation: none; } }

/* ===== V19 본문 인터랙션 — 대표 11/9 「내려갈떄 좋은데 조근 인터렉션카드 효과 등등을 은은하게 조검더 주면 더 못질거 같은데」
   숨기는 규칙은 모두 html.bfx 아래 — bfx 는(히어로 .fx 층과 이름이 겹치지 않게) script.js 끝 「V19 본문 인터랙션」이 IntersectionObserver 를 갖춘 뒤에만 붙임
   → JS 없음 · file:// · 움직임 줄이기 = 글이 처음부터 보임 · 히어로(.stage)는 건드리지 않음 · 회색·흰색만 */
:root { --eo: cubic-bezier(.2,.7,.2,1); }
html.bfx-init .about *, html.bfx-init .about *::before, html.bfx-init .about *::after { transition: none !important; }   /* fx 붙는 첫 프레임에 숨김이 움직이지 않게 */
/* .card 테두리 #2a2a2a 는 견제 M1 로 뺌 → 237행 var(--card-line) */

/* ① 절 머리 — 큰 영문은 낱말마다 마스크 안에서 아래→위(1s) · 한글 h2 는 흐림 8px → 0 · 번호 줄은 옅게 */
.mk { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .2em; margin: -.06em 0 -.2em; }
.mk-i { display: inline-block; }
html.bfx .sec .sec-head.rise { opacity: 1; transform: none; transition: none; }
html.bfx .sec-head .idx { opacity: 0; transition: opacity .8s var(--eo) var(--d, 0s); }
html.bfx .sec-head .mk-i { transform: translate3d(0, 108%, 0); transition: transform 1s var(--eo); transition-delay: calc(var(--d, 0s) + var(--w, 0s)); }
html.bfx .sec-head .ko { opacity: 0; filter: blur(8px); transition: opacity 1s var(--eo), filter 1.1s var(--eo); transition-delay: calc(var(--d, 0s) + .36s); }
html.bfx .sec-head.in .idx, html.bfx .sec-head.in .ko { opacity: 1; filter: none; }
html.bfx .sec-head.in .mk-i { transform: none; }

/* ② 카드·목록 행 — 아래 20px 에서 한 번만 올라옴 · 같이 들어온 형제끼리 75ms 씩 늦게(--d 는 script) */
html.bfx .sec .rv { transition: opacity .9s var(--eo), transform .9s var(--eo); transition-delay: var(--d, 0s); }
html.bfx .sec .rv:not(.in) { opacity: 0; transform: translate3d(0, 20px, 0); }
html.bfx .sec .rv.in { opacity: 1; transform: none; }
html.bfx .sec .rv.rv-done { transition: opacity .3s ease, transform .3s ease, border-color .3s ease; transition-delay: 0s; }   /* 드러난 뒤엔 호버 박자 */

/* ③ 카드 호버(PC) — 1px 테두리 #2a2a2a → #5a5a5a · 마우스를 따라가는 옅은 흰 빛(.055) · 3px 떠오름 · .3s */
@media (hover: hover) and (pointer: fine) {
  .card, .four li, .steps li { position: relative; }
  .card::after, .four li::after, .steps li::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.055), rgba(255,255,255,0) 70%); }
  .card:hover::after, .four li:hover::after, .steps li:hover::after { opacity: 1; }
  .card { transition: border-color .3s ease, transform .3s ease; }
  .card:hover, html.bfx .sec .card.rv-done:hover { border-color: #5a5a5a; transform: translate3d(0, -3px, 0); }
  .four li, .steps li { transition: transform .3s ease; }
  html.bfx .sec .four li.rv-done:hover, html.bfx .sec .steps li.rv-done:hover { transform: translate3d(0, -2px, 0); }
  .rail-track { padding-top: 4px; margin-top: -4px; }   /* 떠오른 카드 윗선이 넘김 칸에 잘리지 않게 — 자리는 그대로 */
}

/* ④ 이력 행의 가는 선 — 들어올 때 왼쪽에서 오른쪽으로 그어짐 */
html.bfx .cv { border-top-color: transparent; }
html.bfx .cv li { position: relative; border-bottom-color: transparent; }
html.bfx .cv li::after, html.bfx .cv li:first-child::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--eo); transition-delay: calc(var(--d, 0s) + .12s); }
html.bfx .cv li::after { bottom: -1px; }
html.bfx .cv li:first-child::before { top: -1px; }
html.bfx .cv li.in::after, html.bfx .cv li.in:first-child::before { transform: none; }

/* ⑤ 원장님 사진 — 흑백 그대로 1.04 → 1.0 으로 천천히 가라앉음(1.6s) · 감싸는 .ph 가 잘라 줌(가로 넘침 0) */
.ph { display: block; overflow: hidden; }
html.bfx .fac-pin img { transform: scale(1.04); transition: transform 1.6s cubic-bezier(.25,.6,.2,1); transition-delay: var(--d, 0s); }
html.bfx .fac-pin.in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.bfx .sec .rv, html.bfx .sec-head .idx, html.bfx .sec-head .ko, html.bfx .sec-head .mk-i, html.bfx .fac-pin img,
  html.bfx .cv li::after, html.bfx .cv li:first-child::before { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .card:hover, .four li:hover, .steps li:hover { transform: none !important; }
}

/* V19 머리 줄 아래 바탕 띠 — 본문 글이 LIFT·메뉴 밑으로 지나갈 때 겹쳐 읽히던 것(390 실측) 막음 · 머리 줄 opacity(.7)와 따로 두려고 .head 밖 fixed 층 */
body::after { content: ""; position: fixed; inset: 0 0 auto; z-index: 4; pointer-events: none;
  height: calc(84px + env(safe-area-inset-top, 0px)); background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 78%, rgba(16,16,16,0) 100%); }
@media (max-width: 600px) { body::after { height: calc(74px + env(safe-area-inset-top, 0px)); } }

/* V19 축 맞춤(대표 「팬컬티·하단 텍스트 폰트 위치 정확하게」) — Faculty 가 4fr/8fr·gap 48 로 다른 절(3fr/9fr·gap 24 · 본문 418)과 축이 달라 이력 표가 539 에서 시작하던 것 → 같은 축 */
@media (min-width: 601px) { .fac { grid-template-columns: 3fr 9fr; gap: 24px; } }
/* 신청 링크: 누르는 폭 padding 8px 때문에 첫 글자가 80 이 아니라 88 에서 시작 → 글 선을 본문 왼쪽 선에 */
.apply .links a:first-child { margin-left: -8px; }

/* V20b 대표 11/9 「모바일에서 첨 히어로에서 덜컬거림 … 처음 로드될 때」 — 골반 그림이 자리 잡기 전(gl-ready 전)엔 숨김
   (전: 크롬 390 에서 원래 크기 1344×768 로 왼쪽 위에 한 번 그려진 뒤 836 으로 줄어듦 · 느린 망에선 0 → 836 으로 툭 나타남) → 자리 잡은 뒤 .7초 페이드 */
.cut { opacity: 0; transition: opacity .7s cubic-bezier(.2,.7,.2,1); }
html:not(.gl-ready) .cut, html:not(.gl-ready) .sheen { visibility: hidden; }
html.gl-ready .cut { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cut { transition: none; } }

/* V20b 함께하는 곳 — 절 축(3fr/9fr · gap 24)에 맞춤 · 로고 넷은 흰 단색 .7 · 글자 줄 높이(--t)를 같게: 로고마다 그림 높이 = --t ÷ 글자 줄 비율(--r)
   글자 줄 비율(높이 300 으로 그려 잰 값): 하나메디퀸즈 「H」 69/300=.23 · 피어나인 글자 110/300=.366 · 착한습관 「착한습관」 195/600=.325(위아래 투명 여백 없음 · 위 잎 그림 · 아래 wellness)
   글자 줄 가운데를 한 선에: 그림 가운데에서 글자 줄 가운데까지(--c × 높이)만큼 올림 — 하나메디퀸즈 .327(위 곡선) · 피어나인 0 · 착한습관 .1525 */
.partners { max-width: 1280px; margin: 0 auto; padding-block: 64px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3fr 9fr; gap: 24px; align-items: center; --t: 10px; }
.pt-h { margin: 0; font: 400 12px/1.6 var(--ko); letter-spacing: .08em; color: var(--mute); }
.pt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: center; min-width: 0; }
.pt { display: flex; align-items: center; min-width: 0; min-height: 56px; }
.pt img { --h: calc(var(--t) / var(--r) * var(--k, 1)); display: block; width: auto; max-width: 100%; height: var(--h); opacity: .7; transform: translateY(calc(var(--h) * var(--c) * -1)); }
.pt-hmq { --r: .23; --c: .327; } .pt-p9 { --r: .366; --c: 0; --k: .82; } .pt-kh { --r: .325; --c: .1525; --k: 1.35; }
/* 협회(1158×206): 한글 줄 68~105 → 38/206=.184 · 왼쪽 WH 표지가 그림 높이 전체라 같은 글자 높이면 무게가 커 .75 배 · 가운데는 그림 가운데(--c 0)
   착한습관은 잎·글·wellness 를 세로로 쌓은 꼴이라 같은 글자 높이면 작게 보여 1.35 배(피카소 11/9 「착한습관은 지금 너무 작아 보입니다」) */
.pt-whaa { --r: .184; --c: 0; --k: .75; }
@media (max-width: 600px) {
  .partners { grid-template-columns: 1fr; gap: 20px; padding-block: 48px; --t: 8px; }
  .pt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .pt { min-height: 48px; }
}

/* V20b 눈으로 정비(대표 11/9 「육안으로 정비하고 얼라인할 거 개선」) — align.py 로 잰 어긋남만 고침 · 글·점선 칸은 그대로
   ① 머리 줄: LIFT 글 시작 28(1440)·28(1024)·20(390) ↔ 본문 80·24·16 → 본문과 같은 1280 축 · 표지 좌우 4px 는 바깥으로 · 「신청」 글 끝을 본문 오른쪽 선에 */
.head { padding-left: max(var(--pad), env(safe-area-inset-left, 0px), calc((100% - 1280px) / 2)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px), calc((100% - 1280px) / 2)); }
.brand { margin-left: -4px; }
.nav a:last-child { justify-content: flex-end; }
/* ② 오른쪽 칸 축 둘(절 머리·사실 표 3fr/9fr = 418 · 넷 칸·12칸 격자 둘째 칸 = 406, 1440 기준 12px 차) → 하나로: 첫 칸 = (폭 − 72)/4 → 둘째 칸 시작이 넷 칸 격자와 같음 */
@media (min-width: 601px) {
  .sec-head, .facts2 div, .fac, .partners { grid-template-columns: calc((100% - 72px) / 4) minmax(0, 1fr); }
  /* ③ 묻는 말: max-width 980 오른쪽 붙임이라 1440 에서 380(축 밖) · 1024 에서 24 → 같은 오른쪽 칸 축 */
  .faq { max-width: none; margin-left: calc((100% - 72px) / 4 + 24px); }
}
/* ④ 04 과정만 제목→본문 간격이 40(폰 24) — 다른 절 72(폰 44)와 맞춤 */
.kw { margin-top: 0; }
/* V20b 함께하는 곳 PC: 칸 넷 고른 폭이면 로고 폭이 달라 사이 빈칸이 들쭉날쭉 → 로고 사이 간격을 고르게(양 끝은 오른쪽 칸 축·본문 오른쪽 선) */
@media (min-width: 601px) { .pt-list { display: flex; justify-content: space-between; align-items: center; gap: 24px; } }
/* 폰: 협회 로고(가로 5.6:1)가 2×2 칸(390 에서 171px)보다 넓어 눌리던 것 → .7 배 · 더 좁으면 비율 그대로 줄임(contain) */
.pt img { object-fit: contain; object-position: 0 50%; }
@media (max-width: 600px) { .pt-whaa { --k: .7; } .pt-whaa img { height: auto; aspect-ratio: 1158 / 206; width: min(100%, calc(var(--h) * 1158 / 206)); } }

/* V20c 매거진 칸(M-2) — magazine/section-snippet.html ② CSS 그대로 */
.mag-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.mag-list > li { min-width: 0; }
.mag-card { display: flex; flex-direction: column; height: 100%; min-height: 320px; padding: 28px; border: 1px solid var(--card-line); background: #141414; color: var(--ink); text-decoration: none; transition: border-color .3s; }
.mag-card:hover, .mag-card:focus-visible { border-color: var(--ink); }
.mag-s { font: 400 12px/1.5 var(--ko); letter-spacing: .04em; color: var(--mute); }
.mag-t { margin-top: 16px; font: 400 22px/1.45 var(--kserif); color: var(--ink); }
.mag-q { margin-top: 16px; font: 300 15px/1.7 var(--ko); color: var(--dim); }
.mag-go { margin-top: auto; padding-top: 24px; font: 400 13px/1 var(--ko); color: var(--ink); opacity: .72; }
@media (max-width: 900px) { .mag-list { grid-template-columns: 1fr; } .mag-card { min-height: 0; } }
@media (max-width: 600px) { .mag-list { grid-template-columns: 1fr; gap: 16px; } .mag-card { min-height: 0; padding: 22px; } .mag-t { font-size: 19px; } }

/* ===== V21 — 대표 11/9 20시대 고칠 것 열 가지(ego/fix-report.md) · 회색·흰색만 · 갈색 0 ===== */

/* ① 우상단 메뉴 — 15px·500 · 사이 가는 세로선 · 호버/키보드 초점 = 밑줄이 왼쪽에서 그어지고 밝아짐(.3s) */
.nav { --ng: 10px; gap: var(--ng); font: 500 15px/44px var(--ko); letter-spacing: .04em; opacity: 1; color: rgba(255,255,255,.84); }
.nav a { position: relative; min-width: 0; padding-inline: 10px; transition: color .3s ease; }
.nav a:last-child { padding-right: 0; }   /* 「매거진」 글 끝을 본문 오른쪽 선(1360)에 — V20b ① 축 그대로 */
.nav a + a::before { content: ""; position: absolute; left: calc(var(--ng) / -2 - .5px); top: 50%; width: 1px; height: 12px; margin-top: -6px; background: rgba(255,255,255,.3); pointer-events: none; }
.nav a span { display: inline-block; line-height: 1.25; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size .3s cubic-bezier(.2,.7,.2,1); }
.nav a:hover, .nav a:focus-visible { color: #fff; }
.nav a:hover span, .nav a:focus-visible span { background-size: 100% 1px; }
.nav a:focus-visible { outline: none; }
@media (max-width: 600px) { .nav { --ng: 6px; font-size: 14px; letter-spacing: .02em; } .nav a { padding-inline: 7px; } .nav a:last-child { padding-right: 0; } }
@media (max-width: 340px) { .nav { --ng: 4px; font-size: 13px; } .nav a { padding-inline: 5px; } }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a span { transition: none; } }

/* ② 첫 접속 — 골반 층(.pv-in)이 1.5초에 걸쳐 밝아지며 .965 → 1 로 커짐 · 그 끝 무렵 흰 빛 띠(.glint) 한 번 · V20b 숨김(gl-ready 전 visibility hidden)은 그대로 */
.pv-in, .pv-wave { position: absolute; inset: 0; pointer-events: none; }
.pv-in { z-index: 2; }
.cut { opacity: 1; transition: none; }   /* V20b .7초 페이드 → 감싸는 .pv-in 이 맡음 */
html:not(.gl-ready) .pv-in { opacity: 0; }
html.gl-ready .pv-in { animation: pvIn 1.5s cubic-bezier(.22,.7,.2,1) both; }
@keyframes pvIn { 0% { opacity: 0; transform: scale(.965); filter: brightness(.55); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; filter: none; } }
.glint { position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.10) 46%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.10) 54%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 100% 0; }
html:not(.gl-ready) .glint { visibility: hidden; }
html.gl-ready .glint { animation: glintOnce 1.7s cubic-bezier(.45,.05,.3,1) .7s 1 both; }
@keyframes glintOnce { 0% { opacity: 0; background-position: 74% 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; background-position: 26% 0; } }   /* 앞 판 그림(1235px) 안 골반 자리(가운데 약 40%)만 지나가게 74% → 26% */
/* 하단 스크롤 줄 — 가는 선 위로 짧은 흰 빛이 위→아래로 계속 흐름(2.4초 반복) · 스크롤하면 V17 처럼 옅어짐 */
.cue { overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.32)); }
.cue::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 70%, rgba(255,255,255,0));
  transform: translateY(-100%); animation: cueFlow 2.4s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes cueFlow { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(250%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.gl-ready .pv-in, html.gl-ready .glint, .cue::after { animation: none; } .glint { display: none; } }

/* ③ 「확 넘어감」 — PC(마우스)만 무대 스크롤 길이 585 → 약 780px(1440×900) · 박자는 script.js B 를 1.65 배로 폄 · 폰은 V20 길이 그대로(덜컹 0 셈 그대로) */
@media (hover: hover) and (pointer: fine) and (min-width: 701px) {
  .stage { height: calc(100vh + min(87vh, 780px)); height: calc(100svh + min(87svh, 780px)); }
}
@media (prefers-reduced-motion: reduce) { .stage { height: 100vh !important; height: 100svh !important; } }

/* ⑥ 줄바꿈 — 낱말 단위(keep-all) · 제목은 줄 길이를 고르게(balance) · 본문은 끝줄 한 글자 막기(pretty) · <br> 없음 */
.about { word-break: keep-all; overflow-wrap: break-word; }
.about h2 .ko, .about h3, .about h4, .pull, .mag-t, .lead, .sub-h, .byline { text-wrap: balance; }
.about p, .about li, .about dd, .about dt, .about td, .mag-q, .mag-s { text-wrap: pretty; }

/* ⑦ 05 원장님 — PC(801px 이상): 사진 높이를 정해 두고(1440 에서 560) 오른쪽 약력 칸을 같은 높이로 · 넘치면 그 칸 안에서만 세로 스크롤 + 아래 흐림 */
@media (min-width: 801px) {
  .fac { --fh: clamp(480px, 46vw, 560px); grid-template-columns: calc((100% - 264px) / 12 * 5 + 96px) minmax(0, 1fr); gap: 24px; align-items: start; }   /* 12칸 격자 5칸 : 7칸(02 Why now 와 같은 나눔) */
  .fac-pin { position: static; }
  .fac-pin img, .fac-pin .ph { height: var(--fh); }
  .fac-pin img { aspect-ratio: auto; object-fit: cover; object-position: 50% 18%; }
  .cv { height: var(--fh); overflow-y: auto; overscroll-behavior: auto; padding-right: 20px; scroll-behavior: smooth;
    --cv-top: 0px; --cv-bot: 48px;   /* 견제 M2·M3: 위 흐림 32px(맨 위일 땐 0) · 아래 흐림 88 → 48px(한 행을 통째로 덮지 않게) */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--cv-top), #000 calc(100% - var(--cv-bot)), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--cv-top), #000 calc(100% - var(--cv-bot)), transparent 100%); }
  .cv.scrolls:not(.at-start) { --cv-top: 32px; }
  .cv.at-end { --cv-bot: 0px; }
  .cv:not(.scrolls) { -webkit-mask-image: none; mask-image: none; }
  .cv::-webkit-scrollbar { width: 3px; }
  .cv::-webkit-scrollbar-track { background: rgba(255,255,255,.10); }   /* 견제 M3: 길이 보이게 .06 → .10 */
  .cv::-webkit-scrollbar-thumb { background: rgba(255,255,255,.42); }
  .cv:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
}
@supports not selector(::-webkit-scrollbar) { @media (min-width: 801px) { .cv { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.42) rgba(255,255,255,.10); } } }
@media (prefers-reduced-motion: reduce) { .cv { scroll-behavior: auto; } }
/* 사진: 처음부터 컬러가 기본 · 스크립트가 .gray 를 붙였다가 구역에 들어오면 떼어 2.2초에 걸쳐 컬러로 */
.fac-pin img { filter: grayscale(0) contrast(1.02) brightness(.94); }   /* 흑백 쪽과 함수 목록을 같게(grayscale·contrast·brightness) — 다르면 보간이 안 되고 한 번에 바뀜 */
.fac-pin.gray img { filter: grayscale(1) contrast(1.06) brightness(.86); }
.fac-pin img, html.bfx .fac-pin img { transition: transform 1.6s cubic-bezier(.25,.6,.2,1), filter 2.4s cubic-bezier(.5,0,.5,1); }   /* 앞뒤가 느린 곡선 — 처음 0.5초에 색이 몰리지 않게 */

/* ⑩ 히어로 아래 바탕 — #101010 → #1a1a1a · 구역마다 #1e1e1e 와 번갈아(폭 끝까지) · 히어로 끝(#000)에서 320px 동안 이어짐 · 히어로는 그대로
   머리 띠(--band): 히어로 위에선 #101010 · 히어로를 지나면 script.js 「머리 띠 색」이 띠 아래 끝 바로 밑의 바탕 색(그라데이션 구간·#1a1a1a·#1e1e1e)을 읽어 같은 색으로(견제 H1 · 턱 없앰) */
:root { --band: #101010; }
html.past-hero { --band: #1a1a1a; }   /* 스크립트가 못 돌 때의 기본 */
.about { background: linear-gradient(180deg, #000 0, #1a1a1a 320px) no-repeat, #1a1a1a; }
.about > section:nth-of-type(even) { background: #1e1e1e; box-shadow: 0 0 0 100vmax #1e1e1e; clip-path: inset(0 -100vmax); }
.card, .mag-card { background: rgba(255,255,255,.03); }
/* 견제 M1 — 넘김 카드·매거진 카드 테두리를 보이는 한 값으로(변수 하나 · 호버는 기존대로 밝아짐) */
:root { --card-line: #484848; }   /* 쓰는 곳 둘: .card(본 묶음 237행) · .mag-card(V20c 매거진 칸) — #484848: 카드 바탕 위 1.68 · 호버 #5a5a5a 와 단계 유지 */

body::after { background: linear-gradient(180deg, var(--band) 0%, var(--band) 78%, transparent 100%); }   /* 견제 H1: transition 뺌 — 그라데이션은 보간되지 않고, 띠 색은 스크롤마다 바로 바탕을 따라야 턱이 안 생김 */

/* ⑨ 물결 바탕 층(캔버스) — 골반·LIFT 뒤 */
.ripple { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }

/* ===== V22 사진 띠(.band) — 대표 11/9 21:2x 「섹션 찾아서 음영처리해서 넣어주자」 · 02 끝(02 #1a1a1a → 03 #1e1e1e 사이) · 전폭(.about 옆 여백만큼 밖으로 · 100vw 안 씀 = 가로 넘침 없음)
   음영: 사진 자체를 어둡게(밝기 .6) + 위는 앞 구역 바탕에서, 아래는 다음 구역 바탕으로 녹는 그라데이션 + 가장자리 비네팅 · 글(pull)은 아래 왼쪽 본문 축 */
.band { --b-top: #1a1a1a; --b-top0: rgba(26,26,26,0); --b-bot: #1e1e1e; --b-bot0: rgba(30,30,30,0);   /* 앞·뒤 구역 바탕(style.css ⑩ 홀 #1a1a1a · 짝 #1e1e1e)과 같은 값 */
  --b-pos: 56% 50%;
  position: relative; margin: 0 calc(-1 * max(var(--pad), env(safe-area-inset-right, 0px))) 0 calc(-1 * max(var(--pad), env(safe-area-inset-left, 0px)));
  height: clamp(440px, 50vw, 700px); overflow: hidden; background: var(--b-top); }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--b-pos);
  filter: brightness(.6) saturate(.78) contrast(1.04); }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--b-top) 0, var(--b-top0) 24%, var(--b-bot0) 52%, rgba(30,30,30,.72) 80%, var(--b-bot) 100%),
              radial-gradient(110% 85% at 52% 55%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }   /* 견제 M2: 오른쪽 위(손 없이 끝나는 팔)를 비네팅으로 더 눌러 둠 */
.band .pull { position: absolute; z-index: 1; margin: 0; bottom: 9%; left: max(var(--pad), env(safe-area-inset-left, 0px), calc((100% - 1280px) / 2));
  right: max(var(--pad), env(safe-area-inset-right, 0px), calc((100% - 1280px) / 2)); text-shadow: 0 1px 24px rgba(0,0,0,.55); }
.band .pull .nw { white-space: nowrap; }   /* 견제 M1: balance 못 쓰는 브라우저에서 「선생님」 한 낱말만 넘어가지 않게 */
.band + .sec { border-top-color: transparent; }   /* 띠 아래 끝이 다음 구역 바탕으로 녹으니 가는 줄은 뺌 */
@media (min-width: 601px) and (max-width: 1023px) {   /* 견제 H1: 태블릿 세로에서 문구가 골반 모형을 덮지 않게 띠를 높이고 글을 줄임 */
  .band { height: clamp(540px, 70vw, 700px); }
  .band .pull { font-size: clamp(40px, 5.8vw, 52px); }
}
@media (max-width: 600px) {
  .band { height: clamp(360px, 104vw, 460px); --b-pos: 60% 46%; }   /* 폰: 골반 모형(원본 x 54%)·두 선생님 머리(x 72~77%)가 함께 들어오는 자리 */
  .band .pull { bottom: 7%; }
}