:root{
  --bg: oklch(0.985 0.003 250);
  --surface:#ffffff;
  --surface-2: oklch(0.975 0.004 250);
  --line: oklch(0.925 0.005 255);
  --line-2: oklch(0.95 0.004 255);
  --ink: oklch(0.27 0.012 260);
  --ink-2: oklch(0.44 0.012 260);
  --muted: oklch(0.6 0.012 260);
  --faint: oklch(0.72 0.01 260);
  --accent: oklch(0.55 0.14 250);
  --accent-soft: oklch(0.95 0.03 250);
  --ring: oklch(0.55 0.14 250 / .25);
  --green: oklch(0.56 0.12 152);
  --green-soft: oklch(0.95 0.04 152);
  --amber: oklch(0.66 0.13 72);
  --amber-soft: oklch(0.95 0.05 75);
  --pad:20px; --gap:16px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:14px;
  --shadow: 0 1px 2px oklch(0.4 0.02 260 / .05), 0 4px 16px oklch(0.4 0.02 260 / .05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Pretendard',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum";
  line-height:1.45; letter-spacing:-0.01em;
}
#root{min-height:100%}
.app{min-height:100vh; display:flex; flex-direction:column}
em{font-style:normal}
.mono,.metric-value,.hero-value,.numf input,.mt-num,.ws-v,.wn-temp,.hk-v,.kwp-readout b,.chip-wp,.modcard-row b{font-family:var(--mono)}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), oklch(0.62 0.13 60));
  box-shadow:0 3px 10px var(--ring);
}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-name{font-weight:700; font-size:16px; letter-spacing:-0.02em}
.brand-tag{font-size:11.5px; color:var(--muted)}
.loc-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  padding:7px 13px; background:var(--accent-soft); color:var(--accent);
  border-radius:99px;
}
.loc-loading{font-size:11px; font-weight:500; color:var(--muted); margin-left:2px}

/* ---------- layout ---------- */
.layout{
  flex:1; display:grid; grid-template-columns:380px minmax(0,1fr);
  gap:24px; padding:24px 28px; max-width:1320px; width:100%; margin:0 auto; align-items:start;
}
.lay-stacked .layout{display:flex; flex-direction:column; max-width:1120px}
.lay-stacked .panel{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start}
.lay-stacked .pgroup{margin:0}
.dens-compact{--radius:11px}

