/**
 * /haebang/ko 화면 — **층 3**(이 계산기에만 있는 것).
 *
 * 보스 선택 행, 손실 블록, 주 단위 달력, 단계표, 근거 접힘 블록.
 * 셸·카드·폼·버튼·색은 층 1(골격 값) → site.css(층 2)가 갖는다 — 2026-09-18 전면 적용 전에는
 * 이 파일이 한 줄에 여러 규칙을 이어 붙인 목업 이식본이었고 px 리터럴로 간격을 말했다.
 * 지금은 세로 간격 4단·글자 6단·모서리 1종 토큰만 쓴다.
 */

.boss-summary { margin-top: var(--gap-block); padding: var(--s3); background: var(--m-input); border-radius: var(--r1); }
.boss-summary strong { color: var(--m-info); font-weight: 500; }
.boss-summary p { font-size: var(--t2); line-height: var(--gap-line); }

.boss-picker { margin-top: var(--gap-block); border: 1px solid var(--m-control); border-radius: var(--r1); }
.boss-picker summary { padding: var(--s3); font-size: var(--t2); line-height: var(--gap-line); }
.boss-picker summary::marker { color: var(--ink-2); }

.boss-row { padding: var(--s4) var(--s3); border-top: 1px solid var(--line); }
.boss-row:has(input[type=checkbox]:checked) { background: var(--m-input); }
.boss-select { display: flex; align-items: center; gap: var(--gap-item); min-height: var(--touch);
  font-size: var(--t2); line-height: var(--gap-line); font-weight: 500; }
.boss-select input { width: 20px; height: 20px; margin: 0; accent-color: var(--m-info); flex-shrink: 0; }
.boss-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); margin-top: var(--gap-item); }
.boss-fields label { display: block; color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.boss-fields .control { margin-top: var(--gap-item); }
/* 범위 밖 값이 들어온 칸 — 층 2 의 `.m-field[data-invalid]` 와 같은 규격(붉은 2px)이다.
   이 행은 `.m-field` 로 감싸지 않아 여기서 같은 모양을 준다. 문장은 아래 계산 상태 줄이 든다. */
.boss-fields input[aria-invalid="true"] { border: 2px solid var(--bad); }
.allocation { margin-top: var(--gap-item); font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.allocation b { color: var(--ink); font-weight: 500; }
.monthly { padding: 0; margin-top: var(--gap-item); border: 0; }

.unit-wrap { position: relative; }
.unit-wrap input { padding-right: var(--s6); }
.unit-wrap span { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }

.divider { margin-top: var(--gap-section); padding-top: var(--s5); border-top: 1px solid var(--line); }
.subhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-item); }
.subhead small { color: var(--ink-2); }

.jump { display: inline-flex; align-items: center; min-height: var(--touch); font-size: var(--t2); line-height: var(--gap-line); }

/* ── 결과 ─────────────────────────────────────────────────────────────── */
.result { border-top: 3px solid var(--m-info); box-shadow: var(--shadow-2); }
.result-label { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); }
.final-date { display: block; font-size: var(--t6); line-height: var(--t6-lh); font-weight: 700;
  letter-spacing: -.02em; margin-top: var(--gap-item); }
.duration { margin-top: var(--gap-item); color: var(--ink-2); }
.duration strong { color: var(--ink); }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-block); margin-top: var(--gap-section); }
.metric { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1); }
.metric dt { color: var(--ink-2); font-size: var(--t2); line-height: var(--gap-line); }
.metric dd { margin-top: var(--gap-item); font-size: var(--t5); line-height: var(--t5-lh); font-weight: 700; }
.metric small { font-weight: 400; color: var(--ink-2); }

.loss { margin-top: var(--gap-block); padding: var(--s4); border-left: 3px solid var(--bad);
  background: var(--m-input); border-radius: var(--r1); }
.loss strong, .drop { color: var(--bad); }
.loss p { font-size: var(--t2); line-height: var(--gap-line); }
.loss p + p { margin-top: var(--gap-item); }
.loss-total { display: flex; justify-content: space-between; gap: var(--gap-item); flex-wrap: wrap; }
.loss-total strong { font-size: var(--t3); line-height: var(--gap-line); }

.compare { margin-top: var(--gap-block); padding-top: var(--s4); border-top: 1px solid var(--line);
  font-size: var(--t2); line-height: var(--gap-line); }
.compare strong { color: var(--good); }

/* ── 주 단위 달력 ─────────────────────────────────────────────────────── */
.legend { display: flex; gap: var(--gap-block); flex-wrap: wrap; margin-top: var(--gap-block);
  font-size: var(--t1); line-height: var(--gap-line); color: var(--ink-2); }
.monthly-label { color: var(--m-info); }
.complete { color: var(--accent); }
.calendar { margin-top: var(--gap-block); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-block); list-style: none; padding: 0; }
.week { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--m-input); min-width: 0; }
.week.loss-week { border-left: 3px solid var(--bad); }
.week.final-week { border-color: var(--accent); }
.week-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-item);
  font-size: var(--t2); line-height: var(--gap-line); }
.week-head time { color: var(--ink-2); }
.week-state { margin-top: var(--gap-item); font-weight: 500; }
.week-detail { font-size: var(--t2); line-height: var(--gap-line); color: var(--ink-2); margin-top: var(--gap-item); }
.week-detail span { display: block; }
.week-foot { display: flex; justify-content: space-between; gap: var(--gap-item); margin-top: var(--gap-block);
  padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--t2); line-height: var(--gap-line); }
.week-foot span { color: var(--ink-2); }

/* ── 단계표 ───────────────────────────────────────────────────────────── */
.stages { width: 100%; border-collapse: collapse; margin-top: var(--gap-block);
  font-size: var(--t2); line-height: var(--gap-line); }
.stages th, .stages td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); text-align: right; }
.stages th:first-child, .stages td:first-child { text-align: left; padding-left: 0; }
.stages th:last-child, .stages td:last-child { padding-right: 0; }
.stages thead th { font-weight: 500; color: var(--ink-2); }
.stages tbody th { font-weight: 500; }
.stages .past { color: var(--ink-2); }
.stages .now th { color: var(--accent); }
.stages small { display: block; color: var(--ink-2); font-size: var(--t1); line-height: var(--gap-line); }

/* ── 근거(문서 절 — 과업 블록 밖·하단·접힘) ──────────────────────────────── */
.basis { margin-top: var(--gap-section); border: 1px solid var(--line); border-radius: var(--r1); background: var(--surface); }
.basis summary { font-size: var(--t3); line-height: var(--gap-line); padding: var(--s3) var(--s4); }
.basis-body { padding: 0 var(--s4) var(--s4); max-width: 80ch; font-size: var(--t2); line-height: var(--gap-line); }
.basis-body p + p { margin-top: var(--gap-block); }

@media (max-width: 560px) {
  .metrics, .calendar { grid-template-columns: minmax(0, 1fr); }
}