/* ═══════════════════════════════════════════════════════════════
   ondakorea /v4 — 랜딩 최종 검수판
   v3(랜딩 시안)의 디자인 언어 + 마케팅 진단 보고서의 재구성안.
   DC 런타임 없음 — 보통의 정적 HTML/CSS/JS.

   토큰은 v2/v3 에서 AA 로 고쳐 둔 값을 이어받는다 (build-v2.py THEME_CSS).
   라이트·다크 각각 실측 통과한 값이므로 손대면 다시 재야 한다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 표면 */
  --bg:#FCFBF6; --bg2:#F3F1E8; --card:#FFFEFA; --ph:#E7E4DB;
  /* 글자 */
  --text:#24201C; --text2:#3B352F; --text3:#57504A; --dim:#6F6860;
  /* 강조 — accent 원색은 로고·선용, 버튼은 dp */
  --accent:#157755; --accent-dp:#0F6647; --on-accent:#FCFAF4;
  --gold:#956D14; --red:#A93326; --green:#5A7332; --ink:#23211E;
  /* 면 틴트 (라이트·다크에서 각각 재정의 — 생 hex 금지) */
  --tint1:#E7EBE1; --tint2:#E3EBE3; --tint3:#EDEFE7; --hl:#F0DFA8;
  /* 감각 5색 — 글자용(AA). 견본 면은 --*-true */
  --see:#18745A; --hear:#23211E; --smell:#576E30; --taste:#B5382A; --touch:#82611A;
  --see-true:#1D8F6E; --hear-true:#23211E; --smell-true:#6E8B3D;
  --taste-true:#B5382A; --touch-true:#D9A73E;
  /* 선 */
  --line-10:rgba(36,32,28,.1); --line-14:rgba(36,32,28,.14);
  --line-20:rgba(36,32,28,.2); --line-24:rgba(36,32,28,.24);
  --chip:rgba(252,251,246,.92);
  /* 서체 */
  --sans:'IBM Plex Sans','IBM Plex Sans KR','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* 타입 스케일 — 유동 */
  --t--1:clamp(.80rem,.78rem + .10vw,.86rem);
  --t-0:clamp(.97rem,.94rem + .16vw,1.06rem);
  --t-1:clamp(1.09rem,1.02rem + .32vw,1.28rem);
  --t-2:clamp(1.22rem,1.10rem + .52vw,1.55rem);
  --t-3:clamp(1.5rem,1.24rem + 1.2vw,2.2rem);
  --t-4:clamp(1.9rem,1.4rem + 2.2vw,3.1rem);
  --gut:clamp(1.1rem,.55rem + 2.5vw,2.2rem);
  --sect:clamp(3.2rem,2.2rem + 4.5vw,5.5rem);
  --wrap:1200px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#191816; --bg2:#211F1C; --card:#22201E; --ph:#2B2926;
  --text:#F1EBDF; --text2:#D9D2C6; --text3:#B4AC9D; --dim:#9A9184;
  --accent:#46B48F; --accent-dp:#58C49E; --on-accent:#191816;
  --gold:#E7BC61; --red:#DC6B5C; --green:#93AF63; --ink:#C9C2B4;
  --tint1:#1E211C; --tint2:#1D211E; --tint3:#212420; --hl:#6B5A22;
  --see:#46B48F; --hear:#C9C2B4; --smell:#93AF63; --taste:#DD6F60; --touch:#E7BC61;
  --line-10:rgba(241,235,223,.12); --line-14:rgba(241,235,223,.16);
  --line-20:rgba(241,235,223,.22); --line-24:rgba(241,235,223,.26);
  --chip:rgba(25,24,22,.92);
}}
:root[data-theme=dark]{
  --bg:#191816; --bg2:#211F1C; --card:#22201E; --ph:#2B2926;
  --text:#F1EBDF; --text2:#D9D2C6; --text3:#B4AC9D; --dim:#9A9184;
  --accent:#46B48F; --accent-dp:#58C49E; --on-accent:#191816;
  --gold:#E7BC61; --red:#DC6B5C; --green:#93AF63; --ink:#C9C2B4;
  --tint1:#1E211C; --tint2:#1D211E; --tint3:#212420; --hl:#6B5A22;
  --see:#46B48F; --hear:#C9C2B4; --smell:#93AF63; --taste:#DD6F60; --touch:#E7BC61;
  --line-10:rgba(241,235,223,.12); --line-14:rgba(241,235,223,.16);
  --line-20:rgba(241,235,223,.22); --line-24:rgba(241,235,223,.26);
  --chip:rgba(25,24,22,.92);
}

/* ── 리셋·기본 ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:var(--t-0);line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* 한글은 어절 단위로만 줄을 가른다. 음절 중간 끊김 금지 — 전역 적용.
     keep-all 은 CJK 에만 작동하고 라틴은 원래 공백에서 갈라진다. */
  word-break:keep-all;overflow-wrap:break-word}
/* keep-all 은 한국어 전용 규칙이다 — 일본어·중국어는 어디서든 끊는 관례(禁則은
   브라우저가 처리)고, 태국어는 사전 기반 줄바꿈이라 keep-all 이 오히려
   통짜 오버플로를 만든다 (2026-08-23 ja 360px 실측 +50px). */
[data-lang=ja] body,[data-lang=zh] body,[data-lang=th] body{word-break:normal}
p,li,figcaption,blockquote{text-wrap:pretty}
.nb{white-space:nowrap}
img,video{max-width:100%;height:auto;display:block}
/* 위 규칙이 UA 의 [hidden]{display:none} 을 이긴다 — 요소 선택자가 UA 보다 세다.
   되돌려 놓지 않으면 hidden 인 img·video 가 화면에 남는다(2026-08-31 실측:
   선생님 절에서 썸네일이 두 번 보였다). 클립 안팎을 가리지 않고 여기서 막는다. */
