/* ─────────────────────────────────────────────────────────────────────
   ★ 2026-10-08 쪽지 패널(V2 셸 전용) - 시안 PBALL1 Messages.dc.html 3a~3l · design.md 「쪽지 패널」.
   데스크톱 = 헤더 ✉ 아래 오른쪽 패널(폭 400 · 최대 640, 딤 없음) / 휴대폰(≤760) = 바텀시트(위 반경 16 · 버튼 44).
   그림자로 층을 나누지 않는다(design.md). 그리는 건 pb-note.js.
   ───────────────────────────────────────────────────────────────────── */
.pbn { --bh:40px; --th:32px; --rh:48px; box-sizing:border-box;
    position:fixed; top:calc(var(--pb-head, 56px) + 8px); right:16px; width:400px; max-height:min(640px, calc(100vh - var(--pb-head, 56px) - 24px));
    z-index:9150; display:flex; flex-direction:column; overflow:hidden; border-radius:12px; background:#121417; border:1px solid #2e3339;
    color:#e6e8ea; font-family:'Pretendard Variable', Pretendard, system-ui, sans-serif; font-size:13px; -webkit-font-smoothing:antialiased; }
.pbn[hidden], .pbn-back[hidden] { display:none !important; }
.pbn *, .pbn *::before, .pbn *::after { box-sizing:border-box; }
.pbn button, .pbn input, .pbn textarea { font-family:inherit; }
.pbn input::placeholder, .pbn textarea::placeholder { color:#6d737a; }
.pbn .num { font-family:var(--pb-mono, 'Space Grotesk', sans-serif); }
.pbn-back { position:fixed; inset:0; z-index:9290; background:rgba(0,0,0,.55); display:none; }
.pbn-grip { display:none; align-self:center; width:36px; height:4px; border-radius:2px; background:#3a3f46; margin-top:8px; flex:none; }
body.pb-shell #pbNoteBtn.pbn-on { background:#23272d; border-color:#8d939a; }

/* 머리줄 - 「쪽지」 + 탭 2칸 + 닫기 */
.pbn-head { flex:none; display:flex; align-items:center; gap:10px; padding:12px 12px 10px 16px; border-bottom:1px solid #23272c; }
.pbn-title { font-size:15px; font-weight:800; }
.pbn-seg { display:flex; gap:2px; padding:3px; border-radius:9px; background:#0f1113; border:1px solid #23272c; }
.pbn-seg button { height:var(--th); padding:0 12px; border:none; border-radius:7px; background:transparent; color:#9aa0a7; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
.pbn-seg button.on { background:#2a2e34; color:#e6e8ea; }
.pbn-seg button .num { font-size:12px; color:#6d737a; }
.pbn-seg button .num.has { color:#8fb3ff; }
.pbn-x { margin-left:auto; width:var(--bh); height:var(--bh); border:none; border-radius:8px; background:transparent; color:#8d939a; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pbn-x:hover { background:#1f2328; color:#e6e8ea; }
.pbn-x i { font-size:18px; }

/* 몸통 */
.pbn-body { flex:1; min-height:0; overflow-y:auto; padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:#2e3339 transparent; }
.pbn-body::-webkit-scrollbar, .pbn-text::-webkit-scrollbar { width:6px; }
.pbn-body::-webkit-scrollbar-thumb, .pbn-text::-webkit-scrollbar-thumb { background:#2e3339; border-radius:3px; }
.pbn-cap { font-size:12px; color:#8d939a; text-align:center; }
.pbn-lbl { font-size:12px; font-weight:600; color:#b9bec4; }
.pbn-sub { font-size:11.5px; color:#8d939a; padding:2px 2px 0; }

/* 버튼 */
.pbn-btn { flex:1; height:var(--bh); padding:0 14px; border-radius:8px; border:1px solid #3a3f46; background:transparent; color:#e6e8ea; font-size:14px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; white-space:nowrap; }
.pbn-btn.pri { background:#e6e8ea; border-color:#e6e8ea; color:#0c0d0f; }
.pbn-btn.fit { flex:none; }
.pbn-btn:disabled { opacity:.4; cursor:default; }
.pbn-btn:not(.pri):not(:disabled):hover { background:#1b1f24; }
.pbn-sm { flex:none; height:30px; padding:0 10px; border-radius:7px; border:1px solid #3a3f46; background:transparent; color:#e6e8ea; font-size:12.5px; font-weight:700;
    display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap; }
.pbn-sm i { font-size:14px; }
.pbn-sm:hover { background:#1b1f24; }
.pbn button:focus-visible, .pbn-row:focus-visible { outline:2px solid #8fb3ff; outline-offset:1px; }
.pbn input:focus, .pbn textarea:focus { outline:none; } /* 입력칸은 바깥 테두리가 밝아지는 것으로(아래 :focus-within) */

/* 배지 - 쪽지 종류 · 관계 */
.pbn-bdg { flex:none; height:20px; padding:0 7px; border-radius:5px; border:1px solid #2e3339; background:#1f2328; color:#b9bec4; font-size:11.5px; font-weight:700; display:flex; align-items:center; white-space:nowrap; }
.pbn-bdg.sm { height:18px; padding:0 6px; border-radius:4px; font-size:11px; }
.pbn-bdg.amber { color:#e0a53a; background:#2a2010; border-color:#6b5220; }
.pbn-bdg.blue { color:#8fb3ff; background:#121a24; border-color:#2b4466; }
.pbn-bdg.green { color:#5fd49a; background:#13301f; border-color:#2f6b4a; }

/* 받은 쪽지 카드 */
.pbn-card { display:flex; flex-direction:column; gap:12px; padding:14px; border-radius:10px; background:#181b20; border:1px solid #23272c; }
.pbn-meta { display:flex; align-items:center; gap:8px; min-width:0; }
.pbn-from { font-size:14px; font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbn-time { font-size:12px; color:#8d939a; flex:none; }
.pbn-reply { margin-left:auto; flex:none; border:none; background:transparent; font-size:12.5px; color:#b9bec4; display:flex; align-items:center; gap:4px; cursor:pointer; padding:4px 0; }
.pbn-reply:hover { color:#e6e8ea; }
.pbn-reply i { font-size:14px; }
.pbn-text { max-height:180px; overflow-y:auto; font-size:14px; line-height:1.6; color:#e6e8ea; white-space:pre-wrap; word-break:break-word; text-wrap:pretty; }
.pbn-tlink { border:none; background:none; padding:0; font:inherit; font-weight:700; color:#8fb3ff; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.pbn-tlink:hover { color:#b5ccff; }
.pbn-acts { display:flex; gap:8px; flex-wrap:wrap; }
.pbn-acts .pbn-hint { flex:1 1 100%; font-size:12px; color:#8d939a; }
.pbn-grid { display:grid; grid-template-columns:62px 1fr; row-gap:6px; column-gap:8px; padding:10px 12px; border-radius:8px; background:#0f1113; border:1px solid #23272c; font-size:12.5px; }
.pbn-grid > .k { color:#8d939a; }
.pbn-grid > .v.dim { color:#b9bec4; }
.pbn-slot { display:inline-flex; width:18px; height:18px; border-radius:4px; background:#2a2010; border:1px solid #6b5220; color:#e0a53a; font-size:11px; font-weight:700;
    align-items:center; justify-content:center; margin-right:5px; vertical-align:-3px; }

/* ★ 10-09 받은 설정을 넣을 프리셋 칸 고르기(섯다 시안 3g) - 2열 · 번호 칸 · 사용 중 칸 막힘 */
.pbn-pick { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:8px; background:#121a24; border:1px solid #2b4466; }
.pbn-pick .pbn-hint { font-size:12.5px; color:#b9cfff; line-height:1.5; }
.pbn-pgrid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.pbn-pslot { height:var(--bh); min-width:0; padding:0 10px; border-radius:8px; border:1px solid #3a3f46; background:transparent; color:#e6e8ea;
    font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px; cursor:pointer; }
.pbn-pslot:not(:disabled):hover { background:#1b1f24; }
.pbn-pslot.empty { color:#8d939a; }
.pbn-pslot:disabled { opacity:.4; cursor:not-allowed; border-color:#23272c; }
.pbn-pslot .no { flex:none; width:20px; height:20px; border-radius:5px; border:1px solid #4a3a1c; color:#d7ad5c; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; }
.pbn-pslot .nm { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbn-pslot .use { margin-left:auto; flex:none; font-size:11px; color:#5fd49a; }
.pbn-pcancel { align-self:flex-end; color:#b9bec4; font-weight:600; }
/* ★ 10-13 받기 - 시뮬 화면에 지금 열린 칸(막힘 · 사용중과 같은 자리에 표시) */
.pbn-pslot .use.sim { color:#8fb3ff; }
/* ★ 10-13 보내기 - 보낼 프리셋 칸 고르기(받기 칸 고르기와 같은 모양 · 고른 칸 = 금색 테두리) */
.pbn-send-pick { display:flex; flex-direction:column; gap:6px; }
.pbn-send-pick .pbn-pslot.on { border-color:#e0a53a; background:#2a2010; }
.pbn-send-pick .pbn-pslot.on .nm { color:#f3d9a4; }

/* 상태 - 비어 있음 · 로딩 · 검색 결과 없음 */
.pbn-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 10px; color:#8d939a; }
.pbn-empty > i { font-size:28px; color:#4d5359; }
.pbn-empty > span { font-size:14px; color:#b9bec4; }
.pbn-sk { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:10px; background:#181b20; animation:pbnSk 1.2s ease-in-out infinite; }
.pbn-sk > span { height:12px; border-radius:4px; background:#262a30; }
.pbn-sk > span.b { height:var(--bh); border-radius:8px; background:#20242a; margin-top:6px; }
@keyframes pbnSk { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes pbnSpin { to { transform:rotate(360deg); } }

/* 받는 사람 - 검색칸 · 목록 · 칩 */
.pbn-to { display:flex; flex-direction:column; gap:8px; }
.pbn-search { height:var(--bh); display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:8px; background:#0f1113; border:1px solid #3a3f46; }
.pbn-search > i { font-size:16px; color:#8d939a; }
.pbn-search input { flex:1; min-width:0; height:100%; border:none; background:transparent; color:#e6e8ea; font-size:14px; outline:none; }
.pbn-list { display:flex; flex-direction:column; border-radius:10px; border:1px solid #23272c; overflow:hidden; }
.pbn-row { min-height:var(--rh); display:flex; align-items:center; gap:10px; padding:6px 12px; border-top:1px solid #23272c; cursor:pointer; }
.pbn-row:first-child { border-top-color:transparent; }
.pbn-row:hover { background:#1b1f24; }
.pbn-dot { width:8px; height:8px; border-radius:50%; flex:none; background:#3a3f46; }
.pbn-dot.on { background:#2fa36b; }
.pbn-who { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pbn-who b { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbn-who small { font-size:12px; color:#8d939a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pbn-none { padding:22px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#8d939a; }
.pbn-none > i { font-size:24px; color:#4d5359; }
.pbn-none > span { font-size:13.5px; color:#b9bec4; }
.pbn-chip { align-self:flex-start; max-width:100%; height:var(--bh); padding:0 6px 0 12px; border-radius:8px; background:#20242a; border:1px solid #3a3f46; display:flex; align-items:center; gap:6px; font-size:14px; }
.pbn-chip .to { color:#8d939a; }
.pbn-chip b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbn-chip button { width:28px; height:28px; border:none; border-radius:6px; background:transparent; color:#8d939a; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.pbn-chip button:hover { background:#2a2e34; color:#e6e8ea; }
.pbn-chip button i { font-size:15px; }

/* 보내기 - 방식 탭 · 잠금 안내 · 입력 */
.pbn-modes { display:flex; gap:2px; padding:3px; border-radius:9px; background:#0f1113; border:1px solid #23272c; }
.pbn-modes button { flex:1; height:var(--th); border:none; border-radius:7px; background:transparent; color:#9aa0a7; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; white-space:nowrap; }
.pbn-modes button i { font-size:15px; }
.pbn-modes button.on { background:#2a2e34; color:#e6e8ea; }
.pbn-modes button.lock { opacity:.35; cursor:default; }
.pbn-lock { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background:#1b1f24; border:1px solid #2e3339; font-size:12.5px; color:#b9bec4; }
.pbn-lock > i { font-size:15px; color:#8d939a; flex:none; }
.pbn-lock > span { flex:1; line-height:1.45; }
.pbn-ta { display:flex; flex-direction:column; gap:6px; }
.pbn-ta textarea { height:120px; resize:none; padding:10px 12px; border-radius:8px; background:#0f1113; border:1px solid #2e3339; color:#e6e8ea; font-size:14px; line-height:1.55; outline:none; }
.pbn-ta textarea:focus, .pbn-amt:focus-within, .pbn-search:focus-within { border-color:#8d939a; }
.pbn-cnt { align-self:flex-end; font-size:11.5px; color:#8d939a; }
.pbn-amt { height:var(--bh); display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:8px; background:#0f1113; border:1px solid #2e3339; }
.pbn-amt.bad { border-color:#a8463d; }
.pbn-amt input { flex:1; min-width:0; height:100%; border:none; background:transparent; color:#e6e8ea; font-family:var(--pb-mono, 'Space Grotesk', sans-serif); font-size:16px; outline:none; }
.pbn-amt .u { font-size:12px; color:#8d939a; }
.pbn-chips { display:flex; gap:6px; }
.pbn-chips button { flex:1; height:34px; border-radius:7px; border:1px solid #2e3339; background:transparent; color:#e6e8ea; font-family:var(--pb-mono, 'Space Grotesk', sans-serif); font-size:12.5px; cursor:pointer; }
.pbn-chips button.on { border-color:#8d939a; background:#23272d; }
.pbn-gh { font-size:11.5px; color:#8d939a; line-height:1.5; }
.pbn-send { height:var(--bh); border:none; border-radius:8px; background:#e6e8ea; color:#0c0d0f; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.pbn-send:disabled { opacity:.7; cursor:default; }
.pbn-send i { font-size:16px; animation:pbnSpin .9s linear infinite; }

/* 결과 한 줄 */
.pbn-res { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; font-size:13px; line-height:1.45; background:#11241a; border:1px solid #2f6b4a; color:#5fd49a; }
.pbn-res.fail { background:#221312; border-color:#5c2a25; color:#f08a7f; }
.pbn-res > i { font-size:16px; flex:none; }

/* 휴대폰 - 바텀시트 */
@media (max-width:760px) {
    .pbn { --bh:44px; --th:38px; --rh:52px;
        top:auto; right:0; left:0; bottom:0; width:auto; max-height:min(720px, calc(100vh - 40px)); max-height:min(720px, calc(100dvh - 40px));
        border-radius:16px 16px 0 0; border-bottom:none; z-index:9300; padding-bottom:env(safe-area-inset-bottom); }
    .pbn-grip { display:block; }
    .pbn-back.on { display:block; }
}
@media (prefers-reduced-motion: reduce) { .pbn-sk, .pbn-send i { animation:none; } }

/* ★ 2026-10-15 목록형 쪽지함(Lewis 「삭제를 하지 않으면 다음 메시지를 읽지 못함」 → 「승인」) - 최신순 · 안 읽음 = 점 + 굵게 · 누르면 카드 · 「◀ 목록」 */
.pbn-list { display:flex; flex-direction:column; border:1px solid #23272c; border-radius:10px; overflow:hidden; background:#15181c; max-height:420px; overflow-y:auto; scrollbar-width:thin; }
.pbn-item { position:relative; display:flex; flex-direction:column; gap:4px; width:100%; padding:10px 12px 10px 22px; border:none; border-top:1px solid #23272c; background:transparent; color:#b9bec4; text-align:left; cursor:pointer; font:inherit; }
.pbn-item:first-child { border-top:none; }
.pbn-item:hover { background:#1b1f24; }
.pbn-item .dot { position:absolute; left:9px; top:16px; width:7px; height:7px; border-radius:50%; background:transparent; }
.pbn-item.unread .dot { background:#4f8ff7; }
.pbn-item .top { display:flex; align-items:center; gap:7px; min-width:0; }
.pbn-item .who { font-size:13px; font-weight:600; color:#cfd3d8; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbn-item.unread .who { font-weight:800; color:#e6e8ea; }
.pbn-item .tm { margin-left:auto; flex:none; font-size:11.5px; color:#8d939a; }
.pbn-item .pv { font-size:12.5px; color:#8d939a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbn-item.unread .pv { color:#cfd3d8; }
.pbn-backlist { align-self:flex-start; display:inline-flex; align-items:center; gap:2px; height:28px; padding:0 10px 0 6px; border:1px solid #2e3339; border-radius:7px; background:#1f2328; color:#cfd3d8; font-size:12.5px; font-weight:700; cursor:pointer; margin-bottom:8px; }
.pbn-backlist:hover { background:#262b31; }