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

:root {
  /* — 색 (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;
  --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;
}

/* 배경 톤 (디자인 폴드: 백색=기본 / 안개=쿨그레이 / 한지=미세 웜) */
:root[data-tone="안개"] {
  --bg:#f7f7f8; --surface:#ffffff; --surface-2:#f1f1f3; --inset:#eeeef0;
  --line:#e7e7ea; --line-2:#d7d7df;
}
:root[data-tone="한지"] {
  --bg:#fbfaf8; --surface:#ffffff; --surface-2:#f6f4f0; --inset:#f3f1ec;
  --line:#eeebe4; --line-2:#e0dcd2; --ink:#26231f; --ink-2:#5f5a53;
}

* { 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; }