/* temphum 웹 앱 — 휴대폰 세로 1열이 기본, 넓어지면 열이 늘어난다 */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --text: #0b0b0b;
  --text-2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --wash: rgba(11, 11, 11, 0.05);
  --series: #2a78d6;
  --accent: #2a78d6;
  --on-accent: #ffffff;
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --wash: rgba(255, 255, 255, 0.06);
    --series: #3987e5;
    --accent: #3987e5;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 17px; }
h2 { font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* 버튼 */
.btn {
  font: inherit;
  font-weight: 500;
  min-height: 44px;              /* 손가락으로 누르기 좋은 크기 */
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: var(--wash); }
.btn:focus-visible, select:focus-visible, input:focus-visible, .plot:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.danger { border-color: var(--critical); color: var(--critical); }
.btn.ghost { border-color: transparent; background: none; color: var(--text-2); padding: 0 10px; }

/* 로그인 */
.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login-card { width: 100%; max-width: 360px; display: grid; gap: 14px; padding: 24px; }
.login-card h1 { font-size: 20px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
input, select {
  font: inherit;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--axis);
  background: var(--page);
  color: var(--text);
}
.error { margin: 0; color: var(--critical); font-size: 14px; }

/* 상단 */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--page);
  border-bottom: 1px solid var(--border);
}
.top h1 { margin-right: auto; white-space: nowrap; }
.top select { min-height: 36px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  white-space: nowrap;
}
.pill::before {              /* 색만으로 구분하지 않도록 모양도 다르게: 온라인 ●, 오프라인 ■, 지연 ▲ */
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}
.pill.online::before { background: var(--good); }
.pill.offline::before { background: var(--critical); border-radius: 1px; }
.pill.stale::before {
  background: var(--warning);
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 넓은 표·그래프가 화면 폭을 밀어내지 않게 */
  gap: 16px;
}

/* 기간 선택 */
.filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  background: var(--wash);
  max-width: 100%;
}
.segmented button {
  font: inherit;
  font-size: 14px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.segmented button[aria-checked="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--border);
}

/* 최신값 타일 */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: grid; gap: 2px; padding: 14px 16px; }
.tile .label { font-size: 13px; color: var(--text-2); }
.tile .value { font-size: 28px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tile .unit { font-size: 14px; font-weight: 400; color: var(--text-2); margin-left: 3px; }
.tile .range { font-size: 12px; color: var(--muted); }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tile:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* 수신 상태 */
.meta dl { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px; }
.meta div { display: flex; gap: 6px; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* 그래프 */
.charts { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chart { padding: 14px 8px 8px 8px; }
.chart h2 { padding: 0 8px 6px; font-weight: 600; }
.chart h2 span { font-weight: 400; color: var(--muted); margin-left: 4px; }
.plot {
  position: relative;
  height: 190px;
  touch-action: pan-y;           /* 세로로 밀면 화면 이동, 가로로 밀면 값 읽기 */
  border-radius: 8px;
  transition: opacity 0.15s;
}
.loading .plot, .loading .tile { opacity: 0.55; }
.plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plot .grid { stroke: var(--grid); stroke-width: 1; }
.plot .base { stroke: var(--axis); stroke-width: 1; }
.plot .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.plot .line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .area { fill: var(--series); opacity: 0.10; }
.plot .dot { fill: var(--series); stroke: var(--surface); stroke-width: 2; }
.plot .cross { stroke: var(--axis); stroke-width: 1; }
.plot .empty { fill: var(--muted); font-size: 13px; text-anchor: middle; }
.tip {
  position: absolute;
  top: 0;
  z-index: 2;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-2);
}
.tip strong { display: block; font-size: 15px; color: var(--text); }

/* 표 */
summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.table-scroll { overflow: auto; max-height: 360px; margin-top: 10px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th, table.data td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.data th { position: sticky; top: 0; background: var(--surface); color: var(--text-2); font-weight: 500; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.wrap { white-space: normal; min-width: 180px; }

/* 장치 제어 */
.controls { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 12px 0; }
@media (min-width: 520px) { .controls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.result { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--wash); font-size: 14px; }
.result.bad { box-shadow: inset 3px 0 0 var(--critical); }
.result.ok { box-shadow: inset 3px 0 0 var(--good); }
.result.wait { box-shadow: inset 3px 0 0 var(--warning); }

dialog {
  width: min(92vw, 380px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
dialog p { margin: 8px 0 18px; color: var(--text-2); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }