:root{
--color-primary:#0075de;
--color-primary-active:#005bab;
--color-secondary:#213183;
--color-on-primary:#ffffff;
--color-canvas:#ffffff;
--color-canvas-soft:#f6f5f4;
--color-surface:#ffffff;
--color-ink:#000000;
--color-ink-secondary:#31302e;
--color-ink-muted:#615d59;
--color-ink-faint:#a39e98;
--color-hairline:#e6e6e6;
--color-accent-sky:#62aef0;
--color-accent-purple:#d6b6f6;
--color-accent-purple-deep:#391c57;
--color-accent-pink:#ff64c8;
--color-accent-orange:#dd5b00;
--color-accent-orange-deep:#793400;
--color-accent-teal:#2a9d99;
--color-accent-green:#1aae39;
--color-accent-brown:#523410;
--text-primary:var(--color-ink);
--text-secondary:var(--color-ink-secondary);
--text-muted:var(--color-ink-muted);
--text-faint:var(--color-ink-faint);
--text-on-accent:var(--color-on-primary);
--link-color:var(--color-primary);
--link-hover:var(--color-primary-active);
--surface-canvas:var(--color-canvas-soft);
--surface-card:var(--color-surface);
--border-hairline:var(--color-hairline);
--color-tint:#e6f1fc;
--color-text-primary:#0066c4;
--color-text-orange:#bf4d00;
--color-badge-green:#16862f;
--color-danger:#c62828;
--color-success:#16862f;
--color-bubble-in:#efefef;
--color-row-hover:#fbfaf9;
--color-hairline-strong:#c9c6c2;
--color-fail-bg:#fff0f8;
--color-fail-text:#b0206f;
--color-ok-bg:#e3f6e8;
--color-ok-text:#127a2a;
--color-warn-bg:#fff1e3;
--color-muted-bg:#f1f0ef;
--color-orange-bg:#fff4eb;
--color-orange-border:#f3c6a0;
--color-like:#c62f3c;
--color-like-bg:#fdf1f2;
--color-like-border:#e3a5ab;
--color-comment:#1c8ea6;
--color-scrim:rgba(246, 245, 244, 0.92);
color-scheme: light dark;
}
/* 다크모드: 기본은 시스템 설정. 화면의 밝은/어두운 버튼(theme.js)으로 고르면 data-theme 이 우선. 토큰만 바꾼다 */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--color-primary:#1f74d6;
--color-primary-active:#3a8ae6;
--link-color:#7ab8ff;
--link-hover:#a6cfff;
--color-secondary:#9aa8f0;
--color-canvas:#191918;
--color-canvas-soft:#252523;
--color-surface:#20201f;
--color-ink:#f2f1ef;
--color-ink-secondary:#d6d4d0;
--color-ink-muted:#a9a6a1;
--color-ink-faint:#7d7a75;
--color-hairline:#383735;
--color-tint:#1b2d42;
--color-scrim:rgba(25, 25, 24, 0.92);
--color-accent-orange:#ff8a3d;
--color-accent-green:#3ccf5c;
--color-text-primary:#7ab8ff;
--color-text-orange:#ffa060;
--color-badge-green:#1d8f3a;
--color-danger:#ff7a7a;
--color-success:#5bd47a;
--color-bubble-in:#333331;
--color-row-hover:#2a2a28;
--color-hairline-strong:#5a5854;
--color-fail-bg:#3d1f2e;
--color-fail-text:#ff8cc4;
--color-ok-bg:#1b3a24;
--color-ok-text:#7ee29a;
--color-warn-bg:#3d2c18;
--color-muted-bg:#2f2e2c;
--color-orange-bg:#3d2c18;
--color-orange-border:#7a4d24;
--color-like:#ff7b87;
--color-like-bg:#3d2024;
--color-like-border:#7a3a42;
--color-comment:#5ccbe3;
--color-accent-orange-deep:#ffb47c;
--color-accent-purple-deep:#d9b8ff;
--color-accent-brown:#e0b98a;
--color-ink-faint:#8d8a85;
}
:root:not([data-theme="light"]) .brand img, :root:not([data-theme="light"]) .mode-brand img, :root:not([data-theme="light"]) .foot-brand img { background:#fff; border-radius:50%; }
}
:root[data-theme="dark"]{
color-scheme: dark;
--color-primary:#1f74d6;
--color-primary-active:#3a8ae6;
--link-color:#7ab8ff;
--link-hover:#a6cfff;
--color-secondary:#9aa8f0;
--color-canvas:#191918;
--color-canvas-soft:#252523;
--color-surface:#20201f;
--color-ink:#f2f1ef;
--color-ink-secondary:#d6d4d0;
--color-ink-muted:#a9a6a1;
--color-ink-faint:#7d7a75;
--color-hairline:#383735;
--color-tint:#1b2d42;
--color-scrim:rgba(25, 25, 24, 0.92);
--color-accent-orange:#ff8a3d;
--color-accent-green:#3ccf5c;
--color-text-primary:#7ab8ff;
--color-text-orange:#ffa060;
--color-badge-green:#1d8f3a;
--color-danger:#ff7a7a;
--color-success:#5bd47a;
--color-bubble-in:#333331;
--color-row-hover:#2a2a28;
--color-hairline-strong:#5a5854;
--color-fail-bg:#3d1f2e;
--color-fail-text:#ff8cc4;
--color-ok-bg:#1b3a24;
--color-ok-text:#7ee29a;
--color-warn-bg:#3d2c18;
--color-muted-bg:#2f2e2c;
--color-orange-bg:#3d2c18;
--color-orange-border:#7a4d24;
--color-like:#ff7b87;
--color-like-bg:#3d2024;
--color-like-border:#7a3a42;
--color-comment:#5ccbe3;
--color-accent-orange-deep:#ffb47c;
--color-accent-purple-deep:#d9b8ff;
--color-accent-brown:#e0b98a;
--color-ink-faint:#8d8a85;
}
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .mode-brand img, :root[data-theme="dark"] .foot-brand img { background:#fff; border-radius:50%; }
:root[data-theme="light"]{ color-scheme: light; }

/* 밝은/어두운 모드 버튼 (theme.js) — 모든 화면이 이 파일을 읽어서 여기 둔다 */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-hairline);
  border-radius: 10px; background: var(--color-surface); color: var(--color-ink-secondary); cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease); }
.theme-btn:hover { background: var(--color-canvas-soft); color: var(--color-ink); }
.theme-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }