/* luckystar-kr — MARQUEE family, palette sampled from the operator's lobby and logo.
   Tokens are --ls-*; no other land in the fleet uses that prefix. */
:root{
  --ls-ground:#08090b;       /* page ground: the lobby's #010101, lifted one step */
  --ls-deep:#0f1115;         /* section bed */
  --ls-card:#161920;         /* cards and tables */
  --ls-line:#262b35;         /* hairlines */
  --ls-green:#00c968;        /* the logo's clover: primary action */
  --ls-green-ink:#03150b;    /* ink ON green (white on it measures 2.2:1) */
  --ls-violet:#8747fe;       /* the lobby's nav pill: live band, badges (white ink 4.8:1) */
  --ls-lilac:#b9a4ff;        /* violet as TEXT on dark (the pill itself is 3.8:1 there) */
  --ls-cream:#f3f5f2;        /* body ink */
  --ls-mute:#a9afbb;         /* secondary ink */
}
*{box-sizing:border-box}
/* One offset mechanism only: scroll-margin-top on the sections (a scroll-padding on html as well
   would stack with it — measured on casinacho-no, 244px instead of 164). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ls-ground);color:var(--ls-cream);
  font:400 16.5px/1.75 "Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  word-break:keep-all;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:var(--ls-green)}
h1,h2,h3{font-family:"Black Han Sans","Noto Sans KR",sans-serif;font-weight:400;line-height:1.2;
  margin:0 0 14px;letter-spacing:.2px}
h1{font-size:clamp(36px,6vw,62px)}
h2{font-size:clamp(26px,3.6vw,36px)}
h3{font-size:21px;margin-bottom:18px}   /* a heading owns the air under it, whatever follows */
p{margin:0 0 18px}
.ls-wrap{width:min(1220px,100% - 32px);margin-inline:auto}
.ls-mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- running line of facts ---------- */
.ls-ticker{background:var(--ls-green);color:var(--ls-green-ink);overflow:hidden;white-space:nowrap;
  font:600 13px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.3px}
.ls-ticker-track{display:inline-flex;gap:0;animation:ls-run 38s linear infinite;padding:9px 0}
.ls-ticker:hover .ls-ticker-track{animation-play-state:paused}
.ls-ticker span{padding:0 22px;position:relative}
.ls-ticker span::after{content:"✦";position:absolute;right:-6px;opacity:.55}
@keyframes ls-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ls-ticker{white-space:normal}.ls-ticker-track{animation:none;flex-wrap:wrap}
  .ls-ticker-track [aria-hidden]{display:none}}

/* ---------- top bar ---------- */
.ls-top{position:sticky;top:0;z-index:40;background:rgba(8,9,11,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ls-line)}
.ls-top-in{display:flex;align-items:center;gap:18px;padding:11px 0}
.ls-logo{display:block;flex:none}
.ls-logo img{height:36px;width:auto}
.ls-nav{display:flex;gap:4px;list-style:none;margin:0 auto 0 12px;padding:0}
.ls-nav a{display:block;padding:8px 12px;border-radius:999px;color:var(--ls-cream);text-decoration:none;
  font-size:14.5px;font-weight:500}
.ls-nav a:hover{background:#1c1f27;color:var(--ls-green)}
.ls-top .ls-btn{margin-left:auto;flex:none;padding:11px 20px;font-size:15px}

/* ---------- stage (hero) ---------- */
.ls-stage{position:relative;padding:44px 0 40px;border-bottom:1px solid var(--ls-line);
  background:radial-gradient(760px 420px at 92% 8%,rgba(135,71,254,.26),transparent 64%),
    radial-gradient(640px 360px at 0% 100%,rgba(0,201,104,.16),transparent 62%),var(--ls-deep)}
.ls-stage-in{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.ls-stage-logo{margin:0 0 18px}
.ls-stage-logo img{height:52px;width:auto}
.ls-kicker{display:inline-flex;gap:8px;align-items:center;margin:0 0 14px;padding:6px 12px;
  border:1px solid var(--ls-violet);border-radius:999px;color:var(--ls-lilac);font-size:13px;font-weight:700}
.ls-offer{font-family:"Black Han Sans",sans-serif;font-size:clamp(26px,3.6vw,38px);line-height:1.2;
  color:var(--ls-green);margin:0 0 6px}
.ls-offer-sub{color:var(--ls-mute);margin:0 0 20px;font-size:15px}
.ls-trig{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 24px;padding:0}
.ls-trig li{border:1px solid var(--ls-line);background:#12151b;border-radius:10px;padding:7px 12px;
  font-size:14px;font-weight:500}
.ls-trig li:last-child{border-color:var(--ls-green);color:var(--ls-green)}
.ls-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.ls-meta{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--ls-mute);font-size:14px;margin:0}
.ls-shot{position:relative;margin:0}
.ls-frame{border-radius:16px;overflow:hidden;border:1px solid #2d3340;background:#000;
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 6px rgba(135,71,254,.10)}
.ls-frame-bar{display:flex;gap:6px;padding:9px 12px;background:#14171d;border-bottom:1px solid #232834}
.ls-frame-bar i{width:9px;height:9px;border-radius:50%;background:#3a404d}
.ls-shot figcaption{color:var(--ls-mute);font-size:13px;margin-top:10px}
.ls-score{position:absolute;left:-22px;bottom:34px;background:var(--ls-ground);border:1px solid var(--ls-green);
  border-radius:14px;padding:12px 16px;box-shadow:0 14px 30px rgba(0,0,0,.5)}
.ls-score b{display:block;font-family:"Black Han Sans",sans-serif;font-size:40px;line-height:1;color:var(--ls-green)}
.ls-score span{font-size:13px;color:var(--ls-mute)}

/* ---------- sections ---------- */
section{padding:48px 0;border-bottom:1px solid rgba(38,43,53,.7)}
section[id]{scroll-margin-top:72px}
.ls-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.ls-head .ls-idx{font:600 14px "IBM Plex Mono",monospace;color:var(--ls-lilac)}
.ls-head h2{margin:0}
.ls-head p{flex-basis:100%;color:var(--ls-mute);margin:4px 0 0;font-size:15px}
.ls-prose{margin:0 0 24px}
.ls-prose p:last-child{margin-bottom:0}
h3:not(:first-child){margin-top:28px}
.ls-board,.ls-grid,.ls-shelf,.ls-tab,.ls-chips,.ls-marks,.ls-steps,.ls-odds,.ls-checks,.ls-two{margin:0 0 24px}

/* ---------- numbered board, 2x2 lead tile ---------- */
.ls-board{display:grid;gap:14px;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense}
.ls-board .ls-tile:first-child{grid-column:span 2;grid-row:span 2}
.ls-board .ls-tile:first-child .ls-tile-b b{font-size:17px}
.ls-tile{position:relative;display:flex;flex-direction:column;background:var(--ls-card);
  border:1px solid var(--ls-line);border-radius:14px;overflow:hidden;text-decoration:none;
  color:var(--ls-cream);transition:transform .18s,border-color .18s}
/* Every cover keeps 3:4 whatever its caption does: with a flexible image a two-line name shrank the
   picture, and one row showed four different cover heights. Only the 2x2 lead tile stretches, to
   fill the two rows it spans. */
.ls-tile img{aspect-ratio:3/4;object-fit:cover;width:100%;flex:none}
.ls-board .ls-tile:first-child img{flex:1 1 auto;min-height:0}
.ls-tile:hover{transform:translateY(-4px);border-color:var(--ls-green)}
.ls-tile-b{display:block;padding:10px 12px 12px}
.ls-tile-b b{display:block;font-size:14px;line-height:1.35;font-weight:700}
.ls-tile-b i{display:block;font-style:normal;color:var(--ls-mute);font-size:12.5px;margin-top:3px}
.ls-num{position:absolute;top:10px;left:10px;z-index:1;background:rgba(8,9,11,.86);color:var(--ls-green);
  font:600 13px/1 "IBM Plex Mono",monospace;padding:6px 8px;border-radius:8px;border:1px solid #2a3a30}
@media(prefers-reduced-motion:reduce){.ls-tile{transition:none}.ls-tile:hover{transform:none}}
.ls-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.ls-grid--6{grid-template-columns:repeat(6,1fr)}
.ls-grid--3{grid-template-columns:repeat(3,1fr)}
/* the shelf: one row that scrolls sideways, snapping tile by tile */
.ls-shelf{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:var(--ls-line) transparent}
.ls-shelf .ls-tile{scroll-snap-align:start}

/* ---------- article + sticky right column ---------- */
.ls-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.ls-aside{position:sticky;top:84px;padding:48px 0}
.ls-side{background:var(--ls-card);border:1px solid var(--ls-line);border-radius:16px;padding:18px;margin:0 0 16px}
.ls-side .ls-offerfig{font-size:24px}
.ls-toc{list-style:none;counter-reset:t;margin:0;padding:0}
.ls-toc li{counter-increment:t}
.ls-toc a{display:flex;gap:10px;padding:8px 6px;border-radius:8px;color:var(--ls-cream);text-decoration:none;
  font-size:14.5px}
.ls-toc a::before{content:counter(t,decimal-leading-zero);font:600 13px/1.9 "IBM Plex Mono",monospace;
  color:var(--ls-lilac)}
.ls-toc a:hover{background:#1c1f27;color:var(--ls-green)}
.ls-side-t{font:600 12px "IBM Plex Mono",monospace;color:var(--ls-mute);margin:0 0 18px;letter-spacing:.6px}

/* ---------- live: the brief's MAIN block, a full violet band ---------- */
#live{border:0;padding:0;margin:36px 0 0}
.ls-band{background:linear-gradient(155deg,#2a1466 0%,#170b3a 55%,#0f0a24 100%);border:1px solid #3b2380;
  border-radius:22px;padding:34px 30px 30px;box-shadow:0 24px 50px rgba(20,8,60,.45)}
.ls-band .ls-head .ls-idx{color:#d6c8ff}
.ls-band .ls-head p{color:#cfc6ec}
.ls-band .ls-tile{background:#1b1240;border-color:#3b2a78}
.ls-band .ls-tile-b i{color:#c9bfe8}
.ls-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0}
.ls-odds li{background:rgba(8,9,11,.45);border:1px solid #3b2a78;border-radius:14px;padding:16px 18px}
.ls-odds b{display:block;font-family:"Black Han Sans",sans-serif;font-size:30px;color:var(--ls-green);line-height:1.1}
.ls-odds span{display:block;font-weight:700;margin:4px 0 2px}
.ls-odds i{font-style:normal;color:#cfc6ec;font-size:14px}

/* ---------- boxes, tables, chips ---------- */
.ls-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ls-box{background:var(--ls-card);border:1px solid var(--ls-line);border-radius:14px;padding:18px 20px}
.ls-box h3{margin-bottom:10px;font-size:19px;color:var(--ls-green)}
.ls-box p:last-child{margin-bottom:0}
.ls-tab{width:100%;border-collapse:separate;border-spacing:0;background:var(--ls-card);
  border:1px solid var(--ls-line);border-radius:14px;overflow:hidden}
.ls-tab caption{caption-side:top;text-align:left;color:var(--ls-mute);font-size:14px;padding:0 0 10px}
.ls-tab th,.ls-tab td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ls-line);
  font-size:15px;vertical-align:top}
.ls-tab thead th{background:#1b1f27;color:var(--ls-mute);font-weight:500;font-size:13.5px}
.ls-tab tbody th{width:34%;color:var(--ls-mute);font-weight:500}
.ls-tab tr:last-child th,.ls-tab tr:last-child td{border-bottom:0}
.ls-tab tbody tr:first-child td:first-child b{color:var(--ls-green)}
.ls-scroll{overflow-x:auto;margin:0 0 24px}
.ls-scroll .ls-tab{margin:0;min-width:560px}
.ls-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0}
.ls-chips li{background:#12151b;border:1px solid var(--ls-line);border-radius:10px;padding:9px 14px;
  font-size:14.5px;font-weight:500}
.ls-marks{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;align-items:stretch}
.ls-marks li{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 14px;
  background:#1b1f27;border:1px solid var(--ls-line);font-size:14px;font-weight:500}
.ls-marks li.ls-chip--light{background:var(--ls-cream);color:#14171d;border-color:var(--ls-cream)}
.ls-marks li.ls-bank{background:var(--ls-green);color:var(--ls-green-ink);border-color:var(--ls-green);font-weight:700}
.ls-marks img{height:26px;width:auto}
.ls-steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ls-steps li{counter-increment:s;background:var(--ls-card);border:1px solid var(--ls-line);border-radius:14px;
  padding:18px}
.ls-steps li::before{content:counter(s,decimal-leading-zero);display:block;margin:0 0 8px;
  font:600 26px/1 "IBM Plex Mono",monospace;color:var(--ls-green)}
.ls-steps b{display:block;margin-bottom:4px;font-size:17px}
.ls-checks{list-style:none;padding:0;display:grid;gap:10px}
.ls-checks li{display:grid;grid-template-columns:28px 1fr;gap:10px;background:var(--ls-card);
  border:1px solid var(--ls-line);border-radius:12px;padding:14px 16px}
.ls-checks li::before{content:"✓";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(0,201,104,.14);color:var(--ls-green);font-weight:700}
.ls-checks b{display:block}
.ls-provs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 24px}
.ls-provs li{border:1px dashed #3a4150;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500}

/* ---------- offer cards (skill rule 15) ---------- */
.ls-offercard{background:linear-gradient(150deg,#161d1a,#10131a);border:1px solid var(--ls-line);
  border-left:4px solid var(--ls-green);border-radius:16px;padding:20px 22px;margin:0 0 24px}
.ls-offercard--spot{border:1px solid var(--ls-green);
  background:linear-gradient(150deg,rgba(0,201,104,.16),rgba(135,71,254,.16)),var(--ls-deep)}
.ls-badge{display:inline-block;margin:0 0 12px;padding:4px 10px;border-radius:999px;background:var(--ls-violet);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.4px}
.ls-offercard p{margin:0 0 14px}
.ls-offerfig{font-family:"Black Han Sans",sans-serif;font-size:clamp(22px,2.8vw,30px);color:var(--ls-green);
  margin:0 0 8px;line-height:1.2}
.ls-btn{display:inline-block;background:var(--ls-green);color:var(--ls-green-ink);text-decoration:none;
  font-weight:700;font-size:16px;padding:14px 26px;border-radius:12px;border:0;
  box-shadow:0 10px 24px rgba(0,201,104,.22)}
.ls-btn:hover{background:#2be389}
.ls-btn--wide{display:block;text-align:center;width:100%}
.ls-btn--ghost{background:transparent;color:var(--ls-cream);border:1px solid #3a4150;box-shadow:none;
  padding:13px 24px}
.ls-btn--ghost:hover{background:#1c1f27;border-color:var(--ls-lilac)}
.ls-prose .ls-btn,.ls-offercard .ls-btn,.ls-side .ls-btn{color:var(--ls-green-ink)}

/* ---------- FAQ ---------- */
.ls-q{background:var(--ls-card);border:1px solid var(--ls-line);border-radius:12px;margin:0 0 12px;overflow:hidden}
.ls-q summary{cursor:pointer;padding:15px 18px;font-weight:700;list-style:none;display:flex;gap:12px}
.ls-q summary::-webkit-details-marker{display:none}
.ls-q summary::after{content:"+";margin-left:auto;color:var(--ls-green);font-weight:700}
.ls-q[open] summary::after{content:"–"}
.ls-q div{padding:0 18px 16px}
.ls-q div p{margin:0}
.ls-q:last-of-type{margin-bottom:24px}

/* ---------- footer ---------- */
.ls-foot{background:#060708;border-top:1px solid var(--ls-line);padding:32px 0 36px;color:var(--ls-mute);font-size:14px}
.ls-foot a{color:var(--ls-green)}
.ls-foot ul{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0 0 20px;padding:0}
.ls-foot .ls-badges{gap:14px;align-items:center}
.ls-badges img{height:26px;width:auto}
.ls-foot b{color:var(--ls-cream)}

/* ---------- sticky offer: a bar on wide screens, a dock with a raised CTA on phones ----------
   Both are ONE row. A wrapped two-line bar put the button in its lowest strip, exactly where a bottom
   browser toolbar sits until a scroll collapses it (casinacho-no, 2026-09-24). */
.ls-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;
  gap:16px;padding:10px 16px;background:rgba(15,17,21,.97);border-top:1px solid var(--ls-green)}
.ls-bar span{font-weight:700}
.ls-bar .ls-btn{padding:11px 22px}
.ls-dock{display:none}
body:has(.ls-bar){padding-bottom:72px}
@media(max-width:899px){
  .ls-bar{display:none}
  .ls-dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;
    grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:end;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(15,17,21,.97);
    border-top:1px solid var(--ls-line)}
  .ls-dock a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ls-cream);
    text-decoration:none;font-size:12px;font-weight:500;padding:6px 2px}
  .ls-dock a i{font-style:normal;font:600 12px/1 "IBM Plex Mono",monospace;color:var(--ls-lilac)}
  /* the raised CTA: lifted above the dock's top edge, never below it. A transform, not a negative
     margin — the dock aligns its items to the END, so a negative top margin only made the button
     taller in place (measured: top == dock top + 1). */
  .ls-dock .ls-btn{margin:0 6px;transform:translateY(-18px);padding:14px 16px;border-radius:16px;font-size:14.5px;
    color:var(--ls-green-ink);box-shadow:0 8px 20px rgba(0,201,104,.35),0 0 0 4px var(--ls-ground)}
  body:has(.ls-bar){padding-bottom:84px}
}

/* ---------- pages without an offer (rule 15) ---------- */
.ls-rg .ls-bar,.ls-rg .ls-dock,.ls-rg .ls-top .ls-btn{display:none!important}
body.ls-rg{padding-bottom:0}

@media(max-width:1180px){
  /* minmax(0,1fr), not 1fr: a bare 1fr has a min-content floor, and the seven-tile shelf pushed the
     column to 1150px on a phone — the browser then zoomed the whole page out and the dock fell off
     the bottom of the screen (measured: innerHeight 2489 at a 390x844 viewport). */
  .ls-layout{grid-template-columns:minmax(0,1fr)}
  .ls-aside{display:none}
  .ls-nav{display:none}
}
@media(max-width:1020px){
  .ls-stage-in{grid-template-columns:1fr;gap:30px}
  .ls-score{left:12px;bottom:46px}
  .ls-board{grid-template-columns:repeat(4,1fr)}
  .ls-grid--6{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .ls-board{grid-template-columns:repeat(2,1fr)}
  .ls-grid,.ls-grid--6{grid-template-columns:repeat(2,1fr)}
  .ls-grid--3{grid-template-columns:repeat(3,1fr)}
  .ls-two,.ls-odds,.ls-steps{grid-template-columns:1fr}
  .ls-band{padding:26px 16px 20px;border-radius:18px}
  .ls-tab tbody th{width:40%}
  .ls-top .ls-btn{padding:10px 14px;font-size:14px}
  .ls-logo img{height:30px}
}
@media(max-width:420px){
  .ls-grid--3{grid-template-columns:repeat(2,1fr)}
}