/* =========================================================
   기본: 초기화, 글꼴, 아이콘, 유틸리티
   ========================================================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1:focus { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
a { color: inherit; }
code { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* Carbon Icons 는 채움 방식 (32px 그리드). 16, 20, 24 px 로 축소해 씀 */
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 12px; height: 12px; }

.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.mono { font-family: var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes pop-in { from { transform: translateY(12px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}