/* TEXT WAR — 새 스타일(결정 CN·CQ·CR, 2026-09-29): DOS·터미널 스타일 폐기(CN1). 깔끔·심플·세련.
   원칙: 모드마다 바탕 한 가지(다크 #0f121a · 라이트 #f7f2e6 — 카드·칸·칩 바탕 없음, 격자 없음, CN2) · 구분은 외곽선만(카드 선 약 2.2:1, CN3)
   · 강조는 색만(인디고 강조, CQ1) · 한 줄 2~3개(CN5) · 모서리 16·8·3px 세 가지(CQ15) · 칩 3px 명판 · 카드 제목 13px 굵게 자간 .04em(S4)
   · 라벨 왼쪽·값 오른쪽 + 값 칸 세로선(가로 줄 없음, CQ10) · 한 묶음 안 색 세로선은 없거나 최대 1개(나머지는 값 글자 색, CR15)
   · 주 버튼 인디고 채움(유일한 채움)·못 누름 흐리게·지금 탭 인디고 밑줄 · 시스템 글꼴 · 글자 12px 이상 · 대비 4.5:1 · 누름 44px.
   값의 원본: docs/ui_shots_20260929_cn_style/S7_final/style.css(확정 시안 v3) + CR15_result/mock.html(사냥 결과 확정안 CR17).
   공용 토큰·부품 이름표: 이 파일 '=== 영역: 공통' 과 '=== 영역: CN 새 부품' (화면 갈래는 여기 이름만 쓴다). 옛 DOS 토큰(--phos·--surface·--inv-bg …)은
   새 값의 별칭으로만 남겼다(화면 CSS 가 아직 쓰는 곳이 있어서 — 화면 갈래에서 새 이름으로 옮긴 뒤 정리).
   영역 소유(병렬 개편): '=== 영역: … ===' 표지 주석을 따른다. 표지 없는 곳과 공통 영역은 공용 기반(1단계). */

/* ================= 색 토큰: 다크(S3 남먹 바탕) ================= */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f121a;                                                        /* 유일한 바탕(CN2) */
  --fg: #dde2ea; --fg-2: #f4f6f9; --muted: #9aa3b4; --faint: #8a93a4;   /* 바탕 대비 14.4 · 17.3 · 7.4 · 6.1 */
  --line: #464e61;         /* 카드·정체성·전투 카드 외곽선 2.25:1 */
  --line-strong: #646d83;  /* 칩·보조 버튼·입력 선 3.6:1 */
  --line-hover: #8a93a4;   /* 누를 수 있는 것 위에 올렸을 때 선 */
  --rule: #252b38;         /* 칸 안 가는 줄(장식) 1.3:1 */
  --rule-v: #323a4b;       /* 값 칸 왼쪽 가는 세로선(장식) 1.6:1 */
  --accent: #a5adff; --accent-hot: #c7ccff; --accent-press: #8791f0;   /* 인디고 강조 8.9:1 */
  --gold: #e8c268; --ok: #6fd69a; --bad: #ff7b7b; --warn: #e8c268;
  --me: #a5adff; --foe: #ff8f8f; --me-line: #787eba; --foe-line: #b76a6c;   /* CQ18 전투 나 = 인디고 · 상대 = 빨강(외곽선 4.9 · 4.7:1) */
  --hp: #f06b6b; --mp: #6f95ff; --stamina: #a5adff; --health: #6fd69a; --track: #252b38;
  /* 등급(확정 매핑: 일반 흰 · 고급 녹 · 희귀 파 · 영웅 황금 · 전설 빨강). 희귀는 결정 CR10 으로 청록 쪽(인디고 강조와 구분, 9.4:1) [임시 값] */
  --g-normal: #f4f6f9; --g-advanced: #6fd69a; --g-rare: #45c9d6; --g-heroic: #e8c268; --g-legendary: #ff7272;
  /* 속성 8색(CK17 → S7 조정) */
  --el-FIRE: #ff8f57; --el-COLD: #6fd3ff; --el-LIFE: #6fdc8e; --el-STEEL: #b7c3cf; --el-EARTH: #d8ab66; --el-HOLY: #f4e39a; --el-DARK: #c39cff; --el-NONE: #a9adb4;
  --fx-poison: #e08ae8;
  --btn-primary-bg: #a5adff; --btn-primary-fg: #0f121a; --btn-primary-press: #8791f0;   /* 유일한 채움(주 버튼) 8.9:1 */
  --focus: #c7ccff;
  --pop-bg: rgb(15 18 26 / .9); --pop-shadow: 0 10px 30px rgb(0 0 0 / .45);   /* ⓘ 팝오버·드롭다운(떠 있는 겹 칸 — CN2 칸 바탕 대상 아님, CL3 약간 투명) */
  --scrim: #000000b3;
  --stone-me-hi: #eef0ff; --stone-me-lo: #2f3680; --stone-foe-hi: #ffe2e2; --stone-foe-lo: #6a0c0c;
}
/* ================= 색 토큰: 라이트(S3 상아 바탕) ================= */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg: #f7f2e6;
    --fg: #2a2722; --fg-2: #0f0d0a; --muted: #5e574b; --faint: #6a6254;
    --line: #a99f8b; --line-strong: #8a8170; --line-hover: #5e574b; --rule: #e0d7c5; --rule-v: #d3c9b4;
    --accent: #4338ca; --accent-hot: #3730a3; --accent-press: #3730a3;
    --gold: #855700; --ok: #137a3a; --bad: #c42020; --warn: #855700;
    --me: #4338ca; --foe: #b01e1e; --me-line: #4338ca; --foe-line: #b01e1e;
    --hp: #d93636; --mp: #2f5fe0; --stamina: #4338ca; --health: #1f8a47; --track: #e6ddcb;
    --g-normal: #0f0d0a; --g-advanced: #137a3a; --g-rare: #0b7285; --g-heroic: #855700; --g-legendary: #c42020;
    --el-FIRE: #a33500; --el-COLD: #006294; --el-LIFE: #176a2e; --el-STEEL: #4b5968; --el-EARTH: #7a5200; --el-HOLY: #6b5600; --el-DARK: #6a3db8; --el-NONE: #5a5a5a;
    --fx-poison: #8e2a9c;
    --btn-primary-bg: #4338ca; --btn-primary-fg: #ffffff; --btn-primary-press: #3730a3;
    --focus: #4338ca;
    --pop-bg: rgb(247 242 230 / .9); --pop-shadow: 0 10px 30px rgb(40 30 10 / .14);
    --scrim: #1a1a1a99;
    --stone-me-hi: #e3e5ff; --stone-me-lo: #2a2380; --stone-foe-hi: #ffd9d9; --stone-foe-lo: #6a0000;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f2e6;
  --fg: #2a2722; --fg-2: #0f0d0a; --muted: #5e574b; --faint: #6a6254;   /* 13.3 · 17.4 · 6.4 · 5.4 */
  --line: #a99f8b; --line-strong: #8a8170; --line-hover: #5e574b; --rule: #e0d7c5; --rule-v: #d3c9b4;   /* 2.34 · 3.45 · 장식 */
  --accent: #4338ca; --accent-hot: #3730a3; --accent-press: #3730a3;   /* 7.1:1 */
  --gold: #855700; --ok: #137a3a; --bad: #c42020; --warn: #855700;
  --me: #4338ca; --foe: #b01e1e; --me-line: #4338ca; --foe-line: #b01e1e;
  --hp: #d93636; --mp: #2f5fe0; --stamina: #4338ca; --health: #1f8a47; --track: #e6ddcb;
  --g-normal: #0f0d0a; --g-advanced: #137a3a; --g-rare: #0b7285; --g-heroic: #855700; --g-legendary: #c42020;   /* 희귀 청록 5.0:1(CR10) [임시 값] */
  --el-FIRE: #a33500; --el-COLD: #006294; --el-LIFE: #176a2e; --el-STEEL: #4b5968; --el-EARTH: #7a5200; --el-HOLY: #6b5600; --el-DARK: #6a3db8; --el-NONE: #5a5a5a;
  --fx-poison: #8e2a9c;
  --btn-primary-bg: #4338ca; --btn-primary-fg: #ffffff; --btn-primary-press: #3730a3;   /* 7.9:1 */
  --focus: #4338ca;
  --pop-bg: rgb(247 242 230 / .9); --pop-shadow: 0 10px 30px rgb(40 30 10 / .14);
  --scrim: #1a1a1a99;
  --stone-me-hi: #e3e5ff; --stone-me-lo: #2a2380; --stone-foe-hi: #ffd9d9; --stone-foe-lo: #6a0000;
}

/* ================= 역할 별칭(테마를 따라옴) — 옛 DOS 토큰 이름은 새 값의 별칭으로만(CN2: 칸 바탕 = --bg 하나) ================= */
:root {
  --link: var(--accent); --info: var(--accent); --boost: var(--accent); --sel: var(--accent); --title: var(--fg-2);
  --btn-primary-line: var(--btn-primary-bg); --pop-line: var(--line-strong); --pop-fg: var(--fg);
  /* 옛 이름 → 새 값(화면 CSS 가 새 이름으로 옮기면 지운다) */
  --text: var(--fg); --strong: var(--fg-2);
  --surface: var(--bg); --surface-2: var(--bg); --panel: var(--bg); --panel-2: var(--bg);   /* 옛 카드·패널·hover 바탕 → 바탕 한 가지 */
  --line-2: var(--line); --slot-line: var(--line);
  --career: var(--accent); --count: var(--gold); --win: var(--accent); --loss: var(--bad); --draw: var(--warn);   /* 승리 인디고 · 패배 빨강(CR16) */
  --me-track: var(--bg); --foe-track: var(--bg);
  --inv-bg: var(--btn-primary-bg); --inv-fg: var(--btn-primary-fg);   /* 옛 '반전 막대' 선택 = 인디고(화면 갈래에서 선·글자 색 강조로 옮김) */
  --phos: var(--accent); --phos-hot: var(--accent-hot); --phos-slot: var(--line-strong); --phos-track: var(--track); --phos-edge: var(--line);   /* 옛 형광 녹 → 인디고 */
  --fx-burn: var(--el-FIRE); --fx-bleed: var(--bad); --fx-slow: var(--el-COLD); --fx-dark: var(--el-DARK); --fx-earth: var(--el-EARTH); --fx-holy: var(--el-HOLY);
  --tint-ok: transparent; --tint-bad: transparent; --tint-warn: transparent; --tint-info: transparent;   /* 덧칠 없음(CN2) */
  --edge-ok: color-mix(in srgb, var(--ok) 60%, var(--line)); --edge-bad: color-mix(in srgb, var(--bad) 60%, var(--line));
  --edge-warn: color-mix(in srgb, var(--warn) 60%, var(--line)); --edge-info: color-mix(in srgb, var(--accent) 60%, var(--line));
  --rank-1: var(--gold); --rank-2: var(--fg); --rank-3: var(--el-EARTH);   /* 랭킹 1~3위 */
  /* 속성 표지(attr.js attrTag) 역할 토큰 */
  --attr-fire: var(--el-FIRE); --attr-cold: var(--el-COLD); --attr-life: var(--el-LIFE); --attr-steel: var(--el-STEEL);
  --attr-earth: var(--el-EARTH); --attr-holy: var(--el-HOLY); --attr-dark: var(--el-DARK); --attr-none: var(--el-NONE);
  /* 등급 색 공통 토큰(화면별 등급 클래스는 이것만 쓴다). 레플리카 색은 결정 대기 — 본문 색 */
  --grade-common: var(--g-normal); --grade-uncommon: var(--g-advanced); --grade-rare: var(--g-rare); --grade-heroic: var(--g-heroic);
  --grade-legendary: var(--g-legendary); --grade-relic: var(--g-normal); --grade-relic-weight: 800; --grade-replica: var(--fg);
}

/* ================= 모양·글자·배치 토큰(테마 선택자 없이 :root 에만 — 폭별 @media 가 이기게) ================= */
:root {
  /* 모서리 세 가지(CQ15): 카드 16 · 안쪽 칸·버튼 8 · 칩 3 */
  --radius: 16px; --radius-sm: 8px; --radius-btn: 8px; --radius-chip: 3px; --bw: 1px; --bar-h: 4px;
  /* 글자(시스템 글꼴만 — CSP 'self'). 역할 이름 그대로, 값은 S7. 12px 미만 금지 — SVG 안 좌표 글자만 예외 */
  --font: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, sans-serif;
  --font-num: var(--font);
  --font-prose: var(--font);                                   /* 옛 '긴 글 가변폭' — 이제 전부 같은 시스템 글꼴 */
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;   /* 코드 조각만(옛 '고정폭 전면 사용' 폐기) */
  --fs-title: 19px;                /* 화면 제목 */
  --fs-section: 16px;              /* 구역 제목(화면 전용 큰 소제목) */
  --fs-strong: 15px;               /* 강조 본문(항목 이름·전투 카드 이름) */
  --fs-body: 14px;                 /* 본문(기본) */
  --fs-sub: 13px;                  /* 보조(설명 줄·메타) */
  --fs-cap: 12px;                  /* 캡션·칩(최소) */
  --fs-bignum: 24px;               /* 큰 수치·결과 큰 글자(CR16) */
  --fs-card: 13px; --fs-value: 14px; --fs-label: 12px; --fs-pop: 13px; --fs-gain: 17px;   /* 카드 제목(S4) · 값 · 라벨 · 팝오버(CL3) · 결과 3칸 값 */
  /* 옛 이름 = 새 역할의 별칭 */
  --fs-xs: var(--fs-cap); --fs-sm: var(--fs-sub); --fs-md: var(--fs-body); --fs-lg: var(--fs-strong); --fs-xl: var(--fs-title); --fs-num: var(--fs-bignum);
  --lh-tight: 1.25; --lh-base: 1.4; --lh-loose: 1.5;
  --fw-regular: 400; --fw-strong: 600; --fw-title: 700; --fw-card: 700; --fw-value: 600;
  --ls-title: -.01em; --ls-card: .04em;
  /* 간격: 4px 격자(4·8·12·16·24·32) + S7 카드 밀도(S4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --pad: 12px; --pad-y: 8px; --gap: 10px; --col-gap: 8px; --cell-py: 5px; --deco-pl: 6px;
  --disabled-opacity: .38;
  --motion-rise: .18s;             /* '더 보기' 펼침(CR5) — 움직임 줄이기 설정이면 없음 */
  /* 본문 폭: 기본 한 열 600 · 넓은 화면 예외 960(.tw-layout-wide) · 전투·사냥 880(.tw-layout-battle, 결정 CR12 [임시]) */
  --content-w: 600px;
  --content-w-wide: 960px;
  --content-w-battle: 880px;
  --gutter: 12px;                  /* 360px 기기에서 본문 336px */
  --ember-period: 1.6s;            /* 전설 불씨 주기 통일값 */
}
@media (min-width: 600px) { :root { --gutter: 16px; } }

/* ---------- 기본 ---------- */
* { box-sizing: border-box; }
html {
  font-family: var(--font);
  font-size: var(--fs-body); line-height: var(--lh-base); background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
}
body { margin: 0; background: var(--bg); }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b, strong { font-weight: 700; color: var(--strong); }
small { font-size: var(--fs-cap); color: var(--muted); font-weight: 400; }
em { font-style: normal; }
code, pre, kbd, samp { font-family: var(--font-mono); }
dd, progress + span { font-variant-numeric: tabular-nums; }
.tw-icon { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.tw-missing { color: var(--faint); }
.tw-unknown { color: var(--warn); }
.tw-muted { color: var(--muted); }
.tw-gold { color: var(--gold) !important; }
.tw-career { color: var(--career) !important; }
.tw-sub { color: var(--muted); font-size: var(--fs-sub); font-weight: 400; }
.tw-hint { color: var(--muted); font-size: var(--fs-sub); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }   /* 키보드 초점 한 규칙 — 공용 부품은 따로 덮어쓰지 않는다 */
.tw-skip { position: absolute; left: 8px; top: -80px; z-index: 60; background: var(--bg); color: var(--accent); border: var(--bw) solid var(--accent); border-radius: var(--radius-btn); padding: 8px 12px; }
.tw-skip:focus { top: 8px; }

/* ---------- 상단: 쌍검 + 도트 워드마크(로고 모양 그대로 — CN1·CL1), 메뉴(상자 없음) ---------- */
/* z-index 42(결정 BS② 1단계): 상단바 안의 드롭다운(.tw-panel)이 채팅 패널(40)·채팅 버튼(35)·인벤토리 시트(38) 위에 뜨게.
   홀로그램(45)·시트(50)·토스트(55)·팝오버(1000)보다는 아래. 상단바는 고정이 아니라 본문을 덮지 않는다. */
.tw-topbar { position: relative; z-index: 42; background: var(--bg); border-bottom: var(--bw) solid var(--line); }
.tw-top-inner { max-width: calc(var(--content-w) + 2 * var(--gutter)); margin: 0 auto; padding: 8px var(--gutter); min-height: 56px; display: flex; align-items: center; gap: 8px; }   /* 머리 폭 = 본문 폭 */
@media (min-width: 600px) { .tw-top-inner { min-height: 60px; } }
/* 로고: SVG·크기·빛 번짐 규칙은 9/27 그대로(CL1). 색만 인디고(결정 CQ16 — 다크 #a5adff·라이트 #4338ca = 강조 인디고, 누를 때 한 단계).
   누름 영역 44px(결정 CR10 — 모양은 그대로, 링크 높이만 44px). 로고 색은 --brand·--brand-hot 두 토큰으로만 정한다. */
.tw-brand { --brand: var(--accent); --brand-hot: var(--accent-hot); display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--brand); text-decoration: none; padding: 4px 2px; }
.tw-brand__icon { width: 26px; height: 26px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand) 55%, transparent)); }
.tw-brand__word { height: 17px; width: auto; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--brand) 60%, transparent)); }
.tw-brand:hover { color: var(--brand-hot); }
/* 5개 최상위 메뉴: 상자 없음·한 줄. 좁으면 메뉴 줄만 가로로 넘긴다(페이지 전체 가로 스크롤 없음). */
.tw-menu { margin-left: auto; display: flex; align-items: center; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.tw-menu::-webkit-scrollbar { display: none; }
.tw-menu__trigger { flex: none; font: inherit; font-size: var(--fs-strong); font-weight: 600; min-height: 44px; padding: 6px 9px; background: none; border: 0; color: var(--fg); cursor: pointer; white-space: nowrap; }
.tw-menu__trigger:not(.is-icon)::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .7; }
.tw-menu__trigger:hover { color: var(--fg-2); }
.tw-menu__trigger[aria-expanded="true"] { color: var(--accent); }
.tw-menu__trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.tw-menu__trigger.is-icon { display: inline-grid; place-items: center; width: 44px; padding: 0; }
.tw-menu__trigger.is-icon .tw-icon { width: 21px; height: 21px; }
/* 좁은 화면: 브랜드와 메뉴를 같은 줄에 둔다. 메뉴 글자 크기는 줄이지 않는다(한 줄 메뉴 계약 v1). 간격·화살표만 줄이고, 그래도 넘치면 메뉴 줄만 가로로 넘긴다. */
@media (max-width: 420px) {
  .tw-top-inner { gap: 4px; padding-inline: 8px; }
  .tw-brand { gap: 6px; flex: none; }
  .tw-brand__icon { width: 20px; height: 20px; }
  .tw-brand__word { height: 12px; }
  .tw-menu__trigger { padding: 6px 3px; }
  .tw-menu__trigger:not(.is-icon)::after { width: 5px; height: 5px; margin-left: 3px; }
  .tw-menu__trigger.is-icon { width: 34px; }
}
@media (max-width: 380px) {   /* 360px 기기에서 5개 메뉴가 가로 이동 없이 들어가게 */
  .tw-brand { gap: 5px; }
  .tw-menu__trigger:not(.is-icon)::after { width: 4px; height: 4px; margin-left: 2px; }
  .tw-menu__trigger.is-icon { width: 32px; }
}
/* 하위 메뉴(결정 AM): 누른 메뉴 바로 아래에 떠 있는 드롭다운(떠 있는 겹 칸 — 불투명 바탕 + 선 + 부드러운 그림자). 위치(left)는 app.js placePanel. */
.tw-panels { position: relative; max-width: calc(var(--content-w) + 2 * var(--gutter)); height: 0; margin: 0 auto; padding: 0 var(--gutter); }
.tw-panel {
  position: absolute; top: 4px; left: 0; z-index: 40; width: max-content; min-width: 160px; max-width: min(300px, calc(100vw - 16px));
  max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 0;
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); display: grid; grid-template-columns: 1fr;
  box-shadow: var(--pop-shadow);
  transform-origin: top left; animation: tw-pop .12s ease-out;
}
@keyframes tw-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tw-panel { animation: none; } }
.tw-panel hr { grid-column: 1 / -1; width: 100%; border: 0; border-top: var(--bw) solid var(--rule); margin: 3px 0; }
/* 줄 높이 34px·좌우 12px(결정 AM2). 터치 기기(손가락)만 40px */
.tw-panel a, .tw-soon, .tw-sub, .tw-logout { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px; font: inherit; font-size: var(--fs-body); color: var(--fg); text-decoration: none; background: none; border: 0; text-align: left; overflow: hidden; white-space: nowrap; }
@media (pointer: coarse) { .tw-panel a, .tw-soon, .tw-sub, .tw-logout { min-height: 40px; } }
.tw-panel a:hover, .tw-panel a:focus-visible, .tw-sub:hover, .tw-sub:focus-visible, .tw-logout:hover { color: var(--accent); outline: 0; }
.tw-panel a { justify-content: flex-start; border-left: 2px solid transparent; }
.tw-panel a:hover, .tw-panel a:focus-visible { border-left-color: var(--accent); }
/* 지금 보고 있는 화면의 메뉴 항목(app.js markCurrentMenu가 aria-current="page"): 굵게 + 인디고 글자 + 왼쪽 2px 선 */
.tw-panel a[aria-current="page"] { font-weight: 700; color: var(--accent); border-left-color: var(--sel); }
.tw-soon { color: var(--faint); cursor: default; }
.tw-soon small { font-size: var(--fs-cap); color: var(--faint); white-space: nowrap; }
.tw-sub { cursor: pointer; justify-content: flex-start; color: var(--fg); }
.tw-sub[aria-expanded="true"] { color: var(--accent); }
.tw-menu-hunts { display: contents; }   /* 결정 AN1: 전투 메뉴의 사냥터 링크들을 다른 항목과 같은 줄 규칙으로 */
.tw-subpanel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; padding-left: 6px; border-left: var(--bw) solid var(--rule-v); margin: 0 0 2px 12px; }
.tw-logout { color: var(--bad); cursor: pointer; justify-content: flex-start; }

/* === 영역: 홈·홀로그램 — 묶음 4 소유(여기부터 '영역: 공통' 표지 전까지) === */
/* 홈: 영역 순서·종류·aria-label은 그대로, 각 영역을 카드로. 보이는 영역 제목은 '공지사항'만 — 나머지는 작은 라벨(.tw-home-card__key). */
/* 결정 CN(갈래 C): 홈 칸 = 공용 카드 모양(바탕 없음·외곽선 --line·모서리 16·안쪽 여백 S7). 공지 왼쪽 3px 띠 없음(CR15) — 제목은 카드 제목(S4) */
.tw-home-notice, .tw-home-row, .tw-home-log { background: transparent; border: var(--bw) solid var(--line); border-radius: var(--radius); padding: var(--pad-y) var(--pad) 11px; font-size: var(--fs-body); min-width: 0; }
@media (min-width: 600px) { .tw-home-notice, .tw-home-row, .tw-home-log { padding: 10px 16px 14px; } }
.tw-home-notice { display: grid; gap: 6px; padding-bottom: var(--pad-y); }
.tw-home-notice__line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tw-home-notice__label { flex: none; font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); color: var(--fg-2); }
.tw-home-notice__line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* [확정 AP1 D11 A] 출시 버닝은 공지 카드 안 두 번째 줄 */
.tw-home-notice__burn { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-sub); padding-top: 6px; border-top: var(--bw) solid var(--rule); }
.tw-home-gear, .tw-home-vitals { padding: 2px 2px 12px; border-bottom: var(--bw) solid var(--rule); }
.tw-home-vitals { display: grid; gap: 6px; }
.tw-home-row { display: grid; gap: 6px; align-content: start; }
.tw-home-row__key { color: var(--fg-2); }
/* 칸 이름(도시·세계지도·인기글·최근 소식) = 카드 제목 S4(13px 굵게 자간 .04em) */
.tw-home-card__key { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); line-height: var(--lh-tight); }
.tw-home-card__lead { color: var(--fg-2); overflow-wrap: anywhere; }
/* 도시 카드 3칸 타일(서버 값만): 값 칸 세로선(장식 --rule-v, CQ10 가로 줄 없음), 값은 한 줄 말줄임 */
.tw-home-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 4px; }
.tw-home-tiles > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); }
.tw-home-tiles dt { font-size: var(--fs-label); color: var(--muted); }
.tw-home-tiles dd { color: var(--fg-2); min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-value); font-weight: var(--fw-value); }
.tw-home-tiles dd .tw-chip { margin-top: 2px; }
.tw-home-log { display: grid; gap: 4px; }
.tw-home-log p { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tw-home-log__time { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.tw-legal { font-size: var(--fs-cap); color: var(--faint); padding: 6px 2px 0; }
/* 최하단 홀로그램(결정 CN1: 옛 스캔라인·빛 번짐 없앰) — 떠 있는 작은 알림, 약 1초 */
.tw-holo { position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; max-width: calc(100% - 28px);
  font-size: var(--fs-cap); line-height: 1.4; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent);
  border: var(--bw) solid var(--line-strong); border-radius: 999px; background: var(--pop-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--pop-shadow); opacity: 0; pointer-events: none; }
.tw-holo.is-on { animation: tw-holo 1.2s ease-in-out forwards; }
@keyframes tw-holo { 0% { opacity: 0; transform: translate(-50%, 6px); } 18% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .tw-holo.is-on { animation: none; opacity: 1; } }
.tw-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-profile-card__name { font-size: var(--fs-section); }
.tw-profile-card__name::before { content: none !important; }
.tw-stamina__plus { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--phos-slot); border-radius: var(--radius-btn); background: none; color: var(--phos); cursor: pointer; }
.tw-stamina__plus .tw-pixel { width: 16px; height: auto; }
.tw-stamina__plus:hover { border-color: var(--accent); }
.tw-modal__body { padding: 12px 14px; font-size: var(--fs-body); }

/* === 영역: 공통 — 공용 기반(결정 CN 1단계) === */
/* ---------- 본문 공통 ---------- */
/* D4: 본문 한 열 600px(+거터). 넓은 화면 예외는 화면 뿌리에 .tw-layout-wide를 달면 ≥760px 720px, ≥1024px 960px.
   지금 쓰는 곳(2026-09-28 코드 기준): 도감·거래소(아래 :has 자동) · 창고(결정 AY2, screens_storage.js) · 이동(결정 BJ9, screens_travel.js) — 목록은 docs/UI_COMPONENTS_20260928.md 3-17
   (2026-09-29 BS② 1단계 확인: + 길드(BN)·편지(BO)·로그(BO)·랭킹(BP). 기록 비교(CA2)는 600 안에서 두 열 — 예외 아님)
   결정 CR12: 전투·사냥 화면은 .tw-layout-battle(≥900px 에서 880px [임시], 두 전투 카드 좌우 — CN11). 여백 최소. */
.tw-content { width: 100%; max-width: calc(var(--content-w) + 2 * var(--gutter)); margin: 0 auto; padding: 14px var(--gutter) 96px; display: grid; gap: var(--sp-3); outline: none; }
/* 결정 CI4(2026-09-29): 채팅 버튼(오른쪽 아래 고정, screens_info.css .tw-chat-fab)이 끝까지 스크롤한 화면의 본문 마지막 줄을 가리지 않게
   본문 아래 여백 = 버튼 아래 띄움 + 버튼 높이 + 여유 20px(넓은 화면 18 + 56 + 20 = 94 · ≤420px 12 + 48 + 20 = 80), 옛 96px보다 작아지지 않게.
   scrollIntoView(결과·오류 상자로 옮겨 보이기)도 같은 여백만큼 위에 멈춘다(scroll-padding-bottom). */
:root { --chat-clear: 94px; scroll-padding-bottom: calc(var(--chat-clear) + env(safe-area-inset-bottom)); }
@media (max-width: 420px) { :root { --chat-clear: 80px; } }
.tw-content { padding-bottom: calc(max(96px, var(--chat-clear)) + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { .tw-content:has(.tw-layout-wide, .tw-cx-body, [data-ct-root="exchange"]) { max-width: calc(720px + 2 * var(--gutter)); } }
@media (min-width: 1024px) { .tw-content:has(.tw-layout-wide, .tw-cx-body, [data-ct-root="exchange"]) { max-width: calc(var(--content-w-wide) + 2 * var(--gutter)); } }
@media (min-width: 900px) { .tw-content:has(.tw-layout-battle) { max-width: calc(var(--content-w-battle) + 2 * var(--gutter)); } }
/* 결정 BU6·BS② 1단계: 넓은 화면 예외일 때 머리(브랜드·메뉴)와 드롭다운 기준도 본문 폭에 맞춘다. 폰(760 미만)은 원래 같은 폭 */
@media (min-width: 760px) { .tw-shell:has(.tw-content :is(.tw-layout-wide, .tw-cx-body, [data-ct-root="exchange"])) :is(.tw-top-inner, .tw-panels) { max-width: calc(720px + 2 * var(--gutter)); } }
@media (min-width: 1024px) { .tw-shell:has(.tw-content :is(.tw-layout-wide, .tw-cx-body, [data-ct-root="exchange"])) :is(.tw-top-inner, .tw-panels) { max-width: calc(var(--content-w-wide) + 2 * var(--gutter)); } }
@media (min-width: 900px) { .tw-shell:has(.tw-content .tw-layout-battle) :is(.tw-top-inner, .tw-panels) { max-width: calc(var(--content-w-battle) + 2 * var(--gutter)); } }
/* 넓은 화면 카드 두 열(CN5 빈 공간 줄이기 — 넓은 화면 예외(.tw-layout-wide·.tw-layout-battle) 안에서만, 600px 한 열 본문에서는 한 열). 휴대폰은 한 열 그대로 */
.tw-cols { display: grid; gap: var(--gap); align-items: start; min-width: 0; }
@media (min-width: 900px) { :is(.tw-layout-wide, .tw-layout-battle) .tw-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* 화면 제목(D2): 가운데 굵은 제목, 칩·보조 버튼은 그 아래 가운데 줄 */
.tw-title { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0; text-align: center; min-width: 0; }
.tw-title h1 { flex: 1 0 100%; font-size: var(--fs-title); font-weight: var(--fw-title); letter-spacing: var(--ls-title); line-height: var(--lh-tight); color: var(--title); overflow-wrap: anywhere; }
/* 카드(구역): 바탕 없음 · 외곽선 --line(2.2:1) · 모서리 16 · 제목 S4(13px 굵게 자간 .04em). 옛 제목 앞 '■' 장식 없음 */
.tw-card { background: transparent; border: var(--bw) solid var(--line); border-radius: var(--radius); padding: var(--pad-y) var(--pad) 11px; display: grid; gap: var(--gap); min-width: 0; }
@media (min-width: 600px) { .tw-card { padding: 10px 16px 14px; } }
.tw-card h2, .tw-card__title { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); line-height: var(--lh-tight); color: var(--fg-2); display: flex; align-items: center; gap: 6px; min-width: 0; }
.tw-card h3 { font-size: var(--fs-sub); color: var(--muted); }
/* 카드 머리 한 줄: 제목 · ⓘ · (오른쪽) 곁말·링크. ⓘ 는 보이는 28px, 누름 44px(위아래 음수 여백) */
.tw-card__head { display: flex; align-items: center; gap: 2px; min-height: 30px; min-width: 0; }
.tw-card__head .tw-tip__btn { margin-block: -8px; min-width: 40px; margin-inline: -4px; }   /* 결정 DF1: 누름 폭 40(보이는 자리는 옛 32 그대로 — 좌우 −4) */
.tw-card__aside { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.tw-card__note { font-size: var(--fs-cap); color: var(--muted); }
/* 이동 링크(카드 머리 '어빌리티'·'프리셋' 같은): 인디고 굵게, 밑줄 없음 — 누름 영역 44px(투명 ::before) */
.tw-link { position: relative; color: var(--link); font-weight: 600; text-decoration: none; }
.tw-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-section-title { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); margin: 8px 0 0; color: var(--fg-2); }
/* 칩(core.js chip) = 상태 태그 별칭: 3px 명판 — 외곽선 + 글자 색만(바탕 없음, CN2·CN3). 결과 알약(.tw-outcome__word)·10회 회차 줄(.tw-bline)은 이 규칙 밖.
   누를 수 있는 칩(button.tw-chip·a.tw-chip)은 아래 '누를 수 있는 칩'. */
.tw-chip { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-tight); padding: 0 6px;
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); color: var(--fg); background: transparent; white-space: nowrap; }
.tw-chip .tw-icon, .tw-chip .tw-li { width: 12px; height: 12px; }
.tw-chip.is-ok { color: var(--ok); border-color: var(--ok); }
.tw-chip.is-bad { color: var(--bad); border-color: var(--bad); }
.tw-chip.is-warn { color: var(--warn); border-color: var(--warn); }
.tw-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-body); }
.tw-links a { color: var(--muted); text-underline-offset: 3px; }

/* 버튼(S1): 주(인디고 채움 — 화면당 하나, 유일한 채움) · 보조(선) · 조용한(글자) · 위험(빨강 선·글자) · 못 누름(.38 흐리게) · 높이 44px */
.tw-btn { font: inherit; font-size: var(--fs-body); font-weight: 600; min-height: 44px; padding: 0 14px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; position: relative; }   /* relative = 작게 줄인 화면에서도 누름 영역 44(아래 ⑥ 투명 ::before, 결정 DF1) */
.tw-btn small { color: inherit; opacity: .7; }
.tw-btn .tw-li, .tw-btn .tw-icon { width: 15px; height: 15px; }
.tw-btn.is-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-line); font-weight: 700; }
.tw-btn.is-primary small, .tw-btn.is-primary b, .tw-btn.is-primary strong { color: inherit; }
.tw-btn.is-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 70%, var(--bg)); }
/* 조용한 버튼(결정 DF2): 높이 44 + 1px 선(--line-strong) + 밝은 글자 — 실행 버튼이 글자처럼 보이지 않게. 보조 버튼과는 글자 크기·굵기로만 다르다 */
.tw-btn.is-ghost { min-height: 44px; padding: 0 12px; font-weight: 500; font-size: var(--fs-sub); color: var(--fg-2); border-color: var(--line-strong); }
.tw-btn.is-block { width: 100%; }
.tw-btn.is-grow { flex: 1 1 auto; }
.tw-btn:disabled, .tw-btn:disabled:hover { cursor: not-allowed; background: transparent; border-color: var(--line-strong); color: var(--fg); }   /* 투명도는 아래 '상태 표시 공통'(.38) */
.tw-icon-btn { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.tw-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 상태 표시 공통(S1): hover = 선 한 단계 진하게 · 눌림 = 인디고 선·글자 · 주 버튼은 한 단계 진한 인디고. 바탕 덧칠 없음(CN2). 비활성 = 투명도 .38(숨기지 않는다).
   키보드 초점은 맨 위 :focus-visible 한 규칙. 누를 수 없는 상태 태그(.tw-tag)는 여기에 넣지 않는다. */
:is(.tw-btn, .tw-icon-btn):hover:not(:disabled) { border-color: var(--line-hover); }
:is(.tw-btn, .tw-icon-btn):active:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tw-btn.is-primary:is(:hover, :active):not(:disabled) { background: var(--btn-primary-press); border-color: var(--btn-primary-press); color: var(--btn-primary-fg); }
.tw-btn.is-ghost:hover:not(:disabled) { border-color: var(--line-hover); color: var(--fg-2); }
.tw-btn.is-danger:hover:not(:disabled) { border-color: var(--bad); }
:is(.tw-filters > button, .tw-fchip, .tw-ichip__x, .tw-seg > button, .tw-tabs > button, .tw-tabs > a):hover:not(:disabled) { color: var(--fg-2); }
:is(a.tw-row, button.tw-row):hover .tw-row__title { color: var(--accent); }
:is(.tw-btn, .tw-icon-btn, .tw-filters > button, .tw-fchip, .tw-ichip__x, .tw-seg > button, .tw-tabs > button, .tw-tip__btn):disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

/* 상태 표기: 외곽선 + 제목 글자 색(옛 왼쪽 4px 색 띠 없음 — CR15 색 세로선 줄이기) */
.tw-state { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: transparent; display: grid; gap: 3px; }
.tw-state > strong { color: var(--fg-2); }
.tw-state p { font-size: var(--fs-sub); color: var(--muted); }
.tw-state .tw-actions { margin-top: 6px; }
.tw-state.is-ok { border-color: var(--ok); } .tw-state.is-ok > strong { color: var(--ok); }
.tw-state.is-error { border-color: var(--bad); } .tw-state.is-error > strong { color: var(--bad); }
.tw-state.is-unknown { border-color: var(--warn); } .tw-state.is-unknown > strong { color: var(--warn); }
/* 로딩: '확인할 수 없음' 경고 상자와 다른 중립 모양 — 테두리 없음, 흐린 글자 + 선 아이콘. 200ms 전에는 보이지 않는다. 목록은 스켈레톤 행 */
.tw-loading { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0; color: var(--muted); font-size: var(--fs-sub); animation: tw-late .2s step-end; }
.tw-loading__line { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tw-loading__line .tw-li { animation: tw-spin 1.2s linear infinite; }
@keyframes tw-late { from, to { opacity: 0; } }
@keyframes tw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-loading__line .tw-li { animation: none; } }
.tw-skel { display: grid; gap: var(--sp-2); }
.tw-skel__row { display: block; height: 44px; border: var(--bw) solid var(--rule); border-radius: var(--radius-sm); }

/* ---------- 공통 컴포넌트(결정 AP1 이후 이름 그대로, 모양은 CN) — 사용법·예시: docs/UI_COMPONENTS_20260928.md ---------- */
.tw-nowrap { white-space: nowrap; }
.tw-num { font-variant-numeric: tabular-nums; }
time.tw-rel { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 긴 글(도움말 팝오버 본문·편지·공지·글 본문·안내 문장): 같은 시스템 글꼴, 낱말 단위 줄바꿈(옛 '고정폭 기본 + 긴 글만 가변폭' 폐기) */
:is(.tw-prose, .tw-tip__pop, .tw-empty > p, .tw-state > p, .tw-page-head__desc, details.tw-note > div, .tw-i-text, .tw-i-md) {
  font-family: var(--font-prose); word-break: keep-all; overflow-wrap: anywhere; }
:is(.tw-prose, .tw-tip__pop, .tw-i-md) :is(code, pre, kbd, samp) { font-family: var(--font-mono); }
.tw-prose { line-height: var(--lh-loose); }

/* 화면 머리(D2): 가운데 제목 → 설명 한 줄 → 상태 칩. 쓰기 행동이 있으면 제목 줄 오른쪽에 작은 주 버튼(core.js pageHead) */
.tw-page-head { display: grid; justify-items: center; gap: 4px; text-align: center; margin: 2px 0 0; min-width: 0; }
.tw-page-head__top { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-width: 0; }
.tw-page-head__top > h1 { grid-column: 2; min-width: 0; }
.tw-page-head h1 { font-size: var(--fs-title); font-weight: var(--fw-title); letter-spacing: var(--ls-title); line-height: var(--lh-tight); color: var(--title); overflow-wrap: anywhere; }
.tw-page-head__act { grid-column: 3; justify-self: end; }
.tw-page-head__act .tw-btn { min-height: 38px; padding: 6px 12px; font-size: var(--fs-sm); }
.tw-page-head__desc { font-size: var(--fs-sm); color: var(--muted); max-width: 48ch; }
.tw-page-head__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tw-page-head__tip { grid-column: 3; grid-row: 1; justify-self: start; }   /* 결정 BS5: 제목 옆 helpTip 하나(제목은 가운데 그대로) */

/* 선 아이콘(결정 BS4, static/icons.js lineIcon): 글자 크기·글자색을 따른다 */
.tw-li { width: 1em; height: 1em; flex: none; vertical-align: -.125em; stroke-width: 2; }
/* ⓘ 도움말 팝오버(결정 BS5 + CL3): 동그라미 i 선 아이콘, 누름 영역 44px. 팝오버 = 바탕 약간 투명 + 흐림, 글자 조금 작게(13px), 여백 작게, 낱말 단위 줄바꿈.
   위치는 core.js가 CSSOM으로 준다(인라인 style 속성 아님). Esc·바깥 누르기·다시 누르기로 닫힘, 한 번에 하나.
   팝오버 안 스크롤이 바깥으로 번지지 않게(overscroll-behavior) — core.js 가 팝오버 안 스크롤에는 위치를 다시 잡지 않는다(옛 CK11 사냥터 한정 막음의 공용 수정). */
.tw-tip { display: inline-flex; vertical-align: middle; position: relative; }
.tw-tip__btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 6px;
  font: inherit; font-size: var(--fs-strong); line-height: 1; background: none; border: 0; border-radius: var(--radius-chip); color: var(--faint); cursor: pointer; position: relative; }
.tw-tip__btn:hover, .tw-tip__btn[aria-expanded="true"] { color: var(--accent); }
.tw-tip__btn.is-bad { color: var(--bad); } .tw-tip__btn.is-warn { color: var(--warn); } .tw-tip__btn.is-info { color: var(--faint); }
.tw-tip__txt { font-size: var(--fs-sm); }
.tw-tip__pop { position: fixed; z-index: 1000; left: 8px; top: 8px; width: max-content; max-width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px);
  overflow: auto; overscroll-behavior: contain; display: grid; gap: 6px; padding: 9px 12px; text-align: left; font-size: var(--fs-pop); font-weight: 400; line-height: 1.5; color: var(--pop-fg);
  background: var(--pop-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: var(--bw) solid var(--pop-line); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow);
  white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; }
.tw-tip__pop[hidden] { display: none; }
.tw-tip__pop:focus { outline: none; }
/* 긴 설명(목록이 있거나 약 4줄 넘음)은 좁은 화면(≤480px)에서 하단 시트(결정 BU4). core.js placeTip이 is-sheet를 붙이고 left/top을 지운다. */
.tw-tip__pop.is-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: min(70vh, 560px);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--radius) var(--radius) 0 0; }   /* 올라오는 움직임은 없음(열린 순간 위치가 확정) */
.tw-tip__pop ul, .tw-tip__pop ol { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.tw-tip__pop ol.tw-tip__ol { list-style: decimal; padding-left: 20px; }   /* 결정 DF10: rulesTip 규칙 줄 = 번호 목록(CL3) */
.tw-tip__pop ol.tw-tip__ol > li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-tip__pop b, .tw-tip__pop strong { color: var(--fg-2); }
.tw-tip__p { display: block; }
.tw-tip__more { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: var(--accent); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.tw-tip__pop > .tw-tip__more:only-child { min-height: 44px; }   /* 내용 없이 '메뉴얼에서 자세히' 링크만 있는 팝오버 */
.tw-tip__pop li .tw-tag { margin-left: var(--sp-1); vertical-align: 1px; }   /* rulesTip: '임시'였던 규칙 줄 끝 '바뀔 수 있음' */
.tw-gname { font-weight: var(--fw-strong); overflow-wrap: anywhere; }   /* 공용 길드 이름 칸(core.js guildName) — 서버가 가린 값 그대로 */
.tw-menu-hidden .tw-li { vertical-align: -.1em; }   /* 전투 메뉴의 숨겨진 사냥터 표시 */

/* 채팅 버튼 가림(결정 CB14·MX29 — app.js 'chat-away'): 아래로 내리는 중·본문 입력칸 초점(data-chat-away) · 모달·시트·팝오버 시트가 열려 있을 때.
   위치·모양은 screens_info.css 그대로. 숨김 = 투명 + visibility:hidden. 움직임 줄이기 설정이면 맨 아래 전역 규칙으로 전환 없이 즉시. */
.tw-chat-fab { transition: opacity .15s ease-out, visibility 0s linear 0s; }
:root[data-chat-away] .tw-chat-fab,
.tw-shell:has(dialog[open], .tw-sheet:not([hidden]), .is-sheet:not([hidden])) .tw-chat-fab { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease-out, visibility 0s linear .15s; }

/* 섹션 패널(core.js panelSec): 카드와 같은 모양(외곽선만). 카드 안에 들어가면 선 없이 구역만(위 가는 줄로 나눔) */
.tw-panel-sec { background: transparent; border: var(--bw) solid var(--line); border-radius: var(--radius); padding: var(--pad-y) var(--pad) 11px; display: grid; gap: var(--sp-2); min-width: 0; }
@media (min-width: 600px) { .tw-panel-sec { padding: 10px 16px 14px; } }
.tw-card .tw-panel-sec, .tw-panel-sec .tw-panel-sec { border: 0; border-radius: 0; padding: 0; }
.tw-card .tw-panel-sec + .tw-panel-sec { border-top: var(--bw) solid var(--rule); padding-top: var(--sp-3); }
.tw-panel-sec > h2, .tw-panel-sec__head > h2 { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); line-height: var(--lh-tight); color: var(--fg-2); }
.tw-panel-sec h3 { font-size: var(--fs-sub); font-weight: 700; color: var(--fg-2); }
.tw-panel-sec__block { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-panel-sec__block + .tw-panel-sec__block { border-top: var(--bw) solid var(--rule); padding-top: var(--sp-3); }
.tw-panel-sec__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; min-height: 30px; }
.tw-panel-sec__head > h2 { margin-right: auto; }
.tw-panel-sec.is-danger { border-color: color-mix(in srgb, var(--bad) 60%, var(--line)); }
.tw-card .tw-panel-sec.is-danger { border: var(--bw) solid color-mix(in srgb, var(--bad) 60%, var(--line)); border-radius: var(--radius-sm); padding: var(--sp-3); }
.tw-card > .tw-btn.is-primary.is-block, .tw-panel-sec > .tw-btn.is-primary.is-block { margin-top: var(--sp-2); }   /* 주 행동: 위 요소와 띄움 */

/* 라벨·값 줄(dl.tw-kv): 라벨 왼쪽(옅게)·값 오른쪽(밝게), 가로 줄 없음(CQ10). 값 역할 .is-cur(재화 금색 굵게) .is-ok .is-bad .is-warn (core.js summaryBox)
   요약 상자(.is-box): 줄마다 왼쪽 가는 세로선(장식 — S2) */
.tw-kv.is-box { display: grid; gap: 2px; background: transparent; padding: 0; }
.tw-kv.is-box > div { padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); }
.tw-kv.is-box dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-kv .is-cur { color: var(--gold); font-weight: 700; }
.tw-kv .is-ok { color: var(--ok); } .tw-kv .is-bad { color: var(--bad); } .tw-kv .is-warn { color: var(--warn); }
.tw-kv .is-strong { font-weight: 700; color: var(--accent); }

/* 지표 타일 4칸(모바일 2칸·≥600px 4칸). 3칸 기본 .tw-tiles는 전투 영역 규칙 */
.tw-tiles.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .tw-tiles.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 목록 행(3줄): ①칩+메타(오른쪽 상대 시간) ②제목 한 줄 말줄임 ③보조(왼쪽)+지표·행동(오른쪽). 왼쪽 2px 상태 선(줄마다 하나) · 줄 사이 가는 줄 */
.tw-rowlist { display: grid; min-width: 0; }
.tw-row { display: grid; gap: 3px; padding: 10px 12px; border-bottom: var(--bw) solid var(--rule); border-left: 2px solid transparent; min-width: 0; color: inherit; text-decoration: none; }
.tw-rowlist > .tw-row:last-child { border-bottom: 0; }
.tw-row.is-pinned { border-left-color: var(--fg-2); }
.tw-row.is-current { border-left-color: var(--sel); }
.tw-row.is-current .tw-row__title { color: var(--accent); }
.tw-row.is-muted { border-left-color: var(--faint); color: var(--muted); }
.tw-row__meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.tw-row__meta > .tw-rel, .tw-row__meta > .tw-row__end { margin-left: auto; }
.tw-row__title { font-weight: 700; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tw-row__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); min-width: 0; }
.tw-row__foot > :last-child { flex: none; }

/* 표: 투명 바탕·머리글 굵게 흐림·행동 열 좁게 고정. 줄 사이 가는 줄(장식). 넘치면 .tw-table-wrap 안에서만 가로 이동. 긴 표는 .is-scroll(머리글 고정) */
.tw-table-wrap { overflow-x: auto; min-width: 0; }
.tw-table-wrap.is-scroll { max-height: 60vh; overflow-y: auto; }
.tw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tw-table th, .tw-table td { padding: 8px 6px; border-bottom: var(--bw) solid var(--rule); text-align: left; vertical-align: middle; }
.tw-table thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-cap); white-space: nowrap; background: var(--bg); border-bottom-color: var(--line); }
.tw-table-wrap.is-scroll thead th { position: sticky; top: 0; z-index: 1; }
.tw-table .is-num { text-align: right; }
.tw-table .is-act { width: 1%; white-space: nowrap; text-align: right; }
.tw-table tr.is-me, .tw-table tr.is-current { font-weight: 700; color: var(--accent); }
.tw-table .tw-btn { min-height: 36px; padding: 4px 10px; font-size: var(--fs-sm); }
.tw-sort { font: inherit; color: inherit; background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tw-sort::after { content: "↕"; opacity: .5; }
[aria-sort="ascending"] > .tw-sort::after { content: "↑"; opacity: 1; }
[aria-sort="descending"] > .tw-sort::after { content: "↓"; opacity: 1; }
@media (min-width: 600px) { .tw-table { font-size: var(--fs-md); } .tw-table th, .tw-table td { padding: 9px 12px; } }

/* 탭(S1): 옅은 글자 · 지금 탭은 밝은 글자 + 인디고 2px 밑줄. 1단(화면 종류) 균등 폭·44px / 2단(.is-sub, 분류) 가로 스크롤. bindTabs와 함께 쓴다 */
.tw-tabs { display: flex; border-bottom: var(--bw) solid var(--line); min-width: 0; }
.tw-tabs > button, .tw-tabs > a { flex: 1 1 0; min-width: 0; font: inherit; font-size: var(--fs-body); font-weight: 500; min-height: 44px; padding: 8px 12px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tw-tabs > [aria-selected="true"], .tw-tabs > [aria-current="page"], .tw-tabs > [aria-current="true"] { color: var(--fg-2); border-bottom-color: var(--sel); font-weight: 600; }
.tw-tabs.is-sub { overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; }
.tw-tabs.is-sub::-webkit-scrollbar { display: none; }
.tw-tabs.is-sub > button, .tw-tabs.is-sub > a { flex: none; min-width: 56px; padding: 6px 12px; font-size: var(--fs-sm); overflow: visible; }
@media (min-width: 600px) { .tw-tabs.is-sub > button, .tw-tabs.is-sub > a { min-width: 72px; } }

/* 필터 알약(core.js filterPills): 맨 앞 '전체'(초기화) + aria-pressed. 한 줄 + 좌우 스와이프(CR6·CR7). 켜짐 = 인디고 선·글자(채움 없음) */
.tw-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; min-width: 0; padding: 4px 0; }
.tw-filters::-webkit-scrollbar { display: none; }
.tw-filters > button { position: relative; flex: none; font: inherit; font-size: var(--fs-cap); font-weight: 600; min-height: 36px; padding: 0 10px; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); background: none; color: var(--fg); cursor: pointer; white-space: nowrap; }
.tw-filters > button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* 칩 채움형(.is-fill): 외곽선형과 같은 모양 — 글자만 본문색(결과 칩 승/패/무는 tone 색). 새 소식 점 .tw-dot.is-new */
.tw-chip.is-info { color: var(--accent); border-color: var(--accent); }
.tw-chip.is-fill { color: var(--fg); }
.tw-chip.is-fill.is-ok { color: var(--ok); } .tw-chip.is-fill.is-bad { color: var(--bad); } .tw-chip.is-fill.is-warn { color: var(--warn); } .tw-chip.is-fill.is-info { color: var(--accent); }
/* 누를 수 있는 칩(버튼·링크에 .tw-chip을 단 옛 마크업): 손가락 커서 + hover 선 */
button.tw-chip, a.tw-chip { cursor: pointer; font: inherit; font-size: var(--fs-cap); font-weight: 600; line-height: var(--lh-tight); text-decoration: none; }
button.tw-chip:hover, a.tw-chip:hover { border-color: var(--line-hover); color: var(--fg-2); }
.tw-dot.is-new { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--bad); vertical-align: middle; }
.tw-rank.is-1 { color: var(--rank-1); font-weight: 800; } .tw-rank.is-2 { color: var(--rank-2); font-weight: 800; } .tw-rank.is-3 { color: var(--rank-3); font-weight: 800; }

