/* ═══════════════════════════════════════════════════════════
   운쏠 · 입력 4스텝 화면 전용 CSS  (Phase 5 커밋 4)
   - GET /order/new 전용. 확인 페이지(커밋 6)가 재사용할 수 있다(계약서 §7).
   - 색·형태는 전부 tokens.css 변수 경유 — 하드코딩 색 0건.
   Ref: docs/design/phase5-frontend-contract.md §7
        life-manual-990-mvp.phase5-frontend.workorder.md §3, §4-B
   ═══════════════════════════════════════════════════════════ */

/* 이 파일은 GET /order/new에서만 로드되므로 .lm-container를 풀하이트 flex
   컬럼으로 만들어도 다른 화면에 영향 없다(프로토 .screen.on{display:flex}와 동일 의도,
   base.css의 공용 .lm-container 규칙은 손대지 않는다). */
.lm-container { display: flex; flex-direction: column; }

/* ── 스텝 헤더(뒤로 + 진행바) ──────────────────────────────── */
.stephead {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px 8px;
}
.back {
  font-size: 22px; padding: 6px 10px 6px 0; color: var(--ink-soft);
  text-decoration: none; line-height: 1;
}
.progress {
  flex: 1; height: 5px; background: var(--paper-deep);
  border-radius: 99px; overflow: hidden;
}
.progress i {
  display: block; height: 100%; width: 25%; background: var(--berry);
  border-radius: 99px; transition: width .35s ease;
}

/* ── 스텝 본문 ─────────────────────────────────────────────── */
.stepbody { flex: 1; padding: 26px 24px 10px; }
.q { font-family: var(--disp); font-size: 23px; line-height: 1.45; margin-bottom: 6px; font-weight: 700; }
.help { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 22px; }

.lm-fstep[hidden] { display: none; }

/* ── 선택지(관계·성별) ────────────────────────────────────── */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.relation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
/* .chip / .chip.sel 은 base.css 공용 컴포넌트 재사용 */

/* ── 입력 필드(텍스트·셀렉트) ──────────────────────────────── */
.fieldrow { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.fieldrow.cols-2 { grid-template-columns: 1fr 1fr; }

select, .textfield {
  width: 100%; padding: 15px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface);
  font: inherit; font-size: 16px; color: var(--ink);
}
.textfield { background-image: none; }

/* 셀렉트 화살표 — 계약서 §7 승인안: 인라인 SVG + currentColor
   (data-URI 배경이미지는 색을 토큰화할 수 없어 채택하지 않음) */
.lm-select-wrap { position: relative; }
.lm-select-wrap select {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
}
.lm-select-arrow {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none;
}

/* ── 만세력 라이브 미리보기(시그니처 인터랙션) ────────────────── */
.msl {
  margin: 24px 0 8px; padding: 18px 16px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow);
  opacity: .35; transition: opacity .4s ease;
}
.msl.live { opacity: 1; }
.msl .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 12px;
}
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.pil .lab { font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; }
.gz { display: flex; flex-direction: column; gap: 6px; }
.cell {
  border-radius: var(--r-sm); padding: 10px 0 8px;
  font-family: var(--disp); font-size: 21px; font-weight: 700;
  background: var(--paper-deep); color: var(--ink-soft);
  transition: background .5s ease, color .5s ease, transform .5s ease;
}
.cell small { display: block; font-family: var(--body); font-size: 10px; font-weight: 500; opacity: .85; margin-top: 1px; }
.cell.pop { animation: lm-pop .5s ease; }
@keyframes lm-pop {
  0% { transform: scale(.86); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}
/* 오행 정보 색 — el-{slug}는 클라 JS가 서버 응답을 화이트리스트 검증한 뒤에만 부여 */
.el-wood  { background: var(--wood)  !important; color: var(--on-accent) !important; }
.el-fire  { background: var(--fire)  !important; color: var(--on-accent) !important; }
.el-earth { background: var(--earth) !important; color: var(--on-accent) !important; }
.el-metal { background: var(--metal) !important; color: var(--metal-ink) !important; }
.el-water { background: var(--water) !important; color: var(--on-accent) !important; }
.msl .note { font-size: 12px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.msl .note.is-error { color: var(--berry-deep); }

/* ── 스텝 하단 CTA ─────────────────────────────────────────── */
.stepfoot { padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); }

/* ── 확인 페이지(커밋 6) — order.css 재사용(계약서 §7) ──────── */
.confirm-card {
  margin: 8px 0 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow);
}
.krow { display: flex; justify-content: space-between; padding: 9px 0; font-size: 14.5px; border-bottom: 1px dashed var(--line); }
.krow:last-child { border: none; }
.krow b { font-weight: 600; }
.krow span { color: var(--ink-soft); }
.mini-toc { margin: 6px 0 18px; }
.mini-toc li { list-style: none; display: flex; gap: 10px; font-size: 14px; padding: 8px 0; align-items: baseline; }
.mini-toc .ch { font-family: var(--disp); color: var(--berry); font-size: 12px; min-width: 30px; font-weight: 700; }
.paybar { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 6px; }
.paybar .label { color: var(--ink-soft); font-size: 14px; }
.paybar .total { font-family: var(--disp); font-size: 24px; font-weight: 700; }
.refund { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 12px; }
.lm-order-error {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--berry-tint); color: var(--berry-deep); font-size: 13px;
}