/*
 *  File Name   : /assets/css/lobby.css
 *  Description : 로비 전용 스타일 — 3레이어 레이아웃 · HUD · 팝업 · 반응형
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  height: 100dvh;
  /* body 와 같은 배경 — html(100dvh)/body(100svh) 반올림 차로 생기는 하단 흰 선 방지 */
  background: #0d0d1a;
}

body {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  background: #0d0d1a;
  overflow: hidden;
}

/*
 * 3레이어 레이아웃 (겹침 없음):
 *   [1] .gnb           채널 고정 높이 (--sec-gnb-h)
 *   [2] #phaser-mount  게임 뷰 높이 (Phaser)
 *   [3] #lobby-hud     HUD 콘텐츠 높이만큼
 */
body.has-channel-gnb {
  display: grid;
  /* 실제 높이는 main.js syncChannelLayout() -> --mv-gnb-h */
  grid-template-rows: var(--mv-gnb-h, var(--sec-gnb-h, 68px)) minmax(0, 1fr);
  grid-template-areas:
    "gnb"
    "game";
  height: 100dvh;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

body.has-channel-gnb > .gnb {
  grid-area: gnb;
  /* static이면 z-index가 무시돼 캔버스가 헤더 위에 그려지지 않게 */
  position: relative !important;
  top: auto !important;
  z-index: 100;
  flex: none;
  width: 100%;
}

body.has-channel-gnb > #game-shell {
  grid-area: game;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: #0d0d1a;
  /* 혹시 겹쳐도 게임이 헤더를 덮지 않게 */
  pointer-events: auto;
}

#game-shell {
  /* grid 자식은 viewport 전체 높이 계산에 직접 쓰지 않음 */
  flex: none;
  min-height: 0;
}

#phaser-mount {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
}
/*
 * 연령 확인 전 정적 배경
 *
 * 통과 전에는 게임을 부팅하지 않아 이 영역이 비어 있음. 게이트 뒤가 빈 화면이면
 * 안내가 떠 있는 맥락이 사라지므로 로비를 미리 블러 처리한 한 장을 깔아 둠
 * **게임이 아니라 정적 이미지**임 — 움직임 · 상호작용 없음 (법무 요청 A-1)
 *
 * body.mv-age-pending 은 index.php 가 쿠키를 보고 서버에서 붙임.
 * 이미 동의한 재방문자는 클래스가 없어 이 배경이 아예 안 걸림 (깜빡임 방지)
 *
 * 파일을 교체할 때는 **파일명을 바꿀 것.** CSS background 는 PHP 를 거치지 않아
 * mv_image_url_versioned() 의 버전 쿼리가 안 붙음
 */
body.mv-age-pending #phaser-mount {
  background-image: url('../images/popup/age_gate/bg_map.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* '#phaser-mount > div' 규칙 제거됨 — dom.createContainer 를 안 써서 래퍼 div 가 없음 */
#phaser-mount canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
}

#mv-onboarding-nudge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* inset:0 이 면책 문구 띠까지 덮으므로 그 높이만큼 더 띄워야 HUD 를 안 가림 */
  padding: 0 28px calc(112px + var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* HUD(90) / BGM(98) 아래 — 조작 UI 를 가리지 않도록 */
  z-index: 85;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

#mv-onboarding-nudge.active {
  opacity: 1;
  visibility: visible;
}

.mv-onboarding-nudge__gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(220px, 38vh, 380px);
  background:
    linear-gradient(
      180deg,
      rgba(5, 12, 31, 0) 0%,
      rgba(5, 12, 31, 0.14) 18%,
      rgba(5, 12, 31, 0.46) 43%,
      rgba(5, 12, 31, 0.82) 72%,
      rgba(5, 12, 31, 0.98) 100%
    );
}

.mv-onboarding-nudge__text {
  position: relative;
  margin: 0;
  max-width: min(1240px, calc(100vw - 64px));
  font-family: Georgia, serif;
  font-size: clamp(28px, 3vw, 54px);
  font-weight: 700;
  line-height: 1.14;
  text-align: center;
  color: #f9f9f9;
  -webkit-text-stroke: 3px #171717;
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 #171717,
    0 0 10px rgba(23, 23, 23, 0.4);
  animation: mv-onboarding-nudge-pulse 1.5s ease-in-out infinite;
}

@keyframes mv-onboarding-nudge-pulse {
  0%,
  100% {
    color: #f9f9f9;
  }
  50% {
    color: #fed800;
  }
}

body.mv-modal-open #game-shell {
  pointer-events: none;
}

body.mv-modal-open #mock-overlay.active,
body.mv-modal-open #app-warning-dialog.active,
body.mv-modal-open #info-dialog.active,
body.mv-modal-open #legal-dialog.active,
body.mv-modal-open #age-gate-dialog.active,
body.mv-modal-open #age-blocked-dialog.active,
body.mv-modal-open #cookie-settings-dialog.active,
body.mv-modal-open #boutique-dialog.active,
body.mv-modal-open #map-dialog.active,
body.mv-modal-open #seat-dialog.active,
body.mv-modal-open #report-dialog.active {
  pointer-events: auto;
}
/* 공통 MOCKUP 팝업 레이어 */
#mock-overlay,
#app-warning-dialog,
#info-dialog,
#legal-dialog,
#cookie-settings-dialog,
#boutique-dialog,
#map-dialog,
#seat-dialog,
#report-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 18, 0.72);
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}
#mock-overlay { z-index: 200; }
#app-warning-dialog { z-index: 204; }
#info-dialog { z-index: 205; }
#legal-dialog { z-index: 205; }
#boutique-dialog,
#map-dialog,
#seat-dialog { z-index: 206; }
/*
 * 쿠키 설정 = 207. 다른 팝업(200~206) 위, 연령 게이트(210) 아래
 * 약관 팝업 위에서 열 수 있어야 하고, 연령 게이트는 어떤 경우에도 최상위여야 함
 */
#cookie-settings-dialog { z-index: 207; }

#mock-overlay.active,
#app-warning-dialog.active,
#info-dialog.active,
#legal-dialog.active,
#cookie-settings-dialog.active,
#boutique-dialog.active,
#map-dialog.active,
#seat-dialog.active {
  display: flex;
}

#mock-card,
.app-warning-dialog-box,
.info-dialog-box,
.legal-dialog-box,
.cookie-settings-box,
.boutique-dialog-box,
.map-dialog-box,
.seat-dialog-box {
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92) translateY(12px);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 180ms ease;
}

#mock-overlay.active #mock-card,
#app-warning-dialog.active .app-warning-dialog-box,
#info-dialog.active .info-dialog-box,
#legal-dialog.active .legal-dialog-box,
#cookie-settings-dialog.active .cookie-settings-box,
#boutique-dialog.active .boutique-dialog-box,
#map-dialog.active .map-dialog-box,
#seat-dialog.active .seat-dialog-box {
  pointer-events: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mv-popup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: #f6f6f6;
}

.mv-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.mv-popup-title {
  margin: 0;
  font-family: Georgia, serif;
  font-weight: 700;
  text-align: center;
  color: #f6f6f6;
  white-space: normal;
}

.mv-popup-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mv-popup-scroll-body {
  width: 100%;
  box-sizing: border-box;
}

.mv-popup-close {
  display: block;
  left: auto;
  position: absolute;
  z-index: 12;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto;
}

.mv-popup-image-button {
  border: 0;
  padding: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  pointer-events: auto;
}

.mv-popup-text-action {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
  color: #b6b6b6;
  cursor: pointer;
  pointer-events: auto;
}

.mv-popup-card--app-warning {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/app_install_warning/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/app_install_warning/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/app_install_warning/bg_bottom.png');
  width: min(340px, calc(100vw - 32px));
  min-height: 420px;
}

.mv-popup-close--app-warning {
  top: 18px;
  right: 18px;
  width: 20px;
  height: 21px;
  background-image: url('../images/popup/app_install_warning/button_close.png?v=2');
}

.mv-popup-content--app-warning {
  margin-top: 0;
  align-items: center;
  padding: 32px 14px 0;
  gap: 0;
}

.app-warning-icon-wrap {
  width: 97px;
  height: 100px;
  margin: 0 auto 15px;
}

.app-warning-icon {
  display: block;
  width: 97px;
  height: 100px;
  object-fit: contain;
}

.mv-popup-text-panel-wrap--app-warning {
  position: relative;
  width: min(300px, 100%);
}

.mv-popup-text-panel-wrap--app-warning::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 8px;
  background: url('../images/popup/comm_frame_shadow.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.mv-popup-text-panel--app-warning {
  min-height: 107px;
  padding: 10px 5px;
  align-items: center;
}

