/* ══════════════════════════════════════════════════════════════
   base.css — 리셋 · 타이포 · 폼/버튼 기본형

   여기에는 "이름 없는 것"만 둔다. 요소 선택자와 최소한의 전역 규칙뿐이다.
   이름이 붙은 재사용 조각은 전부 components.css로 간다.

   로드 순서: tokens.css → base.css → components.css → shell.css → pages/*.css
   규격: docs/DESIGN_GUIDE.md
   ══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;          /* 가로 스크롤 전역 차단 */
  /* 세로 스크롤바 자리를 항상 비워 둔다.
     내용이 짧은 페이지에는 스크롤바가 없고 긴 페이지에는 있어서, 가운데
     정렬된 본문이 페이지를 옮길 때마다 스크롤바 폭만큼 좌우로 흔들렸다.
     (CGV 예매 감시 ↔ AI 큐레이션 전환에서 눈에 띄었다.)
     미지원 브라우저는 아래 @supports가 같은 효과를 낸다. */
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg-body);
  color: var(--text-primary);
  min-height: 100vh;
  word-break: keep-all;        /* 한글은 어절 단위로 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}

/* 키보드 포커스는 절대 지우지 않는다 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 제목 ───────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  color: var(--text-primary);
  line-height: var(--lh-tight);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-xl);  font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-lg);  font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-md);  font-weight: var(--fw-medium); }

a { color: var(--link-color); }

/* ── 폼 요소 ────────────────────────────────────────────────── */
label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--sp-1);
}

input, select, textarea, button {
  font-family: inherit;
}

input[type="text"], input[type="url"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"],
input[type="email"], input[type="search"],
select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;                /* flex 컨텍스트에서 수축 허용 */
  padding: 10px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  background: var(--input-bg);
  color: var(--text-primary);
  /* 16px 미만이면 iOS Safari가 포커스 시 화면을 자동 확대한다. 절대 줄이지 않는다. */
  font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--motion-base) var(--ease);
}
input:focus, select:focus, textarea:focus { border-color: var(--input-focus); }

/* input[type="time"]: 모바일 브라우저의 네이티브 최소 너비를 무력화한다 */
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── 버튼 기본형 ────────────────────────────────────────────────
   전역 button에 레이아웃(flex 등)을 걸지 않는다.
   늘어남은 .btn-row 안에서만 일어난다. */
button {
  padding: 12px;
  border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  cursor: pointer;
  min-height: 44px;            /* 터치 대상 최소 크기 — 화면 폭과 무관하게 보장 */
  transition: background var(--motion-base) var(--ease);
}
button:disabled { cursor: not-allowed; }

@media (min-width: 1024px) {
  button { min-height: 40px; padding: 9px 16px; }
}

/* ── 표 기본형 ──────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }

/* 숫자가 세로로 정렬되는 곳 */
.num, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* 보조 문구. 여러 페이지가 쓰지만 어디에도 정의가 없어 본문과 같은 색으로 보였다. */
.muted { color: var(--text-muted); }

/* 가시성 제어는 hidden 속성 하나로만 한다.
   CSS의 display:none 과 JS의 style.display 를 섞으면 어느 쪽이 이겼는지
   추적할 수 없다. JS는 el.hidden = true/false 만 쓴다. */
[hidden] { display: none !important; }

/* 스크린리더 전용 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}