/* 업적·퀘스트 화면(결정 BL3·BL4 2026-09-28) — screens_goals.js 전용. 공통 토큰만 쓴다(결정 AQ1 라이트 검정 원칙).
   막대는 screens_growth.css 의 .tw-gr-meter 를 같이 쓴다. */
.tw-gl { display: grid; gap: var(--sp-3); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.tw-gl-card { gap: var(--sp-3, var(--sp-3)); }
.tw-gl-result { margin: 0; padding: var(--sp-2) var(--sp-2); border: 1px solid var(--edge-ok); border-radius: var(--radius-sm); background: transparent; font-size: var(--fs-body); line-height: var(--lh-base); overflow-wrap: anywhere; }

/* 결정 BX6: 모두 받기에서 남은 것(이름·이유) — 결과 한 줄 바로 아래 */
.tw-gl-left { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); border: 1px solid var(--edge-warn); border-radius: var(--radius-sm); font-size: var(--fs-sub); line-height: var(--lh-base); min-width: 0; }
.tw-gl-left li { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); min-width: 0; }
.tw-gl-left span { color: var(--muted); }
/* 결정 BX8 D9: 칭호 요약 한 줄 + 내 정보 > 칭호 링크(탭 아님) */
.tw-gl-titles { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-gl-titles b { color: var(--fg); font-variant-numeric: tabular-nums; }
.tw-gl-titles a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }

/* (옛) 업적·칭호 머리 탭 — 결정 BX8 D9로 화면에서 쓰지 않음(BS② 정리 때 삭제) */
.tw-gl-tabs { display: flex; gap: 0; }
.tw-gl-tabs a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 40px; padding: 0 var(--sp-3); border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-weight: 700; }
.tw-gl-tabs a[aria-current="page"] { color: var(--fg-2); border-bottom-color: var(--fg-2); }
.tw-gl-tabs a small { font-weight: 400; font-size: var(--fs-cap); }

/* 점수 카드 */
.tw-gl-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); align-items: center; min-width: 0; }
.tw-gl-score__big { display: grid; gap: 2px; padding: var(--cell-py) 0 var(--cell-py) var(--deco-pl); border-left: 2px solid var(--rule-v); }
.tw-gl-score__big span { font-size: var(--fs-sub); color: var(--muted); font-weight: 700; }
.tw-gl-score__big b { font-size: var(--fs-bignum); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-gl-score__side { display: grid; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-gl-score__side b { color: var(--fg); font-variant-numeric: tabular-nums; }
.tw-gl-score__act { grid-column: 1 / -1; display: grid; gap: var(--sp-1); }
@media (min-width: 760px) {
  .tw-gl-score { grid-template-columns: auto minmax(0, 1fr) minmax(200px, 260px); }
  .tw-gl-score__act { grid-column: auto; }
}

/* 도구 줄: 분류 칩 · 상태 · 정렬 · 검색 */
.tw-gl-tools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-gl-cats, .tw-gl-status { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-1); min-width: 0; }   /* 결정 DF1: 줄 사이 8 = 아래 누름 영역이 겹치지 않게 */
.tw-gl-cats button, .tw-gl-status button { font: inherit; font-size: var(--fs-sub); min-height: 36px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); position: relative; }
.tw-gl-cats button::before, .tw-gl-status button::before { content: ""; position: absolute; inset: -5px -1px; min-width: 44px; }   /* 결정 DF1: 보이는 36 그대로, 누름 영역 44(테두리 안쪽 34 + 10) */
.tw-gl-cats button small { color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-gl-cats button[aria-pressed="true"], .tw-gl-status button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }   /* 켜진 필터 = 인디고 선·글자(채움 없음) */
.tw-gl-cats button[aria-pressed="true"] small { color: var(--accent); }
.tw-gl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.tw-gl-field { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-gl-field > span { white-space: nowrap; }
.tw-gl-field.is-grow { flex: 1 1 160px; }
.tw-gl-field.is-grow .tw-gl-in { width: 100%; }
.tw-gl-in { font: inherit; font-size: var(--fs-body); min-height: 44px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line-strong); background: transparent; color: var(--fg-2); border-radius: var(--radius-btn); max-width: 100%; min-width: 0; }
.tw-gl-in:focus { border-color: var(--fg-2); outline: 0; }
.tw-gl-shown { margin: 0; font-size: var(--fs-cap); color: var(--muted); }

/* 업적·퀘스트 줄 */
.tw-gl-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); min-width: 0; }
.tw-gl-row { display: grid; gap: var(--sp-1); padding: var(--sp-2) 2px; border-bottom: 1px solid var(--rule); min-width: 0; font-size: var(--fs-body); }
/* 결정 CR15(갈래 C 검토): 받을 수 있는 줄마다 붙던 녹색 세로선 삭제 — 줄 안 '받을 수 있음'·'완료' 칩(녹색 글자)으로 구분 */
.tw-gl-row.is-done { color: var(--muted); }
.tw-gl-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-width: 0; }
.tw-gl-row__name { color: var(--fg-2); overflow-wrap: anywhere; }
.tw-gl-row.is-done .tw-gl-row__name { color: var(--fg); }
.tw-gl-row__cat { color: var(--muted); font-size: var(--fs-cap); }
.tw-gl-row__pts { margin-left: auto; font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-gl-row__top .tw-tag:last-child { margin-left: 0; }
.tw-gl-row__desc { margin: 0; font-size: var(--fs-sub); }
.tw-gl-row__prog { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.tw-gl-row__prog small { color: var(--muted); font-size: var(--fs-cap); }
.tw-gl-row__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.tw-gl-row__rw { font-size: var(--fs-cap); color: var(--muted); min-width: 0; }
.tw-gl-row__foot .tw-btn { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sub); }
.tw-gl-go .tw-li { margin-left: var(--sp-1); }   /* 결정 BS② BS4: 옛 → 글자(::after) 대신 선 아이콘 */

/* 퀘스트 머리: 탭 + 초기화 남은 시간 */
.tw-gl-qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-3); min-width: 0; }
.tw-gl-reset { margin: 0; font-size: var(--fs-sub); color: var(--muted); }
.tw-gl-reset b { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-gl-reset .tw-btn { min-height: 32px; padding: 2px var(--sp-2); margin-left: var(--sp-1); }
.tw-gl-claimbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.tw-gl-qsum { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sub); color: var(--muted); margin-bottom: var(--sp-1); }
.tw-gl-qsum b { color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .tw-gl-qsum { grid-template-columns: minmax(0, 1fr); } }
.tw-gl-pickhelp { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.tw-gl-rest { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-sub); }
/* 검토 수정(2026-09-28): 설명이 두 줄인 퀘스트 칸에서 확인란이 18px보다 작게 눌려 보이던 것 — 확인란은 줄어들지 않게 */
.tw-gl-qpick .tw-check input { flex: none; }