.mv-popup-title--app-warning {
  margin: 0;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.app-warning-body {
  margin: 10px 0 0;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: #fed800;
}

.mv-popup-actions--app-warning {
  gap: 10px;
  padding: 20px 15px 35px;
}

.mv-popup-image-button--app-warning {
  width: min(263px, 100%);
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/app_install_warning/button_cta.png?v=2');
}

.mv-popup-card--boutique {
  width: min(597px, calc(100vw - 32px), calc((100vh - 32px) * 597 / 681));
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

.mv-popup-close--boutique {
  top: clamp(6px, 1.2vw, 10px);
  right: clamp(6px, 1.2vw, 10px);
  width: clamp(28px, 6vw, 55px);
  height: clamp(28px, 6.1vw, 56px);
  background-image: url('../images/popup/boutique/button_close.png?v=2');
}

.mv-popup-content--boutique {
  margin-top: 0;
  gap: 0;
}

.boutique-dialog-image {
  display: block;
  width: 100%;
  max-width: 597px;
  max-height: min(681px, calc(100vh - 32px));
  height: auto;
}

.mv-popup-card--map {
  width: min(850px, calc(100vw - 32px), calc((100vh - 32px) * 850 / 596));
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

.mv-popup-close--map {
  top: clamp(5px, 1vh, 9px);
  right: clamp(5px, 1vw, 8px);
  width: clamp(28px, 6vw, 55px);
  height: clamp(29px, 6.2vw, 57px);
  background-image: url('../images/popup/map/button_close.png?v=2');
}

.mv-popup-content--map,
.map-dialog-image-wrap {
  width: min(850px, calc(100vw - 32px), calc((100vh - 32px) * 850 / 596));
  margin-top: 0;
  gap: 0;
  align-items: stretch;
}

.map-dialog-image {
  display: block;
  width: 100%;
  max-width: 850px;
  height: auto;
  max-height: calc(100vh - 32px);
  object-fit: contain;
}

.mv-popup-card--info,
.mv-popup-card--legal,
.mv-popup-card--age-gate,
.mv-popup-card--age-blocked,
.mv-popup-card--slot,
.mv-popup-card--reward-object,
.mv-popup-card--app-warning {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
}

.mv-popup-card--info > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--legal > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--age-gate > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--age-blocked > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--slot > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--reward-object > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--app-warning > :not(.mv-popup-frame-slices):not(.mv-popup-close),
.mv-popup-card--cookie-settings > :not(.mv-popup-frame-slices):not(.mv-popup-close) {
  position: relative;
  z-index: 1;
}
/*
 * **새 팝업 변형을 만들면 위 목록에 반드시 추가할 것.**
 * 빠뜨리면 프레임 이미지(.mv-popup-frame-slices, z-index:0)가 내용을 덮음 —
 * 프레임은 position:absolute 라 z-index 0 만으로도 static 인 내용보다 위에 그려짐
 * 팝업 틀은 보이는데 글자만 안 보이는 증상으로 나타남
 */

.mv-popup-frame-slices {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
  overflow: hidden;
}

.mv-popup-frame-slice {
  position: absolute;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.mv-popup-frame-slice--top {
  top: 0;
  height: var(--popup-frame-top-height);
  background-image: var(--popup-frame-top-image);
  background-size: 100% 100%;
}

.mv-popup-frame-slice--middle {
  top: var(--popup-frame-top-height);
  bottom: var(--popup-frame-bottom-height);
  background-image: var(--popup-frame-middle-image);
  background-size: 100% var(--popup-frame-middle-tile-height);
  background-repeat: repeat-y;
}

.mv-popup-frame-slice--bottom {
  bottom: 0;
  height: var(--popup-frame-bottom-height);
  background-image: var(--popup-frame-bottom-image);
  background-size: 100% 100%;
  background-position: center bottom;
}

.mv-popup-card--info {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/info_center/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/info_center/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/info_center/bg_bottom.png');
  width: min(474px, calc(100vw - 32px));
  min-height: 562px;
}

.mv-popup-close--info {
  top: 18px;
  right: 18px;
  width: 20px;
  height: 21px;
  background-image: url('../images/popup/info_center/button_close.png?v=2');
}

.mv-popup-content--info {
  padding: 36px 26px 0;
  margin-top: 0;
  gap: 0;
}

#info-dialog-title {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 20px;
}

.info-dialog-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-dialog-frame-stack {
  position: relative;
  width: min(420px, 100%);
  margin: 0 auto;
}

.info-dialog-frame-stack::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 8px;
  background: url('../images/popup/info_center/slide_frame_shadow.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.info-dialog-slide-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 420 / 240;
  overflow: hidden;
  border-radius: 5px;
  background: transparent;
  touch-action: pan-y;
}

.info-dialog-slide-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.info-dialog-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.info-dialog-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.info-dialog-slide-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.info-dialog-pagination {
  position: absolute;
  left: 50%;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
  transform: translateX(-50%);
  z-index: 3;
}

.info-dialog-dot {
  width: 12px;
  height: 12px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(246, 246, 246, 0.7);
  cursor: pointer;
}

.info-dialog-dot.is-active {
  background: rgba(255, 108, 0, 0.9);
}

.info-dialog-copy {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0 0;
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1.2;
  color: #fed800;
  text-align: center;
}

.info-dialog-nav {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent url('../images/popup/info_center/slide_arrow.png?v=2') center / 15px 24px no-repeat;
  cursor: pointer;
  z-index: 2;
  transform: translateY(-50%);
}

.info-dialog-nav--prev { left: 9px; }
.info-dialog-nav--next { right: 9px; transform: translateY(-50%) rotate(180deg); }
.info-dialog-nav:hover {
  background-image: url('../images/popup/info_center/slide_arrow_hover.png');
}

.info-dialog-nav[disabled] { opacity: 1; cursor: pointer; }

.mv-popup-actions--info {
  justify-content: center;
  padding: 20px 0 34px;
}

.mv-popup-image-button--info {
  width: min(263px, calc(100% - 54px));
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/info_center/button_cta-letsgo.png');
}

/* ── 약관 · 정책 팝업. 프레임 · 닫기 에셋은 정보센터 것을 재사용 ── */
.mv-popup-card--legal {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/info_center/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/info_center/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/info_center/bg_bottom.png');
  width: min(474px, calc(100vw - 32px));
  /* 패널 스크롤이 걸리려면 카드 높이가 확정돼야 함 — min-height 로는 안 됨 */
  height: min(562px, calc(100dvh - 32px));
}

.mv-popup-close--legal {
  top: 18px;
  right: 18px;
  width: 20px;
  height: 21px;
  background-image: url('../images/popup/info_center/button_close.png?v=2');
}

.mv-popup-content--legal {
  flex: 1 1 auto;
  min-height: 0;
  /* 위쪽은 닫기 버튼(top 18px)과 겹치지 않을 만큼 띄움 */
  padding: 50px 30px 40px;
  margin-top: 0;
  gap: 0;
}

/* 탭 바 감싸개 — 좌우 그림자를 스크롤과 무관하게 고정시키는 역할 */
.legal-tabs-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  /* 본문 판과 맞붙어야 하므로 여백 금지 */
  margin-bottom: 0;
}

/*
 * 탭이 더 있음을 알리는 그림자
 * 가로 스크롤바를 감춘 대신이라 이게 유일한 표시임. 켜고 끄는 것은 _syncTabEdges()
 */
.legal-tabs-wrap::before,
.legal-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 1px;
  z-index: 1;
  width: 56px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.legal-tabs-wrap::before {
  left: 0;
  border-radius: 10px 0 0 0;
  background: linear-gradient(to right,
    rgba(7, 4, 20, 0.98) 0%, rgba(7, 4, 20, 0.86) 42%, rgba(7, 4, 20, 0) 100%);
}

.legal-tabs-wrap::after {
  right: 0;
  border-radius: 0 10px 0 0;
  background: linear-gradient(to left,
    rgba(7, 4, 20, 0.98) 0%, rgba(7, 4, 20, 0.86) 42%, rgba(7, 4, 20, 0) 100%);
}

.legal-tabs-wrap.has-more-left::before,
.legal-tabs-wrap.has-more-right::after {
  opacity: 1;
}

/*
 * 탭 바 — 한 줄로 늘어놓고 넘치면 가로 스크롤
 * 접히지 않아야 하므로 nowrap + flex-shrink 0 이 짝임
 */
.legal-tabs {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-wrap: nowrap;
  gap: 2px;
  /* 본문 판과 이어지므로 위쪽만 둥글게 */
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* 본문 판과 같은 색 — 탭 바부터 본문까지 한 면으로 보이게 함 */
  background: rgba(0, 0, 0, 0.22);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
  /* 스크롤바는 감추고 위 그림자로 대신함 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.legal-tabs::-webkit-scrollbar {
  display: none;
}

.legal-tabs.is-dragging,
.legal-panel.is-dragging {
  cursor: grabbing;
}

.legal-tab {
  display: flex;
  /* 줄어들지 않아야 한 줄이 유지됨 */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border: 0;
  /* 아래는 본문과 이어지므로 각지게, 위는 탭 바 모서리와 같은 값 */
  border-radius: 10px 10px 0 0;
  /* 평소에는 탭 바 · 본문과 같은 면으로 보이게 두고, 활성일 때만 색을 넣음 */
  background: transparent;
  color: rgba(233, 227, 250, 0.58);
  font-family: Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.legal-tab:hover {
  color: rgba(233, 227, 250, 0.85);
}

/* 선택 표시 — 색면 하나로만. 테두리 금지(프레임 · 구분선과 선이 겹쳐 지저분해짐) */
.legal-tab.is-active,
.legal-tab.is-active:hover {
  background: rgba(0, 0, 0, 0.34);
  color: #fff6e2;
}

/* 본문 영역 — 탭 바와 이어지므로 아래쪽만 둥글게 */
.legal-panels {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background: rgba(0, 0, 0, 0.22);
}

/* 탭마다 본문이 길어 패널 단위로 세로 스크롤 */
.legal-panel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 22px 18px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  text-align: left;
  font-family: var(--sec-gnb-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  font-size: 14px;
  line-height: 1.78;
  color: #e3ddf5;
  /* 끌어서 스크롤되는 영역임을 알림. 링크 위에서는 아래 규칙이 되돌림 */
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 128, 224, 0.34) transparent;
}

.legal-panel::-webkit-scrollbar {
  width: 4px;
}

.legal-panel::-webkit-scrollbar-track {
  background: transparent;
}

.legal-panel::-webkit-scrollbar-thumb {
  background: rgba(150, 128, 224, 0.34);
  border-radius: 3px;
}

.legal-panel[hidden] { display: none; }
.legal-panel p { margin: 0 0 17px; }
.legal-panel strong { color: #fff6e0; font-weight: 500; }

/* 문서 제목 — 가운데 정렬, 본문과 서체를 구분 */
.legal-doc-title {
  margin: 0 0 9px;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-align: center;
  color: #fdfbff;
}

/* 제목 바로 아래 설명 줄 */
.legal-doc-meta {
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11.5px;
  line-height: 1.6;
  text-align: center;
  color: rgba(227, 221, 245, 0.5);
}

/*
 * 설명 줄이 없는 문서(RESPONSIBLE GAMEPLAY)는 제목이 본문에 바로 붙음
 * 그 경우에만 여기서 간격과 구분선을 냄
 */
.legal-doc-title + *:not(.legal-doc-meta) {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* 전문 고지 — 원문이 전부 대문자라 자간을 넓혀 읽히게 함 */
.legal-notice {
  margin: 0 0 17px;
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: rgba(227, 221, 245, 0.78);
}

/*
 * 절 제목은 본문 서체로 감 — 작은 크기에서 세리프가 어두운 배경에 뭉개짐
 * 문서 제목(.legal-doc-title)만 Georgia 로 남겨 팝업 인상을 유지
 */
/*
 * Inter 는 300 / 400 / 500 만 로드됨 (channel_common/gnb-head.php)
 * 700 을 쓰면 브라우저가 가짜 볼드를 만들어 작은 글자가 뭉개짐 — 500 이 상한임
 */
.legal-h {
  margin: 32px 0 11px;
  font-family: var(--sec-gnb-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.2px;
  color: #ffd977;
}

.legal-h--sub {
  margin-top: 22px;
  font-size: 13.5px;
  color: #c9b6ff;
}

.legal-list {
  margin: 0 0 17px;
  padding: 0;
  list-style: none;
}

/* 원문이 • 로 붙어 있던 자리 — 마커를 CSS 로 대신 냄 */
.legal-list li {
  position: relative;
  margin: 0 0 11px;
  padding-left: 17px;
}

.legal-list li::before {
  content: '\2022';
  position: absolute;
  left: 2px;
  color: rgba(255, 201, 74, 0.7);
}

.legal-panel .link,
.legal-panel .mail {
  color: #8fd0ff;
  cursor: pointer;
  text-decoration: underline;
  /* 긴 URL 이 그대로 들어가 있어 안 끊으면 가로로 넘침 */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.legal-panel .link:hover,
.legal-panel .mail:hover {
  color: #b9e2ff;
}

.legal-doc-footer {
  margin: 32px 0 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(227, 221, 245, 0.45);
}

.legal-doc-copy {
  display: block;
}

/* ── 연령 확인 게이트 (동의 / 차단) ───────────────────────────────── */

/*
 * 다른 팝업과 셋이 다름
 *   1. 딤 대신 블러. 뒤가 살짝만 비쳐 궁금증만 남김
 *   2. 헤더(.gnb)는 덮지 않음 — 유일한 이탈 경로라 가리면 안 됨
 *   3. 딤을 눌러도 안 닫힘 (AgeGate 가 닫기 핸들러를 안 붙임)
 *
 * 그래서 #mock-overlay 계열 공통 규칙에 넣지 않고 따로 정의함
 * z-index 는 다른 팝업(200~206)보다 위
 */
.mv-popup-overlay--gate {
  display: none;
  position: fixed;
  top: var(--mv-gnb-h, var(--sec-gnb-h, 68px));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 210;
  justify-content: center;
  /*
   * center 금지 — 카드가 화면보다 크면 위쪽이 잘려 스크롤로도 못 닿음
   * 대신 카드에 margin:auto 를 줘서 여유가 있을 때만 가운데로 감
   */
  align-items: flex-start;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* 세로 패닝을 명시. 안 주면 기기에 따라 터치 스크롤이 안 먹음 */
  touch-action: pan-y;
  background: rgba(8, 4, 24, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mv-popup-overlay--gate.active {
  display: flex;
}

.mv-popup-overlay--gate > .mv-popup-card {
  margin: auto;
  flex: 0 0 auto;
}

.mv-popup-card--age-gate {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/age_gate/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/age_gate/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/age_gate/bg_bottom.png');
  width: min(376px, calc(100vw - 32px));
  min-height: 517px;
}

/* 프레임은 동의 팝업 기준으로 제작됨. 차단 팝업도 같은 이미지를 씀 */
.mv-popup-card--age-blocked {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/age_gate/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/age_gate/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/age_gate/bg_bottom.png');
  width: min(376px, calc(100vw - 32px));
  min-height: 374px;
}

.mv-popup-close--age-gate {
  top: 20px;
  right: 20px;
  width: 19px;
  height: 19px;
  background-image: url('../images/popup/age_gate/button_close.png');
}

/* 차단 팝업은 좌상단 뒤로가기. 누르면 동의 팝업으로 되돌아감 */
.mv-popup-close--age-back {
  top: 20px;
  left: 20px;
  right: auto;
  width: 28px;
  height: 21px;
  background-image: url('../images/popup/age_gate/button_back.png');
}

.mv-popup-content--age-gate,
.mv-popup-content--age-blocked {
  padding: 34px 22px 0;
  margin-top: 0;
  gap: 0;
}

/* 동의 팝업은 설명 줄이 길어 좌우를 더 씀 */
.mv-popup-content--age-gate {
  padding-left: 15px;
  padding-right: 15px;
}

.age-gate-icon-wrap {
  width: 96px;
  height: 99px;
  margin: 0 auto 18px;
}

.age-gate-icon-wrap--blocked {
  width: 91px;
  height: 94px;
}

.age-gate-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.mv-popup-text-panel--age-gate {
  min-height: 100px;
  padding: 12px 8px;
  align-items: center;
}

.mv-popup-title--age-gate {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  color: #f6f6f6;
}

.age-gate-highlight {
  margin: 8px 0 0;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: #fed800;
}

/* 패널 아래 설명 줄. 차단 팝업의 noti 문구도 이 값을 씀 */
.age-gate-desc {
  margin: 20px 0 0;
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  color: #cdc4e3;
}

.age-gate-link {
  color: inherit;
  text-decoration: underline;
}

/* 차단 팝업 하단 안내. 아이콘은 첫 줄 앞에만 붙음 */
.age-gate-desc--noti {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  font-size: 16px;
}

/*
 * 글줄은 왼쪽 맞춤 — 줄바꿈된 다음 줄도 첫 줄과 같은 위치에서 시작함
 * 덩어리 자체는 justify-content: center 로 가운데에 놓임
 */
.age-gate-desc--noti > span {
  text-align: left;
}

/*
 * 첫 줄 가운데에 맞춤 — margin-top = (글자 줄높이 - 아이콘 높이) / 2
 * 글자 크기를 바꾸면 이 값도 같이 손봐야 함
 * 기본: 16px x 1.5 = 24 줄높이, 아이콘 18 -> (24 - 18) / 2 = 3
 */
.age-gate-noti-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

/* 버튼 이미지에 자체 여백이 있어 gap 을 두지 않음 */
.mv-popup-actions--age-gate {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 0 28px;
}

/*
 * 버튼 문구 변경 — Continue / No, thanks -> Yes, I'm over 21 / No, I'm under 21
 *
 * 기존 파일을 덮지 않고 새 파일명을 씀. CSS background 는 PHP 를 거치지 않아
 * mv_image_url_versioned() 의 버전 쿼리가 안 붙고, CDN(CloudFront)은 쿼리를
 * 캐시 키로 쓰지 않음 — 같은 이름으로 교체하면 옛 이미지가 계속 나옴
 * 이름을 바꾸는 것이 확실한 갱신 방법임 (button_cta-continue/nothanks 는 남겨 둠)
 */
.mv-popup-image-button--age-continue {
  width: min(263px, calc(100% - 44px));
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/age_gate/button_cta-over21.png');
}

.mv-popup-image-button--age-nothanks {
  width: min(263px, calc(100% - 44px));
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/age_gate/button_cta-under21.png');
}

.mv-popup-card--slot {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/slot_freespin/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/slot_freespin/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/slot_freespin/bg_bottom.png');
  width: min(330px, calc(100vw - 32px));
  min-height: 420px;
}

.mv-popup-card--reward-object {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/reward_object/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/reward_object/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/reward_object/bg_bottom.png');
  width: min(330px, calc(100vw - 32px));
  min-height: 420px;
}

.mv-popup-close--slot,
.mv-popup-close--reward-object {
  top: 18px;
  right: 18px;
  width: 20px;
  height: 21px;
}

.mv-popup-close--slot { background-image: url('../images/popup/slot_freespin/button_close.png?v=2'); }
.mv-popup-close--reward-object { background-image: url('../images/popup/reward_object/button_close.png?v=2'); }

.mv-popup-content--slot,
.mv-popup-content--reward-object {
  margin-top: 0;
  align-items: center;
  padding: 32px 14px 0;
  gap: 0;
}

.mv-popup-content--slot { padding-top: 25px; }

.mv-popup-content--reward-object {
  padding: 40px 14px 0;
}

.seat-slot-preview-wrap {
  width: 145px;
  height: 120px;
  margin: 0 auto 5px;
}

.seat-slot-preview {
  width: 145px;
  height: 120px;
  object-fit: contain;
}

.mock-preview-wrap {
  width: 111px;
  height: 95px;
  margin: 0 auto 0;
}

.mock-preview {
  width: 111px;
  height: 95px;
  object-fit: contain;
}

.mv-popup-text-panel-wrap {
  width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mv-popup-text-panel-wrap--reward-object {
  position: relative;
  margin-top: 15px;
}

.mv-popup-text-panel-wrap--reward-object::after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 8px;
  background: url('../images/popup/comm_frame_shadow.png') center / 100% 100% no-repeat;
  pointer-events: none;
}

.mv-popup-text-panel-wrap--reward-object .mv-popup-text-panel-shadow {
  display: none;
}

.mv-popup-text-panel {
  width: 100%;
  box-sizing: border-box;
  background: #140a38;
  border: 1px solid #2c0683;
  border-radius: 10px 10px 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mv-popup-text-panel--slot,
.mv-popup-text-panel--reward-object {
  min-height: 107px;
  padding: 15px 10px 20px;
}

.mv-popup-text-panel--slot {
  align-items: center;
}

.seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-text-panel--slot {
  min-height: 100px;
}

.mv-popup-text-panel--reward-object {
  min-height: 110px;
  padding: 10px;
  align-items: center;
}

.mv-popup-card--reward-object[data-reward-key='cat'] .mv-popup-text-panel--reward-object {
  min-height: 124px;
}

.mv-popup-text-panel-shadow {
  width: 100%;
  height: 8px;
  background: url('../images/popup/comm_frame_shadow.png') center / 100% 100% no-repeat;
}

.mv-popup-title--slot,
.mv-popup-title--reward-object {
  margin: 0;
}

.mv-popup-title--slot {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
}

.seat-dialog-box[data-seat-variant="reward-web"] .mv-popup-title--slot {
  font-size: 24px;
  font-weight: 700;
}

.seat-desc {
  margin: 8px 0 0;
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fed800;
  text-align: center;
}

.seat-dialog-box[data-seat-variant="reward-web"] .seat-desc {
  font-size: 18px;
  font-weight: 400;
}

#seat-mobile-note {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.28;
  text-align: center;
  color: #7fc3ff;
}

.mv-popup-actions--slot {
  padding: 10px 15px 35px;
  gap: 0;
}

.mv-popup-actions--reward-object {
  padding: 20px 15px 35px;
  gap: 10px;
}

#seat-mobile-note:not([hidden]) + .mv-popup-actions--slot {
  padding-top: 10px;
}

.mv-popup-image-button--slot {
  width: min(263px, 100%);
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/slot_freespin/button_cta-play.png');
}

.mv-popup-title--reward-object {
  font-size: 24px;
  line-height: 1;
}

.mock-body {
  margin: 10px 0 0;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  color: #fed800;
}

.mv-popup-image-button--reward-object {
  width: min(263px, 100%);
  aspect-ratio: 263 / 81;
  background-image: url('../images/popup/reward_object/button_cta-freechips.png');
}

/* ========================================================================
   쿠키 동의 — 배너 + 설정 팝업 (법무 요청 B-1)
   ======================================================================== */

/*
 * 배너 = z-index 199
 *
 * HUD(90) · 면책 문구(91) · 시즌배너(95) · 가로 BGM(98) · GNB(100) ·
 * NPC 메뉴(114~130) 위, 모든 모달(200~) 아래
 * 팝업이 열리면 배너가 딤 아래로 자연히 들어감
 *
 * bottom:0 으로 바닥에 붙임 — 면책 문구와 HUD 하단을 잠시 덮음. 동의는 한 번만
 * 하는 것이고 배너에 [Cookie Settings] 가 있어서 가려도 진입 경로가 유지됨
 * 띄우려면 --mv-disclaimer-h 에 묶인 오프셋 계약(HUD · BGM · 토스트)을 다 손대야 함
 */
#cookie-banner {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  /*
   * 높이를 **하단 UI 두 개를 합친 값**에 맞춤
   *
   *   #lobby-hud        프리셋 60px + 상하 패딩 14px  = 88px  (≤860px 는 56+28=84px)
   *   #lobby-disclaimer --mv-disclaimer-h            = 34px
   *
   * HUD 하나에만 맞추면 띠가 배너 아래로 삐져나와 겹쳐 보임.
   * 둘을 다 덮으면 하단이 배너 하나로 정리됨
   * 내용이 더 길면 min-height 를 넘어 자연히 커짐
   */
  min-height: calc(88px + var(--mv-disclaimer-h, 34px));
  /* 우측 닫기 버튼 자리를 padding-right 로 확보 */
  padding: 10px 56px calc(10px + env(safe-area-inset-bottom)) 20px;
  /*
   * 투명 + 블러 — 뒤가 옅게 비쳐 무언가 있다는 것이 보이도록
   * 알파를 더 내리면 게임 배경이 밝아 글자가 묻힘. 가독성은 블러가 더 크게 도움
   *
   * 클릭은 새지 않음. 배너가 z-index 199 로 HUD(90) 위에 있고
   * pointer-events: auto 로 포인터를 직접 받음
   */
  background: rgba(11, 6, 32, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid #230070;
  pointer-events: auto;
}

/* 높이를 늘렸으니 내용은 세로 가운데 정렬 */
#cookie-banner.active {
  display: flex;
  align-items: center;
}

@media (max-width: 860px) {
  /* HUD 프리셋이 56px 로 줄어드는 구간 — 배너도 같이 맞춤 */
  #cookie-banner {
    min-height: calc(84px + var(--mv-disclaimer-h, 34px));
  }
}

/*
 * 가로모드(compact landscape)는 HUD 가 좌측 세로 패널로 빠지므로
 * 하단에 맞출 대상이 없음. 높이를 내용에 맡김
 */
body.mv-compact-landscape #cookie-banner {
  min-height: 0;
}

/* ?noblur 진단 스위치 — 배너도 함께 끔 */
html.mv-no-blur #cookie-banner {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #0b0620;
}

/*
 * 닫기 — 우측 끝 (슬로토매니아와 같은 배치)
 * 동의도 거부도 아님. 아무것도 저장하지 않고 배너만 숨김
 * 이미지 에셋을 새로 만들지 않고 CSS 로 X 를 그림
 */
/*
 * 원형 연한 배경을 둠 — X 선만 두면 게임 배경 위에서 눌리는 것으로 인지가 안 됨
 * 배너 안이라 크게 만들 필요는 없고, 34px + 옅은 면 + 테두리면 충분히 읽힘
 */
.cookie-banner__close {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.cookie-banner__close::before,
.cookie-banner__close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  margin: -1px 0 0 -7.5px;
  background: #d9d2ee;
  transition: background 0.15s ease;
}

.cookie-banner__close::before { transform: rotate(45deg); }
.cookie-banner__close::after { transform: rotate(-45deg); }

.cookie-banner__close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.cookie-banner__close:hover::before,
.cookie-banner__close:hover::after {
  background: #fed800;
}

.cookie-banner__close:focus-visible {
  outline: 2px solid #8fd0ff;
  outline-offset: 2px;
}

/* 모달이 열리면 배너를 숨김 — 딤 위에 겹쳐 보이는 것을 막음 */
body.mv-modal-open #cookie-banner {
  display: none;
}

/*
 * 폭은 화면을 거의 다 씀 (max-width 를 두지 않음)
 * 좁게 가두면 문구가 여러 줄로 접혀 배너 높이만 커짐
 */
.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  width: 100%;
}

.cookie-banner__text {
  flex: 1 1 520px;
  margin: 0;
  font: 400 13px/1.5 Georgia, serif;
  color: #cdc4e3;
}

.cookie-banner__link {
  color: #8fd0ff;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.cookie-banner__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * 버튼 3개 — **완전히 동일한 스타일** (법무 요청 B-1)
 *
 * 크기 · 색 · 굵기가 모두 같아야 함. 한쪽을 강조하거나 거부를 텍스트 링크로
 * 축소하면 EU 기준에서 다투어질 수 있음
 * 어느 하나에만 다른 규칙을 주지 말 것 — 셋을 항상 이 클래스 하나로 유지
 *
 * .legal-tab 의 어휘를 그대로 가져옴 (이 파일에서 유일한 동급 다중 컨트롤).
 * 선택 표시는 색면 하나로만 — 테두리를 남발하면 프레임 · 구분선과 겹쳐 지저분해짐
 */
.cookie-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  min-height: 34px;
  padding: 8px 14px;
  /*
   * 보이되 과하지 않게 — 채움은 판보다 한 단계만 밝히고 테두리로 윤곽을 잡음
   * 그라데이션 · 큰 그림자를 쓰면 버튼이 화면을 지배함
   */
  border: 1px solid #4d3a92;
  border-radius: 6px;
  background: #24105a;
  color: #ece7fb;
  font: 700 12px/1.2 Georgia, serif;
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* 마우스오버는 한 단계만. 크게 밝히면 눌린 것처럼 보임 */
.cookie-btn:hover {
  background: #2c1570;
  border-color: #614cae;
}

.cookie-btn:active {
  background: #1e0d4c;
}

.cookie-btn:focus-visible {
  outline: 2px solid #8fd0ff;
  outline-offset: 2px;
}

/* ----- 설정 팝업 ----- */

/*
 * 프레임은 info_center 에셋을 재사용함 — legal 팝업이 이미 같은 방식임
 * 변형 클래스는 치수 · 에셋만 담고 구조는 베이스(.mv-popup-card)가 담당
 */
.mv-popup-card--cookie-settings {
  --popup-frame-top-height: 120px;
  --popup-frame-middle-tile-height: 16px;
  --popup-frame-bottom-height: 120px;
  --popup-frame-top-image: url('../images/popup/info_center/bg_top.png');
  --popup-frame-middle-image: url('../images/popup/info_center/bg_middle.png');
  --popup-frame-bottom-image: url('../images/popup/info_center/bg_bottom.png');
  /*
   * **폭을 과하게 늘리지 말 것.** 프레임 위/아래 이미지는
   * background-size: 100% 100% 라 가로로 늘리면 그대로 왜곡됨
   * 같은 프레임을 쓰는 legal 팝업이 474px 이라 그 근처를 유지함
   * 좌측 탭을 좁게 잡아 이 폭 안에서 해결함
   */
  width: min(520px, calc(100vw - 32px));
  /*
   * 높이는 내용이 정함. min-height 는 프레임 바닥값 —
   * 프레임 위아래가 120px 씩 고정이라 그보다 낮으면 두 조각이 겹침
   * 연령 게이트와 같은 방식 (legal 처럼 height 를 고정하지 않음)
   */
  min-height: 370px;
}

.mv-popup-close--cookie-settings {
  top: 26px;
  right: 26px;
  width: 20px;
  height: 21px;
  background-image: url('../images/popup/info_center/button_close.png');
}

/* 좌우 여백은 안쪽 요소가 각자 가짐 (프레임 테두리만큼 빼려면 그쪽이 정확함) */
.mv-popup-scroll-body--cookie-settings {
  margin: 34px 0 30px;
}

.mv-popup-content--cookie-settings {
  gap: 18px;
}

.mv-popup-title--cookie-settings {
  font-size: 24px;
}

/*
 * 좌측 탭 + 우측 내용 (OneTrust 계열 표준 배치)
 * 좁은 화면에서는 위/아래로 쌓임 (아래 반응형 참고)
 */
/*
 * 폭에서 10px 을 뺌 — 프레임 배경 이미지에 테두리가 그려져 있어서
 * 100% 로 두면 그 테두리 위에 얹힘. margin auto 로 가운데 정렬
 * 라운드는 주지 않음 (프레임 테두리와 곡률이 어긋나 보임)
 */
.cookie-settings-layout {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: calc(100% - 10px);
  margin: 0 auto;
  min-height: 214px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/*
 * 라벨이 법무 지정 카테고리명 그대로라 길다 ("Strictly necessary cookies").
 * 줄여 쓰지 말 것 — 문안이므로 두 줄로 접히게 두고 폭만 확보함
 */
.cookie-tabs {
  display: flex;
  flex: 0 0 190px;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/*
 * 탭은 **확실히 보여야 함.** 평상시에도 글자가 충분히 밝고, 활성 탭은
 * 좌측 굵은 막대 + 색면으로 표시함 (테두리를 두르면 프레임과 선이 겹쳐 지저분해짐)
 */
.cookie-tab {
  display: flex;
  align-items: center;
  padding: 11px 10px 11px 12px;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: rgba(233, 227, 250, 0.82);
  font: 700 11.5px/1.3 Georgia, serif;
  letter-spacing: 0.1px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.cookie-tab + .cookie-tab {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.cookie-tab.is-active {
  background: rgba(0, 0, 0, 0.34);
  border-left-color: #fed800;
  color: #fff6e2;
}

.cookie-tab:focus-visible {
  outline: 2px solid #8fd0ff;
  outline-offset: -2px;
}

.cookie-panels {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 15px;
}

.cookie-panel {
  display: none;
}

.cookie-panel.is-active {
  display: block;
}

.cookie-panel:focus-visible {
  outline: 2px solid #8fd0ff;
  outline-offset: 2px;
}

.cookie-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cookie-panel__title {
  margin: 0;
  font: 700 15px/1.3 Georgia, serif;
  color: #f6f6f6;
}

/*
 * 필수 카테고리는 **토글을 두지 않음.** 끌 수 없는 항목에 비활성 토글을 두면
 * 조작 가능한 것으로 오해되고, 스크린리더에도 "꺼진 스위치" 로 읽힘
 */
.cookie-panel__always {
  flex: 0 0 auto;
  font: 700 11.5px/1.2 Georgia, serif;
  letter-spacing: 0.3px;
  color: #fed800;
}

.cookie-panel__desc {
  margin: 0;
  font: 400 13px/1.6 Georgia, serif;
  color: #cdc4e3;
}

.cookie-panel__link {
  color: #8fd0ff;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/*
 * 토글 — <button role="switch" aria-checked>
 * checkbox 대신 버튼을 쓴 이유는 이 프로젝트에 폼 자산이 없고, 버튼은 기존
 * 관용구(appearance:none, tap-highlight 제거)를 그대로 쓸 수 있기 때문
 * 상태는 aria-checked 하나로만 표현함 — CSS 와 접근성 트리가 어긋나지 않음
 */
.cookie-toggle {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.cookie-toggle__track {
  display: block;
  position: relative;
  width: 46px;
  height: 26px;
  background: #1c005b;
  border: 1px solid #35217f;
  border-radius: 13px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.cookie-toggle__knob {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #9c92c0;
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
}

.cookie-toggle[aria-checked='true'] .cookie-toggle__track {
  background: #2c0b77;
  border-color: #6a4fd0;
}

.cookie-toggle[aria-checked='true'] .cookie-toggle__knob {
  background: #fed800;
  transform: translateX(20px);
}

.cookie-toggle:focus-visible .cookie-toggle__track {
  outline: 2px solid #8fd0ff;
  outline-offset: 2px;
}

/* 설정 팝업 하단 버튼 — 배너와 같은 .cookie-btn 을 씀. 위계도 동일 */
.cookie-settings__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cookie-settings__actions .cookie-btn {
  flex: 1 1 150px;
  min-width: 150px;
}

/* ----- 면책 문구의 상시 진입점 ----- */

/*
 * 문구와 같은 스케일을 유지함. 크게 만들면 띠가 두 줄이 되고
 * --mv-disclaimer-h(34px) 에 묶인 HUD · BGM · 토스트 오프셋이 어긋남
 */
/*
 * 밑줄 · 색은 **버튼이 아니라 안쪽 span 에** 줌
 *
 * 버튼에 주면 `.lobby-disclaimer__item + …::before` 로 붙는 구분점 `·` 까지
 * 밑줄이 그어지고 마우스오버 색도 같이 바뀜. 구분점은 항목 사이 기호이므로
 * 링크 표시를 물려받아서는 안 됨
 */
.lobby-disclaimer__link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.lobby-disclaimer__link-full,
.lobby-disclaimer__link-short {
  text-decoration: underline;
  transition: color 0.15s ease;
}

.lobby-disclaimer__link:hover .lobby-disclaimer__link-full,
.lobby-disclaimer__link:hover .lobby-disclaimer__link-short {
  color: #fed800;
}

.lobby-disclaimer__link:focus-visible {
  outline: 2px solid #8fd0ff;
  outline-offset: 2px;
}

/* 기본은 전체 라벨. 좁은 구간에서만 축약본으로 바꿈 */
.lobby-disclaimer__link-short {
  display: none;
}

/* ----- 반응형 ----- */

/* 태블릿 — 문구와 버튼이 한 줄에 안 들어가면 버튼 줄을 아래로 내림 */
@media (max-width: 1024px) {
  .cookie-banner__inner {
    justify-content: center;
  }
  .cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
  .cookie-btn {
    flex: 1 1 150px;
    max-width: 260px;
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /*
   * 버튼이 아래로 내려가 배너가 이미 충분히 높음 —
   * 하단 UI 높이에 맞추던 min-height 를 풀어 내용이 정하게 함
   */
  #cookie-banner {
    min-height: 0;
    padding: 10px 46px calc(10px + env(safe-area-inset-bottom)) 14px;
  }
  .cookie-banner__inner {
    gap: 8px 12px;
  }
  .cookie-banner__text {
    flex-basis: 100%;
    font-size: 12px;
    line-height: 1.45;
  }
  .cookie-banner__close {
    right: 8px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .mv-popup-title--cookie-settings {
    font-size: 20px;
  }
}

/*
 * 좁은 화면 — 좌측 탭을 위로 눕힘 (가로 스크롤 탭)
 *
 * 세로 탭이 190px 이라 카드가 그보다 좁아지면 우측 내용 폭이 남지 않음
 * 카드는 min(520px, 100vw - 32px) 이므로 화면 592px 아래부터 여유가 없어짐
 */
@media (max-width: 600px) {
  .cookie-settings-layout {
    flex-direction: column;
    min-height: 0;
  }
  .cookie-tabs {
    flex: 0 0 auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .cookie-tab {
    flex: 0 0 auto;
    padding: 11px 14px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .cookie-tab + .cookie-tab {
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
  }
  .cookie-tab.is-active {
    border-left-color: transparent;
    border-bottom-color: #fed800;
  }
  .cookie-panels {
    padding: 14px 15px;
  }
}

@media (max-width: 440px) {
  /* 버튼 3개를 한 줄에 넣으면 글자가 잘림 — 한 줄에 하나씩 */
  .cookie-btn {
    flex-basis: 100%;
    max-width: none;
    font-size: 12px;
  }
  /*
   * 모바일 세로 — 버튼이 한 줄에 하나씩 쌓이면서 카드 폭을 꽉 채워 답답함
   * 90% 로 줄여 좌우에 숨을 틔움 (가로 · 태블릿은 한 줄에 여러 개라 문제 없음)
   */
  .cookie-settings__actions {
    width: 90%;
    margin: 0 auto;
  }
  .cookie-settings__actions .cookie-btn {
    flex-basis: 100%;
  }
  .mv-popup-card--cookie-settings {
    width: calc(100vw - 24px);
  }
  .cookie-panels {
    padding: 12px 13px;
  }
  .cookie-panel__desc {
    font-size: 12.5px;
  }
  .cookie-panel__title {
    font-size: 14px;
  }
  .cookie-panel__head {
    /* 제목이 길면 토글이 밀려 내려가지 않게 줄바꿈 허용 */
    flex-wrap: wrap;
    gap: 8px;
  }
}

/*
 * 낮은 화면 — 연령 게이트와 같은 처리
 * **폭 구간보다 뒤에 둘 것.** 앞에 두면 max-width 구간이 min-height 를 되살려
 * max-height 가 무효화됨 (이 파일의 기존 사고 이력)
 */
@media (max-height: 680px) {
  /*
   * min-height 를 먼저 0 으로 풀지 않으면 max-height 가 무시됨 (이 파일의 사고 이력)
   * 세 개를 항상 같이 줄 것 — min-height:0 + max-height + overflow:hidden
   */
  .mv-popup-card--cookie-settings {
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }
  /* 카드 높이가 묶였으니 본문이 내부 스크롤을 받음. flex 아이템이라 min-height:0 필요 */
  .mv-popup-scroll-body--cookie-settings {
    flex: 1 1 auto;
    min-height: 0;
    margin: 24px 0 22px;
    overflow-y: auto;
  }
}

/*
 * 가로모드는 면책 문구가 **한 줄이어야 함.** 두 줄이 되면 --mv-disclaimer-h
 * 기준으로 띄워 둔 HUD · BGM 이 띠와 겹침
 * 버튼이 붙어 wrap 임계폭이 올라갔으므로 이 구간에서는 라벨을 축약함
 */
body.mv-compact-landscape .lobby-disclaimer__link-full {
  display: none;
}

body.mv-compact-landscape .lobby-disclaimer__link-short {
  display: inline;
}

#popup-debug-panel {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: rgba(10, 12, 26, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
}

#popup-debug-panel[hidden] { display: none; }

#popup-debug-panel button,
#popup-debug-panel a {
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font: 12px/1.2 Georgia, serif;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

/* 약관 페이지 링크는 팝업 버튼과 구분 */
#popup-debug-panel a {
  background: rgba(126, 202, 255, 0.16);
  text-decoration: none;
}

.popup-debug-sep {
  margin-top: 4px;
  padding: 2px 2px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.5);
  font: 10px/1.4 Georgia, serif;
  letter-spacing: 0.4px;
}

@media (max-width: 640px) {
  #mock-overlay,
  #app-warning-dialog,
  #info-dialog,
  #legal-dialog,
  #boutique-dialog,
  #map-dialog,
  #seat-dialog {
    padding: 16px;
  }

  .mv-popup-card--info {
    width: min(474px, calc(100vw - 24px));
    min-height: 0;
  }

  .mv-popup-card--legal {
    width: min(474px, calc(100vw - 24px));
  }

  .mv-popup-content--legal {
    padding: 46px 22px 32px;
  }

  .mv-popup-card--age-gate,
  .mv-popup-card--age-blocked {
    width: min(376px, calc(100vw - 24px));
  }

  .mv-popup-content--info {
    padding: 34px 20px 0;
  }

  #info-dialog-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .info-dialog-nav--prev { left: 7px; }
  .info-dialog-nav--next { right: 7px; }
  .info-dialog-copy { min-height: 48px; font-size: 18px; line-height: 1.2; margin-top: 15px; }
  .mv-popup-actions--info { padding: 20px 0 28px; }

  .mv-popup-card--slot,
  .mv-popup-card--reward-object,
  .mv-popup-card--app-warning {
    width: min(340px, calc(100vw - 24px));
    min-height: 0;
  }

  .mv-popup-content--slot,
  .mv-popup-content--reward-object {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mv-popup-actions--slot {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 10px;
    padding-bottom: 28px;
    gap: 0;
  }

  .mv-popup-actions--reward-object {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 28px;
    gap: 10px;
  }

  .mv-popup-title--slot,
  .mv-popup-title--reward-object,
  .mv-popup-title--app-warning { font-size: 20px; }
  .seat-dialog-box[data-seat-variant="reward-web"] .mv-popup-title--slot { font-size: 22px; }
  .seat-desc,
  .mock-body,
  #seat-mobile-note,
  .app-warning-body { font-size: 17px; }

  .mv-popup-card--map,
  .map-dialog-image-wrap {
    width: min(calc(100vw - 32px), calc((100vh - 32px) * 850 / 596));
  }

  .map-dialog-image {
    max-height: calc(100vh - 32px);
  }

  #popup-debug-panel {
    right: 8px;
    bottom: 8px;
  }
}

@media (max-width: 440px) {
  #mock-overlay,
  #app-warning-dialog,
  #info-dialog,
  #legal-dialog,
  #boutique-dialog,
  #map-dialog,
  #seat-dialog {
    padding: 12px;
  }

  .mv-popup-close--info,
  .mv-popup-close--legal,
  .mv-popup-close--slot,
  .mv-popup-close--reward-object {
    top: 14px;
    right: 14px;
    width: 18px;
    height: 19px;
  }

  /* 연령 게이트 — 좁은 화면에서 글자 · 여백 축소 */
  .mv-popup-card--age-gate { min-height: 470px; }
  .mv-popup-card--age-blocked { min-height: 344px; }

  /*
   * shorthand 금지 — 좌우 15px 과 차단 팝업 하단 여백까지 같이 지워짐
   * 위아래만 여기서 조정함
   */
  .mv-popup-content--age-gate,
  .mv-popup-content--age-blocked {
    padding-top: 28px;
  }

  .mv-popup-content--age-blocked {
    padding-left: 16px;
    padding-right: 16px;
  }

  .age-gate-icon-wrap { width: 82px; height: 85px; margin-bottom: 14px; }
  .age-gate-icon-wrap--blocked { width: 78px; height: 80px; }

  .mv-popup-title--age-gate { font-size: 21px; }
  .age-gate-highlight { font-size: 16px; }
  .age-gate-desc { margin-top: 20px; font-size: 13px; }
  .age-gate-desc--noti { font-size: 14px; }
  /* 14px x 1.5 = 21 줄높이, 아이콘 16 -> (21 - 16) / 2 = 2.5 */
  .age-gate-noti-icon { width: 16px; height: 16px; margin-top: 2px; }

  .mv-popup-actions--age-gate { padding: 20px 0 24px; }

  .mv-popup-image-button--age-continue,
  .mv-popup-image-button--age-nothanks {
    width: min(240px, calc(100% - 32px));
  }

  .mv-popup-card--app-warning {
    width: min(340px, calc(100vw - 24px));
    min-height: 420px;
  }

  .mv-popup-close--app-warning {
    top: 14px;
    right: 14px;
    width: 18px;
    height: 19px;
  }

  .mv-popup-content--app-warning {
    padding: 30px 14px 0;
  }

  .app-warning-icon-wrap,
  .app-warning-icon {
    width: 88px;
    height: 91px;
  }

  .mv-popup-title--app-warning {
    font-size: 20px;
  }

  .app-warning-body {
    font-size: 15px;
  }

  .mv-popup-actions--app-warning {
    padding: 20px 14px 28px;
  }

  .mv-popup-content--info {
    padding: 32px 18px 0;
  }

  #info-dialog-title {
    font-size: 22px;
  }

  .mv-popup-content--legal {
    padding: 42px 16px 28px;
  }

  .legal-tab {
    font-size: 11px;
    padding: 13px 16px;
  }

  .legal-doc-title {
    font-size: 16px;
  }

  .legal-panel {
    padding: 18px 13px 16px;
    font-size: 13.5px;
    line-height: 1.75;
  }

  .legal-h {
    font-size: 14px;
    margin-top: 28px;
  }

  .info-dialog-pagination {
    gap: 8px;
  }

  .info-dialog-dot {
    width: 10px;
    height: 10px;
  }

  .mv-popup-content--slot,
  .mv-popup-content--reward-object {
    padding-top: 30px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .mock-preview-wrap,
  .mock-preview {
    width: 102px;
    height: 87px;
  }

  .seat-slot-preview-wrap,
  .seat-slot-preview {
    width: 132px;
    height: 109px;
  }

  .seat-slot-preview-wrap {
    margin-bottom: 5px;
  }

  .mv-popup-title--slot {
    font-size: 17px;
  }

  .seat-dialog-box[data-seat-variant="reward-web"] .mv-popup-title--slot {
    font-size: 20px;
  }

  .seat-desc,
  .mock-body,
  #seat-mobile-note {
    font-size: 16px;
  }

  .mv-popup-card--map,
  .map-dialog-image-wrap {
    width: min(calc(100vw - 24px), calc((100vh - 24px) * 850 / 596));
  }

  .map-dialog-image {
    max-height: calc(100vh - 24px);
  }
}

/*
 * 높이가 모자란 화면 — 카드를 화면에 맞추고 남는 만큼 내부에서 스크롤
 *
 * info · slot · reward-object · app-warning 과 같은 구조임
 * (카드에 max-height, scroll-body 에 overflow-y: auto)
 *
 * 다만 그쪽은 orientation: landscape 로 걸어 터치 기기 가로모드만 잡음
 * 연령 게이트는 진입을 막는 팝업이라 PC · 태블릿 · 세로모드에서도
 * 잘리면 안 되므로 **높이로 판정**함
 *
 * min-height 를 먼저 풀어야 함 — CSS 는 min-height 가 max-height 를 이김
 */
@media (max-height: 680px) {
  /* 프레임은 위아래 120px 이 고정이라 여백을 줄여 몸통 높이를 벌어 줌 */
  .mv-popup-overlay--gate {
    padding: 12px;
  }

  .mv-popup-card--age-gate,
  .mv-popup-card--age-blocked {
    min-height: 0;
    /* 오버레이가 헤더 아래에서 시작하므로 100% 가 곧 남은 높이임 */
    max-height: 100%;
    overflow: hidden;
  }

  /*
   * margin 은 프레임 테두리 두께임 — bg_top 위 4px, bg_bottom 아래 5px 실측
   * 스크롤 영역을 그만큼 안쪽으로 들이지 않으면
   * 스크롤 중 버튼 · 글자가 테두리 위를 지나가 넘친 것처럼 보임
   *
   * 아래 padding 들은 이 margin 만큼 빼 둔 값이라
   * 화면에 보이는 간격은 그대로임. 한쪽만 고치면 어긋남
   */
  .mv-popup-scroll-body--age-gate,
  .mv-popup-scroll-body--age-blocked {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 4px;
    margin-bottom: 5px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  /* 24 - 위 margin 4 */
  .mv-popup-content--age-gate,
  .mv-popup-content--age-blocked {
    padding-top: 20px;
  }

  /* 차단 팝업은 액션 영역이 없어 아래 여백을 여기서 줌. 24 - 아래 margin 5 */
  .mv-popup-content--age-blocked {
    padding-bottom: 19px;
  }

  .age-gate-icon-wrap {
    width: 82px;
    height: 85px;
    margin-bottom: 12px;
  }

  .age-gate-icon-wrap--blocked {
    width: 78px;
    height: 81px;
  }

  .mv-popup-text-panel--age-gate {
    min-height: 96px;
    padding: 10px 8px;
  }

  .mv-popup-title--age-gate { font-size: 20px; }
  .age-gate-highlight { font-size: 16px; }
  .age-gate-desc { margin-top: 16px; }
  /* shorthand 금지 — 16 - 아래 margin 5 */
  .mv-popup-actions--age-gate {
    padding-top: 14px;
    padding-bottom: 11px;
  }

  .mv-popup-image-button--age-continue,
  .mv-popup-image-button--age-nothanks {
    width: min(220px, calc(100% - 32px));
  }
}



@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .mv-popup-card--info,
  .mv-popup-card--slot,
  .mv-popup-card--reward-object,
  .mv-popup-card--app-warning {
    min-height: 0;
    max-height: 90dvh;
    overflow: hidden;
  }

  .mv-popup-scroll-body--info,
  .mv-popup-scroll-body--slot,
  .mv-popup-scroll-body--reward-object,
  .mv-popup-scroll-body--app-warning {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /*
   * 프레임 테두리(이미지) 두께만큼 스크롤 영역을 안쪽으로 들임
   * 없으면 스크롤 중 버튼 · 글자가 테두리 위를 지나가 넘친 것처럼 보임
   *
   * 값은 각 bg_top / bg_bottom 실측이고 팝업마다 다름
   * 위 padding 들에서 같은 값을 빼 뒀으므로 보이는 간격은 그대로임
   */
  .mv-popup-scroll-body--info {
    margin-top: 8px;
    margin-bottom: 5px;
  }

  .mv-popup-scroll-body--slot {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .mv-popup-scroll-body--reward-object {
    margin-top: 3px;
    margin-bottom: 5px;
  }

  .mv-popup-scroll-body--app-warning {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .mv-popup-content--info {
    padding-top: 16px;
  }

  /* 카드 자체가 90dvh 로 줄어들고, 남는 높이는 패널 스크롤이 흡수 */
  .mv-popup-card--legal {
    height: 90dvh;
  }

  .mv-popup-content--legal {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  .legal-doc-meta {
    margin-bottom: 22px;
    padding-bottom: 16px;
  }

  .mv-popup-content--slot {
    padding-top: 15px;
  }

  .mv-popup-content--reward-object {
    padding-top: 25px;
  }

  .mv-popup-content--app-warning {
    padding-top: 20px;
  }

  #info-dialog-title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .mv-popup-title--slot,
  .mv-popup-title--reward-object,
  .mv-popup-title--app-warning {
    font-size: 20px;
  }

  .seat-desc,
  .mock-body,
  #seat-mobile-note,
  .app-warning-body {
    font-size: 16px;
  }

  .seat-slot-preview-wrap,
  .seat-slot-preview {
    width: 124px;
    height: 103px;
  }

  .mock-preview-wrap,
  .mock-preview {
    width: 96px;
    height: 82px;
  }

  .app-warning-icon-wrap {
    width: 82px;
    height: 85px;
    margin-bottom: 12px;
  }

  .app-warning-icon {
    width: 82px;
    height: 85px;
  }

  .mv-popup-text-panel--app-warning {
    min-height: 96px;
  }

  .mv-popup-text-panel--slot {
    min-height: 96px;
  }

  .mv-popup-text-panel--reward-object {
    min-height: 100px;
    height: 100px;
  }

  .mv-popup-image-button--info,
  .mv-popup-image-button--slot,
  .mv-popup-image-button--reward-object,
  .mv-popup-image-button--app-warning {
    width: min(220px, 100%);
  }

  .mv-popup-actions--info {
    padding-top: 16px;
    padding-bottom: 11px;
  }

  .mv-popup-actions--slot {
    padding-top: 8px;
    padding-bottom: 11px;
  }

  .mv-popup-actions--reward-object {
    padding-top: 14px;
    padding-bottom: 11px;
  }

  .mv-popup-actions--app-warning {
    padding-top: 14px;
    padding-bottom: 12px;
  }

  .mv-popup-text-action {
    font-size: 16px;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-content--slot {
    padding-top: 11px;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .seat-slot-preview-wrap,
  .seat-dialog-box[data-seat-variant="reward-mobile"] .seat-slot-preview {
    width: 112px;
    height: 93px;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-title--slot {
    font-size: 18px;
    line-height: 1.05;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .seat-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-text-panel--slot {
    min-height: 88px;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] #seat-mobile-note {
    font-size: 14px;
    line-height: 1.16;
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-image-button--slot {
    width: min(208px, 100%);
  }

  .seat-dialog-box[data-seat-variant="reward-mobile"] .mv-popup-actions--slot {
    padding-top: 6px;
    padding-bottom: 7px;
  }
}

@media (max-width: 1180px) {
  body.mv-compact-landscape #bgm-player-shell:not(.is-collapsed) #bgm-player {
    width: 360px;
    max-width: calc(100vw - 96px);
  }
}

@media (max-width: 860px) {
  body.mv-compact-landscape #bgm-player-shell:not(.is-collapsed) #bgm-player {
    width: 270px;
    max-width: calc(100vw - 84px);
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  #lobby-hud {
    gap: 30px;
  }
}

@media (max-width: 860px) {
  #lobby-hud {
    gap: 18px;
  }
}


@media (max-width: 640px) {
  #map-dialog {
    padding: 16px;
  }

  .mv-popup-card--map,
  .map-dialog-image-wrap {
    width: min(calc(100vw - 32px), calc((100vh - 32px) * 850 / 596));
  }

  .map-dialog-image {
    max-height: calc(100vh - 32px);
  }
}

@media (max-width: 440px) {
  #map-dialog {
    padding: 12px;
  }

  .mv-popup-card--map,
  .map-dialog-image-wrap {
    width: min(calc(100vw - 24px), calc((100vh - 24px) * 850 / 596));
  }

  .map-dialog-image {
    max-height: calc(100vh - 24px);
  }
}

#map-dialog {
  overflow: auto;
}

.map-dialog-box {
  flex: 0 0 auto;
  margin: auto;
}

@media (max-width: 640px) {
  .mv-popup-card--map {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
  }

  .mv-popup-content--map {
    margin-top: 0;
    gap: 0;
    align-items: stretch;
  }
}

@media (max-width: 440px) {
  .mv-popup-card--map {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
  }

  .mv-popup-content--map {
    margin-top: 0;
    gap: 0;
    align-items: stretch;
  }
}

/* ───── NPC 컨텍스트 메뉴 ───── */
#npc-context-menu {
  display: none;
  position: fixed;
  background: #1a1a2e;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 6px 0;
  min-width: 130px;
  z-index: 120;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

#npc-context-menu.active {
  display: block;
}

#ctx-npc-name {
  padding: 6px 14px 8px;
  font-size: 12px;
  color: #f5c518;
  font-weight: 700;
  border-bottom: 1px solid #333;
}

#npc-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: none;
  color: #cccccc;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

#npc-context-menu button:hover {
  background: rgba(255,255,255,0.07);
  color: #ffffff;
}

#ctx-block { color: #e05555; }
#ctx-block:hover { color: #ff7070; }

/* ───── NPC 옵션 버튼 (호버 시 표시) ───── */
#npc-options-btn {
  display: none;
  position: fixed;
  width: 38px;
  height: 28px;
  background: rgba(24, 29, 58, 0.94);
  border: 1px solid rgba(255, 242, 206, 0.72);
  border-radius: 12px;
  color: #fff7df;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  z-index: 114;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  line-height: 1;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.24), 0 0 14px rgba(255, 219, 150, 0.14);
}

#npc-options-btn.visible {
  display: flex;
  animation: npcCuePulse 1.35s ease-in-out infinite;
}

#npc-options-btn:hover {
  background: rgba(35, 42, 84, 0.98);
  border-color: rgba(255, 247, 220, 0.92);
  transform: scale(1.05);
}

@keyframes npcCuePulse {
  0%, 100% { box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 0 10px rgba(255, 218, 142, 0.12); }
  50% { box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 0 18px rgba(255, 234, 188, 0.24); }
}

/* ───── Report 다이얼로그 ───── */
#report-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 130;
  justify-content: center;
  align-items: center;
}

#report-dialog.active {
  display: flex;
}

.report-box {
  background: #1a1a2e;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 28px 36px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #cccccc;
}

.report-box h4 {
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 4px;
}

.report-box #report-npc-name {
  font-size: 12px;
  color: #888;
}

.report-box label {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.report-buttons {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

#report-submit {
  padding: 8px 20px;
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

#report-submit:hover { background: #e04040; }

#report-cancel {
  padding: 8px 16px;
  background: transparent;
  color: #888;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

#report-cancel:hover { color: #fff; border-color: #888; }

/* ───── HUD 툴바 ─────
   가로모드 전용. top 은 인앱 브라우저 상단 툴바(약 24px) 가림을 피한 값
   visualViewport 가 이 가림을 보고하지 않아 자동 보정 불가
   바꾸면 body.mv-compact-landscape #lobby-hud 의 top 도 같이 맞출 것 */
#compact-hud-logo {
  display: none;
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 120;
  width: 48px;
  /* none 금지 — 탭이 캔버스로 통과해 아바타가 이동함 */
  pointer-events: auto;
}

#compact-hud-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* 세로·PC 는 레이아웃 미개입. 가로모드에서만 실제 스크롤 컨테이너 */
#hud-scroll {
  display: contents;
}

#lobby-hud {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  left: auto;
  bottom: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  /* 하단 세이프에어리어는 아래 #lobby-disclaimer 가 받음 */
  padding: 14px 18px;
  background: #110a2c;
  border-top: 1px solid #230070;
  z-index: 90;
  /* none 금지 — 패널 배경 탭이 캔버스로 통과해 뒤쪽 슬롯이 열림 */
  pointer-events: auto;
}

:root {
  /*
   * 면책 문구 띠의 최소 높이. 가로모드에서 HUD · BGM 을 이만큼 띄움
   * 위아래 8px 패딩 + 한 줄 높이보다 커야 실제 높이와 어긋나지 않음
   */
  --mv-disclaimer-h: 34px;
}

/*
 * 면책 문구 — 화면 최하단 얇은 띠
 *
 * #game-shell 의 flex 아이템이라 캔버스 높이는 main.js 가 #phaser-mount 를
 * 실측해 자동으로 줄임. 높이를 JS 에 따로 알릴 필요 없음
 */
#lobby-disclaimer {
  position: relative;
  flex: 0 0 auto;
  z-index: 91;
  box-sizing: border-box;
  width: 100%;
  /* 세이프에어리어를 더해 둬야 가로모드 HUD 오프셋과 높이가 정확히 맞음 */
  min-height: calc(var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0px));
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  background: #0b0620;
  border-top: 1px solid #230070;
}

.lobby-disclaimer__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 8px;
  margin: 0;
  font-family: var(--sec-gnb-font-body, 'Inter', 'Helvetica Neue', Arial, sans-serif);
  /* 브레이크포인트 없이 이어져야 리사이즈 중에 글자가 튀지 않음 */
  font-size: clamp(10px, 1.5vw, 12px);
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: #aeacb7;
  text-align: center;
}

/* 항목 단위로 접힘. 좁은 화면에서도 구절 중간이 끊기지 않음 */
.lobby-disclaimer__item {
  white-space: nowrap;
}

.lobby-disclaimer__item + .lobby-disclaimer__item::before {
  content: '\00B7';
  margin-right: 8px;
  color: #7a68c8;
}

@media (max-width: 1180px) and (min-width: 861px) {
  #lobby-hud {
    gap: 22px;
    padding: 12px 14px;
  }

  #bgm-player-shell {
    right: 14px;
  }

  #bgm-player {
    width: 300px;
    min-width: 300px;
    padding: 6px 10px;
    gap: 8px;
  }

  #bgm-toggle-btn {
    width: 34px;
    height: 34px;
  }

  #bgm-prev-btn,
  #bgm-next-btn,
  #bgm-mute-btn {
    width: 26px;
    height: 26px;
  }

  #bgm-volume-slider {
    width: 48px;
  }
}

/* 캔버스·HUD 이음새 마스크 — 소수점 높이에서 생기는 안티앨리어싱 선을 2px 로 덮음 */
#lobby-hud::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #110a2c;
  pointer-events: none;
}

/* 가로모드 HUD 는 fixed 둥근 카드 — 덮을 이음새 없음 */
body.mv-compact-landscape #lobby-hud::before {
  display: none;
}

#hud-presets {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

/* ── 프리셋 버튼 (WCAG 2.1 AA: 52px 높이, 라벨 상시 표시) ── */
.preset-btn,
#screenshot-btn,
#info-center-btn,
#legal-btn {
  width: 60px;
  height: 60px;
  background: #1c005b;
  border: 2px solid #230070;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.preset-icon {
  font-size: 22px;
  line-height: 1;
}

/* LEGAL 아이콘 — 이모지 대신 점 3개를 CSS 로 그림. 색은 라벨과 맞춤 */
.legal-icon-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 22px;
}

.legal-icon-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f4f1ff;
}

.preset-label {
  font-size: 10px;
  color: #f4f1ff;
  letter-spacing: 0.3px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

/* CSS 쿨다운 드레인 바 (JS 비용 없음) */
.preset-btn.cooldown {
  opacity: 0.55;
  pointer-events: none;
}

.preset-btn.cooldown::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #f5c518;
  animation: cooldown-drain 2s linear forwards;
  border-radius: 0 0 6px 6px;
}

@keyframes cooldown-drain {
  from { width: 100%; }
  to   { width: 0%;   }
}

/* ── 정보센터 버튼 (HUD 로 접힌 상태) ── */
#info-center-btn {
  display: none;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(0.72);
}

#bgm-player-shell {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  z-index: 2;
}

#bgm-expand-btn {
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #3b248d;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 15, 101, 0.96) 0%, rgba(18, 7, 48, 0.96) 100%);
  color: #f8fbff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#bgm-expand-btn .bgm-icon {
  width: 14px;
  height: 14px;
}

#bgm-player {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 356px;
  min-width: 356px;
  max-width: calc(100vw - 36px);
  padding: 7px 12px;
  border: 1px solid rgba(76, 41, 161, 0.92);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 16, 96, 0.96) 0%, rgba(13, 8, 34, 0.96) 100%);
  box-shadow:
    0 10px 24px rgba(3, 0, 19, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* -webkit- 프리픽스 필수. 사파리 15 미만은 프리픽스만 인식 */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transform-origin: right center;
  transition:
    width 0.26s cubic-bezier(0.22, 0.78, 0.2, 1),
    min-width 0.26s cubic-bezier(0.22, 0.78, 0.2, 1),
    padding 0.26s cubic-bezier(0.22, 0.78, 0.2, 1),
    opacity 0.22s ease,
    transform 0.26s cubic-bezier(0.22, 0.78, 0.2, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

#bgm-expand-btn,
#bgm-toggle-btn,
#bgm-prev-btn,
#bgm-next-btn,
#bgm-mute-btn {
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#bgm-toggle-btn {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid #3d2694;
  border-radius: 999px;
  background: linear-gradient(180deg, #2c0b77 0%, #180444 100%);
  color: #f8fbff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#bgm-prev-btn,
#bgm-next-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid #35217f;
  border-radius: 999px;
  background: rgba(21, 8, 57, 0.92);
  color: #cfe7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.bgm-icon {
  display: block;
  width: 12px;
  height: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bgm-icon--launcher {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23f8fbff' d='M9.54 1.2a.7.7 0 0 1 .86.68v6.4a2.5 2.5 0 1 1-1.4-2.24V4.03L5.8 4.9v4.5A2.5 2.5 0 1 1 4.4 7.16V3.86c0-.31.2-.58.49-.66z'/%3E%3C/svg%3E");
}

.bgm-icon--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfe7ff' d='M6 2v8L1.5 6zM10.5 2v8L6 6z'/%3E%3C/svg%3E");
}

.bgm-icon--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfe7ff' d='M6 2v8L10.5 6zM1.5 2v8L6 6z'/%3E%3C/svg%3E");
}

.bgm-icon--play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23f8fbff' d='M3 2.2l6 3.8-6 3.8z'/%3E%3C/svg%3E");
}

.bgm-icon--play.is-paused {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23f8fbff' d='M2.5 2h2.2v8H2.5zm4.8 0h2.2v8H7.3z'/%3E%3C/svg%3E");
}

#bgm-toggle-icon {
  width: 14px;
  height: 14px;
}

.bgm-icon--mute {
  width: 20px;
  height: 20px;
  background-position: 48% 50%;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23cfe7ff' d='M8.2 6.1 6.1 8H4.4A1.4 1.4 0 0 0 3 9.4v1.2A1.4 1.4 0 0 0 4.4 12h1.7l2.1 1.9c.45.39 1.15.07 1.15-.52V6.63c0-.59-.7-.9-1.15-.53Zm3.11 1.55a.9.9 0 0 1 1.27 0 3.42 3.42 0 0 1 0 4.84.9.9 0 0 1-1.27-1.28 1.62 1.62 0 0 0 0-2.28.9.9 0 0 1 0-1.28Zm2.12-1.84a.9.9 0 0 1 1.27 0 6 6 0 0 1 0 8.49.9.9 0 1 1-1.27-1.28 4.2 4.2 0 0 0 0-5.93.9.9 0 0 1 0-1.28Z'/%3E%3C/svg%3E");
}

.bgm-icon--mute.is-muted {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23cfe7ff' d='M8.2 6.1 6.1 8H4.4A1.4 1.4 0 0 0 3 9.4v1.2A1.4 1.4 0 0 0 4.4 12h1.7l2.1 1.9c.45.39 1.15.07 1.15-.52V6.63c0-.59-.7-.9-1.15-.53Z'/%3E%3Cpath fill='%23ff7b98' d='m12.5 7.1 1.05-1.04 1.45 1.45 1.45-1.45 1.04 1.04-1.45 1.45 1.45 1.46-1.04 1.04L15 9.61l-1.45 1.45-1.05-1.04 1.46-1.46z'/%3E%3C/svg%3E");
}

