/* CLIBO Operations Console — unified design system */

:root {
  --accent: #1a56db;
  --accent-hover: #1547b8;
  --accent-subtle: rgba(26, 86, 219, 0.08);
  --surface: #eceff4;
  --elevated: #ffffff;
  --border: #d5dde8;
  --border-strong: #b8c4d4;
  --text: #111418;
  --text-secondary: #5a6570;
  --text-tertiary: #8b949e;
  --success: #0b6e5a;
  --success-soft: #e4f5f1;
  --danger: #b42318;
  --danger-soft: #fcefee;
  --warning-soft: #fff7e8;
  --warning-text: #8a5b00;
  --violet-soft: #f3f0ff;
  --violet-text: #4c1d95;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 0 rgba(17, 24, 39, 0.04), 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(17, 24, 39, 0.06), 0 12px 24px -4px rgba(17, 24, 39, 0.08);
  --font: "Pretendard Variable", Pretendard, "SUIT Variable", "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  --color-muted: var(--text-tertiary);
  --clibo-primary: var(--accent);
  --clibo-primary-light: var(--accent-subtle);
  --clibo-surface: var(--surface);
  --clibo-card: var(--elevated);
  --clibo-border: var(--border);
  --clibo-text: var(--text);
  --clibo-text-secondary: var(--text-secondary);
  --clibo-success: var(--success);
  --clibo-success-bg: var(--success-soft);
  --clibo-error: var(--danger);
  --clibo-error-bg: var(--danger-soft);
  --clibo-radius: var(--radius);
  --clibo-radius-lg: var(--radius-lg);
  --clibo-shadow: var(--shadow-sm);
  --clibo-shadow-md: var(--shadow-md);
}

[data-theme="dark"] {
  --accent: #5b8def;
  --accent-hover: #7aa3f5;
  --accent-subtle: rgba(91, 141, 239, 0.14);
  --surface: #080b10;
  --elevated: #121820;
  --border: #2a3441;
  --border-strong: #3d4b5c;
  --text: #e8eaed;
  --text-secondary: #9aa5b1;
  --text-tertiary: #6b7785;
  --success: #3dd4a8;
  --success-soft: #0d2620;
  --danger: #f87171;
  --danger-soft: #2a1515;
  --warning-soft: #2d2410;
  --warning-text: #fbbf24;
  --violet-soft: #1e1a2e;
  --violet-text: #c4b5fd;
}

[data-theme="dark"] .s-good {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(61, 212, 168, 0.35);
}
[data-theme="dark"] .s-mod {
  background: var(--warning-soft);
  color: var(--warning-text);
  border-color: rgba(251, 191, 36, 0.35);
}
[data-theme="dark"] .s-bad {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(248, 113, 113, 0.35);
}
[data-theme="dark"] .s-vbad {
  background: #1e1a2e;
  color: var(--violet-text);
  border-color: rgba(196, 181, 253, 0.35);
}

* {
  box-sizing: border-box;
}

/* —— Screensaver —— */
@keyframes ssPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.012); }
}
@keyframes ssClockFade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

/* 눈 깜빡임 */
@keyframes ssBlink {
  0%, 90%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.07); }
}
/* 오른쪽 눈은 살짝 늦게 깜빡 */
@keyframes ssBlinkR {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.07); }
}
/* 동공 시선 이동 */
@keyframes ssLook {
  0%,  18%         { transform: translate(0, 0); }
  22%, 38%         { transform: translate(7px, 2px); }
  42%, 58%         { transform: translate(-6px, -2px); }
  62%, 78%         { transform: translate(3px, 4px); }
  82%, 100%        { transform: translate(0, 0); }
}
/* 동공 미세 진동 (생동감) */
@keyframes ssPupilPulse {
  0%, 100% { box-shadow: 0 0 10px 3px rgba(96,200,255,0.55); }
  50%      { box-shadow: 0 0 18px 6px rgba(96,200,255,0.80); }
}
.screensaver {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #04070f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.5s ease;
}
.screensaver.hidden {
  opacity: 0;
  pointer-events: none;
}
.ssInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 36px 28px;
  width: 100%;
  max-width: 560px;
}
/* —— Robot eyes —— */
.ssRobotFace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-bottom: 56px;
}
.ssEye {
  width: 220px;
  height: 150px;
  border-radius: 46px;
  background: #0a1628;
  border: 2px solid #1e3a5f;
  box-shadow:
    0 0 0 1px #0d2040,
    inset 0 2px 6px rgba(0,0,0,0.6),
    0 4px 16px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 깜빡임 적용 */
  transform-origin: center center;
}
.ssEyeLeft  { animation: ssBlink  5.2s ease-in-out infinite; }
.ssEyeRight { animation: ssBlinkR 5.2s ease-in-out infinite; }

.ssEyeInner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 눈 안쪽 은은한 글로우 배경 */
.ssEyeGlow {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 60%, rgba(30,100,180,0.18) 0%, transparent 70%);
  pointer-events: none;
}
/* 동공 */
.ssEyePupil {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: radial-gradient(circle at 38% 35%, #a0d8f8 0%, #3db8f0 35%, #1a7fc4 65%, #0d4f8a 100%);
  box-shadow: 0 0 10px 3px rgba(96,200,255,0.55);
  animation: ssLook 8s ease-in-out infinite, ssPupilPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
/* 동공 하이라이트 */
.ssEyeReflect {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 20px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.75);
  filter: blur(1px);
}

.ssLogoRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 4px;
}
.ssLogo {
  height: 72px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.9);
}
.ssLogoCompany { display: block; filter: brightness(1); }
.ssLogoLight   { display: none; }
.ssLogoDark    { display: block; }
[data-theme="dark"] .ssLogoLight { display: none; }
[data-theme="dark"] .ssLogoDark  { display: block; }
.ssBrand {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c8d7ed;
  margin-top: 2px;
}
.ssTagline {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c5d6f0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ssClock {
  font-size: 84px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: #ffffff;
  margin: 28px 0 6px;
  text-shadow: 0 2px 12px rgba(120,170,255,0.35);
}
.ssHint {
  font-size: 24px;
  font-weight: 600;
  color: #d8e4f5;
  margin-top: 28px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
  font-size: 15px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 20px 40px;
}

/* —— Header —— */
.header {
  background: var(--elevated);
  color: var(--text);
  margin: -16px -20px 20px -20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 200;
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-logo {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.brand-logo-dark {
  display: none;
}

/* 회사 로고: 라이트 모드에서는 invert로 어둡게, 다크 모드에서는 그대로(흰색) */
.brand-logo-company {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: invert(1) brightness(0.15);   /* light mode: 흰 로고 → 거의 검정 */
}

[data-theme="dark"] .brand-logo-light {
  display: none !important;
}
[data-theme="dark"] .brand-logo-dark {
  display: block !important;
}
[data-theme="dark"] .brand-logo-company {
  filter: brightness(1.1);              /* dark mode: 흰 로고 그대로, 살짝 밝게 */
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.brand-tagline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.menuTopBtn {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  min-height: 46px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease;
}

.menuTopBtn:hover {
  filter: brightness(1.08);
}

.menuTopBtn:active {
  transform: scale(0.98);
}

.menuTopBtn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  min-width: 104px;
  text-align: center;
}

.badge.connected {
  background: var(--success-soft);
  border-color: rgba(11, 110, 90, 0.25);
  color: var(--success);
}

.badge.disconnected {
  background: var(--danger-soft);
  border-color: rgba(180, 35, 24, 0.2);
  color: var(--danger);
}

[data-theme="dark"] .badge.connected {
  border-color: rgba(61, 212, 168, 0.3);
}
[data-theme="dark"] .badge.disconnected {
  border-color: rgba(248, 113, 113, 0.3);
}

/* —— Header status elements (clock / LTE / battery) —— */
.headerClock {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: 0.02em;
  padding: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.headerConn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--elevated);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
.headerConn.connected { border-color: rgba(11,110,90,0.3); background: var(--success-soft); color: var(--success); }
.headerConn.disconnected { border-color: rgba(180,35,24,0.25); background: var(--danger-soft); color: var(--danger); }
[data-theme="dark"] .headerConn.connected { border-color: rgba(61,212,168,0.3); }
[data-theme="dark"] .headerConn.disconnected { border-color: rgba(248,113,113,0.3); }

.headerConnBars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
  flex-shrink: 0;
}
.headerConnBar {
  width: 4px;
  border-radius: 1.5px;
  background: currentColor;
  opacity: 0.3;
  flex-shrink: 0;
}
.headerConnBar.b1 { height: 5px; }
.headerConnBar.b2 { height: 9px; }
.headerConnBar.b3 { height: 13px; }
.headerConnBar.b4 { height: 18px; }
.headerConn.connected .headerConnBar { opacity: 1; }
.headerConn.checking .headerConnBar.b1 { opacity: 0.8; }
.headerConn.checking .headerConnBar.b2 { opacity: 0.5; }
.headerConn.checking .headerConnBar.b3 { opacity: 0.25; }
.headerConn.checking .headerConnBar.b4 { opacity: 0.15; }
.headerConn.disconnected .headerConnBar { opacity: 0.2; }

.headerBattery {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--elevated);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.headerBattery.low { border-color: rgba(180,35,24,0.3); background: var(--danger-soft); color: var(--danger); }
.headerBattery.charging { border-color: rgba(11,110,90,0.3); background: var(--success-soft); color: var(--success); }

.headerBatteryIcon {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
  flex-shrink: 0;
}
.headerBatteryCap {
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 6px;
  background: currentColor;
  border-radius: 0 1.5px 1.5px 0;
}
.headerBatteryFill {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  border-radius: 1px;
  background: currentColor;
  width: 0%;
  transition: width 0.4s ease, background 0.3s;
}
.headerBatteryText {
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

/* —— Header BGM controls —— */
.headerBgmWrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--elevated);
  flex-shrink: 0;
  max-width: 260px;
}
.headerBgmTrack {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  flex: 1 1 auto;
}
.headerBgmBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.1s, color 0.1s;
}
.headerBgmBtn:hover { background: var(--accent-subtle); color: var(--accent); }
.headerBgmBtn.headerBgmPlay { background: var(--accent-subtle); color: var(--accent); }
.headerBgmBtn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

