/* ════════════════════════════════════════════════════════════════
   slotmap — 2026-09-25 '증권앱' 개편
   잭팟을 종목처럼 본다: 회색 바탕 위 흰 카드, 굵고 큰 숫자, 오르면 빨강 ▲ / 터지면 파랑 ▼.
   한국 40대 이상이 매일 보는 토스증권·네이버증권 문법을 빌려 따로 배울 게 없게 한다.
   ⚠ 금지: 좌측/상단 색 강조선, 그라데이션 배경, 알약 배지 남발, 이모지 아이콘 (사용자 취향)
   ⚠ 색 의미 고정: --up(빨강)=오름, --dn(파랑)=터짐/내림. 다른 뜻으로 쓰지 말 것.
   (직전 '종이' 버전은 web/bak-20260925-design/slot.paper.css)
   ════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f2f4f6;    --card:#ffffff;  --card2:#f9fafb;  --fill:#f2f4f6;
  --ink:#191f28;   --body:#333d4b;  --muted:#4e5968;  --faint:#6b7684;
  --line:#e5e8eb;  --line2:#f2f4f6;
  --brand:#3182f6; --brand-h:#1b64da; --brand-ink:#ffffff; --brand-bg:#e8f3ff;
  --up:#f04452;    --dn:#3182f6;
  --ok:#0a8f5c;    --warn:#d9730d; --bad:#f04452;
  --ok-bg:#e6f6ef; --warn-bg:#fff4e5; --bad-bg:#ffeeee;

  /* 기존 규칙 호환 이름 */
  --page:var(--bg); --accent:var(--brand); --accent-h:var(--brand-h); --accent-ink:var(--brand-ink);
  --link:var(--brand); --link-h:var(--brand-h); --grid:var(--line2);

  --shadow-lg:0 10px 30px rgba(0,23,51,.12);
  --float:0 2px 10px rgba(0,23,51,.12);

  /* 로고: 파란 몸통 + 금색 얼굴 */
  --mint:#4593fc; --cyan:#1b64da; --logo-screen:#191f28; --logo-face:#ffc53d; --logo-seven:#ffc53d;
  --logo-edge:rgba(0,0,0,.2); --lever-arm:#8b95a1;

  --r:20px; --r-md:14px; --r-sm:10px;
  --w:1100px;
}

:root[data-theme="dark"]{
  --bg:#101012;    --card:#1c1c20;  --card2:#232328;  --fill:#2a2a30;
  --ink:#f2f2f4;   --body:#d4d7dc;  --muted:#b0b5bd;  --faint:#8d939c;
  --line:#2e2e35;  --line2:#26262b;
  --brand:#4d9aff; --brand-h:#76b0ff; --brand-ink:#0b1320; --brand-bg:#16263d;
  --up:#ff5c67;    --dn:#4d9aff;
  --ok:#3ecf8e;    --warn:#f5a54a; --bad:#ff5c67;
  --ok-bg:#15291f; --warn-bg:#2d2215; --bad-bg:#2d1618;
  --shadow-lg:0 10px 30px rgba(0,0,0,.6); --float:0 2px 10px rgba(0,0,0,.6);
  --logo-screen:#0c0c0e; --lever-arm:#6b7076;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101012;    --card:#1c1c20;  --card2:#232328;  --fill:#2a2a30;
    --ink:#f2f2f4;   --body:#d4d7dc;  --muted:#b0b5bd;  --faint:#8d939c;
    --line:#2e2e35;  --line2:#26262b;
    --brand:#4d9aff; --brand-h:#76b0ff; --brand-ink:#0b1320; --brand-bg:#16263d;
    --up:#ff5c67;    --dn:#4d9aff;
    --ok:#3ecf8e;    --warn:#f5a54a; --bad:#ff5c67;
    --ok-bg:#15291f; --warn-bg:#2d2215; --bad-bg:#2d1618;
    --shadow-lg:0 10px 30px rgba(0,0,0,.6); --float:0 2px 10px rgba(0,0,0,.6);
    --logo-screen:#0c0c0e; --lever-arm:#6b7076;
  }
}

/* ── 바탕 ─────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--body);
  font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size:15px; line-height:1.6; letter-spacing:-.01em; word-break:keep-all;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-h)}
.mono, .num{font-variant-numeric:tabular-nums}
.up{color:var(--up) !important} .dn{color:var(--dn) !important}

/* ── 머리줄 ─────────────────────────────────────────── */
.top{position:sticky; top:0; z-index:1000;   /* 지도(Leaflet 400~700) 위로 */
  background:var(--card); border-bottom:1px solid var(--line)}
.top-in{max-width:var(--w); margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:14px; min-height:60px}
.brand{display:flex; align-items:center; gap:8px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .logo{flex:0 0 auto; display:block}
.brand .logo .lever-knob, .brand .logo .coin{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .logo .lever-knob{transform:translateY(4px)}
.brand:hover .logo .coin{transform:translateY(-3px)}
.brand .nm{font-size:19px; font-weight:800; letter-spacing:-.04em; color:var(--ink)}
/* 메뉴 — 토스처럼 회색 글자, 지금 페이지만 진하게, 배경 칠 없음 */
.tabs{display:flex; gap:4px; margin-left:28px}
.tabs a{white-space:nowrap; padding:8px 12px; font-size:15.5px; font-weight:600; color:#6b7684; transition:color .2s}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink); font-weight:700}
.top-sp{margin-left:auto}

/* ── 버튼 ─────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 16px; border-radius:var(--r-sm); border:0;
  font:inherit; font-size:15px; font-weight:600; line-height:1.3;
  color:var(--brand-ink); background:var(--brand); cursor:pointer;
  transition:background-color .15s, transform .1s; -webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--brand-h); color:var(--brand-ink)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn.ghost{background:var(--fill); color:var(--ink)}
.btn.ghost:hover{background:var(--line); color:var(--ink)}
.btn.sm{padding:7px 12px; font-size:14px}
.btn.ico{padding:8px; background:transparent; color:var(--muted)}
.btn.ico:hover{background:var(--fill); color:var(--ink)}

/* ── 레이아웃 ─────────────────────────────────────── */
.wrap{max-width:var(--w); margin:0 auto; padding:24px 20px 64px}
h1{font-size:26px; font-weight:700; letter-spacing:-.03em; color:var(--ink); margin:8px 0 6px; line-height:1.35}
h2{font-size:19px; font-weight:700; letter-spacing:-.03em; color:var(--ink); margin:32px 0 12px; line-height:1.4}
.sub{color:var(--muted); font-size:15px; margin:0 0 20px}

.card{background:var(--card); border-radius:var(--r); padding:22px 24px; margin:0 0 12px}
.card-h{display:flex; align-items:baseline; gap:10px; margin:0 0 6px}
.card-h h2{margin:0; font-size:19px}
.more, .sec-h .more{margin-left:auto; font-size:14px; font-weight:500; color:var(--faint); white-space:nowrap;
  padding:6px 0 6px 10px; margin-top:-6px; margin-bottom:-6px}
.more:hover{color:var(--ink)}
.sec-h{display:flex; align-items:baseline; gap:10px; margin:32px 0 12px}
.sec-h h2{margin:0}
.cols{display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr); gap:12px; align-items:start; margin:0 0 12px}
.cols > .card, .col-r > .card{margin:0}
.col-r{display:flex; flex-direction:column; gap:12px; min-width:0}

/* ── 홈 요약 카드 ───────────────────────────────────── */
.sum{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr); gap:24px; align-items:center; padding:28px}
.sum-k{font-size:15px; font-weight:600; color:var(--muted)}
.sum-v{font-size:42px; font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1.2; margin-top:2px;
  font-variant-numeric:tabular-nums}
.sum-d{font-size:17px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums}
.sum-d span{font-size:14px; font-weight:500; color:var(--faint); margin-left:4px}
.sum-s{font-size:14px; color:var(--faint); margin-top:10px}
.sum-sub{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
.sum-sub li{background:var(--card2); border-radius:var(--r-md); padding:14px 16px; min-width:0}
.sum-sub .k{display:block; font-size:13px; color:var(--faint); font-weight:500}
.sum-sub b{display:block; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-top:2px;
  font-variant-numeric:tabular-nums}
.sum-sub .n{display:block; font-size:13px; color:var(--muted); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 종목형 목록 (잭팟·당첨·임박) ─────────────────────── */
.jl{background:var(--card); border-radius:var(--r); padding:4px 24px}
.card .jl{background:none; padding:0; border-radius:0}
.jl-row{display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; padding:14px 0; color:inherit;
  border-bottom:1px solid var(--line2); min-width:0}
.jl-row:last-child{border-bottom:0}
.jl-row:hover{color:inherit}
.jl-row:hover .jl-nm{color:var(--brand)}
.jl-row[hidden]{display:none}
.jl-rk{flex:0 0 22px; font-size:16px; font-weight:700; color:var(--brand); text-align:center; font-variant-numeric:tabular-nums}
.jl-l{flex:1 1 0; min-width:0}
.jl-nm{font-size:16px; font-weight:600; color:var(--ink); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s}
.jl-meta{font-size:13.5px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.jl-r{flex:0 0 auto; text-align:right}
.jl-amt{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.35}
.jl-d{font-size:13px; font-weight:600; color:var(--faint); font-variant-numeric:tabular-nums; margin-top:1px}
.jl-none{padding:28px 0; text-align:center; color:var(--faint); font-size:15px}
.due-bar{flex:1 1 100%; height:4px; border-radius:4px; background:var(--fill); margin-top:10px; overflow:hidden}
.due-bar span{display:block; height:100%; border-radius:4px; background:var(--brand)}
.due-bar span.hot{background:var(--up)}
.reset-note{font-size:12.5px; color:var(--faint); margin-top:1px; white-space:normal}

/* ── 표시 글자 ──────────────────────────────────────── */
.b{display:inline-block; font-size:12px; font-weight:600; color:var(--muted); white-space:nowrap;
  background:var(--fill); border-radius:6px; padding:1px 6px; margin-left:4px; vertical-align:2px; line-height:1.5}
.b.wap{color:var(--brand); background:var(--brand-bg)}
.b.ok{color:var(--ok); background:var(--ok-bg)} .b.warn{color:var(--warn); background:var(--warn-bg)} .b.bad{color:var(--bad); background:var(--bad-bg)}
.b.cat{margin-left:0}
.ctag{font-size:13px; font-weight:600; white-space:nowrap}
.ctag.ok{color:var(--ok)} .ctag.off{color:var(--brand)} .ctag.est{color:var(--faint)} .ctag.bad{color:var(--bad)}

/* ── 숫자 타일 ──────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin:0 0 12px}
.tile{background:var(--card); border-radius:var(--r); padding:18px 20px}
.tile .k{color:var(--muted); font-size:14px; font-weight:500; margin-bottom:4px}
.tile .v{font-size:26px; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1.2; font-variant-numeric:tabular-nums}
.tile .v small{font-size:15px; font-weight:600; color:var(--muted); margin-left:2px; letter-spacing:0}
.tile .n{color:var(--faint); font-size:13.5px; margin-top:4px}

/* ── 표 ─────────────────────────────────────────── */
.tblwrap{background:var(--card); border-radius:var(--r); padding:6px 24px; overflow-x:auto; margin:0 0 12px}
.card .tblwrap{padding:0; border-radius:0}
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl th{text-align:left; padding:12px 10px; color:var(--faint); font-weight:500; font-size:13px;
  border-bottom:1px solid var(--line); white-space:nowrap}
.tbl th:first-child, .tbl td:first-child{padding-left:0}
.tbl th:last-child, .tbl td:last-child{padding-right:0}
.tbl td{padding:14px 10px; border-bottom:1px solid var(--line2); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--card2)}
.tbl .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.tbl .big{font-weight:700; font-size:16px; color:var(--ink)}
.name{font-weight:600; color:var(--ink)}
.name a{display:inline-block; padding:4px 0; color:var(--ink)}
.name a:hover{color:var(--brand)}
.venue{color:var(--faint); font-size:13px; margin-top:1px}

/* ── 임박도 막대 ───────────────────────────────────── */
.meter{height:6px; background:var(--fill); border-radius:6px; overflow:hidden; margin-top:4px}
.meter span{display:block; height:100%; border-radius:6px}
.meter span.ok{background:var(--brand)} .meter span.warn{background:var(--warn)} .meter span.bad{background:var(--up)}

/* ── 안내 ─────────────────────────────────────────── */
.empty{background:var(--card); border-radius:var(--r); padding:40px 20px; text-align:center; color:var(--muted); font-size:15px}
.card .empty{padding:28px 0}
.empty b{display:block; color:var(--ink); font-size:17px; font-weight:700; margin-bottom:6px}
.empty .logo{opacity:.6; margin-bottom:10px}
.note{color:var(--faint); font-size:13.5px; margin:16px 4px 0; line-height:1.7}
.note b{color:var(--muted); font-weight:600}
.warnbox{background:var(--warn-bg); border-radius:var(--r); padding:18px 22px; margin:0 0 12px;
  font-size:14.5px; color:var(--body); line-height:1.7}
.warnbox b{color:var(--ink); font-weight:700}
.warnbox > b:first-child{display:block; font-size:16px; margin-bottom:4px}
.warnbox ul{margin:8px 0 6px; padding-left:18px}
.warnbox li{margin:4px 0}

/* ── 차트 ─────────────────────────────────────────── */
.chart{background:var(--card); border-radius:var(--r); padding:20px 20px 14px; margin:0 0 12px}
.chart svg{display:block; width:100%; height:auto}
.chart .gl{stroke:var(--line2); stroke-width:1}
.chart .ln{stroke:var(--up); stroke-width:2; fill:none; stroke-linejoin:round; stroke-linecap:round}
.chart .gap{fill:var(--faint); opacity:.12}
.chart .ax{fill:var(--faint); font-size:10px}
.chart .hit{stroke:var(--dn); stroke-width:1.5; stroke-dasharray:3 3}
.chart .ch-m{display:none}
.legend{display:flex; gap:18px; flex-wrap:wrap; color:var(--faint); font-size:13px; margin-top:12px}
.legend i{display:inline-block; width:14px; height:2px; background:var(--up); vertical-align:middle; margin-right:6px}
.legend i.g{height:10px; background:var(--faint); opacity:.25}
.legend i.h{height:0; border-top:2px dashed var(--dn); background:none}

/* ── 지도 ─────────────────────────────────────────── */
#map{height:300px; border-radius:var(--r); overflow:hidden; background:var(--card2)}
.leaflet-container{background:var(--card2); font-family:inherit}
.leaflet-popup-content-wrapper{background:var(--card); color:var(--body); border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.leaflet-popup-tip{background:var(--card)}
.leaflet-popup-content{margin:14px 16px; font-size:14px}
.leaflet-bar{border:0 !important; box-shadow:var(--float) !important; border-radius:var(--r-sm) !important; overflow:hidden}
.leaflet-bar a{background:var(--card); color:var(--ink); border-color:var(--line2)}
.leaflet-bar a:hover{background:var(--card2)}
/* 지도 배경은 다크모드에서도 카카오톤 그대로 (반전하지 않음 — 사용자 결정) */

.pin{display:flex; flex-direction:column; align-items:center; position:relative;
  background:var(--card); color:var(--ink); padding:7px 12px 8px; border-radius:12px;
  white-space:nowrap; text-align:center; box-shadow:var(--float)}
.pin b{font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--ink); font-variant-numeric:tabular-nums}
.pin span{font-size:12px; color:var(--faint); font-weight:500; line-height:1.35}
.pin span.vn{color:var(--muted); font-weight:600; font-size:12.5px}
.pin::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-6px;
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:7px solid var(--card)}
.leaflet-marker-icon .pin{position:relative}
a.pin{cursor:pointer}
a.pin:hover b{color:var(--brand)}
a.pin.ev b, .pin.cl.ev b{color:var(--up)}
.pin.cl{cursor:pointer; box-shadow:4px -4px 0 -1px var(--card), 4px -4px 0 0 var(--line), var(--float)}
.pin.cl:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.pin .cn{position:absolute; top:-9px; right:-9px; font-style:normal; background:var(--brand); color:#fff;
  font-size:11.5px; font-weight:700; padding:1px 7px; border-radius:10px; line-height:1.5}
.pin.cl.ev .cn{background:var(--up)}
.pm .pin{transform:translateX(-50%)}
.pm a.pin:active{transform:translate(-50%, 1px)}
.pop-t{font-weight:700; margin-bottom:8px; font-size:15px; color:var(--ink)}
.pop-r{display:flex; justify-content:space-between; gap:18px; padding:2px 0; color:var(--muted)}
.pop-r b{color:var(--ink); font-weight:700}
.pop-r a{font-weight:600}
.leaflet-container .leaflet-control-attribution{font-size:10.5px; line-height:1.5; padding:0 5px; color:var(--faint);
  background:color-mix(in srgb, var(--card) 80%, transparent)}
.leaflet-container .leaflet-control-attribution a{color:var(--faint)}

/* 잭팟/이벤트 토글 — 회색 칸 안의 흰 스위치 */
.map-toggle{margin-left:auto; display:inline-flex; gap:2px; padding:3px; background:var(--fill); border-radius:var(--r-sm)}
.mt-btn{border:0; background:transparent; color:var(--faint); font:inherit; font-size:14px; font-weight:600;
  padding:6px 14px; min-height:34px; border-radius:8px; cursor:pointer; transition:all .15s}
.mt-btn:hover{color:var(--ink)}
.mt-btn.on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,23,51,.12)}

