@charset "utf-8";
/* ════════════════════════════════════════════════════════════════════
   K-Tell2 — themes.css  [v9.78]
   ──────────────────────────────────────────────────────────────────
   📌 6종 테마 디자인 토큰 시스템 (Design Tokens Architecture)
      적용범위: 로그인·대기실·채팅방·모달창·사서함·알림창·대화창
   📌 적용방식: document.documentElement.className = 테마 클래스
      - (기본)         → White Natural  ☀️
      - darkMode       → Dark Hanji     🖌️
      - hitelMode      → HiTel Classic  💻
      - lavenderMode   → Lavender Midnight 🌙
      - roseMode       → Rose Chiffon   🌸
      - navyMode       → Steel Navy     🛡️
   📌 로딩 순서: themes.css → ui.css → chat.css
   📌 ui.css / chat.css 는 var(--xxx) 참조만 사용
════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   ① 공통 고정 토큰  (테마 무관)
────────────────────────────────────────────────────────────────── */
:root {
  --success:    #4caf50;
  --warning:    #ff9800;
  --danger:     #f44336;
  --info:       #2196f3;
  --transition: all 0.2s ease;
}


/* ══════════════════════════════════════════════════════════════════
   ② ☀️  WHITE NATURAL (기본값)
   리넨 베이지 & 파스텔 오렌지 — Cozy & Warm
══════════════════════════════════════════════════════════════════ */
:root {
  /* 브랜드 (강조1 = 버튼) */
  --color-prime:        #B39884;   /* Warm Stone / Sand */
  --color-prime-light:  #D1C0B0;
  --color-prime-dark:   #8E7B6C;
  --color-accent:       #D48166;   /* 강조2 — 뱃지·알림·온라인 도트 (Muted Terracotta) */

  /* 멘션 강조 (v1.8) */
  --mention-bg:         rgba(255, 215, 0, 0.35); /* 밝은 금색 (콘트라스트 보정) */
  --mention-text:       #3C3530;                /* 가독성 숯갈색 */
  --mention-glow:       rgba(255, 215, 0, 0.7); /* 글로우 강화 (0.4 -> 0.7) */

  /* 배경 레이어 */
  --bg-body:            #FDFCFB;   /* 메인 본문 (Bone White) */
  --bg-surface:         #FFFFFF;   /* 사용자카드 */
  --bg-surface-hover:   #F7F5F2;   /* 사용자카드 오버 (Ivory) */
  --bg-input:           #FFFFFF;   /* 입력창 */
  --bg-header:          #F5F2EF;   /* 메인 헤더 (Light Stone) */
  --bg-sidebar:         #F7F5F2;   /* 사이드패널 / 메인 푸터 (Ivory Beige) */
  --bg-footer:          #F7F5F2;

  /* 텍스트 */
  --text-primary:       #3C3530;   /* Charcoal Brown */
  --text-secondary:     #7A6F66;
  --text-tertiary:      #B0A49E;
  --text-heading:       #3C3530;
  --text-inverse:       #FFFFFF;

  /* 테두리 */
  --border-color:       #E8E4E1;
  --border-light:       #F3F1EF;
  --border-main:        1px solid #E8E4E1;

  /* 채팅 버블 */
  --chat-bubble-mine:   #B39884;
  --chat-bubble-other:  #FFFFFF;
  --chat-text-mine:     #FFFFFF;
  --chat-text-other:    #3C3530;
  --chat-bg:            #FDFCFB;
  --chat-system-bg:     rgba(179,152,132,0.10);
  --reply-bg-alpha:     rgba(179,152,132,0.12); /* [v11.54] 답장바 가독성 강화 */


  /* 그림자 (Neutral Slate Tint) */
  --overlay:            rgba(60,53,48,0.45);
  --shadow-sm:          0 2px 8px  rgba(60,53,48,0.06);
  --shadow-md:          0 4px 20px rgba(60,53,48,0.08);
  --shadow-lg:          0 8px 32px rgba(60,53,48,0.12);

  /* 형태 */
  --radius-sm:          10px;
  --radius-md:          16px;
  --radius-lg:          22px;
  --radius-xl:          30px;
  --radius-full:        9999px;

  /* 사서함 모달창 */
  --bg-inbox-header:    #F5F2EF;
  --bg-inbox-body:      #FFFFFF;
  --bg-inbox-side:      #F7F5F2;
  --bg-inbox-footer:    #F9F7F5;

  /* 알림 모달창 */
  --bg-notify-header:   #D48166;
  --bg-notify-body:     #FFFFFF;
  --bg-notify-footer:   #F9F7F5;

  /* 사서함 대화창 (DM) */
  --bg-dm-header:       #F5F2EF;
  --bg-dm-body:         #FDFCFB;
  --bg-dm-footer:       #F7F5F2;
  --bg-dm-input:        #FFFFFF;
}


