/* 스킬 화면(결정 BI1~BI4, 2026-09-28) — screens_skill.js. 접두사 tw-sk-, 표식 data-sk-*.
   겉모습: 직각·고정폭 글꼴·EGA 의미 색(AP1 D1). 새 컴포넌트는 --phos를 쓰지 않는다(AQ1). 터치 영역 44px 기본(줄 안 칩·작은 아이콘은 32~36px).
   화면 본문 한 열 600px(D4), 미저장 때만 하단 고정 저장 줄(D10), 주 버튼은 저장 하나(D3).
   결정 BS3·BS4(2026-09-28): 조정 칸은 한 줄(최대 두 줄) — [손잡이][번호][조건 칩…][기술][경고][메뉴], 선 아이콘(icons.js)은 글자색(회색 = --muted)을 따른다.
   조건 편집·자세한 값·설명은 떠 있는 칸(.tw-sk-ced)·helpTip 팝오버(app.css .tw-tip)로만.
   새 스타일(결정 CN·CQ·CR 2단계 갈래 A, 2026-09-30): 칸 바탕 없음(CN2 — 떠 있는 칸·메뉴·창만 불투명 --bg) · 외곽선만 · 모서리 8(칸·입력·단추)·3(칩)·16(창) ·
   옛 오프셋 그림자(4px 4px 0) → 부드러운 그림자(--pop-shadow) · 메뉴 hover 반전 채움 → 인디고 글자 · 줄 왼쪽 색 띠(CR15)는 번호 글자 색·외곽선으로. */
.tw-sk-tabs { margin: 0 0 var(--sp-3); }
.tw-sk > .tw-rec-note { margin: var(--sp-1) 0 var(--sp-2); }   /* 결정 CT6: '추천세팅' 적용 뒤 한 줄·막힌 이유(머리 아래) */
.tw-sk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); justify-content: center; margin: 0 0 var(--sp-3); }
.tw-sk-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }   /* 자식의 고유 폭(선택 상자 등)이 카드를 넓히지 않게 */
.tw-sk-card [data-sk-note]:empty, .tw-sk-set [data-sk-setout]:empty { display: none; }   /* 빈 알림 칸이 줄 간격을 만들지 않게 */
.tw-sk-notice { display: flex; align-items: center; gap: var(--sp-1); color: var(--warn); font-size: var(--fs-sub); min-height: 44px; }
.tw-sk-notice .tw-tip__btn { margin-left: -6px; }

/* 기술 세트 줄(한 줄: 아이콘 · 세트 고르기 · 상태 칩 · 메뉴) */
.tw-sk-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.tw-sk-set__row { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-sk-set__pick { display: flex; align-items: center; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.tw-sk-set__ic { color: var(--muted); font-size: var(--fs-section); display: inline-flex; }
.tw-sk-set__pick select { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; font: inherit; background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); padding: var(--sp-1) var(--sp-2); }
.tw-sk select option, .tw-sk-picker select option { background: var(--bg); color: var(--fg-2); }
.tw-sk-set__row > .tw-tag { flex: none; }
.tw-sk-setmenu { position: relative; flex: none; }
.tw-sk-setmenu > summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: var(--fs-section); border: 1px solid transparent; border-radius: var(--radius-btn); }
.tw-sk-setmenu > summary::-webkit-details-marker { display: none; }
.tw-sk-setmenu > summary:hover, .tw-sk-setmenu[open] > summary { color: var(--accent); border-color: var(--line-strong); }
.tw-sk-setmenu__body { position: absolute; right: 0; top: calc(100% + 2px); z-index: 25; min-width: 220px; max-width: calc(100vw - 32px); display: grid; gap: 2px;
  padding: var(--sp-1); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); box-shadow: var(--pop-shadow); }
.tw-sk-setmenu__body .tw-btn { justify-content: flex-start; min-height: 44px; }
@media (max-width: 420px) { .tw-sk-set__row > .tw-tag { max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* 줄 목록(라니스처럼 칸 사이 선 하나) */
.tw-sk-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--bw) solid var(--rule); touch-action: pan-y; }
.tw-sk-row { position: relative; display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--sp-1);
  min-height: 48px; padding: 2px 0; border-bottom: var(--bw) solid var(--rule); background: transparent; }
.tw-sk-row.is-changed .tw-sk-row__no { color: var(--warn); font-weight: 700; }   /* 옛 왼쪽 주의색 띠 → 번호 글자 색(CR15) */
.tw-sk-row.is-bad { outline: 1px solid var(--bad); outline-offset: -1px; border-radius: var(--radius-sm); }
.tw-sk-row.is-off .tw-sk-line { opacity: .7; }
.tw-sk-row.is-dragging { opacity: .4; }
.tw-sk-row.is-flash { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: var(--radius-sm); }
.tw-sk-handle { width: 32px; min-height: 44px; display: grid; place-items: center; padding: 0; font: inherit; font-size: var(--fs-section); background: none; color: var(--muted);
  border: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
/* 결정 DF1: 보이는 폭(손잡이 32·더 보기 36)은 그대로, 누름 폭 40 — 투명 ::before 로 좌우만 넓힘 */
.tw-sk-handle, .tw-sk-more { position: relative; }
.tw-sk-handle::before { content: ""; position: absolute; inset: 0 -4px; touch-action: none; }
.tw-sk-more::before { content: ""; position: absolute; inset: 0 -2px; }
.tw-sk-handle:hover { color: var(--fg-2); }
.tw-sk-handle:active { cursor: grabbing; }
.tw-sk-handle[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.tw-sk-row__no { min-width: 16px; text-align: right; font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-sk-star { font-style: normal; color: var(--warn); margin-right: 1px; }
.tw-sk-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-width: 0; padding: var(--sp-1) 0; }
.tw-sk-conds { display: contents; }
/* 조건 칩: 선 아이콘 + 짧은 글자 + 값. 좁은 화면은 글자를 숨기고 아이콘 + 값만(아이콘이 같은 사거리 안/밖은 한 글자,
   결정 BS② 2단계: 값이 없어 아이콘만 남던 칩도 한두 글자 — screens_skill.js CHIP_NARROW) */
.tw-sk-cchip { display: inline-flex; align-items: center; gap: 3px; min-height: 32px; padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-cap); line-height: 1;
  color: var(--fg); background: transparent; border: var(--bw) solid var(--line-strong); border-radius: var(--radius-chip); cursor: pointer; white-space: nowrap; }
.tw-sk-cchip .tw-li { font-size: var(--fs-body); color: var(--muted); }
.tw-sk-cchip:hover, .tw-sk-cchip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.tw-sk-cchip__v { color: var(--fg-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-sk-cchip__n { display: none; }
.tw-sk-cchip.is-static { cursor: default; }
.tw-sk-cchip.is-err, .tw-sk-cchip.is-empty { border-color: var(--bad); color: var(--bad); }
.tw-sk-cchip.is-empty .tw-li { color: var(--bad); }
.tw-sk-always { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 32px; color: var(--muted); font-size: var(--fs-cap); white-space: nowrap; }
.tw-sk-always .tw-li { font-size: var(--fs-body); }
/* 결정 BS② 2단계: 줄 안 점선 [+](.tw-sk-addc)는 없앴다 — 조건 추가는 줄 메뉴(.tw-sk-pop '조건 추가') */
/* 기술 칸: 내용 폭(이름 + MP)만큼 — 같은 줄에 자리가 없으면 통째로 다음 줄로(이름이 중간에서 꺾이지 않게), 한 줄보다 길면 말줄임 */
.tw-sk-skill { flex: 1 1 auto; max-width: 100%; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: var(--sp-1); text-align: left; font: inherit; padding: 2px var(--sp-2);
  background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); cursor: pointer; }
button.tw-sk-skill:hover { border-color: var(--line-hover); }
.tw-sk-skill b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-sk-mp { margin-left: auto; flex: none; color: var(--muted); font-size: var(--fs-cap); font-weight: 400; white-space: nowrap; }
.tw-sk-skill.is-off { cursor: default; color: var(--muted); border-style: dashed; }
.tw-sk-skill.is-off .tw-li { flex: none; }
.tw-sk-wslot { display: inline-flex; }
.tw-sk-wslot:empty { display: none; }
.tw-sk-wtip .tw-tip__btn { padding: 0; font-size: var(--fs-strong); }   /* 검토(BS5): 누름 영역 44px 유지(예전 32px) */
.tw-sk-more { width: 36px; min-height: 44px; display: grid; place-items: center; padding: 0; font: inherit; font-size: var(--fs-section); background: none; color: var(--muted); border: 0; cursor: pointer; }
.tw-sk-more:hover, .tw-sk-more[aria-expanded="true"] { color: var(--accent); }
.tw-sk-attr { font-size: var(--fs-cap); flex: none; display: inline-flex; }   /* 결정 CQ6: 속성 = attr.js attrTag(속성 색 + 선 아이콘 + 글자) */
.tw-sk-attr .tw-attr { font-weight: 600; }
@media (max-width: 479px) {
  .tw-sk-cchip { padding: 0 var(--sp-1); }
  .tw-sk-cchip .tw-sk-cchip__t:not(.is-keep) { display: none; }
  .tw-sk-cchip.has-n .tw-sk-cchip__n { display: inline; color: var(--fg-2); font-weight: 700; }
  .tw-sk-skill { padding: 2px var(--sp-1); }
}

/* 경고 팝오버 내용(줄 끝 경고 표시 → helpTip) */
.tw-sk-warns { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.tw-tip__pop .tw-sk-warns { padding-left: 0; }
.tw-sk-warns li { padding: 2px 0; }   /* 옛 왼쪽 색 띠·옅은 바탕 없음(CN2·CR15) — 글자 색으로만 */
.tw-sk-warns li.is-bad { color: var(--bad); font-weight: 700; }
.tw-sk-warns li.is-warn { color: var(--warn); }
.tw-sk-warns li.is-info { color: var(--muted); }

/* 떠 있는 편집 칸(조건 칩·기술 속성, BS3): 줄 바로 아래에 뜬다 */
.tw-sk-ced { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 2px); max-width: 480px; margin-left: auto; display: grid; gap: var(--sp-2); padding: var(--sp-2);
  background: var(--bg); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); }
.tw-sk-ced__acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.tw-sk-ced__and { margin-right: auto; color: var(--muted); font-size: var(--fs-cap); }
.tw-sk-cond { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--sp-1); align-items: center; min-width: 0; }
.tw-sk-cond__ic { display: inline-flex; justify-content: center; color: var(--muted); font-size: var(--fs-strong); }
.tw-sk-cond select { grid-column: 2 / -1; width: 100%; min-height: 44px; min-width: 0; font: inherit; font-size: var(--fs-sub); background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); padding: 2px var(--sp-1); }
.tw-sk-cond__v { grid-column: 2; display: inline-flex; align-items: center; gap: var(--sp-1); }
.tw-sk-cond input[type="number"] { width: 7ch; min-height: 44px; font: inherit; text-align: right; background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); padding: 2px var(--sp-1); }
.tw-sk-cond input[aria-invalid="true"], .tw-sk-cond select[aria-invalid="true"] { border-color: var(--bad); }
.tw-sk-cond.is-err select:not([aria-invalid]) { border-color: var(--line-strong); }
.tw-sk-unit { color: var(--muted); font-size: var(--fs-sub); }
.tw-sk-x { grid-column: 3; width: 44px; min-height: 44px; display: grid; place-items: center; font: inherit; font-size: var(--fs-strong); background: none; border: 1px solid transparent; border-radius: var(--radius-btn); color: var(--muted); cursor: pointer; }
.tw-sk-x:hover { color: var(--bad); border-color: var(--edge-bad); }
.tw-sk-cerr { grid-column: 1 / -1; color: var(--bad); font-size: var(--fs-cap); }
.tw-sk-cdesc { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-cap); overflow-wrap: anywhere; }   /* BI5 S2: 조건 한 줄 설명(서버 desc) — 떠 있는 칸 안에서만 */
.tw-sk-attrsel { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sub); color: var(--muted); }
.tw-sk-attrsel select { flex: 1 1 auto; min-height: 44px; font: inherit; background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); }

/* 끌기 삽입선 */
.tw-sk-dropline { list-style: none; height: 0; border-top: 2px solid var(--accent); position: relative; margin: -1px 0; font-size: 0; }
.tw-sk-dropline.is-bad { border-top-color: var(--bad); border-top-style: dashed; }

/* 작은 메뉴(손잡이·줄 메뉴) */
.tw-sk-pop { position: absolute; z-index: 20; right: 6px; top: calc(100% - 4px); min-width: 160px; display: grid; padding: 4px 0; background: var(--bg); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); }
.tw-sk-pop button { min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); font: inherit; text-align: left; padding: 0 var(--sp-3); background: none; color: var(--fg); border: 0; border-bottom: var(--bw) solid var(--rule); cursor: pointer; }
.tw-sk-pop button .tw-li { color: var(--muted); }
.tw-sk-pop button:last-child { border-bottom: 0; }
.tw-sk-pop button:hover:not(:disabled), .tw-sk-pop button:focus-visible { color: var(--accent); }   /* 옛 반전 채움 → 인디고 글자(CN2) */
.tw-sk-pop button:hover:not(:disabled) .tw-li, .tw-sk-pop button:focus-visible .tw-li { color: var(--accent); }
.tw-sk-pop button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }

.tw-sk-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tw-sk-add > .tw-btn { gap: var(--sp-1); }
.tw-sk-left { color: var(--muted); font-size: var(--fs-sub); flex: 1 1 0; min-width: 0; word-break: keep-all; }   /* 검토: 좁은 화면에서 되돌리기 버튼이 따로 한 줄로 떨어지지 않게 글자가 먼저 줄바꿈 */
.tw-sk-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.tw-sk-ibtn { width: 40px; min-height: 44px; display: inline-grid; place-items: center; padding: 0; font: inherit; font-size: var(--fs-strong); background: none; color: var(--muted); border: 1px solid transparent; border-radius: var(--radius-btn); cursor: pointer; }
.tw-sk-ibtn:hover:not(:disabled) { color: var(--accent); border-color: var(--line-strong); }
.tw-sk-ibtn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.tw-sk-fallback { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-sub); }
.tw-sk-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: 6px 10px; color: var(--fg); font-size: var(--fs-sub); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); }
.tw-sk-note .tw-li { color: var(--muted); }
.tw-sk-note .tw-btn { min-height: 36px; }
.tw-sk-diff { font-size: var(--fs-sub); }
.tw-sk-diff > summary { cursor: pointer; min-height: 38px; display: inline-flex; align-items: center; }
.tw-sk-diff ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.tw-sk-draft { margin: 0 0 var(--sp-3); }
.tw-sk-confirmlist { margin: 0; padding-left: var(--sp-4); }

/* 하단 저장 줄(D10: 미저장 변경이 있을 때만 고정) */
.tw-sk-savebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); min-width: 0; }
.tw-sk-savebar__info { flex: 1 1 120px; min-width: 0; font-size: var(--fs-sub); color: var(--muted); display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.tw-sk-savebar > .tw-btn { flex: none; }
.tw-sk-savebar.is-dirty { position: sticky; bottom: 0; z-index: 5; background: var(--bg); border-top: var(--bw) solid var(--warn); padding: 10px var(--sp-2) calc(10px + env(safe-area-inset-bottom)); }   /* 붙어 있는 줄(떠 있는 겹 칸) — 불투명 바탕 */
.tw-sk-savebar.is-dirty .tw-sk-savebar__info { color: var(--fg-2); }
.tw-sk-warnjump { display: inline-flex; align-items: center; gap: var(--sp-1); font: inherit; font-size: var(--fs-cap); min-height: 32px; padding: 0 var(--sp-2); background: transparent; color: var(--warn); border: var(--bw) solid var(--warn); border-radius: var(--radius-chip); cursor: pointer; }
.tw-sk-errn { font: inherit; font-size: var(--fs-cap); font-weight: 700; min-height: 32px; padding: 0 var(--sp-2); background: transparent; color: var(--bad); border: var(--bw) solid var(--bad); border-radius: var(--radius-chip); cursor: pointer; }
@media (max-width: 599px) {
  .tw-sk-savebar.is-dirty { padding-right: 64px; }   /* 채팅 버튼 자리 */
  .tw-sk-savebar__info { flex-basis: 100%; }
  .tw-sk-savebar > [data-sk-reset] { margin-left: auto; }
}
.tw-sk-out:empty { display: none; }

/* 기술 목록 창(모달 · 좁은 화면 하단 시트) — 카드 한 줄(종류 아이콘 · 이름 · MP · 사거리), 자세히는 helpTip */
.tw-sk-picker { border: var(--bw) solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--fg); padding: 0; width: min(560px, calc(100% - 32px)); max-height: 86vh; box-shadow: var(--pop-shadow); }
.tw-sk-picker::backdrop { background: var(--scrim, #000c); }
.tw-sk-pick { display: grid; grid-template-rows: auto auto auto auto 1fr auto; max-height: 86vh; }
.tw-sk-pick__tools { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: var(--bw) solid var(--rule); background: var(--bg); }
.tw-sk-pick__q { display: flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-strong); }
.tw-sk-pick__q input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: var(--fs-body); background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); padding: var(--sp-1) var(--sp-2); }
.tw-sk-frow { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: center; gap: var(--sp-1); min-width: 0; }   /* 검토 B: 필터 줄마다 보이는 이름(종류·태그) */
.tw-sk-flabel { font-size: var(--fs-sub); color: var(--muted); }
.tw-sk-sort { display: flex; gap: var(--sp-1); align-items: center; font-size: var(--fs-sub); color: var(--muted); }
.tw-sk-sort select { min-height: 40px; font: inherit; background: transparent; color: var(--fg-2); border: var(--bw) solid var(--line-strong); border-radius: var(--radius-btn); }
.tw-sk-pick__list { overflow-y: auto; padding: var(--sp-2) var(--sp-3); min-height: 120px; }
.tw-sk-pick__h { font-size: var(--fs-sub); color: var(--muted); margin: var(--sp-1) 0; }
.tw-sk-plist { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; border-top: var(--bw) solid var(--rule); }
.tw-sk-pitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-bottom: var(--bw) solid var(--rule); }
.tw-sk-pitem > .tw-sk-cd__attr { margin: var(--sp-1) 0 0; }   /* 고르기 창: 카드(단추) 오른쪽 끝 속성 배지(단추 안에 단추를 두지 않음) */
.tw-sk-pcard { width: 100%; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); text-align: left; font: inherit; padding: var(--sp-1) var(--sp-1);
  background: none; color: var(--fg); border: 0; border-radius: var(--radius-sm); cursor: pointer; }
.tw-sk-pcard.tw-sk-cd { display: grid; align-items: start; gap: 2px; padding: 6px var(--sp-1); }   /* 결정 DB7: 카드는 두세 줄 */
.tw-sk-pcard:hover b, .tw-sk-pcard:focus-visible b { color: var(--accent); }
.tw-sk-pcard.is-cur b { color: var(--accent); }   /* 옛 왼쪽 색 띠 → 이름 인디고(CR15) */
.tw-sk-pcard b { color: var(--fg-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-sk-pcard.tw-sk-cd b { white-space: normal; overflow: visible; }
.tw-sk-pcard__no { flex: none; color: var(--accent); font-size: var(--fs-cap); white-space: nowrap; }
.tw-sk-pcard__bad { flex: none; color: var(--bad); display: inline-flex; }
/* BI5 S3·S4: MP 부족 표지(팝오버 안), 지금 못 쓰는 기술(흐리게 + 이유, 고를 수 없음 — 색만이 아니라 자물쇠·글자로 구분) */
.tw-sk-pcard__warn { color: var(--bad); font-weight: 700; }
.tw-sk-pcard__placed { color: var(--accent); }
.tw-sk-pcard.is-locked { cursor: not-allowed; color: var(--muted); grid-column: 1 / -1; }
.tw-sk-pcard.is-locked b { color: var(--muted); }
.tw-sk-pcard.is-locked:hover b, .tw-sk-pcard.is-locked:focus-visible b { color: var(--muted); }
.tw-sk-pcard__why { margin-left: auto; flex: none; font-size: var(--fs-cap); color: var(--warn); white-space: nowrap; }
.tw-sk-pick__why { margin: 0; padding: 6px 10px; border: var(--bw) solid var(--warn); border-radius: var(--radius-sm); background: transparent; color: var(--fg); }   /* BI5 후속: 못 쓰는 기술 누르면 보이는 이유 */
.tw-sk-pick__why[hidden] { display: none; }
@media (max-width: 480px) {
  .tw-sk-picker { width: 100%; max-width: 100%; max-height: 90vh; margin: auto 0 0; border-width: 1px 0 0; border-radius: var(--radius) var(--radius) 0 0; }
  .tw-sk-pick { max-height: 90vh; }
  .tw-sk-picker[open] { animation: tw-sheet-up .16s ease-out; }
}

/* 결정 DB7·DB8·DB9(2026-09-30): 기술 카드 = 라니스 방식 틀 — 이름 줄(이름 굵게 · 사용 조건 칩 · 오른쪽 속성 배지) / 숫자 줄(작은 흐린 글자, 칸은 가운뎃점, 칸 안에서 끊지 않음) /
   효과 문장(있을 때만). 글자 두 단계(이름 / 본문), 색은 속성 배지·조건 칩에만(R7). 옛 '자세히' 팝오버(축 12개 표)는 없앴다(CZ3). */
.tw-sk-cd { display: grid; gap: 2px; align-content: start; min-width: 0; text-align: left; }
.tw-sk-cd__l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-width: 0; }
.tw-sk-cd__name { font-size: var(--fs-body); font-weight: 700; color: var(--fg-2); min-width: 0; overflow-wrap: anywhere; }
.tw-sk-cd__chip { display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 6px; border: var(--bw) solid var(--bad); border-radius: 999px; color: var(--bad); font-size: var(--fs-cap); white-space: nowrap; }
.tw-sk-cd__chip .tw-li { width: 12px; height: 12px; }
.tw-sk-cd__l2 { display: flex; flex-wrap: wrap; column-gap: 4px; font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; line-height: var(--lh-base); }
.tw-sk-cd__st { white-space: nowrap; }
.tw-sk-cd__dot { color: var(--faint); }
.tw-sk-cd__l3 { font-size: var(--fs-sub); color: var(--fg); line-height: var(--lh-base); overflow-wrap: anywhere; word-break: keep-all; font-family: var(--font-prose); }
/* 속성 배지(누르면 ⓘ — 칸 속성 보정): 이름 줄 오른쪽 끝, 누름 영역 44px(보이는 모양은 속성 표지 그대로) */
.tw-sk-cd__attr { margin-left: auto; flex: none; }
.tw-tip__btn.tw-sk-cd__attrbtn { min-width: 44px; padding: 0 4px; margin-block: -10px; font-size: var(--fs-cap); }
.tw-tip__btn.tw-sk-cd__attrbtn .tw-attr { font-weight: 600; }

/* 기술 목록 탭(카드 · 배치 'n번' 단추 · 추가) */
.tw-sk-sec { display: grid; gap: var(--sp-1); }
.tw-sk-sec h2 { font-size: var(--fs-card); letter-spacing: var(--ls-card); color: var(--fg-2); font-weight: var(--fw-card); }
.tw-sk-lis { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--bw) solid var(--rule); }
.tw-sk-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--sp-1); min-height: 44px; padding: var(--sp-1) 0 var(--sp-1) var(--sp-2);
  border-bottom: var(--bw) solid var(--rule); min-width: 0; }
.tw-sk-li.is-on .tw-sk-li__name { color: var(--accent); }   /* 배치된 기술: 옛 왼쪽 녹 띠 → 이름 인디고(CR15) + 'n번' 단추 */
.tw-sk-li__main { min-width: 0; padding: var(--sp-1) 0; }
.tw-sk-li__acts { display: inline-flex; align-items: center; gap: 2px; }
/* 배치 번호 'n번' = 배치 편집 그 줄로 가는 버튼(결정 BU3 — 진행 행동은 칩이 아니라 버튼, BT4 녹색 글자 아님) */
.tw-btn.tw-sk-chipbtn { flex: none; min-height: 36px; padding: 0 var(--sp-2); font-size: var(--fs-cap); }
/* 검토(2026-09-30): 보이는 36px 기술 칸·'n번' 단추의 누름 영역 44px(투명 ::before — 모양 그대로) */
.tw-sk-skill, .tw-btn.tw-sk-chipbtn { position: relative; }
.tw-sk-skill::before, .tw-btn.tw-sk-chipbtn::before { content: ""; position: absolute; inset: -5px 0; }
@media (max-width: 420px) { .tw-sk-li .tw-btn.tw-sk-chipbtn { padding: 0 var(--sp-1); } }