/* =========================================================
   Jungle AI — Dark Mode Token Overrides (BuddyBoss 기반)
   파일: assets/css/base/darkmode.css
   설명: html.dark-mode 진입 시, colors.css에 정의된 토큰만 오버라이드
   원칙: JSON(2025-10-20) 기준 매핑된 토큰만 사용. 신규/파생 토큰 금지.
   주의: 섹션 번호로 수정 지시 (예: "3-2번 교체")
   ========================================================= */

html.dark-mode {

  /* ---------------------------------------------------------
     1. Brand / Primary (accent & notice)
     --------------------------------------------------------- */
  /* 1-1. 브랜드 메인 */
  --bb-primary-color: #6E8CFB; /* 라이트:#5856D6 → 다크는 가독성↑ 밝은 톤 */

  /* 1-2. 공지/알림(디폴트) */
  --bb-default-notice-color: #6E8CFB;

  /* ---------------------------------------------------------
     2. Body / Content Backgrounds & Borders
     --------------------------------------------------------- */
  /* 2-1. 페이지/본문 */
  --bb-body-background-color: #111111;

  /* 2-2. 콘텐츠/카드 */
  --bb-content-background-color: #1A1A1A;
  --bb-content-alternate-background-color: #1E1E1E;

  /* 2-3. 경계(보더) */
  --bb-content-border-color: #333333;

  /* 2-4. 커버 이미지(헤더 커버 등) */
  --bb-cover-image-background-color: #2B2B2B;

  /* ---------------------------------------------------------
     3. Typography
     --------------------------------------------------------- */
  /* 3-1. 헤딩 */
  --bb-headings-color: #FFFFFF;
  --bb-headings-color-rgb: 242, 242, 242;

  /* 3-2. 본문 */
  --bb-body-text-color: #DDDDDD;

  /* 3-3. 보조/메타 */
  --bb-alternate-text-color: #AAAAAA;

  /* ---------------------------------------------------------
     4. Buttons (Primary / Secondary)
     --------------------------------------------------------- */
  /* 4-1. Primary 버튼 */
  --bb-primary-button-background-regular: #6E8CFB;
  --bb-primary-button-background-hover:   #5B52FF;
  --bb-primary-button-border-regular:     #6E8CFB;
  --bb-primary-button-border-hover:       #5B52FF;
  --bb-primary-button-text-regular:       #FFFFFF;
  --bb-primary-button-text-hover:         #FFFFFF;

  /* 4-2. Secondary 버튼 */
  --bb-secondary-button-background-regular: #2A2A2A;
  --bb-secondary-button-background-hover:   #3E3E3E;
  --bb-secondary-button-border-regular:     #2A2A2A;
  --bb-secondary-button-border-hover:       #3E3E3E;
  --bb-secondary-button-text-regular:       #EEEEEE;
  --bb-secondary-button-text-hover:         #FFFFFF;

  /* ---------------------------------------------------------
     5. Header
     --------------------------------------------------------- */
  --bb-header-background:           #1E1E1E;
  --bb-header-alternate-background: #262626;
  --bb-header-links:                #E0E0E0; /* 가독성 향상 (라이트: #1E2132) */
  --bb-header-links-hover:          #FFD600; /* 다크에서 시인성 높은 하이라이트 */

  /* ---------------------------------------------------------
     6. Sidenav (BuddyPanel)
     --------------------------------------------------------- */
  --bb-sidenav-background: #1E1E1E;

  /* 6-1. 텍스트 상태 */
  --bb-sidenav-text-regular: #CCCCCC;
  --bb-sidenav-text-hover:   #FFD600;
  --bb-sidenav-text-active:  #FFFFFF;

  /* 6-2. 메뉴 배경 상태 */
  --bb-sidenav-menu-background-color-regular: #1E1E1E;
  --bb-sidenav-menu-background-color-hover:   #2A2A2A;
  --bb-sidenav-menu-background-color-active:  #333333;

  /* 6-3. 카운트(Badge) 색상 */
  --bb-sidenav-count-text-color-regular:        #CCCCCC;
  --bb-sidenav-count-text-color-hover:          #FFFFFF;
  --bb-sidenav-count-text-color-active:         #3E34FF;
  --bb-sidenav-count-background-color-regular:  #2A2A2A;
  --bb-sidenav-count-background-color-hover:    #3E34FF;
  --bb-sidenav-count-background-color-active:   #FFFFFF;

  /* ---------------------------------------------------------
     7. Footer
     --------------------------------------------------------- */
  --bb-footer-background:        #151515;
  --bb-footer-widget-background: #151515;
  --bb-footer-text-color:        #CCCCCC;
  --bb-footer-menu-link-color-regular: #AAAAAA;
  --bb-footer-menu-link-color-hover:   #FFD600;
  --bb-footer-menu-link-color-active:  #FFFFFF;

  /* ---------------------------------------------------------
     8. Admin / Login & Register
     --------------------------------------------------------- */
  /* 8-1. Admin 화면 */
  --bb-admin-screen-bgr-color: #1A1A1A;
  --bb-admin-screen-txt-color: #DDDDDD;

  /* 8-2. 로그인/가입 */
  --bb-login-register-link-color-regular:             #AAAAAA;
  --bb-login-register-link-color-hover:               #6E8CFB;
  --bb-login-register-button-background-color-regular:#3E34FF;
  --bb-login-register-button-background-color-hover:  #5B52FF;
  --bb-login-register-button-border-color-regular:    #3E34FF;
  --bb-login-register-button-border-color-hover:      #5B52FF;
  --bb-login-register-button-text-color-regular:      #FFFFFF;
  --bb-login-register-button-text-color-hover:        #FFFFFF;

  /* ---------------------------------------------------------
     9. Labels / Tooltip
     --------------------------------------------------------- */
  --bb-label-background-color: #333333;
  --bb-label-text-color:       #FFD600;

  --bb-tooltip-background:     #2A2A2A;
  --bb-tooltip-color:          #FFFFFF;

  /* ---------------------------------------------------------
     10. Status Colors (Notices)
     --------------------------------------------------------- */
  --bb-success-color: #4DC96E;
  --bb-warning-color: #FFC107;
  --bb-danger-color:  #F94C3E;
}
/* 끝: colors.css에 존재하는 토큰만 오버라이드 */

/* =========================================================
   WP Login — "Log In" Button (Light / Dark Mode)
   ========================================================= */
html.dark-mode #loginform #wp-submit {
  background-color: var(--bb-primary-button-background-regular) !important;
  color: var(--bb-secondary-button-text-regular) !important;
  border: 1px solid var(--bb-primary-button-background-regular) !important;
}

html.dark-mode #loginform #wp-submit:hover {
  background-color: var(--bb-primary-button-background-hover) !important;
  color: var(--bb-secondary-button-text-hover) !important;
  border-color: var(--bb-primary-button-background-hover) !important;
}

/* =========================================================
   WP Lost Password — Submit Button Style
   ========================================================= */
html.dark-mode #lostpasswordform #wp-submit {
  background-color: var(--bb-primary-button-background-regular) !important;
  color: var(--bb-secondary-button-text-regular) !important;
  border: 1px solid var(--bb-primary-button-background-regular) !important;
}

html.dark-mode #lostpasswordform #wp-submit:hover {
  background-color: var(--bb-primary-button-background-hover) !important;
  color: var(--bb-secondary-button-text-hover) !important;
  border-color: var(--bb-primary-button-background-hover) !important;
}

html.dark-mode .notice.notice-info.message {
  background-color: var(--bb-content-background-color) !important;
  border-color: var(--bb-content-border-color) !important;
  color: var(--bb-body-text-color) !important;
}

/*=========================================
 컨텐츠 영역 공통 배경
  ========================================= */
.ja-single-contentbg::before {
  background-color: var(--bb-content-alternate-background-color) !important;
}

/* ========================================
   Header Search Overlay Background
   ======================================== */
.header-search-wrap {
  background-color: var(--bb-body-background-color) !important;
}

/* ============================================
   📨 Direct Message Thread Header Fix
   ============================================ */
html.dark-mode .single-message-thread-header,
.single-message-thread-header {
  background-color: var(--bb-content-background-color) !important;
  border-bottom: 1px solid var(--bb-content-border-color) !important;
}

/* ---------------------------------------------------------
    Messages — Thread Card Background (::before fix)
   --------------------------------------------------------- */
/* Light Mode: 기존 그대로 유지 */
.bb-template-v2 #message-threads .current > a {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), var(--bb-primary-color);
}

