/* 홍시 AI 학교 — 유일한 스타일 파일
   토큰 3층: ①당근 디자인 시스템 원시값 ②홍시 자산 ③시맨틱 별칭.
   컴포넌트는 ③만 참조한다. */

:root {
  /* ① 당근 디자인 시스템 원시값 (getdesign.kr 당근 항목, 2026-08-22 판, 원문 그대로) */
  --k-gray-00: #ffffff;
  --k-gray-100: #f7f8f9;
  --k-gray-200: #f3f4f5;
  --k-gray-300: #eeeff1;
  --k-gray-400: #dcdee3;
  --k-gray-500: #d1d3d8;   /* 글자에 쓰지 않는다 */
  --k-gray-800: #555d6d;
  --k-gray-900: #2a3038;
  --k-gray-1000: #1a1c20;
  --k-t6: 18px;  --k-t6-lh: 24px;
  --k-t7: 20px;  --k-t7-lh: 27px;
  --k-t8: 22px;  --k-t8-lh: 30px;
  --k-t9: 24px;  --k-t9-lh: 32px;
  --k-t11: 28px; --k-t11-lh: 38px;
  --k-t12: 32px; --k-t12-lh: 42px;
  --k-t13: 40px; --k-t13-lh: 52px;
  --k-t14: 48px; --k-t14-lh: 60px;
  --k-x1: 4px; --k-x2: 8px; --k-x3: 12px; --k-x4: 16px; --k-x5: 20px;
  --k-x6: 24px; --k-x8: 32px; --k-x10: 40px; --k-x12: 48px; --k-x14: 56px; --k-x16: 64px;
  --k-r2: 8px; --k-r3: 12px; --k-r4: 16px; --k-r5: 20px; --k-full: 9999px;
  --k-s2: 0px 2px 10px 0px oklch(0 0 0 / 0.102);
  --k-d3: 150ms;
  --k-easing: cubic-bezier(0.35, 0, 0.35, 1);
  --k-content-max: 1040px;

  /* ② 홍시 자산 (교재 6종 공통 토큰) */
  --paper: #FAF7F0;
  --brand: #E8590C;
  --brand-soft: #FFF1E6;
  --hl: #FFE9A8;
  --leaf: #1E7A4E;
  --brand-deep: #C94A07;   /* 익은 홍시 — 흰 글자와 4.7:1, 주 버튼 채움 */
  --brand-deeper: #B84205; /* 주 버튼 hover */
  --brand-mid: #F0915A;    /* 그래프 두 번째 단계 — 막대 배경 전용, 글자에 쓰지 않는다 */
  --danger: #8B1A1A;       /* 어드민 경고·삭제 (흰 바탕 8:1) */
  --link: #174A8C;         /* 링크 파랑 — 아이보리 위 8.2:1 */

  /* ③ 시맨틱 별칭 — 컴포넌트는 여기만 본다 */
  --bg: var(--paper);
  --surface: var(--k-gray-00);
  --surface-fill: var(--k-gray-200);
  --surface-accent: var(--brand-soft);
  --text: var(--k-gray-900);
  --text-2: var(--k-gray-800);
  --text-inverse: var(--k-gray-00);
  --border: var(--k-gray-400);
  --primary: var(--brand-deep);
  --accent: var(--brand);
  --focus: var(--k-gray-900);
  /* Pretendard(OFL 1.1)를 저장소에 함께 두고 쓴다. 내려받기 전·실패 시에는 뒤의 기기 기본 글씨체 */
  --font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  /* 모바일은 시니어 사용자가 확대하지 않아도 읽히도록 본문 22px·보조 글 20px로 시작한다. */
  --font-body: var(--k-t8);
  --font-small: var(--k-t7);
  --lh-body: 1.65;
  --radius-card: var(--k-r4);
  --radius-panel: var(--k-r5);
  --radius-input: var(--k-r3);
  --gutter: var(--k-x4);
  --measure: 34em;
  /* 크기 토큰 — 시니어 규칙 숫자를 이름으로 고정 (2026-09-09 디자인 시스템 점검) */
  --tap-min: 48px;         /* 누르는 영역 최소 (링크·칩·목록 행) */
  --btn-h: 56px;           /* 주 버튼 높이 */
  --row-h: 72px;           /* 데스크톱 메뉴·목록 행 */
  --icon-sm: 20px; --icon-md: 24px; --icon-lg: 28px; --icon-xl: 32px; --icon-2xl: 40px;
  --line-1: 1px; --line-2: 2px; --focus-w: 3px;
  --primary-hover: var(--brand-deeper);
  /* 그래프 — 막대 배경 전용 (글자색으로 쓰지 않는다) */
  --chart-1: var(--brand);
  --chart-2: var(--brand-mid);
  --chart-track: var(--k-gray-300);
}

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(232, 89, 12, 0.18); }  /* 손가락으로 누를 때 번쩍임을 홍시 톤으로 */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family);
  font-size: var(--font-body);
  line-height: var(--lh-body);
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}
strong { font-weight: 700; }
/* 본문 속 글자 링크: 줄 배치는 그대로 두고 누르는 영역만 48px 이상으로 */
main p > a:not(.btn), .site-footer p > a { padding: 13px 0; }
main p > a:not(.btn):only-child { display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0; }
mark { background: var(--hl); color: inherit; padding: 0 0.15em; }
small { font-size: var(--font-small); }

:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--k-x1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.container {
  width: 100%;
  max-width: var(--k-content-max);
  margin: 0 auto;
  /* 노치·가로 모드: 기기 안전 영역이 여백보다 크면 그만큼 밀어낸다 */
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.prose { max-width: var(--measure); }
/* 「왜 AI를 가르치나」 문단 전용. 2026-09-11부터 문장마다 <br>로 줄을 끊는데,
   34em(680px)에서는 긴 문장이 또 접혀 문장 경계가 흐려진다. 그래서 폭을 유지한다
   (2026-09-10 사용자 지시로 넓혔던 값). 줄이 길어지는 만큼 읽기는 조금 불리하므로 다른 본문에는 쓰지 않는다 */
.prose--wide { max-width: 41em; }
.prose p + p { margin-top: var(--k-x4); }
.skip-link {
  position: absolute;
  left: var(--k-x4);
  top: -100px;
  z-index: 100;
  padding: var(--k-x3) var(--k-x5);
  background: var(--text);
  color: var(--text-inverse);
  border-radius: var(--k-full);
  font-weight: 700;
}
.skip-link:focus { top: var(--k-x3); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 글자 ---------- */
/* 마지막 줄에 한 낱말만 떨어지는 것을 막는다(text-wrap: pretty). 제목은 줄 길이를 고르게(balance).
   지원하지 않는 브라우저는 지금까지와 똑같이 보인다 */
p, li, dd, dt, address, figcaption, .list-detail, .lead { text-wrap: pretty; }
h1, h2, h3, .h1, .h2, .h3, .list-title, .class-title, .step-title { text-wrap: balance; }
.h1, .h2, .h3, .hero-title { text-wrap: balance; }
.h1 { font-size: var(--k-t13); line-height: 1.25; font-weight: 700; }
.h2 { font-size: var(--k-t11); line-height: 1.3; font-weight: 700; }
.h3 { font-size: var(--k-t9); line-height: 1.35; font-weight: 700; }
.lead { font-size: var(--k-t8); line-height: 1.55; }
.muted { color: var(--text-2); }
.small { font-size: var(--font-small); line-height: 1.5; }

/* ---------- 헤더 ---------- */
.site-header {
  background: var(--surface);
  border-bottom: var(--line-1) solid var(--border);
}
.site-header .container {
  display: flex;
  flex-direction: column;
  gap: var(--k-x2);               /* 브랜드 행 ↔ 메뉴 행: 누르는 것끼리 8px */
  padding-top: var(--k-x2);       /* 12→8: 320×568에서 헤더가 첫 화면의 25%를 넘지 않게 */
  padding-bottom: 0;
}
.brand {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--k-x2);
  min-height: var(--tap-min);
  text-decoration: none;
  font-size: var(--k-t8);
  font-weight: 700;
  align-self: flex-start;
}
.brand-mark { width: var(--icon-xl); height: var(--icon-xl); flex: none; }
/* 워드마크 로고(2026-10-12): 높이로 맞추고 너비는 비율대로. 원본 426×120(3배) */
.brand-logo { height: var(--icon-2xl); width: auto; max-width: none; flex: none; }
.nav {
  display: flex;
  justify-content: space-between;
  gap: var(--k-x2);
}
.nav-item { display: flex; flex: 1 1 auto; position: relative; }
.nav-item > a { flex: 1 1 auto; }
/* 꺾을 수 없는 한 낱말 메뉴(교육·동아리)는 줄어들지 않는다 — 320px에서 「동아리」가 칸보다 넓어 잘리던 것(2026-10-12). 줄어드는 몫은 두 줄로 접히는 「학생 이야기」「운영 및 문의」가 맡는다 */
.nav-item, .nav > a[data-nav="community"] { flex-shrink: 0; }
.nav a {
  color: var(--text);
  flex: 1 1 auto;             /* 글자 길이만큼 + 남는 폭 나눠 갖기 (같은 폭 4등분은 긴 메뉴만 두 줄로 꺾였다) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);   /* 「교육」처럼 짧은 메뉴도 손가락 폭(48px)은 지킨다 */
  padding: var(--k-x2) calc(var(--k-x1) / 2);   /* 좌우 4→2px(2026-10-12): 360px에서 네 메뉴가 327/328px로 꺾이던 것을 한 줄로. 메뉴 사이 8px(gap)은 그대로 */
  word-break: keep-all;
  text-align: center;
  text-decoration: none;
  font-size: var(--font-small);
  line-height: 1.3;
  border-bottom: 4px solid transparent;
  transition: border-color var(--k-d3) var(--k-easing), background-color var(--k-d3) var(--k-easing);
}
@media (hover: hover) { .nav a:hover { background: var(--surface-fill); } }
.nav-caret { display: none; width: var(--icon-sm); height: var(--icon-sm); margin-left: var(--k-x1); flex: none; }
.sub { display: none; }
.sub a { text-decoration: none; }
body[data-page="education"] .nav a[data-nav="education"],
body[data-page="ai-basic"] .nav a[data-nav="education"],
body[data-page="ai-advanced"] .nav a[data-nav="education"],
body[data-page="ceo-class"] .nav a[data-nav="education"],
body[data-page="smartphone-class"] .nav a[data-nav="education"],
body[data-page="ai-basic"] .sub a[data-nav="ai-basic"],
body[data-page="ai-advanced"] .sub a[data-nav="ai-advanced"],
body[data-page="ceo-class"] .sub a[data-nav="ceo-class"],
body[data-page="smartphone-class"] .sub a[data-nav="smartphone-class"],
body[data-page="community"] .nav a[data-nav="community"],
body[data-page="stories"] .nav a[data-nav="stories"],
body[data-page="about"] .nav a[data-nav="about"] {
  font-weight: 700;
  border-bottom-color: var(--accent);
}

/* ---------- 섹션 ---------- */
.section { padding-top: var(--k-x12); padding-bottom: var(--k-x12); }
.section + .section { border-top: var(--line-1) solid var(--border); }
.section-title { margin-bottom: var(--k-x6); }
.section-title + .prose { margin-top: 0; }
.stack > * + * { margin-top: var(--k-x5); }
.stack-lg > * + * { margin-top: var(--k-x8); }
.mt-3 { margin-top: var(--k-x3); }
.mt-5 { margin-top: var(--k-x5); }
.mt-8 { margin-top: var(--k-x8); }

/* ---------- 히어로 (영상이 섹션 전체를 16:9로 채운다. 1024px 이상은 글이 영상 위로 올라간다) ---------- */
.hero { position: relative; }
.hero-media { display: block; background: var(--surface-accent); }
.hero-video, .hero-still {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 68% 80%;   /* 세로를 자를 때(가로로 눕힌 폰) 인물이 있는 아래쪽을 남긴다. 16:9 그대로인 화면에는 영향 없음 */
}
.hero-still { display: none; }
/* 1024px 미만(영상 위 · 글 아래)에서 영상이 화면 높이의 45%를 넘지 않게 — 휴대폰을 가로로 눕히면(844×390)
   16:9 영상이 475px라 첫 화면이 영상 윗부분으로만 채워지고 제목이 안 보였다(2026-10-13 점검). 상한은 높이의 45%.
   세로로 든 폰·태블릿은 영상 높이가 원래 45% 아래라 영향이 없다 */
@media (max-width: 1023px) {
  .hero-video, .hero-still { max-height: 45svh; }   /* 45%: 667×375 가로에서도 제목까지 첫 화면에 든다. vh는 F5 금지(iOS 주소창), svh를 모르는 옛 브라우저는 상한 없이 예전처럼 */
}
/* 움직임을 줄이는 설정이면 영상 대신 한 장면만 */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-still { display: block; }
}
.hero .container { padding-top: var(--k-x8); padding-bottom: var(--k-x12); }
/* 제목은 두 줄 — 줄마다 줄바꿈 없이, 좁은 화면에서는 글자를 줄여서 맞춘다 */
.hero-title { font-size: min(var(--k-t13), 10vw); line-height: 1.2; font-weight: 700; }   /* 두 줄이 되며 긴 줄이 짧아져 8→10vw(320px에서 32px) */
.hero-title-line { display: block; white-space: nowrap; }   /* 두 줄 고정: 「누구나 쉽게 / 배우는 AI 학교」(2026-10-13) — 한 줄이면 360px 폰에서 넘친다 */
.hero-lead { margin-top: var(--k-x5); font-size: var(--k-t8); line-height: 1.5; }
.hero-lead p + p { margin-top: var(--k-x2); }
.hero-cta { margin-top: var(--k-x8); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-x2);
  width: 100%;
  min-height: var(--btn-h);
  padding: var(--k-x3) var(--k-x4);
  border-radius: var(--k-full);
  border: var(--line-2) solid transparent;
  font: inherit;
  font-size: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--k-d3) var(--k-easing), border-color var(--k-d3) var(--k-easing);
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}
@media (hover: hover) { .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } }
.btn-secondary {
  background: var(--surface);
  border-color: var(--text);
  color: var(--text);
}
@media (hover: hover) { .btn-secondary:hover { background: var(--surface-fill); } }
.btn-note {
  margin-top: var(--k-x3);
  font-size: var(--font-small);
  color: var(--text-2);
}
.btn svg { width: var(--icon-md); height: var(--icon-md); flex: none; }

/* ---------- 표면 ---------- */
.card {
  background: var(--surface);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--k-x5);
}
.card-accent { background: var(--surface-accent); border-color: var(--surface-accent); }
.panel {
  background: var(--surface);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-panel);
}
.grid-2 { display: grid; gap: var(--k-x4); }

/* ---------- 홈: 수업 방식 ---------- */
.learning-flow {
  display: grid;
  gap: var(--k-x3);
  list-style: none;
  padding: 0;
}
.learning-step {
  display: grid;
  grid-template-columns: var(--icon-2xl) minmax(0, 1fr);
  gap: var(--k-x4);
  align-items: start;
  padding: var(--k-x5);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.learning-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  border-radius: var(--k-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: var(--k-t7);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.learning-step .h3 { line-height: 1.35; }
.learning-step p { margin-top: var(--k-x2); color: var(--text-2); }

/* ---------- 숫자 패널 ---------- */
.stats { display: grid; grid-template-columns: 1fr; overflow: hidden; }
.stat { padding: var(--k-x6); }
.stat + .stat { border-top: var(--line-1) solid var(--border); }
.stat-label { color: var(--text-2); font-size: var(--font-small); line-height: 1.4; }
.stat-value { font-size: var(--k-t13); line-height: 1.2; font-weight: 700; margin-top: var(--k-x1); white-space: nowrap; }
.stat-value small { font-size: var(--k-t7); font-weight: 400; margin-left: var(--k-x1); }

/* ---------- 뱃지 (클릭 불가) ---------- */
.badge {
  display: inline-block;
  padding: var(--k-x1) var(--k-x3);
  border-radius: var(--k-full);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 1.5;
  background: var(--surface-fill);
  color: var(--text);
}
.badge-open { background: var(--surface-accent); }

/* ---------- 교육 단계 ---------- */
.steps { display: grid; gap: var(--k-x3); }
.step {
  display: flex;
  align-items: flex-start;
  gap: var(--k-x3);
  padding: var(--k-x5);
}
.step-num {
  flex: none;
  width: var(--icon-2xl);
  height: var(--icon-2xl);
  border-radius: var(--k-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--k-t7);
  font-weight: 700;
  border: var(--line-2) solid var(--text);
  color: var(--text);
  background: var(--surface);
}
.step-current .step-num { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); }
.step-name a { color: inherit; }
.step-body { min-width: 0; display: block; }
.step-name { font-weight: 700; display: block; }
.step-body .badge { margin-top: var(--k-x2); }

/* ---------- 목록 (앞·제목·설명·뒤) ---------- */
.list { display: flex; flex-direction: column; }
.list-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--k-x2) var(--k-x4);
  align-items: start;
  min-height: var(--row-h);
  padding: var(--k-x5);
}
.list-item + .list-item { border-top: var(--line-1) solid var(--border); }
.list-prefix { width: var(--icon-2xl); height: var(--icon-2xl); flex: none; }
.list-prefix svg { width: var(--icon-2xl); height: var(--icon-2xl); }
.list-title { font-weight: 700; }
.list-detail { color: var(--text-2); font-size: var(--font-small); line-height: 1.5; margin-top: var(--k-x1); }
.list-suffix { grid-column: 2; justify-self: start; }
.curri .list-item { align-items: start; }
.curri .list-title { font-size: var(--k-t9); line-height: 1.4; }
.curri .list-detail { font-size: var(--font-body); line-height: var(--lh-body); color: var(--text); }
.detail-points { list-style: none; padding: 0; margin-top: var(--k-x2); }
.detail-points > li { position: relative; padding-left: 1em; }
.detail-points > li + li { margin-top: var(--k-x2); }
.detail-points > li::before { content: "•"; position: absolute; left: 0; font-weight: 700; color: var(--text); }

/* AI 심화반 주제별 수업 — 네 주제를 먼저 비교하고, 카드 안에서 수업 순서를 읽는다. */
.topic-lead { max-width: var(--measure); color: var(--text-2); }
.topic-grid { display: grid; gap: var(--k-x4); }
.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--k-x4);
  padding: var(--k-x4);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
.topic-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--k-x3);
}
.topic-head .badge { white-space: nowrap; }
.topic-title { font-size: var(--k-t9); line-height: 1.35; font-weight: 700; text-wrap: balance; }
.topic-result {
  display: grid;
  gap: var(--k-x1);
  padding: var(--k-x4);
  border-radius: var(--radius-input);
  background: var(--surface-accent);
  line-height: 1.5;
}
.topic-result strong, .topic-result span { display: block; }
.topic-curriculum { padding-left: 1.4em; list-style: decimal; }
.topic-curriculum > li { padding-left: var(--k-x1); }
.topic-curriculum > li + li { margin-top: var(--k-x5); }
.topic-curriculum > li::marker { font-weight: 700; }
.topic-curriculum > li > strong { display: block; font-size: var(--k-t8); line-height: 1.45; }
.topic-curriculum .detail-points { color: var(--text); font-size: var(--font-body); line-height: var(--lh-body); }

/* 스마트폰 수업 대상: 짧은 제목과 설명을 나눠 한 항목씩 읽는다. */
.phone-audience-list { display: grid; gap: var(--k-x4); margin-top: var(--k-x4); }
.phone-audience-list > li {
  display: flex;
  align-items: flex-start;
  gap: var(--k-x3);
  padding: var(--k-x4);
  border-radius: var(--radius-card);
  background: var(--surface-accent);
}
.phone-audience-list > li > svg { width: var(--icon-md); height: var(--icon-md); flex: none; margin-top: var(--k-x1); }
.phone-audience-list > li > div { min-width: 0; }
.phone-audience-title { font-weight: 700; margin-bottom: var(--k-x2); }
@media (min-width: 768px) {
  .phone-audience-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phone-audience-list > li { flex-direction: column; }
}

/* ---------- 시간표·커리큘럼 ---------- */
.timetable { display: flex; flex-direction: column; }
.tt-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--k-x1) var(--k-x4);
  min-height: var(--tap-min);
  padding: var(--k-x4) var(--k-x5);
}
.tt-row + .tt-row { border-top: var(--line-1) solid var(--border); }
.tt-row p { margin: 0; }
.tt-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-note { color: var(--text-2); font-size: var(--font-small); line-height: 1.5; margin-top: var(--k-x1); }
.card > .h3 + .timetable { margin-top: var(--k-x3); }

/* ---------- 자주 묻는 질문 ---------- */
.faq details { border-top: var(--line-1) solid var(--border); padding: var(--k-x1) 0; }  /* 질문 행끼리 8px */
.faq details:last-child { border-bottom: var(--line-1) solid var(--border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-x4);
  min-height: 64px;
  padding: var(--k-x4) 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; transition: transform var(--k-d3) var(--k-easing); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq .answer { padding: 0 0 var(--k-x5); max-width: var(--measure); }

/* ---------- 인용 ---------- */
.quote { max-width: var(--measure); }
.quote-text { font-size: var(--k-t8); line-height: 1.5; font-weight: 700; }
.quote-text::before { content: "“"; }
.quote-text::after { content: "”"; }
.quote-source { margin-top: var(--k-x2); color: var(--text-2); font-size: var(--font-small); }

/* ---------- 시니어 AI 수업 과정 탭 (2026-09-22: 라디오 → :target 앵커 표식) ----------
   깊은 링크(ai-class.html#second-step)가 통하도록 URL의 #이 곧 고른 과정이다.
   표식 <span class="course-anchor" id="…">이 .steps·.course-panels보다 앞에 있어야 ~ 선택자가 닿는다.
   :has() 없이 :target·~·:nth-child만 쓰므로 오래된 폰 브라우저에서도 동작한다.
   해시가 없거나 #courses면 1단계가 기본이다. */
.course-anchor { display: block; height: 0; }   /* 상자가 있어야 스크롤 대상이 된다. display:none 금지 */
.courses .steps { margin-bottom: var(--k-x6); }
.courses .course-options .step-item::after { display: none; }
.course-options .step-body { min-width: 0; }
/* 카드 전체가 누름 영역이다(2026-09-11 사용자 지시). 단계 카드는 고르는 일 하나뿐이라
   「모집 카드 전체를 링크로 만들지 않는다」 규칙과 충돌하지 않는다 — 그쪽은 카드 안에
   신청·자세히 보기 두 행동이 있어서 생긴 규칙이다. */
.step-item { list-style: none; display: flex; position: relative; }
.courses .step { margin: 0; cursor: pointer; flex: 1; }
.step-hit { display: flex; align-items: flex-start; gap: var(--k-x3); min-height: var(--tap-min); color: inherit; text-decoration: none; }

/* 단계 눈금 — 1·2·3단계를 「채워진 칸 수」와 「칸 높이」 둘로 보여준다.
   숫자를 못 읽어도 계단 모양으로 순서가 읽힌다. 읽기 프로그램에는
   .step-name 안의 visually-hidden "N단계"가 같은 뜻을 글로 전한다. */
.level { display: flex; align-items: flex-end; gap: var(--k-x1); height: var(--k-x6); margin-top: var(--k-x2); }
/* 빈 칸은 --border로. 더 옅은 회색은 고른 카드의 복숭아색 배경 위에서 묻힌다(실측) */
.level > span { width: var(--k-x3); border-radius: var(--k-full); background: var(--border); }
.level > span:nth-child(1) { height: 42%; }
.level > span:nth-child(2) { height: 67%; }
.level > span:nth-child(3) { height: 100%; }
.level--1 > span:nth-child(-n + 1),
.level--2 > span:nth-child(-n + 2),
.level--3 > span:nth-child(-n + 3) { background: var(--accent); }

/* 카드 사이 꺾쇠 — 「차례로 이어집니다」를 눈으로 보여준다. 장식이라 읽기 프로그램에서 감춘다.
   꺾쇠가 들어갈 자리를 만들려고 이 목록만 사이 간격을 넓힌다. */
.courses .steps { gap: var(--k-x6); }
.courses .step-item:not(:last-child)::after {
  content: "";
  position: absolute; left: 50%; bottom: calc(var(--k-x6) / -2);
  width: var(--k-x3); height: var(--k-x3);
  border-right: var(--line-2) solid var(--border);
  border-bottom: var(--line-2) solid var(--border);
  transform: translate(-50%, 50%) rotate(45deg);
}
/* 고른 과정의 단계 줄을 강조한다 — 기본은 1단계, 2·3단계가 :target이면 그쪽으로 옮긴다 */
.courses .steps .step-item:nth-child(1) .step,
#second-step:target ~ .steps .step-item:nth-child(2) .step,
#third-step:target ~ .steps .step-item:nth-child(3) .step {
  border-color: var(--accent);
  background: var(--surface-accent);
}
.courses .steps .step-item:nth-child(1) .step-num,
#second-step:target ~ .steps .step-item:nth-child(2) .step-num,
#third-step:target ~ .steps .step-item:nth-child(3) .step-num {
  background: var(--accent); border-color: var(--accent); color: var(--text-inverse);
}
#second-step:target ~ .steps .step-item:nth-child(1) .step,
#third-step:target ~ .steps .step-item:nth-child(1) .step {
  border-color: var(--border);
  background: var(--surface);
}
#second-step:target ~ .steps .step-item:nth-child(1) .step-num,
#third-step:target ~ .steps .step-item:nth-child(1) .step-num {
  background: var(--surface); border-color: var(--text); color: var(--text);
}
/* 고른 과정 하나만 보인다 */
.course-panel { display: none; }
.course-panels > .course-panel:nth-child(1) { display: block; }
#second-step:target ~ .course-panels > .course-panel:nth-child(1),
#third-step:target ~ .course-panels > .course-panel:nth-child(1) { display: none; }
#second-step:target ~ .course-panels > .course-panel:nth-child(2),
#third-step:target ~ .course-panels > .course-panel:nth-child(3) { display: block; }
.courses .callout, .courses > p:last-child { margin-top: var(--k-x8); }

/* ---------- 참가신청서 (apply.html, 2026-09-22) ----------
   구글폼 문항을 그대로 옮긴 폼. 컨트롤은 눈에 보이는 기본 라디오·체크(28px)를 두고,
   누르는 영역은 감싼 라벨(.opt, 56px)이 맡는다. 필수 표시는 색이 아니라 「(필수)」 글자로. */
.apply-form { max-width: var(--measure); }
.apply-form > * + * { margin-top: var(--k-x8); }
.apply-summary { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: var(--k-x2) var(--k-x4); max-width: var(--measure); }
.apply-summary dt { color: var(--text-2); line-height: 1.5; }   /* dt는 본문 글자 기준(20px) — 검사기 C1 */
.apply-summary dd { margin: 0; font-weight: 700; line-height: 1.5; }
.q { border: 0; padding: 0; margin: 0; min-width: 0; }
.q legend { padding: 0; font-size: var(--k-t8); line-height: 1.4; font-weight: 700; text-wrap: balance; }
.q-hint { margin-top: var(--k-x2); color: var(--text-2); font-size: var(--font-small); line-height: 1.5; }
.q-body { margin-top: var(--k-x4); }
.opt-list { display: grid; gap: var(--k-x3); }   /* 행끼리 12px — 누르는 것끼리 8px 이상 */
.opt {
  display: flex; align-items: center; gap: var(--k-x3);
  min-height: var(--btn-h); padding: var(--k-x2) var(--k-x4);
  border: var(--line-2) solid var(--border); border-radius: var(--radius-input);
  background: var(--surface); cursor: pointer;
}
@media (hover: hover) { .opt:hover { background: var(--surface-fill); } }
.opt:has(:checked) { border-color: var(--primary); background: var(--surface-accent); }  /* 안 되는 브라우저는 라디오 점으로 안다 */
.opt-input { width: var(--icon-lg); height: var(--icon-lg); margin: 0; flex: none; accent-color: var(--primary); }
.text-input, .apply-form textarea {
  display: block; width: 100%; min-height: var(--btn-h);
  padding: var(--k-x3) var(--k-x4);
  border: var(--line-2) solid var(--border); border-radius: var(--radius-input);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--font-body); line-height: 1.4;
}
.apply-form textarea { min-height: calc(var(--btn-h) * 2); resize: vertical; }
.text-input::placeholder, .apply-form textarea::placeholder { color: var(--text-2); }
.opt-other { margin-top: var(--k-x3); }
.apply-done { max-width: var(--measure); }

/* ---------- 설문 그래프 (학생 이야기, 2026-09-11) ----------
   JS 없이 CSS 너비(--v)만으로 그린다. 막대는 눈으로 읽는 보조 수단이라 aria-hidden이고,
   숫자는 바로 옆 글자가 그대로 말해 준다 — 읽기 프로그램은 글자만 읽으면 된다. */
.chart-stack { display: flex; flex-direction: column; gap: var(--k-x6); max-width: var(--measure); }
.chart-block {
  background: var(--surface);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-panel);
  padding: var(--k-x6);
}
.chart-title { line-height: 1.35; }
.chart-lead { margin-top: var(--k-x3); font-size: var(--font-body); line-height: var(--lh-body); word-break: keep-all; }
.chart-note { margin-top: var(--k-x4); color: var(--text-2); font-size: var(--font-small); }

/* 쌓은 막대 — 매우 만족 / 만족 */
.stackbar {
  display: flex; margin-top: var(--k-x4);
  height: var(--k-x6); border-radius: var(--k-full);
  background: var(--chart-track); overflow: hidden;
}
.stack-seg { width: var(--v); display: block; }
.stack-seg.seg-1 { background: var(--chart-1); }
.stack-seg.seg-2 { background: var(--chart-2); }

.legend { list-style: none; margin: var(--k-x4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--k-x3) var(--k-x6); }
.legend-item { display: flex; align-items: center; gap: var(--k-x2); font-size: var(--font-small); }
.legend-dot { width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--k-full); flex: none; }
.legend-dot.seg-1 { background: var(--chart-1); }
.legend-dot.seg-2 { background: var(--chart-2); }
.legend-dot.seg-3 { background: var(--chart-track); box-shadow: inset 0 0 0 var(--line-2) var(--border); }
.legend-item.is-zero { color: var(--text-2); }

/* 가로 막대 한 줄 = 이름 → 막대 → 숫자 */
.barlist { list-style: none; margin: var(--k-x4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-x5); }
.bar-label { font-size: var(--font-body); line-height: 1.4; font-weight: 700; word-break: keep-all; }
.bar { margin-top: var(--k-x3); height: var(--k-x5); border-radius: var(--k-full); background: var(--chart-track); overflow: hidden; }
.bar-fill { display: block; width: var(--v); height: 100%; background: var(--chart-1); border-radius: var(--k-full); }
.bar-value { margin-top: var(--k-x2); color: var(--text-2); font-size: var(--font-small); }
.bar-value b { color: var(--text); }

/* 0건은 막대로 그리면 빈칸처럼 보인다 — 숫자를 크게 세운다 */
.zero-list { list-style: none; margin: var(--k-x4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-x4); }
.zero-item { display: flex; align-items: baseline; gap: var(--k-x4); }
.zero-num {
  flex: none; min-width: var(--k-x16);
  font-size: var(--k-t11); line-height: 1.2; font-weight: 700;
}
.zero-label { font-size: var(--font-body); line-height: 1.5; word-break: keep-all; }
.zero-of { display: block; color: var(--text-2); font-size: var(--font-small); }

/* ---------- 설문 원문 카드 (학생 이야기, 2026-09-11) ---------- */
.quote-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-x5); }
.quote-tile {
  position: relative;
  background: var(--surface);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--k-x10) var(--k-x6) var(--k-x6);
}
/* 카드 머리의 주황 짧은 띠 — 장식이라 글자가 아니다 */
.quote-tile::before {
  content: "";
  position: absolute; top: var(--k-x6); left: var(--k-x6);
  width: var(--k-x10); height: var(--k-x1);
  border-radius: var(--k-full); background: var(--accent);
}
.quote-tile .quote { max-width: none; margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote-tile .quote-text { font-size: var(--font-body); line-height: var(--lh-body); word-break: keep-all; }
.quote-tile .quote-source {
  margin-top: auto; padding: var(--k-x2) var(--k-x4); align-self: flex-start;
  background: var(--surface-accent); border-radius: var(--k-full);
}

@media (min-width: 768px) {
  .quote-grid { grid-template-columns: 1fr 1fr; }
  .chart-stack { max-width: none; }
}

/* ---------- 원칙 상자 ---------- */
.callout {
  display: flex;
  gap: var(--k-x4);
  align-items: flex-start;
  padding: var(--k-x6);
  border-radius: var(--radius-card);
  background: var(--surface-accent);
}
.callout svg { width: var(--icon-xl); height: var(--icon-xl); flex: none; }
.callout-title { font-weight: 700; }

/* ---------- 회원 표시 ---------- */
.avatar-stack { display: flex; }
.avatar {
  width: var(--btn-h);
  height: var(--btn-h);
  border-radius: var(--k-full);
  border: var(--focus-w) solid var(--bg);
  background: var(--surface-fill);
  overflow: hidden;
}
.avatar + .avatar { margin-left: -14px; }
.avatar svg { width: 100%; height: 100%; }

/* ---------- 문의 ---------- */
.contact-block { display: grid; gap: var(--k-x5); }
.address { font-style: normal; margin-bottom: var(--k-x6); }

/* 오시는 길 지도. 구글 지도는 키 없이 iframe으로 들어가므로 공개 페이지에 JS가 없다 */
.map-frame {
  position: relative;
  max-width: var(--measure);
  aspect-ratio: 4 / 3;   /* 좁은 화면에서는 세로를 키워야 주변 지형이 보인다 */
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--k-gray-100);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 문의: 전화가 주 행동이라 번호를 크게 드러내고 버튼을 붙인다.
   전에는 번호가 버튼 아래 18px 회색 안내문 속에 묻혀 가장 중요한 정보가 가장 작았다 */
.contact-card { display: grid; gap: var(--k-x6); align-items: center; }
.contact-lead { margin: 0; }
.contact-act > * + * { margin-top: var(--k-x4); }
.contact-tel { font-size: var(--k-t11); line-height: 1.2; font-weight: 700; margin: 0; }
.contact-tel a { white-space: nowrap; }
.contact-mail { margin-top: var(--k-x6); }

/* ---------- 푸터 (링크 열 + 신청 버튼 / 구분선 / 회사 정보, 먹색 바탕) ---------- */
.site-footer {
  margin-top: var(--k-x16);
  background: var(--text);
  color: var(--text-inverse);
  padding: var(--k-x12) 0 var(--k-x16);
  font-size: var(--font-small);
  line-height: 1.5;
}
.site-footer a { color: var(--text-inverse); }
.footer-top { display: grid; gap: var(--k-x8); }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-x6) var(--k-x6); }
.footer-col { display: flex; flex-direction: column; gap: var(--k-x2); }  /* 링크 행 48px + 사이 8px — 잘못 누름 방지 */
.footer-head { font-size: var(--font-body); font-weight: 700; margin-bottom: var(--k-x2); }
.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--k-gray-400);
  text-decoration: none;
}
.footer-col a:focus-visible { color: var(--text-inverse); text-decoration: underline; }
@media (hover: hover) { .footer-col a:hover { color: var(--text-inverse); text-decoration: underline; } }
.footer-contact { display: flex; flex-direction: column; gap: var(--k-x2); }  /* 전화·메일 행 사이 8px */
.footer-contact-line { font-size: var(--font-body); font-weight: 700; }
.footer-contact-line a { display: inline-flex; align-items: center; min-height: var(--tap-min); text-decoration: underline; overflow-wrap: anywhere; }
.footer-contact-line.is-email { font-size: var(--font-small); }
.footer-contact-note { color: var(--k-gray-400); margin-top: var(--k-x2); }
.footer-bottom {
  margin-top: var(--k-x8);
  padding-top: var(--k-x6);
  border-top: var(--line-1) solid var(--k-gray-800);
}
.footer-bottom > * + * { margin-top: var(--k-x2); }
.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-x1) var(--k-x2);
  font-size: var(--k-t7);
  font-weight: 700;
}
.footer-mark { width: var(--icon-lg); height: var(--icon-lg); flex: none; }
/* 푸터 워드마크(2026-10-12): 먹색 바탕용으로 '학교'를 흰색으로 바꾼 사본 */
.footer-logo { height: var(--icon-xl); width: auto; max-width: none; flex: none; }
.footer-operator { font-size: var(--font-small); font-weight: 400; color: var(--k-gray-400); }
.footer-info { color: var(--k-gray-400); }
.footer-info a { text-decoration: underline; }
.footer-sep { padding: 0 var(--k-x1); color: var(--k-gray-800); }
/* 좁은 화면에서는 구분선 「|」가 줄 끝·줄 머리에 홀로 남는다(320px 실측) — 구분선을 숨기고 항목마다 줄을 바꾼다 */
.footer-brand .footer-sep, .footer-info .footer-sep { display: none; }
.footer-info .fi { display: block; }
@media (min-width: 768px) {
  .footer-brand .footer-sep, .footer-info .footer-sep { display: inline; }
  .footer-info .fi { display: inline; }
}
.footer-copy { color: var(--k-gray-400); margin-top: var(--k-x4); }
.site-footer :focus-visible { outline-color: var(--text-inverse); }

/* 떠 있는 전화 버튼 — 어느 화면에서든 한 번에 전화 */

/* ---------- 운영사 표식 ((주)모닛 마크를 제목 옆에. 좁아지면 제목 아래로 내려간다) ---------- */
.org-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-x5) var(--k-x14);   /* 가로 56px = 약 1.5cm, 제목 오른쪽 끝에서 띄우는 거리 */
  margin-bottom: var(--k-x6);
}
.org-head .section-title { margin-bottom: 0; }
.org-logo { display: block; width: 200px; max-width: 100%; height: auto; flex: none; }

/* ---------- 홍시 캐릭터 ---------- */
.mascot { display: block; }
.mascot img { display: block; width: 100%; height: auto; }
/* 천천히 떠오르고 내려앉는 숨쉬기. 움직임을 줄이는 설정에서는 멈춘다 */
@keyframes hongsi-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hongsi-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: no-preference) {
  .mascot--float { animation: hongsi-float 6s ease-in-out infinite; }
  .mascot--sway { animation: hongsi-sway 5s ease-in-out infinite; transform-origin: 50% 92%; }
}
.thumb-scene { position: relative; aspect-ratio: 16 / 9; background: var(--surface-accent); overflow: hidden; }
.mascot--thumb { position: absolute; right: 9%; bottom: 0; width: 44%; }
.mascot--side { width: 120px; flex: none; }
.mascot--head { width: 84px; flex: none; }
.mascot--inline { width: 110px; flex: none; }
.mascot--lost { width: 200px; margin: 0 auto var(--k-x5); }
/* 포즈 그림은 포즈마다 가로폭이 달라(353~500px) 너비로 맞추면 크기가 들쭉날쭉해진다.
   그래서 높이로 맞춘다. --pose-h만 바꾸면 되고 컴포넌트에서 픽셀을 직접 쓰지 않는다 */
.mascot--pose { width: auto; flex: none; }
.mascot--pose img { width: auto; max-width: none; height: var(--pose-h); }
.mascot--side.mascot--pose { --pose-h: 148px; }
.mascot--head.mascot--pose { --pose-h: 104px; }
.with-mascot { display: flex; flex-direction: column; align-items: flex-end; gap: var(--k-x4); }
.with-mascot > *:first-child { align-self: stretch; }
.with-mascot > *:first-child { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--k-x4); margin-bottom: var(--k-x6); }
.class-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-x5); }
.class-card.is-closed .mascot { opacity: 0.45; }

