/* 3D 카드 홈 견본 공용. 00_3D카드홈.html과 같은 토큰·카드 모양 */
@font-face{font-family:Pre;src:url('assets/font/Pretendard-Regular.sub.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Pre;src:url('assets/font/Pretendard-Medium.sub.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Pre;src:url('assets/font/Pretendard-SemiBold.sub.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Pre;src:url('assets/font/Pretendard-Bold.sub.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --night:#08163A; --deep:#0F2C6B; --brand:#163B8C;
  --ink:#191F28; --ink-2:#4E5968; --ink-3:#6B7684;
  --honey:#F7D27E; --white:#FFFFFF;
  --ease:cubic-bezier(.16,1,.3,1);
  --cw:min(58vw,240px); --ch:calc(var(--cw)*1.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Pre,system-ui,-apple-system,sans-serif;background:var(--night);color:var(--ink);line-height:1.5;word-break:keep-all;overflow-x:hidden}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums}

.hero{position:relative;min-height:100svh;overflow:clip;color:var(--white);display:flex;flex-direction:column;padding-bottom:64px;
  background:radial-gradient(120% 70% at 50% 62%,#1E4BA8 0%,var(--deep) 38%,var(--night) 78%)}
.space{position:absolute;inset:auto 0 0 0;height:46%;perspective:520px;pointer-events:none}
.floor{position:absolute;left:-60%;width:220%;bottom:-30%;height:150%;transform:rotateX(76deg);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);
  animation:floor 7s linear infinite}
@keyframes floor{to{background-position:0 56px}}
.glow{position:absolute;left:50%;top:58%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(circle,rgba(247,210,126,.22),rgba(247,210,126,0) 62%);filter:blur(10px);opacity:0;transition:opacity 1.6s ease 1.1s;pointer-events:none}
.ready .glow{opacity:1}

.bar{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0}
.logo{font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}
.logo b{display:block;font-size:15px;color:var(--white);font-weight:700;letter-spacing:-.02em}
.replay{font-size:12px;font-weight:600;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:99px}

.head{position:relative;z-index:3;padding:24px 20px 0;text-align:center}
.head h1{font-size:clamp(28px,8.2vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.25}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.ln:nth-child(2)>span{transition-delay:.14s}
.ready .ln>span{transform:none}
.head p{margin-top:8px;font-size:15px;font-weight:500;color:rgba(255,255,255,.78);opacity:0;transition:opacity .8s ease .5s}
.ready .head p{opacity:1}

.stage{position:relative;z-index:2;flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;perspective:1100px;touch-action:pan-y;user-select:none;-webkit-user-select:none}

/* 카드 한 장: 앞면(그림) / 뒷면(상품·조건) */
.card{position:absolute;width:var(--cw);height:var(--ch);opacity:0;transform-style:preserve-3d;will-change:transform,opacity;cursor:pointer}
.float{position:absolute;inset:0;transform-style:preserve-3d}
.card.active .float{animation:bob 4.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.card.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:22px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.front{background:var(--white);display:flex;flex-direction:column}
.front img{width:100%;flex:1;min-height:0;object-fit:cover}
.front .cap{padding:14px 16px 16px;color:var(--ink)}
.front .cap small{display:block;font-size:12px;color:var(--ink-3);font-weight:500}
.front .cap b{display:block;font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.3}
.front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 48%,transparent 60%);
  transform:translateX(var(--shine,-120%));transition:transform 1s var(--ease);pointer-events:none}
.card.active .front::after{--shine:120%}
.back{transform:rotateY(180deg);background:linear-gradient(160deg,#FFFFFF 0%,#EEF3FC 100%);color:var(--ink);padding:18px 18px 16px;display:flex;flex-direction:column}
.back small{font-size:12px;color:var(--brand);font-weight:700}
.back h3{font-size:20px;font-weight:700;letter-spacing:-.03em;line-height:1.3;margin-top:2px}
.back ul{list-style:none;margin:10px 0 0;display:grid;gap:6px}
.back li{font-size:13.5px;color:var(--ink-2);display:flex;gap:6px;line-height:1.4}
.back li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--brand);margin-top:6px}
.back .go{margin-top:auto;display:block;text-align:center;background:var(--brand);color:var(--white);font-weight:700;font-size:15px;padding:13px;border-radius:12px;text-decoration:none}
.back .fine{font-size:11px;color:var(--ink-3);margin-top:8px;line-height:1.4}

.hint{position:relative;z-index:3;text-align:center;font-size:13px;color:rgba(255,255,255,.72);padding:0 20px 6px;min-height:26px;opacity:0;transition:opacity .8s ease .2s}
.ready-2 .hint{opacity:1}
button.hint{display:block;margin:0 auto;text-decoration:underline;text-underline-offset:3px}
.legal{position:relative;z-index:3;text-align:center;font-size:12px;color:rgba(255,255,255,.55);padding:4px 20px 12px}

@media (min-width:900px){ :root{--cw:270px} .head{padding-top:40px} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .ln>span{transform:none}.head p,.hint,.glow{opacity:1}
}

/* 첫 화면 아래 상품 구역(새 시안 공용) */
.prods{background:var(--white);padding:64px 20px 110px}
.prods>*{max-width:1080px;margin-left:auto;margin-right:auto}
.prods h2{font-size:28px;font-weight:700;letter-spacing:-.035em;line-height:1.2}
.prods>p{font-size:15px;color:var(--ink-2);margin-top:6px}
.prods .grid{display:grid;gap:16px;margin-top:24px;perspective:1000px}
.prods .rise{transform:translateY(60px) rotateX(28deg);opacity:0;transform-origin:50% 100%;transition:transform 1s var(--ease),opacity .7s ease}
.prods .rise.in{transform:none;opacity:1}
.prods .rise:nth-child(2){transition-delay:.1s}.prods .rise:nth-child(3){transition-delay:.2s}
.pcard{border-radius:22px;overflow:hidden;background:var(--white);box-shadow:0 20px 44px -24px rgba(15,44,107,.35),0 0 0 1px #E3E7EC;transition:box-shadow .4s}
.pcard.pick{box-shadow:0 0 0 3px var(--brand),0 20px 44px -20px rgba(15,44,107,.5)}
.pcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pcard div{padding:16px 18px 18px}
.pcard h3{font-size:20px;font-weight:700;letter-spacing:-.03em}
.pcard p{font-size:14px;color:var(--ink-2);margin-top:2px}
.prods .fine{font-size:13px;color:var(--ink-3);margin-top:18px}
@media (min-width:900px){ .prods .grid{grid-template-columns:repeat(3,1fr)} }
@media (prefers-reduced-motion:reduce){ .prods .rise{transform:none;opacity:1} }
.hero img,.zoom img{-webkit-touch-callout:none;-webkit-user-drag:none}