:root {
  --bg: #0b1220;
  --panel: #121b2d;
  --panel-2: #0f1727;
  --line: rgba(255,255,255,0.08);
  --text: #edf2ff;
  --muted: #9fb1d1;
  --green: #16c784;
  --orange: #ff9f0a;
  --red: #ff453a;
  --blue: #3d8bfd;
  --shadow: 0 12px 32px rgba(0,0,0,0.24);
  --bg-gradient: radial-gradient(circle at top, #14213b 0, var(--bg) 38%);
  --fs-title: 24px;
  --fs-subtitle: 18px;
  --fs-label: 12px;
  --fs-value: 20px;
  --fs-body: 14px;
  --fs-small: 12px;
}
:root[data-theme="light"] {
  --bg: #edf3fb;
  --panel: #ffffff;
  --panel-2: #f7faff;
  --line: rgba(25,45,80,0.12);
  --text: #132238;
  --muted: #62758f;
  --green: #0b9f5b;
  --orange: #d48400;
  --red: #d7342b;
  --blue: #2d6cdf;
  --shadow: 0 10px 28px rgba(60,88,130,0.12);
  --bg-gradient: linear-gradient(180deg, #f5f9ff 0%, #edf3fb 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-gradient); color: var(--text); font-family: Arial, sans-serif; font-size: var(--fs-body); }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: var(--fs-small); }
.app-shell { display: grid; grid-template-columns: 360px 1fr; min-height: 100vh; gap: 18px; padding: 18px; }
.sidebar, .main-content, .detail-wrap { display: flex; flex-direction: column; gap: 18px; }
.brand-card, .panel-card { background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #fff 8%), var(--panel)); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.brand-card { padding: 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: relative; }
.brand-actions, .top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.eyebrow { font-size: var(--fs-small); letter-spacing: 0.18em; color: var(--blue); margin-bottom: 8px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.js-title, .brand-card h1 { font-size: var(--fs-title); line-height: 1.25; }
.js-subtitle, h2, h3, .sub-card-title { font-size: var(--fs-subtitle); }
.live-dot { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); border-radius: 999px; padding: 9px 12px; font-size: var(--fs-small); font-weight: 700; }
.summary-grid { padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.summary-item { background: color-mix(in srgb, var(--panel-2) 90%, transparent); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.summary-item span { display: block; color: var(--muted); font-size: var(--fs-label); margin-bottom: 6px; }
.summary-item strong { font-size: calc(var(--fs-value) + 4px); }
.search-card, .device-list-card, .detail-card, .chart-card, .map-wrap, .device-page-card { padding: 16px; }
#searchInput, .form-field input, .form-field select, .table-toolbar select, .camera-map-row input { width: 100%; background: color-mix(in srgb, var(--panel-2) 92%, transparent); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-body); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; padding: 6px 6px 0; }
.ghost-btn, .ghost-link, .page-btn { background: color-mix(in srgb, var(--panel-2) 92%, transparent); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: var(--fs-body); }
.ghost-btn:hover, .ghost-link:hover, .page-btn:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); }
.danger-btn { color: var(--red); }
.device-list { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 380px); overflow: auto; padding-right: 6px; }
.device-item { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: color-mix(in srgb, var(--panel-2) 90%, transparent); cursor: pointer; transition: 0.2s ease; }
.device-item:hover, .device-item.active { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue) 45%, transparent); background: color-mix(in srgb, var(--blue) 12%, var(--panel)); }
.device-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.device-name { font-size: calc(var(--fs-body) + 1px); font-weight: 700; }
.device-sub { color: var(--muted); font-size: var(--fs-small); }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.mini-metrics div { padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); font-size: var(--fs-small); }
.status-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: var(--fs-body); }
.badge-stable { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
.badge-caution { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.badge-warning { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.main-content { display: grid; grid-template-columns: minmax(500px, 1.2fr) minmax(460px, 0.8fr); gap: 18px; }
.full-height { min-height: calc(100vh - 36px); }
.map-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; padding: 6px 6px 0; }
.map-legend { display: flex; gap: 12px; font-size: var(--fs-small); color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot.stable { background: var(--green); }
.dot.caution { background: var(--orange); }
.dot.warning { background: var(--red); }
#map { width: 100%; height: calc(100vh - 120px); border-radius: 18px; background: linear-gradient(135deg, #dfeaf7, #c9d7e8); }
:root[data-theme="dark"] #map { background: linear-gradient(135deg, #13203a, #0b1220); }
.no-maps-key #map::before { content: 'config.php에 Google Maps API Key를 입력하세요.'; display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.detail-card { min-height: 420px; }
.empty-state { min-height: 320px; display: flex; align-items: center; justify-content: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }
.detail-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.metric-card, .sub-card, .data-table-card { border: 1px solid var(--line); background: color-mix(in srgb, var(--panel-2) 90%, transparent); border-radius: 16px; padding: 14px; }
.metric-card span { display: block; color: var(--muted); font-size: var(--fs-label); margin-bottom: 8px; }
.metric-card strong { font-size: var(--fs-value); }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-grid.single { grid-template-columns: 1fr; margin-top: 12px; }
.sub-card-title { font-weight: 700; margin-bottom: 12px; }
.weather-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.weather-grid .weather-item { border-radius: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 10px; }
.weather-item span { display: block; color: var(--muted); font-size: var(--fs-label); }
.weather-item strong { font-size: calc(var(--fs-value) - 3px); display: block; margin-top: 4px; }
.camera-frame { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--panel) 86%, #000); }
.camera-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-box { color: var(--text); line-height: 1.65; font-size: var(--fs-body); }
.ai-box ul { margin: 10px 0 0 18px; padding: 0; }
.chart-card canvas { width: 100%; background: color-mix(in srgb, var(--panel-2) 92%, transparent); border-radius: 14px; }
.device-page-body { padding: 18px; }

.camera-browser-card .card-title-row, .data-table-card .card-title-row { padding: 0; }
.device-page-card > .card-title-row { padding: 0 0 6px; }
.panel-card.left-panel > .card-title-row, .panel-card.right-panel > .card-title-row, .panel-card.center-panel > .map-header { padding-top: 10px; padding-left: 10px; padding-right: 10px; }
.device-page-wrap { max-width: 1600px; margin: 0 auto; }
.table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.table-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.data-table { width: 100%; border-collapse: collapse; min-width: 1200px; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: var(--fs-small); white-space: nowrap; }
.data-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.table-empty { text-align: center; color: var(--muted); }
.pagination { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.page-btn.active { background: color-mix(in srgb, var(--blue) 16%, var(--panel)); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.page-btn:disabled { opacity: 0.45; cursor: default; }
.admin-grid-2 { grid-template-columns: 1fr 1fr; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-body); }
.form-field span { color: var(--muted); font-size: var(--fs-label); }
.camera-map-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.camera-map-row { display: grid; grid-template-columns: 1fr 160px auto; gap: 10px; }
@media (max-width: 1400px) {
  .main-content { grid-template-columns: 1fr; }
  .full-height { min-height: 520px; }
  #map { height: 520px; }
}
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .sub-grid, .admin-grid-2, .admin-form-grid, .camera-map-row { grid-template-columns: 1fr; }
}

.device-map-marker { position: absolute; transform: translate(-50%, -100%); cursor: pointer; user-select: none; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.30)); }
.device-map-marker.is-grouped { z-index: 8; }
.device-map-marker__count { position: absolute; right: -8px; top: -8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #111827; font-size: 11px; font-weight: 800; z-index: 7; box-shadow: 0 8px 16px rgba(0,0,0,0.24); border: 2px solid rgba(15,23,42,0.08); }
.device-map-marker__label { position: relative; z-index: 4; min-width: 110px; padding: 10px 15px; border-radius: 999px; text-align: center; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }
.device-map-marker__pin { position: absolute; left: 50%; bottom: -11px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); border-radius: 0 0 5px 0; z-index: 3; }
.device-map-marker__pulse { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; animation: marker-breath 2.2s ease-in-out infinite; }
.device-map-marker__core { position: absolute; left: 50%; top: calc(100% - 6px); width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; z-index: 5; border: 2px solid rgba(255,255,255,0.92); }
.device-map-marker.marker-stable .device-map-marker__label, .device-map-marker.marker-stable .device-map-marker__pin, .device-map-marker.marker-stable .device-map-marker__core { background: rgba(22,199,132,0.92); }
.device-map-marker.marker-stable .device-map-marker__pulse { background: rgba(22,199,132,0.34); }
.device-map-marker.marker-caution .device-map-marker__label, .device-map-marker.marker-caution .device-map-marker__pin, .device-map-marker.marker-caution .device-map-marker__core { background: rgba(255,159,10,0.95); }
.device-map-marker.marker-caution .device-map-marker__pulse { background: rgba(255,159,10,0.34); }
.device-map-marker.marker-warning .device-map-marker__label, .device-map-marker.marker-warning .device-map-marker__pin, .device-map-marker.marker-warning .device-map-marker__core { background: rgba(255,69,58,0.95); }
.device-map-marker.marker-warning .device-map-marker__pulse { background: rgba(255,69,58,0.34); }
@keyframes marker-breath { 0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.42; } 50% { transform: translate(-50%, -50%) scale(1.75); opacity: 0.08; } }

.device-page-wrap { max-width: min(96vw, 2400px); }
.device-page-card { padding: 20px; }
.device-full-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.device-main-stack, .device-side-stack { display: flex; flex-direction: column; gap: 18px; }
.device-upper-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr); gap: 18px; align-items: start; }
.camera-browser-card { min-width: 0; }
.camera-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#cameraDateSelect { min-width: 150px; max-width: 180px; }
.camera-main-view { aspect-ratio: 16 / 7; max-height: 360px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--panel) 86%, #000); }
.camera-main-view img { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.camera-image-caption { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); }
.camera-thumb-strip { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; max-height: 280px; overflow: auto; padding-right: 4px; }
.camera-thumb { padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 90%, transparent); color: var(--text); cursor: pointer; text-align: left; }
.camera-thumb.active { border-color: color-mix(in srgb, var(--blue) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }
.camera-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 8px; }
.camera-thumb:hover { border-color: color-mix(in srgb, var(--blue) 35%, transparent); transform: translateY(-1px); transition: 0.18s ease; }
.camera-thumb span { display: block; font-size: 11px; line-height: 1.35; word-break: break-all; }
.camera-empty { min-height: 180px; }
.disabled-link { opacity: 0.45; pointer-events: none; }
.device-mini-map { width: 100%; min-height: 260px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #dfeaf7, #c9d7e8); }
.map-empty-text { height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; color: var(--muted); }

@media (max-width: 1800px) { .device-upper-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr); } }
@media (max-width: 1280px) { .device-upper-grid { grid-template-columns: 1fr; } .device-mini-map { min-height: 280px; } }
@media (max-width: 960px) { .camera-thumb-strip { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .camera-toolbar { flex-direction: column; align-items: stretch; } #cameraDateSelect { max-width: none; } }


.chart-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.segmented-control { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.chart-canvas-wrap { position: relative; min-height: 280px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--panel) 94%, transparent); }
.chart-canvas-wrap canvas { display: block; width: 100%; height: 280px; }
.chart-empty-state { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-small); background: color-mix(in srgb, var(--panel) 88%, transparent); }
.chart-legend-inline { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: var(--fs-small); margin-top: 12px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.legend-temp { background: var(--blue); }
.legend-humidity { background: #16c784; }
.legend-soil { background: #ff9f0a; }
.legend-trend-note { opacity: 0.9; }
.ghost-btn.active { background: color-mix(in srgb, var(--blue) 16%, var(--panel)); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }


.map-multi-device-popup { min-width: 240px; max-width: 320px; padding: 4px 2px 2px; color: #111827; }
.map-multi-device-popup__title { font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.map-multi-device-popup__coord { font-size: 11px; color: #6b7280; margin-bottom: 10px; }
.map-multi-device-popup__list { display: flex; flex-direction: column; gap: 8px; }
.map-device-link { width: 100%; border: 1px solid #d1d5db; background: #fff; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; text-align: left; }
.map-device-link:hover { border-color: #60a5fa; background: #eff6ff; }
.map-device-link__name { font-size: 13px; font-weight: 700; color: #111827; }
.map-device-link__meta { font-size: 12px; color: #4b5563; }