/* ==========================================================================
   screens — 스마트팜 모니터링 · 위기알림 · 자동제어 화면 (교체 대상 디자인)
   ---------------------------------------------------------------------------
   반응형 기준 : .device__screen = container "screen" → @container screen (화면 폭)
     폰 세로 < 600 · (패드 세로 600–1023) · 패드 가로 1024–1439 · 모니터 ≥ 1440
     와이드(27″ · 32″ 150%) ≥ 2200 · 4K 100%(32″) ≥ 3200
   크기 : --u(px) × em. 4K 100% 배율에서는 --u 를 키워 글자가 작아지지 않게 한다
   상태 색 : 정상 · 주의 · 경고 · 위험 · 장애 — 항상 아이콘 · 글자와 함께 (색만으로 전달하지 않음)
   3D 장면 색 : --f3d-* 토큰 (farm3d 모듈이 읽는다)
   ========================================================================== */

:root {
  --st-ok: #0ca30c;
  --st-caution: #fab219;
  --st-warn: #ec835a;
  --st-danger: #d03b3b;
  --st-fault: #8f7ee6;
  --st-off: #8a939b;
  --f-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* ---------- 라이트 토큰 (기본) — .scr = 화면, .sf = 스타일 가이드 페이지 (같은 토큰) ---------- */
.scr, .sf {
  --u: 1px;
  --bg: #eef1f2;
  --bg-2: #f6f8f9;
  --panel: #ffffff;
  --panel-2: #f2f5f6;
  --panel-3: #e7ebed;
  --line: rgba(16, 24, 32, 0.09);
  --line-2: rgba(16, 24, 32, 0.16);
  --fg: #12171b;
  --fg-2: #4b565e;
  --fg-3: #6f7a83;
  --brand: #0f9e85;
  --brand-2: #0b836e;
  --brand-ink: #ffffff;
  --brand-weak: rgba(15, 158, 133, 0.12);
  --brand-text: #0b7d69;
  --shadow-1: 0 1px 2px rgba(16, 24, 32, 0.05), 0 2px 8px rgba(16, 24, 32, 0.05);
  --shadow-2: 0 12px 34px rgba(16, 24, 32, 0.16);
  --scrim: rgba(10, 14, 18, 0.42);
  --zone-1: #2a78d6;
  --zone-2: #eb6834;
  --zone-3: #1baf7a;
  --series-1: #2a78d6;
  --band-ok: rgba(12, 163, 12, 0.1);
  --band-peer: rgba(16, 24, 32, 0.08);
  --f3d-bg: #e4eaec;
  --f3d-ground: #d3dad7;
  --f3d-grid: #bcc6c2;
  --f3d-frame: #8794a0;
  --f3d-film: #ffffff;
  --f3d-crop: #4f9a4a;
  --f3d-crop-2: #3f8a3c;
  --f3d-path: #c4cbc8;
  --f3d-heat-cold: #2a78d6;
  --f3d-heat-mid: #f0efec;
  --f3d-heat-hot: #d03b3b;
  --f3d-wind: #2c6d99;
  --f3d-rain: #4f7894;
  --f3d-tree: #7aa274;
  --f3d-animal: #6b5040;
  --video-bg: #1d2428;
}

/* ---------- 다크 토큰 (html.theme-dark) ---------- */
.theme-dark .scr, .theme-dark .sf {
  --bg: #0d1113;
  --bg-2: #11161a;
  --panel: #171d21;
  --panel-2: #1d2428;
  --panel-3: #252d32;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --fg: #eef2f4;
  --fg-2: #aeb8bf;
  --fg-3: #85909a;
  --brand: #2cc9ab;
  --brand-2: #22b096;
  --brand-ink: #062a22;
  --brand-weak: rgba(44, 201, 171, 0.14);
  --brand-text: #5fdcc3;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.55);
  --zone-1: #3987e5;
  --zone-2: #d95926;
  --zone-3: #199e70;
  --series-1: #3987e5;
  --band-ok: rgba(12, 163, 12, 0.16);
  --band-peer: rgba(255, 255, 255, 0.08);
  --f3d-bg: #0f1518;
  --f3d-ground: #182024;
  --f3d-grid: #263035;
  --f3d-frame: #7c8a94;
  --f3d-film: #cfe3f0;
  --f3d-crop: #3e8c46;
  --f3d-crop-2: #33793a;
  --f3d-path: #283135;
  --f3d-heat-cold: #3987e5;
  --f3d-heat-mid: #383835;
  --f3d-heat-hot: #e05252;
  --f3d-wind: #8cc4ea;
  --f3d-rain: #a5c8e0;
  --f3d-tree: #1f3a27;
  --f3d-animal: #a07f66;
}

/* 상태 → --st */
.is-ok { --st: var(--st-ok); }
.is-caution { --st: var(--st-caution); }
.is-warn { --st: var(--st-warn); }
.is-danger { --st: var(--st-danger); }
.is-fault { --st: var(--st-fault); }
.is-off { --st: var(--st-off); }
.is-brand { --st: var(--brand); }

/* ==========================================================================
   화면 루트 · 크기 단계
   ========================================================================== */
.scr {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  isolation: isolate;
  padding: var(--safe-t, 0px) 0 var(--safe-b, 0px);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: calc(var(--u) * 14);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
@container screen (max-width: 599px) { .scr { --u: 1.04px; } }
@container screen (min-width: 2200px) { .scr { --u: 1.12px; } }
@container screen (min-width: 3200px) { .scr { --u: 1.6px; } }

.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr :where(button) { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit; }
.scr :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; padding: 0; }
.scr :where(ul, ol) { list-style: none; }
.scr .ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.scr .ic--sm { width: 1em; height: 1em; }
.scr .ic--lg { width: 1.6em; height: 1.6em; }
.scr .num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.scr small { font-size: 0.72em; font-weight: 600; color: var(--fg-3); margin-left: 0.15em; }
.muted { color: var(--fg-3); }
.only-phone { display: none !important; }
@container screen (max-width: 599px) {
  .only-phone { display: revert !important; }
  .hide-phone { display: none !important; }
}
@container screen (max-width: 1439px) { .only-monitor { display: none !important; } }
@container screen (max-width: 2199px) { .only-wide { display: none !important; } }

/* ==========================================================================
   앱 껍데기 : 왼쪽 메뉴(모니터) · 아이콘 레일(패드) · 하단 탭바(폰)
   ========================================================================== */
.side {
  flex: none;
  width: 15em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  padding: 1.1em 0.8em;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
}
.side__logo { display: flex; align-items: center; gap: 0.6em; padding: 0.2em 0.5em 1.1em; }
.logo-mark {
  display: grid; place-items: center; flex: none;
  width: 2.2em; height: 2.2em; border-radius: 0.7em;
  background: var(--brand); color: var(--brand-ink);
}
.logo-mark .ic { width: 1.3em; height: 1.3em; }
.side__name { font-size: 1.08em; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.side__name small { display: block; margin: 0; font-size: 0.68em; font-weight: 600; }
.side__group { padding: 0.9em 0.7em 0.3em; font-size: 0.75em; font-weight: 700; color: var(--fg-3); }
.nav-i {
  position: relative;
  display: flex; align-items: center; gap: 0.75em;
  height: 2.6em; padding: 0 0.75em; border-radius: 0.7em;
  color: var(--fg-2); font-weight: 600; white-space: nowrap;
}
.nav-i:hover { background: var(--panel-2); color: var(--fg); }
.nav-i.is-on { background: var(--brand-weak); color: var(--brand-text); }
.nav-i__badge {
  margin-left: auto; min-width: 1.6em; height: 1.45em; padding: 0 0.4em; border-radius: 999px;
  display: grid; place-items: center; background: var(--st-danger); color: #fff; font-size: 0.75em; font-weight: 800;
}
.nav-i__badge.is-fault { background: var(--st-fault); }
.side__foot { margin-top: auto; display: flex; align-items: center; gap: 0.6em; padding: 0.8em 0.6em 0; border-top: 1px solid var(--line); font-size: 0.86em; }
.avatar { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--panel-3); font-weight: 800; font-size: 0.9em; }

.app__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
  flex: none;
  display: flex; align-items: center; gap: 0.8em;
  height: 4em; padding: 0 1.4em;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.top__title { font-size: 1.3em; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.top__farm {
  display: inline-flex; align-items: center; gap: 0.4em;
  height: 2.3em; padding: 0 0.8em; border-radius: 0.7em; background: var(--panel-2);
  font-size: 0.9em; font-weight: 600; color: var(--fg-2); white-space: nowrap;
}
.top__sp { flex: 1; }
.top__weather { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.9em; color: var(--fg-2); white-space: nowrap; }
.top__weather b { color: var(--fg); }
.top__demo { display: inline-flex; align-items: center; gap: 0.35em; height: 1.9em; padding: 0 0.7em; border-radius: 999px; background: var(--brand-weak); color: var(--brand-text); font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.icon-btn { position: relative; display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 0.75em; background: var(--panel-2); color: var(--fg-2); }
.icon-btn:hover { color: var(--fg); }
.icon-btn__dot { position: absolute; top: 0.25em; right: 0.25em; min-width: 1.25em; height: 1.25em; padding: 0 0.3em; border-radius: 999px; background: var(--st-danger); color: #fff; font-size: 0.68em; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.top__time { font-size: 0.9em; font-weight: 700; color: var(--fg-2); }

.app__main { flex: 1; min-height: 0; position: relative; overflow: hidden; padding: 1.2em 1.4em; }
.tabbar { display: none; }

/* 패드 · 패드 세로 : 아이콘 레일 */
@container screen (max-width: 1439px) {
  .side { width: 4.8em; align-items: center; padding: 1em 0.5em; }
  .side__logo { padding: 0.2em 0 1em; }
  .side__name, .side__group, .nav-i > span:not(.nav-i__badge), .side__foot > :not(.avatar) { display: none; }
  .nav-i { width: 3em; height: 3em; justify-content: center; padding: 0; }
  .nav-i__badge { position: absolute; top: 0.15em; right: 0.05em; margin: 0; font-size: 0.66em; }
  .side__foot { border: 0; padding: 0.6em 0 0; }
  .top__weather .hide-tablet, .top__farm .hide-tablet { display: none; }
  .app__main { padding: 1em 1.1em; }
}

/* 폰 : 하단 탭바 · 본문 스크롤 */
@container screen (max-width: 599px) {
  .scr.app { flex-direction: column; }
  .side { display: none; }
  .top { height: 3.6em; padding: 0 1.1em; gap: 0.6em; border-bottom: 0; }
  .top__title { font-size: 1.35em; }
  .top__farm, .top__weather, .top__demo, .top__time { display: none; }
  .app__main { overflow-y: auto; padding: 0.3em 1em 1.2em; scrollbar-width: none; }
  .app__main::-webkit-scrollbar { display: none; }
  .tabbar {
    flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 0.45em 0.4em 0.2em; border-top: 1px solid var(--line); background: var(--bg-2);
  }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.3em 0; font-size: 0.72em; font-weight: 600; color: var(--fg-3); }
  .tab .ic { width: 1.75em; height: 1.75em; }
  .tab.is-on { color: var(--brand-text); }
  .tab__badge { position: absolute; top: 0.05em; left: 56%; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 999px; background: var(--st-danger); color: #fff; font-size: 0.85em; font-weight: 800; display: grid; place-items: center; }
}

/* ==========================================================================
   공통 컴포넌트
   ========================================================================== */
.card {
  position: relative;
  min-width: 0;
  padding: 1em 1.1em;
  border-radius: 1em;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.card__h { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.75em; font-size: 0.98em; font-weight: 750; }
.card__h .ic { color: var(--fg-3); }
.card__h-more { margin-left: auto; font-size: 0.85em; font-weight: 600; color: var(--fg-3); display: inline-flex; align-items: center; gap: 0.15em; white-space: nowrap; }
.card__sub { font-size: 0.82em; color: var(--fg-3); font-weight: 500; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  height: 2.6em; min-width: 2.6em; padding: 0 1em; border-radius: 0.75em;
  background: var(--panel-2); color: var(--fg); font-weight: 650; font-size: 0.93em; white-space: nowrap;
  border: 1px solid var(--line);
}
.btn:hover { background: var(--panel-3); }
.btn--primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.btn--primary:hover { background: var(--brand-2); }
.btn--danger { background: var(--st-danger); color: #fff; border-color: transparent; }
.btn--ghost { background: transparent; }
.btn--sm { height: 2.1em; padding: 0 0.75em; font-size: 0.84em; border-radius: 0.6em; }
.btn--lg { height: 3.2em; padding: 0 1.4em; font-size: 1em; border-radius: 0.9em; }
.btn--block { width: 100%; }
.btn.is-on { background: var(--brand-weak); color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* 상태 배지 : 색 + 아이콘 + 글자 */
.st {
  display: inline-flex; align-items: center; gap: 0.35em;
  height: 1.75em; padding: 0 0.6em 0 0.45em; border-radius: 999px;
  background: color-mix(in srgb, var(--st, var(--st-off)) 16%, transparent);
  color: var(--fg); font-size: 0.8em; font-weight: 700; white-space: nowrap;
}
.st .ic { width: 1.1em; height: 1.1em; color: var(--st); stroke-width: 2.4; }
.st--lg { height: 2.1em; font-size: 0.9em; padding: 0 0.8em 0 0.6em; }
.dot { display: inline-block; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--st, var(--st-off)); }
.dot--ring { box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--st) 25%, transparent); }

.badge { display: inline-flex; align-items: center; gap: 0.3em; height: 1.6em; padding: 0 0.55em; border-radius: 0.45em; background: var(--panel-3); color: var(--fg-2); font-size: 0.75em; font-weight: 700; white-space: nowrap; }
.badge--brand { background: var(--brand-weak); color: var(--brand-text); }
.badge--safe { background: color-mix(in srgb, var(--st-danger) 14%, transparent); color: var(--fg); }
.badge--auto { background: var(--brand-weak); color: var(--brand-text); }
.badge--manual { background: color-mix(in srgb, var(--st-caution) 20%, transparent); color: var(--fg); }
.src { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.74em; color: var(--fg-3); font-weight: 600; }
.src .ic { width: 1.1em; height: 1.1em; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.chip { display: inline-flex; align-items: center; gap: 0.35em; height: 2.1em; padding: 0 0.8em; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 0.85em; font-weight: 650; color: var(--fg-2); white-space: nowrap; }
.chip.is-on { background: var(--fg); color: var(--bg); border-color: transparent; }
.chip b { font-weight: 800; }

.seg { display: inline-flex; padding: 0.2em; border-radius: 0.75em; background: var(--panel-2); border: 1px solid var(--line); }
.seg > button { height: 2em; padding: 0 0.85em; border-radius: 0.55em; font-size: 0.85em; font-weight: 650; color: var(--fg-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3em; }
.seg > button.is-on { background: var(--panel); color: var(--fg); box-shadow: var(--shadow-1); }

.switch { position: relative; flex: none; width: 2.7em; height: 1.6em; border-radius: 999px; background: var(--panel-3); border: 1px solid var(--line); }
.switch::after { content: ""; position: absolute; top: 0.15em; left: 0.15em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch.is-on { background: var(--brand); border-color: transparent; }
.switch.is-on::after { transform: translateX(1.1em); }

.field { display: flex; flex-direction: column; gap: 0.35em; min-width: 0; }
.field__label { font-size: 0.8em; font-weight: 700; color: var(--fg-2); }
.input {
  display: flex; align-items: center; gap: 0.4em;
  height: 2.6em; padding: 0 0.8em; border-radius: 0.65em;
  background: var(--panel-2); border: 1px solid var(--line-2);
  font-size: 0.93em; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden;
}
.input .ic { color: var(--fg-3); }
.input--select::after { content: ""; margin-left: auto; width: 0.45em; height: 0.45em; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: translateY(-0.15em) rotate(45deg); flex: none; }
.input--focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-weak); }
.input__unit { margin-left: auto; color: var(--fg-3); font-weight: 600; }

/* 범위 게이지 : 위험 | 주의 | 적정 | 주의 | 위험 + 현재값 표시 */
.gauge { position: relative; height: 0.5em; border-radius: 999px; overflow: visible; display: flex; gap: 2px; }
.gauge > i { display: block; height: 100%; border-radius: 999px; }
.gauge > i:nth-child(1), .gauge > i:nth-child(5) { background: color-mix(in srgb, var(--st-danger) 35%, transparent); }
.gauge > i:nth-child(2), .gauge > i:nth-child(4) { background: color-mix(in srgb, var(--st-caution) 40%, transparent); }
.gauge > i:nth-child(3) { background: color-mix(in srgb, var(--st-ok) 40%, transparent); }
.gauge__mark { position: absolute; top: 50%; width: 0.95em; height: 0.95em; margin: -0.475em 0 0 -0.475em; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 2px var(--panel); }
.gauge-scale { display: flex; justify-content: space-between; margin-top: 0.3em; font-size: 0.7em; color: var(--fg-3); font-variant-numeric: tabular-nums; }

.bar { height: 0.45em; border-radius: 999px; background: var(--panel-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.45em 1em; font-size: 0.88em; }
.kv dt { color: var(--fg-3); white-space: nowrap; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.86em; }
.tbl th { padding: 0.55em 0.7em; text-align: left; font-size: 0.85em; font-weight: 700; color: var(--fg-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 0.65em 0.7em; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl tr.is-row-alert td { background: color-mix(in srgb, var(--st) 8%, transparent); }
.tbl .num { text-align: right; }

.note-inline { display: flex; gap: 0.6em; align-items: flex-start; padding: 0.75em 0.9em; border-radius: 0.8em; background: var(--panel-2); font-size: 0.84em; color: var(--fg-2); line-height: 1.5; }
.note-inline .ic { color: var(--brand-text); margin-top: 0.1em; }
.note-inline b { color: var(--fg); }

/* 측정값 */
.metric { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.metric__label { display: flex; align-items: center; gap: 0.35em; font-size: 0.8em; color: var(--fg-3); font-weight: 600; white-space: nowrap; }
.metric__label .ic { width: 1.15em; height: 1.15em; }
.metric__value { font-size: 1.15em; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.metric__value small { font-size: 0.7em; }
.big-num { font-size: 2.6em; font-weight: 750; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.big-num small { font-size: 0.42em; font-weight: 650; margin-left: 0.1em; }

/* ==========================================================================
   차트 (spec.js drawCharts 가 그린다) — 선 2px · 적정 범위 띠 · 우수농가 띠
   ========================================================================== */
.chart { position: relative; display: flex; flex-direction: column; min-height: 0; }
.chart__legend { display: flex; flex-wrap: wrap; gap: 0.3em 1em; margin-bottom: 0.5em; font-size: 0.78em; color: var(--fg-2); }
.chart__legend span { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; }
.chart__key { width: 1.1em; height: 0.2em; border-radius: 2px; background: var(--k); }
.chart__key--band { height: 0.75em; border-radius: 0.2em; }
.chart__plot { position: relative; flex: 1; min-height: 6em; margin: 0 2.3em 1.5em 0; }
.chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__thr { stroke: var(--st-warn); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart__now { stroke: var(--fg-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__y { position: absolute; right: -2.3em; transform: translateY(-50%); width: 2.1em; font-size: 0.7em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.chart__x { position: absolute; top: calc(100% + 0.45em); transform: translateX(-50%); font-size: 0.7em; color: var(--fg-3); white-space: nowrap; }
.chart__tag { position: absolute; transform: translate(-50%, -135%); padding: 0.1em 0.4em; border-radius: 0.35em; background: var(--fg); color: var(--bg); font-size: 0.72em; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart__band-label { position: absolute; left: 0.4em; font-size: 0.68em; font-weight: 700; color: var(--fg-3); transform: translateY(-110%); }
.chart__hover { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg-3); pointer-events: none; display: none; }
.chart__tip { position: absolute; top: 0; z-index: 3; padding: 0.45em 0.6em; border-radius: 0.5em; background: var(--panel); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); font-size: 0.78em; white-space: nowrap; pointer-events: none; display: none; }
.chart__tip b { display: block; margin-bottom: 0.15em; }
.chart__tip span { display: flex; align-items: center; gap: 0.4em; }
.chart.is-hover .chart__hover, .chart.is-hover .chart__tip { display: block; }

/* ==========================================================================
   3D 뷰어 (.f3d) — farm3d 모듈이 장면 · 라벨을 넣는다
   ========================================================================== */
.f3d { position: relative; overflow: hidden; border-radius: 1em; background: var(--f3d-bg); border: 1px solid var(--line); min-height: 10em; }
.f3d__stage { position: absolute; inset: 0; }
.f3d__stage > img, .f3d__stage > canvas { display: block; width: 100% !important; height: 100% !important; }
.f3d__labels { position: absolute; inset: 0; pointer-events: none; }
.f3d__loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85em; color: var(--fg-3); }
.f3d__stage:not(:empty) + .f3d__labels + .f3d__loading, .f3d.is-ready .f3d__loading { display: none; }
.f3d-tools { position: absolute; top: 0.8em; left: 0.8em; right: 0.8em; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; pointer-events: none; }
.f3d-tools > * { pointer-events: auto; }
.f3d-tools .seg { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); }
.f3d-tools__sp { flex: 1; }
.f3d-legend { position: absolute; left: 0.8em; bottom: 0.8em; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.35em 0.8em; padding: 0.45em 0.7em; border-radius: 0.7em; background: color-mix(in srgb, var(--panel) 86%, transparent); backdrop-filter: blur(10px); font-size: 0.74em; font-weight: 650; color: var(--fg-2); }
.f3d-legend span { display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.f3d-heat { display: inline-flex; align-items: center; gap: 0.4em; }
.f3d-heat i { display: block; width: 6em; height: 0.5em; border-radius: 999px; background: linear-gradient(90deg, var(--f3d-heat-cold), var(--f3d-heat-mid), var(--f3d-heat-hot)); }
.f3d-views { position: absolute; right: 0.8em; bottom: 0.8em; z-index: 3; display: flex; flex-direction: column; gap: 0.3em; }
.f3d-views button { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.65em; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); color: var(--fg-2); border: 1px solid var(--line); }

/* 라벨 (3D 위치에 붙는 HTML) */
.f3l {
  position: absolute; z-index: 1;
  transform: translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 0.3em;
  padding: 0.25em 0.55em 0.25em 0.4em; margin-top: -0.35em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  border: 1.5px solid var(--st, var(--line-2));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 0.78em; font-weight: 750; color: var(--fg); white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: auto; cursor: pointer;
}
.f3l .ic { width: 1.1em; height: 1.1em; color: var(--st); stroke-width: 2.4; }
.f3l__id { font-weight: 600; color: var(--fg-3); font-size: 0.88em; }
.f3l--zone { font-size: 0.95em; padding: 0.35em 0.75em 0.35em 0.5em; border-width: 2px; }
.f3l--zone .f3l__id { color: var(--fg-2); font-weight: 750; font-size: 0.9em; }
.f3l--sm { font-size: 0.66em; padding: 0.15em 0.4em 0.15em 0.3em; border-width: 1px; }
.f3l--cam { --st: var(--fg-3); border-style: solid; }
.f3l--cam .ic { color: var(--fg-2); }
.f3l--sel { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-weak); }
.f3l.is-dim { opacity: 0.75; border-style: dashed; }
.f3l.is-pulse::after { content: ""; position: absolute; inset: -0.35em; border-radius: inherit; border: 2px solid var(--st); opacity: 0; animation: f3l-pulse 1.6s ease-out infinite; }
@keyframes f3l-pulse { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.25); } }
.f3l--on { --st: var(--brand); border-color: var(--brand); }
.f3l--on .ic { color: var(--brand-text); }
.f3l--hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-weak); z-index: 2; }
.f3d-views button.is-on { color: var(--brand-text); background: color-mix(in srgb, var(--brand) 18%, var(--panel)); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

/* 나침반 — 시점이 돌면 같이 돈다 (N = 북쪽) */
.f3d-compass { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); pointer-events: none; }
.f3d-compass--free { position: absolute; right: 0.8em; bottom: 0.8em; z-index: 3; }
.f3d-compass__rose { position: relative; display: block; width: 100%; height: 100%; }
.f3d-compass__rose i { position: absolute; left: 50%; top: 18%; width: 0; height: 0; margin-left: -0.22em; border-left: 0.22em solid transparent; border-right: 0.22em solid transparent; border-bottom: 0.7em solid var(--st-danger); }
.f3d-compass__rose b { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 0.62em; font-weight: 800; color: var(--fg-2); line-height: 1; }

/* 날씨 레이어 표시 — 화살표는 화면에서 바람이 흘러가는 쪽 */
.f3d-wx { position: absolute; z-index: 3; left: 0.8em; top: 3.7em; display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.85em 0.5em 0.55em; border-radius: 0.9em; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow-1); pointer-events: none; max-width: calc(100% - 5em); }
.f3d-wx.is-strong { border-color: color-mix(in srgb, var(--st-caution) 60%, transparent); }
.f3d-wx__arrow { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: color-mix(in srgb, var(--f3d-wind) 20%, transparent); color: var(--f3d-wind); }
.f3d-wx__arrow.is-strong { background: color-mix(in srgb, var(--st-caution) 22%, transparent); color: var(--st-caution); }
.f3d-wx__arrow .ic { width: 1.4em; height: 1.4em; stroke-width: 2.6; }
.f3d-wx b { display: block; font-size: 1.02em; font-weight: 800; white-space: nowrap; }
.f3d-wx b small { font-size: 0.72em; font-weight: 650; color: var(--fg-3); margin-left: 0.15em; }
.f3d-wx span { display: flex; align-items: center; gap: 0.3em; font-size: 0.78em; font-weight: 650; color: var(--fg-2); }
.f3d-wx span .ic { width: 1.1em; height: 1.1em; }
.f3d-wx > div > small { display: block; font-size: 0.68em; color: var(--fg-3); margin-top: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.overlay.overlay--clear { background: transparent; }

/* 카메라 영상 목업 */
.video { position: relative; overflow: hidden; border-radius: 0.8em; background: var(--video-bg); aspect-ratio: 16 / 9; color: #fff; }
.video > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__top { position: absolute; top: 0.6em; left: 0.6em; right: 0.6em; display: flex; align-items: center; gap: 0.5em; font-size: 0.78em; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.video__live { display: inline-flex; align-items: center; gap: 0.3em; height: 1.6em; padding: 0 0.5em; border-radius: 0.35em; background: rgba(208, 59, 59, 0.92); font-size: 0.85em; text-shadow: none; }
.video__live::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: #fff; }
.video__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.video__bot { position: absolute; left: 0.6em; bottom: 0.55em; font-size: 0.76em; font-weight: 650; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ==========================================================================
   오버레이 : 드로어(모니터 · 패드 오른쪽) → 폰에서는 바텀시트 · 다이얼로그
   ========================================================================== */
.overlay { position: absolute; inset: 0; z-index: 40; background: var(--scrim); }
.drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 41;
  width: 30em; display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.drawer__head { flex: none; display: flex; align-items: flex-start; gap: 0.7em; padding: 1.2em 1.3em 0.9em; border-bottom: 1px solid var(--line); }
.drawer__title { font-size: 1.2em; font-weight: 800; letter-spacing: -0.02em; }
.drawer__sub { font-size: 0.84em; color: var(--fg-3); margin-top: 0.15em; }
.drawer__close { margin-left: auto; }
.drawer__body { flex: 1; min-height: 0; overflow: auto; padding: 1.1em 1.3em; display: flex; flex-direction: column; gap: 1.1em; }
.drawer__foot { flex: none; display: flex; gap: 0.5em; padding: 0.9em 1.3em 1.1em; border-top: 1px solid var(--line); }
.drawer__foot .btn { flex: 1; }
.dialog {
  position: absolute; left: 50%; top: 50%; z-index: 41; transform: translate(-50%, -50%);
  width: min(30em, calc(100% - 2em)); max-height: calc(100% - 2em); overflow: auto;
  display: flex; flex-direction: column; gap: 1em;
  padding: 1.4em; border-radius: 1.2em; background: var(--panel); box-shadow: var(--shadow-2); border: 1px solid var(--line);
}
.dialog--wide { width: min(62em, calc(100% - 3em)); }
.dialog__title { font-size: 1.25em; font-weight: 800; letter-spacing: -0.02em; }
.dialog__actions { display: flex; gap: 0.5em; justify-content: flex-end; }
@container screen (max-width: 599px) {
  .drawer, .dialog {
    top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: 86%;
    border-radius: 1.4em 1.4em 0 0; border: 0; padding-bottom: calc(var(--safe-b, 0px) + 0.6em);
  }
  .scr:has(.drawer, .dialog) { padding-bottom: 0; }
  .drawer::before, .dialog::before { content: ""; align-self: center; width: 2.6em; height: 0.3em; border-radius: 999px; background: var(--line-2); margin: 0.6em auto 0; flex: none; }
  .dialog { padding: 0 1.2em; gap: 0.9em; }
  .dialog::before { margin-bottom: 0.2em; }
  .dialog__actions .btn { flex: 1; }
  .drawer__foot { padding-bottom: 0.4em; }
}

/* ==========================================================================
   A · 3D 대시보드
   ========================================================================== */
.dash {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23em;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "kpi kpi" "view alerts";
  gap: 1em;
}
.dash__kpi { grid-area: kpi; display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.2fr 1.35fr; gap: 1em; }
.dash__view { grid-area: view; position: relative; min-height: 0; display: flex; flex-direction: column; }
.dash__view > .f3d { flex: 1; }
.dash__alerts { grid-area: alerts; display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.dash__alerts > .card:first-child { flex: 1; min-height: 0; overflow: hidden; }
.dash__charts { grid-area: charts; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.dash__charts .chart { height: 100%; }
@container screen (min-width: 2200px) {
  .dash { grid-template-columns: minmax(0, 1fr) 26em; grid-template-rows: auto minmax(0, 1fr) 15em; grid-template-areas: "kpi kpi" "view alerts" "charts alerts"; }
}

.kpi { display: flex; flex-direction: column; justify-content: center; gap: 0.25em; min-width: 0; padding: 0.85em 1.05em; border-radius: 1em; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.kpi__label { display: flex; align-items: center; gap: 0.4em; font-size: 0.8em; color: var(--fg-3); font-weight: 650; white-space: nowrap; }
.kpi__label .ic { width: 1.15em; height: 1.15em; }
.kpi__value { display: flex; align-items: baseline; gap: 0.4em; font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: 0.55em; }
.kpi__sub { font-size: 0.78em; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__status { display: flex; gap: 0.4em; flex-wrap: wrap; }
.kpi--alert { border-color: color-mix(in srgb, var(--st-warn) 45%, transparent); }


.alist { display: flex; flex-direction: column; gap: 0.5em; }
.aitem { display: flex; gap: 0.7em; padding: 0.75em 0.8em; border-radius: 0.85em; background: var(--panel-2); cursor: pointer; border: 1px solid transparent; }
.aitem.is-unread { background: color-mix(in srgb, var(--st) 9%, var(--panel)); border-color: color-mix(in srgb, var(--st) 35%, transparent); }
.aitem__icon { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 0.65em; background: color-mix(in srgb, var(--st) 18%, transparent); color: var(--st); }
.aitem__icon .ic { stroke-width: 2.3; }
.aitem__body { min-width: 0; flex: 1; }
.aitem__top { display: flex; align-items: center; gap: 0.45em; font-size: 0.76em; color: var(--fg-3); font-weight: 650; }
.aitem__lv { font-weight: 800; color: var(--fg); }
.aitem__time { margin-left: auto; font-variant-numeric: tabular-nums; }
.aitem__title { margin-top: 0.15em; font-size: 0.92em; font-weight: 750; line-height: 1.35; }
.aitem__desc { margin-top: 0.2em; font-size: 0.8em; color: var(--fg-2); line-height: 1.45; }
.aitem__act { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.4em; font-size: 0.76em; font-weight: 700; color: var(--brand-text); }

.log { display: flex; flex-direction: column; }
.log__row { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 0.6em; align-items: center; padding: 0.5em 0; border-top: 1px solid var(--line); font-size: 0.82em; }
.log__row:first-child { border-top: 0; }
.log__time { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.log__what b { font-weight: 750; }

.pip { position: absolute; right: 0.8em; top: 0.8em; z-index: 4; width: 21em; padding: 0.35em; border-radius: 0.95em; background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--shadow-2); cursor: pointer; }
.pip__head { display: flex; align-items: center; gap: 0.4em; padding: 0.15em 0.35em 0.4em; font-size: 0.78em; font-weight: 700; }
.pip__head .muted { margin-left: auto; font-weight: 600; }

/* 패드 가로 : 3D + 오른쪽 열(알림) */
@container screen (max-width: 1439px) {
  .dash { grid-template-columns: minmax(0, 1fr) 19em; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "kpi kpi" "view alerts"; gap: 0.8em; }
  .dash__kpi { grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
  .dash__kpi > .kpi:nth-child(3) { display: none; }
  .kpi { padding: 0.65em 0.85em; }
  .kpi__value { font-size: 1.3em; }
  .dash__alerts .card + .card { display: none; }
}

/* 폰 : 세로 쌓기 */
@container screen (max-width: 599px) {
  .dash { display: flex; flex-direction: column; height: auto; gap: 0.9em; }
  .dash__kpi { display: flex; overflow-x: auto; gap: 0.6em; margin: 0 -1em; padding: 0.1em 1em; scrollbar-width: none; }
  .dash__kpi > .kpi { flex: none; width: 10.5em; }
  .dash__kpi > .kpi:nth-child(3) { display: flex; }
  .dash__kpi > .kpi:first-child { width: 13em; }
  .dash__view { order: 1; height: 25em; flex: none; }
  .dash__alerts { order: 2; }
  .dash__alerts .card + .card { display: none; }
  .pip { display: none; }
}

/* ==========================================================================
   B · 동 상세
   ========================================================================== */
.zone { height: 100%; display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 1em; }
.zone__list { display: flex; flex-direction: column; gap: 0.5em; }
.zl-item { display: flex; align-items: center; gap: 0.6em; padding: 0.75em 0.85em; border-radius: 0.85em; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.zl-item.is-on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-weak); }
.zl-item__name { font-weight: 750; }
.zl-item__val { margin-left: auto; font-weight: 750; font-variant-numeric: tabular-nums; }
.zone__main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head head" "chart view" "metrics eq"; gap: 1em; }
.zone__head { grid-area: head; display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.zone__name { font-size: 1.5em; font-weight: 800; letter-spacing: -0.03em; }
.zone__head .seg { margin-left: auto; }
.zone__chart { grid-area: chart; display: flex; flex-direction: column; }
.zone__chart .chart { flex: 1; }
.zone__view { grid-area: view; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.zone__view .f3d { flex: 1; border: 0; border-radius: 0; }
.zone__metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.zone__eq { grid-area: eq; }
.mcard { display: flex; flex-direction: column; gap: 0.5em; padding: 0.85em 1em; border-radius: 0.95em; background: var(--panel); border: 1px solid var(--line); }
.mcard.is-caution, .mcard.is-warn { border-color: color-mix(in srgb, var(--st) 55%, transparent); }
.mcard__top { display: flex; align-items: center; gap: 0.4em; }
.mcard__top .st { margin-left: auto; }
.mcard__val { font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mcard__val small { font-size: 0.5em; }
.eqlist { display: flex; flex-direction: column; }
.eqrow { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0; border-top: 1px solid var(--line); font-size: 0.88em; }
.eqrow:first-child { border-top: 0; padding-top: 0; }
.eqrow__icon { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 0.6em; background: var(--panel-2); color: var(--fg-2); }
.eqrow__icon.is-active { background: var(--brand-weak); color: var(--brand-text); }
.eqrow__name { font-weight: 650; }
.eqrow__state { margin-left: auto; display: flex; align-items: center; gap: 0.4em; font-weight: 750; font-variant-numeric: tabular-nums; }
@container screen (min-width: 2200px) {
  .zone__metrics { grid-template-columns: repeat(6, 1fr); }
  .zone__main { grid-template-areas: "head head" "chart view" "metrics metrics" ; grid-template-rows: auto minmax(0, 1fr) auto; }
  .zone__eq { display: none; }
}
@container screen (max-width: 1439px) {
  .zone { grid-template-columns: 12em minmax(0, 1fr); gap: 0.8em; }
  .zone__main { grid-template-columns: minmax(0, 1fr) 17em; grid-template-areas: "head head" "chart eq" "metrics metrics"; gap: 0.8em; }
  .zone__view { display: none; }
  .zone__metrics > .mcard:nth-child(n+4) { display: none; }
}
@container screen (max-width: 599px) {
  .zone { display: flex; flex-direction: column; height: auto; }
  .zone__list { flex-direction: row; overflow-x: auto; margin: 0 -1em; padding: 0 1em; scrollbar-width: none; }
  .zl-item { flex: none; padding: 0.55em 0.8em; }
  .zone__main { display: flex; flex-direction: column; }
  .zone__head .seg { display: none; }
  .zone__chart { height: 17em; flex: none; }
  .zone__view { display: flex; height: 18em; flex: none; }
  .zone__metrics { grid-template-columns: 1fr 1fr; }
  .zone__metrics > .mcard:nth-child(n+4) { display: flex; }
}

/* ==========================================================================
   C · 알림 센터 · 알림 상세
   ========================================================================== */
.alerts { height: 100%; display: grid; grid-template-columns: 28em minmax(0, 1fr); gap: 1em; }
.alerts__list { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; }
.alerts__list .alist { overflow: hidden; }
.alerts__day { font-size: 0.8em; font-weight: 750; color: var(--fg-3); margin: 0.3em 0 -0.2em; }
.alerts__detail { min-height: 0; overflow: hidden; }
.aitem.is-sel { box-shadow: 0 0 0 2px var(--brand); }
.adetail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "head head" "chart snap" "timeline esc"; gap: 1em; height: 100%; }
.adetail__head { grid-area: head; display: flex; align-items: flex-start; gap: 0.9em; }
.adetail__icon { display: grid; place-items: center; flex: none; width: 3em; height: 3em; border-radius: 0.9em; background: color-mix(in srgb, var(--st) 18%, transparent); color: var(--st); }
.adetail__icon .ic { width: 1.6em; height: 1.6em; stroke-width: 2.2; }
.adetail__title { font-size: 1.45em; font-weight: 800; letter-spacing: -0.03em; }
.adetail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin-top: 0.3em; font-size: 0.85em; color: var(--fg-2); }
.adetail__actions { margin-left: auto; display: flex; gap: 0.5em; }
.adetail__chart { grid-area: chart; }
.adetail__chart .chart { height: 13em; }
.adetail__snap { grid-area: snap; }
.adetail__timeline { grid-area: timeline; }
.adetail__esc { grid-area: esc; }
.tl { display: flex; flex-direction: column; }
.tl__row { position: relative; display: grid; grid-template-columns: 3.4em 1.4em 1fr; gap: 0.5em; padding-bottom: 0.85em; font-size: 0.86em; }
.tl__row::before { content: ""; position: absolute; left: calc(3.4em + 0.5em + 0.7em - 1px); top: 1.3em; bottom: 0; width: 2px; background: var(--line-2); }
.tl__row:last-child::before { display: none; }
.tl__time { color: var(--fg-3); font-variant-numeric: tabular-nums; padding-top: 0.05em; }
.tl__dot { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: color-mix(in srgb, var(--st, var(--fg-3)) 20%, var(--panel)); color: var(--st, var(--fg-3)); }
.tl__dot .ic { width: 0.85em; height: 0.85em; stroke-width: 3; }
.tl__what b { font-weight: 750; }
.tl__what p { color: var(--fg-3); font-size: 0.92em; margin-top: 0.1em; }
.esc { display: flex; flex-direction: column; gap: 0.55em; }
.esc__step { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0.75em; border-radius: 0.75em; background: var(--panel-2); font-size: 0.86em; }
.esc__step .ic { color: var(--fg-3); }
.esc__step.is-done .ic { color: var(--st-ok); }
.esc__step.is-next { border: 1px dashed var(--line-2); background: transparent; }
.esc__step span:last-child { margin-left: auto; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@container screen (max-width: 1439px) {
  .alerts { grid-template-columns: 22em minmax(0, 1fr); gap: 0.8em; }
  .adetail { grid-template-columns: 1fr; grid-template-areas: "head" "chart" "timeline"; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.8em; }
  .adetail__snap, .adetail__esc { display: none; }
  .adetail__actions { display: none; }
}
@container screen (max-width: 599px) {
  .alerts { display: flex; flex-direction: column; height: auto; }
  .alerts__detail { display: none; }
  .aitem.is-sel { box-shadow: none; }
  .adetail { display: flex; flex-direction: column; height: auto; }
  .adetail__snap, .adetail__esc { display: block; }
  .adetail__title { font-size: 1.25em; }
  .adetail__chart .chart { height: 12em; }
}
.adetail__mobile-actions { display: none; }
@container screen (max-width: 599px) {
  .adetail__mobile-actions { display: flex; gap: 0.5em; position: sticky; bottom: 0; padding: 0.7em 0 0.2em; background: linear-gradient(transparent, var(--bg) 30%); }
  .adetail__mobile-actions .btn { flex: 1; }
}

/* ==========================================================================
   D · 장비 제어
   ========================================================================== */
.ctrl { height: 100%; display: flex; flex-direction: column; gap: 1em; }
.ctrl__bar { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.ctrl__bar .note-inline { margin-left: auto; padding: 0.5em 0.8em; }
.ctrl__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: min-content; gap: 1em; align-content: start; }
.dev { display: flex; flex-direction: column; gap: 0.75em; padding: 1em 1.1em; border-radius: 1em; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.dev.is-active { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.dev__head { display: flex; align-items: center; gap: 0.6em; }
.dev__icon { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 0.75em; background: var(--panel-2); color: var(--fg-2); }
.dev.is-active .dev__icon { background: var(--brand-weak); color: var(--brand-text); }
.dev__name { font-weight: 800; }
.dev__where { font-size: 0.8em; color: var(--fg-3); }
.dev__head .badge { margin-left: auto; }
.dev__state { display: flex; align-items: baseline; gap: 0.5em; }
.dev__state b { font-size: 1.7em; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dev__state span { font-size: 0.85em; color: var(--fg-2); }
.dev__btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4em; }
.dev__btns .btn { padding: 0 0.4em; min-height: 2.9em; }
.dev__why { font-size: 0.8em; color: var(--fg-3); display: flex; align-items: center; gap: 0.35em; }
.dev__why .ic { width: 1.1em; height: 1.1em; }
.slider { position: relative; height: 0.5em; border-radius: 999px; background: var(--panel-3); }
.slider > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--brand); }
.slider > b { position: absolute; top: 50%; width: 1.3em; height: 1.3em; margin: -0.65em 0 0 -0.65em; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 0 3px var(--brand); }
@container screen (min-width: 2200px) { .ctrl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container screen (max-width: 1439px) {
  .ctrl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; }
  .ctrl__grid > .dev:nth-child(n+7) { display: none; }
  .ctrl__bar .note-inline { display: none; }
  .dev { gap: 0.6em; padding: 0.85em 0.95em; }
}
@container screen (max-width: 599px) {
  .ctrl { height: auto; }
  .ctrl__bar .seg { width: 100%; }
  .ctrl__bar .seg > button { flex: 1; justify-content: center; }
  .ctrl__grid { grid-template-columns: 1fr; }
  .ctrl__grid > .dev:nth-child(n+7) { display: flex; }
}

/* ==========================================================================
   E · 자동화 규칙 · 규칙 편집
   ========================================================================== */
.rules { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 24em; gap: 1em; }
.rules__main { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; }
.rules__bar { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.rules__bar .btn--primary { margin-left: auto; }
.rule { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto auto; align-items: center; gap: 0.9em; padding: 0.8em 1em; border-radius: 0.95em; background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.rule.is-paused { opacity: 0.72; }
.rule__id { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.75em; background: var(--panel-2); font-weight: 800; font-size: 0.9em; }
.rule__id.is-safe { background: color-mix(in srgb, var(--st-danger) 15%, transparent); }
.rule__name { display: flex; align-items: center; gap: 0.45em; font-weight: 750; flex-wrap: wrap; }
.rule__expr { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35em; margin-top: 0.3em; font-size: 0.84em; color: var(--fg-2); }
.rule__expr .tok { display: inline-flex; align-items: center; gap: 0.25em; height: 1.75em; padding: 0 0.5em; border-radius: 0.45em; background: var(--panel-2); font-weight: 650; color: var(--fg); white-space: nowrap; }
.rule__expr .tok--then { background: var(--brand-weak); color: var(--brand-text); }
.rule__arrow { color: var(--fg-3); }
.rule__stat { text-align: right; font-size: 0.8em; color: var(--fg-3); white-space: nowrap; }
.rule__stat b { display: block; font-size: 1.25em; color: var(--fg); font-variant-numeric: tabular-nums; }
@container screen (max-width: 1439px) {
  .rules { grid-template-columns: 1fr; }
  .rules > .card { display: none; }
}
@container screen (max-width: 599px) {
  .rules { height: auto; }
  .rule { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6em; }
  .rule__id, .rule__stat { display: none; }
  .rules__bar .btn--primary { margin-left: 0; width: 100%; order: 3; }
}
.redit { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 26em; gap: 1em; }
.redit__form { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.blk { padding: 1em 1.1em; border-radius: 1em; background: var(--panel); border: 1px solid var(--line); }
.blk__h { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.8em; }
.blk__tag { display: grid; place-items: center; height: 1.8em; padding: 0 0.7em; border-radius: 0.5em; font-size: 0.8em; font-weight: 900; letter-spacing: 0.04em; background: var(--panel-3); }
.blk__tag--then { background: var(--brand); color: var(--brand-ink); }
.blk__title { font-weight: 750; }
.blk__row { display: grid; grid-template-columns: 1.2fr 1.4fr 0.7fr 1fr 1fr; gap: 0.6em; align-items: end; }
.blk__row--then { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.blk__row--opt { grid-template-columns: repeat(3, 1fr); }
.redit__side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.redit__foot { display: flex; gap: 0.5em; justify-content: flex-end; margin-top: auto; }
.sim-bars { display: flex; align-items: flex-end; gap: 0.5em; height: 5.5em; padding-top: 0.6em; }
.sim-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3em; height: 100%; justify-content: flex-end; font-size: 0.72em; color: var(--fg-3); }
.sim-bars i { display: block; width: 100%; max-width: 1.7em; border-radius: 4px 4px 0 0; background: var(--series-1); }
.sim-bars b { color: var(--fg); font-size: 1.05em; }
@container screen (max-width: 1439px) {
  .redit { grid-template-columns: 1fr; }
  .redit__side { display: none; }
  .blk__row { grid-template-columns: 1fr 1.3fr 0.7fr 1fr 1fr; }
}
@container screen (max-width: 599px) {
  .redit { height: auto; }
  .blk__row, .blk__row--then, .blk__row--opt { grid-template-columns: 1fr 1fr; }
  .redit__foot { position: sticky; bottom: 0; padding-top: 0.6em; background: linear-gradient(transparent, var(--bg) 30%); }
  .redit__foot .btn { flex: 1; }
}

/* ==========================================================================
   F · 기기 상태
   ========================================================================== */
.health { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 25em; grid-template-rows: auto minmax(0, 1fr); gap: 1em; }
.health__kpi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1em; }
.health__table { min-height: 0; overflow: hidden; }
.health__side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.api-row { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 0; border-top: 1px solid var(--line); font-size: 0.86em; }
.api-row:first-of-type { border-top: 0; }
.api-row__name { font-weight: 700; }
.api-row__sub { font-size: 0.85em; color: var(--fg-3); }
.api-row .st { margin-left: auto; }
.fault-rule { display: grid; grid-template-columns: auto 1fr; gap: 0.35em 0.7em; font-size: 0.82em; color: var(--fg-2); }
.fault-rule b { color: var(--fg); white-space: nowrap; }
@container screen (max-width: 1439px) {
  .health { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .health__kpi { grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
  .health__kpi > .kpi:last-child { display: none; }
  .health__side { display: none; }
  .tbl .hide-tablet { display: none; }
}
@container screen (max-width: 599px) {
  .health { display: flex; flex-direction: column; height: auto; }
  .health__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
  .health__kpi > .kpi:last-child { display: flex; }
  .health__table .tbl { display: none; }
  .health__side { display: flex; }
}
.hcards { display: none; flex-direction: column; gap: 0.5em; }
@container screen (max-width: 599px) { .hcards { display: flex; } }
.hcard { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.8em; border-radius: 0.85em; background: var(--panel-2); font-size: 0.88em; }
.hcard__id { font-weight: 800; }
.hcard__sub { font-size: 0.85em; color: var(--fg-3); }
.hcard .st { margin-left: auto; }

/* ==========================================================================
   G · 카메라
   ========================================================================== */
.cams { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 22em; gap: 1em; }
.cams__main { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; }
.cams__bar { display: flex; align-items: center; gap: 0.6em; }
.cams__bar .btn--primary { margin-left: auto; }
.cams__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8em; }
.cams__grid .video { aspect-ratio: auto; height: 100%; border-radius: 0.9em; }
.cam-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; border-radius: 0.9em; border: 2px dashed var(--line-2); color: var(--fg-3); font-weight: 650; font-size: 0.92em; cursor: pointer; }
.cam-add .ic { width: 2em; height: 2em; }
.snaps { display: flex; flex-direction: column; gap: 0.6em; }
.snap { display: grid; grid-template-columns: 7em 1fr; gap: 0.7em; align-items: center; font-size: 0.84em; cursor: pointer; }
.snap .video { border-radius: 0.55em; }
.snap b { display: block; font-weight: 750; }
@container screen (max-width: 1439px) {
  .cams { grid-template-columns: 1fr; }
  .cams > .card { display: none; }
}
@container screen (max-width: 599px) {
  .cams { height: auto; }
  .cams__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .cams__grid .video { aspect-ratio: 16 / 9; height: auto; }
  .cams__bar .seg { display: none; }
}

/* ==========================================================================
   H · 리포트
   ========================================================================== */
.report { height: 100%; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 1em; }
.report__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.6em; }
.report__bar .btn { margin-left: auto; }
.report__kpi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.report__chart { display: flex; flex-direction: column; }
.report__chart .chart { flex: 1; }
.report__side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.keep { display: flex; flex-direction: column; gap: 0.7em; }
.keep__row { display: grid; grid-template-columns: 3em 1fr 3em; align-items: center; gap: 0.6em; font-size: 0.86em; }
.keep__row .bar { height: 0.6em; }
.keep__row b { text-align: right; font-variant-numeric: tabular-nums; }
.tip { display: flex; gap: 0.7em; padding: 0.85em 0.95em; border-radius: 0.9em; background: var(--brand-weak); font-size: 0.86em; line-height: 1.5; }
.tip .ic { color: var(--brand-text); flex: none; margin-top: 0.1em; }
.tip b { color: var(--fg); }
@container screen (max-width: 1439px) {
  .report { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.8em; }
  .report__side { display: none; }
}
@container screen (max-width: 599px) {
  .report { display: flex; flex-direction: column; height: auto; }
  .report__kpi { grid-template-columns: 1fr 1fr; gap: 0.6em; }
  .report__chart .chart { height: 15em; flex: none; }
  .report__side { display: flex; }
  .report__bar .btn { display: none; }
}

/* ==========================================================================
   I · 작물 · 기준값 설정 / 공간 편집
   ========================================================================== */
.crop { height: 100%; display: grid; grid-template-columns: 22em minmax(0, 1fr) 22em; gap: 1em; }
.crop__info { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.crop__hero { display: flex; align-items: center; gap: 0.8em; }
.crop__img { display: grid; place-items: center; flex: none; width: 3.6em; height: 3.6em; border-radius: 1em; background: color-mix(in srgb, var(--st-danger) 16%, transparent); }
.crop__img svg { width: 2.4em; height: 2.4em; }
.crop__name { font-size: 1.35em; font-weight: 800; }
.crop__desc { font-size: 0.85em; color: var(--fg-2); line-height: 1.55; }
.pest { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0; border-top: 1px solid var(--line); font-size: 0.85em; }
.pest b { font-weight: 750; }
.pest span { color: var(--fg-3); font-size: 0.92em; }
.thr { min-height: 0; overflow: hidden; }
.thr .tbl td { padding: 0.5em 0.55em; }
.thr .tbl .input { height: 2.2em; width: 4.4em; font-size: 0.95em; justify-content: center; }
.thr .tbl .input--peer { background: var(--brand-weak); border-color: transparent; color: var(--brand-text); }
.thr__band { display: inline-flex; gap: 0.25em; align-items: center; font-variant-numeric: tabular-nums; }
.crop__side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.esc-set { display: flex; flex-direction: column; gap: 0.45em; }
.esc-set__row { display: flex; align-items: center; gap: 0.6em; padding: 0.55em 0.7em; border-radius: 0.7em; background: var(--panel-2); font-size: 0.86em; }
.esc-set__row b { font-weight: 750; }
.esc-set__row span:last-child { margin-left: auto; color: var(--fg-3); }
@container screen (max-width: 1439px) {
  .crop { grid-template-columns: minmax(0, 1fr) 19em; }
  .crop__info { display: none; }
}
@container screen (max-width: 599px) {
  .crop { display: flex; flex-direction: column; height: auto; }
  .crop__info { display: flex; }
  .thr .tbl .hide-phone { display: none; }
}

.space { height: 100%; display: grid; grid-template-columns: 19em minmax(0, 1fr) 21em; gap: 1em; }
.space__form { display: flex; flex-direction: column; gap: 0.8em; min-height: 0; overflow: hidden; }
.space__form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.space__view { position: relative; display: flex; flex-direction: column; min-height: 0; }
.space__view > .f3d { flex: 1; }
.space__tools { position: absolute; top: 0.8em; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 0.3em; padding: 0.3em; border-radius: 0.9em; background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-2); backdrop-filter: blur(10px); }
.space__tools .btn { height: 2.3em; font-size: 0.82em; background: transparent; border: 0; }
.space__tools .btn.is-on { background: var(--brand-weak); }
.space__side { display: flex; flex-direction: column; gap: 1em; min-height: 0; }
.tree { display: flex; flex-direction: column; gap: 0.15em; font-size: 0.86em; }
.tree__row { display: flex; align-items: center; gap: 0.5em; padding: 0.4em 0.55em; border-radius: 0.55em; }
.tree__row .ic { color: var(--fg-3); }
.tree__row span:last-child { margin-left: auto; color: var(--fg-3); font-size: 0.9em; }
.tree__row.is-sel { background: var(--brand-weak); color: var(--brand-text); font-weight: 700; }
.tree__row.is-sel .ic { color: var(--brand-text); }
.space__phone { display: none; }
@container screen (max-width: 1439px) {
  .space { grid-template-columns: 17em minmax(0, 1fr); }
  .space__side { display: none; }
}
@container screen (max-width: 599px) {
  .space { display: none; }
  .space__phone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8em; height: 100%; text-align: center; color: var(--fg-2); padding: 2em 1em; }
  .space__phone .ic { width: 3em; height: 3em; color: var(--fg-3); }
  .space__phone b { color: var(--fg); font-size: 1.1em; }
}

/* ==========================================================================
   M · 더보기 (폰)
   ========================================================================== */
.more { display: flex; flex-direction: column; gap: 1em; }
.more__group { display: flex; flex-direction: column; border-radius: 1em; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.more__row { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1em; border-top: 1px solid var(--line); font-weight: 650; cursor: pointer; }
.more__row:first-child { border-top: 0; }
.more__row .ic:first-child { color: var(--fg-2); }
.more__row .ic:last-child { margin-left: auto; color: var(--fg-3); }
.more__row .badge { margin-left: auto; }
.more__row .badge + .ic { margin-left: 0.3em; }

/* ---------- 보완 ---------- */
.top__back { display: none !important; }
@container screen (max-width: 599px) { .top__back { display: grid !important; margin-left: -0.4em; } }
.dash__charts > .card, .report__chart, .zone__chart { display: flex; flex-direction: column; }
.dash__charts .chart { flex: 1; height: auto; }
.chart[data-mini] .chart__plot { margin: 0 0 1.1em; min-height: 2.6em; }
.chart[data-mini] .chart__x { font-size: 0.66em; }
.dash__alerts > .card:first-child { flex: none; }
.dash__alerts > .card:last-child { flex: 1; min-height: 0; overflow: hidden; }
@container screen (max-width: 1439px) { .dash__alerts > .card:first-child { flex: 1; } }
@container screen (max-width: 599px) {
  .dash__view { height: 30em; }
  .f3d-tools { top: 0.6em; left: 0.6em; right: 0.6em; gap: 0.35em; }
  .f3d-tools .seg > button { height: 1.85em; padding: 0 0.6em; font-size: 0.8em; }
  .f3d-legend { font-size: 0.68em; left: 0.6em; bottom: 0.6em; right: 3.6em; }
  .f3d-views { right: 0.6em; bottom: 0.6em; }
  .f3d-views button { width: 2.2em; height: 2.2em; }
  .f3d-compass { width: 2.2em; height: 2.2em; }
  .f3d-compass--free { right: 0.6em; bottom: 0.6em; }
  .f3d-wx { left: 0.6em; top: 3.1em; font-size: 0.82em; max-width: calc(100% - 4.4em); padding: 0.35em 0.7em 0.35em 0.4em; }
}
.adetail { grid-template-rows: auto minmax(0, 1.15fr) minmax(0, 1fr); }
.adetail__chart, .adetail__snap { display: flex; flex-direction: column; }
.adetail__chart .chart { flex: 1; height: auto; }
.adetail__snap .video { flex: 1; aspect-ratio: auto; min-height: 8em; }
@container screen (max-width: 599px) { .adetail__chart .chart { flex: none; height: 12em; } .adetail__snap .video { aspect-ratio: 16 / 9; flex: none; } }
.crop > .thr { align-self: start; }
.thr .tbl .input--peer { width: 5.8em; }

/* ==========================================================================
   A-4 바람 · 비 · A-5 야생동물 (날씨 아이콘 · 야생동물 감지)
   화살표(.wxdir) = 바람이 흘러가는 쪽, 위가 북쪽 — --deg 로 돌림
   ========================================================================== */
.kpi--wx { cursor: pointer; }
.kpi__go { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2em; height: 1.6em; padding: 0 0.5em; border-radius: 999px; background: var(--panel-2); color: var(--fg-3); font-size: 0.85em; font-weight: 700; }
.wxdir { display: inline-grid; place-items: center; vertical-align: -0.2em; color: var(--f3d-wind); transform: rotate(var(--deg, 0deg)); }
.wxdir .ic { stroke-width: 2.6; }
.seg--full { display: flex; }
.seg--full > button { flex: 1; justify-content: center; }
.wxnow { display: flex; align-items: center; gap: 1.2em; }
.wxnow[hidden] { display: none; }
.wxnow .big-num { margin-top: 0.3em; }
.wxnow .muted { font-size: 0.82em; margin-top: 0.2em; }
.wxnow__rain { display: flex; align-items: center; gap: 0.35em; margin-top: 0.35em; font-size: 0.84em; font-weight: 650; color: var(--fg-2); }
.wxrose { position: relative; flex: none; width: 7.4em; height: 7.4em; border-radius: 50%; border: 1px solid var(--line-2); background: radial-gradient(circle, var(--panel-2) 0 55%, transparent 56%); }
.wxrose b { position: absolute; font-size: 0.7em; font-weight: 800; color: var(--fg-3); line-height: 1; }
.wxrose b:nth-child(1) { top: 0.45em; left: 50%; transform: translateX(-50%); color: var(--st-danger); }
.wxrose b:nth-child(2) { right: 0.5em; top: 50%; transform: translateY(-50%); }
.wxrose b:nth-child(3) { bottom: 0.45em; left: 50%; transform: translateX(-50%); }
.wxrose b:nth-child(4) { left: 0.5em; top: 50%; transform: translateY(-50%); }
.wxrose__arrow { position: absolute; inset: 0; display: grid; place-items: center; color: var(--f3d-wind); transform: rotate(var(--deg, 0deg)); }
.wxrose__arrow .ic { width: 3.4em; height: 3.4em; stroke-width: 2.2; }
.wxrose.is-strong .wxrose__arrow { color: var(--st-caution); }
.wxhours { display: flex; flex-direction: column; }
.wxhours__row { display: grid; grid-template-columns: 3em 1.6em 1fr 3em 3.2em; align-items: center; gap: 0.4em; padding: 0.42em 0.3em; border-top: 1px solid var(--line); font-size: 0.84em; font-variant-numeric: tabular-nums; }
.wxhours__row:first-child { border-top: 0; }
.wxhours__row b { text-align: right; font-weight: 750; }
.wxhours__row > :last-child { text-align: right; color: var(--fg-2); }
.wxhours__row.is-strong { background: color-mix(in srgb, var(--st-caution) 12%, transparent); border-radius: 0.5em; }
.wxhours__row.is-strong .wxdir { color: var(--st-caution); }
.video__rec { display: inline-flex; align-items: center; height: 1.6em; padding: 0 0.5em; border-radius: 0.35em; background: rgba(20, 24, 28, 0.75); font-size: 0.85em; text-shadow: none; }
.log--sec .log__row { grid-template-columns: 4.6em 1fr auto; }
.top__weather { cursor: pointer; }
/* 3D 를 같이 봐야 하는 시트 (바람 · 비 · 야생동물) — 폰에서 반만 올라옴 */
@container screen (max-width: 599px) {
  .drawer--peek { max-height: 54%; }
  .drawer--peek .wxrose { width: 5.6em; height: 5.6em; }
  .drawer--peek .wxrose__arrow .ic { width: 2.6em; height: 2.6em; }
}
@container screen (max-width: 599px) {
  .scr[data-wx] .dash__kpi, .scr[data-wild] .dash__kpi { display: none; }
}
/* 날씨 데이터 출처 (실제 날씨 · 데모 값) */
.wxsrc { display: flex; align-items: center; gap: 0.6em; }
.wxsrc__line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.35em; font-size: 0.74em; color: var(--fg-3); line-height: 1.35; }
.wxsrc__line .ic { width: 1.15em; height: 1.15em; flex: none; }
.wxsrc .seg > button { height: 1.8em; font-size: 0.76em; padding: 0 0.6em; }
.seg > button:disabled { opacity: 0.4; cursor: default; }