/* Layout: sticker-zine drop page. Loud brand blocks (vivid pink / chocolate / bone / black), expanded grotesk, real product cut-outs you can throw around. Deliberately single-look (brand colours), not theme-switched. */
.drop01 img{max-width:100%}
html{scroll-behavior:smooth}
body.drop01{background:var(--bone); color:var(--black); font-family:var(--ko); line-height:1.5; overflow-x:hidden}
body.drop01::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:50; background:var(--black)}
.gut{padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px))}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px}

/* top bar */
.bar{position:sticky; top:env(safe-area-inset-top, 0px); z-index:40; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px}
.bar .logo{font-family:var(--script); font-size:28px; color:var(--white); text-decoration:none; line-height:1}
.bar .anchors{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.bar .anchors a{font:500 11px var(--mono); letter-spacing:.06em; color:var(--white); text-decoration:none; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 10px}
.bar .anchors a.d{background:var(--lime); color:var(--black); border-color:var(--lime)}

/* hero */
/* 히어로 톤앤매너 (2026-11-12): 무채색 바탕 + 포인트 컬러 하나(코발트 블루). 히어로 안에서만 쓰는 색이라 여기 변수로 둔다 */
.d-hero{--accent:#3C4498; --hero-bg:#F4F4F4}   /* 원형 배지는 원래 형광 라임 그대로 (--badge-* 를 두지 않으면 라임·검정) */
.d-hero{position:relative; background:var(--hero-bg); overflow:hidden; min-height:clamp(560px, 86vh, 820px); display:grid; align-content:space-between; padding-block:26px 18px; touch-action:pan-y}
.hero-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; position:relative; z-index:3; pointer-events:none}
.hero-top p{margin:0; max-width:340px; font-weight:700; font-size:clamp(16px,1.8vw,20px); line-height:1.35}
.hero-top .mono{align-self:start; background:var(--black); color:var(--white); padding:6px 10px; border-radius:999px}
/* 'EDC: Everyday Carry' - 문구 위의 작은 라벨. 포인트 코발트 블루 */
.hero-lead{display:flex; flex-direction:column; gap:8px}
.edc-tag{font-family:var(--mono); font-size:clamp(11px,1vw,13px); letter-spacing:.06em; color:var(--accent)}
.edc-tag b{font-weight:700}
/* 좁은 폰(문구+라벨이 한 줄에 안 들어갈 때) - 라벨이 아래 줄로 떨어져 위가 비어 보이지 않게, 오른쪽 위 자리에서 두 줄로 접는다 */
@media (max-width:480px){
  .hero-top{flex-wrap:nowrap; gap:12px}
  .hero-top p, .hero-lead{flex:none}
  .hero-top .mono{flex:0 1 auto; min-width:0; text-align:center; line-height:1.35; border-radius:14px}
}
/* 히어로 내용 폭(좌우 여백 뺀 것)에 MANCHIDE 가 꼭 맞게: 글자 폭 ≈ 글자 크기 × 6.96 → 100cqw/7.1 (약간 여유). 최대 250px */
.d-hero{container-type:inline-size}
/* 지갑을 잡고 끌 때 글자(MANCHIDE · 문구)가 파랗게 선택되지 않게 - 히어로 전체에서 선택 · 길게 눌러 복사 메뉴 · 이미지 끌기를 막는다 */
.d-hero{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.d-hero img{-webkit-user-drag:none}
.giant{color:var(--accent); font-size:min(250px, calc(100cqw / 7.1)); line-height:.8; margin:0 0 0 -.06em; white-space:nowrap; position:relative; z-index:1; user-select:none}
/* margin-left -.06em: 큰 M 글꼴의 왼쪽 여백만큼 당겨 아래 "한 손에 착 감기는" 글자 시작과 맞춘다 (글자 크기에 비례해서 em) */
.giant span{display:inline-block; transition:transform .5s cubic-bezier(.3,1.6,.4,1); transform-origin:50% 100%}
.giant span.pop{animation:squash .7s cubic-bezier(.3,1.6,.4,1)}
@keyframes squash{0%{transform:scale(1,1)} 30%{transform:scale(1.15,.7)} 60%{transform:scale(.92,1.12) translateY(-6%)} 100%{transform:scale(1,1)}}
.d-sub{display:flex; justify-content:space-between; align-items:end; gap:12px; flex-wrap:wrap; position:relative; z-index:3}
.d-sub .kr{font-family:var(--kr); font-size:clamp(22px,3.2vw,40px); line-height:1.05}
/* 안내 칩 (지갑을 잡고 던져 보세요 · 폰 기울이기) - EDC 섹션 안내 칩과 같게: 흰 바탕 · 옅은 테두리 · 그림자 없음 */
.hint{font:500 12px var(--mono); letter-spacing:.04em; color:#6B6B6B; background:var(--white); border:1px solid #D6D6D6; border-radius:999px; padding:7px 14px}
.hint-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tilt-btn{cursor:pointer; line-height:inherit}
.tilt-btn:hover{border-color:#9A9A9A; color:var(--black)}
.tilt-btn[hidden]{display:none}
.tilt-btn[aria-pressed="true"]{background:var(--accent); color:var(--white); border-color:var(--accent)}
.tilt-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.stk{position:absolute; left:0; top:0; z-index:2; cursor:grab; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 18px 18px rgba(0,0,0,.24)); touch-action:none; will-change:transform}
.stk:active{cursor:grabbing}
/* 첫 화면 깜빡임 방지 - 스크립트가 크기·위치를 잡기 전에는 원래 크기로 왼쪽 위에 뭉쳐 보이므로,
   처음엔 투명 + 최종 크기로 두었다가 첫 배치가 끝나면(.is-ready) 제자리에서 부드럽게 나타난다 */
.stk{height:min(190px, 13vw); opacity:0; transition:opacity .45s ease}
.d-hero.is-ready .stk{opacity:1}
@media (max-width:639px){ .stk{height:92px} }
@media (prefers-reduced-motion: reduce){ .stk{transition:none} }
/* 지갑이 벽에 부딪힌 자국 - 벽을 따라 납작한 하얀 빛이 쫀득하게 부풀었다 퍼지며 사라진다 (검정 테두리 없음) (js: hit → ring). 벽 바깥 절반은 히어로 overflow 로 잘린다 */
.hit{position:absolute; z-index:1; width:var(--len); height:var(--len); margin:calc(var(--len) / -2) 0 0 calc(var(--len) / -2); border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(60,68,152,.22), rgba(60,68,152,0)); animation:hitRing .6s cubic-bezier(.22,1.6,.4,1) forwards}
.hit.hx{transform:scaleX(.32)}
.hit.hy{transform:scaleY(.32)}
@keyframes hitRing{0%{scale:.15; opacity:1} 45%{scale:1; opacity:.9} 100%{scale:1.15; opacity:0}}
.badge{position:absolute; z-index:4; right:max(18px, env(safe-area-inset-right, 0px)); top:84px; width:clamp(110px,14vw,170px); aspect-ratio:1; pointer-events:none}
.badge svg{width:100%; height:100%; animation:spin 16s linear infinite}
/* 화면 밖이면 멈춘다 (js 가 .anim-off) - 보이지 않는 곳에서 계속 돌면 폰이 데워진다 */
.anim-off svg, .anim-off .track, .anim-off .big-stamp{animation-play-state:paused}
.badge .core{position:absolute; inset:22%; background:var(--badge-ink, var(--black)); -webkit-mask:var(--stamp) center/contain no-repeat; mask:var(--stamp) center/contain no-repeat}
@keyframes spin{to{transform:rotate(360deg)}}

/* tapes */
/* X 자 띠 톤앤매너 (2026-11-12): 검정 띠 + 흰 글자, 코발트 블루 띠 + 흰 글자, 뒤는 히어로와 같은 연회색 */
.tapes{--accent:#3C4498; position:relative; height:170px; background:#F4F4F4; overflow:hidden}
.tape{position:absolute; left:-10%; right:-10%; top:50%; padding-block:14px; overflow:hidden; border-block:2px solid var(--black)}
.tape.a{background:var(--black); color:#FFFFFF; transform:translateY(-50%) rotate(-4deg)}
.tape.b{background:var(--accent); color:#FFFFFF; transform:translateY(-50%) rotate(3deg)}
/* 좁은 화면은 같은 기울기로는 양 끝에서도 거의 안 벌어져 초록 띠가 검정 띠에 다 가려진다 → 더 기울여 X 자로 엇갈리게 */
@media (max-width:640px){
  .tapes{height:210px}
  .tape.a{transform:translateY(-50%) rotate(-9deg)}
  .tape.b{transform:translateY(-50%) rotate(8deg)}
}
.track{display:flex; width:max-content; animation:run 24s linear infinite}
.tape.b .track{animation-direction:reverse; animation-duration:30s}
.track span{font-family:var(--x); font-variation-settings:"wdth" 125; font-weight:900; font-size:26px; text-transform:uppercase; white-space:nowrap; padding-right:26px; letter-spacing:-.02em}
.track span.k{font-family:var(--kr); font-weight:400; letter-spacing:0}
@keyframes run{to{transform:translateX(-50%)}}

/* drop: 카드 레일 - 세로 스크롤은 그대로 내려가고, 레일은 잡고 끌어(마우스)·스와이프(터치)·가로 스크롤(트랙패드)로 넘긴다 */
/* drop01 톤앤매너 (2026-11-12): 흰 바탕 · 무채색 카드 + 포인트 컬러(코발트 블루). 한정판(03)만 블루 카드로 강조 */
.drop{--accent:#3C4498; background:#FFFFFF; color:var(--black)}
.drop-pin{position:relative}
/* 소개 문구는 제목(Drop 01 wallets) 바로 옆에 - 오른쪽 끝으로 보내면 큰 화면에서 멀리 떨어져 어색했다 */
/* 문구의 마지막 줄 글자 바닥을 DROP 01 글자 바닥에 맞춘다 (last baseline) */
.drop-head{display:flex; justify-content:flex-start; align-items:last baseline; gap:16px 32px; flex-wrap:wrap; padding-block:56px 22px}
.drop-head h2{margin:0; font-size:clamp(40px,8vw,110px); line-height:.85; color:var(--black)}
.drop-head h2 i{font-family:var(--script); font-style:normal; font-weight:400; text-transform:none; color:var(--accent); letter-spacing:0; font-size:.8em}
.drop-lead{display:flex; flex-direction:column; gap:8px}
.drop-head p{margin:0; max-width:320px; color:var(--black); font-weight:700; line-height:1.4}
.rail{display:flex; gap:20px; padding-bottom:56px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(18px, env(safe-area-inset-left, 0px)); scrollbar-width:none; overscroll-behavior-x:contain}
/* 마우스로 잡고 넘기기 (js: drag rail). 넘길 게 있을 때만 손 모양, 끄는 동안은 스냅·선택·이미지 끌기를 끈다 */
.rail.can-drag{cursor:grab}
.rail.dragging{cursor:grabbing; scroll-snap-type:none; user-select:none}
.rail.dragging .d-card{pointer-events:none}
.rail img, .rail a{-webkit-user-drag:none}
.rail::-webkit-scrollbar{display:none}
.d-card{flex:0 0 min(78vw, 400px); scroll-snap-align:start; border-radius:22px; padding:20px; display:grid; grid-template-rows:auto 1fr auto; gap:10px; min-height:520px; position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1); border:2px solid var(--black); overflow:hidden}
.d-card.live{transition:transform .08s linear}
.d-card .top{display:flex; justify-content:space-between; align-items:start; gap:8px}
.d-card .no{font-family:var(--x); font-variation-settings:"wdth" 125; font-weight:900; font-size:44px; line-height:.8}
.d-card .tag{font:500 11px var(--mono); letter-spacing:.06em; border:1.5px solid currentColor; border-radius:999px; padding:4px 9px; white-space:nowrap}
.d-card .pic{display:grid; place-items:center; min-height:0}
.d-card .pic img{max-height:330px; max-width:90%; filter:drop-shadow(0 22px 20px rgba(0,0,0,.35)); transform:translateZ(40px) rotate(var(--rot,0deg)); transition:transform .5s cubic-bezier(.3,1.5,.4,1)}
.d-card:hover .pic img{transform:translateZ(60px) rotate(0deg) scale(1.06)}
/* 닫힘·열림 두 장을 같은 칸에 겹쳐 두고, 마우스를 올리면(키보드는 칩에 포커스, 터치는 칩을 누르면 잠깐 .peek) 열린 쪽으로 바뀐다 */
.d-card .pic img{grid-area:1/1; transition:transform .5s cubic-bezier(.3,1.5,.4,1), opacity .28s ease}
.d-card .pic .pc-open{opacity:0}
.d-card:has(.sw:focus-visible) .pic .pc-open, .d-card.peek .pic .pc-open{opacity:1}
.d-card:has(.sw:focus-visible) .pic .pc-closed, .d-card.peek .pic .pc-closed{opacity:0}
@media (hover:hover){   /* 터치 기기는 탭한 뒤 :hover 가 남아 열린 채로 굳으므로 마우스가 있을 때만 */
  .d-card:hover .pic .pc-open{opacity:1}
  .d-card:hover .pic .pc-closed{opacity:0}
}
/* 색 칩 - 카드 전체 링크(z-index 2) 위에 올려 눌리게 한다 */
.swatches{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; position:relative; z-index:3}
.sw{width:22px; height:22px; border-radius:50%; background:var(--sw); border:2px solid var(--black); padding:0; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); transition:transform .2s cubic-bezier(.3,1.6,.4,1)}
.sw:hover{transform:scale(1.15)}
.sw[aria-pressed="true"]{outline:2px solid var(--black); outline-offset:2px}
.sw:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.d-card h3{margin:0; font-size:30px; line-height:.95}
/* 제목 자리를 두 줄 높이로 똑같이 잡고 아래에 붙인다 - 제목이 두 줄인 카드(Christmas Edition)만 사진 칸이 줄어 지갑이 위로 떠 보이던 것 */
.d-card h3{min-height:1.9em; display:flex; align-items:flex-end}
/* 좁은 화면에서는 아래 표시(색·소재)도 카드마다 한 줄/두 줄이 갈려 사진 칸 높이가 달라진다 → 두 줄 높이로 맞춘다 */
@media (max-width:480px){ .d-card .meta{min-height:calc(2 * (11px * 1.5 + 8px) + 6px); align-content:flex-start} }
.d-card .meta{display:flex; flex-wrap:wrap; gap:6px}
.d-card .meta span{font:500 11px var(--mono); background:rgba(0,0,0,.06); border-radius:999px; padding:4px 9px}
/* 카드 전체가 제품 링크 (오픈 전에는 /product 가 Coming soon) */
.d-card-link{color:inherit; text-decoration:none}
.d-card-link::before{content:""; position:absolute; inset:0; z-index:2; border-radius:inherit}
.d-card-link:focus-visible{outline:none}
.d-card-link:focus-visible::before{outline:3px solid var(--lime); outline-offset:3px}
.c1{background:#EDEDED; color:var(--black)}
.c2{background:#FFFFFF; color:var(--black)}
.c3{background:var(--pink); color:var(--black)}
.c4{background:var(--accent); color:#FFFFFF; border-color:var(--accent)}
.c4 .meta span{background:rgba(255,255,255,.18)}
.c4 .pic{place-items:center}
/* 03 Christmas Edition(검정 카드) - 칩 테두리가 배경에 묻히지 않게 밝게 */
.c4 .sw{border-color:#FFFFFF}
/* 판매 기간 배지 - 지갑 아래·제목 위 빈자리에 띄워 카드 레이아웃(사진 칸 높이)은 그대로 */
.d-card .period{position:absolute; z-index:3; top:352px; left:20px; font:700 12px var(--ko); background:var(--lime); color:var(--black); border:1.5px solid var(--black); border-radius:999px; padding:4px 10px; pointer-events:none}
.c4 .sw[aria-pressed="true"]{outline-color:#FFFFFF}

/* vibe switcher */
/* 오늘의 무드 톤앤매너 (2026-11-12): 배경은 무드와 상관없이 연회색. 무드 색은 뒤의 큰 글자를 그 가죽 색으로 옅게 칠해 보여 준다 (js: --vword) */
.vibe{--accent:#3C4498; position:relative; overflow:hidden; background:#F4F4F4; padding-block:56px}
/* 칩 묶음(제품별)은 항상 제목 아래 - 옆에 두면 제목 길이가 바뀔 때마다 칩이 아래로 떨어졌다 올라갔다 한다 */
.vibe-head{display:flex; flex-direction:column; align-items:flex-start; gap:18px; position:relative; z-index:3}
.vibe-head h2{margin:0; font-family:var(--kr); font-weight:400; font-size:clamp(34px,6vw,72px); line-height:1; color:var(--black)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
/* 무드 칩을 제품별로 묶어 보여 준다 (Alonso / Rocin / Christmas Edition) */
.chip-groups{display:grid; gap:10px; width:100%}
/* 라벨 칸 | 칩 칸 - 칩이 많아(Rocin) 넘치면 칩 칸 안에서만 줄바꿈 (라벨 아래로 통째로 떨어지지 않게). 라벨은 첫 줄 칩 글자에 맞춘다 */
.chip-group{display:grid; grid-template-columns:9.5em minmax(0,1fr); align-items:baseline; column-gap:10px}
.chip-label{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#6B6B6B; min-width:9.5em}
@media (max-width:640px){ .chip-group{grid-template-columns:minmax(0,1fr); row-gap:6px} }   /* 폰: 라벨 위, 칩 아래 (세 묶음 모두 같은 모양) */
/* 무드 칩 - 납작한 알약 버튼 (사용자가 준 예시의 .button.-regular / -blue). 테두리·광택 없이 색만 채우고 그림자는 옅게
   선택 안 됨 = 흰 바탕(예시의 #f2f2f2 는 이 섹션 배경과 같아 묻혀서 흰색으로), 선택됨 = 코발트 블루 채움 */
.chips button{display:inline-flex; align-items:center; gap:8px; padding:11px 20px 11px 14px; border:0 none; border-radius:36px; cursor:pointer;
  -webkit-appearance:none; appearance:none; user-select:none; white-space:nowrap;
  font:500 14px var(--ko); line-height:1; color:#202129; background:#FFFFFF;
  box-shadow:2px 5px 10px rgba(0,0,0,.06); transition:all 70ms linear}
.chips button:hover{background:#EBEBEB}
.chips button:active{background:#DEDEDE}
.chips button i{width:14px; height:14px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.chips button[aria-pressed="true"]{color:#FFFFFF; background:var(--accent)}
.chips button[aria-pressed="true"]:hover{background:var(--accent); opacity:.85}
.chips button[aria-pressed="true"]:active{opacity:.75}
.chips button[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.chips button:focus-visible{outline:1px dotted #959595; outline-offset:-4px}
.chips button[aria-pressed="true"]:focus-visible{outline-color:#FFFFFF}
.vibe-stage{--sh:clamp(380px, 52vw, 560px); position:relative; height:var(--sh); display:grid; place-items:center}
.vibe-word{position:absolute; inset:auto 0 0; text-align:center; font-size:clamp(70px, 22vw, 330px); line-height:.75; color:var(--vword, rgba(0,0,0,.18)); white-space:nowrap; pointer-events:none; transition:color .6s}
/* 사진 높이는 무대 높이 기준으로 직접 (퍼센트 max-height 는 grid 칸에서 적용되지 않아 큰 사진이 넘쳤다) */
.vibe-img{position:relative; z-index:2; max-height:calc(var(--sh) * .86); max-width:70%; width:auto; height:auto; filter:drop-shadow(0 30px 30px rgba(0,0,0,.35))}
.vibe-img.boing{animation:boing .8s cubic-bezier(.3,1.6,.4,1)}
/* 지갑을 누르면 통통 - 웅크렸다 쭉 늘어나며 뛰어올라, 납작하게 착지하고 두 번 더 작게 튄다 (바닥 기준으로 늘고 줄어든다) */
.vibe-img{cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent; transform-origin:50% 100%}
.vibe-img.hop{animation:hop .95s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{
  0%{transform:translateY(0) scale(1,1)}
  10%{transform:translateY(0) scale(1.1,.86)}
  28%{transform:translateY(-20%) scale(.92,1.1)}
  42%{transform:translateY(-24%) scale(1,1)}
  56%{transform:translateY(0) scale(1.14,.84)}
  66%{transform:translateY(-8%) scale(.96,1.05)}
  76%{transform:translateY(0) scale(1.06,.93)}
  84%{transform:translateY(-2.5%) scale(.99,1.01)}
  92%{transform:translateY(0) scale(1.02,.98)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes boing{0%{transform:scale(.4) rotate(-14deg); opacity:0} 60%{transform:scale(1.08) rotate(3deg); opacity:1} 100%{transform:scale(1) rotate(0)}}
.vibe-note{position:relative; z-index:3; margin:0; font:500 12px var(--mono); color:#6B6B6B}

/* trail */
/* EDC 섹션 전체 - 마우스로 문질러 지갑이 따라 나오게 하는 곳이라 글자·이미지가 선택(파랗게)되거나 끌리지 않게 */
/* EDC 톤앤매너 (2026-11-12): 흰 바탕 · 검정 제목 · 강조(평온)만 코발트 블루 */
.edc{--accent:#3C4498; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; position:relative; background:#FFFFFF; overflow:hidden; min-height:520px; display:grid; place-items:center; text-align:center; cursor:crosshair; touch-action:pan-y; padding-block:60px}
.edc h2{margin:0; font-family:var(--kr); font-weight:400; font-size:clamp(32px,6.2vw,88px); line-height:1.08; position:relative; z-index:1; word-break:keep-all; text-wrap:balance}
.d-hero .kr .nw{white-space:nowrap}   /* 좁은 화면에서 "애착지갑"만 혼자 떨어지지 않게 - 쉼표 뒤에서 줄바꿈 */
.edc h2 em{font-style:normal; color:var(--accent)}
.edc p{position:relative; z-index:1; margin:18px auto 0; max-width:520px; color:#6B6B6B; line-height:1.7; word-break:keep-all}
.edc p + p{margin-top:14px}
.edc p b{color:var(--black); font-weight:700}
.edc-eyebrow{margin-bottom:14px}   /* 히어로 · Drop 01 과 같은 EDC 라벨 */
/* 본문과 분리한 안내 칩 - 기기에 맞는 문구 하나만 */
.edc-hint{position:relative; z-index:1; margin-top:22px}
.edc-hint span{display:inline-block; font:500 12px var(--mono); letter-spacing:.04em; color:#6B6B6B; background:#FFFFFF; border:1px solid #D6D6D6; border-radius:999px; padding:7px 14px}
.edc-hint .on-touch{display:none}
@media (hover:none) and (pointer:coarse){ .edc-hint .on-mouse{display:none} .edc-hint .on-touch{display:inline-block} }
/* 따라 나오는 지갑(히어로 사진, 예전 것보다 가로로 넓다) - 화면 폭에 맞춰 데스크톱 ~115px, 모바일 ~80px */
.trail{position:absolute; left:0; top:0; height:clamp(80px, 8vw, 115px); width:auto; pointer-events:none; z-index:3; opacity:0; translate:-50% -50%; filter:drop-shadow(0 14px 14px rgba(0,0,0,.3))}
.trail.show{animation:pop 1.3s cubic-bezier(.3,1.5,.4,1) forwards}
@keyframes pop{0%{opacity:0; transform:rotate(var(--r)) scale(.3)} 18%{opacity:1; transform:rotate(var(--r)) scale(1)} 70%{opacity:1} 100%{opacity:0; transform:rotate(var(--r)) scale(.85) translateY(30px)}}

/* footer */
/* 맨 아래 오픈 안내 톤앤매너 (2026-11-12): 검정 배경은 그대로, 핑크 포인트 → 무채색 + 코발트 블루 (검정 위 글자 블루는 밝게) */
.d-foot{--accent:#3C4498; --accent-on-dark:#8A93F0; background:var(--black); color:#FFFFFF; position:relative; overflow:hidden; padding-block:64px 56px}
.foot-grid{display:grid; grid-template-columns:1fr; gap:28px; position:relative; z-index:2}
.count{display:flex; gap:10px; flex-wrap:wrap}
.foot-kicker{color:#9A9A9A}
.count div{background:var(--accent); color:#FFFFFF; border-radius:16px; padding:12px 14px 10px; min-width:84px; text-align:center; border:0}
.count b{display:block; font-family:var(--x); font-variation-settings:"wdth" 125; font-weight:900; font-size:clamp(34px,6vw,60px); line-height:.9; font-variant-numeric:tabular-nums}
.count small{font:500 11px var(--mono); letter-spacing:.08em}
.foot-title{margin:0; font-size:clamp(40px,9vw,130px); line-height:.82; color:#FFFFFF}
.foot-title i{font-family:var(--script); font-style:normal; font-weight:400; text-transform:none; color:var(--accent-on-dark); letter-spacing:0}
.cta{justify-self:start; display:inline-flex; align-items:center; gap:10px; font:800 16px var(--ko); background:var(--accent); color:#FFFFFF; border:0; border-radius:999px; padding:16px 24px; text-decoration:none; box-shadow:none; transition:transform .4s cubic-bezier(.3,1.5,.4,1)}
.big-stamp{position:absolute; right:-80px; bottom:-80px; width:min(520px, 80vw); aspect-ratio:1; background:#FFFFFF; opacity:.06; -webkit-mask:var(--stamp) center/contain no-repeat; mask:var(--stamp) center/contain no-repeat; animation:spin 40s linear infinite; z-index:1}
.d-legal{font-size:12px; color:#8E857D; margin:0; max-width:60ch}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .track, .badge svg, .big-stamp{animation:none}
  .giant span.pop, .vibe-img.boing, .vibe-img.hop{animation:none}
  .hit{display:none}
}

/* 사이트 공통 메뉴를 상단 바 안에 넣는다 (위치만 바꾸고 하위 메뉴·모바일 메뉴 동작은 layout 그대로) */
.bar .bar-end{display:flex; align-items:center; gap:14px}
.bar .top-nav{position:static; font-size:13px; text-shadow:none; align-items:center}
.bar .top-nav .sep{opacity:.4}
.bar .top-nav .nav-links{color:var(--white)}
@media (max-width:759px){
  .bar .anchors a:not(.d){display:none}
  .bar .top-nav{display:block}
  .bar .nav-burger{margin-block:-8px}
}
.d-foot + .site-footer{min-height:0}

/* 큰 글자·카드 줄이 칸 너비를 밀어내 오른쪽 요소가 잘리지 않게 칸을 화면 너비에 고정 */
.d-hero{grid-template-columns:minmax(0,1fr)}
/* 모바일에서도 카운트다운은 한 줄 */
@media (max-width:480px){
  .count{flex-wrap:nowrap; gap:6px}
  .count div{flex:1; min-width:0; padding-inline:6px}
}