/* 대기실: 원작처럼 방 카드 2열 + 오른쪽 대화 */
.lobby { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 760px) { .lobby { grid-template-columns: 1fr; } }

.rooms { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  background: var(--inset); border-radius: 8px; border: 2px solid var(--panel-lo); border-bottom-color: var(--panel-hi); border-right-color: var(--panel-hi); min-height: 180px; align-content: start; }
@media (max-width: 560px) { .rooms { grid-template-columns: 1fr; } }
.room-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; width: 100%;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: linear-gradient(180deg, #4b9cf0, #2a74cf); border: 2px solid var(--panel-lo); border-top-color: var(--panel-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.room-item:hover { filter: brightness(1.1); }
.room-item[aria-disabled=true] { filter: grayscale(.5) brightness(.8); cursor: default; }
.room-item .t { font: 400 17px var(--kr); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.room-item .t svg { width: 14px; height: 14px; stroke: var(--num); fill: none; stroke-width: 2; flex: none; }
.room-item .n { font: 400 16px var(--mono); color: var(--num); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font: 400 13px var(--kr); padding: 0 7px; border-radius: 5px; background: var(--inset); color: var(--muted); border: 1px solid var(--panel-lo); }
.tag.item { color: #ffb4ad; }
.tag.boss { color: #ffd0a0; }
.tag.team { color: #b8f5c6; }   /* 팀전 2 : 2 */
.bot-note { color: var(--num); }   /* 봇전 창: 홀드 무제한(안내 줄 옆에 노란 글씨) */
.tag.live { color: #fff; background: var(--danger); border-color: #a31d15; }
.empty { margin: 0; }

.chat { min-height: 220px; }
.chat-log { list-style: none; margin: 0; padding: 8px 10px; flex: 1; overflow-y: auto; max-height: 300px; display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; overflow-wrap: anywhere; background: var(--inset); border-radius: 8px; border: 2px solid var(--panel-lo); }
.chat-log b { color: var(--num); font-weight: 600; margin-right: 6px; }
.chat-log .sys { color: var(--dim); }
.chat-form { display: flex; gap: 8px; }

.item-guide { display: flex; flex-direction: column; gap: 8px; }
.guide-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.guide-kind { font: 400 15px var(--kr); width: 100%; }
.guide-kind.atk { color: #ffb4ad; }
.guide-kind.def { color: #9ff0fa; }
.guide-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.room-item .rno { font: 400 14px var(--mono); color: var(--num); min-width: 22px; }

/* ---------- 대기실 창(원작 대기실): 왼쪽 방 목록 · 오른쪽 내 정보·접속자 · 아래 채팅 ---------- */
.lb-body { flex: 1; min-height: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(190px, 1fr);
  grid-template-areas: "rooms side" "chat side"; }
.lb-rooms { grid-area: rooms; min-height: 0; padding: 10px; }
.lb-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.lb-chat { grid-area: chat; min-height: 0; padding: 10px; gap: 8px; }
.lb-chat .chat-log { max-height: none; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lb-sort { display: flex; gap: 2px; background: #0d2d6b; border-radius: 8px; padding: 3px; }
.lb-sort button { border: 0; background: none; color: var(--muted); font: 400 15px var(--kr); padding: 4px 12px; border-radius: 6px; cursor: pointer; }
.lb-sort button.on { background: #fff; color: #1a4f9e; }
.rooms-box { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* 방 목록은 방 12개(두 칸씩 6줄)가 딱 들어가는 높이 — 아래 빈칸 없이, 남는 세로는 채팅이 가져간다. 방이 더 많으면 목록 안에서 스크롤 */
.lb-rooms .rooms { flex: none; height: calc(6 * 56px + 5 * 8px + 24px); overflow-y: auto; overflow-x: hidden; }   /* 옆으로는 스크롤하지 않는다(사파리에서 가로 스크롤바가 생겼다) */
.lb-rooms .room-item { height: 56px; padding-block: 5px; row-gap: 0; }
/* 방이 없으면 빈 목록 한가운데에 안내(목록 아래 따로 두면 큰 빈 상자만 보인다) */
.lb-rooms .empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; pointer-events: none; font-size: 16px; }

/* 방 카드: 왼쪽 큰 번호, 제목, 표시, 인원, 입장 */
.room-item { grid-template-columns: 54px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 10px; }
.room-item .rno { grid-row: span 2; display: grid; place-items: center; height: 100%; border-radius: 6px; background: #0d2d6b; font: 400 22px var(--display); color: var(--num); }
.room-item .t { grid-column: 2; }
.room-item .tags { grid-column: 2; }
.room-item .n { grid-column: 3; grid-row: 1; text-align: right; }
.room-item .enter { grid-column: 3; grid-row: 2; font: 400 14px var(--kr); padding: 2px 12px; border-radius: 6px; color: #4a2600;
  background: linear-gradient(180deg, #ffe066, #ffb020); border: 1px solid #a55a00; text-align: center; }
.room-item[aria-disabled=true] .enter { background: #5f7db0; color: #d0dcf0; border-color: #33507e; }

/* 내 정보 */
.lb-me { display: grid; grid-template-columns: 96px 1fr; gap: 8px 12px; align-items: center; padding: 12px; }
.lb-avatar { width: 96px; height: 96px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, #7cc4ff, #1c56a8); display: grid; place-items: center;
  border: 2px solid #0f3f8a; box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.lb-avatar svg { width: 78px; height: 78px; }
/* 캐릭터(픽셀 그림 160×168을 그대로 줄여 쓴다). 내 정보 칸 캐릭터는 눌러서 바꾼다 */
.char { image-rendering: pixelated; display: block; }
button.lb-avatar { position: relative; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.lb-avatar:hover { border-color: var(--num); }
.lb-avatar .char { width: 80px; height: 84px; }
.lb-avatar-edit { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--num); border: 2px solid #0f3f8a; box-shadow: 0 2px 0 rgba(8, 30, 80, .45); }
.lb-avatar-edit svg { width: 14px; height: 14px; fill: none; stroke: #3a2400; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#userList .char { width: 24px; height: 25px; flex: none; }

/* 캐릭터 고르기 창 */
#charPop { width: min(880px, calc(100vw - 32px)); }
.char-pop .set-title { gap: 12px; }
.char-pop .set-title h2 { margin-right: auto; }
.char-me { display: flex; align-items: center; gap: 6px; font: 400 17px var(--kr); color: #cfe4ff; }
.char-me .rank { color: var(--num); }
.char-well { background: var(--inset); border-radius: 10px; padding: 12px; border: 2px solid var(--panel-lo); border-bottom-color: var(--panel-hi); border-right-color: var(--panel-hi); }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }   /* 넓으면 한 줄에 6개(6+5) */
.char-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 9px; border-radius: 10px;
  cursor: pointer; text-align: center; color: #fff; background: linear-gradient(180deg, #2a64b8, #1d4a92); border: 2px solid #0f3f8a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.char-card:hover { border-color: #8fd0ff; }
.char-card .pic { width: 100%; max-width: 104px; aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #7cc4ff, #1c56a8); border: 2px solid #0f3f8a; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.char-card .char { width: 80px; height: 84px; }
.char-card .nm { font: 400 18px var(--kr); line-height: 1.1; text-shadow: 0 1px 0 #0b2f6b; }
.char-card .from { display: flex; align-items: center; gap: 4px; font: 400 14px var(--kr); color: #cfe4ff; }
.char-card.sel { border-color: var(--num); background: linear-gradient(180deg, #3a74c8, #24549e);
  box-shadow: 0 0 0 2px var(--num), 0 0 16px rgba(255, 210, 31, .55), inset 0 1px 0 rgba(255, 255, 255, .25); }
.char-card.sel .nm { color: var(--num); }
.char-card.lock { cursor: not-allowed; background: linear-gradient(180deg, #1d4688, #15376f); }
.char-card.lock:hover { border-color: #0f3f8a; }
.char-card.lock .pic { background: radial-gradient(circle at 50% 35%, #4d7fb8, #163f80); }
.char-card.lock .char { filter: url(#charSilhouette); }
.char-card.lock .nm, .char-card.lock .from { color: #8fb2e6; }
.char-card .lockmark { position: absolute; inset: 0; display: grid; place-items: center; }
.char-card .lockmark > span { width: 34px; height: 34px; border-radius: 50%; background: rgba(7, 29, 64, .78); border: 2px solid #8fb2e6; display: grid; place-items: center; }
.char-card .lockmark svg { width: 18px; height: 18px; fill: none; stroke: #e6f0ff; stroke-width: 2.4; stroke-linejoin: round; }
.char-card .lockmark svg rect { fill: #e6f0ff; stroke: none; }
.char-hint { margin: 0; }
.lb-name { font: 400 22px var(--kr); color: #fff; text-shadow: 0 1px 0 var(--panel-lo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-grade { font: 400 16px var(--kr); color: var(--num); }
.lb-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.lb-stats div { background: #0d2d6b; border-radius: 8px; padding: 6px 4px; text-align: center; }
.lb-stats dt { font: 400 12px var(--kr); color: var(--muted); }
.lb-stats dd { margin: 0; font: 400 15px var(--display); color: #fff; white-space: nowrap; }
.lb-next { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; font: 400 13px var(--kr); color: var(--muted); }

/* 접속자 */
.lb-users { flex: 1; min-height: 0; padding: 10px; gap: 6px; }
.lb-users-head { font: 400 16px var(--kr); color: #fff; }
.lb-users-head b { color: var(--num); font-weight: 400; }
#userList { list-style: none; margin: 0; padding: 6px; flex: 1; overflow-y: auto; background: var(--inset); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
#userList li { display: flex; align-items: center; gap: 6px; font: 400 15px var(--kr); padding: 2px 4px; border-radius: 5px; }
#userList li.me { background: rgba(255, 210, 31, .15); }
#userList li[data-user], #friendList li[data-friend] { cursor: pointer; }
#friendList li[data-friend]:hover { background: rgba(255, 255, 255, .07); }
#userList li[data-user]:not(.me):hover { background: rgba(255, 255, 255, .07); }
#userList .where { margin-left: auto; font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .lb-body { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "side" "rooms" "chat"; }
  .lb-users { display: none; }
  .lb-rooms .rooms { height: auto; max-height: 50svh; }
  .lb-chat .chat-log { max-height: 180px; }
}

/* 방 번호로 들어가기 */
.lb-no { display: flex; gap: 4px; }
.lb-no input { width: 84px; padding: 6px 8px; border-radius: 8px; border: 2px solid #0b2a66; background: var(--inset); color: #fff; font: 400 15px var(--kr); text-align: center; }

/* 접속자 · 친구 탭 */
.lb-users-head { display: flex; gap: 4px; }
.lb-users-head button { flex: 1; position: relative; padding: 5px 0; border: 0; border-radius: 8px; background: #0d2d6b; color: var(--muted); font: 400 15px var(--kr); cursor: pointer; }
.lb-users-head button.on { background: linear-gradient(180deg, #5aa2ff, #2e6be0); color: #fff; }
.lb-users-head .dot { position: absolute; top: 4px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4a; }
#friendPane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#friendPane[hidden] { display: none; }
#reqList, #friendList { list-style: none; margin: 0; padding: 6px; background: var(--inset); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
#reqList:empty { display: none; }
#friendList { flex: 1; overflow-y: auto; }
#reqList li, #friendList li { display: flex; align-items: center; gap: 6px; font: 400 15px var(--kr); padding: 3px 4px; border-radius: 5px; }
#reqList li { background: rgba(255, 210, 31, .15); }
#friendList li.off { opacity: .5; }
#friendList .where, #reqList .where { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fr-empty { margin: 0; font-size: 13px; text-align: center; }
.fr-empty:empty { display: none; }
.on-dot { width: 8px; height: 8px; border-radius: 50%; background: #5c6f99; flex: none; }
li:not(.off) > .on-dot { background: #39d353; }
.mini { padding: 2px 8px; border: 0; border-radius: 6px; font: 400 12px var(--kr); cursor: pointer; background: #2e6be0; color: #fff; white-space: nowrap; }
.mini.ghost { background: transparent; color: var(--muted); }
.mini.ok { background: #2fae4a; }
#userList .mini { margin-left: 4px; }

/* 초대 창 */
.inv-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.inv-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .15); }
.inv-list .where { margin-left: auto; font-size: 13px; color: var(--muted); }
.ask-card { text-align: center; }
.ask-card .row { justify-content: center; }
.chip.off { opacity: .45; cursor: not-allowed; }
#dlgBot .chip { padding-inline: 10px; }   /* 봇전 인원 2~6인방 다섯 칸이 한 줄에 들어가게 */

/* ── 다듬기(2026-10-01): 한게임 파란 판은 그대로, 세부만 ─────────────────────
   오목한 남색 칸에 테트리스 판 같은 옅은 격자와 안쪽 그림자, 방 카드의 인원 칸, 올리면 살짝 떠오름 */
.rooms, .lb-chat .chat-log, .game-chat .chat-log, #userList, #friendList {
  background-color: var(--inset);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .22), transparent 90px),
    linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px, 22px 22px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35);
}
.room-item { transition: transform .15s, box-shadow .15s, filter .15s; }
.room-item:not([aria-disabled=true]):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(6, 26, 70, .45); }
.room-item .n { display: inline-flex; align-items: center; gap: 8px; }
/* 인원 칸: 찬 자리는 노란 블록, 빈 자리는 어두운 블록 */
.seats { display: inline-flex; gap: 2px; }
.seats i { width: 7px; height: 7px; border-radius: 1.5px; background: #0d2d6b; box-shadow: inset 0 0 0 1px rgba(143, 208, 255, .25); }
.seats i.on { background: linear-gradient(180deg, #ffe066, #f0a400); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }