/* ============================================================
   Vita 365 — 주간 체크인, v2 skin (PR-4)

   Source: design/ui-redesign-prototype:demo/checkin.html.

   This restyles the EXISTING check-in form rather than replacing it —
   see checkin-v2.js for why the twelve stored fields could not be
   reshaped into the prototype's three input screens. Every rule needs
   an ancestor `.v2`.
   ============================================================ */

/* ─── Bridge: re-point the --vdw-* family at v2 values ───────
   check-in.css declares seven --vdw-* tokens on :root and every rule
   in that file reads them. This skin was overriding the rules one at a
   time instead, which left whatever it had not named yet on the cream
   palette — most visibly the slider TRACK, which is
   `background: var(--vdw-border)` and so stayed #E6DFCF while the thumb
   next to it was v2 green. Re-declaring the family here moves all of
   them at once, the same trick vita-v2.css uses for --vh-*. */
.v2 .vdw-checkin-shell {
  --vdw-bg:         var(--v2-bg);
  --vdw-card:       var(--v2-surface);
  --vdw-border:     var(--v2-line-2);
  --vdw-ink:        var(--v2-ink);
  --vdw-quiet:      var(--v2-ink-3);
  --vdw-forest:     var(--v2-brand-btn);
  --vdw-terracotta: var(--v2-bad);

  background: var(--v2-bg);
  color: var(--v2-ink);
  max-width: 620px;
}

/* Kill the serif — the v2 direction has none. */
.v2 .vdw-h1, .v2 .vdw-checkin-shell h1,
.v2 .vdw-checkin-shell h2, .v2 .vdw-submitting h2 {
  font-family: var(--v2-font) !important;
  letter-spacing: -0.02em;
}
.v2 .vdw-h1 { font-size: var(--v2-fs-title); font-weight: 700; }
.v2 .vdw-lede { color: var(--v2-ink-2); font-size: var(--v2-fs-sm); line-height: var(--v2-lh-loose); }

/* ─── Stepper header ────────────────────────────────────────── */
.ci-head { margin-bottom: 22px; }
.ci-head-top { display: flex; align-items: center; gap: 12px; }
.ci-head-top .x {
  color: var(--v2-ink-2); font-size: 22px; text-decoration: none;
  display: grid; place-items: center; width: 30px; height: 30px;
  margin-left: -4px; position: relative;
}
.ci-head-top .x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: max(44px, 100%); height: max(44px, 100%);
}
.ci-head-top .lbl {
  margin-left: auto; font-size: var(--v2-fs-caption); font-weight: 700;
  color: var(--v2-ink-3); font-variant-numeric: tabular-nums;
}
.ci-bar {
  height: 5px; border-radius: 999px; background: var(--v2-surface-sunken);
  margin-top: 12px; overflow: hidden;
}
.ci-bar i { display: block; height: 100%; background: var(--v2-brand); transition: width .3s ease; }

/* ─── Steps ─────────────────────────────────────────────────── */
.v2 .vdw-section {
  background: var(--v2-surface);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card);
  border: none;
  padding: 22px;
  margin: 0;
}
.v2 .vdw-section h2 { font-size: var(--v2-fs-section); font-weight: 700; margin: 0 0 6px; }
.v2 .vdw-section-hint { color: var(--v2-ink-3); font-size: var(--v2-fs-caption); line-height: var(--v2-lh-loose); }
.v2 .vdw-field label { color: var(--v2-ink-2); font-size: var(--v2-fs-caption); font-weight: 600; }
.v2 .vdw-field label .val { color: var(--v2-brand-ink); font-weight: 700; }

/* Inputs: 16px minimum, or iOS zooms the page on focus. */
.v2 .vdw-checkin-shell input[type="number"],
.v2 .vdw-checkin-shell input[type="text"],
.v2 .vdw-checkin-shell textarea {
  font-family: var(--v2-font);
  font-size: var(--v2-fs-control);
  border-radius: var(--v2-r-md);
  border: 1.5px solid var(--v2-line-2);
  background: var(--v2-surface);
  color: var(--v2-ink);
  padding: 12px 14px;
}
.v2 .vdw-checkin-shell input:focus-within,
.v2 .vdw-checkin-shell textarea:focus { border-color: var(--v2-brand-strong); }

.v2 .vdw-slider { accent-color: var(--v2-brand); }

/* Pain chips — the prototype's obstacle chips, same control. */
.v2 .vdw-chip, .v2 #vdwPainChips button {
  border-radius: var(--v2-r-pill);
  border: 1.5px solid var(--v2-line-2);
  background: var(--v2-surface);
  color: var(--v2-ink-2);
  font-family: var(--v2-font);
  font-size: var(--v2-fs-caption);
  font-weight: 600;
  padding: 9px 15px;
}
/* `.selected` is the class check-in.js actually toggles. This block only
   named the prototype's `[aria-pressed]` / `.is-active`, and since
   `.v2 .vdw-chip` and `.vdw-chip.selected` tie on specificity and this
   file loads second, the base green-fill rule in check-in.css lost —
   so picking a sore spot changed nothing on screen. The value still
   reached the payload, which is the worst version of the bug: the chip
   looked dead, so it got tapped again, which deselected it.
   check-in.js now mirrors the state into aria-pressed as well. */
.v2 .vdw-chip.selected, .v2 #vdwPainChips button.selected,
.v2 .vdw-chip[aria-pressed="true"], .v2 #vdwPainChips button[aria-pressed="true"],
.v2 .vdw-chip.is-active, .v2 #vdwPainChips button.is-active {
  background: var(--v2-brand-btn);
  border-color: var(--v2-brand-btn);
  color: #fff;
}

/* ─── Nav + submit ──────────────────────────────────────────── */
.ci-nav { display: flex; gap: 10px; margin-top: 16px; }

/* The Back/Next row rides the bottom of the viewport instead of the
   bottom of the card. Two separate things put it out of reach before:

   * Step 3 (체성분) is taller than a phone screen, so Next sat below
     the fold — and go() scrolls back to top on every step change, so
     it landed there again each time the step opened.
   * On a 375×667 screen steps 1 and 4 put Next inside the band the
     floating tab bar occupies. That bar is a sticky grid row, so it
     paints over whatever scrolls under it: the tap never reached the
     button, and hit-testing handed it to the 홈 tab underneath — the
     wizard didn't just stall, it navigated away.

   Pinning the row above the tab bar fixes both, and turns the two
   worst steps into no-scroll steps. Sticky rather than fixed so short
   steps (수면·피로) keep the buttons under the card where they read as
   part of it. */
.v2 #vdwForm .ci-nav {
  position: sticky;
  bottom: 10px;
  z-index: 2;
  padding: 12px 0;
  background: var(--v2-bg);
}
/* Same offset the tab bar reserves for itself in mypage.css: its grid
   row is --mp-bottom-h plus the home-indicator inset. Only below 880px,
   where that bar is displayed at all. */
@media (max-width: 880px) {
  .v2 #vdwForm .ci-nav {
    bottom: calc(var(--mp-bottom-h, 78px) + var(--v2-safe-bot, env(safe-area-inset-bottom, 0px)) + 6px);
  }
}
/* Softens the edge where the pinned row cuts across the card it is
   floating over, so it reads as a layer rather than a seam. */
.v2 #vdwForm .ci-nav::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 100%; height: 20px;
  background: linear-gradient(to top, var(--v2-bg), transparent);
  pointer-events: none;
}
.ci-back, .ci-next {
  border: none; cursor: pointer; font-family: var(--v2-font);
  font-size: var(--v2-fs-body); font-weight: 700; border-radius: var(--v2-r-md); padding: 15px 20px;
}
/* White with a hairline, not the inset fill. This row is pinned to the
   viewport, so it floats over a white card on the tall steps and over the
   page on the short ones — and --v2-surface-2 (#F4F6F5) against the page
   (#F6F7F6) is a two-point difference, i.e. no button at all. Steps 4 and
   5 showed "이전" as a bare word on the background. */
.ci-back {
  background: var(--v2-surface); color: var(--v2-ink);
  box-shadow: inset 0 0 0 1px var(--v2-line);
}
.ci-next { flex: 1; background: var(--v2-brand-btn); color: #fff; }
.ci-next:active, .ci-back:active { transform: scale(.985); }

/* Submit shares the nav row (see checkin-v2.js). */
.v2 .ci-nav > .vdw-actions { flex: 1; margin: 0; }
.v2 .vdw-actions { margin-top: 16px; }
.v2 .vdw-btn {
  background: var(--v2-brand-btn); color: #fff; border: none;
  border-radius: var(--v2-r-md); padding: 15px 20px;
  font-family: var(--v2-font); font-size: var(--v2-fs-body); font-weight: 700;
  width: 100%; justify-content: center;
}

/* ─── Result ("next week's adjustments") ────────────────────── */
/* check-in.css only ever gave this block `display: none/block` — it was
   a bare run of headings on the page background. Turning it into a card
   here without a padding to go with it left every child flush against
   the 28px rounded edge, the summary box included, so the corners
   clipped into it. */
.v2 .vdw-analysis {
  background: var(--v2-surface);
  border-radius: var(--v2-r-xl);
  box-shadow: var(--v2-sh-card);
  border: none;
  color: var(--v2-ink);
  padding: 22px;
}
.v2 .vdw-already-done {
  background: var(--v2-brand-tint);
  border-radius: var(--v2-r-lg);
  border: none;
  color: var(--v2-ink);
}
.v2 .vdw-spinner { border-top-color: var(--v2-brand); }
.v2 .vdw-error { color: var(--v2-bad); }
.v2 .vdw-back { color: var(--v2-brand-ink); font-weight: 600; }
/* The intro block, once checkin-v2.js has moved it inside step 1. */
.v2 .vdw-checkin-toplinks { display: flex; justify-content: flex-end; }
.v2 .vdw-section > .vdw-h1 { margin: 8px 0 6px; }
.v2 .vdw-section > .vdw-lede { margin: 0 0 20px; }