/* 메뉴얼 화면(결정 BQ1~BQ4, 2026-09-28 — 기획서 §7) + 게임 화면 제목 옆 '?' 도움말(MD-11, core.helpLink).
   색은 app.css 토큰만 쓴다(다크·라이트·시스템이 함께 바뀜, 결정 AQ). 배지는 색만으로 구분하지 않고 글자('임시')를 넣는다.
   모바일 375: 가로 스크롤 없음, 분류 칩은 줄바꿈, 표는 행마다 카드, 누르는 칸 44px 이상. */

/* ---------- '?' 도움말(모든 화면 공용 — pageHead help 옵션·여관 머리) ---------- */
.tw-help { display: inline-grid; place-items: center; width: 32px; height: 32px; min-width: 32px; border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); background: transparent; font-size: var(--fs-body); font-weight: 800; line-height: 1; text-decoration: none; }
.tw-help:hover, .tw-help:focus-visible { color: var(--fg-2); border-color: var(--fg-2); }
.tw-help:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-page-head__top > .tw-help { grid-column: 3; grid-row: 1; justify-self: start; }
.tw-page-head__top > h1 { grid-row: 1; }

/* ---------- 메뉴얼 공통 ---------- */
.tw-mn { font-size: var(--fs-body); word-break: keep-all; overflow-wrap: anywhere; }   /* 한국어 낱말 중간 줄바꿈 방지(인벤토리·어빌리티 화면과 같은 방식), 긴 낱말은 anywhere로 넘침 방지 */
.tw-mn h2 { font-size: var(--fs-strong); color: var(--fg-2); }
.tw-mn .tw-hint { color: var(--muted); font-size: var(--fs-sub); }
.tw-mn-panel { gap: var(--sp-4); }
.tw-mn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 결정 BS② 2단계: '임시' 누르는 배지 → 상태 태그 '바뀔 수 있음'(.tw-tag — 누를 수 없음, 테두리 없음). 문장 안 자리만 잡는다 */
.tw-mn-badge { margin-left: var(--sp-1); vertical-align: 1px; }
.tw-mn-badge.is-soon { color: var(--muted); }

/* ---------- 첫 화면: 검색 · 처음 순서 · 분류 칩 · 장 카드 ---------- */
.tw-mn-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); min-width: 0; }
.tw-mn-search input { min-width: 0; }
.tw-mn-search .tw-btn { min-height: 44px; }
.tw-mn-results:empty { display: none; }
.tw-mn-results { display: grid; gap: var(--sp-2); }
.tw-mn-results__h { font-size: var(--fs-body); }
.tw-mn-hits { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tw-mn-hits li + li { border-top: 1px solid var(--line); }
.tw-mn-hits a { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3); min-height: 44px; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.tw-mn-hits a b { color: var(--fg-2); }
.tw-mn-hits a span { color: var(--muted); font-size: var(--fs-sub); }
.tw-mn-hits a:hover { color: var(--accent); }
.tw-mn-start, .tw-mn-cats, .tw-mn-list { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-mn-steps { display: flex; flex-wrap: wrap; gap: var(--sp-1); counter-reset: mnstep; }
.tw-mn-steps li { counter-increment: mnstep; min-width: 0; }
.tw-mn-steps a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent;
  color: var(--fg); text-decoration: none; overflow-wrap: anywhere; }
.tw-mn-steps a::before { content: counter(mnstep) "."; color: var(--muted); font-size: var(--fs-sub); }
.tw-mn-steps a:hover { border-color: var(--fg-2); }
.tw-mn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-mn-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-chip); color: var(--fg); text-decoration: none; }
.tw-mn-chips a:hover { border-color: var(--fg-2); }
.tw-mn-chips a[aria-current="true"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }   /* 지금 분류 = 인디고 선·글자(채움 없음) */
.tw-mn-list h2 small { color: var(--muted); font-size: var(--fs-sub); font-weight: 400; }
.tw-mn-cards { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tw-mn-cards li + li { border-top: 1px solid var(--line); }
.tw-mn-card { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); min-height: 44px; color: var(--fg); text-decoration: none; min-width: 0; }
.tw-mn-card:hover { color: var(--accent); }
.tw-mn-card__top { display: flex; gap: var(--sp-2); align-items: baseline; min-width: 0; }
/* 결정 CG4 D2(2026-09-29): 장 ID는 링크 글자에서 뺐다(옛 .tw-mn-card__top b · .tw-mn-pager a b 규칙 삭제). 본문 속 장 가리킴 = 장 제목 링크 */
.tw-mn-ref { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tw-mn-ref:hover { color: var(--fg-2); }
.tw-mn-card__title { color: var(--fg-2); font-weight: 700; overflow-wrap: anywhere; }
.tw-mn-card__sum { color: var(--muted); font-size: var(--fs-sub); line-height: var(--lh-loose); overflow-wrap: anywhere; }
.tw-mn-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-mn-foot { text-align: right; }

/* ---------- 장 화면 ---------- */
.tw-mn-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-sub); min-width: 0; }
.tw-mn-crumb > span:last-of-type { color: var(--fg); overflow-wrap: anywhere; min-width: 0; }
.tw-mn-crumb a:not(.tw-btn) { color: var(--fg); }
.tw-mn-back { margin-left: auto; min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); }
.tw-mn-chapter { display: grid; gap: var(--sp-4); padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.tw-mn-chapter > * { min-width: 0; }
.tw-mn-head { display: grid; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line); }
.tw-mn-head h2 { font-size: var(--fs-title); line-height: var(--lh-base); overflow-wrap: anywhere; }
.tw-mn-id { color: var(--muted); font-size: var(--fs-body); margin-right: var(--sp-1); }
.tw-mn-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-mn-summary { color: var(--fg); line-height: var(--lh-loose); }
.tw-mn-toc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-1) var(--sp-3); }
.tw-mn-toc summary, .tw-mn-basis summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--fg-2); }
.tw-mn-toc ol { display: grid; gap: 2px; padding: 0 0 var(--sp-2) var(--sp-6); list-style: decimal; }   /* 절 10개 이상: '10.'이 상자 왼쪽 밖으로 나가지 않게 */
.tw-mn-toc a { display: inline-block; padding: var(--sp-1) 0; color: var(--fg); }
.tw-mn-sec { display: grid; gap: var(--sp-2); min-width: 0; scroll-margin-top: 72px; }
.tw-mn-sec > * { min-width: 0; }
.tw-mn-sec h3 { font-size: var(--fs-strong); color: var(--fg-2); display: flex; align-items: baseline; gap: var(--sp-1); overflow-wrap: anywhere; }
.tw-mn-anchor { color: var(--faint); font-size: var(--fs-sub); text-decoration: none; padding: 0 var(--sp-1); }
.tw-mn-anchor:hover, .tw-mn-anchor:focus-visible { color: var(--fg-2); }
.tw-mn-sec p, .tw-mn-ul li { font-size: var(--fs-body); line-height: var(--lh-loose); overflow-wrap: anywhere; }
.tw-mn-summary, .tw-mn-sec p, .tw-mn-ul li, .tw-mn-box p, .tw-mn-faq details p { font-family: var(--font-prose); letter-spacing: -.01em; }   /* 결정 BU2·BV1(시안 C): 메뉴얼 본문 문장만 가변폭(제목·표·칩·링크는 고정폭) */
:is(.tw-mn-summary, .tw-mn-sec p, .tw-mn-ul li, .tw-mn-box p, .tw-mn-faq details p) :is(.tw-mn-badge, .tw-tag) { letter-spacing: 0; }   /* BU 검토 → 결정 CN1: 문장 안 '바뀔 수 있음' 태그도 시스템 글꼴(고정폭 전면 사용 폐기) */
.tw-mn-ul { display: grid; gap: var(--sp-1); padding-left: var(--sp-4); list-style: disc; }
ol.tw-mn-ul { list-style: decimal; padding-left: var(--sp-6); }
.tw-mn-box { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--line); background: transparent; }
.tw-mn-box b { font-size: var(--fs-sub); color: var(--muted); }
.tw-mn-box.is-note { border-left-color: var(--warn); }
.tw-mn-box.is-example { border-left-color: var(--edge-info); }
.tw-mn-soon { color: var(--muted); font-style: normal; }
.tw-mn-faq { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-mn-faq details + details { border-top: 1px solid var(--line); }
.tw-mn-faq summary { min-height: 44px; display: flex; align-items: center; padding: var(--sp-1) var(--sp-3); cursor: pointer; color: var(--fg-2); font-weight: 700; overflow-wrap: anywhere; }
.tw-mn-faq details p { padding: 0 var(--sp-3) var(--sp-2); }
.tw-mn-links { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-mn-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; overflow-wrap: anywhere; max-width: 100%; }
.tw-mn-link b { color: var(--muted); font-size: var(--fs-sub); }
.tw-mn-link:hover { border-color: var(--fg-2); }
.tw-mn-link.is-screen { color: var(--link); border-color: var(--line-strong); }
.tw-mn-link.is-text { border-style: dashed; color: var(--muted); }
.tw-mn-table { min-width: 0; }
.tw-mn-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
.tw-mn-table caption { text-align: left; font-weight: 700; color: var(--fg-2); padding-bottom: var(--sp-1); }
.tw-mn-table th, .tw-mn-table td { border: 1px solid var(--line); padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.tw-mn-table th { background: transparent; color: var(--fg-2); }
.tw-mn-tbadge { margin-top: var(--sp-1); }
.tw-mn-basis { border-top: 1px solid var(--line); padding-top: var(--sp-1); }
.tw-mn-basis .tw-kv { margin: var(--sp-1) 0 var(--sp-2); }
.tw-mn-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tw-mn-pager a { display: flex; align-items: center; gap: var(--sp-1); min-height: 44px; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.tw-mn-pager a[rel="next"] { justify-content: flex-end; text-align: right; grid-column: 2; }
.tw-mn-pager a:hover { border-color: var(--fg-2); }

/* ---------- 모바일: 표는 행마다 카드(머리 칸 = 굵은 제목), 가로 스크롤 없음 ---------- */
@media (max-width: 599px) {
  .tw-mn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tw-mn-table table, .tw-mn-table tbody, .tw-mn-table tr, .tw-mn-table td { display: block; width: 100%; }
  .tw-mn-table caption { display: block; }   /* 표가 block이면 table-caption은 폭 0 익명 표에 갇혀 한 글자씩 세로로 선다 */
  .tw-mn-table tr { border: 1px solid var(--line); margin-bottom: var(--sp-2); background: transparent; }
  .tw-mn-table td { border: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--sp-2); }
  .tw-mn-table td:first-child { border-top: 0; }
  .tw-mn-table td::before { content: attr(data-label); font-weight: 700; color: var(--fg-2); }
  /* 첫 칸 = 카드 제목(행 이름을 굵게, 머리 이름은 옅게) — 카드마다 같은 머리 이름이 굵게 되풀이되지 않게 */
  .tw-mn-table td:first-child { grid-template-columns: auto minmax(0, 1fr); background: transparent; color: var(--fg-2); font-weight: 700; }
  .tw-mn-table td:first-child::before { color: var(--muted); font-weight: 400; }
  .tw-mn-chapter { padding: var(--sp-2); }
  .tw-mn-pager { grid-template-columns: 1fr; }
  .tw-mn-pager a[rel="next"] { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-mn * { scroll-behavior: auto; transition: none; }
}
/* ---------- 게임소개 둘째 장 「적는 사람들」(결정 DB5, 2026-09-30 — screens_manual.js loreChapterHtml). 틀은 .tw-i-chapter(screens_info.css) 그대로 ---------- */
.tw-mn-lore { gap: var(--sp-3); }
.tw-mn-lore__head { display: grid; gap: 2px; padding: 2px 0 2px var(--sp-2); border-left: 2px solid var(--rule-v); }
.tw-mn-lore__who { font-size: var(--fs-cap); color: var(--accent); }
.tw-mn-lore__h { font-size: var(--fs-card); font-weight: 700; letter-spacing: .04em; color: var(--fg-2); margin-top: var(--sp-1); }
.tw-mn-lore__kv { display: grid; gap: var(--sp-2); }
.tw-mn-lore__kv > div { display: grid; gap: 1px; padding-left: var(--sp-2); border-left: 2px solid var(--rule-v); }
.tw-mn-lore__kv dt { font-size: var(--fs-sub); font-weight: 700; color: var(--fg-2); }
.tw-mn-lore__kv dd { margin: 0; font-size: var(--fs-sub); line-height: var(--lh-loose); color: var(--fg); overflow-wrap: anywhere; }
.tw-mn-lore details.tw-note > div { display: grid; gap: var(--sp-3); }
.tw-mn-lore__story { display: grid; gap: var(--sp-1); }
.tw-mn-lore__story h4 { font-size: var(--fs-body); font-weight: 700; color: var(--fg-2); }