/* 실내 적정습도 계산기 전용 CSS (2026-10-17). 입력(공간·계절 세그, 습도·온도, 바깥 공기)·결과(물방울·판정 눈금·행·알림·할 일)·온도-습도 그림 ih-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(위치·너비 400ms cubic-bezier(.22,1,.36,1), 물 차오름 900ms) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음.
   판정 띠는 밝은 고정색 + 어두운 고정 글자·표식(--ih-t)이라 라이트·다크 모두 대비를 지킴. 360px에서 그림은 줄이지 않고 가로로 넘김(R14). */
.ih-work{container:ih / inline-size;--ih-t:#1f1a14;--ih-water:#4f8fd0;text-spacing-trim:space-all}
.ih-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.ih-set{display:flex;flex-direction:column;gap:12px;padding:16px 18px;min-width:0}
.ih-seg{display:flex;flex-wrap:wrap}
.ih-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 12px}
.ih-unit{flex:0 0 auto;align-self:stretch;margin:0;padding:0 24px 0 10px;border:0;border-left:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:transparent;font-family:var(--sans);font-size:13px;font-weight:650;color:var(--muted);cursor:pointer}
.ih-unit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ih-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ih-help:empty{display:none}
.ih-out{display:flex;flex-direction:column;gap:10px;padding:12px 0 0;border-top:1px dashed var(--soft)}
.ih-out-h{margin:0;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.ih-btns{display:flex;flex-wrap:wrap;gap:6px}
.ih-head{display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.ih-hero{display:flex;align-items:center;gap:14px}
.ih-drop{flex:0 0 auto;width:54px;height:72px;overflow:visible}
.ih-drop-bg{fill:var(--soft);opacity:.55}
.ih-liq{transition:transform 900ms cubic-bezier(.3,.7,.3,1)}
.ih-wave{fill:var(--ih-water);opacity:.85;animation:ihWave 3.2s linear infinite}
@keyframes ihWave{from{transform:translateX(0)}to{transform:translateX(30px)}}
.ih-drop-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ih-hero-t{min-width:0}
.ih-big{font-size:46px}
.ih-big small{font-family:var(--sans);font-size:22px}
.ih-zone{display:inline-block;margin:6px 0 0;padding:2px 8px;border-radius:var(--radius);font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ih-t)}
.ih-zone:empty{display:none}
.ih-head .v2-sub{margin:0}
.ih-rows li{flex-wrap:wrap}
.ih-rows li b{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere} /* 설명이 붙는 값은 줄바꿈(공용 nowrap 덮음) */
.ih-alert{margin:0;padding:10px 12px;border-left:3px solid var(--ih-water);background:var(--paper);font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink)}
.ih-alert[hidden],.ih-todo[hidden]{display:none}
.ih-todo>.v2-label{display:block;margin-bottom:6px}
.ih-todo ul{margin:0;padding-left:18px;font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink)}
.ih-todo li+li{margin-top:4px}
.ih-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
/* 판정 띠 색(고정) */
.z-dry{background:#f3dba0}
.z-ok{background:#bfe3c9}
.z-high{background:#d3e4f3}
.z-humid{background:#a9c9ea}
/* 판정 눈금: 띠 위에 지금(찬 점)·환기 뒤(빈 점)와 둘을 잇는 선, 가습 상한 점선 */
.ih-gauge{position:relative;padding:30px 8px 0}
.ih-bar{position:relative;height:14px;border-radius:var(--radius);background:var(--wash)}
.ih-zs{position:absolute;top:0;bottom:0}
.ih-bar .ih-zs:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.ih-bar .ih-zs:nth-last-child(5){border-radius:0 var(--radius) var(--radius) 0}
.ih-hum{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ih-t);text-decoration:none}
.ih-hum[hidden]{display:none}
.ih-hum span{position:absolute;top:100%;left:4px;margin-top:4px;white-space:nowrap;font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted)}
.ih-link{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--ih-t);transition:left .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1)}
.ih-m{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;font-style:normal;transition:left .4s cubic-bezier(.22,1,.36,1)}
.ih-m-n{background:var(--ih-t);box-shadow:0 0 0 2px #fff}
.ih-m-v{background:#fff;border:2.5px solid var(--ih-t);box-sizing:border-box} /* 띠가 고정 밝은 색이라 표식도 고정색(다크 모드 대비) */
.ih-m span{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--sans);font-size:11.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.ih-m-v span{bottom:auto;top:20px}
.ih-m.is-l span{left:0;transform:none}
.ih-m.is-r span{left:auto;right:0;transform:none}
.ih-m[hidden],.ih-link[hidden]{display:none}
.ih-gauge.is-empty .ih-m,.ih-gauge.is-empty .ih-link{display:none}
.ih-ticks{position:relative;height:30px;margin-top:22px}
.ih-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}
.ih-ticks span:first-child{transform:none}
.ih-ticks span:last-child{transform:translateX(-100%)}
/* 온도-습도 그림 */
.ih-box{padding:14px 18px 16px;min-width:0}
.ih-box-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.ih-hint,.ih-swipe{font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.ih-swipe{display:none}
.ih-chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ih-chart{display:block;width:100%;min-width:560px;height:auto;font-family:var(--sans)}
.ih-c-grid{stroke:var(--soft);stroke-width:1}
.ih-c-tick{stroke:var(--line);stroke-width:1}
.ih-c-ax{font-size:11px;fill:var(--muted);font-variant-numeric:tabular-nums}
.ih-c-band{fill:#3f9b6e;opacity:.13}
.ih-c-box{fill:#3f9b6e;opacity:.16}
.ih-c-band-l{font-size:11px;font-weight:650;fill:var(--muted)}
.ih-c-now{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}
.ih-c-now.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:ihDraw 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes ihDraw{to{stroke-dashoffset:0}}
.ih-c-out{fill:none;stroke:var(--ih-water);stroke-width:2;stroke-dasharray:5 4}
.ih-c-op{fill:var(--paper);stroke:var(--ih-water);stroke-width:2.2}
.ih-c-vp{fill:var(--paper);stroke:var(--ih-water);stroke-width:2.5}
.ih-c-np{fill:var(--accent);stroke:var(--paper);stroke-width:2}
.ih-c-dew path{fill:var(--ih-water)}
.ih-c-dew text{font-size:11px;font-weight:650;fill:var(--ink)}
.ih-c-probe line{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.ih-c-probe circle{fill:none;stroke:var(--ink);stroke-width:2}
.ih-c-probe text{font-size:12px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;font-variant-numeric:tabular-nums}
.ih-slide{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:6px 12px;margin-top:8px}
.ih-slide input{width:100%;min-width:0;accent-color:var(--fill)}
.ih-probe-v{min-width:4.5em;text-align:right;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.ih-probe-sum{margin:8px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.55;color:var(--ink)}
.ih-probe-sum:empty{display:none}
.ih-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--sans);font-size:12px;color:var(--ink)}
.ih-legend li{display:flex;align-items:center;gap:6px}
.ih-legend li[hidden]{display:none}
.ih-legend i{flex:0 0 auto;display:inline-block}
.ih-legend .k-now{width:16px;height:0;border-top:2.5px solid var(--ink)}
.ih-legend .k-out{width:16px;height:0;border-top:2px dashed var(--ih-water)}
.ih-legend .k-band{width:12px;height:12px;border-radius:2px;background:color-mix(in srgb,#3f9b6e 22%,transparent)}
.ih-legend .k-dew{width:9px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--ih-water)}
.ih-box>.ih-help{margin-top:8px}
.ih-tbl{margin-top:10px}
.ih-tbl summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.ih-tbl .tbl{margin-top:8px}
@container ih (max-width:779px){
  .ih-top{grid-template-columns:minmax(0,1fr)}
  .ih-head{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@container ih (max-width:599px){ .ih-swipe{display:block} } /* 그림 최소 폭 560px + 여백보다 좁을 때만 */
@container ih (max-width:520px){
  .ih-big{font-size:40px}
  .ih-slide{grid-template-columns:minmax(0,1fr) max-content}
  .ih-slide .v2-label{grid-column:1/-1}
}
@container ih (max-width:340px){
  .ih-row{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ .ih-liq,.ih-m,.ih-link{transition:none} .ih-wave{animation:none} .ih-c-now.draw{animation:none;stroke-dashoffset:0} }