@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
/* PRAS Design System v1 — 공용 토큰 (TAMRA 기준)
   ── 파스텔 회색+세이지 그린 리테마 ──
   simulator-kepco.co.kr 첫 화면(허브)에서 PRAS-TOU 카드에 이미 쓰고 있던
   --tou-brand 계열(#4c8067 세이지 그린)을 이 앱 전체의 주 색상으로 확장한다.
   기존 --navy/--blue(남색·파랑, PRAS-DER 색)는 여기서는 쓰지 않고, 아래에서
   같은 변수 이름은 유지하되 값만 세이지 계열로 바꿔 버튼·활성탭·포커스 링 등
   모든 사용처가 자동으로 새 색을 따르게 한다 — PRAS-DER(파랑)·CARE-Jeju(주황)
   와 뚜렷이 구분되는 세 번째 색 정체성이 된다. 차트 선 색만 별도 토큰
   (--chart-line)으로 분리했다 — dataviz 스킬 validate_palette.js로 확인한 결과
   브랜드색 자체(#4c8067·#356249)는 채도가 낮아 데이터 선으로 쓰면 "회색으로
   보임" 판정(chroma floor 미달)이 나와, 같은 색상군에서 채도를 높인 값
   (#1f8a5f, 대비·채도 기준 모두 통과)을 차트 전용으로 따로 둔다. */
:root{
  --navy:#2f5142; --blue:#3f7259;
  --tou-brand:#4c8067; --tou-brand-dark:#356249; --tou-brand-soft:#eaf1ec; --tou-brand-line:#c9dbcf;
  --chart-line:#1f8a5f;
  --nav-dark:#1e332a;
  --bg:#f2f5f2;--panel:#fff;--line:#d9e3da;--text:#16241d;--muted:#5f7267;--green:#1f8a5f;--red:#bf3b2d;--off:#c8dccf;--mid:#ffd98a;--peak:#f3a0a0;--warning:#fbf3df
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;color:var(--text);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}
/* ── 상단 2단 구조(PRAS-DER·CARE-Jeju와 통일) ── 얇은 다크 톤 .topbar(브랜드 +
   "처음으로" 버튼) + 그 아래 그라디언트 .hero(제목·부제). 배치·크기·여백은
   기존 두 시뮬레이터와 동일하게 맞추고 색만 PRAS-TOU 고유 세이지 그린을 쓴다. */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:26px;height:52px;padding:0 30px;background:var(--nav-dark);color:#eaf1ec;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.site-brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto;color:#fff;font-size:15px;font-weight:800;letter-spacing:-.02em;text-decoration:none}