/* 칩 4역할(결정 BU3 — core.js filterChip·inputChip·statusTag, 진행 행동은 칩이 아니라 button()) — 모양은 CN(S3 3px 명판):
   ① 필터 칩 .tw-fchip: 목록 거르기(aria-pressed). 켜지면 인디고 선·글자 + 선 아이콘 체크. 보이는 높이 36px, 누름 영역 44px(위아래 가상 영역).
   ② 입력 칩 .tw-ichip: 사용자가 넣은 값 + × 버튼(누름 영역 44px).
   ③ 상태 태그 .tw-tag: 누를 수 없음 — 명판(선 + 글자 색), hover·눌림 없음, 22px. 색만으로 구분하지 않고 글자를 쓴다. */
.tw-fchip, .tw-ichip { position: relative; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 36px; font: inherit; font-size: var(--fs-cap); font-weight: 600;
  line-height: var(--lh-tight); color: var(--fg); background-color: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); white-space: nowrap; }
.tw-fchip { padding: 0 10px; cursor: pointer; }
.tw-fchip::before, .tw-ichip__x::before, .tw-filters > button::before { content: ""; position: absolute; inset: -5px -1px; }   /* 누름 영역 44px(보이는 36px − 테두리 + 위아래 5px) */
.tw-fchip .tw-li { display: none; }
.tw-fchip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.tw-fchip[aria-pressed="true"] .tw-li { display: inline-block; }
.tw-ichip { padding: 0 0 0 10px; }
.tw-ichip__x { position: relative; align-self: stretch; display: inline-grid; place-items: center; width: 36px; margin-left: var(--sp-1); padding: 0; font: inherit;
  color: var(--muted); background-color: transparent; border: 0; border-left: var(--bw) solid var(--rule-v); cursor: pointer; }
.tw-ichip__x::before { inset: -5px -4px; }   /* × 누름 영역 44×44 */
.tw-tag { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 6px; font-size: var(--fs-cap); line-height: var(--lh-tight); font-weight: 600;
  color: var(--fg); background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); white-space: nowrap; cursor: default; user-select: none; }
.tw-tag .tw-li { width: 12px; height: 12px; }
.tw-tag.is-ok { color: var(--ok); border-color: var(--ok); } .tw-tag.is-bad { color: var(--bad); border-color: var(--bad); }
.tw-tag.is-warn { color: var(--warn); border-color: var(--warn); } .tw-tag.is-info { color: var(--accent); border-color: var(--accent); }
.tw-tag.is-strong { color: var(--accent); border-color: var(--accent); }

/* 비활성 이유(버튼을 숨기지 않고 이유를 글자로, aria-describedby로 연결 — core.js whyDisabled) */
.tw-btn-why { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.tw-btn-why.is-bad { color: var(--bad); }
.tw-btn.is-block + .tw-btn-why { text-align: center; margin-top: -6px; }

/* 접힘 알림(규칙·보조 설명): 기본 접힘, 외곽선 + 오른쪽 화살표(core.js noteBox) */
details.tw-note { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
details.tw-note > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; cursor: pointer; font-weight: 600; color: var(--fg-2); list-style: none; }
details.tw-note > summary::-webkit-details-marker { display: none; }
details.tw-note > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
details.tw-note[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.tw-note > :not(summary) { padding: 0 12px 12px; font-size: var(--fs-sm); }
details.tw-note ul { display: grid; gap: 4px; }
details.tw-note li::before { content: "- "; color: var(--faint); }

/* 빈 상태: 섹션 제목은 남기고 가운데 문구 + (조건 재안내) + 해결 행동. '없음'과 '확인하지 못함'(state('unknown'))은 다른 문구 */
.tw-empty { display: grid; justify-items: center; gap: 8px; padding: 20px 12px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.tw-empty__cond { color: var(--faint); font-size: var(--fs-xs); }

/* 막대(S7): 가는 둥근 줄 — 트랙·채움만 색(CN2 예외). 두께 역할: 기본 4px · .is-lg 6px · .is-sm 4px · .is-thin 3px. 틀 있는 막대(.is-framed, 전투)도 틀 없이 6px */
.tw-gauge.is-lg progress { height: 6px; }
.tw-gauge.is-sm progress { height: 4px; }
.tw-gauge.is-thin progress { height: 3px; }
.tw-gauge.is-framed progress { height: 6px; padding: 0; border: 0; }
.tw-gauge.is-framed.is-me progress::-webkit-progress-bar, .tw-gauge.is-framed.is-foe progress::-webkit-progress-bar { background: var(--track); }

/* 여러 개 중 하나 고르기(세그먼트): 선 묶음, 선택 = 인디고 글자 + 밑줄(채움 없음). 설정 > 화면 테마 */
.tw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); overflow: hidden; min-width: 0; }
.tw-seg > button { font: inherit; font-size: var(--fs-md); min-height: 44px; padding: 6px 8px; border: 0; border-left: var(--bw) solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; }
.tw-seg > button:first-child { border-left: 0; }
.tw-seg > button[aria-pressed="true"] { color: var(--accent); font-weight: 700; box-shadow: inset 0 -2px 0 var(--accent); }

/* 게이지(core.js bar): 라벨 · 막대 · 값 */
.tw-gauge { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--fs-cap); }
.tw-gauge__label { color: var(--muted); font-weight: 600; }
.tw-gauge__value { color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-gauge progress, .tw-stamina progress { width: 100%; height: var(--bar-h); border: 0; border-radius: 999px; overflow: hidden; background: var(--track); -webkit-appearance: none; appearance: none; }
.tw-gauge progress::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
.tw-gauge progress::-webkit-progress-value { background: var(--fg); border-radius: 999px; }
.tw-gauge progress::-moz-progress-bar { background: var(--fg); border-radius: 999px; }
.tw-gauge.hp progress::-webkit-progress-value { background: var(--hp); }
.tw-gauge.hp progress::-moz-progress-bar { background: var(--hp); }
.tw-gauge.mp progress::-webkit-progress-value { background: var(--mp); }
.tw-gauge.mp progress::-moz-progress-bar { background: var(--mp); }

/* === 영역: CN 새 부품(결정 CN·CQ·CR, 2026-09-29 공용 기반) — 화면 갈래가 쓰는 새 이름. core.js 도우미: card·kvGrid·moreToggle·resultHead·swipeRow === */
/* ① 라벨·값 칸 격자(S7 cn-kv — CN5 한 줄 2~3개): 칸 = 라벨 왼쪽(옅게) · 값 오른쪽(밝게) + 칸 왼쪽 가는 세로선(장식). 가로 줄 없음(CQ10), 줄 사이 2px.
   강조는 값 글자 색만(.is-strong 인디고 · .is-gold · .is-ok · .is-bad · .is-dim). 색 세로선은 묶음 안 .is-line 하나만(CR15) — 두 번째부터는 CSS 가 장식선으로 되돌린다.
   .is-wide = 한 줄 전체, .is-span2 = 두 칸 폭(꺾이는 칸만, CQ11). data-cols = 1·2·3. */
.tw-kvg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2px; margin: 0; min-width: 0; }
.tw-kvg[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-kvg[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.tw-kvg__item { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 6px; row-gap: 0;
  padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); }
.tw-kvg__item.is-wide { grid-column: 1 / -1; }
.tw-kvg__item.is-span2 { grid-column: span 2; }
.tw-kvg__k { flex: none; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--muted); font-size: var(--fs-label); line-height: 1.3; }
.tw-kvg__k .tw-li { width: 13px; height: 13px; }
.tw-kvg__v { margin: 0 0 0 auto; min-width: 0; text-align: right; color: var(--fg-2); font-size: var(--fs-value); font-weight: var(--fw-value); font-family: var(--font-num);
  font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; word-break: keep-all; }
.tw-kvg__v small { margin-left: 1px; }
.tw-kvg__item.is-strong .tw-kvg__v { color: var(--accent); }
.tw-kvg__item.is-gold .tw-kvg__v { color: var(--gold); }
.tw-kvg__item.is-ok .tw-kvg__v { color: var(--ok); }
.tw-kvg__item.is-bad .tw-kvg__v { color: var(--bad); }
.tw-kvg__item.is-warn .tw-kvg__v { color: var(--warn); }   /* 결정 DF10: 옛 요약 상자 'warn' 역할 */
.tw-kvg__item.is-dim .tw-kvg__v { color: var(--muted); font-weight: 400; }
.tw-kvg__item.is-line { border-left-color: var(--accent); }
.tw-kvg__item.is-line.is-gold { border-left-color: var(--gold); } .tw-kvg__item.is-line.is-ok { border-left-color: var(--ok); } .tw-kvg__item.is-line.is-bad { border-left-color: var(--bad); }
.tw-kvg__item.is-line ~ .tw-kvg__item.is-line { border-left-color: var(--rule-v); }   /* CR15: 한 묶음 안 색 세로선 최대 1개 */
.tw-kvg + .tw-kvg { margin-top: 2px; }
@media (max-width: 599px) {   /* 휴대폰 3열: 칸 사이·라벨-값 사이를 줄여 값 꺾임을 줄임(S7 검수 v2) */
  .tw-kvg { column-gap: 4px; }
  .tw-kvg__item { column-gap: 4px; padding-left: 5px; }
}

/* ② '더 보기' 단추(CR5): 글자 없이 단추만(이름은 낭독기 글자), 오른쪽. 닫힘 = 아래 화살표 · 열림 = 위 화살표. 펼칠 때 아래에서 위로 올라오는 움직임
   (움직임 줄이기 설정이면 없음). 보이는 32×28, 누름 영역 44px(투명 ::before). 구조: details.tw-more > summary.tw-more__sum + .tw-more__body */
details.tw-more { display: grid; min-width: 0; }
.tw-more > .tw-more__sum { position: relative; justify-self: end; list-style: none; display: inline-grid; place-items: center; width: 32px; height: 28px;
  border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); color: var(--muted); cursor: pointer; }
.tw-more > .tw-more__sum::-webkit-details-marker { display: none; }
.tw-more > .tw-more__sum:hover { color: var(--accent); border-color: var(--accent); }
.tw-more > .tw-more__sum .tw-li { width: 16px; height: 16px; transition: transform .15s ease-out; }
.tw-more[open] > .tw-more__sum .tw-li { transform: rotate(180deg); }
.tw-more__body { min-width: 0; margin-top: 6px; display: grid; gap: var(--sp-2); }
.tw-more[open] > .tw-more__body { animation: tw-rise var(--motion-rise) ease-out; }
@keyframes tw-rise { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tw-more[open] > .tw-more__body { animation: none; } .tw-more > .tw-more__sum .tw-li { transition: none; } }

/* ③ 결과 큰 글자(CR16·CR17 확정안): '승리'/'패배' 24px 굵게(인디고/빨강)와 경험치·골드·포인트 3칸(라벨 위·값 아래, 가운데)을 같은 한 줄에.
   턴 수·스태미너 표시 없음. 패배 원인 문장은 그 아래 줄. 3칸은 세로선 없이(CR15 A안) — 색은 값 글자만(.is-exp 녹 · .is-gold 금 · .is-pt 인디고) */
.tw-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 6px; min-width: 0; }
.tw-result__word { font-size: var(--fs-bignum); font-weight: 800; letter-spacing: var(--ls-card); line-height: 1.1; color: var(--fg-2); white-space: nowrap; }
.tw-result.is-win .tw-result__word { color: var(--accent); }
.tw-result.is-loss .tw-result__word { color: var(--bad); }
.tw-result.is-draw .tw-result__word { color: var(--warn); }
.tw-result.is-void .tw-result__word { color: var(--muted); }
.tw-result__gains { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; min-width: 0; }
.tw-result__gains > div { min-width: 0; text-align: center; }
.tw-result__gains dt { color: var(--muted); font-size: var(--fs-label); line-height: 1.3; white-space: nowrap; }
.tw-result__gains dd { margin: 1px 0 0; color: var(--fg-2); font-size: var(--fs-gain); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.tw-result__gains dd.is-exp { color: var(--ok); } .tw-result__gains dd.is-gold { color: var(--gold); } .tw-result__gains dd.is-pt { color: var(--accent); } .tw-result__gains dd.is-bad { color: var(--bad); }
.tw-result__why { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--fs-sub); line-height: var(--lh-base); }

