:root{
  --bar-h: 64px;
  --ink: #12143a;
  --ink-soft: rgba(18,20,58,.62);
  --paper: rgba(255,255,255,.86);
  --stroke: rgba(255,255,255,.55);
  --accent: #ff5fa2;
  --accent-2: #6b6bff;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(12,14,45,.28);
  --ui-font: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  overflow:hidden;
  background:#0e1230;
  font-family: var(--ui-font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body{ user-select:none; -webkit-user-select:none; cursor: default; }

/* ---------- 배경: 그라데이션 + 블롭 + 파티클 캔버스 ---------- */
#vanta-bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  transition: background .6s ease;
}
#bg-canvas{ position:absolute; inset:0; }

.blob{
  position:absolute; border-radius:50%;
  filter: blur(70px); opacity:.5;
  will-change: transform; pointer-events:none;
  transition: background .6s ease;
}
.blob0{ width:62vmax; height:62vmax; left:-14vmax; top:-16vmax; animation: drift0 26s ease-in-out infinite alternate; }
.blob1{ width:54vmax; height:54vmax; right:-16vmax; top:14vmax;  animation: drift1 33s ease-in-out infinite alternate; }
.blob2{ width:66vmax; height:66vmax; left:12vmax;  bottom:-30vmax; animation: drift2 39s ease-in-out infinite alternate; }
@keyframes drift0{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(12vmax,8vmax,0) scale(1.15) } }
@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-14vmax,10vmax,0) scale(.9) } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(.95) } to{ transform:translate3d(10vmax,-12vmax,0) scale(1.2) } }

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none; }
}

/* ---------- 이모지 무대 ---------- */
#stage{ position:fixed; inset:0; z-index:1; pointer-events:none; }

.pop{
  position:absolute;
  line-height:1;
  will-change: transform, opacity;
  transform: translate(-50%,-50%) scale(0);
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.28));
  animation: popIn var(--life,1900ms) cubic-bezier(.18,.9,.28,1) forwards;
}
@keyframes popIn{
  0%   { transform: translate(-50%,-50%) rotate(var(--r0)) scale(0);   opacity:0; }
  14%  { transform: translate(-50%,-50%) rotate(var(--r1)) scale(1.18); opacity:1; }
  26%  { transform: translate(-50%,-50%) rotate(var(--r1)) scale(.94); opacity:1; }
  38%  { transform: translate(-50%,-50%) rotate(var(--r2)) scale(1.04); opacity:1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r3)) scale(.62); opacity:0; }
}

.pop-img{ height:auto; user-select:none; -webkit-user-drag:none; }

.ripple{
  position:absolute; z-index:0;
  width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.7);
  animation: rip 900ms ease-out forwards;
}
@keyframes rip{
  from{ transform: scale(.4); opacity:.85; }
  to  { transform: scale(14); opacity:0; }
}

/* ---------- 상단 바 ---------- */
#bar{
  position:fixed; z-index:20; top:0; left:0; right:0;
  display:block;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
body.baby #bar{ transform: translateY(-115%); opacity:0; pointer-events:none; }

.bar-row{
  display:flex; align-items:center; gap:12px;
  min-height:56px; padding:8px 14px 4px;
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.02em; flex:none; }
.brand-mark{ width:24px; height:24px; display:block; flex:none; }
.brand-name{ font-size:15px; }

#tabs{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:2px 14px 10px;
  scroll-padding-inline:14px;
}
#tabs::-webkit-scrollbar{ display:none; }

.tab{
  flex:none; display:inline-flex; align-items:center; gap:7px;
  height:40px; padding:0 15px;
  border-radius:999px; border:none;
  background: rgba(255,255,255,.72);
  color: var(--ink); font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; white-space:nowrap;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tab:hover{ transform: translateY(-1px); background: rgba(255,255,255,.85); }
.tab:active{ transform: translateY(0) scale(.97); }
.tab .t-img{ width:22px; height:22px; display:block; flex:none; }
.tab.is-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color:#fff;
  box-shadow: 0 8px 20px rgba(255,95,162,.35);
}
.tab.is-locked{ color: var(--ink-soft); background: rgba(255,255,255,.5); }
.tab .lock{ display:flex; align-items:center; opacity:.85; }

.bar-actions{ flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:nowrap; }

.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border-radius:12px; border:none;
  background: rgba(255,255,255,.72); color: var(--ink); cursor:pointer;
  transition: transform .16s ease, background .2s ease;
}
.icon-btn:hover{ background:#fff; transform: translateY(-1px); }
.icon-btn.off{ opacity:.45; }

.ghost-btn{
  height:38px; padding:0 13px; border-radius:12px; border:none;
  display:inline-flex; align-items:center; gap:7px;
  background: rgba(255,255,255,.72);
  font-family:inherit; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
  transition: transform .16s ease, background .2s ease;
}
.ghost-btn:hover{ background:#fff; transform: translateY(-1px); }

/* ---------- 화면 잠금 해제 (우측 상단, 롱프레스) ---------- */
#lock-ui{
  position:fixed; z-index:22;
  top:calc(12px + env(safe-area-inset-top)); right:12px;
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  opacity:.34; transition: opacity .3s ease;
}
#lock-ui[hidden]{ display:none; }
#lock-ui:hover{ opacity:.96; }

#handle{
  position:relative; overflow:hidden;
  height:40px; padding:0 15px;
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:999px; cursor:pointer;
  background: rgba(88,90,105,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family:inherit; font-size:13px; font-weight:700; color:#fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: background .25s ease;
}
#handle:hover{ background: rgba(70,72,86,.72); }
.handle-icon{ position:relative; z-index:1; }
.handle-label{ position:relative; z-index:1; }
.handle-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background: linear-gradient(90deg, rgba(255,95,162,.85), rgba(107,107,255,.9));
}
#handle.holding .handle-fill{ animation: fillRight 1s linear forwards; }
@keyframes fillRight{ from{ width:0 } to{ width:100% } }

.handle-hint{
  margin:0; padding:6px 11px; border-radius:9px;
  background: rgba(88,90,105,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size:11.5px; font-weight:600; color:#fff; letter-spacing:-.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

/* ---------- 힌트 ---------- */
.hint{
  position:fixed; z-index:10; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  max-width:min(86vw, 460px); text-align:left;
  padding:11px 20px; border-radius:999px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size:14px; font-weight:700; color:var(--ink);
  box-shadow: 0 10px 30px rgba(12,14,45,.18);
  animation: bob 2.6s ease-in-out infinite;
  transition: opacity .5s ease;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-7px); } }
.hint .ic{ opacity:.75; }
.hint.gone{ opacity:0; pointer-events:none; }
body.hunt-mode .hint{ bottom:104px; }

/* ---------- 오버레이 / 카드 ---------- */
.overlay{
  position:fixed; inset:0; z-index:40;
  display:grid; place-items:center; padding:24px;
  background: rgba(10,12,36,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fadeIn .28s ease;
}
.overlay[hidden]{ display:none; }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }

.card{
  position:relative;
  width:min(520px, 100%);
  padding:34px 30px 26px;
  border-radius: var(--radius);
  background: var(--paper);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
  text-align:center;
  animation: rise .35s cubic-bezier(.2,.9,.25,1);
}
@keyframes rise{ from{ transform: translateY(14px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } }

.card h1{ margin:6px 0 10px; font-size:34px; letter-spacing:-.03em; }
.card h2{ margin:4px 0 8px; font-size:24px; letter-spacing:-.02em; }
.lede{ margin:0 0 20px; font-size:15px; line-height:1.65; color:var(--ink-soft); }
.fineprint{ margin:16px 0 0; font-size:12px; line-height:1.6; color:rgba(18,20,58,.48); }

.start-mark{ width:96px; height:96px; display:block; margin:0 auto 2px; }
.tagline{ margin:-4px 0 14px; font-size:15px; font-weight:800; color:var(--accent); letter-spacing:-.01em; }
.pay-emoji{ width:76px; height:76px; display:block; margin:0 auto 4px; }

.cta{
  width:100%; padding:16px 20px; margin:0;
  border:none; border-radius:16px; cursor:pointer;
  font-family:inherit; font-size:17px; font-weight:800; color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 28px rgba(255,95,162,.35);
  transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{ transform: translateY(-2px); filter:saturate(1.08); }
.cta:active{ transform: translateY(0) scale(.98); }

.pay-actions{ display:grid; gap:11px; }
.pay-actions .cta{ display:grid; gap:3px; padding:14px 18px; }
.cta-main{ font-size:16px; }
.cta-sub{ font-size:12px; font-weight:600; opacity:.88; }
.cta.ad{ background: linear-gradient(135deg,#38c6ff,#5b7cff); box-shadow:0 12px 28px rgba(66,132,255,.32); }
.cta.pro{ background: linear-gradient(135deg,#ffb03a,#ff5fa2); box-shadow:0 12px 28px rgba(255,140,80,.32); }

.close-btn{
  position:absolute; top:12px; right:12px;
  width:34px; height:34px; border-radius:50%;
  border:none; background: rgba(18,20,58,.07); color:var(--ink);
  font-size:14px; cursor:pointer;
}
.close-btn:hover{ background: rgba(18,20,58,.14); }

/* ---------- 광고 시뮬레이션 ---------- */
.ad-card{ padding-top:24px; }
.ad-badge{
  display:inline-block; padding:4px 10px; border-radius:8px;
  background: rgba(18,20,58,.08); font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--ink-soft);
}
.ad-screen{
  margin:18px 0 16px; height:170px; border-radius:16px;
  display:grid; place-items:center;
  background: linear-gradient(135deg,#1b1f4b,#3a2a6b);
}
#ad-emoji{ width:86px; height:86px; display:block; animation: bob 1.6s ease-in-out infinite; }
.ad-count{ margin:0 0 12px; font-size:14px; font-weight:700; color:var(--ink-soft); }
.ad-progress{ height:8px; border-radius:99px; background: rgba(18,20,58,.1); overflow:hidden; }
.ad-progress i{ display:block; height:100%; width:0; border-radius:99px; background: linear-gradient(90deg,#38c6ff,#5b7cff); transition: width .25s linear; }

/* ---------- 토스트 ---------- */
.toast{
  position:fixed; z-index:50; left:50%; bottom:34px; transform:translate(-50%, 12px);
  padding:13px 22px; border-radius:14px;
  background: rgba(18,20,58,.9); color:#fff; font-size:14px; font-weight:700;
  box-shadow: var(--shadow); opacity:0; transition: opacity .25s ease, transform .25s ease;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }
.toast[hidden]{ display:none; }

@media (max-width: 760px){
  :root{ --bar-h: 58px; }
  .brand-name{ display:none; }
  #btn-baby{ padding:0 10px; font-size:12px; }
  .card h1{ font-size:28px; }
}

@media (prefers-reduced-motion: reduce){
  .hint, #ad-emoji{ animation:none; }
}

/* ---------- 소리 모드 세그먼트 ---------- */
.seg{
  display:flex; gap:2px; padding:3px; flex:none;
  border-radius:13px;
  background: rgba(18,20,58,.08);
  border:none;
}
.seg-btn{
  height:32px; padding:0 11px;
  display:inline-flex; align-items:center; gap:6px;
  border:none; border-radius:10px; background:transparent; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--ink-soft);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.seg-btn:hover{ color:var(--ink); }
.seg-btn.is-on{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(12,14,45,.14); }


/* ---------- 지금 연주 중인 동요 ---------- */
.song-chip{
  position:fixed; z-index:10; left:50%; bottom:92px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:8px 15px; border-radius:999px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size:12.5px; font-weight:800; color:var(--ink); letter-spacing:-.01em;
  box-shadow: 0 8px 24px rgba(12,14,45,.16);
}
.song-chip[hidden]{ display:none; }
.song-note{ width:17px; height:17px; display:block; }
.song-bar{ display:block; width:86px; height:6px; border-radius:99px; background:rgba(18,20,58,.13); overflow:hidden; }
.song-bar b{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .16s ease; }

/* ---------- 잠긴 테마 체험 ---------- */
.trial-chip{
  position:fixed; z-index:12; left:50%; top:calc(var(--bar-h) + 14px); transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:13px; font-weight:800;
  box-shadow: 0 10px 26px rgba(255,95,162,.4);
  animation: dropIn .35s cubic-bezier(.2,.9,.25,1);
}
.trial-chip[hidden]{ display:none; }
.trial-emoji{ width:17px; height:17px; display:block; }
#trial-sec{ min-width:1.2em; text-align:center; }
body.baby .trial-chip{ top:14px; }
@keyframes dropIn{ from{ transform:translate(-50%,-12px); opacity:0 } to{ transform:translate(-50%,0); opacity:1 } }

@media (max-width: 980px){
  .s-text{ display:none; }
  .seg-btn{ padding:0 9px; }
}

/* ---------- 버튼 툴팁 ---------- */
.has-tip{ position:relative; }
.has-tip::after{
  content: attr(data-tip);
  position:absolute; top:calc(100% + 10px); right:0;
  width:max-content; max-width:min(260px, 70vw);
  padding:10px 13px; border-radius:12px;
  background: rgba(18,20,58,.94); color:#fff;
  font-size:12px; font-weight:600; line-height:1.55; text-align:left; letter-spacing:-.01em;
  box-shadow: 0 12px 28px rgba(12,14,45,.3);
  opacity:0; transform: translateY(-5px); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.has-tip:hover::after, .has-tip:focus-visible::after{ opacity:1; transform: translateY(0); }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 900px){
  .bar-row{ min-height:50px; padding:6px 10px 2px; gap:8px; }
  #tabs{ padding:2px 10px 8px; gap:6px; }
  .tab{ height:36px; padding:0 12px; font-size:13px; }
  .brand-mark{ width:22px; height:22px; }
  .icon-btn{ width:34px; height:34px; }
  .ghost-btn{ height:34px; padding:0 10px; font-size:12px; }
  .seg-btn{ height:28px; }
}
@media (max-width: 560px){
  .brand-name{ display:none; }
  .ghost-btn span{ display:none; }
  .ghost-btn{ padding:0 9px; }
}

/* ---------- 아이콘 (MJYJ Figma · icon 페이지) ---------- */
.ic{ width:20px; height:20px; display:block; flex:none; fill:currentColor; }
.ic-sm{ width:16px; height:16px; }
.ic-xs{ width:12px; height:12px; }

/* ---------- 젤리 찾기 ---------- */
#hunt{ position:fixed; inset:0; z-index:5; pointer-events:none; }
#hunt[hidden]{ display:none; }

.spot{
  position:absolute; transform:translate(-50%,-50%);
  padding:0; border:none; background:none; cursor:pointer;
  pointer-events:auto; -webkit-tap-highlight-color:transparent;
  animation: spotIn .45s cubic-bezier(.2,.9,.25,1) both;
}
.spot img{
  display:block; width:100%; height:auto; pointer-events:none;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.26));
  animation: spotWiggle 2.4s ease-in-out infinite;
}
.spot.is-hot img{ animation: spotWiggle .5s ease-in-out infinite; }
.spot.is-open{ pointer-events:none; animation: spotOpen .5s cubic-bezier(.3,.8,.4,1) forwards; }

@keyframes spotIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.5) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
@keyframes spotWiggle{ 0%,100%{ transform:rotate(-2.5deg) } 50%{ transform:rotate(2.5deg) } }
@keyframes spotOpen{
  30%{ transform:translate(-50%,-50%) scale(1.12) rotate(-6deg) }
  100%{ transform:translate(-50%,-40%) scale(.2) rotate(14deg); opacity:0 }
}

.jelly-out{
  position:absolute; transform:translate(-50%,-50%);
  pointer-events:none; z-index:2; will-change: transform, opacity;
  animation: jellyJump 1.5s cubic-bezier(.2,.9,.25,1) forwards;
}
.jelly-out img{ display:block; width:100%; height:auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.24)); }
@keyframes jellyJump{
  0%   { transform:translate(-50%, 10%) scale(.3); opacity:0 }
  25%  { transform:translate(-50%,-72%) scale(1.15); opacity:1 }
  42%  { transform:translate(-50%,-46%) scale(.94) }
  58%  { transform:translate(-50%,-66%) scale(1.05) }
  74%  { transform:translate(-50%,-50%) scale(1) }
  100% { transform:translate(-50%,-56%) scale(1); opacity:1 }
}

.puff{
  position:absolute; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%;
  background: rgba(255,255,255,.85);
  animation: puffOut .6s ease-out forwards;
}
@keyframes puffOut{ from{ transform:translate(-50%,-50%) scale(.4); opacity:.9 } to{ transform:translate(-50%,-90%) scale(5); opacity:0 } }

.hunt-score{
  position:fixed; z-index:10; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
  padding:8px 16px 8px 10px; border-radius:999px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(12,14,45,.18);
  font-size:15px; font-weight:800; color:var(--ink);
}
.hunt-score[hidden]{ display:none; }
.hunt-score img{ width:30px; height:30px; display:block; }
.hunt-score .hs-label{ font-size:12px; font-weight:700; color:var(--ink-soft); }
.hunt-score.bump{ animation: scoreBump .45s cubic-bezier(.2,.9,.25,1); }
@keyframes scoreBump{ 0%{ transform:translate(-50%,0) scale(1) } 40%{ transform:translate(-50%,-6px) scale(1.16) } 100%{ transform:translate(-50%,0) scale(1) } }

/* ---------- UI 안에 들어가는 우리 그림 ---------- */
.ui-ic{ width:13px; height:13px; display:block; }
.cta-ic{ width:20px; height:20px; display:inline-block; vertical-align:-4px; margin-right:7px; }
.cta-main{ display:inline-flex; align-items:center; justify-content:center; }

.pop-dot{ border-radius:50%; display:block; }
.spot-fallback{
  display:block; width:100%; padding-bottom:78%;
  border-radius:46% 46% 38% 38%; background:linear-gradient(180deg,#8fd36a,#4f9e46);
}

/* ---------- 젤리 도감 ---------- */
.hunt-score{ border:none; cursor:pointer; font-family:inherit; }
.hunt-score:hover{ background: rgba(255,255,255,.92); }

.book-card{ width:min(620px, 100%); max-height:min(78vh, 720px); display:flex; flex-direction:column; }
.book-body{
  margin-top:6px; overflow-y:auto; text-align:left;
  -webkit-overflow-scrolling:touch;
}
.book-cat{ margin:14px 2px 8px; font-size:13px; font-weight:800; color:var(--ink-soft); letter-spacing:-.01em; }
.book-cat b{ color:var(--ink); }
.book-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:8px; }
.book-item{
  position:relative; aspect-ratio:1; border-radius:16px;
  background: rgba(18,20,58,.05);
  display:grid; place-items:center;
}
.book-item img{ width:80%; height:80%; object-fit:contain; display:block; }
.book-item.locked img{ filter: grayscale(1) brightness(1.25) opacity(.32); }
.book-item .n{
  position:absolute; right:4px; bottom:3px;
  padding:1px 6px; border-radius:99px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:10.5px; font-weight:800;
}

/* ---------- 찾았다! 연출 ---------- */
.find-ring{
  position:absolute; transform:translate(-50%,-50%);
  border-radius:50%; border:5px solid rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(255,255,255,.6);
  animation: findRing .78s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes findRing{
  from{ transform:translate(-50%,-50%) scale(.34); opacity:.95 }
  to  { transform:translate(-50%,-50%) scale(2.5); opacity:0 }
}
.find-ray{
  position:absolute; width:7px; height:30px; border-radius:99px;
  background:linear-gradient(180deg, #fff, rgba(255,255,255,0));
  animation: findRay .66s ease-out forwards;
}
@keyframes findRay{
  from{ transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d) * .3)) scaleY(.4); opacity:0 }
  35% { opacity:1 }
  to  { transform:translate(-50%,-50%) rotate(var(--a)) translateY(var(--d)) scaleY(1.15); opacity:0 }
}

/* 소리 모드 아이콘 — 14×14, 검정 틴트 */
.seg-btn .ic{ width:14px; height:14px; color:#000000; }

.parent-link{ display:inline-block; margin-top:6px; color:var(--accent); font-weight:800; text-decoration:none; }
.parent-link:hover{ text-decoration:underline; }

/* ---------- 캡슐이 열리는 연출 ---------- */
.capsule-open{
  position:absolute; transform:translate(-50%,-50%);
  pointer-events:none; z-index:1;
}
.cap-half{
  position:absolute; left:0; top:0; width:100%; height:auto; display:block;
  transform-origin:50% 50%;
  will-change: transform, opacity;
  backface-visibility:hidden;
}
/* 위 뚜껑 — 살짝 튀어 오르며 왼쪽 위로 열린다 */
.cap-top{ clip-path: inset(0 0 53% 0); animation: capTop .6s cubic-bezier(.2,.85,.3,1) forwards; }
@keyframes capTop{
  0%   { transform: translate(0,0) rotate(0deg); opacity:1 }
  14%  { transform: translate(0,-8%) rotate(-5deg); opacity:1 }
  100% { transform: translate(-52%,-72%) rotate(-42deg); opacity:0 }
}
/* 아래 그릇 — 뒤로 기울며 내려앉는다 */
.cap-bottom{ clip-path: inset(47% 0 0 0); animation: capBottom .6s cubic-bezier(.2,.85,.3,1) forwards; }
@keyframes capBottom{
  0%   { transform: translate(0,0) rotate(0deg); opacity:1 }
  14%  { transform: translate(0,4%) rotate(3deg); opacity:1 }
  100% { transform: translate(40%,52%) rotate(30deg); opacity:0 }
}