/* * 베이스 — reset, 타이포 기본, 포커스. tokens.css 다음에 로드한다. * * 서체는 Google Fonts 링크로 받는다(레이아웃의 참조). 한글 서브셋이 * 376개 청크로 쪼개져 있어 브라우저가 실제 쓰인 글자의 청크만 내려받는다 — * 셀프호스팅하면 그 최적화를 잃고 리포에 10MB 이상이 들어온다. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface-base); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-13); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* 이 화면의 숫자는 15~30초마다 갱신되므로 자릿폭이 고정이어야 값이 출렁이지 않는다. Noto Sans KR 은 CJK 계열이라 기본이 이미 고정폭이지만(실측 확인), 웹폰트가 아직 안 왔거나 폴백으로 떨어진 순간에도 흔들리지 않도록 명시해 둔다. */ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: -0.01em; line-height: 1.25; } h1 { font-size: var(--fs-24); } h2 { font-size: var(--fs-18); } h3 { font-size: var(--fs-15); } h4 { font-size: var(--fs-13); } p { margin: 0 0 var(--sp-3); } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img, svg { vertical-align: middle; max-width: 100%; } hr { border: 0; border-top: 1px solid var(--graticule); margin: var(--sp-6) 0; } /* ------------------------------------------------------------ * 계측 수치 * * 이 제품 화면의 숫자는 15~30초마다 갱신된다. 비례폭 서체로 두면 자릿수가 * 바뀔 때마다 값이 좌우로 흔들려 읽는 사람이 매번 다시 초점을 잡아야 한다. * tabular-nums 로 자릿폭을 고정한다. * ------------------------------------------------------------ */ .num, .metric-value, .kpi-value, td.num, [data-num] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.01em; } /* 섹션 라벨 — 계측기 패널의 각인. */ .eyebrow, .field-label { font-family: var(--font-mono); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); } /* 한글 라벨용 각인. .eyebrow 의 mono + 대문자 + 0.08em 자간은 라틴 글자에서만 각인처럼 보인다 — 한글에 걸면 자소가 흩어져 오히려 읽기 어려워진다(표 머리글을 sans 로 둔 것과 같은 이유). 크기와 색만 각인 규칙을 따르고 서체는 sans 로 둔다. */ .eyebrow-ko { font-size: var(--fs-11); font-weight: var(--fw-medium); color: var(--ink-dim); } .muted { color: var(--ink-dim); } .faint { color: var(--ink-faint); } /* ------------------------------------------------------------ * 포커스 — 키보드 사용자에게만 링을 보인다. * ------------------------------------------------------------ */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--signal-soft); color: var(--ink); } ::placeholder { color: var(--input-placeholder); opacity: 1; } /* ------------------------------------------------------------ * 스크롤바 — 면이 아니라 선으로. 계측기 패널의 절제. * ------------------------------------------------------------ */ * { scrollbar-width: thin; scrollbar-color: var(--graticule-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--graticule-strong); border: 3px solid transparent; background-clip: content-box; border-radius: var(--r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }