/* 여관 화면(결정 AW 2026-09-28, screens_inn.js 전용). 색은 app.css 토큰만 쓴다(다크·라이트 AQ 모두 같은 규칙, --phos 사용 없음).
   AW7(사용자 "너무 난잡… 글씨크기 통일, HP와 HP 건강도 1묶음, MP와 MP 건강도 한묶음, 회복필요는 회색으로 배경칸 없이"):
   - 본문 글자 크기는 하나(--fs-md). 강조는 굵기와 색만. 상태 글('회복 필요 +n'·'가득')은 회색 글자, 칩·배경칸 없음.
   - 카드 2장: HP 묶음(HP + HP 건강도) · MP 묶음(MP + MP 건강도). 760px 이상 가로 2칸, 좁으면 세로.
   글자 대비(WCAG AA 4.5:1 이상): 글자는 --fg-2/--fg/--muted, 카드 색(--hp/--mp)은 막대·묶음 이름에만 쓴다.
   결정 CN·CQ·CR(갈래 C, 2026-09-30): 묶음 칸 = 안쪽 칸(외곽선 + 모서리 8, 바탕 없음), 옛 색 윗줄·점선·마디 막대(10% 눈금·계단 움직임) 없음 —
   막대는 공용 막대와 같은 가는 둥근 줄(트랙·채움만 색), 회복될 분은 같은 색 옅게. */
.tw-inn { display: grid; gap: var(--sp-4); min-width: 0; word-break: keep-all; overflow-wrap: anywhere;
  --inn-ok: color-mix(in srgb, var(--ok) 72%, var(--fg-2)); --inn-bad: color-mix(in srgb, var(--bad) 80%, var(--fg-2)); }
.tw-inn__welcome { color: var(--fg); }
.tw-inn__since { color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-inn__since b, .tw-inn__since time { color: var(--fg-2); font-weight: 700; }

/* 본문: 글자 크기 하나 */
.tw-inn__body, .tw-inn__body * { font-size: var(--fs-body); }
.tw-inn__meters { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
@media (min-width: 760px) { .tw-inn__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* 묶음 칸: HP(빨강)·MP(파랑)는 막대 색과 묶음 첫 줄 이름 색으로 구분(색 띠 없음) */
.tw-inn-m { --c: var(--fg); display: grid; gap: var(--sp-2); min-width: 0; background: transparent;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.tw-inn-m.is-hp { --c: var(--hp); }
.tw-inn-m.is-mp { --c: var(--mp); }

/* 줄: 이름 · 값 · 퍼센트 / 막대 / 회색 상태 글 */
.tw-inn-row { display: grid; gap: var(--sp-1); min-width: 0; }
.tw-inn-row + .tw-inn-row, [data-inn-health] { padding-top: var(--sp-1); }   /* 줄 사이 가로 줄 없음(CQ10) — 간격으로만. 묶음 색(HP 빨강·MP 파랑)은 막대에만(라이트 글자 대비 4.5:1) */
.tw-inn-row__top { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; font-variant-numeric: tabular-nums; }
.tw-inn-row__label { font-weight: 700; color: var(--fg-2); white-space: nowrap; min-width: 6.5em; }
.tw-inn-row__val { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); min-width: 0; color: var(--fg-2); }
.tw-inn-row__val b { font-weight: 700; }
.tw-inn-row__to { color: var(--muted); white-space: nowrap; }
.tw-inn-row__to [data-inn-after] { color: var(--inn-ok); font-weight: 700; }
.tw-inn-row__to.is-none { display: none; }   /* 가득: '600 → 600'처럼 같은 숫자를 되풀이하지 않는다 */
.tw-inn-row__plus { color: var(--inn-ok); font-weight: 700; white-space: nowrap; }
.tw-inn-row__plus.is-zero { color: var(--muted); font-weight: 400; }
.tw-inn-row__pct { margin-left: auto; color: var(--muted); white-space: nowrap; }
.tw-inn-row__note { color: var(--muted); }

/* 막대: 현재분(진한 색) + 회복될 분(옅은 줄무늬) + 10% 눈금. 폭은 --now/--gain(JS가 CSSOM으로 넣음) */
.tw-inn-bar { --now: 0%; --gain: 0%; position: relative; height: 6px; overflow: hidden; background: var(--track); border-radius: 999px; }
.tw-inn-bar > span { position: absolute; top: 0; bottom: 0; }
.tw-inn-bar__now { left: 0; width: var(--now); background: var(--c); }
.tw-inn-bar__gain { left: var(--now); width: var(--gain); background: color-mix(in srgb, var(--c) 38%, transparent); }   /* 회복될 분 = 같은 색 옅게(옛 줄무늬 없음) */
.tw-inn-bar.is-hp-health, .tw-inn-bar.is-mp-health { height: 4px; opacity: .8; }   /* 건강도 막대는 얇게(같은 묶음 색) */
.tw-inn-bar.is-filling .tw-inn-bar__now { transition: width .6s ease-out; }
.tw-inn-bar.is-filling .tw-inn-bar__gain { transition: left .6s ease-out, width .6s ease-out; }

.tw-inn__deploy { color: var(--muted); }
.tw-inn__deploy:empty { display: none; }

/* 행동: 미리보기 한 줄 → [휴식하기] → 이유/결과(모두 같은 글자 크기, 결과는 배경칸 없이) */
.tw-inn__act { display: grid; gap: var(--sp-2); margin-top: var(--sp-1); }
.tw-inn__preview { text-align: center; color: var(--fg); font-variant-numeric: tabular-nums; }
.tw-inn__act .tw-btn.is-primary { min-height: 48px; font-weight: 700; }   /* 결정 CL4 새 버튼 = 공용 주 버튼(인디고 채움) */
.tw-inn__why { text-align: center; }
.tw-inn__result { text-align: center; font-weight: 700; color: var(--inn-ok); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .tw-inn-bar.is-filling > span { transition: none; } }