/* ══════════════════════════════════════════════════════════════════
   ③ 🖌️  DARK HANJI  (.darkMode)
   먹색 & 토양 브라운 — Traditional & Premium
══════════════════════════════════════════════════════════════════ */
:root.darkMode {
  --color-prime:        #B18CFE;  /* Velvet Lavender */
  --color-prime-light:  #D8B4FE;
  --color-prime-dark:   #9333EA;
  --color-accent:       #FDE68A;  /* Amber highlight (Key point) */

  /* 멘션 강조 (v1.8) */
  --mention-bg:         rgba(255, 191, 0, 0.30); /* 금색(Amber) — 다크모드 최적화 */
  --mention-text:       #000000;                /* 검정색 (대비 극대화) */
  --mention-glow:       rgba(255, 191, 0, 0.82); /* 글로우 대폭 강화 (0.6 -> 0.82) */

  --bg-body:            #211C2B;  /* Deep Mauve Herbarium */
  --bg-surface:         #342A4E;
  --bg-surface-hover:   #4A3F70;
  --bg-input:           #1C1625;
  --bg-header:          #3F345E;  /* Warm Plum Header */
  --bg-sidebar:         #2A2338;
  --bg-footer:          #2A2338;

  --text-primary:       #F5F3FF;
  --text-secondary:     #B18CFE;
  --text-tertiary:      #6D5B8A;
  --text-heading:       #F5F3FF;
  --text-inverse:       #211C2B;

  --border-color:       #4A3F70;
  --border-light:       #342A4E;
  --border-main:        1.5px solid #4A3F70;

  --chat-bubble-mine:   linear-gradient(135deg, #B18CFE, #9333EA);
  --chat-bubble-other:  #342A4E;
  --chat-text-mine:     #FFFFFF;
  --chat-text-other:    #F5F3FF;
  --chat-bg:            #211C2B;
  --chat-system-bg:     rgba(177,140,254,0.10);
  --reply-bg-alpha:     rgba(177,140,254,0.12); /* [v11.54] 다크모드 답장바 */


  --overlay:            rgba(33,28,43,0.85);
  --shadow-sm:          0 4px 12px rgba(0,0,0,0.40);
  --shadow-md:          0 10px 25px rgba(0,0,0,0.50);
  --shadow-lg:          0 20px 50px rgba(0,0,0,0.60);

  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          18px;
  --radius-xl:          28px;
  --radius-full:        9999px;

  --bg-inbox-header:	#4A3F70;
  --bg-inbox-body:      #342A4E;
  --bg-inbox-side:      #2A2338;
  --bg-inbox-footer:    #2A2338;

  --bg-notify-header:   #B18CFE;
  --bg-notify-body:     #342A4E;
  --bg-notify-footer:   #2A2338;

  --bg-dm-header:       #9333EA;
  --bg-dm-body:         #211C2B;
  --bg-dm-footer:       #2A2338;
  --bg-dm-input:        #1A1A1A;
}


/* ══════════════════════════════════════════════════════════════════
   ④ 💻  HITEL CLASSIC  (.hitelMode)
   정통 진청색 & 화이트 라인 — 90s Retro
   ★ 특수: border-radius: 0px, 2px 화이트 실선 경계
══════════════════════════════════════════════════════════════════ */
:root.hitelMode {
  --color-prime:        #0269df;
  --color-prime-light:  #E0E0E0;
  --color-prime-dark:   #C0C0C0;
  --color-accent:       #FFFF00;

  /* 멘션 강조 (v1.8) */
  --mention-bg:         #FFFF00;                /* 정통 노랑 */
  --mention-text:       #000080;                /* 하이텔 진청색 */
  --mention-glow:       rgba(255, 255, 0, 0.8); /* 하이텔 클래식 강렬한 발광 */

  --bg-body:            #000080;
  --bg-surface:         #000080;
  --bg-surface-hover:   #0000AA;
  --bg-input:           #000080;
  --bg-header:          #0000AA;
  --bg-sidebar:         #000055;
  --bg-footer:          #000080;

  --text-primary:       #FFFFFF;
  --text-secondary:     #CCCCFF;
  --text-tertiary:      #8888FF;
  --text-heading:       #FFFFFF;
  --text-inverse:       #000080;

  --border-color:       #E6E6E6;    /* [v9.79] 눈부심 완화: #FFFFFF → #E6E6E6 (-10%) */
  --border-light:       rgba(230,230,230,0.5);
  --border-main:        2px solid #E6E6E6;

  --chat-bubble-mine:   #0055CC;  /* [v9.97] 흰색 → 밝은 파랑 (흰글씨 가독성 확보) */
  --chat-bubble-other:  transparent;
  --chat-text-mine:     #FFFFFF;  /* [v9.97] 네이비 → 흰색 (파랑 배경 대응) */
  --chat-text-other:    #FFFFFF;
  --chat-bg:            #000080;
  --chat-system-bg:     rgba(255,255,0,0.10);
  --reply-bg-alpha:     rgba(0,0,170,0.6);      /* [v11.54] 하이텔 답장바 (가독성 위해 진청색 계열) */


  --overlay:            rgba(0,0,80,0.80);
  --shadow-sm:          2px 2px 0 rgba(255,255,255,0.15);
  --shadow-md:          2px 2px 0 rgba(255,255,255,0.20);
  --shadow-lg:          4px 4px 0 rgba(255,255,255,0.20);

  /* ★ HiTel: 모든 border-radius = 0 */
  --radius-sm:          0px;
  --radius-md:          0px;
  --radius-lg:          0px;
  --radius-xl:          0px;
  --radius-full:        0px;

  /* [v9.79] 팝업창 배경: 본문(#000080)과 구분되도록 밝은 남색 적용 */
  --bg-inbox-header:    #0000CC;
  --bg-inbox-body:      #1414A0;   /* 밝은 남색으로 구분 */
  --bg-inbox-side:      #000066;
  --bg-inbox-footer:    #0A0A80;

  --bg-notify-header:   #FFFF00;
  --bg-notify-body:     #1414A0;   /* 밝은 남색으로 구분 */
  --bg-notify-footer:   #0A0A80;

  --bg-dm-header:       #0000CC;
  --bg-dm-body:         #1414A0;   /* 밝은 남색으로 구분 */
  --bg-dm-footer:       #0A0A80;
  --bg-dm-input:        #0A0A60;
}

   /* 하이텔 테마 - 대기실 카테고리 탭 전체 설정 */
:root.hitelMode .cat-tab {
  border: 2px solid #E6E6E6 !important; /* 기본 테두리: 선명한 흰색 계열 */
  background: #0A0A50 !important;       /* 기본 배경: 어두운 남색 */
  color: #FFFFFF !important;            /* 기본 글자색: 흰색 */
  border-radius: 0 !important;          /* 하이텔의 상징: 직각 */
}

:root.hitelMode .cat-tab:hover {
  border-color: #FFFF00 !important;      /* 마우스 오버: 노란색 테두리 */
  color: #FFFF00 !important;             /* 글자색도 노란색으로 강조 */
  background: #0000AA !important;       /* ← 배경을 진청색(#000080)보다 약간 밝은 파란색으로! */
  /* [참고] #0000AA는 하이텔 헤더와 같은 색상이라 이질감 없이 고급스럽게 보일 거예요. */
}


:root.hitelMode .cat-tab.active {
  background: #FFFF00 !important;       /* 활성화: 노란색 배경 */
  color: #000080 !important;            /* 활성화 글자색: 진청색 반전 */
  border-color: #E6E6E6 !important;     /* 활성화 시 테두리 유지 */
}


/* HiTel: D2Coding 고정폭 폰트 */
:root.hitelMode *:not(i):not(.bx):not([class^="bx "]):not([class*=" bx-"]) {
  font-family: 'D2Coding', 'Consolas', 'Courier New', monospace !important;
}
/* HiTel: 전역 border-radius 강제 0 */
:root.hitelMode *,
:root.hitelMode *::before,
:root.hitelMode *::after {
  border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   [v9.97] HiTel: 흰색 배경(--color-prime:#FFF) 요소 → 밝은 파랑 오버라이드
   --color-prime이 텍스트에선 흰색 역할을 하지만,
   배경으로 쓰이면 흰글씨와 겹쳐 가독성 제로 → #0055CC 대체
══════════════════════════════════════════════════════════════════ */
/* 헤더 아바타 이니셜 원 */
:root.hitelMode .header .user-info .avatar {
  background: #0055CC !important;
  color: #FFFFFF !important;
}
/* 채팅 전송 버튼 */
:root.hitelMode .chat-input-bar .send-btn {
  background: #0055CC !important;
  color: #FFFFFF !important;
}
/* 기본 btn-prime (파랑 버튼) */
:root.hitelMode .btn-prime {
  background: #0055CC !important;
  color: #FFFFFF !important;
}
/* bg-prime 유틸리티 */
:root.hitelMode .bg-prime {
  background: #0055CC !important;
}
/* [v10.3] 하이텔 테마: 파일 업로드 말풍선 내 버튼 (흰바탕 피하기) */
:root.hitelMode .btn-save,
:root.hitelMode .btn-save-sm,
:root.hitelMode .btn-download-block {
  background: #0055CC !important;
  color: #FFFFFF !important;
}
/* [v10.3] 하이텔 테마: 사용자 자기소개/모달 입력창 (남색 본문과 구분되는 밝은 남색) */
:root.hitelMode .chat-input {
  background: #0000AA !important;
  color: #FFFFFF !important;
  border: 2px solid #E6E6E6 !important;
}
/* 관리자·부방장 배지 — 노란 배경 + 진청 텍스트 (하이텔 시그니처 컬러) */
:root.hitelMode .badge-admin,
:root.hitelMode .badge-coowner {
  background: #FFFF00 !important;
  color: #000080 !important;
}
/* 대기실 카테고리 탭 활성 (--color-prime 배경 → 노란 배경) */
:root.hitelMode .cat-tab.active {
  background: #FFFF00 !important;
  color: #000080 !important;
  border-color: #E6E6E6 !important;
}

/* ══════════════════════════════════════════════════════════════════
   ⑤ 🌙  LAVENDER MIDNIGHT  (.lavenderMode)
   심야 보라 & 라벤더 네온 — Modern Aesthetic
══════════════════════════════════════════════════════════════════ */
:root.lavenderMode {
  /* Misty Lavender Dusk: Atmospheric, Foggy, Mid-tone */
  --color-prime:        #A5B4FC;  /* Soft Sky Blue-Purple */
  --color-prime-light:  #C7D2FE;
  --color-prime-dark:   #818CF8;
  --color-accent:       #E0E7FF;

  /* 멘션 강조 (v1.8) */
  --mention-bg:         rgba(255, 215, 0, 0.35);
  --mention-text:       #1E1B4B;
  --mention-glow:       rgba(255, 215, 0, 0.7);

  --bg-body:            #3E3A52;  /* Misty Mid-tone Background */
  --bg-surface:         #524C6E;  /* Lighter Card Surface */
  --bg-surface-hover:   #625B85;
  --bg-input:           #3E3A52;
  --bg-header:          #4A4565;
  --bg-sidebar:         #332F42;
  --bg-footer:          #332F42;

  --text-primary:       #F5F3FF;
  --text-secondary:     #C7D2FE;
  --text-tertiary:      #94A3B8;
  --text-heading:       #F5F3FF;
  --text-inverse:       #1E1B4B;

  --border-color:       #625B85;
  --border-light:       #4A4565;
  --border-main:        1.5px solid #625B85;

  --chat-bubble-mine:   linear-gradient(135deg, #A5B4FC, #818CF8);
  --chat-bubble-other:  #524C6E;
  --chat-text-mine:     #FFFFFF;  /* [Fix] #1E1B4B(어두운 네이비) → #FFFFFF (수신자와 색상 일관성) */
  --chat-text-other:    #F5F3FF;
  --chat-bg:            #3E3A52;
  --chat-system-bg:     rgba(165, 180, 252, 0.12);
  --reply-bg-alpha:     rgba(165, 180, 252, 0.15); /* [v11.54] 라벤더 답장바 */


  --overlay:            rgba(30, 27, 43, 0.7);
  --shadow-sm:          0 4px 10px rgba(0,0,0,0.15);
  --shadow-md:          0 8px 32px rgba(0,0,0,0.20);
  --shadow-lg:          0 20px 50px rgba(0,0,0,0.25);

  --radius-sm:          10px;
  --radius-md:          16px;
  --radius-lg:          22px;
  --radius-xl:          30px;
  --radius-full:        9999px;

  --bg-inbox-header:    #6366F1;
  --bg-inbox-body:      #524C6E;
  --bg-inbox-side:      #332F42;
  --bg-inbox-footer:    #332F42;

  --bg-notify-header:   #A5B4FC;
  --bg-notify-body:     #524C6E;
  --bg-notify-footer:   #332F42;

  --bg-dm-header:       #818CF8;
  --bg-dm-body:         #3E3A52;
  --bg-dm-footer:       #332F42;
  --bg-dm-input:        #2D283E;
}


/* ══════════════════════════════════════════════════════════════════
   ⑥ 🌸  ROSE CHIFFON  (.roseMode)
   로즈 골드 & 아이보리 — Elegant & Romantic
══════════════════════════════════════════════════════════════════ */
:root.roseMode {
  --color-prime:        #F43F5E;
  --color-prime-light:  #FB7185;
  --color-prime-dark:   #E11D48;
  --color-accent:       #FBCFE8;

  /* 멘션 강조 (v1.8) */
  --mention-bg:         rgba(255, 215, 0, 0.35);
  --mention-text:       #831843;
  --mention-glow:       rgba(255, 215, 0, 0.7);

  --bg-body:            #FFF8F9;
  --bg-surface:         #FFFFFF;
  --bg-surface-hover:   #FFF1F2;
  --bg-input:           #FFFFFF;
  --bg-header:          #FBCFE8;
  --bg-sidebar:         #FFF0F3;
  --bg-footer:          #FFF0F3;

  --text-primary:       #831843;
  --text-secondary:     #BE185D;
  --text-tertiary:      #F0ABBB;
  --text-heading:       #831843;
  --text-inverse:       #FFFFFF;

  --border-color:       #FCE7F3;
  --border-light:       #FDF2F8;
  --border-main:        1px solid #FCE7F3;

  --chat-bubble-mine:   #FBCFE8;
  --chat-bubble-other:  #FDF2F8;
  --chat-text-mine:     #831843;
  --chat-text-other:    #831843;
  --chat-bg:            #FFF8F9;
  --chat-system-bg:     rgba(251,207,232,0.25);
  --reply-bg-alpha:     rgba(251,207,232,0.30); /* [v11.54] 로즈 답장바 */


  --overlay:            rgba(131,24,67,0.40);
  --shadow-sm:          0 2px 6px  rgba(244,63,94,0.10);
  --shadow-md:          0 4px 16px rgba(244,63,94,0.13);
  --shadow-lg:          0 8px 32px rgba(244,63,94,0.16);

  --radius-sm:          10px;
  --radius-md:          16px;
  --radius-lg:          22px;
  --radius-xl:          30px;
  --radius-full:        9999px;

  --bg-inbox-header:    #FBCFE8;
  --bg-inbox-body:      #FFFFFF;
  --bg-inbox-side:      #FFF0F3;
  --bg-inbox-footer:    #FDF2F8;

  --bg-notify-header:   #F43F5E;
  --bg-notify-body:     #FFFFFF;
  --bg-notify-footer:   #FDF2F8;

  --bg-dm-header:       #FBCFE8;
  --bg-dm-body:         #FFF8F9;
  --bg-dm-footer:       #FDF2F8;
  --bg-dm-input:        #FFFFFF;
}


/* ══════════════════════════════════════════════════════════════════
   ⑦ 🛡️  STEEL NAVY  (.navyMode)
   미드나잇 블루 & 스틸 그레이 — Professional & Tech
══════════════════════════════════════════════════════════════════ */
:root.navyMode {
  /* Modern Provence: Electric, Sharp, Crisp High-Contrast */
  --color-prime:        #8D67F6;  /* Electric Provence */
  --color-prime-light:  #A78BFA;
  --color-prime-dark:   #6D28D9;
  --color-accent:       #38BDF8;  /* Cyan Sharp Accent */

  /* 멘션 강조 (v1.8) */
  --mention-bg:         rgba(255, 215, 0, 0.35);
  --mention-text:       #0F172A;
  --mention-glow:       rgba(255, 215, 0, 0.7);

  --bg-body:            #1A1832;  /* Sharp Ink Blue-Purple */
  --bg-surface:         #242245;
  --bg-surface-hover:   #2E2A5C;
  --bg-input:           #131126;
  --bg-header:          #1E1B3D;
  --bg-sidebar:         #15132B;
  --bg-footer:          #15132B;

  --text-primary:       #FFFFFF;
  --text-secondary:     #A5B4FC;
  --text-tertiary:      #6366F1;
  --text-heading:       #FFFFFF;
  --text-inverse:       #0F172A;

  --border-color:       #312D5C;
  --border-light:       #242245;
  --border-main:        1.5px solid #4F46E5;

  --chat-bubble-mine:   linear-gradient(135deg, #8D67F6, #4F46E5);
  --chat-bubble-other:  #242245;
  --chat-text-mine:     #FFFFFF;
  --chat-text-other:    #FFFFFF;
  --chat-bg:            #1A1832;
  --chat-system-bg:     rgba(141, 103, 246, 0.15);
  --reply-bg-alpha:     rgba(141, 103, 246, 0.18); /* [v11.54] 네이비 답장바 */


  --overlay:            rgba(15, 12, 35, 0.9);
  --shadow-sm:          0 4px 6px rgba(0,0,0,0.30);
  --shadow-md:          0 10px 25px rgba(0,0,0,0.50);
  --shadow-lg:          0 20px 60px rgba(0, 0, 0, 0.7);

  --radius-sm:          4px;
  --radius-md:          8px;
  --radius-lg:          12px;
  --radius-xl:          20px;
  --radius-full:        9999px;

  --bg-inbox-header:    #4F46E5;
  --bg-inbox-body:      #242245;
  --bg-inbox-side:      #15132B;
  --bg-inbox-footer:    #15132B;

  --bg-notify-header:   #8D67F6;
  --bg-notify-body:     #242245;
  --bg-notify-footer:   #15132B;

  --bg-dm-header:       #6366F1;
  --bg-dm-body:         #1A1832;
  --bg-dm-footer:       #15132B;
  --bg-dm-input:        #131126;
}


/* ════════════════════════════════════════════════════════════════════
   ⑧  WHITE NATURAL 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header {
  background: var(--bg-header);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(60,53,48,0.05);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .logo i,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .logo span,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .tools button,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .user-info .nick,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .user-info .points,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .back-btn,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .welcome-title,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .welcome-sub {
  color: var(--text-primary) !important;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .tools button:hover {
  background: rgba(179,152,132,0.12) !important;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .side-panel {
  background: linear-gradient(180deg, #F7F5F2 0%, #FDFCFB 100%);
  border-right: 1.5px solid var(--border-color);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .side-panel .panel-header {
  background: #EFEBE7;
  border-bottom: 1.5px solid var(--border-color);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area {
  background:
    radial-gradient(circle at 20% 30%, rgba(179,152,132,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(179,152,132,0.05) 0%, transparent 50%),
    var(--bg-body);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #C4A484 0%, #B39884 100%);
  box-shadow: 0 4px 12px rgba(179,152,132,0.20);
  border-radius: 18px 4px 18px 18px;
  /* color !important 제거 — JS autoTextColor() inline style이 커스텀 말풍선 색상에 따라 자동 결정 */
  /* 기본값은 chat.css의 color: var(--chat-text-mine) = #FFFFFF 로 충당 */
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg:not(.mine) .msg-bubble {
  background: #FFFFFF;
  border: 1.5px solid var(--border-color);
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 2px 8px rgba(60,53,48,0.05);
  /* color !important 제거 — JS autoTextColor() inline style이 커스텀 말풍선 색상에 따라 자동 결정 */
  /* 기본값은 chat.css의 color: var(--chat-text-other) = #3C3530 으로 충당 */
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar {
  background: #FFFFFF;
  border-top: 1.5px solid var(--border-color);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .msg-input {
    background: #FAFAF8;
    border: 1.5px solid var(--border-color);
    color: var(--text-primary);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .msg-input:focus {
  border-color: var(--color-prime);
  box-shadow: 0 0 0 3px rgba(179,152,132,0.12);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #C4A484 0%, #8E7B6C 100%);
  box-shadow: 0 4px 12px rgba(179,152,132,0.25);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .btn-prime {
  background: linear-gradient(135deg, #C4A484 0%, #8E7B6C 100%);
  box-shadow: 0 3px 10px rgba(179,152,132,0.22);
  color: #FFFFFF;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .floating-side-btn {
  background: linear-gradient(135deg, #C4A484 0%, #8E7B6C 100%);
  box-shadow: 0 4px 18px rgba(179,152,132,0.30), 0 0 0 3px rgba(255,255,255,0.6);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .modal-header {
  background: var(--bg-header);
  border-bottom: 2.5px solid var(--border-color);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .modal-header h3,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .modal-header button { color: var(--text-primary) !important; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .toast {
  background: #FFFFFF;
  border-left-color: var(--color-prime);
  box-shadow: 0 4px 20px rgba(60,53,48,0.10);
  color: var(--text-primary);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .login-card {
  border: 1.5px solid var(--border-color);
  box-shadow: 0 12px 48px rgba(60,53,48,0.10);
  background: #FFFFFF;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .login-card .logo-area i { color: var(--color-prime); }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .room-card {
  border: 1.5px solid var(--border-color);
  box-shadow: 0 4px 14px rgba(60,53,48,0.05);
  background: #FFFFFF;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .room-card:hover {
  border-color: var(--color-prime);
  box-shadow: 0 8px 24px rgba(179,152,132,0.12);
  transform: translateY(-2px);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg.system .msg-bubble {
  background: rgba(179,152,132,0.10);
  border: 1px solid rgba(179,152,132,0.20);
  color: var(--text-secondary);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) ::-webkit-scrollbar-thumb { background: #D6CEC8; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) ::-webkit-scrollbar-thumb:hover { background: var(--color-prime); }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .mobile-bottom-nav {
  background: #FFFFFF;
  border-top: 1.5px solid var(--border-color);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .input-field {
  background: #FFFFFF;
  border-color: var(--border-color);
  color: var(--text-primary);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .input-field:focus {
  border-color: var(--color-prime);
  box-shadow: 0 0 0 3px rgba(179,152,132,0.12);
}


/* ════════════════════════════════════════════════════════════════════
   ⑨  DARK HANJI 컴포넌트 오버라이드 (Velvet Herbarium)
════════════════════════════════════════════════════════════════════ */
:root.darkMode .header {
  background: linear-gradient(180deg, #3F345E 0%, #2D2034 100%);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.50);
}
:root.darkMode .header .logo i { color: var(--color-prime); }
:root.darkMode .header .tools button:hover {
  background: rgba(177,140,254,0.12) !important;
}
:root.darkMode .side-panel {
  background: linear-gradient(180deg, #2A2338 0%, #1C1625 100%);
  border-right: 1.5px solid var(--border-color);
}
:root.darkMode .side-panel .panel-header {
  background: #342A4E;
  border-bottom: 1.5px solid var(--border-color);
}
:root.darkMode .chat-area {
  background:
    radial-gradient(circle at 10% 20%, rgba(177,140,254,0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(253,230,138,0.06) 0%, transparent 50%),
    var(--bg-body);
}
:root.darkMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #B18CFE 0%, #9333EA 100%);
  box-shadow: 0 6px 20px rgba(147,51,234,0.30);
  border-radius: 18px 4px 18px 18px;
  border: 1px solid rgba(253, 230, 138, 0.2);
}
:root.darkMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #342A4E;
  border: 1.5px solid var(--border-color);
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #F5F3FF !important;
}
:root.darkMode .chat-input-bar {
  background: #2A2338;
  border-top: 2px solid var(--border-color);
}
:root.darkMode .chat-input-bar .msg-input {
  background: #1C1625;
  border-color: #4A3F70;
  color: #F5F3FF;
}
:root.darkMode .chat-input-bar .msg-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(253,230,138,0.15);
}
:root.darkMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #B18CFE 0%, #9333EA 100%);
  box-shadow: 0 4px 15px rgba(147,51,234,0.35);
}
:root.darkMode .btn-prime {
  background: linear-gradient(135deg, #B18CFE 0%, #9333EA 100%);
  color: #FFFFFF;
  border: 1px solid rgba(253, 230, 138, 0.2);
}
:root.darkMode .floating-side-btn {
  background: linear-gradient(135deg, #B18CFE 0%, #9333EA 100%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 0 0 3px var(--color-accent);
}
:root.darkMode .modal-header {
  background: linear-gradient(135deg, #3F345E 0%, #2D2034 100%);
  border-bottom: 2.5px solid var(--border-color);
}
:root.darkMode .toast {
  background: #342A4E;
  border-left-color: var(--color-accent);
  box-shadow: 0 10px 40px rgba(0,0,0,0.50);
}
:root.darkMode .login-card {
  background: #2A2338;
  border: 1.5px solid var(--border-color);
  box-shadow: 0 15px 60px rgba(0,0,0,0.60);
}
:root.darkMode .room-card {
  background: #342A4E;
  border: 1.5px solid var(--border-color);
}
:root.darkMode .room-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}
:root.darkMode .chat-area .msg.system .msg-bubble {
  background: rgba(253,230,138,0.06);
  border: 1px solid rgba(253,230,138,0.15);
  color: var(--color-accent);
}
:root.darkMode ::-webkit-scrollbar-thumb { background: #4A3F70; }
:root.darkMode ::-webkit-scrollbar-thumb:hover { background: var(--color-prime); }
:root.darkMode .mobile-bottom-nav {
  background: #2A2338;
  border-top: 1.5px solid var(--border-color);
}
:root.darkMode .input-field {
  background: #1C1625;
  border-color: #4A3F70;
  color: #F5F3FF;
}
:root.darkMode .input-field:focus {
  border-color: var(--color-accent);
}
:root.darkMode .input-field::placeholder { color: #5A4A3E; }




/* ════════════════════════════════════════════════════════════════════
   ⑩  HITEL CLASSIC 컴포넌트 오버라이드  [v9.79]
   ★ 정통 텍스트 기반: 그라데이션 없음, 2px 실선
   ★ v9.79: 테두리 #FFFFFF → #E6E6E6 (눈부심 -10%), 팝업 배경 밝은 남색 구분
════════════════════════════════════════════════════════════════════ */
:root.hitelMode .header {
  background: #0000AA;
  border-bottom: 2px solid #E6E6E6;
  box-shadow: none;
}
:root.hitelMode .header .logo i,
:root.hitelMode .header .logo span,
:root.hitelMode .header .tools button,
:root.hitelMode .header .user-info .nick,
:root.hitelMode .header .user-info .points,
:root.hitelMode .header .back-btn,
:root.hitelMode .welcome-title,
:root.hitelMode .welcome-sub { color: #FFFFFF !important; }
:root.hitelMode .header .tools button:hover {
  background: rgba(255,255,255,0.18) !important;
}

/* 사용자 카드 내부 버튼들의 테두리만 섬세하게 조절 */
:root.hitelMode .user-card .btn-outline {
  border-width: 1px !important;            /* 1px로 얇게 */
  border-color: rgba(255, 255, 255, 0.3) !important; /* ← 핵심! 완전 흰색 대신 30% 투명한 흰색 */
  padding: 3px 6px !important;
  font-size: 11px !important;
  background: transparent !important;
  /* color 설정을 삭제하여 HTML에 지정된 고유 색상(빨강 등)이 나오게 합니다 */
}

/* 마우스 오버 시에만 포인트 컬러로 강조 */
:root.hitelMode .user-card .btn-outline:hover {
  border-color: #FFFF00 !important;
  color: #FFFF00 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}


:root.hitelMode .side-panel {
  background: #000055;
  border-right: 2px solid #E6E6E6;
}
:root.hitelMode .side-panel .panel-header {
  background: #0000AA;
  border-bottom: 2px solid #E6E6E6;
}
:root.hitelMode .chat-area {
  background: #000080;
}
:root.hitelMode .chat-area .msg.mine .msg-bubble {
  background: #FFFFFF;
  color: #000080;
  border: 2px solid #E6E6E6;
}
:root.hitelMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #0A0A50;
  color: #FFFFFF;
  border: 2px solid #E6E6E6;
}
:root.hitelMode .chat-input-bar {
  background: #000080;
  border-top: 2px solid #E6E6E6;
}
:root.hitelMode .chat-input-bar .msg-input {
  background: #0A0A50;
  border: 2px solid #E6E6E6;
  color: #FFFFFF;
}
:root.hitelMode .chat-input-bar .msg-input:focus {
  border-color: #FFFF00;
  box-shadow: none;
}
:root.hitelMode .chat-input-bar .msg-input::placeholder { color: #8888FF; }
:root.hitelMode .chat-input-bar .send-btn {
  background: #FFFFFF;
  color: #000080;
  border: 2px solid #E6E6E6;
  box-shadow: none;
}
:root.hitelMode .btn-prime {
  background: #FFFFFF;
  color: #000080;
  border: 2px solid #E6E6E6;
  box-shadow: none;
}
:root.hitelMode .btn-outline {
  border: 2px solid #E6E6E6;
  color: #E6E6E6;
}
:root.hitelMode .btn-outline:hover {
  background: rgba(255,255,255,0.12);
}
:root.hitelMode .floating-side-btn {
  background: #FFFF00;
  color: #000080;
  border: 2px solid #E6E6E6;
  box-shadow: none;
}
/* [v9.79] 모달/팝업: 밝은 남색으로 본문(#000080)과 구분 */
:root.hitelMode .modal-box {
  background: #1414A0;
  border: 2px solid #E6E6E6;
}
:root.hitelMode .modal-header {
  background: #0000CC;
  border-bottom: 2px solid #E6E6E6;
}
:root.hitelMode .modal-header h3 { color: #FFFF00 !important; }
:root.hitelMode .modal-header button { color: #FFFFFF !important; }
:root.hitelMode .toast {
  background: #1414A0;
  border: 2px solid #E6E6E6;
  border-left-color: #FFFF00;
  border-left-width: 4px;
  box-shadow: none;
  color: #FFFFFF;
}
:root.hitelMode .login-card {
  background: #1414A0;
  border: 2px solid #E6E6E6;
  box-shadow: none;
}
:root.hitelMode .login-card .logo-area i { color: #FFFF00; }
:root.hitelMode .room-card {
  background: #0A0A60;
  border: 2px solid #E6E6E6;
}
:root.hitelMode .room-card:hover {
  border-color: #FFFF00;
  background: #1414A0;
  box-shadow: none;
  transform: none;
}
:root.hitelMode .chat-area .msg.system .msg-bubble {
  background: transparent;
  border: 2px solid #FFFF00;
  color: #FFFF00;
}
:root.hitelMode ::-webkit-scrollbar-thumb { background: rgba(230,230,230,0.35); }
:root.hitelMode ::-webkit-scrollbar-thumb:hover { background: #E6E6E6; }
:root.hitelMode .mobile-bottom-nav {
  background: #0000AA;
  border-top: 2px solid #E6E6E6;
}
:root.hitelMode .input-field {
  background: #0A0A50;
  border: 2px solid #E6E6E6;
  color: #FFFFFF;
}
:root.hitelMode .input-field:focus {
  border-color: #FFFF00;
  box-shadow: none;
}
:root.hitelMode .input-field::placeholder { color: #8888FF; }
/* [v9.79] 사서함 패널: 밝은 남색 배경으로 본문과 구분 */
:root.hitelMode #inboxPanel {
  background: #1414A0 !important;
  border: 2px solid #E6E6E6 !important;
}
:root.hitelMode .inbox-panel-header {
  background: #0000CC !important;
  border-bottom: 2px solid #E6E6E6 !important;
}
:root.hitelMode .inbox-left-col {
  background: #000066 !important;
  border-right: 2px solid #E6E6E6 !important;
}
:root.hitelMode .inbox-mid-col {
  background: #0A0A80 !important;
  border-right: 2px solid #E6E6E6 !important;
}
:root.hitelMode .inbox-search-wrap input {
  background: #0A0A50 !important;
  border: 2px solid #E6E6E6 !important;
  color: #FFFFFF !important;
}
:root.hitelMode .inbox-tab { color: #CCCCFF !important; }
:root.hitelMode .inbox-tab.active { color: #FFFF00 !important; box-shadow: inset 3px 0 0 #FFFF00 !important; }
:root.hitelMode .inbox-tab:hover { background: rgba(255,255,255,0.08) !important; }
/* [v9.79] DM 창: 밝은 남색 배경 */
:root.hitelMode .dm-window {
  background: #1414A0 !important;
  border: 2px solid #E6E6E6 !important;
}
:root.hitelMode .dm-window .dm-header {
  background: #0000CC !important;
  border-bottom: 2px solid #E6E6E6 !important;
}
:root.hitelMode .dm-window .dm-input-bar {
  background: #0A0A80 !important;
  border-top: 2px solid #E6E6E6 !important;
}
:root.hitelMode .dm-window .dm-input {
  background: #0A0A50 !important;
  border: 2px solid #E6E6E6 !important;
  color: #FFFFFF !important;
}
/* [v9.79] 알림음 설정 패널 */
:root.hitelMode #soundSettingsPanel,
:root.hitelMode #inboxSoundSettings {
  background: #1414A0 !important;
  border: 2px solid #E6E6E6 !important;
}
/* HiTel: 선택 색 */
:root.hitelMode ::selection {
  background: #FFFF00;
  color: #000080;
}


/* ════════════════════════════════════════════════════════════════════
   ⑪  LAVENDER MIDNIGHT 컴포넌트 오버라이드 (Misty Lavender Dusk)
════════════════════════════════════════════════════════════════════ */
:root.lavenderMode .header {
  background: linear-gradient(180deg, #4A4565 0%, #3E3A52 100%);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
:root.lavenderMode .header .logo i { color: var(--color-prime); }
:root.lavenderMode .header .tools button:hover {
  background: rgba(165,180,252,0.10) !important;
}
:root.lavenderMode .side-panel {
  background: linear-gradient(180deg, #332F42 0%, #3E3A52 100%);
  border-right: 1.5px solid var(--border-color);
}
:root.lavenderMode .side-panel .panel-header {
  background: #4A4565;
  border-bottom: 1.5px solid var(--border-color);
}
:root.lavenderMode .chat-area {
  background:
    radial-gradient(circle at 10% 20%, rgba(165,180,252,0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(224,231,255,0.05) 0%, transparent 50%),
    var(--bg-body);
}
:root.lavenderMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  border-radius: 18px 4px 18px 18px;
  color: #FFFFFF !important; /* [Fix] #1E1B4B → #FFFFFF (수신자 밝은 글씨와 일관성) */
}
:root.lavenderMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #524C6E;
  border: 1.5px solid var(--border-color);
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #F5F3FF !important;
}
:root.lavenderMode .chat-input-bar {
  background: #332F42;
  border-top: 1.5px solid var(--border-color);
}
:root.lavenderMode .chat-input-bar .msg-input {
  background: #3E3A52;
  border-color: #625B85;
  color: #F5F3FF;
}
:root.lavenderMode .chat-input-bar .msg-input:focus {
  border-color: #A5B4FC;
  box-shadow: 0 0 0 3px rgba(165,180,252,0.12);
}
:root.lavenderMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 100%);
  color: #1E1B4B;
}
:root.lavenderMode .btn-prime {
  background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 100%);
  color: #1E1B4B;
}
:root.lavenderMode .floating-side-btn {
  background: linear-gradient(135deg, #A5B4FC 0%, #818CF8 100%);
  color: #1E1B4B;
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), 0 0 0 3px rgba(255,255,255,0.2);
}
:root.lavenderMode .modal-header {
  background: linear-gradient(180deg, #4A4565 0%, #3E3A52 100%);
  border-bottom: 2.5px solid var(--border-color);
}
:root.lavenderMode .toast {
  background: #524C6E;
  border-left-color: #A5B4FC;
  box-shadow: 0 8px 32px rgba(0,0,0,0.20);
}
:root.lavenderMode .login-card {
  background: #524C6E;
  border: 1.5px solid var(--border-color);
  box-shadow: 0 12px 48px rgba(0,0,0,0.20);
}
:root.lavenderMode .room-card {
  background: #524C6E;
  border: 1.5px solid var(--border-color);
}
:root.lavenderMode .room-card:hover {
  border-color: #A5B4FC;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  transform: translateY(-2px);
}
:root.lavenderMode ::-webkit-scrollbar-thumb { background: #625B85; }
:root.lavenderMode ::-webkit-scrollbar-thumb:hover { background: #A5B4FC; }
:root.lavenderMode ::selection {
  background: rgba(165,180,252,0.30);
  color: #FFFFFF;
}




/* ════════════════════════════════════════════════════════════════════
   ⑫  ROSE CHIFFON 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root.roseMode .header {
  background: linear-gradient(135deg, #FDE8F5 0%, #FBCFE8 60%, #F9A8D4 100%);
  border-bottom: 1.5px solid #FCE7F3;
  box-shadow: 0 3px 12px rgba(244,63,94,0.10);
}
:root.roseMode .header .logo i,
:root.roseMode .header .logo span,
:root.roseMode .header .tools button,
:root.roseMode .header .user-info .nick,
:root.roseMode .header .user-info .points,
:root.roseMode .header .back-btn,
:root.roseMode .welcome-title,
:root.roseMode .welcome-sub { color: #831843 !important; }
:root.roseMode .header .tools button:hover {
  background: rgba(131,24,67,0.08) !important;
}
:root.roseMode .side-panel {
  background: linear-gradient(180deg, #FFF0F3 0%, #FFF5F7 100%);
  border-right: 1.5px solid #FCE7F3;
}
:root.roseMode .side-panel .panel-header {
  background: linear-gradient(135deg, #FDE8F5 0%, #FBCFE8 100%);
  border-bottom: 1px solid #FCE7F3;
}
:root.roseMode .chat-area {
  background:
    radial-gradient(circle at 20% 30%, rgba(251,207,232,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(244,63,94,0.05) 0%, transparent 50%),
    #FFF8F9;
}
:root.roseMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #FDE8F5 0%, #FBCFE8 100%);
  color: #831843;
  border: 1px solid #FCE7F3;
  border-radius: 18px 4px 18px 18px;
  box-shadow: 0 2px 8px rgba(244,63,94,0.10);
}
:root.roseMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #FFFFFF;
  border: 1px solid #FCE7F3;
  border-radius: 4px 18px 18px 18px;
  color: #831843;
}
:root.roseMode .chat-input-bar {
  background: #FFFFFF;
  border-top: 1.5px solid #FCE7F3;
}
:root.roseMode .chat-input-bar .msg-input {
  background: #FFF8F9;
  border: 1.5px solid #FCE7F3;
  color: #831843;
}
:root.roseMode .chat-input-bar .msg-input:focus {
  border-color: #F43F5E;
  box-shadow: 0 0 0 3px rgba(244,63,94,0.12);
}
:root.roseMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(244,63,94,0.25);
}
:root.roseMode .btn-prime {
  background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(244,63,94,0.22);
}
:root.roseMode .floating-side-btn {
  background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(244,63,94,0.30);
}
:root.roseMode .modal-header {
  background: linear-gradient(135deg, #FDE8F5 0%, #FBCFE8 100%);
  border-bottom: 1.5px solid #FCE7F3;
}
:root.roseMode .modal-header h3,
:root.roseMode .modal-header button { color: #831843 !important; }
:root.roseMode .toast {
  background: #FFFFFF;
  border-left-color: #F43F5E;
  box-shadow: 0 4px 16px rgba(244,63,94,0.10);
}
:root.roseMode .login-card {
  border: 1.5px solid #FCE7F3;
  box-shadow: 0 8px 40px rgba(244,63,94,0.10);
}
:root.roseMode .login-card .logo-area i { color: #F43F5E; }
:root.roseMode .room-card {
  border: 1.5px solid #FCE7F3;
  box-shadow: 0 3px 12px rgba(244,63,94,0.06);
}
:root.roseMode .room-card:hover {
  border-color: #F43F5E;
  box-shadow: 0 6px 18px rgba(244,63,94,0.12);
  transform: translateY(-2px);
}
:root.roseMode .chat-area .msg.system .msg-bubble {
  background: rgba(251,207,232,0.25);
  border: 1px solid rgba(244,63,94,0.18);
  color: #BE185D;
}
:root.roseMode ::-webkit-scrollbar-thumb { background: #FCE7F3; }
:root.roseMode ::-webkit-scrollbar-thumb:hover { background: #FBCFE8; }
:root.roseMode .mobile-bottom-nav {
  background: #FFFFFF;
  border-top: 1.5px solid #FCE7F3;
}
:root.roseMode .input-field {
  background: #FFFFFF;
  border-color: #FCE7F3;
  color: #831843;
}
:root.roseMode .input-field:focus {
  border-color: #F43F5E;
  box-shadow: 0 0 0 3px rgba(244,63,94,0.12);
}
:root.roseMode .input-field::placeholder { color: #F0ABBB; }


/* ════════════════════════════════════════════════════════════════════
   ⑬  STEEL NAVY 컴포넌트 오버라이드 (Modern Provence)
════════════════════════════════════════════════════════════════════ */
:root.navyMode .header {
  background: linear-gradient(180deg, #1E1B3D 0%, #131126 100%);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 5px 20px rgba(0,0,0,0.50);
}
:root.navyMode .header .logo i { color: var(--color-prime); }
:root.navyMode .header .tools button:hover {
  background: rgba(141,103,246,0.15) !important;
}
:root.navyMode .side-panel {
  background: linear-gradient(180deg, #15132B 0%, #1A1832 100%);
  border-right: 1.5px solid var(--border-color);
}
:root.navyMode .side-panel .panel-header {
  background: #1E1B3D;
  border-bottom: 1.5px solid var(--border-color);
}
:root.navyMode .chat-area {
  background:
    radial-gradient(circle at 15% 25%, rgba(141,103,246,0.10) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(56,189,248,0.06) 0%, transparent 50%),
    var(--bg-body);
}
:root.navyMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #8D67F6 0%, #4F46E5 100%);
  box-shadow: 0 8px 25px rgba(0,0,0,0.40);
  border-radius: 18px 4px 18px 18px;
  border: 1px solid rgba(56,189,248,0.2);
}
:root.navyMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #242245;
  border: 1.5px solid var(--border-color);
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.30);
  color: #FFFFFF !important;
}
:root.navyMode .chat-input-bar {
  background: #15132B;
  border-top: 2px solid var(--border-color);
}
:root.navyMode .chat-input-bar .msg-input {
  background: #131126;
  border-color: #312D5C;
  color: #FFFFFF;
}
:root.navyMode .chat-input-bar .msg-input:focus {
  border-color: var(--color-prime);
  box-shadow: 0 0 0 3px rgba(141,103,246,0.20);
}
:root.navyMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #8D67F6 0%, #4F46E5 100%);
}
:root.navyMode .btn-prime {
  background: linear-gradient(135deg, #8D67F6 0%, #4F46E5 100%);
  color: #FFFFFF;
}
:root.navyMode .floating-side-btn {
  background: linear-gradient(135deg, #8D67F6 0%, #4F46E5 100%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.70), 0 0 0 3px rgba(56,189,248,0.3);
}
:root.navyMode .modal-header {
  background: linear-gradient(180deg, #1E1B3D 0%, #131126 100%);
  border-bottom: 2.5px solid var(--border-color);
}
:root.navyMode .toast {
  background: #242245;
  border-left-color: var(--color-prime);
  box-shadow: 0 12px 48px rgba(0,0,0,0.70);
}
:root.navyMode .login-card {
  background: #242245;
  border: 1.5px solid var(--border-color);
  box-shadow: 0 15px 70px rgba(0,0,0,0.80);
}
:root.navyMode .room-card {
  background: #242245;
  border: 1.5px solid var(--border-color);
}
:root.navyMode .room-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 35px rgba(0,0,0,0.60);
  transform: translateY(-3px);
}
:root.navyMode .chat-area .msg.system .msg-bubble {
  background: rgba(56,189,248,0.08);
  border: 1px solid rgba(56,189,248,0.15);
  color: var(--color-accent);
}
:root.navyMode ::-webkit-scrollbar-thumb { background: #312D5C; }
:root.navyMode ::-webkit-scrollbar-thumb:hover { background: var(--color-prime); }
:root.navyMode .mobile-bottom-nav {
  background: #15132B;
  border-top: 1.5px solid var(--border-color);
}
:root.navyMode .input-field {
  background: #131126;
  border-color: #312D5C;
  color: #FFFFFF;
}
:root.navyMode .input-field:focus {
  border-color: var(--color-prime);
}
:root.navyMode .input-field::placeholder { color: #56518E; }



/* ════════════════════════════════════════════════════════════════════
   ⑭  모바일 UX — 테마 공통
════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header { height: 56px; }
  .chat-input-bar {
    padding: 10px 12px;
    height: 64px;
    align-items: center;
  }
  .chat-input-bar .input-tools { gap: 0; }
  .chat-input-bar .input-tools button:not(.mobile-attach-btn) { display: none; }
  .chat-input-bar .msg-input {
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    font-size: 15px;
    padding: 0 16px;
  }
  .chat-input-bar .send-btn {
    width: 48px;
    height: 48px;
    font-size: 20px;
    flex-shrink: 0;
  }
  .chat-input-bar .input-tools button {
    width: 48px;
    height: 48px;
    font-size: 22px;
    border-radius: 50%;
  }
}

@media (max-width: 768px) {
  .floating-side-btn {
    width: 52px;
    height: 52px;
    font-size: 24px;
    bottom: 74px;
    right: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255,255,255,0.15);
  }
}

.mobile-bottom-nav { display: none; }

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg-header);
    border-top: 1px solid var(--border-light);
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 8px;
    color: var(--text-tertiary);
    text-decoration: none;
    min-height: 44px;
    padding: 0 1px;
    cursor: pointer;
    border: none;
    background: none;
    transition: var(--transition);
  }
  .nav-tab i { font-size: 20px; display: block; }
  /* [v11.19] Mobile edge icons refinement: Slightly smaller (38px) and softer color for better harmony */
  #navEmoji i, #navSideToggle i { font-size: 38px !important; color: var(--text-tertiary); opacity: 0.9; transition: transform 0.2s ease-in-out; }
  #navEmoji span, #navSideToggle span { display: none !important; }
  #navEmoji:active i, #navSideToggle:active i { transform: scale(1.15); }

  .nav-tab.active { color: var(--color-prime); }
  .nav-tab:hover  { color: var(--color-prime-light); }
  .app { padding-bottom: 56px; }
  .side-panel { bottom: 56px; }
}

.mobile-tool-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-header);
  border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--border-color);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
  display: none;
}
.mobile-tool-sheet.open { transform: translateY(0); }
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  margin: 0 auto 14px;
}
.sheet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
}
.sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.sheet-btn {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: var(--transition);
}
.sheet-btn:hover, .sheet-btn:active {
  background: var(--bg-surface-hover);
  transform: scale(0.95);
}
.sheet-label { font-size: 10px; color: var(--text-secondary); }
.sheet-overlay {
  display: none;
  position: fixed; inset: 0;
  background: var(--overlay);
  z-index: 199;
}
.sheet-overlay.open { display: block; }
:root.hitelMode .mobile-tool-sheet {
  background: #000080;
  border-color: #FFFFFF;
  border-radius: 0;
  border-top-width: 2px;
}


/* ════════════════════════════════════════════════════════════════════
   ⑮  테마 피커 UI  (.theme-picker-*)
   헤더 팔레트 버튼 → 드롭다운 6테마 선택
════════════════════════════════════════════════════════════════════ */
.theme-picker-wrap {
  position: relative;
  display: inline-flex;
}

.theme-picker-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 9999;
  flex-direction: column;
  gap: 2px;
}
.theme-picker-dropdown.open { display: flex; }

.theme-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--text-primary);
  font-size: 13px;
}
.theme-picker-item:hover {
  background: var(--bg-surface-hover);
}
.theme-picker-item.active {
  background: var(--bg-surface-hover);
  color: var(--color-prime);
  font-weight: 600;
}
.theme-picker-item .tp-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  flex-shrink: 0;
}
.theme-picker-item .tp-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}
.theme-picker-item .tp-check {
  margin-left: auto;
  opacity: 0;
  color: var(--color-prime);
  font-size: 15px;
}
.theme-picker-item.active .tp-check { opacity: 1; }

/* HiTel 모드에서 피커 */
:root.hitelMode .theme-picker-dropdown {
  border: 2px solid #FFFFFF;
  border-radius: 0;
  background: #000080;
}
:root.hitelMode .theme-picker-item { color: #FFFFFF; }
:root.hitelMode .theme-picker-item:hover { background: #0000AA; }
:root.hitelMode .theme-picker-item.active { color: #FFFF00; background: #000055; }

/* 테마 선택 버튼 (로그인·헤더) */
.theme-selector-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.theme-selector-v2 .ts-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition);
  position: relative;
}
.theme-selector-v2 .ts-btn:hover {
  transform: scale(1.12);
  filter: brightness(1.1);
}
.theme-selector-v2 .ts-btn.active {
  border-color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}
/* Swatch colors per theme */
.ts-btn[data-theme="white"]    { background: #B39884; }
.ts-btn[data-theme="dark"]     { background: #B18CFE; }
.ts-btn[data-theme="hitel"]    { background: #0000AA; border-color: #FFFFFF; }
.ts-btn[data-theme="lavender"] { background: #9A86FD; }
.ts-btn[data-theme="rose"]     { background: #FBCFE8; }
.ts-btn[data-theme="navy"]     { background: #8D67F6; }
.ts-btn[data-theme="hitel"].active { border-color: #FFFF00 !important; box-shadow: 0 0 0 3px rgba(255,255,0,0.3) !important; }

/* 🏠 Home Logo Button: All-in-One Expert Tuning (6 Themes) */

/* [공통 구조] */
.home-logo-btn {
  display: inline-block;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
  line-height: normal;
  font-weight: 700;
}
.home-logo-btn .logo { display: flex; align-items: center; gap: 8px; }

/* 1️⃣ White Natural: 진한 복숭아 -> 선명한 풀잎 (상속 해결) */
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn {
  background: #FF9E7D; 
  border-color: #EE7E59;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn i,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn span { color: #FFFFFF !important; }

:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn:hover { background: #2E7D32 !important; border-color: #1B5E20 !important; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn:hover i,
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .home-logo-btn:hover span { color: #FFFFFF !important; }

/* 2️⃣ Dark Hanji: Velvet Herbarium - Warm botanical glow */
:root.darkMode .home-logo-btn { background: rgba(177, 140, 254, 0.1); border-color: rgba(177, 140, 254, 0.2); }
:root.darkMode .home-logo-btn i, :root.darkMode .home-logo-btn span { color: #D8B4FE !important; }
:root.darkMode .home-logo-btn:hover { background: #B18CFE !important; border-color: #D8B4FE !important; }
:root.darkMode .home-logo-btn:hover i, :root.darkMode .home-logo-btn:hover span { color: #211C2B !important; }

/* 3️⃣ HiTel Classic: 2px 실선 & 선명한 반전 (상속 해결) */
:root.hitelMode .home-logo-btn { background: #0A0A50; border: 2px solid #E6E6E6; border-radius: 0 !important; }
:root.hitelMode .home-logo-btn i, :root.hitelMode .home-logo-btn span { color: #FFFFFF !important; }
:root.hitelMode .home-logo-btn:hover { background: #FFFFFF !important; border-color: #FFFF00 !important; }
:root.hitelMode .home-logo-btn:hover i, :root.hitelMode .home-logo-btn:hover span { color: #000080 !important; }

/* 4️⃣ Lavender Midnight: Misty Lavender Dusk - Cold soft glow */
:root.lavenderMode .home-logo-btn { background: rgba(154, 134, 253, 0.1); border-color: rgba(154, 134, 253, 0.2); }
:root.lavenderMode .home-logo-btn i, :root.lavenderMode .home-logo-btn span { color: #C7D2FE !important; }
:root.lavenderMode .home-logo-btn:hover { background: #9A86FD !important; border-color: #C7D2FE !important; }
:root.lavenderMode .home-logo-btn:hover i, :root.lavenderMode .home-logo-btn:hover span { color: #242038 !important; }

/* 5️⃣ Rose Chiffon: 기본 분홍 -> 오버 시 보석 같은 흰색 */
:root.roseMode .home-logo-btn { background: #FBCFE8; border-color: #FCE7F3; }
:root.roseMode .home-logo-btn i, :root.roseMode .home-logo-btn span { color: #BE185D !important; }
:root.roseMode .home-logo-btn:hover { background: #FFFFFF !important; border-color: #FBCFE8 !important; }
:root.roseMode .home-logo-btn:hover i, :root.roseMode .home-logo-btn:hover span { color: #BE185D !important; }

/* 6️⃣ Steel Navy: Modern Provence - Electric sharp glow */
:root.navyMode .home-logo-btn { background: rgba(141, 103, 246, 0.15); border-color: rgba(141, 103, 246, 0.3); }
:root.navyMode .home-logo-btn i, :root.navyMode .home-logo-btn span { color: #A78BFA !important; }
:root.navyMode .home-logo-btn:hover { background: #8D67F6 !important; border-color: #FFFFFF !important; }
:root.navyMode .home-logo-btn:hover i, :root.navyMode .home-logo-btn:hover span { color: #FFFFFF !important; }