:root { --ink:#13223a; --muted:#708096; --line:#dce7f3; --blue:#0b66d4; --cyan:#48a6ff; --paper:#f4f8fc; --white:#fff; --yellow:#f8c84b; --shadow:0 14px 36px rgba(39,83,132,.09); }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',Arial,sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; } .topbar { min-height:76px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; color:#fff; background:#102a4b; } .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.1rem; } .bolt { display:grid; place-items:center; color:#102a4b; background:var(--yellow); width:28px; height:28px; border-radius:50%; font-size:1.55rem; line-height:1; } .topbar p { margin:0; color:#b9d0ec; font-size:.85rem; }
.page-shell { width:min(1180px,92vw); margin:0 auto; padding:36px 0 52px; } .hero-panel { display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:26px; } .eyebrow { color:var(--blue); font:700 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.09em; margin:0 0 9px; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:clamp(1.7rem,3.2vw,2.7rem); line-height:1.22; letter-spacing:-.05em; } h1 em { font-style:normal; color:var(--blue); } h2 { font-size:1.16rem; margin-bottom:0; letter-spacing:-.03em; } .notice { flex:0 1 338px; padding:12px 15px; border-left:3px solid var(--yellow); background:#fff9e9; color:#795d18; border-radius:0 9px 9px 0; font-size:.82rem; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; } .stat-card { min-height:150px; padding:20px; background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:13px; } .stat-card>span,.stat-card p { color:var(--muted); font-size:.77rem; } .stat-card strong { display:block; margin:10px 0 7px; font:800 clamp(1.35rem,2.3vw,1.8rem)/1.1 'DM Mono',monospace; letter-spacing:-.07em; } .stat-card strong small { font:700 .72rem 'Nanum Gothic',sans-serif; letter-spacing:0; } .stat-card p { margin:0; } .stat-card.accent { background:#e7f4ff; border-color:#c7e6ff; } .stat-card.highlight { background:#fff9e8; border-color:#f7e8ae; } .stat-card.dark { background:#11345d; border-color:#11345d; } .stat-card.dark>* { color:#fff; } .stat-card.dark p { color:#b8d4ef; }
.workspace-grid,.content-grid { display:grid; gap:20px; align-items:start; } .workspace-grid { grid-template-columns:1.5fr .9fr; margin-bottom:20px; } .content-grid { grid-template-columns:1.5fr .9fr; margin-bottom:20px; }.panel { background:#fff; padding:25px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); } .panel-head { display:flex; align-items:start; justify-content:space-between; gap:14px; margin-bottom:20px; } .text-button { color:var(--blue); background:none; border:0; font-size:.83rem; padding:3px; } .form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } label { display:grid; gap:7px; color:#506078; font-size:.78rem; font-weight:700; } label.wide { grid-column:span 2; } input,select { width:100%; min-height:45px; padding:10px 11px; border:1px solid #cddbea; border-radius:8px; color:var(--ink); background:#fbfdff; font-size:.9rem; outline:none; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,102,212,.12); } .calculation-preview { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:11px; padding:13px 0; margin-top:10px; color:var(--muted); border-bottom:1px solid var(--line); font-size:.73rem; } .calculation-preview strong { color:var(--blue); font:700 1.1rem 'DM Mono',monospace; } .calculation-preview span:last-child { text-align:right; } .form-error { min-height:20px; margin:9px 0 0; color:#bf3042; font-size:.78rem; } .primary-button,.outline-button { border-radius:8px; font-weight:700; } .primary-button { width:100%; border:0; padding:14px; background:var(--blue); color:#fff; box-shadow:0 6px 14px rgba(11,102,212,.23); } .primary-button span { margin-left:8px; font-size:1.1rem; } .outline-button { padding:9px 11px; background:#fff; color:var(--blue); border:1px solid #9ac9f5; font-size:.78rem; white-space:nowrap; } .panel-guide,.mini-note { color:var(--muted); font-size:.78rem; } .compact { margin-top:15px; } .saving-result { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:17px; padding:14px; background:#eef7ff; border-radius:9px; } .saving-result div+div { padding-left:12px; border-left:1px solid #cce5fc; } .saving-result span { display:block; color:var(--muted); font-size:.7rem; } .saving-result strong { display:block; margin-top:5px; color:#0752aa; font:700 1rem 'DM Mono',monospace; } .mini-note { margin:10px 0 0; }
.integration-panel { margin-bottom:20px; background:linear-gradient(115deg,#fff 0%,#f1f8ff 100%); }.connection-badge { padding:5px 9px; border-radius:99px; color:#627289; background:#edf2f7; font-size:.72rem; font-weight:700; white-space:nowrap; }.connection-badge.connected { color:#087742; background:#d9f6e5; }.connection-badge.error { color:#ad3042; background:#ffeaed; }.integration-form { display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px; align-items:end; }.integration-form label:nth-child(2) { grid-column:span 2; }.integration-actions { display:flex; gap:8px; align-items:center; }.integration-actions .primary-button { width:auto; padding:11px 14px; }.compact-primary { min-height:41px; font-size:.82rem; white-space:nowrap; }
.table-wrap { overflow-x:auto; } table { border-collapse:collapse; width:100%; min-width:600px; font-size:.8rem; } th { padding:0 10px 10px; color:var(--muted); text-align:left; font-size:.71rem; } td { padding:12px 10px; border-top:1px solid #e7eef6; } td.kwh { color:var(--blue); font:700 .82rem 'DM Mono',monospace; } .action-buttons { display:flex; gap:4px; } .icon-button { border:0; border-radius:5px; padding:5px 7px; color:var(--blue); background:#eef6ff; font-size:.73rem; } .icon-button.delete { color:#b42d40; background:#fff0f1; } .empty-state { padding:22px 10px; color:var(--muted); text-align:center; font-size:.83rem; } .ranking-list { list-style:none; padding:0; margin:0; counter-reset:rank; } .ranking-list li { counter-increment:rank; display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:8px; padding:12px 0; border-top:1px solid #e7eef6; font-size:.82rem; } .ranking-list li::before { content:counter(rank); display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:var(--blue); background:#eaf5ff; font:700 .69rem 'DM Mono',monospace; } .bar-track { height:5px; margin-top:5px; overflow:hidden; background:#ebf0f5; border-radius:99px; } .bar { display:block; height:100%; background:var(--cyan); border-radius:inherit; } .rank-value { color:var(--blue); font:700 .75rem 'DM Mono',monospace; } .month-label { color:var(--muted); font:700 .7rem 'DM Mono',monospace; }.chart-panel { padding-bottom:18px; }.chart-wrap { height:270px; } .rate-note { display:flex; gap:14px; padding:15px 18px; background:#e8f1fb; border-radius:10px; color:#486079; font-size:.77rem; } .rate-note strong { flex:none; color:#173c65; }.rate-note code { font-family:'DM Mono',monospace; } footer { padding:19px 5vw; background:#102a4b; color:#b6cce5; text-align:center; font-size:.72rem; }
@media (max-width:900px) { .stats-grid { grid-template-columns:repeat(2,1fr); } .workspace-grid,.content-grid { grid-template-columns:1fr; }.integration-form { grid-template-columns:1fr 1fr; }.integration-form label:nth-child(2) { grid-column:auto; } } @media (max-width:620px) { .topbar { min-height:65px; }.topbar p { display:none; }.page-shell { width:min(94vw,560px); padding-top:25px; }.hero-panel { align-items:start; flex-direction:column; margin-bottom:20px; }.notice { flex-basis:auto; width:100%; }.stats-grid { gap:9px; }.stat-card { min-height:122px; padding:14px; }.stat-card strong { font-size:1.35rem; }.panel { padding:18px 15px; }.form-grid,.integration-form { grid-template-columns:1fr; gap:11px; }.integration-form label:nth-child(2) { grid-column:auto; }.integration-actions { flex-direction:column; align-items:stretch; }.integration-actions .primary-button { width:100%; }.calculation-preview { grid-template-columns:1fr auto; }.calculation-preview span:last-child { display:none; }.panel-head { margin-bottom:17px; }.chart-wrap { height:220px; }.rate-note { flex-direction:column; gap:5px; } }