/* =====================================================================
   Vignette — 디자인 토큰 (단일 진실원본)
   출처: docs/dev_dashboard.html :root + docs/DESIGN_CONCEPT.md §3
   primitive(원시값) → semantic(의미 별칭) 2계층. 컴포넌트는 semantic만 참조.
   다크모드/역할별 accent는 이 파일 하단 1곳에서만 스왑.
   철칙: 순흑/순백 금지(paper/ink 토큰만), border-left 강조선 금지,
        강조는 weight+accent텍스트+tint배경+kicker로만.
   ===================================================================== */

:root {
  /* ── Primitive: Neutral (따뜻한 종이 + 쿨 슬레이트) §3.1 ── */
  --paper: #fdfcf9; /* 시안에서 피킹한 따뜻한 아이보리 캔버스 */
  --paper-1: #fbf9f5; /* 구형 페이지 alias */
  --paper-2: #f4f1eb; /* 카드/패널 미세 단차 */
  --surface: rgba(255, 254, 251, 0.7); /* 보태니컬 배경이 비치는 유리 표면 */
  --neutral-100: #f0ede6; /* 표면 hover / subtle fill */
  --neutral-150: #e4dccf; /* 금빛이 아주 옅게 섞인 hairline */
  --neutral-200: #d7cdbd; /* divider 진함 */
  --neutral-400: #9b9a92; /* placeholder / disabled */

  --ink: #17231f; /* 시안의 거의 검정인 웜 포레스트 잉크 */
  --ink-2: #5f635d; /* 보조 텍스트 */
  --ink-3: #8f928a; /* 캡션/메타 */
  --hair: #e4dccf; /* 1px 헤어라인 */
  --botanical-gold: #b49a67;
  --botanical-hair: rgba(180, 154, 103, 0.28);
  --botanical-glow: rgba(218, 190, 132, 0.1);
  --glass-canvas: #f2eee5;
  --surface-gradient: linear-gradient(145deg, rgba(255, 254, 251, 0.98), rgba(248, 245, 238, 0.94));
  --glass-specular: linear-gradient(125deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.16) 38%, rgba(218, 190, 132, 0.075) 100%);
  --glass-specular-inset: linear-gradient(125deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 46%, rgba(218, 190, 132, 0.055) 100%);
  --glass-surface: linear-gradient(145deg, rgba(255, 254, 251, 0.58), rgba(248, 245, 238, 0.32));
  --glass-surface-strong: linear-gradient(145deg, rgba(255, 254, 251, 0.72), rgba(248, 245, 238, 0.46));
  --glass-surface-inset: linear-gradient(145deg, rgba(255, 254, 251, 0.4), rgba(248, 245, 238, 0.18));
  --glass-border: rgba(169, 139, 82, 0.38);
  --glass-inset-border: rgba(169, 139, 82, 0.26);
  --glass-edge-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 1px 0 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(148, 114, 57, 0.08);
  --glass-shadow: 0 18px 46px rgba(75, 58, 31, 0.095), 0 2px 8px rgba(75, 58, 31, 0.045);
  --glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), inset 0 -1px 0 rgba(148, 114, 57, 0.055), 0 9px 24px rgba(75, 58, 31, 0.05);
  --glass-blur: blur(24px) saturate(126%);

  /* ── Sage-Teal (주 악센트 = 상담/신뢰), 화면당 1곳 배급 §3.2 ── */
  --accent: #3e7a6e; /* ★ 메인 악센트. 흰 배경 대비 5.0:1 AA */
  --accent-deep: #316257; /* hover / 진한 강조 텍스트 */
  --accent-tint: #eef4f2; /* 악센트 배경 틴트 (콜아웃·선택·active) */
  --accent-bright: #5f968b; /* dot·진행바 fill */

  /* ── Terracotta (보조 악센트 = 학습/온기), 저채도, 화면당 1곳 ── */
  --clay: #b0735c; /* ★ 보조 악센트 (학습자 온기, 내담자 측 신호) */
  --clay-deep: #94604c;
  --clay-tint: #f6f0ec;

  /* ── 의미색 (Semantic feedback) — solid + tint 페어 §3.3 ── */
  /* 긍정 = 녹색 (상담 진전·라포·가드레일 통과·잘함) */
  --pos-text: #2c6e49;
  --pos-solid: #3b8c5e;
  --pos-tint: #e8f3ec;
  /* 주의 = 앰버 (라포 약화·과도한 침묵·페이싱) */
  --warn-text: #8a5a00;
  --warn-solid: #c28a2c;
  --warn-tint: #faf1e0;
  /* 위험 = 적색 (가드레일 위반·세션 강제중단·임상적 위급) — 오직 진짜 위급만 */
  --crit-text: #a8352c;
  --crit-solid: #c4453a;
  --crit-tint: #faeae8;
  /* 정보 = 슬레이트블루 (평가 AI 피드백·시스템 안내, 중립) */
  --info-text: #2e5a7a;
  --info-solid: #3c7299;
  --info-tint: #eaf1f6;
  --neutral-sig: #8895a2; /* 데이터 없음·미평가 */

  /* ── 시맨틱 별칭 (라이트 모드) §3.4 ── */
  --bg-app: var(--paper); /* 앱 캔버스 */
  --bg-surface: var(--surface); /* 카드/패널 */
  --bg-surface-2: var(--paper-2); /* 중첩 표면/입력 */
  --bg-tint: var(--accent-tint); /* 선택·강조 배경 */
  --bg-stage: #1e2724; /* 내담자 아바타 영역 (깊은 차콜그린) */

  --text-strong: var(--ink); /* 제목 */
  --text-body: var(--ink-2); /* 본문 보조 */
  --text-muted: var(--ink-3); /* 캡션 */
  --text-on-accent: #fbfaf8; /* accent 버튼 위 텍스트 */

  --border-subtle: var(--neutral-150);
  --border-strong: var(--neutral-200);
  --border-focus: var(--accent);
  --focus-ring: rgba(62, 122, 110, 0.45);

  /* ── 타이포그래피 §3.6 ── */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-serif: "Noto Serif KR", "Source Serif 4", serif; /* 랜딩 헤드만 */
  --font-num: "Pretendard Variable", "JetBrains Mono", ui-monospace, monospace;

  /* 타입 스케일 (기준 16px / 1.6, 위계는 크기보다 weight) */
  --fs-display: 2.5rem; /* 40 / 표지·랜딩 대제목 */
  --fs-h1: 1.875rem; /* 30 / 페이지 제목 */
  --fs-h2: 1.5rem; /* 24 / 섹션 제목 */
  --fs-h3: 1.25rem; /* 20 / 카드·패널 제목 */
  --fs-lead: 1.125rem; /* 18 / 리드 문장 */
  --fs-body: 1rem; /* 16 / 본문 기본 */
  --fs-sm: 0.875rem; /* 14 / 보조·폼 라벨 */
  --fs-xs: 0.8125rem; /* 13 / 캡션·메타·배지 */
  --fs-kicker: 0.75rem; /* 12 / 상단 kicker 소제목 */

  /* ── 스페이싱 (8pt 기반) §3.7 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ── 그리드·형태 §3.8 ── */
  --maxw: 1200px; /* 대시보드 콘텐츠 최대폭 */
  --maxw-read: 680px; /* 읽기 영역 */
  --border: var(--border-subtle);
  --font-mono: var(--font-num);
  --nav-w: 240px; /* 좌측 네비 펼침 */
  --nav-w-collapsed: 72px; /* 좌측 네비 아이콘 only */
  --topbar-h: 56px;
  --radius: 8px; /* 카드/버튼 (거의 직각) */
  --radius-sm: 6px; /* 입력·칩 */
  --radius-lg: 12px; /* 패널 */
  --gutter: 24px;

  --shadow-sm: 0 1px 2px rgba(28, 42, 42, 0.05);
  --shadow-md: 0 4px 14px rgba(28, 42, 42, 0.07); /* 모달·팝오버만 */

  /* ── 래스터 디자인 요소 ── */
  --asset-warm-elements: url("/design-elements/clinical-paper-ambient.png");
  --asset-login-room: url("/design-elements/login-counseling-room.png");
  --asset-botanical-sidebar: url("/design-elements/learner-dashboard/background-light-sidebar.png");
  --asset-botanical-corner: url("/design-elements/learner-dashboard/background-light-corner.png");
  --asset-botanical-leaf: url("/design-elements/learner-dashboard/card-leaf-sprig-light.png");

  /* ── 모션 §3.9 ── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast: 120ms; /* hover·포커스 */
  --dur-base: 200ms; /* 버튼·토글·드롭다운 */
  --dur-slow: 320ms; /* 패널 전환·모달 */
  --dur-breathe: 3200ms; /* 음성 호흡 펄스 */
}

