:root{
  --paper:#fff8ed; --surface:#fffdfa; --surface-2:#f7f0e6;
  --ink:#3b4358; --muted:#7d7d89; --line:#e9ddcf; --line-soft:#f1e9df;
  --a1:#4f9f91; --a1-soft:#dff2ed; --a1-deep:#3d8578;
  --a2:#df7f72; --a2-soft:#fde7e0; --a2-deep:#c96859;
  /* --a1-deep/--a2-deep 는 로고(.brand-mark)에서 얼굴을 두르는 링이고 앱 아이콘의
     링 색과 같은 값이다. 주간에는 종이보다 어둡게(4.1:1) 눌러 윤곽을 만들고,
     야간에는 반대로 어두운 배경에 묻히지 않도록 중간 톤으로 올린다. */
  --feed:#6fa3d8;
  --sun:#f4c85b; --lilac:#9b8dc6;
  --warn:#d26a45; --ok:#4f9f91;
  /* 그래프 전용 아기 색. --a1/--a2와 같은 계열이되 적록색약에서도 두 선이
     갈리도록 명도를 옮긴 값이다 (dataviz 6개 검사 통과, 최소 ΔE 8.2). */
  --chart-a1:#44a386; --chart-a2:#e56a5d;
  --r:28px; --shadow:0 12px 32px -22px rgba(80,66,53,.35),0 2px 8px rgba(80,66,53,.05);
  --display:"Arial Rounded MT Bold","NanumSquareRound","Apple SD Gothic Neo",system-ui,sans-serif;
}
html[data-theme="night"]{
  --paper:#20283d; --surface:#2b344d; --surface-2:#343e59;
  --ink:#fff9ed; --muted:#b9bfd0; --line:#46516e; --line-soft:#3a4561;
  --a1:#79c8b8; --a1-soft:#294f50; --a1-deep:#4f9f91;
  --a2:#f2a294; --a2-soft:#593e48; --a2-deep:#c98d80;
  --feed:#9dc3e6;
  --sun:#f5d273; --lilac:#b5a8dc; --warn:#f09b73;
  --chart-a1:#4aa88a; --chart-a2:#e96256;
  --shadow:0 18px 38px -24px rgba(4,8,20,.7);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior:none;
  background-image:radial-gradient(circle at 9% 5%,rgba(244,200,91,.16) 0 3px,transparent 4px),radial-gradient(circle at 92% 12%,rgba(155,141,198,.12) 0 4px,transparent 5px);
  background-size:84px 84px,116px 116px;
  overflow:hidden;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 눌리는 표면 (버튼 손맛 공통) ----------
   각 버튼은 아래 토큰만 선언한다.
   --press-depth  : 아래로 솟은 입체 그림자 높이 (0이면 평평한 표면)
   --press-squish : 눌릴 때 줄어드는 비율
   --press-line   : 입체 그림자 색
   목록 A(전체)는 눌림 반응, 목록 B(솟음)는 입체 그림자까지 가진다.
   목록 A 중 파티클이 튀는 범위는 app.js의 POP_TARGETS 와 맞춘다. */
.act,.save,.step-btn,.mini,.btn,.datenav button,.update-chip,.icon-chip,.pin-key,
.chip,.tabs button,.gtabs button,.m-close,.seg button,.toast button,.cal-foot button,.brand{
  --press-depth:0px;
  --press-sink:1px;
  --press-squish:.96;
  --press-line:var(--line);
  transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease;
}
.act:active,.save:active,.step-btn:active,.mini:active,.btn:active,.datenav button:active,.update-chip:active,.icon-chip:active,.pin-key:active,
.chip:active,.tabs button:active,.gtabs button:active,.m-close:active,.seg button:active,.toast button:active,.cal-foot button:active,.brand:active{
  transform:translateY(var(--press-sink)) scale(var(--press-squish));
}
.act .ic,.save .ic,.step-btn .ic,.mini .ic,.btn .ic,.datenav button .ic,.update-chip .ic,.icon-chip .ic,.pin-key .ic,
.chip .ic,.tabs button .ic,.gtabs button .ic,.m-close .ic,.seg button .ic,.toast button .ic,.cal-foot button .ic,.brand .ic{
  transition:transform .2s cubic-bezier(.2,.9,.3,1.4);
}
.act:active .ic,.save:active .ic,.step-btn:active .ic,.mini:active .ic,.btn:active .ic,.datenav button:active .ic,.update-chip:active .ic,.icon-chip:active .ic,.pin-key:active .ic,
.chip:active .ic,.tabs button:active .ic,.gtabs button:active .ic,.m-close:active .ic,.seg button:active .ic,.toast button:active .ic,.cal-foot button:active .ic,.brand:active .ic{
  transform:translateY(-2px) rotate(-7deg) scale(1.12);
}
/* B. 솟은 버튼: 눌리면 그림자가 짧아지고 그만큼 내려앉는다 */
.act,.save,.step-btn,.mini,.btn,.datenav button,.update-chip,.icon-chip,.pin-key,.chip{
  --press-sink:max(1px,calc(var(--press-depth) - 1px));
  box-shadow:0 var(--press-depth) 0 var(--press-line);
}
.act:active,.save:active,.step-btn:active,.mini:active,.btn:active,.datenav button:active,.update-chip:active,.icon-chip:active,.pin-key:active,.chip:active{
  box-shadow:0 1px 0 var(--press-line);
}
/* 잠긴 동작 버튼은 눌림 반응 없이 가라앉아 있는다 */
.act[aria-disabled="true"],.mini[aria-disabled="true"],.btn[aria-disabled="true"]{
  opacity:.5;box-shadow:none;cursor:default;
}
.act[aria-disabled="true"]:active,.mini[aria-disabled="true"]:active,.btn[aria-disabled="true"]:active{
  transform:none;box-shadow:none;
}

/* ---------- 손그림 아이콘 ---------- */
.ic{display:inline-block;width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.26em}
.ic-poop{color:#a9764d}
.ic-pee{color:#d9a534}
.ic-feed{color:var(--feed)}
.ic-bath{color:#65aebc}
.ic-weight{color:#9182bd}
.ic-temp{color:#df7f72}
.ic-memo{color:#718aa4}
html[data-theme="night"] .ic-poop{color:#c9946a}
html[data-theme="night"] .ic-pee{color:#f0c85f}
html[data-theme="night"] .ic-feed{color:var(--feed)}
html[data-theme="night"] .ic-bath{color:#8fcbd4}
html[data-theme="night"] .ic-weight{color:#b9ace0}
html[data-theme="night"] .ic-temp{color:#f2a294}
html[data-theme="night"] .ic-memo{color:#9db5cf}

/* ---------- shell ---------- */
.app{width:100%;height:100%;max-width:1280px;margin:0 auto;padding:22px 24px;display:flex;flex-direction:column;overflow:hidden}
.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:24px}
#view{flex:1;min-height:0;overflow:auto}
#view.view-today,#view.view-sheet,#view.view-growth{overflow:hidden}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:21px;font-weight:900;letter-spacing:-.045em;white-space:nowrap}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
/* ---------- 로고 ----------
   앱 아이콘(icon-source-bold.svg)과 같은 얼굴이다. .baby-face 의 블롭을 31px 로
   줄인 것이라 수치는 전부 원본 48 기준값 × 31/48 이다.
   뒤(초록) 얼굴은 아이콘에서 좌우로 뒤집힌 쪽이다. transform 은 brand-bob
   애니메이션이 쓰고 있어 못 쓰므로, 뒤집힌 좌표를 그대로 박아 넣는다. 곱슬만이
   아니라 눈·입도 1.3px 씩 왼쪽으로 간다.
   앞 얼굴은 초록의 오른쪽 눈 끝(22.9px)에 링이 닿지 않는 25.5px 부터 놓는다.
   예전에는 31 중 12px 을 겹쳐서 초록의 오른쪽 눈이 통째로 가려지고 입이
   절반 잘려 있었다. */
.brand-mark{position:relative;width:59px;height:42px;flex:0 0 auto}
.brand-mark:after{content:"";position:absolute;right:-2px;top:0;width:7px;height:7px;background:var(--sun);clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}
.brand-mark i{position:absolute;bottom:2px;width:31px;height:31px;border-radius:48% 52% 50% 46%;
  border:2px solid var(--surface);--mark-ring:var(--a1-deep);
  box-shadow:0 0 0 2px var(--mark-ring),0 4px 10px rgba(61,64,80,.12);
  overflow:hidden;transform-origin:50% 100%}
.brand-mark i:first-child{left:1px;background:var(--a1)}
.brand-mark i:last-child{left:25.5px;background:var(--a2);--mark-ring:var(--a2-deep)}
/* 눈·입·곱슬은 얼굴색이 아니라 var(--surface) 로 뺀다. 야간에는 얼굴이 밝아지고
   surface 가 어두워져서, 한 색으로 두 테마가 다 살아난다.
   아래 좌표는 앞(분홍) 얼굴 기준이고, 뒤집힌 뒤(초록) 얼굴은 그 아래에서 덮어쓴다. */
.brand-mark i:before{content:"";position:absolute;left:7px;top:11.5px;width:3.2px;height:3.9px;border-radius:50%;background:var(--surface);box-shadow:11px 0 0 var(--surface)}
.brand-mark i:after{content:"";position:absolute;left:10.3px;top:16.7px;width:8.4px;height:5.2px;border-bottom:2px solid var(--surface);border-radius:0 0 9px 9px}
.brand-mark b{position:absolute;left:18.7px;top:5.1px;width:5.8px;height:4.5px;background:var(--surface);border-radius:5.2px 5.2px 1.3px 5.2px;transform:rotate(22deg)}
.brand-mark i:first-child:before{left:5.7px}
.brand-mark i:first-child:after{left:8.3px}
.brand-mark i:first-child b{left:2.5px;border-radius:5.2px 5.2px 5.2px 1.3px;transform:rotate(-22deg)}
.clock{justify-self:end;display:grid;grid-template-columns:auto 1px auto;align-items:center;gap:11px;color:var(--muted);background:var(--surface);padding:9px 13px;border:1px solid var(--line-soft);border-radius:17px;box-shadow:var(--shadow)}
.clock-now,.clock-age{display:flex;flex-direction:column;gap:2px;line-height:1.05;white-space:nowrap}
.clock-now{align-items:flex-end}
.clock-now span{font-size:10.5px;font-weight:700;letter-spacing:.01em}
.clock-now b{font-family:var(--display);font-size:16px;color:var(--ink);letter-spacing:-.025em}
.clock-divider{width:1px;height:29px;background:var(--line)}
.clock-age b{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.015em}
.top-status{justify-self:end;display:flex;align-items:stretch;gap:7px}
.update-chip{--press-depth:3px;--press-line:color-mix(in srgb,var(--ink) 62%,#000);--press-squish:.97;
  align-self:stretch;min-width:70px;padding:0 12px;border-radius:15px;background:var(--ink);color:var(--surface);font-size:12px;font-weight:900;white-space:nowrap}
.update-chip[disabled]{opacity:.65;cursor:wait}
/* 시계 옆 톱니. 업데이트 칩과 누름 반응만 나눠 갖고 생김새는 따로 간다 — 저쪽은 잠깐 나타나는 알림이고 이건 늘 있는 자리다. */
.icon-chip{--press-depth:3px;--press-line:color-mix(in srgb,var(--ink) 62%,#000);--press-squish:.97;
  align-self:stretch;width:46px;padding:0;border-radius:15px;background:var(--surface);color:var(--muted);border:1px solid var(--line-soft);box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.icon-chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.tabs{justify-self:center;display:flex;gap:5px;background:rgba(255,253,250,.68);padding:5px;border-radius:99px;border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
html[data-theme="night"] .tabs{background:rgba(43,52,77,.72)}
.tabs button{position:relative;padding:10px 18px;border-radius:99px;font-size:14px;font-weight:800;color:var(--muted);min-height:44px;overflow:hidden}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--surface);box-shadow:0 5px 12px rgba(59,67,88,.18)}
.tabs button[aria-selected="true"]:after{content:"";position:absolute;left:50%;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--sun);box-shadow:-7px 1px 0 -1px var(--sun),7px 1px 0 -1px var(--sun);transform:translateX(-50%)}

/* ---------- today ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.today-grid{height:100%;min-height:0}

.panel{position:relative;height:100%;min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;transition:box-shadow .25s ease,transform .25s ease}
.panel:before{content:"";position:absolute;z-index:-1;right:-74px;top:-90px;width:230px;height:210px;border-radius:46% 54% 48% 52%;background:var(--acc-soft);transform:rotate(-12deg)}
.panel[data-b="gigeon"]{--acc:var(--a1);--acc-soft:var(--a1-soft)}
.panel[data-b="mobin"]{--acc:var(--a2);--acc-soft:var(--a2-soft)}
.panel-sky{position:absolute;z-index:0;right:18px;top:12px;width:104px;height:55px;pointer-events:none;color:var(--acc);opacity:.55}
.panel-sky i{position:absolute;display:block}
.sky-star{right:8px;top:1px;width:13px;height:13px;background:currentColor;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}
.sky-dot{right:45px;top:11px;width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:18px 24px 0 -1px currentColor}
.sky-cloud{right:2px;bottom:0;width:31px;height:10px;border-radius:99px;background:var(--surface);opacity:.8}
.sky-cloud:before,.sky-cloud:after{content:"";position:absolute;bottom:1px;border-radius:50%;background:inherit}
.sky-cloud:before{left:6px;width:13px;height:13px}.sky-cloud:after{right:4px;width:10px;height:10px}
.p-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px;padding:14px 22px 0;min-height:62px}
.baby-face{display:block;position:relative;width:48px;height:48px;flex:0 0 auto;border-radius:48% 52% 50% 46%;background:var(--acc-soft);border:2px solid var(--surface);box-shadow:0 0 0 2px var(--acc),0 7px 13px -10px var(--acc);transform:rotate(-3deg);text-decoration:none;overflow:visible;transform-origin:50% 75%}
.baby-face:active{opacity:.82}
.baby-face:before{content:"";position:absolute;left:12px;top:19px;width:5px;height:6px;border-radius:50%;background:var(--acc);box-shadow:17px 0 0 var(--acc)}
.baby-face>i{position:absolute;left:18px;top:29px;width:10px;height:5px;border-bottom:2px solid var(--acc);border-radius:0 0 10px 10px}
.baby-face:after{content:"";position:absolute;right:5px;top:9px;width:9px;height:7px;border-radius:8px 8px 2px 8px;background:var(--acc);transform:rotate(22deg)}
.face-cheeks{position:absolute;left:7px;top:26px;width:7px;height:4px;border-radius:50%;background:var(--a2);box-shadow:27px 0 0 var(--a2);opacity:0;transition:opacity .2s}
/* 방금 해준 일이 얼굴의 서로 다른 부위에 나타난다. 부위가 달라서 셋이 겹쳐도 서로 지우지 않는다.
   수유=입, 대변=배경 음표, 목욕=볼 홍조, 셋 다=얼굴을 두른 반짝이 */
.baby-face.fed>i{left:17px;top:27px;width:13px;height:8px;border:0;border-bottom:3px solid var(--acc);border-radius:0 0 14px 14px}
.baby-face.bathed .face-cheeks{opacity:.5}
.face-mood{position:absolute;left:39px;top:-4px;width:1px;height:1px;pointer-events:none}
.face-mood i{position:absolute;opacity:0;font-style:normal;line-height:1;color:var(--acc);text-shadow:0 1px var(--surface)}
.face-mood i:first-child{left:0;top:0;font-size:13px}
.face-mood i:nth-child(2){left:9px;top:-10px;font-size:10px}
.baby-face.pooped .face-mood i{opacity:.9}
.face-sparkle{position:absolute;inset:-11px;pointer-events:none}
.face-sparkle b{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--sun);opacity:0}
.face-sparkle b:nth-child(1){left:3px;top:13px}
.face-sparkle b:nth-child(2){left:-1px;top:45px;width:3px;height:3px}
.face-sparkle b:nth-child(3){left:27px;top:63px}
.face-sparkle b:nth-child(4){left:59px;top:47px;width:5px;height:5px}
.face-sparkle b:nth-child(5){left:62px;top:20px;width:3px;height:3px}
.baby-face.all-clear .face-sparkle b{opacity:.95}
.pet-heart{position:absolute;z-index:4;left:50%;top:4px;color:var(--acc);font-size:10px;line-height:1;pointer-events:none;opacity:0;text-shadow:0 1px var(--surface)}
.baby-face.sleepy:before{height:4px;border-radius:0 0 8px 8px;background:transparent;border-bottom:2px solid var(--acc);box-shadow:17px 0 0 -1px var(--acc)}
.p-title{display:flex;flex-direction:column;gap:3px}
.p-name{font-family:var(--display);font-size:23px;font-weight:900;letter-spacing:-.045em;color:var(--acc)}
.p-state{margin-left:auto;font-size:13px;font-weight:700;color:var(--acc);background:var(--acc-soft);
  padding:7px 11px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 25%,transparent)}

/* signature: elapsed dial */
.since{padding:12px 22px 14px}
.since-label{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px}
.since-val{font-family:var(--display);font-size:46px;line-height:1;font-weight:900;letter-spacing:-.055em;display:flex;align-items:baseline;gap:2px}
.since-val small{font-size:18px;font-weight:700;color:var(--muted);letter-spacing:0;margin-right:6px}
.since-val .since-ago{font-size:13px;margin:0 0 0 -4px;letter-spacing:-.02em;white-space:nowrap}
.since-meta{font-size:13.5px;color:var(--muted);margin-top:6px}
.bar{position:relative;height:9px;border-radius:99px;background:var(--surface-2);margin-top:14px;border:1px solid var(--line-soft)}
.bar>i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width .6s ease;box-shadow:inset -5px 0 rgba(255,255,255,.25)}
.bottle-token{position:absolute;z-index:2;left:clamp(12px,var(--progress),calc(100% - 12px));top:50%;width:29px;height:29px;display:grid;place-items:center;border:2px solid color-mix(in srgb,var(--acc) 45%,var(--surface));border-radius:50%;background:var(--surface);box-shadow:0 5px 12px -7px var(--acc);transform:translate(-50%,-50%) rotate(-5deg);transition:left .65s cubic-bezier(.2,.8,.2,1),transform .2s}
.bottle-token .ic{width:18px;height:18px;color:var(--acc)}
.since.due .since-val{color:var(--warn)}
.since.due .bar i{background:var(--warn)}
.since.due .bottle-token{border-color:color-mix(in srgb,var(--warn) 50%,var(--surface))}
.since.due .bottle-token .ic{color:var(--warn)}

.stats{min-height:64px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));white-space:nowrap}
.stat-cell{min-width:0;padding:8px 5px;display:flex;align-items:center;justify-content:center;gap:5px;border-right:1px dashed var(--line);font-size:15px;font-weight:500;letter-spacing:-.025em}
.stat-cell:last-child{border-right:0}
.stat-cell.feed-summary{flex-direction:column;gap:5px}
.stat-period{color:var(--muted);font-size:12px;line-height:1;letter-spacing:.01em}
.stat-value{font-size:15px;line-height:1;display:inline-flex;align-items:center;gap:5px}
.stat-value .ic{width:18px;height:18px}
.stat-cell .ic{width:19px;height:19px}

.acts{padding:12px 18px 10px;display:grid;grid-template-columns:1.25fr repeat(2,1fr);gap:9px;border-top:1px solid var(--line-soft)}
.acts .primary{grid-column:auto}
.act{--press-depth:4px;--press-squish:.975;--press-line:color-mix(in srgb,var(--line) 80%,transparent);
  position:relative;min-height:70px;border-radius:17px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--display);font-size:16px;font-weight:900;letter-spacing:-.025em}
.act .w{display:flex;align-items:center;gap:6px}
.act.primary .ic{color:#fff}
.act.primary{--press-line:color-mix(in srgb,var(--acc) 72%,#263542);background:var(--acc);border-color:var(--acc);color:#fff}
.act.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.acts-min{padding:0 18px 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini{--press-depth:3px;--press-squish:.97;
  position:relative;min-height:42px;border-radius:13px;border:1px solid var(--line);background:var(--surface);font-size:13px;font-weight:750;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:5px;overflow:hidden}
.mini .ic{width:18px;height:18px}
.mini:active{background:var(--surface-2)}

.recent{flex:1 1 auto;min-height:0;border-top:1px dashed var(--line);padding:0 10px 10px;overflow-y:auto;overscroll-behavior:contain}
.recent h4{position:sticky;top:0;z-index:1;margin:0 0 6px;padding:9px 12px 5px;background:var(--surface);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.recent-day{display:flex;align-items:center;gap:8px;margin:5px 12px 1px;color:var(--muted);font-size:10.5px;font-weight:800}
.recent-day:after{content:"";height:1px;flex:1;background:var(--line-soft)}
.rrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;width:100%;text-align:left}
.rrow .w{display:flex;align-items:center;gap:6px;min-width:0}
.rrow:active{background:var(--surface-2)}
.rrow .t{color:var(--muted);width:52px;font-size:14px}
.empty{padding:14px 12px;color:var(--muted);font-size:14px}
.cute-empty{min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}
.empty-face{position:relative;width:44px;height:37px;border-radius:47% 53% 45% 55%;background:var(--surface-2);border:1px solid var(--line);transform:rotate(-3deg)}
.empty-face:before{content:"";position:absolute;left:10px;top:15px;width:7px;height:3px;border-bottom:2px solid var(--muted);border-radius:0 0 8px 8px;box-shadow:17px 0 0 -1px var(--surface-2),17px 2px 0 -1px var(--muted)}
.empty-face i{position:absolute;left:17px;top:25px;width:10px;height:3px;border-top:2px solid var(--muted);border-radius:8px 8px 0 0}
.rrow.is-new,.li.is-new{background:color-mix(in srgb,var(--acc,var(--a1)) 11%,var(--surface));box-shadow:inset 3px 0 var(--acc,var(--a1))}

/* ---------- sheet (24h) ---------- */
.datenav{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex:0 0 auto}
.datenav{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:7px;box-shadow:var(--shadow)}
.datenav button{--press-depth:3px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);font-weight:700;min-height:44px}
.datenav .today-label{font-family:var(--display);font-size:17px;font-weight:900;letter-spacing:-.025em;padding:0 5px}
.datenav .sp{margin-left:auto}
.sheet-layout{height:100%;min-height:0;display:flex;flex-direction:column}
.sheet-layout>.grid2{flex:1;min-height:0}
/* 접혀 있으면 제목 줄만 차지한다. 펼치면 제목은 붙어 있고 목록만 구른다. */
.sheet-edit{flex:0 0 auto;display:flex;flex-direction:column;min-height:0;margin-top:8px}
.sheet-edit.is-open{max-height:min(30vh,290px)}
.sheet-edit-head{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:6px 4px;font-size:12px;font-weight:800;color:var(--muted);transition:color .15s}
.sheet-edit-head .num{font-weight:700;opacity:.8}
.sheet-edit-head i{width:0;height:0;border:5px solid transparent;border-top-color:currentColor;
  margin:3px 0 0 auto;transition:transform .18s}
.sheet-edit.is-open .sheet-edit-head i{transform:rotate(180deg)}
.sheet-edit .list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.sheet-edit .li{padding:11px 13px}
.sheet-edit .li .time{width:52px;font-size:14px}
.sheetwrap{min-height:0;display:flex;flex-direction:column}
.sheet-table{flex:1 1 0;min-height:0;overflow:auto;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
table.sheet{width:100%;min-width:360px;table-layout:fixed;border-collapse:separate;border-spacing:0;background:var(--surface);font-size:12px}
table.sheet th,table.sheet td{border:0;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:0;text-align:center;line-height:1}
table.sheet th:last-child,table.sheet td:last-child{border-right:0}
table.sheet thead th{position:sticky;top:0;z-index:3;height:38px;background-color:var(--surface-2);background-image:none;font-size:11px;font-weight:800;color:var(--muted)}
table.sheet th:first-child,table.sheet td.h{width:44px;border-right:1px solid var(--line)}
table.sheet thead th:first-child{left:0;z-index:5;background-color:var(--surface-2)}
table.sheet td.h{position:sticky;left:0;z-index:2;background-color:var(--surface-2);background-image:none;font-weight:800;color:var(--muted)}
table.sheet tbody tr{height:27px}
table.sheet tbody tr:nth-child(3n+1) td{border-top:1px solid var(--line)}
table.sheet tbody tr.current td{background:color-mix(in srgb,var(--acc-soft) 58%,var(--surface))}
table.sheet tbody tr.current td.h{background-color:var(--acc-soft);color:var(--acc);font-weight:900}
table.sheet tfoot th,table.sheet tfoot td{position:sticky;bottom:0;z-index:3;height:45px;border-top:1px solid var(--line);border-bottom:0;background-color:var(--surface-2);background-image:none}
table.sheet tfoot th{left:0;z-index:5;color:var(--muted);font-size:9.5px;line-height:1.2}
.day-total{display:flex;min-height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.day-total b{font-size:11px;color:var(--ink);font-weight:900}
.day-total span{font-size:9.5px;color:var(--muted);font-weight:750}
.day-total.today{background-color:var(--acc-soft)}
.day-total.today b{color:var(--acc)}
.sheet-date{display:block;font-size:11.5px;color:var(--ink);font-weight:900}
.sheet-weekday{display:block;margin-top:3px;font-size:9.5px;font-weight:700}
th.current-day{background:var(--acc-soft)!important}.current-day .sheet-date{color:var(--acc)}
.sheet-track{min-height:26px;padding:2px 3px;display:flex;align-items:center;justify-content:center;align-content:center;gap:2px 3px;flex-wrap:wrap}
.sheet-dot{position:static;display:inline-flex;align-items:center;gap:1px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.sheet-dot .ic{width:15px;height:15px;vertical-align:0}
.sheet-dot.feed{color:var(--feed)}
.sheet-dot.feed i{font-style:normal;font-size:11.5px;line-height:1;font-weight:900;letter-spacing:-.02em}
.sheetwrap[data-b="gigeon"]{--acc:var(--a1);--acc-soft:var(--a1-soft)}
.sheetwrap[data-b="mobin"]{--acc:var(--a2);--acc-soft:var(--a2-soft)}
.sheetwrap h3{margin:0 4px 6px;font-family:var(--display);font-size:17px;font-weight:900;color:var(--acc);flex:0 0 auto}
.sleepcell{background:var(--acc);opacity:.18}
.footnote{margin-top:6px;min-height:18px;font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:nowrap;overflow:hidden;flex:0 0 auto}

/* ---------- list ---------- */
.list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);padding:6px}
.li{display:flex;align-items:center;gap:12px;padding:17px 13px;border-bottom:1px dashed var(--line);border-radius:14px;width:100%;text-align:left;transition:background .15s,transform .15s}
.li[data-b="gigeon"]{--acc:var(--a1)}.li[data-b="mobin"]{--acc:var(--a2)}
.li:last-child{border-bottom:0}
.li:active{background:var(--surface-2)}
.tag{font-size:12px;font-weight:800;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag.gigeon{background:var(--a1-soft);color:var(--a1)}
.tag.mobin{background:var(--a2-soft);color:var(--a2)}
.li .time{width:56px;color:var(--muted);font-size:15px}
.li .what{display:flex;align-items:center;gap:7px;min-width:0;font-weight:600}

/* ---------- cal (일정) ---------- */
/* 두 달 격자. auto-fit이라 폭이 넉넉하면(아이패드) 나란히, 좁으면(폰) 세로로 쌓인다.
   미디어 쿼리 없이 이 한 줄이 두 경우를 다 처리한다. */
.cal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cal-m{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 14px}
.cal-m-h{font-family:var(--display);font-size:16px;font-weight:900;letter-spacing:-.03em;text-align:center;margin-bottom:10px}
/* 아이패드 가로처럼 칸이 넓어지면 열 간격만 벌어져 달력이 성겨 보인다. 폭을 묶어 가운데 세운다. */
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-width:400px;margin:0 auto}
.cal-wd{font-size:11.5px;font-weight:700;color:var(--muted);text-align:center;padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--line-soft)}
.cal-wd.sun{color:var(--a2)}
.cal-d{min-height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.cal-n{width:27px;height:27px;line-height:27px;border-radius:50%;text-align:center;font-size:14px;font-weight:600}
.cal-d.sun .cal-n{color:var(--a2)}
.cal-d.sat .cal-n{color:var(--muted)}
/* 글자색은 흰색이 아니라 --paper다. 다크 모드에서 --a1이 밝은 민트로 바뀌므로
   흰 글씨를 쓰면 대비가 무너진다. --paper는 두 테마에서 모두 배경 반대편에 선다. */
.cal-d.is-today .cal-n{background:var(--a1);color:var(--paper);font-weight:800}
/* 일정이 없는 날에도 자리를 지켜야 날짜 숫자의 세로 정렬이 흔들리지 않는다. */
.cal-dots{height:6px;line-height:6px;font-size:12px;letter-spacing:1.5px;color:var(--a1)}

.cal-h{display:flex;align-items:baseline;gap:8px;margin:18px 6px 8px;font-family:var(--display)}
.cal-h:first-child{margin-top:0}
.cal-h b{font-size:17px;font-weight:900;letter-spacing:-.03em}
.cal-h span{font-size:13px;color:var(--muted);font-weight:600}
.cal-h.cal-today b{color:var(--a1)}
.cal-li{cursor:default}
.cal-li .time{flex:0 0 auto}
.cal-loc{color:var(--muted);font-weight:500;font-size:13.5px}
.cal-foot{margin:14px 6px 0;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:4px}
.cal-foot button{color:var(--warn);font-weight:700;padding:6px 8px}
.empty .btn{margin-top:10px;display:block}

/* ---------- settings ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h3{margin:0 0 6px;font-family:var(--display);font-size:18px;font-weight:900;letter-spacing:-.025em}
.card p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{--press-depth:3px;padding:12px 18px;border-radius:15px;border:1px solid var(--line);background:var(--surface-2);font-weight:800;font-size:14px;min-height:48px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.solid{--press-line:color-mix(in srgb,var(--ink) 62%,#000);background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.danger{--press-depth:0px;--press-line:transparent;color:#b23b3b;border-color:#e6c3c3;background:transparent}
.field{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:15px}
.field label{min-width:130px;color:var(--muted)}
.field select,.field input{padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);min-height:44px}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;background:rgba(32,38,54,.46);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;z-index:50}
@media (min-width:700px){.scrim{align-items:center}}
.modal{background:var(--surface);width:min(560px,100%);border-radius:28px 28px 0 0;padding:22px 22px 26px;max-height:92vh;overflow:auto;box-shadow:0 28px 80px rgba(15,19,33,.3)}
@media (min-width:700px){.modal{border-radius:28px}}
.m-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.m-title{font-family:var(--display);font-size:21px;font-weight:900;letter-spacing:-.035em}
.m-close{margin-left:auto;padding:10px 14px;border-radius:14px;background:var(--surface-2);font-weight:800;color:var(--muted)}
.modal-section{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2);margin-bottom:12px}
.modal-label{display:block;margin:0 0 11px;font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.03em}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0}
.amount-options{display:grid;grid-template-columns:repeat(4,1fr)}
.chip{--press-depth:3px;--press-squish:.97;
  padding:10px 14px;border-radius:99px;border:1px solid var(--line);background:var(--surface-2);font-weight:800;font-size:15px;min-height:44px}
.amount-options .chip{padding:9px 5px;border-radius:13px;background:var(--surface);font-size:14px}
.stepper{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 12px}
.stepper .step-btn{--press-depth:3px;--press-squish:.94;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:22px;font-weight:800;line-height:1}
.stepper .step-val{min-width:88px;text-align:center;font-size:26px;font-weight:800}
.stepper .step-val small{font-size:14px;font-weight:800;color:var(--muted);margin-left:2px}
.chip[aria-pressed="true"]{--press-line:color-mix(in srgb,var(--ink) 72%,#000);
  background:var(--ink);color:var(--surface);border-color:var(--ink)}
.modal[data-b="gigeon"] .amount-options .chip[aria-pressed="true"]{background:var(--a1);border-color:var(--a1)}
.modal[data-b="mobin"] .amount-options .chip[aria-pressed="true"]{background:var(--a2);border-color:var(--a2)}
.seg{display:flex;gap:6px;background:var(--surface-2);padding:5px;border-radius:12px;border:1px solid var(--line);margin-bottom:14px}
.seg button{flex:1;min-height:46px;border-radius:9px;font-weight:700;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.timerow{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.timerow.tight{margin:0;justify-content:flex-start}
.timerow.tight .chip{background:var(--surface);font-size:13px;padding:8px 12px;min-height:40px}
.timerow input[type=time],.timerow input[type=date]{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);min-height:46px}
.save{--press-depth:5px;--press-squish:.985;--press-line:color-mix(in srgb,var(--ink) 72%,#000);
  position:relative;width:100%;min-height:60px;border-radius:18px;background:var(--ink);color:var(--surface);font-size:18px;font-weight:900;overflow:hidden}
.modal[data-b="gigeon"] .save{--press-line:color-mix(in srgb,var(--a1) 72%,#263542);background:var(--a1)}
.modal[data-b="mobin"] .save{--press-line:color-mix(in srgb,var(--a2) 72%,#263542);background:var(--a2)}
textarea{width:100%;min-height:100px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font:inherit;resize:vertical}

/* ---------- 성장도표 ---------- */
/* 시간표 탭과 같은 짜임이다. 조작 줄과 그래프만 면으로 띄우고 이름·수치·안내문은
   종이 배경 위에 그대로 얹는다. 아기 구분은 상자가 아니라 이름 색과 선 색이 맡는다.
   기준 띠는 회색으로 물러나 있고 색은 아기 선에만 쓴다. 띠까지 아기 색이면
   배경과 데이터가 같은 색이라 선이 묻힌다. */
[data-b="gigeon"]{--wc:var(--chart-a1)}
[data-b="mobin"]{--wc:var(--chart-a2)}
.growth-layout{height:100%;min-height:0;display:flex;flex-direction:column}
.gbar{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-bottom:14px}
.gtabs{display:flex;gap:5px;min-width:0;padding:5px;border-radius:99px;
  background:rgba(255,253,250,.68);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(12px)}
html[data-theme="night"] .gtabs{background:rgba(43,52,77,.72)}
.gtabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;
  padding:9px 16px;border-radius:99px;font-size:14px;font-weight:800;color:var(--muted);min-height:42px;white-space:nowrap}
.gtabs button .ic{width:17px;height:17px;flex:0 0 auto}
.gtabs button[aria-pressed="true"]{background:var(--ink);color:var(--surface);box-shadow:0 5px 12px rgba(59,67,88,.18)}
.gtoggle{flex:0 0 auto;margin-left:auto}
.gcharts{flex:1 1 auto;min-height:0;display:grid;gap:22px}
.gcharts.is-split{grid-template-columns:repeat(2,minmax(0,1fr))}
.gplot{min-width:0;min-height:0;display:flex;flex-direction:column}
.gplot h3{margin:0 4px 7px;flex:0 0 auto;display:flex;align-items:baseline;gap:8px;
  font-family:var(--display);font-size:17px;font-weight:900;letter-spacing:-.025em;color:var(--wc)}
.gplot h3 b{font-size:17px;font-weight:900;color:var(--ink)}
.gplot h3 span{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted)}
.gbox{position:relative;flex:1 1 auto;min-height:0;padding:8px 6px 4px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.gplot-foot{display:flex;justify-content:center;margin-top:10px;flex:0 0 auto}
.gadd{padding:0 16px}
.gnote{flex:0 0 auto;margin:12px 4px 0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.gsvg{display:block;width:100%;height:auto;touch-action:pan-y}
.ggrid{stroke:var(--line-soft);stroke-width:1}
.gaxis{stroke:var(--line);stroke-width:1}
.gtick{fill:var(--muted);font-size:11px;font-weight:700}
.gedge{fill:var(--muted);font-size:10.5px;font-weight:800;opacity:.9}
/* 3-97, 10-90, 25-75을 겹쳐 가운데로 갈수록 진해진다 */
.gband{stroke:none;fill:var(--ink);opacity:.06}
.gband.b2{opacity:.07}
.gmedian{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:5 4;opacity:.3}
.gpre{fill:var(--surface-2);opacity:.45}
.gdue{stroke:var(--line);stroke-width:1.3;stroke-dasharray:3 3}
.gdue-t{fill:var(--muted);font-size:10.5px;font-weight:700}
.gline{fill:none;stroke:var(--wc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* 겹치는 점은 테두리가 아니라 배경색 링으로 떼어 놓는다 */
.gdot{fill:var(--surface);stroke:var(--wc);stroke-width:2}
.gdot.is-tiny{fill:var(--wc);stroke:none}
.gdot.is-last{fill:var(--wc);stroke:var(--surface);stroke-width:2.2}
.ghover[hidden]{display:none}
.gcross{stroke:var(--wc);stroke-width:1.2;stroke-dasharray:3 3;opacity:.55}
.gpick{fill:var(--wc);stroke:var(--surface);stroke-width:2.4}
.ghit{fill:transparent}
.gtip[hidden]{display:none}
.gtip{position:absolute;top:14px;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 11px;
  box-shadow:0 10px 24px -14px rgba(20,24,40,.5);font-size:12.5px;white-space:nowrap}
.gtip>b{font-size:11.5px;color:var(--muted);font-weight:800}
.gtip-row{display:flex;align-items:baseline;gap:7px}
.gtip-row b{color:var(--ink);font-size:14px;font-weight:900}
.gtip-row span{color:var(--muted);font-size:12px;font-weight:700}
.gtable-box{padding:0;overflow:hidden}
.gtable-wrap{height:100%;overflow:auto}
.gtable{width:100%;border-collapse:collapse;font-size:13px}
.gtable th,.gtable td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--line-soft)}
.gtable thead th{position:sticky;background:var(--surface);color:var(--muted);font-size:11.5px;font-weight:800}
.gtable thead tr:first-child th{top:0}
.gtable thead tr:last-child th{top:27px}
.gtable thead th[colspan]{text-align:center;color:var(--wc);border-bottom:0}
.gtable thead th[colspan] i{display:inline-block;width:10px;height:3px;border-radius:2px;
  background:var(--wc);vertical-align:middle;margin-right:5px}
.gtable tbody th,.gtable thead th:first-child{text-align:left}
.gtable tbody th{font-weight:700;color:var(--muted)}
.gtable .dim{color:var(--muted)}

/* ---------- 기록 잠금 (PIN) ---------- */
.brand{padding:0;text-align:left}
.brand-lock{display:none;margin-left:-5px;color:var(--muted)}
html[data-write="off"] .brand-lock{display:inline-flex;align-items:center}
.brand-lock .ic{width:19px;height:19px}
.pin-dots{display:flex;justify-content:center;gap:15px;margin:2px 0 18px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4),background .18s ease,border-color .18s ease}
.pin-dots i.on{background:var(--ink);border-color:var(--ink);transform:scale(1.18)}
.pin-dots.bad{animation:pin-shake .4s ease}
.pin-dots.bad i{background:var(--warn);border-color:var(--warn)}
@keyframes pin-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-9px)}38%{transform:translateX(8px)}58%{transform:translateX(-5px)}78%{transform:translateX(3px)}}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pin-key{--press-depth:3px;--press-squish:.95;min-height:58px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface);font-size:23px;font-weight:800}
.pin-key.ghost{box-shadow:none;background:transparent;border-color:transparent;color:var(--muted);font-size:14px}
.pin-key.ghost:active{box-shadow:none}
.pin-hint{margin:0;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.lock-note{margin:2px 0 16px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:max(26px,calc(env(safe-area-inset-bottom) + 12px));transform:translateX(-50%);z-index:60;
  background:var(--ink);color:var(--surface);border-radius:99px;padding:12px 12px 12px 20px;
  display:flex;align-items:center;gap:14px;font-size:15px;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.toast button{background:rgba(255,255,255,.16);padding:9px 16px;border-radius:99px;font-weight:800;min-height:40px}
.toast:after{content:"";position:absolute;left:18px;right:18px;bottom:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.42);transform-origin:left}
.celebration{--celebrate:var(--a1);position:fixed;z-index:70;left:50%;top:50%;width:1px;height:1px;pointer-events:none;color:var(--celebrate)}
.celebrate-badge{position:absolute;left:0;top:0;min-width:142px;padding:12px 17px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid color-mix(in srgb,var(--celebrate) 55%,var(--surface));border-radius:99px;background:var(--surface);box-shadow:0 16px 34px -16px color-mix(in srgb,var(--celebrate) 65%,transparent);font-family:var(--display);font-size:15px;font-weight:900;white-space:nowrap}
.celebrate-badge .ic{width:28px;height:28px;color:var(--celebrate)}
.celebrate-ring{position:absolute;left:0;top:0;width:88px;height:88px;border:3px solid var(--celebrate);border-radius:50%;transform:translate(-50%,-50%);opacity:0}
.celebrate-particle{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:3px;background:var(--celebrate);opacity:0}
.celebrate-particle.p-2{background:var(--sun)}
.celebrate-particle.p-3{background:var(--lilac)}
.effect-star .celebrate-particle{width:11px;height:11px;clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%)}
.effect-bubble .celebrate-particle{width:12px;height:12px;border:2px solid var(--celebrate);border-radius:50%;background:transparent}
.effect-bubble .celebrate-particle.p-2{width:7px;height:7px;border-color:var(--sun)}
.effect-drop .celebrate-particle{width:8px;height:11px;border-radius:65% 40% 65% 40%;--rotate-from:45deg}
.effect-tick .celebrate-particle{width:3px;height:13px;border-radius:3px}
.effect-warm .celebrate-particle{border-radius:50%;box-shadow:0 0 8px var(--celebrate)}
.effect-dash .celebrate-particle{width:14px;height:3px;border-radius:4px}
.tap-pop{position:fixed;z-index:80;width:1px;height:1px;pointer-events:none;color:var(--tap-color);--tap-color:var(--sun)}
.tap-pop i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0}
.tap-pop i:nth-child(2){width:7px;height:7px;border-radius:1px;transform:rotate(45deg)}
.tap-pop i:nth-child(3){width:4px;height:4px}
@media (prefers-reduced-motion:no-preference){
  .brand-mark i:first-child{animation:brand-bob 3.6s ease-in-out infinite}
  .brand-mark i:last-child{animation:brand-bob 3.6s .18s ease-in-out infinite}
  .brand-mark:after{animation:star-twinkle 2.8s ease-in-out infinite}
  .baby-face:before{animation:baby-blink 5.6s infinite}
  .panel[data-b="mobin"] .baby-face:before{animation-delay:1.7s}
  .baby-face.pooped .face-mood i{animation:mood-note 3.6s ease-in-out infinite}
  .baby-face.pooped .face-mood i:nth-child(2){animation-delay:.9s;animation-duration:4.2s}
  .baby-face.all-clear .face-sparkle b{animation:mood-sprinkle 2.8s ease-in-out infinite}
  .baby-face.all-clear .face-sparkle b:nth-child(2){animation-delay:.4s}
  .baby-face.all-clear .face-sparkle b:nth-child(3){animation-delay:.8s;animation-duration:3.3s}
  .baby-face.all-clear .face-sparkle b:nth-child(4){animation-delay:1.2s}
  .baby-face.all-clear .face-sparkle b:nth-child(5){animation-delay:1.7s;animation-duration:2.4s}
  .baby-face.is-cheering{animation:face-cheer .8s cubic-bezier(.2,.9,.3,1.35)}
  .baby-face.all-clear.is-cheering{animation-name:face-cheer-all;animation-duration:1.05s}
  .baby-face.is-petted{animation:pet-squish .55s cubic-bezier(.2,.9,.3,1.4)}
  .pet-heart{animation:pet-heart .62s var(--pet-delay) ease-out both}
  .panel-sky .sky-star{animation:star-twinkle 3.2s ease-in-out infinite}
  .panel[data-b="mobin"] .panel-sky .sky-star{animation-delay:1.1s}
  .panel.is-due .bottle-token{animation:bottle-nudge 1.8s ease-in-out infinite}
  .panel.just-fed .bottle-token{animation:bottle-happy .7s ease-out both}
  .view-enter>*,.view-enter .panel,.view-enter .sheetwrap{animation:view-pop .4s cubic-bezier(.2,.8,.2,1) both}
  .view-enter .panel:nth-child(2),.view-enter .sheetwrap:nth-child(2){animation-delay:55ms}
  .rrow.is-new,.li.is-new{animation:new-record .9s cubic-bezier(.2,.8,.2,1) both}
  .scrim{animation:scrim-in .18s ease-out both}
  .modal{animation:modal-pop .34s cubic-bezier(.2,.86,.25,1.12) both}
  .step-val.bump-up{animation:number-up .22s ease-out}
  .step-val.bump-down{animation:number-down .22s ease-out}
  .toast{animation:up .18s ease-out}
  .toast:after{animation:toast-life 5s linear both}
  @keyframes up{from{opacity:0;transform:translate(-50%,10px)}}
  .panel.celebrating{animation:panel-celebrate .72s ease-out}
  .celebrate-badge{animation:celebrate-pop .86s cubic-bezier(.2,.9,.25,1) both}
  .celebrate-badge .ic{animation:reward-icon .7s cubic-bezier(.2,.9,.3,1.3) both}
  .celebrate-ring{animation:celebrate-ring .8s ease-out both}
  .celebrate-particle{animation:celebrate-particle .78s cubic-bezier(.15,.7,.25,1) var(--delay) both}
  .tap-pop i{animation:tap-spark .4s ease-out both}
  .tap-pop i:nth-child(2){animation-delay:25ms}.tap-pop i:nth-child(3){animation-delay:50ms}
  @keyframes brand-bob{0%,82%,100%{transform:translateY(0) rotate(0)}88%{transform:translateY(-3px) rotate(-4deg)}94%{transform:translateY(0) rotate(2deg)}}
  @keyframes star-twinkle{0%,100%{transform:scale(.75) rotate(0);opacity:.38}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
  @keyframes baby-blink{0%,45%,48%,100%{transform:scaleY(1)}46%,47%{transform:scaleY(.12)}}
  @keyframes pet-squish{0%{transform:rotate(-3deg) scale(1)}28%{transform:rotate(2deg) scale(.86,1.08)}65%{transform:rotate(-5deg) scale(1.08,.94)}100%{transform:rotate(-3deg) scale(1)}}
  @keyframes mood-note{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(2px,-5px) rotate(7deg)}}
  @keyframes mood-sprinkle{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.15);opacity:1}}
  @keyframes face-cheer{0%{transform:rotate(-3deg) scale(1)}26%{transform:rotate(-7deg) translateY(-5px) scale(1.05,.96)}58%{transform:rotate(2deg) translateY(0) scale(.97,1.04)}80%{transform:rotate(-4deg) translateY(-2px)}100%{transform:rotate(-3deg) scale(1)}}
  @keyframes face-cheer-all{0%{transform:rotate(-3deg) scale(1)}20%{transform:rotate(-9deg) translateY(-9px) scale(1.09,.93)}46%{transform:rotate(3deg) translateY(0) scale(.94,1.07)}68%{transform:rotate(-6deg) translateY(-5px) scale(1.04,.98)}86%{transform:rotate(-1deg) translateY(0) scale(.98,1.02)}100%{transform:rotate(-3deg) scale(1)}}
  @keyframes pet-heart{0%{opacity:0;transform:translate(-50%,6px) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--pet-x)),-30px) rotate(var(--pet-rotate)) scale(1.1)}}
  @keyframes bottle-nudge{0%,70%,100%{transform:translate(-50%,-50%) rotate(-5deg)}78%{transform:translate(-50%,-55%) rotate(-14deg)}88%{transform:translate(-50%,-50%) rotate(7deg)}}
  @keyframes bottle-happy{0%{transform:translate(-50%,-50%) scale(.75) rotate(-12deg)}55%{transform:translate(-50%,-62%) scale(1.13) rotate(8deg)}100%{transform:translate(-50%,-50%) scale(1) rotate(-5deg)}}
  @keyframes view-pop{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
  @keyframes new-record{0%{opacity:.4;transform:translateX(-8px);background:color-mix(in srgb,var(--acc,var(--a1)) 24%,var(--surface))}55%{transform:translateX(2px)}100%{opacity:1;transform:none}}
  @keyframes scrim-in{from{opacity:0}}
  @keyframes modal-pop{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes number-up{0%{opacity:.35;transform:translateY(7px) scale(.92)}100%{opacity:1;transform:none}}
  @keyframes number-down{0%{opacity:.35;transform:translateY(-7px) scale(.92)}100%{opacity:1;transform:none}}
  @keyframes toast-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
  @keyframes panel-celebrate{35%{box-shadow:0 0 0 4px color-mix(in srgb,var(--celebrate) 26%,transparent),var(--shadow)}}
  @keyframes celebrate-pop{0%{opacity:0;transform:translate(-50%,-38%) scale(.68) rotate(-3deg)}28%{opacity:1;transform:translate(-50%,-54%) scale(1.08) rotate(1deg)}72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-56%) scale(.96)}}
  @keyframes reward-icon{0%{transform:scale(.6) rotate(-18deg)}48%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
  @keyframes celebrate-ring{0%{opacity:.72;transform:translate(-50%,-50%) scale(.35)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}
  @keyframes celebrate-particle{0%{opacity:0;transform:translate(0,0) rotate(var(--rotate-from,0deg))}18%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rotate))}}
  @keyframes tap-spark{0%{opacity:.9;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--tap-x,12px),var(--tap-y,-18px)) scale(1.15)}}
  .tap-pop i:first-child{--tap-x:-15px;--tap-y:-13px}.tap-pop i:nth-child(2){--tap-x:2px;--tap-y:-21px}.tap-pop i:nth-child(3){--tap-x:16px;--tap-y:-9px}
}
@media (hover:hover) and (pointer:fine){
  /* 솟은 버튼은 한 단계 더 떠오른다 */
  .act:hover:not(:active),.save:hover:not(:active),.step-btn:hover:not(:active),.mini:hover:not(:active),
  .btn:hover:not(:active),.datenav button:hover:not(:active),.update-chip:hover:not(:active),.icon-chip:hover:not(:active){
    transform:translateY(-2px);box-shadow:0 calc(var(--press-depth) + 3px) 0 var(--press-line);
  }
  /* 평평한 표면은 배경만 밝아진다 */
  .m-close:hover:not(:active),.seg button:hover:not(:active),
  .tabs button:not([aria-selected="true"]):hover:not(:active),
  .gtabs button:not([aria-pressed="true"]):hover:not(:active){background:var(--surface-2)}
  .chip:not([aria-pressed="true"]):hover:not(:active){background:var(--surface)}
  .amount-options .chip:not([aria-pressed="true"]):hover:not(:active){background:var(--surface-2)}
  .mini:hover:not(:active){background:var(--surface-2)}
  .rrow:hover:not(:active),.li:hover:not(:active){background:var(--surface-2);transform:translateY(-1px)}
  .sheet-edit-head:hover{color:var(--ink)}
  .baby-face:hover{box-shadow:0 0 0 3px var(--acc),0 10px 18px -10px var(--acc)}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .tap-pop,.pet-heart{display:none!important}
}
:focus-visible{outline:3px solid var(--a1);outline-offset:2px}

