/* ============================================================
   2020_design — MAXIM GAMES
   Single CSS file · No framework · Vanilla CSS
   ============================================================ */

/* ── 첫 페인트 인증 게이팅 (로그인 깜빡임 방지 / ADR-060 쿠키인증) ──
   <html>.is-authed|is-guest = head 인라인 스크립트가 프로필 마커로 동기 선판정 + renderAuth가 실상태로 갱신.
   renderAuth 실행 전에도 첫 페인트부터 올바른 세트만 노출(반대 세트 숨김). */
html.is-guest  [data-auth="in"]    { display: none !important; }
html.is-authed [data-auth="out"]   { display: none !important; }
html.is-guest  [data-partner-only] { display: none !important; }

/* ── 로컬 폰트 ─────────────────────────────────────────────── */
/* 2026-08-18: TTF → woff2 서브셋 (17.6MB → 3.0MB / 같은 글꼴이라 모양은 동일).
   한글은 완성형 전체(U+AC00-D7A3)를 넣어 닉네임·게임명이 □ 로 깨지지 않게 했다. 한자는 뺐다.
   ★ 가변 축(wght)이 살아 있어야 굵기 구분이 유지된다 — 서브셋 후 5종 전부 fvar 확인함.
   ★ 폰트를 교체할 때는 **파일명을 바꾼다** — handler.go 가 fonts/ 를 1년 immutable 로 준다.
   font-display: swap 유지 = 폰트가 늦게 와도 글자가 먼저 보인다. */
@font-face {
	font-family: 'Pretendard';
	src: url('../fonts/PretendardVariable.woff2') format('woff2');
	font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Oswald';
	src: url('../fonts/Oswald_VariableFont_wght.woff2') format('woff2');
	font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Cinzel';
	src: url('../fonts/Cinzel_VariableFont_wght.woff2') format('woff2');
	font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'NotoSansKR';
	src: url('../fonts/NotoSansKR_VariableFont_wght.woff2') format('woff2');
	font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ── 디자인 토큰 ────────────────────────────────────────────── */
:root {
	/* Surfaces */
	--bg-0: #070810;
	--bg-1: #0d0f1c;
	--bg-2: #141627;
	--bg-3: #1c1e30;
	--bg-4: #23263a;

	/* Brand Gold */
	--gold-0: #ffd700;
	--gold-1: #f5b730;
	--gold-2: #e8c873;
	--gold-soft: rgba(255,215,0,0.15);
	--gold-line: rgba(255,215,0,0.22);

	/* Hero accent palette — colorful but controlled */
	--accent-purple: #7c3aed;
	--accent-blue: #2563eb;
	--accent-teal: #0891b2;
	--hero-grad: linear-gradient(
		135deg,
		#1a0a3d 0%,
		#0f1a4a 30%,
		#0c1f3a 55%,
		#0a1228 80%,
		#080a18 100%
	);
	--hero-glow-purple: radial-gradient(ellipse 60% 50% at 20% 60%, rgba(124,58,237,0.28) 0%, transparent 70%);
	--hero-glow-blue:   radial-gradient(ellipse 50% 45% at 80% 40%, rgba(37,99,235,0.22) 0%, transparent 70%);
	--hero-glow-gold:   radial-gradient(ellipse 40% 30% at 50% 80%, rgba(255,215,0,0.12) 0%, transparent 70%);

	/* Middle bar */
	--bar-bg: rgba(10,12,24,0.96);
	--bar-border: rgba(255,215,0,0.18);
	--bar-h: 78px;

	/* Text */
	--t-0: #ffffff;
	--t-1: rgba(255,255,255,0.88);
	--t-2: rgba(255,255,255,0.65);
	--t-3: rgba(255,255,255,0.40);

	/* Borders */
	--line: rgba(255,255,255,0.08);
	--line-2: rgba(255,255,255,0.14);

	/* Radius */
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--r-pill: 999px;

	/* Transition */
	--t-fast: 0.15s ease;
	--t-base: 0.25s ease;
	--t-slow: 0.4s ease;

	/* Fonts */
	/* ── 로고 · 명판 (운영업체별 조정 대상 / brand.css 에서 덮어씀) ──────────
	   기본값 = 지금까지의 화면 그대로. 명판은 꺼져 있고 심볼이 로고 높이를 다 쓴다. */
	/* 데스크탑 로고 전체 높이.
	   ★ 145 -> 118 (2026-08-28 PM 지시 "조금만 줄여줘").
	     새 엠블럼은 투명 여백을 잘라내 그림이 판을 꽉 채운다. 옛 통짜 로고는 여백이 29% 였다.
	     그래서 같은 145px 에서도 **보이는 크기가 320x145 로, 옛 203x103 보다 훨씬 컸다.**
	     겸사겸사 히어로 문구와의 겹침도 준다 — 로고 아래끝 8+145=153 이 문구 시작(120)을
	     33px 파고들던 것이 6px 로 준다. */
	--logo-h: 118px;
	--hero-copy-top: 120px;                       /* 히어로 문구 위 여백 (로고와 겹침 조정) */
	--logo-glow-1: rgba(186,230,253,0.55);        /* 은색 로고용 하늘색 */
	--logo-glow-2: rgba(56,189,248,0.40);         /* 파랑 */
	--logo-glow-3: rgba(139,92,246,0.22);         /* 보라 */
	/* ── 명판 = 로고 안의 상호 (2026-08-27 / 2020 판 갱신) ─────────────────
	   ★ 종전 기본값은 **꺼짐**이었다. 그래서 2020 로고만 상호가 그림에 구워진 채였고
	     (logo1.png 에 "PANDA"), 사이트명을 바꿔도 데스크탑 로고는 그대로였다.
	     모바일은 텍스트라 설정을 따라가서, 한 화면에서 **두 이름이 보이는** 상태였다.
	   이제 기본 엠블럼도 글자가 없다 — 판 안쪽이 비어 있고 이름은 여기서 그린다.
	   실측(엠블럼 그림 기준): 판 안쪽 x 18.5~81.8% / y 39.9~85.7% / 세로 중심 = 아래에서 37.2%. */
	--plate-on: 1;                                /* 명판 사용 여부 (0 끔 / 1 켬) */
	--plate-h: 0.40;                              /* 로고 높이 대비 명판 높이 */
	--plate-fs: 0.75;                             /* 명판 높이 대비 글자 크기 (0.40*0.75 = 로고의 30%) */
	--plate-overlap: 1;                           /* 판이 엠블럼 **안**에 얹히므로 심볼을 줄이지 않는다 */
	/* 배열 — 기본은 세로(심볼 아래 명판). 가로로 쓰려면 아래 셋을 스킨에서 바꾼다.
	   가로: --plate-pos: static / --plate-tf: none / --mark-h: var(--logo-h) */
	--plate-pos: absolute;
	--plate-tf: translate(-50%, 50%);             /* bottom 기준점을 판의 중심으로 */
	/* 명판의 세로 위치 (2026-08-19). 기본 0 = 심볼 아래에 붙는다 = 종전 그대로.
	   ★ 50% + --plate-tf: translate(-50%,50%) 로 두면 심볼 **한가운데**에 얹힌다.
	     가운데가 빈 배지형 엠블럼(장식이 이름을 감싸는 형태)을 쓰는 스킨용이다 —
	     그 형태라야 상호가 무엇이든 글자만 갈아 끼워 쓸 수 있다. */
	--plate-bottom: 37.2%;                        /* 판 안쪽 세로 중심 (실측) */
	--logo-gap: 0px;                              /* 가로 배열에서 심볼·명판 사이 간격 */
	--mark-h: calc(var(--logo-h) * (1 - var(--plate-on) * var(--plate-h) * (1 - var(--plate-overlap))));
	/* 2020 = 알약을 쓰지 않는다. 판(엠블럼의 남색 면)이 이미 명판 노릇을 하므로
	   그 위에 **은색 큰 글자**만 얹는다 — 종전 통짜 로고의 "PANDA" 가 있던 그 모양이다.
	   ★ 알약이 필요한 스킨은 각자 brand.css 에서 아래 값을 다시 적는다
	     (green·luxury·bangatgan 이 그렇게 한다). */
	--plate-ink: #e8f0fa;                         /* 은색 글자 */
	--plate-edge: transparent;
	--plate-lip: transparent;
	--plate-halo: transparent;
	--plate-grad: none;
	--plate-shadow: none;
	/* 3D 은색 — 아래 면(밝은 회청)과 바닥 그림자 두 겹이 평면을 입체로 만든다. */
	--plate-text-shadow: 0 2px 0 #7089ab, 0 3px 1px #4c5f7a, 0 6px 14px rgba(0,0,0,0.75);

	--font-body: 'Pretendard', 'NotoSansKR', sans-serif;
	--font-display: 'Oswald', 'Cinzel', 'Pretendard', sans-serif;
	--font-num: 'Inter', 'Pretendard', sans-serif;

	/* ── 스킨 팔레트 (2026-08-19) ──────────────────────────────────────
	   흩어져 있던 테마색을 이름표로 모았다. **값은 종전 그대로** —
	   기본 화면은 달라지지 않는다. 스킨은 brand.css 에서 이 값만 덮어쓰면
	   구조를 건드리지 않고 색을 통째로 갈아끼운다.
	   RGB 세 값으로 두는 이유: 같은 색을 투명도만 달리해 쓰는 곳이 많아
	   rgba(var(--x-rgb), .3) 형태로 한 토큰이 전부를 덮는다. */
	--c-sky-1-rgb: 56,189,248;        /* HUD 주 강조 — 테두리·발광·활성 */
	--c-sky-2-rgb: 96,165,250;        /* HUD 보조 파랑 — 링크·아이콘 */
	--c-sky-3-rgb: 147,197,253;       /* 밝은 파랑 — 소제목·보조 글자 */
	--c-sky-4-rgb: 186,230,253;       /* 연한 하늘 — 하이라이트 */
	--c-sky-5-rgb: 125,211,252;       /* 하늘 중간 */
	--c-sky-6-rgb: 59,130,246;        /* 진한 파랑 — 버튼·강조면 */
	--c-sky-7-rgb: 191,219,254;       /* 연파랑 보조 */
	--c-sky-8-rgb: 180,210,255;       /* 커스텀 연파랑 */
	--c-sky-9-rgb: 120,150,255;       /* 커스텀 중파랑 */
	--c-sky-10-rgb: 70,100,180;        /* 커스텀 짙은 파랑 */
	--c-cyan-1-rgb: 34,211,238;        /* 시안 — 포인트 */
	--c-cyan-2-rgb: 165,243,252;       /* 연시안 */
	--c-violet-1-rgb: 139,92,246;        /* 보라 주색 */
	--c-violet-2-rgb: 167,139,250;       /* 보라 밝은 */
	--c-violet-3-rgb: 168,85,247;        /* 보라 진한 */
	--c-violet-4-rgb: 196,181,253;       /* 보라 연한 */
	--c-violet-5-rgb: 109,40,217;        /* 보라 딥 */
	--c-violet-6-rgb: 76,29,149;         /* 보라 딥2 */
	--c-violet-7-rgb: 59,7,100;          /* 보라 배경 */
	--c-violet-8-rgb: 42,8,70;           /* 보라 배경2 */
	--c-violet-9-rgb: 28,5,47;           /* 보라 배경3 */
	--c-gold-a-rgb: 255,215,0;         /* 금색 주색 */
	--c-gold-b-rgb: 245,158,11;        /* 호박색 */
	--c-gold-c-rgb: 252,211,77;        /* 밝은 금 */
	--c-gold-d-rgb: 212,165,68;        /* 차분한 금 */
	--c-deep-1-rgb: 8,12,30;           /* 딥 배경 — 패널 */
	--c-deep-2-rgb: 0,5,20;            /* 딥 배경 — 바닥 */
	--c-deep-3-rgb: 15,20,42;          /* 딥 배경 — 카드 */
	--c-deep-4-rgb: 18,24,50;          /* 딥 배경 — 카드2 */
	--c-deep-5-rgb: 6,9,25;            /* 딥 배경 — 그늘 */
	--c-deep-6-rgb: 3,5,15;            /* 딥 배경 — 최심부 */
	--c-deep-7-rgb: 0,2,10;            /* 딥 배경 — 최심부2 */
	--c-deep-8-rgb: 10,14,35;          /* 딥 배경 — 중간 */
	--c-deep-9-rgb: 20,30,60;          /* 딥 배경 — 밝은쪽 */
	--c-navy-1-rgb: 30,58,138;         /* 네이비 — 배지 */

	/* ── 스킨 팔레트 · 잔여 남색군 (2026-08-19) ────────────────────────
	   위 팔레트가 못 덮은 자잘한 남색·보라 변형이다. 한 곳에 1~3번씩 쓰여
	   묶을 수 없고, 값을 합치면 화면이 달라지므로 1:1 로 둔다.
	   스킨 색표는 손으로 적지 않고 hue 변환으로 생성한다 (tools 는 작업 기록 참조). */
	--c-nv-01-rgb: 2,6,18;	/* L0.04 1 uses */
	--c-nv-02-rgb: 5,8,16;	/* L0.04 1 uses */
	--c-nv-03-rgb: 7,8,16;	/* L0.05 2 uses */
	--c-nv-04-rgb: 0,5,25;	/* L0.05 1 uses */
	--c-nv-05-rgb: 6,8,22;	/* L0.05 1 uses */
	--c-nv-06-rgb: 0,8,30;	/* L0.06 1 uses */
	--c-nv-07-rgb: 6,10,26;	/* L0.06 2 uses */
	--c-nv-08-rgb: 8,11,24;	/* L0.06 1 uses */
	--c-nv-09-rgb: 16,1,32;	/* L0.06 2 uses */
	--c-nv-10-rgb: 10,12,28;	/* L0.07 1 uses */
	--c-nv-11-rgb: 6,12,32;	/* L0.07 1 uses */
	--c-nv-12-rgb: 20,0,40;	/* L0.08 1 uses */
	--c-nv-13-rgb: 15,0,40;	/* L0.08 2 uses */
	--c-nv-14-rgb: 10,14,31;	/* L0.08 1 uses */
	--c-nv-15-rgb: 10,14,32;	/* L0.08 1 uses */
	--c-nv-16-rgb: 10,15,35;	/* L0.09 2 uses */
	--c-nv-17-rgb: 8,16,40;	/* L0.09 1 uses */
	--c-nv-18-rgb: 12,18,38;	/* L0.10 2 uses */
	--c-nv-19-rgb: 10,21,48;	/* L0.11 2 uses */
	--c-nv-20-rgb: 8,20,50;	/* L0.11 1 uses */
	--c-nv-21-rgb: 12,22,55;	/* L0.13 1 uses */
	--c-nv-22-rgb: 12,26,58;	/* L0.14 1 uses */
	--c-nv-23-rgb: 30,15,60;	/* L0.15 1 uses */
	--c-nv-24-rgb: 15,26,61;	/* L0.15 3 uses */
	--c-nv-25-rgb: 34,42,72;	/* L0.21 1 uses */
	--c-nv-26-rgb: 23,37,84;	/* L0.21 2 uses */
	--c-nv-27-rgb: 20,40,90;	/* L0.22 1 uses */
	--c-nv-28-rgb: 30,42,84;	/* L0.22 1 uses */
	--c-nv-29-rgb: 25,40,90;	/* L0.23 1 uses */
	--c-nv-30-rgb: 40,55,100;	/* L0.27 1 uses */
	--c-nv-31-rgb: 7,89,133;	/* L0.27 1 uses */
	--c-nv-32-rgb: 25,55,130;	/* L0.30 1 uses */
	--c-nv-33-rgb: 14,116,144;	/* L0.31 2 uses */
	--c-nv-34-rgb: 30,55,130;	/* L0.31 1 uses */
	--c-nv-35-rgb: 76,29,149;	/* L0.35 2 uses */
	--c-nv-36-rgb: 35,75,150;	/* L0.36 1 uses */
	--c-nv-37-rgb: 107,33,168;	/* L0.39 1 uses */
	--c-nv-38-rgb: 37,72,168;	/* L0.40 1 uses */
	--c-nv-39-rgb: 30,64,175;	/* L0.40 1 uses */
	--c-nv-40-rgb: 91,33,182;	/* L0.42 1 uses */
	--c-nv-41-rgb: 45,80,170;	/* L0.42 1 uses */
	--c-nv-42-rgb: 100,116,139;	/* L0.47 2 uses */
	--c-nv-43-rgb: 124,58,237;	/* L0.58 2 uses */
	--c-nv-44-rgb: 90,130,220;	/* L0.61 1 uses */
	--c-nv-45-rgb: 148,163,184;	/* L0.65 14 uses */
	--c-nv-46-rgb: 99,179,237;	/* L0.66 2 uses */
	--c-nv-47-rgb: 159,179,208;	/* L0.72 2 uses */
	--c-nv-48-rgb: 192,132,252;	/* L0.75 2 uses */
	--c-nv-49-rgb: 148,163,255;	/* L0.79 2 uses */
	--c-nv-50-rgb: 203,213,225;	/* L0.84 16 uses */
	--c-nv-51-rgb: 216,180,254;	/* L0.85 4 uses */
	--c-nv-52-rgb: 191,219,255;	/* L0.87 2 uses */
	--c-nv-53-rgb: 219,229,245;	/* L0.91 1 uses */
	--c-nv-54-rgb: 226,232,240;	/* L0.91 1 uses */
	--c-nv-55-rgb: 233,213,255;	/* L0.92 1 uses */
	--c-nv-56-rgb: 234,242,255;	/* L0.96 1 uses */
	--c-nv-57-rgb: 241,245,249;	/* L0.96 6 uses */
	--c-nv-58-rgb: 239,246,255;	/* L0.97 1 uses */
	--c-nv-59-rgb: 245,243,255;	/* L0.98 1 uses */
	--c-nv-60-rgb: 248,250,252;	/* L0.98 4 uses */
	--c-nv-61-rgb: 250,245,255;	/* L0.98 1 uses */
}

/* ── 리셋 & 베이스 ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
	font-family: var(--font-body);
	background: var(--bg-0);
	color: var(--t-1);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
/* ── 공지 본문 (2026-08-29) — 유저웹·파트너웹·어드민 미리보기 **같은 값** ────────────
   왜 고정색인가: 유저웹은 다크(#070810 계열 4스킨), 파트너웹은 라이트(#ffffff)가 기본이라
   배경 밝기가 정반대다. 관리자가 흰 배경에서 고른 진한 글자색은 유저웹에서 안 보이고 그 반대도
   마찬가지여서, 어떤 색을 골라도 한쪽이 깨졌다. 본문 영역만 테마·스킨과 무관하게 못박아
   **미리보기에서 본 그대로** 양쪽에 나가게 한다.
   ★ 색을 바꾸려면 아래 두 변수만 고친다. 세 파일 값이 같아야 한다. */
.notice-body {
  --notice-body-bg: #0f1420;   /* 짙은 남색 — 스킨 배경(#05~#07대)보다 한 단 밝다 */
  --notice-body-fg: #e8ecf4;   /* 대비 약 15:1 (WCAG AAA 7:1 상회) */
  background: var(--notice-body-bg);
  color: var(--notice-body-fg);
  padding: 14px 16px;
  border-radius: 8px;
}
/* 이벤트 상세 본문 = 이벤트 화면 디자인(썸네일·배너와 어울리는 레이아웃)을 유지한다 →
   notice-body 의 카드 장식(배경·여백)만 끄고 목록 마커 등 서식은 그대로 받는다.
   ★ 이벤트는 유저웹에만 있어 파트너웹과 비교할 대상이 없다 = 배경 통일은 불필요하고,
     전역 리셋에 지워지던 **글머리표·번호만** 되살리면 된다. */
.m-event-body.notice-body { background: transparent; color: inherit; padding: 0; border-radius: 0; }

/* 팝업 본문은 팝업 자체 디자인(가운데 정렬·이미지 위 오버레이)을 쓴다 →
   notice-body 의 카드 장식(배경·여백)만 끄고 목록 마커 등 서식은 그대로 받는다. */
.popup-body.notice-body { background: transparent; color: inherit; padding: 0; border-radius: 0; }

/* 에디터 서식 복원 — 유저웹 전역 리셋(ul, ol { list-style:none })이 번호·불릿을 지운다.
   전역 리셋은 메뉴·탭 수십 곳이 의존하므로 건드리지 않고, 본문 안에서만 되살린다.

   ★ 컨테이너(ol/ul)가 아니라 **항목(li)** 에 마커를 준다 (2026-08-29 정정):
     Quill 2.0 은 글머리표·번호매김을 **둘 다 <ol> 로 저장**하고 li[data-list] 로만 구분한다
     (sanitize 정책이 data-list='ordered|bullet' 을 허용하는 이유가 이것이다).
     그래서 ol 에 decimal 을 걸면 **글머리표로 쓴 공지가 번호로 나온다** — 실제로 그랬다.
   ★ data-list 가 없는 목록(수기 HTML·과거 저장분)도 살린다. */
.notice-body ol,
.notice-body ul { padding-left: 1.6em; margin: 8px 0; }
.notice-body li { margin: 4px 0; }
.notice-body li[data-list="bullet"]   { list-style-type: disc; }
.notice-body li[data-list="ordered"]  { list-style-type: decimal; }
.notice-body ul > li:not([data-list]) { list-style-type: disc; }
.notice-body ol > li:not([data-list]) { list-style-type: decimal; }
/* ★★ 글자 크기·정렬이 **회원 화면에 전혀 안 먹던 자리** (2026-09-12 PM 스모크).

   Quill 은 크기·정렬을 **class** 로 저장한다(`ql-size-huge`·`ql-align-center`).
   그 class 의 CSS 는 편집기 자신의 스타일시트에 있는데, 거기 규칙이 전부
   **`.ql-editor` 안쪽으로 한정**돼 있다 — 즉 **관리자 편집기 안에서만** 보인다.
   회원 화면에는 `.ql-editor` 가 없으므로 class 만 남고 **아무 일도 안 일어난다.**

   ★ sanitize 는 처음부터 `class` 를 통과시키고 있었다(「Quill ql-* 클래스」 주석까지 있다).
     그래서 서버·저장은 멀쩡했고 **화면에서만 조용히 사라졌다** — 오류도 로그도 없다.
     공지·이벤트도 같은 편집기를 쓰므로 **그쪽도 여태 안 먹고 있었다**(같이 해소된다).
   ★ 값은 편집기가 쓰는 것과 **같게** 맞춘다(small .75 / large 1.5 / huge 2.5em).
     다르게 주면 관리자가 편집기에서 본 크기와 회원이 보는 크기가 어긋난다.
   ★ 색상은 이미 됐다 — Quill 이 색만은 인라인 style 로 저장하고 sanitize 가 허용한다. */
.notice-body .ql-size-small { font-size: 0.75em; }
.notice-body .ql-size-large { font-size: 1.5em; }
.notice-body .ql-size-huge  { font-size: 2.5em; }
.notice-body .ql-align-center  { text-align: center; }
.notice-body .ql-align-right   { text-align: right; }
.notice-body .ql-align-justify { text-align: justify; }
/* 제목 — 브라우저 기본값은 유저웹 본문에 비해 과하게 크고 여백도 제각각이다. */
.notice-body h1 { font-size: 1.8em; margin: 10px 0 6px; font-weight: 700; }
.notice-body h2 { font-size: 1.45em; margin: 9px 0 5px; font-weight: 700; }
.notice-body h3 { font-size: 1.2em; margin: 8px 0 4px; font-weight: 700; }
/* 문단 — 전역 리셋이 margin 을 지워 줄바꿈이 붙어 보인다. */
.notice-body p { margin: 0 0 6px; }
.notice-body p:last-child { margin-bottom: 0; }
.notice-body a  { text-decoration: underline; }
.notice-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }


/* 스크롤바 */
*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: var(--bg-1); }
*::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: var(--r-pill); }

/* ── 버튼 ───────────────────────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 6px; padding: 11px 22px;
	border-radius: var(--r-sm);
	font-size: 14px; font-weight: 700;
	letter-spacing: 0.04em;
	transition: all var(--t-fast);
	white-space: nowrap;
}
/* 메인 액션 — 바이올렛→퍼플 그래디언트 (더 임팩트 있게) */
.btn-primary {
	background: linear-gradient(135deg, rgb(var(--c-violet-5-rgb)) 0%, rgb(var(--c-violet-1-rgb)) 50%, rgb(var(--c-violet-2-rgb)) 100%);
	color: #fff;
	box-shadow: 0 4px 16px rgba(var(--c-violet-1-rgb), 0.45);
}
.btn-primary:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(var(--c-violet-1-rgb), 0.6); }
/* 서브 — 에메랄드 보더 */
.btn-secondary {
	background: transparent;
	border: 1px solid rgba(16,185,129,0.4);
	color: #34d399;
}
.btn-secondary:hover { background: rgba(16,185,129,0.1); border-color: #10b981; color: #6ee7b7; }
/* Accent — 강조 액션 (정정/리셋 등). 표준 클래스. */
.btn-accent {
	background: linear-gradient(180deg, #f0c560, rgb(var(--c-gold-d-rgb)));
	color: #1a1206;
	border: 1px solid rgba(var(--c-gold-d-rgb), 0.5);
	box-shadow: 0 2px 10px rgba(var(--c-gold-d-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-accent:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ghost {
	background: rgba(255,255,255,0.06);
	color: var(--t-2);
	border: 1px solid var(--line);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--t-0); }
/* 문의·안내 성격의 보조 액션 (2026-09-02) — 충전신청 모달의 「입금계좌 문의」가 첫 자리.
   ★★ 위계: 「충전 신청」(주 액션 · 바이올렛 그래디언트) 아래, 「취소」(무채 ghost) 위.
      그래서 통째로 채우지 않고 **옅은 채움 + 또렷한 테두리**로 둔다 — 주 액션과 겨루지 않으면서
      ghost 처럼 묻히지도 않는 자리다(종전에는 ghost 라 회색으로 묻혀 눌러야 할 것으로 안 보였다).
   ★★ 스킨 계약 — **색을 하드코딩하지 않는다.** 주 강조 토큰(--c-sky-*)만 쓰므로 스킨마다
      그 스킨의 인상색으로 나온다: 기본·방앗간 = 하늘 / green = 에메랄드 / luxury = 금.
      (하드코딩하면 금·와인 스킨에 파란 버튼이 하나 남는다. .btn-secondary 가 그 예다.) */
.btn-inquiry {
	background: linear-gradient(180deg,
		rgba(var(--c-sky-1-rgb), 0.17) 0%,
		rgba(var(--c-sky-1-rgb), 0.07) 100%);
	color: rgb(var(--c-sky-3-rgb));
	border: 1px solid rgba(var(--c-sky-1-rgb), 0.45);
	box-shadow: 0 2px 10px rgba(var(--c-sky-1-rgb), 0.14),
	            inset 0 1px 0 rgba(255,255,255,0.07);
}
.btn-inquiry:hover:not(:disabled) {
	background: linear-gradient(180deg,
		rgba(var(--c-sky-1-rgb), 0.27) 0%,
		rgba(var(--c-sky-1-rgb), 0.13) 100%);
	border-color: rgba(var(--c-sky-1-rgb), 0.78);
	color: rgb(var(--c-sky-4-rgb));
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(var(--c-sky-1-rgb), 0.26),
	            inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn-inquiry:active:not(:disabled) { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,0.28); }
/* 접수 직후 60초 쿨다운(「접수됨」) — 눌린 상태가 **끝난 일**로 보여야 회원이 다시 안 누른다.
   그래서 흐리게만 두지 않고 테두리를 지워 평평하게 만든다. */
.btn-inquiry:disabled {
	background: rgba(var(--c-sky-1-rgb), 0.05);
	border-color: rgba(var(--c-sky-1-rgb), 0.18);
	color: rgba(var(--c-sky-3-rgb), 0.55);
	box-shadow: none;
	cursor: default;
}
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 15px 36px; font-size: 17px; font-weight: 800; letter-spacing: 0.06em; }

/* ── 공용 레이어 ────────────────────────────────────────────── */
.page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
	position: relative;
	min-height: 67vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgb(var(--c-nv-03-rgb));
}
/* ★ 디밍(0.82)을 opacity 에서 떼어냈다 (2026-08-18 / 깜빡임 정정 #2)
   종전: .is-active 가 opacity 0.82. 두 장이 같은 곡선으로 서로 반대로 전환하는데
     알파 합성은 덧셈이 아니라 1-(1-a₁)(1-a₂) 다.
       정상       = 0.82
       전환 중간  = 1-(1-0.41)(1-0.41) = 0.652
     → 5초마다 배경을 덮는 정도가 0.82 → 0.65 로 꺼졌다 돌아온다 = **맥동(깜빡임)**.
     곡선을 바꿔도 안 없어진다 — opacity 하나로 "밝기"와 "페이드"를 겸한 것이 원인이다.
   지금: 페이드는 opacity(0 → 1)가, 디밍은 겹침 레이어(::after)가 맡는다.
     겹치는 두 장이 모두 불투명하므로 전환 내내 덮는 정도가 1로 일정 = 맥동 0.
   ★ 겉보기는 같다 — 종전 `이미지×0.82 + #070810×0.18` 과 스크림 rgba(7,8,16,0.18) 이 같은 식이다. */
.hero-bg-slide {
	position: absolute; inset: -40px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(3px);
	opacity: 0;
	transition: opacity 1.2s ease;
	z-index: 0;
}
.hero-bg-slide.is-active { opacity: 1; }
/* 디밍 스크림 — 원본 그대로 보여주는 --raw 슬라이드는 제외(디밍 해제가 그 슬라이드의 의도다). */
.hero-bg-slide:not(.hero-bg-slide--raw)::after {
	content: '';
	position: absolute; inset: 0;
	background: rgba(var(--c-nv-03-rgb), 0.18);
	pointer-events: none;
}

/* 원본 그대로 표시 — 확대/블러/디밍 모두 해제 + 좌우 끝 페이드아웃 */
.hero-bg-slide--raw {
	inset: 0;
	background: none;
	filter: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.hero-bg-slide--raw img {
	height: 100%;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	display: block;
	transform: translateY(80px);
	/* 좌우 + 상단 가장자리를 부드럽게 페이드 → 배경과 자연스럽게 융합
	   두 그라데이션을 intersect로 합성 → 양쪽 마스크 모두 통과한 영역만 표시 */
	-webkit-mask-image:
		linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
	mask-image:
		linear-gradient(to right,  transparent 0%, #000 14%, #000 86%, transparent 100%),
		linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.hero-bg-slide--raw.is-active { opacity: 1; }


/* 골드 라인 장식 */
/* 사이드 캐릭터 */
@keyframes heroSlideInLeft {
	from { transform: translateX(-120%) translateY(0); opacity: 0; }
	to   { transform: translateX(0)    translateY(0); opacity: 1; }
}
@keyframes heroSlideInRight {
	from { transform: translateX(120%) translateY(0); opacity: 0; }
	to   { transform: translateX(0)    translateY(0); opacity: 1; }
}
@keyframes heroFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-14px); }
}

/* 캐릭터 세트
   ★ 나가는 쪽에 사라지는 과정을 만들었다 (2026-08-18 / 깜빡임 정정 #1 = 가장 큰 원인)
     종전: .hero-char 의 기본값이 opacity:0 이고, 보이게 하는 유일한 수단이
       `.is-active .hero-char--left { animation: heroSlideInLeft … forwards }` 였다.
       즉 **애니메이션이 forwards 로 opacity:1 을 붙들고 있을 뿐**이라,
       JS 가 is-active 를 빼는 순간 애니메이션 선언이 사라지며 계산값이 기본값 0 으로 즉시 복귀한다.
       전환 선언이 없으니 **한 프레임에 없어진다** — 55vh 짜리 캐릭터 2장이 배경은 아직
       1.2초 크로스페이드 중인데 먼저 툭 꺼진다 = 5초마다 눈에 띄는 깜빡임.
     지금: 표시 여부를 **세트**가 opacity 전환으로 쥔다(캐릭터 기본값은 1).
       transform 에도 전환을 둬 heroFloat 중간(최대 14px)에 빠져도 튀지 않고 제자리로 돌아온다. */
.hero-char-set {
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.55s ease;
}
.hero-char-set.is-active { opacity: 1; }
.hero-char {
	position: absolute;
	bottom: 0;
	height: 55vh;
	pointer-events: none;
	opacity: 1;
	/* ★ transform 전환 제거 (2026-08-21) — 아래 heroFloat 이 같은 속성을 계속 움직인다.
	   전환과 애니메이션이 한 속성을 두고 다투면 전환이 끝날 때마다 계산값이 튄다. */
}
.hero-char--left  { left: 2%; }
.hero-char--right { right: 2%; }
.hero-char-set--2 .hero-char { bottom: -40px; }
.hero-char-set--3 .hero-char { height: 27.5vh; bottom: 22%; }

/* 활성 세트: 캐릭터 슬라이드인 + 둥둥 */
/* ★ 채움 방식 both (2026-08-18 정정 / PM 신고: "오브젝트가 잠깐 보인 후 애니메이션이 시작")
   오른쪽 캐릭터에는 **0.15초 지연**이 걸려 있는데 채움이 `forwards` 뿐이었다.
   forwards 는 애니메이션이 **끝난 뒤**만 덮는다 — 지연 구간은 안 덮으므로 그 0.15초 동안
   요소가 **기본 상태**로 그려진다(transform 없음 = 최종 자리 / opacity 1).
   → 캐릭터가 제자리에 먼저 떴다가, 0.15초 뒤 애니메이션이 시작되며 화면 밖으로 던져졌다 들어온다.
   ★ 이건 같은 날 넣은 깜빡임 정정 #1 이 만든 회귀다 — 그전에는 .hero-char 기본값이 opacity:0 이라
     지연 구간에도 안 보였다. 표시 주체를 세트로 옮기면서 기본값을 1 로 올린 것이 드러낸 것이다.
   both = backwards + forwards → 지연 구간에는 `from`(화면 밖·opacity 0)을 적용한다.
   왼쪽은 지연이 0 이라 지금은 무해하지만, 나중에 지연이 붙어도 안전하도록 같이 both 로 둔다. */
/* ★★ is-active 에서 떼어 **항상** 건다 (2026-08-21 / 로고·메뉴·정보바 깜빡임 정본 원인)
   종전에는 이 선언이 `.hero-char-set.is-active` 안에 있었다. 그래서 5초마다 세트가 바뀔 때
   **55vh 짜리 PNG 2장의 애니메이션이 통째로 사라졌다 다시 생겼다.** 브라우저는 그때마다 그
   합성 레이어를 버리고 새로 만드는데, 그 여파로 **주변 요소(로고·메뉴·정보바)가 한 프레임 비어
   보였다.** 새로고침과 무관하게 불규칙적으로 계속되던 증상의 정본이다.

   ★ 진단 실측 (2026-08-21 / 효과를 하나씩 꺼 보며 확인)
       회전만 멈춤       깜빡임 멈춤 → 전환이 없으면 안 생긴다
       캐릭터 애니만 끔  깜빡임 멈춤 → 애니메이션이 없으면 안 생긴다
       배경 블러만 끔    계속 → 배경 블러는 무관
       로고 글로우만 끔  계속 → 로고 글로우도 무관
     둘 중 하나만 꺼도 멈춘다 = 둘이 만나는 지점(세트 전환 순간)이 원인.

   지금은 애니메이션이 붙었다 떨어지지 않는다 — 세트 전환은 `opacity` 크로스페이드만 한다.
   숨은 세트에서도 애니메이션은 돌지만 transform 단독이라 합성 스레드에서 처리된다(재래스터화 0).
   ★ 겉모습 차이 = 세트가 바뀔 때 캐릭터가 좌우에서 날아드는 연출이 사라지고 페이드로 나타난다.
     진입 연출은 첫 로드에서 한 번 그대로 보인다. */
.hero-char--left {
	animation:
		heroSlideInLeft 0.9s cubic-bezier(0.22,1,0.36,1) both,
		heroFloat 4s ease-in-out 0.9s infinite;
}
.hero-char--right {
	animation:
		heroSlideInRight 0.9s cubic-bezier(0.22,1,0.36,1) 0.15s both,
		heroFloat 4s ease-in-out 1.05s infinite;
}

.hero-glow-line {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 1.5px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(var(--c-sky-1-rgb), 0.55) 22%,
		rgba(var(--c-violet-1-rgb), 0.95) 50%,
		rgba(var(--c-sky-1-rgb), 0.55) 78%,
		transparent 100%
	);
	box-shadow:
		0 0 8px rgba(var(--c-violet-1-rgb), 0.7),
		0 0 18px rgba(var(--c-sky-1-rgb), 0.35);
	z-index: 3;
}

/* 히어로 콘텐츠 */
.hero-content {
	position: relative;
	z-index: 4;
	text-align: center;
	/* 위 여백 = 로고와 안 겹치게 띄우는 값.
	   ★ 기본 120px 은 로고 아래끝(8+145=153)보다 위라 원래 33px 겹쳐 있었다.
	     구 로고는 아래쪽이 투명해 안 보였을 뿐이다. 명판처럼 아래끝이 불투명한
	     로고를 쓰는 스킨은 brand.css 에서 이 값을 로고 높이에 맞춰 올린다.
	     기본값은 그대로 둔다 — 지금 뜨는 화면을 움직이지 않기 위해서다. */
	padding: var(--hero-copy-top) 24px 160px;
}
.hero-logo {
	position: absolute;
	top: 8px; left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	text-align: center;
}
.hero-logo--img img,
.hero-logo-mark {
	height: var(--logo-h);
	width: auto;
	display: block;
	margin: 0 auto;
	/* 로고 + 다크 히어로 배경 융합 — 4겹 글로우.
	   기본값은 은색 메탈 로고에 맞춘 파랑·보라다. 금색 로고를 쓰는 업체는
	   brand.css 에서 --logo-glow-1~3 만 금색 계열로 덮어쓴다. */
	filter:
		drop-shadow(0 0 14px var(--logo-glow-1))
		drop-shadow(0 0 32px var(--logo-glow-2))
		drop-shadow(0 0 64px var(--logo-glow-3))
		drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}

/* ── 로고 명판 (이름) ────────────────────────────────────────────────
   ★ 그림이 아니라 CSS 로 그린 금속판이다 (2026-08-17).

   그림에 상호를 구우면 업체가 바뀔 때마다 로고를 새로 만들어야 하고,
   AI·디자인 도구가 내주는 리본은 글자가 들어갈 높이가 안 나온다(실측 21px).
   판을 코드로 그리면 높이·글자 크기를 값으로 정하고, 이름이 길어지면
   padding 기준이라 판이 저절로 넓어진다.

   기본은 꺼짐(--plate-on:0 / display:none) — 스킨이 켠다.
   켜지면 그만큼 심볼을 줄여 로고 전체 높이(--logo-h)를 유지한다. */
/* 배열은 두 가지다 — 토큰으로 고른다 (마크업은 한 벌).
     세로(기본) : 심볼 아래에 명판이 겹쳐 붙는다        → --plate-pos: absolute
     가로       : 심볼 오른쪽에 명판이 나란히 선다      → --plate-pos: static
   구 통짜 로고는 가로/세로 = 1.97 이었는데 심볼만 쓰면 1.00 이라 폭이 절반이 된다.
   가로 배열은 그 폭을 되찾는 선택지다 (참새와의 간격은 어느 화면에서도 340px 이상 남는다). */
.hero-logo--mark {
	height: var(--logo-h);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--logo-gap);
}
.hero-logo--mark .hero-logo-mark {
	height: var(--mark-h);
	margin: 0;                         /* flex 안에서는 auto 여백이 배치를 밀어낸다 */
}
.hero-nameplate {
	display: flex;                     /* 2020 부터 기본 켜짐 (스킨은 각자 다시 적는다) */
	position: var(--plate-pos);
	left: 50%; bottom: var(--plate-bottom);
	transform: var(--plate-tf);
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	white-space: nowrap;
	line-height: 1;
	height: calc(var(--logo-h) * var(--plate-h));
	padding: 0 calc(var(--logo-h) * var(--plate-h) * 0.42);
	font-size: calc(var(--logo-h) * var(--plate-h) * var(--plate-fs));
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--plate-ink);
	border: 1px solid var(--plate-edge);
	border-radius: 999px;
	background: var(--plate-grad);
	/* 두께감 = 윗면 광 + 아랫면 그늘. 알약을 쓰는 스킨이 이 값을 넣는다.
	   ★ 값을 토큰으로 뺀 이유 = 2020 은 알약이 아니라 판 위 글자라 그림자가 없어야 하는데,
	     여기에 박아 두면 끌 방법이 없다. 기본은 2020(없음), 알약 스킨이 각자 적는다. */
	box-shadow: var(--plate-shadow);
	text-shadow: var(--plate-text-shadow);
}

/* 긴 상호 — 판 안쪽 폭(엠블럼 폭의 63%)을 넘지 않게 글자를 줄인다.
   ★ CSS 는 글자 수에 따라 크기를 못 정한다. theme.js 가 상호를 넣을 때 폭을 세어 붙인다
     (한글·한자는 2, 나머지는 1). .gcv-name.is-long 과 같은 수법이다. */
.hero-nameplate.is-long  { font-size: calc(var(--logo-h) * var(--plate-h) * var(--plate-fs) * 0.74); }
.hero-nameplate.is-xlong { font-size: calc(var(--logo-h) * var(--plate-h) * var(--plate-fs) * 0.54); }
/* 데스크탑/모바일 분기 — 데스크탑은 이미지 로고, 모바일은 텍스트 로고 */
.hero-logo.is-desktop { display: none; }
.hero-logo.is-mobile  { display: block; }
@media (min-width: 769px) {
	.hero-logo.is-desktop { display: block; }
	.hero-logo.is-mobile  { display: none; }
	/* ★ 심볼+명판 로고는 flex 라야 나란히 선다.
	   위 `.hero-logo.is-desktop`(특정도 0,2,0)이 `.hero-logo--mark`(0,1,0)의 flex 를
	   덮어써서 명판이 아래로 떨어졌다. 같은 특정도로 뒤에 둬서 되돌린다. */
	.hero-logo--mark.is-desktop { display: flex; }
}
.hero-brand-text {
	font-family: var(--font-display);
	font-size: 42px;
	letter-spacing: 0.1em;
	background: linear-gradient(135deg, #fff4a8, var(--gold-0), #c8940a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.hero-brand-sub {
	display: block;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: var(--t-3);
	margin-top: 4px;
}

/* 슬라이더 텍스트
   ★ position 뒤집기를 걷어냈다 (2026-08-18 / 깜빡임 정정 #3 = "텍스트가 부자연스럽다"의 정체)
     종전: .hero-slide{position:absolute} / .is-active{position:relative}.
       `position` 은 애니메이션 대상이 아니다 = 클래스가 바뀌는 프레임에 즉시 뒤집힌다. 그래서
         · 나가는 슬라이드가 그 순간 흐름에서 빠지며 inset:0 으로 다시 늘어나 **가운데가 새로 잡힌다**
           → 0.8초 페이드아웃 내내 글자가 이동한다.
         · 들어오는 슬라이드가 흐름에 들어오며 컨테이너 높이가 **즉시** 새 문장 높이로 점프한다.
           세 문장은 길이가 달라 폭에 따라 줄 수가 갈리므로 아래 내용까지 같이 튄다.
       0.8초 페이드와 0초 위치 전환이 겹친 것이 "부자연스럽게 깜빡"의 정체다.
     지금: grid 로 세 장을 같은 칸에 겹친다 — 높이는 **가장 긴 문장 기준으로 고정**되어 점프가 없고,
       위치도 안 바뀐다.
   ★ 겹침 구간도 없앴다 — 나갈 때 0.35s, 들어올 때 0.35s 뒤 0.45s.
     둘이 동시에 반투명으로 겹치면 글자가 두 벌 비쳐 그 자체로 지저분하다(합 0.8s = 종전과 동일). */
.hero-slides { min-height: 100px; display: grid; }
.hero-slide {
	grid-area: 1 / 1;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease;
}
.hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.45s ease 0.35s;
}
.hero-eyebrow {
	font-family: var(--font-display);
	font-size: 12px; letter-spacing: 0.35em;
	color: var(--gold-1);
	text-transform: uppercase;
}
.hero-title {
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 800;
	color: var(--t-0);
	letter-spacing: -0.01em;
	line-height: 1.3;
}
.hero-sub {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--t-3);
	letter-spacing: 0.15em;
}

/* ============================================================
   USER BAR — 인증/유저 정보 (미드바 위 1줄)
   ============================================================ */
.userbar {
	position: relative;
	z-index: 6;
	background:
		linear-gradient(180deg,
			rgba(var(--c-deep-1-rgb), 0.92) 0%,
			rgba(var(--c-nv-07-rgb), 0.96) 100%);
	border-bottom: 1px solid rgba(var(--c-sky-9-rgb), 0.12);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.04),
		inset 0 -1px 0 rgba(0,0,0,0.4);
	/* ★ backdrop-filter 제거 (2026-08-21 / 깜빡임 정정)
	   위 배경이 alpha 0.92~0.96 이라 **뒤가 사실상 안 비친다** — 블러로 얻는 그림이 없다.
	   그런데 backdrop-filter 는 뒤 화면을 매 프레임 다시 블러하는 합성 레이어를 만든다.
	   히어로가 4초(문구)·5초(배경, filter:blur+opacity 전환)마다 도는 동안 그 레이어가
	   반복해서 다시 만들어지고, 그때마다 이 바가 **순간 비었다 나타난다.**
	   두 주기가 어긋나며 겹쳐 불규칙하게 보였다(= "새로고침과 무관하게 계속"). */
}
.userbar-inner {
	max-width: none;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	padding: 10px 24px;
	min-height: 52px;
}

/* 비로그인 — 로그인/회원가입 */
.userbar-auth {
	display: flex;
	align-items: center;
	gap: 8px;
}
.userbar-auth .btn-sm {
	min-width: 130px;
	padding: 11px 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* 로그인 — 반투명 블루 */
.userbar-auth .btn-secondary {
	background: rgba(var(--c-sky-6-rgb), 0.14);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.4);
	color: rgb(var(--c-sky-3-rgb));
	box-shadow: inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
}
.userbar-auth .btn-secondary:hover {
	background: rgba(var(--c-sky-6-rgb), 0.24);
	border-color: rgba(var(--c-sky-2-rgb), 0.65);
	color: rgb(var(--c-sky-7-rgb));
}

/* 로그인 — 등급/유저정보/액션 */
.userbar-user {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px 18px;
	font-size: 14px;
}
.userbar-user-info {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}
.user-grade {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	background: linear-gradient(180deg, rgba(var(--c-gold-a-rgb), 0.18) 0%, rgba(180,140,0,0.12) 100%);
	border: 1px solid rgba(var(--c-gold-a-rgb), 0.35);
	color: var(--gold-0);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-shadow: 0 0 6px rgba(var(--c-gold-a-rgb), 0.4);
}
.user-id { color: var(--gold-2); font-weight: 700; }
.user-money { color: var(--t-0); font-weight: 700; font-family: var(--font-num); }
.user-point { color: var(--t-2); font-family: var(--font-num); }
.user-dot { color: var(--t-3); }

/* 게임 지갑 칩 (ADR-062) — 게임사 지갑에 나가 있는 돈. 보유머니와 헷갈리지 않게 색을 달리하고,
   "가져오기"를 바로 옆에 둔다(찾아 들어가야 하면 민원이 먼저 온다). */
.user-gamewallet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--t-1);
	font-size: 13px;
}
.user-gamewallet b { color: var(--t-0); font-weight: 700; font-family: var(--font-num); }
.user-gamewallet .btn { padding: 2px 8px; font-size: 12px; }
/* 이동 중 = 누를 수 없다 (판정 잡이 정리 중). 눌러도 되는 것처럼 보이면 연타로 민원이 된다. */
.user-gamewallet.is-moving b { color: var(--t-2); }

.userbar-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}
.userbar-actions .btn-sm {
	min-width: 100px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* 포인트전환·새로고침·쪽지 — 반투명 블루 */
.userbar-actions .btn-ghost {
	background: rgba(var(--c-sky-6-rgb), 0.14);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.4);
	color: rgb(var(--c-sky-3-rgb));
	box-shadow: inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
}
.userbar-actions .btn-ghost:hover {
	background: rgba(var(--c-sky-6-rgb), 0.24);
	border-color: rgba(var(--c-sky-2-rgb), 0.65);
	color: rgb(var(--c-sky-7-rgb));
}
/* 로그아웃 — 반투명 분홍 (오버라이드) */
.userbar-actions .js-logout {
	background: rgba(236, 72, 153, 0.14);
	border: 1px solid rgba(244, 114, 182, 0.45);
	color: #f9a8d4;
	box-shadow: inset 0 1px 0 rgba(251, 207, 232, 0.12);
}
.userbar-actions .js-logout:hover {
	background: rgba(236, 72, 153, 0.26);
	border-color: rgba(244, 114, 182, 0.7);
	color: #fbcfe8;
}

/* 쪽지 버튼 + 뱃지 */
.btn-with-badge {
	position: relative;
}
.btn-with-badge .ico {
	margin-right: 4px;
}
.msg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 6px;
	border-radius: 5px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	box-shadow: 0 0 8px rgba(239,68,68,0.5);
}
.msg-badge:empty,
.msg-badge[data-count="0"] { display: none; }

/* ============================================================
   MIDDLE BAR — 메뉴 전용
   ============================================================ */
.midbar {
	position: relative;
	z-index: 5;
	height: var(--bar-h);
	background:
		/* 좌측 블루 radial glow (HUD쪽 강조) */
		radial-gradient(ellipse 420px 100% at 0% 50%, rgba(var(--c-sky-1-rgb), 0.07) 0%, transparent 62%),
		/* 우측 퍼플 radial glow (인증쪽 강조) */
		radial-gradient(ellipse 420px 100% at 100% 50%, rgba(var(--c-violet-1-rgb), 0.06) 0%, transparent 62%),
		/* 다크 오버레이 — 메뉴 가독성용 */
		linear-gradient(180deg, rgba(var(--c-deep-1-rgb), 0.30) 0%, rgba(var(--c-nv-07-rgb), 0.36) 100%),
		/* 쿨 블루 틴트 — 브러시드의 따뜻한 톤(목재 느낌) 중화, 차가운 메탈로 시프트 */
		linear-gradient(180deg, rgba(var(--c-nv-36-rgb), 0.18) 0%, rgba(var(--c-nv-32-rgb), 0.22) 100%),
		/* 미드바 배너 이미지 — 단일 배너로 풀폭 표시 (반복 없음) */
		url('../images/midbar_bg1.jpg') center / 100% 100% no-repeat,
		/* 베이스 그라데이션 (이미지가 안 깔리는 영역 보호) */
		linear-gradient(
			180deg,
			rgba(var(--c-nv-30-rgb), 0.3) 0%,
			rgba(var(--c-nv-10-rgb), 0.98) 35%,
			rgba(var(--c-nv-05-rgb), 1) 70%,
			rgba(var(--c-nv-15-rgb), 0.98) 100%
		);
	border-top: 1px solid rgba(var(--c-sky-9-rgb), 0.18);
	border-bottom: 1px solid rgba(var(--c-sky-9-rgb), 0.18);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.04),
		inset 0 -1px 0 rgba(0,0,0,0.4);
	/* ★ backdrop-filter 제거 (2026-08-21 / 깜빡임 정정) — .userbar·.midbar-nav 와 같은 사유.
	   위 gradient 가 35%~100% 구간에서 alpha 0.98~1.0 이라 뒤가 안 비친다 = 블러 효과 0.
	   ★ 이 요소는 sticky 라 스크롤 중에도 살아 있어, 합성 레이어를 유지하는 비용이 가장 컸다. */
	transition: box-shadow var(--t-base);
}
.midbar.is-sticky {
	box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--gold-line);
}
.midbar-inner {
	max-width: none;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0 24px;
}

/* 브랜드 (중간바 로고) */
.midbar-brand {
	display: flex; align-items: center; gap: 10px;
	margin-right: 32px; flex-shrink: 0;
}
.midbar-mark {
	font-family: var(--font-display);
	font-size: 24px; line-height: 1;
	color: var(--gold-0);
}
.midbar-name {
	font-family: var(--font-display);
	font-size: 18px; letter-spacing: 0.08em;
	color: var(--t-0);
}

/* 구분선 */
.midbar-sep {
	width: 1px; height: 28px;
	background: var(--line-2);
	margin: 0 20px; flex-shrink: 0;
}

/* 유저 정보 (로그인 상태) */
.midbar-user {
	display: flex; align-items: center; gap: 16px;
	font-size: 15px;
}
.midbar-user-info {
	display: flex; align-items: center; gap: 10px;
}
.midbar-uid { color: var(--gold-2); font-weight: 700; }
.midbar-money { color: var(--t-0); font-weight: 700; font-family: var(--font-num); }
.midbar-point { color: var(--t-2); font-family: var(--font-num); }
.midbar-dot { color: var(--t-3); }

/* 로그아웃 상태 버튼 */
.midbar-auth { display: flex; align-items: center; gap: 10px; }
.midbar-auth .btn {
	min-width: 130px;
	padding: 13px 26px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* 로그인 — 딥 네이비 블루 (블랙 잉크 톤) */
.midbar-auth .btn-secondary {
	position: relative;
	background: linear-gradient(180deg,
		rgb(var(--c-navy-1-rgb)) 0%,
		rgb(var(--c-nv-26-rgb)) 22%,
		rgb(var(--c-nv-24-rgb)) 48%,
		rgb(var(--c-nv-19-rgb)) 70%,
		rgb(var(--c-nv-11-rgb)) 90%,
		rgb(var(--c-nv-22-rgb)) 100%
	);
	color: #fff;
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.28);
	text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(var(--c-nv-04-rgb), 0.7);
	box-shadow:
		0 6px 18px rgba(var(--c-nv-06-rgb), 0.7),
		0 2px 5px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(var(--c-sky-2-rgb), 0.22),
		inset 0 2px 3px rgba(var(--c-sky-2-rgb), 0.06),
		inset 0 -2px 4px rgba(0,0,0,0.6),
		inset 0 -1px 0 rgba(0,0,0,0.5);
	overflow: hidden;
}
.midbar-auth .btn-secondary::before {
	content: '';
	position: absolute; top: 1px; left: 8%; right: 8%;
	height: 38%;
	background: linear-gradient(180deg, rgba(var(--c-sky-3-rgb), 0.08) 0%, transparent 100%);
	border-radius: inherit;
	pointer-events: none;
}
.midbar-auth .btn-secondary:hover {
	background: linear-gradient(180deg,
		rgb(var(--c-nv-38-rgb)) 0%,
		rgb(var(--c-navy-1-rgb)) 22%,
		rgb(var(--c-nv-26-rgb)) 48%,
		rgb(var(--c-nv-24-rgb)) 70%,
		rgb(var(--c-nv-19-rgb)) 90%,
		rgb(var(--c-navy-1-rgb)) 100%
	);
	color: #fff;
	border-color: rgba(var(--c-sky-2-rgb), 0.45);
	box-shadow:
		0 9px 26px rgba(var(--c-navy-1-rgb), 0.6),
		0 2px 6px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.32),
		inset 0 2px 4px rgba(var(--c-sky-2-rgb), 0.1),
		inset 0 -2px 4px rgba(0,0,0,0.55);
	transform: translateY(-2px);
	filter: brightness(1.1);
}

/* 회원가입 — 딥 바이올렛 퍼플 (블랙 잉크 톤) */
.midbar-auth .btn-primary {
	position: relative;
	background: linear-gradient(180deg,
		rgb(var(--c-violet-6-rgb)) 0%,
		rgb(var(--c-violet-7-rgb)) 22%,
		rgb(var(--c-violet-8-rgb)) 48%,
		rgb(var(--c-violet-9-rgb)) 70%,
		rgb(var(--c-nv-09-rgb)) 90%,
		rgb(var(--c-violet-8-rgb)) 100%
	);
	color: #fff;
	border: 1px solid rgba(var(--c-violet-2-rgb), 0.28);
	text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(var(--c-nv-12-rgb), 0.7);
	box-shadow:
		0 6px 18px rgba(var(--c-nv-13-rgb), 0.7),
		0 2px 5px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(var(--c-violet-2-rgb), 0.22),
		inset 0 2px 3px rgba(var(--c-violet-2-rgb), 0.06),
		inset 0 -2px 4px rgba(0,0,0,0.6),
		inset 0 -1px 0 rgba(0,0,0,0.5);
	overflow: hidden;
}
/* 상단 반사광 라인 */
.midbar-auth .btn-primary::before {
	content: '';
	position: absolute; top: 1px; left: 8%; right: 8%;
	height: 38%;
	background: linear-gradient(180deg, rgba(var(--c-violet-4-rgb), 0.08) 0%, transparent 100%);
	border-radius: inherit;
	pointer-events: none;
}
.midbar-auth .btn-primary:hover {
	background: linear-gradient(180deg,
		rgb(var(--c-violet-5-rgb)) 0%,
		rgb(var(--c-violet-6-rgb)) 22%,
		rgb(var(--c-violet-7-rgb)) 48%,
		rgb(var(--c-violet-8-rgb)) 70%,
		rgb(var(--c-violet-9-rgb)) 90%,
		rgb(var(--c-violet-6-rgb)) 100%
	);
	border-color: rgba(var(--c-violet-2-rgb), 0.45);
	box-shadow:
		0 9px 26px rgba(var(--c-violet-6-rgb), 0.6),
		0 2px 6px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(var(--c-violet-4-rgb), 0.32),
		inset 0 2px 4px rgba(var(--c-violet-2-rgb), 0.1),
		inset 0 -2px 4px rgba(0,0,0,0.55);
	transform: translateY(-2px);
	filter: brightness(1.1);
}

/* ── 네비 메뉴 ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   HUD PANEL NAVIGATION — Casino VIP / Game HUD style
   ══════════════════════════════════════════════════════ */
.midbar-spacer { flex: 1; min-width: 20px; }

.midbar-nav {
	position: relative;
	display: flex; align-items: stretch;
	gap: 0;
	height: 64px;
	padding: 0;
	background:
		radial-gradient(ellipse 70% 120% at 50% 100%, rgba(var(--c-sky-1-rgb), 0.12) 0%, transparent 65%),
		radial-gradient(ellipse 40% 80% at 20% 0%, rgba(var(--c-nv-43-rgb), 0.08) 0%, transparent 70%),
		linear-gradient(180deg,
			rgba(var(--c-deep-4-rgb), 0.98) 0%,
			rgba(var(--c-deep-8-rgb), 1) 30%,
			rgba(var(--c-deep-5-rgb), 1) 70%,
			rgba(var(--c-deep-6-rgb), 0.98) 100%
		);
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.28);
	border-radius: 4px;
	/* ★ backdrop-filter 제거 (2026-08-21 / 깜빡임 정정) — .userbar 와 같은 사유.
	   여긴 더 분명하다: 위 gradient 의 30%~70% 구간이 **alpha 1.0** 이라 뒤가 아예 안 비친다.
	   시각 효과 0 인데 blur(18px) 합성 비용만 냈고, 그 비용이 깜빡임으로 돌아왔다. */
	box-shadow:
		/* 외부 깊이감 */
		0 10px 40px rgba(0,0,0,0.6),
		0 2px 8px rgba(0,0,0,0.4),
		/* 외부 라이트 림 */
		0 1px 0 rgba(255,255,255,0.04),
		/* 내부 입체감 - 상단 하이라이트 */
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.12),
		inset 0 2px 4px rgba(var(--c-sky-3-rgb), 0.08),
		/* 내부 바닥 shadow */
		inset 0 -2px 6px rgba(0,0,0,0.6),
		inset 0 -1px 0 rgba(0,0,0,0.8),
		/* vignette */
		inset 0 0 40px rgba(0,0,0,0.5);
	overflow: hidden;
}
/* 상단 electric-blue 라인 */
.midbar-nav::before {
	content: '';
	position: absolute; left: 0; right: 0; top: 0;
	height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-sky-3-rgb), 0.55) 20%, rgba(var(--c-sky-1-rgb), 0.75) 50%, rgba(var(--c-sky-3-rgb), 0.55) 80%, transparent 100%);
	box-shadow: 0 0 8px rgba(var(--c-sky-1-rgb), 0.45);
	z-index: 2;
}
/* 하단 gold 라인 */
.midbar-nav::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 1px; pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-a-rgb), 0.28) 50%, transparent 100%);
	z-index: 2;
}

/* ── HUD 아이템 ─────────────────────────────────────── */
.midbar-navitem {
	position: relative;
	display: flex; flex-direction: row;
	align-items: center; justify-content: center;
	gap: 12px;
	padding: 0 18px;
	min-width: 148px;
	background: transparent;
	border: none;
	font-family: var(--font-display);
	font-size: 20px; font-weight: 600;
	letter-spacing: 0.05em;
	transition: transform 0.18s ease, background 0.25s ease;
	cursor: pointer;
	white-space: nowrap;
}
.midbar-navitem .ico {
	font-size: 24px; line-height: 1;
	flex-shrink: 0;
	color: rgb(var(--c-nv-50-rgb));
	filter: drop-shadow(0 0 5px rgba(var(--c-sky-5-rgb), 0.35));
	transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease, filter 0.25s ease;
}
.midbar-navitem .lbl {
	font-family: var(--font-display);
	font-size: 19px; font-weight: 600;
	letter-spacing: 0.03em;
	/* 메탈 실버 — 5개 메뉴 평상시 통일 */
	background: linear-gradient(180deg,
		rgb(var(--c-nv-60-rgb)) 0%,
		rgb(var(--c-nv-50-rgb)) 28%,
		rgb(var(--c-nv-42-rgb)) 58%,
		rgb(var(--c-nv-45-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* 시안 글로우 — HUD 분위기와 어울리는 차가운 메탈 */
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 6px rgba(var(--c-sky-5-rgb), 0.28));
	transition: filter 0.25s ease;
}

/* ── 메탈 컬러 배정 (호버 시에만 살아남) ──────────────────
   평상시는 실버 통일, 호버 시 각 메뉴의 시그니처 컬러로 깨어남.
   위계: 5개가 평상시엔 동일 톤 → 시선 분산 방지.
   재미: 만지면 색이 살아나서 인터랙션 보상감.
   ──────────────────────────────────────────────── */

/* 입금 — 메탈 그린 (hover) */
.nav-deposit:hover .lbl {
	background: linear-gradient(180deg,
		#ecfdf5 0%,
		#6ee7b7 25%,
		#10b981 55%,
		#047857 85%,
		#a7f3d0 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(16,185,129,0.5))
		brightness(1.15);
}
.nav-deposit:hover .ico {
	color: #6ee7b7;
	filter: drop-shadow(0 0 12px rgba(16,185,129,0.7)) brightness(1.2);
}

/* 출금 아이콘 — 입금과 동일 글리프(⬆)를 180° 회전해 굵기 일치 보장 */
.nav-withdraw .ico {
	display: inline-block;
	transform: rotate(180deg);
}
.midbar-navitem.nav-withdraw:hover .ico {
	transform: rotate(180deg) scale(1.12);
}

/* 출금 — 메탈 보라 (hover) */
.nav-withdraw:hover .lbl {
	background: linear-gradient(180deg,
		rgb(var(--c-nv-59-rgb)) 0%,
		rgb(var(--c-violet-4-rgb)) 25%,
		rgb(var(--c-violet-1-rgb)) 55%,
		rgb(var(--c-nv-40-rgb)) 85%,
		rgb(var(--c-violet-4-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(var(--c-violet-1-rgb), 0.5))
		brightness(1.15);
}
.nav-withdraw:hover .ico {
	color: rgb(var(--c-violet-4-rgb));
	filter: drop-shadow(0 0 12px rgba(var(--c-violet-1-rgb), 0.7)) brightness(1.2);
}

/* 공지사항 — 메탈 블루 (hover) */
.nav-notice:hover .lbl {
	background: linear-gradient(180deg,
		rgb(var(--c-nv-58-rgb)) 0%,
		rgb(var(--c-sky-3-rgb)) 25%,
		rgb(var(--c-sky-6-rgb)) 55%,
		rgb(var(--c-nv-39-rgb)) 85%,
		rgb(var(--c-sky-3-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(var(--c-sky-6-rgb), 0.5))
		brightness(1.15);
}
.nav-notice:hover .ico {
	color: rgb(var(--c-sky-3-rgb));
	filter: drop-shadow(0 0 12px rgba(var(--c-sky-6-rgb), 0.7)) brightness(1.2);
}

/* 1:1문의 — 메탈 티얼 (hover) */
.nav-contact:hover .lbl {
	background: linear-gradient(180deg,
		#f0fdfa 0%,
		#5eead4 25%,
		#14b8a6 55%,
		#115e59 85%,
		#99f6e4 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(20,184,166,0.5))
		brightness(1.15);
}
.nav-contact:hover .ico {
	color: #5eead4;
	filter: drop-shadow(0 0 12px rgba(20,184,166,0.7)) brightness(1.2);
}

/* 이벤트 — 메탈 앰버 (hot, hover) */
.nav-event:hover .lbl {
	background: linear-gradient(180deg,
		#fffbeb 0%,
		rgb(var(--c-gold-c-rgb)) 25%,
		rgb(var(--c-gold-b-rgb)) 55%,
		#92400e 85%,
		rgb(var(--c-gold-c-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(var(--c-gold-b-rgb), 0.5))
		brightness(1.15);
}
.nav-event:hover .ico {
	color: rgb(var(--c-gold-c-rgb));
	filter: drop-shadow(0 0 12px rgba(var(--c-gold-b-rgb), 0.7)) brightness(1.2);
}

/* FAQ — 메탈 시안 라이트 (hover) */
.nav-faq:hover .lbl {
	background: linear-gradient(180deg,
		#f0fdff 0%,
		rgb(var(--c-cyan-2-rgb)) 25%,
		rgb(var(--c-cyan-1-rgb)) 55%,
		rgb(var(--c-nv-33-rgb)) 85%,
		rgb(var(--c-cyan-2-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(var(--c-cyan-1-rgb), 0.5))
		brightness(1.15);
}
.nav-faq:hover .ico {
	color: rgb(var(--c-cyan-2-rgb));
	filter: drop-shadow(0 0 12px rgba(var(--c-cyan-1-rgb), 0.7)) brightness(1.2);
}

/* 마이페이지 — 메탈 보라 (로열, hover) */
.nav-mypage:hover .lbl {
	background: linear-gradient(180deg,
		rgb(var(--c-nv-61-rgb)) 0%,
		rgb(var(--c-nv-51-rgb)) 25%,
		rgb(var(--c-violet-3-rgb)) 55%,
		rgb(var(--c-nv-37-rgb)) 85%,
		rgb(var(--c-nv-51-rgb)) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.85))
		drop-shadow(0 0 12px rgba(var(--c-violet-3-rgb), 0.5))
		brightness(1.15);
}
.nav-mypage:hover .ico {
	color: rgb(var(--c-nv-51-rgb));
	filter: drop-shadow(0 0 12px rgba(var(--c-violet-3-rgb), 0.7)) brightness(1.2);
}

/* ── 메뉴 간 vertical divider ──────────────────────── */
.midbar-navitem:not(:first-child)::before {
	content: '';
	position: absolute; left: 0; top: 22%; bottom: 22%;
	width: 1px; pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, rgba(var(--c-sky-3-rgb), 0.12) 40%, rgba(var(--c-sky-3-rgb), 0.12) 60%, transparent 100%);
}

/* ── 하단 neon underline (hover/active 공용) ───────── */
.midbar-navitem::after {
	content: '';
	position: absolute; left: 14%; right: 14%; bottom: 3px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-sky-1-rgb), 0.95) 50%, transparent 100%);
	opacity: 0;
	transition: opacity 0.28s ease, height 0.25s ease, left 0.25s ease, right 0.25s ease;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.55), 0 0 18px rgba(var(--c-sky-1-rgb), 0.25);
}

/* ── HOVER — 루미너스 메탈릭 플레이트 ──────────────── */
.midbar-navitem .lbl { transition: filter 0.25s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.midbar-navitem:hover {
	background:
		linear-gradient(180deg,
			rgba(var(--c-nv-44-rgb), 0.18) 0%,
			rgba(var(--c-nv-34-rgb), 0.28) 55%,
			rgba(var(--c-nv-21-rgb), 0.16) 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-4-rgb), 0.6),
		inset 0 2px 3px rgba(var(--c-sky-3-rgb), 0.18),
		inset 0 -2px 4px rgba(0,0,0,0.5),
		inset 0 -1px 0 rgba(0,0,0,0.4),
		inset 1px 0 0 rgba(var(--c-sky-2-rgb), 0.18),
		inset -1px 0 0 rgba(var(--c-sky-2-rgb), 0.18);
	transform: translateY(-1px);
}
.midbar-navitem:hover .lbl {
	transform: scale(1.08);
	/* 색 글로우는 .nav-X:hover에서 처리하므로 여기선 스케일/베이스 섀도만 */
}
.midbar-navitem:hover .ico {
	transform: scale(1.12);
	/* 색 글로우는 .nav-X:hover에서 처리 */
}
.midbar-navitem:active { transform: translateY(0); }

/* hover — 네온 underline 확장 + glow 강화 */
.midbar-navitem:hover::after {
	opacity: 1;
	left: 6%; right: 6%; bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-sky-3-rgb), 1) 50%, transparent 100%);
	box-shadow: 0 0 14px rgba(var(--c-sky-2-rgb), 0.95), 0 0 24px rgba(var(--c-sky-2-rgb), 0.55), 0 2px 12px rgba(var(--c-sky-2-rgb), 0.35);
}

/* hover 시 shine sweep */
.midbar-navitem { overflow: hidden; }
@keyframes hudShine {
	0%   { transform: translateX(-180%) skewX(-22deg); opacity: 0; }
	15%  { opacity: 1; }
	60%  { transform: translateX(280%)  skewX(-22deg); opacity: 0; }
	100% { transform: translateX(280%)  skewX(-22deg); opacity: 0; }
}
.midbar-navitem .shine {
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 35%;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-sky-4-rgb), 0.22) 50%, transparent 100%);
	pointer-events: none;
	opacity: 0;
}
.midbar-navitem:hover .shine {
	animation: hudShine 1.2s ease-out forwards;
}

/* ── LOGOUT — metal red accent, no fill ───────────── */
.nav-logout { margin-left: 8px; }
.nav-logout:not(:first-child)::before {
	background: linear-gradient(180deg, transparent 0%, rgba(239,68,68,0.3) 40%, rgba(239,68,68,0.3) 60%, transparent 100%);
}
.nav-logout .lbl {
	background: linear-gradient(180deg,
		#fee2e2 0%,
		#fca5a5 25%,
		#ef4444 55%,
		#991b1b 85%,
		#fca5a5 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.85)) drop-shadow(0 0 5px rgba(239,68,68,0.22));
	opacity: 0.7;
	transition: opacity 0.25s ease, filter 0.25s ease;
}
.nav-logout .ico {
	color: #fca5a5;
	opacity: 0.7;
	filter: drop-shadow(0 0 5px rgba(239,68,68,0.4));
}
.nav-logout:hover {
	background: linear-gradient(180deg, transparent 0%, rgba(239,68,68,0.05) 60%, rgba(239,68,68,0.12) 100%);
}
.nav-logout:hover .lbl {
	opacity: 1;
	filter: drop-shadow(0 1px 0 rgba(0,0,0,0.85)) drop-shadow(0 0 10px rgba(252,165,165,0.55)) brightness(1.15);
}
.nav-logout:hover .ico {
	opacity: 1;
	filter: drop-shadow(0 0 10px rgba(239,68,68,0.7)) brightness(1.2);
}
.nav-logout:hover::after {
	opacity: 1;
	background: linear-gradient(90deg, transparent 0%, rgba(239,68,68,0.95) 50%, transparent 100%);
	box-shadow: 0 0 10px rgba(239,68,68,0.6), 0 0 18px rgba(239,68,68,0.3);
}

/* 포인트전환 / 새로고침 */
.midbar-actions { display: flex; align-items: center; gap: 6px; }
.btn-icon-bar {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: var(--r-sm);
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--line);
	color: var(--t-2);
	font-size: 16px;
	transition: all var(--t-fast);
}
.btn-icon-bar:hover { background: rgba(255,255,255,0.1); color: var(--t-0); }

/* 모바일 햄버거 */
.midbar-toggle {
	display: none;
	margin-left: auto;
	flex-direction: column; gap: 5px;
	padding: 8px;
	cursor: pointer;
}
.midbar-toggle span {
	display: block; width: 22px; height: 2px;
	background: var(--t-1);
	border-radius: 2px;
	transition: all var(--t-fast);
}

/* ============================================================
   JACKPOT / ODOMETER SECTION
   ============================================================ */
.jackpot {
	position: relative;
	padding: 48px 24px;
	text-align: center;
	overflow: hidden;
}
.jackpot-bg {
	position: absolute; inset: 0;
	background: url('../images/odometer_section_ptn_bg.webp') center/cover no-repeat;
	opacity: 0.45;
}
.jackpot-bg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--bg-0) 0%, transparent 20%, transparent 80%, var(--bg-0) 100%);
}
.jackpot-inner {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	gap: 32px; flex-wrap: wrap;
}
.jackpot-machine {
	width: 80px; flex-shrink: 0;
	animation: machinePulse 3s ease-in-out infinite;
}
@keyframes machinePulse {
	0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--c-gold-a-rgb), 0.3)); }
	50% { filter: drop-shadow(0 0 20px rgba(var(--c-gold-a-rgb), 0.7)); }
}
.jackpot-info { text-align: left; }
.jackpot-label {
	font-size: 13px; letter-spacing: 0.25em;
	color: var(--gold-2); text-transform: uppercase;
	margin-bottom: 4px;
}
.jackpot-title-img { height: 36px; margin-bottom: 8px; }
.jackpot-counter {
	display: flex; align-items: baseline; gap: 6px;
}
.jackpot-value {
	font-family: var(--font-num);
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 800;
	color: var(--gold-0);
	letter-spacing: -0.02em;
	text-shadow: 0 0 30px rgba(var(--c-gold-a-rgb), 0.5);
}
.jackpot-unit {
	font-size: 20px; font-weight: 700;
	color: var(--gold-2);
}

/* ============================================================
   GAME SECTION
   ============================================================ */
.gamesec {
	position: relative;
	padding: 0 0 80px;
	overflow: hidden;
	background: var(--bg-0);
}
/* 배경 이미지 — 별도 레이어로 분리해서 blur 적용 + 은은한 퍼플 틴트 */
.gamesec::before {
	content: '';
	position: absolute;
	inset: -20px;  /* blur 가장자리 잘리지 않게 살짝 확장 */
	background:
		/* 은은한 퍼플 틴트 (위) */
		linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(6, 78, 59, 0.32) 100%),
		/* 원본 배경 이미지 (아래) */
		url('../images/gamelist_bg.webp') center center / cover no-repeat;
	filter: blur(6px) brightness(0.6);
	z-index: 0;
	pointer-events: none;
	transition: background-image 0.4s ease;
}
/* 카지노 탭 활성 시 배경 이미지만 변경 (퍼플 틴트는 유지) */
.gamesec:has(#casinoList.is-active)::before {
	background:
		linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(6, 78, 59, 0.32) 100%),
		url('../images/gamelist_bg2.jpg') center center / cover no-repeat;
}

/* 배경 레이어 ─ 양쪽 캐릭터 슬라이드인 */
@keyframes gsFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes gsFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes gsTada {
	0%,100%{transform:scale(1) rotate(0deg)}
	10%,30%{transform:scale(0.96) rotate(-2deg)}
	20%,40%{transform:scale(1.02) rotate(2deg)}
	50%{transform:scale(1.04) rotate(-1deg)}
	60%{transform:scale(1.02) rotate(1deg)}
	70%{transform:scale(1) rotate(0deg)}
}

.gamesec-bg {
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

/* 왼쪽 / 오른쪽 컨테이너 */
.gs-left, .gs-right {
	position: absolute;
	top: 0; bottom: 0;
	width: 580px;
	transition: transform 0.9s cubic-bezier(0.22,1,0.36,1), opacity 0.9s ease;
}
.gs-left  { left: 0;  transform: translateX(-100%); opacity: 0; }
.gs-right { right: 0; transform: translateX(100%);  opacity: 0; }

/* 스크롤 진입 후 나타남 */
.gamesec.is-revealed .gs-left  { transform: translateX(0); opacity: 1; }
.gamesec.is-revealed .gs-right { transform: translateX(0); opacity: 1; transition-delay: 0.08s; }

/* 각 이미지 레이어 */
.gs-layer { position: absolute; }

/* ── 왼쪽 4 레이어 ── */
.gs-l1 { width: 584px; height: 1201px; left: 0; top: 50%; transform: translateY(-50%); }
.gs-l1 img { animation: gsFloat1 2s ease infinite; }

.gs-l2 { width: 483px; height: 498px; left: 0; top: 0; }
.gs-l2 img { animation: gsFloat1 1s ease infinite; }

.gs-l3 { width: 520px; height: 860px; left: 0; top: 4%; }
.gs-l3 img { animation: gsFloat2 3s ease-in-out infinite; }

.gs-l4 { width: 257px; height: 472px; left: -20px; bottom: 0; }
.gs-l4 img { animation: gsTada 8s ease-in-out infinite; }

/* ── 오른쪽 4 레이어 ── */
.gs-r1 { width: 409px; height: 1501px; right: 0; top: 50%; transform: translateY(-50%); }

.gs-r2 { width: 580px; height: 963px; right: 0; top: 8%; }
.gs-r2 img { animation: gsFloat2 3s ease infinite; }

.gs-r3 { width: 342px; height: 756px; right: 0; top: 50%; }
.gs-r3 img { animation: gsFloat1 1s ease-in-out infinite; }

.gs-r4 { width: 526px; height: 564px; right: 0; top: 0; }

/* 공통 img */
.gs-layer img { width: 100%; height: 100%; object-fit: contain; display: block; }

.gamesec-inner {
	position: relative; z-index: 1;
	max-width: 1280px; margin: 0 auto; padding: 0 24px;
}

/* 게임 탭 네비 */
.game-tabs {
	display: flex; align-items: center;
	gap: 8px;
	padding: 32px 0 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 32px;
}
/* 게임레벨이 불허하는 게임타입 탭 감춤 (0287 / 2026-08-30).
   ★ !important 가 필요한 이유 — .game-tab 은 display:flex 라 [hidden] 의 UA 기본값(display:none)을
     덮어 버린다. 속성만 걸고 규칙을 안 두면 **감췄는데 그대로 보인다.**
   ★ 감추는 것은 UX 층이다. 실제 차단은 서버 게이트가 한다(주소 직접 입력 대비). */
.game-tab[hidden],
.gamelist-panel[hidden] { display: none !important; }

.game-tab {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 24px;
	border-radius: var(--r-pill);
	font-size: 15px; font-weight: 700;
	color: var(--t-2);
	border: 1px solid transparent;
	transition: all var(--t-base);
	cursor: pointer;
}
.game-tab:hover { color: var(--t-0); background: rgba(255,255,255,0.05); }
.game-tab.is-active {
	color: var(--gold-0);
	background: var(--gold-soft);
	border-color: var(--gold-line);
}
.game-tab img { height: 22px; }

/* ── 이미지 기반 게임 탭 (데스크탑 전용) ───────────────────── */
/* 잭팟 자리로 이동 → 상단 히어로 밴드로 앵커(허공에 뜬 느낌 제거) + 두 배너 균형. */
.game-tabs--img {
	justify-content: center;
	/* 여백 축소 + 배너 확대 (2026-08-08) — 1275px 폭에 내용이 800px뿐이라 좌우 470px이 비어
	   "큰 상자에 두 개가 떠 있는" 모양이었다. 위아래 100px도 같이 줄인다. */
	gap: 48px;
	padding: 34px 24px 30px;
	margin: 20px 0 40px;
	border-bottom: none;               /* base .game-tabs 밑줄 제거 (밴드와 충돌) */
	border-radius: 18px;
	background:
		radial-gradient(130% 150% at 50% 0%, rgba(var(--c-nv-25-rgb), 0.55), rgba(var(--c-nv-08-rgb), 0.92) 72%),
		url('../images/odometer_section_ptn_bg.webp') center/cover no-repeat;
	border: 1px solid var(--line);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 44px rgba(0,0,0,0.4);
}
.game-tab--img {
	position: relative;                /* 라벨(.game-tab__label) 기준점 */
	container-type: inline-size;       /* 라벨 크기를 배너 폭에 비례시킨다(cqw) */
	width: 440px;
	max-width: 42vw;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	gap: 0;
	/* 비활성도 "살아 있게" (2026-08-08) — 종전 0.72 + grayscale 0.22는 네온 간판 하나만 꺼진
	   모양이라 "카지노는 지금 안 되나?"로 읽혔다. 선택 신호는 아래 밑줄이 맡는다. */
	opacity: 0.88;
	filter:
		grayscale(0.06)
		brightness(0.96)
		drop-shadow(0 0 10px rgba(255,255,255,0.06));
	transition: opacity 0.35s ease, filter 0.4s ease, transform 0.35s ease;
}
.game-tab--img img {
	width: 100%; height: auto;
	display: block;
}

/* ── 배너 라벨 (이미지에서 분리한 텍스트 / 2026-08-08) ───────────────
   판(네온 테두리 안 검은 면)의 실측 위치에 맞춰 얹는다.
     카지노 판 = x 2.3%~ , y 35.3%~67.8%   슬롯 판 = x 2.4%~ , y 36.3%~67.8%
   두 장이 거의 같아 공통 박스로 잡고 가운데 정렬한다. 오른쪽 룰렛(x 70%~)은 피한다.
   크기는 cqw(배너 폭 기준) = 창을 줄여도 글자가 판 밖으로 나가지 않는다. */
/* 카테고리 문구 4종 (2026-08-19) — 그린처럼 **타일**로 그리는 스킨을 위한 자리다.
   기본(2020)은 배너 그림 안에 글자가 있으므로 감춘다 = 종전 화면 그대로.
   스킨이 layout.css 에서 켠다. */
.game-tab__cat,
.game-tab__name,
.game-tab__arrow { display: none; }

.game-tab__label {
	position: absolute;
	/* 상자 우단 = 10+58 = 68% < 판 우단 69% — 문구가 길어져도 룰렛을 침범하지 않는다.
	   실측: 현재 글자는 16.4%~65.6%(카지노) / 20.5%~61.5%(슬롯)로 원본 위치를 그대로 재현한다. */
	left: 10%; top: 35%;
	width: 58%; height: 33%;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Pretendard', system-ui, sans-serif;
	font-size: 6cqw;
	font-weight: 900;
	font-style: italic;
	letter-spacing: 0.04em;
	white-space: nowrap;
	color: #fff;
	pointer-events: none;
	transition: text-shadow 0.35s ease, opacity 0.35s ease;
}
/* cqw 미지원 구형 브라우저 폴백 — 배너가 380~440px 구간이라 근사치로 충분 */
@supports not (font-size: 1cqw) {
	.game-tab__label { font-size: clamp(15px, 2vw, 26px); }
}
.game-tab--img[data-target="casinoList"] .game-tab__label {
	text-shadow:
		0 0 2px #fff,
		0 0 10px rgba(var(--c-nv-51-rgb), 0.95),
		0 0 22px rgba(var(--c-violet-3-rgb), 0.75),
		0 0 40px rgba(var(--c-violet-3-rgb), 0.45);
}
.game-tab--img[data-target="slotList"] .game-tab__label {
	text-shadow:
		0 0 2px #fff,
		0 0 10px rgba(var(--c-sky-4-rgb), 0.95),
		0 0 22px rgba(var(--c-sky-1-rgb), 0.75),
		0 0 40px rgba(var(--c-sky-1-rgb), 0.45);
}

/* ── 선택 표시 = 밑줄 (2026-08-08) ────────────────────────────────
   종전 신호는 밝기·확대뿐이었다. 둘 다 네온이라 밝기 차이는 약한 신호고,
   아래 게임목록과의 연결감도 없었다. 판 폭에 맞춘 발광 밑줄을 둔다. */
.game-tab--img::after {
	content: "";
	position: absolute;
	left: 4%; bottom: 4%;
	width: 66%; height: 3px;
	border-radius: 2px;
	opacity: 0;
	transform: scaleX(0.4);
	transform-origin: left center;
	transition: opacity 0.3s ease, transform 0.35s ease;
	pointer-events: none;
}
.game-tab--img[data-target="casinoList"]::after {
	background: linear-gradient(90deg, rgba(var(--c-violet-3-rgb), 0) 0%, rgb(var(--c-nv-48-rgb)) 18%, rgb(var(--c-nv-55-rgb)) 50%, rgb(var(--c-nv-48-rgb)) 82%, rgba(var(--c-violet-3-rgb), 0) 100%);
	box-shadow: 0 0 10px rgba(var(--c-violet-3-rgb), 0.9), 0 0 22px rgba(var(--c-violet-3-rgb), 0.5);
}
.game-tab--img[data-target="slotList"]::after {
	background: linear-gradient(90deg, rgba(var(--c-sky-1-rgb), 0) 0%, rgb(var(--c-sky-1-rgb)) 18%, rgb(var(--c-sky-4-rgb)) 50%, rgb(var(--c-sky-1-rgb)) 82%, rgba(var(--c-sky-1-rgb), 0) 100%);
	box-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.9), 0 0 22px rgba(var(--c-sky-1-rgb), 0.5);
}
.game-tab--img.is-active::after { opacity: 1; transform: scaleX(1); }
.game-tab--img:hover {
	background: none;
	opacity: 0.92;
	transform: translateY(-2px);
}

/* 호버 — 각 이미지 시그니처 컬러 글로우 등장 */
.game-tab--img[data-target="casinoList"]:hover {
	filter:
		grayscale(0)
		brightness(1)
		drop-shadow(0 0 14px rgba(var(--c-violet-3-rgb), 0.45))
		drop-shadow(0 0 24px rgba(var(--c-violet-3-rgb), 0.22));
}
.game-tab--img[data-target="slotList"]:hover {
	filter:
		grayscale(0)
		brightness(1)
		drop-shadow(0 0 14px rgba(var(--c-sky-1-rgb), 0.45))
		drop-shadow(0 0 24px rgba(var(--c-sky-1-rgb), 0.22));
}

/* 활성 — 자기 색 글로우 강하게, 살짝 확대 */
.game-tab--img.is-active {
	background: none;
	border-color: transparent;
	opacity: 1;
	transform: scale(1.04);
}
.game-tab--img[data-target="casinoList"].is-active {
	filter:
		grayscale(0)
		brightness(1.05)
		drop-shadow(0 0 20px rgba(var(--c-violet-3-rgb), 0.6))
		drop-shadow(0 0 38px rgba(var(--c-violet-3-rgb), 0.32));
}
.game-tab--img[data-target="slotList"].is-active {
	filter:
		grayscale(0)
		brightness(1.05)
		drop-shadow(0 0 20px rgba(var(--c-sky-1-rgb), 0.6))
		drop-shadow(0 0 38px rgba(var(--c-sky-1-rgb), 0.32));
}

/* ── 데스크탑/모바일 분기 ───────────────────────────────── */
.game-tabs.is-desktop { display: none; }
.game-tabs.is-mobile  { display: flex; }
/* 모바일 탭 — 이미지 안 작은 영문 라벨 숨김 (한글 텍스트만 표시) */
.game-tabs.is-mobile .game-tab img { display: none; }
/* 모바일 탭 — 2020 HUD 정체성 (다크 네이비 + 시안 글로우, 세련) */
.game-tabs.is-mobile {
	justify-content: center;
	gap: 10px;
	padding: 16px 0;
}
.game-tabs.is-mobile .game-tab {
	padding: 11px 26px;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(var(--c-sky-8-rgb), 0.55);
	background:
		radial-gradient(ellipse 80% 80% at 50% 0%, rgba(var(--c-sky-1-rgb), 0.06) 0%, transparent 70%),
		linear-gradient(180deg, rgba(var(--c-deep-4-rgb), 0.88) 0%, rgba(var(--c-deep-1-rgb), 0.96) 100%);
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.32);
	border-radius: 6px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.06),
		0 4px 12px rgba(0,0,0,0.35);
	transition: all 0.25s ease;
	text-transform: none;
}
.game-tabs.is-mobile .game-tab:hover {
	color: rgb(var(--c-sky-3-rgb));
	border-color: rgba(var(--c-sky-2-rgb), 0.55);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.1),
		0 0 12px rgba(var(--c-sky-1-rgb), 0.18),
		0 6px 14px rgba(0,0,0,0.4);
	transform: translateY(-1px);
}
.game-tabs.is-mobile .game-tab.is-active {
	color: #fff;
	background:
		radial-gradient(ellipse 100% 80% at 50% 0%, rgba(var(--c-sky-3-rgb), 0.18) 0%, transparent 70%),
		linear-gradient(180deg, rgba(var(--c-sky-1-rgb), 0.30) 0%, rgba(var(--c-sky-6-rgb), 0.40) 100%);
	border-color: rgba(var(--c-sky-2-rgb), 0.85);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.22),
		inset 0 -1px 0 rgba(0,0,0,0.35),
		0 0 18px rgba(var(--c-sky-1-rgb), 0.45),
		0 6px 16px rgba(0,0,0,0.45);
	text-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.55), 0 1px 2px rgba(0,0,0,0.7);
}
@media (min-width: 769px) {
	.game-tabs.is-desktop { display: flex; }
	.game-tabs.is-mobile  { display: none; }
}

/* 게임 카드 그리드 — 슬롯 */
.gamelist-panel { display: none; }
.gamelist-panel.is-active { display: block; }

@keyframes spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes cardFloat {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-6px); }
}
@keyframes gcardGlow {
	0%, 100% { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 18px rgba(var(--c-gold-a-rgb), 0.25); }
	50%      { box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 36px rgba(var(--c-gold-a-rgb), 0.55); }
}

.game-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

/* 슬롯 카드 링크 */
.g-card-link {
	display: block;
	aspect-ratio: 1 / 1;
	position: relative;
	z-index: 1;
	transition: transform 0.25s ease, filter 0.25s ease;
}
.g-card-link:hover {
	transform: translateY(-10px) scale(1.04);
	filter: brightness(1.08);
	z-index: 5;
}

/* 카드 래퍼 (overflow:hidden 담당) */
.g-card-wrap {
	width: 100%; height: 100%;
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
	box-shadow: 0 4px 16px rgba(0,0,0,0.55);
	transition: box-shadow 0.25s ease;
	cursor: pointer;
}
.g-card-link:hover .g-card-wrap {
	animation: gcardGlow 0.8s ease infinite;
}

/* 회전 배경 디스크 */
.g-card-bg {
	width: 444px; height: 443px;
	background: url('../images/slot_cards/gamecard_bg_play.webp') center / cover no-repeat;
	position: absolute; top: -50%; left: -50%;
	animation: cardFloat 6s ease-in-out infinite;
	transition: background 0.3s ease;
	pointer-events: none;
}
.g-card-wrap:hover .g-card-bg {
	background: url('../images/slot_cards/gamecard_bg_01.webp') center / cover no-repeat;
	animation: spin 4s linear infinite;
}

/* 호버 — play 이미지 (슬라이드 인) */
.g-card-hv-img,
.g-card-hv-title {
	position: absolute; top: 100%; left: 0;
	width: 100%; height: 100%;
	opacity: 0;
	transition: top 0.25s ease, opacity 0.25s ease;
	pointer-events: none;
}
.g-card-hv-img img,
.g-card-hv-title img { width: 100%; height: 100%; object-fit: contain; }

.g-card-wrap:hover .g-card-hv-img {
	top: 0; opacity: 1;
	animation: cardFloat 6s ease-in-out infinite;
}
.g-card-wrap:hover .g-card-hv-title {
	top: 0; opacity: 1;
	transition-delay: 0.04s;
	animation: cardFloat 2s ease-in-out infinite;
}

/* 게임 썸네일 프레임 (hover 시 슬라이드 아웃) */
.g-card-img {
	position: absolute; inset: 0;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.g-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-card-wrap:hover .g-card-img { transform: translateY(100%); opacity: 0; }

/* 금색 2줄 테두리 stroke (이미지 오버레이, 최상단) */
.g-card-stroke {
	position: absolute; inset: 0;
	background: url('../images/slot_cards/gamecard_stroke.png') center / 100% 100% no-repeat;
	pointer-events: none;
	z-index: 10;
}

/* 카지노 카드 — 3열 베이스 (모든 데스크탑/태블릿 사이즈 3열 유지, 480px↓ 2열) */
.g-ca-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	padding: 14px 0;  /* 튀어나온 캐릭터 여유 공간 */
}

.g-ca-card {
	position: relative;
	border-radius: var(--r-lg);
	overflow: visible;  /* 캐릭터가 카드 밖으로 튀어나오도록 */
	background: transparent;
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.45);
	aspect-ratio: 330 / 230;
	cursor: pointer;
	/* 입체 그림자 — 시안 글로우 + 인셋 베벨로 떠있는 느낌 */
	box-shadow:
		/* 외부 시안 글로우 (다크 배경에서 잘 보임) */
		0 0 0 1px rgba(var(--c-sky-1-rgb), 0.15),
		0 8px 22px rgba(var(--c-sky-1-rgb), 0.18),
		0 14px 36px rgba(var(--c-deep-2-rgb), 0.7),
		/* 내부 상단 라이트 베벨 — 위에서 빛 비치는 효과 */
		inset 0 2px 0 rgba(var(--c-sky-4-rgb), 0.55),
		inset 0 4px 8px rgba(var(--c-sky-4-rgb), 0.12),
		/* 내부 하단 어두운 베벨 — 깊이감 */
		inset 0 -3px 6px rgba(0, 0, 0, 0.55),
		inset 0 -2px 0 rgba(0, 0, 0, 0.7);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.g-ca-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--c-sky-1-rgb), 0.85);
	box-shadow:
		0 0 0 1px rgba(var(--c-sky-1-rgb), 0.4),
		0 0 32px rgba(var(--c-sky-1-rgb), 0.5),
		0 22px 44px rgba(var(--c-deep-2-rgb), 0.75),
		inset 0 2px 0 rgba(var(--c-sky-4-rgb), 0.7),
		inset 0 4px 8px rgba(var(--c-sky-4-rgb), 0.18),
		inset 0 -3px 6px rgba(0, 0, 0, 0.55),
		inset 0 -2px 0 rgba(0, 0, 0, 0.7),
		inset 0 0 0 2px rgba(var(--c-sky-1-rgb), 0.55);
	z-index: 3;
}

.g-ca-card-bg {
	width: 100%; height: 100%;
	position: relative;
	overflow: visible;
	border-radius: var(--r-lg);
	background: url('../images/casino_cards/ca_01_bg_fb.png') center / 108% 108% no-repeat;
}

/* 캐릭터(obj1) — 카드 대비 115%×122%, 카드 밖으로 살짝 비어져 나옴 */
.g-ca-card-bg .g-ca-obj1 {
	position: absolute;
	bottom: 0; left: 50%;
	width: 115%; height: 122%;
	transform: translateX(-50%);
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55));
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
	z-index: 1;
	pointer-events: none;
}

/* 로고+회사명(obj2) — 카드 풀폭 100%×100%, 가운데 contain */
.g-ca-card-bg .g-ca-obj2 {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; height: 100%;
	transform: translate(-50%, -50%);
	object-fit: contain;
	object-position: center center;
	z-index: 2;
	pointer-events: none;
}

/* 호버 시 캐릭터 살짝 튀어오름 (하단 정렬 유지) */
.g-ca-card:hover .g-ca-obj1 {
	transform: translateX(-50%) translateY(-4%) scale(1.05);
}

/* 옛 호버 오버레이(.g-ca-card-hover) — 사용 안 함 */
.g-ca-card-hover { display: none; }

/* ============================================================
   CONFIRM / ALERT DIALOG (luxuryConfirm / luxuryAlert API)
   ============================================================ */
.dlg-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.7);
	z-index: 9000;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity var(--t-base);
	pointer-events: none;
}
.dlg-backdrop.is-open {
	opacity: 1; pointer-events: auto;
}
.dlg {
	background: var(--bg-2);
	border: 1px solid var(--gold-line);
	border-radius: var(--r-lg);
	padding: 28px 32px;
	min-width: 300px; max-width: 440px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
	transform: translateY(12px) scale(0.97);
	transition: transform var(--t-base);
	text-align: center;
}
.dlg-backdrop.is-open .dlg {
	transform: translateY(0) scale(1);
}
.dlg-icon {
	font-size: 36px; margin-bottom: 14px;
}
.dlg-msg {
	font-size: 17px; color: var(--t-1);
	line-height: 1.6; margin-bottom: 26px;
}
.dlg-actions {
	display: flex; gap: 10px; justify-content: center;
}

/* ============================================================
   TOAST
   ============================================================ */
.toasts {
	position: fixed; bottom: 24px; right: 24px;
	z-index: 9100;
	display: flex; flex-direction: column; gap: 10px;
}
.toast {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	background:
		radial-gradient(ellipse 200% 100% at 0% 0%, rgba(var(--c-sky-1-rgb), 0.06) 0%, transparent 70%),
		linear-gradient(180deg, rgba(var(--c-deep-3-rgb), 0.96) 0%, rgba(var(--c-deep-1-rgb), 0.98) 100%);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.28);
	border-left: 3px solid rgba(var(--c-sky-1-rgb), 0.7);
	border-radius: var(--r-md);
	font-size: 14px;
	color: rgba(var(--c-nv-57-rgb), 0.95);
	box-shadow:
		0 12px 32px rgba(var(--c-deep-2-rgb), 0.6),
		0 0 0 1px rgba(var(--c-sky-2-rgb), 0.05),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transform: translateX(120%);
	transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
	min-width: 240px; max-width: 360px;
}
.toast.is-show { transform: translateX(0); }
.toast--success {
	border-left-color: #4ade80;
	box-shadow:
		0 12px 32px rgba(var(--c-deep-2-rgb), 0.6),
		0 0 16px rgba(34,197,94,0.18),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
}
.toast--error {
	border-left-color: #f87171;
	box-shadow:
		0 12px 32px rgba(var(--c-deep-2-rgb), 0.6),
		0 0 16px rgba(239,68,68,0.18),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
}
.toast--info {
	border-left-color: rgb(var(--c-sky-2-rgb));
	box-shadow:
		0 12px 32px rgba(var(--c-deep-2-rgb), 0.6),
		0 0 16px rgba(var(--c-sky-1-rgb), 0.18),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12);
}
.toast-icon {
	font-size: 18px; flex-shrink: 0;
	filter: drop-shadow(0 0 6px currentColor);
}
.toast--success .toast-icon { color: #4ade80; }
.toast--error   .toast-icon { color: #f87171; }
.toast--info    .toast-icon { color: rgb(var(--c-sky-2-rgb)); }

/* ============================================================
   MODAL SYSTEM (로그인 / 서비스 모달)
   ============================================================ */
.modal {
	position: fixed; inset: 0;
	z-index: 8000;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.modal.is-open { pointer-events: auto; }
.modal-backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.75);
	opacity: 0; transition: opacity var(--t-base);
}
.modal.is-open .modal-backdrop { opacity: 1; }
/* ══════════════════════════════════════════════════════════════════════
   모달 통일 규칙 (2026-09-03) — 기준 = 공지 팝업 `.notice-popup`
   ══════════════════════════════════════════════════════════════════════
   13종 모달이 머리글·여백·버튼 위계·스크롤 방식을 한 벌로 쓴다.
   종전에는 모달마다 머리글 유무·padding(36 / 32 / 인라인)·버튼 배치가 제각각이었다.

   ★ 색은 스킨 토큰이 아니라 **고정값**이다 (PM 결정 2026-09-03 / A안).
     남색+금색은 어느 스킨(기본·럭셔리·그린)에도 무난하도록 고른 조합이고,
     공지 팝업이 이미 같은 값을 쓴다. 토큰을 따라가게 하면 스킨이 늘 때마다
     모달 13종을 다시 봐야 한다 — 그 검증 비용을 안 지는 쪽을 골랐다.
     ※ 스킨별로 갈리게 하려면 이 블록의 고정값만 토큰으로 바꾸면 된다
       (골격·여백·위계는 안 건드려도 된다).

   ★ 스크롤 주체가 카드 → `.modal-body` 로 옮겨졌다. 머리글과 액션바는 안 밀린다.
     - `#modal-game-selection` 맨위로 버튼이 이 요소를 본다 (theme.js)
     - openModal 의 scrollTop 초기화 목록에도 `.modal-body` 가 들어 있다
   ══════════════════════════════════════════════════════════════════════ */
.modal-card {
	position: relative; z-index: 1;
	display: flex; flex-direction: column;
	background: #0f1420;
	border: 1px solid rgba(148, 163, 184, 0.28);
	border-radius: 16px;
	width: 100%; max-width: 440px;
	max-height: 90vh;
	overflow: hidden;
	padding: 0;
	box-shadow: 0 28px 70px rgba(2, 6, 18, 0.55), 0 3px 10px rgba(2, 6, 18, 0.35);
	transform: translateY(20px) scale(0.97);
	opacity: 0;
	transition: all var(--t-base);
}

/* 머리글 = 라벨 + 제목 + 아래 금색 강조선. 스크롤해도 안 밀린다. */
.modal-head {
	position: relative;
	flex: none;
	padding: 22px 26px 18px;
	background: linear-gradient(135deg, #182842 0%, #101b31 55%, #0c1526 100%);
}
.modal-head::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, rgba(201,168,106,0) 0%, #c9a86a 20%, #ecd9ab 50%, #c9a86a 80%, rgba(201,168,106,0) 100%);
}

/* 본문 = 스크롤 주체. 카드가 아니라 여기가 넘친다. */
.modal-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 26px 24px;
}

/* 액션바 위 안내 한 줄 (충전신청 「입금계좌는 1:1 문의 답변으로…」).
   ★ .field-hint 를 안 쓴다 — 그쪽은 파란 콜아웃 박스라, 늘 떠 있는 안내에 붙이면
     입력 오류 알림과 같은 무게로 읽힌다. */
.modal-hint {
	display: block;
	margin: 2px 0 0;
	font-size: 12.5px;
	color: #9aa4bb;
	line-height: 1.6;
}
.modal.is-open .modal-card {
	transform: translateY(0) scale(1);
	opacity: 1;
}
.modal-card--wide { max-width: 720px; }
.modal-card--page { max-width: 960px; }

/* 충전/환전처럼 좁은 폼 기반 모달은 카드 폭을 폼에 맞게 축소 */
#modal-deposit .modal-card,
#modal-withdraw .modal-card {
	max-width: 700px;
}
#modal-deposit .modal-form,
#modal-withdraw .modal-form {
	max-width: 100% !important;
}

/* 모바일 — 카드 padding 축소, --wide는 풀폭 */
@media (max-width: 600px) {
	.modal { padding: 12px; }
	.modal-head { padding: 18px 18px 15px; }
	.modal-body { padding: 18px 18px 20px; }
	.modal-card--wide { max-width: 100%; }
	#modal-deposit .modal-card,
	#modal-withdraw .modal-card { max-width: 100%; }
}

/* ─── Game selection modal (provider 게임 목록) — luxury 구조 + 2020 HUD 톤 ─── */
/* 게임 선택 모달은 더 큰 폭으로 */
#modal-game-selection .modal-card {
	max-width: 1280px;
}
.game-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.28);
	border-radius: var(--r-md);
	background: linear-gradient(180deg, rgba(var(--c-deep-4-rgb), 0.78) 0%, rgba(var(--c-deep-8-rgb), 0.88) 100%);
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.game-filters {
	display: flex;
	gap: 6px;
}
.game-filter {
	padding: 8px 16px;
	font-family: var(--font-display);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--t-2);
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.3);
	border-radius: var(--r-md);
	background: transparent;
	transition: all var(--t-base);
	cursor: pointer;
	font-weight: 500;
}
.game-filter:hover {
	color: rgb(var(--c-sky-3-rgb));
	border-color: rgba(var(--c-sky-2-rgb), 0.55);
}
.game-filter.active {
	color: #fff;
	background: linear-gradient(180deg, rgba(var(--c-sky-1-rgb), 0.32) 0%, rgba(var(--c-sky-6-rgb), 0.42) 100%);
	border-color: rgba(var(--c-sky-2-rgb), 0.7);
	font-weight: 700;
	text-shadow: 0 0 8px rgba(var(--c-sky-1-rgb), 0.5);
}
.game-search {
	display: flex;
	gap: 8px;
	align-items: center;
}
.game-search .field-input {
	padding: 9px 14px;
	font-size: 14px;
	min-width: 220px;
}

/* 모달 내부 게임 그리드 — 메인의 .game-grid(6열)와 충돌 방지 */
#modal-game-selection .game-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 14px;
}
.game-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform var(--t-base);
}
.game-card:hover { transform: translateY(-3px); }

/* 맨 위로(back-to-top) FAB — 우하단 고정. JS가 스크롤 위치에 따라 display 토글(기본 숨김). */
.scroll-top-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.6);
	background: rgba(var(--c-deep-4-rgb), 0.92);
	color: rgb(var(--c-sky-3-rgb));
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: none; /* JS: 스크롤 임계 초과 시 flex */
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.5);
	z-index: 100;
	transition: background var(--t-base), transform var(--t-base), color var(--t-base);
}
.scroll-top-btn:hover {
	background: rgba(var(--c-nv-28-rgb), 0.96);
	color: #fff;
	transform: translateY(-2px);
}
/* 게임 모달 안 버튼은 모달(z-index 8000) 위로 */
.modal-scroll-top { z-index: 8100; }
.game-thumb {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(135deg, rgba(var(--c-deep-4-rgb), 0.92) 0%, rgba(var(--c-deep-8-rgb), 0.96) 60%, rgba(var(--c-deep-6-rgb), 1) 100%);
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.28);
	border-radius: var(--r-md);
	overflow: hidden;
	display: grid;
	place-items: center;
	transition: all var(--t-base);
}
.game-thumb::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 30% 30%, rgba(var(--c-sky-1-rgb), 0.12), transparent 50%),
		radial-gradient(circle at 70% 70%, rgba(var(--c-nv-43-rgb), 0.10), transparent 50%);
	pointer-events: none;
	transition: opacity 0.4s;
}
.game-num {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 600;
	letter-spacing: 0.06em;
	background: linear-gradient(180deg, rgb(var(--c-sky-3-rgb)) 0%, rgb(var(--c-sky-2-rgb)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.4;
	transition: all 0.4s;
}
.game-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: rgb(var(--c-sky-7-rgb));
	background: rgba(var(--c-deep-6-rgb), 0.82);
	opacity: 0;
	transition: opacity 0.35s;
	z-index: 2;
	backdrop-filter: blur(2px);
	text-shadow: 0 0 8px rgba(var(--c-sky-1-rgb), 0.6);
}
.game-card:hover .game-thumb {
	border-color: rgba(var(--c-sky-2-rgb), 0.6);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(var(--c-sky-1-rgb), 0.22);
}
.game-card:hover .game-num { opacity: 0.12; transform: scale(0.95); }
.game-card:hover .game-play { opacity: 1; }
.game-name {
	font-size: 14px;
	color: var(--t-0);
	letter-spacing: 0.02em;
	text-align: center;
	line-height: 1.4;
	padding: 0 4px;
}
.game-card:hover .game-name { color: rgb(var(--c-sky-3-rgb)); }

@media (max-width: 1200px) {
	#modal-game-selection .game-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 900px) {
	#modal-game-selection .game-grid { grid-template-columns: repeat(4, 1fr); }
	.game-toolbar { padding: 14px 16px; }
	.game-search .field-input { min-width: 0; flex: 1; }
}
@media (max-width: 600px) {
	#modal-game-selection .game-grid { grid-template-columns: repeat(3, 1fr); }
	.game-toolbar { flex-direction: column; align-items: stretch; }
	.game-filters { justify-content: center; flex-wrap: wrap; }
	.game-search { width: 100%; }
}

/* ── 카드 크게 보기 토글 (2026-07-21) ──
   ★ 열 수 자체는 JS가 인라인 grid-template-columns(renderGameGrid/applyGameCardView)로 제어한다
   (모달 그리드는 인라인 minmax(128/200px)를 쓰고, 인라인이 CSS보다 우선하므로 CSS 규칙으론 못 바꾼다).
   cards-large 클래스 = 상태 표식(재렌더 시 min폭 유지 판정) + 버튼 활성 표시용. */
.game-view-toggle {
	padding: 8px 14px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--t-2);
	border: 1px solid rgba(var(--c-sky-10-rgb), 0.3);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.game-view-toggle:hover { color: var(--t-0); border-color: rgba(var(--c-sky-2-rgb), 0.6); }
.game-view-toggle[aria-pressed="true"] {
	color: rgb(var(--c-sky-3-rgb));
	border-color: rgba(var(--c-sky-2-rgb), 0.6);
	background: rgba(var(--c-sky-2-rgb), 0.12);
}
/* 닫기 = 머리글 띠 위. z-index 는 강조선(::after)보다 위여야 눌린다. */
.modal-close {
	position: absolute; top: 14px; right: 14px; z-index: 3;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	color: #9aa4bb; font-size: 13px;
	transition: all var(--t-fast);
}
.modal-close:hover { background: rgba(255,255,255,0.16); color: #f2f6fc; }
.modal-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 0.34em;
	color: #c9a86a; text-transform: uppercase;
	margin-bottom: 6px;
}
/* 제목 — 종전 30px + 밑줄에서 19px 로. 구분은 머리글 아래 금색 강조선이 맡는다. */
.modal-title {
	margin: 0;
	font-size: 19px; font-weight: 700; letter-spacing: -0.2px;
	color: #f2f6fc;
}

/* 폼 */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field-label { font-size: 15px; color: var(--t-2); font-weight: 700; letter-spacing: 0.03em; }
.field-input {
	width: 100%; padding: 14px 16px;
	background: var(--bg-1); border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	color: var(--t-0); font-size: 16px; font-family: var(--font-body);
	transition: border-color var(--t-fast);
}
.field-input:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(var(--c-gold-a-rgb), 0.08); }
.field-input::placeholder { color: var(--t-3); }
/* .field-hint — 금액 정책 안내(최소·단위·최대). **지켜야 하는 값**이라 설명문과 위계가 다르다.
   ★ 2026-09-02 정정: 종전 `--t-3`(흰색 40%)은 너무 흐려 읽고도 안 지켰다(파트너웹 동일 지적 = 0ec4ca17).
     주 강조 토큰 + 왼쪽 띠 + 옅은 배경으로 「규칙」임을 드러낸다.
   ★ 경고색을 쓰지 않는 이유 — 회원이 잘못한 것이 없는데 노랑·빨강을 띄우면 과한 알림이 된다.
   ★ 색은 토큰(`--c-sky-*`)만 쓴다 = 스킨(방앗간·green·luxury)마다 그 스킨 색으로 나온다.
     hex·rgb 리터럴을 넣으면 이 안내만 다른 색으로 남는다(정적 테스트가 막는다). */
.field-hint {
	display: block; margin-top: 6px; padding: 6px 10px;
	font-size: 14px; font-weight: 600;
	color: rgb(var(--c-sky-3-rgb));
	background: rgba(var(--c-sky-1-rgb), 0.10);
	border-left: 3px solid rgba(var(--c-sky-1-rgb), 0.55);
	border-radius: 6px;
}
.field-hint[hidden] { display: none; }

/* ─── Custom Select (select-enhanced) — JS enhanced ──────── */
.select-enhanced { position: relative; display: block; width: 100%; }
.select-enhanced > select {
	position: absolute !important; opacity: 0 !important;
	width: 0 !important; height: 0 !important;
	pointer-events: none !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
}
.select-enhanced-trigger {
	width: 100%; padding: 12px 40px 12px 14px;
	background: rgba(0,0,0,0.4); border: 1px solid var(--line);
	border-radius: 6px; color: var(--t-0);
	font-size: 15px; font-family: inherit;
	text-align: left; cursor: pointer;
	transition: border-color .2s, background .2s, box-shadow .2s;
	display: flex; align-items: center; justify-content: space-between;
	outline: none; line-height: normal;
}
.select-enhanced-trigger:hover { border-color: var(--gold-1); }
.select-enhanced.is-open .select-enhanced-trigger,
.select-enhanced-trigger:focus {
	border-color: var(--gold-1);
	background: rgba(var(--c-gold-a-rgb), 0.04);
	box-shadow: 0 0 0 3px rgba(var(--c-gold-a-rgb), 0.1);
}
.select-enhanced-value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t-0); }
.select-enhanced-value.is-placeholder { color: var(--t-3); }
.select-enhanced-arrow { color: var(--gold-1); font-size: 10px; margin-left: 10px; transition: transform .2s; flex-shrink: 0; }
.select-enhanced.is-open .select-enhanced-arrow { transform: rotate(180deg); }
.select-enhanced-menu {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0;
	background: var(--bg-1); border: 1px solid var(--line);
	border-radius: 6px; list-style: none;
	padding: 6px; margin: 0;
	opacity: 0; transform: translateY(-6px); pointer-events: none;
	transition: opacity .2s, transform .2s;
	z-index: 50; max-height: 280px; overflow-y: auto;
	box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
.select-enhanced.is-open .select-enhanced-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.select-enhanced-menu li {
	padding: 10px 14px; cursor: pointer; color: var(--t-1);
	font-size: 14px; border-radius: 4px;
	transition: background .15s, color .15s;
}
.select-enhanced-menu li:hover { background: rgba(var(--c-gold-a-rgb), 0.08); color: var(--t-0); }
.select-enhanced-menu li.is-selected { background: rgba(var(--c-gold-a-rgb), 0.12); color: var(--gold-1); font-weight: 600; }
.select-enhanced-menu li.is-disabled { color: var(--t-3); cursor: not-allowed; }
.select-enhanced-menu li.is-disabled:hover { background: transparent; }
.modal-actions {
	display: flex; gap: 10px; margin-top: 10px;
}
/* 액션바 = 주 동작과 보조 동작을 눈으로 가른다 (공지 팝업 바닥 정합).
   ★ `--bar` 를 붙인 줄만 바가 된다 — 마이페이지 카드 안 「변경」·「등록」처럼
     본문 중간에 있는 버튼 줄까지 바가 되면 카드가 겹겹이 접시처럼 보인다. */
.modal-actions--bar {
	align-items: center;
	flex-wrap: wrap;
	margin-top: 22px;
	padding: 13px 14px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
}
/* 보조 동작은 왼쪽 끝, 주 동작은 오른쪽 (충전신청 「입금계좌 문의」) */
.modal-actions--bar .btn-inquiry { margin-right: auto; }

/* ============================================================
   HUD 모달 — 미드바 디자인 언어 적용 (.hud-scope 적용 시)
   다크 네이비 + 시안/퍼플 글로우 + 메탈 실버 타이포
   ============================================================ */

/* 백드롭 — 살짝 푸른 톤의 깊은 어둠 */
.hud-scope .modal-backdrop {
	background: radial-gradient(
		ellipse at center,
		rgba(var(--c-nv-01-rgb), 0.78) 0%,
		rgba(var(--c-deep-7-rgb), 0.92) 100%
	);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* ── 모달 HUD 오버라이드 걷어냄 (2026-09-03) ──────────────────────────────
   종전에는 `.hud-scope` 가 카드 배경(시안/퍼플 코너 글로우) · 상단 글로우 라인 ·
   닫기 · 라벨 · 메탈 실버 제목을 따로 덮어썼다. 통일 규칙(위쪽 `.modal-card` 블록)이
   같은 자리를 정하므로 남겨 두면 **특정도가 높은 이쪽이 이겨서 통일이 안 먹는다.**
   그래서 규칙을 옮긴 게 아니라 지웠다 — 두 벌이 남으면 다음 사람이 어느 쪽을
   고쳐야 하는지 알 수 없다.
   ★ `.hud-scope .modal-backdrop`(푸른 딥 백드롭 + blur)은 그대로 둔다.
     카드 밖이라 통일 규칙과 겹치지 않고, 미드바·히어로와 호응하는 부분이다.
   ★ 되돌리려면 git 이력을 본다 (2026-09-03 이전 이 파일).
   ───────────────────────────────────────────────────────────────────────── */

/* 폼 라벨 / 힌트 */
.hud-scope .field-label {
	color: rgba(var(--c-nv-50-rgb), 0.95);
}
.hud-scope .field-hint {
	/* ★ 2026-09-02 — 종전 `--c-nv-45` 70%(흐린 회색)가 베이스 강조를 덮어써서 읽히지 않았다.
	   금액 정책 안내는 「지켜야 하는 값」이므로 hud 안에서도 강조를 유지한다(위 .field-hint 주석 참조). */
	color: rgb(var(--c-sky-3-rgb));
}

/* 폼 인풋 */
.hud-scope .field-input {
	background: rgba(var(--c-deep-5-rgb), 0.7);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.2);
}
.hud-scope .field-input::placeholder {
	color: rgba(var(--c-nv-45-rgb), 0.5);
}
.hud-scope .field-input:focus {
	border-color: rgba(var(--c-sky-1-rgb), 0.55);
	background: rgba(var(--c-nv-16-rgb), 0.85);
	box-shadow:
		0 0 0 3px rgba(var(--c-sky-1-rgb), 0.12),
		0 0 16px rgba(var(--c-sky-1-rgb), 0.2);
}
.hud-scope .field-input[readonly] {
	background: rgba(var(--c-deep-7-rgb), 0.55);
	color: rgba(var(--c-sky-4-rgb), 0.7);
	border-color: rgba(var(--c-sky-2-rgb), 0.1);
}

/* ── 버튼 오버라이드 ─────────────────── */

/* 주 액션: .btn-primary → 딥 바이올렛 (회원가입 버튼 톤과 통일) */
.hud-scope .btn-primary {
	background: linear-gradient(180deg,
		rgb(var(--c-violet-6-rgb)) 0%,
		rgb(var(--c-violet-7-rgb)) 22%,
		rgb(var(--c-violet-8-rgb)) 48%,
		rgb(var(--c-violet-9-rgb)) 70%,
		rgb(var(--c-nv-09-rgb)) 90%,
		rgb(var(--c-violet-8-rgb)) 100%
	);
	color: #fff;
	border: 1px solid rgba(var(--c-violet-2-rgb), 0.32);
	text-shadow: 0 1px 2px rgba(0,0,0,0.95);
	box-shadow:
		0 6px 18px rgba(var(--c-nv-13-rgb), 0.6),
		inset 0 1px 0 rgba(var(--c-violet-4-rgb), 0.22),
		inset 0 -2px 4px rgba(0,0,0,0.5);
}
.hud-scope .btn-primary:hover {
	background: linear-gradient(180deg,
		rgb(var(--c-violet-5-rgb)) 0%,
		rgb(var(--c-violet-6-rgb)) 22%,
		rgb(var(--c-violet-7-rgb)) 48%,
		rgb(var(--c-violet-8-rgb)) 70%,
		rgb(var(--c-violet-9-rgb)) 90%,
		rgb(var(--c-violet-6-rgb)) 100%
	);
	border-color: rgba(var(--c-violet-2-rgb), 0.5);
	box-shadow:
		0 9px 24px rgba(var(--c-violet-6-rgb), 0.55),
		inset 0 1px 0 rgba(var(--c-violet-4-rgb), 0.32);
	transform: translateY(-1px);
	filter: brightness(1.08);
}

/* 보조: .btn-secondary → 딥 네이비 (로그인 버튼 톤) */
.hud-scope .btn-secondary {
	background: linear-gradient(180deg,
		rgba(var(--c-navy-1-rgb), 0.5) 0%,
		rgba(var(--c-nv-24-rgb), 0.85) 50%,
		rgba(var(--c-nv-17-rgb), 0.95) 100%
	);
	color: rgba(var(--c-sky-4-rgb), 0.95);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.32);
	text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.hud-scope .btn-secondary:hover {
	background: linear-gradient(180deg,
		rgba(var(--c-nv-41-rgb), 0.6) 0%,
		rgba(var(--c-nv-29-rgb), 0.9) 100%
	);
	border-color: rgba(var(--c-sky-2-rgb), 0.5);
	color: #fff;
	box-shadow: 0 0 16px rgba(var(--c-sky-1-rgb), 0.25);
}

/* 고스트 — 가독성용 톤 조정 */
.hud-scope .btn-ghost {
	color: rgba(var(--c-nv-50-rgb), 0.75);
}
.hud-scope .btn-ghost:hover {
	color: #fff;
	background: rgba(var(--c-sky-1-rgb), 0.08);
}

/* 빠른 금액 버튼 (m-quickbtns 안의 ghost들) */
.hud-scope .m-quickbtns .btn-ghost {
	background: rgba(var(--c-deep-1-rgb), 0.55);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.2);
	color: rgba(var(--c-sky-4-rgb), 0.85);
}
.hud-scope .m-quickbtns .btn-ghost:hover {
	background: rgba(var(--c-deep-9-rgb), 0.75);
	border-color: rgba(var(--c-sky-1-rgb), 0.45);
	color: #fff;
	box-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.25);
}

/* ── 알림 박스 (m-alert) ─────────────── */
.hud-scope .m-alert {
	background:
		radial-gradient(ellipse 80% 100% at 0% 0%, rgba(var(--c-gold-b-rgb), 0.06) 0%, transparent 70%),
		linear-gradient(180deg,
			rgba(var(--c-deep-3-rgb), 0.65) 0%,
			rgba(var(--c-deep-1-rgb), 0.78) 100%
		);
	border: 1px solid rgba(var(--c-gold-b-rgb), 0.22);
	border-left: 2px solid rgba(var(--c-gold-b-rgb), 0.6);
}
.hud-scope .m-alert-icon {
	background: linear-gradient(180deg, rgb(var(--c-gold-b-rgb)) 0%, #b45309 100%);
	color: #1c0e02;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.3),
		0 0 12px rgba(var(--c-gold-b-rgb), 0.4);
}
.hud-scope .m-alert-title {
	color: #fbbf24;
	text-shadow: 0 0 6px rgba(var(--c-gold-b-rgb), 0.3);
}
.hud-scope .m-alert ul {
	color: rgba(var(--c-nv-50-rgb), 0.85);
}

/* ── 셀렉트박스 / 텍스트에리어 ─────────────────── */
.hud-scope .field-select {
	background: rgba(var(--c-deep-5-rgb), 0.7);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.2);
	color: #fff;
}
.hud-scope .field-select:focus {
	outline: none;
	border-color: rgba(var(--c-sky-1-rgb), 0.55);
	background: rgba(var(--c-nv-16-rgb), 0.85);
	box-shadow:
		0 0 0 3px rgba(var(--c-sky-1-rgb), 0.12),
		0 0 16px rgba(var(--c-sky-1-rgb), 0.2);
}
.hud-scope .field-select option {
	background: rgba(var(--c-deep-1-rgb), 0.98);
	color: #fff;
}
.hud-scope textarea.field-input {
	resize: vertical;
}

/* ── 섹션 헤더 / 타이틀 ───────────────── */
.hud-scope .m-section-head {
	border-bottom-color: rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .m-section-title {
	background: linear-gradient(180deg,
		rgb(var(--c-nv-60-rgb)) 0%,
		rgb(var(--c-nv-50-rgb)) 35%,
		rgb(var(--c-nv-45-rgb)) 80%,
		rgb(var(--c-nv-50-rgb)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 0 6px rgba(var(--c-sky-5-rgb), 0.25));
}

/* ── 정보 목록 (m-dl) ─────────────── */
.hud-scope .m-dl {
	border-top-color: rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .m-dl dt,
.hud-scope .m-dl dd {
	border-bottom-color: rgba(var(--c-sky-2-rgb), 0.12);
}
.hud-scope .m-dl dt {
	color: rgba(var(--c-sky-4-rgb), 0.75);
}
.hud-scope .m-dl dd {
	color: #fff;
}
.hud-scope .m-dl dd.strong {
	color: rgb(var(--c-sky-3-rgb));
	text-shadow: 0 0 6px rgba(var(--c-sky-1-rgb), 0.3);
}

/* ── 뱃지 (m-badge) ─────────────── */
.hud-scope .m-badge--wait {
	background: rgba(var(--c-sky-1-rgb), 0.18);
	color: rgb(var(--c-sky-3-rgb));
	border: 1px solid rgba(var(--c-sky-1-rgb), 0.3);
}
.hud-scope .m-badge--done {
	background: rgba(var(--c-violet-2-rgb), 0.18);
	color: rgb(var(--c-violet-4-rgb));
	border: 1px solid rgba(var(--c-violet-2-rgb), 0.3);
}

/* ── 테이블 (m-table) ─────────────── */
.hud-scope .m-table thead th {
	color: rgba(var(--c-sky-4-rgb), 0.85);
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.32);
	letter-spacing: 0.04em;
}
.hud-scope .m-table tbody td {
	border-bottom-color: rgba(var(--c-sky-2-rgb), 0.12);
	color: rgba(var(--c-nv-57-rgb), 0.92);
}
.hud-scope .m-table tbody tr:hover td {
	background: rgba(var(--c-sky-1-rgb), 0.05);
}
.hud-scope .m-table .col-num,
.hud-scope .m-table .col-date {
	color: rgba(var(--c-nv-45-rgb), 0.7);
}
.hud-scope .m-table .col-title a {
	color: rgba(var(--c-nv-57-rgb), 0.92);
}
.hud-scope .m-table .col-title a:hover {
	color: rgb(var(--c-sky-3-rgb));
}

/* ── 활동 유형 뱃지 (m-type) — 시맨틱 색상 유지, 톤만 살짝 조정 ─ */
.hud-scope .m-type--in {
	background: rgba(34,197,94,0.16);
	color: #6ee7b7;
}
.hud-scope .m-type--out {
	background: rgba(239,68,68,0.16);
	color: #fca5a5;
}
.hud-scope .m-type--etc {
	background: rgba(var(--c-violet-2-rgb), 0.16);
	color: rgb(var(--c-violet-4-rgb));
}

/* ── 카드 (m-cards / m-card) ─────────────── */
.hud-scope .m-card {
	background:
		radial-gradient(ellipse 200% 100% at 0% 0%, rgba(var(--c-sky-1-rgb), 0.05) 0%, transparent 70%),
		linear-gradient(180deg, rgba(var(--c-deep-3-rgb), 0.7) 0%, rgba(var(--c-deep-1-rgb), 0.85) 100%);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.2);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.08),
		0 4px 12px rgba(var(--c-deep-2-rgb), 0.4);
}
.hud-scope .m-card-head {
	border-bottom-color: rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .m-card-title {
	color: rgba(var(--c-sky-4-rgb), 0.85);
	letter-spacing: 0.06em;
}
.hud-scope .m-card-foot {
	border-top-color: rgba(var(--c-sky-2-rgb), 0.18);
}

/* VIP 뱃지 — 골드 → 바이올렛 그라데이션 (HUD 톤) */
.hud-scope .m-vip {
	background: linear-gradient(90deg, rgb(var(--c-violet-6-rgb)), rgb(var(--c-violet-1-rgb)));
	color: #fff;
	box-shadow: 0 0 8px rgba(var(--c-violet-1-rgb), 0.5);
	letter-spacing: 0.08em;
}

/* ── 툴바 / 메타 ─────────────── */
.hud-scope .m-meta {
	color: rgba(var(--c-nv-50-rgb), 0.85);
}
.hud-scope .m-meta b {
	color: rgb(var(--c-sky-3-rgb));
	text-shadow: 0 0 6px rgba(var(--c-sky-1-rgb), 0.3);
}

/* ── 게임 모달 iframe 프레임 ─────────────── */
.hud-scope .game-modal-frame {
	background: rgba(var(--c-deep-7-rgb), 0.7);
	border-radius: var(--r-md);
}

/* ── 이벤트 모달 ─────────────── */
.m-event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.m-event-card {
	display: block;
	background:
		radial-gradient(ellipse 200% 100% at 0% 0%, rgba(var(--c-sky-1-rgb), 0.06) 0%, transparent 70%),
		linear-gradient(180deg, rgba(var(--c-deep-3-rgb), 0.7), rgba(var(--c-deep-1-rgb), 0.85));
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.2);
	border-radius: var(--r-md);
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.m-event-card:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--c-sky-2-rgb), 0.45);
	box-shadow: 0 12px 28px rgba(var(--c-deep-2-rgb), 0.5), 0 0 0 1px rgba(var(--c-sky-1-rgb), 0.15);
}
.m-event-thumb {
	aspect-ratio: 16/9;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 17px;          /* ★ 묶음 2 보완: 카드 배너 = 22px→17px (긴 배너 우측 잘림/2열 깨짐 차단 / 상세는 inline font-size로 큼) */
	letter-spacing: 0.04em;   /* ★ 0.18em→0.04em: 과대 자간 우측 오버플로 차단 */
	color: #fff;
	text-shadow: 0 0 12px rgba(0,0,0,0.6);
	text-align: center;       /* 좌측 정렬 → 중앙 (상세와 동일) */
	padding: 8px 14px;        /* 가장자리 잘림 차단 */
	box-sizing: border-box;
}
/* ★ 이벤트 프리셋 4색 = admin↔userweb 단일 출처 정합 (값 동일 의무 / check-consistency §EVENT-PRESET 자동 검사).
   각 gradient는 단일 라인 = 정합 검사 추출 가능. 변경 시 adminweb .event-card-thumb.bg-* 동시 갱신 의무. */
.m-event-thumb--purple { background: linear-gradient(135deg, rgba(76,29,149,0.65) 0%, rgba(30,15,60,0.9) 50%, rgba(76,29,149,0.5) 100%); }
.m-event-thumb--cyan { background: linear-gradient(135deg, rgba(7,89,133,0.65) 0%, rgba(8,20,50,0.9) 50%, rgba(14,116,144,0.55) 100%); }
.m-event-thumb--gold { background: linear-gradient(135deg, rgba(180,83,9,0.65) 0%, rgba(40,25,5,0.9) 50%, rgba(202,138,4,0.55) 100%); }
.m-event-thumb--green { background: linear-gradient(135deg, rgba(6,95,70,0.65) 0%, rgba(6,30,22,0.9) 50%, rgba(5,150,105,0.55) 100%); }
/* 업로드 배경 이미지 = 카드 썸네일 (★ 묶음 2 보완: cover 잘림 → contain 비율 유지 전체 표시 / 레터박스 = 어두운 배경) */
.m-event-thumb--image {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(var(--c-deep-1-rgb), 0.92);
	position: relative;
}
.m-event-thumb--image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.32));
}
.m-event-thumb .m-event-banner-text {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	text-align: center;
	line-height: 1.3;
	word-break: keep-all;       /* 한글 단어 중간 분리 방지 */
	overflow-wrap: anywhere;    /* 초장문 토큰만 분리 (우측 잘림 차단) */
}
.m-event-body {
	padding: 14px 16px;
}
.m-event-title {
	font-weight: 700;
	color: #fff;
	font-size: 16px;
	line-height: 1.45;
	margin-bottom: 12px;
}
.m-event-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
}
.m-event-date {
	color: rgba(var(--c-nv-45-rgb), 0.7);
}

/* m-badge--hot — 이벤트 HOT 뱃지 */
.hud-scope .m-badge--hot {
	background: linear-gradient(90deg, #dc2626, rgb(var(--c-gold-b-rgb)));
	color: #fff;
	border: 1px solid rgba(var(--c-gold-b-rgb), 0.4);
	box-shadow: 0 0 8px rgba(var(--c-gold-b-rgb), 0.4);
}

/* ── FAQ 모달 ─────────────── */
.m-faq-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.18);
}
.m-faq-cats button {
	padding: 10px 18px;
	border-radius: var(--r-pill);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.22);
	background: rgba(var(--c-deep-1-rgb), 0.5);
	color: rgba(var(--c-sky-4-rgb), 0.8);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all var(--t-fast);
}
.m-faq-cats button:hover {
	background: rgba(var(--c-deep-9-rgb), 0.7);
	border-color: rgba(var(--c-sky-1-rgb), 0.4);
	color: #fff;
}
.m-faq-cats button.is-active {
	background: linear-gradient(180deg,
		rgba(var(--c-violet-6-rgb), 0.6) 0%,
		rgba(var(--c-violet-8-rgb), 0.85) 100%);
	border-color: rgba(var(--c-violet-2-rgb), 0.45);
	color: #fff;
	box-shadow: 0 0 12px rgba(var(--c-violet-1-rgb), 0.35);
}

.m-faq-search {
	display: flex;
	gap: 8px;
	margin-bottom: 22px;
}
.m-faq-search .field-input {
	flex: 1;
}

.m-accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.m-accordion details {
	background: rgba(var(--c-deep-1-rgb), 0.5);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.18);
	border-radius: var(--r-sm);
	overflow: hidden;
	transition: border-color 0.2s ease;
}
.m-accordion details:hover {
	border-color: rgba(var(--c-sky-2-rgb), 0.32);
}
.m-accordion details[open] {
	border-color: rgba(var(--c-sky-1-rgb), 0.4);
	box-shadow: 0 0 12px rgba(var(--c-sky-1-rgb), 0.15);
}
.m-accordion summary {
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 600;
	color: rgba(var(--c-nv-57-rgb), 0.95);
	font-size: 16px;
	list-style: none;
	position: relative;
	padding-right: 48px;
	transition: background 0.2s ease;
}
.m-accordion summary::-webkit-details-marker { display: none; }
.m-accordion summary::after {
	content: '+';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: rgb(var(--c-sky-3-rgb));
	font-size: 18px;
	font-weight: 400;
	transition: transform 0.2s ease, color 0.2s ease;
}
.m-accordion details[open] summary::after {
	content: '−';
	color: rgb(var(--c-violet-4-rgb));
}
.m-accordion summary:hover {
	background: rgba(var(--c-sky-1-rgb), 0.05);
}
.m-acc-ans {
	padding: 4px 20px 18px;
	color: rgba(var(--c-nv-50-rgb), 0.85);
	font-size: 15px;
	line-height: 1.7;
}

/* ============================================================
   서브페이지 레이아웃 (HUD 톤)
   ============================================================ */
.page-main {
	min-height: calc(100vh - var(--bar-h) - 80px);
	padding: 56px 0 72px;
	background: var(--bg-0);
}
.page-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.page-wrap--mid    { max-width: 760px; }
.page-wrap--narrow { max-width: 520px; }

/* 패널 — 서브페이지 콘텐츠 카드 (모달 카드와 동일 톤) */
.hud-scope .panel {
	position: relative;
	background:
		radial-gradient(ellipse 600px 400px at 0% 0%, rgba(var(--c-sky-1-rgb), 0.08) 0%, transparent 60%),
		radial-gradient(ellipse 500px 400px at 100% 100%, rgba(var(--c-violet-1-rgb), 0.07) 0%, transparent 60%),
		linear-gradient(180deg,
			rgba(var(--c-deep-3-rgb), 0.98) 0%,
			rgba(var(--c-deep-1-rgb), 1) 50%,
			rgba(var(--c-deep-5-rgb), 1) 100%
		);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.28);
	border-radius: var(--r-lg);
	padding: 32px;
	margin-bottom: 24px;
	box-shadow:
		0 16px 40px rgba(var(--c-deep-2-rgb), 0.5),
		inset 0 1px 0 rgba(var(--c-sky-3-rgb), 0.12),
		inset 0 -1px 0 rgba(0,0,0,0.5);
}
.hud-scope .panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(var(--c-sky-1-rgb), 0.5) 28%,
		rgba(var(--c-violet-1-rgb), 0.7) 50%,
		rgba(var(--c-sky-1-rgb), 0.5) 72%,
		transparent 100%
	);
	pointer-events: none;
}
.hud-scope .panel-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .panel-title {
	font-size: 24px;
	font-weight: 800;
	background: linear-gradient(180deg,
		rgb(var(--c-nv-60-rgb)) 0%,
		rgb(var(--c-nv-50-rgb)) 35%,
		rgb(var(--c-nv-45-rgb)) 80%,
		rgb(var(--c-nv-50-rgb)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter:
		drop-shadow(0 1px 0 rgba(0,0,0,0.7))
		drop-shadow(0 0 8px rgba(var(--c-sky-5-rgb), 0.25));
	letter-spacing: 0.02em;
}
.hud-scope .panel-title small {
	font-size: 13px;
	font-weight: 600;
	color: rgba(var(--c-sky-4-rgb), 0.6);
	margin-left: 10px;
	letter-spacing: 0.18em;
	-webkit-text-fill-color: rgba(var(--c-sky-4-rgb), 0.6);
}
.hud-scope .panel-note {
	margin-top: 16px;
	font-size: 14px;
	color: rgba(var(--c-nv-45-rgb), 0.7);
}
.hud-scope .panel-note a {
	color: rgb(var(--c-sky-3-rgb));
	text-decoration: underline;
}

/* 정보 리스트 (info-list) — green과 동일 클래스명 */
.hud-scope .info-list {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 0;
	border-top: 1px solid rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .info-list dt,
.hud-scope .info-list dd {
	padding: 14px 10px;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.12);
	font-size: 16px;
}
.hud-scope .info-list dt {
	color: rgba(var(--c-sky-4-rgb), 0.75);
	font-weight: 600;
}
.hud-scope .info-list dd {
	color: #fff;
}
.hud-scope .info-list dd.strong {
	color: rgb(var(--c-sky-3-rgb));
	font-weight: 800;
	text-shadow: 0 0 6px rgba(var(--c-sky-1-rgb), 0.3);
}

/* 패널 그리드 (2열) */
.panel-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
@media (max-width: 768px) {
	.panel-grid { grid-template-columns: 1fr; }
}

/* 알림 박스 (notice) — green과 동일 클래스명 */
.hud-scope .notice {
	background:
		radial-gradient(ellipse 80% 100% at 0% 0%, rgba(var(--c-gold-b-rgb), 0.06) 0%, transparent 70%),
		linear-gradient(180deg,
			rgba(var(--c-deep-3-rgb), 0.6) 0%,
			rgba(var(--c-deep-1-rgb), 0.78) 100%);
	border: 1px solid rgba(var(--c-gold-b-rgb), 0.22);
	border-left: 3px solid rgba(var(--c-gold-b-rgb), 0.6);
	border-radius: var(--r-md);
	padding: 16px 22px;
	margin-bottom: 22px;
}
.hud-scope .notice strong {
	display: block;
	color: #fbbf24;
	font-size: 16px;
	margin-bottom: 8px;
	text-shadow: 0 0 6px rgba(var(--c-gold-b-rgb), 0.3);
}
.hud-scope .notice ul {
	margin: 0; padding: 0;
	list-style: none;
	color: rgba(var(--c-nv-50-rgb), 0.85);
	font-size: 15px;
	line-height: 1.7;
}
.hud-scope .notice li {
	position: relative;
	padding-left: 14px;
}
.hud-scope .notice li::before {
	content: '·';
	position: absolute; left: 4px;
	color: rgba(var(--c-gold-b-rgb), 0.7);
}

/* data-table — green/luxury 공통 클래스명 */
.hud-scope .data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}
.hud-scope .data-table thead th {
	padding: 14px 12px;
	font-size: 15px;
	font-weight: 700;
	color: rgba(var(--c-sky-4-rgb), 0.85);
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.32);
	text-align: left;
}
.hud-scope .data-table tbody td {
	padding: 15px 12px;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.12);
	color: rgba(var(--c-nv-57-rgb), 0.92);
	font-size: 16px;
}
.hud-scope .data-table tbody tr:hover td {
	background: rgba(var(--c-sky-1-rgb), 0.05);
}
.hud-scope .data-table a {
	color: rgba(var(--c-nv-57-rgb), 0.92);
	text-decoration: none;
}
.hud-scope .data-table a:hover {
	color: rgb(var(--c-sky-3-rgb));
}

/* tag (green 호환) — m-badge와 같은 톤 */
.hud-scope .tag {
	display: inline-block;
	padding: 5px 14px;
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 700;
	background: rgba(var(--c-sky-1-rgb), 0.15);
	color: rgb(var(--c-sky-3-rgb));
	border: 1px solid rgba(var(--c-sky-1-rgb), 0.28);
}
.hud-scope .tag.hot {
	background: linear-gradient(90deg, #dc2626, rgb(var(--c-gold-b-rgb)));
	color: #fff;
	border-color: rgba(var(--c-gold-b-rgb), 0.4);
}
.hud-scope .tag.replied {
	background: rgba(var(--c-violet-2-rgb), 0.18);
	color: rgb(var(--c-violet-4-rgb));
	border-color: rgba(var(--c-violet-2-rgb), 0.3);
}
.hud-scope .tag.waiting {
	background: rgba(var(--c-sky-1-rgb), 0.18);
	color: rgb(var(--c-sky-3-rgb));
	border-color: rgba(var(--c-sky-1-rgb), 0.3);
}

/* 페이지네이션 */
.hud-scope .pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}
.hud-scope .pagination .btn-sm {
	min-width: 36px;
	padding: 8px 14px;
}

/* 섹션 헤더 (페이지 컨텐츠 안의 작은 sub-head) */
.hud-scope .sub-head {
	margin-top: 28px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(var(--c-sky-2-rgb), 0.18);
}
.hud-scope .sub-head h3 {
	font-size: 14px;
	font-weight: 700;
	color: rgba(var(--c-sky-4-rgb), 0.85);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hud-scope .sub-head h3 small {
	font-size: 11px;
	color: rgba(var(--c-nv-45-rgb), 0.6);
	margin-left: 10px;
	letter-spacing: 0.2em;
}

/* 폼 필드 그리드 (2열) */
.hud-scope .field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 18px;
}
@media (max-width: 640px) {
	.hud-scope .field-grid { grid-template-columns: 1fr; }
}

/* amount-btns — green 호환 (입출금 빠른 금액) */
.hud-scope .amount-btns {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin: 12px 0;
}

/* 서브페이지 푸터 */
.page-footer {
	padding: 32px 24px;
	text-align: center;
	color: rgba(var(--c-nv-45-rgb), 0.5);
	font-size: 13px;
	border-top: 1px solid rgba(var(--c-sky-2-rgb), 0.12);
	background: rgba(var(--c-deep-7-rgb), 0.4);
}

/* 미드바 — 서브페이지에선 a 태그도 button과 동일하게 */
a.midbar-navitem {
	text-decoration: none;
}
a.midbar-navitem.is-active {
	background:
		linear-gradient(180deg,
			rgba(var(--c-sky-1-rgb), 0.12) 0%,
			rgba(var(--c-nv-27-rgb), 0.25) 100%);
	box-shadow:
		inset 0 1px 0 rgba(var(--c-sky-4-rgb), 0.3),
		inset 0 -2px 4px rgba(0,0,0,0.5);
}
a.midbar-navitem.is-active::after {
	opacity: 1;
	left: 6%; right: 6%;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, rgba(var(--c-sky-3-rgb), 1) 50%, transparent 100%);
	box-shadow: 0 0 14px rgba(var(--c-sky-2-rgb), 0.95);
}

/* 빈 상태 (404/500) */
.hud-scope .empty-state {
	text-align: center;
	padding: 80px 24px;
}
.hud-scope .empty-state-code {
	font-family: var(--font-display);
	font-size: clamp(80px, 12vw, 160px);
	background: linear-gradient(180deg,
		rgb(var(--c-nv-50-rgb)) 0%,
		rgb(var(--c-nv-42-rgb)) 50%,
		rgb(var(--c-nv-45-rgb)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(0 0 16px rgba(var(--c-sky-5-rgb), 0.4))
		drop-shadow(0 0 32px rgba(var(--c-violet-1-rgb), 0.25));
	margin-bottom: 16px;
}
.hud-scope .empty-state-title {
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 12px;
}
.hud-scope .empty-state-desc {
	color: rgba(var(--c-nv-50-rgb), 0.7);
	margin-bottom: 28px;
	line-height: 1.7;
}

/* ============================================================
   서비스 모달 내부 컴포넌트
   ============================================================ */

/* 섹션 */
.m-section { margin-bottom: 28px; }
.m-section:last-child { margin-bottom: 0; }
.m-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.m-section-title { font-size: 16px; font-weight: 700; color: var(--gold-2); letter-spacing: 0.07em; text-transform: uppercase; }

/* 정보 목록 */
.m-dl { display: grid; grid-template-columns: auto 1fr; border-top: 1px solid var(--line); }
.m-dl dt, .m-dl dd { padding: 13px 8px; border-bottom: 1px solid var(--line); font-size: 16px; }
.m-dl dt { color: var(--t-2); font-weight: 600; padding-right: 20px; white-space: nowrap; }
.m-dl dd { color: var(--t-0); }
.m-dl dd.strong { color: var(--gold-2); font-weight: 700; }

/* 빠른 금액 버튼 */
.m-quickbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.m-quickbtns .btn { min-width: 64px; font-size: 14px; padding: 10px 14px; }

/* 주의사항 알림 */
.m-alert { display: flex; gap: 14px; padding: 18px 20px; background: rgba(var(--c-gold-a-rgb), 0.05); border: 1px solid rgba(var(--c-gold-a-rgb), 0.15); border-radius: var(--r-sm); margin-top: 22px; }
.m-alert-icon { font-size: 22px; flex-shrink: 0; color: var(--gold-1); line-height: 1.3; }
.m-alert-title { font-size: 16px; font-weight: 700; color: var(--gold-2); margin-bottom: 8px; display: block; }
.m-alert ul { margin: 0; padding-left: 18px; }
.m-alert ul li { list-style: disc; font-size: 14px; color: var(--t-2); margin: 5px 0; line-height: 1.6; }

/* 상태 뱃지 */
.m-badge { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; }
.m-badge--wait { background: rgba(var(--c-sky-6-rgb), 0.18); color: rgb(var(--c-sky-2-rgb)); border: 1px solid rgba(var(--c-sky-6-rgb), 0.25); }
.m-badge--done { background: rgba(var(--c-gold-a-rgb), 0.12); color: var(--gold-2); border: 1px solid var(--gold-line); }

/* 문의 / 활동 테이블 */
.m-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.m-table thead th { padding: 13px 12px; font-size: 15px; font-weight: 700; color: var(--t-2); border-bottom: 1px solid var(--line-2); text-align: left; }
.m-table tbody td { padding: 15px 12px; border-bottom: 1px solid var(--line); color: var(--t-1); font-size: 16px; }
.m-table tbody tr:hover td { background: rgba(255,255,255,0.025); }
.m-table .col-num  { width: 40px; text-align: center; color: var(--t-3); font-size: 14px; }
.m-table .col-status { width: 110px; text-align: center; white-space: nowrap; }
.m-table .col-date { width: 90px; text-align: center; color: var(--t-3); font-size: 15px; white-space: nowrap; }
.m-table .col-manage { width: 80px; text-align: center; }
.m-table .col-type { width: 64px; text-align: center; }
.m-table .col-amt { text-align: right; font-weight: 700; }
.m-table .col-title a { color: var(--t-1); text-decoration: none; }
.m-table .col-title a:hover { color: var(--gold-2); }

/* 타입 뱃지 */
.m-type { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.m-type--in  { background: rgba(34,197,94,0.15); color: #4ade80; }
.m-type--out { background: rgba(239,68,68,0.13); color: #f87171; }
.m-type--etc { background: rgba(255,255,255,0.07); color: var(--t-2); }

/* 모달 뷰 전환 */
.mod-view { display: none; }
.mod-view.is-active { display: block; }

/* 뷰 툴바 */
.m-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.m-meta { font-size: 17px; color: var(--t-2); }
.m-meta b { color: var(--t-0); font-size: 18px; }

/* 마이페이지 카드 */
.m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.m-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.m-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.m-card-title { font-size: 15px; font-weight: 700; color: var(--gold-2); letter-spacing: 0.05em; text-transform: uppercase; }
.m-card-foot { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.m-vip { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 800; background: linear-gradient(90deg,#b8860b,rgb(var(--c-gold-a-rgb))); color: #000; letter-spacing: 0.06em; }
@media (max-width: 520px) { .m-cards { grid-template-columns: 1fr; } }

/* 셀렉트 인풋 */
.field-select {
	width: 100%; padding: 13px 16px;
	background: var(--bg-1); border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	color: var(--t-0); font-size: 16px; font-family: var(--font-body);
	transition: border-color var(--t-fast);
	appearance: none; cursor: pointer;
}
.field-select:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 3px rgba(var(--c-gold-a-rgb), 0.08); }
.field-select option { background: var(--bg-2); }

/* 필드 2컬럼 행 */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 500px) { .field-row { grid-template-columns: 1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
	padding: 32px 24px;
	border-top: 1px solid var(--line);
	text-align: center;
	color: var(--t-3);
	font-size: 13px;
	letter-spacing: 0.04em;
}
.footer-brand {
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--gold-2);
	margin-bottom: 10px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.gs-left, .gs-right { width: 360px; }
	.game-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
}

@media (max-width: 1100px) {
	.midbar-nav { display: none; }
	.midbar-toggle { display: flex; margin: 0 auto; }
}

@media (max-width: 768px) {
	.midbar-brand { margin-right: 12px; }
	.midbar-sep { display: none; }
	.userbar-inner { padding: 8px 12px; gap: 8px; }
	/* 모바일: 정보(1행) + 버튼(2행) 명확 분리 */
	.userbar-user {
		flex-direction: column;
		gap: 8px;
		font-size: 13px;
		width: 100%;
	}
	.userbar-actions { gap: 4px; }
	.userbar-actions .btn-sm { padding: 6px 10px; font-size: 12px; }
	.user-grade { font-size: 11px; padding: 2px 7px; }

	/* 입금 모달 — 모바일에서 라벨+입력 가로 배치 (출금 모달과 통일감) */
	/* form 자체에 flex column gap → .field, .field-row, .m-quickbtns 등 모든 자식 균일 14px 간격 */
	#modal-deposit form {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	#modal-deposit .field-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 0; }
	#modal-deposit .field {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 12px;
		margin-bottom: 0;
	}
	#modal-deposit .field-label {
		min-width: 80px;
		flex-shrink: 0;
		margin: 0;
	}
	#modal-deposit .field-input {
		flex: 1;
		min-width: 0;
	}
	/* 가로 배치(라벨-입력 한 줄)에서 힌트는 다음 줄 전체 폭. 위 여백만 남긴다
	   (margin:0 으로 지우면 입력칸에 붙어 띠가 입력 테두리와 겹쳐 보인다 / 2026-09-02). */
	#modal-deposit .field-hint { width: 100%; margin: 6px 0 0; }
	/* .field-row 안 .field는 grid gap만 사용 (margin-bottom 중복 제거) */
	#modal-deposit .field-row .field { margin-bottom: 0; }

	.gs-left, .gs-right { display: none; }
	.game-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
	/* .g-ca-grid는 베이스 3열 그대로 유지 (480px↓에서만 2열) */

	/* 모바일 — 히어로 컴팩트 (배경/캐릭터/슬라이드 모두 제거, 로고만 단색 박스로) */
	.hero {
		min-height: auto;
		padding: 8px 16px;
		background:
			radial-gradient(ellipse 80% 100% at 50% 50%, rgba(var(--c-sky-1-rgb), 0.08) 0%, transparent 70%),
			linear-gradient(180deg, rgb(var(--c-nv-14-rgb)) 0%, rgb(var(--c-nv-02-rgb)) 100%);
		border-bottom: 1px solid rgba(var(--c-sky-10-rgb), 0.22);
		box-shadow: inset 0 1px 0 rgba(var(--c-sky-8-rgb), 0.05), inset 0 -1px 0 rgba(0,0,0,0.5);
	}
	.hero-bg-slide,
	.hero-char-set,
	.hero-content,
	.hero-glow-line { display: none; }
	.hero-logo {
		position: static;
		transform: none;
	}
	.hero-brand-text { font-size: 22px; line-height: 1.2; }
	.hero-brand-sub { display: none; }

	/* 모바일 — 잭팟 섹션 제거 */
	.jackpot { display: none; }
}

/* 슬롯카드 중간 단계 — 3열 */
@media (max-width: 600px) {
	.game-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
}

@media (max-width: 480px) {
	:root { --bar-h: 56px; }
	.hero-brand-text { font-size: 30px; }
	.game-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.g-ca-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* ── 오프캔버스 모바일 메뉴 ─────────────────────────────────── */
.offcanvas {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: 280px;
	background: var(--bg-2);
	border-left: 1px solid var(--gold-line);
	z-index: 9500;
	transform: translateX(100%);
	transition: transform var(--t-slow);
	overflow-y: auto;
	padding: 24px;
}
.offcanvas.is-open { transform: translateX(0); }
.offcanvas-backdrop {
	position: fixed; inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 9400;
	opacity: 0; pointer-events: none;
	transition: opacity var(--t-base);
}
.offcanvas-backdrop.is-open { opacity: 1; pointer-events: auto; }
.offcanvas-close {
	position: absolute; top: 16px; right: 16px;
	width: 30px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	color: var(--t-2); font-size: 18px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
}
.offcanvas-nav { margin-top: 48px; }
.offcanvas-navitem {
	display: flex; align-items: center; gap: 14px;
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--r-md);
	font-size: 15px; font-weight: 800;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,0.92);
	margin-bottom: 8px;
	transition: transform 0.18s ease, filter 0.18s ease;
	border: 1px solid transparent;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}
.offcanvas-navitem .ico { font-size: 22px; flex-shrink: 0; }
.offcanvas-navitem:hover { transform: translateX(4px); filter: brightness(1.12); }
/* 오프캔버스 — glassmorphism 통일 */
.offcanvas-navitem.nav-deposit  { background: rgba(var(--c-sky-1-rgb), 0.07);  border-color: rgba(var(--c-sky-1-rgb), 0.2); }
.offcanvas-navitem.nav-withdraw { background: rgba(var(--c-nv-49-rgb), 0.07); border-color: rgba(var(--c-nv-49-rgb), 0.2); }
.offcanvas-navitem.nav-notice   { background: rgba(var(--c-cyan-1-rgb), 0.06);  border-color: rgba(var(--c-cyan-1-rgb), 0.18); }
.offcanvas-navitem.nav-contact  { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.offcanvas-navitem.nav-mypage   { background: rgba(var(--c-nv-46-rgb), 0.06);  border-color: rgba(var(--c-nv-46-rgb), 0.18); }
.offcanvas-navitem.nav-event    { background: rgba(var(--c-gold-c-rgb), 0.10);  border-color: rgba(var(--c-gold-c-rgb), 0.35); }
.offcanvas-navitem.nav-faq      { background: rgba(var(--c-violet-2-rgb), 0.10); border-color: rgba(var(--c-violet-2-rgb), 0.35); }



/* ============================================================
   공지 팝업 (묶음 3 / 2026-05-31) — ★ 이미지 팝업(.popup-notice)과 별 class·별 규격
   본문(서식 HTML)+이미지 다건 / 가변 높이 스크롤 / 다건 세로 배치
   ============================================================ */
.notice-popups {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-height: 92vh;
}
/* 캐러셀 — 한 번에 1건 + ◀ 현재/전체 ▶ */
.notice-popup-slot { display: flex; justify-content: center; }
.notice-popup-nav {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(var(--c-nv-18-rgb), 0.92);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.35);
}
.notice-popup-arrow {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 14px;
	font-family: inherit;
	background: rgba(var(--c-sky-2-rgb), 0.18);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.45);
	color: rgb(var(--c-nv-52-rgb));
	cursor: pointer;
}
.notice-popup-indicator { min-width: 48px; text-align: center; font-size: 13px; font-weight: 700; color: rgb(var(--c-nv-47-rgb)); }
.notice-popup {
	width: min(92vw, 560px);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	/* 본문 배경 = 공지 본문 고정색과 같은 값 (미리보기·상세와 한 벌) */
	background: #0f1420;
	border: 1px solid rgba(148, 163, 184, 0.28);
	border-radius: 16px;
	box-shadow: 0 28px 70px rgba(2, 6, 18, 0.55), 0 3px 10px rgba(2, 6, 18, 0.35);
	overflow: hidden;
}
/* ── 헤더 (2026-08-29) — 파트너웹 진입 팝업과 같은 마감 ────────────────
   종전에는 제목 한 줄에 얇은 구분선뿐이라 허전했다. 고정 라벨(NOTICE/공지사항)을 두고
   아래에 금색 그라데이션 강조선을 깔아 "공지"라는 성격을 먼저 읽히게 한다. */
.notice-popup-head {
	position: relative;
	flex: none;
	padding: 22px 26px 18px;
	background: linear-gradient(135deg, #182842 0%, #101b31 55%, #0c1526 100%);
}
.notice-popup-head::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, rgba(201,168,106,0) 0%, #c9a86a 20%, #ecd9ab 50%, #c9a86a 80%, rgba(201,168,106,0) 100%);
}
.notice-popup-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 4px;
	color: #c9a86a; margin-bottom: 6px;
}
.notice-popup-head-title {
	margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: #f2f6fc;
}
/* 항목 머리 = 제목 앞 금색 세로 바 + 날짜 우측 (파트너웹 .pw-entry-item-head 정합) */
.notice-popup-item-head {
	display: flex; align-items: baseline; gap: 10px;
	padding: 18px 26px 0;
}
.notice-popup-item-head h3 {
	margin: 0; position: relative; padding-left: 13px;
	font-size: 16px; font-weight: 700; color: #e8ecf4;
}
.notice-popup-item-head h3::before {
	content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
	width: 3px; border-radius: 2px;
	background: linear-gradient(180deg, #ecd9ab, #c9a86a);
}
.notice-popup-date { margin-left: auto; flex: none; font-size: 12px; color: #9aa4bb; }
.notice-popup-body {
	padding: 10px 26px 20px;
	overflow-y: auto;
	color: #e8ecf4;
	font-size: 14px;
	line-height: 1.75;
}
.notice-popup-body img { max-width: 100%; height: auto; }
.notice-popup-actions {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.03);
}
.notice-popup-hide { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #9aa4bb; cursor: pointer; user-select: none; }
.notice-popup-hide input { width: 16px; height: 16px; margin: 0; accent-color: #c9a86a; cursor: pointer; }
.notice-popup-hide:hover span { color: #e8ecf4; }
/* 닫기 = 파트너웹과 같은 톤 (종전에는 얇은 아웃라인이라 눌러야 할 버튼으로 안 읽혔다) */
.notice-popup-close {
	padding: 9px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	background: linear-gradient(135deg, #24395f, #16233d);
	border: 1px solid #3d4f73;
	color: #e8edf6;
	cursor: pointer;
	transition: filter .15s, transform .15s;
}
.notice-popup-close:hover { filter: brightness(1.12); }
.notice-popup-close:active { transform: translateY(1px); }
@media (max-width: 640px) {
	.notice-popup { width: min(92vw, 420px); max-height: 85vh; }
}

/* ============================================================
   POPUP NOTICES — 2020 HUD 스타일 (세련 + 고급)
   - 1~2개: 가운데 / 3개: 가로 균등 / 4개+: 4번째부터 오프셋 스택
   ============================================================ */

.popup-notices {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 90;
	display: flex;
	gap: 24px;
	pointer-events: none;
	max-width: 96vw;
}
.popup-notices .popup-notice { pointer-events: auto; }

/* 3개 이하: 단순 가로 가운데 (flex 기본 동작) */
/* 4개+: 4번째부터 absolute로 1~3번 위에 오프셋 스택 */
.popup-notices[data-count="4"],
.popup-notices[data-count="5"],
.popup-notices[data-count="6"],
.popup-notices[data-count="7"],
.popup-notices[data-count="8"],
.popup-notices[data-count="9"] {
	position: fixed;
}
.popup-notice.is-stacked {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* ── 카드 (배경 투명, 윤곽 + 액션바는 유지) ── */
.popup-notice {
	width: 360px;
	background: transparent;
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.28);
	border-radius: 10px;
	overflow: hidden;
	box-shadow:
		0 18px 44px rgba(0,0,0,0.55),
		0 0 22px rgba(var(--c-sky-1-rgb), 0.14);
	display: flex;
	flex-direction: column;
	animation: popupIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
	transition: opacity 0.28s ease, transform 0.28s ease;
}
.popup-notice.is-closing {
	opacity: 0;
	transform: scale(0.96) translateY(8px) !important;
}
@keyframes popupIn {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 상단 시안 글로우 라인 (HUD 정체성) */
.popup-notice::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(var(--c-sky-3-rgb), 0.55) 25%,
		rgba(var(--c-sky-1-rgb), 0.85) 50%,
		rgba(var(--c-sky-3-rgb), 0.55) 75%,
		transparent 100%);
	box-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.5);
	z-index: 2;
	pointer-events: none;
}

/* ── 이미지 영역 ── */
.popup-image {
	position: relative;
	display: block;
	width: 100%;
	/* 3:4 — 프리픽 생성 그림의 세로 비율과 **같게** 맞춘 값 (2026-09-12).
	   구 360/500(0.72) 은 3:4(0.75) 그림을 넣으면 object-fit:cover 가 좌우를 4% 잘라냈다.
	   테두리 문양처럼 가장자리가 중요한 그림은 그 4% 에서 바깥선이 깎인다. */
	aspect-ratio: 3 / 4;
	background: transparent;
	overflow: hidden;
	text-decoration: none;
	/* 테두리 «안쪽 구멍» = 문구칸이 차지할 범위 (아래 «문구칸» 블록 참고).
	   기본값 = 단색 프리셋 — 테두리를 **CSS 로 그리므로** 그림 프리셋과 구조가 같다.
	   ★ 좌우는 가로 기준, 위·아래는 세로 기준이다. 카드가 3:4 라 6% 와 4.5% 가
	     화면에서 **같은 px**(360px 카드에서 21.6px)이 된다 = 네 변이 고르게 보인다. */
	--popup-hole-t: 4.5%;
	--popup-hole-x: 6%;
	--popup-hole-b: 4.5%;
	/* 테두리 선 색 — 스킨이 --c-gold-d-rgb 를 갈아끼우므로 색벌이 **저절로** 따라온다
	   (그림 프리셋은 스킨마다 색 바꾼 JPG 를 따로 만들어 둬야 한다). */
	--popup-frame-line: rgba(var(--c-gold-d-rgb), 0.7);
}
/* 본문이 넘칠 때만 = 스크롤할 수 있다는 것을 보이게 한다 (2026-08-30).
   ★ 잘림 자체는 JS 의 flex-start + inner margin:auto 가 없앴다. 여기서 다루는 것은
     "아래에 더 있다"를 회원이 알 수 있느냐다 — 지금까지는 알 방법이 없었다.
   ★ .has-scroll 은 JS 가 실측(scrollHeight > clientHeight)해서 붙인다. 항상 깔면
     넘치지 않는 팝업에도 페이드가 생겨 없는 내용이 있는 것처럼 보인다.
   ★ 붙는 자리는 그림 맨 아래가 아니라 **문구칸의 아래 경계**다 (2026-09-12 2차 스모크).
     맨 아래에 붙이면 테두리 띠 위에 어둠이 얹혀 「테두리와 따로 논다」로 보인다. */
.popup-image.has-scroll::after {
	content: '';
	position: absolute;
	left: calc(var(--popup-hole-x) + 2px);
	right: calc(var(--popup-hole-x) + 2px);
	bottom: calc(var(--popup-hole-b) + 2px);
	height: 48px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
	z-index: 2;                 /* 오버레이(z-index:1) 위 */
	pointer-events: none;       /* 스크롤·클릭을 가로막지 않는다 */
}
/* ── 문구칸 = 테두리 «안쪽 구멍» 그 자체 ─────────────────────────────────────
   ★ 한 값으로 못 맞춘다 (2026-09-12 PM 1차 스모크). 그림마다 **테두리 띠 두께가 다르다** —
     HUD 는 바깥 여백이 4.6% 인데 띠가 두꺼워 **안쪽 경계가 13.5%** 다(3배). 아르데코는
     아래 장식이 두꺼워 **아래만** 15.6% 다.
   ★★ 그 거리를 **padding 으로 주면 안 된다** (2026-09-12 PM 2차 스모크 —
      「이미지 테두리와 스크롤 범위가 따로 논다」). padding 은 스크롤 칸 «안쪽»이라
      글이 그 띠를 지나갈 때도 **보인다**. 잘리는 자리는 언제나 요소의 가장자리였고,
      그게 inset:0 = 그림 전체였다. 그래서 스크롤을 내리면 글자가 테두리 위를 타고
      올라갔다 — 멈춰 있을 때만 얌전해 보였다.
      정정 = **스크롤 칸 자체를 구멍에 맞춘다.** 넘친 글은 구멍 경계에서 잘리므로
      테두리 위로는 아무것도 지나가지 않는다.
   ★ % 의 기준이 다르다 — padding 은 위·아래도 «가로» 기준인데 inset 의 위·아래는
     «세로» 기준이다. 구 padding 값을 그대로 옮기면 세로가 4/3 배 과하게 밀린다.
   ★ 값은 손으로 고르지 않는다: `go run ./tools/popupimg inset <그림>` 이 아래 줄을
     그대로 찍어 준다. 새 그림을 프리셋으로 등록할 때 같이 뽑아 여기 적는다. */
.popup-content {
	position: absolute;
	inset: var(--popup-hole-t) var(--popup-hole-x) var(--popup-hole-b);
	padding: 12px;                                             /* 구멍 «안쪽» 숨쉴 틈 (단색) */
}
/* ── 단색 프리셋의 테두리 = CSS 로 그린다 (2026-09-12 PM 지시) ───────────────
   ★ 왜 — 그림 프리셋은 테두리가 JPG 안에 그려져 있어서 그 위치를 **재서** 맞춘다
     (`popupimg inset`, 안전여유 1.5%). 어림값이고 그림이 바뀌면 다시 재야 한다.
     CSS 로 그으면 테두리와 글칸이 **같은 값 하나**에서 나온다 = 어긋날 수가 없다.
   ★ 선을 «문구칸 자신»에 그린다. 스크롤 칸의 테두리 안쪽이 곧 보이는 범위라,
     넘친 글은 선 안에서 잘린다 — 선 위로는 아무것도 지나가지 않는다.
   ★ 두 줄 = 안쪽은 border(칸의 테두리), 바깥쪽은 outline + outline-offset.
     outline 은 자리를 차지하지 않아 글칸을 좁히지 않는다.
   ★ 그림 프리셋·직접 올린 그림은 제외한다 — 그림에 이미 테두리가 있어 두 겹이 된다. */
.popup-image:not(.has-image) .popup-content {
	border: 1px solid var(--popup-frame-line);
	border-radius: 4px;
	outline: 1px solid var(--popup-frame-line);
	outline-offset: 4px;
}
.popup-image.has-image .popup-content { padding: 0; }          /* 그림 = 구멍이 여백을 맡는다 */
.popup-image.has-image     { --popup-hole-t: 10%; --popup-hole-x: 13%; --popup-hole-b: 10%; }  /* 직접 올린 그림 = 잴 수 없으니 넉넉히 */
.popup-image.bg-frame_hud  { --popup-hole-t: 11%; --popup-hole-x: 15%; --popup-hole-b: 11%; }
.popup-image.bg-frame_deco { --popup-hole-t: 8%;  --popup-hole-x: 12%; --popup-hole-b: 17%; }

/* 프리셋 배경(보라·시안 그라데이션) 위에서는 전역 스크롤바 색이 묻힌다 — 반투명 흰색으로 띄운다. */
.popup-content::-webkit-scrollbar { width: 6px; }
.popup-content::-webkit-scrollbar-track { background: transparent; }
.popup-content::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.38);
	border-radius: var(--r-pill);
}
.popup-content { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.38) transparent; }

/* 이미지를 올린 팝업 = 그림은 **배경**이고 제목·본문(어드민웹 입력분)이 그 위에 앉는다
   (2026-09-11 PM 지시 / theme.js initPopupNotices 의 has-image 와 한 쌍).

   ★ 스크림(scrim) = 그림 위에 깔아 글자를 읽히게 하는 어둠막이다. 없으면 밝은 하늘·금색
     같은 면 위에서 흰 글자가 사라진다. 그림마다 밝은 자리가 다르므로 **어느 그림이 와도**
     되도록 위·아래를 진하게, 가운데는 옅게 깐다 — 제목은 위, 본문은 아래로 가고
     가운데는 그림이 가장 잘 보이는 자리다.
   ★ 세기는 이 값이 상한이다. 더 진하게 하면 그림을 왜 넣었는지 알 수 없게 된다.
     대신 그림 쪽에서 「글자 자리는 비워 둔다」를 지키는 것이 정공법이다
     (프리픽 생성 프롬프트에 그 조건을 넣는다). */
/* 그림 프리셋 — 배경 그림을 저장소에 두고 어드민웹 드롭다운에서 고른다 (2026-09-12 PM 지시).
   팝업마다 그림을 올리던 방식과 달리 업로드가 0회고 DB 에 바이트가 안 쌓인다.

   ★ 인라인 style 이 아니라 **class** 로 주는 이유 — url() 은 그 규칙이 적힌 파일을 기준으로
     풀린다. 여기(css/theme.css)에 적으면 ../images/... 가 스킨 서빙 경로를 그대로 타서,
     스킨 폴더에 같은 이름의 파일이 있으면 그쪽이 쓰인다(로고·히어로와 같은 방식).
     JS 에서 style.background 로 주면 **문서 기준**이라 그 갈아끼움이 안 먹는다.
   ★ 키 목록은 세 곳이 같아야 한다 — 여기 · theme.js 의 POPUP_IMAGE_PRESETS ·
     internal/domain/popup 의 allowlist. */
.popup-image.bg-frame_deco { background: url('../images/popup/frame_deco.jpg') center / cover no-repeat; }
.popup-image.bg-frame_hud  { background: url('../images/popup/frame_hud.jpg')  center / cover no-repeat; }

.popup-image.has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0.42) 0%,
		rgba(0, 0, 0, 0.16) 32%,
		rgba(0, 0, 0, 0.20) 62%,
		rgba(0, 0, 0, 0.58) 100%);
	/* z-index 1 = 그림(정적 배치) 위. 오버레이도 1 이지만 DOM 에서 뒤라 글자가 이 위에 온다. */
	z-index: 1;
	pointer-events: none;
}

.popup-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.popup-image.is-empty img { display: none; }
.popup-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: rgba(var(--c-sky-3-rgb), 0.45);
	text-shadow: 0 0 14px rgba(var(--c-sky-1-rgb), 0.35);
	pointer-events: none;
	z-index: 1;
}
/* 실제 이미지 로드되면 placeholder 숨김 */
.popup-image img:not([src=""]) ~ .popup-placeholder {
	display: none;
}
.popup-image.is-empty .popup-placeholder { display: grid; }

/* ── 액션바 ── */
.popup-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 14px;
	background: linear-gradient(180deg, rgba(var(--c-deep-1-rgb), 0.96) 0%, rgba(var(--c-deep-6-rgb), 1) 100%);
	border-top: 1px solid rgba(var(--c-sky-2-rgb), 0.32);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* 순번 「2 / 4」 — 폰에서 한 장씩 보일 때 «몇 장 중 몇 번째»를 알린다 (2026-09-12 PM 지시).
   ★ 기본은 숨김이다. PC 는 카드가 가로로 나란히 보여 셀 필요가 없고, 무엇보다 이 규칙이
     좁은 화면 블록 밖으로 새면 PC 팝업에 없던 글자가 생긴다. 켜는 것은 미디어쿼리 안에서만. */