/* ④ 좌우 스와이프 칩 줄(CR6·CR7): 한 줄, 자리가 모자라면 좌우로 밀어 봄(스크롤 막대 없음). 안의 칩·필터·정렬 칸은 줄어들지 않는다.
   묶음 사이 구분 .tw-swipe__sep(가는 세로 줄 — 장식). 위아래 4px 여백 = 칩 누름 영역 44px 이 잘리지 않게 */
.tw-swipe { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; padding: 4px 0; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.tw-swipe::-webkit-scrollbar { display: none; }
.tw-swipe > * { flex: none; scroll-snap-align: start; }
.tw-swipe__sep { align-self: stretch; width: 0; margin: 6px 2px; border-left: var(--bw) solid var(--rule-v); }

/* ⑤ 속성 표기(attr.js attrTag — CQ6 아이콘 + 글자, 모든 곳): 속성 전용 색 + 선 아이콘 + 이름. 칩 안에서도 같은 모양 */
.tw-attr { display: inline-flex; align-items: center; gap: 3px; flex: none; white-space: nowrap; font-weight: var(--fw-strong); color: var(--fg); }
.tw-attr .tw-attr__i { width: 1em; height: 1em; flex: none; }
.tw-attr.is-fire { color: var(--attr-fire); } .tw-attr.is-cold { color: var(--attr-cold); } .tw-attr.is-life { color: var(--attr-life); }
.tw-attr.is-steel { color: var(--attr-steel); } .tw-attr.is-earth { color: var(--attr-earth); } .tw-attr.is-holy { color: var(--attr-holy); }
.tw-attr.is-dark { color: var(--attr-dark); } .tw-attr.is-none { color: var(--attr-none); }

/* ⑥ 작은 단추 누름 영역 44px — 모양(보이는 크기)은 그대로, 투명 ::before 로 넓힘(S7). 링크·'더 보기' 단추 */
.tw-link::before, .tw-more > .tw-more__sum::before {
  content: ''; position: absolute;
  top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
  left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2)); }
/* 결정 DF1(2026-09-30): 44px 미만 누름 영역을 공용 부품 쪽에서 한 번에 — 화면이 버튼·아이콘 단추·ⓘ 를 작게 줄여도(36·38·40·28 …)
   보이는 모양은 그대로 두고 누름 영역만 높이 44·폭 44 로 넓힌다(요소가 이미 크면 넓히지 않음). 화면에 따로 ::before 가 있으면 그쪽이 이긴다.
   글 속 단독 링크(안내 줄 .tw-hint · 라벨·값 .tw-kv · 링크 줄 .tw-links)도 같은 방식. */
.tw-btn::before, .tw-icon-btn::before, .tw-tip__btn::before,
:is(.tw-hint, .tw-kv dd, .tw-links, .tw-kvg__v) a[href]::before {
  content: ''; position: absolute;
  top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
  left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2)); }
:is(.tw-hint, .tw-kv dd, .tw-links, .tw-kvg__v) a[href] { position: relative; }
/* 입력칸(결정 DF1): 요소 높이 44 — 화면별 입력 칸이 더 낮게 줄였어도(36·40·42) 공용으로 올린다. 체크·라디오·범위는 제외 */
#tw-main :is(input:not([type=checkbox], [type=radio], [type=range], [type=hidden], [type=file], [type=color]), select) { min-height: 44px; }

/* === 영역: 전투(스태미너·요약 타일·결과·전리품·사냥터·고정 막대·참가자·전투 기록·거리판·10회) — 묶음 1 소유(여기부터 '영역: 공통' 표지 전까지) ===
   주의: .tw-fighter__portrait.has-art img 줄과 .tw-loot.is-* 줄은 시험이 글자 그대로 검사하므로 옮기거나 바꾸지 않는다.
   결정 CN 1단계: 옛 DOS 흔적(마디 막대 가림·빛 번짐·초상 격자)만 뺐다. 모양 전체는 전투 화면 갈래에서. */
/* 스태미너: 한 줄(셀 아이콘·값 굵게/최대 작게·다음 회복·도움말) + 전폭 막대. D12: 스태미너 물약 버튼은 오픈베타 범위 밖 */
.tw-stamina { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "icon value next help" "bar bar bar bar"; align-items: center; column-gap: 10px; row-gap: 8px; background: transparent; border: var(--bw) solid var(--line); border-radius: var(--radius); padding: 10px 10px 12px 12px; }
.tw-stamina__icon { grid-area: icon; } .tw-stamina__value { grid-area: value; } .tw-stamina__next { grid-area: next; justify-self: end; } .tw-stamina .tw-stamina__help { grid-area: help; } .tw-stamina progress { grid-area: bar; }
/* 스태미너 설명 = helpTip(누름 영역 44px 유지, 줄 높이는 옛 32px 버튼과 같게 위아래 −6px) */
.tw-stamina .tw-stamina__help .tw-tip__btn { margin-block: -6px; font-size: var(--fs-strong); }
.tw-stamina__value { font-size: var(--fs-lg); }
.tw-stamina__icon { color: var(--stamina); display: inline-flex; }
.tw-stamina__icon .tw-pixel { width: 24px; height: auto; }
.tw-stamina__value { color: var(--stamina); font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-stamina__value small { color: var(--muted); }
.tw-stamina progress { height: 6px; background: var(--track); border: 0; }
.tw-stamina progress::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
.tw-stamina progress::-webkit-progress-value { background: var(--stamina); border-radius: 999px; }
.tw-stamina progress::-moz-progress-bar { background: var(--stamina); border-radius: 999px; }
.tw-stamina__next { font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-stamina .tw-icon-btn { width: 32px; height: 32px; border: 0; background: none; }

/* 사냥 결과 카드(결정 CR17 — 새 스타일 2단계 갈래 B, 2026-09-30): 결과 줄(공용 .tw-result) 하나가 카드 첫 줄. 결과가 없으면 카드를 그리지 않는다.
   옛 요약 타일(누적 경험치·골드·숙련도)은 사냥 화면에서 뺐다(확정 시안 S7 '사냥 결과'). */
.tw-summary { padding: 10px var(--pad) 12px; gap: 8px; }
.tw-summary:has(> #outcome:empty) { display: none; }
/* 지표 타일(.tw-tiles — 지금은 거래소 .is-4 가 씀): 칸 사이 세로 구분선, 라벨 → 값 → 증분 줄(비어도 높이 고정) */
.tw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: var(--panel); }
.tw-tiles > div { padding: 10px 4px 6px; text-align: center; display: grid; grid-template-rows: auto auto 18px; gap: 1px; min-width: 0; border-left: 1px solid var(--line); }
.tw-tiles > div:first-child { border-left: 0; }
.tw-tiles.is-4 > div:nth-child(2n + 1) { border-left: 0; }
@media (min-width: 600px) { .tw-tiles.is-4 > div:nth-child(2n + 1) { border-left: 1px solid var(--line); } .tw-tiles.is-4 > div:first-child { border-left: 0; } }
.tw-tiles dt { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-tiles dd:not(.tw-delta) { font-size: var(--fs-num); font-weight: 700; color: var(--strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.3; }
.tw-delta { font-size: var(--fs-cap); color: var(--win); min-height: 18px; line-height: 18px; }
#outcome:empty { display: none; }
/* 결과 덩어리(battle.js outcomeView): 첫 줄 = 공용 결과 줄 .tw-result('승리'/'패배' 24px + 경험치·골드·포인트 3칸, 턴·스태미너 없음 — CR17),
   그 아래 패배 원인 한 줄(ca_record.js 가 결과 줄 바로 뒤에 붙임) · 쓰러짐 · 획득 · 부가 줄. 왼쪽 정렬. 옛 결과 알약(외곽선 상자)은 없앴다.
   '.tw-outcome__word' 는 이제 결과 줄에 붙는 표지 이름(원인 한 줄 자리)일 뿐 모양 규칙이 없다. */
.tw-outcome { display: grid; gap: 8px; min-width: 0; text-align: left; }
.tw-outcome > .tw-result { padding: 2px 0; }
.tw-outcome .tw-ca-cause { margin-top: -2px; }
.tw-outcome__drops { display: grid; gap: 4px; }
.tw-outcome__line { font-size: var(--fs-body); color: var(--fg-2); }   /* 모드 보상 한 줄(grantView) */
.tw-outcome__note { font-size: var(--fs-sub); color: var(--loss); }
.tw-outcome__meta { font-size: var(--fs-cap); color: var(--muted); }
.tw-outcome__chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* 획득 아이템 강조(무지갯빛 테두리가 도는 빛 효과) */
@property --loot-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.tw-loots { display: grid; gap: 8px; justify-items: start; margin: 2px 0; }
.tw-loot { --loot: var(--strong); position: relative; padding: 9px 18px; font-weight: 700; font-size: var(--fs-body); color: var(--loot);
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--loot-angle), #ff5555, #ffff55, #55ff55, #55ffff, #5f7bff, #ff55ff, #ff5555) border-box;
  box-shadow: 0 0 10px color-mix(in srgb, var(--loot) 45%, transparent), 0 0 22px color-mix(in srgb, #ff55ff 25%, transparent);
  animation: tw-loot-spin 3s linear infinite, tw-loot-pulse 1.6s ease-in-out infinite alternate; }
.tw-loot span { text-shadow: 0 0 6px color-mix(in srgb, var(--loot) 60%, transparent); }
/* 등급별 빛 색: 공통 등급 토큰(고정 16진 색 대신, 라이트 대비 포함). 'common/normal'·'uncommon/advanced' 두 이름을 모두 받는다 */
.tw-loot.is-common, .tw-loot.is-normal { --loot: var(--grade-common); } .tw-loot.is-uncommon, .tw-loot.is-advanced { --loot: var(--grade-uncommon); }
.tw-loot.is-rare { --loot: var(--grade-rare); } .tw-loot.is-heroic { --loot: var(--grade-heroic); } .tw-loot.is-legendary { --loot: var(--grade-legendary); }
.tw-loot.is-relic { --loot: var(--grade-relic); font-weight: var(--grade-relic-weight); } .tw-loot.is-replica { --loot: var(--grade-replica); }
@keyframes tw-loot-spin { to { --loot-angle: 360deg; } }
@keyframes tw-loot-pulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
.tw-gains { font-size: var(--fs-sub); }
.tw-gains b { color: var(--career); margin-right: 4px; }
.tw-gains em { color: var(--ok); font-weight: 700; }
.tw-boosts { display: flex; flex-wrap: wrap; gap: 6px; }
/* 버닝 표지(사냥 결과·홈 공지·이벤트 제목이 함께 씀): 옛 주황→노랑 채움(CN2 위반) 대신 3px 명판 — 금색 선·글자(결정 CN2·CN3, 2026-09-30) */
.tw-burning { display: inline-flex; align-items: center; min-height: 22px; font-size: var(--fs-cap); font-weight: 700; padding: 0 6px; color: var(--gold); background: transparent;
  border: var(--bw) solid var(--gold); border-radius: var(--radius-chip); white-space: nowrap; }
.tw-burning em { margin-left: 4px; color: inherit; }

/* 사냥터(나중에 이미지 배경으로 꾸밀 자리) */
.tw-field { background: var(--surface); }
.tw-field__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tw-field__enemy, .tw-field__match { font-size: var(--fs-body); }
.tw-field__match { color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tw-who.is-me { color: var(--me); font-weight: 700; }
.tw-who.is-foe { color: var(--foe); font-weight: 700; }

/* 아래 고정 행동 막대 */
/* 본문과 같은 폭(600px + 거터). #acts와 같은 행동의 두 번째 위치라 한 번에 하나만 보인다 */
.tw-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 8px; padding: 10px max(var(--gutter), calc((100% - var(--content-w)) / 2)) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.tw-dock .tw-btn { min-width: 0; }
/* 결정 CI4(2026-09-29): 막대가 보이는 동안 채팅 버튼은 막대 띠 안 오른쪽 끝에 놓인다(screens_info.css) — 막대 오른쪽에 버튼 자리를 비운다 */
.tw-shell:has(.tw-chat-fab:not([hidden])) .tw-dock:not(.is-static) { padding-right: max(calc(78px + env(safe-area-inset-right)), calc((100% - var(--content-w)) / 2)); }
@media (max-width: 420px) {
  .tw-shell:has(.tw-chat-fab:not([hidden])) .tw-dock:not(.is-static) { padding-right: calc(64px + env(safe-area-inset-right)); gap: 6px; }
  /* 버튼 자리를 비운 만큼 '10회'·'50회' 좌우 여백을 줄여 사냥터 이름 버튼이 세 줄로 접히지 않게(360px에서 두 줄) */
  .tw-shell:has(.tw-chat-fab:not([hidden])) .tw-dock:not(.is-static) .tw-btn:not(.is-grow) { padding-left: 10px; padding-right: 10px; }
}
.tw-dock.is-static { position: static; padding: 0; background: none; border: 0; }
.tw-dock.is-static .tw-btn { flex: 1; }
/* 결정 CR12: 전투·사냥 화면(.tw-layout-battle, ≥900px 본문 880px [임시])에서는 아래 막대도 본문 폭에 맞춘다 */
@media (min-width: 900px) {
  .tw-shell:has(.tw-layout-battle) .tw-dock:not(.is-static) { padding-left: max(var(--gutter), calc((100% - var(--content-w-battle)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--content-w-battle)) / 2)); }
  .tw-shell:has(.tw-chat-fab:not([hidden])):has(.tw-layout-battle) .tw-dock:not(.is-static) { padding-right: max(calc(78px + env(safe-area-inset-right)), calc((100% - var(--content-w-battle)) / 2)); }
}

/* 전투 참가자(결정 CR13·CN11·CQ9·CQ18·CR5 — 새 스타일 2단계 갈래 B, 2026-09-30. 확정 시안 S7 전투 카드).
   카드 = [초상 | 이름 + 머리 한 줄] → HP·MP(아바타 바로 아래, 두 개 한 줄) → 스펙 6칸(공용 .tw-kvg 3칸 × 2줄) → 오른쪽 '더 보기' 단추(나머지 스펙 + 장비 목록).
   600px 미만은 위아래로 쌓고(CN11), 600px 이상은 좌우. 나 = 인디고 선·이름 · 상대 = 빨강 선·이름(CQ18) — 상대 카드 안 강조 칸도 빨강(S7 검수 v3). 바탕 없음(CN2). */
.tw-fighters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: stretch; }
@media (min-width: 600px) { .tw-fighters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tw-fighter { background: transparent; border: var(--bw) solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 10px; align-content: start; min-width: 0; }
.tw-fighter > :not(.tw-fighter__portrait):not(.tw-fighter__head) { grid-column: 1 / -1; }
.tw-fighter.is-me { border-color: var(--me-line); }
.tw-fighter.is-foe { border-color: var(--foe-line); }
.tw-fighter__portrait { width: 56px; aspect-ratio: 1; display: grid; place-items: center; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); overflow: hidden; background: transparent; }   /* 격자 없음(CN2) */
@media (min-width: 600px) { .tw-fighter__portrait { width: 64px; } }
.tw-fighter__portrait span { font-size: var(--fs-bignum); font-weight: 800; }   /* 초상 자리 첫 글자(56·64px 칸에 맞춤) */
.tw-fighter__portrait.is-unknown span { color: var(--faint) !important; }
.tw-fighter.is-me .tw-fighter__portrait span { color: var(--me); }
.tw-fighter.is-foe .tw-fighter__portrait span { color: var(--foe); }
/* [확정 U3] 승인 몬스터 그림(128×128 도트): 칸을 꽉 채우고 최근접 확대로 도트를 유지한다 */
.tw-fighter__portrait.has-art { display: block; overflow: hidden; }
.tw-fighter__portrait.has-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.tw-fighter__head { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.tw-fighter__name { font-size: var(--fs-strong); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: keep-all; }
.tw-fighter.is-me .tw-fighter__name { color: var(--me); }
.tw-fighter.is-foe .tw-fighter__name { color: var(--foe); }
/* [확정 결정 AF] 전직명(4글자 이하): 줄 중간에서 갈라지지 않게 */
.tw-job { white-space: nowrap; }
/* HP·MP: 칸마다 위 줄 = 라벨 왼쪽 · 값 오른쪽, 아래 줄 = 전폭 막대(좁은 두 카드에서도 막대가 보이게) */
.tw-fighter__bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.tw-fighter__bars .tw-gauge { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "l v" "b b"; row-gap: 3px; column-gap: 6px; }
.tw-fighter__bars .tw-gauge__label { grid-area: l; }
.tw-fighter__bars .tw-gauge__value { grid-area: v; justify-self: end; white-space: nowrap; color: var(--fg); }
.tw-fighter__bars .tw-gauge progress { grid-area: b; }
.tw-fighter__bars .tw-gauge .tw-missing { grid-area: v; justify-self: end; }
/* 스펙 칸(공용 .tw-kvg): 주 공격 칸 = 강조 색 + 색 세로선 하나(CR15). 상대 카드에서는 편 색(빨강) */
.tw-fighter .tw-kvg__item { padding-top: 4px; padding-bottom: 4px; }
.tw-fighter.is-foe .tw-kvg__item.is-strong .tw-kvg__v { color: var(--foe); }
.tw-fighter.is-foe .tw-kvg__item.is-line { border-left-color: var(--foe-line); }
.tw-fighter.is-me .tw-kvg__item.is-strong .tw-kvg__v { color: var(--me); }
/* 결정 DF6(2026-09-30): 좁은 화면(≤420px, 375·360)에서 '사거리 0~110' 이 줄바꿈되지 않게 — 카드 안쪽 여백·칸 간격·라벨 아이콘을 줄인다(글자 크기는 그대로) */
@media (max-width: 420px) {
  .tw-fighter { padding-left: 10px; padding-right: 10px; }
  .tw-fighter .tw-kvg { column-gap: 2px; }
  .tw-fighter .tw-kvg__item { column-gap: 2px; padding-left: 4px; }
  .tw-fighter .tw-kvg__k { gap: 2px; }
  .tw-fighter .tw-kvg__k .tw-li { width: 11px; height: 11px; }
}
/* 360 폭(≤370px)은 스펙 칸 라벨 아이콘을 숨긴다 — 사거리에 보너스가 붙은 여섯 글자 값('50~105')도 한 줄(라벨 글자는 그대로라 뜻은 남음) */
@media (max-width: 370px) { .tw-fighter .tw-kvg__k .tw-li { display: none; } }

/* 전투 기록(새 스타일 2단계 갈래 B — 확정 시안 S7): 턴마다 상자 대신 위 가는 줄 하나로 나누고, 턴 머리는 왼쪽 옅은 굵은 글자(자간 .04em) */
.tw-log { display: grid; gap: 0; }
.tw-turn { background: transparent; border: 0; border-top: var(--bw) solid var(--line); border-radius: 0; min-width: 0; }
.tw-turn > header { padding: 8px 0 2px; color: var(--muted); text-align: left; }
.tw-turn > header h3 { font-size: var(--fs-sub); font-weight: 700; color: inherit; letter-spacing: var(--ls-card); }
/* D9: 가운데 턴 접힘(모든 턴은 DOM에 남음). 요약 줄 = '전체 기록 펼치기 · a~b턴 · n턴 접힘' */
.tw-log-fold { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; margin: 4px 0 8px; }
.tw-log-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 44px; padding: 8px 12px; font-weight: 600; color: var(--strong); text-align: center; }
.tw-log-fold > summary::-webkit-details-marker { display: none; }
.tw-log-fold > summary::before { content: "+"; color: var(--muted); font-weight: 400; }
.tw-log-fold[open] > summary::before { content: "−"; }
.tw-log-fold__close, .tw-log-fold[open] .tw-log-fold__open { display: none; }
.tw-log-fold[open] .tw-log-fold__close { display: inline; }
.tw-log-fold__body { display: grid; gap: 0; padding: 0 10px 4px; }
/* 부가 효과 줄 앞 점(글자 '✦' 대신) */
p.tw-fx::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 2px 1px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.tw-turn > header small { color: inherit; opacity: .8; margin-left: 4px; }
.tw-turn__body { padding: 4px 0 6px; display: grid; gap: 8px; }
.tw-side { display: grid; gap: 2px; min-width: 0; }
.tw-side.is-foe { justify-self: end; width: fit-content; max-width: 92%; }   /* 오른쪽 묶음: 오른쪽에 두되 시작선은 한 줄로 맞춘다 */
.tw-side.is-me { justify-self: start; max-width: 92%; }
.tw-side__head { font-size: var(--fs-body); font-weight: 700; color: var(--strong); margin-bottom: 2px; }
.tw-count { color: var(--count); }
.tw-line { font-size: var(--fs-body); line-height: 1.6; color: var(--text); }
.tw-line.is-muted, .tw-line .tw-muted { color: var(--muted); }
/* 결정 BR 보스 기믹 기록 줄: 예고(강조)·발동·차단/회피·놓친 대응·진행.
   결정 CR15(한 묶음 안 색 세로선 없음 또는 최대 1개): 줄마다 다른 색 세로선 대신 같은 옅은 세로선 + 꼬리표 글자 색으로 구분 */
.tw-gims { display: grid; gap: 2px; margin: 0 0 4px; }
.tw-gim { font-size: var(--fs-sub); line-height: 1.5; padding: 1px 6px; border-left: 2px solid var(--rule-v); color: var(--text); overflow-wrap: anywhere; }
.tw-gim__tag { font-weight: 700; margin-right: 6px; }
.tw-gim.is-warn { font-weight: 700; }
.tw-gim.is-warn .tw-gim__tag { color: var(--count); }
.tw-gim.is-fire .tw-gim__tag { color: var(--foe); }
.tw-gim.is-cancel .tw-gim__tag { color: var(--ok); }
.tw-gim.is-fail .tw-gim__tag { color: var(--bad); }
.tw-gim.is-progress { color: var(--muted); }
.tw-crit { color: var(--count); }
.tw-dmg { font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-dmg.is-me { color: var(--me); }
.tw-dmg.is-foe { color: var(--foe); }
.tw-fx { font-size: var(--fs-sub); }
.tw-fx.is-burn { color: var(--fx-burn); } .tw-fx.is-poison { color: var(--fx-poison); } .tw-fx.is-bleed { color: var(--fx-bleed); }
.tw-fx.is-slow { color: var(--fx-slow); } .tw-fx.is-dark { color: var(--fx-dark); } .tw-fx.is-earth { color: var(--fx-earth); } .tw-fx.is-holy { color: var(--fx-holy); }
.tw-fx.is-muted { color: var(--muted); }
.tw-side.is-tick { border-top: 1px solid var(--rule); padding-top: 6px; }
.tw-side.is-tick .tw-fx { font-size: inherit; }
.tw-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 4px 0 8px; }
.tw-mini__box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 9px; display: grid; gap: 3px; }
.tw-mini__box.is-me { border-color: var(--me-line); }
.tw-mini__box.is-foe { border-color: var(--foe-line); }
.tw-mini__box strong { font-size: var(--fs-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-mini__box.is-me strong { color: var(--me); }
.tw-mini__box.is-foe strong { color: var(--foe); }
.tw-mini .tw-gauge { grid-template-columns: 22px minmax(0, 1fr) auto; font-size: var(--fs-cap); }
.tw-mini .tw-gauge progress { height: 4px; }

/* 턴 종료 거리판: 수직선 + 바둑돌 */
.tw-distance { padding: 0 0 10px; display: grid; gap: 2px; }
.tw-distance figcaption { font-size: var(--fs-cap); color: var(--muted); }
.tw-distance figcaption b { color: var(--strong); }
.tw-distance svg { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }   /* CR12 넓은 본문(880px)에서 눈금 글자가 커지지 않게 [임시 520px] */
.tw-axis__line { stroke: var(--line-strong); stroke-width: 1.2; }
.tw-axis__tick { stroke: var(--line-strong); stroke-width: 1; }
/* SVG 좌표 글자(viewBox 단위 — 화면에서 확대되어 실제 크기는 더 크다): 12px 규칙 예외(tests/test_bu_foundation_20260928.py SVG_EXEMPT) */
/* 결정 CI3(2026-09-29): 거리판(viewBox 폭 240)은 폭이 좁으면 7.5단위가 화면 10px 안팎(360에서 9.7px) → 좁은 화면(≤440px)은 10단위(360에서 약 13px).
   넓은 화면은 그대로(1100에서 이미 12px 이상). 눈금·돌 숫자 둘 다. */
.tw-axis__label { font-size: 7.5px; fill: var(--faint); font-family: inherit; }
.tw-stone { stroke: none; }
.tw-stone.is-me { fill: var(--me); } .tw-stone.is-foe { fill: var(--foe); }
.tw-stone__hi.is-me { stop-color: var(--stone-me-hi); } .tw-stone__mid.is-me { stop-color: var(--me); } .tw-stone__lo.is-me { stop-color: var(--stone-me-lo); }
.tw-stone__hi.is-foe { stop-color: var(--stone-foe-hi); } .tw-stone__mid.is-foe { stop-color: var(--foe); } .tw-stone__lo.is-foe { stop-color: var(--stone-foe-lo); }
.tw-stone__label { font-size: 7.5px; font-weight: 700; font-family: inherit; }
@media (max-width: 440px) { .tw-axis__label, .tw-stone__label { font-size: 10px; } }
.tw-stone__label.is-me { fill: var(--me); }
.tw-stone__label.is-foe { fill: var(--foe); }

/* 10회 연속: 누른 회차 줄의 전투 기록 자리(회차 줄 모양은 screens_battle.css .tw-blines — 결정 CK25) */
#pick { display: grid; gap: 12px; }

/* === 영역: 공통 — 공용 기반(결정 CN 1단계) === */
/* 목록·키값(dl.tw-kv): 라벨 왼쪽(옅게) · 값 오른쪽(밝게). 가로 줄 없음(CQ10) */
.tw-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: var(--cell-py) 0; font-size: var(--fs-body); }
.tw-kv dt { color: var(--muted); font-size: var(--fs-sub); flex: 0 0 auto; max-width: 50%; }   /* 긴 값 옆에서 라벨이 한 글자씩 꺾이지 않게 */
.tw-kv dd { text-align: right; color: var(--fg-2); font-weight: var(--fw-value); min-width: 0; overflow-wrap: anywhere; }
.tw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 4px; }
.tw-stats > div { padding: var(--cell-py) 0 var(--cell-py) 5px; border-left: 2px solid var(--rule-v); display: flex; justify-content: space-between; gap: 4px; font-size: var(--fs-sub); }
.tw-stats dt { color: var(--muted); }
.tw-stats dd { font-weight: 700; color: var(--strong); }
.tw-rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); }
.tw-rows li:last-child { border-bottom: 0; }
.tw-rows a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tw-rows li > span { color: var(--muted); font-size: var(--fs-sub); white-space: nowrap; }
.tw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.tw-dot.is-win { background: var(--win); } .tw-dot.is-loss { background: var(--loss); } .tw-dot.is-draw { background: var(--draw); }

/* === 영역: 3x3 장비칸·장비 아이콘·프리셋 목록(공용) — 공용 기반. 바꿀 때 내 정보·홈 갈래와 조율 === */
/* 홈 */
.tw-profile-card { grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
.tw-profile-card h1 { font-size: var(--fs-section); color: var(--strong); }
.tw-profile-card__body { display: grid; gap: 5px; min-width: 0; }
.tw-portrait { width: 84px; height: 84px; background: transparent; border: 1px solid var(--rule-v); border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 30px; font-weight: 800; color: var(--faint); }   /* 격자 없음(CN2) */
.tw-gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tw-gear > li { min-height: 74px; padding: 8px; min-width: 0; }
.tw-gear__slot { border: 1px solid var(--slot-line); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 2px; }
.tw-gear__empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: transparent; }
.tw-gear__label { font-size: var(--fs-cap); color: var(--muted); font-weight: 600; }
.tw-gear__name { font-size: var(--fs-sub); line-height: 1.35; word-break: keep-all; color: var(--strong); }
.tw-gear__meta { font-size: var(--fs-cap); color: var(--muted); }
/* 승인 장비 아이콘 [확정 V6 2026-09-27]: 도트 최근접 확대, 32px(64px 파일)·64px(128px 파일). 바탕 없음(CN2), 가는 선만. 없으면 글자만(기존) */
.tw-eqi { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; background: transparent; border: 1px solid var(--rule-v); border-radius: var(--radius-chip); box-sizing: content-box; }
.tw-eqi.is-s { width: 32px; height: 32px; }
.tw-eqi.is-l { width: 64px; height: 64px; }
.tw-loot .tw-eqi { margin-right: 6px; }
.tw-preset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; counter-reset: p; }
.tw-preset li { counter-increment: p; font-size: var(--fs-sub); border: 1px solid var(--rule-v); border-radius: var(--radius-sm); padding: 6px 9px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tw-preset li::before { content: counter(p) "."; color: var(--faint); font-size: var(--fs-cap); min-width: 18px; }

/* === 영역: 인증·생성·설정·시트·토스트·모달 — 공용 기반 === */
/* 인증·생성 */
.tw-auth { display: grid; gap: 14px; padding-top: 10px; }
.tw-auth h1 { font-size: var(--fs-title); color: var(--strong); }
/* 가입·복구·탈퇴 취소·복구 코드·캐릭터 생성: 로그인과 같은 가운데 좁은 카드 틀(테마를 따른다) */
.tw-auth__card { width: 100%; max-width: 440px; margin: 0 auto; display: grid; gap: 14px; padding: 18px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.tw-auth__card > h1 { text-align: center; font-size: var(--fs-xl); font-weight: 800; color: var(--title); }
.tw-auth__card .tw-links { justify-content: center; }
@media (max-width: 420px) { .tw-auth__card { padding: 14px; } }
.tw-picks.is-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 캐릭터 생성 계열 6칸: 모바일 2열·넓으면 3열 */
@media (min-width: 600px) { .tw-picks.is-fam { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tw-auth__brand { color: var(--accent); font-size: var(--fs-cap); font-weight: 700; letter-spacing: .1em; }   /* 옛 깜빡이는 '_' 커서 없음(CN1) */
/* 로그인 카드(결정 AJ): 한 카드 안에 전부 — 위쪽 얇은 키비주얼 띠(워드마크 겹침) → 데네브 기록 세 줄 → 폼.
   결정 CN2: 카드도 모드마다 같은 바탕 한 가지(옛 '다크 고정 카드' 없음). 키비주얼 띠는 카드 바탕색(--lf)으로 녹아든다. */
.tw-login { padding-top: 6px; }
.tw-login__card {
  --lf: 15, 18, 26;   /* 그림 띠가 녹아드는 카드 바탕색(RGB) = --bg — 라이트 모드는 상아(아래) */
  width: 100%; max-width: 440px; margin: 0 auto; padding: 0 0 18px; overflow: hidden;
  display: grid; gap: 12px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
}
:root[data-theme="light"] .tw-login__card { --lf: 247, 242, 230; }
@media (prefers-color-scheme: light) { :root[data-theme="system"] .tw-login__card { --lf: 247, 242, 230; } }
.tw-login__card > :not(.tw-login__head) { margin-inline: 18px; }
.tw-login__card > div:empty { display: none; }   /* 비어 있는 알림 칸(#flash·#notice)이 간격을 차지하지 않게 */
.tw-login__head {
  height: 170px; display: grid; justify-items: center; align-content: end; gap: 2px; padding-bottom: 10px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--lf), 0) 30%, rgba(var(--lf), .6) 70%, rgb(var(--lf)) 100%), url("/static/img/login/keyvisual_768.jpg") center 58% / cover no-repeat;
}
@media (min-width: 480px) {
  .tw-login__head { background: linear-gradient(180deg, rgba(var(--lf), 0) 30%, rgba(var(--lf), .6) 70%, rgb(var(--lf)) 100%), url("/static/img/login/keyvisual_1280.jpg") center 58% / cover no-repeat; }
}
.tw-login__mark { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); filter: drop-shadow(0 1px 2px rgb(var(--lf))) drop-shadow(0 0 5px rgba(var(--lf), .9)); }
.tw-login__mark .tw-brand__icon { width: 30px; height: 30px; }
.tw-login__mark .tw-brand__word { height: 20px; }
.tw-login__sub { color: var(--fg-2); font-size: var(--fs-body); font-weight: 700; text-shadow: 0 1px 3px rgb(var(--lf)), 0 0 8px rgb(var(--lf)); }
.tw-login__story { display: grid; gap: 2px; padding: 2px 0 2px 10px; border-left: 2px solid var(--rule-v); }
.tw-login__speaker { font-size: var(--fs-cap); color: var(--accent); }
.tw-login__story li { font-size: var(--fs-sub); line-height: 1.6; color: var(--fg); }
.tw-login .tw-form { gap: 10px; }
.tw-login .tw-form label { gap: 4px; font-size: var(--fs-sub); }
@media (max-width: 420px) {
  .tw-login__head { height: 130px; }
  .tw-login__card > :not(.tw-login__head) { margin-inline: 14px; }
}
.tw-login .tw-links { justify-content: center; }
.tw-form { display: grid; gap: 14px; }
.tw-form label { display: grid; gap: 6px; font-size: var(--fs-body); }
.tw-form input[type="text"], .tw-form input[type="password"] { font: inherit; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; color: var(--fg-2); }
.tw-form input[type="text"]:focus, .tw-form input[type="password"]:focus { border-color: var(--accent); outline: 0; }
.tw-input-row { display: flex; gap: 6px; }
.tw-input-row .tw-btn { flex: none; white-space: nowrap; }   /* '보기/숨기기'가 좁은 칸에서 세로로 꺾이지 않게 */
.tw-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.tw-form legend { font-size: var(--fs-body); padding: 0; margin-bottom: 8px; }
.tw-check { display: flex !important; align-items: center; gap: 10px; }
.tw-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.tw-agree { background: transparent; border: 1px solid var(--line) !important; border-radius: var(--radius-sm); padding: 12px 14px !important; }
.tw-steps { display: flex; gap: 6px; font-size: var(--fs-cap); color: var(--faint); }
.tw-steps li { flex: 1; padding-top: 6px; border-top: 2px solid var(--line); }
.tw-steps li.is-done { border-color: var(--muted); color: var(--muted); }
.tw-steps li[aria-current="step"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.tw-picks { display: grid; gap: 5px; }
.tw-picks.is-2 { grid-template-columns: repeat(2, 1fr); }
.tw-picks.is-3 { grid-template-columns: repeat(3, 1fr); }
.tw-picks.is-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 380px) { .tw-picks.is-5 { grid-template-columns: repeat(3, 1fr); } }
.tw-pick { position: relative; display: block !important; }
.tw-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.tw-pick span { display: grid; gap: 2px; min-height: 48px; align-content: center; text-align: center; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: transparent; font-size: var(--fs-body); }
.tw-pick small { font-size: var(--fs-cap); }
.tw-pick input:checked + span { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 700; }   /* 고른 칸 = 인디고 선·글자(채움 없음) */
.tw-pick input:checked + span small, .tw-pick input:checked + span strong { color: inherit; }
.tw-pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-code { font-size: var(--fs-section); text-align: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--strong); user-select: all; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* 이용 제한 안내 상자(결정 CV8 — core.js restrictionState: 로그인 정지 안내·고객센터 제한 목록). 라벨 위·값 아래 두 줄(좁은 카드에서 긴 문장이 꺾여도 읽히게) */
.tw-restrict { display: grid; gap: 6px; margin-top: 4px; }
.tw-restrict > div { display: grid; gap: 1px; padding-left: 10px; border-left: 2px solid var(--rule-v); }
.tw-restrict dt { font-size: var(--fs-cap); color: var(--muted); }
.tw-restrict dd { margin: 0; font-size: var(--fs-sub); color: var(--fg); line-height: var(--lh-loose); overflow-wrap: anywhere; }
/* 시험 서비스 고지 줄(결정 CV8 — core.js serviceNote: 로그인·가입·홈). 작은 보조 글자 + ⓘ 모양 선 아이콘, 바탕·테두리 없음 */
.tw-svc-note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-cap); line-height: var(--lh-loose); color: var(--muted); }
.tw-svc-note .tw-li { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--accent); }
.tw-svc-note.is-ended .tw-li { color: var(--warn); }
/* 대전 '맹약' 칩 + 규칙 ⓘ(결정 CX1·DB3 — core.js pactChip). 칩(상태 태그)과 ⓘ 를 한 덩어리로 */
.tw-pact { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.tw-pact__now { margin-bottom: 6px; color: var(--fg-2); font-variant-numeric: tabular-nums; }

/* 시트·토스트·모달(떠 있는 겹 칸: 불투명 바탕 + 선 + 부드러운 그림자, 옛 '반전 막대 제목'·오프셋 그림자 없음) */
.tw-sheet { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--bg); border-top: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--pop-shadow); padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.tw-sheet__inner { max-width: var(--content-w); margin: 0 auto; display: grid; gap: 10px; }
.tw-sheet h2 { color: var(--strong); font-size: var(--fs-strong); }
.tw-sheet ul { display: grid; gap: 6px; font-size: var(--fs-body); color: var(--muted); }
.tw-sheet li::before { content: "- "; }
.tw-toast { position: fixed; top: 62px; left: 50%; transform: translateX(-50%); z-index: 55; width: min(480px, calc(100% - 24px)); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); padding: 10px 14px; display: grid; gap: 2px; font-size: var(--fs-body); }
.tw-toast span { color: var(--muted); font-size: var(--fs-sub); }
.tw-toast.is-bad { border-color: var(--bad); }   /* core.js toast(제목, 설명, 'bad') — role=alert */
.tw-toast.is-bad > strong { color: var(--bad); }
/* 결정 DS4: toast(…, {action}) 행동 단추 — 글 두 줄은 왼쪽, 단추는 오른쪽(두 줄 높이 가운데) */
.tw-toast.has-action { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.tw-toast.has-action > strong, .tw-toast.has-action > span { grid-column: 1; }
.tw-toast__act { grid-column: 2; grid-row: 1 / span 2; }
.tw-toast .tw-toast__act span { color: inherit; font-size: inherit; }
#tw-modal { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--fg); padding: 0; width: min(420px, calc(100% - 32px)); box-shadow: var(--pop-shadow); }
#tw-modal::backdrop { background: var(--scrim, #000c); }
.tw-modal { display: grid; gap: 0; }
.tw-modal h2 { font-size: var(--fs-strong); font-weight: 700; padding: 14px 14px 6px; color: var(--fg-2); }
.tw-modal .tw-kv { padding: 4px 14px 8px; }
.tw-modal .tw-ask__detail { padding: 6px 14px 0; color: var(--fg); }   /* 확인 대화상자 confirmAsk(결정 BU5): 질문 아래 한두 문장 */
.tw-ask > .tw-actions { padding-top: 14px; }
.tw-modal .tw-actions { justify-content: flex-end; padding: 0 14px 14px; }
/* 좁은 화면(≤480px): 모달은 아래에서 올라오는 하단 시트. 행동 바는 아래 고정, 주 버튼은 오른쪽(마크업 순서 그대로) */
@media (max-width: 480px) {
  #tw-modal { width: 100%; max-width: 100%; max-height: 88vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--radius) var(--radius) 0 0; }
  #tw-modal[open] { animation: tw-sheet-up .16s ease-out; }
  #tw-modal .tw-modal > .tw-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
  #tw-modal .tw-modal > .tw-actions .tw-btn { flex: 1 1 auto; }
}
@keyframes tw-sheet-up { from { transform: translateY(24px); opacity: .6; } }

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