/* 보유세 계산기 전용 CSS (2026-10-15). 2패널 계산형 htx-* + 주택 카드 목록 + 그림 3개(세목 구성 막대·종부세 공제선 미터·납부 막대, R45). 공용 부품은 assets/v2.css */
.htx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.htx-in{padding:16px 18px 18px;min-width:0}
.htx-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.htx-fields .v2-f{min-width:0}
.htx-fields .v2-f>.v2-label{display:block}
.htx-fields [hidden]{display:none}
.htx-seg{margin-top:6px;flex-wrap:wrap}
.htx-seg button{height:32px;padding:0 12px;font-family:var(--sans);font-size:12.5px;font-weight:700;white-space:nowrap}
/* 주택 카드: 공시가격 칸 + 도시지역분 켜기 + 지우기, 펼치면 작년 공시가격 칸 */
.htx-homes{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.htx-home{display:grid;gap:10px;min-width:0;padding:10px 10px 8px;border:1px solid var(--soft);border-radius:var(--radius)}
.htx-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:6px;align-items:center}
.htx-hrow:has(.htx-del[hidden]){grid-template-columns:minmax(0,1fr) auto}
.htx-money{min-width:0}
.htx-money input{min-width:0}
.htx-home .v2-input:has(input[aria-invalid="true"]){border-color:var(--accent)}
.htx-urb{height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-family:var(--sans);font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.htx-urb::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;border:1.5px solid currentColor;border-radius:2px;vertical-align:-1px;box-sizing:border-box}
.htx-urb[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.htx-urb[aria-pressed="true"]::before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--paper)}
.htx-urb:focus-visible,.htx-del:focus-visible,.htx-lastbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.htx-del{width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--muted);font-size:16px;line-height:1;cursor:pointer}
.htx-del:hover{color:var(--ink);border-color:var(--ink)}
.htx-del[hidden]{display:none}
.htx-words{display:block;min-height:18px;margin-top:4px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted)}
.htx-words:empty{min-height:0;margin-top:0}
.htx-words.is-error{color:var(--accent)}
.htx-lastf{display:none;padding-top:8px;border-top:1px dashed var(--line)}
.htx-fields.is-last .htx-lastf{display:block}
.htx-lastf .htx-money{max-width:280px}
.htx-addrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px}
.htx-add small{margin-left:2px;font-weight:600;color:var(--muted)}
.htx-add:disabled{opacity:.5;cursor:not-allowed}
.htx-lastbtn{padding:4px 0;border:0;background:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);text-align:left}
.htx-lastbtn::before{content:"+";display:inline-block;width:16px;color:var(--muted)}
.htx-lastbtn[aria-expanded="true"]::before{content:"−"}
.htx-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.htx-multi{margin:0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--wash);font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.htx-credit{display:grid;gap:12px}
.htx-credit[hidden]{display:none}
.htx-credit>.htx-hint{margin-top:-4px}
.htx-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.htx-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.htx-exl{display:inline-flex;align-items:center;gap:4px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted)}
.htx-ex{flex-wrap:wrap}
.htx-ex button{height:32px;padding:0 10px;font-family:var(--sans);font-size:12.5px;font-weight:600;white-space:nowrap}
/* 결과 패널 */
.htx-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column}
.htx-out .v2-label{display:block;margin-bottom:6px}
.htx-out .v2-big{flex-wrap:wrap;row-gap:6px}
.htx-out .v2-big>span{min-width:0;overflow-wrap:anywhere}
.htx-out .v2-big>span i{font-style:normal;font-size:.5em;font-weight:700;margin-left:4px;color:var(--muted)}
.htx-out .v2-big small{flex-basis:100%;display:block;margin:0;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted)}
.htx-rows{margin-top:14px}
.htx-rows li span{min-width:0;flex:1 1 auto}
.htx-rows li span em{display:block;margin-top:2px;font-size:11.5px;color:var(--muted);opacity:1;max-width:100%;overflow-wrap:anywhere}
.htx-rows li b{flex:0 0 auto}
.htx-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.htx-caveat{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.htx-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.htx-foot .v2-status{margin-left:auto}
.v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
/* 값이 바뀌면 막대 폭·높이가 부드럽게 이동 — transitions-dev 01 card resize 스니펫(.t-resize) */
:root{--resize-dur:300ms;--resize-ease:cubic-bezier(0.22, 1, 0.36, 1)}
.t-resize{transition:width var(--resize-dur) var(--resize-ease),height var(--resize-dur) var(--resize-ease),left var(--resize-dur) var(--resize-ease);will-change:width,height}
@media (prefers-reduced-motion:reduce){ .t-resize{transition:none !important} }
/* 세목 구성 막대: 지방세(재산세·도시지역분·지방교육세)는 잉크 농도, 국세(종부세·농특세)는 강조색 */
.htx-barbox{margin-top:14px}
.htx-bar{display:flex;height:14px;border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.htx-bar i{display:block;flex:0 0 auto;width:0;height:100%;box-shadow:inset -2px 0 0 var(--paper)}
.htx-bar i[hidden]{display:none}
.htx-bar i.is-rest{flex:1 1 0;width:auto;box-shadow:none}
.htx-bar .p-tax,.htx-keys .k-tax::before{background:color-mix(in srgb,var(--ink) 80%,var(--paper))}
.htx-bar .p-urb,.htx-keys .k-urb::before{background:color-mix(in srgb,var(--ink) 52%,var(--paper))}
.htx-bar .p-edu,.htx-keys .k-edu::before{background:color-mix(in srgb,var(--ink) 30%,var(--paper))}
.htx-bar .p-crt,.htx-keys .k-crt::before{background:var(--accent)}
.htx-bar .p-rural,.htx-keys .k-rural::before{background:color-mix(in srgb,var(--accent) 50%,var(--paper))}
.htx-keys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:12px;color:var(--muted)}
.htx-keys li{white-space:nowrap}
.htx-keys li b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.htx-keys li::before{content:"";display:inline-block;width:12px;height:10px;margin-right:6px;vertical-align:-1px}
/* 그림 두 칸: 종부세 공제선 미터 | 납부 막대 */
.htx-vis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--soft)}
.htx-vis[hidden]{display:none}
.htx-vcard{min-width:0;padding:14px 18px 16px}
.htx-vcard+.htx-vcard{border-left:1px solid var(--soft)}
.htx-vcard>.v2-label{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.htx-meter{padding:22px 0 24px}
.htx-mtrack{position:relative;height:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.htx-mfill{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--ink) 26%,var(--paper));border-radius:var(--radius) 0 0 var(--radius)}
.htx-mover{position:absolute;top:0;bottom:0;width:0;background:var(--accent)}
.htx-tick{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px solid var(--ink)}
.htx-tick em{position:absolute;left:0;transform:translateX(-50%);font-family:var(--sans);font-size:11px;font-style:normal;font-weight:700;color:var(--muted);white-space:nowrap}
.htx-tick.is-up em{bottom:100%;margin-bottom:3px}
.htx-tick.is-down em{top:100%;margin-top:3px}
.htx-tick.is-r em{transform:translateX(-100%)}
.htx-tick.is-l em{transform:none}
.htx-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.htx-vcard .htx-note{color:var(--ink)}
.htx-cal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.htx-col{display:grid;grid-template-rows:auto 96px auto auto;justify-items:center;min-width:0;text-align:center;font-family:var(--sans)}
.htx-col b{max-width:100%;margin-bottom:4px;font-size:11.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.htx-col.is-zero b{color:var(--muted);font-weight:600}
.htx-colbox{display:flex;align-items:flex-end;justify-content:center;width:100%;height:96px;border-bottom:1px solid var(--line)}
.htx-colbox i{position:relative;display:block;width:min(46px,70%);height:0;overflow:hidden;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--ink) 70%,var(--paper))}
.htx-col:nth-child(3) .htx-colbox i{background:var(--accent)}
.htx-colbox s{position:absolute;left:0;right:0;top:0;background:repeating-linear-gradient(135deg,transparent 0 4px,var(--paper) 4px 6px);opacity:.75}
.htx-col.is-later .htx-colbox i{background:transparent;border:1.5px dashed var(--accent);border-bottom:0}
.htx-col em{margin-top:6px;font-size:12.5px;font-style:normal;font-weight:700;color:var(--ink)}
.htx-col small{font-size:11px;color:var(--muted)}
.htx-pay,.htx-steps{margin-top:12px}
/* 표: 1채면 공시가격별 1세대 1주택 비교, 여러 채면 주택별 재산세 */
.htx-tbl{padding:14px 18px 18px;border-top:1px solid var(--soft)}
.htx-tbl[hidden]{display:none}
.htx-tbl>.v2-label{display:block;margin-bottom:8px}
.htx-tbl .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.htx-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13px;font-variant-numeric:tabular-nums}
.htx-table th,.htx-table td{padding:7px 8px;border-top:1px solid var(--soft);text-align:left;white-space:nowrap}
.htx-table th{font-size:11.5px;font-weight:700;color:var(--muted);border-top:0}
.htx-table .n{text-align:right}
.htx-table td small{display:block;font-size:11px;color:var(--muted)}
.htx-table tr.is-cur td{background:var(--accent-wash);color:var(--ink)}
.htx-table tfoot td{border-top:1px solid var(--line);font-weight:700;color:var(--ink)}
/* 입력 패널이 좁으면(두 열 배치의 왼쪽·모바일) 도시지역분 버튼을 공시가격 칸 아래 줄로 — 13자리 값이 잘리지 않게(align-check) */
@container v2in (max-width:420px){
  .htx-hrow{grid-template-columns:minmax(0,1fr) 32px}
  .htx-hrow:has(.htx-del[hidden]){grid-template-columns:minmax(0,1fr)}
  .htx-hrow .htx-urb{grid-row:2;grid-column:1 / -1;justify-self:start;height:32px}
}
@media (max-width:720px){
  .htx-grid{grid-template-columns:minmax(0,1fr)}
  .htx-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
  .htx-vis{grid-template-columns:minmax(0,1fr)}
  .htx-vcard+.htx-vcard{border-left:0;border-top:1px solid var(--soft)}
}
@media (max-width:420px){
  .htx-in,.htx-out,.htx-vcard,.htx-tbl{padding-left:12px;padding-right:12px}
}