img[hidden],video[hidden]{display:none}
a{color:var(--accent-dp);text-underline-offset:3px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0 0 .6em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sect{padding:var(--sect) 0}
.sect-alt{background:var(--bg2)}

/* 언어 전환 — html[data-lang] 로 결정. 기본 en, ko·zh(간체) 지원 (8-1) */
[data-lang=en] :is(.ko,.zh,.ja,.th,.es,.vi,.ru){display:none!important}
[data-lang=ko] :is(.en,.zh,.ja,.th,.es,.vi,.ru){display:none!important}
[data-lang=zh] :is(.en,.ko,.ja,.th,.es,.vi,.ru){display:none!important}
[data-lang=ja] :is(.en,.ko,.zh,.th,.es,.vi,.ru){display:none!important}
[data-lang=th] :is(.en,.ko,.zh,.ja,.es,.vi,.ru){display:none!important}
[data-lang=es] :is(.en,.ko,.zh,.ja,.th,.vi,.ru){display:none!important}
[data-lang=vi] :is(.en,.ko,.zh,.ja,.th,.es,.ru){display:none!important}
[data-lang=ru] :is(.en,.ko,.zh,.ja,.th,.es,.vi){display:none!important}
/* Tier B 고지(입문·1급 한·영 진행)는 한·영 화면에서는 숨긴다 */
[data-lang=en] .tierb-note,[data-lang=ko] .tierb-note{display:none!important}

/* 키커 — "01 — WATCH" */
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.kicker b{color:var(--accent-dp);font-weight:600}
h2.sect-h{font-size:var(--t-3);letter-spacing:-.01em;margin-bottom:.9em;max-width:26ch}
.sect-lead{color:var(--text2);max-width:62ch;margin-bottom:2rem}

/* ── 버튼 ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:11px 22px;border-radius:4px;font-size:var(--t-0);
  font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--accent-dp);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent);color:var(--on-accent)}
:root[data-theme=dark] .btn-primary:hover,
.btn-primary:hover{filter:none}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--line-24)}
/* 히어로의 두 버튼은 폭이 같다. 좁아지면 각자 한 줄을 차지한다. */
.hero-cta .btn{flex:1 1 0;min-width:0;padding-inline:12px;text-align:center}
/* 헤더 목차 — 하단 바에서 올라왔다(2026-08-27). */
/* 🔴 .hdr-nav 에 걸린 margin-left:auto 는 그 nav 가 모바일에서 display:none 이라
   작동하지 않는다 — 도구가 오른쪽 끝에 못 붙고 로고 뒤에 매달려 62px 이 비었다(실측).
   도구 영역 자체에 auto 를 준다. */
.hdr-tools{margin-left:auto}
.hdr-toc{white-space:nowrap;display:grid;place-items:center;width:40px;padding:0}
.lang-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ic-globe{flex:none}
/* 언어 이름은 자기표기 전체명이 원칙이다(Español, 日本語, Tiếng Việt).
   다만 420px 이하 헤더에서는 'Tiếng Việt' 이 두 줄로 접혔다(실측) —
   그 폭에서만 두 글자 코드로 줄이고, 드롭다운 목록은 전체명 그대로 둔다. */
[data-lang-code]{display:none}
@media (max-width:420px){
  [data-lang-name]{display:none}
  [data-lang-code]{display:inline!important}
}
/* 목차가 헤더로 올라오면서 360px 이 빠듯해졌다 — en·es·vi·ru 가 넘쳤다(실측).
   아주 좁을 때는 워드마크를 접는다. 로고 심볼에 '온다'가 이미 들어 있다. */
@media (max-width:420px){
  .brand-name{display:none}
  .hdr-toc,.lang-btn{padding-inline:10px;font-size:13px}
}

.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dp)}

/* ── 오감 5색 바 (v1 이식) ─────────────────────────── */
.senses-bar{display:grid;grid-template-columns:repeat(5,1fr);height:5px}
.senses-bar i{display:block}

/* ── 헤더 ─────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:50;background:var(--chip);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-10)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--text);flex:none}
.brand svg{height:40px;width:auto;display:block}
.brand-name{font-size:16.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.hdr-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--dim);border-left:1px solid var(--line-20);padding-left:9px;
  white-space:nowrap}
.hdr-nav{display:flex;gap:4px;margin-left:auto}
.hdr-nav a{padding:10px 10px;font-size:14.5px;color:var(--text2);
  text-decoration:none;white-space:nowrap;border-radius:3px}
.hdr-nav a:hover{color:var(--accent-dp);background:var(--line-10)}
/* 톤 낮춤은 색으로만 — 크기까지 줄이면 베이스라인이 어긋나 보인다 */
.hdr-nav a.subdued{color:var(--dim)}
.hdr-tools{display:flex;align-items:center;gap:8px}
.hdr-tools .tool{min-width:36px;min-height:36px;display:inline-flex;
  align-items:center;justify-content:center;background:none;
  border:1px solid var(--line-20);border-radius:4px;color:var(--text2);
  font-size:13px;font-family:var(--mono)}
.hdr-tools .tool:hover{border-color:var(--accent)}
/* 언어 선택 — 위키피디아 방식. 버튼은 현재 언어 자기 표기 + 목록에서 선택 */
.lang-menu{position:relative}
.lang-btn{padding:0 10px;gap:6px}
.lang-btn::after{content:"▾";font-size:9px;color:var(--dim)}
.lang-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;
  max-height:min(70vh,430px);overflow:auto;
  background:var(--card);border:1px solid var(--line-24);border-radius:8px;
  padding:5px;box-shadow:0 6px 22px rgba(0,0,0,.15);z-index:80}
.lang-pop button{display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;min-height:40px;padding:0 11px;border:0;background:none;
  border-radius:5px;color:var(--text);font-size:14px;text-align:left;
  font-family:inherit;cursor:pointer}
.lang-pop button:hover{background:var(--line-10)}
.lang-pop button.on{color:var(--accent-dp);font-weight:600}
.lang-pop button.on::after{content:"✓";font-size:12px}
.hdr-cta{min-height:38px;padding:8px 15px;font-size:14px}
@media (max-width:940px){.hdr-nav{display:none}.hdr-tag{display:none}}
@media (max-width:480px){.hdr-cta{display:none}}
/* 360px: 브랜드 199 + 도구가 꽉 찬다 — 언어 버튼 여백만 조인다 (실측 2026-08-23) */
@media (max-width:420px){
  .hdr-tools{gap:5px}
  .lang-btn{padding:0 7px;gap:4px}
}

/* ── 히어로 ───────────────────────────────────────── */
.hero{padding:clamp(2.2rem,1.2rem + 4vw,4.5rem) 0 var(--sect)}
.hero-grid{display:grid;gap:clamp(1.6rem,1rem + 3vw,3.5rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-dp);margin-bottom:18px}
.hero h1{font-size:var(--t-4);letter-spacing:-.02em;margin-bottom:.5em}
.hero-sub{font-size:var(--t-1);color:var(--text2);max-width:44ch;margin-bottom:1.4em}
.hero-rapport{border-left:3px solid var(--gold);padding:6px 0 6px 16px;
  margin:0 0 1.6em;max-width:52ch}
.hero-rapport p{font-size:var(--t-0);color:var(--text2);font-style:normal;margin:0}
.hero-rapport cite{font-style:normal;font-family:var(--mono);font-size:12px;
  color:var(--dim);display:block;margin-top:6px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:1.8em}
.hero-stats{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);
  font-size:12.5px;color:var(--dim);letter-spacing:.04em}
.hero-stats b{color:var(--text2);font-weight:600}
.hero-media.hero-video{display:flex;justify-content:center}
.hero-video video{width:min(100%,320px);aspect-ratio:9/16;object-fit:cover;
  border-radius:10px;border:1px solid var(--line-14);background:var(--ph)}

/* ── 영상 ─────────────────────────────────────────── */
/* 스크롤은 이 상자 안에서만 — 페이지 body 는 가로로 안 움직인다 */
.clips{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 12px;scrollbar-width:thin}
.clip{flex:0 0 min(86%,330px);scroll-snap-align:center;margin:0}
@media (min-width:1000px){
  .clips{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
    overflow:visible;padding:0}
}
.clip{background:var(--card);border:1px solid var(--line-14);border-radius:6px;
  overflow:hidden}
.clip-media video{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ph)}
/* 디자인 썸네일 + 명시적 재생 — 누르기 전에는 영상을 내려받지 않는다 */
.clip-media{position:relative}
.clip-media img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  background:var(--ph)}
.clip-go{position:absolute;inset:0;margin:auto;width:64px;height:64px;
  border-radius:50%;border:0;cursor:pointer;
  background:rgba(20,20,18,.55);color:#FCFAF4;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);transition:background .15s,transform .15s}
.clip-go span{margin-left:4px}
.clip-media:hover .clip-go{background:var(--accent-dp);transform:scale(1.06)}
/* 재생 컨트롤 — 정지하면 썸네일로 돌아간다. hidden 속성이 항상 이긴다 */
.clip-media img[hidden],.clip-go[hidden],.clip-ctl[hidden]{display:none}
/* 우상단 — 우하단은 문의 FAB·자막과 겹친다 (430 실측 2026-08-23) */
.clip-ctl{position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:3}
.clip-ctl button{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff}
.clip-ctl button:hover{background:rgba(0,0,0,.78)}
.clip-media:not([data-state="paused"]) .cc-ic-play{display:none}
.clip-media[data-state="paused"] .cc-ic-pause{display:none}
.clip figcaption{padding:12px 14px 14px}
.clip figcaption b{display:block;font-size:14.5px;margin-bottom:2px}
.clip figcaption span{font-size:13px;color:var(--dim)}
.watch-more{margin-top:1.6rem}

/* ── 후기 + 갤러리 ───────────────────────────────── */
.voices{display:grid;gap:18px;margin-bottom:2.6rem}
@media (min-width:760px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{background:var(--card);border:1px solid var(--line-14);border-radius:6px;
  padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px}
.voice blockquote{margin:0;font-size:var(--t-0);color:var(--text2);flex:1}
.voice footer{display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;position:relative;
  overflow:hidden;border:1px solid var(--line-20)}
.avatar svg{position:absolute;inset:0;width:100%;height:100%}
.voice-name{font-size:13.5px;color:var(--text3)}
.voice-name b{display:block;color:var(--text);font-size:14px}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;min-width:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px;
  border:1px solid var(--line-14)}
/* 캡션은 이미지당 한 줄이다(2026-08-27 지시). 문구를 짧게 쓰되, 긴 언어에서
   두 줄로 흘러내리지 않게 여기서도 막는다 — 넘치면 …로 줄인다. */
.gallery figcaption{font-size:12.5px;color:var(--dim);padding:7px 2px 0;
  line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 사진을 받으면 채울 자리. 받은 뒤에는 이 규칙과 .gal-slot 을 같이 지운다. */
.gal-ph{width:100%;aspect-ratio:4/3;border-radius:5px;border:1px dashed var(--line-24);
  background:var(--bg2)}
.consent-note{font-size:12.5px;color:var(--dim);margin-top:1.2rem;max-width:70ch}

/* ── 방식 ─────────────────────────────────────────── */
.method-grid{display:grid;gap:26px}
@media (min-width:900px){.method-grid{grid-template-columns:1fr 1fr;align-items:center}}
.method-copy p{max-width:62ch}
.onda3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.6rem 0}
@media (max-width:560px){
  .onda3{grid-template-columns:1fr;gap:8px}
  .onda3 div{display:flex;align-items:baseline;gap:14px;text-align:left;padding:12px 16px}
  .onda3 b{margin:0;min-width:1.7em;font-size:var(--t-2)}
}
.onda3 div{background:var(--tint3);border:1px solid var(--line-10);
  border-radius:5px;padding:16px 14px;text-align:center}
.onda3 b{display:block;font-size:var(--t-2);margin-bottom:4px}
.onda3 span{font-size:12.5px;color:var(--text3)}
/* 오감 블록 — 모바일: 픽토그램 칩 리스트 · 900px + : 가로 카드 행 (2026-08-23 컨펌) */
.senses{list-style:none;margin:1.4rem 0;padding:0;display:flex;
  flex-direction:column;gap:10px}
.senses li{display:flex;align-items:center;gap:12px}
/* 칩 — 브랜드 원색(안 뒤집힘) 위 픽토그램. 치자황만 먹(팔레트 규칙) */
.senses .sw{width:36px;height:36px;border-radius:8px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-14);color:#FCFAF4}
.senses .sw svg{width:21px;height:21px}
.senses .st{display:flex;align-items:baseline;gap:10px;min-width:0}
.senses .sv{font-weight:600;min-width:4.6em;flex:none}
.senses .sd{color:var(--text3);font-size:.93em}
.senses .sc{display:none}
.s-see .sw{background:var(--see-true)} .s-see .sv{color:var(--see)}
.s-hear .sw{background:var(--hear-true)} .s-hear .sv{color:var(--hear)}
.s-smell .sw{background:var(--smell-true)} .s-smell .sv{color:var(--smell)}
.s-taste .sw{background:var(--taste-true)} .s-taste .sv{color:var(--taste)}
.s-touch .sw{background:var(--touch-true);color:#23211E} .s-touch .sv{color:var(--touch)}
@media (min-width:900px){
  .senses li{gap:0;background:var(--card);border:1px solid var(--line-14);
    border-radius:10px;overflow:hidden;align-items:stretch}
  .senses .sw{width:88px;height:auto;min-height:88px;border:0;border-radius:0}
  .senses .sw svg{width:42px;height:42px}
  .senses .st{flex-direction:column;align-items:flex-start;gap:2px;
    justify-content:center;padding:14px 20px}
  .senses .sv{font-size:20px;min-width:0}
  .senses .sd{font-size:13.5px;color:var(--dim)}
  .senses .sc{display:inline;font-family:var(--mono);font-size:11.5px;
    letter-spacing:.08em;margin-right:10px;color:var(--dim)}
}
/* 오감 5항목 — 설명을 걷어내고 한 줄로 세운다 (2026-08-31 회의반영 B-2).
   이름만 남기고 핵심 문장 한 줄을 아래에 둔다. 900px 카드 행 규칙은 이 변형에 적용하지 않는다. */
.senses.senses-row{display:grid;grid-template-columns:repeat(5,1fr);
  gap:6px;margin:1.5rem 0 .9rem}
.senses-row li{flex-direction:column;align-items:center;text-align:center;gap:7px}
.senses-row .sw{width:clamp(34px,10vw,48px);height:clamp(34px,10vw,48px);
  border-radius:10px}
.senses-row .sw svg{width:58%;height:58%}
.senses-row .sv{min-width:0;flex:0 1 auto;font-size:clamp(11.5px,2.9vw,16px);
  line-height:1.25;overflow-wrap:anywhere;hyphens:none}
@media (min-width:900px){
  .senses.senses-row li{background:none;border:0;border-radius:0;align-items:center;gap:9px}
  .senses-row .sw{width:56px;height:56px;min-height:0;border-radius:12px}
  .senses-row .sv{font-size:17px}
}
.senses-line{margin:0 0 .4rem;font-size:var(--t-1);color:var(--text2);
  max-width:44ch;text-wrap:balance}

.no-promise{background:var(--tint1);border:1px solid var(--line-14);
  border-radius:6px;padding:20px 22px;margin-top:1.8rem}
.no-promise h3{font-size:var(--t-1);margin-bottom:.5em}
.no-promise p{margin:0;color:var(--text2);max-width:60ch}
.method-photo{margin:1.8rem 0 0}
.method-photo img{width:100%;border-radius:8px;border:1px solid var(--line-14)}
.method-photo figcaption{font-size:12.5px;color:var(--dim);padding-top:7px}

/* ── 수업 ─────────────────────────────────────────── */
.programs{display:grid;gap:18px;margin-bottom:3rem}
@media (min-width:760px){.programs{grid-template-columns:repeat(3,1fr)}}
.program{background:var(--card);border:1px solid var(--line-14);border-radius:6px;
  padding:22px;display:flex;flex-direction:column;gap:8px}
.program h3{font-size:var(--t-1);margin:0}
.program .p-tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--accent-dp);text-transform:uppercase}
.program p{margin:0;font-size:.95em;color:var(--text2);flex:1}
.program .p-meta{font-family:var(--mono);font-size:12px;color:var(--dim);
  border-top:1px solid var(--line-10);padding-top:10px}
