/* ============================================================
   인애드 인트라넷 — 통합 스타일시트 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;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── 애니메이션 ── */
@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: rgba(255,255,255,.15) transparent;
}
#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* 사이드바 로고 */
.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, #6366f1) !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: #a78bfa !important; }
.sidebar-special-btn.accent-purple:hover { background: rgba(139,92,246,0.15) !important; color: #c4b5fd !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;
}
.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: 96px; max-width: 120px; }
.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(13), .users-admin-table td:nth-child(13) { 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) { min-width: 108px; max-width: 130px; }
.users-admin-table th:nth-child(11), .users-admin-table td:nth-child(11) { min-width: 168px; max-width: 210px; }
.users-admin-table th:nth-child(12), .users-admin-table td:nth-child(12) { min-width: 185px; max-width: 230px; }
.users-admin-table th:nth-child(14), .users-admin-table td:nth-child(14) { 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) {
  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: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:#f3e8ff; color:#7c3aed; }

/* ═══════════════════════════════════════════════════════
   모달 — 양쪽 호환
   ═══════════════════════════════════════════════════════ */
.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; }

/* 광고주 모달 */
.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;
}
#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:#6d4aff; background:#f1edff; }
#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: #f3e8ff;
  color: #7c3aed;
}
.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 {
  min-height: 402px;
}
.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 {
  min-height: 250px;
  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: #7c5cff; background: #f1edff; 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: #f1edff; color: #6d4aff; }
.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; }
.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: #4f46e5;
  border-bottom-color: #c7d2fe;
}
.pl-nav-tab:hover i {
  opacity: 0.7;
}
.pl-nav-tab--active {
  color: #4338ca !important;
  border-bottom-color: #4f46e5 !important;
}
.pl-nav-tab--active i {
  opacity: 1 !important;
  color: #4f46e5;
}

/* 인라인 패널 칩 */
.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;
}

#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: #d5dbe6 transparent !important;
}

#sidebar::-webkit-scrollbar-thumb {
  background: #d5dbe6 !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;
}

@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;
}

.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;
}

@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;
  }
}