:root {
  --navy: #0f172a;
  --navy-2: #1e293b;
  --blue: #1d4ed8;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --surface: #fff;
  --panel: #fff;
  --panel-soft: #f8fafc;
  --critical: #dc2626;
  --high: #ea580c;
  --normal: #2563eb;
  --low: #16a34a;
  --success: #15803d;
  --warning: #b45309;
  --radius: 14px;
  --shadow: none;
  --sans: Pretendard, 'Noto Sans KR', 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.55 var(--sans);
}
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 254px 1fr;
}
.sidebar {
  color: #dfeafc;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 3px 12px 25px;
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-title3);
}
.brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font: 700 var(--fs-body) var(--mono);
}
.workspace {
  font: var(--fs-micro) var(--mono);
  letter-spacing: 0.08em;
  color: #9fb7d2;
  padding: 0 12px 9px;
}
.nav {
  display: grid;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
}
.nav button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  gap: 11px;
  align-items: center;
}
.nav button:hover,
.nav button.active {
  color: #fff;
}
.nav .section {
  font-size: var(--fs-micro);
  color: #9aaec2;
  letter-spacing: 0.08em;
  padding: 18px 12px 5px;
}
.nav .indent {
  padding-left: 34px;
  font-size: var(--fs-callout);
}
.side-user {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 11px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.side-user b {
  display: block;
  color: #f4f8ff;
  font-size: var(--fs-caption);
}
.side-user small {
  color: #b6c7dd;
}
.main {
  min-width: 0;
}
.topbar {
  height: 68px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}
.local-clock {
  font: var(--fs-caption) var(--mono);
  color: #475569;
}
.icon-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  width: 34px;
  height: 34px;
  cursor: pointer;
  position: relative;
  color: var(--ink);
}
.count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--critical);
  color: #fff;
  border-radius: 9px;
  min-width: 16px;
  font-size: var(--fs-micro);
  padding: 2px;
}
.page {
  padding: 24px 28px 40px;
  max-width: 1800px;
  margin: auto;
}
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 19px;
}
.page-head h1 {
  font-size: var(--fs-title1);
  margin: 0 0 4px;
}
.page-head p {
  color: var(--muted);
  margin: 0;
}
.button {
  color: white;
  padding: 9px 13px;
  font: 600 var(--fs-callout) var(--sans);
  cursor: pointer;
}
.button.secondary {
  border: 1px solid #cbd6e1;
}
.button.danger {
  background: var(--critical);
}
.button.sm {
  padding: 6px 9px;
  font-size: var(--fs-caption);
}
.shift-card {
  border: 1px solid var(--line);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.shift-card .team {
  font-weight: 700;
}
.shift-card .tz {
  font: var(--fs-micro) var(--mono);
  color: var(--muted);
  margin-left: 7px;
}
.shift-card .time {
  font: 600 var(--fs-display) var(--mono);
  margin: 12px 0 8px;
}
.shift-card .time small {
  font: var(--fs-micro) var(--sans);
  font-weight: 400;
  color: var(--muted);
}
.online {
  color: var(--success);
  font-size: var(--fs-caption);
}
.offline {
  color: var(--muted);
  font-size: var(--fs-caption);
}
.timeline {
  height: 12px;
  background: #dbe3ec;
  border-radius: 8px;
  overflow: hidden;
  margin: 4px 0 14px;
  display: flex;
}
.timeline span {
  display: block;
  height: 100%;
}
.timeline .kr {
  width: 57%;
  background: #347ecb;
}
.timeline .us {
  width: 43%;
  background: #587396;
}
.kpi strong {
  font-size: var(--fs-display);
}
.kpi.critical strong {
  color: var(--critical);
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(430px, 45fr) minmax(330px, 35fr) minmax(220px, 20fr);
  gap: 15px;
}
.panel {
  border: 1px solid var(--line);
  min-width: 0;
}
.panel-head {
  padding: 14px 15px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-head h2 {
  font-size: var(--fs-body);
  margin: 0;
}
.panel-body {
  padding: 13px 15px;
}
.alert {
  margin-bottom: 16px;
  border: 1px solid #f0c5c8;
  border-radius: 8px;
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8a2731;
}
.task-list {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
}
.task-list th {
  text-align: left;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.task-list td {
  padding: 10px 6px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
}
.task-list tr:last-child td {
  border: 0;
}
.task-list tbody tr {
  cursor: pointer;
}
.task-id {
  font: 600 var(--fs-micro) var(--mono);
  color: #41617e;
  white-space: nowrap;
}
.task-title {
  font-weight: 600;
  max-width: 180px;
}
.subtext {
  font-size: var(--fs-micro);
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.badge {
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: 10px;
  padding: 3px 7px;
  white-space: nowrap;
  display: inline-block;
}
.priority-critical {
  background: #fde8ea;
  color: #ae2531;
}
.priority-high {
  background: #fff0e4;
  color: #bc5915;
}
.priority-normal {
  background: #e8f1fd;
  color: #2365b4;
}
.priority-low {
  background: #e9f5ed;
  color: #34734a;
}
.status-new {
  background: #edf1f5;
  color: #57697b;
}
.status-in-progress {
  background: #e6f0ff;
  color: #2166bd;
}
.status-waiting {
  background: #fff3db;
  color: #9e650d;
}
.status-handover {
  background: #f1eafe;
  color: #6842a4;
}
.status-scheduled {
  background: #e7f7f7;
  color: #217478;
}
.status-completed {
  background: #e6f5ed;
  color: #28734b;
}
.status-cancelled {
  background: #f2f3f5;
  color: #6c727a;
}
.handover-card {
  padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}
.handover-card h3 {
  font-size: var(--fs-callout);
  margin: 0 0 5px;
}
.handover-card p {
  font-size: var(--fs-caption);
  color: #53687d;
  line-height: 1.55;
  margin: 7px 0;
}
.meta {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.candidate {
  border: 1px solid #e2d8f2;
  background: #fbf9ff;
  border-radius: 7px;
  padding: 9px;
  margin: 9px 0;
  font-size: var(--fs-caption);
}
.todo {
  display: flex;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f5;
  align-items: flex-start;
}
.todo:last-child {
  border: 0;
}
.todo input {
  margin-top: 3px;
  accent-color: var(--blue);
}
.todo.done span {
  text-decoration: line-through;
  color: var(--muted);
}
.event-row {
  padding: 9px 0;
  border-bottom: 1px solid #eef1f5;
  font-size: var(--fs-caption);
}
.event-row:last-child {
  border: 0;
}
.event-row time {
  font: var(--fs-micro) var(--mono);
  color: #53687d;
  display: block;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.input,
.select,
textarea {
  font: var(--fs-callout) var(--sans);
  border: 1px solid #cfd9e4;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 8px 9px;
}
.input:focus,
.select:focus,
textarea:focus {
  outline: 2px solid #bdd8f7;
}
.input.search {
  width: 255px;
}
.table-wrap {
  overflow: auto;
}
/* Table panels already remove body padding. Negative mobile margins clip their scroll area. */
.panel-body > .table-wrap {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.team-members-table:focus-visible {
  outline: 2px solid var(--accent, #3274f7);
  outline-offset: 2px;
}
.work-current {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 12px;
  background: #f3f6fa;
  border-radius: 8px;
  font-size: var(--fs-callout);
}
.work-current > span {
  color: var(--text-muted, #697386);
}
.work-effective-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-effective-controls[hidden] {
  display: none;
}
.member-editor,
.member-section,
.work-effective-field {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.member-editor {
  gap: 24px;
}
.member-section + .member-section {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.member-section h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 650;
}
.member-profile {
  display: block;
}
.member-profile summary {
  cursor: pointer;
  font-size: var(--fs-callout);
  font-weight: 600;
}
.member-profile > .form-grid {
  margin-top: 14px;
}
.member-active {
  align-self: end;
}
.member-active .runbook-default-check {
  margin: 0;
  min-height: 34px;
  background: none;
  border: 0;
  padding: 6px 0;
}
.work-current b {
  min-width: 0;
  overflow-wrap: anywhere;
}
.work-apply-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.work-apply-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: #465b6d;
}
.work-apply-options {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #f0f3f7;
}
.work-apply-options .button {
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  background: transparent;
  color: #5e6c7d;
}
.work-apply-options .button[aria-pressed='true'] {
  background: white;
  color: #205cc4;
  box-shadow: 0 1px 4px #18294118;
}
.work-effective-controls label {
  align-self: center;
  margin: 0;
}
.work-effective-preview {
  color: #697386;
  font-size: var(--fs-caption);
}
.work-reservations {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #697386;
  font-size: var(--fs-caption);
}
.work-reservations > span {
  padding-top: 8px;
}
.work-reservations > div {
  display: grid;
  gap: 6px;
}
.work-reservation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d8e0eb;
  background: white;
  border-radius: 6px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.work-reservation b {
  color: #34465b;
  overflow-wrap: anywhere;
}
.work-reservation > span:last-child {
  color: #205cc4;
  margin-left: auto;
}
.work-timezone {
  color: #697386;
  font-size: var(--fs-caption);
}
.work-timezone summary {
  cursor: pointer;
  padding: 4px 0;
}
.work-timezone .field {
  margin-top: 10px;
}
.work-form-error {
  margin: 0 16px 12px;
  padding: 12px;
  border: 1px solid #e5b6b6;
  background: #fff5f5;
  border-radius: 8px;
  color: #a12a2a;
  font-size: var(--fs-callout);
  overflow-wrap: anywhere;
}
.account-page .work-form-error {
  grid-column: 1 / -1;
  margin: 0;
}
.work-effective-controls .input {
  flex: 1 1 180px;
  min-width: 0;
}
.work-effective-controls .button {
  flex: 0 0 auto;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.data-table th {
  color: #5d7185;
  text-align: left;
  font-size: var(--fs-micro);
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  white-space: nowrap;
}
.data-table td {
  font-size: var(--fs-caption);
  padding: 12px;
  border-bottom: 1px solid #edf0f4;
}
.data-table tr:last-child td {
  border: 0;
}
.data-table tbody tr {
  cursor: pointer;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.empty {
  padding: 38px 15px;
  text-align: center;
  color: var(--muted);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-grid .wide {
  grid-column: 1/-1;
}
.field label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  margin-bottom: 5px;
  color: #465b6d;
}
.field .input,
.field .select,
.field textarea {
  width: 100%;
}
.field textarea {
  min-height: 88px;
  resize: vertical;
}
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(270px, 1fr);
  gap: 16px;
}
.detail-header {
  border: 1px solid var(--line);
  padding: 18px;
  margin-bottom: 16px;
}
.detail-header .heading {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.detail-header h1 {
  font-size: var(--fs-title1);
  margin: 0;
}
.description {
  white-space: pre-wrap;
  line-height: 1.7;
  color: #405468;
}
.info-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid #edf0f4;
  margin-top: 18px;
}
.info-list div {
  padding: 10px 0;
  border-bottom: 1px solid #edf0f4;
}
.info-list label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.timeline-event {
  border-left: 2px solid #d4e0ed;
  margin-left: 6px;
  padding: 0 0 17px 15px;
  position: relative;
}
.timeline-event:before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4d84be;
  left: -5px;
  top: 4px;
}
.timeline-event h4 {
  margin: 0;
  font-size: var(--fs-caption);
}
.timeline-event p {
  margin: 4px 0;
  color: #566b80;
  font-size: var(--fs-caption);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 28, 45, 0.45);
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal {
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 10px;
}
.modal-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h2 {
  font-size: var(--fs-title3);
  margin: 0;
}
.close {
  border: 0;
  background: none;
  font-size: var(--fs-title1);
  color: #64778a;
  cursor: pointer;
}
.modal-body {
  padding: 18px;
}
.modal-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  gap: 18px;
  margin-bottom: 15px;
}
.tabs button {
  border: 0;
  background: none;
  padding: 9px 1px;
  color: var(--muted);
  font: 600 var(--fs-caption) var(--sans);
  cursor: pointer;
}
.tabs button.active {
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
}
.settings-row {
  padding: 13px 0;
  border-bottom: 1px solid #edf0f4;
  display: flex;
  gap: 16px;
  align-items: center;
}
.settings-row:last-child {
  border: 0;
}
.settings-row > div:first-child {
  flex: 1;
}
.settings-row h3 {
  font-size: var(--fs-callout);
  margin: 0 0 3px;
}
.settings-row p {
  font-size: var(--fs-micro);
  color: var(--muted);
  margin: 0;
}
.toast {
  background: #1e354e;
  color: #fff;
  padding: 10px 13px;
  border-radius: 7px;
  margin-top: 8px;
  font-size: var(--fs-caption);
}
#toast-root {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
}
.hidden {
  display: none !important;
}
/* 휴가 등록 모달의 날짜 선택 달력. 클릭할 때마다 종일 → 오전 반차 → 오후 반차 → 해제로
   순환하므로, 상태를 색으로 구분하고 반차는 오전/오후 표시를 함께 보여준다. */
.leave-calendar {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.leave-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
/* 첫 줄(요일 이름)만 내용에 맞추고 날짜 줄은 모두 같은 높이로 못 박는다. 자동 높이로
   두면 달의 첫 주에 빈 칸이 섞였을 때 그 줄만 키가 달라진다. */
.leave-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: 40px;
  gap: 3px;
}
.leave-cal-dow {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--muted);
  padding: 2px 0;
}
.leave-cal-cell {
  min-height: 38px;
  border: 1px solid #e3e9f0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 600 var(--fs-caption) var(--sans);
  cursor: pointer;
  display: grid;
  place-content: center;
  line-height: 1.2;
}
/* 전역 .empty 는 padding:38px 을 준다. 달력 빈 칸에 그 이름을 쓰면 그 줄만 두 배로
   커지므로 여기서는 다른 이름을 쓴다. */
.leave-cal-blank {
  border: 0;
  background: none;
  cursor: default;
}
.leave-cal-cell.today {
  border-color: var(--blue);
}
.leave-cal-cell:hover:not(.leave-cal-blank) {
  background: #eef4fb;
}
.leave-cal-cell.picked {
  color: #fff;
  border-color: transparent;
}
.leave-cal-cell.picked.full {
  background: #2166bd;
}
.leave-cal-cell.picked.am,
.leave-cal-cell.picked.pm {
  background: #6842a4;
}
.leave-cal-cell em {
  display: block;
  font-size: var(--fs-micro);
  font-style: normal;
  opacity: 0.9;
}
.leave-picked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
@media (max-width: 1100px) {
  .shell {
    grid-template-columns: 66px 1fr;
  }
  .sidebar {
    padding: 20px 8px;
  }
  .brand {
    padding: 3px 10px 25px;
  }
  .brand span,
  .workspace,
  .nav .section,
  .nav button span,
  .side-user div {
    display: none;
  }
  .nav button {
    justify-content: center;
    padding: 11px;
  }
  .nav .indent {
    padding-left: 11px;
  }
  .side-user {
    justify-content: center;
    padding: 9px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
  }
  .dashboard-grid > .panel:last-child {
    grid-column: span 2;
  }
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 760px) {
  .page {
    padding: 17px;
  }
  .topbar {
    padding: 0 17px;
  }
  .dashboard-grid,
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .dashboard-grid > .panel:last-child {
    grid-column: auto;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .top-actions .local-clock {
    display: none;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .task-list th:nth-child(5),
  .task-list td:nth-child(5),
  .task-list th:nth-child(6),
  .task-list td:nth-child(6) {
    display: none;
  }
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cal-head {
  min-width: 0;
  padding: 8px;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--muted);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cal-cell {
  min-width: 0;
  min-height: 108px;
  padding: 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-caption);
}
/* 날짜 옆에 공휴일이 붙는다. 줄을 따로 만들면 근무 세 줄 위에 공휴일 한 줄이 더 쌓여,
   매일 보는 근무가 배경 정보에 밀린다. */
.cal-daynum {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  margin-bottom: 5px;
}
.cal-daynum > b {
  flex: none;
}
/* 겹치는 날(신정·성탄절)에는 둘이 나란히 서고 각자 줄어든다. 색만으로 가르지 않고 KR /
   LA 를 앞에 적는 이유는, 색을 구별하기 어려운 사람에게 색뿐이면 아무것도 남지 않기
   때문이다. 전체 이름은 title 로 남는다. */
.cal-holiday-tag {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 3px;
  padding: 1px 4px;
  font: 700 var(--fs-micro)/1.5 var(--sans);
}
.cal-holiday-tag.is-kr {
  background: #fce8eb;
  color: #aa3342;
}
.cal-holiday-tag.is-la {
  background: #e7f0fd;
  color: #285f9f;
}
.muted-day {
  background: #fbfcfd;
  color: #aab4bf;
}
.today-cell .cal-daynum > b {
  color: var(--blue);
}
.cal-event {
  display: block;
  min-width: 0;
  width: 100%;
  border: 0;
  background: #e7f0fd;
  color: #245d9f;
  border-radius: 3px;
  text-align: left;
  font: var(--fs-micro)/1.35 var(--sans);
  padding: 3px 4px;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.language-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 12;
  border: 0;
  border-radius: 22px;
  color: #fff;
  padding: 10px 15px;
  font: 600 var(--fs-caption) var(--sans);
  cursor: pointer;
}
.shift-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 14px;
  margin-bottom: 17px;
}
.shift-overview-main,
.shift-countdown {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shift-overview-main {
  padding: 16px 18px;
}
.shift-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
}
.shift-overview-head h2 {
  font-size: var(--fs-body);
  margin: 0 0 2px;
}
.shift-overview-head p {
  font-size: var(--fs-micro);
  color: var(--muted);
  margin: 0;
}
.coverage-badge {
  font: 700 var(--fs-micro) var(--mono);
  letter-spacing: 0.03em;
  color: #176346;
  background: #e8f5ed;
  border-radius: 999px;
  padding: 5px 8px;
}
.shift-row {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 16px;
}
.shift-row + .shift-row {
  border-top: 1px solid #edf1f5;
}
.shift-row-label {
  padding-top: 4px;
}
.shift-row-label b {
  display: block;
  font-size: var(--fs-callout);
}
.shift-row-label span {
  display: block;
  font: var(--fs-micro) var(--mono);
  color: var(--muted);
  margin-top: 2px;
}
.shift-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shift-row-meta strong {
  font: 700 var(--fs-title3) var(--mono);
  letter-spacing: -0.03em;
}
.shift-row-meta strong small {
  font: var(--fs-micro) var(--sans);
  color: var(--muted);
  letter-spacing: 0;
}
.shift-row-meta .online,
.shift-row-meta .offline {
  font: 700 var(--fs-micro) var(--mono);
}
.shift-rail {
  position: relative;
  overflow: visible;
  border: 1px solid #dce5ee;
}
.shift-segment {
  position: absolute;
}
.shift-now {
  position: absolute;
  z-index: 2;
}
.shift-now i {
  position: absolute;
  border-radius: 50%;
}
.shift-now em {
  position: absolute;
  top: -15px;
  left: 5px;
  color: #0f2747;
  font: 700 var(--fs-micro) var(--mono);
  font-style: normal;
}
.shift-axis {
  display: flex;
  justify-content: space-between;
  font: var(--fs-micro) var(--mono);
  color: var(--text-muted);
}
.shift-range {
  font: 600 var(--fs-micro) var(--mono);
  color: #365069;
}
.shift-range span {
  font: var(--fs-micro) var(--sans);
  color: var(--muted);
  margin-left: 5px;
}
.shift-countdown {
  background: #102a43;
  border-color: #102a43;
  color: #fff;
  flex-direction: column;
}
.shift-countdown > span {
  color: #b9cce0;
  font: 700 var(--fs-micro) var(--mono);
  letter-spacing: 0.08em;
}
.shift-countdown > strong {
  font: 700 32px var(--mono);
  letter-spacing: -0.06em;
}
.shift-countdown > p {
  font-size: var(--fs-micro);
  color: #c3d4e6;
  margin: 0;
}
.shift-countdown > div {
  border-top: 1px solid rgba(255, 255, 255, 0.17);
}
.shift-countdown b {
  font-size: var(--fs-caption);
  display: block;
}
.shift-countdown small {
  display: block;
  font: var(--fs-micro)/1.5 var(--mono);
  color: #b8cde1;
  margin-top: 3px;
}
@media (max-width: 900px) {
  .shift-overview {
    grid-template-columns: 1fr;
  }
  .shift-countdown {
    min-height: 130px;
  }
}
@media (max-width: 600px) {
  .shift-overview-main {
    padding: 13px;
  }
  .shift-overview-head {
    gap: 8px;
  }
  .coverage-badge {
    font-size: var(--fs-micro);
  }
  .shift-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .shift-row-label {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 0;
  }
  .shift-row-label span {
    margin: 0;
  }
  .shift-countdown > strong {
    font-size: var(--fs-display);
  }
}
.dashboard-grid .task-list {
  table-layout: fixed;
}
.dashboard-grid .task-list th:nth-child(1) {
  width: 84px;
}
.dashboard-grid .task-list th:nth-child(2) {
  width: 92px;
}
.dashboard-grid .task-list th:nth-child(4) {
  width: 110px;
}
.dashboard-grid .task-list th:nth-child(5) {
  width: 105px;
}
.dashboard-grid .task-list th:nth-child(6),
.dashboard-grid .task-list td:nth-child(6),
.dashboard-grid .task-list th:nth-child(7),
.dashboard-grid .task-list td:nth-child(7) {
  display: none;
}
.dashboard-grid .task-list td {
  white-space: nowrap;
}
.dashboard-grid .task-list .task-title,
.dashboard-grid .task-list .subtext {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-grid .task-list .task-title {
  font-size: var(--fs-caption);
  line-height: 1.35;
}
.dashboard-grid .task-list .subtext {
  line-height: 1.35;
}
.candidate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-status {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-active);
  color: var(--text-secondary);
}
.status-maintenance {
  background: #fef3c7;
  color: #b45309;
}
.status-spare {
  background: #e2e8f0;
  color: #475569;
}
.inventory-table td {
  vertical-align: middle;
}
.inventory-table .subtext {
  margin-top: 2px;
}

/* Enterprise cloud / infrastructure theme */
:root {
  --navy: #102a43;
  --navy-2: #163b63;
  --blue: #1e4f91;
  --blue-hover: #173e72;
  --ink: #172b4d;
  --muted: #5f7188;
  --line: #d8e2ed;
  --bg: #f8fafc;
  --surface: #fff;
  --panel: #fff;
  --panel-soft: #f8fafc;
  --radius: 8px;
  --shadow: none;
}
.sidebar {
  background: var(--navy);
  border-right-color: #0b2038;
}
.brand-mark,
.avatar {
  background: #2c6098;
  box-shadow: none;
}
.nav button {
  border-radius: 6px;
  transition: none;
}
.nav button:hover,
.nav button.active {
  background: #1b4778;
  box-shadow: none;
}
.side-user {
  background: #163b63;
  border-color: #285681;
  border-radius: 7px;
}
.topbar {
  background: #fff;
  backdrop-filter: none;
}
.button {
  background: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 6px;
}
.button:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  filter: none;
}
.button.secondary {
  background: #fff;
  color: #1e4f91;
  border-color: #c5d4e4;
}
.button.secondary:hover {
  background: #f5f9fd;
  border-color: #9fb9d4;
}
.shift-card,
.kpi,
.panel,
.detail-header {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--radius);
}
.kpi:hover {
  border-color: #aebfd1;
}
.alert {
  background: #fff8f8;
  border-color: #f1c6cb;
}
.input,
.select,
textarea {
  border-color: #cbd8e6;
}
.input:focus,
.select:focus,
textarea:focus {
  outline-color: #c7dbf1;
  border-color: #6f9dce;
}
.data-table th,
.cal-head {
  background: #f8fafc;
}
.task-list tbody tr:hover,
.data-table tbody tr:hover {
  background: #f7fafd;
}
.language-float {
  background: #102a43;
}
.language-float:hover {
  background: #163b63;
}
.shift-countdown {
  min-height: 0;
}
.shift-countdown > strong {
  display: block;
}
.shift-countdown > p {
  line-height: 1.35;
}
.shift-overview-head {
  padding-bottom: 8px;
  margin-bottom: 0;
}
.shift-overview-head p {
  display: none;
}
.shift-row {
  padding: 8px 0 7px;
}
.shift-row-meta {
  margin-bottom: 3px;
}
.shift-range {
  margin-top: 3px;
}
.shift-axis {
  margin-top: 3px;
}
.shift-countdown {
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding: 16px 17px;
}
.shift-countdown > strong {
  font-size: var(--fs-display);
  margin: 6px 0 2px;
}
.shift-countdown > div {
  margin-top: 12px;
  padding-top: 10px;
}
.inventory-table th:nth-child(5),
.inventory-table td:nth-child(5) {
  display: table-cell;
}
@media (max-width: 700px) {
  .inventory-table {
    min-width: 640px;
  }
}
@media (max-width: 700px) {
  .inventory-page .page-head {
    flex-direction: column;
  }
}

/* Operational reports. */
.report-kpi-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.report-kpi-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
}
.report-kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.report-kpi-grid strong {
  display: block;
  margin: 3px 0;
  font: 700 var(--fs-display) var(--mono);
  color: #163b63;
}
.report-kpi-grid small {
  display: block;
  color: #64788e;
  font-size: var(--fs-micro);
}
.report-kpi-grid .attention strong {
  color: #a6640c;
}
.report-kpi-grid .fault strong,
.report-health .fault strong {
  color: #b42330;
}
.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
  gap: 12px;
}
.report-grid-bottom {
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.report-table {
  min-width: 610px;
}
.report-stock {
  color: #19704a;
  font-weight: 700;
}
.report-use {
  color: #1d5e9f;
  font-weight: 700;
}
.report-fault {
  color: #bd2735;
  font-weight: 700;
}
.report-team-list {
  display: grid;
  gap: 11px;
}
.report-team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: end;
}
.report-team-row b {
  font-size: var(--fs-caption);
}
.report-team-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.report-team-row > strong {
  font: 700 var(--fs-title3) var(--mono);
  color: #163b63;
}
.report-bar {
  grid-column: 1/-1;
  height: 6px;
  border-radius: 6px;
  background: #e8eef5;
  overflow: hidden;
}
.report-bar i {
  display: block;
  height: 100%;
  background: #3d76ae;
  border-radius: 6px;
}
.report-health {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.report-health > div {
  border: 1px solid #e1e8ef;
  border-radius: 7px;
  padding: 10px;
  background: #fbfdff;
}
.report-health span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.report-health strong {
  display: block;
  margin-top: 3px;
  font: 700 var(--fs-title1) var(--mono);
  color: #163b63;
}
.report-incidents {
  display: grid;
  gap: 8px;
}
.report-incidents > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 7px;
  align-items: start;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f5;
}
.report-incidents > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.report-incidents b {
  font-size: var(--fs-caption);
  min-width: 0;
}
.report-incidents small {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--fs-micro);
  margin-top: 2px;
}
@media (max-width: 1050px) {
  .report-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .report-grid {
    grid-template-columns: 1fr;
  }
  .report-grid-bottom {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 650px) {
  .report-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .report-grid-bottom {
    grid-template-columns: 1fr;
  }
  .report-health {
    grid-template-columns: 1fr;
  }
  .reports-page .page-head {
    flex-direction: column;
    gap: 9px;
  }
  .report-table {
    min-width: 540px;
  }
}

.report-export-actions {
  display: flex;
  gap: 7px;
}
.task-todo-link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.task-todo-link:hover {
  background: #f5f9fd;
}
.handover-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.handover-summary-strip article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
}
.handover-summary-strip span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.handover-summary-strip strong {
  display: block;
  margin: 2px 0;
  font: 700 var(--fs-display) var(--mono);
  color: #163b63;
}
.handover-summary-strip small {
  font-size: var(--fs-micro);
  color: #64788e;
}
.handover-detail-list {
  display: grid;
  gap: 16px;
}
.handover-detail {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.handover-detail:last-child {
  border: 0;
  padding-bottom: 0;
}
.handover-detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.handover-detail > header b {
  display: block;
  font: 700 var(--fs-callout) var(--mono);
  color: #173e72;
}
.handover-detail > header span,
.handover-detail > header small {
  display: block;
}
.handover-detail > header span {
  font-size: var(--fs-caption);
  font-weight: 700;
  margin-top: 2px;
}
.handover-detail > header small {
  color: var(--muted);
  font-size: var(--fs-micro);
  margin-top: 2px;
}
.handover-focus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px;
}
.handover-focus-grid section,
.handover-all-notes {
  border: 1px solid #dce6f0;
  border-radius: 7px;
  padding: 10px 11px;
  background: #fbfdff;
}
.handover-focus-grid .next-action {
  border-color: #bcd3e8;
  background: #f3f8fd;
}
.handover-focus-grid .critical-note {
  border-color: #efd0d4;
  background: #fff9f9;
}
.handover-focus-grid h3,
.handover-all-notes h3,
.handover-task-section h3 {
  margin: 0;
  color: #1c426d;
  font-size: var(--fs-micro);
}
.handover-focus-grid ul,
.handover-all-notes ul {
  margin: 7px 0 0;
  padding-left: 17px;
}
.handover-focus-grid li,
.handover-all-notes li {
  font-size: var(--fs-micro);
  line-height: 1.5;
  margin: 2px 0;
}
.handover-focus-grid p,
.handover-all-notes p {
  margin: 7px 0 0;
}
.handover-all-notes {
  margin-top: 9px;
  background: #fff;
}
.handover-task-section > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 850px) {
  .handover-focus-grid {
    grid-template-columns: 1fr;
  }
  .handover-summary-strip {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .handover-summary-strip {
    grid-template-columns: 1fr;
  }
  .report-export-actions {
    width: 100%;
  }
  .report-export-actions .button {
    flex: 1;
  }
  .handover-detail > header {
    flex-direction: column;
  }
  .handover-task-section > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}

/* Readable handover workspace: compact status, document-like content, one font rhythm. */
@font-face {
  font-family: Pretendard;
  src: url('/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
.handover-page,
.handover-page button,
.handover-page table {
  font-family: var(--sans);
}
.handover-overview {
  margin-bottom: 12px;
  border: 1px solid #cad8e6;
  border-radius: 8px;
  background: #fff;
}
.handover-overview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border-bottom: 1px solid #e6edf4;
}
.handover-overview > header > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
.handover-overview > header span {
  color: #60758b;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.handover-overview > header b {
  color: #173e72;
  font-size: var(--fs-callout);
  letter-spacing: 0.01em;
}
.handover-overview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 칸 수가 화면마다 다르다 — 인수 화면은 다섯, 관리 화면은 하나다. */
.handover-overview dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding: 0 15px;
}
.handover-overview dl > div {
  min-width: 0;
  padding: 10px 15px 11px 0;
}
.handover-overview dl > div + div {
  padding-left: 15px;
  border-left: 1px solid #e6edf4;
}
.handover-overview dt {
  color: #6b7f93;
  font-size: var(--fs-micro);
}
.handover-overview dd {
  margin: 2px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #142f4b;
  font-size: var(--fs-body);
  font-weight: 700;
}
.handover-current-panel .panel-head {
  padding: 12px 16px;
}
.handover-current-panel .panel-body {
  padding: 0 17px 15px;
}
.handover-reading-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
.handover-reading-section {
  min-width: 0;
  padding: 16px 18px 16px 0;
  border-bottom: 1px solid #e6edf4;
}
.handover-reading-section:nth-child(even) {
  padding-right: 0;
  padding-left: 18px;
  border-left: 1px solid #e6edf4;
}
.handover-reading-section h3,
.handover-task-section h3 {
  margin: 0;
  color: #173e72;
  font-size: var(--fs-callout);
  letter-spacing: -0.01em;
}
.handover-reading-section h3:before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 13px;
  margin-right: 7px;
  border-radius: 2px;
  background: #2f78ba;
  vertical-align: -2px;
}
.handover-reading-section.caution h3:before {
  background: #c43b47;
}
.handover-reading-section ul {
  margin: 8px 0 0;
  padding-left: 19px;
}
.handover-reading-section li {
  margin: 4px 0;
  color: #334e68;
  font-size: var(--ops-reading-size, var(--fs-caption));
  line-height: 1.55;
}
.handover-reading-section p {
  margin: 8px 0 0;
  font-size: var(--ops-reading-size, inherit);
}
.handover-task-section {
  margin-top: 14px;
}
.handover-task-section > div:first-child {
  margin-bottom: 8px;
}
.handover-task-section h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 5px;
  border-radius: 10px;
  background: #e7f0fa;
  color: #1d5e9f;
  font-size: var(--fs-micro);
}
.handover-task-table,
.handover-candidate-table {
  min-width: 760px;
  table-layout: fixed;
}
.handover-task-table th:nth-child(1),
.handover-candidate-table th:nth-child(1) {
  width: 90px;
}
.handover-task-table th:nth-child(2),
.handover-candidate-table th:nth-child(2) {
  width: 90px;
}
.handover-task-table th:nth-child(4),
.handover-candidate-table th:nth-child(4) {
  width: 105px;
}
.handover-task-table th:nth-child(5),
.handover-candidate-table th:nth-child(5) {
  width: 115px;
}
.handover-task-table th:nth-child(6),
.handover-candidate-table th:nth-child(6) {
  width: 140px;
}
.handover-task-table td,
.handover-candidate-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.handover-recommended,
.handover-history-panel {
  margin-top: 12px;
}
.handover-history-list {
  display: grid;
}
.handover-history-list article {
  display: grid;
  grid-template-columns: 150px minmax(250px, 0.7fr) 180px minmax(260px, 1.3fr);
  gap: 12px;
  align-items: center;
  padding: 11px 15px;
  border-bottom: 1px solid #e7edf3;
}
.handover-history-list article:last-child {
  border: 0;
}
.handover-history-list article > b {
  color: #1d5e9f;
  font-size: var(--fs-micro);
}
.handover-history-list article > span {
  display: flex;
  gap: 6px;
  color: #3d556d;
  font-size: var(--fs-micro);
}
.handover-history-list article > span strong {
  color: #718399;
  font-size: var(--fs-micro);
}
.handover-history-list time {
  color: #6a7e92;
  font-size: var(--fs-micro);
}
.handover-history-list p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #334e68;
  font-size: var(--fs-micro);
}
.handover-ack-panel {
  margin-top: 12px;
}
.handover-ack-count {
  padding: 3px 9px;
  border-radius: 10px;
  background: #e7f0fa;
  color: #1d5e9f;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.handover-ack-list {
  display: grid;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.handover-ack-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #eef2f7;
}
.handover-ack-row:last-child {
  border-bottom: 0;
}
.handover-ack-name {
  flex: 1;
  min-width: 0;
  color: #142f4b;
  font-size: var(--fs-callout);
  font-weight: 600;
}
.handover-ack-state {
  color: #2f6f3f;
  font-size: var(--fs-micro);
}
.handover-ack-state time {
  margin-left: 4px;
  color: #6a7e92;
}
.handover-ack-waiting {
  color: #b4632c;
}
/* 머리글 상자를 둘로 나눈다 — 누가 누구에게(변하지 않는 사실)와 얼마나 읽혔는가(변하는
   값)를 한 상자에 다섯 칸으로 넣으니 어느 것이 이 기록의 이름인지 읽히지 않았다. */
.handover-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.handover-cards .handover-overview {
  margin-bottom: 0;
}
/* 전달사항이 2/3, 지난 기록이 1/3. 지난 기록을 아래에 두면 교대 때 스크롤을 내려야
   보이는데, 실제로는 "그 전 근무가 뭐라고 했더라" 를 함께 놓고 읽는다. */
