/* 도시 메뉴 화면(ui-city 2026-09-26). app.css 토큰만 쓴다. MS-DOS 감성: 직각, 점선 구분. 상자는 규칙·상태·지도에만.
   UI 개편 묶음 2(결정 AP1 D1~D13, 2026-09-28): 이 파일의 .tw-ct-* 는 도시 계열 공용 스타일이다(은행·이동·도시관리·낚시터 + 분리된 대장간·상점·창고·거래소가 같이 쓴다).
   탭은 공통 탭 규격(선택 = 굵은 밑줄, 1단 균등 폭 / 2단 가로 이동), 규칙 상자는 공통 접힘 알림 모양, 섹션은 섹션 패널(.tw-panel-sec).
   형광 녹(--phos)은 쓰지 않는다(결정 AQ1). 현재 위치 = --me(라이트 검정). 이웃 강조는 녹색 대신 중립 반투명(라이트에서 녹색 UI 금지).
   결정 CN·CQ·CR 새 스타일(갈래 C, 2026-09-30): 옛 '직각·점선 구분' 폐기 — 칸 바탕 없음(CN2), 모서리 16·8·3, 라벨·값 칸 = 값 칸 세로선(CQ10 가로 줄 없음),
   목록 줄 사이 = 가는 줄(--rule), 선택 = 인디고 선·글자(CR15 색 세로선은 묶음에 하나만), 등급색 빛 번짐 없음(색만), 입력 칸 44px·모서리 8. */

.tw-ct-screen { display: grid; gap: var(--sp-4); min-width: 0; }
.tw-ct-screen .tw-chip { white-space: normal; max-width: 100%; line-height: var(--lh-tight); }
.tw-ct-card { gap: var(--sp-3); }
.tw-ct-form > .tw-btn.is-primary.is-block { margin-top: var(--sp-3); }   /* 주 행동: 위 요소와 약 24px(폼 간격 포함) */
.tw-ct-sum { min-width: 0; }
.tw-ct-rule { font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tw-ct-sec.tw-panel-sec { gap: var(--sp-2); }
.tw-ct-sec.tw-panel-sec .tw-ct-list { border-top-color: var(--rule); }

/* 요약 키값(S7 kv 칸 모양): 한 줄 2~3개(CN5) — 칸 = 라벨 왼쪽(옅게)·값 오른쪽(밝게) + 칸 왼쪽 가는 세로선(장식), 가로 줄 없음(CQ10) */
.tw-ct-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 2px var(--col-gap); min-width: 0; }
.tw-ct-kv > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: var(--sp-1); padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); font-size: var(--fs-body); min-width: 0; }
.tw-ct-kv dt { color: var(--muted); flex: none; font-size: var(--fs-label); }
.tw-ct-kv dd { margin-left: auto; color: var(--fg-2); font-weight: var(--fw-value); text-align: right; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; font-variant-numeric: tabular-nums; }
.tw-ct-sec { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-ct-sec .tw-section-title { margin: var(--sp-1) 0 0; }
.tw-ct-out:empty { display: none; }
.tw-ct-big { font-size: var(--fs-strong); }

/* 탭(계획서 2-4, 결정 AP1 → CN S1): 공통 .tw-tabs 규격을 이 클래스에 그대로 — 1단 = 균등 폭·44px·지금 탭 = 밝은 글자 + 인디고 2px 밑줄, 좁으면 두 줄 글자 허용(말줄임 금지).
   2단(.is-sub, 탭 5개 이상) = 가로 이동(탭 줄만)·1px 밑줄·줄바꿈 없음. 선택자(.tw-ct-tabs [role=tab]·data-ct-tab)는 시험이 찾으므로 그대로 */
.tw-ct-tabs { display: flex; min-width: 0; border-bottom: 1px solid var(--line); }
.tw-ct-tabs > button { font: inherit; font-size: var(--fs-body); flex: 1 1 0; min-width: 0; min-height: 44px; padding: var(--sp-2) var(--sp-2); background: none; color: var(--muted); border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; line-height: var(--lh-tight); white-space: normal; overflow-wrap: anywhere; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); text-align: center; }
.tw-ct-tabs > button:hover:not(:disabled) { color: var(--fg-2); }
.tw-ct-tabs > button[aria-selected="true"] { color: var(--fg-2); border-bottom-color: var(--sel); font-weight: 600; }
.tw-ct-tabs > button small { color: inherit; opacity: .75; font-variant-numeric: tabular-nums; }
.tw-ct-tabs > button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.tw-ct-tabs > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tw-ct-tabs.is-sub { overflow-x: auto; scrollbar-width: none; border-bottom-color: var(--line); }
.tw-ct-tabs.is-sub::-webkit-scrollbar { display: none; }
.tw-ct-tabs.is-sub > button { flex: none; min-width: 56px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sub); white-space: nowrap; }
@media (min-width: 600px) { .tw-ct-tabs.is-sub > button { min-width: 72px; } }
.tw-ct-tabwhy { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-cap); color: var(--muted); margin-top: calc(-1 * var(--sp-1)); }
.tw-ct-panel { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-ct-panel:empty { display: none; }

/* 목록 행: 이름(왼쪽) · 가격·행동(오른쪽). 좁으면 아래로 접힌다. 행 사이 1px 선·누르는 줄 hover(계획서 2-4 목록 행) */
.tw-ct-list { border-top: var(--bw) solid var(--rule); min-width: 0; }
.tw-ct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-1); border-bottom: var(--bw) solid var(--rule); min-width: 0; }
.tw-ct-list > .tw-ct-row:last-child { border-bottom: 0; }
.tw-ct-row__main { flex: 1 1 200px; display: grid; gap: 2px; min-width: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.tw-ct-row__side { display: grid; gap: 1px; justify-items: end; text-align: right; font-size: var(--fs-body); min-width: 0; }
.tw-ct-row__side small, .tw-ct-row__main small { font-size: var(--fs-cap); }
.tw-ct-row.is-stack .tw-ct-more { margin-left: auto; }
.tw-ct-price { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-ct-desc { color: var(--muted); }
.tw-ct-detail { flex: 1 1 100%; display: grid; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-1) var(--sp-3); border-left: 2px solid var(--rule-v); min-width: 0; }
.tw-ct-affixline { font-size: var(--fs-sub); }

/* 입력(시스템 글꼴 상속 — 결정 CN: 선 --line-strong · 모서리 8 · 높이 44, 초점 = 인디고 선) */
.tw-ct-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); min-width: 0; }
.tw-ct-act label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-ct-in { font: inherit; font-size: var(--fs-body); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: var(--bw) solid var(--line-strong); background: transparent; color: var(--fg-2); border-radius: var(--radius-btn); max-width: 100%; min-width: 0; }
.tw-ct-in:focus { border-color: var(--accent); outline: 0; }
.tw-ct-in.is-short { width: 5.5em; }
textarea.tw-ct-in { width: 100%; resize: vertical; line-height: var(--lh-base); }
/* 결정 AX1: 은행 잔고 카드 2장(큰 숫자) · 카드별 '+/−금액'(성공 직후 한 번) · 빠른 금액 칩 · 창고 링크 */
.tw-ct-bal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.tw-ct-bal__card { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-2) var(--sp-3) var(--sp-3); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-ct-bal__card > span { font-size: var(--fs-card); letter-spacing: var(--ls-card); color: var(--muted); font-weight: 700; }
.tw-ct-bal__card b { font-size: var(--fs-bignum); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-ct-bal__card.is-bank { border-color: var(--gold); }   /* 결정 CN: 은행 = 금색 외곽선만(옛 왼쪽 4px 띠 없음 — CR15) */
.tw-ct-bal__sub { font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; }
/* 결과 배지: 테두리는 회색(결정 BT4 — 라이트 칩·배지 테두리 검정/회색), 뜻은 글자색(+ 성공 녹 / − 빨강) */
.tw-ct-bal__delta { justify-self: start; font-size: var(--fs-sub); font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px var(--sp-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); }
.tw-ct-bal__delta.is-up { color: var(--ok); }
.tw-ct-bal__delta.is-down { color: var(--bad); }
.tw-ct-bal__card.is-changed b { animation: tw-ct-bal-flash .9s ease-out 1; }
@keyframes tw-ct-bal-flash { from { color: var(--gold); } }   /* 결정 CN1: 빛 번짐 없음 — 색만 잠깐 */
@media (max-width: 420px) { .tw-ct-bal__card { padding: var(--sp-3); } .tw-ct-bal__card b { font-size: var(--fs-section); } }
.tw-ct-in.is-big { font-size: var(--fs-section); min-height: 46px; font-variant-numeric: tabular-nums; }
.tw-ct-fills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tw-ct-fills .tw-btn { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); }
.tw-ct-goldacts .tw-btn { flex: 1 1 130px; min-width: 0; overflow-wrap: anywhere; }
.tw-ct-link { font-size: var(--fs-sub); color: var(--muted); }
.tw-ct-link a { color: var(--link); font-weight: 600; text-decoration: none; position: relative; }
.tw-ct-link a::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: 누름 영역 44 */
.tw-ct-form { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-ct-form > label { display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-ct-form > label .tw-ct-in { width: 100%; }
.tw-ct-search { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; min-width: 0; }
.tw-ct-search > select { flex: 1 1 calc(33% - 6px); min-width: 0; }
.tw-ct-grow { flex: 1 1 100%; display: grid; gap: var(--sp-1); font-size: var(--fs-body); }
.tw-ct-grow .tw-ct-in { width: 100%; }
.tw-ct-fs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-1); min-width: 0; }
.tw-ct-fs legend { font-size: var(--fs-sub); color: var(--muted); padding: 0; margin-bottom: var(--sp-1); }
.tw-ct-radios { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.tw-ct-radio, .tw-ct-check { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-body); min-height: 32px; cursor: pointer; }
.tw-ct-radio input, .tw-ct-check input { margin: var(--sp-1) 0 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.tw-ct-radio span, .tw-ct-check span { display: grid; gap: 1px; min-width: 0; }
.tw-ct-checks { display: grid; gap: 2px; }
.tw-ct-checks li { padding: var(--sp-1) 0; }
.tw-ct-affixes { display: grid; gap: 2px; }
.tw-ct-affixes li { display: flex; align-items: center; gap: var(--sp-3); padding: 2px 0 2px var(--deco-pl); border-left: 2px solid var(--rule-v); flex-wrap: wrap; }
.tw-ct-affix { font-size: var(--fs-body); }
.tw-ct-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }

/* 장비 고르기: 선택 = 왼쪽 인디고 2px 선 하나(목록 안 하나뿐 — CR15), 등급색 글자는 유지 */
.tw-ct-picks { display: grid; gap: 0; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); max-height: 340px; overflow-y: auto; }
.tw-ct-pick { font: inherit; width: 100%; text-align: left; display: grid; gap: 1px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); min-height: 44px; background: transparent; color: var(--fg); border: 0; border-bottom: var(--bw) solid var(--rule); border-left: 2px solid transparent; cursor: pointer; overflow-wrap: anywhere; }
.tw-ct-pick:last-child { border-bottom: 0; }
.tw-ct-pick:hover { border-left-color: var(--line-hover); }
.tw-ct-pick.is-current { border-left-color: var(--accent); }
.tw-ct-pick small { font-size: var(--fs-cap); }
.tw-ct-detail-body { display: grid; gap: var(--sp-2); }

/* 표: 좁으면 표 안에서만 가로 이동 */
.tw-ct-table { overflow-x: auto; max-width: 100%; }
.tw-ct-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.tw-ct-table th, .tw-ct-table td { text-align: left; padding: var(--sp-1) var(--sp-2); border-bottom: var(--bw) solid var(--rule); white-space: nowrap; }
.tw-ct-table th { color: var(--muted); font-weight: 600; font-size: var(--fs-cap); border-bottom-color: var(--line); }
/* 결정 U8(2026-09-27): 표 칸 안 칩(방어선 '도시대표')은 줄바꿈 없이 칸 폭에 들어가게. 위 .tw-ct-screen .tw-chip의 max-width:100%가
   표 칸 폭 계산에서 0으로 취급돼 칩이 옆 칸(계열·차수)과 겹쳤다. 좁으면 표 안에서만 가로 이동한다. */
.tw-ct-screen .tw-ct-table .tw-chip { white-space: nowrap; max-width: none; }
.tw-ct-fold summary { cursor: pointer; font-size: var(--fs-sub); color: var(--muted); min-height: 44px; display: flex; align-items: center; }
.tw-ct-fold[open] summary { margin-bottom: var(--sp-2); }
.tw-ct-log { display: grid; gap: 2px; font-size: var(--fs-sub); }
.tw-ct-log li span:first-child { color: var(--faint); font-variant-numeric: tabular-nums; margin-right: var(--sp-2); }

/* 결정 CG4 D5(2026-09-29): 옛 규칙 상자(.tw-ct-rules) 모양은 쓰는 화면이 없어(이동 화면도 제목 옆 ⓘ로 옮김) screens_city.js rulesBox와 함께 지웠다. */

/* 등급색 [확정]: 일반 흰 · 고급 녹 · 희귀 청록(CR10) · 영웅 황금 · 전설 빨강 · 성유물 흰 굵은. +N은 같은 요소 안이라 같은 색.
   결정 CN1(갈래 C): 옛 불씨·광휘(빛 번짐 text-shadow)는 DOS 흔적이라 뺐다 — 색·굵기만(공용 전리품 .tw-loot 와 같은 규칙) */
/* 색은 app.css 공통 등급 토큰(--grade-*)만 쓴다 */
.tw-ct-g { color: var(--grade-common); font-weight: 700; }
.tw-ct-g.is-uncommon { color: var(--grade-uncommon); }
.tw-ct-g.is-rare { color: var(--grade-rare); }
.tw-ct-g.is-heroic { color: var(--grade-heroic); }
.tw-ct-g.is-legendary { color: var(--grade-legendary); }
.tw-ct-g.is-relic { color: var(--grade-relic); font-weight: var(--grade-relic-weight); }
.tw-ct-g.is-replica { color: var(--grade-replica); }
.tw-ct-gname { color: var(--muted); }

/* 세계 지도(이동) 스타일은 결정 BE5(2026-09-28)로 screens_travel.css(.tw-tv-*)로 옮겼다. */

/* 도시관리 현황 지표 타일(모바일 2칸·≥600px 4칸, 공통 .tw-tiles.is-4). 길드 이름 등 긴 값은 줄바꿈, 보조 줄은 흐림(증분 색 아님) */
.tw-ct-tiles > div { grid-template-rows: auto auto auto; }
.tw-ct-tiles dd:not(.tw-delta) { font-size: var(--fs-strong); }
.tw-ct-tiles .tw-delta { color: var(--muted); line-height: var(--lh-base); overflow-wrap: anywhere; }


.tw-ct-health { display: grid; gap: var(--sp-2); }

@media (max-width: 420px) {
  .tw-ct-row__side { justify-items: start; text-align: left; }
  .tw-ct-act { justify-content: flex-start; }
  .tw-ct-search > select { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 370px) {
  .tw-ct-tabs > button { padding: var(--sp-2) var(--sp-1); }
  .tw-ct-tabs.is-sub > button { padding: var(--sp-2); }
  .tw-ct-kv > div { font-size: var(--fs-sub); }
  .tw-ct-search > select { flex: 1 1 100%; }
  .tw-ct-in.is-short { width: 4.5em; }
}