/* 던전 화면(결정 AS 2026-09-28, AS4 분리) — screens_dungeon.js 전용. 공통 토큰만 쓴다(--phos 없음: 결정 AQ1 라이트 검정 원칙).
   직각·그림자 없음(D1), 본문 한 열(D4). 공용 모양(.twb·.twb-sec·.twb-row·.twb-result)은 screens_battle.css를 그대로 따른다.
   결정 BS② 2단계(2026-09-29): 글자·간격·줄 간격 = 역할 토큰, 기술·어빌리티 태그는 상태 태그 모양(테두리 없음 — BU3·BT4). */

.tdg-sub { margin: 0; font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tdg-h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sub); color: var(--muted); font-weight: 700; }
.tdg-h3:first-child { margin-top: 0; }
.tdg-none { margin: 0; font-size: var(--fs-sub); color: var(--faint); }

/* ---- 목록(일일 · 열쇠) ---- */
.tdg-row .twb-row__main small { font-size: var(--fs-cap); }
.tdg-need { color: var(--fg) !important; }
.tdg-need.is-bad { color: var(--bad) !important; }
.tdg-reward { color: var(--gold) !important; }

/* ---- 카드(대시보드 공용) ---- */
.tdg-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-3); display: grid; gap: var(--sp-2); min-width: 0; }
.tdg-card > * { min-width: 0; }

/* ---- 진행 대시보드 ---- */
.tdg-dash { display: grid; gap: var(--sp-3); min-width: 0; }
.tdg-dash > * { min-width: 0; }
.tdg-dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.tdg-dash__name { margin: 0; font-size: var(--fs-strong); color: var(--fg-2); overflow-wrap: anywhere; }
.tdg-dash__kind { font-size: var(--fs-sub); color: var(--muted); }
.tdg-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
.tdg-steps { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: var(--sp-1); }
/* 결정 CN: 옛 네모 칸 진행(DOS) → 가는 둥근 조각 막대(트랙·채움만 색 — 막대 예외). 지난 층 = 인디고, 지금 층 = 밝은 글자색, 보스 층 = 빨강 */
.tdg-steps i { display: block; height: 6px; border-radius: 999px; background: var(--track); }
.tdg-steps i.is-done { background: var(--accent); }
.tdg-steps i.is-now { background: var(--fg-2); }
.tdg-steps i.is-boss { box-shadow: inset 0 0 0 1px var(--bad); }
.tdg-steps i.is-boss.is-done { background: var(--bad); }
.tdg-prog__n { font-size: var(--fs-sub); color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 내 캐릭터 카드 */
.tdg-me__head { display: flex; align-items: baseline; gap: var(--sp-1) var(--sp-2); flex-wrap: wrap; }
.tdg-me__name { font-size: var(--fs-strong); color: var(--fg-2); overflow-wrap: anywhere; }
.tdg-me__job { font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tdg-eq { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.tdg-eq li { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); min-height: 32px; }
.tdg-eq li:not(:has(img)) { grid-template-columns: 64px minmax(0, 1fr) auto; }
.tdg-eq__icon { width: 28px; height: 28px; image-rendering: pixelated; }
.tdg-eq__slot { color: var(--muted); }
.tdg-eq b { overflow-wrap: anywhere; }
.tdg-more > summary { padding-left: 0; padding-right: 0; }
.tdg-more__body { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-1); }
.tdg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--fs-sub); }
.tdg-stats.is-derived { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--sp-2); border-top: 1px solid var(--rule); margin-top: var(--sp-1); }
.tdg-stats > div { display: flex; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.tdg-stats dt { color: var(--muted); }
.tdg-stats dd { margin: 0; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tdg-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sub); }
.tdg-tags li { border: 1px solid var(--line-strong); border-radius: var(--radius-chip); background: transparent; padding: var(--sp-1) var(--sp-2); overflow-wrap: anywhere; }
ol.tdg-tags { counter-reset: tdg; }
ol.tdg-tags li::before { counter-increment: tdg; content: counter(tdg) ". "; color: var(--faint); }
.tdg-buffs { margin: 0; font-size: var(--fs-sub); overflow-wrap: anywhere; }

/* 다음 전투 카드 */
.tdg-foe { border-color: var(--foe); }
.tdg-foe__head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tdg-foe__head b { font-size: var(--fs-strong); color: var(--fg-2); overflow-wrap: anywhere; }
.tdg-foe__meta { margin: 0; font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tdg-foe__meta b { color: var(--fg); }
.tdg-foe__reward { margin: 0; font-size: var(--fs-sub); }
.tdg-foe__reward b { color: var(--gold); }

/* 상점: 가로 3칸(결정 AR2) */
.tdg-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.tdg-offer { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; font-size: var(--fs-body); }
.tdg-offer b { color: var(--count); overflow-wrap: anywhere; }
.tdg-offer small { color: var(--muted); font-size: var(--fs-cap); overflow-wrap: anywhere; flex: 1; }
.tdg-offer .tw-btn { width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-1); font-size: var(--fs-sub); margin-top: var(--sp-1); }

.tdg-acts { justify-content: stretch; }
.tdg-acts .tw-btn { flex: 1 1 0; }

/* ---- 전투 기록 화면(결정 AR1) ---- */
.tdg-bv-sub { margin: 0; text-align: center; font-size: var(--fs-body); color: var(--muted); }
.tdg-bv-nav { justify-content: space-between; }
.tdg-bv-nav .tw-btn { flex: 1 1 0; }

.tdg-keygot { margin: 0; font-size: var(--fs-sub); color: var(--gold); }
.tdg-keygot b { color: inherit; }

/* ---- 입장 2단계 창(자체 확인 창, #tw-modal 재사용) ---- */
#tw-modal:has(.tdg-modal) { width: min(520px, calc(100% - 32px)); }
.tdg-modal__body { display: grid; gap: var(--sp-2); max-height: min(64vh, 560px); overflow-y: auto; }
.tdg-modal__lead { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tdg-modal .tdg-me { border: 0; padding: 0; background: none; }
.tdg-seal { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--edge-warn); border-radius: var(--radius-sm); background: transparent; font-size: var(--fs-sub); color: var(--fg-2); overflow-wrap: anywhere; }
.tdg-warn { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); font-size: var(--fs-sub); }
.tdg-warn li { overflow-wrap: anywhere; }
.tdg-warn li:first-child { color: var(--bad); }
.tdg-modal .tw-kv.is-box small { color: var(--muted); }
@media (max-width: 480px) {
  #tw-modal:has(.tdg-modal) { width: 100%; }
  .tdg-modal__body { max-height: 62vh; }
}
@media (max-width: 380px) {
  .tdg-offer { padding: var(--sp-2) var(--sp-2); }
  .tdg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}