@charset "UTF-8";
/* ==========================================================================
base.css — 리셋 / 기본 타이포 / 링크 / 포커스 / 접근성 유틸
전국무지개퀵화물(무지개퀵) · ver 1.0.0 / 2026-08-23
★ 로드 순서: tokens.css → base.css → layout.css → components.css
★ 이 파일에는 색·간격 값을 직접 쓰지 않는다. tokens.css 변수만 참조한다.
========================================================================== */
/* --------------------------------------------------------------------------
1. 리셋 / 노멀라이즈
normalize.css 를 통째로 넣지 않고 실제로 필요한 항목만 추렸다.
외부 CDN 의존을 줄이고, 우리가 쓰지 않는 요소의 규칙을 유지보수 대상에서 뺀다.
-------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
/* 마진을 전부 0으로 밀고 필요한 곳에서만 다시 준다 — 세로 리듬을 토큰으로 통제하기 위함
★ :where() 로 감싼 이유 (D-041 여백 점검): 요소 선택자는 특정도 (0,0,1) 이라
레이아웃의 리듬 규칙(:where(...) > * + *, 특정도 0)을 이겨 버렸다. 그 결과
·
·
· 만 여백이 죽어 "표 위에 공백이 없는" 현상이 생겼다.
:where() 로 특정도를 0 으로 낮추면 뒤에 오는 어떤 저작자 규칙도 이 리셋을 덮을 수 있고,
브라우저 기본값은 여전히 지워진다(출처가 특정도보다 먼저 비교되므로). */
:where(html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd,
ul, ol, li, fieldset, legend, table, th, td, pre) { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
html {
-webkit-text-size-adjust: 100%; /* iOS 가로 전환 시 글자 확대 방지 */
text-size-adjust: 100%;
-moz-tab-size: 2;
tab-size: 2;
}
body {
min-height: 100vh;
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-body);
letter-spacing: var(--ls-body);
/* 한글은 힌팅이 강하면 획이 뭉쳐 보인다. 안티에일리어싱을 부드럽게 고정. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* 한글은 어절 단위 줄바꿈이 자연스럽다 */
word-break: keep-all;
overflow-wrap: break-word;
}
/* 모바일 하단 고정 액션바가 콘텐츠 마지막 줄을 가리지 않게 바닥을 비워 둔다 (D-010 §3-2) */
body.has-bottombar {
padding-bottom: calc(var(--bottombar-h) + var(--safe-bottom));
}
@media (min-width: 1024px) {
body.has-bottombar { padding-bottom: 0; } /* 데스크톱은 하단 고정바 없음 */
}
/* 미디어 요소 */
img, picture, video, canvas, svg, iframe {
display: block;
max-width: 100%;
}
img, video { height: auto; }
svg { fill: currentColor; } /* 아이콘은 전부 인라인 SVG + currentColor */
img { border-style: none; font-style: italic; color: var(--color-text-muted); } /* alt 노출 시 본문과 구분 */
/* 폼 요소는 폰트를 상속받지 않으므로 명시 */
input, button, textarea, select {
font: inherit;
letter-spacing: inherit;
color: inherit;
}
button { background: none; border: 0; cursor: pointer; }
textarea { resize: vertical; }
::placeholder { color: var(--color-text-disabled); opacity: 1; }
/* 테이블 — 기본 뼈대만. 시각 스타일은 components.css .table */
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
th { text-align: left; font-weight: var(--fw-semibold); }
hr {
height: 0;
border: 0;
border-top: var(--border-width) solid var(--color-border);
margin: var(--space-8) 0;
}
/* 축약어 밑줄 — 한글 페이지에서 영문 약어(KTX 등)를 남용하지 않지만 마크업은 대비해 둔다 */
abbr[title] { text-decoration: underline dotted; cursor: help; }
b, strong { font-weight: var(--fw-bold); }
small { font-size: var(--fs-caption); }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
/* --------------------------------------------------------------------------
2. 기본 타이포그래피
HTML 태그 자체에 스케일을 물려 둔다. 마크업이 의미대로 작성되면 클래스 없이도
위계가 나오고, 퍼블리셔가 클래스를 빠뜨려도 디자인이 무너지지 않는다.
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
color: var(--color-text-strong);
font-weight: var(--fw-bold);
word-break: keep-all;
text-wrap: balance; /* 지원 브라우저에서 제목 줄바꿈을 고르게 — 미지원 시 무시됨 */
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-semibold); }
h5, h6 { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--fw-semibold); }
p { text-wrap: pretty; } /* 마지막 줄 한 글자 남는 현상 완화 */
/* 본문 흐름 안에서만 세로 간격을 준다(.flow 로 감싼 영역). 컴포넌트 내부는 영향 없음 */
.flow > * + * { margin-top: var(--space-4); }
.flow > * + h2 { margin-top: var(--space-12); }
.flow > * + h3 { margin-top: var(--space-8); }
.flow > * + h4 { margin-top: var(--space-6); }
/* 본문 리스트 (클래스 없는 ul/ol) */
.flow ul:not([class]),
.flow ol:not([class]) { padding-left: 1.25em; }
.flow ul:not([class]) { list-style: disc; }
.flow ol:not([class]) { list-style: decimal; }
.flow li + li { margin-top: var(--space-2); }
blockquote {
border-left: var(--border-width-accent) solid var(--color-border-brand);
padding-left: var(--space-4);
color: var(--color-text);
}
/* 타이포 유틸 — 스케일 8단계를 클래스로도 노출 */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); letter-spacing: var(--ls-h4); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: var(--fw-body-lg); letter-spacing: var(--ls-body-lg); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); letter-spacing: var(--ls-body); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); letter-spacing: var(--ls-caption); }
.t-muted { color: var(--color-text-muted); }
.t-strong { color: var(--color-text-strong); }
.t-brand { color: var(--color-brand); }
.t-action { color: var(--action-900); } /* 흰 배경 위 텍스트용은 900 (11.28:1). 600은 채움 전용 */
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }
.t-balance { text-wrap: balance; }
/* 숫자 — 전화번호·요금·적재중량. 자릿수 폭을 고정해 표에서 열이 흔들리지 않게 한다 */
.num {
font-family: var(--font-num);
font-feature-settings: var(--font-feature-num);
font-variant-numeric: tabular-nums lining-nums;
}
/* 하나의 수(전화번호·금액)는 중간에서 줄바꿈되면 안 된다.
.num 자체에 걸지 않는 이유 — 목록을 담은 .num 이 있다
(freight 「취급 톤급」: "1톤 / 1.4톤 / … / 25톤" 40자). 320px 에서 넘친다. */
.num--atomic { white-space: nowrap; }
/* 법적 고지·각주 — 보상/약관 문구는 이 크기 아래로 내리지 않는다 (CLAUDE.md §5) */
.legal-note {
font-size: var(--fs-caption);
line-height: var(--lh-caption);
color: var(--color-text-muted);
}
/* --------------------------------------------------------------------------
3. 링크
-------------------------------------------------------------------------- */
a {
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
a:active { color: var(--blue-800); }
/* 어두운(네이비) 영역 안의 링크 — 헤더/푸터/CTA 밴드 */
.on-dark a { color: var(--color-link-on-dark); }
.on-dark a:hover { color: var(--neutral-0); }
/* 밑줄을 빼는 경우: 버튼처럼 보이는 링크, 네비게이션, 카드 전체 링크.
본문 안의 링크는 절대 밑줄을 빼지 않는다(색만으로 링크를 구분하면 색각 이상 사용자가 못 찾는다). */
.link-plain { text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
/* 전화 링크 — 기기 기본 스타일(파란색 강제)을 막고 우리 토큰으로 통일 */
/* tel: 링크는 밑줄을 없애되, 색은 클래스 없는 인라인 링크에만 상속시킨다.
버튼 등 클래스가 붙은 tel 링크까지 color:inherit 를 적용하면
컴포넌트가 지정한 색(예: 주황 CTA 위 흰 글자)을 덮어써 대비가 깨진다. */
a[href^="tel:"] { text-decoration: none; }
a[href^="tel:"]:not([class]) { color: inherit; }
/* --------------------------------------------------------------------------
4. 포커스 링 — 절대 제거하지 않는다 (WCAG 2.4.7)
:focus-visible 을 쓰므로 마우스 클릭에는 링이 뜨지 않고 키보드 탐색에만 뜬다.
-------------------------------------------------------------------------- */
:focus { outline: none; } /* 기본 링 제거 후 아래에서 다시 그린다 */
:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-sm);
}
.on-dark :focus-visible { outline-color: var(--focus-ring-color-on-dark); }
/* :focus-visible 미지원 구형 브라우저 폴백 — 링이 아예 없는 것보다 항상 뜨는 편이 낫다 */
@supports not selector(:focus-visible) {
:focus {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
}
/* 앵커 이동 시 대상 섹션 강조 — 어디로 왔는지 알려 준다 */
:target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
::selection { background: var(--navy-700); color: var(--neutral-0); }
/* --------------------------------------------------------------------------
5. 스크롤 동작
-------------------------------------------------------------------------- */
html {
scroll-behavior: smooth;
/* sticky 헤더 높이만큼 앵커 위치를 내려 준다. 이게 없으면 #faq 로 이동했을 때
제목이 헤더 뒤에 가려진다 — 앵커가 많은 사이트(고객지원 6섹션)에서 필수. */
scroll-padding-top: calc(var(--header-h) + var(--space-4));
}
@media (min-width: 1024px) {
html { scroll-padding-top: calc(var(--header-h-lg) + var(--space-6)); }
:target { scroll-margin-top: calc(var(--header-h-lg) + var(--space-6)); }
}
/* 모바일 메뉴 오버레이가 열린 동안 배경 스크롤 잠금 */
body.is-locked { overflow: hidden; touch-action: none; }
/* --------------------------------------------------------------------------
6. 접근성 유틸리티
-------------------------------------------------------------------------- */
/* 화면에서만 숨기고 스크린리더는 읽는다. 아이콘 버튼 라벨·표 캡션 등에 사용 */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* 평소엔 숨어 있다가 키보드 포커스가 오면 나타난다 — "본문 바로가기" 링크용 */
.sr-only--focusable:focus,
.sr-only--focusable:focus-visible {
position: fixed !important;
top: var(--space-2); left: var(--space-2);
width: auto; height: auto;
margin: 0;
padding: var(--space-3) var(--space-4);
overflow: visible;
clip: auto; clip-path: none;
z-index: var(--z-toast);
background: var(--navy-800);
color: var(--neutral-0);
border-radius: var(--radius-md);
box-shadow: var(--shadow-3);
text-decoration: none;
}
/* 최소 터치 타깃 보장 — 시각 크기는 그대로 두고 클릭 영역만 넓힌다 */
.tap-safe { position: relative; }
.tap-safe::after {
content: "";
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
min-width: var(--tap-min);
min-height: var(--tap-min);
width: 100%; height: 100%;
}
/* 표시 제어 */
.is-hidden { display: none !important; }
[hidden] { display: none !important; }
.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 1024px) {
.only-mobile { display: none; }
.only-desktop { display: block; }
}
/* --------------------------------------------------------------------------
7. 환경설정 대응
-------------------------------------------------------------------------- */
/* 모션 최소화 — 전정기관 장애 사용자 대응 (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Windows 고대비 모드 — 우리 색이 전부 무시되므로 경계선만이라도 남긴다 */
@media (forced-colors: active) {
.btn, .card, .table, .input, .badge { border: 1px solid; }
:focus-visible { outline: 3px solid Highlight; }
}
/* --------------------------------------------------------------------------
8. 인쇄 — B2B 고객이 요금·사업자 정보를 출력해 결재에 올리는 경우가 실제로 있다
-------------------------------------------------------------------------- */
/* 용지 — 명시하지 않으면 Chrome 이 Letter 로 뽑는다. 국내 기본은 A4 다.
@page 는 스코프를 가질 수 없으므로 여기(전역 인쇄 블록)가 유일한 자리다. */
@page {
size: var(--page-size);
margin: var(--page-margin);
}
@media print {
.site-header, .site-footer, .bottombar, .cta-band, .skip-link { display: none !important; }
body { padding-bottom: 0; background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
/* 링크 주소를 지면에 남긴다. 단 앵커·전화 링크는 제외(지면에서 의미 없음) */
.flow a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
.card, .table { box-shadow: none; break-inside: avoid; }
h2, h3 { break-after: avoid; }
}