/* =============================================
   Workspace v4 — Components
   Sprint sprint/workspace-redesign-v4 (Stage W2)

   Provides:
     - .ws-strip — sheet rendering 영역 좌상단 indicator strip
     - .ws-strip-stat / .ws-strip-progress — strip 내부 요소
     - sidebar bridging — 기존 .sidebar 에 v4 토큰 미세 적용
   ============================================= */

/* ---------------------------------------------
   Unified strip — W3 통합 컨테이너
   workspace-header 와 sheet status가 하나로 합쳐진 메인 영역 상단 바.
   [좌] info 그룹: 햄버거 + 파일명/행/시트/번역/진행률
   [우] actions 그룹: TM 컨트롤 / 사전번역 / 퍼지·부분 / 컨텍스트 패널 / 저장
   --------------------------------------------- */
.workspace-v4 .ws-strip {
  flex-shrink: 0;
  background: var(--ws-c-0);
  border-bottom: 1px solid var(--ws-c-200);
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--ws-c-700);
  z-index: var(--ws-z-strip);
  min-height: var(--ws-strip-h);
  flex-wrap: wrap;  /* 좁은 폭에서 좌/우 그룹 자연스러운 wrap */
}

/* 두 그룹: 좌(info) / 우(actions) — info와 actions 사이 간격 작게 */
.workspace-v4 .ws-strip-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.workspace-v4 .ws-strip-info {
  flex: 0 0 auto;  /* content 크기만 (auto-expand 제거 — gap 축소) */
  min-width: 0;
}
.workspace-v4 .ws-strip-actions {
  flex: 0 0 auto;
  gap: 0.5rem;
  margin-left: 1rem;  /* info 옆에 작은 gap */
}
/* 컨텍스트 패널 + 저장 버튼: natural flow + 작은 gap.
   ⚠️ 이전엔 margin-left: auto 로 우측 anchor 였지만 flex-wrap 시 short line에서
   거대한 gap 발생 → natural flow로 변경. 모든 viewport에서 일관된 간격 유지. */
.workspace-v4 .ws-strip-actions .ws-strip-save-group {
  margin-left: 0.25rem;
}

.workspace-v4 .ws-strip-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.workspace-v4 .ws-strip-stat strong {
  color: var(--ws-c-900);
  font-weight: 700;
}
.workspace-v4 .ws-strip-stat .ws-strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ws-success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  animation: ws-strip-pulse 2s ease-in-out infinite;
}
@keyframes ws-strip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.workspace-v4 .ws-strip-stat i {
  font-size: 0.85rem;
  color: var(--ws-c-500);
}

/* 인라인 % 표현 — "번역 X (Y.Y%)" 형식. progress bar 제거 후 도입 */
.workspace-v4 .ws-strip-pct-inline {
  margin-left: 0.2rem;
  color: var(--ws-accent-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
}
.workspace-v4 #ws-strip-progress-text {
  font-variant-numeric: tabular-nums;
}

/* Tablet: strip group 들이 자연스럽게 wrap. min-width로 끊어짐 방지 */
@media (max-width: 1024px) {
  .workspace-v4 .ws-strip {
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
  }
  .workspace-v4 .ws-strip-actions {
    margin-left: 0;  /* wrap 시 좌측 정렬 */
    width: 100%;
    justify-content: flex-start;
  }
  /* 임계값 input 좁은 폭에서 ellipsis */
  .workspace-v4 .ws-strip-threshold {
    flex-wrap: wrap;
  }
}

/* 데스크탑 default — full label visible, short label hidden.
   2026-05-26: textless icon-only → 축약 label (label-full / label-short dual-span) 패턴. */
.workspace-v4 .ws-strip-btn-text .label-short {
  display: none;
}
.workspace-v4 .ws-strip-btn-text .label-full {
  display: inline;
}

/* Mobile: 축약 label 표시 (full hide → short inline). icon + 축약 텍스트 모두 visible. */
@media (max-width: 768px) {
  .workspace-v4 .ws-strip {
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
  }
  .workspace-v4 .ws-strip-btn {
    padding: 0.375rem 0.5rem;
    /* 2026-05-26: min-width/min-height 제거 — 축약 label 이 button width 보장.
       이전 패턴 (icon-only + 44px 정사각형) 의 height 비정상 증가 (1.5×) 해소. */
    justify-content: center;
  }
  /* 4 button 의 ws-strip-btn-text 안에서 full → short 전환 */
  .workspace-v4 .ws-strip-btn-text .label-full {
    display: none;
  }
  .workspace-v4 .ws-strip-btn-text .label-short {
    display: inline;
  }
  /* TM 실시간 저장 토글 라벨 축약 */
  .workspace-v4 .ws-strip-toggle .form-check-label {
    display: none;
  }
  /* version 뱃지는 모바일에서 숨김 — 공간 절약 */
  .workspace-v4 .ws-strip-save-group #current-version-display {
    display: none;
  }
}

/* Strip 내부의 hamburger trigger — 모바일에서만 left edge에 노출 */
.workspace-v4 .ws-strip-info > .ws-drawer-trigger {
  margin-left: -0.375rem;
  margin-right: 0.25rem;
  flex-shrink: 0;
}

/* 시각 구분자 — info ↔ actions / TM ↔ context-panel 사이 "|" (1번째 strip) */
.workspace-v4 .ws-strip-sep,
.workspace-v4 .ws-toolbar-sep {
  color: var(--ws-c-300);
  font-weight: 300;
  font-size: 0.85rem;
  user-select: none;
  margin: 0 0.125rem;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
/* editor-toolbar 안에서 약간의 좌우 여백 추가 */
.workspace-v4 .editor-toolbar .ws-toolbar-sep {
  margin: 0 0.3rem;
}

/* Strip 좌측의 전체 보기 토글 — fixed 정사각형 (icon-only).
   ⚠️ Bootstrap Icons 의 일부 glyph (bi-arrows-angle-contract 등) 는 baseline/metric이
   비대칭이라 flex centering 만으론 좌측 편향. absolute positioning + transform 으로 강제 중앙. */
.workspace-v4 .ws-strip-fullview {
  position: relative !important;
  width: 1.75rem !important;
  height: 1.75rem !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  display: inline-block !important;
  flex-shrink: 0;
  text-align: center;
  vertical-align: middle;
}
.workspace-v4 .ws-strip-fullview i {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  line-height: 1;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile — 동일 정사각형 + touch target 고려 (1.75rem ≈ 28px, touch 권장 44px 미달이지만
   strip은 기존 대시보드/엑셀 이미 그 사이즈라 일관성 우선) */
@media (max-width: 768px) {
  .workspace-v4 .ws-strip-fullview {
    width: 2rem !important;
    height: 2rem !important;
  }
}

/* ---------------------------------------------
   Strip-actions 내부 요소들 — TM 컨트롤 + 토글 + 임계값 + 저장
   --------------------------------------------- */

/* TM expand toggle button — 기본 collapsed, 클릭 시 ws-strip-tm-collapse 펼침 */
.workspace-v4 .ws-strip-tm-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--ws-c-200);
  border-radius: var(--ws-r-sm);
  background: var(--ws-c-0);
  color: var(--ws-c-700);
  cursor: pointer;
  transition: all var(--ws-tx-fast);
}
.workspace-v4 .ws-strip-tm-expand:hover {
  border-color: var(--ws-accent);
  color: var(--ws-accent-strong);
}
.workspace-v4 .ws-strip-tm-expand-icon { font-size: 0.85rem; }
.workspace-v4 .ws-strip-tm-expand-chevron {
  font-size: 0.7rem;
  transition: transform var(--ws-tx-base);
}
.workspace-v4 .ws-strip-actions[data-ws-tm-expanded="true"] .ws-strip-tm-expand {
  background: var(--ws-accent-dim);
  border-color: var(--ws-accent);
  color: var(--ws-accent-strong);
}
.workspace-v4 .ws-strip-actions[data-ws-tm-expanded="true"] .ws-strip-tm-expand-chevron {
  transform: rotate(180deg);
}

/* TM collapse 영역 — 기본 hidden, expanded 시 inline-flex */
.workspace-v4 .ws-strip-tm-collapse {
  display: none;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.workspace-v4 .ws-strip-actions[data-ws-tm-expanded="true"] .ws-strip-tm-collapse {
  display: inline-flex;
}

/* TM On status indicator dot (workspace-header 의 status-indicator 리유즈) */
.workspace-v4 .ws-strip-tm-dot.status-ready {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ws-success);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  display: inline-block;
}
.workspace-v4 .tm-status-indicator {
  font-size: 0.75rem;
  color: var(--ws-c-700);
  font-weight: 500;
}

/* 2026-05-08: 편집 이력 button — mint primary 톤앤매너 (프로젝트 design system 정렬).
   button outline + leading icon (bi-stars sparkle) 모두 --ws-accent (mint) 로 통일.
   Bootstrap btn-outline-warning 기본 색상은 ID selector 로 완전 override. */

/* leading sparkle icon — mint accent + glow */
.workspace-v4 #toggle-edit-history .ws-strip-eh-icon {
  color: var(--ws-accent);                                    /* #00d4aa mint */
  filter: drop-shadow(0 0 2px var(--ws-accent-glow));         /* rgba(0,212,170,0.18) */
  transition: color 0.15s, filter 0.15s;
}
.workspace-v4 #toggle-edit-history:hover .ws-strip-eh-icon,
.workspace-v4 #toggle-edit-history.active .ws-strip-eh-icon {
  color: #ffffff;                                             /* hover 시 button bg 가 mint 가 되므로 icon 은 흰색 */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

/* button outline override — Bootstrap btn-outline-warning 의 노랑 → mint */
.workspace-v4 #toggle-edit-history.btn-outline-warning {
  color: var(--ws-accent-strong);                             /* #00a080 가독성 위해 darker */
  border-color: var(--ws-accent);                             /* #00d4aa mint outline */
  background-color: transparent;
}
.workspace-v4 #toggle-edit-history.btn-outline-warning:hover,
.workspace-v4 #toggle-edit-history.btn-outline-warning:focus,
.workspace-v4 #toggle-edit-history.btn-outline-warning.active {
  color: #ffffff;
  background-color: var(--ws-accent);
  border-color: var(--ws-accent);
  box-shadow: 0 0 0 0.2rem var(--ws-accent-dim);              /* mint focus ring */
}

/* TM 실시간 저장 toggle — Bootstrap form-switch 보존 + v4 토큰 */
.workspace-v4 .ws-strip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  min-height: 0;
}
.workspace-v4 .ws-strip-toggle .form-check-input {
  margin: 0;
  cursor: pointer;
}
.workspace-v4 .ws-strip-toggle .form-check-label {
  font-size: 0.75rem;
  color: var(--ws-c-700);
  cursor: pointer;
  margin: 0;
}

