/* ============================================================================
   Landing = FDE 스페이스 홈 (라이트 프리미엄 · 각진 프로페셔널 · non-AI)
   - 프로그램(Onboarding/Session)·그룹(Stage/Topic)은 이 페이지의 in-page 섹션.
     별도 페이지로 점프하지 않는다(설계 §5). 강의 링크는 P4 에서 실데이터로.
   - 히어로 배경 = CSS(=P2 three.js 폴백). 콘텐츠 실데이터는 P4.
   ============================================================================ */
body.site {
  /* 페이지 공통 베일 — 뷰포트 중앙 기준 좌우 페이드. 중앙 ±600px(콘텐츠 폭)는 페이퍼(가독),
     거기서 좌우 바깥으로 갈수록 투명 → 와이드일수록 좌우 여백에 흐름이 넓게 노출.
     calc(50%±600px)라 어느 해상도든 콘텐츠는 덮고, 폭이 좁으면 자동으로 solid(페이드 안 보임).
     세 섹션(히어로·본문·푸터) 전폭 배경으로 공유. 여기 한 곳만 바꾸면 전체 반영. */
  --veil: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 94%, transparent) calc(50% - min(600px, 41vw)),
    color-mix(in srgb, var(--paper) 94%, transparent) calc(50% + min(600px, 41vw)),
    transparent 100%);
  /* 공유 spacing 토큰 — 컴포넌트 타입별 강박적 일관성(모든 섹션/카드/그리드 동일). 반응형은 이 토큰만 override. */
  --section-y: var(--sp-6);   /* 모든 섹션 상하 패딩 (32px). 섹션 사이 = 32+32=64, 정중앙 구분선 */
  --card-pad:  var(--sp-6);   /* 모든 카드 내부 패딩 (32px) */
  --gap:       var(--sp-5);   /* 모든 그리드 간격 (24px) */
  --head-gap:  var(--sp-6);   /* 섹션 헤드 → 콘텐츠 (32px) */
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  word-break: keep-all;   /* 한국어: 단어 중간이 아니라 어절(공백) 경계에서만 줄바꿈 → 문장단위 가독 */
  overflow-wrap: break-word;   /* 예외적으로 아주 긴 토큰(URL 등)은 넘치지 않게만 */
}
/* 헤딩은 줄 균형(balance), 본문은 고아줄 방지(pretty). 미지원 브라우저는 무시(자연 폴백). */
.hero h1, .section__head h2, .program h3, .ethos__k { text-wrap: balance; }
.hero h1, .section__head h2, .program h3 { font-family: var(--font-display); }   /* 제목=디스플레이(Gowun Batang 세리프) */
/* [임시] 제목 폰트 세트 프리뷰(나브바 아래 우측 고정) — 폰트 확정 후 이 블록 + partials/fontpick.html + site_base include 제거 */
/* [임시] 폰트/본문너비 편의 위젯 — 나브바 아래 우측 고정 스택 */
.reading-tools { position: fixed; top: calc(var(--nav-h, 60px) + 10px); right: 14px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: var(--rt-w, 200px); }
.fontpick { max-width: 60vw; font: 500 var(--t-xs)/1 var(--font-mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 7px 10px; box-shadow: var(--shadow-md); cursor: pointer; }
/* 본문 너비 스위치(넓게/좁게) — 기본 숨김, 레슨 페이지에서만 lesson.css 가 표시 */
.widthpick { display: none; gap: 2px; padding: 3px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.widthpick__btn { flex: 1; text-align: center; border: none; background: transparent; cursor: pointer; border-radius: calc(var(--r-sm) - 2px);
  padding: 4px 11px; font: 600 var(--t-xs)/1 var(--font-mono); color: var(--muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.widthpick__btn:hover { color: var(--ink-2); }
.widthpick__btn.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.hero__lead, .program__lead, .ethos__v, .section__head { text-wrap: pretty; }
/* 링크 리셋 — 밑줄만 제거. 색은 각 컴포넌트(.btn·nav)가 스스로 정한다.
   (blanket color 리셋은 명시도로 nav/.btn 색을 덮는 버그 유발 → 두지 않음.
    P4 에서 강의 링크 추가 시 해당 링크에 색을 명시.) */
body.site a { text-decoration: none; }
body.site main a:not(.btn) { color: inherit; }  /* 본문 링크만 잉크 상속(nav 제외) */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* 콘텐츠는 고정 배경(.page-bg) 위에 놓인다.
   veil(연속 배경)을 부모 main 에 올려 섹션은 투명 → 섹션 간 간격은 마진으로 자유롭게(패딩 더블 방지). */
body.site > main {
  position: relative; z-index: 1;
  background: var(--veil);
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);                    /* fixed nav 클리어런스는 부모가 담당 */
  min-height: 100vh; min-height: 100dvh;        /* 콘텐츠 짧아도 veil 이 뷰포트를 채우도록(하단 잘림 방지) */
}
/* 모든 섹션 = 동일한 상하 패딩(대칭), 섹션 사이 = 구분선 하나. 단순·일관, 예외 없음. */
body.site > main > * { padding-block: var(--section-y); }
body.site > main > * + * { border-top: 1px solid var(--line); }
body.site > main > .site-footer { margin-top: auto; }   /* 짧은 페이지: footer 를 하단에 밀어 veil 로 채움 */

/* --- Hero --- */
.hero {
  position: relative;
  min-height: min(74vh, 660px);
  display: flex; align-items: center;
  overflow: hidden;   /* 상하 패딩은 main > * 공통 규칙, nav 클리어런스는 main padding-top */
}
/* 배경 플레이스홀더(= WebGL 폴백). P2 에서 canvas 가 이 위를 덮는다. 기술적 그리드 중심, 색 글로우는 절제. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 70% at 88% 0%, var(--brand-wash), transparent 55%),
    var(--paper);
}
.hero__bg::after {  /* 얇은 그리드 — 엔지니어링 톤 */
  content: ""; position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 42%, #000, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 42%, #000, transparent 100%);
}
/* three.js 페이지 고정 배경 — 스크롤해도 화면에 남고 콘텐츠가 그 위로 흐른다. */
.page-bg { position: fixed; inset: 0; z-index: 0; display: block; width: 100vw; height: 100vh; pointer-events: none; }
.webgl .hero__bg { display: none; }  /* WebGL 활성 시 히어로 CSS 폴백 숨김(고정 배경이 대신) */

.hero .wrap { position: relative; z-index: 1; text-align: center; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font: 600 var(--t-sm)/1 var(--font-mono); letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; margin-bottom: var(--sp-4);
}
.hero__eyebrow::before {  /* 사각 마커(글로우 없음) */
  content: ""; width: 8px; height: 8px; background: var(--brand);
}
.hero h1 {
  margin: 0 auto var(--sp-4); max-width: 20ch;   /* auto = 중앙 정렬 */
  font-size: var(--t-display); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); font-weight: 720;
}
.hero__lead {
  margin: 0 auto var(--sp-5); max-width: 52ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); color: var(--ink-2); line-height: 1.5;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
/* 전과정 다운로드가 여러 개면 프로그램별 한 행으로 세로 스택(온보딩 행 위, 세션 행 아래).
   행을 같은 폭으로 늘이고(stretch) 각 버튼을 flex:1 로 → 네 버튼 너비가 모두 동일. */
.hero__cta--rows { flex-direction: column; align-items: stretch; }
.hero__cta-row { display: flex; gap: var(--sp-3); }
.hero__cta-row .btn { flex: 1; }
/* 섹션 색(--pc: 온보딩=브랜드, 세션=브랜드-2)으로: HTML=채움, PDF=채움 없이 같은 색 보더. */
.hero__cta-row .btn--solid { --btn-bg: var(--pc); --btn-fg: #fff; --btn-line: var(--pc); }
.hero__cta-row .btn--solid:hover { --btn-bg: var(--pc); }
.hero__cta-row .btn--ghost { --btn-bg: transparent; --btn-fg: var(--pc); --btn-line: var(--pc); }
.hero__cta-row .btn--ghost:hover { --btn-bg: var(--pc-wash); }
/* 히어로/그룹헤더 버튼: 텍스트 길이와 무관하게 동일 폭(균일). 짧은 라벨(FDE)도 긴 라벨과 같은 크기. */
.hero__cta .btn { height: var(--control-h-lg); padding: 0 var(--sp-6); min-width: 9.5rem; justify-content: center; }
/* coming_soon 헤더 버튼: 위치 유지·비활성. hover 는 툴팁(data-tip) 위해 허용하되 배경 변화는 중화(래퍼 없이 flex 유지) */
.hero__cta .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.hero__cta .btn--solid[aria-disabled="true"]:hover { --btn-bg: var(--ink); }
.hero__cta .btn--ghost[aria-disabled="true"]:hover { --btn-bg: transparent; }

/* depth-1 그룹 페이지 헤더 섹션(group-hero) — 식별(kicker) + "어디서 시작할까요?"(h2) + sub + 진입 버튼 + meta.
   좌측 정렬(에디토리얼, 카드 섹션과 별도·구분선). 카드 섹션(programs-section)은 카드만. */
.group-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.group-hero .section__head { margin-bottom: var(--sp-4); }    /* 텍스트 → meta */
.group-hero .hero__meta { margin-top: 0; }
@media (max-width: 640px) { .group-hero .hero__cta { width: 100%; } .group-hero .hero__cta .btn { flex: 1; } }
.hero__meta { margin-top: var(--sp-4); font: 500 var(--t-sm)/1 var(--font-mono); color: var(--faint); letter-spacing: .01em; }

/* --- Programs section (스페이스 홈 본문) — 세로 간격은 owl 마진, 배경은 main veil --- */
.section__head { max-width: 62ch; margin-bottom: var(--head-gap); }
.section__kicker {
  font: 600 var(--t-sm)/1 var(--font-mono); letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase; margin-bottom: var(--sp-3);
}
.section__head h2 {
  margin: 0; font-size: var(--t-h2); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); font-weight: 680;
}
.section__sub { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--t-sm); }
.section__sub b { color: var(--ink-2); font-weight: 700; }

/* (스크롤 스냅 제거 — proximity 스냅이 스크롤 멈출 때 자동으로 당겨 "자꾸 조금 움직임" 유발. §15-4 롤백) */

.programs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.program {
  --pc: var(--brand); --pc-wash: var(--brand-wash); --pc-line: var(--brand-line);
  display: flex; flex-direction: column;                  /* CTA 를 카드 하단에 정렬 */
  scroll-margin-top: calc(var(--nav-h) + var(--sp-5));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--card-pad);   /* 카드 공통 패딩 */
}
.program--onboarding { --pc: var(--brand);   --pc-wash: var(--brand-wash);   --pc-line: var(--brand-line); }
.program--session { --pc: var(--brand-2); --pc-wash: var(--brand-2-wash); --pc-line: var(--brand-2-line); }
/* 그룹(직무) 카드 액센트 4색 로테이션 — 그룹 추가 시 index.html 의 {% cycle %} 로 c1→c4 순환 */
.program--c1 { --pc: var(--brand);   --pc-wash: var(--brand-wash);   --pc-line: var(--brand-line); }
.program--c2 { --pc: var(--brand-2); --pc-wash: var(--brand-2-wash); --pc-line: var(--brand-2-line); }
.program--c3 { --pc: var(--brand-3); --pc-wash: var(--brand-3-wash); --pc-line: var(--brand-3-line); }
.program--c4 { --pc: var(--brand-4); --pc-wash: var(--brand-4-wash); --pc-line: var(--brand-4-line); }
.program--ecosystem { --pc: var(--brand); --pc-wash: var(--brand-wash); --pc-line: var(--brand-line); }   /* 제품(외부 문서) 액센트 */
.program:hover { border-color: var(--pc-line); box-shadow: var(--shadow-md); }
.program { transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.program__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.program__count { font: 600 var(--t-xs)/1 var(--font-mono); color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.program__tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc); border: 1px solid var(--pc-line); background: var(--pc-wash);
  padding: 5px 9px; border-radius: var(--r-xs);
}
.program h3 {
  margin: 0 0 var(--sp-2); font-size: 1.625rem; letter-spacing: var(--tracking-tight); font-weight: 700;
}
.program__lead { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--t-sm); }

/* --- 프로그램 선택 카드 (온보딩/세션 갈림길) --- */
.program__for {
  margin: 0 0 var(--sp-5); color: var(--ink-2); font-size: var(--t-sm); font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.program__for::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pc);
}
/* 제목(좌) + CTA(우 상단) — CTA 를 진행현황 아래 대신 제목 옆 우측 여백에. 태그라인·대상은 전체폭 유지 */
.program__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.program__intro h3 { margin-bottom: 0; }
.program__actions { display: flex; flex-direction: column; gap: var(--sp-2); flex: none; }   /* CTA + '목차 보기' stacked(우측) */
.program__actions .program__cta { align-self: stretch; }   /* 컬럼 폭에 맞춰 두 버튼 동일 너비 */
.program__meter { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.program__meter .program__bar { flex: 1; margin: 0; }
.program__prog { font: 600 var(--t-xs)/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.program__cta { flex: none; align-self: flex-start; white-space: nowrap; }   /* 카드 우측 상단(제목 옆) */

/* 챕터 아코디언 (선택 카드 하단) — 기본 접힘, 클릭 시 강의 목록 펼침 */
.chap-acc { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--line); }
.chap { border-bottom: 1px solid var(--line); }
.chap:last-child { border-bottom: none; }
.chap__head {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 9px 2px; cursor: pointer;
  position: relative; z-index: 0;
  background: none; border: none; text-align: left; color: var(--ink-2);
  font: 600 var(--t-sm)/1.3 var(--font-sans); letter-spacing: -0.01em;
  transition: color var(--dur-1) var(--ease);
}
/* hover 행 하이라이트 — 카드 액센트 워시를 좌우로 살짝 블리드(레이아웃 시프트 없음) */
.chap__head::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -8px;
  border-radius: var(--r-sm); background: var(--pc-wash);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.chap__head:hover { color: var(--ink); }
.chap__head:hover:not([disabled])::before { opacity: 1; }
.chap__head[disabled] { cursor: default; color: var(--faint); }
.chap__chev { flex: none; color: var(--faint); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.chap.is-open .chap__chev { transform: rotate(90deg); }
.chap.is-empty .chap__chev { visibility: hidden; }
.chap__head:hover:not([disabled]) .chap__chev { color: var(--pc); }
.chap__num { flex: none; font: 600 var(--t-xs)/1 var(--font-mono); color: var(--faint); letter-spacing: .02em; }
.chap.is-open .chap__num, .chap__head:hover:not([disabled]) .chap__num { color: var(--pc); }
.chap__name { flex: 1; min-width: 0; }
.chap__count { flex: none; font: 600 var(--t-xs)/1 var(--font-mono); color: var(--faint); white-space: nowrap; }
.chap__lessons { list-style: none; margin: 2px 0 var(--sp-3); padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 7px; }
.chap:not(.is-open) .chap__lessons { display: none; }
/* 레슨 행 hover 컬러 워시 — li 에 걸어 고정(글자만 슬라이드). 카드 액센트 색 연동 */
.chap__lessons > li { position: relative; z-index: 0; }
.chap__lessons > li::before {
  content: ""; position: absolute; z-index: -1; inset: -2px -8px;
  border-radius: var(--r-sm); background: var(--pc-wash);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.chap__lessons > li:hover::before { opacity: 1; }
.chap__lesson { display: inline-block; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.chap__lesson:hover { color: var(--pc); transform: translateX(3px); }   /* 링크 → 우측 슬라이드 + 액센트 */
.chap__lesson.is-done { color: var(--faint); }
.chap__lesson.is-done:hover { color: var(--ink-2); }                    /* 완료 강의도 hover 시 슬라이드 + 살짝 밝게 */
.chap__lesson.is-done::before { content: "✓ "; color: var(--brand-2); font-weight: 700; }
.chap__lesson-num { color: var(--faint); font: 600 var(--t-xs)/1 var(--font-mono); margin-right: 7px; }   /* 레슨 순번 접두어(챕터별) */

/* DOCS(챕터) 단위 문서 다운로드 — 챕터 헤더 '행 안쪽'(펼치지 않아도 항상 노출). --pc = 섹션 액센트.
   행 전체를 헤더 박스로: hover 워시·정렬을 .chap__row 가 갖고, 버튼은 자체 워시 제거 → 다운로드가 헤더 안에 들어옴. */
.chap__row { display: flex; align-items: center; gap: var(--sp-3); position: relative; z-index: 0; }
.chap__row::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -8px;
  border-radius: var(--r-sm); background: var(--pc-wash);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.chap__row:hover::before { opacity: 1; }
.chap__row .chap__head { flex: 1; width: auto; }
.chap__row .chap__head::before { display: none; }   /* 개별 버튼 워시 대신 행 전체 워시 사용 */
.chap__dl { flex: none; display: flex; align-items: center; gap: 6px; }
body.site main a.chap__dl-btn { font: 700 var(--t-xs)/1 var(--font-mono); color: var(--pc); border: 1px solid var(--pc-line); border-radius: var(--r-sm); padding: 5px 9px; letter-spacing: .05em; text-decoration: none; transition: background var(--dur-1) var(--ease); }
body.site main a.chap__dl-btn:hover { background: var(--pc-wash); color: var(--pc); }

/* 그룹 카드: '전체 목차 →' 링크(아코디언 아래) — 우측 정렬 + 밑줄, 카드 액센트색.
   블랭킷 'body.site main a'(color:inherit·text-decoration:none)를 이기려 동급+후순위 명시도 사용. */
.program__toc { align-self: flex-end; margin-top: var(--sp-4); font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .02em; text-underline-offset: 3px; }
body.site main a.program__toc { color: var(--pc); text-decoration: underline; }
body.site main a.program__toc:hover { color: var(--ink); }

/* 프로그램 목차 페이지(/{group}/{program}/) — 헤더 + 챕터 전체(펼침) */
.prog-back { display: inline-block; margin-bottom: var(--sp-3); color: var(--muted); font: 600 var(--t-sm)/1 var(--font-sans); }
.prog-back:hover { color: var(--ink); }
/* 프로그램 전환 세그먼트 탭(온보딩↔세션) — 챕터 목록 위 중앙 밴드 */
.prog-switch-bar { display: flex; justify-content: center; margin-bottom: var(--sp-6); }
.prog-switch { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
/* 탭 너비 일관화: min-width 로 짧은 라벨(온보딩·세션)을 같은 너비로, 텍스트가 길면 콘텐츠에 맞춰 확장(가운데 정렬). */
body.site main a.prog-switch__tab { min-width: 5.5em; text-align: center; padding: 6px 15px; border-radius: calc(var(--r-md) - 3px); font: 600 var(--t-sm)/1 var(--font-sans); color: var(--muted); text-decoration: none; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
body.site main a.prog-switch__tab:hover { color: var(--ink); }
body.site main a.prog-switch__tab.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.group-hero__text .program__for { margin: var(--sp-2) 0 0; }
.group-hero__text .program__meter { max-width: 440px; margin-top: var(--sp-5); }   /* 헤더 좌측 컬럼(진도바) — 버튼은 group-hero__row 우측 하단 */
.prog-toc .chap-acc { margin-top: 0; border-top: none; padding-top: 0; }
/* 비활성 CTA(카드): 헤더 버튼과 동일 방식 — hover 허용(리프트+data-tip 툴팁) + 배경 변화만 중화. span 이라 클릭 무효 */
.program__actions .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.program__actions .btn--solid[aria-disabled="true"]:hover { --btn-bg: var(--ink); }
.program__actions .btn--ghost[aria-disabled="true"]:hover { --btn-bg: transparent; }

/* coming-soon 그룹 페이지(엔지니어) 카드: FDE 와 평행 구조 —
   CTA 는 비활성 버튼(hover 시 coming soon 툴팁), 진행바는 FDE 와 동일 컴포넌트(0/0),
   아코디언 자리엔 coming soon. 카드 전체를 살짝 디밍. 랜딩(/) 디렉토리 카드는 .program__soon 배지. */
.program.is-soon { opacity: .9; }
.program.is-soon .program__for { color: var(--muted); }
/* CSS 툴팁 — data-tip 값을 hover 시 위쪽에 즉시 표시(네이티브 title 딜레이/미표시 회피). 재사용 가능. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 4px);
  padding: 5px 9px; border-radius: var(--r-xs); z-index: 10;
  background: var(--ink); color: var(--paper);
  font: 600 var(--t-xs)/1 var(--font-sans); letter-spacing: 0; text-transform: none;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
.chap-acc--soon {                                               /* 아코디언 자리표시 — coming soon */
  margin-top: var(--sp-5); padding: var(--sp-5) 0; border-top: 1px solid var(--line);
  text-align: center; color: var(--muted);
  font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.program__soon {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--sp-4);
  font: 600 var(--t-xs)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
}

/* 프로그램 진도 바 (선택 카드 — .program__meter 안) */
.program__bar { height: 4px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; }
.program__bar > span { display: block; height: 100%; background: var(--pc, var(--brand)); border-radius: inherit; transition: width var(--dur-3) var(--ease); }

/* --- Ethos strip (운영 원칙) — 히어로 바로 아래 상단 콘텐츠. 카드 없이 가벼운 3열 스트립(하단 footer 와 혼동 원천 차단) --- */
.ethos__kicker {
  font: 600 var(--t-sm)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--sp-5);
}
.ethos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ethos__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.ethos__item::before {                 /* 컬러 액센트 바 — 스캔 포인트 */
  content: ""; width: 28px; height: 3px; border-radius: 2px; margin-bottom: var(--sp-3);
  background: var(--brand);
}
.ethos__item:nth-child(2)::before { background: var(--ink); }
.ethos__item:nth-child(3)::before { background: var(--brand-2); }
.ethos__k { font: 700 1.125rem/1.25 var(--font-sans); letter-spacing: var(--tracking-tight); }
.ethos__v { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }

/* --- Footer — 상단행(브랜드+내비) / 베이스라인(저작권+메타). 상하 패딩·구분선은 main 공통 규칙 --- */
.site-footer { color: var(--muted); font-size: var(--t-sm); }
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--sp-6); flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer__logo {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--ink); font-weight: 700; letter-spacing: var(--tracking-tight); font-size: 1rem;
}
.footer__mark { display: inline-flex; color: var(--ink); }
.footer__mark svg { display: block; }
.footer__tagline { margin: 0; color: var(--muted); font-size: var(--t-sm); }
.footer__nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer__nav a { color: var(--ink-2); font-weight: 500; transition: color var(--dur-1) var(--ease); }
.footer__nav a:hover { color: var(--ink); }
.footer__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.footer__base {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font: 500 var(--t-xs)/1.4 var(--font-mono); color: var(--faint);
}

/* --- Responsive (spacing 토큰만 override → 전 컴포넌트가 일관되게 자동 축소) --- */
@media (max-width: 860px) {
  .programs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body.site { --section-y: var(--sp-6); --card-pad: var(--sp-5); --head-gap: var(--sp-5); }
  .hero { min-height: auto; }
  .ethos__grid { grid-template-columns: 1fr; }
}