.handover-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: 12px;
}
.handover-columns > .panel {
  margin: 0;
}
.handover-history-links {
  display: grid;
  max-height: 620px;
  overflow-y: auto;
  padding: 0;
}
.handover-history-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  padding: 10px 15px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: none;
  text-align: left;
  cursor: pointer;
}
.handover-history-link:last-child {
  border-bottom: 0;
}
.handover-history-link:hover {
  background: #f6f9fc;
}
.handover-history-link.is-open {
  background: #eef5fc;
  box-shadow: inset 3px 0 0 #2f78ba;
}
.handover-history-link b {
  color: #1d5e9f;
  font-size: var(--fs-micro);
}
.handover-history-link time {
  color: #6a7e92;
  font-size: var(--fs-micro);
  text-align: right;
}
.handover-history-link span {
  grid-column: 1/-1;
  color: #3d556d;
  font-size: var(--fs-micro);
}
.handover-history-link p {
  grid-column: 1/-1;
  margin: 2px 0 0;
  overflow: hidden;
  color: #334e68;
  font-size: var(--fs-micro);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.handover-list-table tr.is-open td {
  background: #eef5fc;
}
.handover-list-actions {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .handover-cards,
  .handover-columns {
    grid-template-columns: 1fr;
  }
  .handover-history-links {
    max-height: none;
  }
}
.handover-ack-extra {
  padding: 2px 7px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #6a7e92;
  font-size: var(--fs-micro);
}
.handover-ack-row:not(.is-done) .handover-ack-name {
  color: #6a7e92;
}
/* 작업일은 날짜 하나와 시각 둘이 한 줄에 선다. 지난 기록을 옮겨 적을 때 셋을 함께 본다. */
.task-workdate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-workdate-row input[type='date'] {
  max-width: 180px;
}
.task-workdate-row input[type='time'] {
  max-width: 130px;
}
.task-workdate-row .task-workdate-dash {
  color: #6a7e92;
}
.task-workdate-row .field-hint {
  flex-basis: 100%;
}
@media (max-width: 900px) {
  .handover-overview dl {
    grid-template-columns: 1fr 1fr;
  }
  .handover-overview dl > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #e6edf4;
  }
  .handover-overview dl > div:nth-child(4) {
    border-top: 1px solid #e6edf4;
  }
  .handover-reading-grid {
    grid-template-columns: 1fr;
  }
  .handover-reading-section,
  .handover-reading-section:nth-child(even) {
    padding: 14px 0;
    border-left: 0;
  }
  .handover-history-list article {
    grid-template-columns: 130px 1fr 155px;
  }
  .handover-history-list p {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .handover-page .page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .handover-page .page-head .button {
    width: 100%;
  }
  .handover-overview > header {
    align-items: flex-start;
  }
  .handover-overview dl {
    grid-template-columns: 1fr;
  }
  .handover-overview dl > div,
  .handover-overview dl > div + div {
    padding: 9px 0;
    border-left: 0;
    border-top: 1px solid #e6edf4;
  }
  .handover-overview dl > div:first-child {
    border-top: 0;
  }
  .handover-history-list article {
    grid-template-columns: 1fr;
  }
  .handover-history-list p {
    grid-column: auto;
  }
}

@media print {
  .sidebar,
  .topbar,
  .language-float,
  .reports-page .page-head .report-export-actions {
    display: none !important;
  }
  .shell {
    display: block !important;
  }
  .main {
    display: block !important;
  }
  .reports-page {
    font-size: var(--fs-micro);
  }
  .reports-page .page-head {
    margin-bottom: 10px;
  }
  .report-kpi-grid {
    gap: 6px;
    margin-bottom: 7px;
  }
  .report-kpi-grid article,
  .panel {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .report-grid {
    gap: 7px;
  }
  .report-grid-bottom {
    margin-top: 7px;
  }
  .report-kpi-grid strong {
    font-size: var(--fs-title1);
  }
  .report-table {
    min-width: 0;
  }
  .report-incidents > div,
  .report-team-row {
    break-inside: avoid;
  }
}

/* Emergency field dispatch workflow. */
.dispatch-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.dispatch-summary article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
}
.dispatch-summary span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.dispatch-summary strong {
  display: block;
  margin: 2px 0;
  font: 700 var(--fs-display) var(--mono);
  color: #163b63;
}
.dispatch-summary small {
  font-size: var(--fs-micro);
  color: #64788e;
}
.dispatch-table {
  min-width: 980px;
}
.dispatch-status {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
  white-space: nowrap;
  background: #edf1f5;
  color: #526579;
}
.dispatch-requested {
  background: #fff3db;
  color: #9b650d;
}
.dispatch-dispatched {
  background: #e7f0fd;
  color: #225f9e;
}
.dispatch-on-site {
  background: #fde8ea;
  color: #ad2633;
}
.dispatch-resolved {
  background: #e6f5ed;
  color: #237246;
}
.dispatch-closed {
  background: #edf1f5;
  color: #5d6c7a;
}
.dispatch-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.dispatch-task-link {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  margin-top: 3px;
  color: #1e5d9c;
  font: 600 var(--fs-micro) var(--mono);
  cursor: pointer;
}
.dispatch-task-link:hover {
  text-decoration: underline;
}
.active-dispatch-panel {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #ecb6bc;
  background: #fff5f6;
  border-radius: 8px;
}
.active-dispatch-panel > div:first-child span {
  display: block;
  font: 700 var(--fs-micro) var(--mono);
  letter-spacing: 0.07em;
  color: #ae2632;
}
.active-dispatch-panel > div:first-child b {
  display: block;
  font-size: var(--fs-caption);
  color: #7e202a;
  margin-top: 2px;
}
.active-dispatch-panel > div:last-child {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.active-dispatch-panel button {
  border: 1px solid #edc4c8;
  background: #fff;
  border-radius: 5px;
  padding: 5px 7px;
  color: #6f2530;
  font: 600 var(--fs-micro) var(--sans);
  cursor: pointer;
}
.active-dispatch-panel button strong {
  margin-left: 4px;
}
@media (max-width: 700px) {
  .dispatch-summary {
    grid-template-columns: 1fr;
  }
  .dispatch-page .page-head {
    flex-direction: column;
    gap: 9px;
  }
  .active-dispatch-panel {
    align-items: flex-start;
    flex-direction: column;
  }
  .active-dispatch-panel > div:last-child {
    justify-content: flex-start;
  }
}
.report-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

/* Dispatch action stages and precise time records. */
.dispatch-flow {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 12px;
}
.dispatch-flow article {
  flex: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px 10px;
}
.dispatch-flow b {
  display: block;
  font: 700 var(--fs-micro) var(--mono);
  color: #1d4f83;
}
.dispatch-flow span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.35;
}
.dispatch-flow > i {
  align-self: center;
  color: #7a91a8;
  font-style: normal;
}
.dispatch-title-link {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.dispatch-title-link:hover b {
  color: #1d5e9f;
  text-decoration: underline;
}
.dispatch-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 14px;
}
.dispatch-time-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  padding: 10px 11px;
}
.dispatch-time-grid span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.dispatch-time-grid strong {
  display: block;
  color: #163b63;
  font: 700 var(--fs-callout)/1.35 var(--mono);
  margin-top: 3px;
}
.dispatch-time-grid small {
  display: block;
  margin-top: 2px;
  color: #718399;
  font-size: var(--fs-micro);
}
.dispatch-time-grid .time-total {
  background: #f4f8fd;
  border-color: #c9dcec;
}
.dispatch-time-grid .time-total strong {
  font-size: var(--fs-title1);
}
@media (max-width: 900px) {
  .dispatch-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .dispatch-flow > i {
    display: none;
  }
  .dispatch-time-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 520px) {
  .dispatch-flow,
  .dispatch-time-grid {
    grid-template-columns: 1fr;
  }
}

.license-table {
  min-width: 1100px;
}
.license-table th:nth-child(1),
.license-table td:nth-child(1) {
  min-width: 260px;
}
.license-table th:nth-child(3),
.license-table td:nth-child(3) {
  min-width: 190px;
}
.license-period {
  font-family: var(--mono);
  font-size: var(--fs-micro) !important;
  white-space: nowrap;
}
.license-pool-meta {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.license-quantity {
  font: 700 var(--fs-callout) var(--mono);
  text-align: center;
}
.license-quantity.available {
  color: #16804a;
}
.license-quantity.quantity-invalid {
  color: #c62832;
  background: #fff1f2;
}
.inventory-status.status-active {
  background: #dcfce7;
  color: #147a42;
}
.inventory-status.status-expiring {
  background: #fef3c7;
  color: #a45d08;
}
.inventory-status.status-expired {
  background: #fee2e2;
  color: #c3222a;
}
.renewal-table {
  min-width: 980px;
}
.renewal-table th:first-child,
.renewal-table td:first-child {
  min-width: 220px;
}
.renewal-table .license-period {
  min-width: 120px;
}
.inventory-status.status-unclassified {
  background: #e2e8f0;
  color: #475569;
}

.inventory-table .subtext.task-id {
  display: none;
}

.inventory-table {
  min-width: 880px;
}
.asset-serial {
  font-family: var(--mono);
  font-size: var(--fs-micro) !important;
  white-space: nowrap;
}
.inventory-status.status-in-stock {
  background: #dcfce7;
  color: #147a42;
}
.inventory-status.status-in-use {
  background: #dbeafe;
  color: #1d4ed8;
}
.inventory-status.status-fault {
  background: #fee2e2;
  color: #c3222a;
}

.leave-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.leave-summary > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
}
.leave-summary span {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.leave-summary strong {
  font: 700 var(--fs-display) var(--mono);
  color: #163b63;
}
.leave-approval-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
}
.leave-table {
  min-width: 720px;
}
.leave-actions {
  white-space: nowrap;
  display: flex;
  gap: 5px;
}
.leave-team-list {
  display: grid;
  gap: 8px;
}
.leave-team-list > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f5;
}
.leave-team-list > div:last-child {
  padding-bottom: 0;
  border: 0;
}
.leave-team-list b {
  font-size: var(--fs-caption);
}
.leave-team-list span {
  font-size: var(--fs-micro);
  color: var(--muted);
  text-align: right;
}
.leave-request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.leave-request-form .wide {
  grid-column: 1/-1;
}
@media (max-width: 900px) {
  .leave-approval-grid {
    grid-template-columns: 1fr;
  }
  .leave-approval-grid > aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .leave-approval-grid > aside .panel {
    margin-top: 0 !important;
  }
}
@media (max-width: 600px) {
  .leave-summary {
    grid-template-columns: 1fr;
  }
  .leave-approval-grid > aside {
    grid-template-columns: 1fr;
  }
  .leave-request-form {
    grid-template-columns: 1fr;
  }
  .leave-request-form .wide {
    grid-column: auto;
  }
}

.page-head-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calendar-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 11px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.calendar-legend i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.calendar-legend .kr {
  background: #f3bdc5;
}
.calendar-legend .la {
  background: #b9d4f5;
}
@media (max-width: 600px) {
  .calendar-actions {
    width: 100%;
    margin-top: 9px;
  }
  .calendar-actions .button {
    flex: 1;
    font-size: var(--fs-micro);
  }
}

.calendar-panel-head {
  gap: 10px;
  flex-wrap: wrap;
}
.calendar-navigator {
  display: flex;
  align-items: center;
  gap: 6px;
}
.calendar-navigator .select {
  padding: 6px 8px;
  font-size: var(--fs-caption);
}
@media (max-width: 600px) {
  .calendar-panel-head {
    align-items: flex-start;
  }
  .calendar-navigator {
    width: 100%;
  }
  .calendar-navigator .select {
    flex: 1;
  }
  .calendar-panel-head > .meta {
    width: 100%;
  }
}

.shift-now.edge-right em {
  left: auto;
  right: 6px;
  text-align: right;
}

