/* ============================================================
   byeol — 프로젝트 스타일 (byeol-design/web/app.css 이관)
   슬라이스별 추가형: Slice0=토큰+셸+홈+원자 / Slice2=룸·합방·후원 / Slice3=커뮤니티·마이
   아이콘 = iconify-icon (lucide), 크기=font-size (common-mistakes §9)
   ============================================================ */

/* ── 디자인 토큰 (테넌트 테마 소스 = 화이트라벨 교체 지점) ── */
:root{
  --bg-base:#0E0B1A; --bg-surface:#1A1630; --bg-elevated:#241F3D; --border:#2E2A4D;
  --accent:#7C5CFF; --accent-soft:#2A2150; --live:#FF3D71; --gold:#FFC44D; --success:#2ED477;
  --text-primary:#FFFFFF; --text-secondary:#ADA7CC; --text-muted:#6E688C; --on-accent:#FFFFFF;
  /* 🔑 액센트 파생 변형 — 값이 토큰과 달라도 **액센트에서 나온 색**이라 토큰이어야 한다.
     하드코딩으로 두면 팔레트를 바꿔도 이것들만 옛 색으로 남는다(프로토에서 실측한 함정). */
  --accent-deep:#6A40FF;   /* 그라디언트 짝(진한 쪽) */
  --accent-lite:#9B6BFF;   /* 그라디언트 짝(옅은 쪽) */
  --accent-pale:#C9B8FF;   /* 어두운 배경 위 강조 텍스트 */
  --accent-dim:#3A2566;    /* accent-soft 의 그라디언트 짝 */
  --gold-lite:#FFD98A;     /* 후원 금액 */
  --text-bright:#EDEAF6;   /* 채팅 본문(살짝 보라 기운의 흰색) */
  --text-faint:#9D97B8;    /* 플레이스홀더 */
  --label-soft:#CFC7EC;    /* 지갑 라벨 */
  /* 🌌 글래스 — 별자리 배경 위에 얹는 표면.
     ⚠️ 알파만 낮추면 안 된다. blur 가 크면 움직이는 별점이 뭉개져 **정지한 안개**가 된다.
        무빙이 언듯언듯 보이려면 blur 를 함께 낮춘다(실측: 알파 .52/blur18 → .34/blur9 로
        통과 밝기변화 +62%). 가독성은 카드를 불투명하게 만드는 대신 글자 그림자로 받친다. */
  --glass-bg:rgba(20,16,40,.42);
  --glass-blur:10px;
  --glass-border:rgba(255,255,255,.11);
  --glass-hi:rgba(255,255,255,.06);
  /* 🔴 NSKit 레이아웃 토큰 override — 프레임워크 기본이 **밝은 색**이다
     (--nskit-page-bg #FAFAFA · --nskit-dialog-bg #FFFFFF · --nskit-page-header-bg #FFFFFF).
     다크 전용 앱에서 그대로 두면 PAGE 슬라이드-인 중 흰 배경이 스친다(실측: rgb(250,250,250)).
     각 화면이 자기 배경을 칠해 가려왔을 뿐, 전환 순간과 여백에서는 드러난다. */
  --nskit-page-bg:var(--bg-base);
  --nskit-page-header-bg:var(--bg-surface);
  --nskit-dialog-bg:var(--bg-surface);
  /* 🔴 프레임워크는 **색 토큰 전부**를 라이트 기본값으로 깐다. 배경 3개만 덮고 나머지를
     비워두면 다크 테마 위에 라이트 값이 그대로 그려진다 — 실기기(iPhone) 에서
     서브페이지 헤더 하단에 zinc-200(#E4E4E7) 밝은 선이 보였다.
     오늘 다이얼로그 글자를 조각조각 고친 것도 뿌리는 여기(--nskit-text-primary=#18181B)다.
     ⚠️ 배경만 덮고 선·글자를 안 덮는 게 이 계열의 전형이다. 색은 세트로 덮는다. */
  --nskit-border-color:var(--border);
  --nskit-border-hover:var(--border);
  --nskit-bg-hover:var(--bg-elevated);
  --nskit-text-primary:var(--text-primary);
  --nskit-text-secondary:var(--text-secondary);
  --nskit-primary:var(--accent);
  --nskit-primary-hover:var(--accent-deep);
  --nskit-danger:var(--live);
  --nskit-success:var(--success);
  --nav-shadow:0 -2px 24px rgba(0,0,0,.45);
  /* safe-area (viewport-fit=cover): iOS=env / Android=네이티브 주입 --safe-area-*(WebView env 불안정 대비) 중 max. 폴백 0=비-노치 과패딩 없음. */
  --safe-top:max(env(safe-area-inset-top,0px), var(--safe-area-top,0px));
  --safe-bot:max(env(safe-area-inset-bottom,0px), var(--safe-area-bottom,0px));
  /* GNB(.nav) 치수 — 씬 하단여백 계산의 단일 출처 */
  --gnb-pt:10px; --gnb-pb:20px; --gnb-btn:62px;
  --gnb-h:calc(var(--gnb-pt) + var(--gnb-btn) + var(--gnb-pb) + var(--safe-bot));   /* 실측 92px + safe-bot */
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
}
/* ── 전역 ── */
*{-webkit-tap-highlight-color:transparent;}
iconify-icon{display:inline-block;vertical-align:-0.125em;}
body{font-family:'Pretendard','Spoqa Han Sans Neo',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary);}
a{text-decoration:none;color:inherit;}
/* NSKit 셸(#content)=풀뷰포트. 양옆 검은 거터 + 430 캡 중앙 정렬 */
#content{background:#000;}

/* ── 앱 셸 (데모 .app → .by-shell) ── */
.by-shell{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;max-width:430px;margin:0 auto;
  background:var(--bg-base);display:flex;flex-direction:column;overflow:hidden;transition:background .25s;}
/* 🌌 별자리 배경 — 셸 바닥. UI 는 전부 그 위(z-index ≥ 1). */
#by-sky{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;}
/* 상·하단을 눌러 UI 가독성을 확보한다. 배경을 지우는 게 아니라 눌러주는 것. */
#by-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(14,11,26,.72) 0%, rgba(14,11,26,0) 55%),
             radial-gradient(120% 60% at 50% 100%, rgba(14,11,26,.86) 0%, rgba(14,11,26,0) 55%);}
.by-shell.no-sky #by-sky, .by-shell.no-sky #by-veil{display:none;}

.by-main{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:1;}

/* 🌌 글래스 유틸 — **하늘이 뒤에 있는 표면에만** 쓴다.
   PAGE/DIALOG/PANEL 안쪽은 배경을 덮으므로 대상이 아니다(뒤가 없으면 유리가 아니라 그냥 반투명). */
.by-glass{background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.25);
  border:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(0,0,0,.34), inset 0 1px 0 var(--glass-hi);}
/* 알파를 낮추면 글자가 배경 별과 겹쳐 흔들린다 → 글자에만 그림자. */
#scene-area, .nav{text-shadow:0 1px 3px rgba(6,4,14,.72);}
#scene-area{width:100%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
/* GNB(.nav absolute bottom)가 씬 위에 떠 있음 → 스크롤 씬 최하단이 가려지지 않게 nav 높이(≈버튼56+상하패딩30)+safe-bot 만큼 하단 여유.
   풀스크린 몰입 씬(방송/룸/합방)은 GNB 숨기므로 제외. (2026-07-22) */
body:not([data-active-scene="broadcast"]):not([data-active-scene="room"]):not([data-active-scene="hapbang"]) #scene-area > *{padding-bottom:calc(var(--gnb-h) + 16px);}
#scene-area::-webkit-scrollbar{width:0;height:0;display:none;}
/* 각 scene 루트: 자연 흐름(부모가 스크롤), 하단 nav 가림 방지 패딩 */
/* ⚠️ 하단여백을 여기서 주지 않는다 — 래퍼(#scene-area > *)가 소유한다. 겹치면 죽은 여백이 쌓인다(§65). */
.by-scene{display:flex;flex-direction:column;gap:22px;padding:2px 0 0;min-height:100%;}

/* ── 상단바 (홈/커뮤니티/마이 공용, PART 후보) ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + var(--safe-top)) 20px 10px;}
.topbar.bd{border-bottom:1px solid var(--border);padding-bottom:12px;}
.logo{display:flex;align-items:center;gap:6px;}
.logo .spark{display:flex;align-items:center;}
.logo .spark iconify-icon{font-size:23px;}
.logo .spark .by-mark{width:27px;height:27px;filter:drop-shadow(0 0 4px rgba(255,120,205,.9)) drop-shadow(0 0 9px rgba(255,90,190,.5));}
.logo .wm{font-size:24px;font-weight:800;letter-spacing:-.5px;}

/* ── byeol 브랜드 아이콘 시스템 (2026-07-22) ──
   앱 마크(별+응원봉 라이트스틱, 무배경) = .by-mark(img) / 별=캐시·응원봉=키블 화폐 아이콘 = .by-ico(currentColor 마스크로 색 유연) */
.by-mark{display:inline-block;object-fit:contain;vertical-align:middle;}
/* 별(빛나는 전구)·응원봉(매트 라이트스틱) = 컬러 SVG(글로우 포함) → background-image. 글로우 여백 감안 1.35em, 음수 마진으로 레이아웃 영향 최소화 */
.by-ico{display:inline-block;width:1.35em;height:1.35em;flex:none;background:center/contain no-repeat;vertical-align:-.42em;margin:-.18em -.14em;}
.by-ico-star{background-image:url(/assets/icons/byeol-star.svg);background-size:78% auto;}
.by-ico-cheer{background-image:url(/assets/icons/byeol-cheer.svg);}
.tt{font-size:19px;font-weight:800;}
.topicons{display:flex;align-items:center;gap:15px;}
.topicons iconify-icon{font-size:22px;color:var(--text-primary);cursor:pointer;}
/* ── 좌우 패딩 유틸 ── */
.px{padding-left:16px;padding-right:16px;}

/* ── 카테고리 칩 ── */
.chips{display:flex;flex-shrink:0;gap:8px;overflow-x:auto;padding:2px 16px;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:none;display:flex;align-items:center;gap:5px;padding:8px 15px;border-radius:18px;background:var(--bg-surface);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--accent);color:var(--on-accent);font-weight:700;}
.chip.hap{background:var(--accent-soft);color:var(--gold);font-weight:700;}
.chip.hap iconify-icon{font-size:14px;}

/* ── 배지·원자 ── */
.badge-live{display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:8px;background:var(--live);color:var(--text-primary);font-size:11px;font-weight:800;}
.badge-live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill-view{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:8px;background:rgba(14,11,26,.55);color:var(--text-primary);font-size:12px;font-weight:700;}
.pill-view iconify-icon{font-size:13px;}
.badge-hap{display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:var(--gold);color:var(--bg-base);font-size:9px;font-weight:800;}
.badge-hap iconify-icon{font-size:11px;}
.tag{padding:3px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;}
.av{width:24px;height:24px;border-radius:50%;background:var(--accent);flex:none;background-size:cover;background-position:center;}
.av.gold{background:var(--gold);}
/* ✧ 별자리 아우터 — 아바타 바깥으로 넘치게 그린다(얼굴은 안 가린다). */
.av{position:relative;overflow:visible;}
.av canvas.zr{position:absolute;inset:-30%;width:160%;height:160%;pointer-events:none;}
.av.sm{width:18px;height:18px;}
.av.lg{width:56px;height:56px;}
.av.xl{width:72px;height:72px;}

/* ── 대형 배너 ── */
.feat{position:relative;height:216px;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background-size:cover;background-position:center;background-color:var(--bg-elevated);}
.feat-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;padding:12px;}
.feat-info{position:relative;z-index:2;padding:26px 12px 13px;background:linear-gradient(180deg,transparent,rgba(10,8,20,.88) 60%);}
.feat-title{font-size:15px;font-weight:700;color:var(--text-primary);}
.feat-bj{display:flex;align-items:center;gap:8px;margin-top:7px;}
.feat-bj .nm{font-size:13px;font-weight:600;color:#E4E0F0;}

/* ── 섹션 + 카드 ── */
.sec{display:flex;flex-direction:column;gap:12px;}
.sec-head{display:flex;justify-content:space-between;align-items:center;}
.sec-head .t{font-size:16px;font-weight:700;}
.sec-head .more{font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:2px;}
.sec-head .more iconify-icon{font-size:14px;}
.hrow{display:flex;flex-shrink:0;gap:12px;overflow-x:auto;padding:0 16px 2px;}
.hrow::-webkit-scrollbar{display:none;}
.hcard{flex:none;width:154px;display:flex;flex-direction:column;gap:8px;cursor:pointer;}
.hcard.wide{width:230px;}
.thumb{position:relative;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:var(--bg-elevated);}
.thumb.h100{height:100px;}.thumb.h130{height:130px;}.thumb.h116{height:116px;}
.thumb .ov{position:absolute;inset:0;display:flex;gap:5px;align-items:flex-start;padding:8px;}
.thumb .badge-live{padding:3px 7px;font-size:9px;gap:4px;}
.thumb .badge-live .dot{width:5px;height:5px;}
.thumb .vc{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:3px;padding:2px 7px;border-radius:6px;background:rgba(10,8,20,.6);color:var(--text-primary);font-size:10px;font-weight:700;}
.thumb .vc iconify-icon{font-size:11px;}
.card-info{display:flex;flex-direction:column;gap:4px;}
.card-title{font-size:13px;font-weight:600;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card-bj{display:flex;align-items:center;gap:6px;}
.card-bj .nm{font-size:11px;font-weight:500;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;}
.card{display:flex;flex-direction:column;gap:8px;cursor:pointer;}

/* ── 하단 nav (셸 고정, 데모 .nav/.pill/.tab/.fab) ── */
/* GNB 높이는 **토큰 하나**가 정본이다. .nav 와 씬 하단여백이 같은 값을 봐야
   한쪽만 바뀌어 어긋나는 일이 없다(그 어긋남이 §65 의 뿌리였다). */
.nav{position:absolute;left:0;right:0;bottom:0;padding:var(--gnb-pt) 18px calc(var(--gnb-pb) + var(--safe-bot));z-index:20;}
/* 풀스크린 몰입 씬(방송 송출·라이브 시청·합방)에서는 하단 GNB 숨김 — 방송 컨트롤(.b-ctrl)이 대체.
   .bcast/.room 은 z:30 fixed 지만 .nav 가 다른 stacking context 라 뚫고 나옴 → data-active-scene 로 제어. (2026-07-22) */
body[data-active-scene="broadcast"] .nav,
body[data-active-scene="room"] .nav,
body[data-active-scene="hapbang"] .nav{display:none!important;}
.pill{display:flex;align-items:center;gap:4px;height:62px;padding:4px 10px;border-radius:36px;background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.25);backdrop-filter:blur(var(--glass-blur)) saturate(1.25);border:1px solid var(--glass-border);box-shadow:var(--nav-shadow);}
.tab{flex:1;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text-muted);}  /* align-self:stretch — pill(62px) 안에서 콘텐츠 높이(39px)만 차지해 터치타겟 미달이었다.
     .tab 은 배경이 없고 활성표시가 color 뿐이라(§43) 늘려도 보이는 모양은 그대로다. */
.tab iconify-icon{font-size:21px;}
.tab span{font-size:10px;font-weight:600;}
.tab.active{color:var(--accent);}.tab.active span{font-weight:700;}
.fab{width:56px;height:46px;border-radius:23px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;box-shadow:0 6px 18px rgba(124,92,255,.5);color:var(--on-accent);}
.fab iconify-icon{font-size:26px;color:var(--text-primary);}

/* ── 방송 시작 시트 옵션 (dialog-go-live 에서 재사용) ── */
.go-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:var(--bg-elevated);margin-bottom:11px;cursor:pointer;}
.go-opt .em{font-size:28px;flex:none;}
.go-opt .tx{display:flex;flex-direction:column;gap:2px;}
.go-opt .tx b{font-size:15px;font-weight:800;}
.go-opt .tx span{font-size:12px;color:var(--text-muted);}
.go-opt .go-ar{margin-left:auto;color:var(--text-muted);display:flex;}
.go-opt .go-ar iconify-icon{font-size:20px;}

/* ============================================================
   Slice 2 — 룸(라이브 시청) / 합방 / 후원 / 선물시트
   .room·.hap-room 은 scene-area 안에 주입되지만 position:fixed 로 셸 전체를
   덮고(하단 nav 위 z-index) 몰입 뷰. 430 캡 중앙.
   ============================================================ */
.room{position:fixed;inset:0;max-width:430px;margin:0 auto;background:#000;display:flex;flex-direction:column;overflow:hidden;z-index:30;}
.room-video{position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;background-color:#151022;}
.room-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,16,.72) 0%,transparent 22% 58%,rgba(8,6,16,.86) 100%);}
/* 배경 base 레이어(backdrop): 영상 밑(z0) · 채팅전용 PIP 시 노출(blur+dim). 평상시 영상이 덮음. */
.room-bg{position:absolute;inset:0;z-index:0;background:#151022 center/cover no-repeat;filter:blur(16px) brightness(.42);transform:scale(1.12);opacity:0;transition:opacity .3s ease;pointer-events:none;}
.room.chatmode .room-bg{opacity:1;}
/* 채팅 전용 모드(PIP): 영상→우상단 소형 박스, 채팅 확장, 배경 노출 */
.room.chatmode .room-video{inset:auto;top:calc(12px + var(--safe-top));right:12px;left:auto;bottom:auto;width:104px;height:168px;border-radius:14px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.55);border:1.5px solid rgba(255,255,255,.2);z-index:4;background-color:#000;cursor:pointer;transition:top .3s cubic-bezier(.2,.8,.3,1),right .3s,width .3s,height .3s,border-radius .3s;}
.room.chatmode .room-video::after{border-radius:14px;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.4));}
.room.chatmode .room-video video{border-radius:14px;}
.room.chatmode .room-l{background:linear-gradient(180deg,rgba(8,6,16,.12),rgba(8,6,16,.55) 45%);}
.room.chatmode .podium{display:none!important;}
/* 채팅전용 = 카톡형 좌우 버블 + 히스토리 스크롤(페이드 마스크 해제) */
.room.chatmode .chat{max-height:70vh;overflow-y:auto;-webkit-mask-image:none;mask-image:none;gap:10px;padding:8px 4px 2px;}
.room.chatmode .chat .msg .mc{max-width:76%;}
.room.chatmode .chat .msg .mt{margin:0 0 3px 3px;}
.room.chatmode .chat .msg .x{display:inline-block;background:rgba(36,31,61,.94);border:1px solid rgba(255,255,255,.07);color:var(--text-bright);padding:8px 12px;border-radius:3px 14px 14px 14px;box-shadow:0 1px 4px rgba(0,0,0,.25);}
/* 내 메시지 = 우측 액센트 버블(프사·이름 숨김) */
.room.chatmode .chat .msg.mine{flex-direction:row-reverse;}
.room.chatmode .chat .msg.mine .mav{display:none;}
.room.chatmode .chat .msg.mine .mt{display:none;}
.room.chatmode .chat .msg.mine .mc{align-items:flex-end;}
.room.chatmode .chat .msg.mine .x{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:transparent;color:var(--on-accent);border-radius:14px 3px 14px 14px;}
/* 후원=골드 버블, 시스템=가운데 */
.room.chatmode .chat .msg.dono .x{background:rgba(255,196,77,.16);border-color:rgba(255,196,77,.3);color:#FFE6B0;}
.room.chatmode .chat .msg.sys{align-self:center;}
/* 송출자 없음(방송 준비 중) 대기 오버레이 */
.room-wait{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;transition:opacity .4s;backdrop-filter:blur(3px);background:rgba(8,6,16,.35);}
.room-wait.gone{opacity:0;pointer-events:none;}
.room-wait .rw-av{width:88px;height:88px;border-radius:50%;background:var(--accent-soft) center/cover;box-shadow:0 0 0 3px rgba(255,255,255,.14);position:relative;}
.room-wait .rw-av::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(124,92,255,.6);animation:rwPulse 1.8s ease-out infinite;}
@keyframes rwPulse{0%{transform:scale(.96);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.room-wait .rw-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(14,11,26,.72);border:1px solid rgba(255,255,255,.12);padding:8px 15px;border-radius:30px;}
.room-wait .rw-dot{width:8px;height:8px;border-radius:50%;background:var(--live,var(--live));animation:rwBlink 1.1s ease-in-out infinite;}
.room-wait .rw-t{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px;}
.room-wait.idle{backdrop-filter:blur(6px);background:rgba(8,6,16,.55);}
.room-wait.idle .rw-dot{background:var(--gold,var(--gold));}
.room-wait.idle .rw-av::before{border-color:rgba(255,196,77,.5);}
@keyframes rwBlink{0%,100%{opacity:1}50%{opacity:.3}}
.room-l{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:calc(14px + var(--safe-top)) 12px calc(14px + var(--safe-bot));}
.room-top{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.r-back{color:var(--text-primary);display:flex;cursor:pointer;}
.r-back iconify-icon{font-size:26px;}
/* bj-chip: 이름/팔로워/팔로우 버튼이 세로로 뭉개지지 않게 nowrap + 이름은 ellipsis */
.bj-chip{display:flex;align-items:center;gap:8px;background:rgba(14,11,26,.5);padding:5px 10px 5px 5px;border-radius:30px;min-width:0;max-width:64%;}
.bj-chip .av{flex:0 0 auto;}
.bj-chip .bj-meta{min-width:0;overflow:hidden;display:flex;flex-direction:column;}
.bj-chip .nm{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bj-chip .fo{font-size:11px;color:var(--gold);font-weight:600;white-space:nowrap;}
.btn-follow{margin-left:2px;flex:0 0 auto;white-space:nowrap;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;padding:6px 13px;border-radius:20px;cursor:pointer;}
.room-top .right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.r-close{color:var(--text-primary);display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;opacity:.85;}  /* 히트영역 44 — 배경이 없어 보이는 크기는 아이콘 23px 그대로다(§43) */
.r-close iconify-icon{font-size:23px;}
/* 우측 세로 액션 레일 (공유·신고) — 상단 혼잡 해소, 하단바 위에 배치 */
.room-rail{position:absolute;right:12px;bottom:150px;display:flex;flex-direction:column;gap:12px;z-index:3;}
.rail-ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,16,40,.6);border:1px solid rgba(255,255,255,.12);color:var(--text-primary);cursor:pointer;backdrop-filter:blur(6px);}
.rail-ic iconify-icon{font-size:20px;}
.podium{display:flex;align-items:center;gap:8px;margin-top:12px;background:rgba(14,11,26,.42);padding:7px 11px;border-radius:14px;width:fit-content;}
.podium .lbl{font-size:11px;color:#E4E0F0;font-weight:600;display:flex;align-items:center;gap:4px;}
.podium .lbl iconify-icon{font-size:13px;color:var(--gold);}
.sup{display:flex;align-items:center;}
.sup .a{width:26px;height:26px;border-radius:50%;background-size:cover;border:2px solid;margin-left:-7px;background-position:center;background-color:var(--bg-elevated);}
.sup .a:first-child{margin-left:0;}
.sup .a.r1{border-color:var(--gold);}.sup .a.r2{border-color:#CBD5E1;}.sup .a.r3{border-color:#E58E5A;}
.room-spacer{flex:1;}
.chat{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;max-height:40vh;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 75%);mask-image:linear-gradient(180deg,transparent,#000 75%);}
/* 채팅 행 = 프사(mav) + [닉네임(u) · 메시지(x)] 세로묶음(mc). 표준 구조. */
.msg{font-size:13px;line-height:1.32;max-width:88%;display:flex;align-items:flex-start;gap:7px;transition:opacity 1.4s ease;}
/* 채팅은 사라지지 않는다 — 컨테이너 그라디언트 마스크로 상단만 자연 페이드(항상 표시).
   메시지 자체는 opacity 유지(과거 .mfade 완전소멸 제거) → 리뷰어가 언제든 롱프레스로 신고/차단 가능(1.2). */
.msg.mfade{opacity:1;}
/* 하트 탭이 채팅에 씹히지 않게: 채팅 컨테이너는 hit-test 통과(빈 영역·페이드 상단 탭 → 영상 하트),
   메시지만 hit(롱프레스 신고/차단 유지). 짧은 탭이 영상 하트로, 메시지 롱프레스는 모더레이션으로 분리. */
#byRoomChat{pointer-events:none;}
#byRoomChat .msg{pointer-events:auto;}

/* 🍎 iOS 롱프레스 텍스트 셀렉션/콜아웃 방지 — UI 텍스트는 선택 불가(롱프레스=신고/차단 시트). 입력창만 예외. */
body,.msg,.chat,.by-report,.dialog-login,.byl,[data-act],[data-b],.tab,.sec-label,.drow,button{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
input,textarea,[contenteditable="true"],[contenteditable=""]{
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
.msg .mav{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#2a2440 center/cover no-repeat;}
/* .mc: 아바타(26px) 높이 기준 — 텍스트 1줄이면 세로 중앙, 2줄+이면 위(첫줄)부터. */
.msg .mc{min-width:0;min-height:26px;display:flex;flex-direction:column;justify-content:center;}
.msg .mt{min-width:0;}
.msg .u{font-weight:700;color:var(--accent-pale);margin-right:5px;}
.msg .x{color:var(--text-bright);word-break:break-word;}
.msg .amt{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:var(--gold-lite);margin-left:5px;font-size:12px;}
.msg .amt iconify-icon{font-size:12px;}
/* 선물 = 차분하게: 큰 gradient 배너 제거, 같은 행 구조 유지 + 닉네임만 골드 강조 + 작은 별칩 */
.msg.dono{background:none;padding:0;border-radius:0;max-width:88%;}
.msg.dono .u{color:var(--gold-lite);}
.msg.dono .x{color:var(--text-bright);font-weight:500;}
.msg.sys{font-size:11px;color:#B9B4CC;background:rgba(14,11,26,.4);padding:5px 10px;border-radius:10px;align-self:flex-start;}
.room-bar{display:flex;align-items:center;gap:8px;margin-top:11px;box-sizing:border-box;width:100%;}
/* min-width:0 필수 — flex 아이템 기본 min-width:auto 라 input 이 안 줄어 하트·선물 버튼을 화면 밖으로 밀어냄 */
.chat-in{flex:1;min-width:0;box-sizing:border-box;display:flex;align-items:center;gap:8px;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:11px 16px;color:var(--text-faint);font-size:13px;}
.r-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.12);color:var(--text-primary);}
.r-ic iconify-icon{font-size:22px;}
.r-gift{background:linear-gradient(135deg,var(--accent),var(--live));border:none;box-shadow:0 6px 18px rgba(255,61,113,.45);}
.r-gift iconify-icon{color:var(--text-primary);}
/* 방송자(bjMode) 컨트롤 바 + 내 셀 표시 */
.room-bar.bj{gap:10px;justify-content:space-around;}
.r-ic.r-end{background:var(--live)!important;border:none;box-shadow:0 6px 18px rgba(255,61,113,.5);}
.r-ic.r-off{background:rgba(140,70,70,.65);opacity:.75;}
.hc-me{font-size:9px;font-weight:800;color:var(--bg-base);background:var(--gold);padding:2px 7px;border-radius:6px;}

/* ── 선물시트 (PANEL bottom 컨텐츠) ── */
.by-gift{background:var(--bg-surface);border-radius:22px 22px 0 0;padding:16px 16px 22px;}
.gs-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.gs-head .t{font-size:16px;font-weight:700;}
.gs-bal{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--gold);}
.gs-bal iconify-icon{font-size:15px;}
.gs-bal .chg{margin-left:6px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;padding:4px 9px;border-radius:12px;cursor:pointer;}
.gt-row{display:flex;gap:10px;margin-bottom:13px;}
.gt{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;opacity:.5;}
.gt.sel{opacity:1;}
.gt .a{width:46px;height:46px;border-radius:50%;background-size:cover;background-position:center;border:2px solid transparent;background-color:var(--bg-elevated);}
.gt.sel .a{border-color:var(--accent);}
.gt .n{font-size:10px;font-weight:600;color:var(--text-secondary);}
.gs-tabs{display:flex;gap:16px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:2px;overflow-x:auto;}
.gs-tabs::-webkit-scrollbar{display:none;}
.gs-tab{font-size:13px;font-weight:600;color:var(--text-muted);padding-bottom:8px;white-space:nowrap;cursor:pointer;}
.gs-tab.active{color:var(--text-primary);font-weight:700;border-bottom:2px solid var(--accent);}
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.gift{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border-radius:14px;background:var(--bg-elevated);cursor:pointer;}
.gift.sel{outline:2px solid var(--accent);}
.gift .em{font-size:26px;}
.gift .nm{font-size:11px;font-weight:600;color:var(--text-secondary);}
.gift .pr{font-size:11px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:2px;}
.gift .pr iconify-icon{font-size:11px;}
.gift.custom .pr{color:var(--accent);}
.gs-custom{display:flex;align-items:center;gap:8px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--bg-elevated);border:1.5px solid var(--accent);}
.gs-custom .by-ico-star{font-size:16px;flex:0 0 auto;}
.gs-custom input{flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:17px;font-weight:700;color:var(--text-primary);}
.gs-custom input::-webkit-outer-spin-button,.gs-custom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gs-custom .unit{font-size:13px;font-weight:700;color:var(--text-secondary);flex:0 0 auto;}
.gs-foot{display:flex;align-items:center;gap:10px;margin-top:16px;}
.secret{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;}
.secret iconify-icon{font-size:18px;}
.secret.on{color:var(--accent);}
.btn-send{flex:1;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:15px;font-weight:800;text-align:center;padding:14px;border-radius:16px;cursor:pointer;}

/* ── 합방 (multi-frame) ── */
.hap-room{position:fixed;inset:0;max-width:430px;margin:0 auto;background:var(--bg-base);display:flex;flex-direction:column;padding:calc(14px + var(--safe-top)) 12px calc(14px + var(--safe-bot));gap:11px;z-index:30;}
.hap-top{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.hap-top .ti{font-size:15px;font-weight:800;color:var(--text-primary);}
.hap-top .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.lay-row{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.versus{flex-shrink:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:9px;}
.versus .vh{display:flex;align-items:center;justify-content:space-between;}
.versus .vh .l{font-size:13px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:5px;}
.versus .vh .l iconify-icon{font-size:15px;color:var(--live);}
.versus .vh .win{font-size:12px;font-weight:800;color:var(--gold);}
.vbar{display:flex;height:13px;border-radius:7px;overflow:hidden;gap:2px;}
.vseg{height:100%;transition:flex .4s cubic-bezier(.4,0,.2,1);}
.vlegend{display:flex;gap:8px;flex-wrap:nowrap;justify-content:space-between;overflow-x:auto;}
.vlegend::-webkit-scrollbar{display:none;}
.vlg{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--text-secondary);white-space:nowrap;flex:none;}
.vlg .d{width:9px;height:9px;border-radius:3px;}
.vlg b{color:var(--text-primary);}
.hap-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;min-height:0;grid-auto-rows:1fr;
  transition:grid-template-columns .32s cubic-bezier(.4,0,.2,1),grid-template-rows .32s cubic-bezier(.4,0,.2,1);}
.hap-grid.animating .hap-cell{animation:hapCellIn .34s cubic-bezier(.2,.7,.3,1);}
@keyframes hapCellIn{from{opacity:.5;transform:scale(.955)}to{opacity:1;transform:scale(1)}}
.hap-cell{position:relative;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:#151022;display:flex;flex-direction:column;justify-content:space-between;padding:8px;cursor:pointer;transition:outline-color .15s;}
.hap-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,16,.32),transparent 38%,rgba(8,6,16,.8));}
.hap-cell.lead{outline:2px solid var(--gold);outline-offset:-2px;}
.hap-cell.focus{outline:2px solid var(--accent);outline-offset:-2px;}
.hc-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;}
.hc-rank{display:flex;align-items:center;gap:3px;background:rgba(10,8,20,.6);padding:3px 7px;border-radius:7px;font-size:10px;font-weight:800;color:var(--text-primary);}
.hc-rank.g{background:var(--gold);color:var(--bg-base);}
.hc-rank iconify-icon{font-size:11px;}
.hc-live{font-size:8px;font-weight:800;color:var(--text-primary);background:var(--live);padding:2px 5px;border-radius:5px;}
.hc-bot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;}
.hc-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hc-nm{font-size:12px;font-weight:700;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hc-amt{font-size:11px;font-weight:800;color:#FFE0A0;display:flex;align-items:center;gap:3px;}
.hc-amt iconify-icon{font-size:11px;}
.hc-cheer{flex:none;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:11px;font-weight:800;padding:6px 9px;border-radius:13px;display:flex;align-items:center;gap:3px;cursor:pointer;}
.hc-cheer iconify-icon{font-size:12px;}
.hc-main{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;display:none;font-size:9px;font-weight:800;color:var(--bg-base);background:var(--accent);padding:2px 8px;border-radius:6px;}
.hap-grid.spot{grid-template-columns:1fr 1fr 1fr;grid-template-rows:2.3fr 1fr;}
.hap-grid.spot .hap-cell.focus{grid-column:1/-1;grid-row:1;}
.hap-grid.spot .hap-cell.focus .hc-main{display:block;}
.hap-chat{flex-shrink:0;max-height:18vh;overflow:hidden;display:flex;flex-direction:column;gap:6px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%);}
.hap-chat.flow{flex:none;height:34px;max-height:none;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:0 2px 4px;position:relative;cursor:pointer;transition:height .34s cubic-bezier(.2,.8,.3,1);}
.hap-chat.flow .msg{text-shadow:0 1px 3px rgba(0,0,0,.7);line-height:1.4;}
.hap-chat.flow .msg .u{color:#D9CCFF;}
.lay-switch{display:flex;gap:5px;background:rgba(14,11,26,.5);border:1px solid rgba(255,255,255,.1);padding:4px;border-radius:12px;}
.lay-switch .ls{display:flex;align-items:center;justify-content:center;width:32px;height:30px;border-radius:9px;color:#B9B4CC;cursor:pointer;}
.lay-switch .ls iconify-icon{font-size:17px;}
.lay-switch .ls.active{background:var(--accent);color:var(--on-accent);}
.lay-hint{font-size:10.5px;color:#9C97B8;display:flex;align-items:center;gap:4px;margin-left:2px;}
.lay-hint iconify-icon{font-size:13px;}
.chat-toggle{position:absolute;right:14px;bottom:84px;z-index:25;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);box-shadow:0 3px 10px rgba(124,92,255,.5);transition:bottom .32s cubic-bezier(.2,.8,.3,1);}
.chat-toggle iconify-icon{font-size:18px;color:var(--text-primary);display:block;}
.hap-room.chatopen .hap-chat.flow{flex:none;height:48vh;overflow-y:auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%);mask-image:linear-gradient(180deg,transparent,#000 16%);}
.hap-room.chatopen .hap-chat.flow::-webkit-scrollbar{width:0;}
.hap-room.chatopen .hap-grid{grid-template-columns:repeat(4,1fr)!important;grid-template-rows:1fr!important;}
.hap-room.chatopen .hap-cell{min-width:0;padding:7px 5px;}
.hap-room.chatopen .hap-cell .hc-cheer{display:none;}
.hap-room.chatopen .hap-cell .hc-live{display:none;}
.hap-room.chatopen .hap-cell .hc-top{justify-content:center;}
.hap-room.chatopen .hap-cell .hc-rank{padding:3px 9px;}
.hap-room.chatopen .hap-cell .hc-bot{justify-content:center;}
.hap-room.chatopen .hap-cell .hc-info{align-items:center;text-align:center;}
.hap-room.chatopen .hap-cell .hc-nm{font-size:11px;}
.hap-room.chatopen .hap-cell .hc-amt{font-size:10px;}
.hap-room.chatopen .hap-grid .hap-cell.focus{grid-column:auto;grid-row:auto;}
.hap-room:not(.chatopen) .hap-chat.flow{justify-content:center;padding:0 2px;}
.hap-room:not(.chatopen) .hap-chat.flow .msg{display:none;max-width:calc(100% - 44px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hap-room:not(.chatopen) .hap-chat.flow .msg:last-child{display:block;}
.hap-room:not(.chatopen) .hap-chat.flow .msg.dono{background:none;padding:0;border-radius:0;}
.hap-room:not(.chatopen) .hap-chat.flow .msg.dono .u{color:#D9CCFF;}
.hap-room:not(.chatopen) .hap-chat.flow .msg.dono .x{color:var(--text-bright);font-weight:400;}
.hap-room:not(.chatopen) .hap-chat.flow .msg.dono .amt{color:var(--gold-lite);}

/* ── 후원 터짐 오버레이 (영상 위, 테마 무관 다크) ── */
.dono-layer{position:absolute;inset:0;z-index:34;pointer-events:none;overflow:hidden;}
.dono-layer.flash::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,transparent 46%,rgba(124,92,255,.28) 82%,rgba(255,61,113,.42) 100%);animation:donoFlash .7s ease-out;}
@keyframes donoFlash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.dono-alerts{position:absolute;top:60px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 14px;}
.d-alert{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 12px 6px 6px;border-radius:30px;background:rgba(14,11,26,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 20px rgba(0,0,0,.4);color:var(--text-primary);font-size:12.5px;white-space:nowrap;animation:daIn .38s cubic-bezier(.2,.8,.3,1);}
.d-alert.out{animation:daOut .42s ease forwards;}
.d-alert .da-av{width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;flex:none;background-color:var(--accent);}
.d-alert .da-tx{overflow:hidden;text-overflow:ellipsis;}
.d-alert .da-tx b{font-weight:800;color:var(--accent-pale);}
.d-alert .da-tx i{font-style:normal;color:var(--gold-lite);font-weight:700;}
.d-alert .da-em{font-size:15px;}
.d-alert .da-amt{margin-left:2px;font-weight:800;color:#FFE9A8;display:inline-flex;align-items:center;gap:2px;}
.d-alert .da-amt .s{color:var(--gold);}
.d-alert.big{background:linear-gradient(90deg,rgba(124,92,255,.92),rgba(255,61,113,.9));border-color:rgba(255,255,255,.3);font-size:13.5px;padding:8px 15px 8px 7px;}
.d-alert.big .da-tx b{color:var(--text-primary);}
.d-alert.mega{background:linear-gradient(90deg,var(--accent),var(--live) 70%,var(--gold));box-shadow:0 8px 30px rgba(255,61,113,.6);}
@keyframes daIn{from{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes daOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.d-burst{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.d-burst.out{animation:dbOut .5s ease forwards;}
@keyframes dbOut{to{opacity:0;transform:translateY(-30px)}}
.db-core{position:relative;display:flex;align-items:center;justify-content:center;width:150px;height:150px;}
.db-em{font-size:112px;line-height:1;filter:drop-shadow(0 8px 26px rgba(124,92,255,.75));animation:dbPop .7s cubic-bezier(.16,1.2,.3,1),dbFloat 2.2s ease-in 0.6s;}
.d-burst.mega .db-em{font-size:130px;animation:dbPop .8s cubic-bezier(.16,1.3,.3,1),dbSpin 2.4s ease-in-out;}
@keyframes dbPop{0%{transform:scale(0) rotate(-18deg);opacity:0}60%{transform:scale(1.18) rotate(6deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes dbFloat{to{transform:translateY(-40px);opacity:.85}}
@keyframes dbSpin{0%{transform:rotate(0)}20%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}100%{transform:rotate(0) translateY(-30px)}}
.db-ring{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid rgba(201,184,255,.7);animation:dbRing 1.1s ease-out forwards;}
.db-ring.r2{border-color:rgba(255,196,77,.6);animation-delay:.18s;}
@keyframes dbRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.db-who{padding:7px 16px;border-radius:30px;background:rgba(14,11,26,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:var(--text-primary);font-size:14px;font-weight:600;animation:daIn .5s .15s both;}
.db-who b{font-weight:800;color:var(--accent-pale);}
.db-who .db-amt{color:#FFE9A8;font-weight:800;margin-left:2px;}
.dono-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;}
/* --- BY_FX: mega 후원 풀스크린 점령 (dono-layer z34 바로 아래 = 알림텍스트는 위) --- */
.byfx{position:absolute;inset:0;z-index:33;pointer-events:none;overflow:hidden;}
.byfx-cv{position:absolute;inset:0;width:100%;height:100%;}
.byfx-vig{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(8,6,20,.55) 82%,rgba(4,3,12,.82) 100%);}
.byfx-flash{position:absolute;inset:0;opacity:0;background:#fff;mix-blend-mode:screen;}
/* 로티 이펙트 레이어 — 캔버스 위. lottie-player 는 지연 주입된다(§36). */
.byfx-lottie{position:absolute;inset:0;pointer-events:none;}
.byfx-lottie svg{width:100%;height:100%;}
.d-burst .db-core,.d-burst .db-who{position:relative;z-index:3;}
.db-combo{position:absolute;right:-6px;top:-2px;font-size:30px;font-weight:900;color:var(--gold-lite);text-shadow:0 2px 10px rgba(255,61,113,.8);animation:dbPop .5s cubic-bezier(.16,1.4,.3,1);font-style:italic;}
.d-burst.mega::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 44%,rgba(124,92,255,.28),rgba(8,6,16,.55) 78%);animation:daIn .4s both;}

/* ============================================================
   Slice 3 — 커뮤니티 / 마이
   ============================================================ */
/* ── 커뮤니티 ── */
.story{display:flex;flex-shrink:0;gap:14px;overflow-x:auto;padding:4px 16px 2px;}
.story::-webkit-scrollbar{display:none;}
.st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:62px;cursor:pointer;}
.st .ring{padding:2px;border-radius:50%;background:var(--border);}
.st.live .ring{background:linear-gradient(135deg,var(--accent),var(--live));}
.st .ring .a{width:54px;height:54px;border-radius:50%;background-size:cover;border:2px solid var(--bg-base);background-position:center;background-color:var(--bg-elevated);}
.st .nm{font-size:11px;color:var(--text-secondary);font-weight:600;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.post{border-top:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:11px;}
.post-h{display:flex;align-items:center;gap:10px;}
.post-h .meta{display:flex;flex-direction:column;gap:1px;}
.post-h .nm{font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px;}
.mbadge{font-size:9px;font-weight:800;color:var(--bg-base);background:var(--gold);padding:2px 6px;border-radius:5px;}
.post-h .tm{font-size:11px;color:var(--text-muted);}
.post-h .fo{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;}
.post-tx{font-size:14px;line-height:1.5;color:var(--text-primary);}
.post-img{width:100%;height:200px;border-radius:14px;background-size:cover;background-position:center;background-color:var(--bg-elevated);}
.post-img.locked{position:relative;display:flex;align-items:center;justify-content:center;}
.post-img.locked::after{content:"";position:absolute;inset:0;background:rgba(14,11,26,.66);border-radius:14px;}
.lock{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-primary);}
.lock iconify-icon{font-size:24px;}.lock span{font-size:12px;font-weight:700;}
.post-act{display:flex;gap:12px;color:var(--text-muted);}  /* min-width:44 로 넓어진 만큼 gap 축소 — 보이는 간격 유지 */
.post-act .a{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;cursor:pointer;min-height:44px;min-width:44px;}  /* 좋아요·댓글·공유 = 실제 버튼인데 30x20(공유는 17px) 이었다(§43 — 장식이 아니라 조작 요소라 키우는 게 맞다).
     글·아이콘 크기는 그대로, 행 높이만 44 로. 피드 카드가 약간 높아지는 건 의도한 비용이다. */
.post-act .a iconify-icon{font-size:17px;}

/* ── 마이 ── */
.prof{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px 18px;}
.prof .av{background-color:var(--accent);}
.prof .nm{font-size:20px;font-weight:800;margin-top:10px;}
.prof .hd{font-size:13px;color:var(--text-muted);}
.lvl{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:4px 10px;border-radius:20px;margin-top:6px;}
.lvl iconify-icon{font-size:13px;}
.stats{display:flex;justify-content:center;gap:30px;padding:14px 0;margin:0 16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px;}
.stat .n{font-size:18px;font-weight:800;}
.stat .l{font-size:12px;color:var(--text-muted);}
.wallet{margin:0 16px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;}
.wallet .lab{font-size:12px;color:var(--label-soft);font-weight:600;}
.wallet .bal{font-size:24px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:6px;margin-top:3px;}
.wallet .bal iconify-icon{font-size:22px;color:var(--gold);}
.wallet .chg{background:#fff;color:var(--accent-deep);font-size:13px;font-weight:800;padding:11px 18px;border-radius:14px;cursor:pointer;}
.mlist{margin:4px 0;display:flex;flex-direction:column;}
.mi{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;}
.mi iconify-icon.l{font-size:22px;color:var(--text-secondary);}
.mi .t{font-size:15px;font-weight:600;flex:1;}
.mi .badge{font-size:10px;font-weight:800;color:var(--bg-base);background:var(--gold);padding:2px 7px;border-radius:6px;}
.mi iconify-icon.c{font-size:18px;color:var(--text-muted);}
.sec-label{font-size:12px;font-weight:700;color:var(--text-muted);padding:14px 18px 4px;}

/* ── byeol 바텀시트 컨테이너: 배경 다크(프레임워크 --nskit-page-bg 흰색 → 짧은 콘텐츠 아래 흰 여백 방지) + 패딩은 by-* 컴포넌트가 담당 ── */
#side-panel-area .side-panel-container{background:var(--bg-surface)!important;}
/* 🔥 바텀시트 dim(스크림): 프레임워크 기본 = element-opacity 0.5 × bg-alpha 0.5 = 유효 0.25 검정 →
   byeol 다크테마 위에선 거의 안 보임. bg 를 진하게 올려 표시영역 외 배경을 확실히 어둡게(유효 ~0.45). (2026-07-22) */
#side-panel-area .nskit-dim{background-color:rgba(0,0,0,.9)!important;}
/* 🔥🔥 nskit-base.css `.show{display:block!important}` 가 컨테이너 `display:flex` 를 깨뜨림(§11 함정의 패널판) →
   content(flex:1) 가 높이제약을 잃고 시트 밖으로 넘쳐(스크롤 대신 오버플로우) 하단 버튼이 네비바/인디케이터 아래로 밀림.
   flex 복구 필수 → content 가 컨테이너 높이로 제약돼 내부 스크롤 = 버튼이 시트 안(=safe 영역 위)에 머묾. (2026-07-22) */
#side-panel-area .side-panel-container.show{display:flex!important;}
/* 🔥 완벽한 바텀시트 2모드 (2026-07-22):
   ② 기본(높이 미지정) = 콘텐츠 높이에 맞춤(height:auto, 프레임워크 inline 고정높이 무시) + max-height 82vh 캡.
      → 짧은 콘텐츠(예 아이폰 지갑)는 빈 바닥 제거, safe-bot 이 비로소 버튼-인디케이터 간격으로 기능.
   ① 명시 높이 필요 시 = 컨테이너에 `.sheet-h` + `style="--sheet-h:60vh"` → 그 높이까지 올라오고, 넘치면 내부 스크롤(flex+overflow).
   공통: 넘치면 .side-panel-content(flex:1;overflow-y:auto) 내부 스크롤. 슬라이드업 애니는 bottom 값 제어라 높이와 무관. */
#side-panel-area .side-panel-container.bottom{height:auto!important;max-height:82vh!important;}
#side-panel-area .side-panel-container.bottom.sheet-h{height:var(--sheet-h)!important;}
/* 🔥 커스텀 패널(by-notif/search/report/comments/history/mmg/login 등)은 내부 헤더·행이 2~6px 좌우패딩만 갖고
   패널이 ~16px 를 제공하길 기대하는 설계 → padding:0 이면 타이틀·버튼이 가장자리에 클립. base 16px 좌우 제공. (2026-07-22) */
/* 하단 = safe-bot(인디케이터/네비바) 포함 → 충전하기 등 하단 버튼이 시스템바와 겹치지 않음 */
#side-panel-area .side-panel-content{padding:16px 16px calc(22px + var(--safe-bot))!important;}
/* ⚠️ by-* 는 $content 요소 자체에 붙음(child 아님) → 위 padding:0!important 가 좌우패딩을
   눌러 콘텐츠가 가장자리에 붙고(제목 좌측 클리핑) 우측 overflow-x:hidden 잘림. 같은 요소·더 높은 특정성으로 복구.
   (by-wallet/by-gift 도 좌우 패딩 필요 — 풀블리드 아님, 타이틀 클립 방지. 2026-07-22) */
#side-panel-area .side-panel-content.by-dlg{padding:18px 16px calc(22px + var(--safe-bot))!important;}
#side-panel-area .side-panel-content.by-wallet,
#side-panel-area .side-panel-content.by-gift{padding:16px 16px calc(24px + var(--safe-bot))!important;}

/* ── 지갑/충전 (page-wallet) ── */
.by-wallet{background:var(--bg-surface);border-radius:22px 22px 0 0;padding:16px 16px 24px;color:var(--text-primary);}
.by-wallet .wh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.by-wallet .wh .t{font-size:16px;font-weight:800;}
.by-wallet .wbal{background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.by-wallet .wbal .lab{font-size:12px;color:var(--label-soft);font-weight:600;}
.by-wallet .wbal .bal{font-size:24px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:6px;margin-top:3px;}
.by-wallet .wbal .bal iconify-icon,.by-wallet .wbal .bal .by-ico{font-size:22px;color:var(--gold);}
/* 보유 응원봉 — 캐시와 구분: 우측정렬 + 핑크 아이콘. wbal flex space-between 이 좌(캐시)/우(응원봉) 배치 */
.by-wallet .wcheer{text-align:right;}
.by-wallet .wcheer .bal{justify-content:flex-end;}
.by-wallet .wcheer .bal iconify-icon,.by-wallet .wcheer .bal .by-ico{color:#FF6BC1;font-size:22px;}
.by-wallet .wsec{font-size:12px;font-weight:700;color:var(--text-muted);margin:4px 2px 9px;}
.by-wallet .wgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.by-wallet .wpkg{background:var(--bg-elevated);border:2px solid transparent;border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;}
.by-wallet .wpkg.sel{border-color:var(--accent);}
.by-wallet .wpkg .amt{font-size:14px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:3px;}
.by-wallet .wpkg .amt iconify-icon{font-size:14px;color:var(--gold);}
.by-wallet .wpkg .won{font-size:11px;color:var(--text-muted);font-weight:600;}
.by-wallet .wpkg .bonus{font-size:9px;font-weight:800;color:var(--bg-base);background:var(--gold);padding:1px 5px;border-radius:5px;}
.by-wallet .wauto{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;margin-top:6px;border-top:1px solid var(--border);}
.by-wallet .wauto .l{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-secondary);}
.by-wallet .wauto .l iconify-icon{font-size:17px;}
.by-wallet .wtoggle{width:42px;height:24px;border-radius:12px;background:var(--border);position:relative;cursor:pointer;transition:background .18s;flex:none;}
.by-wallet .wtoggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;}
.by-wallet .wtoggle.on{background:var(--accent);}
.by-wallet .wtoggle.on::after{left:21px;}
/* 최근 내역이 쌓여도 바텀시트가 계속 커지지 않도록 내역 영역만 캡+자체 스크롤(상단 잔액·충전팩·충전버튼은 항상 보임) */
.by-wallet .whist{margin-top:4px;max-height:196px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.by-wallet .whr{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;font-size:12.5px;border-bottom:1px solid var(--border);}
.by-wallet .whr .d{color:var(--text-muted);}
.by-wallet .whr .v{font-weight:700;color:var(--gold);}
.by-wallet .wbtn{margin-top:16px;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:15px;font-weight:800;text-align:center;padding:14px;border-radius:16px;cursor:pointer;}

/* ── 다이얼로그 모바일 폭 핏 + 공통 폼 (by-dlg) ── */
/* 폭 핏은 시스템(alert/confirm/prompt)·커스텀 모두에 적용한다. */
#dialog-area .dialog-container,#dialog-area-super .dialog-container{
  width:calc(100vw - 40px)!important;max-width:400px!important;
}
/* 🔑 **`.custom` 에만** — 배경을 내용(.by-dlg)이 소유하는 다이얼로그다.
   프레임워크 .dialog-container 는 흰 배경 12px 라운딩을 깔고, 내용은 #1A1630 22px 이라
   다크 테마에서 **모서리로 흰색이 새어 나온다**(실측 2026-08-30, 방송 시작 시트 상단).
   컨테이너를 비우면 모양·색을 내용이 단독으로 정하므로 어긋날 수가 없다.
   ⚠️ overflow 도 풀어야 한다 — 12px 로 클립하면 내용의 22px 모서리가 잘린다.
   🔴 **범위를 `.dialog-container` 전체로 잡으면 안 된다.** alert/confirm/prompt 는
      자체 배경이 없어 프레임워크 배경에 의존한다 → 통째로 투명해져 글자만 뜬다.
      (내가 실제로 그렇게 했다가 시스템 다이얼로그 배경이 전부 사라졌다.)
      v2 는 클래스로 구분한다: 시스템=`.alert/.confirm/.prompt`, DIALOG.show=`.custom`. */
#dialog-area .dialog-container.custom,#dialog-area-super .dialog-container.custom{
  background:transparent!important;border-radius:0!important;overflow:visible!important;
}
/* 시스템 다이얼로그(alert/confirm/prompt)는 **프레임워크가 그린다** — 내용이 우리 것이 아니다.
   프레임워크는 배경만 `--nskit-dialog-bg` 토큰을 쓰고 **글자색은 안 정한다**(zinc-900 상속).
   그래서 배경만 다크로 바꾸면 다크 위 검정 글자 = **대비 1.01, 사실상 안 보인다**(실측).
   배경을 테마에 맞췄으면 글자·구분선·버튼까지 같은 세트로 맞춰야 성립한다. */
#dialog-area-super .dialog-container.alert,
#dialog-area-super .dialog-container.confirm,
#dialog-area-super .dialog-container.prompt{ color:var(--text-primary); }
#dialog-area-super .dialog-container.alert .dialog-body,
#dialog-area-super .dialog-container.confirm .dialog-body,
#dialog-area-super .dialog-container.prompt .dialog-body{ color:var(--text-primary); }
#dialog-area-super .dialog-prompt-message{ color:var(--text-secondary); }
#dialog-area-super .dialog-prompt-input{
  background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);
  min-height:44px; }
#dialog-area-super .dialog-footer{ border-top-color:var(--border); }
/* 프레임워크 기본 padding(10px 20px)+14px 글자 = 38px → 44 미달(§43, 실제 버튼이다). */
#dialog-area-super .dialog-footer button{ min-height:44px; }
#dialog-area-super .dialog-footer .btn-cancel{
  background:var(--bg-elevated);color:var(--text-secondary); }
#dialog-area-super .dialog-footer .btn-confirm{
  background:var(--accent);color:var(--on-accent); }
#dialog-area .dialog-content,#dialog-area-super .dialog-content{width:100%!important;max-width:100%!important;box-sizing:border-box;}
#dialog-area input,#dialog-area textarea,#dialog-area-super input,#dialog-area-super textarea{box-sizing:border-box!important;max-width:100%;}
.by-dlg{background:var(--bg-surface);border-radius:22px 22px 0 0;padding:18px 16px 22px;color:var(--text-primary);}
/* 🔭 PAGE 안에서 재사용될 때(profile-edit·post-edit) — 바텀시트 모양을 벗긴다.
   §11: PAGE 콘텐츠 배경은 transparent, 페이지 배경은 .sub-page-container 담당.
   라운드·surface 배경이 남으면 풀스크린 안에 시트가 떠 있는 것처럼 보인다. */
#sub-page-area .by-dlg,
#sub-page-area-super .by-dlg{background:transparent;border-radius:0;padding:0;}
#sub-page-area .by-mmg,
#sub-page-area-super .by-mmg{background:transparent;border-radius:0;padding:0;}
/* 헤더 액션으로 옮긴 것들 (본문 제목줄 → 프레임워크 헤더, §11) */
#sub-page-area .page-header-buttons .mmadd,
#sub-page-area .page-header-buttons .inq-new{font-size:13px;font-weight:700;color:var(--accent);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;}
/* by-inq/by-report 도 PAGE·DIALOG 안에서는 시트 모양을 벗는다 */
#sub-page-area .by-inq,
#sub-page-area-super .by-inq{background:transparent;border-radius:0;padding:0;}
/* schedule-edit 의 숨김보기 토글 — 제목줄에서 떨어져 나와 자기 줄을 갖는다 */
#sub-page-area .se-hidbar{display:flex;justify-content:flex-end;margin-bottom:10px;}
.by-dlg .dt{font-size:17px;font-weight:800;margin-bottom:14px;}
.by-dlg .fld{margin-bottom:13px;}
.by-dlg .fld label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;}
.by-dlg .fld input{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text-primary);font-size:14px;font-family:inherit;}
.by-dlg .fld input:focus{outline:none;border-color:var(--accent);}
.by-dlg .fld input:disabled{opacity:.6;}
.by-dlg .pe-av{display:flex;justify-content:center;margin-bottom:14px;}
.by-dlg .pe-av .av{width:76px;height:76px;position:relative;}
.by-dlg .pe-av .cam{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-surface);}
.by-dlg .pe-av .cam iconify-icon{font-size:14px;color:var(--text-primary);}
.by-dlg .drow{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;border-top:1px solid var(--border);font-size:14px;cursor:pointer;}
.by-dlg .drow:first-of-type{border-top:none;}
.by-dlg .drow .l{display:flex;align-items:center;gap:11px;color:var(--text-primary);font-weight:500;}
.by-dlg .drow .l iconify-icon{font-size:19px;color:var(--text-secondary);}
.by-dlg .drow .r{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:13px;}
.by-dlg .drow .r iconify-icon{font-size:17px;}
.by-dlg .wtoggle{width:42px;height:24px;border-radius:12px;background:var(--border);position:relative;cursor:pointer;transition:background .18s;flex:none;}
.by-dlg .wtoggle::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .18s;}
.by-dlg .wtoggle.on{background:var(--accent);}.by-dlg .wtoggle.on::after{left:21px;}
.by-dlg .dbtn{margin-top:15px;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:15px;font-weight:800;text-align:center;padding:13px;border-radius:14px;cursor:pointer;}
.by-dlg .dbtn.danger{background:none;color:var(--live);border:1px solid var(--border);margin-top:8px;}
.by-dlg .dnote{font-size:12.5px;color:var(--text-secondary);line-height:1.7;}

/* ============================================================
   S2 — 커뮤니티 발견피드 확장 + 개인 커뮤(scene-channel)
   ============================================================ */
/* 발견 피드 글의 BJ 헤더 + 구독 유도 (scene-community 재사용 .post 위에) */
/* 피드는 소식목록이라 구독버튼은 톤다운: 미구독=약한 아웃라인, 구독중=은은한 muted */
.post-h .fo.sub{background:transparent;color:var(--accent);border:1px solid var(--accent);padding:4px 11px;border-radius:16px;font-size:11.5px;font-weight:700;}
.post-h .fo.sub.on{color:var(--text-muted);border-color:var(--border);font-weight:600;}
/* 상단 띠 더보기 */
.st.st-more .a.more{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--border);background:transparent;color:var(--text-secondary);}
.st.st-more .a.more iconify-icon{font-size:22px;}
.pub-chip{font-size:9px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:2px 7px;border-radius:5px;}

/* 개인 커뮤 (scene-channel) — fullscreen depth scene */
.scene-channel{display:flex;flex-direction:column;min-height:100%;}
.ch-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;padding:calc(12px + var(--safe-top)) 14px 12px;background:rgba(14,11,26,.72);backdrop-filter:blur(8px);}
.ch-top .bk{display:flex;cursor:pointer;color:var(--text-primary);}
.ch-top .ch-share{margin-left:auto;display:flex;cursor:pointer;color:var(--text-secondary);font-size:19px;}
.ch-top .ch-share:active{opacity:.6;}
.ch-top .bk iconify-icon{font-size:24px;}
.ch-top .ti{font-size:15px;font-weight:800;}
.ch-cover{height:130px;background:linear-gradient(135deg,var(--accent),#FF5A8A);background-size:cover;background-position:center;margin-top:-56px;}
.ch-head{padding:0 18px;margin-top:-38px;position:relative;z-index:2;}
.ch-head .av{display:block;width:76px;height:76px;border:3px solid var(--bg-base);box-shadow:0 4px 16px rgba(0,0,0,.4);}
.ch-head .nm{font-size:20px;font-weight:800;margin-top:9px;display:flex;align-items:center;gap:6px;}
.ch-head .meta{font-size:12.5px;color:var(--text-muted);margin-top:3px;}
.ch-btns{display:flex;gap:9px;margin:14px 0 4px;}
.ch-btns .b{flex:1;text-align:center;padding:11px;border-radius:13px;font-size:13.5px;font-weight:800;cursor:pointer;}
.ch-btns .b.sub{background:var(--accent);color:var(--on-accent);}
.ch-btns .b.sub.on{background:var(--bg-elevated);color:var(--text-secondary);}
.ch-btns .b.mem{background:linear-gradient(135deg,var(--gold),#FF9A3C);color:var(--bg-base);}
.ch-sec{padding:16px 18px 6px;}
.ch-sec .h{font-size:15px;font-weight:800;margin-bottom:11px;display:flex;align-items:center;gap:6px;}
.ch-sec .h iconify-icon{font-size:17px;color:var(--accent);}
.ch-sched{display:flex;flex-direction:column;gap:9px;}
.ch-sch{display:flex;gap:12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;}
.ch-sch .dt{flex:none;width:44px;text-align:center;}
.ch-sch .dt .d{font-size:19px;font-weight:800;color:var(--accent);line-height:1;}
.ch-sch .dt .m{font-size:10px;color:var(--text-muted);margin-top:2px;}
.ch-sch .in{flex:1;min-width:0;}
.ch-sch .in .t{font-size:13.5px;font-weight:700;}
.ch-sch .in .s{font-size:11.5px;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:4px;}
.ch-sch .in .s iconify-icon{font-size:13px;}
.ch-mlock{margin:0 18px;background:var(--bg-surface);border:1px dashed var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.ch-mlock iconify-icon{font-size:26px;color:var(--gold);}
.ch-mlock .t{font-size:14px;font-weight:700;}
.ch-mlock .s{font-size:12px;color:var(--text-muted);}
.ch-mlock .go{margin-top:6px;background:linear-gradient(135deg,var(--gold),#FF9A3C);color:var(--bg-base);font-size:13px;font-weight:800;padding:9px 18px;border-radius:12px;cursor:pointer;}
.ch-rank{display:flex;flex-direction:column;}
.ch-rk{display:flex;align-items:center;gap:11px;padding:10px 0;}
.ch-rk .no{width:22px;text-align:center;font-size:14px;font-weight:800;color:var(--text-muted);}
.ch-rk .no.g{color:var(--gold);}
.ch-rk .nm{flex:1;font-size:13.5px;font-weight:600;}
.ch-rk .amt{font-size:12.5px;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:3px;}
.ch-rk .amt iconify-icon{font-size:12px;}
.ch-rk-note{font-size:11px;color:var(--text-muted);padding:8px 2px 0;}
/* 멤버십 티어 (panel-membership, by-dlg 컨테이너) */
.by-dlg .mtier{background:var(--bg-elevated);border:2px solid transparent;border-radius:14px;padding:14px;margin-bottom:10px;cursor:pointer;}
.by-dlg .mtier.sel{border-color:var(--gold);}
.by-dlg .mtier .th{display:flex;align-items:center;justify-content:space-between;}
.by-dlg .mtier .th .nm{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px;}
.by-dlg .mtier .th .nm iconify-icon{font-size:15px;color:var(--gold);}
.by-dlg .mtier .th .pr{font-size:14px;font-weight:800;color:var(--gold);}
.by-dlg .mtier .bn{font-size:12px;color:var(--text-secondary);margin-top:7px;line-height:1.6;}

/* ── 방송 생성 (dialog-go-live) ── */
.by-dlg .gl-thumb{height:130px;border-radius:14px;background:var(--bg-elevated);border:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);cursor:pointer;margin-bottom:14px;background-size:cover;background-position:center;}
.by-dlg .gl-thumb iconify-icon{font-size:26px;}
.by-dlg .gl-thumb span{font-size:12px;font-weight:600;}
.by-dlg .gl-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px;}
.by-dlg .gl-seg{display:flex;gap:6px;background:var(--bg-elevated);border-radius:12px;padding:4px;}
.by-dlg .gl-seg .s{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-secondary);cursor:pointer;}
.by-dlg .gl-seg .s.on{background:var(--accent);color:var(--on-accent);}

/* ── BJ 송출 (scene-broadcast, 모바일 셀피캠) — fullscreen depth ── */
.bcast{position:fixed;inset:0;max-width:430px;margin:0 auto;background:#000;overflow:hidden;display:flex;flex-direction:column;z-index:30;}
.bcast .cam{position:absolute;inset:0;background-size:cover;background-position:center;background-color:#151022;}
.bcast .cam::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,16,.6) 0%,transparent 20% 60%,rgba(8,6,16,.82) 100%);}
.bcast .b-in{position:relative;z-index:3;display:flex;flex-direction:column;height:100%;padding:calc(14px + var(--safe-top)) 12px calc(16px + var(--safe-bot));}
/* ── 가로 방송 선언 → 비디오(.cam)는 절대 안 건드림(풀스크린 송출 그대로+미러 유지). 오버레이(.b-in)만 회전 + landscape 재배치 ── */
/*   .b-in = landscape 캔버스(가로 폭=100vh, 세로=100vw) center-rotate(각도 JS inline). 내부는 이 844×390 을 사용자 시야(가로) 그대로 보고 배치. */
/*   폰 -90°(rot90) 기준 safe-area: 왼쪽=노치/상태바(--safe-top), 오른쪽=홈인디케이터/내비바(--safe-bot). rot270(.bc-cw)은 좌우 반전. */
.bcast.bc-land .b-in{position:absolute;top:50%;left:50%;width:100vh;height:100vw;max-width:none;padding:0;display:block;transform-origin:center center;pointer-events:none;}
.bcast.bc-land .b-in > *{pointer-events:auto;}
.bcast.bc-land .b-spacer{display:none;}
/* 컨트롤 세로 스트립은 이름 숨기고 아이콘만(공간 절약 + 깔끔) */
.bcast.bc-land .b-ctrl .b-btn span{display:none;}
.bcast.bc-land .b-ctrl .b-btn{padding:0;}
/* 탑바 = 상단 가로 full (좌=노치 / 우=인디케이터 회피). 컨트롤 아이콘폭(≈56)만 비움 */
.bcast.bc-land .b-top{position:absolute;top:16px;left:calc(20px + var(--safe-top));right:calc(84px + var(--safe-bot));margin:0;}
/* 컨트롤 = 오른쪽 끝 세로 스트립(아이콘만), 인디케이터/내비바 회피 */
.bcast.bc-land .b-ctrl{position:absolute;top:50%;right:calc(10px + var(--safe-bot));left:auto;bottom:auto;transform:translateY(-50%);flex-direction:column;width:auto;gap:18px;margin:0;}
/* 채팅 = 왼쪽(글씨 좌→우 정렬 자연스럽게), 오늘의 목표 아래로 이어짐. 오른쪽은 컨트롤 스트립만 */
.bcast.bc-land .b-chat{position:absolute;top:104px;bottom:80px;left:calc(20px + var(--safe-top));right:auto;width:46%;max-height:none;margin:0;}
.bcast.bc-land .b-chatbar{position:absolute;bottom:14px;left:calc(20px + var(--safe-top));right:auto;width:46%;}
/* 오늘의 목표 = 라이브 칩 바로 아래(상단 좌측) */
.bcast.bc-land .b-goal{position:absolute;top:56px;left:calc(20px + var(--safe-top));right:auto;bottom:auto;width:46%;max-width:320px;margin:0;}
/* rot270(오른쪽으로 회전) = 콘텐츠 배치는 rot90 과 동일(사용자는 같은 가로화면). 다른 건 물리 노치/인디케이터 위치뿐 →
   safe-area 값만 좌우 스왑: 이제 노치(--safe-top)=오른쪽, 인디케이터(--safe-bot)=왼쪽. (left/right 사이드는 그대로) */
.bcast.bc-land.bc-cw .b-top{left:calc(20px + var(--safe-bot));right:calc(84px + var(--safe-top));}
.bcast.bc-land.bc-cw .b-ctrl{right:calc(10px + var(--safe-top));}
.bcast.bc-land.bc-cw .b-chat{left:calc(20px + var(--safe-bot));}
.bcast.bc-land.bc-cw .b-chatbar{left:calc(20px + var(--safe-bot));}
.bcast.bc-land.bc-cw .b-goal{left:calc(20px + var(--safe-bot));}
.b-top{display:flex;align-items:center;gap:8px;}
.b-live{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:9px;background:var(--live);color:var(--text-primary);font-size:12px;font-weight:800;}
.b-live .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
.b-elapsed{padding:6px 10px;border-radius:9px;background:rgba(14,11,26,.55);color:var(--text-primary);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;}
.b-top .right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.b-stat{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:9px;background:rgba(14,11,26,.55);color:var(--text-primary);font-size:12px;font-weight:700;}
.b-stat iconify-icon{font-size:14px;}
.b-stat.earn{color:var(--gold);}.b-stat.earn iconify-icon{color:var(--gold);}
.b-goal{margin-top:11px;background:rgba(14,11,26,.5);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:9px 12px;display:flex;flex-direction:column;gap:7px;}
.b-goal .gl{display:flex;justify-content:space-between;font-size:11px;font-weight:600;color:#E4E0F0;}
.b-goal .gl b{color:var(--gold);}
.b-gtrack{height:8px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden;}
.b-gfill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--live));}
.b-spacer{flex:1;}
/* 시청자 채팅 = 하단 오버레이(화면 절반), 최신은 아래·위로 갈수록 fade out (라이브 표준). 배경 투명 → 영상 위에 얹힘. */
.b-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;max-height:42vh;overflow:hidden;margin-bottom:12px;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 75%);mask-image:linear-gradient(180deg,transparent 0%,#000 75%);}
.b-chat .msg{animation:bChatIn .25s ease-out;}
@keyframes bChatIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.b-chat .msg{text-shadow:0 1px 3px rgba(0,0,0,.7);}
.b-chat .msg .u{color:#D9CCFF;}
.b-ctrl{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.b-btn{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer;}
.b-btn .ic{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.13);color:var(--text-primary);}
.b-btn .ic iconify-icon{font-size:22px;}
.b-btn span{font-size:10px;font-weight:600;color:#D7D2E8;}
.b-btn.end .ic{background:var(--live);border:none;box-shadow:0 6px 18px rgba(255,61,113,.5);}
.b-btn.hap .ic{background:linear-gradient(135deg,var(--accent),var(--live));border:none;}
.bcast .b-close{position:absolute;top:16px;right:14px;z-index:40;color:var(--text-primary);display:flex;cursor:pointer;}
.bcast .b-close iconify-icon{font-size:24px;}

/* ── 합방 개설 로비 (scene-hapbang, 호스트) ── */
.scene-hapbang{display:flex;flex-direction:column;min-height:100%;padding:0 0 104px;}
.hb-top{display:flex;align-items:center;gap:10px;padding:14px 16px;}
.hb-top .bk{display:flex;cursor:pointer;color:var(--text-primary);}
.hb-top .bk iconify-icon{font-size:24px;}
.hb-top .ti{font-size:16px;font-weight:800;}
.hb-body{padding:0 18px;}
.hb-name{font-size:13.5px;color:var(--text-secondary);margin-bottom:14px;}
.hb-lbl{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:8px;}
.hb-seg{display:flex;gap:6px;background:var(--bg-elevated);border-radius:12px;padding:4px;margin-bottom:18px;}
.hb-seg .s{flex:1;text-align:center;padding:10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text-secondary);cursor:pointer;}
.hb-seg .s.on{background:var(--accent);color:var(--on-accent);}
.hb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hb-slot{aspect-ratio:3/4;border-radius:14px;background:var(--bg-surface);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden;}
.hb-slot.empty{border:1.5px dashed var(--border);cursor:pointer;color:var(--text-muted);}
.hb-slot.empty iconify-icon{font-size:28px;}
.hb-slot.empty span{font-size:12px;font-weight:600;}
.hb-slot .av{width:56px;height:56px;}
.hb-slot .nm{font-size:13px;font-weight:700;}
.hb-slot .st{font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;display:flex;align-items:center;gap:4px;}
.hb-slot .st iconify-icon{font-size:12px;}
.hb-slot .st.wait{background:var(--accent-soft);color:var(--accent);}
.hb-slot .st.live{background:var(--live);color:var(--text-primary);}
.hb-slot.me{border-color:var(--gold);}
.hb-slot .me-badge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:800;color:var(--bg-base);background:var(--gold);padding:2px 7px;border-radius:6px;}
.hb-slot .rm{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(14,11,26,.7);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.hb-slot .rm iconify-icon{font-size:13px;color:var(--text-primary);}
.hb-start{margin:22px 18px 0;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:16px;font-weight:800;text-align:center;padding:15px;border-radius:16px;cursor:pointer;}
.hb-hint{text-align:center;font-size:12px;color:var(--text-muted);margin-top:12px;}
/* 초대 picker (panel-invite) 리스트 행 */
.by-dlg .iv-row{display:flex;align-items:center;gap:12px;padding:11px 2px;cursor:pointer;border-bottom:1px solid var(--border);}
.by-dlg .iv-row .av{width:42px;height:42px;}
.by-dlg .iv-row .in{flex:1;min-width:0;}
.by-dlg .iv-row .in .nm{font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px;}
.by-dlg .iv-row .in .sb{font-size:11.5px;color:var(--text-muted);}
.by-dlg .iv-row .iv-btn{font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent);padding:7px 14px;border-radius:11px;}
.by-dlg .iv-row.on .iv-btn{background:var(--bg-elevated);color:var(--text-muted);}
.by-dlg .iv-row .live-dot{width:7px;height:7px;border-radius:50%;background:var(--live);}

/* ══════════════ BJ 채널 관리 (scene-manage + 관리 패널) ══════════════ */
/* 채널 프로필 카드 */
.mg-ch{margin:2px 16px 6px;border-radius:18px;overflow:hidden;background:var(--bg-elevated);border:1px solid var(--border);}
.mg-cover{height:84px;background:linear-gradient(120deg,var(--accent-dim),var(--accent) 60%,var(--live));}
.mg-chin{display:flex;align-items:center;gap:12px;padding:0 14px 14px;margin-top:-22px;}
.mg-chin .av{width:56px;height:56px;border:3px solid var(--bg-elevated);background-color:var(--accent);flex:none;}
.mg-meta{flex:1;min-width:0;padding-top:22px;}
.mg-meta .nm{font-size:16px;font-weight:800;}
.mg-meta .hd{font-size:11.5px;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 채널 편집 — 실제 버튼이므로 44px(§43) */
.mg-edit{width:44px;height:44px;border-radius:11px;background:var(--bg-surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;align-self:flex-end;}
.mg-edit iconify-icon{font-size:17px;color:var(--text-secondary);}
/* 정산 요약 */
.mg-earn{margin:6px 16px 2px;border-radius:18px;padding:16px;background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));}
.mg-earn .row{display:flex;align-items:flex-end;justify-content:space-between;}
.mg-earn .lab{font-size:11.5px;color:var(--label-soft);font-weight:600;}
.mg-earn .big{font-size:23px;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:6px;margin-top:3px;}
.mg-earn .big iconify-icon{font-size:20px;color:var(--gold);}
.mg-earn .r{text-align:right;}
.mg-earn .mid{font-size:16px;font-weight:800;color:var(--text-primary);margin-top:3px;}
/* 정산 신청 — 43px 로 1px 모자랐다(§43) */
.mg-settle{margin-top:14px;background:#fff;color:var(--accent-deep);font-size:14px;font-weight:800;text-align:center;padding:11px;min-height:44px;display:flex;align-items:center;justify-content:center;border-radius:13px;cursor:pointer;}
.mi .t .ts{display:block;font-size:11.5px;font-weight:500;color:var(--text-muted);margin-top:1px;}
/* by-dlg 공통 확장 */
.by-dlg textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text-primary);font-size:14px;font-family:inherit;resize:none;line-height:1.5;}
.by-dlg textarea:focus{outline:none;border-color:var(--accent);}
.by-dlg .fld label .hint{font-weight:500;color:var(--text-muted);}
.by-dlg .dbtn2{background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:800;text-align:center;padding:11px;border-radius:12px;cursor:pointer;min-height:44px;box-sizing:border-box}
.by-dlg .hd2{font-size:13px;font-weight:800;color:var(--text-secondary);margin:14px 0 10px;}
.by-dlg .dt .dt-c{display:inline-block;min-width:20px;text-align:center;font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent);border-radius:9px;padding:1px 7px;margin-left:6px;vertical-align:middle;}
.by-dlg .dnote iconify-icon{font-size:14px;vertical-align:-2px;margin-right:3px;color:var(--accent);}
.by-dlg .dnote b{color:var(--text-primary);}
/* 채널 편집 */
.by-dlg .ce-cover{height:96px;border-radius:14px;background:linear-gradient(120deg,var(--accent-dim),var(--accent) 60%,var(--live));position:relative;margin-bottom:14px;}
.by-dlg .ce-cover .cam{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--text-primary);background:rgba(0,0,0,.42);padding:6px 11px;border-radius:20px;cursor:pointer;}
.by-dlg .ce-av{display:flex;justify-content:center;margin:-42px 0 12px;position:relative;z-index:2;}
.by-dlg .ce-av .av{width:76px;height:76px;position:relative;border:3px solid var(--bg-surface);background-color:var(--accent);}
.by-dlg .ce-av .cam{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-surface);}
.by-dlg .ce-av .cam iconify-icon{font-size:14px;color:var(--text-primary);}
.by-dlg .ce-cats{display:flex;flex-wrap:wrap;gap:8px;}
.by-dlg .ce-cats .chip{font-size:12.5px;font-weight:700;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);padding:7px 13px;border-radius:20px;cursor:pointer;}
.by-dlg .ce-cats .chip.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent);}
/* 일정 관리 */
.by-dlg .se-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.by-dlg .se-row{display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border-radius:13px;padding:11px 13px;}
.by-dlg .se-row .dt2{flex:none;text-align:center;width:46px;}
.by-dlg .se-row .dt2 b{display:block;font-size:13px;font-weight:800;color:var(--accent);}
.by-dlg .se-row .dt2 span{font-size:11px;color:var(--text-muted);}
.by-dlg .se-row .in{flex:1;min-width:0;}
.by-dlg .se-row .in .t{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-dlg .se-row .in .sc{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:4px;margin-top:2px;}
.by-dlg .se-row .in .sc iconify-icon{font-size:12px;}
.by-dlg .se-row .del{flex:none;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;}
.by-dlg .se-row .del iconify-icon{font-size:16px;}
.by-dlg .se-empty{text-align:center;font-size:13px;color:var(--text-muted);padding:18px 0;}
.by-dlg .se-add{background:var(--bg-elevated);border-radius:14px;padding:13px;margin-top:6px;}
.by-dlg .se-add .hd2{margin:0 0 10px;}
.by-dlg .se-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.by-dlg .se-add input{width:100%;background:var(--bg-surface);border:1px solid var(--border);border-radius:11px;padding:11px 13px;color:var(--text-primary);font-size:14px;font-family:inherit;margin-bottom:8px;}
.by-dlg .se-add input:focus{outline:none;border-color:var(--accent);}
.by-dlg .se-grid input{margin-bottom:0;}
.by-dlg .se-scope{display:flex;gap:8px;margin-bottom:10px;}
.by-dlg .sc-opt{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border);padding:9px;border-radius:11px;cursor:pointer;}
.by-dlg .sc-opt.on{color:var(--on-accent);background:var(--accent);border-color:var(--accent);}
/* 매니저 관리 */
.by-dlg .mgr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:2px;}
.by-dlg .mgr-row{display:flex;align-items:center;gap:11px;background:var(--bg-elevated);border-radius:13px;padding:10px 13px;}
.by-dlg .mgr-row .av{width:38px;height:38px;flex:none;background-color:var(--accent);}
.by-dlg .mgr-row .in{flex:1;min-width:0;}
.by-dlg .mgr-row .in .nm{font-size:14px;font-weight:700;}
.by-dlg .mgr-row .in .hd{font-size:11.5px;color:var(--text-muted);}
.by-dlg .mgr-row .rm{flex:none;font-size:12px;font-weight:700;color:var(--live);border:1px solid var(--border);padding:6px 12px;border-radius:10px;cursor:pointer;}
.by-dlg .mgr-row .ap{flex:none;font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent);padding:6px 13px;border-radius:10px;cursor:pointer;}
.by-dlg .cand-list{display:flex;flex-direction:column;gap:7px;margin-top:9px;max-height:230px;overflow-y:auto;}
.by-dlg .mgr-cand{display:flex;flex-direction:column;gap:7px;}
.by-dlg .cand{display:flex;align-items:center;gap:10px;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:9px 12px;cursor:pointer;}
.by-dlg .cand .av{width:32px;height:32px;flex:none;background-color:var(--bg-elevated);}
.by-dlg .cand .nm{flex:1;font-size:13.5px;font-weight:600;}
.by-dlg .cand .add{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent);padding:6px 11px;border-radius:10px;}
.by-dlg .cand .add iconify-icon{font-size:13px;}
/* 정산 */
.by-dlg .stl-card{background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));border-radius:16px;padding:18px;text-align:center;margin-bottom:12px;}
.by-dlg .stl-card .lab{font-size:12px;color:var(--label-soft);font-weight:600;}
.by-dlg .stl-card .amt{font-size:28px;font-weight:800;color:var(--text-primary);margin:4px 0 2px;}
.by-dlg .stl-card .sub{font-size:11.5px;color:var(--label-soft);display:flex;align-items:center;justify-content:center;gap:4px;}
.by-dlg .stl-card .sub iconify-icon{font-size:12px;color:var(--gold);}
.by-dlg .stl-card .dbtn2{margin-top:14px;background:#fff;color:var(--accent-deep);}
.by-dlg .stl-acct{display:flex;align-items:center;justify-content:space-between;background:var(--bg-elevated);border-radius:13px;padding:13px;margin-bottom:6px;}
.by-dlg .stl-acct .lab{font-size:11px;color:var(--text-muted);}
.by-dlg .stl-acct .acc{font-size:13.5px;font-weight:700;margin-top:2px;}
.by-dlg .stl-acct .chg{font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;}
.by-dlg .stl-hist{display:flex;flex-direction:column;}
.by-dlg .sh-row{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-top:1px solid var(--border);}
.by-dlg .sh-row:first-child{border-top:none;}
.by-dlg .sh-row .d{font-size:13px;font-weight:600;}
.by-dlg .sh-row .s{font-size:11px;color:var(--text-muted);margin-top:1px;}
.by-dlg .sh-row .r{text-align:right;}
.by-dlg .sh-row .a{font-size:13.5px;font-weight:800;}
.by-dlg .sh-row .st{font-size:11px;color:var(--success);margin-top:1px;}

/* ── 역할 적응 (마이 BJ 배지 / 데모 토글) ── */
.prof .nm .bj-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--live));padding:3px 9px;border-radius:20px;vertical-align:middle;margin-left:6px;}
.prof .nm .bj-badge iconify-icon{font-size:12px;}
.my-demo{margin:0 16px 24px;text-align:center;font-size:12px;font-weight:600;color:var(--text-muted);border:1px dashed var(--border);border-radius:12px;padding:11px;cursor:pointer;}
/* BJ FAB 퀵 런치 (dialog-bj-launch) */
.by-dlg .bl-card{display:flex;align-items:center;gap:13px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:15px;padding:14px;margin-bottom:10px;cursor:pointer;}
.by-dlg .bl-card.hot{border-color:transparent;background:linear-gradient(135deg,var(--accent-soft),var(--accent-dim));}
.by-dlg .bl-card .ic{width:44px;height:44px;border-radius:12px;flex:none;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;}
.by-dlg .bl-card.hot .ic{background:rgba(255,255,255,.16);}
.by-dlg .bl-card .ic iconify-icon{font-size:22px;color:var(--accent);}
.by-dlg .bl-card.hot .ic iconify-icon{color:var(--text-primary);}
.by-dlg .bl-card .in{flex:1;min-width:0;}
.by-dlg .bl-card .in .t{font-size:15px;font-weight:800;}
.by-dlg .bl-card.hot .in .t{color:var(--text-primary);}
.by-dlg .bl-card .in .s{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.by-dlg .bl-card.hot .in .s{color:#D8CFF2;}
.by-dlg .bl-card .c{font-size:19px;color:var(--text-muted);}
.by-dlg .bl-card.hot .c{color:rgba(255,255,255,.7);}

/* ── 로딩/빈 상태 (실 API 배선) ── */
.by-loading{display:flex;justify-content:center;align-items:center;padding:80px 0;}
.by-loading .spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:bySpin .8s linear infinite;}
@keyframes bySpin{to{transform:rotate(360deg)}}
.by-empty{text-align:center;color:var(--text-muted);font-size:14px;padding:60px 20px;}
.sec-head .t .cnt{font-size:12px;font-weight:800;color:var(--on-accent);background:var(--accent);border-radius:9px;padding:1px 8px;margin-left:6px;vertical-align:middle;}

/* ── 로그인/회원가입 (dialog-login — PC·모바일 공용 단일 구현) ── */
.by-loginwrap .byl{padding:26px 18px 20px;color:var(--text-primary);}
.byl-brand{text-align:center;margin-bottom:20px;}
.byl-mark{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;margin-bottom:12px;}
.byl-mark .by-mark{width:66px;height:66px;filter:drop-shadow(0 0 8px rgba(255,120,205,.7)) drop-shadow(0 0 16px rgba(255,90,190,.4));}
.byl-title{font-size:22px;font-weight:800;letter-spacing:-.3px;}
.byl-sub{font-size:13px;color:var(--text-muted);margin-top:6px;}
.byl-social{display:flex;flex-direction:column;gap:9px;}
.byl-soc{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;width:100%;height:48px;border:0;border-radius:12px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;}
.byl-soc:active{opacity:.9;}
.byl-soc .ic{position:absolute;left:16px;display:inline-flex;align-items:center;font-size:18px;}
.byl-soc-kakao{background:#FEE500;color:#191919;}
.byl-soc-naver{background:#03C75A;color:var(--text-primary);}.byl-soc-naver .ic{font-weight:900;font-size:17px;}
.byl-soc-google{background:#fff;color:#1f1f1f;border:1px solid #dadce0;}
.byl-soc-line{background:#06C755;color:var(--text-primary);}.byl-soc-line .ic{font-size:20px;}
.byl-soc-apple{background:#fff;color:#111;}
.byl-or{display:flex;align-items:center;gap:12px;margin:18px 0 16px;color:var(--text-muted);font-size:12px;}
.byl-or::before,.byl-or::after{content:'';flex:1;height:1px;background:var(--border);}
.byl-form{display:flex;flex-direction:column;gap:9px;}
.byl-in{width:100%;box-sizing:border-box;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:13px 14px;font-size:15px;color:var(--text-primary);outline:none;font-family:inherit;}
.byl-in::placeholder{color:var(--text-muted);}
.byl-in:focus{border-color:var(--accent);}
.byl-err{font-size:12.5px;color:var(--live);min-height:0;padding:0 2px;display:none;}
.byl-err.on{display:block;}
.byl-submit{width:100%;height:50px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:3px;}
.byl-submit:active{opacity:.92;}.byl-submit:disabled{opacity:.6;}
.byl-toggle{text-align:center;font-size:13.5px;color:var(--text-muted);margin-top:16px;}
.byl-toggle a{color:var(--accent);font-weight:700;cursor:pointer;}

/* ── 마이 게스트 로그인 CTA ── */
.my-guest{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px 20px;cursor:pointer;}
.my-guest .av{background:var(--bg-elevated);margin-bottom:6px;}
.my-guest .gt{font-size:18px;font-weight:800;}
.my-guest .gs{font-size:13px;color:var(--text-muted);}
.my-guest .glogin{margin-top:12px;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:14px;font-weight:800;padding:11px 28px;border-radius:24px;}
/* 채팅 입력 (div→input 전환, 실시간 WS). .chat-in pill 유지 + input 리셋만 */
input.chat-in{outline:none;font-family:inherit;color:var(--text-primary);box-sizing:border-box;display:block;}
input.chat-in::placeholder{color:var(--text-faint);}
input.chat-in:focus{border-color:var(--accent);}

/* 채널 섹션 빈/로딩 상태 (목업 제거 대체) */
/* 빈 상태는 .by-empty 로 통일(BY_UI.empty). .ch-empty 는 채널 전용 여백만 덮어쓴다.
   ⚠️ 클래스가 둘로 갈려 있어 같은 의미의 마크업이 화면마다 달랐다(2026-08-27 통일). */
.ch-empty{padding:22px 14px;font-size:13px;}

/* 마이 하단 사업자정보 푸터 (전자상거래법) */
.by-footer{margin:20px 16px 0;padding:22px 18px 18px;background:var(--bg-surface);border:1px solid var(--border);border-radius:16px;color:var(--text-muted);font-size:11.5px;line-height:1.75;text-align:center;}
.by-footer .bf-links{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:center;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--border);}
/* 약관·정책 링크: 글자 크기는 유지하고 **세로 패딩으로 히트영역만** 44px.
   배경이 없어 보이는 크기는 그대로다 — 줄 간격만 조금 넉넉해진다(§43). */
.by-footer .bf-links a{color:var(--text-secondary);font-weight:600;font-size:12.5px;cursor:pointer;transition:opacity .15s;
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;}
.by-footer .bf-row a{display:inline-flex;align-items:center;min-height:44px;}
.by-footer .bf-links a:active{opacity:.55;}
.by-footer .bf-links span{opacity:.3;}
.by-footer .bf-co{color:var(--text-secondary);font-weight:700;font-size:13px;letter-spacing:.2px;margin-bottom:6px;}
.by-footer .bf-row{color:var(--text-muted);}
.by-footer .bf-row a{color:var(--text-muted);text-decoration:none;}
.by-footer .bf-copy{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);opacity:.65;font-size:10.5px;letter-spacing:.3px;}
/* 파트너 주관사 라벨 = 너울(메인)과 피우다(파트너) 사이 구분 */
.by-footer .bf-partner-label{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:10.5px;font-weight:600;letter-spacing:.4px;color:var(--text-muted);opacity:.85;margin-bottom:6px;}

/* 알림 벨 배지 */
/* 🔎 상단바 액션(검색·알림·지갑) 터치타겟 — 아이콘 자체가 22x22 라 44px 미달(§43).
   실제 버튼이므로 **히트영역을 44px 로** 키운다. 아이콘 크기는 그대로 두므로
   보이는 그림은 안 변한다(패딩은 클릭 판정에 포함된다). */
.topbar > a, .topbar > button, .topbar > [onclick], .topbar .ntbell,
.topbar > iconify-icon, .topbar > [data-act], .topbar > .bk{
  /* ⚠️ `[data-act]`/`.bk` 가 빠져 있었다 — 뒤로가기는 <span class="bk" data-act="back">
     라서 위 셀렉터 어디에도 안 걸렸다. 실측 14x21(채널 관리·일정·정산 전 화면 공통). */
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.topbar .ntbell{position:relative;cursor:pointer;}
.topbar .ntbell .nbadge{position:absolute;top:-6px;right:-7px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--live);color:var(--text-primary);font-size:9.5px;font-weight:800;line-height:15px;text-align:center;box-shadow:0 0 0 2px var(--bg-base);}
/* 알림 패널 */
.by-notif .nh{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 14px;}
.by-notif .nh .t{font-size:17px;font-weight:800;}
.by-notif .nh .allread{font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;padding:5px 10px;border-radius:8px;background:var(--bg-elevated);}
.by-notif .nlist{display:flex;flex-direction:column;}
.by-notif .nrow{display:flex;align-items:center;gap:11px;padding:12px 6px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.by-notif .nrow:active{background:var(--bg-elevated);}
.by-notif .nrow.unread{background:rgba(124,92,255,.06);}
/* ⚠️ 알림 아바타 class="nav" 가 전역 GNB `.nav`(position:absolute;left:0;right:0;bottom:0)와 충돌 → 모든 아바타가 시트 좌하단에 겹침.
   position/left/right/bottom 을 명시 리셋해 행 안의 flex 자식으로 복구. (2026-07-24) */
.by-notif .nav{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--bg-elevated) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:18px;padding:0;z-index:auto;}
.by-notif .nav.ic iconify-icon{color:var(--accent);}
.by-notif .nbody{flex:1;min-width:0;}
.by-notif .nbody .nt{font-size:13.5px;font-weight:700;margin-bottom:2px;}
.by-notif .nbody .nb{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-notif .nmeta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11px;color:var(--text-muted);flex-shrink:0;}
.by-notif .nmeta .ndot{width:8px;height:8px;border-radius:50%;background:var(--live);}
.by-notif .nempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 0;color:var(--text-muted);font-size:13px;}
.by-notif .nempty iconify-icon{font-size:34px;opacity:.5;}

/* 검색 패널 */
.by-search .sh{padding:2px 2px 12px;}
.by-search .sbox{display:flex;align-items:center;gap:9px;background:var(--bg-elevated);border-radius:12px;padding:11px 13px;}
.by-search .sbox iconify-icon{font-size:18px;color:var(--text-muted);flex-shrink:0;}
.by-search .sbox input{flex:1;background:transparent;border:0;outline:0;color:var(--text-primary);font-size:15px;min-width:0;}
.by-search .sbox .sclear{cursor:pointer;color:var(--text-muted);display:flex;}
.by-search .sresult{display:flex;flex-direction:column;}
.by-search .shint{padding:44px 12px;text-align:center;color:var(--text-muted);font-size:13px;}
.by-search .ssec{font-size:12px;font-weight:700;color:var(--text-muted);padding:14px 4px 8px;}
.by-search .ssec span{color:var(--accent);}
.by-search .srow{display:flex;align-items:center;gap:11px;padding:10px 6px;border-radius:10px;cursor:pointer;transition:background .12s;}
.by-search .srow:active{background:var(--bg-elevated);}
.by-search .sav{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:var(--bg-elevated) center/cover no-repeat;}
.by-search .sbody{flex:1;min-width:0;}
.by-search .sbody .st{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-search .sbody .sb{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-search .slive{flex-shrink:0;font-size:10px;font-weight:800;color:var(--text-primary);background:var(--live);padding:2px 7px;border-radius:6px;}

/* 신고 패널 */
.by-report .rh{padding:2px 2px 10px;}
.by-report .rh .t{font-size:17px;font-weight:800;}
.by-report .rtarget{font-size:12.5px;color:var(--text-muted);background:var(--bg-elevated);border-radius:9px;padding:9px 12px;margin-bottom:6px;}
.by-report .rtarget b{color:var(--text-secondary);}
.by-report .rsec{font-size:12px;font-weight:700;color:var(--text-muted);padding:14px 2px 8px;}
.by-report .rchips{display:flex;flex-wrap:wrap;gap:8px;}
.by-report .rchip{font-size:13px;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid transparent;border-radius:20px;padding:8px 15px;cursor:pointer;}
.by-report .rchip.sel{color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--live));}
.by-report .rdetail{width:100%;box-sizing:border-box;min-height:80px;resize:none;background:var(--bg-elevated);border:0;border-radius:11px;padding:12px;color:var(--text-primary);font-size:13.5px;line-height:1.6;outline:0;}
.by-report .rbtn{margin-top:18px;text-align:center;font-size:15px;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--live));border-radius:24px;padding:13px;cursor:pointer;}
.by-report .rbtn.busy{opacity:.6;}

/* 댓글 패널 */
.by-comments{display:flex;flex-direction:column;height:100%;}
.by-comments .ch{padding:2px 2px 12px;flex-shrink:0;}
.by-comments .ch .t{font-size:17px;font-weight:800;}
.by-comments .clist{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:16px;padding:4px 2px 12px;}
.by-comments .crow{display:flex;gap:10px;}
.by-comments .cav{width:36px;height:36px;border-radius:50%;flex-shrink:0;background:var(--bg-elevated) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.by-comments .cbody{flex:1;min-width:0;}
.by-comments .cmeta{display:flex;align-items:center;gap:8px;margin-bottom:3px;}
.by-comments .cn{font-size:13px;font-weight:700;}
.by-comments .ct{font-size:11px;color:var(--text-muted);}
.by-comments .cx{font-size:14px;line-height:1.5;color:var(--text-secondary);word-break:break-word;white-space:pre-wrap;}
.by-comments .cempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 0;color:var(--text-muted);font-size:13px;}
.by-comments .cempty iconify-icon{font-size:32px;opacity:.5;}
.by-comments .cbar{display:flex;align-items:center;gap:9px;padding:10px 0 2px;border-top:1px solid var(--border);flex-shrink:0;}
.by-comments .cbar input{flex:1;background:var(--bg-elevated);border:0;outline:0;border-radius:22px;padding:11px 16px;color:var(--text-primary);font-size:14px;min-width:0;}
.by-comments .csend{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;}

/* 시청 기록 패널 */
.by-history .hh{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 14px;}
.by-history .hh .t{font-size:17px;font-weight:800;}
.by-history .hh .hclear{font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;padding:5px 10px;border-radius:8px;background:var(--bg-elevated);}
.by-history .hlist{display:flex;flex-direction:column;}
.by-history .hrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);cursor:pointer;}
.by-history .hrow:active{background:var(--bg-elevated);}
.by-history .hth{width:64px;height:40px;border-radius:8px;flex-shrink:0;background:var(--bg-elevated) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--text-muted);}
.by-history .hth.ic iconify-icon{font-size:18px;color:var(--accent);}
.by-history .hbody{flex:1;min-width:0;}
.by-history .hbody .ht{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-history .hbody .hb{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.by-history .hgo{color:var(--text-muted);flex-shrink:0;font-size:18px;}
.by-history .hempty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:52px 0;color:var(--text-muted);font-size:13px;}
.by-history .hempty iconify-icon{font-size:32px;opacity:.5;}

/* BJ 멤버십 티어 관리 패널 */
.by-mmg .mmh{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 6px;}
.by-mmg .mmh .t{font-size:17px;font-weight:800;}
.by-mmg .mmh .mmadd{font-size:13px;font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--live));padding:7px 13px;border-radius:9px;cursor:pointer;}
.by-mmg .mmhint{font-size:12.5px;color:var(--text-muted);margin-bottom:14px;}
.by-mmg .mmlist{display:flex;flex-direction:column;gap:10px;}
.by-mmg .mmrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:var(--bg-elevated);cursor:pointer;}
.by-mmg .mmrow.off{opacity:.55;}
.by-mmg .mmr-l{flex:1;min-width:0;}
.by-mmg .mmr-name{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;}
.by-mmg .mmr-badge{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);}
.by-mmg .mmr-sub{font-size:12.5px;color:var(--text-muted);margin-top:3px;}
.by-mmg .mmr-edit{font-size:12.5px;font-weight:600;color:var(--accent);flex-shrink:0;}
.by-mmg .mmempty{padding:44px 12px;text-align:center;color:var(--text-muted);font-size:13px;}
.by-mmg .mmform{display:flex;flex-direction:column;gap:14px;}
.by-mmg .mmform .mmf-h{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;margin-bottom:2px;}
.by-mmg .mmform .mmf-back{cursor:pointer;display:flex;color:var(--text-secondary);}
.by-mmg .mmform label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-muted);}
.by-mmg .mmform input,.by-mmg .mmform textarea{background:var(--bg-elevated);border:0;border-radius:10px;padding:12px;color:var(--text-primary);font-size:14px;outline:0;}
.by-mmg .mmform textarea{min-height:80px;resize:none;line-height:1.5;}
.by-mmg .mmform .mmf-r2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.by-mmg .mmform .mmf-chk{flex-direction:row;align-items:center;gap:9px;color:var(--text-secondary);}
.by-mmg .mmform .mmf-chk input{width:17px;height:17px;}
.by-mmg .mmform .mmf-btn{margin-top:8px;text-align:center;font-size:15px;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--live));border-radius:24px;padding:13px;cursor:pointer;}
.by-mmg .mmform .mmf-btn.busy{opacity:.6;}

/* ── safe-area: 프레임워크 레이어 override (viewport-fit=cover, 2026-07-22) ──
   하단시트 패널(충전/로그인/기프트 등) 버튼이 홈 인디케이터/네비바 회피 + PAGE 헤더 노치 회피 + 풀스크린 다이얼로그 인셋 */
/* ⚠️ 패널 하단 safe-bot 은 .side-panel-content 하단 padding(line 402)에서 처리 → 컨테이너에 또 주면 double.
   컨테이너는 배경만(line 398). 콘텐츠 bottom = calc(22px + safe-bot). */
/* 🔴 고정 height 에 padding 을 더하면 안 된다 — border-box 라 **콘텐츠 박스가 짓눌린다**.
   프레임워크는 .sub-page-header/.sub-page-footer 에 height:var(--nskit-page-header-height)
   (=64px) 를 **고정**으로 준다. 여기에 padding-top: calc(12px + safe-top) 을 얹으면
   아이폰 노치(safe-top≈59px)에서 콘텐츠 박스가 **1px** 이 되고, 뒤로가기 버튼과 제목이
   헤더 밖으로 밀려나 .sub-page-content 뒤에 가린다.
   → 화면엔 헤더의 아래 테두리(라인)만 남고 **돌아갈 방법이 사라진다**.
   실기기 2026-08-29 확인: 마이>꾸미기 등 PAGE 진입 후 아이폰에서 갇힘.
   데스크톱은 safe-top=0 이라 재현되지 않아 오래 잠복했다.

   ✅ 안전영역은 패딩으로 '먹는' 게 아니라 **높이를 늘려서** 확보한다.
   계측(수정 후): safe-top 0/47/59 → 헤더 64/111/123px, 콘텐츠박스 항상 64px,
                  뒤로가기·제목 전부 헤더 안, 콘텐츠 겹침 0. */
.sub-page-header{
  height: calc(var(--nskit-page-header-height) + var(--safe-top)) !important;
  padding-top: var(--safe-top) !important;
  box-sizing: border-box !important;
}
.sub-page-footer{
  height: calc(var(--nskit-page-header-height) + var(--safe-bot)) !important;
  padding-bottom: var(--safe-bot) !important;
  box-sizing: border-box !important;
}
/* 🔑 안전영역 소유 규칙 — **크롬(헤더/푸터)이 흡수하고, 스크롤 영역은 남은 것만 갖는다.**
   헤더+콘텐츠+푸터에서 가운데만 스크롤인 구조의 이유가 이것이다:
   노치·홈인디케이터·안드로이드 네비바 밑으로 **콘텐츠가 흘러들지 않게** 하려면
   위아래 인셋을 고정 크롬이 먹어야 한다.

     헤더 있음 → 헤더가 safe-top 흡수 (height 를 늘려서. 패딩으로 먹으면 §63)
     푸터 있음 → 푸터가 safe-bot 흡수
     푸터 없음 → **스크롤 영역이 safe-bot 을 패딩으로 흡수**   ← 아래 규칙

   ⚠️ byeol 의 PAGE 12종은 **전부 푸터가 없다** → 이 규칙이 없으면 마지막 항목이
      홈 인디케이터/네비바에 가린다. 프레임워크가 푸터 유무를 .with-footer 로
      알려주므로 :not() 으로 갈라 **이중 적용을 피한다**. */
