/* menu.css - 식단. Owner: slice S4. Every selector starts with .mn- (CONTRACT_shell.md 6.2, 6.3); tokens and u- parts live in app.css. */

/* 식단: the day list and 빠진 재료 fold now take the raised card (DECISIONS K5, 2026-10-13; reverses DESIGN 식단
   A4 · D5 "drawn flat"). #mn-gauge stays in the markup only for #meal-badge and #stage-note, which the checks
   read. The id outranks .mn-gauge[hidden] = false (week.js mnNoMenu). */
.mn-root #mn-gauge { display:none; }

.mn-root .mn-gauge { background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); padding:14px 12px 12px; margin-bottom:12px; }

/* the tab's confirm sheet (week.js mnConfirm) */
.mn-sheet .mn-cap { margin:12px 0 0; font-size:var(--fs-s); color:var(--sub); line-height:1.5; }
.mn-root .mn-wide { display:block; width:100%; min-height:44px; margin-top:8px; }

/* day strip (blueprint 7 #days; audit b/52: selected + skipped keeps white text with the strike) */
/* 7 x 44 + gaps = 332 px: narrower than that (320) the strip scrolls in its own box, never the page; week.js
   mnStripShow brings the selected day into view. position:relative makes each day's offsetLeft the strip's own. */
