/* ============================================
   common.css — 시안 공통 토큰 + 폰트
   ============================================ */

@import url('./assets/fonts/pretendard.css');
@import url('./assets/fonts/google.css');

:root {
  /* type stack */
  --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* color — engineering notebook: 흰 배경 + 짙은 검정 + 그레이 액센트 */
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --muted: #7a7a7a;
  --rule: #d9d9d9;
  --rule-strong: #1a1a1a;
  --bg: #fbfbfa;
  --bg-card: #ffffff;
  --accent: #1c63d6;   /* underline·link 액센트 (드물게) */
  --hl: #fffbe6;       /* 하이라이트 (마진노트) */

  /* spacing */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-6: 24px;
  --gap-8: 32px;
  --gap-12: 48px;
  --gap-16: 64px;
  --gap-24: 96px;

  /* type scale */
  --t-mono: 12px;
  --t-meta: 13px;
  --t-body: 16px;
  --t-lg: 19px;
  --t-h3: 22px;
  --t-h2: 28px;
  --t-h1: 44px;
  --t-display: 72px;
  --leading-body: 1.6;
  --leading-tight: 1.25;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-kr);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  font-weight: 400;
}

body[data-lang="en"] { font-family: var(--font-en); }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; display: block; }

/* mono meta — 시간·태그·라벨 */
.mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.02em; color: var(--muted); text-transform: uppercase; }
.mono-lg { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--ink-soft); }

/* lang toggle */
.lang-toggle {
  position: fixed; top: 18px; right: 20px; z-index: 100;
  display: inline-flex; gap: 0;
  font-family: var(--font-mono); font-size: var(--t-mono);
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 999px; padding: 2px;
}
.lang-toggle button {
  border: 0; background: transparent; padding: 6px 12px;
  font: inherit; color: var(--muted); cursor: pointer;
  border-radius: 999px;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lang-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* lang swap */
[data-lang="ko"] .en { display: none; }
[data-lang="en"] .ko { display: none; }

/* screen reader only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* selection */
::selection { background: var(--ink); color: var(--bg); }

@media (max-width: 768px) {
  :root {
    --t-display: 44px;
    --t-h1: 32px;
    --t-h2: 22px;
    --t-h3: 18px;
    --t-body: 15px;
  }
}

@media (max-width: 480px) {
  :root {
    --t-display: 36px;
    --t-h1: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}