/* VibeCrew settings.css 분해 (보비·2026-05-30·비비 R3). cascade 순서 보존·worker→global */

/* === 전역 설정 모달 === */
.modal.vc-settings-modal {
  width: min(680px, 94vw);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--vc-r-4);
}
.vc-settings-tier-note {
  padding: 0 28px 14px;
  font-size: 11px;
  color: var(--vc-muted);
}
.vc-settings-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 28px 18px;
}
.vc-settings-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 28px 18px;
  border-top: 1px solid var(--vc-line);
  background: var(--vc-surface);
}
.vc-settings-status {
  min-width: 0;
  color: var(--vc-muted);
  font-size: 11px;
  line-height: 1.4;
}
.vc-settings-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.vc-settings-details {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-2);
  background: var(--vc-white-025);
}
.vc-settings-details > summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 13px;
  user-select: none;
  list-style: none;
}
.vc-settings-details > summary::-webkit-details-marker { display: none; }
.vc-settings-callout {
  padding: 12px;
  background: var(--vc-green-10);
  border-radius: var(--vc-r-2);
  border: 1px solid var(--vc-green-15);
  margin-bottom: 10px;
}

/* tier 뱃지 chip (라벨 우측 작은 표시) */
.vc-tier-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--vc-r-pill);
  font-size: 10px; font-weight: 600; line-height: 1;
  background: var(--vc-white-06); color: var(--vc-muted);
  letter-spacing: 0.02em;
}
.vc-tier-chip svg { width: 10px; height: 10px; }
.vc-tier-chip.is-safe { background: var(--vc-green-10); color: var(--vc-green-2); }
.vc-tier-chip.is-moderate { background: var(--vc-white-06); color: var(--vc-muted); }
.vc-tier-chip.is-dangerous { background: var(--vc-amber-15); color: var(--vc-amber); }
.vc-tier-chip.is-secret { background: var(--vc-red-10); color: var(--vc-red-2); }

/* setting item 라벨 row (key 좌측·chip 우측) */
.vc-setting-label {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.vc-setting-name {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.vc-setting-title {
  color: var(--vc-text-2);
  font-size: 12px;
  font-weight: 650;
}
.vc-setting-label code {
  color: var(--vc-muted);
  font-family: var(--vc-mono);
  font-size: 11px;
}
.vc-setting-help {
  margin-top: 5px;
  color: var(--vc-muted);
  font-size: 11px;
  line-height: 1.4;
}

/* iOS-style toggle switch */
.vc-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; vertical-align: middle;
  white-space: nowrap;
}
.vc-toggle input[type="checkbox"],
.modal .vc-toggle input[type="checkbox"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0 !important; padding: 0 !important; margin: -1px !important;
  background: transparent !important;
}
.vc-toggle-track {
  position: relative; flex-shrink: 0; display: inline-block;
  width: 38px; height: 22px; border-radius: 999px;
  background: var(--vc-white-12);
  transition: background var(--vc-fast);
}
.vc-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--vc-on-accent);
  box-shadow: 0 1px 3px var(--vc-black-30);
  transition: transform var(--vc-fast);
}
.vc-toggle input[type="checkbox"]:checked ~ .vc-toggle-track {
  background: var(--vc-blue);
}
.vc-toggle input[type="checkbox"]:checked ~ .vc-toggle-track .vc-toggle-thumb {
  transform: translateX(16px);
}
.vc-toggle-label {
  font-size: 13px; color: var(--vc-text);
  line-height: 22px;
}
.ws-section:last-child { margin-bottom: 18px; }

/* range slider */
.vc-range-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
}
.vc-range-row input[type="range"],
.modal .vc-range-row input[type="range"] {
  width: 100%;
  min-height: 18px !important;
  height: 18px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  cursor: pointer;
  outline: none;
  padding: 0 !important;
  margin: 0;
}
.vc-range-row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--vc-blue) 0%,
    var(--vc-blue) var(--vc-range-fill, 0%),
    var(--vc-white-12) var(--vc-range-fill, 0%),
    var(--vc-white-12) 100%
  );
}
.vc-range-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vc-blue);
  border: 2px solid var(--vc-surface);
  box-shadow: 0 1px 5px var(--vc-black-45);
  margin-top: -6px;
  cursor: pointer;
}
.vc-range-row input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--vc-white-12);
}
.vc-range-row input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--vc-blue);
}
.vc-range-row input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--vc-blue);
  border: 2px solid var(--vc-surface);
  box-shadow: 0 1px 5px var(--vc-black-45);
  cursor: pointer;
}
.vc-range-row .vc-range-val {
  min-width: 48px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vc-mono);
  font-size: 12px;
  color: var(--vc-text);
  background: var(--vc-white-04);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-2);
}

/* 설정 섹션 헤더 */
.vc-set-section { margin-bottom: 22px; }
.vc-set-section-title {
  font-weight: 700; font-size: 13px; color: var(--vc-text);
  margin-bottom: 2px;
}
.vc-set-section-desc {
  font-size: 11px; color: var(--vc-muted);
  margin-bottom: 10px;
}

/* 모달 헤더: 텍스트 이모지 대신 SVG 사용 */
.vc-set-modal-head {
  display: flex; align-items: center; gap: 8px;
  padding: 28px 28px 8px;
}
.vc-set-modal-head svg { width: 18px; height: 18px; color: var(--vc-text-2); }
.vc-set-modal-head h3 { margin: 0; font-size: 16px; }

@media (max-width: 640px) {
  .modal.vc-settings-modal {
    width: 100%;
    max-height: calc(100svh - max(10px, env(safe-area-inset-top)));
    border-radius: var(--vc-r-4) var(--vc-r-4) 0 0;
  }
  .vc-set-modal-head {
    padding: 20px 18px 8px;
  }
  .vc-settings-tier-note {
    padding: 0 18px 12px;
    line-height: 1.6;
  }
  .vc-settings-body {
    padding: 0 18px 16px;
  }
  .vc-setting-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .vc-setting-name {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .vc-range-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 10px;
  }
  .vc-settings-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  }
  .vc-settings-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .vc-settings-actions .btn {
    min-height: 44px;
  }
  #gs-bulk-body {
    overflow-x: auto;
  }
}


/* ============================================================
   Settings Page — dedicated full-screen
   디자인 토큰 (--vc-*) 만 사용. 이모지 X·SVG 만.
   ============================================================ */
.settings-page-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--vc-bg);
  display: flex; flex-direction: column;
  height: 100svh;
  overflow: hidden;
  animation: vc-fade-up var(--vc-base) var(--vc-ease-out);
}
.sp-frame { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.sp-header {
  display: flex; align-items: center; gap: var(--vc-s-3);
  padding: var(--vc-s-3) var(--vc-s-5);
  padding-top: max(var(--vc-s-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--vc-line);
  background: var(--vc-bg-2-70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
}
.sp-back {
  width: 32px; height: 32px;
  border-radius: var(--vc-r-3);
  border: 1px solid var(--vc-line-2);
  background: var(--vc-surface-2);
  color: var(--vc-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--vc-fast), border-color var(--vc-fast);
}
.sp-back:hover { background: var(--vc-blue-10); border-color: var(--vc-blue-30); }
.sp-back:focus-visible { outline: 2px solid var(--vc-blue); outline-offset: 2px; }
.sp-back-icon { width: 18px; height: 18px; display: inline-flex; }
.sp-back-icon svg { width: 100%; height: 100%; }
.sp-title {
  margin: 0;
  font-size: var(--vc-fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--vc-text);
}
.sp-header-spacer { flex: 1; }
.sp-status {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  font-variant-numeric: tabular-nums;
  min-width: 120px; text-align: right;
}
.sp-status-pending { color: var(--vc-text-2); }
.sp-status-ok { color: var(--vc-green-2); }
.sp-status-err { color: var(--vc-red-2); }

.sp-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1; min-height: 0; overflow: hidden;
}

.sp-nav {
  border-right: 1px solid var(--vc-line);
  padding: var(--vc-s-4) var(--vc-s-3);
  overflow-y: auto;
  background: var(--vc-bg-2);
  overscroll-behavior: contain;
}
.sp-nav-group { margin-bottom: var(--vc-s-4); }
.sp-nav-label {
  font-size: var(--vc-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-muted);
  padding: 0 var(--vc-s-3) var(--vc-s-2);
}
.sp-nav-item {
  display: flex; align-items: center; gap: var(--vc-s-2);
  width: 100%;
  padding: var(--vc-s-2) var(--vc-s-3);
  background: none; border: none; cursor: pointer;
  color: var(--vc-text-2);
  font-size: var(--vc-fs-sm);
  font-family: inherit;
  text-align: left;
  border-radius: var(--vc-r-3);
  transition: background var(--vc-fast), color var(--vc-fast);
  margin-bottom: 2px;
}
.sp-nav-item:hover { background: var(--vc-surface-2); color: var(--vc-text); }
.sp-nav-item.active {
  background: var(--vc-blue-10);
  color: var(--vc-blue-2);
  font-weight: 600;
}
.sp-nav-item:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: -2px;
}
.sp-nav-icon { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; }
.sp-nav-icon svg { width: 100%; height: 100%; }

.sp-content {
  overflow-y: auto;
  padding: var(--vc-s-7) var(--vc-s-7) var(--vc-s-9);
  max-width: 880px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  overscroll-behavior: contain;
}

.sp-section { margin-bottom: var(--vc-s-7); }
.sp-section-title {
  margin: 0 0 var(--vc-s-1);
  font-size: var(--vc-fs-lg);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--vc-text);
}
.sp-section-desc {
  margin: 0 0 var(--vc-s-4);
  font-size: var(--vc-fs-sm);
  color: var(--vc-muted);
  line-height: 1.5;
}
.sp-subhead {
  margin: var(--vc-s-5) 0 var(--vc-s-2);
  font-size: var(--vc-fs-sm);
  font-weight: 600;
  color: var(--vc-text);
}

.sp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vc-s-4);
  padding: var(--vc-s-4) 0;
  border-bottom: 1px solid var(--vc-line);
}
.sp-row:last-child { border-bottom: none; }
.sp-row-label { flex: 1; min-width: 0; }
.sp-row-label-main {
  font-size: var(--vc-fs-md);
  font-weight: 500;
  color: var(--vc-text);
}
.sp-row-hint {
  margin-top: 3px;
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  line-height: 1.4;
}
.sp-row-control {
  flex-shrink: 0;
  display: flex; align-items: center; gap: var(--vc-s-2);
}

.sp-input {
  padding: var(--vc-s-1) var(--vc-s-3);
  background: var(--vc-input);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  color: var(--vc-text);
  font-size: var(--vc-fs-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--vc-fast), box-shadow var(--vc-fast);
}
.sp-input:focus { border-color: var(--vc-blue); box-shadow: var(--vc-glow-blue); }
.sp-input-num { width: 100px; text-align: right; }
.sp-input-wide { width: 340px; max-width: 100%; }
.sp-input-unit {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  margin-left: 2px;
}

.sp-range { width: 160px; accent-color: var(--vc-blue); }
.sp-range-val {
  min-width: 42px; text-align: right;
  font-size: var(--vc-fs-xs);
  color: var(--vc-text-2);
}

/* iOS-style switch — 토큰 기반 */
.sp-switch {
  position: relative; display: inline-block;
  width: 40px; height: 22px;
  cursor: pointer; flex-shrink: 0;
}
.sp-switch input { opacity: 0; width: 0; height: 0; }
.sp-switch-track {
  position: absolute; inset: 0;
  background: var(--vc-line-2);
  border-radius: var(--vc-r-pill);
  transition: background var(--vc-fast);
}
.sp-switch-track::before {
  content: ''; position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--vc-text);
  border-radius: 50%;
  transition: transform var(--vc-fast);
}
.sp-switch input:checked + .sp-switch-track { background: var(--vc-blue); }
.sp-switch input:checked + .sp-switch-track::before { transform: translateX(18px); }
.sp-switch input:focus-visible + .sp-switch-track {
  outline: 2px solid var(--vc-blue);
  outline-offset: 2px;
}

/* Inline 텍스트 스타일 */
.sp-mono { font-family: var(--vc-mono); }
.sp-muted { color: var(--vc-muted); }
.sp-center { text-align: center; }
.sp-code {
  font-family: var(--vc-mono);
  font-size: var(--vc-fs-xs);
  background: var(--vc-input);
  padding: 2px 6px;
  border-radius: var(--vc-r-1);
  color: var(--vc-text-2);
}
.sp-link {
  color: var(--vc-blue-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--vc-fast);
}
.sp-link:hover { border-bottom-color: var(--vc-blue-30); }

/* Callout */
.sp-callout {
  margin-top: var(--vc-s-4);
  padding: var(--vc-s-3) var(--vc-s-4);
  border-radius: var(--vc-r-3);
  border: 1px solid var(--vc-line-2);
  background: var(--vc-surface-2);
}
.sp-callout-success { background: var(--vc-green-10); border-color: var(--vc-green-15); }
.sp-callout-info    { background: var(--vc-blue-10);  border-color: var(--vc-blue-20); }
.sp-callout-title {
  font-weight: 600;
  font-size: var(--vc-fs-sm);
  color: var(--vc-text);
  margin-bottom: var(--vc-s-2);
}
.sp-callout-text {
  font-size: var(--vc-fs-xs);
  color: var(--vc-text-2);
  line-height: 1.5;
}
.sp-callout-actions { display: flex; gap: var(--vc-s-2); flex-wrap: wrap; }

/* Loading · Error · Note · Actions */
.sp-loading {
  text-align: center;
  color: var(--vc-muted);
  padding: var(--vc-s-8);
  font-size: var(--vc-fs-sm);
}
.sp-error {
  color: var(--vc-red-2);
  background: var(--vc-red-10);
  border: 1px solid var(--vc-red-18);
  padding: var(--vc-s-3) var(--vc-s-4);
  border-radius: var(--vc-r-3);
  font-size: var(--vc-fs-sm);
}
.sp-empty {
  padding: var(--vc-s-8);
  text-align: center;
  color: var(--vc-muted);
  font-size: var(--vc-fs-sm);
}
.sp-note {
  margin-top: var(--vc-s-3);
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
}
.sp-actions {
  margin-top: var(--vc-s-4);
  display: flex; gap: var(--vc-s-2); flex-wrap: wrap;
}
.sp-btn-icon, .sp-table-btn-icon {
  width: 14px; height: 14px;
  display: inline-flex; vertical-align: middle;
  margin-right: var(--vc-s-1);
}
.sp-btn-icon svg, .sp-table-btn-icon svg { width: 100%; height: 100%; }

/* Table (sp-workers·sp-pr·sp-usage 공통) */
/* 워커 일괄 — 프로젝트 탭 (대표님 요청 2026-05-29·바비) */
.sp-proj-tabs {
  display: flex;
  gap: var(--vc-s-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--vc-line-2);
  padding-bottom: var(--vc-s-2);
  margin-bottom: var(--vc-s-4);
}
.sp-proj-tab {
  font-size: var(--vc-fs-sm);
  padding: var(--vc-s-1) var(--vc-s-3);
  border-radius: var(--vc-r-1);
  border: 1px solid var(--vc-line-2);
  background: transparent;
  color: var(--vc-muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--vc-s-1);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sp-proj-tab:hover {
  background: var(--vc-blue-10);
  border-color: var(--vc-blue-30);
  color: var(--vc-blue-2);
}
.sp-proj-tab.active {
  background: var(--vc-blue-15);
  border-color: var(--vc-blue-30);
  color: var(--vc-blue-2);
  font-weight: 700;
}
.sp-proj-tab-count {
  font-size: var(--vc-fs-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.sp-table-group {
  margin-bottom: var(--vc-s-5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.sp-table-title {
  font-weight: 700;
  font-size: var(--vc-fs-sm);
  color: var(--vc-text);
  margin-bottom: var(--vc-s-2);
}
.sp-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--vc-fs-sm);
}
.sp-table thead tr {
  background: var(--vc-surface-2);
  text-align: left;
}
.sp-table th {
  padding: var(--vc-s-2) var(--vc-s-3);
  font-size: var(--vc-fs-xs);
  font-weight: 600;
  color: var(--vc-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sp-table td {
  padding: var(--vc-s-2) var(--vc-s-3);
  border-bottom: 1px solid var(--vc-line);
  color: var(--vc-text);
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table-sub {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  margin-top: 2px;
}
.sp-table-btn {
  font-size: var(--vc-fs-xs);
  padding: var(--vc-s-1) var(--vc-s-2);
  display: inline-flex; align-items: center; gap: var(--vc-s-1);
}

/* 워커 일괄 표 — 컬럼 폭 고정·라인 정렬 + cron 상태 도트 (대표님·비비 의견) */
.sp-table--workers { table-layout: fixed; }
.sp-table--workers .sp-col-name { width: 18%; }
.sp-table--workers .sp-col-role { width: 26%; }
.sp-table--workers .sp-col-model { width: 22%; }
.sp-table--workers .sp-col-interval { width: 14%; }
.sp-table--workers .sp-col-age { width: 8%; }
.sp-table--workers .sp-col-action { width: 12%; }
.sp-table--workers td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-table--workers .sp-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table--workers .sp-cell-action { text-align: right; }
/* 모델 inline dropdown (워커 일괄 표·즉시 적용·대표님 요청 2026-05-24·바비) */
.sp-model-select {
  width: 100%;
  padding: 3px 6px;
  font-size: var(--vc-fs-xs);
  font-family: var(--vc-mono);
  background: var(--vc-surface-2);
  color: var(--vc-text);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-2);
  cursor: pointer;
}
.sp-model-select:hover { border-color: var(--vc-blue-20); }
.sp-model-select:focus { outline: none; border-color: var(--vc-blue); box-shadow: 0 0 0 2px var(--vc-blue-10); }
.sp-model-select[disabled] { opacity: 0.5; cursor: progress; }
/* cron 상태 도트 — interval 셀 prefix. 비비 의견: 모든 워커 cron_enabled=false
   인데 화면엔 interval 값 (1h·2h 등) 만 보여서 "정기 가동" 으로 오해 → 도트로 구분. */
.sp-cron-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex-shrink: 0;
}
.sp-cron-dot.on { background: var(--vc-green); box-shadow: 0 0 0 2px var(--vc-green-10); }
.sp-cron-dot.off { background: var(--vc-muted); opacity: 0.55; }
.sp-mono-off { color: var(--vc-muted); }

/* 워커 가이드 카탈로그 sub-tab (PR-3) */
.sp-gd-frame {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--vc-s-4);
  min-height: 560px;
}
.sp-gd-nav {
  display: flex; flex-direction: column;
  gap: var(--vc-s-3);
  padding-right: var(--vc-s-3);
  border-right: 1px solid var(--vc-line);
}
.sp-gd-nav-group { display: flex; flex-direction: column; gap: 2px; }
.sp-gd-nav-label {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 var(--vc-s-2);
  margin-bottom: var(--vc-s-1);
}
.sp-gd-nav-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--vc-s-2);
  padding: var(--vc-s-2) var(--vc-s-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vc-r-2);
  color: var(--vc-text-2);
  font-size: var(--vc-fs-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--vc-fast) var(--vc-ease),
              color var(--vc-fast) var(--vc-ease);
}
.sp-gd-nav-item:hover {
  background: var(--vc-blue-10);
  color: var(--vc-text);
}
.sp-gd-nav-item.active {
  background: var(--vc-blue-15);
  color: var(--vc-blue-2);
  border-color: var(--vc-blue-20);
}
.sp-gd-nav-name { flex: 1; min-width: 0; }
.sp-gd-nav-bytes {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  flex-shrink: 0;
}
.sp-gd-body { display: flex; flex-direction: column; min-width: 0; }
.sp-gd-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--vc-muted);
  font-size: var(--vc-fs-sm);
  min-height: 200px;
}
/* 모든 워커 re-sync toolbar (핸드오프 follow-up·바비) */
.sp-gd-toolbar {
  margin-top: var(--vc-s-4);
  padding-top: var(--vc-s-3);
  border-top: 1px solid var(--vc-line);
  display: flex; align-items: flex-start; gap: var(--vc-s-3);
  flex-wrap: wrap;
}
.sp-gd-resync-btn {
  flex-shrink: 0;
}
.sp-gd-resync-btn[disabled] { opacity: 0.6; cursor: progress; }
.sp-gd-resync-help {
  flex: 1; min-width: 240px;
  font-size: var(--vc-fs-xs);
  margin: 0;
  line-height: 1.5;
}
.sp-gd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--vc-s-3);
  margin-bottom: var(--vc-s-3);
  flex-wrap: wrap;
}
.sp-gd-title {
  margin: 0;
  font-size: var(--vc-fs-lg);
  color: var(--vc-text);
}
.sp-gd-path {
  margin-top: var(--vc-s-1);
  font-size: var(--vc-fs-xs);
}
.sp-gd-meta {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: var(--vc-fs-xs);
  color: var(--vc-text-2);
}
.sp-gd-trigger {
  color: var(--vc-amber-2);
  background: var(--vc-amber-10);
  padding: 2px var(--vc-s-2);
  border-radius: var(--vc-r-pill);
}
.sp-gd-tier-req {
  color: var(--vc-purple-2);
  background: var(--vc-purple-10);
  padding: 2px var(--vc-s-2);
  border-radius: var(--vc-r-pill);
}
@media (max-width: 720px) {
  .sp-gd-frame { grid-template-columns: 1fr; }
  .sp-gd-nav { border-right: none; border-bottom: 1px solid var(--vc-line); padding-right: 0; padding-bottom: var(--vc-s-3); }
}

/* 워커 공통 지침 탭 (PR var(--vc-teal-deep)) */
.sp-cp-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--vc-s-3);
  font-size: var(--vc-fs-sm);
  color: var(--vc-text-2);
  margin-bottom: var(--vc-s-3);
  flex-wrap: wrap;
}
.sp-cp-textarea {
  width: 100%;
  min-height: 480px;
  padding: var(--vc-s-3);
  background: var(--vc-input);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  color: var(--vc-text);
  font-family: var(--vc-mono);
  font-size: var(--vc-fs-sm);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--vc-fast) var(--vc-ease),
              box-shadow var(--vc-fast) var(--vc-ease);
}
.sp-cp-textarea:focus {
  border-color: var(--vc-blue);
  box-shadow: var(--vc-glow-blue);
  outline: none;
}
.sp-cp-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--vc-s-3);
  margin-top: var(--vc-s-3);
  flex-wrap: wrap;
}
.sp-cp-sync-label {
  display: inline-flex; align-items: center; gap: var(--vc-s-2);
  font-size: var(--vc-fs-sm);
  color: var(--vc-text-2);
  cursor: pointer;
}
.sp-cp-sync-label input { cursor: pointer; }
.sp-cp-action-btns {
  display: flex; gap: var(--vc-s-2);
}
.sp-cp-status {
  margin-top: var(--vc-s-3);
  padding: var(--vc-s-2) var(--vc-s-3);
  border-radius: var(--vc-r-3);
  font-size: var(--vc-fs-sm);
}
.sp-cp-status-pending {
  background: var(--vc-blue-10);
  color: var(--vc-blue-2);
}
.sp-cp-status-ok {
  background: var(--vc-green-10);
  color: var(--vc-green-2);
}
.sp-cp-status-err {
  background: var(--vc-red-10);
  color: var(--vc-red-2);
}

