/* 요일 보스 화면 전용(결정 AT6 2026-09-28: screens_battle.css와 파일 분리). app.css 토큰만 쓴다(AQ1: --phos 쓰지 않음, 내 쪽 = --me).
   직각·그림자 없음(D1). 공용 틀(.twb·.twb-sec·.twb-row 등)은 screens_battle.css 것을 그대로 쓰고, 여기에는 .twbo-* 만 둔다.
   결정 BS② 2단계(2026-09-29): 글자 = --fs-*, 간격 = --sp-*, 줄 간격 = --lh-*(옛 별칭 --fs-sm 등·대체값 제거), 배지 = 상태 태그 모양.
   결정 CN·CQ·CR(갈래 C, 2026-09-30): 옛 직각·반전 채움 탭·마디 막대·점선·색 윗줄·+/− 글자 폐기 — 모서리 16·8·3, 지금 탭 = 밝은 글자 + 인디고 2px 밑줄,
   막대 = 가는 둥근 줄, 나/상대 카드 = 인디고/빨강 외곽선(CQ18), 사건 칩 = 3px 명판(중립 선 + 글자 색, 칸 바탕 없음 CN2). */

/* ---------- AT1 도전 전 확인 — 결정 BZ8(BS② 2단계): 한 줄 요약 + ⓘ(4줄 전부는 팝오버·좁은 화면 하단 시트) ---------- */
.twbo-notice { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: 0 0 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.twbo-notice__line { margin: 0; flex: 1 1 auto; min-width: 0; padding: var(--sp-2) 0; font-size: var(--fs-sub); line-height: var(--lh-base); overflow-wrap: anywhere; }
.twbo-notice__h { font-weight: 700; color: var(--fg-2); margin-right: var(--sp-1); }
.twbo-notice b { color: var(--fg-2); }
.twbo-notice b.twb-foe { color: var(--foe); }
.twbo-notice > .tw-tip { flex: none; }

/* ---------- AT2 오늘의 보스 카드 · 단계 탭 ---------- */
.twbo-boss { 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; }
.twbo-boss > * { min-width: 0; }
.twbo-patterns > summary { padding-left: 0; }
.twbo-patterns .twb-patterns { padding: 0 0 var(--sp-2); }
.twbo-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.twbo-stages > button { font: inherit; font-size: var(--fs-sub); color: var(--muted); background: transparent; border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  min-height: 48px; padding: var(--sp-2) var(--sp-1) var(--sp-1); display: grid; gap: var(--sp-1); align-content: center; justify-items: stretch; cursor: pointer; min-width: 0; }
.twbo-stages > button:nth-child(4n) { border-right: 0; }
.twbo-stages > button:nth-child(n + 5) { border-bottom: 0; }
.twbo-stages__n { text-align: center; white-space: nowrap; }
.twbo-stages > button small { text-align: center; font-size: var(--fs-cap); color: var(--faint); }
.twbo-stages > button:hover:not([disabled]) { color: var(--fg-2); }
.twbo-stages > button[aria-selected="true"] { color: var(--fg-2); font-weight: 700; box-shadow: inset 0 -2px 0 var(--sel); }   /* 지금 탭 = 밝은 글자 + 인디고 2px 밑줄(S1, 채움 없음) */
.twbo-stages > button[disabled] { cursor: not-allowed; opacity: var(--disabled-opacity); }
.twbo-stages > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (min-width: 600px) {
  .twbo-stages { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .twbo-stages > button { border-bottom: 0; }
  .twbo-stages > button:nth-child(4n) { border-right: 1px solid var(--rule); }
  .twbo-stages > button:last-child { border-right: 0; }
}
.twbo-stage { display: grid; gap: var(--sp-2); padding-top: var(--sp-1); min-width: 0; }
.twbo-stage .tw-actions .tw-btn.is-primary { flex: 1 1 auto; }

/* ---------- AT3 최고 기록 막대 ---------- */
.twbo-meter { display: block; width: 100%; height: 4px; border: 0; border-radius: 999px; overflow: hidden; background: var(--track); appearance: none; -webkit-appearance: none; }
.twbo-meter::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
.twbo-meter::-webkit-progress-value { background: var(--hp); border-radius: 999px; }
.twbo-meter::-moz-progress-bar { background: var(--hp); }
.twbo-meter.is-kill::-webkit-progress-value { background: var(--ok); }
.twbo-meter.is-kill::-moz-progress-bar { background: var(--ok); }
.twbo-best { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); }
.twbo-best .twbo-meter { height: 6px; }   /* 결정 CN: 마디 막대(가림 무늬) 없음 — 가는 둥근 막대 */
.twbo-best__label { color: var(--muted); font-weight: 700; }
.twbo-best__val { color: var(--fg-2); white-space: nowrap; }
.twbo-best__val.is-kill { color: var(--ok); }
.twbo-best__sub { font-size: var(--fs-cap); color: var(--muted); overflow-wrap: anywhere; margin-top: calc(-1 * var(--sp-1)); }

/* ---------- AT4 도전 중 대시보드 ---------- */
.twbo-dash { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-3); display: grid; gap: var(--sp-3); min-width: 0; }
.twbo-dash > * { min-width: 0; }
.twbo-dash__head { display: grid; gap: var(--sp-2); text-align: center; }
.twbo-dash__name { margin: 0; font-size: var(--fs-strong); display: flex; justify-content: center; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.twbo-dash__name small { font-size: var(--fs-cap); color: var(--muted); font-weight: 400; }
.twbo-turns { font-size: var(--fs-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.twbo-turns b { font-size: var(--fs-bignum); color: var(--fg-2); }
.twbo-meter.is-turns { height: 6px; }
.twbo-meter.is-turns::-webkit-progress-value { background: var(--accent); }
.twbo-meter.is-turns::-moz-progress-bar { background: var(--accent); }
.twbo-dash__head .twb-floors { justify-content: center; }
.twbo-duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.twbo-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: var(--sp-3); display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.twbo-card > * { min-width: 0; }
.twbo-card.is-me { border-color: var(--me-line); }   /* 결정 CQ18: 나 = 인디고 · 상대 = 빨강 외곽선(색 윗줄 없음) */
.twbo-card.is-foe { border-color: var(--foe-line); }
.twbo-card.is-me .twbo-card__h { color: var(--me); } .twbo-card.is-foe .twbo-card__h { color: var(--foe); }
.twbo-card__h { margin: 0; font-size: var(--fs-body); color: var(--fg-2); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; overflow-wrap: anywhere; }
.twbo-card__h small { font-size: var(--fs-cap); color: var(--muted); font-weight: 400; }
.twbo-card__sub { font-size: var(--fs-cap); color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
.twbo-card .twb-kv { font-size: var(--fs-sub); }
.twbo-card .twb-kv small { color: var(--muted); }
.twbo-card .twb-chips { gap: var(--sp-1); }
.twbo-dash__acts .tw-btn.is-primary { flex: 1 1 auto; }
@media (max-width: 420px) {
  .twbo-duel { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- AT5 구간 기록 한 줄 요약 · 인라인 펼침 ---------- */
.twbo-seglog { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.twbo-seg { border-bottom: 1px solid var(--rule); min-width: 0; }
.twbo-seg:last-child { border-bottom: 0; }
.twbo-seg__btn { font: inherit; color: var(--fg); background: none; border: 0; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); cursor: pointer; min-height: 44px; }
.twbo-seg__btn:hover:not([disabled]) .twbo-seg__more { color: var(--accent); }
.twbo-seg__btn[disabled] { cursor: default; }
.twbo-seg__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.twbo-seg__top { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-body); }
.twbo-seg__range { color: var(--muted); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
/* 결정 BS② 2단계(BS4): 펼침 표시 글자 기호(▸·▾) → 선 아이콘(chevron-down, 펼치면 뒤집힘). 글자는 CSS 문구(장식, aria-hidden 칸 안) */
.twbo-seg__more { margin-left: auto; color: var(--faint); display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-cap); }
.twbo-seg__more .tw-li { transform: rotate(-90deg); }
.twbo-seg__mtxt::before { content: "턴별 기록"; }
.twbo-seg__btn[aria-expanded="true"] .twbo-seg__more .tw-li { transform: none; }
.twbo-seg__btn[aria-expanded="true"] .twbo-seg__mtxt::before { content: "접기"; }
.twbo-seg__btn[disabled] .twbo-seg__more .tw-li { display: none; }
.twbo-seg__btn[disabled] .twbo-seg__mtxt::before { content: "기록 없음"; }
.twbo-seg__nums { font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.twbo-seg__nums b { color: var(--fg-2); }
.twbo-seg__ev { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* 구간 사건 = 상태 태그(결정 BU3·BT4 → 결정 CN 칩 3px 명판): 선은 중립(--line-strong, 녹색 선 없음 BT4)·바탕 없음(CN2)·뜻은 글자와 글자 색. 녹색 글자는 처치(성공)에만 */
.twbo-ev { font-size: var(--fs-cap); padding: 1px var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); color: var(--muted); background: transparent; }
.twbo-ev.is-sealed, .twbo-ev.is-weakness, .twbo-ev.is-exhausted { color: var(--fg); }
.twbo-ev.is-phase { color: var(--warn); }
.twbo-ev.is-kill { color: var(--ok); font-weight: 700; }
.twbo-ev.is-down { color: var(--bad); font-weight: 700; }
.twbo-seg__log { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-top: 1px solid var(--rule); min-width: 0; overflow-x: auto; }
.twbo-seg__log[hidden] { display: none; }

/* ---------- 결정 BR(2026-09-28): 난이도 탭 3개 · 기믹 카드 · 옛 단계 기록 ---------- */
.twbo-stages.is-diff { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.twbo-stages.is-diff > button, .twbo-stages.is-diff > button:nth-child(n) { border-bottom: 0; border-right: 1px solid var(--rule); }
.twbo-stages.is-diff > button:last-child { border-right: 0; }
@media (min-width: 600px) { .twbo-stages.is-diff { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.twbo-gims { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
@media (min-width: 760px) { .twbo-gims { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.twbo-gim { border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; padding: 0 var(--sp-3); display: grid; gap: var(--sp-1);
  font-size: var(--fs-sub); min-width: 0; overflow-wrap: anywhere; }
.twbo-gim.is-off { color: var(--muted); }
.twbo-gim.is-off b { color: var(--muted); }
.twbo-gim__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.twbo-gim__h b { color: var(--fg-2); }
.twbo-gim__h small { font-size: var(--fs-cap); color: var(--muted); }
.twbo-gim__k { font-size: var(--fs-cap); font-weight: 700; padding: 0 var(--sp-1); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); background: transparent; color: var(--fg); white-space: nowrap; }   /* 상태 태그(BU3). 결정 CI5: 글자 'A' → '보통 추가' 등이라 줄 안 끊김 */
.twbo-gim__when { font-size: var(--fs-cap); color: var(--muted); }
.twbo-gim__tip b { color: var(--fg-2); margin-right: var(--sp-1); }   /* 결정 BT4: 녹색은 승리·성공에만('대응' 머리는 강조 글자) */
.twbo-gimsec > summary small { color: var(--muted); font-weight: 400; }
/* 결정 CG4 D1(2026-09-29): 기믹 카드 기본 접힘 — 한 줄 머리(누름 영역 40px 이상)만, 펼치면 언제·무엇·대응 */
.twbo-gim__d > summary { cursor: pointer; list-style: none; min-height: 44px; padding: var(--sp-2) 0; }
.twbo-gim__d > summary::-webkit-details-marker { display: none; }
/* 결정 CN: 옛 +/− 글자 → 공용 접힘 화살표(오른쪽, 열면 위) */
.twbo-gim__d > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; align-self: center; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.twbo-gim__d[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.twbo-gim__body { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-2); }
.twbo-gim__body p { margin: 0; }
.twbo-legacy .twb-row__main { display: grid; gap: var(--sp-1); }
.twbo-ev.is-gimmick { color: var(--accent); }
.twbo-ev.is-missed { color: var(--bad); }
/* 결정 BW6: 봉인 대상이 대기술 하나뿐이면 고르는 칸 대신 이름만 */
.twbo-seal-target { margin: 0; align-self: end; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.twbo-seal-target small { font-size: var(--fs-cap); color: var(--muted); }

/* 결정 CN(갈래 C, 2026-09-30): 옛 DOS 글자 막대(■···)를 대신하는 가는 둥근 막대 — 모드 화면 공용(보스 구간·길드보스 투입·방어 붕괴). 트랙·채움만 색(막대 예외) */
progress.tw-mbar { -webkit-appearance: none; appearance: none; display: inline-block; vertical-align: middle; width: 120px; max-width: 40%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--track); }
progress.tw-mbar::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
progress.tw-mbar::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.tw-mbar::-moz-progress-bar { background: var(--accent); border-radius: 999px; }