@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:        #FF9E7D;
  --color-prime-light:  #FFAD94;
  --color-prime-dark:   #FF8A65;
  --color-accent:       #FACC15;   /* 강조2 — 뱃지·알림·온라인 도트 */

  /* 배경 레이어 */
  --bg-body:            #FFFDF5;   /* 메인 본문 */
  --bg-surface:         #FFFFFF;   /* 사용자카드 */
  --bg-surface-hover:   #FFF5F0;   /* 사용자카드 오버 */
  --bg-input:           #FFFFFF;   /* 입력창 */
  --bg-header:          #FF9E7D;   /* 메인 헤더 */
  --bg-sidebar:         #F9F3E9;   /* 사이드패널 / 메인 푸터 */
  --bg-footer:          #F9F3E9;

  /* 텍스트 */
  --text-primary:       #4A3D39;
  --text-secondary:     #8B6E66;
  --text-tertiary:      #C4A59E;
  --text-heading:       #FFFFFF;
  --text-inverse:       #FFFFFF;

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

  /* 채팅 버블 */
  --chat-bubble-mine:   #FF9E7D;
  --chat-bubble-other:  #F0E6D8;
  --chat-text-mine:     #FFFFFF;
  --chat-text-other:    #4A3D39;
  --chat-bg:            #FFFDF5;
  --chat-system-bg:     rgba(255,158,125,0.10);

  /* 그림자 */
  --overlay:            rgba(74,61,57,0.45);
  --shadow-sm:          0 2px 6px  rgba(180,100,60,0.10);
  --shadow-md:          0 4px 16px rgba(180,100,60,0.13);
  --shadow-lg:          0 8px 32px rgba(180,100,60,0.16);

  /* 형태 */
  --radius-sm:          8px;
  --radius-md:          14px;
  --radius-lg:          20px;
  --radius-xl:          28px;
  --radius-full:        9999px;

  /* 사서함 모달창 */
  --bg-inbox-header:    #FF9E7D;
  --bg-inbox-body:      #FFFFFF;
  --bg-inbox-side:      #F9F3E9;
  --bg-inbox-footer:    #F9F6F1;

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

  /* 사서함 대화창 (DM) */
  --bg-dm-header:       #FF9E7D;
  --bg-dm-body:         #FFFDF5;
  --bg-dm-footer:       #F0E6D8;
  --bg-dm-input:        #FFFFFF;
}


