/*
 * 확인·설정 팝업 공통 (SET-001 / 로그아웃 확인 / 홈으로 확인 / 관리자 인증)
 *
 * 크기 잡는 법 (2026-09-09 수정)
 *   예전에는 상자와 내부 요소를 목업 px 그대로 박아 두어, 화면이 커져도 팝업만
 *   420px 로 남아 아주 작게 보였다(발주처 지적). 이제 뱃지·등급 팝업(badge-grade.css)
 *   과 같은 방식으로 화면을 따라 커진다.
 *     --dlg-frame  목업 프레임(680x512)이 화면에서 차지하는 너비
 *     상자 너비    프레임 너비 x (목업 상자 너비 / 680)
 *     내부 좌표    상자 기준 %, 글자 크기는 cqw (상자 너비의 1%)
 *   그래서 아래 주석의 px 는 전부 목업 프레임(680x512) 기준 원본 값이고,
 *   옆에 적힌 % 는 그것을 각 상자 크기로 나눈 값이다.
 */

.dlg-back {
  font-family: var(--font-game);
  position: absolute; inset: 0;
  background: rgba(42, 35, 32, .30);
  display: flex; align-items: center; justify-content: center;
  z-index: 30;
  /* 목업 프레임 너비. 뱃지 팝업(.bg-pop)과 같은 식이라 두 팝업의 크기 감각이 맞는다. */
  --dlg-frame: min(90vw, calc(88vh * 680 / 512));
}

.dlg {
  color: var(--gs-text);
  position: relative;
  container-type: inline-size;   /* 안쪽 글자 크기(cqw)의 기준 */
  background: linear-gradient(145deg, #ffffffd9, #ffffffe8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--gs-line);
  border-radius: 14px;
  background: #faf7f5cc;
  box-shadow: 0 10px 28px rgba(42,35,32,.07);
}
.dlg > * { position: absolute; }

.dlg__title {
  display: flex; align-items: center; justify-content: center;
  font-size: 5cqw; letter-spacing: -.02em;          /* 21px / 420 */
}
.dlg__body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.4cqw;
  text-align: center;
  font-size: 3.33cqw; line-height: 1.45; letter-spacing: -.02em;   /* 14px / 420 */
}
/* 화면기획서: 부가 설명 문구 글자색 회색 */
.dlg__note { color: var(--gs-muted); font-size: 2.86cqw; }         /* 12px / 420 */

