/*
 * EduBridge 웹 디자인 시스템 — .omc/plans/design-guide-m1-web.md 구현.
 * S5(웹 IA 셸) 범위: 토큰 전량 + 랜딩/인증/QR 착지/법적 고지 + 앱 허브(스태프·회원) 플레이스홀더 셸.
 * 스태프 대시보드 본문(S6)·회원 뷰 본문(S7)의 상세 컴포넌트는 여기 포함하지 않는다.
 * 다크 모드는 가이드 기준 범위 밖.
 */

/* ============================== 1. 디자인 토큰 (가이드 §1) ============================== */
:root {
  /* 1.2 배경 · 표면 · 테두리 */
  --eb-bg: #FAF7F2;
  --eb-surface: #FDFBF8;
  --eb-surface-sunken: #F3EEE6;
  --eb-border-soft: #E9E1D6;
  --eb-divider: #ECE5DA;
  --eb-border-strong: #79708A;

  /* 1.3 텍스트 잉크 */
  --eb-ink-900: #2A1B3D;
  --eb-ink-700: #6B6472;
  /* 비정보 요소 전용 — 장식 아이콘·비활성 컴포넌트. 텍스트에 쓰지 않는다: 크림 계열 배경 4종 위에서
     최대 3.09:1(bg 2.98 / surface 3.09 / primary-050 2.91 / peach 2.91)이라 본문 4.5:1도, 그래픽
     3:1도 넘지 못한다. 더 흐린 3단계는 성립하지 않으므로 보조 텍스트는 --eb-ink-700을 쓴다(design-audit E1). */
  --eb-ink-500: #948E99;
  --eb-ink-inverse: #FFFFFF;

  /* 1.4 브랜드 딥그린 */
  --eb-primary-900: #2E4432;
  --eb-primary-700: #31633A;
  --eb-primary-600: #24512D;
  --eb-primary-400: #559160;
  --eb-primary-100: #D0ECD5;
  --eb-primary-050: #EDF7EF;

  /* 1.5 의미 색 */
  --eb-success-700: #3D6451;
  --eb-success-600: #3E8161;
  --eb-success-100: #E4EDE3;

  --eb-info-700: #37479A;
  --eb-info-600: #4C5FC7;
  --eb-info-100: #E4E6F6;

  --eb-warning-700: #9C5A2E;
  --eb-warning-600: #C97A46;
  --eb-warning-100: #FBEEDF;

  --eb-error-700: #93262C;
  --eb-error-600: #BC3038;
  --eb-error-100: #F9E4E3;

  /* 1.5.1 차트 전용 출결 상태색 — 정본은 안드로이드 `AttendanceCharts.kt`의 `ChartColor`다.
     의미색을 그대로 쓰지 않는 이유: 배지·칩은 한 번에 한 색만 표면에 놓이지만 차트는 나란히 놓고
     비교한다. 700 계열로 그리면 등원(#3D6451)↔지각(#9C5A2E)이 정상 시각으로도 ΔE2000 14.9(기준 15)로
     구분되지 않는다. 아래 4색은 최악 쌍 ΔE2000 24.2, 표면 대비 4.03~5.18:1로 검증된 값이다.
     브랜드 딥그린(#31633A)은 여기 쓰지 않는다 — 버튼과 데이터가 뭉개진다. 브랜드색은 액션에만. */
  --eb-chart-attended: #0F7A52;
  --eb-chart-late:     #C97A46;
  --eb-chart-left:     #4C5FC7;
  --eb-chart-missing:  #BC3038;

  /* 1.5.2 차트 계열색 — 출결 "상태"가 아닌 계열(비율 추이 등)에 쓴다. iOS `AttendanceTrendSeriesStyle`에서
     그대로 옮긴 값이다. 상태색을 계열색으로 빌려 쓰면 같은 화면의 상태 막대와 같은 색이 되어 "등원 막대"와
     "출석률 선"이 한 뜻처럼 읽힌다. 브랜드 딥그린도 쓰지 않는다(액션 전용).
     지금 웹에서 실제로 쓰는 건 -1 하나(일자별 출석률 추이는 단일 계열)다. -2·-3을 함께 두는 이유는
     계열이 늘 때 즉석에서 색을 지어내지 않게 하기 위해서다 — 세 값은 iOS와 1:1로 맞춰져 있다. */
  --eb-chart-series-1: #5B6CB5;
  --eb-chart-series-2: #8A5F7D;
  --eb-chart-series-3: #4C6876;

  /* 1.6 타이포그래피 */
  --eb-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;

  --eb-text-2xs: 500 11px/16px var(--eb-font-sans);
  --eb-text-xs: 500 12px/18px var(--eb-font-sans);
  --eb-text-sm: 400 13px/20px var(--eb-font-sans);
  --eb-text-base: 400 15px/24px var(--eb-font-sans);
  --eb-text-base-medium: 600 15px/24px var(--eb-font-sans);
  --eb-text-md: 600 16px/24px var(--eb-font-sans);
  --eb-text-lg: 700 20px/28px var(--eb-font-sans);
  --eb-text-xl: 700 26px/34px var(--eb-font-sans);
  --eb-text-2xl: 800 34px/40px var(--eb-font-sans);
  --eb-text-display: 800 44px/54px var(--eb-font-sans);

  /* 1.7 간격 · 반경 · 그림자 · Z축 · 모션 */
  --eb-space-1: 4px;  --eb-space-2: 8px;  --eb-space-3: 12px; --eb-space-4: 16px;
  --eb-space-5: 20px; --eb-space-6: 24px; --eb-space-8: 32px; --eb-space-10: 40px;
  --eb-space-12: 48px; --eb-space-16: 64px; --eb-space-20: 80px;

  --eb-radius-xs: 6px;
  --eb-radius-sm: 8px;
  --eb-radius-md: 12px;
  --eb-radius-lg: 16px;
  --eb-radius-xl: 20px;
  --eb-radius-pill: 999px;

  --eb-shadow-xs: 0 1px 2px rgba(42,27,61,.05);
  --eb-shadow-sm: 0 2px 8px rgba(42,27,61,.06);
  --eb-shadow-card: 0 1px 2px rgba(42,27,61,.04), 0 12px 28px rgba(42,27,61,.07);
  --eb-shadow-popover: 0 8px 16px rgba(42,27,61,.10), 0 2px 4px rgba(42,27,61,.06);
  --eb-shadow-modal: 0 20px 48px rgba(42,27,61,.20), 0 4px 12px rgba(42,27,61,.08);

  --eb-z-dropdown: 100; --eb-z-sticky: 200; --eb-z-modal-backdrop: 300;
  --eb-z-modal: 310; --eb-z-toast: 400; --eb-z-kiosk: 500;

  --eb-ease-standard: cubic-bezier(.2,.8,.2,1);
  --eb-duration-fast: 120ms;
  --eb-duration-base: 200ms;
  --eb-duration-slow: 320ms;

  /* 반응형 기준값(참고용 — CSS 커스텀 프로퍼티는 @media 조건에 쓸 수 없어 미디어쿼리는 리터럴을 쓴다, 가이드 §5) */
  --eb-bp-md: 768px; --eb-bp-lg: 1024px; --eb-bp-xl: 1440px;

  /* 아이콘 크기(가이드 §2.2) */
  --eb-icon-xs: 14px; --eb-icon-sm: 16px; --eb-icon-md: 20px; --eb-icon-lg: 24px; --eb-icon-xl: 40px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --eb-duration-fast: 1ms;
    --eb-duration-base: 1ms;
    --eb-duration-slow: 1ms;
  }
}

/* ============================== 2. 기본 리셋 ============================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: var(--eb-text-base);
  color: var(--eb-ink-900);
  background: var(--eb-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img { max-width: 100%; display: block; }
#app-root { min-height: 100%; }

.eb-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;
}

.eb-meta { font: var(--eb-text-sm); color: var(--eb-ink-700); }

[class*="eb-text-"], .eb-stat-tile__value, time { font-variant-numeric: tabular-nums; }
.eb-text-success { color: var(--eb-success-600); }
.eb-text-info { color: var(--eb-info-600); }
.eb-text-error { color: var(--eb-error-600); }
.eb-text-warning { color: var(--eb-warning-600); }

/* 포커스 링(가이드 §6.2). 마우스 클릭에는 링을 주지 않는다 — :focus-visible만 사용. */
:focus-visible {
  outline: 2px solid var(--eb-primary-700);
  outline-offset: 2px;
  border-radius: var(--eb-radius-xs);
}
.eb-sidebar :focus-visible,
.eb-kiosk :focus-visible,
.eb-member-topbar :focus-visible {
  outline-color: var(--eb-ink-inverse);
}

/* ============================== 3. 아이콘 (가이드 §2.2·§2.3) ============================== */
.eb-icon {
  width: var(--eb-icon-md);
  height: var(--eb-icon-md);
  color: currentColor;
  flex-shrink: 0;
}
.eb-icon--xs { width: var(--eb-icon-xs); height: var(--eb-icon-xs); }
.eb-icon--sm { width: var(--eb-icon-sm); height: var(--eb-icon-sm); }
.eb-icon--md { width: var(--eb-icon-md); height: var(--eb-icon-md); }
.eb-icon--lg { width: var(--eb-icon-lg); height: var(--eb-icon-lg); }
.eb-icon--xl { width: var(--eb-icon-xl); height: var(--eb-icon-xl); }

.eb-icon-button {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--eb-radius-pill);
  color: var(--eb-ink-700);
}
.eb-icon-button:hover { background: var(--eb-surface-sunken); color: var(--eb-ink-900); }
.eb-icon-button--sm { width: 36px; height: 36px; }
.eb-icon-button:disabled,
.eb-academy-switch:disabled,
.eb-sidebar__role:disabled { opacity: .6; cursor: default; }
.eb-icon-button:disabled:hover { background: none; }

