/* MOOL 법무·고객 페이지 — tokens.css(docs/brand/tokens.css 사본) 위에 얹는 최소 스타일.
   규칙: 흑백 토큰 + 본문 링크만 물빛(--accent-text, components.md §S6) · 모서리 0 · 그림자 0 · 그라데이션 0 · 상태는 사각형 + 글자. 외부 요청 0(폰트 자체 호스팅). */

@font-face { font-family: "SUIT"; src: url("fonts/SUIT-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SUIT"; src: url("fonts/SUIT-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/ArchivoExpanded-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

/* 밤 테마: 기기 설정을 따른다 (tokens.css 의 [data-theme="dark"] 값과 같게 유지) */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: var(--gray-950); --surface: var(--gray-900); --sunken: var(--gray-850);
    --ink: #F5F5F5; --ink-muted: #B0B0B0; --ink-faint: #949494; --ink-disabled: #5C5C5C;
    --inverse: var(--gray-950); --line: var(--gray-800); --line-control: #6B6B6B; --line-strong: #F5F5F5;
    --accent: var(--blue-400); --accent-ink: var(--gray-950); --accent-text: var(--blue-400); --accent-line: var(--blue-400);
    --celebrate: var(--lime-500); --warn-text: var(--red-400); --warn-line: var(--red-400);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; box-shadow: none; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: var(--tracking-body); word-break: keep-all; overflow-wrap: anywhere;
}

.skip { position: absolute; left: var(--space-2); top: -100px; padding: var(--space-2) var(--space-3);
  background: var(--ink); color: var(--inverse); font-weight: var(--fw-bold); z-index: 10; }
.skip:focus { top: var(--space-2); }
:focus-visible { outline: var(--stroke-base) solid var(--line-strong); outline-offset: 2px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: var(--stroke-base); }
/* 본문 속 링크만 물빛 (낮 5.73:1 · 밤 5.94:1). 메뉴·카드·반전 상자 링크는 흑백 그대로 */
main p a, main li a, main td a, main dd a { color: var(--accent-text); }
.toc a { color: inherit; } /* 목차는 흑백 — 링크가 줄지어 서면 색 덩어리가 된다 */

/* 머리: 워드마크 + 페이지 목록 */
.site-head { border-bottom: var(--stroke-base) solid var(--line-strong); background: var(--ground); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding-block: var(--space-4); }
.mark { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.mark svg { width: 92px; height: auto; display: block; }
.mark span { font-weight: var(--fw-bold); font-size: var(--fs-body); }
.nav { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: var(--space-2);
  font-size: var(--fs-small); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--ink); color: var(--inverse); font-weight: var(--fw-bold); }
.nav a:hover:not([aria-current]) { text-decoration: underline; }

.wrap { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); }
main { padding-block: var(--space-10) var(--space-20); }

h1 { font-size: var(--fs-headline); line-height: var(--lh-head); letter-spacing: var(--tracking-head);
  font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
h2 { font-size: var(--fs-title); line-height: var(--lh-head); letter-spacing: var(--tracking-head);
  font-weight: var(--fw-bold); margin: var(--space-14) 0 var(--space-3); padding-top: var(--space-3);
  border-top: var(--stroke-base) solid var(--line-strong); }
h3 { font-size: var(--fs-body); font-weight: var(--fw-bold); margin: var(--space-8) 0 var(--space-2); }
p, ul, ol, dl, table { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: var(--space-1); }
.lede { color: var(--ink-muted); font-size: var(--fs-body); }
.meta { color: var(--ink-faint); font-size: var(--fs-meta); }
.figure { font-family: var(--font-figure); font-weight: var(--fw-figure); font-stretch: var(--figure-wide);
  letter-spacing: var(--tracking-figure); }

/* 반전 블록 = 가장 중요한 한 가지 */
.callout { background: var(--ink); color: var(--inverse); padding: var(--space-5); margin: var(--space-6) 0; }
.callout a { color: inherit; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

/* 선 상자 = 참고 */
.note { border: var(--stroke-base) solid var(--line-strong); padding: var(--space-4) var(--space-5); margin: var(--space-6) 0; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }

/* 상태 사각형 + 글자 */
.status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.status::before { content: ""; width: 10px; height: 10px; border: var(--stroke-base) solid currentColor; }
.status.on::before { background: currentColor; }

/* 자리표시자: 오너가 채울 값 — 점묘로 표시 */
.ph { font-family: var(--font-text); font-weight: var(--fw-bold); padding: 0 2px;
  outline: 1px dashed var(--line-control); outline-offset: 1px; }

/* 표: 좁은 화면에서 가로 스크롤 (부모 .table 에 tabindex=0 + role=region) */
.table { overflow-x: auto; margin: 0 0 var(--space-6); border-top: var(--stroke-base) solid var(--line-strong); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--fs-small); margin: 0; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--stroke-hair) solid var(--line); }
th { font-weight: var(--fw-bold); }
thead th { border-bottom: var(--stroke-hair) solid var(--line-strong); }
caption { text-align: left; font-size: var(--fs-meta); color: var(--ink-faint); padding: var(--space-2) 0; caption-side: bottom; }

/* 목차 */
.toc { border-left: var(--stroke-base) solid var(--line-strong); padding-left: var(--space-4); margin: var(--space-8) 0; }
.toc ol { margin: 0; font-size: var(--fs-small); }

/* 단계 목록 — 숫자는 Archivo 확장형 */
ol.steps { list-style: none; padding: 0; counter-reset: s; }
ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-3);
  padding: var(--space-4) 0; border-bottom: var(--stroke-hair) solid var(--line); margin: 0; }
ol.steps > li::before { content: counter(s, decimal-leading-zero); font-family: var(--font-figure);
  font-weight: var(--fw-figure); font-stretch: var(--figure-wide); font-size: var(--fs-title); line-height: 1.2; }

/* 버튼형 링크 (메일 보내기 등) */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h);
  padding-inline: var(--space-6); background: var(--ink); color: var(--inverse); font-weight: var(--fw-bold);
  text-decoration: none; border: var(--stroke-base) solid var(--ink); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn:hover { text-decoration: underline; }

/* 카드 목록 (홈) */
.cards { list-style: none; padding: 0; margin: var(--space-8) 0; border-top: var(--stroke-base) solid var(--line-strong); }
.cards li { margin: 0; border-bottom: var(--stroke-hair) solid var(--line); }
.cards a { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-4) 0; text-decoration: none; }
.cards strong { font-size: var(--fs-title); }
.cards span { color: var(--ink-muted); font-size: var(--fs-small); grid-column: 1; }
.cards a::after { content: "→"; grid-row: 1 / span 2; grid-column: 2; align-self: center; font-weight: var(--fw-bold); }
.cards a:hover strong { text-decoration: underline; }

/* 사업자 정보 */
.biz { background: var(--surface); border-top: var(--stroke-base) solid var(--line-strong); padding-block: var(--space-8) var(--space-14); }
.biz h2 { border: 0; margin-top: 0; padding: 0; font-size: var(--fs-body); }
.biz dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); font-size: var(--fs-small); }
.biz dt { color: var(--ink-muted); }
.biz dd { margin: 0; }
.biz .meta { margin-top: var(--space-4); }

@media (min-width: 48rem) {
  h1 { font-size: 2.25rem; }
  main { padding-block: var(--space-14) var(--space-20); }
}

@media print {
  .site-head nav, .skip { display: none; }
  .callout { border: var(--stroke-base) solid #000; background: none; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}