/* Steco 기상관제 — 콘솔형 레이아웃 (AWS 콘솔이 쓰는 공개 디자인 시스템 Cloudscape의 구성을 참고) */
:root {
  --topnav: #0f1b2a;
  --topnav-fg: #d1d5db;
  --bg: #f2f3f3;
  --panel: #ffffff;
  --fg: #000716;
  --muted: #5f6b7a;
  --line: #e9ebed;
  --line-strong: #c6c6cd;
  --input-line: #7d8998;
  --primary: #0972d3;
  --primary-hover: #033160;
  --primary-weak: #f2f8fd;
  --ok: #037f0c;
  --warn: #8d6605;
  --bad: #d91515;
  --off: #5f6b7a;
  --shadow: 0 1px 1px 1px rgba(0, 7, 22, .06), 0 0 0 1px #e9ebed;
  --radius: 16px;
  --sidenav-w: 240px;
  --font: "Open Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.spacer { flex: 1; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/20px var(--font);
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
h1 { font-size: 24px; line-height: 30px; font-weight: 700; margin: 0; }
h2 { font-size: 18px; line-height: 22px; font-weight: 700; margin: 0; }
h3 { font-size: 14px; line-height: 20px; font-weight: 700; margin: 0; }

/* ── 상단 바 ─────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 20px;
  background: var(--topnav); color: var(--topnav-fg);
}
.topnav .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.topnav .brand:hover { text-decoration: none; color: #fff; }
.topnav .brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, #4ea1ff, #0972d3);
  display: grid; place-items: center; font-size: 13px; color: #fff;
}
.topnav .env { font-size: 12px; color: #9aa4b2; border: 1px solid #414d5c; border-radius: 4px; padding: 0 6px; line-height: 18px; }
.topnav .spacer { flex: 1; }
.topnav .user { display: flex; align-items: center; gap: 16px; }
.topnav .user a, .topnav .user button { color: var(--topnav-fg); }
.topnav .user a:hover, .topnav .user button:hover { color: #fff; text-decoration: none; }
.topnav .user form { margin: 0; }
.topnav .role { font-size: 12px; color: #9aa4b2; }
.menu-toggle { display: none; color: #fff; font-size: 20px; cursor: pointer; padding: 4px; }
#menu-open { display: none; }

/* ── 앱 레이아웃 ─────────────────────────────────── */
.app { display: flex; min-height: calc(100vh - 48px); }
.sidenav {
  width: var(--sidenav-w); flex: none;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 20px 0;
  position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto;
}
.sidenav .section { padding: 0 24px; margin-bottom: 20px; }
.sidenav .section-title { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; margin-bottom: 6px; }
.sidenav a { display: block; color: var(--muted); padding: 4px 0; }
.sidenav a:hover { color: var(--primary); text-decoration: none; }
.sidenav a.on { color: var(--primary); font-weight: 700; }
.sidenav .soon { display: block; color: #a8b0bb; padding: 4px 0; cursor: default; }
.sidenav hr { border: 0; border-top: 1px solid var(--line); margin: 0 24px 20px; }

.main { flex: 1; min-width: 0; padding: 16px 32px 24px; display: flex; flex-direction: column; }
.main-inner { max-width: 1280px; width: 100%; flex: 1; }

/* 푸터: 과제명·참여기관 (모든 화면, 내용이 짧아도 화면 아래쪽) */
.site-footer {
  max-width: 1280px; width: 100%; margin-top: 32px; padding-top: 16px;
  border-top: 1px solid var(--line-strong); color: var(--muted); font-size: 12px; line-height: 18px;
}
.site-footer .project { color: var(--fg); font-weight: 700; }
.login-wrap .site-footer { max-width: 400px; text-align: center; border-top: 0; margin-top: 8px; }

/* 브레드크럼 */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--muted); margin: 4px 0 16px; }
.breadcrumbs a { color: var(--primary); }
.breadcrumbs .sep { color: #a8b0bb; }

/* 페이지 헤더 */
.page-header { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header .titles { flex: 1; min-width: 240px; }
.page-header .desc { color: var(--muted); margin-top: 4px; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 컨테이너 ────────────────────────────────────── */
.container {
  background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
  margin-bottom: 20px; overflow: hidden;
}
.container > .c-header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 8px;
}
.container > .c-header .titles { flex: 1 1 220px; min-width: 0; }
.container > .c-header .counter { color: var(--muted); font-weight: 400; }
.container > .c-header .desc { color: var(--muted); font-size: 14px; margin-top: 2px; font-weight: 400; }
.container > .c-body { padding: 8px 20px 20px; }
.container > .c-body.flush { padding: 0; }
.container > .c-footer { border-top: 1px solid var(--line); padding: 12px 20px; color: var(--muted); font-size: 13px; }

/* 키-값 목록 */
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px 24px; }
.kv .k { color: var(--muted); font-size: 13px; }
.kv .v { margin-top: 2px; word-break: break-all; }

/* ── 플래시바 ────────────────────────────────────── */
.flashbar {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--primary); color: #fff; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
}
.flashbar::before { content: "i"; flex: none; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; font: 700 11px/14px var(--font); text-align: center; margin-top: 1px; }
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  border: 2px solid var(--bad); background: #fff7f7; color: var(--fg);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
}
.alert::before { content: "!"; flex: none; width: 18px; height: 18px; background: var(--bad); color: #fff; border-radius: 50%; font: 700 12px/18px var(--font); text-align: center; margin-top: 1px; }
.alert.info { border-color: var(--primary); background: var(--primary-weak); }
.alert.info::before { content: "i"; background: var(--primary); }

/* ── 상태 표시 ───────────────────────────────────── */
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex: none;
  background-repeat: no-repeat; background-position: center; background-size: 10px;
}
.status.ok { color: var(--ok); }
.status.ok::before { background-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.status.warn { color: var(--warn); }
.status.warn::before { border-radius: 2px; background-color: transparent; background-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.2L13 12.5H1z' fill='%23d0a100'/%3E%3Cpath d='M7 5.2v3.4M7 10.3v.1' stroke='%23000716' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.status.bad { color: var(--bad); }
.status.bad::before { background-color: var(--bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3l-4 4' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.status.off { color: var(--off); }
.status.off::before { background: none; border: 2px solid var(--off); width: 12px; height: 12px; }
.status.info { color: var(--primary); }
.status.info::before { background-color: var(--primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 4.5v3M5 2.6v.1' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.badge {
  display: inline-block; font-size: 12px; line-height: 18px; font-weight: 700;
  padding: 0 8px; border-radius: 4px; background: #e9ebed; color: var(--fg); vertical-align: middle;
}
.badge.blue { background: var(--primary); color: #fff; }
.badge.red { background: var(--bad); color: #fff; }
.badge.green { background: var(--ok); color: #fff; }

/* ── 버튼 ────────────────────────────────────────── */
.btn, button {
  font: 700 14px/20px var(--font); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 20px; border-radius: 20px;
  border: 2px solid var(--primary); background: var(--panel); color: var(--primary);
  white-space: nowrap;
}
.btn:hover, button:hover { background: var(--primary-weak); border-color: var(--primary-hover); color: var(--primary-hover); text-decoration: none; }
.btn.primary, button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn.primary:hover, button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
button.danger { border-color: var(--bad); color: var(--bad); }
button.danger:hover { background: #fff7f7; }
button:disabled, button:disabled:hover { border-color: #e9ebed; color: #9ba7b6; background: var(--panel); cursor: default; }
.btn.link, button.link { border-color: transparent; background: none; padding-left: 8px; padding-right: 8px; }
.btn.link:hover, button.link:hover { background: none; color: var(--primary-hover); }
.topnav button.link { padding: 0; font-weight: 400; }

/* ── 표 ──────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 20px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { font-weight: 700; color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line-strong); }
tbody tr:hover td { background: #f9fafb; }
tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; }
tr.inactive td { color: var(--muted); }
td .row { display: flex; gap: 8px; align-items: center; }
.empty { text-align: center; color: var(--muted); padding: 32px 20px; }

/* ── 폼 ──────────────────────────────────────────── */
.form-section { display: grid; gap: 20px; max-width: 720px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 4px; }
.field > .label { font-weight: 700; }
.field .hint { color: var(--muted); font-size: 12px; line-height: 16px; }
.field .err { color: var(--bad); font-size: 12px; line-height: 16px; display: flex; gap: 6px; }
.field .err::before { content: "!"; width: 14px; height: 14px; background: var(--bad); color: #fff; border-radius: 50%; font: 700 10px/14px var(--font); text-align: center; flex: none; margin-top: 1px; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  font: 14px/20px var(--font); width: 100%;
  padding: 4px 12px; min-height: 32px;
  border: 2px solid var(--input-line); border-radius: 8px;
  background: #fff; color: var(--fg);
}
textarea { padding: 6px 12px; }
::placeholder { color: #a8b0bb; opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 0; border-color: var(--primary); }
input[readonly] { background: #f2f3f3; border-color: #e9ebed; color: var(--muted); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--bad); }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--primary); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; margin: 4px 0 24px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.inline-form input { max-width: 260px; }
.mono { font-family: Monaco, Menlo, Consolas, "Courier Prime", monospace; font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 16px; }

/* ── 로그인 ──────────────────────────────────────── */
body.bare { background: var(--bg); }
.login-wrap { min-height: calc(100vh - 48px); display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 400px; }
.login .c-body { display: grid; gap: 16px; padding: 8px 20px 24px; }
.login button { justify-content: center; width: 100%; }

.placeholder { max-width: 720px; }

/* ── P4: 관제 화면 ───────────────────────────────── */
.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }
table.grouped th.grp { text-align: center; border-bottom: 1px solid var(--line); }
table.grouped th { padding-top: 8px; padding-bottom: 8px; }
select.compact, input.compact { width: auto; min-width: 140px; }
.page-header .inline-form select { width: auto; }
.chart { width: 100%; height: 300px; }
.chart-rose { height: 360px; }
.chart-cal { height: 200px; }
.chart-note { color: var(--muted); font-size: 12px; min-height: 16px; margin-top: 4px; }
.grid-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.rose-box { max-width: 640px; }
.h-status { font-size: 14px; font-weight: 400; vertical-align: middle; margin-left: 8px; }
.custom-range { margin-bottom: 8px; }
.csv-row { margin-top: 4px; }
.btn.disabled { border-color: #e9ebed; color: #9ba7b6; cursor: not-allowed; }
.custom-range input { width: auto; }

/* 세그먼트 버튼 */
.seg { display: inline-flex; border: 2px solid var(--input-line); border-radius: 20px; overflow: hidden; background: #fff; }
.seg button { border: 0; border-radius: 0; padding: 2px 14px; font-weight: 700; color: var(--muted); background: #fff; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { background: var(--primary-weak); color: var(--primary-hover); }
.seg button.on { background: var(--topnav); color: #fff; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
.kpi { padding: 16px 20px; }
.kpi .k { color: var(--muted); font-weight: 700; }
.kpi .v { font-size: 36px; line-height: 44px; font-weight: 300; font-variant-numeric: tabular-nums; }
.kpi .s { color: var(--muted); font-size: 12px; min-height: 16px; }

/* 최신값 카드 */
.vcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vcard { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.vcard .k { color: var(--muted); font-size: 12px; }
.vcard .v { font-size: 24px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vcard .v small { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 2px; }

/* 지도 관제 */
.map-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; height: calc(100vh - 210px); min-height: 480px; }
.map-layout .container { margin-bottom: 0; }
.dev-panel { display: flex; flex-direction: column; min-height: 0; }
.dev-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dev-summary .sep { width: 10px; }
.dev-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.dev-list li { padding: 12px 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.dev-list li:hover { background: #f9fafb; }
.dev-list li.empty { cursor: default; color: var(--muted); text-align: center; }
.dev-list .li-top { display: flex; align-items: center; gap: 8px; }
.dev-list .li-name { font-weight: 700; margin-top: 2px; }
.dev-list .li-actions { margin-top: 2px; font-size: 12px; }
.dev-list li.nopos .li-name::after { content: " (위치 미지정)"; font-weight: 400; color: var(--muted); font-size: 12px; }
/* Leaflet은 내부 요소에 z-index 400~1000을 쓴다. 지도 상자에 쌓임 맥락을 따로 만들어
   그 값이 상단 바·모바일 메뉴보다 위로 올라오지 않게 한다 (2026-10-21 모바일 스크롤 시 지도가 덮던 문제) */
.map-box { position: relative; isolation: isolate; }
#map { position: absolute; inset: 0; border-radius: var(--radius); }
.leaflet-container { font-family: var(--font); background: #e9ebed; }

/* 지도 위 값 카드 (마커) */
.mcard-wrap { background: none; border: 0; }
.mcard {
  position: absolute; left: 0; bottom: 8px; transform: translateX(-50%);
  min-width: 156px; background: #fff; border-radius: 10px; padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(0, 7, 22, .22); border-top: 4px solid var(--off);
  font-size: 12px; line-height: 18px; color: var(--fg); cursor: pointer; white-space: nowrap;
}
.mcard::after { content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #fff; }
.mcard.st-ok { border-top-color: var(--ok); }
.mcard.st-delay { border-top-color: #d0a100; }
.mcard.st-offline { border-top-color: var(--bad); }
.mcard .mc-head { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.mcard .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.mcard.st-ok .dot { background: var(--ok); }
.mcard.st-delay .dot { background: #d0a100; }
.mcard.st-offline .dot { background: var(--bad); }
.mcard .mc-row { display: flex; justify-content: space-between; gap: 12px; }
.mcard .mc-row span { color: var(--muted); }
.mcard .mc-row b { font-variant-numeric: tabular-nums; }
.mcard .mc-row small { font-weight: 400; color: var(--muted); margin-left: 1px; }
.mcard .mc-foot { color: var(--muted); font-size: 11px; margin-top: 2px; text-align: right; }
/* 축소 보기: 이름 + 기온만. 마우스를 올리면 펼침 */
.mcard .mc-temp { display: none; font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }
.mcard.compact { min-width: 0; padding: 4px 8px; }
.mcard.compact .mc-head { margin: 0; font-size: 12px; }
.mcard.compact .mc-temp { display: inline; }
.mcard.compact .mc-row, .mcard.compact .mc-foot { display: none; }
.leaflet-marker-icon:hover .mcard.compact, .leaflet-marker-icon:focus .mcard.compact { min-width: 156px; padding: 8px 10px; }
.leaflet-marker-icon:hover .mcard.compact .mc-row, .leaflet-marker-icon:focus .mcard.compact .mc-row { display: flex; }
.leaflet-marker-icon:hover .mcard.compact .mc-foot, .leaflet-marker-icon:focus .mcard.compact .mc-foot { display: block; }
.leaflet-marker-icon:hover .mcard.compact .mc-temp { display: none; }
.flash-update .mcard { animation: mcflash 1.2s ease-out; }
@keyframes mcflash { 0% { box-shadow: 0 0 0 4px rgba(9, 114, 211, .55); } 100% { box-shadow: 0 2px 8px rgba(0, 7, 22, .22); } }
.map-seg { box-shadow: 0 1px 4px rgba(0, 7, 22, .2); }

/* 좌표 지정 지도 */
.picker { height: 320px; border-radius: 12px; border: 1px solid var(--line-strong); isolation: isolate; }
.pin span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 7, 22, .4); }
code { font-family: Monaco, Menlo, Consolas, monospace; font-size: 12px; background: #f2f3f3; padding: 0 4px; border-radius: 4px; }

@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-2col { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .map-box { height: 60vh; min-height: 360px; }
  .dev-panel { max-height: 320px; order: 2; }
  .kpi .v { font-size: 28px; line-height: 36px; }
}

/* ── 모바일 ──────────────────────────────────────── */
@media (max-width: 900px) {
  .menu-toggle { display: block; }
  .sidenav {
    position: fixed; left: 0; top: 48px; z-index: 15;
    transform: translateX(-100%); transition: transform .15s ease;
    box-shadow: 4px 0 16px rgba(0, 7, 22, .12);
  }
  #menu-open:checked ~ .app .sidenav { transform: none; }
  .main { padding: 12px 16px 40px; }
  .topnav .user .who, .topnav .env { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  th, td { padding: 10px 12px; }
}