/* ============================================================
   위키 스킨 — "장서(藏書)"
   따뜻한 종이 위의 문서 카드, 잉크 블루 링크, 원장(ledger)식 집계.
   강조색은 config.php 한 곳에서 주입된다: :root { --accent }
   ============================================================ */

:root {
  --paper: #f6f4ee;
  --card: #fdfcf9;
  --tint: #f0ede4;
  --ink: #29251e;
  --ink-soft: #6d6555;
  --line: #e5dfd2;
  --line-strong: #cec5b1;
  --red: #b03a2a;
  --green: #2e6b3e;
  --amber: #8a6d1a;
  --link: var(--accent);
  --link-hover: color-mix(in srgb, var(--accent) 80%, black);
  --accent-tint: color-mix(in srgb, var(--accent) 9%, transparent);
  --mark: #f2e5ae;
  --shadow: 0 1px 2px rgba(60, 50, 30, 0.05), 0 8px 24px -18px rgba(60, 50, 30, 0.25);
  --sans: "Pretendard Variable", Pretendard, -apple-system, "Noto Sans KR", sans-serif;
  /* 표제용 글꼴. 이름은 --serif 그대로지만(수백 곳에서 참조) 실제 얼굴은
     허브 사이트(negentropy.it.kr)의 모던한 인상에 맞춘 Paperlogy — 기하학적 산세리프. */
  --serif: "Paperlogy", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  --display: var(--serif);
  --mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, monospace;
}

html[data-theme="dark"] {
  --paper: #171410;
  --card: #1f1b16;
  --tint: #262119;
  --ink: #e9e2d2;
  --ink-soft: #a2977f;
  --line: #383225;
  --line-strong: #524933;
  --red: #e08268;
  --green: #92c99c;
  --amber: #d9b95c;
  --link: color-mix(in srgb, var(--accent) 55%, white);
  --link-hover: color-mix(in srgb, var(--accent) 35%, white);
  --accent-tint: color-mix(in srgb, var(--accent) 22%, transparent);
  --mark: #5c4c1d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.7);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.75 var(--sans);
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; }
::selection { background: var(--accent-tint); }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 200;
  background: var(--card); color: var(--ink); padding: 8px 14px;
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.skip-link:focus { left: 8px; }

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

/* ------------------------------------------------------------
   masthead — 표제부. 굵은 잉크선 + 가는 선의 이중 괘선이 시그니처.
   ------------------------------------------------------------ */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.masthead-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1240px; margin: 0 auto; padding: 12px 20px 10px;
  border-bottom: 2.5px solid var(--ink);
}
.masthead-rule { height: 1px; background: var(--line-strong); margin-top: 3px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark { color: var(--accent); display: grid; place-items: center; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name {
  font-family: var(--serif); font-weight: 700; font-size: 1.17rem;
  letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tag { font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.02em; white-space: nowrap; }

.masthead-search { flex: 1; max-width: 460px; margin-left: auto; min-width: 0; position: relative; }
.search-box {
  display: flex; align-items: stretch; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden;
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.search-box input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  padding: 8px 12px; font: 0.92rem var(--sans);
}
.search-box input:focus { outline: none; }
.search-go {
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 0 10px; cursor: pointer; display: grid; place-items: center;
}
.search-go:hover { color: var(--accent); }
.search-create {
  border: 0; border-left: 1px solid var(--line); background: var(--tint);
  color: var(--ink-soft); font: 600 0.78rem var(--sans); padding: 0 12px;
  cursor: pointer; white-space: nowrap;
}
.search-create:hover { color: var(--accent); background: var(--accent-tint); }

.btn-edit-top {
  flex: none; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: 9px; padding: 7px 13px; font: 600 0.84rem var(--sans); white-space: nowrap;
}
.btn-edit-top:hover { border-color: var(--accent); color: var(--accent); }

.menu-toggle {
  display: none; flex: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  width: 38px; height: 36px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); border-radius: 8px;
}
.menu-toggle span { display: block; width: 16px; height: 1.8px; background: var(--ink); border-radius: 2px; }

/* ------------------------------------------------------------
   layout: sidebar + content
   ------------------------------------------------------------ */
.layout {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 222px minmax(0, 1fr); gap: 30px;
  padding: 26px 20px 60px;
}

.sidebar { align-self: start; position: sticky; top: 84px; }
.side-head {
  font: 700 0.7rem var(--sans); letter-spacing: 0.12em; color: var(--ink-soft);
  margin: 0 0 7px 10px; text-transform: uppercase;
}
.side-group { margin-bottom: 22px; }
.nav-link {
  display: block; padding: 6px 10px; border-radius: 7px; border-left: 2px solid transparent;
  color: var(--ink-soft); text-decoration: none; font-size: 0.92rem;
}
.nav-link:hover { color: var(--ink); background: var(--tint); }
.nav-link.is-active {
  color: var(--link); font-weight: 600;
  background: var(--accent-tint); border-left-color: var(--accent);
  border-top-left-radius: 0; border-bottom-left-radius: 0;
}

.side-stats {
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  padding: 13px 14px 11px; box-shadow: var(--shadow);
}
.side-stats .side-head { margin-left: 0; }
.ministat { margin: 0; }
.ministat > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 4px 0; border-bottom: 1px dashed var(--line);
}
.ministat > div:last-child { border-bottom: 0; }
.ministat dt { font-size: 0.83rem; color: var(--ink-soft); }
.ministat dd { margin: 0; font: 600 0.9rem var(--mono); font-variant-numeric: tabular-nums; }
.side-stats-link { display: inline-block; margin-top: 7px; font-size: 0.8rem; color: var(--link); text-decoration: none; }
.side-stats-link:hover { text-decoration: underline; }
.sidebar-scrim { display: none; }

/* ------------------------------------------------------------
   문서 탭 — 서류철 탭처럼 문서 카드에 붙는다.
   ------------------------------------------------------------ */
.page-tabs { display: flex; gap: 5px; padding: 0 14px; margin-bottom: -1px; position: relative; z-index: 2; overflow-x: auto; }
.page-tab {
  flex: none; text-decoration: none; font: 600 0.86rem var(--sans);
  color: var(--ink-soft); background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0; padding: 7px 15px 6px;
}
.page-tab:hover { color: var(--ink); }
.page-tab.is-active {
  color: var(--ink); background: var(--card); border-bottom-color: var(--card);
  box-shadow: 0 -4px 10px -8px rgba(60, 50, 30, 0.25);
}

/* ------------------------------------------------------------
   문서 카드
   ------------------------------------------------------------ */
.article {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow);
}
.article-head { padding: 26px 32px 0; }
.article-title {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.55rem, 3.4vw, 2.1rem); line-height: 1.3; letter-spacing: -0.015em;
}
.article-title .ns { color: var(--ink-soft); font-weight: 500; }
.article-sub { margin: 6px 0 0; color: var(--ink-soft); font-size: 0.92rem; }
.article-meta { margin-top: 8px; font-size: 0.82rem; color: var(--ink-soft); }
.article-meta a { color: var(--link); text-decoration: none; }
.article-meta a:hover { text-decoration: underline; }
.article-meta .dot, .site-foot .dot { margin: 0 3px; opacity: 0.6; }
.article-rule { height: 1px; background: var(--line); margin-top: 16px; position: relative; }
.article-rule::before {
  content: ""; position: absolute; left: 0; top: -1.5px;
  width: 66px; height: 3.5px; background: var(--accent); border-radius: 2px;
}
.article-body { --pad-x: 32px; --pad-y: 24px; padding: var(--pad-y) var(--pad-x) 34px; }
.article-body > :first-child { margin-top: 0.2em; }

.article-cats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; clear: both;
  border-top: 1px solid var(--line); background: var(--tint); padding: 12px 32px;
  border-radius: 0 0 11px 11px;
}
.cats-label { font: 700 0.72rem var(--sans); letter-spacing: 0.1em; color: var(--ink-soft); margin-right: 2px; }
.cat-tag {
  text-decoration: none; color: var(--link); font-size: 0.84rem;
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: 999px; padding: 2.5px 11px;
}
.cat-tag:hover { border-color: var(--accent); }

/* ------------------------------------------------------------
   위키 본문 조판
   ------------------------------------------------------------ */
.wiki-content { font-size: 1.005rem; }
.wiki-content p { margin: 0 0 1.05em; }

.wiki-content h2, .wiki-content h3, .cat-members-head { font-family: var(--serif); letter-spacing: -0.01em; }
.wiki-content h2, .cat-members-head {
  font-size: 1.42rem; font-weight: 600; line-height: 1.4;
  margin: 2em 0 0.7em; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.wiki-content h3 { font-size: 1.17rem; font-weight: 600; margin: 1.7em 0 0.55em; }
.wiki-content h4, .wiki-content h5, .wiki-content h6 {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 1.5em 0 0.5em;
}
.wiki-h-anchor {
  margin-left: 8px; font-size: 0.75em; color: var(--ink-soft);
  text-decoration: none; opacity: 0; transition: opacity 0.15s;
}
h2:hover .wiki-h-anchor, h3:hover .wiki-h-anchor, h4:hover .wiki-h-anchor { opacity: 0.8; }

.wiki-link { color: var(--link); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.12s; }
.wiki-link:hover { text-decoration-color: currentColor; color: var(--link-hover); }
.wiki-link-new, .wiki-demo-red { color: var(--red); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); text-underline-offset: 3px; }
.wiki-link-new:hover { color: var(--red); text-decoration-style: solid; text-decoration-color: currentColor; }
.wiki-link-ext::after { content: "↗"; font-size: 0.72em; margin-left: 2px; opacity: 0.65; }

.wiki-list { margin: 0.35em 0 1.1em 1.55em; padding: 0; }
.wiki-list li { margin: 0.28em 0; }
ul.wiki-list li::marker { color: var(--ink-soft); }
ol.wiki-list li::marker { color: var(--ink-soft); font-family: var(--mono); font-size: 0.9em; }
dl.wiki-list { margin-left: 0.2em; }
dl.wiki-list dt { font-weight: 700; margin-top: 0.5em; }
dl.wiki-list dd { margin: 0.15em 0 0.4em 1.5em; }

.wiki-toc {
  /* 기본: 왼쪽 블록. 본문 헤더는 목차 '아래'로 흐른다(옆으로 감싸지 않음).
     우측 정보상자(float:right)와는 왼쪽/오른쪽으로 나뉜다. 우측 플로팅은 {{목차|우측}}.
     <details>라 summary를 누르면 접힌다. */
  float: none;
  clear: none;
  display: block;
  width: max-content;
  max-width: min(440px, 80%);
  margin: 8px 0 22px 0;
  background: var(--tint); border: 1px solid var(--line); border-radius: 10px;
  padding: 5px; font-size: 1rem; line-height: 1.75;
}
/* {{목차|가운데}} — 흐름 안 왼쪽 정렬 블록(기본과 사실상 같음) */
.wiki-toc--block { float: none; clear: both; display: block; }
/* 접기 헤더(summary): 클릭하면 목차가 접히고 펼쳐진다. 기본 삼각형은 감추고 화살표를 직접 그린다. */
.wiki-toc-title {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 9px;
  font: 800 1.1rem var(--sans); letter-spacing: 0.04em; color: var(--ink);
  padding: 9px 13px; margin: 0; border-radius: 8px; user-select: none;
}
.wiki-toc-title::-webkit-details-marker { display: none; }
.wiki-toc-title::before {
  content: "\25BE"; font-size: 0.85em; color: var(--link); line-height: 1;
  display: inline-block; transition: transform 0.15s ease;
}
.wiki-toc:not([open]) .wiki-toc-title::before { transform: rotate(-90deg); }
.wiki-toc-title:hover { background: color-mix(in srgb, var(--link) 12%, transparent); }
.wiki-toc-list { list-style: none; margin: 3px 0 0; padding: 4px 16px 9px; }
.wiki-toc-list a { color: var(--link); text-decoration: none; }
.wiki-toc-list a:hover { text-decoration: underline; }
.wiki-toc-list li { margin: 3px 0; }
.wiki-toc-l2 { padding-left: 18px; }
.wiki-toc-l3 { padding-left: 36px; }
.wiki-toc-l4, .wiki-toc-l5 { padding-left: 54px; }

.wiki-table { border-collapse: collapse; margin: 1.2em 0; font-size: 0.94rem; line-height: 1.6; max-width: 100%; }
.wiki-table caption { caption-side: top; text-align: left; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-soft); padding-bottom: 6px; }
.wiki-table th { background: var(--tint); font-weight: 700; text-align: left; }
.wiki-table th, .wiki-table td { border: 1px solid var(--line-strong); padding: 7px 13px; vertical-align: top; }

.wiki-pre {
  background: var(--tint); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 17px; overflow-x: auto; margin: 1.1em 0;
  font: 0.845rem/1.65 var(--mono); tab-size: 4;
}
.wiki-code, code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--tint); border: 1px solid var(--line);
  border-radius: 5px; padding: 0.08em 0.4em;
}
.wiki-pre code { border: 0; background: none; padding: 0; }

blockquote.wiki-quote {
  margin: 1.2em 0; padding: 3px 4px 3px 18px;
  border-left: 3px solid var(--accent); color: var(--ink-soft);
}
blockquote.wiki-pullquote {
  margin: 1.7em 0; padding: 22px 28px 20px 56px; position: relative;
  background: var(--tint); border: 1px solid var(--line); border-radius: 10px;
  font-family: var(--serif); font-size: 1.22rem; line-height: 1.75;
}
blockquote.wiki-pullquote::before {
  content: "“"; position: absolute; left: 18px; top: 4px;
  font: 700 3rem/1 var(--serif); color: var(--accent); opacity: 0.85;
}
.wiki-pullquote-cite { display: block; margin-top: 0.6em; font: 0.85rem var(--sans); font-style: normal; color: var(--ink-soft); }
.wiki-pullquote-cite::before { content: "— "; }

/* (옛 78px 장식선 — 아래쪽 '구분선' 블록에서 100% 폭으로 대체됨. 혼선 방지를 위해 값만 남겨 둠) */


.wiki-figure { display: inline-block; max-width: 100%; margin: 0.4em 0; }
img.wiki-img { border: 1px solid var(--line); border-radius: 9px; }
.wiki-figcaption { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 5px; }
.wiki-file-missing { color: var(--ink-soft); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 1px 8px; font-size: 0.9em; }
.wiki-missing-tpl { color: var(--red); font-family: var(--mono); font-size: 0.85em; background: color-mix(in srgb, var(--red) 8%, transparent); border-radius: 5px; padding: 0 5px; }

mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }

.redirect-view { font-size: 1.15rem; padding: 8px 2px; }
.redirect-arrow { color: var(--accent); font-weight: 700; margin-right: 4px; }

/* ------------------------------------------------------------
   집계판(statpanel) — 원장(ledger) 스타일. 이 위키의 시그니처.
   ------------------------------------------------------------ */
.statpanel { border: 1px solid var(--line-strong); border-radius: 11px; overflow: hidden; background: var(--card); margin: 1.2em 0 1.5em; }
.statpanel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.stat { background: var(--card); padding: 15px 18px 13px; }
.stat-num { font: 600 1.72rem/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-num small { font-size: 0.55em; color: var(--ink-soft); margin-left: 2px; font-weight: 500; }
.stat-label { font: 600 0.8rem var(--sans); margin-top: 3px; }
.stat-sub { font-size: 0.72rem; color: var(--ink-soft); }

.statpanel-bars { padding: 13px 18px 11px; border-bottom: 1px solid var(--line); }
.statpanel-bars.standalone { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); margin: 0.8em 0 1.4em; }
.statpanel-bars-title { font: 700 0.7rem var(--sans); letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 6px; }
.bar-row { display: grid; grid-template-columns: 120px 1fr 48px; gap: 12px; align-items: center; padding: 4.5px 0; text-decoration: none; color: var(--ink); }
.bar-label { font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row:hover .bar-label { color: var(--link); }
.bar-track { height: 8px; background: var(--tint); border-radius: 99px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 99px; opacity: 0.85; }
.bar-num { font: 0.78rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); text-align: right; }

.statpanel-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 18px; background: var(--tint); font-size: 0.8rem; color: var(--ink-soft); }
.statpanel-foot a { color: var(--link); text-decoration: none; font-weight: 600; }
.statpanel-foot a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   최근 바뀜 / 순위 / 색인 / 분류 칩
   ------------------------------------------------------------ */
.rc-list { list-style: none; margin: 0.3em 0 1.2em; padding: 0; }
.rc-item { position: relative; padding: 11px 84px 11px 17px; border-bottom: 1px dashed var(--line); }
.rc-item:last-child { border-bottom: 0; }
.rc-item::before {
  content: ""; position: absolute; left: 1px; top: 21px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); opacity: 0.45;
}
.rc-title { font-weight: 600; color: var(--link); text-decoration: none; }
.rc-title:hover { text-decoration: underline; }
.rc-new {
  display: inline-block; font: 600 0.66rem var(--sans); letter-spacing: 0.03em;
  color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent);
  border-radius: 999px; padding: 0.5px 7px; margin-left: 6px; vertical-align: 2px;
  background: color-mix(in srgb, var(--red) 7%, transparent);
}
.rc-meta { margin-left: 9px; font-size: 0.84rem; color: var(--ink-soft); display: inline-flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rc-diff { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rc-diff.pos { color: var(--green); }
.rc-diff.neg { color: var(--red); }
.rc-diff.zero { color: var(--ink-soft); }
.rc-summary { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-top: 2px; }
.rc-hist, .rc-op { color: var(--ink-soft); text-decoration: none; font-size: 0.78rem; }
.rc-hist { position: absolute; right: 2px; top: 11px; }
.rc-hist:hover, .rc-op:hover { color: var(--link); text-decoration: underline; }
.rc-time-abs { color: var(--ink-soft); font-size: 0.8rem; margin-right: 4px; }
.rc-empty { color: var(--ink-soft); font-size: 0.92rem; padding: 6px 2px; }

.rank-list { list-style: none; margin: 0.3em 0 1.2em; padding: 0; counter-reset: rank; }
.rank-list li {
  counter-increment: rank; display: flex; align-items: baseline; gap: 10px;
  padding: 6.5px 0; border-bottom: 1px dashed var(--line);
}
.rank-list li:last-child { border-bottom: 0; }
.rank-list li::before {
  content: counter(rank, decimal-leading-zero); flex: none;
  font: 0.74rem var(--mono); color: var(--ink-soft);
}
.rank-list a { color: var(--link); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list a:hover { text-decoration: underline; }
.rank-num { margin-left: auto; flex: none; font: 0.78rem var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); }

.wanted-list { list-style: none; margin: 0.3em 0 1.2em; padding: 0; columns: 2; column-gap: 32px; }
.wanted-list li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line); break-inside: avoid; }

.page-index { list-style: none; margin: 0.4em 0 1.2em; padding: 0; columns: 3; column-gap: 30px; }
.page-index li { padding: 3.5px 0; break-inside: avoid; }
.page-index a { color: var(--link); text-decoration: none; }
.page-index a:hover { text-decoration: underline; }

.cat-portal { display: flex; flex-wrap: wrap; gap: 9px; margin: 0.6em 0 1.3em; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); background: var(--card); border-radius: 999px;
  padding: 6px 8px 6px 14px; text-decoration: none; color: var(--ink); font-size: 0.9rem;
}
.cat-chip:hover { border-color: var(--accent); color: var(--link); }
.cat-chip-n { font: 0.75rem var(--mono); background: var(--tint); border-radius: 999px; padding: 1px 8px; color: var(--ink-soft); }

.count-pill {
  display: inline-block; margin-left: 10px; vertical-align: 3px;
  font: 600 0.72rem var(--mono); color: var(--ink-soft);
  background: var(--tint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px;
}

/* ------------------------------------------------------------
   알림 / 없는 문서 / 검색
   ------------------------------------------------------------ */
.notice { border: 1px solid; border-radius: 9px; padding: 11px 16px; margin: 0 0 16px; font-size: 0.93rem; }
.notice a { color: inherit; font-weight: 600; }
.notice-info { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-tint); color: var(--ink); }
.notice-success { border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 9%, transparent); color: var(--ink); }
.notice-warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--ink); }
.notice-error { border-color: color-mix(in srgb, var(--red) 50%, transparent); background: color-mix(in srgb, var(--red) 8%, transparent); color: var(--ink); }

.missing-box { padding: 8px 2px 4px; }
.missing-lead { font-size: 1.12rem; }
.missing-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.missing-note { font-size: 0.88rem; color: var(--ink-soft); }

.search-count { color: var(--ink-soft); font-size: 0.9rem; }
.search-results { list-style: none; margin: 0.4em 0; padding: 0; }
.search-results li { padding: 12px 2px; border-bottom: 1px dashed var(--line); }
.search-title { font-weight: 600; font-size: 1.05rem; color: var(--link); text-decoration: none; }
.search-title:hover { text-decoration: underline; }
.search-snippet { display: block; margin-top: 3px; font-size: 0.89rem; color: var(--ink-soft); }
.search-none { color: var(--ink-soft); }

/* ------------------------------------------------------------
   버튼
   ------------------------------------------------------------ */
.btn {
  display: inline-block; border-radius: 9px; padding: 9px 18px;
  font: 600 0.92rem var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--link-hover); }
html[data-theme="dark"] .btn-primary { color: var(--paper); background: var(--link); }
html[data-theme="dark"] .btn-primary:hover { background: var(--link-hover); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--link); }
.btn-plain { background: transparent; color: var(--ink-soft); }
.btn-plain:hover { color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

/* ------------------------------------------------------------
   편집 화면
   ------------------------------------------------------------ */
.edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 24px; align-items: start; min-width: 0; }
.edit-toolbar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.tb {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 7px; padding: 4.5px 10px; font: 0.79rem var(--sans); cursor: pointer;
}
.tb:hover { color: var(--link); border-color: var(--accent); }
#wikitext {
  width: 100%; min-height: 56vh; resize: vertical;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 15px 17px; font: 0.9rem/1.75 var(--mono); tab-size: 4;
}
#wikitext:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.edit-fields { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; margin-top: 13px; }
.field { display: block; }
.field span { display: block; font: 600 0.79rem var(--sans); color: var(--ink-soft); margin-bottom: 5px; }
.field em { font-style: normal; font-weight: 400; opacity: 0.75; }
.field input {
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 8px 12px; font: 0.9rem var(--sans);
}
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.edit-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.edit-hint { font-size: 0.78rem; color: var(--ink-soft); margin-left: auto; }

.cheatsheet {
  border: 1px solid var(--line); border-radius: 10px; background: var(--tint);
  padding: 14px 15px; position: sticky; top: 96px; font-size: 0.84rem;
}
.cheat-title { font: 700 0.7rem var(--sans); letter-spacing: 0.12em; color: var(--ink-soft); margin: 4px 0 7px; }
.cheat-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.cheat-table td { padding: 3.5px 2px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.cheat-table td:first-child { padding-right: 10px; white-space: nowrap; }
.cheat-table code { background: var(--card); }
.cheat-more { display: inline-block; margin-top: 2px; font-size: 0.82rem; color: var(--link); text-decoration: none; font-weight: 600; }
.cheat-more:hover { text-decoration: underline; }

.preview-box { border: 1.5px dashed var(--amber); border-radius: 11px; padding: 4px 24px 18px; margin-bottom: 22px; background: color-mix(in srgb, var(--amber) 4%, transparent); }
.preview-label { font: 700 0.7rem var(--sans); letter-spacing: 0.12em; color: var(--amber); margin: 12px 0 4px; }

.login-box { max-width: 480px; }
.login-form { display: flex; gap: 10px; margin-top: 14px; }
.login-form input[type="password"] {
  flex: 1; min-width: 0; background: var(--card); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 13px; font: 0.95rem var(--sans);
}
.delete-form { max-width: 480px; }
.delete-form .field { margin: 14px 0; }

/* ------------------------------------------------------------
   역사 / 비교
   ------------------------------------------------------------ */
.history-lead { color: var(--ink-soft); font-size: 0.92rem; }
.history-lead a { color: var(--link); text-decoration: none; }
.history-lead a:hover { text-decoration: underline; }
.history-lead a.is-on { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0.6em 0 1.2em; }
.history-table th {
  text-align: left; font: 700 0.7rem var(--sans); letter-spacing: 0.1em;
  color: var(--ink-soft); padding: 6px 10px; border-bottom: 2px solid var(--line-strong);
}
.history-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.history-table a { color: var(--link); text-decoration: none; }
.history-table a:hover { text-decoration: underline; }
.hist-summary { color: var(--ink-soft); font-size: 0.88em; }
.hist-ops { white-space: nowrap; font-size: 0.85em; }
.hist-ops a { color: var(--ink-soft); }
.hist-ops a:hover { color: var(--link); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.87em; }

.badge-cur, .badge-del {
  display: inline-block; font: 600 0.66rem var(--sans);
  border: 1px solid; border-radius: 999px; padding: 0.5px 7px; margin-left: 6px; vertical-align: 2px;
}
.badge-cur { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 8%, transparent); }
.badge-del { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 7%, transparent); }

.diff-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; font-size: 0.86rem; }
.diff-col { background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; color: var(--ink); }
.diff-col-label { display: block; font: 700 0.66rem var(--sans); letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 2px; }
.diff {
  border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden;
  font: 0.82rem/1.65 var(--mono); background: var(--card);
}
.diff-line { display: flex; }
.diff-sign { flex: none; width: 28px; text-align: center; color: var(--ink-soft); user-select: none; }
.diff-text { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-all; padding: 1px 12px 1px 0; }
.diff-line.add { background: color-mix(in srgb, var(--green) 13%, var(--card)); }
.diff-line.add .diff-sign { color: var(--green); font-weight: 700; }
.diff-line.del { background: color-mix(in srgb, var(--red) 11%, var(--card)); }
.diff-line.del .diff-sign { color: var(--red); font-weight: 700; }
.diff-line.ctx { color: var(--ink-soft); }
.diff-line.skip {
  justify-content: center; padding: 4px 0; background: var(--tint);
  color: var(--ink-soft); font: italic 0.8rem var(--sans);
}
.diff-foot { font-size: 0.88rem; }
.diff-foot a { color: var(--link); text-decoration: none; }
.diff-foot a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   특수:통계 대시보드
   ------------------------------------------------------------ */
.stats-hero {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line-strong);
  border-radius: 11px; overflow: hidden; margin: 0.4em 0 0.6em;
}
.stats-hero .stat { padding: 17px 16px 14px; }
.stats-sub { color: var(--ink-soft); font-size: 0.86rem; margin: 0.4em 0 1em; }

.activity { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 16px 16px 10px; margin: 0.6em 0 1.6em; }
.activity-bars { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.activity-bar { flex: 1; min-width: 3px; background: var(--line-strong); border-radius: 3px 3px 0 0; }
.activity-bar.has { background: var(--accent); opacity: 0.8; }
.activity-bar.has:hover { opacity: 1; }
.activity-x { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.7rem; color: var(--ink-soft); }

.stats-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 1.2em 0 1.6em; }
.stats-col { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 13px 16px 6px; min-width: 0; }
.stats-col-title { font: 700 0.72rem var(--sans); letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 4px; }

/* ------------------------------------------------------------
   푸터
   ------------------------------------------------------------ */
.site-foot { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.8rem; }
.site-foot-inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--link); }
.site-foot-note { margin-top: 3px; opacity: 0.75; }

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  .layout { display: block; padding: 20px 14px 50px; }
  .menu-toggle { display: inline-flex; }
  .btn-edit-top { display: none; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 274px; max-width: 84vw;
    background: var(--card); border-right: 1px solid var(--line-strong);
    z-index: 120; padding: 22px 18px; overflow-y: auto;
    transform: translateX(-103%); transition: transform 0.22s ease;
  }
  .sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, 0.35); }
  .sidebar-scrim {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(22, 16, 6, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .sidebar-scrim.show { opacity: 1; pointer-events: auto; }
  body.no-scroll { overflow: hidden; }
  .edit-grid { grid-template-columns: 1fr; }
  .cheatsheet { position: static; }
  .stats-hero { grid-template-columns: repeat(3, 1fr); }
  .stats-cols { grid-template-columns: 1fr; }
  .page-index { columns: 2; }
  .wanted-list { columns: 1; }
}

@media (max-width: 640px) {
  .masthead-inner { padding: 10px 12px 9px; gap: 10px; }
  .brand-tag { display: none; }
  .brand-name { font-size: 1.02rem; }
  .search-create { display: none; }
  .article-head { padding: 20px 18px 0; }
  .article-body { --pad-x: 18px; --pad-y: 18px; padding: var(--pad-y) var(--pad-x) 26px; }
  .article-cats { padding: 12px 18px; }
  .page-tabs { padding: 0 8px; }
  .wiki-toc { float: none; max-width: none; margin: 10px 0 18px; }
  .statpanel-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-hero { grid-template-columns: repeat(2, 1fr); }
  .bar-row { grid-template-columns: 92px 1fr 42px; }
  .edit-fields { grid-template-columns: 1fr; }
  .rc-item { padding-right: 8px; }
  .rc-hist { position: static; display: inline; margin-left: 8px; }
  .page-index { columns: 1; }
  .history-table { display: block; overflow-x: auto; }
  .diff-head { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .masthead, .sidebar, .sidebar-scrim, .page-tabs, .site-foot, .edit-toolbar { display: none !important; }
  .layout { display: block; padding: 0; }
  .article { border: 0; box-shadow: none; }
  body { background: #fff; }
}

/* ============================================================
   대문 포털 · 위키 허브 · 관리 — 추가 컴포넌트
   ============================================================ */

/* ── 환영 배너({{대문배너}}) — 게임 랜딩풍 다크 패널 ── */
.mainpage-hero {
  position: relative; overflow: hidden;
  margin: calc(var(--pad-y, 24px) * -1) calc(var(--pad-x, 32px) * -1) 26px;
  padding: 38px 40px 34px;
  background:
    radial-gradient(120% 170% at 88% -25%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 55%),
    linear-gradient(118deg, color-mix(in srgb, var(--accent) 30%, #10151d) 0%, #12161e 52%, #181f2a 100%);
  color: #f3eee1;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, #000);
}
.article-body > .mainpage-hero:first-child { margin-top: calc(var(--pad-y, 24px) * -1) !important; }
.hero-grid {
  position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(130% 110% at 18% 0%, #000 32%, transparent 78%);
  mask-image: radial-gradient(130% 110% at 18% 0%, #000 32%, transparent 78%);
}
.hero-inner { position: relative; z-index: 2; max-width: 660px; }
.hero-inner::before {
  content: ""; position: absolute; left: -18px; top: -13px; width: 26px; height: 26px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
  border-top: 2px solid color-mix(in srgb, var(--accent) 70%, #fff);
  opacity: .85;
}
.hero-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 4vw, 2.45rem); line-height: 1.28; text-wrap: balance;
}
.hero-sub { margin-top: 8px; color: #cfc7b4; font-size: .98rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero-btn {
  display: inline-block; text-decoration: none; border-radius: 9px;
  padding: 9px 18px; font: 600 .9rem var(--sans); line-height: 1.4;
  transition: transform .15s, background .15s, border-color .15s;
}
.hero-btn:hover { transform: translateY(-1px); }
.hero-btn-primary { background: var(--accent); color: #fff; }
.hero-btn-primary:hover { background: color-mix(in srgb, var(--accent) 80%, #fff); }
.hero-btn-ghost { border: 1px solid rgba(255,255,255,.38); color: #f3eee1; }
.hero-btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 60%, #fff); }
.hero-emblem {
  position: absolute; right: -34px; bottom: -48px; z-index: 1;
  opacity: .16; transform: rotate(8deg);
  color: color-mix(in srgb, var(--accent) 55%, #fff);
}
.hero-emblem svg { width: 250px; height: 250px; }

/* ── 오늘의 문서 카드({{오늘의문서}}) ── */
.featured-grid { display: grid; gap: 16px; margin: 0 0 1.6em; }
.featured-grid.n2 { grid-template-columns: 1fr 1fr; }
.featured-grid.n3 { grid-template-columns: repeat(3, 1fr); }
.featured-card {
  display: grid; grid-template-columns: minmax(200px, 300px) 1fr;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 13px; overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.featured-grid.n2 .featured-card, .featured-grid.n3 .featured-card { grid-template-columns: 1fr; }
.featured-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: 0 16px 36px -18px rgba(40, 32, 14, .42);
}
.featured-visual {
  position: relative; min-height: 200px; overflow: hidden;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    linear-gradient(130deg, color-mix(in srgb, var(--accent) 55%, #131922), #141a24 72%);
}
.featured-grid.n2 .featured-visual, .featured-grid.n3 .featured-visual { min-height: 160px; }
.featured-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03); filter: saturate(.82);
  transition: transform .4s ease, filter .4s ease;
}
.featured-card:hover .featured-img { transform: scale(1.08); filter: none; }
.featured-scrim {
  position: absolute; inset: 0; transition: opacity .4s;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 34%, rgba(10,13,18,.55)) 0%,
    rgba(10,13,18,.18) 55%, transparent);
}
.featured-card:hover .featured-scrim { opacity: .35; }
.featured-emblem { position: relative; z-index: 1; color: color-mix(in srgb, var(--accent) 40%, #fff); opacity: .92; }
.featured-emblem svg { width: 86px; height: 86px; }
.featured-body { padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.featured-eyebrow { font: 700 .68rem var(--sans); letter-spacing: .15em; color: var(--link); }
.featured-eyebrow .sep { opacity: .5; }
.featured-title {
  font-family: var(--serif); font-weight: 700; font-size: 1.38rem;
  line-height: 1.35; letter-spacing: -0.015em;
}
.featured-sum {
  margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.featured-chip {
  font-size: .74rem; color: var(--ink-soft);
  border: 1px solid var(--line-strong); background: var(--tint);
  border-radius: 999px; padding: 1.5px 9px;
}
.featured-cta { margin-left: auto; font: 700 .86rem var(--sans); color: var(--link); white-space: nowrap; transition: transform .18s; }
.featured-card:hover .featured-cta { transform: translateX(3px); }

.featured-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: 13px;
  padding: 30px 24px; margin: 0 0 1.6em; color: var(--ink-soft); background: var(--tint);
}
.featured-empty-mark { color: var(--accent); opacity: .85; }
.featured-empty-mark svg { width: 52px; height: 52px; }
.featured-empty p { margin: 0; }
.featured-empty-actions { margin-top: 4px !important; }

/* ── 분류 타일({{분류타일}}) ── */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; margin: .6em 0 1.5em; }
.cat-tile {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 15px 15px 12px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--card); text-decoration: none; color: var(--ink);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cat-tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.cat-tile-glyph {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font: 700 1.12rem var(--serif); color: var(--link);
  background: var(--accent-tint);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cat-tile-name { font-weight: 700; font-size: .94rem; line-height: 1.35; }
.cat-tile-n { font: .73rem var(--mono); color: var(--ink-soft); }
.cat-tile::after {
  content: "→"; position: absolute; right: 13px; bottom: 11px;
  color: var(--link); opacity: 0; transform: translateX(-4px); transition: .18s;
}
.cat-tile:hover::after { opacity: 1; transform: none; }

/* ── 다단({{나란히}}) ── */
.wiki-cols { display: grid; gap: 28px; margin: .4em 0 1.2em; align-items: start; }
.wiki-cols.cols-2 { grid-template-columns: 1fr 1fr; }
.wiki-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wiki-col { min-width: 0; }
.wiki-col > :first-child { margin-top: 0 !important; }
.wiki-col h3 { margin-top: .3em; }

/* 한 칼럼 안에 위젯이 여러 개 쌓일 때, 위젯마다 제각각인 상하 마진을
   하나로 통일한다(요소그리드 1.2em, 분류타일 1.5em, 통계 1.5em,
   그 밖에 마진 없는 위젯은 서로 붙어 버리는 문제). */
.wiki-col > * { margin-top: 0; margin-bottom: 0; }
.wiki-col > * + * { margin-top: 22px; }        /* 위젯 사이 균일 간격 */
.wiki-col > :last-child { margin-bottom: 0 !important; }

/* ── 위키 허브(상단 전환 바) ── */
.netbar { background: #12161d; border-bottom: 1px solid rgba(255,255,255,.07); }
.netbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 6px 20px;
  display: flex; align-items: center; gap: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.netbar-inner::-webkit-scrollbar { display: none; }
.netbar-label { flex: none; font: 700 .64rem var(--sans); letter-spacing: .18em; color: #8b93a1; white-space: nowrap; }
.netbar-tabs { display: flex; gap: 4px; }
.netbar-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 3.5px 12px; border-radius: 999px; border: 1px solid transparent;
  font: 600 .8rem var(--sans); color: #c8cfda; text-decoration: none; white-space: nowrap;
}
.netbar-tab .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dot, #7c8494);
  box-shadow: 0 0 6px color-mix(in srgb, var(--dot, #7c8494) 70%, transparent);
}
/* 위키 로고 아이콘(hub_icon 설정 시). 점 대신 실제 로고를 보여 준다. */
.netbar-ico {
  width: 18px; height: 18px; border-radius: 4px;
  object-fit: contain; flex: none; display: block;
}
.netbar-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.netbar-tab.is-active { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.2); color: #fff; }
body.has-netbar .sidebar { top: 118px; }
body.has-netbar .cheatsheet { top: 130px; }

/* ── 시스템 배너(복사 감지) ── */
.sysbar {
  background: color-mix(in srgb, var(--amber) 13%, var(--paper));
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  padding: 7px 20px; text-align: center; font-size: .85rem; color: var(--ink);
}
.sysbar a { color: var(--link); font-weight: 700; text-decoration: none; }
.sysbar a:hover { text-decoration: underline; }

/* ── 특수:관리 ── */
.adm-kv { margin: .6em 0 1.4em; border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.adm-kv > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.adm-kv > div:last-child { border-bottom: 0; }
.adm-kv dt { font: 600 .84rem var(--sans); color: var(--ink-soft); }
.adm-kv dd { margin: 0; font-size: .92rem; }
.adm-dim { color: var(--ink-soft); font-size: .92rem; }
.adm-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: .8em 0 1.4em; }
.adm-choice-card { border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); padding: 16px 18px; font-size: .93rem; }
.adm-choice-card p { color: var(--ink-soft); margin: .5em 0 .9em; }
.adm-danger {
  border: 1.5px solid color-mix(in srgb, var(--red) 55%, transparent);
  background: color-mix(in srgb, var(--red) 5%, transparent);
  border-radius: 12px; padding: 18px 22px; margin: 2em 0 1em;
}
.adm-danger-title { font: 700 .74rem var(--sans); letter-spacing: .12em; color: var(--red); margin-bottom: 6px; }
.adm-danger-form { max-width: 440px; }
.adm-danger-form .field { margin: 12px 0 14px; }

@media (max-width: 960px) {
  .featured-grid.n2, .featured-grid.n3 { grid-template-columns: 1fr; }
  .wiki-cols.cols-2, .wiki-cols.cols-3 { grid-template-columns: 1fr; }
  /* 폭 힌트(인라인 style)를 준 나란히도 모바일에선 무조건 1단 */
  .wiki-cols[style] { grid-template-columns: 1fr !important; }
  .adm-choice { grid-template-columns: 1fr; }
  body.has-netbar .sidebar { top: 0; }
}
@media (max-width: 640px) {
  .mainpage-hero { padding: 28px 22px 26px; }
  .hero-inner::before { left: -8px; }
  .hero-emblem svg { width: 180px; height: 180px; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-visual { min-height: 172px; }
  .adm-kv > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ============================================================
   스킨 v2 — 게임 위키(HoYoWiki) 방향의 재조정
   다크 표제부 · 알약 탭 · 액센트 바 제목 · 큰 라운드 · 슬라이더/카드줄
   ============================================================ */

:root {
  --shadow: 0 2px 5px rgba(50, 40, 20, .05), 0 16px 36px -22px rgba(50, 40, 20, .30);
}
html[data-theme="dark"] {
  --shadow: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 40px -22px rgba(0, 0, 0, .75);
}

/* ── 표제부: 다크 게임 헤더 ── */
.masthead { background: #151a23; box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .55); }
.netbar { background: #10141a; }
.masthead-inner { border-bottom: 1px solid rgba(255, 255, 255, .07); padding: 11px 20px; }
.masthead-rule {
  height: 2px; margin-top: 0; opacity: .95;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 58%, transparent);
}
.brand { color: #f1ede1; }
.brand-mark { color: color-mix(in srgb, var(--accent) 52%, #fff); }
.brand-tag { color: #97a0ae; }
.search-box { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); border-radius: 11px; }
.search-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 70%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.search-box input { color: #eef0e9; }
.search-box input::placeholder { color: rgba(238, 240, 233, .42); }
.search-go { color: #a9b1be; }
.search-go:hover { color: #fff; }
.search-create { background: rgba(255, 255, 255, .06); border-left-color: rgba(255, 255, 255, .12); color: #b9c1cd; }
.search-create:hover { color: #fff; background: color-mix(in srgb, var(--accent) 38%, transparent); }
.btn-edit-top { background: transparent; border-color: rgba(255, 255, 255, .24); color: #dfe4ec; }
.btn-edit-top:hover { border-color: color-mix(in srgb, var(--accent) 70%, #fff); color: #fff; }
.menu-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.menu-toggle span { background: #e8e6dc; }

/* ── 사이드바: 아이콘 내비 ── */
.nav-link { display: flex; align-items: center; padding: 7px 11px; border-radius: 10px; border-left: 0; }
.nav-link.is-active { border-left: 0; }
.nav-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 9px; flex: none; opacity: .7; }
.nav-link:hover .nav-ic, .nav-link.is-active .nav-ic { opacity: 1; }
.side-stats { border-radius: 14px; }

/* ── 문서 탭: 세그먼트(모서리 축소) ── */
.page-tabs {
  margin: 0 0 14px; padding: 4px; gap: 2px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 5px;
  width: fit-content; max-width: 100%;
}
.page-tab { border: 0; border-radius: 3px; background: transparent; padding: 6.5px 16px; box-shadow: none; }
.page-tab.is-active {
  background: var(--card); color: var(--ink);
  box-shadow: 0 2px 8px -3px rgba(30, 25, 10, .28);
}

/* ── 카드/입력 라운드 확대 ── */
.article { border-radius: 16px; overflow: hidden; }
.article-cats { border-radius: 0 0 15px 15px; }
.notice { border-radius: 12px; }
.wiki-toc { border-radius: 12px; }
.statpanel, .stats-hero, .activity { border-radius: 14px; }
.stats-col, .adm-kv, .diff, .preview-box, .cheatsheet { border-radius: 12px; }
.featured-card, .featured-empty { border-radius: 16px; }
.btn { border-radius: 11px; }
.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  box-shadow: 0 6px 16px -7px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #000)); }
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--link) 90%, #fff), var(--link));
  color: var(--paper);
}
.field input, .login-form input[type="password"] { border-radius: 11px; }
#wikitext { border-radius: 14px; }

/* ── 제목: 산세리프 + 액센트 바(HoYoWiki 섹션 헤더) ── */
.wiki-content h2, .cat-members-head {
  font-family: var(--sans); font-weight: 800; font-size: 1.26rem; letter-spacing: -.01em;
  border-bottom: 0; padding: 2px 0 2px 14px; position: relative;
}
.wiki-content h2::before, .cat-members-head::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4.5px; height: 1.05em; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
}
.wiki-content h3 { font-family: var(--sans); font-weight: 800; font-size: 1.05rem; }

/* ── 분류 타일 v2: 원형 글리프 ── */
.cat-tile { border-radius: 16px; }
.cat-tile-glyph {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 26%, transparent), var(--accent-tint));
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

/* ── 슬라이더({{슬라이더}}) ── */
.slider {
  position: relative; margin: .2em 0 26px; border-radius: 18px; overflow: hidden;
  background: #10141b; border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.article-body > .slider:first-child {
  margin: calc(var(--pad-y, 24px) * -1) calc(var(--pad-x, 32px) * -1) 26px;
  border: 0; border-radius: 0; box-shadow: none;
}
.slider-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide {
  position: relative; flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
  min-height: 320px; display: flex; align-items: flex-end;
  text-decoration: none; color: #fff; isolation: isolate;
}
.slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.slide-fallback {
  position: absolute; inset: 0; z-index: -2; display: grid; place-items: center;
  color: color-mix(in srgb, var(--accent) 45%, #fff);
  background:
    radial-gradient(110% 150% at 85% -20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 55%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 34%, #0f141c), #10141b 60%, #161c26);
}
.slide-fallback svg { width: 120px; height: 120px; opacity: .9; }
.slide-fallback-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 30%, transparent 78%);
}
.slide-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(78deg, rgba(7,9,13,.82) 10%, rgba(7,9,13,.32) 46%, rgba(7,9,13,0) 70%),
    linear-gradient(0deg, rgba(7,9,13,.55), transparent 46%);
}
.slide-body { position: relative; padding: 30px 96px 36px 36px; max-width: 660px; }
.slide-eyebrow {
  font: 700 .68rem var(--sans); letter-spacing: .16em;
  color: color-mix(in srgb, var(--accent) 42%, #fff); margin-bottom: 7px;
}
.slide-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.45rem, 3.4vw, 2.15rem); line-height: 1.25; text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
.slide-desc {
  margin: 8px 0 0; color: #d9dce2; font-size: .95rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}
.slide-cta {
  display: inline-block; margin-top: 15px; padding: 8px 17px; border-radius: 999px;
  background: var(--accent); color: #fff; font: 700 .85rem var(--sans);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .15s, background .15s;
}
.slide:hover .slide-cta, a.slide-cta:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 80%, #fff);
}
.slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 12, 17, .42); color: #fff;
  cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(6px);
  transition: background .15s, border-color .15s;
}
.slider-nav:hover {
  background: color-mix(in srgb, var(--accent) 55%, rgba(10, 12, 17, .4));
  border-color: color-mix(in srgb, var(--accent) 60%, #fff);
}
.slider-nav.prev { left: 14px; }
.slider-nav.next { right: 14px; }
.slider-dots {
  position: absolute; left: 0; right: 0; bottom: 13px; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}
.slider-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: width .25s, background .25s;
}
.slider-dot.is-on { width: 26px; background: #fff; }
.slider.single .slider-nav, .slider.single .slider-dots { display: none; }

/* ── 틀 설명 상자({{틀설명}}) ── */
.tpldoc { margin: .2em 0 1.6em; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); overflow: hidden; }
.tpldoc-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tpldoc-name { font: 700 1rem var(--sans); }
.tpldoc-name::before { content: "틀:"; opacity: .5; font-weight: 500; }
.tpldoc-tag { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 600 .72rem var(--sans); letter-spacing: .03em;
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); }
.tpldoc-sum { padding: 13px 16px 0; color: var(--ink); line-height: 1.6; }
.tpldoc-label { padding: 14px 16px 6px; font: 700 .8rem var(--sans); letter-spacing: .05em; }
.tpldoc-hint { margin-left: 8px; font-weight: 400; font-size: .74rem; color: var(--ink-soft); letter-spacing: 0; }
.tpldoc-form { margin: 0 16px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper)); white-space: pre-wrap; word-break: break-all;
  font: .84rem/1.65 var(--mono); overflow-x: auto; }
.tpldoc-form--ex { opacity: .82; }
.tpldoc-req { margin: 12px 16px 0; font-size: .85rem; color: var(--ink-soft); }
.tpldoc-foot { margin-top: 14px; padding: 10px 16px; border-top: 1px dashed var(--line); font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 640px) { .tpldoc-form { font-size: .78rem; } .tpldoc-head { flex-wrap: wrap; } }

/* ── 히어로 슬라이드({{히어로슬라이드}}) ── */
.heroslide .slider-track > .heroslide-item {
  flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
  min-height: var(--hs-h, 340px); margin: 0; border-radius: 0;
}
/* 좌우 화살표와 본문이 겹치지 않도록 안쪽 여백을 넓힌다 */
.heroslide .herob-content { padding: 40px 74px; max-width: 68%; }
.heroslide .slider-dots { bottom: 16px; }
@media (max-width: 640px) {
  .heroslide .slider-track > .heroslide-item { min-height: var(--hs-h, 300px); }
  .heroslide .herob-content { padding: 30px 24px 44px; max-width: 100%; }
}

/* ── 카드줄({{카드목록}}) ── */
.cardrow {
  display: flex; gap: 13px; overflow-x: auto; padding: 4px 2px 12px;
  margin: .4em 0 1.2em; scroll-snap-type: x mandatory; scroll-padding-left: 2px;
}
.cardrow::-webkit-scrollbar { height: 8px; }
.cardrow::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.cardrow::-webkit-scrollbar-track { background: transparent; }
.pcard {
  flex: 0 0 146px; scroll-snap-align: start; display: flex; flex-direction: column;
  text-decoration: none; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 15px; overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.pcard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: var(--shadow);
}
.pcard-visual {
  position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 42%, #141a24), #141a24 75%);
}
.pcard-visual img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.pcard:hover .pcard-visual img { transform: scale(1.06); }
.pcard-emblem { color: color-mix(in srgb, var(--accent) 40%, #fff); opacity: .9; }
.pcard-emblem svg { width: 44px; height: 44px; }
.pcard-name {
  padding: 9px 10px 11px; font: 700 .87rem var(--sans); text-align: center; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 640px) {
  .slide { min-height: 360px; }
  .slide-body { padding: 22px 22px 44px; max-width: none; }
  .slider-nav { display: none; }
  .pcard { flex: 0 0 128px; }
}

/* ============================================================
   테마 프리셋 — 네겐트로피 (근흑 #08080c · 청록→블루 그라디언트)
   negentropy.it.kr 로고 색을 그대로 뽑아 쓴 기본 다크 테마
   ============================================================ */

html[data-preset="negentropy"] {
  --brand-a: #14fbb1; /* 로고 좌하단: 청록 */
  --brand-b: #0892cc; /* 로고 우상단: 블루 */
}
html[data-preset="negentropy"][data-theme="dark"] {
  --paper: #08080c;
  --card: #101016;
  --tint: #17171f;
  --ink: #eae6da;
  --ink-soft: #9b968a;
  --line: #22222c;
  --line-strong: #3a3a48;
  --red: #e07a5f;
  --green: #8fca9a;
  --amber: #d9b45c;
  --mark: #123a35;
}

/* 상단 은은한 청록-블루 광 (로고 그라디언트 그대로) */
html[data-preset="negentropy"][data-theme="dark"] body::before {
  content: ""; position: fixed; left: 50%; top: -30vh; transform: translateX(-50%);
  width: 130vw; height: 74vh; pointer-events: none; z-index: 0;
  background: radial-gradient(52% 58% at 42% 30%, color-mix(in srgb, var(--brand-a) 15%, transparent), transparent 68%),
              radial-gradient(48% 55% at 62% 26%, color-mix(in srgb, var(--brand-b) 13%, transparent), transparent 70%);
}
.layout, .sysbar, .site-foot { position: relative; z-index: 1; }

/* 표제부/허브를 사이트 배경과 같은 근흑으로(모든 프리셋 공통) */
.masthead { background: #0c0c12; }
.netbar { background: #08080c; }
html[data-preset="negentropy"][data-theme="dark"] .masthead { background: #0b0b11; }
html[data-preset="negentropy"][data-theme="dark"] .netbar { background: #070709; }

/* 문서 카드 상단의 청록→블루 헤어라인 (로고 그라디언트를 그대로 가로선으로) */
html[data-preset="negentropy"][data-theme="dark"] .article { position: relative; }
html[data-preset="negentropy"][data-theme="dark"] .article::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; z-index: 2;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--brand-a) 75%, transparent) 16%,
    color-mix(in srgb, var(--brand-b) 75%, transparent) 84%, transparent);
}
html[data-preset="negentropy"] .side-stats,
html[data-preset="negentropy"] .featured-card { position: relative; }

/* 다크 스크롤바(모든 프리셋 공통) */
html[data-theme="dark"] { scrollbar-color: #2c2c38 transparent; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 99px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* negentropy식 번호 내비 (01, 02 …) */
html[data-preset="negentropy"] .side-nav .side-group:first-of-type { counter-reset: navnum; }
html[data-preset="negentropy"] .side-nav .side-group:first-of-type .nav-link { counter-increment: navnum; }
html[data-preset="negentropy"] .side-nav .side-group:first-of-type .nav-link::after {
  content: counter(navnum, decimal-leading-zero);
  margin-left: auto; font: 600 .64rem var(--mono); letter-spacing: .08em;
  color: var(--ink-soft); opacity: .5;
}
html[data-preset="negentropy"] .side-nav .side-group:first-of-type .nav-link.is-active::after { color: var(--link); opacity: 1; }

/* 브랜드 마크(계단 크랙)에 로고와 같은 청록→블루를 입힌다 */
html[data-preset="negentropy"] .brand-mark { color: var(--brand-a); }
html[data-preset="negentropy"][data-theme="dark"] .hero-emblem,
html[data-preset="negentropy"][data-theme="dark"] .featured-emblem,
html[data-preset="negentropy"][data-theme="dark"] .pcard-emblem {
  color: color-mix(in srgb, var(--brand-a) 50%, var(--brand-b));
}

/* ── 탭바: 탭(왼쪽) + 문서 옵션(오른쪽) ── */
.tabbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 14px; flex-wrap: wrap;
}
.tabbar .page-tabs { margin: 0; }
.tab-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: 2px;
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 75%, transparent);
}
.page-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 6.5px 14px; font: 600 .84rem var(--sans); cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.act-btn:hover {
  color: var(--link);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.more { position: relative; }
.more-toggle { padding: 6.5px 11px; }
.more.open .more-toggle { color: var(--link); border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.more-list {
  position: absolute; right: 0; top: calc(100% + 7px); min-width: 198px; z-index: 60;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 13px;
  box-shadow: var(--shadow); padding: 6px; display: none;
}
.more.open .more-list { display: block; }
.more-list a, .more-list button {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--ink); font: 500 .88rem var(--sans); text-decoration: none;
}
.more-list a:hover, .more-list button:hover { background: var(--tint); color: var(--link); }
.more-list .danger { color: var(--red); }
.more-list .danger:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.more-list .watch-toggle.on { color: var(--link); font-weight: 700; }
.more-list .watch-toggle.on::before { content: "★ "; }

/* ── 주시 사이드바 ── */
.side-watch { margin-top: 20px; }
.watch-list a {
  display: flex; align-items: center; gap: 8px; padding: 5.5px 10px;
  border-radius: 8px; color: var(--ink-soft); font-size: .87rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.watch-list a:hover { background: var(--tint); color: var(--ink); }
.watch-list a.changed::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.watch-list a.gone { text-decoration: line-through; opacity: .6; }

/* ── 토스트 ── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 4px);
  background: #14141b; color: #ece8dc;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 9px 18px; font: 600 .85rem var(--sans);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); z-index: 300;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, -4px); }

@media (max-width: 640px) {
  .tabbar { gap: 8px; }
  .page-actions { margin-left: 0; }
}

/* ============================================================
   v4 — 계정제 UI · 권한 가림 · 코드 편집기 · 원본 뷰어
   ============================================================ */

/* ── 표제부 사용자 칩 / 로그인 ── */
.user-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  color: #e6e2d4; font: 600 .84rem var(--sans);
  max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.role-dot { width: 8px; height: 8px; border-radius: 50%; background: #8b93a1; flex: none; }
.role-dot.is-admin { background: var(--accent); box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 80%, transparent); }
.logout-form { display: inline-flex; margin: 0; }

/* ── 숨김 구역 ── */
.hidden-box {
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 12px; padding: 12px 16px 4px; margin: 1.1em 0;
}
.hidden-box > .hidden-label {
  font: 700 .68rem var(--sans); letter-spacing: .12em;
  color: var(--link); margin-bottom: 8px;
}
.hidden-box > :last-child { margin-bottom: .7em; }
.hidden-guest {
  display: inline-flex; gap: 8px; align-items: baseline;
  border: 1px dashed var(--line-strong); background: var(--tint);
  border-radius: 9px; padding: 5px 12px; color: var(--ink-soft); font-size: .9em;
}
.hidden-guest em { font-style: normal; opacity: .75; font-size: .92em; }
.hidden-guest-ic { opacity: .85; }

/* ── 비공개 잠금 화면 ── */
.lock-box {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 36px 22px; border: 1.5px dashed var(--line-strong);
  border-radius: 16px; background: var(--tint);
}
.lock-ic { color: var(--accent); opacity: .9; margin-bottom: 2px; }

/* ── 계정 관리(특수:관리) ── */
.role-pill {
  display: inline-block; font: 600 .7rem var(--sans);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 1px 10px; color: var(--ink-soft);
}
.role-pill.is-admin {
  color: var(--link); background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.mini-btn {
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  border-radius: 8px; padding: 3.5px 10px; font: 600 .76rem var(--sans); cursor: pointer;
}
.mini-btn:hover { color: var(--link); border-color: var(--accent); }
.mini-btn.danger { color: var(--red); }
.mini-btn.danger:hover { border-color: var(--red); }
.acct-ops { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acct-ops form { display: inline-flex; gap: 5px; margin: 0; align-items: center; }
.pwreset input {
  width: 122px; padding: 3.5px 9px; font: .78rem var(--sans);
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.acct-create { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: .6em 0 1.6em; }
.acct-create input, .acct-create select {
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--card); color: var(--ink); font: .9rem var(--sans);
}
.acct-form { max-width: 380px; display: grid; gap: 12px; margin-top: 14px; }
.priv-index li { display: flex; gap: 10px; align-items: center; }
.inline-form, .menu-form { display: inline-flex; margin: 0; }

/* ── 코드 편집기(하이라이트 오버레이) ── */
.codewrap {
  position: relative; overflow: hidden; min-width: 0; max-width: 100%;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card);
}
.codewrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.codewrap .code-hl, .codewrap #wikitext {
  margin: 0; padding: 15px 17px;
  font: 0.9rem/1.75 var(--mono); tab-size: 4;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.code-hl {
  position: absolute; inset: 0; overflow: auto;
  pointer-events: none; color: var(--ink); background: transparent;
}
.code-hl code { display: block; font: inherit; background: none; border: 0; padding: 0; }
.codewrap #wikitext {
  position: relative; display: block; width: 100%; min-height: 56vh; resize: vertical;
  border: 0; border-radius: 0; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--ink);
}
.codewrap #wikitext:focus { outline: none; box-shadow: none; border: 0; }
.codewrap #wikitext::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.codewrap #wikitext::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  -webkit-text-fill-color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
}
.codewrap.plain .code-hl { display: none; }
.codewrap.plain #wikitext { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* 토큰 색 */
.code-hl, .src-view {
  --c-tpl: #34739c; --c-param: #a2543e; --c-cat: #7a55b8; --c-ext: #2e7d5b;
  --c-tag: #8a6d1a; --c-com: #8f8a7a; --c-q: #a8721c; --c-list: #b04a3a;
  --c-tbl: #3b6fa0; --c-magic: #96489a;
}
html[data-theme="dark"] .code-hl, html[data-theme="dark"] .src-view {
  --c-tpl: #82c3ea; --c-param: #eba283; --c-cat: #c3aaf0; --c-ext: #93dcb4;
  --c-tag: #e3c473; --c-com: #77746a; --c-q: #ecc474; --c-list: #f29384;
  --c-tbl: #8dbcec; --c-magic: #dd9cdd;
}
.tk-h { color: color-mix(in srgb, var(--accent) 62%, var(--ink)); font-weight: 700; }
.tk-mark { opacity: .55; font-weight: 400; }
.tk-tpl { color: var(--c-tpl); }
.tk-param { color: var(--c-param); font-weight: 600; }
.tk-link { color: var(--link); }
.tk-cat { color: var(--c-cat); }
.tk-ext { color: var(--c-ext); }
.tk-tag { color: var(--c-tag); }
.tk-com { color: var(--c-com); font-style: italic; }
.tk-q { color: var(--c-q); font-weight: 700; }
.tk-list { color: var(--c-list); font-weight: 700; }
.tk-tbl { color: var(--c-tbl); font-weight: 700; }
.tk-magic { color: var(--c-magic); }
.tk-hr { color: var(--c-com); }
.tk-prel { display: inline-block; width: 100%; background: color-mix(in srgb, var(--tint) 70%, transparent); }

/* ── 편집 분할(실시간 미리 보기) ── */
.editor-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: stretch; min-width: 0; }
.editor-split.with-preview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.preview-live {
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  display: flex; flex-direction: column; min-height: 56vh; max-height: 78vh;
}
.preview-live-head {
  padding: 9px 15px; border-bottom: 1px solid var(--line);
  font: 700 .7rem var(--sans); letter-spacing: .12em; color: var(--ink-soft);
  display: flex; gap: 10px; align-items: baseline;
}
.preview-live-state { font-weight: 500; letter-spacing: 0; color: var(--link); }
.preview-live-body { padding: 16px 20px 20px; overflow: auto; }
.tb-spacer { flex: 1 1 auto; }
select.tb-opt { padding: 4px 8px; }
.tb-view[aria-pressed="true"] {
  color: var(--link); background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
.field-static {
  padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: 11px;
  background: var(--tint); color: var(--ink-soft); font: 600 .9rem var(--sans);
}

/* ── 원본 뷰어 ── */
.src-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 14px; }
.src-meta { margin-left: auto; color: var(--ink-soft); font-size: .8rem; }
.srcpage { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); overflow: hidden; }
.src-plain { margin: 0; padding: 16px 18px; font: .86rem/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.src-view { font: .86rem/1.7 var(--mono); max-height: 74vh; overflow: auto; padding: 10px 0; }
.src-line { display: flex; padding-right: 16px; }
.src-line:hover { background: var(--tint); }
.src-line .ln {
  flex: none; width: 54px; padding-right: 12px; margin-right: 14px;
  text-align: right; color: var(--ink-soft); opacity: .5; user-select: none;
  border-right: 1px solid var(--line); font-size: .78em; line-height: inherit;
}
.src-line code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; background: none; border: 0; padding: 0; font: inherit; }

@media (max-width: 960px) {
  .editor-split.with-preview { grid-template-columns: 1fr; }
  .preview-live { min-height: 0; max-height: 52vh; }
  .btn-mainedit { display: none; }
  .btn-login, .logout-form .btn-edit-top { display: inline-block; }
  .user-chip { max-width: 92px; }
}

/* ============================================================
   테마 프리셋 — 제로셀 (칠흑 바탕 · 크림슨 패널 · 금색 하이라이트)
   오펜시브 확장 유니버스류 밀리터리 SF 세계관을 위한 스킨.
   검은 바탕 위에 붉은 박스/테두리, 강조·기밀 표시는 금색.
   각진 패널, HUD 코너 브래킷, 대괄호 섹션 헤더, 먹칠 기밀 구역이 시그니처.
   ============================================================ */

/* ---- 팔레트 변수 ---- */
html[data-preset="zerocell"] {
  --gold: #d9b04a;    /* 하이라이트/기밀 강조 금색 */
  --crimson: #c8342e; /* 박스 테두리·강조 붉은색(= accent) */
}

/* ---- 다크 토큰 (칠흑 바탕) ---- */
html[data-preset="zerocell"][data-theme="dark"] {
  --paper: #08080a;
  --card: #14100f;
  --tint: #1c1413;
  --ink: #e7e0d6;
  --ink-soft: #9a8f86;
  --line: #2a1a19;
  --line-strong: #4a2622;
  --link: #e0a63e;          /* 링크는 금색 계열 */
  --link-visited: #b8862f;
  --red: #e0564a;
  --green: #6fbf7a;
  --amber: #d9b04a;
  --mark: #4a2622;
  --accent-tint: color-mix(in srgb, var(--crimson) 15%, transparent);
}

/* 상단 붉은 경고등 글로우 + 금색 미광 */
html[data-preset="zerocell"][data-theme="dark"] body::before {
  content: ""; position: fixed; left: 50%; top: -28vh; transform: translateX(-50%);
  width: 150vw; height: 72vh; pointer-events: none; z-index: 0;
  background:
    radial-gradient(44% 58% at 50% 20%, color-mix(in srgb, var(--crimson) 15%, transparent), transparent 72%),
    radial-gradient(30% 42% at 50% 8%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 76%);
}
html[data-preset="zerocell"][data-theme="dark"] .masthead { background: #0d0808; border-bottom: 1px solid color-mix(in srgb, var(--crimson) 40%, transparent); }
html[data-preset="zerocell"][data-theme="dark"] .netbar { background: #0a0606; }
html[data-preset="zerocell"] .masthead-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold) 40%, color-mix(in srgb, var(--crimson) 30%, transparent) 70%, transparent);
}
html[data-preset="zerocell"] .brand-mark { color: var(--crimson); }
html[data-preset="zerocell"] .brand-tag { color: var(--gold); opacity: .7; }

/* ---- 각진 패널: 탁티컬 UI는 라운드가 작다 ---- */
html[data-preset="zerocell"] .article,
html[data-preset="zerocell"] .featured-card,
html[data-preset="zerocell"] .featured-empty,
html[data-preset="zerocell"] .cat-tile,
html[data-preset="zerocell"] .pcard,
html[data-preset="zerocell"] .side-stats,
html[data-preset="zerocell"] .statpanel,
html[data-preset="zerocell"] .stats-hero,
html[data-preset="zerocell"] .stats-col,
html[data-preset="zerocell"] .activity,
html[data-preset="zerocell"] .adm-kv,
html[data-preset="zerocell"] .diff,
html[data-preset="zerocell"] .cheatsheet,
html[data-preset="zerocell"] .codewrap,
html[data-preset="zerocell"] .srcpage,
html[data-preset="zerocell"] .notice,
html[data-preset="zerocell"] .wiki-toc,
html[data-preset="zerocell"] .preview-live,
html[data-preset="zerocell"] .article-cats,
html[data-preset="zerocell"] .fn-section--card,
html[data-preset="zerocell"] .comments-card,
html[data-preset="zerocell"] .theme-card { border-radius: 3px; }
html[data-preset="zerocell"] .btn,
html[data-preset="zerocell"] .act-btn,
html[data-preset="zerocell"] .mini-btn,
html[data-preset="zerocell"] .field input,
html[data-preset="zerocell"] .login-form input,
html[data-preset="zerocell"] #wikitext,
html[data-preset="zerocell"] .search-box { border-radius: 3px; }
html[data-preset="zerocell"] .page-tabs { border-radius: 4px; }
html[data-preset="zerocell"] .page-tab { border-radius: 2px; }
html[data-preset="zerocell"] .cat-tile-glyph { border-radius: 4px; }
html[data-preset="zerocell"] .featured-visual,
html[data-preset="zerocell"] .pcard-visual,
html[data-preset="zerocell"] .slide,
html[data-preset="zerocell"] .slider { border-radius: 4px; }
html[data-preset="zerocell"] .mainpage-hero { border-radius: 0; }

/* ---- 붉은 박스: 카드·패널 테두리를 크림슨으로 ---- */
html[data-preset="zerocell"] .article,
html[data-preset="zerocell"] .article-cats,
html[data-preset="zerocell"] .fn-section--card,
html[data-preset="zerocell"] .comments-card {
  border: 1px solid color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
}
html[data-preset="zerocell"] .article { position: relative; }
html[data-preset="zerocell"] .article::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--crimson), var(--gold) 55%, transparent);
}
html[data-preset="zerocell"] .featured-card,
html[data-preset="zerocell"] .cat-tile,
html[data-preset="zerocell"] .pcard,
html[data-preset="zerocell"] .side-stats {
  border: 1px solid color-mix(in srgb, var(--crimson) 35%, var(--line-strong));
}
html[data-preset="zerocell"] .featured-card:hover,
html[data-preset="zerocell"] .cat-tile:hover,
html[data-preset="zerocell"] .pcard:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent), 0 12px 30px -16px rgba(200,52,46,.5);
}
html[data-preset="zerocell"] .side-stats { border-top: 2px solid var(--crimson); }

/* ---- 코너 브래킷(HUD 조준선) — 금색으로 ---- */
html[data-preset="zerocell"] .mainpage-hero,
html[data-preset="zerocell"] .slider { position: relative; }
html[data-preset="zerocell"] .mainpage-hero::after,
html[data-preset="zerocell"] .slider::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 24px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top left / 2px 24px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 24px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 2px 24px no-repeat;
  opacity: .85;
}
html[data-preset="zerocell"] .hero-emblem,
html[data-preset="zerocell"] .featured-emblem,
html[data-preset="zerocell"] .pcard-emblem { color: color-mix(in srgb, var(--crimson) 50%, var(--gold)); }

/* ---- 대괄호 섹션 헤더: 붉은 바 + 금색 프리픽스 ---- */
html[data-preset="zerocell"] .wiki-content h2::before,
html[data-preset="zerocell"] .cat-members-head::before { display: none; }
html[data-preset="zerocell"] .wiki-content h2,
html[data-preset="zerocell"] .cat-members-head {
  padding: 6px 0 6px 12px; font-family: var(--mono); font-weight: 700;
  letter-spacing: .01em; display: flex; align-items: baseline; gap: 8px;
  border-left: 3px solid var(--crimson);
  background: linear-gradient(90deg, color-mix(in srgb, var(--crimson) 14%, transparent), transparent 60%);
}
html[data-preset="zerocell"] .wiki-content h2::after,
html[data-preset="zerocell"] .cat-members-head::after {
  content: ""; flex: 1; height: 1px; margin-left: 4px; align-self: center;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 45%, transparent) 0 5px, transparent 5px 9px);
}
html[data-preset="zerocell"] .wiki-content h2 .wiki-h-text::before,
html[data-preset="zerocell"] .cat-members-head .wiki-h-text::before,
html[data-preset="zerocell"] .stats-col-title::before,
html[data-preset="zerocell"] .statpanel-bars-title::before,
html[data-preset="zerocell"] .side-head::before { content: "❖ "; color: var(--gold); opacity: .9; }
html[data-preset="zerocell"] .stats-col-title,
html[data-preset="zerocell"] .statpanel-bars-title,
html[data-preset="zerocell"] .side-head { font-family: var(--mono); letter-spacing: .06em; color: var(--gold); }

/* ---- 사이드바: 붉은 액티브 표시 + 금색 화살표 ---- */
html[data-preset="zerocell"] .nav-link { font-family: var(--mono); font-size: .87rem; letter-spacing: .01em; }
html[data-preset="zerocell"] .nav-link.is-active {
  position: relative; background: color-mix(in srgb, var(--crimson) 18%, transparent);
  border-left: 2px solid var(--crimson);
}
html[data-preset="zerocell"] .nav-link.is-active::before { content: "▸ "; color: var(--gold); }

/* ---- 통계 숫자: 금색 리드아웃 ---- */
html[data-preset="zerocell"][data-theme="dark"] .stat-num,
html[data-preset="zerocell"][data-theme="dark"] .hero-title,
html[data-preset="zerocell"][data-theme="dark"] .slide-title {
  text-shadow: 0 0 16px color-mix(in srgb, var(--crimson) 30%, transparent);
}
html[data-preset="zerocell"] .stat-num { font-family: var(--mono); color: var(--gold); }

/* ---- 버튼: 붉은 배경 + 금색 테두리 ---- */
html[data-preset="zerocell"] .btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 92%, #fff), var(--crimson));
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
html[data-preset="zerocell"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--crimson), color-mix(in srgb, var(--crimson) 82%, #000));
  box-shadow: 0 0 0 1px var(--gold), 0 6px 16px -6px rgba(200,52,46,.6);
}
html[data-preset="zerocell"] .hero-btn-primary { background: var(--crimson); color: #fff; }
html[data-preset="zerocell"] .btn-ghost:hover,
html[data-preset="zerocell"] .act-btn:hover { border-color: var(--gold); color: var(--gold); }

/* ---- 권한 가림(<숨김>) — 붉은 기밀 문서 스타일 ----
   OEU류 "치명적인 스포일러가 포함되어 있습니다" 경고 관례를 참고. */
html[data-preset="zerocell"] .hidden-box {
  border: 1px solid var(--crimson);
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, #000 55%, var(--card));
  border-radius: 2px; position: relative;
}
html[data-preset="zerocell"] .hidden-box > .hidden-label {
  font-family: var(--mono); text-transform: uppercase; color: var(--gold);
}
html[data-preset="zerocell"] .hidden-box > .hidden-label::before { content: "⚠ CLASSIFIED — "; opacity: .85; }
html[data-preset="zerocell"] .hidden-guest {
  border: 1px solid color-mix(in srgb, var(--crimson) 55%, var(--line-strong));
  border-left: 3px solid var(--gold); border-radius: 2px;
  background: color-mix(in srgb, #000 45%, var(--tint));
  font-family: var(--mono); letter-spacing: .01em;
}
html[data-preset="zerocell"] .hidden-guest em { color: var(--gold); opacity: 1; }
html[data-preset="zerocell"] .lock-box { border-radius: 4px; border-color: var(--crimson); }
html[data-preset="zerocell"] .lock-ic { color: var(--crimson); }

/* ---- 링크: 금색, 방문 시 어두운 금색 ---- */
html[data-preset="zerocell"] .wiki-link-new,
html[data-preset="zerocell"] .wiki-demo-red { color: var(--crimson); text-decoration-color: color-mix(in srgb, var(--crimson) 55%, transparent); }
html[data-preset="zerocell"] .wiki-link-new:hover { color: var(--crimson); }

/* ---- 표: 붉은 헤더 + 금색 강조 ---- */
html[data-preset="zerocell"] .wikitable th,
html[data-preset="zerocell"] .wiki-content table th {
  background: color-mix(in srgb, var(--crimson) 22%, var(--card));
  border-color: color-mix(in srgb, var(--crimson) 40%, var(--line-strong));
  color: var(--gold);
}
html[data-preset="zerocell"] .wikitable td,
html[data-preset="zerocell"] .wiki-content table td {
  border-color: color-mix(in srgb, var(--crimson) 22%, var(--line));
}

/* ---- 금색이 실제로 화면에 나오도록 명시 지정 ----
   기존 컴포넌트 대부분이 --accent(붉은색)만 참조해서, 금색이 나올 자리를
   따로 지정하지 않으면 붉은 단색처럼 보인다. 아래에서 강조 지점에 금색을 넣는다. */

/* 사이드바 집계 패널: 붉은 상단 바 + 금색 숫자 */
html[data-preset="zerocell"] .side-stats {
  border: 1px solid color-mix(in srgb, var(--crimson) 40%, var(--line-strong));
  border-top: 2px solid var(--crimson);
  background: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 8%, var(--card)), var(--card) 60%);
}
html[data-preset="zerocell"] .ministat dd { color: var(--gold); font-weight: 700; }
html[data-preset="zerocell"] .side-head { color: var(--gold); }
html[data-preset="zerocell"] .side-stats-link { color: var(--crimson); }
html[data-preset="zerocell"] .side-stats-link:hover { color: var(--gold); }

/* 히어로 배너: 붉은 그라데이션 + 금색 제목 강조 + 금색 eyebrow */
html[data-preset="zerocell"] .mainpage-hero {
  background:
    radial-gradient(120% 150% at 82% -20%, color-mix(in srgb, var(--crimson) 45%, transparent), transparent 58%),
    linear-gradient(115deg, color-mix(in srgb, var(--crimson) 28%, #120a09) 0%, #140b0a 55%, #1a0f0d 100%);
  border-bottom: 2px solid var(--crimson);
}
html[data-preset="zerocell"] .hero-eyebrow {
  color: var(--gold); letter-spacing: .28em; font-weight: 800;
}
html[data-preset="zerocell"] .hero-title {
  color: #f4ede2;
  text-shadow: 0 0 30px color-mix(in srgb, var(--crimson) 45%, transparent);
}
html[data-preset="zerocell"] .hero-title::after {
  content: ""; display: block; width: 62px; height: 3px; margin-top: 14px;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
}
html[data-preset="zerocell"] .hero-btn-primary {
  background: var(--crimson); color: #fff;
  box-shadow: 0 0 0 1px var(--gold), 0 6px 18px -8px rgba(200,52,46,.7);
}
html[data-preset="zerocell"] .hero-btn-ghost {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold);
}

/* 오늘의 문서 카드: 붉은 테두리 + 금색 라벨 */
html[data-preset="zerocell"] .featured-card { border: 1px solid color-mix(in srgb, var(--crimson) 45%, var(--line-strong)); }
html[data-preset="zerocell"] .featured-eyebrow,
html[data-preset="zerocell"] .featured-kicker,
html[data-preset="zerocell"] .featured-label { color: var(--gold); }
html[data-preset="zerocell"] .featured-empty {
  border: 1px dashed color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
}
html[data-preset="zerocell"] .featured-empty-mark { color: var(--crimson); }

/* 배지·칩·태그: 붉은 배경 + 금색 글자 */
html[data-preset="zerocell"] .badge-cur,
html[data-preset="zerocell"] .count-pill,
html[data-preset="zerocell"] .tab-dot {
  background: color-mix(in srgb, var(--crimson) 22%, var(--card));
  color: var(--gold);
  border-color: color-mix(in srgb, var(--crimson) 45%, transparent);
}

/* 문서 제목 영역: 금색 밑줄 강조 */
html[data-preset="zerocell"] .page-head-rule,
html[data-preset="zerocell"] .article-title-rule {
  background: linear-gradient(90deg, var(--gold), var(--crimson) 60%, transparent);
}

/* 카테고리 타일 글리프: 붉은 배경 + 금색 글자 */
html[data-preset="zerocell"] .cat-tile-glyph {
  background: color-mix(in srgb, var(--crimson) 22%, var(--card));
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--crimson) 45%, transparent);
}

/* 탭: 활성 탭에 금색 밑줄 */
html[data-preset="zerocell"] .page-tab.is-active {
  background: color-mix(in srgb, var(--crimson) 18%, var(--card));
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* 검색창: 포커스 시 금색 테두리 */
html[data-preset="zerocell"] .search-box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* 강조 텍스트(굵게): 살짝 금색 톤 */
html[data-preset="zerocell"] .wiki-content strong,
html[data-preset="zerocell"] .wiki-content b {
  color: color-mix(in srgb, var(--gold) 30%, var(--ink));
}

/* 슬라이더 배너(대문 상단 {{슬라이더}}): 붉은 배경 + 금색 강조
   ─ 대문 히어로는 .mainpage-hero가 아니라 슬라이더의 빈 슬라이드를 쓴다. */
html[data-preset="zerocell"] .slide-fallback {
  background:
    radial-gradient(120% 150% at 82% -20%, color-mix(in srgb, var(--crimson) 42%, transparent), transparent 58%),
    linear-gradient(115deg, color-mix(in srgb, var(--crimson) 26%, #120a09) 0%, #140b0a 55%, #1a0f0d 100%);
}
html[data-preset="zerocell"] .slide-scrim {
  background: linear-gradient(90deg, rgba(10,5,5,.82) 0%, rgba(10,5,5,.35) 45%, transparent 72%);
}
html[data-preset="zerocell"] .slide-eyebrow {
  color: var(--gold); letter-spacing: .26em; font-weight: 800;
}
html[data-preset="zerocell"] .slide-title {
  color: #f4ede2;
  text-shadow: 0 0 30px color-mix(in srgb, var(--crimson) 45%, transparent);
}
html[data-preset="zerocell"] .slide-title::after {
  content: ""; display: block; width: 58px; height: 3px; margin-top: 12px;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
}
html[data-preset="zerocell"] .slide-cta {
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
html[data-preset="zerocell"] .slide-cta:hover {
  background: var(--crimson); color: #fff; border-color: var(--crimson);
}
/* 슬라이더 도트·화살표: 활성 금색 */
html[data-preset="zerocell"] .slider-dot.is-active,
html[data-preset="zerocell"] .slider-dot:hover { background: var(--gold); }
html[data-preset="zerocell"] .slider-arrow:hover { color: var(--gold); border-color: var(--gold); }

/* ============================================================
   특수:관리 「테마」 섹션 · 미리보기 배너
   ============================================================ */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: .6em 0 1.6em; }
.theme-card {
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card);
  padding: 14px 16px; display: flex; gap: 13px; align-items: flex-start;
}
.theme-card.is-current { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); box-shadow: 0 0 0 3px var(--accent-tint); }
.theme-swatch {
  flex: none; width: 40px; height: 40px; border-radius: 10px; margin-top: 2px;
  background: linear-gradient(150deg, var(--sw), color-mix(in srgb, var(--sw) 30%, #0a0a0a));
  display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--sw) 50%, transparent);
}
.theme-swatch-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .55; }
.theme-card-body { min-width: 0; flex: 1; }
.theme-card-name { font-weight: 700; font-size: .95rem; }
.theme-card-desc { color: var(--ink-soft); font-size: .82rem; margin: 3px 0 9px; line-height: 1.55; }
.theme-card-tag {
  display: inline-block; font: 700 .72rem var(--sans); color: var(--link);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-tint); border-radius: 999px; padding: 2px 10px;
}
.themebar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: center; }
.themebar-x {
  border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); background: transparent;
  color: inherit; border-radius: 999px; padding: 2px 12px; font: 600 .78rem var(--sans); cursor: pointer;
}
.themebar-x:hover { background: color-mix(in srgb, var(--amber) 12%, transparent); }

@media (max-width: 640px) {
  html[data-preset="zerocell"] .mainpage-hero::after,
  html[data-preset="zerocell"] .slider::after { inset: 6px; }
}

/* ============================================================
   세계관 위키 고급 틀 — 공통 (테마 변수 기반)
   ============================================================ */

/* ---- {{접기}} 애니메이션 접기/펼치기 ---- */
.wiki-fold {
  margin: 1em 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.wiki-fold-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  cursor: pointer; user-select: none;
  font-weight: 600; color: var(--ink);
  background: var(--tint);
  list-style: none;
  transition: background .15s;
}
.wiki-fold-head::-webkit-details-marker { display: none; }
.wiki-fold-head:hover { background: color-mix(in srgb, var(--accent) 8%, var(--tint)); }
.wiki-fold-icon {
  flex: none; width: 16px; height: 16px; position: relative;
}
.wiki-fold-icon::before,
.wiki-fold-icon::after {
  content: ""; position: absolute; background: var(--accent);
  transition: transform .25s ease, opacity .25s ease;
}
.wiki-fold-icon::before { top: 7px; left: 2px; width: 12px; height: 2px; border-radius: 2px; }
.wiki-fold-icon::after  { top: 2px; left: 7px; width: 2px; height: 12px; border-radius: 2px; }
.wiki-fold[open] .wiki-fold-icon::after { transform: rotate(90deg); opacity: 0; }
.wiki-fold-title { flex: 1; min-width: 0; }
.wiki-fold-body {
  padding: 4px 16px 12px;
  animation: wiki-fold-in .28s ease;
}
.wiki-fold-body > :first-child { margin-top: .6em; }
@keyframes wiki-fold-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- {{캐릭터카드}} 가로 스크롤 카드 (호버 시 확대+정보) ---- */
.charcard-row {
  display: flex; gap: 14px;
  align-items: flex-start;   /* 카드가 줄 높이만큼 세로로 늘어나지 않게(각자 제 높이 유지) */
  overflow-x: auto; overflow-y: hidden;
  padding: 8px 2px 16px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  scrollbar-width: thin;
  scroll-behavior: smooth;        /* 휠·키보드 스크롤을 매끄럽게 */
  cursor: grab;                   /* 잡아서 끌 수 있음을 알린다 */
}
/* 끌고 있는 동안: 커서를 바꾸고, 스냅·부드러움을 잠시 꺼 손끝에 딱 붙게 하고,
   텍스트가 선택되지 않게 한다. */
.charcard-row.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}
.charcard-row.is-dragging a { pointer-events: none; }
.charcard-row::after { content: ''; flex: 0 0 8px; }
/* 세계관 슬롯 줄: 마지막 카드를 펼쳐도 화면 밖으로 잘리지 않도록 오른쪽 여백을 크게. */
/* 세계관 슬롯 줄은 아코디언이라 가로 스크롤이 필요 없다 → 넘침 숨김, 드래그·여백 해제 */
.charcard-row--world {
  overflow-x: hidden;
  cursor: default;
  scroll-snap-type: none;
}
.charcard-row--world::after { content: none; }
.charcard-row::-webkit-scrollbar { height: 8px; }
.charcard-row::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.charcard {
  position: relative; flex: 0 0 auto;
  width: 150px; height: 380px;
  border-radius: 10px; overflow: hidden;
  text-decoration: none; color: #fff;
  scroll-snap-align: start;
  border: 1px solid var(--line-strong);
  transition: width .38s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s;
  background: #0a0a0c;
}
.charcard:hover {
  width: 300px;
  border-color: var(--accent);
  box-shadow: 0 12px 34px -12px rgba(0,0,0,.7);
  z-index: 2;
}
.charcard-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
  background-color: #14100f;
  filter: grayscale(.35) contrast(1.05);
  transition: filter .38s, transform .38s, width .38s cubic-bezier(.4,0,.2,1), background-position .38s;
}
.charcard:hover .charcard-bg {
  filter: grayscale(0) contrast(1.1);
  transform: scale(1.04);
}
/* 세계관 슬롯(아코디언)에선 이미지 확대(scale)를 쓰지 않는다 — 펼칠 때 자연스럽게. */
.charcard-row--world > .charcard:hover .charcard-bg { transform: none; }
.charcard--noimg .charcard-bg {
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    linear-gradient(160deg, #1a1412, #0a0a0c);
}
.charcard-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,4,4,.96) 8%, rgba(6,4,4,.55) 32%, rgba(6,4,4,.08) 60%, transparent 100%);
}
.charcard-inner {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 15px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.charcard-code {
  font: 700 .62rem/1 var(--mono, monospace);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
  opacity: .95;
}
.charcard-name {
  font: 700 1.18rem/1.2 var(--serif, serif);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.charcard-desc {
  font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .38s ease, opacity .3s ease, margin .3s;
}
.charcard:hover .charcard-desc {
  max-height: 120px; opacity: 1; margin-top: 4px;
}
.charcard-empty {
  padding: 20px; text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--tint);
  font-size: .92rem;
}

/* ---- {{세계관슬라이드}} 코덱스 슬라이드 (대각선 split, 자동/수동 회전) ---- */
.worldslide-wrap {
  position: relative;
  margin: 1.2em 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #08080a;
}
.worldslide-track {
  position: relative;
  height: 420px;
}
.worldslide {
  position: absolute; inset: 0;
  display: block; text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease;
  color: #fff;
}
.worldslide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.worldslide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: #14100f;
  transform: scale(1.02);
  transition: transform 6s ease;
}
.worldslide.is-active .worldslide-bg { transform: scale(1.1); }
.worldslide--noimg .worldslide-bg {
  background:
    radial-gradient(90% 120% at 80% 10%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 55%),
    linear-gradient(130deg, #1a1210, #08080a 70%);
}
/* 대각선 split: 좌하단이 어둡고 우상단이 밝게 */
.worldslide-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(6,4,4,.94) 0%, rgba(6,4,4,.72) 38%, rgba(6,4,4,.15) 62%, transparent 82%);
}
.worldslide-body {
  position: absolute; left: 0; bottom: 0;
  max-width: 60%;
  padding: 34px 40px 40px;
  display: flex; flex-direction: column; gap: 8px;
}
.worldslide-label {
  font: 700 .68rem/1 var(--mono, monospace);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.worldslide-title {
  font: 700 2rem/1.15 var(--serif, serif);
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.7);
}
.worldslide-desc {
  font-size: .95rem; line-height: 1.65;
  color: rgba(255,255,255,.82);
  max-width: 90%;
}
.worldslide-more {
  margin-top: 6px;
  font: 600 .85rem var(--mono, monospace);
  color: var(--accent);
  opacity: .9;
}
.worldslide-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(10,8,8,.55);
  color: #fff; font-size: 1.4rem; line-height: 1;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.worldslide-arrow:hover { background: rgba(10,8,8,.85); }
.worldslide-arrow.prev { left: 16px; }
.worldslide-arrow.next { right: 16px; }
.worldslide-dots {
  position: absolute; left: 0; right: 0; bottom: 16px;
  z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}
.worldslide-dot {
  width: 9px; height: 9px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.worldslide-dot:hover { transform: scale(1.2); }
.worldslide-dot.is-active { background: #fff; width: 24px; border-radius: 5px; }

/* ---- {{요소그리드}} 세력 문장 카드 그리드 (두 번째 사진 스타일) ---- */
.emblem-block { margin: 1.2em 0; }
.emblem-heading {
  text-align: center;
  font: 700 .82rem/1 var(--mono, monospace);
  letter-spacing: .12em;
  color: var(--ink-soft);
  padding: 8px 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
}
.emblem-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.emblem-grid--5 { grid-template-columns: repeat(5, 1fr); }
.emblem-grid--4 { grid-template-columns: repeat(4, 1fr); }
.emblem-grid--3 { grid-template-columns: repeat(3, 1fr); }
.emblem-cell {
  display: flex; flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px; overflow: hidden;
  background: var(--card);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.emblem-cell:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.6);
}
.emblem-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
    linear-gradient(160deg, #14100f, #0a0a0c);
  overflow: hidden;
}
.emblem-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: grayscale(.2);
  transition: filter .3s, transform .3s;
}
a.emblem-cell:hover .emblem-img { filter: grayscale(0); transform: scale(1.05); }
.emblem-placeholder {
  color: color-mix(in srgb, var(--accent) 45%, #888);
  opacity: .6;
  transform: scale(1.6);
}
.emblem-cap {
  padding: 9px 10px 11px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.emblem-name {
  display: block;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
}
.emblem-sub {
  display: block; margin-top: 2px;
  font-size: .74rem; color: var(--ink-soft);
}

/* ---- {{음악}} BGM 플레이어 ---- */
.wiki-music {
  margin: 1em 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}
.wiki-music-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--tint);
}
.wiki-music-ic {
  color: var(--accent); font-size: 1.05rem;
}
.wiki-music-btn {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.wiki-music-btn:hover { background: var(--accent); color: #fff; }
.wiki-music-title {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: .9rem;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiki-music-note {
  padding: 6px 14px;
  font-size: .74rem; color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-top: 1px solid var(--line);
}
.wiki-music-time {
  font: .78rem var(--mono, monospace);
  color: var(--ink-soft);
}
.wiki-music-bar {
  height: 4px;
  background: var(--line);
  cursor: pointer;
  position: relative;
}
.wiki-music-fill {
  display: block; height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width .1s linear;
}
.wiki-music-frame {
  position: relative;
  aspect-ratio: 16 / 9;
}
.wiki-music-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.wiki-music--audio audio { display: none; }

@media (max-width: 720px) {
  .emblem-grid--5, .emblem-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .emblem-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .worldslide-track { height: 320px; }
  .worldslide-body { max-width: 85%; padding: 22px 24px 30px; }
  .worldslide-title { font-size: 1.5rem; }
}

/* ---- 문서 링크 미리보기 팝오버 ---- */
.wiki-preview-pop {
  position: absolute;
  z-index: 100;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,.55);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wiki-preview-pop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wiki-preview-img {
  /* 1:1 강제 조정 — 원본 비율과 무관하게 정사각형으로 잘라 보여준다. */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background-size: cover;
  background-position: center;
  background-color: var(--tint);
  border-bottom: 1px solid var(--line);
}
.wiki-preview-body { padding: 12px 14px 14px; }
.wiki-preview-title {
  font: 700 1.02rem/1.3 var(--serif, serif);
  color: var(--ink);
  margin-bottom: 5px;
}
.wiki-preview-sum {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wiki-preview-none { font-style: italic; opacity: .7; }

/* 제로셀: 미리보기도 붉은 테두리 + 금색 제목 */
html[data-preset="zerocell"] .wiki-preview-pop { border-color: color-mix(in srgb, var(--crimson) 45%, var(--line-strong)); }
html[data-preset="zerocell"] .wiki-preview-title { color: var(--gold); }

/* ---- 박스 문단 (__박스문단__) — h2 기점 문단을 박스로 ---- */
.wiki-boxed-section {
  position: relative;
  margin: 1.4em 0;
  padding: 4px 22px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  overflow: hidden;
}
/* 섹션 배경에 일러스트를 넣고 싶을 때: 섹션 안 첫 이미지를 배경처럼 쓰는 변형은
   추후 확장. 지금은 반투명 카드 배경으로 가독성 확보 + 구분감. */
.wiki-boxed-section > h2:first-child {
  margin-top: 14px;
}
.wiki-boxed-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 40%);
  pointer-events: none;
}
.wiki-boxed-section > * { position: relative; }

/* 제로셀: 박스 문단 붉은 테두리 + 금색 상단선 */
html[data-preset="zerocell"] .wiki-boxed-section {
  border-color: color-mix(in srgb, var(--crimson) 35%, var(--line-strong));
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
html[data-preset="zerocell"] .wiki-boxed-section::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--crimson), var(--gold) 60%, transparent);
}

/* ---- 파일 업로드 UI ---- */
.upload-card {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  padding: 20px;
  margin: 1em 0 1.5em;
}
.upload-form { display: flex; flex-direction: column; gap: 14px; }
.upload-drop {
  position: relative;
  display: block;
  border: 2px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--tint);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-drop:hover, .upload-drop.is-drag {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--tint));
}
.upload-drop input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 20px; text-align: center; pointer-events: none;
}
.upload-drop-ic {
  font-size: 1.8rem; color: var(--accent);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.upload-drop-text { font-weight: 600; color: var(--ink); }
.upload-drop-hint { font-size: .8rem; color: var(--ink-soft); }
.upload-drop-name {
  font: .85rem var(--mono, monospace); color: var(--link);
  margin-top: 4px; word-break: break-all;
}
.upload-over {
  display: flex; align-items: center; gap: 7px;
  font-size: .85rem; color: var(--ink-soft);
}
/* ── 파일 문서(파일:이름.png) 페이지 ── */
.filepage-view {
  display: flex; gap: 22px; flex-wrap: wrap;
  align-items: flex-start; margin: 1em 0 1.4em;
}
.filepage-media {
  flex: 0 0 auto; max-width: 340px;
  display: block; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--tint);
}
.filepage-media img { display: block; max-width: 100%; height: auto; }
.filepage-media--audio, .filepage-media--file {
  padding: 24px; min-width: 220px; text-align: center;
}
.filepage-fileicon { font-size: 3rem; color: var(--ink-soft); }
.filepage-info { flex: 1 1 320px; min-width: 260px; }
.filepage-meta { width: 100%; border-collapse: collapse; font-size: .92rem; }
.filepage-meta th, .filepage-meta td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.filepage-meta th {
  width: 96px; color: var(--ink-soft); font-weight: 600; white-space: nowrap;
}
.filepage-meta td a { word-break: break-all; }
.filepage-admin {
  margin: 1.4em 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--tint);
}
.filepage-replace { display: flex; flex-direction: column; gap: 10px; max-width: 460px; margin-bottom: 14px; }
.filepage-replace .field { display: flex; flex-direction: column; gap: 6px; }
.filepage-delete { margin-top: 6px; }
.filepage-desc { margin-top: 1.6em; }

.upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin: 1em 0;
}
.upload-tile {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  display: flex; flex-direction: column;
}
.upload-tile-preview {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--tint);
  position: relative; overflow: hidden;
}
.upload-tile-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.upload-tile-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--ink-soft);
}
.upload-tile-meta {
  padding: 9px 11px 11px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.upload-tile-name {
  font-weight: 600; font-size: .84rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-tile-size { font-size: .74rem; color: var(--ink-soft); }
.upload-tile-syntax {
  font: .72rem var(--mono, monospace);
  color: var(--link);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 6px;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s;
}
.upload-tile-syntax:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.upload-tile-syntax.copied { color: var(--green); }
.upload-tile-del {
  position: absolute; top: 6px; right: 6px;
}
.upload-tile-delbtn {
  width: 26px; height: 26px;
  border: none; border-radius: 50%;
  background: rgba(10,8,8,.7);
  color: #fff; cursor: pointer;
  font-size: .8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.upload-tile-delbtn:hover { background: var(--red, #e0564a); }

/* 업로드된 오디오 삽입 */
.wiki-audio { width: 100%; max-width: 480px; margin: 1em 0; }

/* 제로셀: 업로드 붉은/금색 */
html[data-preset="zerocell"] .upload-drop:hover,
html[data-preset="zerocell"] .upload-drop.is-drag { border-color: var(--gold); }
html[data-preset="zerocell"] .upload-drop-ic { color: var(--gold); }
html[data-preset="zerocell"] .upload-tile-syntax { color: var(--gold); }

/* ============================================================
   로딩창 {{로딩}} — 문서 진입 시 전체 화면 인트로
   히페리온 인트로 참고, 활성 테마 색으로 렌더
   ============================================================ */
.wload {
  position: fixed; inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #14100f 0%, #0a0808 54%, #050404 100%);
  display: flex; flex-direction: column;
  font-family: var(--mono, monospace);
  opacity: 1;
  transition: opacity .5s ease;
}
.wload.is-done { opacity: 0; pointer-events: none; }
.wload.is-removed { display: none; }

/* 상단·하단 하자드 스트라이프(대각선) */
.wload::before, .wload::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px;
  z-index: 3; opacity: .8;
  background-image: repeating-linear-gradient(-45deg,
    var(--accent) 0, var(--accent) 12px, #0c0c0c 12px, #0c0c0c 24px);
  background-size: 34px 34px;
}
.wload::before { top: 0; }
.wload::after { bottom: 0; }

.wload-skip { position: absolute; inset: 0; z-index: 20; cursor: pointer; }

.wload-inner {
  position: relative; z-index: 10;
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 0 8vw;
}
.wload-stage {
  display: flex; flex-direction: column; align-items: flex-start;
}
.wload-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .42em;
  color: var(--accent);
  opacity: 0; animation: wload-fade-up .7s ease .1s forwards;
}
.wload-mark {
  font-family: var(--serif, serif);
  font-size: clamp(2.6rem, 8vw, 5rem);
  line-height: .95; font-weight: 900; letter-spacing: .04em;
  color: #f4f0e8;
  text-shadow: 0 0 46px color-mix(in srgb, var(--accent) 30%, transparent);
  margin-top: 10px;
  opacity: 0; animation: wload-fade-up .7s ease .28s forwards;
}
.wload-sub {
  font-size: 13px; font-weight: 600; letter-spacing: .16em;
  color: #b8b0a4;
  margin-top: 16px;
  opacity: 0; animation: wload-fade-up .7s ease .5s forwards;
}
.wload-rule {
  margin-top: 22px; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), transparent);
  animation: wload-rule-grow .9s ease .6s forwards;
}
@keyframes wload-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wload-rule-grow {
  from { width: 0; } to { width: 220px; }
}

.wload-foot {
  position: absolute; z-index: 10;
  left: 0; right: 0; bottom: 52px;
  padding: 0 8vw;
}
.wload-foot-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 11px;
}
.wload-status {
  font-size: 10px; font-weight: 700; letter-spacing: .32em;
  color: #9a9088;
}
.wload-dots i { opacity: .25; font-style: normal; animation: wload-blink 1.4s infinite; }
.wload-dots i:nth-child(2) { animation-delay: .2s; }
.wload-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wload-blink { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
.wload-pct {
  font-size: 15px; font-weight: 900; letter-spacing: .04em;
  color: var(--accent);
}
.wload-bar {
  position: relative; height: 4px; width: 100%;
  background: #1a1614; border: 1px solid #2a2420;
  overflow: hidden;
}
.wload-bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 80%, #000),
    var(--accent) 60%,
    color-mix(in srgb, var(--accent) 60%, #fff));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 65%, transparent);
}
.wload-enter {
  margin-top: 22px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .5em;
  color: #f4f0e8;
  opacity: 0; animation: wload-pulse 1.6s ease-in-out 1.4s infinite;
}
@keyframes wload-pulse { 0%,100% { opacity: .3; } 50% { opacity: .9; } }

/* 와이프: 끝날 때 화면을 쓸고 지나가는 색 판 */
.wload-wipe {
  position: absolute; inset: 0; z-index: 30;
  background: var(--accent);
  transform: translateX(-101%);
}
.wload.is-wiping .wload-wipe {
  animation: wload-wipe .7s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes wload-wipe {
  0%   { transform: translateX(-101%); }
  50%  { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* 제로셀: 금색 로딩바 + 붉은 하자드(핵심 요청) */
html[data-preset="zerocell"] .wload::before,
html[data-preset="zerocell"] .wload::after {
  background-image: repeating-linear-gradient(-45deg,
    var(--gold) 0, var(--gold) 12px, #0c0c0c 12px, #0c0c0c 24px);
}
html[data-preset="zerocell"] .wload-eyebrow,
html[data-preset="zerocell"] .wload-pct { color: var(--gold); }
html[data-preset="zerocell"] .wload-mark {
  text-shadow: 0 0 46px color-mix(in srgb, var(--crimson) 40%, transparent);
}
html[data-preset="zerocell"] .wload-rule {
  background: linear-gradient(90deg, var(--gold), var(--crimson) 60%, transparent);
}
html[data-preset="zerocell"] .wload-bar-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 70%, #000), var(--gold) 55%, #ffe9a8);
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent);
}
html[data-preset="zerocell"] .wload-wipe { background: var(--crimson); }

/* ============================================================
   이름공간(네임스페이스) — 뱃지 · 필터 탭 · 특수페이지 카드
   ============================================================ */

/* 이름공간 뱃지 */
.ns-badge {
  display: inline-block;
  font: 700 .68rem/1 var(--mono, monospace);
  letter-spacing: .02em;
  color: var(--ns-c, #8a8f9a);
  border: 1px solid color-mix(in srgb, var(--ns-c, #8a8f9a) 45%, transparent);
  background: color-mix(in srgb, var(--ns-c, #8a8f9a) 12%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: middle;
}

/* 이름공간 필터 탭 */
.ns-filter {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0 0 1.2em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ns-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .84rem; font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.ns-tab:hover { color: var(--ink); border-color: var(--ink-soft); }
.ns-tab.is-on {
  color: var(--link);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ns-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ns-c, #8a8f9a);
}
.ns-tab-n {
  font: .74rem var(--mono, monospace);
  opacity: .7;
}
.ns-tab-admin { border-style: dashed; }
.ns-lock {
  font: 700 .64rem var(--sans);
  color: #c8342e;
  background: color-mix(in srgb, #c8342e 14%, transparent);
  border-radius: 4px; padding: 1px 5px;
}

/* 특수 페이지 인덱스 카드 */
.sp-group-title {
  font-size: 1.05rem !important;
  margin: 1.4em 0 .7em !important;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 1em;
}
.sp-card {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sp-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.5);
}
.sp-card-ic {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.sp-card-body { min-width: 0; }
.sp-card-name {
  display: block;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
  font-family: var(--mono, monospace);
}
.sp-card-desc {
  display: block;
  font-size: .8rem; color: var(--ink-soft);
  margin-top: 2px;
}

/* 제로셀: 이름공간 UI 붉은/금색 */
html[data-preset="zerocell"] .ns-tab.is-on { color: var(--gold); }
html[data-preset="zerocell"] .sp-card:hover { border-color: var(--gold); }
html[data-preset="zerocell"] .sp-card-ic { color: var(--gold); background: color-mix(in srgb, var(--crimson) 14%, transparent); }

/* ============================================================
   우측 하단 버튼바 — 목차/스크롤 버튼 (두 번째 사진 스타일)
   ============================================================ */
.wiki-btnbar {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wiki-btnbar-btn {
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
}
.wiki-btnbar-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
/* 맨 위로 버튼은 스크롤 내렸을 때만 */
.wiki-btnbar-up {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, color .15s, border-color .15s, transform .15s;
}
.wiki-btnbar-up.is-show {
  opacity: 1;
  pointer-events: auto;
}

/* 목차 팝업 패널 */
.wiki-btnbar-panel {
  position: fixed;
  z-index: 46;
  width: 240px;
  max-height: 60vh;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 16px 44px -12px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex; flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(.97);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.wiki-btnbar-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wiki-btnbar-panel-head {
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--tint);
  font-weight: 700; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.wiki-btnbar-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto;
}
.wiki-btnbar-item a {
  display: block;
  padding: 7px 15px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  font-size: .87rem; line-height: 1.4;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiki-btnbar-item.lvl-3 a { padding-left: 28px; font-size: .82rem; }
.wiki-btnbar-item a:hover {
  color: var(--ink);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* 제로셀: 버튼바 금색 강조 */
html[data-preset="zerocell"] .wiki-btnbar-btn:hover { color: var(--gold); border-color: var(--gold); }
html[data-preset="zerocell"] .wiki-btnbar-item a:hover { border-left-color: var(--crimson); color: var(--gold); }

/* 모바일: 버튼바 약간 작게 */
@media (max-width: 640px) {
  .wiki-btnbar { right: 14px; bottom: 14px; }
  .wiki-btnbar-btn { width: 38px; height: 38px; }
  .wiki-btnbar-panel { width: 200px; }
}

/* ============================================================
   위키 이동 드롭다운 (상단바, 다섯 번째 사진 스타일)
   ============================================================ */
.wswitch {
  position: relative;
  margin-left: 4px;
  flex: none;
}
.wswitch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--tint);
  color: var(--ink);
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.wswitch-btn:hover { border-color: var(--accent); }
.wswitch-caret { opacity: .6; transition: transform .2s; }
.wswitch.is-open .wswitch-caret { transform: rotate(180deg); }
.wswitch-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  box-shadow: 0 16px 44px -12px rgba(0,0,0,.5);
  padding: 6px;
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.wswitch.is-open .wswitch-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wswitch-menu-head {
  padding: 7px 12px 8px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.wswitch-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  transition: background .13s;
}
.wswitch-item:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.wswitch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-soft);
  flex: none;
}
/* 위키 로고 아이콘(hub_icon 설정 시). 점 대신 실제 로고. */
.wswitch-ico {
  width: 20px; height: 20px; border-radius: 5px;
  object-fit: contain; flex: none; display: block;
}
.wswitch-item.is-current .wswitch-dot { background: var(--accent); }
.wswitch-name { flex: 1; }
.wswitch-here {
  font: 700 .66rem var(--mono, monospace);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 2px 6px; border-radius: 4px;
}

/* 제로셀: 위키 스위처 붉은/금색 */
html[data-preset="zerocell"] .wswitch-btn:hover { border-color: var(--gold); }
html[data-preset="zerocell"] .wswitch-item.is-current .wswitch-dot { background: var(--crimson); }
html[data-preset="zerocell"] .wswitch-here { color: var(--gold); background: color-mix(in srgb, var(--crimson) 14%, transparent); }

/* 모바일: 라벨 숨기고 아이콘만 */
@media (max-width: 640px) {
  .wswitch-btn-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wswitch-menu { left: auto; right: 0; }
}

/* ============================================================
   상단 가로 네비게이션 바 (사이드바 대체, 세 번째 사진 재배치)
   ============================================================ */
.topnav {
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.topnav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}
.topnav .nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: .88rem; font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: none;
  transition: color .13s, background .13s;
}
.topnav .nav-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.topnav .nav-link.is-active {
  color: var(--link);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.topnav .nav-link .nav-num { display: none; } /* 번호 표시 숨김(가로 배치) */
.topnav-sep {
  width: 1px; height: 20px;
  background: var(--line-strong);
  margin: 0 6px;
}

/* 단일 컬럼 레이아웃(사이드바 없음) */
.layout-nosidebar {
  display: block !important;
  max-width: 1240px;   /* 상단 헤더(1240px)와 왼쪽·오른쪽 끝을 맞춘다(예전엔 1080이라 좁았다) */
}
.content-wide {
  width: 100%;
}

/* 제로셀: 상단바 활성 금색 */
html[data-preset="zerocell"] .topnav .nav-link.is-active { color: var(--gold); }
html[data-preset="zerocell"] .topnav .nav-link:hover { color: var(--gold); }

/* 모바일: 상단 네비 가로 스크롤 */
@media (max-width: 720px) {
  .topnav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 12px;
  }
  .topnav-inner::-webkit-scrollbar { display: none; }
  .topnav .nav-link { flex: none; white-space: nowrap; }
  .layout-nosidebar { padding: 16px 14px 50px; }
}

/* 사이드바 제거로 햄버거 메뉴 토글 불필요 → 숨김 */
.menu-toggle { display: none !important; }

/* ============================================================
   대문 히어로 {{대문히어로}} — HYPERION JWiki 스타일 (첫 번째 사진)
   ============================================================ */
.herob {
  position: relative;
  min-height: 340px;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0808;
  margin: 0 0 1.4em;
  display: flex;
  align-items: center;
}
.herob-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .3;
  filter: grayscale(.3);
}
/* 대각선 강조 도형(금색/accent) */
.herob-diagonal {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.herob-diagonal::before,
.herob-diagonal::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  width: 46%;
  transform: skewX(-14deg);
  transform-origin: top;
}
.herob-diagonal::before {
  right: 6%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 85%, #fff) 0%, var(--accent) 55%, color-mix(in srgb, var(--accent) 60%, #000) 100%);
  opacity: .92;
}
.herob-diagonal::after {
  right: 0;
  width: 22%;
  background: color-mix(in srgb, var(--accent) 70%, #000);
  opacity: .6;
}
/* 거대 워터마크 */
.herob-watermark {
  position: absolute;
  left: 4%;
  bottom: -8%;
  font: 900 clamp(4rem, 15vw, 11rem)/0.8 var(--serif, serif);
  letter-spacing: -.02em;
  color: #fff;
  opacity: .05;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.herob-content {
  position: relative;
  z-index: 2;
  padding: 40px 48px;
  max-width: 60%;
}
.herob-eyebrow {
  font: 700 .74rem/1 var(--mono, monospace);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.herob-title {
  font: 900 clamp(2rem, 5vw, 3.4rem)/1 var(--serif, serif);
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.herob-sub {
  margin-top: 16px;
  font-size: 1rem; line-height: 1.6;
  color: rgba(255,255,255,.8);
  max-width: 90%;
}
.herob-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 22px;
  padding: 11px 22px;
  background: var(--accent);
  color: #06181a;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.herob-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}
.herob-cta-ar { transition: transform .15s; }
.herob-cta:hover .herob-cta-ar { transform: translateX(4px); }

/* HUD 코너 브래킷 */
.herob::before, .herob::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  z-index: 3;
  pointer-events: none;
}
.herob::before {
  top: 16px; left: 16px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.herob::after {
  bottom: 16px; right: 16px;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}

/* 제로셀: 히어로 금색 워터마크 + 붉은 대각선 */
html[data-preset="zerocell"] .herob-diagonal::before {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 85%, #fff), var(--gold) 45%, color-mix(in srgb, var(--crimson) 80%, #000));
}
html[data-preset="zerocell"] .herob-diagonal::after { background: var(--crimson); }
html[data-preset="zerocell"] .herob-eyebrow { color: var(--gold); }
html[data-preset="zerocell"] .herob-cta { background: var(--crimson); color: #fff; box-shadow: 0 0 0 1px var(--gold); }
html[data-preset="zerocell"] .herob::before,
html[data-preset="zerocell"] .herob::after { border-color: var(--gold); }

/* ---- 정보 게시판 {{정보게시판}} ---- */
.nboard {
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--card);
  overflow: hidden;
  margin: 0 0 1.2em;
}
.nboard-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 15px;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.nboard-ic { color: var(--accent); }
.nboard-list { list-style: none; margin: 0; padding: 6px 0; }
.nboard-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px;
  transition: background .13s;
}
.nboard-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.nboard-item a {
  color: var(--ink);
  text-decoration: none;
  font-size: .94rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nboard-item a:hover { color: var(--link); }
.nboard-time {
  font: .74rem var(--mono, monospace);
  color: var(--ink-soft);
  flex: none;
}
.nboard-empty { padding: 14px 15px; color: var(--ink-soft); font-size: .86rem; }

/* ---- 실시간 검색어 {{실시간검색}} ---- */
.hotsearch {
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--card);
  overflow: hidden;
  margin: 0 0 1.2em;
}
.hotsearch-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 15px;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.hotsearch-ic { color: var(--accent); }
.hotsearch-list { list-style: none; margin: 0; padding: 6px 0; counter-reset: hs; }
.hotsearch-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;                 /* 세로 간격을 넉넉히 — 답답함 완화 */
  transition: background .13s;
}
.hotsearch-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.hotsearch-rank {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font: 700 .78rem var(--mono, monospace);
  color: var(--ink-soft);
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
}
.hotsearch-item:nth-child(-n+3) .hotsearch-rank {
  color: #fff;
  background: var(--accent);
}
.hotsearch-item a {
  color: var(--ink);
  text-decoration: none;
  font-size: .94rem;                  /* 항목 글자 살짝 키움 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hotsearch-item a:hover { color: var(--link); }

/* 제로셀: 게시판/검색어 금색 */
html[data-preset="zerocell"] .nboard-ic,
html[data-preset="zerocell"] .hotsearch-ic { color: var(--gold); }
html[data-preset="zerocell"] .hotsearch-item:nth-child(-n+3) .hotsearch-rank {
  background: none; border: 1px solid var(--crimson); color: var(--gold);
}

/* ============================================================
   캐릭터 문서 {{캐릭터문서}} — HoYoWiki 캐릭터 페이지 (네 번째 사진)
   ============================================================ */
.charprofile {
  margin: 0 0 1.6em;
}
.cp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 80% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(135deg, var(--card), #0c0a10 90%);
  border: 1px solid var(--line-strong);
}
.cp-info {
  position: relative;
  z-index: 2;
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.cp-name-row {
  display: flex; align-items: flex-start; gap: 14px;
}
/* 아바타는 첫 줄(이름) 높이에 맞춰 위쪽으로 고정 — 태그가 줄바꿈돼도 안 밀림 */
.cp-name-row > .cp-avatar { margin-top: 2px; }
.cp-avatar {
  flex: none;
  width: 62px; height: 62px;
  border-radius: 12px;
  background-size: cover; background-position: center;
  background-color: var(--tint);
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.cp-avatar--none {
  display: flex; align-items: center; justify-content: center;
  font: 700 1.6rem var(--serif, serif);
  color: var(--accent);
}
.cp-name-box { min-width: 0; }
.cp-name {
  font: 800 1.9rem/1.1 var(--serif, serif);
  color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cp-stars {
  font-size: 1rem;
  color: #f2c100;
  letter-spacing: 1px;
  -webkit-text-stroke: 0;
}
.cp-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.cp-tag {
  font: 600 .74rem var(--sans);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 3px 9px;
}
.cp-intro {
  font-size: .98rem; line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.cp-quote {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: .9rem; line-height: 1.65;
  color: var(--ink-soft);
  font-style: italic;
}
.cp-quote-by {
  display: block; margin-top: 8px;
  font-style: normal; font-weight: 600;
  color: var(--ink);
  font-size: .84rem;
}
.cp-btns {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 4px;
}
.cp-btn {
  padding: 10px 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600; font-size: .88rem;
  transition: background .15s, border-color .15s, transform .15s;
}
.cp-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.cp-illust {
  position: relative;
  overflow: hidden;
}
.cp-illust-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
}
.cp-illust-none {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: color-mix(in srgb, var(--accent) 40%, #888);
  opacity: .4;
  transform: scale(2.5);
}

/* 속성 테이블 */
.cp-attrs {
  margin-top: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.cp-attrs-title {
  padding: 13px 20px;
  font: 700 1.05rem var(--serif, serif);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.cp-attr-grid {
  margin: 0;
  padding: 4px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cp-attr {
  display: flex;
  gap: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
/* 2열이므로 홀수 개일 때 마지막 줄 경계 정리 */
.cp-attr dt {
  flex: none;
  width: 96px;
  color: var(--ink-soft);
  font-size: .84rem;
}
.cp-attr dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
}

/* 제로셀: 캐릭터 페이지 붉은/금색 */
html[data-preset="zerocell"] .cp-hero {
  background:
    radial-gradient(120% 100% at 80% 0%, color-mix(in srgb, var(--crimson) 26%, transparent), transparent 55%),
    linear-gradient(135deg, var(--card), #0c0808 90%);
  border-color: color-mix(in srgb, var(--crimson) 40%, var(--line-strong));
}
html[data-preset="zerocell"] .cp-avatar { border-color: var(--gold); }
html[data-preset="zerocell"] .cp-quote { border-left-color: var(--crimson); }
html[data-preset="zerocell"] .cp-btn:hover { border-color: var(--gold); }
html[data-preset="zerocell"] .cp-attrs-title { color: var(--gold); }

/* 모바일: 세로 스택 */
@media (max-width: 760px) {
  .cp-hero { grid-template-columns: 1fr; }
  .cp-illust { min-height: 260px; order: -1; }
  .cp-attr-grid { grid-template-columns: 1fr; }
}

/* 이름공간 필터 — 라벨 + 빈 탭 표시 개선 */
.ns-filter-wrap { margin: 0 0 1.2em; }
.ns-filter-label {
  font: 700 .72rem var(--sans);
  letter-spacing: .06em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-bottom: 9px;
}
.ns-filter-wrap .ns-filter {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin: 0;
}
/* 빈 이름공간 탭은 살짝 흐리게(하지만 여전히 클릭 가능) */
.ns-tab.is-empty {
  opacity: .5;
}
.ns-tab.is-empty:hover { opacity: .85; }

/* ============================================================
   개요 틀 {{개요}} · 검열 틀 {{검열}}
   ============================================================ */

/* 개요 박스 — 문서 상단의 미리보기 설명 */
.doc-overview {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 1.3em;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 0 9px 9px 0;
}
.doc-overview-label {
  flex: none;
  font: 700 .74rem var(--sans);
  letter-spacing: .04em;
  color: var(--accent);
  text-transform: uppercase;
  padding-top: 2px;
}
.doc-overview-body {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
/* {{개요|…|파일=이미지}} 첨부 이미지 — 1:1 강제 조정된 대표 이미지 */
.doc-overview-main { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.doc-overview--has-img { align-items: center; }
.doc-overview-thumb {
  flex: none;
  width: 84px; aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  background-color: var(--tint);
  border-radius: 8px; border: 1px solid var(--line);
}
@media (max-width: 640px) {
  .doc-overview-thumb { width: 64px; }
}

/* 검열 표시 — 비관리자에게 보이는 잠금 마크 */
.redacted-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 5px;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink-soft) 18%, transparent) 0,
    color-mix(in srgb, var(--ink-soft) 18%, transparent) 6px,
    transparent 6px, transparent 12px);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  user-select: none;
}
.redacted-ic { font-size: .8em; }

/* 검열 박스 — 관리자에게 보이는 토글 상자 */
.redacted-box {
  margin: 1em 0;
  border: 1px solid color-mix(in srgb, #c8342e 45%, var(--line-strong));
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, #c8342e 5%, var(--card));
}
.redacted-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: color-mix(in srgb, #c8342e 10%, transparent);
  color: var(--ink);
  cursor: pointer;
  font: 600 .9rem var(--sans);
  text-align: left;
  transition: background .15s;
}
.redacted-toggle:hover { background: color-mix(in srgb, #c8342e 16%, transparent); }
.redacted-toggle-label { flex: 1; }
.redacted-toggle .redacted-ic { font-size: 1rem; }
.redacted-chevron {
  transition: transform .2s;
  color: var(--ink-soft);
}
.redacted-box.is-open .redacted-chevron { transform: rotate(180deg); }
.redacted-content {
  padding: 14px 18px;
  border-top: 1px dashed color-mix(in srgb, #c8342e 35%, var(--line-strong));
}
.redacted-content[hidden] { display: none; }

/* 제로셀: 검열 박스 금색 강조 */
html[data-preset="zerocell"] .redacted-box {
  border-color: color-mix(in srgb, var(--crimson) 55%, transparent);
}
html[data-preset="zerocell"] .doc-overview { border-left-color: var(--gold); }
html[data-preset="zerocell"] .doc-overview-label { color: var(--gold); }

/* ============================================================
   안내 틀 {{안내}} — BELGROD 보안 공지 스타일 (첫 번째 사진)
   유형별 색: danger(기밀)·warn(경고)·info(정보)·ok(성공)
   ============================================================ */
.notice-box {
  --nc: #e0342b;               /* 기본: 기밀(붉은) */
  --nc-soft: color-mix(in srgb, var(--nc) 12%, transparent);
  position: relative;
  margin: 1.4em 0;
  border: 1px solid color-mix(in srgb, var(--nc) 55%, #000);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nc) 8%, #0a0708), #0a0708 60%);
  font-family: var(--mono, monospace);
}
.notice-danger { --nc: #e0342b; }
.notice-warn   { --nc: #e0912b; }
.notice-info   { --nc: #2ba3e0; }
.notice-ok     { --nc: #35c06a; }

/* 상단 헤더 */
.notice-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--nc) 40%, #000);
  background: color-mix(in srgb, var(--nc) 10%, transparent);
}
.notice-org {
  font-weight: 800; font-size: .96rem;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--nc) 85%, #fff);
}
.notice-diamond { color: var(--nc); }
.notice-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--nc);
}
.notice-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nc);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--nc) 70%, transparent);
  animation: notice-pulse 1.6s infinite;
}
@keyframes notice-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nc) 60%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* 본문 */
.notice-body {
  position: relative;
  padding: 20px 22px 22px;
  border-left: 3px solid var(--nc);
  margin: 16px;
  background: rgba(0,0,0,.2);
}
.notice-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px;
  background: var(--nc);
  color: #0a0708;
  font-weight: 800; font-size: .8rem;
  letter-spacing: .1em;
  border-radius: 3px;
  margin-bottom: 14px;
}
.notice-warn-ic { font-size: .9em; }
.notice-text { color: #d8d2cc; }
.notice-p {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.7;
}
.notice-p:last-child { margin-bottom: 0; }
.notice-key {
  color: var(--nc);
  font-weight: 700;
}
/* 문서형 틀:안내 는 위키문법을 쓰므로 '''굵게'''가 키워드 강조가 된다(내장 블록의 **키워드** 와 동일). */
.notice-text b,
.notice-text strong { color: var(--nc); font-weight: 700; }

/* 하단 푸터 */
.notice-footer {
  padding: 10px 18px;
  border-top: 1px solid color-mix(in srgb, var(--nc) 25%, #000);
  background: rgba(0,0,0,.3);
  font-size: .72rem;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--nc) 45%, #888);
}
.notice-footer b { color: var(--nc); font-weight: 700; }
.notice-foot-sep { margin: 0 8px; opacity: .5; }
.notice-foot-ver { float: right; opacity: .6; }

/* 테마별: 제로셀에서는 기밀 유형이 크림슨+금색 */
html[data-preset="zerocell"] .notice-danger { --nc: var(--crimson); }
html[data-preset="zerocell"] .notice-danger .notice-key { color: var(--gold); }
html[data-preset="zerocell"] .notice-danger .notice-text b { color: var(--gold); }
html[data-preset="zerocell"] .notice-danger .notice-footer b { color: var(--gold); }
/* 네겐트로피에서는 정보 유형이 브랜드 청록 */
html[data-preset="negentropy"] .notice-info { --nc: var(--accent); }

/* ============================================================
   랜덤 캐릭터 배너 {{랜덤캐릭터}} (두 번째 사진)
   ============================================================ */
.charbanner {
  display: block;
  margin: 1.5em 0;
  text-decoration: none;
  color: inherit;
}
.charbanner-sec {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 14px;
  padding-left: 4px;
}
.charbanner-num {
  font: 900 1.9rem/1 var(--serif, serif);
  color: var(--accent);
}
.charbanner-label {
  font-weight: 800; font-size: 1.2rem;
  color: var(--ink);
}
.charbanner-eng {
  font: 600 .74rem var(--mono, monospace);
  letter-spacing: .3em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.charbanner-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 460px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 12%, #0c0a10), #08070a 70%);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--accent);
}
.charbanner-img {
  position: absolute; inset: 0;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
  transition: transform .5s ease;
}
.charbanner:hover .charbanner-img { transform: scale(1.03); }
.charbanner-img--none {
  display: flex; align-items: center; justify-content: center;
  opacity: .3; transform: scale(3);
}
.charbanner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, #08070a 85%, transparent) 100%);
  pointer-events: none;
}
.charbanner-info {
  position: absolute;
  left: 0; bottom: 32px;
  z-index: 2;
}
.charbanner-code {
  display: inline-block;
  padding: 9px 30px 9px 22px;
  background: linear-gradient(90deg, var(--gold, #d9b04a), color-mix(in srgb, var(--gold, #d9b04a) 60%, transparent));
  color: #1a1408;
  font: 800 1.3rem var(--serif, serif);
  letter-spacing: .04em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.5);
}
.charbanner-quote {
  margin-top: 16px;
  padding: 0 22px;
  font-size: .96rem;
  font-weight: 600;
  color: #e4ddd4;
  max-width: 60%;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.charbanner--empty .charbanner-stage,
.charbanner-none {
  min-height: auto;
}
.charbanner-none {
  padding: 30px 22px;
  color: var(--ink-soft);
  text-align: center;
}

/* 제로셀: 배너 붉은 강조 + 금색 태그(기본 금색이라 유지) */
html[data-preset="zerocell"] .charbanner-stage {
  border-left-color: var(--crimson);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--crimson) 14%, #0c0808), #080606 70%);
}
html[data-preset="zerocell"] .charbanner-num { color: var(--gold); }

/* 모바일 */
@media (max-width: 640px) {
  .charbanner-stage { min-height: 340px; }
  .charbanner-quote { max-width: 88%; }
  .notice-body { margin: 10px; padding: 16px; }
}

/* ============================================================
   각주 <ref> / {{각주}} — JWiki 스타일 참조 시스템
   ============================================================ */
/* 본문 위첨자 참조 */
.fn-ref {
  font-size: .7em;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}
.fn-ref a {
  color: var(--link);
  text-decoration: none;
  padding: 0 1px;
}
.fn-ref a:hover { text-decoration: underline; }
/* 참조된 각주로 점프했을 때 강조 */
.fn-item:target {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 5px;
}

/* 하단 각주 목록 */
.fn-section {
  margin: 2em 0 1em;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.fn-title {
  font: 700 1.05rem var(--serif, serif);
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.fn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
  font-size: .86rem;
}
.fn-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 8px;
  break-inside: avoid;
  line-height: 1.55;
  padding: 2px 4px;
}
.fn-num {
  flex: none;
  font: 700 .8rem var(--mono, monospace);
  color: var(--ink-soft);
  min-width: 1.4em;
  text-align: right;
}
.fn-back, .fn-up {
  color: var(--link);
  text-decoration: none;
  font-weight: 700;
  flex: none;
}
.fn-back:hover { color: var(--accent); }
.fn-back-multi { display: inline-flex; gap: 3px; align-items: baseline; flex: none; }
.fn-back-l {
  color: var(--link);
  text-decoration: none;
  font-style: italic;
  font-size: .82em;
}
.fn-back-l:hover { text-decoration: underline; }
.fn-body { color: var(--ink); min-width: 0; }
.fn-empty { color: var(--ink-soft); font-style: italic; }

/* 제로셀: 각주 붉은/금색 */
html[data-preset="zerocell"] .fn-ref a,
html[data-preset="zerocell"] .fn-back,
html[data-preset="zerocell"] .fn-back-l { color: var(--gold); }
html[data-preset="zerocell"] .fn-item:target { background: color-mix(in srgb, var(--crimson) 15%, transparent); }

@media (max-width: 640px) {
  .fn-list { columns: 1; }
}

/* ============================================================
   __번호__ — 문단 제목 자동 번호 (1. 2. 2.1. …) JWiki 스타일
   ============================================================ */
.wiki-numbered { counter-reset: h2num; }
.wiki-numbered h2 { counter-reset: h3num; counter-increment: h2num; }
.wiki-numbered h3 { counter-reset: h4num; counter-increment: h3num; }
.wiki-numbered h4 { counter-increment: h4num; }
.wiki-numbered h2 .wiki-h-text::before {
  content: counter(h2num) ". ";
  color: var(--accent);
  font-weight: 800;
  margin-right: 2px;
}
.wiki-numbered h3 .wiki-h-text::before {
  content: counter(h2num) "." counter(h3num) ". ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 2px;
}
.wiki-numbered h4 .wiki-h-text::before {
  content: counter(h2num) "." counter(h3num) "." counter(h4num) ". ";
  color: var(--accent);
  font-weight: 700;
  margin-right: 2px;
  font-size: .95em;
}
/* 제로셀: 번호도 금색 */
html[data-preset="zerocell"] .wiki-numbered h2 .wiki-h-text::before,
html[data-preset="zerocell"] .wiki-numbered h3 .wiki-h-text::before,
html[data-preset="zerocell"] .wiki-numbered h4 .wiki-h-text::before {
  color: var(--gold);
}

/* ============================================================
   관련 문서 네비박스 {{관련문서}} — JWiki 스타일
   ============================================================ */
.navbox {
  margin: 1.4em 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
/* 상단 헤더(검정 배경 + 로고) */
.navbox-header {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 22px;
  background: linear-gradient(180deg, #100d0e, #0a0708);
  border-bottom: 1px solid var(--line-strong);
}
.navbox-logo {
  flex: none;
  width: 64px; height: 40px;
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}
.navbox-logo--none {
  display: flex; align-items: center; justify-content: flex-start;
  color: var(--accent); opacity: .85;
}
.navbox-titles { min-width: 0; }
.navbox-title {
  font-weight: 800; font-size: 1.15rem;
  color: #f0ece6;
  letter-spacing: .01em;
}
.navbox-sub {
  font-size: .82rem;
  color: color-mix(in srgb, var(--ink-soft) 90%, #fff);
  margin-top: 2px;
}
/* 펼치기·접기 토글 */
.navbox-toggle {
  display: block; width: 100%;
  padding: 8px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 80%, #000);
  color: var(--ink-soft);
  cursor: pointer;
  font: 600 .82rem var(--sans);
  letter-spacing: .04em;
  transition: background .15s, color .15s;
}
.navbox-toggle:hover { color: var(--link); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.navbox-toggle-collapse { display: inline; }
.navbox-toggle-expand { display: none; }
.navbox.is-collapsed .navbox-toggle-collapse { display: none; }
.navbox.is-collapsed .navbox-toggle-expand { display: inline; }
/* 본문(행 목록) */
.navbox-body {
  display: block;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}
/* is-collapsed일 때 JS가 max-height를 제어. JS 미로드 시 폴백만 숨김 */
.no-js .navbox.is-collapsed .navbox-body { display: none; }
.navbox-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.navbox-row:last-child { border-bottom: none; }
.navbox-rowlabel {
  flex: none;
  width: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-right: 1px solid var(--line);
  font-weight: 700; font-size: .86rem;
  color: var(--ink);
  text-align: center;
}
.navbox-spoiler {
  color: var(--ink-soft);
  letter-spacing: .1em;
}
.navbox-links {
  flex: 1;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 4px;
  padding: 11px 16px;
  line-height: 1.7;
}
.navbox-link {
  color: var(--link);
  text-decoration: none;
  font-size: .9rem;
}
.navbox-link:hover { text-decoration: underline; }
.navbox-sep {
  color: var(--ink-soft);
  opacity: .5;
  margin: 0 2px;
}
.navbox-none {
  padding: 20px 22px;
  color: var(--ink-soft);
  text-align: center;
}

/* 제로셀: 네비박스 라벨 크림슨/금색 */
html[data-preset="zerocell"] .navbox-rowlabel {
  background: color-mix(in srgb, var(--crimson) 12%, transparent);
}
html[data-preset="zerocell"] .navbox-title { color: var(--gold); }

/* 모바일: 라벨을 위로 쌓기 */
@media (max-width: 560px) {
  .navbox-row { flex-direction: column; }
  .navbox-rowlabel {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line);
    justify-content: flex-start;
  }
}

/* ---- 번호 매김 제목 (__번호매김__) ---- */
.wiki-h-num {
  color: var(--accent);
  font-weight: 800;
  margin-right: 2px;
}
html[data-preset="zerocell"] .wiki-h-num { color: var(--crimson); }

/* ============================================================
   제목 아이콘 — 스킨에서 CSS 변수로 커스텀 / 토글
   --h-icon-h2 ~ --h-icon-h6 : 제목 번호 앞 아이콘 문자
   --h-icon-on : 1(표시) / 0(숨김) — 스킨이나 html[data-headicon="off"]
   ============================================================ */
:root {
  --h-icon-h2: none;     /* 기본은 아이콘 없음 — ㄴ자 막대가 단계를 표시한다 */
  --h-icon-h3: none;     /* 스킨에서 --h-icon-h3: "◎" 처럼 지정하면 다시 나타난다 */
  --h-icon-h4: none;
  --h-icon-h5: none;
  --h-icon-h6: none;
  --h-icon-on: 1;
}
/* h2 — 기본은 아이콘 없음. 스킨이 --h-icon-h2에 문자를 넣으면 그 문자가 나온다. */
h2 .wiki-h-num::before {
  content: var(--h-icon-h2);
  margin-right: 7px;
}
/* 스킨이 h2에 세로 막대 도형을 쓰고 싶을 때 */
html[data-headicon="bar"] h2 .wiki-h-num::before {
  content: "";
  display: inline-block;
  width: 4px; height: 1.05em;
  margin-right: 12px;
  vertical-align: -0.14em;
  background: var(--accent);
  border-radius: 1px;
}
h3 .wiki-h-num::before { content: var(--h-icon-h3); margin-right: 7px; font-weight: 400; opacity: .85; }
h4 .wiki-h-num::before { content: var(--h-icon-h4); margin-right: 7px; font-weight: 700; }
h5 .wiki-h-num::before { content: var(--h-icon-h5); margin-right: 6px; font-weight: 400; opacity: .7; font-size: .8em; }
h6 .wiki-h-num::before { content: var(--h-icon-h6); margin-right: 6px; font-weight: 400; opacity: .6; }
/* 아이콘 전부 끄기 */
html[data-headicon="off"] .wiki-h-num::before { content: none !important; display: none !important; }

html[data-preset="zerocell"] h2 .wiki-h-num::before { background: var(--crimson); }

/* ============================================================
   제목 아래 줄 — 문단 구분선
   ============================================================ */
/* 제목 아래 줄이 왼쪽 세로 막대와 이어져 ㄴ자로 감싼다(첨부 예시) */
.article h2.wiki-h {
  position: relative;
  border-left: 3px solid var(--accent, #c8342e);
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #c8342e) 55%, transparent);
  border-bottom-left-radius: 2px;
  padding-left: 0.5em;
  padding-bottom: 0.28em;
  margin-bottom: 0.7em;
}
/* h2는 세로 막대가 테두리로 대체되므로 번호 앞 막대 아이콘은 끈다 */
.article h2.wiki-h .wiki-h-num::before { content: none; display: none; }
.article h3.wiki-h {
  position: relative;
  border-left: 2px solid color-mix(in srgb, var(--accent, #c8342e) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line, #ddd) 90%, transparent);
  border-bottom-left-radius: 2px;
  padding-left: 0.45em;
  padding-bottom: 0.22em;
  margin-bottom: 0.6em;
}
.article h4.wiki-h {
  position: relative;
  border-left: 1px solid color-mix(in srgb, var(--line, #ddd) 90%, transparent);
  border-bottom: 1px dotted color-mix(in srgb, var(--line, #ddd) 80%, transparent);
  padding-left: 0.4em;
  padding-bottom: 0.18em;
  margin-bottom: 0.5em;
}

/* ---- 제목 접기 토글 ---- */
.wiki-h {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.wiki-h-text { flex: 1 1 auto; min-width: 0; }
.wiki-h-toggle {
  flex: none;
  order: -1;                 /* 제목 맨 앞 */
  background: none;
  border: 0;
  padding: 0 0.25em 0 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  opacity: 0.35;
  transition: opacity 0.15s ease;
  align-self: center;
}
.wiki-h:hover .wiki-h-toggle { opacity: 0.8; }
.wiki-h-toggle:focus-visible {
  outline: 2px solid var(--accent, #c8342e);
  outline-offset: 2px;
  border-radius: 3px;
  opacity: 1;
}
.wiki-h-caret {
  display: inline-block;
  width: 0; height: 0;
  border-left: 0.36em solid currentColor;
  border-top: 0.26em solid transparent;
  border-bottom: 0.26em solid transparent;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}
/* 접힌 상태 — 캐럿이 오른쪽을 가리킴 */
.wiki-h.is-collapsed .wiki-h-caret { transform: rotate(0deg); }
.wiki-h.is-collapsed {
  margin-bottom: 0.35em;
  opacity: 0.92;
}
/* 접힌 문단의 내용 */
.wiki-sec-hidden { display: none !important; }

/* 7~10단계(h6 + 깊이 클래스) — 들여쓰기로 깊이 표현 */
.article .wiki-h-d7  { margin-left: 0.6em; }
.article .wiki-h-d8  { margin-left: 1.2em; }
.article .wiki-h-d9  { margin-left: 1.8em; }
.article .wiki-h-d10 { margin-left: 2.4em; }

/* ============================================================
   정보상자 {{정보상자}} — 문서 우측/상단 인포박스
   ============================================================ */
.infobox {
  float: right;
  width: 320px;
  max-width: 42%;
  margin: 0 0 1.2em 1.4em;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card);
  font-size: .88rem;
}
.infobox-head {
  position: relative;
  min-height: 92px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--accent) 18%, var(--tint));
  border-bottom: 1px solid var(--line);
}
.infobox-head-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--card) 88%, transparent) 100%);
}
.infobox-head-text {
  position: relative; z-index: 2;
  padding: 12px 16px;
  width: 100%;
}
.infobox-title {
  font: 800 1.1rem/1.2 var(--serif, serif);
  color: var(--ink);
}
.infobox-sub {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
.infobox-table {
  width: 100%;
  border-collapse: collapse;
}
.infobox-th, .infobox-td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.infobox-th {
  width: 34%;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .82rem;
  background: color-mix(in srgb, var(--tint) 60%, transparent);
}
.infobox-td { color: var(--ink); }
.infobox-table tr:last-child .infobox-th,
.infobox-table tr:last-child .infobox-td { border-bottom: none; }

/* 제로셀: 정보상자 붉은/금색 */
html[data-preset="zerocell"] .infobox-head {
  background-color: color-mix(in srgb, var(--crimson) 20%, var(--tint));
}
html[data-preset="zerocell"] .infobox-title { color: var(--gold); }

/* 모바일: 정보상자 전체폭 */
@media (max-width: 720px) {
  .infobox { float: none; width: 100%; max-width: 100%; margin: 0 0 1.2em; }
}

/* ============================================================
   접기 틀 변형 — 슬라이드(slide) · 버튼형(button)
   ============================================================ */
/* 버튼형: summary가 버튼처럼 보임 */
.wiki-fold--button {
  border: none;
  background: none;
}
.wiki-fold--button > .wiki-fold-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .12s;
  width: auto;
}
.wiki-fold--button > .wiki-fold-head:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.wiki-fold--button[open] > .wiki-fold-head {
  border-radius: 8px 8px 0 0;
}
.wiki-fold--button > .wiki-fold-body {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 14px 18px;
}

/* 슬라이드: body가 부드럽게 열림(JS가 height 제어, 여기선 기본 스타일만) */
.wiki-fold--slide > .wiki-fold-body {
  will-change: height;
}

/* 제로셀 */
html[data-preset="zerocell"] .wiki-fold--button > .wiki-fold-head {
  background: color-mix(in srgb, var(--crimson) 14%, transparent);
  border-color: color-mix(in srgb, var(--crimson) 45%, transparent);
}
html[data-preset="zerocell"] .wiki-fold--button > .wiki-fold-head:hover {
  border-color: var(--gold);
}

/* ============================================================
   모바일 뷰 가독성 최적화 (통합)
   ============================================================ */
/* 표: 좁은 화면에서 가로 스크롤(레이아웃 안 깨짐) */
.wiki-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2em 0;
}
.wiki-table-wrap > .wiki-table { margin: 0; }
/* 스크롤 가능함을 살짝 알려 주는 우측 페이드 */
.wiki-table-wrap { scrollbar-width: thin; }

@media (max-width: 640px) {
  /* 본문 가독성: 살짝 큰 본문 글자 + 넉넉한 줄간격 */
  .wiki-content { font-size: 1.02rem; line-height: 1.75; }
  .wiki-content h2 { font-size: 1.3rem; }
  .wiki-content h3 { font-size: 1.12rem; }
  .wiki-content h4 { font-size: 1rem; }

  /* 긴 제목·URL이 화면을 밀어내지 않도록 */
  .article-title, .wiki-content, .wiki-content a { overflow-wrap: anywhere; word-break: break-word; }

  /* 번호 헤딩 장식 축소 */
  h2 .wiki-h-num::before { margin-right: 8px; }
  h3 .wiki-h-num::before, h4 .wiki-h-num::before { margin-right: 5px; }

  /* 표 글자 약간 축소 + 셀 패딩 축소 */
  .wiki-table { font-size: 0.9rem; }
  .wiki-table th, .wiki-table td { padding: 8px 10px; }
  .wikitable th, .wikitable td { padding: 8px 10px; }

  /* 안내 박스: 여백 최소화 */
  .notice-header { padding: 10px 14px; }
  .notice-body { margin: 12px; padding: 14px 16px; }
  .notice-org { font-size: 0.86rem; }
  .notice-footer { padding: 9px 14px; font-size: 0.66rem; }
  .notice-foot-ver { display: none; }

  /* 관련문서 네비박스는 이미 다른 미디어쿼리에서 세로 정렬됨 */

  /* 터치 타깃 최소 크기 확보(링크·버튼) */
  .topnav a, .page-tabs a, .wiki-btnbar button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* 요소 그리드: 2칸 */
  .emblem-grid { grid-template-columns: repeat(2, 1fr); }

  /* 인용/큰 여백 블록 패딩 축소 */
  .wiki-content blockquote { margin-left: 0; margin-right: 0; }
}

@media (max-width: 400px) {
  /* 아주 좁은 기기: 요소 그리드 1칸, 통계 1칸 */
  .emblem-grid { grid-template-columns: 1fr; }
  .statpanel-grid, .stats-hero { grid-template-columns: 1fr; }
  .wiki-content { font-size: 1rem; }
}

/* ============================================================
   표 셀 안의 접기 틀 — 여백 없이 컴팩트하게
   ============================================================ */
.wiki-table td > .wiki-fold,
.wiki-table th > .wiki-fold,
.wikitable td > .wiki-fold,
.wikitable th > .wiki-fold {
  margin: 0;
  border-radius: 6px;
}
/* 표 셀 안 접기는 헤더 패딩도 살짝 줄여 밀도 유지 */
.wiki-table td > .wiki-fold > .wiki-fold-head,
.wikitable td > .wiki-fold > .wiki-fold-head {
  padding: 7px 11px;
  font-size: 0.92rem;
}
.wiki-table td > .wiki-fold .wiki-fold-body,
.wikitable td > .wiki-fold .wiki-fold-body {
  padding: 10px 12px;
}
/* 셀 안에 여러 접기가 세로로 쌓일 때 간격 */
.wiki-table td > .wiki-fold + .wiki-fold,
.wikitable td > .wiki-fold + .wiki-fold {
  margin-top: 6px;
}

/* ============================================================
   보안 인가 {{인가|등급=N}} — 등급별 잠금/토글
   ============================================================ */
/* 등급 미달: 인라인 잠금 마크 */
.authgate-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: var(--mono, monospace);
  border: 1px solid;
  vertical-align: middle;
  line-height: 1.4;
  max-width: 100%;
  white-space: normal;
}
.authgate-ic { font-size: 0.9em; }
.authgate-badge {
  font-weight: 800;
  letter-spacing: 0.04em;
}
.authgate-req { opacity: 0.85; }

/* 등급 통과: 토글 박스 */
.authgate-box {
  margin: 1em 0;
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}
.authgate-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 15px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
}
.authgate-toggle-label { flex: 1; font-weight: 600; }
.authgate-chevron { transition: transform 0.2s; opacity: 0.7; }
.authgate-box.is-open .authgate-chevron { transform: rotate(180deg); }
.authgate-content {
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  line-height: 1.75;
  color: var(--ink);
  background: color-mix(in srgb, var(--agc) 4%, transparent);
}

/* 등급별 색: 1 대외비(청록) → 5 일급기밀(진한 붉은) */
.ag-1 { --agc: #2ba3e0; }
.ag-2 { --agc: #2b9ee0; }
.ag-3 { --agc: #e0a52b; }
.ag-4 { --agc: #e0632b; }
.ag-5 { --agc: #e0342b; }
.authgate-mark, .authgate-box {
  border-color: color-mix(in srgb, var(--agc) 55%, #000);
}
.authgate-mark {
  color: color-mix(in srgb, var(--agc) 92%, #fff);
  background: color-mix(in srgb, var(--agc) 16%, #0a0708);
  font-weight: 500;
}
.authgate-box {
  background: color-mix(in srgb, var(--agc) 7%, #0a0708);
}
.authgate-toggle .authgate-badge { color: var(--agc); }
.authgate-box .authgate-ic { color: var(--agc); }

/* 제로셀: 최고 등급은 크림슨+금색 */
html[data-preset="zerocell"] .ag-5 { --agc: var(--crimson); }
html[data-preset="zerocell"] .ag-5 .authgate-badge { color: var(--gold); }

/* 모바일 */
@media (max-width: 640px) {
  .authgate-mark { white-space: normal; }
  .authgate-content { padding: 12px 13px; }
}

/* ============================================================
   사이트 공지 배너 — 모든 페이지 상단
   ============================================================ */
.site-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1240px;
  margin: 12px auto 0;
  padding: 11px 20px;
  font-size: 0.92rem;
  border: 1px solid color-mix(in srgb, var(--snc) 35%, var(--line));
  border-radius: 10px;
  --snc: var(--accent);
  background: color-mix(in srgb, var(--snc) 10%, var(--bg));
  color: var(--ink);
}
.site-notice--info  { --snc: var(--accent); }
.site-notice--warn  { --snc: #e0912b; }
.site-notice--event { --snc: #d94aa5; }
.site-notice-ic {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--snc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--snc) 25%, transparent);
}
.site-notice-text { flex: 1; line-height: 1.5; }
.site-notice-text a { color: var(--snc); font-weight: 600; text-decoration: none; }
.site-notice-text a:hover { text-decoration: underline; }
.site-notice-text b { color: var(--snc); }
.site-notice-x {
  flex: none;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.site-notice-x:hover { background: color-mix(in srgb, var(--snc) 15%, transparent); color: var(--ink); }

/* 관리 페이지 미리보기 안에서는 아래 여백 */
.adm-notice-preview { margin: 10px 0 16px; }
.adm-notice-preview .site-notice { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--snc) 40%, var(--line)); }

html[data-preset="zerocell"] .site-notice--info { --snc: var(--crimson); }

@media (max-width: 640px) {
  .site-notice { padding: 10px 14px; font-size: 0.86rem; gap: 9px; }
}

/* 관리 폼 필드(공지 편집용) */
.adm-form { margin: 6px 0 10px; max-width: 640px; }
.adm-field { display: block; margin-bottom: 12px; }
.adm-label { display: block; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 5px; }
.adm-textarea, .adm-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.adm-select { max-width: 240px; }
.adm-actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   운영 기록(특수:기록) · 토론 목록(특수:토론)
   ============================================================ */
/* 로그 필터 탭 */
.log-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 18px;
}
.log-filter-tab {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.log-filter-tab:hover { border-color: var(--accent); color: var(--ink); }
.log-filter-tab.is-active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

/* 로그 목록 */
.log-list { list-style: none; margin: 0 0 18px; padding: 0; }
.log-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.log-time { color: var(--ink-soft); font-size: 0.85rem; flex: none; }
.log-badge {
  flex: none;
  padding: 2px 9px;
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid;
}
.log-del    { color: #e0655a; border-color: color-mix(in srgb, #e0655a 45%, transparent); background: color-mix(in srgb, #e0655a 10%, transparent); }
.log-up     { color: #3fb37a; border-color: color-mix(in srgb, #3fb37a 45%, transparent); background: color-mix(in srgb, #3fb37a 10%, transparent); }
.log-user   { color: #4aa3e0; border-color: color-mix(in srgb, #4aa3e0 45%, transparent); background: color-mix(in srgb, #4aa3e0 10%, transparent); }
.log-role   { color: #d9a441; border-color: color-mix(in srgb, #d9a441 45%, transparent); background: color-mix(in srgb, #d9a441 10%, transparent); }
.log-notice { color: #c07ad0; border-color: color-mix(in srgb, #c07ad0 45%, transparent); background: color-mix(in srgb, #c07ad0 10%, transparent); }
.log-sys, .log-etc { color: var(--ink-soft); border-color: var(--line); }
.log-target { color: var(--link); text-decoration: none; }
a.log-target:hover { text-decoration: underline; }
.log-actor { color: var(--ink-soft); font-size: 0.86rem; }
.log-actor::before { content: "· "; }
.log-detail {
  color: var(--ink-soft);
  font-size: 0.86rem;
  flex-basis: 100%;
  padding-left: 2px;
}

/* 토론 목록 */
.talk-list { list-style: none; margin: 0; padding: 0; }
.talk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.talk-title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
}
.talk-title:hover { color: var(--accent); }
.talk-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.talk-subject { color: var(--link); text-decoration: none; }
.talk-subject:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .log-item { gap: 7px; }
  .talk-item { align-items: flex-start; flex-direction: column; gap: 5px; }
  .talk-meta { gap: 10px; }
}

/* ============================================================
   세계지도 {{세계지도}} — 전황도 (GIF 연출 기반)
   ============================================================ */
.wmap {
  --wmap-h: 520px;
  margin: 1.5em 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  background: #05060a;
}
.wmap-title {
  padding: 12px 18px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, #05060a);
}

/* 연도 슬라이더 */
.wmap-yearbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px;
  background: #07080e;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono, monospace);
}
.wmap-year-prev, .wmap-year-next {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 0.9rem; padding: 4px 8px;
  border-radius: 5px; transition: color 0.15s, background 0.15s;
}
.wmap-year-prev:hover, .wmap-year-next:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wmap-year-list { display: flex; align-items: center; gap: 10px; }
.wmap-year {
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink-soft); opacity: 0.5; transition: opacity 0.2s, color 0.2s;
  cursor: pointer;
}
.wmap-year.is-active { opacity: 1; color: var(--accent); }
.wmap-year-sep { color: var(--ink-soft); opacity: 0.4; }

/* 지도 무대 */
.wmap-stage {
  position: relative;
  height: var(--wmap-h);
  background:
    radial-gradient(140% 120% at 50% 40%, #0a1420, #05060a 75%);
  overflow: hidden;
}
.wmap-bg-svg, .wmap-bg-img {
  position: absolute; inset: 0;
}
.wmap-bg-img { background-size: cover; background-position: center; opacity: 0.9; }
.wmap-base { width: 100%; height: 100%; }
.wmap-grid line { stroke: color-mix(in srgb, var(--accent) 18%, transparent); stroke-width: 0.5; }
.wmap-land path {
  fill: color-mix(in srgb, var(--accent) 10%, #0d1a26);
  stroke: color-mix(in srgb, var(--accent) 40%, transparent);
  stroke-width: 1;
}

/* 스캔라인 오버레이 */
.wmap-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.18) 3px);
  mix-blend-mode: multiply;
}

/* 마커 */
.wmap-markers { position: absolute; inset: 0; }
.wmap-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
  --mc: #e0655a;
}
.wmap-c-blue   { --mc: #5a8fe0; }
.wmap-c-red    { --mc: #e0655a; }
.wmap-c-green  { --mc: #5ac07a; }
.wmap-c-purple { --mc: #a97ad0; }
.wmap-c-gold   { --mc: #d9b04a; }
.wmap-c-gray   { --mc: #9aa3ad; }
.wmap-marker-dot {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mc);
  font-size: 0.85rem;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mc) 70%, transparent));
  transition: transform 0.15s;
}
.wmap-marker:hover .wmap-marker-dot { transform: scale(1.4); }
.wmap-ic-pin { animation: wmap-pulse 2s infinite; }
@keyframes wmap-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.wmap-marker-label {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--mc) 60%, #fff);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  opacity: 0.9;
  font-weight: 600;
}
.wmap-marker:hover .wmap-marker-label { opacity: 1; color: #fff; }

/* 연도 필터로 숨겨진 마커 */
.wmap-marker.is-hidden { display: none; }

html[data-preset="zerocell"] .wmap-land path {
  fill: color-mix(in srgb, var(--crimson) 8%, #140a0a);
  stroke: color-mix(in srgb, var(--crimson) 35%, transparent);
}

@media (max-width: 640px) {
  .wmap { --wmap-h: 360px; }
  .wmap-marker-label { font-size: 0.64rem; }
  .wmap-marker-dot { width: 16px; height: 16px; }
}

/* ============================================================
   개선: 인라인 코드(wiki-code) — 좁은 칸에서 세로로 눌리는 문제 해결
   ============================================================ */
.wiki-code {
  display: inline;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, var(--tint));
  border: 1px solid var(--line);
  font-family: var(--mono, monospace);
  font-size: 0.88em;
  color: var(--ink);
  white-space: nowrap;
  word-break: keep-all;
}
/* 좁은 칸에서는 코드가 줄바꿈되도록(세로 눌림 방지) */
@media (max-width: 640px) {
  .wiki-code { white-space: normal; word-break: break-all; }
}
/* 캐릭터카드 빈 상태: 좁은 칸에서도 가독성 유지 */
.charcard-empty {
  min-width: 0;
  overflow-wrap: anywhere;
}
.charcard-empty .wiki-code {
  display: inline-block;
  margin: 3px 2px;
  white-space: normal;
  word-break: break-all;
}

/* ============================================================
   목차 틀 {{목차|우측}} — 우측 플로팅 목차
   ============================================================ */
.wiki-toc--right {
  float: right;
  width: 260px;
  max-width: 40%;
  margin: 0 0 1.2em 1.4em;
}
@media (max-width: 720px) {
  .wiki-toc--right { float: none; width: 100%; max-width: 100%; margin: 1em 0; }
}

/* ============================================================
   검색 자동완성 + 미리보기 드롭다운
   ============================================================ */
.search-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--card, #12151c);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.6);
  overflow: hidden;
  display: none;
}
.search-suggest.is-open { display: block; }
.ss-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background 0.12s;
}
.ss-item:hover, .ss-item.is-active { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ss-img {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: color-mix(in srgb, var(--accent) 15%, var(--tint));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.ss-img--none { opacity: 0.5; }
.ss-body { min-width: 0; flex: 1; }
.ss-title { display: block; font-weight: 600; font-size: 0.94rem; color: var(--ink); }
.ss-sum {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}
.ss-none { opacity: 0.6; font-style: italic; }
.ss-all {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 0.86rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.12s;
}
.ss-all:hover, .ss-all.is-active { background: color-mix(in srgb, var(--accent) 15%, transparent); }

html[data-preset="zerocell"] .ss-item:hover,
html[data-preset="zerocell"] .ss-item.is-active { background: color-mix(in srgb, var(--crimson) 14%, transparent); }

@media (max-width: 640px) {
  /* 검색창 바로 아래에 붙게 하고(헤더가 여러 단이라 60px 고정은 화면을 덮었다),
     화면을 세로로 가로막지 않도록 높이를 제한해 넘치면 안에서 스크롤한다. */
  .search-suggest {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    max-height: 60vh; overflow-y: auto;
  }
  .ss-sum { white-space: normal; }
}

/* ============================================================
   제로셀 스킨 — 사이버펑크 / SF 강화
   틀 형태를 각진 클립·네온·홀로그램 느낌으로
   ============================================================ */
/* 접기: 각진 모서리 + 네온 좌측 바 */
html[data-preset="zerocell"] .wiki-fold {
  border-radius: 0;
  border-left: 2px solid var(--crimson);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 6%, #0a0708), #0a0708);
}
html[data-preset="zerocell"] .wiki-fold-head {
  font-family: var(--mono, monospace);
  letter-spacing: 0.03em;
  text-transform: none;
}
html[data-preset="zerocell"] .wiki-fold-head::before {
  content: "▶ ";
  color: var(--crimson);
  font-size: 0.8em;
}

/* 정보상자·네비박스: 각진 헤더 + 홀로그램 라인 */
html[data-preset="zerocell"] .infobox,
html[data-preset="zerocell"] .navbox {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--crimson) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 12%, transparent),
              0 8px 30px -10px color-mix(in srgb, var(--crimson) 40%, transparent);
}
html[data-preset="zerocell"] .infobox-head {
  border-bottom: 1px solid var(--crimson);
}
html[data-preset="zerocell"] .navbox-header {
  background: linear-gradient(90deg, color-mix(in srgb, var(--crimson) 18%, #0a0708), #0a0708);
  border-bottom: 1px solid var(--gold);
}

/* 안내 박스: 스캔라인 + 각진 클립 */
html[data-preset="zerocell"] .notice-box {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
html[data-preset="zerocell"] .notice-box::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, color-mix(in srgb, var(--crimson) 4%, transparent) 4px);
  pointer-events: none;
}

/* 인가 박스: 홀로그램 테두리 */
html[data-preset="zerocell"] .authgate-box {
  border-radius: 0;
  border-width: 1px;
  box-shadow: inset 0 0 20px -12px var(--agc), 0 0 0 1px color-mix(in srgb, var(--agc) 20%, transparent);
}
html[data-preset="zerocell"] .authgate-mark {
  border-radius: 0;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

/* 캐릭터카드·요소그리드: 각진 네온 */
html[data-preset="zerocell"] .emblem-item,
html[data-preset="zerocell"] .charcard {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--crimson) 30%, transparent);
}
html[data-preset="zerocell"] .emblem-item:hover,
html[data-preset="zerocell"] .charcard:hover {
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--gold) 60%, transparent);
  border-color: var(--gold);
}

/* 헤딩: SF 브래킷 강조(번호매김 시) */
html[data-preset="zerocell"] .wiki-content h2 {
  font-family: var(--mono, monospace);
  letter-spacing: 0.02em;
}

/* 세계지도: 제로셀에서 더 강한 스캔·네온 */
html[data-preset="zerocell"] .wmap {
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--crimson) 40%, transparent);
}
html[data-preset="zerocell"] .wmap-title {
  font-family: var(--mono, monospace);
  border-bottom: 1px solid var(--gold);
}

/* 검색 자동완성: 각진 */
html[data-preset="zerocell"] .search-suggest { border-radius: 0; border-color: color-mix(in srgb, var(--crimson) 40%, transparent); }
html[data-preset="zerocell"] .ss-img { border-radius: 0; }

/* 사이트 공지: 각진 + 네온 좌측 */
html[data-preset="zerocell"] .site-notice {
  border-radius: 0;
  border-left: 3px solid var(--crimson);
}

/* ============================================================
   대문·전 요소 모바일 가독성 종합 보강
   ============================================================ */
@media (max-width: 640px) {
  /* 대문히어로: 워터마크·패딩 축소 */
  .herob { min-height: 180px; }
  .herob-watermark { font-size: 3rem !important; }
  .herob-content { padding: 20px 16px !important; }
  .herob-eyebrow { font-size: 0.7rem; }
  .herob h1, .herob .herob-title { font-size: 1.5rem; }

  /* 요소그리드: 2칸 유지하되 패딩·글자 축소 */
  .emblem-item { padding: 12px 8px; }
  .emblem-name { font-size: 0.86rem; }
  .emblem-sub { font-size: 0.72rem; }

  /* 캐릭터카드: 가로 스크롤로(세로 눌림 방지) */
  .charcards {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    scroll-snap-type: x mandatory;
  }
  .charcards .charcard { flex: 0 0 78%; scroll-snap-align: start; }

  /* 세계관/설정 슬라이드: 높이 축소 */
  .worldslide-viewport, .worldslide { max-height: 320px; }

  /* 통계 패널: 1~2칸 */
  .statpanel-grid { grid-template-columns: repeat(2, 1fr); }

  /* 정보게시판·실시간검색: 패딩 축소 */
  .noticeboard, .hotsearch { padding: 12px 14px; }

  /* 표: 이미 래퍼로 스크롤되지만 폰트 더 축소 */
  .wiki-table-wrap { margin: 1em -4px; }

  /* 링크 미리보기 팝오버: 모바일에선 폭 조정 */
  .wiki-preview-pop { max-width: 88vw; }
}

@media (max-width: 400px) {
  .emblem-grid { grid-template-columns: 1fr; }
  .statpanel-grid { grid-template-columns: 1fr; }
  .herob-watermark { font-size: 2.2rem !important; }
  .charcards .charcard { flex: 0 0 85%; }
}

/* ============================================================
   보안 인가 — 인라인(검열식) 단순 텍스트 모드
   ============================================================ */
.authgate-inline {
  display: inline;
  padding: 1px 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--agc) 10%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--agc) 50%, transparent);
}
.authgate-inline-badge {
  font-family: var(--mono, monospace);
  font-size: 0.78em;
  font-weight: 700;
  color: var(--agc);
  margin-right: 4px;
  opacity: 0.85;
}
.authgate-inline-body { color: var(--ink); }
.authgate-inline--locked {
  color: color-mix(in srgb, var(--agc) 85%, var(--ink-soft));
  font-family: var(--mono, monospace);
  font-size: 0.86em;
  border-bottom: none;
  background: color-mix(in srgb, var(--agc) 8%, transparent);
  cursor: help;
}

/* ============================================================
   펼접 애니메이션 — grid-template-rows 트릭(가볍고 부드러움)
   ============================================================ */
.wiki-fold-anim {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease;
}
.wiki-fold.is-open .wiki-fold-anim {
  grid-template-rows: 1fr;
}
.wiki-fold-anim > .wiki-fold-body {
  overflow: hidden;
  min-height: 0;
}
/* details가 열려 있어도(open) is-open 없으면 접힌 상태로 시작 */
.wiki-fold[open]:not(.is-open) .wiki-fold-anim { grid-template-rows: 0fr; }
.wiki-fold.is-open .wiki-fold-anim { grid-template-rows: 1fr; }

/* 접기 화살표(▾) 회전 */
.wiki-fold summary .wiki-fold-caret,
.wiki-fold summary::-webkit-details-marker { transition: transform .2s ease; }
.wiki-fold.is-open summary .wiki-fold-caret { transform: rotate(180deg); }

/* ============================================================
   보안 인가 {{보안 인가|N급|내용}} — JWiki 스타일 인라인
   ============================================================ */
.secauth {
  display: inline;
  font-weight: 700;
  white-space: normal;
  --agc: #888;
}
.secauth .secauth-ic {
  font-size: 0.95em;
  margin-right: 2px;
  vertical-align: baseline;
}
.secauth-body { color: var(--agc); }
.secauth--ok .secauth-body { color: var(--agc); }
.secauth--locked .secauth-body { color: var(--agc); }

/* 급수별 색: 0 검정 · 1 빨강 · 2 주황 · 3 노랑 · 4 초록 · 5 파랑 */
.secauth.ag-0 { --agc: #1a1a1a; }
.secauth.ag-1 { --agc: #e0342b; }
.secauth.ag-2 { --agc: #e0912b; }
.secauth.ag-3 { --agc: #d9bd2b; }
.secauth.ag-4 { --agc: #3fa544; }
.secauth.ag-5 { --agc: #2b6be0; }

/* 다크 테마에서 0급 검정은 잘 안 보이므로 밝게 보정 */
html:not([data-mode="light"]) .secauth.ag-0 { --agc: #d8d8d8; }

/* 승인 목록 */
.secauth-approval { display: block; line-height: 1.9; }
.secauth-approval .secauth { display: inline; }
/* 승인 안내의 스위치 — 전체(모두 펼치기)와 급수별. */
/* display:inline 이 hidden 을 덮지 않도록 가드를 먼저 둔다. */
.secauth-approval .secauth[hidden] { display: none; }
.secauth-approval .secauth-allbtn {
  display: inline-block;
  padding: 0 9px 1px;
  margin-bottom: 3px;
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 45%, transparent);
  border-radius: 999px;
}
.secauth-approval .secauth-allbtn .secauth-body { color: var(--ink-soft); font-weight: 600; }
.secauth-approval .secauth-allbtn.is-on { border-style: solid; }
.secauth-approval .secauth.is-actionable { cursor: pointer; }
.secauth-approval .secauth.is-actionable:hover .secauth-body { text-decoration: underline dotted; }
.secauth-approval .secauth.is-on .secauth-body { opacity: .78; }


/* 제로셀: 급수 색 위에 네온 글로우 */
html[data-preset="zerocell"] .secauth .secauth-body {
  text-shadow: 0 0 6px color-mix(in srgb, var(--agc) 50%, transparent);
}

/* ============================================================
   특수:틀 — 틀 목록·설정 페이지
   ============================================================ */
.tpl-group { margin-top: 1.6em; }
.tpl-table { width: 100%; margin: 0.6em 0 1.4em; }
.tpl-table th { text-align: left; font-size: 0.9rem; }
.tpl-table td { vertical-align: top; }
.tpl-table code.wiki-code { white-space: nowrap; }
.tpl-userlist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-userlist li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tint);
}
.tpl-userlist a { text-decoration: none; color: var(--link); }
@media (max-width: 640px) {
  .tpl-table code.wiki-code { white-space: normal; word-break: break-all; }
}

/* ============================================================
   (옛 인라인 스포일러 textfold 제거됨 — 펼접은 cellfold 방식으로 통합)
   ============================================================ */

/* 모듈 오류 표시 */
.module-error {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, #e0655a 12%, transparent);
  border: 1px solid color-mix(in srgb, #e0655a 40%, transparent);
  color: #e0655a;
  font-size: 0.86em;
}

/* ============================================================
   사원증 {{사원증}} — JWiki 스타일 뒤집기(flip) 카드
   ============================================================ */
.idcard {
  display: inline-block;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 340 / 210;
  perspective: 1200px;
  vertical-align: top;
  margin: 8px 0;
  cursor: pointer;
}
.idcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.idcard:hover .idcard-inner,
.idcard:focus .idcard-inner,
.idcard.is-flipped .idcard-inner { transform: rotateY(180deg); }

.idcard-face {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #f4f5f7;
  box-shadow: 0 8px 26px -8px rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.08);
}
.idcard-back { transform: rotateY(180deg); }

/* 좌상단 삼각 마커 */
.idcard-corner {
  position: absolute;
  top: 0; left: 0;
  width: 26px; height: 46px;
  background: #1a1a1a;
  border-radius: 14px 0 20px 0;
  z-index: 3;
}
.idcard-corner::after {
  content: "";
  position: absolute;
  top: 14px; left: 6px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #fff;
}

/* 앞면 웨이브 */
.idcard-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.idcard-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.9; z-index: 1;
  mix-blend-mode: luminosity;
}

/* 앞면 로고(우상단) */
.idcard-logo {
  position: absolute;
  top: 14px; right: 16px;
  text-align: right;
  z-index: 2;
  line-height: 1.15;
}
.idcard-logo-mark {
  display: block;
  font-family: var(--mono, monospace);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--idc, #333);
  letter-spacing: 0.05em;
}
.idcard-logo-org { display: block; font-size: 0.52rem; color: #555; letter-spacing: 0.06em; }
.idcard-logo-sub { display: block; font-size: 0.5rem; color: #888; letter-spacing: 0.18em; }

/* 앞면 이름(우하단) */
.idcard-name-kr {
  position: absolute;
  right: 16px; bottom: 46px;
  font-size: 0.95rem;
  color: #222;
  font-weight: 600;
  z-index: 2;
}
.idcard-name-en {
  position: absolute;
  right: 16px; bottom: 10px;
  font-size: 2.2rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.02em;
  z-index: 2;
  line-height: 1;
  font-family: "Arial Black", var(--mono, sans-serif);
}

/* 뒷면 */
.idcard-back-banner {
  position: relative;
  height: 42%;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}
.idcard-notice {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.95);
  line-height: 1.35;
  max-width: 62%;
}
.idcard-logo-mark--sm { font-size: 1.05rem; color: #fff; }
.idcard-back-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.idcard-dept { font-size: 0.9rem; color: #222; }
.idcard-bname { font-size: 1.15rem; margin-left: 4px; }
.idcard-role { font-size: 0.62rem; color: #666; margin: 3px 0; }
.idcard-hash {
  font-family: var(--mono, monospace);
  font-size: 0.54rem;
  color: #6a6a6a;
  letter-spacing: 0.02em;
  word-break: break-all;
  max-width: 200px;
}
.idcard-qr { flex: none; background: #fff; padding: 3px; border-radius: 3px; }
.idcard-oldtag {
  position: absolute;
  top: 8px; right: 10px;
  font-size: 0.55rem;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 4;
}
.idcard--old { filter: sepia(0.3) contrast(0.95); }

/* 뒤집기 힌트 */
.idcard::after {
  content: "탭하여 뒤집기";
  position: absolute;
  bottom: -20px; left: 0; right: 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.2s;
}
.idcard:hover::after { opacity: 0.7; }

/* 제로셀: 네온 테두리 */
html[data-preset="zerocell"] .idcard-face {
  border-color: color-mix(in srgb, var(--crimson) 40%, transparent);
  box-shadow: 0 0 20px -6px color-mix(in srgb, var(--crimson) 50%, transparent);
}

@media (max-width: 640px) {
  .idcard { width: 300px; }
  .idcard-name-en { font-size: 1.9rem; }
}

/* ============================================================
   큰인용 {{큰인용}} — 오펜시브 양식 인용
   ============================================================ */
.bigquote {
  --bq: #d9a441;
  margin: 1.6em 0;
  background:
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--bq) 6%, transparent), transparent 60%),
    #171012;
  border-radius: 4px;
  overflow: hidden;
}
.bigquote-bar {
  height: 5px;
  background: linear-gradient(90deg,
    transparent, color-mix(in srgb, var(--bq) 85%, #fff) 18%,
    var(--bq) 50%,
    color-mix(in srgb, var(--bq) 85%, #fff) 82%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--bq) 60%, transparent);
}
.bigquote-body { padding: 22px 26px; }
.bigquote-ko {
  font-size: 1.12rem;
  font-weight: 800;
  color: #f2ecec;
  line-height: 1.65;
  text-shadow: 0 0 14px color-mix(in srgb, var(--bq) 30%, transparent);
}
.bigquote-en {
  margin-top: 8px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #efe9e4;
  letter-spacing: 0.01em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--bq) 25%, transparent);
}
.bigquote-src-line {
  margin-top: 16px;
  height: 1px;
  background: color-mix(in srgb, var(--bq) 40%, transparent);
}
.bigquote-src {
  margin-top: 8px;
  text-align: right;
  font-size: 0.92rem;
  color: #d8cfc8;
}
@media (max-width: 640px) {
  .bigquote-body { padding: 16px 16px; }
  .bigquote-ko { font-size: 1rem; }
  .bigquote-en { font-size: 0.92rem; }
}

/* ============================================================
   주인공틀 {{주인공틀}} — 실루엣 패널(호버 시 컬러 공개)
   레퍼런스 방식: 실루엣 아래 · 컬러 위, 호버/현재문서에서 컬러 페이드인
   ============================================================ */
.silh-wrap {
  margin: 1.6em 0;
  overflow-x: auto;
}
.silh-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  border: 2px solid var(--silh-frame, #dc5050);
  box-shadow: 0 0 10px rgba(255, 103, 103, 0.55);
  background: #271212;
}
/* 헤더 */
.silh-table .silh-head {
  height: 65px;
  padding: 10px 12px;
  border: 1px solid #241c1f;
  background-color: #271212;
  text-align: center;
  font-weight: 400;
}
.silh-logo {
  display: block;
  max-width: 150px;
  max-height: 44px;
  margin: 0 auto 4px;
  object-fit: contain;
}
.silh-title {
  display: block;
  font-size: 0.95rem;
  color: #dfbaba;
  letter-spacing: 0.02em;
}
/* 그림 칸 */
.silh-table .silh-cell {
  background-color: #2a1818;
  border: none;
  padding: 6px 4px 2px;
  vertical-align: bottom;
}
.silh-fig {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  user-select: none;
  text-decoration: none;
  overflow: hidden;
}
/* 실루엣(기본 레이어) */
.silh-base {
  position: absolute;
  inset: 0;
  display: block;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  transition: opacity 0.35s ease;
}
/* 실루엣 이미지가 없을 때: SVG 대체 */
.silh-base--svg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #0a0708;
}
.silh-base--svg svg { width: 80%; height: 94%; }
/* 컬러 이미지만 있을 때: 어둡게 눌러 실루엣처럼 */
.silh-base--dim { filter: brightness(0) contrast(1.1); }
/* 컬러(호버 시 떠오르는 레이어) */
.silh-color {
  position: absolute;
  inset: 0;
  display: block;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0;
  /* 레퍼런스와 동일: 확대 없이 페이드만(약 0.4초) */
  transition: opacity 0.4s ease;
  will-change: opacity;
}
/* 컬러 이미지가 없을 때: 실루엣에 필터를 걸어 대체 */
.silh-color--filter { filter: brightness(1.35) saturate(1.1); }
/* 호버 / 포커스 / 현재 문서 → 컬러 공개 */
.silh-cell:hover .silh-color,
.silh-cell:focus-within .silh-color,
.silh-cell.is-current .silh-color {
  opacity: 1;
}
/* 모바일: 탭하면 공개(터치 기기는 hover가 없으므로 JS가 is-revealed를 붙인다) */
.silh-cell.is-revealed .silh-color { opacity: 1; }
.silh-cell.is-revealed .silh-base { opacity: 0; }
.silh-cell.is-current .silh-base { opacity: 0; }
.silh-fig:focus-visible { outline: 2px solid var(--silh-glow, #dc5050); outline-offset: -2px; }

/* 이름 칸 */
.silh-table .silh-name-cell {
  background-color: #2a1818;
  border: 1px solid var(--silh-frame, #dc5050);
  padding: 7px 4px;
  vertical-align: middle;
}
.silh-label {
  display: block;
  line-height: 1.45;
  text-shadow: 0 0 6px var(--silh-glow, #b87f7f);
  color: #000;
}
.silh-kw {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #dfbaba;
}
a.silh-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: #dfbaba;
  text-decoration: none;
  word-break: keep-all;
}
a.silh-name:hover { color: #ffd9d4; }
.silh-name-cell.is-current a.silh-name { color: #fff1ee; }
.silh-name-cell.is-current { box-shadow: inset 0 0 12px var(--silh-glow, #dc5050); }

/* 좁은 화면 — 가로 스크롤 유지(칸이 뭉개지지 않도록) */
@media (max-width: 720px) {
  .silh-table { min-width: 520px; }
  .silh-logo { max-height: 36px; }
}

/* 섹션별 편집 링크 */
.wiki-h-editsec {
  margin-left: 10px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  vertical-align: middle;
}
h2:hover .wiki-h-editsec, h3:hover .wiki-h-editsec, h4:hover .wiki-h-editsec { opacity: 1; }
.wiki-h-editsec:hover { color: var(--accent); }
@media (max-width: 720px) { .wiki-h-editsec { opacity: 0.6; } }

/* ============================================================
   문서 댓글
   ============================================================ */
.cmts { margin-top: 3em; padding-top: 1em; border-top: 1px solid var(--line); }
.cmts-count {
  font-size: 0.8em; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 9px; border-radius: 999px; margin-left: 6px;
}
.cmts-empty, .cmts-login { color: var(--ink-soft); font-size: 0.92rem; }
.cmts-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.cmt { padding: 11px 0; border-bottom: 1px solid var(--line); }
.cmt-meta { display: flex; align-items: baseline; gap: 9px; font-size: 0.85rem; }
.cmt-author { color: var(--ink); }
.cmt-guest {
  font-size: 0.7rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}
.cmt-time { color: var(--ink-soft); font-size: 0.8rem; }
.cmt-delform { display: inline; margin-left: auto; }
.cmt-del {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-soft); font-size: 0.76rem; padding: 1px 6px;
  border-radius: 4px;
}
.cmt-del:hover { color: #e0655a; background: color-mix(in srgb, #e0655a 10%, transparent); }
.cmt-body { margin-top: 5px; line-height: 1.65; font-size: 0.95rem; overflow-wrap: anywhere; }
.cmts-form { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.cmts-name {
  width: 180px; padding: 7px 11px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit;
}
.cmts-input {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; resize: vertical;
}
.cmts-actions { display: flex; align-items: center; gap: 12px; }
.cmts-cool { font-size: 0.82rem; color: #e0912b; }
.cmts-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* 더보기 메뉴 보호 등급 */
.menu-form--protect { display: flex; align-items: center; gap: 6px; padding: 6px 14px; }
.menu-protect-label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.menu-protect-sel {
  padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--card); color: var(--ink); font-size: 0.82rem;
}
.menu-protect-btn { font-size: 0.82rem; padding: 3px 10px !important; width: auto !important; }
.pstat b { color: var(--ink); }
.pstat--rank b { color: var(--pt); }

.rank-table .rank-no { text-align: center; font-weight: 700; }
.rank-top { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.rank-tier {
  font-size: 0.78rem; font-weight: 700; color: var(--pt);
  border: 1px solid color-mix(in srgb, var(--pt) 50%, transparent);
  padding: 1px 8px; border-radius: 999px;
}

/* ============================================================
   언어 전환 바(번역 언어판)
   ============================================================ */
.langsw {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 1.2em;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tint);
  font-size: 0.86rem;
}
.langsw-ic { opacity: 0.7; }
.langsw-item {
  padding: 2px 11px; border-radius: 999px;
  text-decoration: none; color: var(--link);
  border: 1px solid transparent;
}
.langsw-item:hover { border-color: var(--accent); }
.langsw-item.is-current {
  color: var(--ink); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.langsw-new { color: var(--ink-soft); border-style: dashed; border-color: var(--line-strong); }
.langsw-new:hover { color: var(--accent); }

/* 보안 인가 펼접 토글 */
.secauth[data-secauth] { cursor: pointer; user-select: none; }
.secauth[data-secauth]:hover .secauth-body { text-decoration: underline dotted; }
/* 펼치면 [N급 보안] 라벨을 감추고 내용만 남긴다(아이콘은 닫기 버튼으로 유지) */
.secauth[data-secauth].is-open .secauth-body { display: none; }
.secauth[data-secauth].is-open .secauth-ic { padding: 0 3px; margin-right: 0; }
.secauth-reveal {
  display: inline;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--agc, #888) 10%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, var(--agc, #888) 50%, transparent);
  color: var(--ink);
}
/* hidden 속성이 display:inline 에 덮이지 않도록(펼접 토글의 기본 상태) */
.secauth-reveal[hidden] { display: none; }
.secauth-reveal.ag-0 { --agc: #1a1a1a; } .secauth-reveal.ag-1 { --agc: #e0342b; }
.secauth-reveal.ag-2 { --agc: #e0912b; } .secauth-reveal.ag-3 { --agc: #d9bd2b; }
.secauth-reveal.ag-4 { --agc: #3fa544; } .secauth-reveal.ag-5 { --agc: #2b6be0; }
html:not([data-mode="light"]) .secauth-reveal.ag-0 { --agc: #d8d8d8; }

/* ============================================================
   정렬 규칙: 모든 표·목차는 왼쪽 배치
   ============================================================ */
.wiki-content .wiki-table,
.wiki-content .wikitable,
.wiki-content .wiki-table-wrap {
  margin-left: 0;
  margin-right: auto;
}
/* 목차: 왼쪽 배치가 기본. {{목차|우측}}만 우측 플로팅. */
.wiki-toc--right {
  float: right !important;
  margin: 0 0 1.2em 1.4em !important;
}


/* ============================================================
   ✨ 통합 애니메이션 강화 — 모든 모션·글로우에 생명 부여
   (prefers-reduced-motion 사용자에겐 하단에서 일괄 정지)
   ============================================================ */

/* ---- 키프레임 정의 ---- */
@keyframes glow-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes glow-breathe-strong {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes bar-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes text-glow-pulse {
  0%, 100% { text-shadow: 0 0 8px color-mix(in srgb, var(--gc, #e0342b) 30%, transparent); }
  50% { text-shadow: 0 0 16px color-mix(in srgb, var(--gc, #e0342b) 65%, transparent), 0 0 26px color-mix(in srgb, var(--gc, #e0342b) 30%, transparent); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes border-glow-pulse {
  0%, 100% { box-shadow: 0 0 14px -4px var(--gcol, rgba(224,100,90,0.5)), inset 0 0 20px -14px var(--gcol, rgba(224,100,90,0.4)); }
  50% { box-shadow: 0 0 26px -2px var(--gcol, rgba(224,100,90,0.7)), inset 0 0 28px -12px var(--gcol, rgba(224,100,90,0.55)); }
}
@keyframes badge-pop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes qr-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: 0.6; }
  96% { opacity: 0.9; }
}
@keyframes avatar-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pt, #888) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes underline-slide {
  from { background-size: 0% 2px; }
  to { background-size: 100% 2px; }
}

/* ---- 주인공 실루엣: 등장만(레퍼런스엔 로고 글로우 없음) ---- */
.silh-kw { transition: text-shadow 0.3s ease, color 0.3s ease; }
/* 실루엣 공개 시 부드럽게 */

/* ---- 큰인용: 등장만(글로우·시머 애니메이션 제거) ---- */
.bigquote { animation: scale-in 0.55s ease both; overflow: hidden; }
.bigquote-en { animation: fade-in 1s ease 0.3s both; }
.bigquote-src { animation: fade-in 1s ease 0.5s both; }

/* ---- 사원증: 테두리 글로우 맥동 + QR 깜빡임 + 등장 ---- */
.idcard { animation: scale-in 0.5s ease both; }
.idcard-face { --gcol: color-mix(in srgb, var(--idc, #888) 45%, transparent); }
.idcard:hover .idcard-front,
.idcard:hover .idcard-back { animation: border-glow-pulse 2s ease-in-out infinite; }
.idcard-qr { animation: qr-flicker 5s linear infinite; }
.idcard-logo-mark {
  --gc: var(--idc, #888);
  transition: text-shadow 0.4s ease;
}
.idcard:hover .idcard-logo-mark { text-shadow: 0 0 10px color-mix(in srgb, var(--idc, #888) 60%, transparent); }
/* 가독성: 해시·안내문 살짝 키움 */
.idcard-hash { font-size: 0.54rem; }
.idcard-notice { font-size: 0.6rem; }

/* ---- 보안 인가: 배지 등장 + 자물쇠 맥동 + 펼침 슬라이드 ---- */
.secauth { animation: fade-in 0.4s ease both; }
.secauth-ic { display: inline-block; transition: transform 0.3s ease; }
.secauth[data-secauth]:hover .secauth-ic { transform: scale(1.2); }
.secauth--locked .secauth-ic { animation: glow-breathe-strong 2.5s ease-in-out infinite; }
.secauth-reveal { animation: rise-in 0.35s ease both; }
.secauth-approval .secauth { animation: badge-pop 0.4s ease both; }
.secauth-approval .secauth:nth-child(1) { animation-delay: 0.03s; }
.secauth-approval .secauth:nth-child(2) { animation-delay: 0.09s; }
.secauth-approval .secauth:nth-child(3) { animation-delay: 0.15s; }
.secauth-approval .secauth:nth-child(4) { animation-delay: 0.21s; }
.secauth-approval .secauth:nth-child(5) { animation-delay: 0.27s; }
.secauth-approval .secauth:nth-child(6) { animation-delay: 0.33s; }
.pstat b { transition: color 0.3s ease; }

/* ---- 순위표: 행 등장 + 상위 강조 맥동 ---- */
.rank-table tr { animation: fade-in 0.4s ease both; }
.rank-top { animation: fade-in 0.5s ease both, border-glow-pulse 3s ease-in-out infinite; --gcol: color-mix(in srgb, var(--accent) 30%, transparent); }
.rank-no { transition: transform 0.3s ease; }
.rank-table tr:hover .rank-no { transform: scale(1.2); }

/* ---- 언어 바: 등장 + 현재 언어 은은한 맥동 ---- */
.langsw { animation: rise-in 0.4s ease both; }
.langsw-item { transition: all 0.25s ease; }
.langsw-item:hover { transform: translateY(-1px); }
.langsw-item.is-current { animation: glow-breathe 4s ease-in-out infinite; }

/* ---- 사원증/실루엣/큰인용 공통: 진입 시 부드럽게 ---- */
.idcard-inner { transition: transform 0.6s cubic-bezier(.4,.2,.2,1), box-shadow 0.4s ease; }

/* ---- 접기(details): 아이콘 회전 부드럽게 ---- */
.wiki-fold-icon { transition: transform 0.3s ease; }
.wiki-fold[open] .wiki-fold-icon { transform: rotate(90deg); }

/* ---- 보안등급 배지·틀 링크 등 인터랙션 요소 호버 글로우 ---- */
.wiki-link { transition: color 0.2s ease, background 0.2s ease; }
.tpl-userlist li { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.tpl-userlist li:hover { transform: translateY(-2px); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ============================================================
   접근성: 모션 최소화 설정 시 모든 애니메이션 정지
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   시드 문서형 틀 스타일 (틀:주의사항 · 틀:능력치 · 틀:바깥고리)
   ============================================================ */
.tpl-box {
  border-left: 4px solid var(--accent);
  background: var(--tint);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 1em 0;
}
.tpl-box--정보 { border-left-color: #3a86c8; background: color-mix(in srgb, #3a86c8 8%, var(--card)); }
.tpl-box--경고 { border-left-color: #e0912b; background: color-mix(in srgb, #e0912b 10%, var(--card)); }
.tpl-box--위험 { border-left-color: #e0342b; background: color-mix(in srgb, #e0342b 10%, var(--card)); }

.tpl-statbox {
  border-collapse: collapse;
  min-width: 220px;
  margin: 1em 0;
}
.tpl-statbox th {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  text-align: center;
  font-weight: 700;
  padding: 8px 12px;
}
.tpl-statbox td {
  border: 1px solid var(--line);
  padding: 6px 14px;
}
.tpl-statbox td:first-child { color: var(--ink-soft); font-weight: 600; }

.tpl-extlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tpl-extlink a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--link) 45%, transparent);
  transition: border-color 0.2s ease;
}
.tpl-extlink a:hover { border-bottom-style: solid; }

/* ============================================================
   이미지 정렬·섬네일 ([[파일:...|left/right/center/섬네일|120px]])
   ============================================================ */
.wiki-figure--left { float: left; margin: 4px 16px 8px 0; }
.wiki-figure--right { float: right; margin: 4px 0 8px 16px; }
.wiki-figure--center { display: block; margin: 12px auto; text-align: center; }
.wiki-figure--thumb {
  display: inline-block;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.wiki-figure--thumb.wiki-figure--left,
.wiki-figure--thumb.wiki-figure--right { display: block; }

/* ============================================================
   셀/텍스트 펼접 (cellfold) — 헤더 클릭 시 아래로 펼쳐짐
   기본 본문 텍스트와 동일한 디자인(굵기·색 없음). 캐럿만 클릭 힌트.
   표 셀 안에서도 작동하도록 span 기반(display:block)
   ============================================================ */
.cellfold {
  display: block;
}
.cellfold-head {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  cursor: pointer;
  user-select: none;
  /* 기본 본문과 동일: 굵기·색 상속, 별도 강조 없음 */
  font: inherit;
  color: inherit;
  line-height: inherit;
}
.cellfold-head:focus-visible {
  outline: 2px solid var(--crimson, #c8342e);
  outline-offset: 1px;
  border-radius: 3px;
}
.cellfold-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 0.45em solid currentColor;
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  transition: transform 0.2s ease;
  flex: none;
  opacity: 0.55;
  transform: translateY(-0.05em);
}
.cellfold.is-open .cellfold-caret {
  transform: translateY(-0.05em) rotate(90deg);
}
.cellfold-body {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
  margin-top: 0;
  /* 기본 본문과 동일한 색·행간 */
  color: inherit;
  line-height: inherit;
}
.cellfold.is-open .cellfold-body {
  opacity: 1;
  margin-top: 0.35em;
}
/* 표 셀 안에서 여백 조정 */
.wiki-table td .cellfold,
.wiki-table th .cellfold { display: block; }
.wiki-table td .cellfold-body,
.wiki-table th .cellfold-body { padding-left: 0.2em; }

/* ============================================================
   행 펼접 (rowfold) — 표의 행을 클릭해 상세 행/숨긴 행을 펼침
   |-접기(헤더행) → |-접힘(상세행) 펼침 / |-더보기(이후 행 접기)
   ============================================================ */
.wiki-table tr.rowfold-head {
  cursor: pointer;
  transition: background 0.15s ease;
}
.wiki-table tr.rowfold-head:hover {
  background: color-mix(in srgb, var(--accent, #c8342e) 8%, transparent);
}
.wiki-table tr.rowfold-head:focus-visible {
  outline: 2px solid var(--crimson, #c8342e);
  outline-offset: -2px;
}
.wiki-table tr.rowfold-head > td:first-child,
.wiki-table tr.rowfold-head > th:first-child {
  white-space: nowrap;
}
/* 캐럿(▶) — 헤더 첫 셀·더보기 버튼 앞 */
.rowfold-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.4em;
  border-left: 0.42em solid currentColor;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  transition: transform 0.2s ease;
  opacity: 0.55;
  vertical-align: middle;
}
.wiki-table tr.rowfold-head.is-open .rowfold-caret,
.rowfold-more-toggle.is-open .rowfold-caret {
  transform: rotate(90deg);
}
/* 접힌 상세행·더보기행 — 셀 안쪽 높이를 줄여 부드럽게 접는다
   (표 행은 display:none으로 애니메이션이 안 되므로 셀 padding + 내부 높이를 전환) */
.wiki-table tr.rowfold-body > td,
.wiki-table tr.rowfold-body > th,
.wiki-table tr.rowfold-more > td,
.wiki-table tr.rowfold-more > th {
  transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
}
.wiki-table tr.rowfold-body.is-collapsed > td,
.wiki-table tr.rowfold-body.is-collapsed > th,
.wiki-table tr.rowfold-more.is-collapsed > td,
.wiki-table tr.rowfold-more.is-collapsed > th {
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}
/* JS가 셀 내용을 감싸는 상자 — 높이·투명도를 전환 */
.rowfold-inner {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.32s ease, opacity 0.26s ease;
}
.wiki-table tr:not(.is-collapsed) > td > .rowfold-inner,
.wiki-table tr:not(.is-collapsed) > th > .rowfold-inner {
  opacity: 1;
}
/* JS가 없을 때(스크립트 비활성)도 내용이 보이도록 — 기본은 펼침 */
.no-js .wiki-table tr.rowfold-body.is-collapsed,
.no-js .wiki-table tr.rowfold-more.is-collapsed { display: table-row; }
/* 펼쳐진 상세행은 살짝 다른 배경으로 구분 */
.wiki-table tr.rowfold-body > td,
.wiki-table tr.rowfold-body > th {
  background: color-mix(in srgb, var(--accent, #c8342e) 4%, transparent);
}
/* 더 보기 버튼 행 */
.wiki-table tr.rowfold-more-btn > td {
  text-align: center;
  padding: 6px 12px;
}
.rowfold-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  cursor: pointer;
  user-select: none;
  color: var(--accent, #c8342e);
  font-size: 0.92em;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.rowfold-more-toggle:hover { opacity: 1; }
.rowfold-more-toggle:focus-visible {
  outline: 2px solid var(--crimson, #c8342e);
  outline-offset: 2px;
  border-radius: 3px;
}
/* 더보기가 펼쳐지면 버튼 라벨을 "접기"로 (JS가 클래스 토글) */
.rowfold-more-btn.is-open .rowfold-more-label::after { content: ""; }

/* ============================================================
   문서/댓글 박스 분리 + radius 축소
   ============================================================ */
/* 문서 카드 — radius 축소 */
.article { border-radius: 6px; }
.article.article { border-radius: 6px; overflow: hidden; }

/* 댓글 카드 — 문서와 분리된 별도 박스 */
.comments-card {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 22px 32px 26px;
}
/* 분리됐으므로 안쪽 상단 경계선·여백은 제거 */
.comments-card .cmts {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 640px) {
  .comments-card { padding: 16px 18px 20px; border-radius: 5px; }
}

/* ============================================================
   문법 예시 박스 <문법>…</문법> — 위키 코드를 작동시키지 않고 표시
   ============================================================ */
.syntaxbox {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent, #c8342e);
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink, #1a1a1a) 3%, transparent);
  overflow: hidden;
}
.syntaxbox-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink, #1a1a1a) 3%, transparent);
  font-size: 0.85rem;
}
.syntaxbox-ic { color: var(--accent, #c8342e); font-family: var(--mono, monospace); font-weight: 700; }
.syntaxbox-title { font-weight: 600; }
.syntaxbox-note { margin-left: auto; color: var(--ink-soft, #777); font-size: 0.78rem; }
.syntaxbox-code {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: none;
  border: 0;
  border-radius: 0;
}
.syntaxbox-code code {
  font-family: var(--mono, "SFMono-Regular", Consolas, monospace);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre;
  background: none;
  padding: 0;
  border: 0;
  color: var(--ink);
}

/* ============================================================
   목차 번호 (본문 제목과 동일한 1. / 1.1.)
   ============================================================ */
.wiki-toc-list { list-style: none; }
.wiki-toc-num {
  color: var(--accent, #c8342e);
  font-weight: 700;
  margin-right: 0.3em;
  font-variant-numeric: tabular-nums;
}
.wiki-toc-list a { display: inline-flex; gap: 0.1em; align-items: baseline; }
.wiki-toc-text { word-break: keep-all; }

/* ============================================================
   큰인용 배경 사진 — {{큰인용|…|배경=파일|어둡기=55}}
   ============================================================ */
.bigquote.has-bg {
  position: relative;
  background: #171012;
}
.bigquote.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bq-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
/* 사진 위 어둡기 막(글자가 읽히도록) */
.bigquote.has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15,10,12,var(--bq-dim-a, 0.55)),
      rgba(15,10,12,calc(var(--bq-dim-a, 0.55) + 0.15))),
    radial-gradient(120% 100% at 20% 0%, color-mix(in srgb, var(--bq, #d9a441) 10%, transparent), transparent 62%);
  z-index: 0;
}
.bigquote.has-bg > * { position: relative; z-index: 1; }
/* 어둡기 퍼센트를 알파로 — 55% → 0.55 */
.bigquote.has-bg { --bq-dim-a: calc(var(--bq-dim, 55%) / 100%); }
/* 배경이 있으면 본문 글자에 그림자를 줘 가독성 확보 */
.bigquote.has-bg .bigquote-ko,
.bigquote.has-bg .bigquote-en,
.bigquote.has-bg .bigquote-src {
  text-shadow: 0 1px 6px rgba(0,0,0,0.75);
}

/* ============================================================
   주석 호버 박스 — <ref>내용</ref> 위첨자에 올리거나 누르면 내용이 뜬다
   ============================================================ */
.fn-ref a { cursor: pointer; }
.fn-ref.is-open a { background: color-mix(in srgb, var(--accent, #c8342e) 18%, transparent); border-radius: 3px; }

.fn-pop {
  position: absolute;
  z-index: 90;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px 13px;
  background: var(--card, #fff);
  color: var(--ink, #1a1a1a);
  border: 1px solid var(--line, #ddd);
  border-left: 3px solid var(--accent, #c8342e);
  border-radius: 4px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  font-size: 0.88rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}
.fn-pop.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fn-pop-num {
  display: inline-block;
  font-weight: 700;
  color: var(--accent, #c8342e);
  margin-right: 0.35em;
}
.fn-pop-body { display: inline; }
.fn-pop-body a { word-break: break-all; }
.fn-pop-close {
  display: none;
  margin-left: 8px;
  background: none;
  border: 0;
  color: var(--ink-soft, #777);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}
/* 터치 기기: 닫기 버튼 노출 */
@media (hover: none) {
  .fn-pop-close { display: inline-block; float: right; }
  .fn-pop { font-size: 0.92rem; padding: 12px 14px; }
}

/* ============================================================
   문법·편집·기능 박스 모서리 축소(일관된 각진 느낌)
   ============================================================ */
.syntaxbox { border-radius: 3px; }
.syntaxbox-code { border-radius: 0; }
.wiki-code, code.wiki-code { border-radius: 3px; }
.edit-form textarea,
.edit-form input[type="text"],
.edit-toolbar,
.edit-actions .btn,
.editbox,
.wiki-pre, pre.wiki-pre { border-radius: 3px; }
.tpl-box { border-radius: 3px; }
.wiki-fold, details.wiki-fold { border-radius: 3px; }
.wiki-table-wrap { border-radius: 3px; }
.notice, .wiki-notice { border-radius: 3px; }
.fn-pop { border-radius: 3px; }
.comments-card { border-radius: 4px; }
.article { border-radius: 4px; }

/* ============================================================
   모바일 최적화 — 새 기능 전반(제목/펼접/주석/실루엣/인용/문법)
   ============================================================ */
@media (max-width: 640px) {
  /* 제목: 번호·아이콘이 줄바꿈을 밀지 않도록 */
  .wiki-h { gap: 0.1em; }
  .wiki-h-text { word-break: keep-all; overflow-wrap: anywhere; }
  .article h2.wiki-h { padding-left: 0.4em; padding-bottom: 0.22em; }
  .article h3.wiki-h { padding-left: 0.36em; }
  .article h4.wiki-h { padding-left: 0.3em; }
  /* 토글 버튼 터치 영역 확대 */
  .wiki-h-toggle { padding: 6px 8px 6px 0; margin-left: -2px; opacity: 0.55; }
  .wiki-h-caret { border-left-width: 0.42em; border-top-width: 0.3em; border-bottom-width: 0.3em; }
  /* [편집]·§ 링크는 좁은 화면에서 숨겨 제목이 깨지지 않게 */
  .wiki-h-anchor { display: none; }
  .wiki-h-editsec { font-size: 0.68rem; margin-left: 6px; }

  /* 목차 번호 */
  .wiki-toc-num { margin-right: 0.25em; }
  .wiki-toc-list a { align-items: flex-start; }

  /* 셀 펼접: 터치 영역 확보 */
  .cellfold-head { padding: 3px 0; }
  .cellfold-caret { border-left-width: 0.5em; border-top-width: 0.36em; border-bottom-width: 0.36em; }

  /* 행 펼접: 헤더 행 터치 영역 */
  .wiki-table tr.rowfold-head > td,
  .wiki-table tr.rowfold-head > th { padding-top: 10px; padding-bottom: 10px; }
  .rowfold-more-toggle { padding: 6px 10px; font-size: 0.95rem; }
  .rowfold-caret { border-left-width: 0.5em; border-top-width: 0.36em; border-bottom-width: 0.36em; }

  /* 주석: 팝업을 화면 폭에 맞춤 */
  .fn-pop { max-width: calc(100vw - 20px); font-size: 0.92rem; }
  .fn-ref a { padding: 2px 3px; }   /* 탭하기 쉽게 */

  /* 큰인용: 여백·글자 크기 */
  .bigquote-body { padding: 16px 15px; }
  .bigquote-ko { font-size: 1.02rem; }
  .bigquote.has-bg::after { --bq-dim-a: calc(var(--bq-dim, 55%) / 100% + 0.08); }

  /* 문법 박스: 가로 스크롤 + 글자 축소 */
  .syntaxbox-code { padding: 10px 11px; }
  .syntaxbox-code code { font-size: 0.8rem; }
  .syntaxbox-head { padding: 6px 10px; font-size: 0.8rem; }
  .syntaxbox-note { font-size: 0.7rem; }

  /* 댓글 카드 */
  .comments-card { padding: 14px 15px 18px; }
}

/* 터치 기기 전반 — hover가 없는 환경 */
@media (hover: none) {
  /* 제목 토글은 항상 보이게(hover로만 나타나면 못 찾음) */
  .wiki-h-toggle { opacity: 0.5; }
  /* 실루엣: 탭하면 공개(JS가 is-revealed 부여). 첫 탭=공개, 두 번째 탭=이동 */
  .silh-cell.is-revealed .silh-color { opacity: 1; }
}

/* 작은 화면에서 실루엣 표가 뭉개지지 않도록 가로 스크롤 안내 */
@media (max-width: 520px) {
  .silh-wrap { -webkit-overflow-scrolling: touch; }
  .silh-table { min-width: 480px; }
  .silh-kw { font-size: 0.72rem; }
  a.silh-name { font-size: 0.8rem; }
  .silh-table .silh-head { height: 54px; padding: 8px 10px; }
}

/* ============================================================
   기능 박스 모서리 축소 — 문서 탭 · 공유/더보기 버튼 · 드롭다운
   ============================================================ */
html[data-preset="zerocell"] .page-tabs { border-radius: 3px; }
.act-btn { border-radius: 4px; }
.more-toggle { border-radius: 4px; }
.more-list { border-radius: 4px; }
.more-list a,
.more-list button { border-radius: 3px; }
/* 편집·로그인 등 상단 버튼 */
.btn-edit-top { border-radius: 4px; }
.btn, button.btn, a.btn { border-radius: 4px; }

/* 그림이 없을 때: 검은 실루엣 → 호버하면 글로우 색 실루엣이 떠오른다 */
.silh-color--svg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--silh-glow, #dc5050);
}
.silh-color--svg svg { width: 80%; height: 94%; }

/* ============================================================
   제목 디자인 정리 — 세로 막대 중복 제거 · 정렬 교정 · 가독성
   (옛 ::before 장식 바와 새 border-left가 겹쳐 두 줄로 보이던 문제)
   ============================================================ */
/* 1) 옛 장식 바를 끈다 — ㄴ자 테두리가 그 역할을 대신한다 */
.article .wiki-content h2.wiki-h::before,
.article h2.wiki-h::before { content: none !important; display: none !important; }

/* 2) 가로 정렬 — baseline 대신 center로 캐럿·번호·글자를 나란히 */
.article .wiki-h {
  display: flex;
  align-items: center;
  gap: 0.28em;
  line-height: 1.45;
}
/* 제목 본문이 남는 폭을 차지해 [편집]·§를 오른쪽 끝으로 민다 */
.article .wiki-h > .wiki-h-text {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 3) 세로 막대와 글자 사이 여백 확보(캐럿이 막대에 붙지 않게) */
.article h2.wiki-h { padding-left: 0.62em; padding-bottom: 0.3em; }
.article h3.wiki-h { padding-left: 0.55em; padding-bottom: 0.24em; }
.article h4.wiki-h { padding-left: 0.5em;  padding-bottom: 0.2em; }

/* 4) ㄴ자가 한 획으로 이어져 보이도록 색을 맞춘다 */
.article h2.wiki-h {
  border-left: 3px solid var(--accent, #c8342e);
  border-bottom: 2px solid color-mix(in srgb, var(--accent, #c8342e) 42%, transparent);
}
.article h3.wiki-h {
  border-left: 2px solid color-mix(in srgb, var(--accent, #c8342e) 62%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent, #c8342e) 26%, transparent);
}
.article h4.wiki-h {
  border-left: 2px solid color-mix(in srgb, var(--accent, #c8342e) 35%, transparent);
  border-bottom: 1px dotted color-mix(in srgb, var(--accent, #c8342e) 22%, transparent);
}

/* 5) 접기 토글 — 정사각 터치 영역, 캐럿은 가운데 */
.article .wiki-h-toggle {
  flex: none;
  order: -1;
  width: 1.05em;
  height: 1.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 0.05em 0 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.article .wiki-h:hover .wiki-h-toggle { opacity: 0.75; }
.article .wiki-h-caret {
  border-left-width: 0.34em;
  border-top-width: 0.24em;
  border-bottom-width: 0.24em;
}

/* 6) 번호 — 글자와 간격 정리 */
.article .wiki-h-num {
  margin-right: 0.28em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 7) [편집] · § — 오른쪽 끝, 세로 가운데, 줄바꿈 금지 */
.article .wiki-h-editsec,
.article .wiki-h-anchor {
  flex: none;
  align-self: center;
  white-space: nowrap;
  line-height: 1;
}
.article .wiki-h-anchor { margin-left: 6px; }
.article .wiki-h-editsec { margin-left: 8px; }

/* 스킨(프리셋)이 제목에 걸어 둔 baseline 정렬을 덮어써 모든 스킨에서 정렬을 맞춘다 */
.article .wiki-content h2.wiki-h,
.article .wiki-content h3.wiki-h,
.article .wiki-content h4.wiki-h,
.article .wiki-content h5.wiki-h,
.article .wiki-content h6.wiki-h {
  display: flex;
  align-items: center;
  gap: 0.28em;
}
/* zerocell의 점선 장식은 제목 오른쪽 요소와 겹치므로 끈다 */
html[data-preset="zerocell"] .article .wiki-content h2.wiki-h::after { content: none; }

/* ============================================================
   유저 활동 · 기여 시스템
   프로필 카드 · 기여 목록 · 주시문서 · 알림 · 담벼락 · 사용자 관리
   ============================================================ */

/* ---- 아바타 ---- */
.avatar {
  display: block;
  border-radius: 3px;
  flex: none;
  image-rendering: pixelated;
}

/* ---- 프로필 카드 ---- */
.profile-card {
  --pt: var(--accent, #c8342e);
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--pt);
  border-radius: 4px;
}
.pc-top { display: flex; gap: 14px; align-items: flex-start; }
.pc-avatar { flex: none; }
.pc-avatar .avatar { border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }
.pc-id { flex: 1 1 auto; min-width: 0; }
.pc-name {
  font-size: 1.08rem; font-weight: 700;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.pc-tier {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--pt);
  border: 1px solid color-mix(in srgb, var(--pt) 45%, transparent);
  background: color-mix(in srgb, var(--pt) 12%, transparent);
  padding: 1px 7px; border-radius: 3px;
}
.pc-role, .pc-blocked {
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 3px;
}
.pc-role { color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.pc-blocked { color: #e05a5a; border: 1px solid rgba(224,90,90,0.45); background: rgba(224,90,90,0.1); }

/* 레벨 · XP */
.pc-lv {
  display: flex; align-items: baseline; gap: 10px;
  margin: 7px 0 5px; font-size: 0.84rem;
}
.pc-lvnum {
  font-weight: 800; letter-spacing: 0.04em;
  color: var(--pt);
  font-family: var(--mono, monospace);
}
.pc-xp { color: var(--ink-soft); font-family: var(--mono, monospace); }
.pc-today {
  margin-left: auto;
  font-size: 0.74rem; font-weight: 700;
  color: #3fb37a;
  background: rgba(63,179,122,0.12);
  border: 1px solid rgba(63,179,122,0.3);
  padding: 1px 7px; border-radius: 3px;
}
.pc-bar {
  height: 7px;
  background: color-mix(in srgb, var(--ink, #000) 12%, transparent);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.pc-bar-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pt) 70%, transparent),
    var(--pt));
  box-shadow: 0 0 8px color-mix(in srgb, var(--pt) 55%, transparent);
  transition: width 0.6s ease;
}
.pc-next { margin-top: 4px; font-size: 0.74rem; color: var(--ink-soft); }

/* 통계 4칸 */
.pc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 14px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px; overflow: hidden;
}
.pc-stat {
  background: var(--card);
  padding: 9px 6px; text-align: center;
}
.pc-stat b {
  display: block; font-size: 1.05rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pc-stat span { display: block; font-size: 0.7rem; color: var(--ink-soft); margin-top: 2px; }

/* 활동 히트맵(잔디) */
.pc-heat { margin-top: 14px; }
.pc-heat-head {
  font-size: 0.76rem; color: var(--ink-soft); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.pc-streak {
  color: var(--pt); font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--pt) 35%, transparent);
  padding: 0 6px; border-radius: 3px; font-size: 0.7rem;
}
.pc-heat-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}
.pc-cell {
  aspect-ratio: 1;
  min-height: 8px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
  border: 1px solid transparent;
}
.pc-l1 { background: color-mix(in srgb, var(--pt) 25%, transparent); }
.pc-l2 { background: color-mix(in srgb, var(--pt) 45%, transparent); }
.pc-l3 { background: color-mix(in srgb, var(--pt) 68%, transparent); }
.pc-l4 { background: var(--pt); box-shadow: 0 0 5px color-mix(in srgb, var(--pt) 60%, transparent); }

/* 뱃지 */
.pc-badges { margin-top: 14px; }
.pc-badges-head { font-size: 0.76rem; color: var(--ink-soft); margin-bottom: 7px; }
.pc-badges-head b { color: var(--pt); }
.pc-badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 0.74rem;
  color: var(--ink-soft);
  opacity: 0.4;
  background: var(--card);
}
.pc-badge.is-got {
  opacity: 1;
  color: var(--ink);
  border-color: color-mix(in srgb, var(--pt) 40%, transparent);
  background: color-mix(in srgb, var(--pt) 8%, transparent);
}
.pc-badge-ic { font-size: 0.9rem; line-height: 1; }
.pc-badge.is-got .pc-badge-ic { color: var(--pt); }

/* 바로가기 */
.pc-links {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pc-links a {
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--card);
}
.pc-links a:hover { border-color: var(--pt); color: var(--pt); }

/* ---- 기여 목록 ---- */
.contrib-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}
.contrib-name { font-size: 1.02rem; font-weight: 700; text-decoration: none; }
.contrib-meta { font-size: 0.78rem; color: var(--ink-soft); margin-top: 2px; font-family: var(--mono, monospace); }

.contrib-pick { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.contrib-pick a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 3px;
  text-decoration: none; color: var(--ink); background: var(--card);
}
.contrib-pick a:hover { border-color: var(--accent); }
.contrib-pick em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--ink-soft); }

.contrib-list { list-style: none; padding: 0; margin: 0; }
.contrib-item {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.contrib-item:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.contrib-time { flex: none; width: 92px; font-size: 0.76rem; color: var(--ink-soft); font-family: var(--mono, monospace); }
.contrib-new {
  flex: none; font-size: 0.68rem; font-weight: 700;
  color: #3fb37a; border: 1px solid rgba(63,179,122,0.35);
  padding: 0 5px; border-radius: 2px;
}
.contrib-title { font-weight: 600; text-decoration: none; }
.contrib-title.is-gone { text-decoration: line-through; opacity: 0.55; }
.contrib-diff { flex: none; font-family: var(--mono, monospace); font-size: 0.78rem; font-weight: 700; }
.contrib-diff.up { color: #3fb37a; }
.contrib-diff.down { color: #e05a5a; }
.contrib-diff.zero { color: var(--ink-soft); }
.contrib-sum { color: var(--ink-soft); font-size: 0.8rem; font-style: italic; }
.contrib-hist { margin-left: auto; font-size: 0.75rem; color: var(--ink-soft); text-decoration: none; }
.contrib-hist:hover { color: var(--accent); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 0.85rem; }
.pager a { text-decoration: none; padding: 4px 10px; border: 1px solid var(--line); border-radius: 3px; }
.pager span { color: var(--ink-soft); font-family: var(--mono, monospace); }

/* ---- 주시문서 ---- */
.watch-list { list-style: none; padding: 0; margin: 0; }
.watch-item {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
}
.watch-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line);
  align-self: center;
}
.watch-item.is-changed .watch-dot {
  background: var(--accent);
  box-shadow: 0 0 7px var(--accent);
}
.watch-item.is-changed .watch-title { font-weight: 700; }
.watch-title { text-decoration: none; }
.watch-meta { font-size: 0.76rem; color: var(--ink-soft); font-family: var(--mono, monospace); }
.watch-sum { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.watch-gone { font-size: 0.74rem; color: #e05a5a; }
.watch-del {
  margin-left: auto; text-decoration: none;
  color: var(--ink-soft); font-size: 0.9rem;
  padding: 0 6px; border-radius: 3px;
}
.watch-del:hover { color: #e05a5a; background: rgba(224,90,90,0.1); }

/* ---- 알림 ---- */
.notif-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.notif-count { font-size: 0.85rem; color: var(--ink-soft); }
.notif-count b { color: var(--accent); font-size: 1rem; }
.btn-small {
  font-size: 0.78rem; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 3px;
  text-decoration: none; color: var(--ink-soft);
}
.btn-small:hover { border-color: var(--accent); color: var(--accent); }

.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-item {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.notif-item.is-unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item.is-unread .notif-title { font-weight: 700; }
.notif-kind {
  flex: none; font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 2px;
  border: 1px solid var(--line); color: var(--ink-soft);
}
.notif-watch { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.notif-comment { color: #4aa3e0; border-color: rgba(74,163,224,0.4); }
.notif-title { text-decoration: none; }
.notif-actor { font-size: 0.78rem; color: var(--ink-soft); }
.notif-body { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; }
.notif-time { margin-left: auto; font-size: 0.74rem; color: var(--ink-soft); font-family: var(--mono, monospace); }

/* ---- 담벼락 ---- */
.wall-form { display: flex; gap: 8px; margin-bottom: 16px; align-items: flex-start; }
.wall-form textarea {
  flex: 1 1 auto; resize: vertical;
  padding: 8px 10px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px;
  font: inherit; font-size: 0.9rem;
}
.wall-form textarea:focus { outline: none; border-color: var(--accent); }
.wall-form .btn { flex: none; }

.wall-list { list-style: none; padding: 0; margin: 0; }
.wall-item {
  display: flex; gap: 10px;
  padding: 10px; border-bottom: 1px solid var(--line);
}
.wall-txt { flex: 1 1 auto; min-width: 0; }
.wall-meta { display: flex; align-items: baseline; gap: 8px; font-size: 0.78rem; }
.wall-author { font-weight: 700; text-decoration: none; }
.wall-time { color: var(--ink-soft); font-family: var(--mono, monospace); font-size: 0.72rem; }
.wall-del { margin-left: auto; color: var(--ink-soft); text-decoration: none; font-size: 0.72rem; }
.wall-del:hover { color: #e05a5a; }
.wall-body { margin-top: 3px; font-size: 0.9rem; line-height: 1.5; word-break: break-word; }

/* ---- 사용자 관리 ---- */
.um-table { width: 100%; font-size: 0.86rem; }
.um-user { display: flex; align-items: center; gap: 7px; }
.um-user a { text-decoration: none; font-weight: 600; }
.um-me {
  font-size: 0.66rem; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 0 4px; border-radius: 2px;
}
.um-tag-block {
  font-size: 0.66rem; color: #e05a5a;
  border: 1px solid rgba(224,90,90,0.4);
  padding: 0 4px; border-radius: 2px;
}
.um-blocked { opacity: 0.6; }
.um-role {
  font-size: 0.72rem; font-weight: 700;
  padding: 1px 7px; border-radius: 2px;
  border: 1px solid var(--line);
}
.um-role-admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.um-role-member { color: #4aa3e0; border-color: rgba(74,163,224,0.35); }
.um-role-guest { color: var(--ink-soft); }
.um-num { font-family: var(--mono, monospace); font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.um-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.um-btn {
  font-size: 0.72rem; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 2px;
  text-decoration: none; color: var(--ink-soft);
}
.um-btn:hover { border-color: var(--accent); color: var(--accent); }
.um-btn-danger:hover { border-color: #e05a5a; color: #e05a5a; }
.um-btn-ok:hover { border-color: #3fb37a; color: #3fb37a; }
.um-none { color: var(--ink-soft); }

/* ---- 모바일 ---- */
@media (max-width: 640px) {
  .pc-stats { grid-template-columns: repeat(2, 1fr); }
  .pc-top { gap: 10px; }
  .pc-heat-grid { gap: 1.5px; }
  .contrib-time { width: 100%; }
  .contrib-hist { margin-left: 0; }
  .um-table { font-size: 0.78rem; }
  .um-acts { flex-direction: column; }
  .wall-form { flex-direction: column; }
  .wall-form .btn { width: 100%; }
}

/* ---- 관리 대시보드 요약 ---- */
.adm-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; margin: 12px 0 16px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
.adm-kpi { background: var(--card); padding: 12px 8px; text-align: center; }
.adm-kpi b {
  display: block; font-size: 1.3rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.adm-kpi span { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 3px; }
.adm-kpi--hot b { color: var(--accent); }
.adm-warn {
  font-size: 0.85rem; padding: 8px 12px;
  border: 1px solid rgba(224,90,90,0.35);
  border-left: 3px solid #e05a5a;
  background: rgba(224,90,90,0.07);
  border-radius: 3px;
}
@media (max-width: 720px) { .adm-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .adm-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- 상단 알림 종 · 프로필 칩 ---- */
.user-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-soft); text-decoration: none;
  background: var(--card);
  flex: none;
}
.user-bell:hover { color: var(--accent); border-color: var(--accent); }
.user-bell.has-new { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.user-bell-n {
  position: absolute; top: -5px; right: -5px;
  min-width: 15px; height: 15px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 800; line-height: 1;
  color: #fff; background: var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}
a.user-chip { text-decoration: none; }
a.user-chip:hover { border-color: var(--accent); }

/* ============================================================
   위젯 공통
   ============================================================ */
.widget-err {
  padding: 12px 14px;
  border: 1px solid rgba(224,90,90,0.4);
  border-left: 3px solid #e05a5a;
  background: rgba(224,90,90,0.07);
  border-radius: 3px;
  font-size: 0.88rem;
  color: var(--ink);
}


/* ============================================================
   펼접 — {{펼접}} … {{펼접끝}}
   서버가 접힌 상태로 내보내므로 CSS 기본값도 '접힘'이다.
   (JS를 기다리지 않아 내용이 번쩍이지 않는다)
   ============================================================ */
.fold-mark { display: none; }

/* 버튼 바 — 껍데기 없이 텍스트만. 멀티면 나란히. */
.fold-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0.35rem 0;
  width: 100%;
}
td > .fold-bar, th > .fold-bar { margin: 0; }

.fold-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2px 4px;
  font: 600 0.88rem var(--sans);
  text-align: center;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease, flex-basis 0.25s ease;
}
.fold-btn:hover { color: var(--accent); }
.fold-btn.is-open {
  flex-basis: 100%;              /* 펼치면 그 줄 전체 (나무위키식) */
  color: var(--accent);
}
.fold-bar .fold-btn:only-child { flex-basis: 100%; }

/* 블록 접기 — 기본이 접힘(0fr). 펼치면 1fr. */
.fold-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.fold-wrap.is-open { grid-template-rows: 1fr; }
.fold-inner { overflow: hidden; min-height: 0; }
.fold-wrap.is-open > .fold-inner > :first-child { margin-top: 0.35rem; }
.fold-wrap.is-open > .fold-inner > :last-child { margin-bottom: 0.35rem; }

/* 표 행 접기 — 기본이 접힘. 서버가 foldrow-hidden을 미리 붙인다. */
tr.foldrow > td,
tr.foldrow > th {
  transition: padding 0.22s ease;
}
tr.foldrow-hidden {
  visibility: collapse;          /* 행을 접는다 — 레이아웃에서 빠짐 */
}
tr.foldrow-hidden > td,
tr.foldrow-hidden > th {
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
  line-height: 0;
  font-size: 0;
}

/* ============================================================
   로딩 인트로 — 격납고 문이 좌우로 열린다
   서버가 '닫힌 채로' 내보내고, 여기 CSS 애니메이션이 연다.
   JS를 기다리지 않으므로 내용이 미리 비치지 않는다.
   ============================================================ */
.loadintro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  /* 배경 없음 — 문짝이 갈라지는 만큼 그 자리에서 바로 본문이 드러난다.
     여기에 색을 깔면 문이 열려도 그 판이 남아 본문 대신 그 색만 보인다. */
  background: none;
  pointer-events: none;          /* 문짝만 클릭을 받는다(건너뛰기) */
  animation: li-vanish 0s linear
             calc(var(--li-hold, 0.5s) + var(--li-open, 2.4s) + 0.7s) forwards;
}
/* 다 열리면 완전히 치운다(클릭 막지 않게) */
@keyframes li-vanish { to { visibility: hidden; pointer-events: none; } }

/* 이미 본 경우(한번만) — 첫 페인트부터 없음 */

.loadintro-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;                       /* 살짝 겹쳐 가운데 실틈 방지 */
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #17151a;          /* 그림이 화면비를 못 채울 때의 여백 */
  pointer-events: auto;               /* 문짝을 눌러 건너뛴다 */
  will-change: transform;
  animation-duration: var(--li-open, 2.4s);
  animation-delay: var(--li-hold, 0.5s);
  animation-timing-function: cubic-bezier(0.65, 0.02, 0.32, 1);  /* 실측한 ease-in-out */
  animation-fill-mode: forwards;
}
.loadintro-l {
  left: 0;
  background-image: var(--li-left);
  background-position: right center;   /* 오른쪽 끝(스트립)이 가운데에 맞물린다 */
  animation-name: li-open-l;
}
.loadintro-r {
  right: 0;
  background-image: var(--li-right);
  background-position: left center;
  animation-name: li-open-r;
}
@keyframes li-open-l { to { transform: translateX(-100%); } }
@keyframes li-open-r { to { transform: translateX(100%); } }

/* 발광 스트립 — 이미지에 이미 있으면 숨긴다 */
.loadintro-strip { display: none; }
.loadintro-mark {
  position: absolute;
  top: 50%;
  left: 4.5%;
  transform: translateY(-50%);
  font: 700 clamp(18px, 2vw, 30px)/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.16em;
  color: #6d6a6b;
  opacity: 0.9;
}

/* ── 그림을 안 줬을 때: CSS로 문을 그린다 ── */
.loadintro--drawn .loadintro-half {
  background-color: #2e2b2c;
  background-image:
    /* 가로 패널 밴드 */
    linear-gradient(180deg, transparent 0 17%, #211f20 17% 22%, transparent 22% 34%,
                    #3a3637 34% 36%, transparent 36% 56%,
                    #46413f 56% 68%, transparent 68% 74%,
                    #232122 74% 78%, transparent 78%),
    /* 금속 결 */
    linear-gradient(90deg, #262324, #34302f 55%, #2a2728);
}
.loadintro--drawn .loadintro-strip {
  display: block;
  position: absolute;
  top: 26%;
  bottom: 26%;
  width: 9px;
  border-radius: 5px;
  background: #fff;
  box-shadow:
    0 0 8px 2px var(--li-glow, #ff9aa8),
    0 0 26px 8px color-mix(in srgb, var(--li-glow, #ff9aa8) 65%, transparent),
    0 0 60px 20px color-mix(in srgb, var(--li-glow, #ff9aa8) 32%, transparent);
}
.loadintro--drawn .loadintro-l .loadintro-strip { right: 14px; }
.loadintro--drawn .loadintro-r .loadintro-strip { left: 14px; }
/* 문짝 안쪽 모서리의 각진 실루엣 */
/* (수정) 여기 있던 clip-path 는 문 열림 transform(translateX)을 덮어 문이 안 열리게 했다.
   drawn 모드에서도 문은 좌우로 열려야 하므로 제거한다. */

/* 인트로가 도는 동안 스크롤 잠금 */
body.li-lock { overflow: hidden; }

/* 움직임을 줄이는 설정이면 즉시 걷는다 */
@media (prefers-reduced-motion: reduce) {
  .loadintro { display: none; }
}

/* 로그인 화면의 '비밀번호를 잊으셨나요' 링크 */
.login-forgot { margin: 12px 0 0; text-align: center; font-size: .9rem; }
.login-forgot a { color: var(--ink-soft, #8b8f96); text-decoration: underline; }
.login-forgot a:hover { color: var(--accent, #c8342e); }

/* 관리 내비 링크의 대기 요청 배지 */
.nav-badge {
  display: inline-block; min-width: 16px; height: 16px; padding: 0 4px;
  margin-left: 5px; border-radius: 8px;
  background: var(--accent, #c8342e); color: #fff;
  font-size: 11px; line-height: 16px; text-align: center; font-weight: 700;
  vertical-align: middle;
}

/* ── 공지 피드 위젯 ({{공지}}) ───────────────────────────── */
.nfeed { border: 1px solid var(--line, #2a2e35); border-radius: 10px; overflow: hidden; background: var(--panel, #1b1e24); }
.nfeed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line, #2a2e35); background: rgba(255,255,255,.02); }
.nfeed-title { font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.nfeed-all { font-size: .82rem; color: var(--ink-soft, #8b8f96); text-decoration: none; white-space: nowrap; }
.nfeed-all:hover { color: var(--accent, #c8342e); }
.nfeed-list { list-style: none; margin: 0; padding: 0; }
.nfeed-item { display: flex; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line-soft, #23262c); border-left: 3px solid transparent; }
.nfeed-item:last-child { border-bottom: 0; }
.nfeed-item--teal  { border-left-color: #2bb3a3; }
.nfeed-item--blue  { border-left-color: #4a86d8; }
.nfeed-item--white { border-left-color: #b8bcc4; }
.nfeed-thumb { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 7px; background-size: cover; background-position: center; background-color: var(--line, #2a2e35); }
.nfeed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.nfeed-item-top { display: flex; align-items: baseline; gap: 6px; }
.nfeed-pin { font-size: .82rem; flex: 0 0 auto; }
.nfeed-item-title { font-weight: 600; font-size: .95rem; color: var(--ink, #e8e8ea); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
a.nfeed-item-title:hover { color: var(--accent, #c8342e); text-decoration: underline; }
.nfeed-item-sum { font-size: .84rem; color: var(--ink-soft, #8b8f96); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfeed-item-date { font-size: .78rem; color: var(--ink-faint, #6a6e76); font-variant-numeric: tabular-nums; }
.nfeed--empty, .nfeed-empty { padding: 16px; color: var(--ink-soft, #8b8f96); font-size: .9rem; text-align: center; }
.nfeed-hint { color: var(--ink-faint, #6a6e76); font-size: .82rem; }

/* ── 공용 패널 껍데기 (공지·최근바뀜이 같은 모양을 공유) ───────── */
.wpanel { border: 1px solid var(--line, #2a2e35); border-radius: 10px; overflow: hidden; background: var(--panel, #1b1e24); }
.wpanel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 15px; border-bottom: 1px solid var(--line, #2a2e35); background: rgba(255,255,255,.02); }
.wpanel-title { font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.wpanel-all { font-size: .82rem; color: var(--ink-soft, #8b8f96); text-decoration: none; white-space: nowrap; }
.wpanel-all:hover { color: var(--accent, #c8342e); }

/* 최근바뀜을 패널 안에 넣을 때: 바깥 여백 제거하고 항목만 안쪽 패딩 */
.rc-panel .rc-list { margin: 0; }
.rc-panel .rc-item { padding-left: 15px; padding-right: 84px; border-bottom: 1px solid var(--line-soft, #23262c); border-bottom-style: solid; }
.rc-panel .rc-item:last-child { border-bottom: 0; }
.rc-panel .rc-empty { padding: 16px; text-align: center; }
/* ============================================================
   박스 통일 레이어 v2 — 사이드 위젯 카드 일관화
   기준 디자인: .hotsearch / .nboard (line-strong 테두리 · 11px 라운드
   · --card 배경 · --tint 헤더). 아래 규칙이 기존 값을 덮어쓴다.
   대상: {{공지}}(.nfeed) · {{최근바뀜}}(.wpanel.rc-panel, 바닥 .rc-list)
   ============================================================ */

/* ── 1. 카드 골격 통일: nfeed·wpanel을 hotsearch/nboard와 동일하게 ── */
.nfeed,
.wpanel {
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--card);
  overflow: hidden;
  margin: 0 0 1.2em;
}

/* ── 2. 헤더 통일 ── */
.nfeed-head,
.wpanel-head {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start;
  padding: 12px 15px;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.nfeed-title,
.wpanel-title { font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.nfeed-all,
.wpanel-all {
  margin-left: auto;
  font-size: .8rem; font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: color .13s;
}
.nfeed-all:hover,
.wpanel-all:hover { color: var(--accent); }

/* ── 3. 공지 항목: 토큰 색으로 교정(라이트/다크 모두 대응) ── */
.nfeed-list { padding: 6px 0; }
.nfeed-item {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: background .13s;
}
.nfeed-item:last-child { border-bottom: 0; }
.nfeed-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.nfeed-thumb { background-color: var(--tint); }
.nfeed-item-title { color: var(--ink); font-size: .89rem; }
a.nfeed-item-title:hover { color: var(--link); text-decoration: underline; }
.nfeed-item-sum { color: var(--ink-soft); }
.nfeed-item-date { color: var(--ink-soft); font: .74rem var(--mono, monospace); }
.nfeed--empty, .nfeed-empty { padding: 22px 15px; color: var(--ink-soft); font-size: .86rem; text-align: center; }
.nfeed-hint { color: var(--ink-soft); opacity: .8; font-size: .8rem; }

/* ── 4. 최근바뀜 패널(.wpanel.rc-panel) 내부 교정 ── */
.rc-panel .rc-list { margin: 0; padding: 4px 0; }
.rc-panel .rc-item {
  padding: 9px 76px 9px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: background .13s;
}
.rc-panel .rc-item:last-child { border-bottom: 0; }
.rc-panel .rc-item::before { display: none; }
.rc-panel .rc-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rc-panel .rc-hist { right: 15px; top: 50%; transform: translateY(-50%); }
.rc-panel .rc-empty { padding: 22px 15px; text-align: center; font-size: .86rem; }

/* ── 5. 바닥 .rc-list(대문의 {{최근바뀜}} 루아 위젯)를 카드로 승격 ──
   ::before가 헤더 바, ::after가 액센트 아이콘(⟳) 역할을 한다. */
.rc-list {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--card);
  overflow: hidden;
  margin: 0.3em 0 1.2em;
  padding: 4px 0;
}
.rc-list::before {
  content: "최근 바뀜";
  display: flex; align-items: center;
  margin: -4px 0 4px;
  padding: 12px 15px 12px 36px;
  font-weight: 700; font-size: .92rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--tint);
}
.rc-list::after {
  content: "⟳";
  position: absolute; left: 15px; top: 11px;
  font-weight: 700; font-size: .95rem; line-height: 1.5;
  color: var(--accent);
  pointer-events: none;
}
.rc-list > .rc-item {
  padding: 9px 76px 9px 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  transition: background .13s;
}
.rc-list > .rc-item:last-child { border-bottom: 0; }
.rc-list > .rc-item::before { display: none; }
.rc-list > .rc-item:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rc-list .rc-hist { right: 15px; top: 50%; transform: translateY(-50%); }

/* ── 6. 예외 컨텍스트: 카드 승격 해제 ──
   (a) .wpanel 안(이미 패널이 카드) (b) 특수:최근바뀜의 날짜별 목록 */
.wpanel .rc-list,
.rc-date + .rc-list {
  position: static;
  border: 0; border-radius: 0;
  background: transparent;
  overflow: visible;
  padding: 0;
}
.wpanel .rc-list { margin: 0; padding: 4px 0; }
.rc-date + .rc-list { margin: 0.3em 0 1.2em; }
.wpanel .rc-list::before,
.wpanel .rc-list::after,
.rc-date + .rc-list::before,
.rc-date + .rc-list::after { content: none; display: none; }
.rc-date + .rc-list .rc-item {
  padding: 9px 84px 9px 17px;
  border-bottom: 1px dashed var(--line);
  background: none;
}
.rc-date + .rc-list .rc-item:last-child { border-bottom: 0; }
.rc-date + .rc-list .rc-item::before { display: block; }
.rc-date + .rc-list .rc-hist { right: 2px; top: 11px; transform: none; }

/* ── 7. 공통 미세 정돈 ── */
.rc-title { font-size: .89rem; }
.rc-meta { font-size: .78rem; }
.rc-summary { font-size: .82rem; }

/* ── 8. 프리셋 대응(제로셀: 금색 아이콘 계열 유지) ── */
html[data-preset="zerocell"] .rc-list::after { color: var(--gold); }

/* ============================================================
   닉네임 시스템 — 프로필 카드 @아이디 표기 · 닉네임 폼 · 관리자 열
   ============================================================ */
.pc-uid {
  font-size: .72em; font-weight: 600;
  color: var(--ink-soft);
  vertical-align: 1px;
}
.pc-nick {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.pc-nick-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .86rem;
}
.pc-nick-form label { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); font-weight: 600; }
.pc-nick-form input[type="text"] {
  width: 180px; max-width: 46vw;
  padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font-size: .86rem;
}
.pc-nick-form input[type="text"]:focus { outline: none; border-color: var(--accent); }
.pc-nick-hint { font-size: .76rem; color: var(--ink-soft); opacity: .8; }
.pc-nick-msg { margin: 0 0 8px; font-size: .82rem; font-weight: 600; }
.pc-nick-msg.ok  { color: var(--green); }
.pc-nick-msg.err { color: var(--red); }

/* 관리자 계정 테이블의 닉네임 인라인 폼 */
.acct-table .nickform { display: flex; align-items: center; gap: 6px; }
.acct-table .nickform input[type="text"] {
  width: 120px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--card); color: var(--ink);
  font-size: .82rem;
}
.acct-table .nickform input[type="text"]:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   모바일 내비 v1 — '메뉴 ▾' 토글 + 검색창 상시 노출
   데스크톱은 display:contents 로 기존과 픽셀 단위 동일.
   ============================================================ */

/* ── 기본(데스크톱): 토글 구조를 평평하게 펴서 지금 모습 그대로 ── */
.topnav-more,
.topnav-more-panel { display: contents; }
.topnav-more-btn { display: none; }

/* ── 모바일 ── */
@media (max-width: 768px) {

  /* 1) 검색창: 헤더 아래 전폭으로 항상 보이게 */
  .masthead-inner { flex-wrap: wrap; row-gap: 8px; }
  .masthead-search {
    order: 10;
    flex: 1 1 100%;
    max-width: none;
    margin: 2px 0 0;
  }

  /* 2) 상단 내비: 대문·최근 바뀜만 남기고 나머지는 '메뉴' 드롭다운으로 */
  .topnav-inner { overflow: visible; }           /* 가로 스크롤 해제(패널이 잘리지 않게) */
  .topnav-more {
    display: block;
    position: relative;
    margin-left: auto;                            /* 버튼을 우측 끝으로 */
  }
  .topnav-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .13s, color .13s;
  }
  .topnav-more.is-open .topnav-more-btn,
  .topnav-more-btn:hover { border-color: var(--accent); color: var(--accent); }
  .topnav-more-btn svg { transition: transform .15s; }
  .topnav-more.is-open .topnav-more-btn svg { transform: rotate(180deg); }

  /* 드롭다운 패널 — 사이드 박스와 같은 카드 언어 */
  .topnav-more-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 90;
    min-width: 190px;
    padding: 6px 0;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 11px;
    box-shadow: var(--shadow);
  }
  .topnav-more.is-open .topnav-more-panel { display: block; }

  /* 패널 안 항목: 세로 리스트 */
  .topnav-more-panel .nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 15px;
    border-radius: 0;
    font-size: .9rem;
  }
  .topnav-more-panel .nav-link:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .topnav-more-panel .topnav-sep {
    display: block;
    width: auto; height: 1px;
    margin: 5px 12px;
    background: color-mix(in srgb, var(--line) 70%, transparent);
  }
}

/* ============================================================
   공지 아이콘 + 관리 폼 보강 + 푸터 저작권 + 틀 모바일 가독성 v1
   ============================================================ */

/* ── 공지 박스 아이콘 (⚑) — 실시간 검색어(↗)·최근 바뀜과 같은 문법 ── */
.nfeed-ic {
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  flex: 0 0 auto;
  margin-right: 2px;
}
html[data-preset="zerocell"] .nfeed-ic { color: var(--gold); }

/* ── 관리 패널 새 폼 요소 ── */
.adm-input {
  width: 100%; max-width: 560px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--card); color: var(--ink);
  font: inherit; font-size: .9rem;
}
.adm-input:focus { outline: none; border-color: var(--accent); }
.adm-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; }
.adm-check { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink); cursor: pointer; }
.adm-form-inline { margin-top: 8px; }

/* ── 푸터 저작권 ── */
.site-foot-copy {
  margin-top: 6px;
  font-size: .76rem;
  color: var(--ink-soft);
  opacity: .85;
}

/* ── 틀 모바일 가독성 ── */
@media (max-width: 768px) {
  /* 인포박스: 본문 옆 붙박이 → 전폭 블록으로 */
  .infobox { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 0 16px !important; }

  /* 표(위키표·인포박스 표): 화면보다 넓으면 가로 스크롤로 살리기 */
  .article .wikitable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .infobox-table { width: 100%; table-layout: fixed; }
  .infobox-th { width: 34%; word-break: keep-all; }
  .infobox-td { word-break: break-word; overflow-wrap: anywhere; }

  /* 나란히({{나란히}}) 컬럼: 세로 스택 */
  .wiki-cols { display: block !important; }
  .wiki-cols > .wiki-col { width: 100% !important; margin: 0 0 14px !important; }

  /* 능력치 패널: 4열 → 2열 */
  .statpanel-grid { grid-template-columns: repeat(2, 1fr); }

  /* 사원증·캐릭터 카드: 폭 맞춤 */
  .idcard, .charcard { max-width: 100%; }
  .charcard-row { flex-wrap: wrap; }
  .cp-attr-grid, .emblem-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* 이미지·슬라이드·지도: 넘침 방지 */
  .article img { max-width: 100%; height: auto; }
  .worldslide, .wmap { max-width: 100%; overflow: hidden; }

  /* 코드 블록·긴 링크 줄바꿈 */
  .article pre, .article .wiki-pre { overflow-x: auto; }
  .article a { overflow-wrap: anywhere; }
}

/* ── 관리: 공지 피드 진단 목록 / 공지 빈상태 진단 줄 ── */
.adm-kv { list-style: none; margin: 6px 0 10px; padding: 0; font-size: .88rem; color: var(--ink); }
.adm-kv li { padding: 3px 0; }
.nfeed-diag {
  margin-top: 8px; font-size: .78rem; color: var(--ink-soft);
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 8px;
}
.nfeed-diag a { color: var(--accent); }

/* ── 사이트 공지 배너: 본문 컬럼 안으로 이동(문서 박스와 자동 정렬) ── */
.content > .site-notice {
  max-width: none;
  margin: 0 0 16px;
}
/* ── 브랜드 로고 이미지(방법 A: assets/logo.png 자동 적용) ── */
.brand-logo-img { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; display: block; }

.edit-main { min-width: 0; }

/* ── 편집기 인라인 경고(공백 시작 줄 등) ── */
.edit-inline-warn {
  margin: 0 0 10px; padding: 9px 13px;
  font-size: .85rem; line-height: 1.5;
  color: var(--ink);
  background: color-mix(in srgb, var(--amber, #d9a03f) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--amber, #d9a03f) 45%, var(--line));
  border-radius: 9px;
}
.edit-warn-fix {
  margin-left: 6px; padding: 3px 10px;
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
  background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 7px;
}
.edit-warn-fix:hover { border-color: var(--accent); color: var(--accent); }
/* 이동 폼의 체크박스 줄 */
.field-check { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.field-check input[type="checkbox"] { margin-top: 3px; flex: none; }
/* 설명 텍스트가 flex 안에서 줄바꿈되도록(안 그러면 화면 밖으로 삐져나감) */
.field-check > span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: keep-all; }

/* ============================================================
   편집 툴바 리디자인 — 그룹형 세련된 버튼바
   (기능 넣기 select도 자연스럽게 어울리도록)
   ============================================================ */
.edit-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 6px 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--card)), var(--card));
  border: 1px solid var(--line-strong);
  border-radius: 11px 11px 0 0;
  border-bottom: none;
}
.edit-toolbar button.tb {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink-soft);
  font: 600 0.82rem var(--sans); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.edit-toolbar button.tb:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); border-color: transparent;
}
.edit-toolbar button.tb:active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}
/* 서식 3버튼(굵게·기울임·링크)과 그 뒤를 구분선으로 그룹화 */
.edit-toolbar button.tb:nth-child(4)::before,
.edit-toolbar button.tb:nth-child(7)::before,
.edit-toolbar button.tb:nth-child(10)::before {
  content: ""; width: 1px; height: 18px;
  background: var(--line-strong);
  margin: 0 6px 0 2px; align-self: center;
}
/* 기능 넣기 select — 툴바와 한 몸처럼 */
.edit-toolbar select.tb-opt {
  height: 30px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--card); color: var(--ink);
  font: 600 0.82rem var(--sans); cursor: pointer;
  margin-left: 2px;
}
.edit-toolbar select.tb-opt:hover { border-color: var(--accent); }
.edit-toolbar select.tb-opt:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
/* 코드/미리보기 토글은 오른쪽으로 밀고 살짝 강조 */
.tb-spacer { flex: 1 1 auto; }
.edit-toolbar button.tb-view {
  border-color: var(--line-strong);
  background: var(--card);
}
.edit-toolbar button.tb-view[aria-pressed="true"] {
  color: var(--link);
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
/* 툴바에 이어지는 편집기 상단 모서리 각지게(툴바와 연결감) */
.editor-split { border-radius: 0 0 11px 11px; }
.codewrap { border-top-left-radius: 0; border-top-right-radius: 0; }
@media (max-width: 640px) {
  .edit-toolbar button.tb { padding: 0 8px; font-size: .78rem; }
  .edit-toolbar button.tb:nth-child(4)::before,
  .edit-toolbar button.tb:nth-child(7)::before,
  .edit-toolbar button.tb:nth-child(10)::before { margin: 0 3px; }
}

/* ============================================================
   모바일 최적화 v2 (2026-07)
   노치 안전영역 · 앵커 오프셋 · iOS 입력 확대 방지 · 터치 타깃 ·
   가로 넘침 방지. 기존 반응형 규칙 뒤에서 '보강'만 한다.
   데스크톱 영향 없음: env() 안전영역은 노치 없는 화면에서 0이고
   max()로 기존 여백을 그대로 유지한다.
   ============================================================ */

/* 1) 노치·홈바 안전영역 (<meta viewport-fit=cover> 와 짝) --------- */
.masthead-inner {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}
.site-foot {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (max-width: 960px) {
  .layout {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  /* 슬라이드 사이드바가 왼쪽 노치에 가리지 않게 */
  .sidebar { padding-left: max(18px, env(safe-area-inset-left)); }
}
/* 하단 홈 인디케이터 만큼 바닥 여백(노치 없으면 0) */
@supports (padding: max(0px)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* 2) 앵커 오프셋 — 스티키 헤더에 제목/각주가 가리지 않게 ---------- */
html { scroll-padding-top: 68px; }
.wiki-content :where(h1, h2, h3, h4, h5, h6),
.wiki-content [id],
.fn-item, [id^="fn-"], [id^="fnref-"] { scroll-margin-top: 150px; }

/* 3) iOS 입력 확대 방지 — 모바일에서 입력 글꼴 ≥16px ------------- */
@media (max-width: 640px) {
  .field input, .login-form input, .search-input, .search-box input,
  .edit-form input[type="text"], .edit-form textarea, .editbox, .edit-textarea,
  .cmt-form textarea, .wall-form textarea, .pc-nick-form input[type="text"],
  textarea, input[type="text"], input[type="search"],
  input[type="password"], input[type="email"] {
    font-size: 16px;
  }
}

/* 4) 터치 타깃 — 손가락으로 누르기 쉬운 최소 크기 --------------- */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08); }
@media (hover: none) and (pointer: coarse) {
  .nav-link { min-height: 44px; }
  .page-tabs a, [role="menuitem"], .menu-panel a, .topnav-more a {
    min-height: 44px; display: flex; align-items: center;
  }
  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
  /* 본문 인터랙션(펼접·접기·문단 토글)도 넉넉히 */
  .fold-btn, .cellfold-head, .wiki-h-toggle,
  .rowfold-more-toggle, .secauth, .cellfold-caret { min-height: 40px; }
  .fold-btn { padding-top: 6px; padding-bottom: 6px; }
}

/* 5) 가로 넘침 방지 (스티키 헤더가 깨지므로 body 에 overflow-x:hidden
   은 쓰지 않는다. 대신 넘치기 쉬운 요소만 감싼다) ---------------- */
.article, .wiki-content { max-width: 100%; }
.wiki-content pre, .wiki-content .wiki-pre,
.syntaxbox-code, .src-plain, .mono-block {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .wiki-content, .wiki-content p, .wiki-content li,
  .wiki-content dd, .wiki-content td, .wiki-content a {
    overflow-wrap: anywhere; word-break: keep-all;
  }
  /* 좁은 화면에서 표 감싸개를 살짝 넓혀 스크롤 여백 확보 */
  .wiki-content .wiki-table-wrap { margin-left: -2px; margin-right: -2px; }
  /* 긴 제목이 넘치지 않게 */
  .article-title { overflow-wrap: anywhere; word-break: keep-all; }
}

/* ============================================================
 문서 아래 박스 통일 — 문서 · 분류 · 각주 · 댓글
 네 박스의 배경·테두리·모서리·그림자·좌우 여백·간격을 여기서 한꺼번에 정한다.
 값을 바꾸려면 이 블록만 고치면 된다.
 ============================================================ */
:root { --box-gap: 16px; --box-pad-x: 32px; --box-radius: 4px; }

.article,
.article-cats,
.fn-section--card,
.comments-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--box-radius);
  box-shadow: var(--shadow);
}
/* 앞쪽의 .article.article 규칙(6px)보다 세기·순서를 맞춰 네 박스를 같은 모서리로 */
.article.article { border-radius: var(--box-radius); }

/* 화면 요소(검색창·버튼·탭·목차·우측 버튼바)도 같은 모서리로 맞춘다.
   알약 모양이 의도인 것(.cat-tag, 배지 등)은 건드리지 않는다. */
.search-box,
.btn,
.act-btn,
.mini-btn,
.nav-link,
.topnav .nav-link,
.page-tabs,
.wiki-toc,
.wiki-btnbar-btn,
.wiki-btnbar-panel { border-radius: var(--box-radius); }
.page-tab { border-radius: var(--box-radius) var(--box-radius) 0 0; }


/* 박스 사이 간격 — 전부 동일하게 */
.article-cats,
.fn-section--card,
.comments-card { margin: var(--box-gap) 0 0; }

/* 좌우 여백을 본문과 맞춘다 */
.article-cats   { padding: 13px var(--box-pad-x); }
.fn-section--card { padding: 20px var(--box-pad-x) 22px; }
.comments-card  { padding: 22px var(--box-pad-x) 26px; }

@media (max-width: 640px) {
  :root { --box-gap: 12px; --box-pad-x: 18px; }
  .fn-section--card { padding: 16px var(--box-pad-x) 18px; }
  .comments-card { padding: 18px var(--box-pad-x) 22px; }
}

/* ============================================================
   레이아웃 개편 — 좌측 서랍 사이드바 · 상단바 묶음 메뉴
   ============================================================ */

/* 블록 위젯이 위아래로 붙던 문제(캐릭터카드·세계관슬라이드 빈 상자 포함) */
.charcard-row,
.charcard-empty { margin: 1.2em 0; }

/* 햄버거 — 사이드바를 다시 쓰므로 모든 화면 폭에서 보인다 */
.menu-toggle { display: inline-flex !important; }

/* 사이드바: 폭과 무관하게 왼쪽에서 밀려나오는 서랍(본문 폭을 줄이지 않는다) */
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: 288px; max-width: 86vw; z-index: 120;
  padding: 22px 14px 46px;
  background: var(--card);
  border-right: 1px solid var(--line-strong);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .22s ease;
  align-self: auto;
}
.sidebar.open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .4); }
.sidebar .side-group { margin-bottom: 18px; }
.sidebar .side-group--edit { border-top: 1px dashed var(--line); padding-top: 12px; margin-bottom: 0; }
.sidebar-scrim {
  display: block; position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.sidebar-scrim.show { opacity: 1; pointer-events: auto; }
body.no-scroll { overflow: hidden; }

/* 상단바 묶음 메뉴 — 항목을 분류해 접어 둔다 */
.topnav-inner { flex-wrap: wrap; overflow: visible; }
.navgrp { position: relative; display: inline-flex; }
.navgrp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); font: inherit; font-size: .88rem;
  border-radius: var(--box-radius);
}
.navgrp-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.navgrp.is-active > .navgrp-btn { color: var(--link); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.navgrp-ar { transition: transform .18s ease; opacity: .7; }
.navgrp.is-open .navgrp-ar { transform: rotate(180deg); }
.navgrp-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 178px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--box-radius); box-shadow: 0 14px 36px -12px rgba(0, 0, 0, .5);
}
.navgrp.is-open .navgrp-panel { display: block; }
.topnav .navgrp-panel .nav-link { display: flex; width: 100%; white-space: nowrap; }

@media (max-width: 640px) {
  .sidebar { width: 268px; }
  .navgrp-btn { padding: 6px 9px; font-size: .84rem; }
  .navgrp-panel { min-width: 158px; }
}

/* ── 사이드바 머리(그림 또는 위키 이름) ── */
.side-brand {
  display: block; margin: -10px -6px 16px; padding: 0 0 14px;
  border-bottom: 1px solid var(--line); text-decoration: none;
}
.side-brand-img { display: block; width: 100%; height: auto; border-radius: var(--box-radius); }
.side-brand--text { padding: 6px 10px 14px; }
.side-brand-name { display: block; font: 800 1.06rem var(--sans); color: var(--ink); }
.side-brand-tag { display: block; margin-top: 3px; font-size: .76rem; color: var(--ink-soft); }
.side-brand--text:hover .side-brand-name { color: var(--link); }

/* ── 사이드바 가독성 — 묶음 제목과 링크에 하이라이트 ── */
.sidebar .side-group { margin-bottom: 20px; }
.sidebar .side-head {
  margin: 0 0 7px; padding: 0 10px 6px;
  font: 800 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--line);
}
.sidebar .nav-link {
  display: block; padding: 8px 11px; margin: 2px 0;
  font-size: .95rem; color: var(--ink);
  border-left: 2px solid transparent; border-radius: var(--box-radius);
  transition: background .14s ease, color .14s ease;
}
.sidebar .nav-link:hover {
  color: var(--link);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-left-color: var(--accent);
}
/* 지금 보고 있는 문서 */
.sidebar .nav-link.is-active {
  color: var(--link); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-left-color: var(--accent);
}

/* ── 검색창 실시간 검색어(입력 전) ── */
.ss-head {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  font: 700 .76rem var(--sans); letter-spacing: .06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.ss-head-ic { color: var(--accent); font-weight: 800; }
.ss-item--hot { padding: 8px 14px; gap: 10px; }
.ss-rank {
  flex: none;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font: 700 .78rem var(--sans);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 12%, var(--tint));
}
/* 1~3위 강조 */
.ss-item--hot:nth-of-type(-n+4) .ss-rank { color: #fff; background: var(--accent); }
html[data-preset="zerocell"] .ss-head { background: color-mix(in srgb, var(--crimson) 10%, transparent); }
html[data-preset="zerocell"] .ss-head-ic { color: var(--crimson); }
/* 얇은 숫자 스타일에 맞춤 — 붉은 배경을 남기면 아래(8250대) 규칙의
   글자색 accent(=crimson)와 겹쳐 숫자가 안 보인다. 테두리·금색 글자로. */
html[data-preset="zerocell"] .ss-rank { background: none; border-color: color-mix(in srgb, var(--crimson) 45%, transparent); }
html[data-preset="zerocell"] .ss-item--hot:nth-of-type(-n+4) .ss-rank { background: none; border-color: var(--crimson); color: var(--gold); }

/* ============================================================
   대문 아래 포털 패널 — 실시간 검색어 · 최근 바뀜 · 공지
   세 위젯의 '머리띠'와 줄 간격을 한 벌로 맞춘 압축형 레이아웃.
   ============================================================ */

/* ── 공통 머리띠(작고 또렷한 라벨 바) ── */
.hotsearch-head,
.wpanel-head,
.nfeed-head {
  gap: 7px;
  padding: 8px 13px;
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 13%, var(--tint));
  border-bottom: 1px solid var(--line-strong);
}
.hotsearch-ic,
.nfeed-ic { font-size: .8rem; color: var(--accent); }
.wpanel-title,
.nfeed-title { font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.wpanel-all { margin-left: auto; font-size: .72rem; font-weight: 600; letter-spacing: 0; }

/* ── 목록을 촘촘하게 · 줄마다 얇은 구분선 ── */
.hotsearch-list,
.nfeed-list { padding: 0; }
.hotsearch-item { padding: 7px 13px; gap: 9px; }
.hotsearch-item + .hotsearch-item,
.nfeed-item + .nfeed-item { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.hotsearch-rank { width: 20px; height: 20px; font-size: .72rem; }
.nfeed-item { padding: 8px 13px; border-bottom: 0; }

/* 최근 바뀜(대문 패널 안에서만 압축 — 특수:최근바뀜 문서는 그대로) */
.rc-panel .rc-item {
  padding: 8px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.rc-panel .rc-item:last-child { border-bottom: 0; }
.rc-panel .rc-title { font-size: .85rem; }
.rc-panel .rc-meta {
  display: flex; flex-wrap: wrap; gap: 4px 8px;
  margin: 3px 0 0; font-size: .73rem;
}
.rc-panel .rc-summary { margin-top: 3px; font-size: .77rem; line-height: 1.5; }
/* .rc-item 자식: [제목][새문서 배지][메타][요약][역사]
   3줄 격자로 눕혀 항목 높이를 줄인다 — 제목|배지 / 메타|역사 / 요약 */
.rc-panel .rc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title badge" "meta hist" "sum sum";
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
}
.rc-panel .rc-title { grid-area: title; justify-self: start; }
.rc-panel .rc-new   { grid-area: badge; justify-self: end; }
.rc-panel .rc-meta  { grid-area: meta; margin: 0; }
.rc-panel .rc-hist  {
  grid-area: hist; position: static; justify-self: end;
  font-size: .72rem; opacity: .75;
}
/* 요약은 두 줄까지만 — 좁은 칸에서 서너 줄로 번지던 것을 막는다 */
.rc-panel .rc-summary {
  grid-area: sum; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 3단 포털은 높이를 맞춰 한 덩어리로 보이게 ── */
/* 칸 안에 진단 패널 같은 형제가 더 있어도 첫 패널이 칸을 채우도록 flex 로 세운다
   (:only-child 로는 관리자 화면에서 어긋났다) */
.wiki-cols.cols-3 { align-items: stretch; }
.wiki-cols.cols-3 > .wiki-col { display: flex; flex-direction: column; gap: 14px; }
.wiki-cols.cols-3 > .wiki-col > .hotsearch,
.wiki-cols.cols-3 > .wiki-col > .wpanel,
.wiki-cols.cols-3 > .wiki-col > .nfeed { flex: 1 1 auto; }

/* 실시간 검색어는 줄이 짧아 칸 아래가 비기 쉽다 —
   남는 높이를 줄들이 나눠 가져 빈 공간을 없앤다(한 줄이 지나치게 커지지 않게 상한). */
.wiki-cols.cols-3 > .wiki-col > .hotsearch { display: flex; flex-direction: column; }
.wiki-cols.cols-3 > .wiki-col > .hotsearch > .hotsearch-list {
  flex: 1; display: flex; flex-direction: column;
}
.wiki-cols.cols-3 > .wiki-col > .hotsearch > .hotsearch-list > .hotsearch-item {
  flex: 1 1 auto; min-height: 36px; max-height: 62px;
}

@media (max-width: 960px) {
  .wiki-cols.cols-3 > .wiki-col { display: block; }
  .wiki-cols.cols-3 > .wiki-col > .hotsearch,
  .wiki-cols.cols-3 > .wiki-col > .wpanel,
  .wiki-cols.cols-3 > .wiki-col > .nfeed { flex: none; }
}

/* ============================================================
   요소 그리드 · 사이드바 · 모바일 다듬기
   ============================================================ */

/* ── 요소 그리드: 한 줄 최대 5칸, 칸 높이는 가장 큰 칸에 맞춘다 ──
   (100% - 칸사이 4×12px) / 5 를 최소 폭으로 잡으면 6칸 이상은 들어갈 수 없다.
   좁은 화면 규칙(≤640px 2칸, ≤400px 1칸)을 덮지 않도록 641px 이상에서만 적용. */
@media (min-width: 641px) {
  .emblem-grid {
    grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 48px) / 5)), 1fr));
  }
}
.emblem-grid { grid-auto-rows: 1fr; }
.emblem-cell { height: 100%; }

/* ── 사이드바 서랍은 화면 맨 위부터 ──
   허브 바가 있을 때 top:118px 로 밀려 위가 비던 문제(서랍은 덮개이므로 항상 0). */
body.has-netbar .sidebar { top: 0; }

/* ── 허브 바: 위키색 점을 또렷하게 ── */
.netbar-tab .dot { box-shadow: 0 0 7px color-mix(in srgb, var(--dot, #7c8494) 75%, transparent); }
.netbar-tab.is-active { border-color: color-mix(in srgb, var(--dot, #7c8494) 55%, transparent); }
.netbar-tab.is-active .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, #7c8494) 28%, transparent); }

/* ============================================================
   모바일
   ============================================================ */
@media (max-width: 640px) {
  /* 상단바 묶음 메뉴 — 화면 밖으로 삐져나가지 않게 상단바 폭에 맞춘다 */
  .topnav { position: relative; }
  .navgrp { position: static; }
  .navgrp-panel { left: 12px; right: 12px; min-width: 0; }

  /* 포털 패널 — 세로로 쌓일 때 여백을 조금 더 */
  .hotsearch-head, .wpanel-head, .nfeed-head { padding: 9px 12px; }
  .rc-panel .rc-item { padding: 9px 12px; }

  /* 검색창 실시간 검색어 — 손가락에 맞게 */
  .ss-item--hot { padding: 10px 14px; }
  .ss-rank { width: 22px; height: 22px; }

  /* 사이드바 링크도 터치 영역 확보 */
  .sidebar .nav-link { padding: 10px 11px; }
}

/* 아주 좁은 기기 */
@media (max-width: 400px) {
  .netbar-label { display: none; }          /* '위키 허브' 라벨은 접어 탭에 자리를 준다 */
  .navgrp-btn { padding: 6px 8px; }
}

/* 제안 상자 내용이 바뀔 때 브라우저의 스크롤 앵커링이 개입하지 않게 한다 */
.search-suggest, .masthead-search { overflow-anchor: none; }

/* mandatory 스냅은 레이아웃이 바뀔 때 스크롤을 되감는 원인이 된다 —
   이 위키의 다른 가로 스크롤러들처럼 proximity 로 낮춘다(넘김 동작은 그대로). */
.slider-track { scroll-snap-type: x proximity; }

/* ── 검색창에 글자를 칠 때 스크롤이 조금씩 위로 올라가던 문제 ──
   html 의 scroll-padding-top(68px) 은 화면 위 68px 를 '가려진 곳'으로 표시한다.
   검색창은 sticky 머리말 안(위 12~46px)이라 그 영역에 들어가고,
   브라우저가 매 키 입력마다 캐럿을 밖으로 빼내려 위로 스크롤한다.
   머리말이 sticky 라 아무리 스크롤해도 검색창 위치는 그대로 → 무한히 올라간다.
   문단·각주 앵커는 바로 아래 scroll-margin-top 규칙이 이미 처리하므로 중복이다. */
html { scroll-padding-top: 0; }

/* ── 캐릭터 카드: 한 줄에 최대 5명 ──
   칸 너비 = (칸 전체 - 칸사이 4×14px) ÷ 5.
   좁은 화면에서는 150px 아래로 줄지 않고 가로 스크롤로 넘어간다. */
.charcard-row > .charcard {
  --cc-gap: 14px;
  --cc-n: 5;
  --cc-w: calc((100% - (var(--cc-n) - 1) * var(--cc-gap)) / var(--cc-n));
  flex: 0 0 auto;
  width: var(--cc-w);
}
.charcard-row > .charcard:hover { width: calc(var(--cc-w) * 1.45); }

@media (max-width: 1100px) { .charcard-row > .charcard { --cc-n: 4; } }
@media (max-width: 820px)  { .charcard-row > .charcard { --cc-n: 3; } }
@media (max-width: 640px) {
  .charcard-row > .charcard { --cc-n: 2; --cc-w: calc((100% - var(--cc-gap)) / 2); }
  .charcard-row > .charcard:hover { width: var(--cc-w); }
}

/* ── 세계관 카드: 마우스를 올리면 「왼쪽 포스터 + 오른쪽 정보 패널」로 펼쳐진다 ──
   그림(.charcard-bg)과 글 상자(.charcard-inner)는 절대배치라,
   left/right/width 를 함께 주면 width 가 이겨(right 무시) 너비가 부드럽게 움직인다. */
.charcard-row--world > .charcard {
  height: 288px;
  --wc-img: 216px;              /* 펼침 왼쪽 그림 칸(288 × 3/4) */
  background: var(--card);
  /* 아코디언: 카드들이 '틀 전체 너비'를 나눠 갖는다(가로 스크롤 없음).
     flex-basis(폭 %)를 애니메이션한다 — flex-grow 는 transition 이 부드럽게
     먹지 않아 hover 시 버벅였다. basis 는 길이값이라 매끄럽게 전환된다. */
  flex: 0 1 auto;
  flex-basis: calc((100% - 4 * 14px) / 5);   /* 기본은 5장 균등 */
  width: auto;
  min-width: 0;
  transition: flex-basis .4s cubic-bezier(.33,1,.68,1), box-shadow .3s, border-color .3s;
}

/* ── 세계관 슬롯({{세계관슬롯}}) 전용: 연재 상태 배지 + 특이사항 배지 ── */
.charcard-row--slot > .charcard { position: relative; }
/* 우측 상단 연재 상태 배지 */
.ws-state {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  font: 700 .62rem/1 var(--mono, monospace);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  color: #fff; white-space: nowrap;
  background: #6b7280;   /* 기본색(그 외 상태) */
  box-shadow: 0 2px 8px -2px rgba(0,0,0,.5);
}
.ws-state.is-ongoing { background: #16a34a; }                 /* 연재 — 초록 */
.ws-state.is-dropped { background: #dc2626; }                 /* 연재중단 — 빨강 */
.ws-state.is-done    { background: #2563eb; }                 /* 완결 — 파랑 */
.ws-state.is-hiatus  { background: #6b7280; }                 /* 휴재 — 회색 */
.ws-state.is-etc     { background: color-mix(in srgb, var(--accent) 70%, #333); }
/* 특이사항 배지(🏆 22 진출 등) — 카드를 펼치면 소개 아래에 보인다 */
.ws-badge {
  display: none;              /* 접힌 상태에선 숨김 */
  align-items: center; gap: 6px;
  margin-top: 8px;
  font: 700 .74rem/1 var(--mono, monospace);
  color: var(--gold, #e2b64c);
}
.ws-badge-ico { font-size: .9rem; line-height: 1; }
/* 마우스를 올려 카드가 펼쳐지면 특이사항도 보이게 */
@media (hover: hover) {
  .charcard-row--slot > .charcard:hover .ws-badge { display: inline-flex; }
}

/* ── 캐릭터 슬롯({{캐릭터슬롯}}) 전용 ──────────────────────────────
   아코디언 없음. 한 줄 최대 5명(--cc-n 규칙을 그대로 쓴다).
   호버 전: 이미지 어둡게 + 이름만 '카드 정중앙'.
   호버 시: 이미지 밝아지고 소개 등장 + 이름이 정중앙→하단 왼쪽으로 '부드럽게' 이동.
   (정렬 속성 justify/align 은 transition 이 안 먹으므로 transform 으로 움직인다.) */
.charcard-row--char { align-items: stretch; }
.charcard-row--char > .charcard {
  height: 300px;
  flex: 0 0 auto;
  width: var(--cc-w);              /* --cc-n(5→4→3→2) 규칙을 따라 폭 결정 */
}
/* 캐릭터 슬롯은 호버해도 '넓어지지 않는다'. 일반 카드의 hover 확대(×1.45)를 무효화. */
.charcard-row--char > .charcard:hover { width: var(--cc-w); }
/* 호버 전: 이미지를 더 어둡게 눌러 둔다 → 호버하면 밝아진다 */
.charcard-row--char > .charcard .charcard-bg { filter: grayscale(.25) brightness(.55); }
.charcard-row--char > .charcard:hover .charcard-bg { filter: grayscale(0) brightness(1); }

/* 이름: 카드 전체를 기준으로 절대배치하고 transform 으로 위치를 옮긴다.
   기본 = 카드 정중앙. */
.charcard-row--char > .charcard .charcard-inner {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  padding: 0;
  display: block;                  /* flex 정렬 대신 transform 으로 배치 */
}
.charcard-row--char > .charcard .charcard-name {
  position: absolute;
  /* 호버 후 이름과 '같은 높이'(bottom:52px)에 두되, 호버 전엔 가로 가운데.
     호버하면 그 높이 그대로 왼쪽(15px)으로만 미끄러진다. */
  left: 50%; bottom: 52px;
  transform: translateX(-50%);             /* 가로 가운데 */
  margin: 0; padding: 0 14px;
  width: max-content; max-width: calc(100% - 28px);
  text-align: center;
  font-size: 1.34rem;
  transition: left .42s cubic-bezier(.4,0,.2,1),
              transform .42s cubic-bezier(.4,0,.2,1),
              font-size .42s;
}
/* 호버: 이름을 하단 왼쪽으로 부드럽게 이동(정중앙 → 좌하단) */
.charcard-row--char > .charcard:hover .charcard-name {
  left: 15px;                              /* 같은 높이(bottom:52px)에서 왼쪽으로 */
  transform: translateX(0);
  text-align: left;
  font-size: 1.18rem;
}
/* 라벨: 이름 위 작은 글씨(호버 전엔 이름만 보이도록 숨김) */
.charcard-row--char > .charcard .charcard-code {
  position: absolute; left: 15px; bottom: 82px;
  opacity: 0; transition: opacity .3s;
}
.charcard-row--char > .charcard:hover .charcard-code { opacity: 1; }
/* 소개: 호버 시 하단에 등장 */
.charcard-row--char > .charcard .charcard-desc {
  position: absolute; left: 15px; right: 15px; bottom: 16px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .42s ease, opacity .3s ease;
}
.charcard-row--char > .charcard:hover .charcard-desc { max-height: 30px; opacity: 1; }
@media (max-width: 640px) {
  /* 휴대폰: 아코디언(폭 나눠갖기)은 화면이 좁아 카드가 다닥다닥 붙으므로 쓰지 않는다.
     대신 가로 스크롤로 '한 장씩' 넘겨 보게 한다. */
  .charcard-row--world {
    overflow-x: auto;             /* 아코디언의 넘침숨김 해제 → 스크롤 */
    scroll-snap-type: x mandatory;
    cursor: default;
  }
  .charcard-row--world > .charcard {
    height: auto; aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    flex-basis: 76%;              /* 한 화면에 한 장 조금 넘게 */
    width: auto; min-width: 0;
    scroll-snap-align: start;
  }
  /* 모바일은 hover 펼침 없음 → 폭 변화·글칸 분리 모두 해제 */
  .charcard-row--world > .charcard:hover { flex-basis: 76%; }
  .charcard-row--world:hover > .charcard:not(:hover) { flex-basis: 76%; }
}
.charcard-row--world > .charcard .charcard-bg,
.charcard-row--world > .charcard .charcard-scrim {
  transition: width .38s cubic-bezier(.4,0,.2,1), filter .38s, transform .38s, opacity .3s;
}
/* 글 상자를 카드 전체 높이로 깔되 내용은 아래쪽에 둔다(평소 모습은 그대로).
   top 을 auto 에서 0 으로 바꾸면 애니메이션이 끊기므로 처음부터 0 으로 고정한다. */
.charcard-row--world > .charcard .charcard-inner {
  top: 0;
  justify-content: flex-end;
  transition: left .38s cubic-bezier(.4,0,.2,1), padding .38s, background .3s;
}

@media (min-width: 641px) {
  .charcard-row--world > .charcard:hover {
    /* 아코디언: 이 카드만 크게 자라고(flex-grow ↑), 나머지 카드는 자동으로 좁아진다.
       틀 전체 너비 안에서 나눠 가지므로 가로 스크롤이 생기지 않는다.
       그림칸(216)+글칸이 들어갈 만큼만 자라도록 min-width 로 하한을 준다. */
    flex-basis: 44%;              /* 이 카드를 넓게(그림칸+글칸) — 너무 넓지 않게 */
    border-color: var(--accent);
  }
  /* hover 하지 않은 카드는 최소한의 폭(제목만 보이게)으로 좁아진다. */
  .charcard-row--world:hover > .charcard:not(:hover) {
    flex-basis: calc((100% - 44% - 4 * 14px) / 4);   /* 나머지 4장이 남은 폭을 나눔 */
  }
  /* 좁아진 카드 안: 라벨·설명·배지는 숨기고 제목만 남긴다.
     제목은 좁은 칸에 맞춰 작게, 두 줄까지만 보이고 넘치면 …로 자른다. */
  .charcard-row--world:hover > .charcard:not(:hover) .charcard-code,
  .charcard-row--world:hover > .charcard:not(:hover) .charcard-desc,
  .charcard-row--world:hover > .charcard:not(:hover) .ws-badge {
    display: none;
  }
  .charcard-row--world:hover > .charcard:not(:hover) .charcard-name {
    font-size: .98rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 펼칠 때 이미지가 '혼자 확대'되지 않게 한다. scale 을 완전히 끄고(none),
     그림칸이 좁아져도 이미지를 가운데 기준으로 담아 로고 등이 덜 잘리게 한다. */
  /* 세계관 슬롯 이미지는 세로(288px) 기준으로 크기를 고정한다.
     그림칸 폭이 216 ↔ 원래폭으로 바뀌어도 이미지 크기 자체가 안 변하므로
     hover 를 뗄 때 이미지가 확대됐다 돌아오는 튐이 사라진다. */
  /* 슬롯 이미지: 그림칸 크기(216×288, 3:4)로 배경을 '고정'한다.
     - 폭이 216↔원래폭으로 바뀌어도 이미지 크기가 안 변하므로 뗄 때 튐이 없다.
     - 216×288 은 3:4 라, 3:4 세로 포스터 이미지는 잘리지 않고 딱 맞는다. */
  .charcard-row--world > .charcard .charcard-bg { background-size: 216px 288px; background-position: center center; }
  .charcard-row--world > .charcard:hover .charcard-bg { width: var(--wc-img); transform: none; }
  .charcard-row--world > .charcard:hover .charcard-scrim { width: var(--wc-img); opacity: .3; }

  .charcard-row--world > .charcard:hover .charcard-inner {
    left: var(--wc-img);
    justify-content: center;
    gap: 8px;
    padding: 20px 22px;
    /* 오른쪽 글칸을 밝은 바탕으로 덮는다(레퍼런스처럼) → 그 아래 이미지가 가려져
       왼쪽 216px 만 그림으로 보이고, 오른쪽은 밝은 정보 패널이 된다. */
    background: var(--card);
  }
  /* 펼친 뒤에는 그림이 아니라 카드 바탕 위에 글이 놓인다 → 제목·본문 색을 바꾼다.
     보여 주는 차례도 제목 → 라벨 → 설명 순으로 돌린다. */
  .charcard-row--world > .charcard:hover .charcard-name {
    order: 1; color: var(--ink); text-shadow: none; font-size: 1.24rem; line-height: 1.28;
  }
  .charcard-row--world > .charcard:hover .charcard-code { order: 2; opacity: 1; margin: 0; }
  .charcard-row--world > .charcard:hover .charcard-desc {
    /* 카드 높이 288 − 위아래 여백 40 − 제목/라벨 ≈ 55 → 설명은 165px(약 7줄)까지 */
    order: 3; color: var(--ink-soft); max-height: 165px; font-size: .86rem; line-height: 1.62;
  }
}

/* ============================================================
   분류 문서 — 왼쪽 분류 목록 + 오른쪽 문서 카드 격자
   ============================================================ */
.catpage {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 1.2em;
}

/* ── 왼쪽 분류 목록 ──
   테두리를 겹겹이 두르지 않고 여백·바탕·왼쪽 표시선으로 위계를 만든다.
   이름 앞 아이콘은 「넷위키:분류순서」에서 '이름 | 그림.png' 로 지정한다. */
.catside {
  position: sticky; top: 84px;
  border: 1px solid var(--line); border-radius: var(--box-radius);
  background: var(--card); overflow: hidden;
}
body.has-netbar .catside { top: 118px; }

/* 머리띠 */
.catside-head {
  position: relative; overflow: hidden;
  padding: 14px 16px 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.catside-head-t {
  position: relative; z-index: 1;
  font: 800 .95rem var(--sans); letter-spacing: .12em; color: var(--ink);
}
.catside-head::before {                       /* 왼쪽 강조 막대 */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.catside-head::after {                        /* 오른쪽 옅은 사선 무늬 */
  content: ""; position: absolute; inset: 0; left: 45%;
  background: repeating-linear-gradient(115deg, transparent 0 9px,
    color-mix(in srgb, var(--accent) 12%, transparent) 9px 10px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
          mask-image: linear-gradient(to right, transparent, #000);
  opacity: .7; pointer-events: none;
}

.catside-list { max-height: 66vh; overflow-y: auto; padding: 8px 8px 10px; }

/* 한 줄 — 평소엔 테두리 없이 담백하게, 손이 닿을 때만 드러난다 */
.catside-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin: 2px 0;
  border-radius: var(--box-radius);
  color: var(--ink); text-decoration: none; font-size: .91rem;
  transition: background .15s ease, color .15s ease;
}
.catside-item::before {                       /* 왼쪽 표시선(평소 숨김) */
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 2px; background: transparent;
  transition: background .15s ease;
}
.catside-item:hover { color: var(--link); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.catside-item:hover::before { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.catside-item.is-on {
  color: var(--link); font-weight: 700;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.catside-item.is-on::before { background: var(--accent); }

/* 이름 앞 아이콘 칸 */
.catside-ic {
  flex: none; width: 20px; height: 20px;
  border-radius: 5px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.catside-ic--mark {                           /* 그림이 없을 때: 작은 점 */
  display: grid; place-items: center;
  background: none;
}
.catside-ic--mark::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
}
.catside-ic--mark.is-group::after {           /* 묶음은 마름모 */
  width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--accent) 80%, transparent);
}
.catside-item:hover .catside-ic--mark::after,
.catside-item.is-on .catside-ic--mark::after { background: var(--accent); }

.catside-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.catside-n {
  flex: none; min-width: 18px; text-align: right;
  font: 600 .76rem var(--mono, monospace); font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ink-soft) 85%, transparent);
}
.catside-item.is-on .catside-n { color: var(--link); }
.catside-empty { padding: 16px 12px; color: var(--ink-soft); font-size: .88rem; }

/* ── 묶음 ── */
.catside-group { border: 0; margin: 2px 0; }
.catside-grouphead {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px;
  border-radius: var(--box-radius);
  color: var(--ink); font-size: .93rem; font-weight: 700;
  cursor: pointer; list-style: none;
  transition: background .15s ease;
}
.catside-grouphead::-webkit-details-marker { display: none; }
.catside-grouphead:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.catside-group[open] > .catside-grouphead { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.catside-glink, .catside-glabel { flex: 1; min-width: 0; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.catside-glink:hover, .catside-glink.is-on { color: var(--link); }
.catside-arrow {
  flex: none; width: 14px; height: 14px;
  border-right: 1.6px solid var(--ink-soft); border-bottom: 1.6px solid var(--ink-soft);
  transform: rotate(45deg) translate(-2px, -2px); transform-origin: center;
  transition: transform .2s ease; opacity: .75;
}
.catside-group[open] > .catside-grouphead > .catside-arrow { transform: rotate(225deg) translate(-2px, -2px); }

/* 하위 묶음 — 왼쪽 안내선 하나로 묶고, 줄마다 상자는 두지 않는다 */
.catside-sub {
  margin: 2px 0 4px 20px; padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.catside-sub .catside-item { font-size: .88rem; padding: 8px 10px; }
.catside-sub .catside-item::before { left: -13px; width: 2px; }

/* ── 아래 도구 ── */
.catside-foot { padding: 9px 10px 10px; border-top: 1px solid var(--line); }
.catside-edit {
  display: block; padding: 8px 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--box-radius);
  color: var(--ink-soft); text-decoration: none; text-align: center; font-size: .82rem;
  transition: color .15s ease, border-color .15s ease;
}
.catside-edit::before { content: "✎ "; }
.catside-edit:hover { color: var(--link); border-color: var(--accent); }
.catside-note {
  margin-bottom: 8px; padding: 9px 11px;
  border-radius: var(--box-radius);
  background: color-mix(in srgb, var(--amber, #e0912b) 12%, transparent);
  font-size: .8rem; line-height: 1.5;
}
.catside-note b { display: block; color: var(--ink); font-size: .77rem; letter-spacing: .04em; }
.catside-note-list { display: block; margin-top: 3px; color: var(--ink-soft); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  /* 좁은 화면: 가로 한 줄로 */
  .catside { position: static; }
  .catside-list { display: flex; gap: 4px; overflow-x: auto; max-height: none; }
  .catside-group { display: contents; }
  .catside-grouphead { display: none; }
  .catside-sub { display: contents; }
  .catside-item { flex: none; margin: 0; }
  .catside-item::before { display: none; }
  .catside-foot { display: none; }
}

/* ── 오른쪽 문서 카드 격자 ── */
.catmain .cat-members-head { margin-top: 0; }
.catgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}
.catgrid-item {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  min-height: 74px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--box-radius);
  background: var(--card);
  overflow: hidden; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.catgrid-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}
/* 오른쪽에 크게 깔리는 흐린 문양 — 문서의 대표 그림을 재활용한다 */
.catgrid-wm {
  position: absolute; top: 50%; right: -6%;
  width: 48%; height: 210%;
  transform: translateY(-50%);
  background-size: contain; background-repeat: no-repeat; background-position: right center;
  opacity: .14; filter: grayscale(1) contrast(1.1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 100%);
          mask-image: linear-gradient(to left, #000 45%, transparent 100%);
}
.catgrid-thumb {
  position: relative; z-index: 1;
  flex: none; width: 48px; height: 48px;
  border-radius: calc(var(--box-radius) + 2px);
  border: 1px solid var(--line-strong);
  background-color: color-mix(in srgb, var(--accent) 10%, var(--tint));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.catgrid-ch { font: 800 1.1rem var(--serif, serif); color: var(--accent); opacity: .85; }
.catgrid-name {
  position: relative; z-index: 1;
  font: 600 .96rem var(--sans); color: var(--ink);
  overflow-wrap: anywhere;
}
.catgrid-item:hover .catgrid-name { color: var(--link); }

@media (max-width: 900px) {
  /* 좁은 화면: 분류 목록을 위쪽 가로 줄로 접는다 */
  .catpage { grid-template-columns: 1fr; }
  .catside { position: static; }
  .catside-list { display: flex; gap: 6px; overflow-x: auto; max-height: none; }
  .catside-item { flex: none; border-left: 0; border-bottom: 2px solid transparent; }
  .catside-item:hover, .catside-item.is-on { border-left-color: transparent; border-bottom-color: var(--accent); }
}
@media (max-width: 640px) {
  .catgrid { grid-template-columns: 1fr; }
  .catgrid-item { min-height: 64px; padding: 10px 13px; }
  .catgrid-thumb { width: 42px; height: 42px; }
}

/* ── 특수:분류 — 분류 자체를 카드로 (칸 수·크기는 분류 문서와 동일) ── */
.catgrid--cats .catgrid-name { flex: 1; min-width: 0; }
.catgrid-n {
  position: relative; z-index: 1; flex: none;
  padding: 2px 9px; border-radius: 999px;
  font: 700 .76rem var(--mono, monospace); font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--accent) 14%, var(--tint));
}
.catgrid-item:hover .catgrid-n { color: var(--link); }

/* ── 경로 뷰(빵부스러기) ── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 6px; font-size: .82rem; line-height: 1.5;
}
.crumbs-item { color: var(--ink-soft); text-decoration: none; }
a.crumbs-item:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.crumbs-item.is-current { color: var(--ink); font-weight: 600; }
.crumbs-sep { color: var(--line-strong); }

/* ── 특수:분류 — 차례에 없는 분류 알림 ── */
.catside-note {
  margin: 6px 4px 2px; padding: 9px 11px;
  border: 1px dashed color-mix(in srgb, var(--amber, #e0912b) 55%, transparent);
  border-radius: var(--box-radius);
  background: color-mix(in srgb, var(--amber, #e0912b) 9%, transparent);
  font-size: .82rem; line-height: 1.55;
}
.catside-note b { display: block; color: var(--ink); font-size: .78rem; letter-spacing: .04em; }
.catside-note-list { display: block; margin-top: 3px; color: var(--ink); overflow-wrap: anywhere; }
.catside-note-tip { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .76rem; }

/* ============================================================
   오프닝(인트로) — 화면을 완전히 덮기
   모바일 브라우저는 주소창이 접혔다 펴지면서 100vh 가 실제 화면보다 커진다.
   dvh(동적 높이)를 쓰되, 모르는 브라우저를 위해 vh 를 먼저 적어 둔다.
   ============================================================ */
.wload, .loadintro, .wload-stage {
  width: 100vw;  width: 100dvw;
  height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  inset: 0;
}
/* 노치·홈 바가 있는 기기에서도 배경이 화면 끝까지 닿게 */
.wload, .loadintro { padding: 0; margin: 0; }
.loadintro-half { height: 100%; }

/* ============================================================
   모바일 가독성
   ============================================================ */
@media (max-width: 640px) {
  /* ── 너무 작아 읽기 힘든 글자 올리기 ── */
  .brand-tag, .stat-sub, .emblem-sub, .herob-eyebrow,
  .featured-chip, .tpldoc-hint, .wiki-music-note, .upload-tile-size,
  .notice-live, .wswitch-menu-head { font-size: .78rem; }
  .notice-footer { font-size: .74rem; }
  .activity-x { font-size: .76rem; }
  .catside-n, .catgrid-n { font-size: .78rem; }
  .crumbs { font-size: .84rem; }
  .rc-panel .rc-meta { font-size: .78rem; }
  .rc-panel .rc-summary { font-size: .82rem; }
  .ss-title, .ss-desc { font-size: .88rem; }

  /* ── 본문 줄 간격을 조금 넓혀 읽기 편하게 ── */
  .wiki-content { line-height: 1.78; }
  .wiki-content li { margin: .35em 0; }

  /* ── 손가락에 맞는 누름 영역(최소 40px) ── */
  .catgrid-item { min-height: 66px; }
  .crumbs-item { padding: 3px 0; }
  .navgrp-panel .nav-link { padding: 11px 12px; }
  .page-tab { padding: 10px 14px; }
  .cat-tag { padding: 6px 11px; }

  /* ── 긴 이름이 칸을 밀어내지 않게 ── */
  .catside-name, .catgrid-name, .crumbs-item { overflow-wrap: anywhere; }

  /* ── 표는 좌우로 밀어서 보되, 스크롤이 가능함을 알린다 ── */
  .wiki-table-wrap { position: relative; }
  .wiki-table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px;
    background: linear-gradient(to left, var(--card), transparent);
    pointer-events: none;
  }
}

@media (max-width: 400px) {
  /* 아주 좁은 기기 — 본문 좌우 여백을 줄여 글 폭을 확보 */
  .article, .article-cats, .fn-section--card, .comments-card { padding-left: 14px; padding-right: 14px; }
  .catside-list { padding: 6px; }
  .catgrid-item { padding: 10px 12px; }
}

/* ============================================================
   결 다듬기 — 모든 요소가 같은 공식으로 칠해진 인상을 줄인다.
   ① 패널 머리는 강조색 물 대신 '종이 톤'으로 (강조는 선 하나로만)
   ② 표면마다 밝기를 조금씩 달리해 층이 보이게
   ③ 호버는 전부 떠오르지 않고 요소 성격에 맞게
   ============================================================ */

/* ── ① 패널 머리 ── */
.catside-head,
.hotsearch-head,
.wpanel-head,
.nfeed-head {
  background: var(--tint);
  border-bottom: 1px solid var(--line-strong);
}
/* 강조는 왼쪽 짧은 선 하나로만 준다(면 전체를 물들이지 않는다) */
.hotsearch-head, .wpanel-head, .nfeed-head { position: relative; }
.hotsearch-head::before,
.wpanel-head::before,
.nfeed-head::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
  background: var(--accent);
}
.catside-head::before { top: 10px; bottom: 10px; width: 2px; }
/* 사선 무늬는 거의 안 보이게 — 있는 줄 모를 정도가 적당하다 */
.catside-head::after { opacity: .25; }

/* ── ② 표면 층위 ── */
.catside-list { background: color-mix(in srgb, var(--paper) 45%, var(--card)); }
.catside-item { background: none; }
.catside-item:hover { background: var(--tint); }
.catside-item.is-on { background: color-mix(in srgb, var(--accent) 10%, var(--tint)); }
.catside-grouphead { background: none; }
.catside-grouphead:hover { background: var(--tint); }
.catside-group[open] > .catside-grouphead { background: none; color: var(--ink); }
/* 펼친 묶음은 색이 아니라 '굵기와 선'으로 표시 */
.catside-group[open] > .catside-grouphead { border-bottom: 1px solid var(--line); border-radius: 0; }

/* 분류 카드 — 강조색 대신 종이 톤, 호버에만 강조선 */
.catgrid-item { background: var(--card); }
.catgrid-item:hover { transform: none; border-color: var(--line-strong); box-shadow: var(--shadow); }
.catgrid-item:hover .catgrid-name { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.catgrid-thumb { background-color: var(--tint); border-color: var(--line); }
.catgrid-ch { color: var(--ink-soft); opacity: 1; }
.catgrid-n { background: none; color: var(--ink-soft); padding: 0; border-radius: 0; font-weight: 600; }

/* 실시간 검색어 순위 — 알약 대신 얇은 숫자 */
.hotsearch-rank {
  background: none; border: 1px solid var(--line-strong);
  color: var(--ink-soft); font-weight: 600; border-radius: 3px;
}
/* 1~3위: 위(옛 알약 규칙)의 background:var(--accent)가 그대로 남아
   글자색(accent)과 겹쳐 숫자가 안 보였다 → 배경도 확실히 지운다. */
.hotsearch-item:nth-child(-n+3) .hotsearch-rank { background: none; border-color: var(--accent); color: var(--accent); }

/* 검색 제안 머리 */
.ss-head { background: var(--tint); letter-spacing: .04em; }
.ss-rank { background: none; border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: 3px; }
.ss-item--hot:nth-of-type(-n+4) .ss-rank { background: none; border-color: var(--accent); color: var(--accent); }

/* ── ③ 호버 ── */
/* 카드가 일제히 떠오르는 연출은 한 곳(캐릭터 카드)에만 남긴다 */
.emblem-cell:hover, .sp-card:hover, .featured-card:hover { transform: none; }
.emblem-cell:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }

/* 상단바 묶음 메뉴 — 채우기보다 밑줄로 */
.navgrp-btn:hover { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--line-strong); }
.navgrp.is-active > .navgrp-btn { background: none; box-shadow: inset 0 -2px 0 var(--accent); }

/* ============================================================
   모바일 머리부 정돈 — 로그인이 혼자 줄바꿈되던 문제
   1행: 메뉴 · 로고 · 위키 전환 · 알림/계정/로그인
   2행: 검색(전폭)  — 스크린샷 기준 빈 줄 없이 두 줄로 고정
   ============================================================ */
@media (max-width: 768px) {
  .masthead-inner { flex-wrap: wrap; row-gap: 8px; }
  .menu-toggle { order: 1; }
  .brand { order: 2; flex: 1 1 0; min-width: 0; }
  .wswitch { order: 3; }
  .user-bell { order: 4; }
  .user-chip { order: 5; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .logout-form, .btn-login { order: 6; }
  .masthead-search { order: 10; flex: 1 1 100%; max-width: none; margin: 2px 0 0; }
}
@media (max-width: 640px) {
  /* 상단 탭이 두 줄로 갈릴 때 줄 간 리듬 유지 */
  .topnav-inner { row-gap: 2px; }
  .topnav .nav-link { padding: 7px 10px; }
}

/* ============================================================
   대문 3단 패널(실시간 검색어 · 최근 바뀜 · 공지) 읽기 편하게 재정비
   원칙: ① 세 패널 머리 통일 ② 줄마다 정보 밀도 ③ 시선 흐름 좌→우
   ※ .rc-panel 로 한정 — 특수:최근바뀜 문서 페이지는 그대로 둔다.
   ============================================================ */

/* ── 패널 머리 3종 통일: 같은 높이·서체·괘선 ── */
.hotsearch-head, .rc-panel .wpanel-head, .nfeed-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 15px;
  font: 700 .92rem var(--serif);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line-strong);
}
.hotsearch-ic, .nfeed-ic { font-size: .9em; }
.rc-panel .wpanel-title, .nfeed-title { font: inherit; }
.wpanel-all, .nfeed-all {
  margin-left: auto;
  font: 600 .78rem var(--sans);
  color: var(--ink-soft); text-decoration: none;
}
.wpanel-all:hover, .nfeed-all:hover { color: var(--link); }

/* ── 실시간 검색어: 순위 | 제목 | 조회수 ── */
.hotsearch-item { padding: 8px 15px; gap: 10px; }
.hotsearch-item a { flex: 1 1 auto; min-width: 0; }
.hotsearch-views {
  flex: none;
  font: 500 .74rem var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft); opacity: .75;
}
.hotsearch-item:hover .hotsearch-views { opacity: 1; }

/* ── 최근 바뀜(대문 패널): 두 줄 고정 레이아웃 ──
   1줄: 제목(왼) ················ 시각(오른)
   2줄: [+증감] 편집자 · 요약(한 줄 말줄임) ···· 역사    */
.rc-panel .rc-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 15px;
}
.rc-panel .rc-item + .rc-item { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.rc-panel .rc-line1 {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.rc-panel .rc-title {
  font-weight: 700; font-size: .92rem;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-panel .rc-new { flex: none; }
.rc-panel .rc-line1 .rc-time {
  flex: none; margin-left: auto;
  font-size: .76rem; color: var(--ink-soft);
}
.rc-panel .rc-line2 {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: .8rem; color: var(--ink-soft);
}
.rc-panel .rc-diff {
  flex: none;
  font: 600 .74rem var(--mono); font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 99px;
}
.rc-panel .rc-diff.pos  { color: var(--green, #2ea36b); background: color-mix(in srgb, var(--green, #2ea36b) 12%, transparent); }
.rc-panel .rc-diff.neg  { color: var(--red, #d05050);   background: color-mix(in srgb, var(--red, #d05050) 12%, transparent); }
.rc-panel .rc-diff.zero { background: color-mix(in srgb, var(--ink-soft) 12%, transparent); }
.rc-panel .rc-author { flex: none; }
.rc-panel .rc-summary {
  display: inline; margin: 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: .85;
}
.rc-panel .rc-summary::before { content: "· "; opacity: .6; }
.rc-panel .rc-hist {
  flex: none; margin-left: auto; position: static;
  font-size: .74rem; color: var(--ink-soft); text-decoration: none;
  opacity: .7;
}
.rc-panel .rc-hist:hover { color: var(--link); opacity: 1; }
.rc-panel .rc-item:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* ── 공지: 항목 리듬을 최근 바뀜과 맞춤 ── */
.nfeed-item { padding: 10px 15px; }
.nfeed-item-title { font-weight: 700; font-size: .92rem; }
.nfeed-item-sum {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .8rem; opacity: .85;
}
.nfeed-item-date { font-size: .74rem; color: var(--ink-soft); }

/* ── 글꼴 고르기 카드(특수:관리) ── */
.fontpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 12px 0 4px; }
.fontpick-item {
  display: flex; flex-direction: column; gap: 6px;
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--card); cursor: pointer;
  transition: border-color .13s, background .13s;
}
.fontpick-item:hover { border-color: var(--accent); }
.fontpick-item.is-on, .fontpick-item:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
}
.fontpick-item input { position: absolute; opacity: 0; pointer-events: none; }
.fontpick-sample { font-weight: 700; font-size: 1.06rem; line-height: 1.35; }
.fontpick-meta { font-size: .78rem; color: var(--ink-soft); }
.fontpick-meta b { color: var(--ink); margin-right: 5px; }

/* ============================================================
   ① 사람에게 익숙한 위키 관습 보강 (전 테마 공통)
   근거: 위키피디아·제이위키·나무위키·SCP가 공유하는 시각 문법.
   독자는 이 신호들로 "여기가 위키"임을 무의식적으로 읽는다.
   ============================================================ */

/* h2 = 액센트 바(호요위키) + 전폭 밑줄(위키피디아) — 두 관습의 합집합.
   섹션 위 여백을 넉넉히 둬 단락 호흡(위키피디아식)을 만든다. */
.wiki-content h2, .cat-members-head {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 7px;
  margin-top: 1.9em;
}
.wiki-content h3 { margin-top: 1.5em; }
.wiki-content h2:first-child, .wiki-content h3:first-child { margin-top: 0.3em; }

/* 본문 링크: 평소엔 색으로만, 올리면 밑줄 — 모든 위키의 손버릇.
   단, '글 속의 링크'에만 건다. 버튼·카드·타일처럼 이미 모양을 갖춘 요소에
   밑줄이 그어지면 싸구려로 보인다. 그래서 클래스를 하나씩 빼는 대신
   파서가 붙이는 진짜 텍스트 링크(.wiki-link)와 클래스 없는 링크만 허용한다.
   (이러면 새 틀에 새 버튼이 생겨도 다시 밑줄이 새지 않는다) */
.wiki-content a.wiki-link:hover,
.wiki-content a:not([class]):hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* 각주·목차 번호 등 장식성 링크는 제외 */
.wiki-content sup a.wiki-link:hover,
.wiki-content .wiki-toc a.wiki-link:hover { text-decoration: none; }

/* 인용: 왼쪽 굵은 괘 + 옅은 바탕(나무위키·SCP의 "> " 인용 상자) */
.wiki-content blockquote {
  margin: 1em 0; padding: 9px 15px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--tint) 70%, transparent);
  border-radius: 0 8px 8px 0;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}
.wiki-content blockquote p { margin: 0.35em 0; }

/* 문단 리듬·가로줄 */
.wiki-content p { margin: 0.85em 0; }
/* 구분선(----) — 본문 폭을 가득 채우는 한 줄.
   예전에는 78px짜리 짧은 장식선이었는데, 뒤에 붙은 규칙이 margin:auto 를 덮어
   가운데 정렬이 풀리면서 왼쪽에 토막처럼 붙어 있었다. 아래에서 한 번에 정리한다.
   · 폭 100% · 양 끝을 옅게 흐려 문단과 부드럽게 이어지게
   · 가운데 작은 마름모는 유지(위키 특유의 장식) — 빼려면 ::after 를 지우면 된다 */
.wiki-content hr,
hr.wiki-hr {
  display: block;
  /* 우측 정보상자(float) 위를 가로줄이 지나가 뚫려 보이던 문제 수정: 플로트를 넘겨 아래로 */
  clear: both;
  border: 0;
  width: 100%;
  max-width: none;
  height: 1px;
  margin: 2.1em 0;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--line-strong) 12%,
              var(--line-strong) 88%,
              transparent 100%);
  position: relative;
  overflow: visible;
}
hr.wiki-hr::after,
.wiki-content hr::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--card);
  border: 1px solid var(--line-strong);
}
.wiki-content li { margin: 0.22em 0; }

/* 각주 표시: 작게, 링크색 — 클릭 가능함이 한눈에 */
.wiki-content sup a { font-size: 0.82em; text-decoration: none; }

/* 목차: 「목차」 라벨을 위키피디아처럼 본문색으로 또렷하게 */
.wiki-toc-title { color: var(--ink); letter-spacing: 0.1em; }

/* ============================================================
   ② 제로셀 = SCP 재단 Sigma 문서 양식 (사이버펑크 기밀문서)
   scp-wiki.wikidot.com 대문·문서를 직접 참조해 옮긴 신호들:
   각진 1px 상자 · 기밀 경고 띠 · 모노 라벨 · "by 작성자" 발췌 카드
   ============================================================ */

/* 모서리를 깎는다 — Sigma의 '서류' 인상은 각에서 나온다 */
html[data-preset="zerocell"] .wpanel,
html[data-preset="zerocell"] .hotsearch,
html[data-preset="zerocell"] .nfeed,
html[data-preset="zerocell"] .wiki-toc,
html[data-preset="zerocell"] .notice,
html[data-preset="zerocell"] .wiki-content blockquote,
html[data-preset="zerocell"] .charcard,
html[data-preset="zerocell"] .featured-card {
  border-radius: 3px;
}

/* 문서 머리 위 기밀 등급 띠 — SCP 대문의 CLASSIFIED 경고를 슬림하게 */
html[data-preset="zerocell"] .article-head { position: relative; }
html[data-preset="zerocell"] .article-head::before {
  content: "NET SECURE ARCHIVE \00a0//\00a0 CLEARANCE REQUIRED";
  display: block;
  font: 700 0.66rem var(--mono);
  letter-spacing: 0.24em;
  color: var(--gold);
  border-top: 1px solid color-mix(in srgb, var(--crimson) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--crimson) 35%, transparent);
  padding: 5px 0 4px;
  margin-bottom: 14px;
  opacity: 0.9;
}

/* 섹션 밑줄·패널 라벨을 문서 양식으로: 모노 소제목 + 진홍 괘선 */
html[data-preset="zerocell"] .wiki-content h2,
html[data-preset="zerocell"] .cat-members-head {
  border-bottom-color: color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
}
html[data-preset="zerocell"] .hotsearch-head,
html[data-preset="zerocell"] .rc-panel .wpanel-head,
html[data-preset="zerocell"] .nfeed-head {
  font: 700 0.8rem var(--mono);
  letter-spacing: 0.14em;
  color: var(--gold);
  border-bottom-color: color-mix(in srgb, var(--crimson) 45%, var(--line-strong));
}

/* 경고 상자 = 기밀 통지문: 두꺼운 진홍 왼괘 + 각진 상자 (Sigma 경고 블록) */
html[data-preset="zerocell"] .notice-warn,
html[data-preset="zerocell"] .notice-error {
  border-left: 4px solid var(--crimson);
  letter-spacing: 0.01em;
}

/* 인용 = 보고서 발췌: SCP 인용상자(옅은 바탕 + 1px 전체 테두리) */
html[data-preset="zerocell"] .wiki-content blockquote {
  border: 1px solid color-mix(in srgb, var(--crimson) 30%, var(--line-strong));
  border-left: 3px solid var(--crimson);
  background: color-mix(in srgb, var(--crimson) 5%, transparent);
}

/* 최근 바뀜의 "by 편집자"를 Sigma 피드처럼 모노로 */
html[data-preset="zerocell"] .rc-panel .rc-author,
html[data-preset="zerocell"] .rc-panel .rc-time { font-family: var(--mono); font-size: 0.72rem; }

/* ============================================================
   최근 바뀜 2줄 레이아웃 — 옛 규칙 잔재를 확실히 끊는다.
   이 패널은 그동안 세 세대의 배치(절대위치 → 84px 여백 → 3줄 격자)를
   거쳤고, 그 잔재(align-items:center · transform · right/top · grid-area)가
   새 flex 배치와 섞여 글이 가운데로 몰리고 「역사」가 세로로 쪼개졌다.
   여기서 관련 속성을 남김없이 되돌린 뒤 다시 세운다.
   ============================================================ */
.rc-panel .rc-item {
  display: flex; flex-direction: column;
  align-items: stretch;            /* ← 옛 grid의 center 상속을 끊는다 */
  justify-content: flex-start;
  gap: 4px;
  padding: 10px 15px;              /* 옛 84px 오른쪽 여백 해제 */
  text-align: left;
  position: relative;
}
.rc-panel .rc-line1,
.rc-panel .rc-line2 {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; width: 100%;
  text-align: left;
}
.rc-panel .rc-line1 { align-items: baseline; }

/* 제목: 남는 폭을 차지하고 넘치면 말줄임 */
.rc-panel .rc-title { flex: 0 1 auto; min-width: 0; }
/* 시각은 1줄 오른쪽 끝 */
.rc-panel .rc-line1 .rc-time { flex: 0 0 auto; margin-left: auto; }

/* 요약: 줄어드는 쪽은 여기 하나뿐 — 한 줄 말줄임 */
.rc-panel .rc-summary {
  flex: 1 1 auto; min-width: 0;
  display: block; margin: 0;
  -webkit-line-clamp: none; -webkit-box-orient: horizontal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 「역사」: 절대위치·변형·격자 잔재를 모두 끄고, 절대 쪼개지지 않게 */
.rc-panel .rc-hist {
  position: static; right: auto; top: auto; bottom: auto; left: auto;
  transform: none; justify-self: auto; grid-area: auto;
  flex: 0 0 auto; margin-left: auto;
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}

/* 증감 칩: 부호가 잘리지 않도록 여유 + 넘침 허용 */
.rc-panel .rc-diff {
  flex: 0 0 auto;
  padding: 1px 8px;
  overflow: visible;
  clip-path: none;
}

/* ============================================================
   제로셀 — 위 배치 위에 올리는 색·형태만 (배치는 건드리지 않는다)
   ============================================================ */

/* 패널 안쪽 목록에까지 노치를 먹이면 모서리가 항목을 깎는다 → 목록은 제외.
   노치는 바깥 상자(.wpanel/.hotsearch/.nfeed)에만 남긴다. */
html[data-preset="zerocell"] .wpanel .rc-list,
html[data-preset="zerocell"] .rc-list {
  clip-path: none;
  background-image: none;
  border-color: transparent;
}

/* 증감 칩: 초록/빨강 대신 문서 양식의 금색·진홍으로 (테마 팔레트 일치) */
html[data-preset="zerocell"] .rc-panel .rc-diff.pos {
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
html[data-preset="zerocell"] .rc-panel .rc-diff.neg {
  color: color-mix(in srgb, var(--crimson) 75%, #fff);
  background: color-mix(in srgb, var(--crimson) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--crimson) 45%, transparent);
}
html[data-preset="zerocell"] .rc-panel .rc-diff.zero {
  border: 1px solid var(--line-strong);
  background: none;
}

/* 빈 공지 패널: 머리 없이 덩그러니 뜨던 것을 옆 두 패널과 같은 높이·틀로 */
.nfeed--empty {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 22px 18px;
  color: var(--ink-soft); font-size: .88rem; text-align: center;
}

/* ============================================================
   격납고 문(로딩인트로) — 화면 전체 덮기 보강
   JS가 <body> 바로 아래로 옮겨 조상의 간섭을 없애지만, JS가 아직
   안 돌았거나 꺼진 경우에도 최대한 전체를 덮도록 못을 박는다.
   ============================================================ */
.loadintro {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;  width: 100dvw !important;
  height: 100vh !important; height: 100dvh !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important;
  transform: none !important;      /* 본문 애니메이션 상속 차단 */
  z-index: 9500;                   /* 헤더·사이드바·스크림보다 위 */
}
/* 문짝은 각각 화면 절반을 세로로 가득 */
.loadintro-half { top: 0 !important; bottom: 0 !important; height: 100% !important; }

/* ============================================================
   버튼 호버 — 배경과 글자색이 함께 바뀌는 상호작용
   가독성 원칙: 강조색은 위키마다 다르고 관리자가 아무 색이나 넣을 수 있다.
   그래서 흰/검정을 고정하지 않고, PHP가 WCAG 상대휘도로 계산해 준
   --on-accent(그 강조색 위에서 잘 읽히는 글자색)를 쓴다.
   ① 테두리형 → 호버 시 강조색으로 '채워지고' 글자는 --on-accent
   ② 채움형   → 호버 시 배경과 글자가 '맞바뀐다'(대비율이 그대로라 항상 읽힌다)
   ============================================================ */

/* 공통: 색 전환을 부드럽게 (기존 transform·shadow 전환은 유지) */
.herob-cta, .btn-primary, .slide-cta, .hero-btn, .hero-btn-primary,
.hero-btn-ghost, .cp-btn, .btn-ghost, .wiki-btn, .btn-danger {
  transition: background-color .16s ease, color .16s ease,
              border-color .16s ease, box-shadow .16s ease, transform .15s ease;
}

/* ── ① 테두리·유령형: 호버하면 강조색으로 차오른다 ── */
.cp-btn:hover, .btn-ghost:hover, .hero-btn-ghost:hover, .wiki-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent, #fff);
}
/* 안쪽 아이콘·화살표도 같이 따라오게 */
.cp-btn:hover *, .btn-ghost:hover *, .hero-btn-ghost:hover *, .wiki-btn:hover * { color: inherit; }

/* ── ② 채움형: 호버하면 배경과 글자가 맞바뀐다 ──
   대비율이 기본 상태와 수학적으로 동일해 어떤 강조색에서도 읽힌다.
   배경이 어두운 화면에서 버튼이 묻히지 않도록 강조색 테두리를 둘러 둔다. */
.herob-cta:hover, .btn-primary:hover, .slide-cta:hover, .hero-btn-primary:hover {
  background: var(--on-accent, #10131a);
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent),
              0 10px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.herob-cta:hover *, .btn-primary:hover *, .slide-cta:hover *, .hero-btn-primary:hover * { color: inherit; }

/* 키보드 사용자도 같은 신호를 받게 — 초점에도 동일 적용 */
.cp-btn:focus-visible, .btn-ghost:focus-visible, .wiki-btn:focus-visible {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff);
}
.herob-cta:focus-visible, .btn-primary:focus-visible, .slide-cta:focus-visible {
  background: var(--on-accent, #10131a); color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* 제로셀: 강조색이 진홍이라 채움형 호버 글자를 금색으로 올려 문서 양식과 맞춘다
   (진홍 위 흰색 → 흰 바탕 위 진홍이 기본 반전, 여기선 금색 테두리로 격을 맞춤) */
html[data-preset="zerocell"] .cp-btn:hover,
html[data-preset="zerocell"] .btn-ghost:hover,
html[data-preset="zerocell"] .wiki-btn:hover {
  background: var(--crimson);
  border-color: var(--gold);
  color: var(--gold);
}

/* ============================================================
   채팅 틀 — 공통 뼈대 (테마는 아래에서 색·모양만 갈아 끼운다)
   ============================================================ */
.chatbox {
  --chat-radius: 14px;
  margin: 1.4em 0; border-radius: var(--chat-radius); overflow: hidden;
  font-size: .93rem; line-height: 1.55;
}
.chat-top {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; font-weight: 800; letter-spacing: .01em;
}
.chat-top-title { flex: 1 1 auto; min-width: 0; }
.chat-side-toggle {
  flex: none; display: none; cursor: pointer;
  padding: 5px 12px; border-radius: 99px; font: inherit; font-size: .78rem;
  background: none; border: 1px solid currentColor; color: inherit;
}
.chat-main { display: flex; align-items: stretch; min-height: 240px; }
.chat-side { flex: 0 0 232px; max-width: 42%; overflow: hidden; }
.chat-side-list { display: flex; flex-direction: column; gap: 7px; padding: 12px; max-height: 460px; overflow-y: auto; }
.chat-thread { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.chat-thread-head { padding: 12px 18px; font-weight: 800; font-size: 1.02rem; }
.chat-thread-body { flex: 1 1 auto; padding: 14px 18px 18px; max-height: 460px; overflow-y: auto; }

/* 연락처 박스 */
.chatc-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  text-align: left; font: inherit; text-decoration: none;
  border: 1px solid transparent; background: none;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.chatc-av {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background-size: cover; background-position: center;
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.chatc-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chatc-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatc-prev { font-size: .78rem; opacity: .72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatc-badge { flex: none; font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 99px; }

/* 말풍선 */
.chatm-row { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; }
.chatm-row.is-me { flex-direction: row; justify-content: flex-end; }
.chatm-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background-size: cover; background-position: center;
  display: grid; place-items: center; font-weight: 800;
}
.chatm-col { display: flex; flex-direction: column; gap: 4px; max-width: 74%; min-width: 0; }
.chatm-row.is-me .chatm-col { align-items: flex-end; }
.chatm-who { font-size: .78rem; opacity: .78; padding: 0 3px; }
.chatm-bubble { padding: 10px 15px; border-radius: 13px; word-break: break-word; }
.chatm-sys {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 12px auto; font-size: .8rem; text-align: center; opacity: .8; max-width: 88%;
}
.chatm-sys-ic { opacity: .7; }
.chatm-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-size: .78rem; opacity: .6; }
.chatm-divider::before, .chatm-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .35; }
.chatm-divider:not(:has(span))::after { display: none; }

/* ============================================================
   유형 1 — 밝은 유리판
   ------------------------------------------------------------
   아래 변수만 바꾸면 색이 전부 따라옵니다(코드를 고칠 필요 없음).
   덮어쓰는 곳: 「넷위키:공통.css」 또는 「틀:이름/스타일」
   ============================================================ */
.chatbox--t1 {
  --chat-panel:      #eef0f4;   /* 연락처 칸 바탕 — 창 왼쪽 면          */
  --chat-line:       #d3d7de;   /* 테두리·구분선 — 창과 칸을 나누는 선  */
  --chat-ink:        #23262c;   /* 기본 글자색 — 제목·이름 등           */
  --chat-bubble:     #ffffff;   /* 상대 말풍선 바탕                     */
  --chat-bubble-ink: #23262c;   /* 상대 말풍선 글자 (바탕과 함께 바꾸기)*/
  --chat-me:         #e5d5ab;   /* 내 말풍선 바탕                       */
  --chat-me-ink:     #33291a;   /* 내 말풍선 글자                       */
  --chat-key:        #8e97a6;   /* 강조색 — 선택 표시·꼬리표            */
  --chat-sys:        #5a616e;   /* 시스템 알림·구분선 글자              */

  background: linear-gradient(180deg, #f4f5f7, var(--chat-panel));
  border: 1px solid var(--chat-line); color: var(--chat-ink);
  box-shadow: 0 14px 34px -22px rgba(20,24,34,.55);
}
.chatbox--t1 .chat-top      { background: rgba(255,255,255,.72); color: var(--chat-ink); border-bottom: 1px solid var(--chat-line); }
.chatbox--t1 .chat-side     { background: rgba(255,255,255,.42); border-right: 1px solid var(--chat-line); }
.chatbox--t1 .chatc-item    { background: rgba(255,255,255,.66); border-color: var(--chat-line); }
.chatbox--t1 .chatc-item:hover { background: #fff; border-color: var(--chat-key); transform: translateX(2px); }
.chatbox--t1 .chatc-item.is-on { background: #fff; border-color: var(--chat-key); box-shadow: 0 2px 10px -4px rgba(30,36,50,.3); }
.chatbox--t1 .chatc-av--none   { background: color-mix(in srgb, var(--chat-key) 45%, #fff); color: var(--chat-sys); }
.chatbox--t1 .chatc-badge      { background: color-mix(in srgb, var(--chat-key) 30%, #fff); color: var(--chat-sys); }
.chatbox--t1 .chat-thread-head { color: var(--chat-ink); border-bottom: 1px solid var(--chat-line); }
.chatbox--t1 .chatm-bubble     { background: var(--chat-bubble); border: 1px solid var(--chat-line); color: var(--chat-bubble-ink); }
.chatbox--t1 .chatm-row.is-me .chatm-bubble { background: var(--chat-me); border-color: color-mix(in srgb, var(--chat-me) 78%, #000); color: var(--chat-me-ink); }
.chatbox--t1 .chatm-av--none   { background: color-mix(in srgb, var(--chat-key) 45%, #fff); color: var(--chat-sys); }
.chatbox--t1 .chatm-sys        { color: var(--chat-sys); }

/* ============================================================
   유형 2 — 검정 테두리 + 형광 노랑
   ------------------------------------------------------------
   두꺼운 검정 선이 이 유형의 인상입니다. 선 두께는 --chat-edge 로.
   ============================================================ */
.chatbox--t2 {
  --chat-radius: 18px;
  --chat-panel:      #1b1d21;   /* 연락처 칸 바탕                        */
  --chat-line:       #000000;   /* 굵은 테두리 색 — 이 유형의 뼈대       */
  --chat-edge:       3px;       /* 테두리 두께 — 얇게 하려면 2px 등      */
  --chat-ink:        #f2f3f5;   /* 기본 글자색                           */
  --chat-bubble:     #ffffff;   /* 상대 말풍선 바탕                      */
  --chat-bubble-ink: #14150f;   /* 상대 말풍선 글자                      */
  --chat-me:         #2f6bff;   /* 내 말풍선 바탕                        */
  --chat-me-ink:     #ffffff;   /* 내 말풍선 글자                        */
  --chat-key:        #e9f24a;   /* 강조색 — 선택된 연락처·꼬리표(형광)   */
  --chat-key-ink:    #14150f;   /* 강조색 위에 얹는 글자                 */
  --chat-sys:        #9aa0ab;   /* 시스템 알림 글자                      */

  background: #16171a; border: var(--chat-edge) solid var(--chat-line); color: var(--chat-ink);
  box-shadow: 0 0 0 2px #2b2d33 inset, 0 16px 34px -20px rgba(0,0,0,.9);
}
.chatbox--t2 .chat-top     { background: #0f1012; color: #fff; border-bottom: var(--chat-edge) solid var(--chat-line); }
.chatbox--t2 .chat-top-ic  { color: var(--chat-key); }
.chatbox--t2 .chat-side    { background: var(--chat-panel); border-right: var(--chat-edge) solid var(--chat-line); }
.chatbox--t2 .chatc-item   { background: #2a2d33; border: 2px solid var(--chat-line); border-radius: 99px; font-weight: 700; }
.chatbox--t2 .chatc-item:hover { background: #3a3e46; transform: translateY(-1px); }
/* 선택됐거나 '상태' 꼬리표가 붙은 연락처는 형광색으로 튄다 */
.chatbox--t2 .chatc-item.is-on,
.chatbox--t2 .chatc-item.is-flagged { background: var(--chatc-tone, var(--chat-key)); color: var(--chat-key-ink); border-color: var(--chat-line); }
.chatbox--t2 .chatc-item.is-on .chatc-prev,
.chatbox--t2 .chatc-item.is-flagged .chatc-prev { opacity: .8; }
.chatbox--t2 .chatc-av       { border: 2px solid var(--chat-line); }
.chatbox--t2 .chatc-av--none { background: #4a4f59; color: #eef0f3; }
.chatbox--t2 .chatc-badge    { background: #1f2126; color: var(--chat-key); border: 2px solid var(--chat-line); }
.chatbox--t2 .chatc-item.is-on .chatc-badge,
.chatbox--t2 .chatc-item.is-flagged .chatc-badge { background: var(--chat-key-ink); color: var(--chat-key); }
.chatbox--t2 .chat-thread-head { color: #fff; border-bottom: 2px solid var(--chat-line); background: var(--chat-panel); }
.chatbox--t2 .chatm-bubble     { background: var(--chat-bubble); color: var(--chat-bubble-ink); border: 2px solid var(--chat-line); border-radius: 16px; font-weight: 700; }
.chatbox--t2 .chatm-row.is-me .chatm-bubble { background: var(--chat-me); color: var(--chat-me-ink); border-color: var(--chat-line); }
.chatbox--t2 .chatm-av       { border: 2px solid var(--chat-line); }
.chatbox--t2 .chatm-av--none { background: #4a4f59; color: #eef0f3; }
.chatbox--t2 .chatm-sys      { color: var(--chat-sys); }
.chatbox--t2 .chatm-who      { color: #c9ced6; }

/* 좁은 화면: 연락처는 접었다 편다 */
@media (max-width: 720px) {
  .chat-side-toggle { display: inline-block; }
  .chat-main { flex-direction: column; }
  .chat-side { flex: none; max-width: none; border-right: none !important; display: none; }
  .chatbox.is-side-open .chat-side { display: block; }
  .chat-side-list { flex-direction: row; overflow-x: auto; max-height: none; }
  .chatbox--t1 .chat-side, .chatbox--t2 .chat-side { border-bottom: 2px solid rgba(0,0,0,.3); }
  .chatc-item { width: auto; flex: 0 0 auto; }
  .chatm-col { max-width: 82%; }
}
/* 연락처를 골랐을 때 다른 사람 말풍선은 살짝 죽인다 */
.chatm-row.is-dim { opacity: .34; transition: opacity .18s; }

/* ============================================================
   패널 머리 재정비 — 실검 위젯(사진3) 양식으로 통일
   기존: 색 면 + 왼쪽 색막대 + 잘게 벌린 글자 → 촌스럽고 무거웠다
   지금: 바탕 없이 아이콘 + 굵은 제목, 오른쪽에 보조 링크/화살표.
        구분은 아래 실선 하나로만 준다.
   ============================================================ */
.hotsearch-head,
.wpanel-head,
.nfeed-head {
  background: none;
  padding: 13px 16px 11px;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -0.01em;          /* 자간 벌리기 해제 — 한글은 붙여야 읽힌다 */
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
/* 왼쪽 색막대 제거 */
.hotsearch-head::before,
.wpanel-head::before,
.nfeed-head::before { display: none; }
/* 아이콘은 강조색 원형 글리프 하나로 */
.hotsearch-ic,
.nfeed-ic,
.wpanel-ic {
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
  flex: none;
}
.wpanel-title,
.nfeed-title {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.wpanel-all,
.nfeed-all {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: 0;
  opacity: .75;
}
.wpanel-all:hover, .nfeed-all:hover { opacity: 1; }
/* 목록은 칸막이 없이 여백으로만 나눈다(사진3처럼 가볍게) */
.hotsearch-item { border-top: none; padding: 9px 16px; }
.hotsearch-list { padding: 4px 0 6px; }

/* ============================================================
   채팅 틀 — 색을 바꾸는 방법 (운영진 안내)
   ------------------------------------------------------------
   각 유형의 색은 아래 변수 몇 개로 정해집니다. 파일을 고치지 말고
   「넷위키:공통.css」나 「틀:이름/스타일」에 아래처럼 덮어쓰세요.

     .chatbox--t3 {
       --chat-panel:  #1b2030;   말풍선 뒤 판(연락처 칸) 바탕
       --chat-line:   #333a4d;   테두리·구분선
       --chat-ink:    #eef1f6;   기본 글자색
       --chat-bubble: #ffffff;   상대 말풍선 바탕
       --chat-bubble-ink:#1a1d24; 상대 말풍선 글자
       --chat-me:     #ffe9a8;   내 말풍선 바탕
       --chat-me-ink: #3a2f14;   내 말풍선 글자
       --chat-key:    #d8b45a;   강조색(선택 표시·꼬리표)
     }

   · 배경 그림은 틀에서 넣습니다:  {{채팅|유형=3|배경=우주.jpg|배경어둡기=45}}
   · 배경어둡기는 0~100 (숫자가 클수록 어두워져 글이 잘 읽힙니다)
   ============================================================ */

/* 배경 그림 공통 — 어느 유형에서나 쓸 수 있다 */
.chatbox.has-bg .chat-thread { position: relative; isolation: isolate; }
.chatbox.has-bg .chat-thread::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--chat-bg); background-size: cover; background-position: center;
}
.chatbox.has-bg .chat-thread::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(8,10,16, var(--chat-dim, 38%));
}

/* ── 유형 3 : 배경 그림 위 흰 말풍선 (명조 계열) ──
   특징 — 왼쪽 연락처는 넓은 카드, 이름은 말풍선 '위'에,
   말풍선은 크게 둥글고 흰색, 내 말은 오른쪽에 밝은 색으로. */
.chatbox--t3 {
  --chat-panel:      #e9ecf1;   /* 연락처 칸 바탕 — 창 왼쪽 면            */
  --chat-line:       #cfd5df;   /* 테두리·구분선                          */
  --chat-ink:        #23262c;   /* 기본 글자색                            */
  --chat-bubble:     #ffffff;   /* 상대 말풍선 바탕 (배경 그림 위에 뜬다) */
  --chat-bubble-ink: #1d2027;   /* 상대 말풍선 글자                       */
  --chat-me:         #f2f4f8;   /* 내 말풍선 바탕                         */
  --chat-me-ink:     #1d2027;   /* 내 말풍선 글자                         */
  --chat-key:        #c8a94e;   /* 강조색 — 선택된 연락처의 금색 기둥     */
  --chat-onbg:       #eef1f6;   /* 배경 그림 위에 얹는 글자(이름·알림)    */
  --chat-radius: 16px;          /* 창 모서리 둥글기                       */
  background: var(--chat-panel);
  border: 1px solid var(--chat-line);
  color: var(--chat-ink);
  box-shadow: 0 16px 40px -26px rgba(16,20,30,.6);
}
.chatbox--t3 .chat-top {
  background: linear-gradient(180deg, #f7f8fa, #eceff4);
  color: #23262c; border-bottom: 1px solid var(--chat-line);
}
.chatbox--t3 .chat-side { background: #dfe3ea; border-right: 1px solid var(--chat-line); }
/* 연락처 = 넓은 카드. 선택된 것은 왼쪽에 금색 기둥 */
.chatbox--t3 .chatc-item {
  background: linear-gradient(180deg,#fbfcfd,#eef1f5);
  border: 1px solid #d5dae2; border-radius: 12px; padding: 11px 12px;
  box-shadow: 0 2px 6px -3px rgba(20,26,40,.28);
}
.chatbox--t3 .chatc-item::before {
  content: ""; width: 3px; align-self: stretch; border-radius: 2px;
  background: transparent; margin-right: 2px; flex: none;
}
.chatbox--t3 .chatc-item:hover { background: #fff; border-color: #b6bece; }
.chatbox--t3 .chatc-item.is-on { background: #fff; border-color: var(--chat-key); }
.chatbox--t3 .chatc-item.is-on::before { background: var(--chat-key); }
.chatbox--t3 .chatc-av { border: 2px solid #fff; box-shadow: 0 0 0 1px #c9d0da; }
.chatbox--t3 .chatc-av--none { background: #c9d0da; color: #47505f; }
.chatbox--t3 .chatc-name { font-size: 1rem; }
.chatbox--t3 .chatc-badge { background: var(--chat-key); color: #2c2410; }
.chatbox--t3 .chat-thread-head {
  background: rgba(247,248,250,.86); color: #23262c;
  border-bottom: 1px solid var(--chat-line); font-size: 1.05rem;
}
/* 말풍선 — 이름은 위, 풍선은 크게 둥글게 */
.chatbox--t3 .chatm-who { font-size: .88rem; font-weight: 700; color: var(--chat-onbg); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.chatbox--t3 .chatm-bubble {
  background: var(--chat-bubble); color: var(--chat-bubble-ink);
  border: none; border-radius: 4px 16px 16px 16px;
  padding: 12px 17px; font-size: .95rem;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.5);
}
.chatbox--t3 .chatm-row.is-me .chatm-bubble {
  background: var(--chat-me); color: var(--chat-me-ink);
  border-radius: 16px 4px 16px 16px;
}
.chatbox--t3 .chatm-av { border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 8px -3px rgba(0,0,0,.6); }
.chatbox--t3 .chatm-av--none { background: #c9d0da; color: #47505f; }
.chatbox--t3 .chatm-sys { color: var(--chat-onbg); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.chatbox--t3 .chatm-divider { color: var(--chat-onbg); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
/* 배경이 없을 때도 읽히도록 옅은 판을 깐다 */
.chatbox--t3:not(.has-bg) .chat-thread { background: linear-gradient(180deg,#aeb7c6,#8d97a9); }

/* ============================================================
   채팅 틀 — 모바일 점검 결과 반영
   문제였던 것:
   ① 720px 이하에서 연락처가 가로 스크롤인데 항목 폭이 안 정해져 찌그러짐
   ② 말풍선 최대폭 82%가 좁은 화면에선 너무 좁아 줄바꿈이 잦음
   ③ 대화 칸 높이 460px 고정 → 작은 화면에서 화면 대부분을 먹음
   ④ 배경 그림이 모바일에서 너무 밝아 흰 글씨가 안 읽힘
   ============================================================ */
@media (max-width: 720px) {
  .chat-side-list { gap: 8px; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
  .chatc-item { width: auto; flex: 0 0 auto; min-width: 168px; max-width: 74vw; }
  .chatc-prev { max-width: 30ch; }
  .chat-thread-body { max-height: min(60vh, 420px); padding: 12px 13px 16px; }
  .chatm-col { max-width: 86%; }
  .chatm-bubble { padding: 9px 13px; }
  .chat-thread-head { padding: 10px 14px; font-size: .96rem; }
  .chatbox.has-bg .chat-thread::after { background: rgba(8,10,16, calc(var(--chat-dim, 38%) + 12%)); }
  .chatbox--t3 .chatc-item { min-width: 176px; }
}
@media (max-width: 460px) {
  .chatbox { font-size: .89rem; }
  .chatm-av, .chatbox--t3 .chatm-av { width: 32px; height: 32px; }
  .chatm-col { max-width: calc(100% - 44px); }
  .chat-top { padding: 9px 12px; }
  .chatc-av { width: 34px; height: 34px; }
}
/* 손가락으로 누르는 곳은 최소 높이를 준다(접근성 권고 44px) */
.chat-side-toggle { min-height: 34px; }
.chatc-item { min-height: 44px; }

/* ============================================================
   상단 내비·드롭다운 가독성
   문제였던 것 — 메뉴 글자가 --ink-soft(흐린 회색)라 어두운 바탕에서
   거의 묻혔고, 드롭다운 항목도 같은 회색이라 '지금 어디를 가리키는지'가
   한눈에 안 들어왔다. 아래에서 대비를 올리고 상태를 또렷하게 만든다.
   ============================================================ */

/* 메뉴 글자: 흐린 회색 → 본문색에 가깝게 + 살짝 굵게 */
.topnav .nav-link {
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  font-weight: 650;
}
.topnav .nav-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
/* 지금 보고 있는 곳 — 강조색 글자 + 아래 밑줄로 위치를 못 박는다 */
.topnav .nav-link.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 -2px 0 0 var(--accent);
  font-weight: 750;
}
/* 아이콘도 글자와 같은 밝기로 (혼자 흐리면 시선이 흩어진다) */
.topnav .nav-link svg,
.topnav .nav-link .nav-ic { opacity: .95; }

/* ── 드롭다운 패널 ── */
.navgrp-panel,
.topnav-more-panel {
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7);
}
.navgrp-panel a,
.navgrp-panel .nav-link,
.topnav-more-panel .nav-link {
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  font-weight: 600;
  border-radius: 8px;
}
/* 가리키는 항목: 강조색 글자 + 왼쪽 기둥으로 '여기'를 분명히 */
.navgrp-panel a:hover,
.navgrp-panel .nav-link:hover,
.topnav-more-panel .nav-link:hover,
.navgrp-panel a:focus-visible,
.topnav-more-panel .nav-link:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.navgrp-panel a.is-active,
.topnav-more-panel .nav-link.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 3px 0 0 0 var(--accent);
  font-weight: 750;
}

/* 워드마크(사이트 이름)도 너무 흐려 읽기 힘들었다 */
.brand-sub, .masthead .brand-tag {
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
/* 제로셀: 최근 바뀜 아이콘도 옆 두 패널과 같은 금색으로 (안 맞추면 혼자 청록) */
html[data-preset="zerocell"] .wpanel-ic { color: var(--gold); }

/* ============================================================
   채팅창 안 '연락처 박스' — 세 유형 공통 뼈대 + 가독성
   ------------------------------------------------------------
   바뀐 점
   ① 연락처 칸에 머리(제목 + 인원수)를 붙여 하나의 '상자'로 보이게
   ② 이름·미리보기 색을 opacity 대신 '변수'로 지정 — 유형마다 대비를 맞춘다
      (opacity는 배경이 어두우면 글자를 같이 죽여 흐려지는 게 문제였다)
   ③ 이름 0.95rem/700, 미리보기 0.8rem — 둘의 크기 차를 벌려 위계를 준다
   ============================================================ */
.chat-side {
  display: flex; flex-direction: column;
  flex: 0 0 244px; max-width: 44%;
}
.chat-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px 9px;
  font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  color: var(--chat-side-sub, var(--chat-ink));
  border-bottom: 1px solid var(--chat-line);
  flex: none;
}
.chat-side-label { flex: 1 1 auto; }
.chat-side-count {
  flex: none; min-width: 20px; text-align: center;
  padding: 1px 7px; border-radius: 99px;
  font-size: .72rem; font-weight: 800;
  background: color-mix(in srgb, var(--chat-key) 22%, transparent);
  color: var(--chat-side-ink, var(--chat-ink));
}
.chat-side-list { flex: 1 1 auto; }

/* 이름·미리보기 — 투명도 대신 실제 색으로 (유형별로 아래에서 값을 준다) */
.chatc-name { font-size: .95rem; font-weight: 700; color: var(--chat-side-ink, inherit); }
.chatc-prev { font-size: .8rem; opacity: 1; color: var(--chat-side-sub, inherit); }

/* ── 유형 1: 밝은 판 위 어두운 글자 ── */
.chatbox--t1 {
  --chat-side-ink: #23262c;   /* 연락처 이름 — 본문급 진한 색     */
  --chat-side-sub: #5c6473;   /* 미리보기 — 이름보다 한 단계 옅게 */
}
.chatbox--t1 .chat-side-head { background: rgba(255,255,255,.5); }

/* ── 유형 2: 검정 판 위 밝은 글자 (여기가 가장 흐렸다) ── */
.chatbox--t2 {
  --chat-side-ink: #f4f5f7;   /* 이름 — 거의 흰색이어야 읽힌다     */
  --chat-side-sub: #a8aeb9;   /* 미리보기 — 회색이되 충분히 밝게   */
}
.chatbox--t2 .chat-side-head {
  background: #121316; color: var(--chat-key);
  border-bottom: 2px solid var(--chat-line);
}
/* 형광 알약 위에서는 글자가 검정이어야 하므로 되돌린다 */
.chatbox--t2 .chatc-item.is-on .chatc-name,
.chatbox--t2 .chatc-item.is-flagged .chatc-name,
.chatbox--t2 .chatc-item.is-on .chatc-prev,
.chatbox--t2 .chatc-item.is-flagged .chatc-prev { color: var(--chat-key-ink); }

/* ── 유형 3: 밝은 카드 ── */
.chatbox--t3 {
  --chat-side-ink: #1d2027;
  --chat-side-sub: #5a6373;
}
.chatbox--t3 .chat-side-head {
  background: #d4d9e2; color: #3c4453;
  border-bottom: 1px solid #c3cad6;
}

/* 좁은 화면: 머리는 유지하되 목록만 가로로 */
@media (max-width: 720px) {
  .chat-side { flex-direction: column; }
  .chat-side-head { padding: 8px 12px; }
}

/* ============================================================
   연락처 칸 — 보여 주기 전용으로 전환
   · 대화 상대(제목=)는 목록 '맨 위'로 올라오고 '대화 중' 표가 붙는다
   · 누르는 물건이 아니므로 손 모양 커서·눌림 효과를 뺀다
     (링크를 준 항목 .is-link 만 예외로 누를 수 있다)
   ============================================================ */
.chatc-item { cursor: default; }
.chatc-item.is-link { cursor: pointer; }
.chatc-item:not(.is-link):hover { transform: none; }

/* 대화 상대를 맨 위로 — HTML을 다시 짜지 않고 배치 순서만 바꾼다 */
.chat-side-list { display: flex; flex-direction: column; }
.chatc-item.is-on { order: -1; }

/* '대화 중' 표 — 지금 이 사람과 이야기하고 있다는 신호 */
.chatc-now {
  flex: none; margin-left: auto;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--chat-key) 26%, transparent);
  color: var(--chat-side-ink, inherit);
  white-space: nowrap;
}
/* 상대 박스는 한눈에 구분되게 — 왼쪽 기둥 + 살짝 밝은 바탕 */
.chatc-item.is-on { box-shadow: inset 3px 0 0 0 var(--chat-key); }
.chatbox--t2 .chatc-item.is-on .chatc-now { background: var(--chat-key-ink); color: var(--chat-key); }
.chatbox--t3 .chatc-item.is-on { box-shadow: none; }   /* 유형3은 ::before 기둥을 이미 쓴다 */

/* 좁은 화면에서는 가로 배치라 order 가 그대로 '맨 앞'이 된다 */
@media (max-width: 720px) {
  .chat-side-list { flex-direction: row; }
}