/* ============================== 4. 버튼 ============================== */
.eb-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--eb-space-2);
  padding: var(--eb-space-3) var(--eb-space-5);
  border-radius: var(--eb-radius-pill);
  font: var(--eb-text-md);
  border: 1px solid transparent;
  transition: background var(--eb-duration-fast) var(--eb-ease-standard), color var(--eb-duration-fast) var(--eb-ease-standard);
  white-space: nowrap;
}
.eb-button--primary { background: var(--eb-primary-700); color: var(--eb-ink-inverse); }
.eb-button--primary:hover { background: var(--eb-primary-600); }
.eb-button--ghost { background: transparent; color: var(--eb-primary-700); border-color: var(--eb-border-strong); }
.eb-button--ghost:hover { background: var(--eb-primary-050); }
.eb-button--link { background: transparent; color: var(--eb-primary-700); padding: var(--eb-space-2) 0; }
.eb-button--link:hover { text-decoration: underline; }
.eb-button--social { background: var(--eb-ink-inverse); color: var(--eb-ink-900); border-color: var(--eb-border-strong); }
.eb-button--social:hover { background: var(--eb-surface-sunken); }
.eb-button--lg { padding: var(--eb-space-4) var(--eb-space-6); font: var(--eb-text-md); }
.eb-button--sm { padding: var(--eb-space-2) var(--eb-space-4); font: var(--eb-text-sm); }
.eb-button--block { display: flex; width: 100%; }
.eb-button:disabled { opacity: .6; cursor: not-allowed; }

/* ============================== 5. 칩 · 빈 상태 (가이드 §3.4 C1 · §4.2) ============================== */
.eb-chip {
  display: inline-flex; align-items: center; gap: var(--eb-space-1);
  padding: var(--eb-space-1) var(--eb-space-3); border-radius: var(--eb-radius-pill);
  font: var(--eb-text-xs); font-weight: 600;
}
.eb-chip--success { background: var(--eb-success-100); color: var(--eb-success-700); }
.eb-chip--success::before { content: "✓"; font-weight: 800; line-height: 1; }
.eb-chip--success--icon::before { content: none; }
.eb-chip--info    { background: var(--eb-info-100);    color: var(--eb-info-700); }
.eb-chip--warning { background: var(--eb-warning-100); color: var(--eb-warning-700); }
.eb-chip--error   { background: var(--eb-error-100);   color: var(--eb-error-700); }

.eb-empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--eb-space-3); padding: var(--eb-space-16) var(--eb-space-6); color: var(--eb-ink-700);
}
.eb-empty-state .eb-icon { color: var(--eb-ink-500); width: 48px; height: 48px; }
.eb-empty-state h2 { font: var(--eb-text-lg); color: var(--eb-ink-900); }
.eb-empty-state p { max-width: 42ch; }

/* ============================== 6. 랜딩 (가이드 §3.1) ============================== */
.eb-landing { display: flex; flex-direction: column; }

.eb-landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--eb-space-5) clamp(20px, 6vw, 72px);
  position: sticky; top: 0; z-index: var(--eb-z-sticky);
  background: var(--eb-bg);
  border-bottom: 1px solid var(--eb-border-soft);
}
.eb-landing-nav__brand { display: flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-md); color: var(--eb-ink-900); }
.eb-landing-nav__links { display: flex; gap: var(--eb-space-6); font: var(--eb-text-base-medium); color: var(--eb-ink-700); }
.eb-landing-nav__actions { display: flex; align-items: center; gap: var(--eb-space-3); }

.eb-hero {
  display: grid; gap: var(--eb-space-10);
  padding: var(--eb-space-16) clamp(20px, 6vw, 72px);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.eb-hero__title { font: var(--eb-text-display); letter-spacing: -0.01em; color: var(--eb-ink-900); }
.eb-hero__subtitle { margin-top: var(--eb-space-4); font: var(--eb-text-base); color: var(--eb-ink-700); }
.eb-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eb-space-5); margin-top: var(--eb-space-8); }
.eb-hero__media { position: relative; }
.eb-hero__photo {
  width: 100%; aspect-ratio: 4 / 3; border-radius: var(--eb-radius-xl);
  background: var(--eb-surface-sunken); object-fit: cover;
}
.eb-hero__toast {
  position: absolute; left: var(--eb-space-6); bottom: var(--eb-space-6); right: var(--eb-space-6);
  display: flex; align-items: flex-start; gap: var(--eb-space-3);
  background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-popover);
  padding: var(--eb-space-4);
}
.eb-hero__toast strong { display: block; font: var(--eb-text-base-medium); }
.eb-hero__toast .eb-meta { margin-left: var(--eb-space-2); }
.eb-hero__toast p { font: var(--eb-text-sm); color: var(--eb-ink-700); }

.eb-features {
  display: grid; gap: var(--eb-space-6);
  padding: var(--eb-space-12) clamp(20px, 6vw, 72px);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.eb-feature-card {
  background: var(--eb-surface); border-radius: var(--eb-radius-lg);
  box-shadow: var(--eb-shadow-card); padding: var(--eb-space-6);
}
.eb-feature-card__icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: var(--eb-space-4);
  color: var(--eb-ink-900);
}
.eb-feature-card__icon--success { background: var(--eb-success-100); }
.eb-feature-card__icon--rose { background: var(--eb-error-100); }
.eb-feature-card__icon--amber { background: var(--eb-warning-100); }
.eb-feature-card h3 { font: var(--eb-text-md); margin-bottom: var(--eb-space-2); }
.eb-feature-card p { font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-feature-card__more {
  display: inline-flex; align-items: center; gap: var(--eb-space-1);
  margin-top: var(--eb-space-4); font: var(--eb-text-sm); color: var(--eb-primary-600);
}

.eb-feature-details {
  display: grid; gap: var(--eb-space-16);
  padding: var(--eb-space-12) clamp(20px, 6vw, 72px);
  max-width: 1280px; margin: 0 auto; width: 100%;
}
.eb-feature-detail { display: grid; gap: var(--eb-space-8); align-items: center; scroll-margin-top: var(--eb-space-16); }
.eb-feature-detail__media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--eb-radius-xl); background: var(--eb-surface-sunken);
}
.eb-feature-detail__eyebrow { display: block; font: var(--eb-text-base-medium); margin-bottom: var(--eb-space-2); }
.eb-feature-detail__copy h2 { font: var(--eb-text-lg); margin-bottom: var(--eb-space-3); color: var(--eb-ink-900); }
.eb-feature-detail__copy p { font: var(--eb-text-base); color: var(--eb-ink-700); max-width: 52ch; }

.eb-app-download {
  text-align: center; padding: var(--eb-space-12) clamp(20px, 6vw, 72px);
  max-width: 1120px; margin: 0 auto; width: 100%;
}
.eb-app-download h2 { font: var(--eb-text-lg); margin-bottom: var(--eb-space-2); }
.eb-app-download__badges {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--eb-space-4);
  margin: var(--eb-space-6) 0;
}
.eb-store-badge {
  display: inline-flex; align-items: center; gap: var(--eb-space-3);
  padding: var(--eb-space-3) var(--eb-space-5); border-radius: var(--eb-radius-md);
  font: var(--eb-text-sm); text-align: left;
}
.eb-store-badge strong { display: block; font: var(--eb-text-base-medium); }
.eb-store-badge--disabled {
  color: var(--eb-ink-500); background: var(--eb-surface-sunken); opacity: .7;
  cursor: not-allowed;
}

.eb-trust-banner {
  text-align: center; padding: var(--eb-space-16) clamp(20px, 6vw, 72px);
  background: var(--eb-primary-900); color: var(--eb-ink-inverse);
}
.eb-trust-banner .eb-icon { color: var(--eb-ink-inverse); margin-bottom: var(--eb-space-4); }
.eb-trust-banner h2 { font: var(--eb-text-lg); margin-bottom: var(--eb-space-2); }
.eb-trust-banner p { color: rgba(255,255,255,.78); max-width: 52ch; margin: 0 auto; }

.eb-landing-footer {
  padding: var(--eb-space-10) clamp(20px, 6vw, 72px);
  display: flex; flex-direction: column; gap: var(--eb-space-4);
  border-top: 1px solid var(--eb-border-soft);
}
.eb-landing-footer nav { display: flex; flex-wrap: wrap; gap: var(--eb-space-5); font: var(--eb-text-sm); color: var(--eb-ink-700); }

/* ============================== 6.1 이용 가이드 ============================== */
.eb-guide { min-height: 100%; display: flex; flex-direction: column; }
.eb-guide__main { width: min(1120px, 100%); margin: 0 auto; padding: var(--eb-space-16) clamp(20px, 6vw, 72px); }
.eb-guide__hero { max-width: 680px; margin: 0 auto var(--eb-space-16); text-align: center; }
.eb-guide__eyebrow { display: block; margin-bottom: var(--eb-space-3); color: var(--eb-primary-700); font: var(--eb-text-base-medium); }
.eb-guide__hero h1 { color: var(--eb-ink-900); font: var(--eb-text-2xl); }
.eb-guide__hero p { margin-top: var(--eb-space-4); color: var(--eb-ink-700); font: var(--eb-text-base); }
.eb-guide__steps { display: flex; flex-direction: column; gap: var(--eb-space-12); }
.eb-guide-step { display: grid; gap: var(--eb-space-6); align-items: center; }
.eb-guide-step__copy { display: flex; align-items: flex-start; gap: var(--eb-space-4); }
.eb-guide-step__number {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; background: var(--eb-primary-700); color: var(--eb-ink-inverse);
  font: var(--eb-text-md);
}
.eb-guide-step h2 { color: var(--eb-ink-900); font: var(--eb-text-xl); }
.eb-guide-step__copy > div > p { margin-top: var(--eb-space-3); color: var(--eb-ink-700); }
.eb-guide-step__details { display: flex; flex-direction: column; gap: var(--eb-space-2); margin-top: var(--eb-space-4); padding-left: var(--eb-space-5); list-style: decimal; color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-guide-step__screen { padding: var(--eb-space-3); border-radius: var(--eb-radius-xl); background: var(--eb-surface); box-shadow: var(--eb-shadow-card); }
.eb-guide-step__screen img { width: 100%; border: 1px solid var(--eb-border-soft); border-radius: var(--eb-radius-md); }
.eb-guide-step__screen figcaption { margin-top: var(--eb-space-3); color: var(--eb-ink-700); font: var(--eb-text-sm); text-align: center; }
.eb-guide__cta { margin-top: var(--eb-space-16); padding: var(--eb-space-10) var(--eb-space-6); border-radius: var(--eb-radius-xl); background: var(--eb-primary-050); text-align: center; }
.eb-guide__cta h2 { color: var(--eb-ink-900); font: var(--eb-text-xl); }
.eb-guide__cta p { margin: var(--eb-space-2) 0 var(--eb-space-6); color: var(--eb-ink-700); }

/* ============================== 7. 인증 (가이드 §3.2) ============================== */
.eb-auth { min-height: 100vh; display: grid; place-items: center; background: var(--eb-bg); padding: var(--eb-space-6); }
.eb-auth__brand { display: flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-md); position: fixed; top: var(--eb-space-6); left: clamp(20px, 6vw, 72px); }
.eb-auth-card { width: min(420px, 100%); background: var(--eb-surface); border-radius: var(--eb-radius-xl);
  box-shadow: var(--eb-shadow-card); padding: var(--eb-space-8); }
