:root {
  --bg: #0f172a;
  --panel: #111827;
  --card: #1f2937;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #38bdf8;
  --border: rgba(255,255,255,0.10);
  --ok: #22c55e;
  --warn: #f59e0b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, sans-serif;
  background: radial-gradient(circle at top left, #164e63 0, var(--bg) 36%);
  color: var(--text);
}

.page {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0;
}

.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--border);
  background: rgba(17, 24, 39, 0.72);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}

.hero.small h1 { font-size: clamp(28px, 4vw, 44px); }

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
}

.subtitle, .storage-meta {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}

.storage-meta { font-size: 14px; }

.version, .back-link {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(56,189,248,0.12);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

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

.card {
  display: block;
  min-height: 180px;
  padding: 24px;
  color: inherit;
  text-decoration: none;
  background: rgba(31, 41, 55, 0.82);
  border: 1px solid var(--border);
  border-radius: 24px;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: rgba(56,189,248,0.65);
}

.card h2, .panel h2 { margin: 0 0 12px; }

.card p, .panel p {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.5;
}

.card code {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  color: #bae6fd;
}

.card.muted { opacity: 0.58; }

.panel {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(17, 24, 39, 0.72);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
}

.toolbar input,
.toolbar select {
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

.select-label {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

button {
  border: 1px solid var(--border);
  background: rgba(56, 189, 248, 0.12);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
}

.filter-btn.active {
  border-color: rgba(56,189,248,0.8);
  background: rgba(56,189,248,0.22);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat-card {
  padding: 18px;
  border-radius: 18px;
  background: rgba(31,41,55,0.72);
  border: 1px solid var(--border);
}

.stat-card strong {
  display: block;
  font-size: 28px;
}

.stat-card span { color: var(--muted); }

.row-button, .file-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(31, 41, 55, 0.72);
  border-radius: 16px;
}

.row-button strong, .file-row strong {
  display: block;
  word-break: break-all;
}

.row-button small, .file-row small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  word-break: break-all;
}

.badges {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  display: inline-block;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}

.badge.ok {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}

.badge.warn {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

.badge.idle {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

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

pre {
  overflow: auto;
  padding: 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
}

@media (max-width: 860px) {
  .hero, .panel-header, .row-button, .file-row {
    display: block;
  }

  .version, .back-link {
    display: inline-block;
    margin-top: 20px;
  }

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

  .stats-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .toolbar input,
  .toolbar select {
    width: 100%;
    min-width: 0;
  }

  .badges {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* =========================================================
   Sessions page patch
   - 기준원본 기능 유지
   - 상하형 레이아웃 고정
   - 카드형 summary / 상세 액션 / 파일 액션 UI 보강
   ========================================================= */

.split-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.left-panel,
.right-panel {
  width: 100%;
}

.management-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.summary-card {
  min-height: 92px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(31, 41, 55, 0.72);
  border: 1px solid var(--border);
}

.summary-card strong {
  display: block;
  font-size: 24px;
  line-height: 1.2;
  word-break: break-all;
}

.summary-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
}

.detail-scroll-area {
  max-height: 720px;
  overflow: auto;
  padding-right: 4px;
}

.file-actions {
  align-items: center;
}

.file-actions .badge {
  align-self: center;
}

.mini-btn {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.danger-btn,
.mini-btn.danger {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.36);
  color: #fecaca;
}

.row-button:hover,
.file-row:hover {
  border-color: rgba(56,189,248,0.55);
}

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

.list:empty::before,
.detail-scroll-area:empty::before {
  content: "표시할 항목이 없습니다.";
  color: var(--muted);
}

@media (max-width: 1080px) {
  .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .split-layout {
    gap: 18px;
  }

  .management-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .file-actions {
    justify-content: flex-start;
  }

  .mini-btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 520px) {
  .page {
    width: min(100% - 20px, 1120px);
    padding: 28px 0;
  }

  .hero,
  .panel {
    padding: 18px;
    border-radius: 20px;
  }

  .toolbar {
    gap: 10px;
  }

  .filters,
  .management-bar {
    width: 100%;
  }

  .filters button,
  .management-bar button {
    flex: 1 1 auto;
  }

  .summary-grid,
  .stats-row,
  .management-bar {
    grid-template-columns: 1fr;
  }

  .pagination {
    gap: 8px;
  }
}


.sync-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sync-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
  color: var(--muted);
  font-size: 13px;
}

.sync-status span:not(.badge) {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 860px) {
  .sync-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
}


/* =========================================================
   Scenario labeling patch
   - file row stacked layout
   - multi-select action bar
   - segment label editor
   ========================================================= */
.file-row-stacked {
  display: block;
}

.file-main-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.file-main-line strong {
  flex: 1 1 auto;
  min-width: 0;
}

.file-check {
  flex: 0 0 auto;
  padding-top: 2px;
}

.file-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.file-meta-line {
  margin-top: 8px;
}

.file-actions-row {
  justify-content: flex-start;
  margin-top: 12px;
}

.selection-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(56,189,248,0.28);
  border-radius: 18px;
  background: rgba(56,189,248,0.08);
}

.selection-info strong,
.selection-info span {
  display: block;
}

.selection-info span {
  margin-top: 6px;
  font-size: 13px;
}

.selection-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.label-editor {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.46);
}

.label-editor-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.label-editor-header h3 {
  margin: 0 0 8px;
}

.label-editor-header p {
  margin: 0;
  color: var(--muted);
}

.label-file-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.label-file-chip {
  display: grid;
  grid-template-columns: 42px 92px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(31,41,55,0.62);
}

.label-file-chip small {
  color: var(--muted);
  word-break: break-all;
}

.label-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.label-table-wrap {
  overflow-x: auto;
}

.label-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.label-table th,
.label-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.label-table input,
.label-table select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

@media (max-width: 860px) {
  .selection-bar,
  .label-editor-header {
    display: block;
  }

  .selection-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .label-editor-header button {
    margin-top: 12px;
  }

  .label-file-chip {
    grid-template-columns: 34px 82px minmax(0, 1fr);
  }
}


/* =========================================================
   Real file time display patch
   - 파일명 YYYYMMDD_HHMM 기반 실제 시간 보조 표시
   - 기존 상대시간/저장 로직은 변경하지 않음
   ========================================================= */
.label-file-chip-time span {
  display: grid;
  gap: 3px;
}

.label-file-chip-time span b {
  font-size: 13px;
  color: var(--text);
}

.label-file-chip-time span em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}


/* =========================================================
   Datetime label input patch
   - 실제 날짜/시간 입력 폭 보강
   ========================================================= */
.label-table th:nth-child(1),
.label-table th:nth-child(2),
.label-table td:nth-child(1),
.label-table td:nth-child(2) {
  min-width: 190px;
}

.label-file-chip-time {
  grid-template-columns: 42px 150px minmax(0, 1fr);
}

@media (max-width: 860px) {
  .label-file-chip-time {
    grid-template-columns: 34px 132px minmax(0, 1fr);
  }
}


/* =========================================================
   Index menu patch
   - Infrastructure 카드 통합
   - Datasets 카드 추가 대응
   ========================================================= */
.infrastructure-card .card-code-list {
  display: grid;
  gap: 8px;
}

.infrastructure-card code {
  width: fit-content;
}

/* =========================================================
   File bulk selection patch
   - 현재 페이지/검색결과 전체 선택
   ========================================================= */
.file-bulk-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.file-bulk-info strong,
.file-bulk-info span {
  display: block;
}

.file-bulk-info span {
  margin-top: 6px;
  font-size: 13px;
}

.file-bulk-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 860px) {
  .file-bulk-actions {
    display: block;
  }

  .file-bulk-buttons {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* =========================================================
   Labeling usability patch
   - datetime input/download/Korean label support
   ========================================================= */
.label-editor-actions button {
  white-space: nowrap;
}

.label-table input[type="datetime-local"] {
  min-width: 185px;
}

.label-table select {
  min-width: 104px;
}


/* =========================================================
   Segment numbering patch
   - 세그먼트 입력 행 번호 표시
   ========================================================= */
.segment-no-col,
.segment-no-cell {
  width: 52px;
  min-width: 52px;
  text-align: center !important;
}

.segment-no-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(56,189,248,0.16);
  color: #bae6fd;
  font-weight: 800;
  font-size: 13px;
}

.label-table input[type="datetime-local"] {
  min-width: 185px;
}

.label-table select {
  min-width: 112px;
}


/* =========================================================
   Label table width balance patch
   - 메모 칸 여유를 시작/종료 datetime 표시 폭으로 재배분
   - 기능/JS 변경 없음
   ========================================================= */
.label-table-wrap {
  overflow-x: hidden;
}

.label-table th,
.label-table td {
  padding-left: 6px;
  padding-right: 6px;
}

.segment-no-col,
.segment-no-cell {
  width: 32px !important;
  min-width: 32px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.segment-no-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 12px;
}

.label-table th:nth-child(2),
.label-table td:nth-child(2),
.label-table th:nth-child(3),
.label-table td:nth-child(3) {
  width: 218px;
  min-width: 218px;
}

.label-table th:nth-child(4),
.label-table td:nth-child(4) {
  width: 108px;
  min-width: 108px;
}

.label-table th:nth-child(5),
.label-table td:nth-child(5) {
  width: 72px;
  min-width: 72px;
}

.label-table th:nth-child(6),
.label-table td:nth-child(6) {
  width: 126px;
  min-width: 126px;
}

.label-table th:nth-child(7),
.label-table td:nth-child(7) {
  width: auto;
  min-width: 120px;
}

.label-table th:nth-child(8),
.label-table td:nth-child(8) {
  width: 58px;
  min-width: 58px;
}

.label-table input[type="datetime-local"] {
  font-size: 12px;
  padding-left: 6px;
  padding-right: 5px;
}

.label-table td:nth-child(7) input {
  min-width: 0;
}

.label-table td:nth-child(8) .mini-btn {
  padding-left: 7px;
  padding-right: 7px;
}

/* =========================================================
   Datasets page patch
   - 라벨 완료 데이터 기반 Dataset Builder 1차 골격
   - 실제 export/slicing 로직은 다음 단계로 분리
   ========================================================= */
.datasets-card code {
  width: fit-content;
}

.dataset-stats-row {
  margin-top: 18px;
}

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

.dataset-box {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(31, 41, 55, 0.62);
}

.dataset-box h3 {
  margin: 0 0 12px;
  font-size: 16px;
}

.dataset-dist-list {
  display: grid;
  gap: 8px;
}

.dataset-dist-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.50);
}