/* ══════════════════════════════════════════════════════════════════
   ③ 🖌️  DARK HANJI  (.darkMode)
   먹색 & 토양 브라운 — Traditional & Premium
══════════════════════════════════════════════════════════════════ */
:root.darkMode {
  --color-prime:        #8D7B68;
  --color-prime-light:  #9C8A76;
  --color-prime-dark:   #7A6959;
  --color-accent:       #E5E7EB;

  --bg-body:            #1A1A1A;
  --bg-surface:         #2D2D2D;
  --bg-surface-hover:   #3D332B;
  --bg-input:           #1A1A1A;
  --bg-header:          #5C4D42;
  --bg-sidebar:         #242424;
  --bg-footer:          #242424;

  --text-primary:       #E0D5C1;
  --text-secondary:     #8C7A6B;
  --text-tertiary:      #5A4A3E;
  --text-heading:       #E0D5C1;
  --text-inverse:       #1A1A1A;

  --border-color:       #4D3F35;
  --border-light:       #3A2D26;
  --border-main:        1px solid #4D3F35;

  --chat-bubble-mine:   #8D7B68;
  --chat-bubble-other:  #3D332B;
  --chat-text-mine:     #E0D5C1;
  --chat-text-other:    #C8B8A8;
  --chat-bg:            #1A1A1A;
  --chat-system-bg:     rgba(141,123,104,0.10);

  --overlay:            rgba(0,0,0,0.72);
  --shadow-sm:          0 1px 4px  rgba(0,0,0,0.45);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.55);
  --shadow-lg:          0 8px 30px rgba(0,0,0,0.65);

  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  --bg-inbox-header:    #5C4D42;
  --bg-inbox-body:      #2D2D2D;
  --bg-inbox-side:      #242424;
  --bg-inbox-footer:    #352B24;

  --bg-notify-header:   #E5E7EB;
  --bg-notify-body:     #2D2D2D;
  --bg-notify-footer:   #352B24;

  --bg-dm-header:       #8D7B68;
  --bg-dm-body:         #2B231D;
  --bg-dm-footer:       #3D332B;
  --bg-dm-input:        #1A1A1A;
}


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

  --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);

  --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;
}
/* 관리자·부방장 배지 — 노란 배경 + 진청 텍스트 (하이텔 시그니처 컬러) */
: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 {
  --color-prime:        #A78BFA;
  --color-prime-light:  #C4B5FD;
  --color-prime-dark:   #8B5CF6;
  --color-accent:       #38BDF8;

  --bg-body:            #121020;
  --bg-surface:         #252145;
  --bg-surface-hover:   #352D5E;
  --bg-input:           #252145;
  --bg-header:          #1C1930;
  --bg-sidebar:         #1C1930;
  --bg-footer:          #1C1930;

  --text-primary:       #E9D5FF;
  --text-secondary:     #9D84D8;
  --text-tertiary:      #4A4070;
  --text-heading:       #E9D5FF;
  --text-inverse:       #121020;

  --border-color:       #4C438E;
  --border-light:       #2D285A;
  --border-main:        1px solid #4C438E;

  --chat-bubble-mine:   #A78BFA;
  --chat-bubble-other:  #1C1930;
  --chat-text-mine:     #121020;
  --chat-text-other:    #E9D5FF;
  --chat-bg:            #121020;
  --chat-system-bg:     rgba(167,139,250,0.08);

  --overlay:            rgba(0,0,20,0.80);
  --shadow-sm:          0 2px 6px  rgba(100,80,200,0.25);
  --shadow-md:          0 4px 16px rgba(100,80,200,0.30);
  --shadow-lg:          0 8px 32px rgba(167,139,250,0.20);

  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  --bg-inbox-header:    #A78BFA;
  --bg-inbox-body:      #252145;
  --bg-inbox-side:      #1C1930;
  --bg-inbox-footer:    #1C1930;

  --bg-notify-header:   #38BDF8;
  --bg-notify-body:     #252145;
  --bg-notify-footer:   #1C1930;

  --bg-dm-header:       #A78BFA;
  --bg-dm-body:         #121020;
  --bg-dm-footer:       #1C1930;
  --bg-dm-input:        #252145;
}


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

  --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);

  --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 {
  --color-prime:        #3B82F6;
  --color-prime-light:  #60A5FA;
  --color-prime-dark:   #2563EB;
  --color-accent:       #60A5FA;

  --bg-body:            #0F172A;
  --bg-surface:         #1E293B;
  --bg-surface-hover:   #334155;
  --bg-input:           #334155;
  --bg-header:          #64748B;
  --bg-sidebar:         #1E293B;
  --bg-footer:          #1E293B;

  --text-primary:       #F1F5F9;
  --text-secondary:     #94A3B8;
  --text-tertiary:      #475569;
  --text-heading:       #FFFFFF;
  --text-inverse:       #0F172A;

  --border-color:       #334155;
  --border-light:       #1E293B;
  --border-main:        1px solid #334155;

  --chat-bubble-mine:   #3B82F6;
  --chat-bubble-other:  #334155;
  --chat-text-mine:     #FFFFFF;
  --chat-text-other:    #F1F5F9;
  --chat-bg:            #0F172A;
  --chat-system-bg:     rgba(59,130,246,0.08);

  --overlay:            rgba(0,0,0,0.72);
  --shadow-sm:          0 1px 4px  rgba(0,0,0,0.40);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg:          0 8px 30px rgba(15,23,42,0.70);

  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          16px;
  --radius-xl:          24px;
  --radius-full:        9999px;

  --bg-inbox-header:    #64748B;
  --bg-inbox-body:      #1E293B;
  --bg-inbox-side:      #1E293B;
  --bg-inbox-footer:    #1E293B;

  --bg-notify-header:   #60A5FA;
  --bg-notify-body:     #1E293B;
  --bg-notify-footer:   #1E293B;

  --bg-dm-header:       #3B82F6;
  --bg-dm-body:         #0F172A;
  --bg-dm-footer:       #1E293B;
  --bg-dm-input:        #334155;
}


/* ════════════════════════════════════════════════════════════════════
   ⑧  WHITE NATURAL 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header {
  background: linear-gradient(135deg, #FFAD94 0%, #FF9E7D 60%, #FF8A65 100%);
  border-bottom: none;
  box-shadow: 0 3px 14px rgba(255,138,101,0.25);
}
: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: #FFFFFF !important;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .header .tools button:hover {
  background: rgba(255,255,255,0.22) !important;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .side-panel {
  background: linear-gradient(180deg, #F9F3E9 0%, #FFF5E8 100%);
  border-right: 1.5px solid #E8DFD1;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .side-panel .panel-header {
  background: linear-gradient(135deg, #FFCBA0 0%, #FFAD94 100%);
  border-bottom: none;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area {
  background:
    radial-gradient(circle at 20% 30%, rgba(255,200,150,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,158,125,0.15) 0%, transparent 50%),
    #FFFDF5;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #FFAD94 0%, #FF9E7D 100%);
  box-shadow: 0 2px 10px rgba(255,138,101,0.25);
  border-radius: 18px 4px 18px 18px;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg:not(.mine) .msg-bubble {
  background: #FFFFFF;
  border: 1px solid #E8DFD1;
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 1px 6px rgba(180,100,60,0.08);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar {
  background: #FFFFFF;
  border-top: 1.5px solid #E8DFD1;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .msg-input {
  background: #FFF8F4;
  border: 1.5px solid #E8DFD1;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .msg-input:focus {
  border-color: #FF9E7D;
  box-shadow: 0 0 0 3px rgba(255,158,125,0.15);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #FFAD94 0%, #FF8A65 100%);
  box-shadow: 0 3px 10px rgba(255,138,101,0.30);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .btn-prime {
  background: linear-gradient(135deg, #FFAD94 0%, #FF8A65 100%);
  box-shadow: 0 2px 8px rgba(255,138,101,0.25);
  color: #FFFFFF;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .floating-side-btn {
  background: linear-gradient(135deg, #FFAD94 0%, #FF8A65 100%);
  box-shadow: 0 4px 16px rgba(255,138,101,0.35), 0 0 0 3px rgba(255,255,255,0.5);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .modal-header {
  background: linear-gradient(135deg, #FFAD94 0%, #FF9E7D 100%);
  border-bottom: none;
}
: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: #FFFFFF !important; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .toast {
  background: #FFFFFF;
  border-left-color: #FF9E7D;
  box-shadow: 0 4px 16px rgba(180,100,60,0.12);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .login-card {
  border: 1.5px solid #E8DFD1;
  box-shadow: 0 8px 40px rgba(180,100,60,0.12);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .login-card .logo-area i { color: #FF9E7D; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .room-card {
  border: 1.5px solid #E8DFD1;
  box-shadow: 0 3px 12px rgba(180,100,60,0.08);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .room-card:hover {
  border-color: #FF9E7D;
  box-shadow: 0 6px 18px rgba(255,138,101,0.15);
  transform: translateY(-2px);
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .chat-area .msg.system .msg-bubble {
  background: rgba(255,158,125,0.12);
  border: 1px solid rgba(255,158,125,0.25);
  color: #8B6E66;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) ::-webkit-scrollbar-thumb { background: #E8C4B0; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) ::-webkit-scrollbar-thumb:hover { background: #FF9E7D; }
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .mobile-bottom-nav {
  background: #FFFFFF;
  border-top: 1.5px solid #E8DFD1;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .input-field {
  background: #FFFFFF;
  border-color: #E8DFD1;
}
:root:not(.darkMode):not(.hitelMode):not(.lavenderMode):not(.roseMode):not(.navyMode) .input-field:focus {
  border-color: #FF9E7D;
  box-shadow: 0 0 0 3px rgba(255,158,125,0.15);
}


/* ════════════════════════════════════════════════════════════════════
   ⑨  DARK HANJI 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root.darkMode .header {
  background: linear-gradient(180deg, #6A5848 0%, #5C4D42 100%);
  border-bottom: 1px solid #4D3F35;
  box-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
:root.darkMode .header .logo i { color: #C8B8A8; }
:root.darkMode .header .tools button:hover {
  background: rgba(141,123,104,0.18) !important;
  color: #C8B8A8 !important;
}
:root.darkMode .side-panel {
  background: linear-gradient(180deg, #242424 0%, #1E1E1E 100%);
  border-right: 1px solid #4D3F35;
}
:root.darkMode .side-panel .panel-header {
  background: #2D2520;
  border-bottom: 1px solid #4D3F35;
}
:root.darkMode .chat-area {
  background:
    radial-gradient(circle at 15% 25%, rgba(141,123,104,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(80,60,40,0.08) 0%, transparent 50%),
    #1A1A1A;
}
:root.darkMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #9C8A76 0%, #8D7B68 100%);
  border: 1px solid rgba(200,184,168,0.25);
  border-radius: 16px 4px 16px 16px;
}
:root.darkMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #2D2420;
  border: 1px solid #4D3F35;
  border-radius: 4px 16px 16px 16px;
}
:root.darkMode .chat-input-bar {
  background: #242424;
  border-top: 1px solid #4D3F35;
}
:root.darkMode .chat-input-bar .msg-input {
  background: #1A1A1A;
  border-color: #4D3F35;
  color: #E0D5C1;
}
:root.darkMode .chat-input-bar .msg-input:focus {
  border-color: #8D7B68;
  box-shadow: 0 0 0 3px rgba(141,123,104,0.15);
}
:root.darkMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #9C8A76 0%, #7A6959 100%);
}
:root.darkMode .btn-prime {
  background: linear-gradient(135deg, #9C8A76 0%, #7A6959 100%);
  color: #E0D5C1;
}
:root.darkMode .floating-side-btn {
  background: linear-gradient(135deg, #9C8A76 0%, #7A6959 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.55), 0 0 0 2px rgba(141,123,104,0.25);
}
:root.darkMode .modal-header {
  background: linear-gradient(135deg, #6A5848 0%, #5C4D42 100%);
  border-bottom: 1px solid #4D3F35;
}
:root.darkMode .toast {
  background: #2D2D2D;
  border-left-color: #8D7B68;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}
:root.darkMode .login-card {
  background: #2D2D2D;
  border: 1px solid #4D3F35;
  box-shadow: 0 8px 40px rgba(0,0,0,0.60);
}
:root.darkMode .login-card .logo-area i { color: #8D7B68; }
:root.darkMode .room-card {
  background: #2D2D2D;
  border: 1px solid #4D3F35;
}
:root.darkMode .room-card:hover {
  border-color: #8D7B68;
  box-shadow: 0 6px 20px rgba(0,0,0,0.50);
  transform: translateY(-2px);
}
:root.darkMode .chat-area .msg.system .msg-bubble {
  background: rgba(141,123,104,0.10);
  border: 1px solid rgba(141,123,104,0.22);
  color: #8C7A6B;
}
:root.darkMode ::-webkit-scrollbar-thumb { background: #4D3F35; }
:root.darkMode ::-webkit-scrollbar-thumb:hover { background: #8D7B68; }
:root.darkMode .mobile-bottom-nav {
  background: #242424;
  border-top: 1px solid #4D3F35;
}
:root.darkMode .input-field {
  background: #1A1A1A;
  border-color: #4D3F35;
  color: #E0D5C1;
}
:root.darkMode .input-field:focus {
  border-color: #8D7B68;
  box-shadow: 0 0 0 3px rgba(141,123,104,0.15);
}
: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 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root.lavenderMode .header {
  background: linear-gradient(180deg, #201C40 0%, #1C1930 100%);
  border-bottom: 1px solid #4C438E;
  box-shadow: 0 2px 12px rgba(100,80,200,0.25);
}
:root.lavenderMode .header .logo i { color: #A78BFA; }
:root.lavenderMode .header .logo span,
:root.lavenderMode .header .tools button,
:root.lavenderMode .header .user-info .nick,
:root.lavenderMode .header .user-info .points,
:root.lavenderMode .header .back-btn,
:root.lavenderMode .welcome-title { color: #E9D5FF !important; }
:root.lavenderMode .welcome-sub { color: #A78BFA !important; }
:root.lavenderMode .header .tools button:hover {
  background: rgba(167,139,250,0.15) !important;
  color: #A78BFA !important;
}
:root.lavenderMode .side-panel {
  background: linear-gradient(180deg, #1C1930 0%, #181530 100%);
  border-right: 1px solid #4C438E;
}
:root.lavenderMode .side-panel .panel-header {
  background: #201C40;
  border-bottom: 1px solid #4C438E;
}
:root.lavenderMode .chat-area {
  background:
    radial-gradient(circle at 10% 20%, rgba(167,139,250,0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(56,189,248,0.06) 0%, transparent 50%),
    #121020;
}
:root.lavenderMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #C4B5FD 0%, #A78BFA 100%);
  color: #121020;
  border-radius: 16px 4px 16px 16px;
  box-shadow: 0 2px 12px rgba(167,139,250,0.30);
}
:root.lavenderMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #252145;
  border: 1px solid #4C438E;
  border-radius: 4px 16px 16px 16px;
  color: #E9D5FF;
}
:root.lavenderMode .chat-input-bar {
  background: #1C1930;
  border-top: 1px solid #4C438E;
}
:root.lavenderMode .chat-input-bar .msg-input {
  background: #252145;
  border-color: #4C438E;
  color: #E9D5FF;
}
:root.lavenderMode .chat-input-bar .msg-input:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
}
:root.lavenderMode .chat-input-bar .msg-input::placeholder { color: #4A4070; }
:root.lavenderMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  color: #121020;
  box-shadow: 0 3px 12px rgba(167,139,250,0.35);
}
:root.lavenderMode .btn-prime {
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  color: #121020;
  box-shadow: 0 2px 8px rgba(167,139,250,0.30);
}
:root.lavenderMode .floating-side-btn {
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 100%);
  color: #121020;
  box-shadow: 0 4px 20px rgba(167,139,250,0.40);
}
:root.lavenderMode .modal-header {
  background: linear-gradient(135deg, #201C40 0%, #1C1930 100%);
  border-bottom: 1px solid #4C438E;
}
:root.lavenderMode .modal-header h3 { color: #A78BFA !important; }
:root.lavenderMode .modal-header button { color: #E9D5FF !important; }
:root.lavenderMode .toast {
  background: #252145;
  border-left-color: #A78BFA;
  box-shadow: 0 4px 20px rgba(100,80,200,0.30);
}
:root.lavenderMode .login-card {
  background: #252145;
  border: 1px solid #4C438E;
  box-shadow: 0 8px 40px rgba(100,80,200,0.30);
}
:root.lavenderMode .login-card .logo-area i { color: #A78BFA; }
:root.lavenderMode .room-card {
  background: #252145;
  border: 1px solid #4C438E;
}
:root.lavenderMode .room-card:hover {
  border-color: #A78BFA;
  box-shadow: 0 6px 20px rgba(167,139,250,0.20);
  transform: translateY(-2px);
}
:root.lavenderMode .chat-area .msg.system .msg-bubble {
  background: rgba(167,139,250,0.08);
  border: 1px solid rgba(167,139,250,0.25);
  color: #A78BFA;
}
:root.lavenderMode ::-webkit-scrollbar-thumb { background: #352D5E; }
:root.lavenderMode ::-webkit-scrollbar-thumb:hover { background: #A78BFA; }
:root.lavenderMode .mobile-bottom-nav {
  background: #1C1930;
  border-top: 1px solid #4C438E;
}
:root.lavenderMode .input-field {
  background: #252145;
  border-color: #4C438E;
  color: #E9D5FF;
}
:root.lavenderMode .input-field:focus {
  border-color: #A78BFA;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.15);
}
:root.lavenderMode .input-field::placeholder { color: #4A4070; }
:root.lavenderMode ::selection {
  background: rgba(167,139,250,0.35);
  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 컴포넌트 오버라이드
════════════════════════════════════════════════════════════════════ */
:root.navyMode .header {
  background: linear-gradient(180deg, #778899 0%, #64748B 100%);
  border-bottom: 1px solid #334155;
  box-shadow: 0 2px 12px rgba(0,0,0,0.40);
}
:root.navyMode .header .logo i { color: #60A5FA; }
:root.navyMode .header .logo span,
:root.navyMode .header .tools button,
:root.navyMode .header .user-info .nick,
:root.navyMode .header .user-info .points,
:root.navyMode .header .back-btn,
:root.navyMode .welcome-title,
:root.navyMode .welcome-sub { color: #FFFFFF !important; }
:root.navyMode .header .tools button:hover {
  background: rgba(255,255,255,0.15) !important;
}
:root.navyMode .side-panel {
  background: #1E293B;
  border-right: 1px solid #334155;
}
:root.navyMode .side-panel .panel-header {
  background: #1A2538;
  border-bottom: 1px solid #334155;
}
:root.navyMode .chat-area {
  background:
    radial-gradient(circle at 15% 25%, rgba(59,130,246,0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 75%, rgba(96,165,250,0.04) 0%, transparent 50%),
    #0F172A;
}
:root.navyMode .chat-area .msg.mine .msg-bubble {
  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
  color: #FFFFFF;
  border-radius: 16px 4px 16px 16px;
  box-shadow: 0 2px 10px rgba(59,130,246,0.25);
}
:root.navyMode .chat-area .msg:not(.mine) .msg-bubble {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 4px 16px 16px 16px;
  color: #F1F5F9;
}
:root.navyMode .chat-input-bar {
  background: #1E293B;
  border-top: 1px solid #334155;
}
:root.navyMode .chat-input-bar .msg-input {
  background: #334155;
  border-color: #475569;
  color: #F1F5F9;
}
:root.navyMode .chat-input-bar .msg-input:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
:root.navyMode .chat-input-bar .msg-input::placeholder { color: #475569; }
:root.navyMode .chat-input-bar .send-btn {
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  color: #FFFFFF;
  box-shadow: 0 3px 10px rgba(59,130,246,0.30);
}
:root.navyMode .btn-prime {
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(59,130,246,0.25);
}
:root.navyMode .floating-side-btn {
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(59,130,246,0.35);
}
:root.navyMode .modal-header {
  background: linear-gradient(135deg, #3B4E6A 0%, #2D3E58 100%);
  border-bottom: 1px solid #334155;
}
:root.navyMode .modal-header h3 { color: #60A5FA !important; }
:root.navyMode .modal-header button { color: #F1F5F9 !important; }
:root.navyMode .toast {
  background: #1E293B;
  border-left-color: #3B82F6;
  box-shadow: 0 4px 16px rgba(0,0,0,0.50);
}
:root.navyMode .login-card {
  background: #1E293B;
  border: 1px solid #334155;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
}
:root.navyMode .login-card .logo-area i { color: #3B82F6; }
:root.navyMode .room-card {
  background: #1E293B;
  border: 1px solid #334155;
}
:root.navyMode .room-card:hover {
  border-color: #3B82F6;
  box-shadow: 0 6px 20px rgba(59,130,246,0.15);
  transform: translateY(-2px);
}
:root.navyMode .chat-area .msg.system .msg-bubble {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.22);
  color: #60A5FA;
}
:root.navyMode ::-webkit-scrollbar-thumb { background: #334155; }
:root.navyMode ::-webkit-scrollbar-thumb:hover { background: #3B82F6; }
:root.navyMode .mobile-bottom-nav {
  background: #1E293B;
  border-top: 1px solid #334155;
}
:root.navyMode .input-field {
  background: #334155;
  border-color: #475569;
  color: #F1F5F9;
}
:root.navyMode .input-field:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
:root.navyMode .input-field::placeholder { color: #475569; }


/* ════════════════════════════════════════════════════════════════════
   ⑭  모바일 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: 2px;
    font-size: 9px;
    color: var(--text-tertiary);
    text-decoration: none;
    min-height: 44px;
    cursor: pointer;
    border: none;
    background: none;
    transition: var(--transition);
  }
  .nav-tab i { font-size: 22px; display: block; }
  .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: #FF9E7D; }
.ts-btn[data-theme="dark"]     { background: #5C4D42; }
.ts-btn[data-theme="hitel"]    { background: #0000AA; border-color: #FFFFFF; }
.ts-btn[data-theme="lavender"] { background: #A78BFA; }
.ts-btn[data-theme="rose"]     { background: #FBCFE8; }
.ts-btn[data-theme="navy"]     { background: #3B82F6; }
.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: 차분한 고가구 느낌 유지 */
:root.darkMode .home-logo-btn { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
:root.darkMode .home-logo-btn i, :root.darkMode .home-logo-btn span { color: #BDB76B !important; }
:root.darkMode .home-logo-btn:hover { background: #5C4D42 !important; border-color: #8D7B68 !important; }
:root.darkMode .home-logo-btn:hover i, :root.darkMode .home-logo-btn:hover span { color: #FFFFFF !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: 신비로운 보라 테마 */
:root.lavenderMode .home-logo-btn { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.2); }
:root.lavenderMode .home-logo-btn i, :root.lavenderMode .home-logo-btn span { color: #E9D5FF !important; }
:root.lavenderMode .home-logo-btn:hover { background: #A78BFA !important; }
:root.lavenderMode .home-logo-btn:hover i, :root.lavenderMode .home-logo-btn:hover span { color: #121020 !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: 묵직한 네이비 테마 */
:root.navyMode .home-logo-btn { background: #334155; border-color: #475569; }
:root.navyMode .home-logo-btn i, :root.navyMode .home-logo-btn span { color: #F1F5F9 !important; }
:root.navyMode .home-logo-btn:hover { background: #60A5FA !important; }
:root.navyMode .home-logo-btn:hover i, :root.navyMode .home-logo-btn:hover span { color: #FFFFFF !important; }