/* —— Music section —— */
.musicNowPlaying {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 10px 0 14px;
  min-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musicMainCtrl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.musicCtrlBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  justify-content: center;
}
.musicCtrlBtn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}
.musicPlayBtn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}
.musicVolRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.musicVolIcon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  color: var(--text-secondary);
}
.musicVolSlider {
  flex: 1;
  min-width: 120px;
  max-width: 260px;
  height: 4px;
  accent-color: var(--accent);
  cursor: pointer;
}
.musicVolVal {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 28px;
  text-align: right;
}
.musicTrackItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  border: 1px solid transparent;
}
.musicTrackItem:hover { background: var(--accent-subtle); }
.musicTrackItem.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
}
.musicTrackNum {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  min-width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.musicTrackItem.active .musicTrackNum { color: var(--accent); }
.musicTrackName {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musicTrackItem.active .musicTrackName { color: var(--accent); }
.musicNowBadge {
  font-size: 13px;
  flex-shrink: 0;
  color: var(--accent);
}

/* —— Navigation —— */
.nav-tabs {
  position: sticky;
  top: 69px;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
  padding: 10px 0 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .nav-tabs {
    background: var(--surface);
  }
}

.nav-tabs a {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.nav-tabs a:hover {
  color: var(--text);
  background: var(--elevated);
  border-color: var(--border);
}

.nav-tabs a.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

[data-theme="dark"] .nav-tabs a.active {
  color: #0c1117;
  background: var(--accent);
}

html.menu-button-ui .nav-tabs {
  display: none;
}

/* —— Sections & cards —— */
/* 초기 로드 시 메뉴 섹션만 노출. JS(applySectionView)가 inline style로 필요한 섹션을 표시. */
body .section[id^="section-"]:not(#section-menu) {
  display: none;
}

.section {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  background: var(--elevated);
  box-shadow: var(--shadow-sm);
}

.sectionName {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-menu-home {
  padding: 24px;
}

.menuHomeLead {
  margin-bottom: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.menuHomeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.menuHomeBtn {
  min-height: 72px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.menuHomeBtn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--elevated));
}

.menuHomeBtn:active {
  transform: scale(0.99);
}

.menuHomeIcon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.menuHomeIcon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menuHomeText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menuHomeBtn .title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.menuHomeBtn .desc {
  display: none;
}

/* 메뉴 아이콘: 항목별로 색조 분산 (파랑/녹색 계열 편중 해소) */
.menuHomeBtn[data-section="robot"]        .menuHomeIcon { color: #dc2626; } /* red    — 속도 */
.menuHomeBtn[data-section="touchui"]      .menuHomeIcon { color: #4f46e5; } /* indigo — 제어 */
.menuHomeBtn[data-section="clibo"]        .menuHomeIcon { color: #059669; } /* emerald— 상태/배터리 */
.menuHomeBtn[data-section="map"]          .menuHomeIcon { color: #1d4ed8; } /* blue   — 지도 */
.menuHomeBtn[data-section="operationlog"] .menuHomeIcon { color: #7c3aed; } /* purple — 일지 */
.menuHomeBtn[data-section="drive"]        .menuHomeIcon { color: #ea580c; } /* orange — 주행 */
.menuHomeBtn[data-section="admin"]        .menuHomeIcon { color: #d97706; } /* amber  — 관계자 */
.menuHomeBtn[data-section="music"]        .menuHomeIcon { color: #db2777; } /* pink   — 뮤직 */
.menuHomeBtn[data-section="airpurify"]    .menuHomeIcon { color: #0891b2; } /* cyan   — 일반 */
.menuHomeBtn[data-section="recordings"]   .menuHomeIcon { color: #be123c; } /* rose   */
.menuHomeBtn[data-section="camera"]       .menuHomeIcon { color: #334155; } /* slate  */
.menuHomeBtn:not([data-section])          .menuHomeIcon { color: #64748b; } /* slate  — 대기 화면 */

[data-theme="dark"] .menuHomeIcon {
  border-color: var(--border-strong);
}

/* 앱 쉘: 상단 + 각 탭 화면을 하나의 앱 UI처럼 결합 */
html.menu-button-ui body {
  background:
    radial-gradient(90% 60% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%),
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--surface);
}

html.menu-button-ui .wrap {
  max-width: 1080px;
  margin: 18px auto 24px;
  padding: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--elevated);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

html.menu-button-ui .header {
  margin: 0;
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 6%, var(--elevated)),
    var(--elevated) 68%
  );
}

html.menu-button-ui .header-inner {
  max-width: none;
}

html.menu-button-ui .section {
  margin: 0;
  padding: 20px 22px 22px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

html.menu-button-ui .section + .section {
  margin-top: 8px;
}

html.menu-button-ui #section-menu.section-menu-home {
  margin: 0;
  padding: 22px;
}

html.menu-button-ui .site-footer {
  display: none;
}

html.menu-home-visible #btnGoMenuHome {
  display: none;
}

html.menu-button-ui .menuHomeLead {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, var(--elevated));
}

@supports not (background: color-mix(in srgb, red, blue)) {
  html.menu-button-ui .menuHomeLead {
    background: var(--surface);
  }
}

.statusLed {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.statusLed.active {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 28%, transparent);
}

.statusLed.inactive {
  background: var(--text-tertiary);
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: var(--elevated);
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: var(--border-strong);
}

.k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.v {
  font-size: 26px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--text);
  letter-spacing: -0.02em;
}

.unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 4px;
}

.pmHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.pmName {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}

.pmDesc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.45;
}

.pmVal {
  font-size: 22px;
  font-weight: 700;
}

.pmStatus {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}

.s-good {
  background: var(--success-soft);
  color: var(--success);
  border-color: rgba(11, 110, 90, 0.2);
}

.s-mod {
  background: var(--warning-soft);
  color: var(--warning-text);
  border-color: rgba(138, 91, 0, 0.15);
}

.s-bad {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: rgba(180, 35, 24, 0.15);
}

.s-vbad {
  background: var(--violet-soft);
  color: var(--violet-text);
  border-color: rgba(76, 29, 149, 0.15);
}

.bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
}

.bar > div {
  height: 100%;
  width: 0%;
  transition: width 0.35s ease;
  background: var(--accent);
  border-radius: 2px;
}

.meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}

code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text);
}

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ctrl {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ctrl:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

select.ctrl {
  min-width: 160px;
  cursor: pointer;
}

input.ctrl {
  min-width: 180px;
}

input.ctrl[type="date"] {
  color-scheme: light;
}

[data-theme="dark"] input.ctrl[type="date"] {
  color-scheme: dark;
}

.btn {
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-weight: 600;
  cursor: pointer;
  background: var(--elevated);
  color: var(--text);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.btnPrimary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}

.btnPrimary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btnDanger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff !important;
}

.btnDanger:hover {
  filter: brightness(1.06);
}

.btnSmall {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 6px;
}

.btnRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.small {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.text-muted-inline {
  color: var(--text-secondary);
}

/* Robot & teleop */
.robotActionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.robotActionBtn {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  border-radius: var(--radius);
  font-weight: 700;
}

.robotActionBtn .en {
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.04em;
}

.robotActionBtn .ko {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  opacity: 0.88;
}

.robotActionBtn.btnPrimary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}

.robotActionBtn.btnDanger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff !important;
}

.robotActionBtn.btnReturn {
  background: #3d4f5f;
  border-color: #3d4f5f;
  color: #f1f5f9 !important;
}

.robotActionBtn.btnResume {
  background: #0b6e5a;
  border-color: #0b6e5a;
  color: #fff !important;
}

.robotActionBtn.btnDock {
  background: #3730a3;
  border-color: #3730a3;
  color: #fff !important;
}

[data-theme="dark"] .robotActionBtn.btnReturn {
  background: #475569;
  border-color: #475569;
}

.speedControl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.speedControlHeader,
.speedSliderRow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.speedControlHeader {
  justify-content: space-between;
}

.speedControlTitle {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 800;
}

.speedSlider {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

.speedTick {
  width: 42px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

.speedTick:last-child {
  text-align: right;
}

.speedTickScale {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 8px;
  margin-top: -4px;
}

.speedTickMark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--text-secondary);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.speedTickMark::before {
  content: "";
  width: 1px;
  height: 5px;
  background: var(--border);
}

.speedTickMark.major {
  color: var(--text);
}

.speedTickMark.major::before {
  height: 7px;
  background: var(--text-secondary);
}

.speedTickMark.minor {
  opacity: 0.7;
  font-size: 9px;
}

.speedTickMark.minor::before {
  height: 3px;
}

.speedStatus {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.speedStatus.ok {
  color: var(--success);
}

.speedStatus.error {
  color: var(--danger);
}

.speedStatus.pending {
  color: var(--warning-text);
}

.robotWpGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.robotWpCell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--surface);
}

.robotWpCell .k {
  margin-bottom: 4px;
}

.robotWpCell .v {
  font-size: 15px;
  margin-top: 0;
  word-break: break-word;
}

.wpFlowWrap {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 14px;
}

.wpFlowTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.wpFlowTrack {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.wpNode {
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 12px;
}

.wpNode.current {
  border-color: rgba(11, 110, 90, 0.45);
  box-shadow: 0 0 0 1px rgba(11, 110, 90, 0.12);
}

.wpNode.next {
  border-color: rgba(26, 86, 219, 0.35);
}

.wpNodeLbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.wpNodeVal {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.wpNodeMeta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpArrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--elevated);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
}

.wpQueueChips {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wpChip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text-secondary);
}

.wpChip.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: rgba(26, 86, 219, 0.2);
}

.wpEditorWrap {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  padding: 14px;
}

.wpEditorTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.wpEditorTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-right: 6px;
}

.wpEditorBoards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wpModeBoard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px;
  min-height: 120px;
}

.wpModeBoard.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.wpModeHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wpModeName {
  font-size: 12px;
  font-weight: 700;
}

.wpModeMeta {
  font-size: 11px;
  color: var(--text-secondary);
}

.wpZoneGroup + .wpZoneGroup {
  margin-top: 8px;
}

.wpZoneHead {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 5px;
}

.wpList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wpRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--elevated);
}

.wpRow.dragging {
  opacity: 0.5;
  border-style: dashed;
}

.wpRow .dragGrip {
  cursor: grab;
  user-select: none;
  font-size: 14px;
  color: var(--text-secondary);
}

.wpRow .idxTxt {
  font-size: 13px;
  font-weight: 700;
}

.wpRow .rowActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wpPreview {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.wpPreview code {
  display: inline-block;
  margin-top: 4px;
  max-width: 100%;
  overflow-x: auto;
}

.wpInlineInput {
  width: 110px;
  min-width: 0;
}

.wpInlineInput.wide {
  width: 220px;
}

.wpMapPickHint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.wpMapPickBar {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.wpActionBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.driveMapCard {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--elevated);
  padding: 14px;
}

.driveMapCanvas {
  width: 100%;
  min-height: 460px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: block;
  background: var(--surface);
}

.wpQuickGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow: auto;
}

.wpQuickCard {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--elevated);
}

.wpQuickIdx {
  font-size: 13px;
  font-weight: 700;
}

