/* bundled: css/fonts.css */
/**
 * Pretendard — 로컬 셀프호스팅 (CDN 런타임 로드 금지)
 * 파일: /fonts/pretendard/*.woff2
 */
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
}

/* bundled: css/tss-theme.css */
/**
 * TSS ?? ?? ?? ? html[data-tss-theme="dark"]
 * ???(doc-library.css)? ??? ???? ?
 */

/* 라이트 모드 토큰 — Step12 피그마 팔레트(이름 유지·값만 교체) */
:root {
    --tss-header-h: 56px;
    --tss-bg: #F1F5F9;
    --tss-surface: #FFFFFF;
    --tss-surface-muted: #F8FAFC;
    --tss-section-bg: var(--tss-surface-muted);
    --tss-text: #0F172A;
    --tss-muted: #64748B;
    --tss-border: #E2E8F0;

    /* 액센트/선택·호버 */
    --tss-accent-soft: #EFF6FF;
    --tss-accent-soft-hover: #E5EEFF;
    --tss-accent-selected: #DBEAFE;
    --tss-accent-border: #93C5FD;
    --tss-accent-border-soft: #BFDBFE;
    --tss-row-hover: #F8FAFC;
    /* 칩 — KPI 성공 #10B981 계열 */
    --tss-chip-success-bg: #ECFDF5;
    --tss-chip-success-text: #047857;
    --tss-chip-success-border: #A7F3D0;

    /* 알림 — KPI 시맨틱(성공 #10B981 / 경고 #F59E0B / 위험 #EF4444·#DC2626 / 정보 #2563EB) */
    --tss-alert-success-bg: #ECFDF5;
    --tss-alert-success-text: #047857;
    --tss-alert-success-border: #A7F3D0;
    --tss-alert-warning-bg: #FFFBEB;
    --tss-alert-warning-text: #B45309;
    --tss-alert-warning-border: #FDE68A;
    --tss-alert-danger-bg: #FEF2F2;
    --tss-alert-danger-text: #DC2626;
    --tss-alert-danger-border: #FECACA;
    --tss-alert-info-bg: #EFF6FF;
    --tss-alert-info-text: #1D4ED8;
    --tss-alert-info-border: #BFDBFE;
    --tss-alert-primary-bg: #EFF6FF;
    --tss-alert-primary-text: #1D4ED8;
    --tss-alert-primary-border: #BFDBFE;
    --tss-alert-secondary-bg: #F1F5F9;
    --tss-alert-secondary-text: #475569;
    --tss-alert-secondary-border: #E2E8F0;

    /* 브랜드 액센트 · radius · shadow(shadow는 변경 없음) */
    --tss-accent: #2563EB;
    --tss-accent-strong: #1D4ED8;
    --tss-accent-contrast: #FFFFFF;
    --tss-radius-sm: 8px;
    --tss-radius-md: 10px;
    --tss-radius-lg: 14px;
    --tss-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --tss-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
    /* Step1 — 홈 Bento 카드 전용 그림자(기존 sm/md는 다른 UI가 참조하므로 덮어쓰지 않음) */
    --tss-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* Step1 — 피그마 시맨틱 솔리드(KPI/배지 값 색) */
    --tss-success: #10B981;
    --tss-warning: #F59E0B;
    --tss-danger: #EF4444;

    /* Step13 + Step0-B — google-style.css :root 호환 변수(라이트, 값 변경 없음)
       google-style 미로드 화면에서도 네비·공용 Material 룩이 깨지지 않게 함. */
    --google-blue: #2f5dd6;
    --google-blue-dark: #234aad;
    --google-blue-light: #e8edfb;
    --google-red: #c9433a;
    --google-yellow: #b9791a;
    --google-green: #1f8f5f;
    --google-font: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --google-gray-50: #fafafa;
    --google-gray-100: #f5f5f5;
    --google-gray-200: #eeeeee;
    --google-gray-300: #e0e0e0;
    --google-gray-400: #bdbdbd;
    --google-gray-500: #9e9e9e;
    --google-gray-600: #757575;
    --google-gray-700: #616161;
    --google-gray-800: #424242;
    --google-gray-900: #212121;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.25s ease-in-out;
    --transition-slow: 0.35s ease-in-out;
}

/* Shared bell dialog follows the logistics notification visual system. */
#tssNotificationModal .modal-dialog { width: min(720px, calc(100vw - 2rem)); max-width: 720px; }
#tssNotificationModal .tss-notification-modal.modal-content {
  border: 1px solid var(--tss-border);
  border-radius: 16px;
  background: var(--tss-surface);
}
#tssNotificationModal .modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 26px 18px;
}
#tssNotificationModal .tss-notification-modal__eyebrow {
  display: block;
  color: var(--tss-accent);
  font-size: 11px;
  font-weight: 700;
}
#tssNotificationModal .modal-title { margin: 3px 0 4px; font-size: 22px; line-height: 1.3; }
#tssNotificationModal .tss-notification-modal__description {
  margin: 0;
  color: var(--tss-muted);
  font-size: 12px;
  line-height: 1.5;
}
#tssNotificationModal .modal-header .tss-notification-modal__close {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--tss-muted);
  background: var(--tss-surface-muted);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
#tssNotificationModal .tss-notification-modal__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--tss-border);
}
#tssNotificationModal .tss-notification-modal__tab {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 13px;
}
#tssNotificationModal .tss-notification-modal__tab.is-active {
  background: var(--tss-accent);
  color: var(--tss-accent-contrast);
}
#tssNotificationModalList { gap: 8px; padding: 18px 24px 24px; }
#tssNotificationModalList.portal-feed-list--divide .portal-feed-item,
#tssNotificationModalList.portal-feed-list--divide .portal-feed-item:last-child {
  flex: 0 0 auto;
  min-height: 70px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--tss-border);
  border-radius: 12px;
  background: var(--tss-surface);
}
#tssNotificationModalList.portal-feed-list--divide .portal-feed-item.unread {
  border-left: 3px solid var(--tss-accent);
}
#tssNotificationModalList .portal-feed-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin: 0;
  place-items: center;
  border-radius: 11px;
}
#tssNotificationModalList .tss-notification-modal__item-title.portal-feed-title {
  font-size: 13px;
  font-weight: 600;
}
#tssNotificationModal .tss-notification-modal__action--primary {
  color: #fff;
}
#tssNotificationModal .tss-notification-modal__footer {
  min-height: 66px;
  padding: 12px 24px;
  border-top: 1px solid var(--tss-border);
  background: var(--tss-surface);
}
@media (max-width: 575.98px) {
  #tssNotificationModal .modal-dialog { width: calc(100vw - 1rem); }
  #tssNotificationModal .modal-header { padding: 18px 16px 14px; }
  #tssNotificationModal .modal-title { font-size: 20px; }
  #tssNotificationModal .tss-notification-modal__tabs { padding: 10px 12px; }
  #tssNotificationModalList { padding: 12px; }
  #tssNotificationModal .tss-notification-modal__footer { padding: 12px; }
}

html[data-tss-theme="dark"] {
    /* Step0-B: 그레이/블루라이트는 다크 전용 재정의(기존). 그 외 브랜드·간격·라디우스·그림자·트랜지션은
       google-style에 다크 전용값이 없어 라이트와 동일 값을 여기에 명시(라이트 누락 버그 방지용 짝맞춤). */
    --google-blue: #2f5dd6;
    --google-blue-dark: #234aad;
    --google-blue-light: rgba(96, 165, 250, 0.14);
    --google-red: #c9433a;
    --google-yellow: #b9791a;
    --google-green: #1f8f5f;
    --google-font: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --google-gray-50: var(--tss-bg);
    --google-gray-100: var(--tss-surface);
    --google-gray-200: var(--tss-border);
    --google-gray-300: #475569;
    --google-gray-400: #64748b;
    --google-gray-500: #94a3b8;
    --google-gray-600: #cbd5e1;
    --google-gray-700: #e2e8f0;
    --google-gray-800: #f1f5f9;
    --google-gray-900: #f8fafc;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.25s ease-in-out;
    --transition-slow: 0.35s ease-in-out;

    /* Keep the legacy shell and renewed content on one neutral dark scale. */
    --tss-bg: #0c111b;
    --tss-surface: #141b28;
    --tss-surface-muted: #1b2534;
    /* Structural headings stay on the panel; inputs/hover keep muted contrast. */
    --tss-section-bg: var(--tss-surface);
    --tss-text: #e7ecf3;
    --tss-muted: #9ba9bc;
    --tss-border: #2b3647;

    /* 액센트 — 피그마 .dark primary/brand + brand-light */
    --tss-accent-soft: #1E3A5F;
    --tss-accent-soft-hover: #244A73;
    --tss-accent-selected: #2A5A8A;
    --tss-accent-border: #3B82F6;
    --tss-accent-border-soft: rgba(59, 130, 246, 0.45);
    --tss-row-hover: rgba(59, 130, 246, 0.10);
    /* 칩/알림 — KPI 시맨틱(어두운 배경 대비) */
    --tss-chip-success-bg: rgba(16, 185, 129, 0.14);
    --tss-chip-success-text: #34D399;
    --tss-chip-success-border: rgba(16, 185, 129, 0.35);

    /* TS ?? ?? ?? ??? (?????? ???) */
    --ts-bg: var(--tss-bg);
    --ts-surface: var(--tss-surface);
    --ts-surface-muted: var(--tss-surface-muted);
    --ts-border: rgba(148, 163, 184, 0.18);
    --ts-border-strong: rgba(148, 163, 184, 0.28);
    --ts-gray-50: #0f172a;
    --ts-gray-100: #1e293b;
    --ts-gray-200: #334155;
    --ts-gray-300: #475569;
    --ts-gray-400: #64748b;
    --ts-gray-500: #94a3b8;
    --ts-gray-600: #cbd5e1;
    --ts-gray-700: #e2e8f0;
    --ts-gray-800: #f1f5f9;
    --ts-gray-900: #f8fafc;
    --ts-light: #1e293b;
    --ts-dark: #e2e8f0;

    /* ??? UI ?? */
    --bd-bg: var(--tss-bg);
    --bd-surface: var(--tss-surface);
    --bd-text: var(--tss-text);
    --bd-muted: var(--tss-muted);
    --bd-border: var(--tss-border);
    --bd-primary-weak: rgba(96, 165, 250, 0.14);

    /* 알림(alert) 다크 — KPI 팔레트 */
    --tss-alert-success-bg: rgba(16, 185, 129, 0.14);
    --tss-alert-success-text: #34D399;
    --tss-alert-success-border: rgba(16, 185, 129, 0.35);
    --tss-alert-warning-bg: rgba(245, 158, 11, 0.14);
    --tss-alert-warning-text: #FBBF24;
    --tss-alert-warning-border: rgba(245, 158, 11, 0.35);
    --tss-alert-danger-bg: rgba(239, 68, 68, 0.14);
    --tss-alert-danger-text: #FCA5A5;
    --tss-alert-danger-border: rgba(239, 68, 68, 0.35);
    --tss-alert-info-bg: rgba(59, 130, 246, 0.14);
    --tss-alert-info-text: #93C5FD;
    --tss-alert-info-border: rgba(59, 130, 246, 0.35);
    --tss-alert-primary-bg: rgba(59, 130, 246, 0.14);
    --tss-alert-primary-text: #93C5FD;
    --tss-alert-primary-border: rgba(59, 130, 246, 0.35);
    --tss-alert-secondary-bg: rgba(148, 163, 184, 0.12);
    --tss-alert-secondary-text: #CBD5E1;
    --tss-alert-secondary-border: rgba(148, 163, 184, 0.28);

    --tss-accent: #3B82F6;
    --tss-accent-strong: #93C5FD;
    --tss-accent-contrast: #FFFFFF;
    --tss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --tss-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
    /* TODO: 다크 시안 확정 후 교체 — Step1 placeholder(라이트와 동일) */
    --tss-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --tss-success: #10B981; /* TODO: 다크 시안 확정 후 교체 */
    --tss-warning: #F59E0B; /* TODO: 다크 시안 확정 후 교체 */
    --tss-danger: #EF4444; /* TODO: 다크 시안 확정 후 교체 */

    /* html 루트 배경(다크) */
    background-color: var(--tss-bg);
    color-scheme: dark;
}

/* ---- ?? ???? (?????) ? ???/?? ?? ??? ?? ---- */
.btn-tss-primary {
    background: var(--tss-accent);
    color: var(--tss-accent-contrast);
    border: none;
    border-radius: var(--tss-radius-sm);
    font-weight: 600;
    box-shadow: var(--tss-shadow-sm);
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-tss-primary:hover {
    background: var(--tss-accent-strong);
    color: var(--tss-accent-contrast);
    transform: translateY(-1px);
}

.btn-tss-ghost {
    background: transparent;
    color: var(--tss-accent);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    font-weight: 600;
}

.btn-tss-ghost:hover {
    background: var(--tss-accent-soft);
}

.badge-tss-primary,
.badge-tss-info,
.badge-tss-secondary,
.badge-tss-success,
.badge-tss-warning,
.badge-tss-danger,
.badge-tss-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.3em 0.65em;
    border-radius: var(--tss-radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
}

.badge-tss-primary {
    background: var(--tss-alert-primary-bg);
    color: var(--tss-alert-primary-text);
}

.badge-tss-info {
    background: var(--tss-alert-primary-bg);
    color: var(--tss-alert-primary-text);
}

.badge-tss-secondary {
    background: var(--tss-alert-secondary-bg);
    color: var(--tss-alert-secondary-text);
}

.badge-tss-success {
    background: var(--tss-alert-success-bg);
    color: var(--tss-alert-success-text);
}

.badge-tss-warning {
    background: var(--tss-alert-warning-bg);
    color: var(--tss-alert-warning-text);
}

.badge-tss-danger {
    background: var(--tss-alert-danger-bg);
    color: var(--tss-alert-danger-text);
}

.badge-tss-muted {
    background: var(--tss-surface-muted);
    color: var(--tss-muted);
    border: 1px solid var(--tss-border);
}

.btn-tss-danger {
    background: var(--tss-alert-danger-text);
    color: var(--tss-accent-contrast);
    border: none;
    border-radius: var(--tss-radius-sm);
    font-weight: 600;
    box-shadow: var(--tss-shadow-sm);
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-tss-danger:hover {
    background: var(--tss-alert-danger-bg);
    color: var(--tss-alert-danger-text);
    transform: translateY(-1px);
}

/* In dark mode the alert text is a pale red, not a solid button fill. */
html[data-tss-theme="dark"] .btn-tss-danger {
    background: var(--tss-alert-danger-bg);
    color: var(--tss-alert-danger-text);
    border: 1px solid var(--tss-alert-danger-border);
}

html[data-tss-theme="dark"] .btn-tss-danger:hover {
    background: rgba(239, 68, 68, 0.24);
    color: var(--tss-alert-danger-text);
}

/* ---- 빈 상태 카드 (대시보드 placeholder / no-release / broken-release) ---- */
.tss-empty-state-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    min-height: 16rem;
}

.tss-empty-state-card {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    padding: 2rem 1.75rem;
    text-align: center;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-lg);
    box-shadow: var(--tss-shadow-sm);
}

.tss-empty-state-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

/* broken-release류 — 경고색 아이콘 원 */
.tss-empty-state-card__icon--warning {
    background: var(--tss-alert-warning-bg);
    color: var(--tss-alert-warning-text);
}

/* no-release / coming-soon / placeholder — muted 아이콘 원 */
.tss-empty-state-card__icon--muted {
    background: var(--tss-surface-muted);
    color: var(--tss-muted);
}

.tss-empty-state-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tss-text);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.tss-empty-state-card__desc {
    font-size: 0.9375rem;
    color: var(--tss-muted);
    margin: 0 0 0.35rem;
    line-height: 1.5;
}

.tss-empty-state-card__meta {
    font-size: 0.8125rem;
    color: var(--tss-muted);
    margin: 0.5rem 0 0;
}

.tss-empty-state-card__action {
    margin-top: 1.25rem;
}

/* ---- 공용 통계 카드 (흰 배경 + radius-md + border, 숫자만 상태색) ---- */
.tss-stat-card {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-md);
    padding: 0.85rem 1rem;
    height: 100%;
}

.tss-stat-card__label {
    font-size: 0.8rem;
    color: var(--tss-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.tss-stat-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tss-text);
    line-height: 1.2;
}

.tss-stat-card__value--warning { color: var(--tss-alert-warning-text); }
.tss-stat-card__value--danger { color: var(--tss-alert-danger-text); }
.tss-stat-card__value--accent { color: var(--tss-accent); }
.tss-stat-card__value--muted { color: var(--tss-muted); }

/* ---- ???? ?? UI (Step3 ??????: ?????? ?????????) ---- */
.approval-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--tss-border);
    padding-bottom: 0;
}

.approval-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    max-width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--tss-muted);
    font-weight: 500;
    padding: 0.45rem 0.75rem;
    margin-bottom: -1px;
    border-radius: 0;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.approval-tab:hover {
    color: var(--tss-text);
    background: transparent;
}

.approval-tab.active {
    color: var(--tss-accent);
    border-bottom-color: var(--tss-accent);
    background: transparent;
    font-weight: 600;
}

.approval-tab__label {
    min-width: 0;
}

.approval-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--tss-surface-muted);
    color: var(--tss-muted);
    border: 1px solid var(--tss-border);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    flex-shrink: 0;
}

.approval-tab.active .approval-count-badge,
.approval-quick-filter.is-active .approval-count-badge,
.approval-sidebar__link.is-active .approval-count-badge {
    background: var(--tss-surface);
    color: var(--tss-accent);
    border-color: var(--tss-accent);
}

.approval-quick-filters {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
}

.approval-quick-filters__group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.approval-quick-filters__group[hidden] {
    display: none !important;
}

.approval-quick-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 6px);
    background: var(--tss-surface);
    color: var(--tss-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.approval-quick-filter:hover {
    background: var(--tss-row-hover, var(--tss-surface-muted));
    color: var(--tss-accent);
}

.approval-quick-filter.is-active,
.approval-quick-filter[aria-pressed="true"] {
    border-color: var(--tss-accent);
    color: var(--tss-accent);
    font-weight: 600;
}

.approval-quick-filter:focus-visible,
.approval-filter-chip:focus-visible {
    outline: 2px solid var(--tss-accent);
    outline-offset: 2px;
}

.approval-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0 0 0.75rem;
}

.approval-filter-chips[hidden] {
    display: none !important;
}

.approval-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--tss-border);
    border-radius: 999px;
    background: var(--tss-surface-muted);
    color: var(--tss-text);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.approval-filter-chip__remove {
    color: var(--tss-muted);
    font-weight: 700;
}

.approval-filter-chip--reset {
    background: var(--tss-surface);
    color: var(--tss-muted);
}

@media (max-width: 390px) {
    .approval-tabs {
        flex-wrap: wrap;
    }

    .approval-tab,
    .approval-quick-filter,
    .approval-filter-chip {
        min-height: 44px;
    }
}

/* ??? ? ?? ???? ?? (?? ???? ?? ???) */
.approval-dashboard-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tss-accent);
    text-decoration: none;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    padding: 0.35rem 0.75rem;
    background: var(--tss-surface);
}
.approval-dashboard-link:hover {
    background: var(--tss-row-hover);
    color: var(--tss-accent);
    text-decoration: none;
}

/* 결재현황 KPI 카드 — 흰 배경 + radius-md + border 통일, 값은 상태별 색 */
.approval-kpi-card {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-md);
    padding: 0.85rem 1rem;
}
.approval-kpi-label {
    font-size: 0.8rem;
    color: var(--tss-muted);
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.approval-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tss-text);
    line-height: 1.2;
}
/* 대기=accent / 기안중=warning / 승인=success / 감사대기=danger */
.approval-kpi-value--pending { color: var(--tss-accent); }
.approval-kpi-value--drafting { color: var(--tss-alert-warning-text); }
.approval-kpi-value--approved { color: var(--tss-alert-success-text); }
.approval-kpi-value--audit { color: var(--tss-alert-danger-text); }

.approval-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.approval-list:has(.approval-list-panel) {
    display: block;
    gap: 0;
}

/* Step4 — 전자결재 목록 리스트형(카드형 .approval-card 와 별도) */
.approval-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-lg, 14px);
    padding: 14px 16px;
    margin-bottom: 10px;
}

.approval-list-toolbar .form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tss-muted);
    margin-bottom: 0.2rem;
}

.approval-list-toolbar .form-control,
.approval-list-toolbar .form-select {
    font-size: 13px;
    min-height: 2.25rem;
}

/* Step24-2B-2 — 문서함 기본/상세 검색 */
.approval-list-filter.approval-list-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.approval-list-filter__basic,
.approval-list-filter__advanced {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.approval-list-filter__field {
    min-width: 0;
}

.approval-list-filter__field--grow {
    flex: 1 1 12rem;
}

.approval-list-filter__field--md {
    flex: 0 1 9rem;
}

.approval-list-filter__field--sm {
    flex: 0 1 7.5rem;
}

.approval-list-filter__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
}

.approval-list-filter__actions .btn {
    min-height: 2.75rem;
}

.approval-list-filter__advanced {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tss-border);
}

.approval-list-filter__hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--tss-muted);
    line-height: 1.4;
}

.approval-list-filter__error {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--tss-alert-danger-text);
}

.approval-list-filter__error[hidden],
.approval-list-filter__advanced[hidden],
#approvalFilterReferenceStateWrap[hidden] {
    display: none !important;
}

.approval-list-filter .btn:focus-visible,
.approval-list-filter .form-control:focus-visible,
.approval-list-filter .form-select:focus-visible {
    outline: 2px solid var(--tss-accent);
    outline-offset: 2px;
}

.approval-suggest-item.is-active {
    background: var(--tss-row-hover);
}

@media (max-width: 390px) {
    .approval-list-filter__basic,
    .approval-list-filter__advanced,
    .approval-list-filter__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .approval-list-filter__field,
    .approval-list-filter__field--grow,
    .approval-list-filter__field--md,
    .approval-list-filter__field--sm {
        flex: 1 1 auto;
        width: 100%;
    }

    .approval-list-filter .form-control,
    .approval-list-filter .form-select,
    .approval-list-filter .btn {
        width: 100%;
        min-height: 44px;
    }
}

.approval-list {
    position: relative;
}

.approval-list.is-refreshing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--tss-accent);
    z-index: 2;
}

.approval-list.is-refreshing .approval-list-panel {
    opacity: 1;
}

.approval-list-panel {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-lg, 14px);
    overflow: hidden;
}

.approval-list-head,
.approval-list-row {
    display: grid;
    grid-template-columns: 28px 100px minmax(360px, 1fr) 156px 112px 112px 64px;
    gap: 16px;
    align-items: center;
    padding: 0 16px;
}

.approval-list-head {
    height: 38px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tss-muted);
    border-bottom: 1px solid var(--tss-border);
}

.approval-list-head > span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.approval-list-head > span:nth-child(3) {
    justify-content: flex-start;
    text-align: left;
}

.approval-list-row {
    height: 88px;
    border-bottom: 1px solid var(--tss-border);
    cursor: pointer;
    overflow: hidden;
}

.approval-list-check {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    margin: 0;
}

.approval-list-extra {
    display: none;
}

.approval-list-row:last-child {
    border-bottom: none;
}

.approval-list-row:hover {
    background: var(--tss-surface-muted, var(--tss-bg));
}

.approval-list-title {
    min-width: 0;
}

.approval-list-row > .approval-cat-chip {
    justify-self: center;
}

.approval-list-docno {
    font-size: 11px;
    color: var(--tss-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-list-title .t-main {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    max-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow-wrap: anywhere;
}

.approval-list-title .t-sub {
    font-size: 12px;
    color: var(--tss-muted);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.approval-list-badge {
    display: inline;
    font-size: 11px;
    font-weight: 600;
    color: var(--tss-muted);
}

.approval-list-state {
    text-align: center;
    padding: 2rem 1rem;
}

.approval-list-state__text {
    margin: 0 0 0.75rem;
    color: var(--tss-muted);
}

.approval-list-state[data-list-state="loadFailed"] .approval-list-state__text,
.approval-list-state[data-list-state="forbidden"] .approval-list-state__text,
.approval-list-state[data-list-state="sessionExpired"] .approval-list-state__text {
    color: var(--tss-alert-danger-text);
}

.approval-list-skeleton-block {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--tss-surface-muted, var(--tss-bg));
    animation: approval-skeleton-pulse 1.2s ease-in-out infinite;
}

.approval-list-skeleton-block--check {
    width: 16px;
    height: 16px;
}

.approval-list-skeleton-block--chip {
    height: 22px;
}

.approval-list-skeleton-block--title {
    height: 36px;
}

.approval-list-skeleton-block--amount,
.approval-list-skeleton-block--date,
.approval-list-skeleton-block--status,
.approval-list-skeleton-block--action {
    height: 14px;
}

@keyframes approval-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .approval-list-skeleton-block {
        animation: none;
    }

    .approval-list.is-refreshing .approval-list-panel {
        opacity: 1;
    }
}

.approval-list-amount {
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.approval-list-head .col-amount {
    text-align: center;
}

.approval-list-date {
    font-size: 12.5px;
    color: var(--tss-muted);
    text-align: center;
    white-space: nowrap;
}

.approval-list-status {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.approval-list-action {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tss-accent);
    text-align: center;
}

.approval-list-po-progress {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

.approval-list-po-progress--unused {
    color: var(--tss-muted);
    background: var(--tss-surface-muted, var(--tss-bg));
}

.approval-list-po-progress--progress {
    color: var(--tss-accent);
    background: var(--tss-accent-selected);
}

.approval-list-po-progress--complete {
    color: var(--tss-success);
    background: color-mix(in srgb, var(--tss-success) 12%, transparent);
}

.approval-cat-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
    min-width: 76px;
}

.approval-cat-chip--contract {
    background: var(--tss-accent-selected);
    color: var(--tss-accent);
}

.approval-cat-chip--expense {
    background: color-mix(in srgb, var(--tss-success) 16%, transparent);
    color: var(--tss-success);
}

.approval-cat-chip--leave {
    background: color-mix(in srgb, var(--tss-warning) 18%, transparent);
    color: var(--tss-warning);
}

.approval-cat-chip--general {
    background: var(--tss-accent-soft);
    color: var(--tss-muted);
}

.approval-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    flex-shrink: 0;
}

.approval-status-dot--pending {
    background: var(--tss-warning);
}

.approval-status-dot--draft {
    background: var(--tss-muted);
}

.approval-status-dot--progress {
    background: var(--tss-accent);
}

.approval-status-dot--done {
    background: var(--tss-success);
}

.approval-status-dot--rejected {
    background: var(--tss-danger);
}

/* 태블릿: 금액·기안일만 숨기고 상태는 남긴다. 상태는 모바일 1순위 항목이다. */
@media (max-width: 991.98px) and (min-width: 768.02px) {
    .approval-list-head,
    .approval-list-row {
        grid-template-columns: 28px 72px minmax(0, 1fr) 96px 56px;
    }

    .approval-list-head .col-amount,
    .approval-list-head .col-date,
    .approval-list-row .approval-list-amount,
    .approval-list-row .approval-list-date {
        display: none;
    }
}

/* 카드형: 제목·상태 / 기안자·날짜 / 부가정보 3줄 */
@media (max-width: 768px) {
    .approval-list-head {
        display: none;
    }

    .approval-list-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        height: auto;
        min-height: 0;
        overflow: visible;
        gap: 4px 8px;
        padding: 12px;
        align-items: start;
    }

    .approval-list-check {
        grid-column: 1;
        grid-row: 1 / 4;
        min-width: 44px;
        min-height: 44px;
        align-self: start;
    }

    .approval-cat-chip,
    .approval-list-action,
    .approval-list-docno,
    .approval-list-amount,
    .approval-list-flags--inline,
    .approval-list-po-progress--inline,
    .t-approver {
        display: none;
    }

    .approval-list-title,
    .approval-list-title .t-sub {
        display: contents;
    }

    .approval-list-title .t-main {
        grid-column: 2;
        grid-row: 1;
        max-height: 2.6em;
    }

    .approval-list-status {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        min-width: 0;
    }

    .t-people {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: var(--tss-muted);
    }

    .approval-list-date {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        white-space: nowrap;
    }

    .approval-list-extra {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        grid-column: 2 / 4;
        grid-row: 3;
        min-width: 0;
        font-size: 12px;
        color: var(--tss-muted);
        overflow-wrap: anywhere;
    }
}

/* 목록 카드: surface + 좌측 3px 악센트, hover 시 shadow-md로 살짝 부상 */
.approval-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-left: 3px solid var(--tss-muted);
    border-radius: var(--tss-radius-sm);
    padding: 0.55rem 0.85rem;
    box-shadow: none;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

.approval-card:hover {
    transform: none;
    background: var(--tss-row-hover);
    box-shadow: var(--tss-shadow-md);
    color: inherit;
}

.approval-card--contract { border-left-color: var(--tss-accent); }
.approval-card--leave { border-left-color: var(--tss-alert-success-text); }
.approval-card--expense { border-left-color: var(--tss-alert-warning-text); }
.approval-card--general { border-left-color: var(--tss-muted); }

/* ??: ?? ??? ?? ? ?? ? + ??? */
.approval-card--urgent {
    border-left-color: var(--tss-alert-danger-text);
    background: var(--tss-surface);
}

.approval-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}

.approval-card__title {
    font-weight: 500;
    font-size: 0.9375rem;
    margin-bottom: 0.15rem;
    color: var(--tss-text);
    line-height: 1.35;
}

.approval-card__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--tss-muted);
}

@media (max-width: 992px) {
    .approval-card__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.approval-card__row span strong {
    color: var(--tss-text);
    font-weight: 500;
}

.approval-section-card {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    box-shadow: none;
    /* 섹션 카드 간격 16px 통일 */
    margin-bottom: 16px;
    overflow: hidden;
}

.approval-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: var(--tss-section-bg);
    border-bottom: 1px solid var(--tss-border);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--tss-text);
}

.approval-section-header i {
    color: var(--tss-muted);
    font-size: 0.9rem;
}

.approval-section-body {
    padding: 0.85rem;
}

/*
 * 결재현황 Chart.js 래퍼
 * - position:relative + 고정 height: responsive 모드에서 호버 시 차트가 점점 작아지는 루프 방지
 * - canvas는 부모 크기에만 맞춤 (maintainAspectRatio: false와 짝)
 */
.approval-chart-box {
    position: relative;
    width: 100%;
}

.approval-chart-box--trend {
    height: 280px;
}

.approval-chart-box--category {
    height: 280px;
}

.approval-chart-box canvas {
    display: block;
    max-width: 100%;
}

/* ???? Step13 ? ?? ?? ???? */
.approval-comment-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 22rem;
    overflow-y: auto;
}

.approval-comment-item {
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 6px);
    background: var(--tss-surface);
}

.approval-comment-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
    color: var(--tss-text);
}

.approval-comment-item__time {
    color: var(--tss-muted);
    font-size: 0.75rem;
}

.approval-comment-item__body {
    font-size: 0.875rem;
    color: var(--tss-text);
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.45;
}

.approval-comment-empty {
    margin: 0;
}

.approval-comment-badge {
    font-weight: 600;
    font-size: 0.7rem;
}

.approval-comment-badge--approve {
    background: var(--tss-accent-soft, #eff6ff);
    color: var(--tss-accent, #2563eb);
    border: 1px solid var(--tss-accent-border-soft, #bfdbfe);
}

.approval-comment-badge--reject {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(220, 38, 38, 0.25);
}

.approval-comment-badge--ack {
    background: var(--tss-surface-muted, #f3f4f6);
    color: var(--tss-muted);
    border: 1px solid var(--tss-border);
}

html[data-tss-theme="dark"] .approval-comment-item {
    background: var(--tss-surface);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .approval-comment-badge--approve {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    border-color: var(--tss-accent-border);
}

html[data-tss-theme="dark"] .approval-comment-badge--reject {
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.35);
}

html[data-tss-theme="dark"] .approval-comment-badge--ack {
    background: var(--tss-surface-muted);
    color: var(--tss-muted);
    border-color: var(--tss-border);
}

.approval-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* 카테고리 칩: 미선택=흰 배경+border / 선택=accent 배경+흰 텍스트 */
.approval-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    background: var(--tss-surface);
    color: var(--tss-muted);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.approval-category-chip:hover {
    background: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-muted);
}

.approval-category-chip.active {
    border-color: var(--tss-accent);
    background: var(--tss-accent);
    color: var(--tss-accent-contrast);
}

/* 선택 칩은 hover 때도 accent 유지 */
.approval-category-chip.active:hover {
    border-color: var(--tss-accent-strong);
    background: var(--tss-accent-strong);
    color: var(--tss-accent-contrast);
}

/* 구분별 변형도 선택 시에는 accent 채움으로 통일 */
.approval-category-chip--contract.active,
.approval-category-chip--leave.active,
.approval-category-chip--expense.active,
.approval-category-chip--general.active {
    border-color: var(--tss-accent);
    background: var(--tss-accent);
    color: var(--tss-accent-contrast);
}

.approval-user-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
    min-height: 1.25rem;
}

/* ??? ?? ??(?? ?? / ?? AND) */
.approval-line-step-group {
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    padding: 0.45rem 0.55rem;
    background: var(--tss-surface);
    min-width: 0;
}
.approval-line-step-group--parallel {
    border-left: 3px solid var(--tss-accent);
}
.approval-line-step-group__label {
    font-size: 0.75rem;
    color: var(--tss-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.approval-line-step-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
#btnParallelAdd.active {
    border-color: var(--tss-accent);
    color: var(--tss-accent);
    font-weight: 600;
}
.approval-timeline-group {
    margin-bottom: 0.75rem;
}
.approval-timeline-group--parallel {
    border: 1px solid var(--tss-border);
    border-left: 3px solid var(--tss-accent);
    border-radius: var(--tss-radius-sm);
    padding: 0.5rem 0.65rem 0.15rem;
    background: var(--tss-surface);
}
.approval-timeline-group__header {
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}

/* ?? ?? ?? */
.approval-step-signature__typed {
    font-family: 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 1.25rem;
    /* 서명 도장 배경을 흰색으로 고정했으므로 글자색도 테마 반전 없이 항상 짙은 색으로 고정 */
    color: #111111;
    line-height: 1.2;
}
.approval-step-signature__img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
    /* 서명은 투명 배경 PNG(검정 잉크)라 테마를 따라가면 다크모드에서 안 보임 — 종이처럼 항상 흰 배경 고정 */
    background: #ffffff;
    border: 1px solid var(--tss-border);
    border-radius: 2px;
}

.approval-user-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--tss-radius-sm);
    background: var(--tss-surface-muted);
    color: var(--tss-text);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--tss-border);
    cursor: default;
}

.approval-timeline {
    position: relative;
    padding: 0.25rem 0;
}

.approval-timeline-item {
    position: relative;
    display: flex;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
}

.approval-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 1.5rem;
    bottom: 0;
    width: 1px;
    background: var(--tss-border);
}

.approval-timeline-marker {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    background: var(--tss-surface);
    color: var(--tss-muted);
    border: 1px solid var(--tss-border);
    z-index: 1;
}

/* ???: ??? ??????? ?? ? ?? ??? ??? */
.approval-timeline-item--approved .approval-timeline-marker {
    background: var(--tss-surface);
    color: var(--tss-alert-success-text);
    border-color: var(--tss-alert-success-text);
}

.approval-timeline-item--rejected .approval-timeline-marker,
.approval-timeline-item--recalled .approval-timeline-marker {
    background: var(--tss-surface);
    color: var(--tss-alert-danger-text);
    border-color: var(--tss-alert-danger-text);
}

.approval-timeline-item--pending .approval-timeline-marker {
    background: var(--tss-surface);
    color: var(--tss-alert-warning-text);
    border-color: var(--tss-alert-warning-text);
}

.approval-timeline-content {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
}

.approval-detail-header__docno {
    font-size: 0.75rem;
    color: var(--tss-muted);
    margin-bottom: 0.15rem;
}

.approval-detail-header__title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--tss-text);
    line-height: 1.35;
}

.approval-widget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--tss-radius-sm);
    border: 1px solid var(--tss-border);
    background: var(--tss-surface);
    transition: background 0.12s ease;
}

.approval-widget-item:hover {
    background: var(--tss-row-hover);
    box-shadow: none;
    color: inherit;
}

/* ---- Step2 ??: ??/????/???? (?? 4? ??) ---- */
.approval-user-search {
    position: relative;
}

.approval-suggest-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin-top: 0.15rem;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    box-shadow: var(--tss-shadow-sm);
    max-height: 200px;
    overflow-y: auto;
    display: none;
}

.approval-suggest-dropdown.is-open {
    display: block;
}

.approval-suggest-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.65rem;
    border: none;
    background: transparent;
    color: var(--tss-text);
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
}

.approval-suggest-item:hover,
.approval-suggest-item:focus {
    background: var(--tss-row-hover);
    outline: none;
}

.approval-suggest-item__name {
    font-weight: 500;
}

.approval-suggest-item__username {
    color: var(--tss-muted);
    font-size: 0.75rem;
}

.approval-user-chip__remove {
    margin-left: 0.3rem;
    border: none;
    background: transparent;
    color: var(--tss-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.approval-user-chip__remove:hover {
    color: var(--tss-alert-danger-text);
}

.approval-bulk-toolbar {
    display: none;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
    padding: 0.45rem 0.75rem;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
}

.approval-bulk-toolbar.is-visible {
    display: flex;
    flex-wrap: wrap;
}

/* Step24-2A — 전자결재 목록 페이지네이션 */
.approval-list-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    min-width: 0;
}

.approval-list-pager.is-busy {
    pointer-events: none;
    opacity: 0.65;
}

.approval-list-pager__info {
    margin: 0;
    color: var(--tss-muted);
    font-size: 0.875rem;
    min-width: 0;
    flex: 1 1 8rem;
}

.approval-list-pager__size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.approval-list-pager__size-label {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--tss-muted);
    white-space: nowrap;
}

.approval-list-pager__size-select {
    min-height: 2.75rem;
    width: auto;
    min-width: 6.5rem;
}

.approval-list-pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.approval-list-pager__btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm);
    background: var(--tss-surface);
    color: var(--tss-text);
    font-size: 0.875rem;
    line-height: 1.2;
}

.approval-list-pager__btn:hover:not(:disabled) {
    background: var(--tss-row-hover);
}

.approval-list-pager__btn.is-current {
    background: var(--tss-accent-soft);
    border-color: var(--tss-accent-border);
    color: var(--tss-accent-strong);
    font-weight: 600;
}

.approval-list-pager__btn:disabled {
    color: var(--tss-muted);
    background: var(--tss-surface-muted);
    cursor: not-allowed;
    opacity: 0.55;
}

.approval-list-pager__btn:focus-visible,
.approval-list-pager__size-select:focus-visible {
    outline: 2px solid var(--tss-accent);
    outline-offset: 2px;
}

.approval-list-pager__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    color: var(--tss-muted);
}

@media (max-width: 390px) {
    .approval-list-pager {
        flex-direction: column;
        align-items: stretch;
    }

    .approval-list-pager__nav {
        justify-content: flex-start;
    }
}

/* 위임 설정 테이블 — 헤더 surface-muted */
.approval-delegation-table thead th {
    background: var(--tss-section-bg);
    color: var(--tss-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--tss-border);
}

.approval-card-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.approval-card-wrap .approval-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.approval-card__check {
    margin-top: 0;
    flex-shrink: 0;
}

.approval-card__main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.approval-card__actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.25rem;
    align-items: center;
}

.approval-card__actions .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.approval-preview {
    display: none;
    margin-top: 0;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--tss-border);
    border-top: none;
    border-radius: 0 0 var(--tss-radius-sm) var(--tss-radius-sm);
    background: var(--tss-surface);
}

.approval-preview.is-open {
    display: block;
}

.approval-preview__body {
    white-space: pre-wrap;
    color: var(--tss-text);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.approval-preview__meta {
    font-size: 0.75rem;
    color: var(--tss-muted);
    margin-bottom: 0.35rem;
}

.approval-preview__files {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
}

.approval-preview__files li {
    padding: 0.1rem 0;
    color: var(--tss-text);
}

.approval-section-body .form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tss-muted);
    margin-bottom: 0.25rem;
}

.approval-section-body .form-control,
.approval-section-body .form-select {
    font-size: 0.875rem;
}

.approval-section-body .row.g-3 {
    --bs-gutter-y: 0.65rem;
}

.approval-card-wrap.is-preview-open .approval-card {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---- ???? ?? (?? ?? ? ? ?? ???? ?? ???? ?? ?? ???? ?? ??) ---- */
.tss-skeleton-block {
    border-radius: var(--tss-radius-sm);
    background: linear-gradient(
        90deg,
        var(--tss-surface-muted) 25%,
        var(--tss-border) 37%,
        var(--tss-surface-muted) 63%
    );
    background-size: 400% 100%;
    animation: tss-skeleton-shimmer 1.4s ease infinite;
}

.tss-skeleton-text {
    height: 1.1rem;
    width: 60%;
    margin: 0.25rem auto;
}

.tss-skeleton-card {
    height: 92px;
    border-radius: var(--tss-radius-md);
}

.tss-skeleton-chart {
    height: 350px;
    border-radius: var(--tss-radius-md);
}

@keyframes tss-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .tss-skeleton-block {
        animation: none;
        background: var(--tss-surface-muted);
    }
}

/* ---- ?? ?? ---- */
html[data-tss-theme="dark"] body {
    background-color: var(--tss-bg) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body:not(.app) {
    background: var(--tss-bg) !important;
}

html[data-tss-theme="dark"] h1,
html[data-tss-theme="dark"] h2,
html[data-tss-theme="dark"] h3,
html[data-tss-theme="dark"] h4,
html[data-tss-theme="dark"] h5,
html[data-tss-theme="dark"] h6 {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .text-muted,
html[data-tss-theme="dark"] .text-secondary {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .text-dark {
    color: var(--tss-text) !important;
}

/* ?? ? ?? ?? (???????? ?? ??) */
html[data-tss-theme="dark"] main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.admin-quick-link):not(.dashboard-menu-card):not(.bd-action-btn):not(.bd-btn):not(.page-link):not(.doc-card):not(.doc-lib-back):not(.doc-lib-btn-upload),
html[data-tss-theme="dark"] .super-admin-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.admin-quick-link):not(.page-link),
html[data-tss-theme="dark"] #main.content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: #93c5fd;
}

html[data-tss-theme="dark"] main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.admin-quick-link):not(.dashboard-menu-card):not(.bd-action-btn):not(.bd-btn):not(.page-link):not(.doc-card):not(.doc-lib-btn-upload):hover,
html[data-tss-theme="dark"] .super-admin-main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.admin-quick-link):not(.page-link):hover,
html[data-tss-theme="dark"] #main.content a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: #bfdbfe;
}

/* ---- ?? ? ?? ---- */
html[data-tss-theme="dark"] .card,
html[data-tss-theme="dark"] .ts-card {
    background-color: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .card-header,
html[data-tss-theme="dark"] .ts-card .card-header {
    background-color: var(--tss-section-bg);
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .card-footer,
html[data-tss-theme="dark"] .ts-card .card-footer {
    background-color: var(--tss-section-bg);
    border-top-color: var(--tss-border);
}

/* ---- ? ---- */
html[data-tss-theme="dark"] .table {
    color: var(--tss-text);
    border-color: var(--tss-border);
    --bs-table-bg: transparent;
    --bs-table-color: var(--tss-text);
    --bs-table-border-color: var(--tss-border);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(96, 165, 250, 0.08);
}

html[data-tss-theme="dark"] .table thead th,
html[data-tss-theme="dark"] .ts-data-table .table thead th {
    background-color: var(--tss-section-bg);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .table td,
html[data-tss-theme="dark"] .table th {
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .table tbody tr,
html[data-tss-theme="dark"] .table tbody td,
html[data-tss-theme="dark"] .table tbody th {
    background-color: var(--tss-surface) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .table thead tr,
html[data-tss-theme="dark"] .table thead th,
html[data-tss-theme="dark"] .table-light,
html[data-tss-theme="dark"] .table-light > th,
html[data-tss-theme="dark"] .table-light > td {
    background-color: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(96, 165, 250, 0.08) !important;
    color: var(--tss-text);
}

/* ---- ? ---- */
html[data-tss-theme="dark"] .form-control,
html[data-tss-theme="dark"] .form-select,
html[data-tss-theme="dark"] textarea.form-control {
    background-color: var(--tss-surface-muted);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .form-control:focus,
html[data-tss-theme="dark"] .form-select:focus {
    background-color: var(--tss-surface-muted);
    color: var(--tss-text);
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
}

html[data-tss-theme="dark"] .form-control::placeholder {
    color: var(--tss-muted);
}

/* form-floating ? Bootstrap? placeholder? transparent? ??? label? ?? */
html[data-tss-theme="dark"] .form-floating > .form-control::placeholder,
html[data-tss-theme="dark"] .form-floating > .form-select::placeholder {
    color: transparent !important;
}

/* readonly?plaintext ? ????? ?? ? ??? ?? */
html[data-tss-theme="dark"] .form-control[readonly],
html[data-tss-theme="dark"] .form-control[disabled],
html[data-tss-theme="dark"] .form-control-plaintext,
html[data-tss-theme="dark"] .form-control-plaintext.bg-light {
    background-color: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] code {
    color: #93c5fd;
    background: rgba(96, 165, 250, 0.12);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
}

html[data-tss-theme="dark"] .input-group-text {
    background-color: var(--tss-surface-muted);
    color: var(--tss-muted);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .form-label,
html[data-tss-theme="dark"] .form-text {
    color: var(--tss-muted);
}

/* ?? ?? ? ???? ??? ??? ?? ?? ? */
html[data-tss-theme="dark"] input[type="file"].form-control {
    background-color: #0f172a;
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] input[type="file"].form-control::file-selector-button {
    background-color: var(--tss-surface-muted);
    color: var(--tss-text);
    border: 1px solid var(--tss-border);
    border-radius: 0.375rem;
    padding: 0.375rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

html[data-tss-theme="dark"] input[type="file"].form-control::file-selector-button:hover {
    background-color: #334155;
    border-color: #475569;
}

html[data-tss-theme="dark"] input[type="file"].form-control::-webkit-file-upload-button {
    background-color: var(--tss-surface-muted);
    color: var(--tss-text);
    border: 1px solid var(--tss-border);
    border-radius: 0.375rem;
    padding: 0.375rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

html[data-tss-theme="dark"] input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: #334155;
    border-color: #475569;
}

html[data-tss-theme="dark"] .form-check-input {
    background-color: #0f172a;
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .form-check-input:checked {
    background-color: #2563eb;
    border-color: #2563eb;
}

html[data-tss-theme="dark"] .form-check-label {
    color: var(--tss-text);
}

/* ---- ?? ? ???? ---- */
html[data-tss-theme="dark"] .modal-content {
    background-color: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .modal-header,
html[data-tss-theme="dark"] .modal-footer {
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .dropdown-menu {
    background-color: var(--tss-surface);
    border-color: var(--tss-border);
}

/* Bootstrap Popover(예: 기안 작성 화면 "카테고리 더보기")는 dropdown-menu와 달리 다크모드 대응이 전혀 없어서
   흰 박스가 그대로 떠 보이는 문제가 있었음 — Bootstrap 5.3 CSS 변수를 덮어써서 테마에 맞춤 */
html[data-tss-theme="dark"] .popover {
    --bs-popover-bg: var(--tss-surface);
    --bs-popover-border-color: var(--tss-border);
    --bs-popover-header-bg: var(--tss-surface);
    --bs-popover-header-color: var(--tss-text);
    --bs-popover-body-color: var(--tss-text);
}

html[data-tss-theme="dark"] .dropdown-item {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .dropdown-item:hover,
html[data-tss-theme="dark"] .dropdown-item:focus {
    background-color: rgba(96, 165, 250, 0.12);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .list-group-item {
    background-color: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

/* ---- ?? ? ?? ? ??? ---- */
html[data-tss-theme="dark"] .alert {
    border-width: 1px;
    border-style: solid;
}

html[data-tss-theme="dark"] .alert-success {
    background-color: var(--tss-alert-success-bg);
    color: var(--tss-alert-success-text);
    border-color: var(--tss-alert-success-border);
}

html[data-tss-theme="dark"] .alert-warning {
    background-color: var(--tss-alert-warning-bg);
    color: var(--tss-alert-warning-text);
    border-color: var(--tss-alert-warning-border);
}

html[data-tss-theme="dark"] .alert-danger {
    background-color: var(--tss-alert-danger-bg);
    color: var(--tss-alert-danger-text);
    border-color: var(--tss-alert-danger-border);
}

html[data-tss-theme="dark"] .alert-info {
    background-color: var(--tss-alert-info-bg);
    color: var(--tss-alert-info-text);
    border-color: var(--tss-alert-info-border);
}

html[data-tss-theme="dark"] .alert-primary {
    background-color: var(--tss-alert-primary-bg);
    color: var(--tss-alert-primary-text);
    border-color: var(--tss-alert-primary-border);
}

html[data-tss-theme="dark"] .alert-secondary {
    background-color: var(--tss-alert-secondary-bg);
    color: var(--tss-alert-secondary-text);
    border-color: var(--tss-alert-secondary-border);
}

html[data-tss-theme="dark"] .alert-light {
    background-color: var(--tss-surface-muted);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .alert-dark {
    background-color: #0f172a;
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .alert a:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

html[data-tss-theme="dark"] .alert .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.6);
    opacity: 0.75;
}

html[data-tss-theme="dark"] .alert .btn-close:hover {
    opacity: 1;
}

html[data-tss-theme="dark"] .toast:not(.text-white) {
    background-color: var(--tss-surface);
    color: var(--tss-text);
    border: 1px solid var(--tss-border);
}

html[data-tss-theme="dark"] .toast .toast-header {
    background-color: var(--tss-section-bg);
    color: var(--tss-text);
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .toast .toast-body {
    background-color: var(--tss-surface);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(1.6);
}

html[data-tss-theme="dark"] .badge-success {
    background-color: var(--tss-alert-success-bg) !important;
    color: var(--tss-alert-success-text) !important;
}

html[data-tss-theme="dark"] .badge-warning {
    background-color: var(--tss-alert-warning-bg) !important;
    color: var(--tss-alert-warning-text) !important;
}

html[data-tss-theme="dark"] .badge-danger {
    background-color: var(--tss-alert-danger-bg) !important;
    color: var(--tss-alert-danger-text) !important;
}

html[data-tss-theme="dark"] .badge-info {
    background-color: var(--tss-alert-info-bg) !important;
    color: var(--tss-alert-info-text) !important;
}

html[data-tss-theme="dark"] .invalid-feedback,
html[data-tss-theme="dark"] .valid-feedback {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .bg-light {
    background-color: var(--tss-section-bg) !important;
}

html[data-tss-theme="dark"] .bg-white {
    background-color: var(--tss-surface) !important;
}

html[data-tss-theme="dark"] .border,
html[data-tss-theme="dark"] .border-top,
html[data-tss-theme="dark"] .border-bottom {
    border-color: var(--tss-border) !important;
}

/* 공통 로딩 피드백 — 세 레이아웃이 같은 Light/Dark 표면을 사용한다. */
.tss-global-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding-top: 20vh;
    background: color-mix(in srgb, var(--tss-bg) 78%, transparent);
    color: var(--tss-text);
    text-align: center;
    backdrop-filter: blur(2px);
}

.tss-global-loading__label {
    margin-top: 0.625rem;
    color: var(--tss-text);
    font-weight: 500;
}

/* ---- 상단 네비게이션: 폰트·간격·그룹 정렬 통일 ----
   google-style.css(약 327~366)에서 값 변경 없이 복사.
   google-style을 로드하지 않는 화면(게시판/차량예약/요청접수 등)에서도
   .tss-nav-btn 기본 테두리(브라우저 버튼 스타일)가 깨지지 않게 함.
   원본은 google-style.css에 유지(중복 로드 안전). */
.tss-top-nav {
  gap: 0.35rem;
}

.tss-top-nav .nav-link,
.tss-top-nav .tss-nav-btn {
  color: var(--google-gray-700);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.tss-top-nav .nav-link:hover,
.tss-top-nav .tss-nav-btn:hover {
  background-color: var(--google-gray-100);
  color: var(--google-gray-900);
}

.tss-top-nav .nav-link.active {
  background-color: var(--google-blue-light);
  color: var(--google-blue);
}

.tss-top-nav .tss-nav-btn {
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
}

.tss-top-nav .nav-link i,
.tss-top-nav .tss-nav-btn i {
  font-size: 0.9375rem;
}

/* ---- Step2: 헤더 검색 pill + 알림벨 (3벌 레이아웃 공용) ---- */
.tss-global-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* 헤더 중앙 검색은 충분한 탐색 폭을 주되 초광폭 화면에서 과도하게 늘리지 않는다. */
  min-width: 0;
  max-width: 36rem;
  width: clamp(26rem, 34vw, 36rem);
  min-height: 2.5rem;
  flex: 0 1 36rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--tss-surface-muted, #F8FAFC);
  border: 1px solid var(--tss-border, #E2E8F0);
  box-sizing: border-box;
}

.tss-global-search__icon {
  color: var(--tss-muted, #64748B);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.tss-global-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.875rem;
  color: var(--tss-text, #0F172A);
  cursor: text;
  padding: 0;
}

.tss-global-search__input::placeholder {
  color: var(--tss-muted, #64748B);
}

.tss-global-search:hover,
.tss-global-search:focus-within {
  border-color: var(--tss-accent-border-soft, #BFDBFE);
}

.tss-global-search__panel {
  position: absolute;
  top: calc(100% + 8px);
  /* 한글 주석: 검색칸 너비에 맞춰 아래로만 펼친다. 옆으로 넓히면 알림종을 덮는다 */
  left: 0;
  right: 0;
  transform: none;
  width: auto;
  min-width: 100%;
  max-width: none;
  max-height: min(24rem, 70vh);
  overflow: auto;
  z-index: 1080;
  background: var(--tss-surface);
  color: var(--tss-text);
  border: 1px solid var(--tss-border);
  border-radius: var(--tss-radius-lg, 14px);
  box-shadow: var(--tss-shadow-md, 0 12px 32px rgba(17, 24, 39, 0.16));
  padding: 0.4rem 0;
}

.tss-global-search__status {
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--tss-muted);
}

.tss-global-search__group + .tss-global-search__group {
  border-top: 1px solid var(--tss-border);
  margin-top: 0.25rem;
  padding-top: 0.25rem;
}

.tss-global-search__group-title {
  margin: 0;
  padding: 0.45rem 1rem 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tss-muted);
}

.tss-global-search__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.tss-global-search__item:hover,
.tss-global-search__item.is-active {
  background: var(--tss-surface-muted, var(--tss-accent-soft));
}

.tss-global-search__item-title {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tss-global-search__item-sub {
  display: block;
  width: 100%;
  font-size: 0.75rem;
  color: var(--tss-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tss-global-search__more {
  display: block;
  padding: 0.4rem 1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tss-accent);
  text-decoration: none;
}

.tss-global-search__more:hover,
.tss-global-search__more.is-active {
  background: var(--tss-surface-muted, var(--tss-accent-soft));
  text-decoration: none;
}

.tss-nav-center:has(.tss-global-search.is-open),
.tss-nav-center:has(.tss-global-search:focus-within) {
  z-index: 20;
}

.tss-notification-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  padding: 0;
  background: transparent;
  border-radius: var(--tss-radius-sm, 8px);
  color: var(--tss-text, #0F172A);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tss-notification-bell:hover {
  background: var(--tss-accent-soft, #EFF6FF);
  color: var(--tss-accent, #2563EB);
  text-decoration: none;
}

.tss-notification-bell:focus-visible {
  outline: 2px solid var(--tss-accent, #2563EB);
  outline-offset: 2px;
}

.tss-notification-bell > .bi-bell {
  font-size: 1.1rem;
}

.tss-notification-bell__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--tss-danger, #EF4444);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  pointer-events: none;
}

/* TS 관리자 상단바(navbar-dark 고정) — 로고/메뉴 텍스트 대비 확보.
   .navbar-brand, .navbar-nav .nav-link, .tss-top-nav .nav-link(위 google-style 이관 규칙)는
   라이트 텍스트색을 고정 지정하므로, navbar-dark 안에서는 셀렉터 3단 조합으로 덮어써서
   Bootstrap 기본 다크 배색(흰 텍스트)에 준하는 대비를 되살린다 */
.navbar-dark .navbar-brand {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .tss-top-nav .nav-link,
.navbar-dark .tss-top-nav .tss-nav-btn {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .tss-top-nav .nav-link:hover,
.navbar-dark .tss-top-nav .tss-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .tss-top-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* TS 관리자 상단바(navbar-dark 고정) — 검색/벨 대비만 맞춤, dark 고정 자체는 유지 */
.navbar-dark .tss-global-search {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.navbar-dark .tss-global-search__icon,
.navbar-dark .tss-global-search__input,
.navbar-dark .tss-global-search__input::placeholder {
  color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .tss-global-search__panel {
  background: var(--tss-surface);
  color: var(--tss-text);
  border-color: var(--tss-border);
}

.navbar-dark .tss-notification-bell {
  color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .tss-notification-bell:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-global-search {
  background: var(--tss-surface-muted);
  border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-notification-bell {
  color: var(--tss-text);
}

/* ===== 헤더 알림 모달 (홈포털 최근 알림 위젯의 portal-feed-* 톤 재사용) ===== */
.tss-notification-modal.modal-content {
  border: none;
  border-radius: var(--tss-radius-lg, 14px);
  box-shadow: var(--tss-shadow-md, 0 12px 32px rgba(17, 24, 39, 0.16));
  overflow: hidden;
}

#tssNotificationModal .modal-dialog {
  width: min(760px, calc(100vw - 2rem));
  max-width: 760px;
}

.tss-notification-modal .modal-header {
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--tss-border);
}

.tss-notification-modal .modal-header .modal-title {
  font-size: 1rem;
  font-weight: 700;
}

.tss-notification-modal .modal-body {
  min-height: 18rem;
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tss-notification-modal__tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0.85rem 1.25rem 0.75rem;
  flex-shrink: 0;
}

.tss-notification-modal__tab {
  flex: 1 1 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tss-muted);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tss-notification-modal__tab:hover {
  color: var(--tss-text);
  background: var(--tss-surface-muted);
}

.tss-notification-modal__tab.is-active {
  background: var(--tss-accent);
  color: var(--tss-accent-contrast);
}

.tss-notification-modal__tab.is-active:hover {
  background: var(--tss-accent-strong);
  color: var(--tss-accent-contrast);
}

.tss-notification-modal__tab:focus-visible {
  outline: 2px solid var(--tss-accent);
  outline-offset: 2px;
}

#tssNotificationModalList {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 0 1.25rem;
}

.tss-notification-modal .portal-feed-item {
  gap: 0.85rem;
  padding: 1rem 0.55rem;
  border-radius: var(--tss-radius-sm, 8px);
}

.tss-notification-modal .portal-feed-item:hover {
  background: var(--tss-row-hover, var(--tss-surface-muted));
}

.tss-notification-modal .portal-feed-item:hover .portal-feed-title {
  color: var(--tss-accent);
}

.tss-notification-modal__icon--unread {
  color: var(--tss-accent);
  background: var(--tss-accent-soft);
}

.tss-notification-modal__dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: var(--tss-accent);
}

.tss-notification-modal .portal-feed-icon {
  width: 2.2rem;
  height: 2.2rem;
  margin-top: 0.15rem;
  font-size: 0.95rem;
}

.tss-notification-modal__item-summary {
  min-width: 0;
  padding: 0.05rem 0.15rem 0;
  border-radius: 0.45rem;
  cursor: pointer;
}

.tss-notification-modal__item-summary:focus-visible {
  outline: 2px solid var(--tss-accent);
  outline-offset: 3px;
}

.tss-notification-modal__item-meta-row {
  align-items: center;
  margin-bottom: 0.25rem;
}

.tss-notification-modal__item-meta-row .portal-feed-time {
  margin-left: auto;
}

.tss-notification-modal__item-meta {
  min-width: 0;
  color: var(--tss-accent);
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tss-notification-modal__item-title.portal-feed-title {
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.tss-notification-modal__item-detail {
  margin: 0.3rem 0 0;
  color: var(--tss-muted);
  font-size: 0.825rem;
  line-height: 1.5;
  word-break: break-word;
}

.tss-notification-modal .portal-feed-item.notification-item--read {
  opacity: 0.62;
}

.tss-notification-modal .portal-feed-item.notification-item--read .portal-feed-title {
  color: var(--tss-muted);
  font-weight: 500;
}

.tss-notification-modal__item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.tss-notification-modal__item-actions .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  line-height: 1;
}

.tss-notification-modal__action {
  min-height: 2rem;
  padding: 0.38rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.tss-notification-modal__action--secondary {
  border: 1px solid var(--tss-border);
  color: var(--tss-muted);
  background: var(--tss-surface);
}

.tss-notification-modal__action--secondary:hover {
  border-color: var(--tss-accent);
  color: var(--tss-accent);
  background: var(--tss-accent-soft);
}

.tss-notification-modal__action--primary {
  border: 1px solid var(--tss-accent);
  color: var(--tss-accent-contrast);
  background: var(--tss-accent);
}

.tss-notification-modal__action--primary:hover {
  border-color: var(--tss-accent-strong);
  color: var(--tss-accent-contrast);
  background: var(--tss-accent-strong);
}

.tss-notification-modal__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem 0.9rem;
  border-top: 1px solid var(--tss-border);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.tss-notification-modal__page-label {
  font-size: 0.8125rem;
}

.tss-notification-modal__footer {
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: var(--tss-surface-muted);
}

.tss-notification-modal__device-setting {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin-right: auto;
}

.tss-notification-modal__device-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--tss-accent);
  background: var(--tss-accent-soft);
}

.tss-notification-modal__device-copy {
  max-width: 14rem;
  color: var(--tss-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.tss-notification-modal__footer-action {
  flex: 0 0 auto;
  min-height: 2.1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--tss-border);
  border-radius: 0.55rem;
  color: var(--tss-text);
  background: var(--tss-surface);
  font-size: 0.78rem;
  font-weight: 700;
}

.tss-notification-modal__footer-action:hover {
  border-color: var(--tss-accent);
  color: var(--tss-accent);
  background: var(--tss-accent-soft);
}

.tss-notification-modal__footer-action--mark-all {
  color: var(--tss-accent);
}

@media (max-width: 575.98px) {
  #tssNotificationModal .modal-dialog {
    width: calc(100vw - 1rem);
    margin: 0.5rem;
  }

  .tss-notification-modal .modal-body {
    min-height: 15rem;
    max-height: 74vh;
  }

  #tssNotificationModalList {
    padding: 0 0.75rem;
  }

  .tss-notification-modal .portal-feed-item {
    gap: 0.65rem;
    padding: 0.9rem 0.25rem;
  }

  .tss-notification-modal__item-meta-row {
    align-items: flex-start;
  }

  .tss-notification-modal__item-actions {
    justify-content: flex-start;
  }

  .tss-notification-modal__device-setting {
    width: 100%;
    flex-wrap: wrap;
  }

  .tss-notification-modal__device-copy {
    flex: 1 1 10rem;
    max-width: none;
  }
}

@media (max-width: 991.98px) {
  .tss-global-search {
    width: 100%;
    min-width: 0;
  }

  .tss-global-search__panel {
    left: 0;
    right: 0;
    transform: none;
    width: auto;
  }
}

@media (max-width: 575.98px) {
  .tss-global-search {
    display: none; /* 좁은 화면: 검색 pill 숨김(후속 반응형에서 재검토) */
  }
}

/* 네비게이션 그룹 구분선 — 우측 그룹 내부 간격용 */
.tss-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--tss-border, var(--google-gray-300));
  margin: 0 0.25rem;
  padding: 0;
  list-style: none;
  align-self: center;
  flex-shrink: 0;
}

.navbar-dark .tss-nav-divider,
header.navbar-dark .tss-nav-divider {
  background: rgba(255, 255, 255, 0.22);
}

.tss-top-nav .tss-nav-divider.nav-item {
  display: list-item;
}

/* 상단 헤더 3구역: 좌(로고+메뉴) / 중앙(검색, 남는 칸) / 우(알림·테마·언어·로그아웃) */
.navbar > .container,
.navbar.navbar-expand-lg > .tss-nav-flex,
header.navbar {
  position: relative;
}

/* 한글 주석: 홈·TS·슈퍼관리자 헤더 높이·고정·세로 정렬을 홈포털(56px)과 같게 */
.navbar.navbar-expand-lg,
header.navbar {
  min-height: var(--tss-header-h, 56px);
  height: var(--tss-header-h, 56px);
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow: visible;
}

.navbar.navbar-expand-lg.sticky-top,
header.navbar.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar.navbar-expand-lg,
header.navbar {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 0.75rem;
}

.navbar.navbar-expand-lg > .tss-nav-flex {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
}

.navbar.navbar-expand-lg .tss-brand-logo,
header.navbar .tss-brand-logo,
header.navbar .navbar-brand {
  margin: 0;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  flex: 0 0 auto;
}

.tss-brand-cluster {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.tss-mode-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem;
  border: 1px solid var(--tss-border, #E2E8F0);
  border-radius: 999px;
  background: var(--tss-surface-muted, #F8FAFC);
  flex-shrink: 0;
}

.tss-mode-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  min-width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0 0.6rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--tss-muted, #64748B);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.tss-mode-link i {
  font-size: 1.05rem;
}

.tss-mode-link:hover,
.tss-mode-link:focus-visible {
  background: var(--tss-surface, #fff);
  color: var(--tss-accent, #2563EB);
  text-decoration: none;
}

.tss-mode-link.is-active {
  background: var(--tss-surface, #fff);
  color: var(--tss-accent, #2563EB);
  box-shadow: var(--tss-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.12));
  pointer-events: none;
}

.tss-mode-link__label {
  white-space: nowrap;
}

.tss-mode-switcher--on-dark,
.navbar-dark .tss-mode-switcher {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.tss-mode-link--on-dark,
.navbar-dark .tss-mode-link {
  color: rgba(255, 255, 255, 0.72);
}

.tss-mode-link--on-dark:hover,
.tss-mode-link--on-dark:focus-visible,
.navbar-dark .tss-mode-link:hover,
.navbar-dark .tss-mode-link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.tss-mode-link--on-dark.is-active,
.navbar-dark .tss-mode-link.is-active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: none;
}

.tss-nav-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  position: relative;
}

.tss-nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 1 auto;
  min-width: 0;
  z-index: 2;
}

.tss-nav-center {
  /* 검색은 좌·우 도구 폭과 무관하게 화면의 실제 중앙에 둔다. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  z-index: 1;
  pointer-events: none;
}

.tss-nav-center > * {
  pointer-events: auto;
  min-width: 0;
  max-width: 100%;
}

.tss-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: 0;
  z-index: 2;
}

/* 일반 사용자 navbar: 유틸 영역이 남은 폭을 채워 3구역이 동작하도록 */
.navbar.navbar-expand-lg > .container > .navbar-collapse,
.navbar.navbar-expand-lg > .tss-nav-flex {
  flex: 1 1 auto;
  min-width: 0;
}

/* 관리자 헤더: flex-md-nowrap 안에서 전체 폭 사용 */
header.navbar > .tss-nav-flex {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
}

@media (max-width: 1199.98px) {
  /* 한글 주석: 노트북 폭에서는 이름·로그아웃 글자를 숨겨 검색칸과 알림종이 싸울 자리를 줄인다 */
  .navbar.navbar-expand-lg .tss-nav-profile__name,
  .navbar.navbar-expand-lg #logout-link span,
  header.navbar .tss-nav-right .nav-link span {
    display: none;
  }
}

@media (max-width: 1399.98px) {
  .tss-global-search {
    width: clamp(22rem, 34vw, 28rem);
    max-width: 28rem;
    flex-basis: 28rem;
  }

  .tss-mode-link__label {
    display: none;
  }

  .tss-mode-link {
    padding: 0;
  }
}

@media (max-width: 991.98px) {
  /* 한글 주석: 태블릿까지는 한 줄 유지. 검색·모드 아이콘은 768px부터 보여 준다 */
  .navbar.navbar-expand-lg > .container,
  .navbar.navbar-expand-lg,
  header.navbar {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
  }

  .navbar.navbar-expand-lg > .container > .navbar-collapse,
  .navbar.navbar-expand-lg > .tss-nav-flex {
    flex: 1 1 auto;
    flex-basis: auto;
    display: flex;
    min-width: 0;
  }

  .navbar.navbar-expand-lg .tss-nav-flex,
  header.navbar .tss-nav-flex {
    flex-direction: row;
    align-items: center;
    /* Keep the logo left-aligned while streamed HTML is still parsing the
       right-hand controls. Their auto margin preserves final alignment. */
    justify-content: flex-start;
    gap: 0.2rem;
    padding: 0;
  }

  .navbar.navbar-expand-lg .tss-nav-left > .nav-item,
  .navbar.navbar-expand-lg .tss-nav-center,
  .navbar.navbar-expand-lg .tss-nav-divider,
  header.navbar .tss-nav-center,
  header.navbar .tss-nav-divider,
  .tss-theme-toggle-wrap {
    display: none !important;
  }

  /* 한글 주석: 992 미만은 아이패드 세로는 아직 좁다. KO|EN 대신 바꿀 언어 한 글자 */
  .tss-lang-switch {
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    gap: 0;
  }

  .tss-lang-switch__sep,
  .tss-lang-switch__opt.is-active {
    display: none;
  }

  .tss-lang-switch__opt:not(.is-active) {
    min-width: 2rem;
    height: 2rem;
    padding: 0;
    font-weight: 700;
  }

  .navbar.navbar-expand-lg .tss-nav-right,
  header.navbar .tss-nav-right {
    width: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    margin-left: auto;
    gap: 0.15rem;
  }

  .navbar.navbar-expand-lg .tss-nav-profile__name,
  .navbar.navbar-expand-lg #logout-link span,
  header.navbar .tss-nav-right .nav-link span {
    display: none;
  }

  /* 한글 주석: 햄버거가 로고와 겹치지 않게 왼쪽 여백 */
  body:has(.tss-mobile-menu-toggle) .navbar.navbar-expand-lg > .container,
  body:has(.tss-portal-sidebar-toggle) .navbar.navbar-expand-lg > .container,
  body:has(.tss-mobile-menu-toggle) .navbar.navbar-expand-lg,
  body:has(.tss-portal-sidebar-toggle) .navbar.navbar-expand-lg {
    padding-left: 3.4rem;
  }
}

@media (max-width: 767.98px) {
  /* Mobile: the EQ TSS image remains a single home link beside the menu. */
  .navbar.navbar-expand-lg .tss-brand-logo__wordmark,
  header.navbar .tss-brand-logo__wordmark {
    display: none;
  }

  .navbar .tss-brand-cluster {
    gap: 0;
    flex: 0 0 auto;
  }

  .navbar .tss-nav-left { flex-shrink: 0; }

  .navbar .tss-brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 !important;
  }

  .navbar .tss-brand-logo__mark {
    width: 90px;
    height: 30px;
    flex: 0 0 90px;
  }

  /* 한글 주석: TS/슈퍼관리자 헤더는 p-0 이라 !important 로 햄버거 자리를 연다 */
  header.navbar {
    padding-left: 3.4rem !important;
  }

  /* 한글 주석: super-admin.css 가 로고에 margin-left:60px 을 또 줘서 두 칸 밀린다 */
  header.navbar .navbar-brand,
  header.navbar .tss-brand-logo {
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
  }
}

/* ---- ??? ?? ?? ?? ---- */
html[data-tss-theme="dark"] .navbar:not(.navbar-dark) {
    background-color: var(--tss-surface) !important;
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .navbar-brand,
html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .nav-link,
html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-nav-btn {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .nav-link:hover,
html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-nav-btn:hover {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .tss-page-subnav {
    background: var(--tss-surface);
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .tss-breadcrumb .breadcrumb-item {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .tss-breadcrumb .breadcrumb-item.active {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .empty-state {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .empty-state h5 {
    color: var(--tss-text);
}

/* ---- Super Admin ---- */
html[data-tss-theme="dark"] header.navbar.navbar-light {
    background-color: var(--tss-surface) !important;
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] header.navbar.navbar-light .navbar-brand,
html[data-tss-theme="dark"] header.navbar.navbar-light .nav-link {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] header.navbar.navbar-light .tss-lang-switch {
    border-color: var(--tss-border);
    background: var(--tss-surface-muted, rgba(148, 163, 184, 0.12));
}

html[data-tss-theme="dark"] header.navbar.navbar-light .tss-lang-switch__opt {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] header.navbar.navbar-light .tss-lang-switch__opt.is-active {
    color: var(--tss-accent);
    background: var(--tss-accent-soft, rgba(37, 99, 235, 0.2));
}

html[data-tss-theme="dark"] header.navbar.navbar-light .tss-lang-switch__sep {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .sidebar {
    background: var(--tss-surface);
    border-right-color: var(--tss-border);
    scrollbar-color: #475569 transparent;
}

/* 1depth ? ?? ?? (??, ??? ?? ?) */
html[data-tss-theme="dark"] .sidebar .sidebar-main-item > .nav-link {
    color: var(--tss-text);
    font-weight: 500;
}

html[data-tss-theme="dark"] .sidebar .nav-link {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .sidebar .nav-link i {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .sidebar .sidebar-main-item > .nav-link i:not(.fa-chevron-down) {
    color: #94a3b8;
}

html[data-tss-theme="dark"] .sidebar .nav-link .fa-chevron-down {
    color: #64748b;
    opacity: 0.9;
}

html[data-tss-theme="dark"] .sidebar .nav-link:hover {
    color: var(--tss-text);
    background-color: var(--tss-row-hover);
}

html[data-tss-theme="dark"] .sidebar .nav-link.active {
    color: #93c5fd;
    background-color: var(--tss-accent-soft);
}

html[data-tss-theme="dark"] .sidebar .nav-link.active::before {
    background-color: #60a5fa;
}

/* ?? ?? ?? ? ?? ??? ????? ????? ??? ?? */
html[data-tss-theme="dark"] .sidebar .sidebar-main-item > .nav-link[aria-expanded="true"] {
    color: var(--tss-text);
    background-color: rgba(96, 165, 250, 0.06);
}

/* 2depth ? ?? ?? (?? ?? ?? ?? ???? + ?? ??? ??) */
html[data-tss-theme="dark"] .sidebar .nav .collapse {
    background: transparent;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
    margin-left: 22px;
    padding-left: 4px;
    margin-top: 2px;
    margin-bottom: 6px;
}

html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link {
    color: #94a3b8;
    background: transparent;
    font-weight: 400;
}

html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link i {
    color: #64748b;
}

html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link:hover {
    color: var(--tss-text);
    background: rgba(96, 165, 250, 0.08);
}

html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link.active {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.12);
    font-weight: 500;
}

html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link:hover i,
html[data-tss-theme="dark"] .sidebar .nav .collapse .nav-link.active i {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .sidebar::-webkit-scrollbar-thumb {
    background-color: #475569;
}

html[data-tss-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
}

html[data-tss-theme="dark"] .super-admin-main {
    background-color: var(--tss-bg);
}

/* ---- TS Admin ---- */
html[data-tss-theme="dark"] body.app {
    background: var(--tss-bg) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] #main.content {
    background: var(--tss-bg);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .ts-layout {
    background: var(--tss-bg);
}

/* ---- ?? ???? ---- */
html[data-tss-theme="dark"] #global-loading {
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--tss-text);
}

/* ---- ?? ?? ?? ---- */
.tss-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--google-gray-300, #cbd5e1);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tss-theme-toggle:hover {
    background: rgba(96, 165, 250, 0.12);
    border-color: #60a5fa;
    color: #2563eb;
}

.tss-theme-toggle:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

.tss-theme-toggle--on-dark {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

.tss-theme-toggle--on-dark:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}

html[data-tss-theme="dark"] .tss-theme-toggle:not(.tss-theme-toggle--on-dark) {
    border-color: var(--tss-border);
    color: #fbbf24;
}

html[data-tss-theme="dark"] .tss-theme-toggle:not(.tss-theme-toggle--on-dark):hover {
    background: rgba(251, 191, 36, 0.12);
    border-color: #fbbf24;
    color: #fde68a;
}

.tss-theme-toggle-wrap {
    display: flex;
    align-items: center;
}

/* ============================================================
   브랜드 로고 — 투명 EQ 마크 + 워드마크
   ============================================================ */
.tss-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none !important;
    line-height: 1;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.tss-brand-logo:hover {
    text-decoration: none !important;
    opacity: 0.92;
}

.tss-brand-logo__mark {
    width: 114px;
    height: 38px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Installed Android browsers may otherwise darken the already themed logo again.
   Keep the brand artwork out of automatic color conversion; our theme rules below
   still choose the blue original or the white mark for the actual header. */
.tss-brand-logo,
.tss-brand-logo__mark {
    color-scheme: only light;
}

@media (max-width: 380px) {
    .navbar .tss-brand-logo__mark {
        width: 72px;
        height: 24px;
        flex-basis: 72px;
    }
    .navbar .tss-nav-right .nav-link { padding-inline: 6px !important; }
}

.tss-brand-logo--on-dark .tss-brand-logo__mark,
.navbar-dark .tss-brand-logo__mark,
html[data-tss-theme="dark"] .tss-brand-logo__mark,
html[data-tss-theme="dark"] .push-settings-icon img {
    filter: brightness(0) invert(1);
}

@media (min-width: 992px) {
    body.tss-renewal .tss-nav-left .tss-brand-logo__mark,
    body.tss-renewal header.navbar .tss-brand-logo__mark {
        filter: brightness(0) invert(1);
    }
}

@media (max-width: 991.98px) {
    html:not([data-tss-theme="dark"]) .navbar .tss-brand-logo__mark {
        filter: none;
    }
}

.tss-brand-logo__wordmark {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tss-text, #0f172a) !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* 어두운 브랜드 영역은 로고와 워드마크를 흰색으로 표시한다. */
.tss-brand-logo--on-dark .tss-brand-logo__wordmark,
.navbar-dark .tss-brand-logo__wordmark {
    color: #fff !important;
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-brand-logo__wordmark,
html[data-tss-theme="dark"] header.navbar.navbar-light .tss-brand-logo__wordmark {
    color: var(--tss-text) !important;
}

/* ============================================================
   언어 전환 pill — 테마 토글과 비슷한 세그먼트 버튼
   ============================================================ */
.tss-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    height: 2.25rem;
    padding: 0.15rem;
    border: 1px solid var(--tss-border, var(--google-gray-300, #cbd5e1));
    border-radius: 999px;
    background: var(--tss-surface-muted, rgba(148, 163, 184, 0.12));
    box-sizing: border-box;
}

.tss-lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 100%;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--tss-muted, #64748b);
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.tss-lang-switch__opt:hover {
    color: var(--tss-text, #0f172a);
    background: rgba(37, 99, 235, 0.08);
}

.tss-lang-switch__opt.is-active {
    color: var(--tss-accent, #2563eb);
    background: var(--tss-accent-soft, #eff6ff);
    font-weight: 700;
}

.tss-lang-switch__sep {
    color: var(--tss-muted, #94a3b8);
    font-size: 0.7rem;
    line-height: 1;
    user-select: none;
    padding: 0 0.05rem;
}

/* 다크 헤더용 언어 pill */
.tss-lang-switch--on-dark {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.tss-lang-switch--on-dark .tss-lang-switch__opt {
    color: rgba(255, 255, 255, 0.65);
}

.tss-lang-switch--on-dark .tss-lang-switch__opt:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.tss-lang-switch--on-dark .tss-lang-switch__opt.is-active {
    color: #fff;
    background: rgba(37, 99, 235, 0.55);
}

.tss-lang-switch--on-dark .tss-lang-switch__sep {
    color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   헤더 프로필 칩 (일반 사용자 네비만) — 이니셜 + 이름 → /profile
   ============================================================ */
.tss-nav-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 2.25rem;
    padding: 0.15rem 0.65rem 0.15rem 0.2rem;
    border-radius: 999px;
    text-decoration: none !important;
    color: var(--tss-text, #0f172a);
    transition: background 0.15s ease;
}

.tss-nav-profile:hover {
    background: var(--tss-accent-soft, #eff6ff);
    color: var(--tss-text, #0f172a);
    text-decoration: none !important;
}

.tss-nav-profile__avatar {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tss-accent-contrast, #fff);
    background: linear-gradient(135deg, var(--tss-accent, #2563eb) 0%, var(--tss-accent-strong, #1d4ed8) 100%);
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}

.tss-nav-profile__name {
    font-size: 0.8125rem;
    font-weight: 600;
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-nav-profile {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .navbar:not(.navbar-dark) .tss-nav-profile:hover {
    background: rgba(37, 99, 235, 0.18);
}

@media (max-width: 575.98px) {
    .tss-nav-profile__name {
        display: none; /* 좁은 화면: 이니셜만 */
    }

    .tss-nav-profile {
        padding-right: 0.2rem;
    }
}

/* ---- ??? ???? ---- */
html[data-tss-theme="dark"] .dashboard-welcome,
html[data-tss-theme="dark"] .dashboard-menu-panel,
html[data-tss-theme="dark"] .dashboard-menu-card,
html[data-tss-theme="dark"] .dashboard-page .card {
    background-color: var(--tss-surface);
    border-color: var(--tss-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

html[data-tss-theme="dark"] .dashboard-welcome h2,
html[data-tss-theme="dark"] .dashboard-menu-card .dashboard-card-title {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .dashboard-role-badge {
    color: var(--tss-accent);
    background: var(--tss-accent-soft);
}

html[data-tss-theme="dark"] .dashboard-section-title,
html[data-tss-theme="dark"] .dashboard-tab-lead,
html[data-tss-theme="dark"] .dashboard-menu-card .dashboard-card-description {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .dashboard-menu-tabs {
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .dashboard-menu-tabs .nav-link {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .dashboard-menu-tabs .nav-link:hover {
    color: var(--tss-text);
    background: rgba(255, 255, 255, 0.04);
}

html[data-tss-theme="dark"] .dashboard-menu-tabs .nav-link.active {
    color: #93c5fd;
    background: var(--tss-surface);
    border-bottom-color: #60a5fa;
}

html[data-tss-theme="dark"] .dashboard-menu-card:hover {
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
}

html[data-tss-theme="dark"] .dashboard-page .card-header {
    background: var(--tss-section-bg);
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .btn-outline-primary {
    color: #93c5fd;
    border-color: #60a5fa;
    background-color: var(--tss-surface) !important;
    --bs-btn-bg: var(--tss-surface);
}

html[data-tss-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(96, 165, 250, 0.14) !important;
    border-color: #93c5fd;
    color: #bfdbfe;
}

html[data-tss-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ============================================================
   TS ?? ?? (????????? ?)
   ============================================================ */
html[data-tss-theme="dark"] #main .card,
html[data-tss-theme="dark"] #main .card-body,
html[data-tss-theme="dark"] .ts-card,
html[data-tss-theme="dark"] body:not(.tss-renewal) .ts-page-header,
html[data-tss-theme="dark"] .ts-chart-container,
html[data-tss-theme="dark"] .ts-table,
html[data-tss-theme="dark"] .ts-data-table,
html[data-tss-theme="dark"] .ts-toast .toast-body {
    background-color: var(--tss-surface) !important;
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] #main .card .card-header,
html[data-tss-theme="dark"] #main .ts-panel-table > .card-header {
    background-color: var(--tss-surface) !important;
    color: var(--tss-text) !important;
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .ts-page-title,
html[data-tss-theme="dark"] #main .table,
html[data-tss-theme="dark"] .ts-list-table,
html[data-tss-theme="dark"] .ts-table tbody td {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .ts-page-subtitle,
html[data-tss-theme="dark"] .ts-page-lead {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .ts-form-label {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .ts-form-control {
    background-color: #0f172a;
    color: var(--tss-text);
    border-color: var(--tss-border);
}

/* ---- TS ??: ? ???????? (??/??/CRM/?? ?) ---- */
html[data-tss-theme="dark"] body.app #main .deal-info-card,
html[data-tss-theme="dark"] body.app #main .group-info-card,
html[data-tss-theme="dark"] body.app #main .deal-stats-card,
html[data-tss-theme="dark"] body.app #main .deal-table,
html[data-tss-theme="dark"] body.app #main .revenue-section,
html[data-tss-theme="dark"] body.app #main .progress-section,
html[data-tss-theme="dark"] body.app #main .kpi-card,
html[data-tss-theme="dark"] body.app #main .filter-panel,
html[data-tss-theme="dark"] body.app #main .chart-container,
html[data-tss-theme="dark"] body.app #main .stats-card {
    background: var(--ts-surface, var(--tss-surface)) !important;
    color: var(--tss-text) !important;
    border: 1px solid var(--tss-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

html[data-tss-theme="dark"] body.app #main .deal-table th,
html[data-tss-theme="dark"] body.app #main .deal-lines-table thead th {
    background: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .deal-table td,
html[data-tss-theme="dark"] body.app #main .deal-lines-table td {
    background: var(--ts-surface, var(--tss-surface)) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .deal-lines-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.06) !important;
}

html[data-tss-theme="dark"] body.app #main .text-muted,
html[data-tss-theme="dark"] body.app #main .form-label.text-muted,
html[data-tss-theme="dark"] body.app #main .form-text.text-muted,
html[data-tss-theme="dark"] body.app #main small.text-muted {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .deal-value,
html[data-tss-theme="dark"] body.app #main .dashboard-title,
html[data-tss-theme="dark"] body.app #main .kpi-value,
html[data-tss-theme="dark"] body.app #main .filter-panel-title,
html[data-tss-theme="dark"] body.app #main .stats-card h3,
html[data-tss-theme="dark"] body.app #main .stats-card h4,
html[data-tss-theme="dark"] body.app #main .stats-card p {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .kpi-title,
html[data-tss-theme="dark"] body.app #main .kpi-description,
html[data-tss-theme="dark"] body.app #main .kpi-period,
html[data-tss-theme="dark"] body.app #main .kpi-detail-toggle {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .kpi-detail-content,
html[data-tss-theme="dark"] body.app #main .kpi-trend {
    border-top-color: var(--tss-border) !important;
}

/* ??/?? ???? ? ?? ???? */
html[data-tss-theme="dark"] body.app #main .quick-select-btn {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .quick-select-btn:hover,
html[data-tss-theme="dark"] body.app #main .quick-select-btn.active {
    background: rgba(96, 165, 250, 0.22) !important;
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
}

html[data-tss-theme="dark"] body.app #main .sales-dashboard-toggle {
    background: var(--tss-surface-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .sales-dashboard-toggle .btn-tab {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] body.app #main .sales-dashboard-toggle .btn-tab.active {
    background: #2563eb !important;
    color: #fff !important;
}

html[data-tss-theme="dark"] body.app #main .segmented {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .segmented button {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] body.app #main .segmented button.active {
    background: #2563eb !important;
    color: #fff !important;
}

html[data-tss-theme="dark"] body.app #main .filter-panel-header {
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .quick-select-group {
    border-bottom-color: var(--tss-border) !important;
}

/* ?????CRM */
html[data-tss-theme="dark"] body.app #main .note-content {
    background: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border: 1px solid var(--tss-border);
}

html[data-tss-theme="dark"] body.app #main .note-content :is(p, li, span, div, td, th),
html[data-tss-theme="dark"] body.app #main .note-content-html :is(p, li, span, div) {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .note-content [style*="color"],
html[data-tss-theme="dark"] body.app #main .note-content-html [style*="color"] {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .attachment-drop-zone {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] body.app #main .attachment-pending-list .attachment-item {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body.app #main #nextActionsTable,
html[data-tss-theme="dark"] body.app #main #nextActionsTable th,
html[data-tss-theme="dark"] body.app #main #nextActionsTable td {
    background: var(--tss-surface) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main #nextActionsTable thead th {
    background: var(--tss-section-bg) !important;
}

html[data-tss-theme="dark"] body.app #main .next-action-row-expanded {
    background: var(--tss-section-bg) !important;
}

/* TS ???????? ?? */
html[data-tss-theme="dark"] body.app #main .badge.bg-secondary,
html[data-tss-theme="dark"] body.app #main .badge.bg-light,
html[data-tss-theme="dark"] body.app #main span.badge.bg-secondary {
    background-color: #475569 !important;
    color: #e2e8f0 !important;
}

html[data-tss-theme="dark"] body.app #main .badge.bg-warning.text-dark {
    color: #1e293b !important;
}

html[data-tss-theme="dark"] body.app #main .bg-light {
    background-color: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .list-group-item-light {
    background-color: var(--tss-surface-muted) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .status-badge.status-draft,
html[data-tss-theme="dark"] body.app #main .status-draft {
    background: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .status-badge.status-active,
html[data-tss-theme="dark"] body.app #main .status-active {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

html[data-tss-theme="dark"] body.app #main .status-badge.status-pending,
html[data-tss-theme="dark"] body.app #main .status-pending {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #fcd34d !important;
}

html[data-tss-theme="dark"] body.app #main .status-badge.status-closed,
html[data-tss-theme="dark"] body.app #main .status-closed {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] body.app #main .status-badge.status-canceled,
html[data-tss-theme="dark"] body.app #main .status-canceled {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] body.app #main .deal-type-sale {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] body.app #main .deal-type-buy {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] body.app #main .completion-progress,
html[data-tss-theme="dark"] body.app #main .progress {
    background: var(--tss-surface-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .timeline-item::after {
    background: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .revenue-item {
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .btn-outline-info {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.45);
}

html[data-tss-theme="dark"] body.app #main .btn-outline-info:hover {
    background: rgba(34, 211, 238, 0.12);
    color: #a5f3fc;
}

html[data-tss-theme="dark"] body.app #main .btn-light {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(148, 163, 184, 0.06) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .table > :not(caption) > * > * {
    background-color: var(--ts-surface, var(--tss-surface));
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

/* ??? style="background:#fff" ? TS ??? ?? ?? ?? */
html[data-tss-theme="dark"] body.app #main [style*="background: #fff"],
html[data-tss-theme="dark"] body.app #main [style*="background:#fff"],
html[data-tss-theme="dark"] body.app #main [style*="background: white"],
html[data-tss-theme="dark"] body.app #main [style*="background:#ffffff"],
html[data-tss-theme="dark"] body.app #main [style*="background: #ffffff"] {
    background: var(--tss-surface) !important;
    color: var(--tss-text);
}

/* (???? ?? ??? ? sidebar ???? transparent ?? ? surface-muted ?? ??) */

/* ============================================================
   Super Admin ? ??? ???? ??
   ============================================================ */
html[data-tss-theme="dark"] .admin-home-title,
html[data-tss-theme="dark"] .admin-stat-value,
html[data-tss-theme="dark"] .admin-home-panel-title {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .admin-home-subtitle,
html[data-tss-theme="dark"] .admin-stat-label,
html[data-tss-theme="dark"] .admin-home-date-sep {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .admin-stat-card,
html[data-tss-theme="dark"] .admin-home-panel,
html[data-tss-theme="dark"] .stats-card {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

/* Super Admin ? dashboard-card (?? ?????? ? google-style) */
html[data-tss-theme="dark"] .super-admin-main .dashboard-card {
    background: var(--tss-surface) !important;
    border: 1px solid var(--tss-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .dashboard-card-value,
html[data-tss-theme="dark"] .super-admin-main .dashboard-card-title {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .dashboard-card-description {
    color: var(--tss-muted) !important;
}

/* Super Admin ? card?????? (super-admin.css / ??? inline ??) */
html[data-tss-theme="dark"] .super-admin-main .card,
html[data-tss-theme="dark"] .super-admin-main .card-body {
    background-color: var(--tss-surface) !important;
    color: var(--tss-text);
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .card-header,
html[data-tss-theme="dark"] .super-admin-main .card-header *,
html[data-tss-theme="dark"] .super-admin-main .card-header h5,
html[data-tss-theme="dark"] .super-admin-main .card-header .mb-0 {
    color: var(--tss-text) !important;
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .card-header {
    background-color: var(--tss-section-bg) !important;
}

html[data-tss-theme="dark"] .super-admin-main h1,
html[data-tss-theme="dark"] .super-admin-main h2,
html[data-tss-theme="dark"] .super-admin-main .h2,
html[data-tss-theme="dark"] .super-admin-main .h3 {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .chart-card,
html[data-tss-theme="dark"] .super-admin-main .content-box,
html[data-tss-theme="dark"] .super-admin-main .filter-panel {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

/* ?? ?? ? ??? ??? */
html[data-tss-theme="dark"] .super-admin-main .session-user-table thead th {
    color: var(--tss-muted) !important;
    background: var(--tss-section-bg) !important;
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .session-user-table tbody td {
    color: var(--tss-text);
    border-bottom-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .session-user-name {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .session-count-badge {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

/* Super Admin ? ??? inline ?? ?? catch-all */
html[data-tss-theme="dark"] .super-admin-main [style*="background-color: #f8f9fa"],
html[data-tss-theme="dark"] .super-admin-main [style*="background: #f8f9fa"],
html[data-tss-theme="dark"] .super-admin-main [style*="background-color:#f8f9fa"] {
    background-color: var(--tss-surface-muted) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .admin-home-headline {
    color: #fdba74;
}

html[data-tss-theme="dark"] .admin-home-headline--calm {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .admin-stat-card--link:hover {
    border-color: var(--tss-accent-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

html[data-tss-theme="dark"] .admin-stat-card--link.is-highlight {
    border-color: #f59e0b;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, var(--tss-surface) 100%);
}

html[data-tss-theme="dark"] .admin-home-primary,
html[data-tss-theme="dark"] .admin-home-side-panel {
    background: var(--tss-surface);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .admin-home-kpi-section {
    border-top-color: var(--tss-border);
}

html[data-tss-theme="dark"] .admin-recent-item {
    background: rgba(15, 23, 42, 0.35);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .admin-favorite-tile,
html[data-tss-theme="dark"] .admin-favorite-pick {
    background: rgba(15, 23, 42, 0.35);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .admin-favorite-tile:hover,
html[data-tss-theme="dark"] .admin-favorite-pick:hover {
    background: rgba(96, 165, 250, 0.1);
    border-color: var(--tss-accent-border);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .admin-favorite-pick.is-selected {
    background: rgba(96, 165, 250, 0.16);
    border-color: #60a5fa;
}

html[data-tss-theme="dark"] .admin-favorite-tile-icon {
    background: var(--tss-surface-muted);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .admin-attention-item--warn {
    background: rgba(245, 158, 11, 0.12);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.28);
}

html[data-tss-theme="dark"] .admin-attention-item--info {
    background: rgba(96, 165, 250, 0.1);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.22);
}

html[data-tss-theme="dark"] .admin-recent-item {
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .admin-recent-item:hover {
    background: rgba(96, 165, 250, 0.08);
    border-color: var(--tss-accent-border);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .admin-home-panel-header {
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .admin-home-panel-hint {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .admin-quick-group {
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .admin-quick-group-toggle {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .admin-quick-group-toggle:hover {
    background: rgba(96, 165, 250, 0.08);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .admin-quick-group-icon,
html[data-tss-theme="dark"] .admin-quick-group-chevron {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .admin-quick-group-toggle:hover .admin-quick-group-icon {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .admin-quick-group-count {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.12);
}

html[data-tss-theme="dark"] .admin-quick-links {
    background: rgba(15, 23, 42, 0.35);
}

html[data-tss-theme="dark"] .admin-quick-link {
    color: var(--tss-text) !important;
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .admin-quick-link i:first-child,
html[data-tss-theme="dark"] .admin-quick-link-arrow {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .admin-quick-link:hover {
    background: rgba(96, 165, 250, 0.08);
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .admin-quick-link:hover i:first-child {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .btn-outline-secondary {
    color: var(--tss-muted);
    border-color: var(--tss-border);
    background-color: var(--tss-surface) !important;
    --bs-btn-bg: var(--tss-surface);
}

html[data-tss-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.12) !important;
    color: var(--tss-text);
    border-color: var(--tss-muted);
}

html[data-tss-theme="dark"] .btn-outline-success {
    color: #86efac;
    border-color: #4ade80;
    background-color: var(--tss-surface) !important;
}

html[data-tss-theme="dark"] .btn-outline-success:hover {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #bbf7d0;
    border-color: #86efac;
}

html[data-tss-theme="dark"] .btn-outline-danger {
    color: #fca5a5;
    border-color: #f87171;
    background-color: var(--tss-surface) !important;
}

html[data-tss-theme="dark"] .btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fecaca;
    border-color: #fca5a5;
}

/* ============================================================
   ???? ? ??? UI
   ============================================================ */
html[data-tss-theme="dark"] .bd-page {
    background: var(--bd-bg);
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-card,
html[data-tss-theme="dark"] .bd-page .naver-card.card,
html[data-tss-theme="dark"] .bd-table-panel,
html[data-tss-theme="dark"] .bd-comment-item,
html[data-tss-theme="dark"] .bd-post-content-card,
html[data-tss-theme="dark"] .bd-post-form-card {
    background: var(--bd-surface) !important;
    border-color: var(--bd-border) !important;
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-title,
html[data-tss-theme="dark"] .bd-page .naver-title.bd-title {
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-like-btn,
html[data-tss-theme="dark"] .bd-action-btn-ghost,
html[data-tss-theme="dark"] .bd-badge:not(.bd-badge-hot):not(.bd-badge-best) {
    background: var(--bd-surface) !important;
    color: var(--bd-muted);
    border-color: var(--bd-border);
}

html[data-tss-theme="dark"] .bd-like-btn:hover,
html[data-tss-theme="dark"] .bd-action-btn-ghost:hover {
    background: rgba(96, 165, 250, 0.08) !important;
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.06);
}

html[data-tss-theme="dark"] .bd-poll-option {
    background: var(--bd-surface-muted, #172033);
    border-color: var(--bd-border);
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-poll-option:hover {
    background: var(--bd-surface) !important;
    border-color: #60a5fa;
}

html[data-tss-theme="dark"] .bd-page .comment-section {
    border-color: var(--bd-border);
}

/* ============================================================
   ???? ? ??????????
   ============================================================ */
html[data-tss-theme="dark"] .tickets-page,
html[data-tss-theme="dark"] .wb-page {
    background: var(--tss-bg);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-stat-card,
html[data-tss-theme="dark"] .wb-panel {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-tss-theme="dark"] .tickets-page-title,
html[data-tss-theme="dark"] .tickets-stat-card__value,
html[data-tss-theme="dark"] .wb-page-title {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-stat-card__label,
html[data-tss-theme="dark"] .wb-page-lead {
    color: var(--tss-muted);
}

/* ============================================================
   Bootstrap ?? ? ?????????????
   ============================================================ */
html[data-tss-theme="dark"] .nav-tabs {
    border-bottom-color: var(--tss-border);
}

html[data-tss-theme="dark"] .nav-tabs .nav-link {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .nav-tabs .nav-link:hover {
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--tss-surface);
    color: #93c5fd;
    border-color: var(--tss-border) var(--tss-border) var(--tss-surface);
}

html[data-tss-theme="dark"] .page-link {
    background-color: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .page-link:hover {
    background-color: rgba(96, 165, 250, 0.1);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .page-item.active .page-link {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

html[data-tss-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--tss-surface-muted);
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .accordion-item {
    background: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .accordion-button {
    background: var(--tss-section-bg);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .accordion-button:not(.collapsed) {
    background: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .accordion-body {
    background: var(--tss-surface);
    color: var(--tss-text);
}

/* ============================================================
   ?? ??? ? ?? ??
   ============================================================ */
html[data-tss-theme="dark"] .wb-post-card {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .wb-post-card:hover {
    border-color: var(--tss-accent-border);
    box-shadow: var(--tss-shadow-md);
}

html[data-tss-theme="dark"] .wb-post-card__title a {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .wb-post-card__title a:hover {
    color: #bfdbfe;
}

html[data-tss-theme="dark"] .wb-post-meta {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .wb-post-card__footer {
    border-top-color: var(--tss-border);
}

html[data-tss-theme="dark"] .wb-section-title {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .wb-btn-ghost,
html[data-tss-theme="dark"] .wb-action-btn--primary,
html[data-tss-theme="dark"] .wb-action-btn--danger {
    background: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .wb-action-btn--primary {
    color: #93c5fd;
    border-color: #60a5fa;
}

html[data-tss-theme="dark"] .wb-action-btn--danger {
    color: #fca5a5;
    border-color: #f87171;
}

/* ============================================================
   ??? ? naver ?????? ???
   ============================================================ */
html[data-tss-theme="dark"] body.naver-style.bd-page,
html[data-tss-theme="dark"] .bd-page {
    background: var(--bd-bg) !important;
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-page .naver-card.card,
html[data-tss-theme="dark"] .bd-card,
html[data-tss-theme="dark"] .bd-table-panel,
html[data-tss-theme="dark"] .bd-post-content-card,
html[data-tss-theme="dark"] .bd-post-form-card {
    background: var(--bd-surface) !important;
    border-color: var(--bd-border) !important;
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-table thead th,
html[data-tss-theme="dark"] .bd-list-table thead th {
    background: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .bd-table tbody td,
html[data-tss-theme="dark"] .bd-list-table tbody td,
html[data-tss-theme="dark"] .naver-table tbody td {
    background: var(--bd-surface) !important;
    color: var(--bd-text) !important;
    border-color: var(--bd-border) !important;
}

html[data-tss-theme="dark"] .bd-table tbody tr:hover td,
html[data-tss-theme="dark"] .bd-list-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.06) !important;
}

html[data-tss-theme="dark"] .bd-link {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .bd-page .comment-section {
    background: var(--bd-surface);
    border-color: var(--bd-border);
}

html[data-tss-theme="dark"] .naver-card .card-body {
    color: var(--bd-text);
}

/* ??? ????? ? detail.html ??? ??TinyMCE HTML ?? */
html[data-tss-theme="dark"] body.naver-style.bd-page {
    background: var(--bd-bg) !important;
}

html[data-tss-theme="dark"] .bd-page .naver-title {
    color: var(--bd-text) !important;
}

html[data-tss-theme="dark"] .bd-page .naver-meta,
html[data-tss-theme="dark"] .bd-page .bd-post-meta {
    color: var(--bd-muted) !important;
}

html[data-tss-theme="dark"] .bd-page .breadcrumb {
    background: var(--bd-surface) !important;
    color: var(--bd-muted);
}

html[data-tss-theme="dark"] .bd-page .breadcrumb-item a {
    color: #93c5fd;
}

html[data-tss-theme="dark"] .bd-page .breadcrumb-item.active {
    color: var(--bd-muted);
}

html[data-tss-theme="dark"] .bd-page .naver-content,
html[data-tss-theme="dark"] .bd-page .comment-content {
    color: var(--bd-text) !important;
}

html[data-tss-theme="dark"] .bd-page .naver-content :is(p, li, ol, ul, td, th, blockquote, figcaption, dd, dt, pre, div, span),
html[data-tss-theme="dark"] .bd-page .comment-content :is(p, li, ol, ul, td, th, blockquote, div, span) {
    color: var(--bd-text) !important;
}

html[data-tss-theme="dark"] .bd-page .naver-content :is(h1, h2, h3, h4, h5, h6, strong, b),
html[data-tss-theme="dark"] .bd-page .comment-content :is(h1, h2, h3, h4, h5, h6, strong, b) {
    color: var(--bd-text) !important;
}

/* TinyMCE ? ??? ??? color ??? ???? */
html[data-tss-theme="dark"] .bd-page .naver-content [style*="color"],
html[data-tss-theme="dark"] .bd-page .comment-content [style*="color"] {
    color: var(--bd-text) !important;
}

html[data-tss-theme="dark"] .bd-page .naver-content a:not(.btn),
html[data-tss-theme="dark"] .bd-page .comment-content a:not(.btn) {
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .bd-page .comment-author {
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .bd-page .bd-post-body-divider {
    border-color: var(--bd-border) !important;
    opacity: 1;
}

/* ?? ????? */
html[data-tss-theme="dark"] .bd-page .bd-comment {
    background: var(--bd-surface) !important;
    border-color: var(--bd-border) !important;
    color: var(--bd-text);
}

html[data-tss-theme="dark"] .bd-page .bd-comment.is-level-1 {
    background: rgba(96, 165, 250, 0.06) !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment.is-level-2 {
    background: rgba(251, 191, 36, 0.08) !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn {
    background: var(--tss-surface-muted, #172033) !important;
    border-color: var(--bd-border) !important;
    color: var(--bd-text) !important;
    box-shadow: none !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn:hover,
html[data-tss-theme="dark"] .bd-page .bd-comment-btn:focus {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: #475569 !important;
    color: var(--bd-text) !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn-primary {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn-primary:hover,
html[data-tss-theme="dark"] .bd-page .bd-comment-btn-primary:focus {
    background: rgba(96, 165, 250, 0.22) !important;
    color: #bfdbfe !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn-warning {
    background: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    color: #fcd34d !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn-success {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #86efac !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-btn-danger:hover,
html[data-tss-theme="dark"] .bd-page .bd-comment-btn-danger:focus {
    background: rgba(248, 113, 113, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] .bd-page .bd-comment-actions .bd-like-btn.is-liked {
    background: rgba(248, 113, 113, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] .bd-page .comment-section .form-control {
    background-color: #0f172a;
    color: var(--bd-text);
    border-color: var(--bd-border);
}

html[data-tss-theme="dark"] .bd-page .bd-comment-reply::before,
html[data-tss-theme="dark"] .bd-page .bd-comment-replies::before {
    background: rgba(148, 163, 184, 0.25);
}

/* ============================================================
   ???? ? ??????? ??
   ============================================================ */
html[data-tss-theme="dark"] .tickets-search,
html[data-tss-theme="dark"] .tickets-form {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-page-title {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-stat-card__label {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .tickets-stat-card__value {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-page .comment {
    background: var(--tss-surface) !important;
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-page .comment .author {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .tickets-page .comment .date {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .tickets-table tbody td.tickets-actions-cell {
    background: var(--tss-surface);
}

html[data-tss-theme="dark"] .tickets-table tbody tr:hover td.tickets-actions-cell {
    background: rgba(96, 165, 250, 0.06);
}

html[data-tss-theme="dark"] .tickets-table thead th.col-actions {
    background: var(--tss-section-bg);
}

/* ============================================================
   ?? ?? ? ???????? ??
   ============================================================ */
html[data-tss-theme="dark"] .container.py-4 > h2,
html[data-tss-theme="dark"] .container > h2 {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .btn-view:not(.active) {
    background: var(--tss-surface) !important;
    color: #93c5fd !important;
    border-color: #60a5fa !important;
}

html[data-tss-theme="dark"] .btn-view.active {
    background: #2563eb !important;
    color: #fff !important;
}

html[data-tss-theme="dark"] .form-section {
    background: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .form-section h6 {
    color: var(--tss-text);
    border-bottom-color: var(--tss-border);
}

/* FullCalendar ???? */
html[data-tss-theme="dark"] .fc {
    --fc-border-color: var(--tss-border);
    --fc-page-bg-color: var(--tss-surface);
    --fc-neutral-bg-color: var(--tss-surface-muted);
    --fc-neutral-text-color: var(--tss-muted);
    --fc-today-bg-color: rgba(96, 165, 250, 0.12);
    --fc-list-event-hover-bg-color: rgba(96, 165, 250, 0.1);
}

html[data-tss-theme="dark"] .fc .fc-scrollgrid,
html[data-tss-theme="dark"] .fc .fc-scrollgrid-section-body td,
html[data-tss-theme="dark"] .fc .fc-daygrid-day-frame,
html[data-tss-theme="dark"] .fc .fc-timegrid-slot,
html[data-tss-theme="dark"] .fc .fc-list-day-cushion,
html[data-tss-theme="dark"] .fc .fc-list-event {
    background: var(--tss-surface);
}

html[data-tss-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-tss-theme="dark"] .fc .fc-daygrid-day-number,
html[data-tss-theme="dark"] .fc .fc-toolbar-title,
html[data-tss-theme="dark"] .fc .fc-list-event-title,
html[data-tss-theme="dark"] .fc .fc-list-event-time {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .fc .fc-button-primary {
    background-color: #2563eb;
    border-color: #2563eb;
}

html[data-tss-theme="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
html[data-tss-theme="dark"] .fc .fc-button-primary:not(:disabled):active {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

html[data-tss-theme="dark"] .fc .fc-button-primary:disabled {
    background-color: var(--tss-surface-muted);
    border-color: var(--tss-border);
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] #calendar .fc-theme-standard td,
html[data-tss-theme="dark"] #calendar .fc-theme-standard th {
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .modal-content .list-group-item {
    background: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-border);
}

/* ============================================================
   ?6 Refix ? layout ??? ??? ? TS ?? ? Super Admin ??
   ============================================================ */

/* ?? ??? ? ?? ?? ?? ?? */
.tss-standalone-toolbar {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

html[data-tss-theme="dark"] .login-container,
html[data-tss-theme="dark"] .register-container,
html[data-tss-theme="dark"] .profile-card,
html[data-tss-theme="dark"] .denied-container {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}

html[data-tss-theme="dark"] .login-title,
html[data-tss-theme="dark"] .profile-card h2 {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .login-subtitle,
html[data-tss-theme="dark"] .login-footer-text {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .profile-card .form-control[readonly],
html[data-tss-theme="dark"] .profile-card .form-control[disabled] {
    background: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
}

/* ?? ??? */
html[data-tss-theme="dark"] .error-container {
    background: var(--tss-bg) !important;
}

html[data-tss-theme="dark"] .error-card {
    background: var(--tss-surface) !important;
    color: var(--tss-text);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
}

html[data-tss-theme="dark"] .error-message,
html[data-tss-theme="dark"] .error-card details summary {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .error-code,
html[data-tss-theme="dark"] .error-icon {
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] .error-card details .bg-light,
html[data-tss-theme="dark"] .error-card pre {
    background: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border: 1px solid var(--tss-border);
}

/* Super Admin ? alert-card ? ?? ?? */
html[data-tss-theme="dark"] .super-admin-main .alert-card.error {
    background-color: var(--tss-alert-danger-bg) !important;
    color: var(--tss-alert-danger-text) !important;
    border-left-color: #f87171;
}

html[data-tss-theme="dark"] .super-admin-main .alert-card.warning {
    background-color: var(--tss-alert-warning-bg) !important;
    color: var(--tss-alert-warning-text) !important;
    border-left-color: #fbbf24;
}

html[data-tss-theme="dark"] .super-admin-main .list-group-item,
html[data-tss-theme="dark"] .super-admin-main .nav-tabs .nav-link {
    background: transparent;
    color: var(--tss-muted);
    border-color: var(--tss-border);
}

/*
 * 관리자 검색 자동완성은 아래 폼 위에 떠 있는 독립 표면이다.
 * 일반 목록을 투명하게 만드는 위 규칙을 상속하면 다크모드에서 뒤쪽 라벨과 입력값이
 * 비쳐 결과가 겹쳐 보이므로, 거래처·사용자·부서 검색 팝업은 양 테마 모두 불투명하게 고정한다.
 */
.super-admin-main .tss-floating-search-results {
    background: var(--tss-surface) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
    box-shadow: var(--tss-shadow-md) !important;
    isolation: isolate;
}

.super-admin-main .tss-floating-search-results > .list-group-item {
    background: var(--tss-surface) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

.super-admin-main .tss-floating-search-results > .list-group-item-action:hover,
.super-admin-main .tss-floating-search-results > .list-group-item-action:focus,
.super-admin-main .tss-floating-search-results > .list-group-item-action.active,
.super-admin-main .tss-floating-search-results > .list-group-item-action[aria-selected="true"] {
    background: var(--tss-row-hover) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .nav-tabs .nav-link.active {
    background: var(--tss-surface);
    color: var(--tss-text);
    border-color: var(--tss-border) var(--tss-border) var(--tss-surface);
}

html[data-tss-theme="dark"] .super-admin-main [style*="background: #fff"],
html[data-tss-theme="dark"] .super-admin-main [style*="background:#fff"],
html[data-tss-theme="dark"] .super-admin-main [style*="background: white"],
html[data-tss-theme="dark"] .super-admin-main [style*="background:#ffffff"],
html[data-tss-theme="dark"] .super-admin-main [style*="background: #ffffff"] {
    background: var(--tss-surface) !important;
    color: var(--tss-text) !important;
}

/* TS ?? ? ???? ? CRM ? ??? ? ??? inline style ?? ???? */
html[data-tss-theme="dark"] body.app #main .code-box,
html[data-tss-theme="dark"] body.app #main .mail-box,
html[data-tss-theme="dark"] body.app #main .template-preview-box,
html[data-tss-theme="dark"] body.app #main .source-radio-wrap,
html[data-tss-theme="dark"] body.app #main .ux-guide,
html[data-tss-theme="dark"] body.app #main .template-helper-box,
html[data-tss-theme="dark"] body.app #main .compose-section,
html[data-tss-theme="dark"] body.app #main .contact-apply-toolbar,
html[data-tss-theme="dark"] body.app #main .lookup-results,
html[data-tss-theme="dark"] body.app #main .ab-dual-wrap,
html[data-tss-theme="dark"] body.app #main .ab-dual-col,
html[data-tss-theme="dark"] body.app #main .ab-dual-col__header,
html[data-tss-theme="dark"] body.app #main .mn-form-section,
html[data-tss-theme="dark"] body.app #main .note-content-wrap,
html[data-tss-theme="dark"] body.app #main .party-info-panel,
html[data-tss-theme="dark"] body.app #main .party-contact-panel,
html[data-tss-theme="dark"] body.app #main .party-duplicate-item,
html[data-tss-theme="dark"] body.app #main .party-duplicate-card,
html[data-tss-theme="dark"] body.app #main .attachment-item {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body.app #main .code-box .code-box-header,
html[data-tss-theme="dark"] body.app #main .mail-box .mail-box-header,
html[data-tss-theme="dark"] body.app #main .template-preview-title,
html[data-tss-theme="dark"] body.app #main .compose-section-title {
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .mail-box-body,
html[data-tss-theme="dark"] body.app #main .code-box-body,
html[data-tss-theme="dark"] body.app #main .template-preview-body,
html[data-tss-theme="dark"] body.app #main .mail-subtitle,
html[data-tss-theme="dark"] body.app #main .ux-guide,
html[data-tss-theme="dark"] body.app #main .pre-wrap-small {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .pre-wrap-small {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app #main .lookup-item {
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body.app #main .lookup-item:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

html[data-tss-theme="dark"] body.app #main .selected-badge,
html[data-tss-theme="dark"] body.app #main .rc-chip,
html[data-tss-theme="dark"] body.app #main .selection-count-badge {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-tss-theme="dark"] body.app #main .validation-chip.ok {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}

html[data-tss-theme="dark"] body.app #main .validation-chip.warn {
    background: rgba(248, 113, 113, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}

/* TS ?? ? ??? ?? ?? (--ab-* ??? ?? ?? ??) */
html[data-tss-theme="dark"] #modalRecipientConfig {
    --ab-bg: var(--tss-bg);
    --ab-surface: var(--tss-surface);
    --ab-border: var(--tss-border);
    --ab-text: var(--tss-text);
    --ab-muted: var(--tss-muted);
    --ab-accent-soft: rgba(96, 165, 250, 0.14);
}

html[data-tss-theme="dark"] #modalRecipientConfig .modal-body {
    background: var(--tss-bg) !important;
}

html[data-tss-theme="dark"] #modalRecipientConfig .modal-header,
html[data-tss-theme="dark"] #modalRecipientConfig .modal-footer,
html[data-tss-theme="dark"] #modalRecipientConfig .card-header,
html[data-tss-theme="dark"] #modalRecipientConfig .alert.alert-light {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] #modalRecipientConfig .nav-tabs .nav-link {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] #modalRecipientConfig .nav-tabs .nav-link.active {
    color: var(--tss-text) !important;
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) var(--tss-border) var(--tss-surface) !important;
}

/* TSS ?? ?? ? TS/DOC 3-Tier ?? (super-admin) */
html[data-tss-theme="dark"] .super-admin-main .tss-perm-panel,
html[data-tss-theme="dark"] .super-admin-main .tss-user-panel,
html[data-tss-theme="dark"] .super-admin-main .ts-tier-card,
html[data-tss-theme="dark"] .super-admin-main .org-tree-container,
html[data-tss-theme="dark"] .super-admin-main .tss-meta-block,
html[data-tss-theme="dark"] .super-admin-main .tss-user-chip {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .tss-perm-panel .card-header,
html[data-tss-theme="dark"] .super-admin-main .tss-user-panel .card-header {
    background: var(--tss-section-bg) !important;
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .ts-tier-card.active-tier {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) !important;
}

html[data-tss-theme="dark"] .super-admin-main .ts-tier-card .text-muted,
html[data-tss-theme="dark"] .super-admin-main .dash-perm-section-title {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .ts-tier-card strong,
html[data-tss-theme="dark"] .super-admin-main .ts-tier-card .fw-bold {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .dash-perm-action-bar {
    background: var(--tss-surface-muted) !important;
    border-top-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-dept-row:hover,
html[data-tss-theme="dark"] .super-admin-main .org-tree-user-row:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-dept-row,
html[data-tss-theme="dark"] .super-admin-main .org-tree-user-row {
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-toggle {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-held-chip {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

/* TSS ?? ?? ? ?? ?? ?? ?? */
html[data-tss-theme="dark"] .super-admin-main .tss-held-perm-badge {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tss-meta-block .meta-label,
html[data-tss-theme="dark"] .super-admin-main #dashHeldSummaryLine {
    color: var(--tss-muted) !important;
}

/* TS ?? ??? (ts-admin /admin/ts/permissions) */
html[data-tss-theme="dark"] body.app #main .tier-card,
html[data-tss-theme="dark"] body.app #main .user-search-box,
html[data-tss-theme="dark"] body.app #main #searchResultList,
html[data-tss-theme="dark"] body.app #main .permission-info-card {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body.app #main .tier-card.active {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: #60a5fa !important;
}

html[data-tss-theme="dark"] body.app #main .tier-desc,
html[data-tss-theme="dark"] body.app #main .tier-details {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .tier-title {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .search-result-item {
    border-bottom-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] body.app #main .search-result-item:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

/* TS ??? ??? ?? */
html[data-tss-theme="dark"] body.app .navbar-toggler {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] body.app .navbar-toggler:hover {
    background: var(--tss-surface-muted) !important;
}

/* TS ???? ? ?? ?? ? KPI (inline style ??) */
html[data-tss-theme="dark"] body.app #main .period-btn,
html[data-tss-theme="dark"] body.app #main .sr-quick-select-btn {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .period-btn:hover,
html[data-tss-theme="dark"] body.app #main .sr-quick-select-btn:hover,
html[data-tss-theme="dark"] body.app #main .period-btn.active,
html[data-tss-theme="dark"] body.app #main .sr-quick-select-btn.active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #fff !important;
}

html[data-tss-theme="dark"] body.app #main .custom-date-range {
    background: var(--tss-surface) !important;
    border: 1px solid var(--tss-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28) !important;
}

html[data-tss-theme="dark"] body.app #main .dashboard-title {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .deal-type-tabs .nav-link {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] body.app #main .deal-type-tabs .nav-link.active,
html[data-tss-theme="dark"] body.app #main .deal-type-tabs .nav-link:hover {
    color: #93c5fd;
}

html[data-tss-theme="dark"] body.app #main .kpi-card .card-title,
html[data-tss-theme="dark"] body.app #main .kpi-card .card-change {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .kpi-card .card-value {
    color: var(--tss-text) !important;
}

/* TS ?????CRM ? ??? inline #f8f9fa ?? ?? */
html[data-tss-theme="dark"] body.app #main .year-select-area,
html[data-tss-theme="dark"] body.app #main .total-row,
html[data-tss-theme="dark"] body.app #main .note-content,
html[data-tss-theme="dark"] body.app #main .timeline-note-input .card,
html[data-tss-theme="dark"] body.app #main .timeline-note-input .card-body {
    background-color: var(--tss-section-bg) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] body.app #main #yearSummary,
html[data-tss-theme="dark"] body.app #main .year-select-area .text-muted,
html[data-tss-theme="dark"] body.app #main .year-select-area .form-label {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] body.app #main .year-select-area .form-label.fw-bold,
html[data-tss-theme="dark"] body.app #main .card-body .form-label.fw-bold {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] body.app #main .total-row td,
html[data-tss-theme="dark"] body.app #main .total-row th {
    color: var(--tss-text) !important;
    font-weight: 700;
}

html[data-tss-theme="dark"] body.app #main [style*="background-color: #f8f9fa"],
html[data-tss-theme="dark"] body.app #main [style*="background-color:#f8f9fa"],
html[data-tss-theme="dark"] body.app #main [style*="background: #f8f9fa"],
html[data-tss-theme="dark"] body.app #main [style*="background:#f8f9fa"] {
    background-color: var(--tss-surface-muted) !important;
    color: var(--tss-text) !important;
}

/* ============================================================
   ??? ?? (?????) ? categories / permissions
   ????fragment inline #fff ? tss-theme ? ?? ? !important
   ============================================================ */
html[data-tss-theme="dark"] .super-admin-main .doc-perm-page {
    --doc-perm-border: var(--tss-border);
    --doc-perm-surface: var(--tss-surface-muted);
}

/* ???2? ???? ? ? ?? ?? */
html[data-tss-theme="dark"] .super-admin-main .doc-fm-panel,
html[data-tss-theme="dark"] .super-admin-main .doc-admin-split,
html[data-tss-theme="dark"] .super-admin-main .doc-admin-split-right,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-workspace-card,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-workspace-card > .card-body,
html[data-tss-theme="dark"] .super-admin-main .doc-org-panel,
html[data-tss-theme="dark"] .super-admin-main .org-tree-container,
html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-wrap,
html[data-tss-theme="dark"] .super-admin-main .search-result-list,
html[data-tss-theme="dark"] .super-admin-main .dept-tree-panel,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-details[open],
html[data-tss-theme="dark"] .super-admin-main .doc-fm-details-body,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-check-card,
html[data-tss-theme="dark"] .super-admin-main .doc-wf-step:not(.is-active) {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

/* muted ?? (????? ???? ??) */
html[data-tss-theme="dark"] .super-admin-main .doc-admin-split-left,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-page .doc-admin-split-left,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-panel-header,
html[data-tss-theme="dark"] .super-admin-main .doc-admin-split-left .doc-fm-panel-header,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-right-header,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-hints,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-workspace-card > .card-header,
html[data-tss-theme="dark"] .super-admin-main .doc-org-panel .card-header,
html[data-tss-theme="dark"] .super-admin-main .doc-org-action-bar,
html[data-tss-theme="dark"] .super-admin-main .doc-admin-workflow,
html[data-tss-theme="dark"] .super-admin-main .doc-cat-setup-add,
html[data-tss-theme="dark"] .super-admin-main .perm-grant-panel,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-form-wrap,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-details:not([open]),
html[data-tss-theme="dark"] .super-admin-main .selected-grantee-bar,
html[data-tss-theme="dark"] .super-admin-main .search-result-section,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-empty-panel {
    background: var(--tss-section-bg) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .doc-cat-setup-edit {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-subfolder-panel {
    background: var(--tss-section-bg) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-admin-workflow {
    background: var(--tss-section-bg) !important;
}

/* ????? ??? */
html[data-tss-theme="dark"] .super-admin-main .doc-fm-title,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-right-header .doc-perm-cat-title,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-col-label,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-hints-summary,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-details-summary,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-check-label,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-matrix-table .perm-target-name {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-desc,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-code,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-stat,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-stat-inline,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-tree-hint,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-hints-body,
html[data-tss-theme="dark"] .super-admin-main .doc-admin-split-left-label,
html[data-tss-theme="dark"] .super-admin-main .doc-wf-desc,
html[data-tss-theme="dark"] .super-admin-main .doc-perm-matrix-table .perm-target-sub,
html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-table tbody td.col-snap-dept,
html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-table tbody td.col-snap-target .snap-type-tag {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-wf-step {
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .super-admin-main .doc-wf-step.is-active {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-wf-step.is-active .doc-wf-desc {
    color: var(--tss-muted) !important;
}

/* ?? ????? */
html[data-tss-theme="dark"] .super-admin-main .doc-folder-item {
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .doc-folder-item:hover {
    background: rgba(96, 165, 250, 0.08) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-folder-item.active {
    background: rgba(96, 165, 250, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-folder-item.active .fm-picker-icon {
    background: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-folder-item:not(.active) .fm-picker-icon {
    background: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-node-row:hover,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-node.is-root > .doc-fm-node-row {
    background: rgba(96, 165, 250, 0.08) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-node-row.is-selected {
    background: rgba(96, 165, 250, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.45) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-icon.is-root {
    background: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-icon.is-child {
    background: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-cat-setup-table tbody tr.is-selected {
    background: rgba(96, 165, 250, 0.14) !important;
}

/* ??? ?? */
html[data-tss-theme="dark"] .super-admin-main .org-tree-dept-row,
html[data-tss-theme="dark"] .super-admin-main .org-tree-user-row {
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-dept-row:hover {
    background: rgba(96, 165, 250, 0.08) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-dept-row.dept-grant-target,
html[data-tss-theme="dark"] .super-admin-main .org-tree-user-row.selected-user {
    background: rgba(96, 165, 250, 0.16) !important;
    color: var(--tss-text) !important;
    box-shadow: inset 3px 0 0 #60a5fa;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-user-row:hover,
html[data-tss-theme="dark"] .super-admin-main .search-result-item:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-toggle,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-tree-toggle {
    background: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-tree-toggle:hover,
html[data-tss-theme="dark"] .super-admin-main .doc-fm-tree-toggle:hover {
    background: rgba(96, 165, 250, 0.12) !important;
}

/* ?????? ?? ? departments.html ?? (?? ??? ? ??? ? ??) */
html[data-tss-theme="dark"] .super-admin-main .tree-container,
html[data-tss-theme="dark"] .super-admin-main .form-section,
html[data-tss-theme="dark"] .super-admin-main .department-form {
    background-color: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .tree-node {
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .tree-node:hover {
    background: var(--tss-row-hover) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-node.selected {
    background: rgba(96, 165, 250, 0.16) !important;
    border-left-color: #60a5fa !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-node-name {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-toggle {
    background-color: var(--tss-surface-muted) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-toggle:hover,
html[data-tss-theme="dark"] .super-admin-main .tree-toggle.expanded {
    background: rgba(96, 165, 250, 0.12) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-children {
    border-left-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-user-node,
html[data-tss-theme="dark"] .super-admin-main .tree-users-empty {
    background: var(--tss-section-bg) !important;
    border-bottom-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .tree-user-node:hover {
    background: var(--tss-row-hover) !important;
}

html[data-tss-theme="dark"] .super-admin-main .tree-user-role {
    background: rgba(148, 163, 184, 0.2) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .dept-member-count {
    background: rgba(148, 163, 184, 0.18) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

/* ??? ?? ?? ? ??? ?? */
html[data-tss-theme="dark"] .super-admin-main .upload-area {
    background-color: var(--tss-accent-soft) !important;
    border-color: var(--tss-accent-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .upload-area:hover,
html[data-tss-theme="dark"] .super-admin-main .upload-area.dragover {
    background-color: var(--tss-accent-soft-hover) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-perm-toolbar,
html[data-tss-theme="dark"] .super-admin-main .org-held-preview,
html[data-tss-theme="dark"] .super-admin-main #docOrgPermList {
    background: var(--tss-section-bg) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main #docOrgGrantedPanel {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .super-admin-main .doc-perm-matrix-table thead th {
    background: var(--tss-section-bg) !important;
    color: var(--tss-muted) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-perm-held-tag {
    color: #4ade80 !important;
}

/* ?? ?? ?? ? ?? ? ?? ? ??? ?? */
html[data-tss-theme="dark"] .super-admin-main .doc-perm-check-card:has(.doc-org-perm-check:checked) {
    background: rgba(96, 165, 250, 0.18) !important;
    border-color: #60a5fa !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .selected-grantee-chip {
    background: rgba(96, 165, 250, 0.14) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    color: var(--tss-text) !important;
}

/* ?? ????? (?? ?? ???) */
html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-hint,
html[data-tss-theme="dark"] .super-admin-main .permission-hint {
    background: rgba(34, 197, 94, 0.12) !important;
    border-left-color: #4ade80 !important;
    color: #86efac !important;
}

html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-table thead th {
    background: var(--tss-section-bg) !important;
    color: var(--tss-muted) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .granted-snapshot-table tbody td {
    color: var(--tss-text);
    border-color: var(--tss-border);
}

html[data-tss-theme="dark"] .super-admin-main .snap-perm-mark {
    color: #4ade80 !important;
}

html[data-tss-theme="dark"] .super-admin-main .snap-perm-mark.is-inherited {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .perm-cell-yes {
    color: #4ade80 !important;
}

html[data-tss-theme="dark"] .super-admin-main .perm-cell-no {
    color: var(--tss-muted) !important;
}

/* ?? ?? ?? */
html[data-tss-theme="dark"] .super-admin-main .org-user-perm-mini.view-on {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-user-perm-mini.dl-on {
    background: rgba(251, 191, 36, 0.18) !important;
    color: #fcd34d !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-user-perm-mini.manage-on {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
}

html[data-tss-theme="dark"] .super-admin-main .org-user-perm-mini.none {
    background: var(--tss-surface-muted) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-details-badge {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-details--root .doc-fm-details-icon {
    background: rgba(96, 165, 250, 0.22) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-details-summary:hover {
    background: rgba(96, 165, 250, 0.08) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-fm-empty-icon {
    background: rgba(96, 165, 250, 0.14) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-perm-col-label {
    border-bottom-color: rgba(96, 165, 250, 0.35) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-perm-org-col {
    border-right-color: var(--tss-border) !important;
}

@keyframes orgRowFlashDark {
    0%   { background: rgba(251, 191, 36, 0.25); }
    100% { background: transparent; }
}

html[data-tss-theme="dark"] .super-admin-main .org-row-flash {
    animation: orgRowFlashDark 1.6s ease-out;
}

/* ??? ? ???? ??? (?? ????? ?? ??) */
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-table tbody td,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-history-table tbody td {
    background-color: var(--tss-surface) !important;
    color: var(--tss-text) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-table thead th,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-history-table thead th {
    background-color: var(--tss-section-bg) !important;
    color: var(--tss-muted) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-table tbody tr:hover td,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-history-table tbody tr:hover td {
    background-color: var(--tss-row-hover) !important;
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-table tbody tr.is-inactive-folder td {
    background-color: var(--tss-surface-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-doc-title {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-doc-filename {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node {
    background: var(--tss-surface) !important;
    border-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-inactive {
    border-left-color: #94a3b8 !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-inactive > .doc-fm-node-row,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-path-only > .doc-fm-node-row,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-inactive .doc-archived-folder-actions {
    opacity: 1 !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-path-only > .doc-fm-node-row {
    background: var(--tss-surface-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-title,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-code {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node.is-path-only .doc-fm-title {
    color: var(--tss-muted) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-meta,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-meta span {
    color: var(--tss-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-icon.is-child {
    background: rgba(96, 165, 250, 0.18) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-node-row.is-selected {
    background: var(--tss-accent-selected) !important;
    border-color: var(--tss-accent-border-soft) !important;
    box-shadow: 0 0 0 1px var(--tss-accent-border-soft) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-filter-tree .doc-fm-count-badge {
    background: var(--tss-accent-selected) !important;
    color: #93c5fd !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-meta .is-warn {
    background: var(--tss-alert-warning-bg) !important;
    border-color: var(--tss-alert-warning-border) !important;
    color: var(--tss-alert-warning-text) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-actions {
    border-top-color: var(--tss-border) !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-actions .btn-outline-success,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-actions .btn-outline-danger,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-actions .btn-outline-success,
html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-actions .btn-outline-danger {
    background-color: var(--tss-surface) !important;
    font-weight: 600;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-actions .btn-outline-success {
    color: #86efac !important;
    border-color: #4ade80 !important;
}

html[data-tss-theme="dark"] .super-admin-main .doc-archived-page .doc-archived-folder-actions .btn-outline-danger {
    color: #fca5a5 !important;
    border-color: #f87171 !important;
}

/* ??? ? ?? ??? data-doc-theme ??? ?? */
html[data-tss-theme="dark"] .doc-lib {
    --doc-surface: var(--tss-surface);
    --doc-bg: var(--tss-bg);
    --doc-text: var(--tss-text);
    --doc-muted: var(--tss-muted);
    --doc-border: var(--tss-border);
    --doc-accent-soft: rgba(96, 165, 250, 0.14);
    --doc-accent-border: rgba(96, 165, 250, 0.35);
}

/* ============================================================
   ???? ? ? ?????(portal-quickmenu) + ???? ?????(portal-*)
   Step2 ? ????????. bizmeka ???? ????. --tss-* ????? ???.
   ============================================================ */

/* --- ??? ???? ??? --- */
.portal-quickmenu {
    position: relative;
}

.portal-quickmenu > .tss-nav-btn.dropdown-toggle::after {
    margin-left: 0.35rem;
    vertical-align: 0.15em;
}

.portal-quickmenu-panel.dropdown-menu {
    min-width: 15.5rem;
    max-width: min(20rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: 0.4rem 0;
    margin-top: 0.35rem;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1050;
}

.portal-quickmenu-item,
.portal-quickmenu-subitem {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.9rem;
    color: var(--tss-text);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
    border: 0;
    background: transparent;
    width: 100%;
}

.portal-quickmenu-item:hover,
.portal-quickmenu-item:focus,
.portal-quickmenu-subitem:hover,
.portal-quickmenu-subitem:focus {
    background: var(--tss-row-hover, var(--tss-surface-muted));
    color: var(--tss-accent);
    text-decoration: none;
}

.portal-quickmenu-item > i,
.portal-quickmenu-subitem > i {
    width: 1.1rem;
    text-align: center;
    color: var(--tss-muted);
    flex-shrink: 0;
}

.portal-quickmenu-item:hover > i,
.portal-quickmenu-subitem:hover > i {
    color: var(--tss-accent);
}

.portal-quickmenu-divider {
    height: 1px;
    margin: 0.35rem 0.75rem;
    background: var(--tss-border);
}

.portal-quickmenu-accordion {
    border-top: 1px solid transparent;
}

.portal-quickmenu-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.9rem;
    border: 0;
    background: transparent;
    color: var(--tss-text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
}

.portal-quickmenu-accordion-btn:hover,
.portal-quickmenu-accordion-btn:focus {
    background: var(--tss-row-hover, var(--tss-surface-muted));
    color: var(--tss-accent);
    outline: none;
}

.portal-quickmenu-accordion-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.portal-quickmenu-accordion-label > i {
    width: 1.1rem;
    text-align: center;
    color: var(--tss-muted);
}

.portal-quickmenu-chevron {
    font-size: 0.75rem;
    color: var(--tss-muted);
    transition: transform 0.15s ease;
}

.portal-quickmenu-accordion-btn:not(.collapsed) .portal-quickmenu-chevron {
    transform: rotate(180deg);
}

.portal-quickmenu-sublist {
    padding: 0.1rem 0 0.25rem;
}

.portal-quickmenu-subitem {
    padding-left: 2.15rem;
    font-size: 0.875rem;
}

/* --- 홈 포털 --- */
/*
 * Step1 임시 폭 조정 — Bootstrap .container를 홈(.portal-home)에만 breakout.
 * Step3: 좌측 사이드바(220px)가 붙으면 본문 가용폭이 줄어들므로
 * 100vw 센터 깨기 대신 main 안 100% + max-width로 재조정.
 */
.portal-home {
    width: 100%;
    max-width: 1480px; /* 사이드바 포함 실측 기준(1440~1920) */
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1.5rem 1.5rem;
}

/* 사이드바 있는 넓은 모니터에서는 조금 더 허용 */
@media (min-width: 1800px) {
    .portal-home {
        max-width: 1600px;
    }
}

@media (min-width: 2400px) {
    .portal-home {
        max-width: 1720px;
    }
}

.portal-home-alerts {
    margin-bottom: 1rem;
}

/* Step1 보정 — 그리드 위 전체폭 인사말 */
.portal-greeting {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tss-text);
    letter-spacing: -0.02em;
}

/* Step6 — 페이지 히어로(문서함 doc-lib-hero 톤). 게시판·차량·요청접수 공용 */
.bd-page-hero {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-md, 10px);
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.bd-page-hero .bd-title {
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--tss-text);
}

.bd-page-hero .help-page-header__main,
.bd-page-hero .help-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bd-page-hero .help-page-header__actions {
    flex-shrink: 0;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .portal-greeting {
        font-size: 1.25rem;
    }
}

/* deprecated: Step1에서 .portal-bento-grid로 교체됨 — HTML 전환 완료 후 잔존 호환용 */
.portal-widget-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

/* 권한과 배치를 분리한 홈포털 영역 레이아웃 */
.portal-widget-layout {
    display: grid;
    gap: 1rem;
}

.portal-widget-zone {
    min-width: 0;
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.portal-widget-zone--profile,
.portal-widget-zone--launcher,
.portal-widget-zone--task,
.portal-widget-zone--notification {
    grid-template-columns: minmax(0, 1fr);
}

.portal-widget-zone--approval {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
}

.portal-widget-zone--work {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 30%), 1fr));
}

/* 요약형 위젯은 같은 기준 높이를 사용한다. 내용이 많은 목록형 위젯은 별도 zone에 둔다. */
.portal-widget-zone--work > .portal-bento-card {
    min-height: 9.25rem;
}

.portal-widget-zone--content {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 45%), 1fr));
}

.portal-bento-card {
    min-width: 0;
    grid-column: span 1;
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-lg);
    box-shadow: var(--tss-shadow-card);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.portal-bento-card--profile {
    min-height: 7.75rem;
}

.portal-bento-card--profile .portal-profile {
    width: 100%;
}

.portal-bento-card--profile .portal-profile-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
}

.portal-bento-card--profile .portal-profile-name,
.portal-bento-card--profile .portal-profile-meta {
    grid-column: 1;
}

.portal-bento-card--profile .portal-profile-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    justify-content: flex-end;
}

/* Bento 카드 안에서 기존 헤더/바디 패딩이 이중으로 쌓이지 않게 조정 */
.portal-bento-card > .portal-widget-header {
    padding: 0 0 0.55rem;
}

.portal-bento-card > .portal-widget-body {
    padding: 0;
    flex: 1 1 auto;
}

@media (max-width: 1199.98px) {
    .portal-widget-zone--approval,
    .portal-widget-zone--work,
    .portal-widget-zone--content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .portal-widget-zone--approval,
    .portal-widget-zone--work,
    .portal-widget-zone--content {
        grid-template-columns: 1fr;
    }

    .portal-bento-card--profile .portal-profile-main {
        display: block;
    }

    .portal-bento-card--profile .portal-profile-actions {
        margin-top: 0.65rem;
        justify-content: flex-start;
    }
}

.portal-widget {
    background: var(--tss-surface);
    border: 1px solid var(--tss-border);
    /* Step12 — 피그마 Widget(rounded-xl ≈ 14px) */
    border-radius: var(--tss-radius-lg, 14px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--tss-shadow-sm);
}

/* deprecated span modifiers — Step1 Bento로 이전 */
.portal-widget--profile {
    grid-column: span 12;
}

.portal-widget--approval {
    grid-column: span 7;
}

.portal-widget--kpi {
    grid-column: span 5;
}

.portal-widget--notify,
.portal-widget--activity {
    grid-column: span 6;
}

.portal-widget--half {
    grid-column: span 6;
}

@media (max-width: 991.98px) {
    .portal-widget--approval,
    .portal-widget--kpi,
    .portal-widget--notify,
    .portal-widget--activity,
    .portal-widget--half {
        grid-column: span 12;
    }
}

.portal-widget-today {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--tss-muted);
}

.portal-widget-today strong {
    margin: 0 0.2rem;
    color: var(--tss-text);
    font-size: 1.15rem;
}

a.portal-kpi-grid--link {
    text-decoration: none;
    color: inherit;
}

a.portal-kpi-grid--link:hover .portal-kpi-card {
    filter: brightness(0.98);
}

.portal-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    /* Step12 — 카드 내부 패딩 ~20px */
    padding: 1.15rem 1.25rem 0.55rem;
    border-bottom: none;
}

.portal-widget-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--tss-text);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.portal-widget-title > i {
    color: var(--tss-accent);
    font-size: 1rem;
}

.portal-widget-link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.8125rem;
    color: var(--tss-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.12s ease;
}

.portal-widget-link > i {
    font-size: 0.75rem;
}

.portal-widget-link:hover {
    color: var(--tss-accent);
    text-decoration: none;
}

.portal-widget-body {
    padding: 0.55rem 1.25rem 1.25rem;
    flex: 1 1 auto;
}

.portal-widget--profile .portal-widget-body {
    padding: 1.25rem;
}

.portal-widget-empty {
    text-align: center;
    color: var(--tss-muted);
    padding: 1.25rem 0.5rem;
    margin: 0;
    font-size: 0.9rem;
}

/* ??? ? ? TS ?? ???? ??? (portal-widget ???) */
.portal-widget--dash .portal-widget-header {
    align-items: center;
}

.portal-dash-carousel-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.portal-dash-carousel-nav[hidden] {
    display: none;
}

.portal-dash-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 6px);
    background: var(--tss-surface);
    color: var(--tss-text);
    cursor: pointer;
    line-height: 1;
}

.portal-dash-carousel-btn:hover:not(:disabled) {
    border-color: var(--tss-accent-border-soft, var(--tss-accent-border));
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
}

.portal-dash-carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.portal-dash-carousel-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    width: 100%;
}

.portal-dash-carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 3.4rem;
    padding: 0.55rem 0.35rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 8px);
    background: var(--tss-surface);
    text-decoration: none;
    color: var(--tss-text);
    transition: border-color 0.12s, background 0.12s;
}

.portal-dash-carousel-item:hover {
    border-color: var(--tss-accent);
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
    text-decoration: none;
}

.portal-dash-carousel-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--tss-accent);
}

.portal-dash-carousel-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    word-break: keep-all;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-tss-theme="dark"] .portal-dash-carousel-btn {
    background: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .portal-dash-carousel-item {
    background: var(--tss-surface);
    border-color: var(--tss-border);
    color: var(--tss-text);
}

html[data-tss-theme="dark"] .portal-dash-carousel-item:hover {
    background: var(--tss-accent-soft);
    border-color: var(--tss-accent-border);
    color: var(--tss-accent);
}

/* ?? ??? */
.portal-profile {
    display: flex;
    align-items: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
}

.portal-avatar {
    position: relative;
}

.portal-avatar .dashboard-profile-wrap,
.portal-avatar .dashboard-profile-placeholder {
    position: relative;
}

/* 온라인 표시점(우측 하단) */
.portal-avatar-online {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #10B981;
    border: 2px solid var(--tss-surface);
    z-index: 3;
}

/* 사진 없을 때 — 그라데이션 이니셜 */
.dashboard-profile-placeholder.portal-avatar-initial {
    background: linear-gradient(135deg, var(--tss-accent) 0%, var(--tss-accent-strong) 100%);
    color: var(--tss-accent-contrast);
    border: none;
}

.portal-avatar-letter {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.portal-profile-main {
    flex: 1 1 12rem;
    min-width: 0;
}

.portal-profile-name {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tss-text);
}

.portal-profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

/* 역할 배지 — 필셰이프 + accent soft */
.portal-profile .dashboard-role-badge {
    margin-bottom: 0;
    border-radius: 999px;
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
    font-weight: 600;
    padding: 0.2rem 0.7rem;
}

.portal-profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

/* 정보변경 버튼과 동일 톤 — a.btn도 줄 높이 맞춤 */
.portal-profile-actions .btn {
    display: inline-flex;
    align-items: center;
}

/* ??????? ??? ??? ?????? ? ???? approval-widget-item ?? ???? */
.portal-approval-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portal-approval-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--tss-border);
    border-left: 3px solid var(--tss-muted);
    border-radius: var(--tss-radius-sm, 8px);
    text-decoration: none;
    color: inherit;
    background: var(--tss-surface);
    transition: background 0.12s ease;
}

.portal-approval-item:hover {
    background: var(--tss-row-hover, var(--tss-surface-muted));
    text-decoration: none;
    color: inherit;
}

.portal-approval-item-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.portal-approval-item-text {
    min-width: 0;
}

/* 전자결재 대기 제목 — 최대 2줄, 초과 시 말줄임 (카드 높이 폭주 방지) */
.portal-approval-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tss-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.portal-approval-item-sub {
    font-size: 0.8rem;
    color: var(--tss-muted);
}

.portal-approval-item-amount {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--tss-text);
    white-space: nowrap;
}

/* KPI — Step12 시맨틱 틴트 배경(좌측 보더 제거) */
.portal-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

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

/* 홈포털 요청접수 — 내 접수 / 처리할 요청 을 같은 칸 안에서 나눈다 */
.portal-ticket-scopes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: 0.85rem;
}

.portal-ticket-scope {
    min-width: 0;
}

/* 담당자용 두 묶음이 함께 보일 때 가운데 경계를 분명하게 표시한다. */
#portalTicketHandleScope:not(.d-none) + #portalTicketMineScope {
    padding-left: 0.85rem;
    border-left: 1px solid var(--tss-border, #d9e2ec);
}

.portal-ticket-scope-label {
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tss-text);
}

/* 결재현황은 기본 4칸. 재무 담당자에게만 확정검토가 붙으면 5칸 */
.portal-bento-card--approval-summary .portal-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.portal-bento-card--approval-summary .portal-kpi-grid--with-review {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .portal-bento-card--approval-summary .portal-kpi-grid,
    .portal-bento-card--approval-summary .portal-kpi-grid--with-review {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .portal-ticket-scopes {
        grid-template-columns: 1fr;
    }

    #portalTicketHandleScope:not(.d-none) + #portalTicketMineScope {
        padding-top: 0.85rem;
        padding-left: 0;
        border-top: 1px solid var(--tss-border, #d9e2ec);
        border-left: 0;
    }
}

@media (max-width: 575.98px) {
    .portal-widget-zone--task .portal-kpi-grid--3 {
        grid-template-columns: 1fr;
    }
}

.portal-kpi-card {
    display: block;
    padding: 0.85rem 0.9rem;
    background: var(--tss-surface-muted);
    border: 1px solid transparent;
    border-radius: var(--tss-radius-md, 10px);
    text-decoration: none;
    color: inherit;
    transition: filter 0.12s ease, border-color 0.12s ease;
}

.portal-kpi-card:hover {
    filter: brightness(0.97);
    text-decoration: none;
    color: inherit;
}

.portal-kpi-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--tss-muted);
    margin-bottom: 0.25rem;
}

.portal-kpi-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--tss-text);
    line-height: 1.15;
}

/* 홈포털 KPI — ‘조회 실패’ 등 상태 문구(숫자 0과 구분) */
.portal-kpi-value.portal-kpi-value--status {
    font-size: 1rem;
    font-weight: 600;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* 대기=warning / 진행=accent / 완료=success / 감사=muted — Step1 토큰화 */
.portal-kpi-card--pending {
    background: color-mix(in srgb, var(--tss-warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--tss-warning) 35%, transparent);
}
.portal-kpi-card--pending .portal-kpi-value {
    color: var(--tss-alert-warning-text);
}
.portal-kpi-card--progress {
    background: color-mix(in srgb, var(--tss-accent) 14%, transparent);
    border-color: var(--tss-accent-border-soft);
}
.portal-kpi-card--progress .portal-kpi-value {
    color: var(--tss-accent-strong);
}
.portal-kpi-card--done {
    background: color-mix(in srgb, var(--tss-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--tss-success) 35%, transparent);
}
.portal-kpi-card--done .portal-kpi-value {
    color: var(--tss-chip-success-text);
}
.portal-kpi-card--alert {
    background: var(--tss-surface-muted);
    border-color: var(--tss-border);
}
.portal-kpi-card--alert .portal-kpi-value {
    color: var(--tss-muted);
}
.portal-kpi-card--review {
    background: color-mix(in srgb, #6366f1 14%, transparent);
    border-color: color-mix(in srgb, #6366f1 35%, transparent);
}
.portal-kpi-card--review .portal-kpi-value {
    color: #4338ca;
}
.portal-kpi-card--overdue {
    background: color-mix(in srgb, var(--tss-danger, #dc2626) 14%, transparent);
    border-color: color-mix(in srgb, var(--tss-danger, #dc2626) 35%, transparent);
}
.portal-kpi-card--overdue .portal-kpi-value {
    color: var(--tss-danger, #dc2626);
}

html[data-tss-theme="dark"] .portal-kpi-card--pending {
    background: color-mix(in srgb, var(--tss-warning) 18%, transparent);
    border-color: color-mix(in srgb, var(--tss-warning) 35%, transparent);
}
html[data-tss-theme="dark"] .portal-kpi-card--pending .portal-kpi-value {
    color: var(--tss-alert-warning-text);
}
html[data-tss-theme="dark"] .portal-kpi-card--progress {
    background: color-mix(in srgb, var(--tss-accent) 18%, transparent);
    border-color: var(--tss-accent-border-soft);
}
html[data-tss-theme="dark"] .portal-kpi-card--progress .portal-kpi-value {
    color: var(--tss-accent-strong);
}
html[data-tss-theme="dark"] .portal-kpi-card--done {
    background: color-mix(in srgb, var(--tss-success) 18%, transparent);
    border-color: color-mix(in srgb, var(--tss-success) 35%, transparent);
}
html[data-tss-theme="dark"] .portal-kpi-card--done .portal-kpi-value {
    color: var(--tss-chip-success-text);
}
html[data-tss-theme="dark"] .portal-kpi-card--overdue {
    background: color-mix(in srgb, var(--tss-danger, #dc2626) 18%, transparent);
    border-color: color-mix(in srgb, var(--tss-danger, #dc2626) 35%, transparent);
}
html[data-tss-theme="dark"] .portal-kpi-card--overdue .portal-kpi-value {
    color: var(--tss-danger, #f87171);
}
html[data-tss-theme="dark"] .portal-kpi-card--alert {
    background: var(--tss-surface-muted);
    border-color: var(--tss-border);
}
html[data-tss-theme="dark"] .portal-kpi-card--alert .portal-kpi-value {
    color: var(--tss-muted);
}
html[data-tss-theme="dark"] .portal-kpi-card--review {
    background: color-mix(in srgb, #818cf8 18%, transparent);
    border-color: color-mix(in srgb, #818cf8 35%, transparent);
}
html[data-tss-theme="dark"] .portal-kpi-card--review .portal-kpi-value {
    color: #c7d2fe;
}

.portal-kpi-error {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--tss-alert-danger-text);
}

/* Step1 — 공지/커뮤니티 구분 뱃지 */
.portal-board-kind {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.portal-board-kind--notice {
    background: color-mix(in srgb, var(--tss-accent) 14%, transparent);
    color: var(--tss-accent-strong);
}
.portal-board-kind--community {
    background: var(--tss-surface-muted);
    color: var(--tss-muted);
}

/* 대시보드 바로가기 — 한 페이지 6개, 화면 폭에 따라 6/3/2열 */
.portal-dash-link-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}
.portal-dash-tabs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.portal-dash-tabs[hidden] {
    display: none;
}
.portal-dash-tab {
    flex: 0 0 auto;
    border: 1px solid var(--tss-border);
    border-radius: 999px;
    background: var(--tss-surface);
    color: var(--tss-muted);
    padding: 0.28rem 0.72rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.portal-dash-tab:hover,
.portal-dash-tab:focus-visible {
    border-color: var(--tss-accent-border-soft);
    color: var(--tss-accent);
}
.portal-dash-tab.is-active {
    border-color: var(--tss-accent);
    background: var(--tss-accent);
    color: #fff;
}
.portal-dash-link-grid a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--tss-radius-sm);
    border: 1px solid var(--tss-border);
    background: var(--tss-surface-muted);
    color: var(--tss-text);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    min-width: 0;
    min-height: 3.25rem;
}
.portal-dash-link-grid a:hover {
    border-color: var(--tss-accent-border-soft);
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
    text-decoration: none;
}
.portal-dash-link-grid a i {
    flex-shrink: 0;
    color: var(--tss-accent);
}
.portal-dash-link-grid a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portal-dash-link-grid a .portal-dash-link-new-tab {
    margin-left:auto; font-size:0.75rem; color:var(--tss-muted);
}

.portal-dash-carousel-page-status {
    min-width: 3.25rem;
    color: var(--tss-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .portal-dash-link-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .portal-dash-link-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .portal-dash-tabs {
        margin-right: -0.25rem;
    }
}

/* 리스트형 위젯 — 박스 → 구분선(divide) */
.portal-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.portal-feed-list--divide {
    gap: 0;
}

.portal-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}

.portal-feed-list--divide .portal-feed-item {
    padding: 0.7rem 0.35rem;
    margin: 0 -0.35rem;
    border-bottom: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 8px);
    transition: background 0.12s ease;
}

.portal-feed-list--divide .portal-feed-item:last-child {
    border-bottom: none;
}

.portal-feed-list--divide .portal-feed-item:hover {
    background: var(--tss-row-hover, var(--tss-surface-muted));
}

a.portal-feed-item:hover {
    text-decoration: none;
    color: inherit;
}

a.portal-feed-item:hover .portal-feed-title {
    color: var(--tss-accent);
}

.portal-feed-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: var(--tss-surface-muted, var(--tss-bg));
    color: var(--tss-muted);
}

.portal-feed-icon--notify,
.portal-feed-icon--info {
    color: var(--tss-alert-info-text, #1D4ED8);
    background: var(--tss-alert-info-bg, #EFF6FF);
}

.portal-feed-icon--warn {
    color: var(--tss-alert-warning-text, #B45309);
    background: var(--tss-alert-warning-bg, #FFFBEB);
}

.portal-feed-icon--activity {
    color: var(--tss-alert-success-text, #137333);
}

/* 활동 — 프로필과 동일 그라데이션 이니셜 */
.portal-feed-avatar {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    margin-top: 0.05rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tss-accent-contrast);
    background: linear-gradient(135deg, var(--tss-accent) 0%, var(--tss-accent-strong) 100%);
    text-transform: uppercase;
    line-height: 1;
}

.portal-feed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.portal-feed-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

/*
  피드형 리스트 제목 공통(공지·커뮤니티 / 문서함 / 알림 / 최근활동).
  긴 제목이 카드·그리드 행 높이를 밀어 올리지 않도록 최대 2줄 말줄임.
  flex 자식에서 line-clamp가 먹히려면 min-width: 0 필요.
 */
.portal-feed-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tss-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.portal-feed-time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--tss-muted);
    white-space: nowrap;
}

.portal-feed-sub {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--tss-muted);
}

html[data-tss-theme="dark"] .portal-quickmenu-panel.dropdown-menu {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   홈포털 전역 사이드바 (Step3) — approval-sidebar 와 공존(슬롯 오버라이드)
   ============================================================ */
:root {
    --tss-header-h: 56px;
    --tss-portal-sidebar-width: 220px;
    --tss-portal-sidebar-top: var(--tss-header-h);
}

/* 모바일 햄버거 — 홈·결재·관리자 화면이 같은 크기·자리를 쓴다 */
.tss-portal-sidebar-toggle,
.tss-mobile-menu-toggle {
    position: fixed;
    top: 0.5rem;
    left: 0.75rem;
    z-index: 1040;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 8px);
    background: var(--tss-surface);
    color: var(--tss-text);
    box-shadow: var(--tss-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.tss-portal-sidebar-toggle:hover,
.tss-mobile-menu-toggle:hover {
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
}

/* 한글 주석: TS/슈퍼관리자 햄버거를 홈 버튼(2.5rem)과 같은 크기로 맞춘다 */
@media (max-width: 991.98px) {
    header.navbar .navbar-toggler {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        top: 0.5rem !important;
        left: 0.75rem !important;
        border-radius: var(--tss-radius-sm, 8px) !important;
        box-sizing: border-box !important;
    }

    header.navbar .navbar-toggler-icon {
        width: 1.15rem !important;
        height: 0.9rem !important;
    }

    header.navbar-dark .navbar-toggler,
    html[data-tss-theme="dark"] body.app header.navbar-dark .navbar-toggler {
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.28) !important;
    }
}

.tss-portal-sidebar {
    background: var(--tss-surface);
    border-right: 1px solid var(--tss-border);
}

.tss-portal-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.65rem 1.25rem;
}

.tss-portal-sidebar__link,
.tss-portal-sidebar__accordion-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--tss-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.tss-portal-sidebar__link i,
.tss-portal-sidebar__accordion-btn i {
    font-size: 1.05rem;
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
}

.tss-portal-sidebar__link:hover,
.tss-portal-sidebar__accordion-btn:hover {
    background: var(--tss-surface-muted, rgba(148, 163, 184, 0.12));
    color: var(--tss-text);
    text-decoration: none;
}

.tss-portal-sidebar__link.is-active,
.tss-portal-sidebar__accordion-btn.is-active {
    background: var(--tss-accent-soft);
    color: var(--tss-accent);
    font-weight: 600;
}

.tss-portal-sidebar__accordion-btn {
    justify-content: space-between;
}

/* 한글 주석: flex 사이드바 안에서 하위 메뉴가 높이 0으로 안 줄어 접히지 않던 것 방지 */
.tss-portal-sidebar__accordion {
    min-height: 0;
}

.tss-portal-sidebar__accordion > .collapse:not(.show) {
    display: none;
}

.tss-portal-sidebar__accordion-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.tss-portal-sidebar__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    line-height: 1;
    transform-origin: center;
    transition: transform 0.15s ease;
}

/* 한글 주석: 리뉴얼 셸의 공통 직계 아이콘 규칙보다 우선해 화살표 상자를 고정한다. */
body .tss-portal-sidebar__accordion-btn > .tss-portal-sidebar__chevron {
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    line-height: 1;
}

.tss-portal-sidebar__chevron::before {
    display: block;
    line-height: 1;
}

.tss-portal-sidebar__accordion-btn:not(.collapsed) .tss-portal-sidebar__chevron,
.tss-portal-sidebar__accordion-btn[aria-expanded="true"] .tss-portal-sidebar__chevron {
    transform: rotate(180deg);
}

.tss-portal-sidebar__sublist {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.15rem 0 0.35rem 0.35rem;
}

.tss-portal-sidebar__sublink {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem 0.4rem 1.6rem;
    border-radius: 8px;
    color: var(--tss-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
}

.tss-portal-sidebar__sublink:hover {
    background: var(--tss-surface-muted, rgba(148, 163, 184, 0.12));
    color: var(--tss-text);
    text-decoration: none;
}

.tss-portal-sidebar__sublink i {
    font-size: 0.95rem;
    width: 1rem;
    text-align: center;
}

/* ≥992px: 고정 좌측 패널 + 본문 여백 (approval-layout 과 동일 패턴) */
@media (min-width: 992px) {
    .tss-portal-sidebar.offcanvas-lg {
        position: fixed !important;
        top: var(--tss-portal-sidebar-top);
        left: 0;
        bottom: 0;
        z-index: 1020;
        width: var(--tss-portal-sidebar-width) !important;
        max-width: var(--tss-portal-sidebar-width) !important;
        transform: none !important;
        visibility: visible !important;
        overflow-y: auto;
        border-right: 1px solid var(--tss-border);
        background: var(--tss-surface);
    }

    .tss-portal-sidebar.offcanvas-lg .offcanvas-body {
        overflow: visible;
    }

    /*
      본문/브레드크럼 오프셋.
      style.css 의 .container { margin: ... !important } 와 싸우지 않도록
      portal 쪽도 !important 를 쓰고, standalone 페이지(> .container 등)도 함께 민다.
      전자결재(.approval-layout-shell)가 있으면 전역 사이드바 자체가 없으므로 여백 미적용.

      한글 주석: Bootstrap .container/.container-fluid 기본이 width:100% 이라
      margin-left(사이드바 220px)만 주면 총폭이 100%+220px 가 되어
      가로 스크롤·우측 색띠(html 배경)가 생긴다. width:auto 로 남은 칸만 쓰게 한다.
    */
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > main.container,
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > .tss-page-subnav,
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > .container,
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > .container-fluid {
        margin-left: var(--tss-portal-sidebar-width) !important;
        width: auto !important;
        max-width: none;
        box-sizing: border-box;
    }

    /* 프로필은 카드 중앙정렬이라 margin-left 대신 body 패딩으로 가용폭만 줄임 */
    body.personal-profile-page:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) {
        padding-left: var(--tss-portal-sidebar-width);
    }

    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > main.container,
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > .container,
    body:has(.tss-portal-sidebar):not(:has(.approval-layout-shell)) > .container-fluid {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (max-width: 991.98px) {
    /* 한글 주석: 패널이 backdrop(1040)보다 뒤에 있으면 메뉴를 눌러도 창만 닫힌다 */
    .tss-portal-sidebar.offcanvas-lg,
    .tss-portal-sidebar.offcanvas {
        z-index: 1046;
        width: min(18rem, 85vw);
    }

    body:has(#tssPortalSidebar.show) .tss-portal-sidebar-toggle,
    body:has(#approvalSidebarNav.show) .tss-mobile-menu-toggle {
        visibility: hidden;
        pointer-events: none;
    }
}

/* ============================================================
   전자결재 — page-subnav + main 2열 (default.html 미수정)
   body:has(.approval-layout-shell) 로 main/footer 여백
   ============================================================ */
:root {
    --approval-sidebar-width: 15rem;
    --approval-sidebar-top: 3.5rem; /* ??? ?? ?? ?? */
}

/* 데스크톱은 고정 패널, 모바일은 Bootstrap offcanvas-lg (본문 위 긴 블록 금지) */
.approval-layout-shell {
    background: var(--tss-surface);
    /* Bootstrap 5.3.2 offcanvas-lg 가 모바일에서 읽는 폭. 데스크톱은 아래 15rem 규칙이 이긴다. */
    --bs-offcanvas-width: min(18rem, 85vw);
}

@media (min-width: 992px) {
    .approval-layout-shell.offcanvas-lg {
        position: fixed !important;
        top: var(--approval-sidebar-top);
        left: 0;
        bottom: 0;
        width: var(--approval-sidebar-width) !important;
        max-width: var(--approval-sidebar-width) !important;
        z-index: 1020;
        overflow-y: auto;
        background: var(--tss-surface);
        border-right: 1px solid var(--tss-border);
        transform: none !important;
        visibility: visible !important;
    }

    .approval-layout-shell.offcanvas-lg .offcanvas-body {
        overflow: visible;
        height: 100%;
    }
}

.approval-sidebar {
    padding: 0.75rem 0.5rem 1.25rem;
}

.approval-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem 0.75rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--tss-text);
    border-bottom: 1px solid var(--tss-border);
    margin-bottom: 0.5rem;
}

.approval-sidebar__brand i {
    color: var(--tss-accent);
}

.approval-sidebar__section {
    margin-top: 0.15rem;
}

/* 구역 제목 — 비클릭, 메뉴보다 작고 약한 색, 토큰만 사용 */
.approval-sidebar__section-title {
    padding: 0.7rem 0.7rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tss-muted);
}

.approval-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.approval-page-header .approval-page-actions {
    margin-left: auto;
}

.approval-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.approval-page-actions__menu {
    display: none !important;
}

/* 1단계 메뉴 — 아이콘 + 메뉴명, 터치 목표 44px */
.approval-sidebar__link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.45rem 0.7rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: var(--tss-radius-sm, 6px);
    background: transparent;
    color: var(--tss-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    overflow: hidden;
}

.approval-sidebar__label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.approval-sidebar__count {
    margin-left: auto;
}

.approval-sidebar__link i {
    font-size: 1.05rem;
    width: 1.15rem;
    text-align: center;
    flex-shrink: 0;
}

.approval-sidebar__link:hover {
    background: var(--tss-row-hover, var(--tss-surface-muted));
    color: var(--tss-accent);
    text-decoration: none;
}

.approval-sidebar__link.is-active {
    background: var(--tss-surface-muted, var(--tss-bg));
    color: var(--tss-accent);
    border-left-color: var(--tss-accent);
    font-weight: 600;
}

.approval-sidebar__link:focus-visible,
.approval-page-actions__menu:focus-visible {
    outline: 2px solid var(--tss-accent);
    outline-offset: 2px;
}

/* ???? ?? ? ?????? ????? ?? */
body:has(.approval-layout-shell) > main.container {
    margin-left: var(--approval-sidebar-width);
    max-width: none;
    width: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (max-width: 991.98px) {
    /* HTML 실제 클래스 offcanvas-lg 와 연결. 본문 위 긴 블록으로 펼치지 않는다. */
    .approval-layout-shell.offcanvas-lg {
        width: min(18rem, 85vw);
        top: 0;
        height: 100%;
        border-right: 1px solid var(--tss-border);
        background: var(--tss-surface);
    }
    body:has(.approval-layout-shell) > main.container {
        margin-left: 0;
    }
}

/* ?? 2? ? ???? + ??? ? (Step10?? ???, ????? ??) */
.approval-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .approval-detail-grid {
        grid-template-columns: 1fr;
    }
}

.approval-line-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.approval-line-table th,
.approval-line-table td {
    border: 1px solid var(--tss-border);
    padding: 0.45rem 0.5rem;
    vertical-align: top;
    background: var(--tss-surface);
    color: var(--tss-text);
}

.approval-line-table th {
    background: var(--tss-surface-muted, var(--tss-bg));
    font-weight: 600;
    white-space: nowrap;
}

.approval-line-table tr.approval-line-row--parallel {
    background: var(--tss-surface-muted, var(--tss-bg));
}

.approval-line-table .approval-step-signature__typed {
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 1.05rem;
}

.approval-line-table .approval-step-signature__img {
    max-height: 36px;
    max-width: 100px;
}

/* ========== Step10?11: ??? ???(???) + ??? + 2?? ========== */

/* 상세 상단 메타바 — 카드형(radius-md, border, 흰 배경), 한 줄 나란히 */
.approval-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem 1.25rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-md);
    background: var(--tss-surface);
}

.approval-meta-bar__item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 7.5rem;
}

.approval-meta-bar__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tss-muted);
    line-height: 1.2;
}

.approval-meta-bar__value {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--tss-text);
    line-height: 1.3;
    word-break: break-word;
}

/* ?(??) / ?(??? ???) */
.approval-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(14rem, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .approval-detail-layout {
        grid-template-columns: 1fr;
    }
}

.approval-detail-layout__main,
.approval-detail-layout__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0; /* section-card ?? margin ?? */
}

.approval-section-card--stamp-side .approval-section-body {
    /* 도장 보드 카드 안 여백 살짝 여유 */
    padding: 0.75rem 0.85rem;
}

/* 결재선 도장 보드 — 구조 유지, 여백/정렬만 다듬기 */
.approval-stamp-board {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    overflow-x: visible;
    padding: 0.15rem 0;
    -webkit-overflow-scrolling: touch;
}

.approval-stamp-col {
    flex: 0 0 auto;
    min-width: 4.75rem;
    max-width: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.approval-stamp-col--parallel {
    min-width: 4.75rem;
    padding: 0.35rem;
    border: 1px dashed var(--tss-border);
    border-radius: var(--tss-radius-sm, 0.35rem);
    background: var(--tss-surface-muted, var(--tss-bg));
}

.approval-stamp-col__group-label {
    font-size: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    color: var(--tss-text);
}

.approval-stamp-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.3rem 0.45rem;
    border: 1px solid var(--tss-border);
    border-radius: var(--tss-radius-sm, 0.35rem);
    background: var(--tss-surface);
    min-height: 0;
}

.approval-stamp-cell__role {
    width: 100%;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tss-text);
    border-bottom: 1px solid var(--tss-border);
    padding-bottom: 0.2rem;
    line-height: 1.25;
}

.approval-stamp-cell__delegate {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    max-width: 50%;
    z-index: 1;
}

.approval-stamp-cell__delegate .badge-tss-info {
    font-size: 0.6rem;
    padding: 0.1em 0.35em;
}

.approval-stamp-cell__delegate-name {
    font-size: 0.58rem;
    color: var(--tss-muted);
    text-align: right;
    word-break: break-all;
}

.approval-stamp-cell__seal {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0;
    min-height: 0;
}

/* ?? ?? ? ??? (??? ??) */
.approval-seal {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    border: 1.5px solid var(--tss-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.12rem;
    box-sizing: border-box;
    /* 그림 서명은 투명 배경 PNG(검정 잉크)라 다크모드에서 테마 배경을 따라가면 안 보임 — 종이 도장처럼 항상 흰 배경 고정 */
    background: #ffffff;
}

.approval-seal__label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.approval-seal__hint {
    font-size: 0.55rem;
    color: var(--tss-muted);
    font-weight: 600;
    line-height: 1.1;
}

.approval-seal__inner {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.approval-seal__typed {
    font-size: 0.58rem !important;
    line-height: 1.1 !important;
    max-width: 2.1rem;
    word-break: break-word;
}

.approval-seal__img {
    max-height: 1.45rem !important;
    max-width: 1.9rem !important;
    border: none !important;
    background: transparent !important;
}

.approval-seal--approved {
    border-color: var(--tss-accent);
    color: var(--tss-accent);
    box-shadow: inset 0 0 0 1px var(--tss-accent-border-soft);
}

.approval-seal--rejected {
    border-color: var(--tss-alert-danger-text);
    color: var(--tss-alert-danger-text);
    box-shadow: inset 0 0 0 1px var(--tss-alert-danger-border, var(--tss-border));
}

.approval-seal--empty {
    border-style: dashed;
    border-color: var(--tss-muted);
    background: var(--tss-surface-muted, var(--tss-bg));
}

.approval-seal--skipped {
    border-color: var(--tss-muted);
    color: var(--tss-muted);
    opacity: 0.85;
}

.approval-seal--skipped .approval-seal__label {
    text-decoration: line-through;
}

.approval-seal--recalled {
    border-color: var(--tss-muted);
    color: var(--tss-muted);
}

.approval-stamp-cell__footer {
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--tss-border);
    padding-top: 0.2rem;
}

.approval-stamp-cell__name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--tss-text);
    line-height: 1.2;
    word-break: break-word;
}

.approval-stamp-cell__date {
    font-size: 0.62rem;
    color: var(--tss-muted);
    margin-top: 0.05rem;
}

.approval-stamp-cell__comment {
    font-size: 0.58rem;
    color: var(--tss-muted);
    margin-top: 0.15rem;
    line-height: 1.25;
    word-break: break-word;
}

.approval-detail-meta dt {
    color: var(--tss-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.approval-detail-meta dd {
    margin-bottom: 0.65rem;
}

.approval-detail-body-text {
    white-space: pre-wrap;
    line-height: 1.55;
}

/* ============================================================
   Step0-B — google-style.css 공용 Material 룩·고유 클래스 이관
   원본: google-style.css (값 변경 없이 복사, 원본 파일은 유지)
   다크 오버라이드는 위쪽 html[data-tss-theme="dark"] 블록에 이미 있음.
   ============================================================ */

/* Cards — google-style.css */
.card {
  background: var(--tss-surface, #ffffff);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  border: none;
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-2);
}

.card-header {
  background: var(--tss-surface, #ffffff);
  border-bottom: 1px solid var(--tss-border, var(--google-gray-200));
  padding: var(--spacing-lg);
  font-weight: 500;
  color: var(--tss-text, var(--google-gray-900));
  font-size: 1.125rem;
}

.card-body {
  padding: var(--spacing-lg);
}

.card-footer {
  background: var(--tss-section-bg);
  border-top: 1px solid var(--tss-border, var(--google-gray-200));
  padding: var(--spacing-md) var(--spacing-lg);
}

/* Buttons — google-style.css */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 36px;
  gap: var(--spacing-xs);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--google-blue-light);
}

.btn-primary {
  background-color: var(--google-blue);
  color: white;
}

.btn-primary:hover {
  background-color: var(--google-blue-dark);
  box-shadow: var(--shadow-2);
}

.btn-secondary {
  background-color: var(--google-gray-200);
  color: var(--google-gray-700);
}

.btn-secondary:hover {
  background-color: var(--google-gray-300);
}

.btn-success {
  background-color: var(--google-green);
  color: white;
}

.btn-success:hover {
  background-color: #2d8a47;
}

.btn-danger {
  background-color: var(--google-red);
  color: white;
}

.btn-danger:hover {
  background-color: #d33426;
}

.btn-warning {
  background-color: var(--google-yellow);
  color: var(--google-gray-900);
}

.btn-warning:hover {
  background-color: #f0b400;
}

.btn-outline {
  background-color: transparent;
  border: 1px solid var(--google-gray-300);
  color: var(--google-gray-700);
}

.btn-outline:hover {
  background-color: var(--google-gray-50);
  border-color: var(--google-gray-400);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: 0.75rem;
  min-height: 28px;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1rem;
  min-height: 48px;
}

/* Forms — google-style.css */
.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--google-gray-700);
  font-size: 0.875rem;
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--google-gray-300);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  background-color: white;
}

.form-control:focus {
  outline: none;
  border-color: var(--google-blue);
  box-shadow: 0 0 0 2px var(--google-blue-light);
}

.form-control:disabled {
  background-color: var(--google-gray-100);
  color: var(--google-gray-500);
  cursor: not-allowed;
}

.form-text {
  font-size: 0.75rem;
  color: var(--google-gray-600);
  margin-top: var(--spacing-xs);
}

/* Tables — google-style.css */
.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.table th {
  background-color: var(--google-gray-50);
  color: var(--google-gray-700);
  font-weight: 500;
  text-align: left;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--google-gray-200);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.table td {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--google-gray-100);
  color: var(--google-gray-900);
}

.table tbody tr:hover {
  background-color: var(--google-gray-50);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Navbar base — google-style.css (tss-nav-*는 Step12/13에서 이미 이관) */
/* navbar-dark(TS관리자 topbar 등 고정 다크 헤더)는 제외 — 자체 배경(ts-admin.css .topbar)을 덮어쓰지 않도록 함 */
.navbar:not(.navbar-dark) {
  background: var(--tss-surface, #ffffff);
  box-shadow: var(--shadow-1);
  border-bottom: 1px solid var(--tss-border, var(--google-gray-200));
  padding: 0;
  min-height: 56px;
}

.navbar > .container {
  min-height: 56px;
  display: flex;
  align-items: center;
}

.navbar-brand {
  font-weight: 600;
  color: var(--google-blue);
  text-decoration: none;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-nav .nav-link {
  color: var(--google-gray-700);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.navbar-nav .nav-link:hover {
  background-color: var(--google-gray-100);
  color: var(--google-gray-900);
}

.navbar-nav .nav-link.active {
  background-color: var(--google-blue-light);
  color: var(--google-blue);
}

/* Dropdown — google-style.css */
.dropdown-menu {
  background: white;
  border: 1px solid var(--google-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--spacing-xs) 0;
  margin-top: var(--spacing-xs);
  min-width: 200px;
}

.dropdown-item {
  color: var(--google-gray-700);
  padding: var(--spacing-sm) var(--spacing-md);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: background-color var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.dropdown-item:hover {
  background-color: var(--google-gray-100);
  color: var(--google-gray-900);
}

.dropdown-item:focus {
  background-color: var(--google-blue-light);
  color: var(--google-blue);
  outline: none;
}

.dropdown-divider {
  border-top: 1px solid var(--google-gray-200);
  margin: var(--spacing-xs) 0;
}

.navbar-nav .dropdown-toggle::after {
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

.navbar-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Sidebar — google-style.css */
.sidebar {
  background: white;
  box-shadow: var(--shadow-2);
  border-right: 1px solid var(--google-gray-200);
}

.sidebar .nav-link {
  color: var(--google-gray-700);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin: var(--spacing-xs) var(--spacing-md);
  transition: all var(--transition-fast);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.sidebar .nav-link:hover {
  background-color: var(--google-gray-100);
  color: var(--google-gray-900);
}

.sidebar .nav-link.active {
  background-color: var(--google-blue-light);
  color: var(--google-blue);
  font-weight: 500;
}

/* Alerts — google-style.css */
.alert {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  border: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.alert-success {
  background-color: var(--tss-alert-success-bg, #e6f4ea);
  color: var(--tss-alert-success-text, #1e4620);
  border: 1px solid var(--tss-alert-success-border, transparent);
}

.alert-warning {
  background-color: var(--tss-alert-warning-bg, #fff3e0);
  color: var(--tss-alert-warning-text, #e65100);
  border: 1px solid var(--tss-alert-warning-border, transparent);
}

.alert-danger {
  background-color: var(--tss-alert-danger-bg, #fce8e6);
  color: var(--tss-alert-danger-text, #c5221f);
  border: 1px solid var(--tss-alert-danger-border, transparent);
}

.alert-info {
  background-color: var(--tss-alert-info-bg, #e8f0fe);
  color: var(--tss-alert-info-text, #174ea6);
  border: 1px solid var(--tss-alert-info-border, transparent);
}

/* Badges — google-style.css */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-primary {
  background-color: var(--google-blue-light);
  color: var(--google-blue);
}

.badge-success {
  background-color: #e6f4ea;
  color: var(--google-green);
}

.badge-warning {
  background-color: #fff3e0;
  color: var(--google-yellow);
}

.badge-danger {
  background-color: #fce8e6;
  color: var(--google-red);
}

/* Pagination — google-style.css */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: var(--spacing-lg) 0;
  gap: var(--spacing-xs);
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: var(--spacing-sm);
  border: 1px solid var(--google-gray-300);
  border-radius: var(--radius-md);
  color: var(--google-gray-700);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.page-link:hover {
  background-color: var(--google-gray-100);
  border-color: var(--google-gray-400);
}

.page-item.active .page-link {
  background-color: var(--google-blue);
  border-color: var(--google-blue);
  color: white;
}

/* Dashboard Cards / Stats Grid — google-style.css */
.dashboard-card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  transition: box-shadow var(--transition-normal);
}

.dashboard-card:hover {
  box-shadow: var(--shadow-2);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.dashboard-card-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--google-gray-900);
  margin: 0;
}

.dashboard-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.dashboard-card-icon.primary {
  background-color: var(--google-blue);
}

.dashboard-card-icon.success {
  background-color: var(--google-green);
}

.dashboard-card-icon.warning {
  background-color: var(--google-yellow);
}

.dashboard-card-icon.danger {
  background-color: var(--google-red);
}

.dashboard-card-icon.info {
  background-color: var(--google-blue);
}

.dashboard-card-icon.purple {
  background-color: #8e24aa; /* 보라색 */
}

.dashboard-card-icon.teal {
  background-color: #00695c; /* 청록색 */
}

.dashboard-card-icon.orange {
  background-color: #f57c00; /* 주황색 */
}

.dashboard-card-value {
  font-size: 2rem;
  font-weight: 300;
  color: var(--google-gray-900);
  margin: var(--spacing-sm) 0;
}

.dashboard-card-description {
  color: var(--google-gray-600);
  font-size: 0.875rem;
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

@media (max-width: 768px) {
  .card-body {
    padding: var(--spacing-md);
  }

  .dashboard-card {
    padding: var(--spacing-lg);
  }

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

  .table-responsive {
    overflow-x: auto;
  }
}

/* Loading Spinner — google-style.css */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--google-gray-300);
  border-top: 2px solid var(--google-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   공용 기준정보 카드 목록
   - TS 관리자와 통합 관리자 화면에서 함께 사용
   - 색상·테두리·그림자는 TSS 공용 테마 토큰만 사용
   ============================================ */
:is(#main, .super-admin-main) .ts-ref-filter,
:is(#main, .super-admin-main) .ts-ref-panel {
  background: var(--tss-surface);
  border-color: var(--tss-border);
  border-radius: var(--tss-radius-lg);
  box-shadow: var(--tss-shadow-sm);
}

:is(#main, .super-admin-main) .ts-ref-panel > .card-header {
  background: var(--tss-section-bg);
  border-color: var(--tss-border);
  color: var(--tss-text);
}

.ts-ref-list {
  display: grid;
  gap: 0.75rem;
}

.ts-ref-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-width: 0;
  padding: 1rem 1.125rem;
  background: var(--tss-surface);
  border: 1px solid var(--tss-border);
  border-radius: var(--tss-radius-md);
  box-shadow: var(--tss-shadow-sm);
}

.ts-ref-card:hover {
  background: var(--tss-row-hover);
  border-color: var(--tss-accent-border-soft);
}

.ts-ref-card__content {
  flex: 1 1 auto;
  min-width: 0;
}

.ts-ref-card__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ts-ref-card__name {
  color: var(--tss-accent-strong);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.ts-ref-card__name:hover {
  color: var(--tss-accent);
  text-decoration: underline;
}

.ts-ref-card__description {
  margin: 0.5rem 0 0;
  color: var(--tss-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ts-ref-card__aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

.ts-ref-card__date {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--tss-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.ts-ref-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

:is(#main, .super-admin-main) .ts-ref-card__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--tss-radius-sm);
}

.ts-ref-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 2.5rem 1rem;
  color: var(--tss-muted);
  text-align: center;
  background: var(--tss-surface-muted);
  border: 1px dashed var(--tss-border);
  border-radius: var(--tss-radius-md);
}

.ts-ref-state--loading {
  flex-direction: row;
  gap: 0.625rem;
  min-height: 7rem;
}

.ts-ref-state__icon {
  margin-bottom: 0.875rem;
  color: var(--tss-muted);
  font-size: 2rem;
}

.ts-ref-state__title {
  margin: 0 0 0.375rem;
  color: var(--tss-text);
  font-size: 1rem;
  font-weight: 700;
}

.ts-ref-state__description {
  margin: 0 0 1rem;
  color: var(--tss-muted);
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .ts-ref-card {
    align-items: stretch;
    flex-direction: column;
    gap: 0.875rem;
  }

  .ts-ref-card__aside {
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tss-border);
  }
}
/* P2·P3 화면의 모바일 지원 수준 안내: 데스크톱에서는 숨김 */
.mobile-support-notice {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-support-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 1rem;
        padding: 0.875rem 1rem;
        border: 1px solid var(--tss-border);
        border-left-width: 4px;
        border-radius: 0.75rem;
        background: var(--tss-surface);
        color: var(--tss-text);
        overflow-wrap: anywhere;
    }

    .mobile-support-notice > i {
        flex: 0 0 auto;
        margin-top: 0.1rem;
        font-size: 1.15rem;
    }

    .mobile-support-notice > div {
        min-width: 0;
    }

    .mobile-support-notice strong {
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.9rem;
    }

    .mobile-support-notice p {
        margin: 0;
        color: var(--tss-muted);
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .mobile-support-notice--scroll {
        border-left-color: var(--tss-accent);
    }

    .mobile-support-notice--scroll > i {
        color: var(--tss-accent);
    }

    .mobile-support-notice--desktop {
        border-left-color: #d97706;
        background: color-mix(in srgb, var(--tss-surface) 88%, #f59e0b 12%);
    }

    .mobile-support-notice--desktop > i {
        color: #b45309;
    }
}

/* Final geometry overrides after the legacy notification styles. */
#tssNotificationModal .modal-dialog { width: min(720px, calc(100vw - 2rem)); max-width: 720px; }
#tssNotificationModalList { padding: 18px 24px 24px; }
@media (max-width: 575.98px) {
  #tssNotificationModal .modal-dialog { width: calc(100vw - 1rem); }
  #tssNotificationModalList { padding: 12px; }
}

/* bundled: css/help-manual.css */
/**
 * TSS 도움말 센터 — 사용 매뉴얼 버튼·허브·관리 화면 공통 스타일
 * 문서함(doc-lib-btn-permissions) 톤과 동일하게 맞춤
 */

/* ── 사용 매뉴얼 버튼 (전 모듈 통일) ── */
.help-manual-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tss-border, #dee2e6);
    background: var(--tss-surface, #fff);
    color: var(--tss-text, #212529);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.help-manual-link:hover,
.help-manual-link:focus-visible {
    background: var(--tss-row-hover, #f8f9fa);
    border-color: var(--tss-accent-border, #86b7fe);
    color: var(--tss-accent, #0d6efd);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.12);
}

.help-manual-link i {
    font-size: 1rem;
    line-height: 1;
}

/* 문서함 hero 영역과 동일 크기·강조 */
.help-manual-link--hero {
    padding: 0.62rem 1.2rem;
    font-size: 0.9375rem;
    border-color: var(--tss-accent-border, #86b7fe);
    color: var(--tss-accent, #0d6efd);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}

.help-manual-link--hero:hover,
.help-manual-link--hero:focus-visible {
    background: var(--tss-accent, #0d6efd);
    border-color: var(--tss-accent, #0d6efd);
    color: #fff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
}

/* 헤더 우측 액션 버튼과 높이 맞춤 (관리·TS 화면) */
.help-manual-link--inline {
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
}

/* 페이지 헤더 — 제목 좌 / 사용 매뉴얼·버튼 우 (전 모듈 고정 위치) */
.help-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.help-page-header--standard,
.ts-page-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tss-border, #dee2e6);
}

.help-page-header__main {
    flex: 1 1 12rem;
    min-width: 0;
}

.help-page-header__actions,
.ts-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

/* 문서함 hero — 다른 모듈과 동일 우측 정렬 */
.doc-lib-hero-top {
    align-items: flex-start;
}

.doc-lib-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

/* 대시보드·허브 — 컴팩트 진입 링크 */
.help-hub-compact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    border: 1px solid var(--tss-accent-border-soft, #cfe2ff);
    background: var(--tss-accent-soft, #e7f1ff);
    color: var(--tss-accent, #0d6efd);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.help-hub-compact-link:hover {
    background: var(--tss-accent, #0d6efd);
    border-color: var(--tss-accent, #0d6efd);
    color: #fff;
    text-decoration: none;
}

.help-page-header.tickets-page-top {
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.help-page-header.tickets-page-top .help-page-header__actions {
  padding-top: 0.15rem;
}

.dashboard-tab-lead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* 관리·허브 — 필터 툴바 + 테이블 */
.help-panel {
    border: 1px solid var(--tss-border, #dee2e6);
    border-radius: 0.75rem;
    background: var(--tss-surface, #fff);
    overflow: hidden;
}

.help-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tss-border, #dee2e6);
    background: var(--tss-section-bg);
}

.help-panel__toolbar .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tss-muted, #6c757d);
    margin-bottom: 0.25rem;
}

.help-panel__toolbar .form-select {
    min-width: 10rem;
    font-size: 0.9rem;
}

.help-panel__table {
    margin-bottom: 0;
}

/* Keep seven admin columns readable inside the table's own horizontal scroller. */
@media (max-width: 767.98px) {
    .help-panel__table { min-width: 780px; }
    .help-panel__table tbody td:first-child { min-width: 15rem; }
}

.help-panel__table thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tss-muted, #6c757d);
    background: var(--tss-section-bg);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.help-panel__table tbody td {
    vertical-align: middle;
    font-size: 0.9rem;
}

.help-panel__table .help-slot-title {
    font-weight: 600;
    color: var(--tss-text, #212529);
}

.help-panel__table .help-slot-desc {
    font-size: 0.8125rem;
    color: var(--tss-muted, #6c757d);
    max-width: 28rem;
}

.help-panel__empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--tss-muted, #6c757d);
}

html[data-tss-theme="dark"] .help-manual-link {
    background: var(--tss-surface, #1e293b);
    border-color: var(--tss-border, #334155);
    color: var(--tss-text, #e2e8f0);
}

html[data-tss-theme="dark"] .help-manual-link--hero {
    border-color: var(--tss-accent-border, #3b82f6);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .help-hub-compact-link {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

/* ── 관리자 버전 관리 (/admin/help-manuals/{id}) ── */
.help-admin-detail__section-title {
    align-items: center;
}

.help-admin-detail__body {
    padding: 1.25rem;
}

.help-admin-upload-form .help-admin-file-input {
    min-height: 2.75rem;
}

.help-admin-upload-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.help-admin-version-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

/* Keep the final download reachable above the shared floating assistant on phones. */
@media (max-width: 575.98px) {
    .help-admin-detail {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }

    .help-admin-detail .help-admin-version-actions .btn,
    .help-admin-detail .help-admin-upload-actions .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

html[data-tss-theme="dark"] .help-admin-detail .help-admin-file-input.form-control {
    background-color: #0f172a;
    color: var(--tss-text, #e2e8f0);
    border-color: var(--tss-border, #334155);
}

html[data-tss-theme="dark"] .help-admin-detail .help-admin-file-input.form-control::file-selector-button {
    background-color: var(--tss-surface-muted, #334155);
    color: var(--tss-text, #e2e8f0);
    border: 1px solid var(--tss-border, #475569);
    border-radius: 0.375rem;
    padding: 0.375rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-success {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-warning {
    color: #fbbf24;
    border-color: #ca8a04;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-warning:hover {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde68a;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-primary {
    color: #93c5fd;
    border-color: #3b82f6;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-primary:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
}

/* bundled: css/tss-pwa.css */
.tss-pwa-banner {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1080;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    width: min(26rem, calc(100vw - 2rem));
    padding: 0.875rem;
    border: 1px solid var(--tss-border, #dbe3ee);
    border-radius: 1rem;
    background: var(--tss-surface, #fff);
    color: var(--tss-text, #172033);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

.tss-pwa-banner[hidden] { display: none; }
.tss-pwa-banner__icon { width: 48px; height: 48px; border-radius: 12px; }
.tss-pwa-banner__content { min-width: 0; }
.tss-pwa-banner__content strong { display: block; font-size: 0.95rem; }
.tss-pwa-banner__content p {
    margin: 0.2rem 0 0.7rem;
    color: var(--tss-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1.45;
}
.tss-pwa-banner__actions { display: flex; gap: 0.5rem; }
.tss-pwa-banner__actions button,
.tss-pwa-dialog button {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--tss-border, #dbe3ee);
    border-radius: 0.65rem;
    background: var(--tss-surface, #fff);
    color: var(--tss-text, #172033);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}
.tss-pwa-banner__actions .is-primary,
.tss-pwa-dialog .is-primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.tss-pwa-dialog {
    width: min(26rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background: var(--tss-surface, #fff);
    color: var(--tss-text, #172033);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
}
.tss-pwa-dialog::backdrop { background: rgba(15, 23, 42, 0.52); }
.tss-pwa-dialog__body { padding: 1.25rem; }
.tss-pwa-dialog h2 { margin: 0 0 0.55rem; font-size: 1.1rem; }
.tss-pwa-dialog ol { margin: 0 0 1rem; padding-left: 1.35rem; line-height: 1.65; }
.tss-pwa-dialog__actions { display: flex; justify-content: flex-end; }

.tss-device-notification-banner {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1079;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.75rem;
    width: min(26rem, calc(100vw - 2rem));
    padding: 0.875rem;
    border: 1px solid var(--tss-border, #dbe3ee);
    border-radius: 1rem;
    color: var(--tss-text, #172033);
    background: var(--tss-surface, #fff);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
}

.tss-device-notification-banner > img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.tss-device-notification-banner strong {
    display: block;
    font-size: 0.95rem;
}

.tss-device-notification-banner p {
    margin: 0.2rem 0 0.7rem;
    color: var(--tss-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1.45;
}

.tss-device-notification-banner__actions {
    display: flex;
    gap: 0.5rem;
}

.tss-device-notification-banner__actions button {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--tss-border, #dbe3ee);
    border-radius: 0.65rem;
    color: var(--tss-text, #172033);
    background: var(--tss-surface, #fff);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
}

.tss-device-notification-banner__actions .is-primary {
    border-color: #2563eb;
    color: #fff;
    background: #2563eb;
}

/* 공통 modal의 내용과 하단 동작을 설치·알림 안내 배너가 가리지 않게 한다. */
body:has(.modal.show) .tss-pwa-banner,
body:has(.modal.show) .tss-device-notification-banner {
    display: none;
}

@media (min-width: 769px) {
    .tss-pwa-banner,
    .tss-device-notification-banner { display: none; }
}

/* bundled: css/tss-sidebar-tree.css */
/*
 * TSS sidebar child-tree connector
 *
 * Keep the hierarchy visible across the portal, TS/CRM, and administrator
 * shells without depending on a page-specific renewal stylesheet.
 */
:root {
    --tss-sidebar-tree-line: rgba(148, 163, 184, 0.34);
    --tss-sidebar-tree-line-active: #60a5fa;
    --tss-sidebar-tree-dot: #64748b;
}

/* Main portal sidebar */
body .tss-portal-sidebar { overflow-x: hidden; }
body .tss-portal-sidebar .offcanvas-title { color: #f8fafc; }
body .tss-portal-sidebar .offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .8; }
body .tss-portal-sidebar__nav { width: 100%; min-width: 0; }
/* Fixed navigation groups add hierarchy without another accordion level. */
body .tss-portal-sidebar__section-label {
    margin: 12px 11px 3px;
    color: #a6b4c5;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    word-break: keep-all;
}
body .tss-portal-sidebar__section-label--utility {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tss-sidebar-tree-line);
}
body .tss-portal-sidebar__admin-tools {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--tss-sidebar-tree-line);
}
@media (max-width: 991.98px) {
    body .tss-portal-sidebar .tss-portal-sidebar__link,
    body .tss-portal-sidebar .tss-portal-sidebar__accordion-btn,
    body .tss-portal-sidebar .tss-portal-sidebar__sublink,
    body .tss-portal-sidebar .tss-portal-sidebar__crm-toggle {
        min-height: 44px;
    }
    body .tss-portal-sidebar__accordion-label {
        min-width: 0;
        word-break: keep-all;
    }
}
body .tss-portal-sidebar__crm-list { max-width: 100%; }
body .tss-portal-sidebar__crm-list,
body .tss-portal-sidebar__crm-panel {
    list-style: none;
}
body .tss-portal-sidebar__crm-list { margin: 4px 6px 10px 12px; padding: 0; }
body .tss-portal-sidebar__crm-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 12px;
    text-align: left;
}
body .tss-portal-sidebar__crm-toggle > span { flex: 1; }
body .tss-portal-sidebar__crm-toggle:hover,
body .tss-portal-sidebar__crm-toggle.is-current { background: rgba(148, 163, 184, .13); }
body .tss-portal-sidebar__crm-toggle:not(.collapsed) > .tss-portal-sidebar__chevron { transform: rotate(180deg); }
body .tss-portal-sidebar__crm-panel { margin-left: 15px; margin-right: 0; padding-left: 10px; }
body .tss-portal-sidebar__crm-panel:not(.show) { display: none; }
body .tss-portal-sidebar__crm-panel > li { min-width: 0; }
body .tss-portal-sidebar__crm-panel .tss-portal-sidebar__sublink > i { flex: 0 0 14px; width: 14px; }

/* CRM keeps its existing content IDs and table scripts, with the shared fixed rail. */
body.tss-portal-crm-shell .ts-layout { display: block; min-width: 0; }
body.tss-portal-crm-shell #main.content { width: auto !important; min-width: 0; margin: 0 !important; }
@media (min-width: 992px) {
    body.tss-portal-crm-shell .ts-layout { padding-left: var(--tss-portal-sidebar-width, 220px); }
}
@media (max-width: 991.98px) {
    body.tss-portal-crm-shell .ts-layout { padding-left: 0; }
}

body .tss-portal-sidebar__sublist {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 8px 10px 20px;
    padding: 4px 0 4px 14px;
    border-left: 1px solid var(--tss-sidebar-tree-line);
}

body .tss-portal-sidebar__sublink {
    position: relative;
    min-height: 34px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 7px;
}

body .tss-portal-sidebar__sublink::before {
    position: absolute;
    top: 50%;
    left: -14px;
    width: 10px;
    border-top: 1px solid var(--tss-sidebar-tree-line);
    content: "";
}

body .tss-portal-sidebar__sublink::after {
    position: absolute;
    top: calc(50% - 2px);
    left: -5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--tss-sidebar-tree-dot);
    content: "";
    opacity: 0.75;
}

body .tss-portal-sidebar__sublink:hover::before,
body .tss-portal-sidebar__sublink.is-active::before {
    border-top-color: var(--tss-sidebar-tree-line-active);
}

body .tss-portal-sidebar__sublink:hover::after,
body .tss-portal-sidebar__sublink.is-active::after {
    background: var(--tss-sidebar-tree-line-active);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
    opacity: 1;
}

body .tss-portal-sidebar__subsection-label {
    margin: 10px 8px 3px;
    padding-left: 1px;
    color: rgba(148, 163, 184, 0.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
}

/* CRM's destinations live in the same sidebar hierarchy as approvals.
   Keep the page's card, search and list styling; only suppress legacy
   in-content destination navigation on pages that still include it. */
body.tss-portal-crm-shell .tss-section-nav[data-crm-navigation] {
    display: none !important;
}

body .tss-portal-sidebar__link,
body .tss-portal-sidebar__accordion-btn {
    font-size: 15px;
}

body.tss-renewal .tss-portal-sidebar__nav .tss-portal-sidebar__sublink {
    font-size: 13px;
}

body .tss-portal-sidebar__sublist--crm .tss-portal-sidebar__subsection-label:first-child {
    margin-top: 3px;
}

/* Legacy TS/CRM and administrator sidebars */
body #sidebarMenu.sidebar .nav .collapse {
    position: relative;
    margin: 4px 8px 10px 20px;
    padding: 4px 0 4px 14px;
    border-left: 1px solid var(--tss-sidebar-tree-line);
    border-radius: 0;
    background: transparent;
}

body #sidebarMenu.sidebar .nav .collapse .nav-link {
    position: relative;
    min-height: 34px;
    margin: 0;
    padding: 7px 9px;
    border-radius: 7px;
}

/* More specific than legacy Bootstrap utility overrides; one geometry owner. */
body.tss-renewal #sidebarMenu.sidebar .nav .collapse .nav-link {
    min-height: 34px;
    padding: 7px 9px !important;
    border-radius: 7px;
}

body.tss-renewal #sidebarMenu.sidebar .nav .collapse .nav-link.active::before {
    display: block !important;
}

/* Wrap long labels at word boundaries rather than splitting Korean syllables. */
body #sidebarMenu.sidebar .nav .collapse .nav-link > span,
body .tss-portal-sidebar__sublink {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

body #sidebarMenu.sidebar .nav .collapse .nav-link::before {
    position: absolute;
    top: 50%;
    left: -14px;
    width: 10px;
    border-top: 1px solid var(--tss-sidebar-tree-line);
    background: none;
    content: "";
}

body #sidebarMenu.sidebar .nav .collapse .nav-link::after {
    position: absolute;
    top: calc(50% - 2px);
    left: -5px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--tss-sidebar-tree-dot);
    content: "";
    opacity: 0.75;
}

body #sidebarMenu.sidebar .nav .collapse .nav-link:hover::before,
body #sidebarMenu.sidebar .nav .collapse .nav-link.active::before {
    border-top-color: var(--tss-sidebar-tree-line-active);
}

body #sidebarMenu.sidebar .nav .collapse .nav-link:hover::after,
body #sidebarMenu.sidebar .nav .collapse .nav-link.active::after {
    background: var(--tss-sidebar-tree-line-active);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
    opacity: 1;
}

html[data-tss-theme="dark"] {
    --tss-sidebar-tree-line: rgba(148, 163, 184, 0.3);
    --tss-sidebar-tree-line-active: #93c5fd;
    --tss-sidebar-tree-dot: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    body .tss-portal-sidebar__sublink::after,
    body #sidebarMenu.sidebar .nav .collapse .nav-link::after {
        transition: none;
    }
}

/* bundled: css/tss-approval-actions.css */
/* Button pilot: approval screens only. Business logic and other modules stay unchanged. */
body .tss-renewal.rn-approval-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 38px;
    padding: .5rem .85rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
body .tss-renewal.rn-approval-page .btn-sm { min-height: 34px; padding: .4rem .65rem; }
body .tss-renewal.rn-approval-page .btn > .bi { flex-shrink: 0; font-size: 1rem; line-height: 1; margin-inline: 0 !important; }
body .tss-renewal.rn-approval-page :is(.btn-tss-ghost, .btn-outline-secondary, .approval-line-items__zone-action) {
    color: var(--tss-text, #18212f);
    background: var(--tss-surface, #fff);
    border: 1px solid var(--tss-border, #cbd5e1);
}
body .tss-renewal.rn-approval-page :is(.btn-tss-ghost, .btn-outline-secondary, .approval-line-items__zone-action):hover {
    background: var(--tss-surface-muted, #f1f5f9);
    border-color: var(--tss-text-muted, #64748b);
}
body .tss-renewal.rn-approval-page .btn-outline-primary {
    color: var(--rn-accent, #315f8c);
    background: var(--tss-surface-muted, #f1f5f9);
    border: 1px solid var(--tss-border, #cbd5e1);
}
body .tss-renewal.rn-approval-page :is(.btn-tss-primary, .btn-primary) {
    background: var(--rn-accent, #315f8c);
    border-color: var(--rn-accent, #315f8c);
    color: var(--rn-accent-contrast, #fff);
}
body .tss-renewal.rn-approval-page :is(.approval-line-item-remove, .existing-attach-delete, .btn-tss-danger, .btn-outline-danger) {
    color: #b42335;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}
html[data-tss-theme="dark"] body .tss-renewal.rn-approval-page :is(.approval-line-item-remove, .existing-attach-delete, .btn-tss-danger, .btn-outline-danger) {
    color: #fda4af; background: #3b202c; border-color: #754052;
}
body .tss-renewal.rn-approval-page .btn:focus-visible { outline: 3px solid var(--tss-accent, #315f8c); outline-offset: 3px; }
body .tss-renewal.rn-approval-page .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 767.98px) {
    body .tss-renewal.rn-approval-page .btn { min-height: 44px; white-space: normal; }
    body .tss-renewal.rn-approval-page .approval-line-template-bar { gap: 8px; }
    body .tss-renewal.rn-approval-page .approval-line-items__zone-heading { flex-direction: column; align-items: stretch; gap: 12px; }
    body .tss-renewal.rn-approval-page .approval-section-heading { width: 100%; min-width: 0; }
    body .tss-renewal.rn-approval-page .approval-evidence-groups__toolbar { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    body .tss-renewal.rn-approval-page .btn { transition: none; }
}

/* bundled: css/tss-admin-home-fixes.css */
/* Administrator home layout regressions ----------------------------------- */

/*
 * The legacy hub has max-width: 1100px without auto margins. Keep the
 * renewed admin home readable, but center it within the available shell.
 */
body.tss-renewal.rn-admin-shell.rn-analytics-page
    .super-admin-main > .admin-home-hub {
    width: min(100%, var(--rn-content-max, 1284px));
    max-width: var(--rn-content-max, 1284px);
    margin-inline: auto;
}

/*
 * analytics.css intentionally normalizes page buttons. The assistant FAB is
 * a floating global control, so preserve its circular hit target explicitly.
 */
/* All renewed modules may normalize buttons, not only the admin dashboard. */
body.tss-renewal .doc-chat-widget > button#doc-chat-fab {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
}

@media (max-width: 767.98px) {
    body.tss-renewal.rn-admin-shell.rn-analytics-page
        .super-admin-main > .admin-home-hub {
        width: 100%;
        max-width: none;
    }
}

/* bundled: css/tss-section-nav.css */
/* In-page destinations use normal URLs; no data or history replacement layer. */
.tss-section-nav {
    margin:0 0 20px; padding:14px 16px; min-width:0;
    color:var(--tss-text,#172b40); background:var(--tss-surface,#fff);
    border:1px solid var(--tss-border,#dbe3ed); border-radius:14px;
}
.tss-section-nav__groups {list-style:none; margin:0; padding:0;}
.tss-section-nav__caption {display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--tss-muted,#60758c); margin-bottom:10px;}
.tss-section-nav__links {display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; padding:0; margin:0; min-width:0;}
.tss-section-nav__links>li {min-width:0; max-width:100%;}
.tss-section-nav__link {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-height:36px; padding:7px 12px; max-width:100%; border:1px solid transparent;
    border-radius:9px; font-size:13px; font-weight:500; line-height:1.4;
    color:var(--tss-muted,#60758c); text-decoration:none; overflow-wrap:anywhere;
    background:transparent;
}
.tss-section-nav__link:hover {color:var(--tss-text,#172b40); background:var(--tss-bg,#f1f5f9);}
.tss-section-nav__link.is-active {color:var(--tss-accent,#315f8c); background:var(--tss-bg,#edf3f8); border-color:var(--tss-border,#dbe3ed); font-weight:700;}
.tss-section-nav__link:focus-visible,.tss-section-nav summary:focus-visible {outline:2px solid var(--tss-accent,#315f8c); outline-offset:2px;}
.tss-section-nav__label {flex-basis:100%; font-size:11px; font-weight:600; color:var(--tss-muted,#60758c); padding:9px 4px 1px;}
.tss-section-nav__label:first-child {padding-top:0;}
.tss-section-nav details {border-top:1px solid var(--tss-border,#dbe3ed); margin-top:10px; padding-top:8px;}
.tss-section-nav summary {width:fit-content; cursor:pointer; font-size:12px; color:var(--tss-muted,#60758c); padding:4px;}
.tss-section-nav details[open] summary {margin-bottom:6px;}
.logistics-desktop-main>.tss-section-nav {margin:16px 24px 0;}
@media(max-width:767.98px) {
    .tss-section-nav {padding:12px; margin-bottom:14px; border-radius:12px;}
    .tss-section-nav__link {min-height:40px; padding:8px 10px; font-size:12px; text-align:center;}
    .tss-section-nav__links {gap:4px;}
    .logistics-desktop-main>.tss-section-nav {margin:12px 12px 0;}
}

/* bundled: css/tss-icon-subsets.css */
/* Generated by scripts/build-icon-font-subsets.py. Do not edit. */
/* Font Awesome Free: font SIL OFL 1.1; Bootstrap Icons: MIT. Original vendor licenses preserved. */
@font-face{font-family:"TSS Icons Solid";font-style:normal;font-weight:900;font-display:block;src:url("/vendor/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");unicode-range:U+21,U+23,U+2A,U+30-39,U+3C-3E,U+40-5A,U+61-7A,U+A3,U+A9,U+AE,U+B6,U+2013,U+201C-201D,U+20A4,U+20A8,U+20AA,U+20B4,U+20B8,U+20BD,U+2122,U+2194-2195,U+2197,U+21C4,U+2212,U+221E,U+2303,U+231B,U+2328,U+232B,U+23CF,U+23E9-23EA,U+23ED-23EE,U+23F1,U+23F3,U+23FE,U+24BD,U+25A0,U+25D0,U+25FB-25FC,U+2600-2601,U+2603-2604,U+2615,U+261D,U+2620,U+2622-2623,U+2625,U+262A,U+262C,U+262E-262F,U+2638-2639,U+263F-2640,U+2642,U+265A-265F,U+2665-2666,U+2672,U+267A-267B,U+267E,U+2680-2685,U+2693,U+269B,U+26A2-26A9,U+26B2,U+26BD-26BE,U+26C4-26C6,U+26E9-26EA,U+26F7,U+26FA,U+26FD,U+2700,U+2702,U+2704,U+270A-270C,U+2711-2712,U+271D,U+2721,U+2731,U+2744,U+2746,U+274E,U+2755,U+2757,U+2764,U+2796,U+2935,U+2B0D,U+2B1B-2B1C,U+E005-E006,U+E00D,U+E012,U+E03F-E041,U+E059-E076,U+E085-E086,U+E097-E098,U+E09A,U+E0A9,U+E0AC,U+E0B4,U+E0B7,U+E0BB,U+E0CF,U+E0D8,U+E0DF,U+E0E3-E0E4,U+E131,U+E139-E13C,U+E140,U+E152,U+E163,U+E169,U+E16D,U+E17B,U+E184-E185,U+E18F,U+E19A-E19B,U+E1A8,U+E1B0,U+E1BC,U+E1C4,U+E1C8,U+E1D3,U+E1D5,U+E1D7,U+E1ED,U+E1F3,U+E1F6,U+E1FE,U+E209,U+E221-E222,U+E22D,U+E23D,U+E289,U+E29C,U+E2B7,U+E2BB,U+E2C5,U+E2CA,U+E2CD-E2CE,U+E2E6,U+E2EB,U+E31E,U+E3AF,U+E3B1-E3B2,U+E3F5,U+E43C,U+E445,U+E447-E448,U+E46C,U+E473,U+E476-E477,U+E47A-E47B,U+E490,U+E494,U+E4A5,U+E4A8-E4AD,U+E4AF-E4B0,U+E4B3,U+E4B5-E4CC,U+E4CE-E4DE,U+E4E0-E4E6,U+E4E8-E4EB,U+E4ED-E503,U+E507-E521,U+E523-E525,U+E527-E52F,U+E532-E54F,U+E551-E558,U+E55A-E56F,U+E571-E574,U+E576-E587,U+E589-E58F,U+E591-E59A,U+E59C-E59D,U+E5A0-E5A1,U+E5A9-E5AA,U+E5AF,U+E5B4,U+F000-F001,U+F004,U+F008-F00B,U+F00E,U+F010,U+F012,U+F015-F016,U+F018,U+F01A-F01B,U+F01D,U+F025-F029,U+F02E,U+F030-F031,U+F033-F039,U+F03B-F03D,U+F041-F043,U+F045,U+F047-F04A,U+F04E,U+F050,U+F052,U+F05B,U+F064-F066,U+F068-F069,U+F06B-F06D,U+F070,U+F072,U+F074-F076,U+F079,U+F07D-F07E,U+F083,U+F087-F08B,U+F08D-F08E,U+F090-F091,U+F094-F098,U+F09E,U+F0A0,U+F0A3-F0AB,U+F0AD,U+F0B2,U+F0C2-F0C4,U+F0C6,U+F0C8-F0C9,U+F0CC-F0CE,U+F0D0,U+F0D6-F0DB,U+F0DD-F0DE,U+F0E3-F0E5,U+F0E9-F0ED,U+F0F0-F0F2,U+F0F4-F0F5,U+F0F8-F0FE,U+F102-F103,U+F106,U+F108-F10B,U+F10D-F10E,U+F112,U+F118-F11C,U+F11E,U+F120,U+F122-F127,U+F129-F12C,U+F12E,U+F130-F132,U+F134-F135,U+F137-F13A,U+F13D-F13E,U+F141,U+F143-F149,U+F14B-F14E,U+F150-F152,U+F154,U+F156,U+F158,U+F15B,U+F15D-F15E,U+F160-F165,U+F175-F178,U+F182-F183,U+F185-F186,U+F188,U+F18E,U+F190-F193,U+F195-F197,U+F199,U+F19D,U+F1AB-F1AC,U+F1AE,U+F1B0-F1B3,U+F1B8,U+F1BA-F1BB,U+F1C1-F1C2,U+F1C4,U+F1C7-F1C9,U+F1CD-F1CE,U+F1DC-F1DD,U+F1E0-F1E6,U+F1EA-F1EB,U+F1F6-F1F7,U+F1F9-F1FE,U+F204-F207,U+F20A-F20B,U+F217-F21A,U+F21C-F21E,U+F221-F22D,U+F233,U+F236,U+F238-F239,U+F240-F244,U+F246-F248,U+F24D,U+F250-F251,U+F253-F25D,U+F271,U+F273,U+F276-F27B,U+F28D-F28E,U+F290-F292,U+F29A,U+F29D-F29E,U+F2A0-F2A4,U+F2A7-F2A8,U+F2B4,U+F2B6-F2B7,U+F2BB-F2BC,U+F2C1-F2C3,U+F2C7-F2CE,U+F2D0-F2D4,U+F2DB-F2DC,U+F2E5,U+F2E7,U+F2F2,U+F2F5,U+F2FE,U+F302,U+F305,U+F309-F30C,U+F31C,U+F31E,U+F328,U+F332,U+F337-F338,U+F358-F35B,U+F360,U+F363,U+F381,U+F386-F387,U+F390,U+F3A5,U+F3BE,U+F3C1,U+F3C5,U+F3C9,U+F3CD-F3CF,U+F3D1,U+F3DD,U+F3E0,U+F3E5,U+F3FA-F3FB,U+F406,U+F410,U+F425,U+F432-F434,U+F436,U+F439-F43A,U+F43C,U+F43F,U+F441,U+F443,U+F445,U+F447,U+F44B,U+F44E,U+F450,U+F453,U+F458,U+F45C-F45D,U+F45F,U+F461-F462,U+F469-F46B,U+F46D,U+F470-F472,U+F474,U+F477-F479,U+F47D-F47F,U+F481-F482,U+F484-F487,U+F48B,U+F48D-F48E,U+F490-F494,U+F497,U+F49E,U+F4AD,U+F4B3,U+F4B8-F4BA,U+F4BD-F4BE,U+F4C0-F4C2,U+F4C4,U+F4C6,U+F4CD-F4CE,U+F4D3,U+F4D6-F4DB,U+F4DE-F4DF,U+F4E2-F4E3,U+F4E6,U+F4FA-F4FB,U+F4FE-F4FF,U+F501-F504,U+F508,U+F515-F51D,U+F51F-F520,U+F522-F528,U+F52A-F53E,U+F540,U+F545-F54F,U+F551-F55F,U+F561-F56B,U+F56E-F572,U+F575-F591,U+F593-F59D,U+F59F-F5A2,U+F5A4-F5A7,U+F5AA-F5B1,U+F5B3-F5B4,U+F5B6,U+F5B8,U+F5BA-F5BD,U+F5BF-F5C5,U+F5C7-F5CB,U+F5CD-F5CE,U+F5D0-F5D2,U+F5D7,U+F5DA,U+F5DC,U+F5DE-F5DF,U+F5E1,U+F5E4,U+F5E7,U+F5EB,U+F5EE,U+F5FC,U+F601,U+F604,U+F610,U+F613,U+F619,U+F61F,U+F621,U+F624,U+F629-F62A,U+F62E-F630,U+F637,U+F63B-F63C,U+F641,U+F644,U+F647,U+F64A,U+F64F,U+F651,U+F653-F655,U+F662,U+F664-F666,U+F669-F66B,U+F66D,U+F66F,U+F674,U+F676,U+F678-F679,U+F67B-F67C,U+F67F,U+F681-F684,U+F687-F689,U+F696,U+F698-F69B,U+F6A0-F6A1,U+F6A7,U+F6A9,U+F6AD,U+F6B6-F6B7,U+F6BB,U+F6BE,U+F6C0,U+F6C3-F6C4,U+F6C8,U+F6CF,U+F6D1,U+F6D3,U+F6D5,U+F6D7,U+F6D9,U+F6DE,U+F6E2-F6E3,U+F6E6,U+F6E8,U+F6EC-F6ED,U+F6F0-F6F2,U+F6FA,U+F6FC,U+F6FF-F700,U+F70B-F70C,U+F70E,U+F714-F715,U+F717,U+F71E,U+F722,U+F728-F729,U+F72B,U+F72E-F72F,U+F73B-F73D,U+F740,U+F743,U+F747,U+F74D,U+F751-F753,U+F756,U+F75A-F75B,U+F75E-F75F,U+F769,U+F76B-F76C,U+F76F-F770,U+F772-F773,U+F77C-F77D,U+F780-F781,U+F786-F788,U+F78C,U+F793-F794,U+F796,U+F79C,U+F79F-F7A0,U+F7A2,U+F7A4-F7A6,U+F7A9-F7AB,U+F7AD-F7AE,U+F7B5-F7B6,U+F7B9-F7BA,U+F7BD,U+F7BF-F7C0,U+F7C2,U+F7C4-F7C5,U+F7C9-F7CA,U+F7CC-F7CE,U+F7D0,U+F7D2,U+F7D7-F7D8,U+F7DA,U+F7E4-F7E6,U+F7EC,U+F7EF,U+F7F2-F7F3,U+F7F5,U+F7F7,U+F7FA-F7FB,U+F805-F807,U+F80A-F80D,U+F80F-F810,U+F812,U+F815-F816,U+F818,U+F81D,U+F827-F82A,U+F82F,U+F83E,U+F84A,U+F84C,U+F850,U+F853,U+F85E,U+F863,U+F86D,U+F879,U+F87B-F87D,U+F881-F882,U+F884-F887,U+F891,U+F897,U+F8C0-F8C1,U+F8CC,U+F8D7,U+F8D9,U+F8EF,U+F8FF,U+1F17F,U+1F308,U+1F30B,U+1F30D-1F30F,U+1F319,U+1F321,U+1F326-1F327,U+1F329-1F32A,U+1F32D,U+1F331-1F332,U+1F336,U+1F34B,U+1F34E-1F34F,U+1F368,U+1F36A,U+1F374,U+1F377-1F378,U+1F381-1F382,U+1F393,U+1F397,U+1F399,U+1F39E-1F39F,U+1F3A7,U+1F3AD,U+1F3B2,U+1F3B5,U+1F3C0-1F3C3,U+1F3C5-1F3C6,U+1F3C8,U+1F3CA,U+1F3CD,U+1F3D0,U+1F3D3-1F3D4,U+1F3D6,U+1F3D9,U+1F3DB,U+1F3E0,U+1F3E5,U+1F3E8,U+1F3EB,U+1F404,U+1F408-1F409,U+1F40E,U+1F415,U+1F41F,U+1F44D-1F44E,U+1F455,U+1F47B,U+1F480,U+1F489,U+1F48E,U+1F494,U+1F499-1F49C,U+1F4A1,U+1F4A3,U+1F4A7,U+1F4A9,U+1F4AC,U+1F4B0,U+1F4BB,U+1F4BF-1F4C0,U+1F4C4,U+1F4CB-1F4CF,U+1F4D6,U+1F4DC-1F4E1,U+1F4F0-1F4F1,U+1F4F6-1F4F7,U+1F4FB,U+1F500-1F501,U+1F508,U+1F50A-1F50C,U+1F515-1F516,U+1F518,U+1F525,U+1F527-1F528,U+1F52C,U+1F547,U+1F549-1F54E,U+1F56E,U+1F571,U+1F577,U+1F57B,U+1F57D,U+1F588,U+1F58B-1F58C,U+1F595-1F596,U+1F5A4-1F5A5,U+1F5B1,U+1F5B4,U+1F5B7-1F5B8,U+1F5CB,U+1F5D5-1F5D6,U+1F5E9,U+1F5FA,U+1F600-1F606,U+1F609-1F60A,U+1F60D,U+1F610,U+1F617-1F619,U+1F61B-1F61D,U+1F620,U+1F622,U+1F626,U+1F62B-1F62E,U+1F633,U+1F636,U+1F642,U+1F644,U+1F681,U+1F686,U+1F68A,U+1F68D,U+1F690-1F691,U+1F696-1F697,U+1F69C,U+1F6A1-1F6A2,U+1F6A6,U+1F6AA,U+1F6AC-1F6AD,U+1F6B0,U+1F6B2,U+1F6B4,U+1F6B6,U+1F6BD,U+1F6BF,U+1F6C1,U+1F6CC,U+1F6CE,U+1F6D0,U+1F6E1,U+1F6E3,U+1F6EB-1F6EC,U+1F6F0,U+1F6FB,U+1F7E5-1F7EB,U+1F90D-1F90E,U+1F91A,U+1F91D,U+1F923,U+1F929,U+1F941-1F944,U+1F94E,U+1F953,U+1F955,U+1F95A,U+1F977,U+1F990,U+1F99B,U+1F9A6,U+1F9B4,U+1F9B7,U+1F9CD,U+1F9E0-1F9E1,U+1F9E6,U+1F9E9-1F9EA,U+1F9EC-1F9ED,U+1F9EF-1F9F0,U+1F9F2-1F9F3,U+1F9F9,U+1F9FB-1F9FC,U+1FA79-1FA7A,U+1FA91,U+1FA9B,U+1FAB6,U+1FAC1;}
@font-face{font-family:"TSS Icons Solid";font-style:normal;font-weight:900;font-display:block;src:url("/vendor/tss-icons/fa-solid-tss.woff2?v=41756256a033") format("woff2"),url("/vendor/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");unicode-range:U+24,U+25,U+2B,U+3F,U+A5,U+AB,U+BB,U+D7,U+F7,U+2039,U+203A,U+20A9,U+20AC,U+2190,U+2191,U+2192,U+2193,U+21BA,U+21BB,U+2304,U+2329,U+232A,U+2399,U+23F8,U+23F9,U+23FB,U+25B6,U+25CF,U+2611,U+2696,U+2699,U+26A0,U+26A1,U+26AA,U+26AB,U+26DF,U+2705,U+2709,U+270F,U+2713,U+2714,U+2715,U+2716,U+274C,U+2753,U+2754,U+2795,U+2797,U+2934,U+2B24,U+2B50,U+E522,U+F002,U+F003,U+F005,U+F006,U+F007,U+F00C,U+F00D,U+F011,U+F013,U+F014,U+F017,U+F019,U+F01C,U+F01E,U+F021,U+F022,U+F023,U+F024,U+F02A,U+F02B,U+F02C,U+F02D,U+F02F,U+F032,U+F03A,U+F03E,U+F040,U+F044,U+F046,U+F04B,U+F04C,U+F04D,U+F051,U+F053,U+F054,U+F055,U+F056,U+F057,U+F058,U+F059,U+F05A,U+F05C,U+F05D,U+F05E,U+F060,U+F061,U+F062,U+F063,U+F067,U+F06A,U+F06E,U+F071,U+F073,U+F077,U+F078,U+F07A,U+F07B,U+F07C,U+F080,U+F084,U+F085,U+F086,U+F093,U+F09C,U+F09D,U+F0A1,U+F0A2,U+F0AC,U+F0AE,U+F0B0,U+F0B1,U+F0C0,U+F0C1,U+F0C5,U+F0C7,U+F0CA,U+F0CB,U+F0D1,U+F0DC,U+F0E0,U+F0E2,U+F0E6,U+F0E7,U+F0E8,U+F0EE,U+F0F3,U+F0F6,U+F0F7,U+F100,U+F101,U+F104,U+F105,U+F107,U+F10C,U+F110,U+F111,U+F114,U+F115,U+F11D,U+F121,U+F128,U+F12D,U+F133,U+F140,U+F142,U+F14A,U+F153,U+F155,U+F157,U+F159,U+F15C,U+F187,U+F19C,U+F1AD,U+F1B9,U+F1C0,U+F1C3,U+F1C5,U+F1C6,U+F1D8,U+F1D9,U+F1DA,U+F1DB,U+F1DE,U+F1EC,U+F1F8,U+F200,U+F201,U+F21B,U+F234,U+F235,U+F245,U+F249,U+F24A,U+F24E,U+F252,U+F26C,U+F272,U+F274,U+F275,U+F283,U+F28B,U+F28C,U+F295,U+F29C,U+F2B5,U+F2B9,U+F2BA,U+F2BD,U+F2BE,U+F2C0,U+F2EA,U+F2ED,U+F2F1,U+F2F6,U+F2F9,U+F303,U+F304,U+F35D,U+F362,U+F382,U+F3BF,U+F3ED,U+F3FD,U+F3FF,U+F422,U+F424,U+F466,U+F468,U+F46C,U+F496,U+F4A1,U+F4FC,U+F4FD,U+F500,U+F505,U+F506,U+F507,U+F509,U+F51E,U+F521,U+F529,U+F53F,U+F541,U+F542,U+F543,U+F544,U+F550,U+F560,U+F56C,U+F56D,U+F573,U+F574,U+F5B7,U+F5FD,U+F625,U+F658,U+F65D,U+F65E,U+F6DD,U+F783,U+F784,U+F7D9,U+F802,U+F8E5,U+1F310,U+1F3A8,U+1F3E2,U+1F3F4,U+1F3F7,U+1F441,U+1F451,U+1F464,U+1F465,U+1F4B2,U+1F4B3,U+1F4BC,U+1F4BE,U+1F4C1,U+1F4C2,U+1F4C5,U+1F4C6,U+1F4D4,U+1F4E2,U+1F4E6,U+1F504,U+1F50D,U+1F511,U+1F512,U+1F513,U+1F514,U+1F517,U+1F534,U+1F535,U+1F553,U+1F56B,U+1F575,U+1F582,U+1F58A,U+1F5A8,U+1F5A9,U+1F5AA,U+1F5B6,U+1F5B9,U+1F5BB,U+1F5BF,U+1F5C1,U+1F5CE,U+1F5D8,U+1F5D9,U+1F5EA,U+1F698,U+1F69A,U+1F6AB,U+1F6D2,U+1F7E0,U+1F7E1,U+1F7E2,U+1F7E3,U+1F7E4,U+1F916,U+1F9FE;}
@font-face{font-family:"bootstrap-icons";font-style:normal;font-weight:400;font-display:block;src:url("/vendor/tss-icons/bootstrap-tss.woff2?v=7b8380c96b24") format("woff2"),url("/vendor/bootstrap-icons/1.11.3/font/fonts/bootstrap-icons.woff2") format("woff2");unicode-range:U+F116,U+F117,U+F128,U+F12F,U+F130,U+F131,U+F132,U+F138,U+F148,U+F149,U+F14A,U+F14B,U+F14C,U+F14E,U+F154,U+F17C,U+F17E,U+F189,U+F18A,U+F1A2,U+F1BC,U+F1C3,U+F1C5,U+F1C7,U+F1CC,U+F1D2,U+F1D8,U+F1DD,U+F1E0,U+F1E2,U+F1E8,U+F1EF,U+F1F1,U+F1F8,U+F209,U+F214,U+F227,U+F229,U+F23A,U+F246,U+F24A,U+F24D,U+F252,U+F264,U+F268,U+F26A,U+F26B,U+F26E,U+F26F,U+F270,U+F271,U+F272,U+F282,U+F284,U+F285,U+F286,U+F28B,U+F28C,U+F292,U+F293,U+F297,U+F2C0,U+F2CC,U+F2D6,U+F2E6,U+F2ED,U+F2EE,U+F302,U+F30A,U+F32F,U+F331,U+F333,U+F33A,U+F33B,U+F340,U+F341,U+F35A,U+F35F,U+F360,U+F368,U+F36D,U+F381,U+F389,U+F38B,U+F38D,U+F392,U+F3B9,U+F3CC,U+F3D1,U+F3D5,U+F3D6,U+F3D8,U+F3D9,U+F3DE,U+F3DF,U+F3E1,U+F3E5,U+F3F2,U+F3F9,U+F3FC,U+F3FF,U+F415,U+F417,U+F41F,U+F423,U+F425,U+F42D,U+F431,U+F43D,U+F43E,U+F444,U+F44F,U+F45B,U+F473,U+F477,U+F478,U+F479,U+F47A,U+F47B,U+F484,U+F496,U+F4B3,U+F4C8,U+F4CA,U+F4CB,U+F4CF,U+F4D0,U+F4D3,U+F4D6,U+F4D7,U+F4DA,U+F4DB,U+F4DD,U+F4E0,U+F4E1,U+F4E9,U+F4EB,U+F4FA,U+F4FE,U+F501,U+F505,U+F520,U+F525,U+F52A,U+F52F,U+F530,U+F538,U+F567,U+F56B,U+F580,U+F586,U+F588,U+F589,U+F5A2,U+F5C1,U+F5C5,U+F5C7,U+F5D4,U+F5DB,U+F5DE,U+F5EA,U+F5F8,U+F603,U+F615,U+F621,U+F623,U+F62A,U+F62C,U+F62E,U+F633,U+F638,U+F63E,U+F646,U+F64D,U+F659,U+F673,U+F675,U+F69E,U+F6B3,U+F6B9,U+F6C0,U+F6C7,U+F6CA,U+F759,U+F777,U+F78B,U+F7BF,U+F7D8,U+F7E1,U+F7F6,U+F867,U+F8A7,U+F8C4;}

/* bundled: css/tss-icon-bindings.css */
/* Bind before staged vendor CSS paints; preserve regular/brands compatibility. */
.fa,.fas,.fa-solid{font-family:"TSS Icons Solid"!important;--fa-style-family:"TSS Icons Solid";}
.fa.fa-regular,.fa.far{font-family:"Font Awesome 6 Free"!important;--fa-style-family:"Font Awesome 6 Free";}
.fa.fa-brands,.fa.fab{font-family:"Font Awesome 6 Brands"!important;--fa-style-family:"Font Awesome 6 Brands";}

/* bundled: css/tss-content-typography.css */
/* Shared desktop content typography. Navigation, dialogs, print and mobile keep
   their own hierarchy; only page, filter and result roles are normalized. */
@media (min-width: 992px) {
  body.tss-renewal {
    --tss-content-font: "Noto Sans KR", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --tss-content-title-size: 24px;
    --tss-content-section-size: 16px;
    --tss-content-body-size: 13px;
    --tss-content-label-size: 12px;
  }

  body.tss-renewal :is(main.container, main.content, main.super-admin-main) {
    font-family: var(--tss-content-font);
    color: var(--rn-text-primary, var(--tss-text));
  }

  body.tss-renewal :is(
    .help-page-header__main > h1, .help-page-header__main > h2,
    .bd-page-hero > h1, .bd-page-hero > h2,
    .approval-page-header h1, .approval-page-header h2,
    .ts-page-header .ts-page-title, .du-header .ts-page-title,
    .dashboard-header .ts-page-title, .pa-header .pa-title,
    .fd-header .fd-title, .doc-lib-title,
    .vehicle-page .bd-title, .logistics-desktop-topbar h1,
    .tickets-page-title, .wb-page-title,
    .mrs-hero__title, .admin-home-title,
    .main-title, .doc-lib-main-title,
    .doc-lib-detail-title, .approval-detail-header__title,
    .du-page--approval-form > h2:first-child,
    .ticket-admin-detail__title,
    .vehicle-admin-panel > .container > h2:first-child
  ) {
    margin-top: 0;
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-title-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--rn-text-primary, var(--tss-text));
  }

  body.tss-renewal main.super-admin-main :is(
    .help-page-header__main > h1,
    h1.h2, .border-bottom > h2.h4,
    .d-flex.justify-content-between > div > h2.h4,
    .d-flex.justify-content-between > h1.h2,
    .container-fluid > .d-flex > h2.mb-0,
    .help-page-header__main > h2.h3,
    :is(.container-fluid.py-4, .doc-archived-page, .doc-reindex-page)
      > .d-flex > div > h2:first-child,
    .vehicle-admin-panel > .container > h2:first-child
  ) {
    margin-top: 0;
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-title-size);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--rn-text-primary, var(--tss-text));
  }

  body.tss-renewal :is(
    .help-page-header__main > p, .ts-page-subtitle,
    .approval-page-header p, .bd-page-hero p,
    .pa-header .pa-lead, .fd-header .fd-lead
  ) {
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-body-size);
    font-weight: 400;
    line-height: 1.5;
    color: var(--rn-text-secondary, var(--tss-muted));
  }

  body.tss-renewal :is(
    .du-filter .card-title, .ts-ref-panel .card-header .card-title,
    .du-page .card-header .card-title, .approval-list-filter__title,
    .tickets-search-title, .sr-filter-panel-title,
    .pa-card-title, .fd-filter-title, .approval-list-title,
    .rn-deal-list__titlebar h2,
    .bd-post-list-title, .wb-panel-title,
    main.container .card > .card-header > .card-title,
    main.content .card > .card-header > .card-title,
    main.super-admin-main .card > .card-header > .card-title,
    .du-view-title, .mrs-panel__title
  ) {
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-section-size);
    font-weight: 700;
    line-height: 1.5;
    color: var(--rn-text-primary, var(--tss-text));
  }

  body.tss-renewal :is(
    .du-page .form-label, .du-page .du-field-label,
    .ts-ref-panel .form-label, .approval-list-filter .form-label,
    .tickets-search label, .logistics-desktop-viewport .du-field-label,
    .ts-ref-filter .form-label, .template-list-filter .form-label,
    main.container .card .form-label,
    main.content .card .form-label,
    main.super-admin-main .card .form-label
  ) {
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-label-size);
    font-weight: 600;
    line-height: 1.5;
    color: var(--rn-text-secondary, var(--tss-muted));
  }

  body.tss-renewal :is(
    .du-page .table > :not(caption) > * > *,
    .ts-ref-panel .table > :not(caption) > * > *,
    .approval-list-row, .ticket-card,
    .logistics-desktop-board, .bd-board-card,
    .rn-data-list__row
  ) {
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-body-size);
    line-height: 1.5;
  }

  body.tss-renewal :is(main.container, main.content, main.super-admin-main)
    .table > :not(caption) > * > * {
    font-family: var(--tss-content-font);
    font-size: var(--tss-content-body-size);
    line-height: 1.5;
  }

  body.tss-renewal :is(
    .du-page .table thead th, .ts-ref-panel .table thead th,
    .approval-list-head, .rn-deal-table__header,
    .rn-data-list__head,
    main.container .table thead th,
    main.content .table thead th,
    main.super-admin-main .table thead th
  ) {
    font-size: var(--tss-content-label-size);
    font-weight: 600;
    color: var(--rn-text-secondary, var(--tss-muted));
  }

  /* These are decorative heading glyphs. Action and status icons remain. */
  body.tss-renewal :is(
    .help-page-header__main > h1, .help-page-header__main > h2,
    .bd-page-hero > h1, .bd-page-hero > h2,
    .approval-page-header h1, .approval-page-header h2,
    .ts-page-title, .pa-title, .fd-title,
    .tickets-page-title, .wb-page-title,
    .mrs-hero__title, .main-title, .doc-lib-title, .doc-lib-main-title,
    .doc-lib-detail-title, .approval-detail-header__title,
    .du-page--approval-form > h2:first-child,
    .ticket-admin-detail__title,
    .rn-deal-list__titlebar h2,
    .du-filter .card-title, .du-page .card-header .card-title,
    .ts-ref-panel .card-header .card-title,
    .sr-filter-panel-title, .pa-card-title, .wb-panel-title,
    .du-view-title, .mrs-panel__title,
    main.container .card > .card-header > .card-title,
    main.content .card > .card-header > .card-title,
    main.super-admin-main .card > .card-header > .card-title,
    main.super-admin-main h1.h2,
    main.super-admin-main .d-flex.justify-content-between > div > h2.h4,
    main.super-admin-main .container-fluid > .d-flex > h2.mb-0,
    main.super-admin-main :is(.container-fluid.py-4, .doc-archived-page, .doc-reindex-page)
      > .d-flex > div > h2:first-child,
    main.super-admin-main .vehicle-admin-panel > .container > h2:first-child
  ) > i:first-child {
    display: none;
  }
}

/* bundled: css/tss-mobile-tools.css */
.tss-mobile-tools,.tss-theme-label { display: none; }
@media (max-width: 991.98px) {
    .tss-mobile-tools-ready .tss-mobile-tools { display: flex; position: relative; align-items: center; }
    .tss-mobile-tools-trigger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 12px;
        background: transparent; color: var(--tss-text); cursor: pointer;
    }
    .tss-mobile-tools-trigger svg { width: 22px; height: 22px; }
    .tss-mobile-tools-trigger:hover,.tss-mobile-tools-trigger[aria-expanded="true"] { background: var(--tss-surface-muted); }
    .tss-mobile-tools-trigger:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
    .tss-mobile-tools-panel {
        position: absolute; top: calc(100% + 8px); right: 0; z-index: 1040;
        width: 260px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 100px);
        overflow: auto; overscroll-behavior: contain; padding: 8px;
        border: 1px solid var(--tss-border); border-radius: 16px;
        background: var(--tss-surface); color: var(--tss-text); box-shadow: 0 8px 24px rgb(15 23 42 / 16%);
    }
    .tss-mobile-tools-panel[hidden],.tss-mobile-tools-section[hidden] { display: none !important; }
    .tss-mobile-tools-section { padding: 6px; }
    .tss-mobile-tools-section + .tss-mobile-tools-section { border-top: 1px solid var(--tss-border); }
    .tss-mobile-tools-section h2 { margin: 0 0 4px; padding: 4px 8px; color: var(--tss-muted); font-size: 12px; font-weight: 500; }
    .navbar .tss-mobile-tools-panel .tss-mode-switcher { display: flex; flex-direction: column; padding: 0; border: 0; background: transparent; }
    .navbar .tss-mobile-tools-panel .tss-mode-link[aria-current="page"] { display: none; }
    .navbar .tss-mobile-tools-panel .tss-mode-link,
    .navbar .tss-mobile-tools-panel .nav-link,
    .navbar .tss-mobile-tools-panel .tss-theme-toggle {
        display: flex; align-items: center; justify-content: flex-start; gap: 12px;
        width: 100%; min-height: 44px; height: auto; padding: 10px 8px !important;
        border: 0; border-radius: 8px; background: transparent; color: var(--tss-text); font-size: 14px; font-weight: 500;
        text-align: left; text-decoration: none;
    }
    .navbar .tss-mobile-tools-panel .tss-theme-toggle-wrap { display: block !important; width: 100%; }
    .navbar .tss-mobile-tools-panel .tss-mode-link__label,
    .navbar .tss-mobile-tools-panel .nav-link span,
    .navbar .tss-mobile-tools-panel .tss-theme-label { display: inline !important; }
    .navbar .tss-mobile-tools-panel :is(.tss-mode-link,.nav-link,.tss-theme-toggle):hover { background: var(--tss-surface-muted); color: var(--tss-text); }
    .navbar .tss-mobile-tools-panel .tss-lang-switch { display: flex; justify-content: flex-start; gap: 8px; height: auto; padding: 0 8px; }
    .navbar .tss-mobile-tools-panel .tss-lang-switch__opt,
    .navbar .tss-mobile-tools-panel .tss-lang-switch__opt.is-active { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 64px; padding: 8px 12px; border-radius: 8px; }
    .navbar .tss-mobile-tools-panel .tss-lang-switch__opt.is-active { background: var(--tss-accent-soft); color: var(--tss-text); }
}