* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* 폰트/배경/색상은 output.css의 토큰 기반 정의가 담당 (Phase A 이후) */
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

body { display: flex; flex-direction: column; }
/* 2026-08-15: iOS 웹뷰에서 아이콘을 길게 누르면 시스템 이미지 메뉴(Share / Save to Photos /
   Copy / Look Up)가 앱 위에 뜨던 것 차단. 스크롤하다 손가락이 아이콘 위에 잠깐 머물러도 떴다.
   안드로이드 웹뷰엔 이 메뉴가 없어서 iOS 에서만 보였다 — 전형적인 플랫폼 차이.
   타임라인 아이템·커스텀 확인창은 예전에 개별로 막아뒀지만(src/input.css) 나머지 화면의
   아이콘은 전부 무방비였다 → 요소마다 챙기는 대신 이미지 태그 전역으로 한 번에.
   텍스트 선택·복사(기록 메모 등)는 그대로 두려고 이미지 계열 태그에만 건다.
   user-drag 는 같은 뿌리 — 아이콘이 손가락에 끌려다니는 것 방지. */
img, svg, canvas, picture {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* 2026-07-24: 한국어 줄바꿈 근본 기본값 — 마지막 줄에 짧은 어절(예: "주세요.")이 홀로 떨어지는
   고아(widow) 방지. text-wrap 은 상속 속성이라 body 에 두면 모든 텍스트에 적용된다(줄 끊는 '위치'만
   개선 → 넘침/레이아웃 변화 없음). 개별 요소가 balance 등으로 필요 시 override 가능.
   (그동안 요소마다 반복되던 고아 줄바꿈 문제를 전역에서 해소.) */
body { text-wrap: pretty; }
.screen { min-height: 100vh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.muted { color: var(--color-content-secondary); font-size: 13px; }
.center { text-align: center; }

/* ========== Header ========== */
.app-header {
  background: var(--color-bg-surface);
  color: var(--color-content-primary);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky; top: 0; z-index: 10;
}
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; font-family: var(--font-display); color: var(--color-content-primary); }
.icon-btn {
  background: var(--color-bg-surface-alt);
  border: 1px solid var(--color-border-subtle); color: var(--color-content-secondary);
  width: 40px; height: 40px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
}

.status-off, .status-on, .status-detect {
  padding: 4px 12px; border-radius: 12px; font-size: 13px; font-weight: 500;
}
.status-off { background: var(--color-bg-surface-alt); color: var(--color-content-secondary); border: 1px solid var(--color-border-subtle); }
.status-on { background: #4ade80; color: #052e16; }
.status-detect { background: #facc15; color: #713f12; animation: blink 0.5s infinite; }
html.dark .status-on { background: #166534; color: #dcfce7; }
html.dark .status-detect { background: #854d0e; color: #fef9c3; }
@keyframes blink { 50% { opacity: 0.6; } }

/* ========== Main container ========== */
.app-main {
  flex: 1;
  padding: 16px;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  /* 하단 시스템 네비게이션 바(제스처/3버튼)와 겹치지 않도록 safe-area 추가 */
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ========== Loading splash ========== */
.loading-inner {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  background: var(--color-bg-base);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-action-feed);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  color: var(--color-content-secondary);
  font-size: 14px;
  margin-top: 4px;
  animation: loading-fade 1.6s ease-in-out infinite;
}
@keyframes loading-fade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* ========== Login ========== */
.login-inner {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; text-align: center; gap: 16px;
  background: var(--color-bg-base);
}
.brand-mark {
  width: 96px; height: 96px; border-radius: 28px;
  background: linear-gradient(135deg, var(--color-action-feed), var(--color-action-diaper));
  color: var(--color-content-primary); font-size: 56px; font-weight: 900;
  font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  margin-bottom: 8px;
}
.login-inner h1 { font-size: 28px; font-weight: 800; color: var(--color-content-primary); font-family: var(--font-display); }
.tagline { color: var(--color-content-secondary); font-size: 14px; margin-bottom: 24px; }

/* ========== Onboard ========== */
.onboard-card {
  background: var(--color-bg-surface); border-radius: 16px; padding: 24px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle); margin-top: 16px;
}
.onboard-card h2 { font-size: 20px; margin-bottom: 4px; color: var(--color-content-primary); font-family: var(--font-display); }
.onboard-card .muted { margin-bottom: 20px; color: var(--color-content-secondary); }
.onboard-card label {
  display: block; margin-bottom: 16px; font-size: 14px; color: var(--color-content-secondary); font-weight: 500;
}
.onboard-card input, .onboard-card select {
  width: 100%; padding: 14px; border: 1px solid var(--color-border-subtle); border-radius: 12px;
  font-size: 15px; margin-top: 6px;
  background: var(--color-bg-base); color: var(--color-content-primary);
  font-family: var(--font-body);
}
.onboard-card input:focus, .onboard-card select:focus {
  outline: none; border-color: var(--color-action-feed);
}

/* ========== Header actions ========== */
.header-actions { display: flex; gap: 8px; }

/* ========== Settings ========== */
.settings-card {
  background: var(--color-bg-surface); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle); margin-bottom: 16px;
}
.settings-card h2 { font-size: 15px; color: var(--color-content-secondary); margin-bottom: 12px; }
.settings-desc {
  color: var(--color-content-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-content-secondary) 6%, transparent);
  border-radius: 10px;
}
.settings-desc-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-content-muted);
}
.settings-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { color: var(--color-content-secondary); font-size: 13px; }
.settings-select {
  flex: 0 1 60%;
  padding: 8px 12px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  border-radius: 8px;
  background: var(--color-bg-base, #fff);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-content-primary);
  font-family: var(--font-body);
}
.members-list { list-style: none; margin-bottom: 16px; }
.members-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px; background: var(--color-bg-surface-alt); border-radius: 8px; margin-bottom: 6px;
  font-size: 14px;
}
.member-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 4px;
  background: var(--color-action-feed); color: var(--color-content-primary);
}
.member-badge.owner { background: var(--color-action-cry); color: var(--color-content-primary); }
.invite-result { margin-top: 12px; }
.invite-link-box { display: flex; gap: 8px; }
.invite-link-box input {
  flex: 1; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px;
  font-size: 12px; font-family: monospace;
}

/* ========== Summary card ========== */
.summary-card {
  background: var(--color-bg-surface); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle); margin-bottom: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.summary-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 4px;
}
.summary-label { color: var(--color-content-secondary); font-size: 13px; }
.summary-row strong { color: var(--color-content-primary); font-size: 16px; font-weight: 700; }

/* ========== Quick actions (4 big buttons) ========== */
.quick-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;
}
.action-btn {
  background: var(--color-bg-surface); border: none;
  border-radius: 16px; padding: 20px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  font-size: 15px; font-weight: 700; color: var(--color-content-primary);
}
.action-btn:active { transform: scale(0.97); }
.action-emoji { font-size: 32px; }
.action-feeding { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
.action-diaper { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.action-sleep { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); }
.action-cry { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); }

/* ========== Voice FAB ========== */
.voice-fab {
  width: 100%;
  padding: 18px 16px;
  margin-bottom: 16px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #be185d 0%, #ff6b9d 100%);
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(190,24,93,0.3);
  transition: all 0.15s;
}
.voice-fab:active { transform: scale(0.98); }
.voice-fab.recording {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  animation: pulse 1s infinite;
}
@keyframes pulse { 50% { box-shadow: 0 4px 20px rgba(239,68,68,0.6); } }
#voice-fab-icon { font-size: 22px; }

/* ========== Timeline ========== */
.timeline-card {
  background: var(--color-bg-surface); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle);
}
.timeline-card h2 { font-size: 16px; color: var(--color-content-secondary); margin-bottom: 12px; }
.timeline-list { list-style: none; }
.timeline-item {
  padding: 12px; background: var(--color-bg-surface-alt); border-radius: 10px; margin-bottom: 8px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; cursor: pointer;
}
.timeline-item:active { background: color-mix(in srgb, var(--color-action-diaper) 35%, var(--color-bg-surface-alt)); }
.timeline-item .time { color: var(--color-content-secondary); font-size: 12px; width: 48px; flex-shrink: 0; }
.timeline-item .icon { font-size: 20px; width: 28px; flex-shrink: 0; }
.timeline-item .content { flex: 1; font-size: 14px; color: var(--color-content-primary); }
.timeline-item .source-tag {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--color-bg-surface-alt); color: var(--color-content-secondary);
  border: 1px solid var(--color-border-subtle);
  margin-left: 6px;
}
.timeline-item .source-tag.voice { background: var(--color-action-diaper); color: var(--color-content-primary); }
.timeline-item .source-tag.auto { background: var(--color-action-cry); color: var(--color-content-primary); }

/* ========== Monitor (cry detection) ========== */
.mic-panel {
  background: var(--color-bg-surface); border-radius: 16px; padding: 24px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle); margin-bottom: 16px;
}
.wave-container {
  background: var(--color-bg-surface-alt); border-radius: 12px; height: 120px;
  margin-bottom: 16px; overflow: hidden;
}
#waveform { width: 100%; height: 100%; }
.db-meter {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--color-bg-surface-alt); border-radius: 8px; margin-bottom: 16px;
}
.db-meter span { color: var(--color-content-secondary); font-size: 14px; }
.db-meter strong { font-size: 20px; color: var(--color-action-cry); font-family: var(--font-display); }

.log-panel {
  background: var(--color-bg-surface); border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-subtle);
}
.log-panel h2 { font-size: 16px; color: var(--color-content-secondary); margin-bottom: 12px; }
#monitor-log { list-style: none; max-height: 300px; overflow-y: auto; }
#monitor-log li {
  padding: 10px 12px; background: var(--color-bg-surface-alt); border-radius: 8px;
  margin-bottom: 6px; font-size: 13px;
}
#monitor-log li .time { color: var(--color-content-secondary); font-size: 11px; }

/* ============================================================
   울음 분석 화면 — Claude Design CryScreen 기반 (2026-04-23)
   ============================================================ */