.wpQuickLabel {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpQuickBtns {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.wpMiniBtn {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  padding: 7px 4px;
  cursor: pointer;
}

.wpMiniBtn.pat.on {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.wpMiniBtn.san.on {
  border-color: #6d28d9;
  background: rgba(109, 40, 217, 0.1);
  color: #5b21b6;
}

.wpMiniBtn.mul.on {
  border-color: #0f766e;
  background: rgba(15, 118, 110, 0.1);
  color: #134e4a;
}

[data-theme="dark"] .wpMiniBtn.san.on {
  color: #c4b5fd;
}

.robotModeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.robotModeBtn {
  min-height: 72px;
  border-radius: var(--radius);
  font-weight: 700;
}

.robotModeBtn .en {
  display: block;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.robotModeBtn .ko {
  display: block;
  font-size: 11px;
  line-height: 1;
  margin-top: 6px;
  font-weight: 600;
  opacity: 0.9;
}

.robotModeBtn.active {
  color: #fff !important;
  border: none !important;
}

.robotModeBtn.patrol.active {
  background: #0b6e5a;
}

.robotModeBtn.sanitize.active {
  background: #3730a3;
}

.chk {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.chk input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent);
}

.teleopPad {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.teleopRow {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.teleopBtn {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.teleopBtn .arrow {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.teleopBtn:hover {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.teleopBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.teleopBtn:active,
.teleopBtn.active {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
}

.teleopBtn.btnDanger {
  background: var(--danger-soft);
  border-color: rgba(180, 35, 24, 0.25);
  color: var(--danger);
}

.teleopBtn.btnDanger:hover {
  border-color: var(--danger);
}

.teleopBtn.btnDanger:active {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

#mapCanvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  image-rendering: pixelated;
  display: block;
  background: transparent;
  transform: scaleY(-1);
  transform-origin: center;
}

.kbd {
  font-family: var(--mono);
  background: var(--surface);
  padding: 3px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  border: 1px solid var(--border);
}

input[type="range"] {
  width: 240px;
}

/* Toast */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--success);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 10000;
  font-weight: 600;
  font-size: 13px;
  min-width: 240px;
  max-width: 400px;
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.toast.show {
  display: block;
  animation: toastIn 0.25s ease-out;
}

.toast.info {
  background: var(--accent);
}

.toast.warning {
  background: #b45309;
}

.toast.error {
  background: var(--danger);
}

.toast.hide {
  animation: toastOut 0.25s ease-out forwards;
}

@keyframes toastIn {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}

/* 로봇 상태 알림 팝업 */
.robotStatusPopup {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  min-width: 300px;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 20px 18px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  overflow: hidden;
}
.robotStatusPopup.rspVisible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.robotStatusPopup.rspHide {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
}
.rspIcon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rspIcon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.robotStatusPopup.rsp-docking .rspIcon  { background: rgba(52,152,219,0.15); }
.robotStatusPopup.rsp-docking .rspIcon svg { stroke: #3498db; }
.robotStatusPopup.rsp-charged .rspIcon  { background: rgba(46,204,113,0.15); }
.robotStatusPopup.rsp-charged .rspIcon svg { stroke: #2ecc71; }
.robotStatusPopup.rsp-start .rspIcon    { background: rgba(243,156,18,0.15); }
.robotStatusPopup.rsp-start .rspIcon svg { stroke: #f39c12; }
.robotStatusPopup.rsp-stop .rspIcon     { background: rgba(231,76,60,0.15); }
.robotStatusPopup.rsp-stop .rspIcon svg { stroke: #e74c3c; }
.robotStatusPopup.rsp-arm .rspIcon      { background: rgba(155,89,182,0.15); }
.robotStatusPopup.rsp-arm .rspIcon svg  { stroke: #9b59b6; }
.rspBody {
  flex: 1;
  min-width: 0;
}
.rspTitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.rspDesc {
  font-size: 13px;
  color: var(--text-secondary);
}
.rspClose {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  line-height: 1;
}
.rspClose:hover { background: var(--accent-subtle); }
.rspProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 14px 14px;
  width: 100%;
  transform-origin: left;
  animation: rspProgressAnim 6s linear forwards;
}
@keyframes rspProgressAnim {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.robotStatusPopup.rsp-docking  { border-left: 4px solid #3498db; }
.robotStatusPopup.rsp-docking .rspProgress { background: #3498db; }
.robotStatusPopup.rsp-charged  { border-left: 4px solid #2ecc71; }
.robotStatusPopup.rsp-charged .rspProgress { background: #2ecc71; }
.robotStatusPopup.rsp-start    { border-left: 4px solid #f39c12; }
.robotStatusPopup.rsp-start .rspProgress { background: #f39c12; }
.robotStatusPopup.rsp-stop     { border-left: 4px solid #e74c3c; }
.robotStatusPopup.rsp-stop .rspProgress { background: #e74c3c; }
.robotStatusPopup.rsp-arm      { border-left: 4px solid #9b59b6; }
.robotStatusPopup.rsp-arm .rspProgress { background: #9b59b6; }

.skel {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--surface) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: skel 1.4s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes skel {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Navigation loading overlay */
@keyframes navLoadSpin {
  to { transform: rotate(360deg); }
}
/* 로고 전환 스플래시 — 클리보 제어 탭과 동일(웹 전체 화면전환 가드) */
.transitionSplash {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 12100;
  background: radial-gradient(circle at 50% 50%, rgba(10, 16, 28, 0.38) 0%, rgba(6, 12, 22, 0.74) 72%);
  transition: opacity 0.42s cubic-bezier(.22,.61,.36,1);
}
.transitionSplash.show { opacity: 1; pointer-events: auto; }
.transitionSplash.hide { opacity: 0; pointer-events: auto; }
.transitionSplashInner {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 24px 34px;
  border-radius: 20px;
  border: 1px solid rgba(114, 139, 176, 0.74);
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.93) 0%, rgba(12, 20, 34, 0.93) 100%);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(10px) scale(0.965);
  transition: transform 0.44s cubic-bezier(.22,.61,.36,1);
}
.transitionSplash.show .transitionSplashInner { transform: translateY(0) scale(1); }
.transitionSplashMain {
  height: 68px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.34) contrast(1.3) saturate(1.08) drop-shadow(0 0 11px rgba(118, 220, 255, 0.28));
  mix-blend-mode: screen;
  image-rendering: -webkit-optimize-contrast;
}
.transitionSplashDivider { width: 1px; height: 44px; background: rgba(148, 179, 220, 0.5); }
.transitionSplashClibo {
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: brightness(1.62) contrast(1.32) saturate(1.12) drop-shadow(0 0 10px rgba(92, 224, 255, 0.3));
  mix-blend-mode: screen;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 900px), (max-height: 700px) {
  .transitionSplashInner { gap: 14px; padding: 16px 22px; border-radius: 14px; }
  .transitionSplashMain { height: 50px; }
  .transitionSplashDivider { height: 34px; }
  .transitionSplashClibo { height: 44px; }
}

.navLoading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .navLoading { background: rgba(255,255,255,0.92); }
  [data-theme="dark"] .navLoading { background: rgba(12,16,22,0.92); }
}
.navLoading.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.navLoadingInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 36px;
}
.navLoadingSpinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid var(--border);
  border-top-color: var(--accent);
  animation: navLoadSpin 0.85s linear infinite;
}
.navLoadingText {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Modal */
.pwModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 18, 0.55);
  z-index: 9999;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px 120px;
  overflow-y: auto;
}

.pwModal.show {
  display: flex;
}

.pwModal-box {
  background: var(--elevated);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-width: 300px;
  max-width: 90%;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  margin-top: 24px;
  flex-shrink: 0;
}

.pwModal-box h3 {
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pwModal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  line-height: 1.55;
}

.pwModal-err {
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  min-height: 20px;
}

.pwModal-box input {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  text-align: center;
  letter-spacing: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
}

.pwModal-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.pwModal-box .btnRow {
  justify-content: center;
  margin-top: 8px;
}

.pwKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 14px;
}

.pwKeyBtn {
  font-size: 26px;
  font-weight: 700;
  font-family: var(--font);
  padding: 0;
  height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.pwKeyBtn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--elevated));
}

.pwKeyBtn:active {
  transform: scale(0.96);
  background: color-mix(in srgb, var(--accent) 14%, var(--elevated));
}

.pwKeyBtnAux {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
}

/* Section lock */
.section-lock {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--elevated) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

@supports not (background: color-mix(in srgb, red, blue)) {
  .section-lock {
    background: rgba(255, 255, 255, 0.9);
  }
  [data-theme="dark"] .section-lock {
    background: rgba(18, 24, 32, 0.92);
  }
}

.section-lock.hidden {
  display: none !important;
}

.section-lock-inner {
  text-align: center;
  padding: 28px;
  max-width: 280px;
}

.section-lock-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--text-secondary);
}

.section-lock-icon svg {
  width: 40px;
  height: 40px;
  opacity: 0.85;
}

.section-lock-inner p {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Floating camera */
.floatingCam {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9000;
  width: 280px;
  max-width: 90vw;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.floatingCam.hidden {
  display: none !important;
}

.floatingCam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.floatingCam-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 18px;
  padding: 0 6px;
  line-height: 1;
  border-radius: 4px;
}

.floatingCam-close:hover {
  color: var(--text);
  background: var(--border);
}

.floatingCam img {
  width: 100%;
  display: block;
  max-height: 200px;
  object-fit: contain;
  background: #000;
}

.floatingCam-placeholder {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Data tables */
.pm-log-wrap {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.pm-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pm-log-table thead {
  position: sticky;
  top: 0;
  background: var(--elevated);
  z-index: 1;
  border-bottom: 1px solid var(--border);
}

.pm-log-table th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.pm-log-table th:nth-child(n + 2) {
  text-align: right;
}

.pm-log-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.pm-log-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.cam-preview {
  margin-top: 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: none;
}

.site-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-tertiary);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}

.site-footer strong {
  color: var(--text-secondary);
  font-weight: 600;
}

@media (max-width: 900px) {
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }
  .menuTopBtn {
    min-height: 38px;
    padding: 7px 12px;
    font-size: 13px;
  }
  html.menu-button-ui .wrap {
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  html.menu-button-ui .header {
    padding: 14px 16px;
  }
  html.menu-button-ui .section {
    padding: 16px;
  }
  html.menu-button-ui #section-menu.section-menu-home {
    padding: 16px;
  }
  .menuHomeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .header {
    padding: 14px 16px;
  }
  .brand-name {
    font-size: 17px;
  }
  .brand-logo,
  .brand-logo-company {
    height: 36px;
  }
  .headerClock {
    font-size: 16px;
  }
  .menuTopBtn {
    min-height: 42px;
    padding: 9px 14px;
    font-size: 14px;
  }
  .theme-toggle {
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (max-width: 500px) {
  .menuHomeGrid {
    grid-template-columns: 1fr;
  }
  .teleopBtn {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    font-size: 9px;
  }
  .teleopBtn .arrow {
    font-size: 18px;
  }
  .teleopPad {
    padding: 12px;
  }
  .robotActionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .robotActionBtn {
    min-height: 80px;
  }
  .wpFlowTrack {
    grid-template-columns: 1fr;
  }
  .wpArrow {
    display: none;
  }
  .robotModeGrid {
    grid-template-columns: 1fr;
  }
  .robotWpGrid {
    grid-template-columns: 1fr;
  }
  .wpEditorBoards {
    grid-template-columns: 1fr;
  }
  .wpQuickGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   섹션별 액센트 컬러 시스템
   ═══════════════════════════════════════════════════════ */

/* 각 섹션 패널의 왼쪽 3px 컬러 바 */
.section {
  border-left-width: 3px;
}

/* 기본값 (menu 등 명시 안 된 경우) */
.section { border-left-color: var(--border); }

#section-menu       { border-left-color: var(--accent); }
#section-robot      { border-left-color: #0f766e; }
#section-drive      { border-left-color: #ea580c; }
#section-map        { border-left-color: #1d4ed8; }
#section-env        { border-left-color: #d97706; }
#section-air        { border-left-color: #0891b2; }
#section-clibo      { border-left-color: #059669; }
#section-topics     { border-left-color: #7c3aed; }
#section-operationlog { border-left-color: #7c3aed; }
#section-recordings { border-left-color: #be123c; }
#section-camera     { border-left-color: #334155; }
#section-lowbattery { border-left-color: #dc2626; }

/* ── sectionName 에 대응 accent dot ── */
#section-robot .sectionName::before      { background: #0f766e; }
#section-drive .sectionName::before      { background: #ea580c; }
#section-map .sectionName::before        { background: #1d4ed8; }
#section-env .sectionName::before        { background: #d97706; }
#section-air .sectionName::before        { background: #0891b2; }
#section-clibo .sectionName::before      { background: #059669; }
#section-topics .sectionName::before     { background: #7c3aed; }
#section-operationlog .sectionName::before { background: #7c3aed; }
#section-recordings .sectionName::before { background: #be123c; }
#section-camera .sectionName::before     { background: #334155; }
#section-lowbattery .sectionName::before { background: #dc2626; }

/* accent dot — sectionName 앞에 작은 컬러 원 */
.sectionName::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-right: -4px; /* gap이 이미 있으므로 보정 */
}

/* ═══════════════════════════════════════════════════════
   배터리 시각화
   ═══════════════════════════════════════════════════════ */

.bat-bar-wrap {
  margin-top: 10px;
  height: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

#bat_bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(.4,0,.2,1), background 0.4s ease;
  background: #059669;
}

#bat_bar.level-low    { background: #dc2626; }
#bat_bar.level-mid    { background: #d97706; }
#bat_bar.level-ok     { background: #059669; }

.bat-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  margin-top: 6px;
}

.bat-level-chip.level-low  { background: var(--danger-soft); color: var(--danger); border-color: rgba(180,35,24,.18); }
.bat-level-chip.level-mid  { background: var(--warning-soft); color: var(--warning-text); border-color: rgba(138,91,0,.15); }
.bat-level-chip.level-ok   { background: var(--success-soft); color: var(--success); border-color: rgba(11,110,90,.2); }

/* ═══════════════════════════════════════════════════════
   방역 진행률 시각화
   ═══════════════════════════════════════════════════════ */

.cov-bar-wrap {
  margin-top: 10px;
  height: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
}

#cov_bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════
   녹화 목록 카드 아이템
   ═══════════════════════════════════════════════════════ */

.recItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.recItem:last-child {
  margin-bottom: 0;
}

.recItem.active-rec {
  border-color: rgba(190,18,60,.35);
  background: color-mix(in srgb, #be123c 5%, var(--elevated));
}

.recItemInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.recItemLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recItemExt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.recItemActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   데이터 값 flash 애니메이션 (JS로 .flash 클래스 토글)
   ═══════════════════════════════════════════════════════ */

@keyframes valueFlash {
  0%   { opacity: 1; }
  30%  { opacity: .45; }
  100% { opacity: 1; }
}

.v.flash {
  animation: valueFlash 0.4s ease-out;
}

/* ═══════════════════════════════════════════════════════
   모바일 WebView 최적화
   ═══════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .wrap {
    padding: 10px 12px 32px;
  }
  .section {
    padding: 14px 14px 16px;
  }
  html.menu-button-ui .section {
    padding: 12px 12px 14px;
  }
  .card {
    padding: 12px 14px;
  }
  .sectionName {
    font-size: 11px;
  }
  .v {
    font-size: 22px;
  }
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
  .recItem {
    flex-direction: column;
    align-items: flex-start;
  }
  .recItemActions {
    width: 100%;
  }
  .robotActionGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════
   Portrait tablet layout (1024×768 landscape rotated / narrow browser)
   ═══════════════════════════════════════════════════════ */
@media (orientation: portrait) and (min-width: 500px) and (max-width: 820px) {
  /* Kiosk: page never scrolls. Each section fills viewport; long content scrolls inside the section. */
  html.menu-button-ui,
  html.menu-button-ui body {
    height: 100dvh;
    overflow: hidden;
  }
  html.menu-button-ui .wrap {
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  html.menu-button-ui .nav-tabs {
    display: none;
  }
  html.menu-button-ui .section[id^="section-"] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Touchui (iframe) section: iframe fills the slot. Only override display when section is visible
     (JS sets display:none on inactive sections — don't unhide them). */
  html.menu-button-ui #section-touchui {
    overflow: hidden;
    padding: 0;
    flex-direction: column;
  }
  html.menu-button-ui #section-touchui[style*="display: block"],
  html.menu-button-ui #section-touchui[style*="display:block"] {
    display: flex !important;
  }
  html.menu-button-ui #section-touchui iframe#touchuiFrame {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    width: 100%;
    border: 0;
    display: block;
  }
  html.menu-home-visible.menu-button-ui #section-menu.section-menu-home {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 12px 14px 14px;
    overflow: hidden;
    gap: 8px;
  }
  html.menu-home-visible #section-menu .sectionName {
    margin: 0;
  }
  /* Menu home: 3-column icon-tile grid, fills the 1fr grid slot of section-menu */
  html.menu-home-visible .menuHomeGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-height: 0;
    height: 100%;
    width: 100%;
    gap: 12px;
  }
  .menuHomeBtn {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    justify-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
    height: 100%;
    padding: 14px 8px;
    gap: 14px;
  }
  .menuHomeIcon {
    width: 78px;
    height: 78px;
    border-radius: 18px;
  }
  .menuHomeIcon svg {
    width: 40px;
    height: 40px;
  }
  .menuHomeText {
    align-items: center;
  }
  .menuHomeBtn .title {
    font-size: 16px;
  }
  .menuHomeBtn .desc {
    font-size: 11px;
    line-height: 1.35;
  }
  /* Header: 2 rows. Row1 = brand + status, Row2 = big theme/menu buttons */
  html.menu-button-ui .header {
    padding: 8px 12px 10px;
  }
  html.menu-button-ui .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "brand clock conn battery"
      "theme theme menu  menu";
    gap: 8px 8px;
    row-gap: 10px;
    align-items: center;
    overflow: hidden;
  }
  html.menu-button-ui .brand           { grid-area: brand; }
  html.menu-button-ui .headerClock     { grid-area: clock; justify-self: center; }
  html.menu-button-ui .headerConn      { grid-area: conn;  justify-self: end; }
  html.menu-button-ui .headerBattery   { grid-area: battery; justify-self: end; }
  html.menu-button-ui .theme-toggle    { grid-area: theme; }
  html.menu-button-ui #btnGoMenuHome   { grid-area: menu;  }
  html.menu-button-ui .brand-tagline,
  html.menu-button-ui .headerBgmWrap {
    display: none;
  }
  html.menu-button-ui .brand-logo,
  html.menu-button-ui .brand-logo-company {
    height: 42px;
  }
  html.menu-button-ui .headerClock {
    font-size: 22px;
    font-weight: 700;
  }
  html.menu-button-ui .headerConn {
    font-size: 14px;
    padding: 6px 10px;
  }
  html.menu-button-ui .headerConnText {
    font-size: 13px;
  }
  html.menu-button-ui .headerBattery {
    gap: 6px;
  }
  html.menu-button-ui .headerBatteryIcon {
    width: 32px;
    height: 18px;
  }
  html.menu-button-ui .headerBatteryText {
    font-size: 14px;
    font-weight: 700;
  }
  /* Row-2 buttons: big, centered, clear labels */
  html.menu-button-ui .menuTopBtn,
  html.menu-button-ui .theme-toggle {
    height: 56px;
    min-height: 56px;
    padding: 0 18px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }
  html.menu-button-ui .menuTopBtn span,
  html.menu-button-ui .theme-toggle span {
    display: inline;
    font-size: 17px;
    font-weight: 700;
  }
  html.menu-button-ui .menuTopBtn svg,
  html.menu-button-ui .theme-toggle svg {
    width: 22px;
    height: 22px;
  }
  html.menu-button-ui #btnGoMenuHome {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  html.menu-home-visible #btnGoMenuHome {
    display: none;
  }
  html.menu-home-visible .header-inner {
    grid-template-areas:
      "brand clock conn battery"
      "theme theme theme theme";
  }
}

/* —— 전체화면 스크롤 방지 —— */
html.is-fullscreen,
html.is-fullscreen body {
  overflow: hidden;
}

/* —— 주행속도 프리셋 버튼 —— */
.speedBtnGroup {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.speedPresetBtn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--elevated);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
  font-family: var(--font);
}

.speedPresetBtn:hover:not(.active) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.speedPresetBtn:active {
  transform: scale(0.98);
}

.speedPresetBtn.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
}

.speedPresetVal {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--mono);
  letter-spacing: 0;
}

.speedPresetBtn.active .speedPresetVal {
  color: var(--accent);
}

/* —— YouTube 뮤직 스타일 플레이어 —— */
.ytMusicCard {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0f0f1a;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
}

.ytMusicBackdrop {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.28) saturate(1.8);
  transition: background-image 0.9s ease;
  z-index: 0;
}

.ytMusicBody {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 220px 1fr;
}

.ytMusicBodySingle {
  grid-template-columns: 1fr;
}

.ytMusicArtWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 28px 24px;
}

.ytMusicPlayerBox {
  width: 172px;
  height: 97px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,0.6);
  background: #000;
  flex-shrink: 0;
}

.ytMusicPlayerBox iframe,
#ytPlayer {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.ytMusicPanel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 24px 24px 8px;
  gap: 16px;
  min-width: 0;
}