/* Strip 안의 button 공통 sizing — Bootstrap btn-sm 인 채로 v4 톤 적용 */
.workspace-v4 .ws-strip-btn {
  font-size: 0.7rem;
  padding: 0.3rem 0.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.workspace-v4 .ws-strip-btn i { font-size: 0.8125rem; }
.workspace-v4 .ws-strip-btn-text { display: inline; }

/* TM 사전번역 button — 보다 강조 (success 톤 유지, 좀 더 두껍게) */
.workspace-v4 .ws-strip-actions #tm-pretranslate-btn {
  border-width: 1.5px;
}

/* TM 임계값 컨테이너 — 퍼지/부분 input cluster */
.workspace-v4 .ws-strip-threshold {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--ws-c-700);
}
.workspace-v4 .ws-strip-threshold > * { margin: 0; }
.workspace-v4 .ws-strip-threshold .form-check-input {
  margin: 0;
  cursor: pointer;
}
.workspace-v4 .ws-strip-threshold label {
  cursor: pointer;
  font-weight: 500;
  user-select: none;
}
.workspace-v4 .ws-strip-threshold input[type="number"] {
  width: 50px;
  padding: 0.15rem 0.3rem;
  font-size: 0.7rem;
  border-radius: var(--ws-r-sm);
  border: 1px solid var(--ws-c-300);
  background: var(--ws-c-0);
  color: var(--ws-c-900);
  font-variant-numeric: tabular-nums;
}
.workspace-v4 .ws-strip-threshold input[type="number"]:disabled {
  background: var(--ws-c-100);
  color: var(--ws-c-400);
  cursor: not-allowed;
}
.workspace-v4 .ws-strip-threshold input[type="number"]:focus {
  outline: none;
  border-color: var(--ws-accent);
  box-shadow: 0 0 0 2px var(--ws-accent-dim);
}
.workspace-v4 .ws-strip-pct {
  font-size: 0.65rem;
  color: var(--ws-c-500);
  margin-right: 0.125rem;
}

/* 저장 dropdown — btn-group 의 dropdown 화살표 정렬 */
.workspace-v4 .ws-strip-save-group .dropdown-toggle::after {
  margin-left: 0.375rem;
}

/* ---------------------------------------------
   Sidebar title — workspace-header 의 페이지 제목이 이동된 위치
   프로젝트 아코디언 상단에 sticky 헤더로 작용
   --------------------------------------------- */
.workspace-v4 .ws-sidebar-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0.875rem 0.75rem;
  border-bottom: 1px solid var(--ws-c-100);
  background: var(--ws-c-0);
  position: sticky;
  top: 0;
  z-index: 1;
}
.workspace-v4 .ws-sidebar-title-icon {
  font-size: 1.25rem;
  color: var(--ws-accent);
  flex-shrink: 0;
}
.workspace-v4 .ws-sidebar-title-text {
  flex: 1;
  min-width: 0;
}
.workspace-v4 .ws-sidebar-title-h {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ws-c-900);
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-v4 .ws-sidebar-title-sub {
  font-size: 0.7rem;
  color: var(--ws-c-500);
  margin: 0.125rem 0 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------
   Sidebar bridging — 기존 .sidebar { width:300px } 룰을 그대로 사용.
   grid track도 300px로 통일됨 (tokens.css --ws-sidebar-w: 300px).
   ⚠️ width:auto 로 override 하면 그리드 stretch가 깨져서 content 크기로
       shrink됨 (아코디언 collapsed 시 ~80px). 절대 override 금지.
   ⚠️ min-width:0 로 grid item의 default min-content auto-expansion 차단.
       워크북 로드 시 sheet-tabs(9+개)의 min-content가 ~700px → 트랙 확장 버그.
   --------------------------------------------- */
.workspace-v4 .ws-sidebar.sidebar {
  background: var(--ws-c-0);  /* width 손대지 않음 — .sidebar { width:300px } 그대로 */
  min-width: 0;  /* CSS Grid item: track expansion 차단 */
}
.workspace-v4 .sidebar-section {
  border-bottom-color: var(--ws-c-100);
}

/* sheet-tabs — 좁은 사이드바(300px)에서 9+개 탭이 가로 스크롤 대신 wrap 으로 노출.
   기존 .sheet-tabs { display: flex; overflow-x: auto } 보존하면서 v4 안에서만 wrap. */
.workspace-v4 .sheet-tabs {
  flex-wrap: wrap;
  overflow-x: visible;  /* wrap 시 가로 스크롤 불필요 */
}
.workspace-v4 .sheet-tab {
  font-size: 0.7rem;  /* 좁은 폭에 맞춰 약간 축소 */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------
   Container height — base.html GNB(60-80px) 위에 nested된 경우
   layout-shell.css의 .workspace-v4 { height: 100dvh }는 standalone preview용.
   workspace.html에서는 .workspace-container와 dual class라 calc() 유지.
   --------------------------------------------- */
.workspace-v4.workspace-container {
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  min-height: 1000px;
  overflow: hidden;  /* layout-shell의 100dvh 룰 override 시에도 overflow 동일하게 */
}

/* ---------------------------------------------
   W3 transitional — editor-toolbar mobile guard
   editor-toolbar는 후속 단계에서 v4 toolbar로 교체 예정.
   그때까지 모바일에서 가로 스크롤로 깨짐 차단.
   (workspace-header는 W3에서 제거됨 → 관련 룰 삭제)
   --------------------------------------------- */
@media (max-width: 1024px) {
  .workspace-v4 .editor-toolbar {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .workspace-v4 .editor-toolbar > * {
    flex-shrink: 0;
  }
  .workspace-v4 .editor-toolbar .btn {
    white-space: nowrap;
  }
}

/* breadcrumb-nav 빈 상태 — padding 0 으로 압축 (placeholder 영향 제거) */
.workspace-v4 #breadcrumb-nav:empty {
  padding: 0 !important;
}

/* breadcrumb-nav도 모바일에서 좁은 폭에 맞게 */
@media (max-width: 768px) {
  .workspace-v4 #breadcrumb-nav {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---------------------------------------------
   GNB ↔ 본문 사이 시각 구분 stripe (안 C)
   12px zinc 50 + 상단 3px mint subtle gradient + 하단 1px border
   "빈 공간" 이 아니라 "의도된 구분 띠" 로 시각 정리
   --------------------------------------------- */
.workspace-v4 .ws-gap-stripe {
  flex-shrink: 0;
  height: 12px;
  background: var(--ws-c-50);
  border-bottom: 1px solid var(--ws-c-200);
  position: relative;
  pointer-events: none;
}
.workspace-v4 .ws-gap-stripe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(180deg, var(--ws-accent-dim) 0%, transparent 100%);
}

/* ---------------------------------------------
   Legacy progress 마크업 hide — workspace_progress.js가 동적 삽입하는
   #progress-inline (파일 0/X | 시트 0/Y) 시각만 숨김.
   JS 데이터 흐름은 strip-mirror.js가 v4 strip 요소로 brideg.
   --------------------------------------------- */
.workspace-v4 #progress-inline {
  display: none !important;
}

/* ---------------------------------------------
   Full-view 모드 — Excel/Sheets 컨벤션 따라 GNB chrome 제거하여 grid 공간 극대화.
   - body.full-view .gnb 숨김 → 상단 58px 클리어
   - main 의 padding-top: 58px 제거
   - ws-gap-stripe 숨김 (GNB 사라져 시각 분리 불필요)
   - editor-toolbar 유지 (legacy hide 무력화)
   - fullview-tools 제거 (legacy alternative)
   토글 버튼/Alt+F 로 fullview off 시 모두 자동 복원.
   --------------------------------------------- */
body.full-view {
  /* main.css 의 body { padding-top: 93.8px } (legacy navbar 보정) 무력화 →
     fullview 에선 GNB 없으므로 chrome 직하 10px 호흡 공간만 유지 */
  padding-top: 10px !important;
  margin-top: 0 !important;
}
body.full-view .gnb {
  display: none !important;
}
body.full-view main {
  padding-top: 0 !important;
}
/* fullview 에서도 gap stripe 표시 — 일반 모드와 동일 시각 구분 띠 */
/* (이전 .ws-gap-stripe { display: none } 룰 제거 — 자동 복원) */
.workspace-v4.workspace-container.full-view .editor-toolbar {
  display: flex !important;
}
.workspace-v4.workspace-container.full-view .fullview-tools {
  display: none !important;  /* legacy alternative toolbar — v4에선 불필요 */
}

/* ---------------------------------------------
   Toolbar 사이즈 통일 — strip baseline (0.7~0.75rem)에 맞춤.
   editor-toolbar(가상스크롤/편집모드/행열설정/빠른번역/상세번역 등) +
   unified-search-controls(Quick Search/Reset/Advanced/Rows pagination) 동일 size.
   --------------------------------------------- */

/* editor-toolbar 컨테이너 */
.workspace-v4 .editor-toolbar {
  font-size: 0.75rem;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  min-height: 0;
}
.workspace-v4 .editor-toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* legacy .toolbar-group { border-right: 1px solid #dee2e6 } — 풀높이 separator 무력화 */
  border-right: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* 그룹 사이 작은 | separator — 1번째 toolbar와 동일 사이즈 (0.85rem 글자) */
.workspace-v4 .editor-toolbar .toolbar-group + .toolbar-group::before {
  content: '|';
  display: inline-flex;
  align-items: center;
  color: var(--ws-c-300);
  font-weight: 300;
  font-size: 0.85rem;
  user-select: none;
  pointer-events: none;
  margin: 0 0.4rem 0 0.2rem;
  line-height: 1;
}
/* .toolbar-group-no-sep marker — 직전 그룹과 시각 묶음 (| 구분자 제거).
   가상 스크롤 ↔ 편집 모드 같은 "같은 카테고리" 토글 묶음에 사용. */
.workspace-v4 .editor-toolbar .toolbar-group + .toolbar-group.toolbar-group-no-sep::before {
  content: none;
}

/* editor-toolbar 안의 모든 버튼 (Bootstrap btn + custom btn-toolbar) */
.workspace-v4 .editor-toolbar .btn,
.workspace-v4 .editor-toolbar .btn-toolbar {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.625rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.workspace-v4 .editor-toolbar .btn i,
.workspace-v4 .editor-toolbar .btn-toolbar i {
  font-size: 0.8125rem;
}

/* 편집 모드 토글 (workspace.html 인라인 .edit-mode-toggle 룰 누름) */
.workspace-v4 .edit-mode-toggle {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.625rem !important;
  font-weight: 600;
  line-height: 1.4;
}
.workspace-v4 .edit-mode-toggle i {
  font-size: 0.8125rem;
  margin-right: 0.3rem !important;
}

/* 가상 스크롤 토글 (workspace.html 인라인 .virtual-scroll-toggle) */
.workspace-v4 .virtual-scroll-toggle {
  font-size: 0.7rem !important;
  padding: 0.3rem 0.625rem !important;
  font-weight: 600;
  line-height: 1.4;
}
.workspace-v4 .virtual-scroll-toggle i { font-size: 0.8125rem; }
.workspace-v4 .virtual-scroll-toggle .toggle-status {
  font-size: 0.6rem;
  padding: 0.05rem 0.3rem;
  margin-left: 0.25rem;
}

/* .quick-translate-container — 같은 legacy 박스 패턴 (.advanced-search-section과 동일).
   padding 0.5rem + 파란 tint → 컴팩트 + v4 중립. */
.workspace-v4 .editor-toolbar .quick-translate-container {
  padding: 0.2rem 0.4rem !important;
  gap: 0.3rem !important;
  background-color: var(--ws-c-50) !important;
  border: 1px solid var(--ws-c-200) !important;
  border-radius: var(--ws-r-sm) !important;
}

/* .quick-translate-repeat 내부 input/label — font-size 통일 */
.workspace-v4 .editor-toolbar .quick-translate-repeat .form-control {
  font-size: 0.7rem !important;
  padding: 0.2rem 0.35rem !important;
  text-align: center;
}
.workspace-v4 .editor-toolbar .quick-translate-repeat .input-group-text {
  font-size: 0.65rem !important;
  padding: 0.2rem 0.4rem !important;
  background-color: var(--ws-c-100);
  border-color: var(--ws-c-300);
  color: var(--ws-c-700);
}

/* form-select / form-control / input-group — 언어 선택, 셋 반복 input 등 */
.workspace-v4 .editor-toolbar .form-select,
.workspace-v4 .editor-toolbar .form-select-sm {
  font-size: 0.7rem;
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  height: auto;
  min-height: 0;
  background-position: right 0.4rem center;
  background-size: 12px;
}
.workspace-v4 .editor-toolbar .form-control,
.workspace-v4 .editor-toolbar .form-control-sm {
  font-size: 0.7rem;
  padding: 0.25rem 0.4rem;
  height: auto;
  min-height: 0;
}
.workspace-v4 .editor-toolbar .input-group-text {
  font-size: 0.65rem;
  padding: 0.25rem 0.4rem;
}

/* ---------------------------------------------
   extra-col-controls — "열" 라벨 + 작은 +/- 버튼.
   "열" 은 plain text (테두리/배경 없음, 일반 색상).
   "+" / "-" 만 작은 박스 + 클릭 가능. "-" 는 사용자가 추가한 열이 있을 때만 노출.
   --------------------------------------------- */
.workspace-v4 .editor-toolbar .extra-col-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0 0.25rem;
}
.workspace-v4 .editor-toolbar .extra-col-controls .ec-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ws-c-700);
  letter-spacing: -0.01em;
  margin-right: 0.1rem;
  user-select: none;
}
.workspace-v4 .editor-toolbar .extra-col-controls .ec-action {
  position: relative;  /* ec-glyph absolute centering 기준 */
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid var(--ws-c-300);
  border-radius: 4px;
  background: var(--ws-c-0);
  color: var(--ws-c-700);
  font-size: 0.85rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: background var(--ws-tx-fast), border-color var(--ws-tx-fast), color var(--ws-tx-fast);
}
/* Glyph absolute centering — flex/baseline 무관하게 bbox 정중앙 강제.
   "+"와 "−" 의 폰트별 metric 비대칭 우회. visual center 보정 -1px (수학 기호는 폰트
   상 baseline 보다 약간 위에 그려져 bbox 정렬 시 약간 아래로 보이는 현상 보정). */
