/* ============================================================
   하루 — 디자인 토큰
   한지(韓紙) 페이퍼 톤 + 테라코타 강조 + 청자 보조
   (디자인참조/styles.css 기반, JS 로 배경 톤 전환)
   ============================================================ */

:root {
  color-scheme: light;    /* 네이티브 위젯(select 목록·스크롤바) 밝게 */

  /* — 색 (ChatGPT 풍 중성 그레이스케일) — */
  --bg:        #ffffff;   /* 본문 배경 */
  --surface:   #ffffff;   /* 카드/패널 */
  --surface-2: #f7f7f8;   /* 보조 면 (사이드바·인셋) */
  --inset:     #f4f4f5;   /* 입력 인셋 */
  --ink:       #1d1d1f;   /* 본문 텍스트 */
  --ink-2:     #565869;   /* 보조 텍스트 */
  --ink-3:     #9a9aa6;   /* 흐린 텍스트 */
  --line:      #ececec;   /* 경계선 */
  --line-2:    #dcdce3;   /* 진한 경계선 */
  --accent:    #1a1a1a;   /* 기본 강조 (니어블랙 = 기본 버튼) */
  --accent-2:  #000000;   /* 진한 강조 (hover) */
  --accent-soft:#ececec;  /* 옅은 강조 면 (활성 탭/칩) */
  --celadon:   #6b6b76;   /* 데이터/적합도 (중성 그레이) */
  --celadon-soft:#f1f1f3;
  --gold:      #8a8a93;   /* 중간 적합도 (그레이) */
  --warn:      #b3261e;   /* 경고/오류 (레드는 알림에만 제한적으로) */
  --warn-soft: #fdeceb;
  --ok:        #1a1a1a;
  --title:     #37606b;   /* 섹션 타이틀 (차분한 슬레이트-틸, 전문가풍) */

  /* — 서체 — */
  --font-ui:   "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-serif:"Noto Serif KR", serif;
  --font-han:  "Noto Serif TC", "Noto Serif KR", serif;
  /* 한자 또렷한 고딕(산세리프) — 테스트 문장용 */
  --font-han-clear: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans TC", "Pretendard", sans-serif;
  /* 작은 글씨(12~14px)용 한자 —
     명조(Noto Serif TC)는 획이 가늘어 이 크기에서 뭉개진다. 힌팅이 강한 시스템 고딕을 앞세우고,
     굴림·돋움(작은 크기에 비트맵이 내장된 서체)을 뒤에 두어 어떤 환경에서도 획이 또렷하게 찍히게 한다. */
  --font-han-small: "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", Dotum, "돋움", Gulim, "굴림",
                    "MS Gothic", "Noto Sans KR", "Noto Sans TC", sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --result-font: var(--font-serif);
  /* 본문(원문·번역문) 글자 크기 배율 — 사이드바 테마에서 조정 */
  --text-scale: 1;

  /* — 스케일 — */
  --body-size: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: none;
}

/* 배경 톤 — 백색=기본
   회안개=쿨그레이 / 흰안개=ChatGPT 색 그대로
   백한지=미세 웜 / 미색한지=Claude.ai 색 그대로 */
:root[data-tone="회안개"] {
  --bg:#f7f7f8; --surface:#ffffff; --surface-2:#f1f1f3; --inset:#eeeef0;
  --line:#e7e7ea; --line-2:#d7d7df;
}
/* 흰안개 — chatgpt.com 밝은 테마 토큰 그대로
   (main/sidebar-surface-primary #fcfcfc · bg-primary #fff · bg-elevated-secondary #f3f3f3
    · sidebar-surface-secondary #ececec) */
:root[data-tone="흰안개"] {
  --bg:#fcfcfc; --surface:#ffffff; --surface-2:#fcfcfc; --inset:#f3f3f3;
  --line:#ececec; --line-2:#e3e3e3;
}
:root[data-tone="백한지"] {
  --bg:#fbfaf8; --surface:#ffffff; --surface-2:#f6f4f0; --inset:#f3f1ec;
  --line:#eeebe4; --line-2:#e0dcd2; --ink:#26231f; --ink-2:#5f5a53;
}
/* 미색한지 — claude.ai 밝은 테마 색 그대로.
   실제로 칠해진 값 기준: 페이지(bg-surface-1, --cds-page-bg) #fcfcfb · 패널(bg-surface-0) #f9f9f7
   · 카드(gray-0) #ffffff · 컨트롤 면(gray-30) #f6f6f4 · 경계(gray-80/100) #e7e6e1 / #e1e0d9
   · 글자(gray-860/700) #131313 / #383835 */
:root[data-tone="미색한지"] {
  --bg:#fcfcfb; --surface:#ffffff; --surface-2:#f9f9f7; --inset:#f6f6f4;
  --line:#e7e6e1; --line-2:#e1e0d9; --ink:#131313; --ink-2:#383835;
}

/* ============================================================
   명암 — 다크 모드
   사이드바 '화면표시 테마 > 명암'(밝게/어둡게/시스템)에서 선택.
   ui-sidebar.js applyTone() 이 :root 에 data-scheme="dark" 를 붙인다.
   강조색(--accent·--title 계열)은 applyTone() 이 인라인 스타일로 덮으므로
   여기 값은 JS 미실행 시의 대비용이다.
   위 data-tone 규칙과 특이도가 같으므로 반드시 그 뒤에 온다.
   ============================================================ */
:root[data-scheme="dark"] {
  color-scheme: dark;
  --bg:        #1a1a1c;
  --surface:   #212124;
  --surface-2: #26262a;
  --inset:     #2c2c31;
  --ink:       #ececf1;
  --ink-2:     #b4b4bd;
  --ink-3:     #85858f;
  --line:      #313136;
  --line-2:    #3e3e45;
  --accent:    #70707a;
  --accent-2:  #8a8a95;
  --accent-soft:#2b2b30;
  --celadon:   #9a9aa8;
  --celadon-soft:#26262b;
  --gold:      #a0a0aa;
  --warn:      #ff6f63;   /* 어두운 배경에서 읽히도록 밝은 레드 */
  --warn-soft: #3a1c19;
  --ok:        #ececf1;
  --title:     #8ec3d3;
}
/* 어두운 배경에서의 배경 톤 (백색=중성 / 회안개=쿨 / 백한지=웜 / 흰안개·미색한지=원본 다크 토큰) */
:root[data-scheme="dark"][data-tone="회안개"] {
  --bg:#141417; --surface:#1c1c20; --surface-2:#212126; --inset:#26262c;
  --line:#2b2b31; --line-2:#3a3a42;
}
/* 흰안개 다크 — chatgpt.com 어두운 테마 토큰 그대로
   (main/sidebar-surface-primary #000 · bg-primary·main-surface-secondary #212121
    · main-surface-tertiary #2f2f2f · sidebar-surface-secondary #303030) */
:root[data-scheme="dark"][data-tone="흰안개"] {
  --bg:#000000; --surface:#212121; --surface-2:#000000; --inset:#2f2f2f;
  --line:#2f2f2f; --line-2:#303030;
}
:root[data-scheme="dark"][data-tone="백한지"] {
  --bg:#1c1a17; --surface:#23211d; --surface-2:#292621; --inset:#2f2b25;
  --line:#35312a; --line-2:#423d34; --ink:#ece8e0; --ink-2:#b6b0a5;
}
/* 미색한지 다크 — claude.ai 어두운 테마 회색 램프 그대로
   (gray-830 #1a1a19 페이지 · gray-850 #151515 사이드바 · gray-800 #20201f 카드 · gray-870 #111111 인셋
    · gray-750/700 #2c2c2a / #383835 경계 · gray-20/200 #f9f9f7 / #c3c2b7 글자) */
:root[data-scheme="dark"][data-tone="미색한지"] {
  --bg:#1a1a19; --surface:#20201f; --surface-2:#151515; --inset:#111111;
  --line:#2c2c2a; --line-2:#383835; --ink:#f9f9f7; --ink-2:#c3c2b7;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }
::selection { background: var(--accent-soft); color: var(--accent-2); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }