/* 열지수 계산기 전용 CSS (2026-10-21). 결과 카드·입력·내역 | 온도 × 습도 지도, 기준별 눈금 hix-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(위치·너비 400ms cubic-bezier(.22,1,.36,1)) — 테마 --ease는 120ms 지연을 품고 있어 위치 이동에는 쓰지 않음.
   단계 색은 밝은 고정색(b0~b4)에 어두운 고정 글자 → 라이트·다크 모두 대비 유지, 가장 진한 b4만 흰 글자 */
.hix-work{container:hix / inline-size;--hix-k:#1f1a14}
.hix-top{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--soft)}
.hix-side{display:flex;flex-direction:column;min-width:0}
.hix-res{padding:16px 18px 14px}
.hix-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:0 12px}
.hix-tile{min-width:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;justify-items:start} /* 라벨·값·차이·단계 줄을 카드끼리 맞춤(라벨이 두 줄이어도 숫자 높이 같음) */
.hix-tile>.v2-label{display:block;margin-bottom:6px;align-self:end}
.hix-v{margin:0;font-family:var(--sans);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.hix-tiles>.hix-tile:only-child .hix-v{font-size:44px}
.hix-v.is-empty{font-size:22px;color:var(--muted);opacity:.6;font-weight:600}
.hix-d{margin:5px 0 7px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.hix-chip{display:inline-block;padding:3px 9px;border-radius:var(--radius);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--hix-k);box-shadow:inset 0 0 0 1px rgba(31,26,20,.14)}
.hix-chip.b4{color:#fff}
.hix-sub{margin:12px 0 0}
.hix-in{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-top:1px solid var(--soft)}
.hix-in .v2-status:empty{display:none}
.hix-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.hix-unit{flex:0 0 auto;align-self:stretch;max-width:9.5em;field-sizing:content;margin:0;padding:0 20px 0 7px;border:0;border-left:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;text-overflow:ellipsis}
.hix-unit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hix-sun{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.hix-ex,.hix-btns{display:flex;flex-wrap:wrap;gap:6px}
.hix-chipb{height:30px;padding:0 10px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;cursor:pointer}
.hix-chipb:hover{background:var(--btn)}
.hix-chipb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hix-rows{padding:0 18px 12px}
.hix-rows li{flex-wrap:wrap}
.hix-rows li b{margin-left:auto;text-align:right;white-space:normal;overflow-wrap:anywhere} /* 특보·작업장 설명 문장은 줄바꿈(공용 nowrap 덮음) */
.hix-rows li.is-long{display:block}
.hix-rows li.is-long b{display:block;margin-top:3px;text-align:left;font-weight:650}
@container v2in (max-width:309px){ .hix-form{grid-template-columns:minmax(0,1fr)} }
/* 지도 */
.hix-mapbox{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px;border-top:1px solid var(--soft)}
.hix-maphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;margin-bottom:8px}
.hix-map{position:relative;flex:1 1 auto;min-height:220px;aspect-ratio:4 / 3.2;touch-action:manipulation;cursor:crosshair;user-select:none;-webkit-user-select:none}
.hix-map svg{position:absolute;inset:0;display:block;overflow:visible}
.hix-map .b0,.hix-keys .b0,.hix-lad .b0,.hix-chip.b0{fill:#e9ece6;background:#e9ece6}
.hix-map .b1,.hix-keys .b1,.hix-lad .b1,.hix-chip.b1{fill:#f5dd8f;background:#f5dd8f}
.hix-map .b2,.hix-keys .b2,.hix-lad .b2,.hix-chip.b2{fill:#efae62;background:#efae62}
.hix-map .b3,.hix-keys .b3,.hix-lad .b3,.hix-chip.b3{fill:#e0764a;background:#e0764a}
.hix-map .b4,.hix-keys .b4,.hix-lad .b4,.hix-chip.b4{fill:#b13b2a;background:#b13b2a}
.hix-map .gr{stroke:rgba(31,26,20,.13);stroke-width:1}
.hix-map .ax{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.hix-map .iso{fill:none;stroke:rgba(31,26,20,.55);stroke-width:1.2}
.hix-map .iso-al{stroke:var(--hix-k);stroke-dasharray:4 3;stroke-width:1.5}
.hix-map .iso-t{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--hix-k);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:2.5px}
.hix-map .cx,.hix-map .cy{stroke:var(--hix-k);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
.hix-map .pt circle{fill:var(--hix-k);stroke:#fff;stroke-width:2.5}
.hix-map .pt.is-out circle{fill:#fff;stroke:var(--hix-k)}
.hix-map .pt text{font-family:var(--sans);font-size:12.5px;font-weight:800;fill:var(--hix-k);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.hix-map.is-empty .mk{display:none}
.hix-keys{display:flex;flex-wrap:wrap;gap:4px 12px;list-style:none;margin:8px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.hix-keys li{display:inline-flex;align-items:center;gap:5px}
.hix-keys i{display:inline-block;width:11px;height:11px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(31,26,20,.18)}
.hix-keys i.k-al{height:0;width:14px;border-top:2px dashed var(--ink);border-radius:0;box-shadow:none}
.hix-help{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.hix-help:empty{display:none}
@container hix (max-width:699px){
  .hix-side{display:contents} /* 좁으면 결과 → 입력 → 지도 → 내역(내역에는 포커스 요소가 없어 Tab 순서는 그대로) */
  .hix-res{order:1}.hix-in{order:2}.hix-mapbox{order:3}
  .hix-rows{order:4;padding-top:2px;border-top:1px solid var(--soft)}
  .hix-rows li:first-child{border-top:0}
}
@container hix (min-width:700px){
  .hix-top{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
  .hix-mapbox{border-top:0;border-left:1px solid var(--soft)}
  .hix-map{aspect-ratio:auto}
}
/* 기준별 눈금 */
.hix-box{padding:14px 18px 16px;min-width:0}
.hix-box>.v2-label{display:block}
.hix-lad{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:14px;margin-top:4px}
.hix-lane,.hix-axis{display:contents}
.hix-ln{align-self:end;padding-bottom:6px;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink)}
.hix-strip{position:relative;height:14px;margin:26px 8px 6px;border-radius:var(--radius);background:var(--wash)}
.hix-seg{position:absolute;top:0;bottom:0}
.hix-seg:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.hix-air,.hix-pin{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;box-sizing:border-box;font-style:normal;transition:left .4s cubic-bezier(.22,1,.36,1)}
.hix-air{background:#fff;border:2.5px solid var(--hix-k)}
.hix-pin{background:var(--hix-k);box-shadow:0 0 0 2px #fff}
.hix-pin span{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--sans);font-size:12px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
.hix-pin.is-l span{left:-2px;transform:none}
.hix-pin.is-r span{left:auto;right:-2px;transform:none}
.hix-arw{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--hix-k);transition:left .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1)}
.hix-sunx{position:absolute;top:2px;bottom:2px;background:repeating-linear-gradient(135deg,rgba(31,26,20,.5) 0 2px,transparent 2px 5px);border-radius:0 var(--radius) var(--radius) 0;transition:left .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1)}
.hix-rng{position:absolute;top:-4px;bottom:-4px;border:2px solid var(--hix-k);border-radius:4px;background:rgba(255,255,255,.35);transition:left .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1)}
.hix-al{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--hix-k)}
.hix-lad.is-empty .hix-air,.hix-lad.is-empty .hix-pin,.hix-lad.is-empty .hix-arw,.hix-lad.is-empty .hix-sunx,.hix-lad.is-empty .hix-rng{display:none}
.hix-ticks{position:relative;height:18px;margin:2px 8px 0}
.hix-ticks span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hix-ticks span:first-child{transform:none}
.hix-ticks span:last-child{transform:translateX(-100%)}
.hix-lkeys i.k-air{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--hix-k)}
.hix-lkeys i.k-val{width:10px;height:10px;border-radius:50%;background:var(--hix-k);box-shadow:0 0 0 1.5px #fff}
.hix-lkeys i.k-sun{width:16px;background:repeating-linear-gradient(135deg,rgba(31,26,20,.55) 0 2px,#f5dd8f 2px 5px)}
.hix-lkeys i.k-rng{width:16px;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px var(--hix-k)}
@container hix (max-width:479px){
  .hix-lad{grid-template-columns:minmax(0,1fr)}
  .hix-ln{align-self:start;padding:10px 0 0}
  .hix-strip{margin-top:22px}
  .hix-axis .hix-ln{display:none}
}
@media (prefers-reduced-motion:reduce){ .hix-air,.hix-pin,.hix-arw,.hix-sunx,.hix-rng{transition:none} }
/* 본문 표: 단계 색(작업면과 같은 고정색, 다크에서도 어두운 글자) */
.hix-ct td,.hix-ct thead th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.hix-ct td.b1,.hix-ct td.b2,.hix-ct td.b3{background:#f5dd8f;color:#1f1a14}
.hix-ct td.b2{background:#efae62}
.hix-ct td.b3{background:#e0764a}
.hix-ct td.b4{background:#b13b2a;color:#fff}