// ───────────────────────────────────────────────────────────────────────────── // 리셋 & 베이스 // // 브라우저 기본 스타일 중 디자인 시스템과 충돌하는 것만 걷어낸다. 전면 리셋(모든 // 요소를 무스타일로)이 아니라, 시맨틱 태그의 기본 동작은 살리고 시각 표현만 // 토큰으로 되돌리는 방식이다. // ───────────────────────────────────────────────────────────────────────────── @use "abstracts" as fox; *, *::before, *::after { box-sizing: border-box; } // ⚠️ **1rem = 10px 규약의 근거.** 브라우저 기본 글자 크기(16px)의 62.5%가 10px다. // px → rem 환산이 10으로 나누기가 되어 토큰 값이 읽기 쉬워진다. // px 고정과 달리 사용자가 브라우저 글자 크기를 키우면 앱 전체가 비례해 확대된다 // (접근성 설정 존중). 그 대신 `body`에서 실제 본문 크기를 되돌려 놓아야 한다 — // 아래 `body`의 `typo(body-md)`가 그 역할이다. // // ⚠️ 미디어 쿼리 안의 `rem`은 이 값의 영향을 받지 않는다(항상 브라우저 기본 크기 // 기준). `tokens/_layout.scss` 참고. html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: fox.color(background); color: fox.color(foreground); font-family: fox.font(sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @include fox.typo(body-md); } // 제목·문단의 기본 여백을 제거한다 — 간격은 레이아웃(gap/margin 토큰)이 책임지고, // 태그가 스스로 여백을 갖지 않게 해야 조립 결과를 예측할 수 있다. h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } // 제목 태그의 기본 크기/굵기도 제거한다 — 시각적 위계는 `typo()` 프리셋으로만 // 정하고, 태그 선택은 문서 구조(접근성) 기준으로 하게 만든다. h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } // 폼 요소는 폰트를 상속하지 않는 것이 브라우저 기본값이라 명시적으로 되돌린다. button, input, select, textarea { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; } button { padding: 0; border: 0; background: none; cursor: pointer; } button:disabled { cursor: default; } a { color: inherit; text-decoration: none; } img, svg, video, canvas { display: block; max-width: 100%; } table { border-collapse: collapse; border-spacing: 0; } // 브라우저 기본 포커스 링을 지우지 않는다 — 컴포넌트가 `focus-ring()` 믹스인으로 // 자기 링을 정의하면 그것이 우선하고, 정의하지 않은 요소는 기본 링이 남아 키보드 // 사용자가 길을 잃지 않는다. :where(:focus-visible) { outline-offset: 0.2rem; }