.tz-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-bottom:1.4rem}
.tz-controls label{font-size:13.5px;color:var(--text3)}
.tz-controls select{min-height:40px;padding:8px 10px;border-radius:4px;
  border:1px solid var(--line-24);background:var(--card);color:var(--text);
  font-family:inherit;font-size:14px;max-width:100%}
.tz-note{font-size:12.5px;color:var(--dim);width:100%}
.schedule{display:grid;gap:14px}
@media (min-width:760px){.schedule{grid-template-columns:repeat(2,1fr)}}
.sched-card{background:var(--card);border:1px solid var(--line-14);
  border-radius:6px;padding:18px 20px}
.sched-card h3{font-size:var(--t-1);margin-bottom:4px}
.sched-card .s-days{font-size:13.5px;color:var(--text3);margin-bottom:10px}
.sched-card .s-local{font-family:var(--mono);font-size:13px;color:var(--accent-dp)}
.sched-card .s-meta{font-family:var(--mono);font-size:12px;color:var(--dim);
  margin-top:10px;border-top:1px solid var(--line-10);padding-top:9px}
.anchor-note{background:var(--bg2);border:1px solid var(--line-14);border-radius:6px;
  padding:18px 20px;margin-top:1.6rem;font-size:.95em;color:var(--text2);max-width:100%}
.anchor-note b{color:var(--text)}

/* ── 선생님 ───────────────────────────────────────── */
.teacher-grid{display:grid;gap:clamp(1.6rem,1rem + 3vw,3rem);align-items:start}
@media (min-width:860px){.teacher-grid{grid-template-columns:.8fr 1.2fr}}
.teacher-photo img{width:100%;border-radius:6px;border:1px solid var(--line-14)}
.teacher-photo figcaption{font-size:12.5px;color:var(--dim);padding-top:7px}
.teacher-story p{max-width:62ch;color:var(--text2)}
.teacher-story p.lede{font-size:var(--t-1);color:var(--text)}

