/* ============================================================
   인애드 인트라넷 — 통합 스타일시트 v3.0
   직전 SaaS 모던 디자인 + 구 시스템 컴포넌트 병합
   Dark Navy Gradient Sidebar + White Card UI
   ============================================================ */

/* ── 기본 ── */
html, body {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Noto Sans KR', sans-serif;
  background: #F9FAFB !important;
  overflow-x: hidden !important;
}
/* ── 스크롤바 전역 통일 (시안 B) ──
   WebKit은 :hover 로 스크롤바 '채널 폭'을 바꿔도 반영하지 않으므로(레이아웃 고정),
   채널은 14px로 고정하고 thumb의 투명 테두리를 조절해 평소 얇게 → 호버 시 굵게 보이도록 함.
   (테두리 변경은 repaint만 → 확실히 동작하고 콘텐츠 리플로우 없음) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #aeb9cc; border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* 스크롤 영역에 마우스 올리면: thumb 굵어짐(테두리 축소) + 블루 + 그루브 트랙 */
:hover::-webkit-scrollbar-track { background: #e9eef7; border-radius: 8px; box-shadow: inset 0 0 3px rgba(30,58,110,.14); }
:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9cc0fb, #5b83c9); border-width: 2px; }
/* thumb 위에 직접 올리면 최대 두께 + 진한 블루 */
::-webkit-scrollbar-thumb:hover { border-width: 1px; background: linear-gradient(180deg, #5b83c9, #2563eb); }
/* Firefox: 채널 폭 고정이 불가 → thin 유지, 호버 시 블루 강조 */
* { scrollbar-width: thin; scrollbar-color: #aeb9cc transparent; }
*:hover { scrollbar-color: #5b83c9 #e9eef7; }

/* ── 애니메이션 ── */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.5;} }
@keyframes wsModalIn { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.fade-in { animation: fadeIn .3s ease-out; }
.slide-in { animation: slideIn .3s ease-out; }

/* ═══════════════════════════════════════════════════════
   앱 레이아웃
   ═══════════════════════════════════════════════════════ */
#app-layout {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════
   사이드바 — SaaS 그라디언트 스타일
   ═══════════════════════════════════════════════════════ */
#sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 100vh !important;
  background: linear-gradient(180deg, #153088 0%, #142a6e 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 200 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-shadow: 4px 0 20px rgba(0,0,0,.15) !important;
  scrollbar-width: thin;
  scrollbar-color: #aeb9cc transparent;
}
/* 사이드바 스크롤바도 전역 시안 B로 통일 (채널 14px 고정 · 평소 얇은 thumb → 호버 시 굵게) */
#sidebar::-webkit-scrollbar { width: 14px; height: 14px; }
#sidebar::-webkit-scrollbar-thumb { background: #aeb9cc; border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
#sidebar:hover::-webkit-scrollbar-track { background: #e9eef7; box-shadow: inset 0 0 3px rgba(30,58,110,.14); }
#sidebar:hover::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #9cc0fb, #5b83c9); border-width: 2px; }
#sidebar::-webkit-scrollbar-thumb:hover { border-width: 1px; background: linear-gradient(180deg, #5b83c9, #2563eb); }

/* 사이드바 로고 */
.sidebar-logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  flex-shrink: 0 !important;
}
.sidebar-logo img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-radius: 9px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: #fff !important;
  display: block !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.sidebar-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; flex-shrink: 0;
}
.sidebar-logo-text {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.logo-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.3px !important;
  white-space: nowrap !important;
}
.logo-sub {
  font-size: 10px !important;
  color: rgba(255,255,255,.45) !important;
  font-weight: 400 !important;
  letter-spacing: .5px !important;
  white-space: nowrap !important;
}

/* 사이드바 사용자 정보 */
.sidebar-user {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  flex-shrink: 0 !important;
}
.sidebar-user-inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
}
.sidebar-user-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3b82f6, #3182f6) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sidebar-user-avatar i { font-size: 12px !important; color: #fff !important; }
.sidebar-user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 사이드바 네비게이션 */
.sidebar-nav {
  flex: 1 !important;
  padding: 6px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
}
/* 섹션 라벨 — 양쪽 클래스명 모두 지원 */
.sidebar-section-label, .sidebar-section {
  padding: 14px 18px 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

/* ── 사이드바 요소 숨김 (JS가 토글) ─────────────── */
/* specificity를 높여 .tab-btn, .sidebar-special-btn 등의 display:flex!important 를 확실히 오버라이드 */
#sidebar .sidebar-hidden,
.sidebar-hidden.tab-btn,
.sidebar-hidden.sidebar-special-btn,
.sidebar-hidden.sidebar-section-label,
a.sidebar-hidden,
.sidebar-hidden {
  display: none !important;
}

/* ── 탭 버튼 / 네비게이션 아이템 ─────────────────── */
.tab-btn, .nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 18px !important;
  margin: 1px 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.6) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  text-align: left !important;
  border-radius: 0 !important;
  position: relative !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.tab-btn i, .nav-item i {
  width: 18px !important;
  text-align: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  opacity: .7 !important;
  transition: opacity .15s !important;
}
.tab-btn:hover, .nav-item:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.9) !important;
}
.tab-btn:hover i, .nav-item:hover i { opacity: 1 !important; }

/* 활성 탭 */
.tab-active, .nav-item.active {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.tab-active i, .nav-item.active i { opacity: 1 !important; color: #60a5fa !important; }
.tab-active::before, .nav-item.active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 3px !important;
  background: #60a5fa !important;
  border-radius: 0 3px 3px 0 !important;
}

/* 사이드바 특수 버튼 */
.sidebar-special-btn {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  color: rgba(255,255,255,.6) !important;
}
.sidebar-special-btn i {
  width: 18px !important;
  text-align: center !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
  opacity: .7 !important;
}
.sidebar-special-btn:hover {
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.9) !important;
}
.sidebar-special-btn:hover i { opacity: 1 !important; }
.sidebar-special-btn.accent-purple { color: #3182f6 !important; }
.sidebar-special-btn.accent-purple:hover { background: rgba(139,92,246,0.15) !important; color: #cfe3ff !important; }
.sidebar-special-btn.accent-slate  { color: rgba(255,255,255,.5) !important; }
.sidebar-special-btn.accent-orange { color: #fb923c !important; }
.sidebar-special-btn.accent-orange:hover { background: rgba(249,115,22,0.12) !important; color: #fdba74 !important; }

/* 배지 */
.nav-badge {
  min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
  border-radius: 9999px !important; background: #ef4444 !important; color: #fff !important;
  font-size: 10px !important; font-weight: 700 !important; line-height: 18px !important;
  text-align: center !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important;
  margin-left: auto !important;
}

/* 관리자 탭 */
#admin-tabs { flex-direction: column !important; }

/* 사이드바 하단 액션 */
.sidebar-actions {
  padding: 10px 14px 16px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.sidebar-action-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.5) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all .15s !important;
  text-decoration: none !important;
  text-align: left !important;
  box-sizing: border-box !important;
}
/* .hidden 이 base 규칙(display:flex !important)을 덮도록 스코프+important 부여
   (메뉴 순서변경=admin 전용, 트랙B=관리자·파트장 전용 버튼의 숨김이 실제로 적용되게 함) */
.sidebar-action-btn.hidden { display: none !important; }
.sidebar-action-btn i { width: 14px !important; text-align: center !important; font-size: 12px !important; }
.sidebar-action-btn:hover { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.8) !important; }
.sidebar-action-btn.btn-pwd { background: rgba(255,255,255,.05) !important; color: rgba(255,255,255,.5) !important; }
.sidebar-action-btn.btn-pwd:hover { background: rgba(255,255,255,.12) !important; color: #e2e8f0 !important; }
.sidebar-action-btn.btn-logout, .sidebar-action-btn.logout { background: rgba(239,68,68,0.08) !important; color: #f87171 !important; }
.sidebar-action-btn.btn-logout:hover, .sidebar-action-btn.logout:hover { background: rgba(239,68,68,0.18) !important; color: #fca5a5 !important; }
/* ═══════════════════════════════════════════════════════
   메인 콘텐츠 영역
   ═══════════════════════════════════════════════════════ */
#main-content {
  margin-left: 250px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  min-width: 0 !important;
  background: #F9FAFB !important;
}

/* 상단 탑바 */
#topbar {
  height: 56px !important;
  min-height: 56px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
#topbar-title, .topbar-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}
.topbar-month-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #3563e9 !important;
  background: #eff6ff !important;
  padding: 3px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #bfdbfe !important;
}

/* 콘텐츠 영역 */
#content-wrapper {
  flex: 1 !important;
  padding: 24px !important;
  overflow-x: hidden !important;
}

/* 탭 콘텐츠 */
.tab-content { display: block; animation: fadeIn .3s ease-out; }
.tab-content.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════
   카드 — SaaS 스타일
   ═══════════════════════════════════════════════════════ */
.card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 0 0 1px rgba(0,0,0,.03);
  border: 1px solid #f3f4f6; overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.03); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #f3f4f6;
}
.card-header-stacked { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; }
.card-title { font-size: 15px; font-weight: 700; color: #1f2937; display: flex; align-items: center; }
.card-body { padding: 16px 20px; }

/* ═══════════════════════════════════════════════════════
   통계 카드
   ═══════════════════════════════════════════════════════ */
.stat-card {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 18px 20px;
  border: 1px solid #f3f4f6;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.stat-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat-card-info { flex: 1; min-width: 0; }
.stat-card-label { font-size: 12px; color: #9ca3af; font-weight: 500; }
.stat-card-value { font-size: 22px; font-weight: 800; color: #1f2937; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════
   버튼
   ═══════════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; padding:8px 16px; border-radius:10px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:all .2s; }
.btn-sm { display:inline-flex; align-items:center; padding:5px 12px; border-radius:8px; font-size:12px; font-weight:600; border:none; cursor:pointer; transition:all .2s; }
.btn-blue { background:#3563e9; color:#fff; }
.btn-blue:hover { background:#2347cc; }
.btn-green { background:#16a34a; color:#fff; }
.btn-green:hover { background:#15803d; }
.btn-amber { background:#f59e0b; color:#fff; }
.btn-amber:hover { background:#d97706; }
.btn-red { background:#ef4444; color:#fff; }
.btn-red:hover { background:#dc2626; }
.btn-outline { background:#fff; color:#374151; border:1px solid #d1d5db; }
.btn-outline:hover { background:#f9fafb; }
.btn-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f3f4f6; color:#6b7280; border:none; cursor:pointer; transition:all .15s; }
.btn-icon:hover { background:#e5e7eb; color:#374151; }

/* 구 시스템 버튼 호환 */
.ws-btn-edit   { color:#3b82f6; font-size:12px; background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:4px; }
.ws-btn-edit:hover { background:#eff6ff; }
.ws-btn-del    { color:#ef4444; font-size:12px; background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:4px; }
.ws-btn-del:hover { background:#fef2f2; }
.ws-btn-approve { color:#10b981; font-size:12px; background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:4px; }
.ws-btn-approve:hover { background:#ecfdf5; }
.ws-btn-del-text { color:#ef4444; font-size:13px; background:none; border:none; cursor:pointer; padding:6px 12px; border-radius:6px; }
.ws-btn-del-text:hover { background:#fef2f2; }
.ws-btn-cancel { padding:7px 18px; border:1px solid #d1d5db; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; background:#fff; color:#374151; }
.ws-btn-cancel:hover { background:#f3f4f6; }
.ws-btn-save { padding:7px 18px; background:#3563e9; color:#fff; border:none; border-radius:8px; font-weight:600; font-size:13px; cursor:pointer; }
.ws-btn-save:hover { background:#2347cc; }

/* ═══════════════════════════════════════════════════════
   입력
   ═══════════════════════════════════════════════════════ */
.input, .ws-input {
  width: 100% !important; padding: 8px 14px !important;
  border: 1px solid #d1d5db !important; border-radius: 10px !important;
  font-size: 13px !important; background: #fff !important;
  transition: all .2s !important; font-family: 'Noto Sans KR', sans-serif;
  box-sizing: border-box !important; color: #1e293b !important;
  outline: none !important;
}
.input:focus, .ws-input:focus {
  border-color: #3563e9 !important;
  box-shadow: 0 0 0 3px rgba(53,99,233,.12) !important;
}
.input-select {
  padding: 8px 32px 8px 14px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 13px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
}
.input-select:focus { outline: none; border-color: #3563e9; box-shadow: 0 0 0 3px rgba(53,99,233,.12); }
.label, .ws-label {
  display: block !important; font-size: 13px !important;
  font-weight: 600 !important; color: #374151 !important; margin-bottom: 4px !important;
}
textarea.input { resize: vertical; min-height: 80px; }

/* ═══════════════════════════════════════════════════════
   테이블
   ═══════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th { padding: 10px 12px; text-align: left; font-weight: 600; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; white-space: nowrap; font-size: 12px; }
.data-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f3f4f6; color: #374151; }
.data-table tbody tr { transition: background .15s; }
.data-table tbody tr:hover { background: #f9fafb; }

/* Users admin: dense employee list */
.users-table-wrap {
  max-height: calc(100vh - 310px);
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}
.users-admin-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  line-height: 1.35;
}
.users-admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px !important;
  border-bottom: 1px solid #dbe3ef !important;
  background: #f8fafc;
  color: #475569;
  font-size: 11px !important;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.users-admin-table tbody td {
  padding: 7px 10px !important;
  border-bottom: 1px solid #eef2f7 !important;
  color: #334155;
  font-size: 12px !important;
  white-space: nowrap;
  vertical-align: middle;
}
.users-admin-table tbody tr {
  transition: background .12s ease;
}
.users-admin-table tbody tr:hover {
  background: #f8fbff;
}
.users-admin-table .usr-row-inactive,
.users-admin-table tbody tr.opacity-50 {
  opacity: 1 !important;
  background: #f8fafc !important;
}
.users-admin-table .usr-row-inactive td,
.users-admin-table tbody tr.opacity-50 td {
  color: #94a3b8;
}
.users-admin-table th:nth-child(1), .users-admin-table td:nth-child(1) { min-width: 77px; max-width: 96px; } /* 사용자: 기존 96/120 대비 20% 축소 */
.users-admin-table th:nth-child(2), .users-admin-table td:nth-child(2) { min-width: 86px; max-width: 125px; }
.users-admin-table th:nth-child(3), .users-admin-table td:nth-child(3) { min-width: 86px; }
.users-admin-table th:nth-child(4), .users-admin-table td:nth-child(4) { min-width: 68px; }
.users-admin-table th:nth-child(5), .users-admin-table td:nth-child(5) { min-width: 105px; max-width: 128px; }
.users-admin-table th:nth-child(6), .users-admin-table td:nth-child(6) { min-width: 70px; }
.users-admin-table th:nth-child(7), .users-admin-table td:nth-child(7),
.users-admin-table th:nth-child(8), .users-admin-table td:nth-child(8),
.users-admin-table th:nth-child(14), .users-admin-table td:nth-child(14) { min-width: 88px; } /* 생일·구글메일·주민번호 */
.users-admin-table th:nth-child(9), .users-admin-table td:nth-child(9) { min-width: 68px; }
.users-admin-table th:nth-child(10), .users-admin-table td:nth-child(10),
.users-admin-table th:nth-child(11), .users-admin-table td:nth-child(11) { min-width: 108px; max-width: 130px; } /* 개인전화·업무전화 */
.users-admin-table th:nth-child(12), .users-admin-table td:nth-child(12) { min-width: 84px; max-width: 105px; } /* 은행: 기존 168/210 대비 50% 축소 */
.users-admin-table th:nth-child(13), .users-admin-table td:nth-child(13) { min-width: 139px; max-width: 173px; } /* 계좌번호: 기존 185/230 대비 25% 축소 */
.users-admin-table th:nth-child(15), .users-admin-table td:nth-child(15) { min-width: 96px; } /* 사용자명 */
.users-admin-table td:nth-child(5),
.users-admin-table td:nth-child(10),
.users-admin-table td:nth-child(11),
.users-admin-table td:nth-child(12),
.users-admin-table td:nth-child(13) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.users-admin-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 104px;
  background: inherit;
  box-shadow: -8px 0 12px -12px rgba(15, 23, 42, .45);
}
.users-admin-table thead th:last-child {
  right: 0;
  z-index: 3;
  text-align: center;
  box-shadow: -8px 0 12px -12px rgba(15, 23, 42, .45);
}
/* 사용자(첫 컬럼) 가로스크롤 시 좌측 고정 */
.users-admin-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 8px 0 12px -12px rgba(15, 23, 42, .45);
}
.users-admin-table thead th:nth-child(1) {
  left: 0;
  z-index: 3; /* 좌상단 코너: 세로 헤더(2)·가로 첫컬럼(1)보다 위 */
  box-shadow: 8px 0 12px -12px rgba(15, 23, 42, .45);
}
.users-admin-table tbody tr:hover td:nth-child(1) { background: #f8fbff; }
.users-admin-table tbody tr.opacity-50 td:nth-child(1),
.users-admin-table .usr-row-inactive td:nth-child(1) { background: #f8fafc; }
.users-admin-table tbody tr.bg-blue-50 td:nth-child(1) { background: #eff6ff; }
.users-admin-table td:last-child button {
  width: 27px;
  height: 27px;
  margin-right: 3px !important;
  border-radius: 7px;
  font-size: 0 !important;
  vertical-align: middle;
}
.users-admin-table td:last-child button:last-child {
  margin-right: 0 !important;
}
.users-admin-table td:last-child button i {
  margin: 0 !important;
  font-size: 12px !important;
}
#users-content .bg-white.rounded-lg.shadow-md.p-6 {
  padding: 20px !important;
}
#users-content h2 {
  font-size: 22px !important;
  line-height: 1.25 !important;
}
#users-content .add-btn[data-table="users"] {
  padding: 8px 16px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}
#usr-filter-bar {
  gap: 8px !important;
  margin-bottom: 12px !important;
  padding: 10px !important;
}
#usr-filter-bar select,
#usr-filter-bar button {
  min-height: 32px;
  padding: 6px 9px !important;
  font-size: 12px !important;
  border-radius: 7px !important;
}
#user_requests-content {
  width: 100%;
  max-width: 1280px;
  margin: 24px auto 0;
}

/* 구 시스템 테이블 호환 */
.ws-th {
  padding: 9px 12px !important; text-align: left !important;
  font-size: 11px !important; font-weight: 600 !important; color: #64748b !important;
  background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap !important; letter-spacing: 0.3px !important;
}
.ws-td {
  padding: 10px 12px !important; font-size: 13px !important;
  border-bottom: 1px solid #f1f5f9 !important; vertical-align: middle !important;
  color: #334155 !important;
}

/* ═══════════════════════════════════════════════════════
   배지
   ═══════════════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; padding:2px 10px; border-radius:9999px; font-size:11px; font-weight:600; }
.badge-blue { background:#dbeafe; color:#1d4ed8; }
.badge-green { background:#dcfce7; color:#16a34a; }
.badge-amber { background:#fef3c7; color:#b45309; }
.badge-red { background:#fee2e2; color:#dc2626; }
.badge-gray { background:#f3f4f6; color:#6b7280; }
.badge-purple { background:#e8f3ff; color:#3182f6; }

/* ═══════════════════════════════════════════════════════
   모달 — 양쪽 호환
   ═══════════════════════════════════════════════════════ */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.45); }
.modal.active { display:flex; align-items:center; justify-content:center; }

/* SaaS 모달 */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.hidden { display:none; }
.modal-content {
  background:#fff; border-radius:20px; width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  animation: fadeIn .2s ease-out;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid #f3f4f6;
  font-size:16px; font-weight:700; color:#1f2937;
}
.modal-close { background:none; border:none; font-size:24px; color:#9ca3af; cursor:pointer; transition:color .15s; padding:0 4px; }
.modal-close:hover { color:#374151; }
.modal-body { padding:20px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px; border-top:1px solid #f3f4f6; }

/* 구 시스템 모달 */
.ws-modal-overlay {
  position: fixed !important; inset: 0 !important; z-index: 1100 !important;
  background: rgba(0,0,0,.45) !important; display: flex !important;
  align-items: center !important; justify-content: center !important; padding: 16px !important;
}
.ws-modal-box {
  background: #fff !important; border-radius: 16px !important;
  width: 100% !important; max-width: 560px !important;
  max-height: 90vh !important; overflow-y: auto !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
  animation: wsModalIn .18s ease !important;
}
.ws-modal-header {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; padding: 16px 20px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.ws-modal-title { font-size: 16px !important; font-weight: 700 !important; color: #1e293b !important; }
.ws-modal-close {
  font-size: 20px !important; background: none !important; border: none !important;
  cursor: pointer !important; color: #94a3b8 !important; padding: 2px 6px !important; border-radius: 4px !important;
}
.ws-modal-close:hover { color: #1e293b !important; background: #f1f5f9 !important; }

/* ═══════════════════════════════════════════════════════
   토스 모달 — 공통 셸 전역 토스화
   대상 그룹:
     A. 정적 내장 모달  : .modal > div (카드) / 헤더·푸터 = 카드의 첫·마지막 flex 자식
     B. SaaS 모달        : .modal-overlay > .modal-content + .modal-header/.modal-footer
     C. 업무지원(구) 모달 : .ws-modal-overlay > .ws-modal-box + .ws-modal-header
   기존 .toss-infra-page / .toss-menu-modal override(파일 하단)의 검증된 룩을 전역 기본값으로 승격.
   ※ .ws-modal-* 원본이 !important 라 override 도 !important 필요.
   ═══════════════════════════════════════════════════════ */

/* 오버레이 — 토스 다크 톤 + 블러 */
.modal,
.modal-overlay {
  background: rgba(25, 31, 40, .45) !important;
}
.modal-overlay {
  backdrop-filter: blur(3px) !important;
}

/* 카드 — 모서리 8px 통일, 토스 라인 보더, 토스 모달 그림자 */
.modal > div,
.modal-content,
.ws-modal-box {
  border-radius: 8px !important;
  border: 1px solid var(--toss-line) !important;
  box-shadow: var(--toss-modal-shadow) !important;
}

/* 헤더 / 푸터 — 토스 톤(#fbfcff) 배경 + 토스 라인 보더 */
.modal-header,
.modal-footer,
.ws-modal-header,
.modal > div > .flex:first-child,
.modal > div > .flex:last-child {
  border-color: var(--toss-line) !important;
  background: #fbfcff !important;
}

/* 헤더 제목 — 토스 텍스트 컬러 + 굵게 */
.modal-header,
.ws-modal-title,
.modal > div > .flex:first-child h3 {
  color: var(--toss-text) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* 푸터의 구형 회색 배경(bg-gray-50) 토스 톤으로 덮기 */
.modal > div > .flex:last-child.bg-gray-50 {
  background: #fbfcff !important;
}

/* 입력 필드 — 모서리 8px, 토스 라인 보더, 토스 블루 포커스 링 */
.modal input:not([type=checkbox]):not([type=radio]):not([type=range]),
.modal textarea,
.modal select,
.modal-content input:not([type=checkbox]):not([type=radio]):not([type=range]),
.modal-content textarea,
.modal-content select,
.ws-modal-box input:not([type=checkbox]):not([type=radio]):not([type=range]),
.ws-modal-box textarea,
.ws-modal-box select {
  border-radius: 8px !important;
  border-color: var(--toss-line) !important;
}
.modal input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.modal textarea:focus,
.modal select:focus,
.modal-content input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.modal-content textarea:focus,
.modal-content select:focus,
.ws-modal-box input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
.ws-modal-box textarea:focus,
.ws-modal-box select:focus {
  outline: none !important;
  border-color: var(--toss-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
  --tw-ring-color: transparent !important;
}

/* 버튼 — 모서리 8px 통일 + 토스 블루 primary (blue 계열만 토스 블루로 정렬, 의미색 yellow/red/green 은 유지) */
.modal button,
.modal-content button,
.modal-footer button,
.ws-modal-box button {
  border-radius: 8px !important;
}
.modal button.bg-blue-500,
.modal button.bg-blue-600,
.modal-content button.bg-blue-500,
.modal-content button.bg-blue-600,
.ws-modal-box button.bg-blue-500,
.ws-modal-box button.bg-blue-600 {
  background: var(--toss-blue) !important;
  border-color: var(--toss-blue) !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

/* ═══════════════════════════════════════════════════════
   토스 모달 — 인라인 Tailwind 동적 모달(그룹 D) 전역 토스화
   공통 클래스가 없어 JS 무수정으로 처리: 인라인 오버레이는 모두 class 가
   "fixed inset-0 …"로 시작하고 justify-center 로 가운데 정렬되는 점을 이용해 속성 선택자로 타겟.
   - 카드(오버레이 > 직속 div): 모서리 8px·토스 보더·그림자
   - 그라데이션: 라이트 헤더 밴드(from-*-50)는 #fbfcff, 컬러 버튼(from-*-500/600)은 토스 블루로 분리 처리
   - 모달 범위 한정 보라색 제거: indigo/purple/violet → 토스 블루 (앱 전역 테마색은 미변경)
   ═══════════════════════════════════════════════════════ */

/* 카드 — 모서리 8px 통일 + 토스 라인 보더 + 토스 그림자 (rounded-xl/2xl, shadow-2xl 덮어쓰기) */
[class^="fixed inset-0"][class*="justify-center"] > div {
  border-radius: 8px !important;
  border: 1px solid var(--toss-line) !important;
  box-shadow: var(--toss-modal-shadow) !important;
}

/* 입력 필드 — 모서리 8px + 토스 블루 포커스 링 */
[class^="fixed inset-0"][class*="justify-center"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[class^="fixed inset-0"][class*="justify-center"] textarea,
[class^="fixed inset-0"][class*="justify-center"] select {
  border-radius: 8px !important;
}
[class^="fixed inset-0"][class*="justify-center"] input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
[class^="fixed inset-0"][class*="justify-center"] textarea:focus,
[class^="fixed inset-0"][class*="justify-center"] select:focus {
  outline: none !important;
  border-color: var(--toss-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
  --tw-ring-color: transparent !important;
}

/* 라이트 그라데이션 헤더 밴드 → 토스 톤(#fbfcff) 단색 (다크 텍스트 가독성 유지) */
[class^="fixed inset-0"][class*="justify-center"] .from-blue-50,
[class^="fixed inset-0"][class*="justify-center"] .from-sky-50,
[class^="fixed inset-0"][class*="justify-center"] .from-indigo-50,
[class^="fixed inset-0"][class*="justify-center"] .from-purple-50,
[class^="fixed inset-0"][class*="justify-center"] .from-violet-50,
[class^="fixed inset-0"][class*="justify-center"] .from-amber-50,
[class^="fixed inset-0"][class*="justify-center"] .from-yellow-50,
[class^="fixed inset-0"][class*="justify-center"] .from-green-50,
[class^="fixed inset-0"][class*="justify-center"] .from-emerald-50,
[class^="fixed inset-0"][class*="justify-center"] .from-slate-50,
[class^="fixed inset-0"][class*="justify-center"] .from-gray-50 {
  background-image: none !important;
  background-color: #fbfcff !important;
}

/* 컬러 그라데이션 버튼/배지(from-*-500/600) → 토스 블루 단색 (흰 텍스트 가독성 유지) */
[class^="fixed inset-0"][class*="justify-center"] .from-indigo-500,
[class^="fixed inset-0"][class*="justify-center"] .from-indigo-600,
[class^="fixed inset-0"][class*="justify-center"] .from-purple-500,
[class^="fixed inset-0"][class*="justify-center"] .from-purple-600,
[class^="fixed inset-0"][class*="justify-center"] .from-violet-500,
[class^="fixed inset-0"][class*="justify-center"] .from-violet-600 {
  background-image: none !important;
  background-color: var(--toss-blue) !important;
}

/* 보라색 제거(모달 한정) — 아이콘/텍스트 indigo·purple·violet → 토스 블루 */
[class^="fixed inset-0"][class*="justify-center"] .text-indigo-400,
[class^="fixed inset-0"][class*="justify-center"] .text-indigo-500,
[class^="fixed inset-0"][class*="justify-center"] .text-indigo-600,
[class^="fixed inset-0"][class*="justify-center"] .text-indigo-700,
[class^="fixed inset-0"][class*="justify-center"] .text-purple-400,
[class^="fixed inset-0"][class*="justify-center"] .text-purple-500,
[class^="fixed inset-0"][class*="justify-center"] .text-purple-600,
[class^="fixed inset-0"][class*="justify-center"] .text-purple-700,
[class^="fixed inset-0"][class*="justify-center"] .text-purple-800,
[class^="fixed inset-0"][class*="justify-center"] .text-violet-500,
[class^="fixed inset-0"][class*="justify-center"] .text-violet-600 {
  color: var(--toss-blue) !important;
}

/* 솔리드 보라 버튼(흰 텍스트) → 토스 블루 */
[class^="fixed inset-0"][class*="justify-center"] .bg-indigo-500,
[class^="fixed inset-0"][class*="justify-center"] .bg-indigo-600,
[class^="fixed inset-0"][class*="justify-center"] .bg-indigo-700,
[class^="fixed inset-0"][class*="justify-center"] .bg-purple-500,
[class^="fixed inset-0"][class*="justify-center"] .bg-purple-600,
[class^="fixed inset-0"][class*="justify-center"] .bg-purple-700,
[class^="fixed inset-0"][class*="justify-center"] .bg-violet-600 {
  background-color: var(--toss-blue) !important;
  border-color: var(--toss-blue) !important;
}
/* hover 변형 */
[class^="fixed inset-0"][class*="justify-center"] .hover\:bg-indigo-700:hover,
[class^="fixed inset-0"][class*="justify-center"] .hover\:bg-purple-700:hover {
  background-color: #1b64da !important;
}

/* 연한 보라 칩 배경 → 토스 블루 soft */
[class^="fixed inset-0"][class*="justify-center"] .bg-indigo-50,
[class^="fixed inset-0"][class*="justify-center"] .bg-indigo-100,
[class^="fixed inset-0"][class*="justify-center"] .bg-purple-50,
[class^="fixed inset-0"][class*="justify-center"] .bg-purple-100 {
  background-color: var(--toss-blue-soft) !important;
}

/* 보라 보더 → 토스 soft 블루 라인 */
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-100,
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-200,
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-300,
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-400,
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-500,
[class^="fixed inset-0"][class*="justify-center"] .border-indigo-600,
[class^="fixed inset-0"][class*="justify-center"] .border-purple-500 {
  border-color: #c9e0ff !important;
}

/* accent (체크박스/라디오) 보라 → 토스 블루 */
[class^="fixed inset-0"][class*="justify-center"] .accent-indigo-500,
[class^="fixed inset-0"][class*="justify-center"] .accent-indigo-600,
[class^="fixed inset-0"][class*="justify-center"] .accent-purple-500,
[class^="fixed inset-0"][class*="justify-center"] .accent-purple-600 {
  accent-color: var(--toss-blue) !important;
}

/* 광고주 모달 */
.adv-label { display:block; font-size:12px; font-weight:600; color:#374151; margin-bottom:5px; }
.adv-input { width:100%; padding:8px 11px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; outline:none; box-sizing:border-box; }
.adv-input:focus { border-color:#3563e9; box-shadow:0 0 0 3px rgba(53,99,233,.12); }

/* ═══════════════════════════════════════════════════════
   업무지원 탭
   ═══════════════════════════════════════════════════════ */
.ws-tab {
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: #fff; color: #6b7280; border: 1px solid #e5e7eb;
  cursor: pointer; transition: all .15s;
}
.ws-tab:hover { background: #f9fafb; color: #374151; }
.ws-tab.active { background: #3563e9; color: #fff; border-color: #3563e9; }
.ws-sub-active {
  background: #3563e9 !important;
  color: #fff !important;
  border-color: #3563e9 !important;
}
.ws-panel.hidden { display: none !important; }

/* Work support: Toss-style layout */
#work_support-content .work-support-page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
#work_support-content .work-support-shell {
  background: #fff !important;
  border: 1px solid rgba(229,232,235,.9) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(25,31,40,.08) !important;
  overflow: hidden;
}
#work_support-content .work-support-head {
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid #eef1f4 !important;
  background: radial-gradient(circle at 92% 10%, rgba(49,130,246,.10), transparent 24%), linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
#work_support-content .work-support-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px !important;
  color: #191f28 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0;
}
#work_support-content .work-support-title i {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: #e8f3ff;
  color: #3182f6 !important;
  font-size: 15px;
}
#work_support-content .work-support-tabs {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px !important;
  padding: 4px;
  border-radius: 8px;
  background: #f2f4f6;
}
#work_support-content .ws-sub-btn {
  min-height: 38px;
  border: 0 !important;
  border-radius: 7px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent !important;
  color: #6b7684 !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#work_support-content .ws-sub-btn:hover {
  background: rgba(255,255,255,.68) !important;
  color: #1b64da !important;
}
#work_support-content .ws-sub-btn.ws-sub-active {
  background: #fff !important;
  color: #191f28 !important;
  box-shadow: 0 3px 10px rgba(25,31,40,.08);
}
#work_support-content .ws-panel {
  padding: 22px 24px 26px !important;
  background: #fff;
}

#work_support-content .welfare-section,
#work_support-content .welfare-requests {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#work_support-content .welfare-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
}
#work_support-content .welfare-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
#work_support-content .welfare-hero-icon,
#work_support-content .welfare-card-icon,
#work_support-content .welfare-empty-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: #3182f6;
  background: #e8f3ff;
}
#work_support-content .welfare-eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 900;
  color: #8b95a1;
  letter-spacing: .6px;
}
#work_support-content .welfare-hero h3 {
  margin: 0;
  color: #191f28;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0;
}
#work_support-content .welfare-hero p,
#work_support-content .welfare-quick-apply p,
#work_support-content .welfare-section-title p,
#work_support-content .welfare-empty-policy p {
  margin: 4px 0 0;
  color: #6b7684;
  font-size: 13px;
  line-height: 1.5;
}
#work_support-content .welfare-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 420px;
}
#work_support-content .welfare-hero-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: #4e5968;
  background: #f2f4f6;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
#work_support-content .welfare-hero-stats strong {
  color: #191f28;
}
#work_support-content .welfare-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#work_support-content .welfare-card {
  display: flex;
  flex-direction: column;
  min-height: 338px;
  padding: 16px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(25,31,40,.05);
}
#work_support-content .welfare-card-head {
  display: flex;
  gap: 11px;
  min-width: 0;
}
#work_support-content .welfare-card-title {
  min-width: 0;
  flex: 1;
}
#work_support-content .welfare-card-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
#work_support-content .welfare-card h4 {
  margin: 0;
  color: #191f28;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-card-title p {
  margin: 4px 0 0;
  color: #6b7684;
  font-size: 12px;
  line-height: 1.45;
}
#work_support-content .welfare-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
#work_support-content .welfare-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f2f4f6;
  color: #4e5968;
  font-size: 11px;
  font-weight: 800;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-policy-list,
#work_support-content .welfare-consolation-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
#work_support-content .welfare-policy-row,
#work_support-content .welfare-consolation-row {
  padding: 10px 0;
  border-top: 1px solid #f2f4f6;
}
#work_support-content .welfare-policy-row:first-child,
#work_support-content .welfare-consolation-row:first-child {
  border-top: 0;
  padding-top: 0;
}
#work_support-content .welfare-policy-row strong,
#work_support-content .welfare-consolation-row strong {
  display: block;
  color: #191f28;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-policy-row span {
  display: inline-block;
  margin-top: 3px;
  color: #8b95a1;
  font-size: 11px;
  font-weight: 700;
}
#work_support-content .welfare-policy-row em {
  display: inline-block;
  margin-top: 5px;
  color: #1b64da;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}
#work_support-content .welfare-policy-row p {
  margin: 5px 0 0;
  color: #4e5968;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-policy-row.muted {
  color: #8b95a1;
  font-size: 12px;
  font-weight: 800;
}
#work_support-content .welfare-consolation-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
#work_support-content .welfare-consolation-cols div {
  padding: 9px;
  border-radius: 8px;
  background: #f9fafb;
}
#work_support-content .welfare-consolation-cols span {
  display: block;
  color: #8b95a1;
  font-size: 10px;
  font-weight: 900;
}
#work_support-content .welfare-consolation-cols b {
  display: block;
  margin-top: 3px;
  color: #1b64da;
  font-size: 13px;
  line-height: 1.3;
}
#work_support-content .welfare-consolation-cols p {
  margin: 3px 0 0;
  color: #4e5968;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-consolation-note {
  margin: 4px 0 0;
  color: #8b95a1;
  font-size: 11px;
  line-height: 1.4;
}
#work_support-content .welfare-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
#work_support-content .welfare-text-btn,
#work_support-content .welfare-apply-btn,
#work_support-content .welfare-admin-edit-card,
#work_support-content .welfare-policy-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}
#work_support-content .welfare-text-btn {
  padding: 0 4px;
  color: #6b7684;
  background: transparent;
}
#work_support-content .welfare-text-btn:hover {
  color: #1b64da;
}
#work_support-content .welfare-admin-edit-card {
  padding: 0 10px;
  color: #1b64da;
  background: #e8f3ff;
}
#work_support-content .welfare-admin-edit-card:hover {
  background: #d7ebff;
}
#work_support-content .welfare-apply-btn {
  padding: 0 12px;
  color: #fff;
  background: #3182f6;
}
#work_support-content .welfare-apply-btn:hover {
  background: #1b64da;
}
#work_support-content .welfare-apply-btn.primary {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
}
#work_support-content .welfare-policy-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
#work_support-content .welfare-policy-row-head > div {
  min-width: 0;
}
#work_support-content .welfare-policy-edit-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  flex: 0 0 auto;
  color: #6b7684;
  background: #f2f4f6;
}
#work_support-content .welfare-policy-edit-btn:hover {
  color: #1b64da;
  background: #e8f3ff;
}
#work_support-content .welfare-quick-apply,
#work_support-content .welfare-empty-policy,
#work_support-content .welfare-locked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0;
  padding: 16px 18px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
}
#work_support-content .welfare-quick-apply strong,
#work_support-content .welfare-empty-policy strong {
  display: block;
  color: #191f28;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 900;
}
#work_support-content .welfare-empty-policy,
#work_support-content .welfare-locked {
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #6b7684;
  background: #fbfcff;
}
#work_support-content .welfare-locked i {
  color: #8b95a1;
  font-size: 22px;
}
#work_support-content .welfare-locked p {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
}
#work_support-content .welfare-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
#work_support-content .welfare-section-title h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  color: #191f28 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}
#work_support-content .welfare-section-title h3 i {
  color: #3182f6;
}
#work_support-content .welfare-request-table {
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  overflow: hidden;
}

/* ── 복지신청 대리신청 표기 ──────────────────────────────
   대리(위임) 출처 전용 색은 인디고 #5b5bd6 하나만 쓴다.
   상태 배지(대기중 amber / 승인완료 green / 지급완료 purple / 반려 red)와
   겹치지 않게 골랐다. */
#work_support-content .welfare-list-filters {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: #f2f4f6;
}
#work_support-content .welfare-list-filter-btn {
  border: 0;
  background: transparent;
  color: #6b7684;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
#work_support-content .welfare-list-filter-btn:hover { color: #191f28; }
#work_support-content .welfare-list-filter-btn.active {
  background: #fff;
  color: #191f28;
  box-shadow: 0 1px 3px rgba(25,31,40,.13);
}
#work_support-content .welfare-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
#work_support-content .welfare-who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#work_support-content .welfare-who-top {
  display: flex;
  align-items: center;
  gap: 5px;
}
#work_support-content .welfare-who-top b {
  font-size: 13px;
  font-weight: 800;
  color: #191f28;
  white-space: nowrap;
}
#work_support-content .welfare-who-by {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #4444b8;
  white-space: nowrap;
}
#work_support-content .welfare-proxy-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef0ff;
  border: 1px solid #d5d8fb;
  color: #4444b8;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
#work_support-content tr.welfare-row-proxy > td:first-child {
  box-shadow: inset 3px 0 0 #5b5bd6;
}

/* 대리신청 — 모달 내부.
   모달은 document.body 에 붙으므로 #work_support-content 로 스코프하면 안 된다. */
.ws-modal-box .welfare-subject {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fbfcff;
  transition: background-color .16s ease, border-color .16s ease;
}
.ws-modal-box .welfare-subject.on {
  border-color: #d5d8fb;
  background: #eef0ff;
}
.ws-modal-box .welfare-subject-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ws-modal-box .welfare-subject-label {
  font-size: 12px;
  font-weight: 800;
  color: #4e5968;
}
.ws-modal-box .welfare-subject.on .welfare-subject-label { color: #4444b8; }
.ws-modal-box .welfare-subject-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: #edeff2;
}
.ws-modal-box .welfare-subject.on .welfare-subject-seg { background: #dfe1fb; }
.ws-modal-box .welfare-subject-seg button {
  border: 0;
  background: transparent;
  color: #6b7684;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.ws-modal-box .welfare-subject-seg button.active {
  background: #fff;
  color: #191f28;
  box-shadow: 0 1px 3px rgba(25,31,40,.14);
}
.ws-modal-box .welfare-subject.on .welfare-subject-seg button.active { color: #4444b8; }
.ws-modal-box .welfare-subject-field { margin-bottom: 12px; }
.ws-modal-box .welfare-subject-field:last-child { margin-bottom: 0; }
.ws-modal-box .welfare-target-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 9px 11px;
  border: 1px solid #d5d8fb;
  border-radius: 6px;
  background: rgba(255,255,255,.75);
  font-size: 11.5px;
  color: #4e5968;
}
.ws-modal-box .welfare-target-meta b { color: #191f28; font-weight: 800; }
.ws-modal-box .welfare-target-meta .sep { color: #c6ced8; font-style: normal; }
.ws-modal-box .welfare-target-meta .warn { color: #9a6700; font-weight: 700; }
.ws-modal-box .welfare-proxy-notice:empty { display: none; }
.ws-modal-box .welfare-proxy-notice,
.ws-modal-box .welfare-proxy-strip {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d5d8fb;
  border-radius: 6px;
  background: rgba(255,255,255,.75);
  color: #4444b8;
  font-size: 12px;
  line-height: 1.5;
}
.ws-modal-box .welfare-proxy-strip { background: #eef0ff; }
.ws-modal-box .welfare-proxy-notice i,
.ws-modal-box .welfare-proxy-strip i { margin-top: 2px; flex: 0 0 auto; }
.ws-modal-box .welfare-proxy-notice b,
.ws-modal-box .welfare-proxy-strip b { font-weight: 800; }
/* 지각관리 PM/SM 담당자 선택 — 인원 제한 없는 복수 선택 목록 */
.ws-modal-box .td-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ws-modal-box .td-pick-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--toss-line, #e5e8eb);
  border-radius: 8px;
  overflow: hidden;
}
.ws-modal-box .td-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 11px;
  background: #f8fafc;
  border-bottom: 1px solid var(--toss-line, #e5e8eb);
  font-size: 12px;
  font-weight: 800;
  color: #4e5968;
}
.ws-modal-box .td-pick-head b {
  color: #3182f6;
  font-weight: 800;
}
.ws-modal-box .td-pick-clear {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: #8b95a1;
  cursor: pointer;
}
.ws-modal-box .td-pick-clear:hover { color: #f04452; }
.ws-modal-box .td-pick-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.ws-modal-box .td-pick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #191f28;
}
.ws-modal-box .td-pick-row:hover { background: #f2f4f6; }
.ws-modal-box .td-pick-row input { flex: 0 0 auto; cursor: pointer; }
.ws-modal-box .td-pick-name { font-weight: 700; white-space: nowrap; }
.ws-modal-box .td-pick-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: #8b95a1;
}
.ws-modal-box .td-pick-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12px;
  color: #8b95a1;
}
@media (max-width: 560px) {
  .ws-modal-box .td-pick-grid { grid-template-columns: minmax(0, 1fr); }
  .ws-modal-box .td-pick-list { max-height: 220px; }
}

/* 경조사 세부항목 — 특별휴가 + 경조사비를 한 항목으로 묶어 보여줄 때의 안내 */
.ws-modal-box .welfare-merged-head {
  font-weight: 800;
  margin-bottom: 6px;
}
.ws-modal-box .welfare-merged-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.ws-modal-box .welfare-merged-row + .welfare-merged-row {
  border-top: 1px solid rgba(67, 56, 202, .12);
}
.ws-modal-box .welfare-merged-label {
  flex: 0 0 auto;
  min-width: 58px;
  font-weight: 800;
  opacity: .75;
}
.ws-modal-box .welfare-merged-note {
  margin: 7px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(67, 56, 202, .12);
  opacity: .8;
}

.ws-modal-box button.ws-btn-save.welfare-proxy-submit {
  background: #5b5bd6 !important;
  border-color: #5b5bd6 !important;
  box-shadow: 0 8px 18px rgba(91,91,214,.22) !important;
}
.ws-modal-box button.ws-btn-save.welfare-proxy-submit:hover {
  background: #4444b8 !important;
  border-color: #4444b8 !important;
}
#work_support-content .welfare-tone-red .welfare-card-icon { color:#f04452; background:#ffecef; }
#work_support-content .welfare-tone-yellow .welfare-card-icon { color:#d97706; background:#fff4d6; }
#work_support-content .welfare-tone-green .welfare-card-icon { color:#008a63; background:#e5f7f0; }
#work_support-content .welfare-tone-purple .welfare-card-icon { color:#3182f6; background:#e8f3ff; }
#work_support-content .welfare-tone-blue .welfare-card-icon { color:#1b64da; background:#e8f3ff; }
#work_support-content .welfare-tone-gray .welfare-card-icon { color:#6b7684; background:#f2f4f6; }
#work_support-content .welfare-policy-manager-modal,
#work_support-content .welfare-policy-editor-modal {
  max-width: 720px;
}
#work_support-content .welfare-policy-manager-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  max-height: 68vh;
  overflow-y: auto;
}
#work_support-content .welfare-policy-manager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
#work_support-content .welfare-policy-manager-row:hover {
  border-color: #c9e2ff;
  background: #f7fbff;
}
#work_support-content .welfare-policy-manager-row span {
  min-width: 0;
}
#work_support-content .welfare-policy-manager-row strong {
  display: block;
  color: #191f28;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 900;
  overflow-wrap: anywhere;
}
#work_support-content .welfare-policy-manager-row small {
  display: block;
  margin-top: 3px;
  color: #8b95a1;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}
#work_support-content .welfare-policy-manager-row i {
  color: #8b95a1;
  flex-shrink: 0;
}
#work_support-content .welfare-policy-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#work_support-content .welfare-policy-editor-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #1b64da;
  background: #e8f3ff;
  font-size: 12px;
  font-weight: 800;
}
#work_support-content .welfare-empty-policy.compact {
  margin: 0;
  padding: 24px 18px;
}

#work_support-content .ws-panel > .flex.justify-between.items-center:first-child {
  align-items: center !important;
  gap: 12px;
  margin-bottom: 16px !important;
  padding: 16px 18px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fbfcff;
}
#work_support-content .ws-panel h3 {
  margin: 0 !important;
  color: #191f28 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}
#work_support-content .ws-panel > .flex.justify-between.items-center:first-child button:not(#pr-guide-settings-btn),
#work_support-content #sup-inline-save-btn {
  min-height: 36px;
  border: 1px solid #3182f6 !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #3182f6 !important;
  color: #fff !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}
#work_support-content .ws-panel > .flex.justify-between.items-center:first-child button:not(#pr-guide-settings-btn):hover,
#work_support-content #sup-inline-save-btn:hover {
  background: #1b64da !important;
  border-color: #1b64da !important;
}
#work_support-content #pr-guide-settings-btn {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
#work_support-content #pr-guide-settings-btn span {
  min-height: 36px;
  border: 1px solid #e5e8eb;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff !important;
  color: #6b7684 !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
#work_support-content #ws-panel-supplies > .bg-orange-50 {
  border-color: #e5e8eb !important;
  border-radius: 8px !important;
  background: #fbfcff !important;
}
#work_support-content .ws-input {
  min-height: 38px;
  border-color: #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}
#work_support-content .ws-input:focus {
  border-color: #3182f6 !important;
  box-shadow: 0 0 0 3px rgba(49,130,246,.16) !important;
}

/* ═══════════════════════════════════════════════════════
   캘린더
   ═══════════════════════════════════════════════════════ */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:#e5e7eb; border-radius:12px; overflow:hidden; }
.cal-header { padding:8px; text-align:center; font-size:11px; font-weight:700; color:#6b7280; background:#f9fafb; }
.cal-header:first-child { color: #ef4444; }
.cal-header:last-child { color: #3b82f6; }
.cal-cell { min-height:80px; padding:4px 6px; background:#fff; font-size:12px; cursor:pointer; transition:background .15s; }
.cal-cell:hover { background:#f0f7ff; }
.cal-cell.today { background:#eff6ff; }
.cal-cell.other-month { color:#d1d5db; background:#fafafa; }
.cal-day { font-weight:600; margin-bottom:2px; }
.cal-event { font-size:10px; padding:1px 4px; border-radius:3px; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; }

/* ═══════════════════════════════════════════════════════
   로딩 / 스켈레톤
   ═══════════════════════════════════════════════════════ */
.loading-placeholder { text-align:center; padding:40px 0; color:#9ca3af; font-size:14px; }
.skeleton { background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size:200% 100%; animation:pulse 1.5s infinite; border-radius:6px; height:16px; margin:8px 0; }

/* ═══════════════════════════════════════════════════════
   홈 대시보드 — Toss-style layout
   ═══════════════════════════════════════════════════════ */
.dashboard-toss-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.dashboard-span { grid-column: 1 / -1; }
.dashboard-card {
  background: #fff;
  border: 1px solid rgba(229,232,235,.9);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(25,31,40,.08);
  overflow: hidden;
}
.dashboard-hero {
  padding: 24px;
  background: radial-gradient(circle at 86% 12%, rgba(49,130,246,.10), transparent 24%), linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.dashboard-hero-top,
.dashboard-card-head,
.dashboard-embedded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-chip,
.dashboard-muted-pill,
.dashboard-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: #f2f4f6;
  color: #6b7684;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-count-badge {
  background: #ffecef;
  color: #f04452;
}
.dashboard-count-badge.purple {
  background: #e8f3ff;
  color: #3182f6;
}
.dashboard-hero-copy { margin-top: 18px; }
.dashboard-hero-copy h2 {
  margin: 0;
  color: #191f28;
  font-size: 31px;
  line-height: 1.32;
  font-weight: 900;
  letter-spacing: 0;
}
.dashboard-hero-copy p {
  margin: 9px 0 0;
  color: #6b7684;
  font-size: 13px;
  font-weight: 700;
}
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}
.dashboard-metric {
  min-height: 86px;
  padding: 14px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
}
.dashboard-metric span {
  color: #6b7684;
  font-size: 12px;
  font-weight: 800;
}
.dashboard-metric strong {
  display: block;
  margin-top: 9px;
  color: #191f28;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}
.dashboard-metric em {
  display: block;
  margin-top: 7px;
  color: #8b95a1;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.dashboard-card-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e5e8eb;
}
.dashboard-card-head h3,
.dashboard-embedded-head h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #191f28;
  font-size: 17px;
  font-weight: 900;
}
.dashboard-card-head p {
  margin: 5px 0 0;
  color: #8b95a1;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dashboard-small-btn,
.dashboard-primary-btn,
.dashboard-mini-refresh {
  min-height: 34px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: #6b7684;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.dashboard-small-btn-blue,
.dashboard-primary-btn {
  border-color: #3182f6;
  background: #3182f6;
  color: #fff;
}
.dashboard-small-btn-yellow {
  border-color: #f59f00;
  background: #f59f00;
  color: #fff;
}
.dashboard-mini-refresh {
  min-height: 28px;
  padding: 0 9px;
  background: #f2f4f6;
  border-color: transparent;
  font-size: 11px;
}
.dashboard-scroll-list {
  height: 326px;
  overflow-y: auto;
  padding: 12px 18px 16px;
}
.dashboard-equal-card {
  height: 402px;
  display: flex;
  flex-direction: column;
}
.dashboard-news-list .nf-row {
  margin-bottom: 6px !important;
}
.dashboard-news-list .toss-detail-row {
  grid-template-columns: 34px minmax(0, 1fr) 52px;
  gap: 10px;
  padding: 10px 12px;
  align-items: center;
}
.dashboard-news-list .toss-detail-icon {
  width: 34px;
  height: 34px;
  font-size: 15px;
}
.dashboard-news-list .toss-detail-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
}
.dashboard-news-list .toss-detail-title {
  flex: 0 0 100%;
  font-size: 13px;
}
.dashboard-news-list .toss-detail-desc {
  flex: 1 1 120px;
  min-width: 0;
  margin-top: 3px;
}
.dashboard-news-list .toss-detail-meta {
  flex: 0 0 auto;
  margin-top: 3px;
  gap: 4px;
}
.dashboard-news-list .toss-detail-side {
  min-width: 52px;
  gap: 4px;
}
.dashboard-news-list .toss-mini-chip {
  height: 20px;
  padding: 0 6px;
  font-size: 10px;
}
.dashboard-quick-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 18px 12px;
  padding: 4px;
  border-radius: 8px;
  background: #f2f4f6;
}
.dashboard-quick-tab {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6b7684;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-quick-tab.active {
  background: #fff;
  color: #191f28;
  box-shadow: 0 3px 10px rgba(25,31,40,.08);
}
.dashboard-quick-panels {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 18px;
}
.dashboard-quick-panel { display: none; }
.dashboard-quick-panel.active { display: block; }
.dashboard-embedded-panel {
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.toss-detail-list {
  display: grid;
  gap: 9px;
}
.toss-detail-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.toss-detail-row:hover {
  background: #f3f6fb;
  border-color: #e5e8eb;
}
.toss-detail-row.emphasis {
  background: #fffaf0;
  border-color: #ffedc2;
}
.toss-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #3182f6;
  font-size: 16px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px #e5e8eb;
}
.toss-detail-icon.yellow { color: #d97706; background: #fff7e6; box-shadow: none; }
.toss-detail-icon.red { color: #f04452; background: #ffecef; box-shadow: none; }
.toss-detail-icon.green { color: #00a878; background: #e5f7f0; box-shadow: none; }
.toss-detail-icon.purple { color: #3182f6; background: #e8f3ff; box-shadow: none; }
.toss-detail-main { min-width: 0; }
.toss-detail-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #191f28;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}
.toss-detail-title .title-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toss-detail-desc {
  margin-top: 4px;
  color: #6b7684;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toss-detail-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.toss-detail-side {
  min-width: 66px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.toss-date {
  color: #8b95a1;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.toss-mini-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.toss-mini-chip.gray { background: #eef1f4; color: #6b7684; }
.toss-mini-chip.yellow { background: #fff4d6; color: #9a6700; }
.toss-mini-chip.red { background: #ffecef; color: #f04452; }
.toss-mini-chip.green { background: #e5f7f0; color: #008a63; }
.toss-mini-chip.purple { background: #e8f3ff; color: #3182f6; }
.toss-amount {
  color: #1d4ed8;
  font-size: 15px;
  font-weight: 950;
  white-space: nowrap;
}
.toss-copy {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: #e8f3ff;
  color: #3182f6;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.admin-request-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f7fbff;
  border: 1px solid #dbeafe;
}
.admin-request-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.admin-request-person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.admin-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f3ff;
  color: #3182f6;
  font-size: 13px;
  font-weight: 950;
  flex: 0 0 auto;
}
.admin-person-name {
  color: #191f28;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
}
.admin-person-meta {
  margin-top: 3px;
  color: #6b7684;
  font-size: 12px;
  font-weight: 750;
}
.admin-request-note {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: #fff;
  color: #6b7684;
  font-size: 12px;
  font-weight: 750;
  border: 1px solid #e5e8eb;
}
.admin-request-note span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}
.admin-action-btn {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.admin-action-btn.approve { background: #3182f6; }
.admin-action-btn.reject { background: #f04452; }

/* ── 관리자 처리 필요 항목 — 컴팩트 카드(시안 C) ── */
.admin-req-c {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-bottom: 6px;
  background: #fff; border: 1px solid #e5e8eb; border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.admin-req-c:hover { border-color: #bfdbfe; box-shadow: 0 4px 12px rgba(25,31,40,.06); }
.admin-req-c .arc-av {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #e8f3ff; color: #3182f6; font-size: 12px; font-weight: 900;
}
.admin-req-c.c-yellow .arc-av { background: #fff4d6; color: #9a6700; }
.admin-req-c.c-red .arc-av    { background: #ffecef; color: #f04452; }
.admin-req-c .arc-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.admin-req-c .arc-l1 { display: flex; align-items: center; gap: 6px; }
.admin-req-c .arc-name {
  font-size: 13px; font-weight: 900; color: #191f28;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-req-c .arc-amt {
  margin-left: auto; font-size: 13px; font-weight: 900; color: #191f28;
  white-space: nowrap; flex-shrink: 0;
}
.admin-req-c .arc-meta {
  font-size: 11px; font-weight: 750; color: #6b7684;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-req-c .arc-copy {
  height: 18px; padding: 0 6px; border-radius: 5px; flex-shrink: 0;
  border: 1px solid #cfe0f5; background: #f4f8ff; color: #3182f6;
  font-size: 10px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
}
.admin-req-c .arc-copy:hover { background: #e8f3ff; border-color: #93c5fd; }
.admin-req-c .arc-icons { display: flex; gap: 5px; flex-shrink: 0; }
.admin-req-c .arc-ib {
  width: 30px; height: 30px; border-radius: 8px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; font-size: 12px;
  transition: background .15s;
}
.admin-req-c .arc-ib.ok { background: #3182f6; }
.admin-req-c .arc-ib.ok:hover { background: #1b64da; }
.admin-req-c .arc-ib.no { background: #f04452; }
.admin-req-c .arc-ib.no:hover { background: #d92d20; }
.dashboard-embedded-head {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e8eb;
  background: #fafbfc;
}
.dashboard-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-status-grid > div {
  min-width: 0;
  border-right: 1px solid #eef1f4;
}
.dashboard-status-grid > div:last-child { border-right: 0; }
.dashboard-status-grid [id^="user-status-"] {
  max-height: 170px;
  overflow-y: auto;
}
.dashboard-status-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid #eef1f4;
  font-size: 12px;
  font-weight: 900;
}
.dashboard-status-label.orange { background: #fff7ed; color: #c2410c; }
.dashboard-status-label.pink { background: #fdf2f8; color: #be185d; }
.dashboard-status-label.blue { background: #eff6ff; color: #1d4ed8; }
.dashboard-empty-state {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px dashed #d9dee4;
  border-radius: 8px;
  background: #fafbfc;
  color: #8b95a1;
  text-align: center;
  padding: 22px;
}
.dashboard-empty-state i {
  color: #b0b8c1;
  font-size: 22px;
}
.dashboard-empty-state strong {
  color: #4e5968;
  font-size: 14px;
  font-weight: 900;
}
.dashboard-empty-state span {
  max-width: 360px;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-task-preview {
  padding: 18px;
}
.dashboard-calendar-card {
  padding-bottom: 18px;
}
.dashboard-calendar-card #ws-calendar-view {
  padding: 18px 20px 0;
}
.dashboard-calendar-card #ws-calendar-view > div:first-child {
  margin-bottom: 14px !important;
}
.dashboard-calendar-card #ws-calendar-view [title] {
  height: auto !important;
  min-height: 20px !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 3px 5px !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Home dashboard microinteractions */
@keyframes dashboard-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboard-badge-pop {
  0% { transform: scale(.96); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

#dashboard-content .dashboard-card,
#dashboard-content .dashboard-metric,
#dashboard-content .dashboard-embedded-panel,
#dashboard-content .dashboard-empty-state,
#dashboard-content .toss-detail-row,
#dashboard-content .admin-request-card,
#dashboard-content .dashboard-small-btn,
#dashboard-content .dashboard-primary-btn,
#dashboard-content .dashboard-mini-refresh,
#dashboard-content .dashboard-quick-tab,
#dashboard-content .toss-copy,
#dashboard-content .admin-action-btn {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease,
    opacity .16s ease;
}

#dashboard-content .dashboard-card:hover {
  border-color: #dbeafe;
  box-shadow: 0 16px 38px rgba(25,31,40,.10);
}

#dashboard-content .dashboard-card:not(.dashboard-hero):not(.dashboard-calendar-card):hover,
#dashboard-content .dashboard-metric:hover,
#dashboard-content .dashboard-embedded-panel:hover {
  transform: translateY(-2px);
}

#dashboard-content .dashboard-card.dashboard-no-lift:hover {
  transform: none !important;
  border-color: rgba(229,232,235,.9);
  box-shadow: 0 12px 32px rgba(25,31,40,.08);
}

#dashboard-content .dashboard-metric:hover {
  border-color: #cfe5ff;
  background: #fbfdff;
  box-shadow: 0 12px 28px rgba(49,130,246,.10);
}

#dashboard-content .dashboard-metric:hover strong {
  color: #1b64da;
}

#dashboard-content .dashboard-chip,
#dashboard-content .dashboard-muted-pill,
#dashboard-content .dashboard-count-badge,
#dashboard-content .toss-mini-chip,
#dashboard-content .dashboard-status-label {
  transition: transform .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

#dashboard-content .dashboard-chip:hover,
#dashboard-content .dashboard-muted-pill:hover,
#dashboard-content .toss-mini-chip:hover,
#dashboard-content .dashboard-status-label:hover {
  transform: translateY(-1px);
}

#dashboard-content .dashboard-count-badge:not(:empty) {
  animation: dashboard-badge-pop .28s ease-out;
}

#dashboard-content .dashboard-small-btn:hover,
#dashboard-content .dashboard-primary-btn:hover,
#dashboard-content .dashboard-mini-refresh:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(49,130,246,.12);
}

#dashboard-content .dashboard-small-btn:active,
#dashboard-content .dashboard-primary-btn:active,
#dashboard-content .dashboard-mini-refresh:active,
#dashboard-content .dashboard-quick-tab:active,
#dashboard-content .toss-copy:active,
#dashboard-content .admin-action-btn:active {
  transform: translateY(0) scale(.98);
}

#dashboard-content .dashboard-mini-refresh:hover i {
  transform: rotate(90deg);
}

#dashboard-content .dashboard-mini-refresh i {
  transition: transform .2s ease;
}

#dashboard-content .dashboard-quick-tab:hover {
  background: rgba(255,255,255,.68);
  color: #1b64da;
}

#dashboard-content .dashboard-quick-tab.active {
  animation: dashboard-panel-in .18s ease-out;
}

#dashboard-content .dashboard-quick-panel.active {
  animation: dashboard-panel-in .22s ease-out;
}

#dashboard-content .toss-detail-row:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 20px rgba(25,31,40,.06);
}

#dashboard-content .toss-detail-row:hover .toss-detail-icon,
#dashboard-content .admin-request-card:hover .admin-avatar {
  transform: scale(1.04);
}

#dashboard-content .toss-detail-icon,
#dashboard-content .admin-avatar {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

#dashboard-content .toss-copy:hover {
  background: #dbeafe;
  color: #1b64da;
  box-shadow: 0 8px 16px rgba(49,130,246,.14);
}

#dashboard-content .admin-request-card:hover {
  border-color: #bfdbfe;
  background: #f4f9ff;
  box-shadow: 0 10px 24px rgba(49,130,246,.10);
}

#dashboard-content .admin-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(25,31,40,.12);
}

#dashboard-content .admin-action-btn.approve:hover { background: #1b64da; }
#dashboard-content .admin-action-btn.reject:hover { background: #d92d20; }

#dashboard-content .dashboard-empty-state:hover {
  border-color: #cfe5ff;
  background: #fbfdff;
}

#dashboard-content .dashboard-empty-state:hover i {
  color: #3182f6;
  transform: translateY(-1px);
}

#dashboard-content .dashboard-empty-state i {
  transition: transform .16s ease, color .16s ease;
}

#dashboard-content .dashboard-calendar-card #ws-calendar-view button,
#dashboard-content .dashboard-calendar-card #ws-calendar-view [role="button"],
#dashboard-content .dashboard-calendar-card #ws-calendar-view [onclick],
#dashboard-content .dashboard-calendar-card #ws-calendar-view [title] {
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}

#dashboard-content .dashboard-calendar-card #ws-calendar-view button:hover,
#dashboard-content .dashboard-calendar-card #ws-calendar-view [role="button"]:hover,
#dashboard-content .dashboard-calendar-card #ws-calendar-view [onclick]:hover {
  transform: translateY(-1px);
}

#dashboard-content .dashboard-calendar-card #ws-calendar-view [title]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(49,130,246,.12);
  filter: saturate(1.05);
}

#dashboard-content .dashboard-small-btn:focus-visible,
#dashboard-content .dashboard-primary-btn:focus-visible,
#dashboard-content .dashboard-mini-refresh:focus-visible,
#dashboard-content .dashboard-quick-tab:focus-visible,
#dashboard-content .toss-copy:focus-visible,
#dashboard-content .admin-action-btn:focus-visible,
#dashboard-content .dashboard-calendar-card #ws-calendar-view button:focus-visible {
  outline: 3px solid rgba(49,130,246,.24);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #dashboard-content .dashboard-card,
  #dashboard-content .dashboard-metric,
  #dashboard-content .dashboard-embedded-panel,
  #dashboard-content .dashboard-empty-state,
  #dashboard-content .toss-detail-row,
  #dashboard-content .admin-request-card,
  #dashboard-content .dashboard-small-btn,
  #dashboard-content .dashboard-primary-btn,
  #dashboard-content .dashboard-mini-refresh,
  #dashboard-content .dashboard-quick-tab,
  #dashboard-content .dashboard-quick-panel,
  #dashboard-content .toss-copy,
  #dashboard-content .admin-action-btn,
  #dashboard-content .dashboard-calendar-card #ws-calendar-view *,
  #dashboard-content .dashboard-count-badge:not(:empty) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   토스트
   ═══════════════════════════════════════════════════════ */
.toast {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; color:#fff;
  font-size:13px; font-weight:500;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  pointer-events:auto; animation:fadeIn .3s ease-out;
}
.toast-success { background:#16a34a; }
.toast-error { background:#dc2626; }
.toast-warning { background:#b45309; }
.toast-info { background:#3563e9; }

/* ═══════════════════════════════════════════════════════
   영업기록 모달 UX — 스텝퍼·칩·접이식·진행바
   ═══════════════════════════════════════════════════════ */
.act-chip input:checked + .act-chip-label {
  border-color: #3563e9 !important;
  background: #3563e9 !important;
  color: #ffffff !important;
}
.act-chip-label { transition: all .15s ease; }
.act-step-display:hover::after { content:'✏'; font-size:10px; margin-left:4px; opacity:0.4; }
.act-step-input:focus { border-bottom-color:#3563e9; box-shadow:0 2px 0 0 #93c5fd; }
#act-iboss-body, #act-memento-body, #act-history-body { transition:max-height .2s ease; }
#act-progress-bar { min-width:4px; }
#act-history-list .flex:hover { background:#f8fafc; border-radius:6px; }
.act-stepper-wrap.col-span-2 .act-step-display { font-size:1.5rem; line-height:2rem; }
#activity-record-modal > div > div:last-child { box-shadow:0 -2px 8px rgba(0,0,0,0.06); }

/* ═══════════════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #sidebar { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
  #main-content { margin-left: 220px !important; }
  .dashboard-toss-grid { grid-template-columns: 1fr; }
  .dashboard-span { grid-column: auto; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-status-grid { grid-template-columns: 1fr; }
  .dashboard-status-grid > div { border-right: 0; border-bottom: 1px solid #eef1f4; }
  #work_support-content .work-support-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #work_support-content .welfare-policy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #sidebar { width: 56px !important; min-width: 56px !important; max-width: 56px !important; }
  #main-content { margin-left: 56px !important; }
  .sidebar-logo-text, .sidebar-user-name, .sidebar-section-label, .sidebar-section,
  .tab-btn span, .nav-item span, .sidebar-special-btn span, .sidebar-action-btn span { display: none !important; }
  .tab-btn, .nav-item, .sidebar-special-btn { justify-content: center !important; padding: 10px !important; }
  .tab-btn i, .nav-item i, .sidebar-special-btn i { width: auto !important; margin: 0 !important; }
  #content-wrapper { padding: 12px !important; }
  .dashboard-hero-copy h2 { font-size: 24px; }
  .dashboard-metrics, .dashboard-quick-tabs { grid-template-columns: 1fr; }
  #work_support-content .work-support-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #work_support-content .work-support-head,
  #work_support-content .ws-panel { padding-left: 14px !important; padding-right: 14px !important; }
  #work_support-content .welfare-hero,
  #work_support-content .welfare-quick-apply {
    flex-direction: column;
    align-items: stretch;
  }
  #work_support-content .welfare-hero-stats {
    justify-content: flex-start;
    max-width: none;
  }
  #work_support-content .welfare-policy-grid { grid-template-columns: 1fr; }
  #work_support-content .welfare-card { min-height: 0; }
  #work_support-content .welfare-card-actions { align-items: stretch; }
  #work_support-content .welfare-apply-btn.primary,
  #work_support-content .welfare-card-actions .welfare-apply-btn { flex: 1; }
  #work_support-content .welfare-consolation-cols { grid-template-columns: 1fr; }
  #work_support-content .welfare-policy-editor-grid { grid-template-columns: 1fr; }
  #work_support-content .welfare-policy-manager-list { padding: 14px; }
  .dashboard-card-head, .dashboard-hero-top { align-items: flex-start; flex-direction: column; }
  .dashboard-scroll-list { height: auto; max-height: 360px; }
  .toss-detail-row,
  .admin-request-top {
    grid-template-columns: 1fr;
  }
  .toss-detail-icon {
    display: none;
  }
  .toss-detail-side {
    align-items: flex-start;
    min-width: 0;
  }
  .admin-request-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ── 세일즈플로우 서브탭 네비게이션 ─────────────────── */
.pl-nav-tab {
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  outline: none;
}
.pl-nav-tab i {
  opacity: 0.45;
  transition: opacity 0.2s;
}
.pl-nav-tab:hover {
  color: #3182f6;
  border-bottom-color: #c7d2fe;
}
.pl-nav-tab:hover i {
  opacity: 0.7;
}
.pl-nav-tab--active {
  color: #1b64da !important;
  border-bottom-color: #3182f6 !important;
}
.pl-nav-tab--active i {
  opacity: 1 !important;
  color: #3182f6;
}

/* 인라인 패널 칩 */
.act-chip-label {
  transition: all 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fade-in 0.3s ease; }

/* Toss-style sidebar refresh */
:root {
  --sidebar-expanded-width: 280px;
  --sidebar-collapsed-width: 76px;

  /* 토스 디자인 토큰 전역화 — 모달은 body 직속으로 렌더링되어 .toss-module 스코프 밖이므로
     동일 값을 :root 에도 정의해 어디서나 var(--toss-*) 사용 가능하게 함 (.toss-module 정의는 회귀 방지용으로 유지) */
  --toss-bg: #f6f8fb;
  --toss-surface: #ffffff;
  --toss-soft: #f2f4f6;
  --toss-text: #191f28;
  --toss-muted: #6b7684;
  --toss-weak: #8b95a1;
  --toss-line: #e5e8eb;
  --toss-blue: #3182f6;
  --toss-blue-soft: #e8f3ff;
  --toss-green: #00a878;
  --toss-green-soft: #e5f7f0;
  --toss-yellow-soft: #fff4d6;
  --toss-red: #f04452;
  --toss-red-soft: #ffecef;
  --toss-shadow: 0 12px 32px rgba(25, 31, 40, .08);
  --toss-modal-shadow: 0 24px 70px rgba(25, 31, 40, .26);
  --toss-ease: cubic-bezier(.2, .8, .2, 1);
}

#app-layout {
  background: #f6f8fb !important;
}

#sidebar {
  width: var(--sidebar-expanded-width) !important;
  min-width: var(--sidebar-expanded-width) !important;
  max-width: var(--sidebar-expanded-width) !important;
  background: #ffffff !important;
  border-right: 1px solid #e9edf3 !important;
  box-shadow: 12px 0 32px rgba(15, 23, 42, 0.05) !important;
  color: #191f28 !important;
  transition: width .22s ease, min-width .22s ease, max-width .22s ease, box-shadow .22s ease !important;
  scrollbar-color: #aeb9cc transparent !important;
}

#sidebar::-webkit-scrollbar { width: 14px !important; height: 14px !important; }
#sidebar::-webkit-scrollbar-thumb {
  background: #aeb9cc !important;
  border-radius: 999px !important;
  border: 4px solid transparent !important;
  background-clip: padding-box !important;
}
#sidebar:hover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #9cc0fb, #5b83c9) !important;
  border-width: 2px !important;
  background-clip: padding-box !important;
}
#sidebar::-webkit-scrollbar-thumb:hover {
  border-width: 1px !important;
  background: linear-gradient(180deg, #5b83c9, #2563eb) !important;
}
#sidebar:hover { scrollbar-color: #5b83c9 #e9eef7 !important; }

.sidebar-logo {
  position: relative !important;
  min-height: 72px !important;
  padding: 16px 14px 14px 18px !important;
  border-bottom: 1px solid #f1f3f5 !important;
  gap: 12px !important;
}

.sidebar-logo img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(49, 130, 246, .16) !important;
}

.logo-name {
  color: #191f28 !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.logo-sub {
  color: #8b95a1 !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

.sidebar-toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-left: auto !important;
  border: 1px solid #edf1f5 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  color: #6b7684 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
}

.sidebar-toggle-btn:hover {
  background: #eef6ff !important;
  border-color: #d6e8ff !important;
  color: #3182f6 !important;
}

.sidebar-toggle-btn i {
  font-size: 12px !important;
  transition: transform .2s ease !important;
}

.sidebar-user {
  padding: 12px 14px 10px !important;
  border-bottom: 0 !important;
}

.sidebar-user-inner {
  background: #f6f8fb !important;
  border: 1px solid #edf1f5 !important;
  border-radius: 16px !important;
  padding: 11px 12px !important;
}

.sidebar-user-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: #3182f6 !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .22) !important;
}

.sidebar-user-name {
  color: #333d4b !important;
  font-weight: 700 !important;
}

.admin-test-profile-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: 34px !important;
  height: 28px !important;
  margin-left: auto !important;
  padding: 0 8px !important;
  border: 1px solid #d6e8ff !important;
  border-radius: 8px !important;
  background: #e8f3ff !important;
  color: #3182f6 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease !important;
  flex-shrink: 0 !important;
}

.admin-test-profile-btn:hover {
  background: #dceeff !important;
  border-color: #b9dcff !important;
  color: #1b64da !important;
}

.admin-test-profile-btn.is-active {
  background: #3182f6 !important;
  border-color: #3182f6 !important;
  color: #fff !important;
}

.admin-test-profile-btn.hidden {
  display: none !important;
}

.sidebar-nav {
  padding: 4px 12px 12px !important;
  gap: 2px !important;
}

.sidebar-section-label,
.sidebar-section {
  padding: 16px 10px 7px !important;
  color: #8b95a1 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tab-btn,
.nav-item,
.sidebar-special-btn {
  min-height: 42px !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  border-radius: 12px !important;
  color: #4e5968 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  background: transparent !important;
}

.tab-btn i,
.nav-item i,
.sidebar-special-btn i {
  width: 22px !important;
  height: 22px !important;
  border-radius: 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8b95a1 !important;
  opacity: 1 !important;
  font-size: 13px !important;
}

.tab-btn:hover,
.nav-item:hover,
.sidebar-special-btn:hover {
  background: #f6f8fb !important;
  color: #191f28 !important;
  transform: translateX(1px) !important;
}

.tab-btn:hover i,
.nav-item:hover i,
.sidebar-special-btn:hover i {
  color: #3182f6 !important;
}

.tab-active,
.nav-item.active {
  background: #eef6ff !important;
  color: #1b64da !important;
  font-weight: 800 !important;
}

.tab-active i,
.nav-item.active i {
  background: #3182f6 !important;
  color: #ffffff !important;
}

.tab-active::before,
.nav-item.active::before {
  display: none !important;
}

.sidebar-special-btn.accent-purple,
.sidebar-special-btn.accent-slate,
.sidebar-special-btn.accent-orange {
  color: #4e5968 !important;
}

.sidebar-special-btn.accent-purple:hover,
.sidebar-special-btn.accent-slate:hover,
.sidebar-special-btn.accent-orange:hover {
  background: #f6f8fb !important;
  color: #191f28 !important;
}

.nav-badge {
  background: #ff5b5b !important;
  box-shadow: 0 4px 10px rgba(255, 91, 91, .24) !important;
}

.sidebar-actions {
  padding: 12px 14px 16px !important;
  border-top: 1px solid #f1f3f5 !important;
  background: #ffffff !important;
  gap: 6px !important;
}

.sidebar-action-btn {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border-radius: 12px !important;
  color: #6b7684 !important;
  background: transparent !important;
  font-weight: 700 !important;
}

.sidebar-action-btn i {
  width: 18px !important;
  color: #8b95a1 !important;
}

.sidebar-action-btn:hover {
  background: #f6f8fb !important;
  color: #191f28 !important;
}

.sidebar-action-btn.btn-pwd {
  background: #f6f8fb !important;
  color: #4e5968 !important;
}

.sidebar-action-btn.btn-pwd:hover {
  background: #eef6ff !important;
  color: #1b64da !important;
}

.sidebar-action-btn.btn-logout,
.sidebar-action-btn.logout {
  background: #fff2f2 !important;
  color: #e5484d !important;
}

.sidebar-action-btn.btn-logout:hover,
.sidebar-action-btn.logout:hover {
  background: #ffe5e5 !important;
  color: #d92d20 !important;
}

#main-content {
  margin-left: var(--sidebar-expanded-width) !important;
  transition: margin-left .22s ease !important;
}

body.sidebar-collapsed #sidebar {
  width: var(--sidebar-collapsed-width) !important;
  min-width: var(--sidebar-collapsed-width) !important;
  max-width: var(--sidebar-collapsed-width) !important;
}

body.sidebar-collapsed #main-content {
  margin-left: var(--sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .sidebar-logo {
  padding-left: 12px !important;
  padding-right: 12px !important;
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .sidebar-user-name,
body.sidebar-collapsed .admin-test-profile-btn span,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .sidebar-section,
body.sidebar-collapsed .tab-btn span,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .sidebar-special-btn span,
body.sidebar-collapsed .sidebar-action-btn span,
body.sidebar-collapsed #current-view-month {
  display: none !important;
}

body.sidebar-collapsed .sidebar-logo img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
}

body.sidebar-collapsed .sidebar-toggle-btn {
  position: absolute !important;
  top: 54px !important;
  right: -15px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin-left: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .12) !important;
}

body.sidebar-collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg) !important;
}

body.sidebar-collapsed .sidebar-user {
  padding: 10px 12px !important;
}

body.sidebar-collapsed .sidebar-user-inner {
  justify-content: center !important;
  padding: 8px !important;
  border-radius: 14px !important;
}

body.sidebar-collapsed .admin-test-profile-btn {
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

body.sidebar-collapsed .sidebar-nav {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.sidebar-collapsed .tab-btn,
body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .sidebar-special-btn,
body.sidebar-collapsed .sidebar-action-btn {
  justify-content: center !important;
  padding: 10px !important;
}

body.sidebar-collapsed .tab-btn i,
body.sidebar-collapsed .nav-item i,
body.sidebar-collapsed .sidebar-special-btn i,
body.sidebar-collapsed .sidebar-action-btn i {
  width: 22px !important;
  margin: 0 !important;
}

/* Signal board sidebar — accordion navigation */
#sidebar {
  background: #111827 !important;
  border-right-color: #253044 !important;
  box-shadow: 12px 0 32px rgba(0, 0, 0, .16) !important;
  color: #e8edf7 !important;
}

.sidebar-logo { border-bottom-color: rgba(255,255,255,.08) !important; }
.logo-name { color: #f8fafc !important; }
.logo-sub { color: #8f9db4 !important; }
.sidebar-toggle-btn { border-color: rgba(255,255,255,.11) !important; background: rgba(255,255,255,.06) !important; color: #b7c3d7 !important; }
.sidebar-toggle-btn:hover { border-color: rgba(123,164,255,.45) !important; background: rgba(93,141,255,.14) !important; color: #dbe7ff !important; }
.sidebar-user-inner { border-color: rgba(255,255,255,.08) !important; background: rgba(255,255,255,.055) !important; }
.sidebar-user-name { color: #eef3fb !important; }
.sidebar-user-avatar { background: #4d7cf0 !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; }
.sidebar-nav { padding: 8px 12px 16px !important; }
.sidebar-nav.sidebar-menu-pending > :not(.sidebar-menu-loading) { display: none !important; }
.sidebar-menu-loading { display: none; gap: 8px; padding: 16px 10px; color: #aab6cb; }
.sidebar-menu-pending .sidebar-menu-loading { display: grid; }
.sidebar-menu-loading-text { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.sidebar-menu-loading-bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); }
.sidebar-menu-loading-bar:nth-of-type(2) { width: 82%; }
.sidebar-menu-loading-bar:nth-of-type(3) { width: 66%; }
.sidebar-menu-group { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-menu-group.sidebar-hidden { display: none !important; }
.sidebar-section-label.sidebar-accordion-trigger { width: 100% !important; min-height: 46px !important; display: flex !important; align-items: center !important; padding: 0 10px !important; border: 0 !important; color: #aab6cb !important; background: transparent !important; cursor: pointer !important; text-align: left !important; }
.sidebar-section-label.sidebar-accordion-trigger:hover { color: #ffffff !important; }
.sidebar-section-title { font-size: 12px !important; font-weight: 800 !important; letter-spacing: .04em !important; }
.sidebar-accordion-chevron { width: auto !important; height: auto !important; margin-left: auto !important; color: #7f8da4 !important; font-size: 11px !important; transition: transform .15s ease !important; }
.sidebar-menu-group.is-open .sidebar-accordion-chevron { transform: rotate(180deg); }
.sidebar-menu-items { display: none; padding: 0 0 10px; }
.sidebar-menu-group.is-open .sidebar-menu-items { display: block; }
.sidebar-submenu-group { margin: 2px 0 3px; border-top: 1px solid rgba(255,255,255,.055); }
.sidebar-submenu-trigger { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 0 10px 0 20px; border: 0; color: #93a2ba; background: transparent; cursor: pointer; text-align: left; font-size: 11.5px; font-weight: 750; }
.sidebar-submenu-trigger:hover { color: #edf3ff; background: rgba(255,255,255,.045); }
.sidebar-submenu-chevron { margin-left: auto; color: #6f809b; font-size: 10px; transition: transform .15s ease; }
.sidebar-submenu-group.is-open .sidebar-submenu-chevron { transform: rotate(180deg); }
.sidebar-submenu-items { display: none; padding: 0 0 5px 12px; }
.sidebar-submenu-group.is-open .sidebar-submenu-items { display: block; }
.tab-btn, .nav-item, .sidebar-special-btn { min-height: 36px !important; margin: 0 !important; border-radius: 0 !important; color: #aeb9cb !important; font-size: 12px !important; font-weight: 650 !important; }
.tab-btn i, .nav-item i, .sidebar-special-btn i { color: #7e8ea7 !important; }
.tab-btn:hover, .nav-item:hover, .sidebar-special-btn:hover { color: #ffffff !important; background: rgba(255,255,255,.06) !important; transform: none !important; }
.tab-btn:hover i, .nav-item:hover i, .sidebar-special-btn:hover i { color: #cbd9f5 !important; }
.tab-active, .nav-item.active { color: #ffffff !important; background: rgba(255,255,255,.10) !important; }
.tab-active::before, .nav-item.active::before { display: block !important; top: 7px !important; bottom: 7px !important; left: 0 !important; width: 2px !important; border-radius: 0 !important; background: #5d8dff !important; }
.tab-active i, .nav-item.active i { background: transparent !important; color: #78a2ff !important; }
.sidebar-special-btn.accent-purple, .sidebar-special-btn.accent-slate, .sidebar-special-btn.accent-orange { color: #aeb9cb !important; }
.sidebar-actions { border-top-color: rgba(255,255,255,.08) !important; background: #111827 !important; }
.sidebar-action-btn { color: #aeb9cb !important; }
.sidebar-action-btn i { color: #7e8ea7 !important; }
.sidebar-action-btn:hover { color: #ffffff !important; background: rgba(255,255,255,.06) !important; }
.sidebar-action-btn.btn-pwd { color: #aeb9cb !important; background: rgba(255,255,255,.055) !important; }
.sidebar-action-btn.btn-pwd:hover { color: #ffffff !important; background: rgba(93,141,255,.14) !important; }

body.sidebar-collapsed .sidebar-menu-group { border-bottom: 0; }
body.sidebar-collapsed .sidebar-accordion-trigger { display: none !important; }
body.sidebar-collapsed .sidebar-menu-items { display: block !important; padding-bottom: 0; }
body.sidebar-collapsed .sidebar-submenu-trigger { display: none !important; }
body.sidebar-collapsed .sidebar-submenu-items { display: block !important; padding-left: 0; }

@media (max-width: 1024px) {
  #sidebar {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }

  #main-content {
    margin-left: 240px !important;
  }

  body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width) !important;
    min-width: var(--sidebar-collapsed-width) !important;
    max-width: var(--sidebar-collapsed-width) !important;
  }

  body.sidebar-collapsed #main-content {
    margin-left: var(--sidebar-collapsed-width) !important;
  }
}

@media (max-width: 768px) {
  #sidebar {
    width: var(--sidebar-collapsed-width) !important;
    min-width: var(--sidebar-collapsed-width) !important;
    max-width: var(--sidebar-collapsed-width) !important;
  }

  #main-content {
    margin-left: var(--sidebar-collapsed-width) !important;
  }

  .sidebar-logo-text,
  .sidebar-user-name,
  .sidebar-section-label,
  .sidebar-section,
  .tab-btn span,
  .nav-item span,
  .sidebar-special-btn span,
  .sidebar-action-btn span {
    display: none !important;
  }
}

/* Toss-style module pages: campaigns, bank, onboarding, dev board */
.toss-module {
  --toss-bg: #f6f8fb;
  --toss-surface: #ffffff;
  --toss-soft: #f2f4f6;
  --toss-text: #191f28;
  --toss-muted: #6b7684;
  --toss-weak: #8b95a1;
  --toss-line: #e5e8eb;
  --toss-blue: #3182f6;
  --toss-blue-soft: #e8f3ff;
  --toss-green: #00a878;
  --toss-green-soft: #e5f7f0;
  --toss-yellow-soft: #fff4d6;
  --toss-red: #f04452;
  --toss-red-soft: #ffecef;
  --toss-shadow: 0 12px 32px rgba(25, 31, 40, .08);
  --toss-ease: cubic-bezier(.2, .8, .2, 1);
  color: var(--toss-text);
  letter-spacing: 0;
}

.toss-module > .container,
.toss-module > .max-w-6xl,
.toss-module #dev-board-main {
  max-width: 1440px !important;
  margin-inline: auto !important;
}

.toss-module > .container > .bg-white,
.toss-module > .max-w-6xl > .bg-white,
.toss-module #dev-board-main > .bg-white {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  box-shadow: var(--toss-shadow) !important;
  overflow: hidden;
}

.toss-module h2,
.toss-module h3,
.toss-module h4 {
  color: var(--toss-text) !important;
  letter-spacing: 0 !important;
}

.toss-module h2 i,
.toss-module h3 i {
  color: var(--toss-blue) !important;
}

.toss-module input,
.toss-module select,
.toss-module textarea {
  border-color: #dfe4ea !important;
  border-radius: 8px !important;
  color: #333d4b !important;
  background: #fff !important;
  box-shadow: none !important;
}

.toss-module input:focus,
.toss-module select:focus,
.toss-module textarea:focus {
  border-color: var(--toss-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
}

.toss-module button {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.toss-module button[class*="bg-blue-600"],
.toss-module button[class*="bg-green-600"],
.toss-module button[class*="bg-rose-600"],
.toss-module button[class*="bg-violet-600"] {
  background: var(--toss-blue) !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

.toss-module button[class*="bg-blue-600"]:hover,
.toss-module button[class*="bg-green-600"]:hover,
.toss-module button[class*="bg-rose-600"]:hover,
.toss-module button[class*="bg-violet-600"]:hover {
  background: #1b64da !important;
}

.toss-module button[class*="bg-gray-100"],
.toss-module button[class*="bg-white"] {
  background: var(--toss-soft) !important;
  border-color: transparent !important;
  color: var(--toss-muted) !important;
}

.toss-module button[class*="bg-gray-100"]:hover,
.toss-module button[class*="bg-white"]:hover {
  background: #e8edf3 !important;
  color: var(--toss-text) !important;
}

.toss-module .border-gray-100,
.toss-module .border-gray-200,
.toss-module .border-gray-300 {
  border-color: var(--toss-line) !important;
}

.toss-module .text-gray-800,
.toss-module .text-gray-700 {
  color: var(--toss-text) !important;
}

.toss-module .text-gray-500,
.toss-module .text-gray-400 {
  color: var(--toss-muted) !important;
}

.toss-module .rounded-lg,
.toss-module .rounded-xl,
.toss-module .rounded-2xl {
  border-radius: 8px !important;
}

.toss-module .shadow-md,
.toss-module .shadow-sm {
  box-shadow: var(--toss-shadow) !important;
}

.toss-module .bg-gray-50,
.toss-module .bg-gray-100 {
  background: var(--toss-soft) !important;
}

.toss-campaign-page > .container > .bg-white,
.toss-onboarding-page > .container > .bg-white,
.toss-dev-page #dev-board-main > .bg-white {
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
}

.toss-campaign-page > .container > .bg-white > .flex:first-child,
.toss-onboarding-page > .container > .bg-white > .flex:first-child,
.toss-dev-page #dev-board-main > .bg-white > div:first-child {
  padding: 22px 24px 18px !important;
  margin: 0 !important;
  border-bottom: 1px solid #eef1f4 !important;
}

.toss-campaign-page #campaigns-list,
.toss-onboarding-page #onboarding-list,
.toss-dev-page #dev-board-list {
  padding: 22px 24px 24px;
  background: #fff;
}

.toss-campaign-page table {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
}

.toss-campaign-page thead {
  background: var(--toss-soft) !important;
}

.toss-campaign-page th {
  border-bottom: 1px solid var(--toss-line) !important;
  color: var(--toss-muted) !important;
  font-weight: 800 !important;
}

.toss-campaign-page td {
  border-bottom: 1px solid #eef1f4 !important;
  color: #333d4b !important;
  padding-block: 10px !important;
}

.toss-campaign-page tbody tr:hover {
  background: #f8fbff !important;
}

.toss-campaign-page #camp-scroll-mirror-wrap {
  height: 12px !important;
  margin: 0 24px 6px !important;
}

.toss-bank-page > .max-w-6xl {
  max-width: 1440px !important;
}

.toss-bank-page > .max-w-6xl > .flex:first-child {
  padding: 22px 24px 18px !important;
  margin-bottom: 0 !important;
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-bank-page > .max-w-6xl > .flex:first-child span[class*="bg-blue-600"] {
  background: var(--toss-blue-soft) !important;
  box-shadow: none !important;
}

.toss-bank-page > .max-w-6xl > .flex:first-child span[class*="bg-blue-600"] i {
  color: var(--toss-blue) !important;
}

.toss-bank-page > .max-w-6xl > .flex:nth-child(2) {
  gap: 6px !important;
  padding: 4px !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  background: var(--toss-soft) !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .05) !important;
}

.toss-bank-page [id^="bank-tab-"] {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 7px !important;
  justify-content: center !important;
  color: var(--toss-muted) !important;
  background: transparent !important;
  margin: 0 !important;
}

.toss-bank-page [id^="bank-tab-"].bg-blue-50\/50,
.toss-bank-page [id^="bank-tab-"][class*="text-blue-600"] {
  background: #fff !important;
  color: var(--toss-text) !important;
  box-shadow: 0 3px 10px rgba(25, 31, 40, .08) !important;
}

.toss-bank-page #bank-panel-txn > .bg-white,
.toss-bank-page #bank-panel-holder > .bg-white,
.toss-bank-page #bank-panel-holder > .flex,
.toss-bank-page #bank-panel-jobs > .mt-5,
.toss-bank-page #bank-txn-wrap > div,
.toss-bank-page #holder-result-wrap > div {
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-bank-page #bank-summary-wrap > div {
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
}

.toss-bank-page #bank-summary-wrap i,
.toss-bank-page #bank-summary-wrap p[id] {
  color: var(--toss-blue) !important;
}

.toss-onboarding-page #onboarding-description {
  margin: -8px 24px 18px !important;
  color: var(--toss-muted) !important;
}

.toss-onboarding-page .flex.items-center.gap-2.mb-4 {
  padding: 0 24px 18px !important;
  margin-bottom: 0 !important;
  background: #fff !important;
}

.toss-onboarding-page #onboarding-list > .space-y-3 > div,
.toss-onboarding-page #onboarding-list .border.rounded-xl {
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
}

.toss-onboarding-page #onboarding-list .rounded-full {
  border-radius: 999px !important;
}

.toss-onboarding-page #onboarding-list .bg-gradient-to-br {
  background: var(--toss-blue) !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .18) !important;
}

.toss-dev-page #dev-board-main > .bg-white > .p-6,
.toss-dev-page #dev-board-main > .bg-white > .px-6 {
  background: #fff !important;
}

.toss-dev-page #dev-board-list > .space-y-2 > div {
  min-height: 62px;
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .04);
}

.toss-dev-page #dev-board-list > .space-y-2 > div:hover {
  border-color: #c9e0ff !important;
  background: #f8fbff !important;
}

.toss-dev-page [class*="bg-rose-100"],
.toss-dev-page [class*="bg-red-100"] {
  background: var(--toss-red-soft) !important;
  color: var(--toss-red) !important;
}

.toss-dev-page [class*="bg-orange-100"],
.toss-onboarding-page [class*="bg-yellow-100"],
.toss-bank-page [class*="bg-amber-"] {
  background: var(--toss-yellow-soft) !important;
  color: #9a6700 !important;
}

.toss-module [class*="bg-green-100"],
.toss-module [class*="bg-emerald-"] {
  background: var(--toss-green-soft) !important;
  color: var(--toss-green) !important;
}

.toss-module [class*="bg-blue-100"],
.toss-module [class*="bg-blue-50"] {
  background: var(--toss-blue-soft) !important;
  color: var(--toss-blue) !important;
}

@media (max-width: 768px) {
  .toss-campaign-page > .container > .bg-white > .flex:first-child,
  .toss-onboarding-page > .container > .bg-white > .flex:first-child,
  .toss-dev-page #dev-board-main > .bg-white > div:first-child,
  .toss-bank-page > .max-w-6xl > .flex:first-child {
    padding: 18px 16px !important;
  }

  .toss-campaign-page #campaigns-list,
  .toss-onboarding-page #onboarding-list,
  .toss-dev-page #dev-board-list {
    padding: 16px !important;
  }

  .toss-bank-page > .max-w-6xl > .flex:nth-child(2) {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .toss-bank-page [id^="bank-tab-"] {
    flex: 0 0 auto !important;
  }
}

/* Toss-style ops suite: community, DB, staff, logs, infra, brand kit, menu */
.toss-db-page,
.toss-community-page,
.toss-nurturing-page,
.toss-admin-page,
.toss-infra-page,
.toss-brand-page,
.toss-menu-modal {
  --toss-bg: #f6f8fb;
  --toss-surface: #ffffff;
  --toss-soft: #f2f4f6;
  --toss-text: #191f28;
  --toss-muted: #6b7684;
  --toss-weak: #8b95a1;
  --toss-line: #e5e8eb;
  --toss-blue: #3182f6;
  --toss-blue-soft: #e8f3ff;
  --toss-green: #00a878;
  --toss-green-soft: #e5f7f0;
  --toss-yellow-soft: #fff4d6;
  --toss-red: #f04452;
  --toss-red-soft: #ffecef;
  --toss-shadow: 0 12px 32px rgba(25, 31, 40, .08);
  --toss-ease: cubic-bezier(.2, .8, .2, 1);
  background: var(--toss-bg) !important;
}

.toss-db-page *,
.toss-community-page *,
.toss-nurturing-page *,
.toss-admin-page *,
.toss-infra-page *,
.toss-brand-page *,
.toss-menu-modal * {
  letter-spacing: 0 !important;
}

.toss-db-page > .container,
.toss-community-page > .container,
.toss-admin-page > .container,
.toss-brand-page > .container,
.toss-infra-page #infra-main,
.toss-nurturing-page #nurturing-inner {
  max-width: 1440px !important;
  margin-inline: auto !important;
}

.toss-db-page > .container > .bg-white,
.toss-admin-page > .container > .bg-white,
.toss-brand-page > .container > .bg-white {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-db-page > .container > .bg-white > .flex:first-child,
.toss-admin-page > .container > .bg-white > .flex:first-child,
.toss-community-page > .container > .bg-white:first-child,
.toss-brand-page #brand-kit-content > .max-w-3xl > .flex:first-child {
  padding: 22px 24px 18px !important;
  margin: 0 0 18px !important;
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-db-page > .container > .bg-white > .flex:first-child,
.toss-admin-page > .container > .bg-white > .flex:first-child {
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.toss-db-page h2,
.toss-db-page h3,
.toss-community-page h2,
.toss-community-page h3,
.toss-nurturing-page h2,
.toss-nurturing-page h3,
.toss-admin-page h2,
.toss-admin-page h3,
.toss-infra-page h2,
.toss-infra-page h3,
.toss-brand-page h2,
.toss-brand-page h3,
.toss-menu-modal h3 {
  color: var(--toss-text) !important;
  font-weight: 900 !important;
}

.toss-db-page h2 i,
.toss-community-page h2 i,
.toss-community-page h3 i,
.toss-nurturing-page h3 i,
.toss-admin-page h2 i,
.toss-admin-page h3 i,
.toss-infra-page h3 i,
.toss-brand-page h2 i,
.toss-brand-page h3 i,
.toss-menu-modal h3 i {
  color: var(--toss-blue) !important;
}

.toss-db-page p,
.toss-community-page p,
.toss-nurturing-page p,
.toss-admin-page p,
.toss-infra-page p,
.toss-brand-page p,
.toss-menu-modal p {
  color: var(--toss-muted) !important;
}

.toss-db-page button,
.toss-community-page button,
.toss-nurturing-page button,
.toss-admin-page button,
.toss-infra-page button,
.toss-brand-page button,
.toss-menu-modal button,
.toss-infra-page .btn-primary,
.toss-infra-page .btn-cancel {
  border-radius: 8px !important;
  transition:
    transform .16s var(--toss-ease),
    box-shadow .16s var(--toss-ease),
    background-color .16s var(--toss-ease),
    border-color .16s var(--toss-ease),
    color .16s var(--toss-ease) !important;
}

.toss-db-page button:hover,
.toss-community-page button:hover,
.toss-nurturing-page button:hover,
.toss-admin-page button:hover,
.toss-infra-page button:hover,
.toss-brand-page button:hover,
.toss-menu-modal button:hover {
  transform: translateY(-1px);
}

.toss-db-page button:active,
.toss-community-page button:active,
.toss-nurturing-page button:active,
.toss-admin-page button:active,
.toss-infra-page button:active,
.toss-brand-page button:active,
.toss-menu-modal button:active {
  transform: translateY(0) scale(.98);
}

.toss-db-page button[class*="bg-blue-600"],
.toss-db-page button[class*="bg-cyan-600"],
.toss-db-page button[class*="bg-indigo-600"],
.toss-community-page button[class*="bg-blue-600"],
.toss-community-page button[class*="bg-indigo-600"],
.toss-nurturing-page button[class*="bg-purple-600"],
.toss-nurturing-page button[class*="bg-indigo-600"],
.toss-admin-page button[class*="bg-blue-600"],
.toss-admin-page button[class*="bg-purple-600"],
.toss-admin-page button[class*="bg-indigo-600"],
.toss-admin-page button[class*="bg-emerald-600"],
.toss-infra-page button[class*="bg-indigo-600"],
.toss-brand-page label[class*="bg-indigo-50"],
.toss-menu-modal button[class*="bg-gray-800"] {
  background: var(--toss-blue) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

.toss-db-page button[class*="bg-gray-100"],
.toss-community-page button[class*="bg-gray-100"],
.toss-community-page button[class*="bg-white"],
.toss-nurturing-page button[class*="bg-gray-100"],
.toss-admin-page button[class*="bg-gray-100"],
.toss-admin-page button[class*="bg-white"],
.toss-infra-page button[class*="bg-gray-100"],
.toss-brand-page button[class*="bg-gray-100"],
.toss-menu-modal button[class*="border-gray-300"] {
  background: var(--toss-soft) !important;
  color: var(--toss-muted) !important;
  border-color: transparent !important;
}

.toss-db-page input,
.toss-db-page select,
.toss-db-page textarea,
.toss-community-page input,
.toss-community-page select,
.toss-community-page textarea,
.toss-nurturing-page input,
.toss-nurturing-page select,
.toss-nurturing-page textarea,
.toss-admin-page input,
.toss-admin-page select,
.toss-admin-page textarea,
.toss-infra-page input,
.toss-infra-page select,
.toss-infra-page textarea,
.toss-brand-page input,
.toss-brand-page select,
.toss-brand-page textarea,
.toss-menu-modal input,
.toss-menu-modal select,
.toss-menu-modal textarea {
  border-color: #dfe4ea !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #333d4b !important;
  transition: border-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

.toss-db-page input:focus,
.toss-db-page select:focus,
.toss-db-page textarea:focus,
.toss-community-page input:focus,
.toss-community-page select:focus,
.toss-community-page textarea:focus,
.toss-nurturing-page input:focus,
.toss-nurturing-page select:focus,
.toss-nurturing-page textarea:focus,
.toss-admin-page input:focus,
.toss-admin-page select:focus,
.toss-admin-page textarea:focus,
.toss-infra-page input:focus,
.toss-infra-page select:focus,
.toss-infra-page textarea:focus,
.toss-brand-page input:focus,
.toss-brand-page select:focus,
.toss-brand-page textarea:focus,
.toss-menu-modal input:focus,
.toss-menu-modal select:focus,
.toss-menu-modal textarea:focus {
  border-color: var(--toss-blue) !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
  outline: none !important;
}

.toss-db-page #advertisers-list,
.toss-db-page #vendors-list,
.toss-db-page #ad_products-list,
.toss-admin-page #users-list,
.toss-admin-page #activity_logs-list,
.toss-admin-page #activity-logs-list,
.toss-community-page #community-posts-list,
.toss-community-page #comm-filter-bar,
.toss-community-page #community-delete-banner:not(:empty),
.toss-nurturing-page #nr-content > div,
.toss-brand-page #brand-kit-content .bg-white,
.toss-infra-page #inf-content-area > div,
.toss-infra-page #inf-content-area .bg-white {
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-db-page #advertisers-list,
.toss-db-page #ad_products-list,
.toss-admin-page #users-list,
.toss-admin-page #activity_logs-list,
.toss-admin-page #activity-logs-list {
  padding: 20px 24px 24px;
}

.toss-db-page #vendors-list {
  overflow: hidden;
}

.toss-db-page #ad_products-list > .grid > div,
.toss-nurturing-page #nr-content .bg-white,
.toss-brand-page #brand-kit-content .bg-white,
.toss-infra-page #inf-content-area .border,
.toss-community-page #community-stats > div,
.toss-community-page #comm-stat-panel .bg-gray-50 {
  border: 1px solid var(--toss-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
  transition: transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease), border-color .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

.toss-db-page #ad_products-list > .grid > div:hover,
.toss-nurturing-page #nr-content .bg-white:hover,
.toss-brand-page #brand-kit-content .bg-white:hover,
.toss-community-page #community-stats > div:hover {
  border-color: #c9e0ff !important;
  box-shadow: 0 14px 30px rgba(25, 31, 40, .10) !important;
  transform: translateY(-2px);
}

.toss-db-page table,
.toss-community-page table,
.toss-nurturing-page table,
.toss-admin-page table,
.toss-infra-page table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  background: #fff !important;
}

.toss-db-page thead,
.toss-community-page thead,
.toss-nurturing-page thead,
.toss-admin-page thead,
.toss-infra-page thead {
  background: var(--toss-soft) !important;
}

.toss-db-page th,
.toss-community-page th,
.toss-nurturing-page th,
.toss-admin-page th,
.toss-infra-page th {
  color: var(--toss-muted) !important;
  font-weight: 850 !important;
  border-bottom: 1px solid var(--toss-line) !important;
}

.toss-db-page td,
.toss-community-page td,
.toss-nurturing-page td,
.toss-admin-page td,
.toss-infra-page td {
  color: #333d4b !important;
  border-bottom-color: #eef1f4 !important;
}

.toss-db-page tbody tr,
.toss-community-page tbody tr,
.toss-nurturing-page tbody tr,
.toss-admin-page tbody tr,
.toss-infra-page tbody tr {
  transition: background-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease) !important;
}

.toss-db-page tbody tr:hover,
.toss-community-page tbody tr:hover,
.toss-nurturing-page tbody tr:hover,
.toss-admin-page tbody tr:hover,
.toss-infra-page tbody tr:hover {
  background: #f8fbff !important;
}

.toss-db-page .badge,
.toss-admin-page .badge,
.toss-nurturing-page .badge,
.toss-community-page [class*="rounded-full"],
.toss-infra-page [class*="rounded-full"] {
  border-radius: 999px !important;
}

.toss-db-page #adv-pagination,
.toss-admin-page #usr-filter-bar,
.toss-admin-page .user-admin-tab-btn,
.toss-admin-page .usr-payroll-tab,
.toss-community-page #comm-stat-tabs,
.toss-community-page #comm-stat-toggle-btn,
.toss-community-page #comm-filter-bar,
.toss-nurturing-page #nurturing-inner > div > .flex:first-child,
.toss-infra-page #infra-main > .flex:first-child {
  border-radius: 8px !important;
}

.toss-admin-page #usr-filter-bar,
.toss-admin-page .bg-gray-50,
.toss-community-page #comm-filter-bar,
.toss-community-page #comm-stat-panel,
.toss-nurturing-page #nurturing-inner > div > .flex:first-child,
.toss-infra-page #infra-main > .flex:first-child {
  border: 1px solid var(--toss-line) !important;
  background: var(--toss-soft) !important;
}

.toss-nurturing-page .nr-tab-btn.bg-white,
.toss-admin-page .user-admin-tab-btn[class*="text-white"],
.toss-admin-page .usr-payroll-tab[class*="text-white"],
.toss-infra-page #infra-main > .flex:first-child button[class*="text-white"],
.toss-community-page #comm-stat-tabs button[class*="text-white"] {
  background: #fff !important;
  color: var(--toss-text) !important;
  box-shadow: 0 3px 10px rgba(25, 31, 40, .08) !important;
  position: relative;
}

.toss-nurturing-page .nr-tab-btn.bg-white::after,
.toss-admin-page .user-admin-tab-btn[class*="text-white"]::after,
.toss-infra-page #infra-main > .flex:first-child button[class*="text-white"]::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: var(--toss-blue);
}

.toss-community-page #comm-inline-form-wrap > .bg-white,
.toss-community-page #community-posts-list,
.toss-community-page #comm-stat-panel,
.toss-community-page #comm-filter-bar {
  border-color: var(--toss-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--toss-shadow) !important;
}

.toss-community-page #ci-submit-btn,
.toss-community-page #ci-type-hotdeal.ci-type-active,
.toss-community-page #ci-type-infiltration.ci-type-active {
  background: var(--toss-blue) !important;
  color: #fff !important;
  border-color: var(--toss-blue) !important;
}

.toss-community-page #ci-auto-comm-name,
.toss-community-page #ci-cost-badge,
.toss-community-page #ci-publish-month-label,
.toss-brand-page #brand-kit-content [class*="bg-blue-50"] {
  background: var(--toss-blue-soft) !important;
  color: var(--toss-blue) !important;
}

.toss-community-page #comm-stat-toggle-btn {
  background: var(--toss-blue-soft) !important;
  border-color: #c9e0ff !important;
  color: var(--toss-blue) !important;
}

.toss-infra-page .modal-overlay,
.toss-infra-page #inf-cafe-modal,
.toss-infra-page #inf-account-modal {
  backdrop-filter: blur(3px);
}

.toss-infra-page .modal-content,
.toss-menu-modal > div {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 24px 70px rgba(25, 31, 40, .26) !important;
}

.toss-infra-page .modal-header,
.toss-infra-page .modal-footer,
.toss-menu-modal > div > .flex:first-child,
.toss-menu-modal > div > .flex:last-child {
  border-color: var(--toss-line) !important;
  background: #fbfcff !important;
}

.toss-infra-page .btn-primary {
  background: var(--toss-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

.toss-infra-page .btn-cancel {
  background: var(--toss-soft) !important;
  color: var(--toss-muted) !important;
}

.toss-brand-page #brand-kit-content > .max-w-3xl {
  max-width: 960px !important;
}

.toss-brand-page #brand-kit-content .border-dashed {
  border-color: #cfd6df !important;
  background: #f9fafb !important;
}

.toss-brand-page #brand-kit-content .bg-green-50 {
  background: var(--toss-green-soft) !important;
  border-color: rgba(0, 168, 120, .22) !important;
}

.toss-menu-modal .bg-blue-50 {
  background: var(--toss-blue-soft) !important;
  border-color: #c9e0ff !important;
  color: var(--toss-blue) !important;
}

.toss-menu-modal #menu-settings-list > div {
  border-radius: 8px !important;
  transition: transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease), border-color .16s var(--toss-ease) !important;
}

.toss-menu-modal #menu-settings-list > div:hover {
  border-color: #c9e0ff !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .06) !important;
  transform: translateY(-1px);
}

.toss-db-page .text-center:has(.fa-spinner),
.toss-community-page .text-center:has(.fa-spinner),
.toss-nurturing-page .text-center:has(.fa-spinner),
.toss-admin-page .text-center:has(.fa-spinner),
.toss-infra-page .text-center:has(.fa-spinner),
.toss-brand-page .text-center:has(.fa-spinner),
.toss-menu-modal .text-center:has(.fa-spinner) {
  animation: toss-soft-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .toss-db-page *,
  .toss-community-page *,
  .toss-nurturing-page *,
  .toss-admin-page *,
  .toss-infra-page *,
  .toss-brand-page *,
  .toss-menu-modal * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .toss-community-page > .container > .flex,
  .toss-db-page > .container > .bg-white > .flex:first-child,
  .toss-admin-page > .container > .bg-white > .flex:first-child {
    align-items: stretch !important;
  }

  .toss-community-page > .container > .flex {
    flex-direction: column !important;
  }

  .toss-community-page #comm-inline-form-wrap {
    width: 100% !important;
  }

  .toss-nurturing-page #nurturing-inner > div > .flex:first-child,
  .toss-infra-page #infra-main > .flex:first-child {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }
}

@media (max-width: 768px) {
  .toss-db-page > .container > .bg-white,
  .toss-admin-page > .container > .bg-white,
  .toss-brand-page > .container > .bg-white {
    padding: 0 !important;
  }

  .toss-db-page > .container > .bg-white > .flex:first-child,
  .toss-admin-page > .container > .bg-white > .flex:first-child,
  .toss-community-page > .container > .bg-white:first-child,
  .toss-brand-page #brand-kit-content > .max-w-3xl > .flex:first-child {
    padding: 18px 16px !important;
  }

  .toss-db-page #advertisers-list,
  .toss-db-page #ad_products-list,
  .toss-admin-page #users-list,
  .toss-admin-page #activity_logs-list,
  .toss-admin-page #activity-logs-list {
    padding: 16px !important;
  }
}

/* Toss-style sales suite: sales flow, knowledge AI, quotes, tax invoice */
.toss-flow-page,
.toss-knowledge-page,
.toss-quote-page,
.toss-tax-page {
  --toss-ease: cubic-bezier(.2, .8, .2, 1);
}

.toss-flow-page *,
.toss-knowledge-page *,
.toss-quote-page *,
.toss-tax-page * {
  letter-spacing: 0 !important;
}

.toss-flow-page > .container,
.toss-quote-page > .max-w-7xl,
.toss-tax-page > .max-w-6xl {
  max-width: 1440px !important;
}

/* 전자세금계산서 '발행' 폼만 960px 로 축소 — 계약관리 연동 팝업(max-width:960px)과
   동일 폭이라 두 진입점이 같은 화면으로 보인다.
   전송대기·발행완료·매입계산서 조회 목록은 표가 넓어야 하므로 위 1440px 유지.
   .toss-tax-page 로 스코프해 팝업(#ct-ti-mount)으로 포털 이동했을 때는 적용되지 않게 한다. */
.toss-tax-page #ti-panel-issue {
  max-width: 960px;
  margin-inline: auto;
}

.toss-flow-page > .container > .bg-white {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
}

.toss-flow-page > .container > .bg-white > .flex:first-child,
.toss-quote-page > .max-w-7xl > .flex:first-child,
.toss-tax-page > .max-w-6xl > .flex:first-child {
  padding: 22px 24px 18px !important;
  margin-bottom: 0 !important;
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-flow-page > .container > .bg-white > .flex:first-child {
  border: 0 !important;
  border-bottom: 1px solid #eef1f4 !important;
  box-shadow: none !important;
}

.toss-flow-page h2,
.toss-quote-page h2,
.toss-tax-page h2 {
  color: #191f28 !important;
  font-weight: 900 !important;
}

.toss-flow-page h2 + p,
.toss-quote-page h2 + p,
.toss-tax-page h2 + p {
  color: #6b7684 !important;
  font-weight: 700 !important;
}

.toss-flow-page h2 span,
.toss-quote-page h2 span,
.toss-tax-page h2 span {
  border-radius: 8px !important;
  background: #e8f3ff !important;
  color: #3182f6 !important;
  box-shadow: none !important;
}

.toss-flow-page h2 span i,
.toss-quote-page h2 span i,
.toss-tax-page h2 span i {
  color: #3182f6 !important;
}

.toss-flow-page button,
.toss-knowledge-page button,
.toss-quote-page button,
.toss-tax-page button,
#quote-modal-overlay button,
#quote-preview-overlay button,
#quote-contract-modal button {
  transition:
    transform .16s var(--toss-ease),
    box-shadow .16s var(--toss-ease),
    background-color .16s var(--toss-ease),
    border-color .16s var(--toss-ease),
    color .16s var(--toss-ease) !important;
}

.toss-flow-page button:hover,
.toss-knowledge-page button:hover,
.toss-quote-page button:hover,
.toss-tax-page button:hover,
#quote-modal-overlay button:hover,
#quote-preview-overlay button:hover,
#quote-contract-modal button:hover {
  transform: translateY(-1px);
}

.toss-flow-page button:active,
.toss-knowledge-page button:active,
.toss-quote-page button:active,
.toss-tax-page button:active,
#quote-modal-overlay button:active,
#quote-preview-overlay button:active,
#quote-contract-modal button:active {
  transform: translateY(0) scale(.98);
}

.toss-flow-page input,
.toss-flow-page select,
.toss-flow-page textarea,
.toss-knowledge-page input,
.toss-knowledge-page select,
.toss-knowledge-page textarea,
.toss-quote-page input,
.toss-quote-page select,
.toss-quote-page textarea,
.toss-tax-page input,
.toss-tax-page select,
.toss-tax-page textarea,
#quote-modal-overlay input,
#quote-modal-overlay select,
#quote-modal-overlay textarea,
#quote-contract-modal input,
#quote-contract-modal select,
#quote-contract-modal textarea {
  border-color: #dfe4ea !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #333d4b !important;
  transition: border-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

.toss-flow-page input:focus,
.toss-flow-page select:focus,
.toss-flow-page textarea:focus,
.toss-knowledge-page input:focus,
.toss-knowledge-page select:focus,
.toss-knowledge-page textarea:focus,
.toss-quote-page input:focus,
.toss-quote-page select:focus,
.toss-quote-page textarea:focus,
.toss-tax-page input:focus,
.toss-tax-page select:focus,
.toss-tax-page textarea:focus,
#quote-modal-overlay input:focus,
#quote-modal-overlay select:focus,
#quote-modal-overlay textarea:focus,
#quote-contract-modal input:focus,
#quote-contract-modal select:focus,
#quote-contract-modal textarea:focus {
  border-color: #3182f6 !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
}

.toss-flow-page #pl-subtab-nav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f2f4f6 !important;
}

.toss-flow-page .pl-nav-tab {
  min-height: 38px !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 7px !important;
  margin: 0 !important;
  color: #6b7684 !important;
}

.toss-flow-page .pl-nav-tab:hover {
  color: #1b64da !important;
  background: rgba(255, 255, 255, .72) !important;
}

.toss-flow-page .pl-nav-tab--active {
  color: #191f28 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(25, 31, 40, .08) !important;
}

.toss-flow-page .pl-nav-tab--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #3182f6;
  transform: translateX(-50%);
}

.toss-flow-page > .container > .bg-white > .p-5 {
  padding: 22px 24px 24px !important;
  background: #fff !important;
}

.toss-flow-page #pl-board-area > .flex > div[class*="bg-gray-50"] {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  background: #f6f8fb !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  transition: border-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease), transform .16s var(--toss-ease) !important;
}

.toss-flow-page #pl-board-area > .flex > div[class*="ring-blue-300"] {
  border-color: #3182f6 !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .18), 0 12px 24px rgba(49, 130, 246, .12) !important;
  transform: translateY(-2px);
}

.toss-flow-page #pl-board-area [draggable="true"] {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(25, 31, 40, .05) !important;
  transition: transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease), border-color .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

.toss-flow-page #pl-board-area [draggable="true"]:hover {
  border-color: #c9e0ff !important;
  background: #fafdff !important;
  box-shadow: 0 12px 24px rgba(25, 31, 40, .10) !important;
  transform: translateY(-2px);
}

.toss-flow-page #act-inline-panel,
.toss-flow-page #activity-stats-panel > div,
.toss-flow-page #sales-activities-list > div,
.toss-flow-page #guide-content-inner > div,
.toss-flow-page #company-content-inner > div,
.toss-flow-page #coldmail-content-inner > div {
  border-radius: 8px !important;
  border-color: #e5e8eb !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
}

.toss-knowledge-page #tab-knowledge {
  padding: 0 !important;
}

.toss-knowledge-page #tab-knowledge > .max-w-4xl {
  max-width: 1180px !important;
  margin-inline: auto !important;
}

.toss-knowledge-page #tab-knowledge > .max-w-4xl > .flex:first-child {
  gap: 6px !important;
  width: fit-content;
  padding: 4px !important;
  margin: 0 auto 18px !important;
  border-radius: 8px !important;
  background: #f2f4f6 !important;
}

.toss-knowledge-page #kb-tab-chat,
.toss-knowledge-page #kb-tab-manage {
  min-height: 38px !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.toss-knowledge-page #kb-content > .bg-white {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-knowledge-page #kb-content > .bg-white > div:first-child {
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .16), transparent 28%),
    linear-gradient(180deg, #3182f6 0%, #1b64da 100%) !important;
}

.toss-knowledge-page #kb-chat-messages {
  background: #f6f8fb !important;
  scroll-behavior: smooth;
}

.toss-knowledge-page #kb-chat-messages .bg-white,
.toss-knowledge-page #kb-content [class*="rounded-2xl"] {
  border-radius: 8px !important;
}

.toss-knowledge-page #kb-keyword-chips button {
  border-radius: 999px !important;
}

.toss-knowledge-page #kb-keyword-chips button:hover {
  box-shadow: 0 6px 14px rgba(49, 130, 246, .12) !important;
}

.toss-quote-page #quote-filters,
.toss-quote-page #quote-list-area,
.toss-tax-page #ti-panel-issue > .bg-white,
.toss-tax-page #ti-panel-pending > .bg-white,
.toss-tax-page #ti-panel-sell > .bg-white,
.toss-tax-page #ti-panel-buy > .bg-white,
.toss-tax-page #ti-popbill-status:not(.hidden) {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
  background: #fff !important;
}

.toss-quote-page #quote-filters {
  padding: 16px !important;
  margin: 0 0 16px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.toss-quote-page #quote-list-area table,
.toss-tax-page table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.toss-quote-page #quote-list-area thead,
.toss-tax-page thead {
  background: #f2f4f6 !important;
}

.toss-quote-page #quote-list-area th,
.toss-tax-page th {
  color: #6b7684 !important;
  font-weight: 850 !important;
}

.toss-quote-page #quote-list-area tbody tr,
.toss-tax-page tbody tr {
  transition: background-color .16s var(--toss-ease), transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease) !important;
}

.toss-quote-page #quote-list-area tbody tr:hover,
.toss-tax-page tbody tr:hover {
  background: #f8fbff !important;
}

.toss-quote-page #quote-list-area tbody tr:active {
  transform: scale(.997);
}

.toss-tax-page > .max-w-6xl > .flex:first-child + #ti-popbill-status + div,
.toss-tax-page #ti-panel-issue,
.toss-tax-page #ti-panel-pending,
.toss-tax-page #ti-panel-sell,
.toss-tax-page #ti-panel-buy {
  margin-top: 18px;
}

.toss-tax-page [id^="ti-subtab-"] {
  border: 0 !important;
  min-height: 38px !important;
  background: #f2f4f6 !important;
  color: #6b7684 !important;
  box-shadow: none !important;
}

.toss-tax-page [id^="ti-subtab-"].bg-blue-600,
.toss-tax-page [id^="ti-subtab-"][class*="text-white"] {
  background: #3182f6 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

.toss-tax-page #ti-panel-issue h4 span[class*="bg-blue-600"] {
  background: #3182f6 !important;
}

.toss-tax-page #ti-advertiser-search,
.toss-tax-page #ct-advertiser-search {
  border-color: #d6e8ff !important;
  background: #f7fbff !important;
}

.toss-tax-page #ti-recipient-card > div,
.toss-tax-page #ct-recipient-card > div {
  border-color: #d6e8ff !important;
  background: #f7fbff !important;
}

#quote-modal-overlay > div,
#quote-preview-overlay > div,
#quote-contract-modal > div:not(.absolute) {
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(25, 31, 40, .26) !important;
}

#quote-modal-overlay #qf-document {
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(25, 31, 40, .14) !important;
}

#quote-modal-overlay .qf-input-c,
#quote-modal-overlay .qf-input-c-sm,
#quote-modal-overlay .qf-select-c {
  border-radius: 8px !important;
}

#quote-modal-overlay .qf-tab-btn {
  border-radius: 8px 8px 0 0 !important;
}

#quote-modal-overlay .qf-tab-btn:hover,
#quote-modal-overlay .qf-tab-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(25, 31, 40, .08);
}

#quote-modal-overlay .qf-manager-tag {
  border-radius: 999px !important;
  background: #e8f3ff !important;
  border-color: #c9e0ff !important;
  color: #1b64da !important;
}

.toss-flow-page .fa-spinner,
.toss-knowledge-page .fa-spinner,
.toss-quote-page .fa-spinner,
.toss-tax-page .fa-spinner {
  animation-duration: .75s !important;
}

@keyframes toss-soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .58; }
}

.toss-flow-page .text-center:has(.fa-spinner),
.toss-knowledge-page .text-center:has(.fa-spinner),
.toss-quote-page .text-center:has(.fa-spinner),
.toss-tax-page .text-center:has(.fa-spinner) {
  animation: toss-soft-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .toss-flow-page *,
  .toss-knowledge-page *,
  .toss-quote-page *,
  .toss-tax-page *,
  #quote-modal-overlay *,
  #quote-preview-overlay *,
  #quote-contract-modal * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .toss-flow-page #pl-subtab-nav {
    display: flex !important;
    overflow-x: auto !important;
  }

  .toss-flow-page .pl-nav-tab {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 768px) {
  .toss-flow-page > .container > .bg-white > .flex:first-child,
  .toss-quote-page > .max-w-7xl > .flex:first-child,
  .toss-tax-page > .max-w-6xl > .flex:first-child {
    padding: 18px 16px !important;
  }

  .toss-flow-page > .container > .bg-white > .p-5 {
    padding: 16px !important;
  }

  .toss-knowledge-page #tab-knowledge > .max-w-4xl > .flex:first-child {
    width: 100%;
  }
}

/* Toss-style extended work pages: contracts, AE stats, cafe checker, tools, review orders */
.toss-contract-page,
.toss-ae-page,
.toss-cafe-page,
.toss-tools-page,
.toss-review-page {
  --toss-ease: cubic-bezier(.2, .8, .2, 1);
}

.toss-contract-page *,
.toss-ae-page *,
.toss-cafe-page *,
.toss-tools-page *,
.toss-review-page * {
  letter-spacing: 0 !important;
}

.toss-contract-page > .bg-white,
.toss-ae-page > .container > .bg-white,
.toss-cafe-page #cafe-checker-inner > .max-w-4xl,
.toss-tools-page #tab-tools > .max-w-6xl,
.toss-review-page #review-orders-root > .max-w-\[1000px\] {
  max-width: 1440px !important;
}

.toss-contract-page > .bg-white {
  width: 100% !important;
  max-width: 2130px !important;
}

.toss-contract-page > .bg-white,
.toss-ae-page > .container > .bg-white {
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-contract-page > .bg-white > .flex:first-child,
.toss-ae-page #ae-stats-inner > .flex:first-child,
.toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child,
.toss-tools-page #tab-tools .max-w-6xl > .flex:first-child,
.toss-review-page #review-orders-root .bg-white:first-child > .flex:first-child {
  padding: 22px 24px 18px !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(229, 232, 235, .92) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(49, 130, 246, .10), transparent 24%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-contract-page h2,
.toss-ae-page h2,
.toss-cafe-page h2,
.toss-tools-page h2,
.toss-review-page h2,
.toss-review-page h3 {
  color: #191f28 !important;
  font-weight: 900 !important;
}

.toss-contract-page p,
.toss-ae-page p,
.toss-cafe-page p,
.toss-tools-page p,
.toss-review-page p {
  color: #6b7684 !important;
}

.toss-contract-page button,
.toss-ae-page button,
.toss-cafe-page button,
.toss-tools-page button,
.toss-review-page button,
#tool-form-modal button,
#ti-confirm-modal button,
#ti-viewer-modal button,
#ct-ti-match-confirm button,
#ct-ti-match-modal button {
  transition:
    transform .16s var(--toss-ease),
    box-shadow .16s var(--toss-ease),
    background-color .16s var(--toss-ease),
    border-color .16s var(--toss-ease),
    color .16s var(--toss-ease) !important;
}

.toss-contract-page button:hover,
.toss-ae-page button:hover,
.toss-cafe-page button:hover,
.toss-tools-page button:hover,
.toss-review-page button:hover,
#tool-form-modal button:hover,
#ti-confirm-modal button:hover,
#ti-viewer-modal button:hover,
#ct-ti-match-confirm button:hover,
#ct-ti-match-modal button:hover {
  transform: translateY(-1px);
}

.toss-contract-page button:active,
.toss-ae-page button:active,
.toss-cafe-page button:active,
.toss-tools-page button:active,
.toss-review-page button:active,
#tool-form-modal button:active,
#ti-confirm-modal button:active,
#ti-viewer-modal button:active,
#ct-ti-match-confirm button:active,
#ct-ti-match-modal button:active {
  transform: translateY(0) scale(.98);
}

.toss-contract-page input,
.toss-contract-page select,
.toss-contract-page textarea,
.toss-ae-page input,
.toss-ae-page select,
.toss-ae-page textarea,
.toss-cafe-page input,
.toss-cafe-page select,
.toss-cafe-page textarea,
.toss-tools-page input,
.toss-tools-page select,
.toss-tools-page textarea,
.toss-review-page input,
.toss-review-page select,
.toss-review-page textarea,
#tool-form-modal input,
#tool-form-modal select,
#tool-form-modal textarea {
  border-color: #dfe4ea !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #333d4b !important;
  transition: border-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

.toss-contract-page input:focus,
.toss-contract-page select:focus,
.toss-contract-page textarea:focus,
.toss-ae-page input:focus,
.toss-ae-page select:focus,
.toss-ae-page textarea:focus,
.toss-cafe-page input:focus,
.toss-cafe-page select:focus,
.toss-cafe-page textarea:focus,
.toss-tools-page input:focus,
.toss-tools-page select:focus,
.toss-tools-page textarea:focus,
.toss-review-page input:focus,
.toss-review-page select:focus,
.toss-review-page textarea:focus,
#tool-form-modal input:focus,
#tool-form-modal select:focus,
#tool-form-modal textarea:focus {
  border-color: #3182f6 !important;
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .14) !important;
}

.toss-contract-page #sales-status-filters label,
.toss-contract-page #admin-staff-filter-wrap span,
.toss-contract-page #sales-month-badge,
.toss-ae-page [class*="rounded-full"],
.toss-review-page [class*="rounded-full"],
.toss-tools-page #tools-category-bar button {
  border-radius: 999px !important;
}

.toss-contract-page #sales-status-filters label {
  border-color: #e5e8eb !important;
  background: #fff !important;
  color: #333d4b !important;
  box-shadow: 0 4px 12px rgba(25, 31, 40, .04);
}

.toss-contract-page #sales-status-filters label:hover {
  border-color: #c9e0ff !important;
  background: #f8fbff !important;
}

.toss-contract-page > .bg-white > .flex:nth-child(2),
.toss-tax-page > .max-w-6xl > .flex:first-child + #ti-popbill-status + div {
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  background: #f2f4f6 !important;
  border: 0 !important;
}

.toss-contract-page #subtab-table-btn,
.toss-contract-page #subtab-cards-btn {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #6b7684 !important;
}

.toss-contract-page #subtab-table-btn.subtab-btn-active,
.toss-contract-page #subtab-cards-btn.subtab-btn-active,
.toss-contract-page #subtab-table-btn[class*="border-blue-600"],
.toss-contract-page #subtab-cards-btn[class*="border-blue-600"] {
  color: #191f28 !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(25, 31, 40, .08) !important;
}

.toss-contract-page #my_sales-list,
.toss-contract-page #extra-pay-section > div,
.toss-contract-page #action-cards-container > div,
.toss-contract-page #sales-activities-list > div {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-contract-page #sales-scroll-main table {
  background: #fff !important;
}

.toss-contract-page #sales-scroll-main thead {
  background: #f2f4f6 !important;
}

.toss-contract-page #sales-scroll-main th {
  color: #6b7684 !important;
  font-weight: 850 !important;
}

.toss-contract-page #sales-scroll-main tbody tr {
  transition: background-color .16s var(--toss-ease), box-shadow .16s var(--toss-ease) !important;
}

.toss-contract-page #sales-scroll-main tbody tr:hover {
  background: #f8fbff !important;
}

.toss-contract-page #action-cards-container > div:not(.text-center):hover,
.toss-ae-page details:hover,
.toss-tools-page #tools-grid > div:hover,
.toss-review-page #review-order-list > div:hover {
  border-color: #c9e0ff !important;
  box-shadow: 0 14px 30px rgba(25, 31, 40, .10) !important;
  transform: translateY(-2px);
}

.toss-ae-page #ae-stats-inner > .grid > div,
.toss-ae-page #ae-stats-inner details,
.toss-ae-page #ae-stats-inner .overflow-x-auto > table,
.toss-ae-page #ae-stats-inner [class*="rounded-xl"] {
  border-color: #e5e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
}

.toss-ae-page #ae-stats-inner table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
}

.toss-ae-page #ae-stats-inner thead {
  background: #f2f4f6 !important;
}

.toss-ae-page #ae-stats-inner th {
  color: #6b7684 !important;
  font-weight: 850 !important;
}

.toss-ae-page #ae-stats-inner tbody tr {
  transition: background-color .16s var(--toss-ease) !important;
}

.toss-ae-page #ae-stats-inner tbody tr:hover {
  background: #f8fbff !important;
}

.toss-ae-page #ae-stats-inner details > summary {
  background: #f6f8fb !important;
}

.toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child {
  color: #191f28 !important;
}

.toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child h2,
.toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child p,
.toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child span {
  color: #191f28 !important;
}

.toss-cafe-page #cc-step1,
.toss-cafe-page #cc-progress-box,
.toss-cafe-page #cc-result-box,
.toss-cafe-page #cc-message:not(.hidden),
.toss-cafe-page #cc-result-box .grid > div {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-cafe-page #cc-url-input {
  min-height: 190px;
  background: #f9fafb !important;
}

.toss-cafe-page #cc-lookup-btn,
.toss-cafe-page #cc-progress-bar,
.toss-tools-page button[class*="bg-indigo-600"],
.toss-review-page button[class*="bg-violet-600"] {
  background: #3182f6 !important;
  box-shadow: 0 8px 18px rgba(49, 130, 246, .20) !important;
}

.toss-cafe-page #cc-result-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.toss-cafe-page #cc-result-table thead {
  background: #f2f4f6 !important;
  color: #6b7684 !important;
}

.toss-cafe-page #cc-result-table th {
  color: #6b7684 !important;
  font-weight: 850 !important;
}

.toss-cafe-page #cc-result-table tbody tr:hover {
  background: #f8fbff !important;
}

.toss-tools-page #tab-tools > .max-w-6xl,
.toss-review-page #review-orders-root > .max-w-\[1000px\] {
  margin-inline: auto !important;
}

.toss-tools-page #tools-search {
  height: 44px;
}

.toss-tools-page #tools-category-bar {
  padding: 4px !important;
  border-radius: 8px !important;
  background: #f2f4f6 !important;
}

.toss-tools-page #tools-category-bar button[class*="bg-indigo-100"] {
  background: #fff !important;
  color: #191f28 !important;
  box-shadow: 0 3px 10px rgba(25, 31, 40, .08) !important;
}

.toss-tools-page #tools-grid > div {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
  transition: transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease), border-color .16s var(--toss-ease) !important;
}

.toss-tools-page #tools-grid .bg-gradient-to-br {
  background: #3182f6 !important;
}

.toss-tools-page #tools-grid [class*="bg-gray-100"],
.toss-tools-page #tools-grid [class*="bg-gray-50"] {
  background: #f2f4f6 !important;
  color: #6b7684 !important;
}

#tool-form-modal > div {
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(25, 31, 40, .26) !important;
}

#tool-form-modal [data-icon],
#tool-form-modal [data-color] {
  border-radius: 8px !important;
}

.toss-review-page #review-orders-root > .max-w-\[1000px\] {
  max-width: 1180px !important;
}

.toss-review-page #review-orders-root .bg-white {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(25, 31, 40, .08) !important;
}

.toss-review-page #review-order-form section,
.toss-review-page #review-order-sheet-ref-panel,
.toss-review-page #review-order-image-dropzone,
.toss-review-page #review-order-list > div,
.toss-review-page #review-order-products > div,
.toss-review-page #review-order-detail-0,
.toss-review-page [id^="review-order-detail-"] {
  border-color: #e5e8eb !important;
  border-radius: 8px !important;
  background: #fff !important;
}

.toss-review-page #review-order-form section {
  box-shadow: 0 8px 20px rgba(25, 31, 40, .04) !important;
}

.toss-review-page #review-order-form button[class*="bg-gray-100"],
.toss-review-page #review-order-form button[class*="bg-white"],
.toss-review-page #review-order-list a[class*="bg-gray-100"],
.toss-review-page #review-order-list button[class*="bg-violet-50"] {
  background: #f2f4f6 !important;
  color: #6b7684 !important;
}

.toss-review-page #review-order-form button[class*="bg-violet-50"],
.toss-review-page #review-order-form button[class*="text-violet-700"] {
  background: #e8f3ff !important;
  color: #3182f6 !important;
}

.toss-review-page #review-order-submit-btn,
.toss-review-page #review-order-scope-mine,
.toss-review-page #review-order-scope-all[class*="bg-violet-600"] {
  background: #3182f6 !important;
  color: #fff !important;
}

.toss-review-page #review-order-list > div {
  transition: transform .16s var(--toss-ease), box-shadow .16s var(--toss-ease), border-color .16s var(--toss-ease), background-color .16s var(--toss-ease) !important;
}

#quote-adv-dropdown,
.toss-tax-page #ti-advertiser-results,
.toss-tax-page #ct-advertiser-results {
  border: 1px solid #e5e8eb !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(25, 31, 40, .16) !important;
}

#quote-modal-overlay .bg-white\/10,
#quote-modal-overlay [class*="backdrop-blur"] {
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 8px !important;
}

#quote-modal-overlay table,
#quote-preview-overlay table,
#quote-contract-modal table,
.toss-tax-page #ti-confirm-modal table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#quote-contract-modal > div:not(.absolute),
#ti-confirm-modal > div,
#ti-viewer-modal > div,
#ct-ti-match-confirm > div,
#ct-ti-match-modal > div {
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(25, 31, 40, .26) !important;
}

.toss-tax-page #ti-items-wrap > div,
.toss-tax-page #ti-pending-summary > div,
.toss-tax-page #ti-sell-summary > div,
.toss-tax-page #ti-buy-summary > div,
.toss-tax-page #ti-pending-list > div,
.toss-tax-page #ti-sell-list > div,
.toss-tax-page #ti-buy-list > div {
  border-radius: 8px !important;
  border-color: #e5e8eb !important;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .05) !important;
}

.toss-tax-page .ti-period-btn,
.toss-tax-page [id$="-month-quick"] button {
  border-radius: 999px !important;
}

.toss-tax-page #ti-taxbtn-taxable,
.toss-tax-page #ti-taxbtn-zero,
.toss-tax-page #ti-taxbtn-exempt {
  border-radius: 7px !important;
}

.toss-contract-page .text-center:has(.fa-spinner),
.toss-ae-page .text-center:has(.fa-spinner),
.toss-cafe-page .text-center:has(.fa-spinner),
.toss-tools-page .text-center:has(.fa-spinner),
.toss-review-page .text-center:has(.fa-spinner) {
  animation: toss-soft-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .toss-contract-page *,
  .toss-ae-page *,
  .toss-cafe-page *,
  .toss-tools-page *,
  .toss-review-page *,
  #tool-form-modal *,
  #ti-confirm-modal *,
  #ti-viewer-modal *,
  #ct-ti-match-confirm *,
  #ct-ti-match-modal * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .toss-contract-page > .bg-white > .flex:nth-child(2),
  .toss-tax-page > .max-w-6xl > .flex:first-child + #ti-popbill-status + div {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .toss-contract-page #subtab-table-btn,
  .toss-contract-page #subtab-cards-btn,
  .toss-tax-page [id^="ti-subtab-"] {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 768px) {
  .toss-contract-page > .bg-white,
  .toss-ae-page > .container > .bg-white {
    padding: 16px !important;
  }

  .toss-contract-page > .bg-white > .flex:first-child,
  .toss-ae-page #ae-stats-inner > .flex:first-child,
  .toss-cafe-page #cafe-checker-inner .max-w-4xl > div:first-child,
  .toss-tools-page #tab-tools .max-w-6xl > .flex:first-child,
  .toss-review-page #review-orders-root .bg-white:first-child > .flex:first-child {
    padding: 18px 16px !important;
  }
}

.mission-toss-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 4px 0 28px;
  color: #191f28;
}

.mission-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.mission-kicker {
  color: #3182f6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.mission-title {
  margin: 4px 0 0;
  color: #191f28;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.mission-subtitle {
  margin: 7px 0 0;
  color: #6b7684;
  font-size: 13px;
  line-height: 1.5;
}

.mission-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mission-icon-btn,
.mission-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
  color: #4e5968;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mission-icon-btn:hover,
.mission-row-action:hover {
  background: #f2f4f6;
  color: #3182f6;
  border-color: #d1d6db;
}

.mission-row-action {
  width: 30px;
  height: 30px;
}

.mission-stat-card {
  min-height: 88px;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(25,31,40,.04);
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.mission-stat-card:hover {
  border-color: #d1d6db;
  box-shadow: 0 8px 20px rgba(25,31,40,.08);
  transform: translateY(-1px);
}

.mission-stat-card.is-active {
  border-color: #b7c7dd;
  box-shadow: 0 0 0 1px rgba(49,130,246,.12), 0 12px 28px rgba(25,31,40,.08);
}

.mission-stat-card.mission-tone-warning.is-active {
  border-color: #ffd43b;
  background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
  box-shadow: 0 0 0 1px rgba(245,159,0,.22), 0 0 28px 6px rgba(245,159,0,.18), 0 12px 30px rgba(245,159,0,.14);
}

.mission-stat-card.mission-tone-neutral.is-active {
  border-color: #cbd5e1;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 0 0 1px rgba(100,116,139,.16), 0 0 28px 6px rgba(100,116,139,.12), 0 12px 30px rgba(100,116,139,.10);
}

.mission-stat-card.mission-tone-danger.is-active {
  border-color: #ff8787;
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  box-shadow: 0 0 0 1px rgba(240,62,62,.18), 0 0 28px 6px rgba(240,62,62,.16), 0 12px 30px rgba(240,62,62,.12);
}

.mission-stat-card.mission-tone-success.is-active {
  border-color: #63e6be;
  background: linear-gradient(180deg, #fff 0%, #f0fff8 100%);
  box-shadow: 0 0 0 1px rgba(18,184,134,.18), 0 0 28px 6px rgba(18,184,134,.16), 0 12px 30px rgba(18,184,134,.12);
}

.mission-stat-card.mission-tone-primary.is-active {
  border-color: #74b9ff;
  background: linear-gradient(180deg, #fff 0%, #f3f9ff 100%);
  box-shadow: 0 0 0 1px rgba(49,130,246,.18), 0 0 28px 6px rgba(49,130,246,.16), 0 12px 30px rgba(49,130,246,.12);
}

.mission-stat-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  padding: 16px;
}

.mission-stat-label {
  color: #8b95a1;
  font-size: 12px;
  font-weight: 700;
}

.mission-stat-value {
  margin-top: 4px;
  color: #191f28;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.mission-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f2f4f6;
  color: #6b7684;
}

.mission-tone-primary .mission-stat-icon { background: #e8f3ff; color: #3182f6; }
.mission-tone-warning .mission-stat-icon { background: #fff4e5; color: #f59f00; }
.mission-tone-danger .mission-stat-icon { background: #fff0f0; color: #f03e3e; }
.mission-tone-success .mission-stat-icon { background: #e6fcf5; color: #12b886; }

.mission-panel {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(25,31,40,.04);
}

.mission-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
}

.mission-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 340px);
  height: 38px;
  padding: 0 12px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #f9fafb;
  color: #8b95a1;
}

.mission-search-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #191f28;
  font-size: 13px;
}

.mission-toolbar select {
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
  color: #4e5968;
  font-size: 13px;
  font-weight: 700;
}

.mission-table-shell {
  background: #fff;
}

.mission-table {
  color: #333d4b;
  table-layout: fixed;
  min-width: 0 !important;
  width: 100% !important;
}

.mission-col-no { width: 4%; }
.mission-col-purpose { width: 7%; }
.mission-col-title { width: 18%; }
.mission-col-owner { width: 5%; }
.mission-col-collab { width: 6%; }
.mission-col-date { width: 12%; }
.mission-col-priority { width: 6%; }
.mission-col-status { width: 7%; }
.mission-col-progress { width: 8%; }
.mission-col-memo { width: 10%; }
.mission-col-url { width: 7%; }
.mission-col-actions { width: 10%; }

.mission-table th,
.mission-table td {
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-table thead tr {
  border-top: 0 !important;
  border-bottom: 1px solid #e5e8eb !important;
  background: #f9fafb !important;
}

.mission-table th {
  height: 44px;
  border-right: 0 !important;
  color: #8b95a1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

.mission-table td {
  border-right: 0 !important;
  border-bottom: 1px solid #f2f4f6 !important;
  color: #333d4b;
  white-space: nowrap;
}

.mission-table td:nth-child(3),
.mission-table td:nth-child(10),
.mission-table td:nth-child(11) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mission-table td:nth-child(6) {
  overflow: visible;
}

.mission-data-row {
  transition: background .15s ease;
}

.mission-data-row:hover {
  background: #f9fafb !important;
}

.mission-new-row {
  border-bottom: 1px solid #d6eaff !important;
  background: #f5fbff !important;
}

.mission-edit-row {
  border-bottom: 1px solid #ffe8cc !important;
  background: #fff9f0 !important;
}

.mission-overdue-row {
  background: #fff5f5 !important;
}

.mission-table input,
.mission-table select {
  min-width: 0 !important;
  width: 100% !important;
  border: 1px solid #d1d6db !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #191f28 !important;
  outline: 0 !important;
}

.mission-owner-select,
.mission-collab-select,
.mission-range-control {
  min-width: 0 !important;
  width: 100% !important;
}

.mission-range-control button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-table input:focus,
.mission-table select:focus,
.mission-alert-item textarea:focus {
  border-color: #3182f6 !important;
  box-shadow: 0 0 0 3px rgba(49,130,246,.14) !important;
}

.mission-table a,
.mission-detail-grid a {
  color: #3182f6 !important;
  font-weight: 800;
  text-decoration: none !important;
}

.mission-table a:hover,
.mission-detail-grid a:hover {
  text-decoration: underline !important;
}

.mission-primary-btn,
.mission-secondary-btn,
.mission-danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mission-table .mission-primary-btn,
.mission-table .mission-secondary-btn {
  min-height: 28px;
  padding: 0 8px;
  font-size: 11px;
}

.mission-primary-btn {
  border: 1px solid #3182f6;
  background: #3182f6;
  color: #fff;
}

.mission-primary-btn:hover {
  background: #1b64da;
  border-color: #1b64da;
}

.mission-secondary-btn {
  border: 1px solid #e5e8eb;
  background: #fff;
  color: #4e5968;
}

.mission-secondary-btn:hover {
  background: #f2f4f6;
}

.mission-danger-btn {
  border: 1px solid #f03e3e;
  background: #f03e3e;
  color: #fff;
}

.mission-danger-btn:hover {
  background: #e03131;
  border-color: #e03131;
}

.mission-success-action { color: #12b886; }
.mission-warning-action,
.mission-warning-text { color: #f59f00; }
.mission-danger-action { color: #f03e3e; }

.mission-detail-row {
  background: #f9fafb;
}

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

.mission-detail-grid span {
  color: #8b95a1;
  font-weight: 800;
}

.mission-detail-grid div div {
  margin-top: 6px;
  color: #333d4b;
  white-space: pre-wrap;
}

.mission-detail-danger {
  color: #f03e3e !important;
}

.mission-empty-row {
  padding: 40px 16px !important;
  color: #8b95a1 !important;
  text-align: center;
}

.mission-alert-backdrop {
  background: rgba(25,31,40,.52);
}

.mission-alert-dialog {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(25,31,40,.22);
}

.mission-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #edf0f3;
  background: #f5fbff;
}

.mission-alert-head.is-overdue {
  background: #fff5f5;
}

.mission-alert-head h3 {
  margin: 0;
  color: #191f28;
  font-size: 18px;
  font-weight: 800;
}

.mission-alert-item {
  border: 1px solid #d6eaff;
  border-radius: 8px;
  background: #f5fbff;
  padding: 16px;
}

.mission-alert-item.is-overdue {
  border-color: #ffc9c9;
  background: #fff5f5;
}

.mission-alert-item textarea {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #ffc9c9;
  border-radius: 8px;
  background: #fff;
  color: #191f28;
  font-size: 13px;
  outline: 0;
}

.mission-alert-foot {
  display: flex;
  justify-content: flex-end;
  padding: 16px 20px;
  border-top: 1px solid #edf0f3;
  background: #f9fafb;
}

.mission-alert-foot span {
  color: #f03e3e;
  font-size: 12px;
  font-weight: 800;
}

/* ── 미션 / 할일 탭 전환 ───────────────────────────────── */
.mission-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 4px;
  padding: 4px;
  border: 1px solid #edf0f3;
  border-radius: 10px;
  background: #f2f4f6;
}

.mission-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 8px;
  background: transparent;
  color: #6b7684;
  font-size: 14px;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.mission-tab i { font-size: 13px; }
.mission-tab:hover { color: #4e5968; }

.mission-tab.is-active {
  background: #fff;
  color: #3182f6;
  box-shadow: 0 1px 3px rgba(25,31,40,.10);
}

/* ── 할일 탭(개인 체크리스트) ──────────────────────────── */
.mission-todo-add {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #edf0f3;
  background: #f9fafb;
}

.mission-todo-add-field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e5e8eb;
  border-radius: 10px;
  background: #fff;
  color: #8b95a1;
}

.mission-todo-add-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #191f28;
  font-size: 14px;
}

.mission-todo-add .mission-primary-btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 13px;
}

.mission-todo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f2f4f6;
}

.mission-todo-count { color: #6b7684; font-size: 13px; font-weight: 700; }
.mission-todo-count b { color: #3182f6; }

.mission-todo-clear {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e5e8eb;
  border-radius: 8px;
  background: #fff;
  color: #6b7684;
  font-size: 12px;
  font-weight: 700;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mission-todo-clear:hover { background: #fff5f5; color: #f03e3e; border-color: #ffc9c9; }

.mission-todo-list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.mission-todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #f7f8fa;
  transition: background .15s ease;
}

.mission-todo-item:last-child { border-bottom: 0; }
.mission-todo-item:hover { background: #f9fafb; }

.mission-todo-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #d1d6db;
  border-radius: 7px;
  background: #fff;
  color: transparent;
  font-size: 11px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mission-todo-check:hover { border-color: #3182f6; }

.mission-todo-item.is-done .mission-todo-check {
  border-color: #3182f6;
  background: #3182f6;
  color: #fff;
}

.mission-todo-text {
  flex: 1;
  min-width: 0;
  color: #333d4b;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  cursor: text;
}

.mission-todo-item.is-done .mission-todo-text {
  color: #adb5bd;
  text-decoration: line-through;
  text-decoration-color: #adb5bd;
}

.mission-todo-actions {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s ease;
}

.mission-todo-item:hover .mission-todo-actions,
.mission-todo-item:focus-within .mission-todo-actions { opacity: 1; }

.mission-todo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: transparent;
  color: #8b95a1;
  font-size: 12px;
  transition: background .15s ease, color .15s ease;
}

.mission-todo-icon:hover { background: #f2f4f6; color: #3182f6; }
.mission-todo-icon-danger:hover { background: #fff5f5; color: #f03e3e; }

.mission-todo-item.is-editing { gap: 8px; }

.mission-todo-edit-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #3182f6;
  border-radius: 8px;
  outline: 0;
  color: #191f28;
  font-size: 14px;
  box-shadow: 0 0 0 3px rgba(49,130,246,.14);
}

.mission-todo-edit-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

.mission-todo-loading {
  padding: 40px 16px;
  text-align: center;
  color: #8b95a1;
  font-size: 13px;
}

.mission-todo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 52px 16px;
  text-align: center;
  color: #8b95a1;
}

.mission-todo-empty i { font-size: 34px; color: #d1d6db; }
.mission-todo-empty p { margin: 0; font-size: 13px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════
   할일 위젯(ptodo) — 홈 대시보드 + 할일 탭 공유. 태그(공유) + 마감기한.
   ═══════════════════════════════════════════════════════ */
.ptodo-add {
  padding: 14px 16px;
  border-bottom: 1px solid #edf0f3;
  background: #f9fafb;
}
.ptodo-add-row { display: flex; gap: 8px; align-items: stretch; }
.ptodo-add-field {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  height: 42px; padding: 0 14px;
  border: 1px solid #e5e8eb; border-radius: 10px; background: #fff; color: #8b95a1;
}
.ptodo-add-field input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: #191f28; font-size: 14px;
}
.ptodo-tag-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid #e5e8eb; border-radius: 10px; background: #fff; color: #6b7684;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ptodo-tag-btn:hover { background: #eef4ff; color: #3182f6; border-color: #b7d3ff; }
.ptodo-add .mission-primary-btn { min-height: 42px; padding: 0 16px; font-size: 13px; }
.ptodo-add-label { margin-left: 4px; }
.ptodo-draft-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ptodo-draft-tags:empty { display: none; }

.ptodo-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #f2f4f6;
}
.ptodo-count { color: #6b7684; font-size: 13px; font-weight: 700; }
.ptodo-count b { color: #3182f6; }
.ptodo-clear {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 1px solid #e5e8eb; border-radius: 8px; background: #fff; color: #6b7684;
  font-size: 12px; font-weight: 700; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ptodo-clear:hover { background: #fff5f5; color: #f03e3e; border-color: #ffc9c9; }

.ptodo-list { margin: 0; padding: 6px 0; list-style: none; }
.ptodo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid #f7f8fa; transition: background .15s ease;
}
.ptodo-item:last-child { border-bottom: 0; }
.ptodo-item:hover { background: #f9fafb; }
.ptodo-date {
  flex-shrink: 0; width: 38px; text-align: center;
  color: #8b95a1; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ptodo-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border: 2px solid #d1d6db; border-radius: 7px; background: #fff;
  color: transparent; font-size: 11px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.ptodo-check:hover { border-color: #3182f6; }
.ptodo-item.is-done .ptodo-check { border-color: #3182f6; background: #3182f6; color: #fff; }
.ptodo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ptodo-text { color: #333d4b; font-size: 14px; line-height: 1.35; word-break: break-word; cursor: text; }
.ptodo-item.is-done .ptodo-text { color: #adb5bd; text-decoration: line-through; text-decoration-color: #adb5bd; }
.ptodo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ptodo-tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; background: #eef4ff; color: #3064c8;
  font-size: 11px; font-weight: 700;
}
.ptodo-tag-chip i { font-size: 9px; }
.ptodo-tag-chip button { border: 0; background: transparent; color: #3064c8; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 2px; }
/* 등록자(태그 주관자) 칩 — 공유대상 칩과 구분되는 앰버 톤 */
.ptodo-owner-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px; background: #fff4e5; color: #b45309;
  font-size: 11px; font-weight: 800;
}
.ptodo-owner-chip i { font-size: 9px; }
.ptodo-item-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.ptodo-due-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 4px;
  padding: 2px 8px; border-radius: 999px; background: #f2f4f6; color: #4e5968;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.ptodo-due-chip i { font-size: 9px; }
.ptodo-due-chip.is-overdue { background: #ffecef; color: #f04452; }
.ptodo-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; background: transparent; color: #8b95a1;
  font-size: 12px; transition: background .15s ease, color .15s ease;
}
.ptodo-icon:hover { background: #f2f4f6; color: #3182f6; }
.ptodo-icon-danger:hover { background: #fff5f5; color: #f03e3e; }
/* 부서 캘린더 공개 여부 — 잠근 상태만 색으로 눈에 띄게(공개가 기본이라 평소엔 조용히) */
.ptodo-icon.is-private { color: #4f46e5; background: #eef2ff; }

.ptodo-item.is-editing { gap: 8px; }
.ptodo-edit-input {
  flex: 1; min-width: 0; height: 36px; padding: 0 12px;
  border: 1px solid #3182f6; border-radius: 8px; outline: 0; color: #191f28; font-size: 14px;
  box-shadow: 0 0 0 3px rgba(49,130,246,.14);
}
.ptodo-edit-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }

.ptodo-loading, .ptodo-empty { padding: 32px 16px; text-align: center; color: #8b95a1; font-size: 13px; }
.ptodo-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ptodo-empty i { font-size: 28px; color: #d1d6db; }
.ptodo-empty p { margin: 0; line-height: 1.6; }
.ptodo-error p { color: #f03e3e; }

/* 공용 팝오버 — body 에 fixed 로 부착되어 카드 overflow:hidden 을 탈출 */
.ptodo-popover {
  display: none; position: fixed; z-index: 12000; width: 264px;
  border: 1px solid #e5e8eb; border-radius: 12px; background: #fff;
  box-shadow: 0 18px 48px rgba(25,31,40,.22); overflow: hidden;
}
.ptodo-popover.is-open { display: block; }
.ptodo-pop-head { padding: 12px 14px; border-bottom: 1px solid #f2f4f6; font-size: 13px; font-weight: 800; color: #191f28; }
.ptodo-pop-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-top: 1px solid #f2f4f6; background: #f9fafb;
}
.ptodo-pop-hint { color: #8b95a1; font-size: 11px; font-weight: 600; }
.ptodo-pop-empty { padding: 20px 14px; text-align: center; color: #8b95a1; font-size: 12px; }

.ptodo-dept-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px; border-bottom: 1px solid #f2f4f6; background: #fafbfc;
}
.ptodo-dept-tab {
  padding: 3px 10px; border: 1px solid #e5e8eb; border-radius: 999px;
  background: #fff; color: #6b7684; font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ptodo-dept-tab:hover { background: #f2f4f6; color: #4e5968; }
.ptodo-dept-tab.is-on { background: #3182f6; border-color: #3182f6; color: #fff; }
.ptodo-taglist { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.ptodo-tagopt {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer;
}
.ptodo-tagopt:hover { background: #f2f4f6; }
.ptodo-tagopt.is-on { background: #eef4ff; }
.ptodo-tagopt-check {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 18px; height: 18px; border: 2px solid #d1d6db; border-radius: 5px; background: #fff;
  color: transparent; font-size: 9px;
}
.ptodo-tagopt.is-on .ptodo-tagopt-check { border-color: #3182f6; background: #3182f6; color: #fff; }
.ptodo-tagopt-name { min-width: 0; flex: 1; color: #333d4b; font-size: 13px; font-weight: 600; }
.ptodo-tagopt-name em { color: #8b95a1; font-style: normal; font-size: 11px; font-weight: 500; }

.ptodo-due-hour { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #f2f4f6; }
.ptodo-due-hour span { color: #6b7684; font-size: 12px; font-weight: 700; }
.ptodo-due-hour select {
  flex: 1; height: 34px; padding: 0 10px; border: 1px solid #e5e8eb; border-radius: 8px;
  background: #fff; color: #191f28; font-size: 13px; outline: 0;
}
.ptodo-cal { padding: 10px 12px; }
.ptodo-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ptodo-cal-head span { font-weight: 800; color: #191f28; font-size: 13px; }
.ptodo-cal-head button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #6b7684; cursor: pointer; }
.ptodo-cal-head button:hover { background: #f2f4f6; }
.ptodo-cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 2px; }
.ptodo-cal-dow span { text-align: center; font-size: 10px; font-weight: 700; color: #adb5bd; }
.ptodo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ptodo-cal-day { height: 30px; border: 0; border-radius: 7px; background: transparent; color: #333d4b; font-size: 12px; cursor: pointer; }
.ptodo-cal-day:hover { background: #eef4ff; color: #3182f6; }
.ptodo-cal-day.is-sel { background: #3182f6; color: #fff; font-weight: 800; }
.ptodo-due-clear {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 1px solid #ffc9c9; border-radius: 8px; background: #fff; color: #f03e3e;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.ptodo-due-clear:hover { background: #fff5f5; }

/* 홈 대시보드 할일 위젯 */
.dashboard-todo-widget { display: flex; flex-direction: column; }
.dashboard-mission-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 12px 18px; border: 0; border-bottom: 1px solid #edf0f3;
  background: #f5f9ff; color: #3064c8; font-size: 13px; font-weight: 800; cursor: pointer;
}
.dashboard-mission-summary:hover { background: #eaf2ff; }
.dashboard-mission-summary-count { color: #4e5968; font-weight: 700; }
.dashboard-mission-summary-count b { color: #3182f6; }
.ptodo-compact-wrap .ptodo-add { background: #fff; }
.ptodo-list.is-compact .ptodo-item { padding: 8px 14px; }
.ptodo-list.is-compact .ptodo-text { font-size: 13px; }

/* 홈 미션&할일 카드를 공지/일정 카드(.dashboard-equal-card, 402px)와 같은 높이로 —
   카드를 flex 컬럼으로 만들어 할일 목록이 남는 공간을 채우고 넘치면 내부 스크롤. */
.dashboard-todo-card { display: flex; flex-direction: column; }
.dashboard-todo-card .dashboard-todo-widget { flex: 1; min-height: 0; }
.dashboard-todo-card .ptodo-compact-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dashboard-todo-card .ptodo-listbox { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dashboard-todo-card .ptodo-listbox .ptodo-list,
.dashboard-todo-card .ptodo-listbox .ptodo-empty,
.dashboard-todo-card .ptodo-listbox .ptodo-loading { flex: 1; min-height: 0; overflow-y: auto; }

@media (max-width: 768px) {
  .ptodo-add-row { flex-wrap: wrap; }
  .ptodo-add-field { flex-basis: 100%; }
  .ptodo-popover { width: min(92vw, 300px); }
}

@media (max-width: 768px) {
  .mission-hero {
    align-items: flex-start;
  }

  .mission-title {
    font-size: 24px;
  }

  .mission-stat-inner {
    padding: 14px;
  }

  .mission-toolbar {
    align-items: stretch;
  }

  .mission-search-wrap,
  .mission-toolbar select {
    width: 100%;
  }

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

  .mission-tabs { width: 100%; }
  .mission-tab { flex: 1; justify-content: center; padding: 0 10px; }

  .mission-todo-add { flex-direction: column; }
  .mission-todo-add .mission-primary-btn { width: 100%; }
  .mission-todo-actions { opacity: 1; }
}


/* ═══════════════════════════════════════════════════════
   전역 보라색 제거 — indigo / purple / violet → 토스 블루 (앱 전역)
   네임드 Tailwind 유틸리티(class) 대상. 인라인 hex 는 JS/CSS 에서 직접 치환됨.
   파일 최하단 배치 → 캐스케이드상 가장 마지막에 적용되어 보라 유틸을 확실히 덮어씀.
   (핑크/로즈/fuchsia 계열은 '보라색'이 아니므로 미변경)
   ═══════════════════════════════════════════════════════ */

[class*="text-indigo-"],
[class*="text-purple-"],
[class*="text-violet-"] {
  color: var(--toss-blue) !important;
}

.text-indigo-50,
.text-indigo-100,
.text-purple-50,
.text-purple-100,
.text-violet-50,
.text-violet-100 {
  color: #ffffff !important;
}

.bg-indigo-300,
.bg-indigo-400,
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-indigo-800,
.bg-indigo-900,
.bg-indigo-950,
.bg-purple-300,
.bg-purple-400,
.bg-purple-500,
.bg-purple-600,
.bg-purple-700,
.bg-purple-800,
.bg-purple-900,
.bg-purple-950,
.bg-violet-300,
.bg-violet-400,
.bg-violet-500,
.bg-violet-600,
.bg-violet-700,
.bg-violet-800,
.bg-violet-900,
.bg-violet-950 {
  background-color: var(--toss-blue) !important;
  border-color: var(--toss-blue) !important;
}

.bg-indigo-50,
.bg-indigo-100,
.bg-indigo-200,
.bg-purple-50,
.bg-purple-100,
.bg-purple-200,
.bg-violet-50,
.bg-violet-100,
.bg-violet-200 {
  background-color: var(--toss-blue-soft) !important;
}

[class*="hover:bg-indigo-"]:hover,
[class*="hover:bg-purple-"]:hover,
[class*="hover:bg-violet-"]:hover {
  background-color: var(--toss-blue) !important;
}

.from-indigo-50,
.from-indigo-100,
.from-indigo-200,
.from-purple-50,
.from-purple-100,
.from-purple-200,
.from-violet-50,
.from-violet-100,
.from-violet-200,
.via-indigo-50,
.via-indigo-100,
.via-indigo-200,
.via-purple-50,
.via-purple-100,
.via-purple-200,
.via-violet-50,
.via-violet-100,
.via-violet-200,
.to-indigo-50,
.to-indigo-100,
.to-indigo-200,
.to-purple-50,
.to-purple-100,
.to-purple-200,
.to-violet-50,
.to-violet-100,
.to-violet-200 {
  background-image: none !important;
  background-color: #fbfcff !important;
}

.from-indigo-300,
.from-indigo-400,
.from-indigo-500,
.from-indigo-600,
.from-indigo-700,
.from-indigo-800,
.from-indigo-900,
.from-indigo-950,
.from-purple-300,
.from-purple-400,
.from-purple-500,
.from-purple-600,
.from-purple-700,
.from-purple-800,
.from-purple-900,
.from-purple-950,
.from-violet-300,
.from-violet-400,
.from-violet-500,
.from-violet-600,
.from-violet-700,
.from-violet-800,
.from-violet-900,
.from-violet-950,
.via-indigo-300,
.via-indigo-400,
.via-indigo-500,
.via-indigo-600,
.via-indigo-700,
.via-indigo-800,
.via-indigo-900,
.via-indigo-950,
.via-purple-300,
.via-purple-400,
.via-purple-500,
.via-purple-600,
.via-purple-700,
.via-purple-800,
.via-purple-900,
.via-purple-950,
.via-violet-300,
.via-violet-400,
.via-violet-500,
.via-violet-600,
.via-violet-700,
.via-violet-800,
.via-violet-900,
.via-violet-950,
.to-indigo-300,
.to-indigo-400,
.to-indigo-500,
.to-indigo-600,
.to-indigo-700,
.to-indigo-800,
.to-indigo-900,
.to-indigo-950,
.to-purple-300,
.to-purple-400,
.to-purple-500,
.to-purple-600,
.to-purple-700,
.to-purple-800,
.to-purple-900,
.to-purple-950,
.to-violet-300,
.to-violet-400,
.to-violet-500,
.to-violet-600,
.to-violet-700,
.to-violet-800,
.to-violet-900,
.to-violet-950 {
  background-image: none !important;
  background-color: var(--toss-blue) !important;
}

[class*="border-indigo-"],
[class*="border-purple-"],
[class*="border-violet-"] {
  border-color: #c9e0ff !important;
}

[class*="ring-indigo-"],
[class*="ring-purple-"],
[class*="ring-violet-"],
[class*="focus:ring-indigo-"]:focus,
[class*="focus:ring-purple-"]:focus,
[class*="focus:ring-violet-"]:focus {
  --tw-ring-color: var(--toss-blue) !important;
}

[class*="accent-indigo-"],
[class*="accent-purple-"],
[class*="accent-violet-"] {
  accent-color: var(--toss-blue) !important;
}

[class*="fill-indigo-"],
[class*="fill-purple-"],
[class*="fill-violet-"] {
  fill: var(--toss-blue) !important;
}

[class*="stroke-indigo-"],
[class*="stroke-purple-"],
[class*="stroke-violet-"] {
  stroke: var(--toss-blue) !important;
}

[class*="shadow-indigo-"],
[class*="shadow-purple-"],
[class*="shadow-violet-"] {
  --tw-shadow-color: var(--toss-blue) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}


/* ───────────────────────────────────────────────
   계약관리 편집 가능 셀: 상시 파란 배경 톤 다운
   원인: .toss-module [class*="bg-blue-50"] (위쪽 규칙)이 편집 셀의
         hover:bg-blue-50 까지 부분 매칭 → 상시 진한 블루(#e8f3ff)+블루 텍스트로 표시됨.
   조치: 편집 셀만 아주 옅은 블루로 낮추고, 텍스트는 기본 회색 복원(내부 배지 색은 유지),
         호버 시에만 약간 진하게.
   ─────────────────────────────────────────────── */
.toss-contract-page #sales-scroll-main td[class*="hover:bg-blue-50"] {
  background: #f4f8ff !important;
  color: #374151 !important;
}
.toss-contract-page #sales-scroll-main td[class*="hover:bg-blue-50"]:hover {
  background: #e8f3ff !important;
}

/* 캠페인 관리 편집 가능 셀도 동일하게 톤다운 (계약관리와 동일) */
.toss-campaign-page #camp-scroll-main td[class*="hover:bg-blue-50"] {
  background: #f4f8ff !important;
  color: #374151 !important;
}
.toss-campaign-page #camp-scroll-main td[class*="hover:bg-blue-50"]:hover {
  background: #e8f3ff !important;
}

/* ───────────────────────────────────────────────
   메뉴 열람 권한 관리 토글 스위치
   너비 120px / 켜지면 파란색(#3182f6) / 클릭 시 부드럽게 이동
   ─────────────────────────────────────────────── */
.ms-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.ms-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ms-switch .ms-track {
  position: relative;
  width: 60px; height: 28px; border-radius: 999px;
  background: #cbd5e1;
  transition: background-color .2s ease;
}
.ms-switch .ms-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid #d1d5db;
  transition: transform .2s ease, border-color .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.ms-switch input:checked + .ms-track { background: #3182f6; }
.ms-switch input:checked + .ms-track .ms-knob { transform: translateX(32px); border-color: #fff; }
.ms-switch input:focus-visible + .ms-track { box-shadow: 0 0 0 3px rgba(49,130,246,.25); }

/* 소형 토글 변형 (편집 패널용) */
.ms-switch.sm .ms-track { width: 40px; height: 22px; }
.ms-switch.sm .ms-knob { width: 16px; height: 16px; top: 3px; left: 3px; }
.ms-switch.sm input:checked + .ms-track .ms-knob { transform: translateX(18px); }

/* ───────────────────────────────────────────────
   메뉴 열람 권한 관리 리디자인 (좌: 메뉴 트리 / 우: 편집)
   ─────────────────────────────────────────────── */
.ms2-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); min-height: 560px; }
@media (max-width: 900px) { .ms2-body { grid-template-columns: 1fr; } }

/* 좌측 트리 */
.ms2-tree { border-right: 1px solid #e5e8eb; background: #f6f8fb; display: flex; flex-direction: column; min-height: 0; }
.ms2-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid #e5e8eb; }
.ms2-tree-title { font-size: 12px; font-weight: 900; color: #6b7684; }
.ms2-addcat { border: 1px dashed #b9c7dd; background: #fff; color: #3182f6; font-size: 11px; font-weight: 800; border-radius: 7px; padding: 4px 9px; cursor: pointer; }
.ms2-addcat:hover { background: #e8f3ff; }
.ms2-hint { font-size: 10.5px; color: #8b95a1; padding: 8px 14px 0; }
.ms2-tree-scroll { padding: 8px 10px 14px; overflow-y: auto; max-height: calc(100vh - 300px); }

.ms2-cat { margin-bottom: 8px; border: 1px solid transparent; border-radius: 10px; }
.ms2-cat.is-open { border-color: #e2e8f0; background: #fff; }
.ms2-cat-h { display: flex; align-items: center; gap: 4px; min-height: 38px; padding: 4px 6px; border-radius: 9px; }
.ms2-cat-h:hover { background: #eef4fb; }
.ms2-cat.is-open .ms2-cat-h:hover { background: #f7faff; }
.ms2-cat-toggle { border: 0; width: 24px; height: 24px; border-radius: 6px; background: transparent; color: #73839b; cursor: pointer; flex: 0 0 auto; }
.ms2-cat-toggle:hover { background: #e8f3ff; color: #3182f6; }
.ms2-cat-toggle i { transition: transform .16s ease; }
.ms2-cat.is-open .ms2-cat-toggle i { transform: rotate(180deg); }
.ms2-cat-name { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 11.5px; font-weight: 900; color: #6b7684; letter-spacing: .4px; }
.ms2-cat-name:focus { outline: none; background: #fff; border-radius: 5px; box-shadow: 0 0 0 2px rgba(49,130,246,.25); }
.ms2-cat-fixed-name { flex: 1; font-size: 11.5px; font-weight: 900; color: #8b95a1; letter-spacing: .4px; }
.ms2-cat-btn { border: 0; background: none; color: #c3ccd8; cursor: pointer; font-size: 10px; width: 20px; height: 20px; border-radius: 5px; }
.ms2-cat-btn:hover { background: #e8f3ff; color: #3182f6; }
.ms2-cat-btn.del:hover { background: #ffecef; color: #f04452; }
.ms2-cat-items { display: none; min-height: 30px; padding: 0 7px 7px 34px; border-radius: 8px; transition: background .15s, box-shadow .15s; }
.ms2-cat.is-open .ms2-cat-items { display: block; }
.ms2-cat-items.over { background: #e8f3ff; box-shadow: 0 0 0 2px #93c5fd inset; }
.ms2-subcat { margin: 6px 0 2px; border-color: #e9eef5; background: #f8fafc; }
.ms2-subcat .ms2-cat-h { min-height: 34px; padding-left: 10px; }
.ms2-subcat .ms2-cat-name { font-size: 11px; color: #64748b; }
.ms2-subcat .ms2-cat-items { padding: 0 6px 6px 30px; }

.ms2-mi { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e5e8eb; border-radius: 9px; padding: 8px 10px; margin: 4px 0; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #191f28; }
.ms2-mi[draggable="true"] { cursor: grab; }
.ms2-mi:hover { border-color: #c9e0ff; }
.ms2-mi.sel { border-color: #3182f6; background: #e8f3ff; box-shadow: 0 0 0 1px #3182f6 inset; }
.ms2-mi.off { opacity: .45; }
.ms2-mi.plain { color: #8b95a1; cursor: grab; }
.ms2-mi.dragging { opacity: .92; transform: rotate(1.6deg) scale(1.03); box-shadow: 0 14px 28px rgba(25,31,40,.22); border-color: #93c5fd; }
.ms2-grip { color: #c3ccd8; font-size: 12px; flex-shrink: 0; }
.ms2-grip.fixed { font-size: 10px; }
.ms2-ico { width: 16px; text-align: center; flex-shrink: 0; font-size: 12px; }
.ms2-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms2-tag { font-size: 9px; font-weight: 800; border-radius: 999px; padding: 2px 6px; background: #eef1f4; color: #8b95a1; flex-shrink: 0; }
.ms2-tag.blue { background: #e8f3ff; color: #3182f6; }
.ms2-tag.gray { background: #eef1f4; color: #6b7684; }
.ms2-cat-count { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #eef2f6; color: #7c8ba2; font-size: 10px; font-weight: 800; text-align: center; }
.ms2-item-order { display: none; align-items: center; gap: 1px; margin-left: 2px; }
.ms2-mi:hover .ms2-item-order, .ms2-mi.sel .ms2-item-order { display: inline-flex; }
.ms2-item-order button { width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: #8b95a1; cursor: pointer; font-size: 9px; }
.ms2-item-order button:hover { background: #dcecff; color: #1b64da; }
.ms2-drop-line { height: 3px; border-radius: 99px; background: #3182f6; margin: 2px 6px; position: relative; }
.ms2-drop-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: #3182f6; }
.ms2-child { display: flex; align-items: center; gap: 6px; margin: 2px 0 2px 26px; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #6b7684; cursor: pointer; border: 1px solid transparent; }
.ms2-child:hover { background: #fff; border-color: #e5e8eb; }
.ms2-child.sel { background: #e8f3ff; border-color: #3182f6; color: #1b64da; }
.ms2-child-arrow { font-size: 9px; color: #c3ccd8; }
.ms2-child .ms2-nm { flex: 1; }

/* 우측 편집 패널 */
.ms2-editor { padding: 18px 22px; overflow-y: auto; min-width: 0; background: #fff; }
.ms2-empty { display: grid; place-items: center; gap: 10px; padding: 90px 0; color: #b0b8c1; text-align: center; }
.ms2-empty i { font-size: 30px; }
.ms2-empty p { font-size: 13px; font-weight: 700; margin: 0; }
.ms2-ecard { border: 1px solid #e5e8eb; border-radius: 12px; background: #fff; }
.ms2-einfo { display: flex; align-items: flex-end; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.ms2-avatar { width: 40px; height: 40px; border-radius: 11px; background: #e8f3ff; display: grid; place-items: center; font-size: 17px; flex-shrink: 0; align-self: center; }
.ms2-fld { display: grid; gap: 4px; }
.ms2-fld-grow { flex: 1; min-width: 180px; }
.ms2-fld-c { align-items: center; }
.ms2-fld label { font-size: 10.5px; font-weight: 800; color: #8b95a1; }
.ms2-fld input, .ms2-fld select { border: 1px solid #e5e8eb; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; color: #191f28; background: #fff; min-width: 0; }
.ms2-fld select { width: 170px; }
.ms2-fld input:focus, .ms2-fld select:focus { outline: none; border-color: #3182f6; box-shadow: 0 0 0 3px rgba(49,130,246,.14); }
.ms2-static { font-size: 12.5px; font-weight: 800; color: #6b7684; padding: 8px 2px; }

.ms2-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 1100px) { .ms2-dual { grid-template-columns: 1fr; } }
.ms2-pcard { border: 1px solid #e5e8eb; border-radius: 12px; overflow: hidden; background: #fff; }
.ms2-ph { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #fbfcff; border-bottom: 1px solid #e5e8eb; }
.ms2-ph .t { font-size: 12.5px; font-weight: 900; color: #191f28; }
.ms2-allbtns { display: inline-flex; align-items: center; gap: 5px; }
.ms2-allbtns button { border: 0; background: none; color: #3182f6; font-size: 10.5px; font-weight: 800; cursor: pointer; padding: 2px 3px; border-radius: 4px; }
.ms2-allbtns button:hover { background: #e8f3ff; }
.ms2-allbtns i { font-style: normal; color: #c3ccd8; font-size: 10px; }
.ms2-grp { padding: 7px 14px 3px; font-size: 10px; font-weight: 900; color: #8b95a1; letter-spacing: .5px; background: #fbfcff; }
.ms2-prow { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-top: 1px solid #f4f6f8; }
.ms2-prow-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 750; color: #191f28; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms2-pfoot { padding: 9px 14px; font-size: 10.5px; color: #8b95a1; border-top: 1px solid #f4f6f8; background: #fbfcff; }
.ms2-pfoot b { color: #3182f6; }

/* ───────────────────────────────────────────────
   상단바 브레드크럼 (홈 › 카테고리 › 현재 페이지)
   앞 항목 = 링크(회색→호버 토스 블루), 마지막 항목 = 강조(다크·굵게)
   ─────────────────────────────────────────────── */
#topbar-breadcrumb { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; }
#topbar-breadcrumb .bc-link {
  font-size: 14px; font-weight: 600; color: #8b95a1;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
  transition: color .15s ease;
}
#topbar-breadcrumb .bc-link:hover { color: #3182f6; }
#topbar-breadcrumb .bc-sep { font-size: 16px; color: #cbd5e1; margin: 0 7px; flex-shrink: 0; line-height: 1; }
#topbar-breadcrumb .bc-current {
  font-size: 15px; font-weight: 800; color: #191f28;
  letter-spacing: -0.2px;
  overflow: hidden; text-overflow: ellipsis;
}

/* ───────────────────────────────────────────────
   파이프라인 카드 드래그 — 끄는 동안 살짝 들어올린 효과
   ─────────────────────────────────────────────── */
.pl-card-dragging {
  opacity: 0.9 !important;
  transform: rotate(2.5deg) scale(1.04);
  box-shadow: 0 18px 38px rgba(25, 31, 40, 0.24) !important;
  border-color: #93c5fd !important;
  cursor: grabbing !important;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* ══════════════════════════════════════════════════════════════
   급여관리 리디자인 — 시안 C "Clarity Console"
   B의 구조(밴드·게이지 KPI·세그먼트·스티키 합계) × A의 컬러(라이트 핀테크·블루 단일 액센트)
   .pcz 스코프. 데이터 행 렌더러는 그대로 두고 의미색만 블루계열로 재매핑.
   ══════════════════════════════════════════════════════════════ */
.pcz{
  --pc-bg:#f4f6f9; --pc-surface:#fff; --pc-ink:#101828; --pc-muted:#667085; --pc-faint:#98a2b3;
  --pc-line:#e6eaf0; --pc-line-soft:#eef1f6;
  --pc-blue:#2563eb; --pc-blue-deep:#1d4ed8; --pc-blue-soft:#eff4ff; --pc-blue-line:#d7e3fd;
  --pc-red:#e5484d; --pc-green:#16a34a; --pc-amber:#b45309;
  --pc-ease:cubic-bezier(.22,1,.36,1);
  color:var(--pc-ink);
  font-variant-numeric:tabular-nums;
}
.pcz svg{display:block;flex:none}
.pcz *:focus-visible{outline:2px solid var(--pc-blue);outline-offset:2px;border-radius:8px}

/* ── 헤더 밴드 ── */
.pcz-band{background:linear-gradient(180deg,#fff 0%,#f7faff 100%);border:1px solid var(--pc-line);
  border-radius:14px;padding:18px 20px;margin-bottom:14px}
.pcz-band-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.pcz-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--pc-ink)}
.pcz-title .sub{display:block;font-size:11.5px;font-weight:500;color:var(--pc-muted);margin-top:3px}
.pcz-title .sub b{color:#475467;font-weight:700}
.pcz-band-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pcz-monthnav{display:inline-flex;align-items:center;background:var(--pc-surface);border:1px solid var(--pc-line);
  border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.pcz-monthnav button{width:32px;height:36px;display:grid;place-items:center;color:var(--pc-muted);
  border:none;background:none;cursor:pointer;transition:background .15s,color .15s}
.pcz-monthnav button:hover{background:var(--pc-blue-soft);color:var(--pc-blue)}
.pcz-monthnav .pcz-mlabel{position:relative;height:36px;display:flex;align-items:center;
  border-left:1px solid var(--pc-line-soft);border-right:1px solid var(--pc-line-soft)}
.pcz-monthnav .pcz-mlabel input{width:120px;height:36px;border:none;background:none;padding:0 10px;
  font:inherit;font-weight:800;font-size:13px;color:var(--pc-ink);cursor:pointer}
.pcz-monthnav .pcz-mlabel input:focus{outline:none}
.pcz-payday{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:10px;
  background:var(--pc-blue-soft);border:1px solid var(--pc-blue-line);color:var(--pc-blue-deep);font-weight:700;font-size:12px}

/* ── 버튼 체계 ── */
.pcz-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:9px;
  font-size:12px;font-weight:700;border:none;background:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s}
.pcz-btn:active{transform:scale(.97)}
.pcz-btn-primary{background:var(--pc-blue);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.32)}
.pcz-btn-primary:hover{background:var(--pc-blue-deep)}
.pcz-btn-ghost{background:var(--pc-surface);color:#344054;border:1px solid var(--pc-line)}
.pcz-btn-ghost:hover{border-color:#c9d2e0;background:#fafbfd}
.pcz-btn-soft{background:var(--pc-blue-soft);color:var(--pc-blue-deep);border:1px solid var(--pc-blue-line)}
.pcz-btn-soft:hover{background:#e3ecff}
.pcz-btn-edit{height:36px;padding:0 15px;border-radius:10px;font-size:12.5px;font-weight:800;
  background:var(--pc-blue);color:#fff;box-shadow:0 1px 2px rgba(37,99,235,.35)}
.pcz-btn-edit:hover{background:var(--pc-blue-deep)}
.pcz-btn[disabled]{background:#f1f4f9;color:#c2cad6;border-color:var(--pc-line-soft);cursor:not-allowed;box-shadow:none}
.pcz-btn-icon{width:34px;padding:0;justify-content:center}
.pcz-btn .pcz-chev{transition:transform .18s var(--pc-ease)}
.pcz-dd.open .pcz-btn .pcz-chev{transform:rotate(180deg)}

/* ── 세그먼트 컨트롤 ── */
.pcz-seg{position:relative;display:inline-flex;background:#e9edf3;border-radius:10px;padding:3px}
.pcz-seg .pcz-seg-ind{position:absolute;top:3px;bottom:3px;border-radius:8px;background:var(--pc-surface);
  box-shadow:0 1px 3px rgba(16,24,40,.12);transition:left .25s var(--pc-ease),width .25s var(--pc-ease)}
.pcz-seg button{position:relative;z-index:1;height:31px;padding:0 14px;border-radius:8px;border:none;background:none;
  cursor:pointer;font-size:12.5px;font-weight:700;color:var(--pc-muted);display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.pcz-seg button[aria-selected="true"]{color:var(--pc-blue-deep);background:var(--pc-surface);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.pcz-seg .pcz-cnt{font-size:10.5px;font-weight:800;background:var(--pc-blue-soft);color:var(--pc-blue-deep);border-radius:999px;padding:1px 7px}
.pcz-seg button[aria-selected="false"] .pcz-cnt{background:#dfe5ef;color:var(--pc-muted)}

/* ── 툴바 ── */
.pcz-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0}
.pcz-tgrp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcz-vdiv{width:1px;height:20px;background:var(--pc-line)}
.pcz-tlabel{font-size:10px;font-weight:800;color:var(--pc-faint);letter-spacing:.05em}

/* ── 드롭다운 ── */
.pcz-dd{position:relative}
.pcz-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:210px;background:var(--pc-surface);
  border:1px solid var(--pc-line);border-radius:12px;box-shadow:0 12px 32px rgba(16,24,40,.16);padding:6px;
  opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s var(--pc-ease),transform .18s var(--pc-ease);z-index:60}
.pcz-dd.open .pcz-dd-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.pcz-dd-menu .pcz-dd-h{font-size:10px;font-weight:800;color:var(--pc-faint);padding:6px 10px 4px;letter-spacing:.05em}
.pcz-dd-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:8px;border:none;background:none;
  cursor:pointer;font-size:12.5px;font-weight:600;color:#344054;text-align:left;transition:background .12s}
.pcz-dd-menu button:hover{background:var(--pc-blue-soft);color:var(--pc-blue-deep)}
.pcz-dd-menu .pcz-bk{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:#f1f4f9;color:var(--pc-muted);flex:none}
.pcz-split{display:inline-flex}
.pcz-split .pcz-btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.pcz-split .pcz-btn:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(255,255,255,.3);width:30px;padding:0;justify-content:center}

/* ── KPI 게이지 카드 ── */
.pcz-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.pcz-kpi{background:var(--pc-surface);border:1px solid var(--pc-line);border-radius:13px;padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:box-shadow .2s,transform .25s var(--pc-ease),border-color .2s}
.pcz-kpi:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,24,40,.08);border-color:#d5dce8}
.pcz-kpi .pcz-klbl{font-size:11px;font-weight:600;color:var(--pc-muted)}
.pcz-kpi .pcz-kval{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:2px;color:var(--pc-ink)}
.pcz-kpi .pcz-kval small{font-size:11.5px;font-weight:600;color:var(--pc-faint);margin-left:2px}
.pcz-kpi.warn .pcz-kval{color:var(--pc-amber)}
.pcz-gauge{width:44px;height:44px;position:relative;flex:none}
.pcz-gauge svg{transform:rotate(-90deg)}
.pcz-gauge circle{fill:none;stroke-width:4}
.pcz-gauge .trk{stroke:#e9edf3}
.pcz-gauge .bar{stroke:var(--pc-blue);stroke-linecap:round;stroke-dasharray:113;transition:stroke-dashoffset .9s var(--pc-ease)}
.pcz-kpi.warn .pcz-gauge .bar{stroke:#e8a33d}
.pcz-gauge .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--pc-muted)}

/* ── AUTO 안내 밴드 ── */
.pcz-auto{display:flex;align-items:center;gap:9px;padding:9px 14px;background:#f7faff;border:1px solid var(--pc-line-soft);
  border-radius:11px;font-size:11.5px;color:#475467;margin-bottom:12px}
.pcz-auto .pcz-pill{font-size:10px;font-weight:800;color:var(--pc-blue-deep);background:var(--pc-blue-soft);
  border:1px solid var(--pc-blue-line);padding:2px 8px;border-radius:999px;flex:none}
.pcz-auto b{font-weight:700;color:var(--pc-blue-deep)}

/* ── 테이블 리스킨(기존 마크업 유지) ── */
.pcz-tablecard{background:var(--pc-surface);border:1px solid var(--pc-line);border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);overflow:hidden}
.pcz-tablecard .overflow-x-auto{overflow:auto}
.pcz table{font-variant-numeric:tabular-nums}
.pcz thead{background:#fbfcfe!important}
.pcz thead th{background:#fbfcfe!important;color:var(--pc-muted)!important;font-weight:700!important;
  border-bottom:2px solid var(--pc-blue-line)!important;white-space:nowrap;position:sticky;top:0;z-index:5}
.pcz tbody tr{transition:background .12s}
.pcz tbody tr:hover{background:#f7f9fd}
.pcz tbody td{border-bottom:1px solid var(--pc-line-soft)}
/* 의미색 재매핑: 지급 강조=blue-deep, 퇴직금=muted indigo, 공제=red 유지, 총입금=blue 유지 */
.pcz [class*="text-emerald-7"]{color:var(--pc-blue-deep)!important}
.pcz [class*="text-purple-7"],.pcz [class*="text-indigo-6"]{color:#4f6bd6!important}
.pcz [class*="bg-emerald-50"]{background:var(--pc-blue-soft)!important}
.pcz [class*="bg-blue-50"]{background:#e6eeff!important}
.pcz [class*="bg-amber-50"]{background:#f9fbff!important}
.pcz [class*="text-amber-6"]{color:#5b6b83!important}
/* 개별 지급 항목(성과금·추가지급)의 보라·주황을 중립 잉크로 — 강조는 지급액계/총입금액만 */
.pcz td [class*="text-amber-7"]{color:#344054!important}
.pcz .font-black{font-weight:800!important}
.pcz-foot{padding:11px 16px;font-size:11px;color:var(--pc-faint);border-top:1px solid var(--pc-line-soft)}
.pcz-foot b{color:var(--pc-muted);font-weight:700}

/* ── 스티키 합계 바 ── */
.pcz-totals{position:sticky;bottom:0;z-index:8;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:#f7faff;border-top:2px solid var(--pc-blue);padding:11px 18px}
.pcz-totals .pcz-tcap{font-size:11px;font-weight:700;color:var(--pc-muted);display:flex;align-items:center;gap:7px}
.pcz-titem{display:flex;flex-direction:column}
.pcz-titem .k{font-size:10px;font-weight:600;color:var(--pc-faint);letter-spacing:.04em}
.pcz-titem .v{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--pc-ink);font-variant-numeric:tabular-nums}
.pcz-titem .v.red{color:var(--pc-red)}
.pcz-titem .v.hero{color:var(--pc-blue-deep);font-size:15.5px;font-weight:700}
.pcz-totals .pcz-tspacer{flex:1}
.pcz-totals .pcz-tnote{font-size:10.5px;color:var(--pc-faint)}

@media (max-width:1024px){.pcz-kpis{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.pcz *{animation:none!important;transition:none!important}}

/* ══════════════════════════════════════════════════════════════
   확인·관리 카드 리디자인 — "블루 단정형"
   색을 블루+그레이로 축소, 상태 배지 제거(진행 스텝 1개로 통합),
   경고색은 초과일 텍스트에만. 계약관리 우측 패널 카드.
   ══════════════════════════════════════════════════════════════ */
/* 카드 셸(단색). 긴급은 얇은 좌측 블루 마커로만 구분 */
.ac-card3{position:relative;background:#fff;border:1px solid #e8ebf0;border-radius:13px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 16px rgba(16,24,40,.05);margin-bottom:10px;
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,border-color .2s}
.ac-card3:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.09);border-color:#d6e2fb}
.ac-card3.urgent{border-color:#d6e2fb}
.ac-card3.urgent::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:#2563eb}
/* 헤더: 업체 + 금액 한 줄, 상세 + 라벨 한 줄 */
.ac-card3 .ac3-head{padding:13px 15px 2px}
.ac-card3 .ac3-hrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ac-card3 .ac3-subrow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:2px}
.ac-card3 .ac3-company{font-weight:800;font-size:14px;color:#1a2233;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-card3 .ac3-detail{font-size:11.5px;color:#6b7787;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-card3 .ac3-amt{font-weight:800;font-size:15px;color:#1a2233;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.ac-card3 .ac3-amt small{font-size:10px;font-weight:600;color:#9aa4b2}
.ac-card3 .ac3-k{font-size:10px;color:#9aa4b2;font-weight:600;flex:none}
/* 진행 스텝 — 블루(완료) / 블루 링(현재) / 회색(예정) */
.ac-card3 .ac3-steps{display:flex;align-items:flex-start;padding:12px 15px 11px}
.ac-card3 .ac3-step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:60px;text-align:center}
.ac-card3 .ac3-dot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:10px;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease}
.ac-card3 .ac3-dot svg{width:11px;height:11px}
.ac-card3 .ac3-dot.done{background:#2563eb;color:#fff;border:none}
.ac-card3 .ac3-dot.pend{background:#fff;color:#2563eb;border:2px solid #2563eb}
.ac-card3 .ac3-dot.na{background:#f1f4f9;color:#98a2b3;border:1.5px solid #e8ebf0}
.ac-card3 .ac3-dot.wait{background:#f6f8fb;color:#9aa4b2;border:1.5px solid #e8ebf0}
.ac-card3 .ac3-sl{font-size:10px;font-weight:700;color:#6b7787;line-height:1.3;transition:color .15s ease}
.ac-card3 .ac3-sl.pend{color:#1d4ed8}
/* 미처리 스텝(계산서/입금확인) 클릭 인터랙션 — 아이콘 클릭으로 발행/매칭 팝업 연결 */
.ac-card3 .ac3-step.clk{cursor:pointer;border-radius:9px}
.ac-card3 .ac3-step.clk:hover .ac3-dot.pend{background:#2563eb;color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.35);transform:scale(1.1)}
.ac-card3 .ac3-step.clk:hover .ac3-sl{color:#1d4ed8}
.ac-card3 .ac3-step.clk:active .ac3-dot.pend{transform:scale(.95);box-shadow:0 1px 4px rgba(37,99,235,.3)}
.ac-card3 .ac3-step.clk:focus-visible{outline:2px solid #93b4f8;outline-offset:2px}
.ac-card3 .ac3-ss{font-size:9px;color:#9aa4b2;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.ac-card3 .ac3-bar{flex:1;height:2px;background:#e8ebf0;margin-top:10px;border-radius:2px}
.ac-card3 .ac3-bar.done{background:#2563eb}
/* 메타: 담당·계약일·경과일. 경고색은 경과일 텍스트에만 */
.ac-card3 .ac3-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:11px;color:#6b7787;font-weight:600;padding:0 15px 10px}
.ac-card3 .ac3-meta b{color:#9aa4b2;font-weight:600;margin-right:2px}
.ac-card3 .ac3-sep{color:#d7dce4}
.ac-card3 .ac3-over{color:#d64550;font-weight:700}
.ac-card3 .ac3-urgent{color:#d64550;font-weight:800;font-size:10px}
.ac-card3 .ac3-urgent.hidden{display:none}
/* 액션 버튼 — 아웃라인 + 블루 프라이머리, 하단 균등 */
.ac-card3 .ac3-acts{display:flex;gap:7px;padding:0 15px 13px}
.ac-card3 .ac3-btn{flex:1;height:31px;border-radius:9px;font-size:11.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid #e8ebf0;background:#fff;color:#6b7787;transition:transform .12s,background .15s,border-color .15s,color .15s}
.ac-card3 .ac3-btn:hover{border-color:#d6e2fb;color:#1d4ed8}
.ac-card3 .ac3-btn:active{transform:scale(.97)}
.ac-card3 .ac3-btn.primary{background:#2563eb;border-color:#2563eb;color:#fff}
.ac-card3 .ac3-btn.primary:hover{background:#1d4ed8;color:#fff}
/* 최종 삭제(관리자 전용) — 아이콘 전용 고정폭, 평소엔 절제된 회색 → hover 시 레드 */
.ac-card3 .ac3-btn.danger{flex:none;width:34px;padding:0;color:#b6c0cc}
.ac-card3 .ac3-btn.danger:hover{border-color:#f6cfcf;background:#fdeeee;color:#e5484d}
/* 메모 등록 버튼 — 아이콘 전용 최소 크기(텍스트 없음, title로 안내) */
.ac-card3 .ac3-send{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;padding:0;border-radius:8px;
  background:#2563eb;color:#fff;border:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(37,99,235,.35);transition:background .15s,transform .1s}
.ac-card3 .ac3-send:hover{background:#1d4ed8}
.ac-card3 .ac3-send:active{transform:scale(.96)}
.ac-card3 .ac3-send:disabled{opacity:.6;cursor:default}
/* ── 카드 접기/펼치기 ───────────────────────────────────────────── */
.ac-card3 .ac3-head{cursor:pointer;user-select:none}
.ac-card3 .ac3-hrow .ac3-company{margin-right:auto}   /* 셰브론 추가 후에도 금액은 우측 유지 */
.ac-card3 .ac3-chev{width:22px;height:22px;flex:none;align-self:center;margin-top:-1px;border:none;background:transparent;
  color:#b8c0cc;border-radius:6px;display:grid;place-items:center;cursor:pointer;
  transition:color .15s,background .15s}
.ac-card3 .ac3-chev:hover{background:rgba(16,24,40,.06);color:#475467}
.ac-card3 .ac3-chev i{font-size:12px;transition:transform .2s ease}
.ac-card3.ac3-collapsed .ac3-chev i{transform:rotate(180deg)}
.ac-card3.ac3-collapsed .ac3-body{display:none}
.ac-card3.ac3-collapsed .ac3-head{padding-bottom:12px}

/* ── 확인·관리 예정일(팔로업) — 경고를 예정 상태로 전환 + 당일 리마인드 ── */
.ac-card3 .ac3-fu{font-weight:800;white-space:nowrap}
.ac-card3 .ac3-fu.act{color:#1d4ed8}
.ac-card3 .ac3-fu.today{color:#c07c10}
.ac-card3 .ac3-fu.over{color:#d64550}
.ac-card3 .ac3-fu-cum{color:#9aa4b2;font-weight:600}   /* 예정 활성 시 경과일은 중립(누적 기록) */
.ac-card3 .ac3-btn.fu-on{border-color:#d7e3fd;color:#1d4ed8;background:#eff4ff}
/* 예정일 팝업 */
#acfu-overlay{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:130;display:grid;place-items:center;padding:20px}
.acfu-modal{background:#fff;border:1px solid #e6eaf0;border-radius:16px;box-shadow:0 24px 70px rgba(16,24,40,.28);
  width:100%;max-width:420px;padding:17px 18px}
.acfu-t{font-size:14px;font-weight:800;color:#101828}
.acfu-s{font-size:11px;color:#98a2b3;margin:2px 0 4px}
.acfu-g{font-size:10px;font-weight:800;color:#98a2b3;letter-spacing:.05em;margin:13px 0 7px}
.acfu-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acfu-chip{height:28px;padding:0 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid #e6eaf0;background:#fff;color:#667085;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.acfu-chip:hover{border-color:#d7e3fd;color:#1d4ed8}
.acfu-chip.on{border-color:#2563eb;color:#1d4ed8;background:#eff4ff}
.acfu-inp{height:30px;padding:0 9px;border:1px solid #e6eaf0;border-radius:8px;font-size:12px;color:#101828;background:#fff}
.acfu-inp:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.acfu-prev{margin-top:13px;background:#eff4ff;border:1px solid #d7e3fd;border-radius:9px;padding:8px 11px;
  font-size:11.5px;font-weight:700;color:#1d4ed8;line-height:1.5}
.acfu-foot{display:flex;justify-content:flex-end;gap:7px;margin-top:14px}
.acfu-btn{height:31px;padding:0 13px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;
  border:1px solid #e6eaf0;background:#fff;color:#667085;display:inline-flex;align-items:center;gap:5px}
.acfu-btn:hover{border-color:#d7e3fd;color:#1d4ed8}
.acfu-btn.pri{background:#2563eb;border-color:#2563eb;color:#fff}
.acfu-btn.pri:hover{background:#1d4ed8;color:#fff}
.acfu-btn.danger{background:#fdeeee;border-color:#f6cfcf;color:#e5484d;margin-right:auto}
.acfu-btn.danger:hover{background:#fbdcdc;color:#e5484d}
.acfu-btn:disabled{opacity:.6;cursor:default}

/* ══════════════════════════════════════════════════════════════
   홈 대시보드 통일 스킨 (리팩터 1단계) — 스코프 토글 gated
   html.ui-refac 가 있을 때만 #dashboard-content 에 적용.
   장식 액센트(emerald·purple·indigo·rose)→블루, 의미색(green=완료·red=마감초과) 보존.
   CSS·class만 변경(텍스트/마크업 0). 토글 OFF 시 원본으로 즉시 회귀.
   정확 클래스 셀렉터만 사용([class*=] 부분일치 금지 → 오염 버그 회피).
   ══════════════════════════════════════════════════════════════ */
html.ui-refac #dashboard-content{
  --uc-blue:#2563eb; --uc-blue-deep:#1d4ed8; --uc-blue-soft:#eff4ff; --uc-blue-line:#d7e3fd;
  --uc-ease:cubic-bezier(.22,1,.36,1);
  font-variant-numeric:tabular-nums;
}
/* 장식 텍스트 액센트 → 블루 (green/red 의미색은 건드리지 않음) */
html.ui-refac #dashboard-content .text-emerald-600,
html.ui-refac #dashboard-content .text-emerald-700,
html.ui-refac #dashboard-content .text-emerald-800,
html.ui-refac #dashboard-content .text-purple-500,
html.ui-refac #dashboard-content .text-purple-600,
html.ui-refac #dashboard-content .text-purple-700,
html.ui-refac #dashboard-content .text-indigo-500,
html.ui-refac #dashboard-content .text-indigo-700,
html.ui-refac #dashboard-content .text-rose-400,
html.ui-refac #dashboard-content .text-rose-500{ color:var(--uc-blue-deep)!important; }
/* soft 틴트 배경 → blue-soft */
html.ui-refac #dashboard-content .bg-purple-50,
html.ui-refac #dashboard-content .bg-purple-100,
html.ui-refac #dashboard-content .bg-rose-50,
html.ui-refac #dashboard-content .bg-rose-100{ background:var(--uc-blue-soft)!important; }
/* solid 장식 배경 → blue (emerald 진행바/뱃지, rose 알림점) */
html.ui-refac #dashboard-content .bg-emerald-500,
html.ui-refac #dashboard-content .bg-emerald-600,
html.ui-refac #dashboard-content .bg-emerald-700,
html.ui-refac #dashboard-content .bg-rose-500{ background:var(--uc-blue)!important; }
html.ui-refac #dashboard-content .border-emerald-100{ border-color:var(--uc-blue-line)!important; }
/* 온보딩 위젯 헤더 인라인 그라디언트(emerald) → 블루 틴트 (인라인은 !important로 상회) */
html.ui-refac #my-onboarding-panel [style*="linear-gradient"]{ background:#f4f8ff!important; border-bottom-color:var(--uc-blue-line)!important; }
/* 노란 primary 버튼(공지 작성) → 블루로 통일 */
html.ui-refac #dashboard-content .dashboard-small-btn-yellow{ background:var(--uc-blue)!important; border-color:var(--uc-blue)!important; }
/* KPI 숫자 고정폭 */
html.ui-refac #dashboard-content .dashboard-metric strong{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
/* 모션 토큰(빠른 ease-out) + 눌림 반응 */
html.ui-refac #dashboard-content .dashboard-small-btn,
html.ui-refac #dashboard-content .dashboard-primary-btn,
html.ui-refac #dashboard-content .dashboard-mini-refresh,
html.ui-refac #dashboard-content .dashboard-quick-tab,
html.ui-refac #dashboard-content .dashboard-card{ transition:background 150ms var(--uc-ease),border-color 150ms var(--uc-ease),color 150ms var(--uc-ease),box-shadow 200ms var(--uc-ease),transform 110ms var(--uc-ease); }
html.ui-refac #dashboard-content .dashboard-small-btn:active,
html.ui-refac #dashboard-content .dashboard-primary-btn:active,
html.ui-refac #dashboard-content .dashboard-quick-tab:active{ transform:scale(.98); }
/* 리팩터 토글 플로팅 스위치 — 리팩터 ON 고정으로 확정되어 토글 UI 제거(스타일도 삭제) */
/* ══════════════════════════════════════════════════════════
   프로토타입 컴포넌트 룩 (홈 대시보드) — refactor-preview 프로토타입의
   "컴포넌트 1벌" 시각언어를 실제 대시보드 클래스에 매핑.
   원칙: 텍스트/마크업 미변경, 정확 클래스 셀렉터만, ui-refac 스코프(끄면 원본).
   ────────────────────────────────────────────────────────── */
/* 카드: 프로토타입 .card (라운드 14 + 레이어드 소프트 그림자) */
html.ui-refac #dashboard-content .dashboard-card{
  border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.05);
}
html.ui-refac #dashboard-content .dashboard-card:hover{
  border-color:var(--uc-blue-line);
  box-shadow:0 10px 26px rgba(16,24,40,.10);
}
html.ui-refac #dashboard-content .dashboard-card.dashboard-no-lift:hover{
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px rgba(16,24,40,.05);
}
/* KPI(metric): 프로토타입 .kpi (라운드 13 + hover 리프트·블루라인) */
html.ui-refac #dashboard-content .dashboard-metric{ border-radius:13px; }
html.ui-refac #dashboard-content .dashboard-metric:hover{
  border-color:var(--uc-blue-line);
  background:#fbfcfe;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}
html.ui-refac #dashboard-content .dashboard-metric:hover strong{ color:var(--uc-blue-deep); }
html.ui-refac #dashboard-content .dashboard-embedded-panel{ border-radius:12px; }
/* 버튼: 프로토타입 .btn (라운드 9 + primary 소프트 섀도 + hover deep) */
html.ui-refac #dashboard-content .dashboard-small-btn,
html.ui-refac #dashboard-content .dashboard-primary-btn,
html.ui-refac #dashboard-content .dashboard-mini-refresh{ border-radius:9px; }
html.ui-refac #dashboard-content .dashboard-small-btn-blue,
html.ui-refac #dashboard-content .dashboard-primary-btn{
  background:var(--uc-blue)!important; border-color:var(--uc-blue)!important;
  box-shadow:0 1px 2px rgba(37,99,235,.32);
}
html.ui-refac #dashboard-content .dashboard-small-btn-blue:hover,
html.ui-refac #dashboard-content .dashboard-primary-btn:hover{
  background:var(--uc-blue-deep)!important; border-color:var(--uc-blue-deep)!important;
  box-shadow:0 8px 18px rgba(37,99,235,.22);
}
/* 세그먼트(빠른탭): 프로토타입 .seg 액티브 액센트 */
html.ui-refac #dashboard-content .dashboard-quick-tabs{ border-radius:10px; }
html.ui-refac #dashboard-content .dashboard-quick-tab.active{ color:var(--uc-blue-deep)!important; }
html.ui-refac #dashboard-content .dashboard-quick-tab:hover{ color:var(--uc-blue-deep)!important; }
/* 블루 틴트 보조 표면: Toss 블루(#3182f6) → 프로토타입 블루 통일 */
html.ui-refac #dashboard-content .dashboard-count-badge.purple,
html.ui-refac #dashboard-content .toss-mini-chip.purple{
  background:var(--uc-blue-soft)!important; color:var(--uc-blue-deep)!important;
}
html.ui-refac #dashboard-content .toss-detail-icon.purple,
html.ui-refac #dashboard-content .admin-avatar{
  background:var(--uc-blue-soft)!important; color:var(--uc-blue-deep)!important;
}
html.ui-refac #dashboard-content .toss-copy{ color:var(--uc-blue-deep)!important; }
html.ui-refac #dashboard-content .admin-action-btn.approve{ background:var(--uc-blue)!important; }
html.ui-refac #dashboard-content .admin-action-btn.approve:hover{ background:var(--uc-blue-deep)!important; }
html.ui-refac #dashboard-content .admin-req-c .arc-copy{
  border-color:var(--uc-blue-line)!important; background:var(--uc-blue-soft)!important; color:var(--uc-blue-deep)!important;
}
html.ui-refac #dashboard-content .admin-req-c .arc-ib.ok{ background:var(--uc-blue)!important; }
html.ui-refac #dashboard-content .admin-req-c .arc-ib.ok:hover{ background:var(--uc-blue-deep)!important; }
html.ui-refac #dashboard-content .dashboard-empty-state:hover i{ color:var(--uc-blue-deep)!important; }
html.ui-refac #dashboard-content .dashboard-metric:hover strong{ color:var(--uc-blue-deep)!important; }

/* ══════════════════════════════════════════════════════════
   밀도(compact) 레이어 — 프로토타입처럼 "작고 오밀조밀".
   사이드바는 폭 유지(오프셋 리스크 회피), 버튼/폰트/여백만 축소.
   홈 콘텐츠는 히어로·KPI·카드헤더·버튼 밀도 축소.
   원칙: 텍스트/마크업 미변경, ui-refac 스코프(끄면 원본).
   사이드바 기존 규칙이 !important 라 동일하게 !important + 상위 특이도 사용.
   ────────────────────────────────────────────────────────── */
/* ── 사이드바 컴팩트(전 페이지 공용 크롬) ── */
html.ui-refac #sidebar .tab-btn,
html.ui-refac #sidebar .nav-item,
html.ui-refac #sidebar .sidebar-special-btn{ padding:7px 14px!important; font-size:12px!important; gap:9px!important; }
html.ui-refac #sidebar .tab-btn{ margin:0!important; }
html.ui-refac #sidebar .tab-btn i,
html.ui-refac #sidebar .nav-item i,
html.ui-refac #sidebar .sidebar-special-btn i{ width:16px!important; font-size:12px!important; }
html.ui-refac #sidebar .sidebar-section-label,
html.ui-refac #sidebar .sidebar-section{ padding:11px 14px 3px!important; font-size:9.5px!important; letter-spacing:1px!important; }
html.ui-refac #sidebar .sidebar-logo{ padding:14px 16px!important; }
html.ui-refac #sidebar .sidebar-logo img{ width:30px!important; height:30px!important; min-width:30px!important; max-width:30px!important; }
html.ui-refac #sidebar .logo-name{ font-size:14px!important; }
html.ui-refac #sidebar .sidebar-user{ padding:10px 12px!important; }
html.ui-refac #sidebar .sidebar-user-inner{ padding:8px 10px!important; gap:9px!important; }
html.ui-refac #sidebar .sidebar-user-avatar{ width:28px!important; height:28px!important; min-width:28px!important; }
html.ui-refac #sidebar .sidebar-user-name{ font-size:12.5px!important; }
html.ui-refac #sidebar .sidebar-nav{ padding:4px 0!important; }
html.ui-refac #sidebar .sidebar-actions{ padding:8px 12px 12px!important; gap:3px!important; }
html.ui-refac #sidebar .sidebar-action-btn{ padding:6px 11px!important; font-size:11.5px!important; }
html.ui-refac #sidebar .sidebar-action-btn i{ font-size:11px!important; }
/* ── 홈 콘텐츠 밀도 축소 ── */
html.ui-refac #dashboard-content{ font-size:13px; }
html.ui-refac #dashboard-content .dashboard-hero{ padding:18px; }
html.ui-refac #dashboard-content .dashboard-hero-copy{ margin-top:12px; }
html.ui-refac #dashboard-content .dashboard-hero-copy h2{ font-size:22px; line-height:1.28; }
html.ui-refac #dashboard-content .dashboard-hero-copy p{ font-size:12px; margin-top:6px; }
html.ui-refac #dashboard-content .dashboard-metrics{ margin-top:16px; gap:9px; }
html.ui-refac #dashboard-content .dashboard-metric{ min-height:0; padding:11px 13px; }
html.ui-refac #dashboard-content .dashboard-metric span{ font-size:11px; }
html.ui-refac #dashboard-content .dashboard-metric strong{ font-size:20px; margin-top:6px; }
html.ui-refac #dashboard-content .dashboard-metric em{ font-size:11px; margin-top:5px; }
html.ui-refac #dashboard-content .dashboard-card-head{ padding:13px 16px 11px; }
html.ui-refac #dashboard-content .dashboard-card-head h3,
html.ui-refac #dashboard-content .dashboard-embedded-head h4{ font-size:14.5px; }
html.ui-refac #dashboard-content .dashboard-card-head p{ font-size:11px; }
html.ui-refac #dashboard-content .dashboard-small-btn,
html.ui-refac #dashboard-content .dashboard-primary-btn,
html.ui-refac #dashboard-content .dashboard-mini-refresh{ min-height:30px; font-size:11.5px; padding:0 11px; }
html.ui-refac #dashboard-content .dashboard-quick-tab{ min-height:34px; font-size:11.5px; }

/* ── 인트라넷 전체 배율 90% (레이아웃 리플로우, 토글 OFF 시 100% 복귀) ── */
html.ui-refac body{ zoom:0.99; }

/* ── 공지/일정 리스트 → 프로토타입 list-item 규격(구분선 리스트 + 아이콘칩) ── */
/* 행마다 채워진 카드(#f8fafc) → 배경 없는 리스트 + 하단 구분선. 텍스트/기능 불변. */
html.ui-refac #dashboard-content .toss-detail-row{
  background:transparent!important; border:0!important;
  border-bottom:1px solid #eef1f6!important; border-radius:0!important;
  grid-template-columns:34px minmax(0,1fr) auto!important; gap:11px!important;
  padding:9px 4px!important;
}
html.ui-refac #dashboard-content .toss-detail-row:hover{
  background:#f6f9ff!important; border-bottom-color:#e4ecfb!important;
}
html.ui-refac #dashboard-content .toss-detail-row.emphasis{
  background:transparent!important; border-bottom-color:#eef1f6!important;
}
html.ui-refac #dashboard-content .toss-detail-row:last-child{ border-bottom:0!important; }
html.ui-refac #dashboard-content .dashboard-news-list .nf-row{ margin-bottom:0!important; }
html.ui-refac #dashboard-content .toss-detail-icon{
  width:34px!important; height:34px!important; border-radius:9px!important; font-size:14px!important;
}
html.ui-refac #dashboard-content .toss-detail-title{ font-size:13px!important; font-weight:700!important; }
html.ui-refac #dashboard-content .toss-detail-desc{ font-weight:600!important; }

/* ══════════════════════════════════════════════════════════
   시안 B: 홈 위젯 최적화(공지·일정·바로처리·미션&할일)
   원칙: 표시 텍스트/기능/의미색 불변, ui-refac 스코프(끄면 원본).
   ────────────────────────────────────────────────────────── */
/* ① 공지사항: 미리보기 문장 숨김 → 제목·배지·날짜만 */
html.ui-refac #dashboard-content #notice-list .toss-detail-desc{ display:none!important; }
/* ② 일정 소식: 제목과 겹치는 메타(카테고리·이름) 숨김 */
html.ui-refac #dashboard-content #newsfeed-list .toss-detail-desc{ display:none!important; }
/* ④ 미션&할일: 중복 "미션 현황 · 진행중 N →" 버튼 숨김(진행 정보는 아래 위젯에 존재) */
html.ui-refac #dashboard-content #dashboard-mission-summary{ display:none!important; }
/* 공지·일정 블록 높이 20% 축소(402→322) */
html.ui-refac #dashboard-content .dashboard-compact20{ height:322px!important; }
/* 미션 행: 기한(달력) 선택 아이콘 블루 강조 → 날짜 선택 어포던스 명확화 */
html.ui-refac #dashboard-content .ptodo-item .ptodo-icon i.fa-calendar-day{ color:var(--uc-blue)!important; }
/* ③ 바로 처리: 상단 탭 대비 커보이던 하위 탭(클래스 없는 인라인 버튼) 크기 통일.
      !important CSS 가 인라인 style 을 상회한다. arc-ib/refresh/행버튼(클래스 있음)은 제외. */
html.ui-refac #dashboard-content #admin-pending-content button:not([class]){ padding:6px 11px!important; font-size:12px!important; }
html.ui-refac #dashboard-content #admin-pending-content button:not([class]) span{ min-width:16px!important; height:16px!important; font-size:9.5px!important; }
html.ui-refac #dashboard-content #admin-pending-rows{ padding:6px 12px!important; }

/* ── 공지/일정 배지 가독성 정리(굵기 위계 + 중복 제거 + 밀집 완화) ── */
/* 배지 굵기 900 → 700(색으로 강조), 회색 보조 배지는 600으로 더 낮춤 */
html.ui-refac #dashboard-content #notice-list .toss-mini-chip,
html.ui-refac #dashboard-content #newsfeed-list .toss-mini-chip{ font-weight:700!important; }
html.ui-refac #dashboard-content #notice-list .toss-mini-chip.gray,
html.ui-refac #dashboard-content #newsfeed-list .toss-mini-chip.gray{ font-weight:600!important; }
/* 일정: 중복 today 표시 제거 — 우측 "오늘" + 메타 "당일" 숨김(제목 D-day 배지 하나로 강조 통일) */
html.ui-refac #dashboard-content #newsfeed-list .toss-detail-side .toss-mini-chip{ display:none!important; }
html.ui-refac #dashboard-content #newsfeed-list .toss-detail-meta .toss-mini-chip.red{ display:none!important; }
/* 배지 밀집 완화: 메타 칩 간격·상단 여백 소폭 확대 */
html.ui-refac #dashboard-content #newsfeed-list .toss-detail-meta{ gap:5px!important; margin-top:6px!important; }

/* ── 전 페이지 콘텐츠 폭 상한 1600 (넓은 화면에서 중앙 정렬) ── */
html.ui-refac #content-wrapper{ box-sizing:border-box; width:100%; max-width:1600px; margin-left:auto; margin-right:auto; }
/* ── 회의록 작성 문서: A4 세로 폭(210mm) 유지, 중앙 정렬 ── */
html.ui-refac #mm-doc{ max-width:210mm; margin-left:auto; margin-right:auto; }

@media (prefers-reduced-motion:reduce){html.ui-refac #dashboard-content *{animation:none!important;transition-duration:.01ms!important}}

/* ══════════════════════════════════════════════════════════════
   입금매칭 팝업(#bank-match-modal): 녹색(emerald/green) 테마 → 블루톤
   정확 클래스 셀렉터 + !important 로 Tailwind 유틸 오버라이드.
   ══════════════════════════════════════════════════════════════ */
#bank-match-modal .text-emerald-600{color:#2563eb!important}
#bank-match-modal .text-emerald-700{color:#1d4ed8!important}
#bank-match-modal .text-green-600{color:#2563eb!important}
#bank-match-modal .text-green-700{color:#1d4ed8!important}
#bank-match-modal .bg-emerald-50{background-color:#eff4ff!important}
#bank-match-modal .bg-emerald-100{background-color:#e6efff!important}
#bank-match-modal .bg-emerald-600{background-color:#2563eb!important}
#bank-match-modal .bg-green-100{background-color:#e6efff!important}
#bank-match-modal .border-emerald-200{border-color:#d3e1fd!important}
#bank-match-modal .border-emerald-300{border-color:#bcd3fb!important}
#bank-match-modal .border-emerald-400{border-color:#93b4f7!important}
#bank-match-modal .border-emerald-500{border-color:#2563eb!important}
#bank-match-modal .ring-emerald-200{--tw-ring-color:rgba(37,99,235,.25)!important}
#bank-match-modal .ring-emerald-300{--tw-ring-color:rgba(37,99,235,.4)!important}
#bank-match-modal .hover\:bg-emerald-700:hover{background-color:#1d4ed8!important}
#bank-match-modal .hover\:bg-emerald-100:hover{background-color:#e6efff!important}
#bank-match-modal .hover\:bg-emerald-50:hover{background-color:#eff4ff!important}
#bank-match-modal .hover\:border-emerald-200:hover{border-color:#d3e1fd!important}
#bank-match-modal .hover\:border-emerald-300:hover{border-color:#bcd3fb!important}
#bank-match-modal .focus\:ring-emerald-500:focus{--tw-ring-color:rgba(37,99,235,.5)!important}
#bank-match-modal .bg-gradient-to-r{background-image:none!important;background-color:#eff4ff!important}
#bank-match-modal input[type="checkbox"]{accent-color:#2563eb!important}

/* ══════════════════════════════════════════════════════════════════
   전자세금계산서 발행 폼 — 견적서 문서 톤 통일 (시안 A)
   견적서(quote.js)의 디자인 언어를 그대로 사용:
   얇은 격자(#9ca3af/#d1d5db) · 회색 라벨셀(#f9fafb) · 10~12px 소형 타입
   · 컬러 룰바 · 우측 합계표 · 직인
   ══════════════════════════════════════════════════════════════════ */
#ti-panel-issue .tid-paper{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:22px 24px 18px; box-shadow:0 1px 3px rgba(16,24,40,.06);
}
/* 문서 헤더 + 룰바 */
#ti-panel-issue .tid-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:5px;
}
#ti-panel-issue .tid-title{
  font-size:19px; font-weight:800; color:#1a56db; letter-spacing:-.5px; line-height:1.2;
}
#ti-panel-issue .tid-brand{ text-align:right; line-height:1.15; }
#ti-panel-issue .tid-brand .b1{
  font-size:11px; font-weight:800; color:#374151; letter-spacing:.06em;
}
#ti-panel-issue .tid-brand .b2{ font-size:9px; color:#9ca3af; letter-spacing:.08em; }
#ti-panel-issue .tid-rule{ height:2px; background:#1a56db; margin-bottom:14px; }

/* 2열 (공급받는자 / 공급자) */
#ti-panel-issue .tid-grid2{ display:flex; gap:12px; margin-bottom:14px; align-items:stretch; flex-wrap:wrap; }
#ti-panel-issue .tid-col{ flex:1 1 340px; min-width:0; }
#ti-panel-issue .tid-col-sup{ flex:0 1 276px; }
#ti-panel-issue .tid-box{ border:1px solid #9ca3af; }
#ti-panel-issue table.tid-tbl{ width:100%; border-collapse:collapse; font-size:11px; }
/* 좌·우 박스 높이 맞춤은 2열 그리드 안에서만 (밖에서는 height:100%가 박스를 과다 확장시킴) */
#ti-panel-issue .tid-grid2 .tid-box{ height:100%; }
#ti-panel-issue .tid-grid2 table.tid-tbl{ height:100%; }
#ti-panel-issue table.tid-tbl tr.tid-line{ border-bottom:1px solid #d1d5db; }
#ti-panel-issue table.tid-tbl td.tid-lbl{
  background:#f9fafb; border-right:1px solid #d1d5db; font-weight:700; color:#4b5563;
  padding:6px 8px; white-space:nowrap; width:72px; font-size:10.5px;
}
#ti-panel-issue table.tid-tbl td.tid-val{ padding:4px 6px; }
#ti-panel-issue .tid-vlabel{
  width:20px; background:#f3f4f6; border-right:1px solid #d1d5db; text-align:center;
  font-weight:800; color:#4b5563; font-size:10.5px; writing-mode:vertical-rl; letter-spacing:3px;
}
#ti-panel-issue .tid-fixed{ font-size:10.5px; color:#374151; padding:3px 0; display:block; line-height:1.4; }

/* 고객 미선택 자리표시자 — 카드가 .hidden 일 때만 노출 (JS 변경 없이 CSS 형제 선택자로 처리) */
#ti-panel-issue .tid-recipient-none{ display:none; }
#ti-panel-issue #ti-recipient-card.hidden + .tid-recipient-none{
  display:flex; align-items:center; justify-content:center; gap:7px; height:100%;
  min-height:118px; border:1px dashed #d1d5db; border-radius:6px; background:#fafbfc;
  color:#9ca3af; font-size:11.5px; text-align:center; padding:10px 14px;
}

/* 입력 — 견적서 .qf-input-c 와 1:1 동일 */
#ti-panel-issue .tid-inp{
  background:#fff; border:1px solid #d1d5db; border-radius:4px; padding:4px 8px; font-size:12px;
  outline:none; width:100%; box-sizing:border-box; color:#1f2937;
  transition:border-color .2s, box-shadow .2s;
}
#ti-panel-issue .tid-inp:focus{ border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
#ti-panel-issue .tid-inp::placeholder{ color:#9ca3af; font-weight:400; }
#ti-panel-issue .tid-inp.sm{ font-size:11px; padding:3px 6px; }
#ti-panel-issue .tid-inp.r{ text-align:right; font-variant-numeric:tabular-nums; }
#ti-panel-issue .tid-inp.c{ text-align:center; font-variant-numeric:tabular-nums; }
#ti-panel-issue .tid-inp[readonly]{ background:#f9fafb; color:#6b7280; cursor:not-allowed; }

/* 품목표 — 컬럼폭: 품명 29%(기존 대비 -30%) · 비고 22%(줄인 만큼 확대) */
#ti-panel-issue .tid-items-box{ border:1px solid #9ca3af; margin-bottom:10px; overflow-x:auto; }
#ti-panel-issue table.tid-items{
  width:100%; border-collapse:collapse; font-size:11px; table-layout:fixed; min-width:760px;
}
#ti-panel-issue table.tid-items th{
  background:#dbeafe; padding:7px 6px; font-weight:800; color:#374151;
  border-right:1px solid #d1d5db; text-align:center; font-size:10.5px;
}
#ti-panel-issue table.tid-items th:last-child{ border-right:none; }
#ti-panel-issue table.tid-items td{ border-right:1px solid #e5e7eb; padding:2px 4px; }
#ti-panel-issue table.tid-items td:last-child{ border-right:none; }
#ti-panel-issue table.tid-items tbody tr{ border-bottom:1px solid #e5e7eb; height:33px; }
#ti-panel-issue table.tid-items tbody tr:last-child{ border-bottom:none; }
/* 수량칸: number 스피너가 폭을 먹어 두 자리수가 잘리므로 제거 */
#ti-panel-issue table.tid-items input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
#ti-panel-issue table.tid-items input[type="number"]::-webkit-outer-spin-button,
#ti-panel-issue table.tid-items input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
/* 좁은 공급일자 칸에서 날짜 입력이 잘리지 않도록 여백·글자 축소 */
#ti-panel-issue table.tid-items input[type="date"]{
  padding-left:2px; padding-right:2px; font-size:10px; letter-spacing:-.3px;
}
#ti-panel-issue table.tid-items input[type="date"]::-webkit-calendar-picker-indicator{
  margin-left:0; padding:0; opacity:.45;
}
#ti-panel-issue .tid-del{
  background:none; border:none; color:#d1d5db; cursor:pointer; font-size:13px; line-height:1;
  padding:2px 4px; transition:color .15s;
}
#ti-panel-issue .tid-del:hover{ color:#f87171; }
#ti-panel-issue .tid-empty{
  text-align:center; padding:22px 8px; color:#9ca3af; font-size:11.5px;
}

/* 우측 합계표 — 견적서와 동일 */
#ti-panel-issue .tid-totals-wrap{ display:flex; justify-content:flex-end; margin-bottom:14px; }
#ti-panel-issue table.tid-totals{
  border:1px solid #9ca3af; border-collapse:collapse; font-size:12px; min-width:290px;
}
#ti-panel-issue table.tid-totals tr{ border-bottom:1px solid #d1d5db; }
#ti-panel-issue table.tid-totals tr:last-child{ border-bottom:none; }
#ti-panel-issue table.tid-totals td{ padding:7px 12px; }
#ti-panel-issue table.tid-totals .tl{
  background:#f9fafb; border-right:1px solid #d1d5db; font-weight:700; color:#4b5563;
  text-align:center; width:126px; font-size:11px;
}
#ti-panel-issue table.tid-totals .tv{
  text-align:right; font-weight:700; color:#1f2937; font-variant-numeric:tabular-nums;
}
#ti-panel-issue table.tid-totals tr:last-child .tl{ font-weight:800; color:#1f2937; }
#ti-panel-issue table.tid-totals tr:last-child .tv{ font-size:15px; font-weight:800; color:#1a56db; }

/* 직인 / 서명 */
#ti-panel-issue .tid-stamp-line{
  display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 0 4px;
}
#ti-panel-issue .tid-stamp-line .co{ font-size:16px; font-weight:800; color:#1f2937; }
#ti-panel-issue .tid-stamp{
  width:46px; height:46px; border-radius:50%; border:2px solid #f87171; opacity:.75;
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1;
}
#ti-panel-issue .tid-stamp .s1{ font-size:7px; font-weight:800; color:#ef4444; display:block; }
#ti-panel-issue .tid-stamp .s2{ font-size:5.5px; color:#f87171; display:block; }

/* 하단 필드 / 액션 */
#ti-panel-issue .tid-sub{ display:flex; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
#ti-panel-issue .tid-field{ flex:1 1 300px; min-width:0; }
#ti-panel-issue .tid-field > label{
  display:block; font-size:10.5px; font-weight:700; color:#6b7280; margin-bottom:4px;
}
#ti-panel-issue .tid-actions{
  display:flex; justify-content:flex-end; gap:10px; padding-top:14px; margin-top:8px;
  border-top:1px solid #e5e7eb;
}
@media (max-width:640px){
  #ti-panel-issue .tid-paper{ padding:16px 13px; }
  #ti-panel-issue .tid-title{ font-size:16px; }
  #ti-panel-issue .tid-col-sup{ flex:1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════
   계약 등록 폼 — 필수항목 미입력 시각 피드백
   "모든 필수 항목을 입력해주세요" 한 줄로는 어디가 비었는지 알 수 없어,
   빠진 칸의 "테두리만" 붉게 표시하고 1회 흔들어 위치를 짚어준다.
   (내부 배경은 그대로 — 입력값 가독성 유지)
   ══════════════════════════════════════════════════════════════ */
@keyframes sfShake{
  0%{transform:translateX(0)}   14%{transform:translateX(-7px)}
  28%{transform:translateX(6px)} 42%{transform:translateX(-4px)}
  56%{transform:translateX(3px)} 70%{transform:translateX(-2px)}
  85%{transform:translateX(1px)} 100%{transform:translateX(0)}
}
/* class가 아닌 data 속성 — 일부 입력의 자체 핸들러가 className을 덮어써도 표시가 유지된다 */
[data-sf-invalid]{ border-color:#ec4899!important; border-width:2px!important; border-style:solid!important; }
.sf-shake{ animation:sfShake .45s cubic-bezier(.36,.07,.19,.97) both; }
@media (prefers-reduced-motion:reduce){ .sf-shake{animation:none} }   /* 흔들림만 생략 · 테두리는 유지 */

/* 미입력 목록 토스트 (우측 하단 · 모달 위) */
.sf-toast{position:fixed;right:20px;bottom:20px;z-index:1200;width:296px;background:#fff;
  border:1px solid #f9c8e0;border-radius:13px;box-shadow:0 10px 34px rgba(16,24,40,.20);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity .17s cubic-bezier(.22,1,.36,1),transform .17s cubic-bezier(.22,1,.36,1)}
.sf-toast.show{opacity:1;transform:none}
.sf-toast .sf-toast-hd{display:flex;align-items:center;gap:8px;padding:11px 12px 9px}
.sf-toast .sf-toast-hd .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none;
  font-size:11px;background:#fdf2f8;color:#be185d}
.sf-toast .sf-toast-hd .t{font-size:12.5px;font-weight:800;color:#101828;line-height:1.35}
.sf-toast .sf-toast-hd .x{margin-left:auto;width:22px;height:22px;border:none;background:transparent;color:#98a2b3;
  cursor:pointer;font-size:16px;line-height:1;border-radius:6px}
.sf-toast .sf-toast-hd .x:hover{background:#f1f4f9;color:#475467}
.sf-toast .sf-toast-list{padding:0 12px 4px;display:flex;flex-direction:column;gap:3px}
.sf-toast .sf-toast-item{display:flex;align-items:center;gap:7px;width:100%;padding:5px 7px;border-radius:8px;
  cursor:pointer;font-size:11.5px;font-weight:700;color:#101828;background:#fbfcfe;border:1px solid #eef1f6;
  text-align:left;transition:border-color .12s,background .12s}
.sf-toast .sf-toast-item:hover{border-color:#f9c8e0;background:#fdf2f8}
.sf-toast .sf-toast-item .n{width:16px;height:16px;border-radius:50%;background:#ec4899;color:#fff;font-size:9px;
  font-weight:800;display:grid;place-items:center;flex:none}
.sf-toast .sf-toast-item .go{margin-left:auto;font-size:10px;color:#98a2b3;font-weight:700}
.sf-toast .sf-toast-ft{padding:7px 12px 11px;font-size:10.5px;color:#98a2b3;font-weight:600}
/* ── 계약관리 연동 팝업(#ct-ti-mount)으로 패널이 포털 이동됐을 때 ──
   스코프를 #ti-panel-issue 로 잡았으므로 스타일은 그대로 따라가고,
   여기서는 모달 컨텍스트에 맞춰 겹치는 장식만 정리한다. */
#ct-ti-mount .tid-paper{ border:none; box-shadow:none; padding:0; border-radius:0; }
/* 모달 자체 푸터(취소·초기화·세금계산서 즉시발행)가 있으므로 패널 액션바는 숨김 */
#ct-ti-mount .tid-actions{ display:none; }
/* 발행 미리보기는 계약관리 연동 팝업(#ct-tax-invoice-modal, inline z-index:9000) 보다
   위에 떠야 한다. .modal 기본값 1000 이면 팝업 뒤로 깔려 확인이 불가능했다. */
#ti-confirm-modal{ z-index:9500 !important; }
/* .modal input{border-radius:8px!important} (상단 토스 공통 규칙)이 팝업 안에서
   견적서 입력 톤(4px·#d1d5db)을 덮으므로 문서 폼 입력만 되돌린다 */
#ct-ti-mount .tid-inp{ border-radius:4px !important; border-color:#d1d5db !important; }
#ct-ti-mount .tid-inp:focus{ border-color:#3b82f6 !important; }

/* 리뷰오더 — 모집공고/작업오더와 같은 조밀한 1열 레이블·2열 입력 규칙 */
#review-orders-root .review-order-runtime-shell{max-width:1180px}
#review-orders-root .review-order-runtime-panel{border-color:#d7e0ea!important;box-shadow:0 12px 34px rgba(28,43,68,.08)}
#review-orders-root .review-order-runtime-toolbar{padding-bottom:11px;border-bottom:1px solid #e4eaf2}
#review-orders-root .review-order-runtime-section{overflow:hidden;border-color:#dbe3ed!important;background:#fff!important}
#review-orders-root .review-order-runtime-section-head{padding-bottom:9px;border-bottom:1px solid #e7edf5}
#review-orders-root .review-order-runtime-row,
#review-orders-root .review-order-runtime-choice{display:grid;grid-template-columns:142px minmax(0,1fr);align-items:center;gap:0;min-height:41px;margin:0!important;border-top:1px solid #e5ebf2}
#review-orders-root .review-order-runtime-section>.review-order-runtime-row:first-child,
#review-orders-root .review-order-runtime-section>.review-order-runtime-choice:first-child{border-top:0}
#review-orders-root .review-order-runtime-label{display:flex;align-items:center;align-self:stretch;margin:0!important;padding:7px 10px!important;background:#f8fafc;color:#526077!important;font-size:11px!important;font-weight:800!important}
#review-orders-root .review-order-runtime-row>input,
#review-orders-root .review-order-runtime-row>div,
#review-orders-root .review-order-runtime-choice-options{min-width:0;margin:0;padding:5px 8px}
#review-orders-root .review-order-runtime-row input{height:29px!important;border-color:#d6e0ed!important;font-size:12px!important}
#review-orders-root .review-order-runtime-choice-options{display:flex;align-items:center;gap:5px;min-height:40px}
#review-orders-root .review-order-runtime-choice-options label span{min-height:27px!important;padding:5px 9px!important;border-color:#d6e0ed!important;border-radius:6px!important;transition:background .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-runtime-contract{padding:0!important}
#review-orders-root .review-order-runtime-contract>div:first-child{padding:8px 10px;background:#f8fafc;border-bottom:1px solid #e5ebf2}
#review-orders-root .review-order-runtime-contract>div:not(:first-child){margin:8px 10px}
#review-orders-root .review-order-runtime-product{padding:0!important}
#review-orders-root .review-order-runtime-product>.review-order-runtime-section-head{padding:10px}
#review-orders-root .review-order-runtime-product-mode{margin:8px 10px!important;background:#f8fafc!important}
#review-orders-root .review-order-runtime-product-row{border-color:#dbe3ed!important;background:#fbfcfe!important}
#review-orders-root .review-order-runtime-option{border-color:#dfe7f1!important}
#review-orders-root .review-order-runtime-field>input{height:29px!important;border-color:#d6e0ed!important;font-size:12px!important}
#review-orders-root .review-order-runtime-field>span{color:#526077!important}
#review-orders-root .review-order-runtime-schedule>label{padding:5px 8px}
#review-orders-root .review-order-runtime-submit{padding:12px 2px 0}
#review-orders-root .review-order-runtime-submit button{min-height:31px;transition:transform .16s cubic-bezier(.22,1,.36,1),background .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-runtime-submit button:hover{transform:translateY(-1px)}
@media (max-width:760px){
  #review-orders-root .review-order-runtime-row,
  #review-orders-root .review-order-runtime-choice{grid-template-columns:1fr}
  #review-orders-root .review-order-runtime-label{min-height:30px;border-bottom:1px solid #e5ebf2}
  #review-orders-root .review-order-runtime-choice-options{min-height:auto}
}

/* Approved review-order wireframe: runtime selectors only. */
#review_orders-content.toss-review-page{background:#f1f4f8}
#review-orders-root{color:#172237;font-family:"Pretendard Variable","Noto Sans KR",system-ui,sans-serif;letter-spacing:-.02em}
#review-orders-root .review-order-parity-page{max-width:1360px;margin:0 auto;padding:24px}
#review-orders-root .review-order-parity-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
#review-orders-root .review-order-parity-heading h1{margin:0;color:#172237;font-size:24px;font-weight:800;letter-spacing:-.055em}
#review-orders-root .review-order-parity-heading p{margin:4px 0 0;color:#64718a;font-size:12px}
#review-orders-root .review-order-parity-heading-actions{display:flex;align-items:center;gap:6px}
#review-orders-root .review-order-parity-button{min-height:33px;padding:7px 10px;border:1px solid #d6dfeb;border-radius:7px;background:#fff;color:#42516a;font-size:11px;font-weight:850;transition:border-color .16s cubic-bezier(.22,1,.36,1),background .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-parity-button:hover{border-color:#aac4f2}
#review-orders-root .review-order-parity-button.is-primary{border-color:#2469d8;background:#2469d8;color:#fff}
#review-orders-root .review-order-parity-button.is-primary:hover{background:#1757bd}
#review-orders-root .review-order-parity-shell{grid-template-columns:218px minmax(0,1fr) 270px;display:grid;min-height:780px;overflow:hidden;border:1px solid #d7e0ea;border-radius:16px;background:#fff;box-shadow:0 17px 48px rgb(0 0 0 / .1)}
#review-orders-root .review-order-parity-rail{display:flex;flex-direction:column;padding:20px 16px;border-right:1px solid #dee6ef;background:#fbfcfe}
#review-orders-root .review-order-parity-rail h2,#review-orders-root .review-order-parity-check h2{margin:0;color:#172237;font-size:14px;font-weight:850;letter-spacing:-.04em}
#review-orders-root .review-order-parity-rail>p,#review-orders-root .review-order-parity-check>p{margin:3px 0 14px;color:#64718a;font-size:10px;line-height:1.5}
#review-orders-root .review-order-parity-steps{display:grid;gap:3px}
#review-orders-root .review-order-parity-step{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:30px;padding:5px 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#58677e;font-size:11px;font-weight:850;text-align:left;transition:background .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-parity-step:hover{background:#f4f8ff;color:#2469d8}
#review-orders-root .review-order-parity-step.is-active{border-color:#c8dbfb;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-parity-step i{display:grid;place-items:center;width:18px;height:18px;border:1px solid currentColor;border-radius:999px;font-style:normal;font-size:9px}
#review-orders-root .review-order-parity-step b{color:#8c9ab0;font-size:9px;font-weight:850}
#review-orders-root .review-order-parity-step.is-active b{color:#2469d8}
#review-orders-root .review-order-parity-rail-note{margin-top:16px;padding-top:13px;border-top:1px solid #dee6ef;color:#64718a;font-size:10px;line-height:1.6}
#review-orders-root .review-order-parity-source-key{margin-top:12px;padding:9px;border:1px solid #d1e1fb;border-radius:8px;background:#f5f9ff;color:#5b6f8c;font-size:9px;line-height:1.5}
#review-orders-root .review-order-parity-source-key b{display:block;margin-bottom:2px;color:#2469d8;font-size:10px}
#review-orders-root .review-order-parity-form-pane{min-width:0;max-height:calc(100vh - 170px);padding:22px 24px 30px;overflow-y:auto;background:#fff;scroll-behavior:smooth;scrollbar-color:#bcc9d9 transparent;scrollbar-width:thin}
#review-orders-root .review-order-parity-form-pane::-webkit-scrollbar{width:9px}
#review-orders-root .review-order-parity-form-pane::-webkit-scrollbar-thumb{border:3px solid #fff;border-radius:999px;background:#bcc9d9}
#review-orders-root .review-order-parity-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}
#review-orders-root .review-order-parity-form-head h2{margin:0;color:#172237;font-size:18px;font-weight:850;letter-spacing:-.045em}
#review-orders-root .review-order-parity-form-head p{margin:3px 0 0;color:#64718a;font-size:11px}
#review-orders-root .review-order-parity-form-head span{display:flex;align-items:center;gap:6px;color:#64718a;font-size:10px;font-weight:750;white-space:nowrap}
#review-orders-root .review-order-parity-form-head span b{padding:4px 6px;border-radius:5px;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-parity-legacy-toolbar,#review-orders-root .review-order-parity-legacy-notice{display:none!important}
#review-orders-root .review-order-parity-form-pane .review-order-runtime-form{display:grid;gap:14px!important}
#review-orders-root .review-order-parity-basic-section,#review-orders-root .review-order-parity-section{scroll-margin-top:12px}
#review-orders-root .review-order-parity-check{padding:20px 16px;border-left:1px solid #dee6ef;background:#fbfcfe}
#review-orders-root .review-order-parity-check-card{padding:12px;border:1px solid #cbdcf8;border-radius:10px;background:#edf4ff}
#review-orders-root .review-order-parity-check-card>div{display:flex;align-items:center;justify-content:space-between;color:#2e476a;font-size:11px}
#review-orders-root .review-order-parity-check-card>div b{color:#2469d8;font-size:20px;letter-spacing:-.055em}
#review-orders-root .review-order-parity-check-card ul{display:grid;gap:6px;margin:10px 0 0;padding:0;list-style:none;color:#587197;font-size:10px}
#review-orders-root .review-order-parity-check-card li{display:flex;align-items:center;gap:6px}
#review-orders-root .review-order-parity-check-card i{display:grid;place-items:center;width:13px;height:13px;border-radius:999px;background:#e8f7f1;color:#13775d;font-size:9px;font-style:normal;font-weight:900}
#review-orders-root .review-order-parity-check-card i.is-warning{background:#fff4e7;color:#a86214}
#review-orders-root .review-order-parity-flow{margin-top:12px;padding:12px;border:1px solid #dee6ef;border-radius:10px;background:#fff}
#review-orders-root .review-order-parity-flow h3{margin:0;color:#172237;font-size:11px;font-weight:850}
#review-orders-root .review-order-parity-flow ol{display:grid;gap:10px;margin:11px 0 0;padding:0;list-style:none}
#review-orders-root .review-order-parity-flow li{display:grid;grid-template-columns:18px 1fr;gap:7px;color:#64718a;font-size:9px;line-height:1.45}
#review-orders-root .review-order-parity-flow li b{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#f1f4f8;color:#7d8aa1;font-size:9px}
#review-orders-root .review-order-parity-flow li.is-active b{background:#2469d8;color:#fff}
#review-orders-root .review-order-parity-flow strong{color:#42516a;font-size:10px}
#review-orders-root .review-order-parity-sent-view>.bg-white{max-width:1360px;margin:0;padding:20px 22px 28px;border:1px solid #d7e0ea!important;border-radius:16px!important;box-shadow:0 17px 48px rgb(0 0 0 / .1)!important}
#review-orders-root button:focus-visible,#review-orders-root input:focus-visible,#review-orders-root textarea:focus-visible{outline:3px solid rgb(36 105 216 / .2);outline-offset:2px}
#review-orders-root ::selection{background:#cfe0ff;color:#142a52}
@media(max-width:1080px){#review-orders-root .review-order-parity-shell{grid-template-columns:200px minmax(0,1fr)}#review-orders-root .review-order-parity-check{display:none}}
@media(max-width:720px){#review-orders-root .review-order-parity-page{padding:14px}#review-orders-root .review-order-parity-heading{align-items:flex-start;flex-direction:column}#review-orders-root .review-order-parity-shell{display:block;min-height:0;margin:0 -14px;border-radius:0}#review-orders-root .review-order-parity-rail{border-right:0;border-bottom:1px solid #dee6ef}#review-orders-root .review-order-parity-rail>p,#review-orders-root .review-order-parity-rail-note,#review-orders-root .review-order-parity-source-key{display:none}#review-orders-root .review-order-parity-steps{display:flex;overflow:auto}#review-orders-root .review-order-parity-step{width:max-content;grid-template-columns:20px auto;white-space:nowrap}#review-orders-root .review-order-parity-step b{display:none}#review-orders-root .review-order-parity-form-pane{max-height:none;padding:18px 14px;overflow:visible}}

/* Approved sent-order workspace. */
#review-orders-root .review-order-parity-sent-view>.bg-white>div:first-child{display:none!important}
#review-orders-root .review-order-parity-sent-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
#review-orders-root .review-order-parity-sent-toolbar>div{display:flex;flex-wrap:wrap;gap:5px}
#review-orders-root .review-order-parity-filter{min-height:29px;padding:5px 8px;border:1px solid #d8e1ec;border-radius:6px;background:#fff;color:#64718a;font-size:10px;font-weight:850;transition:border-color .16s cubic-bezier(.22,1,.36,1),background .16s cubic-bezier(.22,1,.36,1),color .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-parity-filter.is-active{border-color:#abc6f8;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-parity-sent-toolbar input{width:220px;height:30px;padding:0 9px;border:1px solid #d6dfeb;border-radius:6px;background:#fff;color:#172237;font-size:11px}
#review-orders-root .review-order-parity-sent-workspace{display:grid;grid-template-columns:minmax(0,1fr) 316px;overflow:hidden;border:1px solid #d7e0ea;border-radius:16px;background:#fff;box-shadow:0 17px 48px rgb(0 0 0 / .1)}
#review-orders-root .review-order-parity-sent-orders{min-width:0;padding:20px 22px 28px}
#review-orders-root .review-order-parity-sent-head,#review-orders-root .review-order-parity-sent-row{display:grid;grid-template-columns:86px minmax(195px,1.7fr) minmax(150px,.95fr) 80px 68px 92px 90px;gap:8px;align-items:center}
#review-orders-root .review-order-parity-sent-head{padding:8px 10px;border:1px solid #dee6ef;border-radius:9px 9px 0 0;background:#f7f9fc;color:#96a3b4;font-size:9px;font-weight:850}
#review-orders-root .review-order-parity-sent-row{width:100%;padding:12px 10px;border:1px solid #dee6ef;border-top:0;background:#fff;color:#172237;font-size:11px;text-align:left;transition:background .16s cubic-bezier(.22,1,.36,1),border-color .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-parity-sent-row:hover{background:#fbfdff}
#review-orders-root .review-order-parity-sent-row.is-selected{border-color:#bdcff0;background:#fcfdff}
#review-orders-root .review-order-parity-sent-title strong{display:block;overflow:hidden;font-size:12px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
#review-orders-root .review-order-parity-sent-row small{display:block;margin-top:2px;overflow:hidden;color:#64718a;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
#review-orders-root .review-order-parity-right{text-align:right}
#review-orders-root .review-order-parity-status{display:inline-flex;align-items:center;justify-content:center;min-width:68px;padding:4px 6px;border:1px solid #d8e0eb;border-radius:5px;background:#f7f9fc;color:#627188;font-size:9px;font-weight:850;white-space:nowrap}
#review-orders-root .review-order-parity-status.is-applied{border-color:#bde4d6;background:#e8f7f1;color:#13775d}
#review-orders-root .review-order-parity-status.is-pending{border-color:#c7dbfb;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-parity-status.is-conflict,#review-orders-root .review-order-parity-status.is-needs-review{border-color:#f4d8b4;background:#fff4e7;color:#a86214}
#review-orders-root .review-order-parity-version{color:#2469d8;font-size:10px;font-weight:900}
#review-orders-root .review-order-parity-sent-detail{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:12px;padding:15px;border:1px solid #bdcff0;border-top:0;background:#f8fbff}
#review-orders-root .review-order-parity-sent-detail h2{margin:0;color:#172237;font-size:13px;font-weight:850}
#review-orders-root .review-order-parity-sent-detail p{margin:3px 0 0;color:#64718a;font-size:10px}
#review-orders-root .review-order-parity-lineage{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px;margin-top:12px}
#review-orders-root .review-order-parity-node{display:grid;gap:4px;min-height:62px;padding:9px;border:1px solid #d4e0f3;border-radius:8px;background:#fff}
#review-orders-root .review-order-parity-node strong{font-size:10px;font-weight:850}
#review-orders-root .review-order-parity-node span{color:#64718a;font-size:9px}
#review-orders-root .review-order-parity-node.is-active{border-color:#a9c5f6;background:#edf4ff}
#review-orders-root .review-order-parity-lineage>i{color:#94a7c5;font-size:16px;font-style:normal}
#review-orders-root .review-order-parity-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
#review-orders-root .review-order-parity-facts>div{padding:8px;border:1px solid #dae3ef;border-radius:7px;background:#fff}
#review-orders-root .review-order-parity-facts span{display:block;color:#96a3b4;font-size:9px}
#review-orders-root .review-order-parity-facts b{display:block;margin-top:3px;color:#172237;font-size:10px}
#review-orders-root .review-order-parity-events{padding:11px;border:1px solid #d8e4f7;border-radius:9px;background:#fff}
#review-orders-root .review-order-parity-events h3{margin:0;color:#172237;font-size:11px;font-weight:850}
#review-orders-root .review-order-parity-events ul{display:grid;gap:7px;margin:10px 0 0;padding:0;list-style:none;color:#586982;font-size:10px}
#review-orders-root .review-order-parity-events li{display:grid;grid-template-columns:53px 1fr;gap:6px}
#review-orders-root .review-order-parity-events time{color:#96a3b4}
#review-orders-root .review-order-parity-events li.is-latest{color:#2469d8;font-weight:850}
#review-orders-root .review-order-parity-sent-side{padding:20px 16px;border-left:1px solid #dee6ef;background:#fbfcfe}
#review-orders-root .review-order-parity-sent-side h2{margin:0;color:#172237;font-size:14px;font-weight:850}
#review-orders-root .review-order-parity-sent-side>p{margin:3px 0 12px;color:#64718a;font-size:10px}
#review-orders-root .review-order-parity-sent-summary{padding:12px;border:1px solid #cbdcf8;border-radius:10px;background:#edf4ff}
#review-orders-root .review-order-parity-sent-summary strong{font-size:11px}
#review-orders-root .review-order-parity-sent-summary>b{display:block;margin-top:6px;color:#2469d8;font-size:20px;letter-spacing:-.055em}
#review-orders-root .review-order-parity-sent-summary p{margin:2px 0 0;color:#587197;font-size:10px}
#review-orders-root .review-order-parity-sent-stack{display:grid;gap:8px;margin-top:12px}
#review-orders-root .review-order-parity-sent-stack>div{padding:10px;border:1px solid #dee6ef;border-radius:9px;background:#fff}
#review-orders-root .review-order-parity-sent-stack b{display:block;color:#172237;font-size:10px}
#review-orders-root .review-order-parity-sent-stack span{display:block;margin-top:3px;color:#64718a;font-size:10px}
#review-orders-root .review-order-parity-sent-actions{display:grid;gap:6px;margin-top:12px}
#review-orders-root .review-order-parity-sent-actions button{min-height:33px;padding:7px 10px;border:1px solid #d6dfeb;border-radius:7px;background:#fff;color:#42516a;font-size:11px;font-weight:850;text-align:left}
#review-orders-root .review-order-parity-sent-actions button:hover{border-color:#aac4f2;background:#f7faff}
#review-orders-root .review-order-parity-sent-actions button.is-danger{border-color:#f1d6b6;background:#fff4e7;color:#a86214}
#review-orders-root .review-order-parity-sent-empty{padding:42px 16px;color:#96a3b4;font-size:12px;text-align:center}
@media(max-width:980px){#review-orders-root .review-order-parity-sent-workspace{grid-template-columns:1fr}#review-orders-root .review-order-parity-sent-side{border-top:1px solid #dee6ef;border-left:0}#review-orders-root .review-order-parity-sent-head,#review-orders-root .review-order-parity-sent-row{grid-template-columns:82px minmax(180px,1fr) 92px 75px}#review-orders-root .review-order-parity-sent-head>*:nth-child(3),#review-orders-root .review-order-parity-sent-row>*:nth-child(3),#review-orders-root .review-order-parity-sent-head>*:nth-child(5),#review-orders-root .review-order-parity-sent-row>*:nth-child(5),#review-orders-root .review-order-parity-sent-head>*:nth-child(7),#review-orders-root .review-order-parity-sent-row>*:nth-child(7){display:none}}

/* Approved review-order source template. These selectors mirror the wireframe's
   actual structure; no runtime element is moved after the first render. */
#review-orders-root .review-order-template-form{display:grid;gap:21px}
#review-orders-root .review-order-template-section{margin:0;scroll-margin-top:12px}
#review-orders-root .review-order-template-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px}
#review-orders-root .review-order-template-section-head h3{margin:0;color:#172237;font-size:14px;font-weight:850;letter-spacing:-.035em}
#review-orders-root .review-order-template-section-head>span{color:#64718a;font-size:10px;text-align:right}
#review-orders-root .review-order-template-required-note{color:#c85b55!important;font-weight:850}
#review-orders-root .review-order-template-rows,#review-orders-root .review-order-template-products{overflow:hidden;border:1px solid #dce3ec;border-radius:10px;background:#fff}
#review-orders-root .review-order-template-row{display:grid;grid-template-columns:154px minmax(0,1fr);min-height:43px;border-top:1px solid #dce3ec}
#review-orders-root .review-order-template-row:first-child{border-top:0}
#review-orders-root .review-order-template-label{display:flex;align-items:center;min-width:0;padding:8px 12px;background:#fbfcfe;color:#45536a;font-size:11px;font-weight:850}
#review-orders-root .review-order-template-label em{margin-left:3px;color:#d05c5c;font-style:normal}
#review-orders-root .review-order-template-control{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 8px}
#review-orders-root .review-order-template-input{width:100%;min-width:0;height:30px;padding:0 8px;border:1px solid #d4deea;border-radius:6px;background:#fff;color:#172237;font-size:11px}
#review-orders-root .review-order-template-input:focus,#review-orders-root .review-order-template-guide-content textarea:focus{border-color:#8fb3ef;outline:0;box-shadow:0 0 0 3px rgb(36 105 216 / .11)}
#review-orders-root .review-order-template-option-list.hidden,#review-orders-root .review-order-template-option-actions.hidden,#review-orders-root .review-order-template-product-value-grid.hidden,#review-orders-root .review-order-template-mixed-review.hidden,#review-orders-root #review-order-company-deposit-row.hidden{display:none!important}
#review-orders-root .review-order-template-segments{display:flex;flex-wrap:wrap;gap:4px}
#review-orders-root .review-order-template-segment>span,#review-orders-root .review-order-template-button{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:5px 8px;border:1px solid #d7e0eb;border-radius:5px;background:#fff;color:#66748b;font-size:10px;font-weight:850;white-space:nowrap;transition:border-color .18s cubic-bezier(.16,1,.3,1),background-color .18s cubic-bezier(.16,1,.3,1),color .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1)}
#review-orders-root .review-order-template-segment>input:checked+span,#review-orders-root .review-order-template-button.is-selected{border-color:#a9c6f9;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-template-segment>span:hover,#review-orders-root .review-order-template-button:hover{border-color:#a9c6f9;transform:translateY(-1px)}
#review-orders-root .review-order-template-contract-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;width:100%;align-items:center}
#review-orders-root .review-order-template-read-value{display:flex;align-items:center;min-height:30px;padding:0 8px;border:1px solid #d6e0ed;border-radius:6px;background:#f7f9fc;color:#52627a;font-size:11px}
#review-orders-root .review-order-template-picked-contract{display:grid;gap:3px;min-height:30px;padding:6px 8px;border:1px solid #aac4f2;border-radius:6px;background:#f7faff;color:#52627a;font-size:11px}
#review-orders-root .review-order-template-picked-contract button{color:#2469d8;font-size:10px;font-weight:850;text-decoration:underline}
#review-orders-root .review-order-template-contract-panel{grid-column:1/-1;border:1px solid #d6e0ed;border-radius:8px;background:#fff;padding:8px}
#review-orders-root .review-order-template-contract-tools{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
#review-orders-root .review-order-template-contract-list{max-height:280px;margin-top:8px;overflow:auto}
#review-orders-root .review-order-template-date-control{display:grid;grid-template-columns:54px 40px 40px;gap:6px;width:max-content}
#review-orders-root .review-order-template-year{display:grid;place-items:center;height:30px;border:1px solid #d4deea;border-radius:6px;background:#f7f9fc;color:#536179;font-size:11px;font-weight:850}
#review-orders-root .review-order-template-weekend-control{display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%}
#review-orders-root .review-order-template-hint{color:#7d8aa1;font-size:10px}
#review-orders-root .review-order-template-advertiser-value b{margin-right:5px;color:#2874dd;font-size:10px}
#review-orders-root .review-order-template-schedule-control{display:flex;flex-wrap:wrap;gap:8px 14px;width:100%;font-size:11px;color:#526077}
#review-orders-root .review-order-template-schedule-control label{display:flex;align-items:center;gap:5px;min-width:0}
#review-orders-root .review-order-template-schedule-control label:last-child{flex:1}
#review-orders-root .review-order-template-schedule-control span{color:#7d8aa1}
#review-orders-root .review-order-template-product-mode{display:grid;grid-template-columns:154px minmax(0,1fr);border-bottom:1px solid #dce3ec}
#review-orders-root .review-order-template-product-mode .review-order-template-control{flex-wrap:wrap}
#review-orders-root .review-order-template-mode-note{color:#526b92;font-size:10px;font-weight:700}
#review-orders-root .review-order-template-add-product{display:block;margin:8px 0 0 auto;min-height:29px;padding:5px 8px;border:1px solid #d7e0eb;border-radius:5px;background:#fff;color:#2469d8;font-size:10px;font-weight:850}
#review-orders-root .review-order-template-product-editor{padding:10px;border-top:1px solid #edf1f6;background:#fff}
#review-orders-root .review-order-template-product-editor:first-child{border-top:0}
#review-orders-root .review-order-template-product-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:#3e4d64;font-size:11px;font-weight:850}
#review-orders-root .review-order-template-product-main-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px}
#review-orders-root .review-order-template-product-main-fields label,#review-orders-root .review-order-template-product-value-grid label,#review-orders-root .review-order-template-option-line label{display:grid;gap:4px;min-width:0;color:#69778d;font-size:9px;font-weight:850}
#review-orders-root .review-order-template-product-main-fields span em,#review-orders-root .review-order-template-option-line span em{color:#d05c5c;font-style:normal}
#review-orders-root .review-order-template-product-value-grid{display:grid;grid-template-columns:88px 72px 72px minmax(0,1fr);gap:6px;align-items:end;margin-top:8px}
#review-orders-root .review-order-template-product-help{padding-bottom:7px;color:#64718a;font-size:10px;line-height:1.35}
#review-orders-root .review-order-template-option-list{display:grid;gap:5px;margin-top:8px}
#review-orders-root .review-order-template-option-line{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 88px 72px 72px 30px;gap:6px;align-items:end;padding:8px;border:1px solid #dbe7fb;border-radius:8px;background:#f8fbff}
#review-orders-root .review-order-template-delete{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border:1px solid #f0cbd1;border-radius:6px;background:#fff7f8;color:#c65566;font-size:10px;font-weight:850}
#review-orders-root .review-order-template-option-actions{margin-top:8px}
#review-orders-root .review-order-template-delivery-note{margin-top:8px;padding:9px 10px;border:1px solid #cfe0fa;border-radius:8px;background:#edf4ff;color:#41618f;font-size:10px}
#review-orders-root .review-order-template-delivery-note b{color:#2469d8}
#review-orders-root .review-order-template-purchase-time{position:relative;display:flex;align-items:center;gap:6px;width:100%}
#review-orders-root .review-order-template-purchase-time .is-on{border-color:#a9c6f9;background:#edf4ff;color:#2469d8}
#review-orders-root .review-order-template-toggle{gap:6px}
#review-orders-root .review-order-template-toggle-track{position:relative;width:24px;height:14px;border-radius:999px;background:#cbd5e1;transition:background .18s cubic-bezier(.16,1,.3,1)}
#review-orders-root .review-order-template-toggle-knob{position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(15 23 42 / .22);transition:transform .18s cubic-bezier(.16,1,.3,1)}
#review-orders-root .review-order-template-toggle.is-on .review-order-template-toggle-track{background:#4a87ea}
#review-orders-root .review-order-template-toggle.is-on .review-order-template-toggle-knob{transform:translateX(10px)}
#review-orders-root .review-order-template-time-range{display:grid;grid-template-columns:1fr 16px 1fr;min-width:172px;flex:1;overflow:hidden;border:1px solid #d4deea;border-radius:6px;background:#fff}
#review-orders-root .review-order-template-time-range button{height:28px;padding:0 8px;color:#334155;font-size:11px;text-align:left}
#review-orders-root .review-order-template-time-range span{display:grid;place-items:center;color:#94a3b8;font-size:11px}
#review-orders-root .review-order-template-time-picker{position:absolute;top:calc(100% + 5px);right:0;z-index:30;width:258px;padding:8px;border:1px solid #d4deea;border-radius:8px;background:#fff;box-shadow:0 14px 30px rgb(15 23 42 / .14)}
#review-orders-root .review-order-template-time-picker>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#45536a;font-size:11px}
#review-orders-root .review-order-template-time-picker>div:first-child button{width:22px;height:22px;border-radius:5px;color:#64748b}
#review-orders-root .review-order-template-guide-row{display:grid;grid-template-columns:154px minmax(0,1fr);min-height:72px;border-top:1px solid #dce3ec;background:#fff}
#review-orders-root .review-order-template-guide-row:first-child{border-top:0}
#review-orders-root .review-order-template-guide-content{display:grid;grid-template-columns:minmax(0,1fr) 106px;gap:7px;min-width:0;padding:6px 8px}
#review-orders-root .review-order-template-guide-content textarea{width:100%;height:60px;min-height:60px;padding:7px 8px;border:1px solid #d4deea;border-radius:6px;background:#fff;color:#172237;font-size:11px;line-height:1.42;resize:vertical}
#review-orders-root .review-order-template-mixed-review{padding:8px;border-top:1px solid #dce3ec;background:#f8fbff}
#review-orders-root .review-order-template-mixed-review-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#review-orders-root .review-order-template-mixed-review-inputs label{display:grid;gap:4px;min-width:0;color:#69778d;font-size:9px;font-weight:850}
#review-orders-root .review-order-template-mixed-status{margin:6px 0 0;color:#64718a;font-size:10px;font-weight:750}
#review-orders-root .review-order-template-mixed-review.is-invalid{border-color:#f1b7be;background:#fff8f8}
#review-orders-root .review-order-template-mixed-review.is-invalid .review-order-template-mixed-status{color:#c65566}
#review-orders-root .review-order-template-guide-content #review-order-image-dropzone{display:grid;place-items:center;min-height:60px;padding:8px;border:1px dashed #b5c9e8;border-radius:6px;background:#fbfdff;color:#5473a5}
#review-orders-root .review-order-template-guide-content #review-order-image-dropzone+div{display:none}
#review-orders-root .review-order-template-attach{display:grid;place-items:center;align-content:center;min-height:60px;padding:8px;border:1px dashed #b5c9e8;border-radius:6px;background:#fbfdff;color:#5473a5;font-size:10px;font-weight:850}
#review-orders-root .review-order-template-attach small{margin-top:4px;font-size:9px;font-weight:700}
#review-orders-root .review-order-template-deferred{display:none!important}
#review-orders-root .review-order-template-submit{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #dce3ec;color:#64718a;font-size:11px}
#review-orders-root .review-order-template-primary-button{min-height:33px;padding:7px 10px;border:1px solid #2469d8;border-radius:7px;background:#2469d8;color:#fff;font-size:11px;font-weight:850;transition:background .16s cubic-bezier(.22,1,.36,1),transform .16s cubic-bezier(.22,1,.36,1)}
#review-orders-root .review-order-template-primary-button:hover{background:#1757bd;transform:translateY(-1px)}
@media(max-width:720px){
  #review-orders-root .review-order-template-row,#review-orders-root .review-order-template-product-mode,#review-orders-root .review-order-template-guide-row{grid-template-columns:1fr}
  #review-orders-root .review-order-template-label{min-height:32px;border-bottom:1px solid #edf1f6}
  #review-orders-root .review-order-template-section-head{align-items:flex-start;flex-direction:column;gap:3px}
  #review-orders-root .review-order-template-section-head>span{text-align:left}
  #review-orders-root .review-order-template-guide-content{grid-template-columns:1fr}
  #review-orders-root .review-order-template-contract-tools{grid-template-columns:1fr}
  #review-orders-root .review-order-template-product-main-fields,#review-orders-root .review-order-template-product-value-grid,#review-orders-root .review-order-template-option-line{grid-template-columns:1fr 1fr}
  #review-orders-root .review-order-template-mixed-review-inputs{grid-template-columns:1fr 1fr}
  #review-orders-root .review-order-template-product-help{grid-column:1/-1;padding:0}
  #review-orders-root .review-order-template-option-line .review-order-template-delete{grid-column:2;justify-self:end}
}