/* 기본은 다크 (밤하늘에 뜬 달) */
:root {
  --bg: #0e0e10;
  --ink: #f3f3f1;
  --ink-2: #b6b6ba;
  --dim: #7b7b80;
  --line: #26262a;
  --tile: #1b1b1e;
  --tile-dark: #262629;
  --accent: #d6b47a;
  --btn: #1f1f22;
  --panel: #17171a;
  --glow: rgba(255,255,255,.13);
  color-scheme: dark;

  --moon-hi: #ffffff;
  --moon-mid: #d6d6d6;
  --moon-lo: #8f8f8f;
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

/* ── 달 (images/moon-*.png) ── */
.moon {
  --s: 24px;
  display: inline-block; flex: none;
  width: var(--s); height: var(--s);
  background: url(images/moon-full.png) center / contain no-repeat;
}
.moon-crescent { background-image: url(images/crescent.png); }
.moon-half { background-image: url(images/moon-waning-gibbous.png); }

/* ── nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 26px;
}
.logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.logo .moon { --s: 24px; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.logo:hover .moon { transform: rotate(-30deg) scale(1.08); }
.nav nav { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .04em; }
.nav-link { color: var(--ink-2); }
.nav-link:hover { color: var(--ink); }
.nav-btn {
  padding: 9px 18px; border-radius: 6px; background: var(--btn);
  font-weight: 500; transition: background .2s;
}
.nav-btn:hover { background: color-mix(in srgb, var(--btn) 80%, var(--ink)); color: var(--bg); }

/* ── hero: 달 하나 ── */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px 20px 60px;
  transition: padding .9s cubic-bezier(.2,.8,.2,1);
}
.opened .hero { padding-top: 84px; padding-bottom: 40px; }   /* 열린 뒤에도 화면 가운데 */

.stage { position: relative; width: 300px; height: 300px; display: grid; place-items: center;
  transition: width .9s cubic-bezier(.2,.8,.2,1), height .9s cubic-bezier(.2,.8,.2,1); }
.opened .stage { width: 170px; height: 170px; }

.moon-btn {
  position: relative; z-index: 2;
  width: 180px; height: 180px; border: none; background: none; cursor: pointer; border-radius: 50%;
  transition: width .9s cubic-bezier(.2,.8,.2,1), height .9s cubic-bezier(.2,.8,.2,1), filter .3s, opacity 1.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.moon-btn:focus { outline: none; }
.moon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.moon-btn img, .logo img, .shot img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.hero, .nav { -webkit-user-select: none; user-select: none; }
/* 가만히 있으면 가끔 숨 쉬듯 — 누를 수 있다는 은근한 신호 */
.moon-btn.nudge .moon-body { animation: nudge 1.4s ease-in-out; }
@keyframes nudge { 0%, 100% { scale: 1; } 35% { scale: 1.06; } 60% { scale: .98; } }   /* transform 대신 scale — 커서 따라 움직이는 위치를 덮어쓰지 않게 */
.moon-btn.nudge::before { animation: glowpulse 1.4s ease-in-out; }
@keyframes glowpulse { 40% { transform: scale(1.25); opacity: 1; } }
.ripple.big { width: 420px; height: 420px; margin: -210px 0 0 -210px; border-color: rgba(214,180,122,.4); box-shadow: 0 0 40px rgba(214,180,122,.15), inset 0 0 40px rgba(214,180,122,.1); animation-name: ripplebig; }
@keyframes ripplebig { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.ripple.soft { border-color: rgba(255,255,255,.16); box-shadow: none; animation-duration: 2.2s; }
/* 달빛 — 그림자 대신 은은한 빛 */
.moon-btn::before {
  content: ''; position: absolute; inset: -38%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  transition: opacity .4s, transform .6s;
}
.moon-btn:hover::before { transform: scale(1.08); }
.moon-btn.spin::before { animation: flare 1s ease; }
@keyframes flare { 30% { transform: scale(1.35); opacity: 1; } }
.moon-btn:hover img { filter: brightness(1.04); }
.moon-btn:active img { scale: .96; }
.opened .moon-btn { width: 108px; height: 108px; }
.sky-hint .moon-btn { opacity: 0; pointer-events: none; }   /* 'or move the sky?' 동안 달은 숨김 */
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes spin {
  0%   { transform: rotate(0) scale(1); }
  20%  { transform: rotate(-24deg) scale(1.08); filter: brightness(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}


/* 누를 때 터지는 반짝이 */
.sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: block; }   /* 달 안에 있어서 달과 같이 움직임 */
.ripple {
  position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 24px rgba(255,255,255,.12), inset 0 0 24px rgba(255,255,255,.08);
  opacity: 0; animation: ripple 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ripple { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(2.6); } }
.dust {
  position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.7), 0 0 14px 2px rgba(214,180,122,.25);
  opacity: 0; animation: dust 1.6s cubic-bezier(.15,.6,.3,1) forwards;
}
@keyframes dust {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(var(--z)); }
}

.tap {
  margin-top: 10px; font: italic 500 15px var(--serif); color: var(--dim); letter-spacing: .02em;
  animation: breathe 2.6s ease-in-out infinite;
  transition: opacity .4s, margin .6s, height .6s;
}
@keyframes breathe { 50% { opacity: .35; } }
.opened .tap { margin-top: 2px; font-size: 13px; cursor: pointer; }
.tap.hush { opacity: 0; animation: none; }
.tap.swap { opacity: 0; animation: none; }
.tap.strong { color: var(--ink-2); animation: none; }   /* 달에 커서 댄 동안: 깜빡임 없이 조금 더 진하게 */

/* 열리면 아래로 펼쳐짐 (0fr → 1fr) */
.unveil { display: grid; grid-template-rows: 0fr; width: 100%; transition: grid-template-rows .9s cubic-bezier(.2,.8,.2,1); }
.unveil-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.opened .unveil { grid-template-rows: 1fr; }
.unveil-in > * { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.opened .unveil-in > * { opacity: 1; transform: none; }
.opened .unveil-in > :nth-child(1) { transition-delay: .15s; }
.opened .unveil-in > :nth-child(2) { transition-delay: .3s; }
.opened .unveil-in > :nth-child(3) { transition-delay: .45s; }
.opened .unveil-in > :nth-child(4) { transition-delay: .6s; }
.opened .unveil-in > :nth-child(5) { transition-delay: .75s; }

.hero h1 {
  margin-top: 18px; text-align: center;
  font-weight: 700; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2; letter-spacing: -0.035em;
}
.hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--accent); letter-spacing: -0.01em; }

