:root {
  color-scheme: light dark;

  /* Palette — light-dark(light, dark) — color-scheme 으로 분기됨 */
  --wiki-bg: light-dark(#F8F9FF, #000000);
  --wiki-card-bg: light-dark(#FFFFFF, #111111);
  --wiki-text: light-dark(#1f2937, #f4f4f5);
  --wiki-text-muted: light-dark(#6b7280, #a1a1aa);

  --wiki-border: light-dark(#E2E8F0, #27272A);
  --wiki-border-focus: light-dark(#0ea5e9, #38bdf8);
  --wiki-hr-color: light-dark(#cbd5e1, #3f3f46);

  --wiki-primary: light-dark(#006591, #38BDF8);
  --wiki-primary-hover: light-dark(#004c6e, #7dd3fc);
  --wiki-accent: #8B5CF6;
  --wiki-success: #10B981;
  --wiki-warning: #F59E0B;
  --wiki-danger: #EF4444;
  --wiki-link: var(--wiki-primary);

  /* Misc */
  --wiki-code-bg: light-dark(#f8fafc, #000000);
  --wiki-toc-bg: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
  --wiki-bg-alt: light-dark(#f1f5f9, #0a0a0a);
  --wiki-sidebar-width: 260px;

  --wiki-btn-text: light-dark(#ffffff, #000000);

  /* Diff Colors */
  --wiki-diff-add-bg: light-dark(#dcfce7, rgba(16, 185, 129, 0.2));
  --wiki-diff-add-text: light-dark(#166534, #a7f3d0);
  --wiki-diff-del-bg: light-dark(#fee2e2, rgba(239, 68, 68, 0.2));
  --wiki-diff-del-text: light-dark(#991b1b, #fecaca);

  /* Glassmorphism & Shadows */
  --wiki-shadow-sm: light-dark(0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.5));
  --wiki-shadow: light-dark(0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.5));
  --wiki-shadow-md: light-dark(0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.5));
  --wiki-shadow-lg: light-dark(0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.5));
  --wiki-glass-bg: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.75));
  --wiki-glass-border: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05));
  --wiki-glass-blur: blur(16px);

  /* Motion */
  --wiki-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wiki-ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Focus ring (사이트 전역 공통) */
  --wiki-focus-ring-color: rgba(14, 165, 233, 0.15);
  --wiki-focus-ring: 0 0 0 3px var(--wiki-focus-ring-color);

  /* RGB triplet for primary — rgba(var(--c-rgb), α) 패턴용 (light-dark 로는 트리플렛 분기 불가) */
  --wiki-primary-rgb: 0, 101, 145;

  /* Code font stack (위키 본문 + 에디터 공통) */
  --wiki-code-font: 'JetBrains Mono', 'Nanum Gothic Coding', 'D2Coding', 'Cascadia Code', 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace;

  /* 컴포넌트 radius (.category-tag-container 등에서 참조) */
  --wiki-radius: 4px;
  
  /* 시맨틱 뮤트 보더 */
  --wiki-border-muted: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.04));
}

/* ── 강제 라이트/다크 테마 ── */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wiki-primary-rgb: 56, 189, 248;
    --wiki-glass-bg: rgba(10, 10, 10, 0.6);
    --wiki-glass-border: rgba(255, 255, 255, 0.08);
    --wiki-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 
                      0 8px 10px -6px rgba(56, 189, 248, 0.15);
  }
}
html[data-theme="dark"] {
  --wiki-primary-rgb: 56, 189, 248;
  --wiki-glass-bg: rgba(10, 10, 10, 0.6);
  --wiki-glass-border: rgba(255, 255, 255, 0.08);
  --wiki-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7), 
                    0 8px 10px -6px rgba(56, 189, 248, 0.15);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
  line-height: 1.7;
  letter-spacing: -0.01em;
  min-height: 100vh;
  /* 안티앨리어싱 강화로 글씨를 더 또렷하게 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.wiki-article-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.02em;
}

/* ── Bootstrap Overrides for Theme Consistency ── */
.text-muted {
  color: var(--wiki-text-muted) !important;
}

.text-body {
  color: var(--wiki-text) !important;
}

.table {
  color: var(--wiki-text);
  border-color: var(--wiki-border);
  width: auto;
}

.table-responsive {
  display: inline-block;
  max-width: 100%;
}

/* 위키 본문의 표 감싸개: 연속된 표들이 옆으로 붙지 않고 세로로 쌓이도록 block 으로 강제.
   width:fit-content 로 짧은 표는 콘텐츠 폭만큼만 차지해 기존 외형을 유지. */
.wiki-table-wrapper {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.table> :not(caption)>*>* {
  color: var(--wiki-text);
  background-color: transparent;
  border-bottom-color: var(--wiki-border);
}

.table-light {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-border);
}

.table-light th,
.table-light td {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-border);
}

.card,
.card-header:not(.wiki-card-header),
.card-footer {
  background-color: var(--wiki-card-bg) !important;
  color: var(--wiki-text) !important;
  border-color: var(--wiki-border) !important;
}

/* .wiki-card-header 는 사용자가 {bg:}/{color:}/{palette:} 토큰으로 inline style 을
   지정할 수 있어야 하므로 !important 를 쓰지 않고 위키 테마 기본값만 fallback 으로 둔다. */
.wiki-card-header {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-border);
}

/* ── SweetAlert2 Overrides ── */
/* 팝업 창 글래스모피즘 */
div:where(.swal2-container) div:where(.swal2-popup) {
  background: var(--wiki-glass-bg) !important;
  backdrop-filter: var(--wiki-glass-blur) !important;
  -webkit-backdrop-filter: var(--wiki-glass-blur) !important;
  color: var(--wiki-text) !important;
  border: 1px solid var(--wiki-glass-border) !important;
  box-shadow: var(--wiki-shadow-lg) !important;
}

/* 체크 표시(Success) 애니메이션 배경 투명화 처리 */
div:where(.swal2-container) .swal2-success-circular-line-left,
div:where(.swal2-container) .swal2-success-circular-line-right,
div:where(.swal2-container) .swal2-success-fix {
  background: transparent !important;
}

div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
  background: var(--wiki-bg) !important;
  color: var(--wiki-text) !important;
  border: 1px solid var(--wiki-border) !important;
  box-shadow: none !important;
}

div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
  border-color: var(--wiki-primary) !important;
  box-shadow: var(--wiki-focus-ring) !important;
}

div:where(.swal2-container) .swal2-title,
div:where(.swal2-container) .swal2-html-container {
  color: var(--wiki-text) !important;
}

/* ── Navbar ── */
.navbar {
  background: var(--wiki-glass-bg) !important;
  backdrop-filter: var(--wiki-glass-blur);
  -webkit-backdrop-filter: var(--wiki-glass-blur);
  border-bottom: 1px solid var(--wiki-border);
  box-shadow: var(--wiki-shadow-sm);
  padding: 0.8rem 1.5rem 0.6rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1040;
}

/* 모바일 사이드바 열림 시 헤더 숨김 */
.navbar.header-hidden-mobile {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.navbar-toggler:focus,
.btn-close:focus {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--wiki-border-focus) !important;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--wiki-text) !important;
  /* 브랜드를 하얗게, 포인트는 아이콘에만 */
}

.navbar-brand .brand-icon {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  vertical-align: -4px;
  color: var(--wiki-primary);
}

.brand-logo {
  border-radius: 8px;
  object-fit: cover;
}

/* Navbar Links */
.nav-link {
  color: var(--wiki-text-muted) !important;
  font-weight: 600;
  transition: all 0.2s var(--wiki-ease);
  padding: 0.5rem 1rem;
  border-radius: 8px;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--wiki-text) !important;
  background: var(--wiki-card-bg);
  /* 마우스 오버 시 은은한 배경만 */
  box-shadow: none;
}

/* Search Input */
.nav-search-form {
  flex-basis: 100%;
  order: 10;
  max-width: 100%;
  margin-top: 0.5rem;
}

.nav-search-form .form-control {
  border-radius: 4px 0 0 4px;
  border: 1px solid var(--wiki-border);
  background: var(--wiki-bg);
  color: var(--wiki-text);
  padding: 0.5rem 1rem;
  box-shadow: none;
  transition: all 0.2s var(--wiki-ease);
}

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

.nav-search-form .form-control:focus {
  outline: none;
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
}

/* Search Mode Dropdown Button */
.nav-search-form .search-mode-btn {
  border: 1px solid var(--wiki-border);
  border-left: none;
  background: var(--wiki-card-bg);
  color: var(--wiki-text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  border-radius: 0 5px 5px 0;
  padding: 0.5rem 0.6rem;
  transition: all 0.2s var(--wiki-ease);
}

.nav-search-form .search-mode-btn:hover,
.nav-search-form .search-mode-btn:focus {
  background: var(--wiki-border);
  color: var(--wiki-text);
  box-shadow: none;
}

.nav-search-form .search-mode-btn:focus-visible {
  outline: none;
  box-shadow: var(--wiki-focus-ring);
}

.nav-search-form .dropdown-menu {
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  min-width: 120px;
}

.nav-search-form .dropdown-item {
  color: var(--wiki-text);
  font-size: 0.875rem;
}

.nav-search-form .dropdown-item:hover {
  background: var(--wiki-border);
  color: var(--wiki-text);
}

.nav-search-form .dropdown-item.active {
  background: var(--wiki-primary);
  color: var(--wiki-btn-text);
}

@media (max-width: 991px) {
  .nav-search-form .input-group {
    flex-wrap: nowrap;
  }
}

/* New Page Button */
.btn-new-page {
  background: linear-gradient(135deg, var(--wiki-primary), var(--wiki-accent));
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 0.6rem 1.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--wiki-shadow-sm);
  transition: all 0.3s var(--wiki-ease-elastic);
}

.btn-new-page:hover {
  box-shadow: var(--wiki-shadow-md);
  transform: translateY(-2px);
  color: #ffffff;
  filter: brightness(1.1);
}

.btn-new-page:active {
  transform: scale(0.97) translateY(0);
  transition: transform 0.1s ease;
}

/* ── Offcanvas Sidebar Styling ── */
.offcanvas,
.offcanvas-lg {
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
}

@media (max-width: 991.98px) {

  .wiki-sidebar {
    z-index: 1060;
    /* 헤더(1040)보다 높게 설정하여 오프캔버스가 위로 올라오게 함 */
  }

  .offcanvas,
  .offcanvas-lg {
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    max-width: 85vw !important;
    /* 모바일에서 화면 전체를 덮지 않고 빈 공간을 남김 */
    top: 0;
    z-index: 1060 !important;
    /* 모든 구성요소(헤더 z-index: 1040 포함)보다 위에 표시 */
  }

  .offcanvas-backdrop {
    z-index: 1055 !important;
    /* offcanvas(1060)보다 아래, 헤더(1040)보다 위 */
  }
}

.offcanvas-header {
  border-bottom: 1px solid var(--wiki-border) !important;
}

.offcanvas-title {
  color: var(--wiki-text);
}

.offcanvas .nav-link,
.offcanvas-lg .nav-link {
  color: var(--wiki-text) !important;
  border-radius: 8px;
  transition: all 0.2s var(--wiki-ease);
}

.offcanvas .nav-link:hover,
.offcanvas-lg .nav-link:hover {
  background-color: var(--wiki-toc-bg);
}

.offcanvas .btn-outline-primary,
.offcanvas-lg .btn-outline-primary {
  border-color: var(--wiki-primary);
  color: var(--wiki-primary) !important;
}

.offcanvas .btn-outline-primary:hover,
.offcanvas-lg .btn-outline-primary:hover {
  background-color: var(--wiki-primary);
  color: #fff !important;
}

.offcanvas .dropdown-menu,
.offcanvas-lg .dropdown-menu {
  background-color: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
}

.offcanvas .dropdown-item,
.offcanvas-lg .dropdown-item {
  color: var(--wiki-text);
}

.offcanvas .dropdown-item:hover,
.offcanvas-lg .dropdown-item:hover {
  background-color: var(--wiki-toc-bg);
}

@media (min-width: 992px) {
  .offcanvas-lg {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* .offcanvas-body가 .sidebar-section-pc-only 클래스를 가지고 있으므로 명시적으로 지정 */
  .offcanvas-lg .offcanvas-body.sidebar-section-pc-only {
    background-color: var(--wiki-card-bg) !important;
    background: var(--wiki-card-bg) !important;
    border: 1px solid var(--wiki-border) !important;
    border-radius: 8px !important;
    padding: 1.25rem !important;
    box-shadow: var(--wiki-shadow-sm) !important;
    transition: box-shadow 0.2s ease;
    margin-bottom: 1.5rem;
  }

  .offcanvas-lg .offcanvas-body.sidebar-section-pc-only:hover {
    box-shadow: var(--wiki-shadow) !important;
  }

  .sidebar-section-pc-only .nav-item.mt-3 {
    font-size: 0.85rem;
    font-weight: 700 !important;
    color: var(--wiki-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--wiki-border);
    margin-top: 0 !important;
  }

  .sidebar-section-pc-only .nav-link,
  .sidebar-section-pc-only .nav-item.text-body {
    padding: 0.5rem 0.6rem !important;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--wiki-text) !important;
    transition: background 0.15s ease;
  }

  .sidebar-section-pc-only .nav-link:hover,
  .sidebar-section-pc-only .nav-item.text-body:hover {
    background: var(--wiki-bg);
  }
}

/* User Profile Collapsible Menu */
.user-dropdown-toggle {
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-dropdown-toggle:hover {
  background-color: var(--wiki-toc-bg) !important;
}

.user-dropdown-icon {
  transition: transform 0.3s ease;
}

.user-dropdown-toggle[aria-expanded="true"] .user-dropdown-icon {
  transform: rotate(-90deg);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .user-dropdown-toggle {
    border-color: var(--wiki-border-muted) !important;
  }
}
html[data-theme="dark"] .user-dropdown-toggle {
  border-color: var(--wiki-border-muted) !important;
}

/* ── 검색바 스타일 ── */
.nav-search-form {
  position: relative;
  transition: all 0.2s var(--wiki-ease);
}

.nav-search-form .input-group {
  box-shadow: var(--wiki-shadow-sm);
  border-radius: 8px;
  overflow: hidden;
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.nav-search-form .input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
  border-color: var(--wiki-border-focus);
}

.nav-search-form .form-control {
  border: none;
  background: transparent;
  color: var(--wiki-text);
  padding-left: 1rem;
}

.nav-search-form .form-control:focus {
  box-shadow: none;
}

.nav-search-form .search-mode-btn {
  border: none;
  background: var(--wiki-toc-bg);
  color: var(--wiki-text);
  font-weight: 500;
  border-left: 1px solid var(--wiki-border);
  border-radius: 0;
}

.nav-search-form .search-mode-btn:hover,
.nav-search-form .search-mode-btn:focus {
  background: var(--wiki-border);
  color: var(--wiki-text);
}

/* 연관검색어 드롭다운 */
.search-suggestions {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  max-height: 320px;
  overflow-y: auto;
}

.search-suggestions.show {
  display: block;
}

.search-suggestion-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--wiki-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
  background: var(--wiki-border);
}