.workspace-v4 .editor-toolbar .extra-col-controls .ec-action .ec-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 1px));
  line-height: 1;
  display: block;
  font-family: inherit;
  pointer-events: none;
}
.workspace-v4 .editor-toolbar .extra-col-controls .ec-action:hover {
  background: var(--ws-c-100);
  border-color: var(--ws-c-500);
  color: var(--ws-c-900);
}
.workspace-v4 .editor-toolbar .extra-col-controls .ec-action:active {
  background: var(--ws-c-200);
}
.workspace-v4 .editor-toolbar .extra-col-controls .ec-remove:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--ws-danger);
  color: var(--ws-danger);
}

/* ---------------------------------------------
   스타일 가이드 버튼 그룹 — Segmented mint pill (안 A)
   "스타일" 라벨 + 생성 · 검사 · 관리 (가운뎃점 separator). 아이콘 없음.
   --------------------------------------------- */
.workspace-v4 .editor-toolbar .style-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--ws-accent);
  border-radius: var(--ws-r-pill);
  background: transparent;
  overflow: hidden;
  height: 28px; /* was 1.7rem (27.2px) — integer px to avoid Windows Chrome sub-pixel jaggies */
  transform: translateZ(0); /* force GPU compositing for smooth border-radius on Windows */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.workspace-v4 .editor-toolbar .style-btn-group .style-label {
  font-size: 0.7rem !important;
  font-weight: 600;
  color: var(--ws-c-700);
  padding: 0 0.5rem 0 0.7rem !important;
  letter-spacing: -0.01em;
  height: 100%;
  display: inline-flex;
  align-items: center;
  /* full-height border-right/bg 제거 — 작은 inline | separator로 대체 */
  flex-shrink: 0;
}
.workspace-v4 .editor-toolbar .style-btn-group .style-action-btn {
  background: none !important;
  border: 0 !important;
  padding: 0 0.5rem !important;
  color: var(--ws-accent-strong) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
  height: 100%;
  display: inline-flex;
  align-items: center;
  transition: background var(--ws-tx-fast), color var(--ws-tx-fast);
}
.workspace-v4 .editor-toolbar .style-btn-group .style-action-btn:hover {
  background: var(--ws-accent-dim) !important;
  color: var(--ws-accent-strong) !important;
}
.workspace-v4 .editor-toolbar .style-btn-group .style-action-btn:active,
.workspace-v4 .editor-toolbar .style-btn-group .style-action-btn.active {
  background: var(--ws-accent) !important;
  color: #000 !important;
}
/* ---------------------------------------------
   워크북 내보내기 segmented pill — 사이드바 워크북 섹션 안.
   스타일 그룹과 동일 패턴 (라벨 + | + 액션 · 액션). 사이드바라 전폭으로.
   --------------------------------------------- */
