/* 적정 주택 구매 가격 계산기 전용 CSS (2026-10-12). 2패널(입력 | 결과) + 돈 구성 막대 · 대출을 막는 한도 · 금리별 최대 집값. 공용 부품은 assets/v2.css */
.ho-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ho-in{padding:16px 18px 18px;min-width:0}
.ho-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:13px}
.ho-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.ho-seg{margin-top:6px}
.ho-seg button{height:auto;min-height:var(--v2-ctl,42px);padding:6px 11px;white-space:nowrap}
.ho-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.ho-more{border-top:1px solid var(--soft);padding-top:10px}
.ho-more summary{cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink)}
.ho-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ho-morein{display:grid;gap:12px;margin-top:12px}
.ho-dsr{margin-top:14px;padding-top:12px;border-top:1px solid var(--soft)}
.ho-dsrhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0}
.ho-dsrhead output{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ho-range{display:block;width:100%;margin:8px 0 0;accent-color:var(--ink)}
.ho-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.ho-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:hoout / inline-size}
.ho-out .v2-label{display:block;margin-bottom:6px}
.ho-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(22px, 9.5cqi, 1em)}
.ho-out .v2-big.is-empty span{font-size:17px;font-weight:600;color:var(--muted);white-space:normal}
.ho-rows{margin-top:14px}
.ho-rows li b{white-space:normal;text-align:right}
.ho-caveat{margin:12px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
.ho-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.ho-caveat + .ho-foot{margin-top:14px}
.ho-foot .v2-status{margin-left:auto}
.ho-box{padding:14px 18px 18px;border-top:1px solid var(--soft);min-width:0}
.ho-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.ho-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
/* 돈 구성: 대출 · 집값에 넣는 내 돈 · 부대비용 · 남는 돈 */
.ho-comp{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--soft)}
.ho-c{display:block;height:100%;transition:width .45s var(--ease,ease)}
.ho-c--loan{background:var(--ink)}
.ho-c--own{background:color-mix(in srgb, var(--ink) 45%, var(--paper))}
.ho-c--cost{background:var(--accent)}
.ho-c--left{background:var(--line)}
.ho-keys{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.ho-keys li{display:flex;align-items:center;gap:6px}
.ho-keys li i{display:inline-block;width:10px;height:10px;border-radius:2px}
.ho-keys li b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* 한도 막대·금리별 막대 */
.ho-lim,.ho-rates{list-style:none;margin:0;padding:0}
.ho-lim li,.ho-rates li{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr) minmax(0,9.5em);gap:4px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:13px}
.ho-ln{color:var(--muted);overflow-wrap:anywhere}
.ho-ln em{font-style:normal;font-weight:700;color:var(--ink);margin-left:4px}
.ho-lim li b,.ho-rates li b{text-align:right;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ho-lbar,.ho-rbar{display:block;height:9px;border-radius:5px;background:var(--soft);overflow:hidden}
.ho-lbar i,.ho-rbar i{display:block;height:100%;border-radius:5px;background:var(--line);transition:width .45s var(--ease,ease)}
.ho-lim li.is-on .ho-ln,.ho-lim li.is-on b,.ho-rates li.is-on span:first-child,.ho-rates li.is-on b{color:var(--ink);font-weight:700}
.ho-lim li.is-on .ho-lbar i,.ho-rates li.is-on .ho-rbar i{background:var(--ink)}
@media (max-width:720px){
  .ho-grid{grid-template-columns:minmax(0,1fr)}
  .ho-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .ho-in,.ho-out,.ho-box{padding-left:12px;padding-right:12px}
}
@container v2in (max-width:372px){ .ho-pair{grid-template-columns:minmax(0,1fr)} } /* 13자리 금액(92억 원)이 1400px 화면의 반쪽 칸에서 잘림 → 한 열 */
.ho-box{container:hobox / inline-size}
@container hobox (max-width:520px){
  .ho-lim li,.ho-rates li{grid-template-columns:minmax(0,1fr) auto}
  .ho-lim li .ho-lbar,.ho-rates li .ho-rbar{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){ .ho-c,.ho-lbar i,.ho-rbar i{transition:none} }