/* ---------- input panel ---------- */
.panel{position:sticky; top:88px; display:flex; flex-direction:column; gap:18px}
.lay-stacked .panel{position:static}
.pgroup{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad); box-shadow:var(--shadow);
}
.pgroup-title{
  display:flex; align-items:baseline; gap:8px; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em; color:var(--ink);
  margin-bottom:14px; padding-bottom:11px; border-bottom:1px solid var(--line-2);
}
.pgroup-title em{font-size:11px; color:var(--faint); font-weight:500; letter-spacing:0}
.field{display:block; margin-bottom:var(--gap); min-width:0}
.field:last-child{margin-bottom:0}
.field-head{display:flex; align-items:baseline; justify-content:space-between; gap:2px 8px; flex-wrap:wrap; margin-bottom:6px}
.field-label{min-width:0}
.field-label{font-size:12.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:baseline; gap:6px}
.field-en{font-size:10.5px; color:var(--faint); font-weight:500}
.field-hint{font-size:11px; color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* number field */
.numf{
  display:flex; align-items:center; gap:8px; height:42px; padding:0 8px 0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; transition:.15s;
}
.numf:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.numf input{
  flex:1; min-width:0; border:none; outline:none; background:none; font-size:14px;
  color:var(--ink); font-weight:500; -moz-appearance:textfield;
}
.numf input::-webkit-outer-spin-button,.numf input::-webkit-inner-spin-button{-webkit-appearance:none}
.numf-unit{font-size:11.5px; color:var(--muted); white-space:nowrap}
.numf-steps{display:flex; flex-direction:column; border-left:1px solid var(--line-2); margin-left:2px}
.numf-steps button{
  width:24px; height:20px; border:none; background:none; color:var(--muted); cursor:pointer;
  font-size:13px; line-height:1; display:grid; place-items:center; transition:.12s;
}
.numf-steps button:hover{color:var(--accent); background:var(--accent-soft)}
.numf-steps button:first-child{border-bottom:1px solid var(--line-2)}

/* ---------- searchable select ---------- */
.ss{position:relative}
.ss-trigger{
  width:100%; display:flex; align-items:center; gap:9px; height:42px; padding:0 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; cursor:pointer;
  font-size:14px; color:var(--ink); transition:.15s; text-align:left;
}
.ss-trigger:hover{border-color:var(--faint)}
.ss-trigger.open{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
.ss-val{flex:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ss-val.ph{color:var(--faint); font-weight:400}
.ss-pop{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 30px oklch(0.4 0.02 260 / .14); overflow:hidden;
  animation:pop .14s ease;
}
@keyframes pop{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.ss-searchbar{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line-2)}
.ss-searchbar input{flex:1; border:none; outline:none; font-size:13.5px; background:none; color:var(--ink)}
.ss-list{max-height:288px; overflow-y:auto; padding:6px}
.ss-empty{padding:18px; text-align:center; color:var(--muted); font-size:13px}
.ss-row{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 11px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left;
}
.ss-row.hi{background:var(--surface-2)}
.ss-row.sel{background:var(--accent-soft)}
.ss-rowtext{display:flex; flex-direction:column; gap:2px; min-width:0}
.ss-rowlabel{font-size:13.5px; font-weight:600; color:var(--ink)}
.ss-rowsub{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* module rich row */
.modrow{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%}
.modrow-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.modrow-brand{font-size:11px; color:var(--muted); font-weight:600; letter-spacing:0.02em}
.modrow-model{font-size:13.5px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.modrow-spec{display:flex; align-items:center; gap:8px}
.modrow-eff{font-size:11.5px; color:var(--muted)}
.chip-wp{
  font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent);
}

/* module spec card */
.modcard{
  margin-top:12px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:11px;
  padding:11px 13px; display:flex; flex-direction:column; gap:7px;
}
.modcard-row{display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
.modcard-row b{color:var(--ink-2); font-weight:600; font-size:12.5px}
.kwp-readout{
  margin-top:12px; display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; border-radius:11px; background:var(--accent-soft);
}
.kwp-readout span{font-size:12.5px; font-weight:600; color:var(--accent)}
.kwp-readout span em{font-size:10px; opacity:.7; margin-left:4px}
.kwp-readout b{font-size:17px; color:var(--accent); font-weight:700}

/* advanced */
.adv-toggle{
  width:100%; display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:0.04em;
}
.adv-toggle em{font-size:11px; color:var(--faint); font-weight:500; letter-spacing:0; text-transform:none}
.adv-body{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2)}

/* ---------- results ---------- */
.results{display:flex; flex-direction:column; gap:var(--gap); min-width:0}
.lay-stacked .results{width:100%}
.result-hero{
  display:flex; align-items:stretch; justify-content:space-between; gap:20px;
  background:linear-gradient(135deg, oklch(0.31 0.04 262), oklch(0.26 0.03 262));
  border-radius:var(--radius); padding:24px 28px; color:#fff; position:relative; overflow:hidden;
}
.result-hero::after{content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:radial-gradient(circle, var(--accent), transparent 70%); opacity:.4}
.hero-main{position:relative; z-index:1}
.hero-label{font-size:13px; font-weight:600; opacity:.78; display:flex; align-items:baseline; gap:8px}
.hero-label em{font-size:11px; opacity:.7}
.hero-value{font-size:46px; font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin:6px 0 10px}
.hero-value span{font-size:18px; font-weight:500; opacity:.8; margin-left:8px}
.hero-value i{font-style:normal; font-size:14px; opacity:.7; margin-left:1px}
.hero-sub{display:flex; align-items:center; gap:10px; font-size:12.5px; opacity:.82; flex-wrap:wrap}
.hero-sub b{font-weight:700}
.hero-sub .dot{opacity:.4}
.hero-kwp{position:relative; z-index:1; text-align:right; display:flex; flex-direction:column; justify-content:center;
  padding-left:20px; border-left:1px solid rgba(255,255,255,.18)}
.hk-v{font-size:30px; font-weight:700; font-family:var(--mono); letter-spacing:-0.02em}
.hk-l{font-size:12px; opacity:.75; font-weight:600}
.hk-meta{font-size:11px; opacity:.6; margin-top:4px}

/* weather */
.weather{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:16px;
}
.weather-now{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.wn-icon{width:62px; height:62px; border-radius:16px; display:grid; place-items:center; background:var(--accent-soft)}
.wn-main{display:flex; flex-direction:column}
.wn-temp{font-size:34px; font-weight:700; font-family:var(--mono); line-height:1; letter-spacing:-0.02em}
.wn-temp span{font-size:16px; opacity:.6; margin-left:2px}
.wn-cond{font-size:13px; color:var(--ink-2); font-weight:600; margin-top:3px}
.wn-cond em{color:var(--muted); font-weight:400; margin-left:4px}
.wn-meta{margin-left:auto; display:flex; flex-direction:column; gap:6px}
.wn-meta span{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-2)}
.weather-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  padding-top:16px; border-top:1px solid var(--line-2)}
.ws{display:flex; flex-direction:column; gap:3px}
.ws-k{font-size:11.5px; color:var(--muted)}
.ws-v{font-size:18px; font-weight:700; color:var(--ink)}
.ws-v em{font-size:10.5px; color:var(--faint); font-weight:500; margin-left:3px; font-family:'Pretendard'}
.weather-src{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--faint)}

/* weather mini bars */
.wmini{padding-top:14px; border-top:1px solid var(--line-2)}
.wmini-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.wmini-head span{font-size:12px; font-weight:600; color:var(--ink-2)}
.wmini-head em{font-size:10.5px; color:var(--faint)}
.wmini-bars{display:flex; align-items:flex-end; gap:6px; height:70px}
.wmini-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end}
.wmini-bar{width:100%; max-width:22px; background:linear-gradient(to top, var(--accent), oklch(0.7 0.1 230));
  border-radius:4px 4px 2px 2px; position:relative; min-height:4px; transition:height .4s ease}
.wmini-bar:hover .wmini-tip{opacity:1; transform:translateY(0)}
.wmini-tip{position:absolute; bottom:calc(100% + 5px); left:50%; transform:translate(-50%,4px); opacity:0;
  background:var(--ink); color:#fff; font-size:10px; padding:3px 6px; border-radius:5px; white-space:nowrap;
  pointer-events:none; transition:.15s; font-family:var(--mono); z-index:2}
.wmini-lbl{font-size:10px; color:var(--faint); font-family:var(--mono)}

/* metric grid */
.metric-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap)}
.metric{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 17px; display:flex; gap:13px; box-shadow:var(--shadow); align-items:flex-start;
}
.metric-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex-shrink:0}
.tone-accent .metric-ic{background:var(--accent-soft); color:var(--accent)}
.tone-green .metric-ic{background:var(--green-soft); color:var(--green)}
.tone-amber .metric-ic{background:var(--amber-soft); color:var(--amber)}
.tone-neutral .metric-ic{background:var(--surface-2); color:var(--ink-2)}
.metric-body{min-width:0; flex:1}
.metric-label{font-size:11.5px; color:var(--muted); font-weight:600; display:flex; flex-direction:column; gap:0}
.metric-label em{font-size:10px; color:var(--faint); font-weight:500}
.metric-value{font-size:24px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; margin-top:5px; line-height:1.1}
.metric-unit{font-size:13px; font-weight:500; color:var(--muted); margin-left:3px; font-family:'Pretendard'}
.metric-sub{font-size:11px; color:var(--faint); margin-top:4px}

/* result card / chart-table */
.result-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad); box-shadow:var(--shadow);
}
.rc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.rc-title{font-size:15px; font-weight:700; display:flex; align-items:baseline; gap:8px}
.rc-title em{font-size:11.5px; color:var(--faint); font-weight:500}
.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; padding:3px; gap:2px}
.seg button{
  display:flex; align-items:center; gap:6px; border:none; background:none; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--muted); padding:6px 13px; border-radius:6px; transition:.13s;
  font-family:inherit;
}
.seg button.on{background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.08)}

.chart{width:100%; height:auto; display:block}
.chart-axis{font-size:10px; fill:var(--faint); font-family:var(--mono)}
.chart-bar{fill:var(--accent); transition:.2s}
.chart-bar:hover{fill:oklch(0.48 0.16 250)}
.lay-stacked .chart-bar{fill:var(--accent)}
.chart-line{fill:none; stroke:var(--accent); stroke-width:2.4}
.chart-area{fill:var(--accent); opacity:.1}
.chart-dot{fill:var(--surface); stroke:var(--accent); stroke-width:2}
.chart-foot{display:flex; gap:22px; flex-wrap:wrap; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line-2); font-size:12px; color:var(--muted)}
.chart-foot b{color:var(--ink); font-weight:600; font-family:var(--mono)}

/* table */
.tablewrap{overflow-x:auto; margin:0 calc(var(--pad) * -1) calc(var(--pad) * -1); padding:0 var(--pad) 4px}
.mtable{width:100%; border-collapse:collapse; font-size:13px; min-width:520px}
.mtable th{
  text-align:right; padding:9px 12px; font-size:11px; color:var(--muted); font-weight:600;
  border-bottom:1.5px solid var(--line); white-space:nowrap;
}
.mtable th:first-child{text-align:left}
.mtable th em{display:block; font-size:9.5px; color:var(--faint); font-weight:500; margin-top:1px}
.mtable td{padding:8px 12px; border-bottom:1px solid var(--line-2); color:var(--ink-2)}
.mt-month{font-weight:600; color:var(--ink)}
.mt-num{text-align:right; font-family:var(--mono); font-size:12.5px}
.mt-num.strong{color:var(--ink); font-weight:600}
.mtable tbody tr:hover{background:var(--surface-2)}
.mtable tfoot td{border-top:1.5px solid var(--line); border-bottom:none; font-weight:700; color:var(--ink);
  padding-top:11px; background:var(--surface-2)}
.mtable tfoot td:first-child{font-size:12px}

/* tilt comparison */
.tc-add{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:none; border-radius:8px;
  padding:7px 12px; cursor:pointer; transition:.13s; font-family:inherit}
.tc-add:hover{filter:brightness(.97)}
.tc-add:disabled{opacity:.4; cursor:not-allowed}
.tc-list{display:flex; flex-direction:column; gap:8px}
.tc-row{display:flex; align-items:center; gap:14px; padding:8px 10px; border-radius:10px; transition:.13s}
.tc-row:hover{background:var(--surface-2)}
.tc-row.best{background:oklch(0.97 0.03 25)}
.tc-angle{display:flex; align-items:center; gap:2px; flex-shrink:0; width:78px;
  height:38px; padding:0 10px; background:var(--surface); border:1px solid var(--line); border-radius:9px}
.tc-row.best .tc-angle{border-color:oklch(0.7 0.18 25)}
.tc-angle input{width:38px; border:none; outline:none; background:none; font-size:14px; font-weight:600;
  color:var(--ink); font-family:var(--mono); -moz-appearance:textfield}
.tc-angle input::-webkit-outer-spin-button,.tc-angle input::-webkit-inner-spin-button{-webkit-appearance:none}
.tc-angle span{font-size:12px; color:var(--muted)}
.tc-bar{flex:1; height:10px; background:var(--surface-2); border-radius:6px; overflow:hidden; min-width:60px}
.tc-bar span{display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .4s ease}
.tc-row.best .tc-bar span{background:oklch(0.58 0.22 25)}
.tc-out{flex-shrink:0; width:122px; text-align:right; display:flex; flex-direction:column; gap:1px}
.tc-val{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--ink)}
.tc-val i{font-style:normal; font-size:10.5px; color:var(--muted); margin-left:3px; font-family:'Pretendard'}
.tc-val.max{color:oklch(0.55 0.22 25); font-weight:700}
.tc-delta{font-size:11px; color:var(--faint); font-family:var(--mono)}
.tc-row.best .tc-delta{color:oklch(0.55 0.22 25); font-weight:600}
.tc-del{flex-shrink:0; width:24px; height:24px; border:none; background:none; color:var(--faint);
  font-size:18px; line-height:1; cursor:pointer; border-radius:6px; transition:.12s}
.tc-del:hover{background:oklch(0.95 0.04 25); color:oklch(0.55 0.2 25)}
.tc-foot{display:flex; align-items:center; gap:6px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line-2); font-size:11.5px; color:var(--muted)}
.tc-best-key{color:oklch(0.55 0.22 25); font-weight:700; font-family:var(--mono)}

/* loading bar */
.loading-bar{height:2px; background:var(--line-2); border-radius:2px; overflow:hidden; margin-top:-8px}
.loading-bar span{display:block; height:100%; width:40%; background:var(--accent); border-radius:2px;
  animation:slide 1s infinite ease-in-out}
@keyframes slide{0%{margin-left:-40%}100%{margin-left:100%}}