/* Dark Mode: 어두운 투명도 + 동일 토큰 구조 유지 */
html.dark-mode .bb-template-v2 #message-threads .current > a {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), var(--bb-primary-color);
}

/* ============================================
   Profile Header Fix 
   ============================================ */
html.dark-mode .entry-header.profile-loop-header.profile-header {
  background-color: var(--bb-content-background-color) !important;
}

/* ============================================
   Results Group Header — Background Token 연결
   ============================================ */
html.dark-mode .results-group-header.clearfix {
  background-color: var(--bb-content-background-color) !important;
}

/* ============================================
   Results Group Footer — Background Token 연결
   ============================================ */
html.dark-mode .results-group-footer {
  background-color: var(--bb-content-background-color) !important;
}


/* ============================================
   Elementor Tabs — Dark Mode (정리본)
   ============================================ */
html.dark-mode .e-n-tabs-heading {
  border-bottom: none !important;
}

/* 기본 탭 버튼 */
html.dark-mode .e-n-tabs-heading .e-n-tab-title {
  position: relative;
  background: transparent !important;
  border: none !important;
  color: var(--bb-alternate-text-color) !important;
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* 하단 라인 (텍스트 길이 기준) */
html.dark-mode .e-n-tabs-heading .e-n-tab-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--bb-primary-color);
  transform: translateX(-50%);
  transition: width 0.3s ease, background-color 0.25s ease;
}

/* 활성 탭 */
html.dark-mode .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] {
  color: var(--bb-primary-button-text-hover) !important;
}
html.dark-mode .e-n-tabs-heading .e-n-tab-title[aria-selected="true"]::after {
  width: 60%;
}

/* 호버 효과 */
html.dark-mode .e-n-tabs-heading .e-n-tab-title:hover {
  opacity: 0.9 !important;
}
html.dark-mode .e-n-tabs-heading .e-n-tab-title:hover::after {
  width: 60%;
  background-color: rgba(var(--bb-primary-color-rgb), 0.4);
}

/* 포커스 제거 */
html.dark-mode .e-n-tabs-heading .e-n-tab-title:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 접근성: 키보드탭 포커스 시만 윤곽선 */
html.dark-mode body.user-is-tabbing .e-n-tabs-heading .e-n-tab-title:focus {
  outline: 2px solid var(--bb-primary-color);
  outline-offset: 2px;
}

/* ============================================
   Scrap Count — Dark Mode Text Color
   ============================================ */
html.dark-mode .scrap-count {
  color: var(--bb-body-text-color) !important;
}

/* =========================================================
   BuddyBoss Modal Overlay — Dark Mode Fix
   ========================================================= */
html.dark-mode .bb-modal-overlay {
  background-color: rgba(0, 0, 0, 0.75) !important; /* 어두운 반투명 */
  backdrop-filter: blur(2px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* =========================================================
   BuddyBoss SSO Button — Dark Mode
   ========================================================= */
html.dark-mode .bb-sso-action-button {
  background-color: var(--bb-secondary-button-background-hover) !important; /* 약간 더 밝은 톤 */
  color: var(--bb-primary-button-text-hover) !important; /* 흰색 계열 텍스트 */
  border: 1px solid var(--bb-content-border-color);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Hover 효과 */
html.dark-mode .bb-sso-action-button:hover {
  background-color: var(--bb-primary-color) !important;
  color: var(--bb-primary-button-text-hover) !important;
  border-color: var(--bb-primary-color);
}


/* =========================================================
   Formidable RichText Field — Dark Mode
   기반: Jungle AI darkmode.css
   적용대상: html.dark-mode (BuddyBoss + TinyMCE 환경)
   ========================================================= */
html.dark-mode {

  /* 1️⃣ 기본 구조 */
  .wp-editor-wrap,
  .mce-tinymce,
  .mce-panel {
    background-color: var(--bb-content-background-color);
    border-color: var(--bb-content-border-color);
    color: var(--bb-body-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* 1-1️⃣ Editor Tools (상단 "Add Media", Visual/Code 탭 감싸는 영역) */
  #wp-field_ln2ku-editor-tools,
  .wp-editor-tools {
    background-color: var(--bb-body-background-color) !important; /* ✅ 요청사항 */
    border-bottom: 1px solid var(--bb-content-border-color);
    color: var(--bb-body-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* 2️⃣ 툴바 */
  .mce-toolbar-grp,
  .quicktags-toolbar {
    background-color: var(--bb-sidenav-background);
    border-bottom: 1px solid var(--bb-content-border-color);
  }

  /* 툴바 버튼 기본 */
  .mce-btn button,
  .quicktags-toolbar .button {
    background-color: var(--bb-secondary-button-background-regular);
    border: 1px solid var(--bb-content-border-color);
    color: var(--bb-secondary-button-text-regular);
    transition: var(--ss-animation-timing);
  }

  /* 툴바 버튼 hover / active */
  .mce-btn:hover button,
  .mce-active button,
  .quicktags-toolbar .button:hover {
    background-color: var(--bb-secondary-button-background-hover);
    border-color: var(--bb-secondary-button-border-hover);
    color: var(--bb-secondary-button-text-hover);
  }

  /* 툴바 아이콘 */
  .mce-ico {
    color: var(--bb-alternate-text-color);
    transition: color 0.2s ease;
  }
  .mce-btn:hover .mce-ico,
  .mce-active .mce-ico {
    color: var(--bb-header-links-hover); /* 노란 하이라이트로 통일 */
  }

  /* 3️⃣ Visual / Code 탭 */
  .wp-switch-editor {
    position: relative;
    background-color: var(--bb-content-background-color);
    color: var(--bb-alternate-text-color);
    border: 1px solid var(--bb-content-border-color);
    font-weight: 500;
    transition: var(--ss-animation-timing);
  }

  /* 활성화 상태 */
  .wp-switch-editor[aria-pressed="true"] {
    background-color: var(--bb-primary-color);
    color: var(--bb-primary-button-text-hover);
    border-color: var(--bb-primary-color);
  }

  /* hover 상태 */
  .wp-switch-editor:hover {
    color: var(--bb-primary-color);
    border-color: var(--bb-primary-color);
  }

  /* 탭 아래 강조선 (::before 효과) */
  .wp-switch-editor::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: transparent;
    transition: var(--ss-animation-timing);
  }
  .wp-switch-editor[aria-pressed="true"]::before {
    background-color: var(--bb-primary-color);
  }

  /* 4️⃣ 편집 영역 (iframe 포함) */
  .mce-edit-area,
  iframe[id$="_ifr"] {
    background-color: var(--bb-body-background-color) !important;
    border-top: 1px solid var(--bb-content-border-color);
  }

  /* iframe 내부 body */
  iframe[id$="_ifr"] html,
  iframe[id$="_ifr"] body {
    background-color: var(--bb-body-background-color) !important;
    color: var(--bb-body-text-color) !important;
    font-size: 16px;
    line-height: 1.7;
    font-family: var(--e-a-font-family, "Roboto", sans-serif);
  }

  /* 링크 스타일 */
  iframe[id$="_ifr"] a {
    color: var(--bb-header-links-hover);
    text-decoration: underline;
  }
  iframe[id$="_ifr"] a:hover {
    color: var(--bb-primary-color);
  }

  /* 5️⃣ Statusbar */
  .mce-statusbar {
    background-color: var(--bb-content-alternate-background-color);
    border-top: 1px solid var(--bb-content-border-color);
    color: var(--bb-alternate-text-color);
  }

  /* 6️⃣ Scrollbar */
  .mce-edit-area::-webkit-scrollbar {
    width: 8px;
  }
  .mce-edit-area::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 4px;
  }
  .mce-edit-area::-webkit-scrollbar-track {
    background-color: #1A1A1A;
  }

  /* 7️⃣ 포커스 상태 강조 */
  .mce-btn:focus-within button,
  .wp-switch-editor:focus-within {
    outline: 1px solid var(--bb-primary-color);
    box-shadow: 0 0 0 2px rgba(var(--bb-primary-color-rgb), 0.3);
  }

  /* 8️⃣ 비활성화 상태 */
  .mce-btn.mce-disabled button,
  .quicktags-toolbar .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--bb-content-alternate-background-color);
    border-color: var(--bb-content-border-color);
    color: var(--bb-alternate-text-color);
  }

  /* 9️⃣ Tooltip */
  .mce-tooltip,
  .mce-tooltip .mce-tooltip-inner {
    background-color: var(--bb-tooltip-background);
    color: var(--bb-tooltip-color);
    border-radius: 4px;
    border: 1px solid var(--bb-content-border-color);
  }

  /* 🔟 기타 세부 전환 */
  .mce-container,
  .mce-flow-layout {
    transition: background-color 0.25s ease, color 0.25s ease;
  }
}

/* =========================================================
   Formidable File Upload (Dropzone) — Dark Mode Fix (v2)
   ========================================================= */
html.dark-mode {
  /* 1️⃣ 기본 Dropzone */
  .frm_dropzone,
  .frm_dropzone.dz-clickable,
  .frm_dropzone.dz-started {
    background-color: var(--bb-content-background-color) !important;
    border: 2px dashed var(--bb-content-border-color) !important;
    color: var(--bb-body-text-color) !important;
    border-radius: var(--bb-block-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  /* 2️⃣ Hover & Drag 상태 */
  .frm_dropzone:hover,
  .frm_dropzone.dz-drag-hover {
    background-color: var(--bb-body-background-color) !important;
    border-color: var(--bb-primary-color) !important;
    color: var(--bb-primary-color) !important;
  }

  /* 3️⃣ 내부 메시지 영역 */
  .frm_dropzone .dz-message {
    background: transparent !important;
    color: var(--bb-body-text-color) !important;
  }

  /* 4️⃣ 업로드 텍스트 */
  .frm_dropzone .frm_upload_text,
  .frm_dropzone .frm_compact_text,
  .frm_dropzone .frm_small_text {
    color: var(--bb-alternate-text-color) !important;
    transition: color 0.3s ease;
  }

  /* Hover 시 텍스트 강조 */
  .frm_dropzone:hover .frm_upload_text,
  .frm_dropzone:hover .frm_compact_text,
  .frm_dropzone:hover .frm_small_text {
    color: var(--bb-primary-color) !important;
  }

  /* 5️⃣ 아이콘 */
  .frm_dropzone .frmsvg path {
    fill: var(--bb-alternate-text-color) !important;
    transition: fill 0.3s ease;
  }
  .frm_dropzone:hover .frmsvg path,
  .frm_dropzone.dz-drag-hover .frmsvg path {
    fill: var(--bb-primary-color) !important;
  }

  /* 6️⃣ 버튼 (클릭 업로드 영역) */
  .frm_dropzone button {
    background: transparent !important;
    color: var(--bb-body-text-color) !important;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }
  .frm_dropzone button:hover {
    color: var(--bb-primary-color) !important;
  }

  /* 7️⃣ 에러/성공 상태 */
  .frm_dropzone.dz-error {
    background-color: rgba(var(--bb-danger-color-rgb), 0.08) !important;
    border-color: var(--bb-danger-color) !important;
  }
  .frm_dropzone.dz-success {
    background-color: rgba(var(--bb-success-color-rgb), 0.08) !important;
    border-color: var(--bb-success-color) !important;
  }

  /* 8️⃣ 업로드된 파일 썸네일 */
  .frm_dropzone .dz-preview {
    background-color: var(--bb-content-alternate-background-color) !important;
    border: 1px solid var(--bb-content-border-color) !important;
    color: var(--bb-body-text-color) !important;
  }

  /* 9️⃣ 기본 transition */
  .frm_dropzone,
  .frm_dropzone * {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
}

/* =========================================================
   Formidable — SlimSelect Dropdown (Dark Mode)
   ========================================================= */
html.dark-mode {
  /* 1️⃣ 드롭다운 컨테이너 */
  .ss-content {
    background-color: var(--bb-content-background-color) !important;
    border: 1px solid var(--bb-content-border-color) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6);
    color: var(--bb-body-text-color) !important;
  }

  /* 2️⃣ 검색창 */
  .ss-content .ss-search {
    background-color: var(--bb-body-background-color) !important;
    border-bottom: 1px solid var(--bb-content-border-color) !important;
  }

  .ss-content .ss-search input {
    background-color: var(--bb-body-background-color) !important;
    color: var(--bb-body-text-color) !important;
    border: none !important;
  }

  .ss-content .ss-search input::placeholder {
    color: var(--bb-alternate-text-color) !important;
    opacity: 0.7;
  }

  /* 3️⃣ 리스트 영역 */
  .ss-content .ss-list {
    background-color: var(--bb-content-background-color) !important;
    color: var(--bb-body-text-color) !important;
  }

  /* 4️⃣ 옵션 아이템 */
  .ss-content .ss-option {
    background-color: transparent !important;
    color: var(--bb-body-text-color) !important;
    transition: background-color 0.2s ease;
  }

  .ss-content .ss-option:hover,
  .ss-content .ss-option[aria-selected="true"] {
    background-color: var(--bb-secondary-button-background-hover) !important;
    color: var(--bb-secondary-button-text-hover) !important;
  }

  /* 5️⃣ 스크롤바 */
  .ss-list::-webkit-scrollbar {
    width: 8px;
  }
  .ss-list::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
  }
  .ss-list::-webkit-scrollbar-track {
    background: #1A1A1A;
  }

  /* 6️⃣ 투명 배경 방지 (드롭다운 외곽) */
  .frm_slimselect {
    background-color: var(--bb-body-background-color) !important;
  }
}

/* =========================================================
   Formidable Input Autofill (Chrome / Edge / Safari)
   ========================================================= */
html.dark-mode input:-webkit-autofill,
html.dark-mode input:-webkit-autofill:hover,
html.dark-mode input:-webkit-autofill:focus,
html.dark-mode textarea:-webkit-autofill,
html.dark-mode select:-webkit-autofill {
  /* 브라우저 기본 흰색 제거 */
  -webkit-box-shadow: 0 0 0px 1000px var(--bb-body-background-color) inset !important;
  box-shadow: 0 0 0px 1000px var(--bb-body-background-color) inset !important;

  /* 텍스트 색상 */
  -webkit-text-fill-color: var(--bb-body-text-color) !important;

  /* 전환 효과 */
  transition: background-color 0s ease-in-out, color 0s ease-in-out;
}

/* 자동완성 dropdown (suggestion) 배경 */
html.dark-mode input::-webkit-autofill-preview,
html.dark-mode input::-webkit-autofill-selected {
  background-color: var(--bb-content-background-color) !important;
  color: var(--bb-body-text-color) !important;
}


/* =========================================================
   WordPress "Add Media" Modal — Dark Mode (Jungle AI)
   ========================================================= */
html.dark-mode .media-modal-backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important; /* 어두운 반투명 배경 */
  backdrop-filter: blur(3px);
}

/* 메인 모달 컨테이너 */
html.dark-mode .media-modal,
html.dark-mode .media-modal-content {
  background-color: var(--bb-body-background-color) !important;
  color: var(--bb-body-text-color) !important;
  border: 1px solid var(--bb-content-border-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 상단 헤더 및 탭 메뉴 */
html.dark-mode .media-frame-title,
html.dark-mode .media-frame-router,
html.dark-mode .media-menu {
  background-color: var(--bb-content-background-color);
  border-bottom: 1px solid var(--bb-content-border-color);
  color: var(--bb-body-text-color);
}

/* 탭 버튼 */
html.dark-mode .media-menu-item {
  background-color: var(--bb-content-background-color) !important;
  color: var(--bb-body-text-color) !important;
  border: 1px solid var(--bb-content-border-color) !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 탭- Hover */
html.dark-mode .media-menu-item:hover {
  background-color: var(--bb-secondary-button-background-hover) !important;
  color: var(--bb-primary-button-text-hover) !important;
}

/* 탭-Active (현재 Media Library 탭) */
html.dark-mode .media-menu-item.active,
html.dark-mode .media-menu-item[aria-selected="true"] {
  background-color: var(--bb-secondary-button-background-hover) !important;
  color: var(--bb-primary-button-text-hover) !important;
  border-color: var(--bb-content-border-color) !important;
}


/* 좌측 메뉴 영역 */
html.dark-mode .media-frame-menu {
  background-color: var(--bb-content-alternate-background-color);
  border-right: 1px solid var(--bb-content-border-color);
}

/* 파일 목록 영역 */
html.dark-mode .attachments-browser,
html.dark-mode .media-frame-content {
  background-color: var(--bb-body-background-color);
  color: var(--bb-body-text-color);
}

/* 툴바 및 필터 영역 */
html.dark-mode .media-toolbar {
  background-color: var(--bb-content-background-color);
  border-bottom: 1px solid var(--bb-content-border-color);
  color: var(--bb-body-text-color);
}

html.dark-mode select.attachment-filters,
html.dark-mode input.search {
  background-color: var(--bb-content-alternate-background-color);
  color: var(--bb-body-text-color);
  border: 1px solid var(--bb-content-border-color);
}

/* 첨부 썸네일 */
html.dark-mode .attachment-preview {
  background-color: var(--bb-content-alternate-background-color);
  border: 1px solid var(--bb-content-border-color);
}

html.dark-mode .attachment.selected .attachment-preview {
  border-color: var(--bb-primary-color);
  box-shadow: 0 0 0 2px rgba(var(--bb-primary-color-rgb), 0.3);
}

/* 사이드바(Attachment Details) */
html.dark-mode .media-sidebar {
  background-color: var(--bb-content-background-color);
  border-left: 1px solid var(--bb-content-border-color);
  color: var(--bb-body-text-color);
}

html.dark-mode .media-sidebar input,
html.dark-mode .media-sidebar textarea {
  background-color: var(--bb-body-background-color);
  border: 1px solid var(--bb-content-border-color);
  color: var(--bb-body-text-color);
}

/* 하단 버튼 툴바 */
html.dark-mode .media-frame-toolbar {
  background-color: var(--bb-content-background-color);
  border-top: 1px solid var(--bb-content-border-color);
}

html.dark-mode .media-button.button-primary {
  background-color: var(--bb-primary-color);
  color: var(--bb-primary-button-text-hover);
  border: 1px solid var(--bb-primary-color);
  transition: all 0.2s ease;
}

html.dark-mode .media-button.button-primary:hover {
  background-color: var(--bb-primary-button-background-hover);
  color: var(--bb-primary-button-text-hover);
  border-color: var(--bb-primary-button-border-hover);
}

/* Close 버튼 */
html.dark-mode .media-modal-close {
  background-color: transparent;
  border-radius: 50%;
  transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark-mode .media-modal-close .media-modal-icon::before {
  color: var(--bb-body-text-color);
  transition: color 0.25s ease;
}

/* hover 시 회색 하이라이트 (다크 전용) */
html.dark-mode .media-modal-close:hover {
  background-color: var(--bb-content-border-color);
}

html.dark-mode .media-modal-close:hover .media-modal-icon::before {
  color: var(--bb-primary-button-text-hover);
}


/* Scrollbar */
html.dark-mode .attachments-browser::-webkit-scrollbar {
  width: 8px;
}
html.dark-mode .attachments-browser::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: 4px;
}
html.dark-mode .attachments-browser::-webkit-scrollbar-track {
  background-color: #1A1A1A;
}

/*Attachment Display Settings  select dropdown */
html.dark-mode .attachment-display-settings select {
  background-color: var(--bb-content-background-color) !important;
  color: var(--bb-body-text-color) !important;
  border: 1px solid var(--bb-content-border-color) !important;
  border-radius: 4px;
  padding: 6px 10px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  appearance: none; /* 시스템 기본 스타일 제거 */
}

/* Hover / Focus 시 */
html.dark-mode .attachment-display-settings select:hover,
html.dark-mode .attachment-display-settings select:focus {
  background-color: var(--bb-secondary-button-background-hover) !important;
  border-color: var(--bb-primary-color) !important;
  color: var(--bb-primary-button-text-hover) !important;
  outline: none;
}

/* ✅ 펼쳐진 dropdown 내부 옵션 */
html.dark-mode .attachment-display-settings select option {
  background-color: var(--bb-content-background-color) !important;
  color: var(--bb-body-text-color) !important;
}

/* 호버된 옵션 */
html.dark-mode .attachment-display-settings select option:checked,
html.dark-mode .attachment-display-settings select option:hover {
  background-color: var(--bb-secondary-button-background-hover) !important;
  color: var(--bb-primary-button-text-hover) !important;
}

/* =========================================================
   Notifications Action Icons — Dark Mode Fix
   ========================================================= */
html.dark-mode .actions .dashicons {
  color: var(--bb-alternate-text-color) !important;
  transition: color 0.2s ease;
}

/* Hover 시 강조 (가시성 향상용) */
html.dark-mode .actions a:hover .dashicons {
  color: var(--bb-header-links-hover) !important; /* 예: 노란 하이라이트 */
}

/* =========================================================
   FacetWP Search Icon (PNG-based) — Dark / Light Mode
   ========================================================= */

/* 🌑 다크모드: 흰색으로 반전 */
html.dark-mode .facetwp-icon::before {
  filter: invert(100%) brightness(200%) contrast(90%);
  transition: filter 0.25s ease;
}