html, body{
  margin:0;
  padding:0;
  min-height:100%;
  background:#08101d;
}
body{
  overflow-x:hidden;
  color:#eef3ff;
  font-family:Inter,"Pretendard","Noto Sans KR",Arial,sans-serif;
}
[data-cb-lobby-root]{
  position:relative;
  width:100%;
  min-height:100vh;
  color:#eef3ff;
  background:
    radial-gradient(circle at 50% 18%, rgba(72,123,255,.16), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(72,226,186,.10), transparent 28%),
    linear-gradient(180deg, #091120 0%, #0a1427 45%, #09101d 100%);
  overflow:hidden;
}
[data-cb-lobby-root] *{ box-sizing:border-box; }
.workshop-home--pano,[data-cb-workshop-legacy="1"]{ display:none !important; }
.cbLobby-top{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr) minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:10px 18px 12px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(6,12,24,.92), rgba(9,15,28,.82));
}
.cbLobby-top-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.cbLobby-brand{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#2f7dff,#1f4dd8); color:#fff; font-weight:900; }
.cbLobby-topnav{ display:flex; gap:10px; flex-wrap:wrap; }
.cbTopNav-btn{ min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.04); color:#eef3ff; font-size:14px; font-weight:800; cursor:pointer; }
.cbTopNav-btn.is-active{ background:linear-gradient(180deg, rgba(255,146,40,.96), rgba(215,96,10,.96)); color:#fff; border-color:rgba(255,186,120,.7); }
.cbLobby-job-pill{ padding:10px 18px; border-radius:18px; border:1px solid rgba(255,186,120,.35); background:linear-gradient(180deg, rgba(255,140,36,.96), rgba(213,93,12,.96)); color:#fff; }
.cbLobby-job-kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.78; font-weight:900; margin-bottom:4px; }
.cbLobby-job-title{ font-size:22px; font-weight:900; line-height:1.08; }
.cbLobby-job-meta{ font-size:13px; opacity:.92; margin-top:4px; }
.cbLobby-top-right{ display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.cbLobby-user-chip{ min-height:42px; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06); display:inline-flex; align-items:center; font-size:13px; font-weight:800; }
.cbLobby-auth-btn{ min-height:42px; padding:0 16px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:900; }
.cbLobby-zonebar{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:14px 18px 10px 18px; }
.cbZoneTab{ min-height:64px; padding:10px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(16,28,52,.9), rgba(11,21,40,.92)); color:#eef3ff; text-align:left; cursor:pointer; }
.cbZoneTab small{ display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.68; font-weight:800; margin-bottom:4px; }
.cbZoneTab strong{ display:block; font-size:17px; line-height:1.1; }
.cbZoneTab.is-active{ background:linear-gradient(180deg, rgba(35,114,255,.98), rgba(25,79,214,.98)); border-color:rgba(140,188,255,.7); }
.cbLobby-main{ display:grid; grid-template-columns:320px minmax(0,1fr) 360px; gap:18px; padding:6px 18px 14px 18px; min-height:calc(100vh - 208px); }
.cbLobby-left,.cbLobby-right{ display:flex; flex-direction:column; gap:16px; }
.cbPanel{ border-radius:22px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(12,20,37,.82), rgba(10,17,31,.92)); padding:18px; }
.cbPanel-kicker{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#86a4ff; font-weight:900; margin-bottom:10px; }
.cbPanel h3{ margin:0 0 8px 0; font-size:30px; line-height:1.04; }
.cbPanel p{ margin:0; line-height:1.65; color:rgba(238,243,255,.82); font-size:14px; }
.cbBriefRail{ display:grid; gap:10px; margin-top:10px; }
.cbBriefCard{ padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); }
.cbBriefCard strong{ display:block; font-size:14px; margin-bottom:4px; }
.cbBriefCard span{ display:block; color:rgba(238,243,255,.78); font-size:12px; line-height:1.45; }
.cbLobby-stage{ position:relative; min-height:calc(100vh - 228px); border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:#09111f; }
.cbLobby-scene{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }
.cbLobby-scene--next{ opacity:0; pointer-events:none; }
.cbLobby-overlay{ position:absolute; inset:0; background:radial-gradient(circle at 50% 60%, rgba(255,255,255,.08), transparent 28%),linear-gradient(180deg, rgba(4,9,18,.28) 0%, rgba(4,9,18,.16) 28%, rgba(4,9,18,.54) 78%, rgba(4,9,18,.9) 100%); pointer-events:none; }
.cbLobby-stageTop{ position:absolute; top:18px; left:18px; right:18px; z-index:4; display:flex; justify-content:space-between; gap:14px; }
.cbStage-signal{ max-width:min(58vw,760px); padding:16px 18px; border-radius:20px; border:1px solid rgba(255,255,255,.09); background:rgba(8,15,28,.48); }
.cbStage-hint{ font-size:15px; color:rgba(238,243,255,.84); line-height:1.6; }
.cbStage-miniBadges{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.cbMiniBadge{ min-height:36px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.08); display:inline-flex; align-items:center; color:#fff; font-size:12px; font-weight:900; }
.cbLobby-stageFocusWrap{ position:absolute; inset:120px 18px 118px 18px; z-index:4; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.cbStageFocus{ width:min(520px,92%); padding:20px; border-radius:26px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(9,16,30,.76), rgba(9,15,28,.92)); pointer-events:auto; }
.cbStageFocus-head{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; }
.cbStageFocus-emoji{ width:96px; height:96px; border-radius:24px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.10); font-size:42px; }
.cbStageFocus-meta h2{ margin:0 0 6px 0; font-size:30px; line-height:1.05; }
.cbStageFocus-meta p{ margin:0; color:rgba(238,243,255,.78); line-height:1.55; font-size:14px; }
.cbStageFocus-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cbStageFocus-badge{ min-height:28px; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); font-size:12px; font-weight:900; }
.cbStageFocus-lines{ display:grid; gap:8px; margin-top:14px; }
.cbStageFocus-line{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:rgba(238,243,255,.82); }
.cbStageFocus-line strong{ color:#fff; }
.cbLobby-stageSlots{ position:absolute; left:18px; right:18px; bottom:18px; z-index:4; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.cbStageZoneBtn{ min-height:60px; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.11); background:rgba(9,17,31,.72); color:#fff; text-align:left; cursor:pointer; }
.cbStageZoneBtn small{ display:block; font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.66; font-weight:800; margin-bottom:4px; }
.cbStageZoneBtn strong{ display:block; font-size:15px; }
.cbStageZoneBtn.is-active{ background:linear-gradient(180deg, rgba(255,146,40,.96), rgba(214,97,13,.96)); border-color:rgba(255,199,144,.64); }
.cbRosterList{ display:grid; gap:10px; }
.cbRosterCard{ width:100%; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); display:grid; grid-template-columns:60px minmax(0,1fr); gap:12px; align-items:center; color:#fff; cursor:pointer; }
.cbRosterCard.is-selected{ background:rgba(47,125,255,.18); border-color:rgba(130,180,255,.6); }
.cbRosterCard-emoji{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:28px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border:1px solid rgba(255,255,255,.10); }
.cbRosterCard strong{ display:block; font-size:15px; margin-bottom:4px; }
.cbRosterCard span{ display:block; font-size:12px; color:rgba(238,243,255,.75); line-height:1.45; }
.cbLobby-bottom{ display:grid; grid-template-columns:240px minmax(0,1fr); gap:18px; align-items:center; padding:0 18px 18px 18px; }
.cbBottomHint{ min-height:64px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(12,19,35,.82), rgba(10,16,30,.92)); display:flex; align-items:center; padding:0 16px; font-size:13px; font-weight:800; color:rgba(238,243,255,.86); }
.cbLobbyActionDock{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.cbActionBtn{ min-height:62px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05)); color:#fff; cursor:pointer; text-align:center; }
.cbActionBtn strong{ display:block; font-size:14px; margin-bottom:3px; }
.cbActionBtn span{ display:block; font-size:11px; color:rgba(238,243,255,.68); }
.cbActionBtn.is-primary{ background:linear-gradient(180deg, rgba(56,227,173,.96), rgba(18,170,125,.96)); color:#031712; border-color:rgba(154,255,227,.68); }
.cbActionBtn:disabled{ opacity:.42; cursor:not-allowed; }
.cbLobby-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:999999; min-width:280px; max-width:min(90vw,680px); padding:12px 14px; border-radius:14px; background:rgba(10,14,22,.94); border:1px solid rgba(255,255,255,.12); color:#fff; font-size:14px; font-weight:800; text-align:center; }
.cbLobby-fadeIn{ animation:cbLobbyFadeIn .22s ease; }
@keyframes cbLobbyFadeIn{ from{ opacity:0; transform:translate(-50%,6px); } to{ opacity:1; transform:translate(-50%,0); } }
@media (max-width: 1320px){ .cbLobby-top{ grid-template-columns:1fr; } .cbLobby-top-right{ justify-content:flex-start; } .cbLobby-main{ grid-template-columns:1fr; } .cbLobby-stage{ min-height:720px; } }
@media (max-width: 900px){ .cbLobby-zonebar{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cbLobby-stageSlots{ grid-template-columns:repeat(2,minmax(0,1fr)); } .cbLobby-bottom{ grid-template-columns:1fr; } .cbLobbyActionDock{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .cbLobby-stage{ min-height:560px; } .cbLobby-stageTop{ flex-direction:column; } .cbLobby-stageSlots{ grid-template-columns:1fr; } }

/* CB_MALL_FULLBLEED_LAYOUT_FIX_V2 */
[data-cb-lobby-root]{
  width:min(1720px, calc(100vw - 24px)) !important;
  max-width:none !important;
  min-height:calc(100vh - 96px) !important;
}

.cbRosterPanel{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cbRosterHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(12,18,34,.68);
  border:1px solid rgba(116,154,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.cbRosterHead strong{
  font-size:16px;
  line-height:1.2;
}

.cbRosterHead span{
  font-size:12px;
  opacity:.82;
}

.cbRosterList--wide{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-height:680px;
  overflow:auto;
  padding-right:4px;
}

.cbRosterCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:18px;
  background:rgba(12,18,34,.66);
  border:1px solid rgba(125,156,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  text-align:left;
}

.cbRosterCard-top{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.cbRosterCard-copy{
  min-width:0;
  flex:1 1 auto;
}

.cbRosterCard-title{
  font-size:15px;
  font-weight:700;
  line-height:1.28;
}

.cbRosterCard-meta{
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  opacity:.82;
  word-break:break-all;
}

.cbRosterCard-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cbInlineAction,
.cbActionBtn{
  appearance:none;
  border:1px solid rgba(136,167,255,.24);
  background:rgba(18,26,46,.92);
  color:#eef3ff;
  border-radius:14px;
  padding:10px 14px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease, opacity .16s ease, background .16s ease, border-color .16s ease;
}

.cbInlineAction:hover,
.cbActionBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(154,186,255,.42);
}

.cbInlineAction--primary,
.cbActionBtn--primary{
  background:linear-gradient(180deg,#6d84ff,#4d67ea);
  border-color:rgba(141,168,255,.55);
}

.cbActionBtn--soft{
  background:rgba(27,39,69,.94);
}

.cbActionBtn--ghost{
  background:rgba(12,18,34,.48);
}

.cbActionDockPanel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border-radius:20px;
  background:rgba(9,15,28,.72);
  border:1px solid rgba(124,155,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.cbActionDockHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.cbActionDockHead strong{
  font-size:16px;
  line-height:1.25;
}

.cbActionDockHead span,
.cbActionDockHint{
  font-size:12px;
  line-height:1.5;
  opacity:.82;
}

.cbActionDockActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cbEmptyNotice{
  padding:18px 16px;
  border-radius:18px;
  background:rgba(10,16,30,.58);
  border:1px dashed rgba(120,150,255,.24);
  font-size:13px;
  line-height:1.7;
  opacity:.9;
}

@media (max-width: 1480px){
  [data-cb-lobby-root]{
    width:min(1500px, calc(100vw - 20px)) !important;
  }
}

@media (max-width: 1180px){
  [data-cb-lobby-root]{
    width:calc(100vw - 16px) !important;
  }

  .cbRosterList--wide{
    max-height:none;
  }

  .cbActionDockActions{
    gap:8px;
  }
}