@media (max-width:1080px){
  .layout{grid-template-columns:1fr}
  .panel{position:static}
  .lay-stacked .panel{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .weather-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .topbar{padding:12px 16px}
  .layout{padding:16px}
  .result-hero{flex-direction:column}
  .hero-kwp{border-left:none; border-top:1px solid rgba(255,255,255,.18); padding-left:0; padding-top:14px; text-align:left}
  .hero-value{font-size:38px}
  .metric-grid{grid-template-columns:1fr}
}

/* ---------- tweaks panel ---------- */
.tw-fab{position:fixed; right:22px; bottom:22px; width:46px; height:46px; border:none;
  border-radius:50%; background:var(--accent); box-shadow:0 6px 20px var(--ring);
  cursor:pointer; display:grid; place-items:center; z-index:60}
.tw-panel{position:fixed; right:22px; bottom:80px; width:248px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px oklch(0.4 0.02 260 / .18);
  padding:14px; z-index:60; display:flex; flex-direction:column; gap:10px; animation:pop .14s ease}
.tw-sec{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--muted); margin-top:4px}
.tw-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tw-label{font-size:12.5px; color:var(--ink-2); font-weight:600}
.tw-seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--line);
  border-radius:8px; padding:2px; gap:2px}
.tw-seg button{border:none; background:none; cursor:pointer; font-size:11.5px; font-weight:600;
  color:var(--muted); padding:5px 9px; border-radius:6px; font-family:inherit}
.tw-seg button.on{background:var(--surface); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tw-colors{display:flex; gap:6px}
.tw-color{width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer}
.tw-color.on{border-color:var(--ink)}

/* ---------- chart value labels ---------- */
.chart-val{font-size:9px; fill:var(--ink-2); font-family:var(--mono); font-weight:600}

/* ---------- topbar export actions ---------- */
.topbar-right{display:flex; align-items:center; gap:12px}
.topbar-actions{display:flex; gap:8px}
.exp-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:7px 12px; cursor:pointer; transition:.13s; font-family:inherit}
.exp-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.exp-btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- independent column scroll (sidebar, desktop) ---------- */
@media (min-width:1081px){
  .app.lay-sidebar{height:100vh; overflow:hidden}
  .lay-sidebar .layout{min-height:0; overflow:hidden; align-items:stretch}
  .lay-sidebar .panel{position:static; height:100%; overflow-y:auto; overflow-x:hidden; padding-right:8px; scrollbar-gutter:stable}
  .lay-sidebar .results{height:100%; overflow-y:auto; overflow-x:hidden; padding-right:8px; scrollbar-gutter:stable}
  .lay-sidebar .panel > *, .lay-sidebar .results > *{flex-shrink:0}
  .lay-sidebar .panel::-webkit-scrollbar,
  .lay-sidebar .results::-webkit-scrollbar{width:8px}
  .lay-sidebar .panel::-webkit-scrollbar-thumb,
  .lay-sidebar .results::-webkit-scrollbar-thumb{background:var(--line); border-radius:8px}
}

