/* =========================================================
   단단타로 Ver.6 스타일시트 (3D 레이아웃 & 프리미엄 다크 테마)
   ========================================================= */

:root {
  /* 테마 색상 (배경 이미지 없이 깔끔한 다크 톤) */
  --bg-gradient: radial-gradient(circle at center, #15181f 0%, #0b0d11 100%);
  --panel-bg: rgba(20, 23, 30, 0.6);
  /* 심플하고 과하지 않은 글래스모피즘 */
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-blur: blur(12px);

  --ink: #e2e8f0;
  --muted: #8a99ad;
  --stroke: rgba(255, 255, 255, 0.08);
  --link: #7faeff;
  --danger: #ff4a70;
  --success: #2cc781;

  /* 3D 테이블 설정 */
  --table-bg: linear-gradient(135deg, #1f2430 0%, #12151d 100%);
  --table-border: rgba(255, 255, 255, 0.04);
  --table-rim: #2d3345;

  /* 카드 크기 (기본값) */
  --card-w: 180px;
  --card-h: 288px;
  --card-gap: 24px;

  /* 버튼 스타일 */
  --btn-bg: #161a25;
  --btn-fg: #e2e8f0;
  --btn-border: rgba(255, 255, 255, 0.1);
  --btn-radius: 8px;

  /* 🌟 [피드백 반영] 카드 섞기(셔플) 연출용 CSS 변수 복원 (index_v5.html 정밀 대조 완벽 동기화) */
  --shuffle-text-content: "기다려주세요..";
  --shuffle-text-color: #9391fd;
  --shuffle-text-size: 40px;
  --shuffle-overlay-bg: rgba(0, 0, 0, 0.5);
  --shuffle-blur-strength: 2px;
  --shuffle-wave-speed: 2s;
  --shuffle-wave-height: -30px;
  --shuffle-sub-box-bg: rgba(70, 70, 70, 0.1);
  --shuffle-sub-box-text-color: #e7eaf0;
  --shuffle-sub-box-font-size: 20px;
  --shuffle-sub-box-title: "DO YOU KNOW?";
  --shuffle-sub-box-content: "다니얀님의 TMI를 알아봅시다.";
  --shuffle-modal-width: 1000px;
  --shuffle-text-sub-box-gap: 50px;
  --shuffle-sub-box-gap: 40px;
  --shuffle-sub-box-content-width-fixed: 450px;
  --shuffle-sub-box-height: 160px;
  --shuffle-ani-title-delay: 1s;
  --shuffle-ani-content-delay: 6s;
  --shuffle-video-size: 400px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg-gradient);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overflow: hidden;
  /* 전체 스크롤 방지, 내부 스크롤 사용 */

  /* 🌟 [피드백 반영] 드래그 시 파란색 영역 선택(하이라이트) 전면 방지 */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 입력 폼 및 메모장 영역은 텍스트 선택 허용 */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* 모바일 차단 */
#mobileBlockOverlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  width: 100% !important;
  height: 100% !important;
  background: #0b0e14 !important;
  /* 완전 불투명 처리로 렌더링 배율 왜곡 차단 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000000 !important;
  /* 최상단 레이어 보장 */
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #e3e3e3;
  font-family: 'Outfit', 'Noto Sans KR', sans-serif;
  text-align: center;
  padding: 30px;
  box-sizing: border-box;
  touch-action: none;
  /* 터치 스크롤 동작 전면 금지 */
}

#mobileBlockOverlay.show {
  display: flex !important;
}

#mobileBlockOverlay .material-symbols-outlined {
  font-size: 72px !important;
  /* 절대 단위 고정 */
  color: #4facfe;
  margin-bottom: 24px;
  animation: blockPulse 2s infinite;
}

#mobileBlockOverlay h2 {
  font-size: 22px !important;
  /* 들쭉날쭉 깨지지 않도록 절대 단위 고정 */
  font-weight: 800;
  margin: 0 0 16px;
  color: #fff;
  line-height: 1.4;
  word-break: keep-all;
}

#mobileBlockOverlay p {
  font-size: 14px !important;
  /* 절대 단위 고정 */
  color: #7f8aa3;
  line-height: 1.6;
  margin: 0;
  word-break: keep-all;
}

@keyframes blockPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* =========================================================
   [1] 레이아웃 구조
   - 대기열: 왼쪽 고정, 세로 전체(100vh)를 차지함.
   - 오른쪽 영역(main-content): 남은 공간을 좌우/상하로 분할.
   ========================================================= */

.app-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  /* 대기열 320px, 우측 영역 나머지 */
  gap: 20px;
  height: 100vh;
  padding: 20px;
  position: relative;
  z-index: 10;
}

/* 공통 사이드 패널 스타일 (글래스모피즘) */
aside {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* [왼쪽] 대기열 패널 (Queue) */
.queue-box-v6 {
  height: calc(100vh - 40px) !important;
  max-height: calc(100vh - 40px) !important;
  position: relative;
  overflow: visible;
  z-index: 11000;
  /* 우측 3D 테이블 영역 및 커맨드바(8000)보다 레이어가 앞에 오도록 상향 */
}

.queue-header-group {
  flex: 0 0 auto;
}

.queue-box-v6 .queue-header {
  padding: 16px;
  border-bottom: 1px solid var(--stroke);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
}

.queue-box-v6 .queue-title {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.queue-box-v6 .icon-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

.queue-box-v6 .icon-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.queue-box-v6 .queue-status {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--stroke);
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-box-v6 .queue-val {
  font-weight: 700;
  color: var(--link);
}

/* 대기열 페이징 바 */
.queue-page-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.1);
  user-select: none;
}

.page-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.page-btn:hover:not(:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.page-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.page-btn span {
  font-size: 18px;
}

.page-indicator {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* 대기열 리스트 컨테이너 (하단 배치 - flex: 1 적용) */
.queue-table-container {
  flex: 1;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.queue-box-v6 .queue-body {
  flex: 1;
  overflow-y: hidden;
}

.queue-box-v6 .queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
}

.queue-box-v6 .queue-table th {
  position: sticky;
  top: 0;
  background: #15181f;
  height: 38px;
  padding: 0 10px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
  box-sizing: border-box;
}

.queue-box-v6 .queue-table td {
  height: 37px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

/* 가로 높이 조절 구분선 (Splitter) */
.queue-splitter {
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  z-index: 10;
}

.queue-splitter:hover {
  background: rgba(127, 174, 255, 0.1);
}

.splitter-line {
  width: 36px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

/* 최상단 채팅창 영역 (상단 배치 - 고정 높이 리사이즈 가능) */
.queue-chat-container {
  height: 150px;
  min-height: 100px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-placeholder-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  user-select: none;
}

/* 대기열 내장 편집 패널 */
.queue-edit-panel {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  width: 320px;
  height: 100%;
  background: #13161f;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  display: none;
  flex-direction: column;
  z-index: 12000 !important;
  /* 커맨드 바(8000) 및 설정(9000) 위에 오도록 최상단 상향 */
  box-shadow: 12px 12px 32px rgba(0, 0, 0, 0.6);
}

.queue-edit-panel.show {
  display: flex;
}

.edit-header {
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--stroke);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.edit-header-btns {
  display: flex;
  gap: 6px;
}

.edit-btn {
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.edit-btn.cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  border: 1px solid var(--stroke);
}

.edit-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.edit-btn.reflect {
  background: rgba(44, 199, 129, 0.15);
  color: var(--success);
  border: 1px solid rgba(44, 199, 129, 0.3);
}

.edit-btn.reflect:hover {
  background: rgba(44, 199, 129, 0.25);
  color: #fff;
  border-color: rgba(44, 199, 129, 0.4);
}

.edit-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  overflow: hidden;
  gap: 12px;
}

.edit-add-row {
  display: flex;
  gap: 6px;
  width: 100%;
  /* 부모 너비에 강제 피팅 */
}

.edit-add-row input {
  background: #0c0f14;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  font-size: 13px;
  outline: none;
  flex: 1;
  min-width: 0;
  /* flex 박스 내 삐져나옴 방지 */
}

.edit-add-row input#addType {
  flex: 0 0 95px;
  /* 종류 입력창 가로를 95px로 최적화 */
  min-width: 0;
}

.edit-add-row button {
  background: var(--link);
  color: #0c0f14;
  border: none;
  border-radius: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 54px;
  /* 추가 버튼 가로를 54px로 컴팩트하게 고정 */
  text-align: center;
}

.edit-list {
  flex: 1;
  list-style: none;
  padding: 0 6px 0 0;
  /* 우측에 6px 패딩을 확보하여 스크롤바가 들어올 공간을 미리 격리 */
  margin: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 👉 [피드백 반영] 대기열 편집창 전용 미니멀/투명 커스텀 스크롤바 */
.edit-list::-webkit-scrollbar {
  width: 8px;
  /* 스크롤바 너비를 8px로 늘려 가독성 증가 */
}

.edit-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  /* 트랙에 어두운 배경을 깔아 명도비 확보 */
  border-radius: 4px;
}

.edit-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  /* 반투명 스크롤바 투명도를 0.3으로 상향 */
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.edit-list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.edit-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: move;
  width: 100%;
  /* 너비 100% 고정 */
}

.edit-item.dragging {
  opacity: 0.4;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.05);
}

.edit-item .edit-drag-handle {
  color: var(--muted);
  font-size: 16px;
  cursor: move;
  user-select: none;
}

.edit-item .edit-nick {
  flex: 1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-item .edit-type {
  color: var(--link);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  /* 종류 텍스트 줄바꿈 방지 */
}

.edit-item .edit-del-btn {
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
}

.edit-item .edit-del-btn:hover {
  background: rgba(255, 74, 112, 0.1);
}

/* [우측 영역 메인 컨테이너] */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  min-width: 0;
}

/* [우측 상단 행] */
.main-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  flex: 0 0 auto;
  align-items: stretch;
  position: relative;
}

/* [우측 메모장] */
.memo-v6 {
  position: fixed;
  top: 160px;
  right: 40px;
  width: 400px;
  height: 320px;
  min-width: 260px;
  min-height: 200px;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1000;
  resize: both;
  overflow: hidden;
  box-shadow: none;
  transition: border-color 0.2s;
}

/* 메모장 헤더 */
.memo-v6 .memo-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  cursor: move;
}

.memo-v6 .memo-header h3 {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  user-select: none;
}

.memo-v6 .memo-body {
  flex: 1;
  padding: 12px;
  min-height: 0;
}

.memo-v6 textarea {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  line-height: 1.5;
  padding: 12px;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.memo-v6 textarea:focus {
  border-color: rgba(127, 174, 255, 0.4);
}

/* 👉 메모장 textarea 전용 모던/투명 커스텀 스크롤바 */
.memo-v6 textarea::-webkit-scrollbar {
  width: 8px;
  /* 스크롤바 너비를 8px로 늘려 가독성 증가 */
}

.memo-v6 textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  /* 트랙에 어두운 배경을 깔아 명도비 확보 */
  border-radius: 4px;
}