#bgm-track-label {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #f7f9ff;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#bgm-mute-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  flex: 0 0 auto;
  border: 1px solid #35217f;
  border-radius: 999px;
  background: rgba(21, 8, 57, 0.92);
  color: #cfe7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
}

#bgm-volume-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

#bgm-volume-slider {
  width: 64px;
  height: 18px;
  background: transparent;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#bgm-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(136, 108, 220, 0.92) 0%, rgba(230, 236, 255, 0.96) 100%);
}

#bgm-volume-slider::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 1px solid rgba(188, 197, 255, 0.9);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(8, 4, 33, 0.28);
  -webkit-appearance: none;
  appearance: none;
}

#bgm-volume-slider::-moz-range-track {
  height: 4px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(136, 108, 220, 0.92) 0%, rgba(230, 236, 255, 0.96) 100%);
}

#bgm-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(188, 197, 255, 0.9);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(8, 4, 33, 0.28);
}

#bgm-toggle-btn.is-muted {
  opacity: 0.7;
}

#bgm-toggle-btn.is-active {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

#bgm-mute-btn.is-muted {
  opacity: 0.72;
}

.preset-btn:focus,
.preset-btn:focus-visible,
#screenshot-btn:focus,
#screenshot-btn:focus-visible,
#info-center-btn:focus,
#info-center-btn:focus-visible,
#legal-btn:focus,
#legal-btn:focus-visible,
#bgm-toggle-btn:focus,
#bgm-toggle-btn:focus-visible,
#bgm-prev-btn:focus,
#bgm-prev-btn:focus-visible,
#bgm-next-btn:focus,
#bgm-next-btn:focus-visible,
#bgm-mute-btn:focus,
#bgm-mute-btn:focus-visible,
#bgm-volume-slider:focus,
#bgm-volume-slider:focus-visible {
  outline: none;
  box-shadow: none;
}

#info-center-btn.visible {
  display: flex;
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
}

#info-center-btn.receiving {
  opacity: 0.22;
  transform: translateY(0) scale(0.8);
  filter: brightness(1.12) drop-shadow(0 0 16px rgba(126, 202, 255, 0.32));
}

#info-center-btn.revealing {
  animation: infoHudReveal 0.22s cubic-bezier(0.16, 0.92, 0.24, 1);
}

.preset-btn--desktop-only {
  display: flex;
}

@media (max-width: 860px) {
  #mv-onboarding-nudge {
    padding: 0 20px calc(100px + var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0));
  }

  .mv-onboarding-nudge__gradient {
    height: clamp(190px, 34vh, 300px);
  }

  .mv-onboarding-nudge__text {
    max-width: calc(100vw - 40px);
    font-size: clamp(22px, 5.2vw, 36px);
  }

  #lobby-hud {
    gap: 12px;
    padding: 12px 14px;
  }

  #hud-presets {
    gap: 18px;
  }

  .preset-btn--desktop-only {
    display: none;
  }

  .preset-btn,
  #screenshot-btn,
  #info-center-btn,
  #legal-btn {
    width: 56px;
    height: 56px;
    gap: 6px;
  }

  #bgm-player-shell {
    top: auto;
    right: 12px;
    bottom: calc(100% + 10px);
    transform: none;
    flex-direction: row-reverse;
  }

  #bgm-player {
    width: 300px;
    min-width: 0;
    max-width: calc(100vw - 24px);
    padding: 6px 10px;
    gap: 8px;
  }

  #bgm-expand-btn {
    display: inline-flex;
  }

  #bgm-toggle-btn {
    width: 34px;
    height: 34px;
  }

  #bgm-track-label {
    font-size: 10px;
    letter-spacing: 0.55px;
  }

  #bgm-volume-slider {
    width: 44px;
  }

  .preset-icon {
    font-size: 20px;
  }

  .legal-icon-dots {
    height: 20px;
    gap: 3px;
  }

  .legal-icon-dots i {
    width: 5px;
    height: 5px;
  }

  .preset-label {
    font-size: 9px;
  }

  #bgm-player-shell.is-collapsed #bgm-player {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    transform: translateX(16px) scale(0.96);
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  #bgm-player-shell.is-collapsed #bgm-player > * {
    opacity: 0;
  }
}

@media (max-width: 520px) {
  #bgm-player-shell {
    right: 10px;
    gap: 6px;
  }

  #bgm-player {
    width: min(248px, calc(100vw - 84px));
    max-width: calc(100vw - 84px);
    padding: 6px 8px;
    gap: 6px;
  }

  #bgm-toggle-btn {
    width: 32px;
    height: 32px;
  }

  #bgm-prev-btn,
  #bgm-next-btn,
  #bgm-mute-btn {
    width: 24px;
    height: 24px;
  }

  #bgm-track-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }

  #bgm-volume-wrap {
    display: none;
  }
}

@media (max-width: 440px) {
  #bgm-player {
    width: min(232px, calc(100vw - 78px));
    max-width: calc(100vw - 78px);
  }

  #bgm-track-label {
    font-size: 8px;
    letter-spacing: 0.2px;
  }
}

body.has-channel-gnb:not(.mv-compact-landscape) > .gnb {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

body.has-channel-gnb:not(.mv-compact-landscape) > .gnb .gnb-logo,
body.has-channel-gnb:not(.mv-compact-landscape) > .gnb .gnb-actions,
body.has-channel-gnb:not(.mv-compact-landscape) > .gnb .btn-play-now {
  visibility: visible;
  opacity: 1;
}

body:not(.mv-compact-landscape) #compact-hud-logo {
  display: none;
}

body.has-channel-gnb.mv-compact-landscape {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "game";
}

body.has-channel-gnb.mv-compact-landscape > .gnb {
  display: none !important;
}

body.mv-compact-landscape #compact-hud-logo {
  display: block;
}

/*
 * 가로모드 HUD — 좌측 1열 패널. top 82px 은 #compact-hud-logo 를 피한 값
 * 넘치는 내용은 안쪽 #hud-scroll 에서 스크롤
 *
 * #lobby-hud 에 overflow 금지 — WebKit 이 position:fixed 자식까지 잘라내 BGM 이 사라짐
 * (레이아웃 위치는 정상이라 rect 검사로는 안 잡힘)
 */
/*
 * 가로모드에선 띠가 반드시 한 줄이어야 함
 * 두 줄이 되면 아래 HUD · BGM 오프셋(--mv-disclaimer-h 기준)이 어긋나 겹침
 */
body.mv-compact-landscape .lobby-disclaimer__line {
  font-size: clamp(9px, 1.4vw, 11px);
}

/* 가로모드에선 HUD 가 fixed 라 면책 문구 띠 높이만큼 바닥에서 띄워야 안 겹침 */
body.mv-compact-landscape #lobby-hud {
  position: fixed;
  top: 82px;
  left: 12px;
  bottom: calc(12px + var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0px));
  width: 84px;
  padding: 12px 10px;
  border: 1px solid #230070;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

/* 스크롤은 이 래퍼에만. BGM 은 래퍼 밖의 형제 */
body.mv-compact-landscape #hud-scroll {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  flex-direction: column;
  /* center 금지 — 넘칠 때 위쪽이 스크롤로 닿지 않음 */
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 부모 #lobby-hud 가 none 이라 여기서 auto 로 켜야 드래그 스크롤 동작 */
  pointer-events: auto;
  touch-action: pan-y;
}

/* 좌측 패딩은 HUD 회피용. left 12px + width 84px + 여유 18px */
body.mv-compact-landscape #mv-onboarding-nudge {
  padding: 0 20px calc(34px + var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0px)) 114px;
}

body.mv-compact-landscape .mv-onboarding-nudge__gradient {
  height: clamp(180px, 32vh, 250px);
}

body.mv-compact-landscape .mv-onboarding-nudge__text {
  max-width: calc(100vw - 150px);
  font-size: clamp(20px, 3.6vw, 32px);
}

body.mv-compact-landscape #hud-presets {
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

body.mv-compact-landscape #screenshot-btn,
body.mv-compact-landscape #info-center-btn,
body.mv-compact-landscape #legal-btn {
  flex-shrink: 0;
}

body.mv-compact-landscape #bgm-player-shell {
  position: fixed;
  top: auto;
  right: 16px;
  bottom: calc(16px + var(--mv-disclaimer-h) + env(safe-area-inset-bottom, 0px));
  transform: none;
  z-index: 98;
  flex-direction: row-reverse;
}

body.mv-compact-landscape #bgm-player {
  width: 228px;
  min-width: 0;
  max-width: calc(100vw - 108px);
}

body.mv-compact-landscape #bgm-expand-btn {
  display: inline-flex;
}

body.mv-compact-landscape #bgm-player-shell.is-collapsed #bgm-player {
  width: 0;
  min-width: 0;
  padding: 0;
  opacity: 0;
  transform: translateX(16px) scale(0.96);
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.info-center-fly-icon {
  position: fixed;
  z-index: 360;
  pointer-events: none;
  transform-origin: center center;
  object-fit: contain;
  transition:
    left 1.35s cubic-bezier(0.12, 0.88, 0.22, 1),
    top 1.35s cubic-bezier(0.12, 0.88, 0.22, 1),
    width 1.35s cubic-bezier(0.12, 0.88, 0.22, 1),
    height 1.35s cubic-bezier(0.12, 0.88, 0.22, 1),
    opacity 0.50s ease-in,
    transform 1.35s cubic-bezier(0.12, 0.88, 0.22, 1),
    filter 1.35s ease-in;
  will-change: left, top, width, height, opacity, transform, filter;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.34));
}

@keyframes infoHudReveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.62);
    filter: blur(1px);
  }
  58% {
    opacity: 1;
    transform: translateY(-1px) scale(1.12);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* ───── 시즌 이벤트 배너 ───── */
#season-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
  z-index: 95;
  pointer-events: none;
  user-select: none;
}

#season-banner.active {
  display: block;
}

body.has-channel-gnb #season-banner.active {
  top: var(--sec-gnb-h, 68px);
}

/* ───── 토스트 알림 ───── */
.lobby-toast {
  position: fixed;
  /* HUD 와의 간격을 유지하려면 면책 문구 띠만큼 같이 올려야 함 */
  bottom: calc(80px + var(--mv-disclaimer-h));
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(26, 26, 46, 0.95);
  color: #cccccc;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
}

.lobby-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1180px) {
  body.mv-compact-landscape #bgm-player-shell:not(.is-collapsed) #bgm-player {
    width: 360px;
    max-width: calc(100vw - 96px);
  }
}

@media (max-width: 860px) {
  body.mv-compact-landscape #bgm-player-shell:not(.is-collapsed) #bgm-player {
    width: 270px;
    max-width: calc(100vw - 84px);
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  #lobby-hud {
    gap: 30px;
  }
}

@media (max-width: 860px) {
  #lobby-hud {
    gap: 18px;
  }
}

/* ?noblur 진단 스위치 — main.js 가 html 에 mv-no-blur 를 붙임 */
html.mv-no-blur #bgm-player {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}