/* 정보·설정 메뉴·홈 전용(ui-info 2026-09-26). app.css 토큰만 쓴다. MS-DOS 감성: 직각, 점선 구분, 반전 선택 막대.
   좁은 화면(≤420px·≤370px)에서 가로 넘침이 없도록 긴 글자는 줄바꿈 또는 한 줄 말줄임.
   UI 개편 묶음 4(결정 AP1 D1~D13, 2026-09-28): 표면 3단계(페이지 카드 › 섹션 › 행), 가운데 화면 제목(app.css .tw-page-head),
   탭은 밑줄 선택(반전 막대 대신), 목록 행 3줄(칩·상대 시간 / 제목 / 보조·지표), 규칙 상자는 접힘 알림(details.tw-note) 모양.
   라이트 모드(결정 AQ1): 형광 녹·아군색은 검정 계열 — 이 파일은 --phos를 쓰지 않고, 지도 현재 위치만 --me(라이트 검정)를 쓴다. */
.tw-i-screen { display: grid; gap: var(--sp-4); min-width: 0; }
.tw-i-screen > * { min-width: 0; }
.tw-i-oneline { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; min-width: 0; }
.tw-i-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-loose); font-size: var(--fs-body); }

/* 섹션 = 페이지 카드(바탕 --surface + 테두리). 제목 h2 왼쪽 굵게(--fs-lg). 라이트에서도 배경(--bg)과 구분된다 */
.tw-i-sect { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
@media (min-width: 600px) { .tw-i-sect { padding: var(--sp-4) var(--sp-4); } }
.tw-i-sect > h2, .tw-i-h2 { font-size: var(--fs-strong); font-weight: 700; color: var(--fg-2); }
.tw-i-sect h3 { font-size: var(--fs-sub); color: var(--muted); margin-top: var(--sp-1); }
.tw-i-sect.is-danger { border-color: var(--edge-bad); }   /* 결정 CN: 위험 구역 = 빨강 외곽선(왼쪽 띠 없음) */
.tw-i-plain { display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-i-note { font-size: var(--fs-sub); color: var(--muted); border-left: 2px solid var(--line); padding-left: var(--sp-2); }
/* 목록을 담는 카드(섹션 제목 없이 쓰는 목록: 공지·편지·글·길드 목록·랭킹·로그) */
.tw-i-card { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-i-sect .tw-i-card { border-color: var(--line); }

/* 결정 CG4 D5(2026-09-29): 옛 규칙 상자(.tw-i-rules·.tw-i-tag)와 옛 메뉴얼 목록(.tw-i-manual) 모양은 쓰는 곳이 없어(BS② — 제목 옆 ⓘ·새 메뉴얼 화면) 지웠다. */

/* 화면 안 탭(1단: 길드·메뉴얼·랭킹): 결정 CN S1 — 지금 탭 = 밝은 글자 + 인디고 2px 밑줄, 비선택 흐림. 한 줄, 넘치면 탭 줄만 가로 이동 */
.tw-i-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; min-width: 0; }
.tw-i-tabs::-webkit-scrollbar { display: none; }
.tw-i-tabs button { font: inherit; font-size: var(--fs-body); flex: 1 0 auto; min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.tw-i-tabs button:hover { color: var(--fg-2); }
.tw-i-tabs button[aria-selected="true"] { color: var(--fg-2); border-bottom-color: var(--sel); font-weight: 600; }
.tw-i-panel { display: grid; gap: var(--sp-4); min-width: 0; }
.tw-i-panel > * { min-width: 0; }
/* 하위 탭(2단, 길드 > 내 길드): 공통 .tw-tabs.is-sub + 구역 */
.tw-i-subtabs { margin-top: calc(-1 * var(--sp-2)); }
.tw-i-subpanel { display: grid; gap: var(--sp-4); min-width: 0; }
.tw-i-subpanel > * { min-width: 0; }

/* 목록 행(3줄): ①칩·상대 시간 ②제목 ③보조 — 오른쪽 지표(.tw-i-row__meta) */
.tw-i-list { border-top: 1px solid var(--rule); }
.tw-i-list.tw-i-card { border-top: 1px solid var(--line); }
.tw-i-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-2); padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--rule); border-left: 2px solid transparent; font-size: var(--fs-body); min-width: 0; }
.tw-i-list > li:last-child { border-bottom: 0; }
.tw-i-list > li.is-pinned { border-left-color: var(--fg-2); }
.tw-i-list > li.is-muted { border-left-color: var(--faint); color: var(--muted); }
.tw-i-row { font: inherit; flex: 1 1 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1); min-height: 44px; border: 0; background: transparent; color: var(--fg); text-align: left; cursor: pointer; }
.tw-i-row:hover .tw-i-row__main > b { color: var(--accent); }
.tw-i-row__main { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 auto; }
.tw-i-row__main small { overflow-wrap: anywhere; }
.tw-i-row__main > b { color: var(--fg-2); }
.tw-i-notice-summary { min-width: 0; flex: 1; overflow-wrap: anywhere; line-height: var(--lh-loose); }
.tw-i-notice-summary b { color: var(--fg-2); }
.tw-i-notice-kind, .tw-i-notice-date { white-space: nowrap; color: var(--muted); font-size: var(--fs-sub); }
.tw-i-row__top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); color: var(--muted); min-width: 0; }
.tw-i-row__top > time.tw-rel { margin-left: auto; }
.tw-i-row__top .tw-chip { padding: var(--sp-1) var(--sp-2); }
.tw-i-row__meta { font-size: var(--fs-cap); color: var(--muted); text-align: right; flex: none; display: grid; justify-items: end; gap: var(--sp-1); }
/* 결정 CN: 옛 +/− 글자 → 공용 접힘 화살표(닫힘 아래 · 열림 위) */
.tw-i-fold { flex: none; width: 18px; display: inline-grid; place-items: center; color: var(--muted); }
.tw-i-fold::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.tw-i-row[aria-expanded="true"] .tw-i-fold::before { transform: translateY(2px) rotate(-135deg); }
.tw-i-detail { flex: 1 1 100%; display: grid; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1) var(--sp-2); border-left: 2px solid var(--rule-v); min-width: 0; }
.tw-i-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tw-i-mini { font: inherit; font-size: var(--fs-sub); min-height: 44px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); cursor: pointer; }
.tw-i-mini { position: relative; }
.tw-i-mini::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: 댓글·쪽지 머리의 작은 단추(32·28)도 누름 영역 44 */
.tw-i-mini:hover:not(:disabled) { border-color: var(--line-hover); }
.tw-i-mini:disabled { opacity: .4; cursor: not-allowed; }
.tw-i-mini.is-danger { color: var(--bad); border-color: var(--bad); }
.tw-i-dot { color: var(--warn); font-size: var(--fs-cap); }
.tw-i-chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: var(--sp-2); vertical-align: middle; }

/* 쪽 넘김: 이전 · 1 … 4 5 [6] 7 8 … N · 다음. 좁은 화면(≤420)은 숫자 대신 'n / N' */
.tw-i-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-i-pager__nums { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.tw-i-pager__n { font: inherit; font-size: var(--fs-sub); min-width: 36px; min-height: 36px; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--fg); cursor: pointer; font-variant-numeric: tabular-nums; }
.tw-i-pager__n[aria-current="page"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }   /* 지금 쪽 = 인디고 선·글자(채움 없음) */
.tw-i-pager__gap { color: var(--faint); }
.tw-i-pager__of { display: none; font-variant-numeric: tabular-nums; }

/* 입력 */
.tw-i-screen textarea, .tw-i-screen select, .tw-i-screen input[type="number"], .tw-i-screen input[type="search"] { font: inherit; font-size: var(--fs-body); width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); border-radius: var(--radius-btn); max-width: 100%; }
.tw-i-screen textarea { resize: vertical; line-height: var(--lh-loose); }
.tw-i-screen textarea:focus, .tw-i-screen select:focus, .tw-i-screen input:focus { border-color: var(--fg-2); outline: 0; }
.tw-i-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.tw-i-inline label { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); flex: 1 1 160px; min-width: 0; }
.tw-i-write summary { cursor: pointer; font-size: var(--fs-body); font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--fg-2); }
.tw-i-write[open] summary { margin-bottom: var(--sp-2); }