/* 홈 지도 */
.hero{position:relative; isolation:isolate; z-index:0; margin:0 0 12px; border-radius:var(--r); overflow:hidden; background:var(--card)}
.hero-map{height:380px; background:var(--card2)}
.hero-map.leaflet-container{cursor:pointer}
.hero-map:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.hero-top{position:absolute; top:14px; left:14px; right:14px; z-index:500; display:flex; align-items:flex-start; gap:10px; pointer-events:none}
.hero-top > *{pointer-events:auto}
.hero-t, .fm-t{display:flex; flex-direction:column; min-width:0; line-height:1.35}
.hero-t{background:var(--card); border-radius:var(--r-md); padding:9px 14px; box-shadow:var(--float)}
.hero-t b, .fm-t b{color:var(--ink); font-size:15px; font-weight:700}
.hero-t span, .fm-t span{color:var(--faint); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero-top .map-toggle{background:var(--card); box-shadow:var(--float)}
.hero-top .map-toggle .mt-btn.on{background:var(--brand); color:#fff; box-shadow:none}
.hero-go{position:absolute; right:14px; bottom:28px; z-index:500; box-shadow:var(--float)}

/* 전체화면 지도 */
body:has(> main.fmap){height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden}
.fmap{flex:1; position:relative; min-height:0}
#bigMap{position:absolute; inset:0}
.fm-bar{position:absolute; top:14px; left:14px; z-index:500; max-width:min(560px, calc(100% - 28px));
  display:flex; align-items:center; gap:10px; background:var(--card); border-radius:var(--r-md);
  padding:7px 8px 7px 7px; box-shadow:var(--shadow-lg)}
.fm-back{width:36px; height:36px; padding:0; flex:0 0 auto}
.fm-t{flex:1 1 auto}
.fm-bar .map-toggle{margin-left:4px; flex:0 0 auto}

/* ── 업장 카드 ─────────────────────────────────────── */
.vcards{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:10px}
.vcard{display:block; background:var(--card2); border-radius:var(--r-md); padding:16px 18px; color:inherit; transition:background-color .15s}
.vcard:hover{background:var(--fill); color:inherit}
.vc-nm{font-size:16px; font-weight:700; color:var(--ink)}
.vc-sub{font-size:13px; color:var(--faint); margin-top:1px}
.vc-v{font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin-top:10px; font-variant-numeric:tabular-nums}
.vc-v small{font-size:13px; font-weight:600; color:var(--faint); margin-left:2px}
.vc-n{font-size:13.5px; color:var(--muted); margin-top:1px}

/* ── 이벤트 ───────────────────────────────────────── */
.ev-banner{display:flex; align-items:stretch; gap:20px; color:inherit; margin-top:10px}
.ev-banner:hover{color:inherit}
.ev-banner:hover .ev-title{color:var(--brand)}
.ev-img{flex:0 0 min(340px, 42%); aspect-ratio:16/9; border-radius:var(--r-md); background-size:cover; background-position:center; background-color:var(--card2)}
.ev-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; justify-content:center}
.ev-top{font-size:13.5px; color:var(--faint)}
.ev-top .b{margin-left:0}
.ev-title{font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.03em; line-height:1.4; transition:color .15s}
.ev-prize{font-size:18px; font-weight:800; color:var(--up); font-variant-numeric:tabular-nums}
.ev-prize small{font-size:13.5px; color:var(--faint); font-weight:500; margin-left:4px}
.ev-foot{font-size:14px; color:var(--muted)}
.ev-foot b{color:var(--ink); font-weight:600}

.promos{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin:0 0 12px}
.promo-card{display:flex; flex-direction:column; background:var(--card); border-radius:var(--r); overflow:hidden; color:inherit}
.promo-card:hover{color:inherit}
.promo-card:hover .pc-title{color:var(--brand)}
.promo-card[hidden]{display:none}
.pc-img{aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--card2)}
.pc-noimg{display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; background:var(--card2)}
.pc-noimg span{color:var(--faint); font-weight:700; font-size:16px}
.pc-body{padding:16px 18px 18px; display:flex; flex-direction:column; gap:5px; flex:1}
.pc-top{display:flex; gap:6px; align-items:center}
.pc-title{font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1.4; transition:color .15s}
.pc-prize{font-size:20px; font-weight:800; color:var(--up); letter-spacing:-.02em; line-height:1.3; font-variant-numeric:tabular-nums}
.pc-prize small{font-size:13px; color:var(--faint); font-weight:500; margin-left:4px; letter-spacing:0}
.pc-prize.small{font-size:15px; color:var(--body); font-weight:600}
.pc-sum{font-size:14px; color:var(--muted); line-height:1.55}
.pc-foot{margin-top:auto; padding-top:10px; display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--line2)}
.pc-venue{font-size:14px; font-weight:600; color:var(--ink)}
.pc-period{font-size:13px; color:var(--faint)}
.cat-slot, .cat-table, .cat-bingo, .cat-raffle, .cat-floor-wide, .cat-gaming{color:var(--muted)}

/* 옛 홈 카드(다른 페이지 호환) */
.hits{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:10px}
.hit-card{display:flex; gap:10px; background:var(--card); border-radius:var(--r-md); padding:14px 16px; color:inherit}
.hc-mid{flex:1; min-width:0}
.hc-vn{font-size:14px; color:var(--muted)}
.hc-amt{font-size:20px; font-weight:800; color:var(--ink)}
.hc-when{font-size:13px; color:var(--faint); margin-left:6px}
.hc-game{font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nohit{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:var(--card); border-radius:var(--r); padding:20px 24px}
.nohit .nh-l b{display:block; color:var(--ink); font-size:17px; font-weight:700}
.nohit .nh-l span{color:var(--muted); font-size:14px}
.nohit .nh-r{margin-left:auto; text-align:right}
.nohit .nh-k{color:var(--faint); font-size:13px}
.nohit .nh-v{font-size:24px; font-weight:800; color:var(--ink)}

/* ── 필터 바 ───────────────────────────────────────── */
.fbar{display:flex; gap:8px; margin:0 0 12px}
.fbar select, .fbar input{height:48px; padding:0 14px; font:inherit; font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid transparent; border-radius:var(--r-md); min-width:0; transition:border-color .15s}
.fbar select{flex:0 0 auto; max-width:46%; cursor:pointer}
.fbar .fb-q{flex:1; min-width:0; position:relative; display:flex}
.fbar .fb-q input{flex:1; width:100%; padding-left:40px}
.fbar .fb-q svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none}
.fbar select:focus, .fbar input:focus{outline:none; border-color:var(--brand)}

/* ── 배너 ─────────────────────────────────────────── */
.bnr{position:relative; margin:0 0 12px; line-height:0}
.bnr a, .bnr picture{display:block}
.bnr img{display:block; width:100%; height:auto; border-radius:var(--r)}
.bnr .bnr-cap{position:static; display:block; line-height:1.5; padding:8px 4px 0; background:none; color:var(--ink)}
.bnr-ad{position:absolute; top:8px; right:8px; line-height:1.4; font-size:11px; font-weight:600; color:#fff;
  background:rgba(0,0,0,.45); padding:1px 6px; border-radius:6px}
.bnr-foot{max-width:var(--w); margin:0 auto; padding:0 20px}
.bnr-foot .bnr{margin:0 0 12px}
.bgrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0 0 12px}
.bg-item{position:relative; display:block; background:var(--card); border-radius:var(--r); overflow:hidden; color:var(--ink)}
.bg-item:hover{color:var(--ink)}
.bg-item picture{display:block; aspect-ratio:5/2; overflow:hidden; background:var(--card2)}
.bg-item img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s}
.bg-item:hover img{transform:scale(1.03)}
.bnr-cap{display:block; padding:12px 16px 14px; font-size:15px; font-weight:600; color:var(--ink); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── 바닥 ─────────────────────────────────────────── */
.foot{max-width:var(--w); margin:24px auto 0; padding:20px 20px 36px; color:var(--faint); font-size:13px; line-height:1.7}
.foot .fb{font-weight:800; color:var(--muted); margin-right:8px}

/* ── 모바일 메뉴 ───────────────────────────────────── */
@media(min-width:861px){ #menuBtn, .drawer, .drawer-bg{display:none !important} }
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:1100; width:min(320px, 86vw); flex-direction:column;
  background:var(--card); box-shadow:var(--shadow-lg); transform:translateX(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1); padding-bottom:env(safe-area-inset-bottom)}
.dr-open .drawer{transform:none}
.drawer-bg{position:fixed; inset:0; z-index:1090; background:rgba(0,0,0,.4); opacity:0; transition:opacity .3s}
.dr-open .drawer-bg{opacity:1}
.dr-lock, .dr-lock body{overflow:hidden}
.dr-h{display:flex; align-items:center; justify-content:space-between; padding:8px 12px 8px 22px; min-height:60px}
.dr-t{font-weight:700; color:var(--ink); font-size:17px}
#drawerClose{width:40px; height:40px; padding:0}
.dr-nav{display:flex; flex-direction:column; padding:4px 12px; overflow-y:auto}
.dr-nav a{display:flex; flex-direction:column; gap:1px; padding:13px 12px; border-radius:var(--r-md); color:inherit}
.dr-nav a b{color:var(--ink); font-size:17px; font-weight:700}
.dr-nav a span{color:var(--faint); font-size:13.5px}
.dr-nav a:hover, .dr-nav a.on{background:var(--fill)}
.dr-f{margin-top:auto; padding:16px 24px; color:var(--faint); font-size:13px}
@media (prefers-reduced-motion:reduce){ .drawer, .drawer-bg{transition:none} }

/* ── 관리자 ────────────────────────────────────────── */
.adm-tag{font-size:14px; font-weight:600; color:var(--faint); padding-left:10px; margin-left:2px; border-left:1px solid var(--line)}
.adm-inline{display:inline; margin:0}
.top-in .adm-inline .btn, .top-in > .btn{margin-left:6px}
.adm-flash{padding:12px 16px; margin:0 0 12px; background:var(--card); border-radius:var(--r-md); color:var(--ink); font-weight:600}
.adm-err{color:var(--bad); background:var(--bad-bg)}
.adm-dim{font-weight:400; color:var(--faint); font-size:13px}
.adm-empty{color:var(--faint); padding:20px; background:var(--card); border-radius:var(--r)}
.adm-list{background:var(--card); border-radius:var(--r); padding:4px 20px}
.adm-row{display:flex; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line2)}
.adm-row:last-child{border-bottom:0}
.adm-thumb{width:220px; max-height:70px; object-fit:cover; border-radius:var(--r-sm); flex:0 0 auto; background:var(--card2)}
.adm-info{flex:1; min-width:0}
.adm-t{font-weight:700; color:var(--ink)}
.adm-m{font-size:13px; color:var(--muted); margin-top:2px; word-break:break-all}
.adm-act{display:flex; gap:6px; flex:0 0 auto}
.adm-del{color:var(--bad)}
.adm-form{display:flex; flex-direction:column; gap:18px; max-width:720px; background:var(--card); border-radius:var(--r); padding:24px}
.adm-form label, .adm-field{display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--ink); font-size:14px}
.adm-form small{font-weight:400; color:var(--faint); font-size:13px}
.adm-form input:not([type=checkbox]), .adm-form select, .adm-login input{font:inherit; font-size:15px; color:var(--ink);
  background:var(--card2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; min-height:46px}
.adm-form input:focus, .adm-form select:focus, .adm-login input:focus{outline:none; border-color:var(--brand)}
.adm-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.adm-checks{display:flex; gap:20px; flex-wrap:wrap}
.adm-check{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink)}
.adm-check input{width:18px; height:18px; accent-color:var(--brand)}
.adm-check label{display:inline}
.adm-prev{max-width:100%; max-height:150px; object-fit:contain; align-self:flex-start; border-radius:var(--r-sm); margin-top:4px}
.adm-prev-m{max-height:120px}
.adm-pw{max-width:420px}
.adm-login{max-width:380px; margin:40px auto; display:flex; flex-direction:column; gap:16px; background:var(--card); border-radius:var(--r); padding:28px}
.adm-login label{display:flex; flex-direction:column; gap:6px; font-weight:600; color:var(--ink)}

/* ════════════════════════════════════════════════════════════════
   태블릿 (≤860px): 탭 → 햄버거, 두 칸 → 한 칸
   ════════════════════════════════════════════════════════════════ */
@media(max-width:860px){
  .tabs{display:none}
  #themeBtn, #menuBtn{width:40px; height:40px; padding:0}
  #menuBtn{display:inline-flex}
  .drawer{display:flex}
  .cols{grid-template-columns:1fr}
  .sum{grid-template-columns:1fr; gap:18px}
}

/* ════════════════════════════════════════════════════════════════
   폰 (≤620px)
   ════════════════════════════════════════════════════════════════ */
@media(max-width:620px){
  .top-in{padding:0 12px 0 16px; min-height:56px; gap:4px}
  .brand .nm{font-size:18px}
  .wrap{padding:12px 12px 48px}
  h1{font-size:23px; margin:12px 4px 4px}
  .sub{font-size:14.5px; margin:0 4px 16px}
  h2{font-size:18px; margin:24px 4px 10px}
  .card{padding:20px 18px; border-radius:18px}
  .card-h h2{font-size:18px}

  .sum{padding:22px 18px}
  .sum-v{font-size:34px}
  .sum-sub{grid-template-columns:1fr 1fr; gap:8px}
  .sum-sub li:first-child{grid-column:1 / -1}
  .sum-sub b{font-size:19px}

  .jl{padding:2px 18px; border-radius:18px}
  .jl-row{padding:13px 0; gap:0 10px}
  .jl-nm{font-size:15.5px}
  .jl-amt{font-size:16px}
  .jl-rk{flex-basis:18px; font-size:15px}

  .hero{border-radius:18px}
  .hero-map{height:320px}
  .hero-top{top:10px; left:10px; right:10px}
  .hero-t{padding:7px 11px}
  .hero-go{right:10px; bottom:24px}
  .fm-bar{top:10px; left:10px; right:10px; max-width:none}

  .tiles{grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px}
  .tile{padding:15px 16px; border-radius:18px}
  .tile .v{font-size:22px}

  .vcards{grid-template-columns:1fr 1fr; gap:8px}
  .vcard{padding:14px}
  .vc-v{font-size:19px; margin-top:6px}

  .ev-banner{flex-direction:column; gap:12px}
  .ev-img{flex:none; width:100%}
  .ev-title{font-size:19px}
  .promos{grid-template-columns:1fr; gap:10px}

  .fbar select, .fbar input{font-size:16px}  /* iOS 포커스 확대 방지 */
  .bgrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .bnr-cap{font-size:13.5px; padding:9px 12px 11px}
  .bnr-foot{padding:0 12px}
  .note{margin:14px 6px 0}

  .tblwrap{padding:2px 18px; border-radius:18px}
  .chart{padding:16px 12px 12px; border-radius:18px}
  .chart .ch-d{display:none}
  .chart .ch-m{display:block}
  .chart .ch-m .ax{font-size:11px}
  #map{border-radius:18px}

  /* 표 → 종목형 행. 1줄: 이름(c-main)+금액(c-amt) / 2줄: 보조(c-meta) / 3줄: 막대(c-bar) */
  .tbl.stack, .tbl.stack tbody{display:block}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 12px; padding:14px 0; border-bottom:1px solid var(--line2)}
  .tbl.stack tr:last-child{border-bottom:0}
  .tbl.stack td{display:block; padding:0; border:none; text-align:left; background:none !important}
  .tbl.stack td.c-main{order:0; flex:1 1 calc(100% - 136px); min-width:0}
  .tbl.stack td.c-main .name{line-height:1.4; overflow-wrap:anywhere}
  .tbl.stack td.c-main .name a{padding:0}
  .tbl.stack td.c-amt{order:1; flex:0 0 auto; max-width:124px; text-align:right; font-size:16px}
  .tbl.stack td.c-won{font-size:15px}
  .tbl.stack td.c-meta{order:2; flex:0 1 auto; font-size:13px !important; line-height:1.5; color:var(--faint)}
  .tbl.stack td.c-meta.big{font-weight:600; color:var(--body)}
  .tbl.stack td.c-meta .venue{display:inline; margin-left:4px}
  .tbl.stack td[data-l]::before{content:attr(data-l); margin-right:5px; color:var(--faint)}
  .tbl.stack td.c-bar{order:3; flex:1 1 100%; display:flex; align-items:center; gap:10px; margin-top:4px}
  .tbl.stack td.c-bar .meter{flex:1; margin:0}
  .tbl.stack td.c-bar .venue{margin:0; white-space:nowrap}

  .foot{padding:16px 16px 32px}
  .adm-row{flex-wrap:wrap}
  .adm-thumb{width:100%; max-height:none}
  .adm-2{grid-template-columns:1fr}
  .adm-tag{display:none}
}

/* 홈 순위: PC 는 오른쪽 두 카드 높이에 맞춰 15위까지, 한 칸으로 쌓이는 화면은 10위까지 */
@media(max-width:860px){ .ranked .jl-row:nth-child(n+11){display:none} }

/* ════════════════════════════════════════════════════════════════
   홈 '한눈에' (2026-09-25): 배너 4열 → 가볼 곳 | 쉬어갈 곳 → 이벤트 4장
   ════════════════════════════════════════════════════════════════ */
.home .bgrid{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 12px}
.home .bg-item{border-radius:var(--r-md)}
.home .bg-item picture{aspect-ratio:3/1}
.home .bnr-cap{padding:8px 12px 10px; font-size:14px}

.gorest{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin:0 0 12px; align-items:start}
.gorest > .card{margin:0}
.gr-why{margin:0 0 4px; font-size:13.5px; color:var(--faint)}
.gr-vn{font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s}
.gr .jl-row:hover .gr-vn{color:var(--brand)}
.gr-big{font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1.3; font-variant-numeric:tabular-nums}
.gr .jl-row{padding:13px 0}
.gr .due-bar{margin-top:8px}

.evs{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:10px}
.ev-c{display:block; min-width:0; color:inherit}
.ev-c:hover{color:inherit}
.ev-c:hover .ev-ct{color:var(--brand)}
.ev-ci{aspect-ratio:16/10; border-radius:var(--r-md); background:var(--card2) center/cover no-repeat}
.ev-ci.none{display:flex; align-items:center; justify-content:center}
.ev-ci.none span{font-weight:700; color:var(--faint); font-size:14px}
.ev-ct{font-size:15px; font-weight:700; color:var(--ink); line-height:1.4; margin-top:8px; transition:color .15s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ev-cv{font-size:13px; color:var(--faint); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev-cv b{color:var(--up); font-weight:700}

@media(max-width:860px){
  .gorest{grid-template-columns:1fr}
}
@media(max-width:620px){
  .home .bgrid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
  .home .bnr-cap{font-size:13px; padding:7px 10px 9px}
  .evs{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 10px}
  .ev-ct{font-size:14.5px}
  .gr-vn{font-size:16px}
  .gr-big{font-size:18px}
}
@media(max-width:620px){ .home .bg-item picture{aspect-ratio:2/1} }

/* ── 홈 빠른 버튼 (메뉴 바로가기 4개) ─────────────────── */
.quick{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; margin:0 0 12px}
.qk{display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:0;
  background:var(--card); border-radius:var(--r); padding:18px 20px; color:var(--ink); transition:background-color .15s, transform .1s}
.qk:hover{color:var(--ink); background:var(--card2)}
.qk:hover b{color:var(--brand)}
.qk:active{transform:scale(.98)}
.qk svg{width:30px; height:30px; fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px}
.qk b{font-size:16.5px; font-weight:700; letter-spacing:-.02em; transition:color .15s}
.qk span{font-size:13.5px; color:var(--faint)}

/* ── 홈 링크 배너 (home_links, 2열) · 이미지 없으면 글자 카드 ── */
.bgrid-home_links{grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important}
.btxt{display:flex; align-items:center; gap:4px 12px; flex-wrap:wrap; background:var(--card); border-radius:var(--r-md) !important;
  padding:18px 20px; min-height:68px; color:var(--ink); transition:background-color .15s}
.btxt:hover{background:var(--card2); color:var(--ink)}
.btxt:hover .bt-t{color:var(--brand)}
.bt-t{flex:1 1 auto; min-width:0; font-size:16.5px; font-weight:700; letter-spacing:-.02em; transition:color .15s}
.bt-s{font-size:13.5px; color:var(--faint); white-space:nowrap}
.bt-a{flex:0 0 auto; color:var(--faint)}
.adm-thumb-t{display:flex; align-items:center; justify-content:center; height:70px; font-size:13px; font-weight:600; color:var(--faint)}

@media(max-width:620px){
  /* 폰: 네 개를 한 줄에 — 아이콘 위, 이름 아래 */
  .quick{gap:6px}
  .qk{align-items:center; text-align:center; padding:14px 4px 12px; border-radius:16px}
  .qk svg{width:26px; height:26px; margin-bottom:6px}
  .qk b{font-size:13px; line-height:1.35; word-break:keep-all}
  .qk span{display:none}
  .btxt{padding:14px 14px; min-height:0; gap:2px 6px}
  .bt-t{flex:1 1 100%; font-size:15px}
  .bt-s{font-size:12.5px; flex:1}
  .bt-a{width:16px; height:16px}
}

/* ── 용어 모음 · 이용팁 공용 ─────────────────────────── */
.chips{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px}
.chips a{padding:7px 13px; border-radius:999px; background:var(--card); color:var(--muted); font-size:14px; font-weight:600}
.chips a:hover{color:var(--brand)}
.gl-sec[hidden], .gl-i[hidden]{display:none}
.gl-sec h2{margin:0 0 6px}
.gl{margin:0}
.gl-i{padding:14px 0; border-bottom:1px solid var(--line2)}
.gl-i:last-child{border-bottom:0; padding-bottom:4px}
.gl dt{font-size:16px; font-weight:700; color:var(--ink)}
.gl dt small{font-size:13px; font-weight:500; color:var(--faint); margin-left:4px}
.gl dd{margin:4px 0 0; font-size:15px; color:var(--body); line-height:1.7}
html{scroll-padding-top:72px}
@media(max-width:620px){ .chips{margin:0 2px 10px} .chips a{font-size:13.5px; padding:6px 11px} .gl dd{font-size:14.5px} }

/* ── 업장별 이용팁 ───────────────────────────────────── */
.tv{scroll-margin-top:72px}
.tv-h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px}
.tv-h h2{margin:0}
.tv-h h2 a{color:var(--ink)}
.tv-h h2 a:hover{color:var(--brand)}
.tv-c{font-size:14px; color:var(--faint)}
.tv-links{margin-left:auto; display:flex; gap:12px; font-size:14px; font-weight:600}
.tv-m{font-size:14px; color:var(--muted); margin-top:4px}
.tv-m b{color:var(--ink); font-weight:600}
.tv h3{font-size:15px; font-weight:700; color:var(--faint); margin:18px 0 4px}
.tv-note{font-size:14px; color:var(--muted); margin:0 0 10px}
.tv-none{font-size:14.5px; color:var(--faint); margin:4px 0 0}
.tl{list-style:none; margin:0; padding:0}
.tl li{display:flex; align-items:baseline; gap:6px 12px; padding:10px 0; border-bottom:1px solid var(--line2); font-size:15px; color:var(--body); line-height:1.6}
.tl li:last-child{border-bottom:0}
.tl li span:first-child{flex:1; min-width:0}
.tsrc{flex:0 0 auto; font-size:12px; font-weight:600; padding:1px 7px; border-radius:6px; white-space:nowrap}
a.tsrc:hover{text-decoration:underline}
.g-off{color:var(--ok); background:var(--ok-bg)}
.g-news{color:var(--brand); background:var(--brand-bg)}
.g-rev{color:var(--faint); background:var(--fill)}
.mb-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:8px; margin:0 0 6px}
.mb{display:flex; align-items:baseline; justify-content:space-between; gap:8px; background:var(--card2); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--ink); min-width:0}
.mb:hover{background:var(--fill); color:var(--brand)}
.mb-n{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.mb b{font-size:15px; font-weight:800; font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .tv-links{margin-left:0; width:100%}
  .tl li{flex-wrap:wrap; font-size:14.5px}
  .mb-grid{grid-template-columns:1fr 1fr; gap:6px}
  .mb{padding:9px 10px}
  .mb-n{font-size:13px}
}
@media(max-width:620px){ .mb{align-items:center} .mb-n{white-space:normal; line-height:1.35; word-break:break-word} }

/* ════════════════════════════════════════════════════════════════
   홈 v3 — 2026-09-27. 레퍼런스 corp.tossinvest.com (사용자 지정)
   검은 첫 화면 + 떠 있는 3D, 흰 섹션 가운데 큰 제목, 넉넉한 여백, 스크롤하면 떠오르기.
   html.v3on 은 index.php 머리에서 붙인다(홈에만). 움직임은 home.js.
   ⚠ 장식용 움직임(깜빡이는 점·빛 스윕·아이콘 칩·그라데이션)은 넣지 말 것 — 사용자가 "AI티"로 거절.
   ════════════════════════════════════════════════════════════════ */
:root{ --ease:cubic-bezier(.2,.7,.1,1); --ease2:cubic-bezier(.2,.8,.2,1); --t-ink:#333d4b; --calm:#d1d6db }
:root[data-theme="dark"]{ --t-ink:#f2f2f4; --calm:#3a3a42 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --t-ink:#f2f2f4; --calm:#3a3a42 } }

html.v3on body{background:var(--card)}
.v3 .in{max-width:var(--w); margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px}
html.v3on .foot{border-top:1px solid var(--line2); max-width:none;
  padding-left:max(20px, calc((100% - var(--w)) / 2 + 20px)); padding-right:max(20px, calc((100% - var(--w)) / 2 + 20px))}
html.v3on .bnr-foot{margin-top:24px}

/* 머리줄 — 첫 화면(검은 무대) 위에선 검게 */
html.v3on .top{transition:background-color .4s, border-color .4s}
html.v3top .top{background:#000; border-bottom-color:transparent}
html.v3top .top .nm, html.v3top .top .tabs a.on{color:#fff}
html.v3top .top .tabs a{color:#8b95a1}
html.v3top .top .tabs a:hover{color:#fff}
html.v3top .top .btn.ico{color:#8b95a1}
html.v3top .top .btn.ico:hover{background:rgba(255,255,255,.08); color:#fff}

/* ── 1. 첫 화면 ── */
.s-hero{position:relative; overflow:hidden; background:#000; color:#fff; text-align:center;
  padding:120px 20px 72px; min-height:min(720px, 88vh); display:flex; flex-direction:column; justify-content:center}
.h-in{position:relative; z-index:2; display:block; color:#fff; max-width:820px; margin:0 auto}
.h-in:hover{color:#fff}
.h-k{margin:0 0 18px; font-size:17px; font-weight:600; color:#8b95a1}
.v3 .h-vn{margin:0; color:#fff; font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.35;
  display:flex; justify-content:center; align-items:baseline; gap:12px; flex-wrap:wrap}
.h-vn span{font-size:19px; font-weight:500; color:#b0b8c1}
.h-amt{margin:14px 0 10px; font-size:clamp(44px, 8vw, 96px); font-weight:800; letter-spacing:-.045em; line-height:1.05; font-variant-numeric:tabular-nums}
.h-seen{margin:0; font-size:14px; color:#6b7684}
/* 금액 — 슬롯 릴처럼 자리마다 굴러서 멈춘다 */
.reel{display:inline-flex}
.rl{display:inline-block; height:1.05em; overflow:hidden; vertical-align:top}
.rl-s{display:flex; flex-direction:column; transform:translateY(0)}
.rl-s i{display:block; height:1.05em; font-style:normal}
.reel.go .rl-s{transform:translateY(calc(var(--n) * -1.05em));
  transition:transform calc(1.2s + var(--x) * .12s) cubic-bezier(.15,.85,.25,1) calc(.35s + var(--x) * .04s)}
/* 최근 터짐 한 줄 */
.h-hit{position:relative; z-index:2; display:flex; align-items:center; gap:22px; width:min(640px, 100%); margin:56px auto 0;
  padding:20px 26px; border-radius:20px; background:rgba(255,255,255,.07); color:#fff; text-align:left; transition:background-color .3s}
.h-hit:hover{background:rgba(255,255,255,.12); color:#fff}
.h-hit-k{flex:0 0 auto; font-size:15px; font-weight:700; color:#4d9aff}
.h-hit-m{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.h-hit-m b{font-size:17px; font-weight:700}
.h-hit-m small{font-size:13.5px; color:#8b95a1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.h-hit-v{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums}
.h-hit-v small{font-size:13px; font-weight:600; color:#4d9aff}
/* 떠 있는 3D — 굴리면 --p 배 속도로 올라간다 */
.h-fl{position:absolute; inset:0; z-index:1; pointer-events:none}
.fo{position:absolute; display:block; height:auto; will-change:transform; translate:0 calc(var(--sy,0px) * var(--p));
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.fo1{width:250px; left:4%; top:30%}
.fo2{width:120px; left:22%; top:12%}
.fo3{width:170px; right:6%; top:18%}
.fo4{width:150px; right:17%; bottom:8%}
.fo5{width:96px; left:15%; bottom:10%}
.fo6{width:84px; right:30%; top:9%; opacity:.8; filter:blur(1.5px) drop-shadow(0 20px 30px rgba(0,0,0,.5))}

/* ── 2. 바로가기 ── */
.s-quick{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-top:40px; margin-bottom:12px}
.s-quick a{display:flex; align-items:center; gap:12px; padding:20px 22px; border-radius:20px; background:var(--card2); color:var(--ink); transition:background-color .3s}
.s-quick a:hover{background:var(--fill); color:var(--ink)}
.s-quick svg{width:26px; height:26px; fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.s-quick b{font-size:16.5px; font-weight:700}

/* ── 3. 카페 · 텔방 ── */
.s-comm{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.cm{position:relative; display:block; overflow:hidden; min-height:260px; padding:36px 40px; border-radius:28px; color:#fff}
.cm:hover{color:#fff}
.cm-cafe{background:#03c75a}
.cm-tg{background:#229ed9}
.cm img{position:absolute; right:28px; bottom:22px; width:190px; height:auto; transition:scale .8s var(--ease), rotate .8s var(--ease);
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.18))}
.cm:hover img{scale:1.06; rotate:-4deg}
.cm-l{position:relative; display:block; margin:0 0 12px; font-size:16px; font-weight:600; opacity:.85}
.cm b{position:relative; display:block; font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.3}
.cm-b{position:relative; display:inline-block; margin-top:26px; padding:11px 20px; border-radius:12px; background:rgba(255,255,255,.2); font-size:15.5px; font-weight:700; transition:background-color .3s}
.cm:hover .cm-b{background:rgba(255,255,255,.32)}
.v3 .bnr{margin-top:12px}

/* ── 섹션 공통: 가운데 큰 제목 ── */
.s-go, .s-rest, .s-ev{padding:120px 0 40px}
.v3 .t{margin:0 0 56px; text-align:center; font-size:clamp(30px, 4vw, 46px); font-weight:700; letter-spacing:-.03em; color:var(--t-ink); line-height:1.3}
.v3 .more{display:table; margin:40px auto 0; padding:14px 26px; border-radius:14px; background:var(--fill); color:var(--ink); font-size:16px; font-weight:600; transition:background-color .3s}
.v3 .more:hover{background:var(--line); color:var(--ink)}

/* ── 4. 곧 터질 곳 ── */
.gcards{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px}
.gc{display:flex; flex-direction:column; min-height:330px; padding:30px 28px 28px; border-radius:28px; background:var(--card2); color:var(--ink); transition:translate .5s var(--ease2)}
.gc:hover{translate:0 -6px; color:var(--ink)}
.gc-dark{background:#000; color:#fff}
.gc-dark:hover{color:#fff}
.gc-p{margin:0; font-size:52px; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.gc-p small{font-size:26px; margin-left:2px}
.gc-p.hot{color:var(--up)}
.gc-bar{height:6px; margin:18px 0 10px; border-radius:6px; background:var(--calm); overflow:hidden}
.gc-dark .gc-bar{background:#2a2a30}
.gc-bar span{display:block; height:100%; width:var(--w); border-radius:6px; background:var(--ink); transform-origin:0 50%}
.gc-dark .gc-bar span{background:#fff}
.gc-d{margin:0; font-size:14px; font-weight:600; color:var(--faint)}
.gc-dark .gc-d{color:#8b95a1}
.gc-b{margin-top:auto; display:flex; flex-direction:column; gap:2px; min-width:0}
.gc-b b{font-size:20px; font-weight:700; letter-spacing:-.02em}
.gc-b span{font-size:14.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gc-dark .gc-b span{color:#b0b8c1}
.gc-b em{font-style:normal; font-size:15px; font-weight:700; margin-top:6px}

/* ── 5. 최근 터진 곳 ── */
.s-rest{background:var(--card2); padding-bottom:100px}
.rlist{max-width:820px; margin:0 auto; background:var(--card); border-radius:28px; padding:8px 32px}
.rr{display:flex; align-items:center; gap:24px; padding:24px 0; color:var(--ink); border-bottom:1px solid var(--line2)}
.rr:last-child{border-bottom:0}
.rr:hover{color:var(--ink)}
.rr:hover b{color:var(--brand)}
.rr-a{flex:0 0 88px; font-size:24px; font-weight:800; letter-spacing:-.03em; color:var(--dn)}
.rr-m{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.rr-m b{font-size:18px; font-weight:700; transition:color .3s}
.rr-m small{font-size:14px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rr-v{flex:0 0 auto; text-align:right; font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; display:flex; flex-direction:column}
.rr-v small{font-size:13px; font-weight:600; color:var(--faint)}

/* ── 6. 이벤트 ── */
.s-ev .evs{margin-top:0; gap:20px}
.s-ev .ev-ci{border-radius:20px; transition:scale 1s var(--ease)}
.s-ev .ev-c:hover .ev-ci{scale:1.03}

/* ── 7. 용어 · 이용팁 ── */
.s-links{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:80px; margin-bottom:12px}
.s-links a{display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-radius:20px; background:var(--card2); color:var(--ink); transition:background-color .3s}
.s-links a:hover{background:var(--fill); color:var(--ink)}
.s-links b{font-size:17px; font-weight:700}
.s-links span{color:var(--faint)}
.s-note{margin-top:24px; margin-bottom:8px; color:var(--faint); font-size:13.5px; line-height:1.7}

/* ══ 움직임 ══ */
@keyframes v3-up{ from{opacity:0; translate:0 40px} }
@keyframes v3-fill{ from{scale:0 1} }
@keyframes v3-float{ 0%,100%{transform:translateY(0) rotate(var(--r0,0deg))} 50%{transform:translateY(-18px) rotate(var(--r1,4deg))} }
@keyframes v3-spin{ 0%{transform:rotateY(0) translateY(0)} 50%{transform:rotateY(180deg) translateY(-14px)} 100%{transform:rotateY(360deg) translateY(0)} }
@keyframes v3-in{ from{opacity:0; scale:.7} }

.v3on .h-k{animation:v3-up 1s .1s var(--ease) both}
.v3on .h-vn{animation:v3-up 1s .2s var(--ease) both}
.v3on .h-amt{animation:v3-up 1.1s .3s var(--ease) both}
.v3on .h-seen{animation:v3-up 1s .4s var(--ease) both}
.v3on .h-hit{animation:v3-up 1s .6s var(--ease) both}
.v3on .fo{animation:v3-in 1.4s var(--ease) both, v3-float 7s ease-in-out infinite}
.v3on .fo.spin{animation:v3-in 1.4s var(--ease) both, v3-spin 6s linear infinite}
.v3on .fo1{--r0:-8deg; --r1:-3deg; animation-delay:.2s, 0s; animation-duration:1.4s, 8s}
.v3on .fo2{animation-delay:.35s, 0s}
.v3on .fo3{--r0:6deg; --r1:12deg; animation-delay:.3s, 1s; animation-duration:1.4s, 9s}
.v3on .fo4{animation-delay:.45s, .8s; animation-duration:1.4s, 7s}
.v3on .fo5{--r0:-10deg; --r1:4deg; animation-delay:.5s, 2s}
.v3on .fo6{animation-delay:.6s, 1.5s; animation-duration:1.4s, 5s}

.v3on .v3 .rv:not([data-on]){opacity:0}
.v3on .v3 .rv[data-on]{animation:v3-up 1s calc(var(--k,0) * .1s) var(--ease) both}
.v3on .gc .gc-bar span{scale:0 1}
.v3on .gc[data-on] .gc-bar span{scale:1 1; animation:v3-fill 1.4s calc(.4s + var(--k,0) * .1s) var(--ease) both}
.v3on .cm img{opacity:0}
.v3on .cm[data-on] img{opacity:1; animation:v3-in 1.1s calc(.3s + var(--k,0) * .1s) var(--ease) both}

@media (max-width:900px){ .gcards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){
  .s-hero{padding:176px 16px 40px; min-height:0}
  .h-k{font-size:14px; margin-bottom:12px}
  .v3 .h-vn{font-size:19px; gap:6px 8px}
  .h-vn span{font-size:15px}
  .h-hit{margin-top:36px; gap:12px; padding:16px 18px}
  .h-hit-k{font-size:13px}
  .h-hit-m b{font-size:15px}
  .h-hit-v{font-size:17px}
  .fo1{width:124px; left:50%; margin-left:-62px; top:34px}
  .fo2{width:58px; left:7%; top:64px}
  .fo3{width:78px; right:5%; top:48px}
  .fo4, .fo5, .fo6{display:none}
  .v3 .in{padding-left:12px; padding-right:12px}
  .s-quick{grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:20px; margin-bottom:8px}
  .s-quick a{padding:16px; gap:10px; border-radius:16px}
  .s-quick b{font-size:15px}
  .s-comm{gap:8px}
  .cm{min-height:210px; padding:22px 18px; border-radius:22px}
  .cm img{width:60px; right:12px; top:14px; bottom:auto}
  .cm-l{font-size:13.5px; margin-bottom:8px}
  .cm b{font-size:20px}
  .cm-b{margin-top:18px; padding:9px 14px; font-size:14px}
  .s-go, .s-rest, .s-ev{padding:72px 0 24px}
  .s-rest{padding-bottom:56px}
  .v3 .t{margin-bottom:32px}
  .gcards{gap:8px}
  .gc{min-height:250px; padding:22px 18px; border-radius:22px}
  .gc-p{font-size:38px}
  .gc-p small{font-size:20px}
  .gc-b b{font-size:16.5px}
  .gc-b span{font-size:13px}
  .rlist{padding:4px 18px; border-radius:22px}
  .rr{gap:12px; padding:18px 0}
  .rr-a{flex-basis:56px; font-size:18px}
  .rr-m b{font-size:16px}
  .rr-v{font-size:16px}
  .s-ev .evs{gap:12px 10px}
  .s-links{margin-top:48px; gap:8px}
  .s-links a{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .v3on .v3 *, .v3on .v3 *::before, .v3on .v3 *::after{animation:none !important; transition:none !important}
  .v3on .v3 .rv, .v3on .cm img{opacity:1 !important}
  .v3on .gc .gc-bar span{scale:1 1 !important}
}

/* 바로가기 줄이 빠지면 카페·텔방이 검은 첫 화면에 붙는다 — 사이를 띄운다 */
.s-hero + .s-comm{margin-top:48px}
@media(max-width:760px){ .s-hero + .s-comm{margin-top:24px} }

/* ════════════════════════════════════════════════════════════════
   메뉴 v2 — 2026-09-27 (_lib.php s_nav). 이름 = 홈 섹션 이름, 5개 + 오른쪽 텔방 버튼.
   모바일(≤860px)은 햄버거 대신 아래 탭 바 + 더보기 시트. 예전 .drawer 규칙은 이제 안 쓴다.
   ════════════════════════════════════════════════════════════════ */
.top-cta{display:inline-flex; align-items:center; height:38px; padding:0 16px; margin-right:6px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:14.5px; font-weight:700; white-space:nowrap; transition:background-color .25s}
.top-cta:hover{background:var(--brand-h); color:#fff}

/* 카지노 [지도 | 목록] */
.seg{display:inline-flex; gap:2px; padding:3px; border-radius:12px; background:var(--fill); flex:0 0 auto}
.seg a{padding:7px 14px; border-radius:9px; font-size:14px; font-weight:600; color:var(--faint); white-space:nowrap; transition:color .2s, background-color .2s}
.seg a:hover{color:var(--ink)}
.seg a.on{background:var(--card); color:var(--ink); font-weight:700; box-shadow:0 1px 3px rgba(0,23,51,.12)}
.wrap > .seg{margin:4px 0 14px}

.btm, .more-sh{display:none}
@media(max-width:860px){
  .top-cta{display:none}
  .btm{position:fixed; left:0; right:0; bottom:0; z-index:1050; display:grid; grid-template-columns:repeat(5, 1fr);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid var(--line)}
  .btm a, .btm button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0 4px; border:0; background:none;
    font:inherit; font-size:11.5px; font-weight:600; color:#8b95a1; cursor:pointer; -webkit-tap-highlight-color:transparent; white-space:nowrap}
  .btm svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
  .btm svg.dots{fill:currentColor; stroke:none}
  .btm .on{color:var(--ink)}
  .btm a.on svg{stroke-width:2.2}
  .btm a:active, .btm button:active{transform:scale(.94)}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  /* 전체화면 지도는 몸통이 화면 높이라 — 탭 바만큼 지도를 줄인다 */
  body:has(> main.fmap){padding-bottom:0}
  body:has(> main.fmap) .fmap{margin-bottom:calc(68px + env(safe-area-inset-bottom))}
  .fm-bar{flex-wrap:wrap}
  .fm-bar .fm-t{order:3; flex:1 1 100%; padding:0 4px 2px}
  .fm-bar .map-toggle{margin-left:auto}

  .more-sh{position:fixed; inset:0; z-index:1100; display:block}
  .more-sh[hidden]{display:none}
  .ms-bg{position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:opacity .3s}
  .ms-p{position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; min-height:66vh; max-height:90vh;
    padding:6px 16px calc(20px + env(safe-area-inset-bottom)); background:var(--card); border-radius:28px 28px 0 0;
    translate:0 100%; transition:translate .35s cubic-bezier(.2,.8,.2,1)}
  .more-sh.open .ms-bg{opacity:1}
  .more-sh.open .ms-p{translate:0 0}
  .ms-h{position:relative; display:flex; align-items:center; justify-content:space-between; padding:18px 8px 10px; touch-action:none}
  .ms-grab{position:absolute; top:4px; left:50%; width:44px; height:5px; margin-left:-22px; border-radius:5px; background:var(--line)}
  .ms-h b{font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink)}
  .ms-x{display:grid; place-items:center; width:44px; height:44px; margin-right:-6px; border:0; border-radius:50%; background:var(--fill); color:var(--ink); cursor:pointer}
  .ms-x svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round}
  .ms-list{display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain}
  .ms-list a{display:flex; align-items:center; gap:12px; padding:18px 8px; border-bottom:1px solid var(--line2); color:var(--ink)}
  .ms-list a:last-child{border-bottom:0}
  .ms-list a:active{background:var(--fill)}
  .ms-t{flex:1 1 auto; display:flex; flex-direction:column; gap:3px; min-width:0}
  .ms-list b{font-size:19px; font-weight:700; letter-spacing:-.02em}
  .ms-t span{font-size:14.5px; color:var(--faint)}
  .ms-list svg{flex:0 0 auto; width:20px; height:20px; fill:none; stroke:#b0b8c1; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .ms-comm{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:16px}
  .ms-comm a{display:flex; align-items:center; justify-content:center; height:58px; border-radius:16px; color:#fff; font-size:17px; font-weight:700}
  .ms-comm .c-cafe{background:#03c75a}
  .ms-comm .c-tg{background:#229ed9}
}
@media (prefers-reduced-motion:reduce){ .ms-bg, .ms-p{transition:none} }

/* 무한 스크롤 트리거 (hits.php) */
.more-load{display:flex; justify-content:center; padding:14px 0 4px}