/* ── 다크 모드 (gloom 회피 — 충분한 밝은 면 + 절제된 악센트) §3.5 ── */
[data-theme="dark"] {
  --paper: #0a1416;
  --paper-1: #0c1617;
  --paper-2: #111c1c;
  --surface: rgba(22, 32, 31, 0.68);
  --neutral-100: #1b2725;
  --neutral-150: #2b332f;
  --neutral-200: #3b4039;
  --neutral-400: #747970;

  --ink: #eee7d9;
  --ink-2: #c4bfb3;
  --ink-3: #8d9086;
  --hair: #30372f;
  --botanical-gold: #b9a275;
  --botanical-hair: rgba(185, 162, 117, 0.26);
  --botanical-glow: rgba(186, 156, 97, 0.065);
  --glass-canvas: #081416;
  --surface-gradient: linear-gradient(145deg, rgba(22, 32, 31, 0.98), rgba(14, 24, 25, 0.96));
  --glass-specular: linear-gradient(125deg, rgba(255, 247, 224, 0.055) 0%, rgba(255, 255, 255, 0.018) 42%, rgba(185, 162, 117, 0.035) 100%);
  --glass-specular-inset: linear-gradient(125deg, rgba(255, 247, 224, 0.032) 0%, rgba(255, 255, 255, 0.008) 46%, rgba(185, 162, 117, 0.022) 100%);
  --glass-surface: linear-gradient(145deg, rgba(22, 32, 31, 0.68), rgba(14, 24, 25, 0.5));
  --glass-surface-strong: linear-gradient(145deg, rgba(22, 32, 31, 0.82), rgba(14, 24, 25, 0.68));
  --glass-surface-inset: linear-gradient(145deg, rgba(28, 39, 37, 0.52), rgba(10, 22, 22, 0.32));
  --glass-border: rgba(185, 162, 117, 0.24);
  --glass-inset-border: rgba(185, 162, 117, 0.16);
  --glass-edge-shadow: inset 0 1px 0 rgba(255, 247, 224, 0.055), inset 1px 0 0 rgba(255, 255, 255, 0.018), inset 0 -1px 0 rgba(0, 0, 0, 0.12);
  --glass-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
  --glass-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 10px 26px rgba(0, 0, 0, 0.11);
  --glass-blur: blur(20px) saturate(112%);

  --bg-app: #0a1416;
  --bg-surface: #16201f;
  --bg-surface-2: #111c1c;
  --bg-tint: #192522;
  --bg-stage: #091315;
  --text-strong: #eee7d9;
  --text-body: #c4bfb3;
  --text-muted: #8d9086;
  --text-on-accent: #0f1a17;
  --border-subtle: #30372f;
  --border-strong: #45483e;
  /* 2026-07-14 한신대 피드백: 다크 녹색 채도 완화 — 쨍한 민트 대신 마른 세이지 톤 */
  --border-focus: #7da294;
  --accent: #7da294;
  --accent-deep: #92b3a6;
  --accent-tint: #1c2622;
  --accent-bright: #8db1a4;
  --clay: #cc8f77;
  --clay-deep: #e0aa92;
  --clay-tint: #2b211e;
  --focus-ring: rgba(125, 162, 148, 0.42);

  --pos-text: #9cbfa4;
  --pos-solid: #6f9a7e;
  --pos-tint: #17211a;
  --warn-text: #e2b566;
  --warn-solid: #d4a24a;
  --warn-tint: #2a2415;
  --crit-text: #e89086;
  --crit-solid: #d86459;
  --crit-tint: #2a1715;
  --info-text: #79b0d4;
  --info-solid: #5c97be;
  --info-tint: #15222c;

  --asset-botanical-sidebar: url("/design-elements/learner-dashboard/background-dark-sidebar.png");
  --asset-botanical-corner: url("/design-elements/learner-dashboard/background-dark-corner.png");
  --asset-botanical-leaf: url("/design-elements/learner-dashboard/card-leaf-sprig.png");
}

/* ── 역할별 accent 오버라이드 §6.2 ──
   역할별 페이지를 다른 제품처럼 보이게 하지 않는다.
   API role(learner/teacher/admin) → data-role 매핑은 유지하되, 기본 accent는 공통 세이지로 통일한다. */
[data-role="learner"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}
[data-role="instructor"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}
[data-role="admin"] {
  --accent: #3e7a6e;
  --accent-deep: #316257;
  --accent-bright: #5f968b;
  --accent-tint: #eef4f2;
  --focus-ring: rgba(62, 122, 110, 0.45);
}

/* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) — 저채도 세이지로 통일 */
[data-theme="dark"] body[data-role="learner"] {
  --accent: #7da294;
  --accent-deep: #92b3a6;
  --accent-bright: #8db1a4;
  --accent-tint: #1c2622;
  --focus-ring: rgba(125, 162, 148, 0.42);
}
[data-theme="dark"] body[data-role="instructor"],
[data-theme="dark"][data-role="instructor"] {
  --accent: #7da294;
  --accent-deep: #92b3a6;
  --accent-bright: #8db1a4;
  --accent-tint: #1c2622;
  --focus-ring: rgba(125, 162, 148, 0.42);
}
[data-theme="dark"] body[data-role="admin"],
[data-theme="dark"][data-role="admin"] {
  --accent: #7da294;
  --accent-deep: #92b3a6;
  --accent-bright: #8db1a4;
  --accent-tint: #1c2622;
  --focus-ring: rgba(125, 162, 148, 0.42);
}