.cry-waveform-hidden, .cry-db-hidden { display: none !important; }
.cry-screen .app-main.cry-main { padding: 8px 16px 24px; }
.cry-record-panel {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 0 12px;
  background: radial-gradient(ellipse at 50% 10%,
    color-mix(in srgb, #FFB78A 24%, var(--color-bg-surface)) 0%,
    var(--color-bg-surface) 60%);
  border-radius: 24px;
  margin-bottom: 16px;
  overflow: hidden;
}
.cry-orb-wrap {
  position: relative;
  width: 240px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}
.cry-timer-ring {
  position: absolute; inset: 0;
  width: 240px; height: 240px;
  transform: rotate(-90deg);
}
.cry-ring-bg {
  fill: none;
  stroke: rgba(255, 183, 138, 0.2);
  stroke-width: 4;
}
.cry-ring-progress {
  fill: none;
  stroke: #FF8A5C;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 0.15s linear;
}
.cry-record-panel.cry-active .cry-ring-progress {
  stroke-dashoffset: 300; /* 기본 70% 진행 표시 — JS 에서 업데이트 */
}
.cry-orb-inner {
  position: absolute; inset: 24px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.cry-orb {
  width: 192px; height: 192px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff0ea 0%, #FFC9A3 35%, #FF8A5C 75%, #C85840 100%);
  box-shadow:
    0 0 50px 6px rgba(255, 138, 92, 0.5),
    inset -18px -28px 56px rgba(0, 0, 0, 0.22),
    inset 14px 18px 38px rgba(255, 255, 255, 0.45);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.cry-orb-B {
  font-family: 'Quicksand', 'Pretendard Variable', sans-serif;
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  color: rgba(90, 30, 10, 0.55);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: -0.04em;
}
.cry-record-panel.cry-active .cry-orb {
  animation: cry-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes cry-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 50px 6px rgba(255, 138, 92, 0.5), inset -18px -28px 56px rgba(0, 0, 0, 0.22), inset 14px 18px 38px rgba(255, 255, 255, 0.45); }
  50% { transform: scale(1.03); box-shadow: 0 0 70px 12px rgba(255, 138, 92, 0.65), inset -18px -28px 56px rgba(0, 0, 0, 0.22), inset 14px 18px 38px rgba(255, 255, 255, 0.5); }
}
.cry-wave-row {
  position: absolute; bottom: -14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 3px; align-items: flex-end;
  height: 28px; width: 200px;
  justify-content: center;
  opacity: 0.3; transition: opacity 0.2s;
}
.cry-record-panel.cry-active .cry-wave-row { opacity: 0.8; }
.cry-wave-row span {
  width: 3px; border-radius: 999px;
  background: #FF8A5C;
  height: var(--h);
  min-height: 4px;
}
.cry-record-panel.cry-active .cry-wave-row span {
  animation: cry-wave-breathe 0.7s ease-in-out infinite;
}
.cry-wave-row span:nth-child(odd)  { animation-duration: 0.9s; }
.cry-wave-row span:nth-child(3n)   { animation-duration: 1.1s; animation-delay: 0.15s; }
.cry-wave-row span:nth-child(4n+1) { animation-delay: 0.25s; }
@keyframes cry-wave-breathe {
  0%, 100% { transform: scaleY(0.4); opacity: 0.45; }
  50%      { transform: scaleY(1); opacity: 0.85; }
}
.cry-caption {
  text-align: center;
  margin-top: 24px;
  padding: 0 24px;
}
.cry-state-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-content-primary);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.cry-state-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-content-secondary);
  line-height: 1.5;
  max-width: 280px; margin-left: auto; margin-right: auto;
}
.cry-stop-wrap {
  margin-top: 18px;
  display: flex; justify-content: center;
}
.cry-round-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 4px solid var(--color-bg-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 8px 20px rgba(255, 138, 92, 0.45);
  color: #fff;
}
.cry-round-btn--start { background: #FF8A5C; }
.cry-round-btn--stop  { background: #D85843; }
.cry-round-btn:active { transform: scale(0.95); }
.cry-round-btn:disabled { background: var(--color-content-secondary); box-shadow: none; cursor: not-allowed; opacity: 0.5; }

/* 결과 카드 */
.cry-result-card {
  background: var(--color-bg-surface);
  border-radius: 18px;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cry-result-top {
  padding: 22px 20px 18px;
  background: linear-gradient(160deg,
    color-mix(in srgb, #FFD9B4 45%, var(--color-bg-surface)),
    var(--color-bg-surface));
}
.cry-result-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--color-content-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.cry-result-label-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF8A5C;
  display: inline-block;
}
.cry-result-cause {
  font-size: 30px; font-weight: 700;
  color: var(--color-content-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-family: var(--font-display, inherit);
}
.cry-result-confidence-wrap { margin-top: 14px; }
.cry-result-confidence-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--color-content-secondary);
  font-weight: 500;
  margin-bottom: 6px;
}
.cry-result-conf-num {
  color: var(--color-content-primary); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cry-result-conf-track {
  height: 8px; border-radius: 999px;
  background: rgba(90, 60, 30, 0.08);
  overflow: hidden;
}
.cry-result-conf-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #FFD9B4, #FF8A5C);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.cry-result-summary {
  margin: 14px 0 0;
  font-size: 14px; line-height: 1.55;
  color: var(--color-content-primary);
  font-family: var(--font-serif, var(--font-body));
}
.cry-result-action {
  padding: 14px 16px;
  background: color-mix(in srgb, #A8DCC2 22%, var(--color-bg-surface));
  border-top: 1px solid var(--color-border-subtle);
}
.cry-result-action-label {
  font-size: 12px; font-weight: 600;
  color: #1F4A35;
  margin-bottom: 4px;
}
.cry-result-action-text {
  font-size: 15px; font-weight: 600;
  color: var(--color-content-primary);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.cry-result-action-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 0;
  border-radius: 12px;
  border: none;
  background: #3E8E6B;
  color: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.cry-result-action-btn:active { background: #2F7356; }
.cry-result-disclaimer {
  padding: 12px 20px 16px;
  font-size: 12px;
  color: var(--color-content-secondary);
  text-align: center;
  line-height: 1.5;
  opacity: 0.8;
}

.cry-log-panel h2 { font-size: 14px; }

/* ========== Buttons ========== */
.primary-btn, .secondary-btn {
  width: 100%; padding: 16px; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 10px;
  transition: all 0.15s;
}
.primary-btn { background: var(--color-content-primary); color: var(--color-bg-surface); }
.primary-btn:hover:not(:disabled) { opacity: 0.9; }
.primary-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.secondary-btn { background: var(--color-bg-surface-alt); color: var(--color-content-secondary); border: 1px solid var(--color-border-subtle); }
.secondary-btn:hover:not(:disabled) { opacity: 0.9; }
.secondary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 소셜 로그인 버튼 */
.social-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px; transition: transform 0.1s;
}
.social-btn:active:not(:disabled) { transform: scale(0.98); }
.social-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.social-btn-kakao { background: #FEE500; color: #181600; }
.social-btn-naver { background: #03C75A; color: #FFFFFF; }
.social-btn svg { flex-shrink: 0; }

/* ========== Modal ========== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
html.dark .modal-backdrop { background: rgba(0,0,0,0.75); }
.modal-card {
  background: var(--color-bg-surface); width: 100%; max-width: 500px;
  border-radius: 24px 24px 0 0;
  padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh; overflow-y: auto;
  animation: slideUp 0.2s ease-out;
}
/* Sticky 헤더: [취소] [제목 중앙] [저장] */
.modal-header {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 24px 24px 0 0;
  gap: 12px;
}
.modal-header-title {
  margin: 0; padding: 0;
  font-size: 16px; font-weight: 700;
  color: var(--color-content-primary);
  font-family: var(--font-display);
  text-align: center;
  letter-spacing: -0.01em;
}
.modal-header-btn {
  appearance: none; border: none; background: transparent;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  padding: 8px 4px; min-height: 40px;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.modal-header-btn--cancel {
  color: var(--color-content-secondary);
  justify-self: start;
}
.modal-header-btn--save {
  color: var(--color-action-primary, #B86A42);
  font-weight: 700;
  justify-self: end;
}
.modal-header-btn:active { opacity: 0.6; }
.modal-header-btn:disabled { opacity: 0.4; cursor: not-allowed; }
#modal-body { padding: 20px 24px 8px; }

/* ============================================================
   수유 모달 — 신규/수정 4탭 세로높이 정책
   - 폼 영역 height 락 제거 (자연 크기) → 가장 빡빡한 탭 빈공간 0
   - .feeding-modal-body min-height 만 유지 → 탭 전환 시 모달이 너무
     급격히 줄어들지 않게 floor 잠금
   - 짧은 탭은 하단 메모/삭제 버튼이 자리 잡고 그 아래 약간 여유 있음 OK
   ============================================================ */
.modal-body.feeding-modal-body {
  min-height: 580px;
}

/* ============================================================
   시간 편집기 (단순화 v2) — 시작/완료 한 줄씩, 빠른조정 버튼 제거.
   네이티브 datetime picker 의존. "지금 완료"는 작은 칩으로 시작 줄 우측에 동거.
   ============================================================ */
.feed-time-section {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-bg-surface-alt, rgba(0,0,0,0.025));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.feed-time-row.hidden { display: none; }
.feed-time-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-content-secondary);
  flex: 0 0 36px;
}
.feed-time-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px !important;
  font-size: 14px !important;
  margin-top: 0 !important;
  font-variant-numeric: tabular-nums;
}
.feed-time-rel,
.feed-time-duration {
  font-size: 12px;
  color: var(--color-content-muted, #999);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.feed-time-duration {
  font-weight: 700;
  color: var(--color-action-feed, #E57373);
  font-size: 14px;
}
/* 시작 시각 빠른조정 — 6 버튼 grid */
.feed-time-quicks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.feed-time-quick {
  padding: 8px 4px !important;
  font-size: 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  background: var(--color-bg-base, #fff);
  color: var(--color-content-secondary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-top: 0 !important;
  width: auto !important;
  min-height: 36px;
}
.feed-time-quick:active { background: var(--color-action-feed, #E57373); color: #fff; border-color: transparent; }

/* 수유 시간 블록 — 베이비타임 매치. 헤더(라벨 + 지금완료) + 큰 숫자 + dur 빠른조정 */
.feed-duration-block {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feed-duration-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.feed-duration-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-content-secondary);
  flex: 0 0 auto;
}
/* 값(1시간 32분)을 헤더로 올림 → 라벨 옆에 붙고, "지금 완료" 버튼은 오른쪽 끝으로 (2026-07-14). */
.feed-duration-header .feed-time-now-end { margin-left: auto; align-self: center; }
.feed-duration-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.feed-dur-quick {
  /* 값이 헤더로 빠져 버튼줄이 비었으니 더 크게(가독성) — 균등 분배 + 상한(max-width)으로 4개짜리(수유)가 과하게 안 늘어남 (2026-07-14). */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 88px;
  padding: 12px 0 !important;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  background: var(--color-bg-base, #fff);
  color: var(--color-content-secondary);
  cursor: pointer;
  margin-top: 0 !important;
  font-variant-numeric: tabular-nums;
}
.feed-dur-quick:active { background: var(--color-action-feed, #E57373); color: #fff; border-color: transparent; }
.feed-duration-big {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-content-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "지금 완료" 칩 — 저장 버튼과 동일 브랜드 테라코타로 가독성 확보 */
.feed-time-now-end {
  padding: 8px 14px !important;
  border-radius: 18px;
  border: none;
  background: #B86A42;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(184, 106, 66, 0.35);
  display: inline-flex; align-items: center; gap: 4px;
}
.feed-time-now-end:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(184, 106, 66, 0.3); }
.feed-time-now-end.hidden { display: none; }

/* 한쪽 선택 칩 (모유/유축) — 단일 선택 + 두 번 누르면 해제 */
.feed-side-section {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-side-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-content-secondary);
}
.feed-side-chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.feed-side-chip {
  padding: 16px 8px !important;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: 1.5px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  background: var(--color-bg-base, #fff);
  color: var(--color-content-secondary);
  cursor: pointer;
  margin-top: 0 !important;
  width: auto !important;
  min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
}
.feed-side-chip.selected {
  background: var(--color-action-feed, #E57373);
  color: #fff;
  border-color: transparent;
}
.feed-side-chip:active { opacity: 0.7; }
.feed-side-hint {
  font-size: 12px;
  color: var(--color-content-muted, #999);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

/* 트림(burping) 칩 — 신규/수정 모달 공유. 단일 선택, 두 번 누르면 해제 */
.feed-burping-section {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feed-burping-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-content-secondary);
}
.feed-burping-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.feed-burping-chip {
  padding: 12px 8px !important;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  border: 1.5px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  background: var(--color-bg-base, #fff);
  color: var(--color-content-secondary);
  cursor: pointer;
  margin-top: 0 !important;
  width: auto !important;
  min-height: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.feed-burping-chip.selected {
  background: var(--color-action-feed, #E57373);
  color: #fff;
  border-color: transparent;
}
.feed-burping-chip:active { opacity: 0.7; }

/* ============================================================
   통계 탭 확장 — 혼합수유 종합 뷰 (2026-04-23)
   ============================================================ */
/* 4종 색상 토큰 (Chart 에서도 같이 참조) */
:root {
  --feed-breast: #E57373;    /* 모유 */
  --feed-bottle: #E8A33D;    /* 분유 */
  --feed-pumpFeed: #E8C547;  /* 유축수유 */
  --feed-pump: #7FB3D5;      /* 유축 생산 */
}
.intake-num {
  font-family: var(--font-display, inherit);
  font-size: 28px; font-weight: 800;
  color: var(--color-content-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.intake-unit {
  font-size: 13px; font-weight: 600;
  color: var(--color-content-secondary);
  margin-right: 2px;
}
.intake-sep {
  font-size: 11px; color: var(--color-content-muted, var(--color-content-secondary));
  margin-left: 2px;
}
.intake-stackbar {
  width: 100%; height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-bg-surface-alt);
  display: flex;
}
.intake-stackbar > div {
  height: 100%;
  transition: width 0.3s ease;
}
.intake-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-content-secondary);
  font-weight: 500;
}
.intake-legend .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 4px;
  vertical-align: middle;
}
.intake-guidance {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-bg-surface-alt);
  font-size: 12px;
  color: var(--color-content-primary);
  line-height: 1.4;
}
/* 3종 세분 카드 */
.stats-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.stats-sub-card {
  background: var(--color-bg-surface);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid transparent;
}
.stats-sub-card--breast   { border-top-color: var(--feed-breast); }
.stats-sub-card--bottle   { border-top-color: var(--feed-bottle); }
.stats-sub-card--pumpFeed { border-top-color: var(--feed-pumpFeed); }
.stats-sub-emoji {
  font-size: 18px; line-height: 1;
  margin-bottom: 4px;
}
.stats-sub-label {
  font-size: 11px; font-weight: 600;
  color: var(--color-content-secondary);
  margin-bottom: 4px;
}
.stats-sub-value {
  font-family: var(--font-display, inherit);
  font-size: 16px; font-weight: 700;
  color: var(--color-content-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.stats-sub-note {
  font-size: 10px;
  color: var(--color-content-secondary);
  margin-top: 2px;
  line-height: 1.3;
  opacity: 0.8;
}
/* Heatmap */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-auto-rows: 14px;
  gap: 2px;
  margin-top: 4px;
}
.heatmap-cell {
  border-radius: 3px;
  background: rgba(180, 180, 180, 0.15);
  position: relative;
  transition: background 0.2s;
}
.heatmap-cell[data-intensity="1"] { background: color-mix(in srgb, var(--feed-bottle) 25%, transparent); }
.heatmap-cell[data-intensity="2"] { background: color-mix(in srgb, var(--feed-bottle) 50%, transparent); }
.heatmap-cell[data-intensity="3"] { background: color-mix(in srgb, var(--feed-bottle) 75%, transparent); }
.heatmap-cell[data-intensity="4"] { background: var(--feed-bottle); }
.heatmap-cell[data-dom="breast"]   { background-color: color-mix(in srgb, var(--feed-breast) var(--op, 40%), transparent); }
.heatmap-cell[data-dom="pumpFeed"] { background-color: color-mix(in srgb, var(--feed-pumpFeed) var(--op, 40%), transparent); }
.heatmap-cell[data-dom="bottle"]   { background-color: color-mix(in srgb, var(--feed-bottle) var(--op, 40%), transparent); }
.heatmap-xaxis {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--color-content-secondary);
  margin-top: 4px; padding: 0 2px;
}

/* ============================================================
   분유 탭 — Claude Design FeedingModal 기반 (2026-04-23)
   ============================================================ */
.bottle-amount-card {
  padding: 18px 16px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--color-action-feed, #FFD9B4) 45%, var(--color-bg-surface)),
    var(--color-bg-surface));
  text-align: center;
  box-shadow: 0 1px 3px rgba(90, 60, 30, 0.06);
}
.bottle-amount-label {
  font-size: 12px;
  color: var(--color-content-secondary);
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.bottle-amount-display {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  min-height: 52px;
}
.bottle-amount-display .bl-num {
  font-size: 48px;
  font-weight: 600;
  color: var(--color-content-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display, inherit);
}
.bottle-amount-unit {
  font-size: 18px;
  color: var(--color-content-secondary);
  font-weight: 600;
}
.bottle-stepper {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.bottle-step-btn {
  appearance: none;
  border: none;
  padding: 9px 13px;
  border-radius: 11px;
  background: var(--color-bg-surface);
  box-shadow: 0 1px 3px rgba(90, 60, 30, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-content-primary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
  min-height: 40px;
}
.bottle-step-btn:active { transform: scale(0.95); background: var(--color-bg-surface-alt); }
.bottle-info-row {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--color-bg-surface-alt);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bottle-info-label {
  font-size: 12px;
  color: var(--color-content-secondary);
  font-weight: 500;
}
.bottle-info-value {
  font-size: 17px;
  color: var(--color-content-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.bottle-reactions-wrap { margin-top: 14px; }
.bottle-section-label {
  font-size: 12px;
  color: var(--color-content-secondary);
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0 4px;
}
.bottle-reaction-chips {
  display: flex;
  gap: 8px;
}
.bottle-reaction-chip {
  flex: 1;
  appearance: none;
  padding: 11px 0;
  border-radius: 12px;
  background: var(--color-bg-surface-alt);
  border: 1.5px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 120ms ease;
  min-height: 42px;
}
.bottle-reaction-chip.selected {
  background: color-mix(in srgb, var(--color-action-feed, #FFD9B4) 55%, var(--color-bg-surface));
  border-color: var(--color-content-primary);
  color: var(--color-content-primary);
  font-weight: 700;
}
.bottle-reaction-chip:active { transform: scale(0.97); }

/* ============================================================
   Voice Overlay — Claude Design 시안 기반 재구성 (2026-04-23)
   ============================================================ */
/* 2026-05-28: iOS 18 Siri "Glow Border" 패턴 — 화면 콘텐츠 안 가리고 가장자리만 무지개 glow.
   사용자가 음성 명령 박는 중에도 대시보드 / 기타 UI 그대로 보임 + 클릭 가능.
   - 배경 transparent (뒤 화면 보임)
   - pointer-events: none (뒤 클릭 통과). 단 내부 버튼 (close, mic source) 은 auto 박힘
   - 화면 가장자리 inset box-shadow 박은 무지개 glow + animation pulse */
.voice-overlay-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  color: #fff;
  box-shadow:
    inset 0 0 60px 12px rgba(255, 183, 138, 0.55),
    inset 0 0 140px 28px rgba(255, 100, 50, 0.28),
    inset 0 0 220px 48px rgba(168, 220, 194, 0.18);
  animation: voice-glow-pulse 2.2s ease-in-out infinite;
}
@keyframes voice-glow-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 60px 12px rgba(255, 183, 138, 0.45),
      inset 0 0 140px 28px rgba(255, 100, 50, 0.22),
      inset 0 0 220px 48px rgba(168, 220, 194, 0.14);
  }
  50% {
    box-shadow:
      inset 0 0 80px 18px rgba(255, 183, 138, 0.75),
      inset 0 0 180px 38px rgba(255, 100, 50, 0.42),
      inset 0 0 280px 60px rgba(168, 220, 194, 0.26);
  }
}
/* 분석 중 — glow 색 핑크/보라 shift */
.voice-overlay-root:has(#voice-orb.voice-orb--analyzing) {
  animation: voice-glow-pulse-analyzing 1.6s ease-in-out infinite;
}
@keyframes voice-glow-pulse-analyzing {
  0%, 100% {
    box-shadow:
      inset 0 0 80px 16px rgba(255, 100, 150, 0.55),
      inset 0 0 180px 36px rgba(200, 80, 200, 0.30),
      inset 0 0 280px 60px rgba(160, 80, 100, 0.18);
  }
  50% {
    box-shadow:
      inset 0 0 100px 22px rgba(255, 100, 150, 0.80),
      inset 0 0 220px 48px rgba(200, 80, 200, 0.50),
      inset 0 0 340px 78px rgba(160, 80, 100, 0.32);
  }
}
/* 모든 내부 콘텐츠 = 클릭 가능 + 텍스트 명도 (transparent 배경 위에 박힘) */
.voice-overlay-root > * { pointer-events: auto; }
.voice-overlay-root .voice-aurora { display: none !important; } /* 풀스크린 배경 박힌 거 제거 */
.voice-overlay-root .voice-stage { transform: scale(0.6); transform-origin: center; } /* orb 작게 박음 */
.voice-overlay-root .voice-caption,
.voice-overlay-root .voice-caption-main,
.voice-overlay-root .voice-caption-sub,
.voice-overlay-root .voice-badge-text,
.voice-overlay-root #voice-status,
.voice-overlay-root #voice-transcript {
  /* 화면 위에 박힌 글자 박힌 게 잘 보이게 — 다크 backdrop 박힌 chip 박음 */
  background: rgba(20, 16, 14, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px 14px;
  display: inline-block;
}
.voice-overlay-root.hidden { display: none !important; }

/* 2026-05-22: 가로 모드 (v1l dashboard / v2 split / 태블릿 가로) — orb 좌측 + caption 우측 layout */
@media (min-aspect-ratio: 4/3) {
  .voice-overlay-root {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    padding: 4vh 6vw;
  }
  .voice-overlay-root .voice-stage {
    flex: 0 0 auto;
    margin: 0;
  }
  .voice-overlay-root .voice-caption,
  .voice-overlay-root .voice-waveform {
    flex: 0 1 auto;
    margin: 0;
  }
  .voice-overlay-root .voice-caption {
    text-align: left;
    max-width: 50vw;
  }
  .voice-overlay-root .voice-waveform {
    align-self: flex-start;
    margin-top: 16px;
  }
}

.voice-aurora {
  position: absolute;
  top: -40px; left: -60px; right: -60px;
  height: 420px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 183, 138, 0.38) 0%, transparent 60%),
    radial-gradient(ellipse at 72% 20%, rgba(168, 220, 194, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 201, 163, 0.3) 0%, transparent 60%);
  filter: blur(30px);
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}

.voice-topbar {
  position: relative;
  z-index: 2;
  padding: calc(14px + env(safe-area-inset-top, 0)) 16px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.voice-close-btn, .voice-mic-source {
  width: 40px; height: 40px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.voice-close-btn:hover, .voice-mic-source:hover { background: rgba(255, 255, 255, 0.22); }
.voice-mic-source {
  width: auto;
  padding: 0 12px;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.voice-badge-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 12px;
}
.voice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: rgba(255, 217, 180, 0.22);
  color: #FFE8C7;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.voice-badge--done {
  background: rgba(168, 220, 194, 0.35);
  color: #C4EBD7;
}
.voice-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FFB78A;
  animation: voice-badge-pulse 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.voice-badge--done .voice-badge-dot { background: #86C5A8; animation: none; }
@keyframes voice-badge-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.voice-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.voice-overlay-root #voice-orb.voice-orb {
  width: 200px;
  height: 200px;
  border-radius: 44px; /* squircle */
  position: relative;
  background:
    radial-gradient(circle at 30% 28%, #fff5e6 0%, #ffd9b4 30%, #ffb78a 65%, #c89970 100%);
  box-shadow:
    0 0 60px 8px rgba(255, 207, 160, 0.55),
    0 0 140px 20px rgba(168, 220, 194, 0.35),
    inset -22px -34px 68px rgba(0, 0, 0, 0.22),
    inset 18px 22px 44px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-overlay-root #voice-orb.voice-orb::before {
  content: "";
  position: absolute;
  top: 10%; left: 15%;
  width: 40%; height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}
.voice-overlay-root #voice-orb.voice-orb::after {
  content: "B";
  font-family: 'Quicksand', 'Pretendard Variable', sans-serif;
  font-weight: 800;
  font-size: 110px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(90, 50, 20, 0.55);
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
  position: absolute;
  z-index: 1;
}
.voice-overlay-root .voice-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  border: 1.5px solid rgba(255, 183, 138, 0.55);
  pointer-events: none;
  animation: voice-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.voice-overlay-root .voice-pulse-ring--2 { animation-delay: 0.8s; border-color: rgba(168, 220, 194, 0.5); }
.voice-overlay-root .voice-pulse-ring--3 { animation-delay: 1.6s; border-color: rgba(255, 201, 163, 0.45); }
/* 울음 분석 모드 — 핑크/크림 shift */
.voice-overlay-root #voice-orb.voice-orb--analyzing {
  background: radial-gradient(circle at 30% 28%, #fff0ea 0%, #ffd1dc 35%, #ffb3c6 70%, #d38a9c 100%);
  box-shadow:
    0 0 60px 8px rgba(255, 180, 200, 0.55),
    0 0 140px 20px rgba(255, 220, 200, 0.35),
    inset -18px -28px 56px rgba(0, 0, 0, 0.18),
    inset 14px 18px 38px rgba(255, 255, 255, 0.45);
}
.voice-overlay-root #voice-orb.voice-orb--analyzing::after { color: rgba(160, 80, 100, 0.55); }
@keyframes voice-pulse {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}

.voice-success-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.voice-success-overlay svg {
  width: 32px; height: 32px;
  color: #fff;
  background: #86C5A8;
  border-radius: 50%;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(134, 197, 168, 0.5);
}
.voice-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  animation: voice-spin 0.8s linear infinite;
  z-index: 3;
}
@keyframes voice-spin {
  to { transform: rotate(360deg); }
}

.voice-caption {
  position: relative;
  z-index: 2;
  padding: 0 28px;
  text-align: center;
  margin-top: 4px;
}
.voice-caption-main {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #fff;
  font-family: var(--font-display, 'Quicksand'), 'Pretendard Variable', sans-serif;
}
.voice-caption-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 8px 0 0;
  line-height: 1.55;
}

.voice-waveform {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 20px;
}
.voice-waveform span {
  display: block;
  width: 3px;
  height: var(--h, 50%);
  border-radius: 999px;
  background: rgba(255, 183, 138, 0.7);
  animation: voice-wave 1s ease-in-out infinite;
}
.voice-waveform span:nth-child(odd)  { animation-duration: 0.9s; background: rgba(168, 220, 194, 0.6); }
.voice-waveform span:nth-child(3n)   { animation-duration: 1.1s; animation-delay: .15s; }
.voice-waveform span:nth-child(4n+1) { animation-delay: .25s; }
.voice-waveform span:nth-child(5n+2) { animation-delay: .4s; }
@keyframes voice-wave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.voice-examples-wrap {
  position: relative;
  z-index: 2;
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom, 0));
}
.voice-examples-title {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
}
.voice-examples-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.voice-example-pill {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* 타임라인 "그전 기록" 대그룹 헤더 — 더 굵은 구분 + 호버 피드백 */
.timeline-past-header {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg-surface-alt, #f5f3ef) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #e5ddd3) 60%, transparent);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-content-secondary, #5a5550);
  transition: background .15s;
}
.timeline-past-header:hover,
.timeline-past-header:active {
  background: color-mix(in srgb, var(--color-bg-surface-alt, #f5f3ef) 70%, transparent);
}
.timeline-past-header .timeline-collapse-caret {
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
  font-size: 11px;
  color: var(--color-content-muted, #8a8480);
}
.timeline-past-header.expanded .timeline-collapse-caret {
  transform: rotate(90deg);
}
.timeline-past-header .timeline-collapse-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content-muted, #8a8480);
}

/* 일자 헤더도 펼칠 때 caret 회전 (기존 timeline-date-header가 past-group에 속할 때만 적용되게 제한 안 함 - 전역 공통) */
.timeline-date-header.timeline-collapsible .timeline-collapse-caret {
  display: inline-block;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.timeline-date-header.timeline-collapsible.expanded .timeline-collapse-caret {
  transform: rotate(90deg);
}

/* 2026-05-12: 베이비타임 식 타임라인 — 음영 헤더 + flat row + 메모 wrap (옵션 C) */
.timeline-date-header {
  background: color-mix(in srgb, var(--color-bg-surface-alt, #ECE8DD) 92%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 14px;
  margin-bottom: 6px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.timeline-date-header:first-child { margin-top: 0; }
.timeline-date-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.timeline-date-rel {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-content-primary, #1F2937);
}
.timeline-date-abs {
  font-size: 12px;
  color: var(--color-content-muted, #9CA3AF);
}
.timeline-date-stats {
  font-size: 12px;
  color: var(--color-content-secondary, #4B5563);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 2026-07-24: 타임라인 날짜헤더 겹침 fix — 좁은 V2 우측패널에서 날짜("7월 24일 (금)")가 클립 없이
   흘러넘쳐 요약 아이콘을 침범하던 것. 날짜영역 클립 + 좁을 때(tablet-mode) 요약 축소로 방지.
   CDP 확대 검증 완료(날짜 온전 표시 + 요약과 54px 간격). */
.timeline-date-header { flex-wrap: wrap; row-gap: 2px; }
.timeline-date-main { overflow: hidden; }
.timeline-date-rel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tablet-mode .timeline-date-stats { font-size: 11px; gap: 6px; margin-left: auto; }
/* 날짜별 entries wrapper 흰 카드 — preview/timeline-c.html 의 .tl-day-card 와 같은 효과 */
.timeline-day-card {
  /* 2026-06-01: 다크모드 글자 안 보임 fix — var(--color-card)는 미정의/깨져 다크에서 흰 카드+밝은 글자가 됨.
     --color-bg-surface(라이트=#FFF, 다크=#232631)로 변경 → 양 모드 대비 정상. */
  background: var(--color-bg-surface);
  border-radius: 14px;
  padding: 4px 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  list-style: none;
  margin-bottom: 6px;
}
/* 개별 entry: 기존 베이지 박스 스타일을 wrapper 안에서는 평탄화 */
.timeline-day-card .timeline-item {
  background: transparent;
  border-radius: 0;
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border-subtle, #F1EEE7);
  align-items: flex-start;
}
.timeline-day-card .timeline-item:last-child {
  border-bottom: none;
}
.timeline-day-card .timeline-item:active {
  background: rgba(0,0,0,0.03);
}
/* 메모/긴 텍스트 대응 — main 1줄 ellipsis + memo 본문 그 밑 작게 wrap (3줄까지) */
.timeline-item-body {
  flex: 1;
  min-width: 0;
}
.timeline-item-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-content-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-item-memo {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-content-secondary);
  margin-top: 3px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-card h3:not(.modal-header-title) { font-size: 18px; margin-bottom: 16px; color: var(--color-content-primary); font-family: var(--font-display); }
.modal-body label {
  display: block; margin-bottom: 14px; font-size: 14px; color: var(--color-content-secondary); font-weight: 500;
}
.modal-body input, .modal-body select, .modal-body textarea {
  width: 100%; padding: 12px; border: 1px solid var(--color-border-subtle); border-radius: 8px;
  font-size: 15px; margin-top: 6px;
  background: var(--color-bg-base); color: var(--color-content-primary);
  font-family: var(--font-body);
}
.modal-body .chips {
  display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.chip {
  padding: 12px 16px; border-radius: 24px; background: var(--color-bg-surface-alt);
  font-size: 14px; cursor: pointer; border: 2px solid transparent;
  color: var(--color-content-secondary);
  min-height: 44px; display: inline-flex; align-items: center;
}
.chip.selected { background: var(--color-action-feed); border-color: var(--color-content-primary); color: var(--color-content-primary); font-weight: 600; }
.modal-actions {
  display: flex; gap: 10px; margin-top: 16px;
}
.modal-actions .primary-btn, .modal-actions .secondary-btn { margin-bottom: 0; }

/* ========== Toast ========== */
#toast-container {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--color-content-primary); color: var(--color-bg-surface); padding: 12px 18px; border-radius: 12px;
  font-size: 14px; box-shadow: var(--shadow-md);
  animation: fadeIn 0.2s ease-out;
  max-width: 90vw;
}
.toast.success { background: #10B981; color: white; }
.toast.error { background: #EF4444; color: white; }
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ========== Landing / Login — 모던 3D 스타일 ========== */
.landing-screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 48px 24px calc(32px + env(safe-area-inset-bottom, 0px));
  background: #fffaf3;
  visibility: visible; /* 2026-05-21: FOUC fix — HTML inline visibility:hidden 박혀있어 CSS 로드 전 plain text 좌상단 사고 차단. CSS 적용되면 자동 visible. */
}

/* 그라디언트 배경 (애니메이션 있는 mesh gradient) */
.landing-gradient-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 214, 193, 0.65) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(232, 210, 250, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(209, 234, 241, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(255, 227, 214, 0.55) 0%, transparent 55%),
    linear-gradient(160deg, #fff5eb 0%, #fff0f3 50%, #f0e8f5 100%);
  z-index: 0;
  animation: landing-bg-shift 18s ease-in-out infinite alternate;
}
@keyframes landing-bg-shift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(8deg); }
}
html.dark .landing-gradient-bg {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(100, 80, 130, 0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(120, 95, 140, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(80, 110, 130, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, rgba(135, 90, 110, 0.5) 0%, transparent 55%),
    linear-gradient(160deg, #1a1420 0%, #1e1825 50%, #15111a 100%);
}

/* 떠다니는 glow orb — 3D depth 연출 */
.landing-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.landing-glow-orb--1 {
  width: 280px; height: 280px;
  top: -60px; left: -60px;
  background: radial-gradient(circle, #ffc8b0 0%, rgba(255, 200, 176, 0.2) 60%, transparent 100%);
  animation: orb-float-1 12s ease-in-out infinite;
}
.landing-glow-orb--2 {
  width: 340px; height: 340px;
  bottom: -100px; right: -80px;
  background: radial-gradient(circle, #e0c8f5 0%, rgba(224, 200, 245, 0.2) 60%, transparent 100%);
  animation: orb-float-2 14s ease-in-out infinite;
}
.landing-glow-orb--3 {
  width: 200px; height: 200px;
  top: 40%; right: -40px;
  background: radial-gradient(circle, #c4e4e8 0%, rgba(196, 228, 232, 0.2) 60%, transparent 100%);
  animation: orb-float-3 16s ease-in-out infinite;
}
@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 60px) scale(1.1); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -40px) scale(0.9); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 50px) scale(1.15); }
}

/* 반짝이는 별 (살짝씩 깜빡) */
.landing-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.landing-star {
  position: absolute;
  width: 4px; height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(255, 220, 180, 0.6);
  animation: star-twinkle 3s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* 로딩 inner */
.landing-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  text-align: center;
  gap: 16px;
}

/* 마스코트 */
.landing-mascot-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2026-07-03: mascot-float(위아래 이동) 제거 — 아이콘 위치 고정(iOS처럼).
     안드로이드는 로딩이 길어 이 translateY 움직임이 눈에 띄었음(iOS는 빨라 화면이 금방 사라져 안 보임).
     halo-pulse/orb-pulse/brand-breathe(제자리 scale·opacity 효과)는 유지. */
}
.landing-mascot-halo {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 193, 0.6) 0%, rgba(255, 214, 193, 0) 70%);
  filter: blur(20px);
  z-index: 0;
  animation: halo-pulse 3.5s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}
.landing-mascot {
  width: 140px;
  height: 140px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 24px rgba(209, 148, 90, 0.35)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.08));
}

/* Option A-1: Squircle 브랜드 심볼 (iOS 앱 아이콘 스타일)
   - 둥근 사각형 (계란 느낌 제거)
   - 중앙 "B" 진한 음각
   - 주변 pulse ring (squircle 형태 매칭) */
.brand-orb {
  width: 140px;
  height: 140px;
  border-radius: 32px;
  position: relative;
  z-index: 1;
  background: url('/icons/icon-512.png') center/cover no-repeat;
  box-shadow:
    0 0 40px 4px rgba(255, 207, 160, 0.35),
    0 20px 40px rgba(90, 50, 20, 0.2);
  animation: brand-breathe 4s ease-in-out infinite;
  overflow: hidden;
}
.brand-orb::before { content: none; }
.brand-orb::after  { content: none; }
/* 주변 펄스 링 2겹 (squircle 모양 매칭) */
.landing-mascot-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-mascot-wrap::before,
.landing-mascot-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 140px;
  height: 140px;
  border-radius: 32px;
  border: 1.5px solid rgba(255, 207, 160, 0.45);
  pointer-events: none;
  animation: orb-pulse 3.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  z-index: 0;
}
.landing-mascot-wrap::after {
  animation-delay: 1.6s;
  border-color: rgba(168, 220, 194, 0.4);
}

@keyframes brand-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes orb-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* 로그인 화면은 orb 작게 → B 크기도 비례 */
.login-mascot-wrap { width: 96px; height: 96px; }
.login-mascot-wrap::before, .login-mascot-wrap::after { width: 96px; height: 96px; border-radius: 22px; }
.login-mascot-wrap .brand-orb { width: 96px; height: 96px; border-radius: 22px; }
.brand-orb--sm { width: 96px; height: 96px; }
html.dark .brand-orb {
  box-shadow:
    0 0 50px 6px rgba(255, 207, 160, 0.55),
    0 0 110px 16px rgba(168, 220, 194, 0.3),
    inset -16px -24px 48px rgba(0, 0, 0, 0.22),
    inset 10px 14px 30px rgba(255, 255, 255, 0.35);
}

/* Option A: Voice UI — Warm Orb + Pulse Ring + Mic */
#voice-orb.voice-orb {
  background: radial-gradient(circle at 30% 28%, #fff5e6 0%, #ffd9b4 30%, #ffb78a 65%, #c89970 100%);
  box-shadow:
    0 0 60px 8px rgba(255, 207, 160, 0.55),
    0 0 140px 20px rgba(168, 220, 194, 0.35),
    inset -18px -28px 56px rgba(0, 0, 0, 0.18),
    inset 14px 18px 38px rgba(255, 255, 255, 0.45);
  animation: voice-breathe 4s ease-in-out infinite;
}
@keyframes voice-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.voice-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 207, 160, 0.55);
  pointer-events: none;
  animation: voice-pulse 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.voice-pulse-ring--2 { animation-delay: 0.8s; border-color: rgba(168, 220, 194, 0.45); }
.voice-pulse-ring--3 { animation-delay: 1.6s; border-color: rgba(255, 179, 138, 0.4); }
@keyframes voice-pulse {
  0% { transform: scale(1); opacity: 0.75; }
  100% { transform: scale(1.6); opacity: 0; }
}

.voice-mic {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.4));
}

/* 워드마크 */
.landing-wordmark {
  font-family: var(--font-display, 'Quicksand', 'Pretendard', sans-serif);
  font-size: 44px;
  font-weight: 700;
  color: #3a2a1e;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.8);
}
html.dark .landing-wordmark { color: #f5ebdd; text-shadow: 0 2px 12px rgba(255, 220, 190, 0.25); }
.landing-tagline-small {
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(58, 42, 30, 0.55);
  letter-spacing: 0.1em;
  margin: 4px 0 0;
  text-transform: uppercase;
}
html.dark .landing-tagline-small { color: rgba(245, 235, 221, 0.5); }

/* 대변 사진 → AI 분석 이용법 안내 (2026-07-18 대표님: "똥분석 어떻게 쓰는지 직관적이지 않다") */
.stool-photo-guide {
  font-size: 12.5px;
  color: #7d7166;
  line-height: 1.5;
  margin-top: 8px;
  background: #faf6ef;
  border-radius: 10px;
  padding: 8px 12px;
}
.stool-photo-guide b { color: #b5651d; }

/* AI 기능 포인트 소모 안내 한 줄 (2026-07-18) — 리포트·울음·똥 분석 CTA 아래 공용 */
.ai-cost-note {
  font-size: 12.5px;
  color: #9b8c7d;
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

/* 로딩 dots */
.landing-loading-dots {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}
/* 2026-07-17: 스플래시→랜딩 아이콘 수직 점프 fix — 아이콘 중심을 '화면 정중앙'에 고정.
   OS 스플래시(안드12+ 최신 One UI)는 앱 아이콘을 정중앙에 그리는데, 랜딩은 아이콘+로딩점(아래 58px:
   gap16+margin32+높이10)을 한 덩어리로 중앙정렬해 아이콘이 29px 위로 밀림 → 전환 순간 위로 폴짝.
   점 높이만큼 위쪽 여백을 줘서 아이콘 중심 = 50vh = OS 스플래시 아이콘 위치. (S24 등 신형만 재현,
   구형은 OS가 아이콘을 안 그려 무영향. Note10 실측 y=1065/2280 → 보정 후 1140 목표) */
#screen-loading .landing-mascot-wrap { margin-top: 58px; }
.landing-loading-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #e8a585;
  animation: loading-dot-bounce 1.2s ease-in-out infinite;
}
.landing-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.landing-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading-dot-bounce {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.6; }
  40% { transform: scale(1.2); opacity: 1; }
}
.landing-loading-text {
  font-size: 14px;
  color: rgba(58, 42, 30, 0.6);
  margin: 12px 0 0;
}
html.dark .landing-loading-text { color: rgba(245, 235, 221, 0.55); }

/* 로그인 전용 레이아웃 (로고 위쪽, 버튼 아래쪽) */
#screen-login.landing-screen { justify-content: flex-start; padding-top: 72px; }
.login-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
}
.login-mascot-wrap { width: 132px; height: 132px; }
.login-mascot-wrap .landing-mascot { width: 116px; height: 116px; }
.login-hero-sub {
  font-size: 17px;
  color: rgba(58, 42, 30, 0.75);
  line-height: 1.55;
  text-align: center;
  margin: 20px 0 0;
  font-weight: 400;
}
.login-hero-sub strong { color: #3a2a1e; font-weight: 700; }
html.dark .login-hero-sub { color: rgba(245, 235, 221, 0.72); }
html.dark .login-hero-sub strong { color: #fde4d0; }

/* 로그인 버튼 그룹 (글래스모픽) */
.login-actions {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-bottom: 12px;
}
/* 키오스크·TV·가로폰 등 세로 짧은 화면(≤700px): 로그인 전체(폰연결 버튼 포함)가 스크롤로 다 보이게. overflow:hidden이 아래 버튼을 잘라 안 보이던 문제 해결 (2026-07-20) */
@media (max-height: 700px) {
  #screen-login.landing-screen {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 24px;
  }
  #screen-login .login-hero { margin-top: 4px; }
  #screen-login .login-hero-sub { margin-top: 10px; }
  #screen-login .login-mascot-wrap { width: 96px; height: 96px; }
  #screen-login .login-actions { margin-top: 20px; padding-bottom: 24px; }
}
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 600;
  font-family: var(--font-body, 'Pretendard', sans-serif);
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  min-height: 52px;
}
.login-btn:active { transform: scale(0.97); }
.login-btn svg { flex-shrink: 0; }
.login-btn-google {
  background: rgba(255, 255, 255, 0.85);
  color: #1f232b;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(60, 64, 67, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html.dark .login-btn-google { background: rgba(40, 38, 45, 0.85); color: #f5ebdd; border-color: rgba(255, 255, 255, 0.08); }
.login-btn-kakao {
  background: #FEE500;
  color: #191919;
  box-shadow: 0 4px 16px rgba(254, 229, 0, 0.4);
}
.login-btn-naver {
  background: #03C75A;
  color: #fff;
  box-shadow: 0 4px 16px rgba(3, 199, 90, 0.4);
}
/* 2026-07-16: 애플 로그인 (심사 4.8) — 애플 HIG: 검정 배경 + 흰 로고/텍스트, 다른 소셜과 동급 크기 */
.login-btn-apple {
  background: #000;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
html.dark .login-btn-apple { background: #fff; color: #000; }
/* 2026-07-24: 시트 안 TV·키오스크 페어링 — 소셜 로그인과 성격이 달라 중립(무채색) 톤 */
.login-btn-pair {
  background: rgba(58, 42, 30, 0.05);
  color: rgba(58, 42, 30, 0.75);
  border: 1px solid rgba(58, 42, 30, 0.1);
  box-shadow: none;
  font-weight: 600;
}
html.dark .login-btn-pair { background: rgba(255, 255, 255, 0.06); color: rgba(245, 235, 221, 0.75); border-color: rgba(255, 255, 255, 0.1); }
/* 소셜 수단 ↔ 페어링 구분선 ("또는") */
.login-sheet-divider { display: flex; align-items: center; gap: 10px; margin: 14px 2px 12px; }
.login-sheet-divider::before, .login-sheet-divider::after { content: ''; flex: 1; height: 1px; background: rgba(58, 42, 30, 0.12); }
.login-sheet-divider span { font-size: 12.5px; font-weight: 600; color: rgba(58, 42, 30, 0.4); }
html.dark .login-sheet-divider::before, html.dark .login-sheet-divider::after { background: rgba(245, 235, 221, 0.14); }
html.dark .login-sheet-divider span { color: rgba(245, 235, 221, 0.4); }
/* 2026-06-02: 게스트 둘러보기 — 소셜 버튼보다 부차적인 텍스트 링크 스타일 */
.login-btn-guest {
  display: block;
  margin: 6px auto 0;
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: rgba(58, 42, 30, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(58, 42, 30, 0.25);
  cursor: pointer;
}
.login-btn-guest:active { transform: scale(0.97); }
html.dark .login-btn-guest { color: rgba(245, 235, 221, 0.6); text-decoration-color: rgba(245, 235, 221, 0.25); }
/* 2026-07-12: 키오스크(?kiosk=1) 로그인 화면 — 소셜/게스트 로그인 숨기고 폰 페어링만 노출.
   근거: 키오스크에서 구글/카카오/네이버 로그인은 외부 OAuth 페이지(accounts.google.com 등)로
   넘어가 인앱 한글 키보드가 못 뜨고(우리 앱 도메인 아님) 물리 키보드도 없어 막다른 길이 된다
   → 세션 튕김·기록 미로드 사고(2026-07-12). TV/키오스크는 폰 페어링(타이핑 0)만 사용.
   일반 웹(kiosk-mode 아님)은 전혀 영향 없음. (2026-07-22 리디자인: 시작하기/둘러보기/시트 숨김) */
body.kiosk-mode #screen-login #login-start-btn,
body.kiosk-mode #screen-login #guest-browse-btn,
body.kiosk-mode #screen-login #login-sheet-scrim,
body.kiosk-mode #screen-login #login-sheet { display: none !important; }
/* 2026-07-24: 일반 모드에선 랜딩의 페어링 버튼을 숨김 — 진입점은 로그인 시트 안으로 이동.
   (키오스크 모드에선 시트가 숨겨지므로 아래 규칙이 이 버튼을 주 액션으로 되살려 노출) */
body:not(.kiosk-mode) #screen-login #pair-device-btn { display: none !important; }
/* 폰 페어링을 키오스크의 유일·주요 액션으로 강조 (secondary → primary 승격) */
body.kiosk-mode #screen-login #pair-device-btn {
  min-height: 60px;
  font-size: 17px;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 6px 20px rgba(31, 41, 55, 0.35);
}
html.dark.kiosk-mode #screen-login #pair-device-btn,
body.kiosk-mode html.dark #screen-login #pair-device-btn { background: #1f2937; color: #fff; }

/* ===== 로그인 리디자인 (2026-07-22): 시작하기 CTA + 바텀시트 ===== */
/* 첫 화면 — 큰 [시작하기] 하나 + 부차 링크들 (버튼 벽 제거) */
.login-cta-primary {
  width: 100%;
  padding: 18px 20px;
  border: none;
  border-radius: 18px;
  font-family: var(--font-body, 'Pretendard', sans-serif);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #ff9a6b 0%, #ff7a9c 55%, #c88bf0 100%);
  box-shadow: 0 10px 28px rgba(255, 122, 140, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.login-cta-primary:active { transform: scale(0.975); filter: brightness(0.97); }
.login-cta-secondary {
  width: 100%;
  margin-top: 2px;
  padding: 13px 18px;
  border: 1px solid rgba(58, 42, 30, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--font-body, 'Pretendard', sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(58, 42, 30, 0.72);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.login-cta-secondary:active { transform: scale(0.98); }
html.dark .login-cta-secondary { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(245, 235, 221, 0.72); }

/* 바텀시트 스크림(뒷배경 딤) */
.login-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(30, 20, 15, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.login-sheet-scrim.hidden { display: none; }
.login-sheet-scrim.open { opacity: 1; }

/* 바텀시트 본체 — 아래에서 슬라이드 업 */
.login-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 10px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 251, 246, 0.92);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 44px rgba(60, 40, 30, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(102%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 92vh;
  overflow-y: auto;
}
.login-sheet.hidden { display: none; }
.login-sheet.open { transform: translateY(0); }
html.dark .login-sheet { background: rgba(30, 24, 34, 0.94); box-shadow: 0 -12px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.login-sheet-handle {
  align-self: center;
  width: 42px; height: 5px;
  margin: 2px 0 12px;
  border: none;
  border-radius: 999px;
  background: rgba(58, 42, 30, 0.18);
  cursor: pointer;
  padding: 0;
}
html.dark .login-sheet-handle { background: rgba(245, 235, 221, 0.22); }
.login-sheet-head { text-align: center; margin-bottom: 18px; }
.login-sheet-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: #3a2a1e; }
html.dark .login-sheet-title { color: #f5ebdd; }
.login-sheet-sub { margin: 6px 0 0; font-size: 13px; color: rgba(58, 42, 30, 0.55); line-height: 1.5; }
html.dark .login-sheet-sub { color: rgba(245, 235, 221, 0.55); }

.login-sheet-methods { display: flex; flex-direction: column; gap: 10px; }

/* '다른 방법으로 로그인' 접기 토글 */

/* '최근 사용' 강조 — 직전 로그인 수단을 시트 최상단으로 올리고 배지 표시 */
.login-btn--recent { position: relative; box-shadow: 0 6px 22px rgba(255, 122, 140, 0.28), 0 0 0 2px rgba(255, 138, 107, 0.55); }
.login-recent-badge {
  position: absolute;
  top: -9px; right: 14px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff9a6b, #ff7a9c);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 8px rgba(255, 122, 140, 0.45);
  pointer-events: none;
}
.login-footer {
  font-size: 11.5px;
  color: rgba(58, 42, 30, 0.5);
  text-align: center;
  line-height: 1.5;
  margin: 14px 0 0;
}
.login-footer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(58, 42, 30, 0.3); }
html.dark .login-footer { color: rgba(245, 235, 221, 0.45); }

/* ========== 기저귀 가이드 화면 (키우리 톤) ========== */
.diaper-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 24px 20px 22px;
  text-align: center;
  background: linear-gradient(135deg, var(--color-action-feed, #FFD9B4), var(--color-action-diaper, #FFC9A3));
  box-shadow: 0 6px 16px rgba(255, 169, 110, 0.18);
}
.diaper-hero-deco {
  position: absolute;
  top: -20px; right: -20px;
  width: 90px; height: 90px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
}
.diaper-hero-icon {
  font-size: 36px;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.diaper-hero-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #5C3719;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}
.diaper-hero-sub {
  font-size: 13px;
  color: #7A4A28;
  opacity: 0.85;
}

.diaper-nav-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-surface);
  border: 1px solid color-mix(in srgb, var(--color-action-feed) 30%, transparent);
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.diaper-nav-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.diaper-nav-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-action-feed) 35%, var(--color-bg-base));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.diaper-nav-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.diaper-nav-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-content-primary);
  margin-bottom: 1px;
}
.diaper-nav-sub {
  font-size: 11.5px;
  color: var(--color-content-muted);
  line-height: 1.3;
}

.diaper-diag-card {
  position: relative;
  padding: 18px 18px 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-action-feed) 60%, var(--color-bg-surface)),
    color-mix(in srgb, var(--color-action-diaper) 60%, var(--color-bg-surface)));
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-action-feed) 30%, transparent);
}
.diaper-diag-label {
  font-size: 11px;
  color: #9C5C2E;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.diaper-diag-body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-content-primary);
}
.diaper-diag-body strong { font-weight: 700; }
.diaper-diag-stage { color: #C84A1F; font-weight: 800; }
.diaper-diag-warn { color: #B0290B; font-weight: 700; }
.diaper-diag-hint {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.55);
  border-radius: 8px;
  font-size: 11.5px;
  color: #7A4A28;
}

.diaper-stocking-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.diaper-stocking-stat {
  background: var(--color-bg-base);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.diaper-stocking-stat-label {
  font-size: 10px;
  color: var(--color-content-muted);
  margin-bottom: 2px;
}
.diaper-stocking-stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-content-primary);
  line-height: 1.1;
}
.diaper-stocking-warn {
  margin-top: 6px;
  padding: 8px 10px;
  background: #FFF3CD;
  border-radius: 8px;
  font-size: 11.5px;
  color: #856404;
  line-height: 1.4;
}

.diaper-encyclopedia-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-subtle, #eee);
  cursor: pointer;
}
.diaper-encyclopedia-row:last-child { border-bottom: none; }
.diaper-encyclopedia-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-content-primary);
}
.diaper-encyclopedia-meta {
  font-size: 11px;
  color: var(--color-content-muted);
  margin-top: 1px;
}
.diaper-encyclopedia-price {
  font-size: 12px;
  font-weight: 700;
  color: #C84A1F;
}

/* ========== 기저귀 가이드 sub-pages (KidsLife 패턴 포팅) ========== */
.diaper-page { animation: diaperPageFade 0.18s ease-out; }
@keyframes diaperPageFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.diaper-progress-track {
  height: 4px;
  background: var(--color-bg-base);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 18px;
}
.diaper-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-action-feed), var(--color-action-diaper));
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.diaper-cs-step { padding: 4px 0; }
.diaper-cs-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-content-primary);
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.diaper-cs-sub {
  font-size: 13px;
  color: var(--color-content-secondary);
  line-height: 1.5;
  margin-bottom: 24px;
}
.diaper-cs-group { margin-bottom: 18px; }
.diaper-cs-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-content-secondary);
  margin-bottom: 8px;
}
.diaper-cs-input {
  width: 100%;
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-content-primary);
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-subtle);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.diaper-cs-input:focus {
  border-color: color-mix(in srgb, var(--color-action-diaper) 70%, var(--color-content-secondary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action-feed) 25%, transparent);
}

.diaper-cs-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.diaper-cs-quick-btn {
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diaper-cs-quick-btn:active { transform: scale(0.95); }
.diaper-cs-quick-btn strong {
  font-size: 15px;
  color: var(--color-content-primary);
  font-weight: 700;
}
.diaper-cs-quick-btn span {
  font-size: 11px;
  color: var(--color-content-muted);
}
.diaper-cs-quick-btn.active {
  border-color: color-mix(in srgb, var(--color-action-diaper) 80%, var(--color-content-primary));
  background: color-mix(in srgb, var(--color-action-feed) 30%, var(--color-bg-surface));
}

.diaper-cs-radio-list, .diaper-cs-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.diaper-cs-radio, .diaper-cs-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-border-subtle);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.diaper-cs-radio input, .diaper-cs-checkbox input {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: color-mix(in srgb, var(--color-action-diaper) 80%, var(--color-content-primary));
}
.diaper-cs-radio div, .diaper-cs-checkbox span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.diaper-cs-radio strong, .diaper-cs-checkbox b {
  font-size: 14px;
  color: var(--color-content-primary);
  font-weight: 700;
  line-height: 1.3;
}
.diaper-cs-radio span, .diaper-cs-checkbox small {
  font-size: 11.5px;
  color: var(--color-content-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.diaper-cs-radio:has(input:checked), .diaper-cs-checkbox:has(input:checked) {
  border-color: color-mix(in srgb, var(--color-action-diaper) 80%, var(--color-content-primary));
  background: color-mix(in srgb, var(--color-action-feed) 25%, var(--color-bg-surface));
}

.diaper-cs-actions {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
.diaper-cs-btn-primary, .diaper-cs-btn-secondary {
  flex: 1;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
}
.diaper-cs-btn-primary {
  background: linear-gradient(135deg, #FF8B5A, #E44D26);
  color: white;
  box-shadow: 0 4px 12px rgba(228, 77, 38, 0.25);
}
.diaper-cs-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.diaper-cs-btn-primary:active:not(:disabled) { transform: scale(0.98); }
.diaper-cs-btn-secondary {
  background: var(--color-bg-surface);
  color: var(--color-content-secondary);
  border: 1.5px solid var(--color-border-subtle);
}
.diaper-cs-btn-secondary:active { transform: scale(0.98); }

/* 처방 결과 */
.diaper-cs-result-card {
  padding: 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-action-feed) 60%, var(--color-bg-surface)),
    color-mix(in srgb, var(--color-action-diaper) 60%, var(--color-bg-surface)));
  border-radius: 16px;
  margin-bottom: 14px;
}
.diaper-cs-result-tag {
  display: inline-block;
  padding: 4px 10px;
  background: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #C84A1F;
  margin-bottom: 10px;
}
.diaper-cs-result-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-content-primary);
  margin-bottom: 6px;
}
.diaper-cs-result-body {
  font-size: 13.5px;
  color: var(--color-content-primary);
  line-height: 1.6;
}
.diaper-cs-result-list {
  margin-top: 10px;
  padding-left: 18px;
}
.diaper-cs-result-list li {
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--color-content-primary);
}
.diaper-cs-result-cta {
  display: block;
  text-align: center;
  padding: 14px;
  background: white;
  border: 1.5px solid color-mix(in srgb, var(--color-action-diaper) 50%, transparent);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #C84A1F;
  text-decoration: none;
  margin-top: 12px;
}

/* 백과사전 row */
.diaper-encyc-list { display: flex; flex-direction: column; }

/* ════════════════════════════════════════════════════
   Split-view (kiosk 가로 화면 — preset A/B/C)
   ════════════════════════════════════════════════════ */

#split-left {
  position: fixed;
  left: 0;
  top: 0;
  width: 50vw;
  height: 100vh;
  background: var(--bg-base, #fafaf7);
  border-right: 1px solid rgba(0,0,0,0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
  overflow: hidden;
}
#split-left.hidden { display: none; }

.split-left-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #fff;
}
#split-left-picker {
  flex: 1;
  padding: 8px 10px;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  color: #222;
}
.split-toggle-btn {
  flex: 0 0 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.06);
  color: #222;
  font-size: 16px;
  cursor: pointer;
}
.split-toggle-btn:hover { background: rgba(0,0,0,0.12); }

.split-left-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--bg-base, #fafaf7);
}

/* viewport ≥1280px + body.split-on 일 때 우측 메인 영역 = 우측 절반 */
@media (min-width: 1280px) {
  body.split-on {
    padding-left: 50vw;
  }
}

.split-enable-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(30,30,32,.78);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 49;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.split-enable-btn.hidden { display: none; }
.split-enable-btn:hover { background: rgba(30,30,32,.92); }

/* viewport <1280px 시 split-view 비활성 */
@media (max-width: 1279px) {
  #split-left, .split-enable-btn { display: none !important; }
  body.split-on { padding-left: 0 !important; }
  /* 2026-05-19: ?dashboard=2 강제 split — viewport 무관 split-view 활성 (사용자 명시 선택).
     body 가 transform scale 박혀 1920 강제. vw 단위는 viewport 기준이라 무력화 → % 사용. */
  body.split-force.split-on { padding-left: 50% !important; }
  /* 2026-07-04: split-on(로그인 후) 조건 추가 — 로그인 전 반반 사고 fix */
  body.split-force.split-on #split-left { display: flex !important; width: 50% !important; left: 0 !important; }
}
/* monitor mirror 일 때 vw 무력화 → % 또는 절대값. split-force body 너비 = 1920px → 50% = 960px (모니터 panel 폭) */
body.split-force #split-left { width: 50% !important; left: 0 !important; height: 100% !important; }
/* 2026-07-17: 우측 메인을 좌측패널(#split-left = body의 50%)과 '같은 기준(body %)'으로 붙임.
   기존 padding-left:50% 는 뷰포트 기준(50vw)이라, body가 1920으로 고정+스케일되는 태블릿(뷰포트 2560)에선
   좌측패널(960px)과 padding(1280px)이 어긋나 가운데 ~320px(스케일시 427px) 빈 띠가 생기던 버그.
   → padding-left 제거 + #screen-main 을 margin-left:50%(body 기준=960)로 offset 해 좌측패널과 딱 붙임.
   미니PC(1920=뷰포트, 스케일1) 에서도 gap 0 로 무회귀 검증함(2026-07-17 Playwright 측정). */
body.split-force.split-on { padding-left: 0 !important; }
body.split-force.split-on #screen-main { margin-left: 50% !important; width: 50% !important; }
/* 2026-08-10: #screen-main 만 오른쪽 칸으로 밀고 있어서, 설정·통계·예방접종 등 나머지 화면은
   전체 폭(1920)으로 깔려 왼쪽 절반이 좌측 패널에 가려 글자가 잘렸다(미니PC 실측).
   화면이 잘리면 뒤로가기 버튼도 안 보여 혼자 빠져나올 수 없다 — 터치스크린이라 좌상단 ⚙ 가
   스치기만 해도 이 상태가 된다(2026-08-10 05:33 클릭 기록에 dashboard-escape-btn, trusted=1).
   → 같은 규칙을 화면 전체에 준다. 부팅 단계 화면(loading/login/onboard)은 전면이라 제외.
   좌측 패널 iframe 은 `nosplit=1` 로 열려 split-force 클래스가 없어 영향 없음(실측 확인). */
body.split-force.split-on [id^="screen-"]:not(#screen-loading):not(#screen-login):not(#screen-onboard) {
  margin-left: 50% !important;
  width: 50% !important;
}
body.split-force.split-on .sticky-bottom {
  left: 50% !important;
  right: 0 !important;
}
/* 2026-05-23: 미니PC 1920 layout 가 표준 — 태블릿도 50:50 압축 그대로 (사용자 결정). */
/* 2026-05-23: 태블릿 (1200~1366px) split-force — 압축 X (글자 절대 크기 미니PC 와 동일). 좌측 panel 안 element 들 작게 박아 viewport 안 들어감. */
@media (max-width: 1366px) {
  body.split-force #split-left { width: 60% !important; }
  /* 2026-07-17: 좌측패널도 60% — ≤1279 블록의 body.split-force.split-on #split-left{width:50%}(특이도 높음)가
     이 블록의 60%(위 줄, 특이도 낮음)를 이겨서 좌=50%·우=60% 로 10%(~300px) 빈 띠가 남던 버그.
     같은 특이도 셀렉터를 소스상 뒤에 둬서 확실히 60% 적용 (태블릿 1205px 실기기서 확인된 사고). */
  body.split-force.split-on #split-left { width: 60% !important; }
  /* 2026-07-17: 위와 동일 — 소형태블릿(≤1366)도 padding 대신 margin(body 60%)으로 붙임 */
  body.split-force.split-on { padding-left: 0 !important; }
  body.split-force.split-on #screen-main { margin-left: 60% !important; width: 40% !important; }
  /* 2026-08-10: 위 50:50 블록과 같은 이유 — 이 폭대에서도 모든 화면을 오른쪽 칸에 넣는다. */
  body.split-force.split-on [id^="screen-"]:not(#screen-loading):not(#screen-login):not(#screen-onboard) {
    margin-left: 60% !important;
    width: 40% !important;
  }
  body.split-force.split-on .sticky-bottom { left: 60% !important; }
  /* 좌측 panel 안 — 일과표 도넛 + ring 차트 크기 적정. */
  body.split-force #split-left .bday-clock-svg { max-width: 280px !important; max-height: 280px !important; margin: 0 auto !important; display: block !important; }
  body.split-force #split-left .bday-feed-ring-svg { max-width: 240px !important; max-height: 240px !important; }
  body.split-force #split-left .bday-clock-card,
  body.split-force #split-left .bday-feed-ring-card { padding: 8px 12px !important; }
  /* iframe 안 동일 룰 */
  body.bton-active.tablet-mode .bday-clock-svg { max-width: 280px !important; max-height: 280px !important; margin: 0 auto !important; display: block !important; }
  body.bton-active.tablet-mode .bday-feed-ring-svg { max-width: 240px !important; max-height: 240px !important; }
  body.bton-active.tablet-mode .bday-clock-card,
  body.bton-active.tablet-mode .bday-feed-ring-card { padding: 4px 8px !important; min-height: 0 !important; }
  /* 2026-05-23: 도넛 내경 텍스트 hide + clock wrap 가로 가운데 + 좌측 panel 안 element 들 압축 → mini-stat 박힐 공간 */
  body.bton-active.tablet-mode .bday-clock-center { display: none !important; }
  /* 2026-05-24: viewport 동적 — 다양 태블릿 (1180~1366) 자동 적응. vw clamp. */
  body.bton-active.tablet-mode .bday-clock-wrap { margin: 0 auto !important; aspect-ratio: auto !important; max-width: clamp(260px, 30vw, 400px) !important; height: clamp(260px, 30vw, 400px) !important; }
  /* 2026-05-23: 범례 = picker 와 차트 사이 영역 = 카드 상단 가로 row. picker margin 도 줄임. */
  body.bton-active.tablet-mode .bday-clock-card { position: relative !important; display: block !important; }
  /* 2026-05-24: chip 들 = card 상단 absolute 박음 (top 6). 카드 모서리에 살짝 띄움. */
  body.bton-active.tablet-mode .bday-clock-card { position: relative !important; padding-top: 0 !important; }
  body.bton-active.tablet-mode .bday-clock-card .bday-card-head { position: absolute !important; top: 6px !important; left: 8px !important; right: 8px !important; padding: 0 !important; margin: 0 !important; z-index: 2 !important; }
  body.bton-active.tablet-mode .bday-clock-chips { margin: 0 !important; }
  /* svg 가 chip 영역 침범 X — margin-top 박음 (라벨 12시 svg 외부 박힘 — viewBox -25, 박은 60 부족, 90 박음) */
  body.bton-active.tablet-mode .bday-clock-wrap { margin-top: 50px !important; }
  /* 2026-05-24: clock chip 6개 가로 row + 박스 가득 균등 분배 (flex:1) + vw 비례 폰트 (다양 태블릿 자동 적응) */
  body.bton-active.tablet-mode .bday-clock-chips { flex-direction: row !important; flex-wrap: nowrap !important; gap: 4px !important; justify-content: space-between !important; width: 100% !important; }
  body.bton-active.tablet-mode .bday-clock-chip { flex: 1 1 0 !important; font-size: clamp(11px, 1.3vw, 17px) !important; padding: 6px 4px !important; white-space: nowrap !important; text-align: center !important; }
  body.bton-active.tablet-mode .bday-clock-card .bday-clock-svg { max-width: clamp(260px, 30vw, 400px) !important; max-height: clamp(260px, 30vw, 400px) !important; }
  /* picker 와 그 아래 차트 카드 사이 gap 줄임 */
  body.split-force.split-on .split-sticky-header { gap: 2px !important; padding-bottom: 0 !important; }
  body.split-force.split-on .split-picker-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; }
  body.split-force.split-on #split-left-frame { margin-top: 0 !important; padding-top: 0 !important; }
  body.split-force.split-on .split-sticky-row1 { margin-bottom: 0 !important; }
  /* iframe 안 dashboard padding/margin 줄임 + 첫 child 의 pt-3 pb-8 무력화 + body bg white */
  body.bton-active.tablet-mode { background-color: white !important; }
  body.bton-active.tablet-mode #screen-todayDashboard { padding: 0 !important; margin: 0 !important; background-color: white !important; }
  body.bton-active.tablet-mode #screen-todayDashboard > * { margin-top: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  body.bton-active.tablet-mode .bday-clock-card,
  body.bton-active.tablet-mode .bday-feed-ring-card { margin-top: 0 !important; padding-top: 0 !important; }
  body.bton-active.tablet-mode main, body.bton-active.tablet-mode .screen { padding-top: 0 !important; margin-top: 0 !important; background-color: white !important; }
  /* 2026-05-24: 세로 너무 짧은 환경 (예: < 700dp) 안전망 — 좌측 panel scroll 박음. 모든 element 박혀있음 + 사용자 스크롤 가능 */
  body.bton-active.tablet-mode html, body.bton-active.tablet-mode body { overflow-y: auto !important; height: auto !important; min-height: 100vh !important; }
  body.bton-active.tablet-mode #screen-todayDashboard { min-height: 100vh !important; }
  /* 2026-05-24: tablet (bton-active.tablet-mode) 박은 게 우측 panel 스크롤. */
  body.bton-active.tablet-mode #screen-main {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.bton-active.tablet-mode .bday-feed-ring-wrap { aspect-ratio: auto !important; max-width: clamp(220px, 26vw, 340px) !important; height: clamp(220px, 26vw, 340px) !important; margin: 0 auto !important; }
  body.bton-active.tablet-mode .bday-clock-wrap { max-width: 360px !important; height: 360px !important; }
  html body.bton-active.tablet-mode .bday-clock-card .bday-clock-svg,
  html body.bton-active.tablet-mode .bday-clock-svg { max-width: 100% !important; max-height: 100% !important; width: 100% !important; height: 100% !important; }
  /* mini-stat 박힘 보장 — vh 비례 (세로 짧은 환경 자동 fit) */
  /* 2026-05-24: 전체 재구성 — dashboard flex column + stat 하단 밀착 (margin-top auto) + 차트 grow 1 (남는 공간 다 차지) */
  /* 2026-07-23 fix: :not(.hidden) — 이 강제표시(display:flex !important)가 .screen.hidden{display:none} 을 특이도로 눌러버려
     split-picker 로 다른 화면(patterns 등) 전환 시 todayDashboard 가 안 숨겨지고 위에 덮이던 버그. 숨김 상태면 규칙 미적용 → 정상 숨김. */
  body.bton-active.tablet-mode #screen-todayDashboard:not(.hidden) { display: flex !important; flex-direction: column !important; height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; gap: 4px !important; padding: 4px !important; }
  /* 차트 grid = 남는 공간 다 차지 (.bday-main-grid). mini-row = 박스만 차지. */
  body.bton-active.tablet-mode #screen-todayDashboard main { display: flex !important; flex-direction: column !important; height: 100% !important; padding: 4px 8px !important; }
  body.bton-active.tablet-mode .bday-main-grid { flex: 1 1 auto !important; min-height: 0 !important; }
  body.bton-active.tablet-mode .bday-mini-row { flex: 0 0 auto !important; height: auto !important; }
  body.bton-active.tablet-mode .bday-clock-card,
  body.bton-active.tablet-mode .bday-feed-ring-card { display: flex !important; flex-direction: column !important; justify-content: center !important; }
  /* mini-stat = 하단 밀착 + 박스 안 텍스트 fit (글씨 작게 + 박스 height 충분) */
  body.bton-active.tablet-mode .bday-mini { min-height: 130px !important; height: 130px !important; flex-shrink: 0 !important; flex-grow: 0 !important; padding: 8px 10px !important; gap: 2px !important; overflow: hidden !important; }
  body.bton-active.tablet-mode .bday-mini-row { gap: 6px !important; flex-shrink: 0 !important; margin-top: auto !important; }
  /* 굵은 글씨 (big) 더 줄임 — body.bton-active #screen-todayDashboard .bday-mini-big (id 박혀 specific) 덮음 */
  html body.bton-active.tablet-mode .bday-mini-label { font-size: 11px !important; line-height: 1.2 !important; }
  html body.bton-active.tablet-mode #screen-todayDashboard .bday-mini-big,
  html body.bton-active.tablet-mode #screen-todayDashboard .bday-mini .bday-mini-big,
  html body.bton-active.tablet-mode .bday-mini-big { font-size: 16px !important; font-weight: 700 !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.bton-active.tablet-mode #screen-todayDashboard .bday-mini-big span,
  html body.bton-active.tablet-mode .bday-mini-big span { font-size: 12px !important; font-weight: 600 !important; }
  html body.bton-active.tablet-mode #screen-todayDashboard .bday-mini-sub,
  html body.bton-active.tablet-mode .bday-mini-sub { font-size: 10px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  /* 좌측 panel 안 grid/flex gap 줄임 */
  body.bton-active.tablet-mode #screen-todayDashboard { gap: 6px !important; padding: 6px !important; }
  /* 2026-05-23: 카드 head 의 "오늘의 일과표" / "다음 수유까지" label hide + card-head 압축 → 아래 mini-stat 박힐 공간 확보 */
  body.bton-active.tablet-mode .bday-card-head .bday-card-label { display: none !important; }
  body.bton-active.tablet-mode .bday-card-head { padding: 4px 8px !important; min-height: 0 !important; }
  /* 2026-05-23: "오늘 한눈에" picker 글자 2/3 + 박스 세로폭 축소 */
  body.split-force.split-on .split-picker-wrap-inline .split-picker-toggle { font-size: 19px !important; padding: 6px 14px !important; }
  body.split-force.split-on .split-picker-wrap-inline .split-picker-arrow { font-size: 15px !important; }
  /* 하단 스탬프 작게 */
  body.split-force.split-on .quick-stamps-row .quick-stamp-btn { padding: 6px 10px !important; min-width: auto !important; }
  body.split-force.split-on .quick-stamps-row .quick-stamp-btn img { width: 22px !important; height: 22px !important; }
  body.split-force.split-on .quick-stamps-row .quick-stamp-btn span { font-size: 11px !important; }
  body.split-force.split-on .split-card-date {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    min-width: auto !important;
  }
  body.split-force.split-on .split-date-md { font-size: 32px !important; }
  body.split-force.split-on .split-date-dow { font-size: 28px !important; margin-top: 0 !important; }
  body.split-force.split-on .split-sticky-clock {
    min-width: 200px !important;
    padding: 0 18px !important;
  }
  body.split-force.split-on .split-sticky-header { padding-top: 4px !important; padding-bottom: 4px !important; gap: 4px !important; }
  body.split-force.split-on .split-card-info { padding: 0 !important; }
  body.split-force.split-on .split-card-date { padding: 2px 12px !important; }
  body.split-force.split-on .split-sticky-clock .split-clock-big {
    /* 2026-07-23: 고정 64px → 유동. 작은 화면(1024 등)에서 시계 오른쪽 잘림 근본해결 */
    font-size: clamp(30px, 4.6vw, 64px) !important;
  }
  body.split-force.split-on .split-avatar-sm { width: 56px !important; height: 56px !important; }
  body.split-force.split-on .split-sticky-info .split-baby-name { font-size: clamp(14px, 1.9vw, 20px) !important; white-space: nowrap !important; }
  body.split-force.split-on .split-sticky-info .split-baby-age { font-size: 14px !important; margin-top: 0 !important; }
  /* 2026-05-23: ⚙ escape btn 와 아바타 겹침 fix — row1 (avatar 박힌 row) 만 padding-left 박음. picker (row2) 는 좌측부터. */
  body.split-force.split-on .split-sticky-row1 { padding-left: 50px !important; }
  /* 2026-05-23: 김지우 (여) D+37 가로 한 줄 */
  body.split-force.split-on .split-sticky-info {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
}
/* 2026-05-23: iframe 안 v1 dashboard 의 mini-stat — 미니PC 표준 비율 (가로 직사각 304×189, aspect 1.6) 강제.
   header 축소 박은 후 mini-stat 가 세로로 길쭉해지는 부작용 fix. iframe viewport 항상 ≤ 1366 라 outer @media 효과 없어 별도 룰. */
@media (max-width: 1366px) {
  body.bton-active .bday-mini { max-height: 200px !important; }
  body.bton-active .bday-mini-feed,
  body.bton-active .bday-mini-sleep,
  body.bton-active .bday-mini-diaper { max-height: 200px !important; }
}

/* 2026-05-19: 태블릿 (768~1279) preset-b 전용 layout — 폰 보다 큼, split 보다 작음 */
@media (min-width: 768px) and (max-width: 1279px) {
  body.preset-b #screen-main main { max-width: 900px !important; padding: 16px 24px 96px !important; }
  body.preset-b .stat-card { padding: 22px !important; min-height: 168px; }
  body.preset-b .stat-card .text-\[15px\] { font-size: 19px !important; font-weight: 800 !important; }
  body.preset-b .stat-card .text-sm { font-size: 18px !important; }
  body.preset-b .stat-card .text-2xl { font-size: 40px !important; line-height: 1.0; }
  body.preset-b .stat-card .app-icon-48 { width: 56px !important; height: 56px !important; }
  body.preset-b .timeline-item { padding: 18px 20px !important; }
  body.preset-b .timeline-item-text { font-size: 18px !important; }
  body.preset-b .timeline-item .tabular-nums { font-size: 17px !important; }
  /* 헤더 인사이트 ticker 크게 */
  body.preset-b .insight-ticker { font-size: 18px !important; padding: 14px 18px !important; }
  /* 스탬프 바 — 태블릿에선 더 wide */
  body.preset-b .quick-repeat-btn { padding: 16px 12px !important; min-height: 96px !important; }
  body.preset-b .quick-repeat-btn .text-xs { font-size: 15px !important; }
}

/* 2026-05-19: ?dashboard=1 querystring — 공기계 (작은 viewport) 도 todayDashboard 강제 (모니터링 전용) */
body.kiosk-dashboard #screen-main,
body.kiosk-dashboard header.app-header { display: none !important; }

/* kiosk-dashboard 폰 모드: todayDashboard 안 .bday-main-grid (패턴 + 다음 수유) 만 보이고 나머지 hide */
body.kiosk-dashboard #screen-todayDashboard > main > * { display: none !important; }
body.kiosk-dashboard #screen-todayDashboard > main > .bday-main-grid { display: grid !important; }
body.kiosk-dashboard, body.kiosk-dashboard html {
  overflow: hidden !important;
  background: #FBF7F2 !important;
}
body.kiosk-dashboard #screen-todayDashboard {
  padding: 0 !important;
  background: #FBF7F2 !important;
}
body.kiosk-dashboard #screen-todayDashboard > main {
  /* 2026-05-19: ⚙ 가 카드 안 라벨 좌측으로 이동 → main padding 원복 */
  padding: 8px !important;
  max-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
body.kiosk-dashboard #screen-todayDashboard > main > .bday-main-grid {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  margin: 0 !important;
  grid-template-columns: 1fr !important; /* default 모바일 portrait */
  grid-template-rows: 1fr 1fr;
}
body.kiosk-dashboard .bday-card {
  min-height: 0;
  overflow: hidden;
}
/* clock chip row — 항상 wrap (좁은 폰 viewport 짤림 방지) */
body.kiosk-dashboard .bday-clock-chips {
  flex-wrap: wrap !important;
  gap: 4px 6px !important;
  max-width: 100%;
}
/* 2026-05-27: v1 가로 모드 폰트/패딩 v2 박힌 거 그대로 통일 */
body.kiosk-dashboard .bday-clock-chip { font-size: 14px !important; padding: 4px 9px !important; }
body.kiosk-dashboard .bday-clock-center-now { font-size: 20px !important; gap: 6px !important; letter-spacing: 0.06em !important; }
/* 2026-05-27: feed-non-bottle-mode 박힌 head hide rule 박힌 거 v1 가로 모드 박힐 때 unhide.
   "다음 수유까지" 헤더 + "오른쪽" chip 박힘 자리 박혀있어야 함. */
body.kiosk-dashboard.feed-non-bottle-mode #bday-feed-ring-head,
body.kiosk-dashboard.feed-non-bottle-mode .bday-feed-ring-card .bday-card-head {
  display: flex !important;
}

/* 2026-05-28: v1 폰 가로 모드 박힐 때 grid 전체 max-width 박음.
   v2 박힌 게 iframe viewport 960px 박힌 게 좌·우 절반씩 480px 카드. 동일 비율 박은 게 폰에서도 박혀야 흰원/텍스트 비율 v2와 일치.
   60:40 grid → 좌 카드 ~720, 우 카드 ~480 박힘 (max-width 1200) → wrap ~600 + ~400 박힘. v2 박힌 wrap 480 박힌 거랑 약간 큼 but 가까움. */
body.kiosk-dashboard.bton-active #screen-todayDashboard > main > .bday-main-grid {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
/* chip "왼쪽/오른쪽" 박힘 — v2 박힌 default (24px / padding 8 20 / top 6 right 8) 그대로.
   v1 override 박힌 22px / top:-10px 박힌 거 박지 X. */
body.kiosk-dashboard.bton-active .bday-feed-side-corner {
  font-size: 24px !important;
  padding: 8px 20px !important;
  top: 6px !important;
  right: 8px !important;
}
body.kiosk-dashboard.bton-active.feed-non-bottle-mode .bday-feed-ring-card.is-left .bday-feed-side-corner,
body.kiosk-dashboard.bton-active.feed-non-bottle-mode .bday-feed-ring-card.is-bottle .bday-feed-side-corner {
  /* 좌측 차례 / 분유 박힐 때 박힌 게 박힌 좌상단 박힘 */
  left: 8px !important;
  right: auto !important;
}
/* clock + ring SVG 컨테이너 viewport 폭 맞춰 자동 scaling */
body.kiosk-dashboard .bday-clock-wrap,
body.kiosk-dashboard .bday-feed-ring-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
body.kiosk-dashboard .bday-clock-svg,
body.kiosk-dashboard .bday-feed-ring {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}
/* 다음 수유 카드: ring 아래 메타들 너무 크지 않게 */
body.kiosk-dashboard .bday-feed-ring-sub { font-size: 14px !important; margin-top: 2px !important; }
body.kiosk-dashboard .bday-feed-side-corner { font-size: 22px !important; padding: 6px 16px !important; top: -10px !important; right: 0 !important; }
body.kiosk-dashboard .bday-feed-next-big { padding: 6px 10px !important; margin: 4px 0 !important; font-size: 14px !important; }
body.kiosk-dashboard .bday-feed-next-side,
body.kiosk-dashboard .bday-feed-meta-value { word-break: keep-all; text-wrap: balance; }
body.kiosk-dashboard .bday-feed-ring-meta { padding: 4px 8px !important; font-size: 12px !important; }
body.kiosk-dashboard .bday-clock-card,
body.kiosk-dashboard .bday-feed-ring-card { padding: 10px 12px !important; display: flex; flex-direction: column; }
body.kiosk-dashboard .bday-card-label { font-size: 14px !important; }

/* 폰 landscape — 두 카드 가로 60:40 (일과표 강조) + 우측 gesture-nav safe-area 회피 */
@media (orientation: landscape) {
  body.kiosk-dashboard #screen-todayDashboard > main > .bday-main-grid {
    grid-template-columns: 1.5fr 1fr !important;
    grid-template-rows: 1fr !important;
  }
  /* 2026-05-27: 가로 모드에서 우측 safe-area-inset (gesture nav) 회피. inset 없으면 24px 기본. */
  body.kiosk-dashboard #screen-todayDashboard > main {
    padding-right: max(8px, env(safe-area-inset-right, 24px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 8px)) !important;
  }
}
/* 2026-05-19: force-landscape — orientation lock 시도 표시. 실제 회전 안 된 portrait 에서는 세로 stack fallback 유지 (좁은 좌·우 강제 분할 X). */
/* 큰 viewport (태블릿 portrait) — 시계 1.2 : ring 1 비율 */
@media (min-width: 641px) and (orientation: portrait) {
  body.kiosk-dashboard #screen-todayDashboard > main > .bday-main-grid {
    grid-template-rows: 1.2fr 1fr;
  }
}

/* split-on 시 fixed bottom bar (.sticky-bottom) 도 우측 panel 안으로 이동 */
@media (min-width: 1280px) {
  body.split-on .sticky-bottom {
    left: 50vw !important;
    right: 0 !important;
  }
}

/* ════════════════════════════════════════════════════
   간호사 대시보드 (Preset C — B2B)
   ════════════════════════════════════════════════════ */

.dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.dash-title { font-size: 20px; font-weight: 700; margin: 0; }
.dash-back {
  padding: 6px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.dash-main { padding: 20px; }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.dash-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.dash-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dash-tile-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}
.dash-tile-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: rgba(0,0,0,0.06);
}
.dash-tile-name { font-weight: 600; margin-bottom: 4px; }
.dash-tile-vitals {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  font-size: 13px;
  color: rgba(0,0,0,0.7);
}
.dash-empty { text-align: center; padding: 40px; color: rgba(0,0,0,0.6); }
.dash-empty .dash-sub { font-size: 14px; margin-top: 8px; }
.dash-loading, .dash-error { padding: 40px; text-align: center; color: rgba(0,0,0,0.6); }

/* ════════════════════════════════════════════════════
   Facility 관리 (Stage 4 — B2B 관리자)
   ════════════════════════════════════════════════════ */

.admin-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.admin-section h2 { font-size: 18px; margin: 0 0 16px; }
.admin-form { display: flex; flex-direction: column; gap: 12px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.admin-form input, .admin-form select {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 15px;
}
.admin-btn {
  align-self: flex-start;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #5b6bf3;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.admin-list { color: rgba(0,0,0,0.7); }
.admin-hint { font-size: 13px; color: rgba(0,0,0,0.5); }

/* 2026-05-19 어필리에잇 클릭 실적 카드 */
.admin-affiliate-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px;
}
.admin-stat-card {
  background: linear-gradient(135deg, #FFF7E6 0%, #FFE2C2 100%);
  border-radius: 14px; padding: 16px; text-align: center;
  border: 1px solid rgba(0,0,0,0.06);
}
.admin-stat-label { font-size: 12px; font-weight: 700; color: #9C5C2E; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-stat-value {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 30px; font-weight: 900; color: #1F232B;
  font-variant-numeric: tabular-nums;
}
.admin-affiliate-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.admin-affiliate-tables h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.admin-affiliate-list { list-style: none; padding: 0; margin: 0; background: white; border-radius: 12px; overflow: hidden; }
.admin-affiliate-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 13px;
}
.admin-affiliate-list li:last-child { border-bottom: 0; }
.admin-aff-name { color: #1F232B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.admin-aff-cnt { color: #C2410C; font-weight: 800; flex-shrink: 0; }
.admin-affiliate-daily h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.admin-affiliate-bars { background: white; border-radius: 12px; padding: 12px 14px; }
.admin-aff-bar-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.admin-aff-bar-day { width: 40px; color: #6B7280; font-variant-numeric: tabular-nums; }
.admin-aff-bar-track { flex: 1; height: 14px; background: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; }
.admin-aff-bar-fill { height: 100%; background: linear-gradient(90deg, #F4A261 0%, #E76F51 100%); border-radius: 4px; }
.admin-aff-bar-cnt { width: 32px; text-align: right; color: #1F232B; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .admin-affiliate-summary { grid-template-columns: repeat(2, 1fr); }
  .admin-affiliate-tables { grid-template-columns: 1fr; }
}

/* Custom dropdown — split-picker (native select wayland popup 한계 우회) */
.split-picker-wrap {
  flex: 1;
  position: relative;
}
.split-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);
  color: #1F232B;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 2px 8px rgba(31,35,43,0.05);
  transition: box-shadow 0.15s, transform 0.1s;
}
.split-picker-toggle:hover { box-shadow: 0 4px 12px rgba(31,35,43,0.08); }
.split-picker-toggle:active { transform: scale(0.99); }
.split-picker-arrow { color: #C2410C; font-size: 20px; margin-left: 8px; font-weight: 800; }
.split-picker-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 50vh;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(31,35,43,0.12), 0 2px 6px rgba(31,35,43,0.06);
  z-index: 60;
}
.split-picker-list.hidden { display: none; }
.split-picker-group {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(0,0,0,0.4);
  text-transform: uppercase;
}
.split-picker-item {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #1F232B;
  border-radius: 12px;
}
.split-picker-item:hover { background: rgba(254,215,170,0.35); }
.split-picker-item:active { background: rgba(254,215,170,0.55); }

/* split-left header — title 텍스트만 + 끄기 버튼 (picker 제거됨) */
.split-left-title {
  flex: 1;
  font-size: 13px;
  color: rgba(0,0,0,0.5);
  padding-left: 4px;
}

/* 2미터 거리 가독성 — split-on (가로 모니터) 모드에서 폰트 +35%. 미니PC 1920 표준 — px 고정. */
@media (min-width: 1280px) {
  body.split-on, body.split-on .split-pane {
    font-size: 18px;
  }
  body.split-on .text-sm { font-size: 16px !important; }
  body.split-on .text-xs { font-size: 14px !important; }
  body.split-on .text-base { font-size: 19px !important; }
  body.split-on .text-lg { font-size: 22px !important; }
  body.split-on .text-xl { font-size: 26px !important; }
  body.split-on .text-2xl { font-size: 32px !important; }
  body.split-on .text-3xl { font-size: 38px !important; }
  body.split-on .text-4xl { font-size: 46px !important; }
  /* stat 카드의 큰 숫자 */
  body.split-on .skeu-card .text-2xl,
  body.split-on .skeu-card .text-3xl {
    font-size: 42px !important;
    font-weight: 700;
  }
}
/* 2026-05-19: v2 monitor mirror — split-force 일 때 viewport 무관 적용 (위 미디어쿼리 mirror) */
body.split-force.split-on, body.split-force.split-on .split-pane { font-size: 18px; }
body.split-force.split-on .text-sm { font-size: 16px !important; }
body.split-force.split-on .text-xs { font-size: 14px !important; }
body.split-force.split-on .text-base { font-size: 19px !important; }
body.split-force.split-on .text-lg { font-size: 22px !important; }
body.split-force.split-on .text-xl { font-size: 26px !important; }
body.split-force.split-on .text-2xl { font-size: 32px !important; }
body.split-force.split-on .text-3xl { font-size: 38px !important; }
body.split-force.split-on .text-4xl { font-size: 46px !important; }
body.split-force.split-on .skeu-card .text-2xl,
body.split-force.split-on .skeu-card .text-3xl { font-size: 42px !important; font-weight: 700; }

/* anchor 가 li 풀 영역 차지 */
.split-picker-anchor {
  display: block;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
}
.split-picker-item { padding: 0 !important; }

/* ============================================================
   X variant — 모니터 우측 대시보드 (≥1280px split-on 만 표시)
   폰/태블릿 영향 0. .monitor-only = split-on 시 표시. .mobile-only = split-on 시 hide.
   ============================================================ */
/* 2026-05-20: viewport 폭 별 sticky-bottom 스탬프 자동 노출 단계.
   기본 (default ≤360): 모유 + 기저귀 (2)
   361+: + 기타 + 분유 (4)
   401+: + 유축 (5)
   500+: + 수면 (6)
   601+: + 체온 (7) — 폰 큰 가로 또는 태블릿
   split-on 모니터 모드: 별도 selector */
.monitor-only { display: none !important; }
@media (min-width: 361px) {
  .sticky-bottom #quick-bottle-btn.monitor-only { display: flex !important; }
  .sticky-bottom #quick-more-btn.monitor-only   { display: flex !important; }
}
@media (min-width: 401px) {
  .sticky-bottom #quick-pump-btn.monitor-only { display: flex !important; }
}
@media (min-width: 500px) {
  .sticky-bottom #quick-sleep-btn.monitor-only { display: flex !important; }
}
@media (min-width: 601px) {
  .sticky-bottom #quick-temp-btn.monitor-only { display: flex !important; }
}
body.split-on .monitor-only { display: block !important; }
body.split-on .mobile-only { display: none !important; }
/* 2026-05-19: v2 monitor mirror — mobile-only hide + monitor-only show */
body.split-force.split-on .monitor-only { display: block !important; }
body.split-force.split-on .mobile-only { display: none !important; }
/* 모니터에서 stamp 모양은 폰 원본 그대로 유지 (사용자 의도: 태초 사이즈). 가로만 키움. */
body.split-on button.quick-repeat-btn.monitor-only,
body.split-force.split-on button.quick-repeat-btn.monitor-only {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* 가로 키움: sticky-bottom-inner 의 max-w-[600px] 제한 풀음 (모니터에선 50vw 전체 활용) */
body.split-on .sticky-bottom-inner { max-width: 100% !important; gap: 12px !important; }
/* touch 정확도 위해 stamp 박스 간 buffer 늘림 + height 살짝 (모니터 only) */
body.split-on .quick-repeat-btn { min-height: 88px; padding: 14px 12px !important; }

@media (min-width: 1280px) {
  body.split-on #screen-main main { max-width: 1200px !important; padding-bottom: 140px; padding-top: 12px; }
}
body.split-force.split-on #screen-main main { max-width: 100% !important; padding-bottom: 140px; padding-top: 12px; }

.monitor-x-root { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.mx-header-row { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
.mx-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #FB923C, #F97316);
  color: white; font-size: 22px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(249,115,22,0.25);
  flex-shrink: 0;
}
.mx-header-text { flex: 1; }
.mx-time { font-size: 32px; font-weight: 900; color: #1F2937; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mx-baby { font-size: 14px; color: #6B7280; margin-top: 2px; }
.mx-baby-sep { opacity: 0.5; margin: 0 6px; }
.mx-date-chip {
  font-size: 13px; color: #4B5563; font-weight: 600;
  background: white; border: 1px solid #E5E7EB; border-radius: 999px;
  padding: 8px 14px;
}

.monitor-card {
  background: rgba(255,255,255,0.98);
  border-radius: 18px; padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}
.mx-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.mx-card-title { font-size: 17px; font-weight: 800; color: #1F2937; }
.mx-card-title-sm { font-size: 15px; }
.mx-card-sub { font-size: 12px; color: #9CA3AF; font-weight: 500; margin-left: 6px; }

.mx-legend { display: flex; gap: 14px; font-size: 12px; color: #6B7280; }
.mx-leg { display: inline-flex; align-items: center; gap: 5px; }
.mx-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mx-leg-feed i { background: #FB923C; }
.mx-leg-sleep i { background: #93C5FD; }
.mx-leg-diaper i { background: #FBBF24; }
.mx-leg-cry i { background: #EF4444; }

.timeline-24h {
  position: relative; width: 100%; height: 220px;
  padding: 8px 0 30px;
}
.timeline-rows {
  position: absolute; top: 8px; bottom: 30px; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.timeline-row { position: relative; flex: 1; min-height: 28px; }
.timeline-row.mx-row-sleep { flex: 1.4; }
.timeline-axis {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-size: 11px; color: #9CA3AF; padding-top: 8px;
  border-top: 1px solid #F3F4F6;
}

.timeline-now {
  position: absolute; top: 0; bottom: 30px;
  width: 2px; background: #DC2626; pointer-events: none;
}
.timeline-now-label {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  background: #1F2937; color: white;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}

.tl-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
}
.tl-dot-feed { background: #FB923C; }
.tl-dot-diaper { background: #FBBF24; }
.tl-dot-cry { background: #EF4444; }
.tl-dot.tl-dot-big { width: 18px; height: 18px; }
.tl-dot.tl-dot-sm { width: 8px; height: 8px; }

.tl-bar-sleep {
  position: absolute; top: 10%; bottom: 10%;
  background: rgba(147,197,253,0.45);
  border: 1px solid rgba(96,165,250,0.5);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #1D4ED8; font-weight: 600;
}

.mx-cry-empty {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 11px; color: #C4C4C4; white-space: nowrap;
}

.mx-bottom-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.mx-pat-rows { display: flex; flex-direction: column; gap: 14px; }
.mx-pat-row {
  display: flex; align-items: center; gap: 10px;
  border-left: 3px solid transparent; padding-left: 12px;
}
.mx-pat-row:nth-child(1) { border-color: #FB923C; }
.mx-pat-row:nth-child(2) { border-color: #60A5FA; }
.mx-pat-row:nth-child(3) { border-color: #FBBF24; }
.mx-pat-row:nth-child(4) { border-color: #E5E7EB; }
.mx-pat-label { font-size: 12px; color: #9CA3AF; flex: 1; }
.mx-pat-value { font-size: 18px; font-weight: 800; color: #1F2937; }
.mx-pat-badge {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: #D1FAE5; color: #047857; font-weight: 600;
}
.mx-pat-badge:empty { display: none; }
.mx-pat-badge-calm { background: #D1FAE5; color: #047857; }
.mx-pat-badge-warn { background: #FEF3C7; color: #92400E; }

.mx-next-card {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 100%);
  border: 1px solid rgba(251,146,60,0.25);
  display: flex; flex-direction: column; justify-content: center;
}
.mx-next-meta { font-size: 12px; color: #9A3412; font-weight: 700; letter-spacing: 0.05em; }
.mx-next-sub { font-size: 13px; color: #7C2D12; opacity: 0.7; margin-top: 2px; }
.mx-next-time {
  font-size: 64px; font-weight: 900; color: #1F2937;
  line-height: 1; margin: 8px 0 14px; letter-spacing: -0.02em;
}
.mx-next-ampm { font-size: 22px; font-weight: 700; margin-left: 8px; color: #4B5563; }
.mx-next-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mx-next-chip {
  background: rgba(255,255,255,0.7); color: #4B5563;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.mx-next-chip:empty { display: none; }

.mx-summary-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 24px;
}
.mx-summary-label { font-size: 12px; color: #9CA3AF; font-weight: 600; }
.mx-sum-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4B5563;
  background: #F9FAFB; border-radius: 999px;
  padding: 6px 12px;
}
.mx-sum-chip b { color: #1F2937; font-weight: 700; }
.mx-sum-chip .mx-sum-sub { color: #9CA3AF; font-size: 11px; margin-left: 4px; }
.mx-sum-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mx-sum-dot-feed { background: #FB923C; }
.mx-sum-dot-sleep { background: #93C5FD; }
.mx-sum-dot-diaper { background: #FBBF24; }
.mx-summary-day {
  margin-left: auto; font-size: 12px; color: #9CA3AF;
  font-weight: 700; letter-spacing: 0.05em;
}

/* 모니터 모드 2-3m 가독성: 핵심 폰트 한층 더 키움 */
@media (min-width: 1280px) {
  body.split-on .mx-time { font-size: 44px; }
  body.split-on .mx-card-title { font-size: 20px; }
  body.split-on .mx-pat-value { font-size: 22px; }
  body.split-on .mx-next-time { font-size: 80px; }
}
body.split-force.split-on .mx-time { font-size: 44px; }
body.split-force.split-on .mx-card-title { font-size: 20px; }
body.split-force.split-on .mx-pat-value { font-size: 22px; }
body.split-force.split-on .mx-next-time { font-size: 80px; }

/* 좌측 패널 = sticky header (아바타+시계) + picker + iframe (B 톤) */
#split-left { display: flex; flex-direction: column; }
.split-left-frame { flex: 1; min-height: 0; }

/* sticky header — 2 row 구조: row1 (아바타·날짜·시계), row2 (picker 전체 너비 = 페이지 제목) */
.split-sticky-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.split-sticky-row1 {
  display: flex;
  align-items: stretch;
  gap: 14px;
}
/* picker — row 2 전체 너비, 페이지 제목 역할 */
.split-picker-wrap-inline {
  position: relative;
  width: 100%;
  min-width: 0;
}
.split-picker-wrap-inline .split-picker-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 28px;
  font-weight: 900;
  color: #1F232B;
  letter-spacing: -0.015em;
  padding: 14px 22px;
  background: linear-gradient(135deg, #FFF7E6 0%, #FFE9CC 100%);
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.split-picker-wrap-inline .split-picker-toggle:hover {
  background: linear-gradient(135deg, #FFEFD0 0%, #FFD8AA 100%);
}
.split-picker-wrap-inline #split-picker-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split-picker-wrap-inline .split-picker-arrow { font-size: 22px; color: #C2410C; flex-shrink: 0; }
.split-picker-wrap-inline .split-picker-list {
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto;
}
.split-sticky-left {
  display: flex; align-items: center; gap: 14px;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 4px;
}
/* 좌 카드: 아바타+이름 (배경+border) */
.split-card-info {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(31,35,43,0.05);
}
/* 중 카드: 날짜 (별도) */
.split-card-date {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 12px 22px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(31,35,43,0.05);
  flex-shrink: 0;
  min-width: 140px;
}
.split-date-md {
  font-size: 56px; font-weight: 900; color: #1F232B;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.split-date-dow {
  font-size: 56px; font-weight: 900; color: #9A3412;
  letter-spacing: -0.02em; line-height: 1;
  margin-top: 6px;
}
.split-avatar-sm {
  width: 80px; height: 80px;
  border-radius: 20px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(120,53,15,0.14), 0 0 0 4px rgba(255,237,213,0.7);
  overflow: hidden; flex-shrink: 0;
}
.split-avatar-sm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-sticky-info { flex: 1; min-width: 0; }
.split-sticky-info .split-baby-name {
  font-size: 28px; font-weight: 900; color: #1F232B;
  line-height: 1.1; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.split-sticky-info .split-baby-age {
  font-size: 20px; font-weight: 700; color: #C2410C;
  margin-top: 5px;
}

/* NEXT 톤 시계 박스 (X 시안 NEXT 카드 톤 차용) — 2배 크기 (사용자 멀리서 가독) */
/* 날짜 (시계 좌측 별도) */
.split-sticky-date {
  font-size: 22px;
  font-weight: 800;
  color: #9A3412;
  letter-spacing: -0.01em;
  align-self: center;
  margin-left: auto;  /* 가운데 영역 → 우측 push */
  text-align: right;
  line-height: 1.25;
  flex-shrink: 0;
  white-space: nowrap;
}

.split-sticky-clock {
  background: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%);
  border-radius: 26px;
  padding: 12px 32px;
  min-width: 360px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(249,115,22,0.24);
  border: 1px solid rgba(251,146,60,0.22);
  flex-shrink: 0;
}
.split-sticky-clock .split-clock-big {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900;
  font-size: 128px;
  color: #1F232B;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* === 레거시 split-top-grid (avatar + clock 두 박스) 제거됨 ===
   .split-top-grid, .split-card-avatar, .split-card-clock 등은 미사용. 룰 유지 X. */

/* 좌측 = 아바타 박스 + 시계 박스 (가로 양분 50:50, 별개 카드) */
.split-top-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px;
  flex-shrink: 0;
}
.split-card {
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 6px 24px rgba(249,115,22,0.10);
  display: flex; flex-direction: column;
}

/* 아바타 박스 — row 식 (사진 좌, 이름·나이 우), 사진 = 네모 라운드 */
.split-card-avatar {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
  border: 1px solid rgba(0,0,0,0.04);
  flex-direction: row;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
}
.split-avatar {
  width: 150px; height: 150px;
  border-radius: 24px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(120,53,15,0.16), 0 0 0 4px rgba(255,237,213,0.85);
  overflow: hidden;
  flex-shrink: 0;
}
.split-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-baby-info { text-align: left; flex: 1; min-width: 0; }
.split-baby-name {
  font-size: 36px; font-weight: 900; color: #1F2937; line-height: 1.1;
  letter-spacing: -0.015em;
}
.split-baby-age {
  font-size: 22px; font-weight: 700; color: #C2410C;
  margin-top: 8px;
}

/* 시계 박스 — 그라데이션 오렌지 + 큰 시계 + margin 줄임 */
.split-card-clock {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 60%, #FDBA74 100%);
  border: 1px solid rgba(251,146,60,0.20);
  align-items: center; justify-content: center;
  padding: 10px 18px;
}
.split-clock-big {
  font-size: 120px; font-weight: 900;
  color: #1F2937;
  letter-spacing: -0.05em; line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.split-clock-date {
  margin-top: 6px;
  font-size: 28px; font-weight: 800;
  color: rgba(120,53,15,0.85);
  letter-spacing: 0.01em;
}

/* 우측 stat 카드 — Step 3-X 우측 단순화: stat-feeding-next 좌측 progress ring 과 완전 중복 → 폰/모니터 둘 다 hide */
#stat-feeding-next, body.split-on #stat-feeding-next {
  display: none !important;
}
body.split-on #stat-feeding-next-disabled-keep-rule {  /* 옛 룰 무효화 — selector 변경으로 inert */
  display: block !important;
  margin-top: 10px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1F2937 !important;
  background: transparent;
  padding: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: left;
}
body.split-on #stat-feeding-next:empty { display: none !important; }

/* ============================================================
   B 톤 — 좌측 패널 iframe 안 키우리 (`?nosplit=1`) 일관 적용
   페이지: 통계/패턴/건강/예방접종/성장/마일스톤/뮤직박스/울음/기저귀가이드
   ============================================================ */
body.bton-active main {
  max-width: 100% !important;
  padding: 16px 20px 32px !important;
}
/* todayDashboard 는 스크롤 X — viewport 안 강제 */
body.bton-active #screen-todayDashboard {
  height: 100vh;
  overflow: hidden;
}
/* 2026-05-20: iframe 안 monitor mirror 활성 시 height 100vh 제한 풀음 — mini-stat 잘림 사고 fix.
   콘텐츠 자연 height (~1290) 가 body+transform scale 의 결과 visible 안에 들어가도록. */
body.bton-active.mirror-active #screen-todayDashboard { height: auto !important; overflow: visible !important; }
body.bton-active.mirror-active #screen-todayDashboard main { height: auto !important; overflow: visible !important; }
body.bton-active #screen-todayDashboard main {
  height: 100%;
  overflow: hidden;
  padding: 12px 16px !important;
  display: flex;
  flex-direction: column;
}
/* 2026-05-16: mini stat row 가 하단 여백까지 늘어남 (스크롤 X 가정) */
body.bton-active #screen-todayDashboard .bday-mini-row {
  flex: 1 1 0;
  align-items: stretch;
  margin-bottom: 0;
  min-height: 0;
}
body.bton-active #screen-todayDashboard .bday-mini {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
body.bton-active #screen-todayDashboard .bday-mini .bday-mini-big {
  margin: auto 0;
}
/* 2026-05-18: ring 카드 마진 컴팩트 + mini-stat 더 큼 */
body.bton-active #screen-todayDashboard .bday-feed-ring-card { padding: 14px 18px 12px; }
/* 2026-05-24: 분유 사용자 아니면 "다음 수유까지" label hide (chip 으로 충분). JS 가 body class 박음. */
body.feed-non-bottle-mode #bday-feed-ring-head,
body.feed-non-bottle-mode .bday-feed-ring-card .bday-card-head { display: none !important; }
body.bton-active #screen-todayDashboard .bday-feed-ring-wrap { margin: 0 auto 4px; }
body.bton-active #screen-todayDashboard .bday-feed-ring-sub { margin-top: 4px; font-size: 22px; }
body.bton-active #screen-todayDashboard .bday-feed-next-big { padding: 10px 14px; margin: 4px 0 6px; }
body.bton-active #screen-todayDashboard .bday-feed-ring-meta { padding: 8px 12px; gap: 2px; margin-top: 4px; }
body.bton-active #screen-todayDashboard .bday-clock-card { padding: 10px 14px 12px; }
body.bton-active #screen-todayDashboard .bday-card-head-compact { margin-bottom: 2px; }
/* mini-stat — 위 카드 절약 공간 만큼 비례 큼 */
body.bton-active #screen-todayDashboard .bday-mini { padding: 20px 22px; min-height: 160px; }
body.bton-active #screen-todayDashboard .bday-mini-icon { width: 56px; height: 56px; }
body.bton-active #screen-todayDashboard .bday-mini-big { font-size: 52px !important; }
body.bton-active #screen-todayDashboard .bday-mini-big span { font-size: 26px !important; }
body.bton-active #screen-todayDashboard .bday-mini-label { font-size: 22px !important; }
body.bton-active #screen-todayDashboard .bday-mini-sub { font-size: 18px !important; }
body.bton-active header.app-header { padding: 12px 16px !important; }
body.bton-active .skeu-card {
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.03);
  padding: 20px !important;
  margin-bottom: 12px;
}
body.bton-active h1, body.bton-active h2 { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.015em; }
/* 2026-05-19: bton-active.compact — split-force (작은 viewport ÷ 2 분할) 시 iframe 안 폰트 적정화.
   모니터급 1280+ panel 용 폰트 boost 가 폰 가로 1170 viewport 의 절반 (585px) 에 적용되면 overflow → 우측 panel 침범. compact 시 base 가까이 reset. */
body.bton-active.compact h1, body.bton-active.compact h2 { font-size: 18px !important; }
body.bton-active.compact .text-xs { font-size: 11px !important; }
body.bton-active.compact .text-sm { font-size: 13px !important; }
body.bton-active.compact .text-base { font-size: 14px !important; }
body.bton-active.compact .text-lg { font-size: 16px !important; }
body.bton-active.compact .text-xl { font-size: 18px !important; }
body.bton-active.compact .text-2xl { font-size: 20px !important; }
body.bton-active.compact .text-3xl { font-size: 24px !important; }
body.bton-active.compact .text-4xl { font-size: 28px !important; }
body.bton-active.compact .text-\[11px\] { font-size: 11px !important; }
body.bton-active.compact .text-\[13px\] { font-size: 13px !important; }
body.bton-active.compact .text-\[14px\] { font-size: 14px !important; }
body.bton-active.compact .text-\[15px\] { font-size: 15px !important; }
/* compact 시 카드 padding 도 줄여 overflow 차단 */
body.bton-active.compact { overflow-x: hidden !important; }
body.bton-active.compact #screen-todayDashboard main { padding: 8px !important; }
/* 2026-05-18 좌측 패널 20px+ 룰 일관 적용 (stats/patterns/health 등 picker 안 페이지) */
body.bton-active .text-xs { font-size: 20px !important; }
body.bton-active .text-sm { font-size: 20px !important; }
body.bton-active .text-base { font-size: 22px !important; }
body.bton-active .text-lg { font-size: 26px !important; }
body.bton-active .text-xl { font-size: 30px !important; }
body.bton-active .text-2xl { font-size: 36px !important; }
body.bton-active .text-3xl { font-size: 44px !important; }
body.bton-active .text-\[11px\] { font-size: 20px !important; }
body.bton-active .text-\[13px\] { font-size: 20px !important; }
body.bton-active .text-\[14px\] { font-size: 20px !important; }
body.bton-active .text-\[15px\] { font-size: 22px !important; }
/* 2026-05-18: picker 페이지별 작은 텍스트 일괄 20px+ */
body.bton-active .health-quick-label { font-size: 20px !important; }
body.bton-active .stats-empty-msg { font-size: 20px !important; }
/* 2026-07-12: 뮤직박스 곡 카드 기본 스타일 복원 — CSS 마이그레이션(레거시 styles.css→output.css)
   때 .music-track 카드(테두리·배경·radius) 규칙이 누락돼 곡마다 박스가 사라진 회귀 수정. */
.music-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  min-height: 96px;
  border-radius: 1rem;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.music-track:active { transform: scale(0.97); }
.music-track.playing {
  background: color-mix(in srgb, var(--color-action-feed-end, #9ac3c6) 14%, transparent);
  border-color: var(--color-action-feed-end, #9ac3c6);
}
.music-track-icon { font-size: 1.5rem; line-height: 2rem; }
.music-track-name { font-size: 13px; font-weight: 700; color: var(--color-content-primary); }
.music-track-sub { font-size: 11px; color: var(--color-content-muted); }
body.bton-active .music-track-sub { font-size: 20px !important; }
body.bton-active .music-cat-label { font-size: 20px !important; }
body.bton-active .music-timer-btn { font-size: 20px !important; padding: 8px 14px !important; }
body.bton-active .music-track-name { font-size: 22px !important; }
body.bton-active .diaper-diag-label { font-size: 20px !important; }
body.bton-active .diaper-nav-sub { font-size: 20px !important; }
body.bton-active .diaper-go-growth { font-size: 20px !important; }
body.bton-active .diaper-nav-title { font-size: 22px !important; }
/* 2026-05-18: milestones / growth / diaperGuide 잔여 */
body.bton-active .ms-group-title { font-size: 22px !important; }
body.bton-active .ms-group-count { font-size: 20px !important; }
body.bton-active .ms-item-name { font-size: 20px !important; }
body.bton-active #screen-growth span { font-size: 20px !important; }
body.bton-active #screen-diaperGuide strong { font-size: 20px !important; }
/* 2026-05-18 좌측 패널 list 항목 — 모니터 톤 padding/spacing 확장 */
body.bton-active .ms-group { padding: 16px 18px !important; margin-bottom: 12px !important; border-radius: 18px !important; }
body.bton-active .ms-group-head { margin-bottom: 8px; }
body.bton-active .ms-item { padding: 12px 0 !important; gap: 14px; }
body.bton-active .ms-check { width: 32px !important; height: 32px !important; }
body.bton-active .music-track { padding: 18px 14px !important; min-height: 96px !important; border-radius: 18px; }
body.bton-active .music-track-icon { font-size: 32px !important; margin-bottom: 6px; }
body.bton-active .music-track-sub { margin-top: 2px; }
body.bton-active .music-cat-label { margin: 14px 0 6px !important; }
body.bton-active .diaper-nav-card { padding: 18px 16px !important; gap: 14px; border-radius: 18px; }
body.bton-active .diaper-nav-icon { font-size: 32px !important; }
body.bton-active .health-quick-btn { padding: 16px 12px !important; min-height: 96px; border-radius: 18px; }
/* 페이지 header 좌측 패널 진입 시 hide (sticky-header 가 대신함) — 안전 보강 */
body.bton-active .app-header > div { gap: 0 !important; }
body.bton-active .app-header { display: none !important; }

/* ==========================================================================
   2026-05-18: 좌측 패널 페이지 별 모니터 전용 layout 재구성 (모바일 영향 0)
   ========================================================================== */

/* 통계 페이지 — sub-card 3→4 col wide grid + 차트 height 큼 + heatmap 큰 cell */
body.bton-active #screen-stats .stats-sub-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}
body.bton-active #screen-stats .stats-sub-card {
  padding: 22px 20px !important;
  border-radius: 18px !important;
}
body.bton-active #screen-stats .stats-sub-emoji { font-size: 36px !important; margin-bottom: 8px !important; }
body.bton-active #screen-stats .relative.h-\[220px\] { height: 320px !important; }
body.bton-active #screen-stats .relative.h-\[200px\] { height: 280px !important; }
body.bton-active #screen-stats .heatmap-grid { gap: 4px !important; }
body.bton-active #screen-stats .heatmap-cell { min-width: 14px !important; min-height: 14px !important; }
body.bton-active #screen-stats .stats-tab { flex: 1; justify-content: center; }
body.bton-active #screen-stats .intake-stackbar { height: 18px !important; border-radius: 6px; }

/* 수면 분석 — sub-tab grid 3 col 모니터 / 차트 큰 */
body.bton-active #screen-sleepAnalytics .bday-sleep-tabs { gap: 8px; }
body.bton-active #screen-sleepAnalytics .bday-sleep-tab { flex: 1; padding: 10px 14px; font-size: 18px; }
body.bton-active #screen-sleepAnalytics .bday-sleep-panel { min-height: 320px; padding: 14px 4px; }
body.bton-active #screen-sleepAnalytics .bday-card { padding: 20px; border-radius: 22px; }

/* 성장 기록 — chart wide 2-col + stat 카드 가로 */
body.bton-active #screen-growth main { padding: 12px 16px !important; }
body.bton-active #screen-growth section { margin-bottom: 14px !important; }
body.bton-active #screen-growth canvas { max-height: 280px !important; }
body.bton-active #screen-growth .grid.grid-cols-3 { gap: 14px !important; }

/* 마일스톤 — group 카드 grid 형 + item padding 큼 */
body.bton-active #screen-milestones main { padding: 12px 16px !important; }
body.bton-active #screen-milestones .ms-group { background: #FFFFFF; box-shadow: 0 1px 6px rgba(0,0,0,0.04); }
body.bton-active #screen-milestones .ms-item { font-size: 20px; }

/* 뮤직박스 — 사운드 4 col grid */
body.bton-active #screen-music #music-tracks {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
body.bton-active #screen-music .music-cat-section {
  grid-column: 1 / -1 !important;
}
body.bton-active #screen-music .music-track {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 6px;
}
body.bton-active #screen-music .music-track-icon { font-size: 36px !important; }
body.bton-active #screen-music .music-now-row { padding: 14px 18px; }
body.bton-active #screen-music #music-timer-opts { gap: 8px; }
body.bton-active #screen-music .music-timer-btn { flex: 1; }

/* 기저귀 가이드 — 진단 dashboard + 4 nav 2x2 가로 (모니터 전용) */
body.bton-active #screen-diaperGuide main { padding: 12px 16px !important; }
body.bton-active #screen-diaperGuide .diaper-page > section.space-y-2\.5 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}
body.bton-active #screen-diaperGuide .diaper-page > section.space-y-2\.5 > * { margin: 0 !important; }
body.bton-active #screen-diaperGuide .diaper-nav-card {
  padding: 22px 20px !important;
  min-height: 110px;
  gap: 16px !important;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
body.bton-active #screen-diaperGuide .diaper-nav-icon { font-size: 40px !important; flex-shrink: 0; }
body.bton-active #screen-diaperGuide .diaper-nav-title { font-size: 22px !important; }
body.bton-active #screen-diaperGuide .diaper-nav-sub { font-size: 18px !important; line-height: 1.4; }

/* 모니터 전용 진단 dashboard */
.diaper-diag-monitor {
  padding: 22px 24px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #FFF7E6 0%, #FFE2C2 100%) !important;
}
.diaper-diag-monitor-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.diaper-diag-monitor-name {
  font-size: 24px; font-weight: 900; color: #1F232B;
}
.diaper-diag-monitor-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.diaper-diag-stat {
  background: rgba(255,255,255,0.7);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.04);
}
.diaper-diag-stat-hi { background: rgba(255,200,140,0.6); }
.diaper-diag-stat-warn { background: rgba(254,202,202,0.85); animation: bday-mini-pulse-alert 1.4s ease-in-out infinite; }
.diaper-diag-stat-label {
  font-size: 14px; font-weight: 700; color: #9C5C2E;
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.diaper-diag-stat-value {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 32px; font-weight: 900; color: #1F232B;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.diaper-diag-stat-value span { font-size: 18px; font-weight: 700; color: #6B7280; margin-left: 2px; }
.diaper-diag-est { font-size: 22px; font-weight: 700; color: #C84A1F; }
.diaper-diag-est span { font-size: 14px; color: #C84A1F; }
@media (max-width: 800px) {
  .diaper-diag-monitor-grid { grid-template-columns: repeat(2, 1fr); }
  .diaper-diag-monitor-grid > :nth-child(5) { grid-column: 1 / -1; }
}

/* 예방접종 — 카드 grid 2-col + vaccine card padding 큼 */
body.bton-active #screen-vaccines main { padding: 12px 16px !important; }
body.bton-active #screen-vaccines .vaccine-card { padding: 18px; border-radius: 18px; margin-bottom: 12px; }

/* 건강 관리 — quick 액션 4-col grid */
body.bton-active #screen-health main { padding: 12px 16px !important; }
body.bton-active #screen-health #health-quick {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
body.bton-active #screen-health .health-quick-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
body.bton-active #screen-health canvas { max-height: 280px !important; }

/* 울음 분석 — 분석 카드 wide + AI 결과 큰 */
body.bton-active #screen-monitor main { padding: 12px 16px !important; }
body.bton-active #screen-monitor section { margin-bottom: 14px !important; }

/* 공통: 모든 .grid 안 2-col 강제 활성 (필요한 경우 강제 4) — main 너비 활용 */
body.bton-active .grid.grid-cols-2 { gap: 14px !important; }
/* 카드 안 큰 숫자 (예: 통계 페이지 intake-num) */
body.bton-active .intake-num { font-size: 48px !important; font-weight: 900 !important; }
body.bton-active .intake-unit { font-size: 22px !important; font-weight: 700 !important; }
body.bton-active .intake-sep { font-size: 22px !important; font-weight: 700 !important; margin-left: 6px; }
/* stats 페이지 sub-card / heatmap / guidance — 좌측 패널 20px+ 룰 */
body.bton-active .stats-sub-label { font-size: 22px !important; font-weight: 800 !important; }
body.bton-active .stats-sub-value { font-size: 32px !important; font-weight: 900 !important; }
body.bton-active .stats-sub-note  { font-size: 20px !important; }
body.bton-active .intake-guidance { font-size: 20px !important; line-height: 1.4; }
body.bton-active .heatmap-xaxis span { font-size: 20px !important; }
body.bton-active #stats-intake-delta { font-size: 20px !important; }
/* 2026-05-18: 일 평균 카드 — 좌측 패널 가로폭 활용 (좌 라벨 / 큰 숫자 / 우 sub) */
body.bton-active #stats-summary-card {
  display: flex !important;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
body.bton-active #stats-summary-card #stats-summary-label { flex: 0 0 auto; margin: 0 !important; }
body.bton-active #stats-summary-card #stats-summary-value { flex: 1 1 auto; }
body.bton-active #stats-summary-card #stats-summary-sub { flex: 0 0 auto; margin-left: auto; margin-top: 0 !important; }
/* 탭/버튼 큰 사이즈 */
body.bton-active .stats-tab, body.bton-active .range-btn {
  padding: 12px 18px !important; font-size: 20px !important; min-height: 48px;
}
/* 차트 영역 — 좌측 패널 좁음, 가독성 맞춤 */
body.bton-active #stats-main-chart { max-height: 200px; }
body.bton-active #stats-sub-chart { max-height: 180px; }
/* iframe 안엔 sticky-bottom 안 보임 (메인 화면 X) — 안전 보장 */
body.bton-active .sticky-bottom { display: none !important; }
/* iframe 안 페이지 헤더의 뒤로가기 버튼 hide (좌측 picker 으로 page 전환하므로 뒤로가기 의미 X) */
body.bton-active .app-header button[aria-label="뒤로"] { display: none !important; }
body.bton-active .app-header h1 { display: none !important; }
body.bton-active .app-header { padding-top: 4px !important; padding-bottom: 0 !important; min-height: 0; }

/* 모니터에서 우측 stat 위로 올림 + 일자별 list 가독성 ↑ */
/* 2026-05-19: v2 monitor mirror — 아래 미디어쿼리 안 rule 들 viewport 무관 mirror */
body.split-force.split-on #screen-main .insight-header { padding: 0 !important; min-height: 0; }
body.split-force.split-on #screen-main #insight-ticker-row { display: none !important; }
/* 2026-05-20: split-on 시 #screen-main 의 app-header (insight-header) 전체 hide — 모니터 의도와 동일 */
body.split-on #screen-main header.app-header,
body.split-force.split-on #screen-main header.app-header { display: none !important; }
body.split-force.split-on #screen-main main { padding-top: 8px !important; }
/* 2026-05-24: 미니PC (split-force.split-on) v2 박은 게 우측 panel 스크롤 안 됨 사고 fix.
   좌측 #split-left = position:fixed + body padding-left:50% 박혀있어서 body 자체 스크롤 박지 X.
   우측 #screen-main 박은 게 박은 게 박은 게 스크롤 룰 박음. @media 박지 X (모든 viewport 적용). */
body.split-force.split-on #screen-main {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.split-force.split-on .timeline-item, body.split-force.split-on .timeline-day-card .timeline-item { padding: 18px 16px !important; min-height: 72px; gap: 16px; align-items: center; }
body.split-force.split-on .timeline-item .text-2xl { font-size: 36px !important; }
body.split-force.split-on .timeline-item .timeline-item-text { font-size: 32px !important; font-weight: 800 !important; line-height: 1.25; color: #1F2937; }
/* 2026-05-24: 미니PC ring 카드 padding-right 100 revert. label show/hide 는 JS 박음 (분유만 show) */
/* 2026-05-24: 태블릿 (tablet-mode) 의 timeline doc text = 날짜 헤더 크기 (14.4px) — 사용자 정정 */
html body.split-force.split-on.tablet-mode .timeline-item .timeline-item-text,
html body.split-force.split-on .tablet-mode .timeline-item .timeline-item-text { font-size: 14.4px !important; font-weight: 600 !important; line-height: 1.35 !important; }
html body.split-force.split-on.tablet-mode .timeline-item .tabular-nums,
html body.split-force.split-on .tablet-mode .timeline-item .tabular-nums { font-size: 13px !important; }
html body.split-force.split-on.tablet-mode .timeline-item .text-2xl,
html body.split-force.split-on .tablet-mode .timeline-item .text-2xl { font-size: 16px !important; }
/* 2026-05-24: tablet-mode 박은 게 폰트 크기 박은 게 박지 X 박은 게 padding 18px / min-height 72px 박은 게 박은 게 박은 게 박은 게. 2/3 수준 박음. */
html body.split-force.split-on.tablet-mode .timeline-item,
html body.split-force.split-on .tablet-mode .timeline-item,
html body.split-force.split-on.tablet-mode .timeline-day-card .timeline-item,
html body.split-force.split-on .tablet-mode .timeline-day-card .timeline-item {
  padding: 10px 14px !important;
  min-height: 48px !important;
  gap: 10px !important;
}
body.split-force.split-on .timeline-item .timeline-item-memo { font-size: 18px !important; font-weight: 500; color: #6B7280; }
body.split-force.split-on .timeline-item .tabular-nums { font-size: 24px !important; font-weight: 700 !important; color: #4B5563; }
body.split-force.split-on .timeline-item .text-xs { font-size: 24px !important; font-weight: 700; }
body.split-force.split-on .timeline-item .text-\[11px\] { font-size: 13px !important; color: #9CA3AF; font-weight: 600; }
body.split-force.split-on #main-stats-grid { display: none !important; }
body.split-force.split-on #open-quiz-card { display: none !important; }
body.split-force.split-on #ai-summary-panel { display: none !important; }
body.split-force.split-on .more-sheet-grid { grid-template-columns: repeat(4, 1fr) !important; }
/* 2026-05-25: 기타 기록 sheet + 단축버튼 chooser sheet 박은 게 박은 게 = 메인/기타 section 분리 표시.
   각 section = wrapper 박음 → 제목 + grid 한 덩어리. 부모 wrapper 가 viewport 따라 row/column 분기. */
.more-section {
  display: flex;
  flex-direction: column;
}
/* 기본 (모바일 / 좁은 viewport) — 두 section 세로 배치 (위 메인, 아래 기타) */
#mainbtn-sheet-grid,
#more-actions-sheet .more-sections-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* 큰 viewport (768px 이상 — v2 모드 박은 게 박은 게 박은 게) — 두 section 가로 배치 */
@media (min-width: 768px) {
  #mainbtn-sheet-grid,
  #more-actions-sheet .more-sections-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  #mainbtn-sheet-grid > .more-section,
  #more-actions-sheet .more-sections-wrap > .more-section {
    flex: 1;
    min-width: 0;
  }
}
.more-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
  margin: 0 0 6px;
  padding: 0 4px;
  letter-spacing: 0.02em;
}
.more-section-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.more-section-grid .more-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px;
  min-height: 80px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.more-section-grid .more-tile:active { background: #F3F4F6; transform: scale(0.97); }
.more-section-grid .more-tile-emoji { font-size: 28px; line-height: 1; }
.more-section-grid img.more-tile-emoji { width: 32px; height: 32px; object-fit: contain; }
.more-section-grid .more-tile-label { font-size: 12px; font-weight: 600; color: #1F2937; line-height: 1.2; }
/* v2 split-on (큰 모니터) 박은 게 박은 게 박은 게 = 박은 게 박은 게 */
body.split-force.split-on .more-section-grid .more-tile { padding: 16px 12px; min-height: 100px; gap: 8px; }
body.split-force.split-on .more-section-grid .more-tile-emoji { font-size: 36px; }
body.split-force.split-on .more-section-grid img.more-tile-emoji { width: 40px; height: 40px; }
body.split-force.split-on .more-section-grid .more-tile-label { font-size: 15px; }
body.split-force.split-on .more-section-title { font-size: 16px; margin-bottom: 8px; }
/* 태블릿 박은 게 박은 게 박은 게 */
body.split-force.split-on.tablet-mode .more-section-grid .more-tile,
body.split-force.split-on .tablet-mode .more-section-grid .more-tile { padding: 10px 8px; min-height: 70px; gap: 4px; }
body.split-force.split-on.tablet-mode .more-section-grid .more-tile-emoji,
body.split-force.split-on .tablet-mode .more-section-grid .more-tile-emoji { font-size: 24px; }
body.split-force.split-on.tablet-mode .more-section-grid img.more-tile-emoji,
body.split-force.split-on .tablet-mode .more-section-grid img.more-tile-emoji { width: 28px; height: 28px; }
body.split-force.split-on.tablet-mode .more-section-grid .more-tile-label,
body.split-force.split-on .tablet-mode .more-section-grid .more-tile-label { font-size: 11px; }
body.split-force.split-on .more-tile { padding: 18px 12px; min-height: 110px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; gap: 10px; }
body.split-force.split-on .more-tile-emoji { font-size: 40px; line-height: 1; }
body.split-force.split-on .more-tile-label { font-size: 16px; font-weight: 600; line-height: 1.2; }
@media (min-width: 1280px) {
  /* 우측 최상단 빈 row (햄버거/인사이트/기타 다 hide 됐으므로) — 가로 줄 자체 hide */
  body.split-on #screen-main .insight-header { padding: 0 !important; min-height: 0; }
  body.split-on #screen-main #insight-ticker-row { display: none !important; }
  body.split-on #screen-main main { padding-top: 8px !important; }

  /* 타임라인 — 레벨별 폰트 hierarchy:
     L1 아이콘 36px / L2 활동 본문 28px 가장 굵음 / L3 시각 24px / L4 메모 18px / L5 sourceLabel 13px (가장 작 + 흐림) */
  body.split-on .timeline-item, body.split-on .timeline-day-card .timeline-item {
    padding: 18px 16px !important;
    min-height: 72px;
    gap: 16px;
    align-items: center;
  }
  body.split-on .timeline-item .text-2xl { font-size: 36px !important; }
  body.split-on .timeline-item .timeline-item-text { font-size: 32px !important; font-weight: 800 !important; line-height: 1.25; color: #1F2937; }
  body.split-on .timeline-item .timeline-item-memo { font-size: 18px !important; font-weight: 500; color: #6B7280; }
  body.split-on .timeline-item .tabular-nums { font-size: 24px !important; font-weight: 700 !important; color: #4B5563; }
  body.split-on .timeline-item .text-xs { font-size: 24px !important; font-weight: 700; }
  body.split-on .timeline-item .text-\[11px\] { font-size: 13px !important; color: #9CA3AF; font-weight: 600; }

  /* 2026-05-17: split-on (모니터/태블릿) 모드는 좌측 패널이 stat 통계 다 보여줘서
     우측의 stat 2x2 카드 + 퀴즈 카드 hide. 타임라인 + 스탬프 바만 남김. */
  body.split-on #main-stats-grid { display: none !important; }
  body.split-on #open-quiz-card { display: none !important; }
  body.split-on #ai-summary-panel { display: none !important; }
  /* 기타 sheet — 모니터에서 스탬프 바 톤 (큰 사이즈 + 둥근) */
  /* 기타 sheet — 가로 세로 가운데 정렬 강조 + 4열 grid */
  body.split-on .more-sheet-grid { grid-template-columns: repeat(4, 1fr) !important; }
  body.split-on .more-tile {
    padding: 18px 12px; min-height: 110px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    gap: 10px;
  }
  body.split-on .more-tile-emoji { font-size: 40px; line-height: 1; }
  body.split-on .more-tile-label { font-size: 16px; font-weight: 600; line-height: 1.2; }
}

/* ============================================================
   B Heavy data dashboard (좌측 picker default) — 2026-05-15
   진짜 B 시안 (24h 막대 차트 + mini stat 4 + sleep timeline + 7일 추이)
   시안 그대로가 아니라 레퍼런스 톤만 참고
   ============================================================ */
.bday-range-toggle {
  display: inline-flex;
  background: rgba(243,244,246,0.7);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.04);
}
.bday-range-btn {
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: #6B7280;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 36px;
  font-family: inherit;
}
.bday-range-btn.active {
  background: white;
  color: #1F232B;
  box-shadow: 0 1px 4px rgba(31,35,43,0.10);
}
.bday-range-btn:not(.active):hover { color: #1F232B; }
body.bton-active .bday-range-btn { font-size: 15px; padding: 10px 22px; min-height: 44px; }

.bday-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF5 100%);
  border-radius: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(31,35,43,0.04);
  margin-bottom: 8px;
}
.bday-card-meta { font-size: 11px; color: #9CA3AF; font-weight: 600; }

/* 메인 row — 모니터에서 가로 2-column (시계 + 수유 ring), 폰은 1-column */
.bday-main-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.bday-main-grid > .bday-card { margin-bottom: 0; }
@media (max-width: 720px) {
  .bday-main-grid { grid-template-columns: 1fr; }
}
/* 2026-05-18 좌측 패널(iframe) bton-active 모드는 viewport <720 라도 항상 2-col 강제 */
body.bton-active .bday-main-grid { grid-template-columns: 1.35fr 1fr !important; }

/* 수유 텀 progress ring 카드 (우측) */
.bday-feed-ring-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
  padding: 20px 22px 16px;
  display: flex; flex-direction: column;
  /* 2026-05-24: position relative — chip 의 absolute 부모 박음. 그래야 chip top:0 = 카드 모서리 (이전 wrap 모서리 박혀 안쪽 71dp 박힘). */
  position: relative;
}
/* 2026-05-24: wrap position relative — center 가 ring (wrap) 가운데 박힘 (이전 static 박혀 card 가운데 박힘 사고) */
.bday-feed-ring-wrap { position: relative !important; }
.bday-feed-ring-wrap {
  position: relative;
  width: 100%; max-width: 100%;
  aspect-ratio: 1/1;
  /* iOS Safari 14↓ fallback — 부모에 padding-top: 100% (square) */
  margin: 4px auto 8px;
}
/* 2026-05-19: 우상단 모서리 좌/우 차례 라벨 (차트 안 큰 표시 → 모서리로 이동) */
.bday-feed-side-corner {
  position: absolute;
  /* 2026-05-24: 박스 내 최상단 구석 — 카드 모서리에서 살짝 띄움. */
  top: 6px;
  right: 8px;
  z-index: 2;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%);
  color: #9A3412;
  border: 1px solid rgba(251,146,60,0.35);
  box-shadow: 0 2px 6px rgba(249,115,22,0.18);
  line-height: 1.2;
  white-space: nowrap;
}
/* 2026-08-05: 혼합 수유일 때 좌/우 뒤에 붙는 작은 보조 라벨.
   좌/우(다음 젖 차례)가 주 정보고 "혼합"은 본인이 설정한 값이라 정보량이 적다 —
   예전엔 이 "혼합"이 좌/우 자리를 통째로 차지해 정작 필요한 좌우를 가렸다(대표님 지적). */
.bday-feed-side-sub {
  margin-left: 7px;
  font-size: 0.52em;      /* 좌/우 글자의 약 절반 */
  font-weight: 700;
  opacity: 0.72;
  vertical-align: middle;
}
.bday-feed-ring-card.is-left .bday-feed-side-corner,
.bday-feed-ring-card.is-bottle .bday-feed-side-corner {
  /* 2026-05-23: 좌측 차례 / 분유 — chip 박스 내 좌상단 살짝 띄움 */
  top: 6px;
  left: 8px;
  right: auto;
}
.bday-feed-ring-card.is-left .bday-feed-side-corner {
  background: linear-gradient(135deg, #DBEAFE 0%, #93C5FD 100%);
  color: #1E40AF;
  border-color: rgba(59,130,246,0.35);
  box-shadow: 0 2px 6px rgba(59,130,246,0.18);
}
/* 2026-05-20: mix 모드 — corner "혼합" + 다채 그라데이션 */
.bday-feed-ring-card.is-mix .bday-feed-side-corner {
  background: linear-gradient(135deg, #FCD34D 0%, #F97316 50%, #93C5FD 100%);
  color: #7C2D12;
  border-color: rgba(249,115,22,0.35);
  box-shadow: 0 2px 6px rgba(249,115,22,0.18);
}
@media (min-width: 1280px) {
  body.split-on .bday-feed-ring-wrap { max-width: 230px; }
}
body.split-force.split-on .bday-feed-ring-wrap { max-width: 230px; }
.bday-feed-ring { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; margin: auto; transform: rotate(-90deg); }
.bday-ring-bg { fill: none; stroke: rgba(254,215,170,0.35); stroke-width: 22; }
.bday-ring-progress {
  fill: none; stroke-width: 22; stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease, stroke 0.3s ease;
}
.bday-feed-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.bday-feed-ring-time {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900; font-size: 68px;
  color: #1F232B; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.bday-feed-ring-sub {
  font-size: 22px; font-weight: 700;
  color: #B45309; margin-top: 8px;
  letter-spacing: -0.01em;
}
/* ===== 2026-07-23: V2 수유링 유동 사이징 (container-query) =====
   링 숫자/서브를 링 컨테이너 폭 비례(cqw)로 → 작은 화면에서 링이 줄면 숫자도 같이 줄어 원(동그라미)을
   절대 벗어나지 않음. clamp 최대값 = 기존 데스크톱 크기라 큰 화면(미니PC 1920)은 100% 무변화.
   bton-active(V2/키오스크)에만 적용 → 모바일 레이아웃 무영향. 1024/1280/1920 실측 검증. */
body.bton-active .bday-feed-ring-wrap { container-type: inline-size; }
body.bton-active .bday-feed-ring-time { font-size: clamp(20px, 19cqw, 68px) !important; }
body.bton-active .bday-feed-ring-sub { font-size: clamp(10px, 6.5cqw, 22px) !important; }
/* 2026-08-05: '다음 젖 차례(왼쪽/오른쪽)'는 이 카드에서 제일 중요한 정보인데 카드 안에서 제일 작은
   글씨였다(대표님 지적: "왼쪽 오른쪽 표시가 왜 이렇게 작아졌어, 박스 자체가").
   원인은 7/23 #154(v2 온습도 추가) 때 들어온 이 blanket 축소 규칙 — v2 iframe 은 body 에
   bton-active 는 있는데 kiosk-dashboard 가 없어서, 24px 로 되돌리는 규칙(위 2970행)이 안 먹고
   이 clamp 가 이겼다. 실측(미니PC, 폭 959px): 1.5vw = 14.4px 로 카드 최소 글씨.
   → 2~3m 거리에서도 좌/우가 바로 읽히는 크기로 올린다(실측 25px). */
body.bton-active .bday-feed-side-corner { font-size: clamp(18px, 2.6vw, 30px) !important; padding: 6px 16px !important; }
/* 큰 좌/우 차례 카드 — 2~3m 가독 */
.bday-feed-next-big {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFEDD5 0%, #FDBA74 100%);
  border-radius: 16px;
  margin: 4px 0 10px;
  border: 1px solid rgba(251,146,60,0.30);
  box-shadow: 0 2px 8px rgba(249,115,22,0.12);
}
.bday-feed-next-arrow {
  font-size: 54px; font-weight: 900; line-height: 1;
  color: #9A3412;
  flex-shrink: 0;
}
.bday-feed-next-side {
  font-size: 30px; font-weight: 900; color: #1F232B;
  letter-spacing: -0.02em;
  line-height: 1.15;
  flex: 1;
}
/* 좌측 차례면 파란 톤 + ← */
.bday-feed-ring-card.is-left .bday-feed-next-big {
  background: linear-gradient(135deg, #DBEAFE 0%, #93C5FD 100%);
  border-color: rgba(59,130,246,0.30);
  box-shadow: 0 2px 8px rgba(59,130,246,0.12);
}
.bday-feed-ring-card.is-left .bday-feed-next-arrow { color: #1E40AF; }

.bday-feed-ring-meta {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255,237,213,0.4);
  border-radius: 12px;
  margin-top: auto;
}
/* 2026-05-20: 텍스트 가독성 강화 — 직전 라벨 작게(회색) + value 큰 폰트로 hierarchy */
.bday-feed-meta-label {
  font-size: 12px; font-weight: 600; color: #6B7280;
  letter-spacing: 0; text-transform: none;
  flex-shrink: 0;
}
.bday-feed-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 17px;
}
.bday-feed-meta-value { color: #1F232B; flex: 1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bday-feed-meta-value b { color: #1F232B; font-weight: 900; }
/* 2026-05-20: 2줄 hierarchy — 핵심(좌측·5분 전) 큰 / 보조(시각·ml) 작게 */
.bday-feed-meta-main { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.bday-feed-meta-sub  { font-size: 12px; font-weight: 500; color: #6B7280; line-height: 1.3; }
body.bton-active .bday-feed-meta-main { font-size: 26px; }
body.bton-active .bday-feed-meta-sub  { font-size: 16px; }
/* 모니터/태블릿 (iframe bton-active) — 멀리서 가독 더 큰 사이즈 */
body.bton-active .bday-feed-meta-label { font-size: 16px; }
body.bton-active .bday-feed-meta-row { font-size: 24px; }
body.bton-active .bday-feed-meta-value { font-size: 24px; }

/* 24h 시계형 도넛 메인 카드 (패턴 분석 일과표 톤 차용) */
.bday-clock-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EE 100%);
  padding: 14px 16px 14px;
}
/* 헤더 row — 라벨 좌, 범례 chip 우 (도넛 영역 최대 확보) */
.bday-card-head-compact {
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}
.bday-clock-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-left: auto;
}
.bday-clock-chip {
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(243,244,246,0.7);
  border: 1px solid rgba(0,0,0,0.04);
  color: #4B5563;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s, transform 0.1s;
  user-select: none;
}
.bday-clock-chip:hover { transform: translateY(-1px); }
.bday-clock-chip:active { transform: scale(0.96); }
.bday-clock-chip-off {
  opacity: 0.35;
  filter: grayscale(0.6);
  text-decoration: line-through;
}
.bday-clock-chip[data-cat="bottle"] { color: #B45309; background: rgba(254,243,199,0.6); }
.bday-clock-chip[data-cat="breast"] { color: #B91C1C; background: rgba(254,226,226,0.6); }
.bday-clock-chip[data-cat="pump"]     { color: #075985; background: rgba(207,232,247,0.65); }
/* 2026-06-01: 유축수유=보라 / 기저귀=초록 으로 — 일과표 광선 색(공유)과 칩 점 색 일치시킴.
   기존 유축수유 갈색·기저귀 청록은 광선이 보라·초록으로 바뀌며 어긋났었음. */
.bday-clock-chip[data-cat="pumpFeed"] { color: #6D28D9; background: rgba(237,233,254,0.7); }
.bday-clock-chip[data-cat="sleep"]    { color: #475569; background: rgba(226,232,240,0.7); }
.bday-clock-chip[data-cat="diaper"] { color: #15803D; background: rgba(220,252,231,0.6); }

/* 2026-06-02: 폰 세로 대응 — 이 대시보드는 모니터/태블릿 가로 기준이라 폰 세로에서
   ① side 알약이 제목을 덮고 ② 도넛이 화면폭만큼 커져 하단 '직전'이 잘리고 ③ 칩이 5+1 orphan.
   360/390/430 전 구간 + safe-area(내비바) 대응. 키오스크(bton-active)는 제외. */
@media (max-width: 640px) {
  body:not(.bton-active) #screen-todayDashboard main {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  /* ① side 알약 — 작게. 위치는 차례에 따라 좌/우 동적(base CSS: is-left/is-bottle=좌, 그 외=우) */
  body:not(.bton-active) .bday-feed-side-corner {
    top: 8px; font-size: 14px; font-weight: 800; padding: 4px 12px;
  }
  /* ①-2 제목을 알약 '반대쪽'으로 동적 배치 → 절대 안 겹침.
     기본(알약 우측): 제목 좌측 + 우측 여백 / is-left·is-bottle(알약 좌측): 제목 우측 + 좌측 여백 */
  body:not(.bton-active) .bday-feed-ring-card .bday-card-head {
    padding-right: 76px; padding-left: 0;
  }
  body:not(.bton-active) .bday-feed-ring-card.is-left .bday-card-head,
  body:not(.bton-active) .bday-feed-ring-card.is-bottle .bday-card-head {
    justify-content: flex-end; padding-right: 0; padding-left: 76px;
  }
  /* ② 도넛 축소 → 카드 높이 줄여 하단 메타 안 잘리게 */
  body:not(.bton-active) .bday-feed-ring-wrap { max-width: 172px; margin: 0 auto 4px; }
  body:not(.bton-active) .bday-feed-ring-time { font-size: 38px; }
  body:not(.bton-active) .bday-feed-ring-sub { font-size: 13px; margin-top: 2px; }
  body:not(.bton-active) .bday-feed-ring-card { padding: 12px 16px 10px; }
  body:not(.bton-active) .bday-feed-ring-meta { margin-top: 6px; padding: 8px 12px; }
  /* ③ 칩 — 제목 아래 전체폭 3×2 그리드로 균등 배치 (기저귀 orphan 제거) */
  body:not(.bton-active) .bday-clock-chips {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; width: 100%; margin-left: 0;
  }
  body:not(.bton-active) .bday-clock-chip {
    font-size: 11px; padding: 4px 6px; text-align: center;
  }
  body:not(.bton-active) .bday-clock-card { padding: 8px 12px; }
  /* 시계 폭 상한 — 큰 폰 일관 + Phase2 한 화면에 담기 위해 축소 */
  body:not(.bton-active) .bday-clock-wrap { max-width: 248px; }
  body:not(.bton-active) .bday-clock-center.center-lastfeed .bday-clock-center-state { font-size: 13px; }
  /* Phase 2 (2026-06-02): mini stat 박스까지 한 화면에 — 여백·그리드·mini 카드 압축 */
  body:not(.bton-active) #screen-todayDashboard main { padding-top: 8px; }
  body:not(.bton-active) .bday-main-grid { gap: 6px; margin-bottom: 6px; }
  body:not(.bton-active) .bday-mini-row { margin-top: 6px; }
  body:not(.bton-active) .bday-mini { padding: 10px; }
  body:not(.bton-active) .bday-mini-big { font-size: 30px; margin: 4px 0; }
  body:not(.bton-active) .bday-mini-sleep .bday-mini-big { font-size: 19px; }
  body:not(.bton-active) .bday-mini-sub { font-size: 11px; line-height: 1.25; }
}

/* 2026-05-19: aspect-ratio iOS Safari 14↓ fallback */
@supports not (aspect-ratio: 1/1) {
  .bday-feed-ring-wrap, .bday-clock-wrap {
    height: 0; padding-top: 100%; /* 1:1 square */
    aspect-ratio: auto;
  }
  .bday-feed-ring-wrap > *, .bday-clock-wrap > * {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  }
}

.bday-clock-wrap {
  position: relative;
  width: 100%; max-width: 100%;
  aspect-ratio: 1/1;
  /* iOS Safari 14↓ fallback — 부모에 padding-top: 100% (square) */
  margin: 6px auto 0;
}
@media (min-width: 1280px) {
  body.split-on .bday-clock-wrap { max-width: 360px; }
}
body.split-force.split-on .bday-clock-wrap { max-width: 360px; }
/* 2026-06-26: SVG 자체를 강제 정사각(aspect-ratio) — wrap이 세로로 늘어나도 원이 타원으로 안 찌그러짐 */
.bday-clock-svg { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; margin: auto; }
.bday-clock-svg .bday-clock-hours text { font-family: 'Plus Jakarta Sans', system-ui; }

.bday-clock-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 36%; aspect-ratio: 1/1;
  border-radius: 50%;
  background: white;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 6px;
  box-shadow: 0 3px 12px rgba(31,35,43,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}
.bday-clock-center-now {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; color: #9A3412;
  letter-spacing: 0.08em; text-transform: uppercase;
}
body.bton-active .bday-clock-center-now { font-size: 20px; gap: 6px; letter-spacing: 0.06em; }
/* 2026-05-18: bton-active chip 한 줄 fit (6개) — 폰트/패딩 줄여 wrap 차단 */
body.bton-active .bday-clock-chips { flex-wrap: nowrap; gap: 4px; }
body.bton-active .bday-clock-chip {
  font-size: 14px; padding: 4px 9px;
  flex-shrink: 1; min-width: 0;
  white-space: nowrap;
}
.bday-now-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.bday-now-dot.bday-now-awake  { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.bday-now-dot.bday-now-sleep  { background: #475569; box-shadow: 0 0 0 3px rgba(71,85,105,0.18); }
.bday-now-dot.bday-now-feed   { background: #E76F51; box-shadow: 0 0 0 3px rgba(231,111,81,0.18); }
.bday-clock-center-state {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900;
  font-size: 30px;
  color: #1F232B;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.bday-clock-center-elapsed {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #C2410C;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* 2026-06-02: 가운데가 '직전 수유 X시간 Y분 전' 모드일 때 — 작은 원에 한 줄로 담기게 축소 */
.bday-clock-center.center-lastfeed { padding: 4px; }
.bday-clock-center.center-lastfeed .bday-clock-center-state {
  font-size: 14px; line-height: 1.2; letter-spacing: -0.02em; margin-top: 3px; white-space: nowrap;
}
.bday-clock-center.center-lastfeed .bday-clock-center-now { letter-spacing: 0.01em; }
/* 큐#53: '직전 수유' 모드에서 '다음 ~M 후' 보조줄 — 작은 원에 맞게 축소 (전엔 숨김이라 크기 무관했음) */
.bday-clock-center.center-lastfeed .bday-clock-center-elapsed {
  font-size: 11px; font-weight: 700; color: #6B7280; margin-top: 2px; white-space: nowrap;
}
body.bton-active .bday-clock-center.center-lastfeed .bday-clock-center-elapsed { font-size: 15px; }

/* mini stat row (가로 3개) */
.bday-mini-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

/* 수면 hub — sub-tab으로 5종 정보 한 카드 안 전환 */
.bday-sleep-hub {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F5 100%);
}
.bday-sleep-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.bday-sleep-tab {
  border: 0;
  background: rgba(243,244,246,0.7);
  font-size: 12px;
  font-weight: 700;
  color: #6B7280;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.bday-sleep-tab.active {
  background: #1F232B;
  color: white;
  box-shadow: 0 1px 4px rgba(31,35,43,0.15);
}
.bday-sleep-tab:not(.active):hover { background: rgba(31,35,43,0.08); color: #1F232B; }
.bday-sleep-panel { min-height: 88px; padding-top: 4px; }
.bday-sleep-panel.hidden { display: none; }
.bday-sleep-panel-meta {
  font-size: 12px; color: #6B7280; font-weight: 600;
  margin-top: 10px; line-height: 1.5;
}
.bday-sleep-panel-meta b { color: #1F232B; font-weight: 800; }
.bday-sleep-panel-meta #bday-sleep-gauge-status,
.bday-sleep-panel-meta #bday-sleep-longest-best {
  font-weight: 800; color: #1F232B;
}
.bday-heatmap-svg {
  width: 100%; height: auto; display: block;
}
.bday-sleep-gauge-value {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900;
  font-size: 32px;
  color: #1F232B;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 12px;
}
.bday-sleep-gauge-bar {
  position: relative;
  height: 14px;
  background: rgba(243,244,246,0.7);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.04);
  overflow: visible;
}
.bday-sleep-gauge-zone-rec {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(132,194,168,0.5), rgba(76,123,98,0.7));
  border-radius: 999px;
}
.bday-sleep-gauge-marker {
  position: absolute; top: -6px; bottom: -6px;
  width: 4px;
  background: #1F232B;
  border-radius: 999px;
  transform: translateX(-2px);
  box-shadow: 0 0 0 3px white, 0 2px 6px rgba(0,0,0,0.15);
}
.bday-sleep-gauge-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #9CA3AF; font-weight: 600;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.bday-sleep-gauge-msg {
  font-size: 12px;
  color: #6B7280;
  font-weight: 600;
  margin-top: 8px;
}

.bday-sleep-longest-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF5EE 100%);
}

/* 수면 mini card (한 줄 가로 24h) */
.bday-sleep-card-sm {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  padding: 18px 22px 16px;
}
.bday-sleep-card-sm .bday-sleep-timeline { margin-top: 10px; height: 60px; }
.bday-sleep-card-sm .bday-sleep-bars { top: 0; bottom: 18px; }
.bday-sleep-card-sm .bday-sleep-ticks { font-size: 10px; }
.bday-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bday-card-head-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bday-card-label {
  font-size: 15px; font-weight: 800; color: #1F232B; letter-spacing: -0.01em;
}
body.bton-active .bday-card-label { font-size: 20px; }
.bday-card-chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  letter-spacing: -0.005em;
}
.bday-chip-warm { background: #FFEDD5; color: #9A3412; }
.bday-chip-mint { background: #D1FAE5; color: #047857; }
.bday-chip-soft { background: #F3F4F6; color: #6B7280; }
.bday-card-legend { display: flex; gap: 12px; font-size: 11px; color: #6B7280; }
.bday-leg { display: inline-flex; align-items: center; gap: 5px; }
.bday-leg::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bday-leg-feed::before { background: #F4A261; }
.bday-leg-pred::before { background: transparent; border: 1.5px dashed #F4A261; }

.bday-card-bigrow { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 14px; }
.bday-card-big {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900;
  font-size: 48px;
  color: #1F232B;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.bday-card-big-unit {
  font-size: 18px; font-weight: 700; color: #6B7280; margin-left: 4px;
}
.bday-card-bigsub { font-size: 13px; color: #6B7280; font-weight: 600; }

.bday-chart-wrap { position: relative; height: 200px; width: 100%; }
.bday-chart-wrap-sm { height: 130px; }
.bday-chart-canvas { width: 100% !important; height: 100% !important; display: block; }

/* mockup placeholder — 캔버스 위에 dummy bar 표시 (Chart.js 없을 때) */
.bday-chart-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(to right,
    transparent 0%, transparent 4%,
    #F4A261 4%, #F4A261 7%, transparent 7%, transparent 12%,
    #F4A261 12%, #F4A261 15%, transparent 15%, transparent 20%,
    #F4A261 20%, #F4A261 23%, transparent 23%, transparent 28%,
    #F4A261 28%, #F4A261 31%, transparent 31%, transparent 36%,
    #F4A261 36%, #F4A261 39%, transparent 39%, transparent 44%,
    #F4A261 44%, #F4A261 47%, transparent 47%, transparent 52%,
    #F4A261 52%, #F4A261 55%, transparent 55%, transparent 60%,
    #F4A261 60%, #F4A261 63%, transparent 63%, transparent 68%,
    #F4A261 68%, #F4A261 71%, transparent 71%, transparent 76%,
    #F4A261 76%, #F4A261 79%, transparent 79%, transparent 100%);
  background-size: 100% 60%;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0.85;
  pointer-events: none;
}

.bday-mid-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 14px;
  margin-bottom: 14px;
}
.bday-mini-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.bday-mini {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 1px 4px rgba(31,35,43,0.04);
  position: relative;
  min-height: 76px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
body.bton-active .bday-mini {
  border-radius: 22px;
  padding: 16px 18px;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(31,35,43,0.05);
  min-height: 128px;
}
/* 2026-05-20: 평상시도 베이스 색 (모바일 메인 stat-card 와 통일) */
/* 2026-05-28: color-mix 제거 — iOS Safari 16.3 이하 미지원 → 와이프 아이폰 깜빡임 X 사고. 미리 계산된 RGB 사용. */
.bday-mini-feed   { background: #F9D0B0; }  /* feed accent 50% + white 50% */
.bday-mini-sleep  { background: #C2E2D3; }  /* sleep accent 50% + white 50% */
.bday-mini-diaper { background: #FDDF8F; }  /* diaper accent 50% + white 50% */
/* 2026-05-20 due alert — 평균 텀 도달 시 glow (1초 주기). 카테고리별 literal 색상.
   2026-05-31: iOS(WebKit) 발광 fix — keyframe 안 var() 는 @property 없이 Safari 가 보간 거부 →
   카테고리별 literal 색상 keyframe 으로 분리 (statCardBlink* 와 동일 이유). */
.bday-mini-feed.bday-mini-due   { animation: bdayBoxBlinkFeed 1s ease-in-out infinite; }
.bday-mini-sleep.bday-mini-due  { animation: bdayBoxBlinkSleep 1s ease-in-out infinite; }
.bday-mini-diaper.bday-mini-due { animation: bdayBoxBlinkDiaper 1s ease-in-out infinite; }
@keyframes bdayBoxBlinkFeed {
  0%, 100% { background-color: #FCE3D0; box-shadow: 0 0 6px 2px #F4A261, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #F7B989; box-shadow: 0 0 18px 6px #F4A261, 0 2px 10px rgba(31,35,43,0.05); }
}
@keyframes bdayBoxBlinkSleep {
  0%, 100% { background-color: #DAEDE5; box-shadow: 0 0 6px 2px #86C5A8, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #A4D4BE; box-shadow: 0 0 18px 6px #86C5A8, 0 2px 10px rgba(31,35,43,0.05); }
}
@keyframes bdayBoxBlinkDiaper {
  0%, 100% { background-color: #FDECBD; box-shadow: 0 0 6px 2px #FBBF24, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #FCCF5B; box-shadow: 0 0 18px 6px #FBBF24, 0 2px 10px rgba(31,35,43,0.05); }
}
/* 2026-05-31: iOS(WebKit) 발광 안 됨 fix. 기존엔 한 keyframe 이 var(--blink-low/high) +
   !important 로 색을 지정했는데, Safari/WebKit 는 (a) keyframe 안 !important 는 명세대로 선언
   전체를 폐기하고 (b) var() 커스텀 속성 값은 @property 없이는 보간을 거부한다 → 애니메이션이
   아무것도 안 함(발광 0). Chromium 은 관대해서 동작 → 안드로이드만 보이던 사고.
   → data-action 별 literal 색상 keyframe 으로 분리(var/!important 제거). 애니메이션은 인라인
   background(normal author)보다 cascade 상위라 !important 없이도 덮는다. WebKit+Chromium 검증 완료. */
.stat-card[data-action="feeding"].stat-card-due { animation: statCardBlinkFeeding 1s ease-in-out infinite; }
.stat-card[data-action="sleep"].stat-card-due   { animation: statCardBlinkSleep 1s ease-in-out infinite; }
.stat-card[data-action="diaper"].stat-card-due   { animation: statCardBlinkDiaper 1s ease-in-out infinite; }
@keyframes statCardBlinkFeeding {
  0%, 100% { background-color: #FBDABF; box-shadow: 0 0 6px 2px #F4A261, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #F5AB71; box-shadow: 0 0 18px 6px #F4A261, 0 2px 10px rgba(31,35,43,0.05); }
}
@keyframes statCardBlinkSleep {
  0%, 100% { background-color: #CEE7DC; box-shadow: 0 0 6px 2px #86C5A8, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #92CAB1; box-shadow: 0 0 18px 6px #86C5A8, 0 2px 10px rgba(31,35,43,0.05); }
}
@keyframes statCardBlinkDiaper {
  0%, 100% { background-color: #FDE5A7; box-shadow: 0 0 6px 2px #FBBF24, 0 2px 10px rgba(31,35,43,0.05); }
  50%      { background-color: #FBC53A; box-shadow: 0 0 18px 6px #FBBF24, 0 2px 10px rgba(31,35,43,0.05); }
}

/* 기저귀 경고 — 3h+ 노랑 / 5h+ 빨강 (pulse animation) */
.bday-mini.bday-mini-warn {
  background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
  border-top-color: #F59E0B;
  border-top-width: 5px;
  animation: bday-mini-pulse-warn 2.4s ease-in-out infinite;
}
.bday-mini.bday-mini-alert {
  background: linear-gradient(180deg, #FEE2E2 0%, #FCA5A5 100%);
  border-top-color: #DC2626;
  border-top-width: 6px;
  animation: bday-mini-pulse-alert 1.2s ease-in-out infinite;
}
.bday-mini.bday-mini-warn .bday-mini-sub { color: #92400E; font-weight: 800; }
.bday-mini.bday-mini-alert .bday-mini-sub { color: #991B1B; font-weight: 900; }
@keyframes bday-mini-pulse-warn {
  0%, 100% { box-shadow: 0 1px 4px rgba(245,158,11,0.2); }
  50%      { box-shadow: 0 4px 18px rgba(245,158,11,0.55); }
}
@keyframes bday-mini-pulse-alert {
  0%, 100% { box-shadow: 0 1px 4px rgba(220,38,38,0.25); }
  50%      { box-shadow: 0 6px 24px rgba(220,38,38,0.65); }
}
.bday-mini-cry    { border-top-color: #FFB78A; }
.bday-mini-head { display: flex; align-items: center; gap: 8px; }
.bday-mini-icon { width: 28px; height: 28px; flex-shrink: 0; }
body.bton-active .bday-mini-head { justify-content: space-between; }
body.bton-active .bday-mini-icon { width: 48px; height: 48px; }
.bday-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bday-dot-feed   { background: #F4A261; }
.bday-dot-sleep  { background: #86C5A8; }
.bday-dot-diaper { background: #FBBF24; }
.bday-dot-cry    { background: #FFB78A; }
.bday-mini-label { font-size: 12px; font-weight: 700; color: #4B5563; }
.bday-mini-big {
  font-family: 'Plus Jakarta Sans', 'Pretendard Variable', system-ui, sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #1F232B;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 6px;
}
.bday-mini-big span { font-size: 14px; font-weight: 700; color: #6B7280; margin-left: 2px; }
/* 2026-06-02: 수면 mini stat '6h 32m' 두 줄 → 한 줄 (글씨 축소 + nowrap). 수유/기저귀는 짧아 그대로 큼 */
.bday-mini-sleep .bday-mini-big { font-size: 22px; white-space: nowrap; }
.bday-mini-sleep .bday-mini-big span { font-size: 11px; margin-left: 1px; }
.bday-mini-sub { font-size: 13px; color: #4B5563; font-weight: 600; line-height: 1.35; }
.bday-mini-label { font-size: 13px; font-weight: 800; color: #1F232B; }
body.bton-active .bday-mini-big span { font-size: 20px; margin-left: 3px; }
body.bton-active .bday-mini-sub { font-size: 20px; }
body.bton-active .bday-mini-label { font-size: 20px; }
.bday-mini-spark { width: 70px; height: 22px; position: absolute; right: 14px; bottom: 14px; opacity: 0.8; }

/* sleep timeline 카드 */
.bday-sleep-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  border-radius: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 2px 8px rgba(31,35,43,0.04);
  display: flex;
  flex-direction: column;
}
.bday-sleep-timeline { position: relative; margin: 12px 0 14px; height: 88px; }
.bday-sleep-axis {
  position: absolute; top: 0; left: 0; right: 0; height: 20px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px;
}
.bday-sleep-band {
  font-size: 10px; font-weight: 700; color: #6B7280; text-align: center;
  padding: 3px 0;
  background: rgba(243,244,246,0.7);
  border-radius: 6px;
}
.bday-sleep-band-night { background: rgba(199,210,254,0.4); color: #3730A3; }
.bday-sleep-band-am    { background: rgba(254,243,199,0.5); color: #92400E; }
.bday-sleep-band-pm    { background: rgba(254,215,170,0.5); color: #9A3412; }
.bday-sleep-bars {
  position: absolute; top: 26px; left: 0; right: 0; bottom: 18px;
}
.bday-sleep-bar {
  position: absolute; bottom: 0;
  background: linear-gradient(180deg, #86C5A8 0%, #4C7B62 100%);
  border-radius: 4px;
  min-width: 4px;
}
.bday-sleep-now {
  position: absolute; top: -4px; bottom: -2px;
  width: 2px; background: #DC2626;
}
.bday-sleep-ticks {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-size: 9.5px; color: #9CA3AF; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bday-sleep-meta {
  display: flex; gap: 12px;
  font-size: 11.5px; color: #6B7280;
  flex-wrap: wrap;
}
.bday-sleep-meta b { color: #1F232B; font-weight: 800; }
.bday-sleep-meta-r { margin-left: auto; }

/* 모니터 좌측 panel iframe (body.bton-active) — 한 단계 키움 */
body.bton-active .bday-card-big        { font-size: 56px !important; }
body.bton-active .bday-card-big-unit   { font-size: 20px !important; }
body.bton-active .bday-card-label      { font-size: 20px !important; }
body.bton-active .bday-mini-big        { font-size: 38px !important; }
body.bton-active .bday-mini-label      { font-size: 20px !important; }
body.bton-active .bday-mini-sub        { font-size: 20px !important; }
body.bton-active .bday-chart-wrap      { height: 240px; }
body.bton-active .bday-chart-wrap-sm   { height: 150px; }
body.bton-active .bday-sleep-timeline  { height: 100px; }

/* ============================================================
   레거시 today-* 클래스 (메시지카드+3stat+활동 mockup) — 더 이상 사용 안 함
   B Heavy data dashboard 로 교체됨 (위쪽 bday-* 클래스)
   ============================================================ */
.today-header { background: transparent; }
.today-meta-chip {
  font-size: 12px;
  font-weight: 600;
  color: #9A3412;
  background: rgba(254,215,170,0.55);
  border-radius: 999px;
  padding: 4px 10px;
}

.today-msg-card {
  background: linear-gradient(135deg, #FFEDD5 0%, #FED7AA 60%, #FDBA74 100%);
  border-radius: 22px;
  padding: 22px 22px;
  margin-bottom: 14px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: 0 6px 20px rgba(249,115,22,0.14);
  border: 1px solid rgba(251,146,60,0.18);
}
.today-msg-icon {
  font-size: 44px;
  line-height: 1;
  flex-shrink: 0;
}
.today-msg-body { flex: 1; min-width: 0; }
.today-msg-title {
  font-size: 21px;
  font-weight: 800;
  color: #1F2937;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.today-msg-text {
  font-size: 13px;
  color: #7C2D12;
  opacity: 0.85;
  line-height: 1.55;
}

.today-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.today-stat {
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 116px;
  box-shadow: 0 2px 8px rgba(31,35,43,0.05);
  border: 1px solid rgba(0,0,0,0.04);
}
.today-stat-feed       { background: linear-gradient(160deg, #FFF7ED 0%, #FFEDD5 100%); }
.today-stat-feed-last  { background: linear-gradient(160deg, #EFF6FF 0%, #DBEAFE 100%); }
.today-stat-temp       { background: linear-gradient(160deg, #F0FDF4 0%, #D1FAE5 100%); }
.today-stat-label {
  font-size: 11px;
  font-weight: 700;
  color: #6B7280;
  letter-spacing: 0.04em;
}
.today-stat-feed      .today-stat-label { color: #9A3412; }
.today-stat-feed-last .today-stat-label { color: #1E40AF; }
.today-stat-temp      .today-stat-label { color: #166534; }
.today-stat-value {
  font-size: 26px;
  font-weight: 900;
  color: #1F2937;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.today-stat-sub {
  font-size: 11.5px;
  color: #6B7280;
  margin-top: auto;
}

.today-activity-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%);
  border-radius: 22px;
  padding: 20px 22px 18px;
  border: 1px solid rgba(249,115,22,0.10);
  box-shadow: 0 2px 8px rgba(31,35,43,0.04);
  margin-bottom: 14px;
}
.today-activity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.today-activity-icon { font-size: 20px; line-height: 1; }
.today-activity-title {
  font-size: 15px;
  font-weight: 800;
  color: #1F2937;
  letter-spacing: -0.01em;
}
.today-activity-meta {
  margin-left: auto;
  font-size: 11px;
  color: #9CA3AF;
  font-weight: 600;
}
.today-activity-text {
  font-size: 13.5px;
  color: #4B5563;
  line-height: 1.6;
  margin-bottom: 14px;
}
.today-activity-text b { color: #C2410C; font-weight: 800; }
.today-chart {
  height: 90px;
  width: 100%;
  background: rgba(254,243,199,0.35);
  border-radius: 12px;
  padding: 6px 8px;
}
.today-chart-svg { width: 100%; height: 100%; display: block; }

/* B 톤 (iframe 좌측 패널) — 폰트 한 단계 키움 */
body.bton-active .today-msg-title { font-size: 27px !important; }
body.bton-active .today-msg-text  { font-size: 16px !important; }
body.bton-active .today-msg-icon  { font-size: 54px; }
body.bton-active .today-stat-value { font-size: 36px !important; }
body.bton-active .today-stat-label { font-size: 14px !important; }
body.bton-active .today-stat-sub   { font-size: 13px !important; }
body.bton-active .today-stat       { min-height: 140px; padding: 20px 18px; }
body.bton-active .today-activity-title { font-size: 19px !important; }
body.bton-active .today-activity-text  { font-size: 16px !important; }
body.bton-active .today-chart { height: 120px; }
body.bton-active .today-meta-chip { font-size: 15px !important; padding: 6px 14px; }

/* ════════════════════════════════════════════════════
   예방접종 — 2026-05-20 5단계 status + 그룹화 + 한눈 강조
   ════════════════════════════════════════════════════ */
.vax-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vax-summary-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.vax-summary-chip.vax-overdue { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
.vax-summary-chip.vax-due     { background: #FED7AA; color: #9A3412; border: 1px solid #FB923C; }
.vax-summary-chip.vax-upcoming{ background: #FEF3C7; color: #854D0E; border: 1px solid #FCD34D; }
.vax-summary-chip.vax-done    { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }

/* 그룹 헤더 */
.vax-group { margin-bottom: 14px; }
.vax-group-head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 14px; border-radius: 12px; border: 0;
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  margin-bottom: 8px; cursor: pointer;
}
.vax-group-overdue  .vax-group-head { background: #FEE2E2; color: #991B1B; }
.vax-group-due      .vax-group-head { background: #FED7AA; color: #9A3412; }
.vax-group-upcoming .vax-group-head { background: #FEF3C7; color: #854D0E; }
.vax-group-pending  .vax-group-head { background: #F3F4F6; color: #4B5563; }
.vax-group-done     .vax-group-head { background: #D1FAE5; color: #065F46; }
.vax-group-toggle { transition: transform 0.2s; font-size: 16px; }
.vax-group-collapsed .vax-group-body { display: none; }
.vax-group-collapsed .vax-group-toggle { transform: rotate(-90deg); }

/* 백신 row — 상태별 좌측 컬러 bar + 배경 톤 */
.vax-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border-radius: 14px;
  background: white; border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 8px;
  position: relative; overflow: hidden;
}
.vax-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: #D1D5DB;
}
.vax-row-overdue  { background: #FEF2F2; border-color: #FECACA; }
.vax-row-overdue::before  { background: #DC2626; }
.vax-row-due      { background: #FFF7ED; border-color: #FED7AA; }
.vax-row-due::before      { background: #F97316; animation: vax-pulse 1.8s ease-in-out infinite; }
.vax-row-upcoming { background: #FFFBEB; border-color: #FDE68A; }
.vax-row-upcoming::before { background: #F59E0B; }
.vax-row-pending  { background: white; }
.vax-row-pending::before  { background: #D1D5DB; }
.vax-row-done     { background: #F0FDF4; border-color: #BBF7D0; opacity: 0.85; }
.vax-row-done::before     { background: #10B981; }

@keyframes vax-pulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 0.45; }
}

.vax-row-status { font-size: 22px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.vax-row-body { flex: 1; min-width: 0; }
.vax-row-name { font-size: 15px; font-weight: 800; color: #1F2937; margin-bottom: 2px; }
.vax-row-meta { font-size: 12px; color: #6B7280; margin-bottom: 8px; line-height: 1.4; }

/* dose chip — status 별 색 */
.vax-dose-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vax-dose-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
  background: white; color: #6B7280; border-color: #E5E7EB;
}
.vax-dose-chip.vax-overdue  { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.vax-dose-chip.vax-due      { background: #FED7AA; color: #9A3412; border-color: #FB923C; }
.vax-dose-chip.vax-upcoming { background: #FEF3C7; color: #854D0E; border-color: #FCD34D; }
.vax-dose-chip.vax-pending  { background: #F9FAFB; color: #6B7280; border-color: #E5E7EB; }
.vax-dose-chip.vax-done     { background: #D1FAE5; color: #065F46; border-color: #6EE7B7; }
.vax-dose-chip:active { transform: scale(0.97); }

/* 2026-05-20: 성장 기록 row — 클릭 hint + 수정 emoji */
.growth-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.02); border: 1px solid rgba(0,0,0,0.05);
  cursor: pointer; transition: background 0.15s, transform 0.1s;
  margin-bottom: 6px;
}
.growth-row:hover { background: rgba(0,0,0,0.05); }
.growth-row:active { transform: scale(0.99); }
.growth-row-date { font-size: 12px; color: #6B7280; font-weight: 600; min-width: 80px; flex-shrink: 0; }
.growth-row-vals { font-size: 13px; color: #1F2937; flex: 1; font-weight: 500; }
.growth-row-edit { font-size: 14px; color: #9CA3AF; flex-shrink: 0; opacity: 0.7; }

/* 2026-05-20: contextual 추천 카드 (todayDashboard 끝 — '이맘때 추천') */
.bday-recommend-slot { margin-top: 12px; }
.rec-card {
  border-radius: 16px; padding: 14px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1px solid rgba(251,191,36,0.35);
  box-shadow: 0 2px 8px rgba(251,191,36,0.12);
}
.rec-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rec-card-label { font-size: 13px; font-weight: 800; color: #854D0E; letter-spacing: -0.01em; }
.rec-card-dismiss {
  background: transparent; border: 0; color: #9CA3AF; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.rec-card-dismiss:active { background: rgba(0,0,0,0.05); }
.rec-card-body {
  display: flex; gap: 12px; align-items: center;
  padding: 10px; background: white; border-radius: 12px;
  text-decoration: none; color: inherit;
}
.rec-card-body:active { transform: scale(0.99); }
.rec-card-img, .rec-card-img-placeholder {
  width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
  object-fit: cover; background: #FEF3C7;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.rec-card-text { flex: 1; min-width: 0; }
.rec-card-name { font-size: 14px; font-weight: 800; color: #1F2937; line-height: 1.3; }
.rec-card-headline { font-size: 12px; color: #6B7280; margin-top: 2px; line-height: 1.4; }
.rec-card-meta { font-size: 11px; color: #9A3412; margin-top: 4px; font-weight: 600; }
.rec-card-cta { font-size: 12px; color: #C2410C; font-weight: 700; flex-shrink: 0; }
.rec-card-foot { font-size: 10px; color: #9CA3AF; margin-top: 8px; text-align: center; line-height: 1.3; }

/* 2026-05-21: Stage 5 — 데일리 퀴즈 결과 끝 쿠팡 추천 카드 (종료 모달 톤 + 단일 상품 + 마케팅 카피) */
.qcp-rec-card {
  margin-top: 16px;
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFF3C4 100%);
  border: 1px solid rgba(251,191,36,0.35);
  box-shadow: 0 4px 14px rgba(251,191,36,0.15);
}
.qcp-rec-link {
  display: flex; gap: 14px; align-items: center;
  padding: 12px; background: white; border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform 0.15s ease;
}
.qcp-rec-link:active { transform: scale(0.985); }
.qcp-rec-img {
  width: 84px; height: 84px; border-radius: 12px;
  object-fit: cover; flex-shrink: 0;
  background: #FEF3C7;
}
.qcp-rec-body { flex: 1; min-width: 0; }
.qcp-rec-headline {
  font-size: 14px; font-weight: 800; color: #C2410C;
  line-height: 1.3; margin-bottom: 4px;
  word-break: keep-all;
}
.qcp-rec-name {
  font-size: 13px; font-weight: 700; color: #1F2937;
  line-height: 1.3; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.qcp-rec-meta {
  font-size: 12px; color: #6B7280;
  line-height: 1.4; margin-bottom: 8px;
  word-break: keep-all;
}
.qcp-rec-cta {
  font-size: 12px; font-weight: 800; color: #EA580C;
}
.qcp-rec-disclosure {
  font-size: 10px; color: #92400E; opacity: 0.7;
  margin-top: 10px; text-align: center; line-height: 1.4;
}

/* 2026-05-20: 앱 종료 모달 + 이맘때 추천 — 카카오 레퍼런스 처럼 임팩트 큰 디자인 */
.exit-modal-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: exitFadeIn 0.18s ease-out;
}
@keyframes exitFadeIn { from { opacity: 0; } to { opacity: 1; } }
.exit-modal {
  background: white; border-radius: 28px;
  width: 100%; max-width: 460px;
  padding: 28px 24px 0;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.exit-modal-title {
  font-size: 20px; font-weight: 900; color: #1F232B;
  text-align: center; margin-bottom: 22px; letter-spacing: -0.02em;
}
.exit-ad-body {
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  padding: 28px 24px; background: linear-gradient(180deg, #FFF7ED 0%, #FED7AA 100%);
  border-radius: 20px; border: 1px solid rgba(251,146,60,0.30);
  text-decoration: none; color: inherit; cursor: pointer;
  text-align: center;
}
.exit-ad-body:active { transform: scale(0.99); }
.exit-ad-img {
  width: 120px; height: 120px; border-radius: 18px; flex-shrink: 0;
  object-fit: contain; background: white; display: block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.exit-ad-img-placeholder {
  width: 120px; height: 120px; border-radius: 18px; flex-shrink: 0;
  background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center; font-size: 72px;
}
.exit-ad-text { flex: 1; min-width: 0; }
.exit-ad-name { font-size: 22px; font-weight: 900; color: #1F232B; line-height: 1.25; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.exit-ad-headline { font-size: 15px; color: #6B7280; margin-top: 6px; line-height: 1.5; font-weight: 600; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.exit-ad-meta { font-size: 14px; color: #9A3412; margin-top: 8px; font-weight: 700; word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.exit-ad-foot { font-size: 11px; color: #9CA3AF; text-align: center; margin-top: 12px; line-height: 1.4; }
.exit-modal-actions { display: flex; gap: 0; margin-top: 20px; margin-bottom: 0; margin-left: -24px; margin-right: -24px; }
.exit-modal-btn {
  flex: 1; padding: 18px 0; border: 0; border-radius: 0;
  font-size: 16px; font-weight: 800; cursor: pointer;
  letter-spacing: -0.01em;
}
.exit-modal-no  { background: #9CA3AF; color: white; }
.exit-modal-yes { background: #10B981; color: white; }
.exit-modal-btn:active { opacity: 0.85; }

/* 2026-05-20: 연령 게이트 (Play Store 가족 정책 필수) — 첫 진입 시 1회 */
.age-gate-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: max(env(safe-area-inset-top),24px) 24px max(env(safe-area-inset-bottom),24px);
}
.age-gate-modal {
  margin: auto 0;
  background: white; border-radius: 20px; padding: 24px 20px 18px;
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px;
}
.age-gate-title { font-size: 17px; font-weight: 800; text-align: center; color: #1F232B; }
.age-gate-desc { font-size: 13px; color: #6B7280; text-align: center; line-height: 1.5; }
.age-gate-input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid #D1D5DB; font-size: 15px; }
.age-gate-actions { display: flex; gap: 8px; }
.age-gate-btn-primary { flex: 1; padding: 12px; border: 0; border-radius: 12px; background: #10B981; color: white; font-size: 14px; font-weight: 700; cursor: pointer; }
.age-gate-foot { font-size: 12px; color: #6B7280; text-align: center; line-height: 1.5; }

/* 2026-05-20: 수유 카드 4 type 멀티라인 — 자체 PNG 아이콘 (이모지 X) */
.bday-mini-feed-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; line-height: 1.4; color: #1F232B; font-weight: 700;
  margin-top: 2px;
}
.bday-mini-feed-line:first-child { margin-top: 0; }
.bday-mini-feed-icon-png { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
body.bton-active .bday-mini-feed-line { font-size: 14px; }
body.bton-active .bday-mini-feed-icon-png { width: 24px; height: 24px; }

/* 2026-05-20: feed-lines-mode = 큰 숫자 영역 자체를 lines 로 사용.
 *   container queries 로 박스 width 기반 자동 font 최적화 (폰/태블릿/모니터 환경 무관).
 *   `cqi` = container inline (width) 1%. clamp 로 min/max 안전망.
 *   대시보드 mini-stat (.bday-mini) + 모바일 메인 stat-card (.stat-card) 양쪽 동일. */
.bday-mini, .stat-card { container-type: inline-size; }
.feed-lines-mode {
  font-family: inherit; font-weight: 700; letter-spacing: 0;
  margin: 4px 0 6px;
}
.feed-lines-mode .bday-mini-feed-line {
  /* 2026-05-20: 다른 stat 박스 (수면/기저귀의 큰 숫자) 와 글씨체·색상 통일 — 부모(stat-card big) 상속 */
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  white-space: nowrap; /* 줄바꿈 X — JS auto-fit 이 1줄 안 fit 보장 */
  overflow: hidden;
}
.feed-lines-mode .bday-mini-feed-line span {
  white-space: nowrap;
  text-overflow: clip;
  min-width: 0;
  flex: 0 1 auto;
}
/* lines 수마다 px 비례 (container width 기반) — 박스 작을수록 작게, 클수록 시원하게 */
.feed-lines-mode.feed-lines-1 .bday-mini-feed-line { font-size: clamp(15px, 10cqi, 32px); }
.feed-lines-mode.feed-lines-2 .bday-mini-feed-line { font-size: clamp(12px, 7cqi, 24px); }
.feed-lines-mode.feed-lines-3 .bday-mini-feed-line { font-size: clamp(10px, 5cqi, 18px); line-height: 1.35; }
.feed-lines-mode.feed-lines-4 .bday-mini-feed-line { font-size: clamp(9px, 4cqi, 15px); line-height: 1.3; margin-top: 1px; }
/* 아이콘도 lines·width 비례 */
.feed-lines-mode.feed-lines-1 .bday-mini-feed-icon-png { width: clamp(20px, 12cqi, 40px); height: clamp(20px, 12cqi, 40px); }
.feed-lines-mode.feed-lines-2 .bday-mini-feed-icon-png { width: clamp(16px, 9cqi, 30px); height: clamp(16px, 9cqi, 30px); }
.feed-lines-mode.feed-lines-3 .bday-mini-feed-icon-png { width: clamp(14px, 7cqi, 24px); height: clamp(14px, 7cqi, 24px); }
.feed-lines-mode.feed-lines-4 .bday-mini-feed-icon-png { width: clamp(12px, 5.5cqi, 20px); height: clamp(12px, 5.5cqi, 20px); }

/* 폰 stat 카드 1줄 — 자체 PNG 아이콘 */
.stat-feed-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 2px; display: inline-block; object-fit: contain; }

/* ========== 돌봄 리포트 페이지 (통합 개편 2026-06-05) — 시안 CSS scoped ========== */
#screen-careReport{
  --c1:var(--color-content-primary); --c2:var(--color-content-secondary); --c3:var(--color-content-muted);
  --bg:var(--color-bg-base); --surf:var(--color-bg-surface); --border:var(--color-border-subtle);
  --accent:#E08B3C; --green:#2F8B5B; --greenbg:#E7F4EC; --soft:#C2641C; --softbg:#FFF1E6;
  --blue:#3E7BC2; --bluebg:#E8F0FA; --purp:#7B68B5; --purpbg:#EFEBF7;
  --cr-shadow:0 1px 2px rgba(31,35,43,.04),0 1px 3px rgba(31,35,43,.05);
  --cr-shadow-md:0 4px 6px rgba(31,35,43,.05),0 10px 15px rgba(31,35,43,.08);
  background:var(--bg);
}
#screen-careReport .cr-root{ display:flex; flex-direction:column; height:100%; }
#screen-careReport .cr-phead{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:calc(var(--safe-top,0px) + 8px) 16px 10px; }
#screen-careReport .cr-back{ width:40px; height:40px; border-radius:12px; background:var(--surf); border:1px solid var(--border);
  box-shadow:var(--cr-shadow); display:flex; align-items:center; justify-content:center; color:var(--c1); flex-shrink:0; cursor:pointer; }
#screen-careReport .cr-tt{ font-size:19px; font-weight:800; color:var(--c1); }
#screen-careReport .cr-ds{ font-size:12px; color:var(--c2); margin-top:1px; }
#screen-careReport .cr-scroll{ flex:1; overflow-y:auto; padding:2px 16px calc(var(--safe-bottom,0px) + 28px); max-width:600px; width:100%; margin:0 auto; }
#screen-careReport .block{ background:var(--surf); border:1px solid var(--border); border-radius:20px; padding:16px; box-shadow:var(--cr-shadow); margin-top:14px; }
#screen-careReport .bh{ display:flex; align-items:center; justify-content:space-between; margin-bottom:3px; }
#screen-careReport .bh .h{ font-size:15.5px; font-weight:800; color:var(--c1); display:flex; align-items:center; gap:8px; }
#screen-careReport .bh .tag{ font-size:11px; font-weight:700; color:var(--c3); }
#screen-careReport .reassure{ font-size:12px; color:var(--c2); line-height:1.5; margin:2px 0 6px; word-break:keep-all; }
#screen-careReport .src{ font-size:10px; color:var(--c3); line-height:1.5; margin-top:12px; padding-top:11px; border-top:1px solid var(--border); word-break:keep-all; }
#screen-careReport .today-cta{ background:linear-gradient(135deg,#FFF1E2,#FFE6CE); border:1px solid #F3D9BD; border-radius:22px; padding:20px 18px; box-shadow:var(--cr-shadow-md); text-align:center; margin-top:6px; }
#screen-careReport .today-cta .day{ font-size:13px; font-weight:800; color:var(--accent); }
#screen-careReport .today-cta .ttl{ font-size:17px; font-weight:800; color:var(--c1); margin-top:7px; }
#screen-careReport .today-cta .sb{ font-size:12.5px; color:var(--c2); margin-top:6px; line-height:1.5; word-break:keep-all; }
#screen-careReport .cta-btn{ margin-top:15px; background:var(--c1); color:#fff; border-radius:14px; padding:14px; font-size:15.5px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
#screen-careReport .cta-btn[disabled]{ opacity:.6; }
#screen-careReport .seclabel{ font-size:12.5px; font-weight:800; color:var(--c3); margin:22px 4px 10px; }
#screen-careReport .rcard{ background:var(--surf); border:1px solid var(--border); border-radius:18px; padding:15px 16px; box-shadow:var(--cr-shadow); margin-bottom:11px; cursor:pointer; }
#screen-careReport .rcard .rt{ display:flex; align-items:center; justify-content:space-between; }
#screen-careReport .rcard .rdate{ font-size:14.5px; font-weight:800; color:var(--c1); }
#screen-careReport .rcard .chev{ color:var(--c3); font-size:15px; }
#screen-careReport .rcard .rsum{ font-size:13px; color:var(--c2); line-height:1.55; margin-top:6px; word-break:keep-all; }
#screen-careReport .pill{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:4px; }
#screen-careReport .pill.soft{ background:var(--softbg); color:var(--soft); }
#screen-careReport .pill.good{ background:var(--greenbg); color:var(--green); }
#screen-careReport .cr-empty{ text-align:center; color:var(--c3); font-size:13px; padding:24px 10px; line-height:1.6; }
#screen-careReport .hero{ background:linear-gradient(135deg,#FFF1E2,#FFE6CE); border-radius:20px; padding:17px 18px; border:1px solid #F3D9BD; box-shadow:var(--cr-shadow-md); margin-top:6px; }
#screen-careReport .hero .day{ font-size:12px; font-weight:800; color:var(--accent); }
#screen-careReport .hero .dttl{ font-size:17px; font-weight:800; color:var(--c1); margin-top:5px; line-height:1.4; word-break:keep-all; }
#screen-careReport .hero .dbody{ font-size:13.5px; line-height:1.65; color:#3A3F49; margin-top:10px; word-break:keep-all; }
#screen-careReport .hero .dbody b{ color:var(--c1); }
#screen-careReport .mcat{ margin-top:13px; }
#screen-careReport .mcat-h{ font-size:13px; font-weight:800; color:var(--c1); display:flex; align-items:center; gap:7px; margin-bottom:7px; }
#screen-careReport .mcat-h .e{ font-size:15px; }
#screen-careReport .chk{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; cursor:pointer; }
#screen-careReport .box{ width:21px; height:21px; border-radius:7px; border:2px solid #D8DBE0; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
#screen-careReport .box.on{ background:var(--green); border-color:var(--green); }
#screen-careReport .chk .ct{ font-size:13.5px; color:var(--c1); line-height:1.45; word-break:keep-all; }
#screen-careReport .chk.done .ct{ color:var(--c2); }
#screen-careReport .playtip{ margin-top:13px; background:var(--purpbg); border-radius:13px; padding:12px 14px; }
#screen-careReport .playtip .pt-h{ font-size:12.5px; font-weight:800; color:var(--purp); display:flex; align-items:center; gap:6px; }
#screen-careReport .playtip .pt-b{ font-size:12px; color:#52487A; line-height:1.55; margin-top:5px; word-break:keep-all; }
#screen-careReport .grow{ margin-top:13px; }
#screen-careReport .grow .gr-top{ display:flex; align-items:baseline; justify-content:space-between; }
#screen-careReport .grow .gr-name{ font-size:13.5px; font-weight:800; color:var(--c1); }
#screen-careReport .grow .gr-name span{ font-weight:700; color:var(--c2); font-size:12.5px; margin-left:3px; }
#screen-careReport .grow .gr-pct{ font-size:12.5px; font-weight:800; color:var(--accent); }
#screen-careReport .bar{ position:relative; height:10px; border-radius:6px; margin:9px 0 4px; background:linear-gradient(90deg,#EDEDF0,#E3EFE8 50%,#EDEDF0); }
#screen-careReport .bar .normal{ position:absolute; top:0; bottom:0; left:7%; right:7%; border-radius:6px; background:rgba(47,139,91,.15); }
#screen-careReport .bar .mk{ position:absolute; top:50%; width:16px; height:16px; border-radius:50%; background:var(--c1); border:3px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transform:translate(-50%,-50%); }
#screen-careReport .bar-scale{ display:flex; justify-content:space-between; font-size:10px; color:var(--c3); font-weight:600; }
#screen-careReport .gr-cmt{ font-size:12px; color:var(--green); font-weight:600; margin-top:5px; line-height:1.45; word-break:keep-all; }
#screen-careReport .rng{ display:flex; align-items:center; gap:11px; padding:11px 2px; border-top:1px solid var(--border); }
#screen-careReport .rng .ic{ width:34px; height:34px; border-radius:11px; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
#screen-careReport .rng .mid{ flex:1; min-width:0; }
#screen-careReport .rng .mt{ font-size:13.5px; font-weight:800; color:var(--c1); }
#screen-careReport .rng .ms{ font-size:11.5px; color:var(--c2); margin-top:2px; line-height:1.45; word-break:keep-all; }
#screen-careReport .vac-dday{ display:flex; align-items:center; gap:13px; background:var(--bluebg); border-radius:14px; padding:13px 15px; margin-top:10px; }
#screen-careReport .vac-dday .dd{ font-size:21px; font-weight:900; color:var(--blue); line-height:1; flex-shrink:0; }
#screen-careReport .vac-dday .vt{ font-size:13.5px; font-weight:800; color:var(--c1); }
#screen-careReport .vac-dday .vs{ font-size:11.5px; color:var(--c2); margin-top:2px; line-height:1.45; }
#screen-careReport .vac-list{ font-size:12px; color:#3A3F49; line-height:1.6; margin-top:10px; word-break:keep-all; }
#screen-careReport .vac-list b{ color:var(--c1); }
#screen-careReport .info-row{ display:flex; gap:12px; align-items:flex-start; margin-top:4px; }
#screen-careReport .info-row .ie{ font-size:24px; flex-shrink:0; }
#screen-careReport .info-row .ib{ font-size:13px; color:#3A3F49; line-height:1.6; word-break:keep-all; }
#screen-careReport .info-row .ib b{ color:var(--c1); }
#screen-careReport .when{ display:inline-block; font-size:11px; font-weight:800; color:var(--accent); background:#FFF1E2; padding:3px 9px; border-radius:8px; margin-top:7px; }

/* ========== 음성 도움말 모달 ========== */
.voice-help-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
}
.voice-help-btn:active { background: rgba(255,255,255,0.3); }

.voice-help-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; }
.voice-help-modal.hidden { display: none !important; }
.voice-help-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.voice-help-sheet {
  position: relative; width: 100%; max-height: 88vh;
  background: #fffaf3; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18);
}
.voice-help-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid #f0e6d8; flex-shrink: 0;
}
.voice-help-title { font-size: 16px; font-weight: 700; color: #3c2a1e; word-break: keep-all; }
.voice-help-close-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f0e6d8; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #7a5c48;
  flex-shrink: 0;
}
.voice-help-body { overflow-y: auto; padding: 16px 20px 32px; -webkit-overflow-scrolling: touch; }
.voice-help-intro { font-size: 13px; color: #7a5c48; margin-bottom: 16px; line-height: 1.5; word-break: keep-all; }

.voice-help-section { margin-bottom: 20px; }
.voice-help-section-title { font-size: 14px; font-weight: 700; color: #3c2a1e; margin-bottom: 8px; }
.voice-help-tips { display: flex; flex-direction: column; gap: 6px; }
.voice-help-tip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.voice-help-chip {
  background: #fff3e6; border: 1px solid #f5d4b0; border-radius: 20px;
  padding: 5px 12px; font-size: 13px; color: #5a3a1e; font-weight: 600;
  word-break: keep-all;
}
.voice-help-chip--start { background: #e8f4ea; border-color: #b5d9bb; color: #2d6637; }
.voice-help-chip--end   { background: #fde8e8; border-color: #f5b8b8; color: #8b2020; }
.voice-help-two-step { align-items: center; }
.voice-help-arrow { font-size: 11px; color: #b09080; }
.voice-help-note { font-size: 11.5px; color: #9c7a62; margin-top: 6px; line-height: 1.5; word-break: keep-all; }
.voice-help-note-inline { font-size: 11px; color: #9c7a62; }
.voice-help-caution {
  background: #fff8e6; border: 1px solid #f5d980; border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; color: #6b5000; line-height: 1.6;
  margin-top: 4px; word-break: keep-all;
}
.voice-help-caution em { font-style: normal; font-weight: 700; color: #c05000; }

/* 모델 다운로드 확인 배너 */
.model-dl-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8500;
  background: #1e3a5f; color: #fff; padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.model-dl-banner-body { display: flex; flex-direction: column; gap: 10px; }
.model-dl-banner-text { display: flex; flex-direction: column; gap: 4px; }
.model-dl-banner-text strong { font-size: 14px; }
.model-dl-banner-text span { font-size: 12px; opacity: 0.85; word-break: keep-all; }
.model-dl-banner-btns { display: flex; gap: 8px; }
.model-dl-btn { border: none; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.model-dl-btn--yes { background: #F4A261; color: #fff; }
.model-dl-btn--no { background: rgba(255,255,255,0.15); color: #fff; }

/* voice-help-modal 모델 상태 카드 */
.voice-model-status-card {
  background: #f8faff; border: 1px solid #d0e0ff; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px;
}
.voice-model-status-row { display: flex; justify-content: space-between; align-items: center; }
.voice-model-status-label { font-size: 13px; color: #555; }
.voice-model-progress-row {
  margin-top: 8px; background: #e2e8f0; border-radius: 99px; height: 6px; overflow: hidden;
}
.voice-model-progress-bar { height: 100%; background: #3b82f6; border-radius: 99px; transition: width 0.3s; }

/* ==========================================================================
   2026-06-17: 음성 명령 상단 배너 (#voice-banner). mock4 디자인.
   - 위에서 슬라이드 다운, 상단에 머무름. 박스 크기 고정(3상태 동일) → 전환해도 안 들썩.
   - 상태: .is-listening / .is-confirm / .is-done 클래스로 안쪽 내용만 교체.
   ========================================================================== */
.voice-banner {
  position: fixed;
  left: 12px; right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  max-width: 380px; margin: 0 auto;
  height: 100px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 13px 32px rgba(0, 0, 0, 0.22);
  padding: 11px 14px;
  z-index: 99999;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-145%);
  transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease;
  word-break: keep-all;
  -webkit-tap-highlight-color: transparent;
}
.voice-banner.show { opacity: 1; transform: translateY(0); }
.voice-banner.hidden { display: none; }

/* 음성 딤 막 — 웨이크로 음성 명령 켜질 때 뒤 화면을 어둡게+살짝 흐리게 가림. 배너(99999) 바로 아래. */
.voice-scrim {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(15, 18, 26, 0.62);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.voice-scrim.show { opacity: 1; }
.voice-scrim.hidden { display: none; }

/* 2단계 반투명 본체 창 — 네이티브가 앱 창을 투명 전환했을 때, 대시보드를 안 그리고
   상단 음성 배너만 남겨 뒤 직전 화면(바탕화면/잠금화면/다른 앱)이 비치게 함.
   body 직속 자식 전부 숨김(visibility) + html/body 배경 투명. #voice-banner 만 예외로 보임. */
html.voice-see-through,
body.voice-see-through { background: transparent !important; }
body.voice-see-through > *:not(#voice-banner) { visibility: hidden !important; }

.vb-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 4px; border-radius: 3px; background: #eadfd3;
}

.vb-orb {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.27), rgba(255,255,255,0) 60%),
              linear-gradient(135deg, #F4A261, #E76F51);
  box-shadow: 0 4px 11px rgba(231, 111, 81, 0.4);
}
.vb-check {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: #5fb98e;
  box-shadow: 0 4px 11px rgba(95, 185, 142, 0.45);
}
.vb-txt { min-width: 0; }
.vb-t { font-size: 15px; font-weight: 800; color: #2b2620; }
.vb-s { font-size: 11px; color: #9a8f84; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vb-wave { display: flex; align-items: center; gap: 3px; height: 18px; margin-left: auto; }
.vb-wave i { width: 3px; border-radius: 3px; background: #F4A261; animation: vb-wave 1s ease-in-out infinite; }
.vb-wave i:nth-child(1) { height: 6px;  animation-delay: 0s;    }
.vb-wave i:nth-child(2) { height: 13px; animation-delay: 0.12s; }
.vb-wave i:nth-child(3) { height: 18px; animation-delay: 0.24s; }
.vb-wave i:nth-child(4) { height: 10px; animation-delay: 0.36s; }
.vb-wave i:nth-child(5) { height: 15px; animation-delay: 0.48s; }
.vb-wave i:nth-child(6) { height: 7px;  animation-delay: 0.6s;  }
@keyframes vb-wave { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } }

/* 상태 전환: 한 번에 하나만 보임 */
.vb-state { display: none; }
.voice-banner.is-listening .vb-listening { display: flex; align-items: center; gap: 11px; height: 100%; margin-top: 3px; }
.voice-banner.is-confirm   .vb-confirm   { display: flex; flex-direction: column; height: 100%; }
.voice-banner.is-done      .vb-done      { display: flex; align-items: center; gap: 11px; height: 100%; margin-top: 3px; }

/* B) 확인 */
.vb-hd { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.vb-badge { font-size: 11px; font-weight: 800; color: #E76F51; }
.vb-x {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: #f3eee8; color: #9a8f84; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.vb-cmd { font-size: 20px; font-weight: 900; color: #2b2620; letter-spacing: -0.01em; margin: 5px 1px 0; line-height: 1.05; }
.vb-ft { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.vb-prog { flex: 1; height: 5px; border-radius: 5px; background: #f1ece6; overflow: hidden; }
.vb-prog > span { display: block; height: 100%; width: 0%; border-radius: 5px; background: linear-gradient(90deg, #F4A261, #E76F51); }
.vb-cancel-btn {
  font-size: 12px; font-weight: 800; color: #7b726a; background: #f3eee8;
  border: none; border-radius: 9px; padding: 6px 13px; cursor: pointer;
}

/* ════ 분유 가이드 화면 (수유 스탯 탭) ════ */
#screen-feedingGuide { background: var(--color-bg-base, #FBF7F2); display: flex; flex-direction: column; }
.fg-appbar { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; flex-shrink: 0; }
.fg-back { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.06); border: 0; font-size: 22px; color: var(--color-content-secondary, #374151); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fg-h1 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--color-content-primary, #1F2937); }
.fg-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px calc(28px + env(safe-area-inset-bottom)); }
.fg-head { background: linear-gradient(180deg, #FFFDF9, #FFF6EA); border: 1px solid #F4E5D0; border-radius: 22px; padding: 16px; margin-bottom: 14px; }
.fg-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fg-title { font-size: 15px; font-weight: 800; color: #1F2937; }
.fg-age { font-size: 12px; font-weight: 700; color: #B45309; background: #FFEDD5; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.fg-gaugewrap { display: flex; align-items: center; gap: 20px; padding: 8px 4px 4px; }
.fg-bottle { width: 96px; height: 188px; flex-shrink: 0; }
.fg-read { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.fg-now { font-size: 13px; font-weight: 700; color: #6B7280; }
.fg-now b { font-size: 30px; font-weight: 900; color: #1F2937; letter-spacing: -.02em; }
.fg-now b small { font-size: 15px; color: #E08B3C; }
.fg-chip { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #374151; }
.fg-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.fg-chip .fg-v { margin-left: auto; font-weight: 800; }
.fg-pct { font-size: 11.5px; color: #9CA3AF; font-weight: 600; }
.fg-acc { background: var(--color-bg-surface, #fff); border-radius: 16px; box-shadow: 0 1px 6px rgba(31,41,55,.05); margin-bottom: 10px; overflow: hidden; }
.fg-acc summary { display: flex; align-items: center; gap: 9px; padding: 13px 15px; font-size: 14px; font-weight: 800; color: var(--color-content-primary, #1F2937); cursor: pointer; list-style: none; }
.fg-acc summary::-webkit-details-marker { display: none; }
.fg-ic { font-size: 17px; }
.fg-ar { margin-left: auto; color: #cbd5e1; font-size: 13px; transition: transform .2s; }
.fg-acc[open] .fg-ar { transform: rotate(180deg); }
.fg-ab { padding: 0 15px 14px; font-size: 13px; line-height: 1.6; color: var(--color-content-secondary, #374151); }
.fg-ab b { font-weight: 800; color: var(--color-content-primary, #1F2937); }
.fg-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed rgba(127,127,127,.18); }
.fg-kv b { font-weight: 800; text-align: right; }
.fg-bandnote { font-size: 12px; color: var(--color-content-muted, #6B7280); margin-top: 8px; line-height: 1.5; }
.fg-note { font-size: 12.5px; line-height: 1.6; color: #4b5563; background: #FFFBEB; border: 1px solid #FDE8C8; border-radius: 10px; padding: 9px 11px; margin-top: 8px; }
.fg-note b { color: #B45309; }
.fg-sig { display: flex; gap: 8px; margin-top: 4px; }
.fg-scol { flex: 1; border-radius: 12px; padding: 9px 11px; }
.fg-sh { font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.fg-hungry { background: #FFF7ED; } .fg-hungry .fg-sh { color: #E08B3C; }
.fg-full { background: #DCFCE7; } .fg-full .fg-sh { color: #15803D; }
.fg-sig ul { margin: 0; padding-left: 15px; font-size: 11.5px; color: #4b5563; line-height: 1.55; }
.fg-mini { font-size: 11.5px; color: #9CA3AF; margin-top: 6px; line-height: 1.5; }
.fg-src { font-size: 10.5px; color: #9CA3AF; line-height: 1.5; text-align: center; padding: 8px; }

/* 수유 스탯카드 분유병 미니 게이지 (PNG 대체) */
.stat-feeding-gauge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 54px; flex-shrink: 0; }
.stat-feeding-gauge svg { display: block; width: 100%; height: 100%; }

/* v2 대시보드 가로 분유 게이지 바 (직전 수유 밑) */
.bday-feed-gauge { margin-top: 22px; cursor: pointer; }
.bfg-label { font-size: 18px; font-weight: 700; color: #4b5563; margin-bottom: 12px; letter-spacing: -.01em; }
.bfg-label b { color: #1F2937; font-weight: 900; font-size: 25px; }
/* 2줄 설계 (2026-07-11): 1줄=우리 아기 실제값(크게), 2줄=기준·맥락(작게·회색). 둘 다 nowrap → 외톨이 wrap 방지 */
.bfg-primary { display: block; white-space: nowrap; font-size: 21px; }
/* 이모지가 base 폰트라 옆 숫자·다른 글보다 작아 보이던 것 보정 — 크게+정렬 (2026-07-11) */
.bfg-ic { font-size: 24px; vertical-align: -2px; margin-right: 1px; }
.bfg-context { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; font-weight: 600; color: #9CA3AF; margin-top: 3px; }
.bfg-breastline .bfg-context { color: #4D7C5A; }
/* 환경센서(온습도) 라인 — Pi 키오스크에서만 표시. bfg 클래스 재사용 → 레이아웃 동일 */
.bfg-envline .bfg-context { color: #4D7C5A; }
.bfg-envline .bfg-envgap { display: inline-block; width: 16px; }
.bfg-label .bfg-mix { font-size: 13px; }
.bfg-label .bfg-over { color: #B91C1C; font-weight: 800; }
.bfg-bar { position: relative; height: 34px; border-radius: 18px; background: #EBE5DC; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.07); }
.bfg-band { position: absolute; top: 0; bottom: 0; background: rgba(21,128,61,.22); }
.bfg-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 18px; background: linear-gradient(90deg, #FDBA74, #F4A261); transition: width .45s ease; box-shadow: 0 1px 5px rgba(244,162,97,.45); }
.bfg-fill.bfg-fill-over { background: linear-gradient(90deg, #F87171, #EF4444); box-shadow: 0 1px 5px rgba(239,68,68,.45); }
.bfg-cap { position: absolute; top: -3px; bottom: -3px; width: 4px; border-radius: 2px; background: #B91C1C; }
.bday-mini-feed[data-action] { cursor: pointer; }

/* 수유 모드 토글 + 모유 패널 + 혼합 표시 */
.fg-modeseg { display: flex; gap: 4px; background: rgba(127,127,127,.1); border-radius: 13px; padding: 4px; margin: 4px 0 14px; }
.fg-modebtn { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 4px; font-size: 13.5px; font-weight: 800; color: var(--color-content-muted, #9CA3AF); cursor: pointer; transition: background .15s; }
.fg-modebtn.on { background: var(--color-bg-surface, #fff); color: var(--color-content-primary, #1F2937); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
/* 2026-08-05: 모드 세그먼트는 '미리보기'다. 저장(가족 전체 반영)은 여기서 명시적으로만.
   터치스크린(미니PC)에서 스치기만 해도 모든 기기 대시보드가 바뀌던 사고 방지. */
.fg-modepreview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 14px; padding: 10px 12px;
  background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.3); border-radius: 11px;
  font-size: 13px; font-weight: 700; color: #9A3412; line-height: 1.45; }
.fg-modeapply { margin-left: auto; border: 0; border-radius: 9px; padding: 8px 14px; cursor: pointer;
  background: #EA580C; color: #fff; font-size: 13px; font-weight: 800; }
.fg-modecancel { border: 0; border-radius: 9px; padding: 8px 12px; cursor: pointer;
  background: rgba(127,127,127,.15); color: #6B7280; font-size: 13px; font-weight: 800; }
.fg-breast { display: flex; align-items: center; gap: 16px; padding: 8px 4px; }
.fg-breast-ic { font-size: 50px; flex-shrink: 0; line-height: 1; }
.fg-breast-main { font-size: 17px; font-weight: 900; color: #1F2937; }
.fg-breast-sub { font-size: 14px; font-weight: 700; color: #6B7280; margin-top: 4px; }
.fg-breast-sub b { color: #E08B3C; font-size: 16px; }
.fg-breast-note { font-size: 12.5px; line-height: 1.5; color: #15803D; background: #DCFCE7; border-radius: 10px; padding: 8px 11px; margin-top: 8px; }
.fg-breast-note b { color: #166534; }
.fg-mix { font-size: 13px; font-weight: 800; color: #B45309; background: #FFEDD5; padding: 2px 8px; border-radius: 6px; }
.bfg-breastline { color: #15803D; }
.bfg-breastline b { color: #166534; }
.bfg-mix { font-size: 13px; font-weight: 800; color: #B45309; background: #FFEDD5; padding: 1px 6px; border-radius: 5px; }

/* 수유 가이드 팝업 모달 (배경/✕ 로 닫힘) */
.fgm-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(20,20,25,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fgm-card { width: 100%; max-width: 440px; max-height: 86vh; background: var(--color-bg-base, #FBF7F2); border-radius: 24px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.32); display: flex; flex-direction: column; }
#fg-modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#fg-modal-body .fg-appbar { padding: 14px 16px 8px; }
#fg-modal-body .fg-h1 { flex: 1; }
#fg-modal-body .fg-back { background: rgba(0,0,0,.06); font-size: 17px; }
#fg-modal-body .fg-scroll { padding: 0 16px 18px; }

/* ── 수면 가이드 (sleep-guide.ts) — 수유 가이드 chrome(fg- · fgm- 접두) 재사용 + 수면 인디고 톤 ──
   🔴 CSS 주석 안에 별표+슬래시(주석 종료 기호)를 쓰지 말 것. 예전엔 여기에 "fg-*[종료기호]fgm-*" 이라
   적혀 있어서 주석이 그 자리에서 끝나버렸고, 뒤에 남은 글자가 셀렉터로 파싱되면서 바로 아래
   #sg-modal-body 규칙을 통째로 삼켰다. 그 결과 수면 가이드 모달이 flex 컨테이너가 아니게 돼
   본문이 카드 높이(86vh)에 안 갇히고 늘어남 → 넘치는 게 없어 스크롤 불가 + 아래가 잘려
   마지막 "안전수면 5원칙"을 펼쳐도 화면 밖이라 안 보였다(2026-08-08). 회귀 테스트: js/style-integrity.test.js */
#sg-modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
#sg-modal-body .fg-appbar { padding: 14px 16px 8px; }
#sg-modal-body .fg-h1 { flex: 1; }
#sg-modal-body .fg-back { background: rgba(0,0,0,.06); font-size: 17px; }
#sg-modal-body .fg-scroll { padding: 0 16px 18px; }
/* 큰 화면(태블릿·v2·미니PC 키오스크)에서 가이드 모달 확대 — 폰은 440 유지. 2026-07-10 복원 */
@media (min-width: 768px) {
  .fgm-card { max-width: 560px; }
  #fg-modal-body .fg-appbar, #sg-modal-body .fg-appbar { padding: 16px 22px 10px; }
  #fg-modal-body .fg-scroll, #sg-modal-body .fg-scroll { padding: 0 22px 22px; }
}
@media (min-width: 1200px) { .fgm-card { max-width: 640px; } }
/* 오늘의 코치 카드 (coach.ts — 수유·수면 공용) */
.fg-coach { margin: 4px 0 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, #FFF7EE, #FFEAD3); border: 1px solid rgba(244,162,97,.35); }
.fg-coach-good { background: linear-gradient(160deg, #F0FDF4, #DCFCE7); border-color: rgba(34,197,94,.3); }
.fg-coach-warn { background: linear-gradient(160deg, #FEF2F2, #FEE2E2); border-color: rgba(239,68,68,.28); }
.fg-coach-h { font-size: 12px; font-weight: 800; color: #B45309; margin-bottom: 6px; letter-spacing: .01em; }
.fg-coach-good .fg-coach-h { color: #15803D; }
.fg-coach-warn .fg-coach-h { color: #B91C1C; }
.fg-coach-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: #4B3F33; margin-top: 4px; }
.fg-coach-ic { flex-shrink: 0; }
.sg-head { background: linear-gradient(180deg, #FBFBFF, #EEF0FB); border: 1px solid #DFE2F4; border-radius: 22px; padding: 16px; margin-bottom: 14px; }
.sg-glabel { font-size: 17px; font-weight: 700; color: #4b5563; margin: 8px 0 10px; letter-spacing: -.01em; }
.sg-glabel b { color: #312E81; font-weight: 900; font-size: 22px; }
.sg-glabel span { color: #9CA3AF; font-weight: 600; font-size: 14px; }
.sg-glabel .sg-ok { color: #15803D; font-weight: 800; }
.sg-glabel .sg-warn { color: #B45309; font-weight: 800; }
.sg-bar { position: relative; height: 30px; border-radius: 16px; background: #E7E4F0; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.07); }
.sg-band { position: absolute; top: 0; bottom: 0; background: rgba(21,128,61,.22); }
.sg-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 16px; background: linear-gradient(90deg, #A5B4FC, #6366F1); transition: width .45s ease; box-shadow: 0 1px 5px rgba(99,102,241,.4); }
.sg-fill.sg-fill-warn { background: linear-gradient(90deg, #FCD34D, #F59E0B); box-shadow: 0 1px 5px rgba(245,158,11,.4); }
.sg-ticklab { display: flex; justify-content: flex-end; margin-top: 5px; }
.sg-ticklab span { font-size: 11.5px; color: #6B7280; font-weight: 600; }
.sg-list { margin: 4px 0 0; padding-left: 18px; }
.sg-list li { font-size: 13px; line-height: 1.65; color: var(--color-content-secondary, #374151); }
.sg-logrow { margin-top: 12px; }
.sg-logbtn { width: 100%; padding: 11px; border: 0; border-radius: 13px; background: #4F46E5; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(79,70,229,.28); }
.sg-logbtn:active { transform: translateY(1px); }

/* ── 포인트 잔액 (사이드바 프로필 카드 우측, points.ts) ── */
.sb-points { margin-left: auto; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; border-radius: 14px; padding: 8px 12px; background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; cursor: pointer; box-shadow: 0 1px 5px rgba(146,64,14,.2); }
.sb-points-val { font-size: 15px; font-weight: 900; white-space: nowrap; line-height: 1.1; }
.sb-points-cap { font-size: 10px; font-weight: 700; opacity: .78; }
.sb-points:active { transform: translateY(1px); }
.sb-points.hidden { display: none; }

/* ── 퀴즈 카드 슬림 (2026-07-12 재설계: 뱃지·질문·셰브론 한 행 인라인) ──
   구 grid/prompt 참조·gap 충돌 규칙 제거. 스타일은 base(.quiz-game-card, src/input.css)가 담당.
   min-height 만 확실히 눌러 컴팩트 유지. */
.quiz-game-card-slim { min-height: 0 !important; }

/* ============================================================
   2026-07-03: 네이티브 체감 개선 패키지
   ① 타임라인 스켈레톤 ② 화면 전환 애니메이션 ③ 스크롤 폴리싱
   ============================================================ */

/* ① 타임라인 스켈레톤 — 첫 데이터 도착 전 뼈대 (renderTimeline 이 제거) */
#timeline-skeleton { padding: 4px 2px; }
.tl-skel-card {
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.tl-skel-line {
  height: 14px;
  border-radius: 7px;
  margin: 10px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.11) 37%, rgba(0,0,0,.06) 63%);
  background-size: 400% 100%;
  animation: tlSkelShimmer 1.3s ease infinite;
}
.tl-skel-head { width: 45%; height: 16px; margin-top: 0; }
.tl-skel-short { width: 65%; }
/* 2026-08-15: 뼈대 아래 "불러오는 중" 문구 — 정지 화면으로 오해받지 않게 (점 3개가 계속 움직인다) */
.tl-skel-note {
  text-align: center; font-size: 13px; padding: 4px 0 8px;
  color: var(--color-content-muted, #9A9CA3);
}
.tl-skel-note::after {
  content: ''; animation: tlSkelDots 1.2s steps(4, end) infinite;
}
@keyframes tlSkelDots {
  0% { content: ''; } 25% { content: '·'; } 50% { content: '··'; } 75% { content: '···'; }
}
@keyframes tlSkelShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ② 화면 전환 — 살짝 아래서 떠오르는 페이드 (감속모션 설정 존중) */
@media (prefers-reduced-motion: no-preference) {
  .screen-enter { animation: screenEnter .18s cubic-bezier(.22, 1, .36, 1); }
  @keyframes screenEnter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ③ 스크롤 폴리싱 — 오버스크롤 체이닝 차단(당겨서 흰 배경 노출 방지) + 관성 */
body { overscroll-behavior-y: none; }
.screen { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ===================================================================
   2026-07 울음분석 결과화면 개편 — 캐릭터 + 행동 우선순위 가이드
   =================================================================== */
.cry-screen .cry-main { background: linear-gradient(160deg,#eaf4ff 0%,#fff5ea 100%); }
.cry2-result { display:flex; flex-direction:column; align-items:center; padding:4px 4px 20px; }
.cry2-bubble { position:relative; background:#fff; border-radius:20px; padding:12px 24px;
  box-shadow:0 6px 18px rgba(150,120,140,.16); font-size:20px; font-weight:800; color:#5b6472;
  min-height:50px; display:flex; align-items:center; animation:cry2pop .35s cubic-bezier(.3,1.4,.5,1); }
.cry2-bubble::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  border-left:11px solid transparent; border-right:11px solid transparent; border-top:12px solid #fff; }
@keyframes cry2pop { 0%{transform:scale(.7);opacity:0} 100%{transform:scale(1)} }
.cry2-stage { width:170px; height:170px; margin-top:14px; border-radius:28px;
  background:radial-gradient(circle at 50% 42%,#fff,#fdf0f4 75%); box-shadow:0 10px 26px rgba(240,180,200,.3);
  display:flex; align-items:center; justify-content:center; }
.cry2-stage.blue { background:radial-gradient(circle at 50% 42%,#fff,#eef6ff 75%); box-shadow:0 10px 26px rgba(150,190,240,.3); }
.cry2-char { width:142px; height:142px; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,.09));
  animation:cry2breathe 3s ease-in-out infinite; }
.cry2-char.wiggle { animation:cry2wiggle .5s; }
@keyframes cry2breathe { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-3px) scale(1.02)} }
@keyframes cry2wiggle { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-5deg) scale(1.04)} 60%{transform:rotate(4deg)} }
.cry2-est { font-size:13px; color:#6b7280; margin-top:12px; text-align:center; word-break:keep-all; }
.cry2-est b { color:#f5809a; }
.cry2-est .tag { color:#b0b6c0; font-size:11px; }
.cry2-guide-h { width:100%; font-size:14px; font-weight:800; color:#5b6472; margin:18px 0 4px; word-break:keep-all; }
.cry2-guide-h small { display:block; font-size:11px; color:#9aa0ac; font-weight:600; margin-top:2px; }
.cry2-step { width:100%; display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:16px;
  padding:13px 14px; margin-top:9px; box-shadow:0 3px 10px rgba(120,130,170,.08); opacity:.5; transition:all .25s; }
.cry2-step.active { opacity:1; box-shadow:0 6px 18px rgba(99,102,241,.18); border:1.5px solid #c7d2fe; }
.cry2-step.done { opacity:.6; background:#f0fdf4; }
.cry2-step .num { flex:none; width:26px; height:26px; border-radius:50%; background:#e5e7eb; color:#9ca3af;
  font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.cry2-step.active .num { background:#6366f1; color:#fff; }
.cry2-step.done .num { background:#22c55e; color:#fff; }
.cry2-step .ic { font-size:22px; flex:none; }
.cry2-step .bd { flex:1; }
.cry2-step .bd b { font-size:14.5px; color:#4b5563; }
.cry2-step .bd p { font-size:11.5px; color:#8b93a3; line-height:1.5; margin-top:2px; word-break:keep-all; }
.cry2-step .btns { display:flex; gap:6px; margin-top:9px; }
.cry2-step .btns button { border:none; border-radius:10px; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.cry2-b-ok { background:#dcfce7; color:#166534; }
.cry2-b-no { background:#f3f4f6; color:#6b7280; }
.cry2-solved { width:100%; background:#ecfdf5; border:1px solid #6ee7b7; border-radius:16px; padding:16px;
  margin-top:12px; text-align:center; font-size:14px; font-weight:700; color:#065f46; line-height:1.6; word-break:keep-all; }
.cry2-danger { width:100%; background:#fff5f5; border:1.5px solid #fca5a5; border-radius:14px;
  padding:12px 14px; margin-top:14px; font-size:11.5px; color:#b91c1c; line-height:1.5; word-break:keep-all; }
.cry2-danger b { font-weight:800; }

/* 녹음/대기 화면 톤 통일 (2026-07) */
.cry2-record-panel { display:flex; flex-direction:column; align-items:center; padding:22px 16px; }
.cry2-rec-stage { position:relative; transition:box-shadow .3s; }
.cry2-record-panel.cry-active .cry2-rec-stage { animation:cry2pulse 1.5s ease-in-out infinite; }
@keyframes cry2pulse { 0%,100%{box-shadow:0 10px 26px rgba(240,180,200,.3)} 50%{box-shadow:0 10px 42px rgba(245,128,154,.55)} }
.cry2-record-panel .cry-caption { text-align:center; margin-top:12px; }
.cry2-record-panel .cry-state-sub { font-size:13px; color:#9aa0ac; margin-top:4px; word-break:keep-all; }
.cry2-mainbtn { width:100%; max-width:300px; margin-top:22px; padding:16px; border:none; border-radius:18px;
  font-size:17px; font-weight:800; color:#fff; cursor:pointer; box-shadow:0 8px 20px rgba(245,128,154,.3);
  background:linear-gradient(135deg,#f5a0b5,#ef8fa8); transition:transform .1s; }
.cry2-mainbtn:active { transform:scale(.97); }
.cry2-mainbtn.cry2-cancel { background:#c9ccd6; box-shadow:none; color:#fff; }
.cry2-reanalyze { background:linear-gradient(135deg,#7bb5ec,#6aa5e0); box-shadow:0 8px 20px rgba(120,170,240,.3); }

/* ===== v2(반반화면 = body.split-force) 울음분석 재설계 — 2026-07-10 =====
   반반 화면에서만 적용. 폰/일반 브라우저 레이아웃은 그대로.
   문제였던 것: 콘텐츠가 폰 폭 600px만 쓰고 좌우 여백·세로로만 김.
   개편: 600px 제한 해제(가로폭 활용) + 결과를 2단(왼쪽 캐릭터·신뢰도 / 오른쪽 행동가이드).
   ★ 하드코딩 폭 대신 '칸(pane) 실제 폭' 기준 컨테이너쿼리 → v2 를 켜는 어떤 해상도 기기든 안전.
     · v2(대시보드 좌우분할)는 노트북·태블릿·TV 등 사용자가 설정에서 켤 수 있어 칸 폭이 제각각.
     · 뷰포트 기준(@media)은 반반이라 실제 칸이 절반이라 부정확 → 칸 폭 기준(@container)으로 판단.
     · 칸이 넉넉할 때(≥820px)만 2단, 좁으면 자동으로 세로 1단 폴백(폭은 칸에 맞게 유동). */
body.split-force #screen-monitor{ container:cryPane / inline-size; }   /* 이하 @container 의 기준 = 이 '칸' 폭 */
body.split-force #screen-monitor .app-main.cry-main{ max-width:none; padding:22px clamp(16px,3vw,40px) 40px; }
body.split-force #screen-monitor .cry-log-panel{ max-width:none; margin-top:26px;
  background:rgba(255,255,255,.55); border-radius:16px; padding:16px 20px; }
body.split-force #screen-monitor .cry2-record-panel{ padding:40px 16px; }

/* 2단은 '칸' 이 넉넉할 때만 (뷰포트 아님 → 반반이라 칸이 절반이어도 정확히 판단).
   cryPane 컨테이너는 split-force 에서만 생기므로 아래 규칙도 v2 한정으로만 발동. */
@container cryPane (min-width:820px){
  #screen-monitor .cry2-result{
    display:grid;
    grid-template-columns:minmax(300px,360px) minmax(0,1fr);
    grid-template-areas:
      "bubble   guideh"
      "stage    steps"
      "est      steps"
      "reanaly  steps"
      "danger   danger"
      "feedback feedback";
    column-gap:clamp(24px,3cqi,40px); row-gap:12px;
    align-items:start; align-content:start;
    padding:8px 4px; max-width:none;
  }
  #screen-monitor #cry2-bubble{ grid-area:bubble; justify-self:center; margin:0 0 4px; }
  #screen-monitor #cry2-stage{ grid-area:stage; justify-self:center; width:clamp(220px,26cqi,300px); height:clamp(220px,26cqi,300px); }
  #screen-monitor #cry2-stage .cry2-char{ width:76%; height:76%; }
  #screen-monitor #cry2-est{ grid-area:est; justify-self:center; text-align:center; margin:8px 0 0; }
  #screen-monitor .cry2-reanalyze{ grid-area:reanaly; align-self:start; margin:18px auto 0; }
  #screen-monitor #cry2-guide-h{ grid-area:guideh; margin:6px 0 2px; font-size:16px; }
  #screen-monitor #cry2-steps{ grid-area:steps; display:flex; flex-direction:column; gap:10px; }
  #screen-monitor #cry2-steps .cry2-step{ margin-top:0; }
  #screen-monitor .cry2-solved{ grid-area:steps; }
  #screen-monitor .cry2-danger{ grid-area:danger; margin-top:20px; }
  #screen-monitor #cry-feedback{ grid-area:feedback; }
}

/* ===== 건강 관리 — 에피소드(아픈 기간) 재설계 (2026-07-24) ===== */
/* 현재 상태: 아픈 중 카드 */
.health-now { background: linear-gradient(135deg, #ffe9d6, #ffdcc4); border: 1px solid #f4c7a8; border-radius: 18px; padding: 15px 16px; }
.health-now-row { display: flex; align-items: center; gap: 8px; }
.health-now-badge { font-size: 11px; font-weight: 800; color: #fff; background: #e8734b; padding: 3px 9px; border-radius: 999px; flex: none; }
.health-now-ttl { font-size: 17px; font-weight: 900; color: #7c3a12; letter-spacing: -0.3px; }
.health-now-sum { font-size: 13px; color: #9a5a34; margin-top: 7px; line-height: 1.5; }
/* 현재 상태: 건강해요 */
.health-ok { display: flex; align-items: center; gap: 9px; background: var(--color-bg-surface-alt); border-radius: 16px; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--color-content-secondary); }
.health-ok-emoji { font-size: 19px; }
/* 지난 아픈 기록 카드 */
.health-ep-card { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06)); border-radius: 15px; padding: 13px 14px; text-align: left; cursor: pointer; transition: transform 0.12s ease; }
.health-ep-card:active { transform: scale(0.985); }
.health-ep-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--color-bg-surface-alt); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none; }
.health-ep-main { flex: 1; min-width: 0; }
.health-ep-title { display: block; font-size: 15px; font-weight: 800; color: var(--color-content-primary); }
.health-ep-range { font-size: 12.5px; color: var(--color-content-muted); font-weight: 600; margin-left: 6px; }
.health-ep-sum { display: block; font-size: 12.5px; color: var(--color-content-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-ep-chev { color: var(--color-content-muted); font-size: 19px; flex: none; }
/* 에피소드 상세 오버레이 */
.health-ep-detail { position: fixed; inset: 0; z-index: 12000; background: var(--color-bg-base, #fffaf3); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.health-ep-detail-hd { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px; background: var(--color-bg-base, #fffaf3); }
.health-ep-detail-back { flex: none; width: 34px; height: 34px; border-radius: 12px; background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08)); font-size: 18px; color: var(--color-content-primary); cursor: pointer; line-height: 1; }
.health-ep-detail-ttl { font-size: 18px; font-weight: 900; color: var(--color-content-primary); letter-spacing: -0.3px; }
.health-ep-detail-sub { font-size: 12.5px; color: var(--color-content-muted); margin-top: 1px; }
.health-ep-detail-body { padding: 6px 18px max(40px, calc(env(safe-area-inset-bottom, 0px) + 28px)); max-width: 600px; width: 100%; margin: 0 auto; }
.health-ep-detail-stat { font-size: 13px; font-weight: 700; color: #9a5a34; background: #fff1e6; border: 1px solid #f4c7a8; border-radius: 12px; padding: 10px 13px; margin-bottom: 14px; }

/* 에피소드 상세 — 약별 묶음·병원 리포트 버튼·행 탭 (2026-07-25 후속) */
.health-row--tap { cursor: pointer; transition: background 0.12s ease; }
.health-row--tap:active { background: var(--color-bg-surface-alt); }
.health-ep-report-btn { margin-left: auto; flex: none; border: 1px solid #F4C7A8; background: #FFF1E8; color: #C2410C; font-size: 12.5px; font-weight: 800; border-radius: 9px; padding: 6px 11px; cursor: pointer; }
.health-ep-detail-tl-h { font-size: 12px; font-weight: 800; color: var(--color-content-muted); letter-spacing: 0.3px; margin: 16px 2px 9px; }
.health-medgrp { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06)); border-radius: 14px; padding: 12px 14px; margin-bottom: 4px; }
.health-medgrp-h { font-size: 12px; font-weight: 800; color: var(--color-content-muted); margin-bottom: 8px; letter-spacing: 0.3px; }
.health-medgrp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.health-medgrp-row + .health-medgrp-row { border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.05)); }
.health-medgrp-name { font-size: 14px; font-weight: 700; color: var(--color-content-primary); }
.health-medgrp-meta { font-size: 12.5px; font-weight: 600; color: var(--color-content-muted); flex: none; }

/* 2026-07-29: 슬라이더 오작동 방지 (대표님 지적 — "거의 터치도 안 했는데 슥슥 움직여")
   원인 ①세로 스크롤 제스처가 슬라이더에 먹혀 값이 끌려감 ②트랙 아무 데나 닿으면 그 지점으로 점프.
   touch-action: pan-y → 세로 스와이프는 페이지 스크롤로 넘기고, 슬라이더는 가로 조작만 받는다.
   여백(padding)으로 터치 영역만 넓혀 손가락이 트랙을 스치는 사고를 줄인다. */
input[type="range"] {
  touch-action: pan-y;
  padding: 6px 0;
}
/* 민감도 미세조정 버튼 — 드래그 없이 0.05 씩 정확히 */
.thr-step-btn {
  min-width: 34px; height: 30px; border-radius: 8px;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.12));
  background: var(--color-surface-2, #F5F5F7);
  color: var(--color-content-primary, #1F232B);
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
}
.thr-step-btn:active { background: var(--color-border-subtle, rgba(0,0,0,0.08)); }
.thr-row { display: flex; align-items: center; gap: 8px; }
.thr-row input[type="range"] { flex: 1; }

/* 2026-07-31: 작성자 아바타(듀오톤) — 설계: docs/AUTHOR_TRACKING.md
   면(.a-fill)은 옅게, 선(.a-line)/눈코(.a-dot)는 진하게. 색은 인라인 --ac 로 주입. */
.avatar-g .a-fill { fill: var(--ac, #9AA3AE); fill-opacity: 0.28; stroke: none; }
.avatar-g .a-line { stroke: var(--ac, #9AA3AE); fill: none; }
.avatar-g .a-dot  { fill: var(--ac, #9AA3AE); stroke: none; }

/* 타임라인 이벤트 아이콘 위에 얹는 작성자 배지 — 가로 공간을 0 차지 */
.tl-icon-wrap { position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.tl-author-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--color-bg-surface-alt, #fff);
  border: 1.5px solid var(--color-bg-surface-alt, #fff);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.tl-author-badge svg { width: 15px; height: 15px; }

/* 아바타 선택 팔레트 */
.avatar-pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.avatar-pick {
  aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  background: var(--color-bg-surface-alt, #fff); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.avatar-pick[aria-pressed="true"] { border-color: var(--color-action-feeding, #EC7A72); background: color-mix(in srgb, var(--color-action-feeding, #EC7A72) 10%, transparent); }
.avatar-pick:disabled { opacity: 0.3; cursor: not-allowed; filter: grayscale(1); }
.avatar-label-chip {
  padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
  background: var(--color-bg-surface-alt, #fff); color: var(--color-content-secondary); cursor: pointer;
}
.avatar-label-chip[aria-pressed="true"] { background: var(--color-action-feeding, #EC7A72); color: #fff; border-color: transparent; }

/* 2026-08-01: 막수 칩 아래 안내 한 줄 — "앱이 왜 이걸 미리 골랐는지"를 숨기지 않기 위한 것.
   (사용자가 "내가 안 눌렀는데 켜져 있네" 하고 의심하지 않게) */
.feed-burping-hint {
  margin-top: 6px; font-size: 11.5px; line-height: 1.45;
  color: var(--color-content-muted, #6B7280);
}