/* 뽑힌 템플릿에 맞는 한 줄 — 카드 아래칸에 타자기로 */
.fortune {
  flex: 1; min-height: 1.5em; margin: 0;
  font: 400 13px/1.5 'Courier Prime', 'Courier New', monospace; color: var(--ink); letter-spacing: .01em; opacity: .9;
  white-space: pre-line;
}
.m-br { display: none; }
@media (max-width: 560px) { .m-br { display: inline; } }
.fortune:not(:empty)::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* 뽑힌 템플릿 */
.pick { position: relative; width: 100%; max-width: 470px; margin-top: 26px; perspective: 1200px; }
.pick-card {
  border-radius: 22px; perspective: 1400px;
  animation: pop .7s cubic-bezier(.2,.9,.25,1.15);
  transition: translate .35s cubic-bezier(.3,.8,.25,1), scale .35s cubic-bezier(.3,.8,.25,1), filter .35s;
}
/* 앞/뒷면 뒤집기 */
.flip { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.35,.1,.2,1); border-radius: 22px; }
.flipped .flip { transform: rotateY(180deg); }
.face { border-radius: 22px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.front { position: relative; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.28); }
.face.back { position: absolute; inset: 0; transform: rotateY(180deg); }
/* 카드 뒷면 = 카드 아래칸과 같은 한 가지 색 */
.cardback {
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
}
.fly { position: absolute; inset: 0; z-index: 4; pointer-events: none; will-change: transform; }
/* 카드 고리 */
.ring-wrap {
  position: absolute; left: -40%; right: -40%; top: -10%; bottom: -10%; z-index: 4;
  display: grid; place-items: center; perspective: 1000px; perspective-origin: 50% 40%;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.ring-on .ring-wrap { opacity: 1; }
.ring { position: relative; transform-style: preserve-3d; }
.rcard {
  position: absolute; inset: 0; border-radius: 14px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
}
.pick.ring-on .deck { opacity: 0; }
.fly-card { position: absolute; inset: auto; z-index: 6; pointer-events: none; will-change: transform; }
.shuffling .deck { opacity: 0; }
.deck { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.ring-on .pick-card { pointer-events: none; }
.shuffling { cursor: pointer; }
/* 공개 직전 금빛으로 떠오름 */
.pick-card.hidden { visibility: hidden; }
/* 럭키카드: 금빛이 더 진하고 오래 */
.pick-card.lucky .face.front { border-color: rgba(214,180,122,.45); }
.pick-card.lucky.landed { animation: luckyglow 2.4s ease-out; }
@keyframes luckyglow {
  0% { box-shadow: 0 0 0 0 rgba(214,180,122,0); }
  20% { box-shadow: 0 0 0 2px rgba(214,180,122,.7), 0 0 80px 10px rgba(214,180,122,.3); }
  100% { box-shadow: 0 0 0 1px rgba(214,180,122,.25), 0 0 40px 2px rgba(214,180,122,.1); }
}
.pick-card.lucky .fortune { color: var(--accent); }
/* 럭키카드: 멘트를 이미지 한가운데에, 가운데 정렬 두 줄 */
.shot { position: relative; }
.lucky-text {
  position: absolute; inset: 0; margin: 0; display: none;
  align-items: center; justify-content: center; text-align: center; white-space: pre-line;
  font: 400 clamp(14px, 2.2vw, 18px)/1.7 'Courier Prime', 'Courier New', monospace; color: var(--accent); letter-spacing: .02em;
  pointer-events: none;
}
.pick-card.lucky .lucky-text { display: flex; }
/* 럭키카드는 아래칸을 얇게 (↗만) */
.pick-card.lucky .pick-body { min-height: 0; padding: 8px 18px 10px; }
.pick-card.lucky .pick-body .fortune { display: none; }
.pick-card.lucky .pick-go { font-size: 15px; }
.pick-card.lucky { box-shadow: 0 0 0 1px rgba(214,180,122,.25), 0 0 40px 2px rgba(214,180,122,.1); border-radius: 22px; }
.pick-card.rise { translate: 0 -14px; scale: 1.04; filter: drop-shadow(0 0 28px rgba(214,180,122,.35)); }
.shuffling .pick-card { cursor: pointer; }
@keyframes pop { 0% { opacity: 0; transform: rotateX(-14deg) translateY(-12px) scale(.94); } 100% { opacity: 1; transform: none; } }
.pick-fig { display: block; background: var(--tile); padding: 22px 22px 0; }
.shot { overflow: hidden; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 16px 30px -18px rgba(0,0,0,.3); }
.shot img { display: block; width: 100%; aspect-ratio: 538 / 280; object-fit: cover; }
.pick-body { padding: 18px 22px 20px; display: flex; align-items: center; gap: 14px; min-height: 64px; }
.pick-title { display: flex; align-items: center; gap: 12px; }
.pick-title .moon { --s: 36px; }
.pick-title h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.pick-title p { font-size: 13.5px; color: var(--dim); }
.pick-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.pick-actions { display: flex; gap: 10px; margin-top: 22px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px;
  border-radius: 999px; background: var(--btn); border: none; cursor: pointer;
  font: 600 13.5px var(--sans); color: var(--ink);
  transition: transform .2s, background .2s;
}
.pill-icon { width: 40px; padding: 0; justify-content: center; font-size: 15px; }
.pill img { width: 20px; }
.pill:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--btn) 88%, var(--ink)); }

