/* 공용 테마 토큰 — 블로그·채팅·문의함이 같은 파일을 쓴다 (packages/tokens 정본의 배포본).
   팔레트는 7시간(25,200초)마다 순서대로 바뀐다: theme.js 가 <html data-palette="N"> 을 정한다.
   JS 가 없으면 0번(보라 밤) 팔레트. 모든 팔레트는 본문 대비 WCAG AA 이상. */

:root,
:root[data-palette="0"] { /* 보라 밤 */
  --c-bg: #1d0245; --c-surface: #2a0a5e; --c-panel: #12002e; --c-line: #4b2a8a;
  --c-text: #f3eefe; --c-muted: #c3b4ee; --c-primary: #7c4dff; --c-on-primary: #ffffff;
  --c-a1: #4fd8ff; --c-a2: #ff79c6; --c-a3: #ffd166; --c-danger: #ff6b6b; --c-ok: #5ef2a0;
  --palette-name-ko: "보라 밤"; --palette-name-en: "Violet Night"; --palette-name-tr: "Mor Gece";
}
:root[data-palette="1"] { /* 심해 */
  --c-bg: #021a2e; --c-surface: #06304d; --c-panel: #011220; --c-line: #1d4f72;
  --c-text: #e8f6ff; --c-muted: #a7cbe2; --c-primary: #1565c0; --c-on-primary: #ffffff;
  --c-a1: #5ef2d6; --c-a2: #ff8fab; --c-a3: #ffe066; --c-danger: #ff6b6b; --c-ok: #5ef2a0;
}
:root[data-palette="2"] { /* 숲 */
  --c-bg: #0b2116; --c-surface: #123522; --c-panel: #06140c; --c-line: #2a5a3e;
  --c-text: #ecfff3; --c-muted: #aed8bd; --c-primary: #1b7f4a; --c-on-primary: #ffffff;
  --c-a1: #7be0ff; --c-a2: #ff9ecd; --c-a3: #f7d154; --c-danger: #ff7070; --c-ok: #7dffb0;
}
:root[data-palette="3"] { /* 노을 */
  --c-bg: #2b0b1a; --c-surface: #44122a; --c-panel: #1a0610; --c-line: #6e2a48;
  --c-text: #fff0f5; --c-muted: #e8b6c8; --c-primary: #c22c63; --c-on-primary: #ffffff;
  --c-a1: #6fe3ff; --c-a2: #ffb3c6; --c-a3: #ffc857; --c-danger: #ff8080; --c-ok: #6ff2b0;
}
:root[data-palette="4"] { /* 호박 */
  --c-bg: #241603; --c-surface: #3a2407; --c-panel: #150c01; --c-line: #6a4614;
  --c-text: #fff7e6; --c-muted: #e8cd9c; --c-primary: #9a5b00; --c-on-primary: #ffffff;
  --c-a1: #62e6e6; --c-a2: #ff8ccf; --c-a3: #fff275; --c-danger: #ff7a6b; --c-ok: #7cf29a;
}
:root[data-palette="5"] { /* 자정 */
  --c-bg: #0a0e27; --c-surface: #141a40; --c-panel: #050717; --c-line: #2c3570;
  --c-text: #eef1ff; --c-muted: #b2bbec; --c-primary: #4256f0; --c-on-primary: #ffffff;
  --c-a1: #48f0ff; --c-a2: #ff6fd8; --c-a3: #ffe14d; --c-danger: #ff6b8a; --c-ok: #5ef2c0;
}

:root {
  --f-display: "Galmuri11", ui-monospace, "SF Mono", Consolas, monospace;
  --f-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "D2Coding", monospace;
  --f-body: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --radius: 0px; /* 픽셀 프레임 */
  --shadow-px: 4px 4px 0 0 var(--c-panel);
  --dur: 160ms;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }

@font-face {
  font-family: "Galmuri11";
  src: url("../fonts/Galmuri11.woff2") format("woff2");
  font-display: swap;
}

/* 공용 픽셀 버튼·링크 (채팅에서도 사용) */
.px-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  font: 600 15px/1 var(--f-display); letter-spacing: .02em;
  color: var(--c-on-primary); background: var(--c-primary);
  border: 2px solid var(--c-panel); box-shadow: var(--shadow-px);
  text-decoration: none; cursor: pointer;
  transition: transform var(--dur), box-shadow var(--dur);
}
.px-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--c-panel); }
.px-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 0 var(--c-panel); }
.px-btn--ghost { background: transparent; color: var(--c-a1); border-color: var(--c-a1); box-shadow: none; }
.px-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--c-a3); outline-offset: 2px;
}