/* 탑과 용병단 공식 사이트 — 공식 커뮤니티 틀 안의 글과 자료(안내 · 패치 노트 · 네임드 · 용병 도감 · 지원 · 개인정보처리방침 · 언론 자료)
 *
 * 2026-10-19 다시 썼다: 원작자가 「아직도 구 페이지를 사용하는 듯」이라 짚었다. 예전에는 이 파일이 밤색 띠 + 갈래 줄의 「자료 페이지」를
 * 그렸고, 커뮤니티 메뉴를 누르면 그 옛 틀로 빠져나갔다. 지금은 모든 페이지가 커뮤니티 틀(home.css 의 .cm-body · .side · .cm-main)
 * 안에 서고, 이 파일은 그 양피지 판 안의 본문만 그린다. 색 · 글꼴 이름은 site.css 의 --o- 를 쓴다(site.css · home.css 뒤에 싣는다).
 *
 * - 긴 글(.prose)은 약 68자로 끊고 시스템 글꼴 · 넉넉한 줄 간격으로 둔다. 픽셀 글꼴은 제목(h1 · h2)과 class="px" 에만 쓴다.
 *   픽셀 글꼴을 새 자리에 걸면 그 자리를 제목 태그(h1~h4)나 class="px" 로 두어야 글꼴 사본(scripts/site-assets.py font)이 그 글자를 담는다.
 * - 숫자(버전 · 층 · 날짜)는 고정폭 숫자로 쓴다. 이 게임에서 버전과 층은 주소에 가깝다.
 */

:root {
  --measure: 68ch;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 패치 노트 캡처의 상한. `scripts/crop-note-shots.py` 가 이 두 줄을 읽어
     「화면에서 40% 아래로 줄어드는 그림」을 실패시킨다. 여기가 정본이다. */
  --shot-w: 28rem;
  --shot-h: 21rem;
  --nav-h: 58px;
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); }
.cm-main { min-width: 0; }
.cm-main [id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.px { font-family: var(--o-pixel); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cm-main a:focus-visible, .cm-main button:focus-visible, .cm-main summary:focus-visible, .cm-main select:focus-visible, .cm-main input:focus-visible { outline: 2px solid var(--o-crimson); outline-offset: 2px; }

/* ── 긴 글 ── */
.prose { font-size: 16px; line-height: 1.85; max-width: var(--measure); min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-family: var(--o-pixel); font-weight: 700; font-size: 20px; line-height: 1.4; margin: 2.2rem 0 .7rem; color: var(--o-parch-ink); }
.prose h2::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 4px 0; background: var(--o-crimson); transform: rotate(45deg); vertical-align: middle; }
.prose h3 { font-size: 17px; line-height: 1.5; margin: 1.8rem 0 .4rem; }
.prose p { margin: 0 0 .9rem; }
.prose ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 18px; margin: .35rem 0; }
.prose li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 6px; height: 6px; background: var(--o-gold-deep); transform: rotate(45deg); }
.prose a, .cx-body a:not(.chip), .named-page a { color: var(--o-crimson); text-underline-offset: 3px; }
.prose a:hover { color: var(--o-crimson-hi); }
.prose strong { color: var(--o-parch-ink); }
.lede { border-left: 3px solid var(--o-crimson); padding: 2px 0 2px 16px; margin: 0 0 1.4rem; font-size: 17px; max-width: var(--measure); }
.dim { color: var(--o-parch-dim); font-size: 14px; }
.contact { background: var(--o-parch); border: 1px solid var(--o-parch-line); border-left: 3px solid var(--o-crimson); padding: 16px 20px; margin: 1rem 0 0; }
.contact > a { font-size: 18px; font-weight: 700; }
.callout { border: 1px solid var(--o-parch-line); border-left: 3px solid var(--o-gold-deep); background: var(--o-parch); padding: 14px 18px; margin: 1rem 0 0; }

/* 절 목차 — 넓은 화면은 본문 오른쪽에 붙어 따라오고, 좁으면 본문 위에 한 덩이로 선다 */
.doc-grid { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(180px, 1fr); gap: 40px; align-items: start; }
.doc-grid .doc-toc { order: 2; position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; }
.doc-grid .prose { order: 1; }
.doc-toc { background: var(--o-parch); border: 1px solid var(--o-parch-line); padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.doc-toc b { display: block; font-size: 14px; margin-bottom: 6px; }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: block; padding: 3px 0; color: var(--o-parch-ink); text-decoration: none; }
.doc-toc a:hover { color: var(--o-crimson); text-decoration: underline; }
@media (max-width: 1100px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .doc-grid .doc-toc { order: 0; position: static; max-height: none; }
  .doc-toc ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .doc-toc a { border: 1px solid var(--o-parch-line); padding: 4px 10px; background: var(--o-parch-2); }
}

/* 표 — 언론 자료의 한눈에 */
.press-facts { border-collapse: collapse; width: 100%; margin: .6rem 0 1.4rem; font-size: 15px; background: var(--o-parch); border: 1px solid var(--o-parch-line); }
.press-facts th, .press-facts td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--o-parch-line); line-height: 1.6; }
.press-facts tr:last-child th, .press-facts tr:last-child td { border-bottom: 0; }
.press-facts th { width: 7rem; font-weight: 700; white-space: nowrap; background: var(--o-parch-2); }
.press-facts a { word-break: break-all; }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: .6rem 0 1.2rem; }
.press-grid a { display: block; border: 1px solid var(--o-parch-line); overflow: hidden; background: var(--o-night); }
.press-grid a:hover { border-color: var(--o-parch-ink); }
.press-grid img { display: block; width: 100%; height: auto; }
.press-art { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; }

.tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--o-parch-line); font-size: 12px; color: var(--o-parch-dim); white-space: nowrap; }
.tag-latest { border-color: var(--o-crimson); background: var(--o-crimson); color: #fff3e0; }

/* ── 판 머리 덧줄 ── */
.cm-kicker { margin: 0 0 4px; font-size: 13px; color: var(--o-crimson); }
.note-ver { margin: 8px 0 0; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.note-ver .ver { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; }
.note-ver time { color: var(--o-parch-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
.note-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.note-jump a { font-size: 13px; color: var(--o-parch-ink); text-decoration: none; white-space: nowrap; border: 1px solid var(--o-parch-line); padding: 4px 12px; background: var(--o-parch); }
.note-jump a:hover { border-color: var(--o-parch-ink); }

/* ════ 패치 노트 한 판 ════ */
.note { font-size: 16px; line-height: 1.8; }
.note-section + .note-section { margin-top: 2rem; border-top: 1px dashed var(--o-parch-line); }
.note-section h2 { font-family: var(--o-pixel); font-size: 20px; margin: 1.6rem 0 .8rem; }
.note-section ul { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.note-section li { position: relative; padding-left: 18px; margin: .35rem 0; }
.note-section li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 6px; height: 6px; background: var(--o-crimson); transform: rotate(45deg); }
.note-fold { margin: 1.6rem 0 0; }
.note-fold > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.note-fold > summary::-webkit-details-marker { display: none; }
.note-fold > summary h2 { margin: 0; }
.note-fold > summary::after { content: ""; width: 8px; height: 8px; margin-bottom: .2em; border-right: 2px solid var(--o-parch-dim); border-bottom: 2px solid var(--o-parch-dim); transform: rotate(45deg); }
.note-fold[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; }
.fold-n { color: var(--o-parch-dim); font-size: 13px; font-family: var(--mono); }
.note-fold > ul { margin-top: 1rem; }
.note-item { margin: 0 0 1.6rem; }
.note-item h3 { font-size: 17px; margin: 0 0 .4rem; }
.note-item-shots { display: flex; flex-direction: column; gap: 1rem; }
/* 캡처는 높이 21rem 판에 담아 어느 그림이든 같은 사각형으로 놓는다 — 판 색이 앱 배경이라 남는 여백은 화면의 일부로 읽힌다 */
.note-shot { margin: 1rem 0 1.4rem; max-width: 34rem; }
.note-shot img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--shot-h); border: 1px solid var(--o-parch-line); background: #05060b; }
.note-shot figcaption { margin: 6px 0 0; color: var(--o-parch-dim); font-size: 13px; line-height: 1.55; }
@media (min-width: 1240px) {
  .note-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 0 2rem; align-items: start; }
  .note-item .note-shot { margin: .3rem 0 0; }
  /* 그림이 없는 긴 절은 두 단으로 흘린다 */
  .note-section.cols ul { max-width: none; column-count: 2; column-gap: 2.4rem; font-size: 15px; }
  .note-section.cols li { break-inside: avoid; }
}

/* ════ 네임드 ════ */
.named-page { min-width: 0; }
.named-page .lede { margin-bottom: 1.2rem; }
.named-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; }
.named-ways section { background: var(--o-parch); border: 1px solid var(--o-parch-line); border-top: 3px solid var(--o-gold-deep); padding: 14px 16px; }
.named-ways .way-event { border-top-color: #7d5fb3; }
.named-ways .way-paid { border-top-color: var(--o-crimson); }
.named-ways h2 { font-family: var(--o-pixel); margin: 0 0 6px; font-size: 16px; }
.named-ways p { margin: 0; font-size: 14px; line-height: 1.7; }
.nfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.nfilter[hidden] { display: none; }
.nfilter button, .sk-filter select, .sk-filter input { background: var(--o-parch); border: 1px solid var(--o-parch-line); color: var(--o-parch-ink); padding: 8px 14px; cursor: pointer; font-size: 14px; min-height: 40px; border-radius: 0; }
.nfilter button:hover { border-color: var(--o-parch-ink); }
.nfilter button[aria-pressed="true"] { background: var(--o-parch-ink); border-color: var(--o-parch-ink); color: var(--o-parch); font-weight: 700; }
.named-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 0 0 24px; }
.named-card { display: flex; flex-direction: column; background: var(--o-parch); border: 1px solid var(--o-parch-line); transition: border-color .2s; }
.named-card:hover, .named-card:target { border-color: var(--o-parch-ink); }
.named-card[hidden] { display: none; }
.nc-art { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--o-night); }
.nc-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.nc-how { position: absolute; left: 8px; top: 8px; z-index: 1; font-size: 12px; padding: 2px 8px; color: #fff3e0; background: #3b2d5a; border: 1px solid #7d5fb3; }
.nc-how.how-offer { background: #4a3413; border-color: var(--o-gold-deep); }
.nc-how.how-paid { background: var(--o-crimson); border-color: var(--o-crimson-hi); }
.nc-flip { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-size: 13px; padding: 6px 12px; min-height: 36px; cursor: pointer; color: var(--o-gold); background: #0a0d16dd; border: 1px solid var(--o-gold-deep); }
.nc-flip[hidden] { display: none; }
.nc-flip[aria-pressed="true"] { background: var(--o-gold); color: var(--o-night); }
.named-copy { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.named-tags { margin: 0; color: var(--o-crimson); font-size: 12px; }
.named-copy h3 { font-family: var(--o-pixel); font-weight: 700; font-size: 20px; line-height: 1.3; margin: 4px 0 6px; }
.nc-bio { margin: 0 0 10px; font-size: 14px; line-height: 1.7; }
.named-meet { margin: auto 0 0; font-size: 13px; color: var(--o-parch-dim); border-left: 2px solid var(--o-gold-deep); padding-left: 10px; line-height: 1.55; }

/* ════ 게임 안내 ════ */
.guide-index { max-width: none; }
.guide-lede { max-width: var(--measure); }
.guide-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 12px; margin: 1rem 0 0; }
.guide-group { background: var(--o-parch); border: 1px solid var(--o-parch-line); padding: 12px 14px 8px; }
.guide-group h3 { font-family: var(--o-pixel); margin: 0 0 6px; padding-bottom: 6px; font-size: 15px; border-bottom: 1px solid var(--o-parch-line); }
.guide-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0 12px; }
.prose .guide-links a, .guide-links a { display: block; padding: 5px 0; text-decoration: none; color: var(--o-parch-ink); font-size: 15px; }
.guide-links a:hover { color: var(--o-crimson); text-decoration: underline; }
.prose .note-jump a { color: var(--o-parch-ink); text-decoration: none; }
.guide-body { font-size: 16.5px; }
.guide-strip { display: none; gap: 6px; overflow-x: auto; margin: 0 0 1.2rem; padding-bottom: 4px; scrollbar-width: none; }
.guide-strip::-webkit-scrollbar { display: none; }
.guide-strip a { flex: 0 0 auto; text-decoration: none; white-space: nowrap; border: 1px solid var(--o-parch-line); padding: 6px 12px; color: var(--o-parch-ink); font-size: 14px; background: var(--o-parch); }
.guide-strip a[aria-current="page"] { color: var(--o-parch); background: var(--o-parch-ink); border-color: var(--o-parch-ink); font-weight: 700; }
.guide-steps { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; margin: 2.2rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--o-parch-line); max-width: var(--measure); }
.guide-step { display: block; text-decoration: none; border: 1px solid var(--o-parch-line); padding: 10px 14px; background: var(--o-parch); min-width: 0; color: var(--o-parch-ink); }
.guide-step-next { text-align: right; }
.guide-step span { display: block; color: var(--o-parch-dim); font-size: 12px; }
.guide-step b { display: block; font-size: 15px; margin-top: 2px; }
.guide-step:hover { border-color: var(--o-parch-ink); }
.guide-step-home { align-self: stretch; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--o-parch-ink); font-size: 14px; padding: 8px 16px; white-space: nowrap; border: 1px solid var(--o-parch-line); background: var(--o-parch-2, var(--o-parch)); }
.guide-step-home:hover { border-color: var(--o-parch-ink); }

/* ════ 용병 도감 ════ */
.cx-body { min-width: 0; }
.cx-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.cx-jump a { font-size: 13px; color: var(--o-parch-ink); text-decoration: none; white-space: nowrap; border: 1px solid var(--o-parch-line); padding: 4px 11px; background: var(--o-parch); }
.cx-jump a:hover { border-color: var(--o-parch-ink); }
.cx-grid { display: grid; gap: 14px; }
.cx-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; background: var(--o-parch); border: 1px solid var(--o-parch-line); padding: 16px; }
.cx-card:target { border-color: var(--o-crimson); }
.cx-art { width: 150px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--o-night); border: 1px solid var(--o-parch-line); }
.cx-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.cx-art-none { background: repeating-linear-gradient(135deg, var(--o-parch-2), var(--o-parch-2) 8px, var(--o-parch) 8px, var(--o-parch) 16px); }
.cx-copy { min-width: 0; font-size: 15px; line-height: 1.7; }
.cx-role { margin: 0; font-size: 12px; color: var(--o-crimson); }
.cx-copy h2 { font-family: var(--o-pixel); font-size: 22px; line-height: 1.3; margin: 2px 0 6px; display: flex; align-items: center; gap: 8px; }
.cx-copy h3 { font-family: var(--o-pixel); font-size: 15px; margin: 14px 0 4px; }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #0003; flex: 0 0 auto; }
.cx-blurb { margin: 0 0 6px; }
.cx-line, .cx-note { margin: 0 0 4px; color: var(--o-parch-dim); font-size: 14px; }
.cx-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; font-size: 14px; }
.cx-dl dt { color: var(--o-parch-dim); }
.cx-dl dd { margin: 0; min-width: 0; }
.cx-more { margin: 8px 0 4px; }
.cx-more > summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--o-parch-ink); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.chip { display: inline-block; font-size: 12px; line-height: 1.4; padding: 2px 8px; border: 1px solid var(--o-parch-line); background: var(--o-parch-2); color: var(--o-parch-ink); text-decoration: none; white-space: nowrap; }
a.chip:hover { border-color: var(--o-parch-ink); }
.chip.role { border-color: var(--o-gold-deep); }
.cx-skills, .sk-list, .syn-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.cx-skills li, .sk-row, .syn { display: grid; grid-template-columns: minmax(7.5em, max-content) minmax(0, 1fr); gap: 2px 14px; padding: 8px 10px; background: var(--o-parch-2); border: 1px solid var(--o-parch-line); font-size: 14px; line-height: 1.6; }
.cx-skills b, .sk-row b, .syn b { font-weight: 700; }
.sk-row .sk-who, .syn small { grid-column: 2; font-size: 13px; color: var(--o-parch-dim); }
.syn span + span { grid-column: 2; }
.syn > span:first-of-type { grid-column: 2; }
.sk-filter { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 0 0 14px; }
.sk-filter[hidden] { display: none; }
.sk-filter label { display: grid; gap: 4px; font-size: 13px; color: var(--o-parch-dim); }
.sk-filter .sk-q { flex: 1 1 14rem; }
.sk-filter input { width: 100%; cursor: text; }
.sk-groups { display: grid; gap: 14px; }
.sk-group[hidden], .sk-row[hidden] { display: none; }
.sk-group h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px; font-family: var(--o-pixel); font-size: 16px; }
.sk-group h3 > a { color: var(--o-parch-ink); text-decoration: none; }
.sk-group h3 > a:hover { text-decoration: underline; }
.sk-empty { color: var(--o-parch-dim); }
.cx-body > h2 { font-family: var(--o-pixel); font-size: 20px; margin: 2rem 0 .8rem; padding-bottom: 6px; border-bottom: 2px solid var(--o-parch-ink); }
.cx-body > h3 { font-family: var(--o-pixel); font-size: 16px; margin: 1.4rem 0 .4rem; }

/* 404 */
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 28rem; }
.nf-links a { display: block; padding: 12px 16px; background: var(--o-parch); border: 1px solid var(--o-parch-line); text-decoration: none; font-weight: 700; }
.nf-links a:hover { border-color: var(--o-parch-ink); }

/* ── 좁은 화면 ── */
@media (max-width: 960px) {
  .named-ways { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  :root { --nav-h: 100px; }
  .guide-strip { display: flex; }
  .note-shot img { max-height: 15.5rem; }
  .named-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .named-copy { padding: 10px 12px 12px; }
  .named-copy h3 { font-size: 18px; }
  .nc-bio { font-size: 14px; }
  .nc-flip { font-size: 12px; padding: 4px 8px; min-height: 32px; }
  .guide-steps { grid-template-columns: 1fr 1fr; }
  .guide-step-home { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .cx-card { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .cx-art { width: 96px; }
  .cx-copy h2 { font-size: 19px; }
  .cx-skills li, .sk-row, .syn { grid-template-columns: minmax(0, 1fr); }
  .sk-row .sk-who, .syn small, .syn span + span, .syn > span:first-of-type { grid-column: 1; }
  .press-art { grid-template-columns: minmax(0, 1fr); }
  .press-facts th { width: auto; white-space: normal; }
}
@media (max-width: 480px) {
  .cx-card { grid-template-columns: minmax(0, 1fr); }
  .cx-art { width: 120px; }
  .cx-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cx-dl dd { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }