:root {
  color-scheme: dark; /* 스크롤바·select·자동완성 팝업을 다크로 */
  --topbar-h: 57px;
  --bg: #141414;
  --bg-secondary: #1b1b1b;
  --bg-tertiary: #242424;
  --border: #2e2e2e;
  --text: #e4e4e0; /* 가는 한글 획이 다크 배경에 묻히지 않게 소폭 밝힘 (순백은 눈부심) */
  --text-secondary: #8f8f8c;
  /* 팔레트 B (시안): 여기만 바꾸면 사이트 전체 색이 바뀐다 */
  --accent: #39c6e6;
  --accent-rgb: 57, 198, 230;
  --accent-emphasis: #1f9ab8;
  --accent-hover: #2fb3d2;
  --frame: #3a8aa0;
  --frame-rgb: 58, 138, 160;
  --frame-faint: rgba(var(--frame-rgb), 0.12);
  --glint-rgb: 150, 225, 240;
  --tint: #9fd0dc;
  --plaque-bg: #0f1c20;
  --plaque-rule: #1b3a44;
  --btn-bg: #161e21;
  --btn-bg-hover: #1a262b;
  --btn-border: #35515a;
  --btn-text: #a9c8d2;
  --btn-text-hover: #cfe6ee;
  --highlight-text: #eaf6fa;
  --gold: #e1c992;
  --gold-bright: #edc457;
  --green: #3fb950;
  --red: #f85149;
  --red-rgb: 248, 81, 73;
  --green-rgb: 63, 185, 80;
  --danger-bg: rgba(var(--red-rgb), 0.15);
  /* 역할 토큰: 테마가 바뀌면 같이 바뀌어야 하는 "색이 아닌 것들" (그림자·백드롭·헤어라인·강조 위 글씨) */
  --on-accent: #141414; /* .btn-primary 글자 — 흰색은 #1f9ab8 위에서 3.3:1이라 AA 미달 */
  --selection-text: #fff;
  --watermark: rgba(214, 214, 211, 0.10);
  --border-hover: #4a4a48;
  --hover-strong: #2c2c2c;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-soft: rgba(255, 255, 255, 0.06);
  --numeral: #a8a8a5;
  --title-top: #ffffff;
  --title-mid: #dfe5df;
  --toast-error-text: #ffb3ad;
  --backdrop: rgba(0, 0, 0, 0.75);
  --backdrop-soft: rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-img: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-drawer: 16px 0 40px rgba(0, 0, 0, 0.5);
  --nav-active-text: var(--accent); /* 사이드바 활성 필 글자 — 라이트에선 틴트 위 대비 때문에 더 진하게 */
  --discord-green: #248046;        /* 디스코드 초대 버튼 — 두 테마 공통 (흰 글자 5:1 이상) */
  --discord-green-hover: #1d6b3a;  /* 호버는 진해진다 (흰 글자 6.5:1) */
  --bg-secondary-rgb: 27, 27, 27;  /* 배너 이미지 위 글자 가독용 오버레이 */
  /* 라벨 체계: 사이드바 카테고리·패널 제목·목차·랜딩 소제목이 한 단계를 공유한다 (한글 자간은 좁게) */
  --label-size: 12px;
  --label-track: 0.04em;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* 서체 역할: UI는 촘촘한 Pretendard, 읽는 본문은 속이 넓은 IBM Plex Sans KR */
  --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Helvetica, Arial, sans-serif;
  --font-reading: "IBM Plex Sans KR", "Pretendard Variable", Pretendard, "Noto Sans KR", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* 세로 스크롤바 자리를 항상 확보 — 긴 문서에서 스크롤바가 생겨도 화면이 좌측으로 밀리지 않는다 */
html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(var(--accent-rgb), 0.30);
  color: var(--selection-text);
}

body::before,
body::after {
  position: fixed;
  font-size: 12px;
  line-height: 3;
  color: var(--watermark);
  pointer-events: none;
  z-index: 2;
  white-space: pre;
}
body::before { content: "×\A×\A×\A×"; left: 20px; top: 84px; }
body::after { content: "×\A×\A×\A×"; right: 22px; top: 38%; }

@media (max-width: 1560px) {
  body::before, body::after { display: none; }
}

/* 시그니처 프레임: 좌상단·우하단 모서리 컷 + 컷 모서리에서 밝고
   반대편으로 갈수록 사라지는 그라데이션 라인 */
.panel-box,
.admin-banner,
.modal,
.home-card {
  position: relative;
  background: linear-gradient(135deg, var(--frame) 0%, var(--frame-faint) 50%, var(--frame) 100%);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.panel-box::before,
.admin-banner::before,
.modal::before,
.home-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-secondary);
  clip-path: polygon(13.4px 0, 100% 0, 100% calc(100% - 13.4px), calc(100% - 13.4px) 100%, 0 100%, 0 13.4px);
}
.panel-box > *,
.admin-banner > *,
.modal > *,
.home-card > * {
  position: relative;
}

/* 프레임 글린트: 로드/모달 오픈 시 빛 한 줄기가 라인을 따라 한 번 흐른다.
   ::after(z:-1)는 요소 배경 위·inner fill(::before) 아래에 그려져
   1px 링과 컷 대각선에서만 보인다. */
.panel-box::after,
.admin-banner::after,
.modal::after,
.home-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  /* 밝은 띠 길이는 박스 제목 폭을 따라가고(--glint-len, JS가 실측 주입),
     중간 알파 스톱으로 끝으로 갈수록 부드럽게 사라진다 */
  background: linear-gradient(
    135deg,
    transparent calc(50% - var(--glint-len, 60px) / 2),
    rgba(var(--glint-rgb), 0.22) calc(50% - var(--glint-len, 60px) / 4),
    rgba(var(--glint-rgb), 0.95) 50%,
    rgba(var(--glint-rgb), 0.22) calc(50% + var(--glint-len, 60px) / 4),
    transparent calc(50% + var(--glint-len, 60px) / 2)
  );
  background-size: 320% 320%;
  background-position: 0% 0%;
  opacity: 0;
  animation: frame-glint 1.1s ease-out 0.1s;
  pointer-events: none;
}
@keyframes frame-glint {
  0% { opacity: 0; background-position: 0% 0%; }
  20% { opacity: 1; }
  100% { opacity: 0; background-position: 100% 100%; }
}
.right-panel .panel-box:nth-child(2)::after { animation-delay: 0.22s; }
.right-panel .panel-box:nth-child(3)::after { animation-delay: 0.34s; }
/* 목차 박스가 앞에 끼어도 순서대로 흐르도록 형제 순번 기반으로 (지원 브라우저) */
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .right-panel .panel-box::after { animation-delay: calc(0.1s + (sibling-index() - 1) * 0.12s); }
}
.admin-banner::after { animation-delay: 0.46s; }

/* 우측 바깥 칼럼: 관리자 배너 + 홍보 배너 스택 (레이아웃 오른쪽 바깥에 고정) */
.side-column {
  position: fixed;
  top: 90px;
  left: calc(50% + 740px);
  width: 180px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(100vh - 110px);
}
.admin-banner {
  min-height: 210px;
  padding: 16px;
}
.admin-banner .panel-box-header { margin-bottom: 10px; }
.admin-banner-body {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}
.admin-banner-body:empty::before {
  content: "아직 등록된 관리자가 없습니다.";
  color: var(--text-secondary);
}
@media (max-width: 1850px) {
  .side-column:not(.in-panel) { display: none; }
}
/* 1850px 이하: JS가 칼럼을 우측 패널 스택 안으로 옮긴다 → 고정 대신 흐름 배치 */
.side-column.in-panel { position: static; width: auto; max-height: none; display: flex; flex-direction: column; gap: 18px; }

* {
  scrollbar-width: thin;
  /* 스크롤바: 프레임 라인과 같은 세이지 계열, 평소엔 옅게·잡으면 진하게 */
  scrollbar-color: rgba(var(--frame-rgb), 0.45) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(var(--frame-rgb), 0.45);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--frame-rgb), 0.8); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }

a, button, input, textarea, [tabindex] { caret-color: var(--accent); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tabular { font-variant-numeric: tabular-nums; }

.topbar {
  padding: 0 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--frame) 0%, var(--frame-faint) 45%, transparent 80%);
  pointer-events: none;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 6px;
}
.brand-link:hover .site-title { color: var(--accent); }
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 0;
  position: relative;
}

.topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 로고 자리: 이미지 대신 모노그램 텍스트 마크 (로고 이미지가 생기면 <img>로 교체) */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 32px;
  border: 1px solid var(--frame);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.site-title { font-size: 16px; font-weight: 600; }
.topbar-right {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 280px;
}
.topbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}
.topbar-search input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 6px 30px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.topbar-search input::placeholder { color: var(--text-secondary); }
.topbar-search input:hover { border-color: var(--border-hover); }
.topbar-search input:focus-visible { border-color: var(--accent); }
.topbar-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.topbar-search-clear:hover { background: var(--border); color: var(--text); }
@media (max-width: 700px) {
}
@media (max-width: 640px) {
  .site-title { display: none; }
  .topbar-search { width: min(52vw, 220px); }
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.topbar-search .search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  max-height: 400px;
  overflow-y: auto;
  box-shadow: var(--shadow-float);
}
.search-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.search-result:hover { background: var(--bg-tertiary); }
.search-result-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-category {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tint);
  background: var(--plaque-bg);
  border-left: 2px solid var(--plaque-rule);
  padding: 2px 8px;
}
.search-result-empty {
  padding: 7px 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.badge {
  background: rgba(var(--green-rgb), 0.15);
  color: var(--green);
  border: 1px solid rgba(var(--green-rgb), 0.4);
  border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--frame); color: var(--btn-text-hover); }
.btn:active { transform: scale(0.97); }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-primary {
  background: var(--accent-emphasis);
  border-color: var(--accent-emphasis);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--danger-bg); border-color: rgba(var(--red-rgb), 0.4); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); border-color: var(--border); color: var(--text); }

#login-btn,
#login-btn:hover {
  color: transparent;
  background: transparent;
  border-color: transparent;
}

.hidden { display: none !important; }

.layout {
  display: flex;
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100vh - var(--topbar-h));
  background: var(--bg);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
  scrollbar-gutter: stable; /* 카테고리를 펼쳐 스크롤바가 생겨도 목록이 밀리지 않게 */
}
/* 데스크톱: 사이드바는 뷰포트 높이로 고정된 sticky 칼럼 + 내부 스크롤.
   긴 카테고리를 펼쳐도 레이아웃 높이(본문·이전/다음 버튼·배경)에 영향을 주지 않는다. */
@media (min-width: 901px) {
  .sidebar {
    position: sticky;
    top: var(--topbar-h);
    align-self: flex-start;
    height: calc(100vh - var(--topbar-h));
    overscroll-behavior: contain;
  }
}

.right-panel {
  width: 280px;
  flex-shrink: 0;
  background: var(--bg);
  border-left: 1px solid var(--border);
  padding: 16px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.panel-box {
  padding: 13px 14px 15px;
}
/* 1100px 이하: 우측 패널을 숨기지 않고 본문 아래로 내린다 (공지·추천이 태블릿·폰에서도 보이게).
   사이드바는 두 행에 걸쳐 sticky 유지, 목차는 본문 위 인라인 목차가 대신한다 */
@media (max-width: 1100px) {
  body:not(.home-mode) .layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); }
  body:not(.home-mode) .sidebar { grid-row: 1 / 3; }
  .right-panel {
    grid-column: 2;
    width: auto;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 20px 16px 32px;
  }
  .right-panel .right-panel-stack { /* 뒤에 오는 sticky/flex 기본 규칙보다 구체적으로 */
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .right-panel-stack .doc-toc-box { display: none; }
}

.panel-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-box-header h3 {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn-icon:hover { background: var(--hover-strong); color: var(--text); border-color: var(--border-hover); }
.btn-icon:active { transform: scale(0.94); }

.panel-empty {
  color: var(--text-secondary);
  font-size: 13px;
  list-style: none;
  padding: 4px 0;
}

.popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: popular;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.popular-list li {
  counter-increment: popular;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.popular-list li::before {
  content: counter(popular);
  flex-shrink: 0;
  width: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.popular-link {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.popular-link:hover { color: var(--accent); }

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recent-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
}
.recent-link:hover { color: var(--accent); }
.recent-link-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-link-time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-secondary);
}

.notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.notice-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.notice-item-title {
  font-size: 13px;
  font-weight: 600;
}
.notice-item-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.notice-item-time {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}
.notice-delete {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 14px;
}

.sidebar-loading, .sidebar-empty {
  color: var(--text-secondary);
  font-size: 13px;
  padding: 8px;
}

.sidebar-category {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 16px 0 6px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
/* 틱 + 라벨 + 헤어라인 섹션 헤더 (브리핑 사이드바 문법의 그린 변형)
   order로 헤어라인을 라벨과 액션 버튼 사이에 끼워 버튼은 우측 끝 유지 */
.sidebar-category::after {
  content: "";
  flex: 1;
  order: 1;
  height: 1px;
  background: var(--hairline);
  min-width: 12px;
}
.sidebar-category .sidebar-row-actions { order: 2; }
.sidebar-category-main::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 10px;
  background: var(--frame);
}
.sidebar-category.active-category .sidebar-category-main::before {
  background: var(--accent);
}
.sidebar-category:hover { background: var(--bg-tertiary); color: var(--text); }
.sidebar-category:focus-visible { color: var(--text); }
.sidebar-category:first-child, .sidebar-wiki + .sidebar-category { margin-top: 0; }
.sidebar-category[draggable="true"] { cursor: grab; }
.sidebar-category.dragging { opacity: 0.4; cursor: grabbing; }
.sidebar-category.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.sidebar-category.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
/* 펼쳐진 카테고리 "뒤"에 놓을 때는 문서 목록 하단에 가이드라인 */
.sidebar-group.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

.sidebar-category-main {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.sidebar-category .chevron {
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  transform: rotate(90deg);
}
.sidebar-category.collapsed .chevron { transform: rotate(0deg); }

.sidebar-group {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.sidebar-group.collapsed {
  grid-template-rows: 0fr;
}
.sidebar-group-inner {
  overflow: hidden;
  min-height: 0;
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
  transition: border-color 0.2s ease;
}
.sidebar-category.active-category + .sidebar-group .sidebar-group-inner {
  border-left-color: var(--accent);
}
.sidebar-group-inner > .sidebar-link {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  opacity: 1;
  transform: translateY(0);
}
.sidebar-group.collapsed .sidebar-group-inner > .sidebar-link {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  cursor: pointer;
}
.sidebar-link:hover { background: var(--bg-tertiary); }
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(var(--frame-rgb), 0.28), rgba(var(--frame-rgb), 0.08));
  color: var(--nav-active-text);
  font-weight: 600;
  view-transition-name: nav-active; /* 문서 전환 시 필이 항목 사이를 미끄러져 이동 */
}
.sidebar-link.active::after {
  content: "›";
  flex-shrink: 0;
  color: var(--nav-active-text);
  font-weight: 400;
  line-height: 1;
  transform: translateY(-2px);
}

.sidebar-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-link > .sidebar-link-label { flex: 1; }

.sidebar-row-actions {
  display: none;
  flex-shrink: 0;
  gap: 4px;
}
.sidebar-link:hover .sidebar-row-actions,
.sidebar-link:focus-within .sidebar-row-actions,
.sidebar-category:hover .sidebar-row-actions,
.sidebar-category:focus-within .sidebar-row-actions {
  display: flex;
}
.sidebar-row-actions .btn-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
}
.sidebar-row-actions .btn-icon:hover { color: var(--text); }

.sidebar-link[draggable="true"] { cursor: grab; }
.sidebar-link.dragging { opacity: 0.4; cursor: grabbing; }
.sidebar-link.drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.sidebar-link.drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

.sidebar-link-root {
  margin-bottom: 2px;
}
.sidebar-link-root:last-of-type {
  margin-bottom: 16px;
}

.sidebar-category.active-category {
  color: var(--accent);
  font-weight: 800;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  background: var(--bg);
  padding: 32px 40px 64px;
}

.content-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  animation: doc-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 문서 열: 넓은 화면에서 한 줄 ~49자까지 늘어나지 않게 (720px ≈ 45자). 랜딩은 제외 */
.content-inner:not(.home) { max-width: 720px; margin-inline: auto; }
/* 열람 화면: snow 편집기 안쪽 여백(15px)을 없애 본문 왼쪽 끝을 제목·밑줄·이전/다음과 맞춘다 */
.markdown-body.ql-editor { padding: 0; }
@keyframes doc-in {
  from { opacity: 0; transform: translateY(6px); }
}

.empty-state h2 { font-size: 18px; }
.empty-state p { color: var(--text-secondary); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 20px;
  position: relative;
}
.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
  background: linear-gradient(180deg, rgba(var(--frame-rgb), 0.16), transparent);
  pointer-events: none;
}
.page-header h1 {
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* fit-content: ::after 바의 %가 제목 텍스트 폭 기준이 되게 한다 */
  width: fit-content;
  background: linear-gradient(180deg, var(--title-top) 25%, var(--title-mid) 60%, var(--tint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-header h1::after {
  content: "";
  display: block;
  /* 제목 텍스트와 같은 길이로, 끝으로 갈수록 사라지는 그라데이션 */
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 100%);
  margin-top: 10px;
  transform-origin: left;
  animation: bar-draw 0.5s 0.18s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes bar-draw {
  from { transform: scaleX(0); }
}
.page-description { color: var(--text-secondary); font-size: 15px; margin: 6px 0 0; }
.page-meta { color: var(--text-secondary); font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.page-actions { display: flex; gap: 8px; }

.markdown-body {
  font-size: 17px; /* 긴 한글 문서: 16px 하한선보다 한 단계 위, 폭은 720px(≈42자)로 묶여 있다 */
  line-height: 1.75;
  /* flow-root: 우측 플로팅 목차가 본문 높이를 넘어 page-nav 위로 흐르지 않게 가둔다 */
  display: flow-root;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  /* 자동 구분선 없음 — 필요하면 편집기에서 가로줄(hr)을 직접 넣는다 */
  margin-top: 28px;
  margin-bottom: 12px;
  line-height: 1.3;
}
/* 본문 제목 스케일 — 페이지 제목(.page-header h1, 32px)이 항상 최상위.
   열람(.markdown-body.ql-editor)과 편집기(#ed-quill .ql-editor)에 같은 값 (snow 기본 2em/1.5em/1.17em 대체) */
.markdown-body h1, .ql-editor h1 { font-size: 26px; line-height: 1.35; letter-spacing: -0.01em; }
.markdown-body h2, .ql-editor h2 { font-size: 21px; line-height: 1.4; }
.markdown-body h3, .ql-editor h3 { font-size: 18px; line-height: 1.45; font-weight: 600; }
.markdown-body h4, .ql-editor h4 { font-size: 16px; line-height: 1.5; font-weight: 600; }
.markdown-body :is(h5, h6), .ql-editor :is(h5, h6) { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--text-secondary); }
.markdown-body :is(h1, h2, h3, h4, h5, h6) strong, .ql-editor :is(h1, h2, h3, h4, h5, h6) strong { font-weight: inherit; }
/* 열람 리듬: 큰 제목일수록 위 여백을 더, 제목이 연달아 오면 좁게 */
.markdown-body h1 { margin-top: 40px; }
.markdown-body h2 { margin-top: 36px; }
.markdown-body :is(h1, h2, h3, h4) + :is(h1, h2, h3, h4) { margin-top: 16px; }
/* 열람 전용: Quill이 남긴 빈 제목(<h3><br></h3>)은 구멍만 만든다 — 편집기에선 캐럿 자리라 유지 */
.markdown-body :is(h1, h2, h3, h4, h5, h6):has(> br:only-child) { display: none; }
.markdown-body p { margin: 12px 0; }
.markdown-body ul { padding-left: 24px; }
.markdown-body a { color: var(--accent); }
.markdown-body a:hover { text-decoration-thickness: 2px; }
.markdown-body code {
  background: var(--bg-tertiary);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 85%;
}
.markdown-body pre,
.markdown-body .ql-code-block-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}
.markdown-body blockquote {
  border-left: 3px solid var(--border);
  margin-left: 0;
  padding-left: 12px;
  color: var(--text-secondary);
}
.markdown-body table {
  border-collapse: collapse;
  width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid var(--border);
  padding: 6px 12px;
}
/* 이미지 프레임: 세이지 라인 + 얇은 매트 + 은은한 그림자 (열람·편집 동일) */
.markdown-body img,
.ql-editor img,
.ql-image-block img {
  max-width: 100%;
  border-radius: 4px;
  border: 1px solid rgba(var(--frame-rgb), 0.55);
  padding: 3px;
  background: var(--bg-secondary);
  box-shadow: var(--shadow-img);
}
.markdown-body hr, .ql-editor hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.page-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
  min-width: 0;
}
.page-nav-link:hover { background: var(--bg-tertiary); border-color: var(--border-hover); }
.page-nav-link:active { transform: scale(0.99); }
.page-nav-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.page-nav-title {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-nav-next {
  grid-column: 2;
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 640px) {
  .page-nav { grid-template-columns: 1fr; }
  .page-nav-next { grid-column: 1; }
}

.editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.editor-label-sm {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: -4px;
}
.editor select,
.editor input[type="text"] {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.editor select { cursor: pointer; width: 220px; }
.editor input[type="text"]:hover,
.editor select:hover { border-color: var(--border-hover); }
.editor input[type="text"]:focus,
.editor select:focus {
  outline: none;
  border-color: var(--accent-emphasis);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.editor-title-input {
  font-size: 22px;
  font-weight: 700;
  padding: 14px 16px !important;
}
.editor-desc-input {
  color: var(--text-secondary);
}
.editor-actions-top {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

/* Quill dark theme */
#ed-quill { background: var(--bg-secondary); border-radius: 0 0 6px 6px; padding-left: 26px; }
.ql-toolbar.ql-snow {
  background: var(--bg-tertiary);
  border-color: var(--border) !important;
  border-radius: 6px 6px 0 0;
}
.ql-container.ql-snow {
  border-color: var(--border) !important;
  border-radius: 0 0 6px 6px;
  font-family: inherit;
  font-size: 17px; /* 열람 본문과 동일 */
}
.ql-editor { min-height: 400px; color: var(--text); line-height: 1.7; }
.ql-editor.ql-blank::before { color: var(--text-secondary); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--text-secondary); }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--text-secondary); }
.ql-snow .ql-picker { color: var(--text-secondary); }
/* snow는 열린 피커 라벨(과 아이콘)을 #ccc로 고정한다 — 라이트 툴바에서 안 보여서 토큰으로 */
.ql-snow .ql-picker.ql-expanded .ql-picker-label { color: var(--text); }
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke { stroke: var(--text); }
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill { fill: var(--text); }
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: var(--border); }
/* 나머지 snow 고정색(#06c 활성 fill·선택 항목·포커스, #000/#fff 색상 피커 초기 스와치) */
.ql-toolbar.ql-snow button.ql-active .ql-fill,
.ql-toolbar.ql-snow button:focus .ql-fill { fill: var(--accent); }
.ql-toolbar.ql-snow button:focus .ql-stroke { stroke: var(--accent); }
.ql-snow .ql-toolbar .ql-picker-item.ql-selected { color: var(--accent); }
.ql-snow .ql-color-picker .ql-picker-item { outline: 1px solid var(--border); }
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover { border-color: var(--accent); }
.ql-snow .ql-picker-options {
  background: var(--bg-secondary);
  border-color: var(--border) !important;
}
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-label:hover {
  color: var(--accent) !important;
}
.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke { stroke: var(--accent) !important; }
.ql-snow .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill { fill: var(--accent) !important; }
.ql-toolbar.ql-snow .ql-picker-label.ql-active,
.ql-toolbar.ql-snow button.ql-active {
  color: var(--accent);
}
.ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--accent); }
.ql-snow .ql-tooltip {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-pop);
}
.ql-snow .ql-tooltip input[type="text"] {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
.ql-snow .ql-editor blockquote {
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
}
/* Quill 2는 코드 블록을 div.ql-code-block-container로 그린다 (pre.ql-syntax 아님).
   snow 기본값(#23241f/#f8f8f2)은 라이트 바닥에서 검은 덩어리로 보여서 토큰으로 덮는다 */
.ql-snow .ql-editor .ql-code-block-container {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ql-snow a { color: var(--accent); } /* 편집기 안 링크도 사이트 강조색으로 (snow 기본 #06c) */
.ql-image-block {
  margin: 12px 0;
}
.ql-image-block img {
  display: block;
  cursor: grab;
}
.ql-image-block.ql-block-dragging img { cursor: grabbing; }

.ql-block-handle {
  position: absolute;
  left: 2px;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease;
  user-select: none;
}
.ql-block-handle.visible { display: flex; opacity: 1; }
.ql-block-handle:hover { background: var(--bg-tertiary); color: var(--text); }
.ql-block-handle:active { cursor: grabbing; }

.ql-editor > .ql-block-dragging { opacity: 0.35; }
.ql-editor > .ql-block-drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.ql-editor > .ql-block-drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }

.ql-block-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0.9;
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: var(--shadow-pop);
  font-size: 13px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-block-ghost img {
  display: block;
  max-width: 100%;
  max-height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: backdrop-in 0.15s ease;
}
.modal {
  padding: 20px;
  width: 340px;
  animation: modal-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop, .modal { animation: none; }
}
.modal h3 { margin: 0 0 6px; font-size: 16px; }
.modal-desc { color: var(--text-secondary); font-size: 13px; margin: 0 0 12px; }
.modal-hint { color: var(--text-secondary); font-size: 11px; margin: 4px 0 0; }
.modal label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 10px 0 4px;
}
.modal input, .modal select, .modal textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.modal input:hover, .modal select:hover, .modal textarea:hover { border-color: var(--border-hover); }
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--accent-emphasis);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
.modal select { cursor: pointer; }
.modal input#np-category-new { margin-top: 8px; }
.modal-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 8px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-pop);
  animation: toast-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 320px;
}
.toast.toast-error {
  border-color: rgba(var(--red-rgb), 0.4);
  color: var(--toast-error-text);
}
.toast.toast-leaving {
  animation: toast-out 0.15s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ── 문서 목차 ──
   데스크톱: 우측 패널 최상단 박스(.doc-toc-box), 패널 스택이 sticky라 스크롤을 따라온다.
   모바일(우측 패널 숨김): 본문 위 인라인 블록(.doc-toc-inline, 사각 브래킷 프레임) */
.right-panel-stack {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.doc-toc { font-size: 13px; }
.doc-toc-box .doc-toc { display: flex; flex-direction: column; gap: 1px; }
/* [ ] 브래킷 프레임 — 패널의 모서리 컷 프레임과 구별되는 목차 전용 장치 */
.doc-toc-frame {
  position: relative;
  padding: 12px 18px 14px;
}
.doc-toc-frame::before,
.doc-toc-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  border: 1px solid rgba(var(--frame-rgb), 0.55);
  pointer-events: none;
}
.doc-toc-frame::before { left: 0; border-right: none; }
.doc-toc-frame::after { right: 0; border-left: none; }
.doc-toc-inline {
  display: none;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .doc-toc-inline { display: block; }
}
.doc-toc-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.doc-toc-link {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 3px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-toc-link:hover { color: var(--accent); }
.doc-toc-h2 { padding-left: 10px; }
.doc-toc-h3 { padding-left: 20px; }
.doc-toc-h4 { padding-left: 30px; }
.markdown-body :is(h1, h2, h3, h4) { scroll-margin-top: 64px; }

/* ── 수정 히스토리 모달 ── */
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(320px, calc(100vh - 240px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hairline-soft);
}
.history-item:last-child { border-bottom: none; }
.history-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history-title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-date { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.history-restore { flex-shrink: 0; padding: 4px 10px; font-size: 12px; }
.history-empty { color: var(--text-secondary); font-size: 13px; padding: 8px 2px; list-style: none; }

/* ── 인기 문서 순위: 크고 가는 숫자, 1위만 골드 ── */
.popular-list li::before {
  content: counter(popular, decimal-leading-zero);
  width: 28px;
  font-size: 19px;
  font-weight: 300;
  color: var(--numeral);
  letter-spacing: 0.02em;
}
.popular-list li:first-child::before { color: var(--gold-bright); }
.popular-list li:first-child .popular-link:hover { color: var(--gold-bright); }

/* ── 이전/다음 문서 카드: hover 시 브래킷 ──
   브래킷이 닿는 좌상/우하 모서리는 직각으로 (시그니처 컷 방향과 동일한 비대칭) */
.page-nav-link { position: relative; border-radius: 0 8px 0 8px; }
.page-nav-link::before,
.page-nav-link::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--frame);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.page-nav-link::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.page-nav-link::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.page-nav-link:hover::before,
.page-nav-link:hover::after { opacity: 1; }

/* ── 모바일: 사이드바 드로어 ── */
.menu-btn { display: none; font-size: 13px; }
.sidebar-backdrop {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: var(--backdrop-soft);
  z-index: 39;
}
/* 드로어를 연 채 뷰포트가 커져도(태블릿 회전 등) 백드롭이 남지 않게 */
@media (min-width: 901px) {
  .sidebar-backdrop { display: none; }
}
body.drawer-open { overflow: hidden; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; width: 38px; height: 38px; font-size: 17px; }
  .layout { border-left: none; border-right: none; }
  body:not(.home-mode) .layout { grid-template-columns: minmax(0, 1fr); }
  .right-panel { grid-column: 1; }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 280px;
    z-index: 40;
    background: var(--bg);
    border-right: 1px solid var(--border);
    transform: translateX(-105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
  }
  .sidebar.open {
    transform: none;
    box-shadow: var(--shadow-drawer);
  }
  .content { padding: 20px 16px 48px; }
  .page-header { flex-wrap: wrap; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .content-inner,
  .page-header h1::after,
  .panel-box::after,
  .admin-banner::after,
  .modal::after {
    animation: none;
  }
}

/* ══ 2026 웹 플랫폼 신기능 적용 ══ */

/* 타이포그래피: 줄바꿈 품질 + 한글·영문/숫자 자동 간격 */
.markdown-body, .ql-editor {
  font-family: var(--font-reading);
  text-wrap: pretty;
  text-autospace: normal;
  word-break: keep-all;      /* 한글 단어 중간에서 줄이 끊기지 않게 */
  overflow-wrap: anywhere;   /* 긴 URL·코드는 그래도 넘치지 않게 */
}
.page-description, .home-intro, .home-wiki-desc { font-family: var(--font-reading); }
.markdown-body :is(h1, h2, h3, h4), .page-header h1, .empty-state h2 { text-wrap: balance; }
.markdown-body :is(pre, code), .ql-editor :is(pre, code) { text-autospace: no-autospace; }

/* 프레임 안 한 줄 텍스트: 반 리딩을 잘라 라인과 글자가 정확히 맞게 */
.panel-box-header h3, .admin-banner h3, .btn {
  text-box-trim: trim-both;
  text-box-edge: text alphabetic;
}

/* 목록 순차 등장 (sibling-index — 사이드바는 첫 렌더에만) */
@keyframes item-in {
  from { opacity: 0; transform: translateX(-6px); }
}
/* 그룹(문서 목록)이 자기 상위 순번을 시간으로 바꿔 자식 문서에 상속 →
   문서 딜레이 = 카테고리 제목 딜레이 + 그룹 안 순번. 제목이 먼저, 문서가 뒤따른다. */
@property --group-delay {
  syntax: "<time>";
  inherits: true;
  initial-value: 0ms;
}
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .sidebar:not(.settled) .sidebar-group { --group-delay: calc(sibling-index() * 28ms); }
  .sidebar:not(.settled) .sidebar-category,
  .sidebar:not(.settled) .sidebar-link-root,
  .popular-list li,
  .recent-list li,
  .notice-list li,
  .recommend-list li {
    animation: item-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: min(calc(sibling-index() * 28ms), 420ms);
  }
  .sidebar:not(.settled) .sidebar-group .sidebar-link {
    animation: item-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: min(calc(var(--group-delay) + sibling-index() * 28ms), 700ms);
  }
}

/* View Transitions: 루트는 즉시 교체(본문은 doc-in이 담당), 활성 필만 모핑 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
/* 활성 필: 이전 위치에서 새 위치로 위/아래 모핑하지 않고, 새 위치에서 좌측으로부터 슬라이드 인 */
::view-transition-group(nav-active) { animation: none; }
::view-transition-old(nav-active) { animation: none; opacity: 0; }
::view-transition-new(nav-active) {
  animation: nav-active-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes nav-active-in {
  from { opacity: 0; transform: translateX(-12px); }
}

/* 검색어 하이라이트 (Custom Highlight API — DOM을 건드리지 않음) */
::highlight(search) {
  background-color: rgba(var(--frame-rgb), 0.38);
  color: var(--highlight-text);
}

/* 목차 현재 섹션 */
.doc-toc-link.current { color: var(--accent); }

/* 읽기 진행률: 상단바 페이드 라인 위를 선명한 초록이 채워간다 (스크롤 기반 애니메이션).
   꼬리(그라데이션 구간)는 스크롤할수록 점차 짧아져 100%에서는 0 — 끝까지 왔음이 분명히 보인다. */
@property --progress-tail {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 60%;
}
@keyframes read-progress {
  from { transform: scaleX(0); --progress-tail: 60%; }
  to { transform: scaleX(1); --progress-tail: 0%; }
}
@supports (animation-timeline: scroll()) {
  .topbar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    /* 꼬리 길이 --progress-tail은 진행률에 따라 60% → 0%로 줄어든다 */
    background: linear-gradient(
      90deg,
      var(--accent) 0%,
      var(--accent) calc(100% - var(--progress-tail)),
      var(--frame) calc(100% - var(--progress-tail) * 0.4),
      rgba(var(--frame-rgb), 0.15) 100%
    );
    transform-origin: left;
    transform: scaleX(0);
    animation: read-progress linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-category, .sidebar-link, .popular-list li, .recent-list li, .notice-list li { animation: none; }
  ::view-transition-group(*) { animation: none; }
}

/* 에디터 툴바: px 글자 크기 입력 */
.ql-toolbar .ql-fontsize {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.ql-toolbar .ql-fontsize-input {
  width: 58px;
  height: 24px;
  padding: 0 6px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.ql-toolbar .ql-fontsize-input:focus { border-color: var(--frame); outline: none; }
.ql-toolbar .ql-fontsize-input.is-default { color: var(--text-secondary); } /* 기본값(계산된 크기) 표시 */
.ql-toolbar .ql-fontsize-input.is-default:focus { color: var(--text); }
.ql-toolbar .ql-fontsize-unit { font-size: 11px; color: var(--text-secondary); }

/* ── 추천 문서 패널 ── */
.recommend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recommend-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
  cursor: pointer;
  min-width: 0;
}
.recommend-link:hover { color: var(--accent); }
.recommend-link-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommend-link-cat {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--tint);
  background: var(--plaque-bg);
  border-left: 2px solid var(--plaque-rule);
  padding: 1px 6px;
}

/* 추천 문서 선택 모달 */
.recommend-options {
  max-height: min(360px, calc(100vh - 260px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 10px;
}
.recommend-group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 10px 0 4px;
}
.recommend-group:first-child { margin-top: 0; }
.recommend-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.recommend-option:hover { background: var(--bg-tertiary); }
.recommend-option input { accent-color: var(--accent); margin: 0; }

/* ══ 메인 페이지 ══ */
.content-inner.home { gap: 28px; }
.home-hero { padding: 8px 0 4px; }
.home-kicker {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.home-title {
  font-size: 40px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
  width: fit-content;
  background: linear-gradient(180deg, var(--title-top) 25%, var(--title-mid) 60%, var(--tint) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 12px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 30%, transparent 100%);
  transform-origin: left;
  animation: bar-draw 0.5s 0.18s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.home-intro {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* 현황 스트립: 숫자 크게, 라벨 작게, 세로 헤어라인으로 구분 */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.home-stat {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.home-stat:last-child { border-right: none; }
.home-stat-value {
  font-size: 26px;
  font-weight: 400; /* 300은 다크 바닥의 한글에 너무 가늘다 */
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.home-stat-label {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

/* 카테고리 카드 그리드 */
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  min-width: 0;
  animation: item-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  .home-card { animation-delay: min(calc(sibling-index() * 45ms), 500ms); }
}
.home-card:hover .home-card-title { color: var(--accent); }
.home-card:hover .home-card-go { color: var(--accent); transform: translateX(3px); }
.home-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.home-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.home-card-count {
  flex-shrink: 0;
  font-size: 19px;
  font-weight: 300;
  color: var(--numeral);
  font-variant-numeric: tabular-nums;
}
.home-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  color: var(--text-secondary);
}
.home-card-list li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 10px;
  border-left: 1px solid rgba(var(--frame-rgb), 0.35);
}
.home-card-more { color: var(--text-secondary); opacity: 0.7; }
.home-card-go {
  margin-top: auto;
  font-size: 12px;
  color: var(--text-secondary);
  transition: color 0.12s ease, transform 0.15s ease;
}
@media (max-width: 900px) {
  .home-title { font-size: 30px; }
  .home-stat { flex-basis: 45%; }
}

/* ══ 메인 화면 모드: 사이드바·우측 패널 없이 독립된 랜딩 ══ */
body.home-mode .sidebar,
body.home-mode .right-panel,
body.home-mode .sidebar-backdrop,
body.home-mode .menu-btn { display: none !important; }
body.home-mode .content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 36px 72px;
}
body.home-mode .home-title { font-size: 52px; }
body.home-mode .home-intro { font-size: 17px; max-width: 60ch; }
body.home-mode .home-stats { margin-top: 8px; }

/* 위키(제품) 카드: 카테고리 묶음 단위 */
.home-wikis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.home-wiki-card { padding: 22px 24px 18px; gap: 12px; }
.home-wiki-title { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: 0.01em; transition: color 0.12s ease; }
.home-wiki-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-wiki-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-wiki-sections li {
  font-size: 11.5px;
  color: var(--tint);
  background: var(--plaque-bg);
  border-left: 2px solid var(--plaque-rule);
  padding: 2px 8px;
}
.home-wiki-foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}
.home-card:hover .home-wiki-title { color: var(--accent); }

/* 메인 하단: 최근 수정 (우측 패널이 숨겨지므로 여기서 보여준다) */
.home-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.home-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4px 28px;
}
.home-recent a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
  cursor: pointer;
}
.home-recent a:hover { color: var(--accent); }
.home-recent-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.home-recent-meta { flex-shrink: 0; font-size: 11px; color: var(--text-secondary); }
@media (max-width: 900px) {
  body.home-mode .content { padding: 28px 18px 48px; }
  body.home-mode .home-title { font-size: 34px; }
}

/* ── 메인 위키 카드: 로그인 시 "위키 삭제" (조용히 있다가 호버에서만 붉어진다) ── */
.home-wiki-foot-actions { display: inline-flex; align-items: baseline; gap: 12px; }
.home-wiki-delete {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: underline dotted transparent;
  text-underline-offset: 3px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.home-wiki-delete:hover,
.home-wiki-delete:focus-visible { color: var(--red); text-decoration-color: currentColor; outline: none; }

/* 확인 모달: 이름을 그대로 입력해야 확인 버튼이 살아나는 구간 */
.confirm-typed { margin: -4px 0 14px; }
.confirm-typed label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.confirm-typed input { font-size: 13px; }
.btn:disabled:hover { background: var(--btn-bg); border-color: var(--btn-border); color: var(--btn-text); }

/* ── 라이트 테마 ──
   차콜 대신 서늘한 회백색 바닥. 같은 시안 계열을 더 진하게 써서 흰 바닥에서도 글자 대비가 나오게 했고,
   프레임 라인은 중간 톤 청록이라 밝은 글린트가 그 위로 지나간다. 기본은 다크(브랜드), 토글로 저장. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f3;
  --bg-secondary: #f9fbfc;
  --bg-tertiary: #e2e8eb;
  --border: #d2dadd;
  --text: #1c2327;
  --text-secondary: #5e6a70;
  --accent: #0a7692;          /* 4.6:1 on --bg (본문 링크·목차) */
  --accent-rgb: 10, 118, 146;
  --accent-emphasis: #0a6e89;
  --accent-hover: #085e75;    /* 흰 글자 버튼은 호버에서 더 진해져야 대비가 오른다 */
  --frame: #3d92a8;
  --frame-rgb: 61, 146, 168;
  --frame-faint: rgba(var(--frame-rgb), 0.2);
  --glint-rgb: 228, 249, 255;
  --tint: #2a6f84;
  --plaque-bg: #e4f2f6;
  --plaque-rule: #b5d8e2;
  --btn-bg: #e9f1f4;
  --btn-bg-hover: #dbe9ee;
  --btn-border: #a6c0c8;
  --btn-text: #245a69;
  --btn-text-hover: #123c48;
  --highlight-text: #0c2a33;
  --gold: #8a6a1c;
  --gold-bright: #8e6f18;     /* 4.6:1 on --bg-secondary (1위 숫자) */
  --green: #1a7432;
  --green-rgb: 26, 116, 50;
  --red: #b52d23;
  --red-rgb: 181, 45, 35;
  --on-accent: #fff;
  --selection-text: #0c2a33;
  --watermark: rgba(28, 35, 39, 0.09);
  --border-hover: #b3bec4;
  --hover-strong: #d8e0e4;
  --hairline: rgba(20, 40, 48, 0.12);
  --hairline-soft: rgba(20, 40, 48, 0.08);
  --numeral: #6b747a;
  --title-top: #1a262c;
  --title-mid: #2e4a55;
  --toast-error-text: #a3261d;
  --backdrop: rgba(22, 34, 40, 0.5);
  --backdrop-soft: rgba(22, 34, 40, 0.38);
  --shadow-pop: 0 8px 24px rgba(20, 40, 48, 0.16);
  --shadow-float: 0 12px 32px rgba(20, 40, 48, 0.14);
  --shadow-img: 0 6px 18px rgba(20, 40, 48, 0.12);
  --shadow-drawer: 16px 0 40px rgba(20, 40, 48, 0.2);
  --nav-active-text: #085d74;
  --bg-secondary-rgb: 249, 251, 252;
}
/* 라이트에선 투명도로 눌러둔 보조 텍스트가 대비 기준 밑으로 내려가므로 토큰 색 그대로 쓴다 */
:root[data-theme="light"] .home-card-more { opacity: 1; }

/* 테마 토글: 다크일 땐 해(라이트로), 라이트일 땐 달(다크로) — 누르면 가게 될 쪽을 보여준다 */
.theme-btn { border-radius: 0; border-color: var(--frame); clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.theme-btn svg { width: 15px; height: 15px; }
.theme-btn .icon-moon { display: none; }
:root[data-theme="light"] .theme-btn .icon-sun { display: none; }
:root[data-theme="light"] .theme-btn .icon-moon { display: block; }

/* 테마 전환 순간에만 루트 크로스페이드를 켠다 (문서 전환 때는 꺼져 있음).
   활성 필의 view-transition-name을 잠시 떼어 전체가 한 장으로 페이드되게 한다. */
html.theme-switching::view-transition-old(root) { animation: theme-fade 0.32s ease both; }
html.theme-switching::view-transition-new(root) { animation: theme-fade 0.32s ease reverse both; }
html.theme-switching .sidebar-link.active { view-transition-name: none; }
@keyframes theme-fade { from { opacity: 1; } to { opacity: 0; } }

/* ── 사이드바 상단: 지금 보고 있는 위키 이름 + 랜딩으로 돌아가는 링크 ── */
.sidebar-wiki { padding: 2px 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hairline-soft); }
.sidebar-wiki-back {
  display: inline-block;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.12s ease;
}
.sidebar-wiki-back:hover, .sidebar-wiki-back:focus-visible { color: var(--accent); }
.sidebar-wiki-name { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 4px; letter-spacing: 0; }

/* ── 문서 드래그: 카테고리 간 이동 ──
   드래그 중에만 하단에 "카테고리 없음" 드롭 영역이 나타나고, 카테고리 헤더 위에 올리면 그 카테고리로 들어간다는 표시 */
.sidebar-dropzone {
  display: none;
  margin: 10px 4px 4px;
  padding: 9px 10px;
  border: 1px dashed var(--border-hover);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}
.sidebar.page-dragging .sidebar-dropzone { display: block; }
.sidebar-category.drop-into,
.sidebar-dropzone.drop-into {
  background: rgba(var(--accent-rgb), 0.12);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}

/* ── 위키 헤더: 이름 옆 이름 변경 버튼(호버 시), 드롭 대상 강조; 루트 드롭 영역은 루트 목록 바로 아래 ── */
.sidebar-wiki-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.sidebar-wiki-row .sidebar-wiki-name { margin-top: 0; }
.sidebar-wiki .sidebar-row-actions { display: flex; } /* 위키 이름 변경 버튼은 로그인 시 항상 보이게 */
.sidebar-wiki.drop-into { background: rgba(var(--accent-rgb), 0.12); box-shadow: inset 0 0 0 1px var(--accent); }
.sidebar-dropzone { margin: 2px 4px 12px; }

/* ── 사이드바 바닥 디스코드 초대 ──
   박스 없이 아이콘·이름·인원수·버튼만. 목록이 짧으면 바닥에 붙고(margin-top:auto), 길면 목록 뒤를 따라 스크롤된다. */
.sidebar { display: flex; flex-direction: column; }
.sidebar-list { flex: 0 0 auto; }
.discord-card {
  margin-top: auto;
  padding: 18px 4px 4px;
  border-top: 1px solid var(--hairline-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.discord-card[hidden] { display: none; }
.discord-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.discord-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-img);
}
.discord-card-icon[hidden] { display: none; }
.discord-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.discord-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s ease;
}
.discord-card-head:hover .discord-card-name,
.discord-card-head:focus-visible .discord-card-name { color: var(--accent); }
.discord-card-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.discord-card-meta b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dc-online i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: 1px; }
.discord-card-cta {
  display: block;
  text-align: center;
  padding: 9px 12px;
  background: var(--discord-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.12s ease, transform 0.08s ease;
}
.discord-card-cta:hover, .discord-card-cta:focus-visible { background: var(--discord-green-hover); }
.discord-card-cta:active { transform: scale(0.985); }
.discord-card-meta[hidden], .dc-online[hidden], .dc-members[hidden] { display: none; }

/* ── 메인 디스코드 배너: 서버 배너 이미지를 바닥에 깔고 왼쪽은 오버레이로 눌러 글자를 세운다 ── */
.home-discord {
  position: relative;
  display: block;
  margin: 4px 0 28px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(135deg, var(--frame) 0%, var(--frame-faint) 50%, var(--frame) 100%);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.16s ease;
}
.home-discord:hover { transform: translateY(-1px); }
.home-discord-art {
  position: absolute;
  inset: 1px;
  background: var(--bg-secondary) center / cover no-repeat;
  clip-path: polygon(13.4px 0, 100% 0, 100% calc(100% - 13.4px), calc(100% - 13.4px) 100%, 0 100%, 0 13.4px);
}
.home-discord-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--bg-secondary-rgb), 0.94) 0%, rgba(var(--bg-secondary-rgb), 0.82) 48%, rgba(var(--bg-secondary-rgb), 0.42) 100%);
}
.home-discord-art:not(.has-art)::after { background: linear-gradient(90deg, transparent, var(--frame-faint)); }
.home-discord-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  min-height: 112px;
}
.home-discord-icon {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-img);
}
.home-discord-icon[hidden] { display: none; }
.home-discord-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.home-discord-kicker { font-size: 11px; letter-spacing: 0.12em; color: var(--tint); }
.home-discord-name { font-size: 20px; font-weight: 700; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-discord-meta { display: flex; gap: 12px; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.home-discord-meta[hidden] { display: none; }
.home-discord-meta b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.home-discord-cta {
  flex-shrink: 0;
  padding: 10px 18px;
  background: var(--discord-green);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.12s ease;
}
.home-discord:hover .home-discord-cta, .home-discord:focus-visible .home-discord-cta { background: var(--discord-green-hover); }
@media (max-width: 640px) {
  .home-discord-body { flex-wrap: wrap; padding: 18px; }
  .home-discord-cta { flex-basis: 100%; text-align: center; }
  .home-discord-name { white-space: normal; font-size: 18px; }
}

/* ── 홍보 배너 스택 (관리자 배너 아래) ── */
.promo-banners { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.promo-banners-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.promo-banners-label { font-size: 11px; letter-spacing: 0.12em; color: var(--text-secondary); }
.promo-banners-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.promo-banner {
  display: block;
  padding: 1px;
  background: linear-gradient(135deg, var(--frame) 0%, var(--frame-faint) 50%, var(--frame) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.16s ease;
}
.promo-banner img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-secondary);
  clip-path: polygon(9.4px 0, 100% 0, 100% calc(100% - 9.4px), calc(100% - 9.4px) 100%, 0 100%, 0 9.4px);
}
a.promo-banner:hover, a.promo-banner:focus-visible { transform: translateY(-1px); }
.promo-banner-empty {
  border: 1px dashed var(--border-hover);
  border-radius: 6px;
  padding: 14px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

/* 배너 편집 모달 */
.modal-wide { width: 460px; max-width: calc(100vw - 32px); }
.promo-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; max-height: 52vh; overflow-y: auto; }
.promo-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: 6px; }
.promo-row-thumb {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.promo-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.promo-row-empty { font-size: 11px; color: var(--text-secondary); }
.promo-row-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.promo-row-fields input { margin: 0; font-size: 12.5px; }
.promo-row-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.promo-row.is-uploading .promo-pick { opacity: 0.6; pointer-events: none; }
.promo-add { margin-bottom: 8px; }

/* 문서 제목 옆 연필(로그인 시): 제목·주소·설명 모달로 바로 */
.page-title-row { display: flex; align-items: center; gap: 10px; }
.page-title-edit { flex-shrink: 0; opacity: 0.7; }
.page-title-edit:hover, .page-title-edit:focus-visible { opacity: 1; }

/* 메인 "최근 수정"은 위키 카드 그리드 안의 카드로 — 빈 칸 밑에 목록만 떠 있던 문제 */
.home-recent-card { padding: 20px 22px 14px; gap: 6px; }
.home-recent-label { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-secondary); }
.home-recent-card .home-recent a { padding: 5px 0; gap: 10px; }
.home-recent-card .home-recent-title { font-size: 13.5px; }
.home-recent-card .home-recent li:last-child a { border-bottom: none; }

/* ── 디자인 리뷰 반영 (2026-08-24) ── */

/* 본문 건너뛰기: 키보드 포커스 때만 좌상단에 나타난다 */
.skip-link {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--bg-secondary);
  border: 1px solid var(--frame);
  color: var(--text);
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.skip-link:focus-visible { top: 12px; outline: none; }

/* 라벨 체계 통일: 사이드바 카테고리·패널 제목·목차·최근 수정·배너 라벨 = 12px / 700 / 0.04em */
.sidebar-category, .panel-box-header h3, .doc-toc-label, .home-recent-label, .promo-banners-label {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-track);
}

/* 독자에게는 비어 있는 공지·추천 프레임을 그리지 않는다 (관리자 버튼이 숨겨진 상태 = 비로그인).
   로그인하면 setAuthed()가 버튼을 드러내므로 안내 문구와 함께 다시 보인다 */
.panel-box:has(#notice-add-btn.hidden):has(> .notice-list:empty, > .notice-list > .panel-empty:only-child),
.panel-box:has(#recommend-edit-btn.hidden):has(> .recommend-list:empty, > .recommend-list > .panel-empty:only-child) {
  display: none;
}

/* 위키 카드: 호버에 코너 컷 링이 또렷해지며 살짝 떠오른다 (배너와 같은 반응 어휘), 키보드 포커스는 시안 링 */
@property --frame-faint { syntax: "<color>"; inherits: true; initial-value: transparent; }
.home-wiki-card { transition: transform 0.3s var(--ease-out), --frame-faint 0.3s var(--ease-out); }
.home-wiki-card:hover { transform: translateY(-2px); --frame-faint: var(--frame); }
.home-wiki-card:focus-visible { transform: translateY(-2px); --frame: var(--accent); --frame-faint: var(--accent); outline: none; }

/* 랜딩 리듬: 히어로 56 → 현황 40 → 배너 40 → 카드 (가산 마진 대신 의도한 간격) */
@media (min-width: 901px) { body.home-mode .content { padding: 64px 36px 96px; } }
.content-inner.home { gap: 40px; }
.home-hero { padding: 0; }
body.home-mode .home-stats { margin-top: 16px; }
.home-discord { margin: 0; }
body.home-mode .home-title { letter-spacing: -0.025em; }
.home-stat { padding: 18px 22px; }
.sidebar-wiki-back { font-size: 12px; }