@layer reset, base, layout, components, utilities;

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

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  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{display:block;max-width:100%}
  button,input,textarea{font:inherit;color:inherit}
  button{cursor:pointer;border:0;background:none}
  :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
  [hidden]{display:none!important}
}

@layer base{
  :root{
    --teal:#12b3b0; --sky:#4fc3f7; --navy:#0e3a53; --sand:#f2e2c4;
    --coral:#ff7a59; --foam:#f3fbfb; --white:#fff;
    --ink:#0e3a53; --ink-soft:#3f6d80; --line:#d3ebee;
    --bg:#f3fbfb; --card:#ffffff; --focus:#0e3a53;
    --deep:#0a2c3f;
    --grad-water:linear-gradient(160deg,#12b3b0,#4fc3f7);
    --grad-deep:linear-gradient(165deg,#0e3a53,#0a2c3f);
    --shadow:0 14px 40px -18px rgba(14,58,83,.4);
    --shadow-sm:0 6px 18px -10px rgba(14,58,83,.45);
    --r:18px; --r-lg:28px;
    --wrap:1160px;
    /* fluid type scale */
    --fs-300:clamp(.82rem,.79rem + .15vw,.9rem);
    --fs-400:clamp(.95rem,.9rem + .25vw,1.05rem);
    --fs-500:clamp(1.1rem,1rem + .5vw,1.3rem);
    --fs-600:clamp(1.35rem,1.15rem + .9vw,1.9rem);
    --fs-700:clamp(1.8rem,1.4rem + 2vw,2.9rem);
    --fs-800:clamp(2.4rem,1.7rem + 3.4vw,4.4rem);
    --sp:clamp(3rem,2rem + 4vw,6rem);
  }
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    font-family:Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;
    font-size:var(--fs-400);line-height:1.7;color:var(--ink);
    background:var(--bg);
    background-image:radial-gradient(1200px 500px at 90% -8%,rgba(79,195,247,.14),transparent 60%),radial-gradient(900px 460px at -8% 5%,rgba(18,179,176,.12),transparent 55%);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{font-family:Jua,Pretendard,sans-serif;font-weight:400;line-height:1.18;letter-spacing:-.01em;color:var(--navy)}
  h2{font-size:var(--fs-700)}
  h3{font-size:var(--fs-500)}
  p{text-wrap:pretty}
  strong{font-weight:700}
  ::selection{background:var(--teal);color:#fff}
}

@layer layout{
  .wrap{width:min(var(--wrap),100% - 2.4rem);margin-inline:auto}
  .section{padding-block:var(--sp)}
  .stack>*+*{margin-top:1rem}
  .grid{display:grid;gap:1.2rem}
  .skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 12px 0}
  .skip:focus{left:0}
  .lead{color:var(--ink-soft);font-size:var(--fs-500);max-width:60ch}
  .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:Pretendard;font-weight:700;font-size:var(--fs-300);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
  .eyebrow svg{width:1.05em;height:1.05em}
}

@layer components{
  .ico{width:1.25em;height:1.25em;fill:none;stroke:currentColor;vertical-align:-.15em}
  .ico--fill{fill:currentColor;stroke:none}

  /* header */
  .site-head{position:sticky;top:0;z-index:100;background:rgba(243,251,251,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .site-head__in{display:flex;align-items:center;gap:1rem;min-height:64px}
  .brand{margin-right:auto}
  .brand svg{height:34px;width:auto}
  .nav{display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.6rem)}
  .nav a{font-weight:600;font-size:var(--fs-400);color:var(--ink-soft);padding:.4rem .1rem;border-bottom:2px solid transparent}
  .nav a:hover,.nav a[aria-current=page]{color:var(--navy);border-color:var(--teal)}
  .nav-cta{margin-left:.4rem}
  .menu-btn{display:none;color:var(--navy)}
  .menu-btn svg{width:28px;height:28px;stroke:currentColor;fill:none}
  @media(max-width:860px){
    .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--foam);border-bottom:1px solid var(--line);padding:.6rem 1.2rem 1.2rem;transform:translateY(-140%);transition:transform .28s ease;box-shadow:var(--shadow)}
    .nav[data-open=true]{transform:translateY(0)}
    .nav a{padding:.85rem .2rem;border-bottom:1px solid var(--line)}
    .nav-cta{margin:.8rem 0 0}
    .menu-btn{display:block}
  }
  @media (prefers-reduced-motion:reduce){.nav{transition:none}}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:var(--fs-400);padding:.8rem 1.4rem;border-radius:999px;transition:transform .16s ease,box-shadow .16s ease}
  .btn svg{width:1.2em;height:1.2em;stroke:currentColor;fill:none}
  .btn--primary{background:var(--grad-water);color:#fff;box-shadow:0 12px 26px -12px rgba(18,179,176,.8)}
  .btn--primary:hover{transform:translateY(-2px)}
  .btn--coral{background:var(--coral);color:#fff;box-shadow:0 12px 26px -12px rgba(255,122,89,.85)}
  .btn--coral:hover{transform:translateY(-2px)}
  .btn--ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line)}
  .btn--ghost:hover{border-color:var(--teal);color:var(--teal)}
  .btn--lg{padding:1rem 1.8rem;font-size:var(--fs-500)}
  @media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

  .badges{display:flex;flex-wrap:wrap;gap:.7rem}
  .badges a{transition:transform .16s ease}
  .badges a:hover{transform:translateY(-2px)}
  .badges svg{height:52px;width:auto}

  .rating{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:var(--navy)}
  .stars{display:inline-flex;color:var(--coral)}
  .stars svg{width:1.05em;height:1.05em;fill:currentColor}

  .pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(18,179,176,.1);color:var(--teal);font-weight:700;font-size:var(--fs-300);padding:.4rem .85rem;border-radius:999px}
  .pill svg{width:1.1em;height:1.1em}
  .pill--live{background:rgba(255,122,89,.12);color:#e2593a}
  .pill--live .dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;animation:pulse 1.8s ease infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
  @media (prefers-reduced-motion:reduce){.pill--live .dot{animation:none}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)}

  /* reveal (CSS-only, staggered) */
  .reveal{opacity:0;transform:translateY(18px);animation:rise .7s ease forwards;animation-timeline:view();animation-range:entry 0% cover 26%}
  @supports not (animation-timeline:view()){.reveal{opacity:1;transform:none;animation:none}}
  @keyframes rise{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}}

  /* hero — 레이어드 스테이지(2단 분할 아님): 키비주얼 위 카피 + 하단 플로팅 스토어 카드 */
  .hero{position:relative;padding-block:clamp(1.6rem,1rem + 3vw,3rem) clamp(3rem,2rem + 5vw,5.5rem)}
  .hero__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);min-height:clamp(420px,54vw,600px);display:flex;align-items:flex-start}
  .hero__stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center}
  .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,44,63,.15),rgba(10,44,63,.05) 40%,rgba(10,44,63,.75)),linear-gradient(90deg,rgba(10,44,63,.6),transparent 62%)}
  .hero__copy{position:relative;z-index:2;color:#fff;padding:clamp(1.4rem,4vw,3rem);max-width:36ch}
  .hero__copy .eyebrow{color:#bdeef0;background:rgba(255,255,255,.12);padding:.35rem .8rem;border-radius:999px}
  .hero h1{font-size:var(--fs-800);color:#fff;margin-top:1rem;text-shadow:0 2px 24px rgba(10,44,63,.4)}
  .hero h1 em{font-style:normal;color:#ffd9a1}
  .hero__sub{margin:1rem 0 1.3rem;font-size:var(--fs-500);color:rgba(255,255,255,.94);max-width:32ch}
  .hero__live{background:rgba(255,255,255,.15);color:#fff}
  .hero__live .dot{background:#8affc2}
  /* 플로팅 스토어 리스팅 카드 */
  .hero__card{position:relative;z-index:3;margin:-64px auto 0;width:min(920px,100% - 2.4rem);background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1.3rem clamp(1.2rem,3vw,2rem);display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem 1.8rem;align-items:center}
  .hero__badges .badges svg{height:50px}
  .hero__ratings{display:grid;gap:.5rem;border-inline:1px solid var(--line);padding-inline:1.8rem}
  .hero__ratings .n{font-family:Jua;font-size:1.8rem;color:var(--navy);line-height:1}
  .hero__ratings small{color:var(--ink-soft);font-size:.78rem}
  .hero__qr{text-align:center;width:104px;justify-self:end}
  .hero__qr svg{width:100%;border-radius:10px;border:1px solid var(--line)}
  .hero__qr span{display:block;font-size:.66rem;font-weight:700;color:var(--ink-soft);margin-top:.3rem}
  @media(max-width:820px){
    .hero__card{grid-template-columns:1fr;text-align:center;justify-items:center;gap:1rem}
    .hero__ratings{border:0;padding:0;border-top:1px solid var(--line);padding-top:1rem;justify-items:center}
    .hero__qr{justify-self:center}
  }

  /* dex / collection grid */
  .dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
  .fishcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .18s ease}
  .fishcard:hover{transform:translateY(-4px)}
  @media (prefers-reduced-motion:reduce){.fishcard:hover{transform:none}}
  .fishcard img{aspect-ratio:1;object-fit:cover;width:100%}
  .fishcard__body{padding:.7rem .8rem .85rem}
  .fishcard__name{font-family:Jua;font-size:1.05rem;color:var(--navy)}
  .fishcard__meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--ink-soft);margin-top:.15rem}
  .rar{font-weight:800;font-size:.72rem;letter-spacing:.04em;padding:.18em .5em;border-radius:6px;color:#fff}
  .fishcard[data-rar=common]{border-color:#a9c3ce}
  .fishcard[data-rar=common] .rar{background:#7e9aa6}
  .fishcard[data-rar=rare]{border-color:var(--sky)}
  .fishcard[data-rar=rare] .rar{background:var(--sky)}
  .fishcard[data-rar=epic]{border-color:#9a6cf0}
  .fishcard[data-rar=epic] .rar{background:#9a6cf0}
  .fishcard[data-rar=legend]{border-color:#f0a92e;box-shadow:0 0 0 1px #f0a92e,0 12px 26px -14px rgba(240,169,46,.7)}
  .fishcard[data-rar=legend] .rar{background:linear-gradient(90deg,#f0a92e,#ff7a59)}
  .fishcard--locked img{filter:grayscale(1) brightness(.7) contrast(.9)}
  .fishcard--locked::after{content:"";position:absolute;inset:0;background:rgba(14,58,83,.45)}
  .fishcard__lock{position:absolute;inset:0;display:grid;place-items:center;z-index:2;color:#fff}
  .fishcard__lock svg{width:34px;height:34px;stroke:currentColor;fill:none;opacity:.9}

  /* skill timing diagram */
  .skillflow{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:step}
  @media(max-width:760px){.skillflow{grid-template-columns:1fr 1fr}}
  .skillstep{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.1rem;box-shadow:var(--shadow-sm)}
  .skillstep::before{counter-increment:step;content:"0" counter(step);font-family:Jua;font-size:1.1rem;color:var(--teal)}
  .skillstep h3{margin:.3rem 0 .35rem}
  .skillstep .ico{width:2rem;height:2rem;color:var(--teal);margin-bottom:.5rem}
  .timing{margin-top:1.6rem}
  .timing__bar{position:relative;height:60px;border-radius:14px;background:linear-gradient(90deg,#e4f4f5,#d6eef9);overflow:hidden;border:1px solid var(--line)}
  .timing__zone{position:absolute;top:0;bottom:0;left:58%;width:16%;background:linear-gradient(180deg,rgba(18,179,176,.35),rgba(18,179,176,.55));border-inline:2px dashed var(--teal)}
  .timing__perfect{position:absolute;top:0;bottom:0;left:64%;width:4%;background:var(--coral);opacity:.85}
  .timing__marker{position:absolute;top:-6px;bottom:-6px;width:4px;border-radius:3px;background:var(--navy);left:10%;animation:sweep 3.4s cubic-bezier(.5,0,.5,1) infinite alternate}
  @keyframes sweep{to{left:88%}}
  @media (prefers-reduced-motion:reduce){.timing__marker{animation:none;left:65%}}
  .timing__labels{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft);margin-top:.5rem}
  .timing__labels b{color:var(--coral)}

  /* leaderboard */
  .board{overflow:hidden;border-radius:var(--r)}
  .board table{width:100%;border-collapse:collapse;background:var(--card)}
  .board th,.board td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line)}
  .board th{background:var(--grad-deep);color:#fff;font-family:Pretendard;font-weight:700;font-size:var(--fs-300)}
  .board td{font-size:var(--fs-400)}
  .board tr:last-child td{border-bottom:0}
  .board .rank{font-family:Jua;font-size:1.15rem;width:2.5rem;text-align:center}
  .board tr[data-top="1"] .rank{color:#e0a72b}
  .board tr[data-top="2"] .rank{color:#8fa9b4}
  .board tr[data-top="3"] .rank{color:#c98b57}
  .board .wt{font-weight:700;color:var(--teal);white-space:nowrap}
  .board .angler{display:flex;align-items:center;gap:.6rem}
  .board .av{width:32px;height:32px;border-radius:50%;background:var(--grad-water);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
  .board__bar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-top:.35rem;max-width:180px}
  .board__bar i{display:block;height:100%;background:var(--grad-water)}

  /* spots */
  .spotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
  .spot{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:230px;color:#fff;display:flex;align-items:flex-end;box-shadow:var(--shadow-sm)}
  .spot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .spot__body{position:relative;z-index:2;padding:1.2rem;background:linear-gradient(0deg,rgba(10,44,63,.92),rgba(10,44,63,.05))}
  .spot__body h3{color:#fff}
  .spot__body p{font-size:var(--fs-300);opacity:.92;margin-top:.25rem}
  .spot__tag{position:absolute;top:12px;left:12px;z-index:2}

  /* stat strip */
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;text-align:center}
  .stat b{display:block;font-family:Jua;font-size:var(--fs-700);color:var(--teal);line-height:1}
  .stat span{font-size:var(--fs-300);color:var(--ink-soft)}

  /* section head */
  .shead{max-width:60ch;margin-bottom:clamp(1.4rem,3vw,2.4rem)}
  .shead h2{margin:.5rem 0 .6rem}
  .shead--center{margin-inline:auto;text-align:center}

  /* filter (details based) */
  .dexfilter{margin-bottom:1.4rem}
  .dexfilter summary{list-style:none;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer}
  .dexfilter summary::-webkit-details-marker{display:none}
  .dexfilter summary svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none}
  .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
  .chips label{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-weight:600;font-size:var(--fs-300);cursor:pointer}
  .chips input{position:absolute;opacity:0;width:0;height:0}
  .chips label:has(input:checked){background:var(--navy);color:#fff;border-color:var(--navy)}
  .chips label:focus-within{outline:3px solid var(--focus);outline-offset:2px}
  /* CSS-only filtering */
  .dexroot:has(#f-all:checked) .fishcard{display:block}
  .dexroot:has(#f-common:checked) .fishcard:not([data-rar=common]){display:none}
  .dexroot:has(#f-rare:checked) .fishcard:not([data-rar=rare]){display:none}
  .dexroot:has(#f-epic:checked) .fishcard:not([data-rar=epic]){display:none}
  .dexroot:has(#f-legend:checked) .fishcard:not([data-rar=legend]){display:none}

  /* season calendar */
  .calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
  .season{border-radius:var(--r);padding:1.2rem;color:#fff;box-shadow:var(--shadow-sm)}
  .season--spring{background:linear-gradient(150deg,#57c785,#12b3b0)}
  .season--summer{background:linear-gradient(150deg,#12b3b0,#4fc3f7)}
  .season--autumn{background:linear-gradient(150deg,#ff9d5c,#ff7a59)}
  .season--winter{background:linear-gradient(150deg,#4f7fc3,#0e3a53)}
  .season h3{color:#fff}
  .season ul{margin-top:.6rem;font-size:var(--fs-300);display:grid;gap:.3rem}
  .season li{display:flex;align-items:center;gap:.4rem}
  .season li::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#fff;opacity:.85}

  /* FAQ */
  .faq{max-width:760px;margin-inline:auto;display:grid;gap:.7rem}
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.2rem 1.1rem}
  .faq summary{list-style:none;display:flex;align-items:center;gap:.8rem;padding:1rem 0;font-weight:700;color:var(--navy);cursor:pointer}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary svg{width:1.1em;height:1.1em;margin-left:auto;stroke:currentColor;fill:none;transition:transform .2s ease}
  .faq details[open] summary svg{transform:rotate(90deg)}
  .faq p{padding:0 0 1.1rem;color:var(--ink-soft)}
  @media (prefers-reduced-motion:reduce){.faq summary svg{transition:none}}

  /* panels / bands */
  .band{background:var(--grad-deep);color:#fff;border-radius:var(--r-lg)}
  .band h2,.band h3{color:#fff}
  .band .lead{color:rgba(255,255,255,.85)}
  .band-full{background:var(--grad-deep);color:#fff}
  .band-full h2{color:#fff}

  /* mockups row */
  .phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem;align-items:end}
  .phone{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #0e3a53;background:#0e3a53}
  .phone img{width:100%;aspect-ratio:9/17;object-fit:cover}
  .phone figcaption{background:#0e3a53;color:#dff2f5;text-align:center;font-size:.8rem;font-weight:600;padding:.5rem}

  /* CTA card */
  .cta-card{position:relative;overflow:hidden;text-align:center;padding:clamp(2.4rem,5vw,4rem) 1.4rem;border-radius:var(--r-lg);background:var(--grad-water);color:#fff}
  .cta-card h2{color:#fff}
  .cta-card p{max-width:48ch;margin:.8rem auto 1.6rem;color:rgba(255,255,255,.92)}
  .cta-card .btn--ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4)}

  /* footer */
  .site-foot{background:var(--deep);color:#bcd8e0;margin-top:var(--sp);padding-block:clamp(2.6rem,4vw,3.6rem) 2rem}
  .site-foot a:hover{color:#fff}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
  @media(max-width:720px){.foot-grid{grid-template-columns:1fr 1fr}}
  .site-foot h4{font-family:Pretendard;font-weight:700;color:#fff;font-size:var(--fs-300);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem}
  .site-foot ul{display:grid;gap:.55rem;font-size:var(--fs-400)}
  .foot-brand svg{height:32px;width:auto;margin-bottom:.9rem}
  .foot-brand p{font-size:var(--fs-300);max-width:34ch;opacity:.85}
  .foot-contact li{display:flex;align-items:center;gap:.55rem}
  .foot-contact svg{width:1.1em;height:1.1em;stroke:currentColor;fill:none;opacity:.7}
  .social{display:flex;gap:.6rem;margin-top:1rem}
  .social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center}
  .social a:hover{background:var(--teal)}
  .social svg{width:20px;height:20px}
  .foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;font-size:var(--fs-300);opacity:.8}
  .foot-legal button{color:#bcd8e0;text-decoration:underline;font-size:inherit}
  .foot-legal button:hover{color:#fff}
  .biz{width:100%;opacity:.6;font-size:.78rem;line-height:1.6}

  /* legal popover */
  .legal[popover]{margin:auto;width:min(720px,92vw);max-height:86vh;border:0;border-radius:var(--r-lg);padding:0;background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(10,44,63,.6);overflow:hidden}
  .legal::backdrop{background:rgba(10,44,63,.55);backdrop-filter:blur(3px)}
  .legal__head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;background:var(--grad-deep);color:#fff}
  .legal__head h2{color:#fff;font-size:var(--fs-500);margin-right:auto}
  .legal__close{color:#fff;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.14);display:grid;place-items:center}
  .legal__close:hover{background:rgba(255,255,255,.28)}
  .legal__close svg{width:20px;height:20px;stroke:currentColor;fill:none}
  .legal__body{padding:1.4rem 1.6rem 2rem;overflow-y:auto;max-height:calc(86vh - 64px)}
  .legal__body h3{font-family:Pretendard;font-weight:700;font-size:var(--fs-400);color:var(--navy);margin:1.4rem 0 .4rem}
  .legal__body h3:first-child{margin-top:0}
  .legal__body p,.legal__body li{font-size:var(--fs-300);color:var(--ink-soft);line-height:1.75}
  .legal__body ul{padding-left:1.1rem;list-style:disc;display:grid;gap:.25rem;margin:.3rem 0}
  .legal__body table{width:100%;border-collapse:collapse;margin:.5rem 0;font-size:.82rem}
  .legal__body th,.legal__body td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}
  /* fallback: no popover support -> behave as reachable block via :target */
  @supports not (selector(:popover-open)){
    .legal[popover]{display:none;position:fixed;inset:5vh 0;z-index:300}
    .legal[popover]:target{display:block}
  }

  /* pre-register form */
  .prereg{max-width:520px}
  .prereg .field{display:flex;gap:.6rem;flex-wrap:wrap}
  .prereg input[type=email]{flex:1;min-width:200px;padding:.9rem 1.1rem;border-radius:12px;border:1.5px solid var(--line);background:#fff}
  .prereg input:focus-visible{outline-color:var(--teal)}
  .prereg small{display:block;margin-top:.7rem;color:var(--ink-soft);font-size:var(--fs-300)}
  .prereg__ok{display:none;align-items:center;gap:.6rem;background:rgba(18,179,176,.12);color:#0b7a78;border-radius:12px;padding:1rem 1.2rem;font-weight:700}
  .prereg__ok svg{width:1.3em;height:1.3em;stroke:currentColor;fill:none;flex:none}
  .prereg[data-done=true] .field,.prereg[data-done=true] small{display:none}
  .prereg[data-done=true] .prereg__ok{display:flex}

  /* gear list */
  .gearrow{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--shadow-sm)}
  .gearrow img{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:none}
  .gearrow h3{font-size:var(--fs-500);margin-bottom:.2rem}
}

@layer utilities{
  .center{text-align:center}
  .mt-2{margin-top:2rem}
  .mt-1{margin-top:1rem}
  .muted{color:var(--ink-soft)}
  .nowrap{white-space:nowrap}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
}