/* 가닥 디자인 토큰. 라이트(기본) · 다크(시스템 설정 또는 data-theme) · 개발 도구(VS Code · Cursor) 세 벌. */
:root {
  --railw: 56px; --rx: 28px;
  /* 바탕은 전체 지도처럼 흰 종이 + 중립 회색 (크림 · 베이지를 뺐어요). 글씨 대비는 작은 글씨까지 4.5 : 1 이상 */
  --bg: #FFFFFF; --surface: #FFFFFF; --fg: #111111; --fg2: #3A3A3A; --muted: #5F5F5F; --faint: #767676;
  --line: #E5E5E5; --bubble: #F2F2F2; --accent: #C8401A; --halo: #F6DDD4; --see: #E6E6E6;
  --stem: #D0D0D0; --ring: #B5B5B5; --rail: #D6D6D6; --viewport: rgba(17,17,17,0.05); --flash: #FBEDE7;
  --chrome: #EDEDED; --side: #F5F5F5; --tip: #111111; --tip-fg: #F5F5F5; --tip-sub: #BDBDBD;
  --spur: #A7A9AC;   /* 곁길 지선 (전체 지도와 같은 회색) */
  --radius: 4px;     /* 모서리는 작게 (지하철 표지판처럼 단정하게) */
  --shadow: 0 6px 18px rgba(0,0,0,0.07); --shadow-s: 0 2px 8px rgba(0,0,0,0.08);
  /* 글꼴은 한 벌: 로마자 · 숫자는 헬베티카(비녤리의 뉴욕 지하철), 한글은 Pretendard로 이어져요 (2026-10-08).
     자간은 세 단계: 큰 제목(28px 이상) 아주 좁게, 본문 좁게, 13px 이하 작은 글씨는 덜 좁게 */
  --display: 'Helvetica Neue', Helvetica, Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --body: 'Helvetica Neue', Helvetica, Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --tr-title: -0.08em; --tr-body: -0.05em; --tr-small: -0.03em;
  --ease: cubic-bezier(.2, .8, .2, 1);   /* 움직임은 한 곡선: 빠르게 나와서 부드럽게 멈춤 */
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121212; --surface: #181818; --fg: #F2F2F2; --fg2: #D4D4D4; --muted: #A6A6A6; --faint: #8F8F8F;
  --line: #2E2E2E; --bubble: #242424; --accent: #F0704A; --halo: #4A2A20; --see: #333333;
  --stem: #444444; --ring: #6A6A6A; --rail: #3C3C3C; --viewport: rgba(255,255,255,0.06); --flash: #3A2620;
  --chrome: #222222; --side: #151515; --tip: #F2F2F2; --tip-fg: #121212; --tip-sub: #5A5A5A;
  --shadow: 0 12px 32px rgba(0,0,0,0.4); --shadow-s: 0 4px 14px rgba(0,0,0,0.4); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #121212; --surface: #181818; --fg: #F2F2F2; --fg2: #D4D4D4; --muted: #A6A6A6; --faint: #8F8F8F;
  --line: #2E2E2E; --bubble: #242424; --accent: #F0704A; --halo: #4A2A20; --see: #333333;
  --stem: #444444; --ring: #6A6A6A; --rail: #3C3C3C; --viewport: rgba(255,255,255,0.06); --flash: #3A2620;
  --chrome: #222222; --side: #151515; --tip: #F2F2F2; --tip-fg: #121212; --tip-sub: #5A5A5A;
  --shadow: 0 12px 32px rgba(0,0,0,0.4); --shadow-s: 0 4px 14px rgba(0,0,0,0.4); color-scheme: dark }

/* 밤 · 낮을 바꾸는 순간에만 색이 부드럽게 넘어가요 (shared/ui/mark.js G.setTheme). 동작 줄이기를 켜면 바로 바뀌어요 */
html.theming, html.theming *, html.theming *::before, html.theming *::after {
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), fill .45s var(--ease), stroke .45s var(--ease), box-shadow .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease) !important; }

/* 개발 도구 입구(VS Code · Cursor)는 테마와 상관없이 이 어두운 값을 씀 */
.vsc { --bg: #1C1B19; --surface: #232220; --fg: #ECEAE5; --fg2: #D2CEC7; --muted: #A39F98; --faint: #807C75; --line: #393733; --bubble: #2F2D2A;
  --accent: #F0704A; --halo: #4E2B20; --see: #3D3B37; --stem: #4A4743; --ring: #6E6A63; --rail: #45433E; --viewport: rgba(255,255,255,0.06); --flash: #3B2720;
  --chrome: #2A2926; --side: #201F1D; --term: #161513; --code: #1A1918; --add: rgba(120,170,110,0.16); --del: rgba(220,110,90,0.18); --addfg: #9CC48E; --delfg: #E59580;
  color: var(--fg); color-scheme: dark; }