/* 큰 팝업·단독 화면 틀(.gbm-*) — 재능 보드·히어로 공용, 빌더와 /tli/hero·/tli/talent 가 함께 쓴다 (2026-10-08) */
    /* ── 팝업 틀: 재능 보드·히어로 공용 ── */
    .gbm-dim { position: fixed; inset: 0; z-index: 1100; background: radial-gradient(ellipse at 50% 30%, rgba(20,26,40,.82), rgba(3,5,10,.9)); display: none; align-items: center; justify-content: center; padding: 18px; backdrop-filter: blur(3px); }
    .gbm { width: min(1320px, 100%); height: min(880px, 100%); background: linear-gradient(180deg, #121826, #0b0f17 40%); border: 1px solid #2a3344; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04); }
    .gbm-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid #1e2533; }
    .gbm-title { font-size: 16px; letter-spacing: .02em; color: #f3e3b5; }
    .gbm-keys { color: #7d8794; font-size: 12px; }
    .gbm-keys kbd { font: 600 11px/1 inherit; color: #c9d1d9; background: #1b2230; border: 1px solid #2f3a4d; border-bottom-width: 2px; border-radius: 5px; padding: 3px 6px; margin: 0 2px 0 6px; }
    .gbm-sep { margin: 0 4px; color: #3a4558; }
    .gbm-msg { color: #ffb37a; background: #3a1f10; border: 1px solid #6b3a1c; border-radius: 999px; padding: 3px 12px; font-size: 12px; }
    .gbm-x { margin-left: auto; background: #1b2230; border: 1px solid #2f3a4d; color: #c9d1d9; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; transition: .15s; }
    .gbm-x:hover { border-color: #f0883e; color: #fff; background: #2a1a10; }
    .gbm-body { flex: 1; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: minmax(0, 1fr); min-height: 0; } /* 줄 높이를 남은 공간으로 묶어야 넘칠 때 옆·본문 안쪽 스크롤이 생긴다 (auto 면 내용만큼 늘어 아래가 잘림 — 크롬 히특 스크롤 제보 2026-10-10) */
    .gbm-side { border-right: 1px solid #1e2533; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; background: rgba(8,11,18,.45); }
    .gbm-cap { color: #5d6878; font-size: 11px; letter-spacing: .12em; margin: 0 4px 2px; }
    .gbm-main { padding: 16px 20px; overflow: auto; min-width: 0; display: flex; flex-direction: column; }
    .gbm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .gbm-head small { display: block; color: #7d8794; font-size: 11.5px; }
    .gbm-head b { color: #f3e3b5; font-size: 19px; }
    .gbm-hint { color: #7d8794; font-size: 12.5px; }
    @media (max-width: 760px) { .gbm-body { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; } .gbm-side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #1e2533; } }
    /* 단독 화면 위쪽 줄의 빌드 고르기 (page_common.js hpBuildPicker) */
    .hp-build { color: #7d8794; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; }
    .hp-build b { color: #c9d1d9; }
    .hp-bp { display: inline-flex; align-items: center; gap: 8px; max-width: 300px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer;
      background: #0f141f; border: 1px solid #2f3a4d; color: #e6edf3; font: inherit; font-size: 13px; transition: .15s; }
    .hp-solo-acts { order: 9; margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }
    .hp-solo-acts .hp-solo-over { padding: 6px 14px; font-weight: 600; color: #f3e3b5; border-color: #6b5a2a; background: #1d1a12; }
    .hp-bp-cap { color: #9aa4b2; font-size: 12px; padding: 4px 6px 8px; }
    .hp-bp-acts .hp-bp-new { grid-column: 1 / -1; padding: 8px; }
    #hpToast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 9500; transition: .2s;
      background: #151b28; border: 1px solid #e8c860; color: #e6edf3; border-radius: 10px; padding: 10px 16px; font-size: 13.5px; box-shadow: 0 8px 28px rgba(0,0,0,.5); max-width: calc(100vw - 32px); }
    #hpToast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
    #hpToast a { color: #e8c860; margin-left: 10px; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .hp-solo-reset { background: #1b2230; border: 1px solid #2f3a4d; color: #c9d1d9; border-radius: 8px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; transition: .15s; } /* 단독 화면(연습판) 처음부터 */
    .hp-solo-reset:hover { border-color: #e8c860; color: #fff; }
    .hp-bp:hover, .hp-bp.open { border-color: #e8c860; background: #151b28; }
    .hp-bp-face { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #1b2230; display: grid; place-items: center; }
    .hp-bp-face img { width: 100%; height: 100%; object-fit: cover; } .hp-bp-face i { font-style: normal; color: #59636e; font-size: 12px; }
    .hp-bp-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
    .hp-bp-car { flex: none; color: #9aa6b4; transition: .15s; } .hp-bp.open .hp-bp-car { transform: rotate(180deg); }
    .hp-bpm { position: fixed; z-index: 9000; width: 340px; max-width: calc(100vw - 16px); background: #121824; border: 1px solid #2f3a4d; border-radius: 12px;
      box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 6px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
    .hp-bp-q { background: #0b1019; border: 1px solid #2f3a4d; border-radius: 8px; color: #e6edf3; padding: 7px 10px; font: inherit; outline: none; }
    .hp-bp-q:focus { border-color: #e8c860; }
    .hp-bp-list { max-height: min(360px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
    .hp-bpr { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: #c9d1d9; font: inherit; cursor: pointer; }
    .hp-bpr .hp-bp-face { width: 32px; height: 32px; }
    .hp-bp-body { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
    .hp-bp-ses { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 2px; }
    .hp-bp-add { margin-left: auto; background: #1d1a12; border: 1px solid #6b5a2a; color: #f3e3b5; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
    .hp-bp-add:hover { border-color: #e8c860; color: #fff; }
    .hp-bpr-acts { flex: none; display: none; gap: 2px; }
    .hp-bpr:hover .hp-bpr-acts, .hp-bpr:focus-within .hp-bpr-acts { display: inline-flex; }
    .hp-bpr:hover .hp-bpr-ck { display: none; }
    @media (hover: none) { .hp-bpr-acts { display: inline-flex; } }
    .hp-bpr-acts button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #2a3344; background: #1b2230; color: #9aa6b4; font: inherit; font-size: 12px; cursor: pointer; display: grid; place-items: center; padding: 0; }
    .hp-bpr-acts button:hover { border-color: #e8c860; color: #f3e3b5; }
    .hp-bpr-acts button.del:hover { border-color: #e06c75; color: #ff9aa2; }
    .hp-bpr-in { background: #0b1019; border: 1px solid #e8c860; border-radius: 6px; color: #e6edf3; padding: 2px 6px; font: inherit; font-weight: 600; outline: none; width: 100%; }
    .hp-bpr:hover { background: #1b2333; } .hp-bpr.on { background: color-mix(in srgb, #e8c860 12%, #121824); }
    .hp-bpr-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
    .hp-bpr-t b { color: #e6edf3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hp-bpr.on .hp-bpr-t b { color: #f3e3b5; }
    .hp-bpr-t small { color: #7d8794; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hp-bpr-se { flex: none; font-size: 10.5px; color: #9aa6b4; border: 1px solid #2f3a4d; border-radius: 6px; padding: 1px 6px; }
    .hp-bpr-ck { flex: none; color: #e8c860; font-weight: 700; }
    .hp-bp-none { color: #7d8794; padding: 14px; text-align: center; }
    .hp-bp-acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; border-top: 1px solid #232b3a; padding-top: 6px; }
    .hp-bp-acts button { background: #1b2230; border: 1px solid #2a3344; color: #c9d1d9; border-radius: 8px; padding: 7px 4px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
    .hp-bp-acts button:hover { border-color: #e8c860; color: #f3e3b5; }
    .hp-build select { background: #0f141f; color: #e6edf3; border: 1px solid #2f3a4d; border-radius: 6px; padding: 3px 6px; font: inherit; max-width: 220px; }
    /* 스크롤바 — 브라우저 기본(윈도우 회색 막대) 대신 화면 색에 맞춘 얇은 막대 (사용자 요청) */
    .gbm, .gbm * { scrollbar-width: thin; scrollbar-color: #2c3a58 transparent; }
    .gbm ::-webkit-scrollbar, .gbm::-webkit-scrollbar { width: 8px; height: 8px; }
    .gbm ::-webkit-scrollbar-track { background: transparent; }
    .gbm ::-webkit-scrollbar-thumb { background: #2c3a58; border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
    .gbm ::-webkit-scrollbar-thumb:hover { background: #3d5078; background-clip: padding-box; }
    .gbm ::-webkit-scrollbar-corner { background: transparent; }
    .gbm-help { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid #3a4a66; color: #9fb0c6; font-size: 11px; cursor: help; vertical-align: 2px; } .gbm-help:hover { color: #ffd98a; border-color: #ffd98a; } /* 단계 규칙 설명 */
    /* 문구 속 용어(마우스·누르면 설명) — 빌더 1 의 .tip 과 같은 금색 점선 밑줄. tipWrapEffect 가 만드는 class="tip2" 단독 span 만 (판 칸·버튼 등 다른 .tip2 는 제외) */
    span[class="tip2"] { text-decoration: underline dotted #ffd700; text-underline-offset: 3px; color: #ffe28a; cursor: help; }
    /* 레전드 카드 아래 지난 시즌 초반 시세 표 (00_gear.js itemPriceHtml, ETor 값 — 2026-10-14) */
    .icard-price { margin-top: 8px; padding-top: 6px; border-top: 1px solid #2a3550; }
    .icard-price-h { color: #e8c860; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; }
    .icard-price-h small { color: #7d8794; font-weight: 400; margin-left: 4px; }
    .icard-price table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
    .icard-price th, .icard-price td { padding: 3px 4px; text-align: right; border-bottom: 1px solid #1e2533; }
    .icard-price thead th { color: #7d8794; font-weight: 500; font-size: 11px; }
    .icard-price tbody th { text-align: left; color: #9aa6b4; font-weight: 600; }
    .icard-price td { color: #e6edf3; } .icard-price td.na { color: #4a5568; }
    .icard-price-i { margin-top: 4px; font-size: 11px; color: #7d8794; }
    .icard-price-i summary { display: inline-block; cursor: help; list-style: none; text-decoration: underline dotted #4a5568; text-underline-offset: 3px; }
    .icard-price-i summary::-webkit-details-marker { display: none; }
    .icard-price-i summary:hover, .icard-price-i[open] summary { color: #e8c860; }
    .icard-price-i > div { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: #0f141f; border: 1px solid #2a3344; color: #9aa6b4; line-height: 1.5; }
    /* 모바일 — DB(app.css 768px 이하)가 표를 세로로 풀어 쌓는 공용 규칙(table·tr·td block, thead 숨김)에서 시세표는 빼고 표 모양 유지 (2026-10-14) */
    .icard-price table { display: table !important; table-layout: fixed; }
    .icard-price thead { display: table-header-group !important; }
    .icard-price tbody { display: table-row-group !important; }
    .icard-price tr { display: table-row !important; padding: 0 !important; border: 0; background: none; }
    .icard-price th, .icard-price td { display: table-cell !important; width: auto !important; position: static; background: none; line-height: 1.4; white-space: nowrap; }
    .icard-price thead th, .icard-price tbody th { padding: 3px 4px; }
    .icard-price tbody th { width: 46px !important; }
    .icard-price { text-align: left; } /* 빌더 2 카드(가운데 정렬) 안에서도 왼쪽 */
    .icard-price td::before { content: none !important; } .icard-price td { font-size: 12px !important; color: #e6edf3 !important; } .icard-price td.na { color: #4a5568 !important; }
    /* 단계 막대 아래 남는 높이 — 막대 높이는 builder2_page.js 가 재서 --wzbar-h 로 넣는다 (PC 에서 페이지 스크롤 없게) */
    :root { --wz-room: calc(100vh - var(--hubnav-h, 44px) - var(--wzbar-h, 70px) - 48px); }
    /* /tli/builder2 마법사 — 단계 막대 + 단계 몸통(히어로·재능은 단독 화면과 같은 틀) */
    .wz-page #wzApp { width: min(1400px, 100%); margin: 0 auto; padding: 12px 16px 24px; box-sizing: border-box; }
    .wz-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border: 1px solid #2a3344; border-radius: 14px; background: linear-gradient(180deg, #121826, #0b0f17); }
    .wz-title { display: flex; align-items: center; gap: 10px; }
    .wz-title > b { color: #f3e3b5; font-size: 16px; }
    .wz-beta { font-size: 10.5px; color: #0b0f17; background: #e3b860; border-radius: 999px; padding: 1px 8px; font-weight: bold; }
    .wz-steps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0 auto; padding: 0; flex-wrap: wrap; }
    .wz-step { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid #222b3b; border-radius: 12px; background: #0f141f; cursor: pointer; transition: .15s; width: 170px; box-sizing: border-box; }
    .wz-step:hover { border-color: #3a4a66; }
    .wz-step b { display: block; color: #aab4c0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wz-step > div { min-width: 0; }
    .wz-step b.long { font-size: 11px; letter-spacing: -0.4px; } /* '추억·석판·정령' — 글자를 줄여 한 줄에 (사용자 2026-10-09) */
    .wz-step small { display: block; color: #5d6878; font-size: 11px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wz-no { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #1b2230; color: #7d8794; font-weight: bold; font-size: 12.5px; flex: none; }
    .wz-step.done .wz-no { background: #1d3a2a; color: #7ee2a8; }
    .wz-step.done small { color: #8fb9a0; }
    .wz-step.on { border-color: #d4a84a; background: linear-gradient(135deg, #2a200c, #12101a 70%); }
    .wz-step.on .wz-no { background: #e3b860; color: #0b0f17; }
    .wz-step.on b { color: #f3e3b5; }
    .wz-arrow { color: #3a4558; font-size: 18px; }
    .wz-nav { display: flex; gap: 8px; }
    .wz-btn { background: #1b2230; border: 1px solid #2f3a4d; color: #c9d1d9; border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; }
    .wz-btn:hover { border-color: #5a6b88; color: #fff; }
    .wz-btn.pri { background: #e3b860; border-color: #e3b860; color: #0b0f17; font-weight: bold; }
    .wz-btn.pri:hover { background: #f0c96e; }
    /* 단계 안의 히어로·재능 화면: 단독 화면 여백·닫기 단추는 빼고 단계 막대 아래를 채운다 */
    .wz-page .wz-body #heroApp, .wz-page .wz-body #talentApp { width: 100%; padding: 0; }
    .wz-page .wz-body .gbm-x { display: none; }
    .wz-page .wz-body .hp-build { display: none; } /* 빌드 고르기는 단계 막대에 */
    .wz-page .wz-body #talentApp .gbm { height: var(--wz-room); min-height: 500px; }
    .wz-page .wz-body #heroApp .gbm { height: var(--wz-room); min-height: 500px; } /* 히어로도 페이지 스크롤 없이 — 넘치면 안쪽만 스크롤 */
    /* 빌더 2 body 에도 단독 히어로 화면 클래스(hp-body)가 붙어 그쪽 'overflow: visible'(페이지 스크롤용)이 먹어 안쪽 스크롤이 꺼져 있었다 → 아래가 잘림 (크롬 제보, 2026-10-10) */
    .wz-page .wz-body #heroApp .gbm-side, .wz-page .wz-body #heroApp .gbm-main { overflow: auto; }
    @media (max-width: 760px) { .wz-page .wz-body #heroApp .gbm { height: auto; } .wz-page .wz-body #heroApp .gbm-side, .wz-page .wz-body #heroApp .gbm-main { overflow: visible; } }
    .wz-todo { border: 1px dashed #2f3a4d; border-radius: 14px; padding: 48px 24px; text-align: center; color: #7d8794; }
    .wz-todo b { color: #f3e3b5; font-size: 18px; }
    .wz-todo a { color: #79c0ff; }
    @media (max-width: 900px) { .wz-steps { margin: 0; } .wz-step { width: auto; min-width: 0; flex: 1 1 40%; } .wz-arrow { display: none; } .wz-nav { width: 100%; justify-content: flex-end; } }
    /* ── 스킬 단계 (wz_skill.js) — 왼쪽 9칸 + 오른쪽 도감 ── */
    .wz-page .wsm { height: var(--wz-room); min-height: 500px; }
    .wsm .gbm-body { grid-template-columns: 330px 1fr; }
    .ws-en { float: right; letter-spacing: 0; color: #7d8794; }
    .ws-slot { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #1f2735; border-radius: 12px; background: #0f141f; position: relative; }
    .ws-slot.on { border-color: #d4a84a; background: linear-gradient(135deg, #221b0e, #0f0e14 70%); }
    .ws-main { width: 52px; height: 52px; border-radius: 12px; border: 2px solid #263044; background: #0b0f17; display: grid; place-items: center; cursor: pointer; flex: none; overflow: hidden; }
    .ws-main img { width: 100%; height: 100%; object-fit: cover; }
    .ws-main.tgt { border-color: #e3b860; box-shadow: 0 0 0 3px rgba(227,184,96,.25); }
    .ws-plus { color: #3a4558; font-size: 22px; }
    .ws-info { min-width: 0; flex: 1; }
    .ws-info small { display: block; color: #5d6878; font-size: 10.5px; }
    .ws-info b { display: block; color: #e6edf3; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ws-none { color: #4d5868; font-weight: normal; }
    .ws-socks { display: flex; gap: 4px; margin-top: 5px; }
    .ws-sock { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #263044; background: #0b0f17; display: grid; place-items: center; color: #4d5868; font-size: 11px; cursor: pointer; overflow: hidden; }
    .ws-sock.sp { border-style: dashed; border-color: #5a4a26; }
    .ws-sock.have { border-style: solid; border-color: #3d5a80; }
    .ws-sock img { width: 100%; height: 100%; object-fit: cover; }
    .ws-sock.tgt { border-color: #e3b860; box-shadow: 0 0 0 3px rgba(227,184,96,.25); }
    .ws-slot .gbm-del { position: absolute; top: 6px; right: 6px; }
    .ws-head { font-size: 16px !important; color: #e6edf3 !important; font-weight: normal; }
    .ws-head b { color: #f3e3b5; }
    .ws-mn { color: #9ec1ff; }
    .ws-filter { margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
    .ws-cnt { color: #7d8794; font-size: 12px; white-space: nowrap; }
    .ws-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .ws-filter input { width: 100%; max-width: 420px; box-sizing: border-box; background: #0f141f; border: 1px solid #2f3a4d; color: #e6edf3; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
    .ws-tag { font-size: 11.5px; color: #8b949e; border: 1px solid #263044; border-radius: 999px; padding: 2px 9px; cursor: pointer; }
    .ws-tag.on { color: #0b0f17; background: #e3b860; border-color: #e3b860; }
    .ws-split { display: grid; grid-template-columns: 1fr 340px; gap: 14px; min-height: 0; flex: 1; }
    .ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; align-content: start; overflow: auto; padding-right: 4px; }
    .ws-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid #1f2735; border-radius: 10px; background: #0f141f; cursor: pointer; position: relative; transition: .12s; }
    .ws-cell img { width: 52px; height: 52px; border-radius: 10px; }
    .ws-cell span { font-size: 11px; color: #aab4c0; text-align: center; line-height: 1.25; word-break: keep-all; }
    .ws-cell:hover { border-color: #3a4a66; background: #131a28; }
    .ws-cell.on { border-color: #d4a84a; background: linear-gradient(180deg, #221b0e, #0f0e14); }
    .ws-cell.on span { color: #f3e3b5; }
    .ws-cell.rec { border-color: #34507a; } /* 보조 추천 — 다른 칸에서 쓰는 보조 */
    .ws-rec { font-style: normal; font-size: 9.5px; color: #8fb6ff; background: #13203a; border: 1px solid #2b4470; border-radius: 4px; padding: 0 4px; line-height: 15px; white-space: nowrap; }
    .ws-tick { position: absolute; top: 4px; right: 6px; color: #e3b860; font-style: normal; font-weight: bold; font-size: 12px; }
    .ws-cardbox { overflow: auto; border: 1px solid #1f2735; border-radius: 12px; background: #0b0f17; padding: 12px; font-size: 12.5px; line-height: 1.55; }
    .ws-card.empty { color: #5d6878; text-align: center; padding: 30px 10px; }
    .ws-ch { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
    .ws-ch img { width: 48px; height: 48px; border-radius: 10px; }
    .ws-ch b { display: block; color: #f3e3b5; font-size: 15px; }
    .ws-ch small { color: #7d8794; }
    .ws-card .icard-tags { margin-bottom: 8px; }
    .ws-card .icard-tags span { border: 1px solid #3a4a6b; border-radius: 4px; padding: 1px 6px; font-size: 11px; color: #aaa; margin: 0 2px 2px 0; display: inline-block; }
    .ws-card .icard-attrs { color: #ddd; padding-bottom: 6px; border-bottom: 1px solid #2a3550; margin-bottom: 6px; }
    .ws-card .icard-opt { color: #c8d2e0; padding: 2px 0; }
    .ws-card b.m { color: #7db4ff; font-weight: 600; }
    .ws-card .ccard-sec { font-size: 11px; color: #8b949e; margin: 7px 0 3px; padding-top: 6px; border-top: 1px solid #2a3550; }
    .ws-card .sk-weapon { font-style: italic; color: #8b949e; font-size: 11px; margin-bottom: 6px; }
    .ws-card .sk-lvtag { color: #7db4ff; font-size: 10.5px; }
    .ws-card .sk-lvsep { color: #3a4a6b; margin: 0 7px; }
    .ws-card .sk-lvhint { color: #556a8f; }
    @media (max-width: 1100px) { .ws-split { grid-template-columns: 1fr; } .ws-cardbox { max-height: 320px; } }
    @media (max-width: 760px) { .wsm .gbm-body { grid-template-columns: 1fr; } .wz-page .wsm { height: auto; } .ws-slot { flex: 1 1 100%; } }
    /* ── 장비 단계 (wz_gear.js) — 왼쪽 인형 배치 + 오른쪽 편집 ── */
    .wgm .gbm-body { grid-template-columns: 420px 1fr; }
    .wg-doll { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); gap: 8px; } /* 2열 = 인게임 장비 슬롯 배치 (WG_POS) */
    .wg-slot { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 6px; border: 1px solid #1f2735; border-radius: 12px; background: #0f141f; cursor: pointer; transition: .15s; min-width: 0; }
    .wg-slot:hover { border-color: #3a4a66; }
    .wg-slot.on { border-color: #d4a84a; background: linear-gradient(180deg, #221b0e, #0f0e14); box-shadow: 0 0 0 1px rgba(212,168,74,.2) inset; }
    .wg-slot.lock { opacity: .45; }
    .wg-sico { width: 46px; height: 46px; border-radius: 10px; background: #0b0f17; border: 1.5px solid #263044; display: grid; place-items: center; overflow: hidden; }
    .wg-sico img { width: 100%; height: 100%; object-fit: contain; }
    .wg-slot.have .wg-sico { border-color: #3d5a80; }
    .wg-craft { color: #7db4ff; font-size: 22px; }
    .wg-craft.blood { color: #ff7b72; }
    .wg-slot small { color: #5d6878; font-size: 10.5px; }
    .wg-slot b { color: #e6edf3; font-size: 12px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wg-slot em { color: #6e7a88; font-size: 10.5px; font-style: normal; }
    .wg-k { font-style: normal; }
    .wg-k.item { color: #e3b860; } .wg-k.custom { color: #7db4ff; } .wg-k.blood { color: #ff7b72; }
    .wg-slot .gbm-del { position: absolute; top: 4px; right: 4px; }
    /* 레전드·제작·블러드 — 칸 이름 아래 밑줄 탭 */
    .wg-tabs { display: flex; gap: 2px; margin: -4px 0 12px; border-bottom: 1px solid #1e2533; }
    .wg-tab { padding: 8px 18px 9px; color: #7d8794; font-size: 13.5px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: .15s; }
    .wg-tab:hover { color: #c9d1d9; }
    .wg-tab.on { color: #f3e3b5; border-bottom-color: #e3b860; font-weight: bold; }
    .wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; align-content: start; overflow: auto; padding-right: 4px; }
    .wg-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; border: 1px solid #1f2735; border-radius: 10px; background: #0f141f; cursor: pointer; text-align: center; transition: .12s; }
    .wg-cell:hover { border-color: #3a4a66; background: #131a28; }
    .wg-cell.on { border-color: #d4a84a; background: linear-gradient(180deg, #221b0e, #0f0e14); }
    .wg-cimg { width: 60px; height: 76px; display: grid; place-items: center; }
    .wg-cimg img { max-width: 100%; max-height: 100%; }
    .wg-cell b { color: #e6c88a; font-size: 12px; line-height: 1.25; word-break: keep-all; }
    .wg-cell small { color: #6e7a88; font-size: 10.5px; }
    .wg-icard { text-align: center; }
    .wg-icard .icard-opts, .wg-icard .ccard-sec, .wg-icard .icard-opt { text-align: left; }
    .wg-iimg img { max-height: 110px; }
    .wg-iname { color: #e6c88a; font-size: 15px; font-weight: bold; margin: 4px 0 6px; }
    .wg-flavor { color: #8b7a5a; font-style: italic; font-size: 11.5px; margin-top: 8px; }
    .wg-parts { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
    .wg-parts > div { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
    .wg-parts small { width: 92px; color: #5d6878; font-size: 11px; }
    .wg-basepick select { flex: 1; min-width: 0; max-width: 460px; padding: 5px 8px; border-radius: 8px; border: 1px solid #2a3446; background: #0e131d; color: #e6edf3; font-size: 12.5px; }
    .wg-bline { padding-left: 97px; color: #9fb0c6; font-size: 12px; }
    .wg-vo.wg-vbase { cursor: default; color: #9fb0c6; } .wg-vo.wg-vbase:hover { background: none; border-color: transparent; }
    @media (max-width: 700px) { .wg-bline { padding-left: 0; } }
    .wg-picked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
    .wg-pk { border: 1px solid #1f2735; border-radius: 10px; padding: 8px 10px; background: #0f141f; cursor: pointer; min-height: 70px; }
    .wg-pk.on { border-color: #d4a84a; }
    .wg-pkh { display: flex; justify-content: space-between; margin-bottom: 4px; }
    .wg-pkh b { color: #f3e3b5; font-size: 12.5px; } .wg-pkh span { color: #7d8794; font-size: 11.5px; }
    .wg-pko { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; color: #c4ccd6; padding: 2px 0; line-height: 1.4; }
    .wg-pko button { margin-left: auto; background: none; border: 0; color: #5d6878; cursor: pointer; flex: none; }
    .wg-pko button:hover { color: #ff7b72; }
    /* 추억 랜덤 옵션 티어 칩 (2026-10-15) — 장비 '제작 옵션 티어'와 같은 모양, 옵션마다 */
    .wm-mt { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
    .wm-mt i { font-style: normal; font-size: 10.5px; line-height: 16px; padding: 0 5px; border-radius: 5px; border: 1px solid #2f3a4d; color: #8b95a7; cursor: pointer; }
    .wm-mt i:hover { color: #e6edf3; border-color: #4a5a72; }
    .wm-mt i.on { color: #1b1408; background: #e8c860; border-color: #e8c860; font-weight: 700; }
    .wm-mt + button { margin-left: 4px; }
    .wg-pke { color: #4d5868; font-size: 11.5px; }
    .wg-grades { font-size: 12px; color: #7d8794; margin-bottom: 8px; }
    .wg-list { overflow: auto; display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 200px; }
    .wg-opt { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid #1a2130; border-radius: 8px; background: #0e131c; cursor: pointer; font-size: 12.5px; color: #c4ccd6; }
    .wg-opt:hover { border-color: #3a4a66; }
    .wg-opt em { margin-left: auto; font-style: normal; font-size: 11px; color: #6e7a88; white-space: nowrap; }
    .wg-opt.on { border-color: #d4a84a; background: linear-gradient(90deg, #211a0d, #0f0e14); color: #f3e3b5; }
    .wg-opt.dis { opacity: .35; cursor: not-allowed; }
    .wz-page .g-abs { color: #ff9f5a; } .wz-page .g-adv { color: #b48cff; } .wz-page .g-beg { color: #7db4ff; } .wz-page .g-basic { color: #8b949e; }
    .wg-opt.gr-abs { border-left: 3px solid #ff9f5a; } .wg-opt.gr-adv { border-left: 3px solid #b48cff; } .wg-opt.gr-beg { border-left: 3px solid #4d6f9e; }
    .wg-pko.gr-abs { color: #ffc08f; } .wg-pko.gr-adv { color: #d0b8ff; }
    .wgm .gbm-main .hrm-empty a { color: #79c0ff; }
    @media (max-width: 1100px) { .wgm .gbm-body { grid-template-columns: 340px 1fr; } .wg-picked { grid-template-columns: 1fr; } }
    @media (max-width: 760px) { .wgm .gbm-body { grid-template-columns: 1fr; } .wg-doll { grid-auto-rows: auto; } }
    /* 좁은 화면: 칸 목록 ↔ 편집 영역 오가기 */
    .wz-up { display: none; }
    @media (max-width: 760px) { .wz-up { display: inline-block; order: -1; background: #1b2230; border: 1px solid #2f3a4d; color: #c9d1d9; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; } .wz-body .gbm-head { flex-wrap: wrap; } }
    .wz-body .gbm-main, .wz-body .gbm-side { scroll-margin-top: calc(var(--hubnav-h, 44px) + 10px); } /* 고정 헤더에 가리지 않게 */
    .wg-bgrp { border: 1px solid #1a2130; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
    .wg-bgrp.dis { opacity: .4; }
    .wg-bgh { display: flex; gap: 8px; align-items: baseline; padding: 2px 4px 4px; }
    .wg-bgh b { color: #e6c88a; font-size: 13px; } .wg-bgh small { color: #6e7a88; font-size: 11px; }
    /* 페이지 스크롤바도 같은 모양 (이 CSS 는 빌더 2 에서만 읽는다) */
    html { scrollbar-width: thin; scrollbar-color: #2c3a58 #0b0f17; }
    html::-webkit-scrollbar { width: 10px; }
    html::-webkit-scrollbar-track { background: #0b0f17; }
    html::-webkit-scrollbar-thumb { background: #2c3a58; border-radius: 6px; border: 2px solid #0b0f17; }
    html::-webkit-scrollbar-thumb:hover { background: #3d5078; }
    /* 스킬: 고른 칸 한 줄 (메인 + 보조 1~5) */
    .ws-slot { cursor: pointer; }
    .ws-slot:hover { border-color: #3a4a66; }
    .ws-slot[draggable=true] { cursor: grab; }
    .ws-slot.drag { opacity: .45; }
    .ws-slot.drop { border-color: #d4a84a; border-style: dashed; }
    .ws-strip { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
    .ws-strip-c { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #1f2735; border-radius: 10px; background: #0f141f; cursor: pointer; min-width: 0; transition: .12s; }
    .ws-strip-c:hover { border-color: #3a4a66; }
    .ws-strip-c.tgt { border-color: #e3b860; box-shadow: 0 0 0 2px rgba(227,184,96,.2); background: linear-gradient(135deg, #221b0e, #0f0e14 70%); }
    .ws-strip-i { width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center; background: #0b0f17; border: 1px solid #263044; color: #4d5868; font-size: 12px; overflow: hidden; }
    .ws-strip-c.main .ws-strip-i { width: 40px; height: 40px; }
    .ws-strip-i img { width: 100%; height: 100%; object-fit: cover; }
    .ws-strip-t { min-width: 0; }
    .ws-strip-t small { display: block; color: #5d6878; font-size: 10.5px; white-space: nowrap; }
    .ws-strip-t b { display: block; color: #e6edf3; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ws-strip-t b i { color: #4d5868; font-style: normal; font-weight: normal; }
    @media (max-width: 1200px) { .ws-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    /* 덧붙임 탭·티어·침식 */
    .wg-tsep { width: 1px; background: #263044; margin: 6px 8px; }
    .wg-tab.add { color: #6e8bb5; } .wg-tab.add i { font-style: normal; color: #e3b860; font-size: 11px; }
    .wg-tab.add.on { color: #f3e3b5; }
    .wg-tier { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 10px; border: 1px solid #1f2735; border-radius: 12px; background: #0f141f; flex-wrap: wrap; }
    .wg-tier small { color: #7d8794; font-size: 11.5px; margin-right: auto; }
    .wg-tier.fixed .ws-tag { opacity: .4; cursor: not-allowed; }
    .wg-tier em { width: 100%; color: #6e7a88; font-size: 11px; font-style: normal; }
    .wg-addb { font-size: 10px; color: #7ee2a8; }
    .wg-ero span { display: flex; flex-direction: column; gap: 2px; }
    .wg-corr { color: #ff8f7a; font-size: 11px; }
    .wg-echip { color: #0b0f17 !important; background: #ff8f7a; border-radius: 999px; padding: 0 8px; font-weight: bold; }
    .wg-opt b.m, .wg-ero b.m { color: #7db4ff; }
    /* 고른 칸 보기 */
    .wg-acts { display: flex; gap: 6px; margin-left: auto; }
    .wg-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
    .wg-vleft { overflow: auto; text-align: center; }
    .wg-vleft .icard-attrs { text-align: center; }
    .wg-vsec { text-align: left; font-size: 11px; color: #8b949e; margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid #2a3550; }
    .wg-vo { display: flex; align-items: center; gap: 8px; text-align: left; padding: 5px 8px; border-radius: 8px; cursor: pointer; color: #c8d2e0; font-size: 12.5px; line-height: 1.5; border: 1px solid transparent; }
    .wg-vo:hover { border-color: #3a4a66; background: #111a2a; }
    .wg-vo.on { border-color: #6b3a1c; background: #2a1510; color: #ffc9b8; }
    .wg-vo.on b.m { color: #ff8f7a; }
    .wg-vo em { margin-left: auto; font-style: normal; font-size: 11px; flex: none; }
    .wg-vright { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
    .wg-addbox { border: 1px solid #1f2735; border-radius: 12px; background: #0b0f17; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }
    .wg-addbox.grow { flex: 1; }
    .wg-addh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
    .wg-addh b { color: #f3e3b5; } .wg-addh span { color: #7d8794; font-size: 12px; }
    .wg-addd { color: #6e7a88; font-size: 11.5px; line-height: 1.5; }
    .wg-addcur { color: #e6edf3; font-size: 12.5px; padding: 6px 8px; border: 1px dashed #3a4558; border-radius: 8px; margin: 4px 0 8px; display: flex; gap: 8px; align-items: center; }
    .wg-addcur span { color: #5d6878; } .wg-addcur button { margin-left: auto; background: none; border: 0; color: #5d6878; cursor: pointer; }
    .wg-addcur button:hover { color: #ff7b72; }
    @media (max-width: 1100px) { .wg-view { grid-template-columns: 1fr; } }
    .wg-addbox .wg-opt { flex-direction: column; align-items: flex-start; gap: 2px; }
    .wg-addbox .wg-opt em { margin-left: 0; white-space: normal; }
    /* 옵션 줄 표기 — 티어 칩(로그)·등급 이름·용어 툴팁 (빌더와 같은 색) */
    .wz-page .tier-chip { display: inline-block; min-width: 21px; margin-right: 6px; padding: 0 4px; border-radius: 3px; font-size: 10.5px; font-style: normal; font-weight: bold; text-align: center; flex: none; }
    .wz-page .tier-chip.tier-0 { background: #e9456026; color: #ff6b7f; }
    .wz-page .tier-chip.tier-1 { background: #d2914626; color: #f0a04b; }
    .wz-page .tier-chip.tier-2 { background: #8b5cf626; color: #b79bff; }
    .wz-page .tier-chip:not(.tier-0):not(.tier-1):not(.tier-2) { background: #8b949e26; color: #8b949e; }
    .wg-vo.gr-abs { border-left: 3px solid #ff9f5a; } .wg-vo.gr-adv { border-left: 3px solid #b48cff; } .wg-vo.gr-beg { border-left: 3px solid #4d6f9e; }
    .wg-vt { font-style: normal; font-size: 10.5px; margin-left: auto; white-space: nowrap; flex: none; }
    .wg-vt + .wg-echip { margin-left: 6px !important; }
    .wz-page .tip2 { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
    .wg-opt b.m, .wg-pko b.m, .wg-vo b.m, .wg-addv b.m { color: #7db4ff; font-weight: 600; }
    .wg-addv { min-width: 0; }
    .wg-vo.wg-vadd { cursor: default; border-left: 3px solid #3fb9a0; } .wg-vo.wg-vadd:hover { background: none; border-color: transparent; border-left-color: #3fb9a0; }
    /* 침식 = 보라 (사용자 요청) — 진급(연보라 줄)·T2 칩과 겹치지 않게 진한 자주 계열 */
    .wg-vo.on { border-color: #7e3fbf; background: linear-gradient(90deg, #2a1640, #160f22); color: #e9d5ff; }
    .wg-vo.on b.m { color: #d8b4fe; }
    .wg-echip { background: #a855f7 !important; color: #fff !important; }
    .wg-corr { color: #c4a1ff; }
    .wg-addb { color: #c4a1ff; }
    /* ── 추억 단계 (wz_mem.js) ── */
    .wmm .gbm-body { grid-template-columns: 320px 1fr; }
    .wm-card { position: relative; padding: 12px 14px; border: 1px solid #1f2735; border-radius: 12px; background: #0f141f; cursor: pointer; transition: .15s; }
    .wm-card:hover { border-color: #3a4a66; }
    .wm-card.on { border-color: #d4a84a; background: linear-gradient(135deg, #221b0e, #0f0e14 70%); }
    .wm-ch { display: flex; align-items: center; gap: 8px; }
    .wm-ch b { color: #e6edf3; font-size: 14px; }
    .wm-cs { color: #7d8794; font-size: 12px; margin-top: 4px; }
    .wm-cs b { color: #9ec1ff; }
    .wm-rv { color: #fcd34d; font-size: 11px; border: 1px solid #6b5a1c; border-radius: 999px; padding: 0 6px; }
    .wm-card .gbm-del { position: absolute; top: 8px; right: 8px; }
    .wm-note { color: #5d6878; font-size: 11.5px; line-height: 1.55; padding: 4px 2px; }
    /* 추억 등급 단추 — 등급 색 (tier-chip 과 같은 색: 절대 빨강 · 엘리트 주황 · 레어 보라 · 매직 파랑 · 일반 회색) (2026-10-13 사용자) */
    .wm-g0 { --gc: #ff6b7f; } .wm-g1 { --gc: #f0a04b; } .wm-g2 { --gc: #b79bff; } .wm-g3 { --gc: #7db4ff; } .wm-g4 { --gc: #c9d1d9; }
    .ws-tag.wm-g { color: var(--gc); font-weight: 600; }
    .ws-tag.wm-g:hover { border-color: var(--gc); }
    .ws-tag.wm-g.on { color: #0d1117; background: var(--gc); border-color: var(--gc); }
    .wm-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 6px; }
    .wm-tabs > .wz-up { grid-column: 1 / -1; }
    .wmm .gbm-main > .wm-note { margin-bottom: 8px; }
    .wm-sum .wm-sl:first-child { margin-top: 0; }
    .wm-sl { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #c9d1d9; }
    .wm-sl > span { min-width: 64px; } .wm-sl b { color: #9ec1ff; font-size: 12px; margin-left: auto; } .wm-sl em { font-style: normal; font-size: 12px; margin-left: auto; }
    .wz-page .tier-chip.tier-3 { background: #3b82f626; color: #7db4ff; } .wz-page .tier-chip.tier-4 { background: #e6edf326; color: #c9d1d9; }
    .wm-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
    .wm-left { display: flex; flex-direction: column; min-height: 0; }
    @media (max-width: 1100px) { .wm-split { grid-template-columns: 1fr; } }
    @media (max-width: 760px) { .wmm .gbm-body { grid-template-columns: 1fr; } }
    .wm-soon { font-style: normal; font-size: 10.5px; color: #7d8794; border: 1px solid #2f3a4d; border-radius: 999px; padding: 0 6px; }
    .wmm .gbm-cap { margin-top: 6px; }
    .wm-card.x { border-style: dashed; border-color: #6b5a1c; }
    .wm-card.x.on { border-style: solid; border-color: #d4a84a; }
    .ws-tag.off { opacity: .35; cursor: not-allowed; }
    .wm-xnote { font-style: normal; font-size: 11px; color: #e3b860; margin-left: 6px; }
    .wg-addd b { color: #e6edf3; }
    /* ── 석판 배치 (wz_slate.js) — 빌더 석판 보드를 크게 ── */
    .wsb-pal { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .wsb-palrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .wsb-palrow > small { width: 40px; color: #5d6878; font-size: 11px; }
    .wsb-tile { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 7px; min-height: 52px; box-sizing: border-box; border: 1px solid #222b3b; border-radius: 10px; background: #0f141f; cursor: pointer; transition: .12s; } /* 모양(세로로 긴 석판)마다 높이가 달라 줄이 들쭉날쭉 → 같은 높이 */
    .wsb-tile:hover { border-color: #3a4a66; }
    .wsb-tile.on { border-color: #e3b860; box-shadow: 0 0 0 2px rgba(227,184,96,.25); background: linear-gradient(135deg, #221b0e, #0f0e14 70%); }
    .wsb-tile.full { opacity: .45; }
    .wsb-tile b { color: #d5dce5; font-size: 12px; font-weight: 600; }
    .wsb-tile small { color: #7d8794; font-size: 10.5px; }
    .wsb-mini { display: inline-grid; gap: 1px; }
    .wsb-onm { display: block; color: #ffd98a; font-weight: 700; margin-bottom: 1px; } /* 핵심 재능 이름 — 효과 위 한 줄 (사용자 2026-10-10) */
    .wsb-mini i { width: 8px; height: 8px; border-radius: 2px; }
    .wsb-mini i.e { background: transparent; }
    .wsb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
    .wsb-split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; flex: 1; min-height: 0; }
    .wsb-left { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border: 1px solid #1f2735; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, #151c2b, #0b0f17 70%); align-self: start; }
    .wsb-board { display: grid; grid-template-columns: repeat(6, 54px); grid-auto-rows: 54px; gap: 4px; user-select: none; touch-action: none; }
    .wsb-void { visibility: hidden; }
    .wsb-cell { position: relative; border: 1.5px solid #263044; border-radius: 8px; background: #0f1520; transition: .1s; }
    .wsb-cell.can { border-style: dashed; border-color: #6b5a1c; cursor: copy; }
    .wsb-cell.can:hover { background: #221b0e; }
    .wsb-cell.on { cursor: grab; background: color-mix(in srgb, var(--sc) 38%, #0f1520); border-color: var(--sc); }
    .wsb-cell.on.jt { border-top-color: transparent; border-top-left-radius: 2px; border-top-right-radius: 2px; }
    .wsb-cell.on.jb { border-bottom-color: transparent; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
    .wsb-cell.on.jl { border-left-color: transparent; border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
    .wsb-cell.on.jr { border-right-color: transparent; border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
    .wsb-cell.sel { box-shadow: 0 0 0 2px #e3b860 inset; background: color-mix(in srgb, var(--sc) 55%, #0f1520); }
    .wsb-cell.fx { box-shadow: 0 0 12px color-mix(in srgb, var(--sc) 55%, transparent); }
    .wsb-cell.bad { border-color: #ff5a5a !important; background: repeating-linear-gradient(45deg, #3a1414, #3a1414 6px, #2a0e0e 6px, #2a0e0e 12px); }
    .wsb-cell.out { opacity: .5; border-style: dashed; }
    .wsb-cell .o { position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 2px #0b0f17; }
    .wsb-cell.drop-ok { outline: 2px solid #3fb950; outline-offset: -2px; } .wsb-cell.drop-bad { outline: 2px solid #ff5a5a; outline-offset: -2px; }
    .wsb-hint { color: #7d8794; font-size: 12px; } .wsb-hint b { color: #e3b860; }
    .wsb-warn { color: #ffb37a; font-size: 12px; margin: 4px 0; }
    .wsb-acts { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
    .wsb-sock { padding: 7px 10px; border: 1px solid #1f2735; border-radius: 10px; margin-bottom: 5px; cursor: pointer; background: #0f141f; }
    .wsb-sock:hover { border-color: #3a4a66; }
    .wsb-sock.on { border-color: #e3b860; }
    .wsb-sock small { display: block; color: #6e7a88; font-size: 10.5px; margin-bottom: 2px; }
    .wsb-sock span { color: #c8d2e0; font-size: 12.5px; } .wsb-sock i { color: #4d5868; font-style: normal; }
    .wsb-sock b.m { color: #7db4ff; }
    .wsb-li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: #c8d2e0; font-size: 12.5px; }
    .wsb-li:hover { background: #111a2a; }
    .wsb-li i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
    .wsb-li small { margin-left: auto; color: #6e7a88; font-size: 11px; }
    .wsb-li.bad { color: #ffb37a; }
    @media (max-width: 1100px) { .wsb-split { grid-template-columns: 1fr; } .wsb-left { align-self: center; } }
    @media (max-width: 520px) { .wsb-board { grid-template-columns: repeat(6, 44px); grid-auto-rows: 44px; } }
    /* 석판 강조 (빌더 sb-hl/sb-hl2/sb-dim 과 같은 모양) · 툴팁 섹션 */
    .wsb-cell.on.hl { box-shadow: 0 0 0 2px var(--sc), 0 0 12px color-mix(in srgb, var(--sc) 60%, transparent); filter: brightness(1.45); z-index: 1; }
    .wsb-cell.on.hl2 { box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 65%, transparent), 0 0 8px var(--sc); filter: brightness(1.18); }
    .wsb-cell.on.dim { opacity: .3; }
    .wsb-cell.on.fx { animation: wsbPulse 3.2s ease-in-out infinite; }
    @keyframes wsbPulse { 50% { box-shadow: 0 0 14px color-mix(in srgb, var(--sc) 70%, transparent); } }
    .wz-page .ft-sec { color: #c9a7ff; font-weight: 600; margin: 2px 0; }
    .wz-page .ft-hl { color: #ffd166; font-weight: 600; }
    .wz-page #floatTip2 .ft-body > div { padding: 1px 0; }
    .wg-pkt { min-width: 0; flex: 1; } /* 고른 옵션 글자 — 수치 강조(b)가 flex 칸으로 쪼개지지 않게 한 덩어리로 */
    /* 추억: 기본·고유·랜덤 칸을 왼쪽에 세로로 (인게임처럼 — 사용자 요청), 옆에 목록 */
    .wm-left { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 12px; }
    .wm-left > .wg-parts { grid-column: 1 / -1; }
    .wm-left > .wg-picked { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; align-content: start; }
    .wm-left > .wm-pick { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-height: 0; }
    @media (max-width: 900px) { .wm-left { grid-template-columns: 1fr; } .wm-left > .wm-pick { grid-column: 1; grid-row: 3; } }
    .wm-rvk { min-height: 0; border-style: dashed; } .wm-rvk.on { border-style: solid; }
    .wmm .wm-left { flex: 1; min-height: 0; }
    /* ── 정령·운명 (wz_pact.js) ── */
    .wm-kind { font-style: normal; font-size: 10.5px; color: #9ec1ff; border: 1px solid #23406b; border-radius: 999px; padding: 0 6px; }
    .wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; overflow: auto; align-content: start; }
    .wp-card { padding: 10px 12px; border: 1px solid #1f2735; border-radius: 12px; background: #0f141f; cursor: pointer; transition: .12s; }
    .wp-card:hover { border-color: #3a4a66; }
    .wp-card.on { border-color: #d4a84a; background: linear-gradient(135deg, #221b0e, #0f0e14 70%); }
    .wp-card.dis { opacity: .4; cursor: not-allowed; }
    .wp-ch { display: flex; align-items: center; gap: 8px; } .wp-ch b { color: #e6c88a; font-size: 13.5px; }
    .wp-ch i { font-style: normal; font-size: 10.5px; color: #9ec1ff; border: 1px solid #23406b; border-radius: 999px; padding: 0 6px; }
    .wp-card small { display: block; color: #7d8794; font-size: 11.5px; margin-top: 4px; line-height: 1.45; }
    .wp-card em { font-style: normal; color: #ffb37a; font-size: 11px; }
    .wp-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; flex: 1; min-height: 0; }
    .wp-rings { overflow: auto; }
    .wp-ring .wg-vsec span { color: #6e7a88; margin-left: 6px; }
    .wp-node { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #1a2130; border-radius: 9px; margin-bottom: 4px; cursor: pointer; color: #8b949e; font-size: 12.5px; background: #0e131c; }
    .wp-node:hover { border-color: #3a4a66; }
    .wp-node.on { border-color: #d4a84a; background: linear-gradient(90deg, #211a0d, #0f0e14); color: #f3e3b5; }
    .wp-node.dst { border-color: #b8732b; background: linear-gradient(90deg, #2a1a0c, #0f0e14); color: #ffcf99; }
    .wp-node.cov { cursor: default; opacity: .55; }
    .wp-node em { margin-left: auto; font-style: normal; font-size: 11px; color: #e3b860; white-space: nowrap; }
    .wp-node.dst em { color: #ffb37a; }
    .wp-node b.m, .wp-eff b.m { color: #7db4ff; }
    .wp-eff { color: #c8d2e0 !important; margin-bottom: 4px; }
    .wd-cnt { display: inline-flex; align-items: center; gap: 4px; flex: none; }
    .wd-cnt button { width: 20px; height: 20px; border-radius: 5px; border: 1px solid #2f3a4d; background: #1b2230; color: #c9d1d9; cursor: pointer; padding: 0; }
    .wd-cnt b { color: #e3b860; font-size: 11.5px; min-width: 22px; text-align: center; }
    @media (max-width: 1100px) { .wp-split { grid-template-columns: 1fr; } }
    /* ── 운명판 (wz_pact.js wfBoard) ── */
    .wf-boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
    .wf-board { border: 1px solid #1f2735; border-radius: 12px; background: #0b0f17; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
    .wf-board.empty { align-items: center; justify-content: center; color: #5d6878; cursor: pointer; min-height: 120px; border-style: dashed; }
    .wf-board.empty b { color: #aab4c0; } .wf-board.empty small { font-size: 11px; }
    .wf-h { display: flex; gap: 6px; align-items: center; cursor: pointer; } .wf-h b { color: #e6c88a; font-size: 13.5px; }
    .wf-h i { font-style: normal; font-size: 10.5px; color: #9ec1ff; border: 1px solid #23406b; border-radius: 999px; padding: 0 6px; }
    .wf-ring { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
    .wf-ring > small { width: 100%; color: #5d6878; font-size: 10.5px; }
    .wf-node { font-size: 11px; color: #6e7a88; border: 1px solid #1a2130; border-radius: 6px; padding: 2px 6px; cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wf-node.on { color: #e3b860; border-color: #5a4a26; }
    .wf-node:hover { border-color: #b8732b; }
    .wf-slot { position: relative; display: flex; flex-direction: column; min-width: 90px; flex: 1 1 90px; padding: 4px 22px 4px 7px; border: 1.5px dashed #b8732b; border-radius: 8px; background: #1a120a; cursor: pointer; }
    .wf-slot small { color: #a77a45; font-size: 9.5px; } .wf-slot b { color: #ffcf99; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .wf-slot b i { color: #6e5a45; font-style: normal; font-weight: normal; }
    .wf-slot.have { border-style: solid; background: linear-gradient(90deg, #2a1a0c, #140f0a); }
    .wf-slot.und { border-color: #a855f7; background: #1a1026; } .wf-slot.und small { color: #b48cff; } .wf-slot.und b { color: #e9d5ff; }
    .wf-slot.sel { box-shadow: 0 0 0 2px #e3b860; }
    .wf-slot button { position: absolute; top: 3px; right: 3px; background: none; border: 0; color: #6e5a45; cursor: pointer; font-size: 11px; }
    .wf-hint { color: #7d8794; font-size: 12px; margin: 2px 0 8px; } .wf-hint b { color: #e3b860; }
    .wf-low { flex: 1; min-height: 0; }
    .wf-own.fit { cursor: pointer; background: #1a120a; border-radius: 6px; outline: 1px dashed #b8732b; }
    .wf-pl { font-style: normal; font-size: 10.5px; color: #8fb9a0; white-space: nowrap; flex: none; } .wf-pl.full { color: #6e7a88; }
    @media (max-width: 1100px) { .wf-boards { grid-template-columns: 1fr; } }
    .wf-low { flex: none; display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 12px; align-items: start; } /* 운명판 아래 — 내용만큼, 화면은 위아래 스크롤 */
    .wf-ownbox { border: 1px solid #d4a84a; border-radius: 10px; background: #0f141f; padding: 8px 10px; }
    .wf-ownbox .wg-pko { padding: 4px 0; border-top: 1px solid #1a2130; }
    .wf-tally { margin-top: 6px; }
    .wf-add { display: flex; flex-direction: column; min-width: 0; }
    @media (max-width: 900px) { .wf-low { grid-template-columns: 1fr; } }
    .wf-low .wg-list { max-height: 460px; }
    /* ── 계약 보드 (wcb — 게임 계약 화면 모양) ── */

    .wcb-board { border: 1px solid #1f2735; border-radius: 14px; background: radial-gradient(circle at 50% 50%, #18233a, #0b0f17 70%); }
    .wcb { width: 100%; height: auto; max-height: calc(var(--wz-room) - 150px); display: block; margin: 0 auto; }
    .wcb-tri { fill: #0b0f17; stroke: #2a3a5a; stroke-width: 2; }
    .wcb-path { fill: none; stroke: #c9d1d9; stroke-opacity: .55; stroke-width: 3; stroke-linejoin: round; }
    .wcb-path.ext { stroke: #e3b860; stroke-opacity: .7; stroke-dasharray: 5 4; }
    .wcb-pt { cursor: pointer; }
    .wcb-ptc { fill: #1b2230; stroke: #e3b860; stroke-width: 3; } .wcb-ptc.empty { stroke: #3a4558; stroke-dasharray: 4 3; }
    .wcb-plus { fill: #5d6878; font-size: 28px; text-anchor: middle; }
    .wcb-pn { fill: #e6edf3; font-size: 14px; text-anchor: middle; font-weight: 600; paint-order: stroke; stroke: #0b0f17; stroke-width: 3px; } .wcb-pn.dim { fill: #5d6878; }
    .wcb-adv { fill: #e3b860; } .wcb-advt { fill: #0b0f17; font-size: 13px; font-weight: 700; text-anchor: middle; }
    .wcb-n { cursor: pointer; }
    .wcb-nc { fill: #0f1520; stroke: #3a4558; stroke-width: 2.5; transition: .12s; }
    .wcb-n .wcb-ic { filter: grayscale(.9) brightness(.55); }
    .wcb-n.on .wcb-nc { stroke: #e3b860; fill: #2a200c; } .wcb-n.on .wcb-ic { filter: none; }
    .wcb-n.adv .wcb-nc { stroke: #9ec1ff; } .wcb-n.adv .wcb-ic { filter: none; }
    .wcb-n.big .wcb-nc { stroke-width: 3.5; }
    .wcb-n.dst .wcb-nc { stroke: #4da3ff; stroke-dasharray: 4 3; fill: #0d1b2e; }
    .wcb-n.dst.have .wcb-nc { stroke-dasharray: none; fill: #1b4a8a; stroke: #7dc4ff; }
    .wcb-n.dst.have.mid .wcb-nc { fill: #6b4f12; stroke: #ffd166; }
    .wcb-n.und .wcb-nc { stroke: #a855f7; fill: #1a1026; } .wcb-n.und.have .wcb-nc { fill: #7e22ce; stroke: #e9d5ff; }
    .wcb-n.sel .wcb-nc { stroke: #fff; stroke-width: 4; }
    .wcb-n:hover .wcb-nc { stroke-width: 4; }

    .wcb-pt.sel .wcb-ptc { stroke: #7fd4ff; stroke-width: 4; }
    .wp-side .wp-grid { grid-template-columns: 1fr; max-height: 420px; margin-top: 8px; }
    .wp-side .ws-tags { margin-top: 6px; }
    .wp-kd { color: #7d8794; font-size: 12px; margin-left: 8px; }
    .wcb-lim { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #8b949e; }
    .wcb-lim b { color: #e6edf3; } .wcb-lim .over b { color: #ff7b72; }
    .wf-own.here { outline-color: #e3b860; background: #2a200c; }
    .wcb-add { margin-top: 14px; }
    .wcb-add .wg-list { max-height: 520px; }
    .wcb-add .wg-opt { gap: 8px; }
    .wcb-add .wg-opt > span:first-child { flex: 1; min-width: 0; }
    .wcb-add .wg-opt.fit { outline: 1px dashed #b8732b; background: #1a120a; }
    .wcb-add .wg-opt.here { outline-color: #e3b860; background: #2a200c; }
    .wd-del { width: 20px; height: 20px; border: 0; background: none; color: #6e7a88; cursor: pointer; padding: 0; flex: none; } .wd-del:hover { color: #ff8a7a; }
    .wd-cap { font-size: 11.5px; color: #7d8794; padding: 8px 2px 4px; }
    .wcb-roll { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
    .wcb-roll > div { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .wcb-roll small { width: 120px; color: #8b949e; font-size: 11.5px; }
    .wcb-n.ext.lowslot .wcb-nc { stroke: #4da3ff; }
    .wcb-n.ext:not(.lowslot) .wcb-nc { stroke: #e3b860; }
    .wcb-help { color: #79c0ff; cursor: help; margin-left: auto; }


    /* 계약 보드 — 옆 칸 없이 크게, 고른 칸은 아래, 정령 고르기는 팝업 */
    .wcb-lim { margin-bottom: 8px; }
    .wcb-hint { margin-top: 10px; font-size: 12px; color: #7d8794; }
    .wcb-info { margin-top: 10px; }
    .wcb-pop { position: fixed; inset: 0; z-index: 1200; background: rgba(3,5,10,.72); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; }
    .wcb-popin { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #0d121b; border: 1px solid #2a3446; border-radius: 14px; padding: 14px 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
    .wcb-poph { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .wcb-poph > div { flex: 1; min-width: 0; } .wcb-poph small { display: block; color: #7d8794; font-size: 11.5px; } .wcb-poph b { font-size: 17px; color: #f0e3c0; }
    .wcb-x { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #2f3a4d; background: #141b27; color: #c9d1d9; cursor: pointer; flex: none; }
    .wcb-popin .wp-grid { max-height: none; margin-top: 8px; }
    .wp-card { display: flex; gap: 10px; align-items: flex-start; }
    .wp-cb { flex: 1; min-width: 0; }
    .wp-face { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex: none; border: 2px solid #3a4558; background: #1b2230; display: flex; align-items: center; justify-content: center; color: #8fa3c2; font-weight: 700; }
    .wp-card.on .wp-face { border-color: #d4a84a; }
    .wp-face img { width: 100%; height: 160%; object-fit: cover; object-position: top; align-self: flex-start; }
    .wp-face.big { width: 56px; height: 56px; border-color: #d4a84a; }
    .wp-ch i { white-space: nowrap; flex: none; }
    .wcb-popin .wg-parts small { width: auto; margin-right: 8px; }
    /* 계약 노드 팝업 · 장착한 운명 */
    .wcb-was, .wcb-cur { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #1f2735; border-radius: 10px; background: #0f141f; margin: 6px 0; font-size: 12.5px; }
    .wcb-was small, .wcb-cur small { color: #7d8794; font-size: 11px; flex: none; width: 58px; }
    .wcb-was > span, .wcb-cur > span { flex: 1; min-width: 0; }
    .wcb-was em { font-style: normal; font-size: 11px; color: #8fb9a0; flex: none; } .wcb-was.off { opacity: .55; } .wcb-was.off em { color: #ffb37a; }
    .wcb-cur { border-color: #b8732b; background: #1a120a; } .wcb-cur .wz-btn { flex: none; }
    .wcb-popin .wg-list { max-height: 46vh; overflow: auto; }
    .wcb-popin .wcb-own { max-height: 24vh; }
    .wcb-popin .wg-opt.off { opacity: .4; cursor: default; }
    .wcb-popin .wg-opt.here { outline: 1px solid #e3b860; background: #2a200c; }
    .wcb-eq { margin-top: 12px; }
    .wcb-eq .wg-opt { gap: 10px; }
    .wcb-eq .wg-opt > span { flex: 1; min-width: 0; }
    .wcb-eqn { color: #e6c88a; font-size: 12.5px; flex: none; min-width: 74px; } .wcb-eqp { color: #7d8794; font-size: 11.5px; flex: none; min-width: 120px; }
    .wcb-tal { margin-left: 10px; color: #8b949e; }
    @media (max-width: 700px) { .wcb-eq .wg-opt { flex-wrap: wrap; } .wcb-eqp { min-width: 0; } }
    .wcb-msg { color: #ffb37a; font-size: 12.5px; margin: 4px 0 6px; }
    /* 운명이 꽂힌 자리 — 보석 + 이름 + 빛 (사용자 요청: 구분이 잘 안 됨) */
    .wcb-glow { fill: none; stroke-width: 3; opacity: .55; stroke: #7dc4ff; filter: drop-shadow(0 0 6px #4da3ff); }
    .wcb-n.mid .wcb-glow { stroke: #ffd166; filter: drop-shadow(0 0 6px #e3b860); } .wcb-n.und .wcb-glow { stroke: #e9d5ff; filter: drop-shadow(0 0 6px #a855f7); }
    .wcb-gem { stroke: #fff; stroke-width: 1.5; } .wcb-gem.low { fill: #4da3ff; } .wcb-gem.mid { fill: #ffd166; } .wcb-gem.und { fill: #c084fc; }
    .wcb-dl { font-size: 13px; font-weight: 700; paint-order: stroke; stroke: #0b0f17; stroke-width: 4px; pointer-events: none; }
    .wcb-dl.low { fill: #9fd0ff; } .wcb-dl.mid { fill: #ffe08a; } .wcb-dl.und { fill: #e3c4ff; }
    .wcb-q { fill: #7dc4ff; font-size: 13px; font-weight: 700; text-anchor: middle; pointer-events: none; }
    .wz-undo { min-width: 36px; padding-left: 8px; padding-right: 8px; font-size: 15px; } .wz-undo:disabled { opacity: .35; cursor: default; }
    /* PC 에서는 단계 막대를 한 줄로 (두 줄이 되면 그만큼 아래 화면이 잘린다) */
    @media (min-width: 1101px) {
      .wz-bar { flex-wrap: nowrap; }
      .wz-title, .wz-nav { flex: none; }
      .wz-steps { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; margin: 0; justify-content: center; }
      .wz-step { min-width: 0; flex: 1 1 0; max-width: 190px; } /* 다섯 칸 같은 폭 — 글자 길이·선택에 따라 꿀렁이지 않게 (사용자 2026-10-09) */
      .wz-step > div { min-width: 0; }
      .wz-step small { max-width: 100%; }
      .wz-next { width: 148px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 다음 버튼 폭 고정 — 단계마다 글자 길이가 달라도 단계 칸 폭 그대로 */
    }
    /* 중간 폭(901~1100): 첫 줄 = 빌더·빌드 고르기 ··· 다음 단추, 둘째 줄 = 여섯 단계 한 줄 (6단계 코멘트 추가로 넘치던 것, 2026-10-13) */
    @media (min-width: 901px) and (max-width: 1100px) {
      .wz-nav { margin-left: auto; }
      .wz-steps { order: 3; flex: 1 1 100%; flex-wrap: nowrap; margin: 0; }
      .wz-step { width: auto; min-width: 0; flex: 1 1 0; }
      .wz-step small { max-width: 100%; }
    }
    /* ── 빌드 관리·로그 가져오기·공유 올리기 창 (wz_build.js, 2026-10-09) ── */
    .wz-manage { margin-left: 6px; padding: 4px 10px; font-size: 12px; }
    .wz-oldse { margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid #5a4a1c; color: #e8c86a; font-size: 11px; white-space: nowrap; }
    .wb-dim { position: fixed; inset: 0; z-index: 9500; background: rgba(3,6,12,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
    .wb-pop { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #0d121b; border: 1px solid #2a3446; border-radius: 14px; padding: 16px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); color: #c9d1d9; }
    .wb-pop.wb-share { width: min(640px, 100%); }
    .wb-pop.wb-manage { width: min(820px, 100%); }
    .wb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .wb-head h3 { margin: 0; }
    .wb-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); max-height: 42vh; overflow-y: auto; padding: 2px; }
    .wb-grid .wl-card { position: relative; grid-template-columns: 44px 1fr; grid-template-rows: auto; padding: 10px; }
    .wb-grid .wl-faces { grid-row: 1; } .wb-grid .wl-face { width: 44px; height: 44px; } .wb-grid .wl-sk { display: none; }
    .wb-grid .wl-card.on { border-color: #d4a84a; background: linear-gradient(180deg, #221b0e, #0f0e14); }
    .wb-pop h3 { margin: 0 0 10px; font-size: 16px; color: #ffd98a; }
    .wb-msg { white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: #c9d1d9; }
    .wb-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; } .wb-btns.left { justify-content: flex-start; margin-top: 8px; }
    .wb-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 40vh; overflow: auto; }
    .wb-row { display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid #263044; background: #111826; color: #e6edf3; cursor: pointer; font: inherit; }
    .wb-row:hover { border-color: #4a5a78; } .wb-row em { font-style: normal; color: #ffd166; } .wb-row small { margin-left: auto; color: #7d8794; font-size: 11.5px; }
    .wb-cur { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: #111826; border: 1px solid #263044; }
    .wb-cur small { width: 100%; color: #7d8794; font-size: 11px; }
    .wb-cur input, .wb-field input, .wb-link { flex: 1; min-width: 160px; padding: 6px 10px; border-radius: 8px; border: 1px solid #2a3446; background: #0a0f17; color: #e6edf3; font: inherit; font-size: 13px; }
    .wb-del { color: #ff9b8f; border-color: #5a2a2a; }
    .wb-se { margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; background: #1a1508; border: 1px solid #5a4a1c; color: #e8c86a; font-size: 13px; }
    .wb-memo { margin-top: 8px; } .wb-memo small { display: block; color: #7d8794; font-size: 11px; margin-bottom: 4px; }
    .wb-memo textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; padding: 8px 10px; border-radius: 8px; border: 1px solid #2a3446; background: #0a0f17; color: #e6edf3; font: inherit; font-size: 13px; line-height: 1.55; }
    .wb-build { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid #1f2735; background: #0e131c; cursor: pointer; }
    .wb-build:hover { border-color: #3a4a66; } .wb-build.on { border-color: #d4a84a; background: linear-gradient(180deg, #221b0e, #0f0e14); }
    .wb-bname { min-width: 0; flex: 1; } .wb-bname b { display: block; color: #e6edf3; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-bname small { color: #7d8794; font-size: 11.5px; }
    .wb-mv { display: flex; gap: 3px; } .wb-mv button { width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid #2a3446; background: #121a28; color: #9fb0c6; font-size: 10px; cursor: pointer; } .wb-mv button:disabled { opacity: .3; cursor: default; }
    .wb-sep { height: 1px; background: #1f2735; margin: 14px 0 12px; }
    .wb-acts { display: flex; gap: 8px; flex-wrap: wrap; } .wb-acts .wz-btn { text-decoration: none; }
    .wb-note { margin-top: 10px; color: #7d8794; font-size: 11.5px; line-height: 1.6; overflow-wrap: anywhere; }
    .wb-field { display: flex; gap: 10px; align-items: center; margin: 8px 0; } .wb-field b { width: 64px; flex: none; font-size: 12.5px; color: #9fb0c6; }
    .wb-tgrp { margin: 8px 0; } .wb-tgrp small { display: block; color: #7d8794; font-size: 11px; margin-bottom: 4px; } .wb-tgrp > div { display: flex; flex-wrap: wrap; gap: 5px; }
    .wb-tag { padding: 3px 10px; border-radius: 999px; border: 1px solid #2a3446; background: #0e131d; color: #c9d1d9; font-size: 12px; cursor: pointer; }
    .wb-vis { display: flex; flex-wrap: wrap; gap: 6px; }
    .wb-tag.on { border-color: #d4a84a; background: #2a2210; color: #ffd98a; } .wb-tag.lock { cursor: default; }
    .wb-link { width: 100%; margin-top: 10px; box-sizing: border-box; }
    #wbToast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 9600; padding: 9px 16px; border-radius: 999px; background: #1b2436; border: 1px solid #3a4a66; color: #e6edf3; font-size: 13px; opacity: 0; pointer-events: none; transition: .2s; }
    #wbToast.on { opacity: 1; transform: translate(-50%, 0); }
    @media (max-width: 600px) { .wb-field { flex-direction: column; align-items: stretch; } .wb-field b { width: auto; } }
    /* ── 내 빌드 목록 (빌더 첫 화면, 2026-10-09) ── */
    .wz-home { cursor: pointer; } .wz-home:hover { color: #ffd98a; }
    .wl-bar { max-width: 1100px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .wl-bar .wz-nav { margin-left: auto; }
    .wl-bar .wl-sub { color: #7d8794; font-size: 12.5px; margin-left: 8px; }
    .wl-wrap { max-width: 1100px; margin: 14px auto 0; }
    .wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 10px; }
    .wl-card { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 8px 12px; padding: 12px; border: 1px solid #1f2735; border-radius: 12px; background: #0e131c; cursor: pointer; transition: .12s; }
    .wl-card:hover { border-color: #4a5a78; background: #111a2a; } .wl-card.on { border-color: #6b5a2a; }
    .wl-faces { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 6px; } /* 초상화 + 밑에 메인 스킬 (2026-10-14) */
    .wl-sk { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #3a3020; background: #0a0f17; box-sizing: border-box; }
    .wl-face { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #2a3446; background: #0a0f17; display: grid; place-items: center; color: #5d6878; font-weight: 700; }
    .wl-face img { width: 100%; height: 100%; object-fit: cover; }
    .wl-info { min-width: 0; } .wl-info b { display: block; color: #e6edf3; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wl-info small { display: block; color: #9fb0c6; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .wl-tags span { padding: 1px 7px; border-radius: 999px; border: 1px solid #263044; color: #8b95a7; font-size: 11px; }
    .wl-tags span.old { border-color: #5a4a1c; color: #e8c86a; } .wl-tags span.se { border-color: #5a4a1c; color: #e8c86a; }
    .wl-acts { grid-column: 2; display: flex; gap: 6px; } .wl-acts .wz-btn { padding: 3px 10px; font-size: 12px; }
    .wl-note { margin-top: 10px; color: #6b7686; font-size: 12px; text-align: center; }
    .wb-steps { margin: 4px 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: #c9d1d9; } .wb-steps li { margin-bottom: 4px; }
    .wb-pathh { color: #7d8794; font-size: 11.5px; margin-bottom: 4px; }
    .wb-path { display: flex; gap: 8px; align-items: center; } .wb-path code { flex: 1; min-width: 0; padding: 7px 10px; border-radius: 8px; background: #0a0f17; border: 1px solid #2a3446; color: #e6edf3; font-size: 12px; word-break: break-all; line-height: 1.5; } /* 경로는 칸을 꽉 채워 꺾는다 (공백에서 꺾으면 "C:\Program Files" 만 한 줄) */

    /* 내 빌드 시즌 칩 (2026-10-10) — 빌드 공유 목록의 칩과 같은 모양 */
    .wl-ses { display: flex; gap: 6px; margin: 0 0 10px; }
    .share-se-chip { background: #131a26; border: 1px solid #2f3a4d; color: #8b949e; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
    .share-se-chip small { font-weight: 400; color: inherit; opacity: .75; }
    .share-se-chip:hover { color: #e6edf3; border-color: #5a6b88; }
    .share-se-chip.on { color: #f3e3b5; border-color: #8a6d2e; background: #2a200c; }
    /* 랜덤 옵션 후보 (레전드 "<랜덤 …>" 옵션) */
    .icard-pools { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
    .icard-pool { border-top: 1px solid #2a3550; padding-top: 5px; }
    .icard-pool > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: #e3b341; list-style: revert; }
    .icard-pool > summary small { color: #8b949e; font-weight: 400; margin-left: 4px; }
    .icard-pool.corr > summary { color: #ff6e5e; }
    .icard-pool .icard-opt { font-size: 12px; padding: 2px 0 2px 8px; border-left: 2px solid #2a3550; margin: 3px 0; }
    .icard-pool .pool-d { color: #9fb0c8; font-size: 11.5px; }
    .wg-randlist { flex: none; min-height: 0; max-height: 320px; }
    .wg-randlist .pool-d { color: #9fb0c8; font-size: 11.5px; }
    .wz-shedit { border-color: #6b5a2a; color: #ffd98a; background: #1a1508; } .wz-shedit:hover { border-color: #d4a84a; }
    .wz-sebar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: #1a1508; border: 1px solid #5a4a1c; color: #e8c86a; font-size: 13px; }
    .wz-sebar b { color: #ffd98a; } .wz-sebtn { margin-left: auto; display: flex; gap: 6px; } .wz-sebtn .wz-btn { padding: 4px 10px; font-size: 12px; }
    .wl-wrap > .wz-sebar { margin: 0 0 10px; }
    .wc-wrap { max-width: 900px; margin: 0 auto; padding: 16px 18px; border: 1px solid #1f2735; border-radius: 14px; background: #0d121b; }
    .wc-memo { width: 100%; box-sizing: border-box; min-height: 320px; resize: vertical; padding: 12px 14px; border-radius: 10px; border: 1px solid #2a3446; background: #0a0f17; color: #e6edf3; font: inherit; font-size: 14px; line-height: 1.7; }
    .wc-memo:focus { outline: none; border-color: #d4a84a; }
    .wc-foot { margin-top: 6px; color: #7d8794; font-size: 12px; text-align: right; } #wcS { color: #7ee2a8; }
    /* 내 공유 목록 (wbMyShares, 2026-10-13) */
    .wb-mss { display: flex; flex-direction: column; gap: 6px; max-height: min(420px, 60vh); overflow-y: auto; margin: 4px 0 10px; }
    .wb-ms { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #232b3a; border-radius: 10px; background: #0f141f; }
    .wb-ms-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
    .wb-ms-t b { color: #e6edf3; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wb-ms-t small { color: #7d8794; font-size: 11.5px; }
    .wb-ms .wz-btn { flex: none; padding: 5px 10px; font-size: 12px; text-decoration: none; }
    .wb-unlw { margin: -2px 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid #6b5a2a; background: #1d1a12; color: #f3e3b5; font-size: 12.5px; line-height: 1.5; } /* 링크 전용 14일 경고 */
    .wb-unlw[hidden] { display: none; }
/* MP 봉인 요약 (00_seal.js, 2026-10-14) — 패시브 칸 아래 · MP=파랑 · HP=빨강 */
.seal-box { margin: 8px 0 4px; padding: 8px 10px; border: 1px solid #2a3344; border-radius: 8px; background: #0e131c; font-size: 13px; }
.seal-box.over { border-color: #7a2e2e; }
.seal-h { color: #e8c860; font-weight: 600; margin-bottom: 4px; } .seal-h .psum { font-weight: 400; font-size: 11.5px; }
.seal-r { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; color: #c3ccd8; cursor: help; }
.seal-r b { color: #8cc4ff; font-variant-numeric: tabular-nums; }
.seal-r.hp b { color: #ff9393; }
.seal-r em { font-style: normal; font-size: 11px; color: #f08a8a; border: 1px solid #6b3030; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.seal-t { margin-top: 6px; padding-top: 6px; border-top: 1px solid #2a3344; display: grid; gap: 4px; }
.seal-tr { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: baseline; gap: 2px 8px; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; }
.seal-tr b { font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
.seal-tr b:first-of-type { padding-right: 6px; border-right: 1px solid rgba(255,255,255,.08); }
.seal-tr.mp { background: rgba(70,140,230,.10); color: #9cc3f0; } .seal-tr.mp b { color: #cfe4ff; }
.seal-tr.hp { background: rgba(230,80,80,.10); color: #f0a8a8; } .seal-tr.hp b { color: #ffd6d6; }
.seal-box.over .seal-tr.mp b:first-of-type, .seal-box.over .seal-tr.mp b:last-of-type { color: #ff8a8a; }
.seal-warn { margin-top: 4px; color: #ff9a9a; font-size: 12px; }
    /* 단계별 빌드 (공유 창, 2026-10-15) */
    .wb-field:has(.wb-stg) { align-items: flex-start; } .wb-field:has(.wb-stg) > b { padding-top: 5px; }
    .wb-stg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .wb-stgs { display: flex; flex-direction: column; gap: 5px; }
    .wb-stgr { display: flex; gap: 6px; align-items: center; }
    .wb-stgr select { padding: 5px 8px; border-radius: 8px; border: 1px solid #2a3446; background: #0a0f17; color: #e6edf3; font: inherit; font-size: 13px; }
    .wb-stgr select:first-child { flex: 0 0 96px; } .wb-stgr select:nth-child(2) { flex: 1; min-width: 0; }
    .wb-stgr .wz-btn { padding: 4px 9px; }
    .wb-stgb { display: flex; gap: 6px; flex-wrap: wrap; }
    .wb-stgh { color: #7d8794; font-size: 11.5px; line-height: 1.5; }
    /* 여러 빌드 묶어서 — 카드 (2026-10-15 개편) */
    .wb-stcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
    .wb-stc { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #2a3446; border-radius: 12px; background: #0b1019; cursor: grab; transition: border-color .12s, opacity .12s; }
    .wb-stc.drag { opacity: .45; } .wb-stc.over { border-color: #d4a84a; box-shadow: 0 0 0 1px #d4a84a inset; }
    .wb-stc-h { display: flex; gap: 6px; align-items: center; }
    .wb-stc-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #d4a84a; color: #1a1406; font-size: 12px; font-weight: 700; }
    .wb-stc-h select { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 8px; border: 1px solid #4a3f22; background: #15130d; color: #f3e3b5; font: inherit; font-size: 13px; font-weight: 600; }
    .wb-stc-x { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid #2a3446; background: transparent; color: #9fb0c6; cursor: pointer; } .wb-stc-x:hover { border-color: #b4555a; color: #ffb4b4; }
    .wb-stc-b.wl-card { cursor: grab; grid-template-columns: 40px 1fr; padding: 8px; gap: 4px 8px; background: #0e131c; }
    .wb-stc-b .wl-face { width: 40px; height: 40px; } .wb-stc-b .wl-sk { width: 26px; height: 26px; } .wb-stc-b .wl-tags { display: none; }
    .wb-stc-b .wl-info b { font-size: 13px; } .wb-stc-b .wl-info small { font-size: 11px; }
    .wb-stc-f { display: flex; justify-content: space-between; align-items: center; min-height: 22px; } .wb-stc-f em { font-style: normal; font-size: 11px; color: #b9a46a; }
    .wb-stc-mv { display: flex; gap: 4px; } .wb-stc-mv button { width: 26px; height: 22px; border-radius: 6px; border: 1px solid #2a3446; background: transparent; color: #9fb0c6; cursor: pointer; font-size: 10px; } .wb-stc-mv button:disabled { opacity: .3; cursor: default; }
    .wb-stc-add { align-items: center; justify-content: center; min-height: 118px; border-style: dashed; color: #9fb0c6; cursor: pointer; font: inherit; } .wb-stc-add b { font-size: 26px; line-height: 1; } .wb-stc-add span { font-size: 12.5px; }
    .wb-stc-add:hover, .wb-stc-add.on { border-color: #d4a84a; color: #f3e3b5; }
    .wb-stc-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid #4a3f22; border-radius: 12px; background: #13110c; } .wb-stc-pick > small { color: #b9a46a; font-size: 11.5px; }
    .wb-stc-pick .wb-grid { max-height: 30vh; } .wb-stc-tag { position: absolute; top: 6px; right: 8px; font-style: normal; font-size: 10.5px; color: #b9a46a; }
    .wb-pop.wb-share { width: min(720px, 100%); } /* 묶음 카드가 3장씩 들어가게 */
    .wb-stc-pick .wl-grid.wb-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 6px; }
    .wb-stc-pick .wl-card { grid-template-columns: 40px 1fr; padding: 8px; gap: 4px 8px; } .wb-stc-pick .wl-face { width: 40px; height: 40px; } .wb-stc-pick .wl-sk { display: block; width: 26px; height: 26px; }
    .wb-stc-pick .wl-tags { display: none; } .wb-stc-pick .wl-info b { font-size: 13px; } .wb-stc-pick .wl-info small { font-size: 11px; }
    .wb-stc-pick .wl-card:hover { border-color: #d4a84a; }
    .wb-stc-tag { position: static; grid-column: 2; font-size: 10.5px; }
    /* 여러 빌드 묶어서 — 한 줄형 (2026-10-15, 카드는 이름이 잘려서) */
    .wb-sls { display: flex; flex-direction: column; gap: 5px; }
    .wb-sl { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #2a3446; border-radius: 10px; background: #0b1019; color: #e6edf3; font: inherit; text-align: left; width: 100%; box-sizing: border-box; }
    .wb-sl[draggable] { cursor: grab; } .wb-sl.drag { opacity: .45; } .wb-sl.over { border-color: #d4a84a; box-shadow: 0 0 0 1px #d4a84a inset; }
    .wb-sl-grip { color: #5d6b80; font-size: 15px; cursor: grab; flex: none; }
    .wb-sl select { flex: none; width: 92px; padding: 4px 6px; border-radius: 8px; border: 1px solid #4a3f22; background: #15130d; color: #f3e3b5; font: inherit; font-size: 13px; font-weight: 600; }
    .wb-sl-face { flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #111826; border: 1px solid #2a3446; } .wb-sl-face img { width: 100%; height: 100%; object-fit: cover; }
    .wb-sl-sk { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid #3a3020; }
    .wb-sl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .wb-sl-info b { font-size: 13px; overflow-wrap: anywhere; } .wb-sl-info small { color: #8b95a7; font-size: 11.5px; } .wb-sl-info em { font-style: normal; color: #b9a46a; }
    .wb-sl-mv { flex: none; display: flex; gap: 3px; } .wb-sl-mv button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #2a3446; background: transparent; color: #9fb0c6; cursor: pointer; font-size: 9px; } .wb-sl-mv button:disabled { opacity: .3; cursor: default; }
    .wb-sl.pick { cursor: pointer; } .wb-sl.pick:hover { border-color: #d4a84a; background: #15130d; } .wb-sl-plus { flex: none; color: #d4a84a; font-size: 12px; font-weight: 600; }
    .wb-sl-add { padding: 8px; border: 1px dashed #4a3f22; border-radius: 10px; background: transparent; color: #b9a46a; font: inherit; font-size: 13px; cursor: pointer; } .wb-sl-add:hover, .wb-sl-add.on { border-color: #d4a84a; color: #f3e3b5; }
    .wb-stc-pick .wb-sls { max-height: 32vh; overflow-y: auto; }
    @media (max-width: 520px) { .wb-sl { flex-wrap: wrap; } .wb-sl-info { flex-basis: calc(100% - 80px); order: 5; } .wb-sl.pick .wb-sl-info { order: 0; flex-basis: auto; } }
    .wb-field .wb-sl-info b { width: auto; flex: initial; color: #e6edf3; font-size: 13px; } /* .wb-field b(라벨 64px) 가 이름에 걸리지 않게 */
    @media (max-width: 520px) { .wb-sl-info { flex-basis: 100%; } }
    @media (max-width: 520px) { .wb-sl:not(.pick) .wb-sl-face { display: none; } .wb-sl select { width: 80px; } .wb-sl { gap: 6px; } }
    /* /tli/slate 단독 화면 — 틀(frame.css)·석판 칸(builder2.css 의 wsb-·wg-) 위에 페이지 배치만 */
    .sp-body #slateApp { width: min(var(--page-w, 1320px), calc(100% - 32px)); margin: 16px auto 32px; }
    .sp-body #slateApp .gbm { width: 100%; height: auto; }
    .sp-loading { color: #7d8794; padding: 40px; text-align: center; }
    .wsp .gbm-x { text-decoration: none; }
    .sp-main { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
    .sp-main .wsb-split { flex: none; }
    .sp-fxbox { gap: 2px; }
    .sp-fx { display: flex; gap: 10px; align-items: baseline; padding: 5px 2px; border-bottom: 1px solid #161d2a; font-size: 12.5px; color: #c9d1d9; line-height: 1.5; }
    .sp-fx:last-child { border-bottom: 0; }
    .sp-fx span { flex: 1; min-width: 0; }
    .sp-fx em { font-style: normal; color: #ffd98a; font-size: 11.5px; white-space: nowrap; }
    .sp-fx em small { color: #6e7a88; font-size: 10.5px; margin-left: 4px; }
    @media (max-width: 760px) { .sp-main { padding: 12px; } .sp-fx { flex-direction: column; gap: 0; } .sp-fx em { white-space: normal; } }
    /* 소켓 옵션 목록 — 빌더 2 는 고정 높이 상자 안이라 저절로 잘렸지만 여기선 페이지가 끝없이 늘어난다 → 목록만 스크롤 */
    .sp-body #wsbSockList { max-height: min(52vh, 460px); flex: none; }
    .sp-body .wg-vright { align-self: start; }