/* ============ #styp — 시안 docs/mockups/styp-race-card.html 「레이스 + 카드」 (062 조정 2026-10-16) ============ */
/* 색은 :root 토큰과 유형 색만 쓴다 — --ac 는 지금 판의 유형 색(styp-race.js 가 준다, 처음엔 파티형), --c 는 막대마다의 유형 색.
   서체는 Pretendard 하나(062 Q4) — 시안의 Space Grotesk 자리(코드·코드 별명)도 같은 서체로 쓴다.
   막대는 폭 대신 transform 으로 움직인다. 화면 밖이면 .sr-paused 로 멈추고, 움직임 줄이기면 landing.css 가 모든 움직임을 끈다 */
/* 구역 배경은 두지 않는다 — 시안의 격자 줄무늬는 빼고, 페이지에 고정된 격자·빛(.bg-fx)이 히어로부터 그대로 이어진다 (대표 요청 2026-10-16) */
.sr{--ac:var(--styp-tc);overflow-x:clip}
.sr.sr-paused *,.sr.sr-paused *::before,.sr.sr-paused *::after{animation-play-state:paused}
.sr.sr-paused .sr-front::after{animation:none}

/* 머리 — 라벨·제목·설명 아래에 주 버튼 */
.sr-txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.sr-txt .eyebrow{align-self:flex-start;margin-bottom:0}
.sr h2.title{font-weight:900;line-height:1.25;letter-spacing:-.01em;word-break:keep-all}
.sr-txt .lead{margin-top:0;font-size:1.0625rem;line-height:1.6}
.sr-go{margin-top:14px}

.sr-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;margin-top:44px}

/* 왼쪽 — 막대 경주 */
.sr-race{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px 32px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line)}
.sr-race::after{content:"";position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.05),transparent);animation:sr-scan 1.6s linear infinite;pointer-events:none}
.sr-body.sr-done .sr-race::after{display:none}
@keyframes sr-scan{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.sr-pause{position:absolute;top:16px;right:16px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:99px;color:var(--muted);background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:color .2s,border-color .2s}
.sr-pause[hidden]{display:none}
.sr-pause:hover{color:var(--text);border-color:var(--line-2)}
.sr-pause svg{width:14px;height:14px;fill:currentColor}
.sr-pause .i-play,.sr-pause[aria-pressed="true"] .i-pause{display:none}
.sr-pause[aria-pressed="true"] .i-play{display:block}
.sr-status{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:1.375rem;font-weight:900;letter-spacing:-.01em;color:var(--text)}
.sr-status .ind{position:relative;width:12px;height:12px;flex:none;border-radius:50%;background:var(--ac)}
.sr-status .ind::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:sr-ping 1.1s ease-out infinite}
@keyframes sr-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.sr-status .tx{background:linear-gradient(90deg,var(--muted-2) 0%,#fff 45%,var(--muted-2) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sr-shine 1.4s linear infinite}
@keyframes sr-shine{from{background-position:120% 0}to{background-position:-100% 0}}
.sr-status .dots::after{content:"";animation:sr-dots 1.2s steps(4) infinite}
@keyframes sr-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.sr-status .ok{display:none;width:24px;height:24px;flex:none;color:var(--ac)}
.sr-body.sr-done .sr-status .ind,.sr-body.sr-done .sr-status .dots{display:none}
.sr-body.sr-done .sr-status .ok{display:block;animation:sr-okpop calc(.5s * var(--motion-pace)) cubic-bezier(.2,1.8,.4,1)}
.sr-body.sr-done .sr-status .tx{background:none;color:var(--ac);animation:sr-okpop calc(.5s * var(--motion-pace)) cubic-bezier(.2,1.8,.4,1)}
@keyframes sr-okpop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

.sr-bars{display:flex;flex-direction:column;gap:16px}
.sr-bar{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:18px;transition:opacity calc(.45s * var(--motion-pace))}
.sr-bar>span{font-size:.875rem;font-weight:700;color:var(--muted-2);transition:color .2s}
.sr-bar.sr-lead>span,.sr-bar.sr-win>span{color:var(--text)}
.sr-body.sr-done:not(.sr-reset) .sr-bar:not(.sr-win){opacity:.4}
.sr-bar .trk{height:14px;border-radius:99px;background:var(--surface);overflow:hidden}
/* 채운 칸은 늘 칸 전체 폭이고 --w 만큼 보이게 밀어 둔다 — 왼쪽 끝은 칸의 둥근 모서리가 가린다 */
.sr-bar .fil{position:relative;overflow:hidden;height:100%;border-radius:99px;background:var(--c,var(--line-2));
  transform:translateX(calc(var(--w,20%) - 100%));transition:transform calc(.22s * var(--motion-pace)) cubic-bezier(.4,0,.2,1),box-shadow calc(.4s * var(--motion-pace))}
.sr-bar.sr-win .fil{--w:100%;background:var(--c,var(--ac));box-shadow:0 0 16px var(--c,var(--ac))}
.sr-bar.sr-lead .fil{box-shadow:0 0 18px var(--c)}
.sr-body.sr-reset .sr-bar .fil{box-shadow:none}
.sr-bar.sr-lead .fil::after,.sr-bar.sr-win .fil::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:sr-shim .7s linear infinite}
.sr-bar.sr-win .fil::after{animation:sr-shim 1.4s ease-in-out infinite}
@keyframes sr-shim{to{transform:translateX(275%)}}

/* 오른쪽 — 뒤집히는 카드 */
.sr-zone{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;perspective:1400px}
.sr-ghost,.sr-card{width:min(280px,calc(100% - 72px));aspect-ratio:280/370}
.sr-ghost{position:absolute;border-radius:22px;border:1px solid rgba(255,255,255,.06)}
.sr-ghost.a{background:var(--bg);transform:translate(-28px,8px) rotate(-8deg)}
.sr-ghost.b{background:var(--bg-2);transform:translate(26px,5px) rotate(6deg)}
/* 경주 중 흔들림(--jy·--jr)과 뒤집기(--ry)는 한 transform 안에 둔다 — 함수 목록이 같아야 부드럽게 넘어간다 */
.sr-card{position:relative;transform-style:preserve-3d;transform:translateY(var(--jy,0px)) rotateZ(var(--jr,0deg)) rotateY(0deg);transition:transform calc(.35s * var(--motion-pace)) cubic-bezier(.3,1.25,.5,1)}
.sr-card.sr-flipped{transform:translateY(0px) rotateZ(0deg) rotateY(180deg);transition:transform calc(.8s * var(--motion-pace)) cubic-bezier(.3,1.25,.5,1)}
.sr-card.sr-pop{animation:sr-pop calc(.6s * var(--motion-pace)) cubic-bezier(.2,1.6,.4,1)}
@keyframes sr-pop{0%{scale:1}40%{scale:1.08}100%{scale:1}}
.sr-face{position:absolute;inset:0;box-sizing:border-box;border-radius:22px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}

.sr-back{display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line-2)}
.sr-back::before{content:"";position:absolute;inset:-60%;background:conic-gradient(from 0deg,transparent 0 60%,var(--ac) 75%,transparent 90%);opacity:.55;animation:sr-spin 1.4s linear infinite}
.sr-back::after{content:"";position:absolute;inset:2px;border-radius:20px;background:var(--surface)}
.sr-back>*{position:relative;z-index:1}
.sr-card.sr-flipped .sr-back::before{animation-play-state:paused}
@keyframes sr-spin{to{transform:rotate(360deg)}}
/* 별자리 STYP — 선은 styp-race.js 가 판마다 다시 긋는다 */
.sr-cst{overflow:visible;max-width:90%;height:auto}
.cst-line{fill:none;stroke:rgba(190,198,240,.42);stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:sr-draw 1.2s ease-out forwards}
@keyframes sr-draw{to{stroke-dashoffset:0}}
.cst-star{fill:#fff;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 2.5px var(--ac)) drop-shadow(0 0 1px #fff);animation:sr-twinkle var(--tw) ease-in-out var(--dl) infinite}
.cst-star.big{filter:drop-shadow(0 0 4px var(--ac)) drop-shadow(0 0 1.5px #fff)}
.cst-dust{fill:#c9cdf0;animation:sr-twinkle var(--tw) ease-in-out var(--dl) infinite}
.cst-flare{fill:none;stroke:#fff;stroke-width:.7;stroke-linecap:round;opacity:.8;transform-box:fill-box;transform-origin:center;animation:sr-flare 2.6s ease-in-out var(--dl) infinite}
.sr-card.sr-flipped .sr-cst *{animation-play-state:paused}
@keyframes sr-twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
@keyframes sr-flare{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}

.sr-front{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:space-between;padding:30px 28px;
  background:color-mix(in srgb,var(--ac) 12%,var(--bg-2));border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);box-shadow:0 0 60px -18px var(--ac);transition:background calc(.3s * var(--motion-pace)),border-color calc(.3s * var(--motion-pace)),box-shadow calc(.3s * var(--motion-pace))}
.sr-front::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),rgba(255,230,250,.12),transparent);transform:translateX(-133%) skewX(-18deg);pointer-events:none}
.sr-body.sr-done .sr-front::after{animation:sr-holo 2.4s ease-in-out .9s infinite}
@keyframes sr-holo{0%{transform:translateX(-133%) skewX(-18deg)}45%,100%{transform:translateX(311%) skewX(-18deg)}}
.sr-front .top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;color:var(--muted)}
.sr-front .top em{font-style:normal;font-weight:600;letter-spacing:.06em;text-align:right}
.sr-front .nm{font-size:3.125rem;font-weight:900;line-height:1.05;color:var(--ac);transform:scale(.8);opacity:0;transition:transform calc(.5s * var(--motion-pace)) cubic-bezier(.2,1.6,.4,1) calc(.55s * var(--motion-pace)),opacity calc(.3s * var(--motion-pace)) calc(.55s * var(--motion-pace))}
.sr-body.sr-done .sr-front .nm{transform:none;opacity:1}
.sr-front .nk{margin-top:6px;font-size:1.0625rem;font-weight:700;color:var(--text)}
.sr-front p{margin:10px 0 0;font-size:.906rem;line-height:1.65;color:var(--muted);word-break:keep-all}
.sr-front .cd{font-size:2.5rem;font-weight:800;letter-spacing:.12em;line-height:1;color:#fff}
.sr-front .cd span{display:inline-block;opacity:0;transform:scale(2.2);transition:opacity calc(.25s * var(--motion-pace)),transform calc(.35s * var(--motion-pace)) cubic-bezier(.2,1.8,.4,1)}
.sr-front .cd span.on{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .sr-race::after,.sr-back::before,.sr-front::after,.sr-bar .fil::after{display:none}
}

/* 900px 이하 — 머리는 글 아래 버튼, 몸은 막대 위·카드 아래 (대표 결정 2026-10-16: 휴대폰에서도 보인다) */
@media(max-width:900px){
  .sr-body{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px}
  .sr-race{padding:22px 20px}
  .sr-zone{min-height:0;padding:28px 0}
}
@media(max-width:420px){
  .sr-bar{grid-template-columns:52px minmax(0,1fr);gap:12px}
  .sr-front{padding:22px 20px}
  .sr-front .nm{font-size:2.5rem}
  .sr-front p{font-size:.84rem;line-height:1.55}
  .sr-front .cd{font-size:2rem}
}