.search-suggestion-item .mdi {
  color: var(--wiki-text-muted);
  margin-right: 6px;
}

/* 반응형 검색바 */
@media (max-width: 576px) {
  .nav-search-form {
    max-width: none !important;
  }
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--wiki-border);
  box-shadow: none;
  margin-right: 0;
}

#navLogin i {
  font-size: 1.3rem;
}

/* ── 테마 토글 ── */
.theme-toggle-btn i {
  font-size: 1.3rem;
}

.theme-option.active {
  color: var(--wiki-primary);
  font-weight: 600;
}

/* ── Main Layout (Sidebar + Content) ── */
.wiki-layout {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 2rem;
  margin-bottom: 3rem;
}

/* ── Sidebar ── */
.wiki-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 1.5rem !important;
  /* 화면 최상단과 약간의 여백 주기 (JS 덮어쓰기 방지) */
  align-self: flex-start;
  z-index: 1030;
}

.sidebar-section {
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: var(--wiki-shadow-sm);
  transition: box-shadow 0.2s ease;
}

.sidebar-section:hover {
  box-shadow: var(--wiki-shadow);
}

.sidebar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wiki-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--wiki-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-title i {
  color: var(--wiki-primary);
}

.doc-stats-counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.35rem 0.75rem;
  margin-top: 0.5rem;
  padding: 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wiki-text-muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.doc-stats-counter span {
  white-space: nowrap;
}

.recent-changes-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-change-item {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  text-decoration: none !important;
  color: var(--wiki-text);
  transition: background 0.15s ease, transform 0.3s var(--wiki-ease-elastic);
}

.recent-change-item:hover {
  background: var(--wiki-bg);
  color: var(--wiki-text);
}

.recent-change-item:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.rc-title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--wiki-primary);
}

.recent-change-item:hover .rc-title {
  color: var(--wiki-primary-hover);
}

