/* ONYX · 오닉스 — 오프라인 매장 샘플 (데모) */
:root{
  --font-body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-sec:var(--font-body);
  --font-eng:"Montserrat",var(--font-body);
  --page:#0c0c0f;
  --glow:radial-gradient(circle at 50% 0%,rgba(255,255,255,.05),transparent 38%);
  --header:#08080a;
  --footer:#060608;
  --card:#161619;
  --card-2:#1d1d22;
  --card-soft:rgba(255,255,255,.04);
  --card-grad:linear-gradient(135deg,rgba(22,22,25,.96),rgba(29,29,34,.96)),#161619;
  --well:rgba(6,6,8,.5);
  --well-grad:linear-gradient(135deg,rgba(12,12,15,.74),rgba(6,6,8,.66)),#121215;
  --modal:#121215;
  --modal-body:radial-gradient(ellipse 80% 42% at 50% -14%,rgba(207,212,220,.08),transparent 62%),linear-gradient(180deg,rgba(29,29,34,.5),rgba(0,0,0,0) 210px),#121215;
  --input:#0c0c0f;
  --toast:#1d1d22;
  --line-1:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.08);
  --line-3:rgba(255,255,255,.12);
  --ctl:rgba(255,255,255,.08);
  --ctl-2:rgba(255,255,255,.12);
  --ctl-soft:rgba(255,255,255,.04);
  --ctl-soft2:rgba(255,255,255,.06);
  --nav-on:#fff;
  --nav-off:rgba(255,255,255,.45);
  --text:#fff;
  --text-2:rgba(255,255,255,.8);
  --text-3:rgba(255,255,255,.7);
  --muted:rgba(255,255,255,.5);
  --muted-2:rgba(255,255,255,.6);
  --dim:rgba(255,255,255,.3);
  --dim-2:rgba(255,255,255,.4);
  --dim-3:rgba(255,255,255,.25);
  --accent:#cfd4dc;
  --accent-2:#ffffff;
  --accent-fg:#0c0c0f;
  --accent-muted:rgba(207,212,220,.10);
  --accent-line:rgba(207,212,220,.26);
  --accent-wash:rgba(255,255,255,.06);
  --cta:linear-gradient(90deg,#cfd4dc,#ffffff);
  --cta-fg:#0c0c0f;
  --money:#cfd4dc;
  --win:#a7f3d0;
  --danger:#ef4444;
  --danger-2:#f87171;
  --hero-shade:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.3) 50%,transparent),linear-gradient(90deg,rgba(207,212,220,.07),transparent 33%);
  --r-hero:2px;
  --r-card:2px;
}
body{background:var(--page)}
.gx-header{border-bottom:1px solid rgba(255,255,255,.1)}
.gx-hero{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.gx-sec-h h2{font-weight:300;letter-spacing:5px}
.gx-tile,.gx-card{border:1px solid rgba(255,255,255,.08)}
.gx-tile:hover,.gx-card:hover{border-color:rgba(255,255,255,.28)}
.gx-cta{background:#fff;color:#0c0c0f;font-weight:700}
.gx-nav .links a.on{border-bottom:1px solid #fff;padding-bottom:2px}

/* ===== 레이아웃 D : 화면을 꽉 채우고 격자를 촘촘히 ===== */
.gx-main{max-width:none;padding:76px 28px 96px}
.gx-hero{height:calc(100vh - 210px);min-height:360px;max-height:620px;border-radius:0;margin:0 -28px}
.gx-rail{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);grid-auto-columns:unset;overflow:visible;gap:8px}
.gx-rail.wide{grid-template-columns:repeat(4,1fr)}
.gx-sec{margin-top:46px}
.gx-sec-h{padding:0}
.gx-sec-h .arrows{display:none}
@media (max-width:1200px){.gx-rail{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.gx-main{padding:80px 14px 96px}.gx-hero{height:300px;margin:0 -14px}
  .gx-rail{grid-template-columns:repeat(2,1fr)}}