@layer reset, base, util, comp, motion;

/* fonts ------------------------------------------------------------ */
@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/Pretendard-Regular.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/Pretendard-Medium.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/Pretendard-SemiBold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/Pretendard-Bold.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:900;font-style:normal;font-display:swap;src:url(../fonts/Pretendard-Black.woff2) format("woff2")}
@font-face{font-family:"Black Han Sans";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/BlackHanSans-400.woff2) format("woff2")}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body,h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
  ul[class],ol[class]{list-style:none;padding:0}
  a{color:inherit;text-decoration:none}
  img,svg,picture{display:block;max-width:100%}
  button,input,select,textarea{font:inherit;color:inherit}
  button{border:0;background:none;cursor:pointer}
  :focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  table{border-collapse:collapse;width:100%}
}

@layer base{
  :root{
    --red:#ff2e3f;--ink:#16181d;--yellow:#ffd21e;--blue:#2ea6ff;--lime:#8bff3c;--paper:#f5f6f8;
    --asphalt:#1c1f26;--asphalt-2:#23262f;--line:#2f333d;--mut:#a7adba;--mut-2:#c9cdd6;
    --card:#20232b;--edge:rgba(255,255,255,.09);--red-ink:#e01120;
    --shadow:0 18px 44px -20px rgba(0,0,0,.7);
    --wrap:1200px;--rad:16px;--rad-s:10px;
    --disp:"Black Han Sans",Pretendard,system-ui,sans-serif;
    --sans:Pretendard,system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
    --spd:cubic-bezier(.2,.7,.2,1);
    --tier:var(--yellow);
  }
  html{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:16px;line-height:1.6;
    -webkit-font-smoothing:antialiased;letter-spacing:-.01em}
  body{min-height:100dvh;overflow-x:hidden}
  ::selection{background:var(--red);color:#fff}
  h1,h2,h3{line-height:1.05;letter-spacing:-.02em}
}

/* ===== utilities (hand-written scale) ===== */
@layer util{
  /* layout */
  .wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
  .wrap-n{width:min(100% - 40px,940px);margin-inline:auto}
  .flex{display:flex}.grid{display:grid}.iflex{display:inline-flex}
  .col{flex-direction:column}.wrap-f{flex-wrap:wrap}
  .ai-c{align-items:center}.ai-s{align-items:flex-start}.ai-e{align-items:flex-end}
  .jc-c{justify-content:center}.jc-b{justify-content:space-between}.jc-e{justify-content:flex-end}
  .g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}.g40{gap:40px}
  .grow{flex:1}.shrink0{flex-shrink:0}
  .rel{position:relative}.abs{position:absolute}
  .block{display:block}.inline{display:inline}.hidden{display:none}
  /* spacing */
  .mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt20{margin-top:20px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt48{margin-top:48px}
  .mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}.mb32{margin-bottom:32px}.mb40{margin-bottom:40px}
  .p12{padding:12px}.p16{padding:16px}.p20{padding:20px}.p24{padding:24px}.p32{padding:32px}
  .sect{padding-block:clamp(56px,9vw,104px)}
  .sect-s{padding-block:clamp(40px,6vw,68px)}
  /* type scale */
  .disp{font-family:var(--disp);font-weight:400;font-style:normal;letter-spacing:.01em;line-height:.98}
  .ital{transform:skewX(-7deg);transform-origin:left}
  .t-hero{font-family:var(--disp);font-size:clamp(2.9rem,9vw,6.2rem);line-height:.92}
  .t-xxl{font-family:var(--disp);font-size:clamp(2.1rem,5.6vw,3.7rem);line-height:.98}
  .t-xl{font-family:var(--disp);font-size:clamp(1.7rem,4vw,2.6rem)}
  .t-lg{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
  .t-md{font-size:1.12rem;font-weight:700}
  .t-sm{font-size:.94rem}.t-xs{font-size:.82rem}.t-2xs{font-size:.72rem}
  .lead{font-size:clamp(1.02rem,1.7vw,1.22rem);color:var(--mut-2);line-height:1.62}
  .fw9{font-weight:900}.fw8{font-weight:800}.fw7{font-weight:700}.fw6{font-weight:600}.fw5{font-weight:500}
  .up{text-transform:uppercase;letter-spacing:.14em}
  .center{text-align:center}.right{text-align:right}
  .nowrap{white-space:nowrap}
  .lh1{line-height:1.05}.lh12{line-height:1.2}
  /* color */
  .c-red{color:var(--red)}.c-yel{color:var(--yellow)}.c-blue{color:var(--blue)}.c-lime{color:var(--lime)}
  .c-mut{color:var(--mut)}.c-mut2{color:var(--mut-2)}.c-ink{color:var(--ink)}.c-paper{color:var(--paper)}
  .bg-ink{background:var(--ink)}.bg-asph{background:var(--asphalt)}.bg-card{background:var(--card)}
  .bg-red{background:var(--red)}.bg-yel{background:var(--yellow)}.bg-paper{background:var(--paper)}
  /* shape */
  .rad{border-radius:var(--rad)}.rad-s{border-radius:var(--rad-s)}.rad-l{border-radius:22px}.pill{border-radius:999px}
  .bd{border:1px solid var(--edge)}.bd-line{border:1px solid var(--line)}
  .ov-hid{overflow:hidden}.shadow{box-shadow:var(--shadow)}
  .w100{width:100%}.mw-none{max-width:none}
  .op7{opacity:.7}.op5{opacity:.5}
  /* grids */
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
  .auto-fit{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .ico{width:1.25em;height:1.25em;fill:none;flex-shrink:0}
  .ico-s{width:18px;height:18px}.ico-m{width:22px;height:22px}.ico-l{width:30px;height:30px}
}

/* ===== components ===== */
@layer comp{
  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1rem;
    padding:14px 26px;border-radius:12px;transition:transform .16s var(--spd),background .16s,box-shadow .16s;
    line-height:1;white-space:nowrap}
  .btn:active{transform:translateY(1px)}
  .btn-red{background:var(--red);color:#fff;box-shadow:0 12px 24px -12px var(--red)}
  .btn-red:hover{background:#ff4655;transform:translateY(-2px)}
  .btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 12px 24px -12px var(--lime)}
  .btn-lime:hover{filter:brightness(1.05);transform:translateY(-2px)}
  .btn-ghost{background:rgba(255,255,255,.06);color:var(--paper);border:1px solid var(--edge)}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}
  .btn-ink{background:var(--ink);color:#fff}
  .btn-lg{padding:17px 34px;font-size:1.08rem}
  .btn-sm{padding:10px 18px;font-size:.9rem}

  .tag{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:.74rem;
    letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
    background:rgba(255,46,63,.14);color:#ff6b76;border:1px solid rgba(255,46,63,.3)}
  .tag-y{background:rgba(255,210,30,.16);color:var(--yellow);border-color:rgba(255,210,30,.32)}
  .tag-b{background:rgba(46,166,255,.16);color:var(--blue);border-color:rgba(46,166,255,.32)}
  .tag-l{background:rgba(139,255,60,.15);color:var(--lime);border-color:rgba(139,255,60,.3)}

  .card{background:var(--card);border:1px solid var(--edge);border-radius:var(--rad);padding:26px}
  .card-flat{background:var(--asphalt);border:1px solid var(--line);border-radius:var(--rad)}

  .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
    background:rgba(255,255,255,.05);border:1px solid var(--edge);font-size:.8rem;font-weight:600;color:var(--mut-2)}

  /* header */
  .hdr{position:sticky;top:0;z-index:60;transition:background .25s,border-color .25s,backdrop-filter .25s}
  .hdr[data-stuck="1"]{background:rgba(16,18,22,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .hdr-in{display:flex;align-items:center;gap:22px;height:66px}
  .nav-link{font-weight:700;font-size:.96rem;color:var(--mut-2);padding:8px 4px;position:relative;transition:color .15s}
  .nav-link:hover,.nav-link[aria-current="page"]{color:var(--paper)}
  .nav-link[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
    background:var(--red);border-radius:3px;transform:skewX(-12deg)}

  .burger{display:none}
  .drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
  .drawer[data-open="1"]{visibility:visible}
  .drawer-scrim{position:absolute;inset:0;background:rgba(6,7,9,.66);opacity:0;transition:opacity .25s}
  .drawer[data-open="1"] .drawer-scrim{opacity:1}
  .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);
    background:var(--asphalt);border-left:1px solid var(--line);padding:22px;
    transform:translateX(102%);transition:transform .3s var(--spd);display:flex;flex-direction:column;gap:6px}
  .drawer[data-open="1"] .drawer-panel{transform:none}
  .drawer-link{padding:15px 12px;border-radius:12px;font-weight:800;font-size:1.12rem;display:flex;
    align-items:center;justify-content:space-between}
  .drawer-link:hover{background:rgba(255,255,255,.06)}

  /* speed-line strip */
  .speedstrip{height:6px;background:repeating-linear-gradient(115deg,var(--red) 0 26px,var(--ink) 26px 34px,var(--yellow) 34px 60px,var(--ink) 60px 68px)}

  /* store badges */
  .badge{display:block;height:54px;transition:transform .16s var(--spd),filter .16s}
  .badge:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .badge img{height:100%;width:auto}

  /* stars */
  .stars{display:inline-flex;gap:2px;color:var(--yellow)}
  .stars svg{width:17px;height:17px}

  /* track gallery (horizontal snap) */
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,340px);gap:18px;
    overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 20px;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .rail::-webkit-scrollbar{height:8px}
  .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
  .rail>*{scroll-snap-align:start}
  .rail-lg{grid-auto-columns:min(88vw,560px)}
  .track-card{position:relative;border-radius:var(--rad);overflow:hidden;border:1px solid var(--edge);
    background:var(--asphalt);display:flex;flex-direction:column;min-height:320px}
  .track-card img{width:100%;height:200px;object-fit:cover}
  .track-card .body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
  .difbar{display:flex;gap:4px}
  .difbar i{width:22px;height:6px;border-radius:3px;background:var(--line)}
  .difbar i[data-on]{background:var(--red)}

  /* tabs */
  .tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:2px}
  .tab{padding:11px 18px;font-weight:800;color:var(--mut);border-radius:10px 10px 0 0;position:relative}
  .tab[aria-selected="true"]{color:var(--paper)}
  .tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-3px;height:3px;background:var(--yellow);border-radius:3px}
  .tabpanel[hidden]{display:none}

  /* phone frame */
  .phone{position:relative;width:100%;max-width:300px;margin-inline:auto;border-radius:36px;
    border:9px solid #0c0d10;background:#0c0d10;box-shadow:var(--shadow),0 0 0 1px var(--line)}
  .phone img{border-radius:27px;width:100%;display:block}
  .phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);
    width:52px;height:6px;border-radius:6px;background:#26282f;z-index:2}

  /* leaderboard */
  .board tr{border-bottom:1px solid var(--line)}
  .board th{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);
    text-align:left;padding:10px 12px;font-weight:800}
  .board td{padding:13px 12px;font-weight:600}
  .board tbody tr:hover{background:rgba(255,255,255,.03)}
  .rankno{font-family:var(--disp);font-size:1.3rem;width:34px;display:inline-block}
  .r1{color:var(--yellow)}.r2{color:#cfd4de}.r3{color:#e0894a}

  .tier-card{background:var(--asphalt);border:1px solid var(--line);border-radius:var(--rad);
    padding:20px;text-align:center;position:relative;overflow:hidden}
  .tier-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--tier)}

  .stat{font-family:var(--disp);font-size:clamp(2rem,4.5vw,3rem);color:var(--paper);line-height:1}

  /* live pill */
  .live{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
    background:rgba(139,255,60,.1);border:1px solid rgba(139,255,60,.32);font-weight:700;font-size:.9rem}
  .live .dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(139,255,60,.6);animation:pulse 1.8s infinite}

  /* forms */
  .field{display:flex;flex-direction:column;gap:7px}
  .field label{font-weight:700;font-size:.9rem}
  .inp{background:var(--ink);border:1px solid var(--line);border-radius:11px;padding:14px 15px;
    color:var(--paper);width:100%;transition:border-color .15s}
  .inp:focus{border-color:var(--blue);outline:none}
  .inp::placeholder{color:#6b7180}
  .radio-row{display:flex;gap:10px;flex-wrap:wrap}
  .radio-chip{position:relative}
  .radio-chip input{position:absolute;opacity:0}
  .radio-chip span{display:inline-flex;padding:10px 16px;border-radius:999px;border:1px solid var(--line);
    font-weight:700;font-size:.9rem;transition:.15s}
  .radio-chip input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
  .radio-chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
  .form-ok{display:none;padding:22px;border-radius:14px;background:rgba(139,255,60,.1);
    border:1px solid rgba(139,255,60,.3);text-align:center}
  .form-ok[data-show="1"]{display:block}
  form[data-done="1"] .form-fields{display:none}

  /* modal */
  .modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px}
  .modal[data-open="1"]{display:grid}
  .modal-scrim{position:absolute;inset:0;background:rgba(6,7,9,.72);backdrop-filter:blur(3px)}
  .modal-box{position:relative;background:var(--asphalt);border:1px solid var(--line);border-radius:18px;
    max-width:720px;width:100%;max-height:86vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
  .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}
  .modal-body{padding:22px 24px;overflow-y:auto;font-size:.92rem;color:var(--mut-2);line-height:1.72}
  .modal-body h3{color:var(--paper);font-size:1.02rem;margin:22px 0 8px}
  .modal-body h3:first-child{margin-top:0}
  .modal-body p{margin:0 0 10px}
  .modal-body ul{margin:0 0 12px;padding-left:18px;list-style:disc}
  .modal-body li{margin-bottom:5px}
  .x-btn{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--mut-2)}
  .x-btn:hover{background:rgba(255,255,255,.12);color:#fff}
  body.no-scroll{overflow:hidden}

  /* footer */
  .foot{background:#0e1013;border-top:1px solid var(--line);padding-block:52px 30px}
  .foot a:hover{color:var(--paper)}
  .soc{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
    background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--mut-2)}
  .soc:hover{background:var(--red);color:#fff;border-color:var(--red)}

  .skip{position:absolute;left:12px;top:-60px;background:var(--red);color:#fff;padding:11px 18px;border-radius:10px;
    font-weight:800;z-index:200;transition:top .18s}
  .skip:focus{top:12px}

  /* hero */
  .hero{position:relative;min-height:clamp(560px,88vh,860px);display:flex;align-items:flex-end;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:-2}
  .hero-bg img{width:100%;height:100%;object-fit:cover}
  .hero-veil{position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(16,18,22,.55) 0%,rgba(16,18,22,.2) 40%,rgba(16,18,22,.92) 100%),
    linear-gradient(90deg,rgba(16,18,22,.7),transparent 62%)}
  .speedlines{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.4;
    background:repeating-linear-gradient(100deg,transparent 0 60px,rgba(255,255,255,.05) 60px 62px)}

  .qr-badge{background:var(--paper);padding:9px;border-radius:14px;width:104px;height:104px}
  .qr-badge img{width:100%;height:100%}

  .kv{display:flex;flex-direction:column;gap:3px}
  .kv dt{font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
  .kv dd{margin:0;font-weight:700}

  .item-tile{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;
    background:var(--asphalt);border:1px solid var(--line)}
  .item-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;color:var(--ink)}

  .marq{overflow:hidden;border-block:1px solid var(--line);background:var(--asphalt);padding:14px 0}
  .marq-track{display:flex;gap:44px;width:max-content;font-family:var(--disp);font-size:1.5rem;color:var(--mut);white-space:nowrap;align-items:center}
}

/* ===== motion (scroll-driven + keyframes) ===== */
@layer motion{
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(139,255,60,.55)}70%{box-shadow:0 0 0 10px rgba(139,255,60,0)}100%{box-shadow:0 0 0 0 rgba(139,255,60,0)}}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  .marq-track{animation:scrollx 22s linear infinite}

  /* reveal on scroll via view() timeline */
  .reveal{opacity:0;transform:translateY(26px)}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
  }
  /* JS fallback flips these on */
  .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--spd),transform .6s var(--spd)}

  /* hero parallax drift on scroll */
  @supports (animation-timeline:scroll()){
    @keyframes drift{to{transform:translateY(11%) scale(1.08)}}
    @keyframes fade-out{to{opacity:.15}}
    .hero-bg img{animation:drift linear both;animation-timeline:scroll(root);animation-range:0 78vh;transform-origin:center}
    .speedlines{animation:fade-out linear both;animation-timeline:scroll(root);animation-range:0 60vh}
  }
  /* scroll progress bar under header */
  @supports (animation-timeline:scroll()){
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .progress{transform-origin:left;animation:grow linear both;animation-timeline:scroll(root)}
  }
}

/* ===== responsive ===== */
@media (max-width:960px){
  .cols-4{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
  .lap-hide{display:none}
  .burger{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:11px;
    background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--paper)}
  .nav-desk{display:none}
}
@media (max-width:640px){
  .cols-2,.cols-4,.cols-3{grid-template-columns:1fr}
  .sm-col{flex-direction:column;align-items:stretch}
  .sm-col .btn{justify-content:center}
  .hero{min-height:auto;padding-top:40px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}