/* 내 정보 4탭(결정 BF1~BF6, 2026-09-28) — screens_profile.js 전용. 색은 기존 토큰만(새 색 없음), 직각·EGA(AP1 D1): 광택·그라데이션 장식·둥근 모서리 없음.
   테두리 모서리 블록·쐐기는 단색 linear-gradient 조각(색 1개, 번짐 없음)으로 그린다. 인라인 style 없음(CSP style-src 'self'). */

/* 탭 줄: 좁은 화면은 가로 스크롤(글자 자르지 않음) */
.tw-pf-tabs { margin: 0 0 var(--sp-2); }
@media (max-width: 400px) {
  .tw-pf-tabs { overflow-x: auto; scrollbar-width: none; }
  .tw-pf-tabs::-webkit-scrollbar { display: none; }
  .tw-pf-tabs > a { flex: 1 0 auto; padding: var(--sp-1) var(--sp-2); overflow: visible; }
}
/* 화면 안 거르기 버튼(aria-pressed)도 선택 탭과 같은 표시 */
.tw-pf-card-page .tw-tabs > [aria-pressed="true"] { color: var(--sel); border-bottom-color: var(--sel); font-weight: 700; }

/* ---- 프로필 테두리(.tw-frame.is-<style>) — 전투 영향 없음 ---- */
.tw-frame { position: relative; display: inline-block; padding: var(--sp-1); border: 1px solid var(--line-2); line-height: 0; max-width: 100%; }
.tw-frame::before, .tw-frame::after { content: none; position: absolute; pointer-events: none; }
.tw-frame.is-plain { border: 1px solid var(--line-2); }
.tw-frame.is-ember { border: 1px solid var(--grade-heroic); border-bottom-width: 4px; }
.tw-frame.is-milestone { border: 2px dotted var(--ok); }
.tw-frame.is-anvil { border: 1px solid var(--text); }
.tw-frame.is-anvil::before { content: ""; inset: -4px;
  background: linear-gradient(var(--text), var(--text)) left top / 7px 7px no-repeat, linear-gradient(var(--text), var(--text)) right top / 7px 7px no-repeat,
              linear-gradient(var(--text), var(--text)) left bottom / 7px 7px no-repeat, linear-gradient(var(--text), var(--text)) right bottom / 7px 7px no-repeat; }
.tw-frame.is-ledger { border: 4px double var(--career); }
.tw-frame.is-fang { border: 1px solid var(--bad); }
.tw-frame.is-fang::before { content: ""; inset: -1px;
  background: linear-gradient(to bottom right, var(--bad) 50%, transparent 50%) left top / 10px 10px no-repeat,
              linear-gradient(to bottom left, var(--bad) 50%, transparent 50%) right top / 10px 10px no-repeat,
              linear-gradient(to top right, var(--bad) 50%, transparent 50%) left bottom / 10px 10px no-repeat,
              linear-gradient(to top left, var(--bad) 50%, transparent 50%) right bottom / 10px 10px no-repeat; }
.tw-frame.is-knot { border: 4px double var(--gold); }
.tw-frame.is-knot::before { content: ""; inset: -7px;
  background: linear-gradient(var(--gold), var(--gold)) left top / 4px 4px no-repeat, linear-gradient(var(--gold), var(--gold)) right top / 4px 4px no-repeat,
              linear-gradient(var(--gold), var(--gold)) left bottom / 4px 4px no-repeat, linear-gradient(var(--gold), var(--gold)) right bottom / 4px 4px no-repeat; }
.tw-frame.is-unseen { border: 1px dotted var(--career); }
.tw-frame.is-unseen::after { content: ""; inset: 2px; border: 1px dotted var(--career); }
/* 결정 BX8 D3(2026-09-29): 새 업적 테두리 3종 — 설계서 §5-2 모양 그대로(단색·직각, 기존 토큰만) */
.tw-frame.is-sand { border: 1px solid var(--line-2); border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); }
.tw-frame.is-stair { border: 1px solid var(--text); }
.tw-frame.is-stair::before { content: ""; inset: -4px;
  background: linear-gradient(var(--text), var(--text)) left top / 12px 4px no-repeat, linear-gradient(var(--text), var(--text)) left top / 4px 12px no-repeat,
              linear-gradient(var(--text), var(--text)) right bottom / 12px 4px no-repeat, linear-gradient(var(--text), var(--text)) right bottom / 4px 12px no-repeat; }
.tw-frame.is-rampart { border: 1px solid var(--muted); border-top: 2px solid var(--muted); }
.tw-frame.is-rampart::before { content: ""; left: -1px; right: -1px; top: -6px; height: 4px;
  background: repeating-linear-gradient(to right, var(--muted) 0 6px, transparent 6px 12px); }
/* 모서리 장식이 바깥으로 나가는 테두리는 자리를 조금 더 둔다(가로 넘침 방지) */
.tw-frame.is-anvil, .tw-frame.is-knot, .tw-frame.is-stair { margin: var(--sp-1); }
.tw-frame.is-rampart { margin-top: var(--sp-1); }
/* 결정 BX8 D4: 남에게 보이는 곳 — 파티 모집 자리 초상(작은 틀), 아레나 제시 상대 줄(카드 테두리) */
.tw-frame.is-seat { padding: 3px; }
.tw-frame.is-row { display: flex; line-height: var(--lh-base); padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; }   /* 줄(.twb-row, flex) 자체에 두른다 */
.tw-frame.is-row.is-anvil, .tw-frame.is-row.is-knot, .tw-frame.is-row.is-stair { margin: var(--sp-2) var(--sp-2); }
.tw-frame.is-row.is-rampart { margin-top: var(--sp-3); }

/* 내 정보 초상에 두를 때: 초상 크기는 그대로(screens_avatar.css .tw-av-idcard), 테두리는 바깥 여백으로 */
.tw-av-idcard.has-frame { grid-template-columns: auto minmax(0, 1fr); }
.tw-frame.is-portrait { justify-self: center; align-self: start; }
/* 결정 CN4·CQ13(2026-09-30): 옛 '한눈 요약'(.tw-pf-glance)은 뺐다 — 규칙도 지움 */

/* ---- 칭호 ---- */
.tw-pf-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (max-width: 520px) { .tw-pf-slots { grid-template-columns: minmax(0, 1fr); } }
/* 결정 CN·CQ·CR(갈래 C, 2026-09-30 — 칭호·프로필·아바타 관리 탭): 칸 바탕 없음(CN2)·안쪽 칸 모서리 8·거르기 칩 한 줄 + 좌우 스와이프(CR6·CR7 과 같은 방식)·입력 칸 44px */
.tw-pf-slot { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-2) var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.tw-pf-slot b { overflow-wrap: anywhere; }
.tw-pf-slot .tw-pf-grade, .tw-pf-slot .tw-actions { justify-self: start; }
.tw-pf-slot small { color: var(--muted); font-size: var(--fs-cap); }
.tw-pf-tools { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-2); min-width: 0; }
.tw-pf-search { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: end; }
.tw-pf-search label { display: grid; gap: 2px; font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-pf-search input, .tw-pf-search select { width: 14em; max-width: 100%; min-height: 44px; padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--fs-body); color: var(--fg-2);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.tw-pf-search input:focus, .tw-pf-search select:focus { border-color: var(--accent); outline: 0; }
.tw-pf-active { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-1); align-items: center; min-height: 24px; }
.tw-pf-trow__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-pf-trow__top b { overflow-wrap: anywhere; }
.tw-pf-tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-pf-trow__how { font-size: var(--fs-sub); overflow-wrap: anywhere; }
.tw-pf-trow__how small { color: var(--muted); margin-right: var(--sp-1); }
.tw-pf-trow.is-locked b, .tw-pf-trow.is-locked .tw-pf-grade { opacity: .72; }
.tw-pf-grade { font-size: var(--fs-cap); font-weight: var(--fw-title); }   /* 상태 태그(결정 BU3·BT4 — 테두리 없음) + 등급 글자색(.tw-av-g) */

