/* ============================================================
   Vita 365 — 플랜 screen (PR-3 of docs/PLAN_UI_REDESIGN_MIGRATION.md)

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

   Only the pieces this screen introduces live here. Everything it
   shares with the home — .v2-sec, .v2-card, .v2-row, .v2-btn, the
   --vh-* bridge — comes from /assets/vita-v2.css, and the 5-tab bar
   from mypage.css. Every rule requires an ancestor `.v2`.
   ============================================================ */

.v2 .plan-wrap {
  background: var(--v2-bg);
  font-family: var(--v2-font);
  color: var(--v2-ink);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 20px 40px;
}
@media (min-width: 881px) {
  .v2 .plan-wrap { padding: 0 28px 60px; max-width: 720px; }
}

/* ─── Sticky header: title + week strip ─────────────────────── */
.plan-head {
  position: sticky; top: 0; z-index: 5;
  background: rgba(246, 247, 246, .92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  margin: 0 -20px;
  padding: calc(var(--v2-safe-top) + 16px) 20px 12px;
  border-bottom: 1px solid var(--v2-line);
}
@media (min-width: 881px) { .plan-head { margin: 0 -28px; padding-left: 28px; padding-right: 28px; } }
.plan-head-top { display: flex; align-items: baseline; gap: 10px; }
.plan-head-top h1 { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.plan-head-top .plan-wk { font-size: var(--v2-fs-caption); color: var(--v2-ink-3); font-weight: 500; margin-left: auto; }

/* Week strip — seven days, tap to switch. */
.plan-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.plan-day {
  background: none; border: none; cursor: pointer; font-family: var(--v2-font);
  padding: 7px 0 8px; border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: background .15s ease;
  position: relative;   /* for the 44px hit area below */
}
.plan-day .dw { font-size: var(--v2-fs-micro); color: var(--v2-ink-3); font-weight: 600; }
.plan-day .dn { font-size: var(--v2-fs-body); font-weight: 600; color: var(--v2-ink); }
/* Two dots per day: meals logged, workout done. */
.plan-day .dots { display: flex; gap: 3px; }
.plan-day .dt { width: 5px; height: 5px; border-radius: 50%; background: var(--v2-line-2); }
.plan-day .dt.ok { background: var(--v2-brand); }
/* Workout dot states. A rest day keeps the plain faint dot; a day with
   training still ahead is outlined so "nothing planned" and "not done
   yet" stop looking identical, and the next one up is filled clay. */
.plan-day .dt.w-done  { background: var(--v2-brand); }
.plan-day .dt.w-sched { background: transparent; box-shadow: inset 0 0 0 1.5px var(--v2-ink-3); }
.plan-day .dt.w-next  { background: var(--v2-c-move); }
.plan-day.sel { background: var(--v2-ink); }
.plan-day.sel .dw, .plan-day.sel .dn { color: #fff; }
.plan-day.sel .dt { background: rgba(255,255,255,.45); }
.plan-day.sel .dt.ok { background: #fff; }
.plan-day.sel .dt.w-done  { background: #fff; }
.plan-day.sel .dt.w-sched { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8); }
.plan-day.sel .dt.w-next  { background: var(--v2-c-move); }
.plan-day[disabled] { opacity: .4; cursor: default; }
/* iOS HIG 44pt. Each selector needs its own ::after — a shared one
   would hand the absolute positioning to the element itself. */
.plan-day::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(44px, 100%); height: max(44px, 100%);
}

/* ─── Daily summary: ring + macro split ─────────────────────── */
.plan-sum {
  background: var(--v2-surface); border-radius: var(--v2-r-xl);
  box-shadow: var(--v2-sh-card); padding: 22px; margin-top: 16px;
}
.plan-sum-top { display: flex; align-items: center; gap: 20px; }
.plan-ring {
  width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; position: relative;
}
.plan-ring::before {
  content: ''; position: absolute; inset: 11px; border-radius: 50%;
  background: var(--v2-surface);
}
.plan-ring .in { position: relative; text-align: center; }
.plan-ring .in b {
  display: block; font-size: var(--v2-fs-title); font-weight: 700;
  letter-spacing: var(--v2-num-tracking); line-height: var(--v2-lh-num);
}
.plan-ring .in span { display: block; font-size: var(--v2-fs-micro); color: var(--v2-ink-3); font-weight: 500; }
.plan-macros { flex: 1; min-width: 0; }
.plan-mbar {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--v2-surface-sunken); margin-bottom: 13px;
}
.plan-mbar i { display: block; height: 100%; }
.plan-mrow { display: flex; align-items: center; gap: 8px; font-size: var(--v2-fs-caption); padding: 3.5px 0; }
.plan-mrow .dot { width: 8px; height: 8px; border-radius: 3px; flex-shrink: 0; }
/* "탄수화물" is long enough to wrap onto two lines at 375px once the
   value column takes its share; neither side should break. */
.plan-mrow { white-space: nowrap; }
.plan-mrow .v { margin-left: auto; color: var(--v2-ink-3); padding-left: 6px; }
.plan-mrow .v b { color: var(--v2-ink); font-weight: 600; }
/* Profile incomplete → no ring at all rather than a fake one. Mirrors
   what Plate does: never draw a target we could not compute. */
.plan-sum-empty { font-size: var(--v2-fs-caption); line-height: var(--v2-lh-loose); color: var(--v2-ink-2); }
.plan-sum-empty a { color: var(--v2-brand-ink); font-weight: 600; }

/* ─── Meal rows ─────────────────────────────────────────────── */
.plan-meal {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  cursor: pointer; transition: background .12s ease; text-decoration: none;
  color: inherit; width: 100%; border: none; background: none;
  font-family: var(--v2-font); text-align: left;
}
.plan-meal:active { background: var(--v2-surface-2); }
.plan-meal + .plan-meal { border-top: 1px solid var(--v2-line); }
.plan-meal .thumb {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--v2-fs-subtitle);
  background: var(--v2-surface-2); color: var(--v2-ink-3);
  overflow: hidden;
}
.plan-meal .thumb.has { background: var(--v2-brand-tint); color: var(--v2-brand); }
.plan-meal .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plan-meal .b { flex: 1; min-width: 0; }
.plan-meal .slot { display: block; font-size: var(--v2-fs-micro); color: var(--v2-ink-3); font-weight: 600; letter-spacing: .02em; }
.plan-meal .t { display: block; font-size: var(--v2-fs-body); font-weight: 600; margin-top: 2px; }
.plan-meal .kc { display: block; font-size: var(--v2-fs-caption); color: var(--v2-ink-3); margin-top: 2px; }
.plan-meal .chev { color: var(--v2-line-2); font-size: var(--v2-ic-md); flex-shrink: 0; }
.plan-meal.empty .t { color: var(--v2-ink-3); font-weight: 500; }
.plan-meal .add {
  width: 32px; height: 32px; border-radius: var(--v2-r-pill); flex-shrink: 0;
  background: var(--v2-brand-tint); color: var(--v2-brand-ink);
  display: grid; place-items: center; font-size: var(--v2-fs-section);
  border: none; cursor: pointer; position: relative;
}
.plan-meal .add::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(44px, 100%); height: max(44px, 100%);
}

/* ─── Workout row ───────────────────────────────────────────── */
.plan-wo { padding: 18px; display: flex; align-items: center; gap: 14px; }
.plan-wo .ic {
  width: 46px; height: 46px; border-radius: 14px; background: var(--v2-brand-tint);
  color: var(--v2-brand); display: grid; place-items: center; font-size: var(--v2-ic-lg); flex-shrink: 0;
}
.plan-wo .b { flex: 1; min-width: 0; }
.plan-wo .t { display: block; font-size: var(--v2-fs-body); font-weight: 600; }
.plan-wo .s { display: block; font-size: var(--v2-fs-caption); color: var(--v2-ink-3); margin-top: 3px; }
.plan-wo-cta {
  border: none; cursor: pointer; font-family: var(--v2-font);
  background: var(--v2-brand-btn); color: #fff;
  font-size: var(--v2-fs-sm); font-weight: 600; padding: 11px 18px;
  border-radius: var(--v2-r-md); flex-shrink: 0;
}
.plan-wo-cta:active { transform: scale(.97); }
.plan-wo.done .t { color: var(--v2-ink-3); text-decoration: line-through; text-decoration-color: var(--v2-line-2); }

/* ─── Body-metric tiles ─────────────────────────────────────── */
.plan-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.plan-tile {
  background: var(--v2-surface); border-radius: var(--v2-r-lg); box-shadow: var(--v2-sh-card);
  padding: 17px; cursor: pointer; border: none; font-family: var(--v2-font);
  text-align: left; display: flex; flex-direction: column; gap: 10px;
  color: inherit; text-decoration: none;
}
.plan-tile:active { transform: scale(.99); }
.plan-tile .th { display: flex; align-items: center; gap: 8px; }
.plan-tile .th i { font-size: 17px; color: var(--v2-ink-3); }
.plan-tile .th span { font-size: var(--v2-fs-label); font-weight: 600; color: var(--v2-ink-2); }
.plan-tile .big {
  font-size: var(--v2-fs-title); font-weight: 700;
  letter-spacing: var(--v2-num-tracking); line-height: 1;
}
.plan-tile .big small { font-size: var(--v2-fs-caption); color: var(--v2-ink-3); font-weight: 500; }
.plan-tile .delta {
  font-size: var(--v2-fs-label); font-weight: 600; color: var(--v2-brand-ink);
  display: flex; align-items: center; gap: 3px;
}
.plan-spark { height: 30px; display: block; width: 100%; }
.plan-tile .cap { font-size: var(--v2-fs-micro); line-height: var(--v2-lh-body); color: var(--v2-ink-3); font-weight: 500; }
/* The streak tile is a read-out, not a destination — nothing to press. */
.plan-tile.static { cursor: default; }
.plan-tile.static:active { transform: none; }

/* BMI band scale. The bar is the 15→35 BMI range laid out linearly, so
   the colour stops sit where bmiBand() puts them: 18.5 / 25 / 30 map to
   17.5% / 50% / 75%. The marker uses the same scale. Move a cut-off in
   units.js and these stops have to move with it, or the marker sits in
   a colour the label contradicts. */
.plan-bmibar {
  position: relative; display: block; height: 6px; border-radius: 999px;
  background: linear-gradient(to right,
    var(--v2-warn)   0 17.5%,
    var(--v2-brand)  17.5% 50%,
    var(--v2-c-move) 50% 75%,
    var(--v2-bad)    75% 100%);
}
.plan-bmibar i {
  position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--v2-surface); box-shadow: 0 0 0 2.5px var(--v2-ink);
}

/* Streak week: Mon→Sun, one box per day. */
.plan-week7 { display: flex; gap: 3px; }
.plan-week7 .d {
  flex: 1; min-width: 0; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-size: var(--v2-fs-micro); font-weight: 600;
  background: var(--v2-surface-sunken); color: var(--v2-ink-3);
}
.plan-week7 .d.ok { background: var(--v2-brand); color: #fff; }
.plan-week7 .d.future { background: var(--v2-surface-2); color: var(--v2-line-2); }
.plan-week7 .d.today { box-shadow: inset 0 0 0 1.5px var(--v2-ink); }

/* Check-in tile — tinted only while this week's is still outstanding. */
.plan-tile.due { background: var(--v2-brand-tint); }
.plan-tile.due .th i, .plan-tile.due .th span { color: var(--v2-brand-ink); }
.plan-tile .msg { font-size: var(--v2-fs-caption); font-weight: 600; line-height: var(--v2-lh-body); }
.plan-tile .go {
  font-size: var(--v2-fs-label); font-weight: 600; color: var(--v2-brand-ink);
  display: flex; align-items: center; gap: 4px;
}

/* ─── Badges ────────────────────────────────────────────────
   Two columns on phones: the names are English in every language
   ("Foundation Champion"), so four across a 375px screen is ~77px a
   card. Four across only once the wrap has desktop room. */
.plan-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (min-width: 881px) { .plan-badges { grid-template-columns: repeat(4, 1fr); } }
.plan-badge {
  background: var(--v2-surface); border-radius: var(--v2-r-md);
  box-shadow: var(--v2-sh-card); padding: 15px 10px; text-align: center;
}
.plan-badge .ic {
  width: 44px; height: 44px; border-radius: 14px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 9px; background: var(--v2-surface-sunken); color: var(--v2-ink-3);
}
.plan-badge .ic i { font-size: 23px; }
.plan-badge.unlocked .ic    { background: var(--v2-brand); color: #fff; }
.plan-badge.in_progress .ic { background: var(--v2-brand-tint); color: var(--v2-brand-ink); }
/* The little padlock, so "locked" is not carried by grey alone. */
.plan-badge .lk {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--v2-surface); color: var(--v2-ink-3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--v2-line);
}
.plan-badge .lk i { font-size: 10px; }
.plan-badge .wk { font-size: var(--v2-fs-micro); font-weight: 700; letter-spacing: .06em; color: var(--v2-ink-3); }
.plan-badge.unlocked .wk, .plan-badge.in_progress .wk { color: var(--v2-brand-ink); }
.plan-badge .nm { font-size: var(--v2-fs-label); font-weight: 600; line-height: var(--v2-lh-snug); margin-top: 3px; }
.plan-badge.locked .nm { color: var(--v2-ink-2); }

/* One-shot pulse on a badge this page load just unlocked. */
@keyframes planBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.plan-badge .ic.fresh { animation: planBadgePulse .6s ease-out; box-shadow: 0 0 0 5px var(--v2-brand-tint); }
@media (prefers-reduced-motion: reduce) {
  .plan-badge .ic.fresh { animation: none; }
}

/* ─── My plan: training profile + 12-week roadmap ───────────
   Absorbed from Home, where its stylesheet was deleted alongside the
   12-week donut's in #570 and the card had been rendering as a raw
   browser-default button since. Rewritten on --v2-* rather than
   restored, because the --vh-* original was written for the cream
   palette. */
.plan-my-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 17px 18px; background: none; border: none; cursor: pointer;
  font-family: var(--v2-font); font-size: var(--v2-fs-sm); font-weight: 600;
  color: var(--v2-ink); text-align: left;
}
.plan-my-chev { font-size: var(--v2-ic-md); color: var(--v2-ink-3); transition: transform .18s ease; }
.plan-my-toggle[aria-expanded="true"] .plan-my-chev { transform: rotate(180deg); }
.plan-my-body { padding: 0 18px 18px; }
.plan-my-loading, .plan-my-empty { font-size: var(--v2-fs-caption); color: var(--v2-ink-3); padding: 6px 0 10px; }

/* Profile chips — one per answer from the training survey. */
.plan-my-pf { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.plan-my-pf > div {
  display: flex; flex-direction: column; gap: 2px; min-width: 90px;
  background: var(--v2-surface-2); border-radius: var(--v2-r-sm); padding: 9px 12px;
}
.plan-my-pf .k { font-size: var(--v2-fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-brand-ink); }
.plan-my-pf .v { font-size: var(--v2-fs-caption); font-weight: 500; }

/* Roadmap: the phase strip, then the current phase in detail. */
.plan-my-head { display: flex; align-items: baseline; gap: 8px; font-size: var(--v2-fs-sm); font-weight: 600; margin-bottom: 10px; }
.plan-my-head .wk { font-size: var(--v2-fs-label); font-weight: 500; color: var(--v2-ink-3); }
.plan-my-phases { display: flex; gap: 5px; margin-bottom: 12px; }
.plan-my-phase {
  flex: 1; min-width: 0; border-radius: var(--v2-r-sm); padding: 9px 10px;
  background: var(--v2-surface-2); display: flex; flex-direction: column; gap: 2px;
}
.plan-my-phase .nm { font-size: var(--v2-fs-label); font-weight: 600; }
.plan-my-phase .wk { font-size: var(--v2-fs-micro); color: var(--v2-ink-3); }
.plan-my-phase.current { background: var(--v2-brand-btn); color: #fff; }
.plan-my-phase.current .wk { color: rgba(255,255,255,.8); }
.plan-my-phase.done { opacity: .55; }
.plan-my-detail { background: var(--v2-surface-2); border-radius: var(--v2-r-md); padding: 13px 14px; }
.plan-my-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--v2-fs-caption); margin-bottom: 9px; }
.plan-my-row > span:first-child { color: var(--v2-brand-ink); font-weight: 600; flex-shrink: 0; }
.plan-my-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.plan-my-chips span {
  font-size: var(--v2-fs-label); background: var(--v2-surface); border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-pill); padding: 4px 10px;
}
.plan-my-ms { margin: 0; padding-left: 18px; font-size: var(--v2-fs-caption); color: var(--v2-ink-2); }
.plan-my-ms li { margin-bottom: 4px; }

/* Actions. Every row of buttons on this app carries its own padding and
   a ≥10px gap rather than relying on flex defaults. */
.plan-my-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0 4px; }
.plan-my-btn {
  font-family: var(--v2-font); font-size: var(--v2-fs-caption); font-weight: 600;
  padding: 10px 16px; border-radius: var(--v2-r-pill); border: 1px solid transparent;
  background: var(--v2-brand-btn); color: #fff; text-decoration: none; cursor: pointer;
}
.plan-my-btn.ghost { background: none; color: var(--v2-ink-2); border-color: var(--v2-line-2); }
.plan-my-btn:disabled { opacity: .5; cursor: wait; }

.plan-empty { padding: 18px; font-size: var(--v2-fs-caption); color: var(--v2-ink-3); }
.plan-skel { border-radius: var(--v2-r-lg); background: var(--v2-surface-2); }