/* 프로젝트 공통 스타일 — Basecoat(자립형 CDN) 위에 레이아웃만 보강한다.
   Tailwind 브라우저 런타임을 쓰지 않으므로(=preflight 충돌 방지), 레이아웃 유틸은
   여기서 직접 정의한다. 컴포넌트 룩(.card/.btn/.input/.table)은 Basecoat 가 담당. */

:root {
  font-family: "SUIT Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: var(--background);
  color: var(--foreground);
  margin: 0;
}

/* ---- 레이아웃 ---- */
.container {
  max-width: 64rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.topbar { border-bottom: 1px solid var(--border); }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
}
.brand { font-weight: 600; }
.nav { display: flex; align-items: center; gap: 0.25rem; }

.content { padding-top: 1.5rem; padding-bottom: 2rem; }

.page-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 1rem; }

/* 카드 사이 간격 */
.stack > * + * { margin-top: 1.5rem; }

/* 입력+버튼 한 줄 */
.row { display: flex; gap: 0.5rem; align-items: center; }

/* 카드 footer 버튼 간격 (Basecoat footer 는 flex 이지만 gap 미지정) */
.card > footer { gap: 0.5rem; }
/* footer 정렬 모디파이어 (Basecoat 는 justify-content 미제공) */
.card > footer.end { justify-content: flex-end; }
.card > footer.between { justify-content: space-between; }

/* 상태 정의 목록 (라벨 | 값 2열) */
.status-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 0;
}
.status-grid dt { color: var(--muted-foreground); }
.status-grid dd { margin: 0; }

/* ---- 보조 유틸 ---- */
.w-full { width: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.text-muted { color: var(--muted-foreground); }

/* 기록 테이블 행 클릭 */
#runs tr { cursor: pointer; }
#runs tr:hover { background: var(--muted); }

/* ---- 발전 예측 페이지 ---- */
/* 입력 폼 그리드 (좁은 화면은 1열) */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
}
@media (max-width: 40rem) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field label { color: var(--muted-foreground); font-size: 0.875rem; }

/* echarts 컨테이너 */
#chart { width: 100%; height: 360px; margin: 1rem 0; }

/* 모델 토글 + 통계방식 한 줄 배치 */
.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0.5rem 0;
}

/* 모델 on/off 토글 */
.toggles { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.toggles label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* 인라인 통계방식 선택 */
.stat-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
.stat-inline select.input { width: auto; cursor: pointer; }

/* 주소 검색 결과 목록 */
.addr-results { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 16rem; overflow: auto; }
.addr-results li {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  margin-bottom: 0.35rem;
  cursor: pointer;
}
.addr-results li:hover { background: var(--muted); }
.addr-results .place { font-weight: 600; }
.addr-results .addr { color: var(--muted-foreground); font-size: 0.875rem; }

/* 설정부와 차트/표 구분 (행 마진 + 구분선) */
.result-body { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

/* 주요 지표 요약(차트 상단) */
.summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 40rem) { .summary { grid-template-columns: repeat(2, 1fr); } }
.summary-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.summary-label { color: var(--muted-foreground); font-size: 0.8125rem; }
.summary-value { font-size: 1.375rem; font-weight: 600; margin-top: 0.125rem; }
.summary-sub { color: var(--muted-foreground); font-size: 0.75rem; margin-top: 0.125rem; }

/* 네이티브 select 를 .input 룩에 맞춤 */
select.input { cursor: pointer; }

/* 결과 표 우측 정렬(수치 열) */
#result-table td.num, #result-table th.num { text-align: right; }
/* 통계 열 강조 */
#result-table td.stat, #result-table th.stat { font-weight: 600; }
/* 표 단위 표기 (우상단) */
.table-cap { display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }
.table-unit { font-size: 0.8125rem; }
/* 예보모델 발표시각 — 표 하단 배치 */
.model-meta { color: var(--muted-foreground); font-size: 0.8125rem; margin: 1rem 0 0; }

/* 모달: 네이티브 <dialog> 중앙 정렬 (UA 기본은 좌상단으로 붙을 수 있음).
   dialog 자체는 투명 래퍼로 두고 내부 .card 가 박스 룩을 담당한다. */
dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 32rem;
  width: calc(100% - 2rem);
  padding: 0;
  border: 0;
  background: transparent;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

/* CSV 다운로드 모달: 표 형태 미리보기를 위해 폭을 넓힘 */
#csv-dialog { max-width: 44rem; }
/* CSV 미리보기 — 등폭 글꼴, 줄바꿈 없이 가로 스크롤 */
.csv-preview {
  width: 100%;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.8125rem;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}