.workspace-v4 .export-btn-group {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--ws-accent);
  border-radius: var(--ws-r-pill);
  background: transparent;
  overflow: hidden;
  height: 30px; /* was 1.9rem (30.4px) — integer px to avoid Windows Chrome sub-pixel jaggies */
  width: 100%;  /* 사이드바 grid d-grid 안에서 전폭 */
  transform: translateZ(0); /* force GPU compositing for smooth border-radius on Windows */
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.workspace-v4 .export-btn-group .export-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ws-c-700);
  padding: 0 0.5rem 0 0.7rem;
  letter-spacing: -0.01em;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  background: var(--ws-c-50);
}
.workspace-v4 .export-btn-group .export-label i {
  font-size: 0.8rem;
  color: var(--ws-accent-strong);
}
.workspace-v4 .export-btn-group .export-action-btn {
  background: none !important;
  border: 0 !important;
  padding: 0 0.5rem !important;
  color: var(--ws-accent-strong) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;  /* 두 액션 버튼 균등 분할 */
  transition: background var(--ws-tx-fast), color var(--ws-tx-fast);
  white-space: nowrap;
}
.workspace-v4 .export-btn-group .export-action-btn:hover {
  background: var(--ws-accent-dim) !important;
}
.workspace-v4 .export-btn-group .export-action-btn:active {
  background: var(--ws-accent) !important;
  color: #000 !important;
}
.workspace-v4 .export-btn-group .export-action-sep {
  display: inline-flex;
  align-items: center;
  color: var(--ws-c-400);
  font-weight: 700;
  font-size: 1rem;
  user-select: none;
  pointer-events: none;
  padding: 0 0.1rem;
  line-height: 1;
  position: relative;
  top: -0.05em;
}
/* "|" 첫 separator 는 더 옅게 (라벨 ↔ 액션 분리) */
.workspace-v4 .export-btn-group .export-action-sep:first-of-type {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ws-c-300);
  top: 0;
  margin: 0 0.25rem;
}

.workspace-v4 .editor-toolbar .style-btn-group .style-action-sep {
  display: inline-flex;
  align-items: center;
  color: var(--ws-c-400);  /* zinc 300 → 400 (조금 더 진하게) */
  font-weight: 700;
  font-size: 1rem;          /* 0.75 → 1rem 키움 */
  user-select: none;
  pointer-events: none;
  padding: 0 0.1rem;
  line-height: 1;
  position: relative;
  top: -0.05em;             /* 가운뎃점이 약간 baseline 위에 위치하므로 미세 보정 */
}

/* ---------------------------------------------
   Unified search controls (Quick Search / Reset / Advanced / Rows / 페이징)
   기본 grid-controls.css의 회색 box border 제거 — strip/editor-toolbar와 시각 일치
   strip/editor-toolbar 대비 추가 15% 축소 (사용자 요청 — 시각 위계).
   --------------------------------------------- */
.workspace-v4 .unified-search-controls {
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;  /* 수직 0.3 → 0.2 — 줄어든 버튼 대비 여백 축소 */
  gap: 0.4rem;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--ws-c-200) !important;  /* strip 들과 동일한 하단 구분선 */
}
.workspace-v4 .unified-search-controls .search-row {
  gap: 0.3rem;
  align-items: center;
  padding: 0;  /* 자식이 자체 padding 가지지 않도록 */
}

/* .advanced-search-section: legacy padding 8px + 파란 background/border → 컴팩트 + v4 중립 톤 */
.workspace-v4 .unified-search-controls .advanced-search-section {
  padding: 0.2rem 0.4rem !important;
  gap: 0.3rem !important;
  background-color: var(--ws-c-50) !important;
  border: 1px solid var(--ws-c-200) !important;
  border-radius: var(--ws-r-sm) !important;
}

/* .quick-search-section: padding 8px → 컴팩트 */
.workspace-v4 .unified-search-controls .quick-search-section {
  padding: 0.2rem 0.4rem !important;
  gap: 0.3rem !important;
}

/* reset-filters-wrapper / pagination-wrappers — legacy padding 제거 */
.workspace-v4 .unified-search-controls .reset-filters-wrapper {
  padding: 0;
}

/* 액션 버튼 (Search/Clear/Replace/Advanced/Reset/Quick) — toggle보다 약간 큼 (사용 빈도 높음) */
.workspace-v4 .unified-search-controls .btn {
  font-size: 0.65rem !important;
  padding: 0.25rem 0.55rem !important;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.workspace-v4 .unified-search-controls .btn i { font-size: 0.75rem; }

/* search-mode-btn (정규식/case "ㄱa") + condition-toggle (AND/OR) — 컴팩트 유지 */
.workspace-v4 .unified-search-controls .search-mode-btn,
.workspace-v4 .unified-search-controls .condition-toggle {
  font-size: 0.6rem !important;
  padding: 0.2rem 0.45rem !important;
  min-width: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.workspace-v4 .unified-search-controls .mode-icon {
  font-size: 0.62rem;
  letter-spacing: 0;
}

/* form-control / form-select 입력 + 드롭다운 — input height 일관성, font 약간 키움 */
.workspace-v4 .unified-search-controls .form-control,
.workspace-v4 .unified-search-controls .form-control-sm,
.workspace-v4 .unified-search-controls .form-select,
.workspace-v4 .unified-search-controls .form-select-sm {
  font-size: 0.66rem;  /* 10% up (0.6 → 0.66) — input + placeholder */
  padding: 0.2rem 0.4rem;
  height: auto;
  min-height: 0;
  line-height: 1.4;
}
.workspace-v4 .unified-search-controls .form-select {
  padding-right: 1.4rem;
  background-position: right 0.35rem center;
  background-size: 11px;
}

/* Placeholder 텍스트 — input과 동일 사이즈 (10% up) */
.workspace-v4 .unified-search-controls .form-control::placeholder,
.workspace-v4 .unified-search-controls input::placeholder {
  font-size: 0.66rem;
  opacity: 0.7;
}

/* 라벨 (Source/Target/Quick Search:/Column Search:/Rows:) — 10% up */
.workspace-v4 .unified-search-controls .search-label,
.workspace-v4 .unified-search-controls .column-label {
  font-size: 0.68rem;  /* 10% up (0.62 → 0.68) */
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Quick Search input은 좀 더 길게 (입력 편의) — width 비례 축소 */
.workspace-v4 .unified-search-controls #quick-search-input {
  min-width: 200px;
}

/* Pagination selector wrapper + 페이지 네비 버튼 그룹 */
.workspace-v4 .unified-search-controls .pagination-selector-wrapper,
.workspace-v4 .unified-search-controls .page-navigator-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Pagination dropdown (#pagination-selector) — Bootstrap form-select-sm 룰 누름.
   "100", "500" 등 선택값 텍스트 + 드롭다운 옵션도 10% up */
.workspace-v4 .unified-search-controls #pagination-selector,
.workspace-v4 .unified-search-controls select.form-select-sm,
.workspace-v4 .unified-search-controls .pagination-selector-wrapper select {
  font-size: 0.68rem !important;  /* 10% up (0.62 → 0.68) */
  padding: 0.2rem 1.2rem 0.2rem 0.4rem !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  background-position: right 0.3rem center !important;
  background-size: 10px !important;
  width: auto !important;
  min-width: 4.2rem;
}
.workspace-v4 .unified-search-controls #pagination-selector option {
  font-size: 0.68rem;
}

/* Page navigator 버튼 (<< < > >>) — 7% 추가 축소 (사용자 요청).
   ⚠️ grid-controls.css 의 .page-nav-btn { height: 28px } 가 명시적 height 강제 →
   v4에서 height/min-width 직접 override 필수. */
.workspace-v4 .unified-search-controls .page-nav-btn,
.workspace-v4 .unified-search-controls #page-first-btn,
.workspace-v4 .unified-search-controls #page-prev-btn,
.workspace-v4 .unified-search-controls #page-next-btn,
.workspace-v4 .unified-search-controls #page-last-btn {
  font-size: 0.58rem !important;
  height: 26px !important;            /* 28 → 26 (7% 축소) */
  min-width: 26px !important;          /* width/height 비례 정사각형 */
  padding: 0 0.37rem !important;
  line-height: 1 !important;
  font-weight: 600;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.workspace-v4 .unified-search-controls .page-nav-btn i {
  font-size: 0.65rem !important;     /* 0.7 → 0.65 */
}
.workspace-v4 .unified-search-controls .page-indicator {
  font-size: 0.62rem;  /* 1/3 같은 indicator는 그대로 — 가독성 위해 */
  font-weight: 600;
  color: var(--ws-c-700);
  font-variant-numeric: tabular-nums;
  padding: 0 0.25rem;
  min-width: 2.5rem;
  text-align: center;
}

/* search-divider — separator (Advanced ↔ Rows) */
.workspace-v4 .unified-search-controls .search-divider {
  width: 1px;
  height: 16px;
  background: var(--ws-c-200);
  margin: 0 0.25rem;
}

/* ---------------------------------------------
   Mint scope override — Bootstrap btn-primary / btn-outline-primary 등을
   .workspace-v4 안에서만 mint 토큰으로 매핑.
   다른 페이지(/admin, /pricing 등) 영향 없음.
   W3에서 v4 toolbar markup으로 가면 이 override 자체가 obsolete.
   --------------------------------------------- */

/* btn-primary → mint solid — 변수 매핑 + direct property override + !important로 brute force.
   Bootstrap cascade 특이성 변동/cache 등 모든 변수 무력화 보장. */
.workspace-v4 .btn-primary,
.workspace-v4 .btn-primary:not(:disabled):not(.disabled) {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--ws-accent);
  --bs-btn-border-color: var(--ws-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ws-accent-strong);
  --bs-btn-hover-border-color: var(--ws-accent-strong);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ws-accent-strong);
  --bs-btn-active-border-color: var(--ws-accent-strong);
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  color: #000 !important;
}
.workspace-v4 .btn-primary:hover,
.workspace-v4 .btn-primary:focus,
.workspace-v4 .btn-primary:active,
.workspace-v4 .btn-primary.active {
  background-color: var(--ws-accent-strong) !important;
  border-color: var(--ws-accent-strong) !important;
  color: #fff !important;
}

/* btn-outline-primary → mint outline */
.workspace-v4 .btn-outline-primary {
  --bs-btn-color: var(--ws-accent-strong);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--ws-accent);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--ws-accent);
  --bs-btn-hover-border-color: var(--ws-accent);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--ws-accent);
  --bs-btn-active-border-color: var(--ws-accent);
  background-color: transparent !important;
  border-color: var(--ws-accent) !important;
  color: var(--ws-accent-strong) !important;
}
.workspace-v4 .btn-outline-primary:hover,
.workspace-v4 .btn-outline-primary:focus,
.workspace-v4 .btn-outline-primary:active,
.workspace-v4 .btn-outline-primary.active,
.workspace-v4 .btn-outline-primary.show {
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  color: #000 !important;
}

/* btn-outline-success → green 그대로 (TM 사전번역 등) */
.workspace-v4 .btn-outline-success {
  --bs-btn-color: #059669;
  --bs-btn-border-color: #10b981;
  --bs-btn-hover-bg: #10b981;
  --bs-btn-hover-border-color: #10b981;
  --bs-btn-active-bg: #059669;
  --bs-btn-active-border-color: #059669;
  background-color: rgba(16, 185, 129, 0.06) !important;
  border-color: #10b981 !important;
  color: #059669 !important;
}
.workspace-v4 .btn-outline-success:hover,
.workspace-v4 .btn-outline-success:focus,
.workspace-v4 .btn-outline-success:active {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #fff !important;
}

/* btn-toolbar 같이 추가 클래스가 같이 붙은 경우 — combined selector 보강 */
.workspace-v4 .btn.btn-primary,
.workspace-v4 button.btn-primary {
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  color: #000 !important;
}
.workspace-v4 .btn.btn-outline-primary,
.workspace-v4 button.btn-outline-primary {
  background-color: transparent !important;
  border-color: var(--ws-accent) !important;
  color: var(--ws-accent-strong) !important;
}

/* sheet-tab active state — sheet-preview.css와 workspace-layout.css에 두 군데 정의됨.
   둘 다 #fff bg + Bootstrap primary (#0d6efd) 추정. v4 스코프에서 mint 매핑. */
.workspace-v4 .sheet-tab.active,
.workspace-v4 .sheet-tab.active:hover,
.workspace-v4 .sheet-tab.selected,
.workspace-v4 .sheet-tab[aria-selected="true"] {
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  color: #000 !important;
}

/* 스타일 가이드 결과 진행률 색상도 mint 톤 */
.workspace-v4 .progress-bar.bg-info {
  background-color: var(--ws-accent) !important;
}

/* form-check-input checked — 토글 체크박스 mint */
.workspace-v4 .form-check-input:checked {
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
}

/* btn-success(TM 사전번역 등) — 기존 green 그대로 유지 (TM tab accent와 일치) */

/* edit-mode-toggle.active (workspace.html 인라인 스타일) — mint 토큰으로 override */
.workspace-v4 .edit-mode-toggle.active {
  background-color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  color: #000 !important;
}
.workspace-v4 .edit-mode-toggle.active:hover {
  background-color: var(--ws-accent-strong) !important;
  border-color: var(--ws-accent-strong) !important;
  color: #fff !important;
}

/* virtual-scroll-toggle.on — 활성 상태 mint */
.workspace-v4 .virtual-scroll-toggle.on,
.workspace-v4 .virtual-scroll-toggle:has(.toggle-status.on:not([style*="display: none"])) {
  border-color: var(--ws-accent);
}

/* OFF 뱃지 — 빨강 → 연한 mint beige (시각 노이즈 감소) */
.workspace-v4 .virtual-scroll-toggle .toggle-status.off {
  background-color: var(--ws-accent-dim) !important;
  color: var(--ws-accent-strong) !important;
}
/* ON 뱃지 — mint solid 로 통일 (legacy green 유지) */
.workspace-v4 .virtual-scroll-toggle .toggle-status.on {
  background-color: var(--ws-accent) !important;
  color: #000 !important;
}

/* edit-mode-toggle inactive (일반 모드) — 아이콘 mint로 시인성 ↑ */
.workspace-v4 .edit-mode-toggle:not(.active) i {
  color: var(--ws-accent-strong) !important;
}
.workspace-v4 .edit-mode-toggle:not(.active) {
  border-color: var(--ws-accent) !important;
  color: var(--ws-c-700) !important;
}
.workspace-v4 .edit-mode-toggle:not(.active):hover {
  background-color: var(--ws-accent-dim) !important;
  border-color: var(--ws-accent) !important;
  color: var(--ws-accent-strong) !important;
}

/* 사이드바 collapse 버튼 .btn-outline-primary 도 자동 매핑됨 (위 .btn-outline-primary 룰)
   사이드바 active 표시(예: .sidebar-section.active) 색상 mint 적용 */
.workspace-v4 .sidebar-section.active .sidebar-section-header {
  color: var(--ws-accent-strong);
}

/* form-check-input checked 상태도 mint 톤 */
.workspace-v4 .form-check-input:checked {
  background-color: var(--ws-accent);
  border-color: var(--ws-accent);
}

/* badge bg-secondary → 더 부드러운 zinc */
.workspace-v4 .badge.bg-secondary {
  background-color: var(--ws-c-500) !important;
}

/* ---------------------------------------------
   Drawer overlay — layout-shell.css의 베이스에 v4 root scope 추가
   기존 컴포넌트가 z-index 충돌하지 않도록 명시적 분리
   --------------------------------------------- */
.workspace-v4 .ws-drawer-overlay {
  /* layout-shell.css에 baseline 정의됨 — 여기서는 scope만 명시 */
}