.dataset-dist-row strong {
  word-break: break-all;
}

.dataset-dist-row span {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 800;
}

@media (max-width: 860px) {
  .dataset-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Dataset manifest creation patch
   - dry-run 이후 manifest-only dataset 생성 UI
   - 기존 Sessions UI/UX 영향 없음
   ========================================================= */
.dataset-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dataset-form-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.dataset-form-grid input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

@media (max-width: 860px) {
  .dataset-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Dataset multi-label task patch
   - task_type multi-select UI
   - manifest-only multi-label 상태 표시
   - 기존 Sessions UI 영향 없음
   ========================================================= */
.dataset-form-wide {
  grid-column: 1 / -1;
}

.task-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.42);
}

.task-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(31, 41, 55, 0.56);
  color: var(--text);
  font-size: 13px;
}

.task-check-grid input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  accent-color: var(--accent);
}

@media (max-width: 860px) {
  .task-check-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Dataset management patch
   - detail / manifest preview / archive / soft delete / restore
   - 기존 Sessions UI 영향 없음
   ========================================================= */
.dataset-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-start;
}

.dataset-detail-empty {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.32);
}

.dataset-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(31, 41, 55, 0.58);
}

.dataset-detail-head h3 {
  margin: 0 0 8px;
}

.dataset-detail-title {
  margin: 22px 0 12px;
  font-size: 17px;
}

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

.dataset-detail-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(31, 41, 55, 0.62);
}

.dataset-detail-card strong,
.dataset-detail-card span {
  display: block;
}

.dataset-detail-card strong {
  margin-bottom: 8px;
  color: var(--accent);
}

.dataset-detail-card span {
  margin-top: 4px;
  color: var(--muted);
}

.dataset-task-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dataset-manifest-box {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.42);
}

.dataset-manifest-box pre {
  max-height: 460px;
  margin: 14px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 860px) {
  .dataset-detail-head {
    display: block;
  }

  .dataset-detail-grid,
  .dataset-task-grid {
    grid-template-columns: 1fr;
  }

  .dataset-detail-head .badges {
    margin-top: 12px;
  }
}

/* =========================================================
   Security / Access Keys patch
   - mTLS 관리자 접근키 발급/이력/가이드 화면
   - 기존 페이지 UI/UX 영향 최소화
   ========================================================= */
.security-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.security-form-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.security-form-grid input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

.security-form-wide {
  grid-column: 1 / -1;
}

.security-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.security-key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.security-key-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  background: rgba(31,41,55,.62);
  min-width: 0;
}

.security-key-card code {
  white-space: normal;
  word-break: break-all;
  color: #bae6fd;
}

@media (max-width: 860px) {
  .security-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Security UI fix r2
   - Security page only
   - Prevent inline label/input collapse and long path overflow
   ========================================================= */
.security-page .security-panel {
  overflow: hidden;
}

.security-page .security-status-line {
  align-items: center;
  overflow: hidden;
}

.security-page .security-status-line span {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.security-stat-card {
  min-width: 0;
  min-height: 106px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(31,41,55,0.72);
  border: 1px solid var(--border);
}

.security-stat-card span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}

.security-stat-card strong {
  display: block;
  color: var(--text);
  font-size: 24px;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.security-note-box {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(56,189,248,0.24);
  border-radius: 14px;
  background: rgba(56,189,248,0.07);
  color: #dbeafe;
  line-height: 1.5;
  font-size: 13px;
}

.security-issue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.security-form-card,
.security-install-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.34);
}

.security-form-grid-clean {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.security-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.security-field label {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.security-field input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
}

.security-field small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.security-page .security-form-wide {
  grid-column: 1 / -1;
}

.security-result-box {
  margin: 14px 0 0;
}

.security-install-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.security-install-step {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 14px;
  background: rgba(31,41,55,0.46);
}

.security-install-step + .security-install-step {
  margin-top: 10px;
}

.security-install-step strong {
  color: #e0f2fe;
}

.security-install-step span {
  color: var(--muted);
  line-height: 1.45;
  font-size: 13px;
}

.security-install-step code {
  display: block;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(15,23,42,0.72);
  color: #bae6fd;
  word-break: break-all;
}

.security-install-step.warn {
  border-color: rgba(245,158,11,0.28);
  background: rgba(120,53,15,0.14);
}

.security-page .security-key-card {
  overflow: hidden;
}

.security-page .deployment-meta span,
.security-page .deployment-meta code {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .security-status-grid,
  .security-issue-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .security-form-grid-clean {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Security UI R3
   - Operator-focused status cards and access-key cards
   - Existing pages unaffected by .security-page scoping
   ========================================================= */
.security-page .security-stat-ok {
  border-color: rgba(34,197,94,0.32);
}

.security-page .security-stat-warn {
  border-color: rgba(245,158,11,0.34);
}

.security-page .security-stat-idle {
  border-color: rgba(148,163,184,0.18);
}

.security-stat-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.security-detail-toggle {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15,23,42,0.36);
}

.security-detail-toggle summary {
  cursor: pointer;
  color: #bae6fd;
  font-weight: 800;
}

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

.security-detail-grid div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(31,41,55,0.46);
}

.security-detail-grid span,
.security-detail-grid strong {
  display: block;
}

.security-detail-grid span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.security-detail-grid strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.security-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.security-flow div {
  padding: 13px;
  border: 1px solid rgba(56,189,248,0.18);
  border-radius: 15px;
  background: rgba(56,189,248,0.055);
}

.security-flow strong,
.security-flow span {
  display: block;
}

.security-flow strong {
  color: #7dd3fc;
  font-size: 12px;
  margin-bottom: 6px;
}

.security-flow span {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.security-key-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}

.security-key-head strong,
.security-key-head small {
  display: block;
}

.security-key-head strong {
  font-size: 17px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.security-key-head small {
  margin-top: 5px;
  color: var(--muted);
}

.security-key-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.security-key-metrics div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15,23,42,0.42);
}

.security-key-metrics span,
.security-key-metrics strong {
  display: block;
}

.security-key-metrics span {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
}