.ytMusicBodySingle .ytMusicPanel {
  padding: 24px;
}

.ytMusicMeta {
  min-width: 0;
}

.ytMusicTitle {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ytMusicArtist {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ytMusicProgressRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ytMusicTime {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  font-family: var(--mono);
  white-space: nowrap;
  min-width: 30px;
}

.ytMusicProgressBar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: height 0.15s ease;
}

.ytMusicProgressBar:hover {
  height: 6px;
}

.ytMusicProgressFill {
  height: 100%;
  width: 0%;
  background: #ff0000;
  border-radius: 2px;
  pointer-events: none;
  transition: width 0.3s linear;
}

.ytMusicProgressBar:hover .ytMusicProgressFill {
  background: #ff4040;
}

.ytMusicCtrlRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ytMusicCtrlBtn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.08s ease;
  flex-shrink: 0;
}

.ytMusicCtrlBtn:hover {
  background: rgba(255,255,255,0.18);
}

.ytMusicCtrlBtn:active {
  transform: scale(0.93);
}

.ytMusicCtrlBtn svg {
  width: 20px;
  height: 20px;
}

.ytMusicPlayBtn {
  width: 52px;
  height: 52px;
  background: #ff0000;
  color: #fff;
}

.ytMusicPlayBtn:hover {
  background: #cc0000;
}

.ytMusicPlayBtn svg {
  width: 26px;
  height: 26px;
}

.ytMusicVolRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}

.ytMusicVolIcon {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.ytMusicVolSlider {
  width: 90px;
  accent-color: #ff0000;
}

.ytMusicLoadRow {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ytMusicUrlInput {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
}

.ytMusicUrlInput::placeholder {
  color: rgba(255,255,255,0.3);
}

.ytMusicUrlInput:focus {
  border-color: #ff0000;
}

/* 재생목록 큐 */
.ytMusicQueueList {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 10px;
}

.ytMusicQueueItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.12s;
}

.ytMusicQueueItem:hover {
  background: var(--accent-subtle);
}

.ytMusicQueueItem.ytActive {
  background: var(--accent-subtle);
}

.ytMusicQueueIdx {
  width: 22px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  font-family: var(--mono);
}

.ytMusicQueueItem.ytActive .ytMusicQueueIdx {
  color: #ff0000;
}


.ytMusicQueueTitle {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.ytMusicQueueItem.ytActive .ytMusicQueueTitle {
  color: var(--accent);
  font-weight: 700;
}

/* —— 라이트 모드 호환 (ytMusic) —— */
html:not([data-theme="dark"]) .ytMusicCard {
  background: var(--elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
html:not([data-theme="dark"]) .ytMusicBackdrop {
  filter: blur(48px) brightness(0.95) saturate(1.6);
  opacity: 0.5;
}
html:not([data-theme="dark"]) .ytMusicTitle {
  color: var(--text);
}
html:not([data-theme="dark"]) .ytMusicArtist {
  color: var(--text-secondary);
}
html:not([data-theme="dark"]) .ytMusicTime {
  color: var(--text-tertiary);
}
html:not([data-theme="dark"]) .ytMusicProgressBar {
  background: var(--border);
}
html:not([data-theme="dark"]) .ytMusicCtrlBtn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
html:not([data-theme="dark"]) .ytMusicCtrlBtn:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: var(--accent);
}
html:not([data-theme="dark"]) .ytMusicPlayBtn {
  background: #ff0000;
  color: #fff;
  border-color: #ff0000;
}
html:not([data-theme="dark"]) .ytMusicPlayBtn:hover {
  background: #cc0000;
  border-color: #cc0000;
}
html:not([data-theme="dark"]) .ytMusicVolIcon {
  color: var(--text-secondary);
}
html:not([data-theme="dark"]) .ytMusicUrlInput {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html:not([data-theme="dark"]) .ytMusicUrlInput::placeholder {
  color: var(--text-tertiary);
}

/* 반응형 */
@media (max-width: 640px) {
  .ytMusicBody {
    grid-template-columns: 1fr;
  }
  .ytMusicPanel,
  .ytMusicBodySingle .ytMusicPanel {
    padding: 16px 20px 20px;
    gap: 14px;
  }
  .ytMusicCtrlRow {
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .ytMusicVolRow {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: stretch;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }
  .ytMusicVolSlider {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* ===== 키오스크 잠금 (2026-08-14) =====
   기본은 잠김: 사용자에겐 CLIBO 제어 화면 하나만 보인다. 탭·메인 메뉴·"메뉴로" 버튼을 감추고,
   해시로 직접 들어와도 JS 가 제어 화면으로 되돌린다(dashboard.html/dashboard.js 의 kioskGate).
   html.kiosk-locked 클래스는 마크업에 기본으로 박혀 있어 JS 로드 전 메뉴가 번쩍이지 않는다. */
html.kiosk-locked .nav-tabs,
html.kiosk-locked #section-menu,
html.kiosk-locked #btnGoMenuHome {
  display: none !important;
}

/* 파이 키오스크 터치 보정(2026-08-14): CLIBO 제어 탭은 뷰포트에 딱 맞추고 스크롤을 없앤다.
   (잠김 여부와 무관 — 제어 탭을 보는 동안이면 언제나. 클래스는 applySectionView 가 토글) 
   앱셸 여백(wrap margin 18+24, padding-bottom 18) + 헤더 높이가 iframe 의 calc(100vh - 110px) 와
   겹쳐 페이지가 ~60px 넘쳤다 → 터치스크린에서 탭이 드래그(스크롤)로 먹히고 헤더가 밀려 올라가
   우측 상단 자물쇠 버튼이 특히 안 눌렸다. iframe 이 남는 높이를 채우게 해서 넘침 자체를 없앤다. */
html.touchui-fullscreen,
html.touchui-fullscreen body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.touchui-fullscreen .wrap {
  margin: 0 auto;
  padding-bottom: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

html.touchui-fullscreen #section-touchui {
  flex: 1 1 auto;
  min-height: 0;
}

html.touchui-fullscreen #touchuiFrame {
  height: 100% !important;
  border-radius: 0 !important;
}

/* 토스트는 top:20px/right:20px/z-index:10000 이라 자물쇠 버튼 위에 정확히 겹친다.
   클릭 핸들러가 없는 안내 표시이므로 터치를 통과시킨다(떠 있는 동안 버튼이 안 눌리던 원인). */
.toast {
  pointer-events: none;
}

/* 관계자 진입 버튼: 헤더 우측의 작은 자물쇠 아이콘(텍스트 없음, 저대비).
   (2026-08-14: position:fixed 로 띄워봤으나 파이 화면 배치가 틀어져 원래 헤더 흐름으로 되돌림) */
.kioskLockBtn {
  width: 44px;
  min-height: 44px;
  padding: 6px;
  gap: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-tertiary);
  opacity: 0.5;
  justify-content: center;
}

.kioskLockBtn:hover {
  filter: none;
  opacity: 1;
}

.kioskLockBtn svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* 잠김 = 닫힌 자물쇠, 풀림 = 열린 자물쇠(누르면 재잠금) */
html.kiosk-locked .kioskLockIconOpen,
html:not(.kiosk-locked) .kioskLockIconClosed {
  display: none;
}

html:not(.kiosk-locked) .kioskLockBtn {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

/* 키오스크 터치: 더블탭 확대 차단(2026-08-14). 터치UI 는 이미 touch-action:manipulation 인데
   부모 대시보드에만 빠져 있어, 버튼 연타가 더블탭 줌으로 먹히면 화면 좌표와 터치 좌표가
   어긋났다(누른 곳과 다른 곳이 눌리고 터치가 중앙으로 몰림). viewport meta 의 user-scalable=no
   와 짝. 스크롤·탭은 그대로 동작한다. */
html,
body {
  touch-action: manipulation;
}

/* 세로 키오스크(파이 600x1024 등) 헤더 grid 에 자물쇠 자리 만들기 — 2026-08-14.
   이 브레이크포인트의 .header-inner 는 grid-template-areas 로 자리를 못 박아 두는데, 나중에 추가한
   자물쇠 버튼엔 area 가 없어 자동배치로 암묵 행에 떨어졌다(341x56 전체폭 바 → 보이는 위치와
   눌리는 영역이 어긋남). 2행 오른쪽 끝에 56px 정사각 아이콘으로 고정한다. */
@media (orientation: portrait) and (min-width: 500px) and (max-width: 820px) {
  html.menu-button-ui .header-inner {
    grid-template-areas:
      "brand clock conn battery"
      "theme theme menu  lock";
  }
  html.menu-home-visible .header-inner {
    grid-template-areas:
      "brand clock conn battery"
      "theme theme theme lock";
  }
  html.menu-button-ui #btnKioskLock {
    grid-area: lock;
    justify-self: end;
    width: 56px;
    height: 56px;
    min-height: 56px;
    padding: 0;
  }
  html.menu-button-ui #btnKioskLock svg {
    width: 22px;
    height: 22px;
  }
}