/* 등급 색: 이름과 +N이 같은 색(일반 흰 · 고급 녹 · 희귀 파 · 영웅 황금 · 전설 빨강+불씨 · 성유물 흰 굵은+광휘). 레플리카는 색 미정 → 기본 글자색 */
.tw-i-g { color: var(--fg); overflow-wrap: anywhere; }
/* 색은 app.css 공통 등급 토큰(--grade-*)만 쓴다 */
.tw-i-g.is-common { color: var(--grade-common); }
.tw-i-g.is-uncommon { color: var(--grade-uncommon); }
.tw-i-g.is-rare { color: var(--grade-rare); }
.tw-i-g.is-heroic { color: var(--grade-heroic); }
.tw-i-g.is-replica { color: var(--grade-replica); }
.tw-i-g.is-legendary { color: var(--grade-legendary); animation: tw-i-ember var(--ember-period, 1.8s) ease-in-out infinite alternate; }
.tw-i-g.is-relic { color: var(--grade-relic); font-weight: var(--grade-relic-weight); }
@keyframes tw-i-ember { from { } to { } }
@media (prefers-reduced-motion: reduce) { .tw-i-g.is-legendary { animation: none; } }

/* 홈(카드 모양은 app.css 홈 영역) — 공지 한 줄·인기글 행·랭킹 순환(결정 BJ 새 모양은 screens_home.css) */
.tw-home-notice__line > a.tw-i-notice-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); text-underline-offset: 3px; }
.tw-i-hype { display: grid; gap: 0; min-width: 0; width: 100%; }
.tw-i-hype__row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: var(--sp-1) 0; border-top: 1px solid var(--rule); }
.tw-i-hype__row:first-child { border-top: 0; padding-top: 0; }
.tw-i-hype__row .tw-chip { flex: none; }
.tw-i-hype__row .tw-i-oneline { flex: 1 1 auto; }
.tw-i-hype__row small { flex: none; }
.tw-home-log .tw-i-oneline { flex: 1 1 auto; }
/* 결정 U8(2026-09-27): #tw-main은 열 폭이 auto인 grid라 자식의 최소 내용 폭만큼 열이 넓어진다. 랭킹 줄(nowrap 카드 + 넘김 버튼)의
   최소 내용 폭이 화면보다 넓어(새 캐릭터 375px에서 382~396px) 홈 전체가 가로로 넘쳤다 → 홈 줄은 최소 폭 0(안에서 말줄임·줄바꿈). */
.tw-home-row, .tw-home-log { min-width: 0; }
.tw-i-rank__line { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-i-rank__view { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.tw-i-rank__card { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; white-space: nowrap; }
.tw-i-rank__card b { flex: 0 0 auto; }   /* U8: 1위 이름은 줄이지 않는다(종류 이름·부가 정보가 먼저 줄어든다) */
.tw-i-rank__card > .tw-muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 0 100 auto; }
.tw-i-rank__card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1000 auto; }   /* U8: 좁으면 이름보다 부가 정보가 먼저 줄어든다 */
.tw-i-rank__card.is-in-r { animation: tw-i-in-r .4s ease-out; }
.tw-i-rank__card.is-in-l { animation: tw-i-in-l .4s ease-out; }
@keyframes tw-i-in-r { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tw-i-in-l { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tw-i-rank__card.is-in-r, .tw-i-rank__card.is-in-l { animation: none; } }
.tw-i-rank__nav { display: inline-flex; gap: var(--sp-1); flex: none; }
.tw-i-rank__nav .tw-icon-btn { width: 36px; height: 36px; }
.tw-i-rank__dots { display: flex; justify-content: center; gap: var(--sp-2); }
.tw-i-rank__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tw-i-rank__dots i.is-on { background: var(--accent); }

/* 공지: 펼친 본문의 작성자/검증 표식/승인 프로필 */
.tw-i-sign { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-2); font-size: var(--fs-sub); min-width: 0; }
.tw-i-notices .tw-i-sign { flex: 1 1 100%; padding: 0 var(--sp-1) var(--sp-1); }
.tw-i-notices .tw-i-row[aria-expanded="true"] + .tw-i-sign { display: none; }   /* 펼치면 본문 위 큰 서명만 */
.tw-i-sign__who { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); min-width: 0; }
.tw-i-avatar { width: 32px; height: 32px; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; object-fit: cover; }
.tw-i-avatar.is-big { width: 64px; height: 64px; }
.tw-i-avatar--bob { object-fit: contain; }

/* 메뉴얼: 주제 제목(아래 2px 선) → 소제목 → 글머리(줄 간격 1.6+) */
.tw-i-chapter { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-i-chapter h2 { font-size: var(--fs-strong); color: var(--fg-2); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line); }
.tw-i-chapter p { line-height: var(--lh-loose); overflow-wrap: anywhere; }
.tw-i-burn { font-size: var(--fs-cap); font-weight: 700; color: var(--fx-burn); }

/* 게시판(결정 AO1): 모아 보기(전체·인기) + 게시판 10종을 한 줄(가로 이동). 선택 = 밑줄 굵게. 탭 역할이 아니라 버튼 + aria-current */
.tw-i-boardbar { display: flex; align-items: stretch; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; min-width: 0; }
.tw-i-boardtabs, .tw-i-boards { display: flex; flex: none; gap: 0; }
.tw-i-boardtabs { border-right: 1px solid var(--line); margin-right: var(--sp-1); padding-right: var(--sp-1); }
.tw-i-boardtabs button, .tw-i-boards button { font: inherit; font-size: var(--fs-sub); flex: 0 0 auto; min-height: 44px; padding: var(--sp-2) var(--sp-2); border: 0; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tw-i-boardtabs button { font-weight: 700; }
.tw-i-boardtabs button[aria-current="page"], .tw-i-boards button[aria-current="page"] { color: var(--fg-2); font-weight: 700; border-bottom-color: var(--sel); }
/* 글쓰기: details 제목 줄을 주 버튼(결정 CN — 인디고 채움 = 공용 주 버튼과 같은 값) 모양으로, 펼치면 아래에 폼 */
.tw-i-write.is-compose { display: grid; }
.tw-i-write.is-compose > summary { justify-self: end; list-style: none; display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4); background: var(--btn-primary-bg); color: var(--btn-primary-fg); border: 1px solid var(--btn-primary-bg); border-radius: var(--radius-btn); font-weight: 700; cursor: pointer; }
.tw-i-write.is-compose > summary::-webkit-details-marker { display: none; }
.tw-i-write.is-compose > summary::before { content: "+"; margin-right: var(--sp-1); }
.tw-i-write.is-compose[open] > summary { background: transparent; color: var(--fg-2); border-color: var(--line); }
.tw-i-write.is-compose[open] > summary::before { content: "−"; }
.tw-i-write.is-compose > form { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); }
.tw-i-mdhelp code, .tw-i-md code { font-family: var(--font-mono); font-size: .92em; padding: 0 var(--sp-1); border: 1px solid var(--rule-v); border-radius: var(--radius-chip); background: transparent; }
.tw-i-bbar { display: grid; gap: var(--sp-2); min-width: 0; }
/* 도구 줄: 정렬 · 글 n개 · (오른쪽) 글쓰기. 글쓰기를 펼치면 폼이 줄 전체 폭으로 내려온다 */
.tw-i-bbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sub); }
.tw-i-bbar__row > .tw-hint { flex: 1 1 100%; min-width: 0; }
.tw-i-bbar__row > .tw-i-write { margin-left: auto; }
.tw-i-bbar__row > .tw-i-write[open] { flex: 1 1 100%; }
.tw-i-sort select { width: auto; min-width: 104px; min-height: 44px; padding: var(--sp-2) var(--sp-2); }
.tw-i-search { display: flex; gap: var(--sp-2); min-width: 0; }
.tw-i-search select { flex: 0 1 auto; width: auto; max-width: 40%; min-height: 44px; padding: var(--sp-2) var(--sp-2); }
.tw-i-search input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; }   /* 결정 CN(갈래 C 검토): 입력·검색 누름 높이 44 */
.tw-i-search .tw-btn { flex: none; min-height: 44px; padding: var(--sp-2) var(--sp-3); }
.tw-i-found { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-2); font-size: var(--fs-sub); }
.tw-i-found .tw-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tw-i-posts .tw-i-row__main > b { font-size: var(--fs-body); }
.tw-i-row.is-post { display: block; }
.tw-i-row__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.tw-i-row__foot > small { flex: 1 1 auto; }
.tw-i-row__foot > .tw-i-row__meta { display: block; }
.tw-i-back { justify-self: start; }
.tw-i-post { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
@media (min-width: 600px) { .tw-i-post { padding: var(--sp-4) var(--sp-4); } }
.tw-i-post h2 { font-size: var(--fs-title); color: var(--fg-2); overflow-wrap: anywhere; line-height: var(--lh-tight); }
.tw-i-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); color: var(--muted); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
/* 제한 마크다운 본문(md_lite.js가 글자 노드로 그림): 문단·목록·인용·코드만 */
.tw-i-md { display: grid; gap: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-loose); overflow-wrap: anywhere; min-width: 0; }
.tw-i-md ul, .tw-i-md ol { padding-left: 1.4em; display: grid; gap: var(--sp-1); }
.tw-i-md ul { list-style: square; }
.tw-i-md ol { list-style: decimal; }
.tw-i-md blockquote { margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); border-left: 2px solid var(--line); color: var(--muted); }
.tw-i-md pre { margin: 0; padding: var(--sp-2) var(--sp-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-sub); line-height: var(--lh-loose); }
.tw-i-md pre code { background: none; padding: 0; }
.tw-i-md strong { color: var(--fg-2); }
.tw-i-preview { padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.tw-i-comments { display: grid; gap: var(--sp-3); }
.tw-i-comments li { display: grid; gap: var(--sp-1); font-size: var(--fs-body); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--rule); }
.tw-i-comments li:last-child { border-bottom: 0; }
.tw-i-comments li p { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.tw-i-comments li p .tw-i-mini { margin-left: auto; min-height: 32px; font-size: var(--fs-cap); }

/* 채팅(결정 T6: 전역 채팅 패널 안에서만 쓴다): 카드·구분선 없이 세로 간격으로 메시지 구분 */

/* 길드: 요약 카드(요약 상자) → 하위 탭 → 섹션 카드 */
.tw-i-head { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
@media (min-width: 600px) { .tw-i-head { padding: var(--sp-4) var(--sp-4); } }
.tw-i-head h2 { font-size: var(--fs-strong); color: var(--fg-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); overflow-wrap: anywhere; }
.tw-i-screen .tw-kv dt { flex: none; white-space: nowrap; }
.tw-i-head .tw-kv dd, .tw-i-sect .tw-kv dd, .tw-i-detail .tw-kv dd, .tw-i-city .tw-kv dd { min-width: 0; overflow-wrap: anywhere; }
.tw-i-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); color: var(--faint); }
.tw-i-feats li { display: flex; justify-content: space-between; gap: var(--sp-2); border-bottom: 1px solid var(--rule); padding: var(--sp-1) 0; }
.tw-i-feats li.is-on { color: var(--fg); }
.tw-i-feats li > small { flex: none; white-space: nowrap; }
.tw-i-enemies { display: grid; gap: var(--sp-2); }
.tw-i-enemies li { display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-i-enemies li.is-done { opacity: .55; }
.tw-i-enemies li.is-done b { text-decoration: line-through; }

/* 편지: 도구 줄(거르기 알약 왼쪽 · 첨부 모두 받기·편지 쓰기 오른쪽). 읽은 편지 제목은 보통 굵기 */
.tw-i-mailbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.tw-i-mailbar .tw-filters { flex: 1 1 auto; }
.tw-i-mailbar__acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tw-i-mailbar__acts .tw-btn { min-height: 40px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sub); }
.tw-i-mails > li:not(.is-unread) .tw-i-row__main > b { font-weight: 400; color: var(--fg); }

/* 지도: 도트 격자 위 네모 노드(글자는 노드 밖 이름표) */
.tw-i-map { margin: 0; display: grid; gap: var(--sp-2); }
.tw-i-map svg { width: 100%; height: auto; display: block; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }   /* 결정 CN2: 옛 도트 격자 바탕 없음 */
.tw-i-edge { stroke: var(--line); stroke-width: .35; }
.tw-i-edge.is-near { stroke: var(--me); stroke-width: .5; }
.tw-i-node { cursor: pointer; outline: none; }
.tw-i-hit { fill: transparent; stroke: none; }
.tw-i-box { fill: var(--bg); stroke: var(--fg); stroke-width: .35; }
/* 이름표: 배경색 테두리(paint-order)로 연결선 위에서도 읽히게. 크기는 screens_info.js mapLabels의 fs와 같아야 한다(2.5 / 좁은 화면 3.2) */
/* 결정 CI3(2026-09-29): 이름표 글자는 화면에서 12px 이상 — 그린 뒤 실제 지도 폭으로 글자 크기(viewBox 단위)를 정해 --tw-i-map-fs 로 준다
   (screens_info.js map(): 12.5px ÷ (지도 폭 ÷ 104), 최소 2.5). 값이 없을 때(잴 수 없음)만 옛 크기 2.5·좁은 화면 3.2(단위). */
.tw-i-node text { font-size: var(--tw-i-map-fs, 2.5px); fill: var(--muted); font-family: inherit; paint-order: stroke fill; stroke: var(--bg); stroke-width: .8px; stroke-linejoin: round; pointer-events: none; }
.tw-i-map svg.is-lg .tw-i-node text { font-size: var(--tw-i-map-fs, 3.2px); stroke-width: 1px; }
.tw-i-node text.is-drop { display: none; }
.tw-i-node.is-sel text.is-drop, .tw-i-node:focus-visible text.is-drop, .tw-i-node:hover text.is-drop { display: inline; }
.tw-i-node.is-sel text { font-weight: 700; }
.tw-i-node.is-neutral .tw-i-box { fill: var(--bg); stroke: var(--muted); stroke-dasharray: .6 .4; }
.tw-i-node.is-hub .tw-i-box { fill: var(--bg); stroke: var(--faint); stroke-dasharray: .4 .4; }
.tw-i-node.is-chaos .tw-i-box { fill: var(--bg); stroke: var(--fx-poison); stroke-width: .5; }
.tw-i-node.is-owned .tw-i-box { fill: var(--gold); stroke: var(--gold); }
.tw-i-node.is-here .tw-i-box { fill: var(--me); stroke: var(--me); }
.tw-i-node.is-here text { fill: var(--me); font-weight: 700; }
.tw-i-node.is-sel .tw-i-box, .tw-i-node:focus-visible .tw-i-box { stroke: var(--focus); stroke-width: .7; }
.tw-i-node.is-sel text { fill: var(--fg-2); }
.tw-i-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-cap); color: var(--muted); }
.tw-i-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.tw-i-legend i { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--fg); border-radius: 2px; background: transparent; }
.tw-i-legend i.is-here { background: var(--me); border-color: var(--me); }
.tw-i-legend i.is-owned { background: var(--gold); border-color: var(--gold); }
.tw-i-legend i.is-neutral { background: transparent; border: 1px dashed var(--muted); }
.tw-i-legend i.is-chaos { background: transparent; border-color: var(--fx-poison); }
.tw-i-owners li { display: grid; gap: var(--sp-1); }
/* 현재 위치 칩: 아군색(--me, 라이트 검정 — 결정 AQ1) */
.tw-chip.is-here { color: var(--me); border-color: var(--me); }
/* 지도 '도시 목록(글)' 같은 화면 직속 접힘 상자도 카드로 */
.tw-i-screen > details.tw-i-write { background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); }
.tw-i-owner { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex-wrap: wrap; }
.tw-i-owner i { width: 9px; height: 9px; flex: none; background: var(--gold); border: 1px solid var(--gold); border-radius: 2px; align-self: center; }
/* 도시 정보 상자(요약 상자 규격) + 직업경력 특화 사냥터(#42) */
.tw-i-city { display: grid; gap: var(--sp-2); padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
@media (min-width: 600px) { .tw-i-city { padding: var(--sp-4) var(--sp-4); } }
.tw-i-city h2 { font-size: var(--fs-strong); color: var(--fg-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-i-special { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--rule); min-width: 0; }
.tw-i-special h3 { font-size: var(--fs-body); color: var(--fg-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-i-special li { display: block; line-height: var(--lh-loose); }

/* 로그(2줄: 분류 칩·시각 / 본문) · 랭킹(내 순위 상자 → 순위 행) */
.tw-i-log { display: grid; gap: 0; }
.tw-i-log li { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-body); min-width: 0; }
.tw-i-log li:last-child { border-bottom: 0; }
.tw-i-log li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.tw-i-log__top { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-cap); }
.tw-i-log__top .tw-chip { padding: var(--sp-1) var(--sp-2); }
.tw-i-rankrows { display: grid; }
.tw-i-rankrows li { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); font-size: var(--fs-body); min-width: 0; }
.tw-i-rankrows li:last-child { border-bottom: 0; }
.tw-i-rankrows li b { flex: 0 1 auto; }
.tw-i-rankrows li small { margin-left: auto; white-space: nowrap; }
.tw-i-rankrows li.is-me { color: var(--me); box-shadow: inset 2px 0 0 var(--sel); }
.tw-i-rankno { flex: none; min-width: 2.2em; text-align: right; color: var(--count); font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-i-rankno.tw-rank { font-size: var(--fs-strong); }
.tw-i-myrank { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-3); background: transparent; border: 1px solid var(--accent); border-radius: var(--radius-sm); min-width: 0; }
.tw-i-myrank b { font-size: var(--fs-bignum); }
.tw-i-myrank small { margin-left: auto; }
.tw-i-myrank.is-out { border-color: var(--line); }
/* 전역 채팅 패널·버튼·길드 채팅 모양은 결정 CB(2026-09-30, 채팅 개편 W3)로 static/chat_panel.css 에 옮겼다(새 스타일 토큰으로 다시 씀). */
/* 고객센터·버그신고 안내 문단(링크 없이 경로 글) */
.tw-i-guide { display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-i-guide li::before { content: "- "; color: var(--faint); }


@media (max-width: 420px) {
  .tw-i-tabs button { padding: var(--sp-2) var(--sp-2); }
  .tw-i-pager__nums { display: none; }
  .tw-i-pager__of { display: inline; }
  .tw-i-list > li { padding: var(--sp-2) var(--sp-2); }
}
@media (max-width: 370px) {
  .tw-i-tabs button { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-sub); }
  .tw-i-rank__card small { display: none; }
  .tw-i-feats { grid-template-columns: 1fr; }
  .tw-i-boardtabs button, .tw-i-boards button { padding: var(--sp-2) var(--sp-2); }
}