/* ── 폼 공통 ─────────────────────────────────────── */
.form{display:grid;gap:16px;max-width:640px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{min-height:44px;padding:11px 13px;
  border:1px solid var(--line-24);border-radius:4px;background:var(--card);
  color:var(--text);font-family:inherit;font-size:15px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.form-row{display:grid;gap:16px}
@media (min-width:560px){.form-row{grid-template-columns:1fr 1fr}}
.form-msg{display:none;border-radius:5px;padding:14px 16px;font-size:.95em}
.form-msg.ok{display:block;background:var(--tint2);border:1px solid var(--accent);
  color:var(--text)}
.form-msg.err{display:block;background:var(--tint1);border:1px solid var(--red);
  color:var(--text)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;
  overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;
  color:var(--text3)}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;min-height:0}
.privacy-note{font-size:12.5px;color:var(--dim);max-width:62ch}
.privacy-note a{white-space:nowrap}

/* ── 상담 ─────────────────────────────────────────── */
.contact-grid{display:grid;gap:clamp(1.6rem,1rem + 3vw,3.5rem)}
@media (min-width:900px){.contact-grid{grid-template-columns:.85fr 1.15fr}}
.contact-side p{color:var(--text2);max-width:44ch}
.contact-side .free{font-size:var(--t-2);font-weight:600;color:var(--text);
  margin-bottom:.4em}

/* ── 뉴스레터 ────────────────────────────────────── */
.nl-box{background:var(--tint3);border:1px solid var(--line-14);border-radius:8px;
  padding:clamp(1.4rem,1rem + 2vw,2.4rem);display:grid;gap:6px}
.nl-box h2{font-size:var(--t-2)}
.nl-box .sect-lead{margin-bottom:1.2rem}
.nl-box .form{max-width:520px}
/* 데스크톱: 좌 카피 · 우 폼 2단 — 오른쪽 공백을 없애고 얇게 */
@media (min-width:900px){
  .nl-box{grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
  .nl-box .sect-lead{margin-bottom:0}
  .nl-box .form{max-width:none}
}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-row input[type=email]{flex:1;min-width:220px}
.nl-row .btn{flex:none}

/* ── 기업·기관 ───────────────────────────────────── */
/* 띠 배경·윗선을 걷어냈다 — 카드 아래 마진이 절 밖으로 붕괴하면서
   띠 끝과 푸터 선 사이에 어정쩡한 밝은 띠가 생겼었다. 카드 하나만 띄운다. */
.b2b-strip{background:transparent}
.b2b-card{background:var(--card);border:1px solid var(--line-14);border-radius:8px;
  padding:clamp(1.4rem,1rem + 2vw,2.2rem);
  margin:clamp(2.4rem,2rem + 2vw,3.6rem) 0;
  display:grid;gap:20px;align-items:center}
@media (min-width:880px){.b2b-card{grid-template-columns:1fr auto}}
.b2b-card h2{font-size:var(--t-2);margin:0 0 .5em}
.b2b-card p{margin:0;color:var(--text2);max-width:58ch}
.b2b-proc{font-family:var(--mono);font-size:12.5px;color:var(--dim);
  margin-top:12px !important}
.b2b-card .btn{justify-self:start}
@media (min-width:880px){.b2b-card .btn{justify-self:end;align-self:center}}

/* ── 푸터 ─────────────────────────────────────────── */
.footer{border-top:1px solid var(--line-14);padding:40px 0 110px;
  font-size:13.5px;color:var(--dim)}
.f-grid{display:grid;gap:28px}
.f-brand svg{height:46px;width:auto;display:block}
.f-tag{margin:14px 0 0;color:var(--text3);line-height:1.85}
.f-links{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
.f-links a{color:var(--text3);text-decoration:none;padding:6px 0;display:inline-block}
.f-links a:hover{color:var(--accent-dp);text-decoration:underline}
.f-copy{color:var(--dim)}
@media (min-width:900px){
  .f-grid{grid-template-columns:auto 1fr;align-items:center;gap:40px}
  .f-links{justify-content:flex-end}
}
@media (min-width:701px){.footer{padding-bottom:40px}}

/* ── 모바일 하단 바 + 목차 시트 ───────────────────── */
.bbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--chip);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line-14);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom))}
@media (max-width:700px){.bbar{display:flex;gap:10px}}
.bbar .btn{flex:1 1 0;min-width:0;min-height:46px;padding-inline:10px;font-size:14px}
.sheet{position:fixed;inset:0;z-index:70;display:none}
.sheet.open{display:block}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;background:var(--card);
  border-radius:14px 14px 0 0;padding:18px var(--gut)
  calc(20px + env(safe-area-inset-bottom));max-height:76vh;overflow-y:auto}
.sheet-panel h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.sheet-panel a{display:flex;justify-content:space-between;align-items:center;
  padding:13px 4px;min-height:46px;text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--line-10);font-size:15.5px}
.sheet-panel a:last-of-type{border-bottom:0}
.sheet-panel a .n{font-family:var(--mono);font-size:11px;color:var(--dim)}
.sheet-tools{display:flex;gap:10px;margin-top:14px}
.sheet-tools .tool{flex:1;min-height:44px;border:1px solid var(--line-20);
  border-radius:5px;background:none;color:var(--text2);font-size:14px}

/* 모국어 셀렉트 + Tier B 고지 = 한 필드. 고지가 숨는 언어에서는
   grid item 째 사라져 gap 도 같이 사라진다(display:none). */
/* 24시간 띠 — 하루 어디쯤에 수업이 놓이는지 한눈에 보여준다.
   v1 /classes 에서 가져온 유일한 자산이다(나머지는 랜딩이 이미 흡수했다).
   채움 위치는 카드의 data-start·data-dur 로 계산해 인라인으로 박는다. */
.rail{margin-top:.9rem}
.rail-track{position:relative;height:5px;border-radius:3px;background:var(--line-14)}
.rail-fill{position:absolute;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.rail-ticks{display:flex;justify-content:space-between;margin-top:.35rem;
  font-family:var(--mono);font-size:11px;color:var(--dim)}

.native-field{display:grid;gap:6px}
.tierb-note{margin:0;font-size:13px;color:var(--text3)}
/* 라벨은 스크린리더 전용 — 보이는 안내는 셀렉트 첫 옵션이 맡는다.
   뉴스레터가 이메일 칸을 placeholder 로만 안내하는 것과 같은 리듬을 맞춘 것이다.
   2026-08-24 실측: 라벨 21 + margin 5 + grid gap 16 = 42px 를 폼에서 걷어냈다. */
.native-label{display:block;margin:0 0 5px;font-size:13px;color:var(--text3)}
.sr-only{position:absolute!important;width:1px;height:1px;margin:0;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.form select.native{width:100%;min-height:44px;margin:0;padding:0 10px;
  border:1px solid var(--line-24);border-radius:5px;background:var(--card);
  color:var(--text);font-family:inherit;font-size:15px}

/* 스킵 링크 */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-dp);
  color:var(--on-accent);padding:10px 16px;z-index:100;border-radius:0 0 5px 0}
.skip:focus{left:0}

/* ── 방식 절 보충 ─────────────────────────────────── */
.ex-quote{font-family:var(--mono);font-size:var(--t-1);color:var(--text);
  background:var(--tint1);border:1px solid var(--line-14);border-radius:5px;
  padding:14px 18px;margin:0 0 1em}
.beliefs{margin-top:2rem;border:1px solid var(--line-14);border-radius:6px;
  background:var(--card)}
.beliefs summary{cursor:pointer;padding:16px 20px 16px 18px;font-weight:600;
  font-size:var(--t-0);list-style:none;display:flex;align-items:center;gap:10px}
.beliefs summary::-webkit-details-marker{display:none}
/* 2026-08-27: "전부 읽기" 문구를 뺐다. 펼칠 수 있다는 것은 오른쪽 갈매기와
   오감 색 점 다섯 개가 알린다 — 점은 아래 다섯 신념의 색과 같은 차례다. */
.beliefs summary::before{content:none}
/* 제목은 줄바꿈되게 두고, 점·갈매기는 오른쪽에 붙여 고정한다.
   360px 에서 th·es·vi·ru 가 넘쳤다(실측) — flex 자식은 기본이 min-width:auto 라
   글줄이 안 접힌다. */
.beliefs summary > span:not(.b-dots):not(.b-chev){flex:1 1 auto;min-width:0}
.b-dots{display:flex;gap:4px;margin-left:auto;flex:none}
.b-dots i{width:8px;height:8px;border-radius:50%}
.d-see{background:var(--see-true)}   .d-hear{background:var(--hear-true)}
.d-smell{background:var(--smell-true)} .d-taste{background:var(--taste-true)}
.d-touch{background:var(--touch-true)}
.b-chev{flex:none;display:grid;place-items:center;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--accent-dp);color:var(--accent-dp);
  transition:transform .18s}
.beliefs[open] .b-chev{transform:rotate(180deg)}
.beliefs summary:hover .b-chev{background:var(--accent-dp);color:var(--on-accent)}

/* 신념 다섯은 오감과 한 줄로 이어진다 — 번호와 제목이 그 감각의 색을 쓴다.
   글자에는 진한 변종을 쓴다(원색은 한지 위에서 AA 미달 — CLAUDE.md). */
.beliefs-list li.b-see::marker{color:var(--see)}
.beliefs-list li.b-hear::marker{color:var(--hear)}
.beliefs-list li.b-smell::marker{color:var(--smell)}
.beliefs-list li.b-taste::marker{color:var(--taste)}
.beliefs-list li.b-touch::marker{color:var(--touch)}
.beliefs-list li.b-see h3{color:var(--see)}
.beliefs-list li.b-hear h3{color:var(--hear)}
.beliefs-list li.b-smell h3{color:var(--smell)}
.beliefs-list li.b-taste h3{color:var(--taste)}
.beliefs-list li.b-touch h3{color:var(--touch)}
.beliefs summary::after{content:"";margin-left:auto;font-family:var(--mono);
  font-size:11px;color:var(--dim)}
.beliefs summary:hover{color:var(--accent-dp);background:var(--line-10)}
.beliefs[open] summary{border-bottom:1px solid var(--line-10)}
.beliefs-list{margin:0;padding:6px 20px 18px 38px;display:flex;
  flex-direction:column;gap:18px}
.beliefs-list h3{font-size:var(--t-1);margin:0 0 .35em}
.beliefs-list p{margin:0;color:var(--text2);max-width:62ch}
.no-promise-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
@media (min-width:760px){.no-promise-list{grid-template-columns:1fr 1fr}}
.no-promise-list li{display:flex;flex-direction:column;gap:2px;font-size:.95em}
.no-promise-list s{color:var(--dim);text-decoration-color:var(--red);
  font-family:var(--mono);font-size:.92em}
.no-promise-list span{color:var(--text2)}

/* ── 수업 절 보충 ─────────────────────────────────── */
.open-h{font-size:var(--t-2);margin:0 0 .6em}
.program a.p-meta{text-decoration:none;color:var(--accent-dp);font-weight:600}
.program a.p-meta:hover{color:var(--accent)}
.clock{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);
  font-size:13px;color:var(--text3);margin-top:8px}
.clock .z{display:inline-block;min-width:52px;font-size:10.5px;
  letter-spacing:.1em;color:var(--dim)}
.clock .s-local{color:var(--accent-dp)}
.clock .s-local b{font-weight:600}


/* ═══ v4.1 개편분 ═══════════════════════════════════ */
/* ── 후기 말풍선 (5-2) — 추가되면 그대로 흘러들어온다 ── */
.bubbles{display:grid;gap:16px;margin-bottom:1.4rem}
@media (min-width:700px){.bubbles{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1020px){.bubbles{grid-template-columns:repeat(3,1fr)}}
/* 2026-08-31 회의반영 B-7 — 말풍선을 세게. 텍스트 나열이면 눈이 멈추지 않는다.
   몸통(.bub-body)에 실제 꼬리를 붙이고, 말한 사람은 풍선 밖 아래에 둔다.
   그림자·그라데이션은 쓰지 않는다(팔레트 규칙) — 대비와 형태로만 세운다. */
.bub{display:flex;flex-direction:column;gap:7px}
.bub-body{position:relative;background:var(--card);
  border:1px solid var(--line-14);border-radius:16px;
  padding:14px 16px 15px;font-size:1.0em}
.bub.alt .bub-body{background:var(--tint2)}
/* 꼬리 — 몸통 배경을 물려받은 마름모를 아래로 반쯤 내민다 */
.bub-body::after{content:"";position:absolute;left:19px;bottom:-7px;
  width:13px;height:13px;background:inherit;
  border-right:1px solid var(--line-14);border-bottom:1px solid var(--line-14);
  border-bottom-right-radius:3px;transform:rotate(45deg)}
.bub.alt .bub-body::after{left:auto;right:19px}
.bub p{margin:0;color:var(--text2)}
.bub .nm{display:flex;align-items:center;gap:7px;padding-left:8px;
  font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.bub.alt .nm{justify-content:flex-end;padding:0 8px 0 0}
.bub .nm b{color:var(--text3)}
.avatar.sm{width:22px;height:22px}
/* 아직 오지 않은 후기 자리 — 비워 두지 않고 무엇이 올지 말한다 */
.bub-slot .bub-body{background:var(--bg2);border-style:dashed;
  border-color:var(--line-24);color:var(--dim)}
.bub-slot p{color:var(--dim)}
.voices-more{margin:0 0 2.4rem}

/* ── 클래스 보충 ── */
.sched-wait{border-style:dashed;background:transparent}
.sched-wait .s-meta{border-top:0;color:var(--dim)}
.p-tag.sig{color:var(--gold)}
.class-foot{margin-top:1.6rem;font-size:.95em;color:var(--text3);
  border-top:1px solid var(--line-10);padding-top:14px;
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.class-foot a{font-weight:600;white-space:nowrap}

/* ── 선생님 도입 큰 문장 (Q5) ── */
.lede-big{font-size:var(--t-2);font-weight:600;color:var(--text);
  margin:0 0 .8em;text-wrap:balance;max-width:30ch}

/* ── 레벨테스트 상자 — 뉴스레터와 같은 틀, 강조 테두리 ── */
.lt-box{border-color:var(--accent-dp);background:var(--tint2)}
.nl-row input[type=email]{min-height:44px;padding:11px 13px;
  border:1px solid var(--line-24);border-radius:4px;background:var(--card);
  color:var(--text);font-family:inherit;font-size:15px}

/* ── 문의 플로팅 (3-1 · Q6) — 하단 바 위에 뜬다 ── */
.fab-wrap{position:fixed;right:14px;bottom:16px;z-index:65}
@media (max-width:700px){.fab-wrap{bottom:calc(84px + env(safe-area-inset-bottom))}}
.fab-btn{display:flex;align-items:center;gap:8px;min-height:48px;
  padding:12px 18px 12px 15px;border-radius:999px;border:1px solid var(--line-24);
  background:var(--ink);color:var(--bg);font-size:14.5px;font-weight:600;
  font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.18);cursor:pointer}
.fab-btn:hover{background:var(--accent-dp);color:var(--on-accent)}
.fab-ic{flex:none;display:block}
.fab-pop{position:absolute;right:0;bottom:58px;width:max-content;max-width:78vw;
  background:var(--card);border:1px solid var(--line-24);border-radius:10px;
  padding:13px 16px;font-size:14px;box-shadow:0 6px 22px rgba(0,0,0,.15)}
.fab-pop p{margin:0 0 4px;color:var(--text3);font-size:12.5px}
.fab-pop a{font-weight:600}

/* ── "밥 먹었어" — 히어로 안, 페이지 최대 활자 (최상위 재배치 2026-08-23) ── */
.rice-hero{margin:1.5rem 0 1.7rem;padding:20px 24px 18px;background:var(--tint1);
  border:1px solid var(--line-14);border-radius:10px;max-width:560px}
.rice-q{font-family:var(--mono);font-weight:700;letter-spacing:-.02em;margin:0;
  font-size:clamp(2.4rem,1.2rem + 3.4vw,3.8rem);color:var(--text);line-height:1.15}
.rice-eq{font-family:var(--mono);font-size:var(--t-1);color:var(--dim);margin:.35em 0 .5em}
.rice-sub{font-size:var(--t--1);color:var(--text2);margin:0;line-height:1.6}
.rice-sub b{color:var(--text)}

/* ── 히어로 질문 2단 위계 — 설정구는 낮게, 질문은 크게 (2026-08-23) ── */
.hero h1 .q1{display:block;font-size:.5em;font-weight:500;color:var(--text2);
  letter-spacing:0;line-height:1.4;margin-bottom:.4em}
.hero h1 .q2{display:block;line-height:1.22;text-wrap:balance}

/* ═══ /classes 재설계 (2026-08-31 회의반영 B-5) ══════════
   시간표 게시판이 아니라 「내 시간에 맞는 반 찾기」로 읽히게 한다.
   내 시간이 먼저·크게, 한국 시간은 그 아래 작게. */

/* 지역 선택 — 화면 위에 붙는다. 이 페이지의 조작기는 이것 하나뿐이다. */
.tz-bar{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line-14);margin:0 0 2.2rem;padding:12px 0 13px}
.tz-bar .tz-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tz-bar label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.tz-bar select{flex:1 1 200px;min-width:0;min-height:42px;padding:9px 12px;
  border:1px solid var(--line-24);border-radius:4px;background:var(--card);
  color:var(--text);font-family:inherit;font-size:15px}
.tz-bar .tz-note{width:100%;margin:0;font-size:12.5px;color:var(--dim)}

/* 프로그램 한 덩어리 — 감각색을 하나씩 물린다(섹션당 한 색) */
.prog{margin:0 0 2.6rem;padding:0 0 2.6rem;border-bottom:1px solid var(--line-10)}
.prog:last-of-type{border-bottom:0}
.prog-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:6px}
.prog-h h3{font-size:var(--t-2);margin:0;color:var(--pc,var(--text));min-width:0}
.prog-bar{width:34px;height:5px;border-radius:3px;flex:0 0 auto;
  background:var(--pc,var(--accent))}
.prog-state{margin-left:auto;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.05em;padding:4px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--line-20);color:var(--text3)}
.prog-state.is-open{border-color:var(--pc,var(--accent));color:var(--pc,var(--accent-dp))}
.prog-sub{color:var(--text2);margin:0 0 1.1rem;max-width:46ch}

/* 열린 시간 — 카드가 아니라 줄이다 */
.slots{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.slot{background:var(--card);border:1px solid var(--line-14);border-radius:6px;
  padding:15px 17px 16px;border-left:3px solid var(--pc,var(--accent))}
.slot-mine,.slot-kst{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.slot-kst{margin-top:3px}
.slot-mine .z,.slot-kst .z{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--dim)}
.slot-mine b{font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--accent-dp);min-width:0}
.slot-kst b{font-family:var(--mono);font-size:13px;font-weight:400;
  color:var(--text3);min-width:0}
.slot .rail{margin-top:.85rem}
.slot .rail-fill{background:var(--pc,var(--accent))}
.slot-meta{font-family:var(--mono);font-size:12px;color:var(--dim);
  margin:.85rem 0 0;padding-top:.7rem;border-top:1px solid var(--line-10)}

/* 아직 열리지 않은 반 — 빈칸으로 두지 않고 수요를 받는다 */
.slot-wait{background:var(--bg2);border:1px dashed var(--line-24);
  border-radius:6px;padding:18px 19px}
.slot-wait p{margin:0 0 .95rem;color:var(--text2);max-width:44ch}
.slot-wait .btn{min-height:44px}

@media (min-width:760px){
  .slots{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* 랜딩의 클래스 절 — 시간은 /classes 로 내려갔고 여기는 분류 셋뿐이다 */
.progs{display:grid;gap:14px;margin-top:1.4rem}
@media (min-width:640px){.progs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.progs{grid-template-columns:repeat(4,1fr)}}
.prog-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:var(--card);border:1px solid var(--line-14);border-radius:6px;
  border-top:3px solid var(--pc,var(--accent));padding:17px 18px 18px;color:inherit}
.prog-card:hover{border-color:var(--pc,var(--accent))}
.prog-card h3{font-size:var(--t-1);margin:0;color:var(--pc,var(--text))}
.prog-card p{margin:0;font-size:14px;color:var(--text2)}
.prog-card .pc-state{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--text3)}
.prog-card .pc-state.is-open{color:var(--pc,var(--accent-dp))}
.prog-card .pc-go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600;
  color:var(--accent-dp)}

/* ═══ 개인정보처리방침 (2026-08-31 8언어 전면 재작성) ═══════
   법률 문서지만 읽히지 않으면 고지한 것이 아니다(GDPR 제12조 —
   간결하고 이해하기 쉬운 형태). 본문 폭을 좁히고, 표 대신 카드를 쓴다 —
   5열 표는 360px 에서 반드시 넘친다. */
.pv-wrap{max-width:720px}
.pv-sum{background:var(--tint1);border:1px solid var(--line-14);
  border-radius:8px;padding:18px 20px 18px 8px;margin:1.8rem 0 2.4rem}
.pv-sum ol{margin:0;padding-left:1.4em;display:grid;gap:.7rem}
.pv-sum li{color:var(--text2)}
.pv-sum li::marker{color:var(--accent);font-weight:600}
.pv-h2{font-size:var(--t-1);margin:2.4rem 0 .7rem;padding-top:1.4rem;
  border-top:1px solid var(--line-10)}
.pv-h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .5rem;color:var(--text2)}
.pv-wrap p{margin:0 0 .9rem;color:var(--text2);max-width:64ch}
.pv-list{margin:0 0 1.1rem;padding-left:1.25em;display:grid;gap:.5rem}
.pv-list li{color:var(--text2);max-width:62ch}
.pv-list li::marker{color:var(--dim)}
.pv-cards{display:grid;gap:12px;margin:1.1rem 0 1.3rem}
@media (min-width:640px){.pv-cards{grid-template-columns:repeat(2,1fr)}}
.pv-card{background:var(--card);border:1px solid var(--line-14);
  border-radius:6px;padding:15px 17px;min-width:0}
.pv-card h3{font-size:1rem;margin:0 0 2px}
.pv-card .pv-where{font-family:var(--mono);font-size:11.5px;color:var(--dim);
  margin:0 0 .6rem;overflow-wrap:anywhere}
.pv-card p:last-child{margin:0;font-size:14px}
.pv-wrap code{font-family:var(--mono);font-size:.9em;background:var(--bg2);
  border-radius:3px;padding:1px 5px}
.pv-date{font-family:var(--mono);font-size:12.5px;color:var(--dim);
  margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line-14)}


/* 후기 원문과 번역 (2026-08-31 실제 후기 반영)
   원문은 학습자가 한국어로 직접 쓴 것이다 — 오타까지 그대로 둔다.
   그 자체가 수업의 결과물이라, 다듬으면 증거가 사라진다.
   한국어 화면에서는 번역줄이 필요 없으므로 감춘다. */
.bub-orig{font-size:1em;color:var(--text);line-height:1.6}
.bub-tr{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-10);
  font-size:.88em;color:var(--text3);line-height:1.55}
[data-lang=ko] .bub-tr{display:none}
.avatar.sm.av-see{background:var(--see-true)}
.avatar.sm.av-hear{background:var(--hear-true)}
.avatar.sm.av-smell{background:var(--smell-true)}
.avatar.sm.av-taste{background:var(--taste-true)}
.avatar.sm.av-touch{background:var(--touch-true)}

/* ═══ /voices — 「많다」를 눈으로 보게 만드는 것이 이 페이지의 일이다 ═══
   후기 118건이 벽처럼 깔린다. 한 건씩 읽히기보다 **덩어리로 먼저 보이는 것**이
   목적이라, 다단(column)으로 촘촘히 흘린다. 스크롤이 길어지는 것은 의도다. */
.vwrap{max-width:1100px}
.v-h2{font-size:var(--t-1);margin:2.8rem 0 .5rem;padding-top:1.5rem;
  border-top:1px solid var(--line-10)}
.v-note{margin:0 0 1.3rem;font-size:13.5px;color:var(--dim);max-width:62ch}

/* 숫자 블록 — 400·142·여덟 달. 동의가 필요 없는 사실이고, 벽의 근거다 */
.vnum{background:var(--tint1);border:1px solid var(--line-14);border-radius:8px;
  padding:20px 22px;margin:0 0 1rem}
.vnum-head{margin:0;font-family:var(--mono);font-size:clamp(20px,6vw,30px);
  letter-spacing:-.01em;color:var(--text)}
.vnum-head b{color:var(--accent-dp)}
.vnum-cap{margin:.2rem 0 1.3rem;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;color:var(--dim)}
.vbars{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vbar{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 10px;font-size:13.5px;color:var(--text2)}
.vb-l{min-width:0}
.vb-n{font-family:var(--mono);font-size:14px;color:var(--accent-dp);
  justify-self:end;align-self:center;grid-row:span 2}
.vb-t{grid-column:1;height:6px;border-radius:3px;background:var(--line-14);
  overflow:hidden}
.vb-t i{display:block;height:100%;background:var(--accent);border-radius:3px}
.vbar.is-low .vb-t i{background:var(--dim)}
.vbar.is-low .vb-n{color:var(--text3)}
.vnum-note{margin:1.2rem 0 0;padding-top:.9rem;border-top:1px solid var(--line-14);
  font-size:13px;color:var(--text3);max-width:60ch}

/* 후기 벽 */
.wall{columns:1;column-gap:12px;margin:0}
@media (min-width:640px){.wall{columns:2}}
@media (min-width:1000px){.wall{columns:3}}
.wall-item{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 12px;padding:13px 15px 12px;background:var(--card);
  border:1px solid var(--line-14);border-radius:8px}
.wall-item blockquote{margin:0;font-size:14.5px;line-height:1.55;color:var(--text2)}
.wall-item figcaption{margin-top:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;color:var(--dim)}