.shift-now em {
  display: none;
}
.shift-rail {
  height: 18px;
  border-radius: 5px;
  border-color: #cbd9e7;
  background: repeating-linear-gradient(
    90deg,
    #edf3f8 0,
    #edf3f8 calc(25% - 1px),
    #fff calc(25% - 1px),
    #fff 25%
  );
}
.shift-segment {
  top: -1px;
  height: 18px;
  border-radius: 4px;
}
.shift-segment.kr {
  background: linear-gradient(90deg, #1479d0, #258ee4);
}
.shift-segment.us {
  background: linear-gradient(90deg, #6f55ca, #8b6de3);
}
.shift-now i {
  width: 8px;
  height: 8px;
  left: -4px;
  top: -2px;
  background: #fff;
  border: 2px solid #102a43;
}
.shift-row:has(.offline) .shift-segment {
  background: #aebdcb;
}
.shift-now {
  width: 3px;
  margin-left: -1px;
  background: #0d2d50;
}
.shift-now i {
  display: none;
}

.shift-now {
  top: -4px;
  height: 26px;
}

.report-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #d7e3ef;
  border-radius: 10px;
}
.report-period-buttons,
.report-page-tabs {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.report-period .button.active,
.report-page-tabs button.active {
  background: #1f5b99;
  color: #fff;
  border-color: #1f5b99;
}
.report-custom-dates {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5c7289;
  font-size: var(--fs-caption);
}
.report-custom-dates .input {
  width: 136px;
  height: 34px;
  padding: 5px 8px;
}
.report-page-tabs {
  margin: 4px 0 10px;
  border-bottom: 1px solid #d7e3ef;
}
.report-page-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #5c7289;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}
.report-page-tabs button.active {
  background: transparent;
  color: #1f5b99;
  border-color: #1f5b99;
}
.report-period-note {
  margin: 0 0 14px;
  color: #5c7289;
  font-size: var(--fs-callout);
}
.report-section-gap {
  margin-top: 14px;
}
.management-kpi {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .report-period {
    align-items: flex-start;
    flex-direction: column;
  }
  .management-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-custom-dates {
    width: 100%;
  }
}

.license-expiry-alert {
  margin: 0 0 16px;
  border: 1px solid #f2c98b;
  background: #fffaf1;
}
.license-expiry-alert header {
  display: flex;
  justify-content: space-between;
}
.license-expiry-alert header span {
  display: block;
  color: #a85d00;
  font: 700 var(--fs-micro)/1.3 var(--mono, monospace);
  letter-spacing: 0.08em;
}
.license-expiry-alert h2 {
  color: #6b3c00;
}
.license-expiry-alert p {
  margin: 0;
  color: #8a5d22;
  font-size: var(--fs-callout);
}
.license-alert-list {
  display: grid;
}
.license-alert-row {
  display: grid;
  align-items: center;
  background: #fff;
  border: 1px solid #f4dfbd;
}
.license-alert-row span,
.license-alert-row time {
  color: #5c7289;
}
.license-alert-row em {
  font-style: normal;
  font-weight: 700;
  color: #b45309;
}

.reports-page .report-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.reports-page .report-table th,
.reports-page .report-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reports-page .report-table th:nth-child(1) {
  width: 14%;
}
.reports-page .report-table th:nth-child(2) {
  width: 38%;
}
.reports-page .report-table th:nth-child(3),
.reports-page .report-table th:nth-child(4) {
  width: 16%;
}
.reports-page .report-table th:nth-child(5) {
  width: 16%;
}

/* Modern report workspace: three topics, card-led presentation, no spreadsheet export. */
.reports-modern {
  max-width: 1480px;
}
.report-period.modern {
  display: grid;
  grid-template-columns: auto minmax(280px, 1fr) auto;
}
.report-period-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
  color: #173e72;
}
.report-period-summary strong {
  font: 700 var(--fs-caption) var(--mono);
}
.report-period-summary small {
  color: #71869b;
  font: 500 var(--fs-micro) var(--mono);
}
.report-topic-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 16px;
}
.report-topic-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cfdae6;
  border-radius: 9px;
  background: #fff;
  padding: 12px 14px;
  color: #5c7289;
  font: 700 var(--fs-callout) var(--sans);
  text-align: left;
  cursor: pointer;
}
.report-topic-tabs button span {
  color: #8ba0b5;
  font: 700 var(--fs-micro) var(--mono);
}
.report-topic-tabs button.active {
  border-color: #2875bc;
  background: #eaf3fc;
  color: #174f83;
  box-shadow: inset 0 -3px 0 #2875bc;
}
.report-topic-tabs button.active span {
  color: #2875bc;
}
.report-topic-body {
  display: grid;
  gap: 14px;
}
.report-hero-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.report-hero-kpis article {
  position: relative;
  min-height: 96px;
  padding: 15px 16px;
  border: 1px solid #d7e3ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.report-hero-kpis span {
  display: block;
  color: #60778f;
  font-size: var(--fs-micro);
}
.report-hero-kpis strong {
  display: block;
  margin-top: 7px;
  color: #122f4c;
  font: 700 var(--fs-display) var(--mono);
}
.report-hero-kpis small {
  position: absolute;
  left: 55px;
  bottom: 17px;
  color: #60778f;
  font-size: var(--fs-micro);
}
.report-hero-kpis .urgent {
  border-color: #e8c78b;
}
.report-hero-kpis .urgent strong {
  color: #a76500;
}
.report-hero-kpis .danger {
  border-color: #efbdc2;
}
.report-hero-kpis .danger strong {
  color: #b42330;
}
.report-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 14px;
}
.report-visual-panel {
  border: 1px solid #d7e3ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.report-visual-panel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #e6edf4;
}
.report-visual-panel > header span,
.report-section-heading > div > span {
  display: block;
  color: #2875bc;
  font: 700 var(--fs-micro) var(--sans);
  letter-spacing: 0.04em;
}
.report-visual-panel h2,
.report-section-heading h2 {
  margin: 3px 0 0;
  color: #173e72;
  font-size: var(--fs-title3);
}
.report-bars {
  display: grid;
  gap: 11px;
  padding: 16px;
}
.report-bars > div {
  display: grid;
  grid-template-columns: 74px 1fr 28px;
  gap: 9px;
  align-items: center;
  font-size: var(--fs-body);
}
.report-bars i {
  height: 10px;
  border-radius: 8px;
  background: #edf2f7;
  overflow: hidden;
}
.report-bars i b {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: #2875bc;
}
.report-bars strong {
  text-align: right;
  font: 700 var(--fs-body) var(--sans);
}
.report-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 10px 5px;
}
.report-focus-grid article {
  padding: 15px;
  border-right: 1px solid #e6edf4;
}
.report-focus-grid article:last-child {
  border: 0;
}
.report-focus-grid span,
.report-focus-grid small {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-callout);
}
.report-focus-grid strong {
  display: block;
  margin: 6px 0;
  color: #173e72;
  font: 700 var(--fs-display) var(--sans);
}
.report-activity > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.report-activity article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: 12px 15px;
  border-bottom: 1px solid #e6edf4;
}
.report-activity article:nth-child(odd) {
  border-right: 1px solid #e6edf4;
}
.report-activity .id {
  color: #2875bc;
  font: 700 var(--fs-caption) var(--sans);
}
.report-activity article > b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-body);
}
.report-activity .status {
  grid-column: 1;
  color: #4a657f;
  font-size: var(--fs-caption);
}
.report-activity article > span:not(.id):not(.status),
.report-activity em {
  color: var(--text-muted);
  font-size: var(--fs-caption);
  font-style: normal;
}
.report-activity em {
  text-align: right;
}
.report-progress-panel {
  margin-top: 14px;
}
.report-progress-panel > .panel-body > input[type='search'] {
  width: min(100%, 420px);
  margin-bottom: 12px;
}
.report-task-list {
  display: grid;
  gap: 8px;
}
.report-task-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.report-task-item summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 12px;
  cursor: pointer;
}
.report-task-item summary > b {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-body);
}
.report-task-item summary > .id { font-size:var(--fs-caption); }
.report-task-item summary > span:not(.id),
.report-task-item summary > small { font-size:var(--fs-caption); }
.report-task-item summary > small {
  color: var(--muted);
}
.report-task-body {
  padding: 0 12px 12px;
}
.report-note-history {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.report-note-history > div {
  padding: 9px 11px;
  border-radius: 6px;
  background: var(--surface-2, #f5f7fa);
}
.report-note-history small {
  color: var(--muted);
}
.report-note-history p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.report-note-form {
  display: grid;
  justify-items: start;
  gap: 8px;
}
.report-note-form label {
  font-weight: 600;
}
.report-note-form textarea {
  width: 100%;
  resize: vertical;
}
.sales-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.sales-dashboard-grid > .panel:first-child {
  grid-row: auto;
}
.sales-dashboard-list {
  display: grid;
  gap: 0;
}
.sales-dashboard-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.sales-dashboard-row:last-child {
  border-bottom: 0;
}
.sales-dashboard-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.sales-dashboard-row em {
  flex: none;
  color: var(--muted);
  font-style: normal;
}
.traffic-bill-list {
  display: grid;
  gap: 12px;
}
.traffic-bill-status {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2, #f5f7fa);
  color: var(--muted);
  font-size: var(--fs-caption);
}
.traffic-bill-status.verified {
  background: #e9f7ee;
  color: #087442;
}
.traffic-bill-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.traffic-bill-meta b {
  color: var(--ink);
}
.traffic-bill-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}
.traffic-bill-form > label:not(.traffic-bill-dedicated) {
  display: grid;
  gap: 5px;
  min-width: 190px;
  font-size: var(--fs-caption);
}
.traffic-bill-dedicated {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: var(--fs-caption);
}
.traffic-bill-graph {
  max-width: 560px;
  margin-top: 10px;
}
.traffic-bill-graph svg {
  display: block;
  width: 100%;
  height: 110px;
  background: var(--surface-2, #f5f7fa);
}
.traffic-bill-graph polyline {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.traffic-bill-graph small {
  color: var(--muted);
}
.traffic-bill-settings,
.traffic-bill-card,
.traffic-bill-card .panel-body { min-width: 0; }
.traffic-bill-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.traffic-bill-toolbar h2 { margin:0 0 3px; font-size:var(--fs-title3); }
.traffic-bill-toolbar p { margin:0; }
.traffic-bill-heading { min-width:0; }
.traffic-bill-heading h2 { overflow-wrap:anywhere; }
.traffic-bill-card .panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.traffic-bill-status { flex:none; white-space:nowrap; }
.traffic-bill-meta span { min-width:0; overflow-wrap:anywhere; }
.traffic-bill-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:12px; }
.traffic-bill-form > label:not(.traffic-bill-dedicated) { min-width:0; width:100%; }
.traffic-bill-form .input { min-width:0; width:100%; }
.traffic-bill-form [hidden] { display:none !important; }
.traffic-bill-dedicated { grid-column:1/-1; width:auto; align-items:flex-start; line-height:1.45; }
.traffic-bill-dedicated input { margin-top:2px; }
.traffic-bill-actions { display:flex; grid-column:1/-1; flex-wrap:wrap; gap:8px; }
.traffic-bill-graph { max-width:none; margin-top:12px; overflow-x:auto; }
.traffic-bill-graph svg { min-width:560px; height:auto; aspect-ratio:688/208; min-height:170px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.traffic-graph-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; margin-bottom:8px; font-size:12px; }
.traffic-graph-head span,.traffic-axis { fill:var(--muted); color:var(--muted); font-size:10px; font-family:inherit; }
.traffic-grid { stroke:var(--line); stroke-width:1; }
.traffic-line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.traffic-line.inbound { stroke:#2563eb; } .traffic-line.outbound { stroke:#16a34a; }
.traffic-graph-stats { display:grid; grid-template-columns:minmax(72px,1fr) repeat(3,minmax(0,1fr)); gap:0; margin-top:10px; border:1px solid var(--line); border-radius:7px; overflow:hidden; font-size:12px; font-variant-numeric:tabular-nums; }
.traffic-graph-stats > * { padding:7px 8px; min-width:0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.traffic-graph-stats > :nth-last-child(-n+4) { border-bottom:0; }
.traffic-graph-stats b { background:var(--surface-2,#f5f7fa); color:var(--muted); }
.traffic-graph-stats strong { color:var(--ink); }
.traffic-graph-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:7px; color:var(--muted); font-size:12px; }
.traffic-graph-legend span { display:inline-flex; align-items:center; gap:5px; }
.traffic-graph-legend .traffic-graph-fetched { margin-left:auto; }
.traffic-graph-fetched time { color:var(--ink); font-variant-numeric:tabular-nums; }
.traffic-graph-legend i { display:inline-block; width:12px; height:3px; border-radius:2px; }
.traffic-graph-legend .in { background:#2563eb; } .traffic-graph-legend .out { background:#16a34a; }
.transit-panel { margin:14px 0; min-width:0; }
.transit-panel > .panel-head { gap:8px; flex-wrap:wrap; }
.transit-panel > .panel-body[hidden] { display:none; }
.sales-dashboard-grid > .transit-panel { grid-column:1/-1; }
.transit-head-actions,.transit-pager { display:flex; align-items:center; gap:7px; }
.transit-head-actions { margin-left:auto; }
.transit-pager span { min-width:34px; text-align:center; color:var(--muted); font-size:var(--fs-caption); font-variant-numeric:tabular-nums; }
.transit-pager .transit-page-dots { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; }
.transit-page-dots i { display:block; width:5px; height:5px; border-radius:50%; background:#c5ccd5; }
.transit-page-dots i.active { width:13px; border-radius:5px; background:#136b55; }
.transit-pager .button { min-width:28px; padding:3px 7px; font-size:var(--fs-title3); line-height:1; }
.transit-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.transit-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:start; gap:6px 8px; padding:10px; border:1px solid var(--line); border-radius:8px; min-width:0; }
.transit-item b,.transit-item .meta { display:block; overflow-wrap:anywhere; }
.transit-heading b { font-size:var(--fs-caption); }
.transit-heading .meta { font-size:var(--fs-micro); }
.transit-item > .button { padding:4px 7px; font-size:var(--fs-micro); white-space:nowrap; }
.transit-plan { display:flex; grid-column:1/-1; align-items:center; gap:4px; padding:6px 8px; border-radius:999px; background:var(--surface-2,#f5f7fa); }
.transit-plan span { min-width:0; flex:1; text-align:center; color:var(--muted); font-size:var(--fs-micro); }
.transit-plan span + span { border-left:1px solid var(--line); }
.transit-plan strong { display:block; margin-top:1px; color:var(--ink); font-size:var(--fs-caption); font-variant-numeric:tabular-nums; }
.transit-meter { display:grid; grid-column:1/-1; grid-template-columns:1fr; justify-items:center; gap:1px; min-width:0; }
.transit-gauge { position:relative; width:min(100%,160px); margin:auto; color:#2563eb; }
.transit-gauge svg { display:block; width:100%; height:auto; overflow:visible; }
.transit-gauge-track,.transit-gauge-fill { fill:none; stroke-width:15; stroke-linecap:round; }
.transit-gauge-track { stroke:#e6ebf1; }
.transit-gauge-fill { stroke:currentColor; }
.transit-gauge.is-over { color:#c93535; }
.transit-gauge-value { position:absolute; left:0; right:0; bottom:3px; text-align:center; }
.transit-gauge-value small { display:block; color:var(--muted); font-size:var(--fs-micro); }
.transit-gauge-value strong { display:block; margin-top:1px; color:var(--ink); font-size:var(--fs-title1); line-height:1; font-variant-numeric:tabular-nums; }
.transit-gauge.is-over .transit-gauge-value strong { color:#b42323; }
.transit-direction { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; min-width:0; }
.transit-direction > small { grid-column:1/-1; margin-bottom:3px; text-align:center; color:var(--muted); font-size:var(--fs-micro); }
.transit-direction > div { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; padding:4px 2px; font-size:var(--fs-micro); }
.transit-direction > div + div { border-left:1px solid var(--line); }
.transit-direction > div span { display:inline-flex; align-items:center; gap:4px; }
.transit-direction i { width:6px; height:6px; border-radius:50%; }
.transit-direction .in { background:#2563eb; } .transit-direction .out { background:#16a34a; }
.transit-direction strong { font-size:var(--fs-caption); white-space:nowrap; font-variant-numeric:tabular-nums; }
.transit-updated { display:flex; grid-column:1/-1; align-items:center; justify-content:flex-end; gap:4px; min-width:0; color:var(--muted); font-size:var(--fs-micro); white-space:nowrap; }
.transit-updated svg { flex:none; }
.transit-updated time { position:relative; color:var(--muted); font-variant-numeric:tabular-nums; cursor:help; }
.transit-updated time:is(:hover,:focus-visible)::after { position:absolute; z-index:5; right:0; bottom:calc(100% + 5px); padding:5px 7px; border:1px solid var(--line); border-radius:5px; background:var(--surface,#fff); box-shadow:0 4px 12px #102f4c1c; color:var(--ink); content:attr(data-full); white-space:nowrap; }
.transit-stale { margin-left:2px; padding:1px 4px; border-radius:4px; background:#fff1db; color:#9a5809; font-weight:600; }
.transit-detail { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); min-width:0; }
.transit-detail h3 { margin:0; font-size:var(--fs-body); overflow-wrap:anywhere; }
.renewal-toast { position:fixed; right:22px; bottom:22px; z-index:70; display:flex; align-items:center; gap:10px; max-width:min(390px,calc(100vw - 28px)); padding:10px 12px; border:1px solid #e4c189; border-radius:10px; background:#fffaf0; box-shadow:0 12px 34px #102f4c22; color:var(--ink); }
.renewal-toast-mark { display:grid; place-items:center; width:26px; height:26px; flex:none; border-radius:50%; background:#b86d12; color:#fff; font-weight:700; }
.renewal-toast > div { min-width:0; } .renewal-toast b,.renewal-toast small { display:block; overflow-wrap:anywhere; } .renewal-toast b { font-size:var(--fs-callout); } .renewal-toast small { margin-top:2px; color:var(--muted); font-size:var(--fs-micro); }
.renewal-toast-close { align-self:flex-start; border:0; background:transparent; color:var(--muted); font-size:var(--fs-title3); cursor:pointer; }
.renewal-notification { border-left:3px solid #b86d12; }
@media (max-width: 1350px) {
  .transit-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .sales-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .sales-dashboard-grid > .panel:first-child {
    grid-row: auto;
  }
  .traffic-bill-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .transit-list { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
  .traffic-bill-form { grid-template-columns:1fr; }
  .traffic-bill-card .panel-head { align-items:flex-start; flex-wrap:wrap; }
  .transit-head-actions { flex-wrap:wrap; justify-content:flex-end; }
  .renewal-toast { right:14px; bottom:14px; }
}
.report-asset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.report-asset-card {
  padding: 13px 14px;
  border: 1px solid #d7e3ef;
  border-radius: 9px;
  background: #fff;
}
.report-asset-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.report-asset-card strong {
  font: 700 var(--fs-title1) var(--mono);
  color: #173e72;
}
.report-asset-card p {
  display: flex;
  gap: 13px;
  margin: 8px 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.report-asset-card p b {
  color: #334f69;
}
.report-stack {
  display: flex;
  height: 7px;
  border-radius: 6px;
  background: #edf2f7;
  overflow: hidden;
}
.report-stack i {
  height: 100%;
}
.report-stack .stock,
.report-section-heading .stock {
  background: #20a45b;
}
.report-stack .use,
.report-section-heading .use {
  background: #2875bc;
}
.report-stack .fault,
.report-section-heading .fault {
  background: #d63442;
}
.report-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 4px;
}
.report-section-heading > p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.report-section-heading > p i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-left: 5px;
}
.report-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 11px;
  align-items: start;
}
.report-site-card {
  border: 1px solid #d7e3ef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.report-site-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #173e72;
  color: #fff;
}
.report-site-card > header small {
  color: #7dc4ff;
  font: 700 var(--fs-micro) var(--mono);
}
.report-site-card h3 {
  margin: 2px 0 0;
  font-size: var(--fs-title3);
}
.report-site-card > header p {
  display: flex;
  gap: 10px;
  margin: 0;
  color: #c9d8e6;
  font-size: var(--fs-micro);
}
.report-site-card > header p b {
  color: #fff;
}
.report-model-list > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-top: 1px solid #e6edf4;
}
.report-model-list .type {
  color: #2875bc;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.report-model-list b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-micro);
}
.report-model-list p {
  display: flex;
  gap: 4px;
  margin: 0;
}
.report-model-list em {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  border-radius: 4px;
  background: #f0f4f8;
  color: #526a80;
  font: 700 var(--fs-micro) var(--mono);
  font-style: normal;
}
.report-model-list em.stock {
  color: #148347;
  background: #e6f6ed;
}
.report-model-list em.use {
  color: #1d5f9e;
  background: #e5f0fb;
}
.report-model-list em.fault {
  color: #b42330;
  background: #fbeaec;
}
.report-license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 10px;
}
.report-license-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  padding: 13px 14px;
  border: 1px solid #edcf9d;
  border-radius: 8px;
  background: #fff;
}
.report-license-card span {
  color: #a76500;
  font: 700 var(--fs-micro) var(--mono);
}
.report-license-card h3 {
  margin: 3px 0 2px;
  color: #173e72;
  font-size: var(--fs-callout);
}
.report-license-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.report-license-card > strong {
  align-self: center;
  color: #a76500;
  font: 700 var(--fs-title3) var(--mono);
}
.report-license-card > em {
  grid-column: 1/-1;
  color: #8a5d22;
  font-size: var(--fs-micro);
  font-style: normal;
}
.report-people-list,
.report-leave-list {
  display: grid;
}
.report-people-list article {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #e6edf4;
}
.report-people-list article:last-child,
.report-leave-list article:last-child {
  border-bottom: 0;
}
.report-people-list .avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e6f1fb;
  color: #1d5f9e;
  font-weight: 700;
}
.report-people-list p,
.report-people-list small {
  display: block;
  margin: 1px 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.report-people-list em {
  color: #148347;
  font-size: var(--fs-micro);
  font-style: normal;
}
.report-leave-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 13px 15px;
  border-bottom: 1px solid #e6edf4;
}
.report-leave-list article div span {
  margin-left: 8px;
  color: #2875bc;
  font-size: var(--fs-micro);
}
.report-leave-list p {
  margin: 0;
  color: var(--text-muted);
  font: var(--fs-micro) var(--mono);
}
.report-leave-list em {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: #526a80;
  font-size: var(--fs-micro);
  font-style: normal;
}
@media (max-width: 1000px) {
  .report-hero-kpis {
    grid-template-columns: repeat(3, 1fr);
  }
  .report-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .report-activity > div {
    grid-template-columns: 1fr;
  }
  .report-activity article:nth-child(odd) {
    border-right: 0;
  }
  .report-asset-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .report-period.modern {
    grid-template-columns: 1fr;
  }
  .report-period-summary {
    justify-items: start;
  }
}

/* PDF export options: checkbox and label stay on one centered row. */
.pdf-modal-options {
  display: grid;
  gap: 8px;
}
.pdf-option-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid #d7e3ef;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.pdf-option-card:hover {
  border-color: #86b4df;
  background: #f8fbff;
}
.pdf-option-card input {
  width: 18px;
  height: 18px;
  margin: 0;
  align-self: center;
  accent-color: #1f5b99;
}
.pdf-option-card > span {
  color: #1f3653;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.35;
}
@media (max-width: 650px) {
  .report-topic-tabs {
    grid-template-columns: 1fr;
  }
  .report-hero-kpis,
  .report-hero-kpis.management,
  .report-asset-grid {
    grid-template-columns: 1fr 1fr;
  }
  .report-site-grid {
    grid-template-columns: 1fr;
  }
  .report-model-list > div {
    grid-template-columns: 68px minmax(0, 1fr);
  }
  .report-model-list p {
    grid-column: 2;
  }
  .report-activity article {
    grid-template-columns: 62px minmax(0, 1fr);
  }
  .report-activity em {
    display: none;
  }
}

/* Confirmed custom report range and space-efficient license alerts. */
.report-custom-dates .report-date-apply {
  height: 34px;
  min-width: 54px;
  padding: 5px 12px;
}
.license-expiry-alert {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-left-width: 4px;
  border-radius: 8px;
}
.license-expiry-alert header {
  align-items: center;
  gap: 10px;
}
.license-expiry-alert header span {
  font-size: var(--fs-micro);
}
.license-expiry-alert h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-size: var(--fs-callout);
}
.license-expiry-alert h2 b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #fff0d5;
  color: #9b5c00;
  font: 700 var(--fs-micro) var(--mono);
}
.license-expiry-alert header .button {
  padding: 5px 9px;
  font-size: var(--fs-micro);
}
.license-alert-list {
  gap: 4px;
  margin-top: 7px;
}
.license-alert-row {
  grid-template-columns: minmax(150px, 1.2fr) minmax(80px, 0.55fr) minmax(135px, 0.75fr) minmax(145px, 0.85fr);
  gap: 7px;
  padding: 5px 7px;
  border-radius: 5px;
  font-size: var(--fs-micro);
  line-height: 1.25;
}
.license-alert-row b,
.license-alert-row span,
.license-alert-row time,
.license-alert-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.license-alert-more {
  margin-top: 5px;
  color: #94621e;
  font-size: var(--fs-micro);
  text-align: right;
}
.license-expiry-alert.compact {
  padding: 8px 11px;
}
.license-expiry-alert.compact h2 {
  font-size: var(--fs-caption);
}
.license-expiry-alert.compact .license-alert-list {
  margin-top: 5px;
}
.license-expiry-alert.compact .license-alert-row {
  padding: 4px 7px;
  font-size: var(--fs-micro);
}
.license-expiry-alert.compact .license-alert-more {
  margin-top: 3px;
}
@media (max-width: 820px) {
  .license-alert-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .license-alert-row span,
  .license-alert-row em {
    display: none;
  }
  .license-expiry-alert header {
    flex-direction: row;
  }
  .report-custom-dates {
    flex-wrap: wrap;
  }
  .report-custom-dates .report-date-apply {
    flex: 0 0 auto;
  }
}

/* Manager-curated technical runbooks */
.runbook-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.runbook-summary article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.runbook-summary span,
.runbook-summary small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.runbook-summary strong {
  display: block;
  font: 700 var(--fs-display) var(--mono);
  color: #163b63;
}
.runbook-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.runbook-toolbar .search {
  margin-right: auto;
}
.runbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.runbook-card {
  display: flex;
  flex-direction: column;
  min-height: 215px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.runbook-card:hover {
  border-color: #7fa8d2;
  transform: translateY(-1px);
}
.runbook-card header,
.runbook-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.runbook-card h3 {
  margin: 13px 0 6px;
  color: #102f4c;
  font-size: var(--fs-title3);
}
.runbook-card > p {
  display: -webkit-box;
  min-height: 44px;
  margin: 0 0 13px;
  overflow: hidden;
  color: #60758a;
  font-size: var(--fs-caption);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.runbook-card footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #e8eef4;
  color: #718398;
  font-size: var(--fs-micro);
}
.runbook-status,
.runbook-default {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.runbook-status.approved {
  background: #e6f5ed;
  color: #19704a;
}
.runbook-status.draft {
  background: #fff3db;
  color: #9e650d;
}
.runbook-status.deprecated {
  background: #edf1f5;
  color: #64748b;
}
.runbook-default {
  margin-left: 5px;
  background: #e7f0fb;
  color: #1d5f9e;
}
.runbook-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.runbook-taxonomy span,
.task-classification span {
  padding: 3px 7px;
  border-radius: 4px;
  background: #edf4fb;
  color: #285d91;
  font-size: var(--fs-micro);
}
.runbook-empty {
  grid-column: 1/-1;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.runbook-detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.7fr);
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 4px solid #2875bc;
  border-radius: var(--radius);
  background: #fff;
}
.runbook-detail-head h1 {
  margin: 5px 0 7px;
  color: #102f4c;
  font-size: var(--fs-display);
}
.runbook-detail-head p {
  max-width: 780px;
  margin: 0;
  color: #5d7185;
}
.runbook-detail-head > div:last-child {
  text-align: right;
}
.runbook-detail-head dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin: 13px 0 0;
  text-align: left;
}
.runbook-detail-head dl div,
.runbook-side-card dl div {
  padding-top: 7px;
  border-top: 1px solid #e7edf3;
}
.runbook-detail-head dt,
.runbook-side-card dt {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.runbook-detail-head dd,
.runbook-side-card dd {
  margin: 2px 0 0;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.runbook-scope {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 1px;
  margin: 12px 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.runbook-scope > div {
  padding: 11px 13px;
  background: #fff;
}
.runbook-scope span {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.runbook-scope p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 0;
}
.runbook-scope b {
  padding: 3px 7px;
  border-radius: 4px;
  background: #edf4fb;
  color: #285d91;
  font-size: var(--fs-micro);
}
.runbook-scope em {
  color: #718398;
  font-size: var(--fs-micro);
  font-style: normal;
}
.runbook-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.7fr);
  gap: 14px;
  align-items: start;
}
.runbook-content-grid main {
  display: grid;
  gap: 12px;
}
.runbook-section,
.runbook-side-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.runbook-section header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}
.runbook-section header span {
  font: 700 var(--fs-micro) var(--mono);
  color: #2875bc;
}
.runbook-section h2,
.runbook-side-card h2 {
  margin: 0;
  color: #163b63;
  font-size: var(--fs-body);
}
.runbook-section ul,
.runbook-section ol,
.runbook-side-card ul {
  margin: 0;
  padding-left: 20px;
  color: #40566d;
}
.runbook-section li,
.runbook-side-card li {
  margin: 7px 0;
}
.runbook-section.procedure ol {
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.runbook-section.procedure li {
  position: relative;
  min-height: 30px;
  margin: 0;
  padding: 7px 8px 7px 41px;
  border-bottom: 1px solid #edf1f5;
  counter-increment: step;
}
.runbook-section.procedure li:last-child {
  border: 0;
}
.runbook-section.procedure li:before {
  content: counter(step);
  position: absolute;
  left: 6px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8f2fc;
  color: #1e5c99;
  font: 700 var(--fs-micro) var(--mono);
}
.runbook-content-grid aside {
  display: grid;
  gap: 12px;
}
.runbook-side-card > span {
  display: block;
  margin-bottom: 4px;
  color: #2875bc;
  font: 700 var(--fs-micro) var(--mono);
  letter-spacing: 0.08em;
}
.runbook-side-card.warning {
  background: #fffaf1;
}
.runbook-side-card.warning > span {
  color: #a65d00;
}
.runbook-side-card.review {
  background: #f8fafc;
}
.runbook-side-card dl {
  margin: 10px 0 0;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.choice-grid label {
  padding: 7px 8px;
  border: 1px solid #dce5ee;
  border-radius: 5px;
  background: #f9fbfd;
  font-size: var(--fs-micro);
  font-weight: 500;
}
.choice-grid input {
  margin-right: 6px;
  accent-color: #2875bc;
}
.choice-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.runbook-form textarea {
  min-height: 84px;
}
.runbook-default-check {
  display: flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid #dce5ee;
  border-radius: 6px;
  background: #f8fbfe;
}
.runbook-default-check input {
  accent-color: #2875bc;
}
.task-classification {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #edf1f5;
}
.task-runbook-link {
  border-bottom: 1px solid #edf1f5;
}
.task-runbook-link:last-child {
  border: 0;
}
.task-runbook-link > span {
  padding: 3px 6px;
  border-radius: 4px;
  background: #e7f0fb;
  color: #1d5f9e;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.task-runbook-link b,
.task-runbook-link small {
  display: block;
}
.task-runbook-link b {
  font-size: var(--fs-caption);
}
.task-runbook-link small {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.runbook-empty-state {
  display: grid;
  gap: 4px;
  padding: 8px 0;
}
.runbook-empty-state b {
  font-size: var(--fs-caption);
}
.runbook-empty-state span {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.task-checklist-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-checklist-progress b {
  font: 700 var(--fs-micro) var(--mono);
  color: #285d91;
}
.task-checklist-progress i {
  display: block;
  width: 90px;
  height: 6px;
  overflow: hidden;
  border-radius: 5px;
  background: #e7edf4;
}
.task-checklist-progress span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #2875bc;
}
@media (max-width: 1150px) {
  .runbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .choice-grid,
  .choice-grid.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .runbook-summary,
  .runbook-grid,
  .runbook-detail-head,
  .runbook-scope,
  .runbook-content-grid {
    grid-template-columns: 1fr;
  }
  .runbook-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .runbook-toolbar .search {
    width: 100%;
    margin: 0;
  }
  .runbook-detail-head > div:last-child {
    text-align: left;
  }
  .choice-grid,
  .choice-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Editable runbook taxonomy and shared master data */
.runbook-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.taxonomy-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
}
.taxonomy-list {
  padding-top: 4px;
  padding-bottom: 4px;
}
.taxonomy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f5;
}
.taxonomy-row:last-child {
  border-bottom: 0;
}
.taxonomy-row b,
.taxonomy-row small {
  display: block;
}
.taxonomy-row b {
  font-size: var(--fs-caption);
  color: #153754;
}
.taxonomy-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.taxonomy-row > span,
.master-status {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e8f5ed;
  color: #24714b;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.taxonomy-row.inactive {
  opacity: 0.55;
}
.taxonomy-row.inactive > span,
.master-status {
  background: #edf1f5;
  color: #617284;
}
.master-status.active {
  background: #e8f5ed;
  color: #24714b;
}
.taxonomy-symptoms-panel {
  margin-top: 14px;
}
.symptom-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.symptom-group {
  min-width: 0;
  padding: 11px;
  border: 1px solid #dfe7ef;
  border-radius: 8px;
  background: #fbfdff;
}
.symptom-group header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.symptom-group header b {
  color: #153754;
  font-size: var(--fs-caption);
}
.symptom-group header span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #e6f0fb;
  color: #1f609f;
  font: 700 var(--fs-micro) var(--mono);
}
.symptom-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.symptom-group small {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.symptom-chip {
  border: 1px solid #d6e3ef;
  border-radius: 5px;
  background: #fff;
  padding: 5px 7px;
  color: #355a7c;
  font: 500 var(--fs-micro) var(--sans);
  cursor: pointer;
}
.symptom-chip:hover {
  border-color: #7fa8d2;
  background: #f3f8fd;
}
.symptom-chip.inactive {
  opacity: 0.45;
  text-decoration: line-through;
}
.taxonomy-none {
  grid-column: 1/-1;
  padding: 8px;
  color: var(--muted);
  font-size: var(--fs-micro);
  border: 1px dashed #dce5ee;
  border-radius: 5px;
}
.taxonomy-relation-checks {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .symptom-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .runbook-head-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .taxonomy-settings-grid,
  .symptom-groups {
    grid-template-columns: 1fr;
  }
  .taxonomy-relation-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.collaboration-control {
  display: grid;
  gap: 7px;
}
.organization-tokens,
.organization-detail-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.organization-tokens:empty {
  display: none;
}
.organization-token,
.organization-detail-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 5px;
  background: #eef5fc;
  color: #265f96;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.organization-token button {
  border: 0;
  background: transparent;
  color: #4c7296;
  font: 700 var(--fs-body)/1 var(--sans);
  padding: 0;
  cursor: pointer;
}
.organization-token button:hover {
  color: #b4232f;
}
.organization-add {
  display: flex;
  gap: 6px;
}
.organization-add .input {
  min-width: 0;
  flex: 1;
}
.organization-info-wide {
  grid-column: 1/-1;
}
.organization-type {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf1f5;
  color: #526579;
  font-size: var(--fs-micro);
  font-weight: 700;
  white-space: nowrap;
}
.organization-type.internal {
  background: #e7f0fb;
  color: #205f9d;
}
.organization-type.customer {
  background: #e8f5ed;
  color: #237246;
}
.organization-type.vendor {
  background: #fff0e4;
  color: #aa5d18;
}
.organization-type.carrier {
  background: #f0eafa;
  color: #6844a5;
}
.organization-master-panel .panel-head > div {
  min-width: 0;
}
.organization-master-panel .panel-head .meta {
  display: block;
  margin-top: 2px;
}
.organization-master-table td:last-child,
.organization-master-table th:last-child {
  text-align: right;
}
@media (max-width: 760px) {
  .organization-add {
    align-items: stretch;
    flex-direction: column;
  }
}

/* 5. Dark mode theme for 24/7 shift operations. */
body.theme-dark {
  --bg: #0b1320;
  --surface: #111d2e;
  --panel: #111d2e;
  --panel-soft: #16263b;
  --ink: #e2e8f0;
  --muted: #8ba1b7;
  --line: #1f334d;
  --shadow: none;
  background: #0b1320;
  color: #e2e8f0;
}

/* Task detail: readable Activity & History cards. */
.task-activity-panel .panel-body {
  padding: 12px 14px 14px;
}
.activity-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 11px;
  border-bottom: 1px solid #d9e3ed;
}
.activity-comment-form .input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font-size: var(--fs-caption);
  background: #fbfdff;
  border-color: #bdcede;
}
.activity-comment-form .button {
  min-width: 106px;
  padding-inline: 13px;
  font-size: var(--fs-caption);
}
.task-activity-list {
  position: relative;
  display: grid;
  gap: 8px;
}
.task-activity-list:before {
  content: '';
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #cbd9e7;
}
.task-activity-item {
  position: relative;
  padding-left: 30px;
}
.task-activity-marker {
  position: absolute;
  z-index: 1;
  left: 6px;
  top: 16px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #8ba1b7;
}
.task-activity-card {
  overflow: hidden;
  border: 1px solid #d6e1eb;
  border-radius: 6px;
  background: #fff;
}
.task-activity-item.is-comment .task-activity-marker {
  background: #2574b9;
}
.task-activity-item.is-comment .task-activity-card {
  border-color: #c4d8eb;
  border-left-color: #2574b9;
  background: #fbfdff;
}
.task-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  background: #f7f9fc;
  border-bottom: 1px solid #e0e7ef;
}
.task-activity-item.is-comment .task-activity-head {
  background: #edf5fc;
  border-bottom-color: #d2e2f1;
}
.task-activity-actor {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.task-activity-avatar {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dfe7ef;
  color: #36536f;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.task-activity-item.is-comment .task-activity-avatar {
  background: #d4e8f9;
  color: #155a96;
}
.task-activity-actor > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.task-activity-kind {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e7edf3;
  color: #52677c;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.task-activity-item.is-comment .task-activity-kind {
  background: #d9ecfb;
  color: #155a96;
}
.task-activity-actor strong {
  overflow: hidden;
  color: #17324d;
  font-size: var(--fs-caption);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-activity-time {
  display: grid;
  justify-items: end;
  flex: 0 0 auto;
  padding-left: 10px;
  border-left: 1px solid #d8e2eb;
  font-style: normal;
}
.task-activity-time span {
  color: #7a8da1;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.task-activity-time b {
  margin-top: 1px;
  color: #3d5872;
  font: 600 var(--fs-micro) var(--mono);
  white-space: nowrap;
}
.task-activity-message {
  padding: 7px 9px 8px;
}
.task-activity-message > span {
  display: block;
  margin-bottom: 2px;
  color: #73879b;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.task-activity-message p {
  margin: 0;
  color: #243b53;
  font-size: var(--fs-caption);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.task-activity-item.is-comment .task-activity-message p {
  color: #102f4c;
  font-size: var(--fs-caption);
}
.task-activity-empty {
  padding: 18px;
  border: 1px dashed #cbd8e5;
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-caption);
  text-align: center;
}
.task-reference-link {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
  padding: 1px 6px;
  border: 1px solid #9bc2e3;
  border-radius: 5px;
  background: #eaf4fc;
  color: #165e9d;
  font: 750 var(--fs-micro) var(--mono);
  vertical-align: baseline;
  cursor: pointer;
}
.task-reference-link:hover {
  border-color: #4f8fc5;
  background: #dceefa;
  text-decoration: underline;
}
body.theme-dark .task-reference-link {
  border-color: #3d6f98;
  background: #193c5a;
  color: #bfe2ff;
}
body.theme-dark .activity-comment-form {
  border-bottom-color: #29415e;
}
body.theme-dark .activity-comment-form .input {
  background: #14263b;
  border-color: #36516e;
  color: #e2e8f0;
}
body.theme-dark .task-activity-list:before {
  background: #36516e;
}
body.theme-dark .task-activity-marker {
  border-color: #111d2e;
}
body.theme-dark .task-activity-card {
  background: #14243a;
  border-color: #29415e;
  border-left-color: #60778e;
}
body.theme-dark .task-activity-item.is-comment .task-activity-card {
  background: #142a43;
  border-color: #315573;
  border-left-color: #4d91cb;
}
body.theme-dark .task-activity-head {
  background: #182a40;
  border-bottom-color: #29415e;
}
body.theme-dark .task-activity-item.is-comment .task-activity-head {
  background: #183550;
  border-bottom-color: #315573;
}
body.theme-dark .task-activity-avatar {
  background: #29415e;
  color: #d9e6f2;
}
body.theme-dark .task-activity-item.is-comment .task-activity-avatar {
  background: #24547b;
  color: #e3f1fc;
}
body.theme-dark .task-activity-kind {
  background: #263c54;
  color: #b8c9da;
}
body.theme-dark .task-activity-item.is-comment .task-activity-kind {
  background: #24547b;
  color: #e3f1fc;
}
body.theme-dark .task-activity-actor strong {
  color: #edf4fb;
}
body.theme-dark .task-activity-time {
  border-left-color: #36516e;
}
body.theme-dark .task-activity-time span {
  color: #8ea3b8;
}
body.theme-dark .task-activity-time b {
  color: #bed0e2;
}
body.theme-dark .task-activity-message > span {
  color: #8ea3b8;
}
body.theme-dark .task-activity-message p,
body.theme-dark .task-activity-item.is-comment .task-activity-message p {
  color: #e0e9f2;
}
@media (max-width: 650px) {
  .task-activity-panel .panel-body {
    padding: 10px;
  }
  .activity-comment-form {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .activity-comment-form .button {
    width: 100%;
    min-height: 34px;
  }
  .task-activity-list {
    gap: 7px;
  }
  .task-activity-list:before {
    left: 8px;
    top: 10px;
    bottom: 10px;
  }
  .task-activity-item {
    padding-left: 24px;
  }
  .task-activity-marker {
    left: 3px;
    top: 14px;
  }
  .task-activity-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 7px 8px;
  }
  .task-activity-time {
    justify-items: start;
    width: 100%;
    padding: 5px 0 0;
    border-top: 1px solid #d8e2eb;
    border-left: 0;
  }
  .task-activity-message {
    padding: 7px 8px;
  }
}

/* Inventory readability refresh: clearer hierarchy, state colors and denser data rows. */
.inventory-page .inventory-table {
  border-color: #cbd8e5;
}
.inventory-page .inventory-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid #0f2d4d;
  font-weight: 750;
}
.inventory-page .inventory-table td {
  border-bottom: 1px solid #dce5ee;
  color: #263b52;
  line-height: 1.45;
}
.inventory-page .inventory-table tbody tr:hover {
  background: #eaf2fa;
}
.inventory-page .inventory-table td:first-child b {
  color: #102f4c;
}
.inventory-page .inventory-table td[data-no-i18n] > b {
  color: #173e72;
  font-weight: 750;
}
.inventory-page .inventory-table .subtext {
  margin-top: 3px;
  color: #687d92;
}
.inventory-page .asset-serial {
  font-size: var(--fs-caption) !important;
  color: #334f69;
}
.inventory-page .inventory-status.status-in-stock {
  background: #e6f7ed;
  color: #08783f;
}
.inventory-page .inventory-status.status-in-use {
  background: #e7f1fd;
  color: #145da5;
}
.inventory-page .inventory-status.status-fault {
  background: #ffebed;
  color: #bd2430;
}
body.theme-dark .inventory-page .inventory-table th {
  background: #102a43;
  color: #f1f5f9;
  border-bottom-color: #315a83;
}
body.theme-dark .inventory-page .inventory-table td {
  color: #d8e3ee;
  border-bottom-color: #29415e;
}
body.theme-dark .inventory-page .inventory-table tbody tr:nth-child(even) {
  background: #15273c;
}
body.theme-dark .inventory-page .inventory-table tbody tr:hover {
  background: #1b3653;
}
body.theme-dark .inventory-page .inventory-table td:first-child b,
body.theme-dark .inventory-page .inventory-table td[data-no-i18n] > b {
  color: #e6f0fb;
}
body.theme-dark .inventory-page .inventory-table .subtext {
  color: #91a7bd;
}
@media (max-width: 650px) {
  .inventory-page .inventory-table th {
    padding: 9px 10px;
  }
  .inventory-page .inventory-table td {
    padding: 11px 10px;
    font-size: var(--fs-caption);
  }
}

body.theme-dark .topbar {
  background: #111d2e;
  border-bottom-color: #1f334d;
}
body.theme-dark .local-clock {
  color: #94a3b8;
}
body.theme-dark .icon-button {
  background: #16263b;
  border-color: #1f334d;
  color: #e2e8f0;
}
body.theme-dark .button.secondary {
  background: #16263b;
  color: #93c5fd;
  border-color: #2b486d;
}
body.theme-dark .button.secondary:hover {
  background: #1e3654;
}
body.theme-dark .panel,
body.theme-dark .shift-card,
body.theme-dark .kpi,
body.theme-dark .detail-header,
body.theme-dark .runbook-summary article,
body.theme-dark .runbook-toolbar,
body.theme-dark .runbook-card,
body.theme-dark .runbook-detail-head,
body.theme-dark .runbook-section,
body.theme-dark .runbook-side-card,
body.theme-dark .symptom-group,
body.theme-dark .symptom-chip,
body.theme-dark .report-hero-kpis article,
body.theme-dark .report-visual-panel,
body.theme-dark .report-asset-card,
body.theme-dark .report-site-card,
body.theme-dark .report-period,
body.theme-dark .report-topic-tabs button,
body.theme-dark .leave-summary > div,
body.theme-dark .dispatch-summary article,
body.theme-dark .dispatch-flow article,
body.theme-dark .dispatch-time-grid article,
body.theme-dark .aging-stat-card {
  background: #111d2e;
  border-color: #1f334d;
  color: #e2e8f0;
}
body.theme-dark .data-table,
body.theme-dark .data-table th,
body.theme-dark .cal-head {
  background: #16263b;
  border-color: #1f334d;
  color: #cbd5e1;
}
body.theme-dark .data-table td {
  border-bottom-color: #1a2b42;
}
body.theme-dark .data-table tbody tr:hover,
body.theme-dark .task-list tbody tr:hover {
  background: #162b45;
}
body.theme-dark .input,
body.theme-dark .select,
body.theme-dark textarea {
  background: #16263b;
  border-color: #2b486d;
  color: #e2e8f0;
}
body.theme-dark .input:focus,
body.theme-dark .select:focus,
body.theme-dark textarea:focus {
  border-color: #3b82f6;
  outline-color: #1d4ed8;
}
body.theme-dark .modal {
  background: #111d2e;
  color: #e2e8f0;
  border: 1px solid #1f334d;
}
body.theme-dark .modal-head,
body.theme-dark .modal-foot {
  border-color: #1f334d;
}
body.theme-dark .triage-panel {
  background: #102238;
  border-color: #1d4ed8;
}
body.theme-dark .triage-card {
  background: #152438;
  border-color: #233d5d;
}
body.theme-dark .triage-card-title {
  color: #93c5fd;
}
body.theme-dark .pdf-option-card {
  background: #152438;
  border-color: #1f334d;
}
body.theme-dark .pdf-option-card b,
body.theme-dark .pdf-option-card > span {
  color: #dbeafe;
}
body.theme-dark .handover-overview {
  background: #111d2e;
  border-color: #29445f;
  border-left-color: #4c8fca;
}
body.theme-dark .handover-overview > header,
body.theme-dark .handover-overview dl > div + div {
  border-color: #1f334d;
}
body.theme-dark .handover-overview > header b,
body.theme-dark .handover-overview dd,
body.theme-dark .handover-reading-section h3,
body.theme-dark .handover-task-section h3 {
  color: #dbeafe;
}
body.theme-dark .handover-overview > header span,
body.theme-dark .handover-overview dt {
  color: #8ba1b7;
}
body.theme-dark .handover-reading-section,
body.theme-dark .handover-history-list article {
  border-color: #1f334d;
}
body.theme-dark .handover-reading-section li,
body.theme-dark .handover-history-list article > span,
body.theme-dark .handover-history-list p {
  color: #cbd5e1;
}
body.theme-dark .handover-history-list time {
  color: #8ba1b7;
}
body.theme-dark .report-hero-kpis strong,
body.theme-dark .report-focus-grid strong,
body.theme-dark .report-bars strong {
  color: #e2e8f0;
}
body.theme-dark .report-hero-kpis span,
body.theme-dark .report-focus-grid span {
  color: #8ba1b7;
}
body.theme-dark .report-bars i {
  background: #1f334d;
}
body.theme-dark .license-expiry-alert {
  background: #261d0f;
  border-color: #92400e;
}
body.theme-dark .license-expiry-alert h2 {
  color: #fde68a;
}
body.theme-dark .license-alert-row {
  background: #191612;
  border-color: #78350f;
}
body.theme-dark .shift-overview-main {
  background: #111d2e;
  border-color: #1f334d;
}
body.theme-dark .shift-countdown {
  background: #0a1728;
  border-color: #1f334d;
}
body.theme-dark .theme-toggle-btn {
  background: #16263b;
  border-color: #2b486d;
  color: #e2e8f0;
}

/* Active shift status highlight. */
.shift-row.is-active-shift {
  background: #f8fbff;
  padding-left: 12px;
  margin-left: -12px;
  border-radius: 4px;
}
.active-shift-pill {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #1e3a5f;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.active-shift-time {
  font-family: var(--mono);
  font-size: var(--fs-title3);
  font-weight: 700;
  color: #1e3a5f;
}
.shift-rail.active-rail {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.shift-segment.is-working.kr {
  background: #1e3a5f;
  border: 1px solid #0f2747;
}
.shift-segment.is-working.us {
  background: #475569;
  border: 1px solid #334155;
}
.shift-segment.is-off {
  background: #e2e8f0 !important;
  border: 1px dashed #94a3b8 !important;
  box-shadow: none !important;
  opacity: 0.65;
}
.active-rail .shift-now {
  background: #1e3a5f;
  z-index: 3;
}
.active-rail .shift-now i {
  background: #1e3a5f;
  border-color: #fff;
}
.active-rail .shift-now em {
  color: #1e3a5f;
  font-weight: 700;
}
body.theme-dark .shift-row.is-active-shift {
  background: #111d2e;
  border-left-color: #38bdf8;
}
body.theme-dark .active-shift-pill {
  background: #1e293b;
  color: #93c5fd;
  border-color: #334155;
}
body.theme-dark .active-shift-time {
  color: #38bdf8;
}
body.theme-dark .shift-rail.active-rail {
  border-color: #334155;
  background: #0f172a;
}
body.theme-dark .shift-segment.is-working.kr {
  background: #2563eb;
  border-color: #1d4ed8;
  box-shadow: none;
}
body.theme-dark .shift-segment.is-working.us {
  background: #475569;
  border-color: #334155;
  box-shadow: none;
}

/* Regional routing, compact dashboard KPIs and assignment controls */
.shift-overview + .kpi-grid {
  grid-template-columns: repeat(5, minmax(105px, 1fr));
}
.shift-overview + .kpi-grid .kpi:last-child {
  display: block;
}
.shift-overview + .kpi-grid .kpi {
  min-height: 72px;
  padding: 9px 14px;
}
.shift-overview + .kpi-grid .kpi strong {
  font-size: var(--fs-title1);
  line-height: 1.1;
  margin-top: 4px;
}
.assignment-field {
  padding: 13px;
  border: 1px solid #d8e3ef;
  border-radius: 9px;
  background: #f8fbff;
}
.assignment-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: stretch;
}
.assignment-team {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #cbd8e6;
  border-radius: 7px;
  background: #fff;
  padding: 6px 11px;
}
.assignment-team span {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.assignment-team b {
  font-size: var(--fs-callout);
  color: #163b63;
}
.assignment-field > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.triage-panel {
  border: 1px solid #c9d9ea;
  background: #f8fbff;
  border-radius: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
}
.triage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.triage-head h2 {
  font-size: var(--fs-body);
  margin: 0;
  color: #123354;
}
.triage-list {
  display: grid;
  gap: 7px;
}
.triage-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #dce6f0;
  border-radius: 8px;
  padding: 9px 10px;
}
.triage-card-title {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #143f6b;
}
.triage-card-title b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.triage-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.triage-card-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.triage-assign-select {
  width: 190px;
}
.cal-shift-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 2px 0;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: var(--fs-micro);
  line-height: 1.3;
  border: 1px solid #c8d8e8;
}
.cal-shift-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.cal-shift-chip time {
  flex: none;
  font: 600 var(--fs-micro) var(--mono);
  color: #526579;
}
.cal-shift-chip.work-kr {
  background: #edf5fd;
  color: #174f86;
}
.cal-shift-chip.work-us {
  background: #eef1f5;
  border-color: #d4dbe3;
  color: #475569;
}
.calendar-legend .work-shift {
  background: #607d9c;
}
body.theme-dark .assignment-field {
  background: #102238;
  border-color: #233d5d;
}
body.theme-dark .assignment-team {
  background: #16263b;
  border-color: #2b486d;
}
body.theme-dark .assignment-team b {
  color: #93c5fd;
}
body.theme-dark .cal-shift-chip.work-kr {
  background: #132f4b;
  border-color: #285681;
  color: #bfdbfe;
}
body.theme-dark .cal-shift-chip.work-us {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
body.theme-dark .cal-shift-chip time {
  color: #94a3b8;
}
@media (max-width: 1100px) {
  .shift-overview + .kpi-grid {
    grid-template-columns: repeat(5, minmax(90px, 1fr));
  }
}
@media (max-width: 760px) {
  .shift-overview + .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .assignment-control {
    grid-template-columns: 1fr;
  }
  .triage-card {
    grid-template-columns: 1fr;
  }
  .triage-card-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .triage-assign-select {
    width: 100%;
  }
}
body.theme-dark .shift-segment.is-off {
  background: #1e293b !important;
  border-color: #334155 !important;
  opacity: 0.5;
}
body.theme-dark .active-rail .shift-now {
  background: #38bdf8;
}
body.theme-dark .active-rail .shift-now i {
  background: #38bdf8;
  border-color: #0f172a;
}
body.theme-dark .active-rail .shift-now em {
  color: #38bdf8;
}

/* Recommended runbook cards. */
.task-runbooks .panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.task-runbooks .panel-head > div span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.task-runbooks .panel-body {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}
.task-runbook-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease;
}
.task-runbook-link:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  transform: translateY(-1px);
}
.task-runbook-link .runbook-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.task-runbook-link .runbook-tag.default {
  background: #e0f2fe;
  color: #0369a1;
}
.task-runbook-link .runbook-tag.recommended {
  background: #f1f5f9;
  color: #334155;
}
.task-runbook-link .runbook-info {
  min-width: 0;
}
.task-runbook-link .runbook-info b {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-runbook-link .runbook-info small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-runbook-link em {
  color: #94a3b8;
  font-size: var(--fs-title3);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
body.theme-dark .task-runbook-link {
  background: #16263b;
  border-color: #1f334d;
  color: #e2e8f0;
}
body.theme-dark .task-runbook-link:hover {
  border-color: #3b82f6;
  background: #1e3654;
}
body.theme-dark .task-runbook-link .runbook-info b {
  color: #f1f5f9;
}
body.theme-dark .task-runbook-link .runbook-tag.default {
  background: #0c4a6e;
  color: #7dd3fc;
}
body.theme-dark .task-runbook-link .runbook-tag.recommended {
  background: #1e293b;
  color: #cbd5e1;
}
body.theme-dark .task-runbook-link em {
  color: #64748b;
}
/* Secure authentication shell */
.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f1f5f9;
  color: #102a43;
}
.auth-card {
  width: min(100%, 440px);
  padding: 34px;
  background: #fff;
  border: 1px solid #d7e3ef;
  border-radius: 16px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.auth-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #123354;
  color: #fff;
  font-weight: 800;
}
.auth-brand b,
.auth-brand small {
  display: block;
}
.auth-brand b {
  font-size: var(--fs-title3);
}
.auth-brand small {
  margin-top: 2px;
  color: #64748b;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-heading > span {
  color: #2369ad;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
}
.auth-heading h1 {
  margin: 7px 0 8px;
  font-size: var(--fs-display);
  line-height: 1.3;
}
.auth-heading p {
  margin: 0 0 24px;
  color: #64748b;
}
.auth-form {
  display: grid;
  gap: 16px;
}
.auth-form label {
  display: grid;
  gap: 7px;
  color: #334e68;
  font-size: var(--fs-callout);
  font-weight: 700;
}
.auth-form input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #cbd9e8;
  border-radius: 8px;
  background: #fff;
  color: #102a43;
  font: inherit;
  outline: none;
}
.auth-form input:focus {
  border-color: #2369ad;
}
.button.auth-primary {
  width: 100%;
  min-height: 46px;
  margin-top: 2px;
  justify-content: center;
  background: #164f87;
  color: #fff;
  border-color: #164f87;
  font-weight: 700;
}
.button.auth-primary:hover {
  background: #123f6c;
}
.button.auth-primary:disabled {
  opacity: 0.6;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: #829ab1;
  font-size: var(--fs-micro);
}
.auth-divider:before,
.auth-divider:after {
  content: '';
  height: 1px;
  flex: 1;
  background: #d9e2ec;
}
.button.auth-microsoft {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  background: #fff;
  color: #183b56;
  border-color: #bcccdc;
}
.auth-microsoft span {
  color: #2369ad;
  font-size: var(--fs-title3);
}
.auth-security {
  margin-top: 24px;
  padding: 13px 14px;
  background: #f3f8fd;
}
.auth-security b {
  font-size: var(--fs-caption);
}
.auth-security p,
.auth-help,
.auth-rule {
  margin: 4px 0 0;
  color: #627d98;
  font-size: var(--fs-micro);
  line-height: 1.55;
}
.auth-rule {
  margin-top: -6px;
}
.auth-loading {
  display: grid;
  justify-items: center;
  gap: 13px;
  padding: 30px 0;
}
.auth-loading p {
  margin: 0;
  color: #627d98;
}
.auth-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #d9e2ec;
  border-top-color: #2369ad;
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
.auth-status {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.auth-status p {
  margin: 5px 0 0;
}
.auth-status-error {
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #9f1239;
}
.auth-help {
  text-align: center;
  margin-top: 15px;
}
body.theme-dark .auth-page {
  background: #071727;
}
.theme-dark .auth-card {
  background: #102a43;
  border-color: #294b68;
  color: #edf5fc;
}
.theme-dark .auth-heading h1,
.theme-dark .auth-form input {
  color: #edf5fc;
}
.theme-dark .auth-form input {
  background: #0b2237;
  border-color: #486581;
}
.theme-dark .auth-form label {
  color: #d9e2ec;
}
.theme-dark .button.auth-microsoft {
  background: #163a59;
  color: #edf5fc;
  border-color: #486581;
}
@media (max-width: 520px) {
  .auth-page {
    padding: 14px;
  }
  .auth-card {
    padding: 25px 20px;
    border-radius: 13px;
  }
  .auth-heading h1 {
    font-size: var(--fs-title1);
  }
}

/* =========================================================
   Settings 4 Sub-Tabs & Shift Templates Styles
   ========================================================= */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  overflow-x: auto;
}
.settings-tabs button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: var(--fs-callout);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.settings-tabs button:hover {
  background: #f1f5f9;
  color: var(--ink);
}
.settings-tabs button.active {
  background: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}
body.theme-dark .settings-tabs button:hover {
  background: #1e293b;
  color: #f8fafc;
}
body.theme-dark .settings-tabs button.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

/* 시프트 템플릿은 팀별로 묶어 그린다. 묶음 머리가 없으면 KR 과 US 카드가 한 줄로
   섞여 흘러, 팀 태그가 카드마다 붙어 있어도 눈으로 골라내야 한다. */
.shift-template-group + .shift-template-group {
  margin-top: 18px;
}
.shift-template-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.shift-template-group-head h3 {
  margin: 0;
  font-size: var(--fs-callout);
}
.shift-template-group-head .meta {
  margin-left: auto;
}
.shift-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 10px;
}
.shift-template-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shift-template-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.shift-card-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.shift-tmpl-code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
  font-size: var(--fs-micro);
  font-family: var(--mono);
  flex-shrink: 0;
}
.shift-template-card h3 {
  margin: 0;
  font-size: var(--fs-callout);
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}
.shift-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.shift-team-tag {
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #475569;
}
.shift-team-tag.kr {
  background: #eff6ff;
  color: #1d4ed8;
}
.shift-team-tag.us {
  background: #f8fafc;
  color: #475569;
}

/* Seven-day shift mini strip. */
.shift-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 3px;
  user-select: none;
}
.shift-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  padding: 2px 1px;
  background: #fff;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
  min-height: 36px;
  justify-content: center;
  gap: 1px;
}
.shift-day-col.is-weekend .day-lbl {
  color: #94a3b8;
}
.shift-day-col .day-lbl {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #475569;
  line-height: 1;
}
.shift-day-col.is-work {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.shift-day-col.is-work .day-lbl {
  color: #1d4ed8;
}
.shift-day-col .day-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-micro);
  font-family: var(--mono);
  font-weight: 600;
  color: #1e40af;
  line-height: 1.05;
}
.shift-day-col.is-off {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.6;
}
.shift-day-col.is-off .off-lbl {
  font-size: var(--fs-micro);
  color: #94a3b8;
  font-weight: 600;
}

.shift-template-card footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  border-top: 1px solid #f1f5f9;
  font-size: var(--fs-micro);
  color: var(--muted);
  line-height: 1.2;
}
.shift-template-card footer b {
  color: #1e3a5f;
}
.shift-template-card footer small {
  color: #64748b;
}

body.theme-dark .shift-template-card {
  background: #111d2e;
  border-color: #1f334d;
}
body.theme-dark .shift-tmpl-code {
  background: #0c4a6e;
  color: #7dd3fc;
}
body.theme-dark .shift-team-tag.kr {
  background: #1e3a8a;
  color: #bfdbfe;
}
body.theme-dark .shift-team-tag.us {
  background: #1e293b;
  color: #cbd5e1;
}
body.theme-dark .shift-week-strip {
  background: #091322;
  border-color: #1e293b;
}
body.theme-dark .shift-day-col {
  background: #0f1d30;
  border-color: #1e293b;
}
body.theme-dark .shift-day-col .day-lbl {
  color: #94a3b8;
}
body.theme-dark .shift-day-col.is-work {
  background: #172554;
  border-color: #1d4ed8;
}
body.theme-dark .shift-day-col.is-work .day-lbl {
  color: #93c5fd;
}
body.theme-dark .shift-day-col.is-work .day-time {
  color: #bfdbfe;
}
body.theme-dark .shift-day-col.is-off {
  background: #0a1424;
  border-color: #152238;
}
body.theme-dark .shift-day-col.is-off .off-lbl {
  color: #475569;
}
body.theme-dark .shift-template-card footer {
  border-top-color: #1e293b;
}
body.theme-dark .shift-template-card footer b {
  color: #93c5fd;
}
body.theme-dark .shift-template-card footer small {
  color: #94a3b8;
}

.shift-tmpl-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  background: #edf5fd;
  color: #1e40af;
  font-size: var(--fs-micro);
  font-weight: 600;
  border: 1px solid #bfdbfe;
}
body.theme-dark .shift-tmpl-pill {
  background: #172554;
  color: #93c5fd;
  border-color: #1d4ed8;
}

/* Daily shift-time editor. */
.shift-days-grid {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.shift-day-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
}
.shift-day-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  cursor: pointer;
}
.shift-day-times {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shift-day-times input.input.sm {
  width: 110px;
  padding: 4px 8px;
  font-size: var(--fs-caption);
}
body.theme-dark .shift-day-row {
  background: #0b1727;
  border-color: #1f334d;
}

/* Calendar navigation and event chips. */
.calendar-nav-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cal-cell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cal-today-badge {
  font-size: var(--fs-micro);
  font-weight: 800;
  background: #2563eb;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
}
.cal-cell-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 105px;
  overflow-y: auto;
}
.cal-chip {
  font-size: var(--fs-micro);
  padding: 2px 5px;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.cal-chip.chip-leave {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  font-weight: 700;
}
.cal-chip.chip-shift {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
.cal-chip.chip-shift.chip-kr {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.cal-chip.chip-shift.chip-us {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.cal-chip.chip-shift small {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  opacity: 0.85;
}
.cal-chip.chip-more {
  background: #f1f5f9;
  color: #64748b;
  font-size: var(--fs-micro);
  text-align: center;
}

body.theme-dark .cal-chip.chip-leave {
  background: #78350f;
  color: #fde68a;
  border-color: #92400e;
}
body.theme-dark .cal-chip.chip-shift.chip-kr {
  background: #1e3a8a;
  color: #dbeafe;
  border-color: #2563eb;
}
body.theme-dark .cal-chip.chip-shift.chip-us {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}
body.theme-dark .cal-chip.chip-more {
  background: #1e293b;
  color: #94a3b8;
}

/* =========================================================
   Dashboard 5-Column Full-Width KPI Cards
   ========================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px;
  margin-bottom: 18px;
  width: 100%;
}
.kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.16s ease;
  min-height: 82px;
  border-top: 3px solid transparent;
}
.kpi:hover {
  transform: translateY(-2px);
}
.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kpi .kpi-label {
  font-size: var(--fs-callout);
  font-weight: 700;
  color: #475569;
}
.kpi-icon {
  font-size: 13px;
  opacity: 0.85;
}
.kpi strong.kpi-count,
.kpi strong {
  font: 700 var(--fs-display)/1 var(--mono);
  color: #0f172a;
  margin-top: 10px;
  display: block;
}

.kpi.kpi-new {
  border-top-color: #64748b;
  background: #fafbfc;
}
.kpi.kpi-new:hover {
  border-color: #94a3b8;
  border-top-color: #475569;
}
.kpi.kpi-new strong {
  color: #334155;
}

.kpi.kpi-progress {
  border-top-color: #2563eb;
  background: #fbfdff;
}
.kpi.kpi-progress:hover {
  border-color: #93c5fd;
  border-top-color: #1d4ed8;
}
.kpi.kpi-progress strong {
  color: #1d4ed8;
}

.kpi.kpi-completed {
  border-top-color: #16a34a;
  background: #fbfdfb;
}
.kpi.kpi-completed:hover {
  border-color: #86efac;
  border-top-color: #15803d;
}
.kpi.kpi-completed strong {
  color: #15803d;
}

.kpi.kpi-critical {
  border-top-color: #dc2626;
  background: #fffdfd;
}
.kpi.kpi-critical:hover {
  border-color: #fca5a5;
  border-top-color: #b91c1c;
}
.kpi.kpi-critical strong {
  color: #dc2626;
}
.kpi.kpi-critical .kpi-label {
  color: #b91c1c;
  font-weight: 800;
}

.kpi.kpi-waiting {
  border-top-color: #d97706;
  background: #fffdfa;
}
.kpi.kpi-waiting:hover {
  border-color: #fde68a;
  border-top-color: #b45309;
}
.kpi.kpi-waiting strong {
  color: #b45309;
}

body.theme-dark .kpi {
  background: #111d2e;
  border-color: #1f334d;
}
body.theme-dark .kpi:hover {
  background: #152438;
  border-color: #3b82f6;
}
body.theme-dark .kpi .kpi-label {
  color: #94a3b8;
}
body.theme-dark .kpi strong {
  color: #f8fafc;
}
body.theme-dark .kpi.kpi-new strong {
  color: #cbd5e1;
}
body.theme-dark .kpi.kpi-progress strong {
  color: #60a5fa;
}
body.theme-dark .kpi.kpi-completed strong {
  color: #4ade80;
}
body.theme-dark .kpi.kpi-critical {
  background: #1c141d;
  border-color: #4c1d24;
}
body.theme-dark .kpi.kpi-critical strong {
  color: #f87171;
}
body.theme-dark .kpi.kpi-critical .kpi-label {
  color: #fca5a5;
}
body.theme-dark .kpi.kpi-waiting strong {
  color: #fbbf24;
}

@media (max-width: 1050px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 650px) {
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   Print and fast browser PDF styles
   ========================================================= */
#report-print-container {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 10mm 10mm 10mm;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  body {
    background: #fff !important;
    color: #1e293b !important;
    font-size: var(--fs-micro) !important;
  }
  /* Hide interactive UI in print output. */
  .sidebar,
  .topbar,
  .modal-backdrop,
  .report-period,
  .report-topic-tabs,
  .report-export-actions,
  .report-page-tabs,
  .page-head,
  nav,
  button,
  .button,
  input,
  select,
  textarea {
    display: none !important;
  }
  .page,
  #app {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Enable the print-only report container. */
  #report-print-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .print-page-section {
    page-break-after: always !important;
    break-after: page !important;
    padding-bottom: 8mm !important;
    margin-bottom: 8mm !important;
  }
  .print-page-section:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .print-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    border-bottom: 2px solid #2563eb !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
  }
  .print-header h1 {
    font-size: 20px !important;
    margin: 0 !important;
    color: #0f172a !important;
  }
  .print-header .meta {
    font-size: 11px !important;
    color: #64748b !important;
    text-align: right !important;
  }
  .report-hero-kpis,
  .report-asset-grid,
  .report-site-grid,
  .report-license-grid,
  .report-dashboard-grid,
  .report-visual-panel,
  .report-topic-body,
  .panel,
  .report-site-card,
  .report-asset-card,
  .report-license-card {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .report-hero-kpis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .report-hero-kpis article {
    min-height: 70px !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
  }
  .report-hero-kpis strong {
    font-size: var(--fs-title1) !important;
  }
  .report-asset-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .report-asset-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    background: #fff !important;
  }
  .report-site-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: start !important;
  }
  .report-site-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  .report-site-card > header {
    background: #173e72 !important;
    color: #fff !important;
    padding: 8px 10px !important;
  }
  .report-license-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .report-license-card {
    border: 1px solid #cbd5e1 !important;

    border-radius: 6px !important;
    padding: 8px 10px !important;
    background: #fff !important;
  }
  .report-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 10px !important;
  }
  .report-visual-panel {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fff !important;
  }
  .aging-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .aging-stat-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 8px !important;
  }
  .data-table,
  .report-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: var(--fs-micro) !important;
  }
  .data-table th,
  .report-table th {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #cbd5e1 !important;
    padding: 5px 6px !important;
  }
  .data-table td,
  .report-table td {
    border: 1px solid #e2e8f0 !important;
    padding: 4px 6px !important;
  }
}