.sub-page-content:not(.with-footer){ padding-bottom: calc(16px + var(--safe-bot)) !important; }

/* 뒤로가기 터치타겟 — 프레임워크 기본이 20x36 이라 44px 미달(§43).
   장식이 아니라 **실제 버튼**이므로 보이는 크기를 키우는 게 맞다(도트와 처방이 반대).
   ⚠️ 프레임워크 승격 후보 — 기본 헤더의 back 버튼은 전 프로젝트가 공유한다. */
.sub-page-header .page-back{
  min-width:44px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
/* 모바일 풀스크린 다이얼로그(:has 100vh 계열, §22) — 상/하단 인셋 */
@media (max-width:767px){
  .dialog-container.super, .dialog-content{ padding-bottom: var(--safe-bot); }
}

/* ── 최초 1회 온보딩 (국가기반 초기언어 + 푸시 동의), 2026-07-22 ── */
#by-onboard{position:fixed;inset:0;z-index:100000;background:var(--bg-base,var(--bg-base));display:flex;flex-direction:column;overflow-y:auto;padding:calc(44px + var(--safe-top)) 24px calc(24px + var(--safe-bot));}
#by-onboard .obw{width:100%;max-width:400px;margin:auto;}
#by-onboard .ob-mark{width:64px;height:64px;display:block;margin:0 auto 14px;filter:drop-shadow(0 0 10px rgba(255,120,205,.7));}
#by-onboard .ob-title{font-size:22px;font-weight:800;color:var(--text-primary);text-align:center;margin-bottom:6px;}
#by-onboard .ob-sub{font-size:13.5px;color:var(--text-secondary,var(--text-faint));text-align:center;margin-bottom:26px;line-height:1.4;}
#by-onboard .ob-sec{font-size:11.5px;font-weight:700;color:var(--text-muted,#6B6685);margin:0 2px 10px;letter-spacing:.4px;}
#by-onboard .ob-langs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:24px;}
#by-onboard .ob-lang{display:flex;align-items:center;gap:9px;padding:12px 13px;border-radius:12px;background:var(--bg-elevated,#1A1530);border:2px solid transparent;cursor:pointer;color:var(--text-primary,#fff);font-size:14px;font-weight:600;}
#by-onboard .ob-lang .fl{font-size:19px;line-height:1;}
#by-onboard .ob-lang.sel{border-color:var(--accent,var(--accent));background:var(--accent-soft,rgba(124,92,255,.16));}
#by-onboard .ob-push{display:flex;align-items:center;gap:12px;padding:14px 15px;border-radius:12px;background:var(--bg-elevated,#1A1530);margin-bottom:26px;}
#by-onboard .ob-push .ic{font-size:24px;color:var(--accent,var(--accent));flex:none;}
#by-onboard .ob-push .tx{flex:1;}
#by-onboard .ob-push .tt{font-size:14px;font-weight:700;color:var(--text-primary);}
#by-onboard .ob-push .dd{font-size:12px;color:var(--text-secondary,var(--text-faint));margin-top:2px;line-height:1.35;}
#by-onboard .ob-tg{width:46px;height:28px;border-radius:14px;background:#3A3550;position:relative;flex:none;cursor:pointer;transition:background .18s;}
#by-onboard .ob-tg::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .18s;}
#by-onboard .ob-tg.on{background:var(--accent,var(--accent));}
#by-onboard .ob-tg.on::after{left:21px;}
#by-onboard .ob-start{width:100%;padding:15px;border-radius:24px;border:0;background:linear-gradient(135deg,var(--accent),var(--live));color:var(--on-accent);font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;}
#by-onboard .ob-start:active{opacity:.9;}

/* 데모(시드) 방송 카드 — 흐리게 + SOON 배지(회색), 탭 시 "출시 후 공개" 토스트. 실 방송(feat)만 진입. (2026-07-22) */
.card.demo,.hcard.demo,.feat.demo{opacity:.5;filter:saturate(.5);}
.card.demo .thumb::after,.hcard.demo .thumb::after,.feat.demo::after{content:"";position:absolute;inset:0;background:rgba(10,8,20,.35);}
.badge-live.soon{background:#4A4560;}
.badge-live.soon .dot{animation:none;background:#B9B4CC;}

/* BJ 방송 채팅 입력 (b-chat 은 pointer-events:none 이라 입력바는 별도) */
.bcast .b-chatbar{margin-bottom:10px;pointer-events:auto;}
.bcast .b-chatin{width:100%;box-sizing:border-box;background:rgba(20,16,40,.72);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:11px 16px;color:var(--text-primary);font-size:14px;outline:0;-webkit-appearance:none;}
.bcast .b-chatin::placeholder{color:var(--text-faint);}

/* ── 연결 상태 배너 (WS 끊김 → "연결이 원활하지 않습니다 · 연결 중…") ── */
#by-conn-banner{position:fixed;left:50%;top:calc(10px + var(--safe-top,0px));transform:translateX(-50%) translateY(-140%);
  z-index:200;display:flex;align-items:center;gap:8px;max-width:88vw;
  padding:8px 14px;border-radius:20px;background:rgba(20,16,40,.92);color:var(--text-primary);font-size:12.5px;font-weight:600;
  box-shadow:0 6px 20px rgba(0,0,0,.4);backdrop-filter:blur(8px);opacity:0;pointer-events:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s ease;white-space:nowrap;}
#by-conn-banner.show{transform:translateX(-50%) translateY(0);opacity:1;}
#by-conn-banner .cb-spin{width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);border-top-color:var(--text-primary);animation:cbSpin .8s linear infinite;}
@keyframes cbSpin{to{transform:rotate(360deg);}}

/* WS 끊김(연결 중) 동안 채팅/선물 입력 흐리게 → 입력 무시 유도. 영상·화면은 그대로. */
body.ws-offline #byRoomInput, body.ws-offline #bcInput,
body.ws-offline .room-bar .r-ic, body.ws-offline .b-chatbar{ opacity:.45; pointer-events:none; }

/* ── 후원 랭킹 패널 (podium/골바 탭) ── */
.rk-wrap{display:flex;flex-direction:column;height:100%;min-height:0;}
.rk-head{display:flex;align-items:center;gap:8px;padding:4px 4px 12px;font-size:16px;font-weight:800;color:var(--text,#fff);}
.rk-head iconify-icon{font-size:20px;color:var(--gold,var(--gold-lite));}
.rk-head .rk-ttl{flex:1;}
.rk-head .rk-total{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--gold,var(--gold-lite));}
.rk-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.rk-empty{padding:36px 0;text-align:center;color:var(--text-dim,#9a94ad);font-size:13px;}
.rk-row{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:12px;}
.rk-row:nth-child(odd){background:rgba(127,92,255,.05);}
.rk-no{flex:0 0 26px;text-align:center;font-size:14px;font-weight:800;color:var(--text-dim,#9a94ad);}
.rk-no.r1{color:#FFD24A;}.rk-no.r2{color:#CBD5E1;}.rk-no.r3{color:#E8925C;}
.rk-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#2a2440 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--accent-pale);}
.rk-nm{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rk-amt{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:800;color:var(--gold,var(--gold-lite));}

/* ── 게스트 프리뷰 (공유 유입/미로그인) ── */
.gp-badge{position:absolute;top:calc(64px + var(--safe-top,0px));left:50%;transform:translateX(-50%);z-index:6;
  display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:20px;
  background:rgba(20,16,40,.82);backdrop-filter:blur(6px);color:var(--text-primary);font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.35);}
.gp-badge .gp-dot{width:7px;height:7px;border-radius:50%;background:var(--gold,var(--gold-lite));animation:gpbl 1.2s infinite;}
@keyframes gpbl{50%{opacity:.3;}}
/* 벽 = **온전한 잠금화면**이다. 조작 레이어(`.room-l` z=2)보다 위(9)에 둔다.
   ⚠️ 낮추지 말 것 — 1 로 내리면 `.room-l`(full-height) 이 벽을 덮어
      **벽 자신의 CTA·나가기까지 죽는다**(실측). 그래서 뒤로가기를 살리는 방향이 아니라
      **출구를 벽 안에 두는 방향**이 맞다 → `.gp-w-exit`.
   (`.room-video` 는 z-index:auto 라 스태킹 컨텍스트를 안 만든다 — 벽의 z 가 `.room-l` 과 직접 겨룬다.) */
.gp-wall{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  background:rgba(8,6,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:24px;text-align:center;}
.gp-w-in{max-width:300px;color:var(--text-primary);}
.gp-w-in iconify-icon{font-size:34px;color:var(--gold,var(--gold-lite));}
.gp-w-ti{font-size:18px;font-weight:800;margin:12px 0 6px;}
.gp-w-sub{font-size:13.5px;color:var(--sub,#9A94AD);line-height:1.5;margin-bottom:20px;word-break:keep-all;}
.gp-w-exit{display:block;margin-top:12px;padding:12px;min-height:44px;box-sizing:border-box;color:var(--text-secondary);font-size:13.5px;font-weight:700;text-decoration:none;cursor:pointer;}
.gp-w-cta{display:block;min-height:44px;box-sizing:border-box;padding:14px;border-radius:14px;background:linear-gradient(135deg,var(--accent,var(--accent)),#a37bff);
  color:var(--on-accent);font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;box-shadow:0 8px 22px rgba(124,92,255,.42);}

/* ── 채팅 멤버십 뱃지 + 닉네임 강조 (방장/매니저/멤버) ── */
.mt .cbadge{display:inline-flex;align-items:center;gap:2px;font-size:11px;line-height:1;margin-right:4px;padding:1px 5px;border-radius:6px;font-weight:800;vertical-align:middle;}
.mt .cbadge.bj{background:rgba(255,217,138,.18);}
.mt .cbadge.mod{background:rgba(46,212,119,.18);}
.mt .cbadge.mem{background:var(--accent-soft);color:var(--accent);font-size:10.5px;}
/* 닉네임 색상: 일반=회색(기본), 방장=골드, 매니저=그린, 멤버=액센트 */
.mt .u{color:var(--text-secondary);}
.mt .u.role-bj{color:var(--gold,var(--gold-lite));font-weight:800;}
.mt .u.role-mod{color:var(--success);font-weight:700;}
.mt .u.role-member{color:var(--accent);font-weight:700;}

/* ── 멤버십 가입 패널: 별 잔액 + 티어 뱃지 ── */
.mem-bal{display:flex;align-items:center;gap:6px;font-weight:800;font-size:15px;color:var(--text-primary);margin:2px 2px 12px;}
.mem-bal .by-ico-star{width:18px;height:18px;}
.mem-bal .chg{margin-left:auto;font-size:12px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:14px;cursor:pointer;}
.mtier-badge{display:inline-block;font-size:10.5px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:6px;margin-right:6px;vertical-align:middle;}
.mtier .pr{display:flex;align-items:center;gap:3px;}
.mtier .pr .by-ico-star{width:15px;height:15px;}

/* 채널 팬 랭킹 잠금(비구독자) */
.ch-rk-lock{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 0;color:var(--text-muted);font-size:13px;}
.ch-rk-lock iconify-icon{font-size:26px;opacity:.6;}

/* 소통 더보기 칩 (채널 섹션 헤더) */
.ch-sec .h{display:flex;align-items:center;gap:6px;}
.ch-sec .h .ch-more{margin-left:auto;font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;background:var(--accent-soft);padding:3px 10px;border-radius:12px;}
/* ── 소통글 전용 시트 (panel-posts) ── */
.panel-posts, .by-dlg .pp-tabs{}
.pp-tabs{display:flex;gap:8px;margin:2px 0 12px;}
.pp-tab{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--text-muted);padding:8px 0;border-radius:12px;background:var(--bg-elevated);cursor:pointer;}
.pp-tab.sel{color:var(--on-accent);background:var(--accent);}
.pp-list{display:flex;flex-direction:column;gap:14px;}
.pp-post{border-bottom:1px solid var(--border);padding-bottom:14px;}
.pp-h{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pp-h .av.lg{width:38px;height:38px;border-radius:50%;background:var(--bg-elevated) center/cover no-repeat;flex-shrink:0;}
.pp-meta .nm{font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:6px;}
.pp-meta .tm{font-size:11.5px;color:var(--text-muted);}
.pp-chip{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:6px;}
.pp-chip.s0{color:var(--accent);background:var(--accent-soft);}
.pp-chip.s1{color:var(--success);background:rgba(46,212,119,.14);}
.pp-chip.s2{color:var(--gold,var(--gold-lite));background:rgba(255,217,138,.16);}
.pp-tx{font-size:13.5px;line-height:1.6;color:var(--text-primary);white-space:pre-wrap;word-break:break-word;}
.pp-img{margin-top:8px;border-radius:12px;height:180px;background:var(--bg-elevated) center/cover no-repeat;}
.pp-act{display:flex;gap:16px;margin-top:9px;color:var(--text-muted);font-size:12.5px;}
.pp-act span{display:inline-flex;align-items:center;gap:4px;}
.pp-lock{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 0;color:var(--text-muted);font-size:13px;}
.pp-lock iconify-icon{font-size:30px;opacity:.55;}
.pp-lock-cta{margin-top:4px;font-size:13px;font-weight:800;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),#a37bff);padding:9px 20px;border-radius:14px;cursor:pointer;}

/* ── 방송 통계 (panel-stats) ── */
.st-sec{font-size:12px;font-weight:800;color:var(--text-secondary);margin:8px 2px 10px;}
.st-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:6px;}
.st-kpis .st-kpi:first-child{grid-column:1 / -1;}
.st-kpi{background:var(--bg-elevated);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:2px;}
.st-kpi iconify-icon{font-size:18px;color:var(--accent);}
.st-kpi.gold iconify-icon{color:var(--gold,var(--gold-lite));}
.st-kpi .v{font-size:20px;font-weight:800;color:var(--text-primary);}
.st-kpi .l{font-size:11.5px;color:var(--text-muted);font-weight:600;}
.st-list{display:flex;flex-direction:column;}
.st-row{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--border);}
.st-r-l{flex:1;min-width:0;}
.st-r-l .t{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-r-l .s{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:3px;margin-top:2px;}
.st-r-l .s iconify-icon{font-size:12px;}
.st-live{font-size:9px;font-weight:800;color:var(--text-primary);background:var(--live,var(--live));padding:1px 5px;border-radius:5px;vertical-align:middle;}
.st-r-r{font-weight:800;font-size:14px;color:var(--gold,var(--gold-lite));display:flex;align-items:center;gap:3px;flex-shrink:0;}
.st-r-r .by-ico-star{width:14px;height:14px;}

/* ── 일정 관리 강화 (page-schedule-edit) ── */
.sched-dt{display:flex;align-items:center;justify-content:space-between;}
.se-hidtog{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;padding:4px 10px;border-radius:12px;background:var(--bg-elevated);}
.se-hidtog.on{color:var(--accent);background:var(--accent-soft);}
.se-hidtog iconify-icon{font-size:14px;}
.se-row{cursor:pointer;}
.se-row.hid{opacity:.5;}
.se-row .rst{font-size:12px;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:12px;flex-shrink:0;}
.se-formbtns{display:flex;gap:8px;}
.se-formbtns .dbtn2{flex:1;}
.dbtn2.ghost{background:var(--bg-elevated);color:var(--text-secondary);}

/* 선물 시트 짤짤이(랜덤)·앵콜 강조 */
.gifts .gift.petty .em{filter:saturate(1.2);}
.gifts .gift.petty{background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(255,61,113,.10));}
.gifts .gift.encore{outline:1px solid rgba(124,92,255,.35);}

/* ── 방송 오리엔테이션 적응 (영상 방향 vs 시청자 기기 방향) ── */
video[data-lk]{object-fit:cover;}                 /* 일치=몰입(꽉 채움) 기본 */
.room-video.fit video[data-lk]{object-fit:contain;}   /* 불일치=레터/필러박스(전체 프레임, 크롭 X) */
.room-video.fit{background:#000;}
/* 세로폰으로 가로방송 시청 = 유튜브형: 영상 상단 16:9 밴드 + 바로 아래 헤더/반응 + 채팅 리스트가 남은 공간 채움 */
/*   ⚠️ 영상 높이와 room-l 패딩탑을 동일 min(56.25vw,242px)로 = 영상 바로 아래 헤더 붙임(뷰포트>방폭일 때 vw 캡 불일치로 뜨는 틈 방지) */
.room.rv-land .room-video{inset:auto;top:0;left:0;right:0;width:100%;height:min(56.25vw,242px);background:#000;box-shadow:0 6px 18px rgba(0,0,0,.5);}
.room.rv-land .room-video::after{display:none;}
.room.rv-land .room-l{padding-top:calc(min(56.25vw,242px) + 10px);}
.room.rv-land .room-top{background:rgba(20,16,40,.5);border-radius:14px;padding:8px 10px;backdrop-filter:blur(4px);}
.room.rv-land .room-spacer{display:none;}   /* 유튜브형: 빈 스페이서 제거 → 채팅이 공간 채움 */
.room.rv-land .chat{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;justify-content:flex-end;-webkit-mask-image:none;mask-image:none;margin-top:10px;scrollbar-width:none;}
.room.rv-land .chat::-webkit-scrollbar{width:0;height:0;display:none;}   /* 스크롤바 숨김 */
.room.rv-land .chat .msg{opacity:1;}   /* 리스트 모드 = 페이드 없음 */
.room.rv-land .room-rail{bottom:calc(118px + var(--safe-bot,0px));}   /* 선물/입력바 위로 올려 침범 방지 */
.room-orient-hint{position:absolute;left:50%;bottom:calc(90px + var(--safe-bot,0px));transform:translateX(-50%);z-index:7;
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:20px;
  background:rgba(20,16,40,.85);backdrop-filter:blur(6px);color:var(--text-primary);font-size:12.5px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.4);}
.room-orient-hint iconify-icon{font-size:15px;color:var(--gold,var(--gold-lite));animation:rotHint 1.4s ease-in-out infinite;}
@keyframes rotHint{0%,100%{transform:rotate(0)}50%{transform:rotate(90deg)}}

/* (Phase1 #by-mode-switch/body.pc-mode 제거됨 2026-07-24 — PC=전용 셸(main-pc)로 대체. 버튼 스타일=byeol-pc.css) */

/* ── 소통글 작성 (page-post-edit) ── */
.pe-body{width:100%;box-sizing:border-box;min-height:120px;resize:vertical;background:var(--bg-elevated);border:1px solid var(--border);border-radius:14px;padding:14px;color:var(--text-primary);font-size:14px;line-height:1.6;margin-bottom:12px;}
.pe-img{height:120px;border-radius:14px;background:var(--bg-elevated);border:1px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);font-size:13px;cursor:pointer;margin-bottom:14px;overflow:hidden;}
.pe-img iconify-icon{font-size:26px;}
.pe-img-ok{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);color:var(--text-primary);padding:6px 12px;border-radius:14px;font-size:12.5px;font-weight:700;}
.pe-scope-label{font-size:12.5px;font-weight:800;color:var(--text-secondary);margin:2px 2px 8px;}

/* ── 선물코드 입력 (panel-promo) ── */
.by-promo .pm-code{width:100%;box-sizing:border-box;margin:14px 0 16px;background:var(--bg-elevated);border:1.5px solid var(--border);border-radius:14px;padding:15px;color:var(--text-primary);font-size:18px;font-weight:800;letter-spacing:2px;text-align:center;text-transform:uppercase;outline:none;}
.by-promo .pm-code:focus{border-color:var(--accent);}

/* ── 1:1 문의 (page-inquiry) ── */
.by-inq .inq-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.by-inq .inq-head .dt{flex:1;margin:0;}
.by-inq .inq-back{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);cursor:pointer;flex:0 0 auto;}
.by-inq .inq-back:hover{background:var(--bg-elevated);}
.by-inq .inq-new{display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:18px;background:var(--accent);color:var(--on-accent);font-size:13px;font-weight:700;cursor:pointer;flex:0 0 auto;}
.by-inq .inq-new iconify-icon{font-size:16px;}
.by-inq #inqList{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.by-inq .inq-item{background:var(--bg-elevated);border-radius:14px;padding:14px;cursor:pointer;transition:filter .15s;}
.by-inq .inq-item:hover{filter:brightness(1.08);}
.by-inq .inq-i-top,.by-inq .inq-d-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.by-inq .inq-cat{font-size:11px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:8px;}
.by-inq .inq-st{font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;margin-left:auto;}
.by-inq .inq-st.wait{color:var(--text-muted);background:var(--bg-surface);}
.by-inq .inq-st.done{color:var(--success);background:rgba(46,212,119,.14);}
.by-inq .inq-i-ti{font-size:14.5px;font-weight:700;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.by-inq .inq-i-dt,.by-inq .inq-d-dt{font-size:12px;color:var(--text-muted);margin-top:5px;}
.by-inq .inq-empty{padding:56px 20px;text-align:center;color:var(--text-muted);font-size:13.5px;}
.by-inq .inq-empty iconify-icon{font-size:40px;opacity:.5;display:block;margin:0 auto 12px;}
.by-inq .inq-cats{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0;}
.by-inq .inq-chip{font-size:13px;font-weight:600;color:var(--text-secondary);background:var(--bg-elevated);padding:8px 14px;border-radius:18px;cursor:pointer;}
.by-inq .inq-chip.on{background:var(--accent);color:var(--on-accent);font-weight:700;}
.by-inq .inq-title-in{width:100%;box-sizing:border-box;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:13px;color:var(--text-primary);font-size:15px;font-weight:600;outline:none;margin-bottom:10px;}
.by-inq .inq-body-in{width:100%;box-sizing:border-box;min-height:160px;resize:vertical;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:13px;color:var(--text-primary);font-size:14px;line-height:1.6;outline:none;margin-bottom:14px;}
.by-inq .inq-title-in:focus,.by-inq .inq-body-in:focus{border-color:var(--accent);}
.by-inq .inq-d-ti{font-size:17px;font-weight:800;color:var(--text-primary);margin-top:4px;}
.by-inq .inq-d-body{font-size:14px;line-height:1.65;color:var(--text-secondary);margin-top:12px;white-space:normal;}
.by-inq .inq-ans{margin-top:16px;background:var(--accent-soft);border-radius:14px;padding:14px;}
.by-inq .inq-ans-h{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:var(--accent);margin-bottom:8px;}
.by-inq .inq-ans-h .inq-ans-dt{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);}
.by-inq .inq-ans-body{font-size:14px;line-height:1.65;color:var(--text-primary);}
.by-inq .inq-wait-note{margin-top:16px;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-muted);background:var(--bg-elevated);padding:12px 14px;border-radius:12px;}

/* ── ✧ 꾸미기 마켓 (page-cosmetic) — 응원봉 전용·기간제 ── */
.by-cos .cos-bal{display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px;}
.by-cos .cos-bal .lb{font-size:12px;color:var(--text-muted);font-weight:600;}
.by-cos .cos-bal .v{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:800;color:var(--gold);}
.by-cos .cos-tabs{display:flex;gap:8px;margin-bottom:14px;}
.by-cos .ct{flex:1;text-align:center;padding:10px;border-radius:12px;font-size:13px;font-weight:700;
  background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;border:1px solid transparent;}
.by-cos .ct.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
.by-cos .cos-card{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;
  background:var(--bg-surface);border:1px solid var(--border);margin-bottom:9px;}
.by-cos .cos-card.owned{border-color:var(--accent);}
.by-cos .cos-card .ci{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent-soft),var(--bg-elevated));font-size:19px;color:var(--accent);}
.by-cos .cos-card .cb{flex:1;min-width:0;}
.by-cos .cos-card .nm{font-size:13.5px;font-weight:700;}
.by-cos .cos-card .ds{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.45;}
.by-cos .cos-card .lf{font-size:10.5px;color:var(--accent);font-weight:700;margin-top:4px;}
/* 구매·장착 버튼 — 실제 결제 액션이다. 44px 미달(64x36)이라 높이만 채운다(§43).
   글자 크기는 그대로, 세로 패딩으로 히트영역 확보. */
.by-cos .cos-card .ca{flex:none;padding:9px 13px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;gap:4px;white-space:nowrap;}
.by-cos .cos-card .ca.buy{background:var(--accent);color:var(--on-accent);}
.by-cos .cos-card .ca.un{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);}
.by-cos .cos-card .ca.eq{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);}
.by-cos .cos-card .ca.busy{opacity:.5;pointer-events:none;}
.by-cos .cos-note{font-size:10.5px;color:var(--text-muted);line-height:1.6;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--border);}
/* 충전 패키지의 응원봉 보너스 배지 */
.by-wallet .wpkg .kb{display:flex;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:800;color:var(--gold);margin-top:3px;}
/* ✧ BJ 방송 프레임 — 영상 위, UI 아래. 클릭을 먹지 않는다. */
.room-video .room-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;}
/* ── 🎬 방송 옵션 (dialog-cam-options) ── */
/* 카메라 제어 — '맞추기' 같은 인라인 액션. 실제 버튼이라 44px(§43) */
/* 송출 끊김 — LIVE 가 거짓말하지 않게 색으로도 구분 */
.b-live.lost{background:var(--danger,#EF4444)!important;}
.b-live.lost .dot{animation:none!important;}
.by-camopt .cobtn{color:var(--accent);font-weight:800;cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;padding:0 6px;}
.by-camopt .cobtn:active{opacity:.6;}
.by-camopt .co-sec{font-size:12px;font-weight:700;color:var(--text-secondary);margin:16px 0 8px;}
.by-camopt .co-chips{display:flex;flex-wrap:wrap;gap:7px;}
.by-camopt .fchip{padding:8px 13px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;
  background:var(--bg-elevated);color:var(--text-secondary);border:1px solid transparent;}
.by-camopt .fchip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}
.by-camopt .co-row{display:flex;align-items:center;gap:11px;margin-top:12px;}
.by-camopt .co-row .lb{font-size:12px;color:var(--text-muted);font-weight:600;flex:none;}
.by-camopt .co-row input[type=range]{flex:1;accent-color:var(--accent);}
.by-camopt .co-row .v{font-size:12px;font-weight:700;color:var(--accent);width:28px;text-align:right;}
.by-camopt .co-tog{align-items:flex-start;}
.by-camopt .co-tog .tx{flex:1;min-width:0;}
.by-camopt .co-tog .t{font-size:13px;font-weight:700;}
.by-camopt .co-tog .s{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.5;}
.by-camopt .co-note{font-size:10.5px;color:var(--text-muted);margin-top:14px;padding-top:11px;
  border-top:1px solid var(--border);line-height:1.6;}


/* ── 🎚 방송 입력 레벨 미터 ─────────────────────────────────────────
   BJ 가 자기 소리가 찌그러지는지 보는 유일한 수단이다(리미터로는 못 고친다 — ADC 에서 잘린다).
   -6 dBFS 넘으면 주황, 실제 클리핑이면 빨강. 얇게 둬서 화면을 안 가린다. */
.b-level{display:flex;align-items:center;gap:8px;margin:0 16px 6px;}
.b-lv-track{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;}
.b-lv-fill{height:100%;width:0;border-radius:2px;background:#4ade80;transition:width .08s linear;}
.b-lv-red{position:absolute;top:0;right:0;width:10%;height:100%;background:rgba(255,255,255,.18);}
.b-level.hot .b-lv-fill{background:#fbbf24;}
.b-level.clip .b-lv-fill{background:#ef4444;}
.b-level.clip .b-lv-t{color:#ef4444;font-weight:700;}
.b-lv-t{min-width:46px;text-align:right;font-size:11px;color:rgba(255,255,255,.66);font-variant-numeric:tabular-nums;}
.bcast.bc-land .b-level{display:none;}   /* 가로모드에선 컨트롤이 옆으로 가므로 숨김 */


/* ── 📢 녹화 표시 ────────────────────────────────────────────────────
   고지는 두 겹이다 — 시작 전 "녹화될 수 있어요"(dialog-go-live 의 .rec-note) +
   실제 녹화 중 이 배지. 배지는 LiveKit isRecording 이 참일 때만 뜬다(서버 실제 상태). */
.b-rec{display:flex;align-items:center;gap:6px;align-self:flex-start;margin:0 16px 6px;
  padding:4px 10px;border-radius:999px;background:rgba(239,68,68,.16);
  border:1px solid rgba(239,68,68,.4);font-size:11px;color:#fca5a5;font-weight:600;}
.b-rec-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:byRecBlink 1.4s infinite;}
@keyframes byRecBlink{0%,100%{opacity:1}50%{opacity:.25}}
.bcast.bc-land .b-rec{display:none;}
/* 방송 시작 화면 고지 — 설정 행처럼 보이되 조작 대상이 아님을 낮은 대비로 알린다 */
.rec-note{opacity:.72;}
.rec-note .l{font-size:12px;line-height:1.4;}
.pill-view.rec{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.4);color:#fca5a5;font-weight:600;gap:5px;}

/* 🔍 방송 화면 현재 배율 — 1배가 아닐 때만. 탭하면 초기화 */
.b-zoom{display:flex;align-items:center;gap:5px;align-self:flex-start;margin:0 16px 6px;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);font-size:11px;color:#fff;font-weight:600;cursor:pointer;}
.b-zoom iconify-icon{font-size:12px;}
.bcast.bc-land .b-zoom{display:none;}
.co-warn{color:#fbbf24;}


/* ── 🏷 방송 상태 스트립 · 터치 잠금 ──────────────────────────────────
   상태는 **표시만** 한다. 조작은 컨트롤바(즉시효과)와 옵션 패널(설정)에 있다.
   무대 위 폰은 삼각대에서 혼자 서 있으므로, 누를 곳을 줄이는 게 설계 목표다. */
.b-status{display:flex;flex-wrap:wrap;gap:6px;margin:0 16px 6px;}
.b-st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  font-size:11px;font-weight:600;color:#fff;line-height:1.5;}
.b-st iconify-icon{font-size:12px;}
.b-st.rec{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45);color:#fca5a5;}
.b-st.rec iconify-icon{animation:byRecBlink 1.4s infinite;}
.b-st.warn{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.45);color:#fcd34d;}
.bcast.bc-land .b-status{display:none;}

/* 터치 잠금 — 컨트롤 위를 덮어 터치를 먹는다.
   해제는 **밀어서**. 롱프레스는 옷깃·가방에 눌려도 풀릴 수 있어 안 쓴다 —
   스와이프는 방향과 거리가 필요해 우연히 완성되지 않는다. */
.b-lockmask{position:absolute;left:0;right:0;bottom:0;top:0;z-index:20;
  display:flex;align-items:flex-end;justify-content:center;padding:0 24px calc(28px + var(--safe-bot));
  background:rgba(0,0,0,.10);}
.b-slide{position:relative;width:100%;max-width:340px;height:52px;border-radius:999px;overflow:hidden;
  background:rgba(20,16,36,.88);border:1px solid rgba(255,255,255,.24);}
.b-slide-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(124,92,255,.5);}
.b-slide-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.72);font-size:13px;font-weight:700;pointer-events:none;}
.b-slide-h{position:absolute;left:4px;top:4px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;color:#1a1630;
  box-shadow:0 2px 8px rgba(0,0,0,.3);touch-action:none;}
.b-slide-h iconify-icon{font-size:20px;}

/* 옵션 패널 */
.by-bjopt .co-sec{margin-top:14px;}
.by-bjopt .gl-seg{margin:0 0 2px;}