/* ===== WIO CRM Theme System ===== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* 기본 변수 (테마 미적용 시 fallback) */
:root {
    --bg-primary: #0d0d0d;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #262626;
    --bg-hover: #333;
    --border: #333;
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --accent: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-text: #ffffff;
    --success: #22c55e;
    --success-bg: rgba(34,197,94,0.15);
    --success-text: #ffffff;
    --warning: #eab308;
    --warning-bg: rgba(234,179,8,0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239,68,68,0.15);
}

/* Theme: Linear Dark */
[data-theme="linear-dark"] {
    color-scheme: dark;
    --bg-primary: #0d0d0d;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #262626;
    --bg-hover: #333;
    --border: #333;
    --text-primary: #f5f5f5;
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --accent: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-text: #ffffff;
    --success: #22c55e;
    --success-bg: rgba(34,197,94,0.15);
    --success-text: #ffffff;
    --warning: #eab308;
    --warning-bg: rgba(234,179,8,0.15);
    --danger: #ef4444;
    --danger-bg: rgba(239,68,68,0.15);
    /* 스타일 변수 */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --sidebar-width: 220px;
    --border-width: 1px;
    --input-height: 36px;
    --btn-shadow: none;
    --card-shadow: var(--shadow-sm);
}

/* Theme: Linear Light */
[data-theme="linear-light"] {
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-secondary: #fafaf9;
    --bg-tertiary: #f5f5f4;
    --bg-hover: #eeeeec;
    --border: #e8e8e6;
    --text-primary: #1c1c1c;
    --text-secondary: #5c5c5c;
    --text-muted: #8c8c8c;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #ffffff;
    --success: #059669;
    --success-bg: #ecfdf5;
    --success-text: #ffffff;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    /* 스타일 변수 */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --sidebar-width: 220px;
    --border-width: 1px;
    --input-height: 36px;
    --btn-shadow: none;
    --card-shadow: var(--shadow-sm);
}

/* Theme: Notion - 문서 중심, 미니멀, 클린 */
[data-theme="notion"] {
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-secondary: #fbfbfa;
    --bg-tertiary: #ffffff;
    --bg-hover: #efefef;
    --border: #e6e4e0;
    --text-primary: #37352f;
    --text-secondary: #787774;
    --text-muted: #9b9a97;
    --accent: #2383e2;
    --accent-hover: #1a73d1;
    --accent-text: #ffffff;
    --success: #0f7b6c;
    --success-bg: rgba(15,123,108,0.1);
    --success-text: #ffffff;
    --warning: #d9730d;
    --warning-bg: rgba(217,115,13,0.1);
    --danger: #e03e3e;
    --danger-bg: rgba(224,62,62,0.1);
    /* 스타일 변수 - 미니멀, 넓은 여백 */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: none;
    --shadow-md: 0 1px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 2px 8px rgba(0,0,0,0.08);
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: Georgia, 'Times New Roman', serif;
    --font-mono: 'SFMono-Regular', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.1s;
    --transition-normal: 0.15s;
    --transition-slow: 0.2s;
    --sidebar-width: 240px;
    --border-width: 1px;
    --input-height: 32px;
    --btn-shadow: none;
    --card-shadow: none;
    --spacing-base: 1.1;
}

/* Theme: Catppuccin Mocha - 파스텔 감성, 부드럽고 아늑한 */
[data-theme="catppuccin"] {
    color-scheme: dark;
    --bg-primary: #1e1e2e;
    --bg-secondary: #181825;
    --bg-tertiary: #313244;
    --bg-hover: #45475a;
    --border: #45475a;
    --text-primary: #cdd6f4;
    --text-secondary: #a6adc8;
    --text-muted: #6c7086;
    --accent: #cba6f7;
    --accent-hover: #b4befe;
    --accent-text: #1e1e2e;
    --success: #a6e3a1;
    --success-text: #1e1e2e;
    --success-bg: rgba(166,227,161,0.15);
    --warning: #f9e2af;
    --warning-bg: rgba(249,226,175,0.15);
    --danger: #f38ba8;
    --danger-bg: rgba(243,139,168,0.15);
    /* 스타일 변수 - 큰 라운드, 파스텔 글로우 */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 2px 8px rgba(203,166,247,0.1);
    --shadow-md: 0 4px 16px rgba(203,166,247,0.15);
    --shadow-lg: 0 8px 32px rgba(203,166,247,0.2);
    --glow-accent: 0 0 20px rgba(203,166,247,0.3);
    --font-family: 'Pretendard', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.4s;
    --sidebar-width: 200px;
    --border-width: 2px;
    --input-height: 40px;
    --btn-shadow: var(--glow-accent);
    --card-shadow: var(--shadow-md);
}

/* Theme: Tokyo Night - 사이버펑크, 네온, 개발자 */
[data-theme="tokyo-night"] {
    color-scheme: dark;
    --bg-primary: #1a1b26;
    --bg-secondary: #16161e;
    --bg-tertiary: #24283b;
    --bg-hover: #414868;
    --border: #3b4261;
    --text-primary: #c0caf5;
    --text-secondary: #9aa5ce;
    --text-muted: #565f89;
    --accent: #7aa2f7;
    --accent-hover: #89b4fa;
    --accent-text: #1a1b26;
    --success: #9ece6a;
    --success-bg: rgba(158,206,106,0.15);
    --success-text: #1a1b26;
    --warning: #e0af68;
    --warning-bg: rgba(224,175,104,0.15);
    --danger: #f7768e;
    --danger-bg: rgba(247,118,142,0.15);
    /* 스타일 변수 - 각진, 네온 글로우 */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --shadow-sm: 0 0 8px rgba(122,162,247,0.2);
    --shadow-md: 0 0 16px rgba(122,162,247,0.25);
    --shadow-lg: 0 0 32px rgba(122,162,247,0.3);
    --glow-accent: 0 0 12px rgba(122,162,247,0.5);
    --glow-text: 0 0 8px rgba(192,202,245,0.3);
    --font-family: 'Fira Code', 'SF Mono', Consolas, monospace;
    --font-mono: 'Fira Code', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.1s;
    --transition-normal: 0.15s;
    --transition-slow: 0.2s;
    --sidebar-width: 180px;
    --border-width: 1px;
    --input-height: 34px;
    --btn-shadow: var(--glow-accent);
    --card-shadow: var(--shadow-sm);
}

/* Theme: Gruvbox Dark - 레트로, 빈티지, 따뜻한 */
[data-theme="gruvbox"] {
    color-scheme: dark;
    --bg-primary: #282828;
    --bg-secondary: #1d2021;
    --bg-tertiary: #3c3836;
    --bg-hover: #504945;
    --border: #504945;
    --text-primary: #ebdbb2;
    --text-secondary: #d5c4a1;
    --text-muted: #928374;
    --accent: #fe8019;
    --accent-hover: #fabd2f;
    --accent-text: #1d2021;
    --success: #b8bb26;
    --success-bg: rgba(184,187,38,0.15);
    --success-text: #1d2021;
    --warning: #fabd2f;
    --warning-bg: rgba(250,189,47,0.15);
    --danger: #fb4934;
    --danger-bg: rgba(251,73,52,0.15);
    /* 스타일 변수 - 각진, 하드 쉐도우, 레트로 */
    --radius-xs: 2px;
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --shadow-sm: 2px 2px 0 #1d2021;
    --shadow-md: 3px 3px 0 #1d2021;
    --shadow-lg: 4px 4px 0 #1d2021;
    --font-family: 'Pretendard', 'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --transition-fast: 0.08s;
    --transition-normal: 0.12s;
    --transition-slow: 0.15s;
    --sidebar-width: 200px;
    --border-width: 2px;
    --input-height: 38px;
    --btn-shadow: var(--shadow-sm);
    --card-shadow: var(--shadow-md);
}

/* Theme: GitHub Dark - 개발자, 실용적, 깃허브 */
[data-theme="github-dark"] {
    color-scheme: dark;
    --bg-primary: #0d1117;
    --bg-secondary: #010409;
    --bg-tertiary: #161b22;
    --bg-hover: #21262d;
    --border: #30363d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --accent: #58a6ff;
    --accent-hover: #79c0ff;
    --success: #3fb950;
    --success-bg: rgba(63,185,80,0.15);
    --warning: #d29922;
    --warning-bg: rgba(210,153,34,0.15);
    --danger: #f85149;
    --danger-bg: rgba(248,81,73,0.15);
    /* 스타일 변수 - 일관된 라운드, 실용적 */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --shadow-sm: 0 1px 0 rgba(27,31,36,0.04);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.1s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --sidebar-width: 220px;
    --border-width: 1px;
    --input-height: 32px;
    --btn-shadow: 0 1px 0 rgba(27,31,36,0.1);
    --card-shadow: var(--shadow-sm);
}

/* Theme: Slack - 친근, 협업, 대화형 */
[data-theme="slack"] {
    color-scheme: light;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f8f8;
    --bg-tertiary: #f0f0f0;
    --bg-hover: #e8e8e8;
    --border: #dddddd;
    --text-primary: #1d1c1d;
    --text-secondary: #616061;
    --text-muted: #868686;
    --accent: #1264a3;
    --accent-hover: #0b4c8c;
    --success: #007a5a;
    --success-bg: rgba(0,122,90,0.1);
    --warning: #e8912d;
    --warning-bg: rgba(232,145,45,0.1);
    --danger: #e01e5a;
    --danger-bg: rgba(224,30,90,0.1);
    /* 스타일 변수 - 매우 둥근, 부드러운 그림자 */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --font-family: 'Pretendard', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: Monaco, Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 700;
    --font-weight-bold: 900;
    --transition-fast: 0.15s;
    --transition-normal: 0.25s;
    --transition-slow: 0.35s;
    --sidebar-width: 260px;
    --sidebar-accent: #3f0e40;
    --border-width: 1px;
    --input-height: 40px;
    --btn-shadow: var(--shadow-sm);
    --card-shadow: var(--shadow-md);
}

/* Theme: Nord - 스칸디나비안, 차가운, 미니멀 */
[data-theme="nord"] {
    color-scheme: dark;
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --bg-hover: #4c566a;
    --border: #4c566a;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --text-muted: #a5adb5;
    --accent: #88c0d0;
    --accent-hover: #8fbcbb;
    --success: #a3be8c;
    --success-bg: rgba(163,190,140,0.15);
    --warning: #ebcb8b;
    --warning-bg: rgba(235,203,139,0.15);
    --danger: #bf616a;
    --danger-bg: rgba(191,97,106,0.15);
    /* 스타일 변수 - 클린, 차가운 블루 틴트 */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 4px rgba(46,52,64,0.3);
    --shadow-md: 0 4px 12px rgba(46,52,64,0.4);
    --shadow-lg: 0 8px 24px rgba(46,52,64,0.5);
    --frost-glow: 0 0 12px rgba(136,192,208,0.2);
    --font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Fira Code', Consolas, monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --transition-fast: 0.12s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;
    --sidebar-width: 200px;
    --border-width: 1px;
    --input-height: 36px;
    --btn-shadow: none;
    --card-shadow: var(--shadow-sm);
}

/* ===== Base Styles ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-family, 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: var(--font-weight-normal, 400);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    transition: all var(--transition-normal, 0.2s);
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Linear Dark 스크롤바 */
[data-theme="linear-dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

[data-theme="linear-dark"] ::-webkit-scrollbar-thumb {
    background: #444;
}

[data-theme="linear-dark"] ::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Linear Light 스크롤바 */
[data-theme="linear-light"] ::-webkit-scrollbar-track {
    background: #f5f5f4;
}

[data-theme="linear-light"] ::-webkit-scrollbar-thumb {
    background: #d4d4d4;
}

[data-theme="linear-light"] ::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3;
}

/* Notion 스크롤바 */
[data-theme="notion"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="notion"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="notion"] ::-webkit-scrollbar-thumb {
    background: rgba(55, 53, 47, 0.16);
    border-radius: 3px;
}

[data-theme="notion"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(55, 53, 47, 0.3);
}

/* Catppuccin 스크롤바 */
[data-theme="catppuccin"] ::-webkit-scrollbar-track {
    background: #181825;
}
[data-theme="catppuccin"] ::-webkit-scrollbar-thumb {
    background: #45475a;
}
[data-theme="catppuccin"] ::-webkit-scrollbar-thumb:hover {
    background: #585b70;
}

/* Tokyo Night 스크롤바 */
[data-theme="tokyo-night"] ::-webkit-scrollbar-track {
    background: #16161e;
}
[data-theme="tokyo-night"] ::-webkit-scrollbar-thumb {
    background: #3b4261;
}
[data-theme="tokyo-night"] ::-webkit-scrollbar-thumb:hover {
    background: #565f89;
}

/* Gruvbox 스크롤바 */
[data-theme="gruvbox"] ::-webkit-scrollbar-track {
    background: #1d2021;
}
[data-theme="gruvbox"] ::-webkit-scrollbar-thumb {
    background: #504945;
}
[data-theme="gruvbox"] ::-webkit-scrollbar-thumb:hover {
    background: #665c54;
}

/* GitHub Dark 스크롤바 */
[data-theme="github-dark"] ::-webkit-scrollbar-track {
    background: #010409;
}
[data-theme="github-dark"] ::-webkit-scrollbar-thumb {
    background: #30363d;
}
[data-theme="github-dark"] ::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Slack 스크롤바 */
[data-theme="slack"] ::-webkit-scrollbar-track {
    background: #f8f8f8;
}
[data-theme="slack"] ::-webkit-scrollbar-thumb {
    background: #c9c9c9;
}
[data-theme="slack"] ::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Nord 스크롤바 */
[data-theme="nord"] ::-webkit-scrollbar-track {
    background: #3b4252;
}
[data-theme="nord"] ::-webkit-scrollbar-thumb {
    background: #4c566a;
}
[data-theme="nord"] ::-webkit-scrollbar-thumb:hover {
    background: #5e6779;
}

a { color: inherit; text-decoration: none; }

/* ===== Layout ===== */
.app {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width, 220px);
    background: var(--bg-secondary);
    border-right: var(--border-width, 1px) solid var(--border);
    display: flex;
    flex-direction: column;
    transition: all var(--transition-normal, 0.2s);
}

.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 사이드바 접기 토글 버튼 */
.sidebar-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-toggle:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* 사이드바 접힌 상태 */
.sidebar.collapsed {
    width: 56px;
    min-width: 56px;
}

.sidebar.collapsed .sidebar-header {
    padding: 12px 8px;
    justify-content: center;
}

.sidebar.collapsed .logo {
    display: none !important;
}

.sidebar.collapsed .sidebar-toggle {
    margin: 0;
}

.sidebar.collapsed .sidebar-nav {
    padding: 8px 4px;
    overflow-x: hidden;
}

.sidebar.collapsed .nav-item {
    padding: 10px 8px;
    justify-content: center;
    overflow: hidden;
}

/* 접힌 상태에서 모든 텍스트 숨김 */
.sidebar.collapsed .nav-item > span:not(.nav-emoji),
.sidebar.collapsed .nav-item > svg.nav-icon + span,
.sidebar.collapsed .nav-group-title > span,
.sidebar.collapsed .nav-group-title .nav-arrow {
    display: none !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* 이모지와 아이콘만 표시 */
.sidebar.collapsed .nav-icon {
    margin-right: 0 !important;
    flex-shrink: 0;
}

.sidebar.collapsed .nav-emoji {
    margin-right: 0 !important;
    font-size: 18px;
    flex-shrink: 0;
}

/* 그룹 타이틀 */
.sidebar.collapsed .nav-group-title {
    padding: 10px 8px;
    justify-content: center;
    overflow: hidden;
}

/* 그룹 내 하위 메뉴 숨김 */
.sidebar.collapsed .nav-group-items {
    display: none !important;
}

.sidebar.collapsed .nav-item.sub {
    display: none !important;
}

/* 접힌 상태에서 직접 텍스트 노드 숨김 (CSS text-indent 트릭) */
.sidebar.collapsed .nav-item {
    font-size: 0;
    text-indent: -9999px;
}

.sidebar.collapsed .nav-item .nav-icon,
.sidebar.collapsed .nav-item .nav-emoji {
    font-size: 18px;
    text-indent: 0;
}

.sidebar.collapsed .nav-group-title {
    font-size: 0;
    text-indent: -9999px;
}

.sidebar.collapsed .nav-group-title .nav-icon {
    font-size: 18px;
    text-indent: 0;
}

.logo {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.logo-box {
    display: none;
    align-items: center;
    gap: 8px;
}

.logo-icon {
    width: 22px;
    height: 22px;
    background: var(--text-primary);
    border-radius: 4px;
    color: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.logo-text-only {
    display: block;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
    overflow-y: auto;
}

.nav-section-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    margin-bottom: 2px;
    font-size: 13px;
    transition: all 0.15s;
    cursor: pointer;
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--accent);
    color: white;
}

.nav-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    flex-shrink: 0;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-emoji {
    display: none;
    font-size: 16px;
}

.nav-icon {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* 3단 메뉴 그룹 */
.nav-group {
    margin-bottom: 2px;
}

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.nav-group-title:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-group-title.expanded {
    color: var(--text-primary);
}

.nav-group-title .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.nav-group-title .nav-emoji {
    flex-shrink: 0;
}

.nav-group-title > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.nav-group-title.expanded .nav-arrow {
    transform: rotate(180deg);
}

.nav-group-items {
    padding-left: 12px;
    display: none;
}

.nav-group-items.open {
    display: block;
}

.nav-sub {
    padding-left: 36px;
    font-size: 12px;
    color: var(--text-muted);
}

.nav-sub:hover {
    color: var(--text-primary);
}

.nav-sub.active {
    background: var(--accent);
    color: white;
}

/* Main */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    transition: background 0.2s;
    min-width: 0;
}

.header {
    height: 52px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--bg-primary);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Theme Switcher - Dropdown */
.theme-switcher {
    position: relative;
    display: inline-block;
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: all 0.15s;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

.theme-toggle-color {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.theme-toggle-arrow {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px;
}

.theme-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
    padding: 4px;
}

.theme-dropdown.open {
    display: block;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.theme-option:hover {
    background: var(--bg-hover);
}

.theme-option.active {
    background: var(--accent-bg);
    color: var(--accent);
}

.theme-option-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

/* Legacy theme-btn (for backwards compatibility) */
.theme-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.active {
    border-color: var(--accent);
}

.theme-btn[data-set="linear-dark"] {
    background: linear-gradient(135deg, #0d0d0d 50%, #8b5cf6 50%);
}

.theme-btn[data-set="linear-light"] {
    background: linear-gradient(135deg, #fafaf9 50%, #2563eb 50%);
}

.theme-btn[data-set="notion"] {
    background: linear-gradient(135deg, #f7f6f3 50%, #0f7b6c 50%);
}

.theme-btn[data-set="catppuccin"] {
    background: linear-gradient(135deg, #1e1e2e 50%, #cba6f7 50%);
}

.theme-btn[data-set="tokyo-night"] {
    background: linear-gradient(135deg, #1a1b26 50%, #7aa2f7 50%);
}

.theme-btn[data-set="gruvbox"] {
    background: linear-gradient(135deg, #282828 50%, #fe8019 50%);
}

.theme-btn[data-set="github-dark"] {
    background: linear-gradient(135deg, #0d1117 50%, #58a6ff 50%);
}

.theme-btn[data-set="slack"] {
    background: linear-gradient(135deg, #ffffff 50%, #1264a3 50%);
    border: 1px solid #ddd;
}

.theme-btn[data-set="nord"] {
    background: linear-gradient(135deg, #2e3440 50%, #88c0d0 50%);
}

/* CTI Controls Group */
.cti-controls {
    display: flex;
    gap: 6px;
    margin-right: 12px;
}
.cti-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.cti-btn.accept {
    background: #16a34a;
    color: #fff;
    animation: pulse-accept 1s infinite;
}
.cti-btn.accept:hover {
    background: #15803d;
}
.cti-btn.reject {
    background: #f97316;
    color: #fff;
}
.cti-btn.reject:hover {
    background: #ea580c;
}
.cti-btn.hangup {
    background: #dc2626;
    color: #fff;
    animation: pulse-hangup 1s infinite;
}
.cti-btn.hangup:hover {
    background: #b91c1c;
}
@keyframes pulse-accept {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}
@keyframes pulse-hangup {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* Legacy: CTI Hangup Button (deprecated) */
.cti-hangup-btn {
    padding: 6px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    animation: pulse-hangup 1s infinite;
}
.cti-hangup-btn:hover {
    background: #b91c1c;
}

/* CTI Status */
.cti-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--success-bg);
    border-radius: 20px;
    font-size: 12px;
    color: var(--success);
    cursor: pointer;
}

.cti-status.disconnected {
    background: var(--danger-bg);
    color: var(--danger);
}

.cti-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.cti-dot.ringing {
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* User */
.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.user-info:hover {
    background: var(--bg-hover);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

/* Content */
.content {
    flex: 1;
    padding: 24px;
    background: var(--bg-tertiary);
    overflow-y: auto;
    transition: background 0.2s, padding 0.2s;
    position: relative;
}

/* SPA 페이지 로드 시 - 스크롤 비활성화, 패딩 제거 */
.content.spa-page {
    padding: 0;
    overflow: hidden;
}

.page-container {
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.page-container.board-page {
    max-width: none;
    margin: 0;
    width: 100%;
    padding: 16px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

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

.page-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.page-desc {
    color: var(--text-muted);
    font-size: 13px;
}

/* Cards */
.card {
    background: var(--bg-primary);
    border: var(--border-width, 1px) solid var(--border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--card-shadow, none);
    transition: all var(--transition-normal, 0.2s);
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.dash-compact .card-header {
    padding: 10px 14px;
}

.dash-compact .card-title {
    font-size: 13px;
}

.card-body {
    padding: 20px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    transition: background 0.2s, border-color 0.2s;
}

.stat-label {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--text-primary);
}

.stat-change {
    font-size: 12px;
    color: var(--success);
    margin-top: 4px;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

th {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
}

td {
    font-size: 13px;
    color: var(--text-primary);
}

tr:hover td {
    background: var(--bg-secondary);
}

tr:last-child td {
    border-bottom: none;
}

/* Badge */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

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

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

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

/* Notification System */
.notification-wrapper {
    position: relative;
    margin-right: 16px;
}

.notification-icon {
    position: relative;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--text-muted);
    transition: all 0.2s;
}

.notification-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
    animation: notification-pulse 2s infinite;
}

@keyframes notification-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.notification-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    overflow: hidden;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
}

.notification-clear-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

.notification-clear-btn:hover {
    background: var(--bg-hover);
}

.notification-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 8px;
    gap: 2px;
}

.noti-tab {
    flex: 1;
    padding: 8px 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.noti-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.noti-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.noti-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    border-radius: 9px;
}

.noti-tab.active .noti-tab-count {
    background: var(--accent);
    color: #fff;
}

.board-noti-icon {
    color: var(--text-muted);
}

.board-badge {
    background: var(--accent-green, #10b981);
}

.notification-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.notification-item:hover {
    background: var(--bg-hover);
}

.notification-item.unread {
    background: rgba(59, 130, 246, 0.08);
}

.notification-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 14px;
}

.notification-item-icon.icon-memo {
    background: var(--accent-blue, #3b82f6);
}

.notification-item-icon.icon-board {
    background: var(--accent-green, #10b981);
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-note {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-text {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-item-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ===== Accessibility - Skip Navigation ===== */
.skip-nav{position:fixed;top:-100px;left:0;background:var(--accent,#3B82F6);color:#fff;padding:8px 16px;z-index:100000;font-size:14px;transition:top 0.2s}
.skip-nav:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Chat Side Panel ===== */
.chat-side-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    z-index: 9998;
    flex-direction: column;
    transition: right 0.3s ease;
}

.chat-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.chat-panel-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }

.chat-filter-row { padding: 8px 16px; border-bottom: 1px solid var(--border); }

.chat-room-list { flex: 1; overflow-y: auto; }

.chat-room-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}
.chat-room-item:hover { background: var(--bg-hover); }
.chat-room-active { background: var(--bg-tertiary); }

.chat-room-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text, #fff);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600;
    flex-shrink: 0;
}
.chat-room-center { flex: 1; min-width: 0; }
.chat-room-title {
    font-size: 13px; font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 4px;
}
.chat-room-preview {
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.chat-room-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.chat-room-time { font-size: 11px; color: var(--text-muted); }
.chat-unread-badge {
    background: var(--danger);
    color: #fff;
    font-size: 11px; font-weight: 600;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 18px; text-align: center;
}

.chat-type-badge {
    font-size: 10px; padding: 1px 5px;
    border-radius: 3px; font-weight: 500;
    flex-shrink: 0;
}
.chat-type-direct { background: var(--success-bg); color: var(--success); }
.chat-type-group { background: var(--warning-bg); color: var(--warning); }
.chat-type-cross { background: var(--danger-bg); color: var(--danger); }
.chat-member-cnt { font-size: 11px; color: var(--text-muted); }

.chat-conv-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}
.chat-conv-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chat-message-list {
    flex: 1; overflow-y: auto;
    padding: 12px 16px;
    display: flex; flex-direction: column; gap: 6px;
}

.chat-date-divider {
    text-align: center; margin: 12px 0 6px;
    font-size: 11px; color: var(--text-muted);
}
.chat-date-divider span {
    background: var(--bg-secondary);
    padding: 2px 10px; border-radius: 10px;
}

.chat-msg { display: flex; flex-direction: column; max-width: 80%; }
.chat-msg-mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-other { align-self: flex-start; align-items: flex-start; }

.chat-msg-sender { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.chat-msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px; line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}
.chat-msg-mine .chat-msg-bubble {
    background: var(--accent);
    color: var(--accent-text, #fff);
    border-bottom-right-radius: 4px;
}
.chat-msg-other .chat-msg-bubble {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}
.chat-msg-meta {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 1px; margin-top: 2px; align-self: flex-end;
}
.chat-msg-other .chat-msg-meta { align-items: flex-start; }
.chat-msg-time { font-size: 10px; color: var(--text-muted); }
.chat-msg-unread {
    font-size: 10px; font-weight: 600; color: var(--accent);
    line-height: 1;
}

.chat-msg-file-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; cursor: pointer;
    background: var(--bg-tertiary, var(--bg-secondary));
    border: 1px solid var(--border-color);
    min-width: 180px; max-width: 260px;
    text-decoration: none; color: inherit;
    transition: background 0.15s;
}
.chat-msg-file-card:hover { background: var(--bg-hover); }
.chat-msg-file-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.chat-msg-file-info { overflow: hidden; }
.chat-msg-file-name {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
}
.chat-msg-file-size { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.chat-msg-image img {
    max-width: 240px; max-height: 200px;
    border-radius: 8px; cursor: pointer;
    display: block;
}
.chat-msg-image img:hover { opacity: 0.85; }
.chat-input-attach {
    background: none; border: none; cursor: pointer;
    font-size: 20px; color: var(--text-muted);
    padding: 4px 8px; display: flex; align-items: center;
}
.chat-input-attach:hover { color: var(--accent); }
.chat-upload-progress {
    display: none; padding: 6px 12px;
    background: var(--bg-secondary); border-top: 1px solid var(--border-color);
    font-size: 12px; color: var(--text-muted);
}
.chat-upload-progress .progress-bar {
    height: 4px; background: var(--border-color); border-radius: 2px;
    margin-top: 4px; overflow: hidden;
}
.chat-upload-progress .progress-fill {
    height: 100%; background: var(--accent);
    width: 0%; transition: width 0.2s;
}
.chat-image-preview-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.chat-image-preview-overlay img {
    max-width: 90%; max-height: 90%;
    border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

.chat-msg-system {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 0;
}
.chat-sender-type {
    font-size: 10px;
    color: var(--warning);
    font-weight: 600;
}

.chat-input-area {
    display: flex; gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
    position: relative;
}
.chat-input-area .form-input { flex: 1; }

/* F-2-EXT2 Wave 3 / E — @멘션 강조/팝업 (chat.html 웹) */
.msg-mention {
    display: inline-block; padding: 0 4px; border-radius: 4px;
    background: rgba(88, 101, 242, 0.15); color: #4a55c8;
    font-weight: 600;
}
.msg-mention.me { background: #FFE08A; color: #8a5b00; }
.msg-mention.all { background: #FFD7D7; color: #b22; }
.chat-msg-mine .chat-msg-bubble .msg-mention { background: rgba(255,255,255,0.25); color: #fff; }
.chat-msg-mine .chat-msg-bubble .msg-mention.me { background: #FFE08A; color: #8a5b00; }
.chat-msg.has-mention-me .chat-msg-bubble {
    box-shadow: 0 0 0 2px #FFB300;
}
.mention-popup {
    position: absolute; bottom: 100%; left: 12px; margin-bottom: 6px;
    min-width: 220px; max-width: 320px;
    background: #fff; border: 1px solid var(--border);
    border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    max-height: 220px; overflow-y: auto; z-index: 100; display: none;
}
.mention-popup.show { display: block; }
.mention-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; font-size: 13px;
    border-bottom: 1px solid #f3f4f6;
}
.mention-item:last-child { border-bottom: none; }
.mention-item:hover, .mention-item.active { background: #EEF0FF; }
.mention-item .mi-name { font-weight: 600; }
.mention-item .mi-meta { color: var(--text-secondary, #888); font-size: 12px; margin-left: auto; }

/* F-2-EXT2 Wave 4 — 이모지 반응 칩 */
.msg-reactions {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
.msg-reaction-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 8px; min-height: 22px;
    border-radius: 12px;
    background: #fff; border: 1px solid #e5e7eb;
    font-size: 12px; line-height: 1;
    cursor: pointer; user-select: none;
    transition: all 0.12s;
}
.msg-reaction-chip:hover { background: #EEF0FF; border-color: #6366f1; }
.msg-reaction-chip.mine {
    background: #EEF0FF; border-color: #6366f1;
    color: #6366f1; font-weight: 600;
}
.msg-reaction-chip .rc-cnt { font-size: 11px; }

/* 반응 선택 팝업 */
.reaction-picker {
    position: fixed; z-index: 10000;
    display: flex; gap: 4px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 6px 10px;
}
.reaction-picker button {
    border: none; background: transparent;
    font-size: 22px; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    transition: transform 0.1s, background 0.1s;
}
.reaction-picker button:hover {
    background: #EEF0FF; transform: scale(1.25);
}

/* 북마크 표시 */
.msg-bookmark-flag { color: #f59e0b; font-size: 12px; margin-right: 2px; }

/* F-2-EXT2 Wave 2 — typing indicator */
.typing-indicator {
    display: none;
    align-items: center; gap: 8px;
    padding: 4px 14px;
    font-size: 12px; color: #888;
    min-height: 20px;
}
.typing-indicator.active { display: flex; }
.typing-indicator .typing-dots {
    display: inline-flex; gap: 3px; align-items: center;
}
.typing-indicator .typing-dots span {
    display: inline-block; width: 4px; height: 4px;
    background: #888; border-radius: 50%;
    animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-indicator .typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator .typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* F-2-EXT2 Wave 3 / A-2 — 스레드 카드 (메인 타임라인) */
.msg-thread-card {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px; padding: 6px 12px;
    background: #f3f4f6;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 12px; color: var(--accent, #5B6CFF);
    cursor: pointer;
    transition: background 0.12s;
    max-width: 280px;
}
.msg-thread-card:hover { background: #EEF0FF; }
.msg-thread-card .tc-icon { font-size: 14px; }
.msg-thread-card .tc-count { font-weight: 600; }
.msg-thread-card .tc-arrow { margin-left: auto; opacity: 0.6; }

/* 스레드 답글 아이템 (chat.html 모달 내) */
.thread-reply-item { display: flex; flex-direction: column; gap: 2px; }
.thread-reply-item.mine { align-items: flex-end; }
.thread-reply-item .tri-sender {
    font-size: 11px; font-weight: 600; color: #888; margin-bottom: 2px;
}
.thread-reply-item .tri-bubble {
    max-width: 80%;
    padding: 6px 10px;
    border-radius: 12px;
    background: #f3f4f6;
    color: #222;
    font-size: 13px; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
}
.thread-reply-item.mine .tri-bubble { background: var(--accent, #5B6CFF); color: #fff; }
.thread-reply-item .tri-time { font-size: 10px; color: #888; margin-top: 2px; }
.thread-reply-item.deleted .tri-bubble {
    font-style: italic; color: #888; background: transparent;
    border: 1px dashed #ddd;
}

.chat-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 16px;
    font-size: 13px;
    line-height: 1.8;
}

.chat-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10002;
    display: flex; align-items: center; justify-content: center;
}
.chat-modal-box {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 360px; max-height: 70vh;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.chat-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.chat-emp-list {
    flex: 1; overflow-y: auto;
    max-height: 400px;
}
.chat-emp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.chat-emp-item:hover { background: var(--bg-hover); }
.chat-emp-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-text, #fff);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 600;
    flex-shrink: 0;
}
.chat-emp-info { flex: 1; min-width: 0; }
.chat-emp-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.chat-emp-dept { font-size: 11px; color: var(--text-muted); }

.chat-group-emp-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
}
.chat-group-emp-item:hover { background: var(--bg-hover); }
.chat-group-emp-item input[type="checkbox"] { flex-shrink: 0; }

@media (max-width: 480px) {
    .chat-side-panel { width: 100%; right: -100%; }
    .chat-modal-box { width: 90%; }
}

@media print {
    .chat-side-panel, .skip-nav { display: none !important; }
}

/* Button */
.btn {
    padding: 8px 16px;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-weight: var(--font-weight-medium, 500);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--btn-shadow, none);
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover {
    opacity: 0.9;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Form */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    height: var(--input-height, 36px);
    font-size: 14px;
    font-family: var(--font-family, inherit);
    border: var(--border-width, 1px) solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all var(--transition-fast, 0.15s);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
}

.form-control::placeholder {
    color: var(--text-muted);
}

textarea.form-control {
    resize: none;
    min-height: 100px;
    max-height: 500px;
    overflow-y: hidden;
    line-height: 1.6;
}

select.form-control {
    cursor: pointer;
}

/* Incoming Call Bar */
.incoming-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--accent);
    color: white;
    padding: 12px 24px;
    display: none;
    z-index: 1000;
    animation: slideDown 0.3s;
}

.incoming-bar.show {
    display: block;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.incoming-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.incoming-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.incoming-label {
    font-size: 12px;
    opacity: 0.8;
}

.incoming-caller {
    font-size: 18px;
    font-weight: 600;
}

.incoming-buttons {
    display: flex;
    gap: 8px;
}

.incoming-btn {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
}

.incoming-btn.accept {
    background: white;
    color: var(--accent);
}

.incoming-btn.reject {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* Utilities */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mt-3 { margin-top: 12px; }
.text-right { text-align: right; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }

/* ===== Notion Theme Overrides ===== */
[data-theme="notion"] .sidebar {
    background: #fbfbfa;
}

[data-theme="notion"] .nav-item {
    border-radius: 4px;
    font-size: 14px;
}

[data-theme="notion"] .nav-item.active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="notion"] .nav-icon {
    display: none !important;
}

[data-theme="notion"] .nav-emoji {
    display: inline !important;
}

[data-theme="notion"] .nav-group-title .nav-icon {
    display: none !important;
}

[data-theme="notion"] .nav-group-title .nav-emoji {
    display: inline !important;
}

[data-theme="notion"] .logo-box {
    display: flex;
}

[data-theme="notion"] .logo-text-only {
    display: none;
}

[data-theme="notion"] .content {
    background: var(--bg-primary);
    padding: 40px 60px;
}

[data-theme="notion"] .page-title {
    font-size: 32px;
}

[data-theme="notion"] .stat-card {
    border: none;
    background: #f7f6f3;
    box-shadow: none;
}

[data-theme="notion"] .card {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px;
    border: none;
}

[data-theme="notion"] .card-header {
    background: #f7f6f3;
}

[data-theme="notion"] .badge {
    border-radius: 3px;
}

/* ===== Notion Dashboard Specific ===== */
[data-theme="notion"] .page-title {
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Notion 카드 - 특유의 부드러운 스타일 */
[data-theme="notion"] .perf-card {
    background: #ffffff;
    border: none;
    border-radius: 3px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
    transition: background 0.2s;
}

[data-theme="notion"] .perf-card:hover {
    background: #fafafa;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px;
    transform: none;
}

[data-theme="notion"] .perf-value {
    font-weight: 600;
}

[data-theme="notion"] .perf-label {
    color: rgba(55, 53, 47, 0.65);
    font-weight: 500;
}

[data-theme="notion"] .perf-sub {
    color: rgba(55, 53, 47, 0.5);
}

/* Notion 큐 아이템 */
[data-theme="notion"] .queue-item {
    background: rgba(55, 53, 47, 0.04);
    border-radius: 3px;
    border-left: 3px solid;
}

[data-theme="notion"] .queue-waiting { border-left-color: #d9730d; }
[data-theme="notion"] .queue-progress { border-left-color: #2383e2; }
[data-theme="notion"] .queue-done { border-left-color: #0f7b6c; }

/* Notion 대시보드 헤더 */
[data-theme="notion"] .dash-header {
    background: #ffffff;
    border: none;
    border-radius: 3px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    padding: 20px 24px;
}

[data-theme="notion"] .dash-title {
    font-size: 18px;
    font-weight: 600;
    color: #37352f;
}

[data-theme="notion"] .dash-subtitle {
    color: rgba(55, 53, 47, 0.5);
}

[data-theme="notion"] .role-tag {
    background: rgba(15, 123, 108, 0.1);
    color: #0f7b6c;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Notion 테이블 스타일 */
[data-theme="notion"] table {
    border-collapse: collapse;
}

[data-theme="notion"] table th {
    background: rgba(55, 53, 47, 0.04);
    font-weight: 500;
    color: rgba(55, 53, 47, 0.65);
    font-size: 12px;
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}

[data-theme="notion"] table td {
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
    color: #37352f;
}

[data-theme="notion"] table tr:hover td {
    background: rgba(55, 53, 47, 0.04);
}

/* Notion 버튼 스타일 */
[data-theme="notion"] .btn {
    border-radius: 3px;
    font-weight: 500;
}

[data-theme="notion"] .btn-primary {
    background: #2383e2;
}

[data-theme="notion"] .btn-primary:hover {
    background: #0b6bcb;
}

[data-theme="notion"] .tab-btn {
    border-radius: 3px;
    font-weight: 500;
}

[data-theme="notion"] .tab-btn.active {
    background: rgba(35, 131, 226, 0.15);
    color: #2383e2;
    border-color: transparent;
}

/* Notion 퀵 메뉴 */
[data-theme="notion"] .quick-item {
    background: rgba(55, 53, 47, 0.04);
    border-radius: 3px;
    padding: 10px 12px;
}

[data-theme="notion"] .quick-item:hover {
    background: rgba(55, 53, 47, 0.08);
}

/* Notion 배지 스타일 */
[data-theme="notion"] .badge {
    border-radius: 3px;
    font-weight: 500;
}

[data-theme="notion"] .badge-success {
    background: rgba(15, 123, 108, 0.1);
    color: #0f7b6c;
}

[data-theme="notion"] .badge-warning {
    background: rgba(217, 115, 13, 0.1);
    color: #d9730d;
}

[data-theme="notion"] .badge-danger {
    background: rgba(224, 62, 62, 0.1);
    color: #e03e3e;
}

/* Notion 폼 스타일 */
[data-theme="notion"] .form-control {
    border-radius: 3px;
    border-color: rgba(55, 53, 47, 0.16);
}

[data-theme="notion"] .form-control:focus {
    border-color: #2383e2;
    box-shadow: 0 0 0 2px rgba(35, 131, 226, 0.15);
}

/* Notion 카드 컴포넌트 */
[data-theme="notion"] .card {
    border-radius: 3px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .card-header {
    background: rgba(55, 53, 47, 0.04);
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
    padding: 12px 16px;
}

[data-theme="notion"] .card-title {
    font-weight: 500;
    color: rgba(55, 53, 47, 0.65);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="notion"] .card-body {
    padding: 16px;
}

/* Notion accent colors - 따뜻한 색조 */
[data-theme="notion"] .perf-today .perf-value { color: #0f7b6c; }
[data-theme="notion"] .perf-monthly .perf-value { color: #37352f; }
[data-theme="notion"] .perf-comm-today .perf-value { color: #d9730d; }
[data-theme="notion"] .perf-comm-monthly .perf-value { color: #9065b0; }
[data-theme="notion"] .text-accent { color: #2383e2; }
[data-theme="notion"] .text-success { color: #0f7b6c; }
[data-theme="notion"] .text-warning { color: #d9730d; }
[data-theme="notion"] .text-danger { color: #e03e3e; }

/* ===== Catppuccin 테마 특수 스타일 ===== */
[data-theme="catppuccin"] .btn-primary {
    background: linear-gradient(135deg, #cba6f7, #89b4fa);
    box-shadow: 0 0 20px rgba(203,166,247,0.3);
}

[data-theme="catppuccin"] .btn-primary:hover {
    box-shadow: 0 0 30px rgba(203,166,247,0.5);
    transform: translateY(-1px);
}

[data-theme="catppuccin"] .card {
    border-width: 2px;
    border-color: #45475a;
}

[data-theme="catppuccin"] .nav-item.active {
    background: linear-gradient(90deg, rgba(203,166,247,0.15), transparent);
    border-left: 3px solid #cba6f7;
}

[data-theme="catppuccin"] .form-control:focus {
    border-color: #cba6f7;
    box-shadow: 0 0 0 3px rgba(203,166,247,0.2);
}

/* ===== Tokyo Night 테마 특수 스타일 ===== */
[data-theme="tokyo-night"] .btn-primary {
    background: #7aa2f7;
    box-shadow: 0 0 12px rgba(122,162,247,0.5);
    text-shadow: 0 0 8px rgba(122,162,247,0.5);
}

[data-theme="tokyo-night"] .btn-primary:hover {
    box-shadow: 0 0 20px rgba(122,162,247,0.7);
}

[data-theme="tokyo-night"] .card {
    border-color: #3b4261;
    box-shadow: 0 0 8px rgba(122,162,247,0.1);
}

[data-theme="tokyo-night"] .nav-item.active {
    background: rgba(122,162,247,0.15);
    box-shadow: inset 0 0 12px rgba(122,162,247,0.1);
}

[data-theme="tokyo-night"] h1, 
[data-theme="tokyo-night"] h2, 
[data-theme="tokyo-night"] h3 {
    text-shadow: 0 0 20px rgba(192,202,245,0.2);
}

[data-theme="tokyo-night"] .form-control:focus {
    border-color: #7aa2f7;
    box-shadow: 0 0 8px rgba(122,162,247,0.4);
}

/* ===== Gruvbox 테마 특수 스타일 ===== */
[data-theme="gruvbox"] .btn-primary {
    background: #fe8019;
    box-shadow: 3px 3px 0 #1d2021;
    border: 2px solid #1d2021;
}

[data-theme="gruvbox"] .btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 #1d2021;
}

[data-theme="gruvbox"] .btn-primary:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #1d2021;
}

[data-theme="gruvbox"] .card {
    border: 2px solid #504945;
    box-shadow: 4px 4px 0 #1d2021;
}

[data-theme="gruvbox"] .nav-item.active {
    background: #3c3836;
    border-left: 4px solid #fe8019;
}

[data-theme="gruvbox"] .form-control {
    border: 2px solid #504945;
}

[data-theme="gruvbox"] .form-control:focus {
    border-color: #fe8019;
    box-shadow: 3px 3px 0 #1d2021;
}

/* ===== GitHub Dark 테마 특수 스타일 ===== */
[data-theme="github-dark"] .btn-primary {
    background: #238636;
    border: 1px solid rgba(240,246,252,0.1);
}

[data-theme="github-dark"] .btn-primary:hover {
    background: #2ea043;
}

[data-theme="github-dark"] .card {
    border-color: #30363d;
}

[data-theme="github-dark"] .card-header {
    background: #161b22;
    border-bottom-color: #30363d;
}

[data-theme="github-dark"] .nav-item.active {
    background: rgba(88,166,255,0.1);
    border-left: 2px solid #58a6ff;
}

[data-theme="github-dark"] .badge {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

/* ===== Slack 테마 특수 스타일 ===== */
[data-theme="slack"] .sidebar {
    background: #3f0e40;
    color: #ffffff;
}

[data-theme="slack"] .sidebar .nav-item {
    color: rgba(255,255,255,0.7);
}

[data-theme="slack"] .sidebar .nav-item:hover {
    background: rgba(255,255,255,0.1);
    color: #ffffff;
}

[data-theme="slack"] .sidebar .nav-item.active {
    background: #1164a3;
    color: #ffffff;
}

[data-theme="slack"] .sidebar-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

[data-theme="slack"] .btn-primary {
    background: #007a5a;
    border-radius: 8px;
}

[data-theme="slack"] .btn-primary:hover {
    background: #148567;
}

[data-theme="slack"] .card {
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="slack"] .form-control {
    border-radius: 8px;
}

[data-theme="slack"] .form-control:focus {
    border-color: #1264a3;
    box-shadow: 0 0 0 4px rgba(18,100,163,0.15);
}

/* ===== Nord 테마 특수 스타일 ===== */
[data-theme="nord"] .btn-primary {
    background: #88c0d0;
    color: #2e3440;
}

[data-theme="nord"] .btn-primary:hover {
    background: #8fbcbb;
}

[data-theme="nord"] .card {
    border-color: #4c566a;
}

[data-theme="nord"] .nav-item.active {
    background: rgba(136,192,208,0.15);
    border-left: 2px solid #88c0d0;
}

[data-theme="nord"] .form-control:focus {
    border-color: #88c0d0;
    box-shadow: 0 0 0 2px rgba(136,192,208,0.2);
}

[data-theme="nord"] .badge-primary {
    background: rgba(136,192,208,0.2);
    color: #88c0d0;
}

/* Linear Dark Dashboard */
[data-theme="linear-dark"] .perf-card {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="linear-dark"] .dash-header {
    background: #1a1a1a;
}

[data-theme="linear-dark"] .queue-item {
    background: #1a1a1a;
}

[data-theme="linear-dark"] .quick-item {
    background: #262626;
}

[data-theme="linear-dark"] .quick-item:hover {
    background: #333;
}

/* Linear Light Dashboard - clean professional look */
[data-theme="linear-light"] .perf-card {
    background: #ffffff;
    border-color: #e8e8e6;
}

[data-theme="linear-light"] .perf-card:hover {
    border-color: #2563eb;
}

[data-theme="linear-light"] .dash-header {
    background: #ffffff;
}

[data-theme="linear-light"] .queue-item {
    background: #fafaf9;
}

[data-theme="linear-light"] .quick-item {
    background: #f5f5f4;
}

[data-theme="linear-light"] .quick-item:hover {
    background: #eeeeec;
}

/* ===== Login Page ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 380px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.login-subtitle {
    font-size: 14px;
    color: var(--text-muted);
}

.login-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.form-error {
    display: none;
    padding: 12px;
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 16px;
}

.form-error.show {
    display: block;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.form-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn-block {
    width: 100%;
}

.btn-lg {
    padding: 12px 20px;
    font-size: 15px;
}

/* Responsive */
@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
    
    .content {
        padding: 16px;
    }
}

/* ===== Dashboard Styles ===== */

.dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 24px;
}

.welcome-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.welcome-date {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.welcome-cti {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--success);
}

.cti-indicator {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: cti-pulse 2s infinite;
}

@keyframes cti-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.2s;
}

.stat-card:hover {
    border-color: var(--accent);
}

.stat-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-hover);
}

.stat-primary .stat-icon { background: rgba(37, 99, 235, 0.15); }
.stat-success .stat-icon { background: var(--success-bg); }
.stat-warning .stat-icon { background: var(--warning-bg); }
.stat-info .stat-icon { background: rgba(139, 92, 246, 0.15); }

[data-theme="linear-dark"] .stat-primary .stat-icon { color: #60a5fa; }
[data-theme="linear-dark"] .stat-success .stat-icon { color: var(--success); }
[data-theme="linear-dark"] .stat-warning .stat-icon { color: var(--warning); }
[data-theme="linear-dark"] .stat-info .stat-icon { color: var(--accent); }

.stat-info-box {
    flex: 1;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.dashboard-main {
    min-width: 0;
}

.dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.table-wrap {
    overflow-x: auto;
}

.quick-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: 6px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.quick-item:hover {
    background: var(--border);
}

.quick-icon {
    font-size: 18px;
}

.goal-progress {
    padding: 8px 0;
}

.goal-bar {
    height: 8px;
    background: var(--bg-hover);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.goal-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.goal-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.p-4 {
    padding: 16px;
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

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

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

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

@media (max-width: 1024px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-side {
        flex-direction: row;
    }
    
    .dashboard-side .card {
        flex: 1;
    }
}

/* Dashboard Additional Styles */

.welcome-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
}

.stat-primary-icon { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.stat-success-icon { background: var(--success-bg); color: var(--success); }
.stat-warning-icon { background: var(--warning-bg); color: var(--warning); }
.stat-info-icon { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

[data-theme="linear-dark"] .stat-primary-icon { color: #60a5fa; }
[data-theme="linear-dark"] .stat-info-icon { color: #a78bfa; }

.stat-content {
    flex: 1;
}

.stat-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.queue-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px;
    gap: 16px;
}

.queue-item {
    text-align: center;
    flex: 1;
}

.queue-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.queue-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.tab-btns {
    display: flex;
    gap: 4px;
}

.tab-btn {
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.tab-btn:hover {
    background: var(--bg-hover);
}

.tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.table-sm {
    width: 100%;
    border-collapse: collapse;
}

.table-sm th,
.table-sm td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.table-sm th {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}

.table-sm td {
    color: var(--text-primary);
}

.table-sm tbody tr:hover {
    background: var(--bg-hover);
}

.text-accent {
    color: var(--accent);
    font-weight: 600;
}

.text-success {
    color: var(--success);
}

.text-danger {
    color: var(--danger);
}

.text-warning {
    color: var(--warning);
}

.text-sm {
    font-size: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.dash-compact .mb-4 {
    margin-bottom: 10px;
}

.badge-primary {
    background: var(--accent);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-left: 8px;
}

/* Dashboard Header */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 20px;
}

.dash-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.dash-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

/* 상담원 대시보드 컴팩트 스타일 */
.dash-compact .dash-header {
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.dash-compact .dash-title {
    font-size: 14px;
}

.dash-compact .dash-subtitle {
    font-size: 11px;
    margin: 2px 0 0 0;
}

.role-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    background: var(--success-bg);
    color: var(--success);
    border-radius: 4px;
    margin-left: 8px;
}

.dash-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.refresh-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* Performance Cards Grid */
.perf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.perf-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 16px;
    text-align: center;
    transition: all 0.2s;
}

.perf-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.perf-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* 상담원 대시보드 컴팩트 perf */
.dash-compact .perf-grid {
    gap: 10px;
    margin-bottom: 12px;
}

.dash-compact .perf-card {
    border-radius: 6px;
    padding: 10px 8px;
}

.dash-compact .perf-card:hover {
    transform: translateY(-1px);
}

.dash-compact .perf-value {
    font-size: 18px;
    margin-bottom: 2px;
}

.perf-today .perf-value { color: #38B2AC; }
.perf-monthly .perf-value { color: var(--text-primary); }
.perf-comm-today .perf-value { color: #26D0CE; }
.perf-comm-monthly .perf-value { color: #45B7AA; }

.perf-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 4px;
}

.perf-sub {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.8;
}

.dash-compact .perf-label {
    font-size: 10px;
    margin-bottom: 2px;
}

.dash-compact .perf-sub {
    font-size: 9px;
}

/* Queue Grid */
.queue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 16px;
}

.queue-item {
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    background: var(--bg-hover);
}

.queue-waiting { border-left: 3px solid var(--warning); }
.queue-progress { border-left: 3px solid var(--accent); }
.queue-done { border-left: 3px solid var(--success); }

.queue-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.queue-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.queue-sub {
    font-size: 10px;
    color: var(--text-muted);
}

/* 상담원 대시보드 컴팩트 queue */
.dash-compact .queue-grid {
    gap: 10px;
    padding: 10px;
}

.dash-compact .queue-item {
    padding: 10px;
    border-radius: 6px;
}

.dash-compact .queue-value {
    font-size: 20px;
}

.dash-compact .queue-label {
    font-size: 11px;
    margin-top: 2px;
}

@media (max-width: 1024px) {
    .perf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .perf-grid {
        grid-template-columns: 1fr;
    }
    
    .queue-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Consultation Register Page ===== */

.cons-container {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 16px;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* 상담등록 화면일 때 content 영역 스타일 오버라이드 */
.content:has(.cons-container) {
    padding: 16px;
    overflow: hidden;
}

/* IE11 대응 - JavaScript로 클래스 추가 필요 */
.content.cons-page {
    padding: 16px;
    overflow: hidden;
    height: calc(100vh - 52px); /* 헤더 높이 제외 */
    max-height: calc(100vh - 52px);
    box-sizing: border-box;
}

/* 상담등록 페이지 - cons-container 높이 강제 */
.cons-page .cons-container {
    height: calc(100vh - 84px); /* 헤더 52px + padding 32px */
    max-height: calc(100vh - 84px);
}

/* Left Panel - Call List */
.cons-list-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    max-height: calc(100vh - 84px);
}

.cons-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-secondary);
}

.cons-list-header .badge {
    background: var(--accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

.cons-search-form {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.cons-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.cons-search-row:last-child {
    margin-bottom: 0;
}

.cons-search-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.cons-search-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.cons-search-btn:hover {
    background: var(--accent-hover);
}

.cons-list-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.cons-item {
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    transition: all 0.15s;
}

.cons-item:hover {
    background: var(--bg-hover);
}

.cons-item.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cons-item.active .cons-item-meta,
.cons-item.active .cons-item-phone {
    color: rgba(255,255,255,0.8);
}

.cons-item-company {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-item-phone {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.cons-item-meta {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cons-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
}

.cons-status.active { background: var(--success-bg); color: var(--success); }
.cons-status.saved { background: var(--accent); color: #fff; opacity: 0.8; }
.cons-status.pending { background: var(--warning-bg); color: var(--warning); }
.cons-status.receiving { background: var(--danger); color: #fff; animation: pulse 0.5s infinite; }
.cons-status.dialing { background: #e3f2fd; color: #1976d2; }
.cons-status.ringing { background: #fce4ec; color: #c2185b; animation: pulse 0.5s infinite; }
.cons-status.talking { background: #e8f5e9; color: #2e7d32; animation: pulse 1s infinite; }
.cons-status.missed_out { background: #ffebee; color: #c62828; }
.cons-status.missed_in { background: #fbe9e7; color: #d84315; }
.cons-status.unsaved { background: #fff3e0; color: #ef6c00; }

/* IN/OUT 콜 방향 표시 */
.cons-call-direction {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    margin-right: 4px;
    vertical-align: middle;
}
.cons-call-in {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}
.cons-call-out {
    background: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
}

.cons-item.emergency {
    border-left: 3px solid var(--danger);
}

/* 박스 버튼 그룹 */
.cons-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.cons-btn-group .cons-btn {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
    user-select: none;
    white-space: nowrap;
}

.cons-btn-group .cons-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--text-primary);
}

.cons-btn-group .cons-btn.selected {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.25);
}

.cons-btn-group .cons-btn.selected:hover {
    background: var(--accent-hover, #2563eb);
}

/* 스크롤 가능한 버튼 그룹 (구매구분 검색형) */
.cons-btn-group.scrollable {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    display: block;
}

.cons-btn-group.scrollable .cons-btn {
    padding: 4px 8px;
    font-size: 10px;
    min-width: 60px;
    text-align: center;
}

/* 구매구분 검색 래퍼 */
.buygubn-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    border-radius: 6px 6px 0 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

.buygubn-search-input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.buygubn-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.buygubn-search-input::placeholder {
    color: var(--text-muted);
    font-size: 10px;
}

.buygubn-selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buygubn-clear {
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: 0.8;
    font-weight: 400;
}

.buygubn-clear:hover {
    opacity: 1;
}

.buygubn-items-wrap {
    max-height: 110px;
    overflow-y: auto;
    padding: 6px;
}

.buygubn-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.buygubn-section-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 2px 2px;
    margin-top: 2px;
}

/* 구매구분 접기/펼치기 토글 */
.buygubn-toggle {
    cursor: pointer;
    font-size: 10px;
    color: var(--text-muted);
    user-select: none;
    transition: transform 0.2s;
    display: inline-block;
}

.buygubn-toggle::after {
    content: '\25B6';
}

.buygubn-toggle.expanded::after {
    content: '\25BC';
}

.buygubn-toggle:hover {
    color: var(--accent);
}

.cons-btn-group.scrollable.collapsed .buygubn-items-wrap {
    display: none;
}

/* 필수 선택 미선택 시 경고 표시 */
.cons-btn-group.error {
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 4px;
    background: var(--danger-bg, rgba(239, 68, 68, 0.05));
}

/* 버튼 그룹 로딩 표시 */
.cons-btn-loading {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px;
}

/* 상담등록 페이지네이션 */
.cons-register-pagination {
    padding: 8px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.cons-reg-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.cons-reg-pager .pager-btn,
.cons-reg-pager .pager-num {
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.cons-reg-pager .pager-btn:hover:not(:disabled),
.cons-reg-pager .pager-num:hover:not(.active) {
    background: var(--bg-hover);
}

.cons-reg-pager .pager-num.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    cursor: default;
}

.cons-reg-pager .pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cons-add-btn {
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    border-top: 1px solid var(--border);
    transition: background 0.15s;
}

.cons-add-btn:hover {
    background: var(--bg-hover);
}

.cons-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Center Panel - Form */
.cons-form-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    max-height: calc(100vh - 84px); /* 헤더 + padding */
}

.cons-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.cons-form-header-left {
    flex: 1;
}

.cons-form-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cons-form-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}

.cons-form-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}

.cons-form-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

/* 고객 정보 입력 섹션 */
.cons-customer-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* 고객 검색 드롭다운 */
.customer-search-dropdown {
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.customer-dropdown-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.customer-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.customer-dropdown-item:hover {
    background: var(--bg-tertiary);
}

.customer-dropdown-item:last-child {
    border-bottom: none;
}

.customer-item-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.customer-item-date {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}

.customer-item-info {
    font-size: 11px;
    color: var(--text-muted);
}

.customer-dropdown-more {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    background: var(--bg-secondary);
}

.cons-form-row-inline {
    display: flex;
    gap: 16px;
}

.cons-form-row-inline .cons-form-group {
    flex: 1;
}

.cons-form-row-inline .cons-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.cons-form-row-inline .cons-form-group input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
}

.cons-form-row-inline .cons-form-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-form-row-inline .cons-form-group input[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* 업체 검색 필드 */
.cons-search-field {
    display: flex;
    gap: 8px;
}
.cons-search-field input {
    flex: 1;
    cursor: pointer;
}
.cons-search-btn-inline {
    padding: 8px 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.cons-search-btn-inline:hover {
    opacity: 0.9;
}

/* 전화번호 필드 + 전화걸기 버튼 */
.cons-phone-field {
    display: flex;
    gap: 8px;
}
.cons-phone-field input {
    flex: 1;
}
.cons-dial-btn {
    padding: 8px 16px;
    background: var(--success);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cons-dial-btn:hover {
    opacity: 0.9;
}
.cons-dial-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

/* 상담등록 폼 레이아웃 */
.cons-form-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.cons-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 16px;
}

.cons-form-section {
    margin-bottom: 20px;
}

.cons-form-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-bottom: none;
}

.cons-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.cons-form-row.full {
    width: 100%;
}

.cons-form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cons-form-label .required {
    color: var(--danger);
    margin-left: 2px;
}

/* 복사 버튼 */
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    margin-left: 4px;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
    vertical-align: middle;
}

.copy-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.copy-btn.copy-all {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    opacity: 0.7;
}

.copy-btn.copy-all:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    opacity: 1;
}

/* 상담유형 등 버튼 많은 그룹 높이 제한 */
.cons-btn-group.compact {
    max-height: 80px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    align-content: flex-start;
}

.cons-form-control {
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.15s;
}

.cons-form-control:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-form-control::placeholder {
    color: var(--text-muted);
}

textarea.cons-form-control {
    resize: none;
    min-height: 100px;
    max-height: 400px;
    line-height: 1.6;
    overflow-y: hidden;
    transition: height 0.1s ease;
}

.cons-form-inline {
    display: flex;
    gap: 8px;
}

.cons-form-inline .cons-form-control {
    flex: 1;
}

/* Deposit Section */
.cons-deposit-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.cons-deposit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cons-deposit-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cons-deposit-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Options */
.cons-options {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}

.cons-option-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.cons-option-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.cons-option-label.danger {
    color: var(--danger);
    font-weight: 600;
}

/* Form Actions */
.cons-form-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

/* Edit Mode */
.cons-form-panel.edit-mode {
    border-color: var(--accent);
}

.cons-form-panel.edit-mode .cons-form-header {
    background: rgba(37, 99, 235, 0.1);
}

[data-theme="linear-dark"] .cons-form-panel.edit-mode .cons-form-header {
    background: rgba(139, 92, 246, 0.15);
}

.cons-edit-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* Right Panel - Info */
.cons-info-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
    max-height: calc(100vh - 84px);
}

.cons-info-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 350px);
}

.cons-info-header {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-info-body {
    padding: 12px 14px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.cons-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--border);
}

.cons-info-row:last-child {
    border-bottom: none;
}

.cons-info-label {
    color: var(--text-muted);
}

.cons-info-value {
    color: var(--text-primary);
    font-weight: 500;
}

.cons-info-value.code {
    font-size: 11px;
    color: var(--text-muted);
}

/* History List */
.cons-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    max-height: 100%;
}

.cons-history-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.cons-history-item:hover {
    background: var(--bg-hover);
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 4px;
}

.cons-history-item:last-child {
    border-bottom: none;
}

.cons-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cons-history-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.cons-history-code {
    font-size: 10px;
    color: var(--text-muted);
}

.cons-history-phone {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.cons-history-emp {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.cons-history-content {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cons-history-status {
    display: inline-block;
    font-size: 10px;
    color: var(--accent);
    margin-top: 4px;
    font-weight: 500;
}

.cons-history-modal {
    max-width: 700px;
}

.cons-history-modal-body {
    max-height: 500px;
    overflow-y: auto;
}

.detail-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-label {
    width: 100px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.detail-value {
    flex: 1;
}

.detail-section-gap {
    margin-top: 16px;
}

.detail-section-title {
    margin-bottom: 8px;
    font-weight: 600;
}

.detail-content-box {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 6px;
    min-height: 60px;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-memo-item {
    background: var(--bg-secondary);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.detail-memo-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.cons-badge-danger {
    display: inline-block;
    background: var(--danger);
    color: #fff;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 600;
}

/* ===== Memo Panel ===== */
.cons-memo-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9998;
    display: none;
}

.cons-memo-overlay.active {
    display: block;
}

.cons-memo-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100%;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

.cons-memo-panel.active {
    right: 0;
}

.cons-memo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.cons-memo-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.cons-memo-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.cons-memo-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
}

.cons-memo-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cons-memo-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cons-memo-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 13px;
}

.cons-memo-item {
    max-width: 85%;
}

.cons-memo-item.agent,
.cons-memo-item.mine {
    align-self: flex-end;
}

.cons-memo-item.client,
.cons-memo-item.others {
    align-self: flex-start;
}

.cons-memo-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.cons-memo-bubble.expandable {
    cursor: pointer;
    transition: background 0.15s;
}

.cons-memo-bubble.expandable:hover {
    opacity: 0.9;
}

.cons-memo-bubble.expanded {
    white-space: pre-wrap;
}

.memo-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 6px;
}

.memo-toggle-all-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

.memo-toggle-all-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cons-memo-item.agent .cons-memo-bubble,
.cons-memo-item.mine .cons-memo-bubble {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cons-memo-item.client .cons-memo-bubble,
.cons-memo-item.others .cons-memo-bubble {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.cons-memo-meta {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    padding: 0 4px;
}

.cons-memo-item.agent .cons-memo-meta,
.cons-memo-item.mine .cons-memo-meta {
    text-align: right;
}

.cons-memo-unread {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--danger);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
}

/* 메모 패널 입력 영역 */
.cons-memo-panel .cons-memo-input {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    display: block !important;
}

.cons-memo-panel .cons-memo-input textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    resize: none;
    margin-bottom: 8px;
}

.cons-memo-panel .cons-memo-input textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-memo-panel .cons-memo-text-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 12px;
    min-height: 44px;
    box-sizing: border-box;
    display: block !important;
    flex: none !important;
}

.cons-memo-panel .cons-memo-text-input:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-memo-panel .cons-memo-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.cons-memo-options {
    display: flex;
    gap: 12px;
    flex: 1;
}

.cons-memo-option {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.cons-memo-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.cons-memo-send {
    padding: 8px 20px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.cons-memo-send:hover {
    background: var(--accent-hover);
}

/* Memo badge in call list */
.cons-memo-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    transition: all 0.15s;
}

/* 메모 있음 - 강조 스타일 */
.cons-memo-badge.has-memo {
    background: var(--warning);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cons-memo-badge.has-memo:hover {
    transform: scale(1.05);
}

/* 메모 없음 - 약한 스타일 */
.cons-memo-badge.no-memo {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.cons-memo-badge.no-memo:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

/* Active item에서 메모 버튼 스타일 */
.cons-item.active .cons-memo-badge.has-memo {
    background: #fff;
    color: var(--warning);
}

.cons-item.active .cons-memo-badge.no-memo {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.9);
}

/* Responsive */
@media (max-width: 1200px) {
    .cons-container {
        grid-template-columns: 250px 1fr 280px;
    }
}

@media (max-width: 992px) {
    .cons-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        height: auto;
    }
    
    .cons-list-panel {
        max-height: 200px;
    }
    
    .cons-info-panel {
        flex-direction: row;
    }
    
    .cons-info-card {
        flex: 1;
    }
}

/* ===== Date Picker ===== */
.date-picker {
    position: fixed;
    z-index: 9999;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 10px;
    width: 240px;
    display: none;
}

.date-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.date-picker-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.date-picker-nav {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    transition: all 0.15s;
}

.date-picker-nav:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.date-picker-grid {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.date-picker-row {
    display: table-row;
}

.date-picker-cell {
    display: table-cell;
    height: 28px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 4px 0;
}

.date-picker-cell:hover {
    background: var(--bg-hover);
}

.date-picker-cell.header {
    font-weight: 600;
    color: var(--text-muted);
    cursor: default;
    font-size: 11px;
    height: 24px;
}

.date-picker-cell.header:hover {
    background: transparent;
}

.date-picker-cell.other-month {
    color: var(--text-muted);
    opacity: 0.3;
    cursor: default;
}

.date-picker-cell.other-month:hover {
    background: transparent;
}

.date-picker-cell.today {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.date-picker-cell.today:hover {
    background: var(--accent-hover);
}

.date-picker-cell.sun {
    color: var(--danger);
}

.date-picker-cell.sun.today {
    color: #fff;
}

.date-picker-cell.sat {
    color: var(--accent);
}

.date-picker-cell.sat.today {
    color: #fff;
}

/* Linear Dark Theme */
[data-theme="linear-dark"] .date-picker {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Linear Light Theme */
[data-theme="linear-light"] .date-picker {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Notion Theme - 실제 노션 달력 스타일 */
[data-theme="notion"] .date-picker {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.1) 0px 3px 6px, 
                rgba(15, 15, 15, 0.2) 0px 9px 24px;
    border: none;
    background: #ffffff;
    padding: 8px;
}

[data-theme="notion"] .date-picker-header {
    border-bottom: none;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

[data-theme="notion"] .date-picker-title {
    font-size: 14px;
    font-weight: 500;
    color: #37352f;
}

[data-theme="notion"] .date-picker-nav {
    border-radius: 3px;
    width: 24px;
    height: 24px;
    color: rgba(55, 53, 47, 0.45);
}

[data-theme="notion"] .date-picker-nav:hover {
    background: rgba(55, 53, 47, 0.08);
    color: #37352f;
}

[data-theme="notion"] .date-picker-cell {
    font-size: 14px;
    color: #37352f;
    border-radius: 3px;
}

[data-theme="notion"] .date-picker-cell:hover {
    background: rgba(55, 53, 47, 0.08);
}

[data-theme="notion"] .date-picker-cell.header {
    font-size: 12px;
    font-weight: 500;
    color: rgba(55, 53, 47, 0.5);
    text-transform: uppercase;
}

[data-theme="notion"] .date-picker-cell.header.sun,
[data-theme="notion"] .date-picker-cell.header.sat {
    color: rgba(55, 53, 47, 0.5);
}

[data-theme="notion"] .date-picker-cell.sun {
    color: #eb5757;
}

[data-theme="notion"] .date-picker-cell.sat {
    color: #2383e2;
}

[data-theme="notion"] .date-picker-cell.today {
    background: #2383e2;
    color: #ffffff;
    font-weight: 500;
}

[data-theme="notion"] .date-picker-cell.today:hover {
    background: #0b6bcb;
}

[data-theme="notion"] .date-picker-cell.other-month {
    color: rgba(55, 53, 47, 0.25);
}

/* Notion theme adjustments */
[data-theme="notion"] .cons-container {
    gap: 12px;
}

[data-theme="notion"] .cons-list-panel,
[data-theme="notion"] .cons-form-panel,
[data-theme="notion"] .cons-info-card {
    border-radius: 3px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .cons-form-section-title {
    color: rgba(55, 53, 47, 0.65);
}

[data-theme="notion"] .cons-form-control {
    border-radius: 3px;
}

[data-theme="notion"] .cons-item {
    border-radius: 3px;
}

[data-theme="notion"] .cons-status {
    border-radius: 3px;
}

/* ===== 사업장 관리 스타일 ===== */

.workplace-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 20px;
}

.workplace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.workplace-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.workplace-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.workplace-actions {
    display: flex;
    gap: 8px;
}

.btn-workplace {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-workplace.btn-new {
    background: var(--accent);
    color: #fff;
}

.btn-workplace.btn-new:hover {
    background: var(--accent-hover);
}

.btn-workplace.btn-refresh {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-workplace.btn-refresh:hover {
    background: var(--bg-hover);
}

.workplace-content {
    flex: 1;
    overflow-y: auto;
}

.workplace-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.workplace-loading,
.workplace-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
}

.empty-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* 사업장 카드 */
.workplace-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.workplace-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.workplace-card.inactive {
    opacity: 0.6;
}

.workplace-card.inactive:hover {
    opacity: 0.8;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
}

.card-status {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
}

.card-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.card-status.inactive {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.card-info .info-item {
    font-size: 12px;
    color: var(--text-secondary);
}

.card-address {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 모달 */
.workplace-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.workplace-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.workplace-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.workplace-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.workplace-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.workplace-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* 폼 스타일 */
.form-section {
    margin-bottom: 24px;
}

.form-section:last-child {
    margin-bottom: 0;
}

.form-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row:last-child {
    margin-bottom: 0;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group.flex-2 {
    flex: 2;
}

.form-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.form-group label .required {
    color: var(--danger);
}

.form-group input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.form-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

.radio-group {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    margin: 0;
}

/* 모달 버튼 */
.btn-modal {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-modal.btn-save {
    background: var(--accent);
    color: #fff;
}

.btn-modal.btn-save:hover {
    background: var(--accent-hover);
}

.btn-modal.btn-delete {
    background: var(--danger);
    color: #fff;
}

.btn-modal.btn-delete:hover {
    background: #dc2626;
}

.btn-modal.btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-modal.btn-cancel:hover {
    background: var(--bg-hover);
}

/* Notion 테마 사업장 스타일 */
[data-theme="notion"] .workplace-card {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .workplace-card:hover {
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

[data-theme="notion"] .workplace-modal {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.1) 0px 3px 6px, 
                rgba(15, 15, 15, 0.2) 0px 9px 24px;
}

[data-theme="notion"] .btn-workplace,
[data-theme="notion"] .btn-modal {
    border-radius: 4px;
}

[data-theme="notion"] .form-group input[type="text"] {
    border-radius: 4px;
}

/* ===== Menu Management Page ===== */
.menu-manage-container {
    padding: 24px;
    background: var(--bg-primary);
    min-height: calc(100vh - 60px);
}

.menu-manage-header {
    display: table;
    width: 100%;
    margin-bottom: 24px;
}

.menu-manage-title {
    display: table-cell;
    vertical-align: middle;
}

.menu-manage-title h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.menu-manage-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

.menu-manage-actions {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.btn-menu {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-menu.btn-refresh {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-menu.btn-refresh:hover {
    background: var(--bg-hover);
}

/* 3단 레이아웃 */
.menu-three-level {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 16px 0;
}

.menu-level-panel {
    display: table-cell;
    width: 33.333%;
    vertical-align: top;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

/* 레벨 헤더 */
.menu-level-header {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    display: table;
    width: 100%;
}

.menu-level-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    margin-right: 8px;
}

.menu-level-icon.main { background: #3b82f6; }
.menu-level-icon.sub { background: #10b981; }
.menu-level-icon.detail { background: #f59e0b; }

.menu-level-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.menu-level-count {
    float: right;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 레벨 툴바 */
.menu-level-toolbar {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-sm:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-sm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 메뉴 목록 */
.menu-level-list {
    height: 280px;
    overflow-y: auto;
    padding: 8px;
}

.menu-level-loading,
.menu-level-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 16px;
}

.menu-item {
    display: table;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.menu-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.menu-item.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.menu-item.selected .menu-item-name,
.menu-item.selected .menu-item-order {
    color: #fff;
}

.menu-item.selected .menu-item-status {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.menu-item-icon {
    display: table-cell;
    width: 26px;
    vertical-align: middle;
}

.menu-item-icon span,
.menu-item-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    text-align: center;
    line-height: 18px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

.menu-item-icon.main { background: #3b82f6; }
.menu-item-icon.sub { background: #10b981; }
.menu-item-icon.detail { background: #f59e0b; }

.menu-item-name {
    display: table-cell;
    vertical-align: middle;
    font-size: 13px;
    color: var(--text-primary);
    padding-left: 8px;
}

.menu-item-status {
    display: table-cell;
    width: 45px;
    vertical-align: middle;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 10px;
}

.menu-item-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.menu-item-status.inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

.menu-item-order {
    display: table-cell;
    width: 30px;
    vertical-align: middle;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
}

/* 폼 영역 */
.menu-level-form {
    padding: 16px;
    border-top: 2px solid var(--accent);
    background: var(--bg-primary);
}

.menu-form-row {
    margin-bottom: 12px;
}

.menu-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.menu-form-row input[type="text"],
.menu-form-row input[type="number"],
.menu-form-row select {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.menu-form-row input:focus,
.menu-form-row select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.menu-form-inline {
    display: table;
    width: 100%;
}

.menu-form-inline input,
.menu-form-inline button {
    display: table-cell;
}

.btn-order {
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 10px;
    line-height: 32px;
    text-align: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    margin-left: 4px;
    transition: all 0.15s ease;
}

.btn-order:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* 폼 버튼 */
.menu-form-buttons {
    display: table;
    width: 100%;
    margin-top: 16px;
    border-spacing: 6px 0;
}

.menu-form-buttons button {
    display: table-cell;
    width: 33.333%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.menu-form-buttons .btn-save {
    background: var(--accent);
    color: #fff;
}

.menu-form-buttons .btn-save:hover:not(:disabled) {
    background: var(--accent-hover);
}

.menu-form-buttons .btn-delete {
    background: var(--danger);
    color: #fff;
}

.menu-form-buttons .btn-delete:hover:not(:disabled) {
    background: #dc2626;
}

.menu-form-buttons .btn-clear {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.menu-form-buttons .btn-clear:hover {
    background: var(--bg-hover);
}

.menu-form-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Notion 테마 메뉴 관리 */
[data-theme="notion"] .menu-level-panel {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .menu-item {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .menu-item:hover {
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

[data-theme="notion"] .menu-item.selected {
    background: #2383e2;
}

[data-theme="notion"] .btn-sm,
[data-theme="notion"] .btn-order,
[data-theme="notion"] .menu-form-buttons button {
    border-radius: 4px;
}

[data-theme="notion"] .menu-form-row input,
[data-theme="notion"] .menu-form-row select {
    border-radius: 4px;
}

/* Linear Dark 메뉴 관리 */
[data-theme="linear-dark"] .menu-level-panel {
    background: #1a1a1a;
}

[data-theme="linear-dark"] .menu-level-header {
    background: #222;
}

[data-theme="linear-dark"] .menu-item {
    background: #262626;
    border-color: #333;
}

[data-theme="linear-dark"] .menu-item:hover {
    background: #333;
}

[data-theme="linear-dark"] .menu-item.selected {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="linear-dark"] .menu-level-form {
    background: #1a1a1a;
    border-top-color: #8b5cf6;
}

/* ===== Menu Manage v2 (트리뷰 + 간편 등록) ===== */
.mm-container { padding: 20px; background: var(--bg-primary); min-height: calc(100vh - 60px); }
.mm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mm-header-left h2 { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.mm-subtitle { font-size: 13px; color: var(--text-muted); }
.mm-header-right { display: flex; gap: 8px; }

.mm-body { display: flex; gap: 16px; align-items: flex-start; }
.mm-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mm-right { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }

.mm-panel { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.mm-panel-title { font-size: 14px; font-weight: 600; color: var(--text-primary); padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: var(--bg-tertiary); }

/* 트리 */
.mm-tree-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-color); }
.mm-search { flex: 1; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; }
.mm-search:focus { outline: none; border-color: var(--accent-color); }
.mm-toggle-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 4px; }

.mm-tree-scroll { max-height: 420px; overflow-y: auto; padding: 4px 0; }
.mm-tree-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }

.mm-tree-node { display: flex; align-items: center; padding: 5px 8px; cursor: pointer; font-size: 13px; color: var(--text-primary); transition: background 0.15s; position: relative; }
.mm-tree-node:hover { background: var(--bg-tertiary); }
.mm-tree-node.selected { background: var(--accent-bg); border-right: 3px solid var(--accent-color); }
.mm-tree-node.disabled { opacity: 0.5; }
.mm-tree-node.disabled .mm-tree-label { text-decoration: line-through; }
.mm-tree-node.search-match .mm-tree-label mark { background: #fbbf24; color: #000; padding: 0 2px; border-radius: 2px; }

.mm-tree-toggle { width: 18px; text-align: center; font-size: 10px; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
.mm-tree-toggle:hover { color: var(--accent-color); }
.mm-tree-toggle-spacer { width: 18px; flex-shrink: 0; }
.mm-tree-icon { margin-right: 4px; font-size: 14px; flex-shrink: 0; }
.mm-tree-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-tree-badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; flex-shrink: 0; }
.mm-tree-badge.disabled { background: #ef4444; color: #fff; }

.mm-tree-actions { opacity: 0; margin-left: 4px; flex-shrink: 0; }
.mm-tree-node:hover .mm-tree-actions { opacity: 1; }
.mm-tree-action-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1; }
.mm-tree-action-btn:hover { color: var(--accent-color); }

.mm-tree-footer { padding: 8px 12px; border-top: 1px solid var(--border-color); }

/* 컨텍스트 메뉴 */
.mm-context-menu { position: absolute; z-index: 9999; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); min-width: 180px; padding: 4px 0; }
.mm-context-item { padding: 8px 14px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.mm-context-item:hover { background: var(--bg-tertiary); }
.mm-context-item.danger { color: #ef4444; }
.mm-context-item.danger:hover { background: rgba(239,68,68,0.1); }
.mm-context-sep { height: 1px; background: var(--border-color); margin: 4px 0; }

/* 폼 */
.mm-form { padding: 16px; }
.mm-form-group { margin-bottom: 14px; }
.mm-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.mm-required { color: #ef4444; }
.mm-input, .mm-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-primary); color: var(--text-primary); font-size: 13px; box-sizing: border-box; }
.mm-input:focus, .mm-select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(139,92,246,0.2); }
.mm-hint { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.mm-form-actions { display: flex; gap: 8px; margin-top: 20px; }
.mm-btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
.mm-btn-primary { background: var(--accent-color); color: #fff; }
.mm-btn-primary:hover { opacity: 0.9; }
.mm-btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); }
.mm-btn-outline:hover { background: var(--bg-tertiary); }
.mm-btn-sm { padding: 5px 12px; font-size: 12px; background: var(--accent-color); color: #fff; border: none; border-radius: 5px; cursor: pointer; }
.mm-btn-sm:hover { opacity: 0.9; }

/* 미리보기 */
.mm-preview-panel { }
.mm-preview-scroll { max-height: 220px; overflow-y: auto; padding: 8px 0; }
.mm-preview-section { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px 4px; }
.mm-preview-item { font-size: 13px; color: var(--text-secondary); padding: 4px 12px; }
.mm-preview-item.folder { color: var(--text-primary); font-weight: 500; }
.mm-preview-arrow { font-size: 9px; color: var(--text-muted); }
.mm-preview-dot { color: var(--text-muted); }
.mm-preview-empty { padding: 16px; text-align: center; color: var(--text-muted); font-size: 12px; }

/* 도움말 */
.mm-help-panel { }
.mm-help-content { padding: 12px 16px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.mm-help-content p { margin: 0 0 6px; font-weight: 600; color: var(--text-primary); }
.mm-help-item { padding: 2px 0; }

/* 반응형 */
@media (max-width: 900px) {
    .mm-body { flex-direction: column; }
    .mm-right { width: 100%; }
}

/* ===== Code Management Page ===== */
.code-manage-container {
    padding: 24px;
    background: var(--bg-primary);
    min-height: calc(100vh - 60px);
}

.code-manage-header {
    margin-bottom: 24px;
}

.code-manage-title h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.code-manage-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
}

/* 2분할 레이아웃 */
.code-two-panel {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 20px 0;
}

.code-panel {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.code-panel-header {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.code-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.code-panel-info {
    font-size: 12px;
    color: var(--accent);
    margin-left: 8px;
}

.code-panel-count {
    float: right;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 툴바 */
.code-panel-toolbar {
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.code-search-row {
    display: table;
    width: 100%;
    margin-bottom: 8px;
}

.code-search-row input,
.code-search-row select,
.code-search-row button {
    display: table-cell;
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    margin-right: 6px;
}

.code-search-row input:focus,
.code-search-row select:focus {
    outline: none;
    border-color: var(--accent);
}

.code-action-row {
    text-align: right;
}

.code-action-row .btn-add {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}

/* 목록 */
.code-panel-list {
    height: 260px;
    overflow-y: auto;
    padding: 8px;
}

.code-loading,
.code-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 40px 16px;
}

.code-item {
    display: table;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.code-item.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.code-item.selected .code-item-code,
.code-item.selected .code-item-name,
.code-item.selected .code-item-order,
.code-item.selected .code-item-rmk {
    color: #fff;
}

.code-item.selected .code-item-status {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.code-item-code {
    display: table-cell;
    width: 60px;
    vertical-align: middle;
    font-weight: 600;
    font-size: 12px;
    color: var(--accent);
}

.code-item-name {
    display: table-cell;
    vertical-align: middle;
    font-size: 13px;
    color: var(--text-primary);
}

.code-item-status {
    display: table-cell;
    width: 45px;
    vertical-align: middle;
    text-align: center;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 10px;
}

.code-item-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.code-item-status.inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

.code-item-order {
    display: table-cell;
    width: 30px;
    vertical-align: middle;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
}

.code-item-rmk {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 폼 영역 */
.code-panel-form {
    padding: 16px;
    border-top: 2px solid var(--accent);
    background: var(--bg-primary);
}

.code-form-row {
    margin-bottom: 12px;
}

.code-form-row label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.code-form-row input[type="text"],
.code-form-row input[type="number"],
.code-form-row select {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.code-form-row input:focus,
.code-form-row select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.code-form-row input[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

/* 폼 버튼 */
.code-form-buttons {
    display: table;
    width: 100%;
    margin-top: 16px;
    border-spacing: 6px 0;
}

.code-form-buttons button {
    display: table-cell;
    width: 33.333%;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-form-buttons .btn-save {
    background: var(--accent);
    color: #fff;
}

.code-form-buttons .btn-save:hover:not(:disabled) {
    background: var(--accent-hover);
}

.code-form-buttons .btn-delete {
    background: var(--danger);
    color: #fff;
}

.code-form-buttons .btn-delete:hover:not(:disabled) {
    background: #dc2626;
}

.code-form-buttons .btn-clear {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.code-form-buttons .btn-clear:hover {
    background: var(--bg-hover);
}

.code-form-buttons button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Notion 테마 공통코드 */
[data-theme="notion"] .code-panel {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .code-item {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .code-item:hover {
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, 
                rgba(15, 15, 15, 0.1) 0px 2px 4px;
}

[data-theme="notion"] .code-item.selected {
    background: #2383e2;
}

/* Linear Dark 공통코드 */
[data-theme="linear-dark"] .code-panel {
    background: #1a1a1a;
}

[data-theme="linear-dark"] .code-panel-header {
    background: #222;
}

[data-theme="linear-dark"] .code-item {
    background: #262626;
    border-color: #333;
}

[data-theme="linear-dark"] .code-item:hover {
    background: #333;
}

[data-theme="linear-dark"] .code-item.selected {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="linear-dark"] .code-panel-form {
    background: #1a1a1a;
    border-top-color: #8b5cf6;
}

/* ===== 직원 관리 (Employee Edit) 스타일 ===== */
.employee-edit-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 140px);
    padding: 16px;
    overflow: hidden;
}

.employee-search-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.employee-main-layout {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.employee-list-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.employee-detail-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 업체 관리 (Company Manage) 스타일 ===== */
.company-manage-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 140px);
    padding: 16px;
    overflow: hidden;
}

.company-search-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

.company-main-layout {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
}

.company-list-panel {
    flex: 1.5;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.company-detail-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 공통 패널 스타일 ===== */
.panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-count {
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

.panel-status {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
}

.panel-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
}

/* ===== 검색 그리드 ===== */
.search-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.search-actions-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-actions-cell {
    display: flex;
    flex-direction: column;
}

/* ===== 공통 패널 스타일 ===== */
.panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===== 공통 데이터 테이블 스타일 ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.data-table th {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.data-table tbody tr:hover {
    background: var(--bg-tertiary);
}

.data-table tbody tr.selected {
    background: rgba(99, 102, 241, 0.1);
}

.data-table .empty-row {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
}

[data-theme="linear-dark"] .data-table th {
    background: #262626;
}

[data-theme="linear-dark"] .data-table tbody tr:hover {
    background: #333;
}

[data-theme="linear-dark"] .data-table tbody tr.selected {
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="notion"] .data-table th {
    background: #f7f6f3;
    color: #9b9a97;
}

[data-theme="notion"] .data-table tbody tr:hover {
    background: #f7f6f3;
}

/* ===== 공통 검색 패널 스타일 ===== */
.search-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
}

.search-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.search-cell {
    flex: 1;
    min-width: 150px;
    max-width: 250px;
}

.search-cell label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.search-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

/* ===== 빈 선택 상태 ===== */
.empty-selection {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    background: var(--bg-tertiary);
    border: 2px dashed var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
}

.empty-selection p {
    margin: 0;
    line-height: 1.6;
}

/* ===== 폼 레이아웃 ===== */
.form-row-1, .form-row-2, .form-row-3, .form-row-4 {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.form-row-1 .form-cell { flex: 1; }
.form-row-2 .form-cell { flex: 1; }
.form-row-3 .form-cell { flex: 1; }
.form-row-4 .form-cell { flex: 1; }

.form-cell label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.form-cell .form-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    box-sizing: border-box;
}

.form-cell .form-input:focus {
    outline: none;
    border-color: var(--accent);
}

.form-cell .form-input:read-only {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.form-cell select.form-input {
    cursor: pointer;
}

.form-cell textarea.form-input {
    height: auto;
    padding: 8px 10px;
    resize: vertical;
}

/* ===== 주소 그룹 ===== */
.address-group {
    display: flex;
    gap: 8px;
}

/* ===== 라디오 그룹 ===== */
.radio-group {
    display: flex;
    gap: 16px;
    padding-top: 6px;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    margin-bottom: 0;
}

.radio-group input[type="radio"] {
    margin: 0;
}

/* ===== 폼 액션 ===== */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--border);
}

/* ===== 포인트 요약 (업체 관리) ===== */
.points-summary {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-hover) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
}

.points-item {
    flex: 1;
    text-align: center;
}

.points-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.points-value {
    font-size: 18px;
    font-weight: 700;
}

.points-value.positive { color: var(--success); }
.points-value.negative { color: var(--danger); }

/* ===== 테이블 스타일 ===== */
.wio-table {
    width: 100%;
    border-collapse: collapse;
}

.wio-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.wio-table th {
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    white-space: nowrap;
}

.wio-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-primary);
}

.wio-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.wio-table tbody tr:hover {
    background: var(--bg-hover);
}

.wio-table tbody tr.selected {
    background: var(--accent);
    color: #fff;
}

.wio-table tbody tr.selected td {
    color: #fff;
}

/* 테이블 셀 스타일 */
.company-code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.company-name {
    font-weight: 500;
}

.company-bizno {
    font-family: 'Courier New', monospace;
    color: var(--text-muted);
}

.points-positive { color: var(--success); font-weight: 600; }
.points-negative { color: var(--danger); font-weight: 600; }

.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.status-badge.active {
    background: var(--success-bg);
    color: var(--success);
}

.status-badge.inactive {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ===== 테마별 직원/업체 관리 스타일 ===== */
[data-theme="notion"] .employee-search-section,
[data-theme="notion"] .company-search-section,
[data-theme="notion"] .employee-list-panel,
[data-theme="notion"] .employee-detail-panel,
[data-theme="notion"] .company-list-panel,
[data-theme="notion"] .company-detail-panel {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .panel-header {
    border-bottom: none;
    box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px inset;
}

[data-theme="notion"] .wio-table tbody tr.selected {
    background: #2383e2;
}

[data-theme="linear-dark"] .employee-search-section,
[data-theme="linear-dark"] .company-search-section {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="linear-dark"] .employee-list-panel,
[data-theme="linear-dark"] .employee-detail-panel,
[data-theme="linear-dark"] .company-list-panel,
[data-theme="linear-dark"] .company-detail-panel {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="linear-dark"] .panel-header {
    background: #222;
    border-bottom-color: #333;
}

[data-theme="linear-dark"] .wio-table th {
    background: #222;
    border-bottom-color: #8b5cf6;
}

[data-theme="linear-dark"] .wio-table td {
    border-bottom-color: #333;
}

[data-theme="linear-dark"] .wio-table tbody tr:hover {
    background: #333;
}

[data-theme="linear-dark"] .wio-table tbody tr.selected {
    background: #8b5cf6;
}

[data-theme="linear-dark"] .empty-selection {
    background: #262626;
    border-color: #444;
}

[data-theme="linear-dark"] .points-summary {
    background: linear-gradient(135deg, #262626 0%, #1a1a1a 100%);
    border-color: #444;
}

[data-theme="linear-dark"] .form-cell .form-input {
    background: #262626;
    border-color: #444;
    color: #f5f5f5;
}

[data-theme="linear-dark"] .form-cell .form-input:focus {
    border-color: #8b5cf6;
}

[data-theme="linear-dark"] .form-cell .form-input:read-only {
    background: #1a1a1a;
    color: #737373;
}

[data-theme="linear-dark"] .search-input {
    background: #262626;
    border-color: #444;
    color: #f5f5f5;
}

[data-theme="linear-dark"] .search-input:focus {
    border-color: #8b5cf6;
}

[data-theme="linear-dark"] .search-panel {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="linear-dark"] .panel {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="notion"] .search-panel {
    background: #fbfbfa;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .panel {
    background: #ffffff;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

/* ===== 공통 페이징 스타일 ===== */
.pagination-wrapper {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.pagination-btn.disabled,
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--text-muted);
}

/* 테마별 페이징 스타일 */
[data-theme="linear-dark"] .pagination-wrapper {
    background: #222;
    border-top-color: #333;
}

[data-theme="linear-dark"] .pagination-btn {
    background: #262626;
    border-color: #444;
    color: #f5f5f5;
}

[data-theme="linear-dark"] .pagination-btn:hover:not(:disabled) {
    background: #333;
    border-color: #8b5cf6;
}

[data-theme="linear-dark"] .pagination-btn.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="notion"] .pagination-btn {
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

[data-theme="notion"] .pagination-btn:hover:not(:disabled) {
    background: #efefef;
}

[data-theme="notion"] .pagination-btn.active {
    background: #2383e2;
}

/* ===== 리스트 영역 스크롤 ===== */
.employee-list-panel .panel-body,
.company-list-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.employee-detail-panel .panel-body,
.company-detail-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 메인 레이아웃 높이 조정 - 화면에 맞게 유동적 */
.employee-main-layout,
.company-main-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.employee-list-panel,
.company-list-panel,
.employee-detail-panel,
.company-detail-panel {
    height: 100%;
    max-height: 100%;
}

/* 스크롤바 스타일 */
.panel-body::-webkit-scrollbar {
    width: 8px;
}

.panel-body::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.panel-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.panel-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

[data-theme="linear-dark"] .panel-body::-webkit-scrollbar-track {
    background: #262626;
}

[data-theme="linear-dark"] .panel-body::-webkit-scrollbar-thumb {
    background: #444;
}

[data-theme="linear-dark"] .panel-body::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* ===== 포인트 충전/차감 섹션 ===== */
.points-action-section {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.points-action-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.points-action-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.points-action-cell {
    flex: 1;
}

.points-action-cell.flex-2 {
    flex: 2;
}

.points-action-cell label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.points-action-buttons {
    display: flex;
    gap: 8px;
}

.points-action-buttons .btn {
    min-width: 60px;
    height: 34px;
    font-size: 12px;
}

/* 테마별 포인트 섹션 */
[data-theme="linear-dark"] .points-action-section {
    background: #262626;
    border-color: #444;
}

[data-theme="notion"] .points-action-section {
    background: #fbfbfa;
    border-radius: 4px;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
}

/* ===== 업체 담당자 조회 스타일 ===== */
.contacts-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 140px);
    padding: 16px;
    overflow: hidden;
}

.contacts-main-layout {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.contacts-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contacts-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contacts-list-panel .panel-body,
.contacts-detail-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 권한 뱃지 */
.badge-admin {
    display: inline-block;
    padding: 2px 8px;
    background: #dc2626;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.badge-user {
    display: inline-block;
    padding: 2px 8px;
    background: #6b7280;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

[data-theme="linear-dark"] .badge-admin {
    background: #ef4444;
}

[data-theme="linear-dark"] .badge-user {
    background: #9ca3af;
}

/* ===== 업체 아이디 승인 스타일 ===== */
.approval-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: calc(100vh - 140px);
    padding: 16px;
    overflow: hidden;
}

/* 통계 카드 */
.approval-stats {
    display: flex;
    gap: 16px;
}

.stat-card {
    flex: 1;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.stat-card.pending {
    border-left: 4px solid #f59e0b;
}

.stat-card.approved {
    border-left: 4px solid #10b981;
}

.stat-card.rejected {
    border-left: 4px solid #ef4444;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-label {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.stat-card.pending .stat-value { color: #f59e0b; }
.stat-card.approved .stat-value { color: #10b981; }
.stat-card.rejected .stat-value { color: #ef4444; }

/* 승인 목록 */
.approval-list-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.approval-list-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 상태 뱃지 */
.status-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.approved {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.rejected {
    background: #fee2e2;
    color: #991b1b;
}

[data-theme="linear-dark"] .status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="linear-dark"] .status-badge.approved {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="linear-dark"] .status-badge.rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* 액션 셀 */
.action-cell {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.action-cell .btn-sm {
    padding: 4px 12px;
    font-size: 11px;
    min-width: auto;
}

.action-done {
    color: var(--text-muted);
    font-size: 12px;
}

/* 다크 테마 통계 카드 */
[data-theme="linear-dark"] .stat-card {
    background: #262626;
    border-color: #444;
}

/* 노션 테마 통계 카드 */
[data-theme="notion"] .stat-card {
    background: #fbfbfa;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px;
    border: none;
    border-radius: 4px;
}

[data-theme="notion"] .stat-card.pending {
    border-left: 3px solid #f59e0b;
}

[data-theme="notion"] .stat-card.approved {
    border-left: 3px solid #10b981;
}

[data-theme="notion"] .stat-card.rejected {
    border-left: 3px solid #ef4444;
}

/* ===== 모달 스타일 ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background: var(--bg-secondary);
    border: var(--border-width, 1px) solid var(--border);
    border-radius: var(--radius-lg, 12px);
    width: 90%;
    max-width: 480px;
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
    transform: scale(0.9);
    transition: transform var(--transition-normal, 0.2s);
}

.modal-overlay.show .modal-dialog {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
}

.modal-info {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.info-label {
    font-size: 13px;
    color: var(--text-muted);
}

.info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-form label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
    border-radius: 0 0 12px 12px;
}

/* 다크 테마 모달 */
[data-theme="linear-dark"] .modal-dialog {
    background: #1a1a1a;
    border-color: #333;
}

[data-theme="linear-dark"] .modal-info {
    background: #262626;
}

/* 노션 테마 모달 */
[data-theme="notion"] .modal-dialog {
    background: #ffffff;
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
    border: none;
}

[data-theme="notion"] .modal-info {
    background: #f7f6f3;
}

/* ===== 관리자 대시보드 섹션 ===== */
.admin-dash-section {
    border-left: 3px solid var(--accent);
}

.admin-stats-grid {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.admin-stat-card {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.admin-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
}

.admin-stat-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* 매출 현황 그리드 */
.revenue-grid {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.revenue-card {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.revenue-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.revenue-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.revenue-summary {
    display: flex;
    gap: 16px;
    padding: 0 16px 16px;
}

.revenue-total {
    flex: 1;
    background: var(--success-bg);
    border: 1px solid var(--success);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.revenue-total.today {
    background: var(--accent);
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--accent);
}

.revenue-total-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.revenue-total-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--success);
}

.revenue-total.today .revenue-total-value {
    color: var(--accent);
}

/* ===== 게이미피케이션 섹션 (상담원용) ===== */
.gamify-section {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 2px solid var(--accent);
    border-radius: 8px;
}

.gamify-section .card-header {
    border-bottom: 1px solid var(--border);
}

.gamify-level {
    background: var(--accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.gamify-content {
    padding: 12px;
}

.gamify-progress-wrap {
    margin-bottom: 10px;
}

.gamify-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.gamify-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    border-radius: 6px;
    transition: width 0.5s ease;
}

.gamify-progress-text {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}

.gamify-reward {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gamify-reward-icon {
    font-size: 18px;
}

#levelReward {
    font-size: 12px;
    font-weight: 600;
    color: var(--warning);
}

.gamify-streak {
    display: flex;
    gap: 8px;
    padding: 0 12px 12px;
}

.streak-item {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.streak-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.streak-label {
    font-size: 10px;
    color: var(--text-muted);
}

.streak-item.wide {
    flex: 2;
}

.streak-value.small {
    font-size: 11px;
    font-weight: 600;
}

/* ===== 프로필 페이지 ===== */
.profile-container {
    max-width: 800px;
    margin: 0 auto;
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

/* tab-bar 내부 탭 버튼 전용 스타일 (underline 스타일) */
.tab-bar .tab-btn {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: all 0.2s;
}

.tab-bar .tab-btn:hover {
    color: var(--text-primary);
    background: transparent;
}

.tab-bar .tab-btn.active {
    color: var(--accent);
    background: transparent;
    border-bottom-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.form-input {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
}

.form-input:read-only {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.form-actions {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.security-info {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 16px;
}

.security-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.security-label {
    font-size: 13px;
    color: var(--text-muted);
}

.security-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ===== 통계/마일리지 페이지 공통 ===== */
.stats-container,
.mileage-container,
.points-history-container {
    padding: 0;
}

.summary-grid {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.summary-item {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.summary-item.positive {
    border-color: var(--success);
    background: var(--success-bg);
}

.summary-item.negative {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

/* 다크 테마 게이미피케이션 */
[data-theme="linear-dark"] .gamify-section {
    background: linear-gradient(135deg, #1a1a1a, #262626);
    border-color: var(--accent);
}

[data-theme="linear-dark"] .gamify-progress-bar {
    background: #333;
}

[data-theme="linear-dark"] .streak-item {
    background: #1a1a1a;
}

/* 노션 테마 게이미피케이션 */
[data-theme="notion"] .gamify-section {
    background: #fffdf9;
    border-color: #d97706;
}

[data-theme="notion"] .gamify-level {
    background: #d97706;
}

/* ===== 통계 개요 페이지 ===== */
.stats-overview-container {
    padding: 0;
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stats-header-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.stats-summary-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 12px 0;
}

.stats-summary-grid .summary-item {
    display: table-cell;
    text-align: center;
    padding: 12px 8px;
    background: none;
    border: none;
}

.stats-summary-grid .summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.stats-summary-grid .summary-value.teal {
    color: #38B2AC;
}

.stats-summary-grid .summary-value.green {
    color: var(--success);
}

.stats-grid-row {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 16px;
}

.stats-grid-col {
    display: table-cell;
    width: 50%;
    padding: 0 8px;
    vertical-align: top;
}

.stats-grid-col:first-child {
    padding-left: 0;
}

.stats-grid-col:last-child {
    padding-right: 0;
}

/* 처리구분 그리드 */
.process-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 16px 0;
}

.process-item {
    display: table-cell;
    text-align: center;
    padding: 8px 4px;
}

.process-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

.process-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.process-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 공통 통계 페이지 ===== */
.stats-page-container,
.exchange-container {
    padding: 0;
}

.stats-page-container .stats-header,
.exchange-container .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stats-page-container .table-wrap,
.exchange-container .table-wrap {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.mt-4 {
    margin-top: 16px;
}

.mb-4 {
    margin-bottom: 16px;
}

/* ===== 통계 탭 네비게이션 ===== */
.stats-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.stats-tab {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.stats-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.stats-tab.active {
    background: var(--accent);
    color: #fff;
}

[data-theme="linear-dark"] .stats-tab.active {
    background: var(--accent);
}

[data-theme="linear-light"] .stats-tab.active {
    background: var(--accent);
}

[data-theme="notion"] .stats-tab.active {
    background: #2383e2;
}

/* ===== 통계 시각화 컴포넌트 ===== */

/* 요약 카드 그리드 */
.stats-summary-cards {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 20px;
}

.stats-summary-card {
    display: table-cell;
    padding: 0 8px;
    vertical-align: top;
}

.stats-summary-card:first-child { padding-left: 0; }
.stats-summary-card:last-child { padding-right: 0; }

.stats-card-inner {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
}

.stats-card-inner:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.stats-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stats-card-value.accent { color: var(--accent); }
.stats-card-value.success { color: var(--success); }
.stats-card-value.warning { color: var(--warning); }
.stats-card-value.danger { color: var(--danger); }

.stats-card-label {
    font-size: 12px;
    color: var(--text-muted);
}

/* 바 차트 */
.bar-chart-container {
    padding: 20px;
}

.bar-chart {
    display: table;
    width: 100%;
    height: 200px;
    table-layout: fixed;
}

.bar-item {
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding: 0 4px;
}

.bar-fill {
    width: 100%;
    min-height: 4px;
    background: linear-gradient(180deg, var(--accent), var(--accent-hover));
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    position: relative;
}

.bar-fill:hover {
    opacity: 0.8;
}

.bar-value {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.bar-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
}

/* 도넛 차트 (CSS only) */
.donut-chart-container {
    display: table;
    width: 100%;
}

.donut-chart-wrapper {
    display: table-cell;
    width: 200px;
    vertical-align: middle;
    text-align: center;
}

.donut-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-center-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.donut-center-label {
    font-size: 11px;
    color: var(--text-muted);
}

.donut-legend {
    display: table-cell;
    vertical-align: middle;
    padding-left: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.legend-label {
    font-size: 12px;
    color: var(--text-secondary);
    flex: 1;
}

.legend-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 순위 카드 */
.rank-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: all 0.2s;
}

.rank-item:hover {
    border-color: var(--accent);
}

.rank-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-right: 12px;
    flex-shrink: 0;
}

.rank-badge.gold { background: #FFD700; color: #000; }
.rank-badge.silver { background: #C0C0C0; color: #000; }
.rank-badge.bronze { background: #CD7F32; color: #fff; }
.rank-badge.normal { background: var(--bg-tertiary); color: var(--text-muted); }

.rank-info {
    flex: 1;
}

.rank-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.rank-detail {
    font-size: 11px;
    color: var(--text-muted);
}

.rank-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}

/* 프로세스 현황 (원형 카드) */
.process-status-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.process-status-item {
    display: table-cell;
    text-align: center;
    padding: 16px 8px;
}

.process-circle-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.process-circle-lg.c-접수 { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.process-circle-lg.c-완료 { background: linear-gradient(135deg, #10B981, #059669); }
.process-circle-lg.c-진행 { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.process-circle-lg.c-보류 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.process-circle-lg.c-미처리 { background: linear-gradient(135deg, #EF4444, #DC2626); }

.process-status-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.process-status-count {
    font-size: 12px;
    color: var(--text-muted);
}

/* 2열 레이아웃 */
.stats-two-col {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.stats-col {
    display: table-cell;
    vertical-align: top;
    padding: 0 8px;
}

.stats-col:first-child { padding-left: 0; }
.stats-col:last-child { padding-right: 0; }

/* 미니 프로그레스 바 */
.mini-progress {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.mini-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
    transition: width 0.3s ease;
}

/* ===== 공통 로딩바 ===== */

/* 페이지 상단 프로그레스 바 */
.page-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    z-index: 99999;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--accent);
}

.page-loading-bar.active {
    animation: loadingProgress 1.5s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% { width: 0; }
    50% { width: 70%; }
    100% { width: 90%; }
}

.page-loading-bar.complete {
    width: 100%;
    animation: none;
    transition: width 0.2s, opacity 0.3s 0.2s;
    opacity: 0;
}

/* 콘텐츠 로딩 오버레이 */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0.95;
}

/* 스피너 */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner-ring {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spinnerRotate 0.8s linear infinite;
}

@keyframes spinnerRotate {
    to { transform: rotate(360deg); }
}

.spinner-text {
    font-size: 13px;
    color: var(--text-muted);
}

/* 스켈레톤 로딩 */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-card {
    height: 80px;
    border-radius: 8px;
}

.skeleton-chart {
    height: 200px;
    border-radius: 8px;
}

/* 테마별 로딩 스타일 */

/* Linear Dark */
[data-theme="linear-dark"] .page-loading-bar {
    background: linear-gradient(90deg, #5E6AD2, #8B5CF6);
    box-shadow: 0 0 15px rgba(94, 106, 210, 0.5);
}

[data-theme="linear-dark"] .spinner-ring {
    border-top-color: #5E6AD2;
}

/* Linear Light */
[data-theme="linear-light"] .page-loading-bar {
    background: linear-gradient(90deg, #5E6AD2, #3B82F6);
    box-shadow: 0 0 10px rgba(94, 106, 210, 0.3);
}

[data-theme="linear-light"] .spinner-ring {
    border-top-color: #5E6AD2;
}

/* Notion */
[data-theme="notion"] .page-loading-bar {
    background: linear-gradient(90deg, #2383e2, #0070f3);
    box-shadow: 0 0 8px rgba(35, 131, 226, 0.4);
    height: 2px;
}

[data-theme="notion"] .spinner-ring {
    border-top-color: #2383e2;
    border-width: 2px;
}

[data-theme="notion"] .skeleton {
    background: linear-gradient(90deg, #f7f7f5 25%, #edece9 50%, #f7f7f5 75%);
    background-size: 200% 100%;
}

/* 도트 로딩 (대안) */
.loading-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.loading-dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    animation: dotBounce 1.4s ease-in-out infinite both;
}

.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }
.loading-dot:nth-child(3) { animation-delay: 0s; }

@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== 상담 관리 페이지 스타일 (마스터-디테일) ===== */
.cons-master-detail {
    display: flex;
    gap: 16px;
    padding: 16px;
    height: calc(100vh - 80px);
    min-height: 600px;
}

.cons-master-panel {
    width: 45%;
    min-width: 500px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    min-height: 0;
    overflow: hidden;
}

.cons-detail-panel {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cons-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 16px;
}

.cons-detail-empty-icon {
    font-size: 64px;
    opacity: 0.3;
}

.cons-detail-empty-text {
    font-size: 15px;
}

/* 검색 영역 (간소화) */
.cons-search-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cons-search-row input[type="date"] {
    padding: 6px 8px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 12px;
}

/* 리스트 스타일 */
.cons-list-wrap {
    flex: 1;
    overflow-y: auto;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 0;
    min-height: 0;
}

.cons-list-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
}

.cons-list-loading,
.cons-list-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.cons-list-header-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 6px;
}

.cons-list-item {
    display: flex;
    align-items: center;
    padding: 7px 10px;
    gap: 6px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    transition: background 0.12s;
    font-size: 12px;
    color: var(--text-primary);
}

.cons-list-item:hover {
    background: var(--bg-hover);
}

.cons-list-item.selected {
    background: var(--accent-light, rgba(59, 130, 246, 0.08));
    border-left: 3px solid var(--accent);
    padding-left: 7px;
}

.cons-list-item.cons-item-emg {
    border-left: 3px solid var(--danger, #ef4444);
    padding-left: 7px;
    background: var(--danger-bg, rgba(239, 68, 68, 0.04));
}

.cons-list-item.cons-item-mine {
    border-left: 3px solid var(--accent, #3b82f6);
    padding-left: 7px;
}

.cons-list-item.cons-item-mine.cons-item-emg {
    border-left: 3px solid var(--danger, #ef4444);
    padding-left: 7px;
}

/* 컴팩트 행 컬럼 레이아웃 */
.cons-col-bookmark {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
}

.cons-col-dir {
    width: 30px;
    flex-shrink: 0;
    text-align: center;
}

.cons-col-company {
    flex: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cons-col-customer {
    width: 55px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-col-tel {
    width: 115px;
    flex-shrink: 0;
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-col-memo {
    width: 30px;
    flex-shrink: 0;
    text-align: center;
}

.cons-col-status {
    width: 52px;
    flex-shrink: 0;
    text-align: center;
}

.cons-col-emp {
    width: 48px;
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 500;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-col-date {
    width: 70px;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
}

.cons-badge-sm {
    font-size: 10px !important;
    padding: 1px 5px !important;
    line-height: 1.4;
}

/* 즐겨찾기 아이콘 */
.cons-bookmark-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    border-radius: 3px;
    flex-shrink: 0;
}

.cons-bookmark-icon:hover {
    color: var(--primary);
    background: var(--bg-tertiary);
}

.cons-bookmark-icon.active {
    color: var(--danger, #ef4444);
}

.cons-bookmark-icon.active:hover {
    color: var(--danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

/* 즐겨찾기 탭 스타일 */
.cons-tab-bookmark {
    color: var(--warning, #f59e0b) !important;
}

.cons-tab-bookmark.active {
    background: var(--warning, #f59e0b) !important;
    color: #000 !important;
}

/* 레거시 카드형 호환 (미사용, 참조용 유지) */
.cons-item-row {
    display: none;
}

.cons-item-avatar {
    display: none;
}

.cons-item-main {
    flex: 1;
    min-width: 0;
}

.cons-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.cons-item-company-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

.cons-item-date {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.cons-item-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.cons-item-customer {
    font-weight: 500;
}

.cons-item-tel {
    color: var(--text-muted);
}

.cons-item-emp {
    color: var(--accent);
    font-weight: 500;
    font-size: 11px;
    padding: 2px 8px;
    background: var(--accent-bg);
    border-radius: 4px;
}

.cons-item-note {
    color: var(--text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

.cons-mine-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--accent, #3b82f6);
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    vertical-align: middle;
}

.cons-list-item .cons-mine-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
}

/* 기존 호환 */
.cons-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.cons-item-body {
    font-size: 13px;
}

.cons-item-customer {
    margin-bottom: 4px;
}

.cons-item-tel {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 6px;
}

.cons-item-company {
    font-size: 12px;
    color: var(--text-secondary);
}

.cons-item-note {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 카드 기반 상담 상세 UI ===== */
.cons-detail-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    background: var(--bg-primary);
}

.cons-detail-card.cons-detail-emg {
    border-left: 4px solid var(--danger, #ef4444);
}

/* 히어로 섹션 (핵심 정보) */
.cons-card-hero {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-bottom: 1px solid var(--border);
}

.cons-hero-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.cons-hero-info {
    flex: 1;
    min-width: 0;
}

.cons-hero-company {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cons-hero-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cons-hero-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cons-hero-tel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--accent-bg, #ede9fe);
    color: var(--accent, #7c3aed);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.cons-hero-tel:hover {
    background: var(--accent, #7c3aed);
    color: #fff;
}

/* 전화걸기 버튼 (상담조회 상세) */
.cons-hero-tel.cons-tel-call {
    background: var(--primary-bg, #dbeafe);
    color: var(--primary, #2563eb);
    position: relative;
}

.cons-hero-tel.cons-tel-call::after {
    content: '→ 상담등록';
    font-size: 9px;
    margin-left: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.cons-hero-tel.cons-tel-call:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}

.cons-hero-tel.cons-tel-call:hover::after {
    opacity: 1;
}

.cons-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.cons-hero-date, .cons-hero-emp {
    color: var(--text-muted);
}

.cons-hero-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.cons-action-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}

.cons-action-btn:hover {
    background: var(--bg-secondary);
    transform: scale(1.05);
}

.cons-action-btn.active {
    background: var(--danger-bg, #fef2f2);
    border-color: var(--danger, #ef4444);
}

/* 카드 섹션 */
.cons-card-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.cons-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.cons-card-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cons-card-item label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.cons-card-item select,
.cons-card-item input {
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
}

.cons-card-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.cons-card-options label {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 상담 내용 영역 */
.cons-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cons-content-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cons-content-gap {
    margin-top: 12px;
}

.cons-content-gap-sm {
    margin-top: 8px;
}

.cons-content-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-copy-sm {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 2px;
    opacity: 0.6;
}

.cons-copy-sm:hover {
    opacity: 1;
}

.cons-content-box textarea {
    min-height: 60px;
    max-height: none;
    resize: vertical;
    padding: 8px;
    font-size: 13px;
    overflow-y: visible;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
}

/* 접힘 영역 (details) */
.cons-card-details {
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
}

.cons-card-details summary {
    padding: 10px 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-card-details summary::before {
    content: '▶';
    font-size: 10px;
    transition: transform 0.2s;
}

.cons-card-details[open] summary::before {
    transform: rotate(90deg);
}

.cons-card-details .cons-card-grid {
    padding-bottom: 12px;
}

/* 타임라인 섹션 */
.cons-timeline-section {
    flex: 1;
    min-height: 150px;
    display: flex;
    flex-direction: column;
}

.cons-timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cons-timeline-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.cons-memo-input-inline {
    display: flex;
    gap: 6px;
}

.cons-memo-input-inline input {
    width: 160px;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.cons-timeline-area {
    flex: 1;
    overflow-y: auto;
    max-height: 200px;
}

.cons-timeline-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* 타임라인 아이템 */
.cons-tl-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.05));
}

.cons-tl-item:last-child {
    border-bottom: none;
}

.cons-tl-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.cons-tl-item.memo .cons-tl-icon {
    background: var(--success-bg, #dcfce7);
}

.cons-tl-item.history .cons-tl-icon {
    background: var(--accent-bg, #ede9fe);
}

.cons-tl-content {
    flex: 1;
    min-width: 0;
}

.cons-tl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.cons-tl-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.cons-tl-date {
    font-size: 11px;
    color: var(--text-muted);
}

.cons-tl-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

/* 카드 푸터 */
.cons-card-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    background: var(--bg-secondary);
}

/* 섹션 헤더 */
.cons-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cons-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 메모 리스트 */
.cons-memo-list {
    max-height: 150px;
    overflow-y: auto;
}

.cons-memo-item {
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 6px;
}

.cons-memo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cons-memo-writer {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
}

.cons-memo-date {
    font-size: 10px;
    color: var(--text-muted);
}

.cons-memo-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 이전 상담 리스트 */
.cons-history-list {
    max-height: none;
    overflow-y: auto;
}

.cons-history-item {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cons-history-item:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.cons-history-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.cons-history-date {
    font-size: 11px;
    color: var(--text-muted);
}

.cons-history-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}

.cons-empty-msg {
    text-align: center;
    padding: 16px;
    color: var(--text-muted);
    font-size: 12px;
}

/* 처리상태 필터 드롭다운 */
.cons-prc-filter {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 100px;
}

/* ===== 탭 기반 레이아웃 ===== */
.cons-tab-menu {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.cons-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.cons-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.cons-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--bg-primary);
}

.cons-tab-content {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
}

.cons-memo-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.cons-memo-input-row input,
.cons-memo-input-row textarea {
    flex: 1;
    min-width: 0;
}

.cons-memo-input-row textarea {
    resize: vertical;
    min-height: 40px;
}

/* 메모/이력 리스트 높이 조정 */
.cons-tab-content .cons-memo-list,
.cons-tab-content .cons-history-list {
    max-height: none;
    overflow-y: auto;
}

/* ===== 기존 디테일 폼 (원복용 유지) ===== */
/* 디테일 폼 */
.cons-detail-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cons-detail-form.cons-detail-emg {
    border-left: 4px solid var(--danger, #ef4444);
}

.cons-detail-form.cons-detail-call {
    border-left: 4px solid var(--success, #10b981);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, transparent 100px);
}

.cons-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.cons-detail-title {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.cons-form-section {
    margin-bottom: 24px;
}

.cons-form-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-bottom: none;
}

.cons-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.cons-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cons-form-group label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.cons-form-group input,
.cons-form-group select,
.cons-form-group textarea {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 13px;
}

.cons-form-group input:focus,
.cons-form-group select:focus,
.cons-form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-form-group input[readonly] {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.cons-form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.cons-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

/* 상담조회 상세 탭 */
.cons-detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.cons-detail-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.cons-detail-tab:hover {
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--text-primary);
}

.cons-detail-tab.active {
    color: var(--accent);
    background: var(--bg-primary);
}

.cons-detail-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
}

.cons-detail-tab-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 가이드 스타일 */
.cons-guide-area {
    padding: 12px;
}

.guide-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.guide-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.guide-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* 상담 상세 - 정보 테이블 (2열 레이아웃) */
.cons-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 12px;
}

.cons-info-table th {
    width: 70px;
    padding: 5px 8px;
    text-align: right;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 11px;
    white-space: nowrap;
}

.cons-info-table td {
    padding: 4px 6px;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.cons-info-table .form-control-sm {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
}

.cons-info-table .form-control-sm:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-checkbox-cell {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cons-checkbox-cell label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* 상담/처리 내용 가로 분할 */
.cons-content-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    align-items: flex-start;
}

.cons-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cons-content-col label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.cons-content-col textarea {
    min-height: 100px;
    max-height: none;
    height: auto;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    resize: none;
    line-height: 1.6;
    overflow-y: hidden;
}

.cons-content-col textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* 이전 상담 이력 섹션 */
.cons-history-section {
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 8px;
}

.cons-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cons-section-title span {
    font-weight: 400;
    color: var(--text-muted);
}

.cons-history-area {
    max-height: 100px;
    overflow-y: auto;
}

.cons-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.cons-history-table th {
    padding: 3px 4px;
    text-align: left;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
}

.cons-history-table td {
    padding: 3px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.cons-history-table tr:hover td {
    background: var(--bg-hover);
}

.cons-history-note {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-history-memo {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 12px;
}

/* 이전 상담 모달 스타일 */
.history-modal-content {
    padding: 0;
}

.history-modal-content .cons-info-table {
    margin-bottom: 16px;
}

.history-section {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.history-section-title {
    background: var(--bg-secondary);
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.history-section-body {
    padding: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    background: var(--bg-primary);
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 이전 상담 메모 목록 */
.history-memo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-memo-item {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
}

.history-memo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 11px;
}

.history-memo-writer {
    font-weight: 600;
    color: var(--primary);
}

.history-memo-date {
    color: var(--text-muted);
}

.history-memo-content {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.cons-hist-date {
    white-space: nowrap;
    font-size: 11px;
}

.cons-hist-memo {
    text-align: center;
}

.memo-badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}

/* 메모 섹션 컴팩트 */
.cons-memo-section {
    margin-bottom: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 8px;
}

.cons-memo-area-compact {
    min-height: 100px;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 6px;
}

.cons-memo-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cons-memo-item {
    padding: 4px 6px;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 11px;
}

.cons-memo-user {
    font-weight: 600;
    color: var(--accent);
    margin-right: 6px;
}

.cons-memo-date {
    color: var(--text-muted);
    font-size: 10px;
}

.cons-memo-text {
    margin-top: 2px;
    color: var(--text-primary);
}

.cons-memo-input {
    display: flex;
    gap: 6px;
}

.cons-memo-input input {
    flex: 1;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
}

.cons-memo-input input:focus {
    outline: none;
    border-color: var(--accent);
}

.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
}

/* 메모 영역 */
.cons-memo-area {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.cons-memo-input {
    display: flex;
    gap: 8px;
}

.cons-memo-item {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}

.cons-memo-user {
    font-weight: 600;
    color: var(--accent);
    margin-right: 8px;
}

.cons-memo-date {
    font-size: 11px;
    color: var(--text-muted);
}

.cons-memo-text {
    margin-top: 6px;
    color: var(--text-primary);
}

/* 기존 호환용 */
.cons-search-container {
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.cons-search-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.cons-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.cons-search-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.cons-quick-dates {
    display: flex;
    gap: 6px;
}

.cons-quick-btn {
    padding: 6px 14px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.cons-quick-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.cons-quick-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cons-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.cons-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cons-filter-group label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cons-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cons-date-sep {
    color: var(--text-muted);
}

/* 검색 영역 2줄 레이아웃 */
.cons-search-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cons-search-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 커스텀 날짜 입력 필드 */
.cons-date-input {
    width: 130px;
    padding: 9px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}

.cons-date-input:hover {
    border-color: var(--accent);
}

.cons-date-input:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-search-line .cons-sep {
    color: var(--text-muted);
    font-size: 13px;
}

.cons-keyword-input {
    flex: 1;
    padding: 9px 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
}

.cons-keyword-input:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-search-line button {
    white-space: nowrap;
}

/* 상세조회 패널 */
.cons-adv-search {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.cons-adv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.cons-adv-table th {
    width: 60px;
    padding: 6px 8px;
    text-align: right;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.cons-adv-table td {
    padding: 6px 4px;
}

.cons-adv-table select {
    width: 100%;
    min-width: 80px;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
}

.cons-adv-table select:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-adv-options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cons-adv-options label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.cons-adv-options input[type="checkbox"] {
    cursor: pointer;
}

#advSearchToggle.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.cons-filter-group input[type="date"],
.cons-filter-group input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 13px;
    min-width: 140px;
}

.cons-filter-group input:focus {
    outline: none;
    border-color: var(--accent);
}

.cons-filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.cons-filter-actions .btn svg {
    margin-right: 4px;
    vertical-align: middle;
}

/* 상태 탭 */
.cons-status-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
    width: fit-content;
}

.cons-tab {
    padding: 6px 12px;
    font-size: 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cons-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.cons-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cons-tab span {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    color: var(--text-muted);
}

.cons-tab.active span {
    background: var(--accent);
    color: #fff;
}

/* 결과 영역 */
.cons-result-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.cons-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-secondary);
}

.cons-result-header strong {
    color: var(--accent);
}

.cons-table-wrap {
    max-height: calc(100vh - 420px);
    overflow-y: auto;
}

.cons-table {
    width: 100%;
    border-collapse: collapse;
}

.cons-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-tertiary);
}

.cons-table th {
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.cons-table td {
    padding: 12px;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.cons-row {
    cursor: pointer;
    transition: background 0.1s;
}

.cons-row:hover {
    background: var(--bg-hover);
}

.cons-note-col {
    min-width: 200px;
}

.cons-empty {
    text-align: center;
    padding: 40px !important;
    color: var(--text-muted);
}

.cons-date {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cons-tel {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.cons-company.ellipsis,
.cons-note.ellipsis {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 페이지네이션 */
.cons-pagination {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.cons-pagination .pagination {
    display: flex;
    gap: 4px;
    align-items: center;
}

.page-ellipsis {
    padding: 0 8px;
    color: var(--text-muted);
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.page-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 긴급건 스타일 */
.cons-row-emg {
    background: var(--danger-bg) !important;
    border-left: 3px solid var(--danger);
}

.cons-row-emg:hover {
    background: rgba(239,68,68,0.2) !important;
}

.cons-emg-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--danger);
    color: #fff;
    border-radius: 4px;
    margin-right: 4px;
    vertical-align: middle;
}

.cons-list-item .cons-emg-badge {
    padding: 1px 4px;
    font-size: 9px;
    border-radius: 3px;
    margin-right: 2px;
}

.cons-recall-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--warning, #f59e0b);
    color: #fff;
    border-radius: 4px;
}

@keyframes emgPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.cons-modal-emg {
    border: 2px solid var(--danger) !important;
}

.cons-modal-emg .modal-header {
    background: var(--danger-bg);
    border-bottom-color: var(--danger);
}

/* 메모 표시 */
.cons-memo-badge {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
}

.cons-list-item .cons-memo-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    line-height: 16px;
    border-radius: 8px;
    cursor: default;
}

.cons-list-item .cons-memo-badge.has-memo {
    background: var(--warning, #f59e0b);
    color: #fff;
    font-weight: 700;
}

.cons-list-item .cons-memo-badge.no-memo {
    background: transparent;
    color: var(--text-muted);
    font-weight: 400;
    font-size: 9px;
    opacity: 0.5;
}

.cons-memo-area {
    max-height: 150px;
    overflow-y: auto;
    padding: 8px 0;
}

.cons-memo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 상담조회용 한줄 메모 목록 */
.cons-memo-list-inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
}

.cons-memo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    border-left: 3px solid var(--accent);
    font-size: 12px;
    min-height: 32px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cons-memo-row:hover {
    background: var(--bg-secondary);
}

.cons-memo-row .cons-memo-expand-icon {
    flex-shrink: 0;
    width: 14px;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.cons-memo-row.expanded {
    align-items: flex-start;
}

.cons-memo-row.expanded .cons-memo-expand-icon {
    transform: rotate(90deg);
}

.cons-memo-row .cons-memo-user {
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    min-width: 70px;
}

.cons-memo-row .cons-memo-date {
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 10px;
    min-width: 75px;
}

.cons-memo-row .cons-memo-text {
    flex: 1;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cons-memo-row.expanded .cons-memo-text {
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
}

.cons-memo-item {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
}

.cons-memo-user {
    font-weight: 600;
    color: var(--accent);
    margin-right: 8px;
}

.cons-memo-date {
    font-size: 11px;
    color: var(--text-muted);
}

.cons-memo-text {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-primary);
    white-space: pre-wrap;
}

/* 테이블 높이 유동적 */
.cons-table-wrap {
    height: calc(100vh - 420px) !important;
    min-height: 300px !important;
    max-height: calc(100vh - 420px) !important;
    overflow-y: auto !important;
}

/* 메모 입력 영역 */
.cons-memo-input {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.cons-memo-input input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ===== Toast 알림 ===== */
.wio-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.wio-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.wio-toast-success {
    background: var(--success, #22c55e);
    color: #fff;
}

.wio-toast-error {
    background: var(--danger, #ef4444);
    color: #fff;
}

.wio-toast-warning {
    background: var(--warning, #eab308);
    color: #000;
}

.wio-toast-info {
    background: var(--accent, #3b82f6);
    color: #fff;
}

/* ===== 메모 알림 배너 (오른쪽 하단) ===== */
.memo-banner-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 360px;
    pointer-events: none;
}

.memo-banner {
    background: var(--bg-secondary, #1e293b);
    border: 1px solid var(--accent, #3b82f6);
    border-left: 4px solid var(--accent, #3b82f6);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.memo-banner.show {
    transform: translateX(0);
    opacity: 1;
}

.memo-banner.hide {
    transform: translateX(120%);
    opacity: 0;
}

.memo-banner-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.memo-banner-icon {
    width: 28px;
    height: 28px;
    background: var(--accent, #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.memo-banner-icon.icon-board {
    background: var(--accent-green, #10b981);
}

.memo-banner.board-banner {
    border-color: var(--accent-green, #10b981);
    border-left: 4px solid var(--accent-green, #10b981);
}

.memo-banner.board-banner .memo-banner-sender {
    color: var(--accent-green, #10b981);
}

.memo-banner-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.memo-banner-close {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.memo-banner-close:hover {
    color: var(--text-primary);
}

.memo-banner-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.memo-banner-sender {
    font-weight: 600;
    color: var(--accent, #3b82f6);
}

.memo-banner-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ===== 아웃콜 요청 페이지 ===== */
.outcall-request-page {
    padding: 20px;
}

.outcall-request-page .page-header {
    margin-bottom: 20px;
}

.outcall-request-page .page-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.outcall-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.outcall-tab {
    padding: 8px 20px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.outcall-tab:hover {
    background: var(--bg-hover);
}

.outcall-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.outcall-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.outcall-filter .filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.outcall-filter .filter-btn:hover {
    background: var(--bg-hover);
}

.outcall-filter .filter-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

.outcall-list-container {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.outcall-table {
    width: 100%;
    border-collapse: collapse;
}

.outcall-table th,
.outcall-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.outcall-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
}

.outcall-table tbody tr:hover {
    background: var(--bg-hover);
    cursor: pointer;
}

.outcall-row.outcall-pending {
    background: rgba(234, 179, 8, 0.05);
}

.outcall-note {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.outcall-actions {
    white-space: nowrap;
}

.outcall-actions .btn-xs {
    padding: 4px 8px;
    font-size: 11px;
}

/* 아웃콜 요청 모달 */
.outcall-modal {
    max-width: 500px;
}

.outcall-modal .modal-body {
    padding: 20px 24px;
}

.outcall-modal .cons-info-table {
    margin-bottom: 0;
}

.outcall-modal .form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.outcall-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* 아웃콜 담당자 검색 드롭다운 */
.outcall-emp-search-wrap {
    position: relative;
}

.outcall-emp-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10001;
}

.outcall-emp-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
}

.outcall-emp-item:hover {
    background: var(--bg-hover);
}

.outcall-emp-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== 직원 계정 신청 승인 (Registration) 스타일 ===== */
.registration-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    padding: 24px;
    gap: 20px;
    overflow: hidden;
}

.registration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.registration-title h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.registration-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.registration-actions {
    display: flex;
    gap: 8px;
}

.registration-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.reg-tab {
    padding: 10px 18px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.reg-tab:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
}

.reg-tab.active {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
}

.reg-count {
    display: inline-block;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
    font-size: 11px;
    margin-left: 6px;
    padding: 0 6px;
}

.reg-tab.active .reg-count {
    background: rgba(255,255,255,0.3);
}

.registration-table-wrapper {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.registration-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.registration-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.registration-table tbody {
    display: block;
    overflow-y: auto;
    max-height: calc(100vh - 380px);
}

.registration-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.registration-table th {
    background: var(--bg-tertiary);
    padding: 14px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}

.registration-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-primary);
}

.registration-table tbody tr:last-child td {
    border-bottom: none;
}

.registration-table tbody tr:hover {
    background: var(--bg-hover);
}

.reg-cell-id {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: var(--accent);
    font-weight: 500;
}

.reg-cell-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.reg-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.reg-status-pending {
    background: rgba(234, 179, 8, 0.15);
    color: #B45309;
}

.reg-status-approved {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.reg-status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #B91C1C;
}

.reg-confirm-info {
    font-size: 11px;
    color: var(--text-tertiary);
}

.reg-confirm-emp {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.reg-action-btns {
    display: flex;
    gap: 6px;
}

.reg-btn-approve {
    padding: 6px 14px;
    background: var(--success);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reg-btn-approve:hover {
    filter: brightness(0.9);
}

.reg-btn-reject {
    padding: 6px 14px;
    background: var(--danger);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reg-btn-reject:hover {
    filter: brightness(0.9);
}

.reg-btn-reset {
    padding: 6px 10px;
    background: #6366F1;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reg-btn-reset:hover {
    background: #4F46E5;
}

.reg-btn-revoke {
    padding: 6px 10px;
    background: #F59E0B;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.reg-btn-revoke:hover {
    background: #D97706;
}

.reg-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.reg-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.reg-error {
    color: var(--danger);
}

.btn-action {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.btn-refresh {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.btn-refresh:hover {
    background: var(--bg-hover);
    border-color: var(--text-tertiary);
}

.registration-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
}

.reg-page-info {
    font-size: 13px;
    color: var(--text-secondary);
}

.reg-page-btns {
    display: flex;
    gap: 4px;
}

.reg-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.reg-page-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.reg-page-btn.active {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
}

.reg-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== 게시판 스타일 ===== */
.board-page {
    max-width: none;
    width: 100%;
}

/* 게시판 검색바 - 카드 스타일 */
.board-search-bar {
    display: flex;
    gap: 10px;
    padding: 16px;
    margin-bottom: 16px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.board-search-bar select,
.board-search-bar input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 13px;
    height: 36px;
}

.board-search-bar select {
    min-width: 110px;
    cursor: pointer;
}

.board-search-bar select:focus,
.board-search-bar input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

.board-search-bar .btn {
    height: 36px;
    padding: 0 16px;
}

.board-search-bar .feed-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.board-search-bar .feed-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 게시판 목록 래퍼 */
.board-list-wrap {
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.board-table {
    width: 100%;
    border-collapse: collapse;
}

.board-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}

.board-table tbody tr:hover {
    background: var(--bg-hover);
}

.board-subject {
    text-align: left;
    max-width: 500px;
}

.board-title {
    font-weight: 500;
}

.board-notice-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--error);
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    font-weight: 500;
}

.board-reply-count {
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
}

.board-attach-icon {
    font-size: 12px;
}

.board-my-post {
    color: var(--accent);
    font-weight: 500;
}

.board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px;
    flex-wrap: wrap;
}

.board-pagination button {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}

.board-pagination button:hover {
    background: var(--bg-hover);
    border-color: var(--accent);
}

.board-pagination button.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.board-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 게시글 상세 */
.board-detail-page {
    max-width: none;
    width: 100%;
}

.board-content-wrap {
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

.board-header-info {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.board-title-row {
    font-size: 16px;
    margin-bottom: 12px;
}

.board-meta-row {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.board-attach-row {
    margin-top: 10px;
    font-size: 13px;
}

.board-attach-row a {
    color: var(--accent);
    text-decoration: underline;
}

.board-content-body {
    padding: 20px;
    min-height: 200px;
    line-height: 1.7;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: break-word;
}

.board-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.board-content-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}

.board-content-body table td,
.board-content-body table th {
    border: 1px solid var(--border);
    padding: 6px 10px;
}

/* 댓글 섹션 */
.board-comments-section {
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 16px 20px;
}

.board-comments-section h4 {
    margin: 0 0 16px 0;
    font-size: 14px;
    font-weight: 600;
}

.board-comments-list {
    margin-bottom: 16px;
}

.board-no-comments {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.board-comment-item {
    padding: 12px;
    border-radius: 6px;
    background: var(--bg-secondary);
    margin-bottom: 8px;
}

.board-comment-item.mine {
    background: var(--accent-muted);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.comment-author {
    font-weight: 500;
    font-size: 13px;
}

.comment-date {
    font-size: 11px;
    color: var(--text-muted);
}

.comment-body {
    font-size: 13px;
    line-height: 1.5;
}

.board-comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.board-comment-form textarea {
    flex: 1;
    resize: none;
}

/* 글쓰기 */
.board-write-page {
    max-width: none;
    width: 100%;
}

.board-form {
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
    padding: 20px;
}

.board-form .form-group {
    margin-bottom: 16px;
}

.board-form .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
}

.board-form .form-input,
.board-form .form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
}

.board-form .form-textarea {
    min-height: 300px;
    line-height: 1.6;
}

/* ===== 게시판 통합 피드 ===== */
.board-feed-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
}

.board-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.board-feed-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.board-feed-counts {
    display: flex;
    gap: 10px;
}

.feed-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.feed-badge.unread {
    background: var(--accent-blue);
    color: #fff;
}

.feed-badge.pending {
    background: var(--accent-orange, #f97316);
    color: #fff;
}

.board-feed-filter {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.board-feed-filter select,
.board-feed-filter input[type="text"] {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.feed-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
}

.board-feed-list {
    flex: 1;
    overflow-y: auto;
}

.board-feed-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.board-feed-item {
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.board-feed-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.board-feed-item.urgent {
    border-left: 4px solid var(--accent-red, #ef4444);
}

.feed-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.feed-company {
    font-weight: 600;
    font-size: 13px;
    color: var(--accent-blue);
}

.feed-category,
.feed-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.feed-category.cat-1 { background: var(--bg-secondary); color: var(--text-secondary); }
.feed-category.cat-2 { background: #dbeafe; color: #1d4ed8; }
.feed-category.cat-3 { background: #fef3c7; color: #b45309; }
.feed-category.cat-4 { background: #e0e7ff; color: #4338ca; }
.feed-category.cat-5 { background: #fee2e2; color: #b91c1c; }

.feed-status.status-1 { background: #fef3c7; color: #b45309; }
.feed-status.status-2 { background: #d1fae5; color: #047857; }

.feed-item-subject {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.feed-item-info {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.board-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

/* 게시판 테이블 분류/상태 스타일 */
.board-cat-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.board-cat-badge.cat-1 { background: var(--bg-secondary); color: var(--text-secondary); }
.board-cat-badge.cat-2 { background: #dbeafe; color: #1d4ed8; }
.board-cat-badge.cat-3 { background: #fef3c7; color: #b45309; }
.board-cat-badge.cat-4 { background: #e0e7ff; color: #4338ca; }
.board-cat-badge.cat-5 { background: #fee2e2; color: #b91c1c; }

.board-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.board-status-badge.wait { background: #fef3c7; color: #b45309; }
.board-status-badge.done { background: #d1fae5; color: #059669; }

.board-reply-count {
    color: var(--accent);
    font-size: 12px;
    margin-left: 4px;
}

.board-table tr.board-urgent {
    background: rgba(239, 68, 68, 0.05);
}

.board-table .status-1 { color: var(--accent-orange, #f97316); }
.board-table .status-2 { color: var(--accent-green, #10b981); }

.board-form .form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== 상담등록 탭 UI ===== */
.cons-info-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.cons-tab-btn {
    flex: 1;
    padding: 10px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.cons-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.cons-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.cons-tab-btn .nav-icon {
    width: 14px;
    height: 14px;
}

.cons-tab-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 400px);
    min-height: 200px;
}

/* ===== 상담 가이드 UI ===== */
.cons-guide-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px;
    max-height: 100%;
}

.cons-guide-item {
    padding: 10px 12px;
    margin: 6px 0;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
    position: relative;
    transition: all 0.15s;
}

.cons-guide-item:hover {
    background: var(--bg-hover);
}

.cons-guide-item.warning {
    border-left-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.cons-guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.cons-guide-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.cons-guide-category {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    color: var(--text-muted);
}

.cons-guide-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
}

.cons-guide-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.15s;
}

.cons-guide-copy-btn:hover {
    opacity: 1;
    border-color: var(--accent);
    color: var(--accent);
}

.cons-guide-copy-btn.copied {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.cons-guide-warning-text {
    font-size: 11px;
    color: var(--danger);
    padding-left: 16px;
    position: relative;
}

.cons-guide-warning-text::before {
    content: "•";
    position: absolute;
    left: 4px;
}

.cons-guide-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ===== 고객 타임라인 스타일 ===== */
.cons-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px 12px 16px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* 세로 연결선 - 도트에 맞춤 */
.cons-timeline-list::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--border);
    border-radius: 1px;
}

.timeline-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    position: relative;
    transition: all 0.15s ease;
}

/* 아이콘 영역 - 작은 컬러 도트 */
.timeline-icon {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--text-muted, #94a3b8);
    border: none;
    box-shadow: none;
}

/* 유형별 도트 색상 */
.timeline-item.timeline-memo .timeline-icon {
    background: #3b82f6;
}

.timeline-item.timeline-request .timeline-icon {
    background: #f59e0b;
}

.timeline-item.timeline-status_change .timeline-icon {
    background: #10b981;
}

/* 콘텐츠 카드 */
.timeline-card {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    border: 1px solid var(--border);
    position: relative;
}

/* 말풍선 꼬리 제거 (도트 아이콘에 맞춤) */
.timeline-card::before,
.timeline-card::after {
    display: none;
}

.timeline-item.timeline-memo .timeline-card {
    border-left: 3px solid #3b82f6;
}

.timeline-item.timeline-request .timeline-card {
    border-left: 3px solid #f59e0b;
}

.timeline-item.timeline-status_change .timeline-card {
    border-left: 3px solid #10b981;
}

.timeline-item.timeline-call .timeline-icon {
    background: #8b5cf6;
}

.timeline-item.timeline-call .timeline-card {
    border-left: 3px solid #8b5cf6;
}

/* 통화 상세 정보 스타일 */
.call-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 11px;
}

.call-detail .call-status {
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
}

.call-detail .call-status.missed {
    background: #fef2f2;
    color: #dc2626;
}

.call-detail .call-status.completed {
    background: #f0fdf4;
    color: #16a34a;
}

.call-detail .call-status.talking {
    background: #fefce8;
    color: #ca8a04;
}

.call-detail .call-status.rejected {
    background: #fef2f2;
    color: #dc2626;
}

.call-detail .call-status.pending {
    background: #f5f3ff;
    color: #7c3aed;
}

.call-detail .call-duration,
.call-detail .call-ring-duration,
.call-detail .call-number {
    color: var(--text-muted);
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}

/* 타임라인 IN/OUT 뱃지 */
.timeline-type-badge.in {
    background: #dbeafe;
    color: #2563eb;
}

.timeline-type-badge.out {
    background: #fef3c7;
    color: #d97706;
}

.timeline-content {
    flex: 1;
    min-width: 0;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.timeline-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-type-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 500;
}

.timeline-item.timeline-memo .timeline-type-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.timeline-item.timeline-status_change .timeline-type-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.timeline-date {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.timeline-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    word-break: break-word;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.timeline-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-actor {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-actor-avatar {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    font-weight: 600;
}

.timeline-call-code {
    font-size: 9px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}