/* ---- 프로필 카드 ---- */
.tw-pf-preview { display: flex; justify-content: center; padding: var(--sp-2) 0; min-width: 0; }
.tw-frame.is-card { width: 100%; max-width: 440px; }
.tw-pf-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); align-items: center; padding: var(--sp-2); background: transparent; line-height: var(--lh-base); min-width: 0; }
.tw-pf-card__body { display: grid; gap: var(--sp-1); min-width: 0; font-size: var(--fs-body); }
.tw-pf-card__body > span { overflow-wrap: anywhere; }
.tw-pf-card__name { font-size: var(--fs-section); font-weight: 800; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 370px) { .tw-pf-card { grid-template-columns: 64px minmax(0, 1fr); } }
.tw-pf-trying { min-height: 1.4em; color: var(--warn); font-size: var(--fs-sub); }
.tw-pf-now { display: grid; gap: var(--sp-1); }
.tw-pf-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--sp-2); min-width: 0; }   /* 넓은 화면 2열(글자 폭 확보) */
.tw-pf-frames > li[hidden] { display: none; }
.tw-pf-swatch { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; text-align: left; padding: var(--sp-2); font: inherit;
  color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.tw-pf-swatch:hover { border-color: var(--line-hover); }
.tw-pf-swatch[aria-pressed="true"] { border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--sel); }
.tw-pf-swatch:focus-visible { outline: 2px solid var(--focus, var(--sel)); outline-offset: 2px; }
.tw-pf-swatch__txt { display: grid; gap: var(--sp-1); justify-items: start; min-width: 0; }
.tw-pf-swatch__txt b { color: var(--fg-2); overflow-wrap: anywhere; }
.tw-pf-swatch__txt small { font-size: var(--fs-cap); color: var(--muted); word-break: keep-all; overflow-wrap: anywhere; }
.tw-pf-swatch.is-locked .tw-frame { opacity: .6; }
.tw-frame.is-mini { padding: 3px; }
.tw-pf-mini { display: block; width: 28px; height: 42px; background: transparent; }
.tw-pf-where { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
/* 좁은 화면 시인성(검토 2026-09-28): overflow-wrap:anywhere는 표 칸 최소 폭을 글자 1개로 줄여 '두/르/지/않/음'처럼 세로로 쪼개졌다.
   한글은 띄어쓰기 단위로만 줄을 바꾸고(keep-all), 첫 칸(곳)도 줄바꿈을 허용해 가운데·끝 칸이 폭을 나눠 갖게 한다. */
.tw-pf-where th, .tw-pf-where td { text-align: left; padding: var(--sp-1); border-bottom: 1px solid var(--rule); vertical-align: top; word-break: keep-all; overflow-wrap: break-word; }
.tw-pf-where thead th { color: var(--muted); font-weight: 600; font-size: var(--fs-cap); white-space: nowrap; border-bottom-color: var(--line); }
.tw-pf-where tbody th { font-weight: 700; color: var(--fg); }
.tw-pf-where td .tw-tag { white-space: nowrap; }
/* 결정 BS② 2단계: 옛 규칙 상자 → 탭 끝 ⓘ '규칙' */
.tw-pf-rulesrow { display: flex; justify-content: flex-end; min-width: 0; }

/* ---- 아바타 관리 ---- */
.tw-pf-lookwrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; min-width: 0; }
@media (max-width: 480px) { .tw-pf-lookwrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
.tw-pf-look { display: grid; place-items: center; min-width: 0; }
.tw-pf-look .tw-av-portrait, .tw-pf-look .tw-av-portrait.has-art { width: 168px; height: 252px; }
.tw-pf-lookinfo { display: grid; gap: var(--sp-2); min-width: 0; word-break: keep-all; }.tw-pf-public .tw-hint, .tw-pf-looks .tw-hint { word-break: keep-all; }
.tw-pf-public { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
@media (max-width: 370px) { .tw-pf-public { grid-template-columns: 64px minmax(0, 1fr); } }