.eb-auth-card h1 { font: var(--eb-text-lg); margin-bottom: var(--eb-space-6); }
.eb-auth-divider {
  display: flex; align-items: center; gap: var(--eb-space-3);
  margin: var(--eb-space-6) 0; font: var(--eb-text-xs); color: var(--eb-ink-700);
}
.eb-auth-divider::before, .eb-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--eb-divider); }
.eb-field { margin-bottom: var(--eb-space-5); }
.eb-field label { display: block; font: var(--eb-text-sm); font-weight: 600; color: var(--eb-ink-700); margin-bottom: var(--eb-space-2); }
.eb-field input {
  width: 100%; border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-sm);
  padding: var(--eb-space-3) var(--eb-space-4); background: var(--eb-surface-sunken); font: var(--eb-text-base);
}
.eb-field input:focus-visible { outline: 2px solid var(--eb-primary-700); outline-offset: 1px; border-color: var(--eb-primary-700); }
.eb-field input[aria-invalid="true"] { border-color: var(--eb-error-700); }
.eb-field__error { color: var(--eb-error-700); font: var(--eb-text-xs); margin-top: var(--eb-space-1); }
.eb-field__aux-link { display: inline-block; margin-top: var(--eb-space-2); font: var(--eb-text-xs); color: var(--eb-primary-700); }
.eb-field--checkbox { display: flex; align-items: flex-start; gap: var(--eb-space-2); }
.eb-field--checkbox input { width: auto; margin-top: 3px; }
.eb-field--checkbox label { font: var(--eb-text-sm); font-weight: 400; color: var(--eb-ink-900); margin: 0; }
.eb-form-error { color: var(--eb-error-700); background: var(--eb-error-100); border-radius: var(--eb-radius-sm);
  padding: var(--eb-space-3) var(--eb-space-4); font: var(--eb-text-sm); margin-bottom: var(--eb-space-5); }
.eb-auth-card__switch { text-align: center; margin-top: var(--eb-space-6); font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-auth-card__switch a { color: var(--eb-primary-700); font-weight: 600; }

/* ============================== 8. QR 착지 (가이드 §3.5.4) ============================== */
.eb-qr-landing {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--eb-space-4); padding: var(--eb-space-8);
  max-width: 480px; margin: 0 auto;
}
.eb-qr-landing .eb-icon--xl { color: var(--eb-primary-700); }
.eb-qr-landing h1 { font: var(--eb-text-lg); }
.eb-qr-landing .eb-app-download__badges { margin: var(--eb-space-6) 0; }

/* ============================== 9. 법적 고지 (골격 — 가이드에 화면 명세 없음, 토큰만 재사용) ============================== */
.eb-legal { max-width: 720px; margin: 0 auto; padding: var(--eb-space-10) var(--eb-space-6) var(--eb-space-16); }
/* 약관·처리방침 본문은 길다. 카드 안쪽 측정 폭이 한국어 45~50자에 오도록 이 페이지만 넓힌다
   (840 - 좌우 48 - 카드 좌우 64 ≈ 728px). 같은 블록을 쓰는 보호자 동의 대기 화면은 720px 유지. */
.eb-legal--document { max-width: 840px; }
.eb-legal__brand { display: inline-flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-md); margin-bottom: var(--eb-space-8); }
.eb-legal__card { background: var(--eb-surface); border-radius: var(--eb-radius-xl); box-shadow: var(--eb-shadow-card); padding: var(--eb-space-8); }
.eb-legal__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eb-space-3); margin-bottom: var(--eb-space-4); }
.eb-legal__header h1 { font: var(--eb-text-xl); }
.eb-legal__lead { margin-top: var(--eb-space-2); color: var(--eb-ink-700); }
.eb-legal__toc { margin-top: var(--eb-space-6); padding: var(--eb-space-4) var(--eb-space-5); background: var(--eb-surface-sunken); border-radius: var(--eb-radius-md); }
.eb-legal__toc h2 { font: var(--eb-text-base-medium); margin-bottom: var(--eb-space-2); }
.eb-legal__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--eb-space-1) var(--eb-space-4); }
.eb-legal__toc a { font: var(--eb-text-sm); color: var(--eb-primary-700); }
.eb-legal__toc a:hover { text-decoration: underline; }
.eb-legal__body { margin-top: var(--eb-space-6); display: flex; flex-direction: column; gap: var(--eb-space-8); color: var(--eb-ink-700); }
.eb-legal__body h2 { font: var(--eb-text-md); color: var(--eb-ink-900); }
.eb-legal__body h3 { font: var(--eb-text-base-medium); color: var(--eb-ink-900); margin-top: var(--eb-space-2); }
.eb-legal__section { display: flex; flex-direction: column; gap: var(--eb-space-3); scroll-margin-top: var(--eb-space-6); }
/* 리셋이 list-style을 지우므로 본문 목록만 되살린다. */
.eb-legal__list { display: flex; flex-direction: column; gap: var(--eb-space-2); padding-left: var(--eb-space-5); }
.eb-legal__list > li { list-style: disc; }
.eb-legal__list--ordered > li { list-style: decimal; }
.eb-legal__callout { padding: var(--eb-space-3) var(--eb-space-4); border-radius: var(--eb-radius-sm); background: var(--eb-warning-100); color: var(--eb-warning-700); }
.eb-legal__footer { margin-top: var(--eb-space-10); padding-top: var(--eb-space-5); border-top: 1px solid var(--eb-divider); display: flex; flex-wrap: wrap; align-items: center; gap: var(--eb-space-2) var(--eb-space-4); }
.eb-legal__footer-links { display: flex; flex-wrap: wrap; gap: var(--eb-space-4); margin-left: auto; }
.eb-legal__footer-links a { font: var(--eb-text-sm); color: var(--eb-primary-700); }
.eb-legal__footer-links a:hover { text-decoration: underline; }
.eb-legal a.eb-button { margin-top: var(--eb-space-8); }

@media (max-width: 767px) {
  .eb-legal { padding: var(--eb-space-6) var(--eb-space-4) var(--eb-space-12); }
  .eb-legal__card { padding: var(--eb-space-5); }
  .eb-legal__toc ol { grid-template-columns: 1fr; }
  .eb-legal__footer-links { margin-left: 0; }
}

/* ============================== 10. 앱 셸 골격 — DashboardShell (가이드 §3.0, S6 본문 제외) ============================== */
.eb-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.eb-sidebar {
  width: 240px; background: var(--eb-primary-900); color: var(--eb-ink-inverse);
  display: flex; flex-direction: column; padding: var(--eb-space-6) var(--eb-space-3); gap: var(--eb-space-6);
}
.eb-sidebar__brand { display: flex; align-items: center; gap: var(--eb-space-2); padding: 0 var(--eb-space-4); font: var(--eb-text-md); }
.eb-sidebar__nav { display: flex; flex-direction: column; gap: var(--eb-space-6); flex: 1; }
.eb-sidebar__group { display: flex; flex-direction: column; gap: var(--eb-space-1); }
.eb-sidebar__item {
  display: flex; align-items: center; gap: var(--eb-space-3);
  padding: var(--eb-space-3) var(--eb-space-4); border-radius: var(--eb-radius-pill);
  color: rgba(255,255,255,.72); font: var(--eb-text-md);
}
.eb-sidebar__item:hover { background: rgba(255,255,255,.08); color: var(--eb-ink-inverse); }
.eb-sidebar__item--active { background: var(--eb-primary-400); color: var(--eb-ink-inverse); }
.eb-sidebar__help { display: flex; align-items: center; gap: var(--eb-space-2); padding: var(--eb-space-2) var(--eb-space-4); color: rgba(255,255,255,.6); font: var(--eb-text-sm); }
.eb-sidebar__role {
  display: flex; align-items: center; gap: var(--eb-space-2);
  padding: var(--eb-space-2) var(--eb-space-3); border-radius: var(--eb-radius-pill);
  background: rgba(255,255,255,.06); color: var(--eb-ink-inverse); font: var(--eb-text-sm);
}
.eb-avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--eb-primary-400); color: var(--eb-ink-inverse); font-weight: 600;
}
.eb-avatar--sm { width: 24px; height: 24px; font: var(--eb-text-xs); }

.eb-shell__main { display: flex; flex-direction: column; min-width: 0; }
.eb-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--eb-space-4) var(--eb-space-8);
  border-bottom: 1px solid var(--eb-border-soft); background: var(--eb-surface);
  position: sticky; top: 0; z-index: var(--eb-z-sticky);
}
.eb-academy-switch, .eb-account-menu {
  display: flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-base-medium);
  padding: var(--eb-space-2) var(--eb-space-3); border-radius: var(--eb-radius-md);
}
.eb-academy-switch:hover, .eb-account-menu:hover { background: var(--eb-surface-sunken); }
.eb-topbar__actions { display: flex; align-items: center; gap: var(--eb-space-2); }
.eb-badge-dot {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--eb-error-600); border: 2px solid var(--eb-surface);
}
.eb-icon-button { position: relative; }

.eb-subscription-banner {
  padding: var(--eb-space-3) var(--eb-space-8); border-bottom: 1px solid currentColor;
  font: var(--eb-text-sm); font-weight: 600;
}
.eb-subscription-banner--trial { background: var(--eb-info-100); color: var(--eb-info-700); }
.eb-subscription-banner--grace,
.eb-subscription-banner--winddown { background: var(--eb-warning-100); color: var(--eb-warning-700); }
.eb-subscription-banner--suspended { background: var(--eb-error-100); color: var(--eb-error-700); }

.eb-shell__content { flex: 1; padding: var(--eb-space-8); }
.eb-page-title { font: var(--eb-text-xl); margin-bottom: var(--eb-space-6); }

/* S6 진입 전 플레이스홀더 콘텐츠(§4.2 empty-state 재사용) */
.eb-console-placeholder { max-width: 480px; margin: 0 auto; }

/* ============================== 11. 회원 셸 골격 — /app/me (가이드 §3.7, S7 본문 제외) ============================== */
.eb-member-shell { min-height: 100vh; display: flex; flex-direction: column; }
.eb-member-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--eb-space-4) var(--eb-space-5);
  border-bottom: 1px solid var(--eb-border-soft); background: var(--eb-surface);
  position: sticky; top: 0; z-index: var(--eb-z-sticky);
}
.eb-member-topbar__brand { display: flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-md); }
.eb-child-switch { display: flex; align-items: center; gap: var(--eb-space-2); font: var(--eb-text-base-medium); }
.eb-member-tabs { display: flex; border-bottom: 1px solid var(--eb-border-soft); background: var(--eb-surface); }
.eb-member-tabs__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--eb-space-1);
  padding: var(--eb-space-3); color: var(--eb-ink-700); font: var(--eb-text-xs);
}
.eb-member-tabs__item--active { color: var(--eb-primary-700); border-bottom: 2px solid var(--eb-primary-700); }
.eb-member-content { flex: 1; padding: var(--eb-space-6) var(--eb-space-5); max-width: 640px; margin: 0 auto; width: 100%; }
.eb-app-banner {
  display: flex; align-items: center; gap: var(--eb-space-2);
  background: var(--eb-primary-050); color: var(--eb-primary-700);
  border-radius: var(--eb-radius-md); padding: var(--eb-space-3) var(--eb-space-4);
  font: var(--eb-text-sm); margin-bottom: var(--eb-space-6);
}
.eb-app-banner a { font-weight: 600; text-decoration: underline; margin-left: auto; white-space: nowrap; }

/* -- 회원 일정: 단발 학원·개인 일정 계약 배선 전의 캘린더/선택일 리스트 골격 -- */
.eb-schedule-calendar { display: flex; flex-direction: column; gap: var(--eb-space-4); }
.eb-schedule-calendar__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--eb-space-4); }
.eb-schedule-calendar__header h2 { margin-bottom: var(--eb-space-1); }
.eb-schedule-calendar__navigation { display: flex; align-items: center; gap: var(--eb-space-2); flex-shrink: 0; }
.eb-schedule-calendar__navigation strong { min-width: 104px; text-align: center; font: var(--eb-text-base-medium); }
.eb-schedule-calendar__legend { display: flex; flex-wrap: wrap; gap: var(--eb-space-2); }
.eb-schedule-calendar__type { display: inline-flex; align-items: center; gap: var(--eb-space-1); padding: var(--eb-space-1) var(--eb-space-2); border-radius: var(--eb-radius-pill); font: var(--eb-text-xs); font-weight: 600; }
.eb-schedule-calendar__type--academy { background: var(--eb-info-100); color: var(--eb-info-700); }
.eb-schedule-calendar__type--personal { background: var(--eb-warning-100); color: var(--eb-warning-700); }
.eb-schedule-calendar__weekdays, .eb-schedule-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.eb-schedule-calendar__weekdays { color: var(--eb-ink-700); font: var(--eb-text-xs); text-align: center; }
.eb-schedule-calendar__day, .eb-schedule-calendar__day--empty { min-height: 42px; border-radius: var(--eb-radius-sm); }
.eb-schedule-calendar__day { display: grid; place-items: center; background: var(--eb-surface-sunken); color: var(--eb-ink-900); font: var(--eb-text-sm); border: 1px solid transparent; }
.eb-schedule-calendar__day:hover { border-color: var(--eb-primary-400); }
.eb-schedule-calendar__day:focus-visible { outline: 2px solid var(--eb-primary-700); outline-offset: 2px; }
.eb-schedule-calendar__day--today { box-shadow: inset 0 0 0 1px var(--eb-primary-700); font-weight: 700; }
.eb-schedule-calendar__day--selected { background: var(--eb-primary-100); color: var(--eb-primary-900); box-shadow: inset 0 0 0 2px var(--eb-primary-700); }
.eb-schedule-calendar__selected { border-top: 1px solid var(--eb-divider); padding-top: var(--eb-space-4); }
.eb-schedule-calendar__selected h3 { font: var(--eb-text-base-medium); margin-bottom: var(--eb-space-1); }

/* ============================== 12. 스태프 콘솔 컴포넌트 (가이드 §3.4·§3.5·§3.6, S6) ============================== */

