/* 사이트 공용 디자인 체계(2026-10-10) — 포트폴리오 / · 실험실 /lab/ · 아카이브 /archive/ 가 함께 쓴다. build.py 가 /ds.css 로 내보낸다.
   여기에는 세 곳이 똑같이 써야 하는 것만 둔다: 색·글꼴·크기 값(토큰) · 사이트 바꾸기(.sites) · 테마 버튼(.theme).
   각 곳의 화면 규칙은 각자 파일에 두되 이 값만 쓴다. 설명은 site/DESIGN_SYSTEM.md
   테마(밝게·어둡게)는 세 곳이 한 저장값 pf-theme 을 같이 쓴다 — 한 곳에서 바꾸면 다른 곳도 그대로 열린다. */
:root {
  --bg: #F6F5F1; --paper: #FFFFFF; --ink: #15171A; --ink-2: #3F454C; --muted: #6E737A; --line: #E3E1DB; --line-2: #CFCCC4;
  --c-ax: #2A5B8C; --c-gl: #B0561E; --c-mk: #8E3B6A; --c-all: #2F6B55; --acc: var(--c-ax); --acc-ink: #FFFFFF;
  --bad: #C2410C; --warn: #A16207; --ok: #2F6B55; --on-bad: #FFFFFF; --on-warn: #FFFFFF;
  --band: #15171A; --band-ink: #F2F1ED; --band-muted: #A9ADB3; --dim: #C9C6BE;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --font: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Malgun Gothic", monospace;
  /* 크기 세 단계 · 글자 · 모서리 */
  --h-s: 32px; --h-m: 40px; --h-l: 48px; --fs-c: 14px; --fs-l: 16px; --fw-c: 600; --r-tag: 8px; --r-card: 18px; --bar: 64px;
  color-scheme: light;
}
@media (max-width: 640px) { :root { --h-m: 36px; --h-l: 46px; --bar: 58px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111214; --paper: #18191C; --ink: #EEEDE9; --ink-2: #C7C9CD; --muted: #8E939A; --line: #27292D; --line-2: #3A3D42;
    --c-ax: #7FB0E3; --c-gl: #E59A62; --c-mk: #E08DBF; --c-all: #6DC1A0; --acc-ink: #0E1A26; --band: #1D1F23; --dim: #3F4247;
    --bad: #FF8F75; --warn: #F2C14E; --ok: #6DC1A0; --on-bad: #1A0D09; --on-warn: #1A1405;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111214; --paper: #18191C; --ink: #EEEDE9; --ink-2: #C7C9CD; --muted: #8E939A; --line: #27292D; --line-2: #3A3D42;
  --c-ax: #7FB0E3; --c-gl: #E59A62; --c-mk: #E08DBF; --c-all: #6DC1A0; --acc-ink: #0E1A26; --band: #1D1F23; --dim: #3F4247;
  --bad: #FF8F75; --warn: #F2C14E; --ok: #6DC1A0; --on-bad: #1A0D09; --on-warn: #1A1405;
  color-scheme: dark;
}

/* 사이트 바꾸기 — 세 곳 머리줄의 같은 자리(이름 바로 오른쪽)에 같은 모양. 지금 있는 곳은 먹색으로 채운다. 목록은 build.py 의 SITES 한 곳에서 만든다 */
.sites { display: inline-flex; flex: none; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.sites a { display: inline-flex; align-items: center; height: calc(var(--h-m) - 8px); padding: 0 13px; border-radius: 999px; font: var(--fw-c) var(--fs-c)/1 var(--font); letter-spacing: -.01em; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
.sites a:hover { color: var(--ink); text-decoration: none; }
.sites a[aria-current] { background: var(--ink); color: var(--bg); }
.sites a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (max-width: 520px) { .sites a { padding: 0 10px; } }

/* 테마 버튼 — 아이콘 버튼 M(동그라미). 달 = 어둡게로, 해 = 밝게로 */
.theme { display: grid; place-items: center; width: var(--h-m); height: var(--h-m); flex: none; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s, transform .35s var(--ease); }
.theme:hover { color: var(--acc); border-color: var(--acc); transform: rotate(-20deg); }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun, :root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}

/* 언어 고르기(2026-10-10 다국어 · 세 곳 공용 — 테마 버튼 앞) · 일본어 줄바꿈: 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다 → 문구 단위(auto-phrase, 안 되면 normal) */
.lang { flex: none; height: var(--h-s); padding: 0 30px 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E737A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px; color: var(--ink-2); font: var(--fw-c) var(--fs-c)/1 var(--font); cursor: pointer; appearance: none; -webkit-appearance: none; }
.lang:hover { border-color: var(--acc); color: var(--acc); }
.lang:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
html[lang="ja"] body, html[lang="zh"] body { word-break: normal; line-break: strict; }
@supports (word-break: auto-phrase) { html[lang="ja"] body { word-break: auto-phrase; } }
@media (max-width: 640px) { .lang { padding: 0 24px 0 10px; background-position: right 9px center; } }
/* 휴대폰(10-11): 언어 고르기는 지구본 단추 하나 크기로 — 글자는 숨기고, 누르면 휴대폰의 목록이 열려 네 말이 그대로 보인다 */
@media (max-width: 560px) {
  .lang { width: var(--h-s); min-width: var(--h-s); padding: 0; color: transparent; text-indent: -999px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / 18px no-repeat; }
  .lang option { color: var(--ink); text-indent: 0; }
}