/* /mypage/schedule/ — the full programme, week by week.
   v2 tokens throughout: this screen was born on the new palette, so it
   carries none of the --vh-* bridge the Home widgets still need. */

.sch-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px calc(96px + var(--v2-safe-bot, 0px));
}

/* ─── Head ─────────────────────────────────────────────────── */
.sch-head { margin-bottom: 18px; }
.sch-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--v2-fs-caption); font-weight: 600; color: var(--v2-ink-3);
  text-decoration: none; margin-bottom: 10px;
}
.sch-back:hover { color: var(--v2-brand-ink); }
.sch-back i { font-size: 15px; }
.sch-head h1 {
  font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -.02em;
  color: var(--v2-ink); margin: 0;
}
.sch-meta {
  font-size: var(--v2-fs-caption); color: var(--v2-ink-3); font-weight: 600; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.sch-empty {
  background: var(--v2-surface); border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card); padding: 28px 20px;
  text-align: center; color: var(--v2-ink-3); font-size: var(--v2-fs-sm);
}

/* ─── Sections ─────────────────────────────────────────────── */
/* These are <section> elements, and assets/styles.css — which every
   /mypage shell loads for the marketing shell — sets
   `section { padding: clamp(64px, 10vw, 140px) 0 }`. Unset it, or each
   block here arrives with 64px of dead space above it. */
.sch-sec { margin-top: 22px; padding: 0; }
.sch-sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.sch-sec-head h2 {
  font-size: var(--v2-fs-h3); font-weight: 700; letter-spacing: -.02em;
  color: var(--v2-ink); margin: 0;
}
.sch-range {
  font-size: var(--v2-fs-micro); font-weight: 600; color: var(--v2-ink-3);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ─── Week strip ───────────────────────────────────────────── */
/* Seven days used to be a 7-column grid. On a phone that is ~46px per
   cell: the weekday, the date, the icon and a two-line workout name all
   fighting over a column narrower than the icon it contains, which is
   how "상체 + 코어…" ended up truncated on every single day.
   It is a snap carousel now — three days in view, swipe for the rest —
   and schedule.js scrolls today to the middle after each paint.
   `--sch-per-view` is the only number to change if that count moves. */
.sch-grid {
  --sch-per-view: 3;
  --sch-gap: 10px;
  position: relative;               /* offsetParent for centerToday() */
  display: flex; gap: var(--sch-gap);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Room for the card shadow and the focus ring, which a clipped
     scroller would otherwise shave off. */
  padding: 4px 2px 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sch-grid::-webkit-scrollbar { display: none; }
/* Desktop has the width for the whole week at once, so all seven fit and
   the scroller simply never overflows — same markup, no carousel. */
@media (min-width: 560px) {
  .sch-grid { --sch-per-view: 7; --sch-gap: 8px; scroll-snap-type: none; }
}
.sch-cell {
  flex: 0 0 calc((100% - (var(--sch-per-view) - 1) * var(--sch-gap)) / var(--sch-per-view));
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 8px 12px; border-radius: var(--v2-r-md);
  background: var(--v2-surface); box-shadow: var(--v2-sh-card);
  text-decoration: none; color: inherit; min-height: 118px;
  border: 1.5px solid transparent;
}
.sch-cell.is-actionable { cursor: pointer; transition: transform .12s ease; }
.sch-cell.is-actionable:active { transform: scale(.96); }
.sch-cell.is-actionable:focus-visible { outline: 2px solid var(--v2-brand); outline-offset: 2px; }
.sch-dow { font-size: var(--v2-fs-label); font-weight: 600; color: var(--v2-ink-3); }
.sch-date { font-size: var(--v2-fs-section); font-weight: 700; color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.sch-ic {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center; font-size: var(--v2-fs-h3);
  background: var(--v2-surface-2); color: var(--v2-ink-3);
  margin-top: 2px;
}
.sch-label {
  font-size: var(--v2-fs-caption); line-height: var(--v2-lh-tight); text-align: center; color: var(--v2-ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: keep-all; margin-top: 2px;
}

/* Day states. Rest keeps the plain card; the rest each take one signal
   so the week is legible without reading a single label. */
.sch-cell.done .sch-ic      { background: var(--v2-brand-tint); color: var(--v2-brand-strong); }
.sch-cell.done .sch-label   { color: var(--v2-brand-ink); }
.sch-cell.scheduled .sch-ic { background: var(--v2-surface-2); color: var(--v2-ink-2); }
.sch-cell.next              { border-color: var(--v2-c-move); }
.sch-cell.next .sch-ic      { background: var(--v2-c-move-tint); color: var(--v2-c-move); }
.sch-cell.today             { border-color: var(--v2-ink); }
.sch-cell.today .sch-ic     { background: var(--v2-ink); color: #fff; }

/* ─── Hero cards ───────────────────────────────────────────── */
.sch-hero-list { display: flex; flex-direction: column; gap: 10px; }
.sch-hero {
  display: flex; align-items: center; gap: 12px;
  background: var(--v2-surface); border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card); padding: 14px 16px;
  text-decoration: none; color: inherit;
}
.sch-hero.is-today    { border-left: 3px solid var(--v2-brand); }
.sch-hero.is-tomorrow { border-left: 3px solid var(--v2-line-2); }
.sch-hero.is-completed{ border-left: 3px solid var(--v2-brand-tint-2); }
.sch-hero.is-rest     { border-left: 3px solid var(--v2-line-2); }
.sch-hero-ic {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center; font-size: var(--v2-fs-section);
  background: var(--v2-brand-tint); color: var(--v2-brand-strong);
}
.sch-hero.is-rest .sch-hero-ic { background: var(--v2-surface-2); color: var(--v2-ink-3); }
.sch-hero-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sch-hero-label {
  font-size: var(--v2-fs-micro); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v2-ink-3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sch-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--v2-brand-tint); color: var(--v2-brand-ink);
  border-radius: var(--v2-r-pill); padding: 1px 7px;
  font-size: var(--v2-fs-micro); letter-spacing: 0; text-transform: none;
}
.sch-hero-title {
  font-size: var(--v2-fs-body); font-weight: 700; letter-spacing: -.015em;
  color: var(--v2-ink); word-break: keep-all;
}
.sch-hero-meta, .sch-hero-note { font-size: var(--v2-fs-label); color: var(--v2-ink-3); }
.sch-hero-note { line-height: var(--v2-lh-body); word-break: keep-all; }
.sch-hero-cta {
  font-size: var(--v2-fs-label); font-weight: 700; color: var(--v2-brand-ink);
  flex: none; white-space: nowrap;
}

/* ─── Row lists (previous weeks, past seasons) ─────────────── */
.sch-list {
  background: var(--v2-surface); border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card); padding: 6px 16px;
}
.sch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; font-size: var(--v2-fs-caption); color: var(--v2-ink-2);
  border-top: 1px solid var(--v2-line);
}
.sch-row:first-child { border-top: 0; }
.sch-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--v2-line-2);
}
.sch-dot.is-full { background: var(--v2-brand); }
.sch-row-meta { color: var(--v2-ink-3); font-size: var(--v2-fs-label); }

/* ─── Remaining-programme note ─────────────────────────────── */
.sch-note {
  background: var(--v2-brand-tint); border-radius: var(--v2-r-lg);
  padding: 16px 18px;
}
.sch-note-head { display: flex; gap: 12px; align-items: flex-start; }
.sch-note-ic {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; font-size: var(--v2-fs-h3);
  background: var(--v2-surface); color: var(--v2-brand-strong);
}
.sch-note-title {
  font-size: var(--v2-fs-sm); font-weight: 700; color: var(--v2-ink);
  letter-spacing: -.01em; word-break: keep-all;
}
.sch-note-body {
  font-size: var(--v2-fs-label); color: var(--v2-ink-2); line-height: var(--v2-lh-body);
  margin-top: 3px; word-break: keep-all;
}
.sch-progress {
  height: 6px; border-radius: var(--v2-r-pill); margin-top: 14px;
  background: var(--v2-surface); overflow: hidden;
}
.sch-progress > span {
  display: block; height: 100%; border-radius: var(--v2-r-pill);
  background: var(--v2-brand);
}
.sch-progress-label {
  font-size: var(--v2-fs-micro); font-weight: 600; color: var(--v2-brand-ink);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  /* Still three in view — the cards are what got roomier, not fewer.
     Only the gap tightens so the third card keeps a usable width. */
  .sch-grid { --sch-gap: 8px; }
  .sch-cell { min-height: 112px; padding: 12px 6px 10px; }
  .sch-hero-cta { font-size: var(--v2-fs-micro); }
}