@media (max-width:960px){
  .topbar{grid-template-columns:1fr auto;gap:12px}
  .tabs{grid-column:1/-1;grid-row:2;width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
  .tabs button{justify-content:center}
}
@media (max-width:560px){
  .app{padding:14px 12px}
  .topbar{margin-bottom:16px}
  .brand{font-size:18px}.brand-mark{transform:scale(.88);transform-origin:left center}
  .clock{grid-template-columns:auto;gap:3px;padding:7px 10px;border-radius:14px}
  .clock-now{flex-direction:row;gap:5px;align-items:baseline}.clock-now b{font-size:13px}
  .clock-divider{display:none}.clock-age{flex-direction:row;gap:5px;align-items:baseline}.clock-age b{font-size:10.5px}
  .top-status{gap:5px}.update-chip{min-width:58px;padding:0 8px;font-size:10.5px}.icon-chip{width:38px;padding:0;font-size:13px}
  .tabs button{padding:9px 4px;font-size:12px}
  .today-grid,.sheet-layout>.grid2{grid-template-columns:repeat(2,minmax(300px,1fr));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
  .today-grid,.sheet-layout>.grid2{scrollbar-width:none}
  .today-grid::-webkit-scrollbar,.sheet-layout>.grid2::-webkit-scrollbar{display:none}
  .sheet-layout>.grid2{grid-template-columns:repeat(2,minmax(360px,1fr))}
  .panel,.sheetwrap{scroll-snap-align:start}
  .p-head{padding:12px 16px 0}.since{padding:10px 16px 12px}.since-val{font-size:40px}
  .stat-cell{padding-left:2px;padding-right:2px;flex-direction:column;gap:3px;font-size:13.5px}.stat-cell.feed-summary{gap:4px}.stat-period{font-size:11.5px}.stat-value{font-size:14px}.stat-cell .ic{width:17px;height:17px}
  .acts{padding:10px 14px 8px;grid-template-columns:1.2fr repeat(2,1fr)}.acts-min{padding:0 14px 9px}
  .act{font-size:15px}.act .w{flex-direction:column;gap:2px}
  .datenav{display:grid;grid-template-columns:auto 1fr auto}.datenav .today-label{text-align:center}.datenav .sp{margin-left:0}.datenav button.sp{grid-column:1/3}.datenav button:last-child:not(.sp){grid-column:auto}
  .field{align-items:flex-start;flex-direction:column;gap:5px}.field label{min-width:0}
  .toast{width:calc(100% - 24px);justify-content:space-between}
  .amount-options{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:560px), (max-height:700px){
  #view.view-today{overflow:auto}
  .today-grid{height:auto;min-height:100%;align-items:start}
  .today-grid .panel{height:auto;min-height:100%}
}

@media (max-height:700px){
  .app{padding-top:12px;padding-bottom:12px}
  .topbar{margin-bottom:12px}
  .brand small{display:none}
  .p-head{min-height:52px}.baby-face{transform:scale(.82);transform-origin:left center}
  .since{padding-top:7px;padding-bottom:9px}.since-val{font-size:36px}.since-meta{margin-top:3px}.bar{margin-top:7px}
  .stats{min-height:54px}.stat-cell{padding-top:5px;padding-bottom:5px}
  .act{min-height:58px}.mini{min-height:36px}
  .datenav{padding:4px}.datenav button{min-height:38px;padding:7px 11px}
}

@media print{
  html,body{height:auto;overflow:visible}body{background:#fff}
  .topbar,.acts,.acts-min,.datenav,.toast,.sheet-edit{display:none!important}
  .app{height:auto;max-width:none;padding:0;overflow:visible}
  #view,#view.view-today,#view.view-sheet{overflow:visible}
  table.sheet{font-size:11px}
}

/* ===== 온보딩 (가족 만들기 / 연결) =====
   feat/multi-family의 온보딩 시각 언어를 이식했다. 아이 카드는 본편 .panel의
   축소판이고(자리 색 b1/b2, 하늘 장식, .baby-face), 라벨은 입력칸 위에 올린다. */
.app.onboarding .tabs,.app.onboarding #settingsChip,.app.onboarding .brand-lock{display:none}

.onboard{--acc:var(--a1);--acc-soft:var(--a1-soft);
  max-width:600px;margin:0 auto;padding-bottom:40px}
.onboard.wide{max-width:1000px}
.onboard .card{position:relative;overflow:hidden;isolation:isolate;margin-bottom:0;padding:26px 26px 24px}
.onboard .card+.card{margin-top:18px}
/* 본편 .panel 과 같은 블롭. 회색 폼이 아니라 "우리 앱 카드"로 보이게 하는 한 겹이다. */
.onboard .card:before{content:"";position:absolute;z-index:-1;right:-80px;top:-96px;width:240px;height:220px;
  border-radius:46% 54% 48% 52%;background:var(--acc-soft);transform:rotate(-12deg)}

.onboard .hero{text-align:center;padding:4px 0 18px}
.onboard .hero .brand-mark{display:inline-block;margin-bottom:12px}
.onboard .hero h2{margin:0 0 6px;font-family:var(--display);font-size:26px;font-weight:900;letter-spacing:-.035em}
.onboard .hero p{margin:0;color:var(--muted);font-size:14.5px}
.onboard .card>h3{margin:0 0 6px;font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.03em}
.onboard .card>p{margin:0 0 18px;font-size:14.5px;color:var(--muted);line-height:1.6}

/* 라벨은 입력칸 위에 올린다. 왼쪽에 두면 가로폭의 3분의 1을 라벨이 먹는다. */
.onboard .field{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:14px}
.onboard .field>label,.onboard .field>.lbl{min-width:0;padding-left:4px;
  font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--muted)}
.onboard .field input{width:100%;min-height:52px;padding:13px 16px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface-2);font-size:16px}
.onboard .field input::placeholder{color:color-mix(in srgb,var(--muted) 62%,transparent)}
.onboard input:focus-visible,.onboard .seg button:focus-visible,.onboard .tokenbox:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* 날짜 입력의 달력 아이콘·팝업은 브라우저가 그린다. 야간에 검은 아이콘이 남지 않게 알려준다. */
html[data-theme="night"] .onboard{color-scheme:dark}

.onboard-cta{--press-depth:5px;--press-squish:.985;
  width:100%;min-height:60px;border-radius:18px;font-size:17px;font-weight:900;margin-top:2px}
.err{margin:12px 0 6px;color:var(--warn);font-size:13.5px;font-weight:700;text-align:center;min-height:20px}

/* ---- 아이 카드 ----
   두 아이를 좌우로 나눈다. 본편 .grid2 가 오늘·시간표에서 하는 것과 같은 배치다. */
.onboard-babies{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
@media (max-width:720px){.onboard-babies{grid-template-columns:minmax(0,1fr)}}

.babybox{position:relative;overflow:hidden;isolation:isolate;margin:0;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:16px 18px 4px}
.babybox[data-b="b1"]{--acc:var(--a1);--acc-soft:var(--a1-soft)}
.babybox[data-b="b2"]{--acc:var(--a2);--acc-soft:var(--a2-soft)}
.babybox:before{content:"";position:absolute;z-index:-1;right:-66px;top:-96px;width:196px;height:184px;
  border-radius:46% 54% 48% 52%;background:var(--acc-soft);transform:rotate(-12deg)}
.babybox .panel-sky{right:14px;top:10px;opacity:.5}
.bb-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin-bottom:14px}
.bb-ord{display:flex;flex-direction:column;gap:2px;line-height:1.05;
  font-family:var(--display);font-size:21px;font-weight:900;letter-spacing:-.045em;color:var(--acc)}
.bb-ord small{font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:-.01em;color:var(--muted)}
/* 짧은 두 칸은 나란히 둔다. 아주 좁은 화면에서만 세로로 떨어진다. */
.bb-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.bb-row.pair{grid-template-columns:minmax(0,1fr)}
@media (max-width:430px){.bb-row{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1040px){.bb-row.pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* 성별은 본편 .chip 의 손맛(솟았다 눌리는 그림자)을 쓰고, 고르면 그 아이 색이 된다. */
.onboard .seg.sex{display:flex;gap:9px;margin:0;padding:0;border:0;background:transparent}
.onboard .seg.sex button{--press-depth:3px;--press-sink:max(1px,calc(var(--press-depth) - 1px));--press-line:var(--line);
  flex:1;min-height:52px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font-size:15px;font-weight:800;box-shadow:0 var(--press-depth) 0 var(--press-line)}
.onboard .seg.sex button:active{box-shadow:0 1px 0 var(--press-line)}
.onboard .seg.sex button[aria-pressed="true"]{--press-line:color-mix(in srgb,var(--acc) 72%,#263542);
  background:var(--acc);border-color:var(--acc);color:#fff}
.ga{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14px;font-weight:700}
.ga input{flex:1;min-width:0;text-align:center}

/* ---- 가족 이름·PIN ----
   두 아이의 애칭으로 저절로 채워지는 칸이라 아이 카드 뒤에 온다. 처음 던지는 질문이
   아니라 "이렇게 부를게요" 하고 확인받는 자리이므로, 상자 없이 가볍게 둔다. */
.famname{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 16px}
.famname .lbl{padding-left:4px;font-size:12.5px;font-weight:800;letter-spacing:.01em;color:var(--muted)}
.famname input{width:100%;max-width:360px;min-height:50px;padding:11px 16px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
  font-family:var(--display);font-size:19px;font-weight:900;letter-spacing:-.035em}
.famname input::placeholder{font-weight:900;color:color-mix(in srgb,var(--muted) 55%,transparent)}
/* 저절로 채워 넣은 값은 테두리를 점선으로 두어 "우리가 지어둔 이름"이라고 알린다. */
.famname input[data-auto="1"]{border-style:dashed;border-color:color-mix(in srgb,var(--acc) 50%,var(--line))}
.famname small{padding-left:4px;font-size:12px;color:var(--muted)}

.agree{display:flex;gap:12px;align-items:flex-start;min-height:56px;cursor:pointer;
  font-size:13.5px;line-height:1.6;color:var(--muted);
  border:1px solid var(--line);border-radius:18px;background:var(--surface-2);padding:15px 16px;margin:2px 0 4px;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.agree input{width:24px;height:24px;flex:0 0 auto;margin-top:1px;accent-color:var(--acc)}
.agree:has(input:checked){background:var(--acc-soft);border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--ink)}

/* 가족 토큰 붙여넣기 칸. 토큰이 길어 codebox 대신 나지막한 textarea다. */
.tokenbox{width:100%;min-height:84px;padding:13px 16px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface-2);font-size:13px;font-family:ui-monospace,monospace;word-break:break-all;resize:vertical}
.tokenbox::placeholder{font-family:inherit;color:color-mix(in srgb,var(--muted) 62%,transparent)}