.rc-meta {
  font-size: 0.75rem;
  color: var(--wiki-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2px;
}

.rc-time {
  white-space: nowrap;
}

.rc-author {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-author::before {
  content: '·';
  margin-right: 0.25rem;
}

/* ── Bottom Recent Changes ── */
.recent-changes-bottom {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* ── Main Container ── */
.wiki-container {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 60vh;
  padding: 0 0.5rem 3rem;
  animation: fadeIn 0.4s ease-out forwards;
}

/* ── 좌측 목차 사이드바 (LAYOUT_MODE="left-toc") ──
   기본은 .d-none 으로 숨김. left-toc 모드 + 헤딩이 있는 문서에서만 JS 가 d-none 을 제거. */
.wiki-toc-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  z-index: 1030;
  /* 목차가 길어 스크롤바가 생길 때: 스크롤바를 좌측에 배치(direction: rtl)하고
     내용은 .wiki-toc-sidebar-inner 에서 ltr 로 되돌린다. 스크롤바는 얇게(thin). */
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: var(--wiki-border) transparent;
}

.wiki-toc-sidebar::-webkit-scrollbar {
  width: 6px;
}

.wiki-toc-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.wiki-toc-sidebar::-webkit-scrollbar-thumb {
  background: var(--wiki-border);
  border-radius: 3px;
}

.wiki-toc-sidebar-inner {
  direction: ltr;
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  padding: 1rem 0.85rem;
  box-shadow: var(--wiki-shadow-sm);
}

.wiki-toc-sidebar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wiki-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--wiki-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wiki-toc-sidebar-title i {
  color: var(--wiki-primary);
}

.wiki-toc-sidebar-nav ol,
.wiki-toc-sidebar-nav ul {
  list-style: none;
  padding-left: 0.85rem;
  margin: 0;
}

.wiki-toc-sidebar-nav > ol {
  padding-left: 0;
}

.wiki-toc-sidebar-nav li {
  margin: 0.2rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.wiki-toc-sidebar-nav a {
  color: var(--wiki-text);
  text-decoration: none;
  display: inline-block;
  padding: 1px 2px;
  border-radius: 3px;
  transition: background 0.15s ease, color 0.15s ease;
}

.wiki-toc-sidebar-nav a:hover {
  color: var(--wiki-primary);
  background: var(--wiki-bg);
}

.wiki-toc-sidebar-nav .wiki-toc-num {
  color: var(--wiki-text-muted);
  margin-right: 0.25rem;
  font-variant-numeric: tabular-nums;
}

/* 좌측 목차 사이드바 스크롤스파이 강조 — PC(≥992px) 한정. 모바일에선 좌측 사이드바를
   숨기고 인라인 목차 카드를 쓰므로 강조가 필요 없다. */
@media (min-width: 992px) {
  .wiki-toc-sidebar-nav a.toc-active {
    color: var(--wiki-primary);
    font-weight: 600;
  }
}

/* === LAYOUT_MODE="left-toc" 분기 ===
   우측 사이드바를 숨기고, 본문 하단으로 옮겨진 트렌딩/최근 변경 컨테이너를 가로 그리드로 표시.
   좌측 목차 사이드바는 헤딩이 있는 문서에서 JS 가 d-none 을 제거할 때 노출.
   `.wiki-layout-doc` 마커로 위키 문서 조회 페이지(index.html) 에만 한정한다 — 검색/리비전/
   블로그 등 다른 페이지의 `.wiki-sidebar` 까지 숨겨버리지 않도록.
   데스크탑(≥992px) 폭에서만 우측 사이드바를 숨긴다 — 모바일에서는 #wikiSidebar 안의
   `#app-sidebar-placeholder` 가 `components/sidebar.html` 의 `#mobileSidebar` 오프캔버스
   (모바일 햄버거 메뉴 소스)를 담고 있어 ancestor 가 display:none 이 되면 메뉴를 열 수 없다. */
@media (min-width: 992px) {
  body[data-layout-mode="left-toc"] .wiki-layout-doc > .wiki-sidebar {
    display: none;
  }
  /* PC left-toc: 좌측 목차 사이드바를 쓰므로 본문 상단 인라인 목차 카드는 숨긴다.
     `.wiki-layout-doc` 로 위키 문서 조회 페이지에만 한정 — edit 프리뷰 등 다른 페이지의
     인라인 목차 카드(좌측 사이드바 대체물이 없음)까지 숨겨버리지 않도록. */
  body[data-layout-mode="left-toc"] .wiki-layout-doc .wiki-toc-card {
    display: none;
  }
}

/* 모바일(<992px) left-toc: 좌측 목차 사이드바를 숨기고 인라인 목차 카드를 쓴다
   (기본 모드와 동일). 인라인 카드의 모바일 풀폭 동작은 render.css 가 처리. */
@media (max-width: 991px) {
  body[data-layout-mode="left-toc"] .wiki-toc-sidebar {
    display: none !important;
  }
}

/* ── 좌측 그룹 문서 트리 사이드바 (LAYOUT_MODE="docs") ──
   `.wiki-toc-sidebar` 의 sticky/스크롤바 동작을 그대로 따르되 살짝 더 넓게(그룹 트리 슬러그 표시용).
   내부(.wiki-toc-sidebar-inner)·링크(.wiki-toc-sidebar-nav) 스타일은 공유 클래스로 재사용된다. */
.wiki-nav-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  z-index: 1030;
  scrollbar-width: thin;
  scrollbar-color: var(--wiki-border) transparent;
}

.wiki-nav-sidebar::-webkit-scrollbar {
  width: 6px;
}

.wiki-nav-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.wiki-nav-sidebar::-webkit-scrollbar-thumb {
  background: var(--wiki-border);
  border-radius: 3px;
}

/* 그룹 트리는 문서간 링크 목록이므로 좌측 들여쓰기를 살짝 넉넉히 준다. */
.wiki-nav-sidebar-tree ul {
  list-style: none;
  padding-left: 0.8rem;
  margin: 0;
}

.wiki-nav-sidebar-tree > ul {
  padding-left: 0;
}

.wiki-nav-sidebar-tree li {
  margin: 0.18rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* 문서가 없는 중간 경로 노드(링크 없음)는 muted 텍스트로 구분. */
.wiki-nav-sidebar-tree .nav-nodoc {
  color: var(--wiki-text-muted);
  display: inline-block;
  padding: 1px 2px;
}

.wiki-nav-sidebar-tree .nav-truncated {
  color: var(--wiki-text-muted);
  font-style: italic;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}

/* === LAYOUT_MODE="docs" 분기 (Astro 문서 스타일: 좌측 그룹 트리 + 우측 문서내 목차) ===
   `.wiki-layout-doc` 마커로 위키 문서 조회 페이지에만 한정. 데스크탑에서만 우측 트렌딩
   사이드바와 인라인 목차 카드를 숨기고, 좌측 그룹 nav 와 우측 목차 사이드바를 노출한다.
   트렌딩/최근 변경/커스텀 사이드바 블록은 left-toc 와 동일하게 JS(relocateRightSidebarBelowArticle)
   로 본문(.wiki-article) 하단(.wiki-sidebar-bottom-relocated)으로 옮겨 본문 폭에 맞춰 노출한다.
   #wikiSidebar 를 숨기는 규칙을 ≥992px 로만 한정하는 이유는 left-toc 와 동일
   (모바일 오프캔버스 #mobileSidebar 소스이므로). */
@media (min-width: 992px) {
  body[data-layout-mode="docs"] .wiki-layout-doc > .wiki-sidebar {
    display: none;
  }
  body[data-layout-mode="docs"] .wiki-layout-doc .wiki-toc-card {
    display: none;
  }
}

/* 모바일(<992px) docs: 좌·우 사이드바를 모두 숨기고 인라인 목차 카드로 폴백한다
   (기본 모드와 동일). */
@media (max-width: 991px) {
  body[data-layout-mode="docs"] #wikiNavSidebar,
  body[data-layout-mode="docs"] #wikiTocSidebarRight {
    display: none !important;
  }
}

/* 현재 문서 강조 (그룹 nav 트리). PC/모바일 공통. */
.wiki-nav-sidebar-tree a.nav-current {
  color: var(--wiki-primary);
  font-weight: 600;
}

/* 에디터 프리뷰(#custom-wiki-preview)는 .wiki-layout-doc 밖이라 위의 본문 인라인 목차 카드
   숨김 규칙이 닿지 않는다. 조회 화면과 동일하게, left-toc/docs 레이아웃에서는 데스크탑(≥992px)
   에서만 프리뷰의 인라인 목차 카드를 숨겨 사이드바 목차와 중복을 피하고, 모바일에서는
   (사이드바가 숨겨지므로) 카드를 그대로 노출해 실제 조회 화면과 일치시킨다.
   (default 레이아웃은 어느 폭에서도 숨기지 않아 카드가 항상 노출된다.) */
@media (min-width: 992px) {
  body[data-layout-mode="left-toc"] #custom-wiki-preview .wiki-toc-card,
  body[data-layout-mode="right-toc"] #custom-wiki-preview .wiki-toc-card,
  body[data-layout-mode="docs"] #custom-wiki-preview .wiki-toc-card {
    display: none;
  }
}

/* === LAYOUT_MODE="right-toc" 분기: left-toc 와 동일하되 현재 문서 목차를 우측에 배치 ===
   우측 목차 사이드바(#wikiTocSidebarRight)는 docs 모드와 동일 요소를 공유한다(JS 가 d-none 제거).
   좌측 사이드바는 없다(JS 가 left-toc/docs 좌측 사이드바를 노출하지 않음).
   #wikiSidebar(트렌딩/최근 변경)는 본문 하단으로 JS(relocateRightSidebarBelowArticle)가 옮기므로
   데스크탑(≥992px)에서만 원위치를 숨긴다 — 모바일에선 #mobileSidebar 오프캔버스 소스이므로 숨기지 않는다
   (left-toc/docs 와 동일). */
@media (min-width: 992px) {
  body[data-layout-mode="right-toc"] .wiki-layout-doc > .wiki-sidebar {
    display: none;
  }
  body[data-layout-mode="right-toc"] .wiki-layout-doc .wiki-toc-card {
    display: none;
  }
}

/* 모바일(<992px) right-toc: 우측 목차 사이드바를 숨기고 인라인 목차 카드로 폴백한다(기본 모드와 동일). */
@media (max-width: 991px) {
  body[data-layout-mode="right-toc"] #wikiTocSidebarRight {
    display: none !important;
  }
}

/* 우측 목차 사이드바는 좌측(.wiki-toc-sidebar 의 direction:rtl 스크롤바)과 달리 스크롤바를
   자연스럽게 오른쪽에 둔다. */
.wiki-toc-sidebar-right {
  direction: ltr;
}

/* 본문 하단으로 옮긴 트렌딩/최근 변경/커스텀 사이드바 — 본문 폭 전체로 확장(단일 컬럼). */
.wiki-sidebar-bottom-relocated {
  margin: 2rem 0 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* 하단 커스텀 사이드바 복제본 — PC 전용 노출. 모바일은 햄버거 오프캔버스로 접근. */
.wiki-sidebar-bottom-custom {
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  padding: 0.75rem 0.5rem;
  box-shadow: var(--wiki-shadow-sm);
}

.wiki-sidebar-bottom-custom .navbar-nav {
  flex-direction: column;
}

@media (max-width: 991px) {
  .wiki-sidebar-bottom-custom {
    display: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Wiki Article Card ── */
.wiki-article {
  background: var(--wiki-card-bg);
  border-radius: 8px;
  padding: 2.5rem;
  border: 1px solid var(--wiki-border);
  box-shadow: var(--wiki-shadow-md);
  margin-bottom: 2rem;
  transition: box-shadow 0.3s ease;
}

.wiki-article:hover {
  box-shadow: var(--wiki-shadow-lg);
}

@media (max-width: 767.98px) {
  .wiki-article {
    padding: 1.5rem;
    border-radius: 8px;
  }
}

.wiki-article-title {
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: var(--wiki-text);
  letter-spacing: -0.02em;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 대체 title 이 설정된 문서에서 h1 아래에 실제 슬러그를 좌측 정렬·muted 작게 노출하는 라벨. */
.wiki-article-slug-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--wiki-text-muted);
  margin-top: -0.4rem;
  margin-bottom: 0.6rem;
}

.wiki-article-slug-label code {
  background: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

.wiki-article-slug-label .wiki-slug-copy-btn {
  color: var(--wiki-text-muted);
  line-height: 1;
  text-decoration: none;
}

.wiki-article-slug-label .wiki-slug-copy-btn:hover {
  color: var(--wiki-text);
}

.wiki-article-meta {
  font-size: 0.9rem;
  color: var(--wiki-text-muted);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wiki-border);
  /* 명확한 선으로 구분 */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wiki-article-actions {
  display: flex;
  gap: 0.5rem;
  /* 버튼 간격 타이트하게 */
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

/* ── Document Actions Button Group (Flat Design) ── */
#articleMainActions .btn,
#shareDropdown,
#docToolsDropdown {
  background: var(--wiki-card-bg) !important;
  color: var(--wiki-text) !important;
  border: 1px solid var(--wiki-border) !important;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.3s var(--wiki-ease-elastic);
}

#articleMainActions .btn:hover,
#shareDropdown:hover,
#docToolsDropdown:hover {
  background: var(--wiki-bg) !important;
  color: var(--wiki-primary) !important;
  border-color: var(--wiki-primary) !important;
  z-index: 2;
  /* Ensure border is visible in group */
  box-shadow: none !important;
}

#articleMainActions .btn:active,
#shareDropdown:active,
#docToolsDropdown:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* 마우스 포커스 / 드롭다운 열림(.show) 에서는 Bootstrap 기본 포커스 그림자만 차단 */
#articleMainActions .btn:focus,
#articleMainActions .btn.show,
#shareDropdown:focus,
#shareDropdown.show,
#docToolsDropdown:focus,
#docToolsDropdown.show {
  box-shadow: none !important;
  outline: none;
}

/* 키보드 포커스 (Tab) 에서는 접근성을 위해 outline 으로 명확한 포커스 링 표시 */
#articleMainActions .btn:focus-visible,
#shareDropdown:focus-visible,
#docToolsDropdown:focus-visible {
  box-shadow: none !important;
  outline: 2px solid var(--wiki-primary);
  outline-offset: 2px;
}

#articleMainActions .btn i,
#shareDropdown i,
#docToolsDropdown i {
  font-size: 1rem;
}

#articleMainActions .btn.disabled {
  opacity: 0.5 !important;
  background: var(--wiki-bg) !important;
  border-color: var(--wiki-border) !important;
  color: var(--wiki-text-muted) !important;
  transform: none !important;
  box-shadow: none !important;
}

.no-caret::after {
  display: none !important;
}

/* ── Buttons (Premium Flat) ── */
.btn-wiki {
  background: var(--wiki-card-bg);
  color: var(--wiki-text);
  border: 1px solid var(--wiki-border);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--wiki-shadow-sm);
  transition: all 0.3s var(--wiki-ease-elastic);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-wiki:active {
  transform: scale(0.97) translateY(0);
  transition: transform 0.1s ease;
}

.btn-wiki:hover {
  background: var(--wiki-bg);
  border-color: var(--wiki-primary);
  color: var(--wiki-primary);
  box-shadow: var(--wiki-shadow);
  transform: translateY(-1px);
}

.btn-wiki-outline {
  background: transparent;
  color: var(--wiki-text-muted);
  border: 1px solid var(--wiki-border);
  border-radius: 4px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  box-shadow: none;
  transition: all 0.2s var(--wiki-ease);
}

.btn-wiki-outline:hover {
  color: var(--wiki-text);
  border-color: var(--wiki-text-muted);
}

.btn-wiki-danger {
  color: var(--wiki-danger);
  border-color: rgba(248, 81, 73, 0.4);
}

.btn-wiki-danger:hover {
  background: rgba(248, 81, 73, 0.1);
  color: var(--wiki-danger);
  border-color: var(--wiki-danger);
}

/* ── Bootstrap Modal Dark Mode ── */
.modal-content {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-border);
}

.modal-header {
  background-color: var(--wiki-toc-bg);
  border-bottom-color: var(--wiki-border);
  color: var(--wiki-text);
}

.modal-body {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
}

.modal-footer {
  background-color: var(--wiki-toc-bg);
  border-top-color: var(--wiki-border);
}

.modal-title {
  color: var(--wiki-text);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}
html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ── Forms ── */
.form-control {
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  color: var(--wiki-text);
  box-shadow: none;
}

.form-control:focus {
  background: var(--wiki-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
  /* 윤곽선 포커스 링 */
  outline: none;
}

.form-select {
  background-color: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  color: var(--wiki-text);
}

.form-select:focus {
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
  outline: none;
}

.form-control::placeholder,
.edit-title-input::placeholder,
.edit-summary-input::placeholder {
  color: var(--wiki-text-muted);
  opacity: 1;
}

.form-select option {
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
}

/* ── Input Group (Bootstrap) Dark Mode ── */
.input-group-text {
  background-color: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  color: var(--wiki-text-muted);
}

/* ── Pagination (Bootstrap) Dark Mode ── */
.pagination {
  --bs-pagination-bg: var(--wiki-card-bg);
  --bs-pagination-color: var(--wiki-text);
  --bs-pagination-border-color: var(--wiki-border);
  --bs-pagination-hover-bg: var(--wiki-bg);
  --bs-pagination-hover-color: var(--wiki-primary);
  --bs-pagination-hover-border-color: var(--wiki-border);
  --bs-pagination-focus-bg: var(--wiki-bg);
  --bs-pagination-focus-color: var(--wiki-primary);
  --bs-pagination-focus-box-shadow: var(--wiki-focus-ring);
  --bs-pagination-active-bg: var(--wiki-primary);
  --bs-pagination-active-color: var(--wiki-btn-text);
  --bs-pagination-active-border-color: var(--wiki-primary);
  --bs-pagination-disabled-bg: var(--wiki-bg);
  --bs-pagination-disabled-color: var(--wiki-text-muted);
  --bs-pagination-disabled-border-color: var(--wiki-border);
}

.pagination .page-link {
  background-color: var(--bs-pagination-bg);
  color: var(--bs-pagination-color);
  border-color: var(--bs-pagination-border-color);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pagination .page-link:hover {
  background-color: var(--bs-pagination-hover-bg);
  color: var(--bs-pagination-hover-color);
  border-color: var(--bs-pagination-hover-border-color);
}

.pagination .page-link:focus {
  background-color: var(--bs-pagination-focus-bg);
  color: var(--bs-pagination-focus-color);
  box-shadow: var(--bs-pagination-focus-box-shadow);
  outline: none;
}

.pagination .page-item.active .page-link {
  background-color: var(--bs-pagination-active-bg);
  color: var(--bs-pagination-active-color);
  border-color: var(--bs-pagination-active-border-color);
}

.pagination .page-item.disabled .page-link {
  background-color: var(--bs-pagination-disabled-bg);
  color: var(--bs-pagination-disabled-color);
  border-color: var(--bs-pagination-disabled-border-color);
}

/* ── Edit Page Inputs ── */
.edit-title-input {
  width: 100%;
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--wiki-text);
  box-shadow: none;
  margin-bottom: 1rem;
}

.edit-title-input:focus {
  outline: none;
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
}

.edit-summary-input {
  width: 100%;
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 4px;
  padding: 0.7rem 1rem;
  color: var(--wiki-text);
  box-shadow: none;
}

.edit-summary-input:focus {
  outline: none;
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
}

/* ── Profile Input Custom ── */
.edit-name-form input {
  background: var(--wiki-bg);
  color: var(--wiki-text);
  border: 1px solid var(--wiki-border);
}

/* ── Search Results ── */
.search-result-item {
  background: var(--wiki-card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: none;
  border: 1px solid var(--wiki-border);
  transition: border-color 0.2s;
}

.search-result-item:hover {
  transform: none;
  border-color: var(--wiki-text-muted);
  /* hover 시 테두리만 밝아짐 */
}

.search-result-item h4 a {
  color: var(--wiki-primary);
  font-weight: 700;
}

/* 검색 결과 내 이미지 썸네일: 고정 정사각형에 이미지 비율 보존 */
.search-image-thumb {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 6px;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .search-image-thumb {
    width: 72px;
    height: 72px;
  }
}

/* 검색 결과 본문 영역: flex 자식이 내용 크기보다 작게 줄어들 수 있도록 min-width:0.
   긴 파일명/URL 이 줄바꿈되도록 overflow-wrap 을 내부 자손(제목/링크/스니펫)에도 강제. */
.search-result-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.search-result-body h4,
.search-result-body h4 a,
.search-result-body .snippet {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* 이미지 검색 결과 본문 영역의 태그/콘텐츠 미리보기 */
.search-image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
}

.search-image-tags .badge {
  font-weight: 500;
  font-size: 0.78rem;
}

.search-image-content {
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Nav Tabs (위키 스타일 통합) ── */
.nav-tabs {
  border-bottom: 1px solid var(--wiki-border);
  gap: 0.25rem;
}

.nav-tabs .nav-link {
  color: var(--wiki-text-muted) !important;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  margin-bottom: -1px;
  transition: all 0.2s var(--wiki-ease);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--wiki-text) !important;
  background: var(--wiki-card-bg);
  border-color: var(--wiki-border) var(--wiki-border) transparent;
}

.nav-tabs .nav-link.active {
  color: var(--wiki-primary) !important;
  background: var(--wiki-card-bg);
  border-color: var(--wiki-border) var(--wiki-border) var(--wiki-card-bg);
  font-weight: 700;
}

/* ── Revision List ── */
.revision-item {
  background: var(--wiki-card-bg);
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid var(--wiki-border);
}

.revision-summary {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.revision-item.is-current {
  background: color-mix(in srgb, var(--wiki-warning) 15%, var(--wiki-card-bg));
  border-color: var(--wiki-warning);
  box-shadow: 0 0 0 1px var(--wiki-warning) inset;
}

/* 리비전 조작 버튼 (Premium Neutral UI) */
.btn-rev-action {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s var(--wiki-ease-elastic);
  background-color: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  color: var(--wiki-text);
  box-shadow: var(--wiki-shadow-sm);
  white-space: nowrap;
}

.btn-rev-action i {
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.btn-rev-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--wiki-shadow-md);
  border-color: var(--wiki-border-focus);
}

.btn-rev-action:active {
  transform: scale(0.97) translateY(0);
  transition: transform 0.1s ease;
}

/* 보기 버튼 - Blue Icon on Hover */
.btn-rev-view:hover {
  color: var(--wiki-primary) !important;
}

.btn-rev-view:hover i {
  color: var(--wiki-primary);
}

/* 비교 버튼 - Indigo Icon on Hover */
.btn-rev-diff:hover {
  color: var(--wiki-accent) !important;
}

.btn-rev-diff:hover i {
  color: var(--wiki-accent);
}

/* 되돌리기 버튼 - Rose Icon on Hover */
.btn-rev-revert:hover {
  color: var(--wiki-danger) !important;
}

.btn-rev-revert:hover i {
  color: var(--wiki-danger);
}

.btn-rev-revert:disabled {
  background-color: var(--wiki-bg) !important;
  color: var(--wiki-text-muted) !important;
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--wiki-border) !important;
}

.btn-rev-revert:disabled i {
  color: inherit !important;
}

/* 좁은 화면에서 아이콘 버튼의 텍스트 숨기기 */
@media (max-width: 575.98px) {
  .btn-icon-collapse .btn-collapse-text {
    display: none;
  }
}

/* ── Home Page / Welcome ── */
.wiki-welcome h1 {
  color: var(--wiki-text);
  text-shadow: none;
  /* Embossed Text 제거, 깔끔한 플랫 */
  font-weight: 800;
}

.recent-page-card {
  background: var(--wiki-card-bg);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: none;
  border: 1px solid var(--wiki-border);
  color: var(--wiki-text);
  margin-bottom: 1rem;
  transition: all 0.2s var(--wiki-ease);
}

.recent-page-card:hover {
  transform: translateY(-2px);
  /* 미세한 떠오름 유지 */
  border-color: var(--wiki-primary);
}

/* ── Badges & Alerts ── */
.badge {
  color: var(--wiki-primary) !important;
  background-color: color-mix(in srgb, var(--wiki-primary) 10%, transparent) !important;
  /* 투명도 있는 배경 트렌드 */
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--wiki-primary) 20%, transparent) !important;
  border-radius: 999px;
  padding: 0.3em 0.6em;
  font-weight: 600;
}

.badge.bg-secondary {
  color: var(--wiki-text-muted) !important;
  background-color: rgba(139, 148, 158, 0.1) !important;
  border-color: rgba(139, 148, 158, 0.2) !important;
}

.badge.bg-danger {
  color: var(--wiki-danger) !important;
  background-color: rgba(248, 81, 73, 0.05) !important;
  border-color: rgba(248, 81, 73, 0.3) !important;
  box-shadow: none;
}

.alert {
  background-color: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  box-shadow: none;
  color: var(--wiki-text);
}

.alert-info {
  border-left: 4px solid var(--wiki-primary);
  background-color: color-mix(in srgb, var(--wiki-primary) 5%, transparent);
}

/* ── Mobile Optimization ── */
@media (max-width: 991px) {
  .wiki-layout {
    flex-direction: column;
    padding: 0;
    margin-bottom: 0;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .wiki-sidebar {
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    padding: 0 0.5rem !important;
    z-index: 1030;
  }

  .sidebar-section {
    margin-bottom: 1.5rem !important;
  }

  .recent-changes-bottom {
    padding: 0 0.5rem;
  }
}


@media (max-width: 768px) {
  .wiki-article {
    padding: 1.2rem;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden;
    max-width: 100%;
  }

  .navbar {
    padding: 0.8rem 1rem;
  }

  .wiki-container {
    padding: 0 0.5rem;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .recent-changes-bottom {
    padding: 0;
  }
}

/* ── Scrollbar Customization (Dark Theme) ── */
::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: #30363d;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #484f58;
}

/* ── Dropdown Animation ── */
.dropdown-menu {
  display: block;
  /* Force block to allow transition */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
  /* Prevent clicking when hidden */
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Dropdown 다크모드 대응 ── */
.dropdown-menu {
  background-color: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  box-shadow: var(--wiki-shadow-md);
}

.dropdown-item {
  color: var(--wiki-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--wiki-primary);
  color: var(--wiki-btn-text);
}

.dropdown-header {
  color: var(--wiki-text-muted);
}

.dropdown-divider {
  border-color: var(--wiki-border);
}

/* ── Footnotes ── */
.wiki-fn-ref {
  white-space: nowrap;
}

.wiki-fn-ref a {
  color: var(--wiki-primary);
  font-weight: 700;
  font-size: 0.75em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.wiki-fn-ref a:hover {
  color: var(--wiki-accent);
  text-decoration: underline;
}

.wiki-footnotes {
  margin-top: 2rem;
  padding-top: 0;
}

.wiki-footnotes hr {
  border-color: var(--wiki-border);
  margin-bottom: 1rem;
}

.wiki-footnotes h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--wiki-text-muted);
  margin-bottom: 0.75rem;
}

.wiki-footnotes h4 i {
  color: var(--wiki-primary);
}

.wiki-footnotes ol {
  padding-left: 1.5rem;
  margin: 0;
}

.wiki-footnotes ol li {
  font-size: 0.9rem;
  color: var(--wiki-text);
  padding: 0.3rem 0;
  line-height: 1.6;
  border-bottom: 1px solid var(--wiki-border);
  scroll-margin-top: 80px;
}

.wiki-footnotes ol li:last-child {
  border-bottom: none;
}

.wiki-fn-back {
  color: var(--wiki-primary);
  text-decoration: none;
  font-size: 0.85em;
  margin-right: 0.3rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.wiki-fn-back:hover {
  color: var(--wiki-accent);
}

/* Highlight animation when navigating to a footnote */
.wiki-footnotes ol li:target {
  background-color: color-mix(in srgb, var(--wiki-primary) 10%, transparent);
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

/* ── Discussion UI ── */
.discussion-item {
  display: block;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  text-decoration: none !important;
  color: var(--wiki-text);
  background: var(--wiki-card-bg);
  transition: border-color 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.discussion-item:hover {
  border-color: var(--wiki-primary);
  background: var(--wiki-bg);
  color: var(--wiki-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.discussion-item-title {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--wiki-text);
}

.discussion-item-meta {
  font-size: 0.78rem;
  color: var(--wiki-text-muted);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.discussion-item-meta i {
  margin-right: 0.15rem;
  opacity: 0.7;
}

/* Discussion author link — theme-aware */
.discussion-author-link {
  text-decoration: none;
  color: var(--wiki-text);
  font-weight: 500;
  transition: color 0.15s ease;
}

.discussion-author-link:hover {
  color: var(--wiki-primary);
  text-decoration: underline;
}

/* Discussion Comments */
.discussion-comment {
  background: var(--wiki-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.2s ease;
}

.discussion-comment:hover {
  border-color: var(--wiki-text-muted);
}

.discussion-comment-deleted {
  opacity: 0.5;
  background: var(--wiki-card-bg);
}

.discussion-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.discussion-comment-author {
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--wiki-text);
}

.discussion-comment-date {
  color: var(--wiki-text-muted);
}

.discussion-comment-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--wiki-border);
}

.discussion-comment-body {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.5rem;
  white-space: pre-line;
}

.discussion-comment-actions {
  display: flex;
  gap: 0.25rem;
}

.discussion-comment-actions .btn-link {
  font-size: 0.8rem;
  padding: 0.15rem 0.4rem;
  text-decoration: none;
}

/* Discussion Quote (reply quoting) */
.discussion-quote {
  border-left: 3px solid var(--wiki-primary);
  background: var(--wiki-card-bg);
  border-radius: 0 5px 5px 0;
  padding: 0.6rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.discussion-quote-author {
  font-weight: 600;
  color: var(--wiki-primary);
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
}

.discussion-quote-author i {
  margin-right: 0.2rem;
}

.discussion-quote-text {
  color: var(--wiki-text-muted);
  white-space: pre-line;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Comment target highlight */
.discussion-comment:target {
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
}

/* ── Bootstrap list-group Override (Dark Mode) ── */
.list-group-item {
  background-color: var(--wiki-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-border);
}

.list-group-item-action {
  color: var(--wiki-text);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
  border-color: var(--wiki-primary);
}

.list-group-item-action:active {
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text);
}

.list-group-item .fw-bold {
  color: var(--wiki-text);
}

.list-group-item small.text-muted {
  color: var(--wiki-text-muted) !important;
}



/* ── Notification System ── */
.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  background: var(--wiki-primary);
  border-radius: 50%;
  border: 2px solid var(--wiki-bg);
}

.notification-menu-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--wiki-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  margin-left: 8px;
}

.notification-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--wiki-card-bg);
  border: 1px solid var(--wiki-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 576px) {
  .notification-panel {
    position: fixed;
    top: 60px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

.notification-panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--wiki-border);
  color: var(--wiki-text);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.notification-panel-body {
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 420px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--wiki-border);
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: var(--wiki-text);
}

.notification-item:hover {
  background: var(--wiki-toc-bg);
  color: var(--wiki-text);
}

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

.notification-item .notif-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.notification-item .notif-icon.type-discussion_comment {
  color: var(--wiki-primary);
}

.notification-item .notif-icon.type-banned {
  color: var(--wiki-danger);
}

.notification-item .notif-icon.type-message {
  color: var(--wiki-accent);
}

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

.notification-item .notif-text {
  font-size: 0.85rem;
  line-height: 1.4;
  word-break: break-word;
}

.notification-item .notif-time {
  font-size: 0.75rem;
  color: var(--wiki-text-muted);
  margin-top: 2px;
}

.notification-item .notif-delete {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--wiki-text-muted);
  padding: 2px 4px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.notification-item .notif-delete:hover {
  color: var(--wiki-danger);
  background: rgba(248, 81, 73, 0.1);
}

.notification-empty {
  padding: 2rem;
  text-align: center;
  color: var(--wiki-text-muted);
  font-size: 0.85rem;
}

.notification-panel-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--wiki-border);
  background: var(--wiki-card-bg);
  flex: 0 0 auto;
}

.push-toggle-status-label {
  font-size: 0.85rem;
  color: var(--wiki-text-muted);
  display: inline-flex;
  align-items: center;
}

.push-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1.2;
}

.push-status-pill .mdi {
  font-size: 1rem;
  line-height: 1;
}

.push-status-on {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
  border-color: rgba(25, 135, 84, 0.35);
}

.push-status-off {
  background: rgba(108, 117, 125, 0.12);
  color: var(--wiki-text-muted);
  border-color: rgba(108, 117, 125, 0.3);
}

html[data-theme="dark"] .push-status-on {
  background: rgba(40, 167, 90, 0.18);
  color: #4ade80;
  border-color: rgba(40, 167, 90, 0.45);
}

/* ── 푸터 ── */
.wiki-footer {
  border-top: 1px solid var(--wiki-border);
  background-color: var(--wiki-card-bg);
  color: var(--wiki-text-muted);
  font-size: 0.85rem;
  padding: 1rem 1.5rem;
  margin-top: auto;
}

.wiki-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.footer-copyright {
  flex-shrink: 0;
}

.footer-custom-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
}

.footer-link {
  color: var(--wiki-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--wiki-primary);
  text-decoration: underline;
}

.footer-text {
  color: var(--wiki-text-muted);
}

.footer-divider {
  color: var(--wiki-border);
  user-select: none;
}

/* ── Loading Spinner ── */
.spinner-border {
  border-width: 2px;
  border-color: var(--wiki-border);
  border-right-color: var(--wiki-primary);
}

/* ── SPA Progress Bar ── */
.spa-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  overflow: hidden;
}

.spa-progress-bar-inner {
  height: 100%;
  background: var(--wiki-primary);
  animation: spaProgress 1.2s ease-in-out infinite;
}

@keyframes spaProgress {
  0% {
    width: 0;
    margin-left: 0;
  }

  50% {
    width: 60%;
    margin-left: 20%;
  }

  100% {
    width: 0;
    margin-left: 100%;
  }
}

/* ── Scroll FAB Buttons ── */
.scroll-fab-group {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.scroll-fab-group.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-fab {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  border: 1px solid var(--wiki-border);
  background: var(--wiki-glass-bg);
  backdrop-filter: var(--wiki-glass-blur);
  -webkit-backdrop-filter: var(--wiki-glass-blur);
  box-shadow: var(--wiki-shadow);
  color: var(--wiki-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  padding: 0;
  line-height: 1;
}

.scroll-fab:hover {
  background: var(--wiki-glass-bg);
  box-shadow: var(--wiki-shadow-md);
  transform: scale(1.1);
}

.scroll-fab:active {
  transform: scale(0.95);
}


/* ── 카테고리 버블 태그 ── */
.category-tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--wiki-border);
  border-radius: var(--wiki-radius);
  background-color: var(--wiki-bg);
  min-height: 42px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.category-tag-container:focus-within {
  border-color: var(--wiki-primary);
  box-shadow: var(--wiki-focus-ring);
  background-color: var(--wiki-card-bg);
}

.category-tag {
  display: inline-flex;
  align-items: center;
  background-color: color-mix(in srgb, var(--wiki-primary) 10%, transparent);
  color: var(--wiki-primary);
  border: 1px solid color-mix(in srgb, var(--wiki-primary) 20%, transparent);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
}

.category-tag i {
  font-size: 0.9rem;
  color: var(--wiki-primary);
  opacity: 0.7;
  transition: opacity 0.15s;
  margin-top: 1px;
  margin-left: 4px;
}

.category-tag i:hover {
  opacity: 1;
}

.category-tag-input {
  flex: 1;
  min-width: 120px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--wiki-text);
  font-size: 0.95rem;
  padding: 2px 0;
}

.category-tag-input::placeholder {
  color: var(--wiki-text-muted);
}

/* ── 사이트 전역 공지 배너 (다중) ── */
.announcement-banners {
  display: flex;
  flex-direction: column;
}
.announcement-banners > .announcement-banner + .announcement-banner {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.announcement-banner {
  background: #fff8db;
  color: #5a4500;
  border-bottom: 1px solid var(--wiki-border);
  padding: 6px 0;
  font-size: 0.92rem;
}
.announcement-banner-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem;
}
.announcement-banner-icon {
  color: #b58900;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.announcement-banner-text {
  flex: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.announcement-banner-text:hover {
  text-decoration: underline;
  color: inherit;
}
.announcement-banner-skip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 0.85rem;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.announcement-banner-skip .form-check-input {
  margin-top: 0;
  cursor: pointer;
}
.announcement-banner-close {
  flex-shrink: 0;
  font-size: 0.75rem;
}
[data-theme="dark"] .announcement-banner {
  background: #3a3520;
  color: #fff8db;
}
[data-theme="dark"] .announcement-banner-icon {
  color: #ffd34d;
}
[data-theme="dark"] .announcement-banner-close {
  filter: invert(1);
}

/* ── 아이콘 피커 모달 툴바 (라이브러리 탭 + 아이콘 없음 버튼) ──
 * 기본 Bootstrap btn-outline-primary 가 사이트 wiki 토큰과 어긋나 보여 별도 스타일 부여. */
.icon-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.icon-picker-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--wiki-bg-alt);
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
}

.icon-picker-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--wiki-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s var(--wiki-ease), color 0.15s var(--wiki-ease);
}

.icon-picker-tab i {
  font-size: 1rem;
  line-height: 1;
}

.icon-picker-tab:hover:not(.active) {
  color: var(--wiki-text);
  background: rgba(var(--wiki-primary-rgb), 0.08);
}

.icon-picker-tab.active {
  color: var(--wiki-btn-text);
  background: var(--wiki-primary);
  box-shadow: var(--wiki-shadow-sm);
}

.icon-picker-tab:focus-visible {
  outline: none;
  box-shadow: var(--wiki-focus-ring);
}

.icon-picker-none-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--wiki-text-muted);
  background: transparent;
  border: 1px solid var(--wiki-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s var(--wiki-ease), border-color 0.15s var(--wiki-ease), background 0.15s var(--wiki-ease);
}

.icon-picker-none-btn i {
  font-size: 0.85rem;
  line-height: 1;
}

.icon-picker-none-btn:hover {
  color: var(--wiki-danger);
  border-color: var(--wiki-danger);
  background: rgba(239, 68, 68, 0.08);
}

.icon-picker-none-btn:focus-visible {
  outline: none;
  box-shadow: var(--wiki-focus-ring);
}

/* ── 아이콘 피커 모달 그리드 ──
 * 에디터(edit/modals.ts) 와 standalone(iconPicker.ts) 양쪽에서 사용.
 * 이전엔 edit.css 에만 있어 admin/blog 페이지에서는 스타일이 적용되지 않았음. */
.icon-grid-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
}

.icon-grid-modal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--wiki-border);
  transition: all 0.15s;
  font-size: 0.68rem;
  text-align: center;
  overflow: hidden;
  color: var(--wiki-text);
  background: transparent;
  line-height: 1.3;
}

.icon-grid-modal-item:hover {
  background: var(--wiki-bg);
  border-color: var(--wiki-primary);
  color: var(--wiki-primary);
}

.icon-grid-modal-item i {
  font-size: 1.4rem;
  margin-bottom: 4px;
  display: block;
}

.icon-grid-modal-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 74px;
  display: block;
}

/* iconPicker 모달은 SweetAlert2(기본 ~1060) 와 다른 Bootstrap 모달(1055) 위에 띄워야 한다.
 * iconPicker.ts 가 modal.show() 직후 마지막 .modal-backdrop 에 .icon-picker-backdrop
 * 클래스를 부여하므로 그에 대응하는 backdrop z-index 도 함께 올린다. */
#iconPickerModal {
  z-index: 2070;
}
.modal-backdrop.icon-picker-backdrop {
  z-index: 2069;
}