/* ==========================================================================
   LAB404 landing v3 — Seed(당근) 구조 클로닝 · LAB404 브랜드 적용
   구조(SEED_SPEC.md 매핑): 히어로 → 스크롤 소개 → 3카드+2카드 → 도트맵 → 원칙 스택
        → 마퀴 → 클레어 체험 → 과정 → 안내 → 3컬럼 푸터 · 하단 글래스 탭바
   토큰: SEED 실측 (docs_redteam/SEED_ADOPTION.md)
        d1~d6 / standard·enter·exit 커브 / 4px 스페이싱 / 2px 라디우스 그리드
        t1~t14 사이즈-행간 페어링 / pressed scale 0.96 · 150ms
   ========================================================================== */

@font-face {
  font-family: 'Anton';
  src: url('/assets/fonts/anton/anton-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2026;
}

:root {
  /* ==================================================================
     Seed 토큰 위임 (@seed-design/css v2.5.0 base.min.css, Apache-2.0)
     다크 모드: html[data-seed-color-mode="dark-only"] — Seed 다크 시맨틱 체계.
     서피스(bg-layer 계열)만 아래 html[data-seed] 블록에서 확정 목업 블랙으로 재주입.
     ================================================================== */
  --black: var(--seed-color-bg-layer-default);       /* 페이지 바탕 (오버라이드로 #0a0a0a) */
  --black-raise: var(--seed-color-bg-layer-fill);
  --black-card: var(--seed-color-bg-layer-floating);
  --ivory: var(--seed-color-fg-neutral);             /* 주 전경 (Seed 다크 fg) */
  --orange: #FB5A1A;        /* 캔버스/그래픽 리터럴용 (브랜드 오버라이드 블록과 동일값) */
  --orange-dark: #E14606;
  --orange-tint: #FFB48A;
  --cyan: #00F9F8;                 /* 글리치 2프레임 전용 */

  /* ---- Semantic: color (전부 Seed 다크) ---- */
  --bg-default: var(--seed-color-bg-layer-default);
  --bg-layer: var(--seed-color-bg-layer-fill);
  --bg-card: var(--seed-color-bg-layer-floating);
  --bg-brand: var(--seed-color-bg-brand-solid);
  --bg-brand-pressed: var(--seed-color-bg-brand-solid-pressed);
  --bg-brand-weak: var(--seed-color-bg-brand-weak);
  --fg-default: var(--seed-color-fg-neutral);
  --fg-muted: var(--seed-color-fg-neutral-muted);
  --fg-faint: var(--seed-color-fg-neutral-subtle);
  --fg-brand: var(--seed-color-fg-brand);
  --stroke: var(--seed-color-stroke-neutral-muted);
  --stroke-strong: var(--seed-color-stroke-neutral-solid);
  --focus-ring: var(--seed-color-stroke-focus-ring);
  --shadow-card: var(--seed-shadow-s2);

  /* ---- Motion → Seed 토큰 (SNAP=d3~d5+enter / GLIDE=600ms+easing 두 레지스터) ---- */
  --d1: var(--seed-duration-d1); --d2: var(--seed-duration-d2); --d3: var(--seed-duration-d3);
  --d4: var(--seed-duration-d4); --d5: var(--seed-duration-d5); --d6: var(--seed-duration-d6);
  --snap-d: var(--seed-duration-d5);
  --snap-ease: var(--seed-timing-function-enter);
  --d-reveal: 600ms;                               /* GLIDE — [V] 랜딩 실측값, 패키지 스케일 밖 */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);   /* [V] 랜딩 리빌 실측 커브 */
  --ease-micro: var(--seed-timing-function-easing);
  --ease: var(--seed-timing-function-easing);
  --ease-enter: var(--seed-timing-function-enter);
  --ease-exit: var(--seed-timing-function-exit);
  --ease-enter-x: var(--seed-timing-function-enter-expressive);
  --press-scale: 0.96;
  --d-press: var(--seed-duration-pressed-scale);

  /* ---- Spacing s1~s16 — Seed dimension 토큰에 정렬 (4px 그리드 = x1~x16) ---- */
  --s1: var(--seed-dimension-x1, 4px); --s2: var(--seed-dimension-x2, 8px);
  --s3: var(--seed-dimension-x3, 12px); --s4: var(--seed-dimension-x4, 16px);
  --s5: var(--seed-dimension-x5, 20px); --s6: var(--seed-dimension-x6, 24px);
  --s7: var(--seed-dimension-x7, 28px); --s8: var(--seed-dimension-x8, 32px);
  --s9: var(--seed-dimension-x10, 40px); --s10: var(--seed-dimension-x12, 48px);
  --s12: var(--seed-dimension-x13, 56px); --s14: var(--seed-dimension-x14, 64px);
  --s16: var(--seed-dimension-x16, 80px);

  /* ---- Radius → Seed (r3-5=14/r7=28은 Seed 그리드 밖 — 근사 유지) ---- */
  --r2: var(--seed-radius-r2); --r3: var(--seed-radius-r3); --r3-5: 14px;
  --r4: var(--seed-radius-r4); --r5: var(--seed-radius-r5); --r6: var(--seed-radius-r6); --r7: 28px;
  --r-full: var(--seed-radius-full);
  --r-card: var(--r6);
  --r-btn: var(--r3-5);

  /* ---- Type → Seed t1~t14 (사이즈/행간 페어 전면 위임) ---- */
  --t1: var(--seed-font-size-t1);   --t1-lh: var(--seed-line-height-t1);
  --t2: var(--seed-font-size-t2);   --t2-lh: var(--seed-line-height-t2);
  --t3: var(--seed-font-size-t3);   --t3-lh: var(--seed-line-height-t3);
  --t4: var(--seed-font-size-t4);   --t4-lh: var(--seed-line-height-t4);
  --t5: var(--seed-font-size-t5);   --t5-lh: var(--seed-line-height-t5);
  --t6: var(--seed-font-size-t6);   --t6-lh: var(--seed-line-height-t6);
  --t7: var(--seed-font-size-t7);   --t7-lh: var(--seed-line-height-t7);
  --t8: var(--seed-font-size-t8);   --t8-lh: var(--seed-line-height-t8);
  --t9: var(--seed-font-size-t9);   --t9-lh: var(--seed-line-height-t9);
  --t10: var(--seed-font-size-t10); --t10-lh: var(--seed-line-height-t10);
  --t11: var(--seed-font-size-t11); --t11-lh: var(--seed-line-height-t11);
  --t12: var(--seed-font-size-t12); --t12-lh: var(--seed-line-height-t12);
  --t13: var(--seed-font-size-t13); --t13-lh: var(--seed-line-height-t13);
  --t14: var(--seed-font-size-t14); --t14-lh: var(--seed-line-height-t14);
  --t-display: 52px; --t-display-lh: 60px;   /* [V] SEED 랜딩 h1/h2 실측 — 패키지 스케일 밖 */

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --anton: 'Anton', var(--font);

  /* ---- Semantic: layout (SEED layout foundation: content 1040/1280, margins 24/12, gutters 32/16) ---- */
  --gutter: var(--seed-dimension-x6, 24px);
  --gap: 20px;               /* [V] SEED 카드 그리드 gap 실측 20 */
  --maxw: 1200px;            /* [V] 라이브 실측: 컨테이너 max-w 1200 + p24 (콘텐츠 1152) */
  --maxw-wide: 1280px;
  --maxw-narrow: 720px;
  --section-y: 140px;
  --head-gap: 56px;
  --header-h: 76px;          /* [V] SEED 내비 실측 76 */

  /* ---- 탭바 글래스 (다크 확정 룩 — 서피스와 함께 보호) ---- */
  --tb-h: 58px;
  --tb-glass-bg: rgba(22, 21, 20, 0.72);
  --tb-glass-filter: blur(28px) saturate(140%);
  --tb-glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.11) inset;
  /* 하단 바 실측 높이는 JS가 --cbar-h 로 채워요. 값이 오기 전 초기값 96px */
  --tb-clearance: calc(var(--cbar-h, 96px) + 20px + env(safe-area-inset-bottom));
}

html[data-seed][data-seed-color-mode="dark-only"] {
  /* (선택자 강도 주의: base.min.css 다크 정의가 :root[data-seed-color-mode]=0-2-0 이라
     그보다 높은 0-2-1로 재주입 — html[data-seed]만으로는 다크 값에 밀림) */
  /* ==================================================================
     [브랜드 오버라이드 ①] LAB404 확정 목업 서피스 재주입 — 다크 전용.
     Seed 다크 기본 서피스(gray 계열 #101113~#212124)와 확정 목업 블랙이 달라
     bg-layer 계열만 우리 값으로 되돌림. ★ 이 블록을 지우면 순정 Seed 다크로 복귀.
     ================================================================== */
  --seed-color-bg-layer-default: #0a0a0a;
  --seed-color-bg-layer-fill: #131211;
  --seed-color-bg-layer-basement: #0a0a0a;
  --seed-color-bg-layer-floating: #161514;

  /* ==================================================================
     [브랜드 오버라이드 ②] 오렌지 — v4와 동일 패턴, 다크 대비 방향.
     fg-brand는 다크에서 밝은 쪽(#FB5A1A)이 대비 우위. solid는 흰 글자 4.1:1
     확보를 위해 v4와 동일한 #E14606 (원 #FB5A1A는 액센트/그래픽 전용).
     ================================================================== */
  --seed-color-bg-brand-solid: #E14606;
  --seed-color-bg-brand-solid-pressed: #C93D02;
  --seed-color-bg-brand-weak: rgba(251, 90, 26, 0.14);
  --seed-color-bg-brand-weak-pressed: rgba(251, 90, 26, 0.22);
  --seed-color-fg-brand: #FB5A1A;
  --seed-color-fg-brand-contrast: #FFB48A;
  --seed-color-stroke-brand-solid: #FB5A1A;
  --seed-color-stroke-brand-weak: rgba(251, 90, 26, 0.38);
  --seed-color-stroke-focus-ring: rgba(251, 90, 26, 0.55);
}
@media (max-width: 767px) {
  :root { --section-y: 88px; --head-gap: 36px; --gutter: 30px; /* [V-mobile378] 실측 좌우 마진 30 */ --gap: 16px; --header-h: 64px; /* [V-mobile378] 내비 64 */ }
}

/* ==================== 베이스 ==================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg-default);
  color: var(--fg-default);
  font-size: var(--t6); line-height: var(--t6-lh);
  letter-spacing: -0.02em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit; cursor: pointer; border: none; background: none;
  color: inherit; letter-spacing: inherit; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; }
p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.nums { font-variant-numeric: tabular-nums; }

/* ==================== 버튼 (SEED state: pressed 0.96 / 150ms) ==================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 54px; padding: var(--s4) var(--s7);
  border-radius: var(--r-btn);
  font-size: var(--t6); line-height: 1; font-weight: 700;
  transition: background var(--d3) var(--ease),
              transform var(--d-press) var(--ease-enter),
              filter var(--d-press) var(--ease-enter);
}
.btn:active { transform: scale(var(--press-scale)); filter: brightness(0.95); }
.btn--primary { background: var(--bg-brand); color: #fff; }
.btn--primary:hover { background: var(--bg-brand-pressed); }
.btn--soft { background: rgba(255, 255, 255, 0.08); color: var(--fg-default); }
.btn--soft:hover { background: rgba(255, 255, 255, 0.13); }
.btn--sm { min-height: 42px; padding: var(--s2) var(--s5); font-size: var(--t4); border-radius: var(--r3); }

/* ==================== 리빌 ==================== */
.rv {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--d-reveal) var(--ease-reveal), transform var(--d-reveal) var(--ease-reveal);
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 70ms; } .rv-d2 { transition-delay: 140ms; }
.rv-d3 { transition-delay: 210ms; } .rv-d4 { transition-delay: 280ms; } .rv-d5 { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
}

/* ==================== 헤더 (Seed식 미니멀) ==================== */
.hd {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--d4) var(--ease), border-color var(--d4) var(--ease),
              backdrop-filter var(--d4) var(--ease);
  border-bottom: 1px solid transparent;
}
.hd.scrolled { border-bottom-color: transparent; }
.hd .wrap { display: flex; align-items: center; gap: var(--s7); width: 100%; max-width: 1552px; /* [V] SEED 내비 컨테이너 97rem */
  transition: max-width 600ms var(--ease-reveal), background var(--d4) var(--ease),
              border-radius 600ms var(--ease-reveal), padding 600ms var(--ease-reveal),
              height 600ms var(--ease-reveal); }  /* [V] 라이브 실측: 필 모프 0.6s cubic-bezier(.22,1,.36,1) */
/* [V] SEED: 스크롤 시 중앙 라운드 필로 전환 */
.hd.scrolled .wrap {
  max-width: 880px; background: rgba(14, 13, 12, 0.78);  /* D4: 밝은 이미지 위 대비 α≥0.72 */
  -webkit-backdrop-filter: blur(60px); backdrop-filter: blur(60px);
  border-radius: var(--r-full); padding: 0 var(--s6); height: 58px; margin-top: 10px;
  /* [V] 라이브 실측: 필 880×58 · bg 백색 9% · blur(60px) */
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 .5px rgba(255,255,255,.08) inset;
}
.hd-logo img { height: 16px; width: auto; display: block; }
.hd-nav { display: flex; gap: var(--s6); margin-left: auto; }
.hd-nav a {
  font-size: var(--t4); line-height: var(--t4-lh); font-weight: 600;
  color: var(--fg-muted); transition: color var(--d3) var(--ease);
  padding: var(--s2) 0;
}
.hd-nav a:hover, .hd-nav a.cur { color: var(--fg-default); }
.hd-cta {
  margin-left: var(--s2);
  min-height: 40px; padding: 0 var(--s5); border-radius: var(--r-full);
  background: var(--bg-brand); color: #fff; font-size: var(--t4); font-weight: 700;
  display: inline-flex; align-items: center;
  transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
}
.hd-cta:hover { background: var(--bg-brand-pressed); }
.hd-cta:active { transform: scale(var(--press-scale)); }
@media (max-width: 767px) { .hd-nav { display: none; } }

/* ==================== 모바일 메뉴 ====================
   ≤767px에서 .hd-nav를 감추는 대신 햄버거 + 시트로 대체.
   마크업은 v3.js가 기존 내비를 복제해 주입해요. */
.hd-burger { display: none; }
@media (max-width: 767px) {
  .hd-burger {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; margin-right: -10px;
    border-radius: var(--r-full); background: transparent; border: 0;
    color: var(--fg-default); cursor: pointer;
    transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
  }
  .hd-burger:active { transform: scale(var(--press-scale)); }
  .hd-burger-bars { display: block; width: 20px; height: 12px; position: relative; }
  .hd-burger-bars i {
    position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform var(--d3) var(--ease-enter), opacity var(--d3) var(--ease);
  }
  .hd-burger-bars i:nth-child(1) { top: 1px; }
  .hd-burger-bars i:nth-child(2) { bottom: 1px; }
  .hd-burger[aria-expanded="true"] .hd-burger-bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .hd-burger[aria-expanded="true"] .hd-burger-bars i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  /* 헤더 CTA는 시트 안으로 이동 — 상단은 로고 + 햄버거만 */
  .hd-cta { display: none; }
}
html.mnav-lock, html.mnav-lock body { overflow: hidden; }

.mnav { position: fixed; inset: 0; z-index: 200; }
.mnav[hidden] { display: none; }
.mnav-scrim {
  position: absolute; inset: 0; background: rgba(6, 6, 6, .62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 220ms var(--ease);
}
.mnav.is-open .mnav-scrim { opacity: 1; }
.mnav-panel {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column;
  max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: max(env(safe-area-inset-top), 14px) var(--s6) calc(var(--s7) + env(safe-area-inset-bottom));
  background: #0e0d0c;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted, rgba(255,255,255,.10));
  border-radius: 0 0 var(--r6, 20px) var(--r6, 20px);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  transform: translateY(-12px); opacity: 0;
  transition: transform 240ms var(--ease-reveal), opacity 200ms var(--ease);
}
.mnav.is-open .mnav-panel { transform: translateY(0); opacity: 1; }
.mnav-head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.mnav-title { font-size: var(--t3); line-height: var(--t3-lh); font-weight: 700; color: var(--fg-muted); letter-spacing: .04em; }
.mnav-x {
  width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent;
  color: var(--fg-default); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mnav-x .seed-icon { width: 22px; height: 22px; }
.mnav-list { display: flex; flex-direction: column; margin-top: var(--s5); }
.mnav-list a {
  display: flex; align-items: center; min-height: 52px;
  font-size: var(--t7, 20px); line-height: 1.3; font-weight: 700;
  color: var(--fg-default); text-decoration: none;
  border-bottom: 1px solid var(--seed-color-stroke-neutral-muted, rgba(255,255,255,.08));
  transition: color var(--d3) var(--ease), padding-left var(--d3) var(--ease-enter);
}
.mnav-list a:active { padding-left: 4px; color: var(--fg-brand, #FB5A1A); }
.mnav-list a.cur { color: var(--fg-brand, #FB5A1A); }
.mnav-foot { margin-top: var(--s7); display: flex; flex-direction: column; gap: var(--s4); }
.mnav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; border: 0; border-radius: var(--r-full);
  background: var(--bg-brand); color: #fff; font-size: var(--t5, 16px); font-weight: 700; cursor: pointer;
  transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
}
.mnav-cta:active { transform: scale(var(--press-scale)); background: var(--bg-brand-pressed); }
.mnav-tel {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; border-radius: var(--r-full);
  border: 1px solid var(--seed-color-stroke-neutral-muted, rgba(255,255,255,.16));
  color: var(--fg-default); font-size: var(--t4); font-weight: 600; text-decoration: none;
}
.mnav-meta { margin-top: var(--s2); font-size: var(--t2, 12px); line-height: 1.5; color: var(--fg-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .mnav-scrim, .mnav-panel { transition: none; }
}

/* ==================== 섹션 공통 리듬 ==================== */
.sec { padding: var(--section-y) 0; }
.sec--layer { background: var(--bg-layer); }
/* 서사 이브로우 — 하위 페이지 .page-hero-eyebrow와 동일 톤 (Seed 토큰·브랜드 컬러) */
.sec-eyebrow {
  font-size: var(--t2); line-height: var(--t2-lh); font-weight: 800;
  letter-spacing: 0.12em; color: var(--fg-brand); margin-bottom: var(--s3);
}
.ph-hcol { display: flex; flex-direction: column; }
.ph-hcol .sec-eyebrow { margin-bottom: var(--s4); }
.sec-head { text-align: left; margin-bottom: var(--head-gap); }  /* [V] SEED 랜딩 헤딩 전부 좌정렬 */
.claire-stage { text-align: center; margin-top: var(--s9); }
.sec-title {
  font-size: clamp(32px, 3.6vw, var(--t-display));
  line-height: 1.2;
  text-wrap: balance;
}
.sec-sub {
  margin: var(--s4) 0 0; max-width: 34em;
  font-size: var(--t7); line-height: var(--t7-lh); color: var(--fg-muted);
  text-wrap: balance;
}
@media (max-width: 767px) {
  .sec-title { font-size: 28px; line-height: 33.6px; }  /* [V-mobile378] h2 28/1.2 */
  .sec-sub { font-size: var(--t5); line-height: var(--t5-lh); }
}

/* ==================== ① 히어로 — 도트 매트릭스 모션그래픽 ==================== */
/* [V] SEED S1: 부모 110dvh + sticky 100dvh 핀 */
.hero { position: relative; height: 110svh; background: var(--black); }
.hero-pin {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 96px;
  overflow: hidden;
}
#heroField { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-pin .wrap { width: 100%; }
.hero-inner { position: relative; z-index: 2; width: 100%; }
/* 위계: 도트 매트릭스(시각) → 큰 두 줄(무엇인가) → 흐린 설명(그래서 뭐가 달라지나) → CTA */
.hero-h {
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.24; font-weight: 800; letter-spacing: -0.025em;
  color: var(--fg-default); max-width: 16em;
}
.hero-h-brand { font-family: Anton, Impact, "Arial Narrow", Arial, sans-serif;
  font-weight: 400; letter-spacing: 0.01em; }
.hero-sub {
  margin-top: var(--s4);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.68;
  color: var(--fg-muted); max-width: 34em;
}
.hero-sub b { color: var(--fg-default); font-weight: 700; }
@media (max-width: 767px) {
  /* "세상에 없던 프로젝트형 공학 학원" 16자가 한 줄에 들어가는 최대 크기 */
  .hero-h { font-size: 23px; line-height: 1.3; max-width: none; letter-spacing: -0.035em; }
  .hero-h-brand { font-size: 27px; letter-spacing: 0; }
  .hero-sub { font-size: 13.5px; line-height: 1.62; margin-top: 10px; }
}
.hero-ctas { margin-top: var(--s7); display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-size: 10px; letter-spacing: 0.3em; color: var(--fg-faint); font-weight: 600;
  pointer-events: none;
}
.hero-scroll i {
  width: 1.5px; height: 32px;
  background: linear-gradient(var(--orange), transparent);
  animation: hs-drop 1.6s var(--ease) infinite;
}
@keyframes hs-drop {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 767px) {
  .hero { padding-bottom: 144px; }  /* D2: 144px 레일 */
  .hero-scroll { display: none; }
  .hero-ctas .btn { flex: 1; min-width: 0; }
}

/* ==================== ② 벤토 그리드 ==================== */
/* [V] SEED S2 모자이크: 100vh 풀블리드, cols 4fr_3fr_4fr_6fr × rows 3, gap 12 */
.mosaic-sec { min-height: 100svh; display: flex; align-items: center; padding: 15px 0; background: var(--black); }
.mosaic {
  display: grid; width: calc(100% - 64px); margin: 0 auto;
  /* 화면 한 장 정도를 채우되 높이를 못 박지는 않아요.
     못 박으면 캡션이 긴 타일에서 마지막 줄이 잘립니다. */
  height: clamp(600px, calc(100svh - 136px), 900px); min-height: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
/* 마지막 줄이 하단 클레어 바에 가리지 않게 */
.mosaic-sec { padding-bottom: calc(var(--tb-clearance, 116px) * 0.55); }
/* 태블릿·모바일 배치는 파일 뒤쪽 "벤토 배치" 절에 모아 뒀어요 */
@media (min-width: 768px) and (max-width: 1099px) {
  /* 배치는 파일 뒤쪽 '벤토 배치' 블록에서 한 곳에 모아 잡습니다. */
}
/* 12카드 벤토 — 개념 8 + 숫자 4.
   SEED 파운데이션 페이지처럼 같은 크기 카드를 줄 세워요.
   스팬을 남발하지 않는 편이 훑기 좋고, 카드가 늘어나도 안 무너집니다. */
.mosaic > * { grid-column: auto; grid-row: auto; }
.mo-tile {
  position: relative; overflow: hidden; border-radius: var(--r4);
  background: var(--bg-card); border: 1px solid var(--stroke);
  padding: var(--s6); display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0;
}
.mo-tile .bt-kicker { position: absolute; top: var(--s6); left: var(--s6); }
.mo-img { padding: 0; border: none; }
.mo-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d6) var(--ease-reveal); }
.mo-img img { transition: transform 800ms var(--ease); }
.mo-img:hover img { transform: scale(1.025); }  /* GLIDE 미세 스케일 */
.mo-cap {
  position: relative; padding: calc(var(--s8) + var(--s4)) var(--s6) var(--s5);
  font-size: var(--t3); line-height: var(--t3-lh); color: rgba(244,241,236,.92);
  background: linear-gradient(transparent, rgba(10, 10, 10, 0.78) 55%);   /* B2: 판독 스크림 */
}
.mo-cap b { display: block; font-size: var(--t2); letter-spacing: .08em; color: var(--orange-tint); margin-bottom: 2px; }
.bt-card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: var(--s7) var(--s7) var(--s6);
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: border-color var(--d4) var(--ease), transform var(--d4) var(--ease);
}
.bt-card:hover { border-color: var(--stroke-strong); }
.bt-kicker {
  font-size: var(--t2); line-height: var(--t2-lh); font-weight: 700;
  letter-spacing: 0.1em; color: var(--fg-faint);
  position: absolute; top: var(--s6); left: var(--s7);
}
.bt-num {
  font-family: var(--anton); font-weight: 400;
  font-size: clamp(48px, 5.4vw, 72px); line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg-default);
}
.bt-num small {
  font-family: var(--font); font-size: var(--t6); font-weight: 700;
  letter-spacing: -0.02em; margin-left: 2px; color: var(--fg-muted);
}
.bt-num .hl { color: var(--orange); }
.bt-label { margin-top: var(--s3); font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
.bt-desc { margin-top: var(--s1); font-size: var(--t3); line-height: var(--t3-lh); color: var(--fg-muted); }

/* 이미지 카드 */
.bt-img { padding: 0; min-height: 280px; justify-content: flex-end; }
.bt-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-enter);
}
.bt-img:hover img { transform: scale(1.03); }
.bt-img .bt-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.12) 55%, rgba(10, 10, 10, 0) 100%);
}
.bt-img .bt-body { position: relative; padding: var(--s7); }
.bt-img .bt-kicker { position: static; margin-bottom: var(--s2); color: rgba(244, 241, 236, 0.72); }
.bt-img .bt-label { margin-top: 0; font-size: var(--t8); line-height: var(--t8-lh); }
.bt-img .bt-desc { color: rgba(244, 241, 236, 0.78); }

/* 랩노트 리듬 칩 */
.bt-rhythm { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.bt-rhythm span {
  font-size: var(--t2); line-height: 1; font-weight: 700;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: var(--r-full); padding: 7px 11px;
}
.bt-rhythm b { color: var(--orange-tint); font-weight: 800; margin-right: 3px; }

/* 모바일: 3그리드 재배치 */
@media (max-width: 767px) {
  .mosaic-sec { min-height: 0; padding: var(--s8) 0; }
  .mosaic { height: auto; min-height: 0; width: calc(100% - 2 * var(--gutter)); }
  .mo-tile { min-height: 168px; padding: var(--s4); }
  .mo-tile .bt-kicker { top: var(--s4); left: var(--s4); }
  .bt-card { min-height: 148px; padding: var(--s4); border-radius: var(--r5); }
  .bt-kicker { position: static; margin-bottom: auto; letter-spacing: 0.06em; font-size: 10px; }
  .bt-num { font-size: clamp(26px, 8.6vw, 34px); }
  .bt-num--long { font-size: clamp(17px, 5.4vw, 22px); letter-spacing: 0; }
  .bt-num small { font-size: var(--t2); margin-left: 1px; display: block; margin-top: 3px; }
  .bt-label { margin-top: var(--s2); font-size: var(--t4); line-height: var(--t4-lh); }
  .bt-img { min-height: 230px; padding: 0; }
  .bt-img .bt-body { padding: var(--s5); }
  .bt-img .bt-desc { display: block; }
  .bt-img .bt-label { font-size: var(--t6); line-height: var(--t6-lh); }
}

/* ==================== ③ 다이내믹 스크롤링 소개 ==================== */
/* [V] SEED S3: 총 260vh, 핀 160vh */
.philo { position: relative; height: 260vh; background: var(--black); }
.philo-sticky {
  position: sticky; top: 0; height: 100svh;
  padding-top: var(--header-h);  /* QA F4: 비트가 고정 내비 아래로 파고들지 않게 */
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  /* [V] SEED: 콘텐츠 상단 정렬(pt-180 등가) — 커튼 유입 홀드 동안 텍스트가 늦게 덮이도록 */
  overflow: hidden;
}
/* [V] SEED S3 실측 레이아웃: 컨테이너 1200px, 좌 헤딩(52/56 fw700) + 우 문단(22/500, 70%),
   justify-between, 콘텐츠 상단 고정(pt 180px 등가) — 스왑 없는 단일 텍스트 */
.ph-row {
  width: min(calc(100% - 2 * var(--gutter)), var(--maxw));
  margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s9);
  padding-top: clamp(96px, 19.7svh, 180px);  /* [V] pt-180 @911h = 19.7% */
  text-align: left;
}
.ph-hcol { max-width: 46%; }
.ph-h {
  font-size: clamp(var(--t11), 3.6vw, var(--t-display));  /* [V] 52px */
  line-height: 1.08;                                      /* [V] 56.16/52 */
  font-weight: 700; letter-spacing: -0.025em;             /* [V] 라이브 실측 -1.3px */
  color: var(--fg-default);
}
.ph-p {
  font-size: clamp(var(--t7), 1.55vw, 22px);              /* [V] 22px */
  line-height: 1.625; font-weight: 500;                   /* [V] 라이브 실측 lh 35.75 */
  color: rgba(244, 241, 236, 0.7);                        /* [V] 70% */
  max-width: 600px;                                       /* [V] 라이브 실측 max-w 600 (렌더 457) */
}
.ph-p em { font-style: normal; color: inherit; font-weight: 700; } /* [V] SEED 캡션은 단일색(스팬 색상 1종 실측) — 주황 강조 제거, 웨이트로만 구분 */
/* 배경 스크롤 인터랙션 — 도트 브랜치 캔버스 (SEED 전면 Lottie 스크럽 슬롯 등가) */
.ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.ph-row { position: relative; z-index: 1; }
/* [V] 단어별 마스크 리빌: 래퍼 overflow-hidden + 내부 translateY(0.75em)/opacity */
.iw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.iw-i {
  display: inline-block; will-change: transform, opacity;
  transform: translateY(110%); opacity: 0;   /* [V] 라이브 실측 39.325px = lh×1.1 */
  transition: transform 500ms var(--ease-enter), opacity 500ms var(--ease-enter);
}
.iw.on .iw-i { transform: none; opacity: 1; }
/* 엔진 스크럽 모드: 보간을 JS가 담당 — CSS 트랜지션 제거 (즉응 + 역방향 리트랙트) */
.philo.js-scrub .iw-i { transition: none; }
.philo.static .ph-bg { display: none; }
/* 모바일/reduced: 핀 해제, 정적 스택 (리빌 없음 — SEED 모바일 등가) */
.philo.static { height: auto; padding: var(--section-y) 0; }
.philo.static .philo-sticky { position: static; height: auto; display: block; }
.philo.static .ph-row { flex-direction: column; gap: var(--s5); padding-top: 0; }
.philo.static .ph-hcol { max-width: none; }
.philo.static .iw-i { transform: none; opacity: 1; transition: none; }

/* ==================== ④ 384 도트맵 (v1 이식 · Seed 재질) ==================== */
.pmap {
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: var(--r7);
  padding: var(--s8);
}
.pmap-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s5); flex-wrap: wrap;
}
.pmap-num {
  font-family: var(--anton); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px); line-height: 1; color: var(--fg-default);
}
.pmap-num small { font-family: var(--font); font-size: var(--t6); font-weight: 700; color: var(--fg-muted); margin-left: 2px; }
.pmap-cap { margin-top: var(--s2); font-size: var(--t3); line-height: var(--t3-lh); color: var(--fg-muted); }
/* pmap-toggle: seed-segmented-control 레시피로 대체 */
.ptree-wrap { position: relative; overflow: visible; }
#ptreeCanvas { display: block; max-width: 100%; }  /* D6 */
#ptreeCanvas { width: 100%; display: block; touch-action: pan-y; }
.pmap-tip {
  position: absolute; z-index: 3; transform: translate(-50%, -100%);
  background: var(--ivory); color: #111;
  font-size: var(--t2); line-height: 1.35; font-weight: 700;
  border-radius: var(--r2); padding: 7px 11px;
  pointer-events: none; opacity: 0; white-space: nowrap;
  transition: opacity var(--d2) var(--ease);
}
.pmap-tip.on { opacity: 1; }
#ptreeLabels { position: absolute; inset: 0; pointer-events: none; }
.ptree-label {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: auto;
  font-size: var(--t2); line-height: 1; font-weight: 700;
  color: var(--fg-muted);
  background: rgba(20, 19, 18, 0.9);
  border: 1px solid var(--stroke);
  border-radius: var(--r-full); padding: 7px 11px;
  transition: opacity var(--d4) var(--ease), color var(--d3) var(--ease), border-color var(--d3) var(--ease);
  white-space: nowrap;
}
.ptree-label.hidden { opacity: 0; pointer-events: none; }
.ptree-label.sel { color: var(--ivory); border-color: var(--orange); }
.ptree-info {
  position: absolute; z-index: 4; right: var(--s3); top: var(--s3);
  width: min(320px, calc(100% - 24px));
  background: rgba(16, 15, 14, 0.96);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r4); padding: var(--s5) var(--s5) var(--s4);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.8);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity var(--d5) var(--ease-enter), transform var(--d5) var(--ease-enter);
}
.ptree-info.on { opacity: 1; pointer-events: auto; transform: none; }
.ptree-info .pi-name { font-size: var(--t6); line-height: var(--t6-lh); font-weight: 800; padding-right: 44px; }
.ptree-info .pi-major { font-size: var(--t2); line-height: var(--t2-lh); color: var(--orange); font-weight: 700; margin-top: 3px; }
.ptree-info .pi-desc { font-size: var(--t3); line-height: var(--t3-lh); color: var(--fg-muted); margin-top: var(--s2); }
.ptree-info ul { margin: var(--s2) 0 0; padding: 0; }
.ptree-info li { list-style: none; font-size: var(--t3); line-height: var(--t3-lh); padding: 3px 0 3px 14px; position: relative; }
.ptree-info li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.ptree-info .pi-close {
  position: absolute; top: var(--s2); right: var(--s3);
  font-size: var(--t2); color: var(--fg-muted); padding: var(--s1) var(--s2);
}
.ptree-info .pi-close:hover { color: var(--fg-default); }
.pmap-legend {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin-top: var(--s5);
  font-size: var(--t2); line-height: var(--t2-lh); color: var(--fg-muted);
}
.pmap-legend span { display: inline-flex; align-items: center; gap: 7px; }
.pmap-legend i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
@media (max-width: 767px) {
  .pmap { padding: var(--s5); border-radius: var(--r6); }
  .ptree-info { position: static; width: 100%; margin-top: var(--s3); transform: none; display: none; }
  .ptree-info.on { display: block; }
}

/* ==================== 원칙 — 스티키 좌측 레일 + 아이템 (SEED S4 실측) ==================== */
/* [V] lg에서 -140vh 오버랩: 인트로 핀 위로 슬라이드 인 */
.prin-sec { position: relative; z-index: 2; background: var(--black); }
/* 커튼 오버랩(-마진)은 v3.js layoutCurtain()이 런타임 픽셀 실측으로 주입 —
   단어 완료 스크롤 + 0.18vh 여유에서 파생 (C1 재설계, OS 배율 무관) */
.prin-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--s10); align-items: start; }
.prin-rail { position: sticky; top: 0; padding-top: calc(var(--header-h) + 76px); }
.prin-items { max-width: 640px; justify-self: end; width: 100%; }
.prin-item { margin-bottom: 130px; }   /* [V] 라이브 실측 피치 685px (아트 360 + 텍스트 + 마진) */
.prin-item:last-child { margin-bottom: 0; }
.prin-art {
  position: relative;                   /* .mini(absolute inset:0) 기준 박스 */
  aspect-ratio: 16 / 9;                 /* [V] 640×360 */
  border-radius: var(--r4);             /* [V] r16 */
  overflow: hidden; background: var(--bg-card); border: 1px solid var(--stroke);
}
.prin-art img { width: 100%; height: 100%; object-fit: cover; }
.prin-t {
  margin-top: var(--s6);
  font-size: 32px; line-height: 42px;   /* [V] h3 32/42 */
  font-weight: 500; letter-spacing: -0.02em;  /* [V] 라이브 실측 fw500 */
}
.prin-d { margin-top: var(--s3); font-size: 20px; line-height: 27px; color: var(--fg-muted); max-width: 30em; }  /* [V] 라이브 실측 p 20/27/70% */
@media (max-width: 767px) {
  .prin-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .prin-rail { position: static; padding-top: 0; }
  .prin-items { justify-self: stretch; max-width: none; }
  .prin-item { margin-bottom: var(--s14); }
  .prin-t { font-size: var(--t9); line-height: var(--t9-lh); }
}

/* ==================== ⑥ 프로젝트 마퀴 ==================== */
.mq-sec { overflow: hidden; padding: var(--section-y) 0; }
.mq-sec .sec-head { text-align: center; }
.mq-sec .sec-head .sec-title { margin-left: auto; margin-right: auto; }  /* D2: 명시적 중앙 */
.curtain.mq-sec { padding: 100px 0; }  /* D1: projects 최소 100, 상하 대칭 */
.mq-rows { display: grid; gap: var(--gap); margin-top: var(--head-gap); }  /* [V] 행 gap 20 */
.mq-row {
  overflow: hidden; display: flex;   /* [V] SEED 마퀴는 페이드 없이 하드 클립 */
}
.mq-track {
  display: flex; gap: var(--gap); width: max-content;   /* [V] 타일 gap 20 */
  padding-right: var(--gap);
  animation: mq-l 56s linear infinite;
}
.mq-row--rev .mq-track { animation-name: mq-r; }
.mq-row:hover .mq-track { animation-play-state: paused; }
/* 드래그/스와이프: 1:1 팔로우 + 관성 (JS) — 세로 스크롤은 통과 */
.mq-row { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mq-row.dragging { cursor: grabbing; }
.mq-row.dragging .mq-chip { pointer-events: none; }
/* .mq-chip 은 이제 실제 <button> 이라 UA 기본 스타일을 지워요 (P0-6) */
.mq-chip { -webkit-appearance: none; appearance: none; border: 0; background: none;
           font: inherit; color: inherit; text-align: left; }
@keyframes mq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* [V] SEED S5 타일 실측 430×242, r16 */
.mq-chip {
  flex-shrink: 0; box-sizing: border-box;
  width: 430px; height: 242px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--stroke);
  border-radius: var(--r4);
  padding: var(--s6);
  font-size: var(--t8); line-height: var(--t8-lh); font-weight: 800; letter-spacing: -0.03em;
  white-space: normal; word-break: keep-all;
}
.mq-chip i { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mq-name { display: block; }
.mq-chip small { display: flex; align-items: center; gap: 7px; font-size: var(--t3); line-height: var(--t3-lh); font-weight: 600; color: var(--fg-faint); }
@media (prefers-reduced-motion: reduce) {
  .mq-row { overflow-x: auto; }
  .mq-track { animation: none !important; }
}
@media (max-width: 767px) {
  .mq-track { animation-duration: 34s; gap: var(--s3); padding-right: var(--s3); }
  /* (폭·높이는 아래 [V-mobile378] 블록에서 250×166 으로 확정 — 여기서 중복 선언하지 않아요) */
  .mq-chip { padding: var(--s4); font-size: var(--t4); line-height: var(--t4-lh); }
  .mq-row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  }
}

/* ==================== ⑦ 클레어 체험 ==================== */
.claire-sec { text-align: center; }
.claire-orb-hero {
  width: 68px; height: 68px; border-radius: 50%;
  margin: 0 auto var(--s6);
  background: radial-gradient(circle at 35% 30%, #ff9a66, var(--orange) 62%);
  position: relative;
  animation: orb-float 4.2s var(--ease) infinite;
}
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.claire-qs {
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
  margin-top: var(--s7); max-width: 560px; margin-left: auto; margin-right: auto;
}
.claire-q {
  background: var(--bg-card); border: 1px solid var(--stroke);
  border-radius: var(--r-full); padding: var(--s3) var(--s5);
  font-size: var(--t4); line-height: 1; font-weight: 600; color: var(--fg-default);
  transition: border-color var(--d3) var(--ease), background var(--d3) var(--ease),
              transform var(--d-press) var(--ease-enter);
}
.claire-q:hover { border-color: rgba(251, 90, 26, 0.5); background: var(--bg-brand-weak); }
.claire-q:active { transform: scale(var(--press-scale)); }

/* ==================== ⑧ 과정 안내 ==================== */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap) var(--gap); margin-top: var(--head-gap); } /* 트랙 4카드 = 1행 (구멍 없음) */
/* [V] SEED 블로그 카드 해부(실측 1568w): 플랫(배경·보더·패딩 없음) · 이미지 16:9(371×208)
   · 이미지-텍스트 갭 16 · 타이틀 20/27 fw700 화이트 · 메타 뮤트 아래줄 · 호버 미묘(이미지만) */
.course-card {
  position: relative; display: block;
  background: none; border: none; padding: 0;
  transition: transform var(--d-press) var(--ease-enter);
}
.course-card:active { transform: scale(var(--press-scale)); }
.cc-thumb {
  display: block; aspect-ratio: 371 / 208; border-radius: var(--r3); overflow: hidden;
  background: var(--bg-layer);
}
.cc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--d6) var(--ease), filter var(--d6) var(--ease);
}
.course-card:hover .cc-thumb img { transform: scale(1.03); filter: brightness(1.07); }
.cc-name {
  margin-top: var(--s4);
  font-size: 20px; line-height: 27px; font-weight: 700; color: var(--fg-default);
}
.cc-meta { margin-top: var(--s1); font-size: var(--t3); line-height: var(--t3-lh); font-weight: 600; color: var(--fg-muted); }
.cc-meta .en { font-family: var(--anton); font-weight: 400; letter-spacing: 0.06em; color: var(--fg-faint); }
.cc-thumb--cta { position: relative; background: var(--bg-brand-weak); border: 1px solid var(--stroke); }
.cc-thumb--cta .mini { position: absolute; inset: 0; }
@media (max-width: 767px) {
}

/* ==================== ⑨ 학원 안내 ==================== */
#visit { padding-bottom: var(--s16); }
.vc-t { font-size: var(--t3); line-height: var(--t3-lh); font-weight: 700; color: var(--fg-faint); letter-spacing: 0.08em; }
.vc-v { margin-top: var(--s3); font-size: var(--t9); line-height: var(--t9-lh); font-weight: 800; }
.vc-v .nums { font-family: var(--anton); font-weight: 400; letter-spacing: 0.02em; }
.vc-d { margin-top: var(--s2); font-size: var(--t4); line-height: var(--t4-lh); color: var(--fg-muted); }
.vc-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t3); line-height: 1; font-weight: 700; color: var(--orange);
  padding: var(--s2) 0;
}
.vc-link::after { content: '↗'; font-size: var(--t2); }
button.vc-link { text-align: left; }
button.vc-link::after { content: '⧉'; }
.visit-cta { margin-top: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 767px) {
    /* (모바일 과정 배치는 아래 '가로 스냅 스크롤' 블록이 최종 — 여기서 중복 선언하지 않아요) */
}

/* ==================== 신설: 증거 섹션 (회차 카드 견본) ==================== */
.ev-card {
  max-width: 640px; margin: 0 auto;
  background: var(--black-card); border: 1px solid var(--stroke);
  border-radius: var(--r5); padding: var(--s8);
}
.ev-badge {
  display: inline-block; font-size: var(--t2); line-height: var(--t2-lh); font-weight: 700;
  color: var(--orange-tint); background: var(--bg-brand-weak);
  border-radius: var(--r-full); padding: 5px 12px; margin-bottom: var(--s6);
}
.ev-rows { margin: 0; display: flex; flex-direction: column; gap: var(--s6); }
.ev-rows dt {
  font-size: var(--t2); line-height: var(--t2-lh); font-weight: 800;
  letter-spacing: 0.08em; color: var(--fg-faint); margin-bottom: var(--s1);
}
.ev-rows dd { margin: 0; font-size: var(--t6); line-height: var(--t6-lh); color: var(--fg-default); }
.ev-rows div:nth-child(2) dd { color: var(--orange-tint); font-weight: 700; }

/* ==================== 모바일 오버홀 (390 기준 — 트래픽 80%) ==================== */
@media (max-width: 767px) {
  /* 히어로: 핀 해제(100svh), 도트 헤드라인 여백 확보 */
  .hero { height: 100svh; }
  /* (하단 여백은 아래 모바일 프레임 블록에서 128px 로 확정 — 중복 선언하지 않아요) */

  /* 모자이크: 4타일 리듬 (a|d 나란히 · b 풀 · f 풀) */
  /* 모바일 벤토: 2칸, 큰 카드는 가로 전체 */
  .bn-cap { padding: var(--s4); }
  .bn--num { padding: var(--s4); }
  .mo-a, .mo-d { min-height: 186px; }
  .mo-cap { padding: var(--s4); font-size: var(--t2); line-height: var(--t2-lh); }

  /* 과정: 가로 스냅 스크롤 (세로 무한 스택 제거) */
  .course-grid {
    display: flex; gap: 12px;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .course-grid::-webkit-scrollbar { display: none; }
  .course-card { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }

  /* 푸터: 커튼 리빌 해제 → 일반 플로우 리빌 */
  .ft { position: static; z-index: auto; padding-top: var(--s10); gap: var(--s9); }
  .ft-spacer { display: none; }
  .ft-top { flex-direction: column; gap: var(--s8); }
  .ft-brand { font-size: 20px; line-height: 1.3; }  /* [V-비례] 28 → 모바일 20 */
  .ft-cols { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s8); }
  .ft-mark { font-size: clamp(48px, 15.5vw, 84px); }

  /* [V-mobile378] 마퀴 타일 실측 250×166 */
  .mq-chip { width: 250px; height: 166px; }

  /* 탭 타깃 ≥44px */
  .pmap-toggle .seed-segmented-control__item { min-height: 44px; }
  .claire-q { min-height: 44px; }
  .vc-link { padding: 15px 0; }
  .ft-col a { padding: 12px 0; }
  .hd-cta { min-height: 44px; }
  .hd-logo { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 8px; margin-left: -8px; }
  .ptree-label { min-height: 44px; min-width: 64px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ==================== QA: 태블릿 티어 768–1023 (QA_RESPONSIVE.md §2) ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
  /* F1: 모자이크 — 데스크톱 4fr_3fr_4fr_6fr 대신 2컬럼 리듬 */
  .mosaic-sec { min-height: 0; padding: var(--s10) 0; display: block; }
  .mosaic { height: auto; min-height: 0; width: calc(100% - 2 * var(--gutter)); }
  .mo-tile { min-height: 220px; }
  .mo-b { min-height: 260px; }
  .mo-f { min-height: 300px; }
  /* F2: 과정 — 2컬럼, 성인 카드 풀스팬 */
  .course-grid { grid-template-columns: repeat(2, 1fr); }  /* 4카드 = 2×2 균등 */
  /* F3: 원칙 — 레일 스택 */
  .prin-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .prin-rail { position: static; padding-top: 0; }
  .prin-items { justify-self: stretch; max-width: 640px; margin: 0 auto; }
  .prin-item { margin-bottom: var(--s16); }
}

/* ==================== 커스텀 커서 — 원형 difference 반전 ==================== */
/* body 직속 fixed 원. mix-blend-difference가 살려면 조상 스태킹 컨텍스트에 갇히면 안 됨
   → <body> 마지막 자식 + 최상위 z-index. 배경이 무엇이든 자동 반전(흰 원 difference). */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.cur-on, body.cur-on a, body.cur-on button, body.cur-on [role="button"],
  body.cur-on .mq-chip, body.cur-on canvas { cursor: none; }
  body.cur-on input, body.cur-on textarea, body.cur-on select { cursor: auto; }
  #cur {
    position: fixed; left: 0; top: 0; z-index: 12000;
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; mix-blend-mode: difference;
    pointer-events: none;
    transform: translate(-100px, -100px);
    transition: width 180ms var(--ease-enter), height 180ms var(--ease-enter);  /* SNAP: 상태 변화 */
    will-change: transform;
  }
  #cur.cur--link { width: 30px; height: 30px; }
  #cur.cur--press { width: 10px; height: 10px; }
  #cur.cur--hide { opacity: 0; }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) { #cur { display: none; } }

/* ==================== 마퀴 미니 설명 오버레이 (수학→공학→실무) ==================== */
.mqo { position: fixed; inset: 0; z-index: 11000; }
.mqo-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 240ms var(--ease); }
.mqo-card {
  position: fixed; background: var(--black-card); border: 1px solid var(--stroke-strong);
  border-radius: var(--r5); padding: var(--s6);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(10px) scale(0.985);
  transition: opacity 200ms var(--ease-enter), transform 200ms var(--ease-enter);  /* SNAP 등장 */
}
.mqo.on .mqo-back { background: rgba(0, 0, 0, 0.34); }
.mqo.on .mqo-card { opacity: 1; transform: none; }
.mqo-x { position: absolute; top: var(--s3); right: var(--s3); width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; color: var(--fg-muted); }
.mqo-x svg { width: 16px; height: 16px; }
.mqo-x:hover { color: var(--fg-default); background: rgba(255, 255, 255, 0.07); }
.mqo-name { font-size: var(--t8); line-height: var(--t8-lh); font-weight: 800; padding-right: var(--s9); }
.mqo-level { margin-top: 2px; font-size: var(--t2); line-height: var(--t2-lh); color: var(--fg-faint); font-weight: 600; }
.mqo-steps { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.mqo-steps li { display: flex; gap: var(--s3); align-items: flex-start; position: relative; padding-left: 2px; }
.mqo-steps b {
  flex: 0 0 44px; font-size: var(--t1); line-height: 20px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--orange); border: 1px solid rgba(251, 90, 26, 0.45); border-radius: var(--r-full);
  text-align: center; margin-top: 1px;
}
.mqo-steps span { font-size: var(--t4); line-height: var(--t4-lh); color: var(--fg-muted); }
.mqo-steps li + li::before {
  content: ''; position: absolute; left: 22px; top: -10px; width: 1px; height: 8px;
  background: rgba(251, 90, 26, 0.4);
}
/* 모바일: 바텀시트 */
.mqo--sheet .mqo-card {
  left: 0; right: 0; bottom: 0; top: auto; width: auto;
  border-radius: var(--r6) var(--r6) 0 0; border-bottom: none;
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--s6));
  transform: translateY(100%);
  transition: opacity 250ms var(--ease-enter), transform 250ms var(--ease-enter);
}
.mqo--sheet.on .mqo-card { transform: none; }

/* ==================== 성인 트랙 밴드 (과정 그리드 하단 전용 진입점) ==================== */
.adult-band {
  margin-top: var(--gap); display: grid; grid-template-columns: 1fr 300px; align-items: center;
  background: var(--black-card); border: 1px solid var(--stroke); border-radius: var(--r5);
  overflow: hidden; transition: border-color var(--d4) var(--ease);
}
.adult-band:hover { border-color: var(--stroke-strong); }  /* D7: 호버 규칙 통일 */
.adult-band .ab-im img { transition: transform 800ms var(--ease); }
.adult-band:hover .ab-im img { transform: scale(1.03); }
.ab-copy { padding: var(--s8); }
.ab-k { font-size: var(--t2); line-height: var(--t2-lh); font-weight: 800; letter-spacing: 0.1em; color: var(--orange); }
.ab-t { margin-top: var(--s3); font-size: var(--t10); line-height: var(--t10-lh); font-weight: 800; }
.ab-d { margin-top: var(--s3); font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted); max-width: 40em; }
.ab-go { display: inline-block; margin-top: var(--s5); font-size: var(--t4); line-height: var(--t4-lh); font-weight: 800; color: var(--orange); }
.ab-im { align-self: stretch; min-height: 190px; }
.ab-im img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease); }
.adult-band:hover .ab-im img { transform: scale(1.025); }
@media (max-width: 767px) {
  .adult-band { grid-template-columns: 1fr; }
  .ab-im { order: -1; min-height: 150px; max-height: 190px; }
  .ab-copy { padding: var(--s6); }
}

/* ==================================================================
   Seed 레시피 브리지 — v4 검증본 이식 (레이아웃 컨텍스트 최소 보정, 스킨은 레시피)
   ================================================================== */
.hero-ctas .seed-action-button { letter-spacing: -0.01em; }
.hd-cta.seed-action-button { height: 40px; }
.claire-qs { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.vc-link::after { content: none; }  /* 화살표는 seed-list-item__suffix가 담당 (중복 제거) */
/* tb-orb: FAB 레시피의 그림자/프레스만 취하고 오브 코어 유지 */
.tb-orb.seed-floating-action-button { width: 56px; height: 56px; padding: 0; background: transparent; }

/* ==================== State 확장 — Seed 상태 문법 (hover/pressed/focus) ==================== */
.course-card, .mo-tile, .tb-chip, .tb-item, .mq-chip, .hd-nav a, .vc-link, .pi-close, .art-filter button {
  transition-property: transform, background-color, border-color, color, box-shadow;
  transition-duration: var(--seed-duration-color-transition, 150ms);
  transition-timing-function: var(--seed-timing-function-easing, cubic-bezier(0.35, 0, 0.35, 1));
}
.course-card:active, .mo-tile:active, .tb-chip:active, .mq-chip:active, .tb-item:active {
  transform: scale(var(--seed-scale-s98, 0.98));
  transition-duration: var(--seed-duration-pressed-scale, 150ms);
}
.hd-nav a:hover, .vc-link:hover .seed-list-item__title { color: var(--seed-color-fg-neutral, inherit); }
.tb-chip:hover { background: var(--seed-color-bg-neutral-weak-pressed, rgba(255,255,255,0.08)); }
.tb-chip--primary:hover { background: var(--seed-color-bg-brand-solid-pressed); }
:is(.course-card, .mo-tile, .tb-chip, .tb-item, .mq-chip, .hd-nav a, .vc-link, .pi-close,
    .seed-segmented-control__item, .art-filter button):focus-visible {
  outline: 3px solid var(--seed-color-stroke-focus-ring);
  outline-offset: 2px;
}
/* 내비 링크 터치 타깃 보강 (44px 히트영역) */
.hd-nav a { padding: 12px 6px; margin: -12px -2px; border-radius: 8px; }

/* ==================== Iconography 베이스 ==================== */
.seed-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; flex: none; }
.seed-icon use { color: inherit; }
.vc-row { display: flex; align-items: baseline; gap: 10px; }
.vc-ic { font-size: 0.82em; opacity: 0.85; align-self: center; }
.seed-list-item__suffix .seed-icon { font-size: 14px; opacity: 0.7; }
.tb-chat-btn .seed-icon, .tb-chat-send .seed-icon { font-size: 20px; }

/* ==================== 컴포넌트 확장 배치 ==================== */
.pmap-toggle.seed-segmented-control__root { width: max-content; }
.pmap-toggle .seed-segmented-control__item { min-width: 72px; min-height: 34px; padding-inline: var(--seed-dimension-x4); }
.tb-sheet-handle { display: none; }
@media (max-width: 767px) {
  .tb-sheet-handle { display: flex; position: fixed; left: 0; right: 0; z-index: 61;
    bottom: calc(var(--tb-clearance) + var(--tb-overlay-h, 46vh)); justify-content: center; pointer-events: none; }
}
.seed-snackbar-region { position: fixed; left: 0; right: 0; bottom: calc(var(--tb-clearance, 90px) + 10px);
  display: flex; justify-content: center; z-index: 200; pointer-events: none; }
.seed-snackbar-region .seed-snackbar__root { pointer-events: auto; }
.tb-hint.seed-help-bubble__body { position: absolute; }
/* 폼 에러 (입력 근처 + aria-live) */
.tb-err { font-size: var(--t3); line-height: var(--t3-lh); color: var(--seed-color-fg-critical, #ff5c5c); min-height: 0; }
.tb-err:empty { display: none; }
.seed-text-input__root { width: 100%; }

/* text-input 레시피 내부에서는 자체 보더 제거 (이중 링 방지) */
.seed-text-input__root { display: flex; align-items: center; border-radius: 10px; background: var(--bg-card); }
.seed-text-input__root .tb-input, .seed-text-input__root .tb-input:focus { border: none; outline: none; background: transparent; }

/* ==========================================================================
   공통 페이지 셸 (.page-*) — 서브페이지 공용 기반
   사용법 문서: v3/PAGE_SHELL.md
   원칙: Seed 레시피(action-button / callout / accordion / list-item)를 먼저 쓰고,
        레시피가 없는 레이아웃만 아래 클래스로 감싼다. 색은 전부 --seed-color-* 경유.
   ========================================================================== */

/* 서브페이지 본문 래퍼: 고정 헤더 아래 여백 확보 */
.page-main { padding-top: calc(var(--header-h) + 72px); }
@media (max-width: 767px) { .page-main { padding-top: calc(var(--header-h) + 40px); } }

/* 컨테이너 — 홈 .wrap과 동일 기하 (1200 + px24) */
.page-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.page-wrap--narrow { max-width: var(--maxw-narrow); }

/* 섹션 리듬 — 홈 --section-y 계열의 서브페이지 스케일 */
.page-sec { padding: var(--s16) 0; }
.page-sec--tight { padding: var(--s14) 0; }
.page-sec--layer { background: var(--bg-layer); }
.page-sec > .page-wrap > .page-sec-head { margin-bottom: var(--head-gap); }
.page-sec-head { text-align: left; margin-bottom: var(--head-gap); }
.page-sec-title {
  font-size: clamp(26px, 2.6vw, var(--t11)); line-height: 1.25;
  font-weight: 800; letter-spacing: -0.03em; text-wrap: balance;
}
.page-sec-sub {
  margin: var(--s4) 0 0; max-width: 38em;
  font-size: var(--t6); line-height: var(--t6-lh); color: var(--fg-muted);
}
.page-body { font-size: var(--t6); line-height: 1.75; color: var(--fg-muted); max-width: 40em; }
.page-body + .page-body { margin-top: var(--s5); }
.page-body strong { color: var(--fg-default); font-weight: 700; }
@media (max-width: 767px) {
  .page-sec { padding: var(--s14) 0; }
  .page-sec-title { font-size: 24px; line-height: 1.3; }
  .page-body { font-size: var(--t5); line-height: 1.7; }
}

/* 페이지 히어로: 이브로우 + H1 + 리드 */
.page-hero { padding-bottom: var(--s14); }
.page-hero-eyebrow {
  font-size: var(--t2); line-height: var(--t2-lh); font-weight: 800;
  letter-spacing: 0.12em; color: var(--fg-brand);
}
.page-hero-title {
  margin-top: var(--s4);
  font-size: clamp(32px, 4.6vw, var(--t-display)); line-height: 1.1;
  font-weight: 800; letter-spacing: -0.035em; text-wrap: balance;
}
.page-hero-lead {
  margin-top: var(--s5); max-width: 36em;
  font-size: var(--t7); line-height: 1.65; color: var(--fg-muted);
}
@media (max-width: 767px) {
  .page-hero { padding-bottom: var(--s10); }
  .page-hero-title { font-size: 30px; }
  .page-hero-lead { font-size: var(--t6); line-height: var(--t6-lh); }
}

/* 번호 목록 (등록 흐름 등) */
.page-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: pstep; }
.page-steps > li {
  counter-increment: pstep;
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s5); align-items: start;
  background: var(--bg-card); border: 1px solid var(--stroke);
  border-radius: var(--r5); padding: var(--s7);
}
.page-steps > li::before {
  content: counter(pstep);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--bg-brand-weak); color: var(--fg-brand);
  font-family: var(--anton); font-size: 19px; line-height: 1;
}
.page-steps b { display: block; font-size: var(--t7); line-height: var(--t7-lh); font-weight: 700; color: var(--fg-default); }
.page-steps p { margin-top: var(--s2); font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted); }
@media (max-width: 767px) {
  .page-steps > li { grid-template-columns: 32px 1fr; gap: var(--s4); padding: var(--s5); }
  .page-steps > li::before { width: 32px; height: 32px; font-size: 16px; }
  .page-steps b { font-size: var(--t6); line-height: var(--t6-lh); }
}

/* 카드 그리드 (2~3열) */
.page-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.page-cards--2 { grid-template-columns: repeat(2, 1fr); }
.page-card {
  background: var(--bg-card); border: 1px solid var(--stroke);
  border-radius: var(--r5); padding: var(--s7);
  display: flex; flex-direction: column;
}
.page-card-k {
  font-size: var(--t1); line-height: var(--t1-lh); font-weight: 800;
  letter-spacing: 0.1em; color: var(--fg-brand);
}
.page-card-t { margin-top: var(--s3); font-size: var(--t8); line-height: var(--t8-lh); font-weight: 800; letter-spacing: -0.02em; }
.page-card-d { margin-top: var(--s3); font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted); }
.page-card-d + .page-card-d { margin-top: var(--s3); }
@media (max-width: 767px) {
  .page-cards, .page-cards--2 { grid-template-columns: 1fr; }
  .page-card { padding: var(--s5); }
  .page-card-t { font-size: var(--t7); line-height: var(--t7-lh); }
}

/* 콜아웃 래퍼 — 내부는 Seed callout 레시피를 그대로 씀 */
.page-note { margin-top: var(--s6); }
.page-note .seed-callout__root { border-radius: var(--r4); }
.page-note-label {
  display: inline-block; margin-bottom: var(--s3);
  font-size: var(--t2); line-height: var(--t2-lh); font-weight: 800; letter-spacing: 0.06em;
  color: var(--fg-brand); background: var(--bg-brand-weak);
  border-radius: var(--r-full); padding: 5px 12px;
}
.page-quote { margin: 0; display: grid; gap: var(--s3); }
.page-quote p {
  margin: 0; font-size: var(--t6); line-height: 1.7; color: var(--fg-default);
  padding-left: var(--s4); border-left: 2px solid var(--seed-color-stroke-brand-weak);
}

/* before/after 2열 대조 */
.page-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; }
@media (max-width: 767px) { .page-duo { grid-template-columns: 1fr; } }

/* 하단 CTA 밴드 */
.page-cta {
  border-top: 1px solid var(--stroke);
  padding: var(--s16) 0 calc(var(--tb-clearance) + var(--s10));
  text-align: left;
}
.page-cta-title { font-size: clamp(26px, 3vw, var(--t12)); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.page-cta-sub { margin-top: var(--s4); font-size: var(--t6); line-height: var(--t6-lh); color: var(--fg-muted); max-width: 34em; }
.page-cta-row { margin-top: var(--s8); display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 767px) {
  .page-cta { padding: var(--s14) 0 calc(var(--tb-clearance) + var(--s8)); }
  .page-cta-title { font-size: 24px; }
}

/* 조건 요약 스트립 */
.page-facts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.page-facts span {
  font-size: var(--t3); line-height: var(--t3-lh); font-weight: 600; color: var(--fg-muted);
  border: 1px solid var(--stroke); border-radius: var(--r-full); padding: 8px 14px;
}

/* Seed accordion 배치 보정 (v3 다크 셸 위) */
.page-accordion.seed-accordion__root { --seed-dimension-spacing-x-global-gutter: var(--s6); }
.page-accordion .seed-accordion__item--variant_separated { background: var(--bg-card); }
.page-accordion .seed-accordion__trigger { min-height: 64px; gap: var(--s4); }
.page-accordion .seed-accordion__title { font-weight: 700; }
.page-accordion .seed-accordion__suffix { margin-left: auto; }
.page-accordion .seed-accordion__suffixIcon { transition: transform var(--d4) var(--ease); font-size: 18px; }
.page-accordion .seed-accordion__body { padding: 0 var(--s6) var(--s6); }
.page-accordion .seed-accordion__description { color: var(--fg-muted); line-height: 1.7; }

/* ==================== 홈 카피 개편 보조 클래스 (2026-08-18 기획 반영) ==================== */
/* 과정 카드 설명 한 줄 */
.cc-desc { margin-top: var(--s2); font-size: var(--t4); line-height: var(--t4-lh); color: var(--fg-muted); }
/* 원칙 카드 → 기록 페이지 링크 */
.prin-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s4);
  font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; color: var(--fg-brand);
  transition: color var(--d3) var(--ease);
}
.prin-link::after { content: '›'; font-size: 1.15em; line-height: 1; }
.prin-link:hover { color: var(--seed-color-fg-brand-contrast); }
/* 증거 섹션 → 기록 페이지 링크 */
.ev-more { margin-top: var(--s6); }
.ev-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t6); line-height: var(--t6-lh); font-weight: 700; color: var(--fg-brand);
  transition: color var(--d3) var(--ease);
}
.ev-link::after { content: '›'; font-size: 1.15em; line-height: 1; }
.ev-link:hover { color: var(--seed-color-fg-brand-contrast); }
/* 내비 8항목 — 880px 필 안에서 넘치지 않도록 한 단계 축소 */
.hd-nav { gap: var(--s5); }
.hd-nav a { font-size: var(--t3); line-height: var(--t3-lh); white-space: nowrap; }
@media (max-width: 1100px) { .hd .wrap { gap: var(--s5); } .hd-nav { gap: var(--s4); } }
/* 푸터: 요약문 + 비링크 연락 행 (§8 공통 컴포넌트 카피) */
.ft-sum { font-size: var(--t5); line-height: var(--t5-lh); font-weight: 500; color: rgba(20, 11, 4, 0.72); margin-bottom: var(--s3); max-width: 22em; }
.ft-plain { font-size: var(--t4); line-height: var(--t4-lh); font-weight: 500; color: rgba(20, 11, 4, 0.66); padding: var(--s1) 0; }
/* 콜아웃 본문 가독 폭 제한 (긴 산문 콜아웃) */
.page-note .seed-callout__description { display: block; max-width: 52em; line-height: 1.7; }
.page-note .seed-callout__description b { color: var(--fg-default); }


/* ==================== 홈 슬림화: 섹션 "문" · CTA 밴드 · 안내 스트립 ==================== */
/* 문은 전부 .ev-link 한 종류로 통일 (신규 색 없음) */
.sec-gate { margin-top: var(--s8); }
.mo-gate {
  display: inline-flex; align-items: center; gap: 5px; margin-top: var(--s2);
  font-size: var(--t3); line-height: var(--t3-lh); font-weight: 700; color: var(--fg-brand);
  transition: color var(--d3) var(--ease);
}
.mo-gate::after { content: '›'; font-size: 1.15em; line-height: 1; }
.mo-gate:hover { color: var(--seed-color-fg-brand-contrast); }

.cta-band {
  margin-top: var(--gap);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s8); flex-wrap: wrap;
  padding: var(--s8); border: 1px solid var(--stroke); border-radius: var(--r-card);
  background: var(--bg-card);
}
.cta-t { font-size: var(--t10); line-height: var(--t10-lh); font-weight: 800; letter-spacing: -0.03em; }
.cta-d { margin-top: var(--s2); font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted); }
.cta-acts { display: flex; gap: var(--s3); flex-wrap: wrap; }

.visit-strip {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s8); border: 1px solid var(--stroke); border-radius: var(--r-card);
  background: var(--bg-card);
}
.vs-row { display: flex; align-items: center; gap: 10px; font-size: var(--t7); line-height: var(--t7-lh); font-weight: 600; }
.vs-acts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
@media (max-width: 767px) {
  .cta-band, .visit-strip { padding: var(--s5); }
  .cta-t { font-size: var(--t9); line-height: var(--t9-lh); }
  .vs-row { font-size: var(--t6); line-height: var(--t6-lh); }
  .cta-acts, .vs-acts { flex-direction: column; align-items: stretch; }
}


/* ==================== 복구: 편집 중 유실된 규칙 (백업 03:42판에서 복원) ==================== */
.ft-brandcol { display: flex; flex-direction: column; gap: var(--s2); max-width: 24em; }
.ft-h { font-size: var(--t4); line-height: var(--t4-lh); font-weight: 700; color: #140b04; margin-bottom: var(--s2); }
.ft-meta { font-size: var(--t4); line-height: var(--t4-lh); font-weight: 500; color: rgba(20, 11, 4, 0.66); }
.prin-art--live { background: var(--black-card); }
.mini--overlay { z-index: 2; }
.claire-dots { display: block; width: min(420px, 76%); height: 84px; margin: 0 auto var(--s2); }
.claire-type {
  margin-top: var(--s4); min-height: 24px; text-align: center;
  font-size: var(--t5); line-height: var(--t5-lh); color: var(--fg-muted);
}
.claire-type i { display: inline-block; width: 2px; height: 1em; background: var(--orange); vertical-align: -2px; margin-left: 2px; animation: ct-blink 1s steps(1) infinite; }
@media (max-width: 767px) {
  .mq-art { width: 56px; height: 56px; }
  .claire-dots { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .claire-type i { animation: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .curtain { position: sticky; top: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .curtain--last { padding-top: max(22svh, 200px); } /* 커튼 선단 여백: 헤딩이 핸드오프 중반에 진입 (SEED 중앙정렬 등가) */
  .sec-cover { position: relative; z-index: 2; background: var(--black); padding-top: max(22svh, 200px); }
  #visit { position: relative; z-index: 3; background: var(--black); border-radius: 0 0 20px 20px; }  /* [V] rounded-b-20은 마지막 인플로 섹션에 */
}
.sec-cover { background: var(--black); }
.tb-wrap {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom) + var(--kb, 0px));
  z-index: 300;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2);
}
.tb-orb-core {
  width: 27px; height: 27px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #ff9a66, var(--orange) 60%);
}
.cn-orb { position: relative; }
.tb-chat-field {
  flex: 1; min-width: 0; height: 40px;
  background: transparent; border: none; outline: none;
  font-size: 16px; font-family: inherit; color: var(--fg-default);
  caret-color: var(--orange); padding: 0 var(--s1);
}
.tb-chat-field::placeholder { color: var(--fg-muted); }
.tb-overlay {
  position: fixed; left: 0; right: 0; top: 0;
  bottom: calc(var(--tb-clearance) + var(--kb, 0px));
  z-index: 280; cursor: pointer;
  /* 키보드가 올라오면 위쪽도 같이 줄어들어야 답변이 잘리지 않아요 */
  max-height: var(--vvh, 100dvh);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.tb-overlay-grad {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8, 8, 8, 0.97) 0%, rgba(8, 8, 8, 0.74) 42%, rgba(8, 8, 8, 0) 100%);
}
.tb-overlay-content {
  position: relative; z-index: 1; cursor: auto;
  width: calc(100% - 20px); max-width: 620px;
  /* 챗 답변은 왼쪽 정렬이 읽기 쉬워요 */
  text-align: left; padding: var(--s5) var(--s5) var(--s5);
  margin-bottom: 10px;
  border-radius: 20px;
  background: rgba(18, 17, 16, 0.95);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 0 0.5px rgba(255,255,255,.10) inset;
  animation: tb-rise var(--d6) var(--ease-enter);
  /* --vvh 는 이미 키보드를 제외한 '보이는 높이'예요. --kb 를 또 빼면 두 번 빠져요 */
  max-height: calc(var(--vvh, 100dvh) - var(--tb-clearance) - var(--header-h) - 12px);
  overflow-y: auto; overscroll-behavior: contain;
}
@media (max-width: 767px) {
  .tb-say { font-size: var(--t5); line-height: var(--t5-lh); }
  .tb-overlay-content { padding: var(--s4) var(--s4) var(--s3); }
  .tb-form { max-width: none; }
}

/* ==================== 재작성: 원칙③ 분 단위 타임라인 (tl12) ====================
   JS(v3.js §S4)가 .tl12-bar > .tl12-seg(+i) · .tl12-tip · .tl12-legend 을 생성.
   회색 구간=종이·교구·대화, 주황 채움(i)=화면 보는 시간. */
.tl12 { position: relative; width: 100%; min-width: 0; }
/* 스크롤 컨테이너가 부모를 밀지 않게 — flex/grid 자식의 min-width:auto 차단 */
.tl12-bar { min-width: 0; }
.prin-art--tl { min-width: 0; overflow: hidden; }
/* 타임라인의 최소 폭(12×44)이 조상까지 밀고 올라가 레이아웃 뷰포트를 넓히던 문제.
   grid/flex 자식의 기본 min-width:auto 를 끊어 스크롤 컨테이너 안에서 끝나게 해요. */
.prin-items, .prin-item, .prin-art, .prin-rail { min-width: 0; }
.tl12-bar {
  display: flex; gap: 4px; width: 100%; height: 92px; align-items: stretch;
  /* P0-2: 구간이 44px 밑으로 줄지 않게 하고, 좁으면 가로로 넘겨요 */
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.tl12-bar::-webkit-scrollbar { display: none; }
.tl12-seg {
  position: relative; flex: 1 1 44px; flex-shrink: 0;
  min-width: 44px; scroll-snap-align: center; padding: 0;
  border: none; border-radius: var(--r2); overflow: hidden;
  background: rgba(244, 241, 236, 0.16);
  transition: background var(--d3) var(--ease), transform var(--d3) var(--ease-enter);
}
.tl12-seg > i {
  position: absolute; left: 0; top: 0; bottom: 0; display: block;
  background: var(--orange); border-radius: inherit;
}
.tl12-seg:hover, .tl12-seg:focus-visible { background: rgba(244, 241, 236, 0.26); }
.tl12-seg:active { transform: scale(var(--press-scale)); }
.tl12-seg--paper { background: rgba(244, 241, 236, 0.13); }
.tl12-tip {
  position: absolute; top: calc(100% + 8px); transform: translateX(-50%);
  padding: 6px 10px; border-radius: var(--r2);
  background: var(--bg-card); border: 1px solid var(--stroke);
  font-size: var(--t2); line-height: var(--t2-lh); color: var(--fg-default);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--d3) var(--ease);
}
.tl12-tip.on { opacity: 1; }
.tl12-legend {
  display: flex; align-items: center; gap: 6px; margin-top: var(--s6);
  font-size: var(--t2); line-height: var(--t2-lh); color: var(--fg-muted);
}
.tl12-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tl12-legend i.scr { background: var(--orange); }
.tl12-legend i.pap { background: rgba(244, 241, 236, 0.16); margin-left: var(--s3); }
.prin-art--tl { display: flex; align-items: center; padding: var(--s6); background: var(--bg-card); }
.ft-col--contact a { white-space: nowrap; }


/* ==================== 복구 2차: 푸터 커튼 · 탭바/챗 · 커튼 · mini (백업 03:42판) ==================== */
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); width: 100%; }
.ft-brand { font-size: 28px; line-height: 1.22; font-weight: 700; color: #140b04; letter-spacing: -0.02em; margin-bottom: var(--s3); }
.ft-col { display: flex; flex-direction: column; align-items: flex-start; }
@keyframes ct-blink { 50% { opacity: 0; } }
.mq-art { display: block; width: 84px; height: 84px; border-radius: var(--r3); background: var(--black-raise); }
.curtain { background: var(--black); }
.tb-orb {
  flex-shrink: 0; width: var(--tb-h); height: var(--tb-h);
  border-radius: 50%; display: grid; place-items: center;
  background: var(--tb-glass-bg);
  -webkit-backdrop-filter: var(--tb-glass-filter);
  backdrop-filter: var(--tb-glass-filter);
  box-shadow: var(--tb-glass-shadow);
  transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
}
.tb-orb:hover { background: rgba(46, 45, 44, 0.85); }
.tb-orb:active { transform: scale(var(--press-scale)); }
.cn-eye {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3.6px; border-radius: 50%;
  background: #3d1202; pointer-events: none;
}
.tb-hint {
  order: -1;
  font-size: var(--t3); line-height: 1; font-weight: 600; color: var(--fg-default);
  background: var(--tb-glass-bg);
  -webkit-backdrop-filter: var(--tb-glass-filter);
  backdrop-filter: var(--tb-glass-filter);
  box-shadow: var(--tb-glass-shadow);
  border-radius: var(--r-full); padding: 10px 14px;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--d6) var(--ease);
}
.tb-hint.show { opacity: 1; }
@keyframes tb-swap { from { opacity: 0; transform: translateY(5px) scale(0.985); } to { opacity: 1; transform: none; } }
.tb-chat-btn, .tb-chat-send {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: var(--fg-muted);
  transition: background var(--d2) var(--ease), color var(--d2) var(--ease),
              transform var(--d-press) var(--ease-enter);
}
.tb-chat-btn svg, .tb-chat-send svg { width: 17px; height: 17px; }
.tb-chat-btn:hover { background: rgba(255, 255, 255, 0.09); color: var(--fg-default); }
.tb-chat-send { background: rgba(255, 255, 255, 0.1); }
.tb-chat-send.ready { background: var(--orange); color: #fff; }
.tb-chat-send:disabled { opacity: 0.4; }
.tb-chat-send:not(:disabled):active { transform: scale(0.9); }
@keyframes tb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tb-who {
  font-size: var(--t1); line-height: var(--t1-lh); letter-spacing: 0.14em; font-weight: 700;
  color: var(--orange); margin-bottom: var(--s2);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tb-who::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a66, var(--orange) 60%);
}
.tb-say {
  font-size: var(--t7); line-height: var(--t7-lh); font-weight: 600;
  color: var(--fg-default); letter-spacing: -0.01em; text-wrap: balance;
}
.tb-say .caret {
  display: inline-block; width: 2px; height: 1em; background: var(--orange);
  vertical-align: -0.12em; margin-left: 2px;
  animation: tb-blink 0.9s steps(1) infinite;
}
@keyframes tb-blink { 50% { opacity: 0; } }
.tb-chips { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-top: var(--s5); }
.tb-chip {
  background: var(--bg-card); border: 1px solid var(--stroke-strong); border-radius: var(--r-full);
  padding: 11px 17px; font-size: var(--t3); line-height: 1; font-weight: 600; color: var(--fg-default);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  transition: background var(--d3) var(--ease), border-color var(--d3) var(--ease),
              transform var(--d-press) var(--ease-enter);
}
.tb-chip:active { transform: scale(var(--press-scale)); }
.tb-chip--primary { background: var(--orange); border-color: transparent; color: #fff; }
.tb-form { max-width: 340px; margin: var(--s4) auto 0; display: flex; flex-direction: column; gap: var(--s2); text-align: left; }
.tb-input {
  width: 100%; min-height: 46px; padding: 10px 15px; border-radius: var(--r3);
  background: var(--bg-card); border: 1.5px solid var(--stroke-strong);
  font-size: var(--t5); font-family: inherit; color: var(--fg-default);
}
.tb-input:focus { outline: none; border-color: var(--orange); }
.tb-consent { display: flex; gap: 7px; align-items: flex-start; font-size: var(--t2); line-height: var(--t2-lh); color: var(--fg-muted); }
.tb-consent input { margin-top: 2px; accent-color: var(--orange); }
.tb-submit {
  min-height: 48px; border-radius: var(--r3); background: var(--orange); color: #fff;
  font-weight: 700; font-size: var(--t4);
  transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
}
.tb-submit:hover { background: var(--orange-dark); }
.tb-submit:active { transform: scale(var(--press-scale)); }
.tb-submit:disabled { opacity: 0.4; }
.tb-pre {
  margin: var(--s3) auto 0; max-width: 340px; text-align: left;
  font-size: var(--t1); line-height: 1.7; font-weight: 500;
  white-space: pre-wrap; background: var(--bg-card); border: 1px solid var(--stroke);
  border-radius: var(--r3); padding: var(--s3) var(--s4); color: var(--fg-muted);
}


/* ==================== 복구 3차: 구조 규칙 재작성 (푸터 커튼 · main · 챗 · mini) ==================== */
main { position: relative; background: var(--bg-default); }   /* 고정 푸터가 본문 뒤로 비치지 않게 */

/* SEED식 고정 오렌지 푸터 커튼 리빌 */
.ft {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: -1;
  background: var(--orange); color: #170d04;
  /* 하단 고정 바(칩+입력창 ≈96px)에 마지막 줄이 가리지 않게 여유를 둬요 */
  padding: var(--s10) 0 calc(env(safe-area-inset-bottom) + var(--s5) + 104px);
  display: flex; flex-direction: column; gap: var(--s12);
}
.ft .wrap { width: 100%; }
.ft-cols { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--s10); }
.ft-col a { font-size: var(--t4); line-height: var(--t4-lh); font-weight: 500; color: rgba(20, 11, 4, 0.8); padding: var(--s1) 0; transition: color var(--d3) var(--ease); }
.ft-col a:hover { color: #000; }
.ft-mark {
  font-family: var(--anton); font-weight: 400;
  font-size: clamp(84px, 17.5vw, 340px); line-height: 0.9; letter-spacing: 0.005em;
  color: var(--black); margin: 0 auto; width: min(100%, 1760px); padding: 0 var(--s6);
  user-select: none; white-space: nowrap; overflow: hidden;
}
.ft-spacer { height: var(--ft-h, 620px); }

/* 클레어 앰비언트 챗 패널 */
.tb-chat {
  position: fixed; right: 20px; bottom: calc(env(safe-area-inset-bottom) + 88px); z-index: 120;
  display: flex; align-items: center; gap: var(--s2);
  padding: 8px 8px 8px 14px; border-radius: var(--r-full);
  background: var(--tb-glass-bg, rgba(22, 21, 20, 0.86));
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.11) inset;
}

/* 미니 캔버스 루프 (타일/원칙 아트 내부 절대배치) */
.mini { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.mini--overlay { mix-blend-mode: screen; opacity: 0.9; }

@media (max-width: 767px) {
  .ft { position: static; z-index: auto; padding-top: var(--s10); gap: var(--s9); }
  .ft-spacer { display: none; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s8); }
  .ft-mark { font-size: clamp(48px, 15.5vw, 84px); }
  .tb-chat { right: 12px; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 82px); }
}

/* ==================== 푸터 법적·사업자 정보 ====================
   출처: lab.cocoacoding.com BusinessFooter (동일 사업자) */
.ft-legal {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid rgba(20, 11, 4, 0.14);
  font-size: var(--t2, 12px); line-height: 1.75;
  color: rgba(20, 11, 4, 0.78);   /* 대비 4.57:1 — 소형 텍스트 AA 통과 */
}
.ft-legal p { margin: 0; }
.ft-legal-name {
  font-weight: 700; color: rgba(20, 11, 4, 0.92);
  margin-bottom: 4px !important;
}
.ft-legal-name span { font-weight: 500; color: rgba(20, 11, 4, 0.78); }
.ft-legal i {
  font-style: normal; margin: 0 8px;
  color: rgba(20, 11, 4, 0.45);
}
.ft-legal a { color: rgba(20, 11, 4, 0.90); text-decoration: none; }
.ft-legal a:hover { color: #000; text-decoration: underline; }
.ft-legal-links { margin-top: var(--s3) !important; }
.ft-legal-links a { font-weight: 600; }
@media (max-width: 640px) {
  .ft-legal { margin-top: var(--s7); line-height: 1.85; }
  .ft-legal i { margin: 0 6px; }
}

/* ==================== 클레어 하단 바 (탭바형 입력창) ====================
   참고: kakaocorp.com 하단 검색바의 "칩 줄 + 알약 입력창" 배치 구조.
   코드·색상·문구는 복제하지 않고 배치 패턴만 재현. */
.cbar {
  position: fixed; left: 50%;
  transform: translate(-50%, calc(-1 * var(--kb, 0px)));
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 300;
  /* 키보드 애니메이션 중 visualViewport 이벤트가 연속으로 오므로
     별도 transition 없이 즉시 따라가는 편이 더 붙어 보여요 */
  will-change: transform;
  width: min(calc(100vw - 24px), 560px);
  pointer-events: none;
}
.cbar-in { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cbar-chips {
  display: flex; gap: 6px; max-width: 100%;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 2px 0;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.cbar-chips::-webkit-scrollbar { display: none; }
.cbar-chip {
  flex: 0 0 auto; height: 30px; padding: 0 13px; border: 0;
  border-radius: var(--r-full); cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: var(--t2, 12px); font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-default);
  background: #161413;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.09) inset;
  transition: background var(--d3) var(--ease), transform var(--d-press) var(--ease-enter);
}
.cbar-chip:hover { background: #221f1d; }
.cbar-chip:active { transform: scale(var(--press-scale)); }
.cbar-chip--go { background: var(--orange); color: #fff; box-shadow: 0 6px 20px rgba(251, 90, 26, .34); }
.cbar-chip--go:hover { background: var(--bg-brand-pressed, #e14606); }

.cbar-form {
  pointer-events: auto;
  width: 100%; height: 52px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px 0 12px;
  border-radius: var(--r-full);
  /* 불투명 — 뒤 콘텐츠가 비쳐 글자가 묻히지 않게 */
  background: #161413;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: box-shadow var(--d3) var(--ease), background var(--d3) var(--ease);
}
.cbar-form:focus-within {
  background: rgba(28, 27, 26, 0.92);
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 1.5px var(--orange) inset;
}
.cbar-ic { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; }
.cbar-orb {
  width: 20px; height: 20px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 35% 30%, #ff9a66, var(--orange) 60%);
}
.cbar .tb-chat-field { height: 52px; font-size: 16px; }
.cbar-x { display: none; }
.cbar-form.has-text .cbar-x { display: grid; }
.cbar .tb-chat-send { width: 40px; height: 40px; }
.cbar .tb-chat-btn { width: 32px; height: 32px; }
.cbar .tb-chat-btn svg { width: 15px; height: 15px; }

/* 오렌지 푸터 구간에선 바를 어둡게 유지 (대비 확보) */
.cbar--onft .cbar-form, .cbar--onft .cbar-chip:not(.cbar-chip--go) { background: rgba(14, 13, 12, 0.88); }

/* 구형 오브·힌트는 더 이상 쓰지 않아요 */
.tb-orb, .tb-hint { display: none !important; }

@media (max-width: 480px) {
  .cbar { width: calc(100vw - 20px); bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cbar-form { height: 48px; }
  .cbar .tb-chat-field { height: 48px; }
  .cbar-chip { height: 28px; font-size: 11px; padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cbar-chip, .cbar-form { transition: none; }
}

/* ==================== 모바일 키보드 대응 ====================
   기준: 네이티브 챗 앱(입력창이 키보드에 붙고, 답변은 그 위에서 스크롤).
   - Android/Chrome: viewport meta 의 interactive-widget=resizes-content 로
     레이아웃 뷰포트가 줄어들어 --kb 는 0 → transform 무동작
   - iOS/Safari: 레이아웃 뷰포트가 그대로라 --kb 로 직접 밀어 올림 */
html.cbar-lock, html.cbar-lock body { overflow: hidden; overscroll-behavior: none; }
.tb-overlay-content { -webkit-overflow-scrolling: touch; }
/* 키보드가 올라온 동안은 칩 줄을 접어 답변 공간을 벌어요 */
html.kb-up .cbar-chips {
  max-height: 0; opacity: 0; margin-bottom: -9px; padding: 0;
  overflow: hidden; pointer-events: none;
  transition: max-height 160ms var(--ease), opacity 120ms var(--ease);
}
.cbar-chips { max-height: 34px; transition: max-height 200ms var(--ease), opacity 160ms var(--ease); }
/* 입력 중에는 유리 배경을 조금 더 불투명하게 (키보드 위 대비 확보) */
html.kb-up .cbar-form { background: #161413; }
@media (prefers-reduced-motion: reduce) {
  .cbar-chips, html.kb-up .cbar-chips { transition: none; }
}
/* 답변 카드 안쪽 정렬 — 챗 말풍선 감각 */
.tb-overlay-content .tb-chips { justify-content: flex-start; }
.tb-overlay-content .tb-user { text-align: right; }
.tb-overlay-content .tb-form { margin-left: 0; }
.tb-overlay-content .tb-who { justify-content: flex-start; }
/* 타임라인: 좌우로 더 있다는 신호 (넘칠 때만) */
.tl12 { --tl-fade: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
@media (max-width: 1023px) {
  .tl12-bar { -webkit-mask-image: var(--tl-fade); mask-image: var(--tl-fade); }
}
.tl12-seg:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ft-legal-note { color: rgba(20, 11, 4, 0.62); }

/* ==================== 모바일 히어로 ====================
   테두리·여백 없이 화면을 꽉 채웁니다. (2026-08-20: 갈색 프레임 제거) */
@media (max-width: 767px) {
  .hero { background: var(--black); padding: 0; height: 110svh; }
  .hero-pin {
    top: 0; height: 100svh;
    border-radius: 0; background: var(--black);
    /* 하단 바 실측 높이 + 여유 — CTA 가 칩 줄에 가리지 않게 */
    padding-bottom: calc(var(--cbar-h, 96px) + 54px);
  }
  .hero-scroll { bottom: 18px; }
  .hero-pin .wrap { padding-left: 20px; padding-right: 20px; }
}
/* 작은 화면(≤374px)에서 첫 줄이 세 줄로 접히지 않게 한 단계만 줄여요 */
@media (max-width: 374px) {
  .hero-h { font-size: 21px; }
  .hero-h-brand { font-size: 25px; }
}

/* ==================== 모바일 상단 바 ====================
   레퍼런스 방식: 바 자체는 영역을 잡지 않고 투명하게 떠 있어요.
   로고는 로고 그대로, 검색·햄버거만 불투명한 원 안에 들어갑니다.
   데스크톱의 "스크롤하면 가운데 알약으로 모이는" 연출은 모바일에서 꺼요. */
@media (max-width: 767px) {
  .hd, .hd.scrolled {
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: none;
  }
  .hd .wrap, .hd.scrolled .wrap {
    max-width: none; height: 100%; margin-top: 0; gap: 8px;
    padding-left: 16px; padding-right: 16px;
    background: none; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    transition: none;
  }
  /* 아이콘 두 개 = 불투명한 원. 어떤 배경 위에 와도 대비가 흔들리지 않아요 */
  .hd-search, .hd-burger {
    width: 40px; height: 40px; margin-right: 0;
    border-radius: 50%;
    background: #1f1d1c;
    color: var(--fg-default);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
    transition: background var(--d3) var(--ease), color var(--d3) var(--ease),
                transform var(--d-press) var(--ease-enter);
  }
  .hd-search { margin-left: auto; }
  .hd-search + .hd-burger { margin-left: 0; }
  .hd-search:active, .hd-burger:active { transform: scale(var(--press-scale)); }

  /* 밝은 구간(아이보리) 위를 지날 때 — 로고와 원을 뒤집어요 */
  .hd--onlight .hd-logo canvas { filter: invert(1); }
  .hd--onlight .hd-search, .hd--onlight .hd-burger {
    background: #e7e1d8; color: #140b04;
    box-shadow: 0 2px 10px rgba(20, 11, 4, .16);
  }

  /* 바에 면이 없으니 로고가 본문 글자 위에 겹쳐 읽히지 않던 문제.
     사각형 배경 대신 위에서 아래로 사라지는 그라데이션 한 겹만 깔아요.
     (가장자리가 안 보이니 "영역을 잡는" 느낌은 그대로 없습니다) */
  .hd::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0;
    height: calc(var(--header-h) + 34px);
    pointer-events: none; z-index: -1;
    background: linear-gradient(to bottom,
      rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.74) 40%, rgba(10, 10, 10, 0.34) 72%,
      rgba(10, 10, 10, 0) 100%);
    transition: opacity var(--d4) var(--ease);
  }
  .hd--onlight::before {
    background: linear-gradient(to bottom,
      rgba(244, 241, 236, 0.94) 0%, rgba(244, 241, 236, 0.78) 40%, rgba(244, 241, 236, 0.36) 72%,
      rgba(244, 241, 236, 0) 100%);
  }

  /* 검색 모달이 열려 있는 동안 상단 바는 스크림 위로 */
  html.ssh-open .hd { z-index: 330; }
  html.ssh-open .hd::before { opacity: 0; }
  /* 시트·모달이 열려 있는 동안에는 하단 클레어 바를 숨겨요 (z-index 가 더 높아 겹쳤어요) */
  html.mnav-lock .cbar, html.ssh-open .cbar { display: none; }
}

/* ==================== 헤더 로고 도트화 ====================
   JS가 <img> 옆에 캔버스를 만들어 같은 글자를 도트로 그려요.
   캔버스가 준비되면 이미지를 감춥니다(스크린리더용 alt 는 유지). */
.hd-logo { position: relative; display: inline-flex; align-items: center; }
.hd-logo canvas { display: block; height: 16px; width: auto;
  transition: filter var(--d3) var(--ease); }
.hd-logo.is-dotted img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==================== 벤토 카드 ====================
   칸 크기가 제각각인 진짜 벤토. 각 칸은 꽉 찬 색면이고,
   그림이 칸을 채우고 글은 아래에 얹힙니다. */
.bn {
  position: relative; overflow: hidden;
  border-radius: 18px;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-width: 0; min-height: 0;
  background: #0E0D0C;
  transition: transform var(--d4) var(--ease-enter);
}
.bn:hover { transform: translateY(-3px); }
.bn-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bn-cap {
  position: relative; z-index: 2;
  padding: var(--s6);
  font-size: var(--t2); line-height: 1.5;
}
/* 캡션 뒤에 자기 색으로 스크림을 깔아요 — 납작한 칸에서 그림과 글이 겹쳐 읽히던 문제 */
.bn-cap::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  top: -46px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--scrim, #0E0D0C) 58%);
}
.bn--num .bn-cap::before { display: none; }
.bn-cap b {
  display: block; font-size: var(--t3); font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 3px;
}
.bn-go { display: inline-block; margin-left: 4px; font-weight: 700; text-decoration: none; }

/* 숫자 카드 */
.bn--num { justify-content: center; padding: var(--s6); }
/* 글은 그림 위에 — 숫자 칸도 뒤에 움직이는 그림이 깔려요 */
.bn--num > p { position: relative; z-index: 2; }
/* 좁은 화면엔 그림이 들어갈 자리가 없어요 */
.bn--num .bn-art { display: none; }
@media (min-width: 768px) {
  /* canvas 는 replaced element 라 height:auto 가 bottom 이 아니라 고유비율(2:1)로 풀려요.
     그래서 높이를 명시합니다 — 안 그러면 폭의 절반만큼 칸 밖으로 넘칩니다. */
  .mosaic .bn--num .bn-art {
    display: block; top: 14px; right: 16px; bottom: 14px; left: auto;
    width: 30%; height: calc(100% - 28px);
  }
  .mosaic .bn-h .bn-sub { max-width: 64%; }
}
@media (min-width: 1100px) {
  .mosaic .bn-d .bn-art { width: 44%; }
  .mosaic .bn-h .bn-art { width: 32%; }
}
.bn-k { margin: 0 0 8px; font-size: 11px; letter-spacing: .04em; font-weight: 700; }
.bn-num {
  margin: 0; font-family: var(--anton); font-weight: 400;
  font-size: clamp(34px, 4.0vw, 62px); line-height: 0.94;
  letter-spacing: .005em; font-variant-numeric: tabular-nums;
}
.bn-num small { font-family: var(--font); font-size: 0.28em; font-weight: 700; margin-left: 4px; opacity: .74; }
.bn-sub { margin: 10px 0 0; font-size: var(--t2); line-height: 1.5; }
/* 각주 — 사실을 빠뜨리지 않되 숫자를 가리지 않는 크기 */
.bn-note { margin: 6px 0 0; font-size: 11px; line-height: 1.45; opacity: .60; }

/* ── 톤: 색면 + 그 위 글자색 ───────────────────────────────── */
.bn[data-tone="orange"] { background: #FB5A1A; --scrim: #FB5A1A; }
.bn[data-tone="rust"]   { background: #C2410C; --scrim: #C2410C; }
.bn[data-tone="ivory"]  { background: #F4F1EC; --scrim: #F4F1EC; }
.bn[data-tone="peach"]  { background: #FFB48A; --scrim: #FFB48A; }
.bn[data-tone="brown"]  { background: #2B1508; --scrim: #2B1508; }
.bn[data-tone="teal"]   { background: #0B5E63; --scrim: #0B5E63; }
.bn[data-tone="mint"]   { background: #BFE8C8; --scrim: #BFE8C8; }
.bn[data-tone="indigo"] { background: #2E2C6E; --scrim: #2E2C6E; }
.bn[data-tone="sand"]   { background: #E6D5AE; --scrim: #E6D5AE; }
.bn[data-tone="plum"]   { background: #6B2F52; --scrim: #6B2F52; }
.bn[data-tone="black"]  { background: #0E0D0C; --scrim: #0E0D0C; }

/* 밝은 색면 = 어두운 글자 */
.bn[data-tone="ivory"], .bn[data-tone="peach"],
.bn[data-tone="mint"],  .bn[data-tone="sand"] { color: #201408; }
.bn[data-tone="ivory"] .bn-cap b, .bn[data-tone="peach"] .bn-cap b,
.bn[data-tone="mint"] .bn-cap b,  .bn[data-tone="sand"] .bn-cap b { color: #140B04; }
.bn[data-tone="ivory"] .bn-cap, .bn[data-tone="peach"] .bn-cap,
.bn[data-tone="mint"] .bn-cap,  .bn[data-tone="sand"] .bn-cap { color: rgba(32,20,12,.72); }
.bn[data-tone="ivory"] .bn-k, .bn[data-tone="peach"] .bn-k,
.bn[data-tone="mint"] .bn-k,  .bn[data-tone="sand"] .bn-k { color: rgba(32,20,12,.58); }
.bn[data-tone="ivory"] .bn-num, .bn[data-tone="peach"] .bn-num,
.bn[data-tone="mint"] .bn-num,  .bn[data-tone="sand"] .bn-num { color: #140B04; }
.bn[data-tone="ivory"] .bn-sub, .bn[data-tone="peach"] .bn-sub,
.bn[data-tone="mint"] .bn-sub,  .bn[data-tone="sand"] .bn-sub { color: rgba(32,20,12,.68); }
.bn[data-tone="ivory"] .bn-go, .bn[data-tone="peach"] .bn-go,
.bn[data-tone="mint"] .bn-go,  .bn[data-tone="sand"] .bn-go { color: #C2410C; }

/* 어두운·진한 색면 = 밝은 글자 */
.bn[data-tone="orange"], .bn[data-tone="rust"], .bn[data-tone="brown"],
.bn[data-tone="teal"], .bn[data-tone="indigo"], .bn[data-tone="plum"],
.bn[data-tone="black"] { color: rgba(255,255,255,.78); }
.bn[data-tone="orange"] .bn-cap b, .bn[data-tone="rust"] .bn-cap b,
.bn[data-tone="brown"] .bn-cap b, .bn[data-tone="teal"] .bn-cap b,
.bn[data-tone="indigo"] .bn-cap b, .bn[data-tone="plum"] .bn-cap b,
.bn[data-tone="black"] .bn-cap b { color: #FFFFFF; }
.bn[data-tone="orange"] .bn-cap, .bn[data-tone="rust"] .bn-cap,
.bn[data-tone="brown"] .bn-cap, .bn[data-tone="teal"] .bn-cap,
.bn[data-tone="indigo"] .bn-cap, .bn[data-tone="plum"] .bn-cap,
.bn[data-tone="black"] .bn-cap { color: rgba(255,255,255,.74); }
.bn[data-tone="brown"] .bn-k, .bn[data-tone="plum"] .bn-k { color: rgba(255,255,255,.62); }
.bn[data-tone="orange"] .bn-k { color: rgba(32,14,4,.72); }
.bn[data-tone="brown"] .bn-num, .bn[data-tone="plum"] .bn-num { color: #FFFFFF; }
.bn[data-tone="orange"] .bn-num { color: #201004; }
.bn[data-tone="orange"] .bn-cap b { color: #201004; }
.bn[data-tone="orange"] .bn-cap { color: rgba(32,16,4,.80); }
.bn[data-tone="brown"] .bn-sub, .bn[data-tone="plum"] .bn-sub { color: rgba(255,255,255,.66); }
.bn[data-tone="orange"] .bn-sub { color: rgba(32,16,4,.72); }
.bn-go { color: #FFFFFF; }
.bn[data-tone="orange"] .bn-go { color: #201004; }

/* ── 벤토 배치 ────────────────────────────────────────────────
   8칸. 12칸 격자 위에서 줄마다 경계를 어긋나게 뒀어요 —
   위·아래 줄의 세로선이 안 맞아야 표가 아니라 벤토로 읽힙니다.
   (a 사고력수학 / b 사건 / c 실험 / d 수강료
    e 랩노트 / f 첫 상담 / g 진로와 공학 / h 120분) */
/* 줄마다 칸 경계를 6·10 → 4·9 → 5 로 어긋나게 뒀어요.
   위아래 세로선이 맞아버리면 벤토가 아니라 표로 읽힙니다. */
.bn-a { grid-column: 1 / 6;   grid-row: 1 / 3; }   /* 사고력 수학 */
.bn-b { grid-column: 6 / 10;  grid-row: 1 / 3; }   /* 사건 */
.bn-c { grid-column: 10 / 13; grid-row: 1 / 3; }   /* 실험 — 좁고 긴 칸(플라스크) */
.bn-e { grid-column: 1 / 4;   grid-row: 3 / 5; }   /* 랩노트 */
.bn-f { grid-column: 4 / 9;   grid-row: 3 / 5; }   /* 첫 상담 */
.bn-g { grid-column: 9 / 13;  grid-row: 3 / 5; }   /* 진로와 공학 */
.bn-h { grid-column: 1 / 5;   grid-row: 5 / 6; }   /* 120분 */
.bn-d { grid-column: 5 / 13;  grid-row: 5 / 6; }   /* 수강료 — 맨 아래 가로로 긴 칸 */

/* 숫자 칸은 한 줄짜리라 활자를 한 단계 눌러야 안 넘칩니다 */
@media (min-width: 1100px) {
  .mosaic .bn--num { padding: 22px var(--s6); }
  .mosaic .bn-k { font-size: 10px; margin-bottom: 6px; }
  .mosaic .bn-num { font-size: clamp(30px, 2.9vw, 46px); }
  .mosaic .bn-sub { font-size: 13px; line-height: 1.45; margin-top: 8px; }
  /* 맨 아래 가로로 긴 칸은 숫자 옆에 설명을 세워요 — 오른쪽이 비지 않게 */
  .mosaic .bn-d {
    display: grid; align-content: center;
    grid-template-columns: auto 1fr; column-gap: 22px;
  }
  .mosaic .bn-d .bn-k { grid-column: 1 / -1; grid-row: 1; }
  .mosaic .bn-d .bn-num { grid-column: 1; grid-row: 2 / 4; align-self: center; }
  .mosaic .bn-d .bn-sub {
    grid-column: 2; grid-row: 2; align-self: end; margin: 0;
    font-size: 15px; line-height: 1.5; max-width: 34ch;
  }
  .mosaic .bn-d .bn-note {
    grid-column: 2; grid-row: 3; align-self: start; margin: 4px 0 0;
  }
}

/* 태블릿 768–1099: 4칸 6줄 */
@media (min-width: 768px) and (max-width: 1099px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(128px, 1fr));
    grid-auto-rows: auto; gap: 12px;
  }
  .bn-a { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bn-b { grid-column: 3 / 5; grid-row: 1 / 3; }
  .bn-c { grid-column: 1 / 2; grid-row: 3 / 5; }
  .bn-e { grid-column: 2 / 5; grid-row: 3 / 5; }
  .bn-f { grid-column: 1 / 3; grid-row: 5 / 7; }
  .bn-g { grid-column: 3 / 5; grid-row: 5 / 7; }
  .bn-h { grid-column: 1 / 3; grid-row: 7 / 8; }
  .bn-d { grid-column: 3 / 5; grid-row: 7 / 8; }
  /* 하단 클레어 바에 마지막 줄이 가리지 않게 */
  .mosaic-sec { padding-bottom: calc(var(--tb-clearance, 116px) + 16px); }
}

/* 모바일 ≤767: 세로로 길게 늘어놓지 않아요.
   큰 칸 하나 + 옆에 작은 칸 둘 + 아래 숫자 둘 — 세 줄이면 끝납니다.
   실험·진로·첫 상담은 각자 페이지에서 더 자세히 다뤄요. */
@media (max-width: 767px) {
  .mosaic {
    grid-template-columns: 1.42fr 1fr;
    grid-template-rows: none; grid-auto-rows: auto; gap: 10px;
  }
  .bn-c, .bn-g, .bn-f { display: none; }
  .bn-a { grid-column: 1; grid-row: 1 / 3; min-height: 286px; }
  .bn-b { grid-column: 2; grid-row: 1;     min-height: 138px; }
  .bn-e { grid-column: 2; grid-row: 2;     min-height: 138px; }
  .bn-d { grid-column: 1; grid-row: 3;     min-height: 146px; }
  .bn-h { grid-column: 2; grid-row: 3;     min-height: 146px; }

  /* 작은 칸은 제목만 — 설명까지 넣으면 그림 자리가 안 남아요 */
  .bn-b .bn-cap span, .bn-e .bn-cap span { display: none; }
  .bn-b .bn-cap, .bn-e .bn-cap { padding: 12px; }
  .bn-b .bn-cap b, .bn-e .bn-cap b { margin-bottom: 0; font-size: var(--t2); }
  .bn-b .bn-cap::before, .bn-e .bn-cap::before { top: -26px; }

  .bn-a .bn-cap { padding: 16px; }
  .mosaic .bn--num { padding: 14px; }
  .mosaic .bn-k { font-size: 10px; letter-spacing: .06em; margin-bottom: 5px; }
  .mosaic .bn-num { font-size: clamp(26px, 7.6vw, 34px); line-height: 1.0; }
  .mosaic .bn-sub { font-size: 12px; line-height: 1.45; margin-top: 6px; }
  /* 좁은 숫자 칸은 머리글이 이미 사실을 다 담고 있어요 */
  .bn-h .bn-sub { display: none; }
  .mosaic .bn-note { font-size: 10.5px; margin-top: 4px; }

  .mosaic-sec { padding-bottom: calc(var(--tb-clearance, 116px) + 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .bn { transition: none; }
  .bn:hover { transform: none; }
}

/* ==================== 한눈에 보기 판 ====================
   2026-08-20: 아이보리 구간을 걷어내고 전부 검정으로 갑니다.
   구조(그림 위 · 글 아래)는 그대로 두고 색만 어두운 쪽으로 뒤집었어요. */
.sec-dark .mo-tile {
  background: #161514;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: none;
}
.sec-dark .mo-cap { color: rgba(244, 241, 236, 0.74); }
.sec-dark .mo-cap b { color: var(--orange-tint); }
.sec-dark .mo-gate { color: var(--orange); }
.sec-dark .mo-gate:hover { color: var(--orange-tint); }

/* 타일 안 2D 모션 캔버스 — 위는 그림, 아래는 글. 겹치지 않아요. */
.sec-dark .mo-tile { padding: 0; justify-content: stretch; }
.mo-art { display: block; width: 100%; flex: 1 1 auto; min-height: 84px; }
.sec-dark .mo-cap {
  position: relative; z-index: 2; flex: 0 0 auto;
  background: none;                       /* 그림과 글이 겹치지 않으니 스크림 불필요 */
  padding: 0 var(--s5) var(--s5);
  color: rgba(244, 241, 236, 0.72);
  font-size: var(--t3); line-height: 1.55;
}
.sec-dark .mo-cap b {
  display: block; font-size: 11px; letter-spacing: .08em;
  color: var(--orange-tint); margin-bottom: 4px;
}
.sec-dark .mo-gate {
  display: inline-flex; margin-top: 8px; font-weight: 700;
  min-height: 32px; align-items: center;
}

/* ==================== 모바일 한눈에 보기: 타일 3개 ====================
   레퍼런스처럼 왼쪽 큰 타일 + 오른쪽 두 개. 4번째(연혁)는 푸터에 있어 모바일에선 접어요. */
@media (max-width: 767px) {
  .sec-dark .mo-cap { font-size: 12px; line-height: 1.5; padding: 0 12px 12px; }
  .sec-dark .mo-cap b { font-size: 10px; margin-bottom: 3px; }
  .mo-art { min-height: 96px; }
  /* 오른쪽 작은 타일 두 개는 설명을 짧게 — 넘치지 않게 */
  .mo-d .mo-cap, .mo-b .mo-cap { font-size: 11.5px; line-height: 1.45; }
}
/* 데스크톱에서 타일이 화면 높이만큼 늘어나 그림이 허공에 뜨던 문제 — 행 높이를 묶어요 */
@media (min-width: 768px) {
  .sec-dark .mosaic { height: auto; min-height: 0; }
  .sec-dark .mo-cap { padding: 0 var(--s6) var(--s6); }
  /* 그림이 타일 가운데에 앉게 — 페인터가 h 기준으로 배치해요 */
  .mo-art { max-height: none; }
}

/* ==================== 모바일 검색 ====================
   원형 배경·크기·간격은 "모바일 상단 바" 절에서 한 번에 정합니다. */
.hd-search { display: none; }
@media (max-width: 767px) {
  .hd-search {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer;
  }
}
/* 돋보기 ⇄ ✕ — 겹쳐 두고 회전하며 교차 페이드 */
.hd-search { position: relative; }
.hd-search .hd-search-ic, .hd-search .hd-search-x {
  position: absolute; top: 50%; left: 50%;
  transition: opacity 140ms var(--ease), transform 300ms var(--ease-reveal);
}
.hd-search .hd-search-ic { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.hd-search .hd-search-x {
  display: block; font-size: 15px; line-height: 1; opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(.6);
}
.hd-search[aria-expanded="true"] .hd-search-ic {
  opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.6);
}
.hd-search[aria-expanded="true"] .hd-search-x {
  opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
/* 돋보기 — 아이콘 스프라이트에 없어서 CSS 로 그려요 */
.hd-search-ic, .ssh-ic {
  display: block; width: 15px; height: 15px; position: relative;
  border: 2px solid currentColor; border-radius: 50%;
}
.hd-search-ic::after, .ssh-ic::after {
  content: ''; position: absolute; right: -5px; bottom: -4px;
  width: 7px; height: 2px; border-radius: 2px; background: currentColor;
  transform: rotate(45deg);
}
/* 검색은 레퍼런스처럼 "모달" 이에요 — 뒤는 어둡게 깔리고,
   위에 입력창 하나, 그 아래 칩 + 목록 카드가 떠 있습니다. */
.ssh { position: fixed; inset: 0; z-index: 320; }
.ssh[hidden] { display: none; }
/* ── 등장 모션 ──────────────────────────────────────────
   들어올 땐 길고 부드럽게(expo-out), 나갈 땐 짧고 단호하게.
   패널 전체가 아니라 입력창 → 카드 → 칩 → 목록 순서로 어긋나게 들어와요. */
:root { --ssh-in: cubic-bezier(.16, 1, .3, 1); --ssh-out: cubic-bezier(.4, 0, 1, 1); }

.ssh-scrim {
  position: absolute; inset: 0;
  background: rgba(6, 6, 6, .58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 160ms var(--ssh-out);
}
.ssh.is-open .ssh-scrim { opacity: 1; transition: opacity 260ms var(--ssh-in); }

.ssh-panel {
  position: absolute; left: 12px; right: 12px;
  top: calc(max(env(safe-area-inset-top), 0px) + var(--header-h) + 6px);
  max-height: calc(var(--vvh, 100dvh) - var(--header-h) - 28px);
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
}
.ssh.is-open .ssh-panel { pointer-events: auto; }

/* 입력창 — 검색 버튼(우상단) 쪽에서 자라 나오는 느낌 */
.ssh-panel > .ssh-bar {
  opacity: 0; transform: translateY(-12px) scale(.94); transform-origin: 100% 0;
  transition: opacity 130ms var(--ssh-out), transform 190ms var(--ssh-out);
  will-change: transform, opacity;
}
.ssh.is-open .ssh-panel > .ssh-bar {
  opacity: 1; transform: none;
  transition: opacity 190ms linear, transform 440ms var(--ssh-in);
}

/* 카드 — 입력창보다 60ms 늦게, 조금 더 멀리서 */
.ssh-card {
  opacity: 0; transform: translateY(-22px) scale(.965); transform-origin: 100% 0;
  transition: opacity 120ms var(--ssh-out), transform 180ms var(--ssh-out);
  will-change: transform, opacity;
}
.ssh.is-open .ssh-card {
  opacity: 1; transform: none;
  transition: opacity 220ms linear 55ms, transform 480ms var(--ssh-in) 55ms;
}

/* 칩·목록은 처음 열 때만 순차로 올라와요 (타이핑 중 재렌더에는 안 걸려요) */
@keyframes sshRise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.ssh.is-entering .ssh-chip {
  animation: sshRise 340ms var(--ssh-in) both;
  animation-delay: calc(var(--i, 0) * 20ms + 90ms);
}
.ssh.is-entering .ssh-list li {
  animation: sshRise 380ms var(--ssh-in) both;
  animation-delay: calc(var(--i, 0) * 28ms + 140ms);
}

/* 입력창 — 카드와 떨어진 독립 알약 */
.ssh-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 6px 0 16px;
  border-radius: var(--r-full);
  background: #1c1a19;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .07) inset;
  color: var(--fg-muted);
}
.ssh-input {
  flex: 1; min-width: 0; height: 52px; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--fg-default);
}
.ssh-input::placeholder { color: var(--fg-muted); }
.ssh-input::-webkit-search-cancel-button { display: none; }
.ssh-x {
  flex: 0 0 auto; width: 34px; height: 34px; border: 0; padding: 0;
  background: rgba(255, 255, 255, 0.12); color: var(--fg-default);
  font-size: 12px; line-height: 1; cursor: pointer; border-radius: 50%;
}
.ssh-x[hidden] { display: none; }

/* 결과 카드 — 칩 줄(고정) + 목록(스크롤) */
.ssh-card {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: #171615;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}
.ssh-chips {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 14px 6px;
}
.ssh-chip {
  min-height: 32px; padding: 0 13px;
  border-radius: var(--r-full); border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent; color: var(--fg-muted);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background var(--d3) var(--ease), color var(--d3) var(--ease),
              border-color var(--d3) var(--ease);
}
.ssh-chip[aria-pressed="true"] {
  background: var(--fg-default); border-color: var(--fg-default); color: #171615;
}
.ssh-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 14px;
}
.ssh-hint {
  margin: 12px 4px 4px; font-size: var(--t2, 12px);
  color: var(--fg-faint); font-weight: 600;
}
.ssh-list { list-style: none; margin: 0; padding: 0; }
.ssh-list a {
  display: block; padding: 10px 4px; min-height: 44px;
  text-decoration: none; border-radius: 10px;
}
.ssh-list a:active { background: rgba(255,255,255,.06); }
.ssh-g { display: block; font-size: 11px; color: var(--fg-faint); margin-bottom: 2px; }
.ssh-t { display: block; font-size: 15.5px; font-weight: 700; color: var(--fg-default); }
.ssh-d { display: block; font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
html.ssh-open, html.ssh-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ssh-scrim, .ssh-panel > .ssh-bar, .ssh-card { transition: none; }
  .ssh.is-entering .ssh-chip, .ssh.is-entering .ssh-list li { animation: none; }
  .hd-search .hd-search-ic, .hd-search .hd-search-x { transition: none; }
}

/* ==================== 2026-08-22 문구·구조 개편 ====================
   원칙(추상) → 수업 방식(절차)으로 바뀌면서 생긴 새 블록들이에요. */

/* 첫 화면 보조 줄 — 무엇을 배우는지, 어떻게 다니는지 한 줄씩 */
.hero-meta {
  margin: var(--s5) 0 0; display: flex; flex-direction: column; gap: 4px;
  font-size: var(--t2); line-height: 1.5; color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.hero-meta span:first-child { color: var(--orange-tint); font-weight: 700; }

/* 수업 방식 — 걸음 번호 */
.prin-step {
  margin: 0 0 6px; font-family: var(--anton); font-weight: 400;
  font-size: 13px; letter-spacing: .06em; color: var(--orange);
}
.prin-step::before { content: 'STEP '; opacity: .55; }
/* 네 걸음의 그림판은 카드마다 다른 색면 위에 앉아요 */
.prin-art--live[data-tone] { border-radius: var(--r4); overflow: hidden; }
.prin-art--live[data-tone="orange"] { background: #FB5A1A; }
.prin-art--live[data-tone="mint"]   { background: #BFE8C8; }
.prin-art--live[data-tone="teal"]   { background: #0B5E63; }
.prin-art--live[data-tone="peach"]  { background: #FFB48A; }

/* 수업 방식 4단계 — 네 걸음은 나란히 봐야 순서로 읽혀요.
   예전처럼 세로로 쌓으면 2384px 짜리 스크롤이 되고, 1번과 4번이 한눈에 안 들어옵니다. */
.prin-sec .prin-items {
  max-width: 780px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px 20px;
}
.prin-sec .prin-item { margin-bottom: 0; }
.prin-sec .prin-art { aspect-ratio: 4 / 3; }
.prin-sec .prin-t { margin-top: var(--s5); font-size: 22px; line-height: 30px; }
.prin-sec .prin-d { margin-top: 6px; font-size: var(--t2); line-height: 1.55; }
.prin-sec .prin-link { margin-top: var(--s4); }
@media (max-width: 1099px) {
  .prin-sec .prin-items { max-width: none; }
}
@media (max-width: 767px) {
  .prin-sec .prin-items { grid-template-columns: 1fr 1fr; gap: 22px 10px; }
  .prin-sec .prin-art { aspect-ratio: 1 / 1; }
  .prin-sec .prin-t { font-size: 17px; line-height: 24px; }
  .prin-sec .prin-d { font-size: var(--t1); }
  .prin-sec .prin-step { font-size: 11px; }
}

/* 사건형 프로젝트 설명 */
.case-sec { background: var(--black); }
.case-grid {
  list-style: none; margin: var(--s9) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  counter-reset: caseno;
}
.case-item {
  position: relative; padding: var(--s6);
  border-radius: var(--r4); background: var(--bg-card); border: 1px solid var(--stroke);
  display: flex; flex-direction: column; gap: 6px;
}
.case-item b { font-size: var(--t4); font-weight: 700; color: var(--orange-tint); }
.case-item span { font-size: var(--t2); line-height: 1.55; color: var(--fg-muted); }
.case-ex {
  margin: var(--s6) 0 0; padding: var(--s6) var(--s7);
  border-left: 3px solid var(--orange); background: var(--bg-card);
  border-radius: 0 var(--r4) var(--r4) 0;
}
.case-ex p { margin: 0; font-size: var(--t3); line-height: 1.65; color: var(--fg-default); }

/* 과정별 프로젝트 샘플 */
.samp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: var(--s9);
}
.samp-card {
  position: relative; padding: var(--s7); border-radius: var(--r4);
  background: var(--bg-card); border: 1px solid var(--stroke);
  display: flex; flex-direction: column;
  transition: transform var(--d4) var(--ease-enter), border-color var(--d4) var(--ease);
}
.samp-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: var(--r4) var(--r4) 0 0; background: var(--samp-accent, var(--orange));
}
.samp-card[data-tone="orange"] { --samp-accent: #FB5A1A; }
.samp-card[data-tone="teal"]   { --samp-accent: #2FB3A6; }
.samp-card[data-tone="indigo"] { --samp-accent: #7A78D8; }
.samp-card[data-tone="plum"]   { --samp-accent: #C77BA6; }
.samp-card:hover { transform: translateY(-3px); border-color: var(--samp-accent); }
.samp-stage {
  margin: 0 0 var(--s2); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--samp-accent);
}
.samp-stage span { color: var(--fg-muted); font-weight: 600; margin-left: 6px; }
.samp-title {
  margin: 0 0 var(--s5); font-size: var(--t6); line-height: 1.35;
  font-weight: 700; letter-spacing: -0.01em; color: var(--fg-default);
}
.samp-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; }
.samp-dl dt {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--fg-faint); white-space: nowrap; padding-top: 2px;
}
.samp-dl dd { margin: 0; font-size: var(--t2); line-height: 1.55; color: var(--fg-muted); }
.samp-go {
  margin-top: auto; padding-top: var(--s6);
  font-size: var(--t2); font-weight: 700; color: var(--samp-accent); text-decoration: none;
}
.samp-go::after { content: ' ›'; }
.samp-more { margin: var(--s6) 0 0; font-size: var(--t2); color: var(--fg-muted); }
.samp-more a { color: var(--orange-tint); font-weight: 700; }

/* 새 섹션들은 자기 배경을 명시해요 — 위쪽 sticky 커튼이 비쳐 보이던 자리 */
#courses, .mem-sec, .arti-sec, .case-sec { position: relative; z-index: 1; background: var(--black); }

/* 만드는 사람 — 지금은 한 분이라 가로로 넓은 편집형 한 장.
   인물 사진은 실제 촬영본만 씁니다(생성 이미지 금지). 없는 동안은 이니셜을 써요. */
.mem-card {
  display: flex; gap: var(--s8); align-items: flex-start;
  padding: var(--s8); margin-top: var(--head-gap);
  border-radius: var(--r4); background: var(--bg-card); border: 1px solid var(--stroke);
}
.mem-photo {
  flex: 0 0 132px; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, #4A2410, #241206 70%);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.10); overflow: hidden;
}
.mem-photo span { font-size: 46px; font-weight: 700; color: var(--orange-tint); letter-spacing: -.02em; }
.mem-photo img { width: 100%; height: 100%; object-fit: cover; }
.mem-body { min-width: 0; flex: 1; }
.mem-name { margin: 4px 0 4px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--fg-default); }
.mem-role { margin: 0 0 var(--s5); font-size: 13px; font-weight: 700; color: var(--orange); }
.mem-tags { list-style: none; margin: 0 0 var(--s5); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mem-tags li {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--fg-muted); background: rgba(255,255,255,.05); border: 1px solid var(--stroke);
}
.mem-do  { margin: 0 0 8px; font-size: var(--t3); line-height: 1.6; color: var(--fg-muted); }
.mem-say { margin: 0; font-size: var(--t3); line-height: 1.6; color: var(--fg-default); }
.mem-say::before { content: '“'; color: var(--orange); } .mem-say::after { content: '”'; color: var(--orange); }
@media (max-width: 767px) {
  .mem-card { flex-direction: column; gap: var(--s6); padding: var(--s6); }
  .mem-photo { flex: 0 0 88px; width: 88px; height: 88px; }
  .mem-photo span { font-size: 32px; }
  .mem-name { font-size: 21px; }
  .mem-do, .mem-say { font-size: var(--t2); }
}

/* 아티클 */
.arti-cats {
  list-style: none; margin: var(--s9) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.arti-cats a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s6);
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--stroke);
  font-size: var(--t2); font-weight: 600; color: var(--fg-default); text-decoration: none;
  transition: border-color var(--d3) var(--ease), color var(--d3) var(--ease);
}
.arti-cats a:hover { border-color: var(--orange); color: var(--orange-tint); }
.arti-go { margin: var(--s8) 0 0; }

/* 태블릿 이하 */
@media (max-width: 1099px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hero-meta { font-size: var(--t1); }
  .case-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .case-item { padding: var(--s5); }
  .case-ex { padding: var(--s5); }
  .case-ex p { font-size: var(--t2); }
  .samp-grid { grid-template-columns: 1fr; gap: 12px; }
  .samp-card { padding: var(--s6); }
  .samp-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .samp-dl dt { padding-top: 8px; }
  .mem-grid { grid-template-columns: 1fr; }
  .arti-cats a { min-height: 40px; padding: 0 var(--s5); font-size: var(--t1); }
}
@media (prefers-reduced-motion: reduce) {
  .samp-card { transition: none; }
  .samp-card:hover { transform: none; }
}

/* ==================== 네이버 후기 ====================
   검은 판 위로 흰 카드가 천천히 흘러가요. 두 줄이 반대 방향 · 다른 속도로 움직입니다.
   원문은 손대지 않아요 — 맞춤법도 이모지도 그대로. 닉네임만 가립니다. */
.rev-sec { position: relative; z-index: 1; background: var(--black); overflow: hidden; }
.rev-rows { display: grid; gap: 14px; margin-top: var(--head-gap); }
.rev-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-track {
  display: flex; gap: 14px; width: max-content;
  animation: rev-l 78s linear infinite;
}
.rev-row--rev .rev-track { animation-name: rev-r; animation-duration: 96s; }  /* 줄마다 속도를 달리해요 */
.rev-row:hover .rev-track, .rev-row:focus-within .rev-track { animation-play-state: paused; }
@keyframes rev-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rev-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.rev-card {
  flex: 0 0 auto; width: 340px; min-height: 156px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 22px 16px; border-radius: 16px;
  background: #F4F1EC; color: #201408; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
  transition: transform var(--d4) var(--ease-enter);
}
.rev-card:hover { transform: translateY(-3px); }
.rev-q {
  margin: 0 0 14px; font-size: 14px; line-height: 1.62;
  color: #2A1A0E; word-break: keep-all;
}
.rev-q::before { content: '“'; color: var(--orange); font-weight: 700; margin-right: 2px; }
.rev-m { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rev-m b { font-size: 12.5px; font-weight: 700; color: #4A2A14; }
.rev-m span { font-size: 11.5px; color: rgba(32,20,12,.56); }
.rev-more { margin: var(--s8) 0 0; font-size: var(--t2); }
.rev-more a { color: var(--orange-tint); font-weight: 700; text-decoration: none; }

@media (max-width: 767px) {
  /* 모바일은 손가락으로 직접 넘겨요 */
  .rev-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; padding-left: var(--gutter); }
  .rev-row::-webkit-scrollbar { display: none; }
  .rev-track { animation: none !important; gap: 10px; padding-right: var(--gutter); }
  .rev-row--rev { display: none; }        /* 두 줄은 손가락으로 넘기기엔 많아요 */
  .rev-card { width: 268px; min-height: 150px; scroll-snap-align: start; padding: 16px 18px 14px; }
  .rev-q { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rev-track { animation: none !important; }
  .rev-row { overflow-x: auto; }
  .rev-card { transition: none; }
  .rev-card:hover { transform: none; }
}

/* ==================== 수업 밖 ====================
   "주 1회 120분"만 보면 주 1회짜리 학원으로 읽혀요.
   정기상담·학습 사이트·실습실은 그 판단을 뒤집는 사실이라 본문으로 올렸습니다. */
.open-sec { position: relative; z-index: 1; background: var(--black); }
.open-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: var(--head-gap);
}
.open-item {
  padding: var(--s7); border-radius: var(--r4);
  background: var(--bg-card); border: 1px solid var(--stroke);
  display: flex; flex-direction: column;
}
.open-k {
  margin: 0 0 var(--s3); font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--orange); font-variant-numeric: tabular-nums;
}
.open-t {
  margin: 0 0 var(--s3); font-size: var(--t6); line-height: 1.3;
  font-weight: 700; letter-spacing: -0.01em; color: var(--fg-default);
}
.open-d { margin: 0; font-size: var(--t2); line-height: 1.6; color: var(--fg-muted); }
.open-go {
  margin-top: auto; padding-top: var(--s5);
  font-size: var(--t2); font-weight: 700; color: var(--orange-tint); text-decoration: none;
}
.open-go::after { content: ' ›'; }
@media (max-width: 1099px) { .open-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .open-grid { grid-template-columns: 1fr; gap: 10px; }
  .open-item { padding: var(--s6); }
  .open-t { font-size: var(--t5); }
}