/* ───────────────────────────────────────────────
   얼마야 전기 계산기 (/price/electric.php) 전용 스타일
   모든 규칙 #eom .ecalc 스코프 · 색은 base 토큰(주황) 파생
   ─────────────────────────────────────────────── */
#eom .ecalc{
  --brand:#ff6600;--brandd:#e85c00;--brand-weak:#fff2ea;
  --card:#fff;--bg:#f6f7f9;--line:#e9ecf1;--tink:#0a0a0a;--tsub:#5b6472;
  --pass:#1a9e57;--fail:#dc2626;--radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.05);
  max-width:760px;margin:0 auto;
}
#eom .ecalc h1{font-size:22px;margin:8px 0 2px;color:var(--tink)}
#eom .ecalc .badge{display:inline-block;background:var(--brand-weak);color:var(--brand);font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:6px;vertical-align:middle}
#eom .ecalc .lead{color:var(--tsub);font-size:13px;margin:0 0 16px}

/* 탭 */
#eom .ecalc .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
#eom .ecalc .tabs button{border:1px solid var(--line);background:var(--card);color:var(--tsub);padding:8px 12px;border-radius:999px;font-size:13px;cursor:pointer;font-weight:600}
#eom .ecalc .tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 카드·패널 */
#eom .ecalc .panel{display:none}
#eom .ecalc .panel.on{display:block}
#eom .ecalc .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
#eom .ecalc .card h2{font-size:15px;margin:0 0 10px;color:var(--tink)}
#eom .ecalc .card h3{font-size:14px;margin:0 0 10px;color:var(--tink)}
#eom .ecalc .desc{color:var(--tsub);font-size:12px;margin:-4px 0 12px}

/* 입력 */
#eom .ecalc label{display:block;font-size:12px;color:var(--tsub);margin:10px 0 4px;font-weight:600}
#eom .ecalc input,#eom .ecalc select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fff;color:var(--tink)}
#eom .ecalc input:focus,#eom .ecalc select:focus{outline:none;border-color:var(--brand)}
#eom .ecalc .row{display:flex;gap:10px}
#eom .ecalc .row>div{flex:1}
#eom .ecalc .row input,#eom .ecalc .row select{min-width:0}
#eom .ecalc .seg{display:flex;gap:6px;margin:4px 0}
#eom .ecalc .seg button{flex:1;border:1px solid var(--line);background:#fff;color:var(--tsub);padding:9px;border-radius:8px;font-size:13px;cursor:pointer;font-weight:600}
#eom .ecalc .seg button.on{background:var(--brand-weak);border-color:var(--brand);color:var(--brandd)}
#eom .ecalc .go{width:100%;margin-top:14px;padding:12px;border:0;border-radius:9px;background:var(--brand);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
#eom .ecalc .go:hover{background:var(--brandd)}

/* 동적 행 */
#eom .ecalc .ghost{border:1px solid var(--line);background:#fff;color:var(--fail);border-radius:8px;padding:0 10px;font-size:14px;cursor:pointer}
#eom .ecalc .hint{color:var(--tsub);font-size:11px;font-weight:600}
#eom .ecalc .add{width:100%;margin-top:8px;padding:9px;border:1px dashed var(--brand);background:var(--brand-weak);color:var(--brandd);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer}
#eom .ecalc .presets{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
#eom .ecalc .presets .preset{border:1px solid var(--line);background:#fff;color:var(--tsub);padding:5px 9px;border-radius:999px;font-size:12px;cursor:pointer}

/* 결과 */
#eom .ecalc .result{display:none;margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
#eom .ecalc .result.show{display:block}
#eom .ecalc .pick{font-size:26px;font-weight:800;color:var(--brand)}
#eom .ecalc .pick small{font-size:13px;font-weight:600;color:var(--tsub)}
#eom .ecalc .reason{font-size:12px;color:var(--tsub);margin:6px 0 12px}
#eom .ecalc .kv{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-bottom:1px solid var(--line)}
#eom .ecalc .kv:last-child{border-bottom:0}
#eom .ecalc .kv b{font-weight:700;color:var(--tink)}
#eom .ecalc table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
#eom .ecalc th,#eom .ecalc td{padding:7px 6px;text-align:right;border-bottom:1px solid var(--line)}
#eom .ecalc th{color:var(--tsub);font-weight:600;font-size:12px}
#eom .ecalc th.l,#eom .ecalc td.l{text-align:left}
#eom .ecalc tr.pick td{background:var(--brand-weak);font-weight:700}
#eom .ecalc .pass{color:var(--pass);font-weight:700}
#eom .ecalc .fail{color:var(--fail);font-weight:700}
#eom .ecalc .note{font-size:11px;color:var(--tsub);margin-top:10px;line-height:1.6}

/* 연관 도구 + FAQ */
#eom .ecalc .relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
#eom .ecalc .relgrid a{display:block;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:var(--card)}
#eom .ecalc .relgrid a:hover{border-color:var(--brand);background:var(--brand-weak)}
#eom .ecalc .relgrid a b{display:block;font-size:13px;color:var(--tink);font-weight:700}
#eom .ecalc .relgrid a span{display:block;font-size:11px;color:var(--tsub);margin-top:2px}
#eom .ecalc .faq details{border:1px solid var(--line);border-radius:10px;padding:2px 14px;margin:8px 0;background:var(--card)}
#eom .ecalc .faq summary{cursor:pointer;padding:12px 0;font-weight:700;font-size:13.5px;list-style:none;color:var(--tink)}
#eom .ecalc .faq summary::-webkit-details-marker{display:none}
#eom .ecalc .faq summary::before{content:'＋ ';color:var(--brand);font-weight:800}
#eom .ecalc .faq details[open] summary::before{content:'− '}
#eom .ecalc .faq p{margin:0 0 12px;font-size:13px;color:var(--tsub);line-height:1.7}

@media(max-width:560px){
  #eom .ecalc h1{font-size:19px}
  #eom .ecalc .pick{font-size:22px}
}