/* 도시 이동 화면(결정 BE1~BE5, 2026-09-28 → 결정 CL16 2026-09-29 라니스식 간단한 이동 메뉴로 다시 짬) — screens_travel.js.
   공통 컴포넌트(app.css .tw-panel-sec·.tw-btn)를 쓰고 이 화면 전용 모양만 둔다. 직각·그림자 없음(D1), 형광 녹(--phos) 안 씀,
   현재 위치 = --me(라이트 검정, 결정 AQ1). 12px 미만 글자 없음. 글자·간격 = 역할 토큰(결정 BS② 2단계).
   결정 CL16: 시설 표지·목록·필터·즐겨찾기·연결선 모양은 없앴다.
   결정 CN·CQ·CR(갈래 C, 2026-09-30): 옛 직각·표 격자 배경 없음 — 도시 칸 = 모서리 8 외곽선 칸(사이 4px), 빈 칸은 비워 둠(CN2 격자 없음),
   지금 위치 = --me 2px 선, 고른 칸 = 인디고 선, 칸 바탕 없음(도착 반짝임도 선 색만), 경로 카드 왼쪽 띠 없음(CR15). */
.tw-tv-card { display: grid; gap: var(--sp-3); }
.tw-tv-card > * { min-width: 0; }

/* 현재 위치 한 줄(스태미너·소지 골드는 줄 끝, 좁으면 다음 줄) */
.tw-tv-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0; font-size: var(--fs-body); }
.tw-tv-sum > b { color: var(--me); }
.tw-tv-sum small { color: var(--muted); font-weight: 400; }
.tw-tv-sum__res { margin-left: auto; font-size: var(--fs-sub); color: var(--muted); }
.tw-tv-sum.is-arrived { animation: tw-tv-flash-t 1.6s ease-out 2; }
.tw-tv-new { display: inline-block; margin-left: var(--sp-1); padding: 0 var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); background: transparent; color: var(--ok); font-size: var(--fs-cap); font-weight: 700; }   /* 상태 태그 명판(결정 CN 칩 3px — 선 = 중립, 도착 = 성공 글자만 녹색 BT4, 채움 없음 CN2) */

/* 바로 갈 수 있는 곳: 이름 단추 한 줄(넘치면 줄바꿈) */
.tw-tv-near { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-tv-flabel { font-size: var(--fs-sub); color: var(--muted); flex: none; }
.tw-tv-near__go { min-height: 44px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-body); }
.tw-tv-near__go small { color: var(--muted); font-size: var(--fs-cap); }

/* 소유(경로 카드·확인 창) */
.tw-tv-owner { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; color: var(--muted); font-size: var(--fs-sub); }
.tw-tv-owner.is-none { color: var(--faint); }
.tw-tv-owner.is-mine { color: var(--fg-2); }
.tw-tv-owner__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tw-tv-emblem { flex: none; }   /* 결정 BJ5: 문장 칸 모양·색은 emblem.css(.tw-emb) */
.tw-tv-mine { flex: none; padding: 0 var(--sp-1); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); background: transparent; color: var(--fg-2); font-size: var(--fs-cap); }   /* 상태 태그(BU3·BT4 — 녹색 없음) */

/* 먼 도시 경로 카드 */
.tw-tv-detail { display: grid; gap: var(--sp-2); }
.tw-tv-detail__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-tv-detail__head h2 { margin: 0; overflow-wrap: anywhere; }
.tw-tv-detail__head h2:focus { outline: 0; }
.tw-tv-detail__chips { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-tv-close { min-height: 44px; margin-left: auto; }
.tw-tv-detail__own { margin: 0; }
.tw-tv-route { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-2) var(--sp-3); }
.tw-tv-steps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-body); }
.tw-tv-steps li { display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.tw-tv-steps li + li::before { content: '→'; color: var(--faint); margin: 0 var(--sp-2); }
.tw-tv-steps li.is-from { color: var(--me); font-weight: 700; }
.tw-tv-steps li.is-to { color: var(--fg-2); font-weight: 700; }
.tw-tv-rsum { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-tv-firstgo { display: flex; align-items: center; gap: var(--sp-1); }
.tw-tv-firstgo > .tw-btn { flex: 1 1 auto; }

/* 도시 칸 격자(이름만): 이 칸 안에서만 가로·세로로 움직인다(페이지 가로 넘침 0). 열·행 수와 칸 위치는 JS가 CSSOM으로 넣는다. */
.tw-tv-mapwrap { overflow: auto; max-height: min(70vh, 640px); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: transparent; overscroll-behavior: contain; min-width: 0; }
.tw-tv-mapwrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tw-tv-grid {
  --cell-w: 76px; --cell-h: 52px;
  display: grid; width: max-content; min-width: 100%; box-sizing: border-box; gap: var(--sp-1); padding: var(--sp-1);
  grid-template-columns: repeat(var(--tv-cols, 9), minmax(var(--cell-w), 1fr)); grid-template-rows: repeat(var(--tv-rows, 11), var(--cell-h));
}
/* 결정 CN2: 옛 '빈 칸도 표 격자' 배경 선 없음 — 도시 칸만 외곽선 칸으로 */
.tw-tv-cell { display: flex; min-width: 0; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: transparent; }
.tw-tv-cell.is-near { border-color: var(--line-strong); }
.tw-tv-cell.is-here { border: 2px solid var(--me); }
.tw-tv-cell.is-onroute { border-color: var(--line-hover); }
.tw-tv-cell.is-sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tw-tv-cell.is-arrived { animation: tw-tv-flash 1.6s ease-out 2; }
.tw-tv-cell__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-width: 0; padding: var(--sp-1); border: 0; background: none;
  color: var(--fg); font: inherit; font-size: var(--fs-sub); line-height: var(--lh-tight); text-align: center; cursor: pointer; overflow: hidden; }
.tw-tv-cell__main:hover { color: var(--accent); }
.tw-tv-cell.is-near .tw-tv-cell__main { color: var(--fg-2); font-weight: 700; }
.tw-tv-cell.is-far .tw-tv-cell__main { color: var(--muted); }
.tw-tv-cell.is-here .tw-tv-cell__main { color: var(--me); font-weight: 700; cursor: default; }
.tw-tv-cell__name { max-width: 100%; overflow-wrap: anywhere; word-break: keep-all; }
.tw-tv-cell__pin { width: 1em; height: 1em; flex: none; }
@media (min-width: 1024px) { .tw-tv-card.tw-layout-wide .tw-tv-mapwrap { max-height: min(78vh, 900px); } }

@keyframes tw-tv-flash { 0%, 40% { border-color: var(--ok); } }   /* 결정 CN2: 도착 반짝임 = 선 색만(칸 바탕 없음) */
@keyframes tw-tv-flash-t { 0%, 40% { color: var(--ok); } }
@media (prefers-reduced-motion: reduce) { .tw-tv-sum.is-arrived, .tw-tv-cell.is-arrived { animation: none; } }