/* 레코드룸 겉틀 — 레코드룸 화면 자체의 모양은 js/encore.js 의 encCss() 가 그대로 맡는다(언더고와 같은 판).
   여기는 언더고가 대 주던 바탕(어두운 살결 · 무대 · ✕ 자리)만 세운다. */
@font-face{ font-family:'Outfit'; src:url('../fonts/Outfit-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; }   /* 로고 글자 — 언더고와 같은 글꼴(2026-10-17 언더고가 Archivo → Outfit · 워드마크 600) */
@font-face{ font-family:'Figtree'; src:url('../fonts/Figtree-Variable.woff2') format('woff2'); font-weight:300 900; font-display:swap; }
:root{
  --font:'Figtree','Pretendard Variable','Pretendard',-apple-system,system-ui,'Helvetica Neue',sans-serif;
  --bg:#0b0c14; --ink:#f3f5fb; --dim:#9aa3c0; --faint:#626c8c; --hair:rgba(255,255,255,.1); --c1:#a796ff; --c2:#ff8fb8;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{ overflow:hidden; overscroll-behavior:none; }
button{ font-family:inherit; color:inherit; }

/* 무대 — 화면 높이를 꽉 채우고 스크롤은 없다(넘침은 encFit 이 판을 줄여 막는다) */
.app{ position:relative; width:100%; height:100vh; height:100svh; display:flex; flex-direction:column; overflow:hidden;
  background:radial-gradient(120% 70% at 50% -10%, #1a1630 0%, #0f1020 45%, var(--bg) 100%); padding-top:var(--sat); }
#stage{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 14px calc(10px + var(--sab)); }
.wrap{ flex:1 1 auto; min-height:0; }

/* ✕ · 뒤로 · 가방 — 레코드룸 판은 왼쪽 위 46px 를 ✕ 자리로 비워 둔다(.enc-top · .enc-hk) */
.rr-nav{ position:absolute; left:0; right:0; top:var(--sat); height:0; z-index:40; }
.rr-nb{ position:absolute; top:4px; width:38px; height:38px; border:0; border-radius:50%; background:transparent; display:none; place-items:center; cursor:pointer; color:var(--dim); }
.rr-nb svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.rr-nb:active{ background:rgba(255,255,255,.08); }
#rrBack, #rrClose{ left:4px; }
.app.rr-back #rrBack{ display:grid; }
.app.tcfull #rrClose{ display:grid; }
.app.rr-back:not(.tcfull) .enc-hk{ padding-left:46px !important; }
.rr-bag{ right:6px; }
.app.rr-home .rr-bag{ display:grid; }
.rr-bag .ic svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; }
.rr-bag em{ position:absolute; right:1px; top:1px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--c2); color:#2a0a18; font-style:normal; font-size:10.5px; font-weight:900; line-height:17px; text-align:center; }

/* 모은 조각 */
.rr-bagv{ display:flex; flex-direction:column; color:var(--ink); padding-top:12px; }
.rr-bagv .hk{ padding-left:46px; font-size:12px; font-weight:800; letter-spacing:.24em; color:var(--c1); }
.rr-bagv h1{ font-size:22px; font-weight:800; letter-spacing:-.02em; margin:8px 0 4px; }
.rr-bagv p.s{ margin:0 0 12px; color:var(--dim); font-size:14px; }
.rr-bagv ul{ list-style:none; margin:0; padding:0 0 12px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1 1 auto; min-height:0; scrollbar-width:none; }
.rr-bagv ul::-webkit-scrollbar{ display:none; }
.rr-bagv li{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid var(--hair); border-radius:14px; padding:10px 8px 10px 14px; }
.rr-bagv li .tx{ flex:1; min-width:0; } .rr-bagv li b{ display:block; font-size:16px; font-weight:800; line-height:1.3; }
.rr-bagv li small{ display:block; font-size:12.5px; color:var(--dim); } .rr-bagv li i{ display:block; font-style:normal; font-size:12px; color:var(--faint); margin-top:3px; }
.rr-bagv li button{ width:36px; height:36px; flex:none; border:0; border-radius:50%; background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center; }
.rr-bagv li button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.rr-bagv .empty{ margin:auto; text-align:center; color:var(--dim); font-size:14.5px; }

/* 🏪 레코드 가게(메인 · js/home.js) — 세로로 구른다 */
.rh{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin:0 -14px; padding:0 14px calc(28px + var(--sab)); scrollbar-width:none; overscroll-behavior:contain; }
.rh::-webkit-scrollbar{ display:none; }
.rh > *{ max-width:560px; margin-left:auto; margin-right:auto; }
.rh-top{ padding:14px 50px 0 0; }
.rh-top .hk{ font-size:11px; font-weight:800; letter-spacing:.28em; color:var(--c1); }
.rh-top .nm{ font-size:26px; font-weight:900; letter-spacing:.04em; margin-top:2px; }

/* 판 한 장(홈 어디서나) — 홈 파인 결 + 가운데 상표 */
.rh .vn{ position:absolute; border-radius:50%; background:repeating-radial-gradient(circle at 50% 50%, #0d0d10 0 1.2px, #18181d 1.2px 2.4px), #121216; box-shadow:0 8px 18px rgba(0,0,0,.5), inset 0 0 0 3px #0a0a0c; }
.rh .vn::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 210deg, transparent 0 8%, rgba(255,255,255,.12) 13%, transparent 20% 52%, rgba(255,255,255,.07) 58%, transparent 66%); mix-blend-mode:screen; }
.rh .vn .lb{ position:absolute; left:32%; top:32%; width:36%; height:36%; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.rh .vn .lb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rh .vn .lb::after{ content:""; position:absolute; left:50%; top:50%; width:12%; height:12%; transform:translate(-50%,-50%); border-radius:50%; background:#e9e6df; }

/* ① 턴테이블 — 오늘의 판 */
.rh-hero{ position:relative; display:flex; align-items:center; gap:16px; margin-top:16px; padding:16px; border-radius:22px; overflow:hidden;
  background:linear-gradient(135deg,#251d40 0%,#16152a 60%,#121220 100%); border:1px solid rgba(167,150,255,.22); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.rh-hero::before{ content:""; position:absolute; left:-10%; top:-60%; width:80%; height:160%; pointer-events:none; background:radial-gradient(closest-side, rgba(255,184,104,.16), transparent); }
.rh-hero .tt{ position:relative; flex:none; width:136px; height:136px; border-radius:14px; cursor:pointer; background:linear-gradient(145deg,#2c2723,#15120e); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.45); }
.rh-hero .pl{ position:absolute; left:9px; top:9px; width:118px; height:118px; transition:transform .45s cubic-bezier(.3,.8,.3,1); }
.rh-hero .pl .vn{ inset:0; }
.rh-hero .spin{ animation:rhSpin 1.8s linear infinite; }   /* 33⅓ 바퀴/분 */
@keyframes rhSpin{ to{ transform:rotate(360deg); } }
.rh-hero .arm{ position:absolute; right:-6px; top:4px; width:50px; height:78px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.45)); transform-origin:77% 13%; transform:rotate(4deg); }
.rh-hero.out .pl{ transform:scale(1.07); }
.rh-hero .tx{ position:relative; flex:1; min-width:0; }
.rh-hero .tx small{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.2em; color:#f5c66b; }
.rh-hero .tx b{ display:block; font-size:24px; font-weight:900; letter-spacing:-.02em; line-height:1.2; margin-top:4px; }
.rh-hero .tx > span:not(.pg){ display:block; font-size:13px; color:var(--dim); font-weight:600; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rh-go{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; height:40px; padding:0 16px; border:0; border-radius:999px; background:var(--ink); color:#0b1020; font:inherit; font-size:14px; font-weight:800; cursor:pointer; }
.rh-go:active{ transform:scale(.97); }
.rh .pg{ display:flex; gap:3px; margin-top:8px; } .rh .pg i{ width:16px; height:3px; border-radius:2px; background:rgba(255,255,255,.14); } .rh .pg i.on{ background:linear-gradient(90deg,var(--c1),var(--c2)); }

/* ② ~ ④ 선반 — 칸막이 카드 + 나무 상자에 꽂힌 재킷 */
.rh-sec{ margin-top:28px; }
.rh-dv{ display:flex; align-items:baseline; gap:10px; }
.rh-dv .tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 13px 6px 11px; border-radius:9px 9px 3px 3px; background:#ece4d2; color:#2a2216; font-size:13.5px; font-weight:800; line-height:1.2; box-shadow:0 3px 0 rgba(0,0,0,.35); }   /* ↩ 기울임(-1.2deg)은 걷었다 — 폰에서 글자가 계단처럼 깨져 보였다 */
.rh-dv .tab .ic{ width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rh-dv em{ font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.22em; color:var(--faint); }
.rh-note{ margin:8px 0 0; font-size:13px; color:var(--dim); }
.rh-crate{ display:flex; gap:24px; overflow-x:auto; overflow-y:hidden; margin:0 -14px; padding:14px 28px 6px 14px; scroll-snap-type:x proximity; scroll-padding-left:14px; scrollbar-width:none;
  background:linear-gradient(180deg, transparent 0 122px, rgba(120,88,58,.24) 122px 131px, transparent 131px); }   /* 재킷 밑의 나무 턱 */
.rh-crate::-webkit-scrollbar{ display:none; }
.rh-jk{ flex:none; width:112px; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start; -webkit-tap-highlight-color:transparent; }
.rh-jk .sl{ position:relative; display:block; width:112px; height:112px; }
.rh-jk .cv{ position:absolute; inset:0; z-index:2; border-radius:4px; overflow:hidden; box-shadow:0 10px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07); transition:transform .45s ease, opacity .45s; }
.rh-jk .cv img{ width:100%; height:100%; object-fit:cover; display:block; }
.rh-jk .cv::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,.16), transparent 34%, transparent 70%, rgba(0,0,0,.25)); }
.rh-jk .vn{ left:4%; top:4%; width:92%; height:92%; z-index:1; transform:translateX(16%); transition:transform .45s cubic-bezier(.3,.8,.3,1); }
@media (hover:hover){ .rh-jk:hover .vn{ transform:translateX(26%) rotate(30deg); } }
.rh-jk:focus-visible{ outline:2px solid var(--c1); outline-offset:4px; border-radius:6px; }
.rh-jk.out .vn{ transform:translateX(58%) rotate(220deg); }
.rh-jk.out .cv{ transform:translateX(-5%); opacity:.75; }
.rh-jk b{ display:block; margin-top:10px; font-size:14.5px; font-weight:800; }
.rh-jk small{ display:block; font-size:11.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rh-jk .st{ position:absolute; right:6px; top:6px; z-index:3; font-style:normal; font-size:9.5px; font-weight:900; letter-spacing:.08em; padding:3px 6px; border-radius:4px; background:#f5c66b; color:#2a1d00; transform:rotate(6deg); box-shadow:0 2px 6px rgba(0,0,0,.35); }
.rh-jk.own .cv{ box-shadow:0 10px 20px rgba(0,0,0,.5), 0 0 0 2px rgba(245,198,107,.55); }
.rh-crate.sm{ gap:20px; background:linear-gradient(180deg, transparent 0 96px, rgba(120,88,58,.24) 96px 105px, transparent 105px); }
.rh-crate.sm .rh-jk, .rh-crate.sm .rh-jk .sl{ width:86px; } .rh-crate.sm .rh-jk .sl{ height:86px; }
.rh-crate.sm .rh-jk b{ font-size:13px; }
.rh-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.rh-lk{ height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--hair); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .rh-hero .spin{ animation:none; } .rh-jk .vn, .rh-hero .pl{ transition:none; } }

/* 🎬 인트로(js/intro.js) ─────────────────────────────────── */
/* 판 한 장 — .rot(돌아가는 몸) > .spin(시작하기 때 더 빨라지는 몸) > 홈 결 + 상표 · .sh 반사광은 돌지 않는다 */
.rx-disc{ position:relative; width:var(--S,160px); height:var(--S,160px); border-radius:50%; }
.rx-disc .rot, .rx-disc .spin, .rx-disc .gv{ position:absolute; inset:0; border-radius:50%; }
.rx-disc .gv{ background:
    radial-gradient(circle, transparent 0 21.5%, rgba(0,0,0,.55) 22.3%, transparent 23.4%),
    repeating-radial-gradient(circle at 50% 50%, #0c0c10 0 1.1px, #17171d 1.1px 2.3px), #111116;
  box-shadow:0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 calc(var(--S,160px)*.035) #0a0a0d; }
.rx-disc .lb{ position:absolute; left:27.7%; top:27.7%; width:44.6%; height:44.6%; border-radius:50%; background:#a796ff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 calc(var(--S,160px)*.012) rgba(0,0,0,.4); }
.rx-disc .lb .ar{ position:absolute; inset:0; width:100%; height:100%; }
.rx-disc .sh{ position:absolute; inset:0; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:conic-gradient(from 215deg, transparent 0 6%, rgba(255,255,255,.16) 11%, transparent 19% 50%, rgba(255,255,255,.09) 56%, transparent 64%); }

/* ① 여는 한 박자 */
.rx-splash{ position:absolute; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#07070c; color:var(--ink); overflow:hidden; cursor:pointer;
  transition:opacity .5s ease, transform .5s ease; }
.rx-splash.out{ opacity:0; transform:scale(1.03); pointer-events:none; }
.rx-splash .lamp{ position:absolute; left:50%; top:-18%; width:150%; height:85%; transform:translateX(-50%); pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, rgba(255,190,120,.20), rgba(167,150,255,.10) 55%, transparent); animation:rxLamp var(--T) ease forwards; }
@keyframes rxLamp{ 0%{ opacity:0; } 35%,100%{ opacity:1; } }
.rx-splash .rx-disc{ --S:min(42vw,168px); opacity:0; animation:rxIn calc(var(--T)*.55) cubic-bezier(.2,.8,.2,1) forwards; }
.rx-splash .rx-disc .rot{ animation:rxSettle calc(var(--T)*.78) cubic-bezier(.1,.62,.2,1) forwards; }
@keyframes rxIn{ from{ opacity:0; transform:scale(.84) translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes rxSettle{ from{ transform:rotate(-540deg); } to{ transform:rotate(0deg); } }
.rx-splash .wm{ margin-top:26px; font-family:'Outfit',var(--font); font-weight:600; font-size:34px; letter-spacing:-.045em; opacity:0; animation:rxWm calc(var(--T)*.9) cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rxWm{ 0%,48%{ opacity:0; transform:translateY(8px); letter-spacing:.02em; } 100%{ opacity:1; transform:none; letter-spacing:-.045em; } }
.rx-splash .by{ position:absolute; bottom:calc(34px + var(--sab)); font-size:10.5px; font-weight:800; letter-spacing:.34em; color:var(--faint); opacity:0; animation:rxBy var(--T) ease forwards; }
@keyframes rxBy{ 0%,60%{ opacity:0; } 100%{ opacity:1; } }
.rx-splash.rm .rx-disc, .rx-splash.rm .rx-disc .rot, .rx-splash.rm .wm, .rx-splash.rm .by, .rx-splash.rm .lamp{ animation:none; opacity:1; transform:none; }

/* ② 시작 화면 */
.rx{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; margin:0 -14px; padding:max(5vh,28px) 22px calc(18px + var(--sab)); overflow:hidden; text-align:center; isolation:isolate; }
.rx > *{ width:100%; max-width:420px; }
/* 공기 — 천천히 떠도는 빛 셋 + 아주 옅은 필름 결 */
.rx-amb{ position:absolute; inset:0; max-width:none; z-index:-1; pointer-events:none; overflow:hidden; }
.rx-amb i{ position:absolute; width:70vmax; height:70vmax; border-radius:50%; opacity:.55; }
.rx-amb .a{ left:-25vmax; top:-30vmax; background:radial-gradient(closest-side, rgba(167,150,255,.30), transparent); animation:rxDrift 18s ease-in-out infinite alternate; }
.rx-amb .b{ right:-30vmax; top:10vh; background:radial-gradient(closest-side, rgba(255,143,184,.20), transparent); animation:rxDrift 22s ease-in-out -6s infinite alternate-reverse; }
.rx-amb .c{ left:-10vmax; bottom:-40vmax; background:radial-gradient(closest-side, rgba(255,184,104,.14), transparent); animation:rxDrift 26s ease-in-out -3s infinite alternate; }
@keyframes rxDrift{ to{ transform:translate(6vmax, 4vmax) scale(1.08); } }
.rx::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 턴테이블 — 판 + 뒤의 빛 + 쉬고 있는 톤암 */
.rx-deck{ --D:min(60vw, 34vh, 290px); position:relative; width:var(--D) !important; height:var(--D); flex:none; margin-top:2vh; }
.rx-deck .halo{ position:absolute; inset:-22%; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, rgba(167,150,255,.28), rgba(255,143,184,.10) 55%, transparent 72%); animation:rxBreath 6s ease-in-out infinite; }
@keyframes rxBreath{ 50%{ transform:scale(1.06); opacity:.8; } }
.rx-deck .rx-disc{ --S:var(--D); }
/* 시작 화면의 판 — 로고(상표)는 바로 서 있고, 홈 결 위의 옅은 빛 띠만 돌아 「돌고 있음」을 보인다(상표까지 돌면 아치가 「D」로 읽혔다) */
.rx-disc .band{ position:absolute; inset:3.5%; border-radius:50%; pointer-events:none; background:conic-gradient(from 0deg, transparent 0 18%, rgba(255,255,255,.07) 25%, transparent 33% 68%, rgba(255,255,255,.045) 75%, transparent 82%); }
.rx-disc.slow .band{ animation:rxSpin 4.5s linear infinite; }
.rx.play .rx-disc .spin{ animation:rxSpin 1.8s linear infinite; }   /* 시작하기 — 안쪽 몸이 더 돌아 33⅓ 로 빨라진다(바깥은 그대로라 튀지 않는다) */
@keyframes rxSpin{ to{ transform:rotate(360deg); } }
.rx-deck .arm{ position:absolute; right:calc(var(--D)*-.1); top:calc(var(--D)*-.07); width:calc(var(--D)*.42); height:calc(var(--D)*.88); overflow:visible;
  transform-origin:73.3% 11.6%; transform:rotate(-19deg); transition:transform .85s cubic-bezier(.45,.05,.2,1); filter:drop-shadow(0 8px 8px rgba(0,0,0,.5)); }
.rx.play .rx-deck .arm{ transform:rotate(0deg); }

/* 글 */
.rx-copy{ margin-top:auto; padding-top:24px; }
.rx-copy .ey{ font-size:10.5px; font-weight:800; letter-spacing:.32em; color:var(--c1); }
.rx-copy .wm{ margin:10px 0 0; font-family:'Outfit',var(--font); font-weight:600; font-size:clamp(38px, 11vw, 48px); line-height:1; letter-spacing:-.045em; }
.rx-copy .hd{ margin:18px 0 0; font-size:clamp(22px, 6.4vw, 27px); font-weight:800; line-height:1.32; letter-spacing:-.025em; }
.rx-copy .sb{ margin:10px 0 0; font-size:14.5px; line-height:1.6; color:var(--dim); }

/* 단추 */
.rx-act{ margin-top:auto; padding-top:26px; }
.rx-go{ width:100%; height:56px; border:0; border-radius:16px; background:var(--ink); color:#0b1020; font:inherit; font-size:17px; font-weight:800; letter-spacing:-.01em; cursor:pointer;
  box-shadow:0 12px 30px rgba(167,150,255,.22), inset 0 -2px 0 rgba(0,0,0,.08); transition:transform .12s ease, box-shadow .2s; }
.rx-go:active{ transform:scale(.985); }
.rx-or{ display:flex; align-items:center; gap:12px; margin:18px 0 12px; font-size:12px; font-weight:600; color:var(--faint); }
.rx-or::before, .rx-or::after{ content:""; flex:1; height:1px; background:var(--hair); }
.rx-sso{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rx-sb{ display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border-radius:14px; border:1px solid var(--hair); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; transition:background .15s; }
.rx-sb:active{ background:rgba(255,255,255,.1); }
.rx-sb svg{ width:18px; height:18px; flex:none; }

/* 키가 작은 폰(아이폰 SE 등) — 한 화면에 다 들어가게 줄인다 */
@media (max-height:700px){ .rx{ padding-top:20px; } .rx-copy{ padding-top:14px; } .rx-copy .hd{ margin-top:12px; font-size:21px; } .rx-copy .sb{ display:none; } .rx-act{ padding-top:16px; } .rx-go{ height:52px; } .rx-or{ margin:12px 0 8px; } .rx-sb{ height:46px; } }

/* 처음 등장(여는 한 박자가 걷힌 뒤) · 떠날 때 */
.rx.ready .rx-deck{ animation:rxUp .9s cubic-bezier(.2,.8,.2,1) both; }
.rx.ready .rx-copy{ animation:rxUp .9s .08s cubic-bezier(.2,.8,.2,1) both; }
.rx.ready .rx-act{ animation:rxUp .9s .16s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rxUp{ from{ opacity:0; transform:translateY(16px); } }
.rx.leave .rx-copy, .rx.leave .rx-act{ opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .45s ease; }
.rx.leave .rx-deck{ transform:scale(1.12); opacity:0; transition:transform .5s cubic-bezier(.4,0,.2,1) .05s, opacity .45s ease .1s; }
.rh.enter{ animation:rhIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rhIn{ from{ opacity:0; transform:translateY(12px); } }
@media (prefers-reduced-motion:reduce){ .rx-amb i, .rx-deck .halo, .rx-disc .rot, .rx-disc .spin{ animation:none !important; } .rx-deck .arm{ transition:none; } }

/* 알림 한 줄 */
.rr-toast{ position:absolute; left:50%; bottom:calc(24px + var(--sab)); transform:translateX(-50%); z-index:80; max-width:min(92vw,380px); padding:11px 16px; border-radius:14px; background:rgba(20,22,40,.94); border:1px solid rgba(255,255,255,.14); color:var(--ink); font-size:14px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:opacity .3s; }
.rr-toast.out{ opacity:0; }