/* 열린 뒤 배경에 반짝이는 별 */
.twinkles { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.twinkle { position: absolute; width: 16px; opacity: 0; animation: tw 5s ease-in-out infinite; transform: scale(var(--z)); }
@keyframes tw { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }

/* 열기 전에는 달만 — 스크롤·메뉴·목록 숨김 */
.js:not(.opened) body { overflow: hidden; }
.js:not(.opened) .unveil { pointer-events: none; }   /* 아직 안 보이는 ↓ 버튼 등이 터치를 가로채지 않게 */
.js:not(.opened) .bento, .js:not(.opened) .foot { display: none; }
.js .nav { opacity: 0; pointer-events: none; transition: opacity .8s .6s; }
.js.opened .nav { opacity: 1; pointer-events: auto; }

/* ── bento ── */
.bento {
  max-width: 1000px; margin: 0 auto; padding: 40px 24px 40px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.tile {
  position: relative; overflow: hidden;
  grid-column: span 2; height: 460px;
  border-radius: 18px; background: var(--tile); color: var(--ink);
  isolation: isolate;
}
.tile.wide { grid-column: span 3; }
.tile.dark { background: var(--tile-dark); color: #f2f2f0; }
.tile-link { position: absolute; inset: 0; z-index: 3; }
.tile-head { position: relative; z-index: 4; padding: 30px 30px 0; pointer-events: none; }
.tile-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.arr { display: inline-block; font-weight: 500; transition: transform .25s ease; }
.tile:hover .arr { transform: translateX(4px); }
.tile-head p { margin-top: 6px; font-size: 14px; opacity: .72; }

.tile-moon { position: absolute; z-index: 1; --s: 200px; top: -60px; right: -50px; opacity: .95; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.tile.dark .tile-moon { opacity: .75; }
.tile:hover .tile-moon { transform: translate(-8px, 8px) rotate(-8deg); }

.tile-img {
  position: absolute; z-index: 2;
  left: 30px; bottom: -24px; width: 620px; max-width: none;
  border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.tile:hover .tile-img { transform: translateY(-12px); }

/* 스크롤해야 보이기 (JS 가 켜져 있을 때만 숨김) */
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── footer ── */
.foot {
  max-width: 1000px; margin: 0 auto; padding: 56px 24px 44px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--dim);
}
.foot > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.foot .moon { --s: 16px; }
.foot-links { display: flex; gap: 18px; }
.foot-links a:hover { color: var(--ink); }
/* 이메일: 화면 맨 아래 가운데에 항상 (별가루보다 위) */
.mail {
  position: fixed; left: 50%; bottom: 14px; translate: -50% 0; z-index: 70;
  font-size: 11.5px; letter-spacing: .02em; color: var(--ink); opacity: .75;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg);
  transition: opacity .3s;
}
.mail:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, .js .reveal { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .nav { padding: 14px 16px; }
  .nav nav { gap: 14px; }
  .stage { width: 260px; height: 260px; }
  .moon-btn { width: 150px; height: 150px; }
  .opened .stage { width: 140px; height: 140px; }
  .opened .moon-btn { width: 92px; height: 92px; }
  .opened .hero { padding-top: 36px; }   /* 모바일: 달·제목만 28px 위로 */
  .opened .pick { margin-top: 54px; }     /* 그만큼 벌려서 카드는 제자리 */
  /* 모바일: 화살표만 화면 바닥 쪽(이메일 바로 위)으로 — 빠진 높이만큼 아래 여백을 채워서 다른 건 제자리 */
  .opened .hero { padding-bottom: 98px; }
  .pick-actions { position: absolute; left: 50%; translate: -50% 0; bottom: 42px; margin: 0; }
  .pick-fig { padding: 16px 16px 0; }
  .pick-body { padding: 16px 18px 18px; }
  .bento { grid-template-columns: 1fr; gap: 14px; padding: 20px 16px; }
  .tile, .tile.wide { grid-column: auto; height: 390px; }
  .tile-head { padding: 24px 22px 0; }
  .tile-img { left: 22px; width: 520px; }
  .tile-moon { --s: 170px; top: -56px; right: -48px; }
  .foot { padding: 40px 16px 36px; }
}

/* ============ 인터랙션 ============ */
main, .foot { position: relative; z-index: 1; }

/* 밤하늘 캔버스 */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* 커서에서 떨어진 별가루가 바닥에 쌓임 */
.stardust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.trail { position: fixed; inset: 0; z-index: 61; pointer-events: none; overflow: hidden; }
.trail-spark { position: absolute; width: 16px; margin: -8px 0 0 -8px; animation: trail .9s ease-out forwards; }
@keyframes trail {
  0%   { opacity: 1; transform: scale(var(--z)) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), 26px) scale(0) rotate(var(--r)); }
}

/* 달: 커서 쪽으로 살짝 + 스크롤하면 이지러짐 */
.moon-body {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%;
  transform: translate(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px)) rotate(calc(var(--px, 0) * 8deg));
}
.moon-body .phases { animation: bob 6s ease-in-out infinite; }
.moon-btn.spin .moon-body .phases { animation: press .5s cubic-bezier(.3,1.6,.5,1), bob 6s ease-in-out .5s infinite; }
@keyframes press { 0% { transform: scale(1); } 35% { transform: scale(.92); } 100% { transform: scale(1); } }
.moon-btn:hover .moon-body .phases { filter: brightness(1.05); }
/* 달은 캔버스에 매 순간 직접 그림 (위상이 끊김 없이 연속으로) */
.phases { position: relative; display: block; width: 100%; height: 100%; }
.phase-moon { width: 24px; height: 24px; }

/* 카드 더미 — 여러 장 중 한 장이라는 느낌 */
.deck {
  position: absolute; inset: 0; z-index: 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.deck.d1 { transform: rotate(-4deg) translate(-12px, 10px); opacity: .55; }
.deck.d2 { transform: rotate(3.5deg) translate(12px, 14px); opacity: .35; }
.shuffling .deck.d1 { animation: wig1 .22s ease-in-out infinite alternate; }
.shuffling .deck.d2 { animation: wig2 .26s ease-in-out infinite alternate; }
@keyframes wig1 { to { transform: rotate(-7deg) translate(-22px, 6px); } }
@keyframes wig2 { to { transform: rotate(7deg) translate(22px, 10px); } }
.pick-card { position: relative; z-index: 1; }

/* 셔플 중: 점에 불빛이 줄줄이 흐름 (몇 번째인지 안 알려줌) */
.is-shuffling .dot { animation: chase .6s ease-in-out infinite; }
.is-shuffling .dot:nth-child(2) { animation-delay: .1s; }
.is-shuffling .dot:nth-child(3) { animation-delay: .2s; }
.is-shuffling .dot:nth-child(4) { animation-delay: .3s; }
.is-shuffling .dot:nth-child(5) { animation-delay: .4s; }
@keyframes chase { 50% { background: var(--accent); box-shadow: 0 0 8px 1px rgba(214,180,122,.45); } }
@keyframes tick { from { opacity: .4; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* 카드 전체가 링크 */
.pick-body { cursor: pointer; }
.pick-go { margin-left: auto; font-size: 18px; color: var(--dim); transition: transform .25s ease, color .25s, opacity .3s; }
.pick-card:hover .pick-go { transform: translate(3px, -3px); color: var(--ink); }
/* 멈춤: 톡 */
.pick-card.landed { animation: land .7s cubic-bezier(.2,.9,.25,1.2); }
/* 크기는 건드리지 않고 테두리 빛만 (뒤집기와 겹쳐 덜컥거리지 않게) */
@keyframes land {
  0% { box-shadow: 0 0 0 0 rgba(214,180,122,0); }
  35% { box-shadow: 0 0 0 1px rgba(214,180,122,.45), 0 0 50px 4px rgba(214,180,122,.12); }
  100% { box-shadow: 0 0 0 0 rgba(214,180,122,0); }
}
.sheen { position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; overflow: hidden; }
.sheen::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16) 45%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.16) 55%, transparent);
  transform: translateX(0) skewX(-12deg); opacity: 0;
}
.landed .sheen::before { animation: sheen 1.1s cubic-bezier(.3,.6,.2,1) .05s; }
@keyframes sheen { 0% { opacity: 1; transform: translateX(0) skewX(-12deg); } 100% { opacity: 1; transform: translateX(420%) skewX(-12deg); } }
.pick-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }

/* 몇 번째가 뽑혔는지 */
.dots { display: flex; gap: 9px; margin-top: 14px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .25s, transform .25s, box-shadow .25s; }
.dot.on { background: var(--accent); box-shadow: 0 0 6px rgba(214,180,122,.35); }
.dot.cur { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 10px 1px rgba(214,180,122,.5); }
.dot.lk { background: transparent; box-shadow: inset 0 0 0 1px var(--line); margin-left: 6px; }   /* 럭키 자리: 비어 있을 땐 테두리만 */
.dot.lk.on, .dot.lk.cur { background: var(--accent); box-shadow: 0 0 12px 2px rgba(214,180,122,.6); }
.pick-actions { margin-top: 18px; }

/* 빛 반사 */
.face.front::after, .tile::after {
  content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.lit::after, .lit .face.front::after { opacity: 1; }
.tile, .pick-card { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .stardust, .trail, .deck { display: none; }
}

/* ============ 숨은 별자리 발견 HUD ============ */
.hero, .bento, .foot { transition: opacity .7s ease; }
.scanning .hero, .scanning .bento, .scanning .foot { opacity: 0; }
.hud { position: fixed; inset: 0; z-index: 65; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  font-family: 'Courier Prime', 'Courier New', monospace; color: #fff; }
.hud.on { opacity: 1; }
.hud svg { position: absolute; inset: 0; overflow: visible; }
.hud .draw { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hud .draw.faint { stroke: rgba(255,255,255,.28); }
.hud.on .draw { animation: hudraw 1.3s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes hudraw { to { stroke-dashoffset: 0; } }
.hud .tick { stroke: rgba(255,255,255,.4); stroke-width: 1; opacity: 0; }
.hud.on .tick { animation: hudfade .6s .5s forwards; }
@keyframes hudfade { to { opacity: 1; } }
.hud-tl { position: absolute; display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .12em; opacity: .8; }
.hud-tl b { font-weight: 400; font-size: 12px; letter-spacing: .2em; }
.hud .lbl { fill: #fff; font: 10px 'Courier Prime', 'Courier New', monospace; letter-spacing: .1em; opacity: 0; }
.hud .num { fill: #fff; font: 10px 'Courier Prime', 'Courier New', monospace; opacity: 0; }
.hud.on .lbl, .hud.on .num { animation: hudfade .6s .6s forwards; }
.hud .bar { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.3); stroke-width: 1; opacity: 0; }
.hud.on .bar { animation: hudfade .6s .4s forwards; }
.hud .mark { fill: #fff; opacity: 0; }
.hud.on .mark { animation: hudfade .4s 1s forwards; }
.hud-side { position: absolute; display: flex; flex-direction: column; gap: 3px; font-size: 10px; letter-spacing: .14em; }
.hud-side.r { align-items: flex-end; text-align: right; }
.hud-side b { font-weight: 400; font-size: 26px; letter-spacing: .02em; line-height: 1; }
.hud-side b small { font-size: 11px; letter-spacing: .1em; opacity: .7; }
.hud-side span { opacity: .6; }
.hud-side em { font-style: normal; background: #fff; color: #0e0e10; padding: 1px 6px; align-self: flex-start; }
.hud-side.bot { flex-direction: row; align-items: center; gap: 8px; }
.hud-tabs { position: absolute; display: flex; gap: 22px; font-size: 10px; letter-spacing: .2em; opacity: .55; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.25); }
.hud-tabs .on { opacity: 1; color: #fff; }
.hud-tabs { color: rgba(255,255,255,.7); }
.hud-side, .hud-tabs { opacity: 0; transition: opacity .6s .8s; }
.hud.on .hud-side { opacity: 1; }
.hud.on .hud-tabs { opacity: .75; }
.hud-name { position: absolute; translate: -50% 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hud-name b { font-weight: 400; font-size: 15px; letter-spacing: .32em; padding-left: .32em; }
.hud-name i { font-style: normal; font-size: 11px; letter-spacing: .14em; opacity: .6; }
.hud-found { font-size: 10px; letter-spacing: .3em; padding: 2px 8px; background: #fff; color: #0e0e10; }
.hud-name, .hud-tl { opacity: 0; transform: translateY(6px); transition: opacity .6s .7s, transform .6s .7s; }
.hud.on .hud-name { opacity: 1; transform: none; }
.hud.on .hud-tl { opacity: .8; transform: none; }
@media (max-width: 560px) {

}
.hud-name em { font-style: normal; font-size: 15px; letter-spacing: 0; opacity: .8; }
.hud-ask { position: absolute; left: 50%; bottom: 62px; translate: -50% 0; width: min(560px, calc(100vw - 32px)); text-align: center; pointer-events: auto;
  opacity: 0; transform: translateY(8px); transition: opacity .6s 2.1s, transform .6s 2.1s; }
.hud.on .hud-ask { opacity: 1; transform: none; }
.hud-ask p { font-size: 13px; letter-spacing: .12em; margin-bottom: 12px; }
.hud-ask div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hud-ask button {
  font: inherit; font-size: 10px; letter-spacing: .14em; color: #fff; background: rgba(14,14,16,.6);
  border: 1px solid rgba(255,255,255,.3); padding: 7px 0 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .2s, border-color .2s;
}
.hud-ask button em { font-style: normal; font-size: 15px; letter-spacing: 0; }
.hud-ask button:hover, .hud-ask button.me { border-color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 560px) {
  .hud-tabs { gap: 12px; font-size: 9px; letter-spacing: .12em; }
  .hud-ask { bottom: 84px; }
  .hud-ask div { grid-template-columns: repeat(4, 1fr); }
}
/* HUD 사라질 때 — 선은 그려진 방향 그대로 쓸려가며 지워지고, 글자는 깜빡이다 흩어짐 */
.hud.off .draw { animation: hudwipe .55s cubic-bezier(.6,0,.8,.4) forwards; }
@keyframes hudwipe { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
.hud.off .tick, .hud.off .lbl, .hud.off .num, .hud.off .bar, .hud.off .mark { animation: hudflick .35s steps(2) forwards; }
.hud.off .hud-name, .hud.off .hud-tl, .hud.off .hud-side, .hud.off .hud-tabs, .hud.off .hud-ask {
  animation: hudscatter .45s cubic-bezier(.6,0,.8,.4) forwards; transition: none;
}
@keyframes hudflick { 0% { opacity: 1; } 30% { opacity: .2; } 50% { opacity: .9; } 100% { opacity: 0; } }
@keyframes hudscatter {
  0% { opacity: 1; transform: none; filter: none; }
  25% { opacity: .3; }
  45% { opacity: .9; transform: translateX(3px); }
  100% { opacity: 0; transform: translateY(-8px); filter: blur(3px); }
}
/* 다 찾았을 때 */
.done-txt { position: absolute; left: 50%; translate: -50% -50%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.done-txt b { font-weight: 400; font-size: clamp(18px, 3vw, 26px); letter-spacing: .3em; padding-left: .3em; }
.done-txt i { font-style: normal; font-size: 11px; letter-spacing: .16em; opacity: .6; }
.done-ask { position: absolute; left: 50%; translate: -50% 0; text-align: center; pointer-events: auto; }
.done-ask p { font-size: 13px; letter-spacing: .12em; margin-bottom: 12px; }
.done-ask div { display: flex; gap: 10px; justify-content: center; }
.done-ask button { font: inherit; font-size: 11px; letter-spacing: .24em; color: #fff; background: rgba(14,14,16,.6); border: 1px solid rgba(255,255,255,.35); padding: 8px 22px 8px 26px; cursor: pointer; transition: background .2s, border-color .2s; }
.done-ask button:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.done-txt, .done-ask { opacity: 0; transition: opacity .6s .6s; }
.hud.on .done-txt { opacity: 1; }
.hud.on .done-ask { opacity: 1; transition-delay: 1.2s; }
.hud.off .done-txt, .hud.off .done-ask { animation: hudscatter .45s cubic-bezier(.6,0,.8,.4) forwards; transition: none; }
/* 하늘 둘러보기 모드 */
.exploring .hero, .exploring .bento, .exploring .foot { opacity: 0; pointer-events: none; }
.exploring body { overflow: hidden; }
.exploring .logo { opacity: 0; pointer-events: none; }
.logo { transition: opacity .4s; }
.sky-back {
  position: fixed; left: 18px; top: 16px; z-index: 66; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(14,14,16,.5);
  border: 1px solid rgba(255,255,255,.28); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateX(-6px); transition: opacity .4s, transform .4s, border-color .2s;
}
.sky-back:hover { border-color: #fff; }
.exploring:not(.scanning) .sky-back { opacity: 1; pointer-events: auto; transform: none; }
.viewfinder { z-index: 64; }
.scanning .viewfinder { opacity: 0; transition: opacity .3s; }
.hud .ping { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.hud.on .ping { animation: hudping 1.8s .3s ease-out forwards; }
@keyframes hudping { 0% { opacity: 0; } 25% { opacity: .9; stroke-width: 2.5; } 100% { opacity: .25; stroke-width: 1; } }
.hud.off .ping { animation: hudflick .35s steps(2) forwards; }

/* 바깥 링크로 나갈 때 뜨는 작은 카드 */
.leave { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(8,8,10,.55);
  opacity: 0; transition: opacity .4s; }
.leave.on { opacity: 1; }
.leave-card { width: min(360px, calc(100vw - 48px)); padding: 34px 24px 26px; text-align: center;
  transform: translateY(14px) scale(.96); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.leave.on .leave-card { transform: none; }
.leave-msg { min-height: 1.6em; font: 400 17px/1.6 'Courier Prime', 'Courier New', monospace; color: var(--ink); letter-spacing: .02em; }
.leave.bye .leave-msg { color: var(--accent); }
.leave-ask { display: flex; gap: 10px; justify-content: center; margin-top: 20px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.leave.ask .leave-ask { opacity: 1; pointer-events: auto; }
.leave-ask button { font: inherit; font-size: 11px; letter-spacing: .24em; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35);
  padding: 8px 20px 8px 24px; cursor: pointer; transition: background .2s, border-color .2s; }
.leave-ask button:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.leave.bye .leave-ask { height: 0; margin-top: 0; overflow: hidden; }

/* 모바일: 첫 화면(달)과 둘러보기 모드에선 손가락으로 하늘을 끌 수 있게 */
html.js:not(.opened), html.js:not(.opened) body, html.exploring, html.exploring body { touch-action: none; }