/* =========================================================
   데모2 스킨 — 짙은 보라 + 네온 핑크 · 시안 (샘플 3단계 · 결정 샘플-2 · 2026-11-13)
   - 3005 포트에서만 서버가 api.css 다음에 넣어요. 마크업 · data-* · id · 클래스는 그대로, 보이는 것만 바꿔요.
   - 방향: 밤의 네온 · 핑크 = 주요 동작, 시안 = 선택 상태 · 둥근 유리 카드(모서리 18 ~ 28px) · PC 는 위쪽 가로 메뉴
   - 휴대폰: 둥둥 뜬 알약 탭바 · 첫 화면 줄 순서: 배너 → 인기 슬롯 → 라이브 카지노 → 스포츠북 → 게임 제공사
   ========================================================= */

/* ---------- 1. 토큰 ---------- */
:root, [data-theme="space"] {
  --space-900: #0c0420;
  --space-800: #140a2c;
  --space-700: #1b0f3a;
  --space-600: #27154f;
  --space-500: #331c66;
  --line: rgba(190, 140, 255, .16);
  --line-strong: rgba(220, 160, 255, .36);
  --ink: #fbf3ff;
  --ink-2: #c9b5ea;
  --ink-3: #9a86c2;

  --neon-pink: #ff2bd6;
  --neon-cyan: #22e5ff;
  --neon-grad: linear-gradient(100deg, #ff2bd6 0%, #a24bff 55%, #22e5ff 100%);
  --blue-500: #ff2bd6;   /* 주요 동작 = 핑크 */
  --blue-600: #e01bbc;
  --blue-400: #ff7be6;
  --on-blue: #ffffff;
  --yellow-400: #22e5ff; /* 골드 자리 = 시안 */
  --yellow-600: #12c4dc;
  --on-bright: #0c0420;
  --violet-600: #7a2cff;
  --violet-300: #c49bff;
  --pink-500: #ff2bd6;
  --mint-500: #3dffb0;
  --coral-500: #ff5c86;
  --focus: #22e5ff;

  --glow-blue: rgba(255, 43, 214, 0.20);
  --glow-violet: rgba(34, 229, 255, 0.14);
  --scrim: rgba(6, 2, 18, 0.72);
  --card-hover: rgba(12, 4, 32, 0.6);
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 43, 214, .25), 0 0 40px rgba(255, 43, 214, .12);
  --glow-primary: 0 0 18px rgba(255, 43, 214, .55);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-card: 20px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --glass: rgba(40, 20, 80, .45);
  --glass-line: rgba(255, 255, 255, .10);
}
html { color-scheme: dark; }
body {
  background: radial-gradient(700px 480px at 12% -6%, rgba(255, 43, 214, .22), transparent 70%) no-repeat,
              radial-gradient(800px 560px at 100% 18%, rgba(34, 229, 255, .14), transparent 72%) no-repeat,
              radial-gradient(900px 700px at 40% 110%, rgba(122, 44, 255, .20), transparent 70%) no-repeat,
              var(--space-900);
  background-attachment: fixed;
}
::selection { background: rgba(255, 43, 214, .45); color: #fff; }

/* 유리 카드 공통 */
.card, .home-side, .cat, .book, .ws-stat, .tile, .drawer-card, .auth-hero, .tg-hero, .addr-box, .hlist, .checks, .ft-help, .side-help, .mp-top {
  background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.card, .home-side, .cat, .book, .mp-top { border-radius: var(--radius-xl); }

/* 섹션 제목: 네온 그라데이션 글자 */
.ws-sechead-title h3, .page-title h1 { background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }

/* ---------- 2. 버튼 · 배지 ---------- */
.ws-btn { border-radius: 999px; transition: transform .18s, box-shadow .18s, filter .18s, background-color .18s; }
.ws-btn-iconly { border-radius: 14px !important; }
.ws-btn-primary { background: linear-gradient(100deg, #ff2bd6, #b23cff); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 0 18px rgba(255, 43, 214, .5); }
.ws-btn-primary:hover { background: linear-gradient(100deg, #ff4fde, #c055ff); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 0 26px rgba(255, 43, 214, .7); }
.ws-btn-gold { background: linear-gradient(100deg, #22e5ff, #4d8bff); color: var(--on-bright); box-shadow: 0 0 16px rgba(34, 229, 255, .45); }
.ws-btn-gold:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ws-btn-outline { background: rgba(255, 255, 255, .04); border-color: var(--line-strong); color: var(--ink); }
.ws-btn-outline:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 14px rgba(34, 229, 255, .3); }
.ws-btn:active { transform: translateY(1px) scale(.98); }
.ws-badge-live { background: #3dffb0; color: #06261a; }
.ws-badge-new { background: var(--neon-cyan); color: var(--on-bright); }
.ws-badge-hot { background: var(--neon-pink); color: #fff; box-shadow: 0 0 10px rgba(255, 43, 214, .6); }
.ws-badge-vip { background: var(--neon-grad); color: #fff; }
.pill { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }

.ws-balance { border-radius: 999px; background: rgba(0, 0, 0, .25); border-color: var(--line-strong); }
.ws-balance-add { border-radius: 999px; background: linear-gradient(100deg, #ff2bd6, #b23cff); box-shadow: 0 0 12px rgba(255, 43, 214, .55); }

/* ---------- 3. 탭 · 입력 — 선택은 시안 ---------- */
.ws-tabs { border-radius: 999px; background: rgba(0, 0, 0, .25); border-color: var(--glass-line); }
.ws-tab { border-radius: 999px; }
.ws-tab.is-active { background: rgba(34, 229, 255, .14); color: var(--neon-cyan); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(34, 229, 255, .6), 0 0 12px rgba(34, 229, 255, .25); }
.ws-input, .sel, .tg-input { border-radius: var(--radius-md); background: rgba(0, 0, 0, .28); border-color: var(--line-strong); }
.ws-input:focus, .sel:focus { outline: 0; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(34, 229, 255, .2); }
.tg-input:focus-within { border-color: var(--neon-cyan); }
.check input, .opt input { accent-color: var(--neon-pink); }

/* ---------- 4. 머리말 — 유리 바 + 네온 밑줄 ---------- */
.hd { background: rgba(12, 4, 32, .72); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 0; }
.hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--neon-grad); opacity: .85; box-shadow: 0 0 12px rgba(255, 43, 214, .6); pointer-events: none; }
.hd-btn, .hd-user, .hd-lang { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.hd-btn:hover, .hd-user:hover, .hd-lang:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.hd-count { background: var(--neon-pink); color: #fff; box-shadow: 0 0 8px rgba(255, 43, 214, .8); }
.dd { border-radius: var(--radius-lg); background: rgba(24, 12, 52, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-color: var(--line-strong); }
.wl-big button, .wl-row, .us-card { border-radius: var(--radius-md); }
.wl-conv { border-radius: 999px; }

/* ---------- 5. PC: 위쪽 가로 메뉴 (사이드 메뉴를 머리말 밑 가로 줄로) ---------- */
@media (min-width: 1024px) {
  .shell { flex-direction: column; }
  .side, .side-collapsed .side {
    position: sticky; top: var(--header-h); z-index: 30; flex: 0 0 auto; width: 100%; height: auto; overflow: visible;
    flex-direction: row; align-items: center; gap: 6px; padding: 10px 32px; background: rgba(12, 4, 32, .6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-right: 0; border-bottom: 1px solid var(--glass-line);
  }
  .side-group { flex-direction: row; align-items: center; gap: 4px; flex: 0 0 auto; }
  .side-group + .side-group { margin-left: auto; }
  .side .side-title, .side .side-help, .side .side-sub, .side .nav-caret { display: none !important; }
  .side .nav-row { display: flex; }
  .side .ws-nav, .side-collapsed .side .ws-nav { width: auto; height: 40px; flex-direction: row; gap: 8px; padding: 0 16px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
  .side .ws-nav .ws-icon { width: 22px; height: 22px; }
  .side .side-group:last-of-type .ws-nav .ws-icon { display: none; } /* 오른쪽 일반 메뉴는 글자만 */
  .side .side-group:last-of-type .ws-nav { height: 34px; padding: 0 12px; font-size: 13px; color: var(--ink-3); }
  .hd > .hd-btn:first-child { display: none; } /* 사이드 접기 버튼은 가로 메뉴라 필요 없어요 */
  .main { padding-top: 28px; }
}
.ws-nav { border-radius: 999px; transition: background-color .18s, color .18s, box-shadow .18s; }
.ws-nav:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.ws-nav.is-active { background: rgba(255, 43, 214, .14); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255, 43, 214, .55), 0 0 14px rgba(255, 43, 214, .3); }

/* ---------- 6. 본문 · 카드 ---------- */
.opt, .picked, .est-row, .sub-box, .key, .copy-val, .copy-btn, .warn-box, .form-error, .tg-box, .perk, .quick a { border-radius: var(--radius-md); }
.opt:has(input:checked) { border-color: var(--neon-pink); background: rgba(255, 43, 214, .1); box-shadow: 0 0 12px rgba(255, 43, 214, .2); }
.stepper li.is-done { border-bottom-color: var(--neon-pink); }
.stepper li.is-done span { background: var(--neon-pink); color: #fff; }
.pin-dots i.is-on { background: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(34, 229, 255, .7); }
.htag.is-out { background: var(--neon-pink); color: #fff; }
.tg-box { border-color: rgba(34, 229, 255, .5); background: rgba(34, 229, 255, .06); }
.tg-label .req { background: var(--neon-cyan); color: var(--on-bright); }
.perk b, .cat-label, .t-gold, .acc-a, .ev-more, .banner-eyebrow, .ws-banner-eyebrow { color: var(--neon-cyan); }

/* 게임 카드: 둥근 모서리 · 마우스를 올리면 네온 테 */
.ws-game { border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--glass-line); transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.ws-game:hover, .ws-game:focus-visible { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 2px var(--neon-pink), 0 0 24px rgba(255, 43, 214, .45); }
.ws-game-play { background: linear-gradient(100deg, #ff2bd6, #b23cff); box-shadow: 0 0 16px rgba(255, 43, 214, .7); }
.lobby { border-radius: var(--radius-card); }

/* ---------- 7. 배너 ---------- */
.banner, .ws-banner { border-radius: var(--radius-xl); border: 1px solid var(--glass-line); box-shadow: 0 0 0 1px rgba(255, 43, 214, .2), 0 20px 50px rgba(0, 0, 0, .45), 0 0 50px rgba(122, 44, 255, .2); }
.banner-title { font-weight: 900; text-shadow: 0 0 18px rgba(255, 43, 214, .45); }
.banner-pager button { border-color: var(--line-strong); background: rgba(12, 4, 32, .5); }
.banner-pager button:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.ev-chip { background: rgba(255, 255, 255, .04); border-color: var(--glass-line); }
.ev-chip[aria-pressed="true"] { background: rgba(34, 229, 255, .16); border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 12px rgba(34, 229, 255, .3); }
.ev-feat, .ev-card { border-radius: var(--radius-xl) !important; }

/* ---------- 8. 첫 화면 줄 순서: 배너 → 인기 슬롯 → 라이브 카지노 → 스포츠북 → 게임 제공사 ---------- */
[data-page="index"] .main > .home-hero { order: 1; }
[data-page="index"] .main > .live-wins { order: 2; }  /* 실시간 당첨 (서버가 바로가기 4칸 · 카테고리 카드 · 숫자 알약을 빼고 넣음) */
/* 참고 디자인 시안: 줄 차례 = 실시간 당첨 → 인기 슬롯 → 라이브 카지노 → 추천 게임 → 스포츠북 → 게임 제공사 (세 데모 같음 · aria-label 로 고름) */
[data-page="index"] .main > section.sec[aria-label="인기 슬롯"] { order: 3; }
[data-page="index"] .main > section.sec[aria-label="라이브 카지노"] { order: 4; }
[data-page="index"] .main > section.sec[aria-label="추천 게임"] { order: 5; }
[data-page="index"] .main > section.sec[aria-label="스포츠북"] { order: 6; }
[data-page="index"] .main > section.sec[aria-label="게임 제공사"] { order: 7; }
[data-page="index"] .main > .help-m { order: 98; }
[data-page="index"] .main > .ft { order: 99; }
.pills .pill { height: 32px; }
.pills .pill i { box-shadow: 0 0 8px currentColor; }
.quick a { background: var(--glass); border-color: var(--glass-line); }

/* ---------- 9. 휴대폰 — 둥둥 뜬 알약 탭바 ---------- */
@media (max-width: 1023px) {
  .tabbar-wrap { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ws-tabbar { height: 60px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(20, 10, 44, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(255, 43, 214, .18); padding-bottom: 0; }
  .ws-tabbar-item.is-active::before { top: auto; bottom: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-pink); box-shadow: 0 0 8px var(--neon-pink); }
  .main { padding-bottom: calc(var(--tabbar-h) + 40px); }
  .modal-box, .modal-box.is-wide, .modal-box.is-mid { border-radius: 28px 28px 0 0; }
  .modal-grab { background: var(--neon-grad); }
  .toast { bottom: calc(var(--tabbar-h) + 30px); }
}
.ws-tabbar-item.is-active { color: #fff; font-weight: 800; }

.drawer-panel { background: rgba(16, 7, 36, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-right-color: var(--line-strong); }
.drawer-out { border-radius: 999px; }
.modal-box { border-radius: var(--radius-xl); background: rgba(24, 12, 52, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: var(--line-strong); box-shadow: var(--shadow-pop); }
.modal-x { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }
.modal-x:hover { border-color: var(--neon-pink); color: var(--neon-pink); }
.done-mark { color: var(--neon-cyan); background: rgba(34, 229, 255, .14); box-shadow: 0 0 0 8px rgba(34, 229, 255, .06), 0 0 30px rgba(34, 229, 255, .3); }
.done-eyebrow { color: var(--neon-cyan); }
.toast { border-radius: 999px; border-color: var(--line-strong); }
.promo-card, .promo-wrap { border-radius: var(--radius-xl) !important; }
.promo-dots button[aria-current]::before { background: var(--neon-pink); }
.ft { border-top-color: var(--glass-line); }
.ft-col a:hover, .ft-col button:hover { color: var(--neon-cyan); }

/* ---------- 10. 마블 · 룰렛 ---------- */
.mb-cell { border-radius: 16px; }
.mb-cell.is-here { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(34, 229, 255, .4), 0 0 18px rgba(34, 229, 255, .45); }
.mb-roll, .mb-use { background: linear-gradient(100deg, #ff2bd6, #b23cff); border-color: transparent; color: #fff; border-radius: 999px; box-shadow: 0 0 18px rgba(255, 43, 214, .55); }
.mb-me { background: var(--neon-cyan); color: var(--on-bright); }
.cal-d.is-done { background: var(--neon-pink); border-color: var(--neon-pink); color: #fff; }
.bar i { background: var(--neon-grad); }
.rl-hit { border-color: var(--neon-cyan); box-shadow: 0 0 16px rgba(34, 229, 255, .45); }
.rl-arrow { color: var(--neon-cyan); }
.ev-chips { scrollbar-width: none; }
.ev-chips::-webkit-scrollbar { display: none; }

/* 사용자 '내혜택은 메인에서 빼고 싶습니다' — 첫 화면 '내 혜택'(비회원은 환영 칸)을 화면에서만 숨겨요 · 배너가 한 줄을 다 써요 (칸 · hook 은 그대로) */
[data-page="index"] .home-hero > .home-side { display: none; }
/* 휴대폰 · 로그인 상태: 머리말에 보유금 칩이 들어와 글자 로고가 너무 작아져서 엠블럼으로 */
@media (max-width: 1023px) { [data-auth="member"] .hd-logo img { content: url("../img/skin-demo2/emblem.svg"); width: 32px; height: 32px; } }

/* 시안 고침 (사용자 '이쪽도 데모1~3 번까지 너무 중복입니다'): 바로가기 4칸 · 카테고리 카드 · 숫자 알약 → 서버가 '실시간 당첨' 줄(3003 스킨-6 과 같은 내용)
   데모2 = 네온 '스토리' 줄 — 둥근 그림에 핑크 → 시안 네온 고리 · 시안 당첨금 · 유리 바탕 */
.live-wins { display: flex; align-items: stretch; gap: 10px; padding: 10px 12px; border: 1px solid var(--glass-line); border-radius: var(--radius-xl); background: rgba(255, 255, 255, .04); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); min-width: 0; }
.lw-label { flex: 0 0 auto; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 16px; background: linear-gradient(160deg, rgba(255, 43, 214, .28), rgba(34, 229, 255, .18)); border: 1px solid rgba(255, 43, 214, .5); color: #fff; font-size: 11px; line-height: 14px; text-shadow: 0 0 8px rgba(255, 43, 214, .8); }
.lw-live { width: 8px; height: 8px; margin-bottom: 4px; border-radius: 999px; background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); animation: demoPulse 1.4s ease-in-out infinite; }
@keyframes demoPulse { 50% { opacity: .3; } }
.lw-rail { flex: 1 1 auto; min-width: 0; gap: 10px; padding: 2px 0; scrollbar-width: none; scroll-snap-type: x proximity; }
.lw-rail::-webkit-scrollbar { display: none; }
.lw { flex: 0 0 66px; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--ink); text-decoration: none; scroll-snap-align: start; transition: transform .2s; }
.lw:hover { transform: translateY(-2px); }
.lw-cover { position: relative; width: 56px; height: 56px; margin-bottom: 4px; padding: 2px; border-radius: 999px; display: block; background: linear-gradient(135deg, #ff2bd6, #22e5ff); box-shadow: 0 0 12px rgba(255, 43, 214, .45); }
.lw-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; border: 2px solid #120624; }
.lw-art { position: absolute; inset: 2px; display: grid; place-items: center; padding: 6px; border-radius: 999px; border: 2px solid #120624; text-align: center; color: #fff; font-size: 8px; line-height: 10px; font-weight: 900; overflow: hidden; }
.lw-art > span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }
.lw-who { max-width: 100%; font-size: 11px; line-height: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-amt { font-size: 12px; line-height: 15px; font-weight: 900; color: var(--neon-cyan); text-shadow: 0 0 8px rgba(34, 229, 255, .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lw-amt small { font-size: 10px; }
.lw.is-pop .lw-amt { padding: 0 7px; border-radius: 999px; background: rgba(255, 43, 214, .2); color: #ff8ae8; text-shadow: none; font-size: 10px; line-height: 15px; }
.lw-nav { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.lw-nav button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; cursor: pointer; }
.lw-nav button:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 10px rgba(34, 229, 255, .35); }
.lw-empty { flex: 1 1 auto; align-self: center; padding: 8px; color: var(--ink-2); font-size: 13px; }
@media (max-width: 1023px) {
  .live-wins { padding: 8px 10px; gap: 8px; border-radius: var(--radius-lg); }
  .lw-label { width: 44px; font-size: 10px; line-height: 12px; }
  .lw { flex-basis: 60px; width: 60px; }
  .lw-cover { width: 52px; height: 52px; }
  .lw-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lw-live { animation: none; } .lw:hover { transform: none; } }

/* 참고 디자인 시안 (사용자 참고 사진 5장 · '라이브카지노 /인기슬롯 / 추천게임 /실시간당첨 이런배치및카드 디자인 만 변경도 해보아요' · 결정 샘플-6)
   게임 카드 = 그림 꽉 찬 세로 카드 · 위 가운데 매달린 HOT / NEW / LIVE 표 · 그림 위 큰 제목 · 아래 게임사 알약 · 위쪽 빛 · 올리면 떠오르며 빛남
   홈 줄 = PC 카드 크게(176px) · 휴대폰은 다음 카드가 살짝 보이게 옆으로 밀기(인기 슬롯 3×2 칸도 밀기) — 구조 · data-* 는 그대로 */
:root, [data-theme] { --rc-radius: 18px; --rc-ring: rgba(255, 255, 255, .10); --rc-glow: #ff2bd6; --rc-soft: rgba(255, 43, 214, .45); }
.ws-game { border-radius: var(--rc-radius); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px var(--rc-ring); transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s; }
.ws-game:hover, .ws-game:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--rc-glow), 0 14px 28px rgba(0, 0, 0, .4), 0 0 22px var(--rc-soft); }
.ws-game::before { inset: 36% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, .9) 8%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, 0)); }
.ws-game-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%); pointer-events: none; }
.ws-game-badge { top: 0; left: 50%; transform: translateX(-50%); }
.ws-game-badge .ws-badge { height: 18px; padding: 0 10px; border-radius: 0 0 8px 8px; font-size: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.ws-game-info { padding: 0 10px 12px; gap: 6px; }
.ws-game-title { text-shadow: 0 2px 6px rgba(0, 0, 0, .65); }
.ws-game-line { font-size: 13px; }
.ws-game-line-em { font-size: 17px; }
.ws-game-provider { padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: rgba(255, 255, 255, .88); font-size: 9px; letter-spacing: .08em; }
.ws-sechead-actions .ws-btn-ghost { border-radius: 999px; border: 1px solid var(--rc-ring); padding: 0 14px; }
@media (min-width: 1024px) { [data-page="index"] .sec .rail > .ws-game { flex-basis: 176px; width: 176px; } }
@media (max-width: 1023px) {
  [data-page="index"] .sec .rail, [data-page="index"] .sec .rail.m-grid { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; gap: 10px; scrollbar-width: none; }
  [data-page="index"] .sec .rail::-webkit-scrollbar { display: none; }
  [data-page="index"] .sec .rail > .ws-game, [data-page="index"] .sec .rail.m-grid > .ws-game { display: block; flex: 0 0 calc((100vw - 52px) / 2.4); width: calc((100vw - 52px) / 2.4); }
}
@media (prefers-reduced-motion: reduce) { .ws-game, .ws-game:hover { transition: none; transform: none; } }

/* 시안 고침 (사용자 '스포츠 와 게임사 도 데모3개 가 모두 다르게 나왔으면 합니다') — 홈 스포츠북 · 게임 제공사 줄 (구조 · 링크 그대로 · css 만)
   데모2 스포츠북 = '네온 아레나 카드'(세로 · 위에 네온 빛 그림 · 가운데 글 · 꽉 찬 네온 알약 버튼 · 휴대폰도 2장 나란히) · 게임 제공사 = '네온 알약 칩'(휴대폰은 옆으로 밀기 · 전부 보임) */
[data-page="index"] .sec[aria-label="스포츠북"] .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
[data-page="index"] .sec[aria-label="스포츠북"] .book { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; padding: 22px 18px 18px; border-radius: 26px; border: 1px solid var(--glass-line); background: radial-gradient(60% 55% at 50% 28%, rgba(162, 75, 255, .38), rgba(162, 75, 255, 0) 72%), rgba(255, 255, 255, .04); transition: border-color .2s, box-shadow .2s, transform .2s; }
[data-page="index"] .sec[aria-label="스포츠북"] .book:hover { transform: translateY(-3px); border-color: rgba(255, 43, 214, .6); box-shadow: 0 0 26px rgba(255, 43, 214, .28); }
[data-page="index"] .sec[aria-label="스포츠북"] .book img { align-self: center; width: 128px; height: 100px; filter: drop-shadow(0 0 18px rgba(34, 229, 255, .6)); }
[data-page="index"] .sec[aria-label="스포츠북"] .book-text { align-items: center; }
[data-page="index"] .sec[aria-label="스포츠북"] .book-text strong { font-size: 21px; line-height: 28px; font-weight: 900; background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-page="index"] .sec[aria-label="스포츠북"] .book .ws-btn { height: 42px; border: 0; border-radius: 999px; background: var(--neon-grad); color: #fff; box-shadow: 0 0 16px rgba(255, 43, 214, .45); }
[data-page="index"] .sec[aria-label="게임 제공사"] .provs { display: flex; flex-wrap: wrap; gap: 10px; }
[data-page="index"] .sec[aria-label="게임 제공사"] .provs > .prov { display: flex; flex: 0 0 auto; height: 50px; gap: 10px; padding: 0 18px 0 7px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .05); font-size: 13px; font-weight: 700; color: var(--ink); transition: border-color .2s, box-shadow .2s, color .2s; }
[data-page="index"] .sec[aria-label="게임 제공사"] .prov-logo.is-img { width: 64px; height: 36px; padding: 4px 8px; border-radius: 999px; background: #fff; }
[data-page="index"] .sec[aria-label="게임 제공사"] .prov:hover, [data-page="index"] .sec[aria-label="게임 제공사"] .prov:focus-visible { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 14px rgba(34, 229, 255, .35); }
@media (max-width: 1023px) {
  [data-page="index"] .sec[aria-label="스포츠북"] .books { gap: 10px; }
  [data-page="index"] .sec[aria-label="스포츠북"] .book { padding: 16px 10px 12px; gap: 8px; border-radius: 22px; }
  [data-page="index"] .sec[aria-label="스포츠북"] .book img { width: 84px; height: 66px; }
  [data-page="index"] .sec[aria-label="스포츠북"] .book-text strong { font-size: 16px; line-height: 22px; }
  [data-page="index"] .sec[aria-label="스포츠북"] .book-text span { font-size: 11px; line-height: 15px; }
  [data-page="index"] .sec[aria-label="스포츠북"] .book .ws-btn { height: 36px; }
  [data-page="index"] .sec[aria-label="게임 제공사"] .provs { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 0; scrollbar-width: none; }
  [data-page="index"] .sec[aria-label="게임 제공사"] .provs::-webkit-scrollbar { display: none; }
  [data-page="index"] .sec[aria-label="게임 제공사"] .provs > .prov { height: 46px; font-size: 12px; }
}

/* ============================================================================================
   나머지 화면 (사용자 '나머지 화면도 넓혀 주세요 · 최대한 다른느낌의 디지인이여야 고객이 선택의 폭이 넒어 집니다' · 결정 샘플-7)
   데모2 = '네온 아케이드' — 둥글고 말랑한 유리 · 빛나는 알약 탭 · 네온 고리 테두리 · 이벤트 단계는 빛나는 세로 선 ·
   알림은 말풍선 · 마이페이지는 그라데이션 유리 카드 + 동그란 바로가기 · 팝업은 알약 입력칸. 구조 · data-* · id 는 그대로 (css 만)
   ============================================================================================ */
/* 화면 제목: 큰 그라데이션 글자 · 아이콘은 빛나는 동그라미 */
.page-title .ws-icon { width: 46px; height: 46px; padding: 8px; border-radius: 999px; background: rgba(255, 43, 214, .14); box-shadow: 0 0 0 1px rgba(255, 43, 214, .45), 0 0 18px rgba(255, 43, 214, .35); box-sizing: border-box; }
.page-title h1 { font-size: 28px; line-height: 36px; }
.page-head .search, .search { border-radius: 999px !important; }
/* 분류 탭 · 작은 탭: 떠 있는 알약 묶음 */
.cat-bar { background: rgba(14, 4, 30, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cat-tabs { padding: 6px; gap: 6px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-line); }
.cat-tab { height: 52px; flex-direction: row; gap: 8px; border: 0; border-radius: 999px; background: transparent; }
.cat-tab .ws-icon { width: 24px; height: 24px; }
.cat-tab.is-active { background: var(--neon-grad); color: #fff; box-shadow: 0 0 18px rgba(255, 43, 214, .5); }
.ws-tabs, .seg { border-radius: 999px; padding: 5px; background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.ws-tab, .seg-btn { border-radius: 999px; }
.ws-tab.is-active, .seg-btn.is-active { background: var(--neon-grad); color: #fff; box-shadow: 0 0 14px rgba(255, 43, 214, .45); }
.pill { border-radius: 999px; background: rgba(34, 229, 255, .08); border: 1px solid rgba(34, 229, 255, .35); }
/* 로비 · 스포츠북 · 게임사 화면: 네온 고리 테두리(분홍 → 시안) · 크게 둥글게 */
.lobby { border-radius: 26px; border: 2px solid transparent; background: linear-gradient(#120624, #120624) padding-box, var(--neon-grad) border-box; box-shadow: 0 0 22px rgba(162, 75, 255, .3); }
.lobby:hover { box-shadow: 0 0 30px rgba(255, 43, 214, .55); }
.lobby img { border-radius: 24px; }
.lobby-cap span { background: var(--neon-grad); color: #fff; }
.sb-card { border-radius: 30px; border: 2px solid transparent; background: linear-gradient(#170a33, #120624) padding-box, var(--neon-grad) border-box; }
.sb-visual { background: radial-gradient(60% 70% at 50% 50%, rgba(162, 75, 255, .4), transparent 70%); }
.sb-body strong { background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-tags span { background: rgba(255, 255, 255, .06); border-color: var(--glass-line); }
.sb-card .ws-btn { border-radius: 999px; }
.pv-hero { border-radius: 30px !important; border: 1px solid var(--glass-line); background: radial-gradient(60% 120% at 85% 40%, rgba(255, 43, 214, .3), transparent 60%), radial-gradient(50% 100% at 10% 100%, rgba(34, 229, 255, .2), transparent 60%), rgba(255, 255, 255, .04) !important; }
.pv-type { border-radius: 999px !important; }
.pager button, .pager a { border-radius: 999px !important; }
/* 이벤트: 둥근 유리 카드 · 그림 위 떠 있는 분류 알약 · 위로 떠오름 */
.ev-filter { background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.ev-filter.is-active { background: var(--neon-grad); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(255, 43, 214, .45); }
.ev-feat, .ev-hero { border-radius: 32px !important; border: 1px solid var(--glass-line); box-shadow: 0 0 40px rgba(162, 75, 255, .25); }
.ev-card { border-radius: 26px !important; border-color: var(--glass-line); background: rgba(255, 255, 255, .04); transition: transform .22s, box-shadow .22s; }
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255, 43, 214, .5), 0 0 26px rgba(255, 43, 214, .3); }
.ev-thumb { margin: 8px 8px 0; border-radius: 20px; background: radial-gradient(70% 80% at 50% 50%, rgba(162, 75, 255, .35), rgba(18, 6, 36, .6)); }
.ev-cat { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: rgba(34, 229, 255, .12); color: var(--neon-cyan); }
/* 이벤트 상세: 단계 = 빛나는 세로 선으로 이은 동그라미 */
.num-steps { position: relative; gap: 18px; }
.num-steps::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #ff2bd6, #22e5ff); box-shadow: 0 0 10px rgba(255, 43, 214, .6); }
.num-steps li > span { position: relative; background: #120624; border: 2px solid var(--neon-pink); color: #fff; box-shadow: 0 0 12px rgba(255, 43, 214, .6); }
.table-wrap { border-radius: 22px; overflow: hidden; border: 1px solid var(--glass-line); }
/* 마블: 둥근 칸 · 빛나는 가운데 */
.mb-board { padding: 10px; border-radius: 30px; background: rgba(255, 255, 255, .03); border: 1px solid var(--glass-line); }
.mb-cell { border-radius: 18px !important; }
.mb-center { border-radius: 26px !important; box-shadow: inset 0 0 40px rgba(255, 43, 214, .25); }
.mb-stat, .mb-box { border-radius: 20px; background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
/* 마이페이지: 그라데이션 유리 카드 · 동그라미 아바타 고리 · 빛나는 숫자 칸 · 동그란 바로가기 */
.mp-top { border: 1px solid transparent !important; background: linear-gradient(135deg, rgba(255, 43, 214, .32), rgba(162, 75, 255, .25) 50%, rgba(34, 229, 255, .22)) !important; box-shadow: 0 0 40px rgba(162, 75, 255, .35); }
.mp-ava { border-radius: 999px; border: 2px solid transparent; background: linear-gradient(#1b0b3a, #1b0b3a) padding-box, var(--neon-grad) border-box; box-shadow: 0 0 16px rgba(255, 43, 214, .55); }
.mp-stats .ws-stat { border-radius: 24px; text-align: center; align-items: center; box-shadow: inset 0 0 24px rgba(34, 229, 255, .08); }
.ws-stat-value b { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(34, 229, 255, .55); }
.mp-quicks { gap: 14px; }
.mp-quick { height: auto; padding: 0; border: 0; background: transparent; }
.mp-quick .ws-icon { width: 58px; height: 58px; padding: 13px; box-sizing: border-box; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px var(--glass-line); transition: box-shadow .2s; }
.mp-quick:hover { background: transparent; }
.mp-quick:hover .ws-icon { box-shadow: 0 0 0 2px var(--neon-pink), 0 0 18px rgba(255, 43, 214, .55); }
.ws-reward { border-radius: 999px; }
.cal-d { border-radius: 999px; }
/* 알림: 말풍선 */
.nt-item { border-radius: 22px 22px 22px 6px; border-color: var(--glass-line); background: rgba(255, 255, 255, .05); }
.nt-item.is-read { background: rgba(255, 255, 255, .025); }
.nt-item.is-open { border-color: var(--neon-pink); box-shadow: 0 0 18px rgba(255, 43, 214, .25); }
.nt-ic { border-radius: 999px; background: rgba(255, 43, 214, .12); box-shadow: 0 0 0 1px rgba(255, 43, 214, .4); }
/* 도메인 · 이용규정 */
.dm-row { border-radius: 999px; background: rgba(255, 255, 255, .05); border-color: var(--glass-line); }
.tm-groups { padding: 6px; border-radius: 26px; background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-line); }
.tm-group { border: 0; border-radius: 999px; background: transparent; }
.tm-group.is-active { background: var(--neon-grad); color: #fff; box-shadow: 0 0 14px rgba(255, 43, 214, .45); }
.acc { border-radius: 22px; background: rgba(255, 255, 255, .04); border-color: var(--glass-line); }
.acc:has(.acc-btn[aria-expanded="true"]) { border-color: var(--neon-pink); box-shadow: 0 0 16px rgba(255, 43, 214, .2); }
/* 팝업: 위 네온 줄 · 알약 입력칸 · 알약 버튼 */
.modal-box { border-radius: 32px; box-shadow: 0 0 0 1px rgba(255, 43, 214, .35), 0 0 60px rgba(162, 75, 255, .35), var(--shadow-pop); }
.modal-box::before { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--neon-grad); box-shadow: 0 0 14px rgba(255, 43, 214, .8); pointer-events: none; }
.modal-head h2 { background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.modal-x { border-radius: 999px; }
.ws-input, .sel { border-radius: 999px; padding-left: 20px; background: rgba(255, 255, 255, .06); border-color: var(--glass-line); }
.ws-input:focus, .sel:focus { outline: 0; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(34, 229, 255, .2), 0 0 14px rgba(34, 229, 255, .35); }
.modal-box .ws-btn { border-radius: 999px; }
.auth-hero { border-radius: 24px; }
@media (max-width: 1023px) {
  .page-title h1 { font-size: 22px; line-height: 30px; }
  .page-title .ws-icon { width: 40px; height: 40px; }
  .cat-tabs { border-radius: 26px; }
  .cat-tab { flex-direction: column; gap: 3px; border-radius: 20px; }
  .mp-quick .ws-icon { width: 52px; height: 52px; padding: 12px; }
  .modal-box::before { left: 40%; right: 40%; }
}
/* 마블 3D 주사위: 어두운 유리 · 분홍 네온 테두리 · 시안 빛 눈 · 1 은 분홍 빛 */
.mb-cube-wrap { --die-face: linear-gradient(145deg, #2c1257, #140630); --die-line: rgba(255, 43, 214, .75); --die-dot: radial-gradient(circle at 40% 35%, #b8fbff, #22e5ff); --die-one: radial-gradient(circle at 40% 35%, #ffc2f2, #ff2bd6); --die-radius: 18px; }
.mb-face { box-shadow: inset 0 0 14px rgba(255, 43, 214, .35), 0 0 12px rgba(255, 43, 214, .35); }
.mb-face i { box-shadow: 0 0 8px rgba(34, 229, 255, .85); }
.mb-face[data-face="1"] i { box-shadow: 0 0 12px rgba(255, 43, 214, .9); }
.mb-cube-wrap::after { background: radial-gradient(closest-side, rgba(255, 43, 214, .45), transparent); }
@media (max-width: 1023px) { .mb-roll, .mb-log { white-space: nowrap; padding: 0 12px; } } /* 휴대폰 가운데 칸에서 버튼 글자가 두 줄로 꺾이지 않게 */

/* 슬롯 캐릭터 · 아이콘 (사용자 '슬롯 캐릭터 추가와 아이콘 추가 합니다 적절히 알맞은 곳에 배치해 주세요' · 결정 샘플-8)
   캐릭터 그림(char-*)은 네모 그림이라 마스코트 자리 · 배너 · 이벤트 그림에서 잘라 채우고(cover) 얼굴이 보이게 위쪽 기준 · 데모2 = 둥근 네온 고리(분홍 → 시안 빛)
   배너 장식 = 아이콘 두 개가 배너 그림 모서리에 떠 있음(눌리지 않음 · 움직임 줄이기 설정이면 멈춤) */
img[src*="skin-demo2/char-"] { object-fit: cover; object-position: 50% 18%; }
.home-ev { position: relative; }
.home-ev::before, .home-ev::after { content: ""; position: absolute; z-index: 3; background: center / contain no-repeat; pointer-events: none; animation: demoFloat 4.5s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
@keyframes demoFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.home-ev::after { animation-delay: -2.2s; }

.banner-visual[src*="/char-"] { width: 232px; height: 244px; justify-self: end; border-radius: 28px; border: 2px solid rgba(255, 43, 214, .75); box-shadow: 0 0 22px rgba(255, 43, 214, .5), 0 0 44px rgba(34, 229, 255, .25); }
.welcome img[src*="/char-"], .auth-mascot[src*="/char-"], .tg-hero img[src*="/char-"], .empty img[src*="/char-"] { border-radius: 18px; border: 1px solid rgba(255, 43, 214, .7); box-shadow: 0 0 14px rgba(255, 43, 214, .45); }
.drawer-card img[src*="/char-"], .us-card img[src*="/char-"], .tg-mini img[src*="/char-"] { border-radius: 999px; box-shadow: 0 0 0 2px var(--neon-pink), 0 0 12px rgba(255, 43, 214, .6); }
.ev-thumb img[src*="/char-"] { width: 100%; height: 100%; border-radius: inherit; }
.home-ev::before { top: 6px; right: 226px; width: 96px; height: 54px; background-image: url(../img/skin-demo2/icon-22.webp); filter: drop-shadow(0 0 10px rgba(255, 43, 214, .7)); }
.home-ev::after { top: 186px; right: 0; width: 82px; height: 70px; background-image: url(../img/skin-demo2/icon-01.webp); filter: drop-shadow(0 0 12px rgba(255, 120, 40, .6)); }
@media (max-width: 1023px) {
  .banner-visual[src*="/char-"] { width: 116px; height: 138px; border-radius: 20px; }
  .home-ev::before { top: 4px; right: 92px; width: 52px; height: 30px; }
  .home-ev::after { top: 128px; right: 0; width: 44px; height: 38px; }
}