/* baby.css - 아이, 달력. Owner: slice S5. Every selector starts with .ch- (CONTRACT_shell.md 6.2, 6.3); tokens and u- parts live in app.css. */

/* cards (blueprint 아이 탭 layout; design-up DU1: each block a white surface, 12 px apart) */
.ch-root .ch-card { margin-bottom:12px; padding:0; overflow:hidden; border:0; border-radius:22px; background:var(--card); box-shadow:var(--ring),var(--shadow-s); }
.ch-root .ch-foot { margin:2px 0 16px; text-align:center; font-size:var(--fs-s); color:var(--sub); }

/* child card (direction D): the button opening 설정 lies flat in the card, then the stage bar, then 검진 */
.ch-root .ch-kid { display:block; width:100%; border:0; border-radius:0; padding:0 16px; background:none; text-align:left; cursor:pointer; color:var(--ink); }
.ch-root .ch-kidh { display:flex; align-items:center; gap:12px; padding:14px 0 6px; background:none; }
.ch-root .ch-face { width:56px; height:56px; flex:none; border-radius:50%; object-fit:contain; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.ch-root .ch-kidt { flex:1; min-width:0; }
.ch-root .ch-kidt b { display:block; font-size:var(--fs-h2); letter-spacing:var(--ls-title); }
.ch-root .ch-kids { display:block; font-size:var(--fs-m); color:var(--sub); }
.ch-root .ch-chev { flex:none; display:inline-grid; place-items:center; width:26px; height:26px; padding:0; border-radius:50%; background:var(--well);
  font-size:13px; color:var(--ink); }

/* the four stages: a quarter each, the ones before filled, the current one tinted, the dot at the age */
.ch-root .ch-stg { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px; margin:10px 16px 6px; }
.ch-root .ch-stg i { height:5px; border-radius:3px; background:var(--track); }
.ch-root .ch-stg i.ch-on { background:linear-gradient(90deg, var(--accent) var(--p, 0%), var(--accent-soft) 0); }
.ch-root .ch-stg i.ch-past { background:var(--accent); }
.ch-root .ch-mark { position:absolute; top:-5px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #fff; }
.ch-root .ch-stl { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2px; margin:0 16px 4px; font-size:var(--fs-s); color:var(--sub); line-height:1.35; }
.ch-root .ch-stl b { display:block; color:var(--ink); font-weight:600; }
.ch-root .ch-stl .ch-on b { color:var(--accent-2); font-weight:700; }

/* 검진 (K10-K14): a 44 px head row, the figures in ink, one strip per value on a shared 5 · 50 · 95 scale. A strip is the
   stage bar's track and dot (K11, no fill: a percentile is not progress, K12); outside 5-95 the dot sits in an end cap
   and it, its number and the figure take --warn (K10 c). Every strip gets the cap's room so the scale stays aligned.
   K16: the 5-95 track is the 정상범위 band - a uniform tint (no fill to the dot, K12) between the grey track (1.19:1 on
   white, too faint to read as a band) and the earlier dots; its label takes the 50's place on the scale row. */
.ch-root .ch-ck { margin-top:8px; padding:0 16px 14px; }
.ch-root .ch-ck.ch-ck0 { padding-bottom:0; }
.ch-root .ch-ck .ch-row { border-top:1px solid var(--line); }
.ch-root .ch-ck .ch-row.ch-ckh { min-height:var(--tap); padding:10px 0; font-size:var(--fs-s); font-weight:600; color:var(--sub); }
.ch-root .ch-ckt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-root .ch-ckt b { color:var(--ink); font-weight:700; }
.ch-root .ch-ckf { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:20px; row-gap:2px; padding:0 0 4px; }
.ch-root .ch-ckv { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ch-root .ch-ckk { font-size:13px; font-weight:600; color:var(--sub); }
.ch-root .ch-cku { font-size:14px; font-weight:600; color:var(--sub); }
.ch-root .ch-ck .ch-fn { color:var(--ink); line-height:1.15; }
.ch-root .ch-ck .ch-fn.ch-warn { color:var(--warn); }
.ch-root .ch-strips { display:grid; grid-template-columns:48px minmax(0, 1fr); column-gap:8px; }
.ch-root .ch-strips > .ch-ckk { padding-top:19px; line-height:18px; white-space:nowrap; }
.ch-root .ch-strip { position:relative; height:40px; }
.ch-root .ch-strips.ch-trail .ch-strip { height:54px; }
.ch-root .ch-zone { position:absolute; inset:0 6px 0 0; }
.ch-root .ch-roomlo .ch-zone { left:16px; }
.ch-root .ch-roomhi .ch-zone { right:16px; }
.ch-root .ch-track { position:absolute; left:0; right:0; top:25.5px; height:5px; border-radius:3px; background:var(--rec-veg-lite); }
.ch-root .ch-cap { position:absolute; top:25.5px; width:16px; height:5px; background:var(--warn-soft); }
.ch-root .ch-caplo { left:0; border-radius:3px 0 0 3px; }
.ch-root .ch-caphi { right:0; border-radius:0 3px 3px 0; }
.ch-root .ch-dot { position:absolute; top:20.5px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #fff; }
.ch-root .ch-dot > b { position:absolute; bottom:19px; left:50%; transform:translateX(-50%); font-size:var(--fs-s); font-weight:700; line-height:14px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ch-root .ch-dot.ch-warn { background:var(--warn); }
.ch-root .ch-dot.ch-warn > b { color:var(--warn); }
.ch-root .ch-was { position:absolute; top:24px; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:color-mix(in srgb, var(--accent) 45%, #fff); box-shadow:0 0 0 2px #fff; }
.ch-root .ch-was > small { position:absolute; top:12px; left:50%; transform:translateX(-50%); font-size:var(--fs-s); font-weight:500; line-height:14px; color:var(--faint); font-variant-numeric:tabular-nums; }
.ch-root .ch-scale { grid-column:2; position:relative; height:16px; }
.ch-root .ch-scale .ch-zone > span { position:absolute; top:0; transform:translateX(-50%); font-size:var(--fs-s); font-weight:500; line-height:14px; color:var(--faint); font-variant-numeric:tabular-nums; }
.ch-root .ch-cksrc { margin:0; padding:6px 0 0; font-size:var(--fs-s); font-weight:500; color:var(--faint); white-space:nowrap; }

/* no birth date */
.ch-root .ch-nobirth { padding:22px 18px 18px; text-align:center; }
.ch-root .ch-nbimg { display:block; width:96px; height:96px; margin:0 auto 6px; object-fit:contain; }
.ch-root .ch-nobirth b { display:block; margin-bottom:4px; font-size:var(--fs-title); }
.ch-root .ch-nobirth span { display:block; margin-bottom:14px; font-size:var(--fs-m); color:var(--sub); }

/* 지금까지: three figures, each a door to its sheet */
.ch-root #kd-nums { padding:14px 12px 12px; }
.ch-root .ch-sofar { margin:0; padding:0 4px 10px; font-size:var(--fs-s); font-weight:600; color:var(--sub); }
.ch-root .ch-figs { display:flex; gap:8px; }
.ch-root .ch-fig { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:78px;
  margin:8px 0; padding:4px; border:0; border-radius:16px; background:var(--well); font:inherit; color:var(--ink); cursor:pointer; }
.ch-root .ch-fig:active { background:var(--well); }
.ch-root .ch-fl { font-size:var(--fs-s); font-weight:500; color:var(--sub); white-space:nowrap; }
.ch-root .ch-fn { font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); }

/* 관찰 중: the count opens its sheet, 반응 기록 the reaction sheet */
.ch-root .ch-watch { display:flex; align-items:stretch; }
.ch-root .ch-wrow { flex:1; min-width:0; }
.ch-root .ch-wrow .ch-chev { margin-left:auto; }
.ch-root .ch-watch .react-btn { flex:none; min-height:var(--tap); margin:8px 0; padding:0 0 0 16px; border:0; border-left:1px solid var(--line); border-radius:0;
  background:none; font:inherit; font-size:var(--fs-base); font-weight:700; color:var(--accent-2); white-space:nowrap; cursor:pointer; }

/* each block is its own card: no hairline under it */
.ch-root #kd-nums, .ch-root .ch-watch { border-bottom:0; border-radius:22px; }
.ch-root .ch-cal { padding:4px 12px 8px; }

/* calendar head: ‹ title › and the view switch */
.ch-root .ch-ch { display:flex; align-items:center; padding:8px 4px 4px; }
.ch-root .ch-calh { display:flex; align-items:center; gap:4px; min-width:0; }
.ch-root .ch-nv { width:30px; height:30px; flex:none; border:0; background:none; font-size:var(--fs-lead); font-weight:700; color:var(--sub); cursor:pointer; }
.ch-root .ch-nv:disabled { opacity:.35; cursor:default; }
.ch-root .ch-calt { min-width:96px; margin:0; text-align:center; font-size:var(--fs-lead); letter-spacing:var(--ls-title); }
/* A 36 px pill in a 44 px target: the transparent borders hold the tap height, the fill stops at the padding edge. */
.ch-root .ch-mode { margin:-4px 0 -4px auto; min-height:var(--tap); padding:0 12px; border:solid transparent; border-width:4px 0; border-radius:999px;
  background:var(--accent-soft); background-clip:padding-box; white-space:nowrap; font-size:var(--fs-s); font-weight:600; color:var(--accent); cursor:pointer; }

/* the grid: 7 columns, a square per day */
.ch-root .ch-wkh, .ch-root .ch-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; }
/* Under 360 the calendar card takes the full width, square-cornered, so a day stays 44 px wide. */
@media (max-width:359px) {
  .ch-root .ch-card.ch-cal { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:4px 0 8px; border-radius:0; }
  .ch-root .ch-cal .ch-ch { padding:8px 12px 4px; }
  .ch-root .ch-wkh, .ch-root .ch-grid { gap:1px; }
  .ch-root .ch-cal .ch-day { margin:8px 16px -8px; }
}
.ch-root .ch-wkh span { padding:2px 0 4px; text-align:center; font-size:var(--fs-s); color:var(--sub); }
.ch-root .ch-gridw { overflow:hidden; }
.ch-root .ch-gridw.ch-ease { transition:height .42s cubic-bezier(.2,.8,.25,1); }
.ch-root .ch-gridw.ch-grow .ch-dc { animation:ch-rowin .36s ease both; animation-delay:calc(var(--row, 0) * 40ms); }
@keyframes ch-rowin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .ch-root .ch-gridw.ch-ease { transition:none; }
  .ch-root .ch-gridw.ch-grow .ch-dc { animation:none; }
}
.ch-root .ch-dc { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; min-height:var(--tap); padding:6px 0 5px; border:0;
  border-radius:14px; background:var(--well); font-size:var(--fs-base); font-weight:700; color:var(--ink); cursor:pointer; }
.ch-root .ch-dc.ch-off { background:transparent; color:var(--faint); cursor:default; }
.ch-root .ch-dc.ch-on { background:var(--ink); color:#fff; box-shadow:0 6px 14px -6px rgba(20,20,20,.5); }
.ch-root .ch-dc.ch-out { visibility:hidden; }
.ch-root .ch-num { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; line-height:1; }
.ch-root .ch-dc.ch-rx .ch-num { box-shadow:0 0 0 2px var(--rx-ring); color:var(--rx-num); }
.ch-root .ch-dc.ch-on.ch-rx .ch-num { box-shadow:0 0 0 2px var(--rx-sel); color:#fff; }
.ch-root .ch-dots { display:flex; gap:2px; height:5px; }
.ch-root .ch-dots i { width:5px; height:5px; flex:none; border-radius:50%; background:var(--accent); }
.ch-root .ch-dots i.ch-dn { background:var(--box); }
.ch-root .ch-dots i.ch-df { background:var(--amber); }
.ch-root .ch-dc.ch-on .ch-dots i { background:#fff; }
.ch-root .ch-dc.ch-on .ch-dots i.ch-dn { background:rgba(255,255,255,.45); }
.ch-root .ch-dc.ch-on .ch-dots i.ch-df { background:var(--amber-soft); }

/* the selected day: reactions, meals (each a door to 끼니 상세), the other day rows */
/* a white panel under a hairline, its rows inset 16 px like every row of the tab (d2 note 3) */
.ch-root .ch-day { margin:8px 4px -8px; padding:4px 0 10px; border-top:1px solid var(--line); background:var(--card); }
.ch-root .ch-dh { margin:0; padding:10px 0 6px; font-size:var(--fs-m); font-weight:700; color:var(--sub); }
.ch-root .ch-rxl { margin:4px 0 6px; padding:9px 11px; border-radius:12px; background:#FDEDEB; font-size:var(--fs-m); line-height:1.5; color:#8E2B22; }
.ch-root .ch-rxl b { color:#B3362B; }
.ch-root .ch-mr { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap); padding:7px 0; border:0; border-top:1px solid var(--line);
  background:none; text-align:left; font-size:var(--fs-base); color:var(--ink); cursor:pointer; }
.ch-root .ch-dh + .ch-mr, .ch-root .ch-rxl + .ch-mr { border-top:0; }
.ch-root .ch-tm { width:44px; flex:none; font-size:var(--fs-base); font-weight:500; font-variant-numeric:tabular-nums; color:var(--sub); }
.ch-root .ch-mn { flex:1; min-width:0; font-size:var(--fs-body); font-weight:600; overflow-wrap:anywhere; }
.ch-root .ch-bowl { width:28px; height:28px; flex:none; object-fit:contain; }
.ch-root .ch-dl { margin:4px 0 6px; font-size:var(--fs-base); color:var(--sub); }
.ch-root .ch-dr { display:flex; align-items:baseline; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:var(--fs-base); }
.ch-root .ch-dk { width:44px; flex:none; font-size:var(--fs-base); font-weight:500; color:var(--sub); }
.ch-root .ch-dv { min-width:0; }

/* number sheets and the 관찰 중 sheet: rows */
.ch-sheet .ch-sum { display:flex; align-items:baseline; gap:10px; padding:10px 0; font-size:var(--fs-base); color:var(--sub); }
.ch-sheet .ch-sum b { margin-left:auto; color:var(--ink); text-align:right; }
.ch-sheet .ch-sm { margin:12px 0 2px; font-size:var(--fs-m); font-weight:700; color:var(--sub); }
.ch-sheet .ch-sr { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--tap); padding:8px 0; border:0;
  border-top:1px solid var(--line); background:none; text-align:left; font-size:var(--fs-body); color:var(--ink); }
.ch-sheet .ch-sbtn { cursor:pointer; }
.ch-sheet .ch-sd { flex:none; font-size:var(--fs-s); font-weight:700; color:var(--sub); }
.ch-sheet .ch-sn { flex:1; min-width:0; font-weight:700; }
.ch-sheet .ch-sx, .ch-sheet .ch-sst { flex:none; font-size:var(--fs-s); font-weight:700; color:var(--warn); }
.ch-sheet .ch-sst { color:var(--sub); }
.ch-sheet .ch-chev { flex:none; color:var(--faint); }
.ch-sheet .ch-sempty { margin:12px 0; font-size:var(--fs-base); color:var(--sub); }
.ch-sheet .ch-rxr { padding:12px 0; border-top:1px solid var(--line); }
.ch-sheet .ch-rxr:first-child { border-top:0; }
.ch-sheet .ch-rxh { display:flex; align-items:baseline; gap:10px; font-size:var(--fs-body); }
.ch-sheet .ch-rxs { margin:2px 0 0; font-size:var(--fs-base); font-weight:700; color:var(--danger); }
.ch-sheet .ch-rxd { margin:2px 0 0; font-size:var(--fs-m); color:var(--sub); }
.ch-sheet .ch-rxa { display:flex; gap:8px; margin-top:8px; }
.ch-sheet .ch-sb { min-height:var(--tap); padding:0 12px; font-size:var(--fs-base); }
.ch-sheet .ch-sfoot { margin:14px 0 4px; font-size:var(--fs-s); color:var(--sub); }
.ch-sheet .ch-wr { min-height:56px; }
.ch-sheet .ch-wr .ch-sd { width:44px; }
.ch-sheet .ch-wgo { margin-top:16px; }

/* 끼니 상세 after an off-plan record (frame meal-watch): 관찰 중 under 먹인 것, a door to the same sheet */
.ch-mw { display:flex; align-items:center; gap:10px; width:100%; min-height:56px; margin-top:4px; padding:0; border:0; border-top:1px solid var(--line);
  background:none; font:inherit; font-size:var(--fs-body); color:var(--ink); text-align:left; cursor:pointer; }
.ch-mw b { font-weight:600; }

/* key + value rows (검진) */
.ch-root .ch-row { display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:12px 0; border:0;
  border-top:1px solid var(--line); background:none; text-align:left; font-size:var(--fs-body); color:var(--ink); cursor:pointer; }
.ch-root .ch-row:first-child { border-top:0; }
.ch-root .ch-row:active { background:var(--well); }
.ch-root .ch-rk { font-weight:700; }
.ch-root .ch-rv { margin-left:auto; padding:5px 10px; border-radius:999px; background:var(--accent-soft); font-size:var(--fs-m); font-weight:700; color:var(--accent-2); text-align:right; }