/* 대장간 화면(결정 AZ 2026-09-28, AZ6 분리) — screens_smithy.js 전용. 공통 토큰만 쓴다(--phos 없음: 결정 AQ1 라이트 검정 원칙).
   screens_city.css 의 .tw-ct-* 공용 틀(탭·목록·키값·등급색·규칙 상자)을 그대로 쓰고, 대장간에만 필요한 모양만 .tw-sm-* 로 더한다.
   직각·그림자 없음(D1). 선택 = 왼쪽 굵은 막대 또는 반전, 주 버튼은 탭마다 1개(D3). 인라인 style 없음(CSP). */

.tw-sm { gap: var(--sp-3); }
.tw-sm-panel { gap: var(--sp-3); }

/* 탭 5개: 좁은 화면에서 한 줄 균등 폭 */
.tw-sm-tabs button { flex: 1 1 0; min-width: 0; padding: var(--sp-2) var(--sp-2); text-align: center; }

/* AZ1 재화 카드: 큰 숫자, 좁으면 2칸 */
.tw-sm-cur { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr)); gap: var(--sp-2); margin: 0; }
.tw-sm-cur__card { display: grid; gap: 2px; align-content: start; padding: var(--sp-3) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-sm-cur__card dt { font-size: var(--fs-cap); color: var(--muted); }
.tw-sm-cur__card dd { margin: 0; display: grid; gap: 1px; min-width: 0; }
.tw-sm-cur__card b { font-size: var(--fs-section); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-sm-cur__card small { font-size: var(--fs-cap); color: var(--faint); }
.tw-sm-cur__card.is-gold { border-color: var(--gold); }
.tw-sm-cur__card.is-gold b { color: var(--gold); }
@media (max-width: 420px) {
  .tw-sm-cur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-sm-cur__card.is-wide { grid-column: 1 / -1; }   /* 검토 2026-09-28: 연금술 촉매(5~8차 4개 숫자)가 반 칸에서 '8 / 차'로 끊기던 것 */
}
/* 결정 BS② 2단계: 옛 탭 한 줄 설명(.tw-sm-lead) → 탭 안내 ⓘ 버튼 하나(버튼 옆 짧은 글자, 오른쪽 정렬) */
.tw-sm-about { display: flex; justify-content: flex-end; margin: calc(-1 * var(--sp-2)) 0; }
.tw-sm-about .tw-tip__txt { color: var(--muted); }
.tw-sm-count { font-size: var(--fs-sub); color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; }

/* AZ3 목록 도구: 종류 · 정렬 = 필터 칩(결정 BU3 — 공용 .tw-fchip 모양: 회색 테두리, 켜짐 = 반전 + 체크). 줄바꿈(가로 이동 안에서 44px 누름 영역이 잘리지 않게) */
.tw-sm-tools, .tw-sm-rectools { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-sm-kinds, .tw-sm-sort { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.tw-sm-sort { align-items: center; }
.tw-sm-sort > span { font-size: var(--fs-cap); color: var(--muted); flex: none; }
.tw-sm-kinds .tw-fchip, .tw-sm-sort .tw-fchip { white-space: nowrap; }
.tw-sm-split { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-sm-split__list, .tw-sm-split__detail { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-sm-split__detail:empty { display: none; }

/* 목록 한 줄: 아이콘 · 이름·부위 · 오른쪽 요약 */
.tw-sm-picks { max-height: 300px; }
.tw-sm-pick { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3); }
.tw-sm-pick__ic { width: 32px; height: 32px; display: grid; place-items: center; }
.tw-sm-pick__noic { width: 24px; height: 24px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.tw-sm-pick__main { display: grid; gap: 1px; min-width: 0; }
.tw-sm-pick__end { display: grid; justify-items: end; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.tw-sm-pick__end b { font-size: var(--fs-body); color: var(--fg-2); }
.tw-sm-pick__end small { font-size: var(--fs-cap); color: var(--muted); }

/* 큰 미리보기 카드('지금 → 결과') */
.tw-sm-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-sm-card__name { margin: 0; font-size: var(--fs-body); display: flex; flex-wrap: wrap; gap: 2px var(--sp-2); align-items: baseline; overflow-wrap: anywhere; }
.tw-sm-card__name small { font-size: var(--fs-cap); color: var(--muted); }
.tw-sm-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; }
.tw-sm-vs__side { display: grid; gap: 2px; align-content: start; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); min-width: 0; }
.tw-sm-vs__side.is-next { border-style: solid; border-color: var(--fg-2); }
.tw-sm-vs__side h3 { margin: 0; font-size: var(--fs-cap); font-weight: 400; color: var(--muted); }
.tw-sm-vs__big { margin: 0; font-size: var(--fs-bignum); font-weight: 700; line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-sm-vs__sub { margin: 0; font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-sm-vs__stats { display: grid; gap: 1px; margin-top: var(--sp-1); }
.tw-sm-vs__stats li { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-sub); }
.tw-sm-vs__stats span { color: var(--muted); }
.tw-sm-vs__stats b { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-sm-vs__arrow { align-self: center; display: inline-flex; font-size: var(--fs-section); color: var(--faint); }   /* 선 아이콘(결정 BS4 — 옛 '→' 글자) */
.tw-sm-odds { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.tw-sm-odds > span { font-size: var(--fs-sub); color: var(--muted); }
.tw-sm-odds > b { font-size: var(--fs-bignum); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-sm-odds > small { font-size: var(--fs-cap); color: var(--muted); }
.tw-sm-max { margin: 0; font-size: var(--fs-body); color: var(--fg); }

/* 진행 막대(천장·불운 보정·연금술 구간): 숫자를 항상 함께 */
.tw-sm-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); min-width: 0; }
.tw-sm-meter > span { color: var(--muted); white-space: nowrap; }
.tw-sm-meter > b { color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-sm-meter progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--track); }   /* 결정 CN: 가는 둥근 막대 */
.tw-sm-meter progress::-webkit-progress-bar { background: var(--track); border-radius: 999px; }
.tw-sm-meter progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.tw-sm-meter progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.tw-sm-meter.is-thin { font-size: var(--fs-cap); gap: var(--sp-2); }
.tw-sm-meter.is-none > small { font-size: var(--fs-sub); color: var(--muted); min-width: 0; overflow-wrap: anywhere; }   /* 검토 2026-09-28: 천장 없음(기본 100%) */
.tw-sm-meter.is-thin progress { height: 4px; }

.tw-sm-go { display: grid; gap: var(--sp-2); }
.tw-sm-go .tw-btn-why { text-align: center; margin: 0; }
a.tw-btn.is-block { display: flex; }

/* 결과를 화면 안에 남김(AW3 방식) */
.tw-sm-last { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--edge-ok); border-radius: var(--radius-sm); background: transparent; font-size: var(--fs-sub); min-width: 0; overflow-wrap: anywhere; }
.tw-sm-last.is-bad { border-color: var(--edge-bad); }
.tw-sm-last b { color: var(--fg-2); font-size: var(--fs-body); }
.tw-sm-diff { display: grid; gap: 2px; }
.tw-sm-diff li { font-size: var(--fs-sub); }
.tw-sm-diff li.is-hit { font-weight: 700; color: var(--fg-2); }
.tw-sm-diff s { color: var(--muted); font-weight: 400; }

/* 보유/필요: 부족분 빨강(+ '부족' 글자) */
.tw-sm-short { color: var(--bad); font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-sm-short small { font-size: var(--fs-cap); font-weight: 400; border: 1px solid var(--line); border-radius: var(--radius-chip); padding: 0 3px; margin-left: 2px; }   /* 배지 테두리 = 회색(결정 BT4), 뜻은 빨간 글자 '부족' */
.tw-sm-ok { font-variant-numeric: tabular-nums; }

/* 재설정 방식 */
.tw-sm-mode small { font-size: var(--fs-cap); color: var(--muted); }
/* 검토 2026-09-28: .tw-ct-radio span{display:grid}가 안쪽 '보유/필요' 글자까지 블록으로 만들어 '가루 / 9 / 3 / 골드'가 줄마다 끊기던 것 */
.tw-sm-mode small { display: block; line-height: var(--lh-base); }
.tw-sm-mode small span { display: inline; }

/* AZ2 조합표 */
.tw-sm-recfind { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; min-width: 0; }
.tw-sm-only { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); min-height: 36px; cursor: pointer; }
.tw-sm-only input { width: 16px; height: 16px; margin: 0; accent-color: var(--fg-2); }
.tw-sm-q { flex: 1 1 160px; min-width: 0; }
.tw-sm-q .tw-ct-in { width: 100%; }
.tw-sm-recs { border-top: 1px solid var(--line); display: grid; min-width: 0; }
.tw-sm-rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) 2px; border-bottom: 1px solid var(--rule); min-width: 0; }
.tw-sm-rec__out { grid-column: 1 / -1; display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.tw-sm-rec__out b { font-size: var(--fs-body); color: var(--fg-2); }
.tw-sm-rec__out small { font-size: var(--fs-cap); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.tw-sm-rec__need { display: grid; gap: 2px; font-size: var(--fs-sub); min-width: 0; }
.tw-sm-rec__need ul { display: grid; gap: 1px; }
.tw-sm-rec__need p { margin: 0; color: var(--fg); }
.tw-sm-rec__need small { color: var(--muted); }
.tw-sm-rec__h { font-size: var(--fs-cap); color: var(--muted); }
.tw-sm-rec__act { align-self: end; }
.tw-sm-rec__why { grid-column: 1 / -1; margin: 0; text-align: right; }
.tw-sm-rec.is-off .tw-sm-rec__out b { color: var(--muted); }
.tw-sm-rec .tw-sm-last { grid-column: 1 / -1; }
.tw-sm-upform { grid-column: 1 / -1; display: grid; gap: var(--sp-2); padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.tw-sm-pager .tw-btn { min-width: 64px; }

/* AZ4 연금술: 여섯 스탯 카드 */
.tw-sm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 560px) { .tw-sm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tw-sm-stat { font: inherit; text-align: left; display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--fg); cursor: pointer; min-width: 0; }
.tw-sm-stat:hover { border-color: var(--line-hover); }
.tw-sm-stat.is-current { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* 고른 칸 = 인디고 선(채움 없음) */
.tw-sm-stat.is-off .tw-sm-stat__big { color: var(--muted); }
.tw-sm-stat__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-1); }
.tw-sm-stat__head b { font-size: var(--fs-body); color: var(--fg-2); }
.tw-sm-stat__big { font-size: var(--fs-bignum); font-weight: 700; line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-sm-stat .tw-sm-meter { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
.tw-sm-stat .tw-sm-meter progress { grid-column: 1 / -1; grid-row: 2; }
.tw-sm-stat__cost { font-size: var(--fs-cap); color: var(--muted); line-height: var(--lh-base); overflow-wrap: anywhere; }
.tw-sm-stat__cost small { white-space: nowrap; }   /* 검토 2026-09-28: '(보유 / 10)' 괄호가 줄 사이에서 갈라지지 않게 */
.tw-sm-stat__last { font-size: var(--fs-cap); font-weight: 700; color: var(--ok); }
.tw-sm-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.tw-sm-counts__cell { display: grid; min-width: 0; }
.tw-sm-counts .tw-btn { width: 100%; padding: var(--sp-2) var(--sp-1); font-size: var(--fs-body); min-height: 44px; }
.tw-sm-whys { display: grid; gap: 2px; font-size: var(--fs-cap); color: var(--muted); }
.tw-sm-whys li::before { content: '· '; }

@media (max-width: 370px) {
  .tw-sm-vs { grid-template-columns: minmax(0, 1fr); }
  .tw-sm-vs__arrow { justify-self: center; transform: rotate(90deg); }
  .tw-sm-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-sm-stat__big, .tw-sm-vs__big { font-size: var(--fs-title); }
}