/* ═══════════════════════════════════════════════════════════
   와와 학원 · 설명 AI 목업 — 공통 토큰 + a11y
   ───────────────────────────────────────────────────────────
   Single Source of Truth for all 9 mockups.
   React 마이그레이션 시 → apps/student/src/styles/tokens.css 로 머지.

   유지보수: 색·타입·간격 변경은 *오직 이 파일에서만*. 각 mockup의
   inline <style> 블록은 컴포넌트 한정 스타일만 가짐.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ───────── 잉크 스케일 (순흑 회피, 92% blueish ink) */
  --ink:    rgba(17, 20, 26, 0.92);
  --ink-72: rgba(17, 20, 26, 0.72);
  --ink-60: rgba(17, 20, 26, 0.60);
  --ink-40: rgba(17, 20, 26, 0.40);
  --ink-20: rgba(17, 20, 26, 0.20);
  --ink-09: rgba(17, 20, 26, 0.09);
  --ink-05: rgba(17, 20, 26, 0.05);

  /* ───────── 배경 (의미 채널별 분리) */
  --bg-canvas:   #fafbfc;        /* 앱 기본 배경 */
  --bg-card:     #ffffff;        /* 카드 표면 */
  --bg-paper:    #f7f5ee;        /* 단원지 인용 / 종이톤 */
  --bg-question: #f1f3f9;        /* 학생 질문 박스 */
  --bg-photo:    #efece4;        /* 노트 사진 베이스 */

  /* ───────── SVG 도메인 톤 (이전엔 하드코드) */
  --paper-textbook: #faf6ee;     /* 교과서 페이지 누런종이 */
  --rule-line:      #d9d2bd;     /* 노트 가로줄 */
  --rule-line-soft: #c8b89a;     /* 노트 줄 (옅게) */
  --margin-line:    #d99a9a;     /* 노트 빨간 마진선 */
  --textbook-blue:  #1c4ea8;     /* 교과서 헤더 강조 */

  /* ───────── primary (앱 강조) */
  --primary:         #2d3a8c;
  --primary-hover:   #252f73;
  --primary-surface: rgba(45, 58, 140, 0.06);

  /* ───────── 타입 컬러 (Pokemon 18 中 6 — 단원/과목 시그니처) */
  --type-electric: #FAC000;      /* 수행평가 — 번쩍 */
  --type-water:    #2980EF;      /* 단어/언어 */
  --type-grass:    #3FA129;      /* 증명·논리 */
  --type-psychic:  #F584A8;      /* 추상/문법 */
  --type-ground:   #915121;      /* 시험지 */
  --type-dragon:   #5060E1;      /* 도전·최난 */

  --type-electric-surface: rgba(250, 192, 0, 0.08);
  --type-water-surface:    rgba(41, 128, 239, 0.08);
  --type-grass-surface:    rgba(63, 161, 41, 0.08);
  --type-psychic-surface:  rgba(245, 132, 168, 0.08);
  --type-ground-surface:   rgba(145, 81, 33, 0.08);
  --type-dragon-surface:   rgba(80, 96, 225, 0.08);

  /* ───────── 시멘틱 */
  --success: #3FA129;
  --danger:  #E62829;
  --warning: #FAC000;

  /* ───────── AI 빨간펜 (채도 낮춘 빨강) */
  --pen-red:      #d92e2e;
  --pen-red-soft: rgba(217, 46, 46, 0.12);

  /* ───────── 타이포 */
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-hand:    'Gaegu', sans-serif;             /* 학생 손글씨 mockup 전용 */

  /* ───────── 간격 (4의 배수) */
  --sp-1:  4px; --sp-2:  8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ───────── 라디우스 */
  --r-xs:  4px; --r-sm:  8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;

  /* ───────── 보더 */
  --border-hair: 1px solid var(--ink-09);

  /* ───────── 섀도우 (선택적 사용) */
  --shadow-pop:   0 4px 16px rgba(17, 20, 26, 0.08);
  --shadow-card:  0 1px 1px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(17, 20, 26, 0.05);
  --shadow-photo: 0 1px 1px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(17, 20, 26, 0.10);
  --shadow-frame: 0 24px 60px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* ───────── 모션 (단일 곡선) */
  --ease:      cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:  150ms;
  --dur-base:  220ms;
  --dur-slow:  320ms;

  /* ───────── 모바일 안전영역 + 측정값 */
  --tabbar-h:    64px;
  --header-h:    56px;
  --composer-h:  64px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════════════════════
   a11y — 모든 mockup 공통
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip-link {
  position: absolute; top: -48px; left: 8px;
  background: var(--primary); color: white;
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none; font-weight: 700; font-size: 13px;
  z-index: 10000;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0; outline: 2px solid white; outline-offset: -4px; }

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 터치 환경 (iOS / Android / Touch laptop) — hit area 44px 보장 */
@media (pointer: coarse) {
  button, [role="button"], a.tile, .src-btn, .chip,
  .ck button, .action-btn, .nav-btn, .icon-btn, .quick,
  .add-more, .toc a, .filters .toggle, .link-btn, .link-fix {
    min-height: 44px;
  }
  /* 작은 X 버튼은 시각 크기 24px 유지 + ::after로 hit 44px */
  .photo-chip .x, .attached .x {
    width: 24px; height: 24px;
  }
  .photo-chip .x::after, .attached .x::after {
    content: ""; position: absolute; inset: -12px;
  }
}

/* 저성능 기기 fallback — backdrop-filter 미지원 시 */
@supports not (backdrop-filter: blur(16px)) {
  header.app[style*="backdrop-filter"],
  header.app {
    background: var(--bg-canvas) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  header.app {
    background: var(--bg-canvas) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}