/* 아바타 메뉴 하위 화면 전용 스타일(ui-avatar 2026-09-26 → UI 개편 묶음 3, 결정 AP1 D1~D13 2026-09-28). app.css 토큰·공통 컴포넌트만 사용.
   골격: 화면 머리(.tw-page-head, 가운데 제목) → 페이지 카드(.tw-card) › 섹션 패널(.tw-panel-sec) › 항목(행·카드·타일).
   겉모습은 우리 것(D1): 직각, 그림자 없음, 고정폭 글꼴, EGA 의미 색. 형광 녹(--phos*)·아군색(--me)은 쓰지 않는다(AQ1 — 라이트에서 검정).
   글자는 12px 미만을 쓰지 않는다(계획서 2-2). 공통 컴포넌트 자체는 고치지 않고 이 파일에서만 화면 모양을 더한다. */

/* 어빌리티 칸별 색(우리 팔레트 토큰만): 직업 = 주황(--fx-burn), 공용 = 파랑(--career), 전용 = 자주(--fx-poison). 목록의 '○○ 칸에' 버튼과 같은 색 */
:root { --av-slot-job: var(--fx-burn); --av-slot-common: var(--career); --av-slot-spec: var(--fx-poison); }

/* 표면: 카드 안 패널 사이 간격, 패널 제목 */
.tw-av-card { gap: var(--sp-3); }
.tw-av-sec { min-width: 0; }
.tw-av-h { display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
.tw-av-h small { font-weight: 400; font-size: var(--fs-cap); color: var(--muted); }
.tw-av-sec .tw-av-subh { font-size: var(--fs-sub); color: var(--muted); font-weight: 700; margin-bottom: var(--sp-1); }
.tw-av-kv { display: grid; min-width: 0; }
.tw-av-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px dotted var(--line); font-size: var(--fs-body); min-width: 0; }
.tw-av-kv > div:last-child { border-bottom: 0; }
.tw-av-kv dt { color: var(--muted); flex: none; max-width: 50%; }
.tw-av-kv dd { text-align: right; color: var(--strong); min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tw-av-ok { color: var(--ok); font-weight: 700; }
.tw-av-warn { color: var(--warn); font-size: var(--fs-sub); }
.tw-av-note { font-size: var(--fs-sub); padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); }
.tw-av-note.is-warn { background: var(--tint-warn); border-left: 4px solid var(--warn); color: var(--strong); }
.tw-av-foot { display: flex; justify-content: center; }
.tw-av-sep { font-size: 0; }   /* 칩 사이 ' · ': 읽기용 글자만 남기고 화면에는 칩 간격으로 */

/* 결정 BS② 2단계(2026-09-29): 옛 규칙 상자(.tw-av-rules)·[확정]/[임시] 강조(.tw-av-tag)는 지웠다 — 규칙은 ⓘ 팝오버(core.rulesTip, 꼬리표 없음).
   체크 줄 옆 ⓘ(.tw-av-checkrow), 접힘 상자 끝 ⓘ(.tw-av-morefoot) */
.tw-av-checkrow { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-av-checkrow > .tw-check { flex: 1 1 auto; min-width: 0; }
.tw-av-morefoot { display: flex; justify-content: flex-end; }

/* 탭: 모양은 공통 .tw-tabs(1단 균등 폭·굵은 밑줄 / 2단 가로 스크롤·얇은 밑줄). 개수 글자만 작게 */
.tw-av-tabs > button small { font-size: var(--fs-cap); font-weight: 400; color: inherit; opacity: .8; }
.tw-av-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-av-toolrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.tw-av-toolrow > .tw-filters { flex: 1 1 auto; }
.tw-av-sort { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); margin-left: auto; }

/* 입력 */
.tw-av-sec select, .tw-av-sort select, .tw-av-prows select, .tw-av-form select, .tw-av-form input[type="number"], .tw-av-prows input[type="number"] {
  font: inherit; font-size: var(--fs-body); min-height: 44px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-2); background: var(--surface); color: var(--strong); border-radius: 0; max-width: 100%; min-width: 0; }
.tw-av-form { display: grid; gap: var(--sp-2); }
.tw-av-form label:not(.tw-check) { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-av-tp { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }

/* 등급 색 = 이름 색(app.css 공통 등급 토큰 --grade-*). +N 강화 숫자는 이름 색을 그대로 상속(별도 색 없음). 레플리카 색은 결정 대기 → 기본 글자색 */
.tw-av-g { color: var(--grade-common); }
.tw-av-g.is-normal { color: var(--grade-common); }
.tw-av-g.is-advanced { color: var(--grade-uncommon); }
.tw-av-g.is-rare { color: var(--grade-rare); }
.tw-av-g.is-heroic { color: var(--grade-heroic); }
.tw-av-g.is-legendary { color: var(--grade-legendary); text-shadow: 0 0 3px color-mix(in srgb, var(--fx-burn) 70%, transparent); animation: tw-av-ember var(--ember-period, 1.6s) ease-in-out infinite alternate; }
.tw-av-g.is-relic { color: var(--grade-relic); font-weight: var(--grade-relic-weight); text-shadow: 0 0 5px color-mix(in srgb, var(--strong) 70%, transparent), 0 0 10px color-mix(in srgb, var(--fx-holy) 45%, transparent); animation: tw-av-halo 2.4s ease-in-out infinite alternate; }
.tw-av-g.is-replica, .tw-av-g.is-unknown { color: var(--grade-replica); }
.tw-av-enh { color: inherit; font-variant-numeric: tabular-nums; }
@keyframes tw-av-ember { from { text-shadow: 0 0 2px color-mix(in srgb, var(--fx-burn) 60%, transparent); } to { text-shadow: 0 0 6px color-mix(in srgb, var(--fx-burn) 90%, transparent), 0 -1px 8px color-mix(in srgb, var(--bad) 50%, transparent); } }
@keyframes tw-av-halo { from { text-shadow: 0 0 3px color-mix(in srgb, var(--strong) 50%, transparent); } to { text-shadow: 0 0 7px color-mix(in srgb, var(--strong) 85%, transparent), 0 0 14px color-mix(in srgb, var(--fx-holy) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tw-av-g.is-legendary, .tw-av-g.is-relic { animation: none; } }

/* 내 정보: 정체성 카드(초상 84×126 · 좁으면 64×96) + 이름 크게 + 칩 줄 + HP/MP */
.tw-av-id { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); align-items: center; min-width: 0; }
.tw-av-id__body { display: grid; gap: var(--sp-2); min-width: 0; justify-items: center; text-align: center; }
.tw-av-card .tw-av-name { display: block; width: 100%; font-size: var(--fs-title); font-weight: 800; color: var(--strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-av-card .tw-av-name::before { content: none; }
.tw-av-idchips { line-height: 2.1; min-width: 0; }
.tw-av-idchips .tw-tag { margin: 2px; }
.tw-av-idbars { width: 100%; display: grid; gap: var(--sp-1); min-width: 0; }
@media (max-width: 370px) { .tw-av-id { grid-template-columns: 64px minmax(0, 1fr); gap: var(--sp-2); } .tw-av-portrait { width: 64px; height: 64px; } .tw-av-card .tw-av-name { font-size: var(--fs-section); } }
/* [확정 U3] 승인 아바타가 있으면 초상 틀을 2:3 전신으로 늘리고 도트(최근접)로 그린다. 없으면 위의 빈 격자 그대로 */
.tw-av-portrait.has-art { height: 126px; display: block; overflow: hidden; }
.tw-av-portrait.has-art img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 370px) { .tw-av-portrait.has-art { height: 96px; } }
/* [확정 V7·AH3] 기본체 + 손 레이어 + 주먹 덮개 합성(SVG, 배치·순서는 서버 값). 같은 2:3 틀 안에 보기 상자 전체를 맞춘다(바닥 정렬), 도트 최근접 */
.tw-av-comp { display: block; width: 100%; height: 100%; }
.tw-av-comp image { image-rendering: pixelated; }

/* 표(스탯·요구표 등): 점선 행, 숫자 오른쪽 */
.tw-av-stat { width: 100%; border-collapse: collapse; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.tw-av-stat caption { text-align: left; font-size: var(--fs-sub); color: var(--muted); padding: 2px 0 var(--sp-1); }
.tw-av-stat th, .tw-av-stat td { text-align: right; padding: var(--sp-1) var(--sp-1); border-bottom: 1px dotted var(--line-2); }
.tw-av-stat th:first-child { text-align: left; }
.tw-av-stat thead th { color: var(--muted); font-weight: 400; border-bottom-color: var(--line-2); }
.tw-av-stat tbody th { color: var(--text); font-weight: 400; }
.tw-av-stat td { color: var(--strong); }
.tw-av-stat td small { color: var(--muted); font-size: var(--fs-cap); }
.tw-av-stat tr.is-on th, .tw-av-stat tr.is-on td { color: var(--strong); font-weight: 700; }
.tw-av-stat tr.is-on th { box-shadow: inset 3px 0 0 var(--strong); }   /* 결정 BS② BS4: 옛 '▸' 글자 기호 대신 왼쪽 띠 */
/* 여섯 스탯 타일: 표 의미(th = 스탯 이름)는 그대로 두고 모양만 칸 격자(모바일 2열 · ≥600px 3열). '힘 552 (한계 701)' */
.tw-av-stat.is-tiles { display: block; }
.tw-av-stat.is-tiles tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
@media (min-width: 600px) { .tw-av-stat.is-tiles tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tw-av-stat.is-tiles tr { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--sp-2); padding: var(--sp-2) var(--sp-2); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tw-av-stat.is-tiles th, .tw-av-stat.is-tiles td { padding: 0; border: 0; text-align: left; }
.tw-av-stat.is-tiles tbody th { color: var(--muted); font-size: var(--fs-sub); font-weight: 700; }
.tw-av-stat.is-tiles td:first-of-type { font-size: var(--fs-strong); font-weight: 700; color: var(--strong); }
.tw-av-srhead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tw-av-more summary { cursor: pointer; font-size: var(--fs-body); color: var(--text); min-height: 44px; display: flex; align-items: center; }
.tw-av-more[open] summary { color: var(--strong); }
.tw-av-more .tw-av-kv { padding-left: var(--sp-1); }
@media (min-width: 560px) { .tw-av-more .tw-av-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); } }
.tw-av-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); min-width: 0; }
@media (max-width: 480px) { .tw-av-2col { grid-template-columns: 1fr; } }

/* 3x3 장착(칸 테두리는 app.css .tw-gear__slot = --slot-line, 라이트 검정). 이름은 한 줄 말줄임 + title·aria-label로 전체 이름 */
.tw-av-gear .tw-gear__slot { padding: 0; }
.tw-av-gear .tw-gear__slot > span:first-child { padding: var(--sp-2) var(--sp-2) 0; }
.tw-av-gear .tw-gear__slot > .tw-gear__meta { padding: 0 var(--sp-2) var(--sp-2); }
.tw-av-gear .tw-gear__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
/* [확정 AL4·T9] 펫 두 칸: 빈 칸은 점선 빈칸 모양 그대로(누르면 고르기), 둔 펫은 다른 칸처럼 실선 + 이름·효과 글자(그림 없음) */
.tw-av-gear .tw-gear__pet { padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tw-av-gear .tw-gear__pet > span { padding: 0 var(--sp-2); }
.tw-av-gear .tw-gear__pet > span:first-child { padding-top: var(--sp-2); }
.tw-av-gearbtn { font: inherit; color: inherit; background: none; border: 0; padding: var(--sp-2); margin: 0; width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.tw-av-gearbtn:hover, .tw-av-gearbtn[aria-pressed="true"] { background: var(--panel-2); }
.tw-av-gearbtn > span { min-width: 0; max-width: 100%; }
@media (max-width: 370px) { .tw-av-gearbtn { padding: var(--sp-1); } .tw-av-gear .tw-gear__name { font-size: var(--fs-cap); } }
/* [확정 V6] 장착 칸 승인 아이콘: 칸 이름 오른쪽(좁으면 아래로 줄바꿈). 이름·등급 글자는 그대로 */
.tw-av-gearhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 2px var(--sp-1); min-width: 0; }

/* 어빌리티·칭호 칸: 칸 이름 작게 → 이름(칸별 색) → 효과 1~2줄 → 오른쪽 '해제' */
.tw-av-slots3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.tw-av-slots3.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-av-slots3.is-stack { grid-template-columns: 1fr; }
.tw-av-slots3 > li { border: 1px solid var(--line); border-left: 3px solid var(--line-2); background: var(--surface); padding: var(--sp-2) var(--sp-2); display: grid; gap: 3px; align-content: start; min-width: 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.tw-av-slots3.is-stack > li, .tw-av-slots3.is-2 > li { display: flex; align-items: center; gap: var(--sp-2); }
.tw-av-slot__main { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.tw-av-slots3__k { font-size: var(--fs-cap); color: var(--muted); font-weight: 700; }
.tw-av-slots3 .tw-btn { flex: none; }
.tw-av-slot.is-job { border-left-color: var(--av-slot-job); }
.tw-av-slot.is-common { border-left-color: var(--av-slot-common); }
.tw-av-slot.is-spec { border-left-color: var(--av-slot-spec); }
.tw-av-slot.is-job .tw-av-slot__name { color: var(--av-slot-job); }
.tw-av-slot.is-common .tw-av-slot__name { color: var(--av-slot-common); }
.tw-av-slot.is-spec .tw-av-slot__name { color: var(--av-slot-spec); }
.tw-av-slot.is-off .tw-av-slot__name { opacity: .6; }
.tw-av-slot__text { color: var(--muted); font-size: var(--fs-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-av-slotbtn.is-job { color: var(--av-slot-job); border-color: var(--av-slot-job); }
.tw-av-slotbtn.is-common { color: var(--av-slot-common); border-color: var(--av-slot-common); }
.tw-av-slotbtn.is-spec { color: var(--av-slot-spec); border-color: var(--av-slot-spec); }
.tw-av-toggle[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-fg); border-color: var(--inv-bg); font-weight: 700; }
@media (max-width: 370px) { .tw-av-slots3:not(.is-stack), .tw-av-slots3.is-2 { grid-template-columns: 1fr; } }

/* 인벤토리 목록·상세 시트: 결정 BG1(2026-09-28)로 screens_inventory.css 로 옮겼다. 아래 아이템 상세 본문 모양은 내 정보·상점·창고와 함께 쓴다 */
/* 아이템 상세: 제목(등급 색)+분류 → 상태 경고 → 키/값 → 옵션 → 설명 → 남겨진 기록 → 행동 줄(주 버튼 오른쪽) */
.tw-av-detail { border-top: 2px solid var(--line-2); padding: var(--sp-2) 0 var(--sp-1); display: grid; gap: var(--sp-2); min-width: 0; outline: none; background: var(--surface); }
.tw-av-dhead { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-av-dtitle { margin-right: auto; min-width: 0; display: grid; gap: 2px; }
.tw-av-detail .tw-av-dtitle h3 { font-size: var(--fs-strong); color: var(--strong); overflow-wrap: anywhere; }
.tw-av-dtitle small { font-size: var(--fs-cap); color: var(--muted); }
.tw-av-dwarn { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2); background: var(--tint-warn); border-left: 4px solid var(--warn); font-size: var(--fs-sub); }
.tw-av-dwarn b { color: var(--warn); margin-right: var(--sp-1); }
.tw-av-dsec { display: grid; gap: 3px; padding-top: var(--sp-1); border-top: 1px dotted var(--line-2); font-size: var(--fs-body); }
.tw-av-detail .tw-av-dsec h4 { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-av-dsec ul { display: grid; gap: 2px; }
.tw-av-remember { border-top-style: dashed; }
.tw-av-remember blockquote { margin: 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-2); border-left: 2px solid var(--line-2); color: var(--strong); line-height: var(--lh-loose); }
.tw-av-dacts { justify-content: flex-end; }
.tw-av-dacts .tw-btn { flex: 1 1 auto; }
.tw-av-dacts .tw-btn.is-primary { flex: 2 1 auto; }

/* 프리셋 10칸 편집: 칸 카드(1줄 번호·기술·↑↓ / 2줄 문장형 요약 / 3줄 조건 편집), 미저장 칸 --warn 테두리 */
.tw-av-prows { display: grid; gap: var(--sp-2); }
.tw-av-prow { display: grid; gap: var(--sp-1); padding: var(--sp-2); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.tw-av-prow.is-dirty { border-color: var(--warn); border-left-width: 3px; }
.tw-av-prow__top { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: var(--sp-1); align-items: center; }
.tw-av-prow__no { font-weight: 700; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }
.tw-av-prow__top select { width: 100%; }
.tw-av-prow__mv { display: flex; gap: var(--sp-1); }
.tw-av-prow__mv .tw-icon-btn { width: 40px; height: 44px; font: inherit; font-weight: 700; }
.tw-av-prow__mv .tw-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.tw-av-prow__say { padding-left: var(--sp-6); font-size: var(--fs-sub); color: var(--strong); font-weight: 700; overflow-wrap: anywhere; }
.tw-av-prow.is-empty .tw-av-prow__say { color: var(--faint); font-weight: 400; }
.tw-av-prow__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding-left: var(--sp-6); font-size: var(--fs-sub); }
.tw-av-prow__sub label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); }
.tw-av-conds { display: grid; gap: var(--sp-1); padding-left: var(--sp-6); }
.tw-av-cond { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: var(--sp-1); }
.tw-av-cond select { width: 100%; }
.tw-av-cond:has(input[hidden]) { grid-template-columns: minmax(0, 1fr); }
.tw-av-prow .tw-av-warn { padding-left: var(--sp-6); }
@media (max-width: 370px) { .tw-av-prow__sub, .tw-av-conds, .tw-av-prow .tw-av-warn, .tw-av-prow__say { padding-left: 0; } .tw-av-cond { grid-template-columns: minmax(0, 1fr) 64px; } }
/* [확정 AP1 D10] 미저장 변경이 있을 때만 저장 줄을 화면 아래에 붙인다(같은 버튼이 붙는 것 — 복제하지 않음). 좁은 화면은 채팅 버튼 자리를 비운다 */
.tw-av-savebar { flex-wrap: nowrap; }
.tw-av-savebar.is-dirty { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 2px solid var(--warn); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); }
@media (max-width: 599px) { .tw-av-savebar.is-dirty { padding-right: 64px; } }
.tw-av-warnbtn { color: var(--warn); border-color: var(--warn); }

/* 목록 행(어빌리티·스킬·업적·퀘스트·펫) */
.tw-av-rowsx { display: grid; border-top: 1px solid var(--line); min-width: 0; }
.tw-av-rowsx > li { padding: var(--sp-2) 0; border-bottom: 1px dotted var(--line-2); display: grid; gap: var(--sp-1); min-width: 0; font-size: var(--fs-body); }
.tw-av-rowsx > li.is-off { color: var(--muted); }
.tw-av-abl__top, .tw-av-skill__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-av-abl__top b, .tw-av-skill__top b { overflow-wrap: anywhere; color: var(--strong); }
.tw-av-abl__top small, .tw-av-skill__top small { font-size: var(--fs-cap); color: var(--muted); }
.tw-av-abl__st { margin-left: auto; font-size: var(--fs-cap); color: var(--muted); }
.tw-av-abl__t { font-size: var(--fs-sub); color: var(--text); overflow-wrap: anywhere; }
.tw-av-lin { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); min-width: 0; }
.tw-av-sec .tw-av-lin__h { font-size: var(--fs-sub); color: var(--muted); font-weight: 700; }
.tw-av-lin__h small { font-weight: 400; font-size: var(--fs-cap); }
.tw-av-axes { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.tw-av-axis small { color: var(--muted); margin-right: 2px; font-size: var(--fs-cap); }
.tw-av-chiplink { text-decoration: none; cursor: pointer; }
.tw-av-chiplink:hover { text-decoration: underline; }
.tw-av-dim { opacity: .6; }
.tw-av-prog { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
/* 업적·퀘스트 카드: 순서 고정(이름+배지 → 설명 → 진행 → 보상 → 받기). 받을 수 있는 카드만 옅은 ok 바탕 */
.tw-av-rowsx.tw-av-cards { border-top: 0; gap: var(--sp-2); }
.tw-av-rowsx.tw-av-cards > li { padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--line); }
.tw-av-rowsx.tw-av-cards > li.is-ready { background: var(--tint-ok); border-color: var(--edge-ok); }
.tw-av-rowsx.tw-av-cards > li.is-on { color: var(--muted); }
.tw-av-claimbtn { color: var(--ok); border-color: var(--ok); }
.tw-av-qpick { display: grid; gap: var(--sp-1); }
.tw-av-qcard { padding: var(--sp-2); border: 1px solid var(--line-2); background: var(--surface); min-height: 44px; cursor: pointer; }
.tw-av-qcard:has(input:checked) { border-color: var(--strong); background: var(--panel-2); }
.tw-av-quest .tw-check { align-items: flex-start; }
.tw-av-quest .tw-check span { display: grid; gap: 2px; min-width: 0; }
.tw-av-quest .tw-check small { overflow-wrap: anywhere; color: var(--muted); }

/* 전직: 계열 탭(지금 계열 표시) → 차수 카드 격자(모바일 2열 · ≥600px 4열) → 전문화 3갈래 → 미리보기 */
.tw-av-fams > button { flex-direction: column; gap: 0; line-height: var(--lh-tight); }
.tw-av-now { font-size: var(--fs-cap); font-weight: 400; color: var(--muted); }
.tw-av-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); }
@media (min-width: 600px) { .tw-av-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tw-av-tier, .tw-av-spec { font: inherit; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); cursor: pointer; min-width: 0; }
.tw-av-tier { display: grid; gap: var(--sp-1); justify-items: start; align-content: start; padding: var(--sp-2); min-height: 84px; }
.tw-av-tier b { font-size: var(--fs-strong); color: var(--strong); }
.tw-av-tier .tw-job, .tw-av-spec .tw-job { white-space: normal; overflow-wrap: anywhere; color: var(--strong); }
.tw-av-tier small { font-size: var(--fs-cap); color: var(--muted); }
.tw-av-tier[aria-pressed="true"], .tw-av-spec[aria-pressed="true"] { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); background: var(--panel-2); }
.tw-av-tier.is-now { border-style: dashed; }
.tw-av-tier:hover, .tw-av-spec:hover { background: var(--panel-2); }
.tw-av-specs { display: grid; gap: var(--sp-1); }
.tw-av-specs[hidden] { display: none; }
.tw-av-spec { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2) var(--sp-2); min-height: 44px; }
.tw-av-spec .tw-tag { margin-left: auto; }
.tw-av-pv { display: grid; gap: var(--sp-2); padding: var(--sp-1) 0; min-width: 0; }
.tw-av-pvtable td { text-align: left; }
.tw-av-pvtable td small { color: var(--muted); }
.tw-av-delta { white-space: nowrap; text-align: right !important; }
.tw-av-delta.is-up { color: var(--ok); }
.tw-av-delta.is-down { color: var(--bad); }
.tw-av-ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1); }
.tw-av-ctiles > div { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-av-ctiles > div.is-on { border-color: var(--strong); }
.tw-av-ctiles dt { font-size: var(--fs-cap); color: var(--muted); }
.tw-av-ctiles dd { font-weight: 700; color: var(--strong); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-av-specneed { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); }
.tw-av-specneed li { padding: var(--sp-1) 0; border-bottom: 1px dotted var(--line-2); }
.tw-av-specneed li.is-on b { text-decoration: underline; text-underline-offset: 3px; }
.tw-av-specneed small { color: var(--muted); font-size: var(--fs-cap); }
/* [확정 결정 AF] 전직 화면 다음 차수 전직명 미리보기(5차 전 = 전문화 3갈래) */
.tw-av-nextjob { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; list-style: none; }
.tw-av-nextjob li { min-width: 0; overflow-wrap: anywhere; }

/* ===================== 내 정보 새 스타일(결정 CN·CQ·CR 2단계 갈래 A, 2026-09-30) — 값의 원본: docs/ui_shots_20260929_cn_style/S7_final =====================
   CN2 바탕 한 가지(칸 바탕 없음) · 카드 = core.card(외곽선·모서리 16·제목 S4) · 라벨·값 칸 = core.kvGrid(세로선, 가로 줄 없음) · CR15 색 세로선 최대 1개.
   휴대폰 한 열(CN4 순서), 넓은 화면(≥900px, .tw-layout-wide 960px) 두 열: 왼쪽 전투력 정보·장비 / 오른쪽 기본 정보·기본 스탯·계열 숙련도·어빌리티(S7 CHECK 4번). */
.tw-av-info { display: grid; gap: var(--gap); min-width: 0; }
.tw-av-infocols { display: grid; gap: var(--gap); align-items: start; min-width: 0; }
@media (min-width: 900px) {
  .tw-av-infocols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "power basic" "gear stat" "gear fam" "gear abil"; grid-template-rows: auto auto auto 1fr; }
  .tw-av-infocols > [data-av-area="power"] { grid-area: power; }
  .tw-av-infocols > [data-av-area="basic"] { grid-area: basic; }
  .tw-av-infocols > [data-av-area="gear"] { grid-area: gear; }
  .tw-av-infocols > [data-av-area="stat"] { grid-area: stat; }
  .tw-av-infocols > [data-av-area="fam"] { grid-area: fam; }
  .tw-av-infocols > [data-av-area="abil"] { grid-area: abil; }
}
/* ① 정체성 카드: 초상(2:3, 76px · ≥600px 120px) | 이름 18px · 칩 줄(CQ7) · HP/MP 두 칸(라벨·값 위, 막대 아래) */
.tw-av-idcard { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 10px var(--pad); }
@media (min-width: 600px) { .tw-av-idcard { grid-template-columns: 120px minmax(0, 1fr); align-items: center; padding: 12px 16px; } }
.tw-av-idcard.has-frame { grid-template-columns: auto minmax(0, 1fr); }
.tw-av-idcard .tw-av-portrait, .tw-av-idcard .tw-av-portrait.has-art { width: 76px; height: auto; aspect-ratio: 2 / 3; display: block; overflow: hidden; border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); }
@media (min-width: 600px) { .tw-av-idcard .tw-av-portrait, .tw-av-idcard .tw-av-portrait.has-art { width: 120px; } }
.tw-av-idcard .tw-av-portrait.has-art img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.tw-av-idcard .tw-av-id__body { display: grid; gap: 6px; min-width: 0; align-content: start; justify-items: stretch; text-align: left; }
.tw-av-idcard .tw-av-name { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-av-idcard .tw-av-idchips { display: flex; flex-wrap: wrap; gap: 4px; line-height: normal; min-width: 0; }
.tw-av-idcard .tw-av-idchips .tw-chip { max-width: 100%; }
.tw-av-titlechip .tw-av-g { overflow: hidden; text-overflow: ellipsis; }
.tw-av-idcard .tw-av-idbars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 2px; padding-top: 6px; border-top: var(--bw) solid var(--rule); min-width: 0; }
.tw-av-idbars .tw-gauge { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "l v" "p p"; row-gap: 4px; column-gap: 6px; min-width: 0; }
.tw-av-idbars .tw-gauge__label { grid-area: l; }
.tw-av-idbars .tw-gauge progress { grid-area: p; }
.tw-av-idbars .tw-gauge__value { grid-area: v; justify-self: end; color: var(--fg); white-space: nowrap; }
.tw-av-idbars .tw-gauge > .tw-missing { grid-area: v; justify-self: end; }

/* ④ 장비 3×3(결정 CM7 — 시안 모양): 칸 = 부위 선 아이콘 + 부위 이름 → 그림(40 · ≥600px 48) + 강화 +N → 등급색 이름. 칸 선은 등급색을 옅게 섞은 외곽선,
   빈 장비 칸·펫 칸은 점선(T9·CR10). 칸 바탕 없음(CN2) — 누름·고름은 선 색으로 */
.tw-av-gear { gap: 6px; }
.tw-av-gear > li.tw-av-cell { min-height: 92px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  border: var(--bw) solid var(--rule-v); border-radius: var(--radius-sm); min-width: 0; }
.tw-av-gear > li.tw-av-cell > span { padding: 0 4px; }
.tw-av-gear > li.tw-av-cell.is-none, .tw-av-gear > li.tw-av-cell.tw-gear__pet { border: var(--bw) dashed var(--line-strong); }
.tw-av-gear > li.tw-av-cell.is-advanced { border-color: color-mix(in srgb, var(--g-advanced) 55%, var(--line)); }
.tw-av-gear > li.tw-av-cell.is-rare { border-color: color-mix(in srgb, var(--g-rare) 55%, var(--line)); }
.tw-av-gear > li.tw-av-cell.is-heroic { border-color: color-mix(in srgb, var(--g-heroic) 55%, var(--line)); }
.tw-av-gear > li.tw-av-cell.is-legendary { border-color: color-mix(in srgb, var(--g-legendary) 55%, var(--line)); }
.tw-av-gear > li.tw-av-cell:has(.tw-av-gearbtn:hover) { border-color: var(--line-hover); }
.tw-av-gear > li.tw-av-cell:has([aria-pressed="true"]) { border-color: var(--accent); border-style: solid; }
.tw-av-cell .tw-av-gearbtn, .tw-av-cell .tw-av-gearbtn:hover, .tw-av-cell .tw-av-gearbtn[aria-pressed="true"] { background: none; }
.tw-av-cell .tw-av-gearbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 4px; min-height: 90px; text-align: center; border-radius: var(--radius-sm); }
.tw-av-cell .tw-av-gearbtn > span { padding: 0; }
.tw-av-cell__slot { display: inline-flex; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: var(--fs-cap); line-height: 1.3; white-space: nowrap; }
.tw-av-cell__slot .tw-li { width: 12px; height: 12px; }
.tw-av-cell__art { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.tw-av-cell__art .tw-eqi { width: 40px; height: 40px; border: 0; }
@media (min-width: 600px) { .tw-av-cell__art, .tw-av-cell__art .tw-eqi { width: 48px; height: 48px; } }
.tw-av-cell__art.is-noart { width: auto; height: auto; }
.tw-av-cell__enh { position: absolute; right: -12px; bottom: -4px; font-size: var(--fs-cap); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.tw-av-cell__art.is-noart .tw-av-cell__enh { position: static; }
.tw-av-cell.is-advanced .tw-av-cell__enh { color: var(--g-advanced); } .tw-av-cell.is-rare .tw-av-cell__enh { color: var(--g-rare); }
.tw-av-cell.is-heroic .tw-av-cell__enh { color: var(--g-heroic); } .tw-av-cell.is-legendary .tw-av-cell__enh { color: var(--g-legendary); }
.tw-av-gear > li.tw-av-cell .tw-gear__name { font-size: var(--fs-cap); font-weight: 600; line-height: 1.25; white-space: normal; overflow: visible; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; }
@media (min-width: 600px) { .tw-av-gear > li.tw-av-cell .tw-gear__name { font-size: var(--fs-sub); } }
.tw-av-gear > li.tw-av-cell .tw-gear__meta { font-size: var(--fs-cap); color: var(--muted); }
.tw-av-gear > li.tw-gear__pet.is-on .tw-gear__name { color: var(--fg-2); }
/* 장비·펫 칸 상세(카드 안, 3×3 아래): 가는 줄로만 나눔 */
.tw-av-info .tw-av-detail { border-top: var(--bw) solid var(--rule); padding-top: var(--sp-2); background: transparent; }
.tw-av-info .tw-av-dhead .tw-tip { margin-left: auto; }

/* ⑤ 기본 스탯: 표 의미 그대로, 모양은 라벨·값 칸(한 줄 3개 · 값 칸 세로선 · '현재 / 한계') */
.tw-av-stat.is-kv { display: block; width: 100%; }
.tw-av-stat.is-kv tbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2px; }
.tw-av-stat.is-kv tr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 3px; padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); min-width: 0; }
.tw-av-stat.is-kv th, .tw-av-stat.is-kv td { padding: 0; border: 0; }
.tw-av-stat.is-kv tbody th { margin-right: auto; color: var(--muted); font-size: var(--fs-label); font-weight: 400; white-space: nowrap; text-align: left; }
.tw-av-stat.is-kv td:first-of-type { color: var(--fg-2); font-size: var(--fs-value); font-weight: var(--fw-value); }
.tw-av-stat.is-kv td small { font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; }
@media (max-width: 599px) { .tw-av-stat.is-kv tbody { column-gap: 4px; } .tw-av-stat.is-kv tr { padding-left: 5px; } }

/* ⑦ 어빌리티 카드의 '활성 프리셋' 줄(결정 CR4: 제목 + 오른쪽 '프리셋' 링크 한 줄, 그 아래 프리셋 이름 — 값 칸 세로선) */
.tw-av-presethead { margin-top: 4px; }
.tw-av-presethead .tw-card__title { font-size: var(--fs-card); color: var(--fg-2); }
.tw-av-presetname { padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); color: var(--fg); font-size: var(--fs-value); line-height: 1.35; overflow-wrap: anywhere; }