.site-brand span{color:var(--tou-brand);font-size:11px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border:1px solid rgba(76,128,103,.45);border-radius:5px}
.site-home-btn{margin-left:auto;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;color:#c3d3c9;font-size:12px;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;border:1px solid rgba(255,255,255,.14)}
.site-home-btn svg{width:15px;height:15px;flex:0 0 auto}
.site-home-btn:hover{color:#eaf1ec;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
.site-home-btn:focus-visible{outline:2px solid var(--tou-brand);outline-offset:2px}
.hero{background:radial-gradient(circle at 78% 15%,rgba(76,128,103,.24),transparent 29%),linear-gradient(118deg,#152720 0%,#203c30 62%,#2c5241 100%);color:#fff;padding:22px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center}.hero h1{margin:0 0 6px;font-size:clamp(23px,2.5vw,33px);line-height:1.28;letter-spacing:-.04em;font-weight:750}.hero h1 span{font-size:13px;font-weight:500}.hero p{margin:0;color:#cfe0d4;font-size:14px;font-weight:500;letter-spacing:-.01em}.hero code{color:#fff}.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
main{max-width:1480px;margin:auto;padding:18px}.panel,.kpi{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 3px 12px rgba(30,51,42,.04)}.panel{padding:16px;margin-bottom:14px}.status-panel{display:flex;justify-content:space-between;gap:18px;align-items:center}.eyebrow{font-size:11px;color:var(--muted);text-transform:uppercase}.status{font-weight:800;font-size:18px;margin:3px 0}.status.ok{color:var(--green)}.status.error{color:var(--red)}.status-guide{background:var(--tou-brand-soft);border-radius:8px;padding:10px 12px;font-size:12px}
h2{font-size:17px;margin:0 0 12px}h3{font-size:14px;margin:15px 0 8px;color:var(--navy)}.muted{font-size:12px;color:var(--muted);line-height:1.55}
.control-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:10px}.control-grid label,.day-row label{font-size:11px;color:var(--muted)}select,input[type=number]{width:100%;border:1px solid #c4d2c8;border-radius:7px;background:#fff;padding:8px;color:var(--text);margin-top:5px}input[type=file]{display:none}
.btn{border:1px solid #b7c6bb;background:#fff;color:var(--navy);border-radius:7px;padding:8px 11px;font-weight:700;cursor:pointer;display:inline-block}.btn.primary{background:var(--tou-brand);color:#fff;border-color:var(--tou-brand)}.btn:hover{filter:brightness(.97)}.button-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.button-row.compact{margin-top:10px}
.callout{background:var(--tou-brand-soft);border-left:4px solid var(--tou-brand);padding:10px 12px;font-size:12px;line-height:1.55;margin-top:10px}.callout.warning{background:var(--warning);border-left-color:#e3a42f}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:10px;margin-bottom:14px}.kpi{padding:14px}.kpi span{display:block;font-size:11px;color:var(--muted);margin-bottom:7px}.kpi strong{display:block;font-size:20px}.kpi>small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.pos{color:var(--green)!important}.neg{color:var(--red)!important}
/* PRAS-DER·CARE-Jeju의 metric-card와 동일한 패턴 — strong 안에 중첩된
   small(단위)만 숫자보다 작은 글씨로 그 옆에 붙인다. 위 ".kpi>small"은
   strong의 형제로 오는 기존 캡션(예: #kPeriod, "기본요금 제외")에만 적용되고
   strong 내부에 새로 넣은 단위 small에는 영향이 없도록 자식결합자(>)로
   범위를 좁혔다. */
.kpi strong small{display:inline;font-size:12px;font-weight:600;margin-left:3px;color:var(--muted)}
/* "4. 요일별 평균 부하곡선"을 왼쪽 칸(2·3번)에 가둬 두지 않고 화면 오른쪽
   끝까지 꽉 차게 보여 달라는 요청 — grid-template-areas로 1행은 기존처럼
   좌(2·3번)/우(5~8번) 2열, 2행은 4번 패널 하나가 두 열을 모두 차지("full")
   하도록 만든다. (4번 패널의 마크업 위치는 이제 3번 바로 뒤, aside보다
   앞이다 — DOM 순서와 시각적 순서를 일치시키기 위해서다. grid-area 이름
   기반 배치라 마크업 순서가 바뀌어도 화면에는 그대로 "1행 좌/우, 2행
   전체 폭"으로 보인다.) */
.layout{display:grid;grid-template-columns:minmax(700px,1.2fr) minmax(470px,.8fr);grid-template-areas:"left aside" "full full";gap:14px;align-items:stretch}
/* 왼쪽 칸(2·3번)과 오른쪽 칸(5·6·7·8번)의 세로 높이를 맞춰 달라는 요청 —
   내용 분량이 서로 달라 자연 높이가 다르므로, 두 칸 모두 flex column으로
   만들어 grid가 늘려준 칸 높이(align-items:stretch)를 그대로 채우게 하고,
   각 칸의 마지막 패널(3번 "시간대별 단가 조정", 8번 "계산 범위")이
   남는 세로 공간을 흡수(flex:1 1 auto)하도록 한다 — 패널 사이 간격/디자인은
   그대로 두고 마지막 패널만 아래쪽 여백이 늘어나는 방식으로 자연스럽게
   높이가 같아진다. */
.layout-left{grid-area:left;display:flex;flex-direction:column}
.layout-left>.panel:last-child{flex:1 1 auto}
.layout>aside{grid-area:aside;display:flex;flex-direction:column}
.layout>aside>.panel:last-child{flex:1 1 auto}
.layout-full{grid-area:full}
.tab-row,.day-row,.legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.day-row{justify-content:space-between;margin:9px 0}.tab{border:1px solid #bccbc0;background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer}.tab.active{background:var(--tou-brand);color:#fff}.check{display:flex!important;align-items:center;gap:6px}.check input{width:auto;margin:0}
.legend{font-size:11px;color:var(--muted);margin:8px 0}.legend i{width:12px;height:12px;display:inline-block;border-radius:3px;margin-right:4px}.legend .off{background:var(--off)}.legend .mid{background:var(--mid)}.legend .peak{background:var(--peak)}
.hour-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}.hour{border:1px solid #c9d6cd;border-radius:7px;padding:7px 2px;text-align:center;cursor:pointer;font-size:11px;user-select:none}.hour b{display:block;font-size:12px;margin-bottom:3px}.hour.off,.mini.off{background:var(--off)}.hour.mid,.mini.mid{background:var(--mid)}.hour.peak,.mini.peak{background:var(--peak)}
.scroll{overflow:auto}.schedule-compare{display:grid;grid-template-columns:88px repeat(24,1fr);gap:2px;min-width:900px;align-items:center}.schedule-compare .label{font-size:11px;font-weight:700}.mini{height:22px;line-height:22px;text-align:center;border-radius:2px;font-size:8px}
.rate-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.table{width:100%;border-collapse:collapse;font-size:12px}.table th,.table td{border:1px solid #dde6e0;padding:7px;text-align:right}.table th{background:#f4f8f5;color:var(--muted)}.table th:first-child,.table td:first-child{text-align:left}
/* 기준안 단가(텍스트만 있는 td)와 시나리오 단가(td 안에 input이 있는 td)는
   원래 셀 안쪽 여백이 서로 달라(입력칸 자체의 padding:5px가 td의 padding:7px에
   더해짐) 같은 계절 수·같은 열 수인데도 표 전체 높이가 달라지는 문제가 있었다 —
   input이 든 td는 세로 padding을 없애고, input 자체가 fieldset 없는 셀 높이를
   그대로 채우도록 폭 100%·투명 배경으로 바꿔 기준안 표의 텍스트 행 높이와
   맞춘다(box-sizing:border-box로 border-width까지 포함해 폭 계산). */
.table td:has(input){padding-top:0;padding-bottom:0}
.table input{box-sizing:border-box;width:100%;height:100%;padding:7px;margin:0;border:none;background:transparent;text-align:right;font:inherit;color:inherit}
.table input:focus{outline:2px solid var(--tou-brand);outline-offset:-2px;background:#fff}
.chart{width:100%;height:285px;border:1px solid var(--line);border-radius:9px;background:#fff}
.decomp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.decomp>div{border:1px solid var(--line);border-radius:9px;padding:10px}.decomp span{display:block;font-size:11px;color:var(--muted)}.decomp strong{display:block;font-size:16px;margin-top:5px}.notes{margin:0;padding-left:19px;font-size:12px;color:var(--muted);line-height:1.7}code{font-family:Consolas,monospace}
/* 화면 폭이 좁아져 1열로 쌓일 때도 2 → 3 → 4 → 5~8 순서를 유지해 달라는
   요청 — grid-template-areas 순서를 "left" "full" "aside"로 바꿔 4번
   패널(.layout-full)이 3번 바로 다음, 5~8번(aside)보다 먼저 오도록 한다. */
@media(max-width:1150px){.layout{grid-template-columns:1fr;grid-template-areas:"left" "full" "aside"}.layout-left>.panel:last-child,.layout>aside>.panel:last-child{flex:none}.control-grid{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.hero{align-items:flex-start;flex-direction:column}.control-grid{grid-template-columns:1fr}.kpi-grid{grid-template-columns:1fr 1fr}.rate-layout{grid-template-columns:1fr}.hour-grid{grid-template-columns:repeat(6,1fr)}main{padding:9px}}

/* v0.3.0 additions */
.chart-controls{
  display:grid;
  grid-template-columns:minmax(170px,1.2fr) minmax(150px,1fr) minmax(150px,1fr) auto;
  gap:9px;
  align-items:end;
  margin:8px 0 5px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#f5f8f6;
}
.chart-controls label{
  font-size:11px;
  color:var(--muted);
}
.chart-controls select,
.chart-controls input{
  margin-top:5px;
}
.chart-controls .btn{
  height:36px;
}
.chart-axis-info{
  margin:4px 0 8px;
}
select:disabled,
input:disabled{
  background:#edf2ee;
  color:#7c8c81;
  cursor:not-allowed;
}
@media(max-width:900px){
  .chart-controls{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .chart-controls{
    grid-template-columns:1fr;
  }
}


/* v0.3.1 header simplification */
.hero{
  display:block;
}
.hero .english-title{
  margin:4px 0 0;
  color:#cfe0d4;
  font-size:14px;
  font-weight:500;
  letter-spacing:-.01em;
}


/* Weekend discount eligibility */
.check.disabled{
  opacity:.48;
  cursor:not-allowed;
}
.check.disabled input{
  cursor:not-allowed;
}


/* Day-type average load curve */
.graph-day-tabs{
  margin:0 0 8px;
}
.graph-day-info{
  margin-bottom:10px;
}

/* Overall load-curve tab */
.graph-day-tabs .tab[data-graph-day="전체"]{
  font-weight:800;
}

.calibration-check{
  padding:8px 10px;
  border:1px solid #b7c9bd;
  border-radius:7px;
  background:#f4f8f5;
  color:var(--navy)!important;
  font-weight:700;
}

/* v0.5.0 regional/category expansion */
.control-grid{grid-template-columns:repeat(5,minmax(155px,1fr))}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.rate-note{font-size:11px;color:var(--muted);margin:6px 0 0}
@media(max-width:1300px){.control-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.control-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.control-grid{grid-template-columns:1fr}}

/* v0.5.1 mobile responsive layout --------------------------------------- */
html,body{max-width:100%;overflow-x:hidden}
main,.layout,.layout>div,aside,.panel,.kpi{min-width:0}

/* Schedule comparison: no nested horizontal scrollbar */
.scroll{overflow:visible}
.schedule-compare{display:block;min-width:0;width:100%}
.schedule-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:start;margin:7px 0}
.schedule-label{font-size:11px;font-weight:800;color:var(--navy);padding-top:18px;white-space:nowrap}
.schedule-hours{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;min-width:0}
.schedule-cell{min-width:0;text-align:center}
.schedule-cell>span{display:block;font-size:8px;line-height:15px;color:var(--muted)}
.schedule-cell .mini{width:100%;min-width:0;height:23px;line-height:23px}

/* Prevent tables and KPI values from forcing the viewport wider */
.table{table-layout:fixed;max-width:100%}
.table th,.table td{min-width:0;overflow-wrap:anywhere;word-break:keep-all}
.kpi,.kpi strong,.callout,.notes li{min-width:0;overflow-wrap:anywhere}
.rate-layout>div{min-width:0}

@media(max-width:720px){
  .hero{padding:17px 14px}
  .hero h1{font-size:21px;line-height:1.3}
  .hero .english-title{font-size:11px;line-height:1.45}
  main{padding:8px}
  .panel{padding:12px;margin-bottom:10px;border-radius:10px}
  h2{font-size:15px;margin-bottom:10px}
  h3{font-size:13px;margin-top:12px}

  /* Analysis controls: one clean column on phones */
  .control-grid{grid-template-columns:1fr!important;gap:7px}
  .control-grid label,.day-row label{font-size:10.5px}
  select,input[type=number]{padding:9px 8px;margin-top:4px}

  /* Action row becomes a stable two-column grid */
  .button-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
  .button-row .btn,.button-row .check{width:100%;min-width:0;justify-content:center;text-align:center}
  .button-row.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn{padding:9px 7px;font-size:11px;white-space:normal;line-height:1.25}
  .calibration-check{font-size:11px;min-height:38px}

  /* KPI cards stay readable without exceeding viewport */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}
  .kpi{padding:11px}
  .kpi span{font-size:10px;margin-bottom:5px}
  .kpi strong{font-size:16px;line-height:1.25}
  .kpi>small{font-size:9.5px}
  .kpi strong small{font-size:10px}

  /* Tabs use the available width instead of wrapping unpredictably */
  #seasonTabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #graphDayTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .tab{width:100%;padding:7px 4px;font-size:10.5px;white-space:nowrap}

  .day-row{display:grid;grid-template-columns:1fr;gap:8px;align-items:stretch}
  .day-row .check{padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:#f5f8f6;color:var(--text)}

  .legend{gap:10px;margin:7px 0;font-size:10px}
  .hour-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .hour{padding:6px 1px;font-size:9px;border-radius:6px}
  .hour b{font-size:9px;margin-bottom:2px}

  /* Time comparison wraps by 6 hours, eliminating horizontal scrolling */
  .schedule-row{grid-template-columns:1fr;gap:3px;margin:9px 0 12px}
  .schedule-label{padding-top:0;font-size:11px}
  .schedule-hours{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .schedule-cell>span{font-size:9px;line-height:16px}
  .schedule-cell .mini{height:25px;line-height:25px;font-size:9px;border-radius:4px}

  /* Rate tables stack and shrink inputs to cells */
  .rate-layout{grid-template-columns:1fr;gap:10px}
  .table{font-size:10.5px}
  .table th,.table td{padding:6px 4px;line-height:1.25}
  .table input{width:100%;min-width:0;padding:5px 2px;font-size:10.5px}

  /* Chart controls remain compact and never overflow */
  .chart-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px}
  .chart-controls .btn{height:auto;min-height:36px}
  .chart{height:235px}
  .graph-day-info,.chart-axis-info,.muted{font-size:10.5px}

  /* Result decomposition uses cards instead of cramped 3-column cells */
  .decomp{grid-template-columns:1fr;gap:6px}
  .decomp>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px}
  .decomp span{font-size:10.5px}
  .decomp strong{font-size:14px;margin-top:0;text-align:right}
  .notes{font-size:10.5px;line-height:1.6;padding-left:17px}
}

@media(max-width:430px){
  .button-row,.button-row.compact{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  #graphDayTabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-controls{grid-template-columns:1fr}
  .chart{height:220px}
}

@media(max-width:340px){
  .kpi-grid{grid-template-columns:1fr}
  .hour-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .schedule-hours{grid-template-columns:repeat(4,minmax(0,1fr))}
}