/* prep.css - 다음 주 준비. Owner: slice S7. Every selector starts with .nx- (CONTRACT_shell.md 6.2, 6.3); tokens and u- parts live in app.css. */

/* ---- nx- : the flow frame, 1 / 3 돌아보기, 2 / 3 다음 주 밥상 (slice S7a, prep_wireframe.html) ---- */
/* A full-screen flow (audit F44): no tab bar. The pages and nav#tabs are siblings under body. */
.nx-pg:not([hidden]) ~ .tabs { display:none; }
/* app.css gives these pages room for the old fixed CTA; the dock is in the flow now. */
.nx-pg[data-pg] { padding-bottom:0; }
.nx-root { display:flex; flex-direction:column; min-height:calc(100vh - 62px); }
.nx-head { margin:0 2px 14px; }
.nx-bar { display:flex; gap:5px; margin-bottom:4px; }
.nx-bar i { flex:1; height:6px; border-radius:3px; background:var(--line); }
.nx-bar i.nx-on { background:var(--accent); }
.nx-barl { display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-s); color:var(--sub); }
.nx-barl b { color:var(--ink); }
.nx-dock { position:sticky; bottom:0; z-index:2; margin:auto 0 0; padding:12px 0 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 30%); }
.nx-cta { border-radius:999px; font-size:var(--fs-body); font-weight:700; }

/* 1 / 3 돌아보기 */
.nx-card { padding:4px 16px; }
.nx-h { margin:12px 0 4px; font-size:var(--fs-body); font-weight:700; letter-spacing:-.2px; }
.nx-h small { margin-left:4px; font-size:var(--fs-s); font-weight:500; color:var(--sub); }
.nx-kv { display:flex; align-items:center; gap:10px; min-height:44px; padding:11px 0; border-top:1px solid var(--line); font-size:var(--fs-base); }
.nx-h + .nx-kv { border-top:0; }
.nx-k { flex:none; white-space:nowrap; color:var(--sub); }
.nx-k.nx-k2 { flex:1; min-width:0; white-space:normal; color:var(--ink); }
.nx-v { display:flex; align-items:baseline; gap:4px; min-width:0; margin-left:auto; font-weight:700; text-align:right; }
.nx-v b { flex:none; white-space:nowrap; }
.nx-v small { font-size:var(--fs-s); font-weight:500; color:var(--sub); }
.nx-why { display:block; margin-top:2px; font-size:var(--fs-s); font-weight:500; color:var(--sub); }
.nx-new { margin-right:6px; padding:1px 6px; border-radius:5px; background:var(--accent-soft); color:var(--accent);
  font-size:var(--fs-s); font-weight:700; white-space:nowrap; }
.nx-pub { white-space:nowrap; font-size:var(--fs-s); font-weight:400; color:var(--sub); }
.nx-note { margin:0 0 12px; padding:10px 12px 12px; border-radius:14px; background:var(--well); font-size:var(--fs-s);
  line-height:1.55; color:var(--sub); }
.nx-note b { color:var(--ink); }
/* Inline in its sentence (audit F48): the 44 px target is the u-hit pseudo-element, not the line. */
.nx-link { display:inline; min-height:0; margin:0; padding:0; border:0; background:none; font-size:var(--fs-s); font-weight:700;
  color:var(--sub); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.nx-door { align-self:center; font-size:var(--fs-m); font-weight:700; color:var(--sub); }

/* 2 / 3 다음 주 밥상: the rings, strip and rows are the 식단 tab's mn- parts inside .mn-root */
.nx-stage { margin:0 4px 8px; font-size:var(--fs-m); font-weight:700; color:var(--accent-2); text-align:center; }
.nx-newb { padding:1px 6px; border-radius:5px; background:var(--accent-soft); color:var(--accent); font-weight:700; white-space:nowrap; }
/* the same white card as 식단's rows (DU4 3) */
.nx-rows { margin:0 0 6px; padding:6px 12px; border-radius:var(--r); background:var(--card); box-shadow:none; }
.nx-regen { display:flex; justify-content:center; margin:0 0 6px; }
.nx-relink { min-height:44px; padding:0 8px; border:0; background:none; font-size:var(--fs-m); font-weight:700; color:var(--sub);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---- 이번 주 식단 / 다음 주 식단 (BUILD 4, PLAN_FLOW; next.js pvPaint): the 식단 tab's strip and rows, two text
   buttons under the rows, the 확정 dock. A slot before the plan's start is its time alone, quiet. ---- */
/* BUILD 5: 일 visible at 320 without sideways scroll - the 식단 tab's 44 px floor (menu.css) scrolls there; here the
   seven days share the width (38 px each at 320, 44 tall). */
.nx-pv.mn-root .mn-days { grid-template-columns:repeat(7,minmax(0,1fr)); }
.nx-pv .nx-rows { touch-action:pan-y; }
.nx-pv-lock { display:flex; align-items:center; min-height:44px; padding:6px 0; }
.nx-pv-lock .mn-t, .nx-pv-lock .mn-t small { color:var(--faint); }
.nx-pv-acts { display:flex; gap:8px; margin:4px 0 6px; }
.nx-pv-act { flex:1; min-width:0; min-height:44px; padding:0 8px; border:0; background:none; font:inherit; font-size:var(--fs-base);
  font-weight:700; color:var(--sub); cursor:pointer; }
.nx-pv-act.nx-pv-danger { color:var(--danger); }
.nx-pv-act.nx-pv-undo { color:var(--accent); }
.nx-pv-act:disabled { color:var(--faint); cursor:default; }

/* ---- 3 / 3 장보기, 담은 뒤, 주문 완료 (slice S7b, prep_wireframe.html step 3) ----
   The 장보기 page sits inside #result, not beside nav.tabs, so the tab bar is hidden from the body
   class next.js shopFlowWatch sets. app.css still docks .shop-dock over the old tab bar. */
.nx-shopflow .tabs { display:none; }
/* With the tab bar gone its body padding goes too (all three steps: next.js sets .nx-flow), and the
   page fills the screen under the 62 px top bar (measured), so the dock ends at the bottom edge
   instead of 78 px above it. */
.nx-flow { padding-bottom:env(safe-area-inset-bottom); }
.nx-pg[data-pg="shop"]:not([hidden]) { display:flex; flex-direction:column; min-height:calc(100vh - 62px); }
/* won-roll reserves 7ch, right-aligned, for the count-up; on this card it pushed a short total off its head. */
.nx-pg .st-v .won-roll { min-width:0; text-align:left; }
.nx-pg[data-pg="shop"] #cart .it-row { min-height:44px; }
.nx-pg .shop-dock { bottom:0; margin:auto 0 0; padding:12px 0 16px; border-radius:0; box-shadow:none;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 30%); }
.nx-pg .shop-dock .st-go { border-radius:999px; }
.nx-when { margin-top:10px; padding:8px 10px; border-radius:12px; background:var(--amber-soft); color:#5c4a1e;
  font-size:var(--fs-m); font-weight:700; line-height:1.45; }
.nx-crit { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; margin-top:12px; padding:12px 0 0;
  border:0; border-top:1px solid var(--line); background:none; font-size:var(--fs-base); font-weight:700; color:var(--ink);
  text-align:left; cursor:pointer; }
.nx-crt { flex:1; min-width:0; }
.nx-crt small { display:block; margin-top:2px; font-size:var(--fs-s); font-weight:500; color:var(--sub); }
.nx-chev { flex:none; color:var(--sub); }
.nx-gh { margin:0; padding:14px 0 4px; font-size:var(--fs-s); font-weight:700; color:var(--sub); }
.nx-gh + .cart-item { border-top:0; }
.nx-pg:not(.nx-all) #cart > .cart-item:nth-of-type(n+5), .nx-pg:not(.nx-all) #cart > .nx-late,
.nx-all #shop-more { display:none; }
.nx-more { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; border:0;
  border-top:1px solid var(--line); background:none; font-size:var(--fs-base); font-weight:700; color:var(--accent); cursor:pointer; }
.nx-direct { display:block; width:100%; min-height:44px; margin-top:4px; border:0; background:none; color:var(--sub);
  font-size:var(--fs-m); font-weight:700; text-decoration:underline; text-underline-offset:3px; text-align:center; cursor:pointer; }
.nx-done { display:flex; flex-direction:column; align-items:center; padding:8px 0 4px; text-align:center; }
.nx-done img { width:120px; height:120px; object-fit:contain; }
.nx-done b { margin-top:4px; font-size:var(--fs-title); font-weight:700; }
.nx-done span { font-size:var(--fs-m); color:var(--sub); }
.nx-sv-none > #shop-axes, .nx-sv-none > #cart-count { display:none; }
/* 담은 뒤 and 주문 완료 stand alone; the header ‹ on 담은 뒤 (nx-list) brings the list back. */
.nx-sv-bought:not(.nx-list) .nx-lview, .nx-list .nx-bview { display:none; }
.nx-sv-bought:not(.nx-list) > #shop-axes, .nx-sv-bought:not(.nx-list) > #products-status,
.nx-sv-bought:not(.nx-list) > #cart-count, .nx-sv-bought:not(.nx-list) > .shop-list,
.nx-sv-done > #shop-axes, .nx-sv-done > #products-status, .nx-sv-done > #cart-count, .nx-sv-done > .shop-list { display:none; }
/* 담은 뒤: 다시 담기 (D8) stands under 주문했어요 as the outline second button. */
.nx-pg .shop-dock .st-go + .st-go { margin-top:8px; }
.nx-pg .shop-dock .st-go.nx-ghost { background:var(--card); color:var(--accent); border:1.5px solid var(--accent); }
/* 담은 뒤 (frame shop-done) and 주문 완료 (shop-ordered): the headline 17 / 700, its rows name 15 / 600 · value 13 / 500,
   56 tall; the dock 15 / 600 and its text link 13 / 500. The list state of the page keeps its own sizes. */
.nx-sv-bought:not(.nx-list) #cart-all .nx-done b, .nx-sv-done #cart-all .nx-done b { font-size:17px; font-weight:700; }
.nx-sv-bought:not(.nx-list) #cart-all .nx-kv, .nx-sv-done #cart-all .nx-kv { box-sizing:border-box; min-height:56px; padding-top:0;
  padding-bottom:0; }
.nx-sv-bought:not(.nx-list) #cart-all .nx-k, .nx-sv-done #cart-all .nx-k { font-size:15px; font-weight:600; color:var(--ink); }
.nx-sv-bought:not(.nx-list) #cart-all .nx-v b, .nx-sv-done #cart-all .nx-v b { font-size:13px; font-weight:500; color:var(--sub); }
.nx-sv-bought:not(.nx-list) #shop-dock .st-go, .nx-sv-done #shop-dock .st-go { font-size:15px; font-weight:600; }
.nx-sv-bought:not(.nx-list) #shop-dock .nx-direct { font-size:13px; font-weight:500; }

/* ---- 담기 sheet (frames cart, cart-on, cart-later; P15, DESIGN Function 5): ① 오아시스 로그인 열기 and 로그인했어요,
   ② 담기, locked until 로그인했어요. The "2" floats beside 담기: #cfm-disclose must be the element right after the
   button (rubric R-L3), so nothing wraps it. Type as the frames: title 17 / 700, rows 15 / 600 · 13 / 500, captions
   12 / 500, the locked 담기 is the disabled primary (F6). ---- */
.nx-cfmt.u-sheet-t { font-weight:700; }
.nx-cfm .cfm-list li b { font-size:15px; font-weight:600; }
.nx-cfm .cfm-list li > span { font-size:13px; font-weight:500; }
.nx-cfm .cfm-list li > span.cfm-optname { color:var(--sub); }
.nx-cfm .cfm-lbl, .nx-cfm p.note { font-size:12px; font-weight:500; }
.nx-gate { display:flex; align-items:flex-start; gap:10px; margin:14px 0 12px; }
.nx-gn { flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:12px; border-radius:50%;
  background:var(--ink); color:#FFFFFF; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.nx-g1 { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.nx-login { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 14px;
  border:1px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink); font-size:15px; font-weight:600;
  text-decoration:none; }
.nx-login::after { content:"\2197"; color:var(--sub); font-weight:500; }
.nx-ok { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; margin:0; padding:0 14px;
  border:1px solid var(--ink); border-radius:12px; background:#FFFFFF; color:var(--ink); font:inherit; font-size:15px;
  font-weight:600; cursor:pointer; }
.nx-ok.on { border-color:var(--line); background:var(--well); cursor:default; }
.nx-ok.on i { width:14px; height:8px; margin-top:-4px; border:solid var(--accent); border-width:0 0 2px 2px; transform:rotate(-45deg); }
.nx-gn2 { float:left; margin-top:14px; }
.nx-gn2 + #cfm-go-btn { display:block; width:calc(100% - 34px); margin:0 0 0 34px; font-size:15px; font-weight:600; }
.nx-gn2 + #cfm-go-btn small { display:block; font-size:12px; font-weight:500; }
.nx-gn2 + #cfm-go-btn:disabled:not(.busy) { background:var(--well); color:var(--faint); opacity:1; }
#cfm-carry + #cfm-go-btn { display:block; font-size:15px; font-weight:600; }
#cfm-carry + #cfm-go-btn small { display:block; font-size:12px; font-weight:500; }

/* ---- 이번 주 장보기 (frames shop-d1, shop-d3; shop.js openWeekShop): the 장보기 .pg with .nx-thisweek ----
   No step bar, and no 이 앱의 기준 보기 row - that fold stands in the 장보기 기준 sheet. The 냉장고 carries the bag
   at 56 px beside the total: today.css .to-fr (30 x 38) scaled in its own box, the bag from menu.css .to-fr .mn-bgs /
   .mn-bgb. Type and row heights as the frames (F2, F3, F5); the cards keep the live look. */
.nx-thisweek > #shop-step, .nx-thisweek #products-status .shop-fold { display:none; }
.nx-thisweek .shop-total.nx-fzt { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:2px; }
.nx-thisweek .nx-fzt > * { grid-column:1 / -1; }
.nx-thisweek .nx-fzt > .nx-frbox { grid-column:1; grid-row:1 / span 2; align-self:center; }
.nx-thisweek .nx-fzt > .st-k, .nx-thisweek .nx-fzt > .st-v { grid-column:2; }
.nx-thisweek .nx-frbox { position:relative; display:block; width:45px; height:56px; }
.nx-thisweek .nx-frbox .to-fr { position:absolute; left:0; top:0; transform:scale(1.4737); transform-origin:0 0; }
.nx-thisweek .shop-total .st-k { font-size:12px; font-weight:500; color:var(--sub); }
.nx-thisweek .shop-total .st-s, .nx-thisweek .shop-total .st-s * { font-size:12px; font-weight:500; color:var(--sub); }
.nx-thisweek .nx-crit { min-height:56px; padding:0; }
.nx-thisweek .nx-crt { font-size:15px; font-weight:600; }
.nx-thisweek #cart-count { margin-top:16px; font-size:17px; font-weight:700; color:var(--ink); }
/* 있음 names the checkbox column (P34 j): the tick's own 44 px cell, 10 px left of the row's edge, as the tick. */
.nx-thisweek .nx-havehd { display:block; box-sizing:border-box; width:var(--tap); margin:8px 0 0 -10px; font-size:12px;
  font-weight:500; line-height:16px; color:var(--sub); text-align:center; }
.nx-thisweek #cart .nx-gh { font-size:13px; font-weight:500; color:var(--sub); }
.nx-thisweek #cart .cart-item { box-sizing:border-box; min-height:72px; padding:0; align-items:center; }
.nx-thisweek #cart .name { font-size:15px; font-weight:600; }
.nx-thisweek #cart .price { font-size:13px; font-weight:500; color:var(--ink); }
.nx-thisweek #cart .pd { font-size:13px; font-weight:500; }
.nx-thisweek #cart .packs { font-size:12px; font-weight:500; }
.nx-thisweek #cart :is(.badge-chip, .opt-chip, .nx-newb) { display:inline-flex; align-items:center; box-sizing:border-box; height:22px;
  padding-top:0; padding-bottom:0; font-size:12px; font-weight:500; line-height:1; }
.nx-thisweek #shop-more { font-size:13px; font-weight:500; color:var(--sub); }
.nx-thisweek #shop-direct { font-size:13px; font-weight:500; }
.nx-thisweek #shop-dock .st-go { font-size:15px; font-weight:600; }
.nx-thisweek #shop-dock .st-go .st-sm { font-size:12px; font-weight:500; }

/* ---- sw- : 끼니 바꾸기 / 채우기 sheet, 끼니 비우기 확인, the today-swap question (slice S4b,
   blueprint s-swap_sheet and s-clear_confirm_fill, plan_wireframe.html .sheet rules) ---- */
.sw-sub { margin:0 0 12px; font-size:var(--fs-s); line-height:1.5; color:var(--sub); }
.sw-pub { white-space:nowrap; font-size:var(--fs-s); font-weight:400; color:var(--sub); }
.sw-now { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:9px 11px; border-radius:14px;
  background:var(--well); font-size:var(--fs-base); line-height:1.4; }
.sw-now .sw-th { width:40px; height:40px; border-radius:10px; }
.sw-nt { flex:1; min-width:0; }
.sw-nt small { display:block; font-size:var(--fs-s); color:var(--sub); }
.sw-vac { background:transparent; border:2px dashed var(--box); color:var(--faint); font-weight:700; }
.sw-cand { display:grid; grid-template-columns:22px 46px 1fr; align-items:center; gap:10px; width:100%;
  min-height:44px; margin-bottom:8px; padding:10px 11px; border:1.5px solid var(--line); border-radius:16px;
  background:var(--card); text-align:left; cursor:pointer; }
.sw-cand:active { background:var(--well); }
.sw-cand .sw-th { width:46px; height:46px; border-radius:11px; }
.sw-rd { width:20px; height:20px; border-radius:50%; border:2px solid var(--box); }
.sw-on { border-color:var(--accent); background:var(--accent-soft); }
.sw-on .sw-rd { border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 4px #fff; }
.sw-ct { min-width:0; }
.sw-cn { display:block; font-size:var(--fs-body); font-weight:700; letter-spacing:-.2px; line-height:1.35; }
.sw-base { font-size:var(--fs-base); font-weight:400; letter-spacing:0; color:var(--sub); }
.sw-tier { display:flex; align-items:baseline; gap:6px; margin:14px 2px 8px; font-size:var(--fs-s); font-weight:700; color:var(--sub); letter-spacing:-.1px; }
.sw-tier b { font-weight:700; color:var(--ink); font-size:var(--fs-m); }
.sw-none { margin:0 2px 12px; font-size:var(--fs-base); line-height:1.6; color:var(--sub); }
.sw-tag { display:inline-block; margin-top:4px; padding:1px 7px; border-radius:999px; font-size:var(--fs-s); font-weight:700; line-height:1.5; }
.sw-tag.buy { background:#FDF1E6; color:var(--warn); }
.sw-tag.make { background:var(--well); color:var(--sub); }
.sw-g b { font-size:var(--fs-s); color:var(--ink); }
.sw-out, .sw-out b { color:var(--warn); font-weight:700; }
.sw-more { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:6px 0 10px;
  border:0; background:none; font-size:var(--fs-m); font-weight:700; color:var(--accent); cursor:pointer; }
.sw-go { margin-top:4px; }
.sw-clear, .sw-keep, .sw-back { margin-top:8px; }
.sw-keep.u-ghost { border-color:var(--line); color:var(--sub); }
.sw-empty { margin:0 0 12px; padding:14px; border-radius:14px; background:var(--well); font-size:var(--fs-base);
  line-height:1.6; color:var(--sub); text-align:center; }
.sw-held { margin:4px 0 12px; font-size:var(--fs-s); line-height:1.6; color:var(--sub); }
.sw-first { margin:4px 0 12px; padding:10px 12px; border-radius:14px; background:var(--well); font-size:var(--fs-s);
  line-height:1.6; color:var(--ink); }
.sw-first[hidden] { display:none; }
.sw-cf { margin-bottom:14px; padding:10px 12px; border-radius:14px; background:var(--well); font-size:var(--fs-m);
  line-height:1.7; }