: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, #chat, #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; }
#chat { flex: 1; overflow-y: auto; padding: 4px; }
#chat li { padding: 4px 8px; border-radius: 8px; font-size: 14px; word-break: break-word; }
#chat li .ts { color: #6b7280; font-size: 11px; margin-right: 6px; }
#chat li .nick { font-weight: 700; margin-right: 6px; }
#chat li.sys { color: #9aa0ae; font-size: 12px; text-align: left; }
#chat li.notice { background: #3a2f14; border: 1px solid #6b5616; color: #ffd76a; text-align: left; font-size: 13px; }
#chat li .del { color: #7c8290; font-style: italic; }
#chat li .ed { color: #7c8290; font-size: 11px; margin-left: 4px; }
#chat li .ops { float: right; opacity: 0; }
#chat li:hover .ops { opacity: 1; }
#chat 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; }
#chat, #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 #chat li.sys { color: #7a808c; }
body.light #chat li.notice { background: #fff6d8; border-color: #e2c56a; color: #6b5616; }
body.light .by { background: #eceef6; color: #3d4ab8; }
body.light .qnum { color: #98a0ae; }
body.light #chat 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 #chat li .del { color: #9aa0ac; }
body.light #chat 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; }
#chat, #members { overflow-y: auto; }
/* ── 테마 전환 레이아웃 안정화 ── */
html { scrollbar-gutter: stable; }
#queue, #chat, #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, #chat { flex: 1 1 0; min-height: 0; overflow-y: auto; }
#chatForm { flex-shrink: 0; }
/* 데스크톱: 페이지 자체 스크롤 차단 (모든 영역이 내부 스크롤) */
@media (min-width: 901px) {
  body { 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; }