@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

/* ============ 전기요금 계산기 · Flat (뚝딱툴 패턴 재사용, 전기 테마) ============ */
:root{
  --bg:#f2f2ef; --surface:#ffffff; --surface-2:#f6f6f3; --ink:#15171c; --muted:#565a63; --faint:#9498a1;
  --border:#161821; --line:#dcdcd6; --accent:#b8860b; --accent-dark:#8a6508; --accent-soft:#faf3df;
  --good:#12833f; --maxw:720px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif;
  letter-spacing:-.01em; line-height:1.6; -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

header.site{ background:var(--surface); border-bottom:2px solid var(--border); }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; height:60px; }
.brand{ font-weight:800; font-size:19px; letter-spacing:-.04em; color:var(--ink); }
.brand:hover{ text-decoration:none; }
nav.top{ display:flex; gap:20px; } nav.top a{ color:var(--muted); font-size:14px; font-weight:600; }
nav.top a:hover{ color:var(--accent); text-decoration:none; }

.crumb{ font-size:13px; color:var(--faint); margin:22px 0 0; } .crumb a{ color:var(--muted); }
h1.page{ font-size:27px; letter-spacing:-.04em; margin:14px 0 4px; font-weight:800; }
.lead{ color:var(--muted); font-size:16px; margin:0 0 8px; }

.panel{ background:var(--surface); border:1px solid var(--border); padding:24px 22px; margin:20px 0; }
label{ display:block; font-weight:700; font-size:13.5px; margin:16px 0 7px; } label:first-child{ margin-top:0; }
input[type=number],input[type=text],select{ width:100%; padding:12px 14px; font-size:15px; font-family:inherit;
  color:var(--ink); background:var(--surface); border:1.5px solid var(--border); border-radius:0; outline:none; }
input:focus,select:focus{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.row{ display:flex; gap:14px; } .row>*{ flex:1; min-width:0; }
@media(max-width:480px){ .row{ flex-direction:column; gap:0; } }

/* 토글 (라디오형 버튼) */
.seg{ display:flex; gap:0; border:1.5px solid var(--border); }
.seg label{ flex:1; margin:0; text-align:center; padding:11px 8px; font-weight:700; font-size:14px; cursor:pointer;
  background:var(--surface); color:var(--muted); border-right:1.5px solid var(--border); }
.seg label:last-child{ border-right:0; }
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg input:checked + span{ color:#fff; }
.seg label:has(input:checked){ background:var(--accent); color:#fff; }
.seg label:focus-within{ box-shadow:inset 0 0 0 2px var(--accent-soft); }

.btn{ display:inline-flex; align-items:center; justify-content:center; width:100%; padding:14px; border:none; border-radius:0;
  background:var(--accent); color:#fff; font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; margin-top:16px; }
.btn:hover{ background:var(--accent-dark); }

.result{ margin-top:20px; padding:18px; background:var(--surface-2); border:1px solid var(--border); }
.result .big{ font-size:32px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--ink); }
.result .big small{ font-size:15px; font-weight:600; color:var(--muted); margin-left:4px; letter-spacing:0; }
.result .err{ color:#c0392b; font-weight:700; }
.break{ margin-top:14px; border-top:1px dashed var(--line); }
.break dl{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; margin:12px 0 0; font-size:14px; }
.break dt{ color:var(--muted); } .break dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.break dd.tot{ font-weight:800; }

.notice{ font-size:12.5px; color:var(--faint); margin:10px 0 0; line-height:1.5; }

footer.site{ border-top:2px solid var(--border); margin-top:44px; background:var(--surface); }
footer.site .wrap{ padding:24px 20px 34px; }
.foot-top{ display:flex; flex-wrap:wrap; gap:8px 18px; }
.foot-top a{ color:var(--muted); font-size:13px; font-weight:600; }
.foot-note{ color:var(--faint); font-size:12px; margin-top:12px; }
.prose h2{ font-size:18px; margin:24px 0 6px; letter-spacing:-.025em; font-weight:800; }
.prose p{ color:var(--muted); font-size:15px; margin:0 0 12px; } .prose p strong{ color:var(--ink); }
.prose ul{ color:var(--muted); font-size:15px; padding-left:20px; } .prose li{ margin:4px 0; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }