/* ==========================================================================
   hcMan AI Live Translator - 4대 풀-캔버스 통합 테마 엔진 (Full-Canvas Theme Engine)
   화면 전체 배경(Canvas & Background)이 180도 통째로 바뀌는 테마 시스템
   [옵션 A] 로열 딥 네이비 (공공·행정·제조 슬레이트 캔버스)
   [옵션 B] 소프트 인디고 (글로벌 B2B 라벤더 캔버스)
   [옵션 C] 딥 틸 에메랄드 (의료·케어 세이지 민트 캔버스)
   [옵션 D] 클래식 딥 다크 (사이버 미드나잇 올-다크 캔버스)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. [옵션 A] 로열 딥 네이비 (Navy Light Slate Canvas) - 기본 테마
   -------------------------------------------------------------------------- */
:root, [data-theme="navy"] {
    --theme-name: 'navy';
    --bg-canvas: #eef4fa;           /* 🌊 화면 전체를 감싸는 은은하고 품격 있는 네이비 슬레이트 캔버스 */
    --bg-dark: #eef4fa;
    --bg-nav: rgba(255, 255, 255, 0.95);
    --bg-card: #ffffff;
    --bg-card-sub: #f8fafc;
    --text-dark: #0f172a;           /* 딥 네이비 블랙 (선명하고 또렷함) */
    --text-main: #0f172a;           /* 기존 프로그램 공통 메인 텍스트 */
    --text-body: #334155;
    --text-caption: #1e293b;
    --text-muted: #64748b;
    --border-light: #cbd5e1;
    --border-card: #e2e8f0;
    --border-glass: #cbd5e1;
    --primary: #1e3a8a;             /* 로열 딥 네이비 포인트 */
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --primary-border: #bfdbfe;
    --primary-glow: rgba(30, 58, 138, 0.25);
    --accent-container: #0f172a;
    --accent-container-card: #1e293b;
    --accent-highlight: #38bdf8;
    --th-accent: #38bdf8;
    --th-primary: #1e3a8a;
    --th-primary-hover: #1d4ed8;
    --th-bg-header: #0f172a;
    --th-bg-body: #eef4fa;
    --th-card-border: #bfdbfe;
    --radius-btn: 9999px;
    --radius-card: 24px;
}

/* --------------------------------------------------------------------------
   2. [옵션 B] 소프트 인디고 (Indigo Lavender Canvas) - 글로벌 B2B 테크
   -------------------------------------------------------------------------- */
[data-theme="indigo"] {
    --theme-name: 'indigo';
    --bg-canvas: #f5f3ff;           /* 🚀 화면 전체를 감싸는 화사하고 트렌디한 라벤더 인디고 캔버스 */
    --bg-dark: #f5f3ff;
    --bg-nav: rgba(255, 255, 255, 0.95);
    --bg-card: #ffffff;
    --bg-card-sub: #faf5ff;
    --text-dark: #18181b;           /* 딥 인디고 블랙 (선명하고 또렷함) */
    --text-main: #18181b;           /* 기존 프로그램 공통 메인 텍스트 */
    --text-body: #3f3f46;
    --text-caption: #27272a;
    --text-muted: #71717a;
    --border-light: #ddd6fe;
    --border-card: #ede9fe;
    --border-glass: #ddd6fe;
    --primary: #4f46e5;             /* 소프트 인디고 블루 포인트 */
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --primary-border: #c7d2fe;
    --primary-glow: rgba(79, 70, 229, 0.25);
    --accent-container: #1e1b4b;
    --accent-container-card: #312e81;
    --accent-highlight: #818cf8;
    --th-accent: #818cf8;
    --th-primary: #4f46e5;
    --th-primary-hover: #4338ca;
    --th-bg-header: #1e1b4b;
    --th-bg-body: #f5f3ff;
    --th-card-border: #c7d2fe;
    --radius-btn: 9999px;
    --radius-card: 24px;
}

/* --------------------------------------------------------------------------
   3. [옵션 C] 딥 틸 에메랄드 (Sage Teal Mint Canvas) - 의료·글로벌 케어
   -------------------------------------------------------------------------- */
[data-theme="teal"] {
    --theme-name: 'teal';
    --bg-canvas: #f0fdfa;           /* 🌿 화면 전체를 감싸는 눈이 편안한 온화한 세이지 민트 캔버스 */
    --bg-dark: #f0fdfa;
    --bg-nav: rgba(255, 255, 255, 0.95);
    --bg-card: #ffffff;
    --bg-card-sub: #f0fdf4;
    --text-dark: #042f2e;           /* 딥 에메랄드 차콜 (선명하고 또렷함) */
    --text-main: #042f2e;           /* 기존 프로그램 공통 메인 텍스트 */
    --text-body: #134e4a;
    --text-caption: #134e4a;
    --text-muted: #475569;
    --border-light: #99f6e4;
    --border-card: #ccfbf1;
    --border-glass: #99f6e4;
    --primary: #0f766e;             /* 안정감 있는 딥 틸 포인트 */
    --primary-hover: #115e59;
    --primary-light: #f0fdfa;
    --primary-border: #99f6e4;
    --primary-glow: rgba(15, 118, 110, 0.25);
    --accent-container: #042f2e;
    --accent-container-card: #134e4a;
    --accent-highlight: #2dd4bf;
    --th-accent: #2dd4bf;
    --th-primary: #0f766e;
    --th-primary-hover: #115e59;
    --th-bg-header: #042f2e;
    --th-bg-body: #f0fdfa;
    --th-card-border: #99f6e4;
    --radius-btn: 9999px;
    --radius-card: 24px;
}

/* --------------------------------------------------------------------------
   4. [옵션 D] 클래식 딥 다크 (Deep Midnight All-Dark Canvas) - 사이버 다크
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
    --theme-name: 'dark';
    --bg-canvas: #0a0e1a;           /* 🌙 화면 전체를 감싸는 칠흑 같은 사이버 딥 다크 캔버스 */
    --bg-dark: #090a0f;
    --bg-nav: rgba(15, 23, 42, 0.96);
    --bg-card: #151d30;
    --bg-card-sub: #1e293b;
    --text-dark: #f8fafc;           /* 크리스탈 화이트 텍스트 */
    --text-main: #f8fafc;
    --text-body: #cbd5e1;
    --text-caption: #e2e8f0;
    --text-muted: #94a3b8;
    --border-light: rgba(255, 255, 255, 0.12);
    --border-card: rgba(255, 255, 255, 0.08);
    --border-glass: rgba(255, 255, 255, 0.12);
    --primary: #0284c7;             /* 사이버 스카이 블루 */
    --primary-hover: #38bdf8;
    --primary-light: rgba(2, 132, 199, 0.15);
    --primary-border: rgba(56, 189, 248, 0.4);
    --primary-glow: rgba(56, 189, 248, 0.4);
    --accent-container: #090d16;
    --accent-container-card: #111827;
    --accent-highlight: #38bdf8;
    --th-accent: #38bdf8;
    --th-primary: #0284c7;
    --th-primary-hover: #38bdf8;
    --th-bg-header: #0a0e1a;
    --th-bg-body: #0a0e1a;
    --th-card-border: rgba(56, 189, 248, 0.3);
    --radius-btn: 9999px;
    --radius-card: 24px;
}

/* ==========================================================================
   공통 테마 콤보박스 (Global Theme Switcher Pill)
   ========================================================================== */
.theme-picker-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: 6px 14px;
    border-radius: 9999px;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.theme-picker-pill:hover {
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

.global-theme-selector {
    background: transparent;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-dark);
    cursor: pointer;
    outline: none;
    font-family: inherit;
}

.global-theme-selector option {
    background: #0f172a;
    color: #f8fafc;
    font-size: 13px;
    padding: 6px;
}

/* ==========================================================================
   5. [풀-캔버스 배경 연동] 전자서식 관리 센터 (#forms-view) & 헤더 (#main-header)
   A(네이비 슬레이트), B(소프트 인디고), C(세이지 민트), D(사이버 다크) 전체 배경 전환
   ========================================================================== */

/* 전체 레이아웃 캔버스 */
body[data-theme], 
[data-theme] #app-container,
[data-theme] #workspace-view,
[data-theme] #forms-view {
    background: var(--bg-canvas) !important;
    color: var(--text-dark);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* 상단 워크스페이스 메인 헤더 */
[data-theme] #main-header {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-theme] #main-header .btn-back-hub {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

[data-theme] #main-header .btn-back-hub:hover {
    background: var(--bg-card-sub) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

[data-theme] #main-header .workspace-active-tag {
    color: var(--text-dark) !important;
}

/* ==========================================================================
   #forms-view 내부 컴포넌트 테마 스타일 (통계 카드, 툴바, 탭, 검색, 테이블)
   ========================================================================== */

/* 상단 영역 구분선 */
[data-theme] .forms-header-area {
    border-bottom: 1px solid var(--border-light) !important;
}

/* 실시간 통계 카운터 카드 */
[data-theme] .forms-stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}
[data-theme] .forms-stat-card span {
    color: var(--text-muted) !important;
}
[data-theme] .forms-stat-card h3 {
    color: var(--text-dark) !important;
}

/* 카테고리 & 검색 툴바 */
[data-theme] .forms-toolbar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

[data-theme] .forms-tab-btn {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-body) !important;
}
[data-theme] .forms-tab-btn:hover {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
[data-theme] .forms-tab-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px var(--primary-glow) !important;
}

[data-theme] #forms-board-search-input {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}
[data-theme] #forms-board-search-input::placeholder {
    color: var(--text-muted) !important;
}

/* 게시판 테이블 카드 및 테이블 바디 */
[data-theme] .forms-board-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

[data-theme] .forms-board-table thead tr {
    background: var(--bg-card-sub) !important;
    border-bottom: 2px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}

[data-theme] .forms-board-table thead th {
    background: var(--bg-card-sub) !important;
    color: var(--text-muted) !important;
    border-bottom: 2px solid var(--border-light) !important;
}

[data-theme] .forms-board-table tbody tr {
    border-bottom: 1px solid var(--border-card) !important;
    background: transparent;
    transition: background 0.15s ease;
}

[data-theme] .forms-board-table tbody tr:hover {
    background: var(--bg-card-sub) !important;
}

[data-theme] .forms-board-table td {
    border-bottom: 1px solid var(--border-card) !important;
    color: var(--text-body);
}

[data-theme] .forms-board-row-title {
    color: var(--text-dark) !important;
}

[data-theme] .forms-board-row-desc {
    color: var(--text-body) !important;
}

[data-theme] .forms-board-row-code {
    color: var(--text-muted) !important;
}

[data-theme] .forms-board-row-inactive {
    opacity: 0.65;
    background: var(--bg-card-sub) !important;
}

/* 하단 페이징 바 */
[data-theme] .forms-footer-bar {
    background: var(--bg-card-sub) !important;
    border-top: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}

/* ==========================================================================
   6. [포털 홈 #hub-view] 4대 테마 완벽 연동 (A~C 라이트 시 또렷한 고대비 보장)
   ========================================================================== */
[data-theme] #hub-view {
    background: var(--bg-canvas) !important;
    color: var(--text-dark) !important;
}

[data-theme] #hub-view header {
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme] #hub-view .logo-area span {
    color: var(--text-dark) !important;
}

[data-theme] #hub-view header button.btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

[data-theme] #hub-view header span {
    color: var(--text-muted) !important;
}

/* 히어로 텍스트 & 태그 */
[data-theme] .hub-tag {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--primary) !important;
}

[data-theme] .hub-title {
    color: var(--text-dark) !important;
    text-shadow: none !important;
}

[data-theme] .hub-subtitle {
    color: var(--text-body) !important;
}

/* 3대 서비스 런처 카드 */
[data-theme] .hub-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme] .hub-card-title {
    color: var(--text-dark) !important;
}

[data-theme] .hub-card-desc {
    color: var(--text-body) !important;
}

[data-theme] .hub-card-tags span {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}

[data-theme] .hub-card-badge {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--primary) !important;
}

/* ==========================================================================
   7. [1:1 스마트 창구 & 강연실] 대화 카드, 자막, 타임라인 완벽 테마 연동
   ========================================================================== */
[data-theme] .translation-card.glass-panel {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme] .card-header {
    background: var(--bg-card-sub) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

[data-theme] .person-tag {
    color: var(--text-dark) !important;
}

[data-theme] .btn-icon {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

[data-theme] .control-group label {
    color: var(--text-muted) !important;
}

[data-theme] .select-field {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

/* 발표자 & 창구 비디오 오버레이 (A~C 라이트 시 어두운 그늘 제거) */
[data-theme="navy"] .video-overlay,
[data-theme="indigo"] .video-overlay,
[data-theme="teal"] .video-overlay {
    background: transparent !important;
    opacity: 0 !important;
}

/* 음파 인디케이터 (다크 박스 제거하고 테마 카드화) */
[data-theme] .audio-indicator {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

[data-theme] .mic-status-badge.inactive {
    background: var(--bg-card-sub) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-light) !important;
}

/* 발표자 컨트롤 행 */
[data-theme] .presenter-controls-row {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* 자막 표시 영역 (다크 섀도우 제거, 맑고 또렷한 고대비) */
[data-theme] .card-caption-area {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

[data-theme] .caption-row .caption-label {
    color: var(--text-muted) !important;
    font-weight: 700;
}

[data-theme] .original-caption {
    color: var(--text-dark) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    opacity: 0.95 !important;
}

[data-theme] .translated-caption {
    color: var(--primary) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

[data-theme] .shortcut-helper {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-body) !important;
}

/* 우측 타임라인 스토리 패널 (말풍선 원문 및 텍스트 고대비 선명화) */
[data-theme] #transcript-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme] #transcript-section h2 {
    color: var(--text-dark) !important;
}

[data-theme] .btn-clear-log {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-muted) !important;
}

[data-theme] .empty-state p {
    color: var(--text-muted) !important;
}

[data-theme] .log-sender-name {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
}

/* 상대방/발표자 말풍선 (흰색 배경 + 선명한 텍스트) */
[data-theme] .msg-other .log-bubble {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* [핵심] 말풍선 안의 원문 텍스트 - 흐릿하지 않고 또렷하게! */
[data-theme] .log-text-orig,
[data-theme] .msg-other .log-text-orig {
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    opacity: 0.9 !important;
}

/* 말풍선 안의 번역 텍스트 */
[data-theme] .msg-other .log-text-trans {
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

[data-theme] .log-timestamp {
    color: var(--text-muted) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   8. [고객 창구 모니터 customer.html] 4대 테마 완벽 연동
   ========================================================================== */
[data-theme] body.customer-screen,
[data-theme] #customer-container {
    background: var(--bg-canvas) !important;
    color: var(--text-dark) !important;
}

[data-theme] #customer-header {
    background: var(--bg-nav) !important;
    border-bottom: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

[data-theme] #customer-screen-title {
    color: var(--text-dark) !important;
}

[data-theme] .cust-live-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

[data-theme] #customer-live-trans {
    color: var(--text-dark) !important;
}

[data-theme] #customer-live-orig {
    color: var(--text-muted) !important;
}

[data-theme] .cust-speak-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

[data-theme] .cust-speak-text strong {
    color: var(--text-dark) !important;
}

[data-theme] .cust-speak-text span {
    color: var(--text-muted) !important;
}

[data-theme] .cust-mic-btn {
    background: var(--bg-card-sub) !important;
    border: 2px solid var(--border-light) !important;
}

[data-theme] .cust-mic-label {
    color: var(--text-dark) !important;
}

[data-theme] #cust-mic-sub {
    color: var(--text-muted) !important;
}

[data-theme] #customer-right-timeline {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

[data-theme] #customer-right-timeline h2 {
    color: var(--text-dark) !important;
}

[data-theme] #customer-voice-bar {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}

/* ==========================================================================
   9. [관리자 로그인 모달 #admin-login-modal] 테마 스타일 (취소/확인 2버튼 선명화)
   ========================================================================== */
[data-theme] #admin-login-modal .modal-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}
[data-theme] #admin-login-modal h2 {
    color: var(--text-dark) !important;
}
[data-theme] #admin-login-modal label {
    color: var(--text-dark) !important;
}
[data-theme] #admin-login-modal input {
    background: var(--bg-card-sub) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}
[data-theme] #admin-login-modal .btn-modal-cancel {
    background: var(--bg-card-sub) !important;
    border: 1.5px solid var(--border-light) !important;
    color: var(--text-dark) !important;
}
[data-theme] #admin-login-modal .btn-modal-cancel:hover {
    background: var(--bg-card) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: translateY(-1px);
}
[data-theme] #admin-login-modal .btn-modal-confirm:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}