/* 인벤토리 트리·테이블 스타일은 아래 "Inventory · 계층 트리와 자산 테이블" 한 블록으로 합쳤다. */

/* Mobile-first data-center walkthrough. */
.walkthrough-page {
  --walkthrough-blue: #1e5fa8;
  --walkthrough-navy: #102f4c;
  --walkthrough-border: #cbd9e7;
  max-width: 1440px;
  margin: 0 auto;
}
.walkthrough-sync-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #e7c275;
  border-radius: 8px;
  background: #fff9e9;
  color: #6c4a0a;
}
.walkthrough-sync-notice span {
  flex: 1;
  color: #795d28;
  font-size: var(--fs-caption);
}
.walkthrough-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.walkthrough-scope-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--walkthrough-border);
  border-radius: 10px;
  background: #fff;
}
.walkthrough-scope-card > div > span,
.walkthrough-progress-head > div > span,
.walkthrough-rack-summary span {
  color: #47739c;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.walkthrough-scope-card h2 {
  margin: 5px 0 4px;
  color: var(--walkthrough-navy);
  font-size: var(--fs-title3);
}
.walkthrough-scope-card p {
  margin: 0;
  color: #687d92;
  font-size: var(--fs-caption);
}
.walkthrough-scope-card .button {
  min-width: 104px;
}
.walkthrough-scope-card .button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.walkthrough-history {
  overflow: hidden;
}
.walkthrough-history .panel-head {
  padding: 14px 16px;
}
.walkthrough-history-table td {
  vertical-align: middle;
}
.walkthrough-history-table .subtext {
  display: block;
  margin-top: 2px;
}
.walkthrough-task-link {
  border: 0;
  background: none;
  color: #1d65aa;
  font: 700 var(--fs-micro) var(--mono);
  cursor: pointer;
}
.walkthrough-task-link:hover {
  text-decoration: underline;
}
.walkthrough-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 150px;
  padding: 24px;
  color: #667d94;
  text-align: center;
}
.walkthrough-empty strong {
  color: #294762;
  font-size: var(--fs-body);
}
.walkthrough-empty span {
  font-size: var(--fs-caption);
}
.walkthrough-progress-page {
  padding-bottom: 20px;
}
.walkthrough-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border: 1px solid var(--walkthrough-border);
  border-radius: 10px 10px 0 0;
  background: #fff;
}
.walkthrough-progress-head h1 {
  margin: 4px 0;
  color: var(--walkthrough-navy);
  font-size: var(--fs-title1);
}
.walkthrough-progress-head p {
  margin: 0;
  color: #60778e;
  font-size: var(--fs-caption);
}
.walkthrough-progress-track {
  height: 7px;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: #dfe8f1;
}
.walkthrough-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2b78bd;
  transition: width 0.2s ease;
}
.walkthrough-inspection-card {
  overflow: hidden;
  border: 1px solid #bed0df;
  border-radius: 10px;
  background: #fff;
}
.walkthrough-rack-summary {
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #d9e3ed;
  background: #f4f8fc;
}
.walkthrough-rack-summary h2 {
  margin: 3px 0;
  color: #102f4c;
  font-size: var(--fs-title3);
}
.walkthrough-rack-summary p {
  margin: 0;
  color: #637b91;
  font-size: var(--fs-caption);
}
.walkthrough-rack-summary > div:last-child {
  text-align: right;
}
.walkthrough-rack-summary strong {
  display: block;
  color: #154f84;
  font-size: var(--fs-display);
  line-height: 1;
}
.walkthrough-rack-map {
  padding: 14px 16px;
  background: #eef3f7;
}
.walkthrough-rack-frame {
  overflow: hidden;
  border: 4px solid #263b4d;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #8ba0b3;
}
.walkthrough-rack-unit {
  display: grid;
  border-bottom: 1px solid #d7e0e8;
  color: #7890a5;
  font-size: 8px;
}
.walkthrough-rack-unit:last-child {
  border-bottom: 0;
}
.walkthrough-rack-unit > span {
  padding-right: 6px;
  border-right: 1px solid #c5d1dc;
  background: #f4f7fa;
  font-family: var(--mono);
  font-weight: 700;
  text-align: right;
}
.walkthrough-rack-unit > div {
  display: flex;
  gap: 3px;
  min-width: 0;
}
.walkthrough-rack-unit b {
  overflow: hidden;
  color: #174a76;
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-rack-unit.occupied {
  background: #dcecf9;
}
.walkthrough-rack-unit.occupied > span {
  background: #cfe1ef;
  color: #214d72;
}
.walkthrough-mounted-assets {
  border-top: 1px solid #d7e2eb;
}
.walkthrough-mounted-assets summary {
  padding: 11px 16px;
  color: #234866;
  font-size: var(--fs-caption);
  font-weight: 750;
  cursor: pointer;
}
.walkthrough-mounted-assets ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0 16px 14px;
  list-style: none;
}
.walkthrough-mounted-assets li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid #e2e9f0;
  font-size: var(--fs-micro);
}
.walkthrough-mounted-assets li b {
  overflow: hidden;
  color: #183b59;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-mounted-assets li span {
  color: #71879b;
  text-align: right;
}
.walkthrough-mounted-assets p {
  margin: 0;
  padding: 0 16px 14px;
  color: #71879b;
  font-size: var(--fs-micro);
}
.walkthrough-result-actions {
  position: sticky;
  z-index: 5;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 0 2px;
  background: linear-gradient(to bottom, rgba(247, 249, 252, 0), #f7f9fc 22%);
}
.walkthrough-result {
  min-height: 68px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: var(--fs-title1);
  font-weight: 800;
  cursor: pointer;
}
.walkthrough-result small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.78;
}
.walkthrough-result.pass {
  background: #12824b;
}
.walkthrough-result.pass:hover {
  background: #0d6f3f;
}
.walkthrough-result.fail {
  background: #c72a35;
}
.walkthrough-result.fail:hover {
  background: #ad202a;
}
.walkthrough-last-check {
  min-width: 104px;
}
.walkthrough-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 43px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 800;
  white-space: nowrap;
}
.walkthrough-check-badge.pass {
  border-color: #9fd5b5;
  background: #e7f7ed;
  color: #08783f;
}
.walkthrough-check-badge.fail {
  border-color: #efb6bb;
  background: #ffebed;
  color: #b71f2c;
}
.walkthrough-last-check time {
  display: block;
  margin-top: 3px;
  color: #6f8497;
  font: 600 var(--fs-micro) var(--mono);
  white-space: nowrap;
}
.walkthrough-check-empty {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
body.theme-dark .walkthrough-sync-notice {
  border-color: #725823;
  background: #2b2415;
  color: #f4d58d;
}
body.theme-dark .walkthrough-sync-notice span {
  color: #d8be83;
}
body.theme-dark .walkthrough-scope-card,
body.theme-dark .walkthrough-progress-head,
body.theme-dark .walkthrough-inspection-card {
  border-color: #29415e;
  background: #14243a;
}
body.theme-dark .walkthrough-scope-card h2,
body.theme-dark .walkthrough-progress-head h1,
body.theme-dark .walkthrough-rack-summary h2,
body.theme-dark .walkthrough-empty strong {
  color: #edf4fb;
}
body.theme-dark .walkthrough-scope-card p,
body.theme-dark .walkthrough-progress-head p {
  color: #9fb2c4;
}
body.theme-dark .walkthrough-progress-track {
  background: #263d56;
}
body.theme-dark .walkthrough-rack-summary {
  border-color: #29415e;
  background: #182d45;
}
body.theme-dark .walkthrough-rack-map {
  background: #101e2e;
}
body.theme-dark .walkthrough-rack-frame {
  border-color: #61768a;
  background: #132338;
  box-shadow: inset 0 0 0 1px #344c65;
}
body.theme-dark .walkthrough-rack-unit {
  border-color: #29415e;
  color: #7f97ad;
}
body.theme-dark .walkthrough-rack-unit > span {
  border-color: #36506a;
  background: #172a40;
}
body.theme-dark .walkthrough-rack-unit.occupied {
  background: #173b59;
}
body.theme-dark .walkthrough-rack-unit.occupied > span {
  background: #214764;
  color: #c6e2f7;
}
body.theme-dark .walkthrough-rack-unit b {
  color: #dcecf8;
}
body.theme-dark .walkthrough-mounted-assets {
  border-color: #29415e;
}
body.theme-dark .walkthrough-mounted-assets summary,
body.theme-dark .walkthrough-mounted-assets li b {
  color: #dce9f5;
}
body.theme-dark .walkthrough-mounted-assets li {
  border-color: #29415e;
}
body.theme-dark .walkthrough-result-actions {
  background: linear-gradient(to bottom, rgba(15, 27, 42, 0), #0f1b2a 22%);
}
body.theme-dark .walkthrough-check-badge.pass {
  border-color: #276f4a;
  background: #143a2a;
  color: #78d7a2;
}
body.theme-dark .walkthrough-check-badge.fail {
  border-color: #7b3840;
  background: #3a1d23;
  color: #f29aa3;
}
@media (max-width: 760px) {
  .walkthrough-page {
    margin: -2px -4px 0;
  }
  .walkthrough-sync-notice {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .walkthrough-sync-notice span {
    flex-basis: 70%;
  }
  .walkthrough-scope-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .walkthrough-scope-card {
    padding: 14px;
  }
  .walkthrough-history-table {
    min-width: 760px;
  }
  .walkthrough-progress-head {
    padding: 12px;
  }
  .walkthrough-progress-head h1 {
    font-size: var(--fs-title3);
  }
  .walkthrough-progress-head p {
    font-size: var(--fs-micro);
  }
  .walkthrough-rack-summary {
    padding: 12px;
  }
  .walkthrough-rack-map {
    padding: 10px;
  }
  .walkthrough-mounted-assets ul {
    grid-template-columns: 1fr;
  }
  .walkthrough-result-actions {
    gap: 8px;
    padding-top: 12px;
  }
  .walkthrough-result {
    min-height: 64px;
    font-size: var(--fs-title3);
  }
  .walkthrough-last-check {
    min-width: 88px;
  }
}
@media (max-width: 430px) {
  .walkthrough-scope-card {
    align-items: stretch;
    flex-direction: column;
  }
  .walkthrough-scope-card .button {
    width: 100%;
  }
  .walkthrough-progress-head .button {
    padding: 6px 8px;
  }
  .walkthrough-rack-summary h2 {
    font-size: var(--fs-title3);
  }
  .walkthrough-rack-unit b {
    font-size: 7.5px;
  }
}

.walkthrough-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.walkthrough-kpis article {
  padding: 12px 14px;
  border: 1px solid #ccdae7;
  border-radius: 8px;
  background: #fff;
}
.walkthrough-kpis span {
  display: block;
  color: #647b91;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.walkthrough-kpis strong {
  display: block;
  margin-top: 4px;
  color: #143f6c;
  font-size: var(--fs-title1);
}
.walkthrough-kpis article.pass strong {
  color: #08783f;
}
.walkthrough-kpis article.fail strong {
  color: #bd2430;
}
.walkthrough-customer-templates {
  margin: -2px 0 18px;
  border: 1px solid #cbd9e7;
  border-radius: 9px;
  background: #fff;
}
.walkthrough-customer-templates summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  color: #173d62;
  cursor: pointer;
  list-style: none;
}
.walkthrough-customer-templates summary::-webkit-details-marker {
  display: none;
}
.walkthrough-customer-templates summary span {
  display: grid;
  gap: 2px;
}
.walkthrough-customer-templates summary b {
  font-size: var(--fs-callout);
}
.walkthrough-customer-templates summary small {
  color: #71869a;
  font-size: var(--fs-micro);
  font-weight: 500;
}
.walkthrough-customer-templates summary em {
  color: #2a6ca8;
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 700;
}
.walkthrough-customer-templates[open] summary {
  border-bottom: 1px solid #d9e3ed;
}
.walkthrough-customer-templates[open] summary em {
  font-size: 0;
}
.walkthrough-customer-templates[open] summary em:after {
  content: '접기';
  font-size: var(--fs-micro);
}
.walkthrough-customer-templates > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.walkthrough-customer-templates button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #d5e0ea;
  border-radius: 6px;
  background: #f7fafe;
  color: #24445f;
  cursor: pointer;
  text-align: left;
}
.walkthrough-customer-templates button:hover {
  border-color: #79a9d4;
  background: #edf5fc;
}
.walkthrough-customer-templates button span {
  overflow: hidden;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-customer-templates button b {
  flex: 0 0 auto;
  color: #1f68a7;
  font-size: var(--fs-micro);
}
body.theme-dark .walkthrough-kpis article,
body.theme-dark .walkthrough-customer-templates {
  border-color: #29415e;
  background: #14243a;
}
body.theme-dark .walkthrough-kpis span,
body.theme-dark .walkthrough-customer-templates summary small {
  color: #94a9bd;
}
body.theme-dark .walkthrough-kpis strong,
body.theme-dark .walkthrough-customer-templates summary {
  color: #dce9f5;
}
body.theme-dark .walkthrough-customer-templates[open] summary {
  border-color: #29415e;
}
body.theme-dark .walkthrough-customer-templates button {
  border-color: #314b68;
  background: #192c43;
  color: #dce9f5;
}
body.theme-dark .walkthrough-customer-templates button:hover {
  border-color: #4b83b7;
  background: #1d3855;
}
@media (max-width: 760px) {
  .walkthrough-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .walkthrough-kpis article {
    padding: 10px 11px;
  }
  .walkthrough-kpis strong {
    font-size: var(--fs-title1);
  }
  .walkthrough-customer-templates > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .walkthrough-progress-page {
    padding-bottom: 92px;
  }
  .walkthrough-progress-page .walkthrough-result-actions {
    position: fixed;
    z-index: 30;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 8px;
    border: 1px solid #c9d7e4;
    border-radius: 12px;
    background: #f7f9fc;
  }
  body.theme-dark .walkthrough-progress-page .walkthrough-result-actions {
    border-color: #314b68;
    background: #101e2e;
  }
}
@media (max-width: 430px) {
  .walkthrough-customer-templates > div {
    grid-template-columns: 1fr;
  }
}

/* Walkthrough v2: reusable templates, session summaries and object-level checks. */
.walkthrough-kpis article {
  position: relative;
  min-height: 92px;
}
.walkthrough-kpis article > small {
  display: block;
  margin-top: 2px;
  color: #8293a4;
  font-size: var(--fs-micro);
  font-weight: 500;
}
.walkthrough-kpis article.fail:last-child {
  border-color: #efc2c6;
  background: #fffafb;
}
.walkthrough-template-section {
  margin-bottom: 18px;
}
.walkthrough-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 10px;
}
.walkthrough-section-head h2 {
  margin: 0;
  color: #123b63;
  font-size: var(--fs-title3);
}
.walkthrough-section-head p {
  margin: 3px 0 0;
  color: #70859a;
  font-size: var(--fs-micro);
}
.walkthrough-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.walkthrough-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 18px;
  padding: 16px;
  border: 1px solid #cbd9e7;
  border-radius: 10px;
  background: #fff;
}
.walkthrough-template-card > div:first-child > span {
  color: #3974a9;
  font: 800 var(--fs-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.walkthrough-template-card h3 {
  margin: 4px 0;
  color: #123b63;
  font-size: var(--fs-title3);
}
.walkthrough-template-card p {
  margin: 0 0 5px;
  color: #526b82;
  font-size: var(--fs-micro);
}
.walkthrough-template-card > div:first-child > small {
  display: block;
  overflow: hidden;
  color: #8494a4;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-template-card > strong {
  align-self: start;
  color: #174e82;
  font: 800 var(--fs-display) var(--mono);
}
.walkthrough-template-card > strong small {
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}
.walkthrough-template-actions {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 2px;
}
.walkthrough-template-actions .button:first-child {
  margin-right: auto;
}
.walkthrough-icon-button {
  padding: 7px;
  border: 0;
  background: transparent;
  color: #63798d;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.walkthrough-icon-button.danger:hover {
  color: #bd2430;
}
.walkthrough-template-card button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.walkthrough-template-empty {
  border: 1px dashed #b9cadb;
  border-radius: 10px;
  background: #fff;
}
.walkthrough-template-empty .button {
  margin-top: 4px;
}
.walkthrough-session-list {
  display: grid;
}
.walkthrough-session-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e0e8ef;
  background: #fff;
}
.walkthrough-session-row:last-child {
  border-bottom: 0;
}
.walkthrough-session-row > button:first-child {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: #173b5c;
  cursor: pointer;
  text-align: left;
}
.walkthrough-session-row > button:first-child:hover {
  background: #f4f8fc;
}
.walkthrough-session-row > button > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 180px;
}
.walkthrough-session-row > button > span:first-child > b {
  overflow: hidden;
  font-size: var(--fs-callout);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-session-row > button > span:first-child > small {
  color: #71869a;
  font-size: var(--fs-micro);
}
.walkthrough-session-row > .button {
  margin-right: 14px;
}
.walkthrough-session-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.walkthrough-session-counts > small {
  padding: 5px 8px;
  border-left: 1px solid #dfe7ee;
  color: #6e8193;
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.walkthrough-session-counts > small b {
  color: #173f68;
  font: 800 var(--fs-caption) var(--mono);
}
.walkthrough-session-counts > small.fail b {
  color: #b92430;
}
.walkthrough-session-counts em {
  padding: 3px 7px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.walkthrough-session-counts em.complete {
  background: #e7f7ed;
  color: #08783f;
}
.walkthrough-session-counts em.progress {
  background: #e8f1fc;
  color: #1d63a1;
}
.walkthrough-session-counts em.cancelled {
  background: #eef1f4;
  color: #657383;
}
.walkthrough-progress-page {
  max-width: 1040px;
}
.walkthrough-rack-unit {
  grid-template-columns: 45px minmax(0, 1fr);
  min-height: 17px;
  line-height: 16px;
}
.walkthrough-rack-unit.occupied {
  min-height: 25px;
  line-height: 24px;
}
.walkthrough-rack-unit > div {
  align-items: stretch;
  padding: 0 4px;
}
.walkthrough-rack-unit button {
  display: block;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 0 7px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #154b78;
  font-size: 9px;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.walkthrough-rack-unit button:hover {
  background: #c5e1f5;
}
.walkthrough-rack-unit button.selected {
  background: #bd2430;
  color: #fff;
  box-shadow: inset 0 0 0 1px #9f1722;
}
.walkthrough-result:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.48;
  box-shadow: none;
}
.walkthrough-result small b {
  font: 800 inherit var(--mono);
}
.walkthrough-template-form {
  display: grid;
  gap: 11px;
}
.walkthrough-template-form > .field {
  margin: 0;
}
.walkthrough-template-help {
  margin: 0;
  padding: 9px 10px;
  background: #eef6fd;
  color: #49677f;
  font-size: var(--fs-micro);
}
.walkthrough-template-form details {
  overflow: hidden;
  border: 1px solid #d3dee8;
  border-radius: 7px;
}
.walkthrough-template-form summary {
  padding: 9px 11px;
  background: #f5f8fb;
  color: #214969;
  font-size: var(--fs-micro);
  font-weight: 750;
  cursor: pointer;
}
.walkthrough-template-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  max-height: 154px;
  overflow: auto;
  padding: 9px;
}
.walkthrough-template-options.rack-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 220px;
}
.walkthrough-template-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid #e0e7ee;
  border-radius: 5px;
  color: #36536d;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.walkthrough-template-check:has(input:checked) {
  border-color: #6da5d4;
  background: #edf6fd;
  color: #174f80;
  font-weight: 700;
}
.walkthrough-template-check input {
  flex: 0 0 auto;
  accent-color: #1e63a2;
}
.walkthrough-template-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-option-empty {
  grid-column: 1/-1;
  padding: 8px;
  color: #7c8e9e;
  font-size: var(--fs-micro);
}
.walkthrough-issue-form {
  display: grid;
  gap: 10px;
}
.walkthrough-issue-form > div {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid #d9e3ec;
  border-radius: 6px;
  background: #f7f9fb;
}
.walkthrough-issue-form span,
.walkthrough-issue-form label {
  color: #657b90;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.walkthrough-issue-form b {
  color: #173c5f;
  font-size: var(--fs-caption);
}
.walkthrough-issue-form textarea {
  min-height: 110px;
}
.walkthrough-issue-form small {
  color: #8a5b18;
  font-size: var(--fs-micro);
}
.walkthrough-back {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #276ba7;
  font-size: var(--fs-micro);
  font-weight: 700;
  cursor: pointer;
}
.walkthrough-detail-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 13px;
}
.walkthrough-detail-kpis article {
  padding: 11px 13px;
  border: 1px solid #d1dce7;
  border-radius: 8px;
  background: #fff;
}
.walkthrough-detail-kpis span {
  display: block;
  color: #6e8295;
  font-size: var(--fs-micro);
}
.walkthrough-detail-kpis strong {
  display: block;
  margin-top: 3px;
  color: #153f69;
  font: 800 var(--fs-title1) var(--mono);
}
.walkthrough-detail-kpis .pass strong {
  color: #08783f;
}
.walkthrough-detail-kpis .fail strong {
  color: #b92430;
}
.walkthrough-result-list {
  overflow: hidden;
  border: 1px solid #cfdae5;
  border-radius: 9px;
  background: #fff;
}
.walkthrough-result-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 150px;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid #e0e8ef;
}
.walkthrough-result-row:last-child {
  border-bottom: 0;
}
.walkthrough-result-row.fail {
  background: #fdf1f2;
}
.walkthrough-result-row.pass {
  background: #eef7f1;
}
.walkthrough-result-index {
  color: #7b90a4;
  font: 800 var(--fs-micro) var(--mono);
}
.walkthrough-result-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.walkthrough-result-title b {
  color: #153c60;
  font-size: var(--fs-caption);
}
.walkthrough-result-title span {
  color: #71869a;
  font-size: var(--fs-micro);
}
.walkthrough-pass-detail {
  margin: 5px 0 0;
  color: #638077;
  font-size: var(--fs-micro);
}
.walkthrough-issue-detail {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 3px 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 6px;
  background: #fff3f4;
}
.walkthrough-issue-detail strong {
  color: #9e2932;
  font-size: var(--fs-micro);
}
.walkthrough-issue-detail p {
  margin: 0;
  color: #4e5f70;
  font-size: var(--fs-micro);
}
.walkthrough-result-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 5px;
}
.walkthrough-result-meta time {
  color: #72879a;
  font: 600 var(--fs-micro) var(--mono);
}
body.theme-dark .walkthrough-template-card,
body.theme-dark .walkthrough-template-empty,
body.theme-dark .walkthrough-session-row,
body.theme-dark .walkthrough-detail-kpis article,
body.theme-dark .walkthrough-result-list {
  border-color: #29415e;
  background: #14243a;
}
body.theme-dark .walkthrough-section-head h2,
body.theme-dark .walkthrough-template-card h3,
body.theme-dark .walkthrough-session-row > button:first-child,
body.theme-dark .walkthrough-detail-kpis strong,
body.theme-dark .walkthrough-result-title b {
  color: #e1edf8;
}
body.theme-dark .walkthrough-session-row {
  border-color: #29415e;
}
body.theme-dark .walkthrough-session-row > button:first-child:hover {
  background: #182d45;
}
body.theme-dark .walkthrough-template-form details {
  border-color: #314b68;
}
body.theme-dark .walkthrough-template-form summary {
  background: #182b41;
  color: #dbe8f4;
}
body.theme-dark .walkthrough-template-check {
  border-color: #314b68;
  color: #bdd0e0;
}
body.theme-dark .walkthrough-template-check:has(input:checked) {
  background: #1b3a57;
}
body.theme-dark .walkthrough-result-row {
  border-color: #29415e;
}
body.theme-dark .walkthrough-issue-detail {
  background: #3a1d23;
}
body.theme-dark .walkthrough-issue-detail p {
  color: #d6c3c5;
}
@media (max-width: 760px) {
  .walkthrough-page-title {
    flex-direction: row !important;
  }
  .walkthrough-page-title .button {
    padding: 8px 10px;
  }
  .walkthrough-kpis article {
    min-height: 78px;
  }
  .walkthrough-kpis article > small {
    font-size: var(--fs-micro);
  }
  .walkthrough-template-grid {
    grid-template-columns: 1fr;
  }
  .walkthrough-session-row {
    align-items: stretch;
  }
  .walkthrough-session-row > button:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
  }
  .walkthrough-session-row > button > span:first-child {
    min-width: 0;
  }
  .walkthrough-session-counts {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .walkthrough-session-counts > small {
    padding: 2px 6px;
  }
  .walkthrough-session-row > .button {
    align-self: center;
    margin: 0 9px 0 0;
  }
  .walkthrough-progress-page .walkthrough-rack-map {
    overflow: auto;
  }
  .walkthrough-rack-unit {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 20px;
    line-height: 19px;
  }
  .walkthrough-rack-unit.occupied {
    min-height: 30px;
    line-height: 29px;
  }
  .walkthrough-rack-unit button {
    font-size: 9px;
  }
  .walkthrough-template-options,
  .walkthrough-template-options.rack-options {
    grid-template-columns: 1fr 1fr;
  }
  .walkthrough-detail-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .walkthrough-result-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 11px;
  }
  .walkthrough-result-meta {
    grid-column: 2;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: start;
  }
  .walkthrough-issue-detail {
    grid-template-columns: 1fr;
  }
  .walkthrough-result-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}
@media (max-width: 430px) {
  .walkthrough-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .walkthrough-template-card {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 13px;
  }
  .walkthrough-template-options,
  .walkthrough-template-options.rack-options {
    grid-template-columns: 1fr;
  }
  .walkthrough-session-counts {
    gap: 3px;
  }
  .walkthrough-session-counts em {
    margin-right: 5px;
  }
  .walkthrough-result {
    font-size: var(--fs-title3);
  }
}

/* Walkthrough v3 rack elevation: one physical device block per U-span. */
.walkthrough-rack-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.walkthrough-rack-summary > div:first-child {
  flex: 1 1 180px;
}
.walkthrough-rack-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  min-width: 230px;
  padding: 8px 11px;
  border: 1px solid #bdcddd;
  border-radius: 7px;
  background: #fff;
  color: #173f64;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s;
}
.walkthrough-rack-target:hover {
  border-color: #6d9fc9;
  background: #f5faff;
}
.walkthrough-rack-target > span {
  grid-row: 1/3;
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: -8px 10px -8px -11px;
  padding: 0 8px;
  border-right: 1px solid #d7e2eb;
  color: #4c7396;
  font: 800 8px var(--mono);
  letter-spacing: 0.06em;
}
.walkthrough-rack-target > b {
  font-size: 11px;
}
.walkthrough-rack-target > small {
  color: #71869a;
  font-size: 8px;
}
.walkthrough-rack-target.selected {
  border-color: #b51f2b;
  background: #fff0f1;
}
.walkthrough-rack-target.selected > span,
.walkthrough-rack-target.selected > b {
  color: #aa1e29;
}
.walkthrough-progress-page .walkthrough-rack-map {
  padding: 18px;
  background: #e7edf3;
}
.walkthrough-rack-elevation {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  overflow: hidden;
  border: 6px solid #1a2d3d;
  border-radius: 8px;
  background: #fff;
}
.walkthrough-rack-labels {
  display: grid;
  grid-template-rows: repeat(var(--rack-units), 30px);
  border-right: 1px solid #9eb0bf;
  background: #dce5ec;
}
.walkthrough-rack-labels > span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
  border-bottom: 1px solid #bdcad5;
  color: #34536d;
  font: 800 10px var(--mono);
}
.walkthrough-rack-labels > span:last-child {
  border-bottom: 0;
}
.walkthrough-rack-labels small {
  margin-left: 1px;
  font-size: 6px;
  opacity: 0.7;
}
.walkthrough-rack-canvas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rack-units), 30px);
  min-width: 0;
  background: #f7f9fb;
}
.walkthrough-rack-canvas > i {
  z-index: 0;
  grid-column: 1/-1;
  border-bottom: 1px solid #d5dfe7;
  background: linear-gradient(90deg, rgba(33, 75, 110, 0.025), rgba(33, 75, 110, 0));
  pointer-events: none;
}
.walkthrough-rack-device {
  z-index: 2;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 2px 3px;
  padding: 5px 10px;
  border: 1px solid #2b638e;
  border-radius: 5px;
  background: #e7f3fa;
  color: #0f426b;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.14s,
    border-color 0.14s,
    box-shadow 0.14s,
    transform 0.14s;
}
.walkthrough-rack-device:hover {
  z-index: 3;
  border-color: #155985;
  background: #d7ecf8;
  transform: translateY(-1px);
}
.walkthrough-rack-device:nth-of-type(3n) {
  border-left-color: #6a6fc7;
  background: #edf0fb;
}
.walkthrough-rack-device.full-depth {
  border-left-color: #287ab3;
  background: #deedf8;
}
.walkthrough-rack-device > b {
  display: block;
  overflow: hidden;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-rack-device > small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #56758e;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-rack-device.compact {
  justify-content: center;
  padding: 2px 8px;
}
.walkthrough-rack-device.compact > b {
  font-size: 10px;
}
.walkthrough-rack-device.compact > small {
  display: none;
}
.walkthrough-rack-device.selected {
  z-index: 4;
  border-color: #9f1723;
  border-left-color: #9f1723;
  background: #b9212e;
  color: #fff;
}
.walkthrough-rack-device.selected > small {
  color: #ffe1e4;
}
.walkthrough-rack-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 6px 0;
  color: #61798e;
  font-size: var(--fs-micro);
}
.walkthrough-rack-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.walkthrough-rack-legend i {
  width: 12px;
  height: 8px;
  border: 1px solid #2b638e;
  border-radius: 2px;
  background: #e7f3fa;
}
.walkthrough-rack-legend i.rear {
  border-left-color: #6a6fc7;
  background: #edf0fb;
}
.walkthrough-result.fail:not(:disabled) small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-template-form summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.walkthrough-template-form summary small {
  color: #688299;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.walkthrough-template-check[hidden] {
  display: none !important;
}
.walkthrough-template-options {
  align-content: start;
}
.walkthrough-issue-form > div > small {
  margin-top: 2px;
  color: #71869a;
  font-size: var(--fs-micro);
}
body.theme-dark .walkthrough-rack-target {
  border-color: #3a536c;
  background: #182c42;
  color: #dce9f5;
}
body.theme-dark .walkthrough-rack-target > span {
  border-color: #3a536c;
  color: #9eb5ca;
}
body.theme-dark .walkthrough-rack-target.selected {
  border-color: #d14a55;
  background: #3a1d23;
}
body.theme-dark .walkthrough-progress-page .walkthrough-rack-map {
  background: #101e2e;
}
body.theme-dark .walkthrough-rack-elevation {
  border-color: #657a8d;
  background: #122238;
}
body.theme-dark .walkthrough-rack-labels {
  border-color: #40566a;
  background: #1a3046;
}
body.theme-dark .walkthrough-rack-labels > span {
  border-color: #30475d;
  color: #abc0d2;
}
body.theme-dark .walkthrough-rack-canvas {
  background: #132338;
}
body.theme-dark .walkthrough-rack-canvas > i {
  border-color: #29415e;
}
body.theme-dark .walkthrough-rack-device {
  border-color: #3979a8;
  border-left-color: #31a9aa;
  background: #173c59;
  color: #e6f2fb;
}
body.theme-dark .walkthrough-rack-device:nth-of-type(3n) {
  border-left-color: #858ae0;
  background: #252b51;
}
body.theme-dark .walkthrough-rack-device > small {
  color: #a9c3d6;
}
body.theme-dark .walkthrough-rack-device.selected {
  border-color: #f0717a;
  background: #a91e2a;
  color: #fff;
}
.walkthrough-rack-device:focus-visible,
.walkthrough-rack-target:focus-visible {
  outline: 3px solid #f3ad2f;
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .walkthrough-rack-summary {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .walkthrough-rack-summary > div:first-child {
    flex: 1 1 100%;
  }
  .walkthrough-progress-page .walkthrough-rack-map {
    max-height: 58dvh;
    padding: 11px;
  }
  .walkthrough-rack-elevation {
    grid-template-columns: 48px minmax(0, 1fr);
    border-width: 5px;
  }
  .walkthrough-rack-labels,
  .walkthrough-rack-canvas {
    grid-template-rows: repeat(var(--rack-units), 34px);
  }
  .walkthrough-rack-labels > span {
    padding-right: 7px;
    font-size: 10px;
  }
  .walkthrough-rack-device {
    margin: 2px;
    padding: 5px 7px;
    border-left-width: 5px;
  }
  .walkthrough-rack-device > b {
    font-size: 11px;
  }
  .walkthrough-rack-device.compact > b {
    font-size: 10px;
  }
  .walkthrough-rack-legend {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
@media (max-width: 430px) {
  .walkthrough-progress-page .walkthrough-rack-map {
    max-height: 60dvh;
  }
  .walkthrough-rack-elevation {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .walkthrough-rack-labels,
  .walkthrough-rack-canvas {
    grid-template-rows: repeat(var(--rack-units), 36px);
  }
  .walkthrough-rack-device > b {
    font-size: 10.5px;
  }
  .walkthrough-rack-device > small {
    font-size: 7.5px;
  }
}

.mention-popup {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  list-style: none;
  padding: 4px;
  margin: 0;
  z-index: 9999;
  min-width: 250px;
  font-size: var(--fs-callout);
}
.mention-popup li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mention-popup li b {
  color: var(--blue);
  margin-right: 6px;
}
.mention-popup li.selected,
.mention-popup li:hover {
  background: #f0f4f8;
}

.asset-reference-link {
  background: #e7f3fa !important;
  color: #0f426b !important;
  border-color: #bbdefb !important;
}
.mention-preview-card {
  animation: fade-in 0.2s ease-out;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Managed Excel originals and rack temperature capture. */
.excel-template-settings .panel-head {
  align-items: flex-start;
}
.excel-template-upload {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #dce5ee;
  background: #f7f9fc;
}
.excel-template-upload label {
  display: grid;
  gap: 6px;
  color: #526a81;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.excel-template-list {
  display: grid;
}
.excel-template-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8ef;
}
.excel-template-row:last-child {
  border-bottom: 0;
}
.excel-template-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: #e5f4eb;
  color: #157347;
  font: 800 10px var(--mono);
}
.excel-template-row > div:nth-child(2) {
  display: grid;
  gap: 2px;
}
.excel-template-row strong {
  color: #163b60;
  font-size: var(--fs-callout);
}
.excel-template-row span {
  color: #667d93;
  font-size: var(--fs-micro);
}
.excel-template-row small {
  overflow: hidden;
  color: #8797a6;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-error {
  margin: 14px;
  padding: 10px 12px;
  background: #fff0f1;
  color: #9f1723;
  font-size: var(--fs-micro);
}
.walkthrough-temperature-setting {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cbd9e7;
  border-radius: 8px;
  background: #f7fafc;
}
.walkthrough-temperature-setting > label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.walkthrough-temperature-setting > label input {
  margin-top: 3px;
  accent-color: #1d65aa;
}
.walkthrough-temperature-setting > label span,
.walkthrough-temperature-setting > [data-temperature-template] {
  display: grid;
  gap: 3px;
}
.walkthrough-temperature-setting b {
  color: #173f64;
  font-size: var(--fs-caption);
}
.walkthrough-temperature-setting small {
  color: #71869a;
  font-size: var(--fs-micro);
}
.walkthrough-temperature-setting > [data-temperature-template] {
  padding: 10px;
  border-top: 1px solid #dce5ee;
}
.walkthrough-temperature-setting > [data-temperature-template][hidden] {
  display: none;
}
.walkthrough-temperature-setting label {
  color: #526a81;
  font-size: var(--fs-micro);
  font-weight: 700;
}

/* Field work registry, report, and cross-module relationships. */
.field-work-page {
  --field-blue: #1f5c9c;
  --field-line: #d5e0ea;
}
.field-work-tabs {
  margin-bottom: 12px;
}
.field-work-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.field-work-kpis article {
  min-height: 90px;
  padding: 13px 15px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: #fff;
}
.field-work-kpis span,
.field-work-kpis small {
  display: block;
  color: #6e8397;
  font-size: var(--fs-micro);
}
.field-work-kpis strong {
  display: block;
  margin: 5px 0 2px;
  color: #123f6d;
  font: 800 var(--fs-title1) var(--mono);
}
.field-work-table td {
  vertical-align: middle;
}
.field-work-table .dispatch-title-link span {
  display: block;
  margin-top: 3px;
  color: #76899b;
  font: 600 var(--fs-micro) var(--mono);
}
.field-emergency {
  display: inline-flex;
  margin-right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #ffeaec;
  color: #b91f2c;
  font-size: var(--fs-micro);
  font-weight: 800;
  vertical-align: middle;
}
.field-link-count {
  display: inline-block;
  margin: 2px 3px 2px 0;
  padding: 3px 6px;
  border-radius: 999px;
  background: #edf3f8;
  color: #46647e;
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.field-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.field-stat-bars > div {
  display: grid;
  grid-template-columns: 120px minmax(100px, 1fr) 42px;
  align-items: center;
  gap: 10px;
}
.field-link-section {
  display: grid;
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid #dce5ed;
}
.field-link-section h3 {
  margin: 0;
  color: #163e64;
  font-size: var(--fs-body);
}
.field-link-section > p {
  margin: -5px 0 2px;
  color: #75899d;
  font-size: var(--fs-micro);
}
.field-link-picker {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid #d4e0ea;
  border-radius: 7px;
}
.field-link-picker legend {
  padding: 0 5px;
  color: #214b70;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.field-link-picker > [data-field-link-options] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  max-height: 130px;
  overflow: auto;
}
.field-link-picker [data-search-text] {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px;
  border: 1px solid #e1e8ef;
  border-radius: 5px;
  color: #3c5870;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.field-link-picker [data-search-text]:has(input:checked) {
  border-color: #6a9ecc;
  background: #edf6fd;
  color: #184d7b;
  font-weight: 700;
}
.field-auto-task {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
.field-linked-group {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.field-linked-group label {
  color: #71869a;
  font-size: var(--fs-micro);
  font-weight: 800;
  text-transform: uppercase;
}
.field-linked-group button,
.field-linked-group span {
  padding: 8px;
  border: 1px solid #d7e2eb;
  border-radius: 6px;
  background: #f6f9fc;
  color: #1b568a;
  font-size: var(--fs-micro);
  text-align: left;
}
.field-linked-group button {
  cursor: pointer;
}
.field-work-timeline {
  display: grid;
  gap: 0;
}
.field-work-timeline > div {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid #e2e9ef;
}
.field-work-timeline i {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: #2b78bd;
}
.field-work-timeline span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-work-timeline time {
  color: #74899d;
  font: 600 var(--fs-micro) var(--mono);
}
.cross-linked-field-work {
  margin: 16px 40px;
}
.cross-linked-field-work .panel-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.cross-linked-field-work button {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid #d7e2eb;
  border-radius: 6px;
  background: #f7f9fc;
  color: #174f80;
  text-align: left;
  cursor: pointer;
}
.cross-linked-field-work button span {
  color: #667d92;
  font-size: var(--fs-micro);
}

body.theme-dark .excel-template-upload,
body.theme-dark .walkthrough-temperature-setting,
body.theme-dark .field-work-kpis article {
  border-color: #29415e;
  background: #14243a;
}
body.theme-dark .excel-template-row {
  border-color: #29415e;
}
body.theme-dark .excel-template-row strong,
body.theme-dark .walkthrough-temperature-setting b,
body.theme-dark .field-work-kpis strong {
  color: #e1edf8;
}
body.theme-dark .field-link-picker {
  border-color: #314b68;
}
body.theme-dark .field-link-picker [data-search-text],
body.theme-dark .field-linked-group button,
body.theme-dark .field-linked-group span {
  border-color: #314b68;
  background: #182b41;
  color: #c9dae8;
}
@media (max-width: 760px) {
  .excel-template-upload {
    grid-template-columns: 1fr;
  }
  .excel-template-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }
  .excel-template-row > .button {
    grid-column: 2;
    justify-self: start;
  }
  .field-work-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .field-report-grid {
    grid-template-columns: 1fr;
  }
  .field-link-picker > [data-field-link-options] {
    grid-template-columns: 1fr;
  }
  .cross-linked-field-work {
    margin: 12px;
  }
  .cross-linked-field-work .panel-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .field-work-kpis article {
    min-height: 78px;
    padding: 10px 12px;
  }
  .field-work-kpis strong {
    font-size: var(--fs-title1);
  }
  .field-stat-bars > div {
    grid-template-columns: 90px minmax(70px, 1fr) 36px;
  }
}

/* Responsive application navigation and compact field-work signals. */
.mobile-navigation {
  display: none;
}
.nav-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.field-emergency-icon {
  display: inline-block;
  margin-left: 6px;
  font-size: 1em;
  line-height: 1;
  vertical-align: -0.08em;
  white-space: nowrap;
}
.walkthrough-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.walkthrough-export-button {
  white-space: nowrap;
}
@keyframes route-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .shell {
    display: block !important;
    min-height: 100dvh;
  }
  .sidebar {
    display: none !important;
  }
  .main {
    width: 100%;
    padding-bottom: 72px;
  }
  .page {
    padding: 15px 12px 28px;
  }
  .topbar {
    height: 56px;
    padding: 0 12px;
  }
  .top-actions {
    gap: 7px;
  }
  .top-actions .button.secondary.sm:not(.logout-button),
  .logout-button {
    display: none;
  }
  .top-actions .avatar {
    width: 30px;
    height: 30px;
  }
  .mobile-navigation {
    display: block;
  }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 50;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 66px;
    padding: 5px max(5px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom))
      max(5px, env(safe-area-inset-left));
    border-top: 1px solid #cbd8e5;
    background: #fff;
  }
  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1px;
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64788d;
    font: inherit;
    cursor: pointer;
  }
  .mobile-bottom-nav button > span,
  .mobile-bottom-nav button > .nav-icon {
    width: 22px;
    height: 22px;
    font-size: 18px;
    line-height: 22px;
  }
  .mobile-bottom-nav button > b {
    overflow: hidden;
    max-width: 100%;
    font-size: var(--fs-micro);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bottom-nav button.active {
    background: #eaf2fb;
    color: #174f88;
  }
  .mobile-nav-backdrop {
    position: fixed;
    z-index: 47;
    inset: 0 0 66px;
    width: 100%;
    border: 0;
    background: rgba(9, 27, 45, 0.38);
  }
  .mobile-nav-sheet {
    position: fixed;
    z-index: 49;
    right: 8px;
    bottom: 72px;
    left: 8px;
    display: grid;
    gap: 5px;
    max-height: min(68dvh, 520px);
    padding: 10px;
    border: 1px solid #cbd8e5;
    border-radius: 14px;
    background: #fff;
    overflow: auto;
  }
  .mobile-nav-sheet header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 5px 8px;
    border-bottom: 1px solid #e2e9f0;
  }
  .mobile-nav-sheet header > b {
    font-size: var(--fs-body);
  }
  .mobile-nav-sheet header button {
    border: 0;
    background: transparent;
    color: #62778b;
    font-size: var(--fs-title1);
    cursor: pointer;
  }
  .mobile-nav-sheet > button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px;
    border: 1px solid #e0e7ee;
    border-radius: 9px;
    background: #fff;
    color: #173b5f;
    text-align: left;
    cursor: pointer;
  }
  .mobile-nav-sheet > button > span {
    grid-row: 1/3;
    font-size: var(--fs-title3);
    text-align: center;
  }
  .mobile-nav-sheet > button > b {
    font-size: var(--fs-caption);
  }
  .mobile-nav-sheet > button > small {
    color: #74889a;
    font-size: var(--fs-micro);
  }
  .mobile-more-sheet > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-top: 5px;
  }
  .mobile-more-sheet > div > button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 10px;
    border: 1px solid #dce5ed;
    border-radius: 8px;
    background: #f8fafc;
    color: #173b5f;
    text-align: left;
    cursor: pointer;
  }
  .mobile-more-sheet > div > button > span,
  .mobile-more-sheet > div > button > .nav-icon {
    width: 20px;
    height: 20px;
    font-size: 17px;
  }
  .mobile-more-sheet > div > button > b {
    font-size: var(--fs-micro);
  }
  .walkthrough-detail-page .page-head {
    align-items: stretch;
    flex-direction: column !important;
    gap: 10px;
  }
  .walkthrough-detail-actions {
    justify-content: flex-end;
  }
  .walkthrough-detail-actions .button {
    flex: 1;
  }
  .walkthrough-progress-page {
    padding-bottom: 158px;
  }
  .walkthrough-progress-page .walkthrough-result-actions {
    bottom: 74px !important;
  }
  #toast-root {
    right: 10px;
    bottom: 78px;
    left: 10px;
  }
  .toast {
    text-align: center;
  }
  .field-work-table {
    min-width: 900px;
  }
}
body.theme-dark .mobile-bottom-nav,
body.theme-dark .mobile-nav-sheet {
  border-color: #2f4863;
  background: #122238;
}
body.theme-dark .mobile-nav-sheet > button,
body.theme-dark .mobile-more-sheet > div > button {
  border-color: #2f4863;
  background: #182c43;
  color: #dbe8f4;
}
body.theme-dark .mobile-bottom-nav button.active {
  background: #1e4165;
  color: #fff;
}

/* IPAM keeps RackTables' CIDR hierarchy but uses the inventory table language. */
.ipam-table {
  min-width: 820px;
}
.ipam-table th:nth-child(1) {
  width: 28%;
}
.ipam-table th:nth-child(2) {
  width: 34%;
}
.ipam-table th:nth-child(n + 4) {
  width: 8%;
  text-align: right;
}
.ipam-network-row {
  cursor: pointer;
  background: #fff;
}
.ipam-network-row:hover {
  background: #f4f8fc;
}
.ipam-network-row.depth-0 {
  background: #edf5fd;
  box-shadow: inset 4px 0 #27649d;
}
.ipam-network-row.depth-1 {
  background: #f6f9fc;
}
.ipam-network-row td {
  border-bottom-color: #dbe5ee;
}
.ipam-indent {
  display: inline-block;
  width: calc(22px + var(--ipam-depth, 0) * 22px);
  color: #27649d;
  font-weight: 900;
  text-align: right;
  padding-right: 9px;
}
.ipam-address-row {
  background: #fbfcfe;
  color: #3e556d;
}
.ipam-address-row code {
  color: #0b477d;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: var(--fs-caption);
  font-weight: 700;
}
/* 검색 결과는 트리가 아니라 목록이라 계단을 두지 않는다. */
.ipam-flat-row td:first-child {
  padding-left: 14px;
}
.ipam-flat-row td:first-child .subtext {
  display: block;
}
.ipam-address-row .asset-link {
  font-size: var(--fs-caption);
}
body.theme-dark .ipam-address-row .asset-link {
  color: #9bcdf7;
}
.ipam-table .number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ip-family {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8f1fb;
  color: #18558e;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.ip-family.ipv6 {
  background: #eee9fb;
  color: #633da0;
}
.status-reserved {
  background: #fff4db;
  color: #916000;
}
body.theme-dark .ipam-network-row {
  background: #172a3d;
}
body.theme-dark .ipam-network-row:hover {
  background: #1c344c;
}
body.theme-dark .ipam-network-row.depth-0 {
  background: #173653;
}
body.theme-dark .ipam-network-row.depth-1 {
  background: #182f46;
}
body.theme-dark .ipam-address-row {
  background: #122438;
  color: #afc1d2;
}
body.theme-dark .ipam-address-row code {
  color: #9bcdf7;
}
body.theme-dark .ip-family {
  background: #214c70;
  color: #c8e7ff;
}
body.theme-dark .ip-family.ipv6 {
  background: #453765;
  color: #e1d5ff;
}

.settings-team-picker {
  display: inline-flex;
  gap: 6px;
  margin-right: 4px;
}

/* Teams 채널 알림 설정 ----------------------------------------------- */
.notify-channel {
  border: 1px solid #dbe5ee;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
}
.notify-channel.is-off {
  opacity: 0.6;
}
.notify-channel header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.notify-channel-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e8f1fb;
  color: #18558e;
  font-weight: 800;
}
.notify-channel-title {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.notify-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
}
.notify-channel-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.notify-channel-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--fs-caption);
  font-weight: 700;
}
.notify-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  border-top: 1px solid #eef3f8;
  padding-top: 12px;
}
.notify-event {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-caption);
}
.notify-event span {
  display: flex;
  flex-direction: column;
}
.notify-event small {
  color: #6b7c8d;
}
body.theme-dark .notify-channel {
  background: #142433;
  border-color: #24425e;
}
body.theme-dark .notify-channel-index {
  background: #214c70;
  color: #c8e7ff;
}
body.theme-dark .notify-events {
  border-top-color: #24425e;
}
body.theme-dark .notify-event small {
  color: #9fb3c6;
}

/* Global search ------------------------------------------------------- */
.global-search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(330px, 28vw);
  /* 검색은 상단 바 맨 왼쪽에 둔다. margin-left:auto 로 오른쪽 끝에 밀어 두면 단추 무리와
     한 덩어리로 보여, 어디를 눌러야 검색인지 한 번에 짚히지 않는다. */
  margin-left: 0;
  padding: 7px 9px;
  border: 1px solid #cbd9e7;
  border-radius: 8px;
  background: #f8fafc;
  color: #62768b;
  cursor: pointer;
  text-align: left;
}
.global-search-trigger > span {
  color: #174f83;
  font-size: var(--fs-title1);
  line-height: 1;
}
.global-search-trigger > b {
  overflow: hidden;
  flex: 1;
  font-size: var(--fs-caption);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-trigger kbd,
.global-search-dialog kbd {
  padding: 2px 6px;
  border: 1px solid #d2dde7;
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #fff;
  color: #65788b;
  font: 10px var(--mono);
}
.global-search-backdrop {
  position: fixed;
  z-index: 2400;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: min(14vh, 120px) 18px 30px;
  background: rgba(8, 25, 42, 0.5);
  backdrop-filter: blur(2px);
}
.global-search-dialog {
  width: min(720px, 100%);
  overflow: hidden;
  border: 1px solid #cbd9e7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(3, 18, 33, 0.28);
}
.global-search-dialog > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid #dce6ef;
}
.global-search-dialog > header > span {
  color: #18578f;
  font-size: var(--fs-display);
}
.global-search-dialog input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #102f4c;
  font: 600 var(--fs-title3) var(--sans);
}
.global-search-body {
  max-height: min(62vh, 590px);
  overflow-y: auto;
  padding: 8px;
}
.global-search-state {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #75889a;
  font-size: var(--fs-callout);
}
.global-search-state.error {
  color: #b42332;
}
.global-search-group h3,
.global-search-recent h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 8px 5px;
  color: #687d92;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}
.global-search-group h3 span {
  color: #9aabba;
  font-family: var(--mono);
}
.global-search-result {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #153957;
  cursor: pointer;
  text-align: left;
}
.global-search-result:hover,
.global-search-result.active {
  background: #eaf3fc;
}
.global-search-result > span:nth-child(2) {
  min-width: 0;
}
.global-search-result b,
.global-search-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-result b {
  font-size: var(--fs-callout);
}
.global-search-result small {
  margin-top: 3px;
  color: #70859a;
  font-size: var(--fs-micro);
}
.global-search-result em {
  color: #7b91a5;
  font-size: var(--fs-title1);
  font-style: normal;
}
.global-search-type {
  color: #27649d;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.global-search-recent button {
  margin: 3px 5px;
  padding: 7px 10px;
  border: 1px solid #d8e3ed;
  border-radius: 999px;
  background: #f8fafc;
  color: #36536c;
  cursor: pointer;
}
.global-search-dialog > footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid #e0e8f0;
  color: #8496a7;
  font-size: var(--fs-micro);
}
body.theme-dark .global-search-trigger,
body.theme-dark .global-search-dialog {
  border-color: #304a63;
  background: #13263a;
  color: #a9bdcf;
}
body.theme-dark .global-search-trigger kbd,
body.theme-dark .global-search-dialog kbd {
  border-color: #405970;
  background: #1a3046;
  color: #b9cbdc;
}
body.theme-dark .global-search-dialog > header,
body.theme-dark .global-search-dialog > footer {
  border-color: #2b4258;
}
body.theme-dark .global-search-dialog input,
body.theme-dark .global-search-result {
  color: #dce9f5;
}
body.theme-dark .global-search-result:hover,
body.theme-dark .global-search-result.active {
  background: #1c3c58;
}
body.theme-dark .global-search-result small {
  color: #91a9bd;
}
body.theme-dark .global-search-recent button {
  border-color: #304a63;
  background: #182d42;
  color: #c4d4e2;
}

@media (max-width: 1180px) {
  .global-search-trigger {
    width: 42px;
    justify-content: center;
  }
  .global-search-trigger > b,
  .global-search-trigger kbd {
    display: none;
  }
}
@media (max-width: 700px) {
  .global-search-backdrop {
    padding: 8px;
  }
  .global-search-dialog {
    border-radius: 10px;
  }
  .global-search-body {
    max-height: calc(100vh - 145px);
  }
  .global-search-result {
    grid-template-columns: 56px minmax(0, 1fr) 14px;
    padding: 11px 8px;
  }
}

/* Field Work Cross Filter Styling */
.field-stat-bars > div {
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: 6px;
  transition: all 0.1s ease;
  user-select: none;
}
.field-stat-bars > div[data-field-filter-key] {
  cursor: pointer;
}
.field-stat-bars > div[data-field-filter-key]:hover {
  background: #f8fafc;
}
.field-stat-bars > div.active-filter {
  background: #eff6ff;
}
.field-stat-bars > div.active-filter span {
  font-weight: 800;
  color: #1e3a8a;
}
.field-stat-bars > div.active-filter strong {
  color: #1e3a8a;
}

body.theme-dark .field-stat-bars > div[data-field-filter-key]:hover {
  background: #1e293b;
}
body.theme-dark .field-stat-bars > div.active-filter {
  background: rgba(59, 130, 246, 0.15);
}
body.theme-dark .field-stat-bars > div.active-filter span,
body.theme-dark .field-stat-bars > div.active-filter strong {
  color: #93c5fd;
}

/* Layout fix for top right actions */
.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-actions .field-work-tabs {
  margin-bottom: 0;
  display: flex;
}
.page-actions .field-work-tabs button {
  padding: 8px 14px;
  border: 1px solid var(--field-line);
  background: #fff;
  color: #385873;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
}
.page-actions .field-work-tabs button:first-child {
  border-radius: 7px 0 0 7px;
  border-right: 0;
}
.page-actions .field-work-tabs button:last-child {
  border-radius: 0 7px 7px 0;
}
.page-actions .field-work-tabs button.active {
  background: var(--field-blue);
  border-color: var(--field-blue);
  color: #fff;
}
.page-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Field work cost-analysis report. */
.field-work-page {
  --field-blue: #1d5b96;
  --field-navy: #12395f;
  --field-line: #d7e2ec;
  --field-muted: #6b8195;
}
.field-work-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-work-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.field-work-tabs {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 3px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: #f3f7fa;
}
.field-work-tabs button {
  min-width: 92px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #647a8e;
  font-size: var(--fs-micro);
  font-weight: 750;
  cursor: pointer;
}
.field-work-tabs button.active {
  background: #fff;
  color: var(--field-navy);
}
.field-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px 9px;
  color: var(--field-muted);
  font-size: var(--fs-micro);
}
.field-filter-chips > span {
  font-weight: 750;
}
.field-filter-chips button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid #c8d9e8;
  border-radius: 999px;
  background: #edf5fb;
  color: #24557f;
  font-size: var(--fs-micro);
  font-weight: 700;
  cursor: pointer;
}
.field-filter-chips button b {
  font-size: var(--fs-caption);
  line-height: 8px;
}
.field-filter-chips .field-filter-clear {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: #a12832;
}
.field-cost-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-bottom: 12px;
}
.field-cost-overview > article {
  min-height: 164px;
  padding: 18px 20px;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: #fff;
}
.field-operations-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.field-summary-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.field-summary-heading > div > span,
.field-resource-summary header span,
.field-resource-metrics span {
  display: block;
  color: var(--field-muted);
  font-size: var(--fs-micro);
  font-weight: 700;
}
.field-summary-heading strong {
  display: block;
  margin-top: 5px;
  color: var(--field-navy);
  font: 800 var(--fs-display) var(--mono);
}
.field-summary-heading strong small {
  margin-left: 3px;
  font: 700 var(--fs-micro) var(--sans);
}
.field-completion-rate {
  padding: 6px 9px;
  border-radius: 6px;
  background: #edf4fa;
  color: #526e87 !important;
}
.field-completion-rate b {
  margin-left: 4px;
  color: var(--field-navy);
  font-size: var(--fs-caption);
}
.field-status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 13px;
  border-top: 1px solid #e5ebf1;
  border-bottom: 1px solid #e5ebf1;
}
.field-status-strip span {
  padding: 9px 8px;
  color: #647a8e;
  font-size: var(--fs-micro);
  text-align: center;
}
.field-status-strip span + span {
  border-left: 1px solid #e5ebf1;
}
.field-status-strip b {
  margin-right: 3px;
  color: #1c4f7c;
  font: 800 var(--fs-body) var(--mono);
}
.field-status-strip .urgent b {
  color: #bd2430;
}
.field-progress {
  height: 5px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eef4;
}
.field-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #24805b;
}
.field-resource-summary header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.field-resource-summary h2 {
  margin: 3px 0 0;
  color: var(--field-navy);
  font-size: var(--fs-body);
}
.field-data-readiness {
  padding: 5px 8px;
  border: 1px solid #a7dcc1;
  border-radius: 999px;
  background: #effaf4;
  color: #16734e !important;
}
.field-data-readiness.warning {
  border-color: #efcf9f;
  background: #fff8e9;
  color: #9a5a11 !important;
}
/* 사람 축(투입시간·인원)이 윗줄, 시간 축(현장작업 시간·평균)이 아랫줄. 넷을 한 줄에
   세우면 서로 곱하고 나눈 값들이 나란히 놓여 어느 것이 어디서 나왔는지 읽히지 않는다. */
