/* Shared design tokens and reading rules. Keep the established portfolio design. */
:root {
  /* Page background color for every page (the white content sheet sits on top of it). */
  --bg: #eceeea;
  --ink: #20211f;
  --muted: #4f544d;
  --body-ink: #363b35;
  --line: rgba(32, 33, 31, .12);
  --accent-deep: #1f4f43;
  --text-meta: .84rem;
  --text-small: .94rem;
  --text-body: .98rem;
  --text-display: 3.5rem;
  --text-title: 1.25rem;
  --line-heading: 1.4;
  --tracking-heading: -.02em;
  --action-transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  --font-display: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(47, 111, 94, .12); }
a, button, video { touch-action: manipulation; }
.skip-link { position: absolute; z-index: 10; top: 8px; left: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; background: var(--accent-deep); color: #fff; font-size: var(--text-small); font-weight: 800; line-height: 1.5; transform: translateY(calc(-100% - 16px)); }
.skip-link:focus-visible { transform: none; outline-color: var(--accent-deep); text-decoration: none; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background: var(--bg);
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, p, span, strong, a { word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img, video { display: block; max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
a[href]:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
a[href]:active { background-color: rgba(47, 111, 94, .12); }
@media (hover: hover) and (pointer: fine) {
  a[href]:hover { text-decoration: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :where(a[href]) { transition: color 160ms ease, background-color 160ms ease; }
}