/* -- 통계 4타일(§3.4) -- */
.eb-stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--eb-space-4); margin-bottom: var(--eb-space-6); }
.eb-stat-tile { background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-card); padding: var(--eb-space-5); display: flex; flex-direction: column; gap: var(--eb-space-2); }
.eb-stat-tile__label { font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-stat-tile__value { font: var(--eb-text-2xl); color: var(--eb-ink-900); }

/* 통계 차트: 상태는 의미색, 모든 값과 라벨은 잉크색으로 읽는다. */
.eb-stats-chart-card { overflow: hidden; }
.eb-stats-chart__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--eb-space-4); }
.eb-stats-chart__heading h2 { margin-bottom: var(--eb-space-1); }
.eb-stats-chart__legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--eb-space-2) var(--eb-space-3); color: var(--eb-ink-700); font: var(--eb-text-xs); }
.eb-stats-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.eb-stats-chart__legend-mark { width: 10px; height: 10px; display: inline-block; flex: 0 0 auto; }
.eb-stats-chart__legend-mark--success { background: var(--eb-chart-attended); border-radius: 50%; }
.eb-stats-chart__legend-mark--warning { background: var(--eb-chart-late); }
.eb-stats-chart__legend-mark--info { background: var(--eb-chart-left); transform: rotate(45deg); }
.eb-stats-chart__legend-mark--error { background: var(--eb-chart-missing); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.eb-stats-chart { position: relative; margin-top: var(--eb-space-5); }
.eb-stats-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.eb-stats-chart__scroll { overflow-x: auto; padding-bottom: var(--eb-space-2); }
.eb-stats-chart__scroll:focus-visible { outline: 2px solid var(--eb-primary-700); outline-offset: 2px; }
.eb-stats-chart__grid { stroke: var(--eb-divider); stroke-width: 1; }
.eb-stats-chart__axis-label, .eb-stats-chart__x-label, .eb-stats-chart__value { fill: var(--eb-ink-700); font: var(--eb-text-xs); }
.eb-stats-chart__x-label { text-anchor: middle; }
.eb-stats-chart__value { fill: var(--eb-ink-900); font-weight: 600; }
.eb-stats-chart__bar-track { fill: var(--eb-surface-sunken); }
.eb-stats-chart__bar { stroke: none; }
.eb-stats-chart__bar--success, .eb-stats-chart__state-marker--success { fill: var(--eb-chart-attended); }
.eb-stats-chart__bar--warning, .eb-stats-chart__state-marker--warning { fill: var(--eb-chart-late); }
.eb-stats-chart__bar--info, .eb-stats-chart__state-marker--info { fill: var(--eb-chart-left); }
.eb-stats-chart__bar--error, .eb-stats-chart__state-marker--error { fill: var(--eb-chart-missing); }
.eb-stats-chart__hit, .eb-stats-chart__point-hit { fill: transparent; cursor: help; pointer-events: all; }
.eb-stats-chart__donut-slice { stroke: none; }
.eb-stats-chart__donut-center-label, .eb-stats-chart__donut-center-value { fill: var(--eb-ink-700); text-anchor: middle; }
.eb-stats-chart__donut-center-label { font: var(--eb-text-xs); }
.eb-stats-chart__donut-center-value { fill: var(--eb-ink-900); font: var(--eb-text-md); font-weight: 700; }
.eb-stats-chart__area { fill: var(--eb-chart-series-1); fill-opacity: .14; }
.eb-stats-chart__line { fill: none; stroke: var(--eb-chart-series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.eb-stats-chart__point { fill: var(--eb-chart-series-1); stroke: var(--eb-surface); stroke-width: 2; }
.eb-stats-chart__crosshair { stroke: var(--eb-ink-500); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.eb-stats-chart__mark:focus { outline: none; }
.eb-stats-chart__mark:focus .eb-stats-chart__bar,
.eb-stats-chart__mark:hover .eb-stats-chart__bar { filter: brightness(.9); }
.eb-stats-chart__mark:focus .eb-stats-chart__point,
.eb-stats-chart__mark:hover .eb-stats-chart__point { stroke: var(--eb-ink-900); stroke-width: 3; }
.eb-stats-chart__mark:focus .eb-stats-chart__donut-slice,
.eb-stats-chart__mark:hover .eb-stats-chart__donut-slice { filter: brightness(.9); }
.eb-stats-chart__tooltip { margin-top: var(--eb-space-3); padding: var(--eb-space-2) var(--eb-space-3); width: fit-content; max-width: 100%; border-radius: var(--eb-radius-sm); background: var(--eb-surface-sunken); color: var(--eb-ink-900); font: var(--eb-text-sm); }
.eb-stats-chart__tooltip[hidden] { display: none; }
.eb-stats-chart__empty { margin-top: var(--eb-space-5); padding: var(--eb-space-5); border: 1px dashed var(--eb-border-soft); border-radius: var(--eb-radius-md); color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-stats-chart__chips { display: flex; flex-wrap: wrap; gap: var(--eb-space-2); margin-top: var(--eb-space-4); }
.eb-stats-chart__late-arrival { margin: var(--eb-space-3) 0 0; }

/* -- 오늘 수업 + 실시간 피드 레이아웃(§3.4) -- */
.eb-today-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--eb-space-6); align-items: start; }
.eb-card { background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-card); padding: var(--eb-space-6); }
.eb-card + .eb-card { margin-top: var(--eb-space-6); }
.eb-card h2 { font: var(--eb-text-md); margin-bottom: var(--eb-space-4); }
.eb-table-scroll { overflow-x: auto; }
.eb-table { width: 100%; border-collapse: collapse; font: var(--eb-text-sm); }
.eb-table th { text-align: left; padding: var(--eb-space-2) var(--eb-space-3); background: var(--eb-surface-sunken); color: var(--eb-ink-700); font-weight: 600; white-space: nowrap; }
.eb-table td { padding: var(--eb-space-3); border-bottom: 1px solid var(--eb-divider); }
.eb-table__row--selected { background: var(--eb-primary-050); }
.eb-table__link { color: var(--eb-primary-700); font-weight: 600; }
.eb-today-actions { display: flex; align-items: center; gap: var(--eb-space-4); margin-top: var(--eb-space-4); }
.eb-delivery-status { margin-top: var(--eb-space-4); }

/* -- 실시간 출결 피드(§3.4, C1 해소안 색상은 Kotlin이 변형자로 지정) -- */
.eb-feed__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--eb-space-4); }
.eb-feed__header h2 { margin: 0; }
.eb-feed__list { display: flex; flex-direction: column; gap: var(--eb-space-3); margin-bottom: var(--eb-space-4); }
.eb-feed__item { display: flex; align-items: center; gap: var(--eb-space-3); position: relative; }
.eb-feed__time { font: var(--eb-text-xs); color: var(--eb-ink-700); width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.eb-feed__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.eb-feed__icon--success { background: var(--eb-success-100); color: var(--eb-success-600); }
.eb-feed__icon--info    { background: var(--eb-info-100);    color: var(--eb-info-600); }
.eb-feed__icon--error   { background: var(--eb-error-100);   color: var(--eb-error-600); }
.eb-feed__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eb-feed__body strong { font: var(--eb-text-sm); font-weight: 600; }
.eb-strike { text-decoration: line-through; color: var(--eb-ink-700); }
.eb-feed__item--cancelled { opacity: .7; }
.eb-chip--xs { padding: 2px var(--eb-space-2); font-size: 10px; }

/* -- ⋯ 팝오버 메뉴(§3.4, §6.3 키보드 규칙) -- */
.eb-popover-menu {
  position: absolute; right: 0; top: 100%; margin-top: var(--eb-space-1);
  background: var(--eb-surface); border-radius: var(--eb-radius-md); box-shadow: var(--eb-shadow-popover);
  padding: var(--eb-space-2); min-width: 160px; z-index: var(--eb-z-dropdown);
  display: flex; flex-direction: column; gap: var(--eb-space-1);
}
.eb-popover-menu[hidden] { display: none; }
.eb-popover-menu button {
  display: flex; align-items: center; gap: var(--eb-space-2);
  padding: var(--eb-space-2) var(--eb-space-3); border-radius: var(--eb-radius-sm);
  font: var(--eb-text-sm); text-align: left; width: 100%; color: var(--eb-ink-900);
}
.eb-popover-menu button:hover { background: var(--eb-surface-sunken); }
.eb-popover-menu__item--danger { color: var(--eb-error-700); }

/* -- 토스트(§4.1) -- */
.eb-toast {
  position: fixed; bottom: var(--eb-space-6); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--eb-space-3);
  border-radius: var(--eb-radius-md); box-shadow: var(--eb-shadow-modal);
  padding: var(--eb-space-3) var(--eb-space-4); z-index: var(--eb-z-toast);
  max-width: min(480px, calc(100vw - var(--eb-space-8)));
}
.eb-toast--success { background: var(--eb-success-700); color: var(--eb-ink-inverse); }
.eb-toast--error { background: var(--eb-error-600); color: var(--eb-ink-inverse); }
.eb-toast__close { margin-left: auto; color: inherit; flex-shrink: 0; }

/* -- 모달(§3.6 "eb-modal 패턴", 출석 처리·이벤트 취소 확인에 재사용) -- */
.eb-modal-backdrop {
  position: fixed; inset: 0; background: rgba(42,27,61,.45); z-index: var(--eb-z-modal-backdrop);
  display: flex; align-items: center; justify-content: center; padding: var(--eb-space-6);
}
.eb-modal {
  position: relative; z-index: var(--eb-z-modal);
  background: var(--eb-surface); border-radius: var(--eb-radius-xl); box-shadow: var(--eb-shadow-modal);
  width: min(520px, 100%); max-height: min(640px, 90vh); overflow-y: auto;
  padding: var(--eb-space-8);
}
.eb-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--eb-space-4); }
.eb-modal__header h2 { font: var(--eb-text-lg); }
.eb-modal__body { display: flex; flex-direction: column; gap: var(--eb-space-4); }
.eb-modal__footer { display: flex; justify-content: flex-end; gap: var(--eb-space-3); margin-top: var(--eb-space-6); }
.eb-roster-row { display: flex; align-items: center; justify-content: space-between; gap: var(--eb-space-3); padding: var(--eb-space-2) 0; border-bottom: 1px solid var(--eb-divider); }
.eb-roster-row__status { display: flex; gap: var(--eb-space-1); }
.eb-status-toggle { padding: var(--eb-space-1) var(--eb-space-3); border-radius: var(--eb-radius-pill); font: var(--eb-text-xs); font-weight: 600; border: 1px solid var(--eb-border-soft); color: var(--eb-ink-700); background: var(--eb-surface); }
.eb-status-toggle--present.eb-status-toggle--active { border-color: transparent; background: var(--eb-success-100); color: var(--eb-success-700); }
.eb-status-toggle--late.eb-status-toggle--active { border-color: transparent; background: var(--eb-warning-100); color: var(--eb-warning-700); }
.eb-status-toggle--absent.eb-status-toggle--active { border-color: transparent; background: var(--eb-error-100); color: var(--eb-error-700); }
.eb-textarea { width: 100%; border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-sm); padding: var(--eb-space-3); background: var(--eb-surface-sunken); font: var(--eb-text-base); resize: vertical; min-height: 80px; }

/* -- 학생 편집 드로어(§3.6.2, 가이드 CSS 그대로) -- */
.eb-drawer { position: fixed; inset: 0; z-index: var(--eb-z-modal); }
.eb-drawer__backdrop { position: fixed; inset: 0; background: rgba(42,27,61,.35); z-index: var(--eb-z-modal-backdrop); }
.eb-drawer__panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 100vw);
  background: var(--eb-surface); box-shadow: var(--eb-shadow-modal); z-index: var(--eb-z-modal);
  display: flex; flex-direction: column; animation: eb-slide-in var(--eb-duration-base) var(--eb-ease-standard); }
@keyframes eb-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.eb-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--eb-space-6); border-bottom: 1px solid var(--eb-border-soft); }
.eb-drawer__header h2 { font: var(--eb-text-lg); }
.eb-drawer__body { flex: 1; overflow-y: auto; padding: var(--eb-space-6); display: flex; flex-direction: column; gap: var(--eb-space-6); }
.eb-drawer__footer { display: flex; justify-content: flex-end; gap: var(--eb-space-3); padding: var(--eb-space-6); border-top: 1px solid var(--eb-border-soft); }
.eb-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--eb-space-4); }
.eb-fieldset legend { font: var(--eb-text-md); padding: 0 0 var(--eb-space-2); }
.eb-guardian-row { display: grid; grid-template-columns: 1fr 100px 1fr auto; gap: var(--eb-space-2); margin-bottom: var(--eb-space-2); align-items: center; }
.eb-guardian-row input, .eb-guardian-row select { border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-sm); padding: var(--eb-space-2) var(--eb-space-3); background: var(--eb-surface-sunken); font: var(--eb-text-sm); }

/* -- 학생 목록 툴바 · 배지(§3.6.1) -- */
.eb-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--eb-space-5); flex-wrap: wrap; gap: var(--eb-space-3); }
.eb-page-header .eb-page-title { margin-bottom: 0; }
.eb-toolbar { display: flex; align-items: center; gap: var(--eb-space-3); margin-bottom: var(--eb-space-5); flex-wrap: wrap; }
.eb-search { display: flex; align-items: center; gap: var(--eb-space-2); border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-pill); padding: var(--eb-space-2) var(--eb-space-4); background: var(--eb-surface); flex: 1; max-width: 320px; }
.eb-search input { border: 0; background: none; flex: 1; font: var(--eb-text-sm); min-width: 0; }
.eb-search input:focus-visible { outline: none; }
.eb-select { display: inline-flex; align-items: center; gap: var(--eb-space-2); border: 1px solid var(--eb-border-strong); border-radius: var(--eb-radius-pill); padding: var(--eb-space-2) var(--eb-space-4); font: var(--eb-text-sm); background: var(--eb-surface); }
.eb-badge-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--eb-space-1); border-radius: var(--eb-radius-pill); background: var(--eb-surface-sunken); color: var(--eb-ink-700); font: var(--eb-text-2xs); }
.eb-list-row { display: flex; align-items: center; gap: var(--eb-space-3); padding: var(--eb-space-3) 0; border-bottom: 1px solid var(--eb-divider); }

/* -- 출결 QR 관리 화면(§3.5.1) -- */
.eb-qr-panel { display: flex; gap: var(--eb-space-8); align-items: center; flex-wrap: wrap; }
.eb-qr-panel__preview { display: flex; flex-direction: column; align-items: center; gap: var(--eb-space-3); }
.eb-qr-code { width: 200px; height: 200px; background: #fff; border: 1px solid var(--eb-border-soft); border-radius: var(--eb-radius-md); display: grid; place-items: center; padding: var(--eb-space-3); }
.eb-qr-code img, .eb-qr-code canvas { width: 100%; height: 100%; }
.eb-qr-panel__rotate { display: flex; align-items: center; gap: var(--eb-space-1); font: var(--eb-text-xs); color: var(--eb-ink-700); }
.eb-qr-panel__meta { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--eb-space-4); }
.eb-qr-panel__meta dl { display: flex; flex-direction: column; gap: var(--eb-space-2); }
.eb-qr-panel__meta dl > div { display: flex; justify-content: space-between; font: var(--eb-text-sm); }
.eb-qr-panel__meta dt { color: var(--eb-ink-700); }
.eb-scan-list { display: flex; flex-direction: column; gap: var(--eb-space-2); margin-top: var(--eb-space-3); }
.eb-scan-list li { display: flex; gap: var(--eb-space-3); font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-scan-list time { color: var(--eb-ink-700); }
.eb-spin { animation: eb-spin-rotate 1.2s linear infinite; display: inline-block; }
@keyframes eb-spin-rotate { to { transform: rotate(360deg); } }

/* -- 출결 QR 키오스크 전체화면(§3.5.2·§3.5.3) -- */
.eb-kiosk { background: var(--eb-primary-900); color: var(--eb-ink-inverse); min-height: 100vh;
  display: flex; flex-direction: column; }
.eb-kiosk__stage { position: relative; flex: 1; display: grid; grid-template-rows: auto 1fr auto; padding: var(--eb-space-8); gap: var(--eb-space-6); }
.eb-kiosk__header { display: flex; align-items: center; justify-content: space-between; font: var(--eb-text-md); }
.eb-kiosk__clock { font-variant-numeric: tabular-nums; }
.eb-kiosk__qr-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--eb-space-4); position: relative; }
.eb-kiosk__qr-frame { position: relative; display: grid; place-items: center; width: calc(min(60vh, 480px) + 64px); aspect-ratio: 1; isolation: isolate; }
.eb-qr-code--kiosk { position: relative; z-index: 1; background: #fff; border-radius: var(--eb-radius-lg); padding: var(--eb-space-6); width: min(60vh, 480px); aspect-ratio: 1; display: grid; place-items: center; }
.eb-qr-code--kiosk img, .eb-qr-code--kiosk canvas { width: 100%; height: 100%; }
.eb-qr-code--kiosk[hidden] { display: none; }
.eb-kiosk__ring { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.eb-kiosk__ring-track { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 3; }
.eb-kiosk__ring-progress { fill: none; stroke: var(--eb-ink-inverse); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 289; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1s linear; }
.eb-kiosk__hint { font: var(--eb-text-md); color: rgba(255,255,255,.8); }
.eb-kiosk__wakelock-warning { background: rgba(255,255,255,.1); border-radius: var(--eb-radius-md); padding: var(--eb-space-3) var(--eb-space-4); font: var(--eb-text-sm); text-align: center; }
.eb-kiosk__recent { display: flex; gap: var(--eb-space-4); overflow-x: auto; justify-content: center; list-style: none; }
.eb-kiosk__recent-item { display: flex; align-items: center; gap: var(--eb-space-2);
  background: rgba(255,255,255,.08); border-radius: var(--eb-radius-pill); padding: var(--eb-space-2) var(--eb-space-4); white-space: nowrap; }
.eb-kiosk__recent-item--in svg { color: var(--eb-success-600); }
.eb-kiosk__recent-item--out svg { color: var(--eb-info-600); }
.eb-kiosk__exit { position: absolute; top: var(--eb-space-6); right: var(--eb-space-6); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--eb-ink-inverse); }
.eb-kiosk__overlay { position: fixed; inset: 0; z-index: var(--eb-z-kiosk); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--eb-space-4);
  background: var(--eb-primary-900); text-align: center; padding: var(--eb-space-8); }
.eb-kiosk__overlay[hidden] { display: none; }
.eb-kiosk__overlay h2 { font: var(--eb-text-lg); }
.eb-kiosk__overlay p { color: rgba(255,255,255,.8); max-width: 52ch; }

/* ============================== 13. 회원 뷰 컴포넌트 (가이드 §3.7·§3.8, S7 후속) ============================== */
/* .eb-card·.eb-empty-state·.eb-list-row·.eb-badge-count·.eb-chip·.eb-field--checkbox는 이미 위에서
   정의됐다(§5·§12) — lane D 목록의 "가이드에 등장하나 규칙 미정의" 항목 중 이 6개는 재정의하지 않는다. */

/* -- 오늘 상태 타임라인(가이드 §3.7, 토큰 그대로) -- */
.eb-timeline { display: flex; justify-content: space-between; gap: var(--eb-space-2); }
.eb-timeline__step {
  display: flex; flex-direction: column; align-items: center; gap: var(--eb-space-1);
  flex: 1; text-align: center; font: var(--eb-text-xs); color: var(--eb-ink-700);
}
.eb-timeline__step time { font-variant-numeric: tabular-nums; color: var(--eb-ink-700); }
.eb-timeline__step--done .eb-icon { color: var(--eb-success-600); }
.eb-timeline__step--current .eb-icon { color: var(--eb-info-600); animation: eb-timeline-pulse 3s ease 1; }
.eb-timeline__step--pending .eb-icon { color: var(--eb-ink-500); }
@keyframes eb-timeline-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .eb-timeline__step--current .eb-icon { animation: none; }
}

/* -- 오늘 상태 카드 · 다음 수업 · 바로가기(§3.7) --
   D의 실제 마크업은 `.eb-today-status-card`를 `.eb-card`와 함께 쓰지 않고 단독으로 쓴다
   (`<section class="eb-today-status-card">`) — 그래서 카드 박스 스타일을 여기서 직접 갖는다
   (.eb-feature-card·.eb-card와 같은 surface+radius-lg+shadow-card 값, 문서상 "확장"의 실제 구현). */
.eb-today-status-card {
  background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-card);
  padding: var(--eb-space-8) var(--eb-space-6); margin-bottom: var(--eb-space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--eb-space-2); text-align: center;
}
.eb-today-status-card .eb-icon { color: var(--eb-primary-700); }
.eb-today-status-card h2 { font: var(--eb-text-lg); }
.eb-today-status-card .eb-timeline { width: 100%; margin-top: var(--eb-space-6); }
.eb-next-class { margin-bottom: var(--eb-space-6); }
.eb-quick-links { display: flex; flex-direction: column; gap: var(--eb-space-2); }
/* eb-list-row 안의 마지막 엘리먼트(배지·셰브런 등)를 오른쪽 끝으로 — 태그 사이 매핑 텍스트는
   래핑 요소가 없어 flex:1을 줄 수 없으므로, 대신 마지막 자식을 auto-margin으로 밀어낸다. */
.eb-list-row > :last-child { margin-left: auto; }

/* -- 알림함(§3.8). 아이콘 배지 색상은 가이드 CSS 그대로, 리스트/아이템 레이아웃은 D 마크업 대조로 확정 -- */
.eb-notification-list { display: flex; flex-direction: column; }
.eb-notification-item { position: relative; display: flex; align-items: flex-start; gap: var(--eb-space-3); padding: var(--eb-space-3) var(--eb-space-2); border-radius: var(--eb-radius-md); }
.eb-notification-item--unread { background: var(--eb-primary-050); }
.eb-notification-item__link { display: flex; align-items: flex-start; gap: var(--eb-space-3); flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.eb-notification-item__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.eb-notification-item__icon--success { background: var(--eb-success-100); color: var(--eb-success-700); }
.eb-notification-item__icon--info    { background: var(--eb-info-100);    color: var(--eb-info-700); }
.eb-notification-item__icon--neutral { background: var(--eb-surface-sunken); color: var(--eb-ink-700); }
.eb-notification-item__body { display: flex; flex-direction: column; gap: var(--eb-space-1); min-width: 0; }
.eb-notification-item__body strong { font: var(--eb-text-base-medium); }
.eb-notification-item__body p { font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-notification-item__cta { flex-shrink: 0; align-self: center; }
.eb-notification-item .eb-badge-dot { position: absolute; top: var(--eb-space-3); right: var(--eb-space-2); }
.eb-notifications__group-label { font: var(--eb-text-sm); font-weight: 600; color: var(--eb-ink-700); margin: var(--eb-space-5) 0 var(--eb-space-2); }
.eb-notifications__group-label:first-child { margin-top: 0; }

/* -- 필터 칩(role=tablist, §3.8) — 기존 .eb-chip 토큰 재사용 + 비선택 상태는 보더로 구분 -- */
.eb-filter-chips { display: flex; gap: var(--eb-space-2); overflow-x: auto; margin-bottom: var(--eb-space-5); }
.eb-filter-chip {
  display: inline-flex; align-items: center; gap: var(--eb-space-1); white-space: nowrap;
  padding: var(--eb-space-1) var(--eb-space-3); border-radius: var(--eb-radius-pill);
  font: var(--eb-text-xs); font-weight: 600; color: var(--eb-ink-700);
  background: var(--eb-surface); border: 1px solid var(--eb-border-soft);
}
.eb-filter-chip--active { border-color: transparent; background: var(--eb-primary-100); color: var(--eb-primary-700); }

/* -- 공지 · 과제 행(D 신규 명명, 멀티라인) -- */
.eb-notice-item, .eb-assignment-item {
  display: flex; align-items: flex-start; gap: var(--eb-space-3);
  padding: var(--eb-space-4) 0; border-bottom: 1px solid var(--eb-divider);
}
.eb-notice-item:last-child, .eb-assignment-item:last-child { border-bottom: 0; }
.eb-notice-item > div, .eb-assignment-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--eb-space-1); }
.eb-notice-item strong, .eb-assignment-item strong { font: var(--eb-text-base-medium); }
.eb-notice-item p { font: var(--eb-text-sm); color: var(--eb-ink-700); }
.eb-notice-item > .eb-notice-actions, .eb-assignment-item > .eb-notice-actions { flex: 0 0 auto; flex-direction: row; align-items: center; gap: var(--eb-space-2); }

/* 과제 자료 칩 줄. 파일 수만큼 늘어나므로 줄바꿈한다 — 칩 안의 링크가 파일을 연다. */
.eb-chip-row { display: flex; flex-wrap: wrap; gap: var(--eb-space-2); margin-top: var(--eb-space-1); }
.eb-chip-row .eb-button--link { font: var(--eb-text-xs); font-weight: 600; padding: 0; }

/* ============================== 14. 반응형 (가이드 §5) ============================== */
@media (max-width: 1439px) and (min-width: 1024px) {
  .eb-shell { grid-template-columns: 72px 1fr; }
  .eb-sidebar { width: 72px; align-items: center; padding-inline: var(--eb-space-2); }
  .eb-sidebar__item span, .eb-sidebar__brand-name, .eb-sidebar__help span, .eb-sidebar__role span { display: none; }
  .eb-sidebar__brand { padding: 0; }
  /* 오늘 수업: 2열이지만 피드 폭 축소(가이드 §5 반응형 표) */
  .eb-today-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
}
@media (max-width: 1023px) {
  .eb-shell { grid-template-columns: 1fr; }
  /* 후속 재점검(가이드 §5): 375·768px에서 사이드바를 그냥 숨기면(display:none) 대체 내비게이션이 없어
     화면 전환 수단이 사라진다. topbar의 `.eb-topbar__menu-trigger`(햄버거)가 이 오프캔버스 드로어를 연다
     — display:none이 아니라 transform으로 화면 밖에 두고 JS가 `--open`을 토글한다. */
  .eb-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: var(--eb-z-modal);
    transform: translateX(-100%);
    transition: transform var(--eb-duration-base) var(--eb-ease-standard);
  }
  .eb-sidebar--open { transform: translateX(0); box-shadow: var(--eb-shadow-modal); }
  .eb-sidebar-backdrop {
    position: fixed; inset: 0; z-index: var(--eb-z-modal-backdrop);
    background: rgba(42,27,61,.35);
  }
  .eb-sidebar-backdrop[hidden] { display: none; }
  .eb-topbar__menu-trigger { display: inline-grid; }
  /* 375·768px 모두 1열 스택, 피드가 목록 아래(DOM 순서가 이미 그렇다) */
  .eb-today-layout { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
  /* 1024px 이상은 고정 사이드바(72px 축소 또는 240px 전체)가 항상 보이므로 트리거 자체가 필요 없다. */
  .eb-topbar__menu-trigger { display: none; }
  .eb-sidebar-backdrop { display: none; }
}

@media (min-width: 1024px) {
  .eb-hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .eb-features { grid-template-columns: repeat(3, 1fr); }
  .eb-feature-detail { grid-template-columns: 1fr 1fr; gap: var(--eb-space-10); }
  .eb-feature-detail--reverse .eb-feature-detail__media { order: 2; }
  .eb-feature-detail--reverse .eb-feature-detail__copy { order: 1; }
  .eb-guide-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--eb-space-10); }
  .eb-guide-step:nth-child(even) .eb-guide-step__copy { order: 2; }
  .eb-guide-step:nth-child(even) .eb-guide-step__screen { order: 1; }
  /* 회원 셸 데스크톱: 모바일 탭바를 좌측 사이드바로 전환(스태프 콘솔과 같은 골격) */
  .eb-member-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .eb-member-topbar { grid-column: 1 / -1; padding: var(--eb-space-4) var(--eb-space-8); }
  .eb-member-tabs {
    flex-direction: column; gap: var(--eb-space-1);
    padding: var(--eb-space-6) var(--eb-space-3);
    border-bottom: none; border-right: 1px solid var(--eb-border-soft);
  }
  .eb-member-tabs__item {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: var(--eb-space-3);
    padding: var(--eb-space-3) var(--eb-space-4); border-radius: var(--eb-radius-pill);
    font: var(--eb-text-base-medium);
  }
  .eb-member-tabs__item:hover { background: var(--eb-surface-sunken); }
  .eb-member-tabs__item--active { border-bottom: none; background: var(--eb-primary-050); color: var(--eb-primary-700); }
  .eb-member-content { grid-column: 2; max-width: 840px; padding: var(--eb-space-8) var(--eb-space-10); }
  .eb-quick-links { flex-direction: row; }
  .eb-quick-links .eb-list-row { flex: 1; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .eb-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .eb-hero { grid-template-columns: 1fr; padding-top: var(--eb-space-10); }
  .eb-hero__media { order: 2; }
  .eb-hero__copy { order: 1; }
  .eb-features { grid-template-columns: 1fr; }
  .eb-landing-nav__links { display: none; }
  .eb-shell__content { padding: var(--eb-space-5); }
  .eb-topbar { padding: var(--eb-space-3) var(--eb-space-5); }
  /* 375px: 통계 4타일 → 2×2(가이드 §5 반응형 표) */
  .eb-stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .eb-stats-chart__heading { flex-direction: column; }
  .eb-stats-chart__legend { justify-content: flex-start; }
  .eb-schedule-calendar__header { flex-direction: column; }
  .eb-schedule-calendar__navigation { width: 100%; justify-content: space-between; }
  .eb-schedule-calendar__navigation strong { flex: 1; min-width: 0; }
  .eb-page-header { align-items: flex-start; flex-direction: column; }
  .eb-drawer__panel { width: 100vw; }
}

/* ============================== 15. 플랫폼 관리자 대시보드 ============================== */
/* 학원 멤버십을 전제로 하는 .eb-shell과 분리한다. */
.eb-platform-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.eb-platform-sidebar {
  display: flex; flex-direction: column; gap: var(--eb-space-5); padding: var(--eb-space-6) var(--eb-space-3);
  background: var(--eb-primary-900); color: var(--eb-ink-inverse);
}
.eb-platform-sidebar__brand { display: flex; align-items: center; gap: var(--eb-space-2); padding: 0 var(--eb-space-4); font: var(--eb-text-md); }
.eb-platform-sidebar__label { padding: 0 var(--eb-space-4); color: rgba(255,255,255,.56); font: var(--eb-text-xs); font-weight: 600; }
.eb-platform-nav { display: flex; flex-direction: column; gap: var(--eb-space-1); flex: 1; }
.eb-platform-nav__item {
  display: flex; align-items: center; gap: var(--eb-space-3); padding: var(--eb-space-3) var(--eb-space-4);
  border-radius: var(--eb-radius-pill); color: rgba(255,255,255,.72); font: var(--eb-text-md);
}
.eb-platform-nav__item:hover { background: rgba(255,255,255,.08); color: var(--eb-ink-inverse); }
.eb-platform-nav__item--active { background: var(--eb-primary-400); color: var(--eb-ink-inverse); }
.eb-platform-sidebar__help { display: flex; align-items: center; gap: var(--eb-space-2); padding: var(--eb-space-2) var(--eb-space-4); color: rgba(255,255,255,.6); font: var(--eb-text-sm); }
.eb-platform-main { display: flex; flex-direction: column; min-width: 0; }
.eb-platform-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--eb-space-4);
  padding: var(--eb-space-4) var(--eb-space-8); border-bottom: 1px solid var(--eb-border-soft); background: var(--eb-surface);
}
.eb-platform-topbar > p { font: var(--eb-text-base-medium); }
.eb-platform-topbar__actions { display: flex; align-items: center; gap: var(--eb-space-3); }
.eb-platform-account { color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-platform-content { flex: 1; padding: var(--eb-space-8); }
.eb-platform-loading { display: flex; align-items: center; gap: var(--eb-space-3); color: var(--eb-ink-700); }
.eb-platform-overview { display: grid; grid-template-columns: minmax(260px, 420px); }
.eb-platform-overview__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--eb-space-3); }
.eb-platform-overview__label { color: var(--eb-ink-700); font: var(--eb-text-base-medium); }
.eb-platform-overview__value { font: var(--eb-text-2xl); color: var(--eb-primary-700); }
.eb-platform-overview__value span { margin-left: var(--eb-space-1); font: var(--eb-text-md); }
.eb-platform-overview__card .eb-button { margin-top: var(--eb-space-2); }

.eb-platform-approval { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap: var(--eb-space-6); align-items: start; }
.eb-platform-approval__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--eb-space-3); margin-bottom: var(--eb-space-4); }
.eb-platform-approval__heading h2 { margin: 0; }
.eb-platform-request-list { display: flex; flex-direction: column; gap: var(--eb-space-2); }
.eb-platform-request {
  display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--eb-space-1); text-align: left;
  padding: var(--eb-space-4); border: 1px solid var(--eb-border-soft); border-radius: var(--eb-radius-md); background: var(--eb-surface);
}
.eb-platform-request:hover { background: var(--eb-primary-050); border-color: var(--eb-primary-400); }
.eb-platform-request--selected { background: var(--eb-primary-050); border-color: var(--eb-primary-700); box-shadow: inset 0 0 0 1px var(--eb-primary-700); }
.eb-platform-request strong { font: var(--eb-text-base-medium); }
.eb-platform-request span { color: var(--eb-ink-700); font: var(--eb-text-xs); }
.eb-platform-detail-list { display: flex; flex-direction: column; margin-bottom: var(--eb-space-6); }
.eb-platform-detail-list > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--eb-space-4); padding: var(--eb-space-3) 0; border-bottom: 1px solid var(--eb-divider); }
.eb-platform-detail-list dt { color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-platform-detail-list dd { margin: 0; overflow-wrap: anywhere; font: var(--eb-text-base-medium); }
.eb-platform-approval__detail .eb-form-error { margin-bottom: var(--eb-space-4); }

@media (max-width: 767px) {
  .eb-platform-shell { display: flex; flex-direction: column; }
  .eb-platform-sidebar { gap: var(--eb-space-3); padding: var(--eb-space-4) var(--eb-space-5); }
  .eb-platform-sidebar__label, .eb-platform-sidebar__help { display: none; }
  .eb-platform-nav { flex-direction: row; flex: initial; overflow-x: auto; }
  .eb-platform-nav__item { flex: 0 0 auto; padding: var(--eb-space-2) var(--eb-space-3); font: var(--eb-text-sm); }
  .eb-platform-topbar, .eb-platform-content { padding-left: var(--eb-space-5); padding-right: var(--eb-space-5); }
  .eb-platform-topbar { padding-top: var(--eb-space-3); padding-bottom: var(--eb-space-3); }
  .eb-platform-account { display: none; }
  .eb-platform-content { padding-top: var(--eb-space-5); padding-bottom: var(--eb-space-5); }
  .eb-platform-approval { grid-template-columns: 1fr; }
}

/* ---------- 공지 서식 본문 (서버가 살균한 contentHtml) ---------- */
/* 태그 집합은 functions/src/common/html.ts 의 허용 목록과 같다. 그 밖의 태그는 도착하지 않는다. */
.eb-richtext { font: var(--eb-text-md); color: var(--eb-ink-900); line-height: 1.65; word-break: break-word; }
.eb-richtext p { margin: 0 0 var(--eb-space-3); }
.eb-richtext h2 { font: var(--eb-text-lg); font-weight: 700; margin: var(--eb-space-5) 0 var(--eb-space-2); }
.eb-richtext h3 { font: var(--eb-text-md); font-weight: 700; margin: var(--eb-space-4) 0 var(--eb-space-2); }
.eb-richtext ul, .eb-richtext ol { margin: 0 0 var(--eb-space-3); padding-left: 1.5em; }
.eb-richtext li { margin: 0 0 var(--eb-space-1); }
.eb-richtext blockquote { margin: 0 0 var(--eb-space-3); padding: var(--eb-space-2) var(--eb-space-4); border-left: 3px solid var(--eb-primary-400); color: var(--eb-ink-700); }
.eb-richtext a { color: var(--eb-primary-700); text-decoration: underline; }

/* Quill(공지 작성기) — 스노우 테마 위에 앱 토큰만 입힌다. */
.eb-editor .ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; border-color: var(--eb-divider); background: var(--eb-surface); }
.eb-editor .ql-container.ql-snow { border-radius: 0 0 10px 10px; border-color: var(--eb-divider); font: var(--eb-text-md); }
.eb-editor .ql-editor { min-height: 240px; line-height: 1.65; color: var(--eb-ink-900); }
.eb-editor .ql-editor.ql-blank::before { color: var(--eb-ink-500); font-style: normal; }
.eb-editor .ql-snow .ql-picker-label, .eb-editor .ql-snow .ql-stroke { color: var(--eb-ink-700); stroke: var(--eb-ink-700); }
.eb-editor .ql-snow .ql-active .ql-stroke, .eb-editor .ql-snow .ql-picker-label.ql-active { stroke: var(--eb-primary-700); color: var(--eb-primary-700); }

/* ============================== 6.2 랜딩 앱 섹션 · 스토어 배지 (두 앱 체제, APP_SPLIT_PLAN) ============================== */
.eb-store-badge--live {
  color: var(--eb-ink-900); background: var(--eb-surface);
  border: 1px solid var(--eb-border-strong); box-shadow: var(--eb-shadow-card);
  transition: background var(--eb-duration-fast) var(--eb-ease-standard), border-color var(--eb-duration-fast) var(--eb-ease-standard);
}
.eb-store-badge--live:hover { background: var(--eb-primary-050); border-color: var(--eb-primary-600); }
.eb-store-badge--live .eb-icon { color: var(--eb-primary-700); }
.eb-hero__ctas .eb-button .eb-icon { flex: none; }
.eb-app-download > .eb-meta a { text-decoration: underline; }
.eb-app-cards { display: grid; gap: var(--eb-space-6); margin: var(--eb-space-8) 0 var(--eb-space-6); text-align: left; }
.eb-app-card {
  display: flex; flex-direction: column; gap: var(--eb-space-4);
  background: var(--eb-surface); border-radius: var(--eb-radius-xl);
  box-shadow: var(--eb-shadow-card); padding: var(--eb-space-6);
}
.eb-app-card__head { display: flex; align-items: center; gap: var(--eb-space-4); }
.eb-app-card__icon { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: var(--eb-shadow-card); }
.eb-app-card__role { display: block; margin-bottom: var(--eb-space-1); color: var(--eb-primary-700); font: var(--eb-text-xs); font-weight: 600; }
.eb-app-card h3 { font: var(--eb-text-md); color: var(--eb-ink-900); }
.eb-app-card ul {
  display: flex; flex-direction: column; gap: var(--eb-space-1);
  padding-left: var(--eb-space-5); list-style: disc; color: var(--eb-ink-700); font: var(--eb-text-sm);
}
.eb-app-card .eb-app-download__badges { justify-content: flex-start; margin: 0; }
.eb-app-card > .eb-meta { margin-top: auto; }
.eb-app-card > .eb-meta a { text-decoration: underline; }

/* ============================== 6.3 이용 가이드 — 역할 안내 · 요금제 · 학생/보호자 단계 ============================== */
.eb-guide__jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--eb-space-3); margin-top: var(--eb-space-6); }
.eb-guide__jump a {
  padding: var(--eb-space-2) var(--eb-space-4); border-radius: var(--eb-radius-pill);
  border: 1px solid var(--eb-border-strong); color: var(--eb-primary-700); font: var(--eb-text-sm);
}
.eb-guide__jump a:hover { background: var(--eb-primary-050); }
.eb-guide__section { margin-top: var(--eb-space-16); scroll-margin-top: var(--eb-space-16); }
.eb-guide__section > h2 { color: var(--eb-ink-900); font: var(--eb-text-xl); margin-bottom: var(--eb-space-3); }
.eb-guide__lead { color: var(--eb-ink-700); font: var(--eb-text-base); max-width: 64ch; margin-bottom: var(--eb-space-8); }
.eb-guide__section > .eb-meta { margin-top: var(--eb-space-6); }
.eb-guide__section > .eb-meta a, .eb-guide-role a, .eb-guide-step__details a, .eb-guide-mini a:not(.eb-store-badge) { text-decoration: underline; }
.eb-guide-roles { display: grid; gap: var(--eb-space-4); }
.eb-guide-role { background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-card); padding: var(--eb-space-5); }
.eb-guide-role h3 { display: flex; align-items: center; gap: var(--eb-space-2); margin-bottom: var(--eb-space-2); color: var(--eb-ink-900); font: var(--eb-text-md); }
.eb-guide-role h3 .eb-icon { color: var(--eb-primary-700); }
.eb-guide-role p { color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-guide-role .eb-meta { margin-top: var(--eb-space-2); }
.eb-guide-step h3 { color: var(--eb-ink-900); font: var(--eb-text-xl); }
.eb-guide-step__copy .eb-app-download__badges { justify-content: flex-start; margin: var(--eb-space-4) 0 0; }
.eb-guide-plans { padding: var(--eb-space-5); }
.eb-guide-plans__table { width: 100%; border-collapse: collapse; color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-guide-plans__table caption { caption-side: top; padding: 0 0 var(--eb-space-3); text-align: left; color: var(--eb-ink-900); font: var(--eb-text-base-medium); }
.eb-guide-plans__table th, .eb-guide-plans__table td { padding: var(--eb-space-3) var(--eb-space-2); border-bottom: 1px solid var(--eb-border-soft); text-align: left; vertical-align: top; }
.eb-guide-plans__table thead th { color: var(--eb-ink-900); font: var(--eb-text-base-medium); }
.eb-guide-plans__table tbody th { font-weight: 500; color: var(--eb-ink-900); white-space: nowrap; }
.eb-guide-plans__table td strong { color: var(--eb-ink-900); font: var(--eb-text-base-medium); }
.eb-guide-plans figcaption { text-align: left; }
.eb-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eb-guide-mini { display: grid; gap: var(--eb-space-4); list-style: none; padding: 0; counter-reset: guide-mini; }
.eb-guide-mini li {
  position: relative; padding: var(--eb-space-5) var(--eb-space-5) var(--eb-space-5) 68px;
  background: var(--eb-surface); border-radius: var(--eb-radius-lg); box-shadow: var(--eb-shadow-card);
}
.eb-guide-mini li::before {
  counter-increment: guide-mini; content: counter(guide-mini);
  position: absolute; left: var(--eb-space-5); top: var(--eb-space-5);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--eb-primary-700); color: var(--eb-ink-inverse); font: var(--eb-text-base-medium);
}
.eb-guide-mini h3 { margin-bottom: var(--eb-space-1); color: var(--eb-ink-900); font: var(--eb-text-md); }
.eb-guide-mini p { color: var(--eb-ink-700); font: var(--eb-text-sm); }
.eb-guide-mini .eb-app-download__badges { justify-content: flex-start; margin: var(--eb-space-3) 0 0; }
.eb-guide__cta .eb-app-download__badges { margin: var(--eb-space-5) 0 0; }
.eb-landing-footer .eb-meta a { text-decoration: underline; }

@media (min-width: 768px) {
  .eb-app-cards { grid-template-columns: 1fr 1fr; }
  .eb-guide-roles { grid-template-columns: repeat(3, 1fr); }
}