/* 길드 문장(결정 BJ5, 2026-09-28) — static/emblem.js 가 그린 칸의 모양. 바탕 8색·테두리는 코드가 칠한다(그림에 없음).
   도트 그림은 최근접 확대(pixelated). 그림이 없거나 아직 못 불러오면 바탕색 칸 + 문장 이름 첫 글자. */
.tw-emb { --emb: 16px; display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: var(--emb); height: var(--emb);
  vertical-align: middle; overflow: hidden; line-height: 1; font-weight: 700; color: #fff; background: #555; }
.tw-emb.is-s14 { --emb: 14px; } .tw-emb.is-s16 { --emb: 16px; } .tw-emb.is-s20 { --emb: 20px; } .tw-emb.is-s24 { --emb: 24px; }
.tw-emb.is-s32 { --emb: 32px; } .tw-emb.is-s48 { --emb: 48px; } .tw-emb.is-s64 { --emb: 64px; }
.tw-emb__ch { font-size: calc(var(--emb) * 0.6); }
.tw-emb__img { width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: contain; }
/* 바탕 8색 [임시 BJ5 색값: EGA 톤, 다크·라이트 공통 — 문장은 테마와 무관한 길드 외형] */
.tw-emb.is-bg-red { background: #B8392F; }
.tw-emb.is-bg-blue { background: #2F5FBF; }
.tw-emb.is-bg-green { background: #3A8F45; }
.tw-emb.is-bg-gold { background: #D2A22B; color: #1d1a10; }
.tw-emb.is-bg-white { background: #ECEAE2; color: #1d1d1d; }
.tw-emb.is-bg-purple { background: #7446B8; }
.tw-emb.is-bg-black { background: #17171B; }
.tw-emb.is-bg-teal { background: #22968B; }
/* 테두리: 홑 = 1px, 겹 = 3px double(작은 칸에서는 2px 안쪽 선으로) */
.tw-emb.is-bd-single { border: 1px solid var(--strong, #fff); }
.tw-emb.is-bd-double { border: 3px double var(--strong, #fff); }
.tw-emb.is-s14.is-bd-double, .tw-emb.is-s16.is-bd-double { border-width: 2px; border-style: solid; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55); }
/* SVG 안의 문장 네모(홈 작은 지도): 같은 8색을 fill 로 */
.tw-emb-svg { fill: #555; }
.tw-emb-svg.is-bg-red { fill: #B8392F; } .tw-emb-svg.is-bg-blue { fill: #2F5FBF; } .tw-emb-svg.is-bg-green { fill: #3A8F45; } .tw-emb-svg.is-bg-gold { fill: #D2A22B; }
.tw-emb-svg.is-bg-white { fill: #ECEAE2; } .tw-emb-svg.is-bg-purple { fill: #7446B8; } .tw-emb-svg.is-bg-black { fill: #17171B; } .tw-emb-svg.is-bg-teal { fill: #22968B; }
.tw-emb-svg { stroke: var(--line-2, #555); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tw-emb-svg.is-bd { stroke: var(--strong, #fff); stroke-width: 1.5; }
/* 바탕이 흑색·백색일 때 테마 바탕에 묻히지 않게 얇은 윤곽 */
.tw-emb.is-bg-black.is-bd-none { box-shadow: inset 0 0 0 1px var(--line-2, #555); }
.tw-emb.is-bg-white.is-bd-none { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }

/* ---------- 길드 화면 '관리' 탭 문장 고르기 격자(결정 BJ6) ---------- */
.tw-embp-sect { min-width: 0; }
.tw-embp__top { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 8px; }
.tw-embp__preview, .tw-embp__new { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-embp__preview p, .tw-embp__new p { display: grid; gap: 2px; min-width: 0; margin: 0; }
.tw-embp__preview small, .tw-embp__new small { color: var(--muted); font-size: var(--fs-xs, 11px); }
.tw-embp__none { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 1px dashed var(--line-2); color: var(--muted); font-size: 12px; }
.tw-embp { display: grid; gap: 10px; min-width: 0; }
.tw-embp__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.tw-embp__set legend { font-size: 13px; font-weight: 700; color: var(--strong); padding: 0; margin-bottom: 6px; }
.tw-embp__grid { display: grid; gap: 6px; min-width: 0; }
.tw-embp__grid.is-icon { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
.tw-embp__grid.is-bg, .tw-embp__grid.is-border { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.tw-embp__cell { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 6px 4px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; }
.tw-embp__cell small { font-size: var(--fs-cap); line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.tw-embp__cell:hover { border-color: var(--line-2); }
.tw-embp__cell:has(input:checked) { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); background: var(--surface-2); }
.tw-embp__cell:has(input:focus-visible) { outline: 2px solid var(--focus, var(--strong)); outline-offset: 2px; }
.tw-embp__cell.is-locked { cursor: not-allowed; opacity: .55; }
.tw-embp__cell.is-locked small { color: var(--muted); }
.tw-embp__lock { position: absolute; top: 2px; right: 2px; font-size: var(--fs-cap) !important; font-weight: 700; padding: 0 3px; border: 1px solid var(--line-2); background: var(--bg); color: var(--muted) !important; }
.tw-embp__art { display: inline-grid; place-items: center; min-height: 32px; }
.tw-embp > .tw-btn { justify-self: start; }