/*
 * DHS AI7400 10.1인치 운영 콘솔 스타일.
 * 기본 화면은 1280x800 터치 패널을 기준으로 한다. 메인 콘솔은 16:10 비율을
 * 유지하며 현재 디스플레이에 최대 맞춤하고, 설정·도구 레이어는 독립적인
 * 반응형 작업공간을 사용한다. 색상 토큰, 공통 제어, 메인 콘솔, 전체 화면
 * 레이어, 설정 상세, I/O 안전 화면, 간편 모드 순서로 정의한다.
 */

:root {
  color-scheme: light;
  --bg: #f5f7f4;
  --panel: #ffffff;
  --panel-strong: #eef4ef;
  --ink: #18312e;
  --muted: #6b7773;
  --line: #d9e2dd;
  --accent: #16836f;
  --accent-strong: #0d6b5d;
  --warning: #d7921f;
  --success: #2f8f57;
  --danger: #c43d36;
  --danger-soft: #fff0ed;
  --field: #ffffff;
  --item: #ffffff;
  --item-soft: #fbfcfb;
  --control: #e8efeb;
  --control-strong: #edf2ef;
  --quick: #eef6f1;
  --active-soft: #f0faf5;
  --brand-bg: #18312e;
  --brand-fg: #ffffff;
  --shadow: 0 18px 60px rgba(36, 54, 48, 0.10);
}

body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1312;
  --panel: #151f1d;
  --panel-strong: #1c2a27;
  --ink: #e8f2ed;
  --muted: #95aaa3;
  --line: #2b3a36;
  --accent: #42c5a9;
  --accent-strong: #7de0ca;
  --warning: #e0aa3f;
  --success: #67c986;
  --danger: #e05a52;
  --danger-soft: #2a1716;
  --field: #101918;
  --item: #192420;
  --item-soft: #13201d;
  --control: #20312d;
  --control-strong: #243834;
  --quick: #18332d;
  --active-soft: #123d34;
  --brand-bg: #42c5a9;
  --brand-fg: #061412;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

body[data-skin="ocean"] {
  --accent: #1b8db8;
  --accent-strong: #0d6e99;
  --active-soft: #edf9ff;
  --quick: #eef8fb;
  --brand-bg: #123149;
}

body[data-theme="dark"][data-skin="ocean"] {
  --bg: #09131a;
  --panel: #101d25;
  --panel-strong: #172b36;
  --accent: #48c5f0;
  --accent-strong: #91ddf6;
  --active-soft: #123545;
  --quick: #122d39;
}

body[data-skin="forest"] {
  --accent: #2f8f57;
  --accent-strong: #1d6e3e;
  --active-soft: #eff9f2;
  --quick: #eff8f1;
  --brand-bg: #183c29;
}

body[data-theme="dark"][data-skin="forest"] {
  --bg: #0b130d;
  --panel: #131f16;
  --panel-strong: #1b2d20;
  --accent: #67c986;
  --accent-strong: #9be5b0;
  --active-soft: #173a22;
  --quick: #15331f;
}

body[data-skin="graphite"] {
  --accent: #59667c;
  --accent-strong: #39475d;
  --active-soft: #f1f3f6;
  --quick: #f0f2f5;
  --brand-bg: #2a3140;
}

body[data-theme="dark"][data-skin="graphite"] {
  --bg: #0e1014;
  --panel: #171b22;
  --panel-strong: #202733;
  --accent: #8ca0c0;
  --accent-strong: #c2d1ec;
  --active-soft: #202b3d;
  --quick: #1d2633;
}

body[data-skin="warm"] {
  --accent: #b26f24;
  --accent-strong: #8e5214;
  --active-soft: #fff6ea;
  --quick: #fff7ed;
  --brand-bg: #4a321b;
}

body[data-theme="dark"][data-skin="warm"] {
  --bg: #15100b;
  --panel: #211910;
  --panel-strong: #302414;
  --accent: #e2a04a;
  --accent-strong: #ffd18c;
  --active-soft: #3d2912;
  --quick: #352414;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, "Pretendard", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
}

/* 접근성 모드는 기존 방송 화면의 정보 구조를 바꾸지 않는다. 시각 지원은
   저대비 보조문구와 얇은 경계를 강화하고, 중요한 조작부의 글씨와 초점 표시를
   키운다. 청각 지원의 큰 상태 알림은 별도 컴포넌트에서 처리한다. */
body[data-accessibility-vision="true"] {
  --muted: color-mix(in srgb, var(--ink) 82%, transparent);
  --line: color-mix(in srgb, var(--ink) 38%, transparent);
  --shadow: 0 18px 60px color-mix(in srgb, var(--ink) 18%, transparent);
}

body[data-accessibility-vision="true"] :where(button, input, select, textarea) {
  border-width: 2px;
  font-size: max(14px, 1em);
  font-weight: 850;
}

body[data-accessibility-vision="true"] :where(.nav-hint, .inline-status-line, .upload-status, small) {
  font-size: max(12px, 0.92em);
  line-height: 1.5;
}

body[data-accessibility-vision="true"] :where(.eyebrow, dt, label > span) {
  font-size: max(12px, 0.92em);
  font-weight: 950;
}

body[data-accessibility-vision="true"] :focus-visible,
body[data-accessibility-hearing="true"] :focus-visible {
  outline: 4px solid #ffd43b !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px rgba(18, 33, 29, 0.72) !important;
}

body[data-accessibility-large-controls="true"] :where(button, input:not([type="checkbox"]), select, textarea) {
  min-height: 48px;
}

body[data-accessibility-large-controls="true"] :where(button, .nav-card, .zone-card) {
  padding-block: max(10px, 0.72em);
}

/* 움직임 최소화는 비상 상태 자체를 감추지 않고 애니메이션만 정지한다.
   색상과 큰 상태 문구는 그대로 남아 화면 경고의 의미가 유지된다. */
body[data-accessibility-reduced-motion="true"] *,
body[data-accessibility-reduced-motion="true"] *::before,
body[data-accessibility-reduced-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

body.kiosk-mode {
  min-height: 100dvh;
  overflow: hidden;
  user-select: none;
  background: var(--bg);
}

body.kiosk-mode input,
body.kiosk-mode textarea,
body.kiosk-mode [contenteditable="true"] {
  user-select: text;
}

body.screen-open {
  overflow: hidden;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-accessibility-button {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 14px;
}

.login-accessibility-button > span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--panel);
  font-size: 15px;
  font-weight: 1000;
}

.login-accessibility-button.active {
  border-color: var(--accent-strong);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.login-card {
  display: grid;
  gap: 14px;
  width: min(480px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.login-company-logo-picture,
.login-company-logo {
  display: block;
  width: min(286px, 72vw);
  height: auto;
}

.login-company-logo-picture {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.login-company-logo-dark {
  display: none;
}

body[data-theme="dark"] .login-company-logo-color {
  display: none;
}

body[data-theme="dark"] .login-company-logo-dark {
  display: block;
}

.login-card h1 {
  margin: 4px 0 0;
  font-size: 28px;
}

.login-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.login-status {
  min-height: 20px;
  font-size: 13px;
}

.login-status[data-kind="success"] {
  color: var(--accent-strong);
}

.login-status[data-kind="error"] {
  color: var(--danger);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--control);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button:hover {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

button.primary {
  background: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: var(--accent-strong);
}

button.danger {
  background: var(--danger);
  color: #fff;
}

button.danger.active {
  animation: emergencyPulse 0.85s ease-in-out infinite;
}

@keyframes controlPendingPulse {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-1px);
    filter: brightness(1.08);
  }
}

button.pending {
  animation: controlPendingPulse 0.7s ease-in-out infinite;
}

@keyframes micBroadcastPulse {
  0%, 100% {
    background: linear-gradient(135deg, #d46f15, #f0a12a);
    box-shadow: 0 12px 28px rgba(212, 111, 21, 0.24), inset 0 0 0 0 rgba(255, 255, 255, 0.18);
  }
  50% {
    background: linear-gradient(135deg, #c43d36, #ec7b34);
    box-shadow: 0 0 0 5px rgba(236, 123, 52, 0.28), 0 16px 42px rgba(196, 61, 54, 0.30);
  }
}

button.soft {
  background: var(--control-strong);
  color: var(--ink);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  width: 54px;
  min-height: 48px;
  padding: 0;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--control-strong);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.theme-graphic {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex: 0 0 auto;
  overflow: hidden;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.theme-graphic::before,
.theme-graphic::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  transition: inherit;
}

.theme-toggle:hover .theme-graphic {
  transform: rotate(-6deg) scale(1.04);
}

.theme-toggle.shows-light-mode .theme-graphic {
  background:
    radial-gradient(circle at 50% 50%, #fff8d6 0 24%, #ffd05a 25% 43%, transparent 44%),
    conic-gradient(
      from 0deg,
      transparent 0deg 12deg,
      rgba(255, 217, 91, 0.95) 12deg 24deg,
      transparent 24deg 45deg,
      rgba(255, 217, 91, 0.95) 45deg 57deg,
      transparent 57deg 90deg,
      rgba(255, 217, 91, 0.95) 90deg 102deg,
      transparent 102deg 135deg,
      rgba(255, 217, 91, 0.95) 135deg 147deg,
      transparent 147deg 180deg,
      rgba(255, 217, 91, 0.95) 180deg 192deg,
      transparent 192deg 225deg,
      rgba(255, 217, 91, 0.95) 225deg 237deg,
      transparent 237deg 270deg,
      rgba(255, 217, 91, 0.95) 270deg 282deg,
      transparent 282deg 315deg,
      rgba(255, 217, 91, 0.95) 315deg 327deg,
      transparent 327deg 360deg
    );
  box-shadow:
    0 0 0 3px rgba(255, 215, 106, 0.22),
    0 0 22px rgba(255, 202, 51, 0.46);
}

.theme-toggle.shows-light-mode .theme-graphic::before {
  inset: 9px;
  background: radial-gradient(circle at 35% 30%, #fffdf0 0 18%, #ffe589 46%, #ffbd35 100%);
  box-shadow: inset -2px -3px 4px rgba(202, 124, 16, 0.22);
}

.theme-toggle.shows-light-mode .theme-graphic::after {
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.32);
}

.theme-toggle.shows-dark-mode .theme-graphic {
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 72%, rgba(196, 219, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 76%, rgba(196, 219, 255, 0.8) 0 1px, transparent 2px),
    linear-gradient(145deg, #34477d, #111a36 72%);
  box-shadow:
    0 0 0 3px rgba(121, 148, 218, 0.16),
    0 0 20px rgba(105, 129, 204, 0.30);
}

.theme-toggle.shows-dark-mode .theme-graphic::before {
  width: 22px;
  height: 22px;
  left: 6px;
  top: 6px;
  background: linear-gradient(145deg, #ffffff, #cddcff);
  box-shadow: inset -4px -4px 5px rgba(128, 151, 213, 0.38);
}

.theme-toggle.shows-dark-mode .theme-graphic::after {
  width: 22px;
  height: 22px;
  top: 3px;
  left: 13px;
  background: linear-gradient(145deg, #34477d, #111a36 72%);
  box-shadow: -12px 11px 0 -9px rgba(255, 255, 255, 0.95);
}

button.active:not(.danger) {
  background: var(--accent);
  color: #fff;
}

button.nav-card,
button.wide-nav-button {
  text-align: left;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

.select-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 8px;
  align-items: center;
}

.select-action-row .icon-button {
  min-width: 52px;
  min-height: 48px;
  padding: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 950;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 62%, transparent);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 108px;
  user-select: text;
}

.app-shell {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 24px;
  min-height: 100vh;
  padding: 24px;
  align-items: stretch;
}

body:not(.large-workspace) .app-shell {
  width: min(100vw, 1280px);
  height: min(100dvh, 800px);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}

/* 주 콘솔은 물리 크기가 아니라 1280:800 비율만 기준으로 삼는다. 가로가 넓은
   화면에서는 높이에, 세로가 긴 화면에서는 너비에 맞춰 가능한 면적을 모두 쓴다. */
@media (min-width: 981px) {
  body:not(.large-workspace):not(.screen-open) .app-shell {
    width: min(100vw, 160dvh);
    height: min(100dvh, 62.5vw);
    max-width: none;
    max-height: none;
    aspect-ratio: 8 / 5;
    margin: 0 auto;
  }
}

.side-panel,
.main-panel {
  min-width: 0;
}

body:not(.large-workspace) .side-panel,
body:not(.large-workspace) .main-panel {
  height: 100%;
  min-height: 0;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - 48px);
}

.main-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1.55fr) minmax(124px, 0.45fr);
  gap: 10px;
  min-height: calc(100vh - 48px);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 4px;
}

.company-logo-picture,
.company-logo {
  display: block;
  width: 148px;
  height: auto;
}

.company-logo-picture {
  flex: 0 0 148px;
}

.company-logo-dark,
.service-company-logo-dark {
  display: none;
}

body[data-theme="dark"] .company-logo-color,
body[data-theme="dark"] .service-company-logo-color {
  display: none;
}

body[data-theme="dark"] .company-logo-dark,
body[data-theme="dark"] .service-company-logo-dark {
  display: block;
}

.brand-product-copy {
  display: grid;
  align-items: center;
  min-width: 0;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

.brand-logo {
  display: block;
  width: 54px;
  height: 54px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--brand-bg);
  color: var(--brand-fg);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-block h1,
.topbar h2,
.panel h3,
.emergency-card h2 {
  margin: 0;
}

.brand-block h1 {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-block p,
.emergency-card p {
  margin: 5px 0 0;
  color: var(--muted);
  word-break: keep-all;
}

.status-card,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.status-card {
  padding: 18px;
}

.nav-card {
  display: block;
  width: 100%;
}

.nav-card .section-title,
.nav-card .panel-heading {
  width: 100%;
}

.nav-hint {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.nav-copy,
.nav-heading {
  display: block;
}

.nav-heading {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 800;
}

.nav-pill {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.section-title,
.panel-heading,
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

summary.section-title,
summary.panel-heading {
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

summary.section-title::-webkit-details-marker,
summary.panel-heading::-webkit-details-marker {
  display: none;
}

.compact-drawer,
.collapsible-panel {
  overflow: hidden;
}

.compact-drawer > summary::after,
.collapsible-panel > summary::after {
  content: "펼치기";
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.compact-drawer[open] > summary::after,
.collapsible-panel[open] > summary::after {
  content: "접기";
  color: var(--accent-strong);
}

.topbar {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.topbar-title {
  position: relative;
  min-width: 0;
  padding-left: 14px;
}

.topbar-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 78%, transparent);
  transform: translateY(-50%);
}

.topbar h2 {
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  font-size: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions,
.button-row,
.split-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-actions {
  min-width: 0;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
}

.topbar-tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--control) 72%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.topbar-tool-group > button,
.topbar-tool-group .user-pill {
  min-height: 42px;
}

.topbar-tool-group .user-pill {
  padding-inline: 10px;
}

.topbar-tool-group .console-mode-toggle {
  min-width: 106px;
  padding-inline: 10px;
}

.topbar-settings-button {
  min-width: 52px;
  padding-inline: 9px;
}

.service-info-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 92px;
  padding-inline: 9px;
}

.service-info-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.service-info-button span {
  white-space: nowrap;
}

.service-info-label-compact {
  display: none;
}

/* 1280px 본체 화면에서는 모든 상단 도구를 한 줄에 보존하기 위해 아이콘형으로
   줄인다. 더 넓은 데스크톱에서는 A/S 정보 문구까지 함께 표시한다. */
@media (max-width: 1360px) {
  .topbar-tool-group .console-mode-toggle {
    width: 46px;
    min-width: 46px;
    padding-inline: 5px;
  }

  .console-mode-toggle #consoleModeToggleText {
    display: none;
  }

  .topbar-tool-group .service-info-button {
    width: 64px;
    min-width: 64px;
    gap: 4px;
    padding-inline: 6px;
  }

  .service-info-label-full {
    display: none;
  }

  .service-info-label-compact {
    display: inline;
    font-size: 11px;
    font-weight: 950;
  }
}

.topbar-tool-group .theme-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 42px;
  border-radius: 10px;
}

.topbar-tool-group .theme-graphic {
  width: 30px;
  height: 30px;
}

.top-clock {
  display: grid;
  align-items: center;
  justify-items: end;
  min-width: 150px;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  padding: 8px 15px;
  background: transparent;
  box-shadow: inset 0 0 20px 11px color-mix(in srgb, var(--panel) 52%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 98% 94% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.92) 73%, rgba(0, 0, 0, 0.48) 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 98% 94% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.92) 73%, rgba(0, 0, 0, 0.48) 88%, transparent 100%);
}

.top-clock span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 21px;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(2, 18, 24, 0.16);
  color: rgba(237, 255, 249, 0.96);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: blur(3px);
}

.top-clock strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 9px;
  border-radius: 10px;
  background: rgba(2, 18, 24, 0.18);
  color: rgba(238, 255, 250, 0.98);
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  backdrop-filter: blur(3px);
}

.top-clock,
.screen-clock {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --clock-celestial-x: 70%;
  --clock-celestial-y: 28%;
  --clock-celestial-size: 18px;
  background:
    radial-gradient(circle at var(--clock-celestial-x) var(--clock-celestial-y), rgba(255, 255, 255, 0.16) 0 16px, transparent 17px),
    linear-gradient(180deg, rgba(24, 81, 106, 0.58) 0%, rgba(21, 64, 72, 0.42) 58%, rgba(4, 28, 30, 0.76) 100%);
}

.top-clock::before,
.screen-clock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, transparent 0 58%, rgba(42, 94, 92, 0.46) 59% 100%) 0 100% / 58% 42% no-repeat,
    linear-gradient(45deg, transparent 0 56%, rgba(35, 79, 87, 0.54) 57% 100%) 100% 100% / 68% 46% no-repeat,
    linear-gradient(130deg, transparent 0 63%, rgba(10, 48, 58, 0.82) 64% 100%) 8% 100% / 62% 31% no-repeat,
    linear-gradient(42deg, transparent 0 60%, rgba(7, 39, 51, 0.86) 61% 100%) 100% 100% / 72% 34% no-repeat,
    linear-gradient(0deg, rgba(2, 20, 23, 0.70) 0 15%, rgba(11, 55, 55, 0.30) 16% 28%, transparent 29% 100%);
  opacity: 0.9;
}

.top-clock::after,
.screen-clock::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--clock-celestial-x);
  top: var(--clock-celestial-y);
  width: var(--clock-celestial-size);
  height: var(--clock-celestial-size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.6s ease, top 0.6s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.top-clock > *,
.screen-clock > * {
  position: relative;
  z-index: 2;
}

.top-clock span,
.top-clock strong,
.screen-clock span,
.screen-clock strong {
  text-shadow: 0 1px 9px rgba(0, 0, 0, 0.62);
}

body[data-theme="light"] .top-clock span,
body[data-theme="light"] .screen-clock span {
  background: rgba(10, 36, 42, 0.66);
  color: #f4fffb;
  border-color: rgba(255, 255, 255, 0.42);
}

body[data-theme="light"] .top-clock span {
  background: rgba(10, 36, 42, 0.24);
  border-color: transparent;
}

body[data-theme="light"] .top-clock strong,
body[data-theme="light"] .screen-clock strong {
  background: rgba(7, 28, 35, 0.72);
  color: #f2fffb;
}

body[data-theme="light"] .top-clock strong {
  background: rgba(7, 28, 35, 0.28);
}

body[data-clock-landscape="false"] .top-clock,
body[data-clock-landscape="false"] .screen-clock {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--panel)) 0%, var(--active-soft) 100%);
}

body[data-clock-landscape="false"] .top-clock::before,
body[data-clock-landscape="false"] .screen-clock::before,
body[data-clock-landscape="false"] .top-clock::after,
body[data-clock-landscape="false"] .screen-clock::after {
  display: none;
}

.screen-clock span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(2, 18, 24, 0.42);
  color: rgba(237, 255, 249, 0.94);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(4px);
}

.top-clock[data-clock-phase="dawn"],
.screen-clock[data-clock-phase="dawn"] {
  --clock-celestial-size: 24px;
  background:
    radial-gradient(circle at var(--clock-celestial-x) var(--clock-celestial-y), rgba(255, 225, 148, 0.34) 0 34px, transparent 35px),
    linear-gradient(180deg, rgba(92, 175, 212, 0.70) 0%, rgba(255, 177, 114, 0.45) 58%, rgba(21, 106, 102, 0.72) 100%);
}

.top-clock[data-clock-phase="dawn"]::after,
.screen-clock[data-clock-phase="dawn"]::after,
.top-clock[data-clock-phase="day"]::after,
.screen-clock[data-clock-phase="day"]::after,
.top-clock[data-clock-phase="dusk"]::after,
.screen-clock[data-clock-phase="dusk"]::after {
  background:
    radial-gradient(circle at 36% 32%, #fff9c9 0 15%, #ffe16a 45%, #ffbd2f 74%, #f49022 100%);
  box-shadow:
    0 0 0 5px rgba(255, 214, 82, 0.16),
    0 0 18px rgba(255, 191, 52, 0.44),
    0 0 38px rgba(255, 166, 43, 0.22);
}

.top-clock[data-clock-phase="day"],
.screen-clock[data-clock-phase="day"] {
  --clock-celestial-size: 24px;
  background:
    radial-gradient(circle at var(--clock-celestial-x) var(--clock-celestial-y), rgba(255, 232, 95, 0.32) 0 38px, transparent 39px),
    radial-gradient(ellipse at 48% 92%, rgba(47, 183, 146, 0.40) 0 25%, transparent 26%),
    linear-gradient(180deg, rgba(104, 202, 232, 0.92) 0%, rgba(54, 178, 205, 0.70) 58%, rgba(20, 122, 108, 0.80) 100%);
}

.top-clock[data-clock-phase="dusk"],
.screen-clock[data-clock-phase="dusk"] {
  --clock-celestial-size: 23px;
  background:
    radial-gradient(circle at var(--clock-celestial-x) var(--clock-celestial-y), rgba(255, 150, 72, 0.34) 0 34px, transparent 35px),
    linear-gradient(180deg, rgba(82, 86, 154, 0.58) 0%, rgba(213, 98, 84, 0.34) 54%, rgba(28, 39, 66, 0.82) 100%);
}

.top-clock[data-clock-phase="night"],
.screen-clock[data-clock-phase="night"] {
  --clock-celestial-size: 18px;
  background:
    radial-gradient(circle at 14% 23%, rgba(255, 255, 255, 0.76) 0 1px, transparent 1.4px),
    radial-gradient(circle at 36% 16%, rgba(210, 226, 255, 0.70) 0 1px, transparent 1.4px),
    radial-gradient(circle at 63% 25%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 37%, rgba(210, 226, 255, 0.52) 0 1px, transparent 1.4px),
    radial-gradient(circle at var(--clock-celestial-x) var(--clock-celestial-y), rgba(185, 211, 255, 0.16) 0 25px, transparent 26px),
    linear-gradient(180deg, rgba(17, 30, 76, 0.76) 0%, rgba(8, 18, 42, 0.90) 64%, rgba(4, 29, 42, 0.84) 100%);
}

.top-clock[data-clock-phase="night"]::after,
.screen-clock[data-clock-phase="night"]::after {
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle at 72% 36%, rgba(8, 18, 42, 0.94) 0 7px, transparent 7.6px),
    linear-gradient(145deg, #ffffff, #cad8ff);
  box-shadow:
    inset -3px -3px 4px rgba(94, 114, 172, 0.28),
    0 0 16px rgba(168, 193, 255, 0.30);
}

.top-clock[data-clock-phase="night"]::before,
.screen-clock[data-clock-phase="night"]::before {
  background:
    linear-gradient(135deg, transparent 0 58%, rgba(26, 54, 80, 0.42) 59% 100%) 0 100% / 58% 42% no-repeat,
    linear-gradient(45deg, transparent 0 56%, rgba(18, 43, 72, 0.50) 57% 100%) 100% 100% / 68% 46% no-repeat,
    linear-gradient(130deg, transparent 0 63%, rgba(5, 28, 52, 0.86) 64% 100%) 8% 100% / 62% 31% no-repeat,
    linear-gradient(42deg, transparent 0 60%, rgba(4, 22, 45, 0.88) 61% 100%) 100% 100% / 72% 34% no-repeat,
    linear-gradient(0deg, rgba(2, 11, 25, 0.76) 0 15%, rgba(9, 30, 54, 0.28) 16% 28%, transparent 29% 100%);
}

.user-menu {
  position: relative;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.user-pill::after {
  content: "⌄";
  font-size: 13px;
  line-height: 1;
}

.user-menu.open .user-pill {
  background: var(--accent);
  color: #fff;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  display: grid;
  gap: 8px;
  width: min(292px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 96px));
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.46), var(--shadow);
}

.user-dropdown-head {
  display: grid;
  gap: 3px;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--line);
}

.user-dropdown-head strong {
  font-size: 15px;
}

.user-dropdown-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.user-dropdown > button {
  width: 100%;
  min-height: 48px;
  justify-content: center;
}

.user-dropdown-label {
  display: block;
  padding: 1px 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.user-admin-menu {
  display: grid;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.user-admin-menu[hidden] {
  display: none;
}

.user-menu-link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  width: 100%;
  min-height: 58px;
  padding: 7px 9px;
  text-align: left;
}

.user-menu-link > span {
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  border-radius: 7px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 950;
}

.user-menu-link > strong,
.user-menu-link > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-link > strong {
  align-self: end;
  color: var(--ink);
  font-size: 12px;
}

.user-menu-link > small {
  align-self: start;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.user-accessibility-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  text-align: left;
}

.user-accessibility-button > span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-weight: 1000;
}

.user-accessibility-button > strong {
  font-size: 13px;
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 0;
}

.status-grid div {
  background: var(--panel-strong);
  border-radius: 8px;
  padding: 12px;
}

.status-grid dt {
  color: var(--muted);
  font-size: 12px;
}

.status-grid dd {
  margin: 5px 0 0;
  font-weight: 800;
}

.emergency-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 318px;
  border-color: #f1cbc6;
  padding: 14px;
  box-shadow: 0 22px 72px rgba(196, 61, 54, 0.14);
}

.side-panel > .emergency-card {
  flex: 1 1 auto;
}

.emergency-card .eyebrow {
  color: var(--danger);
  font-size: 13px;
}

.emergency-card h2 {
  margin-top: 3px;
  font-size: 29px;
  line-height: 1.08;
}

.emergency-card p {
  font-size: 14px;
  line-height: 1.45;
}

.emergency-mic-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--danger) 18%);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel-strong) 90%, var(--danger-soft) 10%);
}

.emergency-mic-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.emergency-mic-copy span,
.emergency-mic-copy small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.emergency-mic-copy strong {
  font-size: 16px;
  line-height: 1.2;
}

.emergency-mic-status.active {
  grid-template-columns: minmax(0, 1fr) 58px;
  border-color: color-mix(in srgb, var(--danger) 70%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 66%, var(--panel));
}

.emergency-mic-status.active .emergency-mic-copy strong {
  color: var(--danger);
}

.emergency-card .emergency-mic-meter {
  min-height: 62px;
  padding-inline: 4px;
}

.emergency-card .emergency-mic-meter[hidden] {
  display: none;
}

.emergency-mic-status:not(.active) {
  grid-template-columns: minmax(0, 1fr);
}

.emergency-mic-status.active .emergency-mic-meter {
  animation: emergencyMeterReveal 180ms ease-out both;
}

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

.emergency-card .button-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.emergency-card .button-row button {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 950;
}

#fireToggleBtn {
  min-height: 72px;
  font-size: 21px;
  box-shadow: 0 12px 26px rgba(196, 61, 54, 0.22);
}

#fireToggleBtn::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24);
}

.emergency-card.active {
  background: var(--danger-soft);
  border-color: var(--danger);
  animation: emergencyPulse 0.85s ease-in-out infinite;
}

.emergency-card.test-active {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 14%, var(--panel));
}

.emergency-card.active h2,
.emergency-card.active .eyebrow {
  color: var(--danger);
}

#fireTestBtn.active {
  background: var(--warning);
  color: #fff;
}

.fire-asset-line {
  font-size: 13px;
}

.admin-lock-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.admin-lock-row input {
  min-height: 44px;
}

.admin-lock-row button {
  min-height: 44px;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-status.unlocked {
  background: var(--active-soft);
  color: var(--accent-strong);
}

.fire-audio-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.fire-audio-status[data-kind="success"] {
  color: var(--accent-strong);
}

.fire-audio-status[data-kind="error"] {
  color: var(--danger);
}

.inline-file-button {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 800;
  touch-action: manipulation;
}

.inline-file-button.disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.inline-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@keyframes emergencyPulse {
  0%, 100% {
    background: var(--danger-soft);
    box-shadow: var(--shadow), inset 0 0 0 0 rgba(196, 61, 54, 0.15);
  }
  50% {
    background: color-mix(in srgb, var(--danger) 18%, var(--danger-soft));
    box-shadow: 0 0 0 4px rgba(196, 61, 54, 0.28), 0 18px 60px rgba(196, 61, 54, 0.22);
  }
}

.device-list,
.zone-list,
.schedule-list,
.log-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.device-row,
.zone-item,
.schedule-item,
.log-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--item);
}

.device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 7px solid var(--device-accent, var(--accent));
}

.device-row strong {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.device-row strong small {
  color: var(--device-accent, var(--accent));
  font-size: 11px;
  font-weight: 900;
}

.device-color-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--device-accent, var(--accent));
}

.device-row span,
.schedule-item span,
.log-item span {
  color: var(--muted);
  font-size: 12px;
}

.pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--quick);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.pill.online {
  background: var(--active-soft);
  color: var(--accent-strong);
}

.pill.off {
  background: var(--control-strong);
  color: var(--muted);
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 18px;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.lower-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  height: 100%;
  min-height: 0;
}

.panel {
  padding: 18px;
}

.control-grid > .panel,
.lower-grid > .panel {
  height: 100%;
}

.lower-grid > .nav-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: stretch;
}

.home-preview-list {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  margin: 12px 0 8px;
  overflow: hidden;
}

.home-preview-row,
.home-preview-empty {
  display: grid;
  grid-template-columns: minmax(82px, 0.55fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  text-align: left;
}

.home-preview-empty {
  grid-template-columns: 1fr;
}

.home-preview-row strong,
.home-preview-row em,
.home-preview-empty {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.home-preview-row strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.home-preview-row em,
.home-preview-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.home-preview-row.error {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
  background: var(--danger-soft);
}

.home-preview-row.warn,
.home-preview-row.warning {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--panel));
}

.panel-heading h3 {
  margin-top: 4px;
  font-size: 18px;
}

.inline-status-line {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inline-status-line strong {
  color: var(--accent-strong);
}

.broadcast-zone-summary {
  display: grid;
  min-width: 170px;
  max-width: min(42%, 310px);
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--active-soft) 66%, var(--panel));
  text-align: right;
}

.broadcast-zone-summary strong,
.broadcast-zone-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-zone-summary strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.broadcast-zone-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.broadcast-panel,
.zone-panel,
.schedule-panel,
.log-panel,
.channel-panel {
  min-height: 0;
}

.broadcast-panel {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto;
  align-content: start;
  overflow: auto;
}

.zone-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.zone-panel .zone-list {
  min-height: 0;
  overflow: auto;
}

.tts-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  margin-top: 12px;
  min-height: 96px;
}

.broadcast-panel #ttsText {
  height: 100%;
}

.broadcast-panel .home-mic-control {
  grid-template-columns: minmax(0, 0.86fr) minmax(214px, 0.56fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px;
}

.broadcast-panel .home-mic-control .mic-control-head {
  min-width: 0;
}

.broadcast-panel .home-mic-control .mic-action-row {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
}

.broadcast-panel .home-mic-control .mic-broadcast-button {
  min-height: 84px;
  padding: 13px 16px;
}

.broadcast-panel .home-mic-control .mic-broadcast-button strong {
  font-size: 21px;
}

.tts-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tts-actions button {
  min-width: 112px;
  min-height: 54px;
}

.tts-actions button.broadcasting,
.tts-actions button.previewing {
  animation: ttsButtonPulse 0.9s ease-in-out infinite;
}

.tts-actions button.previewing {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 70%, #1e6bff), var(--info));
}

@keyframes ttsButtonPulse {
  0%, 100% {
    transform: translateY(0);
    filter: brightness(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent);
  }
  50% {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 12px 30px rgba(64, 205, 181, 0.24);
  }
}

.quick-tts-section {
  margin-top: 11px;
}

.quick-tts-heading,
.quick-tts-heading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quick-tts-heading > div:first-child {
  min-width: 0;
}

.quick-tts-heading strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.quick-tts-heading-actions > span {
  min-width: 34px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.quick-tts-heading-actions button {
  min-height: 34px;
  padding: 6px 10px;
}

.quick-tts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 4);
  gap: 8px;
  margin-top: 7px;
  padding: 1px 1px 5px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 38%, transparent) transparent;
}

.quick-tts button {
  min-height: 50px;
  padding: 8px;
  background: var(--quick);
  color: var(--accent-strong);
  font-weight: 800;
  scroll-snap-align: start;
}

.ai-script-panel {
  margin-top: 9px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel-strong) 86%, #0f2f3b);
}

.ai-script-head,
.ai-script-input-row,
.ai-script-card-head,
.ai-script-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-script-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 7px;
}

.ai-script-head strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.ai-script-head-actions {
  display: flex;
  flex: 0 1 56%;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

#aiScriptStatus {
  flex: 0 1 220px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: right;
}

.ai-script-collapse-button {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 4px 8px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.ai-script-collapse-button[hidden] {
  display: none;
}

#aiScriptStatus[data-kind="success"] {
  color: var(--accent-strong);
}

#aiScriptStatus[data-kind="warning"] {
  color: var(--warning);
}

#aiScriptStatus[data-kind="error"] {
  color: var(--danger);
}

.ai-script-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: stretch;
  gap: 8px;
}

#aiScriptTopicInput {
  flex: 1 1 auto;
  min-height: 44px;
  height: 44px;
  padding: 8px 10px;
  resize: vertical;
}

.ai-script-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-width: 0;
}

.ai-script-side select,
.ai-script-side button {
  min-height: 0;
}

.ai-script-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin-top: 8px;
}

.ai-script-results[hidden] {
  display: none;
}

.ai-script-results.is-collapsed {
  display: none;
}

.ai-script-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent));
}

.ai-script-card-head {
  justify-content: space-between;
}

.ai-script-card-head strong {
  color: var(--accent-strong);
}

.ai-script-card-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ai-script-card p {
  min-height: 0;
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.ai-script-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 0.82fr;
  gap: 6px;
}

.ai-script-card-actions button {
  min-height: 34px;
  padding: 5px 6px;
  font-size: 12px;
}

.split-actions {
  margin-top: 12px;
}

.split-actions label {
  flex: 1 1 220px;
}

.split-actions label span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.zone-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  min-height: 64px;
}

.zone-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--muted) 70%, var(--line));
  border-radius: 6px;
  background: var(--panel);
}

.zone-item.active .zone-check {
  border-color: var(--accent);
  background: var(--accent);
}

.zone-item.active .zone-check::after {
  content: "";
  width: 8px;
  height: 4px;
  border: solid #052b28;
  border-width: 0 0 3px 3px;
  transform: translateY(-1px) rotate(-45deg);
}

.zone-item.active {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(69, 199, 176, 0.26), rgba(29, 96, 112, 0.20)),
    var(--active-soft);
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px rgba(69, 199, 176, 0.12);
}

.zone-item strong {
  display: block;
  margin-bottom: 3px;
}

.zone-item span {
  color: var(--muted);
  font-size: 12px;
}

.zone-item.active strong {
  color: var(--ink);
}

.zone-item.active span {
  color: rgba(238, 255, 250, 0.92);
  font-weight: 850;
}

.zone-item.active .pill {
  background: rgba(2, 35, 38, 0.42);
  color: #eafff9;
  box-shadow: inset 0 0 0 1px rgba(234, 255, 249, 0.16);
}

body[data-theme="light"] .zone-item.active span {
  color: rgba(5, 56, 55, 0.82);
}

body[data-theme="light"] .zone-item.active .pill {
  background: rgba(4, 92, 86, 0.14);
  color: var(--accent-strong);
}

.zone-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.zone-selection-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 35px;
  margin-top: 9px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.zone-selection-footer strong {
  color: var(--accent-strong);
  font-size: 13px;
}

.zone-multi-select-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.zone-action-row .wide-nav-button {
  margin-top: 0;
}

.direct-channel-button {
  gap: 2px;
  background: var(--item);
  border: 1px solid var(--line);
}

.device-power-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  place-items: center stretch;
  gap: 7px;
  padding-inline: 10px;
  border: 1px solid color-mix(in srgb, var(--info) 36%, var(--line));
  background: color-mix(in srgb, var(--info) 8%, var(--item));
  text-align: left;
}

.device-power-button > span:last-child,
.device-power-button strong,
.device-power-button small {
  display: block;
  min-width: 0;
}

.device-power-button strong {
  color: var(--ink);
  font-size: 13px;
}

.device-power-button small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-power-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border: 3px solid var(--muted);
  border-radius: 999px;
}

.device-power-icon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 5px;
  height: 15px;
  border: 3px solid var(--item);
  border-width: 0 3px;
  background: var(--muted);
  transform: translateX(-50%);
}

.device-power-button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--item));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 16%, transparent);
}

.device-power-button.active .device-power-icon {
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}

.device-power-button.active .device-power-icon::before {
  background: var(--accent);
}

.device-power-button.unmapped:not(.active) {
  border-style: dashed;
}

.device-power-button:disabled {
  opacity: 0.58;
}

.direct-channel-button > span,
.direct-channel-button small {
  white-space: nowrap;
}

.direct-channel-button > span {
  font-size: 13px;
}

.direct-channel-button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.direct-channel-button strong {
  color: var(--accent-strong);
  font-size: 15px;
}

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

.zone-method-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-left-width: 5px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--active-soft) 72%, var(--panel));
}

.zone-method-note strong {
  color: var(--accent-strong);
  font-size: 13px;
}

.zone-method-note span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.zone-editor-summary {
  grid-column: 1 / -1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--item);
  color: var(--muted);
  font-weight: 800;
}

.zone-editor-summary strong {
  color: var(--accent-strong);
  font-size: 22px;
}

.zone-editor-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.75fr 1fr 0.75fr;
  gap: 10px;
}

.zone-editor-actions button {
  min-height: 50px;
  padding: 10px 12px;
  font-size: 14px;
}

.zone-editor .upload-status {
  grid-column: 1 / -1;
}

.zone-preset-composer {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--item-soft);
}

.zone-preset-composer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.zone-preset-composer > header strong {
  display: block;
  max-width: 230px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-preset-drop-area {
  display: grid;
  gap: 8px;
  min-height: 112px;
  max-height: 244px;
  padding: 10px;
  overflow: auto;
  border: 2px dashed var(--line-strong);
  border-radius: 9px;
  background: var(--panel);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.zone-preset-drop-area.ready {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.zone-preset-drop-area.drag-over {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.zone-preset-drop-area > p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.zone-preset-channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 6px;
}

.zone-preset-channel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 3px 6px;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: 7px 8px;
  border-color: var(--line);
  background: var(--item);
  text-align: left;
  cursor: grab;
}

.zone-preset-channel:active {
  cursor: grabbing;
}

.zone-preset-channel strong {
  color: var(--accent-strong);
  font-size: 12px;
}

.zone-preset-channel span,
.zone-preset-channel small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-preset-channel span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
}

.zone-preset-channel small {
  grid-column: 1 / 3;
  color: var(--muted);
  font-size: 9px;
}

.zone-preset-channel em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--danger);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.zone-preset-channel.dragging,
.zone-channel-chip.dragging,
.routing-input-item.dragging,
.channel-cell.dragging,
.zone-canvas-channel-tile.dragging,
.zone-canvas-member.dragging {
  opacity: 0.18;
  filter: grayscale(0.45) saturate(0.55);
  transform: scale(0.97);
}

.zone-preset-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.zone-preset-actions button {
  min-height: 42px;
  padding: 7px 9px;
  font-size: 11px;
}

.zone-manager {
  flex: 0 0 auto;
  min-height: 160px;
  margin-top: 12px;
  overflow: visible;
}

.zone-manage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--item);
  cursor: pointer;
  user-select: none;
}

.zone-manage-row.active {
  border-color: var(--accent);
  background: var(--active-soft);
}

.zone-manage-row:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.zone-manage-row.editing {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.zone-manage-row strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

.zone-manage-row span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.zone-manage-actions {
  display: flex;
  gap: 8px;
}

.zone-manage-actions button {
  min-width: 62px;
  min-height: 48px;
  padding: 9px 12px;
}

.zone-manage-main {
  min-width: 0;
}

.zone-manage-row.drag-over,
.routing-zone-target.drag-over {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.zone-channel-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.zone-channel-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 5px;
  align-items: center;
  min-width: 0;
  min-height: 38px;
  padding: 5px 7px;
  border-color: var(--line);
  background: var(--panel);
  text-align: left;
}

.zone-channel-chip > span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.zone-channel-chip small {
  max-width: 92px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-channel-chip em {
  color: var(--danger);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.zone-channel-more {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--accent-strong) !important;
  font-size: 11px !important;
  font-weight: 900;
}

.zone-channel-empty {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 5px 9px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--warning) !important;
  font-size: 11px !important;
  font-weight: 850;
}

.selection-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
}

.selection-summary strong {
  color: var(--accent);
  font-size: 28px;
}

.channel-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.channel-availability-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--active-soft) 76%, transparent);
  color: var(--muted);
  font-size: 12px;
}

.channel-availability-note strong {
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.channel-availability-note span {
  text-align: right;
  line-height: 1.35;
}

.channel-availability-note.empty {
  display: grid;
  justify-items: center;
  min-height: 160px;
  text-align: center;
}

.channel-availability-note.empty span {
  text-align: center;
}

.channel-device {
  border: 1px solid var(--line);
  border-top: 5px solid var(--device-accent, var(--accent));
  border-radius: 8px;
  padding: 12px;
  background: var(--item-soft);
}

.channel-device.offline {
  background: color-mix(in srgb, var(--item-soft) 88%, var(--device-accent, var(--accent)));
}

.channel-device-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  min-height: 34px;
  margin-bottom: 10px;
}

.channel-device h4 {
  margin: 0;
  font-size: 14px;
}

.channel-device-head span {
  color: var(--device-accent, var(--accent));
  font-size: 11px;
  font-weight: 900;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
}

.channel-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  touch-action: none;
  user-select: none;
}

.channel-btn {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 6px;
  background: color-mix(in srgb, var(--device-accent, var(--accent)) 10%, var(--control-strong));
  color: var(--ink);
  font-weight: 800;
  font-size: 18px;
  -webkit-user-select: none;
  user-select: none;
}

.channel-btn strong {
  font-size: 15px;
  line-height: 1;
}

.channel-btn small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-btn.selected small {
  color: rgba(255, 255, 255, 0.86);
}

.channel-btn.selected {
  background: var(--device-accent, var(--accent));
  color: #fff;
}

.channel-btn.live {
  box-shadow: inset 0 0 0 2px var(--warning);
}

.channel-cell {
  position: relative;
  min-width: 0;
}

.channel-cell .channel-btn {
  width: 100%;
  height: 100%;
}

.channel-label-inline-edit {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  min-width: 44px;
  min-height: 28px;
  padding: 4px 7px;
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 90%, var(--accent));
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.channel-cell .channel-label-inline-edit:hover,
.channel-cell .channel-label-inline-edit:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.channel-drag-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  min-height: 22px;
  padding: 4px 5px;
  border-color: color-mix(in srgb, var(--warning) 65%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel) 88%, var(--warning));
  color: var(--warning);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.zone-channel-matrix .channel-btn[data-zone-channel-drag] {
  cursor: grab;
  touch-action: none;
}

.zone-channel-matrix .channel-btn[data-zone-channel-drag]:active {
  cursor: grabbing;
}

.zone-channel-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: grid;
  gap: 2px;
  place-items: center;
  min-width: 74px;
  min-height: 42px;
  padding: 8px 12px;
  border: 2px solid var(--accent);
  border-radius: 9px;
  background: var(--panel);
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 950;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.zone-channel-drag-ghost strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.zone-channel-drag-ghost span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.zone-channel-matrix .channel-cell .channel-btn {
  padding-top: 31px;
  padding-bottom: 31px;
}

.regular-alert-card {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.regular-alert-head,
.regular-alert-layout,
.regular-alert-form-grid,
.regular-alert-actions,
.regular-alert-group {
  display: grid;
  gap: 10px;
}

.regular-alert-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.regular-alert-head h3 {
  margin: 2px 0 3px;
  font-size: 18px;
}

.regular-alert-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.regular-alert-head > strong {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 13px;
}

.regular-alert-head-actions,
.regular-alert-template-head,
.regular-alert-list-head,
.regular-alert-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.regular-alert-head-actions > strong {
  display: inline-grid;
  place-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 13px;
}

.regular-alert-head-actions button {
  min-height: 40px;
}

.regular-alert-dashboard {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, var(--active-soft));
}

.regular-alert-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.regular-alert-metric {
  position: relative;
  min-width: 0;
  min-height: 84px;
  padding: 11px 12px 10px 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
}

.regular-alert-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent);
}

.regular-alert-metric.next::before {
  background: #48a9df;
}

.regular-alert-metric.active::before {
  background: #7bc982;
}

.regular-alert-metric.conflict::before {
  background: var(--warning);
}

.regular-alert-metric span,
.regular-alert-metric strong,
.regular-alert-metric small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regular-alert-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.regular-alert-metric strong {
  margin-top: 4px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.05;
}

.regular-alert-metric small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.regular-alert-calendar {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--control);
}

.regular-alert-calendar-head > div span,
.regular-alert-calendar-head > div strong,
.regular-alert-list-head > div span,
.regular-alert-list-head > div strong,
.regular-alert-template-head > div span,
.regular-alert-template-head > div strong {
  display: block;
}

.regular-alert-calendar-head > div strong,
.regular-alert-list-head > div strong,
.regular-alert-template-head > div strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
}

.regular-alert-calendar-head > span,
.regular-alert-list-head > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.regular-alert-move-guide {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.regular-alert-move-guide.active {
  border-style: solid;
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.regular-alert-move-guide strong {
  color: var(--ink);
}

.regular-alert-move-guide button {
  min-height: 32px;
  padding-inline: 10px;
}

.regular-alert-drag-symbol {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 2px;
}

.regular-alert-timeline-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.regular-alert-timeline-days button {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  gap: 3px 7px;
  min-width: 0;
  min-height: 50px;
  padding: 6px 8px;
  border-color: var(--line);
  background: var(--panel);
}

.regular-alert-timeline-days button span,
.regular-alert-timeline-days button strong {
  font-size: 12px;
}

.regular-alert-timeline-days button strong {
  color: var(--accent-strong);
}

.regular-alert-timeline-days button small {
  grid-column: 1 / -1;
  color: var(--danger);
  font-size: 9px;
}

.regular-alert-timeline-days button.today::after {
  content: "오늘";
  position: absolute;
  top: 3px;
  right: 4px;
  color: var(--accent-strong);
  font-size: 8px;
  font-weight: 950;
}

.regular-alert-timeline-days button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.regular-alert-timeline-days button.move-target,
.regular-alert-timeline-days button.drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 54%, transparent);
}

.regular-alert-timeline-days button.move-origin {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--panel));
}

.regular-alert-timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-height: 58px;
}

.regular-alert-timeline-event {
  --event-color: var(--accent);
  display: grid;
  grid-template-columns: 48px 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--event-color) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--event-color) 7%, var(--panel));
}

.regular-alert-timeline-event.tone-1 { --event-color: #4f9fdb; }
.regular-alert-timeline-event.tone-2 { --event-color: #8b78d5; }
.regular-alert-timeline-event.tone-3 { --event-color: #d39a39; }
.regular-alert-timeline-event.tone-4 { --event-color: #d36d84; }
.regular-alert-timeline-event.tone-5 { --event-color: #6fae68; }

.regular-alert-timeline-event time {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.regular-alert-timeline-line {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}

.regular-alert-timeline-line::before {
  content: "";
  width: 2px;
  height: 100%;
  background: color-mix(in srgb, var(--event-color) 42%, transparent);
}

.regular-alert-timeline-line i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--event-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--event-color) 30%, transparent);
}

.regular-alert-timeline-event > div {
  min-width: 0;
}

.regular-alert-timeline-event > div strong,
.regular-alert-timeline-event > div span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regular-alert-timeline-event > div strong {
  color: var(--ink);
  font-size: 12px;
}

.regular-alert-timeline-event > div span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.regular-alert-timeline-event em {
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.regular-alert-timeline-event em.ready {
  background: var(--active-soft);
  color: var(--accent-strong);
}

.regular-alert-timeline-event em.paused-label {
  background: var(--control);
  color: var(--muted);
}

.regular-alert-timeline-event.paused {
  opacity: 0.58;
}

.regular-alert-timeline-event.conflict {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
}

.regular-alert-group-card {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 8px;
  cursor: default;
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.regular-alert-group-card.dragging {
  opacity: 0.42;
  transform: scale(0.985);
}

.regular-alert-card-handle {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 58px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--event-color) 34%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--event-color) 12%, var(--control));
  color: var(--event-color);
  cursor: grab;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 2px;
  touch-action: manipulation;
}

.regular-alert-card-handle:active {
  cursor: grabbing;
}

.regular-alert-card-copy {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
}

.regular-alert-card-copy > strong,
.regular-alert-card-copy > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.regular-alert-card-copy > strong {
  color: var(--ink);
  font-size: 13px;
}

.regular-alert-card-copy > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.regular-alert-card-times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 3px;
  overflow: visible;
  padding-block: 2px;
}

.regular-alert-card-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--event-color) 38%, var(--line));
  border-radius: 999px;
  padding: 2px 4px 2px 8px;
  background: color-mix(in srgb, var(--event-color) 9%, var(--panel));
}

.regular-alert-card-time time {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.regular-alert-card-time button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.regular-alert-card-time button:hover,
.regular-alert-card-time button:focus-visible {
  background: var(--danger-soft);
  color: var(--danger);
}

.regular-alert-card-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(54px, auto));
  align-content: center;
  gap: 5px;
}

.regular-alert-card-actions em {
  grid-column: 1 / -1;
  justify-self: end;
}

.regular-alert-card-actions button {
  min-height: 34px;
  padding-inline: 8px;
  font-size: 10px;
}

.regular-alert-group-card.move-selected {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.regular-alert-timeline-empty {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  min-height: 66px;
  color: var(--muted);
  text-align: center;
}

.regular-alert-timeline-empty strong,
.regular-alert-timeline-empty span {
  display: block;
}

.regular-alert-timeline-empty strong {
  color: var(--ink);
  font-size: 12px;
}

.regular-alert-timeline-empty span {
  margin-top: 4px;
  font-size: 10px;
}

.regular-alert-layout {
  grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
  align-items: start;
}

.regular-alert-template-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid color-mix(in srgb, #4f9fdb 34%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, #4f9fdb 6%, var(--item-soft));
}

.regular-alert-template-head button {
  min-height: 36px;
}

.regular-alert-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.regular-alert-preset {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  color: var(--ink);
  text-align: left;
}

.regular-alert-preset strong,
.regular-alert-preset span,
.regular-alert-group strong,
.regular-alert-group span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.regular-alert-preset strong {
  font-size: 14px;
}

.regular-alert-preset span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.regular-alert-preset.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
  box-shadow: inset 4px 0 0 var(--accent);
}

.regular-alert-editor {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.regular-alert-form-grid {
  grid-column: 1 / -1;
  grid-template-columns: 1.1fr 1.1fr 0.85fr 0.62fr;
  gap: 8px;
}

.regular-alert-editor input,
.regular-alert-editor select,
.regular-alert-editor button {
  min-height: 42px;
}

.regular-alert-editor .schedule-field {
  gap: 5px;
}

.regular-alert-form-grid .select-action-row {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.regular-alert-form-grid .icon-button.active {
  background: var(--accent);
  color: #fff;
}

.regular-alert-day-section,
.regular-alert-time-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.regular-alert-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.regular-alert-section-head > div:first-child strong,
.regular-alert-section-head > div:first-child span {
  display: block;
}

.regular-alert-section-head > div:first-child strong {
  font-size: 14px;
}

.regular-alert-section-head > div:first-child span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.regular-alert-day-presets,
.regular-alert-time-meta,
.regular-alert-time-adjust {
  display: flex;
  align-items: center;
  gap: 6px;
}

.regular-alert-day-presets button {
  min-width: 72px;
}

.regular-alert-day-presets button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

.regular-alert-time-meta > strong {
  min-width: 76px;
  color: var(--accent-strong);
  text-align: right;
}

.regular-alert-time-meta button {
  min-height: 36px;
}

.regular-alert-weekdays {
  grid-column: auto;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.regular-alert-weekdays label {
  min-height: 48px;
  font-size: 14px;
}

.regular-alert-weekdays input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.regular-alert-time-entry {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(300px, 1.5fr) minmax(92px, 0.5fr) minmax(110px, 0.6fr);
  gap: 8px;
  align-items: end;
}

.regular-alert-time-entry input[type="time"] {
  min-height: 50px;
  font-size: 18px;
  font-weight: 900;
}

.regular-alert-time-entry > button,
.regular-alert-time-adjust button {
  min-height: 50px;
}

.regular-alert-time-adjust {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
}

.regular-alert-time-chips {
  min-height: 54px;
}

.regular-alert-bulk-builder {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.regular-alert-bulk-builder summary {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--accent-strong);
  font-weight: 900;
  cursor: pointer;
}

.regular-alert-bulk-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(100px, 0.55fr) minmax(110px, 0.6fr) minmax(150px, 0.8fr);
  gap: 8px;
  align-items: end;
  padding-top: 7px;
}

.regular-alert-bulk-grid > button {
  min-height: 48px;
}

.regular-alert-summary,
.regular-alert-status {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--active-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.regular-alert-status {
  min-height: 0;
  background: var(--control);
  color: var(--muted);
}

.regular-alert-status[data-kind="success"] {
  color: var(--accent-strong);
}

.regular-alert-status[data-kind="error"] {
  color: var(--danger);
}

.regular-alert-actions {
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.regular-alert-status {
  grid-column: 2;
  display: flex;
  align-items: center;
}

.regular-alert-actions button {
  min-height: 42px;
}

.regular-alert-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.regular-alert-list-head {
  padding: 5px 2px 0;
}

.regular-alert-group {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
}

.regular-alert-group.paused {
  opacity: 0.68;
}

.regular-alert-group.editing {
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.regular-alert-group-actions {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
}

.regular-alert-group-actions button {
  min-height: 36px;
  padding-inline: 10px;
}

.regular-alert-group span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.schedule-workspace-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.schedule-workspace-tabs button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 14px;
  text-align: left;
  background: var(--control);
  color: var(--muted);
}

.schedule-workspace-tabs button::before {
  grid-row: 1 / 3;
  content: "";
  width: 9px;
  height: 34px;
  border-radius: 999px;
  background: var(--line-strong);
}

.schedule-workspace-tabs button span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.schedule-workspace-tabs button small {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-workspace-tabs button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.schedule-workspace-tabs button.active::before {
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 48%, transparent);
}

.schedule-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.schedule-workspace[hidden] {
  display: none !important;
}

.schedule-dashboard-view,
.schedule-editor-view {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.schedule-dashboard-view[hidden],
.schedule-editor-view[hidden] {
  display: none !important;
}

.schedule-overview {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(480px, 1.5fr) minmax(140px, 0.42fr);
  gap: 14px;
  align-items: stretch;
  padding: 15px;
  overflow: visible;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--accent) 12%, var(--panel)) 0%, var(--panel) 58%);
}

.schedule-overview-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.schedule-overview-copy h3,
.schedule-list-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.schedule-overview-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

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

.schedule-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--control));
}

.schedule-metric.today {
  border-color: color-mix(in srgb, #4d91bf 42%, var(--line));
  background: color-mix(in srgb, #4d91bf 9%, var(--control));
}

.schedule-metric.next {
  border-color: color-mix(in srgb, #c38c32 42%, var(--line));
  background: color-mix(in srgb, #c38c32 9%, var(--control));
}

.schedule-metric span,
.schedule-metric small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-metric strong {
  overflow: hidden;
  margin: 4px 0 2px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-new-top {
  min-height: 84px;
  padding-inline: 14px;
  font-size: 14px;
  font-weight: 950;
}

.schedule-dashboard-menu,
.schedule-dashboard-upcoming {
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: visible;
}

.schedule-dashboard-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.schedule-dashboard-head.compact {
  align-items: center;
}

.schedule-dashboard-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 17px;
}

.schedule-dashboard-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.schedule-dashboard-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.schedule-dashboard-actions > button {
  --schedule-action-accent: var(--accent);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-height: 94px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--schedule-action-accent) 34%, var(--line));
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--schedule-action-accent) 9%, var(--control)) 0%, var(--control) 60%);
  color: var(--muted);
  text-align: left;
  box-shadow: inset 4px 0 0 var(--schedule-action-accent);
}

.schedule-dashboard-actions > button:nth-child(2) {
  --schedule-action-accent: #4d91bf;
}

.schedule-dashboard-actions > button:nth-child(3) {
  --schedule-action-accent: #c38c32;
}

.schedule-dashboard-actions > button:nth-child(4) {
  --schedule-action-accent: #b66f59;
}

.schedule-dashboard-actions > button:nth-child(5) {
  --schedule-action-accent: #8b73c4;
}

.schedule-dashboard-actions > button:nth-child(6) {
  --schedule-action-accent: #73889b;
}

.schedule-dashboard-actions > button:hover,
.schedule-dashboard-actions > button:focus-visible {
  border-color: var(--schedule-action-accent);
  background: color-mix(in srgb, var(--schedule-action-accent) 14%, var(--control));
  transform: translateY(-1px);
}

.schedule-dashboard-action-number {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--schedule-action-accent) 15%, var(--control-strong));
  color: var(--schedule-action-accent);
  font-size: 12px;
  font-weight: 950;
}

.schedule-dashboard-actions strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-dashboard-actions small {
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-dashboard-actions em {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--schedule-action-accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-weekboard {
  display: grid;
  gap: 11px;
  padding: 14px;
  overflow: visible;
  background:
    linear-gradient(115deg, color-mix(in srgb, #4d91bf 7%, var(--panel)) 0%, var(--panel) 62%);
}

.schedule-weekboard-head p {
  max-width: 760px;
}

.schedule-weekday-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.schedule-weekday-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 1px 6px;
  align-items: center;
  min-width: 0;
  min-height: 52px;
  padding: 7px 9px;
  border-color: var(--line);
  background: var(--control);
  color: var(--muted);
  text-align: left;
}

.schedule-weekday-tabs button span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.schedule-weekday-tabs button strong {
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  min-width: 27px;
  min-height: 27px;
  border-radius: 999px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 11px;
}

.schedule-weekday-tabs button small {
  color: #4d91bf;
  font-size: 9px;
  font-weight: 950;
}

.schedule-weekday-tabs button.today:not(.active) {
  border-color: color-mix(in srgb, #4d91bf 50%, var(--line));
}

.schedule-weekday-tabs button.active {
  border-color: #4d91bf;
  background: color-mix(in srgb, #4d91bf 16%, var(--control));
  box-shadow: inset 0 -3px 0 #4d91bf, 0 5px 14px rgba(0, 0, 0, 0.16);
}

.schedule-weekday-tabs button.active strong {
  background: #4d91bf;
  color: #fff;
}

.schedule-weekboard-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
}

.schedule-weekboard-columns,
.schedule-weekboard-row {
  display: grid;
  grid-template-columns: 112px minmax(260px, 1fr) 72px minmax(150px, 0.42fr) 72px;
  gap: 10px;
  align-items: center;
}

.schedule-weekboard-columns {
  min-height: 34px;
  padding: 5px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--control-strong);
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.schedule-weekboard-list {
  display: grid;
  min-width: 0;
}

.schedule-weekboard-row {
  width: 100%;
  min-height: 62px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  text-align: left;
  box-shadow: none;
}

.schedule-weekboard-row:last-child {
  border-bottom: 0;
}

.schedule-weekboard-row:hover,
.schedule-weekboard-row:focus-visible {
  background: color-mix(in srgb, #4d91bf 10%, var(--control));
  box-shadow: inset 4px 0 0 #4d91bf;
  transform: none;
}

.schedule-weekboard-row.paused {
  opacity: 0.68;
}

.schedule-weekboard-time {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}

.schedule-weekboard-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.schedule-weekboard-main strong,
.schedule-weekboard-main small,
.schedule-weekboard-zone {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-weekboard-main strong {
  color: var(--ink);
  font-size: 13px;
}

.schedule-weekboard-main small {
  color: var(--muted);
  font-size: 10px;
}

.schedule-weekboard-source {
  display: inline-grid;
  place-items: center;
  justify-self: start;
  min-width: 52px;
  min-height: 27px;
  border-radius: 999px;
  background: color-mix(in srgb, #c38c32 16%, var(--control-strong));
  color: #d5a650;
  font-size: 10px;
  font-weight: 950;
}

.schedule-weekboard-source.tts {
  background: color-mix(in srgb, #4d91bf 17%, var(--control-strong));
  color: #72b4df;
}

.schedule-weekboard-zone {
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
}

.schedule-weekboard-row em {
  color: #4d91bf;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}

.schedule-weekboard-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
}

.schedule-weekboard-empty strong,
.schedule-weekboard-empty span {
  display: block;
}

.schedule-weekboard-empty span {
  color: var(--muted);
  font-size: 11px;
}

.schedule-weekboard-empty button {
  grid-column: 2;
  grid-row: 1 / 3;
}

.schedule-dashboard-upcoming-list {
  display: grid;
  gap: 7px;
}

.schedule-dashboard-upcoming-row {
  display: grid;
  grid-template-columns: 34px 112px minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px 11px;
  border-color: var(--line);
  background: var(--control);
  color: var(--muted);
  text-align: left;
}

.schedule-dashboard-upcoming-row:hover,
.schedule-dashboard-upcoming-row:focus-visible {
  border-color: var(--accent);
  background: var(--active-soft);
}

.schedule-upcoming-order {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
}

.schedule-upcoming-time {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.schedule-upcoming-main {
  display: grid;
  min-width: 0;
}

.schedule-upcoming-main strong,
.schedule-upcoming-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-upcoming-main strong {
  color: var(--ink);
  font-size: 13px;
}

.schedule-upcoming-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.schedule-dashboard-upcoming-row em {
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.schedule-dashboard-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--control);
}

.schedule-dashboard-empty strong,
.schedule-dashboard-empty span {
  display: block;
}

.schedule-dashboard-empty span {
  color: var(--muted);
  font-size: 11px;
}

.schedule-dashboard-empty button {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 46px;
}

.schedule-editor-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 4px 0 0 var(--accent);
}

.schedule-editor-toolbar > button {
  min-height: 46px;
}

.schedule-editor-toolbar h3 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 16px;
}

.schedule-editor-toolbar > strong {
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 34px;
  border-radius: 999px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 11px;
}

.schedule-target-picker {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 0.72fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.schedule-target-picker[hidden] {
  display: none !important;
}

.schedule-target-picker > div {
  display: grid;
  gap: 4px;
}

.schedule-target-picker > div > strong {
  color: var(--ink);
  font-size: 15px;
}

.schedule-target-picker > div > small {
  color: var(--muted);
  font-size: 11px;
}

.schedule-target-picker select {
  min-height: 48px;
  font-weight: 900;
}

.schedule-editor-view:not([data-editor-mode="full"]) .schedule-workflow {
  display: none;
}

.schedule-editor-view[data-editor-mode="audio"] #scheduleTtsSection,
.schedule-editor-view[data-editor-mode="audio"] #toggleScheduleAdvancedBtn,
.schedule-editor-view[data-editor-mode="audio"] #scheduleAdvancedPanel,
.schedule-editor-view[data-editor-mode="audio"] .schedule-list-card,
.schedule-editor-view[data-editor-mode="tts"] #scheduleAudioSection,
.schedule-editor-view[data-editor-mode="tts"] #toggleScheduleAdvancedBtn,
.schedule-editor-view[data-editor-mode="tts"] #scheduleAdvancedPanel,
.schedule-editor-view[data-editor-mode="tts"] .schedule-list-card,
.schedule-editor-view[data-editor-mode="time"] #scheduleBasicSection,
.schedule-editor-view[data-editor-mode="time"] #scheduleAudioSection,
.schedule-editor-view[data-editor-mode="time"] #scheduleTtsSection,
.schedule-editor-view[data-editor-mode="time"] #toggleScheduleAdvancedBtn,
.schedule-editor-view[data-editor-mode="time"] #scheduleAdvancedPanel,
.schedule-editor-view[data-editor-mode="time"] .schedule-list-card,
.schedule-editor-view[data-editor-mode="exceptions"] #scheduleBasicSection,
.schedule-editor-view[data-editor-mode="exceptions"] #scheduleTimeSection,
.schedule-editor-view[data-editor-mode="exceptions"] #scheduleRecurrenceSection,
.schedule-editor-view[data-editor-mode="exceptions"] #scheduleAudioSection,
.schedule-editor-view[data-editor-mode="exceptions"] #scheduleTtsSection,
.schedule-editor-view[data-editor-mode="exceptions"] #toggleScheduleAdvancedBtn,
.schedule-editor-view[data-editor-mode="exceptions"] .schedule-list-card,
.schedule-editor-view[data-editor-mode="list"] .schedule-workflow,
.schedule-editor-view[data-editor-mode="list"] .schedule-form {
  display: none !important;
}

.schedule-editor-view.schedule-target-empty .schedule-form {
  display: none !important;
}

.schedule-editor-view.schedule-target-empty .schedule-target-picker {
  border-style: dashed;
  border-color: var(--warn);
}

.schedule-workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.schedule-workflow button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px 10px;
  border-color: var(--line);
  background: var(--control);
  color: var(--muted);
  text-align: left;
}

.schedule-workflow button > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--control-strong);
  color: var(--muted);
  font-weight: 950;
}

.schedule-workflow button strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-workflow button small {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-workflow button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.schedule-workflow button.active > span {
  background: var(--accent);
  color: #fff;
}

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

.screen-card.schedule-form {
  overflow: visible;
}

.schedule-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  grid-column: 1 / -1;
  scroll-margin-top: 12px;
}

.schedule-list-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.schedule-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.schedule-list-head > strong {
  display: grid;
  place-items: center;
  min-width: 58px;
  min-height: 34px;
  border-radius: 999px;
  background: var(--active-soft);
  color: var(--accent-strong);
}

.schedule-list-card .schedule-list {
  margin-top: 0;
}

.schedule-main-section {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}

.schedule-main-head {
  grid-column: 1 / -1;
}

.schedule-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.schedule-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.schedule-name-field {
  grid-column: span 4;
}

.schedule-main-section .schedule-field:not(.schedule-name-field) {
  grid-column: span 2;
}

.schedule-asset-field,
.schedule-text-field {
  grid-column: 1 / -1;
}

.schedule-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 2px;
}

.schedule-section-head strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
}

.schedule-section-head > span {
  display: inline-grid;
  place-items: center;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-time-section,
.schedule-recurrence-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--item-soft);
}

.schedule-time-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule-time-mode label {
  position: relative;
  display: block;
  min-width: 0;
}

.schedule-time-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.schedule-time-mode label > span {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  color: var(--muted);
  cursor: pointer;
}

.schedule-time-mode label > span strong {
  color: var(--ink);
  font-size: 14px;
}

.schedule-time-mode label > span small {
  font-size: 11px;
  line-height: 1.35;
}

.schedule-time-mode input:checked + span {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.schedule-time-mode input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.schedule-exact-time-editor {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(360px, 0.8fr) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
}

.schedule-exact-time-editor[hidden],
.schedule-interval-time-editor[hidden] {
  display: none !important;
}

.schedule-exact-time-editor input[type="time"],
.schedule-interval-time-editor input[type="time"] {
  min-height: 50px;
  font-size: 18px;
  font-weight: 900;
}

.schedule-time-adjust {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 6px;
}

.schedule-time-adjust button {
  min-height: 50px;
  padding-inline: 8px;
}

.schedule-time-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 7px;
  min-height: 50px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
}

.schedule-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 4px 5px 4px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 999px;
  background: var(--active-soft);
  color: var(--ink);
}

.schedule-time-chip strong {
  font-size: 14px;
}

.schedule-time-chip button {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 999px;
}

.schedule-time-empty {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.schedule-interval-time-editor {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 0.65fr)) minmax(240px, 1fr);
  gap: 10px;
  align-items: end;
}

.schedule-unit-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(76px, 0.44fr);
  gap: 6px;
}

.schedule-unit-input > strong {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-strong);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.schedule-repeat-end-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-self: end;
}

.schedule-repeat-end-choice > span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.schedule-repeat-end-choice label {
  position: relative;
}

.schedule-repeat-end-choice input,
.schedule-calendar-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.schedule-repeat-end-choice label > span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.schedule-repeat-end-choice input:checked + span {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.schedule-interval-preview {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-weight: 900;
}

.schedule-interval-preview.error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--control));
  color: var(--danger);
}

.schedule-recurrence-presets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.schedule-recurrence-presets button {
  min-height: 48px;
  font-size: 13px;
  font-weight: 900;
}

.schedule-recurrence-presets button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.schedule-recurrence-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(145px, 1fr));
  gap: 9px;
  align-items: end;
}

.schedule-audio-section,
.schedule-tts-section {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item-soft);
}

.schedule-audio-section .schedule-section-head,
.schedule-tts-section .schedule-section-head,
.schedule-asset-list {
  grid-column: 1 / -1;
}

.schedule-tts-section {
  grid-template-columns: minmax(0, 1fr);
}

.schedule-asset-field .select-action-row {
  grid-template-columns: minmax(0, 1fr) 92px;
}

.schedule-audio-section .schedule-asset-field {
  grid-column: 1;
}

.schedule-audio-section .schedule-file-picker {
  grid-column: 2;
  align-self: end;
  min-height: 48px;
}

.schedule-audio-section .schedule-asset-list {
  grid-column: 1 / -1;
}

.preview-schedule-main-btn {
  min-width: 92px;
  min-height: 48px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 950;
}

.preview-schedule-main-btn.active {
  background: var(--accent);
  color: #fff;
}

.schedule-tts-section[hidden],
.schedule-audio-section[hidden] {
  display: none !important;
}

.schedule-text-field textarea {
  min-height: 118px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.45;
}

.schedule-file-picker,
.schedule-asset-list,
.schedule-advanced-panel,
.schedule-summary-preview {
  grid-column: 1 / -1;
}

#toggleScheduleAdvancedBtn {
  grid-column: 1 / -1;
}

.schedule-advanced-toggle {
  min-height: 48px;
  font-weight: 900;
}

.schedule-asset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.schedule-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--control-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.schedule-asset-chip button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
}

.empty-inline {
  align-self: center;
  color: var(--muted);
  font-size: 13px;
}

.schedule-advanced-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.schedule-advanced-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.schedule-advanced-head strong,
.schedule-exception-title strong {
  display: block;
  margin-top: 2px;
  font-size: 14px;
}

.schedule-advanced-head > span,
.schedule-exception-title span {
  color: var(--muted);
  font-size: 11px;
}

.schedule-advanced-panel[hidden] {
  display: none !important;
}

.weekday-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.weekday-picker[hidden],
#scheduleEndDateField[hidden],
#scheduleMaxRunsField[hidden] {
  display: none !important;
}

.weekday-picker label {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--control);
  font-weight: 800;
}

.schedule-exception-settings {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.schedule-exception-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.schedule-exception-rule-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 112px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--item-soft) 92%, transparent), var(--control));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}

.schedule-exception-rule-card.night {
  border-color: color-mix(in srgb, #7c8cff 48%, var(--line));
}

.schedule-exception-rule-card.holiday {
  border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
}

.schedule-exception-rule-card.direct {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
}

.schedule-exception-rule-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.schedule-exception-rule-head > div strong,
.schedule-exception-rule-head > div small {
  display: block;
}

.schedule-exception-rule-head > div small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-exception-rule-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, currentColor 42%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 11%, var(--control));
  color: var(--accent-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.schedule-exception-rule-card.night .schedule-exception-rule-icon {
  color: #9aa6ff;
}

.schedule-exception-rule-card.holiday .schedule-exception-rule-icon {
  color: var(--danger);
}

.schedule-exception-rule-card.direct .schedule-exception-rule-icon {
  color: var(--warning);
}

.schedule-switch {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}

.schedule-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.schedule-switch > span {
  position: relative;
  width: 34px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--item-soft);
  transition: background 160ms ease, border-color 160ms ease;
}

.schedule-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background 160ms ease;
}

.schedule-switch input:checked + span {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 30%, var(--control));
}

.schedule-switch input:checked + span::after {
  transform: translateX(14px);
  background: var(--success);
}

.schedule-switch em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.schedule-night-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 6px;
  align-items: end;
}

.schedule-night-time-grid > span {
  padding-bottom: 12px;
  color: var(--muted);
}

.schedule-night-time-grid .schedule-field {
  gap: 3px;
}

.schedule-night-time-grid input {
  min-height: 38px;
}

.schedule-holiday-coverage {
  overflow: hidden;
  padding: 7px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--danger) 8%, var(--control));
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-exception-rule-card.direct > button {
  min-height: 38px;
}

.schedule-excluded-weekday-panel {
  display: grid;
  grid-template-columns: minmax(190px, 0.5fr) minmax(420px, 1.25fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 7%, var(--control));
}

.schedule-excluded-weekday-panel > div:first-child strong,
.schedule-excluded-weekday-panel > div:first-child span {
  display: block;
}

.schedule-excluded-weekday-panel > div:first-child span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.exception-weekday-picker {
  grid-column: auto;
  gap: 5px;
}

.exception-weekday-picker label {
  min-height: 46px;
}

.schedule-exception-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 6px;
}

.schedule-exception-workspace {
  display: grid;
  grid-template-columns: minmax(480px, 1.12fr) minmax(360px, 0.88fr);
  gap: 10px;
  align-items: start;
}

.schedule-exception-calendar-card,
.schedule-exception-control-card {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control);
}

.schedule-exception-calendar-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 42px;
  gap: 7px;
  align-items: center;
}

.schedule-exception-calendar-head button {
  min-width: 42px;
  min-height: 42px;
  padding: 0 9px;
  font-size: 18px;
}

.schedule-exception-calendar-head div strong,
.schedule-exception-calendar-head div span {
  display: block;
}

.schedule-calendar-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.schedule-calendar-mode label {
  position: relative;
}

.schedule-calendar-mode label > span {
  display: grid;
  place-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.schedule-calendar-mode input:checked + span {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.schedule-exception-calendar-weekdays,
.schedule-exception-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.schedule-exception-calendar-weekdays span {
  padding: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.schedule-exception-calendar-grid button {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 3px;
  border-color: var(--line);
  background: var(--item-soft);
  color: var(--ink);
}

.schedule-exception-calendar-grid button > span {
  font-size: 14px;
  font-weight: 950;
}

.schedule-exception-calendar-grid button > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-exception-calendar-grid button.outside {
  opacity: 0.42;
}

.schedule-exception-calendar-grid button.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.schedule-exception-calendar-grid button.scheduled {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--item-soft));
}

.schedule-exception-calendar-grid button.official-holiday {
  border-top-color: var(--danger);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--danger) 78%, transparent);
}

.schedule-exception-calendar-grid button.event {
  border-top-color: var(--warning);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--warning) 82%, transparent);
}

.schedule-exception-calendar-grid button.excluded {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--item-soft));
  color: var(--danger);
}

.schedule-exception-calendar-grid button.included {
  border-color: color-mix(in srgb, var(--success) 62%, var(--line));
  background: color-mix(in srgb, var(--success) 15%, var(--item-soft));
  color: var(--success);
}

.schedule-exception-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.schedule-exception-calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.schedule-exception-calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent);
}

.schedule-exception-calendar-legend i.excluded {
  background: var(--danger);
}

.schedule-exception-calendar-legend i.included {
  background: var(--success);
}

.schedule-exception-calendar-legend i.official-holiday {
  background: var(--danger);
}

.schedule-exception-calendar-legend i.event {
  background: var(--warning);
}

.schedule-exception-range-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.schedule-annual-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.schedule-annual-toggle span,
.schedule-annual-toggle strong,
.schedule-annual-toggle small {
  display: block;
}

.schedule-annual-toggle small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.schedule-exception-range-editor > button,
.schedule-skip-date-editor > button {
  min-height: 48px;
}

.schedule-exception-list {
  display: grid;
  gap: 6px;
}

.schedule-exception-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 7px 8px 7px 12px;
  border-left: 4px solid var(--warning);
  border-radius: 8px;
  background: var(--control);
}

.schedule-exception-row.event {
  border-left-color: #7c8cff;
}

.schedule-timed-range-field[hidden] {
  display: none !important;
}

.schedule-exception-row strong,
.schedule-exception-row span {
  display: block;
}

.schedule-exception-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.schedule-skip-date-editor {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) auto minmax(260px, 1fr);
  gap: 8px;
  align-items: end;
}

.schedule-date-entry-grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, auto);
  gap: 7px;
  align-items: end;
}

.schedule-date-entry-grid button {
  min-height: 48px;
}

.schedule-exception-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.schedule-exception-result-grid > div {
  display: grid;
  gap: 6px;
}

.schedule-exception-result-grid > div > strong {
  font-size: 12px;
}

.schedule-skip-date-chips {
  min-height: 48px;
}

.schedule-skip-date-chip {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--line));
}

.regular-alert-editor .regular-alert-weekdays {
  grid-column: auto;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.regular-alert-editor .regular-alert-summary {
  grid-column: 1 / -1;
}

.regular-alert-editor .regular-alert-actions {
  grid-column: 1;
}

.regular-alert-editor .regular-alert-status {
  grid-column: 2;
}

.schedule-summary-preview {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--active-soft);
  color: var(--ink);
  font-weight: 800;
}

/* 예약 편집 단계는 낮은 채도의 색 띠와 배경으로만 구분해 오래 보아도 피로하지 않게 한다. */
.schedule-main-section,
.schedule-time-section,
.schedule-recurrence-section,
.schedule-audio-section,
.schedule-tts-section,
.schedule-advanced-panel,
.schedule-save-section {
  --schedule-section-accent: var(--accent);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--schedule-section-accent) 38%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(
      105deg,
      color-mix(in srgb, var(--schedule-section-accent) 11%, var(--item-soft)) 0%,
      color-mix(in srgb, var(--schedule-section-accent) 4%, var(--item-soft)) 32%,
      var(--item-soft) 72%
    );
  box-shadow: inset 4px 0 0 var(--schedule-section-accent);
}

.schedule-main-section {
  --schedule-section-accent: #4f9f8c;
}

.schedule-time-section {
  --schedule-section-accent: #4d91bf;
}

.schedule-recurrence-section {
  --schedule-section-accent: #c38c32;
}

.schedule-audio-section {
  --schedule-section-accent: #4c9870;
}

.schedule-tts-section {
  --schedule-section-accent: #3e9891;
}

.schedule-advanced-panel,
.schedule-advanced-toggle {
  --schedule-section-accent: #b66f59;
}

.schedule-save-section {
  --schedule-section-accent: #73889b;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.35fr);
  gap: 12px;
  align-items: end;
}

.schedule-section .eyebrow,
.schedule-advanced-panel .eyebrow,
.schedule-save-section .eyebrow {
  color: var(--schedule-section-accent);
}

.schedule-section-head > span {
  border: 1px solid color-mix(in srgb, var(--schedule-section-accent) 32%, var(--line));
  background: color-mix(in srgb, var(--schedule-section-accent) 10%, var(--control));
  color: color-mix(in srgb, var(--schedule-section-accent) 78%, var(--ink));
}

.schedule-advanced-toggle {
  border-color: color-mix(in srgb, var(--schedule-section-accent) 44%, var(--line));
  background: color-mix(in srgb, var(--schedule-section-accent) 9%, var(--control));
  color: color-mix(in srgb, var(--schedule-section-accent) 72%, var(--ink));
  box-shadow: inset 4px 0 0 var(--schedule-section-accent);
}

.schedule-save-section .schedule-summary-preview {
  margin-top: 6px;
  border-color: color-mix(in srgb, var(--schedule-section-accent) 30%, var(--line));
  background: color-mix(in srgb, var(--schedule-section-accent) 8%, var(--control));
}

.schedule-save-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 8px;
}

.schedule-save-actions button {
  min-height: 50px;
}

body[data-theme="dark"] .schedule-main-section {
  --schedule-section-accent: #69c3ad;
}

body[data-theme="dark"] .schedule-time-section {
  --schedule-section-accent: #72b9e4;
}

body[data-theme="dark"] .schedule-recurrence-section {
  --schedule-section-accent: #e0ad54;
}

body[data-theme="dark"] .schedule-audio-section {
  --schedule-section-accent: #70bd8e;
}

body[data-theme="dark"] .schedule-tts-section {
  --schedule-section-accent: #66bbb4;
}

body[data-theme="dark"] .schedule-advanced-panel,
body[data-theme="dark"] .schedule-advanced-toggle {
  --schedule-section-accent: #d58e76;
}

body[data-theme="dark"] .schedule-save-section {
  --schedule-section-accent: #9eb3c5;
}

.settings-drawer {
  margin-top: 12px;
}

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

.audio-mixer-card {
  display: flex;
  flex-direction: column;
}

.audio-mixer-card .mixer-list {
  order: 1;
}

.audio-mixer-card .compact-settings-grid {
  order: 2;
}

.audio-mixer-card .audio-advanced-drawer {
  order: 3;
}

.audio-mixer-card .upload-status {
  order: 4;
}

.mixer-row {
  display: grid;
  grid-template-columns: 118px minmax(110px, 1fr) 54px 82px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.mixer-row > label:first-child {
  font-weight: 850;
}

.mixer-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.mixer-row strong {
  text-align: right;
  color: var(--accent-strong);
}

.mute-check {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.audio-advanced-drawer {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--item-soft) 82%, transparent);
}

.audio-advanced-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    var(--item);
}

.audio-advanced-drawer > summary::-webkit-details-marker {
  display: none;
}

.audio-advanced-drawer > summary small,
.audio-advanced-drawer > summary strong {
  display: block;
}

.audio-advanced-drawer > summary small {
  margin-bottom: 3px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
}

.audio-advanced-drawer > summary strong {
  color: var(--ink);
  font-size: 15px;
}

.audio-advanced-drawer > summary em {
  display: inline-grid;
  place-items: center;
  min-width: 76px;
  min-height: 34px;
  border-radius: 999px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.audio-advanced-drawer[open] > summary em::before {
  content: "접기";
  font-size: 0;
}

.audio-advanced-drawer[open] > summary em {
  font-size: 0;
}

.audio-advanced-drawer[open] > summary em::after {
  content: "접기";
  font-size: 12px;
}

.audio-advanced-drawer .eq-console {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.eq-console {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    var(--item-soft);
}

.eq-console-head,
.eq-toolbar,
.eq-live-panel,
.eq-monitor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eq-console-head h4 {
  margin: 2px 0 0;
  font-size: 17px;
}

.eq-control-strip {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(520px, 1.25fr);
  gap: 12px;
  margin-top: 10px;
  align-items: stretch;
}

.eq-toolbar {
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  margin-top: 0;
}

.eq-toolbar label {
  display: grid;
  gap: 5px;
  min-width: 180px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.eq-live-panel {
  align-items: stretch;
  flex-wrap: wrap;
}

.eq-monitor-card,
.noise-visual {
  flex: 1 1 250px;
  min-height: 114px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 6%);
}

.eq-monitor-card {
  justify-content: flex-start;
}

.eq-monitor-card button {
  min-width: 132px;
  min-height: 58px;
  font-size: 15px;
  font-weight: 950;
}

.eq-monitor-card button.active {
  background: var(--warning);
  border-color: var(--warning);
  color: #1d1200;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--warning) 22%, transparent);
}

.eq-monitor-card div {
  display: grid;
  gap: 5px;
}

.eq-monitor-card strong {
  font-size: 15px;
  color: var(--ink);
}

.eq-monitor-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.noise-visual {
  display: grid;
  gap: 7px;
}

.noise-row {
  display: grid;
  grid-template-columns: 72px minmax(100px, 1fr) 44px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  font-weight: 850;
}

.noise-row > span {
  color: var(--muted);
}

.noise-row > i {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, black 10%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
}

.noise-row > i > b {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  transition: width 100ms linear;
}

.noise-row:nth-child(1) > i > b {
  background: linear-gradient(90deg, var(--warning), var(--danger));
}

.noise-row:nth-child(3) > i > b {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.noise-row strong {
  text-align: right;
  color: var(--accent-strong);
}

.noise-visual p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.eq-band-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.eq-band {
  display: grid;
  grid-template-rows: auto 84px 154px auto;
  justify-items: center;
  gap: 8px;
  min-height: 292px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 78%, var(--accent) 8%);
}

.eq-band-label {
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.eq-rta-track {
  position: relative;
  width: 32px;
  height: 84px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  background:
    linear-gradient(to top, rgba(255, 255, 255, 0.07), transparent),
    color-mix(in srgb, var(--panel) 88%, black 12%);
}

.eq-rta-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  border-radius: inherit;
  background: linear-gradient(to top, var(--accent), var(--accent-strong), var(--danger));
  transition: height 80ms linear;
}

.eq-band input[type="range"] {
  width: 44px;
  height: 154px;
  accent-color: var(--accent);
  writing-mode: vertical-lr;
  direction: rtl;
  touch-action: none;
}

.eq-band strong {
  min-width: 54px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 950;
}

.eq-note {
  margin: 10px 0 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 84%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

.compact-settings-grid {
  margin-top: 12px;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr);
}

.settings-drawer summary {
  display: grid;
  place-items: center;
  min-height: 48px;
  border-radius: 8px;
  background: var(--control-strong);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  touch-action: manipulation;
}

.settings-drawer summary::-webkit-details-marker {
  display: none;
}

.wide-nav-button {
  display: grid;
  place-items: center;
  width: 100%;
  margin-top: 12px;
  background: var(--control-strong);
  color: var(--ink);
  font-weight: 800;
}

/* 공통 wide 버튼의 중앙 정렬보다 전원 버튼의 아이콘/문구 2열 배치를 우선한다. */
button.wide-nav-button.device-power-button {
  place-items: center stretch;
  background: color-mix(in srgb, var(--info) 8%, var(--item));
}

.screen-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  padding: 18px;
  background: var(--bg);
  overflow: hidden;
}

.screen-layer[aria-hidden="true"] {
  display: none;
}

.screen-page {
  display: none;
  min-width: 0;
  height: calc(100vh - 36px);
}

.screen-page.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  scroll-padding: 16px;
}

.screen-page[data-screen-page="settings"].active {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: stretch;
  align-self: start;
  align-content: start;
  gap: 14px;
  height: auto;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.screen-page[data-screen-page="settings"].active .screen-header {
  grid-column: 1 / -1;
}

.screen-page[data-screen-page="schedules"].active {
  overflow: auto;
  align-content: flex-start;
}

.screen-page[data-screen-page="schedules"].active > .screen-header,
.screen-page[data-screen-page="schedules"].active > .screen-card,
.screen-page[data-screen-page="schedules"].active > .screen-list {
  flex: 0 0 auto;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.screen-clock {
  display: grid;
  align-items: center;
  justify-items: end;
  min-width: 148px;
  min-height: 54px;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 12px;
}

.screen-clock span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(2, 18, 24, 0.42);
  color: rgba(237, 255, 249, 0.94);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(4px);
}

.screen-clock strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(2, 18, 24, 0.46);
  color: rgba(238, 255, 250, 0.98);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(5px);
}

.screen-header h2 {
  margin: 4px 0 0;
  font-size: 28px;
}

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

.screen-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.screen-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.screen-card-title h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.screen-list {
  min-height: 0;
  margin-top: 0;
  overflow: auto;
}

/*
 * 장비 연결도는 마스터와 슬레이브 사이의 실제 스타형 배선을 표현한다.
 * 각 분기의 색은 해당 노드 응답만 사용하므로 한 슬레이브가 끊겨도 뒤쪽
 * 장비까지 연쇄 단절된 것처럼 보이지 않는다. 시뮬레이터와 실기기 모드는
 * 같은 DOM을 쓰고 상태 데이터만 바뀐다.
 */
.connection-screen-page.active {
  overflow: hidden;
}

.connection-screen-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.connection-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-strong);
}

.connection-view-switch button {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.connection-view-switch button.active {
  background: var(--panel);
  color: var(--accent-strong);
  box-shadow: 0 4px 12px rgba(24, 49, 46, 0.12);
}

.connection-overview {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) repeat(4, minmax(145px, 1fr));
  gap: 10px;
}

.connection-mode-panel,
.connection-summary-card {
  min-width: 0;
  min-height: 94px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(36, 54, 48, 0.07);
}

.connection-mode-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 6px 10px;
  border-left: 5px solid var(--accent);
}

.connection-mode-panel > span,
.connection-summary-card > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.connection-mode-panel small,
.connection-summary-card small {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--active-soft);
  color: var(--accent-strong);
  font-size: 13px;
  white-space: nowrap;
}

.connection-mode-badge[data-mode="hardware"] {
  background: color-mix(in srgb, var(--warning) 14%, var(--panel));
  color: var(--warning);
}

.connection-summary-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.connection-summary-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-summary-card[data-status="warning"] {
  border-color: color-mix(in srgb, var(--warning) 54%, var(--line));
  background: color-mix(in srgb, var(--warning) 7%, var(--panel));
}

.connection-summary-card[data-status="warning"] strong {
  color: var(--warning);
}

.connection-diagram-view,
.connection-list-view {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: auto;
}

.connection-topology-stage {
  --connection-online: #229b71;
  --connection-warning: #d7921f;
  --connection-offline: #c43d36;
  --connection-standby: #87948f;
  display: flex;
  flex-direction: column;
  min-width: 1040px;
  min-height: 470px;
  height: calc(100% - 38px);
  padding: 12px 16px 8px;
  background: var(--item-soft);
}

.status-online {
  --connection-state: var(--connection-online, #229b71);
}

.status-warning {
  --connection-state: var(--connection-warning, #d7921f);
}

.status-offline {
  --connection-state: var(--connection-offline, #c43d36);
}

.status-standby {
  --connection-state: var(--connection-standby, #87948f);
}

.connection-topology-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 0.92fr);
  gap: 10px;
  min-height: 58px;
}

.connection-topology-message {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--connection-state) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--connection-state) 6%, var(--panel));
  color: var(--muted);
}

.connection-topology-message strong {
  color: var(--ink);
  white-space: nowrap;
}

.connection-topology-message > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-health-rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.connection-health-rail > div {
  display: grid;
  gap: 2px;
  min-width: 72px;
}

.connection-health-rail > div span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.connection-health-rail > div strong {
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.connection-health-rail nav {
  display: grid;
  grid-template-columns: repeat(8, minmax(40px, 1fr));
  gap: 4px;
  min-width: 0;
}

.connection-health-rail button {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 4px;
  min-width: 0;
  min-height: 42px;
  padding: 4px 5px;
  border: 1px solid color-mix(in srgb, var(--connection-state) 46%, var(--line));
  border-bottom: 4px solid var(--connection-state);
  border-radius: 5px;
  background: color-mix(in srgb, var(--connection-state) 5%, var(--item-soft));
  color: var(--ink);
}

.connection-health-rail button:hover,
.connection-health-rail button:focus-visible {
  border-color: var(--connection-state);
  transform: translateY(-1px);
}

.connection-health-rail button i {
  grid-row: 1 / -1;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--connection-state) 14%, transparent);
}

.connection-health-rail button span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
}

.connection-health-rail button small {
  overflow: hidden;
  color: var(--connection-state);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border: 2px solid color-mix(in srgb, var(--connection-state) 65%, var(--panel));
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--connection-state) 14%, transparent);
}

.connection-core-flow {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, 320px) 132px minmax(250px, 300px);
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.connection-core-link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 5px;
  color: var(--connection-state);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.connection-core-link i {
  height: 3px;
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 9px color-mix(in srgb, var(--connection-state) 38%, transparent);
}

.connection-core-link.status-online::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 9px var(--connection-state);
  transform: translateY(-50%);
  animation: connectionSignalHorizontal 2.2s linear infinite;
}

.connection-device-card,
.connection-switch-card {
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--connection-state) 44%, var(--line));
  border-top: 5px solid var(--connection-state);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--panel);
  box-shadow: 0 9px 22px rgba(36, 54, 48, 0.09);
}

.connection-device-card.master {
  border-left: 5px solid var(--device-accent);
}

.connection-device-card > header,
.connection-switch-card > header {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.connection-device-card > header em,
.connection-switch-card > header em {
  margin-left: auto;
  color: var(--connection-state);
  font-style: normal;
  white-space: nowrap;
}

.connection-device-card h3,
.connection-switch-card h3 {
  overflow: hidden;
  margin: 7px 0 4px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-channel-range,
.connection-switch-card > strong {
  display: block;
  color: var(--device-accent, var(--accent-strong));
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.connection-rack-face {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 7px;
  min-height: 50px;
  margin: 7px 0;
  padding: 6px;
  border: 2px solid color-mix(in srgb, var(--connection-state) 32%, var(--line));
  border-radius: 6px;
  background: var(--control-strong);
  box-shadow: inset 0 4px 12px rgba(18, 36, 32, 0.09);
}

.connection-rack-display {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--connection-state) 50%, #081412);
  border-radius: 4px;
  background: #0b1715;
  color: #d9fff2;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65);
}

.connection-rack-display small {
  color: #82a89d;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.connection-rack-display strong {
  color: var(--connection-state);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 8px color-mix(in srgb, var(--connection-state) 68%, transparent);
}

.connection-rack-center {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.connection-rack-center > span {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.connection-rack-led-bank {
  display: flex;
  align-items: center;
  gap: 4px;
}

.connection-rack-led-bank i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 6px color-mix(in srgb, var(--connection-state) 72%, transparent);
}

.connection-rack-led-bank i:nth-child(n + 3) {
  opacity: 0.34;
}

.connection-output-led-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(3px, 1fr));
  gap: 2px;
}

.connection-output-led-grid i {
  height: 4px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--connection-state) 22%, var(--line));
}

.connection-output-led-grid i.active {
  background: var(--connection-state);
  box-shadow: 0 0 5px var(--connection-state);
}

.connection-rack-jack {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid color-mix(in srgb, var(--ink) 45%, var(--line));
  border-radius: 50%;
  background: var(--panel);
}

.connection-rack-jack i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--connection-state);
  box-shadow: 0 0 7px color-mix(in srgb, var(--connection-state) 65%, transparent);
}

.connection-device-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.connection-device-title h3 {
  min-width: 0;
  margin: 0;
}

.connection-device-title .connection-channel-range {
  flex: 0 0 auto;
  font-size: 11px;
}

.connection-quick-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.connection-quick-metrics > span {
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--item-soft);
}

.connection-quick-metrics small,
.connection-quick-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-quick-metrics small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
}

.connection-quick-metrics strong {
  margin-top: 1px;
  color: var(--ink);
  font-size: 10px;
}

.connection-device-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.connection-device-card > footer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-last-seen,
.connection-switch-card > small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-switch-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 5px solid var(--accent);
}

.connection-switch-ports {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 10px;
}

.connection-switch-ports i {
  height: 10px;
  border: 2px solid var(--connection-state);
  border-radius: 2px;
  background: color-mix(in srgb, var(--connection-state) 12%, var(--panel));
}

.connection-slave-bus {
  position: relative;
  flex: 1 1 auto;
  min-height: 255px;
  margin-top: 4px;
  padding-top: 52px;
}

.connection-slave-bus::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 7.14%;
  right: 7.14%;
  height: 3px;
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 9px color-mix(in srgb, var(--connection-state) 30%, transparent);
}

.connection-slave-bus::after {
  content: "";
  position: absolute;
  top: 0;
  left: 69.5%;
  width: 3px;
  height: 27px;
  border-radius: 999px;
  background: var(--connection-state);
}

.connection-slave-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(136px, 1fr));
  gap: 8px;
  height: 100%;
}

.connection-node-branch {
  position: relative;
  min-width: 0;
  padding-top: 10px;
}

.connection-branch-line {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 3px;
  height: 39px;
  border-radius: 999px;
  background: var(--connection-state);
  transform: translateX(-50%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--connection-state) 32%, transparent);
}

.connection-node-branch.status-online .connection-branch-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid var(--panel);
  border-radius: 999px;
  background: var(--connection-state);
  box-shadow: 0 0 8px var(--connection-state);
  transform: translate(-50%, -50%);
  animation: connectionSignalVertical 1.8s linear infinite;
}

.connection-node-branch.status-offline .connection-branch-line,
.connection-node-branch.status-standby .connection-branch-line {
  width: 0;
  border-left: 3px dashed var(--connection-state);
  background: transparent;
  box-shadow: none;
}

.connection-node-branch.status-offline .connection-branch-line::after {
  content: "×";
  position: absolute;
  top: 45%;
  left: -10px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--connection-state);
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.connection-node-branch .connection-device-card {
  height: 100%;
  min-height: 205px;
}

.connection-node-branch .connection-device-card h3 {
  font-size: 14px;
}

.connection-node-branch .connection-rack-face {
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 5px;
  min-height: 45px;
  padding: 5px;
}

.connection-node-branch .connection-rack-jack {
  width: 19px;
  height: 19px;
}

.connection-node-branch .connection-rack-display {
  min-height: 32px;
}

.connection-emergency-flag,
.connection-error-text {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--danger);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-legend {
  position: sticky;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 1040px;
  min-height: 38px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(7px);
}

.connection-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.connection-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--connection-standby, #87948f);
}

.connection-legend i[data-status="online"] {
  background: var(--connection-online, #229b71);
}

.connection-legend i[data-status="warning"] {
  background: var(--connection-warning, #d7921f);
}

.connection-legend i[data-status="offline"] {
  background: var(--connection-offline, #c43d36);
}

.connection-list-view {
  padding: 14px;
}

.connection-list-view .device-list {
  max-height: none;
  margin: 0;
  overflow: visible;
}

@keyframes connectionSignalHorizontal {
  from { left: 4px; }
  to { left: calc(100% - 12px); }
}

@keyframes connectionSignalVertical {
  from { top: 0; }
  to { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .connection-core-link.status-online::after,
  .connection-node-branch.status-online .connection-branch-line::after {
    animation: none;
  }
}

@media (max-width: 1100px) {
  .schedule-exception-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-exception-rule-card.direct {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .schedule-exception-rule-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-exception-rule-card.direct {
    grid-column: auto;
  }

  .schedule-exception-rule-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .schedule-exception-rule-head .schedule-switch {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* 1280x800 본체에서는 AI, 시계, 계정, A/S, 설정, 테마 도구를 한 줄에 모두
   보존한다. 도구 묶음이 줄어들며 우측 버튼이 화면 밖으로 밀리는 일을 막는다. */
@media (min-width: 900px) and (max-width: 1360px) {
  .topbar {
    grid-template-columns: minmax(190px, 1fr) auto;
  }

  .topbar-actions .assistant-fab {
    width: 80px;
    min-width: 80px;
    padding-inline: 8px;
  }

  .top-clock {
    width: 144px;
    min-width: 144px;
    padding-inline: 9px;
  }

  .topbar-tool-group {
    flex: 0 0 auto;
  }
}

/*
 * 메인 콘솔 시각 정돈
 *
 * 방송 기능의 배치는 유지하면서 패널마다 역할을 구분하는 얇은 색 띠와
 * 중성적인 장비 표면을 적용한다. 경고색은 실제 방송 동작에만 남겨 두어
 * 평상시 화면이 한 가지 녹색으로 뭉쳐 보이지 않게 한다.
 */
body:not(.screen-open) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #0c1820 12%), var(--bg) 42%),
    var(--bg);
}

body:not(.screen-open) .app-shell {
  position: relative;
  isolation: isolate;
}

body:not(.screen-open) .app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--line) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 12%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 74%);
}

body:not(.screen-open) .brand-block {
  min-height: 58px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  padding-inline: 5px;
}

body:not(.screen-open) .status-card,
body:not(.screen-open) .panel,
body:not(.screen-open) .topbar {
  border-color: color-mix(in srgb, var(--line) 84%, #5b7680 16%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, #17313c 6%), var(--panel));
}

body:not(.screen-open) .topbar {
  position: relative;
  z-index: 80;
  overflow: visible;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel) 91%, #123746 9%), var(--panel) 58%);
}

body:not(.screen-open) .topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #3faed0 48%, transparent 88%);
  opacity: 0.72;
  pointer-events: none;
}

body:not(.screen-open) .topbar-tool-group {
  background: color-mix(in srgb, var(--control) 78%, #10232a 22%);
}

body:not(.screen-open) .broadcast-panel,
body:not(.screen-open) .zone-panel,
body:not(.screen-open) .schedule-panel,
body:not(.screen-open) .log-panel {
  position: relative;
}

body:not(.screen-open) .broadcast-panel::before,
body:not(.screen-open) .zone-panel::before,
body:not(.screen-open) .schedule-panel::before,
body:not(.screen-open) .log-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 14px;
  left: 14px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  pointer-events: none;
}

body:not(.screen-open) .broadcast-panel::before {
  background: linear-gradient(90deg, #39c6db, color-mix(in srgb, var(--accent) 76%, #39c6db));
}

body:not(.screen-open) .zone-panel::before {
  background: linear-gradient(90deg, var(--accent), #75d7b5);
}

body:not(.screen-open) .schedule-panel::before {
  background: linear-gradient(90deg, #4ea6cf, #77cbd1);
}

body:not(.screen-open) .log-panel::before {
  background: linear-gradient(90deg, var(--warning), #e8c36a);
}

body:not(.screen-open) .status-grid > div {
  border-color: color-mix(in srgb, var(--line) 86%, #567583 14%);
  background: color-mix(in srgb, var(--item) 92%, #17323b 8%);
}

body:not(.screen-open) .broadcast-zone-summary {
  border-color: color-mix(in srgb, #45b9d3 48%, var(--line));
  background: color-mix(in srgb, var(--item) 85%, #17475a 15%);
}

body:not(.screen-open) .home-mic-control {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--warning) 10%, var(--item)), var(--item) 58%);
}

body:not(.screen-open) .quick-tts-section,
body:not(.screen-open) .ai-script-panel {
  border-color: color-mix(in srgb, #46afc5 24%, var(--line));
  background: color-mix(in srgb, var(--item-soft) 92%, #153744 8%);
}

body:not(.screen-open) .zone-item:not(.active) {
  background: color-mix(in srgb, var(--item) 94%, #18343b 6%);
}

body:not(.screen-open) .zone-item.active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--item)), color-mix(in srgb, var(--item) 92%, #204a4c 8%));
}

body[data-theme="dark"]:not(.screen-open) .status-card,
body[data-theme="dark"]:not(.screen-open) .panel,
body[data-theme="dark"]:not(.screen-open) .topbar {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 88%, #18313b 12%), color-mix(in srgb, var(--panel) 97%, #080d10 3%));
}

/*
 * 사용자 계정 편집 작업대
 *
 * 장소와 장비가 늘어나도 화면 전체가 아래로 길어지지 않도록 기본 정보,
 * 현장 소속, 기능 권한을 단계별 탭으로 나누고 하단 저장 동작은 고정한다.
 */
.account-manager-layout {
  height: clamp(440px, 55vh, 590px);
}

.account-list-panel {
  display: flex;
  flex-direction: column;
}

.account-list {
  flex: 1;
  align-content: start;
  grid-auto-rows: max-content;
  max-height: none;
}

.account-editor-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--item-soft) 92%, #183743 8%), var(--item-soft));
}

.account-editor-panel > .account-panel-title {
  margin-bottom: 0;
}

.account-editor-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.account-editor-tabs button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  gap: 1px 8px;
  border-color: color-mix(in srgb, var(--line) 84%, #5b7c87 16%);
  padding: 8px 10px;
  background: var(--item);
  color: var(--muted);
  text-align: left;
}

.account-editor-tabs button > span {
  grid-row: 1 / 3;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 7px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.account-editor-tabs button strong,
.account-editor-tabs button small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-editor-tabs button strong {
  color: var(--ink);
  font-size: 13px;
}

.account-editor-tabs button small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.account-editor-tabs button.active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--item)), var(--item));
  color: var(--accent-strong);
  transform: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

.account-editor-tabs button.active > span {
  background: var(--accent);
  color: var(--brand-fg);
}

.account-editor-stage {
  min-height: 0;
  overflow: auto;
  padding: 1px 3px 3px 1px;
  scrollbar-gutter: stable;
}

.account-editor-stage:not(.active) {
  display: none;
}

.account-editor-stage .account-access-surface,
.account-editor-stage .account-permission-surface {
  min-height: 100%;
  margin-top: 0;
}

.account-editor-stage .account-access-grid {
  max-height: none;
}

.account-editor-stage .permission-grid {
  padding-bottom: 2px;
}

.account-actions,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .account-actions {
  position: relative;
  z-index: 2;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  padding: 10px 0 1px;
  background: color-mix(in srgb, var(--item-soft) 92%, transparent);
}

@media (max-width: 900px) {
  .account-manager-layout {
    height: auto;
    grid-template-columns: 1fr;
  }

  .account-list-panel {
    max-height: 280px;
  }

  .account-editor-panel {
    min-height: 560px;
  }

  .account-editor-tabs button {
    grid-template-columns: 24px minmax(0, 1fr);
    padding-inline: 7px;
  }

  .account-editor-tabs button > span {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 1400px) and (max-height: 920px) {
  .connection-screen-page.active {
    gap: 10px;
  }

  .connection-screen-page .screen-header {
    min-height: 68px;
    padding: 10px 12px;
  }

  .connection-screen-page .screen-header h2 {
    font-size: 23px;
  }

  .connection-screen-tools {
    gap: 6px;
  }

  .connection-view-switch button,
  #refreshConnectionMapBtn {
    min-height: 38px;
  }

  .connection-overview {
    gap: 7px;
  }

  .connection-mode-panel,
  .connection-summary-card {
    min-height: 82px;
    padding: 9px 11px;
  }

  .connection-summary-card strong {
    font-size: 18px;
  }

  .connection-topology-stage {
    min-height: 430px;
    padding-top: 9px;
  }

  .connection-core-flow {
    margin-top: 8px;
  }

  .connection-device-card,
  .connection-switch-card {
    padding: 8px 9px;
  }

  .connection-device-card dl {
    margin-top: 6px;
  }

  .connection-slave-bus {
    min-height: 232px;
    padding-top: 46px;
  }

  .connection-node-branch .connection-device-card {
    min-height: 188px;
  }
}

@media (max-width: 980px) {
  .connection-screen-page.active {
    overflow-y: auto;
  }

  .connection-screen-page .screen-header {
    flex-wrap: wrap;
  }

  .connection-screen-tools {
    order: 3;
    width: 100%;
    justify-content: stretch;
  }

  .connection-view-switch {
    flex: 1 1 auto;
  }

  #refreshConnectionMapBtn {
    flex: 0 0 auto;
  }

  .connection-overview {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .connection-mode-panel {
    grid-column: 1 / -1;
  }

  .connection-diagram-view,
  .connection-list-view {
    flex: 0 0 auto;
    min-height: 520px;
  }
}

.screen-channel-matrix {
  min-height: 0;
  margin-top: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-content: start;
}

.screen-channel-matrix .channel-device {
  padding: 9px;
}

.screen-channel-matrix .channel-device-head {
  min-height: 30px;
  margin-bottom: 8px;
}

.screen-channel-matrix .channel-btn {
  min-width: 44px;
  min-height: 48px;
  font-size: 15px;
}

.zone-settings-layout {
  display: grid;
  grid-template-columns: minmax(330px, 0.8fr) minmax(520px, 1.2fr);
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.zone-config-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.zone-config-tabs button {
  min-height: 54px;
  padding: 10px 18px;
  border-width: 2px;
  font-size: 15px;
  font-weight: 900;
}

.zone-config-tabs button.active {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

[data-zone-config-panel][hidden] {
  display: none !important;
}

.zone-canvas-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(560px, 1.28fr);
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.zone-canvas-palette-card,
.zone-canvas-workspace-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.zone-canvas-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.zone-canvas-search > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.zone-canvas-search input {
  min-height: 44px;
}

.zone-canvas-guide {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 8px;
  background: var(--active-soft);
}

.zone-canvas-guide strong {
  color: var(--accent-strong);
  font-size: 12px;
}

.zone-canvas-guide span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.zone-canvas-channel-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
  gap: 8px;
  min-height: 0;
  padding: 3px;
  overflow: auto;
  align-content: start;
}

.zone-canvas-channel-cell {
  min-width: 0;
  min-height: 66px;
  transition: opacity 140ms ease, filter 140ms ease, transform 140ms ease;
}

.zone-canvas-channel-cell .zone-canvas-channel-tile {
  height: 100%;
}

.zone-canvas-channel-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 8px 9px;
  border-color: var(--line);
  background: var(--item);
  text-align: left;
  cursor: grab;
  touch-action: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.zone-canvas-channel-tile:hover {
  border-color: var(--accent);
  background: var(--active-soft);
}

.zone-canvas-channel-tile strong {
  color: var(--accent-strong);
  font-size: 13px;
  white-space: nowrap;
}

.zone-canvas-channel-tile span,
.zone-canvas-channel-tile small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-canvas-channel-tile span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
}

.zone-canvas-channel-tile small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
}

.zone-canvas-create {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(190px, 1fr) auto;
  gap: 8px;
  margin-bottom: 10px;
}

.zone-canvas-create input,
.zone-canvas-create button {
  min-height: 48px;
}

.zone-canvas-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  min-height: 0;
  padding: 3px;
  overflow: auto;
  align-content: start;
  align-items: start;
}

.zone-canvas-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: 100%;
  height: 300px;
  min-height: 260px;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--item-soft);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.zone-canvas-card > header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.zone-canvas-card > header span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.zone-canvas-card h4 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 17px;
}