/* ---------- print / PDF ---------- */
@media print{
  @page{margin:8mm}
  html,body{font-size:9.5px}
  *{-webkit-print-color-adjust:exact!important; print-color-adjust:exact!important}
  .topbar{position:static; border:none; padding:0 0 6px}
  .topbar-nav, .topbar-actions, .tw-fab, .tw-panel, .loc-loading, .loading-bar, .tc-del{display:none!important}
  .app, .app.lay-sidebar{height:auto!important; overflow:visible!important}
  .layout{display:block!important; max-width:none; padding:0; gap:0}
  .lay-sidebar .panel, .lay-sidebar .results{height:auto!important; overflow:visible!important; padding:0}
  .panel{position:static!important; margin-bottom:8px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .results{margin-top:8px}
  .pgroup{padding:10px 12px; margin:0}
  .pgroup-title{margin-bottom:8px; padding-bottom:6px; font-size:11px}
  .pgroup-title em{font-size:9px}
  .field{margin-bottom:6px}
  .field-label{font-size:10px}
  .field-en{font-size:8.5px}
  .field-hint{font-size:9px}
  .numf{height:30px; padding:0 6px 0 9px; border-radius:6px}
  .numf input{font-size:11px}
  .numf-unit{font-size:9.5px}
  .numf-steps button{width:20px; height:16px; font-size:10px}
  .pgroup, .metric, .result-card, .weather, .result-hero, .revenue-hero, .revenue-params{break-inside:avoid}
  .proj-bar{display:none!important}
  .result-hero, .revenue-hero{padding:14px 18px}
  .hero-value{font-size:28px}
  .hero-value span{font-size:13px}
  .hero-label{font-size:10px}
  .hero-sub{font-size:10px; gap:6px}
  .hero-kwp{padding-left:14px}
  .hk-v{font-size:22px}
  .hk-l{font-size:10px}
  .hk-meta{font-size:9px}
  .weather{padding:10px 12px; gap:8px}
  .weather-now{gap:10px}
  .wn-icon{width:40px; height:40px; border-radius:10px}
  .wn-temp{font-size:22px}
  .wn-cond{font-size:10px}
  .wn-meta span{font-size:9.5px}
  .weather-stats{gap:6px; padding-top:8px}
  .ws-v{font-size:13px}
  .ws-k{font-size:9px}
  .rev-metrics, .yield-metrics{grid-template-columns:repeat(5,1fr)!important; gap:8px!important}
  .metric{padding:10px 11px; gap:8px}
  .metric-ic{width:28px; height:28px; border-radius:7px}
  .metric-ic svg{width:14px; height:14px}
  .metric-value{font-size:18px; margin-top:2px}
  .metric-unit{font-size:10px}
  .metric-label{font-size:9px}
  .metric-sub{font-size:8.5px}
  .result-card{padding:10px 12px}
  .rc-head{margin-bottom:10px}
  .rc-title{font-size:12px}
  .rc-title em{font-size:9.5px}
  .chart{max-height:200px}
  .chart-axis{font-size:8px}
  .chart-bar{width:3px}
  .chart-val{font-size:7px}
  .chart-foot{font-size:9.5px; gap:12px; margin-top:8px; padding-top:8px}
  .mtable{font-size:10px; min-width:auto}
  .mtable th, .mtable td{padding:4px 6px}
  .tc-list{gap:4px}
  .tc-row{padding:4px 6px; gap:8px}
  .tc-angle{width:60px; height:28px; padding:0 6px; border-radius:6px}
  .tc-angle input{font-size:11px; width:28px}
  .tc-bar{height:7px; min-width:40px}
  .tc-out{width:90px}
  .tc-val{font-size:12px}
  .tc-delta{font-size:9px}
  .revenue-params{padding:8px 12px; gap:10px}
  .rev-param-label{font-size:9.5px}
  .rev-param .numf{width:110px!important}
  .rev-chart{max-height:200px}
  .seg button{font-size:10px; padding:4px 8px}
  .kwp-readout{padding:8px 10px; margin-top:8px}
  .kwp-readout b{font-size:13px}
  .ss-trigger{height:30px; padding:0 8px; font-size:11px; border-radius:6px}
  .adv-toggle{font-size:11px}
  .adv-body{margin-top:8px; padding-top:8px}
  .grid2{gap:6px}
  /* ---- 수익분석 한 페이지 압축 ---- */
  .revenue{break-inside:avoid; page-break-inside:avoid}
  .revenue .revenue-hero{padding:8px 12px}
  .revenue .hero-value{font-size:22px}
  .revenue .hero-value span{font-size:11px}
  .revenue .hero-label{font-size:8.5px}
  .revenue .hero-sub{font-size:8.5px; gap:4px}
  .revenue .hero-kwp{padding-left:10px}
  .revenue .hk-v{font-size:18px}
  .revenue .hk-l{font-size:8.5px}
  .revenue .hk-meta{font-size:7.5px}
  .revenue .rev-metrics{gap:5px!important}
  .revenue .metric{padding:6px 8px; gap:4px}
  .revenue .metric-ic{width:22px; height:22px; border-radius:5px}
  .revenue .metric-ic svg{width:11px; height:11px}
  .revenue .metric-value{font-size:14px}
  .revenue .metric-unit{font-size:8.5px}
  .revenue .metric-label{font-size:7.5px}
  .revenue .metric-sub{font-size:7px}
  .revenue .revenue-params{padding:5px 10px; gap:6px}
  .revenue .rev-param-label{font-size:8px}
  .revenue .rev-param .numf{width:95px!important}
  .revenue .result-card{padding:6px 9px}
  .revenue .rc-head{margin-bottom:4px}
  .revenue .rc-title{font-size:10px}
  .revenue .rc-title em{font-size:8px}
  .revenue .mtable{font-size:8px}
  .revenue .mtable th, .revenue .mtable td{padding:2px 4px}
  .revenue .chart{max-height:130px}
  .revenue .chart-foot{font-size:8px; gap:8px; margin-top:4px; padding-top:4px}
  .revenue .rev-chart{max-height:130px}
}

/* ---------- project bar ---------- */
.proj-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.proj-new-btn{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:var(--muted);
  background:none; border:1.5px solid var(--line); border-radius:8px;
  padding:5px 9px; cursor:pointer; font-family:inherit; transition:.13s; flex-shrink:0;
}
.proj-new-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

.proj-name-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.proj-name-inp{
  flex:1; min-width:0; height:36px; padding:0 11px;
  background:var(--bg); border:1.5px solid var(--line); border-radius:9px;
  font-size:13px; font-family:inherit; color:var(--ink); transition:.13s;
}
.proj-name-inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); background:#fff}
.proj-name-inp::placeholder{color:var(--faint)}

.proj-save-btn{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  height:36px; padding:0 13px;
  background:var(--accent); color:#fff; border:none; border-radius:9px;
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:.13s;
}
.proj-save-btn:hover:not(:disabled){opacity:.85}
.proj-save-btn:disabled{opacity:.4; cursor:not-allowed}

.proj-load-row, .proj-snap-row{
  display:flex; align-items:center; gap:7px; margin-bottom:6px;
}
.proj-sel{
  flex:1; min-width:0; height:32px; padding:0 8px;
  background:var(--surface); border:1.5px solid var(--line); border-radius:8px;
  font-size:12.5px; font-family:inherit; color:var(--ink); cursor:pointer;
}
.proj-sel:focus{outline:none; border-color:var(--accent)}

.proj-del-btn{
  flex-shrink:0; width:28px; height:28px; display:grid; place-items:center;
  background:none; border:1.5px solid var(--line); border-radius:7px;
  color:var(--muted); cursor:pointer; transition:.13s;
}
.proj-del-btn:hover{border-color:oklch(0.58 0.18 25); color:oklch(0.58 0.18 25); background:oklch(0.97 0.02 25)}

.proj-snap-n{
  flex-shrink:0; font-size:11px; font-weight:600; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:6px;
  padding:2px 7px; white-space:nowrap;
}

/* ---------- topbar page nav ---------- */
.topbar-nav{
  display:flex; gap:2px;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:11px;
  padding:3px;
}
.tn-btn{
  display:flex; align-items:center; gap:7px;
  border:none; background:none; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--muted);
  padding:7px 18px; border-radius:8px; transition:.15s; font-family:inherit;
}
.tn-btn:hover{color:var(--ink); background:var(--surface-2)}
.tn-btn.on{background:var(--accent); color:#fff; box-shadow:0 2px 8px var(--ring)}

/* ---------- revenue ---------- */
.revenue{display:flex; flex-direction:column; gap:var(--gap); min-width:0}
.revenue-hero{
  display:flex; align-items:stretch; justify-content:space-between; gap:20px;
  background:linear-gradient(135deg, oklch(0.35 0.06 200), oklch(0.28 0.05 200));
  border-radius:var(--radius); padding:24px 28px; color:#fff; position:relative; overflow:hidden;
}
.revenue-hero::after{content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px;
  background:radial-gradient(circle, oklch(0.56 0.12 152), transparent 70%); opacity:.4}

.revenue-params{
  display:flex; gap:16px; flex-wrap:wrap;
  padding:14px 18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
/* ---------- revenue params highlight (전기요금/효율저하 핵심 입력) ---------- */
.hl-params{
  display:flex; gap:16px; flex-wrap:wrap;
  padding:18px 20px;
  background:linear-gradient(135deg, oklch(0.985 0.003 250), oklch(0.97 0.01 200 / .3));
  border:2px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:0 0 0 4px var(--ring), var(--shadow);
  position:relative;
}
.hl-params::before{
  content:"⚙️ 수익 계산 기준";
  position:absolute; top:-11px; left:16px;
  font-size:11px; font-weight:700; color:var(--accent);
  background:var(--surface); padding:0 8px;
  border-radius:4px; text-transform:uppercase; letter-spacing:0.04em;
}
.hl-param{
  flex:1; min-width:140px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  transition:.15s;
}
.hl-param:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
.hl-param .rev-param-label{font-size:12.5px}
.hl-param .rev-param-label em{font-size:10.5px}
.hl-param .numf{border-color:var(--accent-soft); height:40px}
.hl-param .numf input{font-weight:700; font-size:15px}

.rev-param{display:flex; flex-direction:column; gap:6px}
.rev-param-label{font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:baseline; gap:5px}
.rev-param-label em{font-size:10px; color:var(--faint); font-weight:500}

.rev-metrics .metric-grid{grid-template-columns:repeat(5,1fr)}

.rev-chart .rev-area{fill:oklch(0.56 0.12 152 / .08)}
.rev-chart .rev-line{fill:none; stroke:oklch(0.5 0.14 152); stroke-width:2.4}
.rev-chart .rev-dot{fill:var(--surface); stroke:oklch(0.5 0.14 152)}

@media (max-width:1080px){
  .topbar-nav{order:10; width:100%; justify-content:center}
  .topbar{flex-wrap:wrap; gap:8px}
}

/* ---------- hero capacity (상단 모듈 용량/수량) ---------- */
.hero-capacity{padding:var(--pad)}
.hc-top{display:flex; gap:14px; margin-bottom:16px}
.hc-block{flex:1; display:flex; flex-direction:column; gap:6px}
.hc-label{font-size:13px; font-weight:700; color:var(--ink-2); display:flex; align-items:baseline; gap:6px}
.hc-label em{font-size:11px; font-weight:500; color:var(--faint)}
.hc-block .numf{height:48px; border-radius:12px; padding:0 10px 0 14px}
.hc-block .numf input{font-size:18px; font-weight:700}
.hc-block .numf .numf-unit{font-size:13px}
.hc-result{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 0 6px; border-top:2px solid var(--accent-soft);
}
.hc-result-label{font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:baseline; gap:6px}
.hc-result-label em{font-size:10px; color:var(--faint); font-weight:500}
.hc-result-value{
  font-size:40px; font-weight:800; color:var(--accent); letter-spacing:-0.03em; line-height:1.1;
  font-family:var(--mono);
}
.hc-result-unit{font-size:18px; font-weight:600; color:var(--accent); opacity:.7; font-family:'Pretendard'; margin-left:4px}
.hc-result-meta{font-size:13px; color:var(--muted); font-weight:500}

/* ---------- revenue metrics 개선 ---------- */
.rev-metrics{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.rev-metrics .metric{padding:18px 16px; min-height:120px; flex-direction:column; gap:8px}
.rev-metrics .metric-ic{width:34px; height:34px; border-radius:9px}
.rev-metrics .metric-body{display:flex; flex-direction:column; gap:4px}
.rev-metrics .metric-value{font-size:22px; margin-top:0; line-height:1.2}
.rev-metrics .metric-unit{font-size:12px}
.rev-metrics .metric-label{font-size:11px; line-height:1.3}
.rev-metrics .metric-sub{font-size:10.5px; margin-top:2px; line-height:1.3; color:var(--muted)}

/* ---------- yield metrics 개선 (발전량 섹션) ---------- */
.yield-metrics{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.yield-metrics .metric{padding:18px 16px; min-height:120px; flex-direction:column; gap:8px}
.yield-metrics .metric-ic{width:34px; height:34px; border-radius:9px}
.yield-metrics .metric-body{display:flex; flex-direction:column; gap:4px}
.yield-metrics .metric-value{font-size:22px; margin-top:0; line-height:1.2}
.yield-metrics .metric-unit{font-size:12px}
.yield-metrics .metric-label{font-size:11px; line-height:1.3}
.yield-metrics .metric-sub{font-size:10.5px; margin-top:2px; line-height:1.3; color:var(--muted)}

@media (max-width:1080px){
  .hc-top{flex-direction:column; gap:10px}
  .hero-capacity{padding:16px}
  .hc-result-value{font-size:32px}
  .rev-metrics{grid-template-columns:repeat(2,1fr)}
  .yield-metrics{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .hc-result-value{font-size:28px}
  .rev-metrics{grid-template-columns:1fr}
  .yield-metrics{grid-template-columns:1fr}
}

/* ---------- revenue PDF 버튼 ---------- */
.rev-pdf-btn{
  display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border:none; border-radius:6px;
  background:var(--accent); color:#fff;
  font-size:12px; font-weight:600; cursor:pointer;
  margin-left:auto; flex-shrink:0; transition:opacity .15s
}
.rev-pdf-btn:hover{opacity:.85}