@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;700;800;900&display=swap');

:root{
  --bg:#040008; --line:rgba(180,84,255,.32); --line-strong:rgba(224,145,255,.56); --text:#f6efff; --muted:#cdb9e6;
  --purple:#a33dff; --pink:#ff4ddd; --cyan:#38e7ff; --shadow:0 0 32px rgba(179,69,255,.24); --shell:min(96vw,2240px); --content:min(94vw,2080px);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;font-family:'Noto Sans KR','Pretendard',Arial,sans-serif;color:var(--text);background:var(--bg);overflow-x:hidden;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)} main{min-width:0;max-width:100%}
a{text-decoration:none;color:inherit} button{font:inherit}

html {
  scrollbar-width: thin;
  scrollbar-color: #ff4ddd #080211;
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-track {
  background:
    linear-gradient(180deg, rgba(56, 231, 255, .08), transparent 26%, rgba(255, 77, 221, .08)),
    #080211;
  border-left: 1px solid rgba(205, 116, 255, .14);
}

::-webkit-scrollbar-thumb {
  min-height: 72px;
  border: 3px solid #080211;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #38e7ff, #a33dff 42%, #ff4ddd 72%, #fff0ad);
  box-shadow:
    0 0 16px rgba(255, 77, 221, .38),
    inset 0 0 0 1px rgba(255,255,255,.22);
}

::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, #8ff5ff, #b760ff 38%, #ff74e9 70%, #fff7c9);
  box-shadow:
    0 0 22px rgba(255, 77, 221, .54),
    0 0 14px rgba(56, 231, 255, .28),
    inset 0 0 0 1px rgba(255,255,255,.32);
}

::-webkit-scrollbar-corner {
  background: #080211;
}
@media (hover:hover) and (pointer:fine){
  html, body{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='1.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M6 3 L25 16 L16 18 L12 27 Z' fill='%2305000c' stroke='%2338e7ff' stroke-width='2' filter='url(%23g)'/%3E%3Cpath d='M10 8 L20 15 L15 16 L12 21 Z' fill='%23ff4ddd' opacity='.82'/%3E%3Cpath d='M6 3 L25 16' stroke='%23fff0ad' stroke-width='1' opacity='.8'/%3E%3C/svg%3E") 6 3, auto;
  }
  .main-nav a,
  .top-categories a,
  .one-line-actions a {
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='1.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M6 3 L25 16 L16 18 L12 27 Z' fill='%2305000c' stroke='%2338e7ff' stroke-width='2' filter='url(%23g)'/%3E%3Cpath d='M10 8 L20 15 L15 16 L12 21 Z' fill='%23ff4ddd' opacity='.82'/%3E%3Cpath d='M6 3 L25 16' stroke='%23fff0ad' stroke-width='1' opacity='.8'/%3E%3C/svg%3E") 6 3, auto;
  }
  input, textarea, [contenteditable="true"]{
    cursor:text;
  }
}
@media (hover:hover) and (pointer:fine){
  a, button, [role="button"], summary, label, select,
  input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"],
  .cart-btn, .icon-btn, .primary-cta, .secondary-cta, .probability-btn, .buy-btn,
  .product-card, .reward-card, .inventory-open-trigger, .pass-tab, .calendar-day,
  .coordinate-cell, .vault-option, .ladder-start, .mission-tabs button, .mission-action {
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cfilter id='g' x='-80%25' y='-80%25' width='260%25' height='260%25'%3E%3CfeGaussianBlur stdDeviation='1.4' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M6 3 L25 16 L16 18 L12 27 Z' fill='%2305000c' stroke='%2338e7ff' stroke-width='2' filter='url(%23g)'/%3E%3Cpath d='M10 8 L20 15 L15 16 L12 21 Z' fill='%23ff4ddd' opacity='.82'/%3E%3Cpath d='M6 3 L25 16' stroke='%23fff0ad' stroke-width='1' opacity='.8'/%3E%3C/svg%3E") 6 3, auto !important;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], textarea, [contenteditable="true"] {
    cursor: text !important;
  }
}
.cyber-ambience{position:fixed;inset:0;z-index:-10;background:radial-gradient(circle at 74% 18%, rgba(255,0,220,.23), transparent 24%),radial-gradient(circle at 82% 36%, rgba(58,231,255,.14), transparent 18%),radial-gradient(circle at 18% 82%, rgba(103,0,255,.28), transparent 34%),linear-gradient(135deg,#020004 0%,#090114 42%,#150226 72%,#020004 100%)}
.cyber-ambience::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center, rgba(175,59,255,.05), transparent 55%)}
.grid-overlay{position:fixed;inset:0;z-index:-9;pointer-events:none;background-image:linear-gradient(rgba(210,120,255,.07) 1px, transparent 1px),linear-gradient(90deg, rgba(210,120,255,.07) 1px, transparent 1px);background-size:56px 56px;mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 92%)}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.18;background:repeating-linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 1px, transparent 1px, transparent 4px)}
.top-event-banner{position:relative;z-index:45;padding:8px clamp(14px,2vw,26px);background:linear-gradient(90deg,rgba(21,5,42,.96),rgba(92,18,142,.94),rgba(19,7,42,.96));border-bottom:1px solid rgba(255,130,237,.36);box-shadow:0 0 28px rgba(255,77,221,.18),inset 0 -1px 0 rgba(56,231,255,.14)}.top-event-banner[hidden]{display:none}.top-event-banner__inner{width:min(100%,var(--shell));max-width:100%;margin:0 auto;min-height:38px;display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;text-align:center;flex-wrap:wrap}.top-event-banner__badge{padding:6px 10px;border-radius:999px;background:rgba(56,231,255,.12);border:1px solid rgba(56,231,255,.36);color:#aef7ff;font-size:11px;font-weight:900;letter-spacing:.14em;box-shadow:0 0 18px rgba(56,231,255,.16)}.top-event-banner p{margin:0;color:#f4e7ff;font-size:14px;font-weight:800;letter-spacing:-.01em}.top-event-banner strong{color:#fff0ad;text-shadow:0 0 14px rgba(255,213,143,.5)}.top-event-banner a{display:inline-grid;place-items:center;min-height:30px;padding:0 13px;border-radius:999px;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;font-size:12px;font-weight:900;box-shadow:0 0 18px rgba(255,77,221,.34)}.top-event-banner button{position:absolute;right:clamp(10px,1.6vw,22px);top:50%;width:28px;height:28px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,2,18,.45);color:#f7edff;font-size:18px;line-height:1;cursor:pointer}.top-event-banner button:hover{border-color:rgba(255,130,237,.58);box-shadow:0 0 16px rgba(255,77,221,.24)}
.shell,.section-shell{width:min(100%, var(--content));max-width:100%;margin-inline:auto}
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(197,101,255,.18);backdrop-filter:blur(18px);background:rgba(3,0,10,.78)}
.header-shell{width:min(100%,var(--shell));max-width:100%;min-height:88px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}
.brand{display:flex;flex-direction:column;line-height:.92}.brand-main{font-size:46px;font-weight:900;font-style:italic;letter-spacing:1px;color:#e18dff;text-shadow:0 0 18px rgba(208,98,255,.8),0 0 38px rgba(163,61,255,.45);transform:skew(-10deg)}.brand-sub{margin-top:8px;font-size:15px;letter-spacing:13px;color:#efcbff;padding-left:8px}
.main-nav{display:flex;justify-content:center;gap:clamp(20px,1.7vw,38px);flex-wrap:wrap}.main-nav a{font-size:14px;font-weight:800;letter-spacing:.08em;color:#d8beef;position:relative;padding:13px 0}.main-nav a.is-active,.main-nav a:hover{color:#fff}.main-nav a.is-active::after,.main-nav a:hover::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--purple),var(--pink));box-shadow:0 0 18px rgba(255,77,221,.7)}
.header-actions{display:flex;align-items:center;gap:10px}.icon-btn,.wallet-chip{border:1px solid rgba(214,137,255,.26);background:rgba(19,6,30,.78);color:#f7edff;box-shadow:var(--shadow)}.icon-btn{width:42px;height:42px;border-radius:12px;font-size:18px;display:grid;place-items:center;cursor:pointer}.cart-btn{position:relative}.cart-btn span{position:absolute;top:-7px;right:-5px;background:linear-gradient(135deg,var(--purple),var(--pink));width:18px;height:18px;border-radius:999px;font-size:11px;display:grid;place-items:center}.wallet-chip{border-radius:16px;padding:10px 16px;display:flex;flex-direction:column;align-items:flex-start;min-width:150px}.wallet-chip small{font-size:11px;color:#d5b6ef}.wallet-chip strong{font-size:14px;margin-top:2px}
.home-event-strip{padding:24px 0 0}.home-event-strip[hidden]{display:none}.home-event-strip__inner{position:relative;min-height:104px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:0;padding:22px clamp(48px,4vw,64px) 22px clamp(20px,2.2vw,36px);overflow:hidden;border-radius:28px;background:radial-gradient(circle at 16% 50%,rgba(56,231,255,.18),transparent 28%),radial-gradient(circle at 86% 34%,rgba(255,77,221,.22),transparent 30%),linear-gradient(135deg,rgba(25,8,45,.96),rgba(75,15,122,.94),rgba(10,4,24,.98));border:1px solid rgba(255,130,237,.34);box-shadow:0 0 38px rgba(255,77,221,.18),inset 0 0 0 1px rgba(255,255,255,.04)}.home-event-strip__inner::before{content:"";position:absolute;inset:12px;border-radius:21px;border:1px solid rgba(255,255,255,.08);pointer-events:none}.home-event-strip__badge{position:relative;z-index:1;display:inline-grid;place-items:center;min-height:38px;padding:0 14px;border-radius:999px;color:#8ff5ff;background:rgba(56,231,255,.12);border:1px solid rgba(56,231,255,.38);font-size:12px;font-weight:900;letter-spacing:.16em;box-shadow:0 0 18px rgba(56,231,255,.18)}.home-event-strip__copy{position:relative;z-index:1}.home-event-strip__copy strong{display:block;color:#fff;font-size:clamp(20px,1.8vw,34px);line-height:1.2;text-shadow:0 0 22px rgba(255,77,221,.46)}.home-event-strip__copy p{margin:7px 0 0;color:#d9c7e9;font-size:15px;line-height:1.55}.home-event-strip a{position:relative;z-index:1;display:inline-grid;place-items:center;min-height:50px;padding:0 18px;border-radius:16px;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 28px rgba(255,77,221,.30);white-space:nowrap}.home-event-strip a:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(255,77,221,.42)}.home-event-strip__close{position:absolute;right:18px;top:50%;z-index:2;width:32px;height:32px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,2,18,.48);color:#fff;font-size:20px;line-height:1;cursor:pointer}.home-event-strip__close:hover{border-color:rgba(255,130,237,.66);box-shadow:0 0 18px rgba(255,77,221,.28)}.hero{padding:30px 0 24px}.hero-shell{position:relative;min-height:760px;display:grid;grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr);gap:clamp(28px,3vw,64px);align-items:center;padding:36px 0 30px}.hero-copy{position:relative;z-index:3;padding-left:clamp(8px,1vw,18px)}.eyebrow{margin:0;color:#d465ff;font-size:13px;font-weight:900;letter-spacing:.42em}
.hero h1{position:relative;margin:20px 0 18px;font-size:clamp(54px,4.4vw,96px);line-height:.98;font-weight:900;text-shadow:0 0 10px rgba(255,255,255,.6),0 0 28px rgba(164,61,255,.7)}.hero h1::before,.hero h1::after{content:attr(data-text);position:absolute;left:0;top:0;pointer-events:none;opacity:.35}.hero h1::before{transform:translate(4px,-1px);color:#4ce4ff;clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}.hero h1::after{transform:translate(-4px,2px);color:#ff4ddd;clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%)}
.hero-desc{max-width:620px;margin:0;color:var(--muted);font-size:18px;line-height:1.8}.hero-actions-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.primary-cta,.secondary-cta,.probability-btn,.buy-btn{cursor:pointer;border:none;color:#fff;font-weight:900}.primary-cta{min-width:min(280px,100%);max-width:100%;height:64px;padding:0 28px;border-radius:18px;background:linear-gradient(135deg,rgba(107,18,190,.96),rgba(255,77,221,.96));box-shadow:0 0 34px rgba(186,58,255,.5),inset 0 0 0 1px rgba(255,210,255,.22)}.primary-cta span{margin-left:10px;font-size:22px}.secondary-cta,.probability-btn{height:56px;padding:0 24px;border-radius:16px;background:rgba(24,10,38,.82);border:1px solid rgba(223,152,255,.32);box-shadow:var(--shadow)}
.hero-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:34px;max-width:720px}.meta-card{min-height:94px;padding:18px 20px;border-radius:20px;background:linear-gradient(180deg,rgba(23,10,37,.85),rgba(10,4,18,.9));border:1px solid var(--line);box-shadow:var(--shadow)}.meta-card strong{display:block;font-size:28px;margin-bottom:8px}.meta-card span{font-size:13px;color:#bda1da}
.ticker-bar{margin-top:22px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:54px;padding:0 18px;border-radius:16px;background:rgba(18,7,29,.78);border:1px solid rgba(212,124,255,.22)}.ticker-bar span{color:#ff6ee7;font-weight:900;font-size:12px}.ticker-bar marquee{color:#d5bfed;font-size:14px}
.fever-countdown-banner{position:fixed;top:0;left:0;right:0;z-index:140;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 18px;color:#fff;background:linear-gradient(90deg,rgba(255,70,0,.96),rgba(255,77,221,.94),rgba(255,153,0,.96));border-bottom:1px solid rgba(255,240,173,.55);box-shadow:0 0 34px rgba(255,94,0,.34),0 0 28px rgba(255,77,221,.22);font-weight:1000;letter-spacing:-.01em;opacity:0;visibility:hidden;transform:translateY(-110%);transition:opacity .24s ease,visibility .24s ease,transform .32s ease}.fever-countdown-banner.is-active{opacity:1;visibility:visible;transform:translateY(0)}.fever-countdown-banner.is-refreshed{animation:feverBannerRefresh .48s ease}.fever-countdown-banner[hidden]:not(.is-active){display:none}.fever-countdown-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:winningAlertShine 2s ease infinite;pointer-events:none}.fever-countdown-banner__icon{position:relative;z-index:1;font-size:24px;filter:drop-shadow(0 0 10px rgba(255,240,173,.62));animation:winningFlamePulse .8s ease-in-out infinite}.fever-countdown-banner strong,.fever-countdown-banner span{position:relative;z-index:1}.fever-countdown-banner b{display:inline-grid;min-width:64px;place-items:center;margin-left:6px;padding:4px 9px;border-radius:999px;color:#fff0ad;background:rgba(5,0,12,.38);border:1px solid rgba(255,240,173,.34);font-size:18px;line-height:1;text-shadow:0 0 12px rgba(255,240,173,.5)}.winning-alert-stack{position:fixed;top:112px;left:50%;z-index:120;width:min(92vw,980px);display:grid;gap:10px;transform:translateX(-50%);pointer-events:none}.winning-alert{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;padding:17px 22px;border-radius:22px;background:radial-gradient(circle at 9% 44%,rgba(255,94,0,.34),transparent 28%),radial-gradient(circle at 84% 16%,rgba(255,213,143,.24),transparent 30%),linear-gradient(135deg,rgba(42,8,18,.98),rgba(92,18,142,.95),rgba(7,2,12,.96));border:1px solid rgba(255,213,143,.58);box-shadow:0 0 38px rgba(255,77,221,.30),0 0 34px rgba(255,111,0,.24),0 0 28px rgba(255,213,143,.18),inset 0 0 0 1px rgba(255,255,255,.05);opacity:0;transform:translateY(-18px) scale(.96);transition:opacity .32s ease,transform .32s ease}.winning-alert::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-110%);animation:winningAlertShine 2.4s ease infinite}.winning-alert::after{content:"";position:absolute;inset:-35%;background:conic-gradient(from 120deg,transparent,rgba(255,94,0,.26),transparent 32%,rgba(255,213,143,.18),transparent 70%);filter:blur(24px);opacity:.56;animation:winningAlertAura 4.2s linear infinite}.winning-alert.is-show{opacity:1;transform:translateY(0) scale(1)}.winning-alert__icon{position:relative;z-index:1;width:52px;height:52px;display:grid;place-items:center;border-radius:999px;background:radial-gradient(circle,rgba(255,213,143,.24),rgba(255,77,0,.16));border:1px solid rgba(255,213,143,.52);box-shadow:0 0 24px rgba(255,111,0,.46),inset 0 0 16px rgba(255,240,173,.12);font-size:30px;animation:winningFlamePulse .92s ease-in-out infinite}.winning-alert__copy{position:relative;z-index:1;display:grid;gap:6px}.winning-alert__badge{display:inline-grid;place-items:center;width:fit-content;min-height:32px;padding:0 11px;border-radius:999px;color:#fff0ad;background:rgba(255,213,143,.13);border:1px solid rgba(255,213,143,.44);font-size:11px;font-weight:1000;letter-spacing:.16em}.winning-alert__message{margin:0;color:#f8edff;font-size:clamp(14px,1.1vw,18px);font-weight:900;line-height:1.5;text-shadow:0 0 14px rgba(255,77,221,.28)}.winning-alert__message strong{color:#fff0ad;text-shadow:0 0 16px rgba(255,213,143,.42)}.winning-alert__fever{margin:0;color:#ffb36b;font-size:clamp(13px,1vw,16px);font-weight:1000;letter-spacing:-.01em;text-shadow:0 0 14px rgba(255,111,0,.36)}@keyframes winningAlertShine{45%,100%{transform:translateX(110%)}}@keyframes winningAlertAura{to{transform:rotate(360deg)}}@keyframes winningFlamePulse{50%{transform:scale(1.08) rotate(-4deg);filter:brightness(1.18)}}@keyframes feverBannerRefresh{50%{filter:brightness(1.22);box-shadow:0 0 44px rgba(255,94,0,.48),0 0 38px rgba(255,77,221,.34);transform:translateY(0) scale(1.015)}}
.hero-stage-wrap{position:relative;min-height:760px;display:flex;align-items:center;justify-content:center;isolation:isolate}.city{position:absolute;inset:auto auto 0 0;opacity:.7;pointer-events:none;z-index:0}.city-left{left:2%;bottom:16%;width:min(28vw,420px)}.city-right{right:0;bottom:12%;width:min(22vw,340px);transform:scaleX(-1);opacity:.82}.radar-ring{position:absolute;width:min(70vw,860px);max-width:100%;top:8%;left:50%;transform:translateX(-50%);opacity:.58;animation:slowRotate 16s linear infinite}.hero-spark{position:absolute;width:min(20vw,300px);opacity:.8}.spark-top{right:6%;top:15%;animation:flicker 2.4s infinite}.spark-bottom{left:8%;bottom:22%;transform:rotate(180deg);animation:flicker 2s infinite .4s}.stage-script{position:absolute;top:7%;left:10%;z-index:3;margin:0;font-size:clamp(30px,2.2vw,50px);font-style:italic;color:#ff89eb;text-shadow:0 0 18px rgba(255,77,221,.9);transform:rotate(-7deg)}.hero-platform{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);width:min(74vw,900px);z-index:1;opacity:.96}.hero-platform img{width:100%;display:block}.hero-box{position:relative;z-index:4;width:min(74vw,700px);display:flex;justify-content:center;align-items:center;animation:heroFloat 3.2s ease-in-out infinite}.hero-box .beam{position:absolute;bottom:28%;left:50%;transform:translateX(-50%) scale(.84);width:min(44vw,430px);opacity:0;pointer-events:none;z-index:1}.hero-box .box-image{position:relative;z-index:2;width:min(78vw,760px);max-width:100%;filter:drop-shadow(0 0 22px rgba(255,77,221,.22)) drop-shadow(0 0 58px rgba(163,61,255,.44))}.hero-box.opening{animation:boxShake .22s linear infinite}.hero-box.opened .beam{opacity:1;animation:beamBurst 1.2s ease-out both}.hero-box.opened .box-image{animation:boxPop 1.2s ease-out both}
.reward-toast{position:absolute;right:4%;bottom:12%;z-index:6;width:min(360px,45vw);padding:22px 24px;border-radius:22px;background:linear-gradient(180deg,rgba(31,12,47,.9),rgba(11,3,18,.95));border:1px solid var(--line-strong);box-shadow:0 0 36px rgba(207,78,255,.34);transform:translateY(24px) scale(.94);opacity:0;pointer-events:none}.reward-toast span{display:inline-block;color:#ff7deb;font-size:12px;font-weight:900;letter-spacing:.18em;margin-bottom:6px}.reward-toast h3{margin:0 0 6px;font-size:26px}.reward-toast p{margin:0;color:#cbb0e7;line-height:1.65}.reward-toast.show{opacity:1;transform:translateY(0) scale(1);transition:all .42s ease}
.section-shell{margin-top:22px;padding:30px clamp(18px,2.2vw,34px) 34px;border-radius:30px;background:linear-gradient(180deg,rgba(14,5,23,.88),rgba(7,2,12,.93));border:1px solid rgba(180,84,255,.24);box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.02)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px}.section-kicker{margin:0 0 4px;font-size:13px;letter-spacing:.28em;color:#ff71e8;font-weight:900}.section-head h2{margin:0;font-size:clamp(30px,2.2vw,42px)}.box-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.4vw,28px)}
a.product-card{text-decoration:none;color:inherit}a.product-card:visited{color:inherit}a.product-card:focus-visible{outline:2px solid rgba(255,113,237,.9);outline-offset:3px}.product-card{position:relative;min-height:520px;display:flex;flex-direction:column;align-items:start;padding:24px 22px 22px;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,rgba(27,9,41,.96),rgba(10,3,18,.96));border:1px solid rgba(202,111,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 28px rgba(116,16,201,.18)}.corner-lines{position:absolute;inset:12px;pointer-events:none;border:1px solid rgba(205,117,255,.12);border-radius:20px}.corner-lines::before,.corner-lines::after{content:'';position:absolute;width:34px;height:34px;border:2px solid rgba(255,112,237,.5)}.corner-lines::before{left:-1px;top:-1px;border-right:none;border-bottom:none;border-top-left-radius:14px}.corner-lines::after{right:-1px;bottom:-1px;border-left:none;border-top:none;border-bottom-right-radius:14px}.product-card:hover{transform:translateY(-8px);transition:.28s ease;box-shadow:0 0 34px rgba(205,86,255,.26)}.badge{position:absolute;top:18px;right:18px;z-index:3;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em}.badge.basic{background:rgba(163,61,255,.16);color:#eeccff;border:1px solid rgba(223,166,255,.28)}.badge.premium{background:rgba(255,197,109,.18);color:#ffdfaa;border:1px solid rgba(255,197,109,.38)}.badge.legend{background:linear-gradient(135deg, rgba(56,231,255,.18), rgba(255,77,221,.2));color:#eff9ff;border:1px solid rgba(133,236,255,.38)}.product-box-img{width:min(100%,440px);height:auto;display:block;margin:16px auto 10px;filter:drop-shadow(0 0 20px rgba(255,77,221,.24)) drop-shadow(0 0 44px rgba(163,61,255,.32))}.product-copy{margin-top:2px}.product-copy h3{margin:0 0 7px;font-size:28px}.product-copy p{margin:0;color:#bfa4d9;font-size:16px}.price{margin-top:18px;font-size:42px;font-weight:900;color:#fff;text-shadow:0 0 18px rgba(163,61,255,.4)}.buy-btn{margin-top:22px;width:100%;height:58px;border-radius:16px;background:linear-gradient(135deg,rgba(102,17,182,.98),rgba(255,77,221,.95));box-shadow:0 0 26px rgba(189,72,255,.3)}.product-premium .buy-btn{background:linear-gradient(135deg,#8e5108,#ffcb70)}.product-premium .price{color:#ffdba1}.product-legend .buy-btn{background:linear-gradient(135deg,#0b86b6,#ff4ddd)}
.feature-section{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.feature-card{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;min-height:148px;padding:22px;border-radius:24px;background:linear-gradient(180deg,rgba(22,8,34,.92),rgba(8,3,13,.96));border:1px solid rgba(194,108,255,.22)}.feature-card img{width:62px;height:62px;filter:drop-shadow(0 0 18px rgba(199,74,255,.4))}.feature-card h3{margin:0 0 7px;font-size:21px}.feature-card p{margin:0;color:#b99dd4;line-height:1.65}
.dashboard{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(520px,1.28fr);gap:22px;margin-bottom:34px}.panel{border-radius:26px;background:linear-gradient(180deg,rgba(15,6,24,.92),rgba(6,2,10,.96));border:1px solid rgba(185,97,255,.22);padding:24px;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.panel-head h3{margin:0;font-size:28px}.panel-head span,.panel-head a{font-size:12px;color:#ff73e9;font-weight:900;letter-spacing:.14em}.live-list{display:grid;gap:10px}.live-row{display:grid;grid-template-columns:minmax(100px,.9fr) minmax(160px,1.6fr) auto;gap:14px;align-items:center;min-height:62px;padding:0 14px;border-radius:16px;background:rgba(21,8,33,.85);border:1px solid rgba(170,82,255,.18)}.live-row b{color:#fff;font-size:14px}.live-row p{margin:0;color:#d0bae8}.live-row em{font-style:normal;color:#bc91e5;font-size:13px}.rank-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.rank-card{min-height:252px;padding:14px 12px 16px;text-align:center;border-radius:18px;background:rgba(21,8,33,.82);border:1px solid rgba(171,84,255,.22)}.rank-card b{display:block;text-align:left;color:#f3c5ff;margin-bottom:8px}.rank-card img{display:block;width:100px;height:100px;margin:6px auto 10px;filter:drop-shadow(0 0 20px rgba(194,78,255,.28))}.rank-card p{margin:0 0 10px;min-height:38px;color:#d8c6ea;font-size:15px;line-height:1.4}.rank-card span{color:#ff87ec;font-weight:900}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}} @keyframes boxShake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(7px,-5px) rotate(2deg)}50%{transform:translate(-8px,4px) rotate(-2deg)}75%{transform:translate(6px,3px) rotate(1deg)}100%{transform:translate(0,0) rotate(0)}} @keyframes beamBurst{0%{opacity:0;transform:translateX(-50%) scale(.7)}20%{opacity:.95}100%{opacity:0;transform:translateX(-50%) scale(1.16)}} @keyframes boxPop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}} @keyframes slowRotate{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}} @keyframes flicker{0%,100%{opacity:.55}50%{opacity:1}}
@media (max-width:1440px){:root{--content:min(95vw,1580px);--shell:min(97vw,1660px)}.hero-shell{grid-template-columns:minmax(380px,.95fr) minmax(480px,1.05fr);min-height:700px}.hero-stage-wrap{min-height:700px}.hero-platform{width:min(82vw,860px)}}
@media (max-width:1180px){.header-shell{grid-template-columns:auto 1fr;grid-template-areas:'brand actions' 'nav nav';padding:12px 0;gap:16px}.brand{grid-area:brand}.header-actions{grid-area:actions;justify-content:flex-end}.main-nav{grid-area:nav;justify-content:flex-start}.hero-shell{grid-template-columns:1fr;min-height:auto;padding-top:24px}.hero-stage-wrap{min-height:620px;order:-1}.hero-copy{padding-left:0}.hero-meta{max-width:none}.box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-section{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard{grid-template-columns:1fr}.rank-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.header-shell{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'brand actions' 'nav nav';gap:12px 14px;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}.main-nav{grid-area:nav;display:flex;flex-wrap:nowrap;gap:12px 16px;justify-content:flex-start;align-items:center;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px;mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}.main-nav a{flex:0 0 auto;white-space:nowrap}.wallet-chip{display:none}.home-event-strip{padding-top:16px}.home-event-strip__inner{grid-template-columns:1fr;gap:12px;text-align:left;padding:20px 54px 20px 18px}.home-event-strip__badge{justify-self:start}.home-event-strip a{width:100%;min-height:48px}.home-event-strip__close{right:14px;top:18px;transform:none}.hero{padding-top:14px}.hero-shell{gap:18px}.hero-stage-wrap{min-height:500px}.stage-script{left:4%;top:6%;font-size:26px}.hero-platform{bottom:12%;width:130%}.hero-box{width:100%}.hero-box .box-image{width:110%}.city-left,.city-right{display:none}.hero-meta{grid-template-columns:1fr}.feature-section{grid-template-columns:1fr}.rank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-head h3{font-size:24px}}
@media (max-width:560px){.section-shell{padding:22px 16px 24px;border-radius:22px}.hero h1{font-size:44px}.hero-desc{font-size:16px}.primary-cta,.secondary-cta,.probability-btn{width:100%;min-width:0}.box-grid,.feature-section{grid-template-columns:1fr}.product-card{min-height:470px}.product-copy h3{font-size:24px}.price{font-size:36px}.live-row{grid-template-columns:1fr;align-items:start;padding:14px}.rank-grid{grid-template-columns:1fr 1fr}}

/* link-style purchase/detail button */
.buy-btn{display:grid;place-items:center;text-decoration:none;text-align:center;}

.is-fever-price {
  display: grid !important;
  gap: 5px;
  align-items: start;
  line-height: 1.05;
}

.fever-price-badge {
  display: inline-grid;
  width: fit-content;
  place-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #fff0ad;
  background: rgba(255, 111, 0, 0.16);
  border: 1px solid rgba(255, 213, 143, 0.44);
  box-shadow: 0 0 16px rgba(255, 111, 0, 0.28);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-shadow: none;
}

.fever-price-original {
  color: #a98ec2;
  font-size: 0.58em;
  font-weight: 900;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.fever-price-sale {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff0ad;
  font-weight: 1000;
  text-shadow:
    0 0 16px rgba(255, 240, 173, 0.44),
    0 0 24px rgba(255, 111, 0, 0.22);
}

.fever-price-sale::before {
  content: "🔥";
  display: inline-block;
  font-size: 0.72em;
  line-height: 1;
  filter: drop-shadow(0 0 9px rgba(255, 111, 0, 0.58));
  animation: winningFlamePulse .92s ease-in-out infinite;
}

body.is-fever-time .fever-price-badge {
  color: var(--fever-price-badge-fg);
  background: var(--fever-price-badge-bg);
  border-color: var(--fever-price-badge-border);
  box-shadow: 0 0 18px var(--fever-price-badge-glow);
}

body.is-fever-time .fever-price-sale {
  color: var(--fever-price-sale-fg);
  text-shadow:
    0 0 16px var(--fever-price-sale-shadow-a),
    0 0 26px var(--fever-price-sale-shadow-b);
}

body.is-fever-time .fever-price-sale::before {
  filter: drop-shadow(0 0 9px var(--fever-price-flame-glow));
}

.css-box-price.is-fever-price {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.css-box-price .fever-price-badge {
  min-height: auto;
  padding: 3px 6px;
  font-size: calc(var(--s) * 0.025);
}

.css-box-price .fever-price-original {
  font-size: calc(var(--s) * 0.045);
}

.css-box-price .fever-price-sale {
  font-size: calc(var(--s) * 0.07);
}


/* Global sound control */
.sound-toggle {
  min-width: 138px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 130, 237, 0.34);
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 77, 221, 0.18), transparent 48%),
    rgba(19, 6, 30, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 77, 221, 0.14);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.sound-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 130, 237, 0.72);
  box-shadow: 0 0 28px rgba(255, 77, 221, 0.24);
}

.sound-toggle.is-on {
  border-color: rgba(56, 231, 255, 0.48);
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 231, 255, 0.18), transparent 48%),
    radial-gradient(circle at 80% 20%, rgba(255, 77, 221, 0.18), transparent 48%),
    rgba(19, 6, 30, 0.92);
  box-shadow: 0 0 26px rgba(56, 231, 255, 0.16), 0 0 30px rgba(255, 77, 221, 0.12);
}

.sound-toggle .sound-icon {
  font-size: 15px;
  line-height: 1;
}

.sound-consent-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 77, 221, .18), transparent 34%),
    rgba(3, 0, 10, .78);
  backdrop-filter: blur(14px);
}

.sound-consent-card {
  position: relative;
  width: min(92vw, 560px);
  padding: clamp(28px, 3vw, 44px);
  text-align: center;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 80% 16%, rgba(56, 231, 255, .16), transparent 30%),
    radial-gradient(circle at 18% 88%, rgba(255, 77, 221, .18), transparent 32%),
    linear-gradient(180deg, rgba(24, 7, 42, .98), rgba(7, 2, 14, .98));
  border: 1px solid rgba(255, 130, 237, .34);
  box-shadow:
    0 0 64px rgba(255, 77, 221, .26),
    0 0 110px rgba(56, 231, 255, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.sound-consent-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  pointer-events: none;
}

.sound-consent-orb {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow:
    0 0 28px rgba(255, 77, 221, .58),
    0 0 58px rgba(56, 231, 255, .22);
  animation: soundConsentPulse 1.25s ease-in-out infinite;
}

.sound-consent-card p {
  margin: 0 0 10px;
  color: #8ff5ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
}

.sound-consent-card h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.18;
  text-shadow: 0 0 24px rgba(255, 77, 221, .5);
}

.sound-consent-card span {
  display: block;
  margin: 16px auto 0;
  max-width: 430px;
  color: #d9c7e9;
  line-height: 1.7;
  font-weight: 800;
}

.sound-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.sound-consent-actions button {
  min-height: 56px;
  border-radius: 16px;
  border: 0;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.sound-consent-accept {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 0 30px rgba(255, 77, 221, .34);
}

.sound-consent-decline {
  background: rgba(31, 10, 50, .88);
  border: 1px solid rgba(255, 130, 237, .28) !important;
}

.customer-review-section {
  margin-bottom: 34px;
}

.review-section-note {
  color: #fff0ad;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.home-review-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.home-review-card {
  --review-line: rgba(185, 97, 255, .24);
  --review-glow: rgba(116, 16, 201, .14);
  --review-bg-a: rgba(255, 77, 221, .16);
  --review-bg-b: rgba(56, 231, 255, .12);
  --review-pill: #91f1ff;
  container-name: review-card;
  container-type: inline-size;
  position: relative;
  min-height: 380px;
  display: grid;
  grid-template-rows: 170px 1fr;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, var(--review-bg-a), transparent 34%),
    linear-gradient(180deg, rgba(21, 8, 33, .92), rgba(7, 2, 12, .97));
  border: 1px solid var(--review-line);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 24px var(--review-glow);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.home-review-card:hover,
.home-review-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--review-pill) 68%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 34px color-mix(in srgb, var(--review-pill) 26%, transparent);
  outline: none;
}

.home-review-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 113, 232, .10);
  pointer-events: none;
}

.home-review-card::after {
  content: "";
  position: absolute;
  inset: -28%;
  opacity: .18;
  pointer-events: none;
  background:
    conic-gradient(from 120deg, transparent, var(--review-bg-a), transparent 38%, var(--review-bg-b), transparent 72%);
  filter: blur(24px);
  animation: reviewAuraRotate 8s linear infinite;
}

.home-review-image {
  position: relative;
  display: grid;
  place-items: center;
  padding: 20px 18px 8px;
  background:
    radial-gradient(circle at 50% 54%, var(--review-bg-b), transparent 58%),
    radial-gradient(circle at 50% 42%, var(--review-bg-a), transparent 38%),
    rgba(3, 0, 8, .24);
}

.home-review-image::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, var(--review-bg-b), transparent 68%);
  filter: blur(8px);
  opacity: .82;
}

.home-review-image img {
  position: relative;
  z-index: 1;
  width: min(86%, 150px);
  height: 138px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 77, 221, .24))
    drop-shadow(0 0 34px rgba(56, 231, 255, .12));
}

.home-review-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  padding: 16px 16px 18px;
  min-width: 0;
}

.home-review-copy h3 {
  margin: 0;
  min-height: 48px;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.home-review-copy p {
  margin: 0;
  color: #d4bee9;
  font-size: 14px;
  line-height: 1.65;
}

.home-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.home-review-meta span {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
}

.home-review-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  justify-content: space-between;
  row-gap: 10px;
}

.home-review-footer .reviewer-name {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--review-pill);
  background: color-mix(in srgb, var(--review-pill) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--review-pill) 34%, transparent);
  font-size: 12px;
  font-weight: 900;
}

.home-review-footer .review-grade-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  margin-right: auto;
  padding: 0 9px;
  border-radius: 999px;
  color: var(--review-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid color-mix(in srgb, var(--review-pill) 42%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--review-pill) 18%, transparent);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex: 0 1 auto;
}

.home-review-footer .prize-value {
  color: var(--review-pill);
  font-size: 19px;
  font-weight: 1000;
  letter-spacing: -.02em;
  line-height: 1.35;
  text-align: right;
  text-shadow: 0 0 18px color-mix(in srgb, var(--review-pill) 46%, transparent);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

/* 좁은 카드: 닉네임·등급 1행, 가격은 다음 행 전체 너비 */
@container review-card (max-width: 440px) {
  .home-review-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    justify-content: stretch;
    align-items: center;
  }

  .home-review-footer .reviewer-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-review-footer .review-grade-badge {
    grid-column: 2;
    grid-row: 1;
    margin-right: 0;
    justify-self: end;
    flex: unset;
  }

  .home-review-footer .prize-value {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    flex: unset;
    font-size: clamp(14px, 4.5cqw, 18px);
  }
}

/* 매우 좁은 카드: 세로 스택 */
@container review-card (max-width: 280px) {
  .home-review-footer {
    grid-template-columns: 1fr;
  }

  .home-review-footer .reviewer-name {
    grid-column: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-review-footer .review-grade-badge {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .home-review-footer .prize-value {
    grid-column: 1;
    grid-row: 3;
  }
}

/* 컨테이너 쿼리 미지원: 항상 2행 배치로 겹침 방지 */
@supports not (container-type: inline-size) {
  .home-review-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    justify-content: stretch;
  }

  .home-review-footer .reviewer-name {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-review-footer .review-grade-badge {
    grid-column: 2;
    grid-row: 1;
    margin-right: 0;
    justify-self: end;
  }

  .home-review-footer .prize-value {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
    font-size: clamp(14px, 2.6vw, 19px);
  }
}

.home-review-card.review-grade-legendary {
  --review-line: rgba(255, 213, 143, .62);
  --review-glow: rgba(255, 197, 109, .30);
  --review-bg-a: rgba(255, 197, 109, .28);
  --review-bg-b: rgba(255, 240, 173, .22);
  --review-pill: #fff0ad;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 197, 109, .24), transparent 34%),
    linear-gradient(180deg, rgba(34, 19, 8, .92), rgba(8, 3, 12, .97));
}

.home-review-card.review-grade-epic {
  --review-line: rgba(255, 77, 221, .46);
  --review-glow: rgba(255, 77, 221, .24);
  --review-bg-a: rgba(255, 77, 221, .24);
  --review-bg-b: rgba(163, 61, 255, .22);
  --review-pill: #ff87ec;
}

.home-review-card.review-grade-rare {
  --review-line: rgba(56, 231, 255, .42);
  --review-glow: rgba(56, 231, 255, .22);
  --review-bg-a: rgba(56, 231, 255, .20);
  --review-bg-b: rgba(145, 241, 255, .18);
  --review-pill: #91f1ff;
}

.home-review-card.review-grade-normal {
  --review-line: rgba(198, 182, 216, .24);
  --review-glow: rgba(198, 182, 216, .12);
  --review-bg-a: rgba(198, 182, 216, .12);
  --review-bg-b: rgba(120, 104, 138, .12);
  --review-pill: #d9c7e9;
}

@keyframes soundConsentPulse {
  50% {
    transform: scale(1.08);
    filter: brightness(1.14);
  }
}

@keyframes reviewAuraRotate {
  to {
    transform: rotate(360deg);
  }
}

.review-proof-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  --rm-nick-fg: #91f1ff;
  --rm-nick-bg: rgba(145, 241, 255, .12);
  --rm-nick-border: rgba(145, 241, 255, .32);
  --rm-nick-glow: rgba(56, 231, 255, .22);
  --rm-visual-border: rgba(255, 130, 237, .35);
  --rm-visual-glow-a: rgba(56, 231, 255, .32);
  --rm-visual-glow-b: rgba(255, 77, 221, .22);
  --rm-visual-glow-c: rgba(255, 240, 173, .14);
  --rm-visual-inset: rgba(255, 77, 221, .08);
  --rm-img-drop-1: rgba(255, 77, 221, .35);
  --rm-img-drop-2: rgba(56, 231, 255, .28);
}

.review-proof-modal--legendary {
  --rm-nick-fg: #fff0ad;
  --rm-nick-bg: rgba(255, 240, 173, .12);
  --rm-nick-border: rgba(255, 213, 143, .42);
  --rm-nick-glow: rgba(255, 197, 109, .28);
  --rm-visual-border: rgba(255, 220, 140, .92);
  --rm-visual-glow-a: rgba(255, 240, 173, .55);
  --rm-visual-glow-b: rgba(255, 197, 109, .4);
  --rm-visual-glow-c: rgba(255, 160, 72, .22);
  --rm-visual-inset: rgba(255, 197, 109, .14);
  --rm-img-drop-1: rgba(255, 213, 143, .55);
  --rm-img-drop-2: rgba(255, 197, 109, .35);
}

.review-proof-modal--epic {
  --rm-nick-fg: #ff9cf5;
  --rm-nick-bg: rgba(255, 77, 221, .12);
  --rm-nick-border: rgba(255, 120, 220, .42);
  --rm-nick-glow: rgba(163, 61, 255, .26);
  --rm-visual-border: rgba(255, 120, 220, .88);
  --rm-visual-glow-a: rgba(255, 77, 221, .52);
  --rm-visual-glow-b: rgba(163, 61, 255, .38);
  --rm-visual-glow-c: rgba(255, 140, 255, .2);
  --rm-visual-inset: rgba(163, 61, 255, .12);
  --rm-img-drop-1: rgba(255, 77, 221, .5);
  --rm-img-drop-2: rgba(163, 61, 255, .38);
}

.review-proof-modal--rare {
  --rm-nick-fg: #bff8ff;
  --rm-nick-bg: rgba(56, 231, 255, .12);
  --rm-nick-border: rgba(145, 241, 255, .38);
  --rm-nick-glow: rgba(56, 231, 255, .26);
  --rm-visual-border: rgba(145, 241, 255, .88);
  --rm-visual-glow-a: rgba(56, 231, 255, .48);
  --rm-visual-glow-b: rgba(145, 241, 255, .32);
  --rm-visual-glow-c: rgba(191, 248, 255, .2);
  --rm-visual-inset: rgba(56, 231, 255, .1);
  --rm-img-drop-1: rgba(56, 231, 255, .48);
  --rm-img-drop-2: rgba(145, 241, 255, .32);
}

.review-proof-modal--normal {
  --rm-nick-fg: #ebe2f4;
  --rm-nick-bg: rgba(217, 199, 233, .12);
  --rm-nick-border: rgba(201, 180, 220, .38);
  --rm-nick-glow: rgba(198, 182, 216, .22);
  --rm-visual-border: rgba(210, 190, 232, .75);
  --rm-visual-glow-a: rgba(217, 199, 233, .4);
  --rm-visual-glow-b: rgba(154, 135, 173, .28);
  --rm-visual-glow-c: rgba(235, 226, 244, .14);
  --rm-visual-inset: rgba(198, 182, 216, .1);
  --rm-img-drop-1: rgba(217, 199, 233, .42);
  --rm-img-drop-2: rgba(154, 135, 173, .28);
}

@keyframes review-proof-modal-neon-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rm-visual-border) 55%, transparent),
      0 0 22px var(--rm-visual-glow-a),
      0 0 48px var(--rm-visual-glow-b),
      0 0 86px var(--rm-visual-glow-c),
      inset 0 0 36px var(--rm-visual-inset);
  }

  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rm-visual-border) 70%, transparent),
      0 0 32px var(--rm-visual-glow-a),
      0 0 72px var(--rm-visual-glow-b),
      0 0 120px var(--rm-visual-glow-c),
      inset 0 0 48px var(--rm-visual-inset);
  }
}

@keyframes review-proof-modal-neon-scan {
  0% {
    opacity: .35;
    transform: rotate(0deg) scale(1.02);
  }

  50% {
    opacity: .65;
    transform: rotate(180deg) scale(1.06);
  }

  100% {
    opacity: .35;
    transform: rotate(360deg) scale(1.02);
  }
}

.review-proof-modal.is-open {
  display: grid;
}

.review-proof-modal-open {
  overflow: hidden;
}

.review-proof-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 77, 221, .22), transparent 34%),
    rgba(3, 0, 8, .76);
  backdrop-filter: blur(10px);
}

.review-proof-modal__panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 1120px);
  max-height: min(88vh, 920px);
  overflow: auto;
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 16%, rgba(56, 231, 255, .14), transparent 30%),
    radial-gradient(circle at 86% 5%, rgba(255, 77, 221, .18), transparent 32%),
    linear-gradient(180deg, rgba(20, 6, 34, .98), rgba(7, 2, 12, .99));
  border: 1px solid rgba(205, 116, 255, .34);
  box-shadow: 0 0 54px rgba(255, 77, 221, .24), inset 0 0 0 1px rgba(255,255,255,.04);
  scrollbar-width: thin;
  scrollbar-color: #38e7ff rgba(8, 2, 17, .9);
}

.review-proof-modal__panel::-webkit-scrollbar {
  width: 10px;
}

.review-proof-modal__panel::-webkit-scrollbar-track {
  margin: 22px 0;
  border-radius: 999px;
  background: rgba(8, 2, 17, .72);
}

.review-proof-modal__panel::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 2, 17, .96);
  border-radius: 999px;
  background: linear-gradient(180deg, #38e7ff, #ff4ddd, #fff0ad);
  box-shadow: 0 0 14px rgba(56, 231, 255, .32);
}

/* 후기 모달 스크롤바 — 카드 등급(홈 리뷰 그리드) 팔레트와 동일 톤 */
.review-proof-modal--legendary .review-proof-modal__panel {
  scrollbar-color: #ffc56d rgba(8, 3, 12, .9);
}

.review-proof-modal--legendary .review-proof-modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #fff0ad, #ffc56d, #e8a84a);
  box-shadow: 0 0 14px rgba(255, 213, 143, .38);
}

.review-proof-modal--epic .review-proof-modal__panel {
  scrollbar-color: #ff87ec rgba(8, 2, 17, .9);
}

.review-proof-modal--epic .review-proof-modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9cf5, #ff4ddd, #a33dff);
  box-shadow: 0 0 14px rgba(255, 77, 221, .34);
}

.review-proof-modal--rare .review-proof-modal__panel {
  scrollbar-color: #91f1ff rgba(8, 2, 17, .9);
}

.review-proof-modal--rare .review-proof-modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #bff8ff, #38e7ff, #2ab8d9);
  box-shadow: 0 0 14px rgba(56, 231, 255, .32);
}

.review-proof-modal--normal .review-proof-modal__panel {
  scrollbar-color: #d9c7e9 rgba(8, 2, 17, .9);
}

.review-proof-modal--normal .review-proof-modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ebe2f4, #c9b4dc, #9a87ad);
  box-shadow: 0 0 12px rgba(198, 182, 216, .28);
}

.review-proof-modal__close {
  position: sticky;
  top: 16px;
  left: calc(100% - 62px);
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: 16px 16px -60px auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  color: #fff;
  background: rgba(8, 2, 16, .72);
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
}

.review-proof-modal__body {
  display: grid;
  grid-template-columns: minmax(280px, .74fr) minmax(320px, 1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
}

.review-proof-modal__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  border-radius: 28px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in srgb, var(--rm-visual-glow-a) 22%, transparent), transparent 58%),
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rm-visual-glow-b) 18%, transparent), transparent 42%),
    rgba(3, 0, 8, .4);
  border: 2px solid var(--rm-visual-border);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rm-visual-border) 50%, transparent),
    0 0 26px var(--rm-visual-glow-a),
    0 0 56px var(--rm-visual-glow-b),
    0 0 96px var(--rm-visual-glow-c),
    inset 0 0 40px var(--rm-visual-inset);
  animation: review-proof-modal-neon-pulse 2.6s ease-in-out infinite;
}

.review-proof-modal__visual::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 36px;
  pointer-events: none;
  background:
    conic-gradient(
      from 120deg,
      color-mix(in srgb, var(--rm-visual-glow-a) 55%, transparent),
      color-mix(in srgb, var(--rm-visual-glow-b) 45%, transparent),
      color-mix(in srgb, var(--rm-visual-glow-c) 50%, transparent),
      color-mix(in srgb, var(--rm-visual-glow-a) 55%, transparent)
    );
  filter: blur(14px);
  opacity: .55;
  animation: review-proof-modal-neon-scan 10s linear infinite;
}

.review-proof-modal__visual::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  pointer-events: none;
  box-shadow:
    inset 0 0 24px color-mix(in srgb, var(--rm-visual-glow-a) 18%, transparent),
    inset 0 0 2px 1px color-mix(in srgb, var(--rm-visual-border) 25%, transparent);
  z-index: 1;
}

.review-proof-modal__visual img {
  position: relative;
  z-index: 2;
  width: min(78%, 360px);
  max-height: 320px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px var(--rm-img-drop-1))
    drop-shadow(0 0 28px var(--rm-img-drop-2))
    drop-shadow(0 0 48px color-mix(in srgb, var(--rm-img-drop-1) 40%, transparent));
}

.review-proof-modal__badge {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--rm-nick-fg);
  background: var(--rm-nick-bg);
  border: 1px solid var(--rm-nick-border);
  box-shadow: 0 0 20px var(--rm-nick-glow);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-shadow: 0 0 14px color-mix(in srgb, var(--rm-nick-fg) 38%, transparent);
}

.review-proof-modal__content h2 {
  margin: 16px 0 10px;
  color: #fff;
  font-size: clamp(20px, 2.35vw, 36px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.review-proof-modal__meta {
  margin: 0 0 22px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
}

.review-proof-modal__content blockquote {
  margin: 0;
  padding: 22px;
  border-radius: 22px;
  color: #eadbff;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(205, 116, 255, .18);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.8;
}

.review-proof-modal__winner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}

.review-proof-modal__winner span,
.review-proof-modal__winner strong {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 13px;
  border-radius: 999px;
  font-weight: 1000;
}

.review-proof-modal__winner span {
  color: var(--rm-nick-fg);
  background: var(--rm-nick-bg);
  border: 1px solid var(--rm-nick-border);
  box-shadow: 0 0 18px var(--rm-nick-glow);
  text-shadow: 0 0 12px color-mix(in srgb, var(--rm-nick-fg) 35%, transparent);
}

.review-proof-modal__winner strong {
  color: var(--rm-nick-fg);
  background: var(--rm-nick-bg);
  border: 1px solid var(--rm-nick-border);
  box-shadow: 0 0 22px var(--rm-nick-glow);
  text-shadow: 0 0 16px color-mix(in srgb, var(--rm-nick-fg) 42%, transparent);
}

.review-proof-modal__proof {
  padding: 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
}

.review-proof-modal__proof-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 18px;
  align-items: end;
  margin-bottom: 16px;
}

.review-proof-modal__proof-head h3 {
  width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 38px);
}

.review-proof-modal__proof-head span {
  color: #cdb9e6;
  line-height: 1.6;
}

.review-proof-modal__proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.review-proof-modal__proof-grid article {
  min-height: 160px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 77, 221, .10), rgba(56, 231, 255, .075)),
    rgba(3, 0, 8, .42);
  border: 1px dashed rgba(255, 240, 173, .32);
}

.review-proof-modal__proof-grid span {
  color: #8ff5ff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.review-proof-modal__proof-grid strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 18px;
}

.review-proof-modal__proof-grid p {
  margin: 8px 0 0;
  color: #cdb9e6;
  line-height: 1.6;
}

@media (max-width: 1180px) {
  .sound-toggle {
    min-width: 46px;
    width: 46px;
    padding: 0;
  }

  .sound-toggle .sound-text {
    display: none;
  }
}

@media (max-width: 560px) {
  .sound-consent-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .header-actions {
    gap: 7px;
  }

  .sound-toggle,
  .icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}

/* Mobile layout polish */
@media (max-width: 820px) {
  .review-proof-modal {
    padding: 12px;
  }

  .review-proof-modal__body,
  .review-proof-modal__proof-grid {
    grid-template-columns: 1fr;
  }

  .review-proof-modal__body {
    padding: 24px 18px;
  }

  .review-proof-modal__proof {
    padding: 0 18px 24px;
  }

  .review-proof-modal__visual {
    min-height: 260px;
  }

  .review-proof-modal__visual img {
    max-height: 230px;
  }

  .box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  .product-card {
    min-height: 390px !important;
    padding: 16px 12px 14px;
    border-radius: 20px;
  }

  .product-copy h3 {
    font-size: clamp(17px, 4.6vw, 22px);
  }

  .product-copy p {
    font-size: 13px;
    line-height: 1.45;
  }

  .price {
    margin-top: 10px;
    font-size: clamp(23px, 6vw, 31px);
  }

  .buy-btn {
    height: 48px;
    margin-top: 14px;
    border-radius: 14px;
  }

  .rank-panel {
    overflow: hidden;
  }

  .rank-grid {
    display: flex !important;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .rank-grid::-webkit-scrollbar {
    display: none;
  }

  .rank-card {
    flex: 0 0 68%;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .section-shell {
    width: min(96vw, 560px);
  }

  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .meta-card {
    min-height: 82px;
    padding: 14px;
  }

  .meta-card strong {
    font-size: 22px;
  }

  .product-card {
    min-height: 360px !important;
  }

  .product-card .css-neon-box-scene.box-card {
    --s: clamp(118px, 33vw, 150px) !important;
  }

  .rank-card {
    flex-basis: 66%;
  }
}


/* Site footer */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(42px, 5vw, 92px);
  padding: 0 0 34px;
  border-top: 1px solid rgba(205, 116, 255, 0.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(56, 231, 255, 0.10), transparent 34%),
    radial-gradient(circle at 82% 10%, rgba(255, 77, 221, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(7, 2, 12, 0.20), rgba(3, 0, 10, 0.92));
}

.site-footer__shell {
  width: min(100%, var(--content));
  max-width: 100%;
  margin-inline: auto;
}

.site-footer__support {
  transform: translateY(-28px);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: clamp(22px, 2vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 20%, rgba(255, 77, 221, 0.18), transparent 32%),
    linear-gradient(135deg, rgba(25, 7, 44, 0.96), rgba(9, 3, 18, 0.96));
  border: 1px solid rgba(255, 130, 237, 0.26);
  box-shadow: 0 0 42px rgba(150, 52, 255, 0.20);
}

.site-footer__kicker {
  margin: 0 0 8px;
  color: #8ff5ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.site-footer__support h2 {
  margin: 0;
  font-size: clamp(30px, 2.4vw, 48px);
}

.site-footer__support p:not(.site-footer__kicker) {
  margin: 10px 0 0;
  color: #d2bee8;
  line-height: 1.7;
}

.site-footer__live-btn,
.site-footer__app-actions a,
.floating-live-chat {
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  padding: 0 20px;
  border-radius: 18px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 0 28px rgba(255, 77, 221, 0.28);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.65fr) minmax(0, 0.75fr);
  gap: clamp(20px, 2.4vw, 42px);
  padding: 12px 0 34px;
}

.site-footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  line-height: 0.92;
}

.site-footer__logo span {
  color: #e18dff;
  font-size: 36px;
  font-weight: 900;
  font-style: italic;
  text-shadow: 0 0 22px rgba(208, 98, 255, 0.64);
}

.site-footer__logo strong {
  margin-top: 8px;
  padding-left: 0;
  color: #efcbff;
  font-size: 13px;
  letter-spacing: 10px;
  transform: translateX(5px);
}

.site-footer__brand > p,
.site-footer__app p,
.site-footer__contact p {
  margin: 0;
  color: #cdb9e6;
  line-height: 1.7;
}

.site-footer__contact {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.site-footer__contact b {
  color: #fff;
}

.site-footer__links,
.site-footer__app {
  display: grid;
  align-content: start;
  gap: 10px;
}

.site-footer__links h3,
.site-footer__app h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 18px;
}

.site-footer__links a {
  color: #bfa8d8;
  font-weight: 800;
}

.site-footer__links a:hover,
.site-footer__company a:hover {
  color: #fff;
}

.site-footer__app-logo {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 18%, rgba(56, 231, 255, .16), transparent 34%),
    rgba(13, 5, 22, .74);
  border: 1px solid rgba(255, 130, 237, .24);
  box-shadow:
    0 0 24px rgba(255, 77, 221, .12),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.site-footer__app-logo img {
  display: block;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  box-shadow:
    0 0 20px rgba(56, 231, 255, .20),
    0 0 34px rgba(255, 77, 221, .18);
}

.site-footer__app-logo strong {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
}

.site-footer__app-logo span {
  display: block;
  margin-top: 4px;
  color: #8ff5ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.site-footer__app-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.site-footer__app-actions a {
  min-height: 46px;
  border-radius: 14px;
  background: rgba(31, 10, 50, 0.88);
  border: 1px solid rgba(255, 130, 237, 0.28);
  box-shadow: none;
}

.site-footer__company {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(205, 116, 255, 0.16);
  color: #a994bf;
  font-size: 13px;
  line-height: 1.8;
}

.site-footer__company div,
.site-footer__company nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.site-footer__company b {
  color: #e8d9ff;
}

.site-footer__copy {
  margin: 18px 0 0;
  color: #7f698e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.floating-live-chat {
  position: fixed;
  right: max(24px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  z-index: 42;
  min-width: 158px;
  min-height: 62px;
  padding: 10px 18px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.floating-live-chat span,
.floating-live-chat strong {
  display: block;
}

.floating-live-chat strong {
  margin-top: 3px;
  color: #fff0ad;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .site-footer__support,
  .site-footer__company {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  .floating-live-chat {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    min-width: 132px;
    min-height: 54px;
    font-size: 13px;
  }
}


/* Korean typography patch */
:root {
  --font-kr-body: 'Noto Sans KR', 'Pretendard', Arial, sans-serif;
  --font-kr-display: 'Black Han Sans', 'Noto Sans KR', 'Pretendard', Arial, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-kr-body);
  word-break: keep-all;
}

.main-nav a,
.wallet-chip,
.icon-btn,
.sound-toggle {
  font-family: var(--font-kr-body);
}

.brand-main,
.hero h1,
.live-hero h1,
.unboxing-title h1,
.radar-hero h1,
.vault-hero h1,
.inventory-hero h1 {
  font-family: var(--font-kr-display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.main-nav a {
  font-size: 15px;
  letter-spacing: -0.02em;
}

.sound-toggle {
  min-width: 118px;
}



/* =========================================
   RANDOM BOX TIER THEMES
   가격이 낮을수록 단순, 높을수록 화려
========================================= */
.product-copy .tier-line{
  display:inline-block;
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.8;
}
.product-card[class*="theme-tier-"]{
  isolation:isolate;
}
.product-card[class*="theme-tier-"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.92;
}
.product-card[class*="theme-tier-"]::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:20px;
  pointer-events:none;
  z-index:0;
}
.product-card > *{
  position:relative;
  z-index:1;
}
.badge.theme-tier-1,.badge.theme-tier-2,.badge.theme-tier-3,.badge.theme-tier-4,.badge.theme-tier-5,.badge.theme-tier-6{
  backdrop-filter:blur(10px);
}
.product-card .product-box-img{
  transition:transform .28s ease, filter .28s ease;
}
.product-card:hover .product-box-img{
  transform:translateY(-4px) scale(1.03);
}
.product-card.theme-tier-1{
  border-color:rgba(136, 127, 255, .28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 18px rgba(102, 90, 215, .16);
}
.product-card.theme-tier-1::before{
  background:
    radial-gradient(circle at 50% 26%, rgba(111, 99, 255, .16), transparent 28%),
    linear-gradient(180deg, rgba(17, 13, 36, .98), rgba(8, 6, 18, .98));
}
.product-card.theme-tier-1::after{
  border:1px solid rgba(111, 99, 255, .10);
}
.product-card.theme-tier-1 .product-box-img{
  filter:drop-shadow(0 0 12px rgba(111, 99, 255, .22));
}
.product-card.theme-tier-1 .price,
.product-card.theme-tier-1 .tier-line{
  color:#b8bcff;
}
.badge.theme-tier-1{
  background:rgba(111,99,255,.14);
  border:1px solid rgba(140,130,255,.24);
  color:#d8dbff;
}

.product-card.theme-tier-2{
  border-color:rgba(228, 81, 255, .30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 22px rgba(194, 62, 255, .18);
}
.product-card.theme-tier-2::before{
  background:
    radial-gradient(circle at 48% 24%, rgba(228,81,255,.18), transparent 30%),
    linear-gradient(180deg, rgba(24, 8, 40, .98), rgba(10, 3, 18, .98));
}
.product-card.theme-tier-2::after{
  border:1px solid rgba(255, 132, 239, .12);
}
.product-card.theme-tier-2 .product-box-img{
  filter:drop-shadow(0 0 18px rgba(230, 89, 255, .26));
}
.product-card.theme-tier-2 .price,
.product-card.theme-tier-2 .tier-line{
  color:#f6a3ff;
}
.badge.theme-tier-2{
  background:rgba(233,91,255,.14);
  border:1px solid rgba(255,132,239,.28);
  color:#ffd7fd;
}

.product-card.theme-tier-3{
  border-color:rgba(83, 232, 255, .26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 28px rgba(52, 196, 255, .18);
}
.product-card.theme-tier-3::before{
  background:
    radial-gradient(circle at 50% 22%, rgba(82,225,255,.18), transparent 30%),
    radial-gradient(circle at 50% 26%, rgba(206,76,255,.15), transparent 46%),
    linear-gradient(180deg, rgba(11, 18, 34, .98), rgba(7, 7, 18, .98));
}
.product-card.theme-tier-3::after{
  border:1px solid rgba(103, 231, 255, .14);
  box-shadow:inset 0 0 20px rgba(56, 205, 255, .06);
}
.product-card.theme-tier-3 .corner-lines::before,
.product-card.theme-tier-3 .corner-lines::after{
  border-color:rgba(77, 233, 255, .5);
}
.product-card.theme-tier-3 .product-box-img{
  filter:drop-shadow(0 0 20px rgba(82,225,255,.24)) drop-shadow(0 0 26px rgba(216,84,255,.18));
}
.product-card.theme-tier-3 .price,
.product-card.theme-tier-3 .tier-line{
  color:#95f1ff;
}
.badge.theme-tier-3{
  background:linear-gradient(135deg, rgba(67,216,255,.16), rgba(205,69,255,.18));
  border:1px solid rgba(109,238,255,.30);
  color:#e9fdff;
}

.product-card.theme-tier-4{
  border-color:rgba(69, 220, 255, .28);
  box-shadow:0 0 32px rgba(53, 207, 255, .20), inset 0 0 0 1px rgba(255,255,255,.03);
}
.product-card.theme-tier-4::before{
  background:
    radial-gradient(circle at 50% 18%, rgba(76,231,255,.22), transparent 26%),
    radial-gradient(circle at 52% 30%, rgba(255,72,205,.16), transparent 44%),
    linear-gradient(180deg, rgba(13, 15, 36, .98), rgba(8, 4, 19, .98));
}
.product-card.theme-tier-4::after{
  border:1px solid rgba(86, 233, 255, .20);
  box-shadow:0 0 0 1px rgba(255, 94, 232, .08) inset;
}
.product-card.theme-tier-4 .product-box-img{
  filter:drop-shadow(0 0 24px rgba(74,228,255,.26)) drop-shadow(0 0 34px rgba(255,76,224,.20));
}
.product-card.theme-tier-4 .price,
.product-card.theme-tier-4 .tier-line{
  color:#87f7ff;
}
.badge.theme-tier-4{
  background:linear-gradient(135deg, rgba(76,231,255,.18), rgba(255,76,220,.18));
  border:1px solid rgba(123,239,255,.32);
  color:#f2ffff;
}

.product-card.theme-tier-5{
  border-color:rgba(255, 185, 87, .34);
  box-shadow:0 0 34px rgba(255, 178, 74, .18), 0 0 16px rgba(255, 80, 235, .12), inset 0 0 0 1px rgba(255,255,255,.03);
}
.product-card.theme-tier-5::before{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,195,99,.22), transparent 24%),
    radial-gradient(circle at 54% 30%, rgba(222,82,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(25, 14, 33, .98), rgba(10, 6, 16, .98));
}
.product-card.theme-tier-5::after{
  border:1px solid rgba(255, 201, 112, .20);
  box-shadow:0 0 0 1px rgba(255, 196, 103, .08) inset;
}
.product-card.theme-tier-5 .product-box-img{
  filter:drop-shadow(0 0 24px rgba(255,195,99,.24)) drop-shadow(0 0 34px rgba(222,82,255,.18));
}
.product-card.theme-tier-5 .price,
.product-card.theme-tier-5 .tier-line{
  color:#ffd58d;
}
.badge.theme-tier-5{
  background:linear-gradient(135deg, rgba(255,193,98,.18), rgba(232,84,255,.15));
  border:1px solid rgba(255,205,134,.34);
  color:#fff1cf;
}

.product-card.theme-tier-6{
  border-color:rgba(255, 214, 127, .36);
  box-shadow:0 0 46px rgba(255, 205, 110, .18), 0 0 26px rgba(82, 236, 255, .18), 0 0 16px rgba(255, 83, 235, .14), inset 0 0 0 1px rgba(255,255,255,.04);
}
.product-card.theme-tier-6::before{
  background:
    radial-gradient(circle at 50% 14%, rgba(255,209,120,.25), transparent 22%),
    radial-gradient(circle at 48% 24%, rgba(87,240,255,.18), transparent 36%),
    radial-gradient(circle at 52% 34%, rgba(255,83,235,.18), transparent 46%),
    linear-gradient(180deg, rgba(24, 12, 30, .98), rgba(8, 5, 14, .98));
}
.product-card.theme-tier-6::after{
  border:1px solid rgba(255, 215, 133, .26);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 0 28px rgba(255, 208, 117, .05),
    0 0 0 1px rgba(84, 233, 255, .08);
}
.product-card.theme-tier-6 .corner-lines::before,
.product-card.theme-tier-6 .corner-lines::after{
  border-color:rgba(255, 210, 118, .65);
}
.product-card.theme-tier-6 .product-box-img{
  filter:drop-shadow(0 0 26px rgba(255,210,118,.28)) drop-shadow(0 0 40px rgba(84,233,255,.20)) drop-shadow(0 0 54px rgba(255,83,235,.18));
}
.product-card.theme-tier-6 .price,
.product-card.theme-tier-6 .tier-line{
  color:#ffe2aa;
}
.badge.theme-tier-6{
  background:linear-gradient(135deg, rgba(255,209,120,.20), rgba(72,227,255,.16), rgba(255,83,235,.16));
  border:1px solid rgba(255,220,148,.34);
  color:#fff9eb;
}



/* Home random box lineup layout update */
.box-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(320px, 1fr));
  gap:24px;
  align-items:stretch;
}

.product-card{
  min-width:0;
  height:auto;
}

.product-card .product-box-img{
  width:min(100%, 320px);
  height:auto;
  object-fit:contain;
  margin-inline:auto;
}

/* ultra wide desktop: 5 cards per row */
@media (min-width: 2300px){
  .box-grid{
    grid-template-columns:repeat(5, minmax(380px, 1fr));
  }
}

/* large desktop */
@media (min-width: 1800px) and (max-width: 2299px){
  .box-grid{
    grid-template-columns:repeat(4, minmax(340px, 1fr));
  }
}

/* standard desktop */
@media (min-width: 1280px) and (max-width: 1799px){
  .box-grid{
    grid-template-columns:repeat(3, minmax(320px, 1fr));
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1279px){
  .box-grid{
    grid-template-columns:repeat(2, minmax(280px, 1fr));
  }
}

/* mobile: 2 per row */
@media (max-width: 767px){
  .box-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .product-card{
    padding:18px 14px 16px;
    border-radius:18px;
  }

  .product-card .product-box-img{
    width:100%;
    max-width:220px;
  }

  .product-copy h3{
    font-size:18px;
  }

  .product-copy p{
    font-size:12px;
    min-height:auto;
  }

  .product-copy .tier-line{
    font-size:10px;
  }

  .buy-btn{
    min-height:42px;
    font-size:13px;
    padding:12px 10px;
  }
}



/* =========================================
   CSS-only neon cyberpunk box
   이미지 없이 HTML/CSS만으로 그리는 박스
========================================= */
.css-neon-box-scene{
  --s: 260px;
  --half: calc(var(--s) / 2);
  --box-bg: rgba(16, 6, 32, .96);
  --box-panel: rgba(7, 2, 18, .96);
  --box-line: #a33dff;
  --box-glow: #ff4ddd;
  --box-alt: #38e7ff;
  --box-text: #fff;
  position:relative;
  width:var(--s);
  height:calc(var(--s) * .9);
  margin:0 auto;
  perspective:1200px;
  pointer-events:none;
  transform-style:preserve-3d;
}

.css-neon-box{
  position:absolute;
  left:50%;
  top:8%;
  width:var(--s);
  height:var(--s);
  transform-style:preserve-3d;
  transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg);
  animation:cssBoxIdleFloat 3.4s ease-in-out infinite;
}

.css-box-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 18%, transparent), transparent 55%),
    var(--box-panel);
  border:2px solid color-mix(in srgb, var(--box-line) 72%, white 8%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.035),
    inset 0 0 28px color-mix(in srgb, var(--box-glow) 16%, transparent),
    0 0 18px color-mix(in srgb, var(--box-glow) 24%, transparent);
  backface-visibility:visible;
}

.css-box-face::before{
  content:"";
  position:absolute;
  inset:8%;
  border:2px solid color-mix(in srgb, var(--box-glow) 72%, transparent);
  clip-path:polygon(0 16%,16% 0,84% 0,100% 16%,100% 84%,84% 100%,16% 100%,0 84%);
  filter:drop-shadow(0 0 7px var(--box-glow));
}

.css-box-face::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--box-glow) 60%, transparent) 9%, transparent 10%, transparent 90%, color-mix(in srgb, var(--box-alt) 60%, transparent) 91%, transparent 92%),
    linear-gradient(0deg, transparent 8%, color-mix(in srgb, var(--box-alt) 50%, transparent) 9%, transparent 10%, transparent 90%, color-mix(in srgb, var(--box-glow) 48%, transparent) 91%, transparent 92%);
  opacity:.42;
  pointer-events:none;
}

.css-box-front{ transform:translateZ(var(--half)); }
.css-box-back{ transform:rotateY(180deg) translateZ(var(--half)); }
.css-box-right{ transform:rotateY(90deg) translateZ(var(--half)); }
.css-box-left{ transform:rotateY(-90deg) translateZ(var(--half)); }
.css-box-top{
  transform:rotateX(90deg) translateZ(var(--half));
  transform-origin:center center;
  transition:transform .85s cubic-bezier(.16,.84,.25,1), filter .4s ease;
}
.css-box-bottom{ transform:rotateX(-90deg) translateZ(var(--half)); }

.css-panel-inner{
  position:relative;
  z-index:2;
  width:78%;
  height:70%;
  display:grid;
  place-items:center;
  text-align:center;
  padding:8%;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 34%),
    rgba(0,0,0,.20);
  border:1px solid color-mix(in srgb, var(--box-glow) 38%, transparent);
}

.css-panel-inner--back{
  transform:rotateY(180deg);
}

.css-box-back-line{
  margin-top:calc(var(--s) * .05);
  font-size:calc(var(--s) * .055);
  font-weight:900;
  letter-spacing:.2em;
  color:var(--box-alt);
  text-shadow:0 0 10px color-mix(in srgb, var(--box-alt) 60%, transparent);
}

.css-box-top-closed{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--s) * .045);
  width:82%;
  height:74%;
}

.css-top-seam{
  width:74%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--box-glow) 82%, transparent), transparent);
  box-shadow:0 0 10px color-mix(in srgb, var(--box-glow) 35%, transparent);
}

.css-top-label{
  font-size:calc(var(--s) * .1);
  font-weight:900;
  letter-spacing:.36em;
  color:var(--box-alt);
  text-shadow:
    0 0 12px var(--box-alt),
    0 0 22px var(--box-glow);
}

.css-box-bottom-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(var(--s) * .03);
  width:86%;
  height:76%;
  transform:rotate(180deg);
}

.css-bottom-kicker{
  font-size:calc(var(--s) * .075);
  font-weight:900;
  letter-spacing:.28em;
  color:var(--box-alt);
  text-shadow:0 0 12px var(--box-glow), 0 0 18px var(--box-alt);
}

.css-bottom-main{
  font-size:calc(var(--s) * .058);
  font-weight:900;
  letter-spacing:.08em;
  color:var(--box-text);
  text-align:center;
  line-height:1.12;
  max-width:94%;
  text-shadow:
    0 0 8px rgba(255,255,255,.35),
    0 0 16px color-mix(in srgb, var(--box-glow) 35%, transparent);
}

.css-box-mark,
.css-top-diamond{
  color:var(--box-alt);
  text-shadow:0 0 10px var(--box-alt), 0 0 20px var(--box-glow);
  font-weight:900;
}

.css-box-mark{
  position:absolute;
  top:8%;
  left:50%;
  transform:translateX(-50%);
  font-size:calc(var(--s) * .09);
}

.css-box-logo{
  color:var(--box-text);
  font-family:var(--font-kr-display, 'Black Han Sans', sans-serif);
  font-size:calc(var(--s) * .155);
  line-height:.92;
  letter-spacing:.035em;
  text-shadow:
    0 0 8px white,
    0 0 18px var(--box-glow),
    0 0 32px var(--box-line);
}

.css-box-price{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  min-width:58%;
  padding:5px 10px;
  border-radius:8px;
  color:var(--box-text);
  font-weight:900;
  font-size:calc(var(--s) * .06);
  background:rgba(0,0,0,.42);
  border:1px solid color-mix(in srgb, var(--box-alt) 50%, transparent);
  text-shadow:0 0 10px var(--box-alt);
}

.css-side-question{
  position:relative;
  z-index:2;
  color:var(--box-text);
  font-size:calc(var(--s) * .34);
  font-weight:900;
  text-shadow:
    0 0 10px white,
    0 0 24px var(--box-glow),
    0 0 38px var(--box-alt);
}

.css-top-diamond{
  position:relative;
  z-index:2;
  font-size:calc(var(--s) * .28);
}

.css-box-shadow{
  position:absolute;
  left:50%;
  bottom:2%;
  width:78%;
  height:16%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--box-glow) 38%, transparent), transparent 70%);
  filter:blur(12px);
  opacity:.82;
}

.theme-tier-1.css-neon-box-scene{--box-line:#6f63ff;--box-glow:#7a68ff;--box-alt:#9aa0ff;--box-panel:rgba(9,8,25,.98)}
.theme-tier-2.css-neon-box-scene{--box-line:#b63cff;--box-glow:#ff4ddd;--box-alt:#e891ff;--box-panel:rgba(16,5,28,.98)}
.theme-tier-3.css-neon-box-scene{--box-line:#944bff;--box-glow:#b843ff;--box-alt:#38e7ff;--box-panel:rgba(10,8,32,.98)}
.theme-tier-4.css-neon-box-scene{--box-line:#38e7ff;--box-glow:#ff4ddd;--box-alt:#38e7ff;--box-panel:rgba(8,8,27,.98)}
.theme-tier-5.css-neon-box-scene{--box-line:#ffb84d;--box-glow:#ff4ddd;--box-alt:#ffd58f;--box-panel:rgba(19,9,23,.98)}
.theme-tier-6.css-neon-box-scene{--box-line:#ffd58f;--box-glow:#ff4ddd;--box-alt:#38e7ff;--box-panel:rgba(10,6,20,.98)}

.css-neon-box-scene.box-card{--s:260px;margin:32px auto 18px;}
.css-neon-box-scene.box-inventory{--s:270px;margin:38px auto 18px;}
.css-neon-box-scene.box-detail{--s:min(48vw,520px);height:calc(var(--s) * .92);}
.css-neon-box-scene.box-hero{--s:min(42vw,520px);height:calc(var(--s) * .92);}
.css-neon-box-scene.box-unboxing{--s:min(58vw,560px);height:calc(var(--s) * .92);}

.product-card .css-neon-box-scene,
.unopened-card .css-neon-box-scene{
  pointer-events:none;
}

.floating-box-button .css-neon-box-scene{
  pointer-events:none;
}

.floating-box-button.is-opening .css-neon-box{
  animation:cssBoxUnlockShake .16s linear infinite;
}

.floating-box-button.is-opening .css-box-top{
  transform-origin:center bottom;
  transform:rotateX(150deg) translateZ(var(--half)) translateY(calc(var(--s) * -.34));
  filter:brightness(1.45);
}

.floating-box-button.is-opening .css-box-front{
  filter:brightness(1.15);
}

.floating-box-button.is-hidden .css-neon-box-scene{
  opacity:0;
  transform:scale(.86);
  transition:.42s ease;
}

.detail-visual-card .css-neon-box-scene{
  z-index:3;
}

@keyframes cssBoxIdleFloat{
  0%,100%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translateY(0)}
  50%{transform:translateX(-50%) rotateX(-17deg) rotateY(-29deg) translateY(-12px)}
}

@keyframes cssBoxUnlockShake{
  0%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translate(0,0)}
  25%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translate(6px,-4px)}
  50%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translate(-6px,4px)}
  75%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translate(4px,3px)}
  100%{transform:translateX(-50%) rotateX(-18deg) rotateY(-32deg) translate(0,0)}
}

@media (max-width:767px){
  .css-neon-box-scene.box-card{--s:150px;margin:20px auto 10px;}
  .css-neon-box-scene.box-inventory{--s:190px;margin:26px auto 10px;}
  .css-neon-box-scene.box-detail{--s:min(82vw,360px);}
  .css-neon-box-scene.box-hero{--s:min(82vw,360px);}
  .css-neon-box-scene.box-unboxing{--s:min(92vw,380px);}
  .css-box-logo{letter-spacing:.02em;}
  .css-box-price{font-size:calc(var(--s) * .07);}
}

@media (max-width: 1180px) {
  .home-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .home-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-review-grid {
    grid-template-columns: 1fr;
  }

  .home-review-card {
    min-height: auto;
    grid-template-columns: 118px 1fr;
    grid-template-rows: auto;
  }

  .home-review-image {
    padding: 14px;
  }

  .home-review-image img {
    width: 94px;
    height: 94px;
  }

  .home-review-copy h3 {
    min-height: auto;
  }
}



/* =========================================
   CSS neon box refinement: closed lid + thicker lines
========================================= */
.css-neon-box-scene{
  --box-edge-width: 4px;
  --box-inner-edge-width: 3px;
}

.css-box-face{
  border-width: var(--box-edge-width);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.05),
    inset 0 0 34px color-mix(in srgb, var(--box-glow) 22%, transparent),
    0 0 22px color-mix(in srgb, var(--box-glow) 34%, transparent),
    0 0 42px color-mix(in srgb, var(--box-alt) 12%, transparent);
}

.css-box-face::before{
  inset: 7%;
  border-width: var(--box-inner-edge-width);
  filter:
    drop-shadow(0 0 8px var(--box-glow))
    drop-shadow(0 0 16px color-mix(in srgb, var(--box-alt) 40%, transparent));
}

.css-box-face::after{
  opacity: .58;
}

.css-panel-inner{
  border-width: 2px;
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.035),
    0 0 18px color-mix(in srgb, var(--box-glow) 18%, transparent);
}

.css-box-top{
  /* 큐브 상면: 중심 기준 (뒷면 꽂힘 완화) · 뚜껑 닫힌 상태 */
  transform: rotateX(90deg) translateZ(var(--half));
  transform-origin: center center;
}

.css-box-top::before{
  inset: 6%;
  border-width: 4px;
}

.css-box-top::after{
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 7%, color-mix(in srgb, var(--box-glow) 70%, transparent) 9%, transparent 11%, transparent 89%, color-mix(in srgb, var(--box-alt) 72%, transparent) 91%, transparent 93%),
    linear-gradient(0deg, transparent 7%, color-mix(in srgb, var(--box-alt) 60%, transparent) 9%, transparent 11%, transparent 89%, color-mix(in srgb, var(--box-glow) 62%, transparent) 91%, transparent 93%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--box-glow) 20%, transparent), transparent 42%);
}

.css-top-diamond{
  text-shadow:
    0 0 10px white,
    0 0 20px var(--box-glow),
    0 0 34px var(--box-alt);
}

.css-box-logo{
  text-shadow:
    0 0 10px white,
    0 0 20px var(--box-glow),
    0 0 38px var(--box-line),
    0 0 54px color-mix(in srgb, var(--box-alt) 22%, transparent);
}

.css-box-price{
  border-width: 2px;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.03),
    0 0 16px color-mix(in srgb, var(--box-alt) 18%, transparent);
}

.css-side-question{
  text-shadow:
    0 0 12px white,
    0 0 28px var(--box-glow),
    0 0 46px var(--box-alt);
}

.css-hero-box .css-neon-box-scene.box-hero{
  --s: min(42vw, 560px);
  transform: translateY(18px);
}

.hero-box.css-hero-box{
  width: min(48vw, 650px);
  min-height: 520px;
  display: grid;
  place-items: center;
}

.hero-box.css-hero-box .beam{
  position: absolute;
  z-index: 0;
}

.hero-box.css-hero-box .css-neon-box-scene{
  z-index: 2;
}

.hero-sound-boost {
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 8;
  width: min(82%, 360px);
  min-height: 82px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 14px 18px;
  border: 1px solid rgba(56, 231, 255, .72);
  border-radius: 22px;
  color: #fff;
  cursor: pointer;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 20% 20%, rgba(56, 231, 255, .30), transparent 38%),
    radial-gradient(circle at 82% 28%, rgba(255, 77, 221, .32), transparent 42%),
    rgba(8, 2, 18, .88);
  box-shadow:
    0 0 26px rgba(56, 231, 255, .48),
    0 0 58px rgba(255, 77, 221, .30),
    inset 0 0 24px rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  animation: heroSoundBoostPulse 1.08s ease-in-out infinite;
}

.hero-sound-boost[hidden] {
  display: none;
}

.hero-sound-boost span {
  color: #8ff5ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-shadow: 0 0 16px rgba(56, 231, 255, .72);
}

.hero-sound-boost strong {
  font-size: clamp(17px, 1.2vw, 22px);
  text-shadow: 0 0 18px rgba(255, 77, 221, .68);
}

.hero-sound-boost::before,
.hero-sound-boost::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 28px;
  border: 1px solid rgba(255, 77, 221, .38);
  opacity: .8;
  pointer-events: none;
  animation: heroSoundBoostRing 1.08s ease-out infinite;
}

.hero-sound-boost::after {
  animation-delay: .38s;
}

@keyframes heroSoundBoostPulse {
  50% {
    transform: translateX(-50%) translateY(-5px) scale(1.035);
    filter: brightness(1.18);
  }
}

@keyframes heroSoundBoostRing {
  to {
    inset: -22px;
    opacity: 0;
  }
}

/* 언박싱 클릭 시 뚜껑이 실제로 열리도록 */
.floating-box-button.is-opening .css-box-top{
  transform-origin:center bottom;
  transform: rotateX(158deg) translateZ(var(--half)) translateY(calc(var(--s) * -.40));
  filter: brightness(1.55);
}

.floating-box-button.is-opening .css-box-top::after{
  opacity: .95;
}

.floating-box-button.is-opening .css-box-front,
.floating-box-button.is-opening .css-box-right{
  filter: brightness(1.18);
}

@media (max-width: 767px){
  .css-neon-box-scene{
    --box-edge-width: 3px;
    --box-inner-edge-width: 2px;
  }

  .hero-box.css-hero-box{
    width: 100%;
    min-height: 360px;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: min(82vw, 360px);
  }
}



/* =========================================
   CSS neon box layout fix
   박스가 텍스트 영역을 침범하지 않도록 영역 분리
========================================= */

/* 홈 랜덤박스 카드: 이미지/텍스트/버튼 영역을 명확히 분리 */
.product-card{
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 650px;
  overflow: hidden;
}

.product-card .css-neon-box-scene.box-card{
  --s: clamp(190px, 12vw, 250px);
  height: calc(var(--s) * 1.05);
  margin: 28px auto 18px;
}

.product-card .product-copy{
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

.product-card .product-copy h3{
  margin-top: 0;
}

.product-card .buy-btn{
  align-self: stretch;
  margin-top: 18px;
}

/* 홈 히어로 우측 박스: 히어로 텍스트 영역으로 넘어가지 않도록 고정 */
.hero-stage-wrap{
  min-width: 0;
  overflow: visible;
}

.hero-box.css-hero-box{
  position: relative;
  width: min(100%, 620px);
  min-height: clamp(360px, 32vw, 560px);
  margin-inline: auto;
  display: grid;
  place-items: center;
  overflow: visible;
}

.css-hero-box .css-neon-box-scene.box-hero{
  --s: clamp(300px, 28vw, 500px);
  width: var(--s);
  height: calc(var(--s) * 1.02);
  transform: none;
}

/* 상품 상세페이지: 박스 비주얼 영역 안에서만 보이게 제한 */
.detail-visual-card{
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: clamp(520px, 46vw, 760px);
}

.detail-visual-card .css-neon-box-scene.box-detail{
  --s: clamp(320px, 35vw, 500px);
  width: var(--s);
  height: calc(var(--s) * 1.02);
  margin: 0 auto;
}

/* 인벤토리 미개봉 박스: 박스/텍스트/버튼 분리 */
.unopened-card{
  display: flex;
  flex-direction: column;
  align-items: start;
  min-height: 570px;
  overflow: hidden;
}

.unopened-card .css-neon-box-scene.box-inventory{
  --s: clamp(210px, 15vw, 265px);
  height: calc(var(--s) * 1.03);
  margin: 34px auto 18px;
}

.unopened-card h3{
  margin-top: 0;
}

.unopened-card .tier-line{
  min-height: 18px;
}

.unopened-card .open-cta{
  align-self: stretch;
  margin-top: 18px;
}

/* 언박싱 화면: 박스가 안내 문구나 슬롯 영역을 침범하지 않도록 크기 제한 */
.floating-box-button{
  display: grid;
  place-items: center;
  min-height: clamp(360px, 48vw, 650px);
}

.floating-box-button .css-neon-box-scene.box-unboxing{
  --s: clamp(310px, 38vw, 520px);
  width: var(--s);
  height: calc(var(--s) * 1.04);
}

/* 5열 구간에서는 카드 폭이 좁아지므로 박스를 조금 더 줄임 */
@media (min-width: 2300px){
  .product-card{
    min-height: 620px;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(190px, 9vw, 235px);
  }
}

/* 4열/3열 데스크탑에서는 균형 있게 조정 */
@media (min-width: 1280px) and (max-width: 2299px){
  .product-card{
    min-height: 640px;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(210px, 14vw, 260px);
  }
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1279px){
  .product-card{
    min-height: 590px;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(190px, 24vw, 250px);
  }

  .unopened-card{
    min-height: 540px;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(200px, 26vw, 250px);
  }
}

/* 모바일: 2열 유지, 박스가 텍스트를 밀어내지 않도록 더 작게 */
@media (max-width: 767px){
  .product-card{
    min-height: 450px;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(120px, 38vw, 165px);
    height: calc(var(--s) * 1.08);
    margin: 18px auto 10px;
  }

  .product-card .product-copy{
    min-height: 126px;
    padding-top: 4px;
  }

  .product-card .product-copy h3{
    line-height: 1.15;
    min-height: 42px;
  }

  .product-card .product-copy p{
    line-height: 1.45;
  }

  .hero-box.css-hero-box{
    min-height: 340px;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: clamp(260px, 76vw, 350px);
  }

  .detail-visual-card{
    min-height: 420px;
  }

  .detail-visual-card .css-neon-box-scene.box-detail{
    --s: clamp(250px, 76vw, 350px);
  }

  .unopened-card{
    min-height: 480px;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(150px, 46vw, 205px);
    height: calc(var(--s) * 1.08);
    margin: 24px auto 10px;
  }

  .floating-box-button .css-neon-box-scene.box-unboxing{
    --s: clamp(260px, 82vw, 360px);
  }
}

/* 아주 작은 화면에서는 카드 2열이 유지되더라도 텍스트 침범 방지 */
@media (max-width: 420px){
  .product-card{
    min-height: 430px;
    padding-inline: 10px;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(112px, 36vw, 145px);
  }

  .product-card .product-copy h3{
    font-size: 16px;
  }

  .product-card .product-copy p{
    font-size: 11px;
  }

  .product-card .buy-btn{
    font-size: 12px;
  }
}



/* =========================================
   CSS neon box layout fix v2
   박스/텍스트 영역을 더 여유 있게 분리 + DOPAMINE 글자 잘림 방지
========================================= */

/* 박스 내부 로고가 정중앙에 오고 DOPAMINE이 잘리지 않도록 구조 변경 */
.css-panel-inner{
  width: 86%;
  height: 74%;
  overflow: visible;
  padding: 7%;
}

.css-box-logo{
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s) * .012);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  transform: translateY(calc(var(--s) * .015));
}

.css-logo-dopamine{
  display: block;
  width: 100%;
  font-size: calc(var(--s) * .085);
  letter-spacing: .015em;
  text-align: center;
}

.css-logo-box{
  display: block;
  width: 100%;
  font-size: calc(var(--s) * .145);
  letter-spacing: .035em;
  text-align: center;
}

.css-box-mark{
  top: 6%;
}

.css-box-price{
  bottom: 6%;
  min-width: 68%;
  font-size: calc(var(--s) * .052);
}

/* 홈 랜덤박스 카드: 박스 행 높이를 크게 확보해서 텍스트 침범 방지 */
.product-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: start !important;
  min-height: 760px !important;
  overflow: hidden !important;
  gap: 0;
}

.product-card .css-neon-box-scene.box-card{
  --s: clamp(185px, 10.5vw, 245px);
  width: 100%;
  max-width: 340px;
  height: calc(var(--s) * 1.55) !important;
  margin: 36px auto 34px !important;
  align-self: start;
}

.product-card .css-neon-box{
  top: 5%;
}

.product-card .product-copy{
  min-height: 190px !important;
  padding-top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.product-card .product-copy h3{
  margin-top: 0 !important;
  line-height: 1.16;
}

.product-card .product-copy p{
  line-height: 1.62;
  min-height: 54px;
}

.product-card .product-copy .tier-line{
  margin-top: 10px;
}

.product-card .buy-btn{
  margin-top: 20px !important;
  align-self: end;
}

/* 5열에서도 텍스트 침범 방지를 위해 박스 자체는 더 작고 카드 높이는 충분히 */
@media (min-width: 2300px){
  .product-card{
    min-height: 735px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(178px, 8vw, 225px);
    height: calc(var(--s) * 1.60) !important;
    margin-top: 34px !important;
    margin-bottom: 36px !important;
  }
}

/* 4열/3열 데스크탑 */
@media (min-width: 1280px) and (max-width: 2299px){
  .product-card{
    min-height: 750px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(190px, 12vw, 250px);
    height: calc(var(--s) * 1.55) !important;
  }
}

/* 홈 히어로 우측 박스: 텍스트 영역 침범 방지 */
.hero-shell{
  grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr);
  column-gap: clamp(32px, 4vw, 86px);
}

.hero-stage-wrap{
  min-width: 0 !important;
  overflow: visible !important;
}

.hero-box.css-hero-box{
  width: min(100%, 620px) !important;
  min-height: clamp(430px, 36vw, 620px) !important;
  margin-inline: auto !important;
  display: grid !important;
  place-items: center !important;
}

.css-hero-box .css-neon-box-scene.box-hero{
  --s: clamp(310px, 26vw, 500px);
  width: var(--s);
  height: calc(var(--s) * 1.40) !important;
  margin: 0 auto !important;
  transform: none !important;
}

.css-hero-box .css-neon-box{
  top: 6%;
}

/* 상품 상세페이지: 이미지 전용 영역을 충분히 확보 */
.detail-visual-card{
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  min-height: clamp(650px, 52vw, 860px) !important;
}

.detail-visual-card .css-neon-box-scene.box-detail{
  --s: clamp(300px, 31vw, 500px);
  width: var(--s);
  height: calc(var(--s) * 1.45) !important;
  margin: 0 auto !important;
}

.detail-visual-card .css-neon-box{
  top: 5%;
}

/* 인벤토리 미개봉 박스: 박스 영역과 텍스트 영역을 더 크게 분리 */
.unopened-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 690px !important;
  overflow: hidden !important;
}

.unopened-card .css-neon-box-scene.box-inventory{
  --s: clamp(190px, 13vw, 250px);
  width: 100%;
  max-width: 340px;
  height: calc(var(--s) * 1.55) !important;
  margin: 46px auto 34px !important;
}

.unopened-card .css-neon-box{
  top: 5%;
}

.unopened-card h3{
  margin-top: 0 !important;
  line-height: 1.18;
}

.unopened-card p{
  min-height: 46px;
  line-height: 1.55;
}

.unopened-card .tier-line{
  display: block;
  min-height: 22px;
  margin-top: 6px;
}

.unopened-card strong{
  margin-top: 8px;
}

.unopened-card .open-cta{
  align-self: stretch;
  margin-top: 22px !important;
}

/* 언박싱: 박스 전용 영역을 넓게 잡아 안내 문구와 충돌 방지 */
.floating-box-button{
  display: grid !important;
  place-items: center !important;
  min-height: clamp(480px, 55vw, 760px) !important;
}

.floating-box-button .css-neon-box-scene.box-unboxing{
  --s: clamp(300px, 35vw, 500px);
  width: var(--s);
  height: calc(var(--s) * 1.48) !important;
  margin: 0 auto !important;
}

.floating-box-button .css-neon-box{
  top: 5%;
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1279px){
  .product-card{
    min-height: 700px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(180px, 23vw, 240px);
    height: calc(var(--s) * 1.58) !important;
    margin: 34px auto 32px !important;
  }

  .hero-shell{
    grid-template-columns: 1fr;
  }

  .hero-box.css-hero-box{
    min-height: 460px !important;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: clamp(320px, 52vw, 480px);
  }

  .unopened-card{
    min-height: 650px !important;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(180px, 24vw, 240px);
  }
}

/* 모바일: 2열 유지. 대신 박스는 더 작고 박스 전용 행은 충분히 확보 */
@media (max-width: 767px){
  .product-card{
    min-height: 535px !important;
    padding: 16px 12px 14px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(118px, 32vw, 155px);
    height: calc(var(--s) * 1.65) !important;
    margin: 20px auto 22px !important;
  }

  .product-card .product-copy{
    min-height: 190px !important;
    padding-top: 10px !important;
  }

  .product-card .product-copy h3{
    min-height: 42px;
    font-size: 16px;
    line-height: 1.18;
  }

  .product-card .product-copy p{
    min-height: 62px;
    font-size: 11px;
    line-height: 1.45;
  }

  .product-card .product-copy .tier-line{
    font-size: 9px;
  }

  .product-card .buy-btn{
    min-height: 42px;
    font-size: 12px;
    padding: 10px 8px;
  }

  .hero-box.css-hero-box{
    min-height: 430px !important;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: clamp(260px, 74vw, 340px);
    height: calc(var(--s) * 1.48) !important;
  }

  .detail-visual-card{
    min-height: 500px !important;
  }

  .detail-visual-card .css-neon-box-scene.box-detail{
    --s: clamp(240px, 72vw, 330px);
    height: calc(var(--s) * 1.48) !important;
  }

  .unopened-card{
    min-height: 560px !important;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(130px, 38vw, 180px);
    height: calc(var(--s) * 1.65) !important;
    margin: 28px auto 22px !important;
  }

  .unopened-card p{
    min-height: 58px;
    font-size: 12px;
  }

  .floating-box-button{
    min-height: 500px !important;
  }

  .floating-box-button .css-neon-box-scene.box-unboxing{
    --s: clamp(250px, 78vw, 350px);
    height: calc(var(--s) * 1.50) !important;
  }

  .css-logo-dopamine{
    font-size: calc(var(--s) * .078);
  }

  .css-logo-box{
    font-size: calc(var(--s) * .132);
  }
}

/* 아주 작은 화면 */
@media (max-width: 420px){
  .product-card{
    min-height: 520px !important;
    padding-inline: 9px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(105px, 31vw, 138px);
    height: calc(var(--s) * 1.72) !important;
  }

  .css-logo-dopamine{
    font-size: calc(var(--s) * .074);
  }

  .css-logo-box{
    font-size: calc(var(--s) * .126);
  }
}



/* =========================================
   CSS neon box spacing balance v3
   텍스트 침범은 막되 과한 여백을 줄인 버전
========================================= */

/* 홈 랜덤박스 카드: 박스/텍스트/버튼 분리는 유지하되 높이 축소 */
.random-box-section .section-head{
  margin-bottom: 14px;
}

.random-box-section .badge{
  top: 0;
  right: 0;
  padding: 6px 10px;
  border-radius: 0 26px 0 14px;
}

.product-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-height: 620px !important;
}

.product-card .css-neon-box-scene.box-card{
  --s: clamp(180px, 10vw, 235px);
  height: calc(var(--s) * 1.18) !important;
  margin: 8px auto 12px !important;
}

.product-card .css-neon-box{
  top: 0;
}

.product-card .product-copy{
  min-height: 145px !important;
  padding-top: 8px !important;
}

.product-card .product-copy p{
  min-height: 42px !important;
  line-height: 1.52;
}

.product-card .product-copy .tier-line{
  margin-top: 6px;
}

.product-card .buy-btn{
  margin-top: 14px !important;
}

/* 초대형 데스크탑 5열 */
@media (min-width: 2300px){
  .product-card{
    min-height: 595px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(170px, 7.6vw, 215px);
    height: calc(var(--s) * 1.20) !important;
    margin: 8px auto 12px !important;
  }
}

/* 4열/3열 데스크탑 */
@media (min-width: 1280px) and (max-width: 2299px){
  .product-card{
    min-height: 610px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(180px, 11vw, 238px);
    height: calc(var(--s) * 1.18) !important;
    margin: 8px auto 12px !important;
  }
}

/* 홈 히어로 우측 박스도 과한 높이 축소 */
.hero-box.css-hero-box{
  min-height: clamp(360px, 30vw, 520px) !important;
}

.css-hero-box .css-neon-box-scene.box-hero{
  --s: clamp(280px, 24vw, 460px);
  height: calc(var(--s) * 1.20) !important;
}

/* 상품 상세페이지 비주얼 영역 여백 축소 */
.detail-visual-card{
  min-height: clamp(540px, 44vw, 720px) !important;
}

.detail-visual-card .css-neon-box-scene.box-detail{
  --s: clamp(285px, 30vw, 470px);
  height: calc(var(--s) * 1.24) !important;
}

/* 인벤토리 미개봉 카드도 조금 더 타이트하게 */
.unopened-card{
  min-height: 610px !important;
}

.unopened-card .css-neon-box-scene.box-inventory{
  --s: clamp(180px, 12.5vw, 238px);
  height: calc(var(--s) * 1.16) !important;
  margin: 10px auto 14px !important;
}

.unopened-card p{
  min-height: 38px !important;
}

.unopened-card .open-cta{
  margin-top: 16px !important;
}

/* 언박싱 화면: 클릭 영역은 유지하되 박스 주변 여백 축소 */
.floating-box-button{
  min-height: clamp(410px, 48vw, 660px) !important;
}

.floating-box-button .css-neon-box-scene.box-unboxing{
  --s: clamp(290px, 34vw, 480px);
  height: calc(var(--s) * 1.26) !important;
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1279px){
  .product-card{
    min-height: 585px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(170px, 22vw, 225px);
    height: calc(var(--s) * 1.20) !important;
    margin: 10px auto 12px !important;
  }

  .hero-box.css-hero-box{
    min-height: 400px !important;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: clamp(300px, 48vw, 450px);
  }

  .unopened-card{
    min-height: 590px !important;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(170px, 23vw, 225px);
    height: calc(var(--s) * 1.18) !important;
    margin: 10px auto 14px !important;
  }
}

/* 모바일 2열: 여백 과하지 않게 줄이되 텍스트 침범 방지 유지 */
@media (max-width: 767px){
  .random-box-section .badge{
    top: 0;
    right: 0;
    padding: 5px 8px;
    border-radius: 0 18px 0 12px;
  }

  .product-card{
    min-height: 450px !important;
    padding: 14px 10px 12px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(105px, 30vw, 145px);
    height: calc(var(--s) * 1.24) !important;
    margin: 6px auto 10px !important;
  }

  .product-card .product-copy{
    min-height: 160px !important;
    padding-top: 4px !important;
  }

  .product-card .product-copy h3{
    min-height: 36px;
  }

  .product-card .product-copy p{
    min-height: 54px !important;
  }

  .hero-box.css-hero-box{
    min-height: 360px !important;
  }

  .css-hero-box .css-neon-box-scene.box-hero{
    --s: clamp(240px, 70vw, 330px);
    height: calc(var(--s) * 1.28) !important;
  }

  .detail-visual-card{
    min-height: 430px !important;
  }

  .detail-visual-card .css-neon-box-scene.box-detail{
    --s: clamp(230px, 68vw, 320px);
    height: calc(var(--s) * 1.28) !important;
  }

  .unopened-card{
    min-height: 500px !important;
  }

  .unopened-card .css-neon-box-scene.box-inventory{
    --s: clamp(120px, 36vw, 165px);
    height: calc(var(--s) * 1.22) !important;
    margin: 8px auto 10px !important;
  }

  .unopened-card p{
    min-height: 48px !important;
  }

  .floating-box-button{
    min-height: 430px !important;
  }

  .floating-box-button .css-neon-box-scene.box-unboxing{
    --s: clamp(240px, 74vw, 340px);
    height: calc(var(--s) * 1.30) !important;
  }
}

/* 작은 모바일 */
@media (max-width: 420px){
  .product-card{
    min-height: 450px !important;
  }

  .product-card .css-neon-box-scene.box-card{
    --s: clamp(100px, 29vw, 132px);
    height: calc(var(--s) * 1.38) !important;
  }
}



/* Auth / probability header helpers */
.auth-header-link {
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid rgba(214,137,255,.26);
  background: rgba(19,6,30,.78);
  color: #f7edff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: var(--shadow);
}

.auth-header-link.join {
  background: linear-gradient(135deg, rgba(121,32,233,.82), rgba(255,77,221,.82));
  border-color: rgba(255,130,237,.34);
}

.probability-btn {
  display: inline-grid;
  place-items: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,130,237,.28);
  background: rgba(31,10,50,.88);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .auth-header-link {
    display: none;
  }
}



/* =========================================
   Home hero music-reactive random box
   배경음 BPM에 맞춰 우측 랜덤박스가 작아졌다 커졌다 + (( )) 이펙트
========================================= */
.hero-box.css-hero-box {
  --hero-beat-scale: 1;
  --hero-beat-opacity: .32;
  --hero-beat-blur: 18px;
  --hero-beat-duration: .469s;
  --hero-tilt-x: 0deg;
  --hero-tilt-y: 0deg;
  --hero-tilt-shift-x: 0px;
  --hero-tilt-shift-y: 0px;
}

.hero-box.css-hero-box .css-neon-box-scene.box-hero {
  transform:
    translate3d(var(--hero-tilt-shift-x), var(--hero-tilt-shift-y), 0)
    rotateX(var(--hero-tilt-x))
    rotateY(var(--hero-tilt-y))
    scale(var(--hero-beat-scale)) !important;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 70ms linear, filter 70ms linear;
  filter:
    drop-shadow(0 0 var(--hero-beat-blur) rgba(255, 77, 221, .28))
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 1.4) rgba(56, 231, 255, .18));
}

.hero-box.css-hero-box .css-neon-box-scene.box-hero.hero-spin-scene {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.hero-box.css-hero-box .css-neon-box-scene.box-hero.hero-spin-scene:active {
  cursor: grabbing;
}

.hero-box.css-hero-box .css-neon-box.hero-spin-target.hero-float-idle {
  animation: cssBoxIdleFloat 3.4s ease-in-out infinite;
}

.hero-box.css-hero-box .css-neon-box.hero-spin-target:not(.hero-float-idle),
.hero-box.css-hero-box .css-neon-box.hero-spin-target.is-dragging,
.hero-box.css-hero-box .css-neon-box.hero-spin-target.is-spinning,
.hero-box.css-hero-box .css-neon-box.hero-spin-target.is-idle-reset {
  animation: none !important;
}

.hero-box.css-hero-box.is-music-on .css-neon-box-scene.box-hero {
  filter:
    drop-shadow(0 0 var(--hero-beat-blur) rgba(255, 77, 221, .42))
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 1.55) rgba(56, 231, 255, .26))
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 1.95) rgba(255, 213, 143, .13));
}

.hero-beat-rings {
  position: absolute;
  z-index: 1;
  inset: 4% -8%;
  pointer-events: none;
  opacity: var(--hero-beat-opacity);
  filter:
    drop-shadow(0 0 12px rgba(255, 77, 221, .60))
    drop-shadow(0 0 22px rgba(56, 231, 255, .36));
  transition: opacity 90ms linear;
}

.hero-beat-rings span {
  position: absolute;
  inset: 50% 50%;
  width: 74%;
  height: 72%;
  transform: translate(-50%, -50%) scale(var(--ring-scale, 1));
  opacity: .08;
}

.hero-beat-rings span::before,
.hero-beat-rings span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 29%;
  height: 78%;
  transform: translateY(-50%);
  border-color: rgba(255, 77, 221, .92);
  border-style: solid;
  box-shadow:
    0 0 12px rgba(255, 77, 221, .72),
    inset 0 0 12px rgba(56, 231, 255, .18);
}

.hero-beat-rings span::before {
  left: -4%;
  border-width: 4px 0 4px 4px;
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
}

.hero-beat-rings span::after {
  right: -4%;
  border-width: 4px 4px 4px 0;
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
}

.hero-beat-rings span:nth-child(1) {
  --ring-scale: .78;
}

.hero-beat-rings span:nth-child(2) {
  --ring-scale: 1.04;
}

.hero-beat-rings span:nth-child(3) {
  --ring-scale: 1.30;
}

.hero-box.css-hero-box.is-music-on .hero-beat-rings span {
  animation: heroBeatRing var(--hero-beat-duration) ease-out infinite;
}

.hero-box.css-hero-box.is-music-on .hero-beat-rings span:nth-child(2) {
  animation-delay: calc(var(--hero-beat-duration) * .14);
}

.hero-box.css-hero-box.is-music-on .hero-beat-rings span:nth-child(3) {
  animation-delay: calc(var(--hero-beat-duration) * .28);
}

.hero-box.css-hero-box.is-music-on::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 72%;
  height: 72%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--hero-beat-scale));
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 77, 221, .24), transparent 58%),
    radial-gradient(circle, rgba(56, 231, 255, .16), transparent 70%);
  filter: blur(18px);
  opacity: calc(var(--hero-beat-opacity) * .8);
  pointer-events: none;
}

@keyframes heroBeatRing {
  0% {
    opacity: .05;
    transform: translate(-50%, -50%) scale(calc(var(--ring-scale, 1) * .86));
  }

  28% {
    opacity: .92;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--ring-scale, 1) * 1.20));
  }
}

.badge.event {
  left: 18px;
  right: auto;
  background: linear-gradient(135deg, rgba(127, 36, 255, .26), rgba(255, 77, 221, .22));
  color: #f5ddff;
  border: 1px solid rgba(205, 116, 255, .42);
  box-shadow: 0 0 18px rgba(163, 61, 255, .20);
}

.event-price {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.event-price del {
  color: rgba(216, 198, 234, .66);
  font-size: clamp(18px, 1.2vw, 24px);
  font-weight: 900;
  text-decoration-color: rgba(255, 77, 221, .82);
  text-decoration-thickness: 2px;
}

.event-price strong {
  color: #fff;
  font-size: clamp(30px, 2.2vw, 42px);
  line-height: 1;
  text-shadow: 0 0 18px rgba(163, 61, 255, .36), 0 0 24px rgba(255, 77, 221, .24);
}

.event-price.is-fever-event-price strong.is-fever-price {
  display: contents !important;
}

.event-price.is-fever-event-price .fever-price-badge {
  order: 1;
}

.event-price.is-fever-event-price del {
  order: 2;
}

.event-price.is-fever-event-price .fever-price-sale {
  order: 3;
}

.product-card.theme-tier-1 .event-price strong {
  color: #b8bcff;
}

.product-card .buy-btn {
  align-self: stretch !important;
  margin-top: auto !important;
  background: linear-gradient(135deg, rgba(102, 17, 182, .98), rgba(255, 77, 221, .95)) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 26px rgba(189, 72, 255, .30) !important;
}

/* Final mobile overrides for card grids and TOP sliders */
@media (max-width: 767px) {
  .box-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .product-card {
    min-height: 450px !important;
    padding: 14px 10px 12px !important;
  }

  .product-card .css-neon-box-scene.box-card {
    --s: clamp(105px, 30vw, 145px) !important;
    height: calc(var(--s) * 1.24) !important;
    margin: 6px auto 10px !important;
  }

  .rank-panel {
    overflow: hidden;
  }

  .rank-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .rank-grid::-webkit-scrollbar {
    display: none;
  }

  .rank-card {
    flex: 0 0 66%;
    scroll-snap-align: start;
  }

  .event-price {
    gap: 6px;
  }

  .event-price del {
    font-size: 14px;
  }

  .event-price strong {
    font-size: 24px;
  }

}

@media (max-width: 767px) {
  .hero-beat-rings {
    inset: 8% -6%;
  }

  .hero-beat-rings span::before,
  .hero-beat-rings span::after {
    border-width: 3px;
  }

  .hero-beat-rings span::before {
    border-right-width: 0;
  }

  .hero-beat-rings span::after {
    border-left-width: 0;
  }
}



/* =========================================
   Home hero squishy beat upgrade
   더 역동적인 펄스 + 공처럼 부풀었다가 줄어드는 스쿼시/스트레치
========================================= */
.hero-box.css-hero-box {
  --hero-beat-scale-x: 1;
  --hero-beat-scale-y: 1;
  --hero-beat-translate-y: 0px;
  --hero-beat-rotate: 0deg;
  --hero-beat-glow-boost: 1;
  --hero-beat-bulge: 0;
  --hero-beat-front-pop: 0px;
  --hero-beat-face-scale: 1;
  --hero-beat-panel-scale: 1;
  --hero-beat-face-brightness: 1;
  --hero-beat-face-glow: 18px;
}

.hero-box.css-hero-box .css-neon-box-scene.box-hero {
  transform:
    translateY(var(--hero-beat-translate-y))
    rotate(var(--hero-beat-rotate))
    scaleX(var(--hero-beat-scale-x))
    scaleY(var(--hero-beat-scale-y)) !important;
  will-change: transform, filter;
}

.hero-box.css-hero-box.is-music-on .css-neon-box-scene.box-hero {
  filter:
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 1.02) rgba(255, 77, 221, .52))
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 1.86) rgba(56, 231, 255, .34))
    drop-shadow(0 0 calc(var(--hero-beat-blur) * 2.42) rgba(255, 213, 143, .20));
}

.hero-box.css-hero-box .css-box-front {
  transform:
    translateZ(calc(var(--half) + var(--hero-beat-front-pop)))
    scale(var(--hero-beat-face-scale));
  filter: brightness(var(--hero-beat-face-brightness));
  transition: transform 70ms linear, filter 70ms linear;
}

.hero-box.css-hero-box .css-box-front .css-panel-inner {
  transform: scale(var(--hero-beat-panel-scale));
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.035),
    0 0 var(--hero-beat-face-glow) color-mix(in srgb, var(--box-glow) 26%, transparent);
  transition: transform 70ms linear, box-shadow 70ms linear;
}

.hero-box.css-hero-box .beam {
  transform: translateY(var(--hero-beat-translate-y)) scaleY(calc(.98 + (var(--hero-beat-glow-boost) - 1) * .24));
  transform-origin: center bottom;
  transition: transform 80ms linear, opacity 80ms linear, filter 80ms linear;
  opacity: calc(.72 + (var(--hero-beat-glow-boost) - 1) * .35);
  filter:
    drop-shadow(0 0 12px rgba(255, 77, 221, .26))
    drop-shadow(0 0 24px rgba(56, 231, 255, .18));
}

.hero-box.css-hero-box.is-music-on .beam {
  filter:
    drop-shadow(0 0 18px rgba(255, 77, 221, .38))
    drop-shadow(0 0 30px rgba(56, 231, 255, .24));
}

.hero-beat-rings {
  opacity: calc(var(--hero-beat-opacity) * 1.08);
}

.hero-box.css-hero-box.is-music-on .hero-beat-rings span:nth-child(1) {
  animation-duration: calc(var(--hero-beat-duration) * .92);
}
.hero-box.css-hero-box.is-music-on .hero-beat-rings span:nth-child(2) {
  animation-duration: calc(var(--hero-beat-duration) * 1.03);
}
.hero-box.css-hero-box.is-music-on .hero-beat-rings span:nth-child(3) {
  animation-duration: calc(var(--hero-beat-duration) * 1.14);
}

.hero-box.css-hero-box.is-music-on::after {
  width: 78%;
  height: 78%;
  opacity: calc(var(--hero-beat-opacity) * .92);
  filter: blur(24px);
}

.hero-box.css-hero-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 54%;
  width: 54%;
  height: 18%;
  transform: translateX(-50%) scaleX(calc(.94 + (var(--hero-beat-scale-x) - 1) * 1.2));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0) 70%);
  filter: blur(12px);
  opacity: calc(.34 + (var(--hero-beat-glow-boost) - 1) * .18);
  pointer-events: none;
}

@keyframes heroBeatRing {
  0% {
    opacity: .06;
    transform: translate(-50%, -50%) scale(calc(var(--ring-scale, 1) * .78));
  }

  18% {
    opacity: 1;
  }

  58% {
    opacity: .42;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--ring-scale, 1) * 1.30));
  }
}

/* 저사양 티: 헤더 블러 제거(합성 비용↓). 티어는 perf_tier.js가 설정 */
html[data-dopamine-perf="low"] .site-header,
html[data-dopamine-perf="balanced"] .site-header {
  backdrop-filter: none;
  background: rgba(3, 0, 10, 0.94);
}

/* two-tier global header */
.site-header-two-tier .header-tier {
  width: min(100%, var(--shell));
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

/* one-line global header */
.site-header-one-line .one-line-shell {
  width: min(100%, var(--shell));
  max-width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}
.site-header-one-line .brand {
  align-items: center;
  text-align: center;
}
.site-header-one-line .brand-main {
  font-size: 34px;
}
.site-header-one-line .brand-sub {
  margin-top: 4px;
  padding-left: 0;
  letter-spacing: 7px;
  text-align: center;
}
.site-header-one-line .one-line-nav {
  justify-content: center;
  gap: 10px;
}
.site-header-one-line .nav-group {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
}
.site-header-one-line .nav-group-secondary {
  gap: clamp(9px, .9vw, 14px);
  margin-left: clamp(22px, 2vw, 44px);
}
.site-header-one-line .one-line-nav a {
  font-size: 12px;
  padding: 8px 0;
}
.site-header-one-line .one-line-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, .9vw, 14px);
}
.site-header-one-line .one-line-actions a {
  position: relative;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #d8beef;
  padding: 6px 0;
  white-space: nowrap;
}
.site-header-one-line .one-line-actions a:hover,
.site-header-one-line .one-line-actions a.is-active {
  color: #fff;
}
.site-header-one-line .one-line-actions a.is-active::after,
.site-header-one-line .one-line-actions a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,var(--purple),var(--pink));
  box-shadow: 0 0 18px rgba(255,77,221,.7);
}
.site-header-one-line .one-line-cart span {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(135deg,var(--purple),var(--pink));
  font-size: 10px;
}
.site-header-one-line .sound-toggle {
  min-width: 104px;
  height: 34px;
  font-size: 11px;
}
@media (max-width: 1180px) {
  .site-header-one-line .one-line-shell {
    grid-template-columns: auto auto;
    grid-template-areas: "brand actions" "nav nav";
    min-height: 56px;
    padding: 8px 0;
  }
  .site-header-one-line .brand { grid-area: brand; }
  .site-header-one-line .one-line-actions { grid-area: actions; justify-self: end; }
  .site-header-one-line .one-line-nav { grid-area: nav; justify-content: flex-start; }
  .site-header-one-line .one-line-nav { flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .site-header-one-line .one-line-shell {
    grid-template-areas: "brand actions" "nav nav";
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .site-header-one-line .one-line-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: nowrap;
    gap: 12px 16px;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .site-header-one-line .one-line-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .site-header-one-line .one-line-actions a { font-size: 11px; }
  .site-header-one-line .brand-main { font-size: 30px; }
  .site-header-one-line .brand-sub { letter-spacing: 5px; }
}
.site-header-two-tier .header-tier-top {
  min-height: 42px;
  border-bottom: 1px solid rgba(197,101,255,.14);
}
.site-header-two-tier .header-tier-bottom {
  min-height: 60px;
}
.top-categories {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  flex-wrap: wrap;
}
.top-categories a {
  position: relative;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #d8beef;
  padding: 4px 2px;
}
.top-categories a.is-active,
.top-categories a:hover {
  color: #fff;
}
.top-categories a.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.top-categories a.cart-btn span {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(135deg,var(--purple),var(--pink));
  font-size: 10px;
}
.site-header-two-tier .main-nav {
  justify-content: center;
  gap: clamp(14px, 1.2vw, 24px);
}
.site-header-two-tier .main-nav a {
  font-size: 12px;
  padding: 8px 0;
}
.site-header-two-tier .main-nav a.is-active::after,
.site-header-two-tier .main-nav a:hover::after {
  bottom: -10px;
}
.site-header-two-tier .sound-toggle {
  min-width: 110px;
  height: 34px;
  font-size: 11px;
  justify-self: end;
}
.site-header-two-tier .brand {
  align-items: center;
  text-align: center;
}
.site-header-two-tier .brand-main {
  font-size: 34px;
}
.site-header-two-tier .brand-sub {
  margin-top: 4px;
  padding-left: 0;
  letter-spacing: 7px;
  text-align: center;
}
@media (max-width: 1180px) {
  .site-header-two-tier .header-tier {
    grid-template-columns: 1fr auto;
  }
  .site-header-two-tier .header-tier-bottom {
    min-height: 56px;
  }
  .site-header-two-tier .header-tier-bottom .brand {
    justify-self: start;
  }
  .site-header-two-tier .header-tier-bottom .main-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 2px;
  }
}
@media (max-width: 820px) {
  .site-header-two-tier .header-tier-top {
    min-height: 40px;
  }
  .site-header-two-tier .header-tier-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  .site-header-two-tier .header-tier-bottom .brand {
    justify-self: start;
  }
  .site-header-two-tier .header-tier-bottom .main-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px 16px;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 4px;
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }
  .site-header-two-tier .header-tier-bottom .main-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .top-categories {
    gap: 10px;
  }
  .site-header-two-tier .sound-toggle {
    min-width: 96px;
    height: 32px;
    font-size: 11px;
  }
  .site-header-two-tier .brand-main {
    font-size: 30px;
  }
  .site-header-two-tier .brand-sub {
    letter-spacing: 5px;
  }
}

/* Header scale-up: logo, menu links, and action buttons */
.site-header-one-line .one-line-shell {
  min-height: 82px;
  gap: 22px;
}

.site-header-one-line .brand-main {
  font-size: 46px;
}

.site-header-one-line .brand-sub {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 8.5px;
}

.site-header-one-line .one-line-nav {
  gap: 16px;
}

.site-header-one-line .nav-group {
  gap: clamp(14px, 1.2vw, 24px);
}

.site-header-one-line .one-line-nav a,
.site-header-one-line .one-line-actions a {
  font-size: 15px;
}

.site-header-one-line .one-line-nav a {
  padding: 12px 0;
}

.site-header-one-line .one-line-actions {
  gap: clamp(10px, 1vw, 18px);
}

.site-header-one-line .one-line-actions a {
  padding: 10px 0;
}

.site-header-one-line .one-line-cart span {
  min-width: 19px;
  height: 19px;
  line-height: 19px;
  font-size: 11px;
}

.site-header-one-line .sound-toggle {
  min-width: 132px;
  height: 42px;
  border-radius: 15px;
  font-size: 12px;
}

.site-header-two-tier .header-tier-top {
  min-height: 54px;
}

.site-header-two-tier .header-tier-bottom {
  min-height: 82px;
}

.top-categories {
  gap: clamp(16px, 1.35vw, 26px);
}

.top-categories a {
  font-size: 14px;
  padding: 9px 2px;
}

.top-categories a.cart-btn span {
  min-width: 19px;
  height: 19px;
  line-height: 19px;
  font-size: 11px;
}

.site-header-two-tier .main-nav {
  gap: clamp(20px, 1.65vw, 34px);
}

.site-header-two-tier .main-nav a {
  font-size: 15px;
  padding: 13px 0;
}

.site-header-two-tier .sound-toggle {
  min-width: 132px;
  height: 42px;
  border-radius: 15px;
  font-size: 12px;
}

.site-header-two-tier .brand-main {
  font-size: 46px;
}

.site-header-two-tier .brand-sub {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 8.5px;
}

@media (max-width: 1180px) {
  .site-header-one-line .one-line-shell {
    min-height: 66px;
  }

  .site-header-one-line .brand-main,
  .site-header-two-tier .brand-main {
    font-size: 36px;
  }

  .site-header-one-line .sound-toggle,
  .site-header-two-tier .sound-toggle {
    min-width: 48px;
    width: 48px;
    height: 42px;
  }
}

@media (max-width: 820px) {
  .site-header-one-line .brand-main,
  .site-header-two-tier .brand-main {
    font-size: 34px;
  }

  .site-header-one-line .one-line-actions a,
  .top-categories a {
    font-size: 12px;
  }

  .site-header-one-line .sound-toggle,
  .site-header-two-tier .sound-toggle {
    min-width: 44px;
    width: 44px;
    height: 38px;
  }
}

/* Home promo banner slider */
.homebanner-section {
  padding: 24px 0 0;
  margin-bottom: 44px;
}

.homebanner-section[hidden] {
  display: none;
}

.homebanner-shell {
  position: relative;
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(10, 3, 18, .86);
  border: 1px solid rgba(255, 130, 237, .26);
  box-shadow:
    0 0 44px rgba(255, 77, 221, .16),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.homebanner-viewport {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.homebanner-viewport.is-dragging {
  cursor: grabbing;
}

.homebanner-track {
  display: flex;
  transition: transform .56s cubic-bezier(.2,.72,.12,1);
  will-change: transform;
}

.homebanner {
  position: relative;
  min-width: 100%;
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .46fr);
  gap: clamp(22px, 3vw, 62px);
  align-items: center;
  padding: clamp(28px, 3vw, 54px) clamp(42px, 5vw, 92px);
  overflow: hidden;
  isolation: isolate;
}

.homebanner::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, .09);
  pointer-events: none;
}

.homebanner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 82% 48%, rgba(56, 231, 255, .22), transparent 30%),
    radial-gradient(circle at 20% 12%, rgba(255, 77, 221, .22), transparent 32%),
    linear-gradient(135deg, rgba(24, 7, 44, .98), rgba(72, 15, 126, .92), rgba(6, 2, 16, .98));
}

.homebanner.theme-pass::after {
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 213, 143, .24), transparent 30%),
    radial-gradient(circle at 24% 18%, rgba(255, 77, 221, .22), transparent 34%),
    linear-gradient(135deg, rgba(24, 8, 40, .98), rgba(105, 20, 138, .9), rgba(7, 2, 14, .98));
}

.homebanner.theme-exchange::after {
  background:
    radial-gradient(circle at 80% 48%, rgba(56, 231, 255, .26), transparent 32%),
    radial-gradient(circle at 20% 18%, rgba(120, 80, 255, .22), transparent 34%),
    linear-gradient(135deg, rgba(7, 20, 34, .98), rgba(32, 16, 92, .92), rgba(4, 2, 14, .98));
}

.homebanner-copy {
  position: relative;
  z-index: 2;
}

.homebanner-copy span {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #8ff5ff;
  background: rgba(56, 231, 255, .12);
  border: 1px solid rgba(56, 231, 255, .36);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  box-shadow: 0 0 18px rgba(56, 231, 255, .14);
}

.homebanner-copy h2 {
  max-width: 900px;
  margin: 18px 0 12px;
  color: #fff;
  font-size: clamp(34px, 3.5vw, 68px);
  line-height: 1.04;
  text-shadow:
    0 0 14px rgba(255,255,255,.26),
    0 0 36px rgba(255, 77, 221, .48);
}

.homebanner-copy p {
  max-width: 760px;
  margin: 0;
  color: #e0cfee;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.75;
}

.homebanner-copy a {
  display: inline-grid;
  place-items: center;
  min-height: 54px;
  margin-top: 24px;
  padding: 0 22px;
  border-radius: 16px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow: 0 0 30px rgba(255, 77, 221, .32);
}

.homebanner-visual {
  position: relative;
  z-index: 2;
  min-height: 240px;
  display: grid;
  place-items: center;
}

.homebanner-visual .css-neon-box-scene.box-card {
  --s: clamp(170px, 14vw, 260px);
}

.homebanner-visual-icons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.homebanner-visual-icons b {
  width: clamp(86px, 8vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: rgba(8, 2, 18, .58);
  border: 1px solid rgba(56, 231, 255, .28);
  font-size: clamp(38px, 4vw, 68px);
  box-shadow:
    0 0 28px rgba(56, 231, 255, .16),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.homebanner-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 130, 237, .34);
  border-radius: 999px;
  background: rgba(8, 2, 18, .66);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(255, 77, 221, .18);
}

.homebanner-nav.prev {
  left: 18px;
}

.homebanner-nav.next {
  right: 18px;
}

.homebanner-nav:hover {
  border-color: rgba(255, 130, 237, .72);
  box-shadow: 0 0 28px rgba(255, 77, 221, .28);
}

.homebanner-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 7;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(8, 2, 18, .62);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 77, 221, .18);
}

.homebanner-close:hover {
  border-color: rgba(255, 130, 237, .68);
  box-shadow: 0 0 24px rgba(255, 77, 221, .30);
}

.homebanner-pagination {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.homebanner-pagination button {
  width: 30px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  cursor: pointer;
}

.homebanner-pagination button.is-active {
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 16px rgba(255, 77, 221, .38);
}

@media (max-width: 1180px) {
  .homebanner {
    grid-template-columns: 1fr;
    min-height: 520px;
    padding-inline: clamp(34px, 5vw, 72px);
  }

  .homebanner-visual {
    min-height: 220px;
  }
}

@media (max-width: 820px) {
  .homebanner-section {
    padding-top: 16px;
  }

  .homebanner-shell {
    border-radius: 24px;
  }

  .homebanner {
    min-height: 500px;
    padding: 28px 22px 58px;
  }

  .homebanner-copy a {
    width: 100%;
  }

  .homebanner-nav {
    top: auto;
    bottom: 14px;
    width: 40px;
    height: 40px;
    font-size: 28px;
    transform: none;
  }

  .homebanner-nav.prev {
    left: 18px;
  }

  .homebanner-nav.next {
    right: 18px;
  }

  .homebanner-pagination {
    bottom: 30px;
  }
}

/* Home random box cards: keep two-line descriptions and fever prices from shifting the layout */
.random-box-section .box-grid {
  align-items: stretch;
}

.random-box-section .product-card {
  min-height: 680px !important;
}

.random-box-section .product-card .product-copy {
  width: 100%;
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
}

.random-box-section .product-card .product-copy p {
  min-height: calc(1.52em * 2) !important;
  max-height: calc(1.52em * 2);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.random-box-section .product-card .price,
.random-box-section .product-card .event-price {
  min-height: 104px;
  margin-top: auto;
  padding-top: 14px;
}

.random-box-section .product-card .is-fever-price {
  max-width: 100%;
}

.random-box-section .product-card .fever-price-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.random-box-section .product-card .event-price {
  align-items: flex-start;
  justify-content: flex-end;
}

@media (max-width: 767px) {
  .random-box-section .product-card {
    min-height: 545px !important;
  }

  .random-box-section .product-card .product-copy {
    min-height: 200px !important;
  }

  .random-box-section .product-card .price,
  .random-box-section .product-card .event-price {
    min-height: 92px;
    padding-top: 10px;
  }
}

/* Fever time global ambience */
body.is-fever-time {
  --bg: #12020a;
  --fever-aura-a: rgba(255, 111, 0, .34);
  --fever-aura-b: rgba(255, 77, 221, .42);
  --fever-aura-c: rgba(56, 231, 255, .24);
  --fever-glow: rgba(255, 111, 0, .22);
  --fever-line: rgba(255, 213, 143, .34);
  --fever-banner-bg: linear-gradient(90deg, rgba(255, 70, 0, .96), rgba(255, 77, 221, .94), rgba(255, 153, 0, .96));
  --fever-page-bg: linear-gradient(135deg, #16030a 0%, #3a092d 38%, #2a0b4f 70%, #090018 100%);
  --shadow: 0 0 42px var(--fever-glow), 0 0 46px rgba(255, 77, 221, .24);
  --fever-grade-pill-fg: #0a0500;
  --fever-grade-pill-bg: linear-gradient(180deg, #fff6d2, #ffc56d 45%, #e8a84a);
  --fever-grade-pill-border: rgba(255, 255, 255, .52);
  --fever-grade-pill-shadow: 0 0 20px rgba(255, 189, 74, .42);
  --fever-price-badge-fg: #fff0ad;
  --fever-price-badge-bg: rgba(255, 111, 0, 0.18);
  --fever-price-badge-border: rgba(255, 213, 143, 0.44);
  --fever-price-badge-glow: rgba(255, 111, 0, 0.32);
  --fever-price-sale-fg: #fff0ad;
  --fever-price-sale-shadow-a: rgba(255, 240, 173, 0.44);
  --fever-price-sale-shadow-b: rgba(255, 111, 0, 0.28);
  --fever-price-flame-glow: rgba(255, 111, 0, 0.58);
  --fever-live-a: #a33dff;
  --fever-live-b: #ff4ddd;
  --fever-live-glow: rgba(255, 77, 221, 0.38);
}

body.is-fever-rare {
  --bg: #021314;
  --fever-aura-a: rgba(56, 231, 255, .36);
  --fever-aura-b: rgba(49, 255, 177, .32);
  --fever-aura-c: rgba(119, 128, 255, .22);
  --fever-glow: rgba(56, 231, 255, .24);
  --fever-line: rgba(132, 255, 232, .36);
  --fever-banner-bg: linear-gradient(90deg, rgba(0, 181, 210, .96), rgba(42, 245, 184, .94), rgba(76, 113, 255, .92));
  --fever-page-bg: linear-gradient(135deg, #021114 0%, #073a42 40%, #12265b 74%, #020711 100%);
  --fever-grade-pill-fg: #021016;
  --fever-grade-pill-bg: linear-gradient(180deg, #e4ffff, #5cf5e8 42%, #38b8ff);
  --fever-grade-pill-border: rgba(200, 255, 255, .55);
  --fever-grade-pill-shadow: 0 0 22px rgba(56, 231, 255, .48);
  --fever-price-badge-fg: #bff8ff;
  --fever-price-badge-bg: rgba(0, 120, 150, 0.22);
  --fever-price-badge-border: rgba(132, 255, 232, 0.5);
  --fever-price-badge-glow: rgba(56, 231, 255, 0.38);
  --fever-price-sale-fg: #bff8ff;
  --fever-price-sale-shadow-a: rgba(145, 241, 255, 0.5);
  --fever-price-sale-shadow-b: rgba(56, 231, 255, 0.32);
  --fever-price-flame-glow: rgba(56, 231, 255, 0.55);
  --fever-live-a: #00a8c4;
  --fever-live-b: #38e7ff;
  --fever-live-glow: rgba(56, 231, 255, 0.42);
}

body.is-fever-epic {
  --bg: #11031c;
  --fever-aura-a: rgba(186, 92, 255, .36);
  --fever-aura-b: rgba(255, 77, 221, .42);
  --fever-aura-c: rgba(56, 231, 255, .22);
  --fever-glow: rgba(186, 92, 255, .25);
  --fever-line: rgba(226, 155, 255, .38);
  --fever-banner-bg: linear-gradient(90deg, rgba(103, 36, 255, .96), rgba(255, 77, 221, .94), rgba(145, 70, 255, .96));
  --fever-page-bg: linear-gradient(135deg, #11031c 0%, #3b0b65 40%, #2f083d 72%, #070014 100%);
  --fever-grade-pill-fg: #fff;
  --fever-grade-pill-bg: linear-gradient(180deg, #ffd6ff, #c94dff 38%, #ff4ddd 78%, #a33dff);
  --fever-grade-pill-border: rgba(255, 255, 255, .48);
  --fever-grade-pill-shadow: 0 0 24px rgba(255, 77, 221, .45);
  --fever-price-badge-fg: #ffdcf8;
  --fever-price-badge-bg: rgba(163, 61, 255, 0.22);
  --fever-price-badge-border: rgba(255, 120, 220, 0.48);
  --fever-price-badge-glow: rgba(255, 77, 221, 0.36);
  --fever-price-sale-fg: #ff9cf5;
  --fever-price-sale-shadow-a: rgba(255, 140, 230, 0.55);
  --fever-price-sale-shadow-b: rgba(163, 61, 255, 0.38);
  --fever-price-flame-glow: rgba(255, 77, 221, 0.52);
  --fever-live-a: #7a2cff;
  --fever-live-b: #ff4ddd;
  --fever-live-glow: rgba(255, 77, 221, 0.42);
}

body.is-fever-legendary {
  --bg: #170b00;
  --fever-aura-a: rgba(255, 213, 143, .42);
  --fever-aura-b: rgba(255, 111, 0, .42);
  --fever-aura-c: rgba(255, 77, 221, .28);
  --fever-glow: rgba(255, 189, 74, .28);
  --fever-line: rgba(255, 226, 157, .46);
  --fever-banner-bg: linear-gradient(90deg, rgba(255, 111, 0, .96), rgba(255, 213, 143, .96), rgba(255, 77, 221, .92));
  --fever-page-bg: linear-gradient(135deg, #1b0a00 0%, #5a2400 38%, #40103f 70%, #090018 100%);
  --fever-grade-pill-fg: #1a0d00;
  --fever-grade-pill-bg: linear-gradient(180deg, #fff8e0, #ffd78a 40%, #ff9a3c);
  --fever-grade-pill-border: rgba(255, 255, 255, .55);
  --fever-grade-pill-shadow: 0 0 22px rgba(255, 189, 74, .48);
  --fever-price-badge-fg: #fff0ad;
  --fever-price-badge-bg: rgba(255, 111, 0, 0.2);
  --fever-price-badge-border: rgba(255, 213, 143, 0.48);
  --fever-price-badge-glow: rgba(255, 189, 74, 0.38);
  --fever-price-sale-fg: #fff0ad;
  --fever-price-sale-shadow-a: rgba(255, 240, 173, 0.48);
  --fever-price-sale-shadow-b: rgba(255, 140, 60, 0.32);
  --fever-price-flame-glow: rgba(255, 160, 72, 0.55);
  --fever-live-a: #ff8a00;
  --fever-live-b: #ffd78a;
  --fever-live-glow: rgba(255, 189, 74, 0.42);
}

body.is-fever-time .cyber-ambience {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--fever-aura-a) 55%, transparent), transparent 22%),
    radial-gradient(circle at 76% 16%, var(--fever-aura-b), transparent 28%),
    radial-gradient(circle at 86% 62%, var(--fever-aura-a), transparent 30%),
    radial-gradient(circle at 20% 84%, var(--fever-aura-c), transparent 30%),
    var(--fever-page-bg);
  animation: feverAmbiencePulse 2.8s ease-in-out infinite;
}

body.is-fever-time .cyber-ambience::before {
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fever-aura-a) 42%, transparent), transparent 38%),
    radial-gradient(circle at center, color-mix(in srgb, var(--fever-aura-b) 38%, transparent), transparent 58%);
}

body.is-fever-time .cyber-ambience::after {
  content: "";
  position: absolute;
  inset: -18%;
  background:
    conic-gradient(from 115deg, transparent, var(--fever-aura-a), transparent 28%, var(--fever-aura-b), transparent 62%, var(--fever-aura-c), transparent);
  filter: blur(34px);
  opacity: .9;
  animation: feverAuroraSpin 9s linear infinite;
}

body.is-fever-time .grid-overlay {
  background-image:
    linear-gradient(color-mix(in srgb, var(--fever-line) 46%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fever-aura-b) 42%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 1;
  filter: drop-shadow(0 0 10px var(--fever-glow));
}

body.is-fever-time .scanlines {
  opacity: .26;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--fever-line) 22%, transparent), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .11) 1px, transparent 1px, transparent 4px);
}

body.is-fever-time .site-header {
  top: var(--fever-banner-height, 48px);
  background: rgba(22, 3, 18, .82);
  border-bottom-color: var(--fever-line);
  box-shadow: 0 0 30px var(--fever-glow), 0 0 40px color-mix(in srgb, var(--fever-aura-b) 42%, transparent);
}

body.is-fever-time .section-shell,
body.is-fever-time .panel,
body.is-fever-time .product-card,
body.is-fever-time .homebanner-shell {
  border-color: var(--fever-line);
  box-shadow:
    0 0 36px color-mix(in srgb, var(--fever-glow) 72%, transparent),
    0 0 42px color-mix(in srgb, var(--fever-aura-b) 46%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--fever-line) 14%, transparent);
}

body.is-fever-time .fever-countdown-banner {
  background: var(--fever-banner-bg);
  border-bottom-color: var(--fever-line);
  box-shadow: 0 0 38px var(--fever-glow), 0 0 34px color-mix(in srgb, var(--fever-aura-b) 46%, transparent);
}

body.is-fever-time .fever-countdown-banner__grade {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--fever-grade-pill-fg);
  background: var(--fever-grade-pill-bg);
  border: 1px solid var(--fever-grade-pill-border);
  box-shadow:
    var(--fever-grade-pill-shadow),
    0 0 18px var(--fever-glow),
    inset 0 0 0 1px rgba(255, 255, 255, .22);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .12em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

body.is-fever-time .winning-alert {
  border-color: var(--fever-line);
  box-shadow: 0 0 40px var(--fever-glow), 0 0 42px color-mix(in srgb, var(--fever-aura-b) 42%, transparent);
}

/* 피버 당첨 알림(가운데) — Rare 파랑 / Epic 보라 / Legendary 노랑 (--cyan · --purple/--pink · 카드 골드 톤) */
.winning-alert.winning-alert--rare {
  border-color: color-mix(in srgb, var(--cyan) 55%, #4aa8ff);
  background:
    radial-gradient(circle at 10% 38%, rgba(74, 168, 255, .38), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(56, 231, 255, .28), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(30, 74, 140, .22), transparent 42%),
    linear-gradient(135deg, rgba(4, 12, 32, .98), rgba(8, 28, 52, .96), rgba(6, 4, 18, .97));
  box-shadow:
    0 0 40px rgba(56, 231, 255, .34),
    0 0 56px rgba(42, 130, 220, .22),
    0 0 28px rgba(74, 168, 255, .2),
    inset 0 0 0 1px rgba(191, 248, 255, .08);
}

.winning-alert.winning-alert--rare::after {
  background: conic-gradient(
    from 90deg,
    transparent,
    rgba(56, 231, 255, .36),
    transparent 26%,
    rgba(74, 168, 255, .3),
    transparent 52%,
    rgba(30, 120, 200, .26),
    transparent 78%,
    rgba(56, 231, 255, .22),
    transparent
  );
}

.winning-alert.winning-alert--rare .winning-alert__icon {
  background: radial-gradient(circle at 35% 30%, rgba(191, 248, 255, .35), rgba(20, 70, 120, .45));
  border-color: color-mix(in srgb, var(--cyan) 70%, #fff);
  box-shadow:
    0 0 30px rgba(56, 231, 255, .5),
    0 0 48px rgba(42, 130, 220, .22),
    inset 0 0 18px rgba(191, 248, 255, .14);
}

.winning-alert.winning-alert--rare .winning-alert__badge {
  color: #dff9ff;
  background: rgba(56, 231, 255, .12);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
  box-shadow: 0 0 20px rgba(56, 231, 255, .3);
  text-shadow: 0 0 14px rgba(56, 231, 255, .4);
}

.winning-alert.winning-alert--rare .winning-alert__message {
  color: #eaf6ff;
  text-shadow: 0 0 16px rgba(56, 231, 255, .28);
}

.winning-alert.winning-alert--rare .winning-alert__message strong {
  color: #bff8ff;
  text-shadow:
    0 0 18px rgba(56, 231, 255, .45),
    0 0 28px rgba(74, 168, 255, .25);
}

.winning-alert.winning-alert--rare .winning-alert__fever {
  color: #8fdcff;
  text-shadow: 0 0 14px rgba(56, 231, 255, .35);
}

.winning-alert.winning-alert--epic {
  border-color: color-mix(in srgb, var(--purple) 62%, var(--pink));
  background:
    radial-gradient(circle at 12% 36%, rgba(163, 61, 255, .42), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(120, 40, 200, .28), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(255, 77, 221, .12), transparent 48%),
    linear-gradient(135deg, rgba(18, 4, 34, .98), rgba(48, 10, 72, .96), rgba(8, 2, 16, .97));
  box-shadow:
    0 0 44px rgba(163, 61, 255, .32),
    0 0 52px rgba(120, 50, 200, .2),
    0 0 26px rgba(255, 77, 221, .16),
    inset 0 0 0 1px rgba(220, 170, 255, .08);
}

.winning-alert.winning-alert--epic::after {
  background: conic-gradient(
    from 75deg,
    transparent,
    rgba(163, 61, 255, .38),
    transparent 24%,
    rgba(124, 58, 237, .32),
    transparent 48%,
    rgba(255, 77, 221, .22),
    transparent 72%,
    rgba(186, 130, 255, .26),
    transparent
  );
}

.winning-alert.winning-alert--epic .winning-alert__icon {
  background: radial-gradient(circle at 32% 28%, rgba(210, 170, 255, .3), rgba(80, 24, 140, .5));
  border-color: color-mix(in srgb, var(--purple) 55%, #e8c4ff);
  box-shadow:
    0 0 30px rgba(163, 61, 255, .48),
    0 0 42px rgba(255, 77, 221, .18),
    inset 0 0 16px rgba(232, 196, 255, .12);
}

.winning-alert.winning-alert--epic .winning-alert__badge {
  color: #f2e4ff;
  background: rgba(163, 61, 255, .16);
  border-color: color-mix(in srgb, var(--purple) 40%, rgba(255, 77, 221, .35));
  box-shadow: 0 0 22px rgba(163, 61, 255, .32);
  text-shadow: 0 0 14px rgba(200, 150, 255, .42);
}

.winning-alert.winning-alert--epic .winning-alert__message {
  color: #faf5ff;
  text-shadow: 0 0 14px rgba(163, 61, 255, .22);
}

.winning-alert.winning-alert--epic .winning-alert__message strong {
  color: #ff9cf5;
  text-shadow:
    0 0 18px rgba(255, 77, 221, .38),
    0 0 26px rgba(163, 61, 255, .28);
}

.winning-alert.winning-alert--epic .winning-alert__fever {
  color: #e8c4ff;
  text-shadow: 0 0 14px rgba(163, 61, 255, .35);
}

.winning-alert.winning-alert--legendary {
  border-color: rgba(255, 220, 140, .65);
  background:
    radial-gradient(circle at 12% 40%, rgba(255, 200, 90, .36), transparent 30%),
    radial-gradient(circle at 84% 20%, rgba(255, 240, 173, .28), transparent 34%),
    radial-gradient(circle at 50% 108%, rgba(255, 140, 40, .16), transparent 46%),
    linear-gradient(135deg, rgba(36, 18, 4, .98), rgba(52, 28, 8, .96), rgba(10, 4, 14, .97));
  box-shadow:
    0 0 42px rgba(255, 200, 100, .32),
    0 0 56px rgba(255, 160, 60, .22),
    0 0 28px rgba(255, 240, 173, .18),
    inset 0 0 0 1px rgba(255, 230, 180, .08);
}

.winning-alert.winning-alert--legendary::after {
  background: conic-gradient(
    from 100deg,
    transparent,
    rgba(255, 213, 143, .34),
    transparent 28%,
    rgba(255, 180, 70, .28),
    transparent 52%,
    rgba(255, 220, 140, .22),
    transparent 76%,
    rgba(255, 140, 50, .18),
    transparent
  );
}

.winning-alert.winning-alert--legendary .winning-alert__icon {
  background: radial-gradient(circle at 35% 30%, rgba(255, 248, 210, .32), rgba(160, 70, 0, .38));
  border-color: rgba(255, 213, 143, .58);
  box-shadow:
    0 0 28px rgba(255, 189, 74, .5),
    0 0 44px rgba(255, 140, 50, .2),
    inset 0 0 18px rgba(255, 240, 173, .14);
}

.winning-alert.winning-alert--legendary .winning-alert__badge {
  color: #fff0ad;
  background: rgba(255, 213, 143, .12);
  border-color: rgba(255, 200, 120, .48);
  box-shadow: 0 0 20px rgba(255, 189, 74, .32);
  text-shadow: 0 0 14px rgba(255, 213, 143, .4);
}

.winning-alert.winning-alert--legendary .winning-alert__message {
  color: #fff9ec;
  text-shadow: 0 0 14px rgba(255, 189, 74, .22);
}

.winning-alert.winning-alert--legendary .winning-alert__message strong {
  color: #fff0ad;
  text-shadow:
    0 0 18px rgba(255, 213, 143, .45),
    0 0 26px rgba(255, 160, 72, .22);
}

.winning-alert.winning-alert--legendary .winning-alert__fever {
  color: #ffd48a;
  text-shadow: 0 0 14px rgba(255, 160, 60, .32);
}

body.is-fever-time .winning-alert.winning-alert--rare,
body.is-fever-time .winning-alert.winning-alert--epic,
body.is-fever-time .winning-alert.winning-alert--legendary {
  border-color: var(--fever-line);
  box-shadow:
    0 0 42px var(--fever-glow),
    0 0 48px color-mix(in srgb, var(--fever-aura-b) 40%, transparent),
    0 0 28px color-mix(in srgb, var(--fever-aura-a) 28%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.winning-alert__live-link {
  position: absolute;
  right: 22px;
  top: 50%;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-height: 40px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .02em;
  transform: translateY(-50%);
  box-shadow:
    0 0 22px rgba(255, 77, 221, .32),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

.winning-alert__live-link:hover {
  transform: translateY(calc(-50% - 2px));
  box-shadow:
    0 0 28px rgba(255, 77, 221, .44),
    0 0 18px rgba(255, 111, 0, .18);
}

body.is-fever-time .winning-alert__live-link {
  background: linear-gradient(135deg, var(--fever-live-a), var(--fever-live-b));
  box-shadow:
    0 0 24px var(--fever-live-glow),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

body.is-fever-time .winning-alert__live-link:hover {
  box-shadow:
    0 0 32px var(--fever-live-glow),
    0 0 18px color-mix(in srgb, var(--fever-live-b) 35%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.winning-alert.winning-alert--rare .winning-alert__live-link {
  background: linear-gradient(135deg, #0a6d9c, var(--cyan));
  box-shadow:
    0 0 26px rgba(56, 231, 255, .44),
    0 0 36px rgba(42, 130, 220, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.winning-alert.winning-alert--rare .winning-alert__live-link:hover {
  box-shadow:
    0 0 36px rgba(56, 231, 255, .52),
    0 0 22px rgba(74, 168, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.winning-alert.winning-alert--epic .winning-alert__live-link {
  background: linear-gradient(135deg, #5b1fd4, var(--purple) 42%, #c94dff);
  box-shadow:
    0 0 28px rgba(163, 61, 255, .42),
    0 0 22px rgba(255, 77, 221, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.winning-alert.winning-alert--epic .winning-alert__live-link:hover {
  box-shadow:
    0 0 38px rgba(163, 61, 255, .48),
    0 0 24px rgba(255, 77, 221, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.winning-alert.winning-alert--legendary .winning-alert__live-link {
  background: linear-gradient(135deg, #e87a00, #ffc56d 55%, #fff0ad);
  color: #1a0d00;
  box-shadow:
    0 0 28px rgba(255, 189, 74, .44),
    0 0 40px rgba(255, 140, 50, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.winning-alert.winning-alert--legendary .winning-alert__live-link:hover {
  box-shadow:
    0 0 40px rgba(255, 200, 100, .5),
    0 0 24px rgba(255, 160, 60, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .26);
}

@media (max-width: 680px) {
  .winning-alert__live-link {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 4px;
  }

  .winning-alert__live-link:hover {
    transform: translateY(-2px);
  }
}

.winning-alert-stack {
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

body.inventory-unbox-active .winning-alert-stack {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes feverAmbiencePulse {
  50% {
    filter: saturate(1.28) brightness(1.18);
  }
}

@keyframes feverAmbienceGlow {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.94;
  }
}

@keyframes feverAuroraBreath {
  0%, 100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.58;
  }
}

@keyframes feverAuroraSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes feverAlertSheenOnce {
  0% {
    transform: translateX(-105%);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  100% {
    transform: translateX(105%);
    opacity: 0;
  }
}

@keyframes winningAlertAuraSoft {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.46;
  }
}

@keyframes feverBannerGlow {
  0%, 100% {
    opacity: 0.42;
  }

  50% {
    opacity: 0.62;
  }
}

@keyframes feverBannerIconSoft {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(255, 240, 173, 0.55));
  }

  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(255, 240, 173, 0.72));
  }
}

@keyframes alertIconEase {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.05);
    filter: brightness(1.1);
  }
}

@keyframes pointChargeIconIn {
  0% {
    transform: scale(0.82) rotate(-10deg);
    opacity: 0.85;
  }

  65% {
    transform: scale(1.06) rotate(3deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes pointChargeSheenOnce {
  0% {
    transform: translateX(-108%);
    opacity: 0;
  }

  22% {
    opacity: 0.85;
  }

  100% {
    transform: translateX(108%);
    opacity: 0;
  }
}

/* Fever / 알림: 무거운 filter·무한 회전 완화 + 등장 이징 */
body.is-fever-time .cyber-ambience {
  animation: feverAmbienceGlow 5.5s ease-in-out infinite;
}

body.is-fever-time .cyber-ambience::after {
  filter: blur(18px);
  opacity: 0.72;
  animation: feverAuroraBreath 9s ease-in-out infinite;
  transform: none;
}

body.is-fever-time .grid-overlay {
  filter: none;
}

.winning-alert {
  contain: layout paint;
  transform: translateY(-12px) scale(0.965);
  transition:
    opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.35s ease;
}

.winning-alert.is-show {
  transform: translateY(0) scale(1);
}

.winning-alert::before {
  animation: none;
  opacity: 0;
}

.winning-alert.is-show::before {
  animation: feverAlertSheenOnce 1.05s cubic-bezier(0.28, 0.9, 0.32, 1) 0.05s forwards;
}

/* 미니파이드 블록의 무한 회전 오라는 표시 전까지 끔 */
.winning-alert::after {
  animation: none;
  opacity: 0;
  filter: blur(0);
}

.winning-alert.is-show::after {
  inset: -16%;
  filter: blur(14px);
  opacity: 0.42;
  animation: winningAlertAuraSoft 4s ease-in-out infinite;
}

.fever-countdown-banner {
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.fever-countdown-banner::before {
  animation: feverBannerGlow 4.5s ease-in-out infinite;
  opacity: 0.55;
}

.fever-countdown-banner.is-active .fever-countdown-banner__icon {
  animation: feverBannerIconSoft 2.6s ease-in-out infinite;
}

.winning-alert.is-show .winning-alert__icon {
  animation: alertIconEase 2.8s ease-in-out infinite;
}

.point-charge-alert {
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}

.point-charge-alert::before {
  animation: none;
}

.point-charge-alert.is-show::before {
  animation: pointChargeSheenOnce 0.95s cubic-bezier(0.33, 0.86, 0.34, 1) 0.08s forwards;
}

.point-charge-alert__icon {
  animation: pointChargeIconIn 0.62s cubic-bezier(0.34, 1.45, 0.42, 1) forwards;
}

html[data-dopamine-perf="balanced"] body.is-fever-time .cyber-ambience::after {
  filter: blur(14px);
  animation-duration: 11s;
}

html[data-dopamine-perf="low"] body.is-fever-time .cyber-ambience {
  animation: none;
}

html[data-dopamine-perf="low"] body.is-fever-time .cyber-ambience::after {
  display: none;
}

html[data-dopamine-perf="low"] .winning-alert.is-show::after {
  display: none;
}

html[data-dopamine-perf="low"] .fever-countdown-banner::before,
html[data-dopamine-perf="balanced"] .fever-countdown-banner::before {
  animation-duration: 6s;
}

@media (prefers-reduced-motion: reduce) {
  body.is-fever-time .cyber-ambience,
  body.is-fever-time .cyber-ambience::after {
    animation: none !important;
  }

  .winning-alert,
  .point-charge-alert {
    transition-duration: 0.22s;
  }

  .winning-alert::before,
  .winning-alert::after,
  .winning-alert.is-show::after,
  .fever-countdown-banner::before,
  .point-charge-alert::before,
  .point-charge-alert.is-show::before {
    animation: none !important;
  }

  .winning-alert__icon,
  .fever-countdown-banner__icon {
    animation: none !important;
  }

  .point-charge-alert__icon {
    animation: none !important;
    transform: none;
  }
}

.point-charge-alert-stack {
  position: fixed;
  right: clamp(14px, 2.2vw, 32px);
  bottom: clamp(18px, 2.6vw, 34px);
  z-index: 135;
  width: min(92vw, 430px);
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.point-charge-alert {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 240, 173, .26), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(56, 231, 255, .18), transparent 34%),
    linear-gradient(135deg, rgba(18, 8, 31, .96), rgba(45, 17, 62, .94));
  border: 1px solid rgba(255, 213, 143, .46);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .34),
    0 0 26px rgba(255, 196, 92, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .28s ease, transform .34s cubic-bezier(.2, .86, .2, 1);
}

.point-charge-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-115%);
  animation: winningAlertShine 2.2s ease infinite;
  pointer-events: none;
}

.point-charge-alert.is-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.point-charge-alert__icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 213, 143, .14);
  border: 1px solid rgba(255, 213, 143, .42);
  box-shadow: 0 0 18px rgba(255, 196, 92, .24);
  font-size: 25px;
  animation: pointCoinJingle .82s ease-in-out infinite;
}

.point-charge-alert__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.point-charge-alert__badge {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #fff0ad;
  background: rgba(255, 213, 143, .12);
  border: 1px solid rgba(255, 213, 143, .34);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.point-charge-alert__message,
.point-charge-alert__meta {
  margin: 0;
}

.point-charge-alert__message {
  color: #f9f0ff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.42;
}

.point-charge-alert__message strong {
  color: #fff0ad;
  text-shadow: 0 0 14px rgba(255, 213, 143, .38);
}

.point-charge-alert__meta {
  color: #d8c6ea;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.point-charge-alert--rare {
  border-color: rgba(56, 231, 255, .44);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 26px rgba(56, 231, 255, .2);
}

.point-charge-alert--legendary {
  border-color: rgba(255, 240, 173, .62);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 34px rgba(255, 189, 74, .28);
}

body.inventory-unbox-active .point-charge-alert-stack {
  opacity: 0 !important;
  visibility: hidden !important;
}

@keyframes pointCoinJingle {
  35% {
    transform: translateY(-2px) rotate(-8deg);
  }
  70% {
    transform: translateY(1px) rotate(7deg);
  }
}

@media (max-width: 560px) {
  .point-charge-alert-stack {
    right: 12px;
    left: 12px;
    bottom: 14px;
    width: auto;
  }

  .point-charge-alert {
    grid-template-columns: 40px 1fr;
    padding: 13px;
  }

  .point-charge-alert__icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}

@media (max-width: 720px) {
  .fever-countdown-banner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    text-align: center;
    font-size: clamp(12px, 3.1vw, 15px);
  }

  .fever-countdown-banner b {
    font-size: clamp(13px, 3.4vw, 17px);
  }
}