/* ============================================================
   지락실닷컴 다크 모드 & 전체메뉴 리디자인
   Dark Mode System + Fullmenu Redesign
   ============================================================ */

/* ── 테마 전환 트랜지션: 핵심 요소만 적용 ── */
body,
.site-header,
.header-search,
.header-search-mobile,
.header-search-mobile-inner,
.header-search-toggle,
.header-search-btn,
.header-nav-link,
.header-login-btn,
.header-nav-user,
.nav-menu-inner,
.nav-tag,
.search-bar-inner,
.page-title-bar,
.quiz_title_box,
.backlist,
.sub_btn_box,
.sub_btn_box_best,
.box_shadow_list,
.box_shadow_boardlist,
.menu_box,
.sub_menu_btn_box,
.sub_menu_btn_box_best,
.more_btn,
.answer_shadow,
.answer_shadow_menu,
.answer_shadow_quiz,
.answer_shadow_comment,
.score,
.score_display,
.score_top_display,
.countdown,
.countdown_display,
.sort-chip,
.list-header-more,
.list-header-title,
.fullmenu-panel,
.fullmenu-header,
.fullmenu-title,
.fullmenu-close,
.fullmenu-item,
.fullmenu-tags,
.linkpage,
.rollingbanner,
.modal-content,
.modal-header,
.panel-default,
.panel-heading,
.form-control,
.top_box,
.upload_layer {
  transition: background-color 0.22s ease, color 0.2s ease, border-color 0.22s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* ─────────────────────────────────────────
   CSS 변수 시스템
   (jiraksil.css :root는 다크 기본값 → 여기서 라이트 기본 + 다크 명시 재정의)
───────────────────────────────────────── */

/* 라이트 모드 (기본값 - 시스템 기본 또는 data-theme="light") */
:root,
[data-theme="light"] {
  --bg:         #f6f7fb;
  --panel:      #ffffff;
  --card:       #ffffff;
  --border:     rgba(0,0,0,.08);
  --text:       rgba(0,0,0,.88);
  --muted:      rgba(0,0,0,.55);
  --shadow:     0 4px 16px rgba(0,0,0,.08);
  --chip:       rgba(0,0,0,.06);
  --chipBorder: rgba(0,0,0,.10);
  --primary:    #4f8cff;
  --danger:     #ff4d4f;
  --r:          13px;
  --gap:        14px;
}

/* 다크 모드 (data-theme="dark") */
[data-theme="dark"] {
  --bg:         #3b465b;
  --panel:      #414d63;
  --card:       #49576f;
  --border:     rgba(255,255,255,.14);
  --text:       rgba(245,247,255,.95);
  --muted:      rgba(232,237,250,.68);
  --shadow:     0 8px 28px rgba(0,0,0,.25);
  --chip:       rgba(255,255,255,.13);
  --chipBorder: rgba(255,255,255,.18);
  --primary:    #78a2ff;
  --danger:     #ff5c5e;
  --surface-1:  #384458;
  --surface-2:  #404d63;
  --surface-3:  #48576f;
  --surface-4:  #50607b;
  --surface-overlay: rgba(50, 60, 80, 0.90);
  --r:          13px;
  --gap:        14px;
}

/* ─────────────────────────────────────────
   다크모드 토글 버튼
───────────────────────────────────────── */
.dark-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #666;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.3s ease !important;
}

.dark-toggle:hover {
  background: #e5e6e8;
  color: #222;
  transform: rotate(20deg);
}

@media (max-width: 640px) {
  .dark-toggle {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
}

/* ─────────────────────────────────────────
   다크모드 스타일 오버라이드
   [data-theme="dark"] 적용
───────────────────────────────────────── */

/* ── 배경 그라데이션 ── */
[data-theme="dark"] body::after {
  background: linear-gradient(135deg, #2e3647 0%, #38445b 45%, #455470 100%) !important;
  animation: gradientShiftDark 30s ease infinite !important;
}

@keyframes gradientShiftDark {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

[data-theme="dark"] body {
  color: #dde1ee;
}

[data-theme="dark"] a {
  color: #a8b8d8;
}

[data-theme="dark"] a:hover {
  color: #c5d3ef;
}

/* ── 다크모드 토글 아이콘 ── */
[data-theme="dark"] .dark-toggle {
  background: rgba(255,255,255,0.09);
  color: #e2c76e;
}

[data-theme="dark"] .dark-toggle:hover {
  background: rgba(255,255,255,0.16);
}

/* ── 헤더 ── */
[data-theme="dark"] .site-header {
  background: rgba(48, 58, 80, 0.94) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 18px rgba(0,0,0,0.28) !important;
}

/* ── PC 검색바 ── */
[data-theme="dark"] .header-search {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .header-search:focus-within {
  background: rgba(255,255,255,0.11);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 3px 14px rgba(0,0,0,0.35);
}

[data-theme="dark"] .header-search .header-search-icon {
  color: rgba(255,255,255,0.28);
}

[data-theme="dark"] .header-search:focus-within .header-search-icon {
  color: rgba(255,255,255,0.55);
}

[data-theme="dark"] .header-search-input {
  color: #dde1ee;
}

[data-theme="dark"] .header-search-input::placeholder {
  color: rgba(255,255,255,0.22);
}

[data-theme="dark"] .header-search-btn {
  background: rgba(255,255,255,0.14);
  color: #dde1ee;
}

[data-theme="dark"] .header-search-btn:hover {
  background: rgba(255,255,255,0.22);
}

/* ── 모바일 검색 토글 ── */
[data-theme="dark"] .header-search-toggle {
  background: rgba(255,255,255,0.08);
  color: #9099b5;
}

[data-theme="dark"] .header-search-toggle:hover {
  background: rgba(255,255,255,0.14);
  color: #dde1ee;
}

/* ── 모바일 검색 확장창 ── */
[data-theme="dark"] .header-search-mobile {
  background: var(--surface-1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.34);
}

[data-theme="dark"] .header-search-mobile-inner {
  background: rgba(255,255,255,0.07);
}

[data-theme="dark"] .header-search-mobile-inner:focus-within {
  background: rgba(255,255,255,0.1);
  border: 1.5px solid rgba(255,255,255,0.18);
}

[data-theme="dark"] .header-search-close {
  color: rgba(255,255,255,0.35);
}

[data-theme="dark"] .header-search-close:hover {
  background: rgba(255,255,255,0.1);
  color: #dde1ee;
}

/* ── 네비 링크 ── */
[data-theme="dark"] .header-nav-link {
  color: #9099b5;
}

[data-theme="dark"] .header-nav-link:hover {
  background: rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .header-login-btn {
  background: rgba(91,127,224,0.25);
  color: #b0c4ef;
}

[data-theme="dark"] .header-login-btn:hover {
  background: rgba(91,127,224,0.38);
  color: #dde8ff;
}

[data-theme="dark"] .header-nav-user {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #c0c8df;
}

[data-theme="dark"] .header-nav-user i {
  color: rgba(255,255,255,0.35);
}

[data-theme="dark"] .header-nav-user:hover {
  background: rgba(255,255,255,0.13);
  color: #dde1ee;
}

/* ── 네비게이션 메뉴 바 ── */
[data-theme="dark"] .nav-menu-inner {
  background: var(--surface-1);
  box-shadow: 0 2px 16px rgba(0,0,0,0.24);
}

[data-theme="dark"] .nav-menu-item {
  color: #6d7899;
}

[data-theme="dark"] .nav-menu-item:hover {
  color: #dde1ee;
  background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .nav-menu-item.active {
  color: #dde1ee;
}

[data-theme="dark"] .nav-menu-item.active::after {
  background: #5b7fe0;
}

[data-theme="dark"] .nav-menu-more {
  color: #6d7899;
  border-left: 1px solid rgba(255,255,255,0.06);
}

[data-theme="dark"] .nav-menu-more:hover {
  background: rgba(255,255,255,0.05);
  color: #dde1ee;
}

/* ── 태그 스크롤 ── */
[data-theme="dark"] .nav-tags-arrow {
  color: #9099b5;
}

[data-theme="dark"] .nav-tags-arrow-left {
  background: linear-gradient(to right, var(--surface-1) 55%, transparent);
}

[data-theme="dark"] .nav-tags-arrow-right {
  background: linear-gradient(to left, var(--surface-1) 55%, transparent);
}

[data-theme="dark"] .nav-tag {
  background: rgba(255,255,255,0.07);
  color: #838aaa;
  border: 1.5px solid rgba(255,255,255,0.08);
}

[data-theme="dark"] .nav-tag:hover {
  background: rgba(255,255,255,0.12);
  color: #c5ccdf;
  transform: translateY(-1px);
}

[data-theme="dark"] .nav-tag.active {
  background: #5b7fe0;
  color: #fff;
  border-color: #5b7fe0;
  box-shadow: 0 2px 10px rgba(91,127,224,0.35);
}

/* ── 리스트 헤더 ── */
[data-theme="dark"] .list-header-title {
  color: #e2e4eb;
}

[data-theme="dark"] .list-header-count {
  color: #4d5470;
}

[data-theme="dark"] .sort-chip {
  background: rgba(255,255,255,0.07);
  color: #7a8099;
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .sort-chip:hover {
  background: rgba(255,255,255,0.12);
  color: #c5ccdf;
}

[data-theme="dark"] .sort-chip.active {
  background: #6b8df0;
  color: #ffffff !important;
  border-color: #7b9af2;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(91,127,224,0.34);
}
[data-theme="dark"] .sort-chip.active:link,
[data-theme="dark"] .sort-chip.active:visited,
[data-theme="dark"] .sort-chip.active:hover,
[data-theme="dark"] .sort-chip.active:active {
  color: #ffffff !important;
}

[data-theme="dark"] .sort-chip.active i {
  color: #fff3a3 !important;
}

[data-theme="dark"] .list-header-more {
  background: rgba(255,255,255,0.07);
  color: #7a8099;
}

[data-theme="dark"] .list-header-more:hover {
  background: rgba(255,255,255,0.12);
  color: #c5ccdf;
}

[data-theme="dark"] .list-header-badge.new {
  background: rgba(46,125,50,0.22);
  color: #66bb6a;
}

[data-theme="dark"] .list-header-badge.hot {
  background: rgba(230,81,0,0.22);
  color: #ff8a50;
}

[data-theme="dark"] .list-header-badge.best {
  background: rgba(94,53,177,0.22);
  color: #b39ddb;
}

/* ── 검색바 (페이지 내) ── */
[data-theme="dark"] .search-bar-inner {
  background: var(--surface-1);
  border: 1.5px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 14px rgba(0,0,0,0.18);
}

[data-theme="dark"] .search-bar-inner:focus-within {
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 4px 22px rgba(0,0,0,0.35);
}

[data-theme="dark"] .search-bar-icon {
  color: rgba(255,255,255,0.24);
}

[data-theme="dark"] .search-bar-inner:focus-within .search-bar-icon {
  color: rgba(255,255,255,0.48);
}

[data-theme="dark"] .search-bar-input {
  color: #dde1ee;
}

[data-theme="dark"] .search-bar-input::placeholder {
  color: rgba(255,255,255,0.2);
}

[data-theme="dark"] .search-bar-btn {
  background: rgba(255,255,255,0.12);
  color: #dde1ee;
}

[data-theme="dark"] .search-bar-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* ── 페이지 타이틀 바 ── */
[data-theme="dark"] .page-title-bar {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}

[data-theme="dark"] .page-back-btn {
  background: rgba(255,255,255,0.07);
  color: #8a92b0;
}

[data-theme="dark"] .page-back-btn:hover {
  background: rgba(255,255,255,0.13);
  color: #dde1ee;
}

[data-theme="dark"] .page-title-text {
  color: #e2e4eb;
}

/* ── 퀴즈 타이틀 바 ── */
[data-theme="dark"] .quiz_title_box {
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.22);
}

[data-theme="dark"] .backlist {
  background: rgba(255,255,255,0.07);
  color: #8a92b0;
}

[data-theme="dark"] .backlist:hover {
  background: rgba(255,255,255,0.13);
  color: #dde1ee;
}

[data-theme="dark"] .quiz_title {
  color: #e2e4eb;
}

/* ── 콘텐츠 카드 (sub_btn_box) ── */
[data-theme="dark"] .sub_btn_box {
  background-color: var(--surface-1);
  color: #dde1ee;
}

[data-theme="dark"] .sub_btn_box:hover {
  background-color: var(--surface-2);
  color: #eef0f8;
}

[data-theme="dark"] .sub_btn_box_best {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,215,80,0.12);
}

[data-theme="dark"] .sub_btn_box_best:hover {
  background-color: var(--surface-3);
  color: #eef0f8;
}

/* ── 그림자 박스 ── */
[data-theme="dark"] .box_shadow_list {
  background-color: var(--surface-1);
  color: #dde1ee;
  box-shadow: 1px 2px 12px rgba(0,0,0,0.26);
}

[data-theme="dark"] .box_shadow_boardlist {
  background-color: var(--surface-1);
  color: #dde1ee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.24);
}

/* ── 답변 박스 ── */
[data-theme="dark"] .answer_shadow {
  background-color: var(--surface-2);
  color: #dde1ee;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.34);
}

[data-theme="dark"] .answer_shadow_menu {
  background-color: var(--surface-2);
  color: #dde1ee;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.34);
}

[data-theme="dark"] .answer_shadow_quiz {
  background-color: var(--surface-2);
  color: #dde1ee;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.34);
}

[data-theme="dark"] .answer_shadow_comment {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .answer_btn {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dde1ee;
}

[data-theme="dark"] .answer_btn_sm {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dde1ee;
}

/* ── 점수/카운트다운 ── */
[data-theme="dark"] .score {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #dde1ee;
}

[data-theme="dark"] .score_display {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #dde1ee;
}

[data-theme="dark"] .score_top_display {
  background-color: var(--surface-2);
  color: #dde1ee;
}

[data-theme="dark"] .countdown {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #dde1ee;
}

[data-theme="dark"] .countdown_display {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #dde1ee;
}

/* ── 메뉴 박스 ── */
[data-theme="dark"] .menu_box {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .menu_box .main_title,
[data-theme="dark"] .menu_box .main_title_sm,
[data-theme="dark"] .menu_box .main_title_lg,
[data-theme="dark"] .menu_box .main_title_font {
  color: #c5ccdf;
}

[data-theme="dark"] .menu_back_text {
  background-color: var(--surface-2);
  color: #9099b5;
}

[data-theme="dark"] .menu_more_text {
  background-color: var(--surface-2);
  color: #9099b5;
}

/* ── 서브메뉴 버튼 ── */
[data-theme="dark"] .sub_menu_btn_box {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .sub_menu_btn_box:hover {
  background-color: var(--surface-2);
  color: #eef0f8;
}

[data-theme="dark"] .sub_menu_btn_box_best {
  background-color: var(--surface-3);
  border: 1px solid rgba(255,215,80,0.15);
  color: #e8dba0;
}

[data-theme="dark"] .sub_menu_btn_box_best:hover {
  background-color: var(--surface-4);
  color: #f0e8c0;
}

/* ── 더보기 버튼 ── */
[data-theme="dark"] .more_btn {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.1);
  color: #8a92b0;
}

[data-theme="dark"] .more_btn:hover {
  background-color: var(--surface-2);
  color: #dde1ee;
}

/* ── 링크페이지 ── */
[data-theme="dark"] .linkpage {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .linkpage span {
  color: #c5ccdf;
}

/* ── 롤링 배너 ── */
[data-theme="dark"] .rollingbanner {
  background-color: var(--surface-1);
}

[data-theme="dark"] .rollingbanner .wrap li a {
  background-color: rgba(255,255,255,0.07);
  color: #a0a8c0;
}

/* ── 정렬 버튼 ── */
[data-theme="dark"] .cat-sort-btn {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #9099b5;
}

[data-theme="dark"] .cat-sort-btn-select {
  background-color: #5b7fe0;
  border-color: #5b7fe0;
  color: #fff;
}

/* ── top_box ── */
[data-theme="dark"] .top_box {
  background-color: var(--surface-1);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 5px 18px rgba(0,0,0,0.26);
}

/* ── upload_layer ── */
[data-theme="dark"] .upload_layer {
  background-color: var(--surface-2);
  color: #dde1ee;
  box-shadow: 0px 8px 30px rgba(0,0,0,0.36);
}

/* ── Bootstrap 모달 ── */
[data-theme="dark"] .modal-content {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="dark"] .modal-header {
  background-color: var(--surface-1);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: #e2e4eb;
}

[data-theme="dark"] .modal-body {
  color: #dde1ee;
}

[data-theme="dark"] .modal-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Bootstrap panel ── */
[data-theme="dark"] .panel-default {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="dark"] .panel-heading {
  background-color: var(--surface-1) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #c5ccdf;
}

[data-theme="dark"] .panel-body {
  color: #dde1ee;
}

[data-theme="dark"] .panel-default-st {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── 폼 인풋 ── */
[data-theme="dark"] .form-control {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dde1ee;
}

[data-theme="dark"] .form-control:focus {
  background-color: var(--surface-2);
  border-color: #5b7fe0;
  color: #dde1ee;
  box-shadow: 0 0 0 3px rgba(91,127,224,0.2);
}

[data-theme="dark"] .form-control::placeholder {
  color: rgba(255,255,255,0.2);
}

/* ── 텍스트 컬러 ── */
[data-theme="dark"] .main_title a {
  color: #dde1ee;
}

[data-theme="dark"] .sub_menu_box_title {
  color: #c5ccdf;
}

[data-theme="dark"] .empty_comment {
  color: #7a8099;
}

[data-theme="dark"] .quiz_doc {
  color: #c5ccdf;
}

[data-theme="dark"] .result_doc {
  color: #c5ccdf;
}

[data-theme="dark"] .qv-author {
  background: var(--surface-overlay);
  color: #a0a8c0;
}

/* ── 빈 박스 ── */
[data-theme="dark"] .blank_box {
  background-color: var(--surface-2);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ── 정보 박스 ── */
[data-theme="dark"] .top_info_box {
  background-color: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
  color: #dde1ee;
}

[data-theme="dark"] .bottom_info .info_box {
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .bottom_info .info_doc {
  color: #8a92b0;
}

/* ── 테이블 ── */
[data-theme="dark"] .table {
  color: #dde1ee;
}

[data-theme="dark"] .table-bordered {
  border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td {
  border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="dark"] .table-custom table,
[data-theme="dark"] .table-custom th,
[data-theme="dark"] .table-custom td {
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── btn_4 계열 ── */
[data-theme="dark"] .btn_4 {
  background-color: var(--surface-2);
  color: #9099b5;
}

[data-theme="dark"] .btn_3 {
  background-color: var(--surface-2);
  color: #9099b5;
}

[data-theme="dark"] .btn_simple {
  background-color: var(--surface-2);
  color: #9099b5;
}

/* ── 멤버 탑 ── */
[data-theme="dark"] .member_top_display {
  background-color: var(--surface-1);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-theme="dark"] .member_top_display span {
  color: #9099b5;
}

/* ── 자동완성 bg (네이티브 인풋) ── */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #dde1ee;
  -webkit-box-shadow: 0 0 0px 1000px var(--surface-2) inset;
}

/* ─────────────────────────────────────────
   전체메뉴 완전 리디자인
───────────────────────────────────────── */

/* ── 오버레이 배경 ── */
.fullmenu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  animation: overlayFadeIn 0.2s ease;
  transition: none !important;
}

.fullmenu-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── 패널 ── */
.fullmenu-panel {
  width: 100%;
  max-width: 580px;
  max-height: 82vh;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: panelSlideUp 0.28s cubic-bezier(0.34, 1.36, 0.64, 1);
  transition: background-color 0.22s ease, box-shadow 0.22s ease !important;
}

@keyframes panelSlideUp {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 헤더 ── */
.fullmenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  background: linear-gradient(145deg, #f8f9fc 0%, #fff 100%);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
  transition: background-color 0.22s ease, border-color 0.22s ease !important;
}

.fullmenu-title {
  font-size: 17px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.4px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.22s ease !important;
}

.fullmenu-title::before {
  content: "✦";
  font-size: 13px;
  color: #5b7fe0;
}

.fullmenu-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #f0f1f4;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.22s ease !important;
}

.fullmenu-close:hover {
  background: #e2e3e8;
  color: #333;
  transform: rotate(90deg);
}

/* ── 바디 ── */
.fullmenu-body {
  overflow-y: auto;
  flex: 1;
  padding: 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}

.fullmenu-body::-webkit-scrollbar {
  width: 4px;
}

.fullmenu-body::-webkit-scrollbar-track {
  background: transparent;
}

.fullmenu-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.1);
  border-radius: 4px;
}

/* ── 그리드 ── */
.fullmenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

/* ── 메뉴 아이템 ── */
.fullmenu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 76px;
  border-radius: 18px;
  background: #f5f6f9;
  color: #555;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease !important;
}

.fullmenu-item::before {
  font-size: 22px;
  line-height: 1;
  display: block;
  transition: transform 0.2s ease !important;
}

.fullmenu-item:hover {
  background: #ebecf2;
  color: #222;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.fullmenu-item:hover::before {
  transform: scale(1.12);
}

.fullmenu-item.active {
  background: linear-gradient(140deg, #5b7fe0 0%, #7b5cc7 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(91,127,224,0.38);
}

.fullmenu-item.active::before {
  filter: brightness(1.1);
}

/* ── 메뉴 아이콘 (nth-child로 순서 고정) ── */
.fullmenu-grid > .fullmenu-item:nth-child(1)::before  { content: "🔥"; }
.fullmenu-grid > .fullmenu-item:nth-child(2)::before  { content: "📝"; }
.fullmenu-grid > .fullmenu-item:nth-child(3)::before  { content: "🧠"; }
.fullmenu-grid > .fullmenu-item:nth-child(4)::before  { content: "👤"; }
.fullmenu-grid > .fullmenu-item:nth-child(5)::before  { content: "🧩"; }
.fullmenu-grid > .fullmenu-item:nth-child(6)::before  { content: "🏆"; }
.fullmenu-grid > .fullmenu-item:nth-child(7)::before  { content: "⚖️"; }
.fullmenu-grid > .fullmenu-item:nth-child(8)::before  { content: "💬"; }
.fullmenu-grid > .fullmenu-item:nth-child(9)::before  { content: "🎭"; }
.fullmenu-grid > .fullmenu-item:nth-child(10)::before { content: "✨"; }
.fullmenu-grid > .fullmenu-item:nth-child(11)::before { content: "🎯"; }
.fullmenu-grid > .fullmenu-item:nth-child(12)::before { content: "👁️"; }
.fullmenu-grid > .fullmenu-item:nth-child(13)::before { content: "🔍"; }
.fullmenu-grid > .fullmenu-item:nth-child(14)::before { content: "💘"; }
.fullmenu-grid > .fullmenu-item:nth-child(15)::before { content: "📢"; }
.fullmenu-grid > .fullmenu-item:nth-child(16)::before { content: "😂"; }
.fullmenu-grid > .fullmenu-item:nth-child(17)::before { content: "📣"; }

/* ── 태그 영역 ── */
.fullmenu-tags {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  transition: border-color 0.22s ease !important;
}

.fullmenu-tags-label {
  font-size: 10px;
  font-weight: 800;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  padding-left: 2px;
}

.fullmenu-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── 다크모드: 전체메뉴 ── */
[data-theme="dark"] .fullmenu-overlay {
  background: rgba(10, 16, 28, 0.56);
}

[data-theme="dark"] .fullmenu-panel {
  background: var(--surface-1);
  box-shadow: 0 28px 80px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.09);
}

[data-theme="dark"] .fullmenu-header {
  background: linear-gradient(145deg, var(--surface-1) 0%, var(--surface-2) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

[data-theme="dark"] .fullmenu-title {
  color: #e2e6f2;
}

[data-theme="dark"] .fullmenu-title::before {
  color: #7b9ce8;
}

[data-theme="dark"] .fullmenu-close {
  background: rgba(255,255,255,0.08);
  color: #8a92b0;
}

[data-theme="dark"] .fullmenu-close:hover {
  background: rgba(255,255,255,0.15);
  color: #dde1ee;
}

[data-theme="dark"] .fullmenu-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
}

[data-theme="dark"] .fullmenu-item {
  background: rgba(255,255,255,0.05);
  color: #8a92b0;
  border: 1.5px solid rgba(255,255,255,0.07);
}

[data-theme="dark"] .fullmenu-item:hover {
  background: rgba(255,255,255,0.1);
  color: #dde1ee;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

[data-theme="dark"] .fullmenu-item.active {
  background: linear-gradient(140deg, #3a5cc7 0%, #5b4a9e 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(91,127,224,0.3);
}

[data-theme="dark"] .fullmenu-tags {
  border-top: 1px solid rgba(255,255,255,0.07);
}

[data-theme="dark"] .fullmenu-tags-label {
  color: rgba(255,255,255,0.25);
}

/* ─────────────────────────────────────────
   반응형 (모바일)
───────────────────────────────────────── */
@media (max-width: 640px) {
  .fullmenu-overlay.active {
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }

  .fullmenu-panel {
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    max-height: 88vh;
    animation: panelSlideUpMobile 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  }

  @keyframes panelSlideUpMobile {
    from { transform: translateY(100%); opacity: 0.5; }
    to   { transform: translateY(0); opacity: 1; }
  }

  .fullmenu-header {
    padding: 16px 16px 14px;
  }

  /* 모바일: 스와이프 핸들 표시 */
  .fullmenu-header::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(0,0,0,0.12);
    border-radius: 4px;
  }

  [data-theme="dark"] .fullmenu-header::before {
    background: rgba(255,255,255,0.15);
  }

  .fullmenu-body {
    padding: 14px;
  }

  .fullmenu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }

  .fullmenu-item {
    height: 66px;
    border-radius: 14px;
    font-size: 11px;
    gap: 5px;
  }

  .fullmenu-item::before {
    font-size: 18px;
  }
}

@media (max-width: 360px) {
  .fullmenu-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fullmenu-item {
    height: 62px;
  }
}

/* ═════════════════════════════════════════════════════════════
   퀴즈 카드 그리드 (quiz-grid / quiz-card) 다크모드
   CSS 변수로 자동 처리되지만 명시적 fallback 추가
═════════════════════════════════════════════════════════════ */

/* 카드 배경·그림자는 var(--card), var(--shadow)로 자동 처리 */
[data-theme="dark"] .quiz-card {
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}

[data-theme="dark"] .quiz-media {
  background: var(--panel);
}

/* 카드 본문 텍스트 */
[data-theme="dark"] .quiz-body {
  background: var(--card);
}

[data-theme="dark"] .quiz-body .quiz-title,
[data-theme="dark"] .quiz-grid .quiz-title {
  color: #dde1ee !important;
}

[data-theme="dark"] .quiz-body .quiz-meta,
[data-theme="dark"] .quiz-grid .quiz-meta {
  color: var(--muted) !important;
}

[data-theme="dark"] .quiz-tag {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}

/* skeleton shimmer 다크모드 */
[data-theme="dark"] .skeleton .quiz-media,
[data-theme="dark"] .skeleton .quiz-title,
[data-theme="dark"] .skeleton .quiz-meta {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,.09),
    rgba(255,255,255,.04));
  background-size: 200% 100%;
}

/* load-more 버튼 */
[data-theme="dark"] .load-more {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

[data-theme="dark"] .load-more:hover {
  background: var(--surface-3);
}

/* ═════════════════════════════════════════════════════════════
   view/ 퀴즈 상세 페이지 다크모드
   (quiz.play.view.php 인라인 <style> 오버라이드)
═════════════════════════════════════════════════════════════ */

/* 메인 카드 래퍼 */
[data-theme="dark"] .quiz-detail-card {
  background: var(--surface-2) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.30) !important;
}

/* 썸네일 placeholder */
[data-theme="dark"] .quiz-hero-img {
  background: var(--surface-1) !important;
}

/* 본문 설명 */
[data-theme="dark"] .quiz-description {
  color: #b8c0d8 !important;
}

/* 설정 패널 */
[data-theme="dark"] .quiz-settings-panel {
  background: var(--surface-1) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

[data-theme="dark"] .settings-title {
  color: #c5ccdf !important;
}

[data-theme="dark"] .settings-title i {
  color: #7a8099 !important;
}

/* 점선 구분선 */
[data-theme="dark"] .settings-group[style*="border-top"] {
  border-top-color: rgba(255,255,255,.1) !important;
}

/* 공통 모던 버튼 */
[data-theme="dark"] .modern-btn {
  background: var(--surface-3) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #9099b5 !important;
}

[data-theme="dark"] .modern-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
}

/* 타이머 버튼 active 상태는 색상 유지 */
[data-theme="dark"] .time-btn.active {
  background: #4CAF50 !important;
  border-color: #4CAF50 !important;
  color: #fff !important;
}

[data-theme="dark"] .time-btn.no-limit.active {
  background: #616161 !important;
  border-color: #616161 !important;
  color: #fff !important;
}

[data-theme="dark"] .time-btn.exam-btn.active {
  background: linear-gradient(135deg, #7c3aed, #9c27b0) !important;
  border-color: #7c3aed !important;
  color: #fff !important;
}

/* 출제모드 안내 박스 */
[data-theme="dark"] .exam-mode-notice {
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(156,39,176,.12)) !important;
  border-left-color: #7c3aed !important;
  color: #c4a8f0 !important;
}

/* 탭 UI */
[data-theme="dark"] .modern-tabs {
  border-bottom: 2px solid rgba(255,255,255,.08) !important;
}

[data-theme="dark"] .modern-tab-btn {
  color: #c5ccdf !important;
}

[data-theme="dark"] .modern-tab-btn:hover {
  background: rgba(255,255,255,.07) !important;
}

[data-theme="dark"] .modern-tab-btn.active {
  background: rgba(255,255,255,.09) !important;
  color: #e2e4eb !important;
}

/* 추천 리스트 카드 (quiz-card-wrap) */
[data-theme="dark"] .quiz-card-wrap {
  background: var(--surface-2) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.26) !important;
}

[data-theme="dark"] .quiz-card-wrap:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,.34) !important;
}

[data-theme="dark"] .quiz-thumb-area {
  background: var(--surface-1) !important;
}

/* view 페이지 내 quiz-title / quiz-meta (인라인 style 오버라이드) */
[data-theme="dark"] .quiz-content .quiz-title,
[data-theme="dark"] .quiz-card-wrap .quiz-title {
  color: #dde1ee !important;
}

[data-theme="dark"] .quiz-content .quiz-meta,
[data-theme="dark"] .quiz-card-wrap .quiz-meta {
  color: #7a8099 !important;
}

/* list-header 내 인라인 color 오버라이드 */
[data-theme="dark"] .list-header-title {
  color: #e2e4eb !important;
}

[data-theme="dark"] .list-header a,
[data-theme="dark"] .list-header-more {
  color: #7a8099 !important;
}

/* ═════════════════════════════════════════════════════════════
   기타 리스트 페이지 공통 다크모드
   (act/best.php, act/quizbest.php 등 공통 클래스)
═════════════════════════════════════════════════════════════ */

/* qz-wrap (리스트 래퍼) */
[data-theme="dark"] .qz-wrap {
  color: var(--text);
}

/* view-count 칩 */
[data-theme="dark"] .quiz-chip.view-count {
  background: rgba(255,255,255,.1);
}

/* 이상형 월드컵 / 밸런스 카드 구분 배경 (hover) */
[data-theme="dark"] .quiz-card--ideal:hover,
[data-theme="dark"] .quiz-card--balance:hover {
  background: var(--surface-3);
}

/* 댓글 영역 (board_comment 등) */
[data-theme="dark"] .board_comment_view {
  color: #c5ccdf;
}

[data-theme="dark"] .board_comment_view img {
  opacity: 0.9;
}

/* act/search.php 검색 결과 */
[data-theme="dark"] .search-result-item {
  background: var(--surface-2);
  border-color: rgba(255,255,255,.07);
  color: #dde1ee;
}

/* ideal view 페이지 */
[data-theme="dark"] .ideal_top_title {
  background-color: rgba(30, 40, 58, .82);
}

/* 밸런스/이상형 플레이 페이지 배경 */
[data-theme="dark"] .balance_view_wrapper,
[data-theme="dark"] .ideal_view_wrapper {
  color: #dde1ee;
}


/* ═════════════════════════════════════════════════════════════
   /view/ 페이지 vd-* 레이아웃 다크모드
═════════════════════════════════════════════════════════════ */

/* 히어로 섹션: 이미 어두운 오버레이로 충분, 라이트모드만 약간 보정 */
[data-theme="dark"] .vd-hero-overlay {
  background: rgba(25, 34, 50, 0.58);
}

/* 태그는 다크 배경 위라 항상 light 스타일 유지 (변경 불필요) */

/* vd-meta-item: 히어로 안에 있으므로 흰 텍스트 유지 */

/* 설정 패널 — var(--panel), var(--border) 이미 적용됨 */
[data-theme="dark"] .exam-mode-notice {
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(156,39,176,.12)) !important;
  border-left-color: #7c3aed !important;
  color: #c4a8f0 !important;
}

/* 공유 영역 */
[data-theme="dark"] .vd-share-row {
  background: var(--panel);
  border-color: var(--border);
}

/* 인기 퀴즈 사이드바 — var() 이미 적용됨 */
[data-theme="dark"] .vd-pop-rank.r1 { background: rgba(217,119,6,.18); color: #fbbf24; }
[data-theme="dark"] .vd-pop-rank.r2 { background: rgba(71,85,105,.25); color: #94a3b8; }
[data-theme="dark"] .vd-pop-rank.r3 { background: rgba(239,68,68,.15); color: #f87171; }

/* ════════════════════════════════════════════
   일반 table 다크모드
   ════════════════════════════════════════════ */
[data-theme="dark"] .table-hover > tbody > tr:hover {
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .table thead { background: var(--surface-2) !important; }
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
  border-color: rgba(255,255,255,.07);
  color: #c5ccdf;
}

/* ════════════════════════════════════════════
   랭킹 리스트 공통 (다크/라이트 모두)
   ════════════════════════════════════════════ */

/* rank-table: Bootstrap --bs-table-bg 계열 변수 전부 초기화 */
.rank-table,
.rank-table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: inherit;
  --bs-table-active-bg: transparent;
  --bs-table-active-color: inherit;
  --bs-table-hover-bg: transparent;
  --bs-table-hover-color: inherit;
  --bs-table-accent-bg: transparent;
  --bs-table-color: inherit;
  background-color: transparent !important;
}

/* 다크모드: --bs-body-bg(흰색)가 --bs-table-bg로 흘러들어오는 것을 차단 */
[data-theme="dark"] .rank-table,
[data-theme="dark"] .rank-table > :not(caption) > *,
[data-theme="dark"] .rank-table > :not(caption) > * > * {
  --bs-body-bg: transparent;
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
}

/* 테이블 기본 */
.rank_display .table {
  margin-bottom: 0;
  border-collapse: collapse;
}
.rank_display .table thead th {
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 8px;
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: var(--chip);
  color: var(--muted);
}

/* 행 */
.rank-row td {
  padding: 9px 8px;
  border-color: var(--border);
  color: var(--text);
  font-size: 0.88em;
  vertical-align: middle;
}
.rank-row:hover > td { background: var(--chip) !important; }

/* 순위 셀 */
.rank-pos {
  color: var(--muted);
  font-size: 0.82em;
  font-weight: 600;
}
/* 닉네임 */
.rank-nick { font-weight: 500; color: var(--text); }
/* 점수 */
.rank-score { font-weight: 700; color: var(--primary); }
/* 빈 상태 */
.rank-empty { color: var(--muted) !important; padding: 20px 8px !important; font-size: 0.88em; }

/* 상위 3위 강조 */
.rank-top-1 .rank-pos { color: #f59e0b; font-weight: 800; }
.rank-top-2 .rank-pos { color: #94a3b8; font-weight: 800; }
.rank-top-3 .rank-pos { color: #cd7c52; font-weight: 800; }
.rank-top-1 .rank-score { color: #f59e0b; }

/* ── 라이트모드 ── */
[data-theme="light"] .rank_display { background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,.07); }
[data-theme="light"] .rank-row:nth-child(even) > td { background-color: rgba(0,0,0,.025); }
[data-theme="light"] .rank-row td { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .btn_4 { background-color: #f0f1f5; color: #555; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
[data-theme="light"] .btn_2 { background-color: #00a896; color: #fff; }

/* ── 다크모드 ── */
[data-theme="dark"] .rank_display { background: var(--surface-2); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .rank-row:nth-child(even) > td { background-color: rgba(255,255,255,.03); }
[data-theme="dark"] .rank-row td { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .btn_4 { background-color: var(--surface-3); color: #8a96b5; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
[data-theme="dark"] .btn_2 { background-color: #00a896; color: #fff; box-shadow: 0 2px 8px rgba(0,168,150,.3); }