/* ============================================================================
   base.css — 리셋 + 기본 요소
   ----------------------------------------------------------------------------
   tokens.css 다음에 읽는다. 클래스는 여기서 거의 정의하지 않는다.
   (레이아웃 유틸 몇 개만 맨 아래에 있다.)
   ========================================================================== */

/* ── Pretendard 자체 호스팅 (선택) ───────────────────────────────────────────
   CDN 을 쓰지 않는 게 기본이다. 굳이 Pretendard 로 고정하고 싶으면
   woff2 파일을 public\styles\fonts\ 에 두고 아래 주석을 풀어라.
   그때도 tokens.css 의 --font-sans 폴백 목록은 절대 지우지 마라.

@font-face {
  font-family: "Pretendard Variable";
  src: url("./fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-007F, U+AC00-D7A3, U+1100-11FF, U+3130-318F;
}
─────────────────────────────────────────────────────────────────────────── */

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

/* ⚠️ [hidden] 은 브라우저 기본 스타일이라 작성자가 display 를 지정한 클래스에 진다.
   네이버블로그자동화에서 서랍이 hidden 인데도 화면을 덮고 있던 버그가 이것 때문이었다.
   이 한 줄이 그 계열 버그를 전부 막는다. 지우지 마라. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 상단 고정 헤더에 앵커가 가려지지 않게 */
  scroll-padding-top: calc(var(--space-16) + var(--space-4));
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-base);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* 한글은 단어 중간에서 끊기면 읽기 어렵다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 제목 ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-heavy);
}
h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-400); font-weight: var(--fw-bold); }
h5, h6 { font-size: var(--fs-300); font-weight: var(--fw-bold); }

p {
  margin: 0 0 var(--space-4);
}
p:last-child {
  margin-bottom: 0;
}

/* ── 링크 ──────────────────────────────────────────────────────────────── */
a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:visited {
  color: var(--text-link-visited);
}

/* ── 목록 ──────────────────────────────────────────────────────────────── */
ul, ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.3em;
}
li + li {
  margin-top: var(--space-2);
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-left: 0;
}

/* ── 강조 ──────────────────────────────────────────────────────────────── */
strong, b {
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
small {
  font-size: var(--fs-300);
  color: var(--text-muted);
}
code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--bg-surface-2);
  border: var(--border-w) solid var(--border-muted);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}
pre {
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface-2);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  line-height: var(--lh-snug);
}
hr {
  border: 0;
  border-top: var(--border-w) solid var(--border);
  margin: var(--space-6) 0;
}
blockquote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

/* ── 미디어 ────────────────────────────────────────────────────────────── */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── 폼 기본 ───────────────────────────────────────────────────────────── */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  margin: 0;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
}
textarea {
  resize: vertical;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
legend {
  padding: 0;
}
label {
  cursor: pointer;
}

/* ── 포커스 ────────────────────────────────────────────────────────────────
   포커스 표시는 이 프로젝트에서 협상 대상이 아니다.
   outline:none 을 쓰려면 반드시 같은 줄에서 다른 표시를 줘라.
   ────────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
/* 마우스 클릭에는 테두리를 그리지 않는다(:focus-visible 이 처리) */
:focus:not(:focus-visible) {
  outline: none;
}
/* 남색 헤더 위에 올라가는 조작 요소 */
.on-dark :focus-visible,
.rail :focus-visible {
  outline-color: var(--focus-on-dark);
}

/* 키보드로만 보이는 본문 바로가기 */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--bg-surface);
  color: var(--text-strong);
  border: var(--border-w-strong) solid var(--focus);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ── 선택 영역 ─────────────────────────────────────────────────────────── */
::selection {
  background: var(--accent-tint);
  color: var(--text-strong);
}

/* ── 자리표시자 ────────────────────────────────────────────────────────────
   자리표시자는 라벨이 아니다. 예시만 넣는다. */
::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* ── 표 기본 ───────────────────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
}
caption {
  text-align: left;
  color: var(--text-muted);
  font-size: var(--fs-300);
  padding-bottom: var(--space-2);
}

/* ── 움직임을 줄여달라는 요청 존중 ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 고대비 모드 ───────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .btn,
  .card,
  .chip,
  .badge {
    border: 1px solid ButtonBorder;
  }
}

/* ============================================================================
   레이아웃 뼈대 — 여기까지만. 나머지 유틸 클래스는 만들지 않는다.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container-form);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.wrap--read { max-width: var(--container-read); }
.wrap--app  { max-width: var(--container-app); }

@media (min-width: 768px) {
  .wrap { padding-inline: var(--space-6); }
}

/* 세로로 쌓이는 기본 흐름 */
.stack > * + * {
  margin-top: var(--space-4);
}
.stack--tight > * + * { margin-top: var(--space-2); }
.stack--loose > * + * { margin-top: var(--space-6); }

/* 가로로 늘어놓기 (줄바꿈 허용) */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }
.spacer { flex: 1 1 auto; }

/* 좁은 화면에서는 한 줄, 넓어지면 두 줄 (설문의 짧은 입력 쌍) */
.pair {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .pair { grid-template-columns: 1fr 1fr; }
  .pair--3 { grid-template-columns: repeat(3, 1fr); }
}

/* 화면 낭독기에만 읽히는 글 */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 남색 면. 헤더·완료 화면에 쓴다 */
.on-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: var(--text-on-dark);
}
.on-dark p,
.on-dark .muted {
  color: var(--text-on-dark-muted);
}

.muted { color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }