/* 길드 화면(결정 BN1~BN5, 2026-09-28) — screens_guild.js 전용.
   새 UI 기준(결정 BU·BV·BS·BZ7, docs/UI_COMPONENTS_20260928.md 3-17~3-25): 글자 = --fs-*, 줄 간격 = --lh-*, 간격 = --sp-*(4px 격자)만 쓴다.
   직접 px 값은 테두리 두께에만 쓴다(tests/test_bn_guild_20260928.py 정적 검사). 12px 미만 글자 없음. 새 칩 변종 없음(상태 태그 = core statusTag).
   라이트 모드: 칩·배지 테두리는 검정/회색(결정 BT4), 성공 글자만 의미 색. 인라인 style 속성 없음(CSP 'self'). */

.tw-gd { display: grid; gap: var(--sp-4); min-width: 0; }
.tw-gd-card { gap: var(--sp-4); }
.tw-gd-card > .tw-panel-sec { min-width: 0; }
.tw-gd .tw-panel-sec > h3 { font-size: var(--fs-sub); color: var(--muted); }
.tw-gd-line { font-size: var(--fs-sub); line-height: var(--lh-base); color: var(--muted); overflow-wrap: anywhere; }
.tw-gd-why { font-size: var(--fs-cap); line-height: var(--lh-base); color: var(--muted); }
.tw-gd-why.is-bad { color: var(--bad); }

/* ---------- [BN1] 한눈 요약 ---------- */
.tw-gd-head { gap: var(--sp-2); }
.tw-gd-head h2 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-section); line-height: var(--lh-tight); font-weight: var(--fw-title); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-gd-card h2::before, .tw-gd-head h2::before { content: none; }   /* 카드 제목 앞 글자 기호(■) 없음 — 결정 BS4 */
.tw-gd-head h2 > span { min-width: 0; }
.tw-gd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.tw-gd-lv { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-gd-lv > .tw-gauge { flex: 1 1 auto; min-width: 0; }
.tw-gd .tw-gauge.gdlv { grid-template-columns: auto minmax(0, 1fr) auto; }
.tw-gd .tw-gauge.gdlv .tw-gauge__label { white-space: nowrap; }
.tw-gd-need .tw-gauge.gdlv { grid-template-columns: 7em minmax(0, 1fr) auto; }
.tw-gd-need .tw-gauge.gdlv .tw-gauge__label { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599.98px) {   /* 폰: 이름 한 줄 → 막대·수치 한 줄(자금처럼 긴 수치도 막대가 남는다) */
  .tw-gd-need .tw-gauge.gdlv { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--sp-1); }
  .tw-gd-need .tw-gauge.gdlv .tw-gauge__label { grid-column: 1 / -1; }
}
.tw-gd .tw-gauge.gdlv progress::-webkit-progress-value { background: var(--gold); }
.tw-gd .tw-gauge.gdlv progress::-moz-progress-bar { background: var(--gold); }
.tw-gd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1); margin: 0; }
.tw-gd-stats > div { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: transparent; min-width: 0; }
.tw-gd-stats dt { font-size: var(--fs-cap); line-height: var(--lh-tight); color: var(--muted); }
.tw-gd-stats dd { margin: 0; font-size: var(--fs-strong); line-height: var(--lh-tight); font-weight: var(--fw-strong); color: var(--fg-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tw-gd-stats dd.is-cur { color: var(--gold); }
.tw-gd-stats dd small { font-size: var(--fs-cap); font-weight: var(--fw-regular); color: var(--muted); }
@media (min-width: 600px) { .tw-gd-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* [검토 2026-09-29] 내 길드 요약의 소개는 자르지 않는다(150자 — 폰에서 약 6줄). 길드원이 전문을 볼 곳이 여기뿐이다. 길드 목록 칸은 2줄 + [보기]에서 전문 */
.tw-gd-intro { margin: 0; font-size: var(--fs-sub); color: var(--fg); }
.tw-gd-head.is-compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tw-gd-head.is-compact h2 { font-size: var(--fs-strong); }

/* 오늘 할 일·관리 할 일: 한 줄(최대 두 줄) = 선 아이콘 · 글 · [보기] */
.tw-gd-todo { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-gd-todo__row { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3)); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.tw-gd-todo__row:last-child { border-bottom: 0; }
.tw-gd-todo__row > .tw-li { color: var(--muted); font-size: var(--fs-strong); }
.tw-gd-todo__row.is-ok > .tw-li { color: var(--ok); }
.tw-gd-todo__row.is-bad > .tw-li, .tw-gd-todo__row.is-bad .tw-gd-todo__txt { color: var(--bad); }
.tw-gd-todo__row.is-warn > .tw-li { color: var(--warn); }
.tw-gd-todo__txt { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); line-height: var(--lh-tight); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.tw-gd-todo__txt small { font-size: var(--fs-sub); color: var(--muted); }
.tw-btn.tw-gd-go { flex: none; min-height: calc(var(--sp-6) + var(--sp-1)); padding: 0 var(--sp-3); font-size: var(--fs-sub); }

/* 버튼 줄: 버튼 + 비활성 이유 한 줄이 한 칸 */
.tw-gd-acts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.tw-gd-act { display: grid; justify-items: start; gap: var(--sp-1); min-width: 0; max-width: 100%; }
.tw-gd-act > .tw-btn-why { max-width: 36ch; }

/* ---------- [BN2] 길드원 목록 + 상세(BU6: PC ≥840px 나란히, 폰은 목록 → 상세 전환) ---------- */
.tw-gd-mem { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-gd-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.tw-gd-search { flex: 1 1 12rem; display: flex; align-items: center; gap: var(--sp-2); min-width: 0; padding: 0 var(--sp-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
.tw-gd-search:focus-within { border-color: var(--fg-2); }
.tw-gd .tw-gd-search input { flex: 1 1 auto; width: auto; min-width: 0; min-height: calc(var(--sp-6) + var(--sp-2)); padding: 0; border: 0; background: transparent; color: var(--fg-2); font: inherit; font-size: var(--fs-body); }
.tw-gd .tw-gd-search input:focus { outline: 0; }
.tw-gd .tw-gd-sort select, .tw-gd .tw-gd-field :is(select, input, textarea) { font: inherit; font-size: var(--fs-body); line-height: var(--lh-base); min-height: calc(var(--sp-6) + var(--sp-3)); padding: 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; width: 100%; }
.tw-gd .tw-gd-sort select { width: auto; }
.tw-gd .tw-gd-field textarea { resize: vertical; }
.tw-gd .tw-gd-field textarea[readonly] { color: var(--muted); background: transparent; }
.tw-gd .tw-gd-sort select:focus, .tw-gd .tw-gd-field :is(select, input, textarea):focus { border-color: var(--accent); outline: 0; }
.tw-gd-count { font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-gd-split { display: grid; gap: var(--sp-3); min-width: 0; }
.tw-gd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); min-width: 0; }
.tw-gd-row { display: grid; gap: var(--sp-1); width: 100%; min-height: calc(var(--sp-6) + var(--sp-3)); padding: var(--sp-2) var(--sp-3); border: 0; border-bottom: 1px solid var(--rule); border-left: 2px solid transparent;
  background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.tw-gd-row:hover .tw-gd-row__top > b { color: var(--accent); }
.tw-gd-row[aria-current="true"] { border-left-color: var(--sel); }
.tw-gd-row__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-body); line-height: var(--lh-tight); }
.tw-gd-row__top > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font-weight: var(--fw-strong); }
.tw-gd-row__seen { margin-left: auto; flex: none; font-size: var(--fs-sub); color: var(--muted); }
.tw-gd-row__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sub); line-height: var(--lh-tight); color: var(--muted); }
.tw-gd-row__meta .tw-job { color: var(--muted); }
.tw-gd-detail { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-3); background: transparent; min-width: 0; }
.tw-gd-detail__name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-strong); line-height: var(--lh-tight); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-gd-detail__name:focus { outline: 0; }
.tw-gd-detail .tw-kv.is-box { background: transparent; }
.tw-btn.tw-gd-back { justify-self: start; }
@media (max-width: 839.98px) {
  .tw-gd-split.is-detail > .tw-gd-list { display: none; }
  .tw-gd-split:not(.is-detail) > .tw-gd-detail { display: none; }
}
@media (min-width: 840px) {
  .tw-gd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tw-btn.tw-gd-back { display: none; }
}

/* ---------- 관리 폼(한 줄, 좁으면 두 줄) ---------- */
.tw-gd-form { display: grid; gap: var(--sp-2); min-width: 0; }
.tw-gd-form.is-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2); }
.tw-gd-field { display: grid; gap: var(--sp-1); min-width: 0; flex: 1 1 10rem; font-size: var(--fs-sub); color: var(--muted); }
.tw-gd-field.is-num { flex: 0 1 8rem; }
.tw-gd-field.is-wide { flex: 1 1 100%; }
.tw-gd-formfoot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.tw-gd-cnt { font-size: var(--fs-cap); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: var(--sp-2); }
.tw-gd-seg { max-width: 24rem; }

/* 가입 신청(한꺼번에 처리) */
.tw-gd-appbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.tw-gd-check { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3)); font-size: var(--fs-body); cursor: pointer; }
.tw-gd-check input, .tw-gd-app input { width: 1.2em; height: 1.2em; margin: 0; accent-color: var(--fg-2); flex: none; }
.tw-gd-appn { font-size: var(--fs-sub); color: var(--muted); font-variant-numeric: tabular-nums; }
.tw-gd-appbar .tw-gd-acts { margin-left: auto; }
.tw-gd-applist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); min-width: 0; }
.tw-gd-app { display: flex; align-items: center; gap: var(--sp-3); min-height: calc(var(--sp-6) + var(--sp-3)); padding: var(--sp-2) var(--sp-1); border-bottom: 1px solid var(--line); cursor: pointer; min-width: 0; }
.tw-gd-app:has(input:checked) { background: transparent; }
.tw-gd-app__main { display: grid; gap: var(--sp-1); min-width: 0; }
.tw-gd-app__main b { color: var(--fg-2); font-weight: var(--fw-strong); font-size: var(--fs-body); line-height: var(--lh-tight); overflow-wrap: anywhere; }
.tw-gd-app__main small { font-size: var(--fs-sub); line-height: var(--lh-tight); color: var(--muted); overflow-wrap: anywhere; }
.tw-gd-batch { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--line); background: transparent; font-size: var(--fs-sub); line-height: var(--lh-base); }
.tw-gd-batch p { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }
.tw-gd-batch ul { margin: 0; padding-left: var(--sp-4); color: var(--muted); }

/* 성장: 조건 막대 · 기능 로드맵 */
.tw-gd-need { display: grid; gap: var(--sp-1); min-width: 0; }
.tw-gd-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-4); min-width: 0; }
.tw-gd-feats li { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-1)); border-bottom: 1px solid var(--rule); font-size: var(--fs-sub); color: var(--muted); min-width: 0; }
.tw-gd-feats__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tw-gd-feats li.is-on { color: var(--fg); }
.tw-gd-feats li.is-on > .tw-li { color: var(--ok); }
@media (min-width: 600px) { .tw-gd-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 목록류(창고·외교·내 가입 신청) */
.tw-gd-plain, .tw-gd-store { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-gd-plain > li, .tw-gd-store > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); min-height: calc(var(--sp-6) + var(--sp-3));
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); min-width: 0; }
.tw-gd-plain > li > span, .tw-gd-store__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; overflow-wrap: anywhere; }
.tw-gd-plain small, .tw-gd-store small { font-size: var(--fs-sub); color: var(--muted); }

/* 길드 목록(BN4 소개 표시) */
.tw-gd-gls { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.tw-gd-gl { display: grid; gap: var(--sp-2); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); min-width: 0; }
.tw-gd-gl:first-child { padding-top: 0; }
.tw-gd-gl__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; font-size: var(--fs-strong); line-height: var(--lh-tight); }
.tw-gd-gl__top > b { color: var(--fg-2); overflow-wrap: anywhere; }
.tw-gd-gl__intro { margin: 0; font-size: var(--fs-sub); color: var(--fg); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.tw-gd .tw-i-detail { padding-left: var(--sp-3); gap: var(--sp-2); }

/* 문장 탭: 규칙 ⓘ 팝오버가 미리보기 줄 끝에 */
.tw-gd .tw-embp__top > .tw-tip { margin-left: auto; }

/* 결정 BS② 2단계(2026-09-29): 원정·의뢰·전쟁 탭 — 옛 규칙 상자 → 탭 맨 위 오른쪽 ⓘ '규칙', 구역 설명 줄 → 구역 제목 줄 오른쪽 ⓘ, 통일 STAR 전환 조건 → 요약 줄 끝 ⓘ */
.tw-gd-tabtip { display: flex; justify-content: flex-end; min-width: 0; }
.tw-gd-secthead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; }
.tw-gd-secthead > h2 { min-width: 0; font-size: var(--fs-strong); font-weight: var(--fw-title); color: var(--fg-2); overflow-wrap: anywhere; }
.tw-gd-hintrow { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.tw-gd-hintrow > .tw-hint { flex: 1 1 auto; min-width: 0; }