.security-key-metrics strong {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.security-key-details {
  margin: 12px 0 0;
  padding: 11px;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 13px;
  background: rgba(15,23,42,0.24);
}

.security-key-details summary {
  cursor: pointer;
  color: #bae6fd;
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 980px) {
  .security-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .security-flow,
  .security-detail-grid,
  .security-key-metrics {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Label Snapshot list patch
   - 라벨 CSV 이력 선택 시 포함 파일 자동 정렬/선택 UI
   ========================================================= */
.label-snapshot-panel {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.38);
}

.label-snapshot-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.label-snapshot-head strong,
.label-snapshot-head span {
  display: block;
}

.label-snapshot-head span {
  margin-top: 6px;
  font-size: 13px;
}

.label-snapshot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.label-snapshot-list {
  display: grid;
  gap: 10px;
}

.label-snapshot-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(31, 41, 55, 0.56);
}

.label-snapshot-card.active {
  border-color: rgba(56,189,248,0.78);
  background: rgba(56,189,248,0.10);
}

.label-snapshot-main {
  min-width: 0;
}

.label-snapshot-main strong,
.label-snapshot-main small {
  display: block;
}

.label-snapshot-main strong {
  overflow-wrap: anywhere;
}

.label-snapshot-main small {
  margin-top: 5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.label-snapshot-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .label-snapshot-head,
  .label-snapshot-card {
    display: block;
  }

  .label-snapshot-actions,
  .label-snapshot-buttons {
    justify-content: flex-start;
    margin-top: 10px;
  }
}

/* =========================================================
   Sessions data category patch
   - 환경/공간/Scenario/분류불명 탭 강조
   - 기존 필터 버튼과 충돌하지 않도록 별도 class 사용
   ========================================================= */
.session-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid rgba(56,189,248,0.24);
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.36);
}

.session-category-btn {
  position: relative;
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(31, 41, 55, 0.72);
  font-weight: 800;
}

.session-category-btn.active {
  border-color: rgba(56,189,248,0.95);
  background: rgba(56,189,248,0.24);
  color: #e0f2fe;
  box-shadow: 0 0 0 1px rgba(56,189,248,0.22), 0 10px 24px rgba(56,189,248,0.10);
}

.session-category-btn.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -7px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

@media (max-width: 720px) {
  .session-category-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Infrastructure card dashboard patch
   - API/저장/백엔드 흐름 변경 없음
   - 기존 /api/health, /api/system/gpu, /api/storage/status 표시만 카드형으로 정리
   ========================================================= */
.infra-dashboard-panel {
  overflow: hidden;
}

.infra-summary-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(15, 23, 42, 0.50));
}

.infra-summary-card strong {
  color: #f8fafc;
  font-size: 15px;
}

.infra-summary-card span:not(.badge) {
  color: var(--muted);
  font-size: 13px;
}

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

.infra-status-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(31, 41, 55, 0.66);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.infra-status-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.52);
}

.infra-status-card.is-ok {
  border-color: rgba(34, 197, 94, 0.30);
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.08), rgba(31, 41, 55, 0.68));
}

.infra-status-card.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(31, 41, 55, 0.68));
}

.infra-status-card.is-loading {
  border-color: rgba(148, 163, 184, 0.18);
}

.infra-status-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.infra-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.44);
  font-size: 22px;
}

.infra-status-card-title h3 {
  margin: 0;
  font-size: 20px;
  color: #f8fafc;
}

.infra-status-card-title p {
  margin: 7px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.infra-metric-list {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.infra-metric-row {
  display: grid;
  grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.44);
}

.infra-metric-row span {
  color: var(--muted);
  font-size: 12px;
}

.infra-metric-row strong {
  min-width: 0;
  color: #e0f2fe;
  font-size: 13px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infra-metric-row.is-error strong {
  color: #fcd34d;
  white-space: normal;
  overflow-wrap: anywhere;
}

.infra-detail-box {
  margin-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.22);
  padding-top: 12px;
}

.infra-detail-box summary {
  cursor: pointer;
  color: #bae6fd;
  font-size: 12px;
  font-weight: 800;
}

.infra-detail-box pre {
  max-height: 220px;
  margin: 10px 0 0;
  font-size: 12px;
}

.infra-status-card code {
  display: inline-block;
  max-width: 100%;
  margin-top: 12px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.62);
  color: #bae6fd;
  font-size: 12px;
  white-space: normal;
  word-break: break-all;
}

@media (max-width: 980px) {
  .infra-card-grid {
    grid-template-columns: 1fr;
  }

  .infra-metric-row {
    grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1.4fr);
  }
}

@media (max-width: 520px) {
  .infra-summary-card {
    display: grid;
    align-items: start;
  }

  .infra-metric-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .infra-metric-row strong {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}