/* 플랫폼과 스튜디오의 공통 바탕: 초기화, 글자 렌더링, 포커스, 아이콘 선, 움직임 줄이기. 값은 tokens.css만 쓴다. */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text-1);
  font-family: var(--font); font-size: var(--fs-15); line-height: var(--lh-15); letter-spacing: var(--ls-15); font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-synthesis: none; /* 없는 굵기를 흉내 내 번지는 글자를 막는다 */
  word-break: keep-all; overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
/* 그림은 기본이 부드럽다. 진짜 픽셀 그림(.px, canvas)만 이웃 픽셀로 키운다 */
img.px, canvas.px { image-rendering: pixelated; }
/* 평면 아이콘 시트(kits.js의 smooth: true)는 부드럽게 키운다 */
canvas.kit-icon.smooth, canvas.px.smooth { image-rendering: auto; }
/* 숫자가 바뀌어도 줄이 흔들리지 않게 */
.tnum { font-variant-numeric: tabular-nums; }
/* 선 아이콘: 크기에 맞춰 선 굵기를 맞춘다 */
svg { flex: none; }
.ico { width: var(--icon-24); height: var(--icon-24); fill: none; stroke: currentColor; stroke-width: var(--stroke-24); stroke-linecap: round; stroke-linejoin: round; }
/* 포커스: 둥근 정도는 그 조각을 따른다 */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: rgba(255,200,61,.32); color: var(--text-1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}