.popup-seq {
	display: none;
	align-items: center;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgb(var(--c-sky-3-rgb));
	font-variant-numeric: tabular-nums;   /* 숫자 폭 고정 = 넘어갈 때 안 흔들린다 */
}

/* 오늘 하루 보지 않기 — 커스텀 체크박스 */
.popup-hide-today {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 12.5px;
	color: var(--t-2);
	letter-spacing: 0.02em;
	user-select: none;
	transition: color var(--t-fast);
}
.popup-hide-today:hover { color: rgb(var(--c-sky-3-rgb)); }
.popup-hide-today input {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.5);
	border-radius: 3px;
	background: rgba(var(--c-deep-4-rgb), 0.6);
	cursor: pointer;
	position: relative;
	transition: all var(--t-fast);
	flex-shrink: 0;
}
.popup-hide-today input:hover {
	border-color: rgba(var(--c-sky-2-rgb), 0.8);
}
.popup-hide-today input:checked {
	background: linear-gradient(180deg, rgba(var(--c-sky-1-rgb), 0.6) 0%, rgba(var(--c-sky-6-rgb), 0.7) 100%);
	border-color: rgba(var(--c-sky-2-rgb), 0.85);
	box-shadow: 0 0 8px rgba(var(--c-sky-1-rgb), 0.4);
}
.popup-hide-today input:checked::after {
	content: '';
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 닫기 버튼 */
.popup-close {
	padding: 7px 16px;
	background: rgba(var(--c-sky-2-rgb), 0.1);
	border: 1px solid rgba(var(--c-sky-2-rgb), 0.35);
	border-radius: 4px;
	color: rgb(var(--c-sky-3-rgb));
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: all var(--t-fast);
}
.popup-close:hover {
	background: rgba(var(--c-sky-2-rgb), 0.22);
	border-color: rgba(var(--c-sky-2-rgb), 0.65);
	color: rgb(var(--c-sky-7-rgb));
	box-shadow: 0 0 10px rgba(var(--c-sky-1-rgb), 0.3);
}

/* ── 모바일 (한 장씩, 가운데) ─────────────────────────────────────────────────
   ★★ 구 동작 = 4장을 세로로 쌓고 묶음에 자체 스크롤 (2026-09-12 PM 지적 「스크롤 지옥」).
      실측 — 카드 한 장이 320px 폭에 그림칸(3:4) 427px + 버튼줄 ≈ 477px 이라 4장이면
      **약 1,960px** 이고, 그것을 90vh(폰에서 약 700px) 창 안에서 굴렸다. 카드마다 본문
      스크롤이 또 있으니 **스크롤 안의 스크롤**이었다.
   ★ 새 동작 = **첫 장만 보인다.** 닫으면 카드가 DOM 에서 빠지므로(closeCard) 다음 장이
     저절로 올라온다 = JS 로 순번을 돌리지 않는다. 겹쳐 쌓는 방식과 달리 가로폭을 안 깎고,
     남은 장수는 .popup-seq(「2 / 4」)가 글자로 말해 준다 — 카드 옆구리를 세지 않아도 된다.
   ★ max-height·overflow 는 **남겨 둔다.** 굴릴 것이 한 장뿐이라 지옥은 사라지지만,
     가로 모드처럼 화면이 낮으면 한 장도 안 들어간다 — 그때의 안전망이다.
   ★ 이 블록 «안»에만 둔다. 새면 PC 팝업이 통째로 사라진다(display:none). */
@media (max-width: 768px) {
	.popup-notices {
		flex-direction: column;
		gap: 0;                     /* 한 장만 보이므로 사이 간격이 필요 없다 */
		max-height: 90vh;
		overflow-y: auto;
	}
	.popup-notice { width: min(86vw, 320px); }
	.popup-notice.is-stacked {
		position: relative !important;
		transform: none !important;
	}
	.popup-notices .popup-notice { display: none; }
	.popup-notices .popup-notice:first-child { display: flex; }
	.popup-seq { display: inline-flex; }
}

/* ── 비밀번호 표시 토글 (2026-07-16) ─────────────────────────────
   회원생성·회원가입 비밀번호 입력칸의 눈 아이콘. JS(attachPasswordToggle)가
   input을 .pw-wrap 으로 감싸고 버튼을 주입한다 = 기존 폼 HTML 무변경.
   ★ 기본 = 가림. 노출 시점은 사용자가 정한다(자동 노출 없음). */
.pw-wrap {
  position: relative;
  display: block;
}
.pw-wrap > input {
  width: 100%;
  /* 아이콘 폭만큼 오른쪽 여백 = 긴 값 입력 시 글자가 아이콘 밑으로 안 들어감 */
  padding-right: 38px !important;
}
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, rgb(var(--c-nv-45-rgb)));
  cursor: pointer;
  line-height: 0;
}
.pw-toggle:hover {
  color: var(--text, rgb(var(--c-nv-54-rgb)));
  background: rgba(var(--c-nv-45-rgb), 0.12);
}
.pw-toggle:focus-visible {
  outline: 2px solid var(--primary, rgb(var(--c-sky-6-rgb)));
  outline-offset: 1px;
}
.pw-toggle svg {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ============================================================
   게임사 카드 (슬롯) — 원본 디자인 재현 + 부채꼴 썸네일 (2026-08-09 / PM 확정 E안)
   ------------------------------------------------------------
   출처: 디자인소스/_원안/game 의 .g_card_* 구조 (바탕화면 / 저장소 밖).
   원본은 게임사마다 제작 카드 이미지 1장을 넣었는데(38장 보유 / 노출 57곳),
   여기서는 그 자리에 **그 게임사 대표 게임 썸네일 3장을 부채꼴**로 넣어
   카드가 없는 게임사도 같은 껍데기로 자동 생성되게 한다.

   레이어(아래→위): 배경 → 배경 어둡게 → 표시면(부채꼴+게임사명) → 테두리 프레임
   호버: 카드가 떠오르고, 배경이 gamecard_bg_play.webp 로 바뀌며 4초에 한 바퀴 회전,
         테두리에 골드 글로우 점멸. (원본의 「PLAY GAME」 오버레이는 PM 지시로 제외)

   ★ 슬롯 전용이다. 라이브 카지노 카드는 종전 그대로 둔다(PM 지시).
   ============================================================ */
/* 부채꼴 둥실 — 호버에서만 돈다. 범위를 원본(3px)의 4배로 키웠다.
   ★ 중앙 정렬 translate(-50%,-50%)를 키프레임에 포함해야 한다 —
     animation의 transform이 정적 transform을 덮어써서 안 넣으면 카드가 오른쪽 아래로 튄다. */
@keyframes gcv-fanfloat {
	0%, 100% { transform: translate(-50%, -50%); }
	50%      { transform: translate(-50%, calc(-50% - 12px)); }
}
@keyframes gcv-spin  { 100% { transform: rotate(360deg); } }
@keyframes gcv-glow  {
	0%   { box-shadow: 0 0 6px 8px rgba(254,223,171,.10); }
	50%  { box-shadow: 0 0 6px 4px rgba(227,150,17,.70); }
	100% { box-shadow: 0 0 6px 1px rgba(254,223,171,.80); }
}

.gcv { position: relative; display: block; aspect-ratio: 1; text-decoration: none;
	transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .25s ease; }
.gcv:hover { transform: translateY(-10px) scale(1.04); filter: brightness(1.08); z-index: 5; }

.gcv-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; }
.gcv:hover .gcv-wrap { animation: gcv-glow .8s ease infinite; }

/* 배경 — 카드보다 크게 깔아야 회전할 때 모서리가 비지 않는다 (원본 444x443 규격) */
/* ★ 배경 반전 (2026-08-09 PM) — 사이트 전체 톤이 남색·초록 계열이라 평상시를 파랑으로,
   호버에서 붉은색으로 튀게 한다. (원본은 반대였다: 평상시 붉은 / 호버 파랑)
   ★ 평상시 애니메이션 제거 — 종전 float는 배경이 3px 움직이는 것이라 사실상 안 보이는데
     카드 수만큼(노출 41장) 상시로 돌아 부담만 됐다. 둥실은 호버에서 부채꼴이 맡는다. */
.gcv-bg { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
	background: url('../images/slot_cards/gamecard_bg_play.webp') center / cover no-repeat;
	transition: .4s all ease; }
.gcv:hover .gcv-bg { background-image: url('../images/slot_cards/gamecard_bg_01.webp');
	animation: gcv-spin 4s linear infinite; }

/* 배경 위 어둡게 — 원판(붉은·파란 원형 HUD)의 채도가 세서 부채꼴·이름이 묻힌다.
   원본은 불투명한 제작 카드가 덮어 불요했지만 여기는 표시면이 투명하다. */
.gcv-veil { position: absolute; inset: 0; background: rgba(0,0,0,.46); }
.gcv:hover .gcv-veil { background: rgba(0,0,0,.40); }

/* 표시면 = 부채꼴 + 게임사명. 호버해도 사라지지 않는다. */
.gcv-fan { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
	width: 92%; height: 48%; z-index: 3; }
/* 낱장 폭 44% + 간격 25% → 전체 94% → 좌우 3%씩 균등 (쏠림 방지 / 실측으로 잡은 값) */
.gcv-fan img { position: absolute; top: 0; width: 44%; aspect-ratio: 1; object-fit: cover;
	border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.72), 0 0 0 2px rgba(255,255,255,.16);
	transition: transform .24s cubic-bezier(.34,1.56,.64,1); }
.gcv-fan img:nth-child(1) { left: 3%;  transform: rotate(-15deg) translateY(7%); z-index: 1; }
.gcv-fan img:nth-child(2) { left: 28%; transform: rotate(0deg)   translateY(-6%); z-index: 3; }
.gcv-fan img:nth-child(3) { left: 53%; transform: rotate(15deg)  translateY(7%); z-index: 2; }
.gcv:hover .gcv-fan { animation: gcv-fanfloat 1.8s ease-in-out infinite; }
.gcv:hover .gcv-fan img:nth-child(1) { transform: rotate(-19deg) translateY(5%); }
.gcv:hover .gcv-fan img:nth-child(2) { transform: rotate(0deg) translateY(-13%) scale(1.07); }
.gcv:hover .gcv-fan img:nth-child(3) { transform: rotate(19deg) translateY(5%); }

.gcv-foot { position: absolute; left: 8px; right: 8px; bottom: 14px; text-align: center; z-index: 4; }
.gcv-name { display: block; font-size: 27px; font-weight: 800; color: #fff; letter-spacing: -.03em;
	line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,1), 0 0 24px rgba(0,0,0,.85); word-break: keep-all; }
.gcv-name.is-long { font-size: 22px; }   /* 이름 7자 이상 = 한 줄 유지 */
/* .gcv-count(게임 수) 제거 — 2026-08-10 PM 지시. 카드는 게임사를 고르는 자리라 개수는 불요. */

.gcv-frame { position: absolute; inset: 0; pointer-events: none;
	background: url('../images/slot_cards/gamecard_stroke.png') center / cover no-repeat; }

/* 점검 중 — 실행 진입점이 없는 상태를 눈으로도 구분 (기존 카드 동작 정합) */
.gcv.is-maint { filter: grayscale(.55) brightness(.8); }
.gcv.is-maint:hover { transform: none; filter: grayscale(.55) brightness(.8); }
.gcv.is-maint:hover .gcv-wrap { animation: none; }
.gcv.is-maint:hover .gcv-bg { background-image: url('../images/slot_cards/gamecard_bg_play.webp'); animation: none; }
.gcv.is-maint:hover .gcv-fan { animation: none; }
.gcv-maint-badge { position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 10px; font-weight: 700;
	padding: 2px 6px; border-radius: 4px; color: #fff; background: #dc2626; }

/* 썸네일이 하나도 없는 게임사 = 부채꼴 자리를 비우고 이름을 가운데로 */
.gcv.no-thumb .gcv-foot { top: 50%; bottom: auto; transform: translateY(-50%); }

@media (max-width: 640px) {
	.gcv-name { font-size: 20px; }
	.gcv-name.is-long { font-size: 16px; }
	.gcv-foot { bottom: 10px; }
}

/* ============================================================
   라이브 카지노 게임사 카드 (.lcv / 2026-08-09)
   ------------------------------------------------------------
   슬롯(.gcv)과 다른 공식을 쓴다. 라이브는 게임사가 14곳뿐이고 그중 9곳에
   과거 제작한 3레이어 카드(배경 천 + 딜러 + 로고·한글명)가 이미 있다.
   그래서 있는 곳은 제작 이미지를 그대로 쓰고, 없는 곳만 남는 배경·딜러를
   배정한 뒤 이름을 텍스트로 얹는다 (새로 그린 이미지 0장).

   레이어: 배경 천 → 호버 천(노랑) → 딜러(카드 밖으로 비어져 나옴) →
           로고·이름 → 「PLAY GAME」(호버) → 게임 수 / 점검 배지
   자산 출처 = images/casino_cards (원본 퍼블리싱 그대로)
   ============================================================ */

.lcv {
	position: relative; display: block; text-decoration: none;
	aspect-ratio: 330 / 230;
	transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
	/* 카드 폭을 기준 단위(cqw)로 쓰기 위한 컨테이너 선언 — 이름 글자 크기를 카드에 비례시킨다.
	   px로 고정하면 카드가 커질 때 글자만 작아 보인다(제작 카드는 이미지라 같이 커진다). */
	container-type: inline-size;
}
.lcv:hover { transform: translateY(-8px); filter: brightness(1.05); z-index: 5; }

/* 카드면 — 천·광택은 여기서 잘린다. 딜러는 이 밖에 있어 잘리지 않는다. */
.lcv-face {
	position: absolute; inset: 0; overflow: hidden; border-radius: 14px;
	box-shadow: 0 10px 26px rgba(var(--c-deep-2-rgb), .7),
		inset 0 2px 0 rgba(255,255,255,.16),
		inset 0 -3px 8px rgba(0,0,0,.5);
}
.lcv:hover .lcv-face { animation: gcv-glow .8s ease infinite; }   /* 슬롯 카드 글로우 재사용 */

.lcv-bg { position: absolute; inset: 0; background: center / cover no-repeat; }
/* 호버 = 원본의 노랑 물결 천으로 바뀐다. 딜러·로고는 그대로 남는다(슬롯 정합). */
.lcv-hv {
	position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
	background: url('../images/casino_cards/ca_hv_bg.png') center / cover no-repeat;
}
.lcv:hover .lcv-hv { opacity: 1; }
/* 사선 광택 — 원본 gloss 이미지는 세로 규격이라 가로 카드에 안 맞아 CSS로 대신한다 */
.lcv-face::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, rgba(255,255,255,0) 54%, rgba(255,255,255,.10) 68%, rgba(255,255,255,0) 76%);
}

/* 딜러 — 카드보다 크게 잡아 아래로 붙인다. 머리가 카드 위로 조금 비어져 나온다(원본 결).
   비어져 나오는 만큼 그리드 세로 간격을 벌려 둔다(JS에서 row-gap 34px). */
.lcv-model {
	position: absolute; bottom: 0; left: 50%; width: 112%; height: 116%;
	transform: translateX(-50%);
	object-fit: contain; object-position: center bottom;
	filter: drop-shadow(0 6px 16px rgba(0,0,0,.55));
	pointer-events: none; z-index: 2;
	transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.lcv:hover .lcv-model { transform: translateX(-50%) translateY(-4%) scale(1.05); }

/* 로고 + 한글명 = 제작 이미지 1장 (카드가 있는 게임사) */
.lcv-logo {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; object-position: center center;
	pointer-events: none; z-index: 3;
}

/* 제작 이미지가 없는 게임사 = 같은 위치에 텍스트로 (로고 이미지의 글자 결에 맞춤).
   ★ 제작 카드의 한글명은 오른쪽 끝을 맞춰 놓았고(≈카드 폭의 92%) 굵기는 덜하며
     자간이 살짝 벌어져 있다 → 정렬·굵기·자간을 거기에 맞춘다 (2026-08-10 PM 지적). */
/* ★ 위치·크기는 제작 카드(obj_002) 7장을 픽셀로 재서 맞춘 값이다 (2026-08-10 PM 지적).
   7장 전부 동일 규격이었다: 글자 높이 = 카드 높이의 12.2% / 아래 여백 15.2% / 오른쪽 끝 93.3%.
   종전에는 21px 고정 + 아래 23%라 제작 카드보다 작고 위로 떠 보였다. */
.lcv-name {
	position: absolute;
	right: 6.7%;                      /* 100 − 93.3 = 제작 카드의 오른쪽 끝선 */
	bottom: 13%;                      /* 글자 잉크 아래끝이 15.2%에 오도록 (line-height 여백 보정) */
	left: 18%;
	text-align: right; z-index: 3; pointer-events: none;
}
/* 영문 줄 — 제작 카드에는 없다(로고 그림이 그 역할). 한글 위에 겹쳐 올려
   **한글 위치를 밀지 않게** 한다. 종전에는 흐름에 끼어 한글을 위로 밀어 올렸다. */
.lcv-name .en {
	position: absolute; right: 0; bottom: 100%; margin-bottom: .3em;
	white-space: nowrap;
	font-size: 11px; font-size: 4cqw;
	font-weight: 600; letter-spacing: .1em;
	color: rgba(255,255,255,.82); text-transform: uppercase;
	text-shadow: 0 2px 5px rgba(0,0,0,.9);
	margin-right: -.1em;              /* 자간이 마지막 글자 뒤에도 붙어 우측이 뜬다 → 상쇄 */
}
.lcv-name .ko {
	display: block;
	/* ★ 11.5cqw → 8.6cqw 로 축소 (2026-08-10 2차 / PM "너무 커졌다").
	   앞서 제작 카드에서 잰 "글자 높이 28px"에는 **이미지에 함께 구워진 그림자**가 섞여 있었다.
	   알파가 있는 픽셀을 다 세다 보니 글자보다 크게 나왔고, 그 값으로 잡으니 실제보다 커졌다.
	   px 값은 cqw 미지원 브라우저용 대비값이다. */
	font-size: 22px; font-size: 8.2cqw;
	/* 글꼴 — 사이트 본문 기본(Pretendard) 대신 NotoSansKR (2026-08-10 PM 확정).
	   제작 카드는 이미지라 원래 글꼴을 알아낼 수 없어, 가진 두 글꼴을 나란히 렌더해 고른 값이다
	   (차이가 크지 않아 현재 적용분 유지). */
	font-family: 'NotoSansKR', var(--font-body);
	font-weight: 600; color: #fff;
	letter-spacing: .05em; line-height: 1; word-break: keep-all;
	/* 그림자 — 제작 카드는 **또렷한 그림자**다. 종전 22px 후광은 번져 보여 결이 달랐다. */
	text-shadow: 0 2px 4px rgba(0,0,0,.9), 0 1px 1px rgba(0,0,0,.7);
	margin-right: -.05em;             /* 위와 같은 이유 — 오른쪽 끝을 제작 카드와 맞춘다 */
}
/* ★ 길이에 따라 크기를 줄이던 규칙(.is-long)을 없앴다 (2026-08-10 3차 / PM 지적).
   이름이 6자를 넘으면 한 단계 작게 했는데, 그러면 카드마다 글자 크기가 달라 줄이 안 맞아 보인다
   (보타·도윈은 크고 마이크로게이밍만 작아지는 식). **모든 카드가 같은 크기**가 맞다.
   긴 이름은 크기를 줄이는 대신 두 줄로 흐르게 둔다 — 이름 칸이 아래에 붙어 있어 위로 자란다. */

/* 호버 「PLAY GAME 게임시작」 — 원본 자산. 라이브는 클릭 즉시 로비가 열려 문구가 맞다.
   (슬롯은 클릭이 게임 목록 모달이라 PM 지시로 제외했다.) */
.lcv-play {
	position: absolute; left: 50%; bottom: 5%; width: 44%;
	transform: translate(-50%, 8px); opacity: 0;
	z-index: 4; pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.lcv:hover .lcv-play { opacity: 1; transform: translate(-50%, 0); }

/* .lcv-count(게임 수) 제거 — 2026-08-10 PM 지시. 슬롯 .gcv-count와 함께 뺐다. */

/* 점검 중 — 실행 진입점이 없는 상태를 눈으로도 구분 (슬롯 카드 정합) */
.lcv.is-maint { filter: grayscale(.6) brightness(.78); }
.lcv.is-maint:hover { transform: none; filter: grayscale(.6) brightness(.78); }
.lcv.is-maint:hover .lcv-face { animation: none; }
.lcv.is-maint:hover .lcv-hv { opacity: 0; }
.lcv.is-maint:hover .lcv-model { transform: translateX(-50%); }
.lcv.is-maint:hover .lcv-play { opacity: 0; }
.lcv-maint-badge {
	position: absolute; top: 8px; right: 8px; z-index: 5;
	font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
	color: #fff; background: #dc2626;
}

/* 모바일 — 글자 크기는 cqw라 카드 폭을 따라 저절로 줄어든다(별도 지정 불요).
   「PLAY GAME」만 좁은 화면에서 너무 작아 보여 비율을 키운다. */
@media (max-width: 640px) {
	.lcv-play { width: 52%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   회원 레벨 배지 5색 (migration 0064 표시 / 2026-08-27 PM 지시)

   왜 그림이 아니라 색인가 = 배지는 이미 글자를 담은 알약 모양이라 그림이 필요 없다.
   그림으로 가면 스킨 3벌 × 레벨 5종 = 15장을 만들어 관리해야 하고, 관리자가
   레벨을 늘릴 때마다 사람이 또 그려야 한다. 색이면 여기에 줄 몇 개다.

   ★★ 색을 hex 로 박지 않는다 — 스킨이 --c-violet-* / --c-gold-* 를 자기 톤으로
      다시 정의해 두었기 때문이다. 실측:
        기본   violet = 보라(139,92,246)
        그린   violet = 에메랄드(16,150,130)   gold = 227,179,75
        럭셔리 violet = 버건디(164,47,67)      gold = 215,176,78
      hex 로 박으면 그린·럭셔리 화면에 **보라 배지 하나만 튄다.** 변수로 두면
      스킨을 갈아끼울 때 배지도 따라온다 = 스킨별 오버라이드 0줄.

   ★ 구리·은은 변수가 없다. 금속색이라 어느 스킨에서도 어색하지 않아 그대로 둔다.

   적용 대상 = 헤더 배지(.user-grade) **한 곳**.
   ★ 마이페이지에는 배지가 없다 (2026-08-27 PM 지시) — 「회원 정보」 카드 머리에 배지를
     달았더니 바로 아래 목록의 "레벨" 칸과 같은 값이 두 번 보였다. 배지를 빼고 글자만 남겼다.
     그래서 마이페이지 "레벨" 칸(dd)에는 바탕을 깔지 않는다 = 여기 규칙이 안 걸린다.
   ══════════════════════════════════════════════════════════════════════════ */

.user-grade[data-level="bronze"] {
	background: linear-gradient(90deg, #7a4a21, #b87333);
	border-color: rgba(184, 115, 51, 0.55);
	color: #fff;
}
.user-grade[data-level="silver"] {
	background: linear-gradient(90deg, #7f878f, #c6ccd2);
	border-color: rgba(198, 204, 210, 0.55);
	color: #1a1a1a;
}
/* 금 = 스킨의 금색을 그대로 쓴다 (기본 노랑 / 그린·럭셔리는 차분한 금). */
.user-grade[data-level="gold"] {
	background: linear-gradient(90deg, rgba(var(--c-gold-d-rgb), 0.95), rgb(var(--c-gold-a-rgb)));
	border-color: rgba(var(--c-gold-a-rgb), 0.55);
	color: #1a1a1a;
}
/* VIP = 스킨의 강조색 (기본 보라 / 그린 에메랄드 / 럭셔리 버건디).
   종전 .hud-scope .m-vip 가 쓰던 것과 같은 변수라 지금 보이는 결을 잇는다. */
.user-grade[data-level="vip"] {
	background: linear-gradient(90deg, rgb(var(--c-violet-6-rgb)), rgb(var(--c-violet-1-rgb)));
	border-color: rgba(var(--c-violet-1-rgb), 0.55);
	color: #fff;
}
/* VVIP = 어두운 바탕에 스킨 금색 글자. 위 넷과 다른 방향으로 가야 "제일 위"로 읽힌다
   (밝기를 계속 올리면 골드와 구분이 안 된다). */
.user-grade[data-level="vvip"] {
	background: linear-gradient(90deg, #16161a, #3a3a42);
	border-color: rgba(var(--c-gold-a-rgb), 0.6);
	color: rgb(var(--c-gold-a-rgb));
}