/* 워커 일괄 탭 — 주기 칼럼 inline edit 버튼 (PR var(--vc-green-deep) 후속 fix) */
.sp-interval-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--vc-r-2);
  padding: 2px var(--vc-s-2);
  color: var(--vc-text);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--vc-fast) var(--vc-ease),
              background var(--vc-fast) var(--vc-ease);
}
.sp-interval-btn:hover {
  border-color: var(--vc-line-2);
  background: var(--vc-blue-10);
}
.sp-interval-btn:focus-visible {
  outline: 2px solid var(--vc-blue);
  outline-offset: 2px;
}

/* Quick interval modal (워커 일괄 탭에서 주기 칼럼 클릭) */
.sp-qi-modal {
  display: flex; flex-direction: column;
  gap: var(--vc-s-4);
  width: min(420px, 92vw);
  padding: var(--vc-s-6);
}
.sp-qi-title {
  margin: 0;
  font-size: var(--vc-fs-lg);
  font-weight: 600;
  color: var(--vc-text);
}
.sp-qi-sub {
  color: var(--vc-muted);
  font-weight: 400;
  font-size: var(--vc-fs-sm);
  margin-left: var(--vc-s-2);
}
.sp-qi-help {
  margin: 0;
  color: var(--vc-text-2);
  font-size: var(--vc-fs-sm);
  line-height: 1.55;
}
.sp-qi-note {
  margin: 0;
  color: var(--vc-amber);
  font-size: var(--vc-fs-xs);
}
.sp-qi-section { display: flex; flex-direction: column; gap: var(--vc-s-3); }
.sp-qi-input {
  width: 100%;
  padding: var(--vc-s-3);
  background: var(--vc-input);
  border: 1px solid var(--vc-line-2);
  border-radius: var(--vc-r-3);
  color: var(--vc-text);
  font: inherit;
  font-size: var(--vc-fs-md);
  transition: border-color var(--vc-fast) var(--vc-ease),
              box-shadow var(--vc-fast) var(--vc-ease);
}
.sp-qi-input:focus {
  border-color: var(--vc-blue);
  box-shadow: var(--vc-glow-blue);
  outline: none;
}
.sp-qi-actions {
  display: flex; justify-content: flex-end;
  gap: var(--vc-s-2);
}

/* 주기 chip selector (대표님 요청·2026-05-24·바비)
   사용처: openSPQuickIntervalModal · openWorkerSettingsModal 의 ws-interval. */
.interval-chips {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--vc-s-2);
}
.interval-chip {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--vc-line);
  background: transparent;
  color: var(--vc-text-2);
  font-size: var(--vc-fs-xs);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--vc-fast) var(--vc-ease),
              color var(--vc-fast) var(--vc-ease),
              border-color var(--vc-fast) var(--vc-ease);
}
.interval-chip:hover {
  background: var(--vc-surface-2);
  color: var(--vc-text);
}
.interval-chip.active {
  background: var(--vc-blue-15);
  color: var(--vc-blue-2);
  border-color: var(--vc-blue-20);
  font-weight: 600;
}


/* Usage view */
.sp-usage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vc-s-3);
  margin-bottom: var(--vc-s-4);
}
.sp-usage-card {
  padding: var(--vc-s-3) var(--vc-s-4);
  background: var(--vc-surface);
  border: 1px solid var(--vc-line);
  border-radius: var(--vc-r-3);
}
.sp-usage-empty { color: var(--vc-muted); }
.sp-usage-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--vc-s-2);
}
.sp-usage-label {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sp-usage-pct {
  font-size: var(--vc-fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-usage-bar {
  height: 6px;
  background: var(--vc-line);
  border-radius: var(--vc-r-pill);
  overflow: hidden;
  margin-bottom: var(--vc-s-1);
}
.sp-usage-bar-fill { height: 100%; transition: width var(--vc-base); }
.sp-tone-ok     { color: var(--vc-green-2); background: var(--vc-green); }
.sp-tone-warn   { color: var(--vc-amber-2); background: var(--vc-amber); }
.sp-tone-danger { color: var(--vc-red-2);   background: var(--vc-red); }
.sp-usage-pct.sp-tone-ok     { background: none; }
.sp-usage-pct.sp-tone-warn   { background: none; }
.sp-usage-pct.sp-tone-danger { background: none; }
.sp-usage-meta {
  font-size: var(--vc-fs-xs);
  color: var(--vc-muted);
}

/* 모바일: nav 위로 접힘 (가로 스크롤 chip 패턴) */
@media (max-width: 720px) {
  .sp-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sp-header {
    padding-left: var(--vc-s-3);
    padding-right: var(--vc-s-3);
  }
  .sp-status {
    min-width: 0;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sp-nav {
    border-right: none;
    border-bottom: 1px solid var(--vc-line);
    padding: var(--vc-s-2) var(--vc-s-2);
    max-height: none;
    display: flex; gap: var(--vc-s-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sp-nav::-webkit-scrollbar { display: none; }
  .sp-nav-group { margin-bottom: 0; display: flex; gap: var(--vc-s-1); }
  .sp-nav-label { display: none; }
  .sp-nav-item {
    flex-shrink: 0;
    width: auto;
    min-height: 36px;
    white-space: nowrap;
    padding: var(--vc-s-1) var(--vc-s-3);
    font-size: var(--vc-fs-xs);
  }
  .sp-content { padding: var(--vc-s-4) var(--vc-s-4) var(--vc-s-8); }
  .sp-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--vc-s-3);
  }
  .sp-row-control {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .sp-range { width: min(100%, 240px); }
  .sp-usage-grid { grid-template-columns: 1fr; }
  .sp-input-wide { width: 100%; }
  .sp-gd-frame {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .sp-gd-nav {
    flex-direction: row;
    gap: var(--vc-s-1);
    padding: 0 0 var(--vc-s-2);
    border-right: 0;
    border-bottom: 1px solid var(--vc-line);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sp-gd-nav::-webkit-scrollbar { display: none; }
  .sp-gd-nav-group {
    flex-direction: row;
    flex-shrink: 0;
  }
  .sp-gd-nav-label { display: none; }
  .sp-gd-nav-item {
    white-space: nowrap;
    min-height: 36px;
  }
}

@media (max-width: 640px) {
  .modal.vc-settings-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: 100svh;
    border-radius: 0;
  }
  /* 풀스크린 모달(height:100svh)이라 헤더가 화면 최상단 = 다이나믹 아일랜드(59px)에 가려짐.
     safe-area-top 을 헤더 padding-top 에 더해 '전역 설정' 제목이 아일랜드 아래로 내려오게. (보비 2026-06-02) */
  .vc-set-modal-head {
    padding-top: max(20px, calc(env(safe-area-inset-top) + 12px));
  }
  .vc-settings-tier-note,
  .vc-settings-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .vc-settings-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  }
  .vc-settings-actions {
    width: 100%;
  }
  .vc-settings-actions .btn {
    flex: 1;
  }
}

@media (max-width: 420px) {
  .sp-title { font-size: var(--vc-fs-md); }
  .sp-content { padding-left: var(--vc-s-3); padding-right: var(--vc-s-3); }
  .sp-row-control > * { max-width: 100%; }
  .sp-input-num { width: 120px; }
  .sp-table { min-width: 560px; }
}