/* ===== 런BTI — 디자인 토큰 (Figma 'Colors/Base', 'Font Size' 베리어블 기준) ===== */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('../assets/fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  font-display: swap;
}
:root {
  --bg: #170202;
  --bg-outside: #0b0101;
  --orange-1: #fff4e6;
  --red-3: #ffa5a0;
  --red-5: #ff6259;
  --red-6: #ff3b30;
  --red-7: #e8362c;
  --green-5: #5dd27a;
  --n0: #ffffff;
  --n50: #c2c7d0;
  --text-dim: rgba(255, 244, 234, .62);
  --line: rgba(255, 244, 234, .12);

  --fs-sm: 12px;
  --fs: 14px;
  --fs-lg: 16px;
  --fs-h4: 20px;
  --fs-h3: 24px;
  --lh: 22px;
  --lh-h3: 32px;
  --lh-h5: 24px;

  --pad-x: 24px;
  --radius-btn: 12px;
  --app-w: 430px;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* ===== 기본 ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-outside); }
html.is-locked { overflow: hidden; }
body { margin: 0; font-family: var(--font); color: var(--n0); background: var(--bg-outside); -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--red-3); outline-offset: 3px; }
[hidden] { display: none !important; }

.app { position: relative; max-width: var(--app-w); margin: 0 auto; min-height: 100vh; min-height: 100svh; background: var(--bg); overflow-x: clip; }

/* ===== 공통 컴포넌트 ===== */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 132px; height: 34px; padding: 0 20px; border-radius: 100px;
  background: rgba(70, 32, 32, .32); border: 1px solid rgba(255, 167, 167, .15);
  color: var(--red-6); font-size: var(--fs); font-weight: 700; line-height: var(--lh);
}
.section { padding: 56px var(--pad-x) 8px; text-align: center; }
.section__title { padding-top: 12px; color: var(--orange-1); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); letter-spacing: -.6px; }
.section__desc { padding-top: 10px; color: var(--text-dim); font-size: var(--fs); line-height: var(--lh); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 340px; height: 66px; padding: 0 16px;
  border-radius: var(--radius-btn); background: var(--red-6); color: #fff;
  font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-h5);
  transition: transform .15s ease, filter .15s ease;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.98); }
.btn-primary--glow {
  max-width: none; height: 60px; background: var(--red-7);
  box-shadow: 0 10px 15px rgba(255, 74, 61, .38), inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 196px; height: 38px; padding: 0 20px; border-radius: 90px;
  background: rgba(100, 71, 71, .38); border: 1px solid rgba(255, 167, 167, .11);
  color: rgba(255, 165, 160, .66); font-size: var(--fs); font-weight: 700; line-height: var(--lh);
  transition: background .15s ease;
}
.btn-ghost:hover { background: rgba(120, 80, 80, .5); }

/* ===== 01-1 히어로 ===== */
.hero { position: relative; min-height: 828px; overflow: hidden; isolation: isolate; }
.hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background: url('../assets/bg-track.jpg') top center / 100% auto no-repeat, #170202;
}
.hero__bg::after { /* Figma: 그라디언트 (multiply) */
  content: ''; position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(to top, #2c0505 10%, rgba(0, 0, 0, .68) 97%);
}
.hero__inner { display: flex; flex-direction: column; align-items: center; padding: 43px 0 28px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(255, 244, 234, .15); color: var(--orange-1); font-size: 12px; line-height: normal;
}
.live-pill b { font-weight: 700; }
.live-pill__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--green-5); box-shadow: 0 0 0 3px rgba(93, 210, 122, .2); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(93, 210, 122, .08); } }

.hero__head { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 27px var(--pad-x) 0; text-align: center; }
.hero__eyebrow { font-size: 20px; font-weight: 700; line-height: 22.5px; }
.hero__logo { height: 115px; display: flex; align-items: center; filter: drop-shadow(0 4px 16.7px rgba(255, 74, 61, .31)); }
.hero__sub { font-size: var(--fs); font-weight: 600; line-height: 20.6px; opacity: .66; }

