/* ===========================================================================
   레이아웃 — 좌측 사이드바 + 상단바 + 본문
   시안 구조: [사이드바] [상단바 / 본문]
   =========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-4)/1.5 "Pretendard", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.shell { display: flex; min-height: 100%; }

/* ---------- 사이드바 ---------- */
.side {
  width: var(--nav-w); flex: 0 0 var(--nav-w);
  background: var(--nav); color: var(--nav-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
}
.side-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4); min-height: var(--bar-h);
  font-size: var(--fs-4); font-weight: 800;
  /* 한글이 단어 중간에서 끊겨 '컨테/이너' 로 갈라졌다 */
  word-break: keep-all; line-height: 1.25;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--nav-ink); text-decoration: none;
}
.side-brand .leaf { width: 20px; height: 20px; flex: 0 0 auto; }
.side-nav { padding: var(--sp-3) var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-1); }
.side-nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--touch); padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--nav-dim); text-decoration: none;
  font-size: var(--fs-3); font-weight: 700;
  transition: background var(--dur), color var(--dur);
}
.side-nav a:hover { background: var(--nav-2); color: var(--nav-ink); }
.side-nav a.active { background: var(--nav-active); color: #fff; }
.side-nav a .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.side-foot {
  margin-top: auto; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-1); color: var(--nav-dim);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ---------- 본문 쪽 ---------- */
.body { flex: 1 1 auto; min-width: 0; max-width: 100%;
        display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--bar-h); padding: 0 var(--sp-5);
  flex-wrap: nowrap; overflow: hidden;
  background: var(--nav); color: var(--nav-ink);
  position: sticky; top: 0; z-index: 20;
}
.topbar .page {
  font-size: var(--fs-5); font-weight: 800; white-space: nowrap; flex: 0 0 auto;
}
.topbar .page-desc {
  font-size: var(--fs-2); color: var(--nav-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto;
}
.topbar .badge, .topbar .clock, .topbar .gear { flex: 0 0 auto; }
.topbar .badge { text-decoration: none; }
.topbar .spacer { margin-left: auto; }
.topbar .clock { font-size: var(--fs-3); color: var(--nav-ink); font-variant-numeric: tabular-nums; }
.topbar .gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .08); color: var(--nav-ink);
  border: 0; cursor: pointer;
}
.topbar .gear:hover { background: rgba(255, 255, 255, .16); }

main { padding: var(--sp-5); flex: 1 1 auto; min-width: 0; }

/* ---------- 섹션 ---------- */
.sec { margin-bottom: var(--sp-6); }
.sec-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.sec-title { font-size: var(--fs-5); font-weight: 800; margin: 0; }
.sec-note { font-size: var(--fs-2); color: var(--dim); }

/* ---------- 격자 ---------- */
.grid { display: grid; gap: var(--sp-3); }
.g-kpi   { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.g-ctl   { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g-soil  { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g-cam   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g-half  { grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); }

/* ===========================================================================
   화면 폭에 따른 단계
     1400↑  전부 보인다
     1400↓  상단바 설명 줄을 뺀다 (가장 먼저 포기할 것)
     1100↓  사이드바를 아이콘만 남긴 띠로 (태블릿·작은 노트북)
      860↓  사이드바를 아래 탭바로 (폰·세로 태블릿)
      620↓  카드 2단, 여백 축소
      420↓  글자 한 단 내리고 KPI 2단 유지
   분기점은 기기 이름이 아니라 '무엇이 깨지는 폭' 에서 잡았다.
   =========================================================================== */

@media (max-width: 1400px) {
  .topbar .page-desc { display: none; }
}

/* ---------- 접은 사이드바 ----------
   글씨를 지우는 대신 title 로 이름이 뜬다. 폭에 따라 자동으로 접던 것을
   '접힘' 한 가지 상태로 합쳤다 — 사람이 누른 쪽이 항상 이긴다.

   861px 밑에서는 사이드바가 아래 탭바로 바뀐다. 거기서는 '접힘' 이라는 것이
   없으므로 이 규칙이 닿아선 안 된다 — 닿게 뒀더니 넓은 화면에서 한 번 접은
   사람의 폰에서 탭 이름이 전부 사라졌다. */
@media (min-width: 861px) {
  .nav-min { --nav-w: 64px; }
  .nav-min .side-brand { justify-content: center; padding: var(--sp-3) 0; }
  .nav-min .side-brand span { display: none; }
  .nav-min .side-nav { padding: var(--sp-3) var(--sp-2); }
  .nav-min .side-nav a,
  .nav-min .nav-group { justify-content: center; padding: 0; }
  .nav-min .side-nav a span,
  .nav-min .nav-group span,
  .nav-min .nav-group .caret { display: none; }
  .nav-min .side-nav a .ic,
  .nav-min .nav-group .ic { width: 20px; height: 20px; }
  .nav-min .side-util.is-open .side-sub { display: none; }
  .nav-min .side-foot { display: none; }
}

/* ---------- 폰·세로 태블릿 ----------
   사이드바를 아래쪽 고정 바로 내린다. 폰에서 세로를 사이드바에 쓰면 아깝다. */
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .side {
    width: 100%; flex: none; height: auto; position: fixed;
    bottom: 0; top: auto; z-index: 30;
    flex-direction: row; align-items: stretch;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-bottom: env(safe-area-inset-bottom);   /* 아이폰 홈 바 */
  }
  .side-brand, .side-foot { display: none; }
  .side-nav {
    flex-direction: row; padding: var(--sp-1);
    justify-content: space-around; gap: 0; min-width: 0;
    flex: 1 1 auto;              /* 주 메뉴가 남는 폭을 다 가진다 */
  }
  .side-nav a {
    flex-direction: column; gap: 2px; padding: var(--sp-1) 2px;
    font-size: var(--fs-1); min-height: 52px; flex: 1 1 0; justify-content: center;
    min-width: 0;
  }
  .side-nav a span {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  main {
    padding: var(--sp-3) var(--sp-3)
             calc(72px + env(safe-area-inset-bottom));   /* 아래 바에 가리지 않게 */
  }
  .g-kpi { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .g-ctl  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .g-soil { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .g-cam, .g-half { grid-template-columns: 1fr; }
  .sec { margin-bottom: var(--sp-5); }
}

@media (max-width: 620px) {
  .topbar .clock { display: none; }       /* 배지가 먼저다 */
  .topbar .page { font-size: var(--fs-4); }
  .g-kpi { grid-template-columns: repeat(2, 1fr); }
  .g-ctl, .g-soil { grid-template-columns: 1fr; }
  .card-head, .card-body, .card-pad, .kpi, .ctl { padding: var(--sp-3); }
  .chart-sum { gap: var(--sp-4); padding: var(--sp-2) var(--sp-3); }
  .soil-vals { gap: var(--sp-1); }
}

@media (max-width: 420px) {
  :root { --fs-6: 22px; --fs-7: 28px; }   /* 두 단 큰 숫자만 내린다 */
  main { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .grid { gap: var(--sp-2); }
  .chips .chip { padding: 0 var(--sp-3); }
}

/* 아주 넓은 화면: 끝까지 늘리면 눈이 좌우로 너무 움직인다 */
@media (min-width: 1900px) {
  main { max-width: 1760px; margin: 0 auto; width: 100%; }
}