/* 도시관리 화면(결정 BD1~BD5, 2026-09-28) — screens_city_admin.js. app.css 토큰만 쓴다. 공용 .tw-ct-* 는 screens_city.css.
   MS-DOS 감성: 직각, 점선 구분. 형광 녹(--phos)은 쓰지 않는다(결정 AQ1). 인라인 style 없음(칸 위치는 JS가 CSSOM으로). */

.tw-ca-screen { min-width: 0; }

/* 탭 6개: 좁은 화면은 3칸 × 2줄(글자가 잘리지 않게), 넓으면 한 줄. 선택 = 굵은 밑줄(.tw-ct-tabs 규격 그대로) */
.tw-ct-tabs.tw-ca-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-ct-tabs.tw-ca-tabs > button { flex: none; }
@media (min-width: 560px) { .tw-ct-tabs.tw-ca-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tw-ca-tabwhy { display: grid; gap: 2px; }

/* 공통 요약 줄: 한 줄 = 라벨(왼쪽, 줄바꿈 없음)·값(오른쪽). 넓으면 두 열 */
.tw-ca-sum { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-4); }
@media (min-width: 560px) { .tw-ca-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tw-ca-sum.tw-kv.is-box > div { padding: var(--sp-2) 0; min-width: 0; font-size: var(--fs-sub); border-bottom: 1px solid var(--rule); }
.tw-ca-sum dt { white-space: nowrap; font-size: var(--fs-cap); }
.tw-ca-sum dd small { color: var(--muted); font-size: var(--fs-cap); }

.tw-ca-why { font-size: var(--fs-sub); color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.tw-ca-why::before { content: "· "; }
/* 결정 BS② 2단계: 데이터 한 줄(옛 .tw-hint 중 설명이 아닌 것) · 구역 설명은 제목 옆 ⓘ(panelSec head) · 기록 '보기' 줄 끝 ⓘ */
.tw-ca-note { font-size: var(--fs-sub); color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.tw-ca-noteline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); min-width: 0; }
.tw-ca-noteline .tw-tip { margin-block: calc(-1 * var(--sp-2)); }
.tw-ca-logbar { align-items: flex-end; }
.tw-ca-logbar > .tw-ct-grow { flex: 1 1 0; }
.tw-ca-screen .tw-panel-sec__head .tw-tip { margin-block: calc(-1 * var(--sp-2)); }

/* 영주의 말(환영말) */
.tw-ca-welcome { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--gold); background: transparent; display: grid; gap: 2px; }
.tw-ca-welcome small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-welcome p { margin: 0; color: var(--fg-2); overflow-wrap: anywhere; }

/* 우리 길드 도시 카드 */
.tw-ca-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--sp-2); }
.tw-ca-citycard { font: inherit; text-align: left; display: grid; gap: 2px; padding: var(--sp-3) var(--sp-3); min-height: 44px; background: transparent; color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-citycard b { color: var(--fg-2); }
.tw-ca-citycard span { font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-citycard.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* 지금 도시 = 인디고 선 */
.tw-ca-citycard:hover { border-color: var(--line-hover); }

/* 영주·대리 카드 */
.tw-ca-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-2); }
.tw-ca-person { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--gold); border-radius: var(--radius-sm); background: transparent; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-person.is-vacant { border-left-color: var(--line); }
.tw-ca-person b { color: var(--fg-2); font-size: var(--fs-strong); }
.tw-ca-person span { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-ca-person small { color: var(--muted); }

.tw-ca-screen .tw-ct-form > label.tw-ct-check { display: flex; }   /* 배급 정책 체크 상자: 글자와 한 줄 */
.tw-ca-example { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-example b { color: var(--fg-2); }
.tw-ca-zones { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.tw-ca-zones label { display: grid; gap: 2px; font-size: var(--fs-sub); color: var(--muted); }

/* 영지 칸: 격자 열 수는 JS가 --ca-cols 로, 칸 위치는 gridRow/gridColumn 으로 */
.tw-ca-estate { display: grid; grid-template-columns: repeat(var(--ca-cols, 2), minmax(0, 1fr)); grid-auto-rows: minmax(88px, auto); gap: var(--sp-2); min-width: 0; }
.tw-ca-cell { font: inherit; display: grid; align-content: start; gap: 2px; padding: var(--sp-2); min-width: 0; text-align: left; color: var(--fg); background: transparent;
  border: 1px dashed var(--line); border-radius: var(--radius-sm); cursor: pointer; overflow-wrap: anywhere; position: relative; }
.tw-ca-cell:disabled { cursor: default; opacity: .75; }
.tw-ca-cell.is-empty:not(:disabled):hover { border-color: var(--line-hover); }
.tw-ca-cell.is-fac { border-style: solid; }
.tw-ca-cell.is-fac:hover { border-color: var(--line-hover); }
.tw-ca-cell.is-building { border-style: dashed; }
.tw-ca-cell b { color: var(--fg-2); font-size: var(--fs-body); }
.tw-ca-cell small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-cell__id { font-size: var(--fs-cap); color: var(--faint); font-weight: 700; }
.tw-ca-plus { font-size: var(--fs-sub); color: var(--fg-2); font-weight: 700; }
.tw-ca-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: var(--fs-cap); font-weight: 700; color: var(--fg-2); flex: none; }
.tw-ca-cell.is-workshop .tw-ca-glyph { border-color: var(--gold); color: var(--gold); }

/* 시설 고르기·상세 시트(화면 안 패널) */
.tw-ca-sheet { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-ca-sheet small { color: var(--muted); }
.tw-ca-kinds { display: grid; gap: 0; border-top: 1px solid var(--line); }
.tw-ca-kind { font: inherit; width: 100%; text-align: left; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-2); min-height: 44px; background: none; color: var(--fg);
  border: 0; border-bottom: 1px solid var(--rule); cursor: pointer; }
.tw-ca-kind > span:last-child { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-kind:hover:not(:disabled) { color: var(--accent); }
.tw-ca-kind:disabled { cursor: not-allowed; opacity: .6; }
.tw-ca-kind .tw-ca-why::before { content: ""; }

/* 공방 */
.tw-ca-shop { display: grid; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tw-ca-shop h3 { margin: 0; font-size: var(--fs-body); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-ca-shop h3 small { color: var(--muted); font-weight: 400; }
.tw-ca-orders { display: grid; gap: var(--sp-1); }
.tw-ca-order { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.tw-ca-order > span { overflow-wrap: anywhere; }
.tw-ca-order progress { grid-column: 1 / -1; width: 100%; height: 8px; accent-color: var(--fg-2); }
.tw-ca-order small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-order .tw-btn { grid-row: 1; grid-column: 2; min-height: 32px; padding: 2px var(--sp-3); }
.tw-ca-order.is-slot { border-style: dashed; color: var(--faint); }

/* 영주가 하는 일(현황 맨 위): 한 줄 = 할 일(왼쪽) · 켜짐/결정 대기 + [하러 가기](오른쪽). 결정 대기 줄은 흐리게 */
.tw-ca-powers__lead { margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-items: baseline; }
.tw-ca-powers__lead b { color: var(--fg-2); }
.tw-ca-powers__lead small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-powers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 760px) { .tw-ca-powers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); } }
.tw-ca-power { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) 0; min-height: 44px; border-bottom: 1px solid var(--rule); min-width: 0; }
.tw-ca-power__t { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-power__t b { color: var(--fg-2); font-size: var(--fs-sub); }
.tw-ca-power__t small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-power__st { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-1); flex: none; max-width: 55%; }
.tw-ca-power.is-off .tw-ca-power__t b { color: var(--muted); }
.tw-ca-go { min-height: 32px; padding: 2px var(--sp-3); font-size: var(--fs-sub); }
.tw-ca-powers__guild { margin: var(--sp-2) 0 0; font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tw-ca-powers__guild small { display: inline-block; margin-right: var(--sp-2); padding: 0 var(--sp-1); border: 1px solid var(--line); border-radius: var(--radius-chip); color: var(--fg); font-size: var(--fs-cap); }

/* 누가 무엇을(영주 탭): 가로 스크롤 없는 네 칸 표. 내 직책 열 = 굵은 테두리 */
.tw-ca-auth { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sub); }
.tw-ca-auth th, .tw-ca-auth td { padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--rule); vertical-align: top; text-align: center; overflow-wrap: anywhere; word-break: keep-all; }
.tw-ca-auth thead th { font-size: var(--fs-cap); color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 700; }
.tw-ca-auth thead th:first-child, .tw-ca-auth tbody th { text-align: left; }
.tw-ca-auth thead th:first-child { width: 46%; }
.tw-ca-auth tbody th { font-weight: 400; }
.tw-ca-auth tbody th b { color: var(--fg-2); font-weight: 700; }
.tw-ca-auth tbody th small { display: block; color: var(--muted); font-size: var(--fs-cap); }
.tw-ca-auth td small { color: var(--fg); font-size: var(--fs-cap); }
.tw-ca-auth .tw-ca-yes { color: var(--gold); font-size: var(--fs-body); display: inline-flex; }   /* 선 아이콘 체크(결정 BS4 — 옛 '●') */
.tw-ca-auth .tw-ca-no { color: var(--faint); display: inline-flex; }                            /* 선 아이콘 빼기(옛 '–') */
.tw-ca-auth .is-me { background: transparent; box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
.tw-ca-auth thead th.is-me { color: var(--fg-2); }
.tw-ca-auth tr.is-off td { opacity: .6; }
.tw-ca-auth .tw-tag { margin-top: 2px; }

.tw-ca-log li { display: block; border-bottom: 1px solid var(--rule); padding: var(--sp-1) 0; overflow-wrap: anywhere; }
.tw-ca-log li .tw-tag { margin-left: var(--sp-1); }

@media (max-width: 370px) {
  .tw-ca-estate { grid-auto-rows: minmax(80px, auto); gap: var(--sp-1); }
  .tw-ca-cell { padding: var(--sp-2); }
}