/* 결정 CA 작은 묶음(2026-09-29) 화면 모양 — 패배 원인 한 줄·입문 한 줄 교습·파티 조건 찾기·처음의 날들·기록 비교·공유 코드·복귀 요약.
   새 UI 기준(결정 BU1·BV2 역할 토큰, UI_COMPONENTS 3-17~3-25): 글자·간격·색은 역할 토큰만(직접 색·px 글자 없음), 직각·그림자 없음,
   선 아이콘은 글자색을 따른다. 접두사 tw-ca-, 표식 data-ca-*. */

/* ---- 공용 ---- */
.tw-ca-h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-section); font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.tw-card .tw-ca-h2::before { content: none; }   /* 옛 카드 제목 앞 기호(■) 없음 — 선 아이콘과 겹치지 않게(결정 BS4, screens_guild.css와 같은 처리) */
.tw-ca-h3 { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-strong); font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.tw-ca-h3 small { font-size: var(--fs-sub); font-weight: var(--fw-regular); color: var(--muted); }
.tw-ca-note { margin: var(--sp-2) 0 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-tip .tw-tip__btn { min-width: 32px; padding: 0 var(--sp-1); font-size: var(--fs-strong); }
.tw-ca-diff { display: inline-flex; margin-left: var(--sp-1); padding: 0 var(--sp-1); font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--warn);
  border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }   /* 결정 CN2: 옅은 덧칠 → 3px 명판(선 + 글자 색) */

/* ---- 패배 원인 한 줄(결과 카드 첫 줄 아래) ---- */
.tw-ca-cause { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-sub); line-height: var(--lh-base); color: var(--fg); text-align: left; }
.tw-ca-cause > .tw-li { flex: none; color: var(--bad); }
.tw-ca-cause__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-cause__t b { font-weight: var(--fw-strong); }
/* 결정 DL1 A3(2026-09-30): 원인 줄 이름표 '돌아봄'(tips_ca.js REFLECT.name) 자리 — 줄에 다는 일은 ca_record.js(HUNT 영역) 후속. 3px 명판(선 + 글자 색, 위험 색 아님 — CK14) */
.tw-ca-cause__name { flex: none; padding: 0 var(--sp-1); font-size: var(--fs-cap); font-weight: var(--fw-strong); color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }

/* ---- 입문 한 줄 교습(사냥터 정보 아래) ---- */
.tw-ca-intro { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-intro__t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tw-ca-lessons { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-2); }
.tw-ca-lessons b { font-weight: var(--fw-strong); }

/* ---- 파티 모집 조건 찾기(필터 칩 한 줄씩, 가로 이동) ---- */
.tw-ca-pf { display: grid; gap: var(--sp-1); margin: var(--sp-3) 0; padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ca-pf__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); }
.tw-ca-pf__head b { font-weight: var(--fw-strong); }
.tw-ca-pf__clear { margin-left: auto; }
.tw-ca-pf__row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ca-pf__k { flex: none; width: 4.5em; font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-pf__chips { display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto; padding: var(--sp-1) 0; scrollbar-width: thin; }
.tw-ca-pf__chips .tw-fchip { flex: none; white-space: nowrap; }

/* ---- 처음의 날들(내 정보 > 프로필) ---- */
.tw-ca-chron__bar { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-chron { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; }
.tw-ca-chron li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-body); line-height: var(--lh-tight); }
.tw-ca-chron__ic { color: var(--muted); display: inline-flex; }
.tw-ca-chron__at { font-size: var(--fs-sub); color: var(--muted); white-space: nowrap; }
.tw-ca-chron__t { min-width: 0; overflow-wrap: anywhere; }

/* ---- 전투 기록 비교(≥840px 두 열, 좁으면 위아래) ---- */
.tw-ca-cmp__bar { display: flex; align-items: center; gap: var(--sp-2); }
.tw-ca-cmp__pick { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-cmp__pick select { width: 100%; min-height: 44px; font: inherit; font-size: var(--fs-body); color: var(--fg); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); }
.tw-ca-cmp__sum { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.tw-ca-cmp__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.tw-ca-cmp__col { min-width: 0; padding: var(--sp-3); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ca-cmp__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ca-cmp__title { min-width: 0; font-size: var(--fs-strong); font-weight: var(--fw-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-ca-cmp__meta { margin: var(--sp-1) 0 0; font-size: var(--fs-sub); color: var(--muted); overflow-wrap: anywhere; }
.tw-ca-kv .is-diff dd, .tw-ca-kv .is-diff dt { color: var(--fg-2); }
.tw-ca-preset { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.tw-ca-preset li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sub); }
.tw-ca-preset li.is-diff { color: var(--warn); }   /* 다른 줄 = 주의색 글자(옛 덧칠 바탕 없음 — CN2) */
.tw-ca-preset li.is-diff .tw-ca-preset__name { color: var(--warn); }
.tw-ca-preset li.is-off { color: var(--muted); }
.tw-ca-preset__n { flex: none; min-width: 1.5em; color: var(--muted); }
.tw-ca-preset__name { font-weight: var(--fw-strong); overflow-wrap: anywhere; }
/* 본문 폭은 D4(600px) 그대로 — 넓은 화면 예외(.tw-layout-wide)는 쓰지 않는다(UI_COMPONENTS 3-17). 두 열은 그 안에서 나눈다. */
@media (min-width: 840px) {
  .tw-ca-cmp__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); }
  .tw-ca-cmp__col { padding: var(--sp-2); }
  .tw-ca-cmp__col .tw-kv > div { gap: var(--sp-1); }
}

/* ---- 공유 코드(스킬 편집 창·게시판 글) ---- */
.tw-ca-sharebtn { flex: none; }
.tw-ca-share { max-width: min(560px, calc(100vw - 16px)); }
.tw-ca-share__sec { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.tw-ca-share__in input, .tw-ca-share__code input { width: 100%; min-height: 44px; font-family: var(--font-mono); font-size: var(--fs-sub); color: var(--fg);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); padding: 0 var(--sp-2); }   /* 공유 코드 입력 = 코드 조각이라 고정폭 유지 */
.tw-ca-share__code { display: flex; gap: var(--sp-2); align-items: center; }
.tw-ca-share__code input { flex: 1 1 auto; min-width: 0; }
.tw-ca-share__code .tw-btn { flex: none; white-space: nowrap; }
.tw-ca-share__sum { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; font-size: var(--fs-sub); }
.tw-ca-sharecodes { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.tw-ca-sharecode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ca-sharecode__c { flex: 1 1 12em; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-sub); overflow-wrap: anywhere; }

/* ---- 복귀 요약 한 장(홈 위 카드) ---- */
.tw-ca-return { display: grid; gap: var(--sp-2); }
.tw-ca-return__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ca-return__head .tw-ca-h2 { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: keep-all; }
.tw-ca-return__x { margin-left: auto; }
.tw-ca-return__list { display: grid; }
.tw-ca-return__row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--rule); color: var(--fg); text-decoration: none; font-size: var(--fs-sub); line-height: var(--lh-tight); }
.tw-ca-return__row:hover { color: var(--accent); }
.tw-ca-return__k { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); }
.tw-ca-return__v { min-width: 0; overflow-wrap: anywhere; }
.tw-ca-return__act { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
/* 결정 DL1 A4(2026-09-30): 맨 위 작은 머리 문장(교리) · 비운 기간이 있을 때 제목 아래 '빈 줄' 한 줄 — 역할 토큰만 */
.tw-ca-return__motto { margin: 0 0 calc(-1 * var(--sp-1)); font-size: var(--fs-cap); line-height: var(--lh-tight); letter-spacing: 0.04em; color: var(--muted); overflow-wrap: anywhere; }
.tw-ca-return__kept { display: flex; align-items: center; gap: var(--sp-1); margin: 0; font-size: var(--fs-sub); line-height: var(--lh-base); color: var(--fg-2); }
.tw-ca-return__kept > .tw-li { flex: none; color: var(--muted); }
.tw-ca-return__kept > span { min-width: 0; overflow-wrap: anywhere; }

/* CA — 결정 DO2(B10 되쓴 권, 2026-09-30): '처음의 날들' 아래 구역. 두 칸(첫 권 ↔ 되쓴 권)은 좁으면 위아래, ≥840px 가로.
   역할 토큰만(새 색·그림자·이미지 없음), 패배 낱말만 --bad(CK14), 나머지 본문 색. 나란히 보기는 3열 표(항목 · 첫 권 · 되쓴 권), 다른 칸은 글자 '다름'. */
.tw-ca-rw { margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.tw-ca-rw__head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ca-rw__head .tw-ca-h3 { margin: var(--sp-2) 0; min-width: 0; }
.tw-ca-rw__head .tw-ca-h3 > .tw-li { flex: none; color: var(--muted); }
.tw-ca-rw__lead { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.tw-ca-rw__list { list-style: none; margin: 0; padding: 0; display: grid; }
.tw-ca-rw__item { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); line-height: var(--lh-tight); }
.tw-ca-rw__subj { display: flex; align-items: center; gap: var(--sp-2); margin: 0; min-width: 0; }
.tw-ca-rw__subj b { min-width: 0; font-weight: var(--fw-strong); overflow-wrap: anywhere; word-break: keep-all; }
.tw-ca-rw__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.tw-ca-rw__side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; padding: var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sub); }
.tw-ca-rw__side.is-win { border-color: var(--line-strong); }
.tw-ca-rw__txt { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.tw-ca-rw__oc { font-weight: var(--fw-strong); }
.tw-ca-rw__oc.is-bad { color: var(--bad); }
.tw-ca-rw__link { display: inline-flex; justify-self: center; color: var(--muted); }
.tw-ca-rw__line { margin: 0; font-size: var(--fs-sub); line-height: var(--lh-base); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-ca-rw__kept { margin: 0; }
.tw-ca-rw__item > .tw-btn { justify-self: start; }
.tw-ca-rw__cmp { min-width: 0; }
.tw-ca-rw__tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-sub); line-height: var(--lh-tight); }
.tw-ca-rw__tbl th, .tw-ca-rw__tbl td { padding: var(--sp-1) var(--sp-1); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.tw-ca-rw__tbl thead th { font-weight: var(--fw-regular); }
.tw-ca-rw__tbl tbody th { width: 34%; font-weight: var(--fw-regular); color: var(--muted); }
.tw-ca-rw__tbl tr.is-diff td { color: var(--fg-2); font-weight: var(--fw-strong); }
.tw-ca-rw__cmpnote { display: flex; justify-content: flex-end; }
@media (min-width: 840px) {
  .tw-ca-rw__pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--sp-2); }
  .tw-ca-rw__link { align-self: center; }
}

/* CA — 결정 DM B17(쌓이는 별칭 — 결정 DO1·DR1·DR2, 2026-09-30): 내 정보 > 칭호 탭 '장착 칸' 아래 '별칭' 구역(ca_epithet.js).
   역할 토큰만(새 색·그림자·이미지 없음). 미리보기 "이름, 별칭"은 말줄임 없이 줄바꿈, 아직 없는 별칭은 흐린 글자(접힘 안). */
.tw-ca-ep__now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-ca-ep__preview { flex: 1 1 14em; display: grid; gap: var(--sp-1); min-width: 0; margin: 0; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.tw-ca-ep__k { font-size: var(--fs-cap); line-height: var(--lh-tight); color: var(--muted); }
.tw-ca-ep__preview b { font-size: var(--fs-strong); font-weight: var(--fw-strong); line-height: var(--lh-tight); color: var(--fg-2); overflow-wrap: anywhere; word-break: keep-all; }
.tw-ca-ep__list { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-ca-ep__row { display: grid; gap: var(--sp-1); min-width: 0; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); line-height: var(--lh-tight); }
.tw-ca-ep__row:last-child { border-bottom: 0; }
.tw-ca-ep__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-ca-ep__top > .tw-li { flex: none; color: var(--muted); }
.tw-ca-ep__name { min-width: 0; font-weight: var(--fw-strong); color: var(--fg-2); overflow-wrap: anywhere; word-break: keep-all; }
.tw-ca-ep__meta { margin: 0; font-size: var(--fs-sub); line-height: var(--lh-base); color: var(--muted); overflow-wrap: anywhere; }
.tw-ca-ep__row.is-locked .tw-ca-ep__name { font-weight: var(--fw-regular); color: var(--muted); }
.tw-ca-ep__more { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tw-ca-ep__more > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-3); cursor: pointer; list-style: none;
  font-size: var(--fs-sub); color: var(--fg); }
.tw-ca-ep__more > summary::-webkit-details-marker { display: none; }
.tw-ca-ep__more > summary > .tw-li { flex: none; color: var(--muted); }
.tw-ca-ep__more[open] > summary > .tw-li { transform: rotate(180deg); }
.tw-ca-ep__more > .tw-ca-ep__list { padding: 0 var(--sp-3) var(--sp-1); }

/* CA — 결정 DM B6(길가 기록비 — 결정 DO3·DR3, 2026-09-30): 명예 탭 기록 줄 → 비석 줄(ca_stele.js 가 목록에 .tw-ca-steles, 줄에 .tw-ca-stele 을 단다).
   윗모서리만 둥근 카드 · 외곽선 --line · 글자 가운데 · 발 줄(읽힌 수·[읽어 드림])은 --fg-2. 빈 자리는 점선. 새 색·그림자·이미지 없음(탁본 질감은 이미지 승인 뒤).
   375·360 한 열, ≥840px 3열 격자. screens_ranking.css(HOME)는 고치지 않고 여기서 덮는다(선택자 두 단계). */
.tw-ca-stele-bar { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-ca-stele-bar > .tw-li { flex: none; }
.tw-ca-stele-bar > span { min-width: 0; overflow-wrap: anywhere; }
.tw-ca-stele__why { margin: 0; overflow-wrap: anywhere; }
.tw-ca-stele__why[hidden] { display: none; }
.tw-rk-hrs.tw-ca-steles { gap: var(--sp-2); }
.tw-ca-steles > .tw-ca-stele { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "what" "who" "meta" "slot"; justify-items: center; align-items: start;
  gap: var(--sp-1); padding: var(--sp-3) var(--sp-3) var(--sp-2); text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius) var(--radius) var(--radius-chip) var(--radius-chip); }
.tw-ca-steles > .tw-ca-stele.is-open { border-style: dashed; }
.tw-ca-stele > .tw-rk-hr__ic { padding-top: 0; }
.tw-ca-stele > .tw-rk-hr__what, .tw-ca-stele > .tw-rk-hr__who, .tw-ca-stele > .tw-rk-hr__meta { justify-content: center; }
.tw-ca-stele > [data-stele-slot] { grid-area: slot; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-1) var(--sp-2);
  width: 100%; margin-top: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--rule); font-size: var(--fs-sub); color: var(--fg-2); }
.tw-ca-stele > [data-stele-slot]:empty { display: none; }
@media (min-width: 840px) {
  .tw-rk-hrs.tw-ca-steles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}