/* RUSHFIT 회원 결과 카드 (2026-10-13) — index.html · results.html 공용.
   기본은 화이트, 다크는 html[data-theme=dark](공용 theme.js) 또는 #theme-root.theme-dark(메인)에서 켠다. */
.rk-scope { --rk-card:#fff; --rk-line:#e4e4de; --rk-ink:#000; --rk-body:#33332e; --rk-mute:#6b6b64; --rk-track:#efefea; --rk-ghost:rgba(0,0,0,.38); --rk-chip:#f2f2ee; }
html[data-theme=dark] .rk-scope, #theme-root.theme-dark .rk-scope { --rk-card:#141416; --rk-line:rgba(255,255,255,.1); --rk-ink:#fff; --rk-body:rgba(255,255,255,.82); --rk-mute:rgba(255,255,255,.55); --rk-track:rgba(255,255,255,.07); --rk-ghost:rgba(255,255,255,.42); --rk-chip:rgba(255,255,255,.08); }

.rk-card { background:var(--rk-card) !important; border:1px solid var(--rk-line); border-radius:22px; padding:20px 20px 18px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 14px 34px rgba(0,0,0,.10), 0 10px 30px rgba(230,0,35,.06); }
.rk-card[hidden] { display:none; }
.rk-top { display:flex; flex-direction:column; gap:8px; }
.rk-name { font-size:17px; font-weight:800; letter-spacing:-0.3px; color:var(--rk-ink) !important; }
.rk-tags { display:flex; flex-wrap:wrap; gap:6px; }
.rk-tags span { font-size:11.5px; font-weight:700; border-radius:9999px; padding:4px 9px; background:var(--rk-chip) !important; color:var(--rk-body) !important; }
.rk-tags .rk-goal { background:#e60023 !important; color:#fff !important; }
.rk-tags .rk-trial { background:transparent !important; border:1px solid var(--rk-line); color:var(--rk-mute) !important; }

.rk-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:4px; }
.rk-body figure { margin:0; text-align:center; }
.rk-box { height:170px; display:flex; justify-content:center; }
.rk-mq { height:100%; width:auto; overflow:visible; }
.rk-before { fill:#8a8a85; }
.rk-arm { stroke:var(--rk-card); stroke-width:2; paint-order:stroke; }
.rk-ghost { fill:none; stroke:var(--rk-ghost); stroke-width:1.6; stroke-dasharray:5 4; }
.rk-lines { fill:none; stroke:rgba(255,255,255,.55); stroke-width:1.4; stroke-linecap:round; }
.rk-body figcaption { margin-top:6px; font-size:12px; font-weight:700; color:var(--rk-mute) !important; display:flex; flex-direction:column; }
.rk-body figcaption span { font-size:14px; font-weight:800; color:var(--rk-ink) !important; }
.rk-arrow { align-self:center; display:flex; flex-direction:column; align-items:center; gap:3px; color:#ff4d6d !important; font-size:11.5px; font-weight:800; padding-bottom:34px; }
.rk-arrow svg { width:34px; height:14px; }

.rk-metrics { display:grid; gap:10px; }
.rk-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:3px; }
.rk-head span { font-size:13px; font-weight:800; color:var(--rk-ink) !important; }
.rk-head b { font-size:14px; font-weight:800; color:#e60023 !important; }
html[data-theme=dark] .rk-head b, #theme-root.theme-dark .rk-head b { color:#ff8a9b !important; }
.rk-bar { display:grid; grid-template-columns:28px 1fr 56px; align-items:center; gap:8px; margin-top:3px; }
.rk-bar i { font-style:normal; font-size:11px; font-weight:600; color:var(--rk-mute) !important; }
.rk-bar em { font-style:normal; font-size:12.5px; font-weight:700; text-align:right; color:var(--rk-mute) !important; }
.rk-bar em.rk-now { color:var(--rk-ink) !important; }
.rk-track { height:10px; border-radius:4px; background:var(--rk-track) !important; overflow:hidden; }
.rk-fill { display:block; height:100%; border-radius:4px; width:var(--w); }
.rk-b { background:#8a8a85 !important; } .rk-a { background:#e60023 !important; }

.rk-note { margin:0; font-size:12.5px; line-height:1.55; color:var(--rk-body) !important; }
.rk-note b { color:var(--rk-ink) !important; margin-right:4px; }
.rk-quote { margin:0; padding:12px 14px; border-radius:14px; background:var(--rk-chip) !important; font-size:13.5px; line-height:1.6; color:var(--rk-ink) !important; word-break:keep-all; }

/* 애니메이션 — JS가 없으면 처음부터 다 찬 상태 */
.rk-anim .rk-fill { width:0; transition:width 1.1s cubic-bezier(.22,1,.36,1); }
.rk-anim .rk-a { transition-delay:.35s !important; }
.rk-anim .rk-in .rk-fill { width:var(--w); }
.rk-anim .rk-after { opacity:0; transform:scale(1.08,1); transform-origin:100px 250px; transition:opacity .8s ease .4s, transform 1.2s cubic-bezier(.22,1,.36,1) .4s; }
.rk-anim .rk-ghost { opacity:0; transition:opacity .6s ease .15s; }
.rk-anim .rk-in .rk-after { opacity:1; transform:none; }
.rk-anim .rk-in .rk-ghost { opacity:1; }
@media (prefers-reduced-motion: reduce) { .rk-anim .rk-fill, .rk-anim .rk-after, .rk-anim .rk-ghost { transition:none !important; } }

/* 요약 숫자 */
.rk-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rk-stat { background:var(--rk-card) !important; border:1px solid var(--rk-line); border-radius:18px; padding:16px 18px; }
.rk-stat b { display:block; font-size:28px; font-weight:800; letter-spacing:-1px; color:#e60023 !important; line-height:1.1; }
html[data-theme=dark] .rk-stat b, #theme-root.theme-dark .rk-stat b { color:#ff4d6d !important; }
.rk-stat b small { font-size:14px; letter-spacing:0; margin-left:2px; }
.rk-stat span { display:block; margin-top:6px; font-size:12.5px; line-height:1.45; color:var(--rk-mute) !important; }
@media (max-width:560px) { .rk-stats { grid-template-columns:1fr; } .rk-stat { display:flex; align-items:baseline; gap:12px; } .rk-stat span { margin-top:0; } }

.rk-disclaimer { font-size:11.5px; line-height:1.6; color:var(--rk-mute) !important; margin:14px 0 0; }

/* 좋아요 (2026-10-15) — 이름 오른쪽 하트. 누구나 누를 수 있고, 누르면 빨갛게 채워진다. */
.rk-namerow { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rk-like { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; height:34px; padding:0 12px; border-radius:9999px; border:1px solid var(--rk-line); background:var(--rk-chip) !important; color:var(--rk-body) !important; font-size:13px; font-weight:800; font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.rk-like svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }
.rk-like.on { border-color:#e60023; color:#e60023 !important; background:rgba(230,0,35,.08) !important; }
.rk-like.on svg { fill:#e60023; stroke:#e60023; }
.rk-like-n:empty { display:none; }
.rk-like.rk-pop svg { animation:rk-pop .35s ease; }
@keyframes rk-pop { 0% { transform:scale(1); } 40% { transform:scale(1.35); } 100% { transform:scale(1); } }