/* cook.css - 큐브 만들기. Owner: slice S3. Every selector starts with .cm- (CONTRACT_shell.md 6.2, 6.3); tokens and u- parts live in app.css. */
/* Ported from work\today_tab_20261001\cook_wireframe.html:33-166; sizes mapped to the type tokens. */
.cm-root{padding:0 0 8px}
.cm-root.cm-play{animation:mo-step-in 260ms var(--mo-out) backwards}
.cm-root.cm-play.cm-rev{animation-name:mo-step-back}
.cm-prog{display:flex;gap:3px;margin:0 0 12px}
.cm-prog i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.cm-prog i.cm-on{background:var(--accent)}
.cm-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:4px 16px;margin-bottom:12px}
.cm-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;margin:12px 0 6px;font-size:var(--fs-body);font-weight:700;letter-spacing:-.2px}
.cm-h small{font-size:var(--fs-s);font-weight:500;color:var(--sub)}

/* start */
.cm-hero{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px}
.cm-hero img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover}
.cm-hero b{display:block;font-size:var(--fs-title);letter-spacing:-.4px}
.cm-hero span{font-size:var(--fs-m);color:var(--sub);line-height:1.5}
.cm-sized{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:12px;box-shadow:var(--shadow);font-size:var(--fs-base)}
.cm-sized b{flex:0 1 auto;min-width:0;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-szex{min-width:0;font-size:var(--fs-s);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-toset{flex:none;margin-left:auto;min-height:var(--tap);padding:0 14px;border:0;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:var(--fs-m);font-weight:700;white-space:nowrap;cursor:pointer}
.cm-ing,.cm-cnt{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:var(--fs-body)}
.cm-h + .cm-ing,.cm-h + .cm-cnt{border-top:0}
.cm-nm{min-width:0;font-weight:700}
.cm-nm small{display:block;margin-top:1px;font-size:var(--fs-s);font-weight:500;color:var(--sub)}
.cm-off .cm-nm{color:var(--faint)}
.cm-off .cm-nm small,.cm-nm small.cm-warn{color:var(--warn)}
.cm-tog{margin-left:auto}
.cm-tog[aria-disabled="true"]{opacity:.5;cursor:default}
.cm-sum{margin:2px 0 10px;font-size:var(--fs-m);color:var(--sub);text-align:center}
.cm-sum b{color:var(--ink)}
/* PLAN_FLOW start rows (BUILD 6.3): a pill stepper in place of the toggle, real 44 px buttons; a row at 0 greys */
.cm-xst{flex:none;display:flex;align-items:center;margin-left:auto;border:1px solid var(--line);border-radius:999px;background:var(--card);white-space:nowrap}
.cm-xb{flex:none;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);font-size:var(--fs-lead);font-weight:700;cursor:pointer}
.cm-xb:disabled{color:var(--faint);cursor:default}
.cm-xst b{min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.cm-xrow.cm-off .cm-nm small,.cm-xrow.cm-off .cm-xst b{color:var(--faint)}
.cm-sum .cm-xt.cm-xover{color:var(--warn)}

/* step */
.cm-sth{display:flex;gap:12px;align-items:center;margin:4px 2px 12px}
.cm-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:2px;border-radius:14px;background:var(--card);box-shadow:var(--shadow);color:var(--accent);font-size:var(--fs-s);font-weight:700;line-height:1.1;text-align:center}
.cm-stt{display:block;font-size:var(--fs-title);letter-spacing:-.4px}
.cm-sts{font-size:var(--fs-m);color:var(--sub)}
.cm-procs{list-style:none;margin:0;padding:0}
.cm-procs li{display:flex;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.55}
.cm-procs li:first-child{border-top:0}
.cm-procs .cm-plain{display:block;color:var(--sub);font-size:var(--fs-base)}
.cm-plain b{color:var(--ink)}
.cm-line{min-height:var(--tap);cursor:pointer}
.cm-ck{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border:2px solid var(--accent-soft);border-radius:50%;color:var(--accent);font-size:var(--fs-s);font-weight:700}
.cm-line.cm-done{color:var(--faint)}
.cm-line.cm-done .cm-ck{background:var(--accent);border-color:var(--accent);color:#fff}
/* STACK #297: a timer in the line that starts it - pale before the tap, the bar's ink while it runs, the done bar's green once it rings */
.cm-tchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cm-tchip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:34px;padding:0 12px 0 10px;border:1.5px solid var(--accent);border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-size:var(--fs-base);font-weight:700;line-height:1.2;white-space:nowrap}
.cm-tchip .ck-ic{width:18px;height:18px}
.cm-tchip b{font-variant-numeric:tabular-nums}
.cm-tft{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.cm-tchip.cm-trun{border-color:var(--ink);background:var(--ink);color:#fff}
.cm-tchip.cm-tring{background:var(--accent);color:#fff}
.cm-key{display:flex;gap:10px;background:var(--warn-soft);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:12px;font-size:var(--fs-base);line-height:1.55}
.cm-kl{flex:none;height:fit-content;margin-top:2px;padding:2px 6px;border-radius:6px;background:var(--warn);color:#fff;font-size:var(--fs-s);font-weight:700}
.cm-pub,.cm-gen{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;font-size:var(--fs-s);font-weight:700;line-height:1.5;white-space:nowrap}
.cm-pub{background:var(--accent-soft);color:var(--accent-2)}
.cm-gen{background:var(--well);color:var(--sub);border:1px solid var(--line)}

/* count and end */
.cm-step{flex:none;display:flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.cm-step button{width:30px;height:30px;min-height:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--card);font-weight:700;cursor:pointer}
.cm-step b{min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
.cm-limit{margin:0 2px 12px;font-size:var(--fs-m);color:var(--sub)}
.cm-fin{padding:12px 0 8px;text-align:center}
.cm-fin img{width:120px;height:120px;margin:0 auto;border-radius:50%;object-fit:cover}
.cm-fin b{display:block;margin-top:4px;font-size:var(--fs-title);letter-spacing:-.4px}
.cm-fin span{font-size:var(--fs-base);color:var(--sub);line-height:1.6}
.cm-skipped{padding:12px 0;font-size:var(--fs-base);line-height:1.6}
.cm-skipped span{color:var(--sub)}

/* the dock: timer bar right above the buttons, fixed at the bottom (no tab bar in the flow) */
.cm-dock{position:fixed;left:0;right:0;bottom:0;z-index:29;display:flex;flex-direction:column;gap:8px;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg) 30%);pointer-events:none}
.cm-dock > *{width:100%;max-width:488px;margin:0 auto;pointer-events:auto}
.cm-barhost:empty{display:none}
.cm-row{display:flex;gap:8px}
.cm-col .cm-row{flex-direction:column}
.cm-back{flex:none;display:grid;place-items:center;width:52px;min-height:52px;padding:0;border:0;border-radius:999px;background:var(--card);box-shadow:var(--shadow);color:var(--ink);cursor:pointer}
.cm-cta{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-bar{display:flex;align-items:center;gap:6px;padding:4px;border-radius:14px;background:var(--ink);color:#fff}
.cm-bar.cm-bdone{background:var(--accent)}
.cm-bmain{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 8px;border:0;background:none;color:inherit;font-size:var(--fs-m);font-weight:700;text-align:left;cursor:pointer}
.cm-tn{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.18);font-size:var(--fs-s)}
.cm-tn .ck-ic{width:14px;height:14px}
.cm-bnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-bmain b{flex:none;font-size:var(--fs-lead);font-variant-numeric:tabular-nums}
.cm-bok{flex:none;min-height:var(--tap);padding:0 16px;border:0;border-radius:999px;background:#fff;color:var(--accent-2);font-size:var(--fs-s);font-weight:700;cursor:pointer}
/* C-B01: a finished timer fills the bottom until 확인. 80 px keeps the dock (12 + 80 + 8 + 52 + 16 + the inset) inside the cook page's 204 px bottom padding (app.css) */
.cm-bar.cm-bdone{min-height:80px;padding:8px;border-radius:18px}
.cm-bdone .cm-bmain{gap:0;font-size:var(--fs-lead)}
.cm-bdone .cm-tn{margin-right:8px}
.cm-bdone .cm-bnm{flex:0 1 auto}
.cm-bst{flex:none;white-space:pre}
.cm-bdone .cm-bok{min-height:56px;padding:0 24px;font-size:var(--fs-body)}
/* A-A01: 이대로 저장 waiting on a running timer - the name gives way, the clock never does */
.cm-cta.cm-wait{gap:8px;padding:15px 16px}
.cm-wnm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cm-wait b{flex:none;font-variant-numeric:tabular-nums}

/* sheets in #sh: the timer list scrolls inside, the head stays (F35) */
.cm-tlist{max-height:calc(92vh - 130px);overflow-y:auto;overscroll-behavior:contain}
.cm-tsr{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:12px 0;border-top:1px solid var(--line)}
.cm-tsr:first-child{border-top:0}
.cm-tnm{min-width:0;font-size:var(--fs-body);font-weight:700}
.cm-tsr > b{font-size:24px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.cm-tsr.cm-tdone > b{font-size:var(--fs-lead);color:var(--accent)}
.cm-tc{grid-column:1 / -1;display:flex;gap:6px}
.cm-tc button{flex:1;min-height:var(--tap);border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:var(--fs-base);font-weight:700;cursor:pointer}
.cm-tc .cm-toff{flex:1.3;color:var(--danger);border-color:var(--danger-line)}
.cm-tc .cm-tok{background:var(--accent);border-color:var(--accent);color:#fff}
.cm-tempty{margin:0 0 8px;font-size:var(--fs-base);color:var(--sub)}
.cm-qsub{margin:0 0 12px;font-size:var(--fs-base);color:var(--sub);line-height:1.5}
.cm-qnote{margin:6px 2px 12px;font-size:var(--fs-s);color:var(--sub)}
.cm-keep{display:block;width:100%;min-height:var(--tap);margin-top:6px;border:0;background:none;color:var(--sub);font-size:var(--fs-base);font-weight:700;cursor:pointer}
.cm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* #293 B step 1 "남은 재료 보관" (blueprint b_mock2): icon | name, chip, amount on one line; stock at home as one small line under it */
.st-card{padding:2px 16px}
.st-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.st-row:first-child{border-top:0}
.st-row > .fi{width:32px;height:32px}
.st-row > .u-cube{width:24px;height:24px;margin:4px}
.st-mid{flex:1;min-width:0}
.st-top{display:flex;align-items:center;gap:8px;min-height:32px}
.st-n{font-size:var(--fs-body);font-weight:700;white-space:nowrap}
.st-g{margin-left:auto;font-size:var(--fs-body);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.st-chip{flex:none;min-height:26px;padding:0 10px;border:0;border-radius:999px;background:var(--accent-soft);color:var(--accent-2);
  font-size:var(--fs-m);font-weight:700;line-height:26px;white-space:nowrap;cursor:pointer}
.st-home{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--fs-s);color:var(--sub);font-variant-numeric:tabular-nums}
.st-fix{min-height:22px;padding:0 4px;border:0;background:none;color:var(--accent-2);font-size:var(--fs-s);font-weight:700;cursor:pointer}
.st-q{display:block;font-size:var(--fs-s);color:var(--sub)}
.st-in{flex:none;display:flex;align-items:center;gap:6px;margin:0}
.st-in input[type=text]{width:72px;min-height:44px;margin:0;padding:0 10px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--bg);font-size:16px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.st-in input[type=text]:focus{border-color:var(--accent)}
.st-in input[type=text]::placeholder{color:var(--faint);font-weight:500}
.st-in span{min-width:16px;font-size:var(--fs-base);font-weight:700;color:var(--ink)}
.st-home .st-in{margin-top:4px}
.st-ok{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-top:4px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer}
.st-ok svg{width:20px;height:20px}