/* 이슬점 계산기 전용 CSS (2026-10-21). 머리(구할 값·단위) → 결과 | 여름 체감 → 입력 → 포화 곡선 → 습도 칸 → 세부 카드 dpt-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(위치·높이 400ms cubic-bezier(.22,1,.36,1)) — 테마 --ease는 120ms 지연을 품고 있어 위치 이동에는 쓰지 않음.
   여름 체감 띠는 밝은 고정색(라이트·다크 공통, 글자는 띠 밖에), 물은 옅은 푸른색을 바탕과 섞음. accent는 물방울(냉각 화살표·이슬점 글자·맺힘 판정) 한 가지 뜻에만 */
.dpt-work{container:dpt / inline-size;--dpt-c0:#cfe2d2;--dpt-c1:#f1d48e;--dpt-c2:#e79a6a;--dpt-water:color-mix(in srgb, #5f9fc4 50%, var(--paper))}
.dpt-head{align-items:center}
.dpt-md{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
/* 결과 | 여름 체감 */
.dpt-res{display:grid;grid-template-columns:minmax(0,1fr);gap:14px 26px;padding:16px 18px}
.dpt-main{min-width:0}
.dpt-main>.v2-label{display:block;margin-bottom:6px}
.dpt-main .v2-sub .alt{margin-top:4px;font-size:12.5px;line-height:1.55}
.dpt-cf{min-width:0;display:flex;flex-direction:column;gap:6px}
.dpt-cfv{font-family:var(--sans);font-size:15px;font-weight:750;line-height:1.35;color:var(--ink)}
.dpt-cfbar{display:flex;flex-direction:column;gap:4px;padding-top:4px}
.dpt-cfs{position:relative;display:flex;height:12px}
.dpt-cfs i{display:block;height:100%}
.dpt-cfs i.c0,.dpt-cfk i.c0{background:var(--dpt-c0)}
.dpt-cfs i.c1,.dpt-cfk i.c1{background:var(--dpt-c1)}
.dpt-cfs i.c2,.dpt-cfk i.c2{background:var(--dpt-c2)}
.dpt-cfs i:first-of-type{border-radius:var(--radius) 0 0 var(--radius)}
.dpt-cfs i:last-of-type{border-radius:0 var(--radius) var(--radius) 0}
.dpt-cfm{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;box-sizing:border-box;background:var(--accent);border:3px solid var(--card);box-shadow:0 0 0 1px var(--accent);transition:left .4s cubic-bezier(.22,1,.36,1)}
.dpt-cfm.is-out{background:var(--card)}
.dpt-cft{position:relative;height:15px;font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dpt-cft span{position:absolute;top:0;white-space:nowrap}
.dpt-cft span:first-child{transform:translateX(calc(-100% - 4px))} /* 끈적 구간이 좁아 두 경계 숫자를 양옆으로 벌림 */
.dpt-cft span:last-child{transform:translateX(4px)}
.dpt-cfk{display:flex;flex-wrap:wrap;gap:3px 12px;list-style:none;margin:2px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.dpt-cfk li{display:inline-flex;align-items:center;gap:5px}
.dpt-cfk i{display:inline-block;width:11px;height:11px;border-radius:2px}
@container dpt (min-width:620px){ .dpt-res{grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr);align-items:center} }
/* 입력 */
.dpt-in{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-top:1px solid var(--soft)}
.dpt-in .v2-status:empty{display:none}
.dpt-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.dpt-form .v2-f[hidden]{display:none}
@container v2in (max-width:479px){ .dpt-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .dpt-form .v2-f[data-k="ts"]{grid-column:1 / -1} }
.dpt-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.dpt-help:empty{display:none}
.dpt-ex,.dpt-btns{display:flex;flex-wrap:wrap;gap:6px}
.dpt-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}
.dpt-chipb:hover{background:var(--btn)}
.dpt-chipb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* 포화 곡선 */
.dpt-box{min-width:0;padding:14px 18px;border-top:1px solid var(--soft)}
.dpt-box>.v2-label{display:block;margin-bottom:8px}
.dpt-box[hidden]{display:none}
.dpt-chart{position:relative;min-height:236px;touch-action:manipulation;cursor:crosshair;user-select:none;-webkit-user-select:none}
.dpt-chart svg{display:block;overflow:visible}
.dpt-chart .gr{stroke:var(--soft);stroke-width:1}
.dpt-chart .ax{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.dpt-chart .ax-n{font-weight:650}
.dpt-chart .rh{fill:none;stroke:var(--line);stroke-width:1}
.dpt-chart .rhl{font-family:var(--sans);font-size:10px;font-weight:650;fill:var(--muted);font-variant-numeric:tabular-nums}
.dpt-chart .rhl-s{fill:var(--ink)}
.dpt-chart .sat{fill:none;stroke:var(--ink);stroke-width:2.2}
.dpt-chart .ice{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-dasharray:5 3;opacity:.7}
.dpt-chart .cf.c0{fill:var(--dpt-c0)}
.dpt-chart .cf.c1{fill:var(--dpt-c1)}
.dpt-chart .cf.c2{fill:var(--dpt-c2)}
.dpt-chart .wet{fill:var(--accent-wash)}
.dpt-chart .wl{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--accent)}
.dpt-chart .sf{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3}
.dpt-chart .sf.is-wet{stroke:var(--accent)}
.dpt-chart .sl,.dpt-chart .dl,.dpt-chart .pl{font-family:var(--sans);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round}
.dpt-chart .sl{font-size:11px;font-weight:700;fill:var(--ink)}
.dpt-chart .dl{font-size:12px;font-weight:800;fill:var(--accent)}
.dpt-chart .pl{font-size:12px;font-weight:750;fill:var(--ink)}
.dpt-chart .drop{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:2 3}
.dpt-chart .cool{stroke:var(--accent);stroke-width:2}
.dpt-chart .arr{fill:var(--accent)}
.dpt-chart .gl path{fill:var(--accent);stroke:var(--card);stroke-width:1.5}
.dpt-chart .gl.ic path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
.dpt-chart .gl.pop{animation:dptPop .4s cubic-bezier(.22,1,.36,1)}
@keyframes dptPop{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}
.dpt-chart .dw{fill:var(--card);stroke:var(--accent);stroke-width:1.5}
.dpt-chart .pt circle{fill:var(--ink);stroke:var(--card);stroke-width:2.5}
.dpt-keys{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:8px 0 0;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.dpt-keys li{display:inline-flex;align-items:center;gap:6px}
.dpt-keys i{display:inline-block;width:14px;height:0;border-top:2px solid var(--ink)}
.dpt-keys i.k-rh{border-top:1px solid var(--line)}
.dpt-keys i.k-ice{border-top:1.5px dashed var(--ink);opacity:.75}
.dpt-keys i.k-wet{width:11px;height:11px;border:1px solid var(--accent);background:var(--accent-wash);border-radius:2px}
.dpt-keys i.k-cf{width:14px;height:6px;border:0;background:linear-gradient(90deg,var(--dpt-c0) 0 33%,var(--dpt-c1) 33% 66%,var(--dpt-c2) 66%)}
/* 식으면 차오르는 습도 칸: 물 높이 = 상대습도 */
.dpt-tanks{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.dpt-tk{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.dpt-tkt{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.dpt-tank{position:relative;width:100%;max-width:96px;height:78px;box-sizing:border-box;border:1px solid var(--line);border-top:1px dashed var(--soft);border-radius:0 0 7px 7px;background:var(--paper);overflow:hidden}
.dpt-tank i{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--dpt-water);transition:height .45s cubic-bezier(.22,1,.36,1)}
.dpt-tank b{position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--sans);font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.dpt-tk.is-dew .dpt-tank{border-color:var(--accent)}
.dpt-tk.is-dew .dpt-tkt{color:var(--accent)}
.dpt-tk.is-more .dpt-tank{border-style:solid;border-color:var(--accent);background:var(--accent-wash)}
.dpt-tk.is-more .dpt-tank i{height:0 !important}
.dpt-tk.is-more .dpt-tank b{top:50%;bottom:auto;transform:translateY(-50%);color:var(--accent)}
.dpt-tkn{font-family:var(--sans);font-size:11.5px;line-height:1.3;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.dpt-tkn:empty{display:none}
/* 세부 카드: 마지막 줄은 늘어나 칸을 채움(빈 칸 없음), 1px 틈 = 구분선 */
.dpt-cards{display:flex;flex-wrap:wrap;gap:1px;list-style:none;margin:0;padding:0;border-top:1px solid var(--soft);background:var(--soft)}
.dpt-card{flex:1 1 calc((100% - (var(--dpt-cols, 3) - 1) * 1px) / var(--dpt-cols, 3));min-width:0;display:flex;flex-direction:column;gap:3px;padding:11px 18px 12px;background:var(--card)}
.dpt-card[hidden]{display:none}
.dpt-card b{font-family:var(--sans);font-size:17px;font-weight:800;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.dpt-card small{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.dpt-card.is-wet b{color:var(--accent)}
@container dpt (max-width:419px){ .dpt-res,.dpt-in,.dpt-box{padding-left:14px;padding-right:14px} .dpt-card{padding:10px 14px 11px} .dpt-tanks{gap:5px} }
@media (prefers-reduced-motion: reduce){ .dpt-tank i,.dpt-cfm{transition:none} .dpt-chart .gl.pop{animation:none} }