.mn-root .mn-days { position:relative; display:grid; grid-template-columns:repeat(7,minmax(44px,1fr)); gap:2px; min-height:52px; margin-bottom:6px;
  padding:4px; border-radius:999px; background:var(--card); box-shadow:var(--ring),var(--shadow-s);
  overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
.mn-root .mn-days::-webkit-scrollbar { display:none; }
.mn-root .mn-day { min-height:44px; border:0; background:var(--card); border-radius:999px; padding:7px 0 6px; box-shadow:none;
  font-size:var(--fs-s); font-weight:600; line-height:1.25; color:var(--ink); cursor:pointer; }
.mn-day small { display:block; font-size:var(--fs-s); font-weight:600; color:var(--sub); }
.mn-root .mn-day.mn-past { color:var(--faint); }
.mn-day.mn-past small { color:var(--faint); }
.mn-root .mn-day.mn-dim { background:transparent; box-shadow:none; color:var(--faint); cursor:default; }
.mn-day.mn-dim small { color:var(--faint); }
.mn-root .mn-day.mn-skip { text-decoration:line-through; color:var(--faint); }
.mn-root .mn-day.mn-on { background:var(--ink); color:#fff; box-shadow:0 6px 14px -6px rgba(20,20,20,.5); }
.mn-day.mn-on small { color:#fff; }
/* PLAN_FLOW only (week.js renderWeekPanel adds the class): one week fits 320 with no sideways scroll - the days narrow
   below 44 px wide and keep 44 px of height; two weeks (next week confirmed) scroll, a 6 px step before next 월. */
.mn-root .mn-days.mn-fit { grid-template-columns:repeat(7,minmax(0,1fr)); }
.mn-root .mn-days.mn-two { grid-template-columns:repeat(14,minmax(44px,1fr)); }
.mn-root .mn-day.mn-nw { margin-left:6px; }

/* day line */
.mn-root .mn-dayline { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; margin:6px 4px 6px; padding:0 4px; font-size:var(--fs-s); color:var(--sub); }
.mn-root .mn-dayline span { font-weight:600; }
.mn-dayline b { color:var(--ink); }
/* A 32 px pill in a 44 px target: the transparent borders hold the tap height, the fill stops at the padding edge. */
.mn-root .mn-link { display:inline-flex; align-items:center; align-self:center; min-height:44px; padding:0 10px; border:solid transparent; border-width:6px 0;
  border-radius:999px; background:var(--accent-soft); background-clip:padding-box; font-size:var(--fs-s); font-weight:600;
  color:var(--accent); text-decoration:none; white-space:nowrap; cursor:pointer; }
.mn-root .mn-emptyh { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 4px 8px; }
.mn-emptyh .mn-chip { font-size:var(--fs-s); color:var(--sub); }

/* the day's rows (blueprint 7 #rows) */
.mn-root #week .mn-rows { background:var(--card); border-radius:22px; box-shadow:var(--ring),var(--shadow-s); padding:6px 12px; margin:0 0 12px; }
.mn-root .mn-li { margin:0; }
.mn-root .mn-row { display:grid; grid-template-columns:40px 50px 1fr 46px; gap:10px; align-items:center; width:100%; min-height:44px; padding:12px 0;
  border:0; border-bottom:1px solid var(--line); background:none; text-align:left; color:var(--ink); }
.mn-rows > .mn-li:last-child .mn-row, .mn-rows > .mn-row:last-child { border-bottom:0; }
.mn-root .mn-row.mn-can { cursor:pointer; }
.mn-root .mn-row.mn-can:active { background:var(--well); }
.mn-root .mn-row.td-swap { width:100%; height:auto; border-radius:0; color:var(--ink); place-items:normal; align-items:center; }
.mn-row .mn-t { font-size:var(--fs-m); font-weight:600; font-variant-numeric:tabular-nums; text-align:center; line-height:1.2; }
.mn-row .mn-t small { display:block; margin-top:2px; font-size:var(--fs-s); font-weight:700; color:var(--sub); }
.mn-row .u-tile { width:50px; height:50px; border-radius:14px; box-shadow:0 0 0 1px rgba(20,20,20,.06),0 4px 10px -4px rgba(20,20,20,.25); }
.mn-row .mn-vac { display:grid; place-items:center; background:transparent; border:2px dashed var(--box); font-size:var(--fs-s); font-weight:700; color:var(--faint); white-space:nowrap; }
.mn-row .mn-tx { min-width:0; }
.mn-row .mn-tx b { display:block; font-size:var(--fs-body); font-weight:700; letter-spacing:-.3px; line-height:1.35; }
.mn-row .mn-base { display:block; margin-top:2px; font-size:var(--fs-s); color:var(--sub); line-height:1.35; }
.mn-row .mn-base :is(u,i) { text-decoration:none; font-style:normal; color:var(--accent); font-weight:700; }
.mn-row .mn-base s { text-decoration:none; color:var(--warn); font-weight:700; }
.mn-row .mn-st { display:grid; place-items:center; font-size:var(--fs-s); font-weight:700; color:var(--faint); text-align:center; line-height:1.2; }
.mn-row .mn-st .mn-bowl { width:40px; height:40px; object-fit:contain; }
.mn-row .mn-st small { display:block; font-size:var(--fs-s); font-weight:700; color:var(--sub); }
/* The › sits in a 26 px well circle; a bowl or an empty status keeps the bare column. */
.mn-row .mn-st:has(> .mn-go) { width:26px; height:26px; border-radius:50%; background:var(--well); }
.mn-row .mn-go { display:block; font-size:13px; line-height:1; color:var(--ink); }
.mn-root .mn-row:is(.mn-ro,.mn-lock,.mn-lockd) { cursor:default; }
.mn-row.mn-lockd .mn-t, .mn-row.mn-lockd .mn-t small { color:var(--faint); }
.mn-row.mn-ro .mn-t, .mn-row.mn-ro .mn-tx b { color:var(--faint); }
.mn-row.mn-ro .u-tile { opacity:.55; }
.mn-row.mn-vacant .mn-tx b { color:var(--sub); }
.mn-rows .mn-skipbody { margin:0; padding:18px 4px; text-align:center; font-size:var(--fs-base); color:var(--sub); line-height:1.55; }
.mn-root .mn-foot { margin:2px 4px 12px; text-align:center; font-size:var(--fs-s); color:var(--sub); }
.mn-foot .mn-pub, .mn-root .mn-pub { font-size:var(--fs-s); color:var(--faint); }

/* confirm sheet (blueprint 7 #confirm) */
.mn-sheet .mn-top { margin:0 0 12px; }
.mn-sheet .mn-cflist { margin:0 0 14px; padding:10px 12px; background:var(--well); border-radius:14px; font-size:var(--fs-m); line-height:1.7; }

/* swap sheet CTA (phone note 2026-10-10 #1): pinned to the bottom of the scrolling sheet at any list length; sticky, not
   fixed, so at the end of the list it drops back under the last row and covers nothing. next.js swapBody draws it in
   식단's #pp-swap and 끼니 상세's #sh alike. */
.sw-foot { position:sticky; bottom:0; z-index:1; padding:8px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--card); }
/* #sh's sticky anchor is its content edge, 24 px (.sh padding) above the sheet's bottom - rows showed through that
   strip under the band (measured, after-meal-top-360.png); .me-odock in the same sheet takes the same -24px. */
#sh .sw-foot { bottom:-24px; }

/* substitution note (blueprint 7 .subst) */
/* Folded (G7, 2026-10-08): closed it is the 44 px title row alone; the side padding stays on the card, the
   top and bottom padding move to the open body so the closed row is the tap height. */
.mn-root .mn-subst { margin:0 0 12px; padding:0 16px; background:var(--card); border-radius:18px; box-shadow:var(--ring),var(--shadow-s); font-size:var(--fs-m); line-height:1.55; color:var(--sub); }
.mn-subst .subs { display:block; margin:0; padding:0; background:none; border:0; box-shadow:none; }
.mn-subst .subs[open] { padding-bottom:11px; }
.mn-subst .subs > div + div { margin-top:6px; }
/* The title row's type is 오늘 .to-line's "관찰 중 N" (.to-ltx b), by computed style (DECISIONS K7). */
.mn-subst .subs-h { display:flex; align-items:center; gap:6px; min-height:var(--tap); margin:0; list-style:none; cursor:pointer; font-size:15px; font-weight:600; color:var(--ink); }
.mn-subst .subs-h::-webkit-details-marker { display:none; }
.mn-subst .subs-h svg { width:16px; height:16px; flex:none; }
.mn-subst .subs-h::after { content:"›"; margin-left:auto; font-size:var(--fs-lead); font-weight:400; color:var(--sub); }
.mn-subst .subs[open] > .subs-h::after { transform:rotate(90deg); }
.mn-subst b { color:var(--ink); }
/* What left and why (week.js renderReasons), first in the fold: a line, not app.css's .reason card. */
.mn-subst .reason { margin:0; padding:0; background:none; border-radius:0; font:inherit; color:var(--warn); }

/* no menu this week (blueprint 7 #noMenu) */
.mn-root .mn-nomenu { margin:0 0 12px; padding:22px 18px 18px; background:var(--card); border-radius:var(--r); box-shadow:var(--shadow); text-align:center; }
.mn-root .mn-nomenu[hidden], .mn-root .mn-gauge[hidden] { display:none; }
.mn-nomenu img { display:block; width:96px; height:96px; margin:0 auto 6px; object-fit:contain; }
.mn-nomenu b { display:block; margin-bottom:4px; font-size:var(--fs-title); }
.mn-nomenu span { display:block; margin-bottom:14px; font-size:var(--fs-m); color:var(--sub); }

/* bottom card (DESIGN 식단 P20, D7): 24 px under the day's rows; 이번 주 장보기 · 이번 주 식단 변경 · 다음 주 준비, rows
   of one shape, the hairlines between rows only. */
.mn-root .mn-prep { margin:24px 0 12px; padding:0 16px; background:var(--card); border-radius:22px; box-shadow:var(--ring),var(--shadow-s); }
.mn-root .mn-prep[hidden] { display:none; }
.mn-prep .mn-brow { display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; min-height:56px; margin:0; padding:0;
  border:0; border-radius:0; background:none; font:inherit; text-align:left; color:var(--ink); }
.mn-prep button.mn-brow { cursor:pointer; }
.mn-prep .mn-brow + .mn-brow { border-top:1px solid var(--line); }
.mn-prep .mn-bico { flex:none; display:grid; place-items:center; width:30px; height:38px; }
.mn-prep .mn-bsvg { width:24px; height:24px; }
.mn-prep .mn-bk { flex:1; min-width:0; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mn-prep .mn-bv { flex:none; padding:3px 9px; border-radius:999px; background:var(--well); font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; }
.mn-prep .mn-bv:empty { display:none; }
/* A row that cannot be pressed (장보기 없음): faint words on the white surface, no grey fill (DU4 5). */
.mn-prep div.mn-brow :is(.mn-bk, .mn-bv) { background:none; color:var(--faint); }
.mn-prep .mn-bch { flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--well);
  font-size:13px; font-weight:600; line-height:1; color:var(--ink); }
/* P26 (b): 이번 주 장보기's 냉장고 (today.css .to-fr, 30 x 38) carries a shoulder bag - a strap across it and the bag
   at its left hip, 4 px past its edge. Shared: 식단's row 1, 오늘's 장보기 row and the 이번 주 장보기 total. */
.to-fr .mn-bgs { left:27px; top:2px; width:28px; height:2px; border-radius:1px; background:var(--ink); transform-origin:0 50%; transform:rotate(126deg); }
.to-fr .mn-bgb { left:-4px; top:24px; width:15px; height:11px; border:2px solid var(--ink); border-radius:3px 3px 5px 5px; background:var(--memo); }
.to-fr .mn-bgb::before { content:""; position:absolute; left:0; right:0; top:2px; border-top:2px solid var(--ink); }

/* 식단 공유 (c50 line 8): week.js puts #tbar-share before the gear once. It stands only on 식단 while the gear does and a
   week is drawn (#week holds the strip), as the gear's 44 px white circle with a 22 px glyph. The stage pill keeps the
   free space; beside the share icon the gear drops its auto margin. Under 375 px the 초기 pill (188 px) leaves the title
   no room (measured: 0 px wide at 320, two lines at 360), so there the header wraps as 오늘's does under 360
   (settings.css): the icons stay on the title's line and the stage pill takes the line under it. */
.mn-share { display:none; }
body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) .mn-share { display:grid;
  place-items:center; flex:none; width:44px; height:44px; margin:0 0 0 auto; padding:0; border:0; border-radius:999px;
  background:var(--card); box-shadow:var(--ring),var(--shadow-s); color:var(--ink); cursor:pointer; }
body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) #stage-badge:not([hidden]):not(:empty) ~ .mn-share,
body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) #tbar-set { margin-left:0; }
.mn-share svg { width:22px; height:22px; }
@media (max-width:374px) {
  body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) { flex-wrap:wrap; }
  body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) #page-title { flex:none; white-space:nowrap; }
  body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) :is(.mn-share, #tbar-set) { order:1; }
  body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) #stage-badge:not([hidden]):not(:empty) ~ .mn-share { margin-left:auto; }
  body:has(#result:not(.hidden) #week .mn-days) .tbar[data-pg="menu"]:has(#tbar-set:not([hidden])) #stage-badge { order:2; flex:1 0 100%; margin-left:0; }
}