.field-resource-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 17px;
}
.field-resource-metrics > div {
  min-width: 0;
  padding: 0 12px;
}
.field-resource-metrics > div:nth-child(odd) {
  padding-left: 0;
}
.field-resource-metrics > div:nth-child(even) {
  border-left: 1px solid #e1e8ef;
}
.field-resource-metrics > div:nth-child(n + 3) {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #e1e8ef;
}
.field-resource-metrics small {
  display: block;
  margin-top: 4px;
  color: #8496a8;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.field-resource-metrics strong {
  display: block;
  margin-top: 6px;
  color: var(--field-navy);
  font: 800 var(--fs-title1) var(--mono);
  white-space: nowrap;
}
.field-resource-summary > p {
  margin: 15px 0 0;
  padding-top: 10px;
  border-top: 1px solid #e5ebf1;
  color: #71869a;
  font-size: var(--fs-micro);
}
.field-report-grid {
  gap: 12px;
  margin-bottom: 12px;
}
.field-report-grid-primary {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
}
.field-report-grid-secondary {
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
}
.field-report-grid .panel,
.field-cost-table-panel,
.field-report-detail {
  margin-bottom: 0;
}
.field-report-grid .panel-head,
.field-cost-table-panel .panel-head,
.field-report-detail .panel-head {
  min-height: 56px;
  padding: 12px 15px;
}
.field-report-grid .panel-head h2,
.field-cost-table-panel .panel-head h2,
.field-report-detail .panel-head h2 {
  font-size: var(--fs-callout);
}
.field-report-grid .panel-body {
  padding: 14px 16px;
}
.field-stat-bars {
  display: grid;
  gap: 6px;
}
.field-stat-bars > button {
  display: grid;
  grid-template-columns: 112px minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.field-stat-bars > button:hover {
  background: #f3f7fa;
}
.field-stat-bars > button.active-filter {
  background: #eaf3fb;
}
.field-stat-bars span {
  overflow: hidden;
  color: #35536d;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-stat-bars i {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6edf3;
}
.field-stat-bars i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #3b82bd;
}
.field-stat-bars strong {
  color: #1c4c78;
  font: 800 var(--fs-micro) var(--mono);
  text-align: right;
}
.field-trend {
  display: grid;
  grid-template-columns: repeat(var(--trend-columns), minmax(26px, 1fr));
  align-items: end;
  gap: 7px;
  height: 155px;
  padding: 12px 2px 0;
}
.field-trend > div {
  display: grid;
  grid-template-rows: 18px 1fr 18px;
  align-items: end;
  justify-items: center;
  height: 100%;
  min-width: 0;
}
.field-trend > div > i {
  display: flex;
  align-items: flex-end;
  width: min(26px, 72%);
  height: 100%;
  overflow: hidden;
  border-radius: 5px 5px 2px 2px;
  background: #edf2f6;
}
.field-trend > div > i b {
  display: block;
  width: 100%;
  min-height: 5px;
  border-radius: 4px 4px 2px 2px;
  background: #3279b7;
}
.field-trend > div > span {
  overflow: hidden;
  max-width: 100%;
  color: #75899b;
  font: 650 var(--fs-micro) var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field-trend .field-trend-value {
  color: #244d72;
  font-size: var(--fs-micro);
  font-weight: 800;
}
.field-cost-table-panel {
  margin-bottom: 12px;
}
.field-cost-table th:not(:first-child),
.field-cost-table td:not(:first-child),
.field-staff-cost-table th:not(:first-child),
.field-staff-cost-table td:not(:first-child) {
  width: 104px;
  text-align: right;
}
.field-cost-table td,
.field-staff-cost-table td {
  padding-top: 9px;
  padding-bottom: 9px;
}
.field-cost-table tbody tr[data-field-filter-key],
.field-staff-cost-table tbody tr[data-field-filter-key] {
  cursor: pointer;
}
.field-cost-table tbody tr[data-field-filter-key]:hover,
.field-staff-cost-table tbody tr[data-field-filter-key]:hover {
  background: #edf5fb;
}
.field-cost-table td strong {
  color: #154f80;
}
.field-report-detail {
  margin-top: 12px;
}
.field-report-detail .data-table {
  min-width: 760px;
}
.field-live-time {
  color: #aa6818;
  font-weight: 750;
}
body.theme-dark .field-cost-overview > article,
body.theme-dark .field-work-tabs {
  border-color: #29435e;
  background: #14243a;
}
body.theme-dark .field-work-tabs {
  background: #101e31;
}
body.theme-dark .field-work-tabs button.active {
  background: #25496d;
  color: #fff;
}
body.theme-dark .field-summary-heading strong,
body.theme-dark .field-resource-summary h2,
body.theme-dark .field-resource-metrics strong {
  color: #e2edf7;
}
body.theme-dark .field-status-strip,
body.theme-dark .field-resource-summary > p {
  border-color: #2a435e;
}
body.theme-dark .field-status-strip span + span {
  border-color: #2a435e;
}
body.theme-dark .field-completion-rate {
  background: #1e3550;
  color: #a9bfd2 !important;
}
body.theme-dark .field-stat-bars > button:hover,
body.theme-dark .field-cost-table tbody tr[data-field-filter-key]:hover,
body.theme-dark .field-staff-cost-table tbody tr[data-field-filter-key]:hover {
  background: #1b3047;
}
body.theme-dark .field-stat-bars > button.active-filter {
  background: #203f5f;
}
body.theme-dark .field-trend > div > i,
body.theme-dark .field-stat-bars i {
  background: #263c53;
}
body.theme-dark .field-filter-chips button {
  border-color: #31506d;
  background: #1b3651;
  color: #bcd7ee;
}
@media (max-width: 900px) {
  .field-cost-overview {
    grid-template-columns: 1fr;
  }
  .field-cost-overview > article {
    min-height: 0;
  }
  .field-report-grid-primary,
  .field-report-grid-secondary {
    grid-template-columns: 1fr;
  }
  .field-work-actions .button {
    padding-right: 10px;
    padding-left: 10px;
  }
  .field-work-page .page-head {
    align-items: flex-start;
  }
  .field-resource-metrics {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 14px;
  }
  .field-resource-metrics > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .field-report-detail {
    margin-bottom: 12px;
  }
}
@media (max-width: 600px) {
  .field-work-page .page-head {
    gap: 10px;
  }
  .field-work-actions {
    width: 100%;
  }
  .field-work-actions .button {
    flex: 1;
    justify-content: center;
    font-size: var(--fs-micro);
  }
  .field-work-tabs {
    display: flex;
    width: 100%;
  }
  .field-work-tabs button {
    flex: 1;
  }
  .field-filter-chips {
    overflow-x: auto;
  }
  .field-filter-chips > span {
    display: none;
  }
  .field-filter-chips .field-filter-clear {
    margin-left: 0;
    white-space: nowrap;
  }
  .field-cost-overview > article {
    padding: 15px;
  }
  .field-summary-heading strong {
    font-size: var(--fs-display);
  }
  .field-resource-metrics strong {
    font-size: var(--fs-title3);
  }
  .field-status-strip span {
    padding-right: 3px;
    padding-left: 3px;
  }
  .field-trend {
    gap: 4px;
  }
  .field-trend > div > i {
    width: min(20px, 78%);
  }
  .field-stat-bars > button {
    grid-template-columns: 92px minmax(60px, 1fr) 38px;
    padding-right: 3px;
    padding-left: 3px;
  }
  .field-cost-table,
  .field-staff-cost-table {
    min-width: 560px;
  }
}

/* --- Ultra-compact 1-row Temperature Group --- */
.walkthrough-temp-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #bdcddd;
  border-radius: 7px;
  padding: 0 10px;
  height: 42px; /* Matches RACK ISSUE button height */
  margin: 0;
}
.walkthrough-temp-group .temp-field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 4px;
}
.walkthrough-temp-group label {
  font-size: var(--fs-micro);
  font-weight: 800;
  color: #5c748c;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}
.walkthrough-temp-group .temp-input-wrapper {
  display: flex;
  align-items: center;
}
.walkthrough-temp-group input {
  width: 38px;
  height: 24px;
  padding: 0 2px;
  margin: 0;
  font-size: var(--fs-callout);
  font-weight: 700;
  color: #173f64;
  background: transparent;
  border: none;
  border-bottom: 2px solid #d7e2eb;
  border-radius: 0;
  text-align: center;
  font-family: var(--mono, monospace);
  outline: none;
  transition: all 0.2s ease;
}
.walkthrough-temp-group input:focus {
  border-color: #1f5c9c;
  background: #f4f7f9;
}
.walkthrough-temp-group .temp-input-wrapper span {
  margin-left: 3px;
  font-size: var(--fs-micro);
  font-weight: 800;
  color: #71869a;
}
.walkthrough-temp-group .temp-divider {
  width: 1px;
  height: 16px;
  background: #d7e2eb;
  margin: 0 4px;
}

body.theme-dark .walkthrough-temp-group {
  background: #182d45;
  border-color: #29415e;
}
body.theme-dark .walkthrough-temp-group label {
  color: #8c9eae;
}
body.theme-dark .walkthrough-temp-group input {
  color: #dcecf8;
  border-color: #36506a;
}
body.theme-dark .walkthrough-temp-group input:focus {
  border-color: #4c93ce;
  background: #132338;
}

.modal-delete-btn {
  align-items: center;
  gap: 5px;
  height: 36px;
}

.modal-delete-btn {
  display: inline-block !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  padding: 7px 16px !important;
  font-size: var(--fs-callout) !important;
  font-weight: 500 !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: all 0.15s ease !important;
}
.modal-delete-btn:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
}
body.theme-dark .modal-delete-btn {
  color: #f87171 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}
.device-results-dropdown {
  background: #ffffff;
}
.work-picker,
.work-picker-search {
  position: relative;
  min-width: 0;
}
.work-picker .chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.work-picker .pick-chip {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.work-picker .pick-chip button {
  flex-shrink: 0;
}
.work-picker .pick-chip > b {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.work-picker-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.work-picker-results[hidden],
.work-picker-status[hidden] {
  display: none;
}
.work-picker-results.opens-up {
  top: auto;
  bottom: calc(100% + 4px);
}
.work-picker-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.work-picker-option:hover,
.work-picker-option.is-active {
  background: var(--accent-soft, #eef5ff);
}
.work-picker-option small,
.work-picker-status,
.work-picker-empty {
  color: var(--muted);
  font-size: var(--fs-caption);
}
.work-picker-empty {
  padding: 10px;
}
.work-picker-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
body.theme-dark .work-picker-results {
  background: #0f172a;
  border-color: #334155;
}
body.theme-dark .work-picker-option.is-active,
body.theme-dark .work-picker-option:hover {
  background: #1e3a5f;
}
body.theme-dark .device-results-dropdown {
  background: #0f172a;
  border-color: #334155;
}
.data-table.compact th {
  padding: 6px 8px;
  font-size: var(--fs-micro);
}
.data-table.compact td {
  padding: 6px 8px;
  font-size: var(--fs-micro);
}
.empty.sm {
  padding: 12px;
  font-size: var(--fs-caption);
}

/* UI recovery: shared date controls, inventory hierarchy, runbook summary and system settings. */
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='time'] {
  font-family: var(--sans) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 600;
  letter-spacing: -0.015em;
}
input[type='date']::-webkit-datetime-edit,
input[type='datetime-local']::-webkit-datetime-edit,
input[type='month']::-webkit-datetime-edit,
input[type='time']::-webkit-datetime-edit,
input[type='date']::-webkit-datetime-edit-fields-wrapper,
input[type='datetime-local']::-webkit-datetime-edit-fields-wrapper {
  font-family: var(--sans);
}
.date-range-toolbar {
  display: grid !important;
  grid-template-columns: auto minmax(310px, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 58px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}
.date-range-toolbar .report-period-buttons {
  gap: 6px;
}
.date-range-toolbar .report-period-buttons .button {
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: var(--fs-micro);
}
.date-range-toolbar .report-custom-dates {
  justify-self: start;
  gap: 8px;
}
.date-range-toolbar .report-custom-dates .input {
  width: 142px;
  height: 36px;
  padding: 5px 10px;
  border-color: #cbd8e6;
  border-radius: 7px;
  background: #fff;
  font-size: var(--fs-caption);
}
.date-range-toolbar .report-custom-dates > span {
  color: #718397;
  font-size: var(--fs-caption);
}
.date-range-toolbar .report-date-apply {
  height: 36px;
  padding-inline: 15px;
  border-radius: 7px;
}
.date-range-toolbar .report-period-summary {
  min-width: 190px;
}
.date-range-toolbar .report-period-summary strong {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 750;
  letter-spacing: -0.01em;
}
.date-range-toolbar .report-period-summary small {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 500;
}
.task-date-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface, #fff);
}
.task-date-toolbar .report-period-buttons {
  gap: 6px;
}
.task-date-toolbar .report-period-buttons .button {
  height: 34px;
  padding: 0 12px;
  font-size: var(--fs-micro);
}
.task-date-toolbar .button.active {
  background: #1f5b99;
  color: #fff;
  border-color: #1f5b99;
}
.task-date-toolbar .report-custom-dates .input {
  width: 142px;
  height: 36px;
  font-family: var(--sans);
  font-size: var(--fs-caption);
}
.task-date-toolbar .report-date-apply {
  height: 36px;
}

/* ═══ Inventory · 자산 테이블 ══════════════════════════════════════════
   이 화면 스타일은 한때 네 층으로 쌓여 서로를 !important 로 덮고 있었다. 여기
   한 블록으로 합쳤고, 문서 순서상 뒤에 있으면서 특정도가 같으므로 !important
   없이 이긴다. 값을 바꿀 때는 이 블록만 고치면 된다.
   ══════════════════════════════════════════════════════════════════ */

.inventory-page .inventory-table th {
  padding: 10px 14px;
  background: #f4f7fa;
  color: #52687e;
  font-size: var(--fs-micro);
  letter-spacing: 0.035em;
}
.inventory-page .inventory-table td {
  padding: 11px 14px;
  font-size: var(--fs-caption);
}
.inventory-page .inventory-table .subtext {
  font-size: var(--fs-micro);
}
.inventory-page .inventory-table tbody tr:nth-child(even) {
  background: #fafbfd;
}

.runbook-summary article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 0 12px;
  min-height: 104px;
  padding: 15px 17px;
}
.runbook-summary article > i {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #e8f3ed;
  color: #16734a;
  font-style: normal;
  font-size: var(--fs-title3);
  font-weight: 800;
}
.runbook-summary article > div {
  grid-column: 2;
  min-width: 0;
}
.runbook-summary article.draft > i {
  background: #fff3dd;
  color: #a8670c;
}
.runbook-summary article.default > i {
  background: #eaf1fb;
  color: #235f9c;
  font-size: var(--fs-body);
}
.runbook-summary span {
  font-size: var(--fs-micro);
  font-weight: 650;
}
.runbook-summary strong {
  margin: 2px 0;
  font-size: var(--fs-display);
}

.holiday-sync-settings {
  display: flex;
  align-items: center;
  gap: 8px;
}
.holiday-sync-settings .select {
  width: auto;
}

body.theme-dark .date-range-toolbar .report-custom-dates .input {
  border-color: #35506d;
  background: #14243a;
  color: #e3edf7;
}

@media (max-width: 900px) {
  .date-range-toolbar {
    grid-template-columns: 1fr !important;
  }
  .date-range-toolbar .report-period-summary {
    justify-items: start;
    min-width: 0;
  }
}
@media (max-width: 680px) {
  .date-range-toolbar .report-custom-dates {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    width: 100%;
  }
  .date-range-toolbar .report-custom-dates .input {
    width: 100%;
    min-width: 0;
  }
  .task-date-toolbar .report-custom-dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    width: 100%;
  }
  .task-date-toolbar .report-custom-dates .input {
    width: 100%;
    min-width: 0;
  }
  .runbook-summary {
    grid-template-columns: 1fr;
  }
}

/* 현장작업 연결 편집 모달. .field-link-picker / .field-link-section 은 이미 규칙이
   있으나 목록이 길어질 때의 스크롤과 편집기 간격이 없었다. */
.field-link-editor {
  display: grid;
  gap: 14px;
}
.field-link-picker {
  max-height: 230px;
  overflow: auto;
}
.field-link-picker .todo {
  margin: 0;
  padding: 5px 6px;
  border-radius: 6px;
}
.field-link-picker .todo:hover {
  background: #eef4fa;
}
.field-link-picker .todo span {
  font-size: var(--fs-caption);
}
.field-link-picker .todo b {
  font-family: var(--mono, monospace);
  font-size: var(--fs-micro);
}
body.theme-dark .field-link-picker .todo:hover {
  background: #1b3350;
}

/* 장비 / 서버 검색 결과 행. 드롭다운 상자 자체는 taskForm에 인라인 스타일로 있고,
   그 안의 행 스타일이 없어 선택 상태가 보이지 않았다. */
.device-result {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line, #eef2f6);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.device-result:last-child {
  border-bottom: 0;
}
.device-result:hover,
.device-result.is-on {
  background: #eaf2fb;
}
.device-result b {
  font-size: var(--fs-caption);
}
.device-result span {
  color: var(--muted, #6b7f92);
  font-size: var(--fs-micro);
}
.device-result small {
  color: var(--ink-light, #8496a6);
  font-size: var(--fs-micro);
}
/* 찾은 것이 없을 때 뜨는 한 줄. 고를 수 없으므로 손가락 커서도 강조도 주지 않는다. */
.device-result.is-empty {
  color: var(--muted, #6b7f92);
  font-size: var(--fs-micro);
  cursor: default;
}
.device-result.is-empty:hover {
  background: transparent;
}
body.theme-dark .device-result {
  border-bottom-color: #22344a;
}
body.theme-dark .device-result:hover,
body.theme-dark .device-result.is-on {
  background: #1b3350;
}

/* Settings > 사용자 권한. .settings-info-card was referenced by excel-templates.js
   but never had a rule, so it rendered as unstyled text. */
.settings-info-card {
  padding: 12px 14px;
  border: 1px solid var(--line, #d8e2ec);
  border-radius: 8px;
  background: #f5f9fd;
  color: #1c3f63;
}
.settings-info-card p {
  margin: 5px 0 0;
}
.access-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.access-user-list {
  display: grid;
  gap: 6px;
  max-height: 520px;
  overflow: auto;
}
.access-user {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line, #d8e2ec);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.access-user:hover {
  border-color: #9dc0e0;
}
.access-user.is-on {
  border-color: #2f6fb0;
  background: #eaf2fb;
}
.access-editor {
  display: grid;
  gap: 12px;
}
.access-editor-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e2e9f0);
}
.access-editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.access-editor-controls label {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
}
.access-category {
  margin: 0;
}
.access-table td {
  vertical-align: middle;
}
.access-table .access-key {
  font-family: var(--mono, monospace);
  font-size: var(--fs-micro);
  opacity: 0.72;
}
.access-default {
  white-space: nowrap;
  color: var(--muted, #6b7f92);
  font-size: var(--fs-micro);
}
.access-choices {
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.access-choice {
  padding: 4px 9px;
  border: 1px solid var(--line, #d3dee8);
  border-radius: 999px;
  background: #fff;
  color: #4a6076;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.access-choice:hover {
  border-color: #9dc0e0;
}
.access-choice.is-on {
  border-color: #2f6fb0;
  background: #2f6fb0;
  color: #fff;
  font-weight: 700;
}
.access-effective {
  white-space: nowrap;
}
body.theme-dark .settings-info-card {
  border-color: #2a3f56;
  background: #16263a;
  color: #cfe0f0;
}
body.theme-dark .access-user,
body.theme-dark .access-choice {
  border-color: #2a3f56;
  background: #132132;
  color: #cfe0f0;
}
body.theme-dark .access-user.is-on {
  background: #1b3350;
  border-color: #4c8ac9;
}
body.theme-dark .access-choice.is-on {
  background: #3f7fbe;
  border-color: #3f7fbe;
  color: #fff;
}
@media (max-width: 900px) {
  .access-layout {
    grid-template-columns: 1fr;
  }
  .access-user-list {
    max-height: none;
    grid-auto-flow: row;
  }
}

/* 휴가 잔여 현황 · 발생 일수 관리 */
.input.sm {
  padding: 5px 7px;
  font-size: var(--fs-caption);
}
.over {
  color: var(--critical);
}
/* 계정 관리 화면. 내 계정 · 내 휴가 · 관리자 요청 셋을 나란히 둔다. */
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}
.account-requests {
  grid-column: 1 / -1;
}
.account-identity {
  display: flex;
  gap: 11px;
  align-items: center;
  padding-bottom: 13px;
  margin-bottom: 13px;
  border-bottom: 1px solid #edf0f4;
}
.account-identity b {
  display: block;
  font-size: var(--fs-body);
}
.account-balance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 13px;
}
.account-balance > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 12px;
}
.account-balance span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.account-balance strong {
  font: 700 var(--fs-title1) var(--mono);
  color: #163b63;
}
.account-balance em {
  font-style: normal;
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-left: 4px;
}
.account-balance .over {
  color: var(--critical);
}
.account-page textarea.input {
  width: 100%;
  min-height: 74px;
  resize: vertical;
}
.account-request-list {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  max-height: 420px;
  overflow: auto;
}
.account-request {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.account-request.is-open {
  background: #fbfdff;
  border-color: #cbdcf0;
}
.account-request > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-caption);
}
.account-request time {
  margin-left: auto;
  font: var(--fs-micro) var(--mono);
  color: var(--muted);
}
.account-request p {
  margin: 7px 0 0;
  font-size: var(--fs-caption);
  color: #405468;
  white-space: pre-wrap;
}
.account-reply {
  border-left: 2px solid #cbdcf0;
  padding-left: 9px;
  color: #2166bd !important;
}
.account-request-actions {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.account-request-actions .input {
  flex: 1;
}
body.theme-dark .account-request {
  border-color: #29415e;
}
body.theme-dark .account-request.is-open {
  background: #16233a;
}
@media (max-width: 900px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
  .account-balance {
    grid-template-columns: 1fr;
  }
}

.leave-balance-list {
  display: grid;
  gap: 2px;
}
.leave-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eef1f5;
  font-size: var(--fs-caption);
}
.leave-balance-row:last-child {
  border: 0;
}
.leave-balance-row > div:first-child span {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.leave-balance-figures {
  display: flex;
  gap: 12px;
  white-space: nowrap;
}
.leave-balance-figures span {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.leave-balance-figures b {
  font: 700 var(--fs-body) var(--mono);
  color: var(--ink);
  margin: 0 2px;
}
.leave-balance-figures em {
  font-style: normal;
  font-size: var(--fs-micro);
}
.leave-grant-table td {
  vertical-align: middle;
}
.leave-grant-table input.input.sm {
  width: 100%;
  min-width: 78px;
}
.leave-grant-table td:nth-child(n + 7) {
  text-align: right;
  font-family: var(--mono);
}
/* 비상대기 지정 판. 줄 왼쪽 「주」 한 칸 + 이레 일곱 칸. */
.standby-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}
.standby-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.standby-head b {
  font-size: var(--fs-callout);
}
.standby-head-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.standby-head-actions .is-on {
  border-color: #2166bd;
  color: #2166bd;
}
.standby-grid {
  display: grid;
  grid-template-columns: 34px repeat(7, 1fr);
  grid-template-rows: auto;
  grid-auto-rows: 36px;
  gap: 3px;
}
.standby-dow {
  display: grid;
  place-content: center;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.standby-cell,
.standby-week {
  border: 1px solid #e3e9f0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 600 var(--fs-caption) var(--sans);
  cursor: pointer;
  display: grid;
  place-content: center;
  line-height: 1;
}
.standby-week {
  font-size: var(--fs-micro);
  color: var(--muted);
  background: #f7f9fc;
}
.standby-cell.is-sun {
  color: #c2410c;
}
.standby-cell.is-sat {
  color: #2166bd;
}
.standby-cell.is-outside {
  color: #b6c1cd;
  background: #fbfcfd;
}
.standby-cell:hover,
.standby-week:hover {
  background: #eef4fb;
}
.standby-cell.is-on,
.standby-week.is-on {
  background: #b45309;
  border-color: transparent;
  color: #fff;
}
.standby-summary {
  display: grid;
  gap: 4px;
  font-size: var(--fs-caption);
}
.cal-standby-chip {
  display: block;
  border-radius: 3px;
  background: #fdf1dd;
  color: #8a5a09;
  font: var(--fs-micro)/1.35 var(--sans);
  padding: 3px 4px;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-standby-chip.is-open {
  background: #fbe3e5;
  color: #a33241;
}
body.theme-dark .standby-picker {
  background: #16233a;
  border-color: #29415e;
}
body.theme-dark .standby-cell,
body.theme-dark .standby-week {
  background: #1b2b45;
  border-color: #29415e;
  color: #e7eef7;
}
body.theme-dark .standby-cell.is-outside {
  background: #16233a;
  color: #6b8099;
}
.leave-grant-diffs,
.leave-grant-log {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}
.leave-grant-diff {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--fs-caption);
}
.leave-grant-diff span {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.leave-grant-diff em {
  font: 600 var(--fs-caption) var(--mono);
  font-style: normal;
  color: #1d4ed8;
}
.leave-grant-log > div {
  padding: 9px 0;
  border-bottom: 1px solid #eef1f5;
}
.leave-grant-log > div:last-child {
  border: 0;
}
.leave-grant-log b {
  font-size: var(--fs-caption);
}
.leave-grant-log em {
  font: 600 var(--fs-caption) var(--mono);
  font-style: normal;
  color: #1d4ed8;
  margin-left: 8px;
}
.leave-grant-log p {
  margin: 3px 0 2px;
  font-size: var(--fs-caption);
  color: #405468;
}
.leave-grant-log small {
  font: var(--fs-micro) var(--mono);
  color: var(--muted);
}
body.theme-dark .leave-balance-row {
  border-bottom-color: #29415e;
}
body.theme-dark .leave-balance-figures b {
  color: #e7eef7;
}

/* 육안점검: 랙 앞뒤 이동, Location 점검 순서, 장애 사진 첨부 */
.walkthrough-rack-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}
.walkthrough-nav-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 7px 12px;
  border: 1px solid var(--walkthrough-border, #cbd9e7);
  border-radius: 8px;
  background: #fff;
  color: #1b4c78;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.walkthrough-nav-button:last-child {
  text-align: right;
}
.walkthrough-nav-button:hover:not(:disabled) {
  border-color: #6d9fc9;
  background: #f3f9ff;
}
.walkthrough-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.walkthrough-nav-button span {
  font-size: var(--fs-caption);
  font-weight: 750;
}
.walkthrough-nav-button small {
  overflow: hidden;
  color: #71869a;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-nav-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 10px;
  border: 1px dashed #c3d3e2;
  border-radius: 8px;
  background: #f7fafd;
  text-align: center;
}
.walkthrough-nav-state b {
  color: #2c5b85;
  font-size: var(--fs-micro);
}
.walkthrough-nav-state small {
  color: #7b8fa2;
  font-size: var(--fs-micro);
}
.walkthrough-nav-state.checked {
  border-style: solid;
  border-color: #9fd5b5;
  background: #eef9f2;
}
.walkthrough-nav-state.checked b {
  color: #0a7141;
}

.walkthrough-order-panel {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d7e2eb;
}
.walkthrough-order-panel > span {
  display: block;
  margin-bottom: 7px;
  color: #2c5b85;
  font-size: var(--fs-micro);
  font-weight: 750;
}
.walkthrough-order-panel > span small {
  margin-left: 6px;
  color: #7b8fa2;
  font-size: var(--fs-micro);
  font-weight: 600;
}
.walkthrough-order-list {
  display: grid;
  gap: 5px;
}
.walkthrough-order-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #d7e2eb;
  border-radius: 7px;
  background: #fff;
}
.walkthrough-order-index {
  display: grid;
  place-items: center;
  height: 19px;
  border-radius: 5px;
  background: #e8f1f9;
  color: #2c5b85;
  font: 800 var(--fs-micro) var(--mono);
}
.walkthrough-order-row b {
  overflow: hidden;
  color: #17334d;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.walkthrough-order-actions {
  display: flex;
  gap: 4px;
}
.walkthrough-order-actions button {
  width: 24px;
  height: 24px;
  border: 1px solid #cbd9e7;
  border-radius: 5px;
  background: #f7fafd;
  color: #2c5b85;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.walkthrough-order-actions button:hover:not(:disabled) {
  border-color: #6d9fc9;
  background: #eaf3fb;
}
.walkthrough-order-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.walkthrough-photo-input {
  padding: 7px 9px;
  font-size: var(--fs-micro);
}
.walkthrough-photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.walkthrough-photo-thumb {
  position: relative;
  width: 78px;
  height: 78px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #cbd9e7;
  border-radius: 7px;
  background: #f2f6fa;
}
.walkthrough-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.walkthrough-photo-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 32, 49, 0.72);
  color: #fff;
  font-size: var(--fs-caption);
  line-height: 1;
  cursor: pointer;
}
.walkthrough-photo-remove:hover {
  background: #b9212e;
}
/* 육안 점검 갤러리는 .photo-gallery 로 옮겼다(photo-upload.js). */

.task-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.task-photo-grid img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.15s;
}
.task-photo-grid button:hover img {
  transform: scale(1.02);
}

body.theme-dark .walkthrough-nav-button {
  border-color: #29415e;
  background: #14243a;
  color: #cfe2f3;
}
body.theme-dark .walkthrough-nav-button:hover:not(:disabled) {
  border-color: #4c93ce;
  background: #182d45;
}
body.theme-dark .walkthrough-nav-state {
  border-color: #36506a;
  background: #132338;
}
body.theme-dark .walkthrough-nav-state b {
  color: #cfe2f3;
}
body.theme-dark .walkthrough-nav-state.checked {
  border-color: #276f4a;
  background: #143a2a;
}
body.theme-dark .walkthrough-nav-state.checked b {
  color: #78d7a2;
}
body.theme-dark .walkthrough-order-panel {
  border-color: #29415e;
}
body.theme-dark .walkthrough-order-row,
body.theme-dark .walkthrough-order-actions button {
  border-color: #29415e;
  background: #14243a;
  color: #cfe2f3;
}
body.theme-dark .walkthrough-order-row b {
  color: #e7eef7;
}
body.theme-dark .walkthrough-order-index {
  background: #1c3a57;
  color: #9fc6e8;
}
body.theme-dark .walkthrough-photo-thumb,
body.theme-dark .photo-gallery-item,
body.theme-dark .runbook-photo,
body.theme-dark .task-photo-grid img,
body.theme-dark .task-photo-grid button {
  border-color: #29415e;
}