.hero__cards { position: relative; width: 390px; max-width: 100%; height: 251px; }
.hero__cards img { position: absolute; top: 0; left: 50%; width: 390px; max-width: none; height: auto; transform: translateX(-50%); }
@media (max-width: 389px) { .hero__cards { height: calc(100vw * 251 / 390); } .hero__cards img { width: 100vw; } }

.stats { display: flex; justify-content: center; padding-top: 26px; height: 94px; }
.stats__item { width: 114px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stats__item + .stats__item { border-left: 1px solid var(--line); }
.stats dt { padding-top: 6px; font-size: var(--fs-lg); line-height: 15px; color: var(--text-dim); }
.stats dd { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); color: var(--orange-1); }

.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 15px var(--pad-x) 0; }

/* ===== 01-2 16가지 유형 ===== */
.types { scroll-margin-top: 0; }
.type-groups { display: flex; flex-direction: column; gap: 32px; padding-top: 50px; text-align: left; }
.type-group__title { display: flex; align-items: center; gap: 8px; color: var(--orange-1); font-size: var(--fs-lg); font-weight: 700; line-height: 19px; }
.type-group__dot { width: 10px; height: 10px; border-radius: 9px; background: var(--dot); }
.type-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 10px; }
.type-item { display: flex; flex-direction: column; gap: 6px; width: 100%; text-align: left; }
.type-item__img { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 2px var(--ring); transition: transform .18s ease, box-shadow .18s ease; }
.type-item__img img { width: 100%; height: 100%; object-fit: cover; }
.type-item:hover .type-item__img { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ring), 0 8px 18px rgba(0, 0, 0, .45); }
.type-item:active .type-item__img { transform: scale(.96); }
.type-item__code { color: var(--code); font-size: var(--fs-sm); font-weight: 600; line-height: 20px; }
.type-item__name { margin-top: -6px; color: var(--orange-1); opacity: .47; font-size: 11px; font-weight: 600; line-height: 16px; }

/* ===== 01-4 진행 방법 ===== */
.how { padding-top: 96px; padding-bottom: 0; }
.steps { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; text-align: left; }
.step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.step__num { color: var(--red-6); font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-h5); }
.step__title { color: var(--n0); font-size: 18px; font-weight: 700; line-height: var(--lh-h5); }
.step__text { padding-top: 4px; color: var(--n50); font-size: var(--fs-lg); line-height: 24px; }

.final-cta {
  margin: 56px calc(var(--pad-x) * -1) 0; padding: 25px var(--pad-x) 40px;
  background: radial-gradient(70% 60% at 50% 100%, rgba(90, 23, 18, 1), rgba(90, 23, 18, 0) 100%);
}
.final-cta .section__title { padding-top: 0; }
.final-cta .btn-primary { margin-top: 24px; }
.disclaimer { max-width: 300px; margin: 24px auto 0; color: rgba(255, 244, 234, .58); font-size: var(--fs-sm); line-height: 19.2px; }

/* ===== 팝업 (00_main_popup) ===== */
.popup { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.popup__dim {
  position: absolute; inset: 0; background: rgba(30, 7, 7, .71);
  -webkit-backdrop-filter: blur(4.75px); backdrop-filter: blur(4.75px);
  opacity: 0; transition: opacity .22s ease;
}
.popup__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 270px; opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.2); }
.popup__close { width: 42px; height: 42px; border-radius: 50%; }
.popup__close img { width: 42px; height: 42px; }
.popup__card { width: 270px; height: auto; aspect-ratio: 294 / 432; filter: drop-shadow(2px 13px 37px rgba(34, 9, 9, .81)); }
.popup.is-open .popup__dim { opacity: 1; }
.popup.is-open .popup__body { opacity: 1; transform: none; }
@media (min-height: 760px) { .popup__body, .popup__card { width: 300px; } }

/* ===== 공통 상단 바 ===== */
.topbar { height: 60px; display: flex; align-items: center; padding: 0 16px; }
.topbar__back { width: 44px; height: 44px; display: grid; place-items: center; color: var(--orange-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== 01_presurvey 개인 설문 (라이트 화면) ===== */
:root {
  --ps-bg: #ffffff;
  --ps-line: #ececec;
  --ps-label-bg: #e6f2ff;   /* primary/subtle */
  --ps-sub: #505f79;
  --ps-title: #222222;
  --ps-q: #15294b;
  --ps-chip-text: #243757;
  --ps-chip-line: #dfe2e6;
  --ps-num-on: #091e42;
  --ps-disabled: #b3b9c4;
  --ps-note: #8c96a5;
  --ps-accent: var(--red-5); /* 선택 칩 · 활성 버튼 #ff6259 */
}
html[data-screen="presurvey"], html[data-screen="presurvey"] body { background: #f4f5f7; }
.screen-presurvey { position: relative; min-height: 100vh; min-height: 100svh; background: var(--ps-bg); color: var(--ps-title); overflow: hidden; isolation: isolate; }
.presurvey__blur { position: absolute; top: 87px; left: 0; right: 0; height: 1000px; z-index: -1; background: url('../assets/presurvey-blur.webp') center top / 100% 100% no-repeat; pointer-events: none; }
.topbar--light { position: sticky; top: 0; z-index: 5; background: var(--ps-bg); border-bottom: 1px solid var(--ps-line); padding-left: 14px; }
.topbar--light .topbar__back { color: var(--ps-title); }

.presurvey { display: flex; flex-direction: column; align-items: center; padding: 28px var(--pad-x) 34px; }
.presurvey__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.step-label { padding: 5px 10px; border-radius: 20px; background: var(--ps-label-bg); color: var(--ps-sub); font-size: 12px; font-weight: 600; letter-spacing: -.12px; }
.presurvey__title { color: var(--ps-title); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-h3); outline: none; }
.presurvey__desc { color: var(--ps-sub); font-size: 14px; line-height: 1.5; letter-spacing: -.14px; }

.pq-list { display: flex; flex-direction: column; gap: 32px; width: 100%; margin-top: 36px; }
.pq { margin: 0; padding: 0; border: 0; min-width: 0; }
.pq__q { display: flex; align-items: center; gap: 8px; padding: 0; color: var(--ps-q); font-size: 17px; font-weight: 700; letter-spacing: -.17px; }
.pq__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 13px; background: var(--ps-chip-line); color: var(--ps-sub); font-size: 13px; font-weight: 700; transition: background .2s ease, color .2s ease; }
.pq.is-answered .pq__num { background: var(--ps-num-on); color: #fff; }
.pq__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pq__opts--half .chip { flex: 1 1 0; }

.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 18px;
  border-radius: 12px; border: 1.5px solid var(--ps-chip-line); background: #fff;
  color: var(--ps-chip-text); font-size: 15px; font-weight: 600; letter-spacing: -.15px; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.chip:hover { border-color: #c1c7d0; }
.chip:active { transform: scale(.97); }
.chip__input:checked + .chip { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; font-weight: 700; }
.chip__input:focus-visible + .chip { outline: 2px solid var(--ps-num-on); outline-offset: 2px; }

.next-btn {
  width: 100%; height: 58px; margin-top: 40px; border-radius: 12px;
  background: var(--ps-disabled); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -.17px;
  transition: background .25s ease, transform .12s ease;
}
.next-btn:disabled { cursor: not-allowed; }
.next-btn.is-active { background: var(--ps-accent); animation: pop .35s ease; }
.next-btn.is-active:active { transform: scale(.98); }
@keyframes pop { 40% { transform: scale(1.03); } }
.presurvey__note { margin-top: 12px; color: var(--ps-note); font-size: 12px; letter-spacing: -.12px; text-align: center; }

/* ===== 02 survey · 16문항 ===== */
:root {
  --sv-line: #ebedf0;      /* n30 */
  --sv-off: #b3b9c4;       /* n60 */
  --sv-text: #243757;      /* n700 */
  --sv-dim: #c9cfd6;
  --sv-ring: conic-gradient(from 225deg, #3289ff 23.6%, #50e5ff 69.3%, #ffde59 96.2%);
}
html[data-screen="survey"], html[data-screen="survey"] body { background: #f4f5f7; }
.screen-survey { position: relative; min-height: 100vh; min-height: 100svh; background: #fff; color: var(--ps-title); overflow: hidden; isolation: isolate; }
.survey__blur { position: absolute; left: 0; right: 0; top: 142px; height: 708px; z-index: -1; background: url('../assets/survey-blur.webp') center top / 100% 100% no-repeat; pointer-events: none; }
.survey { display: flex; flex-direction: column; align-items: center; padding: 24px var(--pad-x) 40px; }

.sv-nav { display: flex; align-items: center; justify-content: center; gap: 28px; padding-top: 26px; }
.sv-nav__slot { width: 72px; display: flex; }
.sv-nav__slot--prev { justify-content: flex-end; }
.sv-nav__btn { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; color: var(--ps-title); font-size: 15px; font-weight: 600; }
.sv-nav__btn:disabled { color: var(--sv-dim); cursor: default; }
.sv-nav__btn:not(:disabled):hover { opacity: .7; }
.sv-progress { position: relative; width: 36px; height: 36px; flex: none; }
.sv-progress svg { position: absolute; inset: 0; }
.sv-progress__arc { transition: stroke-dashoffset .4s ease; }
.sv-progress__num { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ps-sub); font-size: 15px; font-weight: 700; }

.sv-stage { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; padding: 28px 0; }
.sv-stage.slide-next { animation: svIn .32s ease both; }
.sv-stage.slide-prev { animation: svInBack .32s ease both; }
@keyframes svIn { from { opacity: 0; transform: translateX(28px); } }
@keyframes svInBack { from { opacity: 0; transform: translateX(-28px); } }
.sv-question { color: var(--ps-title); font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -.56px; text-align: center; outline: none; }

.sv-options { display: flex; gap: 12px; width: 100%; max-width: 342px; }
.sv-option { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; text-align: center; }
.sv-card {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  width: 100%; height: 209px; padding: 26px 12px 24px; border-radius: 20px;
  border: 2px solid var(--sv-line); background: #fff;
  color: var(--sv-text); font-size: var(--fs-lg); font-weight: 600; line-height: 22px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.sv-card__icon { width: 90px; height: 90px; object-fit: cover; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.sv-option:hover .sv-card { box-shadow: 0 6px 18px rgba(21, 41, 75, .08); }
.sv-option:active .sv-card { transform: scale(.98); }
.sv-option.is-selected .sv-card {
  border: 4px solid transparent; padding: 24px 10px 22px;
  background: linear-gradient(#fff, #fff) padding-box, var(--sv-ring) border-box;
}
.sv-option.is-selected .sv-card__icon { transform: scale(1.08); }
.sv-pick {
  display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 12px;
  background: var(--sv-off); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: -.18px;
  transition: background .2s ease;
}
.sv-option.is-selected .sv-pick { background: var(--ps-accent); }

.sv-guide { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 52px; text-align: center; }
.sv-guide__title { display: flex; align-items: center; gap: 2px; color: #15294b; font-size: var(--fs-lg); font-weight: 600; line-height: 22px; }
.sv-guide__icon { font-size: 18px; filter: grayscale(1) brightness(.4); }
.sv-guide__text { color: var(--sv-text); font-size: var(--fs); line-height: 22px; }

/* ===== 03 loading (Making Result_2) ===== */
html[data-screen="loading"], html[data-screen="loading"] body { background: #f4f5f7; }
.screen-loading { position: relative; min-height: 100vh; min-height: 100svh; background: #fff; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.loading__blur { position: absolute; left: 0; right: 0; top: 42px; height: 808px; z-index: -1; background: url('../assets/loading-blur.webp') center top / 100% 100% no-repeat; pointer-events: none; }
.screen-loading .topbar--light { align-self: stretch; }
.loading__title { margin-top: 78px; color: var(--red-5); font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; outline: none; }
.loading__cards { width: 394px; height: 363px; margin-top: 19px; flex: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); }
.loading__cards video { display: block; width: 100%; height: 100%; object-fit: cover; }
.loading__steps { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 11px; padding-bottom: 40px; }
.lstep { display: flex; align-items: center; gap: 6px; color: #98a1b0; font-size: 15px; font-weight: 600; line-height: 32px; transition: color .35s ease, opacity .35s ease; }
.lstep:nth-child(3) { opacity: .8; }
.lstep:nth-child(4) { opacity: .6; }
.lstep__icon { width: 24px; height: 24px; background: url('../assets/check-pending.svg') center / contain no-repeat; transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); }
.lstep.is-done { opacity: 1; color: #091e42; font-size: 16px; font-weight: 700; }
.lstep.is-done .lstep__icon { background-image: url('../assets/check-done.svg'); animation: checkPop .4s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes checkPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ===== 04 result card (나의 러닝 유형 결과) =====
   유형 무리별 색은 js 에서 --rs-bg / --rs-title / --rs-box / --rs-box-text 로 넣음 */
html[data-screen="result"], html[data-screen="result"] body { background: var(--rs-bg, #ffc2bf); }
.screen-result {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--rs-bg, #ffc2bf); color: #091e42; padding-bottom: 48px;
  display: flex; flex-direction: column; align-items: center;
}
.result__pattern {
  position: absolute; inset: 0 0 auto; height: 850px; z-index: -1; pointer-events: none;
  background: url('../assets/result-pattern.webp') center top / 100% 100% no-repeat;
  opacity: .22; mix-blend-mode: color-dodge; filter: blur(21.8px);
}
.rs-top { align-self: stretch; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 16px; }
.rs-top__back {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rs-top__home { padding: 10px 8px; color: #15294b; font-size: 13px; font-weight: 500; }
.result__title { margin-top: 0; color: var(--rs-title, #ff7c74); font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; outline: none; }

.result { width: 352px; max-width: calc(100% - 32px); display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 24px; }
.result__set { width: 294px; display: flex; flex-direction: column; gap: 16px; }
.result__card-wrap { perspective: 1200px; }
.result__card { width: 294px; height: auto; aspect-ratio: 294 / 432; filter: drop-shadow(0 10px 24px rgba(9, 30, 66, .14)); }
.screen-result.is-reveal .result__card { animation: cardReveal .8s cubic-bezier(.2, .8, .25, 1) both; }
.screen-result.is-reveal .friend { animation: riseIn .5s .45s ease-out backwards; }
.screen-result.is-reveal .result__actions { animation: riseIn .5s .6s ease-out backwards; }
@keyframes cardReveal { 0% { opacity: 0; transform: rotateY(-90deg) scale(.92); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.friend { width: 100%; cursor: pointer; transition: transform .15s ease, filter .2s ease; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 20px; border-radius: 14px; background: var(--rs-box, #ff6259); color: var(--rs-box-text, #fff); text-align: center; }
.friend:hover { filter: brightness(1.04); }
.friend:active { transform: scale(.98); }
.friend__head { display: block; font-size: 16px; font-weight: 700; line-height: 24px; }
.friend__code { font-size: 18px; margin-right: 2px; }
.friend__text { display: block; font-size: 14px; font-weight: 600; line-height: 20px; opacity: .85; }

.result__actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.rs-save { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; color: #091e42; font-size: 18px; font-weight: 600; }
.rs-save.is-busy { opacity: .5; pointer-events: none; }
.rs-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 54px; border-radius: 10px; background: #2f3236; color: #fff; font-size: 16px; font-weight: 600; transition: transform .15s ease, background .2s ease; }
.rs-btn:active, .rs-save:active { transform: scale(.97); }
.rs-btn:hover { background: #3c4046; }
.rs-more { margin-top: 4px; padding: 6px; color: #091e42; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: .5; }

/* 이미지 저장 안내 시트 */
.save-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.save-sheet__dim { position: absolute; inset: 0; background: rgba(9, 13, 20, .72); }
.save-sheet__body { position: relative; width: 100%; max-width: 360px; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 16px; border-radius: 20px; background: #fff; color: #091e42; text-align: center; }
.save-sheet__title { font-size: 17px; font-weight: 700; }
.save-sheet__desc { font-size: 13px; line-height: 19px; color: #505f79; }
.save-sheet__img { width: auto; max-width: 100%; max-height: 56vh; margin-top: 6px; border-radius: 12px; -webkit-touch-callout: default; user-select: auto; }
.save-sheet__close { width: 100%; height: 48px; margin-top: 6px; border-radius: 10px; background: #2f3236; color: #fff; font-size: 15px; font-weight: 600; }

/* 토스트 */
.toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: min(360px, calc(100% - 32px)); padding: 12px 18px; border-radius: 12px;
  background: rgba(23, 28, 36, .92); color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center;
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.footer-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }