/* 수행·전직 화면(결정 BL1·BL2 2026-09-28) — screens_growth.js 전용. 공통 토큰만 쓴다(--phos 없음: 결정 AQ1 라이트 검정 원칙).
   막대 .tw-gr-meter 는 업적·퀘스트(screens_goals.js)도 같이 쓴다. 폭은 JS가 CSSOM(--fill·--mark)으로 넣는다(인라인 style 속성 없음). */
.tw-gr { display: grid; gap: var(--sp-3); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.tw-gr-card { gap: var(--sp-3, var(--sp-3)); }
.tw-gr-h small { font-size: var(--fs-cap); color: var(--muted); font-weight: 400; margin-left: var(--sp-1); }
.tw-gr-subh { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-sub); color: var(--muted); font-weight: 700; }

/* 막대(공용): 틀 + 채움(--fill) + 선택 세로 선(--mark) */
.tw-gr-meter { position: relative; display: block; height: 6px; min-width: 60px; border: 0; border-radius: 999px; background: var(--track); overflow: hidden; }   /* 결정 CN: 가는 둥근 막대(트랙·채움만 색) */
.tw-gr-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: 999px; background: var(--muted); }
.tw-gr-meter.is-on .tw-gr-meter__fill, .tw-gr-meter.is-ok .tw-gr-meter__fill { background: var(--accent); }
.tw-gr-meter.is-max .tw-gr-meter__fill { background: var(--ok); }
.tw-gr-meter__mark { position: absolute; top: 0; bottom: 0; left: var(--mark, 0%); width: 2px; margin-left: -1px; background: var(--warn); }
@media (prefers-reduced-motion: no-preference) { .tw-gr-meter__fill { transition: width .4s ease-out; } }

/* 결과 한 줄(여관 AW3 방식) */
.tw-gr-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; }
.tw-gr-result small { display: block; color: var(--muted); font-size: var(--fs-cap); }

/* BL1 지금 수행하면 */
.tw-gr-now { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-gr-tp { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-gr-tp__k { font-size: var(--fs-sub); color: var(--muted); font-weight: 700; }
.tw-gr-tp__n { font-size: var(--fs-bignum); line-height: var(--lh-tight); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-gr-tp__n.is-bad { color: var(--bad); }
.tw-gr-tp__after { font-size: var(--fs-sub); color: var(--muted); }
.tw-gr-tp__after b { color: var(--fg); font-variant-numeric: tabular-nums; }
.tw-gr-pv { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.tw-gr-pv > li { font-size: var(--fs-body); min-width: 0; overflow-wrap: anywhere; }
.tw-gr-pv b { color: var(--fg-2); margin-right: var(--sp-1); }
.tw-gr-pv small { color: var(--muted); font-size: var(--fs-cap); }
.tw-gr-multi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.tw-gr-multi .tw-btn { flex: 1 1 140px; }
.tw-gr-plan { margin: var(--sp-2) 0 0; font-size: var(--fs-sub); color: var(--fg); line-height: var(--lh-loose); }
.tw-gr-plan b { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tw-gr-plan small { display: block; color: var(--muted); font-size: var(--fs-cap); }

/* BL1 스탯 한계 막대 */
.tw-gr-lims { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.tw-gr-lim { display: grid; gap: var(--sp-1); min-width: 0; }
.tw-gr-lim__top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); font-size: var(--fs-body); min-width: 0; }
.tw-gr-lim__k { font-weight: 700; min-width: 3em; }
.tw-gr-lim.is-on .tw-gr-lim__k { color: var(--fg-2); }
.tw-gr-lim__gain { font-size: var(--fs-cap); font-weight: 700; padding: 0 var(--sp-1); border: 1px solid var(--fg-2); border-radius: var(--radius-chip); color: var(--fg-2); }
.tw-gr-lim__v { color: var(--muted); font-size: var(--fs-sub); font-variant-numeric: tabular-nums; }
.tw-gr-lim__v b { color: var(--fg); }
.tw-gr-lim__left { margin-left: auto; color: var(--muted); font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }
.tw-gr-lim .tw-tag { margin-left: auto; }

/* BL2 지금 전직 가능 */
.tw-gr-ready { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--edge-ok); border-radius: var(--radius-sm); background: transparent; min-width: 0; }
.tw-gr-ready.is-none { border-color: var(--line); color: var(--muted); font-size: var(--fs-sub); }
.tw-gr-ready__h { margin: 0 0 var(--sp-1); font-size: var(--fs-body); }
.tw-gr-ready__h small { color: var(--muted); font-size: var(--fs-cap); margin-left: var(--sp-1); }
.tw-gr-ready__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tw-gr-pick { font: inherit; font-size: var(--fs-sub); min-height: 36px; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--fg-2); border-radius: var(--radius-sm); background: transparent; color: var(--fg-2); cursor: pointer; text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.tw-gr-pick:hover, .tw-gr-pick:focus-visible { color: var(--accent); border-color: var(--accent); }
.tw-gr-famt { display: block; font-size: var(--fs-cap); color: var(--muted); font-weight: 400; }

/* BL2 차수 길(1~8차 한 줄 지도): 넓으면 8칸 한 줄, 좁으면 4칸 × 2줄 */
.tw-gr-road { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-1); counter-reset: none; min-width: 0; }
.tw-gr-node { position: relative; min-width: 0; }
.tw-gr-node + .tw-gr-node::before { content: ""; position: absolute; top: 50%; left: -4px; width: 4px; border-top: 2px solid var(--line); }
.tw-gr-node__btn { width: 100%; height: 100%; display: grid; gap: 2px; justify-items: center; align-content: start; padding: var(--sp-1) 2px; font: inherit; font-size: var(--fs-cap); border: 1px solid var(--line); border-radius: var(--radius-chip); background: transparent; color: var(--fg); cursor: pointer; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.tw-gr-node__btn b { font-size: var(--fs-body); }
.tw-gr-node__btn .tw-job, .tw-gr-node__btn small { font-size: var(--fs-cap); line-height: var(--lh-base); }
.tw-gr-node__st { font-size: var(--fs-cap); color: var(--muted); }
.tw-gr-node.is-ok .tw-gr-node__btn { border-color: var(--ok); }
.tw-gr-node.is-ok .tw-gr-node__st { color: var(--ok); font-weight: 700; }
.tw-gr-node.is-warn .tw-gr-node__st { color: var(--warn); }
.tw-gr-node.is-lock .tw-gr-node__btn { border-style: dashed; color: var(--muted); }
.tw-gr-node.is-now .tw-gr-node__btn { border-width: 2px; border-color: var(--fg-2); }
.tw-gr-node.is-now .tw-gr-node__st { color: var(--fg-2); font-weight: 700; }
.tw-gr-node__btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }   /* 결정 CN: 고른 칸 = 인디고 선·글자(반전 채움 없음) */
.tw-gr-node__btn[aria-pressed="true"] .tw-gr-node__st, .tw-gr-node__btn[aria-pressed="true"] .tw-job { color: var(--accent); }
@media (max-width: 560px) {
  .tw-gr-road { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tw-gr-node:nth-child(4n + 1)::before { display: none; }
}
.tw-gr-specs { margin-top: var(--sp-2); }

/* BL2 조건 체크리스트 */
.tw-gr-checkwrap { margin-top: var(--sp-1); }
.tw-gr-check { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); min-width: 0; }
.tw-gr-ck { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "mark k v" "mark bar bar" "mark go go"; gap: 2px var(--sp-2); align-items: center; padding: var(--sp-2) 2px; border-bottom: 1px solid var(--rule); font-size: var(--fs-body); min-width: 0; }
.tw-gr-ck__mark { grid-area: mark; align-self: start; font-weight: 700; text-align: center; }
.tw-gr-ck.is-ok .tw-gr-ck__mark { color: var(--ok); }
.tw-gr-ck.is-bad .tw-gr-ck__mark { color: var(--bad); }
.tw-gr-ck.is-info .tw-gr-ck__mark { color: var(--muted); }
.tw-gr-ck__k { grid-area: k; font-weight: 700; min-width: 0; }
.tw-gr-ck__k small { font-weight: 400; color: var(--muted); font-size: var(--fs-cap); }
.tw-gr-ck__v { grid-area: v; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.tw-gr-ck__v small { color: var(--muted); font-size: var(--fs-cap); }
.tw-gr-ck__bar { grid-area: bar; }
.tw-gr-ck__go { grid-area: go; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); font-size: var(--fs-sub); }
.tw-gr-ck__go small { color: var(--muted); font-size: var(--fs-cap); }
.tw-gr-short { color: var(--bad); font-weight: 700; font-size: var(--fs-sub); }
.tw-gr-go { font-weight: 700; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; position: relative; }
.tw-gr-go::before { content: ''; position: absolute; top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2)); left: 0; right: 0; }   /* 결정 DF1: 누름 높이 44(보이는 글자 그대로) */
.tw-gr-go .tw-li { margin-left: var(--sp-1); }   /* 결정 BS② BS4: 옛 → 글자(::after) 대신 선 아이콘 */
@media (max-width: 420px) {
  .tw-gr-ck { grid-template-areas: "mark k k" "mark v v" "mark bar bar" "mark go go"; }
  .tw-gr-ck__v { text-align: left; }
}
.tw-gr-okline { font-size: var(--fs-body); }
/* 검토 수정(2026-09-28): 넓은 화면 두 칸 배치에서 전문화 보조 스탯 줄(5~8차 값)이 칸 밖으로 3px 삐져나와 줄바꿈 허용 */
.tw-gr .tw-av-specneed .tw-nowrap { white-space: normal; }