/* Design tokens live in components.css — that file is the single declaration point for
   every custom property. This block keeps only the document's own defaults, which
   resolve against those tokens. */
:root {
  font-family: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body { margin: 0; min-width: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
button[aria-busy="true"] { cursor: progress; }
h1, h2, h3, h4, p { margin-top: 0; }

.app-shell { min-height: 100vh; }
.brand-logo { display: block; flex: 0 0 auto; object-fit: contain; }
.login-brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-size: 1.25rem; font-weight: 700; }
.topbar-brand { display: flex; align-items: center; gap: var(--space-1); }
.topbar-brand h2 { margin: 0; }
#loading-view, #login-view { width: min(34rem, calc(100% - 2rem)); margin: 12vh auto; padding: var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 1px 2px rgb(15 23 42 / .04); }
.login-error, .auth-error-banner { padding: .75rem .875rem; color: var(--danger); background: #fef2f2; border-left: 4px solid var(--danger); border-radius: .4rem; font-weight: 700; }
.login-error { margin: 0 0 var(--space-3); }
.auth-error-banner { margin: 0; border-radius: 0; }
/* Session expiry warning. Idle uses the warning tone because the operator can still act on
   it; the absolute deadline is styled as danger because nothing can extend it. */
.session-expiry-banner { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); color: var(--status-warning-fg); background: var(--status-warning-bg); border-bottom: 1px solid var(--warning); }
.session-expiry-banner.is-final { color: var(--status-danger-fg); background: var(--status-danger-bg); border-bottom-color: var(--danger); }
.session-expiry-text { flex: 1 1 18rem; min-width: 0; }
.session-expiry-message { margin: 0; font-weight: 700; }
.session-expiry-detail { margin: .15rem 0 0; font-size: .85rem; }
.session-expiry-countdown { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.session-expiry-extend { flex: 0 0 auto; }
.auth-form { display: grid; gap: var(--space-2); }
.auth-form input, input, select, textarea { width: 100%; margin-top: .35rem; padding: .65rem .75rem; color: var(--ink); background: var(--surface); border: 1px solid #cbd5e1; border-radius: .5rem; }
label { display: block; color: #334155; font-size: .9rem; font-weight: 650; }
textarea { resize: vertical; }
button { min-height: 2.75rem; padding: .6rem .9rem; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: .5rem; font-weight: 700; }
button:hover:not(:disabled) { background: #1058b5; border-color: #1058b5; }
.secondary-button { color: #26354d; background: #e9eef5; border-color: #e9eef5; }
.secondary-button:hover:not(:disabled) { color: #172033; background: #dce5f0; border-color: #dce5f0; }
/* Removal is the only console action that cannot be undone from here, so it is the
   only button that carries the danger tone. */
.danger-button { color: #fff; background: var(--danger); border-color: var(--danger); }
.danger-button:hover:not(:disabled) { background: #8f1c13; border-color: #8f1c13; }
.outline-button { color: var(--accent); background: var(--surface); border-color: var(--accent); }
.outline-button:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); }
/* A destructive outline action must not read as the benign one beside it. Applied by
   topic-routing-view to 사용 중지; 이름 변경 keeps the plain accent outline. */
.outline-button.is-danger { color: var(--danger); border-color: var(--danger); }
.outline-button.is-danger:hover:not(:disabled) { color: #fff; background: var(--danger); border-color: var(--danger); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.section-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.operations-topbar { min-height: 7.5rem; padding: 0 var(--space-4); color: #fff; background: #081a31; }
.operations-topbar > * { min-width: 0; }
.operations-topbar h2 { margin: 0; font-size: 1.25rem; }
.operations-topbar .muted { margin: 0; color: #d7e2f0; }
.topbar-primary { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid rgb(148 163 184 / .3); }
.topbar-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.25rem; }
.operations-topbar .secondary-button,
.section-heading-row button {
  flex: 0 0 auto;
  margin-top: 0;
}
.service-status { min-height: 3.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.5rem; }
.service-status-item, .readiness-chip { position: relative; padding-left: .9rem; color: #e2e8f0; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.service-status-item::before, .readiness-chip::before { position: absolute; left: 0; top: 50%; width: .45rem; height: .45rem; border-radius: 999px; background: #94a3b8; content: ""; transform: translateY(-50%); }
.readiness-chip.is-ready::before { background: #4ade80; box-shadow: 0 0 0 .15rem rgb(74 222 128 / .12); }
.readiness-chip.is-unready::before, .readiness-chip.is-failed::before { background: #fb923c; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.topbar-actions .muted { margin-right: .25rem; font-size: .8125rem; white-space: nowrap; }
.topbar-refresh-button, .topbar-logout-button { min-height: 2.75rem; border-radius: .45rem; flex: 0 0 auto; white-space: nowrap; }
.topbar-refresh-button { color: #fff; background: #1458b8; border-color: #3b82f6; }
.topbar-refresh-button:hover:not(:disabled) { background: #1d66d0; border-color: #60a5fa; }
.topbar-logout-button { color: #f8fafc; background: transparent; border-color: #64748b; }
.topbar-logout-button:hover:not(:disabled) { color: #fff; background: rgb(255 255 255 / .08); border-color: #94a3b8; }
.mobile-account-menu-button, .mobile-account-popover, .mobile-service-panel { display: none; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }

.operations-layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); min-height: calc(100vh - 7.5rem); }
.operations-sidebar { padding: var(--space-3) var(--space-2); background: var(--surface); border-right: 1px solid var(--line); }
.operations-nav-button { width: 100%; min-height: 2.75rem; margin: 0 0 .25rem; padding: .65rem .8rem; color: #4b5563; background: transparent; border-color: transparent; text-align: left; }
.operations-nav-button:hover:not(:disabled) { color: #26354d; background: #f3f6fa; border-color: transparent; }
.operations-nav-button.is-active { color: #1459bd; background: var(--accent-soft); border-color: var(--accent-soft); }
.operations-content { width: min(100%, 105rem); padding: var(--space-5); overflow: hidden; }
.operations-view { min-width: 0; }
.page-title { margin-bottom: var(--space-4); }
.page-title h2 { margin-bottom: .25rem; font-size: 1.625rem; }
.page-title p, .muted { color: var(--muted); }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}
.dashboard-notices-section { grid-column: 1 / -1; }

.metric-card { display: grid; gap: .25rem; padding: .35rem var(--space-3); text-align: center; }
.metric-card + .metric-card { border-left: 1px solid var(--line); }
.metric-card span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.metric-card strong { color: #0f4fa8; font-size: 1.75rem; }
.dashboard-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); }
.dashboard-card-header > div { min-width: 0; }
.dashboard-card-header h3 { margin: 0; }
.dashboard-text-button { flex: 0 0 auto; min-height: 2.75rem; padding: .25rem .15rem; color: var(--accent); background: transparent; border: 0; white-space: nowrap; }
.dashboard-text-button:hover:not(:disabled) { color: #0f4fa8; background: transparent; border: 0; text-decoration: underline; }
.dashboard-recent-list { margin: 0; padding: 0; list-style: none; }
.dashboard-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: .8rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.dashboard-recent-row:last-child { border-bottom: 0; }
.dashboard-row-content { display: grid; gap: .2rem; min-width: 0; }
.dashboard-row-title { color: var(--ink); }
.dashboard-row-detail, .dashboard-row-time { color: var(--muted); font-size: .82rem; }
.dashboard-row-time { white-space: nowrap; }
.dashboard-status-badge { padding: .25rem .55rem; border-radius: 999px; color: #14532d; background: #e8f7ed; font-size: .8125rem; font-weight: 750; white-space: nowrap; }
.dashboard-status-badge.status-cancelled, .dashboard-status-badge.status-failed, .dashboard-status-badge.status-partial_failed { color: #9a3412; background: #fff1e8; }
.dashboard-status-badge.status-pending_parent_approval, .dashboard-status-badge.status-pending { color: #9a4d09; background: #fff4e8; }

.dashboard-section {
  min-width: 0;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
}

.dashboard-section h3,
.dashboard-section h4 {
  margin-top: 0;
}

.bootstrap-panel {
  border-color: #93c5fd;
  background: var(--accent-soft);
}

.bootstrap-result {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px solid #93c5fd;
  border-radius: .4rem;
  background: white;
  overflow-wrap: anywhere;
}

.root-replacement-panel {
  border-color: #a5b4fc;
  background: #f8faff;
}

.root-replacement-details {
  display: grid;
  gap: .35rem;
  margin-top: var(--space-2);
}

.root-replacement-details p { margin: 0; }

.root-replacement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.root-replacement-approval {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
  margin-top: var(--space-3);
}

.root-replacement-approval label { grid-column: 1 / -1; }

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .8rem;
  border-radius: .45rem;
  color: white;
  background: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

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

.danger-button:hover:not(:disabled) {
  background: #8f1c14;
  border-color: #8f1c14;
}

@media (max-width: 640px) {
  .root-replacement-approval { grid-template-columns: 1fr; }
}

.status-active {
  color: #166534;
  background: #dcfce7;
}

.status-degraded {
  color: #9a3412;
  background: #ffedd5;
}

.status-pending_approval {
  color: #854d0e;
  background: #fef9c3;
}

.status-quarantined {
  color: #991b1b;
  background: #fee2e2;
}

.panel-status {
  padding: .15rem .45rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 800;
}

.panel-status { margin: 0; color: #475569; background: var(--surface-muted); }
.panel-status[data-state="failed"] { color: #991b1b; background: #fee2e2; }


.disconnected-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #dbe3ee;
}

.warning {
  padding: .65rem .75rem;
  color: #713f12;
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
}

.empty-state {
  color: #64748b;
}

.error {
  margin-bottom: 0;
  color: #b91c1c;
}

.connections-alert {
  margin: 0 0 var(--space-3);
  padding: .65rem .75rem;
  border-left: 4px solid var(--danger);
  background: #fef2f2;
}

.notice-form {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.notice-form > h3 { margin-bottom: .1rem; }

.notice-form input,
.notice-form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: .55rem;
  font: inherit;
  border: 1px solid #94a3b8;
  border-radius: .35rem;
}

/* The surrounding notice-checkbox-setting label retains the 44px tap target. */
.notice-form .notice-checkbox-setting input { width: 1.25rem; height: 1.25rem; min-height: 1.25rem; margin: 0; padding: 0; flex-shrink: 0; accent-color: var(--accent); }
.room-intake-settings { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.room-intake-settings > label { display: grid; gap: var(--space-2); }
.notice-form label.notice-checkbox-setting { display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; }

.notice-setting-group {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.notice-setting-group + .notice-setting-group {
  margin-top: .25rem;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.notice-setting-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.notice-setting-heading h4,
.notice-slot-editor h4 {
  margin: 0;
  font-size: 1rem;
}

.notice-marker-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: .1rem .55rem;
  color: #1458b8;
  background: var(--accent-soft);
  border: 1px solid #c9daf4;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 750;
}

.notice-marker-status.is-modified {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fdba74;
}

.notice-marker-help,
.notice-marker-stored {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.notice-marker-stored { color: #9a4d09; }

.notice-marker-example {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: center;
  min-height: 2.75rem;
  overflow: hidden;
  background: #f1f5f9;
  border-radius: .4rem;
}

.notice-marker-example strong,
.notice-marker-example span {
  padding: .65rem .75rem;
}

.notice-marker-example strong {
  height: 100%;
  background: #e8eef6;
  font-size: .88rem;
}

.notice-marker-example span {
  overflow-wrap: anywhere;
}

.notice-slot-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  min-height: 2.25rem;
}

.notice-slot-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .3rem .35rem .3rem .7rem;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid #86b7f2;
  border-radius: .4rem;
  font-weight: 650;
}

.notice-slot-remove {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
}

.notice-slot-remove:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); }
.notice-slot-editor > label { margin-bottom: -.2rem; }
.notice-slot-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.notice-slot-add-row input { margin-top: 0; min-height: 2.75rem; }
.notice-slot-add-row button { min-width: 8rem; }
.notice-slot-help, .notice-slot-feedback, .notice-settings-dirty { margin: 0; font-size: .84rem; }
.notice-slot-help { color: var(--muted); }
.notice-slot-feedback { color: var(--danger); font-weight: 650; }
.notice-settings-dirty { color: var(--accent); }

.notice-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: .7rem;
  background: #eff6ff;
  border: 1px solid #93c5fd;
  border-radius: .35rem;
}

.topic-page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.topic-page-title > div { min-width: 0; }
.topic-page-title > button { flex: 0 0 auto; }

.topic-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
}
.topic-create-form label { grid-column: 1 / -1; }
.topic-create-form input { margin-top: 0; }

/* The '?' and its popover. Named for what it is rather than for the first screen that
   used it: the network view now builds the same control in JS (ui-primitives.js).
   The anchor is the positioning context for a popover it contains; the topic screen's
   markup keeps the popover as a sibling and positions against .topic-master-title. */
.help-anchor { position: relative; display: inline-flex; align-items: center; }
.help-button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--muted);
  background: var(--surface);
  border-color: #94a3b8;
  border-radius: 999px;
  font-size: .8125rem;
  line-height: 1;
}
.help-button:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.help-popover {
  position: absolute;
  z-index: 4;
  top: calc(100% + .25rem);
  left: 0;
  width: min(24rem, calc(100vw - 3rem));
  display: grid;
  gap: .3rem;
  padding: 1rem;
  color: #334155;
  background: var(--surface);
  border: 1px solid #b9c6d8;
  border-radius: .65rem;
  box-shadow: 0 .65rem 1.6rem rgb(15 23 42 / .16);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
}
.help-popover strong { margin-bottom: .25rem; color: var(--ink); font-size: .9rem; }
.help-popover b { margin-top: .3rem; color: #334155; }

.topic-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .5rem; margin: 0; padding: .65rem; }
.topic-edit-guidance { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.topic-edit-guidance { color: var(--accent); }

.topic-management-toggle { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; }
.topic-management-toggle input,
input.topic-management-toggle {
  appearance: none;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 1.4rem;
  /* components.css gives every input a 44px touch target. A switch that tall renders as a
     fat pill with the knob floating at the top, so the track keeps its own height and the
     associated <label for> carries the tap area instead. */
  min-height: 1.4rem;
  margin: 0;
  padding: .15rem;
  border: 0;
  border-radius: 999px;
  background: #b9c6d8;
  transition: background-color .15s ease;
}
.topic-management-toggle input::before,
input.topic-management-toggle::before {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / .25);
  content: "";
  transition: transform .15s ease;
}
.topic-management-toggle input:checked,
input.topic-management-toggle:checked { background: var(--accent); }
.topic-management-toggle input:checked::before,
input.topic-management-toggle:checked::before { transform: translateX(1.05rem); }

.topic-routing-detail-body { padding: 0; }

.topic-routing-chats {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}


.notice-detail {
  margin-top: .75rem;
  padding: .75rem;
  border: 1px solid #dbe3ee;
  border-radius: .45rem;
}

.notice-feedback {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

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

#notice-queue-list.is-stale {
  border-left: 3px solid #f59e0b;
  padding-left: var(--space-2);
}

.notice-detail-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.notice-detail-section h4 {
  margin-bottom: var(--space-2);
}

.table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.table-scroll > * { min-width: min-content; }
.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th, .table td { padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { color: var(--muted); background: var(--surface-muted); font-weight: 700; }
.audit-table-scroll { margin-top: var(--space-3); }
.audit-table { min-width: 46rem; }
.audit-table td { overflow-wrap: anywhere; }
.audit-search { margin-top: var(--space-3); }
.audit-search-controls { display: flex; align-items: center; gap: var(--space-2); }
.audit-search-controls input { flex: 1 1 24rem; min-width: 10rem; margin-top: 0; }
.audit-search-controls button { flex: 0 0 auto; }
.audit-page-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.audit-page-footer p { margin: 0; white-space: nowrap; }
.audit-pagination, .audit-page-numbers { display: flex; align-items: center; gap: .35rem; }
.audit-pagination button { min-width: 2.75rem; min-height: 2.75rem; padding: .4rem .65rem; }
.audit-page-number { color: var(--accent); background: var(--surface); border-color: #b9c8dc; }
.audit-page-number:hover:not(:disabled) { color: #fff; background: var(--accent); border-color: var(--accent); }
.audit-page-number[aria-current="page"] { color: #fff; background: var(--accent); border-color: var(--accent); opacity: 1; }

.admin-account-page-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.admin-account-page-title > div { min-width: 0; }
.admin-account-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.admin-account-summary .dashboard-section { margin-top: 0; text-align: left; }
.admin-account-summary .metric-card { padding: var(--space-4); }
.admin-account-summary .metric-card + .metric-card { border-left: 1px solid var(--line); }
.admin-account-summary .metric-card strong { text-align: left; }
.admin-account-list-panel { margin-top: var(--space-3); }
.admin-account-toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto auto; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.admin-account-toolbar input { margin-top: 0; }
.admin-account-status-filter { display: flex; gap: .35rem; }
.admin-account-status-filter button.is-active { color: #fff; background: var(--accent); }
.admin-account-table-scroll { margin-top: var(--space-3); }
.admin-account-table { min-width: 54rem; }
.admin-account-table td { vertical-align: middle; overflow-wrap: anywhere; }
.admin-account-context { display: block; margin-top: .2rem; color: var(--muted); font-size: .8125rem; }
.admin-status-inactive { color: #475569; background: #e9eef5; }
.admin-recovery-badge { display: inline-flex; padding: .2rem .5rem; color: #1459bd; background: var(--accent-soft); border-radius: 999px; font-size: .8125rem; font-weight: 750; }
/* 40px, not 44px: this sits inline in a dense account table row whose own cell padding
   extends the hit area past the button box. Kept above the 24px WCAG 2.2 minimum. */
.admin-disable-button { min-height: 2.5rem; padding: .4rem .7rem; color: var(--danger); background: #fff; border-color: #dc6d66; }
.admin-disable-button:hover:not(:disabled) { color: #fff; background: var(--danger); border-color: var(--danger); }
.admin-account-page-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.admin-account-page-footer p { margin: 0; }
.admin-account-pagination { display: flex; gap: .35rem; }
.admin-account-info { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: .75rem; color: #1459bd; background: var(--accent-soft); border: 1px solid #b8d3f8; border-radius: .5rem; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: var(--space-3); background: rgb(8 26 49 / .58); overflow-y: auto; }
.modal-card { width: min(44rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: var(--space-4); background: #fff; border: 1px solid var(--line); border-radius: .75rem; box-shadow: 0 1.25rem 3rem rgb(8 26 49 / .25); }
.modal-heading { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.modal-heading h3 { margin-bottom: .25rem; }
.modal-heading p { margin: 0; color: var(--muted); }
.admin-account-form { display: grid; gap: var(--space-2); min-width: 0; }
.admin-account-form input { margin-top: .25rem; }
.admin-account-checkbox { display: flex; align-items: flex-start; gap: .55rem; font-weight: 600; }
/* A native checkbox stretched to 44px draws a giant box next to normal-sized text. The
   wrapping .admin-account-checkbox label carries the tap area instead. */
.admin-account-checkbox input { width: auto; min-height: 1.25rem; margin: .15rem 0 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.admin-account-danger-modal { border-top: 5px solid var(--danger); }
.admin-account-target { display: grid; gap: .5rem; margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--surface-muted); border: 1px solid var(--line); border-radius: .5rem; }
.admin-account-target div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); }
.admin-account-target dt { font-weight: 700; }
.admin-account-target dd { margin: 0; overflow-wrap: anywhere; }
.admin-account-impact { margin-bottom: var(--space-3); padding: var(--space-3); color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem; }
.admin-account-impact h4 { margin-bottom: .5rem; }
.admin-account-impact ul { margin: 0; padding-left: 1.25rem; }

.notice-row {
  margin: .35rem 0;
  overflow-wrap: anywhere;
}

input, select, textarea,
.topbar-actions,
.service-status {
  min-width: 0;
}

[hidden] {
  display: none !important;
}

@media (max-width: 56.25rem) {
  .topbar-primary { align-items: flex-start; padding: var(--space-3) 0; }
  .topbar-actions { flex-wrap: wrap; }
  .topbar-actions .muted { flex: 1 1 100%; text-align: right; }
  .service-status { padding: var(--space-2) 0; }
  .operations-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .operations-sidebar { display: flex; gap: .25rem; padding: var(--space-2); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .operations-nav-button { width: auto; flex: 0 0 auto; margin: 0; white-space: nowrap; }
  .operations-content { padding: var(--space-4); }
}

@media (max-width: 40rem) {
  #loading-view, #login-view { width: 100%; margin: 0; padding: var(--space-4); border-width: 0; border-radius: 0; }
  .section-heading-row { align-items: stretch; flex-direction: column; }
  .operations-topbar { min-height: 0; padding: 0 var(--space-3) var(--space-3); }
  .topbar-primary { min-height: 4.5rem; padding: 0; align-items: center; border-bottom: 0; }
  .topbar-identity { align-items: center; flex-direction: row; }
  .topbar-identity #account-summary, .topbar-actions { display: none; }
  .mobile-account-menu-button { display: grid; width: 2.75rem; min-height: 2.75rem; padding: 0; place-items: center; border-radius: 999px; font-size: 1.15rem; }
  .mobile-account-popover { position: absolute; z-index: 3; top: 4rem; right: var(--space-3); width: min(18rem, calc(100% - 2rem)); padding: var(--space-2); border: 1px solid #52647a; border-radius: .65rem; background: #10243d; box-shadow: 0 .75rem 2rem rgb(0 0 0 / .24); }
  .mobile-account-popover:not([hidden]) { display: grid; gap: var(--space-2); }
  .mobile-account-popover .muted { margin: 0; font-size: .8125rem; overflow-wrap: anywhere; }
  .mobile-service-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; padding: .65rem; border: 1px solid #52647a; border-radius: .7rem; }
  .mobile-service-toggle { min-height: 2.75rem; padding: .35rem .5rem; display: flex; align-items: center; gap: .55rem; color: #fff; background: transparent; border: 0; text-align: left; }
  .mobile-service-toggle:hover:not(:disabled) { background: rgb(255 255 255 / .06); border-color: transparent; }
  .mobile-service-summary { position: relative; padding-left: 1rem; font-weight: 800; }
  .mobile-service-summary::before { position: absolute; left: 0; top: 50%; width: .55rem; height: .55rem; border-radius: 999px; background: #94a3b8; content: ""; transform: translateY(-50%); }
  .mobile-service-summary.is-ready::before { background: #4ade80; box-shadow: 0 0 0 .18rem rgb(74 222 128 / .15); }
  .mobile-service-summary.is-unready::before { background: #fb923c; }
  .mobile-disclosure-label { margin-left: auto; color: #cbd5e1; font-size: .8125rem; }
  .mobile-refresh-status { grid-column: 1; margin: -.25rem 0 0 1.5rem; color: #b8c6d8; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-refresh-button { grid-column: 2; grid-row: 1 / 3; min-height: 2.75rem; align-self: center; color: #fff; background: #10243d; border-color: #52647a; }
  .service-status { display: none; min-height: 0; padding: var(--space-2) .65rem 0; align-items: flex-start; flex-direction: column; gap: .45rem; }
  .service-status.is-mobile-expanded { display: flex; }
  .section-heading-row button { width: 100%; }
  .operations-content { padding: var(--space-3); }
  .topic-page-title { align-items: stretch; flex-direction: column; }
  .topic-page-title > button { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .metric-card { min-width: 0; padding: .35rem .25rem; }
  .metric-card + .metric-card { border-left: 1px solid var(--line); border-top: 0; }
  .metric-card span { font-size: .8125rem; line-height: 1.3; overflow-wrap: anywhere; }
  .metric-card strong { font-size: 1.5rem; }
  .dashboard-recent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dashboard-row-time { grid-column: 1 / -1; }
  .dashboard-section { padding: var(--space-3); }
  .topbar-actions { justify-items: stretch; }
  .topbar-actions .muted { white-space: normal; overflow-wrap: anywhere; }
  .panel-actions { width: 100%; justify-content: stretch; }
  .panel-actions > * { flex: 1 1 auto; }
  .notice-marker-example { grid-template-columns: 1fr; }
  .notice-marker-example strong { height: auto; }
  .notice-slot-add-row { grid-template-columns: 1fr; }
  .notice-slot-add-row button { width: 100%; }
  .topic-create-form { grid-template-columns: 1fr; }
  .audit-search-controls { align-items: stretch; flex-wrap: wrap; }
  .audit-search-controls input { flex-basis: 100%; }
  .audit-search-controls button { flex: 1 1 auto; }
  .audit-page-footer { align-items: stretch; flex-direction: column; }
  .audit-page-footer p { white-space: normal; }
  .audit-pagination { flex-wrap: wrap; justify-content: center; }
  .admin-account-page-title { flex-direction: column; }
  .admin-account-page-title > button { width: 100%; }
  .admin-account-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-account-summary .metric-card { padding: var(--space-2); }
  .admin-account-toolbar { grid-template-columns: 1fr 1fr; }
  .admin-account-toolbar input, .admin-account-status-filter { grid-column: 1 / -1; }
  .admin-account-status-filter button { flex: 1 1 auto; }
  .admin-account-page-footer, .admin-account-info { align-items: stretch; flex-direction: column; }
  .admin-account-pagination { flex-wrap: wrap; }
  .admin-account-pagination button { flex: 1 1 auto; }
  .modal-card { padding: var(--space-3); }
  .admin-account-target div { grid-template-columns: 1fr; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.admin-notification-panel h3 { margin: 0 0 .35rem; }
.admin-notification-panel p { margin: .25rem 0 0; }
.admin-notification-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
}
.admin-notification-label { color: var(--ink); font-size: .9rem; line-height: 1.4; }

/* 긴급 요청은 상태가 아니라 상태 옆에 붙는 사실이다. 그래서 status badge 를 대체하지
   않고 그 뒤에 서며, 경고 색을 쓰되 위험(danger)은 쓰지 않는다 -- 잘못된 일이 아니라
   앞당겨진 일이다. */
.notice-urgent-badge { display: inline-block; margin-left: var(--space-2); padding: .1rem .5rem; color: var(--status-warning-fg); background: var(--status-warning-bg); border: 1px solid var(--warning); border-radius: 999px; font-size: .85em; font-weight: 700; }

/* 긴급 공지 확인창. 대상 요약은 관리자 계정 비활성화 확인창과 같은 형태를 쓰되, 정책
   블록은 위험(danger)이 아니라 경고 색이다 -- 막으려는 것이 아니라 무엇이 일어나고
   무엇이 일어나지 않는지 읽게 하려는 것이다. */
.notice-urgent-target { display: grid; gap: .5rem; margin: 0 0 var(--space-3); padding: var(--space-3); background: var(--surface-muted); border: 1px solid var(--line); border-radius: .5rem; }
.notice-urgent-target div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2); }
.notice-urgent-target dt { font-weight: 700; }
.notice-urgent-target dd { margin: 0; overflow-wrap: anywhere; }
.notice-urgent-policy { margin-bottom: var(--space-3); padding: var(--space-3); color: var(--status-warning-fg); background: var(--status-warning-bg); border: 1px solid var(--warning); border-radius: .5rem; }
.notice-urgent-policy h4 { margin-bottom: .5rem; }
.notice-urgent-policy ul { margin: 0; padding-left: 1.25rem; }

.topic-delete-dialog { position: fixed; inset: 5vh max(1rem, calc((100vw - 38rem) / 2)) auto; z-index: 100; max-height: 90vh; overflow: auto; padding: 1.5rem; background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 0 0 100vmax #0008; }
.topic-delete-dialog form { display: grid; gap: 1rem; }
.topic-delete-dialog ul { max-height: 35vh; overflow: auto; padding-inline-start: 1.5rem; }
.topic-deletion-targets li { margin-block: .75rem; }