/* ── Setup / onboarding flow ──────────────────────────────────────────────
   Reached from the red Start button (평소 / 올릴때). 4 steps on a gray frame with
   a black bottom step-bar: Location → Condition → Injury check → Level/Mode →
   Main Workout. Every option is a toggle: tap to fill (Newton gradient + inner
   glow), tap again to clear. Fonts/effects mirror the Figma library exactly. */
.setup-screen { background: var(--color-neutral-100); }
/* Status bar blends into the gray frame (see settings.css for the technique). */
.setup-screen .status-bar { background: var(--color-neutral-100); }
.setup-screen .statusbar-svg { mix-blend-mode: multiply; }

/* App bar: back (left) + Skip (right) */
.setup-appbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; box-sizing: border-box; }
.setup-appbar .back { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
/* Back arrow ships white; tint it to the same Neutral/900 as the Skip label. */
.setup-appbar .back img { width: 24px; height: 24px; display: block; filter: brightness(0) invert(0.09); }
.setup-appbar .skip { font-family: var(--font-supreme); font-size: 16px; letter-spacing: -0.5px; color: var(--color-neutral-900); text-decoration: none; }

/* Title (Display/D1) + optional subtitle (Body/Regular) */
.setup-title { padding: 8px 16px 24px; }
.setup-title h1 { margin: 0; font-family: var(--font-supreme-bold); font-size: 32px; line-height: 1.2; letter-spacing: -1.5px; color: var(--color-black); }
.setup-title p { margin: 8px 0 0; font-family: var(--font-supreme); font-size: 15px; line-height: 1.4; letter-spacing: -0.5px; color: var(--color-neutral-500); }

.setup-body { padding: 0 12px 24px; display: flex; flex-direction: column; gap: 32px; }
.setup-sec { display: flex; flex-direction: column; gap: 8px; }

/* Arriving on a step, the cards ripple up one after the other (the step change itself
   is a hard cut, so this is what gives the page its entrance). */
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } }
.setup-body :is(.card-sel, .toggle-btn, .diff-seg, .chip-sel, .mode-card) {
  animation: card-in .42s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--sec, 0ms) + var(--i, 0) * 55ms);
}
.setup-body > .setup-sec:nth-child(2) { --sec: 130ms; }
.setup-body > .setup-sec:nth-child(3) { --sec: 260ms; }
.setup-body :is(.card-list, .toggle-row, .diff-row, .chip-row, .mode-scroll) > *:nth-child(2) { --i: 1; }
.setup-body :is(.card-list, .toggle-row, .diff-row, .chip-row, .mode-scroll) > *:nth-child(3) { --i: 2; }
.setup-body :is(.card-list, .toggle-row, .diff-row, .chip-row, .mode-scroll) > *:nth-child(4) { --i: 3; }
.setup-body :is(.card-list, .toggle-row, .diff-row, .chip-row, .mode-scroll) > *:nth-child(5) { --i: 4; }
@media (prefers-reduced-motion: reduce) {
  .setup-body :is(.card-sel, .toggle-btn, .diff-seg, .chip-sel, .mode-card) { animation: none; }
}
.setup-sec-label { margin: 0; padding: 0 12px; font-family: var(--font-supreme); font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-neutral-700); }

/* Shared default card shadow (연한카드) + the selected fill (gradient + drop
   shadow + white inner glow) registered in the Figma library. */
.card-sel, .toggle-btn, .diff-seg { box-shadow: 0 14px 54px 10px rgba(0,0,0,0.03); }
.card-sel.sel, .toggle-btn.sel, .diff-seg.sel, .chip-sel.sel, .mode-card.sel {
  background: linear-gradient(180deg, #FA3030 48%, #FE6E3C 77.6%, #FEC389 100.5%, #D1FEFF 107.5%);
  box-shadow: 0 15px 58.32px 10px rgba(0,0,0,0.05), inset 0 0 16px 6px rgba(255,255,255,0.6);
}

/* Card-select (Today's Goal, Condition) */
.card-list { display: flex; flex-direction: column; gap: 4px; }
.card-sel {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
  background: #fff; border: none; border-radius: 20px; padding: 16px 20px;
}
.card-sel .cs-title { margin: 0; font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: var(--color-black); }
.card-sel .cs-desc { margin: 0; font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px; color: var(--color-neutral-600); }
.card-sel.sel .cs-title { color: #fff; }
.card-sel.sel .cs-desc { color: var(--color-neutral-100); }
/* Selected card carries the check badge (node 9:9851): 28px circle, vertically centred
   at the card's right padding. The mark itself is the shared one in main.css. */
.card-sel .ob-check { right: 8px; top: 50%; margin-top: -26px; }

/* Indoor/Outdoor toggle + Difficulty 3-segment */
.toggle-row { display: flex; gap: 4px; }
.toggle-btn { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; box-sizing: border-box; cursor: pointer; background: #fff; border: none; border-radius: 16px; padding: 16px 20px; }
.toggle-btn img { width: 34px; height: 34px; display: block; }
.toggle-btn span { font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: var(--color-black); }
.toggle-btn.sel span { color: #fff; }
.toggle-btn.sel img { filter: brightness(0) invert(1); }

.diff-row { display: flex; gap: 4px; }
.diff-seg { flex: 1; display: flex; align-items: center; justify-content: center; height: 66px; box-sizing: border-box; cursor: pointer; background: #fff; border: none; border-radius: 16px; font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: var(--color-black); }
.diff-seg.sel { color: #fff; }

/* Injury chips */
.chip-rows { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.chip-sel { display: inline-flex; align-items: center; box-sizing: border-box; cursor: pointer; background: #fff; border: none; border-radius: 80px; padding: 6px 12px; font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px; color: var(--color-neutral-600); box-shadow: 0 0 2px rgba(0,0,0,0.12); }
/* The chips are small, so the library's 16/6 inner glow blows them out white —
   keep the same look at a fraction of the radius. */
.chip-sel.sel { color: #fff; box-shadow: 0 4px 12px rgba(250,48,48,0.22), inset 0 0 6px 1px rgba(255,255,255,0.35); }

/* Injury graphic (video) + platform */
/* Figure runs 312x554 from y=180 (node 338:19737) — it overflows the stage and sits
   behind the chips, and multiply drops the clip's white backing into the gray frame so
   no box edge shows. */
.injury-stage { position: relative; height: 404px; margin-top: -42px; }
.injury-stage video {
  /* Hidden until it is genuinely running — see the script on the page. A video that has
     not started draws the platform's start button over itself, and at this size that is
     a play triangle across most of the screen. */
  visibility: hidden;
  position: absolute; top: 0; left: 50%; margin-left: -156px;
  width: 312px; height: 554px; object-fit: cover; display: block;
  mix-blend-mode: multiply;
  filter: saturate(1.55) contrast(1.05);   /* multiply mutes the clip — push the colour back */
  /* …and the edges fade out, so even the clip's own lighting can't draw a box. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                      linear-gradient(to bottom, transparent, #000 10%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Effect layer sits ON TOP of the clip (node 338:19742/19755/19753): a soft glow, the
   elliptical stroke platform whose opacity falls to 0 toward the back, and the
   left-right icon saying the figure can be spun. */
.injury-glow { position: absolute; top: 288px; left: 50%; transform: translateX(-50%); width: 380px; height: 150px; pointer-events: none; background: radial-gradient(closest-side, rgba(255,255,255,0.85), rgba(255,255,255,0)); }
.injury-plate { position: absolute; top: 333px; left: 50%; margin-left: -164px; width: 328px; height: 44.57px; pointer-events: none; }
.injury-turn { position: absolute; top: 362px; left: 50%; margin-left: -8px; width: 24px; height: 24px; pointer-events: none; filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,0.25)); }
/* Frosted panel over the lower legs/feet: sits above the clip but below the chips (which
   live later in the DOM), so the feet blur out while the chips stay crisp. */
.injury-scrim { position: absolute; top: 360px; left: -20px; right: -20px; height: 240px; pointer-events: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  background: linear-gradient(to bottom, rgba(242,242,242,0) 0%, rgba(242,242,242,0.55) 55%, rgba(242,242,242,0.9) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
          mask-image: linear-gradient(to bottom, transparent, #000 40%); }

/* Body regions: the same ring used on Records/Progress, as a tap target over the figure. */
.injury-map { position: absolute; top: 0; left: 50%; margin-left: -156px; width: 312px; height: 554px; cursor: pointer; }
.body-hot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: none; background: none; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.body-hot img { width: 38px; height: 38px; opacity: 0; transition: opacity .2s ease, transform .2s ease; transform: scale(.6); }
.body-hot.sel img { opacity: 1; transform: scale(1); filter: drop-shadow(0 2px 8px rgba(250,48,48,0.45)); }

/* Assist Mode — horizontal scroll of figure cards */
.mode-scroll { display: flex; gap: 8px; overflow-x: auto; margin: -10px -12px 0; padding: 10px 12px 18px; scrollbar-width: none; }
.mode-scroll::-webkit-scrollbar { display: none; }
.mode-card {
  position: relative; flex: 0 0 200px; height: 200px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  text-align: left; cursor: pointer; overflow: hidden;
  background: #fff; border: none; border-radius: 20px; padding: 16px;
}
/* Default cards use the pre-tinted art; a selected card takes the Newton gradient with
   the natural photo laid over it in plus-lighter, plus the library's selected shadow. */
/* Art is supplied square at card size, so it just fills the 200x200 frame. */
/* Art fills the card width and is pinned to the top (subject is flush to the top edge). */
.mode-card .fig { position: absolute; inset: 0; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; }
/* The selected art is a full card-sized image (gradient baked in) — fill it edge to edge,
   no blend, and lay the library's white inner glow (selected effect) over the top. */
.mode-card .fig-sel { background-size: cover; background-position: center; box-shadow: inset 0 0 16px 6px rgba(255,255,255,0.6); }
/* Cross-faded, not display-swapped. `display: none` means the browser never fetches that
   background at all, so the FIRST tap on a card was a 200-350KB PNG being downloaded
   before anything could change — the blink and the lag. Both layers are laid down at
   load now (an opacity-0 background still loads), and selecting is a fade between two
   pictures that are already there. */
.mode-card .fig, .mode-card .fig-sel { transition: opacity .18s ease; }
.mode-card .fig-sel { opacity: 0; }
.mode-card.sel .fig { opacity: 0; }
.mode-card.sel .fig-sel { opacity: 1; }
/* Tighter, lighter elevation than the shared library shadow — the wide 58px/10px-spread
   one read as a hard grey band around the card. */
.mode-card.sel { box-shadow: 0 5px 14px rgba(0,0,0,0.10), inset 0 0 16px 6px rgba(255,255,255,0.6); }
.mode-card .mc-title { position: relative; margin: 0; font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: var(--color-black); }
.mode-card .mc-desc { position: relative; margin: 0; font-family: var(--font-supreme); font-size: 13px; line-height: 1.2; letter-spacing: -0.5px; color: var(--color-neutral-500); }
.mode-card.sel .mc-title, .mode-card.sel .mc-desc { color: #fff; }
/* Recommended badge — top right (node 338:19831) */
.mode-card .mc-badge { position: absolute; top: 16px; right: 16px; z-index: 2; padding: 4px 8px; border-radius: 80px; background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(0,0,0,0.12); font-family: var(--font-supreme-medium); font-size: 12px; line-height: 1.2; letter-spacing: -0.5px; color: var(--color-neutral-600); white-space: nowrap; }
.mode-card.sel .mc-badge { opacity: 0; }             /* the check takes its place */
/* The mode card keeps its own slot for the tick so the badge it replaces can sit in the
   same corner; the mark is drawn into it (main.css) rather than faded in as an image. */
.mode-card .mc-check { position: absolute; top: 4px; right: 4px; z-index: 3; width: 52px; height: 52px; }
.mode-card .mc-check .ob-check { top: 0; right: 0; }

/* Bottom step bar (node 385:3263). The active step sits at the LEFT edge with the rest
   trailing off to the right; a Next button on the right lights up white once the page's
   answers are in. Moving on shifts every title one slot to the left. */
.setup-stepbar { justify-content: space-between; gap: 0; padding: 12px 16px 0; box-sizing: border-box; }
.setup-stepbar .sb-row { display: flex; align-items: center; gap: 56px; width: 100%; height: 32px; }
/* Trailing steps dissolve at the right edge instead of being hard-cut mid-word, so a step
   is either legibly in view or gone (no "Inju…" fragment). */
/* `clip`, not `hidden`. Hidden still makes a scroll container, and a scroll container
   scrolls itself when something inside it takes focus — tap a step title on a phone and
   the strip can shift left under its own steam, which is the active title losing its
   first letters off the edge. Clip cannot scroll at all. */
.setup-stepbar .steps-wrap { flex: 1 1 auto; min-width: 0; height: 24px; overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 82%);
          mask-image: linear-gradient(to right, #000 62%, transparent 82%); }
.setup-stepbar .steps { position: relative; display: inline-flex; align-items: center; gap: 24px; white-space: nowrap; }
.setup-stepbar .step { flex: none; font-family: var(--font-supreme); font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-neutral-500); text-decoration: none; }
.setup-stepbar .steps.placed .step { transition: color .45s ease, font-size .45s ease, translate .55s cubic-bezier(.4,0,.2,1); }
.setup-stepbar .step.active { font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: #fff; }

/* Next: Bold 22 Neutral/500 until the step is answered, then white (node 385:3266). */
.setup-stepbar .sb-next { flex: none; display: flex; align-items: center; gap: 2px; font-family: var(--font-supreme-bold); font-size: 22px; line-height: 1.2; letter-spacing: -1px; color: var(--color-neutral-500); text-decoration: none; cursor: default; transition: color .3s ease; }
.setup-stepbar .sb-next img { width: 13px; height: 12px; display: block; margin: 0 5px; }
.setup-stepbar .sb-next.ready { color: #fff; cursor: pointer; }
.setup-stepbar .sb-next.ready img { filter: brightness(0) invert(1); }

/* ── Setup Complete (node 338:20073) ──────────────────────────────────────── */
.sc-body { padding: 0 12px; display: flex; flex-direction: column; gap: 32px; }
.sc-sec { display: flex; flex-direction: column; gap: 8px; }
.sc-label { margin: 0; padding: 0 12px; font-family: var(--font-supreme); font-size: 16px; line-height: 1.5; letter-spacing: -0.5px; color: var(--color-neutral-700); }
/* Pack card: 85px thumbnail + title/meta */
.sc-pack { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 20px; padding: 8px; }
.sc-thumb { flex: none; width: 85px; height: 85px; border-radius: 16px; background-position: center; background-size: cover; }
.sc-pack-title { margin: 0; font-family: var(--font-supreme-bold); font-size: 18px; line-height: 1.2; letter-spacing: -0.54px; color: var(--color-black); }
.sc-pack-sub { margin: 4px 0 0; font-family: var(--font-supreme); font-size: 13px; line-height: 1.2; letter-spacing: -0.5px; color: var(--color-neutral-400); }
/* Setup summary list */
.sc-list { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 20px; padding: 4px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--color-neutral-100); border-radius: 16px; padding: 16px 8px 16px 16px; text-decoration: none; }
.sc-row-title { font-family: var(--font-supreme-bold); font-size: 18px; line-height: 1.2; letter-spacing: -0.54px; color: var(--color-black); }
.sc-row-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sc-row-val { font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-chev { flex: none; width: 24px; height: 24px; display: block; transform: rotate(90deg); }
/* Bottom bar: Later chip (left) + Start Now (right) */
.sc-bottom .sb-row { justify-content: space-between; gap: 12px; }
.sc-later { display: inline-flex; align-items: center; gap: 4px; background: var(--color-neutral-700); border-radius: 20px; padding: 4px 12px 4px 8px; text-decoration: none; }
.sc-later img { width: 24px; height: 24px; display: block; filter: brightness(0) invert(1); }
.sc-later span { font-family: var(--font-supreme-medium); font-size: 14px; letter-spacing: -0.56px; color: #fff; }

/* Setup Complete entrance: pack card + summary rows slide up, staggered. */
@keyframes sc-in { from { opacity: 0; transform: translateY(18px); } }
.sc-pack { animation: sc-in .5s cubic-bezier(.2,.7,.2,1) .1s both; }
.sc-list .sc-row { animation: sc-in .5s cubic-bezier(.2,.7,.2,1) both; }
.sc-list .sc-row:nth-child(1) { animation-delay: .22s; }
.sc-list .sc-row:nth-child(2) { animation-delay: .30s; }
.sc-list .sc-row:nth-child(3) { animation-delay: .38s; }
.sc-list .sc-row:nth-child(4) { animation-delay: .46s; }
@media (prefers-reduced-motion: reduce) { .sc-pack, .sc-list .sc-row { animation: none; } }

/* The write-your-own chip. Same shell as the seven printed ones — it only has to look
   like one more answer, not like a form. */
.chip-sel.chip-own { color: var(--color-neutral-500); }
.chip-sel.chip-own.sel { color: #fff; }
.chip-sel.chip-own.editing { padding: 6px 12px; }
.chip-sel.chip-own input {
  border: 0; outline: 0; background: none; padding: 0; min-width: 84px;
  font-family: var(--font-supreme); font-size: 14px; line-height: 1.4; letter-spacing: -0.42px;
  color: var(--color-black);
}
.chip-sel.chip-own input::placeholder { color: var(--color-neutral-400); }

/* Later's question. Two plain answers under the card's copy — the same 16px Supreme the
   rest of the flow answers in, one quiet and one the app's red. */
.sc-ask-row { display: flex; gap: 8px; margin-top: 20px; }
.sc-ask-btn {
  flex: 1; min-width: 0; border: 0; cursor: pointer;
  padding: 14px 12px; border-radius: 16px;
  background: var(--color-neutral-100); color: var(--color-neutral-700);
  font-family: var(--font-supreme-bold); font-size: 16px; line-height: 1.2; letter-spacing: -0.5px;
}
.sc-ask-btn.sc-ask-yes { background: var(--color-red); color: #fff; }
.sc-ask-btn:active { filter: brightness(0.94); }

/* Three wheels, not two: hours on a 12-hour face, minutes, and am/pm — the way a time you
   are agreeing to meet is read. The colon replaces the h/m labels. */
.sch-time .sch-colon { font-family: var(--font-supreme-bold); padding: 0 2px; }
.sch-time .sch-ampm { width: 56px; }
.sch-time .sch-ampm .op { font-size: 17px; }
/* The clock sits in a card here, where Main Workout has one already. */
.sch-screen .mw-panel { background: #fff; border-radius: 16px; padding: 4px 0; box-shadow: 0 14px 54px 10px rgba(0,0,0,0.03); }
/* The column centres its rows, which on an overflowing one means clipping it equally at
   both ends — the first chip lost its left half. Full width, and the row scrolls. */
.sch-screen .chip-rows { align-items: stretch; }
/* Seven days run wider than the frame, so the row scrolls instead of wrapping. No padding
   of its own — .setup-body already gives the column its gutter, and a second one inside a
   scroller reads as the first chip being cut. */
.sch-screen .chip-row { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.sch-screen .chip-row::-webkit-scrollbar { display: none; }
.sch-screen .chip-sel { flex: none; }