.dlg__btn {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d3c8c1;
  border-radius: 2.4cqw;
  background: #f0ebe7;
  color: var(--gs-text);
  font-family: inherit; font-weight: bold; font-size: 3.57cqw;     /* 15px / 420 */
  cursor: pointer;
  box-shadow: none;
}
.dlg__btn:hover { background: #faf7f5cc; }
.dlg__btn:focus-visible { outline: 3px solid var(--c-ui-blue-dark); outline-offset: 2px; }
.dlg__btn:active { transform: translateY(2px); box-shadow: none; }
/* primary */
.dlg__btn--primary {
  background: linear-gradient(135deg,#e9002d,#ff7a01);
  color: #ffffff;
  text-shadow: none;
}
.dlg__btn--primary:hover { background: linear-gradient(135deg,#c00026,#e06a00); }
.dlg__btn--danger {
  background: linear-gradient(135deg,#c00026,#e9002d);
  color: #ffffff;
}
.dlg__btn--danger:hover { background: #e9002d; }

/* SET-001 환경설정 : 상자 mockup w=420 h=309 */
.dlg--set { width: calc(var(--dlg-frame) * 420 / 680); aspect-ratio: 420 / 309; }
/* x=510 y=64 w=40 h=48 : 상자 오른쪽 위 모서리에 걸침 */
.dlg--set .dlg__close {
  right: 0; top: -1.29%; width: 9.52%; height: 15.53%;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  font-family: inherit; font-size: 6.19cqw; font-weight: bold;     /* 26px / 420 */
  color: var(--gs-text);
  cursor: pointer;
}
/* x=158 y=96 w=364 h=34 */
.dlg--set .dlg__title { left: 6.67%; top: 9.06%; width: 86.67%; height: 11%; }
/* 배경음 x=166 y=176 / 효과음 x=166 y=232 (w=160 h=28) */
.dlg__label {
  left: 8.57%; width: 38.1%; height: 9.06%;
  display: flex; align-items: center;
  font-size: 3.81cqw;                                              /* 16px / 420 */
}
/* 음량 바를 넣느라 글자 칸을 줄였다(원래 38.1%). '배경음' 세 글자에는 넉넉하다. */
.dlg__label { width: 20%; }
.dlg__label--bgm { top: 34.95%; }
.dlg__label--sfx { top: 53.07%; }

/* 음량 바 (사용자 지시 2026-09-17: on/off 버튼 옆에서 조절, 음량만큼 색이 칠해진다).
   자리는 글자와 토글 사이. 토글 위치는 그대로 둔다. */
.dlg__vol {
  left: 30.95%; width: 31.43%; height: 9.06%;
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.dlg__vol--bgm { top: 34.3%; }
.dlg__vol--sfx { top: 52.43%; }
.dlg__vol::-webkit-slider-runnable-track {
  height: 1.9cqw; border-radius: 999px;                            /* 8px / 420 */
  background:
    linear-gradient(135deg,#e9002d,#ff7a01) left center / var(--p, 100%) 100% no-repeat,
    #ece7e2;
}
.dlg__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4.05cqw; height: 4.05cqw; border-radius: 50%;             /* 17px / 420 */
  margin-top: calc((1.9cqw - 4.05cqw) / 2);                        /* 트랙 가운데 */
  background: #ffffff; border: 0.48cqw solid #e9002d;              /* 2px / 420 */
  box-shadow: 0 1px 3px rgba(42,35,32,.25);
}
.dlg__vol:focus-visible { outline: 3px solid var(--c-ui-blue-dark); outline-offset: 2px; }
/* 꺼져 있을 때는 회색. 끄고도 음량을 미리 맞춰 둘 수 있게 조절은 막지 않는다. */
.dlg__vol--off::-webkit-slider-runnable-track {
  background:
    linear-gradient(#c8c2bc,#c8c2bc) left center / var(--p, 100%) 100% no-repeat,
    #ece7e2;
}
.dlg__vol--off::-webkit-slider-thumb { border-color: #c8c2bc; }
/* 토글 x=400 y=179 / y=235 (w=104 h=24) */
.dlg__toggle {
  left: 64.29%; width: 24.76%; height: 9.06%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gs-line);
  border-radius: 999px;
  font-family: inherit; font-weight: bold; font-size: 3.33cqw;     /* 14px / 420 */
  cursor: pointer;
  box-shadow: none;
}
.dlg__toggle--bgm { top: 34.3%; }
.dlg__toggle--sfx { top: 52.43%; }
.dlg__toggle--on { background: linear-gradient(135deg,#e9002d,#ff7a01); color: #ffffff; }
.dlg__toggle--off { background: #f0ebe7; color: var(--gs-muted); }
.dlg__toggle:active { transform: translateY(2px); box-shadow: none; }
/* 적용 / 로그아웃.
   발주처 요청 2026-09-08 슬라이드 9: 제목 위 여백과 버튼 아래 여백을 같게 한다.
   상자 309 · 제목 top 28 → 버튼 아래도 28 이 되도록 top 을 247 로 올렸다(247+34+28=309). */
.dlg--set .dlg__apply  { left: 19.76%; top: 79.94%; width: 30%; height: 11%; }
.dlg--set .dlg__logout { left: 52.38%; top: 79.94%; width: 30%; height: 11%;
                         background: #f0ebe7; color: var(--gs-text); }

/* 로그아웃 확인 : 상자 mockup w=412 h=290
   버튼 아래 여백을 제목 위 여백(32)과 같게 맞췄다(220+38+32=290). */
.dlg--logout { width: calc(var(--dlg-frame) * 412 / 680); aspect-ratio: 412 / 290; }
.dlg--logout .dlg__title  { left: 6.31%;  top: 11.03%; width: 87.38%; height: 13.1%; }
.dlg--logout .dlg__body   { left: 8.25%;  top: 28.97%; width: 83.5%;  height: 33.1%; }
.dlg--logout .dlg__cancel { left: 13.59%; top: 75.86%; width: 34.95%; height: 13.1%; }
.dlg--logout .dlg__ok     { left: 52.43%; top: 75.86%; width: 34.95%; height: 13.1%; }

/* 홈으로 확인 · 관리자 인증 : 상자 mockup w=422 h=286
   버튼 아래 여백을 제목 위 여백(32)과 같게 맞췄다(216+38+32=286). */
.dlg--home { width: calc(var(--dlg-frame) * 422 / 680); aspect-ratio: 422 / 286; }
.dlg--home .dlg__title  { left: 6.64%;  top: 11.19%; width: 86.73%; height: 14.69%; }
.dlg--home .dlg__body   { left: 9%;     top: 30.77%; width: 81.99%; height: 32.87%; }
.dlg--home .dlg__cancel { left: 16.11%; top: 75.52%; width: 31.75%; height: 13.29%; }
.dlg--home .dlg__ok     { left: 51.66%; top: 75.52%; width: 31.75%; height: 13.29%; }


/* ── RESULT-002 신규 뱃지 / GRADE-002 등급 상승 안내 팝업 ── */
/* 높이는 내용만큼. 폭만 다른 팝업과 같은 비율로 잡는다.
   여백·간격에 cqw 를 쓰지 않는 이유: .dlg 자신이 컨테이너라, 자기 속성에 쓴 cqw 는
   자기 너비가 아니라 바깥 컨테이너(여기서는 화면) 기준으로 풀려 엉뚱하게 커진다.
   그래서 상자 너비를 --w 로 두고 직접 곱한다. */
.dlg--notice {
  --w: calc(var(--dlg-frame) * 420 / 680);
  width: var(--w);
  padding: calc(var(--w) * .0619) calc(var(--w) * .0667) calc(var(--w) * .0524);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--w) * .0286);
  text-align: center;
}
.dlg--notice > * { position: static; }
.dlg__notice-title { font-size: 5cqw; color: var(--gs-text); }              /* 21px / 420 */
.dlg__notice-highlight {
  font-size: 4.05cqw; font-weight: bold; color: var(--gs-cyan-soft);        /* 17px / 420 */
  line-height: 1.5;
}
.dlg__notice-badges {
  display: flex; flex-wrap: wrap; gap: 1.9cqw; justify-content: center;
}
.dlg__notice-badge {
  display: flex; align-items: center; gap: 1.43cqw;
  border: 1px solid var(--gs-line); border-radius: 999px;
  background: #fff3e8; border-color: #ffc99a; color: #c05600;
  padding: 1.19cqw 2.86cqw; font-size: 3.1cqw; font-weight: bold;           /* 13px / 420 */
}
.dlg__notice-desc { font-size: 3.1cqw; color: var(--gs-muted); line-height: 1.4; }
.dlg__notice-actions { display: flex; gap: 2.38cqw; margin-top: 1.43cqw; }
.dlg__notice-actions .dlg__btn { min-width: 26.19cqw; padding: 2.14cqw 0; }


/* 신규 뱃지 안내 팝업의 낱장 아이콘.
   원본 그림이 512px 짜리 세밀한 일러스트라 26px 로 줄이면 형체를 알아볼 수 없다
   (발주처 지적 2026-09-09: "이미지가 깨져 보임"). 알아볼 수 있는 크기로 키운다. */
.dlg__notice-sprite {
  display: inline-block; width: 7cqw; height: 7cqw;
  vertical-align: middle;
}
.dlg__notice-badge { background: transparent; border: 0; padding: .95cqw 2.4cqw; }

/* toggle-transition */
.dlg__toggle { transition: background .18s, color .18s, transform .12s; }
.dlg__toggle:hover { filter: brightness(1.12); }

/* gs-primary-hover: 시안 주버튼 공통 hover */