:root {
  --bg: #000000;
  --bg-card: #0d0f17;
  --bg-card2: #14182a;
  --text: #ffffff;
  --text-dim: #8a90a6;
  --text-mute: #565b73;
  --cyan: #00d4ff;
  --green: #00ff88;
  --warm: #ff9f43;
  --danger: #ff4466;
  --cyan-glow: rgba(0, 212, 255, 0.45);
  --green-glow: rgba(0, 255, 136, 0.5);
  --warm-glow: rgba(255, 159, 67, 0.5);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Apple SD Gothic Neo", sans-serif;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

#app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  position: relative;
}

/* ---------- Header ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.brand { font-size: 20px; font-weight: 700; letter-spacing: 0.5px; display: inline-flex; align-items: baseline; gap: 8px; }
.brand .dot { color: var(--cyan); }
.brand .age-badge {
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(34,211,238,0.12); color: var(--cyan, #22d3ee);
  border: 1px solid rgba(34,211,238,0.35);
}
.brand .age-badge:empty { display: none; }
.statepill {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-card2);
  color: var(--text-dim);
  border: 1px solid transparent;
  white-space: nowrap;
}
.statepill.idle    { color: var(--text-dim); border-color: #2a3050; }
.statepill.wake    { color: var(--green); border-color: var(--green); box-shadow: 0 0 16px var(--green-glow); }
.statepill.listening { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); }
.statepill.thinking { color: var(--warm); border-color: var(--warm); box-shadow: 0 0 16px var(--warm-glow); }
.statepill.speaking { color: var(--green); border-color: var(--green); box-shadow: 0 0 16px var(--green-glow); }
.statepill.error   { color: var(--danger); border-color: var(--danger); }

/* ---------- Orb ---------- */
.stage {
  flex: 1;
  position: relative;          /* convo 오버레이 기준 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 0;
}
/* 오브 + 안내문은 배경(낮은 z), 대화는 그 위로 플로팅 */
.orb-wrap { z-index: 1; }
.idleprompt { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: opacity .3s; }
/* 대화가 시작되면 안내문 숨김 */
#app.has-convo .idleprompt { opacity: 0; pointer-events: none; }
.orb-wrap { position: relative; width: 240px; height: 240px; display: grid; place-items: center; overflow: visible; }
.orb-canvas { position: absolute; left: 50%; top: 50%; width: 170%; height: 170%; transform: translate(-50%, -50%); pointer-events: none; }
/* 오브 시각은 Jarvision 포팅(app.js JARVISION ORB) — canvas가 전담. 링·코어 DOM 없음. */

.bigstate { font-size: 26px; font-weight: 700; text-align: center; min-height: 32px; }
.hint { font-size: 15px; color: var(--text-mute); text-align: center; min-height: 20px; }

/* ---------- 대화 피드 (오브 위 투명 플로팅, 자동+터치 스크롤) ---------- */
.convo {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* 최신이 아래, 위로 스크롤해 과거 */
  gap: 12px;
  padding: 8px 4px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* iOS 관성 터치 스크롤 */
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* 위쪽 페이드 — 오래된 메시지가 투명하게 사라지며 오브 위로 떠 보임 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 8px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 8px), transparent 100%);
}
.convo::-webkit-scrollbar { display: none; }
.msg {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
  /* 오브/배경 위에서도 또렷하게 — 강한 그림자 */
  text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.85);
  animation: msgin .18s ease-out;
}
@keyframes msgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user   { color: #d6efff; align-self: stretch; }
.msg.user::before   { content: "🗣 "; opacity: .85; }
.msg.jarvis { color: #ffffff; align-self: stretch; }
.msg.jarvis::before { content: "🤖 "; opacity: .7; }
.msg.live   { opacity: .72; }   /* 인식/생성 중 — 약간 흐리게 */
.msg.interrupted { opacity: .5; }
.msg.interrupted::after { content: " …(중단됨)"; color: var(--text-mute); font-size: .8em; }

/* ---------- Baby status bar ---------- */
.babybar {
  margin-top: 16px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #0c1420, #0a0f18);
  border: 1px solid #182338;
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.babybar .emoji { font-size: 22px; }
.babybar .txt { flex: 1; color: var(--text); line-height: 1.35; }
.babybar .txt b { color: var(--green); font-weight: 600; }
.babybar .txt .next { color: var(--warm); }
/* 유산균(하루 1회) 상태 — 미복용 강조 / 완료 표시 */
.babybar .txt .probiotic-missing { color: var(--danger); font-weight: 800; }
.babybar .txt .probiotic-done { color: var(--green); font-weight: 600; }

/* ---------- Buttons ---------- */
.controls { margin-top: 16px; flex-shrink: 0; display: flex; gap: 10px; }
.btn {
  flex: 1;
  padding: 16px 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  color: var(--text);
  background: var(--bg-card2);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--cyan); color: #04141c; }
.btn.primary:active { background: #33ddff; }
.btn.stop { background: #2a1622; color: var(--danger); }
.btn.hidden { display: none; }

/* ---------- 상단 우측 컨트롤 (상태 옆 작은 버튼) ---------- */
.topright { display: flex; align-items: center; gap: 10px; }
.pillbtn { font-size: 13px; font-weight: 600; padding: 7px 15px; border: none; border-radius: 999px;
  background: var(--bg-card2); color: var(--text); cursor: pointer; white-space: nowrap;
  transition: transform .1s, background .15s; }
.pillbtn:active { transform: scale(0.95); }
.pillbtn.primary { background: var(--cyan); color: #04141c; }
.pillbtn.stop { background: #2a1622; color: var(--danger); }
.pillbtn.hidden { display: none; }

/* ---------- Gate overlay (first tap to grant mic) ---------- */
.gate {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px; padding: 40px; text-align: center; z-index: 50;
}
.gate.hidden { display: none; }
.gate h2 { font-size: 26px; font-weight: 700; }
.gate p { font-size: 16px; color: var(--text-dim); line-height: 1.5; max-width: 420px; }
.gate .start {
  margin-top: 10px;
  padding: 18px 48px;
  font-size: 19px; font-weight: 700;
  background: var(--cyan); color: #04141c;
  border: none; border-radius: 999px; cursor: pointer;
}
.gate .start:active { transform: scale(0.97); }

/* ---------- Debug (on-device self-debug console) ---------- */
.debug {
  margin-top: 10px; flex-shrink: 0;
  font-size: 11px; color: var(--text-mute);
  font-family: ui-monospace, Menlo, monospace;
  word-break: break-all;
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 8px; background: rgba(0,0,0,0.35);
}
.debug.hidden { display: none; }
.dbg-bar { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dbg-title { color: #6cf; font-weight: 600; letter-spacing: .04em; }
.dbg-last { flex: 1; min-width: 0; color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font-size: 11px; padding: 3px 9px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
  color: var(--text-mute); font-family: inherit;
}
.dbg-btn:active { background: rgba(255,255,255,0.14); }
.dbg-log {
  max-height: 30vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  text-align: left; line-height: 1.45;
}
.dbg-row { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.04); white-space: pre-wrap; }
.dbg-t { color: #5a6470; margin-right: 6px; }
.dbg-info  { color: #aeb6c0; }
.dbg-warn  { color: #f4c761; }
.dbg-error { color: #ff6b81; }

/* ---------- iPad Pro 반응형 (10.5" 834px / 13" 1024px, 양 방향) ----------
   Meta Display(600×600)·폰은 이 블록 미적용 → 현재 크기 유지.
   iPad는 화면 꽉 차게 + vmin 기반으로 10.5"~13" 사이 자연 스케일. */
@media (min-width: 768px) and (min-height: 700px) {
  #app {
    max-width: none;            /* 아이패드 13"·10.5" 화면 꽉 채움 (양옆 여백 제거) */
    padding: max(40px, env(safe-area-inset-top)) clamp(40px, 6vw, 96px) max(40px, env(safe-area-inset-bottom));
  }
  .topbar { margin-bottom: clamp(8px, 2vmin, 24px); }
  .brand { font-size: clamp(24px, 3.4vmin, 40px); }
  .statepill { font-size: clamp(15px, 2vmin, 24px); padding: clamp(8px, 1.4vmin, 14px) clamp(16px, 2.4vmin, 28px); }

  .stage { gap: clamp(30px, 5vmin, 60px); }
  .orb-wrap { width: min(44vmin, 480px); height: min(44vmin, 480px); }

  .bigstate { font-size: clamp(32px, 5.4vmin, 60px); min-height: 1.2em; }
  .hint { font-size: clamp(17px, 2.8vmin, 30px); min-height: 1.3em; }

  .convo { gap: clamp(12px, 1.8vmin, 22px); padding: clamp(8px, 1.5vmin, 18px) clamp(6px, 1.2vmin, 16px); }
  .msg { font-size: clamp(26px, 3.4vmin, 44px); }

  .babybar { margin-top: clamp(16px, 2.4vmin, 28px); border-radius: clamp(16px, 2.2vmin, 24px); padding: clamp(16px, 2.4vmin, 28px) clamp(18px, 2.8vmin, 32px); font-size: clamp(17px, 2.4vmin, 28px); gap: clamp(12px, 1.8vmin, 20px); }
  .babybar .emoji { font-size: clamp(24px, 3.2vmin, 38px); }

  .topright { gap: clamp(8px, 1.4vmin, 18px); }
  .pillbtn { font-size: clamp(14px, 1.9vmin, 24px); padding: clamp(8px, 1.2vmin, 14px) clamp(15px, 2.2vmin, 28px); }

  .gate h2 { font-size: clamp(30px, 4.6vmin, 52px); }
  .gate p { font-size: clamp(18px, 2.6vmin, 30px); max-width: min(80vw, 640px); }
  .gate .start { padding: clamp(20px, 2.8vmin, 32px) clamp(48px, 8vmin, 96px); font-size: clamp(20px, 2.8vmin, 32px); }
}

/* ---------- 키네틱 대형 자막 (릴스식 단어별) ---------- */
.kinetic {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.kword {
  position: absolute;
  font-weight: 900;
  font-size: clamp(64px, 17vw, 240px);
  line-height: 1; text-align: center;
  letter-spacing: -0.02em;
  max-width: 94vw; padding: 0 3vw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 8px 48px rgba(0,0,0,0.85), 0 0 30px rgba(0,0,0,0.6);
  animation: kpop 0.20s cubic-bezier(.2,1.5,.4,1) both;
  will-change: transform, opacity;
}
.kword.user   { color: #e6f5ff; }
.kword.jarvis { color: #d6ffe9; }
.kword.out { animation: kout 0.40s ease-in forwards; }
@keyframes kpop { from { transform: scale(.45); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 아래(대화 피드)쪽으로 축소·페이드되며 문장에 합쳐지는 느낌 */
@keyframes kout { to { transform: scale(.30) translateY(36vh); opacity: 0; } }



/* ===== 온디맨드 시각화(그래프/표) 오버레이 ===== */
.display { position: fixed; inset: 0; z-index: 50; background: rgba(6,10,18,0.985);
  display: flex; flex-direction: column; }
.display.hidden { display: none; }
.display-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); flex: 0 0 auto; }
.display-title { color: #e6edf3; font-size: 20px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.display-close { background: rgba(255,255,255,0.10); color: #e6edf3; border: none;
  border-radius: 10px; padding: 11px 20px; font-size: 17px; cursor: pointer; flex: 0 0 auto; }
.display-close:active { background: rgba(255,255,255,0.22); }
.display-frame { flex: 1 1 auto; width: 100%; border: none; background: #0a0e14; }
.display-spin { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; pointer-events: none; }
.display-spin.hidden { display: none; }
.spinner { width: 54px; height: 54px; border: 4px solid rgba(34,211,238,0.22);
  border-top-color: #22d3ee; border-radius: 50%; animation: dspin 0.9s linear infinite; }
.display-spin-txt { color: #9fb0c0; font-size: 18px; }
@keyframes dspin { to { transform: rotate(360deg); } }


/* ===== 상태 대시보드 (대화 종료 시 크게) ===== */
.statusboard { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column;
  justify-content: center; gap: 2.2vh; padding: 4vh 5vw; box-sizing: border-box;
  background: radial-gradient(120% 90% at 50% 40%, #0d1622 0%, #070b12 70%); overflow: hidden; }
.statusboard.hidden { display: none; }
/* idle 모드: 오브·프롬프트·대화·바 숨김 (대시보드만) */
#app.idle-board .orb-wrap, #app.idle-board #convo, #app.idle-board .idleprompt,
#app.idle-board #babybar, #app.idle-board #kinetic { display: none !important; }
.sb-head { display: flex; align-items: baseline; gap: 14px; }
.sb-name { font-size: clamp(30px, 5vw, 64px); font-weight: 800; color: #e6edf3; letter-spacing: -0.5px; }
.sb-age { font-size: clamp(15px, 2vw, 24px); color: #7c8ba0; }
.sb-wake { margin-left: auto; font-size: clamp(13px, 1.7vw, 20px); color: #22d3ee; opacity: 0.85; }
.sb-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2vh 4vw; align-items: center; }
.sb-card .lbl { font-size: clamp(15px, 2vw, 24px); color: #8b9bb0; margin-bottom: 6px; }
.sb-card .big { font-size: clamp(40px, 8.5vw, 120px); font-weight: 800; line-height: 1.0;
  color: #e6edf3; letter-spacing: -1px; }
.sb-card .big .unit { font-size: 0.42em; color: #9fb0c0; font-weight: 600; margin-left: 6px; }
.sb-card .ago { font-size: clamp(20px, 3.4vw, 48px); color: #34d399; font-weight: 700; margin-top: 4px; }
.sb-card .sub { font-size: clamp(16px, 2.4vw, 30px); color: #cbd5e1; margin-top: 6px; }
.sb-next .big { color: #22d3ee; }
.sb-prob { display: flex; align-items: center; gap: 16px; }
.sb-prob .ic { font-size: clamp(40px, 7vw, 96px); }
.sb-prob.done .txt { color: #34d399; } .sb-prob.miss .txt { color: #f87171; }
.sb-prob .txt { font-size: clamp(26px, 4.5vw, 60px); font-weight: 800; }
.sb-graph { grid-column: 1 / -1; }
.sb-graph .lbl { font-size: clamp(15px, 2vw, 24px); color: #8b9bb0; margin-bottom: 8px; }
.sb-graph svg { width: 100%; height: clamp(120px, 22vh, 240px); display: block; }

/* ===== 카드형 대시보드 (재디자인) ===== */
.statusboard { justify-content: stretch !important; padding: clamp(16px,3vh,40px) clamp(20px,3.5vw,64px) !important; }
.db { flex: 1; width: 100%; display: grid; gap: clamp(12px,2vh,26px) clamp(12px,1.8vw,28px);
  grid-template-columns: 1.25fr 1fr 1.12fr;
  grid-template-rows: auto auto minmax(200px, 1.25fr);
  grid-template-areas: "feed next check" "term term check" "graph graph graph"; min-height: 0; }
.db-feed{grid-area:feed} .db-next{grid-area:next} .db-check{grid-area:check}
.db-term{grid-area:term} .db-tip{grid-area:tip}
.db-card { background: linear-gradient(158deg, rgba(22,33,50,0.72), rgba(11,17,27,0.55));
  border: 1px solid rgba(255,255,255,0.07); border-radius: clamp(16px,2vmin,24px);
  padding: clamp(14px,2.1vmin,28px); display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28); }
.db-card.tappable { cursor: pointer; transition: transform .12s ease, border-color .12s; }
.db-card.tappable:active { transform: scale(0.985); border-color: rgba(34,211,238,0.45); }
.db-lbl { font-size: clamp(13px,1.65vmin,20px); color: #8b9bb0; margin-bottom: clamp(6px,1vmin,12px);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; }
.db-hint { font-size: 0.82em; color: #46596f; white-space: nowrap; }
.db-time { font-size: clamp(38px,6.2vmin,82px); font-weight: 800; line-height: 0.95; letter-spacing: -2px; color: #e6edf3; }
.db-time.cyan { color: #22d3ee; }
.db-kindml { font-size: clamp(17px,2.5vmin,34px); color: #cbd5e1; margin-top: clamp(6px,1vmin,12px); font-weight: 600; }
.db-ago { font-size: clamp(17px,2.7vmin,38px); color: #34d399; font-weight: 700; margin-top: auto; padding-top: 8px; }
.db-sub { font-size: clamp(15px,2.1vmin,28px); color: #cbd5e1; margin-top: 6px; }
.db-acc { margin-top: auto; padding-top: 10px; font-size: clamp(12px,1.5vmin,20px); color: #8b9bb0; }
.db-acc b { color: #e6edf3; }
.db-accbar { display: block; height: 7px; background: rgba(255,255,255,0.08); border-radius: 99px; margin-top: 7px; overflow: hidden; }
.db-accbar i { display: block; height: 100%; background: linear-gradient(90deg,#f59e0b,#22d3ee); border-radius: 99px; }
.db-termmain { font-size: clamp(34px,6.2vmin,86px); font-weight: 800; color: #e6edf3; line-height: 1; }
.db-termmain .u { font-size: 0.40em; color: #9fb0c0; font-weight: 600; margin: 0 1px 0 5px; }
.db-checklist { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: clamp(6px,1vmin,11px); min-height: 0; }
.db-ck { display: flex; align-items: center; gap: clamp(9px,1.3vmin,15px); padding: clamp(8px,1.3vmin,15px) clamp(10px,1.4vmin,16px);
  background: rgba(255,255,255,0.045); border-radius: 12px; cursor: pointer; transition: background .12s; }
.db-ck:active { background: rgba(255,255,255,0.1); }
.db-ckbox { width: clamp(22px,2.5vmin,32px); height: clamp(22px,2.5vmin,32px); border-radius: 8px; border: 2px solid #3f5168;
  display: flex; align-items: center; justify-content: center; color: #04141c; font-weight: 800; flex: 0 0 auto; font-size: 0.85em; }
.db-ck.done .db-ckbox { background: #34d399; border-color: #34d399; }
.db-cktxt { font-size: clamp(14px,1.95vmin,26px); color: #e6edf3; line-height: 1.25; }
.db-ck.done .db-cktxt { color: #6b7a8d; text-decoration: line-through; }
/* [제안] 랜덤 퀘스트 — 미리알림 항목과 구분되는 점선 골드 카드 */
.db-quest { border: 1px dashed rgba(250,204,21,0.45); background: rgba(250,204,21,0.06); border-radius: 10px; }
.db-quest.done { border-color: rgba(250,204,21,0.2); background: transparent; }
.db-quest-tag { display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
  background: rgba(250,204,21,0.18); color: #facc15; font-size: 0.8em; font-weight: 800; letter-spacing: 0.5px; }
.db-tip { background: linear-gradient(158deg, rgba(34,52,46,0.5), rgba(11,20,17,0.5)); }
.db-tiptext { font-size: clamp(14px,1.95vmin,26px); color: #dbe4ee; line-height: 1.45; }
.db-tipobs { font-size: clamp(12px,1.6vmin,22px); color: #34d399; margin-top: 8px; }
.db-empty { color: #7c8ba0; font-size: clamp(15px,2vmin,22px); display: flex; align-items: center; justify-content: center; height: 150px; }
/* 모달 */
.dbmodal { position: fixed; inset: 0; z-index: 40; background: rgba(4,8,14,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.dbmodal.hidden { display: none; }
.dbmodal-card { background: #0d1622; border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; width: min(92vw, 1000px); max-height: 88vh;
  padding: clamp(22px,3vmin,42px); position: relative; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.6); overflow: hidden; min-height: 0; }
/* 2026-08-31 Sir 지적: 수유텀 모달의 '전체 기간 간격' 리스트가 스크롤 불가 — .db-ivlist는 flex:1+overflow
   준비가 돼 있었지만 부모(#dbmodal-body)가 평범한 block이라 flex 제약이 안 걸려 카드 overflow:hidden에
   잘리기만 했다. 바디를 flex column+min-height:0으로 만들어 스크롤 체인을 카드까지 연결한다.
   2026-09-14 Sir 지적: 수유/수면 '시작+끝' 모드는 타임휠 2개가 모두 렌더돼 모달이 길어지는데,
   아이패드(clamp vmin 최대치·가로/스플릿뷰로 88vh가 작음)에선 콘텐츠가 카드를 넘쳐 맨 아래
   저장버튼(#qi-fsub/#qi-slsub)이 overflow:hidden에 잘려 안 보였다('시작만/끝만'은 휠 1개라 짧아 안전).
   근본수정: 바디에 overflow-y:auto를 줘 어떤 기기·방향·키보드 상황에서도 스크롤로 저장버튼에 도달 가능.
   (db-ivlist는 자체 flex:1 스크롤을 유지하므로 이 바디 스크롤은 넘칠 때만 발동하는 안전망.) */
#dbmodal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dbmodal-x { position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08); color: #e6edf3; font-size: 20px; cursor: pointer; }
.dbmodal-x:active { background: rgba(255,255,255,0.18); }
.db-modal-h { font-size: clamp(24px,3.4vmin,42px); font-weight: 800; color: #e6edf3; }
.db-modal-sub { font-size: clamp(14px,1.8vmin,22px); color: #8b9bb0; margin-top: 6px; }
.db-modal-graph { margin-top: 18px; min-height: 0; }
.db-stats { display: flex; gap: 5vw; margin-top: 16px; }
.db-stats > div { display: flex; flex-direction: column; }
.db-stats span { font-size: clamp(13px,1.6vmin,18px); color: #8b9bb0; }
.db-stats b { font-size: clamp(22px,3vmin,40px); color: #e6edf3; font-weight: 800; }
.db-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 5vw; margin-top: 18px; }
.db-calc > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #1e2733; padding-bottom: 9px; }
.db-calc span { color: #8b9bb0; font-size: clamp(14px,1.8vmin,22px); }
.db-calc b { font-size: clamp(17px,2.1vmin,28px); color: #e6edf3; }
.db-calc small { color: #566072; font-size: clamp(11px,1.4vmin,16px); margin-left: 6px; }
/* flex-basis 0이면 카드 높이가 content 기준으로 수축할 때 리스트가 0px로 접힌다(2026-08-31 실측) —
   min-height로 존재감을 주고, 카드가 88vh에 닿으면 shrink로 줄되 그 이하로는 안 접히게. */
.db-ivlist { margin-top: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: clamp(180px, 30vh, 480px); }
.db-ivrow { display: flex; justify-content: space-between; padding: clamp(8px,1.2vmin,13px) 4px; border-bottom: 1px solid #161f2b; font-size: clamp(14px,1.8vmin,22px); }
.db-ivrow span { color: #9fb0c0; } .db-ivrow b { color: #e6edf3; }
.cyan { color: #22d3ee; } .mint { color: #34d399; }
.db-subtle { font-size: 0.85em; color: #5d6f86; font-weight: 400; margin-left: 4px; }

/* ===== 대시보드 v2: 가로 term + 풀폭 그래프 + 다음수유 색상 + 헤더 회전팁 ===== */
/* 다음 수유 색상 밴드 */
.db-time.green { color: #34d399; } .db-time.yellow { color: #fbbf24; } .db-time.red { color: #f87171; }
.db-sub.green { color: #6ee7b7; } .db-sub.yellow { color: #fcd34d; } .db-sub.red { color: #fca5a5; }
.db-accbar i { transition: width .4s; }
.amber { color: #fbbf24; }
/* 평균 수유텀 — 가로형 + 이탈 곡선 */
.db-term { flex-direction: row; align-items: stretch; gap: clamp(16px,2.5vw,44px); }
.db-termL { flex: 1 1 52%; display: flex; flex-direction: column; min-width: 0; }
.db-termR { flex: 1 1 48%; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.db-devlbl { font-size: clamp(12px,1.5vmin,18px); color: #8b9bb0; margin-bottom: clamp(6px,1vmin,12px); }
.db-termR svg { width: 100%; height: auto; max-height: clamp(80px,14vmin,150px); }
/* 헤더 회전 꿀팁 */
.hdrtip { flex: 1 1 auto; min-width: 0; margin: 0 clamp(14px,2.2vw,40px); display: flex; align-items: center;
  gap: clamp(8px,1.2vw,14px); overflow: hidden; opacity: 0; transition: opacity .55s ease; }
.hdrtip.show { opacity: 1; }
.hdrtip.hidden { display: none; }
.hdrtip-ic { font-size: clamp(16px,2vmin,26px); flex: 0 0 auto; }
.hdrtip-stage { font-size: clamp(11px,1.3vmin,17px); color: #34d399; background: rgba(52,211,153,0.13);
  padding: 4px 12px; border-radius: 99px; white-space: nowrap; flex: 0 0 auto; font-weight: 600; }
.hdrtip-txt { font-size: clamp(12px,1.5vmin,20px); color: #aebccd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ===== 대시보드 v3: 풀스크린 + 전광판 마퀴 + 2페이지 스크롤 + 깜빡임 제거 ===== */
/* 홈화면 PWA 전체화면 — 좌우 여백 최소화(꽉 채움) */
#app { padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
@media (min-width: 768px) and (min-height: 700px) {
  #app { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
}
.statusboard { padding: clamp(8px,1.2vh,16px) clamp(8px,1.2vw,18px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: y mandatory; justify-content: flex-start !important; }
/* 전광판 마퀴 꿀팁 (우→좌 무한 흐름, 큰 글씨) */
.ticker { overflow: hidden; white-space: nowrap; flex: 0 0 auto; margin-top: clamp(6px,1vh,14px); }
.ticker.hidden { display: none; }
.ticker-in { display: inline-flex; animation-name: tkscroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.tk-seg { display: inline-block; padding-right: 6vw; font-size: clamp(22px, 4.4vmin, 52px); font-weight: 800; color: #e6edf3; letter-spacing: -0.5px; line-height: 1.15; }
.tk-stage { color: #34d399; }
@keyframes tkscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* 2페이지 상하 스크롤 */
.db { flex: none !important; width: 100%; display: flex !important; flex-direction: column; }
.db-page { width: 100%; scroll-snap-align: start; display: grid; gap: clamp(10px,1.6vh,22px) clamp(10px,1.4vw,22px); box-sizing: border-box; padding-bottom: clamp(8px,1.4vh,18px); }
.db-p1 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "feed next" "term norm"; }
.db-p2 { grid-template-rows: 1fr; grid-template-areas: "check"; }

/* ===== 1페이지 글씨 확대 (3개 카드가 한 화면 → 여유 큼) =====
   sr_5b21e77d: 카드 내용(시계+종류+경과)이 행 높이를 넘쳐 아래 카드와 겹쳐 보이던 회귀(2026-07-12).
   폰트를 행에 맞게 조정하고 카드에 overflow 안전망 — 칸을 넘기면 겹치는 대신 잘린다. */
.db-p1 .db-card { overflow: hidden; }
.db-p1 .db-lbl { font-size: clamp(15px, 2.1vmin, 28px); }
.db-p1 .db-time { font-size: clamp(48px, 9.2vmin, 128px); letter-spacing: -3px; }
.db-p1 .db-kindml { font-size: clamp(20px, 3.2vmin, 42px); margin-top: clamp(6px,1vmin,14px); }
.db-p1 .db-ago { font-size: clamp(22px, 3.4vmin, 48px); }
.db-p1 .db-sub { font-size: clamp(18px, 2.7vmin, 36px); }
.db-p1 .db-acc { font-size: clamp(15px, 2vmin, 28px); }
.db-p1 .db-acc b { font-size: 1.05em; }
.db-p1 .db-accbar { height: clamp(8px,1.1vmin,12px); }
.db-p1 .db-termmain { font-size: clamp(48px, 9.2vmin, 124px); }
.db-p1 .db-devlbl { font-size: clamp(14px, 1.9vmin, 26px); }
.db-p1 .db-hint { font-size: 0.82em; }

/* ===== 1페이지 글씨 추가 확대 v3 (전체적으로 한 단계 더) ===== */
.db-p1 .db-lbl { font-size: clamp(21px, 3.1vmin, 46px); }
.db-p1 .db-hint { font-size: 0.7em; }
.db-p1 .db-time { font-size: clamp(74px, 14.5vmin, 200px); letter-spacing: -4px; }
.db-p1 .db-kindml { font-size: clamp(34px, 5.6vmin, 76px); margin-top: clamp(10px,1.6vmin,22px); }
.db-p1 .db-ago { font-size: clamp(38px, 6.2vmin, 88px); }
.db-p1 .db-sub { font-size: clamp(28px, 4.3vmin, 60px); }
.db-p1 .db-acc { font-size: clamp(20px, 3vmin, 42px); }
.db-p1 .db-acc b { font-size: 1.1em; }
.db-p1 .db-accbar { height: clamp(10px,1.4vmin,16px); }
.db-p1 .db-termmain { font-size: clamp(68px, 13vmin, 196px); }
.db-p1 .db-devlbl { font-size: clamp(19px, 2.7vmin, 38px); }

/* ===== 다음 수유 카운트다운 (실시간) ===== */
.db-countdown { font-size: clamp(56px, 11vmin, 160px); font-weight: 800; line-height: 1.0; letter-spacing: -3px; color: #22d3ee; font-variant-numeric: tabular-nums; }
.db-countdown.green { color: #34d399; } .db-countdown.yellow { color: #fbbf24; } .db-countdown.red { color: #f87171; }
.db-p1 .db-countdown { font-size: clamp(62px, 12.5vmin, 180px); }
/* h:mm:ss 등 7자↑ 긴 텍스트 — mm:ss 기준 폰트로는 카드 폭 초과(2026-07-18 검출) → 약 72%로 축소 */
.db-countdown.long { font-size: clamp(40px, 7.9vmin, 115px); }
.db-p1 .db-countdown.long { font-size: clamp(45px, 9vmin, 130px); }

/* 2페이지 체크리스트도 소폭 확대 */
.db-cktxt { font-size: clamp(18px, 2.5vmin, 32px); }
.db-ck { padding: clamp(10px,1.6vmin,18px) clamp(12px,1.7vmin,20px); }
.db-ckbox { width: clamp(26px,3vmin,40px); height: clamp(26px,3vmin,40px); }

/* ===== 모닝브리핑 오버레이(dbmodal 재활용) ===== */
.mb-feed { margin: 14px 0 18px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(52,211,153,0.14), rgba(34,211,238,0.10));
  border: 1px solid rgba(52,211,153,0.28); color: #d7f5e8;
  font-size: clamp(16px, 2.1vmin, 26px); line-height: 1.45; font-weight: 600; }
.mb-row { display: grid; grid-template-columns: clamp(96px,12vmin,150px) 1fr; gap: clamp(10px,1.6vmin,20px);
  padding: clamp(9px,1.4vmin,16px) 2px; border-bottom: 1px solid #1a2532; align-items: start; }
.mb-row:last-child { border-bottom: none; }
.mb-k { color: #7dd3fc; font-weight: 800; font-size: clamp(15px,1.95vmin,24px); white-space: nowrap; }
.mb-v { color: #dbe4ee; font-size: clamp(14px,1.9vmin,23px); line-height: 1.5; }

/* ===== 모닝브리핑 인사이트(저장 콘텐츠) 오버레이 ===== */
.mb-sec { margin: 18px 0 8px; font-size: clamp(15px,2vmin,24px); font-weight: 800; color: #fbbf24; }
.mb-ins { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.035); border: 1px solid #1c2733; }
.mb-ins-c { font-size: clamp(15px,2vmin,24px); font-weight: 800; color: #e6edf3; line-height: 1.4; }
.mb-ins-p { font-size: clamp(13px,1.75vmin,21px); color: #c2ccd8; line-height: 1.5; margin-top: 5px; padding-left: 4px; }
.mb-ins-s { font-size: clamp(12px,1.55vmin,18px); color: #7dd3fc; margin-top: 5px; }
.mb-vidhint { margin: 10px 0 4px; padding: 11px 14px; border-radius: 12px; font-weight: 700;
  background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); color: #fecaca;
  font-size: clamp(14px,1.85vmin,22px); }

/* ===== 원본 영상 재생 레이어 ===== */
.videolayer { position: fixed; inset: 0; z-index: 60; background: rgba(3,6,10,0.96);
  display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.videolayer.hidden { display: none; }

/* ===== 오늘의 Executive Report 레이어 =====
   sr_c9e41f02: eb8033e가 app.js/index.html만 커밋하고 이 블록은 서버 작업트리에 미커밋으로 남아
   2026-07-12 덮어쓰기 배포로 소실 → 흰 창 상시 노출 회귀. 07-jarvis-ipad 3종(app.js/styles.css/index.html)은
   반드시 함께 커밋하고, 배포 전 서버 git status 확인(scripts/deploy-ipad.sh 사용). */
.reportlayer { position: fixed; inset: 0; z-index: 55; background: rgba(3,6,10,0.96); display: flex; flex-direction: column; }
.reportlayer.hidden { display: none; }
.report-head { display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; flex: 0 0 auto; }
/* 플로팅 닫기 버튼 — 흰 iframe 위에 항상 떠 있고 노치/상태바(safe-area) 아래로 배치 */
.report-fab { position: absolute; z-index: 3;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
  width: clamp(44px, 6vmin, 56px); height: clamp(44px, 6vmin, 56px); border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(10,16,26,0.82);
  color: #e6edf3; font-size: clamp(20px, 2.8vmin, 26px); font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.report-fab:active { transform: scale(0.92); background: rgba(30,41,59,0.9); }
.report-title { font-size: clamp(17px,2.2vmin,26px); font-weight: 800; color: #e6edf3; }
.report-wrap { flex: 1; min-height: 0; padding: 0 20px 20px; display: flex; }
.report-frame { width: 100%; height: 100%; border: 0; border-radius: 16px; background: #fff; }
.video-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.video-title { font-size: clamp(18px,2.5vmin,30px); font-weight: 800; color: #e6edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-close { border: none; border-radius: 12px; padding: 10px 18px; background: rgba(255,255,255,0.1); color: #e6edf3; font-size: clamp(15px,2vmin,22px); font-weight: 700; cursor: pointer; flex: 0 0 auto; }
.video-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 20px; min-height: 0; }
.video-frame { width: 100%; height: 100%; max-width: 1600px; border: 0; border-radius: 16px; background: #000; }
.video-hint { text-align: center; padding: 14px; font-size: clamp(16px,2.2vmin,28px); color: #fcd34d; font-weight: 700; min-height: 24px; }

/* ===== 3페이지: 빠른 입력 + 타임라인 (기존 카드 디자인 유지) =====
   2026-07-19: 고빈도 3종(수유·수면·기저귀)은 화면 최하단 대형 버튼(.db-qi-main)으로 분리 —
   폰에서 엄지가 닿기 좋은 위치. 저빈도 8종은 상단 4열 그리드(모유·유축이 1·2번째). */
.db-p3 { grid-template-rows: auto 1fr auto; grid-template-areas: "qi" "tl" "qimain"; }
.db-qi { grid-area: qi; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px,1.2vw,16px); }
.db-qi-main { grid-area: qimain; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px,1.2vw,16px);
  padding-top: clamp(8px,1.2vmin,14px); }
.qi-card.qi-main { background: rgba(34,211,238,0.08); border-color: #164e63;
  padding: clamp(12px,2vmin,22px) clamp(8px,1.2vmin,14px); }
.qi-card.qi-main .qi-icon { font-size: clamp(34px,5.4vmin,60px); }
.qi-card.qi-main .qi-label { font-size: clamp(15px,2.2vmin,26px); }
.qi-card { background: rgba(255,255,255,0.04); border: 1px solid #1c2733; border-radius: 16px;
  padding: clamp(10px,1.6vmin,18px) clamp(8px,1.2vmin,14px); display: flex; flex-direction: column;
  align-items: center; gap: clamp(4px,0.8vmin,10px); cursor: pointer; transition: background .15s, transform .1s; }
.qi-card:active { transform: scale(0.97); background: rgba(255,255,255,0.09); }
.qi-icon { font-size: clamp(28px,4.6vmin,52px); line-height: 1; }
.qi-label { font-size: clamp(13px,1.85vmin,22px); font-weight: 800; color: #e6edf3; }
.qi-sub { font-size: clamp(10px,1.4vmin,15px); color: #8b9bb0; }

/* ── 위글모드(꾹누름 숨김/재배치, 2026-08-31) ──
   회전은 transform이 아닌 rotate 속성 — 드래그/FLIP의 inline transform과 독립(충돌 없음). */
@keyframes qi-wig { 0% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } 100% { rotate: -1.5deg; } }
.qi-wiggling .qi-card { animation: qi-wig .3s ease-in-out infinite; touch-action: none; position: relative; }
.qi-wiggling .qi-card:nth-child(2n) { animation-duration: .34s; animation-delay: -.14s; }
.qi-wiggling .qi-card:nth-child(3n) { animation-duration: .27s; animation-delay: -.07s; }
.qi-card.qi-hidden { display: none; }
.qi-card.qi-drag { animation: none; rotate: 0deg; z-index: 9; opacity: .92; box-shadow: 0 12px 30px rgba(0,0,0,0.5); }
.qi-minus { position: absolute; top: -9px; left: -9px; width: clamp(26px,3.4vmin,34px); height: clamp(26px,3.4vmin,34px);
  border-radius: 50%; background: #2a3546; color: #e6edf3; border: 1px solid #45566e;
  font-size: clamp(16px,2.4vmin,22px); line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 4; }
.qi-restorebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,0.05); border: 1px dashed #33415a; border-radius: 14px; margin-bottom: 6px; }
.qi-restore-lbl { color: #8b9bb0; font-size: clamp(12px,1.6vmin,18px); font-weight: 700; }
.qi-restore-empty { color: #5d6f86; font-size: clamp(12px,1.6vmin,17px); }
.qi-chiprestore { background: rgba(255,255,255,0.08); border: 1px solid #2a3749; border-radius: 999px;
  color: #e6edf3; font-size: clamp(12px,1.7vmin,18px); padding: 6px 12px; cursor: pointer; }
.qi-done { position: fixed; bottom: 3vh; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #22d3ee; color: #06131c; font-weight: 800; font-size: clamp(15px,2.2vmin,22px);
  border: none; border-radius: 999px; padding: clamp(10px,1.6vmin,16px) clamp(26px,4vmin,44px);
  box-shadow: 0 10px 30px rgba(34,211,238,0.35); }
.statusboard.qi-lock { overflow: hidden !important; }

/* 타임라인 (오늘 기록 시간순 역순 — 최신이 위) */
.db-tl { grid-area: tl; background: rgba(255,255,255,0.025); border: 1px solid #1c2733; border-radius: 16px;
  padding: clamp(10px,1.4vmin,16px); overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; }
.db-tl-h { font-size: clamp(13px,1.7vmin,20px); color: #8b9bb0; font-weight: 800; margin-bottom: clamp(8px,1.2vmin,14px);
  display: flex; justify-content: space-between; }
.tl-row { display: grid; grid-template-columns: clamp(56px,7vw,90px) 1fr auto; gap: clamp(8px,1.2vw,16px);
  padding: clamp(8px,1.2vmin,14px) clamp(4px,0.6vw,8px); border-bottom: 1px solid #161f2b; align-items: center; }
.tl-row:last-child { border-bottom: none; }
.tl-time { font-size: clamp(14px,1.9vmin,22px); color: #7dd3fc; font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-main { font-size: clamp(14px,1.9vmin,22px); color: #e6edf3; font-weight: 700; }
.tl-sub { font-size: clamp(12px,1.55vmin,18px); color: #8b9bb0; }
.tl-photo { width: clamp(42px,5vmin,64px); height: clamp(42px,5vmin,64px); border-radius: 10px; object-fit: cover; border: 1px solid #1c2733; }
.tl-row.new { animation: tlHi 1.8s ease-out; }
@keyframes tlHi { 0% { background: rgba(125,211,252,0.30); } 60% { background: rgba(125,211,252,0.18); } 100% { background: transparent; } }
.db-tl-empty { color: #6b7a8d; text-align: center; padding: clamp(24px,4vmin,48px); font-size: clamp(13px,1.7vmin,20px); }

/* ── 아이패드 가로뷰: 2페이지(db-p3) 좌=기록 / 우=버튼 분리 (2026-09-14 Sir 요청) ──
   세로로 쌓인 탓에 기록 리스트가 너무 작아 스크롤이 불편 → 가로에서만 2컬럼.
   orientation:landscape + 900px 하한이라 아이폰(가로 포함, <900px)·아이패드 세로·
   좁은 데스크탑 창은 기존 세로 스택 그대로 유지(회귀 없음). */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 600px) {
  .db-p3 {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "tl qi" "tl qimain";
  }
  /* .db-page는 sizePages()가 인라인 height를 고정 → 자식은 100%/min-height:0로 그 안에서 스크롤 */
  .db-p3 .db-tl { grid-area: tl; height: 100%; min-height: 0; overflow-y: auto; }
  .db-p3 .db-qi { align-content: start; }
  .db-p3 .db-qi-main { grid-template-columns: repeat(3, 1fr); align-content: stretch; }
  /* 우측 하단 고빈도 버튼은 남은 높이를 채우므로 내용을 수직 중앙에(큰 터치 타깃) */
  .db-p3 .db-qi-main .qi-card.qi-main { justify-content: center; }
}

/* 상단 슬라이드 다운 토스트 */
.toast { position: fixed; top: 0; left: 50%; transform: translate(-50%, -100%); z-index: 80;
  background: linear-gradient(135deg, #22d3ee, #34d399); color: #04141c; font-weight: 800;
  padding: clamp(11px,1.6vmin,18px) clamp(20px,2.6vmin,32px); border-radius: 0 0 18px 18px;
  font-size: clamp(15px,2vmin,24px); box-shadow: 0 8px 28px rgba(34,211,238,0.35);
  transition: transform .35s cubic-bezier(0.2,0.9,0.3,1.15); max-width: 80vw; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.toast.show { transform: translate(-50%, env(safe-area-inset-top, 8px)); }
.toast.hidden { display: none; }

/* 빠른 입력 팝업 (모유 좌/우, 기저귀 쉬/응가) — db-modal 재사용하되 가벼운 형태 */
.qi-pop-row { display: flex; gap: clamp(8px,1.2vw,16px); margin: clamp(14px,2vmin,22px) 0; }
.qi-pop-btn { flex: 1; padding: clamp(14px,2vmin,22px); border-radius: 14px; border: 1px solid #1c2733;
  background: rgba(255,255,255,0.06); color: #e6edf3; font-size: clamp(16px,2.2vmin,26px); font-weight: 800; cursor: pointer; transition: background .15s; }
.qi-pop-btn:active { background: rgba(125,211,252,0.18); }
.qi-pop-btn.selected { border-color: #22d3ee; background: rgba(34,211,238,0.18); }
.qi-pop-input { width: 100%; padding: clamp(12px,1.7vmin,18px); border-radius: 12px; border: 1px solid #1c2733;
  background: rgba(255,255,255,0.04); color: #e6edf3; font-size: clamp(20px,3vmin,36px); font-weight: 800; text-align: center; -webkit-appearance: none; }
.qi-pop-input + .qi-pop-input { margin-top: clamp(8px,1.2vmin,14px); }
.qi-pop-hint { font-size: clamp(12px,1.55vmin,18px); color: #8b9bb0; margin-top: 6px; }
.qi-pop-submit { width: 100%; margin-top: clamp(14px,2vmin,22px); padding: clamp(14px,2vmin,22px);
  border-radius: 14px; border: none; background: linear-gradient(135deg, #22d3ee, #34d399); color: #04141c;
  font-size: clamp(16px,2.2vmin,26px); font-weight: 800; cursor: pointer; }
.qi-pop-submit:disabled { opacity: 0.4; }
.qi-pop-file { display: none; }

/* ===== 빠른입력 시:분 스크롤 휠 (timeWheelHtml) =====
   ⚠️ 유실 복원(2026-07-18): 이 블록은 워크트리 브랜치 1ac9360에서 개발됐으나
   main 이식 커밋(eb8033e)에 app.js/index.html만 포함되고 CSS가 통째로 빠져
   시:분이 스크롤휠 대신 24+60줄 전체 리스트로 펼쳐지는 사고 발생.
   app.js의 wireTimeWheel()이 .tw-item 높이 40px·.tw-col 높이 200px(패딩 80px)에
   의존하므로 이 수치를 바꾸면 JS ih() 스냅 계산과 함께 바꿔야 한다. */
.tw-wrap { margin-top: clamp(14px,2vmin,22px); }
.tw-lbl { font-size: clamp(13px,1.7vmin,20px); color: #8b9bb0; font-weight: 800; margin-bottom: 6px; }
.tw-lbl-sub { font-weight: 600; color: #6b7a8d; font-size: 0.82em; margin-left: 6px; }
.tw { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(4px,1vw,12px); }
.tw-band { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(260px, 70%); height: 40px;
  background: rgba(34,211,238,0.12); border-top: 1px solid rgba(34,211,238,0.45); border-bottom: 1px solid rgba(34,211,238,0.45);
  border-radius: 10px; pointer-events: none; }
.tw-col { height: 200px; box-sizing: border-box; padding: 80px 0; width: clamp(70px,9vmin,100px);
  overflow-y: scroll; scroll-snap-type: y mandatory; text-align: center;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior: contain; }
.tw-col::-webkit-scrollbar { display: none; }
.tw-item { height: 40px; line-height: 40px; scroll-snap-align: center;
  font-size: clamp(22px,3vmin,34px); font-weight: 800; color: #e6edf3; font-variant-numeric: tabular-nums; }
.tw-colon { font-size: clamp(22px,3vmin,34px); font-weight: 800; color: #7dd3fc; }
.tw-now { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 6px 12px; border-radius: 10px;
  border: 1px solid #1c2733; background: rgba(255,255,255,0.06); color: #7dd3fc; font-weight: 800;
  font-size: clamp(12px,1.5vmin,16px); cursor: pointer; }
.qi-pop-fbtn { display: inline-flex; align-items: center; gap: 8px; padding: clamp(10px,1.5vmin,16px) clamp(14px,2vmin,22px);
  border-radius: 12px; border: 1px solid #1c2733; background: rgba(255,255,255,0.05); color: #93c5fd;
  font-weight: 700; font-size: clamp(13px,1.75vmin,20px); cursor: pointer; }
.qi-pop-prev { display: block; max-width: 100%; max-height: clamp(120px,18vmin,200px); margin-top: clamp(10px,1.5vmin,16px); border-radius: 12px; }

/* ===== 타임라인 날짜 헤더(하이라이트 bar + 당일 누적) + 더보기 표시 ===== */
.tl-date { display: flex; align-items: center; justify-content: space-between; gap: clamp(6px,1vmin,12px); flex-wrap: wrap;
  font-size: clamp(12px,1.65vmin,20px); font-weight: 800; letter-spacing: 0.5px;
  background: linear-gradient(90deg, rgba(56,139,253,0.22), rgba(56,139,253,0.05));
  border-left: 3px solid #388bfd; border-radius: 8px;
  padding: clamp(7px,1.1vmin,13px) clamp(9px,1.3vmin,15px); margin-top: clamp(9px,1.5vmin,17px); }
.tl-date:first-child { margin-top: 0; }
.tl-date-lbl { color: #7dd3fc; text-transform: uppercase; }
.tl-date-summ { font-weight: 700; font-size: clamp(11px,1.5vmin,17px); color: #b7c7d9; white-space: nowrap; }
.tl-gap { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: rgba(125,211,252,0.12); color: #7dd3fc; font-size: clamp(10px,1.35vmin,15px); font-weight: 700; }
.tl-more { text-align: center; color: #6b7a8d; font-size: clamp(12px,1.6vmin,18px); padding: clamp(12px,1.8vmin,18px); }
/* ===== 아이폰 좁은 뷰(<=430px) — 1페이지 세로 1열 4행 (카드 폭 100% 활용) =====
   ⚠️ 행 높이는 1fr(균등분할) 금지 — Safari 주소창으로 가시 높이가 ~660px까지 줄면
   카드당 ~135px뿐이라 대형 폰트가 카드를 넘쳐 겹침(iPhone 16 Pro에서 깨졌던 원인).
   행은 내용 높이(auto), 마지막 그래프 카드만 남는 공간 흡수, 부족하면 페이지 내부 스크롤. */
@media (max-width: 430px) {
  /* 1페이지를 세로 1열 × 4행으로: 마지막수유 / 다음수유 / 평균수유텀 / 또래추이 각각 가로 풀폭 */
  .db-p1 { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(96px, 1fr);
    grid-template-areas: "feed" "next" "term" "norm"; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .db-p1 .db-card { padding: clamp(10px, 2.6vw, 14px) clamp(12px, 3.4vw, 16px); }
  /* 폰트는 좁은 가시 높이(~660px) 기준 — 4장 모두 잘림 없이 한 화면에 */
  .db-p1 .db-time { font-size: clamp(40px, 12vw, 56px); letter-spacing: -1.5px; }
  .db-p1 .db-countdown { font-size: clamp(40px, 12vw, 56px); letter-spacing: -1.5px; }
  .db-p1 .db-countdown.long { font-size: clamp(30px, 8.6vw, 40px); }
  .db-p1 .db-termmain { font-size: clamp(34px, 10vw, 48px); }
  .db-p1 .db-kindml { font-size: clamp(15px, 4vw, 18px); margin-top: 2px; }
  .db-p1 .db-ago { font-size: clamp(16px, 4.4vw, 20px); padding-top: 4px; }
  .db-p1 .db-sub { font-size: clamp(13px, 3.6vw, 16px); white-space: normal; line-height: 1.3; }
  .db-p1 .db-lbl { font-size: clamp(12px, 3.2vw, 15px); margin-bottom: 4px; }
  .db-p1 .db-acc { font-size: clamp(11px, 3vw, 14px); padding-top: 6px; }
  .db-p1 .db-acc .db-accbar { height: 6px; }
  .db-p1 .db-devlbl { font-size: clamp(11px, 3vw, 14px); }
  .db-sm-total { font-size: clamp(17px, 4.6vw, 24px); }
  .db-sm-w { font-size: clamp(13px, 3.6vw, 17px); }
  /* 평균 수유 텀 카드 내부 가로 2분할 → 세로 2분할(텍스트 위 / 그래프 아래) */
  .db-card.db-term { display: flex; flex-direction: column; }
  .db-termL { width: 100%; }
  .db-termR { width: 100%; margin-top: 6px; min-height: clamp(80px, 18vw, 130px); }
  /* sr_e2f81c44: 아이폰 가시높이(사파리 UI 제외)에서 4카드+수유가이드가 확실히 들어가게 간격·보조줄 압축 */
  .db-page { gap: 8px; padding-bottom: 6px; }
  .db-sm-row { margin-top: 4px; }
  .db-sm-yday { font-size: clamp(11px, 3vw, 13px); }
  .db-sm-src { font-size: clamp(10px, 2.8vw, 12px); }
  /* 3페이지 입력 카드 5개도 좁은 화면에서 간격만 살짝 좁힘 */
  .qi-icon { font-size: clamp(24px, 6.6vw, 40px); }
  .qi-label { font-size: clamp(12px, 3.2vw, 18px); }
  .qi-sub { font-size: clamp(10px, 2.6vw, 14px); }
  .qi-card { padding: clamp(8px,2.2vw,12px) 4px; gap: 4px; }
  .db-qi { gap: 6px; }
}

/* ===== 아이폰 큰 기종(431~520px, iPhone 17 Pro Max 440px) — 2×2 유지 + 폰트만 카드 폭에 맞게 =====
   기본(전역 v3) 폰트는 아이패드 기준이라 ~190px 카드에서 시계 74px·경과시간 38px이
   줄바꿈/세로 넘침("4시간 2분 전" 3줄 낑김)을 유발 → 이 구간만 축소. iPad(≥768)는 미적용. */
@media (min-width: 431px) and (max-width: 520px) {
  /* sr_9d4a2b6e: 아이폰 첫페이지 1열 4행은 430px 이하에만 걸려 있어 16 Pro Max(440pt) 등
     430 초과 기종이 2×2로 회귀(2026-07-12). 폰 폭 전 구간(≤520px)에 동일 레이아웃 적용. */
  .db-p1 { grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(96px, 1fr);
    grid-template-areas: "feed" "next" "term" "norm"; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .db-card.db-term { display: flex; flex-direction: column; }
  .db-termL { width: 100%; }
  .db-termR { width: 100%; margin-top: 6px; min-height: clamp(80px, 18vw, 130px); }
  /* sr_e2f81c44: 430 초과 폰(16 Pro Max 등)도 간격·보조줄 압축 + 수유가이드 축소 세트 동일 적용 */
  /* 2026-07-30: iPhone 17 Pro Max(440px)에서 마지막 카드(수유 가이드) 하단 ~35px 잘림 —
     콘텐츠 합(913px) > 페이지(878px). 카드 패딩·간격을 좁혀 한 화면에 수납. */
  .db-page { gap: 6px; padding-bottom: 4px; }
  .db-p1 .db-card { padding: clamp(9px, 2.2vw, 12px) clamp(12px, 3vw, 16px); }
  .db-sm-bar { margin-top: 5px; }
  .db-sm-row { margin-top: 3px; }
  .db-sm-total { font-size: clamp(17px, 4.6vw, 24px); }
  .db-sm-w { font-size: clamp(13px, 3.6vw, 17px); }
  .db-sm-yday { font-size: clamp(11px, 3vw, 13px); }
  .db-sm-src { font-size: clamp(10px, 2.8vw, 12px); }
  .db-p1 .db-lbl { font-size: clamp(13px, 3vw, 16px); margin-bottom: 3px; }
  .db-p1 .db-hint { display: none; }   /* 좁은 카드에서 라벨 줄바꿈 주범 — 힌트 숨김 */
  .db-p1 .db-time { font-size: clamp(44px, 12.5vw, 58px); letter-spacing: -1.5px; }
  .db-p1 .db-countdown { font-size: clamp(44px, 12.5vw, 58px); letter-spacing: -1.5px; }
  .db-p1 .db-countdown.long { font-size: clamp(32px, 9vw, 42px); }
  .db-p1 .db-kindml { font-size: clamp(15px, 4vw, 19px); margin-top: 4px; white-space: normal; }
  .db-p1 .db-ago { font-size: clamp(17px, 4.4vw, 21px); padding-top: 4px; }
  .db-p1 .db-sub { font-size: clamp(13px, 3.4vw, 16px); white-space: normal; line-height: 1.3; }
  .db-p1 .db-acc { font-size: clamp(11px, 3vw, 14px); padding-top: 6px; }
  .db-p1 .db-acc .db-accbar { height: 6px; }
  .db-p1 .db-termmain { font-size: clamp(36px, 10vw, 50px); }
  .db-p1 .db-devlbl { font-size: clamp(11px, 3vw, 14px); }
}

/* ===== 1페이지 4번째 카드(오늘 수유 가이드) — grid-area는 기존 norm 자리 재사용 ===== */
.db-smart { grid-area: norm; display: flex; flex-direction: column; justify-content: flex-start; }
.db-sm-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.db-sm-w { font-size: clamp(16px,2.2vmin,30px); color: #cbd5e1; white-space: nowrap; }
.db-sm-w b { color: #e6edf3; font-weight: 800; }
.db-sm-total { font-size: clamp(20px,3.2vmin,46px); font-weight: 800; color: #94a3b8; white-space: nowrap; }
.db-sm-total b { color: #22d3ee; font-size: 1.15em; }
.db-sm-bar { height: clamp(8px,1.2vmin,14px); border-radius: 99px; background: rgba(255,255,255,0.07);
  border: 1px solid #1c2733; overflow: hidden; margin-top: 8px; flex-shrink: 0; }
.db-sm-bar i { display: block; height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg,#0ea5b7,#22d3ee); transition: width .6s ease; }
.db-sm-bar i.full { background: linear-gradient(90deg,#10b981,#34d399); }
.db-sm-next b { color: #22d3ee; }
.db-sm-src { font-size: clamp(9px,1.1vmin,13px); color: #5d6f86; margin-top: auto; padding-top: 6px; line-height: 1.3; }
.pink { color: #f472b6; font-weight: 800; }
/* 평균수유텀이 더 이상 termL/termR 분할 안 함 — flex 해제 */
.db-card.db-term { display: block !important; }


/* ===== C: 타임라인 칩 + 사진 탭 ===== */
.tl-chips { display: flex; gap: clamp(4px,0.8vw,8px); flex-wrap: wrap; }
.tl-chip { padding: clamp(4px,0.8vmin,7px) clamp(8px,1.4vw,14px); border-radius: 99px;
  background: rgba(255,255,255,0.05); border: 1px solid #1c2733; color: #8b9bb0;
  font-size: clamp(11px,1.4vmin,15px); font-weight: 700; cursor: pointer; transition: background .15s; }
.tl-chip.on { background: rgba(34,211,238,0.2); border-color: #22d3ee; color: #e6edf3; }
.tl-chip:active { background: rgba(255,255,255,0.12); }
.tl-photo-tap { cursor: pointer; }
/* 기간 PDF 버튼(타임라인 헤더) + 날짜 범위 입력 */
.tl-pdf { padding: clamp(4px,0.8vmin,7px) clamp(8px,1.4vw,14px); border-radius: 99px;
  background: rgba(252,211,77,0.12); border: 1px solid #a16207; color: #fcd34d;
  font-size: clamp(11px,1.4vmin,15px); font-weight: 800; cursor: pointer; transition: background .15s; }
.tl-pdf:active { background: rgba(252,211,77,0.25); }
.pdf-dates { display: flex; gap: clamp(8px,1.2vw,16px); margin: clamp(8px,1.2vmin,14px) 0; }
.pdf-dlbl { flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: clamp(12px,1.5vmin,16px); color: #8b9bb0; font-weight: 700; }
.pdf-date { width: 100%; color-scheme: dark; }
.tl-photo-tap:active { opacity: 0.7; }

/* 진행 중 수면 실시간 경과 뱃지 (타임라인 '잠듦' 행) */
.tl-live { color: #a78bfa; font-weight: 800; }