/* 복기 Journal 정식 디자인 토큰 — DESIGN-LANGUAGE.md (2026-08-17) */
@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --site-mark-bg: #f6465d;
  --site-mark-ink: #2b080d;
  --font-ui: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-number: var(--font-ui);
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: var(--font-code);
}

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d10;
  --surface: #14171c;
  --surface-2: #0f1216;
  --border: #1d222a;
  --border-2: #262b33;
  --text: #e8eaed;
  --text-2: #8b93a0;
  --text-3: #6b7280;
  --accent: #3ad0b0;
  --accent-text: #3ad0b0;
  --accent-ink: #06231d;
  --accent-soft: rgba(58, 208, 176, .14);
  --chart-grid: #232a31;
  --pos: #2ebd85;
  --neg: #f6465d;
  --warn: #caa24a;
  --info: #4a9eda;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .20), 0 4px 12px rgba(0, 0, 0, .16);

  /* 기존 화면을 정식 축으로 수렴시키는 보조 역할 토큰 */
  --surface-nav: #101317;
  --surface-control: #1b2026;
  --surface-active: #1b2129;
  --surface-hover: #181c22;
  --surface-inset: #161a20;
  --surface-avatar: #222831;
  --chart-bg: #0d1014;
  --chart-border: #232932;
  --border-row: #191d24;
  --border-strong: #2a313b;
  --scroll-thumb: #2a2f38;
  --text-strong: #cfd4db;
  --text-soft: #9aa3af;
  --text-muted: #5a6472;
  --text-faint: #3a4150;
  --attention: #f0934d;
  --attention-text: #f0c79d;
  --info-muted: #7fb3d5;
  --topbar-bg: rgba(11, 13, 16, .82);
  --pos-soft: rgba(46, 189, 133, .14);
  --neg-soft: rgba(246, 70, 93, .14);
  --warn-soft: rgba(202, 162, 74, .14);
  --info-soft: rgba(74, 158, 218, .14);
  --neutral-soft: rgba(139, 147, 160, .12);
  --semantic-ink: #06231d;
  --grade-a: #3ad0b0;
  --grade-b: #7fb3d5;
  --grade-c: #caa24a;
  --grade-d: #f6465d;
  --grade-ink: #06231d;
  --data-blue: #5b9cf6;
  --data-blue-strong: #3d7ef0;
  --data-yellow: #f0b90b;
  --data-green: #3ec97a;
  --data-orange: #f7a600;
  --data-purple: #b07ff0;
  --data-rust: #e08a5a;
  --data-cyan: #38bdf8;
  --accent-control: #1b2620;
  --accent-border: #2e5e50;
  --attention-fill: #f0934d;
  --attention-ink: #1a0f06;
  --print-bg: #f1f5f4;
  --print-surface: #f9fbfa;
  --print-border: #cbd6d3;
  --print-text: #16201e;
  --print-text-2: #52615d;
  --print-text-muted: #61706d;
  --print-grid: #dce5e2;
  --print-pos: #147854;
  --print-neg: #c9344b;
  --print-exit: #9b4e16;
  --print-lesson: #7a5d13;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f5f4;
  --surface: #f9fbfa;
  --surface-2: #e8efed;
  --border: #cbd6d3;
  --border-2: #829690;
  --text: #16201e;
  --text-2: #3f4e4a;
  --text-3: #61706d;
  --accent: #3ad0b0;
  --accent-text: #08705a;
  --accent-ink: #06231d;
  --accent-soft: #d9f1eb;
  --chart-grid: #dce5e2;
  --pos: #147854;
  --neg: #c9344b;
  --warn: #7a5d13;
  --info: #246a9a;
  --shadow-1: 0 1px 2px rgba(25, 54, 48, .06);
  --shadow-2: 0 1px 2px rgba(25, 54, 48, .06), 0 8px 24px rgba(25, 54, 48, .05);

  --surface-nav: #e8efed;
  --surface-control: #e5ecea;
  --surface-active: #d9e7e3;
  --surface-hover: #e2eae7;
  --surface-inset: #eef3f1;
  --surface-avatar: #dce6e3;
  --chart-bg: #f5f8f7;
  --chart-border: #cbd6d3;
  --border-row: #dce5e2;
  --border-strong: #829690;
  --scroll-thumb: #9aada7;
  --text-strong: #283632;
  --text-soft: #4f5f5b;
  --text-muted: #61706d;
  --text-faint: #829690;
  --attention: #9b4e16;
  --attention-text: #7d4218;
  --info-muted: #246a9a;
  --topbar-bg: rgba(241, 245, 244, .88);
  --pos-soft: rgba(20, 120, 84, .12);
  --neg-soft: rgba(201, 52, 75, .12);
  --warn-soft: rgba(122, 93, 19, .12);
  --info-soft: rgba(36, 106, 154, .12);
  --neutral-soft: rgba(97, 112, 109, .12);
  --semantic-ink: #f9fbfa;
  --grade-a: #3ad0b0;
  --grade-b: #7fb3d5;
  --grade-c: #caa24a;
  --grade-d: #f6465d;
  --grade-ink: #06231d;
  --data-blue: #275fbd;
  --data-blue-strong: #285db7;
  --data-yellow: #735800;
  --data-green: #19733f;
  --data-orange: #8a5600;
  --data-purple: #7247a8;
  --data-rust: #8d4928;
  --data-cyan: #126a91;
  --accent-control: #d9f1eb;
  --accent-border: #6c9c90;
  --attention-fill: #f0934d;
  --attention-ink: #1a0f06;
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

:where(body, body *) {
  /* 페이지별 font: 축약형이 font-variant를 normal로 되돌리지 못하게 제품 규칙으로 잠근다. */
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

:where(code, pre, kbd, samp, .tj-code, .tj-ticker, .tj-json, .tj-wallet, .pair) {
  font-family: var(--font-code) !important;
}

input,
select,
textarea {
  color-scheme: inherit;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

.tj-theme-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 12px var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.tj-theme-toggle:hover {
  border-color: var(--accent-text);
  color: var(--text);
}

.tj-theme-toggle:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.tj-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tj-state-action {
  min-height: 44px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 9px 14px;
  background: var(--surface-control);
  color: var(--text);
  font: 700 13px var(--font-ui);
  cursor: pointer;
}

.tj-state-action:hover { border-color: var(--accent-text); }
.tj-state-action:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

@media (max-width: 640px) {
  .tj-theme-toggle .tj-theme-label { display: none; }
  .tj-theme-toggle { width: 44px; min-height: 44px; padding-inline: 0; }
}

@media print {
  :root,
  html[data-theme="dark"],
  html[data-theme="light"] {
    color-scheme: light;
    --bg: #f1f5f4;
    --surface: #f9fbfa;
    --surface-2: #e8efed;
    --border: #cbd6d3;
    --border-2: #829690;
    --text: #16201e;
    --text-2: #3f4e4a;
    --text-3: #61706d;
    --accent-text: #08705a;
    --pos: #147854;
    --neg: #c9344b;
    --warn: #7a5d13;
    --info: #246a9a;
  }
  .tj-theme-toggle { display: none !important; }
}