@media (max-width: 760px) {
  .walkthrough-rack-nav {
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .walkthrough-nav-state {
    order: -1;
    grid-column: 1/-1;
    flex-direction: row;
    gap: 7px;
  }
  .task-photo-grid img {
    width: 112px;
    height: 112px;
  }
}

/* 자산 상세: RackTables 미러에서 읽어오는 사양·연결·IP와 앱의 점검/업무 이력 */
.inventory-table tbody tr.asset-row {
  cursor: pointer;
}
.inventory-table tbody tr.asset-row:hover {
  background: #f2f7fc;
}
body.theme-dark .inventory-table tbody tr.asset-row:hover {
  background: #182d45;
}
.asset-detail-page .page-head {
  margin-bottom: 12px;
}
.asset-detail-header .heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.asset-detail-header .heading h1 {
  margin: 0;
  font-size: var(--fs-title1);
}
.asset-detail-header .heading .task-id {
  flex-basis: 100%;
}
.asset-type-badge {
  padding: 3px 9px;
  border: 1px solid #cbd9e7;
  border-radius: 999px;
  background: #f2f7fc;
  color: #2c5b85;
  font-size: var(--fs-micro);
  font-weight: 750;
}
/* 손으로 쓴 메모라 줄바꿈과 들여쓰기가 곧 구조다. 길어질 수 있으니 머리말이 페이지를
   밀어내지 않도록 높이를 제한하고 안에서 스크롤한다. */
.asset-comment {
  margin: 10px 0 0;
  padding: 9px 11px;
  max-height: 230px;
  overflow: auto;
  background: #f7fafd;
  color: #4a637a;
  font-size: var(--fs-caption);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.asset-detail-layout {
  align-items: start;
}
/* 랙에는 오른쪽 곁줄이 없다. 도면과 이력이 나란히 선다. */
.asset-rack-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
.asset-panel + .asset-panel {
  margin-top: 16px;
}
.asset-pending {
  padding: 22px;
  color: #7b8fa2;
  font-size: var(--fs-caption);
  text-align: center;
}

.asset-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.asset-field-grid > div,
.asset-meta-list > div,
.asset-disk-list > div {
  display: grid;
  gap: 2px;
}
.asset-field-grid label,
.asset-meta-list label,
.asset-disk-list label {
  color: #7b8fa2;
  font: 800 var(--fs-micro) var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.asset-field-grid span,
.asset-meta-list span,
.asset-disk-list span {
  color: #17334d;
  font-size: var(--fs-caption);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.asset-disk-group {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #d7e2eb;
}
.asset-disk-group summary {
  color: #2c5b85;
  font-size: var(--fs-micro);
  font-weight: 750;
  cursor: pointer;
}
.asset-disk-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.asset-port-table td {
  vertical-align: top;
}
.asset-port-table .subtext {
  display: block;
  margin-top: 2px;
}
.asset-port-free td {
  color: #8999a9;
}
.asset-port-empty {
  color: #9aa9b8;
  font-size: var(--fs-micro);
}
.asset-link {
  border: 0;
  background: none;
  color: #1d65aa;
  font: 700 var(--fs-caption) inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.asset-link:hover {
  text-decoration: underline;
}

.asset-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.asset-address-groups {
  display: grid;
  gap: 14px;
}
.asset-address-group {
  display: grid;
  gap: 7px;
}
.asset-address-group h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #2c5b85;
  font: 800 var(--fs-micro) var(--mono);
  letter-spacing: 0.05em;
}
.asset-address-group h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8f1f9;
  color: #2c5b85;
  font-size: var(--fs-micro);
}
.asset-address {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid #d7e2eb;
  border-radius: 7px;
  background: #f9fbfd;
}
.asset-address b {
  color: #17334d;
  font: 750 var(--fs-callout) var(--mono);
}
.asset-address span {
  color: #4a637a;
  font-size: var(--fs-micro);
}
.asset-address small {
  color: #7b8fa2;
  font-size: var(--fs-micro);
}
.inventory-ip-cell {
  min-width: 150px;
}
.inventory-ip-cell > b {
  color: #17334d;
  font: 700 var(--fs-micro) var(--mono);
  white-space: nowrap;
}
.inventory-ip-kind {
  margin-right: 5px;
  color: #1c7045;
  font-weight: 750;
}

.asset-mounted-list {
  display: grid;
  gap: 4px;
  max-height: 340px;
  overflow: auto;
}
.asset-mounted-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.asset-mounted-row:hover {
  border-color: #cbd9e7;
  background: #f2f7fc;
}
.asset-mounted-row b {
  overflow: hidden;
  color: #17334d;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-unit {
  display: grid;
  place-items: center;
  padding: 2px 0;
  border-radius: 5px;
  background: #e8f1f9;
  color: #2c5b85;
  font: 800 var(--fs-micro) var(--mono);
}

.asset-task-list {
  display: grid;
  gap: 4px;
}
.asset-task-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.asset-task-row:hover {
  border-color: #cbd9e7;
  background: #f2f7fc;
}
.asset-task-row b {
  overflow: hidden;
  color: #17334d;
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-meta-list {
  display: grid;
  gap: 9px;
}
.asset-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.asset-tag-list span {
  padding: 3px 8px;
  border: 1px solid #d7e2eb;
  border-radius: 999px;
  background: #f7fafd;
  color: #4a637a;
  font: 600 var(--fs-micro) var(--mono);
}
.asset-rack-jump,
.asset-source-link {
  margin-top: 12px;
  display: inline-block;
}

/* 랙 머리말: 태그는 이름 옆줄에 붙고, 메모와 위치 카드가 반씩 나눠 선다. */
.asset-head-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.asset-head-tag {
  padding: 3px 8px;
  border: 1px solid #d7e2eb;
  border-radius: 999px;
  background: #f7fafd;
  color: #4a637a;
  font: 600 var(--fs-micro) var(--mono);
}
.asset-head-source {
  color: #2c5b85;
  font-size: var(--fs-micro);
  font-weight: 750;
  text-decoration: none;
}
.asset-head-source:hover {
  text-decoration: underline;
}
.asset-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 10px;
}
.asset-head-split.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.asset-head-split > .asset-comment,
.asset-head-split > .asset-panel {
  margin: 0;
}
/* 위치는 항목이 예닐곱 줄이라 한 줄씩 세우면 옆의 메모보다 두 배로 길어진다. */
.asset-head-split .asset-meta-list {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
/* 다섯 줄까지만 펴 두고 나머지는 안에서 굴린다. line-height 1.6 × 12px × 5줄 + 위아래 여백. */
.asset-comment.is-clamped {
  max-height: calc(8em + 18px);
}

/* 랙 도면: 유닛 번호가 왼쪽 기둥, 장비는 차지한 유닛 수만큼 세로로 늘어난다. */
.asset-rack-elevation {
  max-height: 560px;
  overflow: auto;
}
.asset-rack-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.asset-rack-table th {
  width: 38px;
  padding: 0 7px 0 0;
  border-right: 1px solid #e7edf3;
  color: #7b8fa2;
  font: 800 9px var(--mono);
  text-align: right;
  vertical-align: middle;
}
.asset-rack-slot {
  height: 22px;
  padding: 1px 0 1px 7px;
}
.asset-rack-slot:not(.is-filled) {
  background: repeating-linear-gradient(-45deg, transparent 0 5px, #f1f5f9 5px 6px);
}
.asset-rack-device {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 20px;
  padding: 2px 9px;
  border: 1px solid #cbd9e7;
  border-radius: 5px;
  background: #f2f7fc;
  cursor: pointer;
  text-align: left;
}
.asset-rack-device:hover {
  border-color: #2c5b85;
  background: #e8f1f9;
}
.asset-rack-device b {
  overflow: hidden;
  color: #17334d;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-rack-device span {
  color: #7b8fa2;
  font: 700 9px var(--mono);
  white-space: nowrap;
}

body.theme-dark .asset-rack-table th {
  border-color: #29415e;
}
body.theme-dark .asset-rack-slot:not(.is-filled) {
  background: repeating-linear-gradient(-45deg, transparent 0 5px, #182d45 5px 6px);
}
body.theme-dark .asset-rack-device {
  border-color: #29415e;
  background: #182d45;
}
body.theme-dark .asset-rack-device:hover {
  border-color: #4a7fb5;
  background: #1c3a57;
}
body.theme-dark .asset-rack-device b {
  color: #e7eef7;
}
body.theme-dark .asset-type-badge,
body.theme-dark .asset-address,
body.theme-dark .asset-head-tag,
body.theme-dark .asset-tag-list span {
  border-color: #29415e;
  background: #182d45;
  color: #cfe2f3;
}
body.theme-dark .asset-comment {
  border-color: #36506a;
  background: #132338;
  color: #9fb2c4;
}
body.theme-dark .asset-field-grid span,
body.theme-dark .asset-meta-list span,
body.theme-dark .asset-disk-list span,
body.theme-dark .asset-address b,
body.theme-dark .asset-mounted-row b,
body.theme-dark .asset-task-row b {
  color: #e7eef7;
}
body.theme-dark .asset-address-group h3,
body.theme-dark .inventory-ip-cell > b {
  color: #cfe2f3;
}
body.theme-dark .asset-address-group h3 span {
  background: #1c3a57;
  color: #9fc6e8;
}
body.theme-dark .asset-mounted-row:hover,
body.theme-dark .asset-task-row:hover {
  border-color: #29415e;
  background: #182d45;
}
body.theme-dark .asset-unit {
  background: #1c3a57;
  color: #9fc6e8;
}
body.theme-dark .asset-disk-group {
  border-color: #29415e;
}

@media (max-width: 760px) {
  .asset-field-grid,
  .asset-disk-list,
  .asset-address-list {
    grid-template-columns: 1fr;
  }
  .asset-port-table {
    min-width: 520px;
  }
  .asset-detail-header .heading h1 {
    font-size: var(--fs-title1);
  }
  .asset-head-split {
    grid-template-columns: 1fr;
  }
}

/* 연결 경로: 현재 자산에서 경계 라우터까지 위→아래로 읽는다. 상세 화면의 오른쪽 좁은
   열에서도 가로 스크롤 없이 흐름 전체와 각 포트 쌍을 한 번에 볼 수 있다. */
.asset-chain {
  display: grid;
  gap: 5px;
}
.asset-chain-node {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid #cbd9e7;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}
.asset-chain-node:hover {
  border-color: #6d9fc9;
  background: #f3f9ff;
}
.asset-chain-node b {
  overflow: hidden;
  color: #17334d;
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-chain-node small {
  color: #7b8fa2;
  font: 600 var(--fs-micro) var(--mono);
  letter-spacing: 0.04em;
}
.asset-chain-node.current {
  border-color: #2875bc;
  background: #eef6fd;
}
.asset-chain-node.current b {
  color: #14456e;
}
.asset-chain-node.edge {
  border-color: #9fd5b5;
  background: #eef9f2;
}
.asset-chain-node.edge b {
  color: #0a5c37;
}
.asset-chain-hop {
  display: grid;
  justify-items: center;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 1px 9px;
  color: #8999a9;
  font: 600 var(--fs-micro) var(--mono);
}
.asset-chain-hop > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-chain-hop > span:first-child {
  text-align: right;
}
.asset-chain-hop i {
  position: relative;
  display: block;
  width: 1px;
  height: 22px;
  background: #c3d3e2;
}
.asset-chain-hop i::after {
  content: '';
  position: absolute;
  right: auto;
  bottom: -3px;
  left: -3px;
  border: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 5px solid #c3d3e2;
}
.asset-chain-hop em {
  grid-column: 1/-1;
  max-width: 100%;
  overflow: hidden;
  color: #9aa9b8;
  font-style: normal;
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-chain-note {
  margin: 11px 0 0;
  color: #8a5b18;
  font-size: var(--fs-micro);
}
.asset-chain-hint {
  margin: 8px 0 0;
  color: #8999a9;
  font-size: var(--fs-micro);
}
.asset-chain-empty {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px dashed #d7e2eb;
  border-radius: 8px;
  background: #f9fbfd;
}
.asset-chain-empty b {
  color: #4a637a;
  font-size: var(--fs-caption);
}
.asset-chain-empty span {
  color: #7b8fa2;
  font-size: var(--fs-micro);
}

body.theme-dark .asset-chain-node {
  border-color: #29415e;
  background: #14243a;
}
body.theme-dark .asset-chain-node:hover {
  border-color: #4c93ce;
  background: #182d45;
}
body.theme-dark .asset-chain-node b {
  color: #e7eef7;
}
body.theme-dark .asset-chain-node.current {
  border-color: #4c93ce;
  background: #173b59;
}
body.theme-dark .asset-chain-node.edge {
  border-color: #276f4a;
  background: #143a2a;
}
body.theme-dark .asset-chain-node.edge b {
  color: #78d7a2;
}
body.theme-dark .asset-chain-hop i {
  background: #36506a;
}
body.theme-dark .asset-chain-hop i::after {
  border-top-color: #36506a;
}
body.theme-dark .asset-chain-empty {
  border-color: #29415e;
  background: #132338;
}

/* 모달은 화면에 고정된 어떤 것보다도 위에 떠야 한다. 모바일에서 육안점검의 장애 발견
   버튼(z-index:30)과 하단 탭바(z-index:50)가 모달 위에 그려져 저장 버튼을 가렸다. */
.modal-backdrop {
  z-index: 60;
}
#toast-root {
  z-index: 70;
}
/* 머리말과 버튼 줄은 고정하고 본문만 스크롤한다. 세로가 짧은 화면에서도 저장 버튼이
   항상 보이고, 사진을 여러 장 붙여 본문이 길어져도 마찬가지다. */
.modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
  max-height: min(90vh, 90dvh);
}
.modal-head,
.modal-foot {
  flex: 0 0 auto;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 고객 화면. 숫자 칸은 오른쪽으로 맞춰야 자산 수를 세로로 훑어볼 수 있다. */
/* 진행 기록 한 줄 적는 자리 — 내용, 상태, 단추가 한 줄에 선다. */
.incident-update-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.incident-update-form .input {
  flex: 1;
  min-width: 0;
}
.incident-update-form .select {
  width: auto;
}

/* 연결 고르는 줄 — 목록에서 하나 고르고 옆 단추로 잇는다. */
.link-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.link-picker select {
  flex: 1;
  min-width: 0;
}

/* 고객 리포트 — 기간 고르는 줄과, 랙마다 그리는 흡기 온도 꺾은선. */
.customer-report-period {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.customer-temp-table td {
  vertical-align: middle;
}
.temp-spark-cell {
  width: 140px;
}
.temp-spark {
  width: 120px;
  height: 28px;
  display: block;
  overflow: visible;
}
/* 기준선은 늘 보이되 눈에 먼저 들어오지는 않아야 한다. 값이 아니라 배경이다. */
.temp-spark-limit {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.temp-spark-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.temp-spark-dot {
  fill: var(--blue);
}

.customer-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.customer-totals article {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.customer-totals span {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.customer-totals strong {
  font: 700 var(--fs-title1) var(--sans);
}
.cportal-contract-table {
  max-width: 100%;
  overflow-x: auto;
}
.cportal-contract-table > table {
  min-width: 700px;
}
.cportal-contract-table:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.customer-table tbody tr {
  cursor: pointer;
}
/* 머리글은 칸 왼쪽 끝, 숫자는 칸 오른쪽 끝에 붙어 있으면 서로 다른 칸처럼 보인다.
   숫자 칸은 머리글도 같이 오른쪽으로 맞추고, 칸 너비도 내용에 맞게 좁힌다. */
.customer-number {
  text-align: right;
  font: 600 var(--fs-caption) var(--mono);
  width: 72px;
}
.customer-table th.customer-number {
  text-align: right;
  font-family: var(--sans);
}
.customer-flag {
  text-align: right;
  width: 96px;
}
.customer-table th.customer-flag {
  text-align: right;
}
.customer-table td:first-child,
.customer-table th:first-child {
  text-align: left;
}
.customer-open-tasks {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.customer-kind {
  font-size: var(--fs-micro);
  font-weight: 700;
  border-radius: 10px;
  padding: 3px 7px;
  white-space: nowrap;
  background: #edf1f5;
  color: #57697b;
}
.customer-kind.server {
  background: #e8f1fd;
  color: #2365b4;
}
.customer-kind.vm {
  background: #f1eafe;
  color: #6842a4;
}
.customer-kind.network {
  background: #e7f7f7;
  color: #217478;
}
.customer-rack-list {
  display: grid;
  gap: 9px;
}
.customer-rack {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.customer-rack:hover {
  border-color: #9ec2e6;
}
.customer-rack b {
  display: block;
  font-size: var(--fs-callout);
}
.customer-rack small {
  color: var(--muted);
  font-size: 11px;
}
.customer-rack-usage {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.customer-rack-usage strong {
  font: 700 17px var(--mono);
}
.customer-rack-share {
  font-size: 11px;
  color: var(--muted);
}
.customer-rack-share b {
  display: inline;
  color: #8a5a12;
  font-size: 11px;
}
.customer-address-wrap {
  max-height: 340px;
  overflow: auto;
}

@media (max-width: 760px) {
  .customer-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .customer-totals article {
    padding: 10px 11px;
  }
  .customer-totals strong {
    font-size: var(--fs-title3);
  }
}

/* 표 머리는 언어와 상관없이 같은 모양이어야 한다. 사전에는 자연스러운 대소문자로 적어 두고
   보이는 자리에서만 대문자로 올린다(한글에는 영향이 없다). */
.data-table th,
.task-list th {
  text-transform: uppercase;
}

/* 목록 아래 페이지 줄: 왼쪽은 표시 범위, 오른쪽은 앞뒤 이동. */
.pagination {
  gap: 12px;
  flex-wrap: wrap;
}
.pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pagination .page-size {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pagination .page-size select {
  padding: 5px 7px;
  font-size: var(--fs-caption);
}
.pagination-page {
  font: 600 var(--fs-caption) var(--mono);
  color: var(--ink);
  min-width: 52px;
  text-align: center;
}
.pagination .button[disabled] {
  opacity: 0.45;
  cursor: default;
}
.auto-page-hidden {
  display: none !important;
}
/* Keep these after the date toolbar's !important screen grid rules. Browser print
   uses the unpaginated report model, not the current screen page or open details. */
@media print {
  .reports-page > .report-period,
  .reports-page > .report-topic-body {
    display: none !important;
  }
  .shell,
  .main,
  .reports-page,
  #report-print-container {
    background: #fff !important;
  }
  #report-print-container .report-print-progress {
    margin-bottom: 12px;
  }
  #report-print-container .report-hero-kpis small span {
    display: inline;
    font-size: inherit;
    color: inherit;
  }
  #report-print-container .print-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #report-print-container .print-header > div {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #report-print-container .print-header .meta {
    margin-left: auto;
  }
  #report-print-container .report-asset-card b {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #report-print-container .report-asset-card p {
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  #report-print-container .report-site-card > header {
    flex-wrap: wrap;
    gap: 8px;
  }
  #report-print-container .report-site-card > header p {
    flex-wrap: wrap;
    max-width: 100%;
  }
  #report-print-container .report-model-list b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  #report-print-container .report-print-progress,
  #report-print-container .report-print-aging,
  #report-print-container .report-people-list,
  #report-print-container .report-leave-list {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  #report-print-container .table-wrap {
    overflow: visible !important;
  }
  #report-print-container table {
    table-layout: fixed;
    min-width: 0;
  }
  #report-print-container th,
  #report-print-container td,
  #report-print-container .report-print-task {
    overflow-wrap: anywhere;
  }
  #report-print-container tr,
  #report-print-container .report-print-task {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .report-print-task {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .report-print-task > header {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
  }
  .report-print-task .report-note-history {
    margin-top: 6px;
  }
  .report-print-task .report-note-history > div {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
@media print and (max-width: 560px) {
  #report-print-container .report-site-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
.pagination.compact {
  justify-content: flex-end;
  gap: 12px;
  min-height: 44px;
}
.pagination.compact .pagination-count {
  margin-right: auto;
}
.pagination.compact .pagination-controls {
  gap: 7px;
}
.pagination.compact .button {
  min-width: 28px;
  height: 28px;
  padding: 2px 7px;
  font-size: var(--fs-title3);
  line-height: 1;
}
.pagination-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 20px;
}
.pagination-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c5ccd5;
}
.pagination-dots i.active {
  width: 13px;
  border-radius: 5px;
  background: #136b55;
}
.walkthrough-session-row .button.danger {
  margin-left: 6px;
}
.walkthrough-result-meta .button.danger {
  margin-top: 6px;
}

@media (max-width: 760px) {
  .pagination {
    flex-direction: column;
    align-items: stretch;
  }
  .pagination.compact {
    flex-direction: row;
    align-items: center;
  }
  .pagination-controls {
    justify-content: space-between;
  }
  .modal-backdrop {
    padding: 10px;
  }
  .modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .modal-head {
    padding: 13px 14px;
  }
  .modal-body {
    padding: 14px;
  }
  .modal-foot {
    padding: 11px 14px;
  }
  /* 좁은 화면에서는 저장 버튼을 손가락이 닿는 폭으로 */
  .modal-foot .button {
    flex: 1;
    padding: 11px 13px;
  }
}

/* 사이드바 머리 ---------------------------------------------------------
   아이콘 없이 이름만 두 줄로 세운다. */
.brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 2px 12px 22px;
  line-height: 1.2;
}
.brand b {
  font-size: var(--fs-title3);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.brand span {
  font-size: var(--fs-callout);
  font-weight: 500;
  color: #9fb7d2;
  letter-spacing: 0.02em;
}
/* 아이콘만 남는 폭에서는 두 번째 줄이 들어갈 자리가 없다. */
@media (max-width: 1100px) {
  .brand {
    align-items: center;
    padding: 3px 4px 22px;
  }
  .brand b {
    font-size: var(--fs-micro);
    letter-spacing: 0;
  }
}

/* 사이드바 폭 -----------------------------------------------------------
   254px 은 가장 긴 항목(현장 작업)에 견줘 남는 자리가 많았다. 글자가 잘리지
   않는 선까지만 좁힌다. */
.shell {
  grid-template-columns: 212px 1fr;
}
.sidebar {
  padding: 18px 9px;
}
.brand {
  padding: 2px 9px 20px;
}
.workspace {
  padding: 0 9px 8px;
}
.nav button {
  gap: 9px;
  padding: 9px 9px;
}
.nav .section {
  padding: 16px 9px 4px;
}

/* 즐겨찾기 별 ----------------------------------------------------------
   평소에는 숨어 있다가 항목에 커서를 올리면 나온다. 담아 둔 항목은 늘 보인다.
   아이콘만 남는 좁은 폭에서는 별이 들어갈 자리가 없어 숨긴다. */
.nav button .fav-star {
  margin-left: auto;
  color: #61799a;
  font-size: var(--fs-caption);
  font-style: normal;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
}
.nav button:hover .fav-star,
.nav button .fav-star.on {
  opacity: 1;
}
.nav button .fav-star.on {
  color: #e0b03c;
}
.nav button .fav-star:hover {
  color: #ffd166;
}
.nav .nav-hint {
  margin: 2px 9px 4px;
  color: #7a90a8;
  font-size: var(--fs-micro);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .nav button .fav-star,
  .nav .nav-hint {
    display: none;
  }
}

/* 체류 시간(Aging & SLA) 카드 -------------------------------------------
   숫자 넉 줄이 그냥 글로 흐르던 자리다. 왼쪽 색 막대로 심각도를 구분하고,
   아래 가는 막대로 전체 대비 비율을 보인다. 0건이면 색을 죽여서 빨간 0 이
   경고처럼 보이지 않게 한다. */
.aging-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.aging-stat-card {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  --aging-tone: #8fa3b8;
}
.aging-stat-card span {
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.35;
}
.aging-stat-card strong {
  color: var(--aging-tone);
  font: 700 var(--fs-display)/1 var(--sans);
  letter-spacing: -0.01em;
}
.aging-stat-card i {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: #e8edf3;
  overflow: hidden;
}
.aging-stat-card i b {
  display: block;
  height: 100%;
  background: var(--aging-tone);
}
.aging-stat-card.total {
  --aging-tone: #2c5f92;
}
.aging-stat-card.ok {
  --aging-tone: #2c7a51;
}
.aging-stat-card.alert-24 {
  --aging-tone: #b5721a;
}
.aging-stat-card.alert-48 {
  --aging-tone: #b62431;
}
.aging-stat-card.is-zero {
  --aging-tone: var(--text-muted);
}
.aging-stat-card.is-zero strong {
  color: var(--text-muted);
}
/* 목록 쪽 경과 시간 배지 */
.aging-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  font: 700 var(--fs-micro) var(--sans);
  white-space: nowrap;
}
.aging-warning {
  background: #fff2df;
  color: #96590d;
}
.aging-critical {
  background: #fdeaec;
  color: #a71f2b;
}
@media (max-width: 900px) {
  .aging-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 인수인계 알림과 상태 ---------------------------------------------------
   받는 팀 사람이 로그인하면 오른쪽 아래에 한 번 뜬다. 토스트보다 오래 남아야
   해서 따로 둔다 — 교대 인계는 3초 만에 사라지면 안 되는 내용이다. */
.handover-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 14;
  width: min(330px, calc(100vw - 32px));
  padding: 13px 15px;
  border: 1px solid #b9cfe4;
  border-radius: 10px;
  background: #fff;
}
.handover-float header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.handover-float header b {
  color: #14477c;
  font-size: var(--fs-callout);
}
.handover-float header button {
  border: 0;
  background: none;
  color: #6c8299;
  font-size: var(--fs-title1);
  line-height: 1;
  cursor: pointer;
}
.handover-float-line {
  margin: 0 0 5px;
  color: #4d647a;
  font-size: var(--fs-micro);
}
.handover-float-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 11px;
  color: #26405a;
  font-size: var(--fs-caption);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.handover-float-actions {
  display: flex;
  gap: 7px;
}
.handover-float-actions .button {
  flex: 1;
}
/* 지금 인수인계가 어느 단계인지 한 줄로. 대기 중은 시간이 갈수록 눈에 띄어야 한다. */
.handover-state {
  margin-top: 7px;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.handover-state.is-waiting {
  background: #fff3db;
  color: #8a5a0b;
}
.handover-state.is-done {
  background: #e7f5ec;
  color: #226943;
}
.field-hint {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--fs-micro);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .handover-float {
    right: 10px;
    bottom: 78px;
    left: 10px;
    width: auto;
  }
}

/* 자산 이력 -------------------------------------------------------------
   업무·장애·현장 작업·점검을 한 줄로 세운다. 종류를 색으로만 구분하면 흑백으로
   인쇄했을 때 못 읽으니 글자로도 적는다. */
.asset-history {
  display: grid;
  gap: 1px;
  background: #eef1f5;
}
.asset-history-row {
  display: grid;
  grid-template-columns: 62px 118px minmax(0, 1fr) 96px auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
}
.asset-history-row:not(.is-flat) {
  cursor: pointer;
}
.asset-history-row:not(.is-flat):hover {
  background: #f6fafd;
}
.asset-history-row time {
  color: var(--muted);
  font: var(--fs-micro) var(--mono);
}
.asset-history-row b {
  overflow: hidden;
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-history-id {
  color: #5b7086;
  font: 600 var(--fs-micro) var(--mono);
}
.asset-history-kind {
  padding: 3px 0;
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
}
.asset-history-kind.is-task {
  background: #e8f1fd;
  color: #20609f;
}
.asset-history-kind.is-incident {
  background: #fdecee;
  color: #a3232f;
}
.asset-history-kind.is-dispatch {
  background: #eaf5f0;
  color: #22684a;
}
.asset-history-kind.is-check {
  background: #f0f2f5;
  color: #54687c;
}
.asset-history-kind.is-urgent {
  background: #fff1e2;
  color: #a3560f;
}
@media (max-width: 900px) {
  .asset-history-row {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: 4px;
  }
  .asset-history-row time,
  .asset-history-id {
    grid-column: 2;
  }
}

/* 접속 기록 -------------------------------------------------------------
   실패는 눈에 띄어야 하고 로그아웃은 눈에 안 띄어야 한다. IP 는 자릿수를 맞춰
   세로로 훑을 수 있게 고정폭으로 쓴다. */
.login-log-filters {
  align-items: center;
}
.login-log-spacer {
  flex: 1;
}
.login-log-table td {
  vertical-align: middle;
}
.login-log-table .subtext {
  margin-top: 1px;
}
.login-log-ip {
  font: 600 var(--fs-micro) var(--mono);
  color: #41617e;
}
.login-log-kind {
  display: inline-block;
  min-width: 74px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
}
.login-log-kind.is-ok {
  background: #e7f5ec;
  color: #22684a;
}
.login-log-kind.is-fail {
  background: #fdeaec;
  color: #a3232f;
}
.login-log-kind.is-warn {
  background: #fff3db;
  color: #8a5a0b;
}
.login-log-kind.is-muted {
  background: #f0f2f5;
  color: #5b6c7d;
}
/* 대시보드 인수인계 카드 버튼 */
.handover-card-actions {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}
.handover-card-actions .button {
  flex: 1;
}

/* 근무 이어달리기 -------------------------------------------------------
   근무를 시각 순서로 늘어놓고 사이에 화살표를 둔다. 화살표 하나가 인계 한 번이다.
   지금 근무 중인 칸만 진하게, 지나간 칸은 흐리게 — 훑어보면 어디까지 왔는지 보인다. */
.shift-chain {
  margin-bottom: 17px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.shift-chain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.shift-chain-head h2 {
  margin: 0 0 3px;
  font-size: var(--fs-body);
}
.shift-chain-head p {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.shift-chain-head-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 9px;
}
.shift-chain-next {
  color: #1d5793;
  font-size: var(--fs-caption);
  font-weight: 700;
}
.shift-chain-rail {
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 3px;
}
.shift-chain-arrow {
  align-self: center;
  color: #93a8bd;
  font-size: var(--fs-body);
}
.shift-chain-card {
  min-width: 168px;
  flex: 1 1 168px;
  padding: 10px 11px;
  border: 1px solid #d9e3ed;
  border-radius: 8px;
  background: #fbfdff;
}
.shift-chain-card header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.shift-chain-code {
  font: 700 var(--fs-caption) var(--mono);
  color: #17456f;
}
.shift-chain-team {
  padding: 2px 6px;
  border-radius: 9px;
  background: #eef3f8;
  color: #5c7289;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.shift-chain-mine {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 9px;
  background: #e6f0fb;
  color: #1d5793;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.shift-chain-time {
  font: 700 var(--fs-body) var(--mono);
  color: #12324f;
}
.shift-chain-local {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.shift-chain-who {
  margin-top: 7px;
  font-size: var(--fs-caption);
  color: #2a425f;
}
.shift-chain-empty {
  color: #b0451f;
}
.shift-chain-flag {
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #e7f2fb;
  color: #175288;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.shift-chain-card.is-now {
  border-color: #2b78bd;
  background: #f3f9ff;
}
.shift-chain-card.is-done {
  opacity: 0.5;
}
.shift-chain-card.is-mine {
  border-color: #1d5793;
}
.shift-chain-card.is-empty {
  background: #fff8f5;
  border-color: #e6c3b3;
}
/* 인수인계 카드 아래 세 줄 — 순서·지금·다음 */
.shift-chain-note {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #eef1f5;
  display: grid;
  gap: 5px;
}
.shift-chain-note > div {
  display: flex;
  gap: 8px;
  font-size: var(--fs-micro);
}
.shift-chain-note span {
  flex: 0 0 66px;
  color: var(--muted);
}
.shift-chain-note b {
  color: #24405a;
  font-weight: 700;
}
@media (max-width: 900px) {
  .shift-chain-rail {
    padding-bottom: 8px;
  }
  .shift-chain-card {
    min-width: 150px;
  }
}

/* 비상대기 -------------------------------------------------------------
   근무 칸과 다르게 보여야 한다. 대기는 근무가 아니고, 인계 사슬에도 안 들어간다. */
.standby-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px dashed #d5e0ea;
}
.standby-label {
  color: #8a5a0b;
  font: 700 var(--fs-micro) var(--sans);
  letter-spacing: 0.06em;
}
.standby-chip {
  padding: 4px 9px;
  border: 1px dashed #e0bc72;
  border-radius: 12px;
  background: #fffaf0;
  color: #7a5410;
  font-size: var(--fs-micro);
}
.standby-chip.is-open {
  border-color: #e0a5a5;
  background: #fff5f5;
  color: #9c3030;
}
.standby-kind {
  padding: 2px 7px;
  border-radius: 9px;
  background: #f0f2f5;
  color: #54687c;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.standby-kind.is-standby {
  background: #fff3db;
  color: #8a5a0b;
}

/* 현재 근무자: 출근·퇴근 시간이 같은 인원을 한 카드로 모은다. */
.shift-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 206px;
  gap: 13px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}
.shift-chain-main {
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.shift-chain-head {
  margin-bottom: 11px;
}
.shift-chain-rail {
  gap: 6px;
}
.shift-chain-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
}
.shift-chain-card header {
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.shift-chain-time {
  font-size: var(--fs-body);
}
.shift-chain-local {
  font-size: var(--fs-micro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shift-chain-who {
  margin-top: 5px;
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
.shift-chain-rail.is-current {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 10px;
  overflow: visible;
}
.shift-chain-rail.is-current .shift-chain-card {
  min-width: 0;
}
.shift-chain-card.is-grouped {
  padding: 13px 14px;
  background: #fbfdff;
}
.shift-chain-card.is-grouped header {
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.shift-chain-card.is-grouped .shift-chain-time {
  font-size: var(--fs-title3);
}
.shift-chain-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-micro);
  color: var(--muted);
  white-space: nowrap;
}
.shift-chain-count b {
  color: #12324f;
  font-size: var(--fs-callout);
}
.shift-chain-context {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
.shift-chain-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: 7px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.shift-chain-person {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #e4eaf1;
  border-radius: 6px;
  background: #fff;
}
.shift-chain-person .shift-chain-who {
  flex: 1 1 90px;
  margin: 0;
  font-size: var(--fs-caption);
  font-weight: 600;
}
.shift-chain-person .shift-chain-code {
  color: var(--muted);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
.shift-chain-person.is-mine {
  border-color: #8eb9eb;
  background: #eff6ff;
}
.shift-chain-person .shift-chain-mine {
  margin-left: 0;
  white-space: nowrap;
}
.shift-chain-flag {
  margin-top: 5px;
  padding: 2px 6px;
  font-size: 9px;
}
.shift-chain-arrow {
  font-size: var(--fs-caption);
}
.shift-chain-teams {
  display: grid;
  gap: 9px;
}
/* 오른쪽 다음 교대 카드 */
.shift-chain-side {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.shift-chain-side > span {
  color: var(--muted);
  font: 700 var(--fs-micro) var(--mono);
  letter-spacing: 0.08em;
}
.shift-chain-side > strong {
  font: 700 var(--fs-display)/1 var(--mono);
  color: #12324f;
}
.shift-chain-side > p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.shift-chain-side > div {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid #eef1f5;
}
.shift-chain-side b {
  display: block;
  font-size: var(--fs-micro);
  color: #24405a;
}
.shift-chain-side small {
  color: var(--muted);
  font-size: var(--fs-micro);
}

/* 사이트 현재 시각 ------------------------------------------------------- */
.site-clocks {
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.site-clocks-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.site-clocks-head h2 {
  margin: 0;
  font-size: var(--fs-body);
}
.site-clocks-note {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.site-clocks-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font: var(--fs-micro) var(--mono);
}
.site-clocks-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.site-clock {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}
.site-clock header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.site-clock header b {
  overflow: hidden;
  color: #17456f;
  font-size: var(--fs-caption);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-clock header span {
  color: var(--muted);
  font: 700 var(--fs-micro) var(--mono);
}
.site-clock strong {
  display: block;
  margin-top: 3px;
  color: #12324f;
  font: 700 var(--fs-title1)/1 var(--mono);
}
.site-clock-date {
  margin-top: 3px;
  color: #4d647a;
  font-size: var(--fs-micro);
}
.site-clock-offset {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-clocks-empty {
  color: var(--muted);
  font-size: var(--fs-caption);
}
@media (max-width: 1100px) {
  .shift-chain {
    grid-template-columns: 1fr;
  }
  .site-clocks-row {
    grid-template-columns: 1fr;
  }
}

/* 근무별 보기와 팀별 보기의 높이를 맞춘다. 버튼을 누를 때마다 상자가 뛰면
   아래 내용이 함께 흔들린다. */
.shift-chain-rail,
.shift-chain-teams {
  min-height: 124px;
  align-content: center;
}
/* 인수인계 상태를 다음 교대 카드 색으로. 늦으면 붉게, 대기 중이면 노랗게. */
.shift-chain-standing {
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: var(--fs-micro);
  font-weight: 700;
  text-align: center;
}
.shift-chain-side.is-waiting {
  border-color: #e6c684;
  background: #fffaf0;
}
.shift-chain-side.is-waiting .shift-chain-standing {
  background: #fff3db;
  color: #8a5a0b;
}
.shift-chain-side.is-late {
  border-color: #dd9a9a;
  background: #fff5f5;
}
.shift-chain-side.is-late > strong {
  color: #a3232f;
}
.shift-chain-side.is-late .shift-chain-standing {
  background: #fdeaec;
  color: #a3232f;
}


/* ── 팀별 보기: 지금부터 24시간 커버리지 ───────────────────────────────── */
/* 라벨 칸 너비는 여기 한 곳에만 적는다. 눈금선·공백 기둥·NOW 선이 모두 이만큼 밀려 있어야
   축과 어긋나지 않는데, 네 군데에 같은 숫자를 적어 두면 하나만 고치게 된다. */
.coverage-24 {
  --lane-label: 100px;
  --lane-gap: 12px;
  --rail-left: calc(var(--lane-label) + var(--lane-gap));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.coverage-lane {
  display: grid;
  grid-template-columns: var(--lane-label) minmax(0, 1fr);
  gap: var(--lane-gap);
  align-items: center;
}
/* 팀 이름·그 팀 시각·근무 여부를 한 줄에 둔다. 이름 아래에 시각을 따로 놓으면 왼쪽에
   숫자 기둥이 하나 더 서서, 정작 읽어야 할 축과 헷갈린다. */
.coverage-lane-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.coverage-lane-label b {
  font-size: var(--fs-caption);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coverage-lane-label small {
  font: var(--fs-micro) var(--mono);
  color: var(--text-muted);
}
/* 근무 중인지는 점 하나로만 말한다. 줄마다 "운영 중" 을 적으면 같은 글자가 되풀이되어
   정작 다른 것(시각과 막대)이 묻힌다. */
.coverage-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c2ccd8;
}
.coverage-dot.is-on {
  background: var(--success);
}
.coverage-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* 눈금선은 차트 뒤에 한 번만 긋는다. 줄마다 그으면 줄과 줄 사이에서 끊겨 온전한 선이
   아니라 조각으로 보인다. */
.coverage-grid {
  position: absolute;
  left: var(--rail-left);
  right: 0;
  top: -4px;
  bottom: -4px;
  pointer-events: none;
}
.coverage-grid i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #edf1f6;
}
.coverage-grid i.is-daybreak {
  background: #c3cedb;
}
.coverage-rail {
  position: relative;
  height: 16px;
}
.coverage-bar {
  position: absolute;
  top: 0;
  height: 16px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 2px;
  background: #1e3a5f;
  overflow: hidden;
}
.coverage-bar.us {
  background: #475569;
}
/* 창 밖으로 이어지는 쪽은 모서리를 열어 둔다 — 여기서 끝난다는 뜻이 아니다. */
.coverage-bar.goes-on {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.coverage-bar.is-running {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.coverage-hours {
  font: 600 var(--fs-micro) var(--mono);
  font-style: normal;
  color: #fff;
  white-space: nowrap;
}
/* 아무 팀도 없는 시간. 색으로 채우면 화면에서 가장 진한 덩어리가 하필 아무것도 없는
   시간이 되어, 눈이 제일 먼저 그리로 간다. 빗금은 표에서 값 없는 칸에 쓰는 표시라
   채워진 자리로 오해되지 않으면서도 세로 구간은 그대로 짚어 준다. */
.coverage-gaps {
  position: absolute;
  left: var(--rail-left);
  right: 0;
  top: -4px;
  bottom: -4px;
  pointer-events: none;
}
.coverage-gaps span {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  box-sizing: border-box;
  border-left: 1px solid rgba(190, 60, 60, 0.35);
  border-right: 1px solid rgba(190, 60, 60, 0.35);
  background: repeating-linear-gradient(45deg, rgba(200, 70, 70, 0.14) 0 2px, rgba(200, 70, 70, 0) 2px 6px);
  pointer-events: auto;
}
/* 지금. 레인 전체를 관통하는 한 줄이라 팀마다 따로 찍히지 않는다. */
.coverage-now {
  position: absolute;
  left: var(--rail-left);
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--critical);
  pointer-events: none;
}
.coverage-axis {
  position: relative;
  height: 12px;
}
.coverage-axis span {
  position: absolute;
  transform: translateX(-50%);
  font: var(--fs-micro) var(--mono);
  color: var(--text-muted);
  white-space: nowrap;
}
.coverage-axis-now {
  left: 0;
  transform: none !important;
  font-weight: 700 !important;
  color: var(--critical) !important;
}
.coverage-axis .is-daybreak {
  font-weight: 700;
  color: var(--muted);
}
/* 상태와 합계는 머리글이 이미 차지한 줄에 얹는다. 차트 위아래에 상자와 범례로 세우면
   여섯 글자짜리 사실 하나에 줄 하나씩 쓰게 된다. */
.shift-chain-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 3px;
}
.shift-chain-title h2 {
  margin: 0;
}
.coverage-onair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-caption);
  color: var(--success);
}
.coverage-onair b {
  font-weight: 700;
}
.coverage-onair.is-gap {
  color: #a01b1b;
}
.coverage-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.coverage-totals b {
  font-family: var(--mono);
  color: var(--ink);
}
.coverage-totals .is-gap b {
  color: #a01b1b;
}
body.theme-dark .coverage-grid i {
  background: #1a2b41;
}
body.theme-dark .coverage-grid i.is-daybreak {
  background: #2c4463;
}

/* ── 사진: 첨부 갤러리와 크게 보기 ─────────────────────────────────────── */
.photo-gallery {
  grid-column: 1/-1;
  margin-top: 8px;
}
.photo-gallery > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
}
.photo-gallery-item,
.runbook-photo,
.task-photo-grid button {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.photo-gallery-item img {
  width: 88px;
  height: 88px;
  object-fit: cover;
}
.photo-gallery-item:hover,
.runbook-photo:hover,
.task-photo-grid button:hover {
  border-color: var(--blue);
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(8, 17, 28, 0.82);
  cursor: zoom-out;
}
.photo-lightbox figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.photo-lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 110px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  cursor: default;
}
.photo-lightbox figcaption {
  color: #e2e8f0;
  font-size: var(--fs-caption);
  text-align: center;
}
.photo-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--fs-title1);
  line-height: 1;
  cursor: pointer;
}
.photo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ── 런북 본문: 블록 ───────────────────────────────────────────────────── */
.runbook-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.runbook-block-heading {
  margin: 8px 0 0;
  font-size: var(--fs-title3);
  color: var(--ink);
}
.runbook-block {
  margin: 0;
}
.runbook-block-text p {
  margin: 0 0 8px;
  line-height: 1.65;
  color: var(--ink);
}
.runbook-block-text p:last-child {
  margin-bottom: 0;
}
.runbook-block code,
.runbook-steps code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-caption);
}
.runbook-steps {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.runbook-steps h3 {
  margin: 0 0 10px;
  font-size: var(--fs-callout);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.runbook-steps ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.runbook-steps li {
  line-height: 1.6;
  color: var(--ink);
}
.runbook-steps li::marker {
  color: var(--blue);
  font-weight: 700;
}
.runbook-step-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.runbook-step-note p {
  margin: 0 0 4px;
}
.runbook-photo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.runbook-photo img {
  width: 132px;
  height: 96px;
  object-fit: cover;
}
.runbook-photo-block {
  margin: 0;
}
.runbook-photo-block .runbook-photo-row {
  margin-top: 0;
}
.runbook-photo-block figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.runbook-callout {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.runbook-callout strong {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-callout);
}
.runbook-callout p {
  margin: 0 0 6px;
  line-height: 1.6;
  font-size: var(--fs-callout);
}
.runbook-callout p:last-child {
  margin-bottom: 0;
}
.runbook-callout.info {
  border-left-color: var(--blue);
}
.runbook-callout.warn {
  border-left-color: var(--warning);
}
.runbook-callout.danger {
  border-left-color: #b9212e;
}
.runbook-code {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0f1c2e;
  overflow: hidden;
}
.runbook-code-caption {
  display: block;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a9c0;
  font-size: var(--fs-micro);
}
.runbook-code pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
}
.runbook-code code {
  padding: 0;
  border: 0;
  background: none;
  color: #dbe7f3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-callout);
  line-height: 1.6;
}
.runbook-code-copy {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfe0f0;
  font-size: var(--fs-micro);
  cursor: pointer;
}
.runbook-code-copy:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ── 런북 본문 편집기 ──────────────────────────────────────────────────── */
.runbook-editor-page .page-head p {
  margin: 4px 0 0;
}
.runbook-editor-templates {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.runbook-editor-templates h2 {
  margin: 0;
  font-size: var(--fs-callout);
}
.runbook-editor-templates p {
  margin: 3px 0 10px;
  font-size: var(--fs-caption);
}
.runbook-editor-templates > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.runbook-template-button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}
.runbook-template-button:hover {
  border-color: var(--blue);
}
.runbook-template-button b {
  font-size: var(--fs-callout);
}
.runbook-template-button small {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.runbook-editor-blocks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.runbook-editor-block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.runbook-editor-block > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: var(--radius) var(--radius) 0 0;
}
.runbook-editor-kind {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}
.runbook-editor-block-tools {
  display: flex;
  gap: 5px;
}
.runbook-editor-block-remove:hover {
  border-color: #b9212e;
  color: #b9212e;
}
.runbook-editor-block-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.runbook-editor-block-body textarea {
  resize: vertical;
  overflow: hidden;
  line-height: 1.6;
}
.runbook-editor-heading {
  font-size: var(--fs-body);
  font-weight: 600;
}
.runbook-editor-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-callout);
}
.runbook-editor-callout-head {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
}
.runbook-editor-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.runbook-editor-steps > li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
}
.runbook-editor-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.runbook-editor-step-no {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.runbook-editor-step-remove {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--muted);
  line-height: 1;
  cursor: pointer;
}
.runbook-editor-step-remove:disabled {
  opacity: 0.4;
  cursor: default;
}
.runbook-editor-step-remove:not(:disabled):hover {
  border-color: #b9212e;
  color: #b9212e;
}
.runbook-editor-note {
  font-size: var(--fs-caption);
}
.runbook-editor-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.runbook-editor-photos figure {
  position: relative;
  margin: 0;
  width: 96px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}
.runbook-editor-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.runbook-editor-photos button {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 19px;
  height: 19px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 32, 49, 0.72);
  color: #fff;
  font-size: var(--fs-caption);
  line-height: 1;
  cursor: pointer;
}
.runbook-editor-photos button:hover {
  background: #b9212e;
}
.runbook-editor-photo-add {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--muted);
  cursor: pointer;
}
.runbook-editor-photo-add input {
  display: none;
}
.runbook-editor-photo-add span {
  padding: 5px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}
.runbook-editor-photo-add:hover span {
  border-color: var(--blue);
  color: var(--blue);
}
.runbook-editor-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}
.runbook-editor-add > span {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--muted);
}
.runbook-editor-add > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.runbook-body-hint small {
  display: block;
  color: var(--muted);
}
body.theme-dark .runbook-code {
  background: #060d17;
}
body.theme-dark .photo-lightbox img {
  background: #16263b;
}

/* ── 인벤토리: 왼쪽 필터 기둥과 요약 칸 ─────────────────────────────────── */
/* 자산 종류와 사이트를 화면 위쪽에 가로로 펼쳐 두느라 200px 넘게 썼다. 둘 다 "무엇으로
   거를까" 하나를 묻는 것이므로 옆으로 세우고, 그만큼을 표에 돌려준다. */
.inventory-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
/* 보이는 숫자가 곧 거르개다. 숫자를 보여 주는 칸과 그 숫자로 거르는 단추를 따로 두면
   같은 것을 두 번 그리게 된다. */
.inventory-total {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.inventory-total {
  appearance: none;
  cursor: pointer;
}
button.inventory-total:hover {
  border-color: #9fb9d4;
  background: #fbfdff;
}
.inventory-total.active {
  border-color: var(--blue);
  background: #f2f7fd;
  box-shadow: inset 0 0 0 1px var(--blue);
}
.inventory-total span {
  font-size: var(--fs-micro);
  color: var(--muted);
}
.inventory-total strong {
  font: 700 var(--fs-title1) var(--sans);
}
.inventory-body {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.inventory-rail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.inventory-rail h3 {
  margin: 8px 8px 5px;
  font: 700 var(--fs-micro) var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8293a6;
}
.inventory-rail hr {
  margin: 8px 4px;
  border: 0;
  border-top: 1px solid #eef2f7;
}
.inventory-rail-empty {
  margin: 2px 8px 6px;
  font-size: var(--fs-micro);
  color: var(--muted);
}
.inventory-rail-item {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #405a75;
  font: 600 var(--fs-caption) var(--sans);
  text-align: left;
  cursor: pointer;
}
/* 숫자를 이름 옆에 붙여 둔다. 눌러 보기 전에 몇 건인지 알 수 있어야, 눌렀더니 빈 화면이
   나오는 헛걸음을 하지 않는다. */
.inventory-rail-item b {
  font: 700 var(--fs-micro) var(--mono);
  color: #93a3b5;
}
.inventory-rail-item:hover {
  background: #f4f8fc;
}
.inventory-rail-item.active {
  background: #e7f0fa;
  color: #173e72;
}
.inventory-rail-item.active b {
  color: var(--blue);
}
/* 세부 위치는 사이트 아래로 한 칸 들여 적는다. 줄 모양이 곧 포함 관계다. */
.inventory-rail-item.is-child {
  padding-left: 22px;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--muted);
}
.inventory-main {
  min-width: 0;
}
.inventory-main .filters .meta {
  margin-left: auto;
}
.inventory-sync {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.inventory-sync .meta {
  white-space: nowrap;
}
body.theme-dark .inventory-rail,
body.theme-dark .inventory-total {
  background: #10233a;
  border-color: #1f334d;
}
body.theme-dark .inventory-rail-item {
  color: #b9c9dc;
}
body.theme-dark .inventory-rail-item:hover {
  background: #16304d;
}
body.theme-dark .inventory-rail-item.active {
  background: #1c3d63;
  color: #e7eef7;
}
body.theme-dark .inventory-rail hr {
  border-color: #1f334d;
}
body.theme-dark .inventory-total strong {
  color: #e7eef7;
}
/* 좁은 화면에서는 기둥을 세울 자리가 없다. 표 위로 눕혀 격자로 편다. */
@media (max-width: 900px) {
  .inventory-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .inventory-rail {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .inventory-rail h3,
  .inventory-rail hr,
  .inventory-rail-empty {
    grid-column: 1/-1;
  }
}

/* ── 고객 티켓: 대화 ──────────────────────────────────────────────────── */
/* 고객 글은 왼쪽, 우리 글은 오른쪽, 내부 메모는 가운데. 누가 한 말인지를 색이 아니라
   자리로 먼저 알게 한다 — 색만으로 가르면 흑백으로 인쇄했을 때 구분이 사라진다. */
.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ticket-message {
  display: flex;
  flex-direction: column;
  max-width: min(72%, 640px);
}
.ticket-message > header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--fs-caption);
}
.ticket-message > header time {
  color: var(--muted);
  font: var(--fs-micro) var(--mono);
}
.ticket-message-no {
  color: #2a7d46;
  font: var(--fs-micro) var(--mono);
}
.ticket-bubble {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f4f6f9;
}
.ticket-bubble p {
  margin: 0;
  white-space: pre-wrap;
}
.ticket-message-status {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}
.ticket-us {
  align-self: flex-end;
}
.ticket-us > header {
  flex-direction: row-reverse;
}
.ticket-us .ticket-bubble {
  border-color: #cfe0f2;
  background: #eaf3fc;
}
/* 내부 메모는 고객에게 안 나가는 글이다. 한눈에 달라 보여야 한다 — 여기 적은 것이 고객에게
   보인다고 착각하는 순간이 제일 위험하다. */
.ticket-internal {
  align-self: center;
  max-width: min(86%, 760px);
}
.ticket-internal .ticket-bubble {
  border-style: dashed;
  border-color: #d8b24c;
  background: #fdf8ec;
}
.ticket-internal-tag {
  display: block;
  margin-bottom: 6px;
  color: #8a6a16;
  font: 700 var(--fs-micro) var(--sans);
}
.ticket-reply-modes {
  display: flex;
  gap: 7px;
  margin-bottom: 10px;
}
.ticket-reply textarea {
  min-height: 84px;
}
.ticket-unknown {
  color: #b45309;
}
body.theme-dark .ticket-bubble {
  background: #142334;
  border-color: #1f334d;
}
body.theme-dark .ticket-us .ticket-bubble {
  background: #16304b;
}
body.theme-dark .ticket-internal .ticket-bubble {
  background: #2a2312;
  border-color: #6b551e;
}
@media (max-width: 760px) {
  .ticket-message,
  .ticket-internal {
    max-width: 100%;
  }
}

/* 명부 줄: 이름과 개수, 그리고 삭제. 표를 쓰지 않는 이유는 줄마다 폭이 다르고 몇 줄 안 되기
   때문이다. */
.directory-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.directory-row:last-of-type {
  border-bottom: 0;
}
.directory-row .meta {
  display: block;
  margin-top: 2px;
}
/* 고객 고르개는 상태 고르개 바로 아래 한 줄 더. 개수가 늘면 줄바꿈해서 쌓인다. */
.ticket-customer-filters {
  flex-wrap: wrap;
  margin-top: -6px;
}

/* 기둥 아래 붙는 추가 폼. 기둥 폭이 좁으므로 세로로 쌓는다. */
.directory-add {
  display: grid;
  gap: 6px;
  padding: 6px 8px 2px;
}
.directory-add .button {
  justify-self: start;
}

.customer-contract-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.customer-contract-fields label,
.customer-publication-form > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.customer-publication-form {
  display: grid;
  gap: 14px;
  max-width: 1100px;
}
.customer-publication-form > .button {
  justify-self: start;
}
.publication-list {
  display: grid;
  gap: 16px;
}
.publication-item {
  overflow-wrap: anywhere;
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 10px;
  padding: 20px;
  min-width: 0;
}
.publication-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.65;
}
.publication-item .page-head-actions,
.reply-template-tools .page-head-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.reply-template-tools {
  margin-top: 12px;
}
.customer-publications .panel-head > div,
.publication-item .row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.reply-template-tools .input,
.reply-template-tools .select {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 600px) {
  .customer-publications .panel-head,
  .publication-item .row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ticket-detail-page .page-head-actions,
  .ticket-reply-modes {
    flex-wrap: wrap;
  }
  .reply-template-tools .page-head-actions > .input,
  .reply-template-tools .page-head-actions > .select {
    flex: 1 1 100%;
  }
  .ticket-detail-page .fact {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .ticket-detail-page .fact b {
    text-align: left;
  }
}
.ticket-queue-filters {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ticket-detail-page .fact b {
  overflow-wrap: anywhere;
  min-width: 0;
}
.ticket-detail-page .fact-list > .field {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
@media (max-width: 600px) {
  .customer-contract-fields {
    grid-template-columns: 1fr;
  }
  .publication-item {
    padding: 16px;
  }
}

/* Cloud control-plane topology. 장비별 화면이 늘어나도 Region/Cluster 두 열과 HA Pair 한 줄의
   관계가 무너지지 않게 이 화면에만 적용한다. */
.cloud-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.cloud-list,
.cloud-pair-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}
.cloud-list article,
.cloud-pair {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--panel-soft, var(--bg));
}
.cloud-list article,
.cloud-pair > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.cloud-list article div,
.cloud-pair header div,
.cloud-node-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.cloud-list small,
.cloud-pair small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.cloud-node-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.cloud-node-grid > div {
  border-radius: 10px;
  padding: 12px;
  background: var(--surface, var(--panel));
}
.cloud-node-grid > div > span:first-child {
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* 연결 실패와 입력 거절을 같은 모양으로 보인다. 무엇이 안 되는지(굵게), 무엇을 확인할지,
   두 서버 기록을 맞대 볼 코드·요청 id 순서다. */
.cloud-problem {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent);
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--critical) 7%, var(--surface));
}
.modal .cloud-problem {
  margin: 12px 0 0;
}
.cloud-problem strong {
  color: var(--critical);
}
.cloud-problem p {
  margin: 0;
}
.cloud-problem-detail {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}
.cloud-problem small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
/* 합계 네 칸. .kpi 는 누르면 목록이 걸러지는 카드라 손가락 모양·떠오름이 붙어 있어 빌려 쓰지 않는다. */
.cloud-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cloud-summary article {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.cloud-summary small {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.cloud-summary strong {
  font: 700 var(--fs-display)/1 var(--mono);
}
.cloud-page .panel-head {
  align-items: flex-start;
  gap: 12px;
}
.cloud-page .panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.cloud-form .field + .field,
.cloud-form .field + .form-grid,
.cloud-form .form-grid + .field,
.cloud-form .form-grid + .form-grid {
  margin-top: 12px;
}
/* 격자와 fieldset 안에서는 gap 이 간격을 맡는다. 위 규칙까지 더하면 옆 칸과 높이가 어긋난다. */
.cloud-form .form-grid > .field + .field,
.cloud-form .cloud-node-fields > .field + .field {
  margin-top: 0;
}
.cloud-readonly,
.cloud-field-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.cloud-field-hint {
  margin: 5px 0 0;
}
.cloud-node-fields {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cloud-node-fields legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}
/* 고객 Cloud 서비스 표. 해지된 줄은 기록으로만 남기므로 흐리게 둔다. */
.cloud-services {
  margin-bottom: 18px;
}
.cloud-services .table-wrap {
  padding: 0 20px 20px;
}
.cloud-service-table td {
  vertical-align: middle;
}
.cloud-service-table td > small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.cloud-service-cancelled td {
  opacity: 0.55;
}
.cloud-service-actions {
  white-space: nowrap;
  text-align: right;
}
.cloud-service-actions .button + .button {
  margin-left: 6px;
}
.cloud-chip {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-caption);
}
.cloud-muted {
  color: var(--muted);
}
.cloud-feature-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cloud-feature-fields legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
}
.cloud-feature-fields label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.cloud-confirm-target {
  font-weight: 700;
}
[data-cloud-portal-hint] {
  color: var(--warning);
}
/* ── Cloud 서비스 구성(cloud-config.js) ─────────────────────────────────── */
.cloud-config-page,
.cloud-config-layout,
.cloud-config-content,
.cloud-config-view {
  min-width: 0;
}
.cloud-config-layout {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.cloud-config-nav {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.cloud-config-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-callout);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cloud-config-nav-item:hover,
.cloud-config-nav-item:focus-visible {
  background: var(--panel-soft);
}
.cloud-config-nav-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.cloud-config-nav-item.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
}
.cloud-config-nav-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cloud-config-nav-item small {
  flex: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
}
.cloud-config-view[hidden] {
  display: none;
}
.cloud-config-view > .cloud-config-section {
  margin-bottom: 0;
}
.cloud-config-view > .cloud-config-section + .cloud-config-section {
  margin-top: 18px;
}
.cloud-config-view .table-wrap {
  max-width: 100%;
}
.cloud-config-view .panel-head {
  flex-wrap: wrap;
  gap: 8px;
}
.cloud-config-view .panel-head > div:first-child {
  flex: 1 1 220px;
  min-width: 0;
}
.cloud-config-view .panel-head > .button {
  flex: none;
  white-space: nowrap;
}
.cloud-config-table td,
.cloud-config-table th,
.cloud-config-section .panel-head > div {
  overflow-wrap: anywhere;
}
.cloud-config-section[data-section='firewall_policies'] .cloud-config-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
/* 칸: 순서 · 정책 · 출발지 · → · 목적지 · 서비스 · 결과 · 단추 (Portal 과 같은 순서) */
.cloud-firewall-table thead th:nth-child(1) { width: 48px; }
.cloud-firewall-table thead th:nth-child(2) { width: 20%; }
.cloud-firewall-table thead th:nth-child(3) { width: 22%; }
.cloud-firewall-table thead th:nth-child(4) { width: 28px; }
.cloud-firewall-table thead th:nth-child(5) { width: 22%; }
.cloud-firewall-table thead th:nth-child(6) { width: 14%; }
.cloud-firewall-table thead th:nth-child(7) { width: 76px; }
.cloud-firewall-table thead th:nth-child(8) { width: 56px; }
.cloud-firewall-table td { overflow-wrap: anywhere; }
.cloud-config-section[data-section='firewall_policies'] .cloud-row-actions {
  min-width: 0;
}
.cloud-config-section[data-section='firewall_policies'] .table-wrap { overflow: visible; }
.cloud-config-section-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cloud-row-order { display: inline-flex; gap: 3px; vertical-align: middle; }
.cloud-row-order[hidden] { display: none; }
.cloud-lb-flow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cloud-lb-flow > div { min-width: 0; overflow-wrap: anywhere; }
.cloud-lb-flow > span { color: var(--muted); flex: none; }
.cloud-lb-flow-backends { font-family: var(--mono); font-size: var(--fs-caption); }
.cloud-lb-policy-table { width: 100%; table-layout: fixed; }
.cloud-lb-policy-table th:first-child { width: 45%; }
.cloud-lb-policy-table th:last-child { width: 115px; }
.cloud-lb-policy-table td { overflow-wrap: anywhere; }
.cloud-table-scroll-hint {
  margin: 0 20px 6px;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.cloud-config-section .table-wrap:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.cloud-pair-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cloud-protection {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
}
.cloud-pending {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
  font-size: var(--fs-micro);
  font-weight: 700;
}
.cloud-back {
  margin-bottom: 8px;
}
.cloud-config-status small {
  color: var(--muted);
  font-size: var(--fs-micro);
}
.cloud-config-status .cloud-drift-cell {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cloud-config-maintenance { position: relative; }
.cloud-config-maintenance > summary { list-style: none; cursor: pointer; }
.cloud-config-maintenance > summary::-webkit-details-marker { display: none; }
.cloud-config-maintenance > p {
  max-width: 270px;
  margin: 8px 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}
.cloud-op-problem { margin-bottom: 18px; }
.cloud-op-problem > summary { cursor: pointer; color: var(--critical); font-weight: 700; }
.cloud-op-problem > .cloud-problem { margin: 8px 0; }
.cloud-config-head-menu { position: relative; }
.cloud-config-head-menu > summary { list-style: none; cursor: pointer; }
.cloud-config-head-menu > summary::-webkit-details-marker { display: none; }
.cloud-config-head-menu-list {
  position: absolute;
  right: 0;
  z-index: 25;
  display: grid;
  gap: 4px;
  min-width: 148px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.cloud-config-head-menu-list .button { justify-content: flex-start; white-space: nowrap; }
.cloud-config-pending {
  display: flex !important;
  flex: 1 1 280px;
  min-width: 0;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.cloud-config-pending p {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
  color: var(--warning);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .cloud-config-layout {
    display: block;
  }
  .cloud-config-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    max-width: 100%;
    margin-bottom: 12px;
    scrollbar-width: thin;
  }
  .cloud-config-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .cloud-config-nav-item.is-active {
    box-shadow: inset 0 -3px 0 var(--blue);
  }
}
/* 장비 상태(drift)와 진행 중인 작업. 색은 뜻만 싣는다: 초록 일치, 빨강 불일치, 주황 확인 못 함. */
.cloud-drift-actions {
  display: flex;
  gap: 6px;
}
.cloud-drift-in_sync,
.cloud-op-succeeded {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.cloud-drift-drifted,
.cloud-op-failed {
  background: color-mix(in srgb, var(--critical) 14%, transparent);
  color: var(--critical);
}
.cloud-drift-unknown,
.cloud-drift-stale,
.cloud-op-pending,
.cloud-op-running {
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  color: var(--warning);
}
.cloud-op-cell span:not(.badge) {
  font-weight: 700;
}
.cloud-op-problem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin: -8px 0 18px;
}
.cloud-op-problem > .cloud-problem {
  flex: 1 1 360px;
  margin: 0;
}
.cloud-drift-nodes {
  margin: 8px 0;
  padding-left: 18px;
}
.cloud-drift-nodes li + li {
  margin-top: 8px;
}
.cloud-config-section {
  margin-bottom: 18px;
}
.cloud-config-section .table-wrap,
.cloud-config-section > .empty,
.cloud-config-section > .cloud-config-problems {
  margin: 0 20px 20px;
}
.cloud-config-section > .cloud-field-hint { margin: 8px 20px 14px; }
.cloud-nat-assign-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 14px 20px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: var(--fs-caption);
}
.cloud-config-table td {
  vertical-align: top;
}
.cloud-config-table td small {
  display: block;
  color: var(--muted);
  font-size: var(--fs-micro);
}
.cloud-row-problem td {
  background: color-mix(in srgb, var(--critical) 7%, var(--surface));
}
.cloud-row-problem td:first-child {
  box-shadow: inset 3px 0 0 var(--critical);
}
.cloud-row-actions {
  white-space: nowrap;
  text-align: right;
}
.cloud-row-actions .button + .button {
  margin-left: 4px;
}
.cloud-config-problems {
  display: grid;
  gap: 6px;
  padding: 10px 12px 10px 28px;
  border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent);
  border-radius: 8px;
  font-size: var(--fs-caption);
}
.cloud-config-problems small {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
}
.cloud-refs code,
.cloud-ref-choices {
  font-family: var(--mono);
  font-size: var(--fs-caption);
}
.cloud-refs code {
  display: inline-block;
  margin: 1px 2px 1px 0;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--panel-soft);
}
.cloud-tier {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
}
.cloud-tier-admin {
  background: color-mix(in srgb, var(--normal) 14%, transparent);
  color: var(--normal);
}
.cloud-tier-customer {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.cloud-config-table .cloud-tier-divider th {
  padding: 9px 12px;
  text-align: left;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.cloud-policy-default {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-caption);
}
.cloud-ref-choices {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cloud-ref-picker {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cloud-ref-picker > input {
  width: 100%;
  min-width: 0;
}
.cloud-ref-picker > small {
  color: var(--muted);
}
.cloud-ref-direct-ip {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}
.cloud-ref-direct-ip label {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-caption);
}
.cloud-ref-direct-ip input {
  width: 100%;
  min-width: 0;
}
.cloud-ref-direct-ip .button {
  flex: none;
}
.cloud-ref-direct-service {
  display: grid;
  grid-template-columns: minmax(95px, 0.65fr) minmax(0, 1.5fr) auto;
  gap: 8px;
  min-width: 0;
}
.cloud-ref-direct-service .input,
.cloud-ref-direct-service .select {
  width: 100%;
  min-width: 0;
}
@media (max-width: 480px) {
  .cloud-ref-direct-ip {
    flex-wrap: wrap;
  }
  .cloud-ref-direct-service {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .cloud-ref-direct-service .button {
    grid-column: 1 / -1;
  }
}
.cloud-ref-selected {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-height: 19px;
  min-width: 0;
  font-size: var(--fs-caption);
}
.cloud-ref-count {
  flex: none;
}
.cloud-ref-selected-summary {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cloud-ref-choices label {
  min-width: 0;
  overflow-wrap: anywhere;
  border-radius: 5px;
  padding: 3px 4px;
}
.cloud-ref-choices label:hover,
.cloud-ref-choices label:focus-within {
  background: var(--panel-soft);
}
.cloud-ref-choices label[hidden] {
  display: none;
}
.cloud-ref-choices label,
.cloud-policy-flags label,
.cloud-apply-now {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cloud-policy-flags {
  display: flex;
  gap: 18px;
  margin-top: 12px;
}
.cloud-policy-block {
  min-width: 0;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.cloud-policy-block legend {
  padding: 0 6px;
  color: var(--text);
  font-size: var(--fs-callout);
  font-weight: 700;
}
.cloud-policy-block .field {
  min-width: 0;
}
.cloud-config-sheet {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}
.cloud-config-sheet .modal {
  width: min(760px, 100%);
  max-height: 100vh;
  max-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.16);
}
.cloud-config-sheet .modal-body { padding: 18px 22px; }
.cloud-config-sheet .modal-foot { background: var(--surface); }
.cloud-policy-endpoints > .field {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.cloud-policy-endpoints > .field > label {
  font-weight: 700;
}
.cloud-lb-backends {
  min-width: 0;
}
.cloud-lb-backends > [data-cloud-lb-backends] {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}
.cloud-lb-backend-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(70px, 0.65fr) auto;
  align-items: end;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.cloud-lb-backend-row label {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: var(--fs-caption);
}
.cloud-lb-backend-row input {
  width: 100%;
  min-width: 0;
}
@media (max-width: 650px) {
  .cloud-lb-backend-row {
    grid-template-columns: minmax(0, 1fr) minmax(75px, 0.5fr);
  }
  .cloud-lb-backend-row label:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
@media (max-width: 1100px) {
  .cloud-firewall-table,
  .cloud-firewall-table tbody,
  .cloud-firewall-table tr,
  .cloud-firewall-table td { display: block; width: 100%; }
  .cloud-firewall-table thead { display: none; }
  .cloud-firewall-table tr[data-config-index] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 18px minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .cloud-firewall-table tr[data-config-index] td {
    min-width: 0;
    padding: 2px 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .cloud-firewall-table tr[data-config-index] td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(5) { grid-column: 4; grid-row: 2; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(6) { grid-column: 2 / 5; grid-row: 3; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(7) { grid-column: 5; grid-row: 1; }
  .cloud-firewall-table tr[data-config-index] td:nth-child(8) { grid-column: 5; grid-row: 2 / 4; align-self: end; }
  .cloud-firewall-table .cloud-tier-divider th { display: block; width: 100%; }
  .cloud-lb-policy-table,
  .cloud-lb-policy-table tbody,
  .cloud-lb-policy-table tr,
  .cloud-lb-policy-table td { display: block; width: 100%; }
  .cloud-lb-policy-table thead { display: none; }
  .cloud-lb-policy-table tr[data-config-index] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--line);
  }
  .cloud-lb-policy-table tr[data-config-index] td { min-width: 0; padding: 2px 0; border: 0; overflow-wrap: anywhere; }
  .cloud-lb-policy-table tr[data-config-index] td:first-child { grid-column: 1 / -1; }
  .cloud-lb-policy-table tr[data-config-index] td:last-child { text-align: right; }
}
@media (max-width: 600px) {
  .cloud-config-sheet .modal-body { padding: 14px; }
  .cloud-lb-flow { flex-wrap: wrap; gap: 4px 8px; }
  .cloud-config-status .status-callout-actions { width: 100%; }
}
.cloud-apply-now {
  margin-top: 12px;
  font-weight: 600;
}
.cloud-diff {
  display: grid;
  gap: 6px;
  margin: 8px 0 14px;
  padding-left: 18px;
}
.cloud-diff-added {
  color: var(--success);
}
.cloud-diff-changed {
  color: var(--warning);
}
.cloud-diff-removed {
  color: var(--critical);
}
/* 저장 단추를 화면 아래에 붙여 둔다. 긴 정책 표를 고치는 동안 저장할 것이 있다는 사실을 놓치지 않게. */
.cloud-config-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12);
}
.cloud-config-bar span {
  margin-right: auto;
  font-weight: 700;
}
.cloud-wide-modal .modal {
  width: min(960px, calc(100vw - 32px));
  max-width: none;
}
@media (max-width: 760px) {
  .cloud-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cloud-grid,
  .cloud-node-grid,
  .cloud-form .cloud-node-pair,
  .cloud-config-pending {
    grid-template-columns: 1fr;
  }
}

/* Gateway Pair HA 줄 (cloud-ha.js) */
.cloud-ha-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 10px;
}
.cloud-ha-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cloud-ha-summary small {
  color: var(--muted);
}
.cloud-ha-label {
  font-weight: 600;
}
.cloud-ha-healthy {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.cloud-ha-degraded,
.cloud-ha-unknown,
.cloud-ha-not-installed {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}
.cloud-ha-split-brain,
.cloud-ha-no-master {
  background: color-mix(in srgb, var(--critical) 14%, transparent);
  color: var(--critical);
}
.cloud-ha-table td:last-child {
  max-width: 320px;
  white-space: normal;
}

/* IPS (cloud-config.js 패널, cloud-ips.js 창) */
.cloud-ips-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cloud-ips-agents {
  margin-top: 10px;
}
.cloud-ips-table td:nth-child(6) {
  max-width: 320px;
  white-space: normal;
}

/* Cloud Gateway LB instances (cloud-lb.js) */
.cloud-lb-ready {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}
.cloud-lb-degraded,
.cloud-lb-drifted,
.cloud-lb-stopped,
.cloud-lb-unknown,
.cloud-lb-stale,
.cloud-lb-not-provisioned {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: var(--warning);
}
.cloud-lb-absent {
  background: color-mix(in srgb, var(--critical) 14%, transparent);
  color: var(--critical);
}
.cloud-lb-listeners {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
}
.cloud-lb-capability { margin: 12px 20px; overflow-wrap: anywhere; }
.cloud-lb-placements { display: grid; gap: 10px; margin: 0 20px 20px; }
.cloud-lb-placement {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.cloud-lb-placement-head,
.cloud-lb-placement-name,
.cloud-lb-placement-state { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.cloud-lb-placement-head { justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cloud-lb-placement-name { overflow-wrap: anywhere; }
.cloud-lb-placement-name > span[data-no-i18n] { color: var(--muted); font-size: var(--fs-caption); }
.cloud-lb-placement-state .cloud-lb-redundancy { margin: 0; }
.cloud-lb-placement-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(200px, 1fr); gap: 12px 20px; padding-top: 12px; min-width: 0; }
.cloud-lb-placement-listeners { min-width: 0; }
.cloud-lb-placement-listeners h3,
.cloud-lb-claims h3 { margin: 0 0 8px; font-size: var(--fs-caption); }
.cloud-lb-placement-listeners li { overflow-wrap: anywhere; }
.cloud-lb-placement-listeners li + li { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cloud-lb-placement-meta { display: grid; align-content: start; gap: 8px; margin: 0; min-width: 0; }
.cloud-lb-placement-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; min-width: 0; }
.cloud-lb-placement-meta dt { color: var(--muted); font-size: var(--fs-micro); }
.cloud-lb-placement-meta dd { margin: 0; font-size: var(--fs-caption); overflow-wrap: anywhere; }
.cloud-lb-placement-error { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--fs-caption); overflow-wrap: anywhere; }
.cloud-lb-placement-error > strong { color: var(--critical); }
.cloud-lb-claims { margin: 14px 20px 20px; min-width: 0; }
.cloud-lb-claims .table-wrap { margin: 0; }
@media (max-width: 900px) {
  .cloud-lb-placement-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 서버마다 한 줄. 이유가 붙으면 길어져 한 줄에 여럿을 두면 글자 중간에서 끊긴다. */
.cloud-lb-backend {
  display: block;
  margin: 2px 0;
  overflow-wrap: anywhere;
}
.cloud-lb-backend.up {
  color: var(--success);
}
.cloud-lb-backend.down {
  color: var(--critical);
}
.cloud-lb-backend.unknown {
  color: var(--muted, #6b7280);
}
.cloud-lb-backend small {
  opacity: 0.8;
}
.cloud-lb-redundancy {
  margin: 4px 0;
  font-size: var(--fs-caption);
}
.cloud-lb-redundancy.cloud-lb-ok {
  color: var(--success);
}
.cloud-lb-redundancy.cloud-lb-warn {
  color: var(--warning);
}
.cloud-lb-redundancy.cloud-lb-critical {
  color: var(--critical);
}
.cloud-lb-error small {
  display: block;
  max-width: 320px;
  white-space: normal;
}

/* Cloud page views (cloud.js) */
.cloud-tabs {
  margin-top: 4px;
}
.cloud-attention-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cloud-attention-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cloud-attention-list li small {
  display: block;
  color: var(--muted);
}
.cloud-attention-list li > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cloud-attention-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
@media (max-width: 600px) {
  .cloud-attention-list li {
    flex-direction: column;
    align-items: stretch;
  }
  .cloud-attention-actions {
    justify-content: flex-start;
  }
}
.cloud-runbook {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 14px;
  margin: 0;
}
.cloud-runbook dt {
  font-weight: 600;
  color: var(--muted);
}
.cloud-runbook dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.cloud-runbook-source {
  margin: 14px 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .cloud-runbook {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .cloud-runbook dd {
    margin-bottom: 8px;
  }
}
.cloud-attention-critical strong {
  color: var(--critical);
}
.cloud-attention-warn strong {
  color: var(--warning);
}
.cloud-agent-example pre {
  overflow-x: auto;
  font-size: var(--fs-caption);
  background: var(--surface-2, #f5f7fa);
  padding: 10px;
  border-radius: 6px;
}

/* 방화벽 정책 필터·행 메뉴·즉석 객체·검토 경고 (2026-09-26) */
.cloud-policy-filter {
  display: grid;
  gap: 8px;
  margin: 0 20px 10px;
}
.cloud-policy-direction-filters,
.cloud-policy-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cloud-policy-direction-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
}
.cloud-policy-direction-filter.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}
.cloud-policy-direction-filter:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cloud-policy-direction-filter span { font-family: var(--mono); }
.cloud-policy-search > .input { flex: 1 1 190px; min-width: 0; max-width: 320px; }
.cloud-policy-advanced { position: relative; }
.cloud-policy-advanced > summary { list-style: none; cursor: pointer; }
.cloud-policy-advanced > summary::-webkit-details-marker { display: none; }
.cloud-policy-advanced-fields {
  position: absolute;
  right: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(460px, calc(100vw - 64px));
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}
.cloud-policy-advanced-fields .input,
.cloud-policy-advanced-fields .select {
  width: 100%;
  min-width: 0;
}
.cloud-filter-note,
.cloud-policy-system {
  margin: 0 20px 10px;
}
.cloud-config-section > .cloud-config-problems[role='alert'] {
  margin: 0 20px 10px;
}
.cloud-row-menu {
  position: relative;
  display: inline-block;
  margin-left: 4px;
}
.cloud-row-menu > summary {
  list-style: none;
}
.cloud-row-menu > summary::-webkit-details-marker {
  display: none;
}
.cloud-row-menu-list {
  position: fixed;
  inset: auto;
  z-index: 20;
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: min(240px, 80vw);
  margin: 0;
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 16%);
}
.cloud-row-menu-list:not(:popover-open) {
  display: none;
}
.cloud-service-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.cloud-address-modal .modal {
  width: min(440px, calc(100vw - 32px));
}
.cloud-address-options > summary {
  margin-bottom: 12px;
  color: var(--muted);
  cursor: pointer;
}
.cloud-row-menu-list .button {
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}
.cloud-ref-choices label {
  flex-wrap: wrap;
}
.cloud-ref-name {
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.cloud-ref-detail {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  overflow-wrap: anywhere;
}
.cloud-ref-count {
  float: right;
  color: var(--muted);
}
.cloud-ref-new-toggle {
  justify-self: start;
}
.cloud-ref-new {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.cloud-ref-new[hidden] {
  display: none;
}
.cloud-ref-new label {
  display: grid;
  gap: 4px;
  font-size: var(--fs-caption);
}
.cloud-ref-new .button {
  justify-self: start;
}
.cloud-warning {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-left-width: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}
.cloud-warning > strong {
  color: var(--warning);
}
.cloud-config-warnings {
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.cloud-diff-title {
  margin: 14px 0 6px;
  font-size: var(--fs-callout);
}
.cloud-diff-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.cloud-diff-row-added td:first-child {
  box-shadow: inset 3px 0 0 var(--success);
}
.cloud-diff-row-removed td:first-child {
  box-shadow: inset 3px 0 0 var(--critical);
}
.cloud-diff-row-changed td:first-child {
  box-shadow: inset 3px 0 0 var(--normal);
}
.cloud-diff-from {
  text-decoration: line-through;
  color: var(--muted);
}
.cloud-diff-to {
  font-weight: 600;
}
.cloud-refs code {
  max-width: 100%;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .cloud-policy-search > .input { max-width: none; flex-basis: 100%; }
  .cloud-policy-advanced-fields { position: static; grid-template-columns: 1fr; width: 100%; }
}
/* 구성 화면 머리: 좁은 화면(특히 영어)에서 작업 기록·변경 이력·새로고침 단추가 화면 밖으로 밀리지 않게 한다. */
@media (max-width: 760px) {
  .cloud-config-head {
    flex-direction: column;
    gap: 10px;
  }
  .cloud-config-head .page-head-actions {
    flex-wrap: wrap;
  }
}
/* 눌 수 없는 단추가 누를 수 있어 보이면 «경고 확인 전 저장 불가» 같은 잠금이 고장처럼 보인다. */
.modal .button:disabled,
.cloud-config-section .button:disabled,
.cloud-row-actions .button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cloud-lb-step {
  margin: 16px 0 6px;
  font-size: var(--fs-callout);
  color: var(--ink);
}
.cloud-lb-network-info dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0 0 6px;
  font-size: var(--fs-caption);
}
.cloud-lb-network-info dd {
  margin: 0;
  font-family: var(--mono);
  overflow-wrap: anywhere;
}
.cloud-lb-network-info dt {
  color: var(--muted);
}
.cloud-lb-network-details,
.cloud-lb-help {
  margin: 8px 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: var(--fs-caption);
}
.cloud-lb-network-details > summary,
.cloud-lb-help > summary { cursor: pointer; font-weight: 700; }
.cloud-lb-network-details .cloud-lb-network-info,
.cloud-lb-help p { margin-top: 10px; }
.cloud-lb-bulk {
  margin-top: 10px;
}
.cloud-lb-bulk > summary {
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--blue);
}
.cloud-lb-bulk textarea {
  width: 100%;
  margin: 6px 0;
}
.cloud-lb-bulk-preview {
  margin: 6px 0;
  padding-left: 18px;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}
.cloud-lb-bulk-error {
  color: var(--critical);
}

.im-problem-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}