/* 흑백 미니멀 + pill 지오메트리 + 한글 조정값 (DESIGN.md) */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 속성 전역 보증: UA 기본 [hidden] 스타일은 HTML 네임스페이스 전용이라
   SVG(<g> 등) 요소에는 적용되지 않는다. 모든 네임스페이스에서 확실히 숨긴다. */
[hidden] { display: none !important; }

:root {
  --black: #000000;
  --white: #ffffff;
  --glass-dark: rgba(0, 0, 0, 0.08);
  --series: #2a78d6;      /* 차트 데이터 전용 */
  --status-bad: #d03b3b;  /* 상태 아이콘 전용 (색 단독 사용 금지) */
  --status-good: #0ca30c;
}

html { font-size: 16px; }
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, system-ui,
    "Segoe UI", "Malgun Gothic", sans-serif;
  font-weight: 340;
  font-kerning: normal;
  font-feature-settings: "kern";
  line-height: 1.55;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

main { max-width: 480px; margin: 0 auto; padding: 8px 16px 48px; }

/* ---- 상단바 ---- */
.topbar {
  max-width: 480px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.brand {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-size: 19px; font-weight: 700; color: var(--black); text-decoration: none;
  white-space: nowrap; flex: none;
}
.brand-mark { display: block; flex-shrink: 0; width: 26px; height: 26px; }
@media (max-width: 400px) {
  .brand { font-size: 16px; gap: 5px; letter-spacing: -0.01em; }
  .brand-mark { width: 23px; height: 23px; }
  .navlink { padding: 8px 12px 10px; }
}
/* 좁은 폭에서는 탭바가 내부 가로 스크롤로 흡수한다 (DESIGN.md 4절:
   모바일 탭 가로 스크롤 허용·줄바꿈 금지). 탭 개수가 늘어도 문서 오버플로 없음. */
.topbar nav {
  display: flex; gap: 4px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.navlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px 10px;
  border-radius: 50px; color: var(--black); text-decoration: none;
  font-size: 15px; font-weight: 480; line-height: 1;
  white-space: nowrap; flex: none;
}
.navlink.active { background: var(--black); color: var(--white); }

/* ---- 포커스: dashed 시그니처 ---- */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px dashed var(--black); outline-offset: 2px;
}

/* ---- 숫자 ---- */
.num { font-variant-numeric: tabular-nums; }

/* ---- 카드 ---- */
.card {
  background: var(--white); border: 1px solid var(--glass-dark);
  border-radius: 8px; padding: 16px; margin-bottom: 12px;
}
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }

/* ---- KPI ---- */
.kpi-label { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--black); }
.kpi-value { font-size: 34px; font-weight: 540; line-height: 1.15; letter-spacing: -0.02em; }
.kpi-sub { font-size: 13px; font-weight: 400; line-height: 1.5; }
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 히어로 2열: 오늘 발전량 + 오늘 예상 수익 (동일 위계).
   D9 패턴 — 숫자 크게(32px, 360px 2열 하한) + 단위 작게(14px) */
.kpi-hero { display: flex; justify-content: space-between; gap: 8px; }
.kpi-hero .kpi-value { font-size: 32px; }
.kpi-hero .unit { font-size: 14px; font-weight: 400; }
.kpi-mini .kpi-value { font-size: 20px; line-height: 1.4; }
/* 수익 데이터 값 전용 컬러 (DESIGN: 컬러는 콘텐츠·데이터에만 허용) */
.income-value { color: #d03b3b; }

/* ---- 버튼 ---- */
button, .btn {
  font: inherit; font-size: 15px; font-weight: 480; line-height: 1;
  min-height: 44px; min-width: 44px; padding: 8px 18px 10px;
  border-radius: 50px; border: none; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-solid { background: var(--black); color: var(--white); }
.btn-glass { background: var(--glass-dark); color: var(--black); }
button:active, .btn:active { transform: scale(0.97); }
button[disabled] { opacity: 0.5; cursor: default; }
.btn-disabled { opacity: 0.5; pointer-events: none; }

/* ---- 날짜 탐색 (대시보드) ---- */
.date-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.date-nav .date-form { flex: 1; min-width: 150px; }
.date-nav input[type="date"] {
  width: 100%; font: inherit; font-size: 15px; min-height: 44px;
  padding: 8px 14px 10px; border: 1px solid var(--glass-dark);
  border-radius: 50px; background: var(--white); color: var(--black);
}

/* ---- 통합 차트 토글 (데이터 × 기간) ---- */
.combo-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- 상태 배지 (색+아이콘+텍스트 병행) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 50px; padding: 4px 12px 6px; font-size: 13px; font-weight: 480;
  background: var(--glass-dark); color: var(--black); line-height: 1.5;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge-ok .dot { background: var(--status-good); }
.badge-bad { background: var(--black); color: var(--white); }
.badge-bad .dot { background: var(--status-bad); }
a.badge { text-decoration: none; min-height: 44px; }

/* ---- 메타 행 (갱신 시각 + 새로고침) ---- */
.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 4px 0 12px;
}
.meta-text { font-size: 13px; font-weight: 400; line-height: 1.5; }

/* ---- 발전소 카드 링크 ---- */
.site-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--glass-dark); border-radius: 8px; padding: 16px;
  margin-bottom: 12px; color: var(--black); text-decoration: none; min-height: 44px;
}
.site-card .name { font-size: 16px; font-weight: 700; }
.site-card .value { font-size: 20px; font-weight: 540; line-height: 1.4; }
.site-card .arrow { font-size: 18px; flex: none; }

/* ---- pill 탭 ---- */
.tabs {
  display: flex; gap: 4px; background: var(--glass-dark);
  border-radius: 50px; padding: 4px; width: max-content; margin-bottom: 12px;
}
.tab {
  border-radius: 50px; padding: 8px 18px 10px; min-height: 44px;
  background: transparent; color: var(--black); font-weight: 480;
}
.tab[aria-selected="true"] { background: var(--black); color: var(--white); }

/* ---- 차트 ---- */
/* 차트 범례 (대시보드 비교 곡선 · REC BI 공용).
   실선 시리즈는 원, 점선 비교 곡선은 같은 점선 패턴의 짧은 선으로 표시한다 */
.chart-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 400; line-height: 1.5;
}
.dot-sw {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex: none;
}
.dash-sw {
  width: 14px; height: 0; display: inline-block; flex: none;
  border-top: 2px dashed currentColor;
}
.chart-svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.chart-caption { font-size: 13px; font-weight: 400; line-height: 1.5; min-height: 22px; margin-top: 4px; }
/* 비교 곡선이 있는 차트는 탭 값이 좁은 화면에서 2줄이 된다.
   미리 2줄 높이를 잡아 탭할 때 아래 내용이 밀리지 않게 한다 */
.chart-caption-2line { min-height: 40px; }

/* ---- 로그인 (비밀번호 1개) ---- */
/* 로그인 전에는 갈 수 있는 곳이 없으니 상단 내비를 숨긴다 */
.login-page .topbar nav { display: none; }
.login-card { max-width: 420px; margin: 24px auto 0; }
.login-card .page-title { margin-bottom: 4px; }
.login-card form { margin-top: 16px; }
.login-submit { width: 100%; margin-top: 8px; }

/* ---- 입력 폼 ---- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 14px; font-weight: 540; margin-bottom: 4px; }
.field input {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px;
  border: 1px solid var(--black); border-radius: 8px; background: var(--white);
  min-height: 44px;
}
.field input:focus { outline: 2px dashed var(--black); outline-offset: 1px; border-color: transparent; }
/* 체크박스 행: 라벨이 체크박스를 감싸 행 전체가 탭 타깃(44px+)이 되게 한다.
   컨테이너가 아닌 인터랙티브 요소(label)에 min-height를 준다 + 흑백 accent (DESIGN.md 흑백 원칙) */
.field-check { margin-bottom: 4px; }
.field-check label {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 44px; margin-bottom: 0; cursor: pointer;
}
.field-check input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 0; flex: none;
  accent-color: var(--black); padding: 0;
  border: none; border-radius: 0; background: none; /* 네이티브 렌더 유지 */
}
.check-hint { margin-bottom: 8px; }
.form-error { font-size: 14px; font-weight: 400; line-height: 1.55; margin: 8px 0; }
.form-error::before { content: "⚠ "; color: var(--status-bad); }

/* ---- 알림/상태 박스 ---- */
.notice { border: 1px solid var(--glass-dark); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.notice-problem { border: 1px solid var(--black); }
.notice-problem p::before { content: "⚠ "; color: var(--status-bad); }

/* ---- 빈/로딩 상태 ---- */
.state-box { text-align: center; padding: 48px 16px; }
.state-box h2 { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.state-box p { font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.spinner {
  width: 28px; height: 28px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--glass-dark); border-top-color: var(--black);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 이력 목록 ---- */
.record-list { max-height: 320px; overflow-y: auto; }
.record-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--glass-dark);
  font-size: 14px; line-height: 1.55;
}
.record-row:last-child { border-bottom: none; }
.record-row .stat { font-weight: 540; flex: none; }
.record-row .badge { font-weight: 480; } /* 배지 규격(480)이 .stat 540에 오염되지 않도록 명시 */

/* ---- 계정 목록 ---- */
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--glass-dark);
}
.account-row:last-child { border-bottom: none; }
.account-row .who .id { font-weight: 540; }
.account-row .who .site { font-size: 13px; font-weight: 400; line-height: 1.5; }

.section-title { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.caption { font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--black); text-decoration: none; font-size: 15px; }
h1.page-title { font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; margin: 4px 0 2px; }