/* 어빌리티 화면(결정 BG2·BG3 2026-09-28) — screens_ability.js 전용. 공통 토큰만 쓴다. 본문 폭은 D4 한 열(600px).
   새 스타일(결정 CN·CQ·CR 2단계 갈래 A, 2026-09-30): 칸 바탕 없음(CN2) · 구분은 외곽선만(칸 모서리 8) · 강조는 인디고 글자·선만 ·
   CR15 한 묶음 색 세로선 최대 1개 → 옛 칸별 색 띠(직업 주황·공용 파랑·전용 자주 위 띠)와 줄 왼쪽 색 띠(배울 수 있음 녹·장착 중 흰)는 뺐다(칸 이름·'○○ 칸 장착 중' 글자로 구분). */
.tw-ab { display: grid; gap: var(--sp-3); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }   /* 검토 2026-09-28: '어빌 / 리티'처럼 낱말 중간 줄바꿈 방지(여관 화면과 같은 방식) */
.tw-ab-card { gap: var(--sp-3, var(--sp-3)); }
.tw-ab-sec .tw-panel-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
.tw-ab-count { font-size: var(--fs-sub); color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.tw-ab-out:empty { display: none; }
.tw-ab-out .tw-actions { flex-wrap: wrap; }

/* 1) 보유 수련점수 카드: 큰 숫자 + 한 줄 요약. 배운 직후 −비용 */
.tw-ab-tp { display: grid; gap: var(--sp-1); padding: 10px 12px; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-ab-tp__k { font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.tw-ab-tp__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); margin: 0; min-width: 0; }
.tw-ab-tp__n b { font-size: var(--fs-bignum); line-height: var(--lh-tight); color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-ab-tp__d { font-size: var(--fs-body); font-weight: 700; color: var(--bad); font-variant-numeric: tabular-nums; }
.tw-ab-tp__sub { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-sub); color: var(--muted); margin: 0; }
.tw-ab-tp__sub b { color: var(--strong); font-variant-numeric: tabular-nums; }

/* 2) 장착 칸 카드: 좁으면 세로, 넓으면 3칸 */
.tw-ab-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); min-width: 0; }
.tw-ab-slot { display: grid; gap: var(--sp-1); align-content: start; padding: 8px 12px; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); background: transparent; min-width: 0; overflow-wrap: anywhere; }
.tw-ab-slot.is-empty { border-style: dashed; border-color: var(--line-strong); }
.tw-ab-slot.is-off { border-color: var(--warn); }
.tw-ab-slot__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
.tw-ab-slot__k { font-size: var(--fs-card); font-weight: var(--fw-card); letter-spacing: var(--ls-card); color: var(--fg-2); }
.tw-ab-slot__rule { font-size: var(--fs-cap); color: var(--muted); margin: 0; }
.tw-ab-slot__name { margin: 0; font-size: var(--fs-body); }
.tw-ab-slot__name b { color: var(--accent); }
.tw-ab-slot__name small { font-size: var(--fs-cap); color: var(--muted); }
/* 결정 DB7·DB9·CZ4(2026-09-30): 어빌리티 카드(라니스 방식) — '이름 n차' / [항상] 칩 + 상시 효과 / 발동 문장 '(재사용 n)'. 본문 한 단계 작은 글자, 색은 '항상' 칩에만 */
.tw-ab-cd { display: grid; gap: 2px; min-width: 0; }
.tw-ab-cd:empty { display: none; }
.tw-ab-cd__always, .tw-ab-cd__trig { margin: 0; font-size: var(--fs-sub); color: var(--fg); line-height: var(--lh-base); overflow-wrap: anywhere; word-break: keep-all; font-family: var(--font-prose); }
.tw-ab-cd__always { display: flex; align-items: baseline; gap: 6px; }
.tw-ab-always { flex: none; display: inline-flex; align-items: center; min-height: 20px; padding: 0 5px; border: var(--bw) solid var(--accent); border-radius: var(--radius-chip); color: var(--accent); font-size: var(--fs-cap); font-weight: 700; }
.tw-ab-cd__trig { color: var(--fg); }
.tw-ab > .tw-rec-note { margin: calc(-1 * var(--sp-2)) 0 0; }   /* 결정 CT7: '추천세팅' 한 줄·막힌 이유(머리 아래, 화면 격자 간격 안쪽) */
.tw-ab-slot__note { margin: 0; font-size: var(--fs-cap); color: var(--muted); }
.tw-ab-slot__note.is-warn { color: var(--warn); }
.tw-ab-slot__acts { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.tw-ab-slot__acts .tw-btn { min-height: 36px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); }
/* 검토(2026-09-30): 보이는 36·32px 단추의 누름 영역 44px(투명 ::before — 모양 그대로) */
.tw-ab-slot__acts .tw-btn, .tw-ab-preset .tw-btn { position: relative; }
.tw-ab-slot__acts .tw-btn::before, .tw-ab-preset .tw-btn::before { content: ""; position: absolute; inset: -5px 0; }   /* 테두리 안쪽 기준: 34 + 10 = 44 */
.tw-ab-preset .tw-btn::before { inset: -7px 0; }   /* 30 + 14 = 44 */
.tw-btn.tw-ab-cand { color: var(--accent); }
/* 결정 CG4 D1(2026-09-29): 점선 설명 카드 → 한 줄(이름 + ⓘ + [프리셋]), 설명은 ⓘ 팝오버 — 인벤토리 .tw-inv-preset 과 같은 모양 */
.tw-ab-preset { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; font-size: var(--fs-sub); color: var(--muted); line-height: var(--lh-tight); min-width: 0; }
.tw-ab-preset__t { display: inline-flex; align-items: center; min-width: 0; }
.tw-ab-preset b { color: var(--fg-2); font-size: var(--fs-card); letter-spacing: var(--ls-card); }
.tw-ab-preset .tw-btn { flex: none; min-height: 32px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); }
@media (max-width: 420px) { .tw-ab-preset { flex-wrap: wrap; } }

/* 한 번 강조(방금 바뀐 칸·줄). 움직임을 줄인 설정이면 강조색만 */
.tw-ab-slot.is-new, .tw-ab-row.is-new { outline: 2px solid var(--ok); outline-offset: -2px; }
@media (prefers-reduced-motion: no-preference) {
  .tw-ab-slot.is-new, .tw-ab-row.is-new { animation: tw-ab-flash 1.2s ease-out 1; }
}
@keyframes tw-ab-flash { from { outline-color: var(--ok); } to { outline-color: transparent; } }   /* 바탕 덧칠 없음(CN2) — 선만 옅어짐 */

/* 3)·4) 어빌리티 줄 */
.tw-ab-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.tw-ab-row { display: grid; gap: var(--sp-1); padding: 8px 12px; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); min-width: 0; font-size: var(--fs-body); }
.tw-ab-row.is-here { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.tw-ab-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-width: 0; }
.tw-ab-row__name { color: var(--fg-2); overflow-wrap: anywhere; }
.tw-ab-row.is-ready .tw-ab-row__name { color: var(--accent); }
.tw-ab-row__top small { font-size: var(--fs-cap); color: var(--muted); }
.tw-ab-row__cost, .tw-ab-row__st { margin-left: auto; font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-ab-row__t { margin: 0; font-size: var(--fs-sub); color: var(--fg); overflow-wrap: anywhere; }
.tw-ab-row__cond { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-1); font-size: var(--fs-cap); color: var(--muted); }
.tw-ab-row__acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-1); }
.tw-ab-btnwrap { display: inline-grid; gap: 2px; min-width: 0; }
.tw-ab-btnwrap .tw-btn-why { font-size: var(--fs-cap); max-width: 280px; }
.tw-ab-slotbtn { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
.tw-ab-slotbtn:disabled { color: var(--fg); border-color: var(--line-strong); }
.tw-ab-why { flex: 1 1 100%; font-size: var(--fs-cap); }
.tw-ab-here { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-2); border: var(--bw) solid var(--rule-v); border-radius: var(--radius-btn); font-size: var(--fs-sub); font-weight: 700; color: var(--accent); }
.tw-ab-none { font-size: var(--fs-cap); color: var(--muted); }

/* 조건이 남은 어빌리티(접힘) */
.tw-ab-bh { margin: var(--sp-2) 0 2px; font-size: var(--fs-sub); color: var(--muted); }
.tw-ab-blist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tw-ab-blist > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); padding: 5px 0 5px var(--deco-pl); border-left: 2px solid var(--rule-v); font-size: var(--fs-sub); min-width: 0; overflow-wrap: anywhere; }
.tw-ab-blist small { color: var(--muted); font-size: var(--fs-cap); }
.tw-ab-blist__why { flex: 1 1 100%; color: var(--muted); font-size: var(--fs-cap); }

/* 배운 목록 도구 줄: 계열 탭(2단) · 차수 필터 · 높은 차수만 · 넣을 칸 · 검색 */
.tw-ab-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-ab-fams small { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-ab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ab-bar .tw-filters { flex: 1 1 auto; min-width: 0; }
.tw-ab-toggle { border-color: var(--line-strong); color: var(--fg); }
.tw-ab-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }   /* 켜짐 = 인디고 선·글자(채움 없음) */
.tw-ab-field { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; flex: 0 1 auto; }
.tw-ab-field > span { white-space: nowrap; }
.tw-ab-field.is-grow { flex: 1 1 160px; }
.tw-ab-field.is-grow .tw-ab-in { width: 100%; }
.tw-ab-in { font: inherit; font-size: var(--fs-body); min-height: 44px; padding: var(--sp-1) var(--sp-2); 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-ab-in:focus { border-color: var(--accent); outline: 0; }
select.tw-ab-in option { background: var(--bg); color: var(--fg-2); }
select.tw-ab-in { max-width: 240px; }
.tw-ab-shown { margin: 0; font-size: var(--fs-cap); color: var(--muted); }

/* 계보 묶음 */
.tw-ab-lin { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); min-width: 0; }
.tw-ab-lin__h { margin: 0; font-size: var(--fs-sub); color: var(--muted); font-weight: 700; overflow-wrap: anywhere; }
/* 결정 BS② BS4: 계보 제목 앞 장식 글자(═)는 뺐다 */
.tw-ab-lin__h small { font-weight: 400; font-size: var(--fs-cap); }

@media (max-width: 400px) {
  select.tw-ab-in { max-width: 100%; }
  .tw-ab-field { flex: 1 1 100%; }
  .tw-ab-field select { flex: 1 1 auto; }
}