/* 에어컨 적정온도·제습 계산기 전용 CSS (2026-10-17). 입력 2 × 2·결과·쾌적 지도·무엇을 낮출까 막대·설정 온도별 막대 ac-*. 공용 부품은 assets/v2.css.
   움직임은 transitions.dev 기준(폭·높이 400ms cubic-bezier(.22,1,.36,1), 지도 점은 tool.js가 380ms ease-out으로 옮김) — 테마 --ease는 120ms 지연을 품고 있어 쓰지 않음.
   지도 구역 색은 반투명이라 라이트·다크 바탕 모두에서 같은 뜻으로 보임 */
.ac-work{container:ac / inline-size}
.ac-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.ac-in{display:flex;flex-direction:column;gap:14px;padding:16px 18px;min-width:0}
.ac-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 12px;margin:0}
.ac-fields .v2-label em{font-style:normal;font-weight:500;color:var(--muted)}
.ac-hint{display:block;margin-top:5px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.v2-f.is-invalid .v2-input{border-color:var(--accent)}
.ac-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ac-exl{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.ac-exl svg{width:14px;height:14px}
.ac-out{padding:16px 18px;min-width:0;border-left:1px solid var(--soft)}
.ac-out>.v2-label{display:block;margin-bottom:8px}
.ac-big{font-size:42px;overflow-wrap:anywhere}
.ac-out .v2-sub{margin-bottom:12px}
.ac-rows li{flex-wrap:wrap}
.ac-rows li b{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}
.ac-caveat{margin:10px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.ac-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.ac-foot .v2-status:empty{display:none}
.ac-vis[hidden]{display:none}
.ac-mapbox{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.ac-mapbox>.v2-label,.ac-card>.v2-label{display:block;margin-bottom:10px}
.ac-map{position:relative;cursor:crosshair;touch-action:manipulation;min-width:0}
.ac-map svg{display:block;font-family:var(--sans);overflow:visible;-webkit-user-select:none;user-select:none}
.ac-map .gr{stroke:var(--soft);stroke-width:1}
.ac-map .ax{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.ac-map .ref{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:4 4;opacity:.55}
.ac-map .iso{fill:none;stroke:var(--muted);stroke-width:1;opacity:.6}
.ac-map .iso-t{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.ac-z-ok{fill:rgba(46,150,90,.28);background:rgba(46,150,90,.28)}
.ac-z-hot{fill:rgba(214,96,52,.14);background:rgba(214,96,52,.2)}
.ac-z-humid{fill:rgba(40,130,170,.18);background:rgba(40,130,170,.24)}
.ac-z-dry{fill:rgba(196,150,60,.2);background:rgba(196,150,60,.26)}
.ac-z-cool{fill:rgba(80,110,200,.13);background:rgba(80,110,200,.2)}
.ac-map .pt circle{fill:var(--ink);stroke:var(--paper);stroke-width:2.5}
.ac-map .pt.is-out circle{fill:var(--paper);stroke:var(--ink);stroke-dasharray:3 2}
.ac-map .pt text{fill:var(--ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.ac-map .tg circle{fill:var(--paper);stroke:var(--ink);stroke-width:2.5}
.ac-map .arw{fill:none;stroke:var(--ink);stroke-width:2}
.ac-map marker path{fill:var(--ink)}
.ac-keys{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)}
.ac-keys li{display:flex;align-items:center;gap:6px}
.ac-keys i{flex:0 0 auto;width:12px;height:12px;border-radius:2px}
.ac-keys .k-pt{border-radius:50%;background:var(--ink)}
.ac-keys .k-tg{border-radius:50%;border:2px solid var(--ink);background:var(--paper);box-sizing:border-box}
.ac-keys .k-iso{height:0;border-top:1.5px solid var(--muted);border-radius:0;width:16px}
.ac-note{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink)}
.ac-note:empty{display:none}
.ac-tip{font-size:11.5px;color:var(--muted)}
.ac-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ac-card{padding:14px 18px 16px;min-width:0}
.ac-card+.ac-card{border-left:1px solid var(--soft)}
/* 무엇을 낮출까 */
.ac-cmp{display:grid;gap:10px;margin:0;padding:0;list-style:none;font-family:var(--sans)}
.ac-cmp li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:baseline}
.ac-cl{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ac-cmp li>b{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-ct{grid-column:1/-1;display:block;height:10px;border-radius:var(--radius);background:var(--wash);overflow:hidden}
.ac-ct i{display:block;height:100%;width:0;background:var(--fill);border-radius:var(--radius);transition:width .4s cubic-bezier(.22,1,.36,1)}
.ac-cmp li.is-up .ac-ct i{background:repeating-linear-gradient(135deg,var(--fill) 0 4px,transparent 4px 7px);box-shadow:inset 0 0 0 1px var(--fill)}
.ac-cmp li.is-same>b{font-weight:500;color:var(--muted)}
/* 설정 온도별 막대: 누르면 그 설정으로 */
.ac-sets{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.ac-sets button{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;padding:0;border:0;background:none;cursor:pointer;font-family:var(--sans)}
.ac-sb{position:relative;display:flex;align-items:flex-end;height:96px;border-radius:var(--radius);background:var(--wash)}
.ac-sb i{display:block;width:100%;background:var(--line);border-radius:var(--radius);transition:background-color .2s}
.ac-sets li.is-gap .ac-sb{background:repeating-linear-gradient(135deg,var(--accent-wash) 0 4px,transparent 4px 8px),var(--wash);box-shadow:inset 0 0 0 1px var(--accent)}
.ac-sl{font-size:12px;font-weight:650;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;min-height:var(--v2-tap,24px);display:flex;align-items:center;justify-content:center}
.ac-sets button[aria-pressed="true"] .ac-sb i{background:var(--fill)}
.ac-sets button[aria-pressed="true"] .ac-sl{color:var(--ink);font-weight:800}
.ac-sets button:hover .ac-sb i{background:var(--fill-hover)}
.ac-sets button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
.ac-axis{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin:6px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.ac-gapkey{display:inline-flex;align-items:center;gap:6px}
.ac-gapkey i{width:12px;height:12px;border-radius:2px;background:repeating-linear-gradient(135deg,var(--accent-wash) 0 3px,transparent 3px 6px),var(--wash);box-shadow:inset 0 0 0 1px var(--accent)}
@container ac (max-width:779px){
  .ac-top{grid-template-columns:minmax(0,1fr)}
  .ac-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .ac-cards{grid-template-columns:minmax(0,1fr)}
  .ac-card+.ac-card{border-left:0;border-top:1px solid var(--soft)}
}
@container ac (max-width:520px){
  .ac-big{font-size:36px}
  .ac-in,.ac-out,.ac-mapbox,.ac-card{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){ .ac-ct i,.ac-sb i{transition:none} }