/* 재개발 양도세 계산기 — 공통 스타일
   밝은 화면과 어두운 화면을 둘 다 지원한다. 바깥에서 받아오는 것은 없다. */

:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1a1d21; --dim:#5c6670; --line:#e2e6ea;
  --accent:#1f6feb; --good:#0f7b4f; --goodbg:#e8f6ef; --bad:#b3261e; --badbg:#fdecea;
  --warn:#8a5a00; --warnbg:#fff6e0; --mark:#eef4ff; --field:#fff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13161a; --card:#1b1f24; --ink:#e8eaed; --dim:#9aa4ae; --line:#2c333b;
    --accent:#6aa6ff; --good:#5fd6a0; --goodbg:#10291f; --bad:#ff8a80; --badbg:#2b1512;
    --warn:#e9b949; --warnbg:#2a2110; --mark:#1a2432; --field:#11151a;
  }
}
:root[data-theme="dark"]{
  --bg:#13161a; --card:#1b1f24; --ink:#e8eaed; --dim:#9aa4ae; --line:#2c333b;
  --accent:#6aa6ff; --good:#5fd6a0; --goodbg:#10291f; --bad:#ff8a80; --badbg:#2b1512;
  --warn:#e9b949; --warnbg:#2a2110; --mark:#1a2432; --field:#11151a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7; word-break:keep-all;
}
a{color:var(--accent)}
.wrap{max-width:900px; margin:0 auto; padding:0 16px}

/* 머리 */
.top{border-bottom:1px solid var(--line); background:var(--card)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding-top:12px; padding-bottom:12px}
.brand{font-weight:800; font-size:1.05rem; text-decoration:none; color:var(--ink)}
.brand span{color:var(--accent)}
nav a{font-size:.88rem; margin-left:14px; text-decoration:none; color:var(--dim)}
nav a:hover,nav a[aria-current="page"]{color:var(--accent)}
nav a:first-child{margin-left:0}

main{padding:26px 0 60px}
h1{font-size:1.42rem; line-height:1.4; margin:0 0 6px}
.lead{color:var(--dim); font-size:.88rem; margin-bottom:22px}
h2{font-size:1.1rem; margin:34px 0 12px; padding-bottom:7px; border-bottom:2px solid var(--line)}
h3{font-size:1rem; margin:24px 0 9px}
p{margin:0 0 13px}
ul.tight{margin:0 0 13px; padding-left:1.2em}
ul.tight li{margin:0 0 6px}
ol.tight{margin:0 0 13px; padding-left:1.3em}
ol.tight li{margin:0 0 7px}

.card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:0 0 14px}
.note{border-left:4px solid var(--warn); background:var(--warnbg); padding:13px 16px; border-radius:8px; margin:0 0 16px; font-size:.93rem}
.note strong{color:var(--warn)}
.stop{border-left:4px solid var(--bad); background:var(--badbg); padding:14px 17px; border-radius:8px; margin:0 0 16px}
.stop strong{color:var(--bad)}
.okbox{border-left:4px solid var(--good); background:var(--goodbg); padding:13px 16px; border-radius:8px; margin:0 0 16px}
.okbox strong{color:var(--good)}

/* 입력 */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:14px}
label{display:block; font-size:.82rem; color:var(--dim); margin-bottom:4px}
.ir{display:flex; align-items:center; gap:7px}
input,select{width:100%; padding:10px 11px; font-size:1.02rem; font-weight:600;
  border:1px solid var(--line); border-radius:9px; background:var(--field); color:var(--ink);
  font-family:inherit; font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px}
input[type=range]{padding:0; accent-color:var(--accent)}
input[type=checkbox]{width:auto; margin:0}
.unit{color:var(--dim); font-size:.86rem; white-space:nowrap}
.hint{font-size:.76rem; color:var(--dim); margin-top:3px}

.agree{display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:.9rem}
.agree label{margin:0; color:var(--ink); font-size:.9rem; font-weight:600}
.locked{opacity:.45; pointer-events:none}

/* 결과 */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:13px; margin:0 0 14px}
.res{border-radius:12px; padding:17px 19px; border:1px solid var(--line); background:var(--card)}
.res.now{border-color:var(--good); background:var(--goodbg)}
.res.ref{border-color:var(--bad); background:var(--badbg)}
.res .h{font-size:.8rem; color:var(--dim); margin-bottom:3px}
.res .h b{color:var(--ink)}
.res .amt{font-size:1.8rem; font-weight:800; line-height:1.25; font-variant-numeric:tabular-nums}
.res.now .amt{color:var(--good)} .res.ref .amt{color:var(--bad)}
.res .sm{font-size:.82rem; color:var(--dim); margin-top:6px}
.gap{font-size:.93rem; text-align:center; color:var(--dim); margin:0 0 18px}
.gap b{color:var(--ink)}

/* 표 */
.tw{overflow-x:auto; margin:0 0 15px; border:1px solid var(--line); border-radius:10px}
table{border-collapse:collapse; width:100%; font-size:.89rem; background:var(--card)}
th,td{padding:9px 11px; text-align:left; border-bottom:1px solid var(--line); min-width:4.5em; vertical-align:top}
th{background:var(--mark); font-weight:600; white-space:nowrap}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
tr.here td{background:var(--mark); font-weight:700}
.zero{color:var(--good); font-weight:700}

/* 적용 법 */
.rule{display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.rule:last-child{border-bottom:none}
.rule .ic{flex:0 0 auto; width:1.5em; text-align:center}
.rule .bd b{display:block}
.rule .bd span{display:block; color:var(--dim); font-size:.85rem}
.rule .law{color:var(--accent); font-size:.78rem; margin-top:2px}

/* 광고 자리 — 승인 전에는 숨겨 둔다 */
.adslot{border:1px dashed var(--line); border-radius:10px; padding:20px; text-align:center;
  color:var(--dim); font-size:.8rem; margin:0 0 16px; background:var(--card)}

.ver{display:inline-block; font-size:.72rem; padding:1px 8px; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent); margin-left:6px; vertical-align:2px}
.src{font-size:.83rem; color:var(--dim)}
.chg{font-size:.84rem; color:var(--dim)}
.chg b{color:var(--ink)}

/* 꼬리 */
footer{border-top:1px solid var(--line); background:var(--card); padding:22px 0 40px;
  font-size:.84rem; color:var(--dim)}
footer h4{font-size:.9rem; color:var(--ink); margin:0 0 8px}
footer ol{margin:0 0 14px; padding-left:1.3em}
footer li{margin:0 0 6px}
footer .links a{margin-right:12px}

@media print{ body{background:#fff} .adslot,nav{display:none} }