/* 처음 여는 사람에게 먼저 묻는다 (onboard.js, develop round slice 1). The approved frames are drawn in the V1 look
   (work\develop_20261003\visual\v1.css), set on the two onboarding roots - #intro and .onb - and every rule below sits
   under one of them. The greys and the gutter are the app's, so nothing steps when onboarding closes onto 오늘. */
#intro,.onb{--bg:#FFFFFF;--card:#FFFFFF;--ink:#141414;--line:#ECECEC;--well:#F4F4F2;
  --accent:#17785A;color:var(--ink)}

/* ---- 인트로 (F2, F3, F6): wordmark 17 / 700 in ink so the accent is the one action; the primary docked at the bottom
   inside the gutter as on every step, the import link under it ---- */
#intro{background:var(--bg)}
#intro .intro5{padding:0 var(--gutter) 150px}
#intro .intro5 .wordmark{margin:0 0 16px;font-size:17px;font-weight:700;color:var(--ink)}
#intro .intro5 h2{font-size:22px;line-height:1.45;font-weight:700;letter-spacing:-.4px}
#intro .onb-foot .btn-dark{width:100%;max-width:none;min-height:52px;margin:0;border-radius:14px;background:linear-gradient(180deg,#1E8A68,#17785A);
  font-size:15px;font-weight:600}
:is(#intro,.onb) .onb-link{display:block;min-height:44px;margin:6px auto 0;padding:0 12px;border:0;background:none;color:var(--sub);
  font:inherit;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---- the step host: the app's gutter (F1), the whole screen ---- */
.onb{position:fixed;inset:0;z-index:48;max-width:520px;margin:0 auto;padding:12px var(--gutter) 120px;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;background:var(--bg);font-family:var(--body)}
.onb[hidden]{display:none}
/* c50 #271: the "아직 안 먹여 봤어요" door adds a 44px line under 다음, so the foot is ~128px against the
   120px bottom padding above - the step's last line (.onb-cnt) sat 8px into the foot's fade (measured,
   onb\shots.js step7-none-390.png). The extra padding applies only while the door is drawn. */
.onb:has(.onb-foot [data-act="fed-none"]){padding-bottom:144px}
.onb .onb-top{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 0 10px}
.onb .onb-back{display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 0 0 -6px;padding:0;border:0;
  border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.onb .onb-back svg{width:24px;height:24px}
/* F2: step mark 13 / 500 · title 22 / 700 · group label 12 / 500 · chip 13 / 500 · row name 15 / 600 · value 13 / 500 ·
   primary 15 / 600 */
.onb .onb-mark{font-size:13px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-title{margin:0 0 16px;font-size:22px;font-weight:700;line-height:1.28;letter-spacing:-.4px;color:var(--ink)}
.onb .onb-title:focus,.onb .onb-sheet-t:focus{outline:none}
.onb .onb-lab{margin:16px 0 8px;font-size:12px;font-weight:500;color:var(--sub)}
:is(.onb,#intro) .onb-foot{position:fixed;left:0;right:0;bottom:0;z-index:49;max-width:520px;margin:0 auto;
  padding:14px var(--gutter) calc(18px + env(safe-area-inset-bottom));background:linear-gradient(rgba(255,255,255,0),#FFFFFF 26%)}
.onb .onb-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:0;border:0;
  border-radius:14px;background:linear-gradient(180deg,#1E8A68,#17785A);color:#FFFFFF;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
/* F6: the grey primary is --well with --faint words, and stays tappable (onboard.js onbNudge) */
.onb .onb-cta.onb-off{background:var(--well);color:var(--faint);cursor:default}
.onb .onb-chips{display:flex;flex-wrap:wrap;gap:8px}
.onb .onb-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 18px;
  border:1px solid var(--line);border-radius:999px;background:#FFFFFF;color:var(--ink);font:inherit;font-size:13px;font-weight:500;
  cursor:pointer}
/* F3: a chosen chip is selected, so ink - the accent is the one action */
.onb .onb-chip:not(.on){border-color:transparent;box-shadow:var(--ring)}
.onb .onb-chip.on{border-color:var(--ink);background:var(--ink);color:#FFFFFF}

/* ---- 1 / 8 생년월일: a 56 px row of three segments; the value rolls inside its segment and lifts while dragged ---- */
.onb .onb-date{display:flex;gap:8px;height:56px}
.onb .onb-seg{position:relative;flex:1;min-width:0;height:56px;display:flex;align-items:center;justify-content:center;gap:3px;
  margin:0;padding:0 8px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:none;font:inherit;color:var(--ink);
  white-space:nowrap;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .15s,background .15s}
.onb .onb-seg[hidden]{display:none}
.onb .onb-seg.onb-y{flex:1.35}
.onb .onb-seg small{font-size:13px;font-weight:500;color:var(--sub)}
.onb .onb-roll{display:block;height:56px;overflow:hidden}
.onb .onb-col{display:flex;flex-direction:column;transform:translateY(calc(-17px + var(--dy, 0px)));transition:transform .18s ease-out}
.onb .onb-col b{display:block;height:30px;line-height:30px;text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.onb .onb-pv,.onb .onb-nv{color:var(--sub);opacity:0}
.onb .onb-lift :is(.onb-pv,.onb-nv){opacity:1}
.onb .onb-seg.onb-lift{z-index:1;scale:none;border-radius:12px;border-bottom-color:transparent;background:#FFFFFF;
  box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 16%,transparent)}
.onb .onb-lift .onb-col{transition:none}
.onb .onb-ud{position:relative;flex:none;width:8px;height:14px;margin:0 0 0 6px}
.onb .onb-ud::before,.onb .onb-ud::after{content:"";position:absolute;left:1.5px;width:5px;height:5px;border:solid var(--faint);
  border-width:1.6px 1.6px 0 0}
.onb .onb-ud::before{top:1px;transform:rotate(-45deg)}
.onb .onb-ud::after{bottom:1px;transform:rotate(135deg)}
/* P13 (a): the number box sits where the segment was */
.onb .onb-seg.onb-type{flex:1;gap:2px;padding:0 4px;border-bottom:2px solid var(--ink);border-radius:12px 12px 0 0;background:#FFFFFF;
  cursor:text}
.onb .onb-din{flex:none;width:48px;min-width:0;height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  outline:none;font:inherit;font-size:17px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);
  caret-color:var(--accent)}
/* F1: the year's box keeps the year segment's width and holds four digits */
.onb .onb-seg.onb-type.onb-y{flex:1.35}
.onb .onb-y .onb-din{width:56px}
/* P21 C17: the untouched date is grey until the first move */
.onb .onb-live{margin:12px 0 0;font-size:15px;font-weight:600;letter-spacing:-.2px;color:var(--ink)}
.onb .onb-live.onb-rest{color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-live.onb-bad{color:var(--warn)}
.onb .onb-live small{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--sub)}

/* ---- 준비 확인: the live card's three lines as rows (F5 56, two lines 72), checked in ink, the source line 12 / 500 ---- */
.onb .onb-ready{border-top:1px solid var(--line)}
.onb .onb-rline{display:flex;align-items:center;gap:12px;min-height:56px;margin:0;padding:15px 0 14px;border-bottom:1px solid var(--line);
  cursor:pointer}
/* The 20 px box (6 / 8's check box) drawn on a 44 px input; the -12 px margins keep the hit area 44 and the row 56. */
.onb .onb-rline input{position:relative;flex:none;width:44px;height:44px;margin:-12px;appearance:none;-webkit-appearance:none;border:0;
  background:none;cursor:pointer}
.onb .onb-rline input::before{content:"";position:absolute;left:12px;top:12px;box-sizing:border-box;display:grid;place-items:center;
  width:20px;height:20px;border:2px solid var(--faint);border-radius:6px;font-size:12px;font-weight:700;color:#FFFFFF}
.onb .onb-rline input:checked::before{content:"\2713";background:var(--ink);border-color:var(--ink)}
.onb .onb-rline span{font-size:15px;font-weight:600;line-height:21px;color:var(--ink);word-break:keep-all}
.onb .onb-src{margin:12px 0 0;font-size:12px;font-weight:500;color:var(--sub)}

/* ---- 3 / 8 끼니 수: the 끼니 시각 fold (F5 rows 56, F4 one chevron) ---- */
.onb .onb-fold{margin-top:14px}
.onb .onb-fold>summary{display:flex;align-items:center;gap:8px;min-height:56px;list-style:none;border-top:1px solid var(--line);
  font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.onb .onb-fold>summary::-webkit-details-marker{display:none}
.onb .onb-fold>summary small{font-size:13px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-fold>summary::after{content:"\203A";margin-left:auto;color:var(--sub);transform:rotate(90deg)}
.onb .onb-fold[open]>summary::after{transform:rotate(-90deg)}
.onb .onb-rows{margin-top:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.onb .onb-kv{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin:0;padding:12px 0;border:0;background:none;
  font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.onb .onb-kv+.onb-kv{border-top:1px solid var(--line)}
.onb .onb-k{flex:none;width:92px;font-size:15px;font-weight:600;color:var(--ink)}
.onb .onb-v{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-chev{flex:none;width:12px;text-align:right;font-size:15px;font-weight:600;color:var(--sub)}

/* ---- 3 / 8 끼니 시각 sheet (P13 b; F7 one sheet shape: 20 px top radius, title 17 / 700 left, primary 52 / 14) ---- */
.onb .onb-scrim{position:fixed;inset:0;z-index:50;background:var(--scrim)}
.onb .onb-sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;max-width:520px;margin:0 auto;
  padding:9px 20px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;background:#FFFFFF}
.onb .onb-grip{width:36px;height:4px;margin:0 auto 11px;border-radius:999px;background:#D5D8DD}
.onb .onb-shead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.onb .onb-sheet-t{flex:1;min-width:0;margin:0;font-size:17px;font-weight:700;color:var(--ink);text-align:left}
.onb .onb-x{position:relative;flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:0;
  border-radius:50%;background:var(--well);color:var(--ink);cursor:pointer}
.onb .onb-x::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.onb .onb-x svg{width:14px;height:14px}
.onb .onb-wheels{display:flex;gap:8px;margin:0 0 14px}
.onb .onb-wheel{box-sizing:border-box;flex:1;min-width:0;height:220px;margin:0;padding:88px 0;overflow-y:auto;scroll-snap-type:y mandatory;
  overscroll-behavior:contain;border-radius:12px;background:var(--well);scrollbar-width:none}
.onb .onb-wheel::-webkit-scrollbar{display:none}
.onb .onb-wheel button{display:block;width:100%;height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;
  scroll-snap-align:center;font:inherit;font-size:15px;font-weight:600;color:var(--sub);text-align:center;font-variant-numeric:tabular-nums;
  cursor:pointer}
.onb .onb-wheel button[aria-selected="true"]{font-size:17px;font-weight:700;color:var(--ink);background:#FFFFFF}

/* ---- 4 / 8 장 보는 날 (P13 c): seven chips on one line; below 360 the row bleeds to both screen edges ---- */
.onb .onb-days{flex-wrap:nowrap;gap:0 clamp(0px,calc((100% - 308px) / 6),8px)}
.onb .onb-days .onb-chip{flex:1 1 0;min-width:44px;padding:0}
@media (max-width:359px){.onb .onb-days{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}

/* ---- 5 / 8 큐브 틀: the live radio rows (settings.css .se-pick) at F5 56 px, 72 with a second line; ink type ---- */
.onb .onb-picks{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.onb .onb-picks .se-pick{min-height:56px;padding:0;color:var(--ink);font:inherit}
.onb .onb-picks .se-pick:has(.se-pickt small){min-height:72px}
.onb .se-pickt b{font-size:15px;font-weight:600;color:var(--ink)}
.onb .se-pickt small{margin-top:4px;font-size:13px;font-weight:500;color:var(--sub)}
.onb .se-pick em{font-weight:600}
.onb .se-chev{flex:none;font-size:15px;font-weight:600;color:var(--sub)}

/* ---- 6 / 8 안 먹이는 것: the live check rows (settings.css .se-ck) in two columns, the box filled ink (F3); 알레르기 in
   the 빼는 재료 row's name type (.onb-k, user 2026-10-22: the two read alike) ---- */
.onb .onb-alab{font-size:15px;font-weight:600;color:var(--ink)}
.onb .onb-alsrc{margin:-4px 0 4px;font-size:12px;font-weight:500;color:var(--sub)}
.onb .onb-al .se-ck{padding:0;font-size:13px;font-weight:500}
.onb .onb-al .se-ck:nth-child(-n+2){border-top:0}
.onb .se-ck i{border-color:var(--faint)}
.onb :is(.se-ck[aria-pressed="true"],.se-ck[aria-checked="true"],.se-ck:has(> input:checked)) i{background:var(--ink);border-color:var(--ink)}
.onb .onb-exlab{margin-top:24px}

/* ---- 7 / 8 먹여 본 재료 and 8 / 8 이번 주 재료 ---- */
.onb .onb-sub{margin:10px 0 6px;font-size:11px;font-weight:400;color:var(--sub)}
.onb .onb-cnt{margin:16px 0 0;font-size:13px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-relay{margin:0 0 4px}
.onb .onb-hrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 16px}
.onb .onb-hrow .onb-title{margin:0}
.onb .onb-newn{flex:none;font-size:13px;font-weight:500;color:var(--sub);font-variant-numeric:tabular-nums}
.onb .onb-grain{margin-top:0}
.onb .onb-grain b{margin-left:6px;font-size:13px;font-weight:500;color:var(--ink)}
/* the app's 새 재료 mark (prep.css .nx-newb) after the name, 12 / 500, light on the ink chip as the frame draws it */
.onb .onb-chip .nx-newb{margin-left:6px;padding:2px 6px;border-radius:5px;background:var(--well);color:var(--ink);font-size:12px;font-weight:500}

/* ---- the plan flow's pick screen (BUILD 3, design B): 끼니 M, group labels with picked / cap, the picked chips then
   전체 N ›, an 8 px dot before a name - 새 재료 green, cubes by days left in three hues that avoid green - and the legend.
   The dots are told apart on the white chip and on the ink one (walk.js measures each pair). ---- */
.onb{--pf-new:#22A06B;--pf-c0:#E5484D;--pf-c1:#F5A300;--pf-c2:#3E7BFA}
.onb .onb-pfm{margin:-4px 0 14px;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.onb .onb-lab[data-grpl] b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.onb .onb-dot{flex:none;width:8px;height:8px;margin:0 6px 0 -4px;border-radius:50%}
.onb .onb-dn{background:var(--pf-new)}
.onb .onb-c0{background:var(--pf-c0)}
.onb .onb-c1{background:var(--pf-c1)}
.onb .onb-c2{background:var(--pf-c2)}
.onb .onb-cn{margin-left:4px;font-variant-numeric:tabular-nums}
.onb .onb-chip.onb-more{color:var(--sub)}
.onb .onb-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:18px 0 0;font-size:12px;font-weight:500;color:var(--sub)}
.onb .onb-legend span{display:inline-flex;align-items:center}
.onb .onb-legend .onb-dot{margin:0 5px 0 0}

/* ---- 짜는 중 and the refusals: the bowl, the line centred, rows 56 with a 20 px tick ---- */
.onb .onb-build{display:flex;flex-direction:column;align-items:center;padding-top:68px}
.onb .onb-bowl{width:96px;height:96px}
.onb .onb-title.onb-hero{margin:23px 0 0;text-align:center}
.onb .onb-tick{align-self:stretch;margin:22px 0 0;padding:0;list-style:none}
.onb .onb-tick li{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;
  color:var(--sub)}
.onb .onb-tick li.on{color:var(--ink)}
.onb .onb-tick i{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:var(--well)}
.onb .onb-tick li.on i{background:var(--accent)}
.onb .onb-tick li.on i::after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;border:solid #FFFFFF;border-width:0 0 2px 2px;
  transform:rotate(-45deg)}
.onb .onb-why{align-self:stretch;margin:28px 0 0;font-size:13px;font-weight:500;line-height:1.6;color:var(--ink);word-break:keep-all}
.onb .onb-build .onb-lab{align-self:stretch;margin-top:37px}
.onb .onb-outs{display:flex;flex-wrap:wrap;gap:6px;align-self:stretch}
.onb .onb-out{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--well);color:var(--sub);font-size:13px;font-weight:500;text-decoration:line-through}

/* ---- the 큐브 틀 and 빼는 재료 sheets: the time sheet's shape (F7), a body that scrolls, the primary 52 / 14 ---- */
.onb .onb-pane{display:flex;flex-direction:column;max-height:88vh}
.onb .onb-pbody{min-height:0;margin:0 -20px;padding:0 20px;overflow-y:auto;overscroll-behavior:contain}
.onb .onb-pane .onb-cta{margin-top:12px}
.onb .onb-cta:disabled{background:var(--well);color:var(--faint);cursor:default}

/* ---- the nudge (Function 16, P27 d): a tap on a grey primary moves the control that is missing, two 6 px shakes in
   360 ms. Reduced motion: no shake (app.css stops every animation); its lines turn ink for 600 ms instead. ---- */
@keyframes onb-nudge{0%,25%,50%,75%,100%{translate:0}12.5%,62.5%{translate:-6px}37.5%,87.5%{translate:6px}}
.onb .onb-nudge{animation:onb-nudge .36s linear}
@media (prefers-reduced-motion:reduce){
  .onb .onb-col{transition:none}
  .onb .onb-date.onb-nudge .onb-seg{border-bottom-width:3px}
  .onb .onb-feeds.onb-nudge .onb-chip,.onb .onb-ready.onb-nudge .onb-rline{border-color:var(--ink)}
  .onb .onb-wheels.onb-nudge .onb-wheel{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .onb .onb-newn.onb-nudge,.onb .onb-lab.onb-nudge{color:var(--ink)}
  .onb .onb-chips.onb-nudge .onb-chip{border-color:var(--ink)}
}