.zone-canvas-card > header > strong {
  min-width: 66px;
  color: var(--accent-strong);
  font-size: 12px;
  text-align: right;
}

.zone-canvas-card > p {
  margin: 5px 0 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.zone-canvas-card.drag-over {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 22px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-2px);
}

.zone-canvas-drop-surface {
  min-height: 112px;
  padding: 8px;
  overflow: auto;
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
}

.zone-canvas-card.drag-over .zone-canvas-drop-surface {
  border-color: var(--accent);
}

.zone-canvas-member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px;
}

.zone-canvas-member {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 42px;
  padding: 6px 7px;
  border-color: var(--line);
  background: var(--item);
  text-align: left;
  cursor: grab;
}

.zone-canvas-member strong {
  color: var(--accent-strong);
  font-size: 10px;
  white-space: nowrap;
}

.zone-canvas-member span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-canvas-member em {
  color: var(--danger);
  font-size: 15px;
  font-style: normal;
  font-weight: 950;
}

.zone-canvas-empty-zone,
.zone-canvas-first-zone,
.zone-canvas-empty-result {
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 110px;
  color: var(--muted);
  text-align: center;
}

.zone-canvas-empty-zone strong,
.zone-canvas-first-zone strong,
.zone-canvas-empty-result strong {
  color: var(--warning);
  font-size: 14px;
}

.zone-canvas-empty-zone span,
.zone-canvas-first-zone span,
.zone-canvas-empty-result span {
  font-size: 10px;
  font-weight: 800;
}

.zone-canvas-first-zone,
.zone-canvas-empty-result {
  min-height: 220px;
  border: 2px dashed var(--line);
  border-radius: 10px;
}

.zone-canvas-card > footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 9px;
}

.zone-canvas-card > footer button {
  min-height: 40px;
  padding: 7px 9px;
  font-size: 10px;
}

body.zone-channel-drag-active .zone-canvas-card,
body.zone-channel-drag-active .zone-manage-row.zone-drop-target:not([data-zone-id="all"]),
body.zone-channel-drag-active #zonePresetDropArea.ready {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--line));
}

.zone-native-drag-ghost {
  position: fixed;
  top: -200px;
  left: -200px;
  z-index: 10000;
  display: grid;
  gap: 2px;
  min-width: 104px;
  padding: 9px 12px;
  border: 2px solid var(--accent);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  pointer-events: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent);
}

.zone-native-drag-ghost strong {
  color: var(--accent-strong);
  font-size: 14px;
}

.zone-native-drag-ghost span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.audio-routing-layout {
  display: grid;
  grid-template-columns: minmax(310px, 0.72fr) minmax(620px, 1.55fr);
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.routing-input-card,
.routing-output-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.routing-capability-note {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warning);
  border-radius: 8px;
  background: var(--item-soft);
}

.routing-capability-note strong {
  color: var(--warning);
  font-size: 13px;
}

.routing-capability-note span,
.routing-capability-note small,
.routing-drag-help {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.routing-input-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.routing-input-item {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 10px 12px;
  border-width: 2px;
  background: var(--item);
  text-align: left;
}

.routing-input-item.active {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 4px 0 0 var(--accent);
}

.routing-input-item strong {
  color: var(--ink);
  font-size: 15px;
}

.routing-input-item small,
.routing-input-kind {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.routing-input-kind {
  color: var(--accent-strong);
}

.routing-drag-help {
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.routing-title-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.routing-pending-pill.changed {
  border-color: color-mix(in srgb, var(--warning) 75%, var(--line));
  background: color-mix(in srgb, var(--warning) 17%, var(--item));
  color: var(--warning);
}

.routing-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 9px;
  align-items: end;
  margin-bottom: 9px;
}

.routing-search-field {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.routing-search-field input {
  min-height: 42px;
}

.routing-filter-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 4px;
}

.routing-filter-buttons button {
  min-height: 42px;
  padding-inline: 10px;
}

.routing-zone-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 7px;
  margin-bottom: 10px;
}

.routing-zone-target {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 8px 10px;
  text-align: left;
}

.routing-zone-target.complete {
  border-color: color-mix(in srgb, var(--success) 78%, var(--line));
  background: color-mix(in srgb, var(--success) 18%, var(--item));
  box-shadow: inset 4px 0 0 var(--success);
}

.routing-zone-target.partial {
  border-color: color-mix(in srgb, var(--warning) 78%, var(--line));
  background: color-mix(in srgb, var(--warning) 14%, var(--item));
  box-shadow: inset 4px 0 0 var(--warning);
}

.routing-zone-target strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-zone-target span {
  color: var(--muted);
  font-size: 10px;
}

.routing-impact-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: -2px 0 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.routing-impact-summary strong {
  margin-right: 2px;
  color: var(--ink);
  font-size: 11px;
}

.routing-impact-summary span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--item);
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.routing-impact-summary span.complete {
  color: var(--success);
}

.routing-impact-summary span.partial {
  color: var(--warning);
}

.routing-impact-summary small {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.routing-output-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(126px, 0.8fr)) minmax(190px, 1.2fr);
  gap: 8px;
  margin-bottom: 10px;
}

.routing-output-actions button {
  min-height: 48px;
  font-size: 13px;
}

.routing-channel-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  flex: 1 1 220px;
  min-height: 0;
  margin: 0;
  overflow: auto;
  align-content: start;
}

.routing-device {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--device-accent, var(--accent));
  border-radius: 8px;
  background: var(--item-soft);
}

.routing-device.offline {
  opacity: 0.68;
}

.routing-device.offline:hover,
.routing-device.offline:focus-within {
  opacity: 1;
}

.routing-device > header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.routing-device-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.routing-device-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-device-copy small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.routing-device-toggle {
  min-height: 34px;
  padding: 5px 9px;
  font-size: 10px;
  white-space: nowrap;
}

.routing-device > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.routing-channel-btn {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  min-height: 62px;
  padding: 7px;
  background: var(--item);
  text-align: left;
}

.routing-channel-btn strong {
  font-size: 12px;
}

.routing-channel-btn small {
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-channel-btn.selected {
  border-color: var(--device-accent, var(--accent));
  background: var(--device-accent, var(--accent));
  color: #fff;
}

.routing-channel-btn.selected small {
  color: rgba(255, 255, 255, 0.85);
}

.routing-output-card > .upload-status {
  margin-top: 10px;
}

.routing-empty-result {
  grid-column: 1 / -1;
}

.channel-label-card {
  flex: 0 0 auto;
  overflow: visible;
}

.channel-label-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.channel-label-card > summary::-webkit-details-marker {
  display: none;
}

.channel-label-card > summary strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 16px;
}

.channel-label-card[open] > summary {
  border-bottom: 1px solid var(--line);
}

.channel-label-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px 12px 0;
}

.channel-label-toolbar label,
.channel-label-help {
  display: grid;
  gap: 5px;
}

.channel-label-toolbar label > span,
.channel-label-help span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.channel-label-help {
  min-height: 48px;
  align-content: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.channel-label-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 8px;
  max-height: 310px;
  margin: 10px 12px 0;
  overflow: auto;
}

.channel-output-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  max-height: 430px;
  margin: 12px;
  padding-right: 2px;
  overflow: auto;
}

.channel-output-device {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--device-accent, var(--accent));
  border-radius: 8px;
  background: var(--item-soft);
}

.channel-output-device.active {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--device-accent, var(--accent)) 75%, transparent);
}

.channel-output-device > header {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 7px;
}

.channel-output-device > header strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-output-device > header span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.channel-output-device > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.channel-output-tile {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 54px;
  padding: 5px;
  border-color: color-mix(in srgb, var(--line) 82%, var(--device-accent, var(--accent)));
  background: var(--item);
  text-align: left;
}

.channel-output-tile span,
.channel-output-tile small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 850;
}

.channel-output-tile strong {
  width: 100%;
  margin: 2px 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-output-tile.selected {
  border-color: var(--accent);
  background: var(--active-soft);
}

.channel-output-tile.live {
  color: #fff;
  background: var(--danger);
}

.channel-output-tile.read-only {
  cursor: default;
}

@media (max-width: 1280px) {
  .channel-output-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audio-routing-layout {
    grid-template-columns: minmax(280px, 0.64fr) minmax(560px, 1.36fr);
  }

  .routing-filter-toolbar {
    grid-template-columns: minmax(220px, 1fr) auto;
  }

  .routing-output-actions {
    grid-template-columns: repeat(3, minmax(110px, 0.8fr)) minmax(160px, 1.2fr);
  }
}

/* 1280x800 본체 화면에서는 운영존을 한 줄 스트립으로 유지해 채널 매트릭스가
 * 접히지 않게 한다. 운영존이 많아지면 가로 스크롤로 탐색할 수 있다. */
@media (max-height: 900px) and (min-width: 901px) {
  .routing-zone-shortcuts {
    display: flex;
    flex: 0 0 auto;
    gap: 7px;
    padding-bottom: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
  }

  .routing-zone-target {
    flex: 0 0 176px;
    min-height: 48px;
    scroll-snap-align: start;
  }

  .routing-impact-summary {
    padding-block: 6px;
  }

  .routing-impact-summary small {
    display: none;
  }
}

@media (max-width: 900px) {
  .audio-routing-layout,
  .routing-filter-toolbar,
  .routing-output-actions,
  .routing-channel-matrix {
    grid-template-columns: 1fr;
  }
}

.channel-label-row {
  display: grid;
  grid-template-columns: 58px 66px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
}

.channel-label-output {
  color: var(--accent-strong);
  font-weight: 900;
}

.channel-label-global {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.channel-label-row input {
  min-width: 0;
}

.zone-settings-side,
.zone-channel-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.zone-settings-side {
  overflow: auto;
  padding-right: 4px;
}

.zone-settings-side .zone-editor {
  flex: 0 0 auto;
  overflow: visible;
}

.zone-channel-card {
  overflow: hidden;
}

.zone-channel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.zone-channel-actions button {
  min-height: 50px;
  padding: 10px 14px;
  font-size: 14px;
}

.zone-channel-matrix {
  min-height: 0;
  margin-top: 0;
  overflow: auto;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  align-content: start;
}

.zone-channel-matrix .channel-device {
  padding: 12px;
}

.zone-channel-matrix .channel-device-head {
  min-height: 30px;
  margin-bottom: 8px;
}

.zone-channel-matrix .channel-btn {
  min-width: 54px;
  min-height: 68px;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  font-size: 16px;
}

.zone-channel-matrix .channel-buttons {
  gap: 11px;
}

.zone-channel-matrix .channel-btn strong {
  font-size: 16px;
}

.zone-channel-matrix .channel-btn small {
  font-size: 11px;
}

.media-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.68fr) minmax(460px, 1.35fr) minmax(300px, 0.86fr);
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  align-self: start;
  gap: 12px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
}

.settings-layout.overview-mode {
  align-content: start;
  overflow: visible;
}

.settings-layout[hidden],
.settings-menu-grid[hidden],
#settingsOverviewCard[hidden],
#settingsSubheader[hidden],
[data-settings-section-content][hidden] {
  display: none !important;
}

.settings-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  max-height: calc(100vh - 128px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent) 8%), var(--panel));
  box-shadow: var(--shadow);
  overflow: auto;
}

.settings-menu-button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  align-content: center;
  min-height: 68px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--item);
  color: var(--ink);
  text-align: left;
  box-shadow: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

button.settings-menu-button.active:not(.danger) {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, rgba(69, 199, 176, 0.32), rgba(29, 96, 112, 0.22)),
    var(--active-soft);
  color: #f3fffb;
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px rgba(69, 199, 176, 0.16);
}

.settings-menu-button strong {
  position: relative;
  z-index: 2;
  display: block;
  font-size: 15px;
  word-break: keep-all;
}

.settings-menu-button > .eyebrow,
.settings-menu-button > .settings-menu-description {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.settings-menu-button.active .eyebrow {
  color: rgba(234, 255, 249, 0.98);
  font-weight: 950;
}

.settings-menu-button.active strong {
  color: #f3fffb;
}

.settings-menu-button .settings-menu-description {
  color: var(--muted);
  line-height: 1.45;
  font-size: 12px;
  overflow-wrap: normal;
  word-break: keep-all;
}

.settings-menu-button.active .settings-menu-description {
  color: rgba(238, 255, 250, 0.92);
  font-weight: 850;
}

.settings-menu-art {
  --art-color: #62dfb5;
  --art-base: #153b35;
  position: absolute;
  z-index: 0;
  top: -14%;
  right: -5%;
  bottom: -14%;
  display: grid;
  place-items: center end;
  width: 54%;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  padding-right: 18px;
  background:
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--art-color) 30%, transparent), transparent 42%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--art-color) 9%, transparent) 38%, color-mix(in srgb, var(--art-base) 56%, transparent) 100%);
  box-shadow: none;
  color: var(--art-color);
  opacity: 0.56;
  filter: saturate(0.88) blur(0.35px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 34%, #000 66%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 34%, #000 66%);
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.settings-menu-art::before {
  content: "";
  position: absolute;
  right: 10%;
  top: 10%;
  width: 52%;
  height: 58%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--art-color) 26%, transparent);
  filter: blur(14px);
}

.settings-menu-art::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--art-color) 70%, transparent);
  box-shadow: -23px 0 0 color-mix(in srgb, var(--art-color) 28%, transparent);
}

.settings-menu-art svg {
  position: relative;
  z-index: 1;
  width: 43px;
  height: 43px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
  filter: blur(0.25px) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.24));
}

.settings-menu-button:hover .settings-menu-art,
.settings-menu-button:focus-visible .settings-menu-art,
.settings-menu-button.active .settings-menu-art {
  transform: scale(1.045);
  opacity: 0.72;
  filter: saturate(1) blur(0.2px);
}

.settings-menu-art.art-assistant {
  --art-color: #5ce1bc;
  --art-base: #143e4c;
}

.settings-menu-art.art-display {
  --art-color: #68d7ff;
  --art-base: #16425e;
}

.settings-menu-art.art-accounts {
  --art-color: #84baff;
  --art-base: #233f62;
}

.settings-menu-art.art-nodes {
  --art-color: #f5c86f;
  --art-base: #55421f;
}

.settings-menu-art.art-zones {
  --art-color: #73e2a8;
  --art-base: #1b4b3a;
}

.settings-menu-art.art-audio {
  --art-color: #ffad70;
  --art-base: #5b3524;
}

.settings-menu-art.art-tts {
  --art-color: #74d9f6;
  --art-base: #244759;
}

.settings-menu-art.art-io {
  --art-color: #ff817a;
  --art-base: #5b2d32;
}

.settings-menu-art.art-device {
  --art-color: #c4d879;
  --art-base: #3d4c25;
}

body[data-theme="light"] button.settings-menu-button.active:not(.danger) {
  color: var(--accent-strong);
  background:
    linear-gradient(135deg, rgba(22, 131, 111, 0.16), rgba(217, 247, 238, 0.88)),
    var(--active-soft);
}

body[data-theme="light"] .settings-menu-button.active .eyebrow {
  color: var(--accent-strong);
}

body[data-theme="light"] .settings-menu-button.active strong {
  color: var(--ink);
}

body[data-theme="light"] .settings-menu-button.active .settings-menu-description {
  color: rgba(5, 56, 55, 0.82);
}

body[data-theme="light"] .settings-menu-art {
  background:
    radial-gradient(circle at 78% 28%, color-mix(in srgb, var(--art-color) 25%, transparent), transparent 42%),
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--art-color) 8%, transparent) 38%, color-mix(in srgb, var(--art-base) 18%, transparent) 100%);
  opacity: 0.43;
}

.settings-subheader {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
}

.settings-subheader h3 {
  margin: 3px 0 0;
  font-size: 19px;
}

.settings-detail-open {
  display: none;
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

.audio-settings-hub {
  grid-column: 1 / -1;
  align-self: start;
  gap: 14px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel) 58%);
}

.audio-settings-hub-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

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

.audio-function-button {
  --audio-function-accent: var(--accent);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 9px 12px;
  min-width: 0;
  min-height: 154px;
  border: 1px solid color-mix(in srgb, var(--audio-function-accent) 42%, var(--line));
  border-radius: 10px;
  padding: 15px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--audio-function-accent) 14%, var(--item)), var(--item-soft) 62%);
  color: var(--ink);
  text-align: left;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

.audio-function-button.fire {
  --audio-function-accent: #e45b62;
}

.audio-function-button.alert {
  --audio-function-accent: #d9a441;
}

.audio-function-button.mixer {
  --audio-function-accent: #4eb7b0;
}

.audio-function-button:hover,
.audio-function-button:focus-visible {
  border-color: var(--audio-function-accent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 12px 24px color-mix(in srgb, var(--audio-function-accent) 17%, transparent);
}

.audio-function-index {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--audio-function-accent) 58%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--audio-function-accent) 20%, var(--panel));
  color: color-mix(in srgb, var(--audio-function-accent) 78%, white);
  font-size: 12px;
  font-weight: 950;
}

.audio-function-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.audio-function-copy small {
  color: var(--audio-function-accent);
  font-size: 10px;
  font-weight: 950;
}

.audio-function-copy strong {
  font-size: 17px;
  font-weight: 950;
}

.audio-function-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.42;
}

.audio-function-state {
  grid-column: 1 / -1;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--audio-function-accent) 20%, var(--line));
  padding-top: 9px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-purpose-note {
  --audio-note-accent: var(--accent);
  display: grid;
  gap: 4px;
  border-left: 4px solid var(--audio-note-accent);
  border-radius: 7px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--audio-note-accent) 9%, var(--item-soft));
}

.audio-purpose-note.fire {
  --audio-note-accent: #e45b62;
}

.audio-purpose-note.alert {
  --audio-note-accent: #d9a441;
}

.audio-purpose-note.mixer {
  --audio-note-accent: #4eb7b0;
}

.audio-purpose-note strong {
  font-size: 13px;
  font-weight: 950;
}

.audio-purpose-note span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

/* 방송 오디오 설정은 화면 크기와 관계없이 기능 선택 -> 단일 상세 화면 순서로 연다. */
#settingsContent[data-settings-section="audio"]:not(.detail-mode) > [data-settings-section-content="audio"]:not(.audio-settings-hub) {
  display: none !important;
}

#settingsContent[data-settings-section="audio"].detail-mode > .audio-settings-hub,
#settingsContent[data-settings-section="audio"].detail-mode > [data-settings-section-content="audio"]:not(.detail-active) {
  display: none !important;
}

#settingsContent[data-settings-section="audio"].detail-mode > .detail-active {
  grid-column: 1 / -1;
  min-height: 0;
}

@media (max-width: 900px) {
  .audio-function-grid {
    grid-template-columns: 1fr;
  }

  .audio-function-button {
    min-height: 132px;
  }
}

/* 10.1인치의 공통 설정 접힘 규칙보다 방송 오디오 허브만 우선한다.
   I/O 허브도 레이아웃 스타일을 공유하므로 섹션과 hidden 상태를 함께 제한한다. */
body:not(.large-workspace) #settingsContent[data-settings-section="audio"]:not(.detail-mode) > .audio-settings-hub[data-settings-section-content="audio"]:not([hidden]) {
  display: grid !important;
  justify-content: stretch;
  min-height: 0;
  cursor: default;
}

body:not(.large-workspace) #settingsContent[data-settings-section="audio"]:not(.detail-mode) > .audio-settings-hub[data-settings-section-content="audio"]:not([hidden]) > .audio-settings-hub-copy {
  display: block !important;
}

body:not(.large-workspace) #settingsContent[data-settings-section="audio"]:not(.detail-mode) > .audio-settings-hub[data-settings-section-content="audio"]:not([hidden]) > .audio-function-grid {
  display: grid !important;
}

.settings-overview-card {
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1fr);
  align-items: center;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 20px;
}

.settings-overview-card h3 {
  margin: 4px 0 0;
  font-size: 26px;
}

.settings-overview-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.settings-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.settings-overview-grid span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.account-manager-card {
  min-height: 0;
}

.account-overview-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--item-soft)), var(--card));
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(92px, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.account-summary-grid > div {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 11px;
  background: var(--item);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

.account-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.account-summary-grid strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.account-summary-grid .admin {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.account-summary-grid .admin strong {
  color: var(--warning);
}

.account-current-strip {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(100px, 0.45fr) minmax(280px, 1.8fr);
  gap: 8px;
  margin: 0;
}

.account-current-strip > div {
  min-width: 0;
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  padding: 4px 9px;
}

.account-current-strip dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.account-current-strip dd {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-manager-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.62fr) minmax(0, 1.38fr);
  gap: 12px;
  min-height: 0;
}

.account-list-panel,
.account-editor-panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--item-soft) 78%, transparent);
}

.account-panel-title,
.account-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.account-panel-title strong,
.account-section-heading strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.account-panel-title span,
.account-section-heading span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.account-list-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-bottom: 9px;
}

.account-list-tools input,
.account-list-tools button {
  min-height: 42px;
}

.account-list-tools input {
  min-width: 0;
  padding-inline: 12px;
}

#accountSelectedHint,
#accountEditorSummary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 180px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-list {
  display: grid;
  gap: 8px;
  max-height: 372px;
  overflow: auto;
  padding-right: 2px;
}

.account-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--item);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.account-user-row:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-1px);
}

.account-user-row.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--item)), var(--item));
}

.account-user-row.active strong {
  color: color-mix(in srgb, var(--accent-strong) 85%, var(--ink));
}

.account-user-row strong,
.account-user-row small {
  display: block;
  min-width: 0;
}

.account-user-row small,
.account-user-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.account-user-main {
  min-width: 0;
}

.account-user-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.account-current-badge {
  display: inline-grid;
  flex: 0 0 auto;
  min-height: 20px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: color-mix(in srgb, var(--accent) 24%, var(--control-strong));
  color: var(--accent-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.account-user-main strong,
.account-user-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-user-side {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.account-role-pill {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.account-role-pill.role-admin {
  background: color-mix(in srgb, var(--accent) 28%, var(--control-strong));
  color: var(--accent-strong);
}

.account-role-pill.role-viewer {
  background: color-mix(in srgb, var(--muted) 16%, var(--control-strong));
  color: var(--muted);
}

.account-role-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 7px;
}

.account-role-presets button {
  display: grid;
  min-height: 60px;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--item);
  color: var(--ink);
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.account-role-presets button:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  transform: translateY(-1px);
}

.account-role-presets button.active {
  border-color: var(--accent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 24%, var(--item)), var(--item));
  color: var(--ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}

body .account-role-presets button.active:not(.danger) {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--item)), var(--item));
  color: var(--ink);
}

.account-role-presets button.active strong {
  color: var(--accent-strong);
}

.account-role-presets button.active small {
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
}

.account-role-presets button[data-account-role="admin"].active {
  border-color: color-mix(in srgb, var(--warning) 76%, var(--line));
  background: color-mix(in srgb, var(--warning) 13%, var(--item));
}

.account-role-presets strong,
.account-role-presets small {
  display: block;
}

.account-role-presets strong {
  font-size: 13px;
}

.account-role-presets small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.account-role-description {
  min-height: 34px;
  margin-bottom: 9px;
  border-left: 3px solid var(--accent);
  border-radius: 0 7px 7px 0;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 9%, var(--item-soft));
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.account-role-description[data-role="admin"] {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 8%, var(--item-soft));
}

.account-form-surface,
.account-access-surface,
.account-permission-surface {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item);
}

.account-permission-surface {
  margin-top: 10px;
}

.account-access-surface {
  margin-top: 10px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.account-access-summary {
  display: inline-flex !important;
  min-height: 29px;
  align-items: center;
  border-radius: 999px;
  margin: 0 !important;
  padding: 0 10px;
  background: var(--control-strong);
  color: var(--accent-strong) !important;
  font-weight: 950 !important;
  white-space: nowrap;
}

.account-access-summary[data-kind="empty"] {
  color: var(--danger) !important;
}

.account-access-notice {
  margin-bottom: 8px;
  border-left: 3px solid var(--accent);
  padding: 6px 9px;
  background: color-mix(in srgb, var(--accent) 7%, var(--item-soft));
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.account-access-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  max-height: 330px;
  overflow: auto;
}

.account-local-scope-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--item)), var(--item-soft));
}

.account-local-site-head {
  display: grid;
  min-width: 0;
  align-items: center;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  padding: 9px 11px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.account-local-site-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, var(--item));
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 950;
}

.account-local-site-copy,
.account-local-site-copy strong,
.account-local-site-copy small,
.account-local-device-card > span:nth-child(2),
.account-local-device-card strong,
.account-local-device-card small {
  display: block;
  min-width: 0;
}

.account-local-site-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.account-local-site-copy small,
.account-local-device-card small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-local-site-head > em {
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--accent) 14%, var(--item));
  color: var(--accent-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.account-local-scope-policy {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 8px 11px;
}

.account-local-scope-policy strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.account-local-scope-policy span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.4;
}

.account-local-device-section {
  display: grid;
  gap: 7px;
  padding: 9px 11px 11px;
}

.account-local-device-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-local-device-title strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 950;
}

.account-local-device-title span {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 900;
}

.account-local-device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.account-local-device-card {
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  background: color-mix(in srgb, var(--item) 82%, transparent);
}

.account-local-device-role {
  border-radius: 6px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--accent) 12%, var(--item));
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 950;
}

.account-local-device-role.role-slave {
  background: color-mix(in srgb, var(--warning) 11%, var(--item));
  color: var(--warning);
}

.account-local-device-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-local-device-card > em {
  color: var(--accent-strong);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.account-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

body .account-form-grid {
  align-items: start;
}

.account-password-field {
  min-width: 0;
}

.account-password-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.account-password-control input {
  min-width: 0;
}

.account-password-control button {
  min-width: 62px;
  min-height: 42px;
}

#accountPasswordHint {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

#accountPasswordHint[data-valid="false"] {
  color: var(--danger);
}

#accountPasswordHint[data-valid="true"] {
  color: var(--accent-strong);
}

.account-permission-summary {
  display: inline-flex !important;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  margin: 0 !important;
  padding: 0 9px;
  background: var(--control-strong);
  color: var(--accent-strong) !important;
  white-space: nowrap;
}

.account-permission-state {
  display: grid;
  min-width: 128px;
  justify-items: end;
  gap: 5px;
}

.account-permission-state progress {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--control-strong);
  accent-color: var(--accent);
}

.account-permission-state progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--control-strong);
}

.account-permission-state progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--accent);
}

.account-permission-toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--item-soft));
}

.account-permission-policy {
  min-width: 0;
}

.account-permission-policy strong,
.account-permission-policy span {
  display: block;
}

.account-permission-policy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.account-permission-policy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.account-permission-quick-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.account-permission-quick-actions button {
  min-height: 34px;
  padding-inline: 11px;
  font-size: 11px;
}

.account-risk-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--warning) 10%, var(--item));
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.account-risk-banner[hidden] {
  display: none;
}

.account-risk-banner[data-level="critical"] {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--line));
  background: color-mix(in srgb, var(--danger) 10%, var(--item));
}

.account-risk-banner strong {
  color: var(--warning);
  white-space: nowrap;
}

.account-risk-banner[data-level="critical"] strong {
  color: var(--danger);
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.permission-section.base {
  grid-column: 1 / -1;
}

.permission-section.broadcast {
  grid-column: 1;
}

.permission-section.admin {
  grid-column: 2;
}

.permission-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px;
  background: color-mix(in srgb, var(--item-soft) 70%, transparent);
}

.permission-section-title {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.permission-section-title span,
.permission-section-title strong,
.permission-section-title small {
  display: block;
}

.permission-section-title strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.permission-section-title small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.permission-section-title em {
  display: inline-grid;
  min-width: 28px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.permission-grid-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.permission-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--item);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.permission-option:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  transform: translateY(-1px);
}

.permission-option.checked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--item));
}

.permission-option.checked strong {
  color: color-mix(in srgb, var(--accent-strong) 82%, var(--ink));
}

.permission-option input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent);
}

.permission-option input:disabled {
  opacity: 0.82;
}

.permission-option.required {
  min-height: 50px;
  background: color-mix(in srgb, var(--accent) 9%, var(--item));
  cursor: default;
}

.permission-option.required:hover {
  transform: none;
}

.permission-option.high-risk.checked {
  border-color: color-mix(in srgb, var(--warning) 68%, var(--line));
  background: color-mix(in srgb, var(--warning) 9%, var(--item));
}

.permission-option strong,
.permission-option small {
  display: block;
}

.permission-option small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.3;
  font-size: 11px;
}

.permission-option-tag {
  display: inline-grid;
  min-width: 36px;
  min-height: 22px;
  place-items: center;
  border-radius: 999px;
  padding: 0 7px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.permission-option-tag.required {
  color: var(--accent-strong);
}

.permission-option-tag.risk {
  background: color-mix(in srgb, var(--warning) 14%, var(--control-strong));
  color: var(--warning);
}

.account-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 112px;
  gap: 8px;
}

body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .account-manager-card.detail-active {
  max-height: none;
  overflow: visible;
}

body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .account-form-grid {
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(220px, 1.25fr) 150px;
}

body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .permission-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .permission-grid-inner {
  grid-template-columns: 1fr;
}

body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .account-actions {
  position: static;
  margin: 12px 0 0;
  padding: 0;
  border-top: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="dark"] .account-user-row.active strong,
body[data-theme="dark"] .permission-option.checked strong {
  color: #eafff8;
}

.help-entry-card {
  grid-column: 1 / -1;
}

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

.help-entry-actions button {
  min-height: 58px;
  font-size: 16px;
  font-weight: 900;
}

.manual-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  flex: 1;
}

.manual-toc-card,
.manual-content {
  min-height: 0;
  overflow: auto;
}

.manual-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-toc button {
  min-height: 44px;
  text-align: left;
  justify-content: start;
}

.manual-content {
  line-height: 1.72;
}

.manual-content h1 {
  margin: 0 0 18px;
  font-size: 28px;
}

.manual-content h2 {
  margin: 26px 0 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 21px;
}

.manual-content h3 {
  margin: 20px 0 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
}

.manual-content p {
  margin: 8px 0;
  color: var(--ink);
  font-size: 15px;
}

.manual-bullet::before {
  content: "- ";
  color: var(--accent);
  font-weight: 900;
}

.manual-step {
  font-weight: 800;
}

.manual-space {
  height: 8px;
}

.manual-callout {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--ink);
}

.manual-callout strong {
  font-size: 13px;
  line-height: 1.55;
}

.manual-callout span {
  font-size: 14px;
  line-height: 1.62;
}

.manual-callout.important {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}

.manual-callout.important strong {
  color: var(--danger);
}

.manual-callout.warning {
  border-color: color-mix(in srgb, var(--warning) 65%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.manual-callout.warning strong {
  color: var(--warning-strong, var(--warning));
}

.manual-callout.check {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.manual-callout.check strong,
.manual-callout.info strong {
  color: var(--accent-strong);
}

.manual-content mark {
  border-radius: 4px;
  padding: 0 3px;
  background: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--ink);
}

.assistant-fab {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 108px;
  min-height: 50px;
  padding: 7px 12px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 16px 44px rgba(22, 131, 111, 0.28);
  cursor: pointer;
  font-weight: 950;
  touch-action: manipulation;
  user-select: none;
  isolation: isolate;
  overflow: hidden;
  animation: assistantFabGlow 3.4s ease-in-out infinite;
}

.screen-header .assistant-fab {
  margin-left: auto;
}

.screen-header .assistant-fab + .screen-clock {
  margin-left: 0;
}

.topbar-actions .assistant-fab {
  order: -1;
  grid-template-columns: 28px auto;
  gap: 5px;
  min-width: 92px;
  min-height: 46px;
  padding: 6px 10px 6px 7px;
  box-shadow: 0 10px 28px rgba(22, 131, 111, 0.20);
  animation: none;
}

.topbar-actions .assistant-fab span {
  width: 28px;
  height: 28px;
}

.topbar-actions .assistant-fab strong {
  font-size: 13px;
}

.assistant-fab::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 42%, rgba(255, 255, 255, 0.22) 0%, transparent 58%);
  opacity: 0.45;
  pointer-events: none;
  animation: none;
}

.assistant-fab.dragging {
  cursor: pointer;
}

.assistant-fab span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.assistant-fab strong {
  position: relative;
  z-index: 1;
  font-size: 14px;
  white-space: nowrap;
}

body[data-theme="dark"] .assistant-fab {
  color: #061412;
  box-shadow: 0 16px 44px rgba(66, 197, 169, 0.22);
}

body[data-theme="dark"] .assistant-fab span {
  background: rgba(6, 20, 18, 0.14);
}

@keyframes assistantFabGlow {
  0%,
  100% {
    box-shadow: 0 16px 44px rgba(22, 131, 111, 0.28);
  }
  50% {
    box-shadow: 0 18px 54px rgba(22, 131, 111, 0.46);
  }
}

@keyframes assistantFabHalo {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.74;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-fab,
  .assistant-fab::after {
    animation: none;
  }
}