.memo-v6 textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  /* 투명도를 0.3으로 상향하여 가독성 강화 */
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: background 0.2s;
}

.memo-v6 textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* =========================================================
   [2] 커맨드 영역
   ========================================================= */
.controls-v6 {
  background: rgba(20, 23, 30, 0.4);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  position: relative;
  z-index: 8000;
  overflow: visible !important;
}

.controls-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
}

/* 🌟 [피드백 반영] 완벽한 정중앙 배치를 위한 좌우 대칭 Flex 3분할 레이아웃 */
.controls-left {
  flex: 1;
  /* 좌측 영역이 남는 공간을 균등 분배받아 왼쪽으로 정렬 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.controls-center {
  flex: 0 0 auto;
  /* 중앙 영역은 자기 크기를 유지하며 정중앙에 위치 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.controls-right {
  flex: 1;
  /* 우측 영역이 남는 공간을 균등 분배받아 오른쪽으로 정렬 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  position: relative;

}

/* 우측 버튼들이 찌그러져 사라지거나 다른 스타일(fixed/absolute)에 의해 이탈하는 현상 방지 */
.shuffle-trigger-btn,
.system-config-trigger {
  flex-shrink: 0 !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  display: flex !important;
}

/* 상태 박스 */
.status-box {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  height: 44px;
  border-radius: var(--btn-radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--stroke);
  font-size: 16px;
  font-weight: 800;
}

.status-badge {
  background: rgba(127, 174, 255, 0.15);
  color: var(--link);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 15px;
}

/* 결정/리셋 등 기본 버튼 */
.skewed {
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  padding: 0 24px;
  height: 44px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.skewed:hover {
  background: #1e2332;
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

#resetBtn {
  background: rgba(255, 74, 112, 0.1);
  border-color: rgba(255, 74, 112, 0.2);
  color: var(--danger);
}

#resetBtn:hover {
  background: rgba(255, 74, 112, 0.2);
}

#decideBtn {
  background: rgba(44, 199, 129, 0.15);
  border-color: rgba(44, 199, 129, 0.3);
  color: var(--success);
}

#decideBtn:hover {
  background: rgba(44, 199, 129, 0.25);
}

/* 검색바 */
.search-wrap {
  position: relative;
  width: 300px;
  /* 🌟 [피드백 반영] 240px -> 180px 콤팩트 축소로 공간 확보 */
}

.search-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 16px;
  outline: none;
}

.dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 100;
  background: #161a25;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  display: none;
  max-height: 250px;
  overflow-y: auto;
}

.dropdown.show {
  display: block;
}

.opt {
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.opt:hover {
  background: rgba(255, 255, 255, 0.05);
}

.opt.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* 정역 토글 스위치 */
.flip {
  position: relative;
  width: 130px;
  /* 🌟 [피드백 반영] 170px -> 130px 콤팩트 축소로 공간 확보 */
  height: 44px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  user-select: none;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}

.flip input {
  display: none;
}

.flip .track {
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
}

.flip .seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  z-index: 1;
}

.flip .thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 6px;
  background: rgba(44, 199, 129, 0.2);
  border: 1px solid rgba(44, 199, 129, 0.4);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.2s ease, background-color 0.2s;
  z-index: 2;
}

.flip input:checked~.thumb {
  left: calc(50% + 0px);
  background: rgba(255, 74, 112, 0.2);
  border-color: rgba(255, 74, 112, 0.4);
  color: var(--danger);
}

/* ---------------------------------------------------------
   스트리머 캠 영역
   --------------------------------------------------------- */
.streamer-cam-zone {
  flex: 0 0 190px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  width: 100%;
}

.cam-placeholder {
  width: 320px;
  height: 180px;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
}

/* =========================================================
   [3] 3D 테이블 씬
   ========================================================= */

.table-3d-scene {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10;
  width: 100%;
  padding-bottom: 10px;
  perspective: 1200px;

  /* 🌟 [배경 이미지 세팅] 나중에 배경 원목 이미지를 준비하시면 아래 주석을 푸세요. */
  /* background-image: url('./assets/img/background_wood.webp'); */
  /* background-size: cover; */
  /* background-position: center; */
  /* background-repeat: no-repeat; */

  /* 이미지 없을 때의 고급스러운 원목 느낌 어두운 그라데이션 기본값 */
  background: radial-gradient(circle at center, #181411 0%, #080605 100%);
}

.table-3d-surface {
  width: 90%;
  height: 350px;
  border: 1px solid var(--table-border);
  border-radius: 24px 24px 40px 40px;
  position: relative;
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.95),
    0 35px 80px rgba(0, 0, 0, 0.85);
  transition: transform 0.5s ease;
  transform: rotateX(55deg) translateZ(0);
  transform-style: preserve-3d;

  /* 🌟 [테이블 판 매트 이미지 세팅] 나중에 매트 이미지를 준비하시면 아래 주석을 푸세요. */
  /* background-image: url('./assets/img/table_mat.webp'); */
  /* background-size: cover; */
  /* background-position: center; */
  /* background-repeat: no-repeat; */

  /* 이미지 없을 때 뒤의 배경이 은은하게 비치는 고급 반투명 벨벳 효과 */
  background: var(--table-bg, rgba(20, 16, 28, 0.45));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 테이블 두께감 */
.table-3d-surface::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 26px 26px 42px 42px;
  border-bottom: 10px solid var(--table-rim);
  transform: translateZ(-10px);
  pointer-events: none;
}

/* 3D 카드 배치 보드 */
.board-3d {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--card-gap);
  padding: 20px;
  transform-style: preserve-3d;
}

/* 개별 카드 슬롯/아이템 */
.cardItem {
  width: var(--card-w);
  height: var(--card-h);
  transform-style: preserve-3d;
  perspective: 800px;
  transition: width 0.3s ease, height 0.3s ease;
}

/* 카드 박스 내부 구조 (3D 눕힘을 전담하도록 수정) */
.cardBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transform-style: preserve-3d;
  position: relative;
  transform: rotateX(-15deg);
  transform-origin: bottom center;
}

/* 카드 자체 */
.card {
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02) center/cover no-repeat;
  position: relative;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.65);
}

/* 카드 이미지 스택 */
.card.img-stack {
  border: none;
  background: transparent;
  overflow: hidden;
}

.card.img-stack .card-layer,
.card.img-stack .frame-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 12px;
}

.card.img-stack .frame-layer {
  z-index: 2;
  object-fit: fill;
}

.card.img-stack .card-layer {
  z-index: 1;
  background: #0c0f14;
}

/* 역방향 카드 */
.card.rev {
  transform: rotate(180deg);
  transform-origin: center center;
}

/* 텍스트 캡션 영역 */
.cap-row {
  display: none !important;
  /* 3d 카드에는 카드 이름이 표기되지 않도록 숨김 */
}

/* 카드 이름 텍스트 */
.cap {
  font-weight: 800;
  font-size: 16px;
  color: #cdd5e3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  user-select: none;
}

/* =========================================================
   👉 [사용자 튜닝 포인트] 카드 롱클릭 진동(지진) 연출 조절 위치
   - 진동 크기를 3분의 1로 대폭 축소하여 미세하고 고급스러운 부르르 진동으로 수정 완료
   ========================================================= */
@keyframes shake-card {
  0% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, 0.4px) rotate(0.1deg);
  }

  10% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, -0.6px) rotate(-0.1deg);
  }

  20% {
    transform: translateY(-80px) scale(1.7) translate(-0.8px, 0.2px) rotate(0.15deg);
  }

  30% {
    transform: translateY(-80px) scale(1.7) translate(0.2px, 0.6px) rotate(-0.05deg);
  }

  40% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, -0.4px) rotate(0.1deg);
  }

  50% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, 0.6px) rotate(-0.1deg);
  }

  60% {
    transform: translateY(-80px) scale(1.7) translate(-0.8px, 0.4px) rotate(0.05deg);
  }

  70% {
    transform: translateY(-80px) scale(1.7) translate(0.6px, 0.4px) rotate(-0.1deg);
  }

  80% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, -0.4px) rotate(0.1deg);
  }

  90% {
    transform: translateY(-80px) scale(1.7) translate(0.6px, 0.6px) rotate(-0.05deg);
  }

  100% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, -0.6px) rotate(0.1deg);
  }
}

@keyframes shake-card-rev {
  0% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, 0.4px) rotate(180.1deg);
  }

  10% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, -0.6px) rotate(179.9deg);
  }

  20% {
    transform: translateY(-80px) scale(1.7) translate(-0.8px, 0.2px) rotate(180.15deg);
  }

  30% {
    transform: translateY(-80px) scale(1.7) translate(0.2px, 0.6px) rotate(179.95deg);
  }

  40% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, -0.4px) rotate(180.1deg);
  }

  50% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, 0.6px) rotate(179.9deg);
  }

  60% {
    transform: translateY(-80px) scale(1.7) translate(-0.8px, 0.4px) rotate(180.05deg);
  }

  70% {
    transform: translateY(-80px) scale(1.7) translate(0.6px, 0.4px) rotate(179.9deg);
  }

  80% {
    transform: translateY(-80px) scale(1.7) translate(-0.4px, -0.4px) rotate(180.1deg);
  }

  90% {
    transform: translateY(-80px) scale(1.7) translate(0.6px, 0.6px) rotate(179.95deg);
  }

  100% {
    transform: translateY(-80px) scale(1.7) translate(0.4px, -0.6px) rotate(180.1deg);
  }
}

/* 지진 모션 장착 상태 */
.floating-view-card.pressing {
  animation: shake-card 0.15s infinite linear;
  opacity: 1;
}

.floating-view-card.pressing.rev {
  animation: shake-card-rev 0.15s infinite linear;
  opacity: 1;
}

/* ---------------------------------------------------------
   [마이크로 애니메이션] 3D 공간 호버 효과
   --------------------------------------------------------- */
.cardItem:not(.placeholder):hover .cap-row {
  transform: translateZ(35px);
}

/* =========================================================
   👉 [NEW] 3D 왜곡을 완전히 배제한 2D 플로팅 카드 뷰어 레이어 (호버 트리거 전용)
   ========================================================= */
.active-card-viewer-layer {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 350px;
  height: 500px;
  z-index: 95;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none !important;
}

.active-card-viewer-layer.show {
  opacity: 1;
  visibility: visible;
}

.active-card-viewer-layer * {
  pointer-events: none !important;
}

/* 
   👉 [사용자 튜닝 포인트] 카드 확대 시 본래 크기 설정 위치 (좌측 상단 고정)
*/
.floating-view-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: flat;
  z-index: 10;
  pointer-events: none;
}

.floating-view-card .card-img,
.floating-view-card .frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.floating-view-card .card-img {
  object-fit: cover;
  background: transparent;
}

.floating-view-card .frame-img {
  object-fit: fill;
}

/* 정역방향 매핑 */
.floating-view-card.rev {
  transform: rotate(180deg);
}

/* 마우스 호버 시 줌 상태 (기존 scale 확대 배제, 은은한 고정 이미지 표시) */
.floating-view-card.zoomed {
  transform: scale(1) rotate(0deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.floating-view-card.zoomed.rev {
  transform: scale(1) rotate(180deg);
}

/* 
   👉 2D 확대 카드 전용 캡션 텍스트 (이름 표기)
*/
.floating-view-cap {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.floating-view-card.rev .floating-view-cap {
  bottom: auto;
  top: -32px;
  transform: translateX(-50%) rotate(180deg);
}

/* =========================================================
   👉 [피드백 반영] 롱클릭 삭제 프로그레스 서클링 (SVG 링 게이지)
   ========================================================= */
.delete-ring-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

/* 꾹 누를 때 링 게이지가 스르륵 드러남 (3D 카드에 pressing 클래스가 들어갔을 때) */
.cardItem.pressing .delete-ring-wrap {
  opacity: 1;
  visibility: visible;
}

.delete-ring-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
}

.ring-bg {
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 7px;
  fill: rgba(0, 0, 0, 0.25);
}

.ring-fill {
  stroke: var(--danger);
  stroke-width: 7px;
  fill: none;
  stroke-linecap: round;

  /* 반지름 r=30이므로 둘레 C = 2 * pi * 30 = 188.4 */
  stroke-dasharray: 188.4;
  stroke-dashoffset: 188.4;

  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* 역방향 카드일 경우 서클링 내부 요소들 역회전 상쇄 */
.card.rev .delete-ring-wrap {
  transform: translate(-50%, -50%) rotate(180deg);
}

/* =========================================================
   👉 [피드백 반영] 3D 테이블 중앙 붉은색 토스트 메시지 스타일
   - 3D 공간 상에서 테이블 위에 입체적으로 둥둥 뜨는 프리미엄 경고창
   ========================================================= */
.table-toast-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  /* translateZ를 활용해 눕혀진 3D 카드층 위로 입체적으로 플로팅시킵니다. */
  transform: translate(-50%, -50%) translateZ(120px);
  background: rgba(255, 74, 112, 0.96);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  padding: 16px 32px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 900;
  box-shadow:
    0 15px 35px rgba(255, 74, 112, 0.55),
    0 0 1px rgba(255, 255, 255, 0.5) inset;
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: -0.01em;

  /* 등장 및 전환 애니메이션 */
  animation: toast-in 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.table-toast-msg.fade-out {
  opacity: 0;
  transform: translate(-50%, -75%) translateZ(120px) scale(0.92);
  /* 위로 상승하며 작아지는 모션 */
}

@keyframes toast-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -25%) translateZ(120px) scale(0.88);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(120px) scale(1);
  }
}

/* =========================================================
   👉 [피드백 반영] bg.png를 대기열 배경으로 배치 (가로세로중앙, 50% 투명도)
   ========================================================= */
.queue-box-v6::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('./assets/img/bg.png') no-repeat center center;
  background-size: contain;
  opacity: 0.1;
  /* 50% 투명도 */
  z-index: -1;
  /* 대기열 테이블 뒤쪽에 배치 */
  pointer-events: none;
}

/* =========================================================
   👉 [피드백 반영] 우측 상단 단일 시스템 설정 버튼 및 통합 팝업
   ========================================================= */
.system-config-trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.system-config-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: scale(1.05);
}

.system-config-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #13161f;
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 14px;
  display: none;
  /* JS 토글 */
  flex-direction: column;
  gap: 12px;
  z-index: 9005;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.system-config-popup.show {
  display: flex;
}

.system-config-popup .popup-header {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
  padding-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =========================================================
   👉 [피드백 반영] 팝업 내부 그리드 및 아코디언 스타일
   ========================================================= */
.popup-grid-v6 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.popup-row-full {
  width: 100%;
}

.popup-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.popup-divider {
  height: 1px;
  background: var(--stroke);
  margin: 4px 0;
}

.popup-action-btn-v6 {
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 700;
}

.popup-action-btn-v6:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Weflab Accordion */
.soop-accordion-section {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 10px;
  margin-top: 2px;
  display: none;
  flex-direction: column;
  gap: 8px;
}

.soop-accordion-section.show {
  display: flex;
}

.accordion-header {
  font-size: 11px;
  font-weight: bold;
  color: #cfe2ff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weflab-connection-header {
  gap: 8px;
}

.weflab-connection-header>span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.weflab-url-input {
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  background: #0c0f14;
  border: 1px solid var(--stroke);
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  padding: 5px 7px;
  outline: none;
}

.weflab-url-input:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.12);
}

#soopConfirmBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.manual-close-toggle {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.manual-close-toggle strong {
  margin-left: auto;
  color: var(--muted);
}

.manual-close-toggle .material-symbols-outlined {
  font-size: 25px;
}

.manual-close-toggle.is-closed {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.1);
}

.manual-close-toggle.is-closed strong,
.manual-close-toggle.is-closed .material-symbols-outlined {
  color: var(--danger);
}

.accordion-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.config-row-v6 {
  display: flex;
  align-items: center;
  gap: 4px;
  /* 텍스트필드와 '개' 사이의 간격을 조밀하게 밀착 */
  padding: 0 32px;
  /* 좌우 여백을 주어 양끝 치우침을 막고 중앙부 영역으로 모음 */
}

.config-row-v6 label {
  font-size: 12px;
  color: var(--muted);
  font-weight: bold;
  width: 50px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-right: auto;
  /* label을 왼쪽 끝으로 밀어내어 정렬 대칭 확보 */
}

.config-row-v6 span {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

.mini-number-input {
  flex: 1;
  background: #0c0f14;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  text-align: right;
  outline: none;
  max-width: 60px;
}

/* 설정 미니 숫자 입력 필드 스피너(업다운 화살표) 제거 */
.mini-number-input::-webkit-outer-spin-button,
.mini-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mini-number-input[type=number] {
  -moz-appearance: textfield;
}

.accordion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
  margin-top: 2px;
}

.status-icon-text {
  font-size: 12px;
  font-weight: bold;
}

.text-success {
  color: var(--success) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.system-config-popup .popup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 팝업 내부 개별 액션 버튼 */
.popup-action-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 10px 6px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  width: 100%;
}

.popup-action-btn:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.popup-action-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.popup-action-btn span.material-symbols-outlined {
  font-size: 20px;
  color: var(--link);
}

.popup-action-btn .btn-label {
  font-size: 11px;
  font-weight: 700;
}

/* 상태 표시 미니 도트 */
.popup-action-btn .status-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}

.popup-action-btn .status-dot.active {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

/* =========================================================
   👉 [피드백 반영] 섞을 때 사용 버튼 (설정 기어 좌측 배치)
   ========================================================= */
.shuffle-trigger-btn {
  height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  /* 알약 형태 */
  background: rgba(255, 74, 112, 0.1);
  /* 카드 섞기에 어울리는 붉은빛 투명 */
  border: 1px solid rgba(255, 74, 112, 0.25);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 74, 112, 0.15);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.shuffle-trigger-btn:hover {
  background: rgba(255, 74, 112, 0.18);
  border-color: rgba(255, 74, 112, 0.4);
  transform: scale(1.03);
}

.shuffle-trigger-btn span.material-symbols-outlined {
  font-size: 20px;
}

.shuffle-trigger-btn .btn-label {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* =========================================================
   👉 [피드백 반영] 시청자 매칭용 게스트 목록 UI 복원
   ========================================================= */
.guest-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  color: #fff;
  padding: 6px;
}

.guest-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 4px;
}

.guest-label {
  font-weight: 800;
  font-size: 18px;
  color: #cfe2ff;
}

.guest-name-input {
  flex: 1;
  background: #0c0f14;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 6px 10px;
  color: #fff;
  font-size: 16px;
  outline: none;
}

.guest-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}

.guest-list::-webkit-scrollbar {
  display: none;
}

.guest-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.guest-input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.guest-row-top {
  display: flex;
  gap: 4px;
}

.guest-row-top .guest-cell {
  flex: 1;
}

.guest-cell {
  background: #0c0f14;
  border: 1px solid var(--stroke);
  border-radius: 4px;
  padding: 6px 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
  min-width: 0;
  width: 100%;
}

textarea.guest-cell {
  flex: none;
  resize: vertical;
  min-height: 60px;
  height: 60px;
  font-family: inherit;
  font-size: 14px;
  overflow: hidden;
}

.guest-del-btn {
  flex: 0 0 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.guest-list .guest-row:first-child .guest-del-btn,
.guest-list .guest-row:nth-child(n+4) .guest-del-btn {
  visibility: visible;
  pointer-events: auto;
}

.guest-del-btn:hover {
  color: var(--danger);
  background: rgba(255, 55, 95, 0.1);
}

.guest-del-btn .material-symbols-outlined {
  font-size: 20px;
}

body.guest-sync-active .remove {
  display: none !important;
}

.guest-footer {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.guest-add-btn {
  width: 100%;
  padding: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed var(--stroke);
  border-radius: 8px;
  color: #e3e3e3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.guest-add-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.guest-add-btn .material-symbols-outlined {
  font-size: 32px;
}

/* =========================================================
   👉 [피드백 반영] 모드 변경 시 현재: 영역과 타이틀 토글 제어
   ========================================================= */
:root {
  --content-guest-profile-image-size: 32px;

  /* 🌟 [피드백 반영] 카운트다운 모달 전용 CSS 변수 복원 */
  --notice-action-font-size: 80px;
  --countdown-close-msg-gap: 100px;
  --countdown-flash-duration: 3s;
}

.status-box .title-wrapper {
  display: none !important;
}

.status-box.show-title #statusNormal {
  display: none !important;
}

.status-box.show-title .title-wrapper {
  display: flex !important;
}

/* =========================================================
   👉 [피드백 반영] 공지 모달 및 카운트다운 관련 스타일 복원
   ========================================================= */
/* [Notice Button Style] */
.mode-notice-icon {
  transition-delay: 0.15s;
}

/* [Notice Modal] */
#noticeModal {
  width: var(--notice-modal-width, 700px);
  height: var(--notice-modal-height, 660px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  gap: var(--notice-gap, 30px);
  overflow-y: auto;
}

.notice-title {
  font-size: var(--notice-main-font-size, 40px);
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.notice-content {
  font-size: var(--notice-content-font-size, 18px);
  text-align: left;
  color: #e3e3e3;
  width: 100%;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: var(--notice-content-gap, 40px);
}

.notice-highlight-blue {
  font-size: calc(var(--notice-content-font-size, 18px) * 1.5);
  font-weight: bold;
  color: var(--notice-daniyan-color, #cfe2ff);
}

.notice-highlight-bold {
  font-size: calc(var(--notice-content-font-size, 18px) * 1.5);
  font-weight: bold;
}

.notice-highlight-bold2 {
  font-size: calc(var(--notice-content-font-size, 18px) * 1.1);
  font-weight: bold;
}

.notice-highlight-red {
  font-size: calc(var(--notice-content-font-size, 18px) * 1.5);
  font-weight: bold;
  color: var(--danger, #ff3b30);
}

.notice-big-text {
  font-size: calc(var(--notice-content-font-size, 18px) * 1.5);
}

.notice-action-btn {
  background-color: var(--btn-default-bg, rgba(255, 255, 255, 0.05));
  color: var(--danger, #ff3b30) !important;
  border: 1px solid var(--btn-default-border, rgba(255, 255, 255, 0.15));
  border-radius: var(--btn-default-radius, 12px);
  padding: var(--notice-action-btn-padding, 10px 24px);
  height: var(--notice-action-btn-height, 50px);
  font-weight: var(--btn-default-font-weight, bold);
  font-size: var(--notice-action-btn-font-size, 20px);
  margin-top: var(--notice-action-gap, 80px);
  cursor: pointer;
  transition: background 0.2s;
}

.notice-action-btn:hover {
  background-color: rgba(255, 55, 95, 0.1);
}

/* [Countdown Overlay] */
#countdownOverlay {
  background: rgba(0, 0, 0, 0.9);
  z-index: 10005;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#countdownText {
  font-size: var(--notice-action-font-size, 80px);
  font-weight: 900;
  color: #fff;
  text-align: center;
}

/* Circle Animation */
.countdown-circle {
  width: 150px;
  height: 150px;
  border: 10px solid #fff;
  border-top: 10px solid var(--danger, #ff3b30);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 30px;
  display: none;
}

.countdown-circle.active {
  display: block;
}

/* =========================================================
   👉 [피드백 반영] 대기열 헤더 붉은 공지 알림 아이콘 제어
   ========================================================= */
#queueNoticeBtn {
  display: none !important;
  background: rgba(255, 59, 48, 0.08);
  border: 1px solid rgba(255, 59, 48, 0.25);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

#queueNoticeBtn:hover {
  background: rgba(255, 59, 48, 0.2);
  border-color: rgba(255, 59, 48, 0.4);
}

/* 시청자 모드 활성화 시 대기열 알림 아이콘 노출 */
body.viewer-mode-active #queueNoticeBtn {
  display: inline-flex !important;
}

/* 붉은 알림 버튼 미세 애니메이션 (Blink 효과) */
#queueNoticeBtn span {
  animation: notice-pulse 2s infinite;
}

@keyframes notice-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   👉 [피드백 반영] 베일 오버레이(.veil) 및 모달(.modal) 레이아웃 복원
   ========================================================= */
.veil {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.66);
}

.veil.hide {
  display: none !important;
}

.modal {
  width: 1100px;
  padding: 40px 24px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: #0c0f14;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* 🌟 [피드백 반영] 서클링 회전 애니메이션 복원 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   👉 [피드백 반영] 대기열 신규 유입 행 반짝임(Flash) 효과
   ========================================================= */
@keyframes row-flash {
  0% {
    background-color: rgba(127, 174, 255, 0.35);
    /* 연한 푸른색 광채 */
  }

  100% {
    background-color: transparent;
  }
}

.row-flash-effect {
  animation: row-flash 2s ease-out;
}

/* =========================================================
   👉 [피드백 반영] 카드 섞기(셔플) 연출용 CSS 스타일 복원
   ========================================================= */
#shuffleOverlay {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  cursor: pointer;
  background: transparent !important;
  backdrop-filter: none !important;
  width: auto;
  height: auto;
}

#shuffleOverlay.hide {
  display: none !important;
}

.shuffle-modal {
  background: rgba(12, 15, 20, 0.85);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.shuffle-content-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.shuffle-text-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

#shuffleVideo {
  width: 250px;
  height: 250px;
  object-fit: contain;
  display: block;
  border-radius: 8px;
}

#shuffleText {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

.wavy-char {
  position: relative;
  display: inline-block;
  color: var(--shuffle-text-color, #ff4a70);
  font-size: 24px !important;
  font-weight: 900;
  text-transform: uppercase;
  animation: animateWave var(--shuffle-wave-speed, 1.2s) ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
  white-space: pre;
}

.shuffle-sub-text-box {
  background-color: rgba(255, 255, 255, 0.02);
  color: var(--shuffle-sub-box-text-color, #e3e3e3);
  font-size: 17px !important;
  padding: 12px 16px;
  border-radius: 10px;
  width: 100%;
  height: 140px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  overflow: hidden;
  box-sizing: border-box;
}

.sub-box-title {
  font-weight: 800;
  font-size: 20px !important;
  opacity: 0.9;
  line-height: 1;
  display: flex;
  align-items: center;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.sub-box-inside {
  font-weight: 400;
  opacity: 0.7;
  white-space: pre-wrap;
  width: 100% !important;
  word-break: keep-all;
  word-wrap: break-word;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

@keyframes animateWave {

  0%,
  100% {
    transform: translateY(0px);
  }

  20% {
    transform: translateY(var(--shuffle-wave-height, -15px));
  }
}

/* =========================================================
   👉 [피드백 반영] 대기열 마감 배지 및 상태 배지 스타일 복원
   ========================================================= */
.badge-closed {
  display: inline-block;
  padding: 4px 8px;
  background: var(--danger, #ff4a70);
  color: #fff;
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: 800;
  line-height: 1;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .08);
  color: #e5ecff;
  font-weight: 700;
  font-size: inherit;
  line-height: 1.4;
  vertical-align: middle;
}

/* =========================================================
   👉 [피드백 반영] 대기열 슬롯 편집 우측 패널 및 드래그 디자인 복원
   ========================================================= */
.queue-slot-panel {
  position: absolute !important;
  top: 0 !important;
  right: calc(-25em - 12px) !important;
  width: 25em !important;
  height: 100% !important;
  font-size: var(--queue-font-base, 15px);
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  display: none;
  flex-direction: column;
  z-index: 12100 !important;
  /* 딤 오버레이 및 다른 팝업보다 확실히 높게 상향 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.queue-slot-panel.show {
  display: flex !important;
}

.qs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px 14px 0 0;
}

.qs-title {
  font-size: var(--queue-title-font-size, 20px);
  font-weight: 800;
  color: #fff;
}

.qs-reflect-btn {
  background: var(--btn-decide-bg, #7faeff);
  color: #12151d;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 4px 16px;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
}

.qs-reflect-btn:hover {
  filter: brightness(1.1);
}

.qs-cancel-btn {
  background: rgba(255, 255, 255, 0.05);
  color: #e3e3e3;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 4px 16px;
  font-size: 0.9em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.qs-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 제거 버튼 (리스트 내부) */
.slot-del-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}

.slot-del-btn:hover {
  color: var(--danger);
  background: rgba(255, 55, 95, 0.1);
}

.slot-del-btn .material-symbols-outlined {
  font-size: 18px;
}

.qs-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* 열 머리글 스타일 */
.slot-header {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 2px solid var(--stroke);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.85em;
  font-weight: bold;
  color: #cfe2ff;
  user-select: none;
}

/* 드래그 가능한 리스트 스타일 */
.slot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slot-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: grab;
  font-size: 0.9em;
  color: #e3e3e3;
  user-select: none;
  transition: background 0.2s;
}

.slot-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.slot-item.dragging {
  opacity: 0.4;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed var(--link);
  transform: scale(0.98);
  cursor: grabbing !important;
}

.slot-item.over {
  border-top: 2px solid var(--link);
  background: rgba(156, 193, 255, 0.15);
}

.slot-item * {
  pointer-events: none;
}

.slot-item:not(.dragging) * {
  pointer-events: auto;
}

.slot-item .slot-del-btn {
  pointer-events: auto;
}

.slot-rank {
  width: 45px;
  color: #ffd700;
  font-weight: bold;
  flex-shrink: 0;
}

.slot-nick {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.slot-count {
  width: 90px;
  text-align: center;
  color: var(--link);
  flex-shrink: 0;
  margin-right: 8px;
}

/* 🌟 [피드백 반영] 카드 배치 및 제거용 페이드 애니메이션 */
@keyframes cardFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cardFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.card-fade-in {
  animation: cardFadeIn 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.card-fade-out {
  animation: cardFadeOut 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards !important;
}

/* =========================================================
   🌟 [피드백 반영] 업데이트 내역 버튼 및 느낌표(!) 배지 스타일
   ========================================================= */
.update-log-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-border);
  color: #c9d1d9;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-weight: normal;
  position: relative;
  font-family: inherit;
}

.update-log-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--link);
  color: #fff;
}

/* 업데이트 내역 버튼: 새 업데이트가 있으면 버튼 자체가 붉게 점멸 */
.update-log-btn.has-update {
  animation: update-log-pulse 1.5s ease-in-out infinite;
}

@keyframes update-log-pulse {

  0%,
  100% {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 74, 112, 0.5);
    box-shadow: 0 0 0 0 rgba(255, 74, 112, 0.5);
  }

  50% {
    background: rgba(255, 74, 112, 0.28);
    border-color: var(--danger);
    box-shadow: 0 0 10px 2px rgba(255, 74, 112, 0.6);
  }
}

/* 기어 아이콘 설정 버튼: 새 업데이트가 있으면 버튼 자체가 붉게 점멸 */
.system-config-trigger.has-update {
  animation: gear-update-pulse 1.5s ease-in-out infinite;
}

@keyframes gear-update-pulse {

  0%,
  100% {
    background: var(--panel-bg);
    border-color: rgba(255, 74, 112, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 74, 112, 0.5);
  }

  50% {
    background: rgba(255, 74, 112, 0.28);
    border-color: var(--danger);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 14px 4px rgba(255, 74, 112, 0.6);
  }
}

/* 업데이트 내역 팝업 모던 커스텀 스크롤바 */
#updateLogModalBody::-webkit-scrollbar {
  width: 6px;
}

#updateLogModalBody::-webkit-scrollbar-track {
  background: transparent;
}

#updateLogModalBody::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

#updateLogModalBody::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* 1030모드 적용 시 입력 필드 영역 블러 및 비활성화 마스크 */
#soopCardInputsContainer.blurred {
  filter: blur(2.5px);
  opacity: 0.5;
  pointer-events: none;
}