:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; background: #0e0f14; color: #e8e8ec; }
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #1c1e26; border-bottom: 1px solid #3a4055; position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; }
.brand .sub { font-weight: 400; font-size: 12px; color: #9aa0ae; margin-left: 6px; }
.levelChip { font-size: 11px; background: #31344a; border-radius: 10px; padding: 2px 8px; margin-left: 6px; color: #b9c0ff; }
.actions button, .topbar button { margin-left: 6px; }
button { background: #2a2d3a; color: #e8e8ec; border: 1px solid #3a3e50; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
button:hover { background: #363a4c; }
button.primary { background: #4a5cff; border-color: #4a5cff; color: #fff; }
button.big { font-size: 18px; padding: 8px 16px; }
button svg { display: block; margin: 0 auto; vertical-align: middle; }
.controls button, .modeRow button { display: inline-flex; align-items: center; justify-content: center; }
button .r1 { font-size: 9px; margin-left: 1px; color: #fff; }
.modeRow button.on svg { filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); }
button:disabled { opacity: .4; cursor: default; }
input, textarea, select { background: #1f2129; border: 1px solid #3a3e50; color: #e8e8ec; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
input:focus, textarea:focus { outline: 1px solid #4a5cff; }
.card { background: #1e212b; border: 1px solid #3a4055; border-radius: 12px; padding: 14px; }
.landing { max-width: 1240px; margin: 40px auto; padding: 0 16px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab { flex: 1; }
.tab.active { background: #4a5cff; border-color: #4a5cff; color: #fff; }
label { display: block; margin-bottom: 10px; font-size: 13px; color: #9aa0ae; }
label input { width: 100%; margin-top: 4px; }
.err { color: #ff7b7b; font-size: 13px; margin-top: 8px; min-height: 18px; }
.hint { color: #9aa0ae; font-size: 12px; }
.chip { background: #31344a; border-radius: 10px; padding: 3px 10px; font-size: 12px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr) 26vh; grid-template-areas: "top top" "chat members"; gap: 12px; padding: 12px; height: calc(100vh - 52px); max-width: 1440px; margin: 0 auto; }
.topRow { grid-area: top; display: grid; grid-template-columns: minmax(400px, 620px) minmax(0, 1fr); gap: 12px; min-height: 0; }

.playerCard { display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.playerCard .np { margin-bottom: 4px; }
.sideCol { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.sideCol > .card:not(.queueCard) { flex-shrink: 0; }
.queueCard { flex: 1 1 auto; min-height: 0; overflow-y: auto; } /* 재생목록 스크롤 */
.chatCol { grid-area: chat; min-height: 0; }
.chatCol .chatCard { height: 100%; min-height: 0; }

.memberCol .card { height: 100%; min-height: 0; overflow-y: auto; }
.col { min-height: 0; display: flex; flex-direction: column; }
.col .card { overflow-y: auto; }
.queueCol .card, .memberCol .card { flex-shrink: 0; }
.playerCard { flex-shrink: 0; }
.np { display: block; }
/* 유튜브뮤직 모바일 스타일: 큰 썸네일(카드 폭 100%) 위 + 정보 아래 */
.np { display: block; }
.mediaBox { width: 100%; }
#npThumb { width: 100%; aspect-ratio: 16/9; max-height: 420px; border-radius: 10px; background: #000; object-fit: cover; }
#vid { width: 100%; aspect-ratio: 16/9; display: block; border-radius: 10px; background: #000; object-fit: contain; }
.mediaBox { min-height: 0; }
.npInfo { margin-top: 10px; }
.npTitle { font-weight: 700; font-size: 16px; line-height: 1.35; }
.npSub { color: #9aa0ae; font-size: 12px; margin-top: 4px; }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.controls button { flex: 1; }
.seekRow { margin-top: 10px; }
.seekRow input { width: 100%; padding: 0; }
.seekRow .times { display: flex; justify-content: space-between; font-size: 11px; color: #9aa0ae; margin-top: 2px; }
.volRow { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: #9aa0ae; }
.volRow input { flex: 1; }
.listen { width: 100%; margin-top: 10px; }
.listen.on { background: #1e7a46; border-color: #1e7a46; }
#queue, .chatList, #members { list-style: none; margin: 0; padding: 0; }
#queue li { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-bottom: 1px solid #262936; font-size: 13px; }
#queue li[draggable="true"] { cursor: grab; }
#queue li.dragging { opacity: 0.35; }
#queue li.dropInd { height: 3px; background: #4a5cff; border-radius: 2px; margin: 2px 0; padding: 0; list-style: none; pointer-events: none; box-shadow: 0 0 6px #4a5cff; }
#queue li.playing { background: #232a45; border-radius: 8px; }
#queue .qTitle { flex: 1 1 auto; min-width: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#queue li .thumb, #queueDone li .thumb { width: 44px; height: 25px; object-fit: cover; border-radius: 5px; background: #000; flex-shrink: 0; }
#queue .qMeta { color: #9aa0ae; font-size: 11px; flex-shrink: 0; }
#queue button { padding: 2px 7px; font-size: 11px; }
.chatCard { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chatList { flex: 1; overflow-y: auto; padding: 4px; }
.chatList li { padding: 4px 8px; border-radius: 8px; font-size: 14px; word-break: break-word; }
.chatList li .ts { color: #6b7280; font-size: 11px; margin-right: 6px; }
.chatList li .nick { font-weight: 700; margin-right: 6px; }
.chatList li.sys { color: #9aa0ae; font-size: 12px; text-align: left; }
.chatList li.notice { background: #3a2f14; border: 1px solid #6b5616; color: #ffd76a; text-align: left; font-size: 13px; }
.chatList li .del { color: #7c8290; font-style: italic; }
.chatList li .ed { color: #7c8290; font-size: 11px; margin-left: 4px; }
.chatList li .ops { float: right; opacity: 0; }
.chatList li:hover .ops { opacity: 1; }
.chatList li .ops button { padding: 1px 6px; font-size: 11px; margin-left: 4px; }
#chatForm { display: flex; gap: 8px; margin-top: 8px; }
#chatForm input { flex: 1; }
#members li { display: flex; align-items: center; gap: 6px; padding: 5px 2px; font-size: 13px; border-bottom: 1px solid #262936; flex-wrap: wrap; }
#members .nick { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { background: #2f3350; color: #b9c0ff; border-radius: 8px; font-size: 11px; padding: 1px 7px; }
.lvl.owner { background: #5a3b12; color: #ffd76a; }
#members button { padding: 1px 6px; font-size: 10px; }
textarea { width: 100%; min-height: 70px; margin: 6px 0; font-family: ui-monospace, monospace; font-size: 12px; }
details summary { cursor: pointer; color: #9aa0ae; font-size: 13px; margin-top: 8px; }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 10; }
.overlay .card { width: min(560px, 92vw); }
.overlay.wide .card { width: min(700px, 94vw); }
#myRooms { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
#myRooms li.chanCard { background: #1e212b; border: 1px solid #3a4055; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chanFrame { position: relative; padding-top: 100%; border-radius: 12px; overflow: hidden; background: #000; border: 2px solid #333750; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.chanFrame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.chanPh { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 800; color: #4a5cff; background: linear-gradient(145deg, #23263a, #171926); }
.chanName { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chanMeta { color: #9aa0ae; font-size: 12px; }
.chanActs { display: flex; gap: 8px; margin-top: 2px; }
.chanActs .switch { flex: 1; padding: 9px 0; border-radius: 22px; font-weight: 700; font-size: 13px; border: none; }
.chanActs .switch.on { background: #1e7a46; color: #fff; }
.chanActs .switch.on:hover { background: #259557; }
.chanActs .switch.danger { background: transparent; color: #ff8b8b; border: 1px solid #7a2333; }
.chanActs .switch.danger:hover { background: #7a2333; color: #ffd7dd; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #262a38; border: 1px solid #4a5cff; color: #e8e8ec; padding: 10px 18px; border-radius: 10px; font-size: 13px; z-index: 50; transition: opacity .4s; opacity: 0; max-width: 80vw; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "top" "chat" "members"; height: auto; }
  .topRow { grid-template-columns: 1fr; }
  .memberCol { min-height: 25vh; }
  .chatCard { min-height: 32vh; }
}

.roomThumb { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; margin-right: 6px; vertical-align: -6px; }
#configForm h3 { margin: 10px 0 6px; font-size: 13px; color: #9aa0ae; border-bottom: 1px solid #3a4055; padding-bottom: 4px; }
#configForm label { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; color: #e8e8ec; white-space: nowrap; }
#configForm label input { margin-top: 0; }
#configForm label input[type="checkbox"] { justify-self: start; width: auto; }
#configForm label .lvSuf { justify-self: start; }
#configForm input[type="number"] { width: 90px; }
#configForm input[type="text"], #configForm input[type="password"] { flex: 1; }
button.danger { background: #7a2333; border-color: #a03a4e; color: #ffd7dd; }
button.danger:hover { background: #93303f; }

#queue .by { flex-shrink: 0; background: #2a2e40; color: #b9c0ff; border-radius: 9px; font-size: 11px; padding: 1px 8px; margin-left: auto; white-space: nowrap; }
#queue li.playing .by { background: #333a5e; }

.modeRow { display: flex; gap: 8px; margin-top: 8px; }
.modeRow button { flex: 1; font-size: 12px; padding: 5px 8px; }
button.on { background: #4a5cff; border-color: #4a5cff; color: #fff; }
#histBox { margin-top: 6px; }
#histBox summary { cursor: pointer; color: #9aa0ae; font-size: 12px; padding: 4px 0; }
#queueDone { list-style: none; margin: 0; padding: 0; }
#queueDone li { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 12px; color: #a9aebb; opacity: 0.75; }
#queueDone li .qTitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#queueDone li .by { flex-shrink: 0; background: #262a3a; color: #8d93a8; border-radius: 8px; font-size: 10px; padding: 0 6px; }











/* 참여자/채팅 숨김 */





/* 시네마(영상) 모드: 재생목록 풀스크린 */






/* 재생목록 행 여유 */
#queue li { padding: 8px 4px; }
#queue li .thumb, #queueDone li .thumb { width: 64px; height: 36px; }

#queue li { flex-wrap: nowrap; }
#queue li .rowBtns, #queueDone li .rowBtns { display: flex; gap: 3px; flex-shrink: 0; margin-left: 4px; }
#queue li .rowBtns button, #queueDone li .rowBtns button { padding: 2px 6px; font-size: 11px; white-space: nowrap; }
/* 호버 시에만 행 버튼 표시 (터치 기기는 항상) */
@media (hover: hover) {
  #queue li .rowBtns, #queueDone li .rowBtns { opacity: 0; transition: opacity .15s; }
  #queue li:hover .rowBtns, #queueDone li:hover .rowBtns, #queue li:focus-within .rowBtns { opacity: 1; }
  #queue li.playing .rowBtns { opacity: 1; }
}
/* 시네마 모드에서 영상 없으면 큰 썸네일 */


.thumbRow { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
#cfgThumbPrev { width: min(300px, 100%); aspect-ratio: 1/1; border-radius: 14px; object-fit: cover; background: #000; border: 3px solid #3a4055; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.thumbRow { align-items: flex-start; }
.actRow { display: flex; gap: 10px; margin-top: 4px; }
.actRow .switch { flex: 1; padding: 11px 0; border-radius: 26px; font-weight: 700; font-size: 14px; border: none; }
.actRow .switch.on { background: #1e7a46; color: #fff; }
.actRow .switch.danger { background: #7a2333; color: #ffd7dd; }
.actRow .switch.on:hover { background: #259557; }
.actRow .switch.danger:hover { background: #93303f; }
.thumbRow label { margin: 0; flex: 1; }
.thumbRow input[type="file"] { max-width: 220px; font-size: 12px; }
.lvSuf { color: #9aa0ae; font-size: 11px; margin-left: 2px; }
#configForm input[type="number"] { width: 80px; }
#configErr { min-height: 18px; }
.modalBtns { display: flex; gap: 8px; margin-top: 12px; }
.modalBtns button { flex: 1; }
#cfgDelete { margin-top: 8px; }

/* 참여자 숨기기: 오른쪽에 곡추가만 남음 */
body.mhide .memberCol { display: none; }
/* 채팅 숨기기: 하단 줄 제거, 본문이 전체 높이 */
body.chide .chatCol { display: none; }

/* 시네마(영상): 큐 영역 전체 사용 */


/* 채팅 카드: 하단 고정 입력 */








body.mhide .memberCol { display: none; }
/* 시네마: 플레이어 전체 폭 + 오른쪽/채팅 숨김 */







/* 참여자 숨기면 채팅이 하단 전체 */
body.mhide .layout { grid-template-columns: 1fr; grid-template-areas: "top top" "chat chat"; }
body.mhide .memberCol { display: none; }
/* 채팅 숨기면 참여자가 하단 전체 */
body.chide .layout { grid-template-areas: "top top" "members members"; }
body.chide .chatCol { display: none; }
/* 시네마: 플레이어 전체 폭 */




#authCard { max-width: 440px; margin: 0 auto; }
#roomCard { max-width: 560px; margin: 0 auto; }


.volLabel { color: #9aa0ae; font-size: 12px; flex-shrink: 0; }

.modeSeg { display: flex; gap: 6px; margin-top: 10px; }
.modeSeg .seg { flex: 1; padding: 9px 4px; font-size: 12px; line-height: 1.25; border-radius: 10px; }
.modeSeg .seg.on { background: #4a5cff; border-color: #4a5cff; color: #fff; font-weight: 700; }
/* 모드 버튼 배치: 함께듣기 윗줄 / 스피커·리모콘 아래줄 (id 우선 오버라이드) */
#modeSeg { display: flex !important; flex-direction: column !important; gap: 6px; }
#modeSeg .seg { flex: none !important; padding: 9px 4px; font-size: 12px; border-radius: 10px; }
#modeSeg .seg.on { background: #4a5cff; border-color: #4a5cff; color: #fff; font-weight: 700; }
#modeSeg .modeRow2 { display: flex; gap: 6px; }
#modeSeg .modeRow2 .seg { flex: 1 !important; }
.modeDesc { margin-top: 6px; font-size: 11px; color: #9aa0ae; line-height: 1.4; min-height: 32px; }
/* 재생목록/지난 곡 탭 + 검색 */
.qTabs { display: flex; gap: 6px; margin-bottom: 8px; }
.qTab { flex: 1; padding: 7px 0; font-size: 13px; border-radius: 9px; }
.qTab.on { background: #4a5cff; border-color: #4a5cff; color: #fff; font-weight: 700; }
#qSearch { width: 100%; margin-bottom: 6px; font-size: 13px; }
/* 유튜브뮤직 스타일: 지난 곡(그레이) 위쪽 분리 */
.qbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qbar .qtitle { font-weight: 700; font-size: 14px; white-space: nowrap; }
.qbar input { flex: 1; }
#queue li.qHead { font-size: 11px; color: #8d93a8; padding: 8px 4px 4px; border-bottom: none; letter-spacing: .02em; }
#queue li.done { opacity: .55; }
#queue li.qMore { justify-content: center; border: none; padding: 2px 0; }
#queue li.qMore button { font-size: 11px; color: #9aa0ae; background: transparent; }
#queue li.empty { justify-content: center; color: #6b7280; border: none; padding: 20px 0; }
#queue li .qnum { width: 16px; text-align: right; color: #6b7280; font-size: 11px; flex-shrink: 0; font-variant-numeric: tabular-nums; }

.queueCard { display: flex; flex-direction: column; overflow: hidden !important; }
.qbar { flex-shrink: 0; }
#queue { flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; }
#qClear { flex-shrink: 0; padding: 6px 10px; }
.qbar input { flex: 1 1 auto; }
#playHint { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #3a2f14; border: 1px solid #6b5616; color: #ffd76a; font-size: 12px; line-height: 1.4; }
.addHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addHead h3 { margin: 0; }
#requeueAllBtn { font-size: 12px; padding: 5px 10px; }
.meName { color: #9aa0ae; font-size: 12px; margin-left: 10px; }
.levelChip { margin-left: 8px; }

/* ── 정렬 보정 ── */
.qbar { display: flex; align-items: center; gap: 6px; }
.qbar .qtitle { line-height: 1; white-space: nowrap; }
.qbar input { flex: 1 1 auto; min-width: 0; height: 32px; box-sizing: border-box; }
#qClear { flex-shrink: 0; width: 32px; height: 32px; padding: 0; line-height: 1; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.chatCol .chatCard, .memberCol .card { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.chatHead { font-weight: 700; font-size: 14px; margin: 0 0 6px; flex-shrink: 0; }
.memberCol h3 { flex-shrink: 0; margin: 0 0 6px; font-size: 14px; }
.chatList, #members { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#chatForm { flex-shrink: 0; }

/* ── 라이트(화이트) 모드 ── */
body.light { background: #eef0f4; color: #1c1e22; color-scheme: light; }
body.light .topbar { background: #ffffff; border-bottom: 1px solid #d8dbe2; }
body.light .card { background: #ffffff; border-color: #d8dbe2; }
body.light input, body.light textarea, body.light select { background: #f4f5f7; border-color: #d0d4dd; color: #1c1e22; }
body.light button { background: #e9ebf0; color: #1c1e22; border-color: #c8ccd6; }
body.light button.primary, body.light button.on, body.light .qTab.on, body.light .modeSeg .seg.on,
body.light .actRow .switch.on, body.light .chanActs .switch.on { background: #4a5cff; border-color: #4a5cff; color: #fff; }
body.light .levelChip, body.light .chip, body.light .lvl { background: #e4e7f4; color: #3d4ab8; }
body.light .lvl.owner { background: #f6e3c1; color: #8a5a12; }
body.light #queue li, body.light #members li, body.light #myRooms li.chanCard { border-color: #e4e6ec; }
body.light #queue li.playing { background: #e8ebfb; }
body.light .chatList li.sys { color: #7a808c; }
body.light .chatList li.notice { background: #fff6d8; border-color: #e2c56a; color: #6b5616; }
body.light .by { background: #eceef6; color: #3d4ab8; }
body.light .qnum { color: #98a0ae; }
body.light .chatList li .ts { color: #a0a6b2; }
body.light .qHead { color: #8a90a0; }
body.light #queueDone li { color: #5a5f6b; }
body.light .meName, body.light .hint, body.light .modeDesc { color: #6b7280; }
body.light #toast { background: #ffffff; border-color: #4a5cff; color: #1c1e22; }
body.light .modeDesc, body.light .volLabel { color: #6b7280; }
body.light .danger { background: #c0392b; color: #fff; }
body.light #configForm h3 { color: #5f6673; border-bottom-color: #d8dbe2; }
body.light #configForm label { color: #1c1e22; }
body.light .lvSuf { color: #8a90a0; }
body.light #cfgThumbClear, body.light #cfgDelete { background: #fde8e8; color: #b03030; border-color: #e5b4b4; }
body.light .chatList li .del { color: #9aa0ac; }
body.light .chatList li .ed { color: #9aa0ac; }
.themeBtn { margin-left: 8px; }

.modeLabel { margin-top: 12px; font-size: 11px; color: #8d93a8; }
#modeSeg { margin-top: 4px; }
/* 참여자/채팅 높이 통일: 하단 행 고정 높이 + 내부 스크롤 */
.chatCol { grid-area: chat; }
.memberCol { grid-area: members; }
.chatCol .chatCard, .memberCol .card { height: 100%; overflow: hidden; }
.chatList, #members { overflow-y: auto; }
/* ── 테마 전환 레이아웃 안정화 ── */
html { scrollbar-gutter: stable; }
#queue, .chatList, #members, #queueDone, .queueCard { scrollbar-gutter: stable; }
body, body.light { -webkit-text-size-adjust: 100%; }
/* 카드/버튼/인풋 테두리 두께 통일 (테마와 무관하게 동일) */
.card, button, input, textarea, select { border-width: 1px; border-style: solid; }
body.light .card { border-color: #d8dbe2; }
/* ── 하단(채팅·참여자) 영역 단단히 고정 — 내부에서만 스크롤 ── */
.memberCol, .chatCol { min-height: 0; overflow: hidden; }
.memberCol .card, .chatCol .chatCard { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.memberCol .card h3 { flex-shrink: 0; }
.chatCol .chatHead { flex-shrink: 0; }
#members, .chatList { flex: 1 1 0; min-height: 0; overflow-y: auto; }
#chatForm { flex-shrink: 0; }
/* 데스크톱 방 화면: 페이지 자체 스크롤 차단 (모든 영역이 내부 스크롤) — 랜딩(채널목록) 페이지는 스크롤되도록 방 body에만 적용 */
@media (min-width: 901px) {
  body#roomBody { overflow: hidden; }
  .layout { overflow: hidden; }
}
/* 하단(채팅·참여자) 카드 아래 여백 제거 → 바깥 padding(12px)만 남겨 좌우와 동일 */
.memberCol .card, .chatCol .chatCard { margin-bottom: 0; }
.memberCol, .chatCol { padding-bottom: 0; }

.landing > .card { margin-bottom: 12px; }
/* 검색창 텍스트 세로 중앙 정렬 */
#qSearch { line-height: 32px; padding: 0 10px; }

/* 테마 무관 동일 메트릭 — color-scheme 전환 시 네이티브 컨트롤 크기 변동 방지 */
input, textarea, select, button { line-height: 1.45; }
input[type="range"] { height: 18px; padding: 0; }
html { scrollbar-gutter: stable; }
/* 라이트 모드: '내 채널' 리스트 카드 대응 */
body.light #myRooms li.chanCard { background: #ffffff; }
body.light .chanMeta { color: #6b7280; }
body.light .chanFrame { border-color: #d8dbe2; box-shadow: 0 4px 14px rgba(20, 25, 60, .08); }
body.light .chanPh { color: #3d4ab8; background: linear-gradient(145deg, #e8eaf6, #d8dbee); }
body.light .chanActs .switch.danger { color: #c0392b; border-color: #e0a9a9; }

/* 참여자 목록 폭 개선: 이름 최소 폭 보장, 버튼 넘치면 줄바꿈 */
#members .nick { flex: 1 1 150px; min-width: 0; }
#members .lvl { flex-shrink: 0; }
#members button { flex-shrink: 0; }

/* 기능별 최소 레벨 행: input 바로 옆에 LV 표시 */
#configForm label:has(input[type="number"]) { grid-template-columns: 150px auto auto minmax(0, 1fr); column-gap: 6px; }
#configForm label:has(input[type="number"]) input[type="number"] { width: 80px; justify-self: start; }
#configForm label:has(input[type="number"]) .lvSuf { justify-self: start; }

/* 레벨 부여 모달 */
#lvlCfg { list-style: none; margin: 10px 0; padding: 10px 14px; background: rgba(0, 0, 0, .22); border: 1px solid #3a4055; border-radius: 10px; font-size: 13px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
body.light #lvlCfg { background: #f2f3f7; border-color: #d8dbe2; }
#lvlModal label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#lvlModal input[type="number"] { width: 110px; }

#forgotLink { background: none; border: none; padding: 4px 0 0; color: #4a5cff; font-size: 12px; cursor: pointer; text-decoration: underline; }
#forgotCard { margin-top: 12px; }
#forgotCard button { margin-top: 8px; }
#fBack { background: none; border: none; color: #9aa0ae; font-size: 12px; cursor: pointer; padding: 6px 0 0; }
body.light #fBack { color: #6b7280; }

.authLinks { display: flex; gap: 14px; margin-top: 6px; }
#mailVerLink { background: none; border: none; padding: 4px 0 0; color: #9aa0ae; font-size: 12px; cursor: pointer; }
#mailVerLink:hover { color: #4a5cff; }
#verifyCard button { margin-top: 8px; }
#vResend, #vBack { background: none; border: none; color: #9aa0ae; font-size: 12px; cursor: pointer; padding: 6px 0 0; }
body.light #mailVerLink, body.light #vResend, body.light #vBack { color: #6b7280; }


.addHead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.addHead h3 { margin-right: auto; }
.addHead button { font-size: 11px; padding: 3px 8px; }

.addWarn { font-size: 11px; color: #d8a94e; margin: 2px 0 6px; }
body.light .addWarn { color: #8a6a1f; }

.memHead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.memHead h3 { margin: 0; }
#banListBtn { font-size: 11px; padding: 2px 8px; }
#banList { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
#banList li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #3a4055; border-radius: 8px; font-size: 13px; }
#banList .nick { font-weight: 700; }
#banList .banInfo { flex: 1; color: #9aa0ae; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#banList button { padding: 2px 10px; font-size: 12px; }
#banList .banEmpty { border-style: dashed; justify-content: center; color: #9aa0ae; }
body.light #banList li { border-color: #e4e6ec; }
body.light #banList .banInfo { color: #6b7280; }
/* 설정 모달: 화면보다 길어지면 카드 내부 스크롤 + 썸네일 미리보기 축소 */
.overlay { overflow: hidden; }
.overlay .card { max-height: calc(100vh - 40px); overflow-y: auto; }
#cfgThumbPrev { width: min(300px, 70vw); max-height: 32vh; }
@media (max-height: 720px) {
  #cfgThumbPrev { width: min(200px, 50vw); max-height: 22vh; }
}
/* 높이 기준으로도 정사각형 유지 (vh 포함 min) */
#cfgThumbPrev { width: min(300px, 70vw, 36vh); max-height: none; }
@media (max-height: 720px) {
  #cfgThumbPrev { width: min(200px, 50vw, 24vh); }
}

.consent { display: flex; align-items: flex-start; gap: 6px; font-size: 11px; color: #9aa0ae; line-height: 1.5; }
.consent span { flex: 1; }
.consent input { margin-top: 2px; }
.consent a { color: #4a5cff; }
body.light .consent { color: #6b7280; }

#profileCard details { margin-top: 10px; border: 1px solid #3a4055; border-radius: 10px; padding: 8px 12px; }
#profileCard details summary { cursor: pointer; font-weight: 700; font-size: 13px; color: #e8e8ec; }
#profileCard details[open] summary { margin-bottom: 8px; }
#profileCard .danger { background: #7a2333; color: #ffd7dd; border: none; }
body.light #profileCard details { border-color: #e4e6ec; }
body.light #profileCard details summary { color: #1c1e22; }

.consentRow { display: flex; align-items: flex-start; gap: 7px; margin: 6px 0 2px; }
.consentRow input { margin-top: 3px; flex-shrink: 0; }
.consentRow label { flex: 1; font-size: 12px; line-height: 1.7; color: #9aa0ae; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.consentRow a { color: #4a5cff; white-space: nowrap; }
body.light .consentRow label { color: #6b7280; }

/* 채팅/시스템 로그 탭 (시스템 메시지 분리) */
.chatTabs { flex-shrink: 0; }
.qTab { position: relative; }
.qTab .bdg { position: absolute; top: -7px; right: -5px; background: #ff4d4f; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 5px; pointer-events: none; }
/* 여러 곡 선택 모드 (일괄 이동/삭제) */
.selBar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-shrink: 0; flex-wrap: wrap; }
.selBar .cnt { font-size: 12px; color: #8d93a8; margin-right: 2px; white-space: nowrap; }
.selBar button { font-size: 12px; padding: 3px 8px; white-space: nowrap; }
#selToggle.on { background: #4a5cff; border-color: #4a5cff; color: #fff; }
#queue li .selBox { width: 17px; height: 17px; accent-color: #4a5cff; flex-shrink: 0; margin: 0 2px 0 0; cursor: pointer; }
#queue li.sel { outline: 1px solid #4a5cffaa; outline-offset: -1px; border-radius: 8px; }
body.light .selBar .cnt { color: #6b7280; }

/* ══ 모바일(≤900px) 대응 — 헤더 메뉴 접기 + 하단 패널 높이 보장 ══ */
.menuBtn { display: none; }
#selToggle { white-space: nowrap; }
.addHead { margin-bottom: 10px; } /* '곡 추가' 제목과 입력칸 사이 여백 */
@media (max-width: 900px) {
  .topbar { position: relative; }
  .menuBtn { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; padding: 2px 12px; margin-left: 8px; flex-shrink: 0; }
  .actions { display: none; position: absolute; top: calc(100% + 6px); right: 10px; flex-direction: column; align-items: stretch; gap: 4px; background: #1c1e26; border: 1px solid #3a4055; border-radius: 12px; padding: 8px; z-index: 40; box-shadow: 0 10px 28px rgba(0,0,0,.45); min-width: 190px; }
  body.light .actions { background: #ffffff; border-color: #d8dbe2; box-shadow: 0 10px 28px rgba(30, 40, 90, .15); }
  .actions.open { display: flex; }
  .actions button { margin-left: 0; width: 100%; text-align: left; white-space: nowrap; }
  .brand { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
  .brand .sub, .brand .meName { display: none; }
  #roomName { overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
  .roomThumb, .levelChip { flex-shrink: 0; }
  .levelChip { margin-left: 8px; }
  /* 하단 채팅/시스템/참여자: 내용이 보이도록 패널 높이 고정(내부 스크롤) */
  .layout { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "top" "chat" "members"; height: auto; }
  .chatCol { height: 42vh; min-height: 300px; }
  .memberCol { height: 30vh; min-height: 220px; }
  body.mhide:not(.chide) .chatCol { height: 58vh; }
  body.chide:not(.mhide) .memberCol { height: 44vh; }
  body.mhide .layout { grid-template-areas: "top" "chat"; }
  body.chide .layout { grid-template-areas: "top" "members"; }
  body.mhide.chide .layout { grid-template-areas: "top"; }
  /* '선택' 버튼 줄바꿈 방지 + 곡추가 제목 여백 */
  #selToggle { flex-shrink: 0; padding: 6px 10px; }
  .qbar { gap: 6px; }
}

/* 모바일 재생목록 줄: 버튼/배지 잘림 방지 (2줄로 유연하게) */
@media (max-width: 900px) {
  #queue li { flex-wrap: wrap; row-gap: 2px; }
  #queue li .thumb { width: 40px; height: 24px; }
  #queue li .by { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  #queue li .rowBtns { margin-left: auto; }
}

/* 재생목록: 모바일에서도 일정 높이로 고정(내부 스크롤) — 화면이 곡 수만큼 길어지지 않게 */
@media (max-width: 900px) {
  .queueCard { max-height: 54vh; }
}

/* 드래그&드롭 핸들 (숫자 왼쪽) */
.qGrip { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 1px; color: #6b7280; cursor: grab; opacity: .75; }
.qGrip:hover { color: #9aa0ae; opacity: 1; }
body.light .qGrip { color: #98a0ae; }
/* 모바일: 재생 중/다음 곡을 2곡 정도 더 보이도록 큐 카드 높이 확장 */
@media (max-width: 900px) {
  .queueCard { max-height: 65vh; }
}

/* 곡 추가 헤더 버튼(들은 곡 되돌리기/엑셀/PDF) 크기 통일 */
#requeueAllBtn, #exportXlsx, #exportPdf { font-size: 12px; padding: 6px 10px; white-space: nowrap; }
/* 검색창 세로 정렬 보정: 기존 #qSearch margin-bottom:6px이 flex 중앙정렬을 어긋나게 함 */
.qbar #qSearch { margin-bottom: 0; }

/* 플레이어 카드: 내용이 짧으면 세로 중앙, 넘치면 스크롤.
   기존 justify-content:center + overflow-y:auto 조합은 넘칠 때 위쪽(영상)이 잘리고 스크롤로 못 올라가는 flexbox 버그가 있음 */
.playerCard { justify-content: flex-start; }
.playerCard::before, .playerCard::after { content: ''; flex: 1 0 0; min-height: 0; pointer-events: none; }
/* 헤더 버튼 라벨이 길어져도 줄바꿈 없이 */
.topbar button { white-space: nowrap; }

/* 참여자 온라인/오프라인 탭 */
.memTabs { flex: 1; margin-bottom: 0; gap: 4px; }
.memTabs .qTab { padding: 5px 0; font-size: 12px; }
#members li.off { opacity: .55; }
#members li.banEmpty { justify-content: center; color: #9aa0ae; border-bottom: none; font-size: 12px; }

/* 랜딩: 내 채널 [내 채널/채널 만들기] 세그먼트 탭 + '+ 채널 추가' 타일 (채널 카드와 같은 높이 구조) */
.myTabs { background: rgba(0, 0, 0, .16); border: 1px solid #3a4055; border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 16px; }
.myTabs .tab { background: transparent; border: none; border-radius: 9px; color: #9aa0ae; }
.myTabs .tab.active { background: #4a5cff; color: #fff; font-weight: 700; }
body.light .myTabs { background: #eef0f4; border-color: #d8dbe2; }
body.light .myTabs .tab { color: #6b7280; }
#myRooms li.chanAdd { background: transparent; border: none; padding: 0; display: flex; flex-direction: column; gap: 8px; cursor: pointer; user-select: none; min-height: 0; }
#myRooms li.chanAdd .addFrame { flex: 1; border: 2px dashed #3a4055; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
#myRooms li.chanAdd:hover .addFrame, #myRooms li.chanAdd:focus-visible .addFrame { border-color: #4a5cff; background: rgba(74, 92, 255, .05); }
#myRooms li.chanAdd .plus { font-size: 52px; font-weight: 200; line-height: 1; color: #6b7280; }
#myRooms li.chanAdd .addTx { text-align: center; font-size: 13px; font-weight: 600; color: #9aa0ae; padding-bottom: 2px; }
body.light #myRooms li.chanAdd .addFrame { border-color: #c8ccd6; }
body.light #myRooms li.chanAdd:hover .addFrame { border-color: #4a5cff; background: #f0f2ff; }
body.light #myRooms li.chanAdd .plus { color: #98a0ae; }

/* 미세 조정: 만들기 폼 버튼-안내 간격, 활성 탭 글자 대비 */
#newChView form { margin-bottom: 0; }
#newChView .hint { margin-top: 14px; margin-bottom: 0; }
body.light .myTabs .tab.active { color: #fff; }

/* 랜딩/로그인: 상단 우측(계정 상태 + 테마 버튼) — 테마 버튼은 로그인 상태와 무관하게 항상 표시 */
.topRight { display: flex; align-items: center; gap: 8px; }
/* 게스트 입장 안내문 */
.guestNote { font-size: 12px; color: #9aa0ae; background: rgba(0, 0, 0, .18); border: 1px solid #3a4055; border-radius: 10px; padding: 10px 12px; margin: 8px 0 4px; line-height: 1.7; white-space: normal; word-break: keep-all; }
.guestNote b { color: #e8e8ec; }
body.light .guestNote { background: #f2f3f7; border-color: #d8dbe2; color: #6b7280; }
body.light .guestNote b { color: #1c1e22; }

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — 애플 리퀴드 글라스 스타일 (2026-09-09)
   기준 예제: codepen.io/schuelertec/pen/vExYVRo (frosted glass)
   배경에 오로라 색감을 깔고, 카드·탭·버튼·입력칸을
   반투명 유리(backdrop blur + 상단 하이라이트)로 통일
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) 오로라 배경 (유리가 블러할 색감) ── */
body {
  background-color: #0b0d18;
  background-image:
    radial-gradient(1100px 760px at 12% -8%, rgba(122,112,255,.50), transparent 60%),
    radial-gradient(950px 700px at 90% 8%,  rgba(70,175,255,.36),  transparent 60%),
    radial-gradient(1000px 860px at 50% 118%, rgba(214,84,255,.30), transparent 62%),
    radial-gradient(760px 560px at 82% 70%,  rgba(74,220,200,.15),  transparent 60%);
  background-attachment: fixed;
}
body.light {
  background-color: #e9edf9;
  background-image:
    radial-gradient(1100px 760px at 10% -6%, rgba(140,150,255,.55), transparent 60%),
    radial-gradient(950px 700px at 93% 6%,  rgba(255,150,225,.42), transparent 60%),
    radial-gradient(1000px 820px at 45% 118%, rgba(120,210,255,.55), transparent 62%),
    radial-gradient(760px 520px at 82% 72%,  rgba(150,255,215,.45), transparent 60%);
  background-attachment: fixed;
}

/* ── 2) 유리 테마 변수 ── */
:root {
  --g-card: rgba(255,255,255,.055);
  --g-card-strong: rgba(30,35,54,.66);
  --g-line: rgba(255,255,255,.13);
  --g-line-soft: rgba(255,255,255,.07);
  --g-field: rgba(255,255,255,.08);
  --g-btn: rgba(255,255,255,.075);
  --g-btn-hov: rgba(255,255,255,.15);
  --g-seg: rgba(255,255,255,.06);
  --g-seg-on: rgba(255,255,255,.18);
  --g-sheen: rgba(255,255,255,.13);
  --g-txt2: #a6accc;
  --g-act-txt: #ffffff;
  --g-shad: 0 12px 32px rgba(0,0,12,.38);
  --g-inset: inset 0 1px 0 rgba(255,255,255,.14);
  --g-ctl: rgba(255,255,255,.16);
}
body.light {
  --g-card: rgba(255,255,255,.55);
  --g-card-strong: rgba(255,255,255,.8);
  --g-line: rgba(255,255,255,.9);
  --g-line-soft: rgba(140,150,205,.22);
  --g-field: rgba(255,255,255,.72);
  --g-btn: rgba(255,255,255,.55);
  --g-btn-hov: rgba(255,255,255,.82);
  --g-seg: rgba(130,140,195,.14);
  --g-seg-on: rgba(255,255,255,.95);
  --g-sheen: rgba(255,255,255,.85);
  --g-txt2: #5d6690;
  --g-act-txt: #3540b8;
  --g-shad: 0 14px 34px rgba(80,90,160,.18);
  --g-inset: inset 0 1px 0 rgba(255,255,255,.85);
  --g-ctl: rgba(90,100,160,.32);
}

/* ── 3) 탑바: 블러 유리 ── */
.topbar {
  background: rgba(14,16,30,.6);
  border-bottom-color: var(--g-line);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
body.light .topbar {
  background: rgba(255,255,255,.5);
  border-bottom-color: rgba(140,150,205,.28);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6);
}

/* ── 4) 카드 = 유리판 ── */
.card,
body.light .card {
  background-image: linear-gradient(180deg, var(--g-sheen), rgba(255,255,255,0) 46%);
  background-color: var(--g-card);
  border-color: var(--g-line);
  border-radius: 20px;
  box-shadow: var(--g-shad), var(--g-inset);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

/* ── 5) 버튼 기본: 은은한 유리 ── */
button {
  background-color: var(--g-btn);
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  border-color: var(--g-line);
  border-radius: 12px;
}
button:hover { background-color: var(--g-btn-hov); }
body.light button { background-color: var(--g-btn); border-color: var(--g-line); }
body.light button:hover { background-color: var(--g-btn-hov); }

/* 주 액션(파랑) + 활성(on): 유리 광택 */
button.primary, button.on {
  background-color: #4a5cff;
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
  border-color: #4a5cff;
  color: #fff;
  box-shadow: 0 6px 18px rgba(74,92,255,.42), inset 0 1px 0 rgba(255,255,255,.4);
}
body.light button.primary, body.light button.on {
  background-image: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  box-shadow: 0 6px 18px rgba(74,92,255,.35), inset 0 1px 0 rgba(255,255,255,.55);
}
button:disabled { opacity: .45; }

/* ── 6) 입력칸: 투명 유리 필드 ── */
input, textarea, select {
  background-color: var(--g-field);
  border-color: var(--g-line);
}
body.light input, body.light textarea, body.light select {
  background-color: var(--g-field);
  border-color: var(--g-line-soft);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #7d8cff;
  box-shadow: 0 0 0 3px rgba(110,125,255,.28);
}
::placeholder { color: rgba(255,255,255,.34); }
body.light ::placeholder { color: rgba(90,100,150,.55); }

/* ── 7) 세그먼트 탭 컨테이너 (로그인/회원가입/게스트 · 채팅/시스템 · 온라인/오프라인 · 내채널/만들기) ── */
.tabs, .qTabs, .myTabs {
  background: var(--g-seg);
  border: 1px solid var(--g-line-soft);
  border-radius: 999px;
  padding: 4px;
  gap: 3px;
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
}
.tab, .qTab {
  background: transparent;
  border-color: transparent;
  border-radius: 999px;
  color: var(--g-txt2);
}
body.light .tab, body.light .qTab { background: transparent; color: var(--g-txt2); }
.tab.active, .qTab.on,
.myTabs .tab.active {
  background-color: var(--g-seg-on);
  background-image: linear-gradient(180deg, var(--g-sheen), rgba(255,255,255,0) 55%);
  border-color: transparent;
  color: var(--g-act-txt);
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,10,.22), inset 0 1px 0 rgba(255,255,255,.4);
}
body.light .myTabs .tab.active { color: var(--g-act-txt); }

/* ── 8) 모드 선택(함께듣기/스피커/리모콘)도 같은 알약 유리 ── */
.modeSeg {
  background: var(--g-seg);
  border: 1px solid var(--g-line-soft);
  border-radius: 20px;
  padding: 4px;
  gap: 4px;
}
.modeSeg .seg, #modeSeg .seg { background: transparent; border-color: transparent; }
body.light .modeSeg .seg { background: transparent; }
#modeSeg .seg.on {
  background-color: var(--g-seg-on);
  background-image: linear-gradient(180deg, var(--g-sheen), rgba(255,255,255,0) 55%);
  border-color: transparent;
  color: var(--g-act-txt);
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,10,.22), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ── 9) 목록 구분선/재생중 하이라이트 ── */
#queue li, #members li { border-bottom-color: var(--g-line-soft); }
body.light #queue li, body.light #members li { border-bottom-color: rgba(150,160,210,.25); }
#queue li.playing {
  background: rgba(125,135,255,.13);
  box-shadow: inset 0 0 0 1px rgba(140,150,255,.22);
}
body.light #queue li.playing {
  background: rgba(95,110,255,.13);
  box-shadow: inset 0 0 0 1px rgba(110,125,255,.35);
}

/* ── 10) 랜딩 '내 채널' 카드 타일도 유리판 ── */
#myRooms li.chanCard {
  background-image: linear-gradient(180deg, var(--g-sheen), rgba(255,255,255,0) 46%);
  background-color: var(--g-card);
  border-color: var(--g-line);
  border-radius: 20px;
  box-shadow: var(--g-shad), var(--g-inset);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
body.light #myRooms li.chanCard {
  background-image: linear-gradient(180deg, var(--g-sheen), rgba(255,255,255,0) 46%);
  background-color: var(--g-card);
  border-color: var(--g-line);
}

/* ── 11) 모달 오버레이: 뒷배경 블러 + 유리 모달 ── */
.overlay {
  background: rgba(8,10,22,.45);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
body.light .overlay { background: rgba(110,120,170,.25); }

/* ── 12) 토스트 ── */
#toast {
  background: var(--g-card-strong);
  border-color: rgba(125,135,255,.5);
  box-shadow: 0 10px 30px rgba(0,0,12,.35), inset 0 1px 0 rgba(255,255,255,.2);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
body.light #toast {
  background: var(--g-card-strong);
  border-color: rgba(110,125,255,.55);
  box-shadow: 0 10px 30px rgba(80,90,160,.2), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ── 13) 모바일 메뉴 드롭다운 유리 ── */
.actions {
  background: var(--g-card-strong);
  border-color: var(--g-line);
  box-shadow: 0 12px 30px rgba(0,0,10,.4);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}
body.light .actions { background: var(--g-card-strong); border-color: var(--g-line); }

/* ── 14) 내부 소형 패널: 안내문/설정 목록 ── */
.guestNote {
  background: var(--g-seg);
  border-color: var(--g-line-soft);
}
body.light .guestNote {
  background: rgba(255,255,255,.6);
  border-color: rgba(140,150,205,.28);
}
#lvlCfg { background: var(--g-seg); border-color: var(--g-line-soft); }
body.light #lvlCfg { background: rgba(255,255,255,.55); border-color: rgba(140,150,205,.28); }
#banList li { border-color: var(--g-line-soft); }
body.light #banList li { border-color: rgba(150,160,210,.25); }
#profileCard details { border-color: var(--g-line-soft); }
body.light #profileCard details { border-color: rgba(150,160,210,.25); }

/* 제어 요소(버튼·입력칸) 테두리: 유리 위에서도 윤곽이 보이도록 별도 톤 */
button, input, textarea, select,
body.light button, body.light input, body.light textarea, body.light select {
  border-color: var(--g-ctl);
}
body.light .actions { border-color: var(--g-ctl); }

/* 라이트 모드: 탭 컨테이너도 유리 톤 (기존 불투명 회색 대체) */
body.light .myTabs { background: var(--g-seg); border-color: var(--g-line-soft); }