/* ==========================================================
   core/base.css — 리셋 · 기본 글꼴 · 유틸리티 · 접근성 · 모션
   요소 선택자와 전역 유틸리티만 둔다. 컴포넌트 모양은 components/ 로.
   ========================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--nav-h) + 12px);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--ink);
  background: var(--surface);
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 넓은 표·칩 목록은 자기 영역 안에서만 가로 스크롤한다 */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* ---------- 아이콘 (스프라이트 <use href="...#i-..."> ) ---------- */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }
.ico-xl { width: 28px; height: 28px; }

/* ---------- 유틸리티 ---------- */
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-3); }

/* ---------- 접근성 ---------- */
:focus-visible { outline: 3px solid rgba(14, 162, 113, .45); outline-offset: 2px; border-radius: 10px; }
main:focus { outline: none; }
.skip {
  position: fixed; left: 50%; top: 10px; z-index: 300; transform: translate(-50%, -160%);
  padding: 10px 18px; border-radius: 12px; background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700; transition: transform .2s;
}
.skip:focus { transform: translate(-50%, 0); }

/* ---------- 모션 ---------- */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(14, 162, 113, .5); } 100% { box-shadow: 0 0 0 8px rgba(14, 162, 113, 0); } }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fade-up { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes grow-x { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }

/* 스크롤 등장 (core/chrome.js 가 .in 을 붙인다) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}