/* =========================================================
   데모6 스킨 — 사용자 시안 '민트 계열 (Fresh Mint & Deep Teal + Warm Gold)' (메인시안-11 · 2026-11-15)
   - 3010 포트에서만 서버가 api.css 다음에 넣어요. 회원 화면 마크업 · data-* hook 은 그대로, 색 · 모양 · 글꼴만 바꿔요.
   - 서버(render/demo6-home.ts)가 더하는 칸: 머리말 메뉴 줄 · 보유머니 칩 · 왼쪽 메뉴 VIP 카드 · 보조 글 · 배지 · 텔레그램 · 도메인 카드,
     바닥글 네 칸, 홈 .d6-home. 이름은 모두 d6- 로 시작 · 움직임은 assets/js/demo6.js
   - 글꼴: 시안이 쓰는 G마켓 산스 (시안 안의 CDN 주소 그대로 · 회원 사이트 Pretendard 도 CDN)
   - 시안 숫자(Tailwind): teal-50 #f0fdfa · 100 #ccfbf1 · 200 #99f6e4 · 300 #5eead4 · 400 #2dd4bf · 500 #14b8a6 · 600 #0d9488 · 700 #0f766e · 800 #115e59 · 900 #134e4a · 950 #042f2e
   ========================================================= */

@font-face { font-family: "GmarketSans"; font-weight: 300; font-style: normal; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff"); }
@font-face { font-family: "GmarketSans"; font-weight: 400 600; font-style: normal; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); }
@font-face { font-family: "GmarketSans"; font-weight: 700 900; font-style: normal; font-display: swap; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff"); }

/* ---------- 1. 토큰: 민트 바탕 · 틸 동작 · 금색 강조 ---------- */
:root, [data-theme="space"] {
  --space-900: #edf8f6;   /* 페이지 바탕 */
  --space-800: #ffffff;   /* 머리말 · 칸 */
  --space-700: #ffffff;   /* 카드 */
  --space-600: #f2fbf9;   /* 오목한 칸 · 입력칸 */
  --space-500: #e6f7f4;
  --line: #b8ece3;
  --line-strong: #5eead4;
  --ink: #18181b;
  --ink-2: #52525b;
  --ink-3: #71717a;

  --blue-500: #0d9488;   /* 주요 동작 = 틸 */
  --blue-600: #0f766e;
  --blue-400: #0f766e;   /* 링크 글자 */
  --on-blue: #ffffff;
  --yellow-400: #fbbf24; /* 금색 */
  --yellow-600: #f59e0b;
  --on-bright: #18181b;
  --violet-600: #7c3aed;
  --violet-300: #8b5cf6;
  --pink-500: #f43f5e;
  --mint-500: #10b981;
  --coral-500: #e11d48;
  --focus: #2dd4bf;

  --glow-blue: transparent;
  --glow-violet: transparent;
  --scrim: rgba(4, 47, 46, .6);
  --card-hover: rgba(4, 47, 46, .5);
  --shadow-pop: 0 24px 48px -12px rgba(4, 47, 46, .28);
  --glow-primary: 0 4px 12px rgba(13, 148, 136, .25);

  --header-h: 64px;
  --sidebar-w: 276px;
  --sidebar-w-collapsed: 78px;
  --font-sans: "GmarketSans", "Gmarket Sans TTF", "Gmarket Sans", Pretendard, "Apple SD Gothic Neo", sans-serif;
  --font-game: var(--font-sans);

  /* 스킨 전용 */
  --teal-grad: linear-gradient(90deg, #0d9488, #10b981);
  --teal-grad-hover: linear-gradient(90deg, #0f766e, #059669);
  --gold-grad: linear-gradient(90deg, #fbbf24, #fbbf24 50%, #fb923c);
  --mint: #e6f7f4;
  --mint-2: #f2fbf9;
  --side-bg: #e2f5f1;
  --bd: rgba(153, 246, 228, .9);   /* teal-200/90 */
  --bd-soft: rgba(153, 246, 228, .8);
  --sh-2xs: 0 1px rgba(0, 0, 0, .05);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .05);
  --sh-sm: 0 1px 3px rgba(4, 47, 46, .05), 0 1px 2px -1px rgba(4, 47, 46, .05);
  --sh-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --sh-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
html { color-scheme: light; }
body { background: #edf8f6; color: var(--ink); letter-spacing: -0.025em; }
::selection { background: #99f6e4; color: #042f2e; }
a { color: inherit; }
a:hover { color: inherit; }
:focus-visible { outline-color: #2dd4bf; }
@media (max-width: 1023px) { :root { --header-h: 60px; } }

/* ---------- 2. 공통 버튼 · 배지 · 입력 (기존 ws- 부품) ---------- */
.ws-btn { border-radius: 12px; font-weight: 700; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; }
.ws-btn:active { transform: scale(.98); }
.ws-btn-primary { background: var(--teal-grad); color: #fff; border: 1px solid #0f766e; box-shadow: 0 4px 6px -1px rgba(13, 148, 136, .2); }
.ws-btn-primary:hover { background: var(--teal-grad-hover); color: #fff; }
.ws-btn-gold { background: var(--gold-grad); color: #18181b; border: 1px solid #f59e0b; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, .25); }
.ws-btn-gold:hover { background: linear-gradient(90deg, #f59e0b, #f97316); color: #18181b; }
.ws-btn-outline { background: #fff; color: #042f2e; border: 1px solid #99f6e4; box-shadow: var(--sh-2xs); }
.ws-btn-outline:hover { background: #f0fdfa; border-color: #2dd4bf; color: #042f2e; }
.ws-btn-ghost { color: #134e4a; }
.ws-btn-ghost:hover { background: rgba(204, 251, 241, .6); color: #134e4a; }
.ws-badge-live { background: #e11d48; color: #fff; }
.ws-badge-hot { background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; }
.ws-badge-new { background: #0d9488; color: #fff; }
.ws-badge-vip { background: #fbbf24; color: #18181b; }
.ws-badge-new .ws-badge-dot, .ws-badge-hot .ws-badge-dot, .ws-badge-live .ws-badge-dot { background: #fff; }
.pill { background: #fff; border-color: #99f6e4; color: #134e4a; font-weight: 700; }
.pill b { color: #0f766e; }
.ws-tabs { background: #e6f7f4; border-color: #99f6e4; border-radius: 12px; }
.ws-tab { border-radius: 8px; color: rgba(19, 78, 74, .75); font-weight: 700; }
.ws-tab.is-active { background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; box-shadow: var(--sh-xs); }
.ws-input, .sel, .tg-input, .search { background: #fff; border-color: #99f6e4; border-radius: 12px; color: #18181b; }
.ws-input:focus, .sel:focus { outline: 0; border-color: #14b8a6; box-shadow: 0 0 0 2px #99f6e4; }
.tg-input:focus-within, .search:focus-within { border-color: #14b8a6; box-shadow: 0 0 0 2px #99f6e4; }
.ws-input::placeholder { color: #a1a1aa; }
.check input, .opt input { accent-color: #0d9488; }

/* ---------- 3. 시안 부품 (d6-) ---------- */
.d6-i3 { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; background: var(--g); color: #fff; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: -.05em; user-select: none;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(0, 0, 0, .32), 0 4px 10px -2px rgba(13, 148, 136, .3); }
.d6-i3::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.d6-i3 i { position: relative; font-style: normal; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .1)); }
.d6-i3.is-xs { width: 20px; height: 20px; border-radius: 8px; font-size: 11px; }
.d6-i3.is-sm { width: 28px; height: 28px; border-radius: 12px; font-size: 12px; }
.d6-i3.is-lg { width: 40px; height: 40px; border-radius: 16px; font-size: 16px; }
.d6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #042f2e; font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: var(--sh-2xs); text-decoration: none; transition: background .15s, border-color .15s, transform .1s; }
.d6-btn:hover { background: #f0fdfa; border-color: #2dd4bf; color: #042f2e; }
.d6-btn:active { transform: scale(.98); }
.d6-btn:disabled { opacity: .45; cursor: default; }
.d6-btn.is-xs { height: 28px; padding: 0 12px; font-size: 11px; }
.d6-btn.is-primary { background: var(--teal-grad); border-color: #0f766e; color: #fff; box-shadow: 0 4px 6px -1px rgba(13, 148, 136, .2); }
.d6-btn.is-primary:hover { background: var(--teal-grad-hover); color: #fff; }
.d6-btn.is-gold { background: var(--gold-grad); border-color: #f59e0b; color: #18181b; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, .25); }
.d6-btn.is-gold:hover { background: linear-gradient(90deg, #f59e0b, #f97316); color: #18181b; }
.d6-btn.is-glass { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .4); color: #fff; box-shadow: none; }
.d6-btn.is-glass:hover { background: rgba(255, 255, 255, .25); color: #fff; }
.d6-logo { font-size: 24px; line-height: 1; font-weight: 700; letter-spacing: -.05em; color: #18181b; }
.d6-logo i { font-style: normal; color: #0d9488; }
.d6-chip { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid #0f766e; background: #0d9488; padding: 2px 10px; font-size: 11px; font-style: normal; font-weight: 700; color: #fff; }
.d6-chip.is-gold { border-color: #f59e0b; background: linear-gradient(90deg, #fbbf24, #fb923c); color: #18181b; }

/* ---------- 4. 머리말 ---------- */
.hd { height: var(--header-h); gap: 8px; padding: 0 20px 0 max(12px, env(safe-area-inset-left, 0px)); background: #fff; border-bottom: 1px solid var(--bd); box-shadow: var(--sh-xs); }
.hd-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #134e4a; }
.hd-btn:hover { background: #f0fdfa; }
.hd > .hd-btn[data-side-toggle] { background: #e6f7f4; }
.hd > .hd-btn[data-side-toggle]:hover { background: #ccfbf1; }
.hd-btn[aria-expanded="true"], .hd-user[aria-expanded="true"] { border-color: #0d9488; }
.hd-count { top: 6px; right: 6px; min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 999px; background: #f43f5e; color: transparent; font-size: 0; box-shadow: 0 0 0 2px #fff; }
.hd-logo { gap: 8px; text-decoration: none; }
.d6-official { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, #0d9488, #10b981); padding: 2px 8px; font-size: 10px; font-style: normal; font-weight: 700; line-height: 16px; color: #fff; }
.d6-hnav { display: none; align-items: center; gap: 6px; margin-left: 12px; }
.d6-hnav a { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(240, 253, 250, .6); color: #27272a; font-size: 12px; line-height: 16px; font-weight: 700; text-decoration: none; transition: background .15s; }
.d6-hnav a:hover { background: rgba(204, 251, 241, .7); color: #042f2e; }
.d6-hnav a.is-on { background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; box-shadow: var(--sh-xs); }
.d6-hnav em { border-radius: 999px; padding: 1px 6px; font-size: 10px; font-style: normal; font-weight: 700; }
.d6-hnav em.is-num { background: rgba(153, 246, 228, .8); color: #134e4a; }
.d6-hnav em.is-hot { background: #fbbf24; color: #18181b; }
.d6-hnav a.is-on em { background: rgba(255, 255, 255, .25); color: #fff; }
@media (min-width: 1280px) { .d6-hnav { display: flex; } }
.hd-lang { display: none; }
.ws-balance { gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; }
.ws-balance-amt { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 12px; border: 1px solid #99f6e4; background: rgba(230, 247, 244, .8); }
.d6-coin { width: 24px; height: 20px; object-fit: contain; }
.d6-bal-t { display: flex; flex-direction: column; line-height: 1; }
.d6-bal-t small { font-size: 10px; font-weight: 700; color: #115e59; margin-bottom: 3px; }
.d6-bal-t b { font-size: 12px; font-weight: 700; color: #18181b; font-variant-numeric: tabular-nums; }
.d6-hdep { display: none; height: 40px; align-items: center; padding: 0 12px; border: 0; border-radius: 12px; background: var(--teal-grad); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: var(--sh-xs); }
.d6-hdep:hover { background: var(--teal-grad-hover); }
@media (min-width: 768px) { .d6-hdep { display: inline-flex; } }
.ws-balance-add { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #5eead4; background: #f0fdfa; color: #134e4a; font-size: 16px; font-weight: 700; }
.ws-balance-add:hover { background: #ccfbf1; }
.ws-balance-add[aria-expanded="true"] { border-color: #115e59; background: #115e59; color: #fff; }
.hd-user { height: 40px; border-radius: 12px; border-color: #99f6e4; background: #fff; color: #18181b; font-weight: 700; }
.hd-user:hover { background: #f0fdfa; }
.hd-guest, .hd .only-guest { gap: 6px; }
.hd .only-guest [data-modal-open="login"] { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--teal-grad); border: 1px solid #0f766e; color: #fff; font-size: 12px; box-shadow: 0 4px 6px -1px rgba(13, 148, 136, .2); }
.hd .only-guest [data-modal-open="login"]:hover { background: var(--teal-grad-hover); }
.hd .only-guest [data-modal-open="signup"] { height: 40px; padding: 0 16px; border-radius: 12px; background: var(--gold-grad); border: 1px solid #f59e0b; color: #18181b; font-size: 12px; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, .25); }
.hd .only-guest [data-modal-open="signup"]:hover { background: linear-gradient(90deg, #f59e0b, #f97316); }
.dd { background: #fff; border: 1px solid #99f6e4; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.wl-big button { border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #042f2e; font-weight: 700; }
.wl-big button:first-child { background: var(--teal-grad); border-color: #0f766e; color: #fff; }
.wl-row { border-radius: 12px; border: 1px solid #ccfbf1; background: rgba(240, 253, 250, .6); }
.wl-row-text span { color: #0f766e; }
.wl-conv { border-radius: 8px; background: var(--teal-grad); border: 0; color: #fff; font-weight: 700; }
.bl-head, .bl-tabs { border-color: #ccfbf1; }
.bl-readall, .bl-more { color: #0d9488; font-weight: 700; }
.bl-tabs button.is-active { background: #0d9488; color: #fff; }
.bl-item { border-color: #f0fdfa; }
.bl-item:hover { background: rgba(240, 253, 250, .6); }
@media (max-width: 1023px) {
  .hd { padding: 0 12px 0 max(12px, env(safe-area-inset-left, 0px)); gap: 6px; }
  .hd-btn { width: 36px; height: 36px; }
  .d6-logo { font-size: 20px; }
  .ws-balance-amt { height: 36px; padding: 0 10px; }
  .ws-balance-add { width: 36px; height: 36px; }
  .hd .only-guest [data-modal-open="login"] { height: 36px; padding: 0 12px; }
}
@media (max-width: 639.98px) {
  .d6-official, .d6-bal-t small { display: none; }
  .d6-coin { width: 20px; height: 16px; }
  .hd .only-guest [data-modal-open="signup"] { display: none; }
}

/* ---------- 5. 왼쪽 메뉴 · 드로어 ---------- */
.side { padding: 12px; gap: 16px; background: var(--side-bg); border-right: 1px solid var(--bd-soft); }
.side-group { gap: 6px; }
.side-title { padding: 0 8px 0; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: rgba(19, 78, 74, .75); }
.ws-nav { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i l b" "i s b"; align-content: center; column-gap: 12px; row-gap: 2px; height: 48px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bd); background: #fff; color: #18181b; box-shadow: var(--sh-2xs); transition: border-color .15s, background .15s; }
.ws-nav:hover { border-color: #2dd4bf; background: rgba(240, 253, 250, .7); color: #18181b; }
.ws-nav > .d6-i3, .ws-nav > .ws-icon { grid-area: i; align-self: center; }
.ws-nav-label { grid-area: l; align-self: end; font-size: 14px; line-height: 17px; font-weight: 700; }
.ws-nav:not(:has(.d6-nav-sub)) .ws-nav-label { grid-row: 1 / span 2; align-self: center; }
.d6-nav-sub { grid-area: s; align-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 14px; font-weight: 500; color: #71717a; }
.d6-nav-badge { grid-area: b; align-self: center; border-radius: 999px; padding: 2px 8px; font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: -.02em; box-shadow: var(--sh-2xs); }
.d6-nav-badge.is-hot { background: linear-gradient(90deg, #f43f5e, #f97316); color: #fff; }
.d6-nav-badge.is-event { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #18181b; }
.d6-nav-badge.is-live, .d6-nav-badge.is-vip { background: #d1fae5; color: #042f2e; }
.ws-nav.is-active { border-color: #115e59; background: linear-gradient(90deg, #0f766e, #0d9488, #10b981); color: #fff; box-shadow: 0 4px 6px -1px rgba(15, 118, 110, .25); }
.ws-nav.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 6px; border-radius: 0 999px 999px 0; background: #fcd34d; }
.ws-nav.is-active .d6-nav-sub { color: #ccfbf1; }
.nav-caret { right: 8px; top: 24px; width: 28px; height: 28px; border-radius: 8px; color: #115e59; }
.nav-caret:hover { background: #ccfbf1; color: #115e59; }
.nav-row .ws-nav { padding-right: 40px; }
.side-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; padding: 6px; border: 1px solid #99f6e4; border-radius: 12px; background: rgba(255, 255, 255, .9); box-shadow: var(--sh-2xs); }
.side-sub a { height: 32px; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 8px; background: rgba(240, 253, 250, .8); color: #042f2e; font-size: 12px; font-weight: 700; transition: background .15s, color .15s; }
.side-sub a::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #14b8a6; }
.side-sub a:hover { background: #0d9488; color: #fff; }
.side-sub a:hover::before { background: #fff; }
.d6-vip { padding: 14px; border-radius: 16px; border: 1px solid rgba(94, 234, 212, .8); background: linear-gradient(135deg, #0f766e, #0d9488, #059669); color: #fff; box-shadow: var(--sh-md); }
.d6-vip-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d6-vip-h > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.d6-vip-h em { flex: none; border-radius: 6px; background: #fbbf24; padding: 2px 8px; font-size: 10px; font-style: normal; font-weight: 700; color: #18181b; }
.d6-vip-h b { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-vip-h a { flex: none; font-size: 11px; font-weight: 700; color: #ccfbf1; text-decoration: underline; }
.d6-vip-h a:hover { color: #fff; }
.d6-vip-n { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, .2); font-size: 12px; }
.d6-vip-n small { display: block; font-size: 10px; color: #ccfbf1; }
.d6-vip-n b { font-weight: 700; font-variant-numeric: tabular-nums; }
.d6-vip-n .is-gold { color: #fcd34d; }
.d6-vip-n .is-mint { color: #a7f3d0; }
.d6-vip-p { margin-top: 8px; font-size: 11px; line-height: 16px; color: #f0fdfa; }
.d6-vip-b { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.d6-vip-b button { padding: 6px 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .15); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.d6-vip-b button:hover { background: rgba(255, 255, 255, .25); }
.d6-vip-b .is-dep { border-color: #fbbf24; background: #fbbf24; color: #18181b; box-shadow: var(--sh-2xs); }
.d6-vip-b .is-dep:hover { background: #fcd34d; }
.d6-side-cards { display: flex; flex-direction: column; gap: 8px; }
.d6-tg { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid #7dd3fc; background: linear-gradient(90deg, #0ea5e9, #14b8a6, #059669); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 15px -3px rgba(13, 148, 136, .2); transition: transform .15s; }
.d6-tg:hover { transform: scale(1.01); }
.d6-tg-i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .25); font-size: 24px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05); }
.d6-tg-t { display: flex; flex-direction: column; min-width: 0; }
.d6-tg-t small { font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #e0f2fe; }
.d6-tg-t b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-tg-t span { font-size: 11px; color: #f0fdfa; }
.d6-dom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid #5eead4; background: #fff; text-decoration: none; box-shadow: var(--sh-2xs); }
.d6-dom:hover { background: #f0fdfa; }
.d6-dom span { display: flex; flex-direction: column; min-width: 0; }
.d6-dom small { font-size: 10px; font-weight: 700; color: #0f766e; }
.d6-dom b { font-size: 11px; font-weight: 700; color: #18181b; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d6-dom em { flex: none; border-radius: 8px; background: #0d9488; padding: 4px 8px; font-size: 10px; font-style: normal; font-weight: 700; color: #fff; }
.side-collapsed .side { padding: 12px 8px; }
.side-collapsed .side .d6-vip, .side-collapsed .side .d6-dom, .side-collapsed .side .d6-tg-t, .side-collapsed .side .d6-nav-sub, .side-collapsed .side .d6-nav-badge, .side-collapsed .side .ws-nav-label { display: none; }
.side-collapsed .side .ws-nav { display: flex; justify-content: center; height: 48px; padding: 0; }
.side-collapsed .side .side-title { width: 32px; background: #5eead4; }
.side-collapsed .side .d6-tg { justify-content: center; padding: 0; width: 44px; height: 44px; margin: 0 auto; background: linear-gradient(135deg, #38bdf8, #14b8a6); border: 0; border-radius: 12px; }
.side-collapsed .side .d6-tg-i { background: none; box-shadow: none; font-size: 18px; }
.drawer-panel { width: 276px; background: var(--side-bg); border-right: 1px solid #99f6e4; padding-top: env(safe-area-inset-top, 0px); }
.drawer.is-open .scrim { background: rgba(4, 47, 46, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer-head { height: 60px; padding: 0 16px; background: #fff; border-bottom: 1px solid #99f6e4; }
.drawer-head .d6-logo { font-size: 20px; }
.drawer-head .modal-x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #99f6e4; background: #fff; color: #115e59; }
.drawer-me { display: none; }
.drawer-nav { padding: 12px; gap: 16px; }
.drawer-out { background: #fff; border-color: #99f6e4; color: #115e59; border-radius: 12px; }
.drawer-out:hover { color: #e11d48; }

/* ---------- 6. 본문 · 화면 공통 (다른 화면은 시안 색 · 카드 모양만) ---------- */
.main { padding: 20px 24px 0; gap: 20px; }
@media (max-width: 1023px) { .main { padding: 14px 12px calc(var(--tabbar-h) + 20px); gap: 16px; } }
.page-head { padding: 14px 20px; border-radius: 16px; border: 1px solid var(--bd-soft); background: #fff; box-shadow: var(--sh-2xs); }
.page-title h1 { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.025em; color: #18181b; }
.page-title .ws-icon { width: 40px; height: 40px; padding: 6px; border-radius: 16px; background: linear-gradient(135deg, #2dd4bf, #14b8a6, #047857); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(0, 0, 0, .32), 0 4px 10px -2px rgba(13, 148, 136, .3); }
.card, .ws-stat, .tile, .drawer-card, .auth-hero, .tg-hero, .addr-box, .hlist, .checks, .mp-top, .book, .cat, .home-side { background: #fff; border: 1px solid var(--bd-soft); border-radius: 16px; box-shadow: var(--sh-sm); }
.opt, .picked, .est-row, .sub-box, .key { background: #fff; border-color: #99f6e4; }
.opt:has(input:checked) { border-color: #0d9488; background: #f0fdfa; box-shadow: inset 0 0 0 1px #0d9488; }
.key:active { background: #e6f7f4; }
.addr-val, .copy-val { background: #f2fbf9; }
.copy-btn { background: #fff; border-color: #99f6e4; }
.copy-btn:hover { color: #0f766e; border-color: #2dd4bf; }
.warn-box, .form-error { background: #fff1f2; border-color: #fecdd3; }
.tg-box { background: #f0fdfa; border-color: #5eead4; }
.stepper li.is-done { border-bottom-color: #0d9488; }
.pin-dots i.is-on { background: #0d9488; border-color: #0d9488; }
.htag.is-out { background: #0d9488; color: #fff; }
.ws-sechead-title h3 { color: #18181b; font-weight: 700; }
.ws-sechead-meta { border-radius: 999px; background: #0d9488; color: #fff; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.perk b, .cat-label, .t-gold, .acc-a, .ev-more, .mb-vsum b, .rl-left b, .rl-row b, .rl-result.is-win { color: #0f766e; }

/* 게임 카드 (카지노 · 슬롯 · 게임사 화면) — 시안 GameCard 모양 */
.ws-game { border-radius: 16px; border: 1px solid var(--bd); background: #18181b; box-shadow: var(--sh-md); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ws-game:hover, .ws-game:focus-visible { transform: translateY(-4px); border-color: #14b8a6; box-shadow: 0 20px 25px -5px rgba(15, 118, 110, .15); }
.ws-game::before { background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .85) 30%, transparent 60%); }
.ws-game-play { background: var(--gold-grad); color: #18181b; }
.ws-game-provider { color: rgba(153, 246, 228, .9); }
.ws-game-fav[aria-pressed="true"], .ws-game-fav:hover { color: #fbbf24; }
.lobby { border-radius: 16px; border: 1px solid var(--bd); box-shadow: var(--sh-md); }
.lobby:hover { border-color: #14b8a6; }
.lobby-cap span { background: rgba(255, 255, 255, .92); color: #18181b; }
.prov { background: #f2fbf9; border: 1px solid var(--bd-soft); border-radius: 16px; color: #18181b; }
.prov:hover { border-color: #14b8a6; background: #fff; }
.cat-tab, .seg-btn { border-radius: 12px; border-color: #99f6e4; background: #fff; color: #27272a; font-weight: 700; }
.cat-tab.is-active, .seg-btn.is-active, .cat-tab[aria-selected="true"] { background: linear-gradient(90deg, #0d9488, #10b981); border-color: #0f766e; color: #fff; }
.empty { background: rgba(240, 253, 250, .4); border: 1px dashed #5eead4; border-radius: 16px; color: rgba(19, 78, 74, .7); }

/* 이벤트 · 마블 · 룰렛 · 마이페이지 */
.ev-filter { border-radius: 12px; border-color: #99f6e4; background: #fff; font-weight: 700; }
.ev-filter.is-active { background: linear-gradient(90deg, #0d9488, #10b981); border-color: #0f766e; color: #fff; }
.ev-feat { background: linear-gradient(90deg, #064e3b, #0d9488, #10b981) !important; border: 1px solid #5eead4; border-radius: 24px; color: #fff; box-shadow: var(--sh-lg); }
.ev-feat-badge { background: #fbbf24; color: #18181b; }
.ev-feat .ev-more { color: #fcd34d; }
.ev-card { border-radius: 16px; border: 1px solid var(--bd-soft); background: #fff; box-shadow: var(--sh-sm); transition: transform .2s, box-shadow .2s; }
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.ev-thumb { background: linear-gradient(135deg, #ccfbf1, #e6f7f4) !important; }
.ev-chip[aria-pressed="true"] { background: #0d9488; border-color: #0d9488; color: #fff; }
.cal-d.is-done { background: #0d9488; border-color: #0f766e; color: #fff; }
.bar i { background: linear-gradient(90deg, #0d9488, #10b981); }
.mb-center { background: radial-gradient(80% 80% at 50% 40%, #ccfbf1 0%, #ffffff 75%); }
.mb-roll, .mb-use { background: var(--gold-grad); border-color: #f59e0b; color: #18181b; }
.mb-me { background: #0d9488; color: #fff; }
.mb-cell.is-here { border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, .45); }
.rl-machine { background: radial-gradient(90% 80% at 50% 20%, #ccfbf1 0%, #ffffff 70%); border-color: #99f6e4; }
.rl-window { background: #f2fbf9; }
.rl-hit { border-color: #0d9488; background: #fff; }
.rl-fade.top { background: linear-gradient(to bottom, rgba(242, 251, 249, .95), rgba(242, 251, 249, 0)); }
.rl-fade.bottom { background: linear-gradient(to top, rgba(242, 251, 249, .95), rgba(242, 251, 249, 0)); }
.rl-arrow { color: #0d9488; }
.rl-jackpot { background: #fff; border-color: #fbbf24; }
.rl-jackpot span, .rl-jackpot b { color: #b45309; }
.mp-top { background: linear-gradient(135deg, #0f766e, #0d9488, #059669); border-color: #5eead4; color: #fff; }
.mp-me * { color: inherit; }
/* 초록 칸 위 버튼: 입금 = 시안의 금색 버튼 · 출금 · 전환 = 흰 바탕 진한 글자 (흰 글자가 안 보이던 것 고침) */
.mp-top .ws-btn-primary { background: linear-gradient(90deg, #fbbf24, #f59e0b); border-color: #fcd34d; color: #18181b; }
.mp-top .ws-btn-primary:hover { background: linear-gradient(90deg, #fcd34d, #fbbf24); color: #18181b; }
.mp-top .ws-btn-outline, .mp-top .ws-btn-outline:hover { color: #042f2e; }
.gm-frame { background: #042f2e; }

/* 팝업 — 시안 Modal (흰 바탕 · 틸 테두리 · 큰 모서리) */
.modal .scrim { background: rgba(4, 47, 46, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-box { background: #fff; border: 1px solid #99f6e4; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.modal-head { border-bottom: 1px solid #ccfbf1; }
.modal-head h2 { font-weight: 700; color: #18181b; }
.modal-x { border-radius: 999px; border: 1px solid #99f6e4; background: #f0fdfa; color: #115e59; }
.modal-x:hover { background: #ccfbf1; }
.head-tag, .head-back { background: #f0fdfa; border-color: #99f6e4; color: #115e59; }
.toast { background: #042f2e; color: #fff; }
@media (max-width: 1023px) { .modal-box, .modal-box.is-wide, .modal-box.is-mid { border-radius: 24px 24px 0 0; } }

/* 하단 탭 (사용자 결정: 남기고 민트색으로) */
.ws-tabbar { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #99f6e4; box-shadow: 0 -4px 16px rgba(4, 47, 46, .06); }
.ws-tabbar-item { color: #71717a; font-weight: 700; }
.ws-tabbar-item.is-active { color: #0d9488; }
.ws-tabbar-item.is-active::before { background: linear-gradient(90deg, #0d9488, #10b981); }

/* ---------- 7. 바닥글 (시안 네 칸 + 19+ 줄) ---------- */
.ft { margin-top: 12px; margin-bottom: 24px; padding: 24px; gap: 0; border: 1px solid var(--bd); border-radius: 24px; background: var(--side-bg); box-shadow: var(--sh-xs); }
.ft-m { display: none !important; }
.ft-grid.d6-ft { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 24px; }
@media (min-width: 768px) { .ft-grid.d6-ft { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.d6-ft .ft-brand { gap: 0; }
.d6-ft-logo { display: flex; align-items: center; gap: 8px; }
.d6-ft .ft-brand strong { margin-top: 8px; font-size: 12px; font-weight: 700; color: #042f2e; }
.d6-ft .ft-brand span { margin-top: 6px; font-size: 12px; line-height: 19px; color: #52525b; }
.d6-ft .ft-col { gap: 8px; }
.d6-ft .ft-col strong { margin-bottom: 2px; font-size: 12px; font-weight: 700; color: #18181b; }
.d6-ft .ft-col a, .d6-ft .ft-col button { font-size: 12px; font-weight: 700; color: #52525b; }
.d6-ft .ft-col a:hover, .d6-ft .ft-col button:hover { color: #0f766e; }
.d6-ft .ft-help { gap: 0; padding: 16px; border-radius: 16px; border: 1px solid #5eead4; background: #fff; box-shadow: var(--sh-sm); }
.d6-ft-help-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.d6-ft .ft-help strong { font-size: 14px; font-weight: 700; color: #18181b; }
.d6-ft .ft-help > span { margin-top: 6px; font-size: 12px; color: #52525b; }
.d6-ft-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.d6-ft-btns .d6-btn { height: 32px; padding: 0 14px; font-size: 12px; }
.ft-copy.d6-ft-copy { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(94, 234, 212, .7); font-size: 11px; color: #3f3f46; }
.d6-ft-copy p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; line-height: 18px; }
.d6-ft-copy p b { color: #18181b; }
.d6-19 { display: inline-flex; border-radius: 999px; border: 1px solid #e11d48; background: #e11d48; padding: 2px 12px; font-size: 12px; font-style: normal; font-weight: 700; color: #fff; box-shadow: var(--sh-2xs); }
.d6-copy { flex: none; font-weight: 700; color: #042f2e; }
@media (min-width: 768px) { .ft-copy.d6-ft-copy { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; } .d6-ft-copy p { flex: 1 1 auto; min-width: 0; } }
@media (max-width: 767.98px) { .ft { padding: 20px; } }

/* ---------- 8. 홈 (.d6-home) ---------- */
.d6-home { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 767.98px) { .d6-home { gap: 16px; } }
.d6-empty { padding: 32px 0; border: 1px dashed #5eead4; border-radius: 16px; background: rgba(240, 253, 250, .4); text-align: center; font-size: 14px; font-weight: 700; color: rgba(19, 78, 74, .7); }

/* 1. 공지 · 실시간 당첨 */
.d6-bar { display: grid; gap: 8px; }
@media (min-width: 1024px) { .d6-bar { grid-template-columns: 1fr 1fr; } }
.d6-notice, .d6-wins { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 16px; border-radius: 16px; border: 1px solid #99f6e4; background: #fff; box-shadow: var(--sh-2xs); }
.d6-wins { background: #e6f7f4; }
.d6-notice > em, .d6-wins > em { flex: none; border-radius: 8px; padding: 2px 8px; font-size: 11px; font-style: normal; font-weight: 700; }
.d6-notice > em { background: #0d9488; color: #fff; }
.d6-wins > em { background: linear-gradient(90deg, #fbbf24, #fb923c); color: #18181b; }
.d6-notice p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: #27272a; }
.d6-notice a { flex: none; margin-left: auto; font-size: 11px; font-weight: 700; color: #0f766e; }
.d6-notice a:hover { text-decoration: underline; color: #0f766e; }
.d6-wins ul { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
.d6-wins li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.d6-wins li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #042f2e; }
.d6-wins li i { font-style: normal; color: #0f766e; }
.d6-wins li > em { flex: none; border-radius: 6px; background: #fff; padding: 2px 8px; font-style: normal; font-weight: 700; color: #e11d48; font-variant-numeric: tabular-nums; box-shadow: var(--sh-2xs); }
.d6-wins-empty { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: #134e4a; }
@media (max-width: 767.98px) { .d6-notice, .d6-wins { padding: 8px 14px; } .d6-notice > em, .d6-wins > em { font-size: 10px; } }

/* 2. 숫자 칩 · 최근 7일 최고 당첨 */
.d6-stats { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--bd); background: #fff; box-shadow: var(--sh-xs); }
@media (min-width: 1280px) { .d6-stats { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.d6-bar > * { min-width: 0; }
.d6-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .d6-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d6-chip4 { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 12px; border-radius: 12px; border: 1px solid #ccfbf1; background: var(--mint-2); }
.d6-chip4 > i { flex: none; width: 10px; height: 10px; border-radius: 999px; }
.d6-chip4 > i.is-rose { background: #f43f5e; }
.d6-chip4 > i.is-teal { background: #14b8a6; }
.d6-chip4 > i.is-emerald { background: #10b981; }
.d6-chip4 > i.is-amber { background: #f59e0b; }
.d6-chip4 span { display: flex; flex-direction: column; min-width: 0; }
.d6-chip4 small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 14px; font-weight: 700; color: #115e59; }
.d6-chip4 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 700; color: #18181b; font-variant-numeric: tabular-nums; }
.d6-jack { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; border: 2px solid #fbbf24; background: linear-gradient(90deg, #09090b, #042f2e, #18181b); color: #fff; box-shadow: var(--sh-md); }
.d6-jack img { flex: none; width: 48px; height: 40px; object-fit: contain; border-radius: 8px; }
.d6-jack > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.d6-jack small { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .08em; color: #fcd34d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-jack b { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.025em; color: #fbbf24; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-jack .d6-btn { flex: none; }
@media (max-width: 767.98px) {
  .d6-stats { gap: 10px; padding: 10px; }
  .d6-chip4 { padding: 6px 10px; }
  .d6-chip4 > i { width: 8px; height: 8px; }
  .d6-chip4 b { font-size: 12px; line-height: 16px; }
  .d6-jack { padding: 8px 14px; }
  .d6-jack img { width: 40px; height: 32px; }
  .d6-jack small { font-size: 9px; }
  .d6-jack b { font-size: 16px; line-height: 22px; }
}
@media (min-width: 640px) and (max-width: 767.98px) { .d6-jack b { font-size: 20px; line-height: 28px; } }

/* 3. 큰 슬라이드 (모바일은 낮은 가로형) */
.d6-hero { overflow: hidden; border-radius: 24px; border: 1px solid #5eead4; background: #fff; box-shadow: var(--sh-lg); }
.d6-hero-stage { position: relative; }
.d6-slide { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 24px; padding: 28px 40px; background: var(--bg); color: #fff; }
.d6-slide[hidden] { display: none; }
.d6-slide::before { content: ""; position: absolute; right: -48px; top: -48px; width: 256px; height: 256px; border-radius: 999px; background: rgba(252, 211, 77, .2); filter: blur(64px); pointer-events: none; }
.d6-slide > * { position: relative; z-index: 1; min-width: 0; }
.d6-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.d6-badge i { width: 8px; height: 8px; border-radius: 999px; background: #fbbf24; }
.d6-slide-t { margin-top: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24px; line-height: 32px; font-weight: 700; color: #f0fdfa; }
.d6-slide-hi { margin-top: 4px; font-size: 36px; line-height: 1.15; font-weight: 700; letter-spacing: -.025em; color: #fcd34d; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .1)); }
.d6-slide-d { max-width: 576px; margin-top: 8px; font-size: 14px; line-height: 22px; font-weight: 500; color: rgba(240, 253, 250, .95); }
.d6-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 576px; margin-top: 14px; }
.d6-perks span { min-width: 0; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.d6-perks small { display: block; font-size: 10px; font-weight: 500; color: #99f6e4; }
.d6-perks b { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; color: #fcd34d; }
.d6-slide-b { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.d6-btn.is-lg { height: 44px; padding: 0 24px; border-radius: 12px; font-size: 14px; }
.d6-btn.is-glass.is-lg { padding: 0 20px; }
.d6-slide-art { display: flex; align-items: center; justify-content: center; }
.d6-slide-art > span { overflow: hidden; padding: 8px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.d6-slide-art img { display: block; width: 340px; max-width: 100%; height: 208px; object-fit: cover; border-radius: 12px; }
.d6-slide-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 12px; border-radius: 12px; background: rgba(0, 0, 0, .55); font-size: 12px; }
.d6-slide-cap b { min-width: 0; color: #99f6e4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-slide-cap em { border-radius: 6px; background: #fbbf24; padding: 2px 8px; font-size: 11px; font-style: normal; font-weight: 700; color: #18181b; flex: none; white-space: nowrap; }
.d6-slide.is-pic { display: block; padding: 0; background: #0f766e; }
.d6-slide.is-pic::before { content: none; }
.d6-pic { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.d6-pic img { display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover; }
.d6-hero-arr { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.d6-hero-arr:hover { background: rgba(0, 0, 0, .55); }
.d6-hero-arr.is-prev { left: 10px; }
.d6-hero-arr.is-next { right: 10px; }
.d6-hero-tabs { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); border-top: 1px solid #99f6e4; background: #e6f7f4; }
.d6-hero-tabs button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; padding: 12px 16px; border: 0; border-right: 1px solid rgba(153, 246, 228, .7); background: none; color: #52525b; font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.d6-hero-tabs button:last-child { border-right: 0; }
.d6-hero-tabs button:hover { background: rgba(255, 255, 255, .6); }
.d6-hero-tabs button[aria-pressed="true"] { background: #fff; color: #134e4a; font-weight: 700; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05); }
.d6-hero-tabs i { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(153, 246, 228, .7); color: #134e4a; font-size: 11px; font-style: normal; font-weight: 700; }
.d6-hero-tabs button[aria-pressed="true"] i { background: #0d9488; color: #fff; }
.d6-hero-tabs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.d6-hero-tabs .is-s { display: none; }
@media (max-width: 1023px) {
  .d6-slide { grid-template-columns: 1.35fr 1fr; gap: 16px; padding: 16px 20px; }
  .d6-slide-t { margin-top: 4px; font-size: 14px; line-height: 20px; }
  .d6-slide-hi { margin-top: 2px; font-size: 18px; line-height: 1.25; }
}
@media (max-width: 767.98px) {
  .d6-hero { border-radius: 16px; box-shadow: var(--sh-md); }
  .d6-slide::before { width: 160px; height: 160px; }
  .d6-badge { padding: 2px 8px; font-size: 9px; line-height: 14px; }
  .d6-badge i { width: 6px; height: 6px; }
  .d6-slide-d, .d6-perks, .d6-slide-cap { display: none; }
  .d6-slide-b { margin-top: 8px; gap: 8px; }
  .d6-btn.is-lg { height: 28px; padding: 0 12px; border-radius: 8px; font-size: 11px; }
  .d6-slide-art { justify-content: flex-end; }
  .d6-slide-art > span { padding: 4px; border-width: 1px; border-radius: 12px; }
  .d6-slide-art img { width: 160px; height: 112px; border-radius: 8px; }
  .d6-hero-arr { width: 24px; height: 24px; font-size: 12px; }
  .d6-hero-arr.is-prev { left: 6px; }
  .d6-hero-arr.is-next { right: 6px; }
  .d6-hero-tabs button { justify-content: center; gap: 6px; padding: 8px 6px; text-align: center; }
  .d6-hero-tabs .is-s { display: inline; font-size: 10px; }
  .d6-hero-tabs .is-l { display: none; }
}
@media (max-width: 639.98px) {
  .d6-slide { gap: 10px; padding: 12px 14px; }
  .d6-slide-t { font-size: 12px; line-height: 16px; }
  .d6-slide-hi { font-size: 14px; }
  .d6-btn.is-glass.is-lg { display: none; }
  .d6-slide-art img { width: 112px; height: 80px; }
  .d6-hero-tabs i { display: none; }
}

/* 4 ~ 8. 섹션 카드 · 게임 카드 · 게임 제공사 */
.d6-sec { overflow: hidden; border-radius: 16px; border: 1px solid var(--bd); background: #fff; box-shadow: var(--sh-sm); }
.d6-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 20px; border-bottom: 1px solid #ccfbf1; background: linear-gradient(90deg, rgba(230, 247, 244, .9), rgba(240, 253, 250, .5), #fff); }
.d6-sh-t { flex: 1 1 auto; min-width: 0; }
.d6-sh-t h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; line-height: 26px; font-weight: 700; color: #18181b; }
.d6-sh-t p { font-size: 11px; line-height: 16px; font-weight: 500; color: #115e59; }
.d6-meta { border-radius: 999px; border: 1px solid #5eead4; background: #0d9488; padding: 2px 10px; font-size: 11px; line-height: 16px; font-style: normal; font-weight: 700; color: #fff; box-shadow: var(--sh-2xs); }
.d6-meta.is-gold { border-color: #fbbf24; background: #fbbf24; color: #18181b; box-shadow: none; }
.d6-sh-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.d6-filters { display: none; align-items: center; gap: 4px; margin-right: 2px; padding: 4px; border-radius: 12px; border: 1px solid var(--bd-soft); background: #fff; }
.d6-filters button { padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: #52525b; font: inherit; font-size: 11px; line-height: 16px; font-weight: 700; cursor: pointer; transition: background .15s; }
.d6-filters button:hover { background: #f0fdfa; color: #134e4a; }
.d6-filters button[aria-pressed="true"] { background: #0d9488; color: #fff; box-shadow: var(--sh-2xs); }
@media (min-width: 1280px) { .d6-filters { display: flex; } }
.d6-sb { padding: 20px; }
.d6-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .d6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .d6-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .d6-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .d6-sh { padding: 14px 16px; } .d6-sh-t h3 { font-size: 16px; line-height: 24px; } .d6-sb { padding: 16px; } }
.d6-gc { position: relative; display: block; overflow: hidden; border-radius: 16px; border: 1px solid var(--bd); background: #18181b; color: #fff; text-decoration: none; box-shadow: var(--sh-md); transition: transform .2s, border-color .2s, box-shadow .2s; }
.d6-gc:hover, .d6-gc:focus-visible { transform: translateY(-4px); border-color: #14b8a6; color: #fff; box-shadow: 0 20px 25px -5px rgba(15, 118, 110, .15), 0 8px 10px -6px rgba(15, 118, 110, .15); }
.d6-gc-cv { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #09090b; }
.d6-gc-cv img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.d6-gc:hover .d6-gc-cv img { transform: scale(1.05); }
.d6-gc-art { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; font-size: 34px; font-style: normal; font-weight: 700; color: rgba(255, 255, 255, .28); }
.d6-gc-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 8px; background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .3), transparent); }
.d6-gc-pv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 6px; border: 1px solid rgba(45, 212, 191, .3); background: rgba(0, 0, 0, .65); padding: 2px 8px; font-size: 10px; line-height: 14px; font-style: normal; font-weight: 700; letter-spacing: -.025em; color: #5eead4; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.d6-gc-tag { flex: none; display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 8px; font-size: 10px; line-height: 14px; font-style: normal; font-weight: 700; color: #fff; box-shadow: var(--sh-xs); }
.d6-gc-tag i { width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: d6Pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.d6-gc-tag.is-live { background: rgba(225, 29, 72, .9); }
.d6-gc-tag.is-hot { background: rgba(13, 148, 136, .9); }
.d6-gc-tag.is-top { background: linear-gradient(90deg, #fbbf24, #f97316); color: #18181b; }
@keyframes d6Pulse { 50% { opacity: .5; } }
.d6-gc-go { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 47, 46, .55); opacity: 0; transition: opacity .2s; pointer-events: none; }
.d6-gc-go b { border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #fb923c); padding: 8px 16px; font-size: 12px; font-weight: 700; color: #18181b; box-shadow: var(--sh-lg); }
.d6-gc:hover .d6-gc-go, .d6-gc:focus-visible .d6-gc-go { opacity: 1; }
.d6-gc-bot { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .85), transparent); }
.d6-gc-bot > b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.25; font-weight: 700; color: #fff; }
.d6-gc-bot small { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; font-size: 10px; line-height: 14px; font-weight: 500; color: rgba(153, 246, 228, .9); }
.d6-gc-bot small span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d6-gc-bot small em { flex: none; font-style: normal; font-weight: 700; color: #fcd34d; }
@media (max-width: 639.98px) { .d6-gc-bot > b { font-size: 12px; } }
.d6-pvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .d6-pvs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .d6-pvs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .d6-pvs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.d6-pv { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 14px; border-radius: 16px; border: 1px solid var(--bd-soft); background: var(--mint-2); color: #18181b; text-decoration: none; box-shadow: var(--sh-2xs); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.d6-pv:hover { transform: translateY(-2px); border-color: #14b8a6; background: #fff; color: #18181b; box-shadow: var(--sh-md); }
.d6-pv-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.d6-pv-h i { width: 8px; height: 8px; border-radius: 999px; background: #10b981; }
.d6-pv-h em { border-radius: 6px; background: #ccfbf1; padding: 2px 8px; font-size: 10px; line-height: 14px; font-style: normal; font-weight: 700; color: #134e4a; white-space: nowrap; }
.d6-pv b { margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: -.025em; color: #18181b; }
.d6-pv:hover b { color: #0f766e; }
.d6-pv small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; color: #71717a; }

@media (prefers-reduced-motion: reduce) {
  .d6-gc:hover, .d6-pv:hover, .d6-tg:hover { transform: none; }
  .d6-gc-tag i { animation: none; }
}

/* ---------- 7. 카지노 · 슬롯 · 게임사 화면 — 시안 GameLobbyPage 그대로 (메인시안-13) ----------
   hook(data-tab · data-panel · data-game-search · .ws-game · .ws-sechead-meta)은 그대로, 모양만 */
.tabs-area { gap: 20px; }
/* 화면 머리 = 시안 PageTitle (3D 아이콘 lg + 제목 + 'demo6 공식 정품 라이선스 로비') */
.page-head { padding: 14px 20px; border-color: rgba(153, 246, 228, .8); }
.page-title { gap: 12px; }
.d6-ph-t { display: flex; flex-direction: column; min-width: 0; }
.d6-ph-t h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 20px; line-height: 28px; }
.d6-ph-sub { margin: 0; font-size: 11px; line-height: 16px; font-weight: 500; color: #0f766e; }
.page-title { flex-wrap: wrap; row-gap: 8px; }
.page-title > .pill { flex: none; height: 24px; padding: 0 10px; font-size: 11px; white-space: nowrap; }
@media (max-width: 639.98px) { .d6-ph-t h1 { font-size: 18px; line-height: 26px; } }
/* 검색 = 시안 Input (h-10 · 둥근 12 · 테두리 teal-200) */
.page-head .search, .pv-search .search { width: 256px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #18181b; box-shadow: none; }
.page-head .search svg, .pv-search .search svg { color: #0d9488; }
.page-head .search input, .pv-search .search input { color: #18181b; font-size: 14px; font-weight: 500; }
.page-head .search input::placeholder, .pv-search .search input::placeholder { color: #a1a1aa; }
.page-head .search:focus-within, .pv-search .search:focus-within { outline: 0; border-color: #14b8a6; box-shadow: 0 0 0 2px #99f6e4; }
@media (max-width: 639.98px) { .page-head .search { width: 208px; } }
@media (max-width: 479.98px) { .page-head .search { width: 100%; } }

/* 탭 = 시안: 연민트 카드 안 [3D 아이콘 + 글자] 알약 한 줄 (넘치면 옆으로 밀기) */
.cat-bar { position: static; margin: 0; padding: 10px; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: rgba(230, 247, 244, .7); box-shadow: var(--sh-sm); }
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab { flex: none; flex-direction: row; gap: 8px; width: auto; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #27272a; font-size: 12px; line-height: 16px; font-weight: 700; box-shadow: none; transition: background .15s, border-color .15s; }
.cat-tab:hover { background: #f0fdfa; color: #27272a; }
.cat-tab.is-active, .cat-tab[aria-pressed="true"] { border-color: #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; box-shadow: var(--sh-xs); }
.cat-tab > span { max-width: none; overflow: visible; }
.cat-tab > span.cat-tab-m { display: none; }
@media (max-width: 1023px) {
  .cat-tab { height: 40px; font-size: 12px; line-height: 16px; gap: 8px; }
  .cat-tab > span.d6-i3 { display: inline-flex; }
  .cat-tab > span:not(.d6-i3):not(.cat-tab-m) { display: block; }
  .cat-tab > span.cat-tab-m { display: none; }
}

/* 게임 줄 = 시안 SectionCard (머리띠: 민트 그라데이션 · 3D 아이콘 · 제목 · 개수 알약 · 모두 보기) */
.main .sec { gap: 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .9); background: #fff; box-shadow: var(--sh-sm); }
.main .sec > .ws-sechead { padding: 14px 20px; border-bottom: 1px solid #ccfbf1; background: linear-gradient(90deg, rgba(230, 247, 244, .9), rgba(240, 253, 250, .5), #fff); }
.main .sec > :not(.ws-sechead) { margin: 20px 20px 0; }
.main .sec > :last-child { margin-bottom: 20px; }
.main .sec > :not(.ws-sechead) + :not(.ws-sechead) { margin-top: 14px; }
.ws-sechead-title { gap: 10px; }
.ws-sechead-title h3 { font-size: 18px; line-height: 28px; }
.ws-sechead-meta { border: 1px solid #5eead4; padding: 2px 10px; line-height: 16px; box-shadow: var(--sh-2xs); }
.ws-sechead-actions .ws-btn.d6-all { height: 28px; padding: 0 12px; border-radius: 12px; border: 1px solid #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(13, 148, 136, .2); }
.ws-sechead-actions .ws-btn.d6-all:hover { background: linear-gradient(90deg, #0f766e, #059669); color: #fff; }
@media (max-width: 767.98px) {
  .main .sec > .ws-sechead { padding: 14px 16px; }
  .main .sec > :not(.ws-sechead) { margin-inline: 16px; }
  .main .sec > :last-child { margin-bottom: 16px; }
  .ws-sechead-title h3 { font-size: 16px; line-height: 24px; }
}
.main .sec .empty { border-radius: 16px; border: 1px dashed #5eead4; background: rgba(240, 253, 250, .4); color: rgba(19, 78, 74, .7); font-weight: 700; }

/* 게임 칸 = 시안 2 · 3(640) · 4(768) · 6(1024)열 */
.game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 640px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .game-grid { gap: 12px; } .game-grid.is-cap9 > .ws-game:nth-child(n+9) { display: none; } }

/* 게임 카드 = 시안 GameCard (검정 · 위 LIVE 띠 · 마우스 올리면 금색 '게임 시작 ▶' · 아래 이름 · 게임사) */
.ws-game { aspect-ratio: 3 / 4; border-color: rgba(153, 246, 228, .9); }
.ws-game-art { opacity: .85; }
.ws-game::before { inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .85) 22%, transparent 48%), linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .3) 12%, transparent 22%); }
.ws-game::after { background: rgba(4, 47, 46, .55); }
.ws-game-play { top: 50%; width: auto; height: auto; padding: 8px 16px; border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #fb923c); color: #18181b; box-shadow: var(--sh-lg); }
.ws-game-play svg { display: none; }
.ws-game-play::before { content: "게임 시작 ▶"; font-size: 12px; line-height: 16px; font-weight: 700; white-space: nowrap; }
.ws-game-badge { top: 8px; left: 8px; }
.ws-game-badge .ws-badge { height: 18px; padding: 0 8px; gap: 4px; border: 0; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0; box-shadow: var(--sh-xs); }
.ws-game-badge .ws-badge-live { background: rgba(225, 29, 72, .9); color: #fff; }
.ws-game-badge .ws-badge-hot, .ws-game-badge .ws-badge-new { background: rgba(13, 148, 136, .9); color: #fff; }
.ws-game-badge .ws-badge-dot { width: 6px; height: 6px; background: #fff; animation: d6Pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.ws-game-info { align-items: stretch; gap: 4px; padding: 0 10px 10px; text-align: left; }
.ws-game-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.25; color: #fff; }
.ws-game-line, .ws-game-line-em { display: inline; font-size: 13px; }
.ws-game-line + .ws-game-line::before { content: " "; }
.ws-game-provider { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0; color: rgba(153, 246, 228, .9); }
.ws-game-fav { top: 6px; right: 6px; background: rgba(0, 0, 0, .55); }
@media (max-width: 639.98px) { .ws-game-line, .ws-game-line-em { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .ws-game:hover { transform: none; } .ws-game-badge .ws-badge-dot { animation: none; } }

/* 게임사별 로비 카드: 배치(PC 6 · 휴대폰 3 · 결정 로비6)는 그대로, 시안 카드 테두리 · 금색 입장 알약만 */
.lobbies { gap: 14px; }
.lobby { border-color: rgba(153, 246, 228, .9); background: #18181b; transition: transform .2s, border-color .2s, box-shadow .2s; }
.lobby:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(15, 118, 110, .15); }
.lobby-cap strong { color: #fff; }
.lobby-cap span { border-radius: 999px; background: linear-gradient(90deg, #fbbf24, #fb923c); color: #18181b; }

/* 게임사 칸 = 시안 (h-14 · 민트 바탕 · 3D ★ 아이콘 + 이름 · 2 · 3 · 5열) */
.provs-3, .provs-5, .provs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .provs-3, .provs-5, .provs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .provs-3, .provs-5, .provs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.prov { height: 56px; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid #99f6e4; background: #f2fbf9; color: #18181b; font-size: 12px; font-weight: 700; }
.prov:hover { border-color: #14b8a6; background: #fff; color: #18181b; }

/* 게임사 화면(provider.html): 머리 칸 · 종류 탭 · 다른 게임사도 같은 카드 모양 */
.pv-back { border-color: #99f6e4; background: #fff; color: #134e4a; font-weight: 700; box-shadow: var(--sh-2xs); }
.pv-back:hover { border-color: #2dd4bf; background: #f0fdfa; color: #134e4a; }
.pv-hero { border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: #fff; color: #18181b; box-shadow: var(--sh-2xs); }
.pv-logo { border: 1px solid #ccfbf1; background: #f2fbf9; }
.pv-meta h1 { font-size: 20px; line-height: 28px; font-weight: 700; color: #18181b; }
.pv-kind { border-color: #99f6e4; background: #f0fdfa; color: #134e4a; }
.pv-count { color: #0f766e; }
.pv-types { padding: 10px; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: rgba(230, 247, 244, .7); }
.pv-type { height: 40px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #27272a; font-size: 12px; }
.pv-type:hover { background: #f0fdfa; color: #27272a; }
.pv-type.is-active { border-color: #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; }

/* ---------- 8. 이벤트 · 이벤트 상세 · 스포츠북 · 마블 — 시안 Events · SportsBook · Marble 배치 (메인시안-13 ②) ----------
   hook(data-tab · data-panel · data-modal-open · data-mb-* · data-box-*)은 그대로, 서버가 붙인 d6- 칸 + 모양만 */
.d6-i3.is-md { width: 32px; height: 32px; border-radius: 12px; font-size: 14px; }
.d6-i3.is-xl { width: 48px; height: 48px; border-radius: 16px; font-size: 20px; }
/* 시안 Btn outline sm = '‹ 이벤트 목록' */
.back-link { height: 32px; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #042f2e; font-size: 12px; font-weight: 700; box-shadow: var(--sh-2xs); }
.back-link:hover { border-color: #2dd4bf; background: #f0fdfa; color: #042f2e; }

/* 이벤트 목록: 큰 민트 배너 (글 + 금색 '자세히 보기 ›' · 오른쪽 그림) */
.ev-feat { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; height: auto; padding: 32px; border-radius: 24px; border: 1px solid #5eead4; background: linear-gradient(90deg, #115e59, #0d9488, #10b981) !important; color: #fff; }
.ev-feat-copy { gap: 6px; }
.ev-feat-tags { color: #f0fdfa; }
.ev-feat-badge { height: auto; padding: 2px 10px; border: 1px solid #f59e0b; background: linear-gradient(90deg, #fbbf24, #fb923c); color: #18181b; font-size: 11px; line-height: 16px; font-weight: 700; }
.ev-feat strong { font-size: 30px; line-height: 36px; font-weight: 700; color: #fff; }
.ev-feat-desc { font-size: 14px; line-height: 20px; color: #f0fdfa; }
.ev-feat .ev-more { display: inline-flex; align-items: center; height: 44px; margin-top: 10px; padding: 0 20px; border-radius: 12px; border: 1px solid #f59e0b; background: linear-gradient(90deg, #fbbf24, #fbbf24, #fb923c); color: #09090b; font-size: 14px; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(245, 158, 11, .25); }
.ev-feat img { justify-self: center; width: auto; max-width: 100%; height: 176px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); object-fit: contain; box-shadow: var(--sh-lg); }
@media (max-width: 767.98px) {
  .ev-feat { grid-template-columns: 1fr; padding: 24px; }
  .ev-feat strong { font-size: 24px; line-height: 32px; }
  .ev-feat-desc { font-size: 12px; line-height: 16px; -webkit-line-clamp: unset; display: block; }
  .ev-feat img { width: auto; height: 160px; }
}

/* '프로모션 둘러보기' 카드 = 시안 Card + Tabs */
.d6-promo { padding: 20px; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: #fff; box-shadow: var(--sh-sm); }
.d6-promo-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.d6-promo-h h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; color: #18181b; }
.d6-promo .ev-filters { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; overflow-x: auto; padding: 4px; border-radius: 12px; border: 1px solid #99f6e4; background: #e6f7f4; scrollbar-width: none; }
.d6-promo .ev-filters::-webkit-scrollbar { display: none; }
.d6-promo .ev-filter { flex: 1 0 auto; height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: rgba(19, 78, 74, .75); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: none; }
.d6-promo .ev-filter:hover { color: #042f2e; }
.d6-promo .ev-filter.is-active { background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; box-shadow: var(--sh-xs); }
.d6-promo .ev-filter .num { margin-left: 4px; background: none; color: inherit; opacity: .8; }
/* 이벤트 칸 = 시안 2 · 6(1024)열 · 그림 4:3 + 제목 + '기간 ›' */
.d6-promo .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1024px) { .d6-promo .ev-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.d6-promo .ev-card { flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border-radius: 16px; border: 1px solid #99f6e4; background: #f2fbf9; box-shadow: var(--sh-2xs); transition: transform .2s, border-color .2s, background .2s; }
.d6-promo .ev-card:hover { transform: translateY(-2px); border-color: #14b8a6; background: #fff; box-shadow: var(--sh-2xs); }
.d6-promo .ev-thumb { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 12px; }
.d6-promo .ev-live, .d6-promo .ev-cat, .d6-promo .ev-desc, .d6-promo .ev-foot { display: none; }
.d6-promo .ev-body { padding: 10px 0 0; gap: 2px; }
.d6-promo .ev-body strong { font-size: 14px; line-height: 20px; font-weight: 700; color: #18181b; white-space: normal; }
.d6-ev-sub { font-size: 11px; line-height: 16px; font-weight: 500; color: #0f766e; }
/* 룰렛 = 금 테두리 진한 틸 카드 + 시안 룰렛 그림 · 마블 = 연금색 카드 */
.d6-promo .ev-card.d6-ev-gold { border: 2px solid #fbbf24; background: linear-gradient(to bottom, #134e4a, #042f2e); box-shadow: var(--sh-md); }
.d6-promo .ev-card.d6-ev-gold:hover { border-color: #fbbf24; background: linear-gradient(to bottom, #134e4a, #042f2e); }
.d6-ev-gold .ev-thumb { background: #042f2e !important; }
.d6-ev-gold .ev-thumb img { object-fit: cover; }
.d6-promo .d6-ev-gold .ev-body strong { color: #fcd34d; }
.d6-ev-gold .d6-ev-sub { font-weight: 700; color: #ccfbf1; }
.d6-promo .ev-card.d6-ev-amber { border-color: #fbbf24; background: rgba(255, 251, 235, .7); }
.d6-promo .ev-card.d6-ev-amber:hover { border-color: #f59e0b; background: #fffbeb; }
.d6-promo .d6-ev-amber .ev-body strong { color: #042f2e; }
.d6-ev-amber .d6-ev-sub { font-weight: 700; color: #b45309; }

/* 이벤트 상세 = 시안 (가운데 768 · 카드: 배지 · 제목 · 기간 → 민트 그라데이션 칸 그림 + 금색 제목) */
.detail { max-width: 768px; margin-inline: auto; }
.d6-evd { gap: 0; padding: 24px; }
.d6-evd .ev-feat-badge { height: auto; padding: 2px 10px; border: 1px solid #0f766e; background: #0d9488; color: #fff; font-size: 11px; line-height: 16px; font-weight: 700; }
.d6-evd .ev-on { height: auto; padding: 2px 10px; border: 1px solid #99f6e4; background: #f0fdfa; color: #134e4a; }
.d6-evd h1 { margin: 8px 0 0; font-size: 20px; line-height: 28px; font-weight: 700; color: #18181b; }
.d6-evd .t-sub { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; font-weight: 700; color: #0f766e; }
.d6-evd-vis { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20px; padding: 24px; border-radius: 16px; background: linear-gradient(90deg, #115e59, #0d9488, #10b981); color: #fff; text-align: center; box-shadow: var(--sh-md); }
.d6-evd-vis img { height: 160px; max-width: 100%; border-radius: 12px; object-fit: contain; }
.d6-evd-vis b { margin-top: 12px; font-size: 24px; line-height: 32px; font-weight: 700; color: #fcd34d; }
@media (max-width: 639.98px) { .d6-evd { padding: 20px; } .d6-evd-vis b { font-size: 20px; line-height: 28px; } }

/* 스포츠북 = 시안 진한 틸 카드 2장 (1 · 2(768)열) */
.sb-grid { grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-card { justify-content: space-between; padding: 24px; border-radius: 24px; border: 1px solid #5eead4; background: linear-gradient(135deg, #134e4a, #115e59, #047857); color: #fff; box-shadow: var(--sh-lg); }
.d6-sb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d6-sb-pill { padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .15); color: #ccfbf1; font-size: 12px; line-height: 16px; font-weight: 700; }
.d6-sb-name { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.d6-sb-name strong { display: block; font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; }
.d6-sb-name em { display: block; font-style: normal; font-size: 12px; line-height: 16px; font-weight: 700; color: #fcd34d; }
.d6-sb-desc { margin: 12px 0 0; font-size: 12px; line-height: 1.625; color: #f0fdfa; }
.sb-card > .ws-btn { margin-top: 24px; height: 44px; border-radius: 12px; font-size: 14px; }

/* 마블 = 시안 (보드 카드 + 오른쪽 340 보상 카드) */
.mb { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1023px) { .mb { grid-template-columns: 1fr; } }
.mb-board-card { padding: 16px; }
.mb-stats { gap: 12px; margin-bottom: 16px; }
.mb-stat { padding: 12px; border-radius: 12px; border: 1px solid #99f6e4; background: #e6f7f4; }
.mb-stat > img { display: none; }
.mb-stat > span:nth-child(2) { font-size: 11px; font-weight: 700; color: #115e59; }
.mb-stat b { font-size: 18px; line-height: 28px; font-weight: 700; color: #18181b; }
.mb-stat small { color: #18181b; font-weight: 700; }
.mb-board { gap: 6px; }
.mb-cell { border: 1px solid #99f6e4; background: rgba(240, 253, 250, .6) !important; color: #134e4a; }
.mb-cell b { font-weight: 700; color: #134e4a; }
.mb-cell > span:not(.mb-me) { color: #0f766e; }
.mb-cell.is-here { border-color: #0f766e; background: #0d9488 !important; box-shadow: var(--sh-md); }
.mb-cell.is-here b, .mb-cell.is-here > span:not(.mb-me) { color: #fff; }
.mb-me { background: #fbbf24; color: #18181b; }
.mb-center { border: 1px solid #5eead4; background: linear-gradient(135deg, #e6f7f4, #d1fae5); }
.mb-center strong { font-size: 16px; line-height: 24px; font-weight: 700; color: #042f2e; }
.mb-center > span { font-size: 12px; font-weight: 500; color: #115e59; }
.mb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 320px); }
.mb-roll { height: 36px; padding: 0 16px; border: 1px solid #0f766e; border-radius: 12px; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 4px 6px -1px rgba(13, 148, 136, .2); }
.mb-roll:hover { background: linear-gradient(90deg, #0f766e, #059669); }
.mb-log { height: 36px; padding: 0 16px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #042f2e; font-size: 14px; font-weight: 700; box-shadow: var(--sh-2xs); }
.mb-log:hover { border-color: #2dd4bf; background: #f0fdfa; }
.mb-roll, .mb-log { white-space: nowrap; }
.mb-stat > span:nth-child(2) > span { white-space: nowrap; }
.mb-stat .ws-reward-src { flex: none; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid #99f6e4; background: #fff; color: #0f766e; font-size: 10px; line-height: 18px; font-weight: 700; }
@media (max-width: 1023px) { .mb-roll, .mb-log { height: 36px; padding: 0 10px; font-size: 13px; } }
@media (max-width: 479.98px) { .mb-stat { gap: 6px; padding: 10px; } .mb-actions { grid-template-columns: auto auto; justify-content: center; gap: 6px; } .mb-roll, .mb-log { padding: 0 6px; font-size: 12px; } }
/* 보상함 = 시안 줄 목록 (3D 아이콘 · 이름 · 보유 · '사용하기') */
.mb-box { gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid #ccfbf1; border-radius: 0; background: none; }
.mb-box:last-of-type { border-bottom: 0; }
.mb-box-text { font-size: 11px; font-weight: 500; color: #0f766e; }
.mb-box-text > b { font-size: 14px; font-weight: 700; color: #18181b; }
.mb-use { height: 32px; padding: 0 14px; border-radius: 12px; border: 1px solid #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; font-size: 12px; font-weight: 700; }
.mb-use:disabled { border-color: #ccfbf1; background: #f0fdfa; color: #5eead4; }
.mb-v { border-color: #99f6e4; background: #f2fbf9; }
.mb-take { border-color: #99f6e4; background: #fff; color: #042f2e; }

/* ---------- 9. 마이페이지 · 알림 · 이용규정 · 도메인 — 시안 MyPage · Notifications · Terms · Domain 배치 (메인시안-13 ③) ----------
   값 · 버튼 · data-modal-open · data-history · data-mp-* · data-nt-* · data-accordion 은 그대로, 칸 자리 · 모양만 */
/* 마이페이지 머리 = 시안 흰 프로필 카드 (3D 아이콘 xl · 이름 + 등급 배지 · '보유 캐쉬 N 원' · 오른쪽 작은 버튼) */
.page-head:has(+ .mp-top) { display: none; }
.mp-top { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: #fff; color: #18181b; box-shadow: var(--sh-sm); }
@media (min-width: 1024px) { .mp-top { flex-direction: row; align-items: center; } }
.mp-me { gap: 16px; }
.mp-me > div { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 6px; row-gap: 2px; }
.mp-name { grid-column: 1 / -1; gap: 8px; }
.mp-name strong { font-size: 16px; line-height: 24px; font-weight: 700; color: #18181b; }
.mp-name .ws-badge { height: auto; padding: 2px 10px; border-radius: 999px; border: 1px solid #0f766e; background: #0d9488; color: #fff; font-size: 11px; line-height: 16px; font-weight: 700; }
.mp-me .t-sub { font-size: 14px; font-weight: 500; color: #52525b; }
.mp-cash { font-size: 14px; line-height: 20px; font-weight: 700; color: #0f766e; }
.mp-cash small { margin-left: 3px; font-size: 14px; font-weight: 500; color: #52525b; }
.mp-pay { display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
@media (min-width: 1024px) { .mp-pay { margin-left: auto; } }
.mp-pay .ws-btn { width: auto; height: 32px; padding: 0 14px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.mp-pay .ws-btn .ws-icon { display: none; }
.mp-top .mp-pay .ws-btn-primary { border: 1px solid #f59e0b; background: linear-gradient(90deg, #fbbf24, #fbbf24, #fb923c); color: #09090b; }
.mp-top .mp-pay [data-modal-open="convert"] { border-color: #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; }
.mp-top .mp-pay .ws-btn-outline[data-modal-open="withdraw"] { border-color: #99f6e4; background: #fff; color: #042f2e; }
/* 첫 줄 = 시안 (왼쪽 2칸: 포인트 · 콤프 · 추천인 + 혜택 + 버튼 / 오른쪽: 룰렛 그림 카드) */
.d6-mp-a { display: grid; gap: 20px; }
@media (min-width: 1280px) { .d6-mp-a { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d6-mp-main { grid-column: span 2; } }
.d6-mp-main { padding: 16px; }
.d6-mp-main .mp-stats { gap: 12px; }
.mp-stats .ws-stat { padding: 12px; border-radius: 12px; border: 1px solid #99f6e4; background: #f2fbf9; box-shadow: none; }
.mp-stats .ws-stat-label { gap: 6px; font-size: 11px; font-weight: 700; color: #115e59; }
.mp-stats .ws-stat-value { margin-top: 6px; }
.mp-stats .ws-stat-value b { font-size: 18px; line-height: 28px; font-weight: 700; color: #18181b; }
.mp-stats .ws-stat-value small { color: #18181b; font-weight: 700; }
.d6-mp-main .card-head { margin-top: 4px; }
.mp-rewards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .mp-rewards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mp-rewards .ws-reward { gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; }
.mp-rewards .ws-reward > img.ws-icon { display: none; }
.mp-rewards .ws-reward-text { flex: 1 1 auto; min-width: 0; }
.ws-reward-label { font-size: 12px; font-weight: 700; color: #27272a; }
.ws-reward-count { font-size: 12px; font-weight: 700; color: #0f766e; }
.ws-reward-count b { color: #0f766e; }
.ws-reward-src { border-radius: 999px; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; font-size: 10px; font-weight: 700; }
.mp-links { gap: 8px; }
.mp-links .ws-btn { height: 32px; padding: 0 14px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.d6-mp-a > .d6-mp-promo { gap: 0; padding: 0; overflow: hidden; }
.d6-mp-promo > img { display: block; width: 100%; height: 144px; object-fit: cover; background: #042f2e; }
.d6-mp-promo-t { display: flex; flex-direction: column; align-items: flex-start; padding: 16px; }
.d6-mp-promo-t span { font-size: 11px; line-height: 16px; font-weight: 700; color: #0f766e; }
.d6-mp-promo-t b { font-size: 14px; line-height: 20px; font-weight: 700; color: #18181b; }
.d6-mp-promo-t .ws-btn { margin-top: 12px; height: 32px; padding: 0 14px; border-radius: 12px; font-size: 12px; }
/* 둘째 · 셋째 줄 카드 (출석 · 바로가기 / 롤링 · 지갑) */
.mp-2 > .card, .d6-mp-a > .card { padding: 16px; }
.mp-2 .card-title, .d6-mp-a .card-title { font-size: 14px; line-height: 20px; font-weight: 700; color: #18181b; }
.cal { gap: 4px; }
.cal-w { padding: 4px 0; font-size: 10px; font-weight: 700; color: #115e59; }
.cal-d { height: auto; aspect-ratio: 1; border-radius: 8px; border: 1px solid #ccfbf1; background: #fff; color: #71717a; font-size: 11px; font-weight: 500; }
.cal-d.is-done { border-color: #14b8a6; background: #e6f7f4; color: #042f2e; font-weight: 700; }
.cal-d.is-today { border-color: #0d9488; color: #042f2e; font-weight: 700; box-shadow: inset 0 0 0 1px #0d9488; }
.cal-d.is-out { border-color: transparent; background: transparent; }
.mp-quicks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-quick { flex-direction: row; height: 32px; gap: 6px; border-radius: 12px; border: 1px solid #99f6e4; background: #fff; color: #042f2e; font-size: 12px; font-weight: 700; box-shadow: var(--sh-2xs); }
.mp-quick:hover { border-color: #2dd4bf; background: #f0fdfa; color: #042f2e; }
.mp-quick .ws-icon { display: none; }
.mp-quick[data-modal-open="inquiry"] { border-color: #0f766e; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; }
.roll { border-radius: 12px; border: 1px solid #99f6e4; background: #f2fbf9; }
@media (max-width: 1023px) { .d6-mp-c, .mp-2 { grid-template-columns: 1fr; } }
.d6-mp-slot { display: none !important; }

/* 알림 = 시안 (가운데 768 · 민트 탭 · 카드마다 3D 종 아이콘) */
.nt { max-width: 768px; margin-inline: auto; }
.nt-tabs { padding: 4px; border-radius: 12px; border: 1px solid #99f6e4; background: #e6f7f4; }
.nt-tabs .seg-btn { height: 32px; border-radius: 8px; background: transparent; color: rgba(19, 78, 74, .75); font-size: 12px; font-weight: 700; }
.nt-tabs .seg-btn.is-active { background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; box-shadow: var(--sh-xs); }
.nt-only { border-color: #99f6e4; background: #fff; color: #134e4a; }
.nt-item, .nt-item.is-read { border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: #fff; box-shadow: var(--sh-sm); }
.nt-item:not(.is-read) { border-color: #5eead4; background: #f0fdfa; }
.nt-item.is-open { border-color: #14b8a6; background: #fff; }
.nt-head { align-items: center; padding: 16px; color: #18181b; }
.nt-ic { position: relative; width: 32px; height: 32px; border-radius: 12px; background: linear-gradient(135deg, #2dd4bf, #10b981, #0f766e); box-shadow: inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(0, 0, 0, .32), 0 4px 10px -2px rgba(13, 148, 136, .3); }
.nt-ic img { width: 20px; height: 20px; }
.nt-line .tag { padding: 0; border: 0; background: none; color: #115e59; font-size: 12px; font-weight: 700; }
.nt-line b { font-weight: 700; color: #27272a; }
.nt-line .bl-time { margin-left: auto; font-size: 12px; color: #a1a1aa; font-variant-numeric: tabular-nums; }
.nt-prev { color: #52525b; }
.nt-body { border-color: #ccfbf1; background: #f2fbf9; }
.nt-del, .nt-fold { border-color: #99f6e4; background: #fff; color: #042f2e; }

/* 이용규정 = 시안 (연민트 카드 안 알약 탭 한 줄 · 흰 접이 칸 ▾) */
.tm-groups { display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 16px; border: 1px solid rgba(153, 246, 228, .8); background: rgba(230, 247, 244, .7); box-shadow: var(--sh-sm); scrollbar-width: none; }
.tm-groups::-webkit-scrollbar { display: none; }
.tm-group { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 12px; background: #fff; color: #3f3f46; font-size: 12px; font-weight: 700; white-space: nowrap; }
.tm-group:hover { background: #f0fdfa; }
.tm-group.is-active { border: 0; background: linear-gradient(90deg, #0d9488, #10b981); color: #fff; }
.tm-head h2 { font-size: 16px; font-weight: 700; color: #18181b; }
.tm-panel .accs { gap: 12px; }
.tm-acc, .tm-acc:has(.acc-btn[aria-expanded="true"]) { border-radius: 16px; border: 1px solid #99f6e4; background: #fff; }
.tm-acc .acc-btn { padding: 14px 16px; font-size: 14px; font-weight: 700; color: #18181b; }
.tm-acc .acc-sign::before { content: "▾"; display: inline-block; font-size: 14px; color: #0d9488; transition: transform .2s; }
.tm-acc .acc-btn[aria-expanded="true"] .acc-sign::before { content: "▾"; transform: rotate(180deg); }
.tm-acc .acc-panel { padding: 12px 16px; border-top: 1px solid #f0fdfa; }
.tm-text { font-size: 14px; line-height: 1.625; color: #52525b; }

/* 도메인 = 시안 가운데 카드 (3D 아이콘 · 제목 · 설명 · 주소 칸 1 · 2(640)열) */
.dm { width: 100%; max-width: 768px; margin-inline: auto; padding: 24px; text-align: center; }
.dm-hero { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; background: none; }
.dm-hero h1 { margin-top: 16px; font-size: 18px; line-height: 28px; font-weight: 700; color: #18181b; }
.dm-hero p { margin-top: 4px; font-size: 14px; line-height: 20px; color: #52525b; }
.dm-list { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .dm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dm-row { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; border: 1px solid #99f6e4; background: rgba(230, 247, 244, .6); }
.dm-row .dm-ok { display: none; }
.dm-addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 14px; font-weight: 700; color: #042f2e; }
.dm-row .ws-btn { flex: none; height: 28px; padding: 0 12px; border-radius: 12px; font-size: 11px; }
.dm .tg-mini { margin-top: 16px; border-radius: 12px; border: 1px solid #99f6e4; background: #f2fbf9; text-align: left; color: #52525b; }
.dm .tg-mini b { color: #18181b; }
.cal-legend .lg-done { border: 0; background: #e6f7f4; box-shadow: inset 0 0 0 1px #14b8a6; }
.cal-legend .lg-today { border: 0; background: #fff; box-shadow: inset 0 0 0 2px #0d9488; }

/* ---------- 10. 팝업 — 시안 Modal · Stepper · 표 · 룰렛 (메인시안-13 ④) ----------
   입력 · 버튼 · data-* 는 그대로, 머리 3D 아이콘(서버) + 모양만 */
.modal-head { gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ccfbf1; }
.modal-head h2 { font-size: 16px; line-height: 24px; font-weight: 700; color: #18181b; }
.modal-x { width: 32px; height: 32px; }
/* 단계 표시 = 시안 Stepper (연민트 칸 안 동그라미 번호 + 이음선) */
.stepper { gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid #ccfbf1; background: rgba(240, 253, 250, .7); }
.stepper li { gap: 8px; padding: 0; border: 0; font-size: 12px; font-weight: 500; color: #a1a1aa; white-space: nowrap; }
.stepper li span { width: 24px; height: 24px; border: 1px solid #99f6e4; background: #fff; color: #a1a1aa; font-size: 11px; font-weight: 700; }
.stepper li.is-done { border-bottom: 0; }
.stepper li.is-done span { border-color: #0d9488; background: #0d9488; color: #fff; }
.stepper li.is-current { color: #042f2e; font-weight: 700; }
.stepper li:not(:last-child)::after { content: ""; flex: 1 1 auto; height: 1px; background: #99f6e4; }
/* 보너스 고르기 = 시안 (선택 칸 진한 틸 테두리 + 고리) */
.opt { border-color: #ccfbf1; background: #fff; }
.opt:hover { background: rgba(240, 253, 250, .3); }
.opt:has(input:checked) { border-color: #0d9488; background: rgba(240, 253, 250, .7); box-shadow: inset 0 0 0 1px #0d9488; }
.opt input { accent-color: #0d9488; }
.opt-text strong { font-weight: 700; color: #18181b; }
.opt-text span { font-size: 11px; font-weight: 500; color: #0f766e; }
/* 표 = 시안 (연민트 머리 · 얇은 줄) */
.modal .table-wrap { border-radius: 12px; border: 1px solid #ccfbf1; }
.modal .tbl th { background: rgba(240, 253, 250, .7); border-bottom-color: #ccfbf1; color: #134e4a; font-weight: 700; }
.modal .tbl td { border-bottom-color: #f0fdfa; }
/* 자주 묻는 질문 · 1:1 문의 = 시안 */
.faq .acc { border-radius: 12px; border: 1px solid #ccfbf1; background: #fff; }
.faq .acc-cat { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: #f0fdfa; color: #0f766e; font-size: 10px; font-weight: 700; }
.faq .acc-sign::before { color: #0d9488; font-weight: 700; }
.faq .acc-panel { padding-top: 12px; border-top: 1px solid #f0fdfa; background: rgba(240, 253, 250, .3); }
.quick-title { height: 36px; border-radius: 8px; border: 1px solid #99f6e4; background: #fff; color: #134e4a; font-size: 12px; font-weight: 700; }
.quick-title:hover { background: #f0fdfa; }
.quick-title.is-active, .quick-title[aria-pressed="true"] { border-color: #0d9488; background: #0d9488; color: #fff; }

/* 룰렛 팝업 = 시안 Roulette3DShowcase (진한 틸 · 금 테두리 · 왼쪽 시안 룰렛 그림 · 가운데 릴 · 오른쪽 당첨표) */
.modal-box.is-wide:has(.rl) { max-width: 1024px; }
.rl { gap: 20px; padding: 16px; border-radius: 24px; border: 2px solid rgba(251, 191, 36, .9); background: linear-gradient(135deg, #042f2e, #0f766e, #064e3b); color: #fff; box-shadow: var(--sh-lg); }
@media (min-width: 1024px) { .rl { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 24px; } }
.rl-row { gap: 10px; }
.rl-row strong { white-space: nowrap; }
.d6-rl-pic { width: 100%; max-width: 410px; margin-inline: auto; aspect-ratio: 1; padding: 8px; border-radius: 24px; border: 2px solid rgba(252, 211, 77, .6); background: #064e3b; box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 2px 6px rgba(255, 255, 255, .35), 0 0 30px rgba(245, 158, 11, .25); }
.d6-rl-pic img { display: block; width: 100%; height: 100%; border-radius: 16px; object-fit: cover; }
@media (max-width: 1023px) { .rl { grid-template-columns: 1fr; } .d6-rl-pic { max-width: 240px; } }
.rl-machine { border-radius: 24px; border: 2px solid rgba(251, 191, 36, .5); background: linear-gradient(to bottom, rgba(4, 47, 46, .9), rgba(9, 9, 11, .9), rgba(4, 47, 46, .9)); box-shadow: var(--sh-lg); }
.rl-jackpot { width: 100%; justify-content: center; border: 2px solid #fbbf24; background: linear-gradient(90deg, #fbbf24, #fde047, #f59e0b); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .8), 0 4px 15px rgba(245, 158, 11, .4); }
.rl-jackpot span, .rl-jackpot b { color: #18181b; }
.rl-window { border: 2px solid rgba(20, 184, 166, .5); background: linear-gradient(to bottom, #18181b, #042f2e, #18181b); box-shadow: inset 0 6px 16px rgba(0, 0, 0, .75); }
.rl-hit { border: 2px solid #fbbf24; background: linear-gradient(90deg, rgba(245, 158, 11, .25), #134e4a, rgba(245, 158, 11, .25)); box-shadow: 0 0 20px rgba(245, 158, 11, .35), inset 0 2px 4px rgba(255, 255, 255, .3); }
.rl-row strong { color: #fff; }
.rl-row b { color: #fcd34d; }
.rl-fade.top { background: linear-gradient(to bottom, rgba(24, 24, 27, .95), rgba(24, 24, 27, 0)); }
.rl-fade.bottom { background: linear-gradient(to top, rgba(24, 24, 27, .95), rgba(24, 24, 27, 0)); }
.rl-arrow { color: #fbbf24; }
.rl-result { color: #ccfbf1; font-weight: 700; }
.rl-result.is-win { color: #fcd34d; }
.rl-left { color: #ccfbf1; }
.rl-left b { color: #fcd34d; }
.rl-table .rl-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #fcd34d; }
.rl-table .rl-h::before { content: "✦ "; }
.rl-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.rl-table .rl-h { grid-column: 1 / -1; }
.rl-tier { gap: 10px; padding: 8px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }
.rl-tier b { color: #fff; }
.rl-tier span span { color: #99f6e4; }
.rl-tier:first-of-type { border-color: #fbbf24; background: rgba(245, 158, 11, .15); }