/* ═══════════════════════════════════════════════════════════
   운쏠 공용 베이스 · 컴포넌트 CSS  (Phase 5 커밋 1)
   - 여기에는 전 화면 공용 요소만 둔다 (reset·타이포·버튼·칩·상단바 등).
   - 화면 전용 클래스(.cover/.msl/.chapter/.pull/.upsell/.moments/.toc/
     스텝폼)는 각 화면 커밋(5·6)에서 추가한다.
   - 색·형태 값은 전부 tokens.css 변수를 경유한다 (하드코딩 색 0건).
   Ref: life-manual-990-mvp.phase5-frontend.workorder.md §2 컴포넌트 계약
   ═══════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);            /* 데모 무대색(프로토 .phone 배경)은 폐기 — 실서비스 바탕은 종이색 */
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }

/* ── 콘텐츠 컬럼 (프로토 .phone 데모 프레임 대체) ── */
.lm-container {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
}
.wrap { padding: 0 var(--gutter); }
.hairline { height: 1px; background: var(--line); border: none; }

/* ── 타이포 유틸 ───────────────────────────── */
.disp { font-family: var(--disp); font-weight: 700; letter-spacing: -.01em; }
.eyebrow {
  font-size: 12.5px; letter-spacing: .14em; font-weight: 700;
  color: var(--berry); text-transform: uppercase;
}

/* ── 상단바 ────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter) 10px;
}
.logo { font-family: var(--disp); font-weight: 700; font-size: 19px; }
.logo em { font-style: normal; color: var(--berry); }
.topbar a { font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }

/* ── 버튼 ──────────────────────────────────── */
button { font-family: var(--body); cursor: pointer; border: none; background: none; color: inherit; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 17px 20px; border-radius: var(--r-md);
  background: var(--berry); color: var(--on-accent); font-size: 17px; font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:active { transform: scale(.985); background: var(--berry-deep); }
.btn.ghost { background: transparent; color: var(--berry); border: 1.5px solid var(--berry); }
.btn.quiet { background: var(--paper-deep); color: var(--ink); }
.btn[disabled], .btn.is-disabled {
  background: var(--line); color: var(--ink-soft); pointer-events: none;
}

/* ── 선택 칩 ───────────────────────────────── */
.chip {
  padding: 17px; border-radius: var(--r-md); background: var(--surface);
  border: 1.5px solid var(--line); font-size: 16px; font-weight: 600;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chip.sel { border-color: var(--berry); background: var(--berry-tint); color: var(--berry-deep); }

/* ── 접근성 ────────────────────────────────── */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid var(--berry); outline-offset: 2px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}