/* ---------- 모집 중인 수업 (카탈로그형 카드 격자) ---------- */
.class-intro { margin-top: calc(-1 * var(--k-x3)); margin-bottom: var(--k-x5); }
.class-filter-input {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.chip-row { display: flex; flex-wrap: wrap; gap: var(--k-x2); margin-bottom: var(--k-x6); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--k-x2);       /* 좁은 화면: 8px. 20px이면 세 칩(365px)이 360px 폰에서 두 줄로 갈린다 */
  white-space: nowrap;
  border-radius: var(--k-full);
  border: var(--line-2) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--k-d3) var(--k-easing), border-color var(--k-d3) var(--k-easing);
}
@media (hover: hover) { .chip:hover { background: var(--surface-fill); } }
#cf-all:checked ~ .chip-row label[for="cf-all"],
#cf-ai:checked ~ .chip-row label[for="cf-ai"],
#cf-phone:checked ~ .chip-row label[for="cf-phone"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--text-inverse);
}
#cf-all:focus-visible ~ .chip-row label[for="cf-all"],
#cf-ai:focus-visible ~ .chip-row label[for="cf-ai"],
#cf-phone:focus-visible ~ .chip-row label[for="cf-phone"] { outline: var(--focus-w) solid var(--focus); outline-offset: 3px; }
#cf-ai:checked ~ .class-grid .class-card:not([data-kind="ai"]),
#cf-ai:checked ~ .class-sub,
#cf-phone:checked ~ .class-grid .class-card:not([data-kind="phone"]) { display: none; }
.class-grid { display: grid; grid-template-columns: 1fr; gap: var(--k-x6); }
.class-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.class-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-accent); }
.class-thumb svg, .class-thumb .thumb-scene { width: 100%; height: 100%; display: block; }
.class-chips { position: absolute; left: var(--k-x4); bottom: var(--k-x4); display: flex; flex-wrap: wrap; gap: var(--k-x2); }
.class-chips .badge { background: var(--surface); border: var(--line-1) solid var(--border); }
.class-chips .badge-open { background: var(--surface-accent); border-color: var(--brand); }
.class-card.is-closed .class-thumb svg { opacity: 0.45; }
/* 카드 안쪽은 세로 한 줄. 신청 영역을 맨 아래로 밀어 카드끼리 버튼 높이를 맞춘다 */
.class-body { display: flex; flex-direction: column; flex: 1; padding: var(--k-x5); }
.class-title { line-height: 1.35; word-break: keep-all; }

.class-round { color: var(--text-2); font-size: var(--font-small); line-height: 1.5; margin-top: var(--k-x1); }
/* 이름·값 두 칸 — 카드끼리 같은 항목이 같은 자리에 온다 */
.class-facts { margin: var(--k-x4) 0 0; }
.class-fact { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: var(--k-x4); padding: var(--k-x2) 0; }
.class-fact + .class-fact { border-top: var(--line-1) solid var(--border); }
.class-facts dt { color: var(--text-2); font-size: var(--font-small); line-height: 1.5; }
.class-facts dd { margin: 0; color: var(--text); font-size: var(--font-small); line-height: 1.5; word-break: keep-all; }
.class-fact.is-when dd { font-size: var(--font-body); font-weight: 700; }
.class-actions { margin-top: auto; padding-top: var(--k-x5); }
.class-actions > * + * { margin-top: var(--k-x3); }
.class-card .btn { width: 100%; }
/* 두 버튼을 좌우로: 「수업 내용 보기」 왼쪽 · 「신청하기」 오른쪽(2026-09-14 사용자 지시).
   한 칸 136px이 안 나오는 좁은 카드(360px 폰 이하)에서는 저절로 위아래로 쌓인다 — 새 분기점 없이. */
.class-btns { display: flex; flex-wrap: wrap; gap: var(--k-x2); }
.class-btns .btn { flex: 1 1 130px; width: auto; padding-left: var(--k-x1); padding-right: var(--k-x1); }  /* 360px 폰(카드 안폭 272)에서도 두 칸 130+8+130이 들어간다 */
.class-closed-note { color: var(--text-2); }
.class-sub { margin-top: var(--k-x8); margin-bottom: var(--k-x4); }
.class-empty { max-width: 46em; }
.class-empty > * + * { margin-top: var(--k-x3); }

/* ---------- 후기 띠 (왼쪽으로 계속 흐른다. JS 없이 CSS만) ---------- */
.quote-strip { overflow: hidden; }
.quote-lead { color: var(--text-2); margin-bottom: var(--k-x6); }
.quote-marquee { overflow: hidden; }
.quote-track { display: flex; width: max-content; }
.quote-row { display: flex; list-style: none; margin: 0; padding: 0; }
.quote-card {
  width: min(78vw, 340px);
  flex: none;
  margin-right: var(--k-x5);
  padding: var(--k-x6);
  border: var(--line-1) solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}
/* 카드 높이는 가장 긴 후기에 맞춰 모두 같다. 글 길이가 제각각이라
   연령·지역을 글 바로 밑에 두면 카드마다 높이가 달라 어긋나 보인다.
   margin-top: auto로 카드 아래에 붙여 카드끼리 같은 줄에 오게 한다. */
.quote-card figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.quote-card .quote-text { font-size: var(--font-body); line-height: 1.6; word-break: keep-all; }
.quote-card .quote-source {
  margin-top: auto;
  padding-top: var(--k-x5);
  color: var(--text-2);
  font-size: var(--font-small);
}
@keyframes quote-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 움직임을 줄이는 설정에서는 흐르지 않고, 손가락으로 밀어서 본다 */
@media (prefers-reduced-motion: no-preference) {
  .quote-track { animation: quote-slide var(--quote-dur, 60s) linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-marquee { overflow-x: auto; }
  .quote-row[aria-hidden="true"] { display: none; }
}
/* 손을 올려도 멈추지 않는다(2026-09-09 사용자 지시). 키보드로 들어왔을 때만 멈춘다 */
.quote-marquee:focus-within .quote-track { animation-play-state: paused; }

/* ---------- 404 ---------- */
.notfound { padding-top: var(--k-x16); padding-bottom: var(--k-x16); }

/* ---------- 스타일가이드 전용 ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--k-x4); }
.sg-swatch { border: var(--line-1) solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.sg-swatch-color { height: 72px; }
.sg-swatch-name { padding: var(--k-x3); font-size: var(--font-small); }

/* ---------- 768px 이상 ---------- */
@media (min-width: 768px) {
  :root {
    --font-body: var(--k-t7);
    --font-small: var(--k-t6);
    --lh-body: 1.6;
    --gutter: var(--k-x8);
  }
  .site-header { position: sticky; top: 0; z-index: 30; }
  /* 붙어 있는 헤더(72px) 밑으로 앵커 대상이 숨지 않게 — 헤더 높이 + 16px */
  main [id] { scroll-margin-top: calc(var(--row-h) + var(--k-x4)); }
  .site-header .container {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    padding-top: 0;
  }
  .brand { align-self: center; }
  .nav { gap: var(--k-x4); }
  .nav-item { flex: none; }
  .nav-caret { display: block; }
  .nav a { flex: none; padding: var(--k-x4) var(--k-x3); min-height: var(--row-h); font-size: var(--k-t7); }
  .sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    padding: var(--k-x2);
    background: var(--surface);
    border: var(--line-1) solid var(--border);
    border-radius: var(--k-r3);
    box-shadow: var(--k-s2);
    z-index: 40;
  }
  .has-sub:focus-within .sub { display: block; }
  @media (hover: hover) { .has-sub:hover .sub { display: block; } }
  .sub a {
    display: flex;
    align-items: center;
    min-height: var(--btn-h);
    padding: var(--k-x2) var(--k-x5);
    border-radius: var(--k-r2);
    border-bottom: 0;
    white-space: nowrap;
    justify-content: flex-start;
  }
  @media (hover: hover) { .sub a:hover { background: var(--surface-fill); } }
  .section { padding-top: var(--k-x16); padding-bottom: var(--k-x16); }
  .hero-title { font-size: min(var(--k-t14), 10svh); line-height: 1.15; }   /* 가로로 눕힌 폰(높이 390px)에서 두 줄 제목이 첫 화면 안에 들게 39px로 */
  .btn { font-size: var(--k-t7); }
  .card { padding: var(--k-x6); }
  .btn { width: auto; min-width: 280px; padding-left: var(--k-x6); padding-right: var(--k-x6); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--k-x6); }
  .learning-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--k-x4); }
  .learning-step { grid-template-columns: 1fr; align-content: start; padding: var(--k-x6); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat + .stat { border-top: 0; }
  .stat:nth-child(2n) { border-left: 1px solid var(--border); }
  .stat:nth-child(n+3) { border-top: var(--line-1) solid var(--border); }
  .chip { padding: 0 var(--k-x5); }   /* 넓은 화면은 원래 여백 20px */
  .steps { grid-template-columns: 1fr 1fr 1fr; gap: var(--k-x4); }
  .courses .steps { gap: var(--k-x8); }
  .courses .step-item:not(:last-child)::after {
    left: auto; bottom: auto; right: calc(var(--k-x8) / -2); top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
  }
  .list-item { grid-template-columns: auto 1fr auto; align-items: center; }
  .curri .list-title { font-size: var(--k-t8); }
  .list-suffix { grid-column: 3; }
  .contact-block { grid-template-columns: 1fr 1fr; align-items: start; }
  .map-frame { aspect-ratio: 16 / 9; }
  .contact-card { grid-template-columns: minmax(0, 1fr) auto; gap: var(--k-x12); }
  .contact-tel { font-size: var(--k-t12); }
  .tt-row { grid-template-columns: 11em 1fr; }
  .class-grid { grid-template-columns: 1fr 1fr; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 주제가 홀수 개면 마지막 카드가 두 칸을 다 쓴다 — 오른쪽 아래가 비지 않게(2026-10-12 주제 3개로 축소) */
  .topic-grid > .topic-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .topic-card { padding: var(--k-x5); }
  .topic-title { font-size: var(--k-t8); }
  .class-body { padding: var(--k-x5) var(--k-x6) var(--k-x6); }
  /* 글은 제목 바로 아래에서 시작한다. 캐릭터(200px)가 줄 높이를 정하는데 가운데 정렬이면
     짧은 글이 그 안에서 내려앉아 제목과 92px까지 벌어졌다(2026-09-11 실측·사용자 지적).
     아래 정렬(~2026-09-10)도 가운데 정렬(2026-09-10)도 같은 병의 다른 증상이었다. */
  .with-mascot { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: var(--k-x8); }
  .with-mascot > *:first-child { align-self: auto; }
  .mascot--side { width: 170px; }
  .mascot--head { width: 120px; }
  /* .mascot--side/head의 너비는 기본 캐릭터용이다. 포즈 그림에까지 걸리면
     너비만 그 값으로 잘리고 높이는 그대로라 가로로 눌린다 — 반드시 함께 둔다 */
  .mascot--pose { width: auto; }
  .mascot--side.mascot--pose { --pose-h: 200px; }
  .mascot--head.mascot--pose { --pose-h: 132px; }
  .mascot--lost { width: 260px; }
  .footer-top { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--k-x12); align-items: start; }
  .footer-cols { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--k-x6) var(--k-x5); }
  .class-card .btn { width: 100%; min-width: 0; }
}

/* ---------- 1024px 이상: 히어로 글이 영상 위로 ----------
   영상에서 대비가 확보되는 곳은 왼쪽 위 벽면뿐이다. 19개 프레임을 재 보면
   (옛 영상 기준) 가로 10~44% · 세로 10~64% 구간이 먹색 글자 기준 최악 9.2:1이라 패널 없이 글을 올렸다.
   2026-10-13 오전 hero-v2는 왼쪽 위에 강사가 있어 반투명 판을 깔았다(같은 날 교체되며 폐지).
   2026-10-13 hero-v3(hero-final): 홍시·강사·떠 있는 화면이 모두 오른쪽 70%에 있고 **왼쪽 30%는 빈 벽**이다(마지막 컷 기준).
   먹색 글자 대비(5% 격자 × 40프레임 최악값): 가로 0~30% · 세로 35~90%에서 위쪽 5:1, 세로 45% 아래 7~9:1.
   그래서 판 없이 글 상자를 그 기둥(가로 4~30%, 세로 35~90%)에 가두고, 제목은 두 줄로 나눠 폭에 맞춘다.
   제목은 큰 글자라 4.5:1이면 되고, 본문 크기의 안내문·버튼은 7:1이 나오는 아래쪽에 온다.
   1024px 미만에서는 글을 영상 아래에 둔다. */
@media (min-width: 1024px) {
  .hero {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .hero-media { position: absolute; inset: 0; }
  .hero-video, .hero-still { aspect-ratio: auto; }
  .hero .container {
    position: relative;
    z-index: 1;
    max-width: none;
    display: flex;
    align-items: center;
    padding: 5.6% 70% 5.6% 4%;     /* 세로 10~90%에서 가운데 정렬(좌측 중앙, 2026-10-13 사용자 지시), 가로 4~30% — 영상 마지막 컷의 빈 벽 기둥 */
  }
  .hero-text {
    max-width: none;
    width: 100%;
    text-shadow: 0 1px 14px rgba(250, 247, 240, 0.92);  /* 밝은 번짐 — 벽면 빛결 위에서 획을 또렷하게 */
  }
  .hero-title {
    font-size: min(4vw, 80px);   /* 두 줄 「누구나 쉽게 / 배우는 AI 학교」: 긴 줄이 기둥 폭(가로 26%)의 약 90% */
    line-height: 1.15;
    white-space: normal;
  }
  .hero-title-line { display: block; white-space: nowrap; }
  .hero-lead { margin-top: var(--k-x4); font-size: max(18px, min(1.4vw, 24px)); }
  .hero-cta { margin-top: var(--k-x5); }
  .hero-cta .btn { max-width: 100%; text-shadow: none; }   /* 밝은 번짐은 벽 위 먹색 글자용 — 주황 버튼의 흰 글자에는 흐림이 된다 */
}