/* ============================================================
   대기실 V2 — 웹(≥1024) 전용, 처음부터 새로 짠 레이아웃
   기준 디자인: 정상 화면 1596×808. 절대좌표·transform·!important 로
   기존 CSS와 싸우지 않는다. 모든 클래스는 lobby-v2- 접두어.
   기존 대기실(.ca-waiting-*)과 클래스가 겹치지 않으므로 충돌 없음.
   ============================================================ */

/* #scr-lobby 내부는 이제 전부 V2 마크업이다(옛 .ca-waiting-shell 은 대체됨).
   웹(≥1024)은 아래 그리드 스펙으로 그리고, 1024 미만은 빈 화면이 되지 않도록
   세로 스택 폴백을 준다(모바일 정식 디자인은 후속 작업). */
#scr-lobby .lobby-v2{ display:none; }
#scr-lobby.show .lobby-v2{ display:grid; }

/* ---- 색 토큰 (기존 팔레트 유지) ---- */
.lobby-v2{
  --lv-navy:#123a6b; --lv-line:#0d2a56; --lv-cream:#fef6e6; --lv-cream2:#fff9ef;
  --lv-panel-border:#ead3a9; --lv-blue:#3d7bff; --lv-sky:#5cb3ff; --lv-orange:#ff9518;
  --lv-ink:#2a3b57; --lv-muted:#7a6a4c;
}

/* ============ 셸 : header / main / footer ============ */
#scr-lobby .lobby-v2{
  box-sizing:border-box;
  width:calc(100vw - 32px);
  max-width:none;
  height:calc(100dvh - 20px);
  min-height:calc(100dvh - 20px);
  margin:10px auto;
  grid-template-rows:60px minmax(0,1fr) 66px;
  overflow:hidden;
  border:3px solid var(--lv-line);
  border-radius:22px;
  background:linear-gradient(180deg,rgb(255 253 246 / .98),rgb(255 247 229 / .98));
}
#scr-lobby .lobby-v2 *{ box-sizing:border-box; min-width:0; }

/* ---- 헤더 ---- */
.lobby-v2-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; border-bottom:2px solid #f0dcb6;
}
.lobby-v2-title{
  display:flex; align-items:center; gap:10px; margin:0;
  font:900 24px/1 var(--kit-font,sans-serif); color:var(--lv-navy);
}
.lobby-v2-title img{ width:28px; height:28px; object-fit:contain; }
.lobby-v2-invite{
  display:flex; align-items:center; gap:8px;
  padding:5px 6px 5px 16px; border:2px solid var(--lv-line); border-radius:999px;
  background:linear-gradient(#27466f,#12294f);
}
.lobby-v2-code{ font:900 18px/1 var(--ca-mono,monospace); letter-spacing:.24em; color:#ffd155; }
.lobby-v2-invite-btn{
  border:2px solid rgb(255 255 255 / .85); border-radius:999px; cursor:pointer;
  background:linear-gradient(180deg,#79d4f5,#2f9eea); color:#fff;
  font:800 12px/1 var(--kit-font,sans-serif); padding:7px 15px; box-shadow:0 3px 0 #2172ad;
}
.lobby-v2-invite-btn:active{ transform:translateY(2px); box-shadow:none; }

/* ============ main : 좌 67% / 우 33% ============ */
.lobby-v2-main{
  display:grid;
  grid-template-columns:minmax(0,2.12fr) minmax(420px,1fr);
  gap:15px; padding:16px 18px; min-height:0;
}
.lobby-v2-left{
  display:grid; grid-template-rows:minmax(0,1fr) 90px; gap:12px; min-height:0;
}
.lobby-v2-right{
  display:grid; grid-template-rows:minmax(0,1.87fr) minmax(0,1fr); gap:11px; min-height:0;
}

/* ---- 플레이어 카드 2×2 ---- */
.lobby-v2-player-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px 11px; min-height:0;
}
.lobby-v2-seat{
  position:relative; min-width:0; min-height:0; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:16px 14px; border:3px solid #c8d9e5; border-radius:20px;
  background:#f7fbfb; box-shadow:inset 0 2px 0 #fff, 0 5px 0 rgb(120 130 160 / .16);
}
/* 좌석 색은 태그별로 (기존 팔레트) */
.lobby-v2-seat.seat-BTC{ border-color:#f0a63c; background:linear-gradient(180deg,#fff6e6,#fdeccb); }
.lobby-v2-seat.seat-ETH{ border-color:#5cc0f0; background:linear-gradient(180deg,#eaf7ff,#dcefff); }
.lobby-v2-seat.seat-SOL{ border-color:#a66cf0; background:linear-gradient(180deg,#f3ecff,#ece0ff); }
.lobby-v2-seat.seat-DOGE{ border-color:#72c746; background:linear-gradient(180deg,#effbe6,#e2f6d5); }
.lobby-v2-seat.empty{ border-style:dashed; border-color:#c8d9e5; background:rgb(255 255 255 / .55); box-shadow:none; }

.lobby-v2-seat .seat-face{
  width:clamp(72px,7vw,104px); height:auto; aspect-ratio:1/1; flex:0 0 auto; max-height:46%;
}
.lobby-v2-seat .seat-face-empty{ width:72px; height:72px; }
.lobby-v2-seat .seat-nm{ margin:0; font:900 16px/1.1 var(--kit-font,sans-serif); color:var(--lv-ink); text-align:center; }
.lobby-v2-seat .seat-nm.dim{ color:#9aa7bd; }
.lobby-v2-seat .seat-meta{ margin:0; font:800 11px/1 var(--ca-mono,monospace); letter-spacing:.12em; color:#8a97ad; }
.lobby-v2-seat .seat-badge{
  margin:0; padding:5px 14px; border-radius:999px; font:800 12px/1 var(--kit-font,sans-serif);
  border:2px solid rgb(255 255 255 / .8);
}
.lobby-v2-seat .seat-badge.ready{ background:linear-gradient(180deg,#7ed957,#39b54a); color:#fff; box-shadow:0 2px 0 #2b8c3a; }
.lobby-v2-seat .seat-badge.wait{ background:#e8edf4; color:#7a8aa3; }
.lobby-v2-seat .seat-badge.ai{ background:linear-gradient(180deg,#79d4f5,#2f9eea); color:#fff; box-shadow:0 2px 0 #2172ad; }
.lobby-v2-seat .seat-badge.empty{ background:#eef1f6; color:#a7b2c4; border-style:dashed; }

/* 코너 배지 — 카드 위에 떠 있는 작은 요소만 absolute */
.lobby-v2-seat .corner{
  position:absolute; top:11px; z-index:2;
  padding:5px 10px; border-radius:999px; border:2px solid rgb(255 255 255 / .85);
  font:900 10px/1 var(--kit-font,sans-serif); letter-spacing:.08em; color:#fff;
  text-shadow:0 1px 0 rgb(0 0 0 / .25);
}
.lobby-v2-seat .corner-l{ left:11px; }
.lobby-v2-seat .corner-r{ right:11px; background:linear-gradient(180deg,#2b4c78,#12294f); box-shadow:0 2px 0 #0d2a56; }
.lobby-v2-seat .corner-l.host{ background:linear-gradient(180deg,#ffc06a,#ff9518); box-shadow:0 2px 0 #c2610d; }
.lobby-v2-seat .corner-l.pl{ background:linear-gradient(180deg,#2b4c78,#12294f); box-shadow:0 2px 0 #0d2a56; }
.lobby-v2-seat .corner-l.ai{ background:linear-gradient(180deg,#79d4f5,#2f9eea); box-shadow:0 2px 0 #2b8fbd; }
/* 내 카드 캐릭터 교체 버튼 — 카드 우하단 떠 있음 */
.lobby-v2-seat .ca-card-swap{
  position:absolute; right:11px; bottom:11px; z-index:2;
  width:38px; height:38px; padding:7px; border:0; cursor:pointer;
  background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
}
.lobby-v2-seat .ca-card-swap img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
.lobby-v2-seat .ca-card-swap:active{ transform:translateY(2px); }

/* ---- 캐릭터 선택 레일 (좌측 하단 90px) ---- */
.lobby-v2-char{
  display:grid; grid-template-columns:auto minmax(0,1fr) 46px; align-items:center; gap:10px;
  padding:8px 12px; border:2px solid var(--lv-panel-border); border-radius:18px;
  background:rgb(255 250 236 / .92);
}
.lobby-v2-char-label{ font:900 12px/1.3 var(--kit-font,sans-serif); color:var(--lv-muted); text-align:center; }
.lobby-v2-char-tiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; height:100%; }
.lobby-v2-char-tiles .char-opt{
  display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; align-content:center; gap:3px;
  min-width:0; height:100%; padding:5px 4px 6px;
  border:2px solid #c8d9e5; border-radius:14px; background:#f7fbfb; cursor:pointer; overflow:hidden;
}
/* buildPicker 가 붙이는 data-ca-skin="character-tile" 때문에 ds-v5 가 선택 타일에
   character-tile-selected.png(주황 프레임) 배경을 !important 로 깐다. V2 는 자체 테두리를
   쓰므로 그 PNG 스킨만 끈다. ds-v5 선택자가 (0,3,0)!important 라 #charRail(ID)로 눌러 이긴다.
   (타이틀 화면 picker #charOpts 는 공용 함수라 건드리지 않고, 여기 범위에서만 무력화) */
#charRail .char-opt{ background-image:none !important; border-image:none !important; padding:5px 4px 6px !important; }
.lobby-v2-char-tiles .char-opt canvas{ width:auto; height:100%; max-height:44px; aspect-ratio:1/1; }
.lobby-v2-char-tiles .char-opt .tg{ font:900 9px/1 var(--ca-mono,monospace); letter-spacing:.08em; white-space:nowrap; }
.lobby-v2-char-tiles .char-opt.on{ border-color:#ff9a18; background:#fff3dc; box-shadow:inset 0 0 0 2px #fff; }
.lobby-v2-char-tiles .char-opt.is-taken{ filter:grayscale(.7); opacity:.45; cursor:not-allowed; }
.lobby-v2-char-shuffle{
  width:46px; height:46px; padding:9px; border:0; cursor:pointer; align-self:center;
  background:transparent url("/assets/ui/buttons/button-icon-square-blue.png") center / 100% 100% no-repeat;
}
.lobby-v2-char-shuffle img{ width:100%; height:100%; object-fit:contain; pointer-events:none; }
.lobby-v2-char-shuffle:active{ transform:translateY(2px); }

/* ============ 우측 : 매치 설정 / 채팅 ============ */
.lobby-v2-panel{
  border:2px solid var(--lv-panel-border); border-radius:18px;
  background:var(--lv-cream2); min-height:0; display:grid;
}
.lobby-v2-settings{ grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.lobby-v2-chat{ grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; gap:10px; padding-bottom:14px; }

.lobby-v2-panel-head{
  display:flex; align-items:center; gap:8px; padding:12px 16px 10px;
  font:800 15px/1 var(--kit-font,sans-serif); color:var(--lv-navy);
}
.lobby-v2-panel-head img{ width:22px; height:22px; object-fit:contain; }
.lobby-v2-head-ic{ font-size:17px; line-height:1; }
.lobby-v2-panel-head small{ font-weight:600; font-size:11px; color:#9aa7bd; }

/* 설정 행 */
.lobby-v2-settings-body{ padding:4px 14px 14px; min-height:0; overflow:auto; }
.lobby-v2-set-row{
  display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; gap:10px; margin-bottom:10px;
}
.lobby-v2-set-row:last-child{ margin-bottom:0; }
.lobby-v2-set-row > .lobby-v2-set-label{ font:800 12px/1.2 var(--kit-font,sans-serif); color:var(--lv-muted); white-space:nowrap; }
.lobby-v2-seg{ display:flex; gap:6px; }
.lobby-v2-seg > button{
  flex:1 1 0; min-width:0; min-height:36px; cursor:pointer;
  border:2px solid #d8c39a; border-radius:12px; background:#fff; color:#7a6a4c;
  font:800 12px/1 var(--kit-font,sans-serif); padding:6px 4px; white-space:nowrap;
}
.lobby-v2-seg > button.on{
  border-color:#e08a0a; background:linear-gradient(180deg,#ffb648,#ff9518); color:#fff; box-shadow:0 2px 0 #c2610d;
}
/* 맵 선택 : 라벨 위 + 썸네일 4개 전체폭 */
.lobby-v2-set-row--maps{ grid-template-columns:1fr; gap:8px; }
.lobby-v2-mapseg{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.lobby-v2-mapseg > button{
  display:grid; grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:3px;
  min-width:0; cursor:pointer; padding:5px; border:2px solid #d8c39a; border-radius:12px; background:#fff;
}
.lobby-v2-mapseg > button.on{ border-color:#e08a0a; background:#fff3dc; box-shadow:inset 0 0 0 2px #fff; }
.lobby-v2-mapseg > button canvas{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:7px; }
.lobby-v2-mapseg > button i{ font:800 10px/1.1 var(--kit-font,sans-serif); color:#7a6a4c; font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.lobby-v2-settings.locked{ opacity:.75; pointer-events:none; }

/* 채팅 */
.lobby-v2-chat-log{
  margin:0 14px; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid #d9e6f2; border-radius:13px; background:rgb(240 247 255 / .7);
  padding:10px; font-size:12.5px; line-height:1.7;
}
.lobby-v2-chat-log [data-ca="message"]{ margin-bottom:5px; }
.lobby-v2-chat-log .nick{ font-weight:800; margin-right:5px; color:#2f7fe0; }
.lobby-v2-chat-log .is-system{ color:#8a97ad; font-style:italic; }
.lobby-v2-chat-input{
  display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:8px; margin:0 14px;
}
.lobby-v2-chat-input input{
  min-width:0; height:46px; padding:0 16px; border:2px solid #d9e6f2; border-radius:999px;
  background:#fff; font:inherit; color:var(--lv-ink);
}
.lobby-v2-send{
  width:42px; height:42px; padding:0; border:0; cursor:pointer; border-radius:12px;
  background:transparent url("/ds-v7/buttons/send.png") center / 100% 100% no-repeat;
}
.lobby-v2-send .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.lobby-v2-send:active{ transform:translateY(2px); }

/* ============ footer : 나가기 / 도감(채움) / 게임시작 ============ */
.lobby-v2-footer{
  display:flex; align-items:center; gap:14px; padding:0 18px;
  border-top:2px solid #ead6b3; background:rgb(255 249 235 / .96);
}
.lobby-v2-footer > button{ cursor:pointer; font:inherit; }
.lobby-v2-exit{
  flex:0 0 auto; min-width:96px; height:44px; padding:0 18px;
  border:2px solid #cdd6e2; border-radius:14px; background:#fff; color:#5a6b86; font-weight:800;
}
.lobby-v2-hint{ flex:0 0 auto; font-size:13px; color:#9aa7bd; white-space:nowrap; }
.lobby-v2-itembook{
  flex:1 1 auto; height:48px; border:2px solid #123f74; border-radius:14px;
  background:linear-gradient(180deg,#5cb3ff,#2f7fe0); color:#fff; font-weight:900;
  box-shadow:0 4px 0 #1f5aa0;
}
.lobby-v2-itembook:active{ transform:translateY(3px); box-shadow:0 1px 0 #1f5aa0; }
.lobby-v2-ready{
  flex:0 0 auto; min-width:150px; height:48px; padding:0 20px;
  border:2px solid #2b8c3a; border-radius:14px; background:linear-gradient(180deg,#7ed957,#39b54a);
  color:#fff; font-weight:900; box-shadow:0 4px 0 #2b8c3a;
}
.lobby-v2-ready.btn-ready{ background:linear-gradient(180deg,#ffd36a,#f0a020); border-color:#c2790d; box-shadow:0 4px 0 #c2790d; }
.lobby-v2-start{
  flex:0 0 170px; width:170px; height:48px;
  border:2px solid #c2610d; border-radius:14px; background:linear-gradient(180deg,#ffb648,#ff9518);
  color:#fff; font-weight:900; box-shadow:0 4px 0 #c2610d;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.lobby-v2-start img{ width:22px; height:22px; object-fit:contain; }
.lobby-v2-start:disabled{ filter:grayscale(.5) opacity(.6); cursor:not-allowed; box-shadow:none; }
.lobby-v2-start:not(:disabled):active{ transform:translateY(3px); box-shadow:0 1px 0 #c2610d; }

/* ============ 1024 미만 폴백 : 세로 스택 + 스크롤 ============
   웹 그리드(고정 높이·우측 min-width)는 좁은 화면에서 깨지므로, 빈 화면/가로스크롤을
   막기 위해 단일 컬럼으로 풀어 세로 스크롤로 담는다. 모바일 정식 디자인은 후속. */
@media (max-width:1023px){
  #scr-lobby.show .lobby-v2{
    display:flex; flex-direction:column;
    width:100%; max-width:100%; height:auto; min-height:100dvh; margin:0;
    border:0; border-radius:0; overflow-y:auto; overflow-x:hidden;
  }
  .lobby-v2-main{ grid-template-columns:1fr; gap:12px; }
  .lobby-v2-left{ grid-template-rows:auto auto; }
  .lobby-v2-right{ grid-template-rows:auto auto; }
  .lobby-v2-player-grid{ grid-template-rows:repeat(2,minmax(150px,1fr)); }
  .lobby-v2-settings, .lobby-v2-chat{ min-height:220px; }
  .lobby-v2-chat-log{ min-height:120px; }
  .lobby-v2-header, .lobby-v2-footer{ position:sticky; z-index:5; }
  .lobby-v2-header{ top:0; }
  .lobby-v2-footer{ bottom:0; flex-wrap:wrap; gap:8px; padding:8px 12px; }
}