/* ============================================================
   base.css — 리셋 · 타이포 · 레이아웃 기본 (WU-00)
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  font-family:var(--font-kr);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--white);
  /* 한글은 어절 단위 줄바꿈, 한 어절이 폭을 넘으면 강제 분리 */
  word-break:keep-all;
  overflow-wrap:break-word;
  font-feature-settings:'tnum' 1;   /* 표 숫자 정렬 */
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  /* 모바일 고정 상담 바가 본문 하단을 가리지 않도록 */
  padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width:640px){ body{ padding-bottom:0; } }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
table{ border-collapse:collapse; width:100%; }

/* ── 제목 ── */
h1,h2,h3,h4{ line-height:var(--lh-tight); font-weight:700; letter-spacing:-.02em; }
h1{ font-size:var(--fs-hero); font-weight:800; letter-spacing:-.03em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }

p{ color:var(--steel); }
strong{ font-weight:700; color:var(--ink); }

/* 숫자·단계·프로세스 — 기획안 11-3 시그니처 활자 */
.mono{ font-family:var(--font-mono); font-weight:400; letter-spacing:-.01em; }

/* ── 레이아웃 ── */
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s8); }
.section--paper{ background:var(--paper); }
@media (min-width:1024px){ .section{ padding-block:var(--s9); } }

.grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.grid--2{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:640px){ .grid--2{ grid-template-columns:1fr 1fr; } }

.stack > * + *{ margin-top:var(--s4); }
.lead{ font-size:calc(var(--fs-body) + 1px); color:var(--steel); max-width:62ch; }

/* ── 강조 ── 흰 배경에서는 텍스트 색이 아니라 밑줄 바 (개발지시서 §4-1) ── */
.hl{ position:relative; display:inline-block; color:var(--ink); }
.hl::after{
  content:''; position:absolute; left:0; right:0; bottom:-.04em;
  height:.14em; min-height:3px; background:var(--signal);
}
/* 잉크 배경 위에서는 신호 노랑 텍스트 허용 (7.13:1) */
.on-ink .hl-text{ color:var(--signal); }
.mark{ background-color:var(--mark); padding:0 .18em; }

/* ── 접근성 ── */
:focus-visible{ outline:3px solid var(--signal); outline-offset:2px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--white); padding:var(--s3) var(--s4);
}
.skip:focus{ left:var(--s3); top:var(--s3); }
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ── 미결 토큰 표시 ── 개발지시서 §9 : 숨기지 않습니다 ── */
.tbd{
  display:inline-block; font-family:var(--font-mono); font-size:var(--fs-micro);
  color:var(--ink); background-color:var(--mark);
  border:1px dashed var(--line-firm); border-radius:var(--radius);
  padding:2px 6px;
}

/* ── 인쇄 ── */
@media print{
  body{ padding-bottom:0; }
  .site-header,.site-footer,.consult-bar,.no-print{ display:none !important; }
  .section{ padding-block:var(--s5); }
}