/*
 * 크라우니슬라이드 — 테마.css (V02, P-018 이식)
 *
 * ══ P3 물닙 토큰 정렬(2026-09-23) ══ 변수명은 그대로 두고 **값만** 물닙 정본 계보로 옮겼다.
 *   출처 = /Users/ef/crowny-office/공통/물닙/물닙토큰.css (DESIGN_SPEC §1.1~1.3 — hex 의 유일한 출처).
 *   index.html이 물닙토큰.css를 이 파일보다 **먼저** 링크하므로, 여기서는 var(--paper) 식으로
 *   재수출만 한다 → 라이트 :root 에 신규 hex 0. --font 는 재정의하지 않는다(물닙 서체 스택이 이긴다).
 *   다크는 종이색 계보가 성립하지 않아 기존 다크 팔레트를 유지하되 금색만 물닙 --gold-2 로 옮겼다.
 *   불투명도 변형은 하드코딩 rgba 대신 color-mix(in srgb, var(--토큰) N%, transparent)로 — 토큰 1곳만 고치면 따라온다.
 *
 * 규약(개발명세서 §1.4 "디자인 상시교체 원칙" · 한선씨-가드레일.md "디자인 검토 기본방침"):
 *   - 색은 여기(본 파일)의 CSS 커스텀 프로퍼티(var(--…))로만 정의한다.
 *   - 다른 뷰 파일(*.js, index.html 등)은 이 파일이 정의한 토큰만 소비하고,
 *     하드코딩 hex(#RRGGBB/#RGB)를 절대 쓰지 않는다 — SVG 속성값만 예외.
 *   - 라이트 팔레트 = crowny.org 본체 토큰 SSOT(2026-06-21 디자인검토 기본방침) 그대로.
 *     임의 베이지/다른 회색 정의 금지.
 *   - 다크는 라이트 :root 완전 정의 뒤에 토큰만 재정의한다(양방향):
 *       ① `prefers-color-scheme: dark` (시스템 설정, data-theme 미지정 시)
 *       ② `[data-theme="dark"]`        (사용자가 테마위젯(V14/P-018)에서 명시 선택 시 — 시스템 설정보다 우선)
 *   - --accent 는 사용자별 조정 지점(테마위젯이 인라인 스타일/클래스로 덮어씀). 기본값 = --gold.
 */

:root {
  /* ── 베이스 팔레트 — 물닙 정본 재수출(물닙토큰.css §1.1). 신규 hex 0. ── */
  --bg: var(--paper);              /* #FAFAF6 종이 */
  --bg-elevated: var(--white);     /* 카드/모달/캔버스 등 떠 있는 표면 */
  --panel: var(--white);           /* 패널(슬라이드 속성) 배경 */
  --sidebar: var(--ava);           /* 슬라이드 탭바·좌측 아웃라인 등 — 종이보다 한 단 낮은 면 */
  --header: var(--ava);            /* 도구바 배경 */

  --text: var(--ink);              /* #1C1C1A */
  --text2: var(--sub);             /* #5B6070 */
  --text3: var(--sub-2);           /* #6B7180 — 종이 위 대비 AA 충족(보조 라벨·placeholder) */

  --border: var(--line);           /* #E5E5E1 */
  --border2: var(--line-2);        /* #BFC1C7 강조 구분선 */

  /* --gold 는 재정의하지 않는다 → 물닙 #8F6D33(대비 4.6:1)이 그대로 이긴다(DESIGN_SPEC §1.1). */
  --gold-dim: var(--gold);         /* 링크 대비는 물닙 금색 자체가 이미 AA 충족 — 별도 강화색 불필요 */
  --coral: var(--gold-2);          /* 물닙 계보엔 코랄이 없다 → 밝은 금색으로 흡수(브랜드 외 색 제거) */

  /* 사용자 조정 지점(테마위젯 --accent 프리셋) — 기본은 gold */
  --accent: var(--gold);
  --accent-dim: var(--gold-dim);
  --accent-soft: color-mix(in srgb, var(--gold) 14%, transparent);
  --on-accent: var(--white);       /* 물닙 금색 #8F6D33 위 흰 글자 = 4.6:1(DESIGN_SPEC 실측) */

  /* ── B170: 표/차트 삽입 다이얼로그 크롬 — 브랜드 외 고정값(#4f46e5 등)을 물닙 gold/btn 계보로 교체 ── */
  --dialog-bg: var(--white);
  --dialog-border: var(--line-2);
  --dialog-border-soft: var(--line);
  --dialog-cancel-bg: var(--ava);
  --dialog-heading: var(--ink);
  --dialog-text-muted: var(--say);
  --dialog-accent: var(--gold);
  --dialog-accent-soft: color-mix(in srgb, var(--gold) 10%, transparent);

  /* ── 4상(T/O/A/U) 의미 색 — 3진 논리·상태 표시용 ── */
  --t-color: #1F8A5A;   /* 참(T) / 성공 */
  --o-color: var(--gold-dim); /* 모름(O) / 대기 */
  --a-color: #C0392B;   /* 거짓(A) / 오류 */
  --u-color: #6E5EA8;   /* 구분자(U) / 정보 */
  --t-soft: rgba(31, 138, 90, 0.12);
  --o-soft: rgba(160, 136, 64, 0.12);
  --a-soft: rgba(192, 57, 43, 0.12);
  --u-soft: rgba(110, 94, 168, 0.12);

  /* 시맨틱 별칭(문자/도형 도구 상태 → 배지) */
  --success: var(--t-color);
  --success-soft: var(--t-soft);
  --danger: var(--a-color);
  --danger-soft: var(--a-soft);
  --warning: var(--o-color);
  --warning-soft: var(--o-soft);
  --info: var(--u-color);
  --info-soft: var(--u-soft);

  /* ── 슬라이드 캔버스 전용 토큰 (전부 물닙 토큰 파생 — 고정 rgba 제거) ── */
  --canvas-bg: var(--bg-elevated);
  --canvas-grid: color-mix(in srgb, var(--gold) 8%, transparent);
  --shape-selection-border: var(--gold);
  --shape-selection-fill: color-mix(in srgb, var(--gold) 12%, transparent);
  --text-selection-bg: color-mix(in srgb, var(--gold) 16%, transparent);
  --text-selection-border: var(--gold-dim);

  /* ── 상호작용 상태 ── */
  --hover: color-mix(in srgb, var(--ink) 4%, transparent);
  --active: color-mix(in srgb, var(--ink) 7%, transparent);
  --focus-ring: color-mix(in srgb, var(--gold) 45%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--ink) 18%, transparent);
  --scrollbar-track: transparent;

  /* ── 표면 그림자/반경 ── */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.10);
  /* 형태 규칙 = DESIGN_SPEC §1.3 (입력창 12 · 버튼 10 · 칩 pill) */
  --radius: var(--r-input);
  --radius-sm: var(--r-btn);
  --radius-pill: var(--r-pill);
  /* P3b: 인라인/미세 반경도 토큰으로 — hex와 같은 원칙(값은 토큰 파일에만, 소비처는 var()만). */
  --r-2: 2px;
  --r-3: 3px;
  --r-4: var(--r-chat-tail);   /* 4px — 물닙 채팅 꼬리 반경과 같은 값 */
  --r-8: 8px;

  /* ── 타이포 ──
     --font 은 여기서 재정의하지 않는다 → 물닙토큰.css 의
     "Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui 스택이 그대로 쓰인다(DESIGN_SPEC §1.2). */
  --font-mono: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
}

/* ① 시스템 다크(사용자가 테마위젯으로 라이트를 명시 고정하지 않은 경우에만) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0908;
    --bg-elevated: #16140F;
    --panel: #16140F;
    --sidebar: #14120D;
    --header: #14120D;

    --text: #F4E9D8;
    --text2: #B9AD98;
    --text3: #9A9080;         /* AA 4.5:1(다크 배경) 충족, U081 */

    --border: color-mix(in srgb, var(--gold) 10%, transparent);
    --border2: color-mix(in srgb, var(--gold) 18%, transparent);

    /* 다크 금색 = 물닙 계보 밝은 금(--gold-2 #B89448) — 다크 배경 대비 AA 충족, 신규 hex 0 */
    --gold: var(--gold-2);
    --gold-dim: var(--gold-2);
    --coral: var(--gold-2);

    --accent: var(--gold);
    --accent-dim: var(--gold-dim);
    --accent-soft: color-mix(in srgb, var(--gold) 18%, transparent);
    --on-accent: #1A1A1A;

    --t-color: #34D399;
    --o-color: var(--gold-dim);
    --a-color: #EF4444;
    --u-color: #9B8BE6;
    --t-soft: rgba(52, 211, 153, 0.14);
    --o-soft: color-mix(in srgb, var(--gold) 14%, transparent);
    --a-soft: rgba(239, 68, 68, 0.14);
    --u-soft: rgba(155, 139, 230, 0.14);

    --canvas-bg: var(--bg-elevated);
    --canvas-grid: color-mix(in srgb, var(--gold) 12%, transparent);
    --shape-selection-border: var(--gold);
    --shape-selection-fill: color-mix(in srgb, var(--gold) 16%, transparent);
    --text-selection-bg: color-mix(in srgb, var(--gold) 18%, transparent);
    --text-selection-border: var(--gold-dim);

    --hover: color-mix(in srgb, var(--text) 6%, transparent);
    --active: color-mix(in srgb, var(--text) 10%, transparent);
    --focus-ring: color-mix(in srgb, var(--gold) 50%, transparent);
    --scrollbar-thumb: color-mix(in srgb, var(--text) 18%, transparent);
    --scrollbar-track: transparent;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

/* ② 사용자 명시 선택(테마위젯 V14/P-018, localStorage data-theme) — 시스템 설정보다 우선 */
:root[data-theme="dark"] {
  --bg: #0A0908;
  --bg-elevated: #16140F;
  --panel: #16140F;
  --sidebar: #14120D;
  --header: #14120D;

  --text: #F4E9D8;
  --text2: #B9AD98;
  --text3: #9A9080;

  --border: color-mix(in srgb, var(--gold) 10%, transparent);
  --border2: color-mix(in srgb, var(--gold) 18%, transparent);

  /* 다크 금색 = 물닙 계보 밝은 금(--gold-2) */
  --gold: var(--gold-2);
  --gold-dim: var(--gold-2);
  --coral: var(--gold-2);

  --accent: var(--gold);
  --accent-dim: var(--gold-dim);
  --accent-soft: color-mix(in srgb, var(--gold) 18%, transparent);
  --on-accent: #1A1A1A;

  --t-color: #34D399;
  --o-color: var(--gold-dim);
  --a-color: #EF4444;
  --u-color: #9B8BE6;
  --t-soft: rgba(52, 211, 153, 0.14);
  --o-soft: color-mix(in srgb, var(--gold) 14%, transparent);
  --a-soft: rgba(239, 68, 68, 0.14);
  --u-soft: rgba(155, 139, 230, 0.14);

  --canvas-bg: var(--bg-elevated);
  --canvas-grid: color-mix(in srgb, var(--gold) 12%, transparent);
  --shape-selection-border: var(--gold);
  --shape-selection-fill: color-mix(in srgb, var(--gold) 16%, transparent);
  --text-selection-bg: color-mix(in srgb, var(--gold) 18%, transparent);
  --text-selection-border: var(--gold-dim);

  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --active: color-mix(in srgb, var(--text) 10%, transparent);
  --focus-ring: color-mix(in srgb, var(--gold) 50%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text) 18%, transparent);
  --scrollbar-track: transparent;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* ③ 라이트 명시 고정(테마위젯에서 "라이트"를 골랐을 때) — 시스템이 dark여도 라이트 유지 */
:root[data-theme="light"] {
  /* 라이트 명시 고정 — 위 :root 와 같은 물닙 재수출(신규 hex 0). */
  --bg: var(--paper);
  --bg-elevated: var(--white);
  --panel: var(--white);
  --sidebar: var(--ava);
  --header: var(--ava);
  --text: var(--ink);
  --text2: var(--sub);
  --text3: var(--sub-2);
  --border: var(--line);
  --border2: var(--line-2);
  --gold-dim: var(--gold);
  --coral: var(--gold-2);
}

/* ── 뷰 전역 최소 리셋(디자인 값이 아닌 배선만 — 색은 전부 위 토큰 소비) ── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  word-break: keep-all;   /* DESIGN_SPEC §1.2 — 한국어 줄바꿈 규칙(어절 단위) */
}

* {
  box-sizing: border-box;
}

/* ── 템플릿 선택 모달(M5-03 보완) — 전부 위 토큰만 소비, 하드코딩 hex 없음 ── */
.템플릿모달배경 {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.32);
  display: flex; align-items: center; justify-content: center;
}
.템플릿모달배경[hidden] { display: none; }
.템플릿모달 {
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 24px; width: min(720px, 92vw); max-height: 84vh; overflow: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.템플릿모달-제목 { margin: 0 0 6px; font-size: 18px; }
.템플릿모달-설명 { margin: 0 0 16px; color: var(--text2); font-size: 13px; }
.템플릿목록 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.템플릿카드 {
  border: 1px solid var(--border); border-radius: 10px; padding: 14px;
  background: var(--panel); cursor: pointer; text-align: left;
  font-family: inherit; color: var(--text);
}
.템플릿카드:hover, .템플릿카드:focus-visible {
  border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.템플릿카드-썸네일 {
  height: 72px; border-radius: 6px; margin-bottom: 10px;
  background: var(--sidebar); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text3); font-size: 11px;
}
.템플릿카드-이름 { font-weight: 600; margin-bottom: 4px; }
.템플릿카드-설명 { font-size: 12px; color: var(--text2); }
.템플릿모달-하단 { margin-top: 18px; text-align: right; }
.템플릿건너뛰기 {
  background: transparent; border: 1px solid var(--border);
  color: var(--text2); border-radius: 8px; padding: 8px 14px;
  font-family: inherit; cursor: pointer;
}
.템플릿건너뛰기:hover { color: var(--text); border-color: var(--border2); }

/* ── P3 물닙: 모션 존중(DESIGN_SPEC §4 · 기획서 L5) ──
   공통/물닙/물닙.css 가 캐릭터 애니를 멈추는 것과 대칭으로, 앱 자체의 전환·애니도 멈춘다.
   (접근성 AA 요건이자 S15 M10 "모션 존중" 항목. 색·형태는 건드리지 않는다.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}