:root{font-family:Noto Sans KR,system-ui,sans-serif;color-scheme:light;--ink-primary: #1f2733;--ink-secondary: #5b6472;--ink-muted: #8b93a1;--surface: #ffffff;--surface-app: #f4f6f9;--border: #e5e8ee;--brand-navy: #16305a;--brand-navy-active: #1f4380;--brand-blue: #2f6fed;--brand-green: #22a06b;--brand-orange: #f59e0b;--status-good: #16a34a;--status-critical: #dc2626}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--surface-app);color:var(--ink-primary)}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-header{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border)}.app-header__brand{display:flex;align-items:center;gap:10px}.app-header__logo{display:inline-flex;color:var(--brand-blue)}.app-header__title{font-size:17px;font-weight:700;color:var(--ink-primary)}.app-header__right{display:flex;align-items:center;gap:16px}.app-header__user{font-size:13px;color:var(--ink-secondary)}.app-header__logout{border:none;background:var(--brand-navy);color:#fff;font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;cursor:pointer}.app-header__logout:hover{background:var(--brand-navy-active)}.app-body{flex:1;display:flex;min-height:0}.app-sidebar{width:220px;flex-shrink:0;background:var(--brand-navy);padding:20px 0}.app-sidebar nav ul{list-style:none;margin:0;padding:0}.app-sidebar nav a{display:block;padding:13px 24px;font-size:14px;font-weight:500;color:#ffffffd9;border-left:3px solid transparent}.app-sidebar nav a:hover{background:#ffffff0f}.app-sidebar nav a.is-active{background:#ffffff1f;border-left-color:var(--brand-blue);color:#fff}.app-content{flex:1;padding:24px;overflow-x:auto}.dashboard{display:flex;flex-direction:column;gap:20px}.dashboard__stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.dashboard__grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:20px;align-items:stretch}.dashboard__card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 24px}.dashboard__card--center-body{display:flex;flex-direction:column;justify-content:center}.dashboard__card--chart-fixed{height:292px;display:flex;flex-direction:column;overflow:hidden}.dashboard__card--chart-fixed .trend-chart,.dashboard__card--chart-fixed .hourly-chart{flex:1;min-height:0;display:flex;flex-direction:column}.dashboard__card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0}.dashboard__card-header h2{font-size:15px;font-weight:700;margin:0;color:var(--ink-primary)}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px 22px;display:flex;align-items:center;gap:14px}.stat-card__icon{width:42px;height:42px;border-radius:50%;background:var(--surface-app);color:var(--ink-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-card__label{font-size:13px;color:var(--ink-secondary);margin-bottom:4px}.stat-card__value{font-size:24px;font-weight:700;color:var(--ink-primary)}.stat-card__unit{font-size:13px;font-weight:500;color:var(--ink-secondary);margin-left:4px}.range-toggle{display:inline-flex;background:var(--surface-app);border-radius:999px;padding:3px;gap:2px}.range-toggle button{border:none;background:transparent;font-size:13px;font-weight:600;color:var(--ink-secondary);padding:6px 14px;border-radius:999px;cursor:pointer}.range-toggle button.is-active{background:var(--brand-blue);color:#fff}.trend-chart__svg-wrap,.hourly-chart__svg-wrap{position:relative}.dashboard__card--chart-fixed .trend-chart__svg-wrap,.dashboard__card--chart-fixed .hourly-chart__svg-wrap{flex:1;min-height:0}.trend-chart__svg,.hourly-chart__svg{width:100%;height:auto;display:block;overflow:visible}.dashboard__card--chart-fixed .trend-chart__svg,.dashboard__card--chart-fixed .hourly-chart__svg{height:100%}.trend-chart__grid-h{stroke:var(--border);stroke-width:1}.trend-chart__grid-v{stroke:var(--border);stroke-width:1;stroke-dasharray:3 4}.trend-chart__crosshair{stroke:var(--ink-muted);stroke-width:1;stroke-dasharray:3 4}.trend-chart__axis-label{font-size:11px;fill:var(--ink-muted)}.trend-chart__tooltip{position:absolute;transform:translate(-50%,-100%) translateY(-10px);background:var(--ink-primary);color:#fff;font-size:12px;padding:8px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;z-index:2;box-shadow:0 4px 12px #0000002e}.trend-chart__tooltip-title{font-weight:700;margin-bottom:4px}.trend-chart__tooltip-row{display:flex;align-items:center;gap:6px}.trend-chart__footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;flex-shrink:0}.trend-chart__legend{display:flex;gap:18px}.trend-chart__legend-item{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-secondary)}.trend-chart__legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block}.trend-chart__table-toggle{border:none;background:none;color:var(--brand-blue);font-size:12px;font-weight:600;cursor:pointer;padding:0}.trend-chart__table-wrap{overflow-y:auto}.dashboard__card--chart-fixed .trend-chart__table-wrap{flex:1;min-height:0}.trend-chart__table{width:100%;margin-top:14px;border-collapse:collapse;font-size:13px}.trend-chart__table th,.trend-chart__table td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:right}.trend-chart__table th:first-child,.trend-chart__table td:first-child{text-align:left;color:var(--ink-secondary)}.source-breakdown{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.source-breakdown__row{display:grid;grid-template-columns:70px 1fr 110px;align-items:center;gap:12px}.source-breakdown__label{font-size:13px;color:var(--ink-secondary)}.source-breakdown__track{height:10px;border-radius:999px;background:var(--surface-app);overflow:hidden;display:block}.source-breakdown__fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f59e0b,#fbbf24)}.source-breakdown__value{font-size:13px;font-weight:600;color:var(--ink-primary);text-align:right}.notice-table{width:100%;border-collapse:collapse;font-size:13px}.notice-table th{text-align:left;color:var(--ink-muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--border)}.notice-table td{padding:12px 6px;border-bottom:1px solid var(--border);color:var(--ink-primary)}.notice-table__title{max-width:260px}.notice-table__time{color:var(--ink-secondary);white-space:nowrap}.notice-table__status{color:var(--brand-blue);font-weight:600}.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px}.badge--blue{background:#e8f0fe;color:var(--brand-blue)}.badge--green{background:#e6f6ee;color:var(--brand-green)}.badge--purple{background:#f1ecfb;color:#7c5ce0}.badge--red{background:#fdeaea;color:var(--status-critical)}.service-usage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:12px}.service-usage__tile{border:1px solid var(--border);border-radius:10px;padding:14px 10px;text-align:center}.service-usage__icon{color:var(--brand-blue);display:flex;justify-content:center;margin-bottom:8px}.service-usage__label{font-size:12px;color:var(--ink-secondary);margin-bottom:6px}.service-usage__count{font-size:16px;font-weight:700;color:var(--ink-primary)}.service-usage__unit{font-size:11px;font-weight:500;color:var(--ink-secondary);margin-left:2px}.service-usage__delta{margin-top:4px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:2px}.service-usage__delta.is-up{color:var(--status-good)}.service-usage__delta.is-down{color:var(--status-critical)}