.toast-stack {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(460px, calc(100vw - 28px));
  pointer-events: none;
}

.accessibility-live-caption {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 135;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(780px, calc(100vw - 32px));
  min-height: 76px;
  border: 3px solid #ffffff;
  border-radius: 10px;
  padding: 12px 18px;
  background: #10211e;
  color: #ffffff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), 0 0 0 5px rgba(13, 107, 93, 0.52);
  transform: translateX(-50%);
}

.accessibility-live-caption > span {
  display: inline-grid;
  place-items: center;
  min-width: 84px;
  min-height: 42px;
  border-radius: 7px;
  padding: 6px 10px;
  background: #ffffff;
  color: #10211e;
  font-size: 14px;
  font-weight: 1000;
}

.accessibility-live-caption > strong {
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

.accessibility-caption-dismiss {
  min-width: 74px;
  min-height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 7px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.accessibility-caption-dismiss:hover,
.accessibility-caption-dismiss:focus-visible {
  background: #ffffff;
  color: #10211e;
}

.accessibility-live-caption[data-kind="error"] {
  background: #671a18;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), 0 0 0 5px rgba(196, 61, 54, 0.58);
}

.accessibility-live-caption[data-kind="warning"] {
  background: #5c3c08;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), 0 0 0 5px rgba(215, 146, 31, 0.6);
}

.accessibility-live-caption[data-kind="broadcast"] {
  background: #083d5a;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46), 0 0 0 5px rgba(35, 151, 208, 0.58);
}

.accessibility-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(4, 12, 11, 0.78);
  backdrop-filter: blur(8px);
  overflow: auto;
}

body.accessibility-dialog-open {
  overflow: hidden;
}

.accessibility-dialog {
  width: min(860px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: 8px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.48);
}

.accessibility-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.accessibility-dialog-head h2 {
  margin: 5px 0 0;
  font-size: 29px;
}

.accessibility-dialog-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.accessibility-dialog-head > button {
  min-width: 76px;
}

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

.accessibility-mode-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 12px;
  min-height: 126px;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--item);
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}

.accessibility-mode-card:hover,
.accessibility-mode-card.active {
  border-color: var(--accent-strong);
  background: var(--active-soft);
}

button.accessibility-mode-card.active:not(.danger) {
  background: var(--active-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent);
}

.accessibility-mode-number {
  grid-row: 1 / 3;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 1000;
}

.accessibility-mode-card.active .accessibility-mode-number {
  background: var(--accent-strong);
  color: var(--panel);
}

.accessibility-mode-card strong {
  align-self: end;
  font-size: 19px;
  font-weight: 1000;
}

.accessibility-mode-card small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

button.accessibility-mode-card.active small {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

.accessibility-preference-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: color-mix(in srgb, var(--item) 86%, transparent);
}

.accessibility-preference-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.accessibility-preference-head h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.accessibility-preference-head kbd {
  border: 1px solid color-mix(in srgb, var(--ink) 38%, var(--line));
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--control-strong);
  color: var(--ink);
  font: 850 12px/1 Inter, "Pretendard", sans-serif;
  white-space: nowrap;
}

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

.accessibility-preference-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px 12px;
  background: var(--panel);
  cursor: pointer;
}

.accessibility-preference-option:has(input:checked) {
  border-color: var(--accent-strong);
  background: var(--active-soft);
}

.accessibility-preference-option input[type="checkbox"] {
  width: 23px;
  height: 23px;
  margin: 0;
  accent-color: var(--accent-strong);
}

.accessibility-preference-option > span {
  display: grid;
  gap: 3px;
}

.accessibility-preference-option strong {
  font-size: 14px;
  font-weight: 950;
}

.accessibility-preference-option small,
.accessibility-preference-help {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
}

.accessibility-duration-option {
  grid-template-columns: minmax(0, 1fr) 92px;
}

.accessibility-duration-option select {
  width: 100%;
  min-height: 42px;
}

.accessibility-preference-help {
  margin: 10px 2px 0;
}

.accessibility-dialog-footer {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.accessibility-dialog-footer > div {
  display: grid;
  gap: 3px;
}

.accessibility-dialog-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.accessibility-dialog-footer strong {
  color: var(--accent-strong);
  font-size: 17px;
}

.accessibility-boundary-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.accessibility-standards-note {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--line));
  border-radius: 7px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--warning) 12%, var(--panel));
}

.accessibility-standards-note summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.accessibility-standards-note p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .accessibility-mode-grid {
    grid-template-columns: 1fr;
  }

  .accessibility-dialog-footer {
    grid-template-columns: 1fr 1fr;
  }

  .accessibility-dialog-footer > div {
    grid-column: 1 / -1;
  }

  .accessibility-preference-grid {
    grid-template-columns: 1fr;
  }

  .accessibility-live-caption {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .accessibility-caption-dismiss {
    grid-column: 1 / -1;
  }
}

/* 10.1인치 1280x800 패널에서는 한 화면 안에서 네 모드와 세부 옵션을 함께
   비교할 수 있도록 세로 간격만 줄인다. 글자와 조작 영역은 축소하지 않는다. */
@media (max-height: 900px) and (min-width: 900px) {
  .accessibility-dialog {
    padding: 14px;
  }

  .accessibility-dialog-head h2 {
    font-size: 25px;
  }

  .accessibility-mode-grid {
    gap: 8px;
    margin-top: 12px;
  }

  .accessibility-mode-card {
    min-height: 96px;
    padding: 11px 13px;
  }

  .accessibility-preference-panel {
    margin-top: 10px;
    padding: 10px;
  }

  .accessibility-preference-option {
    min-height: 60px;
    padding: 8px 10px;
  }

  .accessibility-dialog-footer {
    margin-top: 10px;
    padding-top: 10px;
  }

  .accessibility-boundary-note {
    margin-top: 8px;
  }
}

/* 비상·화재 상태는 어떤 하위 화면을 보고 있어도 즉시 알아볼 수 있어야 한다.
   서버의 래치 상태가 참인 동안만 전면 표시하며, 해제는 화면의 2회 입력으로
   제한해 우발적인 한 번의 터치가 전체 방송을 끊지 못하게 한다. */
.hazard-overlay {
  --hazard-rgb: 220, 47, 58;
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:
    linear-gradient(145deg, rgba(34, 2, 6, 0.96), rgba(105, 8, 16, 0.9) 50%, rgba(28, 1, 4, 0.97));
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.hazard-overlay[data-hazard-kind="fire"],
.hazard-overlay[data-hazard-kind="fire-test"],
.hazard-overlay[data-hazard-kind="disaster-fire"] {
  --hazard-rgb: 244, 67, 28;
  background:
    linear-gradient(145deg, rgba(38, 5, 1, 0.97), rgba(133, 21, 5, 0.92) 52%, rgba(31, 3, 1, 0.98));
}

.hazard-overlay[data-hazard-kind="disaster-earthquake"] {
  --hazard-rgb: 229, 145, 15;
  background: linear-gradient(145deg, #261704, #7a4707 52%, #201202);
}

.hazard-overlay[data-hazard-kind="disaster-air-raid"] {
  --hazard-rgb: 73, 113, 255;
  background: linear-gradient(145deg, #050a24, #1d2d78 52%, #03061d);
}

.hazard-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(var(--hazard-rgb), 0.32);
  animation: hazard-screen-flash 1.35s ease-in-out infinite;
}

.hazard-overlay::after {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  border: 2px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 70px rgba(var(--hazard-rgb), 0.45),
    0 0 44px rgba(var(--hazard-rgb), 0.72);
  pointer-events: none;
}

.hazard-frame {
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.hazard-content {
  display: grid;
  justify-items: center;
  width: min(880px, 100%);
  text-align: center;
}

.hazard-badge {
  border: 1px solid rgba(255, 255, 255, 0.68);
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0;
}

.hazard-symbol {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin-top: 24px;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow:
    0 0 0 15px rgba(255, 255, 255, 0.12),
    0 0 46px rgba(255, 255, 255, 0.42);
  animation: hazard-symbol-pulse 1.35s ease-in-out infinite;
}

.hazard-symbol strong {
  color: #fff;
  font-size: 74px;
  line-height: 1;
}

.hazard-content h2 {
  margin: 26px 0 0;
  color: #fff;
  font-size: 66px;
  font-weight: 1000;
  line-height: 1.05;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.5);
}

.hazard-content p {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 21px;
  font-weight: 850;
  line-height: 1.5;
}

.hazard-live-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  font-weight: 900;
}

.hazard-live-status i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px #fff;
  animation: hazard-live-pulse 0.85s steps(2, end) infinite;
}

.hazard-release-button {
  width: min(560px, 100%);
  min-height: 72px;
  margin-top: 30px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  padding: 14px 22px;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 20px;
  font-weight: 950;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
}

.hazard-overlay.release-armed .hazard-release-button {
  border-color: #ffe476;
  background: #ffe476;
  color: #3b2000;
  box-shadow: 0 0 32px rgba(255, 228, 118, 0.68);
}

.hazard-content > small {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 800;
}

@keyframes hazard-screen-flash {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 1; }
}

@keyframes hazard-symbol-pulse {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}

@keyframes hazard-live-pulse {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0.28; }
}

@media (min-width: 1600px) and (min-height: 900px) {
  .hazard-symbol {
    width: 142px;
    height: 142px;
  }

  .hazard-symbol strong {
    font-size: 94px;
  }

  .hazard-content h2 {
    font-size: 86px;
  }

  .hazard-content p {
    font-size: 25px;
  }
}

@media (max-height: 680px) {
  .hazard-symbol {
    width: 82px;
    height: 82px;
    margin-top: 14px;
  }

  .hazard-symbol strong {
    font-size: 54px;
  }

  .hazard-content h2 {
    margin-top: 16px;
    font-size: 48px;
  }

  .hazard-content p,
  .hazard-live-status {
    margin-top: 10px;
  }

  .hazard-release-button {
    min-height: 58px;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-overlay::before,
  .hazard-symbol,
  .hazard-live-status i {
    animation-duration: 2.8s;
  }
}

.button-tooltip {
  position: fixed;
  z-index: 98;
  max-width: min(320px, calc(100vw - 28px));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--accent)), var(--panel));
  color: var(--ink);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(0.98);
  transition: opacity 120ms ease, transform 120ms ease;
}

.button-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.button-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: var(--panel);
  transform: translateX(-50%) rotate(45deg);
}

.button-tooltip[data-placement="top"]::after {
  bottom: -6px;
}

.button-tooltip[data-placement="bottom"]::after {
  top: -6px;
  transform: translateX(-50%) rotate(225deg);
}

body[data-theme="light"] .button-tooltip {
  background:
    linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--active-soft) 50%, #ffffff));
  color: #102520;
  box-shadow: 0 18px 48px rgba(26, 64, 55, 0.18);
}

body[data-theme="light"] .button-tooltip::after {
  background: #ffffff;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px 18px;
  background: rgba(4, 12, 11, 0.64);
  backdrop-filter: blur(6px);
  overflow: auto;
}

.disaster-select-overlay {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(4, 12, 11, 0.74);
  backdrop-filter: blur(8px);
}

.disaster-select-dialog {
  width: min(820px, calc(100vw - 44px));
  border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--line));
  border-radius: 8px;
  padding: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.disaster-select-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.disaster-select-head h2 {
  margin: 6px 0 0;
  font-size: clamp(25px, 3vw, 34px);
}

.disaster-select-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.disaster-select-head > button {
  min-width: 82px;
  min-height: 48px;
}

.disaster-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.disaster-option {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 178px;
  border-width: 2px;
  padding: 18px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.disaster-option.fire {
  border-color: #ef5a4f;
  background: linear-gradient(145deg, color-mix(in srgb, #ef5a4f 18%, var(--control)), var(--control));
}
.disaster-option.earthquake {
  border-color: #e1a12c;
  background: linear-gradient(145deg, color-mix(in srgb, #e1a12c 18%, var(--control)), var(--control));
}
.disaster-option.air-raid {
  border-color: #6388ff;
  background: linear-gradient(145deg, color-mix(in srgb, #6388ff 20%, var(--control)), var(--control));
}

.disaster-option-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 13%, var(--panel));
}

.disaster-option-icon svg {
  width: 29px;
  height: 29px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.disaster-option.fire .disaster-option-icon { color: #ff766b; }
.disaster-option.earthquake .disaster-option-icon { color: #f1b53f; }
.disaster-option.air-raid .disaster-option-icon { color: #85a1ff; }

.disaster-option-code {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  min-height: 26px;
  border-radius: 6px;
  padding: 4px 8px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
}

.disaster-option strong {
  margin-top: 14px;
  font-size: 22px;
}

.disaster-option small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.disaster-source-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .disaster-option-grid {
    grid-template-columns: 1fr;
  }

  .disaster-option {
    min-height: 118px;
  }
}

.confirm-dialog {
  width: min(520px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
  border-radius: 8px;
  padding: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.confirm-dialog h2 {
  margin: 8px 0 0;
  font-size: clamp(24px, 3vw, 32px);
}

.confirm-dialog p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 12px;
  margin-top: 18px;
}

.confirm-actions button {
  min-height: 58px;
  font-size: 17px;
  font-weight: 950;
}

.service-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 12, 11, 0.7);
  backdrop-filter: blur(8px);
  overflow: auto;
}

.service-info-overlay[hidden] {
  display: none;
}

.service-info-dialog {
  width: min(680px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 12px;
  padding: 22px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
    var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.48);
}

.service-info-head,
.service-info-title {
  display: flex;
  align-items: center;
}

.service-info-head {
  justify-content: space-between;
  gap: 18px;
}

.service-info-title {
  min-width: 0;
  gap: 18px;
}

.service-info-title h2 {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.05;
}

.service-company-logo-picture,
.service-company-logo {
  display: block;
  width: 210px;
  height: auto;
}

.service-company-logo-picture {
  flex: 0 0 210px;
}

.service-info-close {
  min-width: 64px;
  min-height: 46px;
}

.service-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.service-contact-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px 15px;
  background: var(--item-soft);
  color: var(--ink);
  text-decoration: none;
}

.service-contact-card:hover,
.service-contact-card:focus-visible,
.service-request-link:hover,
.service-request-link:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.service-contact-card span,
.service-detail-list dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.service-contact-card strong {
  overflow: hidden;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-contact-card small,
.service-detail-list small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.service-contact-wide {
  grid-column: 1 / -1;
}

.service-detail-list {
  display: grid;
  gap: 1px;
  margin: 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--line);
}

.service-detail-list > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  background: var(--panel);
}

.service-detail-list dt,
.service-detail-list dd {
  margin: 0;
}

.service-detail-list dd {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.45;
}

.service-detail-list dd small {
  display: block;
  margin-top: 3px;
}

.service-request-panel {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: 9px;
  padding: 14px;
  color: var(--ink);
  background: var(--active-soft);
}

.service-qr-link {
  display: block;
  width: 136px;
  height: 136px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: #fff;
}

.service-qr-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.service-request-copy {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.service-request-copy > span {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 950;
}

.service-request-copy > strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.service-request-copy > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.service-request-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin-top: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-radius: 8px;
  padding: 0 16px;
  color: var(--accent-strong);
  background: var(--panel);
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
}

.service-info-help {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .service-info-dialog {
    padding: 17px;
  }

  .service-contact-grid {
    grid-template-columns: 1fr;
  }

  .service-contact-wide {
    grid-column: auto;
  }

  .service-detail-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .service-info-head {
    align-items: flex-start;
  }

  .service-info-title {
    display: grid;
    gap: 12px;
  }

  .service-company-logo-picture,
  .service-company-logo {
    width: 185px;
  }

  .service-request-panel {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px;
  }

  .service-qr-link {
    width: 112px;
    height: 112px;
  }
}

.channel-label-overlay {
  position: fixed;
  inset: 0;
  z-index: 94;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 12, 11, 0.68);
  backdrop-filter: blur(7px);
  overflow: auto;
}

.channel-label-overlay[hidden] {
  display: none;
}

.channel-label-dialog {
  width: min(620px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 10px;
  padding: 20px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
}

.channel-label-dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.channel-label-dialog h2 {
  margin: 5px 0 0;
  font-size: 26px;
}

.channel-label-connection-map {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 8px;
  margin-top: 16px;
}

.channel-label-connection-map > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item-soft);
}

.channel-label-connection-map span,
.channel-label-dialog-field > span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.channel-label-connection-map strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-label-dialog-field {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.channel-label-dialog-field input {
  min-height: 52px;
  font-size: 17px;
  font-weight: 800;
}

.channel-label-dialog > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}

.channel-label-dialog-actions {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 10px;
  margin-top: 16px;
}

.channel-label-dialog-actions button {
  min-height: 52px;
  font-size: 15px;
}

.toast {
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
  animation: toastIn 0.18s ease-out;
}

.toast.success {
  border-left-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.toast.error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.toast.warning {
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 13%, var(--panel));
}

.toast.closing {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.assistant-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  gap: 14px;
  min-height: 0;
  flex: 0 1 auto;
  overflow: auto;
}

.assistant-chat-card {
  grid-row: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: calc(100vh - 150px);
}

.assistant-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.assistant-quick button {
  min-height: 46px;
  padding: 8px;
  background: var(--quick);
  color: var(--accent-strong);
  font-weight: 900;
}

.assistant-messages {
  flex: 0 1 auto;
  min-height: 220px;
  height: clamp(260px, 42vh, 430px);
  max-height: 430px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
}

.assistant-message {
  max-width: min(86%, 820px);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--panel);
  overflow-wrap: anywhere;
}

.assistant-message.user {
  align-self: flex-end;
  border-color: var(--accent);
  background: var(--active-soft);
}

.assistant-message strong {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-strong);
  font-size: 12px;
}

.assistant-message p {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  font-size: 14px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

.assistant-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 10px;
  margin-top: 10px;
  min-width: 0;
}

.assistant-input-row input {
  min-width: 0;
}

.assistant-action-card {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  max-height: min(220px, 32vh);
  overflow: auto;
}

.assistant-action-card.danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--panel));
}

.assistant-action-card p {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.6;
  font-weight: 800;
}

.assistant-understanding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--active-soft) 68%, transparent);
}

.assistant-understanding[hidden] {
  display: none;
}

.assistant-understanding > span {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.assistant-understanding strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.assistant-understanding small {
  min-width: 0;
  color: var(--muted);
  font-weight: 750;
  overflow-wrap: anywhere;
}

.assistant-settings-card {
  min-height: 0;
}

.assistant-setup-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(260px, 1.15fr) auto;
  align-items: end;
  gap: 10px;
}

.assistant-setup-grid > label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.assistant-runtime-summary {
  display: grid;
  gap: 3px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--item);
}

.assistant-runtime-summary > span,
.assistant-runtime-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.assistant-runtime-summary strong {
  color: var(--ink);
  font-size: 15px;
}

.assistant-setup-grid #testAssistantBtn {
  min-height: 48px;
  white-space: nowrap;
}

.needle-routing-surface {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) 104px 118px auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--item) 90%, var(--accent) 10%);
}

.needle-routing-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.needle-routing-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.needle-routing-copy small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.4;
}

.needle-routing-surface > label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.needle-routing-surface .nav-pill {
  align-self: center;
  justify-self: end;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needle-runtime-checks {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.needle-runtime-checks > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}

.needle-runtime-checks span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.needle-runtime-checks strong {
  overflow: hidden;
  color: var(--warning);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needle-runtime-checks > div[data-ready="true"] strong {
  color: var(--accent-strong);
}

.needle-self-test-button {
  grid-column: 4;
  min-height: 38px;
  white-space: nowrap;
}

.assistant-advanced-settings {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  overflow: hidden;
}

.assistant-advanced-settings > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.assistant-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.assistant-advanced-settings > summary::after {
  content: "펼치기";
  color: var(--accent-strong);
  font-size: 11px;
}

.assistant-advanced-settings[open] > summary::after {
  content: "접기";
}

.assistant-advanced-settings .assistant-settings-grid {
  border-top: 1px solid var(--line);
  padding: 12px;
}

.assistant-settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.assistant-settings-actions #saveAssistantSettingsBtn {
  width: min(260px, 100%);
}

.assistant-settings-grid {
  grid-template-columns: minmax(150px, 0.5fr) minmax(180px, 0.7fr);
}

.assistant-settings-grid .wide {
  grid-column: 1 / -1;
}

.settings-info-grid {
  display: grid;
  gap: 10px;
  margin: 0;
}

.settings-info-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--item);
}

.settings-info-grid dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-info-grid dd {
  margin: 5px 0 0;
  font-weight: 900;
  word-break: break-word;
}

.display-settings-card,
.secondary-display-card,
.tts-settings-card,
.device-info-card {
  grid-column: 1 / -1;
}

.device-info-card {
  min-width: 0;
}

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

.device-identity-grid > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 108px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--item) 94%, white 6%), var(--item));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
}

.device-identity-grid span,
.device-info-form-grid label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.device-identity-grid strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.device-identity-grid small,
.device-info-form-grid label > small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.device-registration-identity {
  padding-right: 104px !important;
}

.device-registration-identity button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 38px;
  padding: 7px 11px;
}

.device-info-section {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.device-info-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.device-info-section-head h4 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 16px;
}

.device-info-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--control);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.device-info-state[data-kind="success"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--active-soft);
  color: var(--accent-strong);
}

.device-info-state[data-kind="warning"] {
  border-color: color-mix(in srgb, var(--warning) 55%, var(--line));
  background: color-mix(in srgb, var(--warning) 12%, var(--panel));
  color: var(--warning);
}

.device-info-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.device-info-form-grid label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.device-info-form-grid label.wide {
  grid-column: span 2;
}

.device-info-form-grid input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
}

.device-registration-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  border-left: 4px solid var(--accent);
  border-radius: 7px;
  padding: 12px 14px;
  background: var(--active-soft);
  color: var(--ink);
}

.device-registration-note strong {
  color: var(--accent-strong);
}

.device-registration-note span {
  color: var(--muted);
  line-height: 1.45;
}

.device-info-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.device-info-actions button {
  min-width: 180px;
  min-height: 48px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.settings-form-grid label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.settings-form-grid button {
  min-width: 130px;
}

.display-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 12px;
}

.secondary-display-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.secondary-display-grid .wide {
  grid-column: 1 / -1;
}

.secondary-display-grid textarea {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.secondary-display-actions {
  gap: 8px;
  flex-wrap: wrap;
}

.secondary-display-actions button {
  min-width: 150px;
}

.pre-alert-settings-card {
  grid-column: 1 / -1;
  gap: 10px;
}

.pre-alert-console {
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) minmax(360px, 1.18fr);
  gap: 10px;
}

.pre-alert-section {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--item-soft)), var(--item-soft));
}

.pre-alert-section-master {
  align-content: start;
}

.pre-alert-section-sounds {
  align-content: start;
}

.pre-alert-section-target {
  grid-column: 1 / -1;
}

.pre-alert-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pre-alert-section-head strong {
  display: block;
  font-size: 15px;
  font-weight: 950;
}

.pre-alert-section-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.pre-alert-section-head > select {
  width: 112px;
  min-height: 40px;
}

.pre-alert-timing-grid,
.pre-alert-number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.pre-alert-sound-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: end;
}

.pre-alert-sound-grid button {
  min-height: 42px;
}

.pre-alert-console label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.pre-alert-console select,
.pre-alert-console input[type="number"] {
  width: 100%;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--panel) 88%, #000);
  color: var(--ink);
  font-weight: 850;
}

.pre-alert-source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pre-alert-source-grid label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--item) 86%, var(--accent));
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}

.pre-alert-source-grid label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 22%, var(--item));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.pre-alert-source-grid input {
  width: 20px;
  min-height: 20px;
  accent-color: var(--accent);
}

.pre-alert-save {
  grid-column: 1 / -1;
  min-height: 44px;
}

@media (max-width: 900px) {
  .pre-alert-console,
  .pre-alert-timing-grid,
  .pre-alert-number-grid,
  .pre-alert-source-grid,
  .pre-alert-sound-grid {
    grid-template-columns: 1fr;
  }

  .pre-alert-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pre-alert-section-head > select {
    width: 100%;
  }
}

.device-nickname-card {
  grid-column: 1 / -1;
}

.network-topology-card {
  grid-column: 1 / -1;
}

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

.network-topology-grid section {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
}

.network-topology-grid span,
.network-topology-grid small {
  color: var(--muted);
  font-weight: 800;
}

.network-topology-grid strong {
  color: var(--accent);
  font-size: 15px;
}

@media (max-width: 900px) {
  .network-topology-grid {
    grid-template-columns: 1fr;
  }
}

.device-nickname-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.device-nickname-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-left: 6px solid var(--device-accent, var(--accent));
  border-radius: 8px;
  padding: 10px;
  background: var(--item);
}

.device-nickname-row strong {
  display: block;
  color: var(--device-accent, var(--accent));
  font-size: 13px;
}

.device-nickname-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.device-nickname-row input {
  min-height: 42px;
}

.tts-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 12px;
}

.tts-quick-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 12px;
}

.tts-quick-summary {
  display: grid;
  align-content: center;
  min-height: 78px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(69, 199, 176, 0.16), rgba(29, 96, 112, 0.10)),
    var(--item);
}

.tts-quick-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.18;
}

.tts-quick-summary small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

#ttsAdvancedToggleBtn {
  min-width: 150px;
  min-height: 78px;
}

.tts-settings-card:not(.show-advanced) .tts-status-grid,
.tts-settings-card:not(.show-advanced) .tts-diagnostics,
.tts-settings-card:not(.show-advanced) .tts-commercial-note,
.tts-settings-card:not(.show-advanced) .tts-advanced-field {
  display: none !important;
}

.tts-engine-hidden,
.tts-settings-card.show-advanced .tts-engine-hidden {
  display: none !important;
}

.tts-settings-card:not(.show-advanced) .tts-form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tts-settings-card.show-advanced .tts-form-grid {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.tts-basic-field {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background:
    linear-gradient(135deg, rgba(69, 199, 176, 0.08), transparent 62%),
    var(--surface);
}

.tts-engine-select-field {
  border-color: color-mix(in srgb, var(--warning) 48%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 18%, transparent), transparent 68%),
    color-mix(in srgb, var(--warning) 7%, var(--field));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--warning) 16%, transparent),
    0 10px 24px color-mix(in srgb, var(--warning) 8%, transparent);
}

.tts-engine-select-field span {
  color: color-mix(in srgb, var(--warning) 74%, var(--ink));
}

.tts-engine-select-field select {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--warning) 9%, transparent), transparent),
    var(--field);
  font-weight: 900;
}

.tts-engine-package-field {
  border-color: color-mix(in srgb, var(--accent-2) 42%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent-2) 6%, var(--field));
}

.tts-engine-package-field span {
  color: color-mix(in srgb, var(--accent-2) 74%, var(--ink));
}

.tts-settings-card:not(.show-advanced) .tts-form-grid .wide.tts-basic-field {
  grid-column: span 2;
}

.tts-settings-card,
.hardware-mode-card,
.io-settings-card {
  grid-column: 1 / -1;
}

.quick-tts-settings-card {
  grid-column: 1 / -1;
}

.tts-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.tts-form-grid label {
  min-width: 0;
}

.tts-form-grid label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.tts-form-grid .wide {
  grid-column: 1 / -1;
}

.quick-preset-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.4fr) auto auto;
  gap: 10px;
  align-items: end;
}

.quick-preset-form label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quick-preset-form textarea {
  min-height: 74px;
}

.quick-preset-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.quick-preset-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item);
}

.quick-preset-row strong {
  font-size: 14px;
}

.quick-preset-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-preset-row button {
  min-height: 38px;
  padding: 7px 10px;
}

.quick-preset-order {
  display: grid;
  grid-template-columns: repeat(2, 38px);
  gap: 5px;
}

.quick-preset-order button {
  min-width: 38px;
  padding: 6px;
  font-size: 17px;
  line-height: 1;
}

.tts-diagnostics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tts-diagnostic-row,
.tts-diagnostics p {
  min-height: 34px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--item);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.tts-diagnostic-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tts-diagnostic-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.tts-commercial-note {
  margin-top: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.tts-diagnostic-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tts-diagnostic-row strong {
  color: var(--ink);
}

.tts-diagnostic-row.ready {
  border-color: var(--accent);
  background: var(--active-soft);
  color: var(--accent-strong);
}

.tts-diagnostic-row.pending {
  border-color: color-mix(in srgb, var(--warning) 45%, var(--line));
}

.io-settings-card {
  grid-column: 1 / -1;
}

.remote-amp-card,
.remote-monitor-card {
  grid-column: 1 / -1;
}

#settingsContent[data-settings-section="io"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

#settingsContent[data-settings-section="io"] .io-settings-card {
  grid-column: 1 / -1;
  max-height: none;
  overflow: visible;
  display: block;
}

.hardware-mode-card {
  grid-column: 1 / -1;
  /* 하드웨어 모드는 안전 관련 설정이므로 같은 I/O 구역 안에서도 매핑 표와
     시각적으로 분리해 현재 모드를 먼저 확인하게 한다. */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--panel);
}

.hardware-mode-card.real-mode {
  border-color: color-mix(in srgb, var(--warning) 46%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 68%),
    var(--panel);
}

.hardware-mode-card.error {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
}

.hardware-mode-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  gap: 12px;
  align-items: stretch;
}

.hardware-mode-choice {
  display: grid;
  gap: 10px;
}

.hardware-mode-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--item);
}

.hardware-mode-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.hardware-mode-option.real:has(input:checked) {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--accent));
  background: color-mix(in srgb, var(--warning) 13%, var(--item));
}

.hardware-mode-option input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

.hardware-mode-option strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.hardware-mode-option small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.hardware-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  align-content: start;
}

.hardware-field-grid label {
  min-width: 0;
}

.hardware-field-grid label span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.hardware-runtime-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.hardware-runtime-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item);
}

.hardware-runtime-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.hardware-runtime-grid strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hardware-mode-card.error .hardware-runtime-grid div:nth-child(2) strong {
  color: var(--danger);
}

#settingsContent[data-settings-section="io"] .remote-amp-card,
#settingsContent[data-settings-section="io"] .remote-monitor-card {
  grid-column: auto;
}

#settingsContent[data-settings-section="io"] .remote-monitor-card {
  max-height: 282px;
  display: flex;
  flex-direction: column;
}

#settingsContent[data-settings-section="io"] .remote-monitor-card > .info-tile-grid {
  display: none;
}

#settingsContent[data-settings-section="io"] .info-tile {
  min-height: 84px;
  padding: 10px;
}

#settingsContent[data-settings-section="io"] .info-tile strong {
  font-size: 14px;
}

#settingsContent[data-settings-section="io"] .info-tile span {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.38;
}

#settingsContent[data-settings-section="io"] .health-list {
  max-height: 92px;
  overflow: auto;
  padding-right: 2px;
}

#settingsContent[data-settings-section="io"] .health-row {
  min-height: 40px;
  padding: 7px 9px;
}

#settingsContent[data-settings-section="io"] .io-settings-grid {
  grid-template-columns: minmax(270px, 0.78fr) minmax(300px, 0.9fr) minmax(500px, 1.42fr);
  align-items: stretch;
  min-height: 0;
  overflow: visible;
  gap: 14px;
}

#settingsContent[data-settings-section="io"] .io-panel {
  min-height: 0;
  padding: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--item-soft)), var(--item-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

#settingsContent[data-settings-section="io"] .io-panel-title {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
}

#settingsContent[data-settings-section="io"] .io-list {
  min-height: 170px;
  max-height: min(38vh, 460px);
  overflow: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

#settingsContent[data-settings-section="io"] .io-list::-webkit-scrollbar {
  width: 8px;
}

#settingsContent[data-settings-section="io"] .io-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}

#settingsContent[data-settings-section="io"] .io-row,
#settingsContent[data-settings-section="io"] .io-row.contact {
  align-items: stretch;
}

#settingsContent[data-settings-section="io"] .io-row {
  grid-template-columns: 56px minmax(0, 1fr) 112px;
  align-items: center;
  min-height: 58px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 44%),
    var(--item);
}

#settingsContent[data-settings-section="io"] .io-row.contact {
  grid-template-columns: 58px minmax(150px, 1.05fr) minmax(118px, 0.82fr) minmax(128px, 0.88fr) 96px;
  align-items: center;
}

#settingsContent[data-settings-section="io"] .io-row.contact.safety-fixed {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--danger) 14%, transparent), transparent 48%),
    var(--item);
}

#settingsContent[data-settings-section="io"] .io-row.contact.safety-fixed .io-id {
  color: #fff;
  background: color-mix(in srgb, var(--danger) 72%, #321010);
}

#settingsContent[data-settings-section="io"] .io-row.disabled {
  opacity: 0.74;
  background: color-mix(in srgb, var(--item) 78%, #000);
}

#settingsContent[data-settings-section="io"] .io-row.active {
  border-color: color-mix(in srgb, var(--accent) 76%, var(--line));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 44%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

#settingsContent[data-settings-section="io"] .io-row.enabled:not(.active) .io-id {
  background: color-mix(in srgb, var(--accent) 18%, var(--control-strong));
}

#settingsContent[data-settings-section="io"] .io-row.disabled .io-id {
  color: var(--muted);
  background: color-mix(in srgb, var(--control-strong) 70%, #000);
}

#settingsContent[data-settings-section="io"] .io-row.active .io-id {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 30%, var(--control-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 56%, transparent);
}

#settingsContent[data-settings-section="io"] .io-row select {
  grid-column: auto;
}

#settingsContent[data-settings-section="io"] .io-row input,
#settingsContent[data-settings-section="io"] .io-row select {
  min-height: 42px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: color-mix(in srgb, var(--panel) 86%, #000);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

#settingsContent[data-settings-section="io"] .io-control span {
  color: color-mix(in srgb, var(--muted) 78%, var(--accent-strong));
  font-size: 10.5px;
  letter-spacing: 0.05em;
}

#settingsContent[data-settings-section="io"] .io-row.contact .io-id {
  grid-row: auto;
}

#settingsContent[data-settings-section="io"] .io-row.contact input {
  grid-column: auto;
}

#settingsContent[data-settings-section="io"] .io-row.contact select[data-field="enabled"] {
  grid-column: auto;
}

#settingsContent[data-settings-section="io"] .io-row.contact .toggle-chip {
  grid-column: 2;
}

#settingsContent[data-settings-section="io"] .io-actions,
#settingsContent[data-settings-section="io"] #ioSettingsStatus {
  margin-top: 8px;
}

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

.info-tile {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--item-soft);
}

.info-tile strong,
.info-tile span {
  display: block;
}

.info-tile strong {
  font-size: 15px;
}

.info-tile span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.health-summary-grid {
  margin-bottom: 12px;
}

.health-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.health-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.55fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--item);
}

.health-row strong,
.health-row span {
  min-width: 0;
}

.health-row strong {
  font-size: 13px;
}

.health-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.health-badge {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 9px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

.health-row.ok .health-badge,
#healthStatusPill.ok {
  background: var(--active-soft);
  color: var(--accent-strong);
}

.health-row.warn .health-badge,
#healthStatusPill.warn {
  background: color-mix(in srgb, var(--warning) 18%, var(--control-strong));
  color: var(--warning);
}

.health-row.error .health-badge,
#healthStatusPill.error {
  background: var(--danger-soft);
  color: var(--danger);
}

.io-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.io-panel-tabs {
  display: none;
}

.io-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item-soft);
  padding: 12px;
}

.io-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.io-panel-title strong {
  font-size: 15px;
}

.io-panel-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.io-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.io-output-assignment {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(230px, 1.25fr);
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--item));
}

.io-output-assignment label,
.io-output-assignment fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.io-output-assignment-power {
  display: grid;
  gap: 5px;
}

.io-output-assignment span,
.io-output-assignment legend {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}

.io-output-assignment select {
  width: 100%;
  min-height: 44px;
}

.io-output-assignment select.mapping-conflict {
  border-color: var(--danger);
}

.io-output-assignment small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.35;
}

.io-output-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
  gap: 5px;
  margin-top: 5px;
}

.io-output-choice {
  position: relative;
  display: block;
}

.io-output-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.io-output-choice span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--muted);
  cursor: pointer;
}

.io-output-choice input:checked + span {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: color-mix(in srgb, var(--accent) 24%, var(--control-strong));
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.io-output-choice input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.io-output-choice input:disabled + span {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 760px) {
  .io-output-assignment {
    grid-template-columns: 1fr;
  }
}

.io-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 118px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
}

.io-row.contact {
  grid-template-columns: 58px minmax(120px, 1fr) 130px minmax(120px, 0.75fr) 92px;
}

.io-id {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
}

.io-row input,
.io-row select {
  min-height: 42px;
  padding: 8px 10px;
  font-size: 13px;
}

.io-control {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.io-control span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.io-control input,
.io-control select {
  min-height: 40px;
}

.io-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.media-control-card,
.media-library-card,
.playlist-card {
  min-height: 0;
}

.media-library-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.playlist-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.media-control-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.upload-box {
  display: grid;
  gap: 8px;
}

.file-picker-button {
  display: grid;
  place-items: center;
  min-height: 64px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}

.file-picker-button.disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.file-picker-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.media-control-card .file-picker-button span {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.upload-status {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.upload-status[data-kind="success"] {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.upload-status[data-kind="error"] {
  border-color: var(--danger);
  color: var(--danger);
}

.media-control-card label span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.media-action-grid,
.playlist-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mic-control-panel {
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 52%),
    color-mix(in srgb, var(--warning) 8%, var(--item));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}

.mic-control-panel.active {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--warning));
  background: color-mix(in srgb, var(--warning) 16%, var(--danger-soft));
}

.mic-control-panel.permission-denied {
  border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 58%, var(--item));
}

.mic-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mic-control-head strong {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 1000;
}

.mic-control-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 22%, var(--control));
  color: var(--ink);
  font-size: 12px;
  font-weight: 1000;
}

.mic-control-panel.active .mic-control-head > span {
  background: var(--danger);
  color: #fff;
}

.mic-control-panel.permission-denied .mic-control-head > span {
  background: color-mix(in srgb, var(--danger) 82%, #fff 8%);
  color: #fff;
}

.mic-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  gap: 10px;
}

.mic-broadcast-button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, transparent);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(135deg, #d07b17 0%, #f0ad39 58%, #f6ca68 100%);
  color: #10110a;
  box-shadow:
    0 14px 30px rgba(215, 146, 31, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -12px 24px rgba(122, 74, 11, 0.12);
}

.mic-broadcast-button::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.mic-broadcast-button > * {
  position: relative;
  z-index: 1;
}

.mic-broadcast-button strong {
  font-size: 21px;
  font-weight: 1000;
  line-height: 1.1;
}

.mic-broadcast-button span {
  color: rgba(16, 17, 10, 0.78);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.mic-broadcast-button:hover {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.48), transparent 28%),
    linear-gradient(135deg, #c97618 0%, #e89f2e 58%, #f2bf56 100%);
}

.mic-broadcast-button.active {
  color: #fff;
  animation: micBroadcastPulse 1s ease-in-out infinite;
}

.mic-broadcast-button.pending:not(.active) {
  background: linear-gradient(135deg, #8b6a2e, #c79435);
  color: #fff;
}

.mic-broadcast-button.permission-denied:not(.active) {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: linear-gradient(135deg, #6f2d34, #b44d50);
  color: #fff;
  box-shadow: 0 12px 28px rgba(190, 72, 76, 0.2);
}

.mic-broadcast-button.active span {
  color: rgba(255, 255, 255, 0.86);
}

.mic-broadcast-button.pending span {
  color: rgba(255, 255, 255, 0.84);
}

.mic-broadcast-button.permission-denied span {
  color: rgba(255, 255, 255, 0.88);
}

body[data-theme="dark"] .mic-broadcast-button {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, #b96817 0%, #d99428 60%, #e9b95f 100%);
  color: #fff8e6;
  box-shadow:
    0 14px 34px rgba(224, 170, 63, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -12px 24px rgba(45, 28, 6, 0.18);
}

body[data-theme="dark"] .mic-broadcast-button span {
  color: rgba(255, 248, 230, 0.78);
}

.mic-level-meter {
  display: grid;
  grid-template-rows: minmax(42px, 1fr) auto;
  place-items: center;
  min-height: 76px;
  padding: 6px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--control) 84%, var(--warning) 8%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 7%, transparent);
}

.mic-level-track {
  position: relative;
  width: 13px;
  height: 100%;
  min-height: 42px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(to top, rgba(255, 255, 255, 0.06), transparent),
    color-mix(in srgb, var(--bg) 58%, #000 12%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}

.mic-level-track span {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(to top, #42d392 0%, #8ee36f 56%, #f2cf49 78%, #ef6b5d 100%);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 44%, transparent);
  transition: height 0.08s linear;
}

.mic-level-meter small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;
}

.mic-level-meter.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.mic-level-meter.blocked {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: color-mix(in srgb, var(--danger-soft) 72%, var(--control));
}

.mic-level-meter.blocked .mic-level-track span {
  height: 0% !important;
}

.mic-level-meter.blocked small {
  color: color-mix(in srgb, var(--danger) 84%, #fff 8%);
}

.mic-level-meter.hot .mic-level-track span {
  box-shadow: 0 0 14px rgba(242, 207, 73, 0.42);
}

.mic-level-meter.peak .mic-level-track span {
  box-shadow: 0 0 16px rgba(239, 107, 93, 0.52);
}

.playlist-player {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--item-soft);
}

.playlist-player-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.playlist-player-row:last-child {
  grid-template-columns: 1fr;
}

.playlist-player button {
  min-height: 50px;
  padding: 8px 10px;
  font-weight: 900;
}

.playlist-player label span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.playlist-player input[type="range"] {
  min-height: 42px;
  padding: 0;
  accent-color: var(--accent);
}

.asset-library,
.playlist-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  max-height: calc(100vh - 260px);
  overflow: auto;
  padding-right: 2px;
  scrollbar-gutter: stable;
}

.media-library-card .asset-library,
.playlist-card .playlist-list {
  height: 100%;
  max-height: none;
}

.asset-row,
.playlist-row,
.empty-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--item);
}

.asset-row.pinned {
  border-color: var(--accent);
  background: var(--active-soft);
}

.playlist-row.current {
  border-color: var(--accent);
  background: var(--active-soft);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent);
}

.asset-row.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.asset-row strong,
.playlist-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-row span,
.playlist-row span,
.empty-row {
  color: var(--muted);
  font-size: 13px;
}

.asset-actions,
.playlist-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.asset-actions button,
.playlist-row-actions button {
  min-height: 44px;
  padding: 8px 10px;
  white-space: nowrap;
}

.asset-actions .icon-button,
.playlist-row-actions .icon-button,
.schedule-actions .icon-button {
  width: 44px;
  min-width: 44px;
  padding: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 950;
}

.media-library-card .asset-row {
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  gap: 10px;
}

.media-library-card .asset-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.media-library-card .asset-actions {
  display: grid;
  grid-template-columns: 46px minmax(70px, 0.92fr) minmax(70px, 0.92fr) minmax(78px, 1fr);
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  justify-content: stretch;
}

.media-library-card .asset-actions button {
  min-height: 44px;
  padding: 6px 8px;
  font-size: 12px;
}

.media-library-card .asset-actions .icon-button {
  width: 46px;
  min-width: 46px;
}

.asset-more {
  position: relative;
  min-width: 0;
}

.asset-more-toggle {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 900;
}

.asset-more.open .asset-more-toggle {
  background: var(--accent);
  color: #fff;
}

.asset-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  gap: 6px;
  width: 136px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.asset-more-menu button {
  width: 100%;
}

.icon-button.active {
  background: var(--accent);
  color: #fff;
}

.playlist-actions {
  margin-top: 12px;
}

.schedule-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

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

.schedule-actions button {
  min-height: 42px;
  padding: 8px 10px;
}

.schedule-item strong {
  display: block;
}

.log-list {
  flex: 1;
  max-height: none;
  overflow: auto;
}

.log-item {
  display: block;
  min-height: 54px;
  padding: 0;
  border-left: 6px solid var(--accent);
}

.log-item > summary {
  display: grid;
  grid-template-columns: 142px 72px 110px minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.log-item > summary::-webkit-details-marker {
  display: none;
}

.log-item[open] > summary {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.log-item time {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.log-item .log-level {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--control-strong);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.log-item .log-actor {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-item .log-expand-hint {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.log-item[open] .log-expand-hint::after {
  content: " 닫기";
}

.log-detail-grid {
  display: grid;
  gap: 1px;
  padding: 10px 12px 12px;
  background: color-mix(in srgb, var(--panel) 88%, #000);
}

.log-detail-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 5px;
}

.log-detail-row:nth-child(odd) {
  background: color-mix(in srgb, var(--item) 82%, transparent);
}

.log-detail-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.log-detail-row pre {
  margin: 0;
  color: var(--ink);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.log-screen-help {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.log-export-date,
.log-export-format {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--control);
  color: var(--ink);
  padding: 7px 9px;
}

.optical-log-open-btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent);
}

.support-upload-open-btn {
  border-color: color-mix(in srgb, var(--accent) 78%, #fff 10%);
  background: color-mix(in srgb, var(--accent) 76%, #09231c);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.support-upload-open-btn:hover {
  filter: brightness(1.08);
}

.optical-log-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 10, 9, 0.82);
  backdrop-filter: blur(10px);
}

/* QR 전송 중에는 화면 전체의 평균 휘도와 QR 크기를 높이고, 반투명 블러로 인한
   합성 부하를 제거한다. 물리 패널 밝기는 브라우저가 직접 바꿀 수 없으므로
   wake lock과 고대비 표현을 함께 사용한다. */
body.optical-transfer-active .optical-log-overlay {
  padding: 10px;
  background: #eef4f1;
  backdrop-filter: none;
}

body.optical-transfer-active .optical-log-dialog {
  width: min(1240px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  border-color: #83a99c;
  background: #f8fbfa;
  color: #102822;
  box-shadow: 0 18px 60px rgba(0, 34, 25, 0.24);
}

body.optical-transfer-active .optical-log-head .eyebrow,
body.optical-transfer-active .optical-log-guide ol,
body.optical-transfer-active .optical-log-meta dt,
body.optical-transfer-active .optical-security-note {
  color: #49665e;
}

body.optical-transfer-active .optical-log-head button,
body.optical-transfer-active .optical-log-guide,
body.optical-transfer-active .optical-rate-control,
body.optical-transfer-active .optical-log-meta > div {
  border-color: #b8cec7;
  background: #eaf3f0;
  color: #102822;
}

body.optical-transfer-active .optical-log-meta dd,
body.optical-transfer-active .optical-rate-control span {
  color: #17362d;
}

body.optical-transfer-active .optical-rate-control select {
  border-color: #6f998b;
  background: #123c31;
  color: #fff;
}

body.optical-transfer-active .optical-log-content {
  grid-template-columns: minmax(540px, 1.35fr) minmax(330px, 0.65fr);
}

body.optical-transfer-active .optical-qr-stage {
  min-height: min(640px, calc(100vh - 126px));
  padding: 22px;
  border: 2px solid #d5e3de;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #fff;
}

body.optical-transfer-active .optical-qr-stage svg {
  width: min(100%, 610px);
}

.optical-log-overlay[hidden] {
  display: none;
}

.optical-log-dialog {
  width: min(920px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: 12px;
  padding: 18px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.58);
}

.optical-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.optical-log-head h2 {
  margin: 3px 0 0;
  font-size: 26px;
}

.optical-log-content {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(280px, 0.9fr);
  gap: 18px;
  align-items: stretch;
}

.optical-qr-stage {
  display: grid;
  place-items: center;
  min-height: 470px;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.optical-qr-stage svg {
  display: block;
  width: min(100%, 470px);
  height: auto;
  shape-rendering: crispEdges;
}

.optical-qr-placeholder {
  max-width: 320px;
  color: #16332d;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.55;
  text-align: center;
}

.optical-qr-placeholder.error {
  color: #b72c2c;
}

.optical-log-guide {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control);
}

.optical-log-guide > strong {
  font-size: 18px;
}

.optical-scan-state,
.optical-scan-tip {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.5;
}

.optical-scan-tip {
  border-color: color-mix(in srgb, var(--warning) 50%, var(--line));
  background: color-mix(in srgb, var(--warning) 10%, var(--panel));
  font-weight: 700;
}

body.optical-transfer-active .optical-scan-state,
body.optical-transfer-active .optical-scan-tip {
  border-color: #8fc8b3;
  background: #dff3ea;
  color: #17362d;
}

body.optical-transfer-active .optical-scan-tip {
  border-color: #ddc16e;
  background: #fff4cf;
  color: #5c4814;
}

.optical-log-guide ol {
  margin: 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.7;
}

.optical-log-meta {
  display: grid;
  gap: 7px;
  margin: 0;
}

.optical-log-meta > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.optical-log-meta dt {
  color: var(--muted);
}

.optical-log-meta dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.optical-log-actions {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.optical-rate-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 50px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--depth-item, inset 0 1px 0 rgba(255, 255, 255, 0.08));
}

.optical-rate-control span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.optical-rate-control select {
  min-height: 38px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 900;
}

.optical-log-actions button {
  min-height: 50px;
  font-weight: 900;
}

.optical-security-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.optical-security-note.error {
  color: var(--danger);
  font-weight: 800;
}

.support-upload-dialog {
  border-color: color-mix(in srgb, var(--accent) 78%, #fff 8%);
}

.support-claim-qr {
  min-height: 430px;
}

.support-upload-guide {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, var(--control)), var(--control));
}

.support-upload-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.support-upload-actions button {
  min-height: 50px;
  font-weight: 900;
}

@media (max-width: 760px), (max-height: 720px) {
  .optical-log-content {
    grid-template-columns: 1fr;
  }

  .optical-qr-stage {
    min-height: 330px;
  }

  .optical-qr-stage svg {
    width: min(100%, 350px);
  }

  .optical-log-actions {
    grid-template-columns: 1fr 1fr;
  }

  .optical-rate-control {
    grid-column: 1 / -1;
  }
}

@media (min-width: 761px) and (max-height: 720px) {
  body.optical-transfer-active .optical-log-content {
    grid-template-columns: minmax(470px, 1.25fr) minmax(300px, 0.75fr);
  }

  body.optical-transfer-active .optical-qr-stage {
    min-height: calc(100vh - 122px);
  }

  body.optical-transfer-active .optical-qr-stage svg {
    width: min(100%, calc(100vh - 150px));
  }
}

.log-item strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.log-item.error {
  border-color: #e4aaa5;
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.log-item.warn {
  border-color: #ebd39d;
  border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--panel));
}

@media (max-width: 900px) {
  .log-item > summary {
    grid-template-columns: 112px 62px 86px minmax(0, 1fr);
  }

  .log-item .log-expand-hint {
    display: none;
  }
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .side-panel > .emergency-card {
    flex: initial;
  }

  .brand-block {
    grid-column: 1 / -1;
  }

  .channel-matrix {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .screen-channel-matrix {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (min-width: 900px) and (max-width: 1400px) {
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .side-panel {
    gap: 10px;
    min-height: calc(100vh - 24px);
  }

  .emergency-card {
    gap: 4px;
  }

  .side-panel > .nav-card {
    display: flex;
    margin-top: 17px;
    min-height: 100px;
    flex-direction: column;
    justify-content: center;
  }

  .main-panel {
    grid-template-rows: auto minmax(0, 1.55fr) minmax(132px, 0.45fr);
    gap: 12px;
    min-height: calc(100vh - 24px);
  }

  .status-card,
  .panel,
  .topbar {
    padding: 14px;
  }

  .brand-logo,
  .brand-mark {
    width: 50px;
    height: 50px;
  }

  .company-logo-picture,
  .company-logo {
    width: 138px;
  }

  .company-logo-picture {
    flex-basis: 138px;
  }

  .brand-block h1 {
    font-size: 20px;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(242px, 1fr) auto;
    align-items: center;
    min-height: 90px;
    gap: 16px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .topbar-actions {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .topbar-tool-group > button,
  .topbar-tool-group .user-pill {
    min-height: 42px;
    padding: 7px 9px;
  }

  .emergency-card .button-row {
    gap: 6px;
  }

  .emergency-mic-status {
    padding: 6px;
  }

  .emergency-card .emergency-mic-meter {
    min-height: 52px;
  }

  .home-preview-list {
    gap: 5px;
    margin: 10px 0 6px;
  }

  .home-preview-row,
  .home-preview-empty {
    padding: 7px 9px;
  }

  .emergency-card .button-row button:not(#fireToggleBtn) {
    min-height: 48px;
  }

  .control-grid,
  .lower-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 12px;
  }

  .media-layout {
    grid-template-columns: minmax(260px, 0.62fr) minmax(500px, 1.45fr) minmax(300px, 0.78fr);
    gap: 12px;
  }

  body:not(.large-workspace) .screen-page.active {
    gap: 14px;
    scroll-padding: 14px;
  }

  body:not(.large-workspace) .screen-card {
    padding: 15px;
  }

  body:not(.large-workspace) .screen-card-title {
    margin-bottom: 14px;
  }

  body:not(.large-workspace) .media-library-card .asset-library,
  body:not(.large-workspace) .playlist-card .playlist-list {
    gap: 9px;
    padding-right: 6px;
  }

  body:not(.large-workspace) .media-library-card .asset-row {
    min-height: 64px;
    padding: 11px 12px;
  }

  body:not(.large-workspace) .media-library-card .asset-actions {
    grid-template-columns: 46px repeat(3, minmax(74px, 1fr));
    gap: 7px;
  }

  body:not(.large-workspace) .playlist-player {
    margin-top: 10px;
  }

  body:not(.large-workspace) .schedule-form {
    gap: 12px;
  }

  body:not(.large-workspace) .schedule-audio-section,
  body:not(.large-workspace) .schedule-tts-section,
  body:not(.large-workspace) .schedule-advanced-panel {
    padding: 12px;
  }

  body:not(.large-workspace) .schedule-field {
    gap: 8px;
  }

  body:not(.large-workspace) .regular-alert-layout,
  body:not(.large-workspace) .regular-alert-editor,
  body:not(.large-workspace) .regular-alert-groups {
    gap: 10px;
  }

  .channel-matrix {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }

  .zone-channel-matrix {
    grid-template-columns: minmax(0, 1fr);
  }

  .screen-channel-matrix {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .device-list {
    max-height: 210px;
    overflow: auto;
  }

  .log-list {
    max-height: 260px;
  }
}

@media (max-width: 780px) {
  .regular-alert-metrics,
  .regular-alert-timeline-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .regular-alert-head-actions,
  .regular-alert-calendar-head,
  .regular-alert-list-head,
  .regular-alert-template-head {
    align-items: stretch;
    flex-direction: column;
  }

  .regular-alert-group {
    grid-template-columns: 1fr;
  }

  .regular-alert-group-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .regular-alert-move-guide {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .regular-alert-move-guide button {
    grid-column: 1 / -1;
  }

  .regular-alert-group-card {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .regular-alert-card-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .regular-alert-card-actions em {
    justify-self: start;
  }

  .schedule-workspace-tabs,
  .schedule-overview,
  .schedule-metric-grid,
  .schedule-workflow {
    grid-template-columns: 1fr;
  }

  .schedule-workspace-tabs button small,
  .schedule-workflow button small {
    white-space: normal;
  }

  .schedule-new-top {
    grid-column: auto;
  }

  .schedule-dashboard-actions,
  .schedule-editor-toolbar,
  .schedule-target-picker {
    grid-template-columns: 1fr;
  }

  .schedule-dashboard-actions small {
    white-space: normal;
  }

  .schedule-dashboard-actions em {
    display: none;
  }

  .schedule-dashboard-upcoming-row {
    grid-template-columns: 30px minmax(0, 1fr) 44px;
  }

  .schedule-upcoming-time,
  .schedule-upcoming-main {
    grid-column: 2;
  }

  .schedule-dashboard-empty {
    grid-template-columns: 1fr;
  }

  .schedule-dashboard-empty button {
    grid-column: auto;
    grid-row: auto;
  }

  .schedule-editor-toolbar > strong {
    justify-self: start;
  }

  .screen-page[data-screen-page="settings"].active {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .settings-menu-grid {
    max-height: 220px;
  }

  .app-shell {
    padding: 14px;
  }

  .side-panel,
  .control-grid,
  .lower-grid,
  .help-entry-actions,
  .manual-layout,
  .assistant-layout,
  .assistant-setup-grid,
  .needle-routing-surface,
  .assistant-quick,
  .assistant-input-row,
  .io-row,
  .io-row.contact {
    grid-template-columns: 1fr;
  }

  .topbar,
  .panel-heading,
  .tts-box,
  .zone-editor,
  .schedule-form {
    grid-template-columns: 1fr;
  }

  .schedule-save-section {
    grid-template-columns: 1fr;
  }

  .schedule-recurrence-detail-grid,
  .schedule-exception-result-grid,
  .schedule-date-entry-grid {
    grid-template-columns: 1fr;
  }

  .topbar,
  .screen-header,
  .panel-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar-actions,
  .screen-header-actions,
  .tts-box,
  .zone-editor,
  .confirm-actions,
  .health-row {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
  }

  .topbar-tool-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .screen-clock {
    justify-items: start;
    margin-left: 0;
    min-width: 150px;
  }

  .channel-matrix {
    grid-template-columns: 1fr;
  }

  .screen-channel-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-tts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-main-section,
  .schedule-audio-section {
    grid-template-columns: 1fr;
  }

  .schedule-name-field,
  .schedule-asset-field,
  .schedule-text-field,
  .schedule-main-section .schedule-field:not(.schedule-name-field) {
    grid-column: auto;
  }

  .assistant-fab {
    min-width: 98px;
    min-height: 46px;
    padding: 6px 10px 6px 7px;
  }

  .playlist-player-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1400px) and (max-height: 920px) {
  body:not(.large-workspace) .assistant-layout {
    gap: 10px;
    overflow: auto;
  }

  body:not(.large-workspace) .assistant-chat-card {
    padding: 12px;
    max-height: calc(100vh - 118px);
  }

  body:not(.large-workspace) .assistant-messages {
    min-height: 190px;
    height: clamp(220px, 34vh, 310px);
    max-height: 310px;
  }

  body:not(.large-workspace) .assistant-quick {
    gap: 6px;
    margin-bottom: 8px;
  }

  body:not(.large-workspace) .assistant-quick button {
    min-height: 40px;
    padding: 6px 8px;
    font-size: 12px;
  }

  body:not(.large-workspace) .assistant-message {
    max-width: 92%;
    padding: 9px 10px;
  }

  body:not(.large-workspace) .assistant-message p {
    line-height: 1.48;
    font-size: 13px;
  }

  body:not(.large-workspace) .assistant-input-row {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
    margin-top: 8px;
  }

  body:not(.large-workspace) .settings-layout:not(.overview-mode):not(.detail-mode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }

  body:not(.large-workspace) .settings-layout:not(.overview-mode):not(.detail-mode) > [data-settings-section-content]:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    cursor: pointer;
  }

  body:not(.large-workspace) .settings-layout:not(.overview-mode):not(.detail-mode) > [data-settings-section-content]:not([hidden]) > *:not(.screen-card-title) {
    display: none !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) {
    grid-template-columns: 1fr;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > [data-settings-section-content]:not([hidden]) {
    min-height: 0;
  }

  /* 10.1인치에서는 대부분의 설정 카드를 제목으로 접는다. 단, I/O를 만지기 전
     시뮬레이터/실제 모드를 확인해야 하므로 하드웨어 카드는 열린 상태를 유지한다. */
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .hardware-mode-card:not([hidden]),
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .io-settings-card:not([hidden]) {
    display: block;
    cursor: default;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .hardware-mode-card:not([hidden]) > *:not(.screen-card-title),
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .io-settings-card:not([hidden]) > *:not(.screen-card-title) {
    display: block !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .hardware-mode-card:not([hidden]) > .hardware-mode-layout,
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .hardware-mode-card:not([hidden]) > .hardware-runtime-grid {
    display: grid !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .io-settings-card:not([hidden]) > .io-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .remote-amp-card:not([hidden]),
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .remote-monitor-card:not([hidden]) {
    display: none !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) .io-panel-contact {
    grid-column: 1 / -1;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) .io-list {
    max-height: 190px;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) .io-panel-contact .io-list {
    max-height: 210px;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) .io-settings-card .settings-detail-open {
    display: inline-grid;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > [data-settings-section-content]:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    cursor: pointer;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > [data-settings-section-content]:not([hidden]) > *:not(.screen-card-title) {
    display: none !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .remote-amp-card:not([hidden]),
  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .remote-monitor-card:not([hidden]) {
    display: flex !important;
  }

  body:not(.large-workspace) .settings-layout:not(.overview-mode):not(.detail-mode) .settings-detail-open {
    display: inline-grid;
    place-items: center;
  }

  body:not(.large-workspace) .screen-page[data-screen-page="settings"].active.settings-detail-page {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  body:not(.large-workspace) .screen-page[data-screen-page="settings"].active.settings-detail-page .settings-menu-grid {
    display: none !important;
  }

  body:not(.large-workspace) .settings-layout.detail-mode {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
    align-content: start;
    overflow: visible;
  }

  body:not(.large-workspace) .settings-layout.detail-mode > [data-settings-section-content]:not(.detail-active) {
    display: none !important;
  }

  body:not(.large-workspace) .settings-layout.detail-mode > .detail-active {
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  body:not(.large-workspace) .settings-layout.detail-mode .settings-detail-open {
    display: none;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="tts"] .tts-form-grid,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="display"] .secondary-display-grid,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .compact-settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="tts"] .tts-quick-panel,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .pre-alert-console,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-settings-grid {
    gap: 12px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .pre-alert-console {
    grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.1fr);
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .eq-control-strip {
    grid-template-columns: minmax(260px, 0.75fr) minmax(500px, 1.25fr);
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .eq-band-grid {
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: 8px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .eq-band {
    min-height: 254px;
    grid-template-rows: auto 68px 130px auto;
    padding: 8px 6px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .eq-rta-track {
    height: 68px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="audio"] .eq-band input[type="range"] {
    height: 130px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-settings-card.detail-active,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .remote-monitor-card.detail-active {
    max-height: none;
    display: block;
    overflow: auto;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-settings-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    overflow: visible;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-panel-contact {
    grid-column: 1 / -1;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-panel {
    padding: 15px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row {
    min-height: 64px;
    padding: 9px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row.contact {
    grid-template-columns: 62px minmax(190px, 1.1fr) minmax(140px, 0.85fr) minmax(140px, 0.85fr) 104px;
    gap: 10px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row input,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row select {
    min-height: 46px;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-list,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .health-list {
    max-height: none;
  }

  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .remote-monitor-card > .info-tile-grid {
    display: grid;
  }
}

@media (max-width: 1100px) {
  .regular-alert-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .regular-alert-timeline {
    grid-template-columns: 1fr;
  }

  .regular-alert-group-card {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .regular-alert-head,
  .regular-alert-calendar-head,
  .regular-alert-list-head {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .regular-alert-calendar-head,
  .regular-alert-list-head {
    flex-direction: column;
  }

  .regular-alert-head-actions {
    justify-content: flex-start;
  }

  .schedule-dashboard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-overview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }

  .schedule-new-top {
    grid-column: 1 / -1;
    min-height: 52px;
  }

  .schedule-workflow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .regular-alert-layout,
  .regular-alert-editor,
  .regular-alert-form-grid,
  .regular-alert-groups,
  .account-manager-layout,
  .account-access-grid,
  .permission-grid,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .account-form-grid,
  body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="accounts"] .permission-grid {
    grid-template-columns: 1fr;
  }

  .permission-section.base,
  .permission-section.broadcast,
  .permission-section.admin {
    grid-column: auto;
    grid-row: auto;
  }

  .regular-alert-weekdays,
  .regular-alert-day-section,
  .regular-alert-time-section,
  .regular-alert-summary,
  .regular-alert-actions,
  .regular-alert-status {
    grid-column: 1 / -1;
  }

  .regular-alert-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .regular-alert-day-presets,
  .regular-alert-time-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .regular-alert-time-meta {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .regular-alert-time-meta > strong {
    align-self: center;
    text-align: left;
  }

  .regular-alert-time-entry {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .regular-alert-time-adjust {
    grid-column: 2;
  }

  .regular-alert-bulk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .regular-alert-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-form {
    grid-template-columns: 1fr;
  }

  .schedule-main-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-main-section .schedule-field:not(.schedule-name-field) {
    grid-column: span 1;
  }

  .schedule-name-field,
  .schedule-asset-field,
  .schedule-text-field {
    grid-column: span 2;
  }

  .schedule-exact-time-editor {
    grid-template-columns: minmax(150px, 0.45fr) minmax(0, 1fr);
  }

  .schedule-exact-time-editor .schedule-time-chips {
    grid-column: 1 / -1;
  }

  .schedule-interval-time-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-recurrence-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-recurrence-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .schedule-exception-range-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-excluded-weekday-panel,
  .schedule-exception-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-exception-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-skip-date-editor {
    grid-template-columns: minmax(180px, 0.5fr) auto;
  }

  .schedule-skip-date-editor .schedule-time-chips {
    grid-column: 1 / -1;
  }

  .schedule-advanced-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .weekday-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mixer-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .mixer-list {
    grid-template-columns: 1fr;
  }

  .mixer-row strong {
    text-align: left;
  }

  .eq-console-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .eq-control-strip {
    grid-template-columns: 1fr;
  }

  .eq-live-panel {
    flex-direction: column;
  }

  .eq-band-grid {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
  }

  .mute-check {
    justify-content: flex-start;
  }

  .quick-preset-form,
  .quick-preset-row {
    grid-template-columns: 1fr;
  }

  .quick-preset-row span {
    white-space: normal;
  }
}

body.large-workspace .screen-page[data-screen-page="settings"].active {
  grid-template-columns: 300px minmax(0, 1fr);
}

body.large-workspace .settings-layout:not(.overview-mode) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

body.large-workspace .settings-detail-open {
  display: none !important;
}

body.large-workspace .secondary-display-card,
body.large-workspace .tts-settings-card,
body.large-workspace .io-settings-card {
  grid-column: 1 / -1;
}

body.large-workspace .settings-form-grid,
body.large-workspace .secondary-display-grid,
body.large-workspace .tts-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.large-workspace .pre-alert-console {
  grid-template-columns: minmax(320px, 0.9fr) minmax(520px, 1.1fr);
}

body.large-workspace #settingsContent[data-settings-section="io"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-settings-card {
  max-height: none;
  overflow: visible;
  display: block;
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-settings-grid {
  grid-template-columns: minmax(280px, 0.78fr) minmax(300px, 0.86fr) minmax(520px, 1.46fr);
  overflow: visible;
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-list {
  max-height: min(42vh, 520px);
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-row {
  grid-template-columns: 58px minmax(0, 1fr) 112px;
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-row.contact {
  grid-template-columns: 58px minmax(132px, 1fr) 120px minmax(112px, 0.8fr) 92px;
}

body.large-workspace #settingsContent[data-settings-section="io"] .io-row select,
body.large-workspace #settingsContent[data-settings-section="io"] .io-row.contact select,
body.large-workspace #settingsContent[data-settings-section="io"] .io-row.contact .toggle-chip {
  grid-column: auto;
}

body.large-workspace #settingsContent[data-settings-section="io"] .remote-monitor-card {
  max-height: none;
  display: block;
}

body.large-workspace #settingsContent[data-settings-section="io"] .remote-monitor-card > .info-tile-grid {
  display: grid;
}

@media (max-width: 1180px) {
  .media-layout,
  .zone-settings-layout,
  .zone-canvas-layout,
  .manual-layout,
  .assistant-layout {
    grid-template-columns: 1fr;
  }

  .settings-layout,
  .settings-form-grid,
  .device-identity-grid,
  .device-info-form-grid,
  .pre-alert-console,
  .pre-alert-source-grid,
  .assistant-settings-grid,
  .tts-status-grid,
  .tts-form-grid,
  .io-settings-grid,
  .info-tile-grid,
  .device-nickname-row {
    grid-template-columns: 1fr;
  }

  .device-info-form-grid label.wide {
    grid-column: auto;
  }

  .device-registration-note {
    grid-template-columns: 1fr;
  }

  #settingsContent[data-settings-section="io"] {
    grid-template-columns: 1fr;
  }

  #settingsContent[data-settings-section="io"] .remote-amp-card,
  #settingsContent[data-settings-section="io"] .remote-monitor-card {
    grid-column: 1 / -1;
  }

  #settingsContent[data-settings-section="io"] .remote-monitor-card {
    max-height: none;
    display: block;
  }

  #settingsContent[data-settings-section="io"] .remote-monitor-card > .info-tile-grid {
    display: grid;
  }

  #settingsContent[data-settings-section="io"] .io-settings-card {
    max-height: none;
    overflow: visible;
  }

  #settingsContent[data-settings-section="io"] .io-settings-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  #settingsContent[data-settings-section="io"] .io-panel {
    overflow: visible;
  }

  #settingsContent[data-settings-section="io"] .io-list {
    max-height: 220px;
  }

  #settingsContent[data-settings-section="io"] .io-row {
    grid-template-columns: 58px minmax(0, 1fr) 112px;
  }

  #settingsContent[data-settings-section="io"] .io-row.contact {
    grid-template-columns: 58px minmax(120px, 1fr) 118px minmax(110px, 0.8fr) 92px;
  }

  #settingsContent[data-settings-section="io"] .io-row select,
  #settingsContent[data-settings-section="io"] .io-row.contact select,
  #settingsContent[data-settings-section="io"] .io-row.contact .toggle-chip {
    grid-column: auto;
  }

  .asset-library,
  .playlist-list {
    max-height: 320px;
  }

  .settings-overview-card {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 781px) and (max-width: 1180px) {
  .screen-page[data-screen-page="settings"].active .settings-form-grid,
  .screen-page[data-screen-page="settings"].active .assistant-settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .screen-page[data-screen-page="settings"].active .pre-alert-console {
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
  }

  .screen-page[data-screen-page="settings"].active .pre-alert-source-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .screen-page[data-screen-page="settings"].active .tts-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .screen-page[data-screen-page="settings"].active .tts-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .screen-page[data-screen-page="settings"].active .device-nickname-row {
    grid-template-columns: minmax(130px, 0.7fr) minmax(160px, 1fr);
  }
}

.screen-page.active > .log-list.screen-list {
  max-height: none;
}

@media (min-width: 900px) and (max-height: 700px) {
  html,
  body {
    height: 100%;
  }

  body:not(.screen-open) {
    overflow: hidden;
  }

  .app-shell {
    grid-template-columns: 312px minmax(0, 1fr);
    gap: 10px;
    height: 100vh;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .side-panel {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 0;
    overflow: hidden;
  }

  .main-panel {
    gap: 9px;
    min-height: 0;
    overflow: hidden;
  }

  .brand-block {
    gap: 10px;
    padding: 0;
  }

  .brand-logo,
  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .company-logo-picture,
  .company-logo {
    width: 130px;
  }

  .company-logo-picture {
    flex-basis: 130px;
  }

  .brand-block h1 {
    font-size: 18px;
  }

  .brand-block p {
    display: none;
  }

  .status-card,
  .panel,
  .topbar,
  .screen-card {
    padding: 12px;
  }

  .status-grid {
    gap: 7px;
    margin-top: 9px;
  }

  .status-grid div {
    padding: 8px;
  }

  .status-grid dt,
  .device-row span,
  .zone-item span,
  .schedule-item span,
  .log-item span {
    font-size: 11px;
  }

  .status-grid dd {
    margin-top: 2px;
    font-size: 13px;
  }

  .emergency-card {
    flex: 1 1 auto;
    min-height: 0;
    gap: 9px;
    padding: 13px;
  }

  .emergency-card h2 {
    font-size: 25px;
  }

  .emergency-card p {
    font-size: 12px;
    line-height: 1.3;
  }

  .fire-asset-line {
    display: none;
  }

  .emergency-card .button-row {
    gap: 8px;
  }

  .emergency-card .button-row button {
    min-height: 50px;
    font-size: 15px;
  }

  .emergency-card .button-row button:not(#fireToggleBtn) {
    min-height: 50px;
  }

  #fireToggleBtn {
    min-height: 70px;
    font-size: 20px;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto;
    min-height: 68px;
    gap: 10px;
  }

  .topbar h2 {
    font-size: 20px;
  }

  .topbar-actions {
    gap: 6px;
    flex-wrap: nowrap;
  }

  .topbar-actions button,
  .user-pill {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .top-clock {
    min-width: 126px;
    min-height: 46px;
    padding: 5px 9px;
  }

  .top-clock span {
    font-size: 11px;
  }

  .top-clock strong {
    font-size: 22px;
  }

  .control-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 9px;
  }

  .panel-heading {
    gap: 10px;
  }

  .panel-heading h3 {
    font-size: 16px;
  }

  .quick-tts {
    gap: 6px;
    margin-top: 9px;
  }

  .quick-tts button {
    min-height: 38px;
    padding: 6px;
    font-size: 12px;
  }

  .ai-script-panel {
    margin-top: 9px;
    padding: 9px;
  }

  .ai-script-head {
    gap: 6px;
    margin-bottom: 8px;
  }

  .ai-script-head strong {
    font-size: 13px;
  }

  #aiScriptStatus {
    max-width: 100%;
    padding: 4px 7px;
    font-size: 11px;
  }

  .ai-script-head-actions {
    flex-basis: 52%;
  }

  .ai-script-input-row {
    gap: 8px;
  }

  #aiScriptTopicInput {
    min-height: 52px;
  }

  .ai-script-side {
    min-width: 118px;
    gap: 6px;
  }

  .ai-script-results {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .ai-script-card {
    gap: 6px;
    padding: 8px;
  }

  .ai-script-card p {
    min-height: 0;
    font-size: 13px;
  }

  .ai-script-card-actions button {
    min-height: 32px;
    font-size: 11px;
  }

  .broadcast-panel .home-mic-control {
    grid-template-columns: minmax(0, 0.78fr) minmax(190px, 0.58fr);
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
  }

  .broadcast-panel .home-mic-control .mic-action-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .broadcast-panel .home-mic-control .mic-broadcast-button {
    min-height: 74px;
    padding: 10px 12px;
  }

  .broadcast-panel .home-mic-control .mic-broadcast-button strong {
    font-size: 19px;
  }

  .broadcast-panel .home-mic-control .mic-level-meter {
    min-height: 70px;
  }

  textarea {
    min-height: 76px;
  }

  #ttsText {
    height: 74px;
    min-height: 74px;
  }

  .tts-box {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
    margin-top: 9px;
  }

  .tts-actions {
    gap: 4px;
  }

  .tts-actions button {
    min-width: 96px;
    min-height: 40px;
    padding: 8px;
    font-size: 13px;
  }

  .wide-nav-button,
  .nav-hint {
    margin-top: 8px;
  }

  .zone-list {
    max-height: 145px;
    overflow: auto;
  }

  .zone-item {
    min-height: 54px;
    padding: 9px;
  }

  .channel-panel {
    min-height: 74px;
  }

  .nav-heading {
    font-size: 16px;
  }

  .selection-summary strong {
    font-size: 23px;
  }

  .lower-grid {
    gap: 8px;
  }

  .side-panel > .nav-card,
  .lower-grid .panel {
    min-height: 64px;
  }

  .screen-layer {
    padding: 12px;
  }

  .screen-page {
    height: calc(100vh - 24px);
  }

  .confirm-overlay {
    padding: 10px;
  }

  .confirm-dialog {
    width: min(500px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    padding: 16px;
  }

  .confirm-dialog h2 {
    font-size: 23px;
  }

  .confirm-dialog p {
    margin-top: 10px;
    font-size: 13px;
  }

  .confirm-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
  }

  .confirm-actions button {
    min-height: 50px;
    font-size: 15px;
  }

  .screen-page.active {
    gap: 10px;
  }

  .screen-header {
    min-height: 66px;
    padding: 10px 12px;
  }

  .screen-header h2 {
    font-size: 22px;
  }

  .screen-clock {
    min-width: 132px;
    min-height: 46px;
    padding: 5px 9px;
  }

  .screen-clock strong {
    font-size: 21px;
  }

  .screen-header-actions {
    gap: 8px;
  }

  .media-layout {
    grid-template-columns: minmax(230px, 0.58fr) minmax(460px, 1.5fr) minmax(260px, 0.76fr);
    gap: 10px;
  }

  .asset-library,
  .playlist-list {
    max-height: none;
  }

  .playlist-player {
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
  }

  .playlist-player-row {
    gap: 6px;
  }

  .playlist-player button {
    min-height: 42px;
  }

  .zone-settings-layout {
    grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
  }

  .zone-canvas-layout {
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    gap: 10px;
  }

  .zone-canvas-channel-palette {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }

  .zone-canvas-create {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zone-canvas-create button {
    grid-column: 1 / -1;
  }

  .zone-channel-matrix,
  .screen-channel-matrix {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .zone-channel-matrix .channel-btn,
  .screen-channel-matrix .channel-btn {
    min-width: 44px;
    min-height: 48px;
  }

  .settings-menu-grid {
    gap: 7px;
  }

  .settings-menu-button {
    min-height: 58px;
    padding: 8px 10px;
  }

  .settings-menu-art {
    top: -16%;
    right: -6%;
    bottom: -16%;
    width: 52%;
    padding-right: 15px;
  }

  .settings-menu-art svg {
    width: 38px;
    height: 38px;
  }

  .settings-overview-card {
    gap: 12px;
  }

  .settings-overview-card h3 {
    font-size: 23px;
  }

  .settings-subheader {
    min-height: 52px;
    padding: 8px 10px;
  }

  .manual-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .assistant-messages {
    min-height: 0;
  }

  .toast-stack {
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 20px));
  }
}

/* I/O 매핑은 정보 밀도가 높은 유지보수 화면이다. 10.1인치에서는 좁은 열에
   필드를 자르지 않고 세로로 펼쳐 충분한 조작 공간을 확보한다. */
body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-settings-card,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-settings-card.detail-active {
  overflow: visible !important;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-settings-grid,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-settings-grid,
body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > .io-settings-card:not([hidden]) > .io-settings-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  overflow: visible !important;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .hardware-mode-layout,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .hardware-mode-layout {
  grid-template-columns: 1fr;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .hardware-mode-choice,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .hardware-mode-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .hardware-runtime-grid,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .hardware-runtime-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-panel {
  min-height: 0;
  overflow: visible !important;
  padding: 14px;
  border-radius: 8px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-title strong {
  font-size: 15px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-title span {
  max-width: 48%;
  text-align: right;
  line-height: 1.35;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-list,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row {
  min-width: 0;
  min-height: 70px;
  padding: 10px;
  grid-template-columns: 54px minmax(0, 1fr) minmax(108px, 0.55fr);
  gap: 9px;
  align-items: end;
  border-radius: 8px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row .io-id {
  align-self: stretch;
  min-width: 0;
  min-height: 48px;
  border-radius: 8px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-control {
  min-width: 0;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-control span {
  margin-bottom: 5px;
  font-size: 10px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row input,
body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row select,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row input,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  font-size: 13px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-contact .io-list {
  grid-template-columns: 1fr;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row.contact {
  grid-template-columns: 54px minmax(210px, 1.18fr) minmax(126px, 0.74fr) minmax(160px, 0.9fr) 104px;
  min-height: 72px;
  align-items: end;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-id {
  grid-row: auto;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-name {
  grid-column: auto;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-action,
body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-zone {
  grid-column: auto;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-status {
  grid-column: auto;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-actions .primary {
  width: min(260px, 100%);
  min-height: 48px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 54px;
  border-color: var(--line);
  padding: 9px 12px;
  background: var(--item-soft);
  color: var(--muted);
  text-align: left;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button strong {
  color: var(--ink);
  font-size: 14px;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button span {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--item));
  color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel:not(.active) {
  display: none !important;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel.active .io-list,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-panel.active .io-list {
  max-height: min(54vh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
  padding-right: 4px;
}

@media (max-width: 980px) {
  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-list,
  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-contact .io-list {
    grid-template-columns: 1fr;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row,
  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-id {
    grid-row: 1 / span 4;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control,
  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-name,
  body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact .io-control-status {
    grid-column: 2;
  }
}

/* 라즈베리파이5 주 화면: 10.1인치 1280x800에서 터치 크기를 유지하면서 방송
   시작까지 필요한 전체 흐름이 첫 화면에 보이도록 압축한다. */
@media (min-width: 981px) and (max-width: 1400px) and (min-height: 701px) and (max-height: 920px) {
  body:not(.large-workspace):not(.screen-open) .app-shell {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  body:not(.large-workspace):not(.screen-open) .side-panel {
    gap: 8px;
  }

  body:not(.large-workspace):not(.screen-open) .main-panel {
    grid-template-rows: 84px minmax(0, 1fr) 136px;
    gap: 8px;
  }

  body:not(.large-workspace):not(.screen-open) .topbar {
    min-height: 84px;
    padding: 10px 12px;
  }

  /* 오전/오후가 붙은 시각 문자열이 두 줄로 꺾이면 시계가 84px 상단 바를
     넘어간다. 1280x800 본체 화면에서는 시계의 폭과 행 높이를 고정한다. */
  body:not(.large-workspace):not(.screen-open) .top-clock {
    grid-template-rows: 20px 28px;
    width: 190px;
    min-width: 190px;
    height: 60px;
    min-height: 60px;
    padding: 5px 10px;
  }

  body:not(.large-workspace):not(.screen-open) .top-clock span {
    min-height: 20px;
    padding: 1px 6px;
    font-size: 11px;
  }

  body:not(.large-workspace):not(.screen-open) .top-clock strong {
    min-height: 28px;
    padding: 1px 6px;
    font-size: 22px;
  }

  body:not(.large-workspace):not(.screen-open) .control-grid,
  body:not(.large-workspace):not(.screen-open) .lower-grid {
    gap: 10px;
  }

  body:not(.large-workspace):not(.screen-open) .panel {
    padding: 12px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .panel-heading {
    order: 0;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .home-mic-control {
    order: 1;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .tts-box {
    order: 2;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .quick-tts-section {
    order: 3;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .ai-script-panel {
    order: 4;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel > .wide-nav-button {
    order: 5;
    flex: 0 0 auto;
  }

  body:not(.large-workspace):not(.screen-open) .panel-heading {
    gap: 10px;
  }

  body:not(.large-workspace):not(.screen-open) .panel-heading h3 {
    margin-top: 2px;
    font-size: 17px;
  }

  body:not(.large-workspace):not(.screen-open) .inline-status-line {
    margin-top: 3px;
    font-size: 12px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .panel-heading select {
    min-height: 42px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .home-mic-control {
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .home-mic-control .mic-action-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .home-mic-control .mic-broadcast-button {
    min-height: 70px;
    padding: 9px 12px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .home-mic-control .mic-broadcast-button strong {
    font-size: 19px;
  }

  body:not(.large-workspace):not(.screen-open) .broadcast-panel .home-mic-control .mic-level-meter {
    min-height: 68px;
  }

  body:not(.large-workspace):not(.screen-open) .quick-tts {
    gap: 6px;
    margin-top: 6px;
  }

  body:not(.large-workspace):not(.screen-open) .quick-tts-section {
    margin-top: 6px;
  }

  body:not(.large-workspace):not(.screen-open) .quick-tts-heading strong {
    display: none;
  }

  body:not(.large-workspace):not(.screen-open) .quick-tts-heading-actions button {
    min-height: 30px;
    padding: 5px 9px;
    font-size: 11px;
  }

  body:not(.large-workspace):not(.screen-open) .quick-tts button {
    min-height: 40px;
    padding: 6px;
    font-size: 13px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-panel {
    margin-top: 6px;
    padding: 7px 8px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-head {
    margin-bottom: 5px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-head strong {
    font-size: 12px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-input-row {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 0.72fr);
    gap: 7px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-side {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 44px;
    gap: 6px;
  }

  body:not(.large-workspace):not(.screen-open) .ai-script-side select,
  body:not(.large-workspace):not(.screen-open) .ai-script-side button,
  body:not(.large-workspace):not(.screen-open) #aiScriptTopicInput {
    min-height: 44px;
    height: 44px;
  }

  body:not(.large-workspace):not(.screen-open) .tts-box {
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
    min-height: 78px;
    margin-top: 6px;
  }

  body:not(.large-workspace):not(.screen-open) #ttsText {
    height: 78px;
    min-height: 78px;
    padding: 8px 10px;
  }

  body:not(.large-workspace):not(.screen-open) .tts-actions {
    gap: 4px;
  }

  body:not(.large-workspace):not(.screen-open) .tts-actions button {
    min-width: 104px;
    min-height: 37px;
    padding: 6px;
    font-size: 12px;
  }

  body:not(.large-workspace):not(.screen-open) .wide-nav-button,
  body:not(.large-workspace):not(.screen-open) .nav-hint {
    margin-top: 6px;
  }

  body:not(.large-workspace):not(.screen-open) .wide-nav-button {
    min-height: 42px;
  }

  body:not(.large-workspace):not(.screen-open) .zone-list {
    gap: 6px;
    margin-top: 8px;
  }

  body:not(.large-workspace):not(.screen-open) .zone-item {
    min-height: 53px;
    padding: 8px 9px;
  }

  body:not(.large-workspace):not(.screen-open) .zone-item span {
    font-size: 12px;
  }

  body:not(.large-workspace):not(.screen-open) .zone-action-row {
    gap: 8px;
  }

  body:not(.large-workspace) #settingsContent:not(.detail-mode) > .help-entry-card:not([hidden]) {
    grid-column: auto;
  }

  body:not(.large-workspace) #settingsContent:not(.detail-mode) > [data-settings-section-content]:not([hidden]) {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > [data-settings-section-content]:not([hidden]) {
    display: flex !important;
    min-height: 118px;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) > [data-settings-section-content]:not([hidden]) > *:not(.screen-card-title) {
    display: none !important;
  }

  body:not(.large-workspace) #settingsContent[data-settings-section="io"]:not(.detail-mode) .settings-detail-open {
    display: inline-grid !important;
  }
}

* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 52%, var(--line)) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 52%, var(--line));
  background-clip: padding-box;
}

@supports (content-visibility: auto) {
  .asset-row,
  .schedule-item,
  .log-item,
  .io-row,
  .account-user-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 68px;
  }
}

/* 전체 모드가 기본이다. 간편 모드는 동일한 실제 제어를 재사용하되 보조 탐색을
   숨겨 스크롤 없이 방송과 비상 동작에 도달하게 한다. */
.console-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 112px;
  white-space: nowrap;
  font-weight: 900;
}

.console-mode-icon {
  font-size: 16px;
  line-height: 1;
}

.console-mode-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 20%, transparent);
}

.secondary-workspace .console-mode-toggle {
  display: none;
}

.simple-direct-broadcast {
  display: none;
}

.simple-direct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.simple-direct-head > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.simple-direct-head strong {
  color: var(--ink);
  font-size: 17px;
}

.simple-direct-head small,
.simple-direct-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.simple-zone-tools {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, auto);
  flex: 1 1 590px;
  gap: 8px;
  align-items: end;
}

.simple-zone-tools button {
  min-height: 42px;
  padding: 8px 12px;
}

.simple-zone-preset {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.simple-zone-preset select {
  width: 100%;
  min-height: 42px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 900;
}

.simple-zone-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px;
  max-height: 220px;
  overflow: auto;
  scrollbar-gutter: stable;
  align-content: start;
  padding: 1px 2px 1px 0;
}

.simple-operation-zone {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(2.8em, auto) auto;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 132px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--control-strong), var(--item-soft));
  color: var(--ink);
  text-align: left;
}

.simple-operation-zone::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 17px;
  height: 17px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel);
}

.simple-operation-zone:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.simple-operation-zone.selected {
  border-color: var(--accent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 23%, var(--control-strong)), var(--active-soft));
  box-shadow: inset 4px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.simple-operation-zone.selected::after {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--panel);
}

.simple-operation-zone-category {
  width: fit-content;
  max-width: calc(100% - 34px);
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 13%, var(--item));
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 950;
}

.simple-operation-zone strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.simple-operation-zone small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.simple-operation-zone em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.simple-operation-zone.selected em {
  color: var(--accent-strong);
}

.simple-matrix-device {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--device-accent, var(--accent));
  border-radius: 7px;
  background: var(--item-soft);
}

.simple-matrix-device.offline {
  opacity: 0.58;
}

.simple-device-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 38px;
  padding: 5px 7px;
  border-color: color-mix(in srgb, var(--device-accent, var(--accent)) 42%, var(--line));
  background: color-mix(in srgb, var(--device-accent, var(--accent)) 10%, var(--control-strong));
  text-align: left;
}

.simple-device-toggle > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.simple-device-toggle strong,
.simple-device-toggle small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simple-device-toggle strong {
  color: var(--ink);
  font-size: 12px;
}

.simple-device-toggle small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.simple-device-toggle em {
  flex: 0 0 auto;
  color: var(--device-accent, var(--accent));
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.simple-device-toggle.selected {
  border-color: var(--device-accent, var(--accent));
  background: var(--device-accent, var(--accent));
  color: #fff;
}

.simple-device-toggle.selected strong,
.simple-device-toggle.selected small,
.simple-device-toggle.selected em {
  color: #fff;
}

.simple-matrix-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  touch-action: none;
  user-select: none;
}

.simple-matrix-channel {
  min-width: 0;
  min-height: clamp(46px, 5dvh, 62px);
  padding: 5px 4px;
}

.simple-matrix-channel strong {
  font-size: 14px;
}

.simple-matrix-channel small {
  font-size: 9px;
}

.simple-direct-broadcast.matrix-expanded .simple-zone-matrix {
  max-height: min(62vh, 520px);
}

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

.simple-direct-actions button {
  min-height: 54px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 950;
}

.simple-mic-direct {
  border-color: color-mix(in srgb, var(--warning) 72%, var(--line));
  background: color-mix(in srgb, var(--warning) 16%, var(--control-strong));
}

.simple-direct-actions button.broadcasting,
.simple-direct-actions button.pending {
  border-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 28%, var(--control-strong));
  box-shadow: 0 0 18px color-mix(in srgb, var(--warning) 42%, transparent);
}

.simple-direct-status[data-kind="error"] {
  color: var(--danger);
}

.simple-direct-status[data-kind="success"] {
  color: var(--accent-strong);
}

body.simple-mode:not(.screen-open) .app-shell {
  grid-template-columns: minmax(260px, 292px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

body.simple-mode:not(.screen-open) .side-panel {
  gap: 10px;
  min-height: 0;
}

body.simple-mode:not(.screen-open) .side-panel > .status-card:not(.emergency-card) {
  display: none;
}

body.simple-mode:not(.screen-open) .brand-block {
  min-height: 64px;
  padding: 4px 2px;
}

body.simple-mode:not(.screen-open) .brand-logo,
body.simple-mode:not(.screen-open) .brand-mark {
  width: 46px;
  height: 46px;
}

body.simple-mode:not(.screen-open) .company-logo-picture,
body.simple-mode:not(.screen-open) .company-logo {
  width: 144px;
}

body.simple-mode:not(.screen-open) .company-logo-picture {
  flex-basis: 144px;
}

body.simple-mode:not(.screen-open) .brand-block h1 {
  font-size: 19px;
}

body.simple-mode:not(.screen-open) .emergency-card {
  min-height: 0;
  padding: 20px;
  justify-content: space-between;
  border-width: 2px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--danger) 9%, transparent), transparent 48%),
    var(--panel);
}

body.simple-mode:not(.screen-open) .emergency-card h2 {
  font-size: 34px;
}

body.simple-mode:not(.screen-open) #fireToggleBtn {
  min-height: 118px;
  font-size: 25px;
}

body.simple-mode:not(.screen-open) .emergency-card .button-row button:not(#fireToggleBtn) {
  min-height: 68px;
}

body.simple-mode:not(.screen-open) .main-panel {
  grid-template-rows: 88px minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
}

body.simple-mode:not(.screen-open) .topbar {
  min-height: 88px;
  padding: 12px 14px;
}

body.simple-mode:not(.screen-open) .topbar h2 {
  font-size: 22px;
}

body.simple-mode:not(.screen-open) .topbar-actions {
  flex-wrap: nowrap;
}

body.simple-mode:not(.screen-open) .topbar-actions .assistant-fab,
body.simple-mode:not(.screen-open) #settingsNavBtn,
body.simple-mode:not(.screen-open) #themeToggleBtn {
  display: none !important;
}

body.simple-mode:not(.screen-open) .console-mode-toggle {
  min-width: 120px;
  min-height: 50px;
}

body.simple-mode:not(.screen-open) .control-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body.simple-mode:not(.screen-open) .zone-panel,
body.simple-mode:not(.screen-open) .lower-grid,
body.simple-mode:not(.screen-open) .ai-script-panel {
  display: none;
}

body.simple-mode:not(.screen-open) .broadcast-panel {
  padding: 12px;
  overflow: auto;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 12%, transparent);
}

body.simple-mode:not(.screen-open) .broadcast-panel .panel-heading h3 {
  font-size: 22px;
}

body.simple-mode:not(.screen-open) .broadcast-panel .panel-heading select {
  max-width: 320px;
  min-height: 50px;
  font-size: 15px;
  font-weight: 900;
}

body.simple-mode:not(.screen-open) .broadcast-panel .home-mic-control {
  grid-template-columns: minmax(180px, 0.62fr) minmax(360px, 1.38fr);
  gap: 16px;
  margin-top: 8px;
  padding: 10px;
}

body.simple-mode:not(.screen-open) .broadcast-panel .mic-broadcast-button {
  min-height: 84px;
  padding: 14px 18px;
}

body.simple-mode:not(.screen-open) .broadcast-panel .mic-broadcast-button strong {
  font-size: 25px;
}

body.simple-mode:not(.screen-open) .broadcast-panel .mic-level-meter {
  min-height: 82px;
}

body.simple-mode:not(.screen-open) .quick-tts-section {
  margin-top: 8px;
}

body.simple-mode:not(.screen-open) .quick-tts-heading-actions #quickTtsManageBtn {
  display: none;
}

body.simple-mode:not(.screen-open) .quick-tts {
  gap: 8px;
  margin-top: 6px;
}

body.simple-mode:not(.screen-open) .quick-tts button {
  min-height: 48px;
  font-size: 14px;
}

body.simple-mode:not(.screen-open) .tts-box {
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 12px;
  min-height: 106px;
  margin-top: 8px;
}

body.simple-mode:not(.screen-open) #ttsText {
  min-height: 106px;
  height: 106px;
  padding: 13px 15px;
  font-size: 16px;
  line-height: 1.45;
}

body.simple-mode:not(.screen-open) .tts-actions button {
  min-width: 142px;
  min-height: 58px;
  font-size: 15px;
  font-weight: 900;
}

body.simple-mode:not(.screen-open) .broadcast-panel > .wide-nav-button {
  min-height: 50px;
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

body.simple-mode:not(.screen-open) .full-media-nav-button,
body.simple-mode:not(.screen-open) .broadcast-panel .panel-heading select,
body.simple-mode:not(.screen-open) .broadcast-zone-summary {
  display: none !important;
}

body.simple-mode:not(.screen-open) .simple-direct-broadcast {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  order: 5;
  gap: 8px;
  min-height: clamp(430px, 56dvh, 740px);
  margin-top: 8px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--active-soft) 48%, var(--panel));
}

body.simple-mode:not(.screen-open) .simple-zone-matrix {
  min-height: clamp(310px, 42dvh, 620px);
  max-height: none;
}

body.simple-mode:not(.screen-open) .simple-direct-actions {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  padding: 8px 0 2px;
  background: linear-gradient(180deg, transparent, var(--panel) 24%);
}

body.simple-mode:not(.screen-open) .simple-direct-broadcast.matrix-expanded {
  min-height: min(78dvh, 860px);
}

body.simple-mode:not(.screen-open) .simple-direct-broadcast.matrix-expanded .simple-zone-matrix {
  max-height: none;
}

@media (min-width: 2200px) {
  body.simple-mode:not(.screen-open) .simple-zone-matrix {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

body.simple-mode:not(.screen-open) .simple-direct-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 980px) {
  body.simple-mode:not(.screen-open) .app-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.simple-mode:not(.screen-open) .side-panel,
  body.simple-mode:not(.screen-open) .main-panel {
    height: auto;
  }

  body.simple-mode:not(.screen-open) .emergency-card {
    min-height: 420px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .home-mic-control {
    grid-template-columns: 1fr;
  }

  body.simple-mode:not(.screen-open) .simple-direct-head,
  body.simple-mode:not(.screen-open) .simple-zone-tools {
    align-items: stretch;
  }

  body.simple-mode:not(.screen-open) .simple-direct-head {
    display: grid;
  }

  body.simple-mode:not(.screen-open) .simple-zone-tools,
  body.simple-mode:not(.screen-open) .simple-direct-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.simple-mode:not(.screen-open) .simple-zone-tools {
    display: grid;
  }

  body.simple-mode:not(.screen-open) .simple-zone-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 360px;
  }
}

/*
 * 10.1인치 1280x800 간편 화면
 *
 * 간편 화면은 마이크/TTS와 운영존 선택을 한 화면에서 연속으로 사용한다.
 * 이 해상도에서는 기존의 큰 최소 높이와 sticky 송출 버튼이 운영존 카드를
 * 덮을 수 있으므로, 글자 크기보다 빈 여백을 줄이고 카드 두 줄을 확보한다.
 */
@media (min-width: 981px) and (max-width: 1400px) and (min-height: 701px) and (max-height: 920px) {
  body.simple-mode:not(.screen-open) .main-panel {
    grid-template-rows: 76px minmax(0, 1fr);
    gap: 8px;
  }

  body.simple-mode:not(.screen-open) .topbar {
    min-height: 76px;
    padding: 8px 12px;
  }

  body.simple-mode:not(.screen-open) .topbar h2 {
    font-size: 20px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel {
    padding: 10px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .panel-heading h3 {
    font-size: 20px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .home-mic-control {
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.5fr);
    gap: 10px;
    margin-top: 6px;
    padding: 8px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .mic-broadcast-button {
    min-height: 70px;
    padding: 10px 14px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .mic-broadcast-button strong {
    font-size: 22px;
  }

  body.simple-mode:not(.screen-open) .broadcast-panel .mic-level-meter {
    min-height: 68px;
  }

  body.simple-mode:not(.screen-open) .tts-box {
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 10px;
    min-height: 82px;
    margin-top: 6px;
  }

  body.simple-mode:not(.screen-open) #ttsText {
    min-height: 82px;
    height: 82px;
    padding: 10px 12px;
    font-size: 15px;
  }

  body.simple-mode:not(.screen-open) .tts-actions {
    gap: 6px;
  }

  body.simple-mode:not(.screen-open) .tts-actions button {
    min-width: 132px;
    min-height: 38px;
    padding: 7px 9px;
    font-size: 13px;
  }

  body.simple-mode:not(.screen-open) .quick-tts-section {
    margin-top: 5px;
  }

  body.simple-mode:not(.screen-open) .quick-tts {
    gap: 7px;
    margin-top: 5px;
  }

  body.simple-mode:not(.screen-open) .quick-tts button {
    min-height: 40px;
    padding: 6px 8px;
    font-size: 13px;
  }

  body.simple-mode:not(.screen-open) .simple-direct-broadcast {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 7px;
    min-height: 340px;
    margin-top: 6px;
    padding: 9px;
  }

  body.simple-mode:not(.screen-open) .simple-direct-head {
    gap: 9px;
  }

  body.simple-mode:not(.screen-open) .simple-direct-head strong {
    font-size: 15px;
  }

  body.simple-mode:not(.screen-open) .simple-direct-head small {
    font-size: 10px;
  }

  body.simple-mode:not(.screen-open) .simple-zone-tools {
    grid-template-columns: minmax(155px, 1fr) repeat(3, auto);
    gap: 6px;
  }

  body.simple-mode:not(.screen-open) .simple-zone-tools button,
  body.simple-mode:not(.screen-open) .simple-zone-preset select {
    min-height: 42px;
    padding: 7px 10px;
    font-size: 12px;
  }

  body.simple-mode:not(.screen-open) .simple-zone-matrix {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 6px;
    min-height: 0;
    max-height: 208px;
    padding: 1px 3px 3px 0;
    scroll-padding-bottom: 6px;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone {
    grid-template-rows: auto minmax(2.4em, auto) auto;
    gap: 3px;
    min-height: 98px;
    padding: 9px 10px;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone::after {
    top: 9px;
    right: 9px;
    width: 15px;
    height: 15px;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone-category {
    max-width: calc(100% - 28px);
    padding: 2px 6px;
    font-size: 8px;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone strong {
    font-size: 14px;
    line-height: 1.2;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone small {
    font-size: 9px;
    line-height: 1.3;
    -webkit-line-clamp: 1;
  }

  body.simple-mode:not(.screen-open) .simple-operation-zone em {
    font-size: 9px;
  }

  body.simple-mode:not(.screen-open) .simple-direct-actions {
    position: static;
    z-index: auto;
    gap: 8px;
    padding: 0;
    background: none;
  }

  body.simple-mode:not(.screen-open) .simple-direct-actions button {
    min-height: 50px;
    padding: 8px 12px;
    font-size: 14px;
  }
}

/* 실장 패널의 정확한 1280x800 영역에서는 13개 기본 운영존도 두 줄에 담는다. */
@media (min-width: 1200px) and (max-width: 1400px) and (min-height: 760px) and (max-height: 920px) {
  body.simple-mode:not(.screen-open) .simple-direct-broadcast {
    min-height: 350px;
  }

  body.simple-mode:not(.screen-open) .simple-zone-matrix {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-height: 210px;
  }
}

/* 데스크톱/전체화면에서는 즉시 방송과 예약 관리가 주 작업 영역이다. 우측의
   운영존·로그는 읽을 수 있는 최소 폭을 유지하면서 중앙 작업 폭을 더 확보한다. */
body.full-mode:not(.screen-open) .control-grid,
body.full-mode:not(.screen-open) .lower-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.58fr);
}

/*
 * 방송 장비형 3D 표면 체계
 *
 * 운영 화면의 정보 밀도와 1280x800 배치를 바꾸지 않고, 상단 하이라이트와
 * 짧은 하단 그림자로 패널의 층을 구분한다. 선택된 제어는 안쪽으로 눌린
 * 형태를 사용해 단순 hover와 실제 선택/송출 상태를 빠르게 구별한다.
 */
:root {
  --depth-highlight: rgba(255, 255, 255, 0.78);
  --depth-edge: rgba(30, 58, 51, 0.15);
  --depth-shadow: rgba(28, 52, 46, 0.16);
  --depth-shadow-strong: rgba(19, 38, 33, 0.23);
  --depth-panel:
    inset 0 1px 0 var(--depth-highlight),
    inset 0 -1px 0 var(--depth-edge),
    0 3px 0 color-mix(in srgb, var(--line) 72%, #7e968d 28%),
    0 9px 22px var(--depth-shadow);
  --depth-item:
    inset 0 1px 0 color-mix(in srgb, var(--depth-highlight) 72%, transparent),
    inset 0 -1px 0 var(--depth-edge),
    0 2px 5px color-mix(in srgb, var(--depth-shadow) 72%, transparent);
  --depth-control:
    inset 0 1px 0 color-mix(in srgb, var(--depth-highlight) 82%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--depth-edge) 88%, transparent),
    0 3px 0 color-mix(in srgb, var(--line) 64%, #6f887f 36%),
    0 5px 10px color-mix(in srgb, var(--depth-shadow) 62%, transparent);
  --depth-pressed:
    inset 0 3px 7px var(--depth-shadow-strong),
    inset 0 1px 0 color-mix(in srgb, #000 10%, transparent);
}

body[data-theme="dark"] {
  --depth-highlight: rgba(255, 255, 255, 0.075);
  --depth-edge: rgba(0, 0, 0, 0.42);
  --depth-shadow: rgba(0, 0, 0, 0.34);
  --depth-shadow-strong: rgba(0, 0, 0, 0.52);
  --depth-panel:
    inset 0 1px 0 var(--depth-highlight),
    inset 0 -1px 0 var(--depth-edge),
    0 3px 0 rgba(0, 0, 0, 0.34),
    0 10px 22px var(--depth-shadow);
  --depth-item:
    inset 0 1px 0 var(--depth-highlight),
    inset 0 -1px 0 var(--depth-edge),
    0 3px 7px rgba(0, 0, 0, 0.24);
  --depth-control:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -2px 0 rgba(0, 0, 0, 0.48),
    0 3px 0 rgba(0, 0, 0, 0.46),
    0 6px 12px rgba(0, 0, 0, 0.22);
}

.login-card,
.status-card,
.panel,
.topbar,
.screen-card,
.regular-alert-dashboard,
.schedule-overview,
.simple-direct-broadcast {
  box-shadow: var(--depth-panel);
}

.status-grid > div,
.device-row,
.zone-item,
.schedule-item,
.log-item,
.home-preview-row,
.home-preview-empty,
.broadcast-zone-summary,
.regular-alert-metric,
.regular-alert-calendar,
.schedule-metric,
.emergency-mic-status,
.mic-level-meter,
.zone-preset-drop-area,
.zone-manage-row,
.zone-channel-chip,
.channel-btn,
.routing-channel-btn,
.simple-zone-preset {
  box-shadow: var(--depth-item);
}

input,
select,
textarea {
  border-top-color: color-mix(in srgb, var(--line) 68%, #73877f 32%);
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, var(--depth-shadow) 66%, transparent),
    0 1px 0 color-mix(in srgb, var(--depth-highlight) 78%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow:
    inset 0 2px 5px color-mix(in srgb, var(--depth-shadow) 58%, transparent),
    0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
}

button:not(.mic-broadcast-button):not(.danger):not(.assistant-fab):not(.theme-toggle) {
  border: 1px solid color-mix(in srgb, var(--line) 72%, #70867d 28%);
  box-shadow: var(--depth-control);
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.12s ease;
}

button:not(.mic-broadcast-button):not(.danger):not(.assistant-fab):not(.theme-toggle):hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--depth-highlight) 88%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--depth-edge) 84%, transparent),
    0 4px 0 color-mix(in srgb, var(--line) 58%, #647d73 42%),
    0 8px 14px color-mix(in srgb, var(--depth-shadow) 78%, transparent);
}

button:not(.mic-broadcast-button):not(.danger):not(.assistant-fab):not(.theme-toggle):active:not(:disabled),
button.active:not(.danger),
button[aria-pressed="true"]:not(.danger),
.channel-btn.selected,
.routing-channel-btn.selected {
  transform: translateY(2px);
  box-shadow: var(--depth-pressed);
}

button:disabled {
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--depth-shadow) 36%, transparent);
}

button.primary {
  border-color: color-mix(in srgb, var(--accent-strong) 78%, #000 22%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -2px 0 color-mix(in srgb, var(--accent-strong) 76%, #000 24%),
    0 3px 0 color-mix(in srgb, var(--accent-strong) 66%, #000 34%),
    0 7px 14px color-mix(in srgb, var(--accent) 24%, transparent);
}

button.danger,
#fireToggleBtn {
  border: 1px solid color-mix(in srgb, var(--danger) 74%, #661915 26%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 0 color-mix(in srgb, var(--danger) 66%, #621713 34%),
    0 4px 0 color-mix(in srgb, var(--danger) 54%, #51110f 46%),
    0 9px 19px color-mix(in srgb, var(--danger) 25%, transparent);
}

button.danger:active:not(:disabled),
#fireToggleBtn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow:
    inset 0 4px 9px rgba(82, 17, 14, 0.42),
    0 1px 0 color-mix(in srgb, var(--danger) 52%, #4b1110 48%);
}

.mic-broadcast-button {
  border-top-color: rgba(255, 255, 255, 0.48);
  border-bottom-color: rgba(105, 60, 7, 0.52);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.36),
    inset 0 -4px 0 rgba(122, 74, 11, 0.22),
    0 4px 0 rgba(119, 73, 13, 0.30),
    0 12px 24px rgba(215, 146, 31, 0.24);
}

.mic-broadcast-button:active:not(:disabled),
.mic-broadcast-button.active {
  transform: translateY(3px);
}

.zone-item.active,
.channel-btn.selected,
.routing-channel-btn.selected,
.simple-zone-matrix .selected {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  box-shadow:
    inset 0 3px 8px color-mix(in srgb, var(--accent-strong) 24%, var(--depth-shadow-strong)),
    0 0 0 2px color-mix(in srgb, var(--accent) 13%, transparent);
}

.top-clock,
.screen-clock {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 3px 0 color-mix(in srgb, var(--line) 54%, #102b25 46%),
    0 8px 18px color-mix(in srgb, var(--depth-shadow) 76%, transparent);
}

.nav-pill,
.pill,
.admin-status,
.mic-control-head > span {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--depth-highlight) 76%, transparent),
    inset 0 -1px 0 var(--depth-edge),
    0 2px 4px color-mix(in srgb, var(--depth-shadow) 50%, transparent);
}

/* 입출력 매핑 작업대
   현장 설치자는 물리 포트, 연결 대상, 실행 결과를 순서대로 확인해야 한다.
   세 종류를 동시에 압축해서 보여주지 않고 큰 작업 탭 하나에 집중시키며,
   각 행 하단에 실제 신호 흐름을 문장으로 표시한다. */
#settingsContent[data-settings-section="io"] .io-panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  background: var(--item-soft);
  color: var(--muted);
  text-align: left;
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button.active {
  border-color: var(--accent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%),
    var(--item);
  color: var(--accent-strong);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent),
    0 5px 13px color-mix(in srgb, var(--accent) 10%, transparent);
}

#settingsContent[data-settings-section="io"] .io-tab-number {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--control-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button.active .io-tab-number {
  background: var(--accent);
  color: var(--on-accent, #062016);
}

#settingsContent[data-settings-section="io"] .io-tab-copy {
  display: block;
  min-width: 0;
  background: transparent;
}

#settingsContent[data-settings-section="io"] .io-tab-copy strong,
#settingsContent[data-settings-section="io"] .io-tab-copy small {
  display: block;
  min-width: 0;
}

#settingsContent[data-settings-section="io"] .io-tab-copy strong {
  color: var(--ink);
  font-size: 15px;
}

#settingsContent[data-settings-section="io"] .io-tab-copy small {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsContent[data-settings-section="io"] .io-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 70px;
  min-height: 32px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.io-mapping-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.io-mapping-overview > div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--item);
}

.io-mapping-overview > div.live {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--item));
}

.io-mapping-overview span,
.io-mapping-overview strong {
  display: block;
}

.io-mapping-overview span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.io-mapping-overview strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
}

.io-mapping-overview .live strong {
  color: var(--accent-strong);
}

.io-mapping-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.48fr) minmax(300px, 1.35fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--item-soft));
}

.io-mapping-search,
.io-mapping-filter {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.io-mapping-search > span,
.io-mapping-filter > span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.io-mapping-toolbar input,
.io-mapping-toolbar select,
.io-mapping-toolbar button {
  min-height: 44px;
}

.io-mapping-guide {
  min-width: 0;
  min-height: 44px;
  border-left: 3px solid var(--accent);
  padding: 3px 0 3px 10px;
}

.io-mapping-guide strong,
.io-mapping-guide span {
  display: block;
}

.io-mapping-guide strong {
  color: var(--ink);
  font-size: 12.5px;
}

.io-mapping-guide span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.35;
}

.io-filter-reset {
  min-width: 104px;
}

.io-visible-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 780;
}

.io-visible-status span:first-child {
  color: var(--accent-strong);
  font-weight: 950;
}

#settingsContent[data-settings-section="io"] .io-settings-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

#settingsContent[data-settings-section="io"] .io-panel:not(.active) {
  display: none !important;
}

#settingsContent[data-settings-section="io"] .io-panel.active {
  display: flex;
}

#settingsContent[data-settings-section="io"] .io-panel-source .io-list,
#settingsContent[data-settings-section="io"] .io-panel-output .io-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  max-height: min(48vh, 520px);
}

#settingsContent[data-settings-section="io"] .io-panel-contact .io-list {
  min-height: 0;
  max-height: min(54vh, 590px);
}

#settingsContent[data-settings-section="io"] .io-row {
  position: relative;
  min-width: 0;
  min-height: 88px;
  padding: 9px 9px 31px;
}

#settingsContent[data-settings-section="io"] .io-row::after {
  content: attr(data-flow);
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 9px;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  padding: 5px 4px 0;
  color: color-mix(in srgb, var(--muted) 78%, var(--accent-strong));
  font-size: 10px;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsContent[data-settings-section="io"] .io-row[hidden] {
  display: none !important;
}

#settingsContent[data-settings-section="io"] .io-row.contact {
  min-height: 92px;
}

#settingsContent[data-settings-section="io"] .io-actions {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.io-save-state {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.io-save-state.dirty {
  color: var(--warning);
}

@media (max-width: 1100px) {
  .io-mapping-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .io-mapping-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr) auto;
  }

  .io-mapping-guide {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #settingsContent[data-settings-section="io"] .io-panel-tabs button {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #settingsContent[data-settings-section="io"] .io-tab-count {
    grid-column: 2;
    justify-self: start;
    min-height: 26px;
  }
}

@media (max-width: 820px) {
  #settingsContent[data-settings-section="io"] .io-panel-tabs,
  .io-mapping-overview,
  .io-mapping-toolbar,
  #settingsContent[data-settings-section="io"] .io-panel-source .io-list,
  #settingsContent[data-settings-section="io"] .io-panel-output .io-list {
    grid-template-columns: 1fr;
  }

  .io-mapping-guide {
    grid-column: auto;
    grid-row: auto;
  }

  .io-filter-reset {
    width: 100%;
  }

  .io-visible-status {
    display: grid;
  }

  #settingsContent[data-settings-section="io"] .io-actions {
    align-items: stretch;
    flex-direction: column;
  }

  #settingsContent[data-settings-section="io"] .io-actions .primary {
    width: 100%;
  }
}

/* 입출력 설정 허브와 단일 작업 화면
   작은 본체 화면에서는 모든 배선 설정을 한 번에 펼치지 않는다. 먼저 물리 기능을
   선택하고, 상세 화면에서는 한 종류의 포트만 편집해 설치 실수를 줄인다. */
#settingsContent[data-settings-section="io"]:not(.detail-mode)
  > [data-settings-section-content="io"]:not(.io-settings-hub) {
  display: none !important;
}

#settingsContent[data-settings-section="io"].detail-mode > .io-settings-hub,
#settingsContent[data-settings-section="io"].detail-mode
  > [data-settings-section-content="io"]:not(.detail-active) {
  display: none !important;
}

#settingsContent[data-settings-section="io"].detail-mode > .detail-active {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
}

body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode) > .io-settings-hub {
  display: grid !important;
  justify-content: stretch;
  min-height: 0;
  cursor: default;
}

body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > .io-settings-hub > .audio-settings-hub-copy,
body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > .io-settings-hub > .io-function-grid {
  display: grid !important;
}

/* 10.1인치 공통 카드 축약 규칙보다 I/O 허브를 우선한다. */
body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > [data-settings-section-content="io"]:not(.io-settings-hub):not([hidden]) {
  display: none !important;
}

body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > [data-settings-section-content="io"].io-settings-hub:not([hidden]) {
  display: grid !important;
  align-self: start;
  justify-content: stretch;
  min-height: 0;
  cursor: default;
}

body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > [data-settings-section-content="io"].io-settings-hub:not([hidden])
  > .audio-settings-hub-copy {
  display: block !important;
}

body:not(.large-workspace)
  #settingsContent[data-settings-section="io"]:not(.detail-mode)
  > [data-settings-section-content="io"].io-settings-hub:not([hidden])
  > .io-function-grid {
  display: grid !important;
}

.io-function-grid .io-source { --audio-function-accent: var(--io-source-color, #55cfad); }
.io-function-grid .io-output { --audio-function-accent: var(--io-output-color, #58bce6); }
.io-function-grid .io-contact { --audio-function-accent: var(--io-contact-color, #e7a64e); }
.io-function-grid .io-safety {
  --audio-function-accent: #ed666c;
  grid-column: span 2;
}
.io-function-grid .io-hardware { --audio-function-accent: #8eb8e7; }
.io-function-grid .io-remote { --audio-function-accent: #ad8de1; }
.io-function-grid .io-health { --audio-function-accent: #dd777d; }

.io-safety-card {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, #ed666c 42%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, #ed666c 9%, var(--panel)), var(--panel) 58%);
}

.io-safety-card.alarm-active {
  border-color: #ff6b70;
  box-shadow: 0 0 22px color-mix(in srgb, #ed4e55 20%, transparent);
}

.safety-io-notice {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  border-left: 4px solid #ed666c;
  border-radius: 7px;
  padding: 10px 12px;
  background: color-mix(in srgb, #ed666c 9%, var(--item));
}

.safety-io-notice strong {
  color: var(--ink);
  font-size: 13px;
}

.safety-io-notice span,
.safety-io-actions span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.45;
}

.safety-io-default-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(260px, 1fr) minmax(130px, 0.55fr) auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, #ed666c 34%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, #ed666c 5%, var(--item-soft));
}

.safety-io-default-copy,
.safety-io-default-control,
.safety-io-default-scope {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.safety-io-default-copy small,
.safety-io-default-control > span,
.safety-io-default-scope > span {
  color: #ed777d;
  font-size: 9.5px;
  font-weight: 900;
}

.safety-io-default-copy strong,
.safety-io-default-scope strong {
  color: var(--ink);
  font-size: 12.5px;
}

.safety-io-default-copy > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safety-io-default-control select {
  width: 100%;
  min-height: 38px;
}

.safety-io-default-editor button {
  min-height: 38px;
  white-space: nowrap;
}

.safety-io-default-status {
  margin: 0 0 10px;
  border-left: 3px solid var(--line-strong);
  border-radius: 5px;
  padding: 7px 10px;
  background: var(--item-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
}

.safety-io-default-status[data-kind="success"] {
  border-left-color: var(--green);
  color: var(--green);
}

.safety-io-default-status[data-kind="warning"] {
  border-left-color: var(--amber);
  color: var(--amber);
}

.safety-io-default-status[data-kind="error"] {
  border-left-color: var(--red);
  color: var(--red);
}

.safety-io-flow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, auto));
  align-items: center;
  gap: 8px;
}

.safety-io-flow > div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item);
}

.safety-io-flow small,
.safety-io-flow span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.safety-io-flow strong {
  color: var(--ink);
  font-size: 13px;
}

.safety-io-flow > b {
  color: #ed666c;
  font-size: 19px;
}

.safety-io-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.safety-io-status-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--item-soft);
}

.safety-io-status-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.safety-io-status-grid strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safety-io-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

@media (max-width: 900px) {
  .needle-runtime-checks,
  .needle-self-test-button,
  .io-function-grid .io-safety {
    grid-column: 1;
  }

  .needle-runtime-checks,
  .safety-io-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safety-io-flow {
    grid-template-columns: 1fr;
  }

  .safety-io-flow > b {
    justify-self: center;
    transform: rotate(90deg);
  }

  .safety-io-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .safety-io-default-editor {
    grid-template-columns: 1fr;
  }
}

/* 상세 안의 세 버튼은 빠른 전환용 보조 내비게이션이다. */
#settingsContent[data-settings-section="io"] .io-panel-tabs {
  gap: 8px;
  margin-bottom: 10px;
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  min-height: 58px;
  padding: 8px 10px;
}

#settingsContent[data-settings-section="io"] .io-tab-number {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

#settingsContent[data-settings-section="io"] .io-tab-copy strong {
  font-size: 13px;
}

#settingsContent[data-settings-section="io"] .io-tab-copy small {
  margin-top: 2px;
  font-size: 10px;
}

#settingsContent[data-settings-section="io"] .io-tab-count {
  min-width: 62px;
  min-height: 28px;
  padding-inline: 8px;
  font-size: 10px;
}

.io-mapping-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.io-mapping-overview > div[hidden] {
  display: none !important;
}

.io-mapping-overview > div {
  min-height: 58px;
  padding: 8px 10px;
}

.io-mapping-overview strong {
  margin-top: 3px;
  font-size: 14px;
}

.io-mapping-toolbar {
  grid-template-columns: minmax(190px, 0.9fr) minmax(145px, 0.55fr) minmax(240px, 1.25fr) auto;
  align-items: center;
  padding: 8px;
}

.io-mapping-toolbar input,
.io-mapping-toolbar select,
.io-mapping-toolbar button {
  min-height: 42px;
}

/* 행 내부의 설명은 절대 위치를 쓰지 않는다. 긴 한글 라벨도 자연스럽게 줄바꿈된다. */
#settingsContent[data-settings-section="io"] .io-row,
#settingsContent[data-settings-section="io"] .io-row.contact {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

#settingsContent[data-settings-section="io"] .io-row::after {
  content: none !important;
  display: none !important;
}

#settingsContent[data-settings-section="io"] .io-row-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

#settingsContent[data-settings-section="io"] .io-row .io-id {
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 36px;
  border-radius: 7px;
  background: var(--control-strong);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 950;
}

#settingsContent[data-settings-section="io"] .io-port-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

#settingsContent[data-settings-section="io"] .io-port-copy small {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 850;
}

#settingsContent[data-settings-section="io"] .io-port-copy strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 950;
}

#settingsContent[data-settings-section="io"] .io-row-state {
  min-width: 64px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--control);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 950;
  text-align: center;
  white-space: nowrap;
}

#settingsContent[data-settings-section="io"] .io-row-state.live {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, var(--control));
  color: var(--accent-strong);
}

#settingsContent[data-settings-section="io"] .io-row-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(138px, 0.75fr);
  gap: 8px;
  min-width: 0;
}

#settingsContent[data-settings-section="io"] .io-row-fields.contact-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#settingsContent[data-settings-section="io"] .io-control {
  display: grid;
  gap: 5px;
  min-width: 0;
}

#settingsContent[data-settings-section="io"] .io-control > span {
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  white-space: normal;
}

#settingsContent[data-settings-section="io"] .io-control input,
#settingsContent[data-settings-section="io"] .io-control select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  font-size: 11.5px;
}

#settingsContent[data-settings-section="io"] .io-row-flow {
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  padding: 7px 3px 0;
  color: color-mix(in srgb, var(--muted) 78%, var(--accent-strong));
  font-size: 10px;
  font-weight: 820;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#settingsContent[data-settings-section="io"] .io-panel-source .io-list,
#settingsContent[data-settings-section="io"] .io-panel-output .io-list,
#settingsContent[data-settings-section="io"] .io-panel-contact .io-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  max-height: min(48vh, 510px);
  overflow: auto;
}

/* 입출력 종류별 의미색
   허브에서 선택한 색이 상세 탭, 요약, 물리 포트 행까지 이어져
   설치자가 오디오 입력·제어 출력·일반 접점을 빠르게 구분할 수 있게 한다. */
#settingsContent[data-settings-section="io"] {
  --io-source-color: #55cfad;
  --io-output-color: #58bce6;
  --io-contact-color: #e7a64e;
}

#settingsContent[data-settings-section="io"] [data-io-panel-tab="source"],
#settingsContent[data-settings-section="io"] [data-io-summary="source"],
#settingsContent[data-settings-section="io"] [data-io-panel="source"],
#settingsContent[data-settings-section="io"] [data-io-kind="source"] {
  --io-kind-color: var(--io-source-color);
}

#settingsContent[data-settings-section="io"] [data-io-panel-tab="output"],
#settingsContent[data-settings-section="io"] [data-io-summary="output"],
#settingsContent[data-settings-section="io"] [data-io-panel="output"],
#settingsContent[data-settings-section="io"] [data-io-kind="output"] {
  --io-kind-color: var(--io-output-color);
}

#settingsContent[data-settings-section="io"] [data-io-panel-tab="contact"],
#settingsContent[data-settings-section="io"] [data-io-summary="contact"],
#settingsContent[data-settings-section="io"] [data-io-panel="contact"],
#settingsContent[data-settings-section="io"] [data-io-kind="contact"] {
  --io-kind-color: var(--io-contact-color);
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab] {
  border-color: color-mix(in srgb, var(--io-kind-color) 36%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--io-kind-color) 9%, transparent), transparent 74%),
    var(--item-soft);
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab] .io-tab-number,
#settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab] .io-tab-count {
  border: 1px solid color-mix(in srgb, var(--io-kind-color) 34%, var(--line));
  background: color-mix(in srgb, var(--io-kind-color) 13%, var(--control-strong));
  color: color-mix(in srgb, var(--io-kind-color) 88%, var(--ink));
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab].active {
  border-color: color-mix(in srgb, var(--io-kind-color) 84%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--io-kind-color) 24%, transparent), transparent 74%),
    var(--item);
  color: var(--io-kind-color);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--io-kind-color) 24%, transparent),
    0 6px 15px color-mix(in srgb, var(--io-kind-color) 12%, transparent);
}

#settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab].active .io-tab-number {
  border-color: var(--io-kind-color);
  background: var(--io-kind-color);
  color: #071712;
  box-shadow: 0 0 12px color-mix(in srgb, var(--io-kind-color) 28%, transparent);
}

/* 10.1인치 축약 규칙보다 의미색을 우선해 작은 화면에서도 구분을 유지한다. */
body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab] {
  border-color: color-mix(in srgb, var(--io-kind-color) 36%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--io-kind-color) 9%, transparent), transparent 74%),
    var(--item-soft);
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-panel-tabs button[data-io-panel-tab].active {
  border-color: color-mix(in srgb, var(--io-kind-color) 84%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--io-kind-color) 24%, transparent), transparent 74%),
    var(--item);
  color: var(--io-kind-color);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--io-kind-color) 24%, transparent),
    0 6px 15px color-mix(in srgb, var(--io-kind-color) 12%, transparent);
}

#settingsContent[data-settings-section="io"] .io-mapping-overview > [data-io-summary="source"],
#settingsContent[data-settings-section="io"] .io-mapping-overview > [data-io-summary="output"],
#settingsContent[data-settings-section="io"] .io-mapping-overview > [data-io-summary="contact"] {
  border-color: color-mix(in srgb, var(--io-kind-color) 38%, var(--line));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--io-kind-color) 12%, transparent), transparent 68%),
    var(--item);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--io-kind-color) 78%, transparent);
}

#settingsContent[data-settings-section="io"] .io-mapping-overview > [data-io-summary] strong {
  color: color-mix(in srgb, var(--io-kind-color, var(--accent-strong)) 84%, var(--ink));
}

#settingsContent[data-settings-section="io"] .io-panel[data-io-panel] {
  border-color: color-mix(in srgb, var(--io-kind-color) 32%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--io-kind-color) 5%, transparent), transparent 46%),
    var(--item-soft);
}

#settingsContent[data-settings-section="io"] .io-panel[data-io-panel] .io-panel-title strong {
  color: color-mix(in srgb, var(--io-kind-color) 80%, var(--ink));
}

#settingsContent[data-settings-section="io"] .io-row[data-io-kind] {
  border-color: color-mix(in srgb, var(--io-kind-color) 30%, var(--line));
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--io-kind-color) 10%, transparent), transparent 52%),
    var(--item);
}

#settingsContent[data-settings-section="io"] .io-row[data-io-kind] .io-id {
  border: 1px solid color-mix(in srgb, var(--io-kind-color) 40%, var(--line));
  background: color-mix(in srgb, var(--io-kind-color) 16%, var(--control-strong));
  color: color-mix(in srgb, var(--io-kind-color) 88%, var(--ink));
}

#settingsContent[data-settings-section="io"] .io-row[data-io-kind] .io-row-state {
  border-color: color-mix(in srgb, var(--io-kind-color) 34%, var(--line));
  background: color-mix(in srgb, var(--io-kind-color) 8%, var(--control));
}

#settingsContent[data-settings-section="io"] .io-row[data-io-kind].active {
  border-color: color-mix(in srgb, var(--io-kind-color) 84%, var(--line));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--io-kind-color) 32%, transparent),
    0 0 14px color-mix(in srgb, var(--io-kind-color) 10%, transparent);
}

#settingsContent[data-settings-section="io"] .io-row[data-io-kind].active .io-id,
#settingsContent[data-settings-section="io"] .io-row[data-io-kind] .io-row-state.live {
  border-color: color-mix(in srgb, var(--io-kind-color) 78%, var(--line));
  background: color-mix(in srgb, var(--io-kind-color) 24%, var(--control-strong));
  color: color-mix(in srgb, var(--io-kind-color) 88%, var(--ink));
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row {
  align-items: stretch !important;
  min-height: 136px !important;
  height: auto !important;
}

body:not(.large-workspace) #settingsContent[data-settings-section="io"] .io-row.contact,
body:not(.large-workspace) #settingsContent.detail-mode[data-settings-section="io"] .io-row.contact {
  align-items: stretch !important;
  min-height: 218px !important;
  height: auto !important;
}

body:not(.large-workspace)
  #settingsContent.detail-mode[data-settings-section="io"] .io-panel-contact .io-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: max-content !important;
}

@media (max-width: 1040px) {
  .io-function-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .io-mapping-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(145px, 0.55fr) auto;
  }

  .io-mapping-guide {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 820px) {
  .io-function-grid,
  #settingsContent[data-settings-section="io"] .io-panel-source .io-list,
  #settingsContent[data-settings-section="io"] .io-panel-output .io-list,
  #settingsContent[data-settings-section="io"] .io-panel-contact .io-list,
  #settingsContent[data-settings-section="io"] .io-row-fields,
  #settingsContent[data-settings-section="io"] .io-row-fields.contact-fields {
    grid-template-columns: 1fr;
  }

  #settingsContent[data-settings-section="io"] .io-row-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  body:not(.large-workspace)
    #settingsContent.detail-mode[data-settings-section="io"] .io-panel-contact .io-list {
    grid-template-columns: 1fr !important;
  }

  #settingsContent[data-settings-section="io"] .io-row-state {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  input,
  select,
  textarea {
    transition: none !important;
  }

  .settings-menu-art {
    transition: none !important;
  }
}

@media (min-width: 900px) and (max-width: 1360px) {
  .topbar-actions .assistant-fab {
    grid-template-columns: 28px;
    width: 56px;
    min-width: 56px;
    padding-inline: 7px;
  }

  .topbar-actions .assistant-fab strong {
    display: none;
  }

  .top-clock {
    width: 110px;
    min-width: 110px;
    padding-inline: 7px;
  }

  .top-clock strong {
    font-size: 20px;
  }
}

.accessibility-settings-card {
  grid-column: 1 / -1;
  min-width: 0;
}

.accessibility-settings-card .screen-card-title {
  position: relative;
  isolation: isolate;
  min-height: 58px;
  overflow: hidden;
  border-radius: 8px;
  padding: 6px 10px;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, #66d8ff 5%, transparent) 62%, color-mix(in srgb, #66d8ff 10%, transparent) 100%);
}

.accessibility-settings-card .screen-card-title > div,
.accessibility-settings-card .screen-card-title > .nav-pill,
.accessibility-settings-card .screen-card-title > .settings-detail-open {
  position: relative;
  z-index: 2;
}

.accessibility-card-art {
  position: absolute;
  z-index: 0;
  top: -22px;
  right: 136px;
  bottom: -22px;
  display: grid;
  place-items: center;
  width: 210px;
  overflow: hidden;
  color: #69dcff;
  opacity: 0.48;
  background:
    radial-gradient(circle at 60% 45%, color-mix(in srgb, #69dcff 24%, transparent), transparent 48%),
    linear-gradient(90deg, transparent, color-mix(in srgb, #17526b 36%, transparent));
  filter: saturate(0.9) blur(0.25px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.66) 32%, #000 72%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.66) 32%, #000 72%);
  pointer-events: none;
}

.accessibility-card-art::before {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: color-mix(in srgb, #69dcff 20%, transparent);
  filter: blur(18px);
}

.accessibility-card-art svg {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 60px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.28));
}

body[data-theme="light"] .accessibility-card-art {
  color: #087fa6;
  opacity: 0.36;
}

.accessibility-settings-lead {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

.accessibility-settings-mode-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.accessibility-setting-choice {
  --access-mode-color: #6fd9b2;
  --access-mode-base: #183f35;
  position: relative;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--line);
  border-left: 5px solid color-mix(in srgb, var(--access-mode-color) 72%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(118deg, transparent 42%, color-mix(in srgb, var(--access-mode-color) 7%, transparent) 72%, color-mix(in srgb, var(--access-mode-base) 30%, transparent)),
    var(--item);
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 7px 16px rgba(0, 0, 0, 0.12);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.accessibility-setting-choice[data-accessibility-default-mode="standard"] {
  --access-mode-color: #68d49b;
  --access-mode-base: #184634;
}

.accessibility-setting-choice[data-accessibility-default-mode="vision"] {
  --access-mode-color: #67cfff;
  --access-mode-base: #174a62;
}

.accessibility-setting-choice[data-accessibility-default-mode="hearing"] {
  --access-mode-color: #f2b45d;
  --access-mode-base: #5d3e1d;
}

.accessibility-setting-choice[data-accessibility-default-mode="combined"] {
  --access-mode-color: #b49aff;
  --access-mode-base: #3e3266;
}

.accessibility-setting-choice:hover,
.accessibility-setting-choice.active {
  border-color: var(--access-mode-color);
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--access-mode-color) 12%, transparent), color-mix(in srgb, var(--access-mode-base) 48%, transparent)),
    var(--active-soft);
}

.accessibility-setting-choice.active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--access-mode-color) 28%, transparent), 0 8px 20px color-mix(in srgb, var(--access-mode-color) 16%, rgba(0, 0, 0, 0.18));
}

.accessibility-setting-token {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--access-mode-color) 28%, var(--line));
  background: color-mix(in srgb, var(--access-mode-color) 10%, var(--control-strong));
  color: var(--access-mode-color);
  font-size: 13px;
  font-weight: 1000;
}

.accessibility-setting-choice.active .accessibility-setting-token {
  border-color: var(--access-mode-color);
  background: var(--access-mode-color);
  color: #07120f;
  box-shadow: 0 0 18px color-mix(in srgb, var(--access-mode-color) 34%, transparent);
}

.accessibility-setting-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.accessibility-choice-art {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -4%;
  bottom: -12%;
  display: grid;
  place-items: center end;
  width: 54%;
  min-width: 0;
  overflow: hidden;
  padding-right: 12px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 70% 42%, color-mix(in srgb, var(--access-mode-color) 24%, transparent), transparent 48%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--access-mode-base) 46%, transparent));
  color: var(--access-mode-color);
  opacity: 0.4;
  filter: saturate(0.88) blur(0.25px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 32%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 32%, #000 70%);
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.accessibility-choice-art::before {
  content: "";
  position: absolute;
  right: 12%;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--access-mode-color) 22%, transparent);
  filter: blur(15px);
}

.accessibility-choice-art svg {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.86;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.26));
}

.accessibility-setting-choice:hover .accessibility-choice-art,
.accessibility-setting-choice:focus-visible .accessibility-choice-art,
.accessibility-setting-choice.active .accessibility-choice-art {
  transform: scale(1.05);
  opacity: 0.68;
  filter: saturate(1) blur(0.15px);
}

.accessibility-setting-choice strong {
  font-size: 16px;
  line-height: 1.2;
}

.accessibility-setting-choice small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.4;
  white-space: normal;
}

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

.accessibility-settings-support-grid section {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--control);
}

.accessibility-settings-support-grid span,
.accessibility-settings-actions span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
}

.accessibility-settings-support-grid strong {
  font-size: 14px;
}

.accessibility-settings-support-grid small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.accessibility-settings-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.accessibility-settings-actions > div {
  display: grid;
  gap: 3px;
}

.accessibility-settings-actions strong {
  color: var(--ink);
  font-size: 17px;
}

.accessibility-settings-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .accessibility-settings-mode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .accessibility-card-art {
    right: 128px;
    width: 170px;
  }
}

@media (max-width: 720px) {
  .accessibility-settings-mode-grid,
  .accessibility-settings-support-grid,
  .accessibility-settings-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .schedule-weekboard-head {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-weekday-tabs {
    grid-template-columns: repeat(7, minmax(76px, 1fr));
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .schedule-weekboard-columns {
    display: none;
  }

  .schedule-weekboard-row {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    min-height: 76px;
  }

  .schedule-weekboard-time {
    grid-column: 1;
    grid-row: 1;
  }

  .schedule-weekboard-source {
    grid-column: 1;
    grid-row: 2;
  }

  .schedule-weekboard-main {
    grid-column: 2;
    grid-row: 1;
  }

  .schedule-weekboard-zone {
    grid-column: 2;
    grid-row: 2;
  }

  .schedule-weekboard-row em {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}

@media (max-width: 560px) {
  .schedule-weekboard-empty {
    grid-template-columns: 1fr;
  }

  .schedule-weekboard-empty button {
    grid-column: 1;
    grid-row: auto;
  }
}

/* 본체 상태 요약 --------------------------------------------------------- */
.appliance-health-card {
  display: grid;
  gap: 6px;
  flex: 0 0 auto;
  padding: 9px 11px;
  border-color: color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 44%),
    var(--panel);
}

.appliance-health-card .section-title strong[data-kind="ok"] {
  color: var(--accent-strong);
}

.appliance-health-card .section-title strong[data-kind="warn"] {
  color: var(--warning);
}

.appliance-health-card .section-title strong[data-kind="error"] {
  color: var(--danger);
}

.appliance-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}

.appliance-health-grid div {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 7px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
}

.appliance-health-grid dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.appliance-health-grid dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
}

.appliance-health-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appliance-health-wide {
  grid-column: 1 / -1;
}

.appliance-voltage-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, #51c9ff 52%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  color: color-mix(in srgb, #69d4ff 88%, white 12%);
  background: color-mix(in srgb, #167ba0 18%, var(--panel));
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.appliance-voltage-chip[hidden] {
  display: none;
}

.appliance-health-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--muted);
  background: color-mix(in srgb, var(--item) 90%, transparent);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}

.appliance-health-status[data-kind="ok"] {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--panel));
}

.appliance-health-status[data-kind="warn"] {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--line));
  color: color-mix(in srgb, var(--warning) 90%, white 10%);
  background: color-mix(in srgb, var(--warning) 14%, var(--panel));
}

.appliance-health-status[data-kind="error"] {
  border-color: color-mix(in srgb, var(--danger) 66%, var(--line));
  color: color-mix(in srgb, var(--danger) 84%, white 16%);
  background: color-mix(in srgb, var(--danger) 16%, var(--panel));
}

.appliance-health-hint {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

/* 화면·안전 절전 설정 --------------------------------------------------- */
.display-power-settings-card {
  grid-column: 1 / -1;
  min-width: 0;
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, #66d8ff 12%, transparent), transparent 36%),
    var(--panel);
}

.display-power-state-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line));
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-soft) 66%, var(--panel));
  font-size: 12px;
  font-weight: 900;
}

.display-power-lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.5;
}

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

.display-power-settings-grid label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--item) 92%, transparent);
}

.display-power-settings-grid label > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.field-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.field-with-unit em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.display-power-safety-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--panel));
}

.display-power-safety-note strong {
  color: var(--accent-strong);
  font-size: 12px;
}

.display-power-safety-note span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.display-power-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* 첫 터치는 방송 버튼으로 전달하지 않고 화면만 깨운다. 물리 백라이트 제어를
   지원하지 않는 개발 PC에서도 같은 동작을 확인할 수 있는 안전 가림막이다. */
.screen-power-overlay {
  position: fixed;
  z-index: 30000;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  color: #dce9e6;
  background: rgba(0, 5, 5, 0.66);
  opacity: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 220ms ease, opacity 180ms ease;
}

.screen-power-overlay[hidden] {
  display: none;
}

body.screen-sleeping .screen-power-overlay,
body.screen-eco .screen-power-overlay {
  color: #8aa09a;
  background: #000;
}

.screen-power-overlay-copy {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  opacity: 0.78;
}

body.screen-sleeping .screen-power-overlay-copy,
body.screen-eco .screen-power-overlay-copy {
  opacity: 0.22;
}

.screen-power-overlay-copy strong {
  font-size: 20px;
}

.screen-power-overlay-copy small {
  font-size: 12px;
}

.screen-power-icon {
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.screen-power-icon::before {
  content: "";
  display: block;
  width: 3px;
  height: 15px;
  margin: -6px auto 0;
  border-radius: 2px;
  background: currentColor;
}

@media (pointer: coarse) {
  html,
  body,
  button,
  [role="button"] {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.kiosk-mode :not(input):not(textarea):not([contenteditable="true"]) {
    -webkit-user-select: none;
    user-select: none;
  }

  button,
  [role="button"],
  select,
  input[type="checkbox"],
  input[type="radio"] {
    touch-action: manipulation;
  }
}

@media (max-width: 900px) {
  .display-power-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .display-power-settings-grid,
  .display-power-safety-note {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) and (max-width: 1400px) and (max-height: 850px) {
  .side-panel {
    gap: 7px;
  }

  .brand-block {
    min-height: 42px;
    padding-block: 0;
  }

  .side-panel > .status-card:first-of-type {
    padding: 6px 8px;
  }

  .side-panel > .status-card:first-of-type .section-title {
    min-height: 18px;
    font-size: 12px;
  }

  .side-panel > .status-card:first-of-type .status-grid {
    gap: 3px;
    margin-top: 3px;
  }

  .side-panel > .status-card:first-of-type .status-grid div {
    min-height: 34px;
    padding: 3px 5px;
  }

  .side-panel > .status-card:first-of-type .status-grid dt {
    font-size: 9px;
    line-height: 1.1;
  }

  .side-panel > .status-card:first-of-type .status-grid dd {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .side-panel > .emergency-card {
    flex: 1 1 260px;
    min-height: 250px;
    padding: 10px 12px;
    gap: 7px;
  }

  .emergency-card h2 {
    font-size: 23px;
  }

  .emergency-card p {
    font-size: 11px;
    line-height: 1.3;
  }

  .emergency-card .button-row {
    flex: 0 0 auto;
    margin-top: auto;
  }

  .emergency-card .button-row button:not(#fireToggleBtn) {
    min-height: 44px;
  }

  #fireToggleBtn {
    min-height: 62px;
    font-size: 18px;
  }

  .appliance-health-card {
    gap: 4px;
    padding: 6px 8px;
  }

  .appliance-health-grid {
    gap: 3px;
  }

  .appliance-health-grid div {
    padding: 3px 5px;
  }

  .appliance-health-grid dt {
    font-size: 9px;
  }

  .appliance-health-grid dd {
    gap: 4px;
    margin-top: 1px;
    font-size: 11px;
  }

  .appliance-health-status,
  .appliance-voltage-chip {
    min-height: 18px;
    padding: 1px 5px;
    font-size: 9px;
  }

  .side-panel > .nav-card {
    min-height: 58px;
    margin-top: 0;
    padding: 8px 10px;
  }

  .side-panel > .nav-card .nav-hint {
    margin-top: 4px;
    font-size: 10px;
  }
}