/* 웹판 바탕 — 초기화 · 글꼴 · 단추 여덟 모양 · 칩 · 구역 제목 · 사진 자리 (색은 tokens.css 이름만) */
@font-face { font-family: 'IBM Plex Sans KR'; font-weight: 400; font-display: swap; src: url('글꼴/IBMPlexSansKR-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans KR'; font-weight: 600; font-display: swap; src: url('글꼴/IBMPlexSansKR-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans KR'; font-weight: 700; font-display: swap; src: url('글꼴/IBMPlexSansKR-Bold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('글꼴/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url('글꼴/IBMPlexMono-SemiBold.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-style: normal; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
a { color: var(--accent-ink); }
img, svg { display: block; max-width: 100%; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.보이지않게 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 아이콘 · 색 타일 */
.아이콘 { width: 20px; height: 20px; flex: none; }
.타일 { width: 26px; height: 26px; padding: 5px; border-radius: 7px; color: var(--on-tile); flex: none; }
.타일.t1 { background: var(--t1); } .타일.t2 { background: var(--t2); } .타일.t3 { background: var(--t3); }
.타일.t4 { background: var(--t4); } .타일.t5 { background: var(--t5); } .타일.t6 { background: var(--t6); }
.타일.t7 { background: var(--t7); }

/* 단추 — 기본 · 올림 · 초점 · 누름 · 막힘 · 처리 중 · 오류 · 성공 */
.단추 {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 36px; padding: 0 var(--space-4);
    border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
    background: var(--paper); color: var(--ink);
    font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.단추 .아이콘 { width: 18px; height: 18px; }
.단추:hover { background: var(--side-2); }
.단추:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; transition: none; }
.단추:active { transform: translateY(1px); }
.단추:disabled, .단추[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.단추[aria-busy="true"] { cursor: progress; color: var(--muted); }
.단추[data-state="error"] { border-color: var(--bad); color: var(--bad); background: var(--bad-bg); }
.단추[data-state="success"] { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.단추.주 { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.단추.주:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.단추.주:active { background: var(--accent-press); }
.단추.크게 { min-height: var(--tap); padding: 0 var(--space-5); font-size: var(--text-md); }

/* 칩 · 구역 제목 */
.칩 { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.칩.적합 { background: var(--ok-bg); color: var(--ok); }
.칩.부적합 { background: var(--bad-bg); color: var(--bad); }
.칩.주의 { background: var(--warn-bg); color: var(--warn); }
.구역 { color: var(--accent-ink); font-weight: 600; font-size: var(--text-md); padding: var(--space-1) 0 var(--space-2); border-bottom: 1px dashed var(--line); }

/* 사진 자리 */
.사진자리 {
    background: repeating-linear-gradient(135deg, var(--ph) 0 8px, var(--ph-2) 8px 16px);
    color: var(--ph-ink); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .단추:active { transform: none; }
}