/*! JUST MAKE · © 2008-2026 (주)에이치디그룹 HD GROUP · justmake.co.kr · 무단 복제·재배포·도용 금지 · All rights reserved · hdgjm-8e3cd6a19661 */
/* renew-1016.css — 2026-10-16 운영 반영 (임시안 stage-1015.css 와 같은 내용).
 *   1) 이벤트 카드 → 트레이딩 카드 덱(3D 홀로)   2) Proof 섹션(실측 숫자)   3) 할인 가격·섹션 길이 팝업 */

/* ========== 1. 이벤트: 카드 덱 ========== */
.deck { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.deck__info { position: relative; min-height: 340px; display: grid; align-content: center; gap: 18px; }
.deck__no { display: flex; gap: 14px; align-items: center; color: #8a8a86; }
.deck__no b { color: var(--lime); font-weight: 400; }
.deck__en { font: 700 clamp(36px, 3.9vw, 66px)/.95 var(--f-display); letter-spacing: -.05em; color: var(--white); }
.deck__name { font: 700 clamp(22px, 1.9vw, 30px)/1.3 var(--f-body); letter-spacing: -.02em; }
.deck__desc { max-width: 30em; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.7; color: #bdbdb8; }
.deck__bar { position: relative; height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; max-width: 320px; }
.deck__bar i { position: absolute; inset: 0; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
.deck.is-auto .deck__bar i { animation: deck-bar var(--deck-ms, 3600ms) linear forwards; }
@keyframes deck-bar { to { transform: scaleX(1); } }
.deck__info > .is-swap { animation: deck-in .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes deck-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

.deck__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 20px); perspective: 1200px; }
.deck__cards > li { min-width: 0; }
.tcard { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; border-radius: 14px;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .4s; transform: translateY(0); }
.tcard:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.deck__cards:hover .tcard:not(.is-on), .deck.has-pick .tcard:not(.is-on) { filter: brightness(.7) saturate(.85); }
.tcard.is-on { transform: translateY(-14px); filter: none; }
.tcard__face { position: relative; aspect-ratio: 5 / 7; border-radius: 14px; display: grid; grid-template-rows: auto 1fr auto;
  background: radial-gradient(120% 80% at 50% 0%, #2c2c4a 0%, #161618 62%), #161618; color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.tcard.is-on .tcard__face { box-shadow: inset 0 0 0 1.5px var(--lime), 0 18px 50px -16px rgba(215,255,0,.45); }
.tcard__top { display: flex; justify-content: space-between; padding: 9px 10px 0; font-size: 10px; color: #8a8a86; }
.tcard__art { position: relative; margin: 8px 10px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 100% 12.5%, linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 12.5% 100%,
    radial-gradient(90% 70% at 30% 20%, var(--c1, #5b47d6), transparent 70%), linear-gradient(160deg, var(--c2, #2a1bff), #121218 92%); }
.tcard__art .pass__icon { filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
/* 카드마다 색 — NFT 카드처럼 한 장씩 다른 빛 */
.deck__cards > li:nth-child(1) .tcard { --c1: #3df0ff; --c2: #1b3bff; }
.deck__cards > li:nth-child(2) .tcard { --c1: #ff6bd6; --c2: #6a2bff; }
.deck__cards > li:nth-child(3) .tcard { --c1: #ffb347; --c2: #ff3d6e; }
.deck__cards > li:nth-child(4) .tcard { --c1: #7dffb0; --c2: #0a8f6a; }
.deck__cards > li:nth-child(5) .tcard { --c1: #8e75ff; --c2: #26157a; }
.deck__cards > li:nth-child(7) .tcard { --c1: #ffe36b; --c2: #c2410c; }
.deck__cards > li:nth-child(8) .tcard { --c1: #6bc7ff; --c2: #ff2d87; }
.tcard--hot .tcard__art { color: var(--lime); background: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 100% 12.5%, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 12.5% 100%, radial-gradient(90% 70% at 50% 30%, rgba(215,255,0,.28), transparent 70%), #1e1e1c; }
.tcard__art .pass__icon, .tcard__art canvas { width: 64%; height: 64%; shape-rendering: crispEdges; image-rendering: pixelated; }
.tcard__art canvas { position: absolute; left: 18%; top: 18%; }
.tcard__foot { display: grid; gap: 3px; padding: 0 10px 11px; }
.tcard__en { font: 700 clamp(12px, .95vw, 15px)/1.1 var(--f-display); letter-spacing: -.01em; }
.tcard__code { font-size: 9.5px; color: #8a8a86; }
.tcard__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 검색엔진·화면낭독기용 — 화면에는 왼쪽 정보칸이 보여 준다 */

/* ========== 2. Live Proof (3차: 라임 한 화면 — 큰 문장 · 큰 숫자 · 실시간 기록창) ========== */
.lp { position: relative; background: var(--lime); color: var(--ink); padding: clamp(28px, 3vw, 44px) var(--pad) clamp(40px, 4vw, 64px); display: grid; gap: clamp(22px, 2.6vw, 40px); overflow: hidden; }
.lp__bar { display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 12px; }
.lp__live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.lp__live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 0 0 rgba(255,45,45,.6); animation: lp-ping 1.4s infinite; }
@keyframes lp-ping { 70% { box-shadow: 0 0 0 9px rgba(255,45,45,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); } }
.lp__clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.lp__title { font: 800 clamp(40px, 6.4vw, 118px)/1.02 var(--f-body); letter-spacing: -.055em; word-break: keep-all; }
.lp__mark { background: var(--ink); color: var(--lime); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lp__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 56px); align-items: stretch; }
.lp__nums { margin: 0; display: grid; align-content: space-between; gap: 0; }
.lp__num { display: grid; gap: 4px; padding: 14px 0 16px; border-top: 1px solid rgba(17,17,17,.35); }
.lp__num:first-child { border-top: 0; padding-top: 0; }
.lp__num dt { font: 600 15px/1.4 var(--f-body); }
.lp__num dt i { font-style: normal; font-weight: 400; color: #4a5a00; margin-left: 6px; font-size: 13px; }
.lp__num dd { margin: 0; }
.lp__n { font: 700 clamp(64px, 7.6vw, 136px)/.86 var(--f-display); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.lp__n small { font: 700 15px/1 var(--f-body); letter-spacing: 0; margin-left: 12px; vertical-align: 2.6em; background: var(--ink); color: var(--lime); padding: 5px 9px; border-radius: 999px; }
.lp__n small:empty { display: none; }
.lp__of { font-size: .34em; letter-spacing: -.02em; margin-left: 8px; }

.lp__term { display: grid; grid-template-rows: auto 1fr; border-radius: 18px; background: #0d0d0e; color: #e9e9e4; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); min-height: 0; }
.lp__term-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; font-size: 11.5px; color: #8a8a86; border-bottom: 1px solid rgba(255,255,255,.08); }
.lp__term-h i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; margin-right: 5px; }
.lp__rec { color: #ff4d4d; animation: lp-blink 1.2s steps(2) infinite; }
@keyframes lp-blink { 50% { opacity: .2; } }
.lp__log { list-style: none; margin: 0; padding: 8px 0; max-height: clamp(300px, 34vw, 470px); overflow: hidden; font: 400 13.5px/1.5 var(--f-pixel); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.lp__log li { display: grid; grid-template-columns: 52px 128px 1fr; gap: 12px; align-items: baseline; padding: 7px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.lp__log li.is-wait { display: block; color: #6f6f6b; }
.lp__log li.is-in { animation: lp-in .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lp-in { from { opacity: 0; transform: translateY(-8px); background: rgba(215,255,0,.18); } }
.lp__log time { color: #6f6f6b; font-variant-numeric: tabular-nums; }
.lp__who { display: inline-flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp__who::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #888); }
.lp__what { color: #a3a39e; font-family: var(--f-body); font-size: 14px; }
.lp__what b { color: #fff; font-weight: 600; }
.lp__log li.is-hot { background: rgba(215,255,0,.08); }
.lp__log li.is-hot .lp__what b { color: var(--lime); }
.lp__log li.is-sec .lp__what b { color: var(--lime); }

.lp__foot { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: center; padding-top: 18px; border-top: 2px solid var(--ink); }
.lp__pitch { font-size: 15px; line-height: 1.6; color: #2b3300; }
.lp__pitch b { color: var(--ink); font-size: 17px; margin-right: 8px; }
.lp__note { grid-column: 1 / -1; font-size: 12px; color: #4a5a00; }
.lp .btn--ink:hover { background: var(--white); color: var(--ink); }

/* ========== 3. 가격: 할인 + 섹션 팝업 ========== */
.pc__sale { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--lime); font: 600 13px/1 var(--f-body); }
.pc__sale::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: pf2-ping 1.8s infinite; }
.price { position: relative; }
/* 할인 뱃지: 기울이지 않는다 · 라임은 Proof·버튼에서 쓰므로 할인은 빨강 계열로 구분 (10-16 담당자) */
.price__off { position: absolute; top: clamp(18px, 1.8vw, 28px); right: clamp(18px, 1.8vw, 28px); display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #ff4a1c; color: #fff; font: 700 13px/1 var(--f-body); letter-spacing: -.01em; }
.price__was s { text-decoration-color: #ff4a1c; }
.price__was { margin-top: clamp(22px, 2.4vw, 38px); font-size: 15px; color: var(--grey-3); }
.price__was s { text-decoration-thickness: 1.5px; }
.price__was + .price__won { margin-top: 6px; }
.price__secbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.price__secbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.price__secbtn::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); color: var(--white); font: 700 10px/1 var(--f-display); text-decoration: none; }

.secpop { width: min(880px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 22px; background: var(--white); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.secpop::backdrop { background: rgba(10,10,12,.62); backdrop-filter: blur(4px); }
.secpop[open] { animation: deck-in .35s cubic-bezier(.2, .8, .2, 1); }
.secpop__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding: clamp(24px, 3vw, 44px); }
.secpop__x { position: sticky; top: 12px; float: right; margin: 12px 12px -48px 0; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--grey-1); cursor: pointer; font: 400 22px/1 var(--f-body); }
.secpop__k { color: var(--grey-3); }
.secpop h2 { margin-top: 10px; font: 700 clamp(26px, 2.6vw, 38px)/1.2 var(--f-body); letter-spacing: -.03em; }
.secpop__lead { margin-top: 12px; color: var(--grey-4); line-height: 1.7; }
.secpop__range { margin-top: 26px; }
.secpop__range label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.secpop__range output { font: 700 32px/1 var(--f-display); letter-spacing: -.04em; }
.secpop__range input { width: 100%; margin-top: 12px; accent-color: var(--ink); }
.secpop__plan { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: var(--grey-1); }
.secpop__plan b { display: block; font-size: 18px; }
.secpop__plan s { color: var(--grey-3); margin-right: 6px; }
.secpop__plan span { color: var(--grey-4); font-size: 14px; }
.secpop__eg { margin-top: 18px; font-size: 14px; color: var(--grey-4); line-height: 1.7; }
.secpop__page { position: relative; align-self: start; justify-self: center; width: min(300px, 100%); padding: 26px 14px 14px; border-radius: 18px; background: #f4f4f1; box-shadow: inset 0 0 0 1px var(--grey-2); }
.secpop__page::before { content: ""; position: absolute; top: 10px; left: 14px; width: 30px; height: 7px; background: radial-gradient(circle, #ff8d80 3px, transparent 3.5px) 0 0 / 10px 7px repeat-x; }
.secpop__blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.secpop__blocks li { display: grid; grid-template-columns: 1fr 40px; gap: 6px 8px; align-items: center; height: 0; padding: 0 10px; overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1px var(--grey-2); opacity: 0;
  transition: height .35s cubic-bezier(.2, .8, .2, 1), padding .35s, margin .35s, opacity .3s; }
.secpop__blocks li.is-on { height: 46px; padding: 8px 10px; margin-bottom: 6px; opacity: 1; }
.secpop__blocks li span { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secpop__blocks li em { font: 400 11px/1 var(--f-pixel); font-style: normal; color: var(--grey-3); text-align: right; }
.secpop__blocks li.is-pre { background: #fbffe0; box-shadow: inset 0 0 0 1px #d7ff00; }

/* ========== 반응형 ========== */
@media (max-width: 1024px) {
  .lp__body { grid-template-columns: 1fr; }
  .lp__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); }
  .lp__num, .lp__num:first-child { border-top: 0; padding-top: 0; }
  .deck { grid-template-columns: 1fr; }
  .deck__info { min-height: 0; }
}
@media (max-width: 767px) {
  .lp__nums { grid-template-columns: 1fr; }
  .lp__num { border-top: 1px solid rgba(17,17,17,.35); padding-top: 12px; }
  .lp__n { font-size: 72px; }
  .lp__log li { grid-template-columns: 44px 1fr; }
  .lp__log .lp__what { grid-column: 1 / -1; }
  .lp__foot { grid-template-columns: 1fr; }
  .deck__cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 18px var(--pad) 8px; scrollbar-width: none; }
  .deck__cards::-webkit-scrollbar { display: none; }
  .deck__cards > li { flex: 0 0 38vw; scroll-snap-align: center; }
  .secpop__in { grid-template-columns: 1fr; }
  .secpop__page { order: -1; width: min(240px, 100%); }
  .price__off { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcard, .deck__info > .is-swap, .secpop__blocks li { transition: none; animation: none; }
}

/* 떠다니는 주사위는 숨기지 않고 물러난다 — zig3d-1015.js (10-16 담당자 2번안) */
@keyframes pf2-ping { 70% { box-shadow: 0 0 0 8px rgba(215,255,0,0); } 100% { box-shadow: 0 0 0 0 rgba(215,255,0,0); } }
/* 주사위 층: 새로 만든 칸들도 본문 층(2)에 올린다 — 물러난 주사위(1)가 기록창·카드 뒤로 들어가게 */
.lp > *, .deck, .ev .sec__head, .ev__foot { position: relative; z-index: 2; }

/* 모바일 카드 가로 넘김: holo-card.js 가 [data-holo] 에 touch-action: pan-y 를 걸어 옆으로 밀리지 않았다 (10-16 담당자 "슬라이드가 안 돼")
   덱 안에서는 가로·세로 둘 다 브라우저 스크롤에 맡긴다 — 기울기는 마우스/누르고 있을 때만 */
.deck__cards .tcard__face[data-holo] { touch-action: pan-x pan-y; }