*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: var(--font-family-base);
      -webkit-font-smoothing: antialiased;
      color: var(--color-text-primary);
      background: var(--patient-canvas-warm);
    }

    .app {
      position: relative; z-index: 1;
      height: 100dvh;
      max-width: none; margin: 0;
      display: flex; flex-direction: column;
      padding: 24px 28px 20px; gap: 16px;
    }

    /* 환자앱 우상단 설정 진입 — 탭바 외부, 작은 아이콘 (가족이 도와줄 때 진입) */
    .p-settings-quick {
      width: 56px; height: 56px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 6px 20px rgba(194, 98, 28, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-text-secondary);
      flex-shrink: 0;
      transition: transform .12s, background .15s, color .15s;
    }
    .p-settings-quick:hover { background: rgba(var(--color-accent-rgb), 0.1); color: var(--color-text-primary); }
    .p-settings-quick:active { transform: scale(0.96); }
    .p-settings-quick iconify-icon { font-size: 22px; }

    /* 헤더는 patient.css의 .p-header--nav 공통 스타일 사용 */
    /* 시계·설정 버튼을 카드 내부 콘텐츠(28px 패딩)와 맞춰 들여쓰기 */
    .p-header--nav > .clock { padding-left: 28px; }
    .p-header--nav .p-settings-quick { margin-right: 28px; }

    /* ── 메인 2열 (왼쪽 70% AI 말벗 / 오른쪽 30% 기능) ── */
    .main {
      flex: 1;
      display: grid; grid-template-columns: 7fr 3fr;
      gap: 16px; min-height: 0;
    }

    .glass {
      background: rgba(255,255,255,0.82);
      border-radius: 28px;
      box-shadow: 0 6px 28px rgba(0,0,0,0.07);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    /* ================================================================
       왼쪽 패널 — AI 말벗 (상황에 맞는 카드 하나 + 답장 + 음성)
    ================================================================ */
    .left {
      min-height: 0;
      display: flex; flex-direction: column; gap: 16px;
    }

    .ai-panel {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column;
      overflow: hidden;
    }

    /* AI 미니 헤더 — AI가 지금 상황 내레이션 */
    .ai-mini-header {
      display: flex; align-items: center; gap: 14px;
      padding: 20px 28px 16px;
      flex-shrink: 0;
    }
    .ai-mini-av {
      width: 56px; height: 56px; border-radius: 18px;
      background: var(--brand-orange-500);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .32);
      flex-shrink: 0;
      padding: 9px;
    }
    .ai-mini-av img {
      width: 100%; height: 100%;
      display: block;
      filter: brightness(0) invert(1);              /* 로고 → 흰색 */
    }
    .ai-mini-greet {
      font-size: 24px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2;
    }
    .ai-mini-detail {
      font-size: 19px; font-weight: 600; color: var(--patient-text-warm);
      margin-top: 4px; letter-spacing: -0.2px;
    }

    /* 카드 슬롯 — 상황별 카드 하나만 뜸 (지금은 가족 메시지) */
    .card-slot {
      flex: 1; min-height: 0;
      padding: 18px 24px 0; display: flex;
    }

    /* ── 가족 메시지 카드 — fn-schedule(오른쪽)과 같은 glass 통일 ── */
    .msg-card {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; gap: 14px;
      background: rgba(255,255,255,.92);
      border-radius: 24px;
      padding: 22px 22px 20px;
      box-shadow: 0 8px 28px rgba(0,0,0,.07);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      overflow: hidden;
    }
    .msg-card-head {
      display: flex; align-items: center; gap: 14px; flex-shrink: 0;
    }
    .msg-av {
      width: 58px; height: 58px; border-radius: 50%;
      background: var(--brand-orange-600);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 700; color: white;
      position: relative; flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .3);
      overflow: hidden;
    }
    .msg-av img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; border-radius: 50%;
      object-fit: cover; display: block;
    }
    .msg-av-dot {
      position: absolute; right: 0; bottom: 0; z-index: 1;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--brand-green-500); border: 3px solid white;
    }
    .msg-from { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
    .msg-time {
      font-size: 18px; font-weight: 600; color: var(--patient-text-warm);
      margin-top: 3px; letter-spacing: -0.2px;
    }

    .msg-photos {
      flex: 1; min-height: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    }
    .msg-photos a {
      display: block; width: 100%; height: 100%;
      border-radius: 18px; overflow: hidden;
      transition: transform .15s;
      position: relative;
    }
    .msg-photos a:active { transform: scale(.98); }
    .photo-thumb {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 18px;
      display: block;
      background: var(--patient-amber-soft);
    }
    /* 사진이 탭 가능함을 알리는 마이크로카피 — 노인은 인지가 안 되므로 명시 */
    .photo-hint {
      position: absolute; left: 10px; bottom: 10px; z-index: 1;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 12px; border-radius: 999px;
      background: rgba(0, 0, 0, 0.55);
      color: white;
      font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      pointer-events: none;
    }
    .photo-hint iconify-icon { font-size: 16px; }

    .msg-text {
      font-size: 26px; font-weight: 600; line-height: 1.45;
      color: var(--color-text-primary);
      flex-shrink: 0;
      padding: 18px 22px; border-radius: 18px;
      background: rgba(var(--color-accent-rgb), .10);
      letter-spacing: -0.3px;
    }

    /* 빠른 답장 칩 — 카드 맥락에 맞게 (ai-panel 내부 하단) */
    .quick-replies {
      padding: 14px 24px 20px; display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0;
    }
    .quick-chip {
      padding: 16px 22px; border-radius: 999px;
      background: rgba(255,255,255,.92);
      font-size: 19px; font-weight: 700; cursor: pointer;
      color: var(--color-text-primary);
      transition: all .15s; letter-spacing: -0.2px;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .quick-chip:hover { background: var(--brand-orange-100); color: var(--brand-orange-700); }
    .quick-chip:active { transform: scale(.96); }

    /* 음성 버튼 — help-btn과 자매, ai-panel 바깥 독립 버튼 */
    .voice-btn {
      flex-shrink: 0;
      height: 88px; border-radius: 22px;
      border: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 14px;
      font-size: 26px; font-weight: 700; letter-spacing: -0.3px;
      background: var(--brand-orange-500);
      color: white;
      box-shadow: 0 10px 32px rgba(var(--color-accent-rgb), .38);
      transition: transform .15s, box-shadow .15s;
    }
    .voice-btn:active { transform: scale(.97); box-shadow: 0 5px 16px rgba(var(--color-accent-rgb), .3); }

    /* ================================================================
       오른쪽 패널 — 가족 전화 + 측정/약 + 일정 + 도움요청
    ================================================================ */
    .right { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

    /* ── A. 가족 3명 빠른 전화 ── */
    .fam-quick {
      padding: 12px 14px 14px;
      flex-shrink: 0;
      display: flex; flex-direction: column; gap: 10px;
    }
    .fam-quick-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 2px 4px 0;
    }
    .fam-quick-title {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
      color: var(--color-text-primary);
    }
    .fam-quick-title iconify-icon { color: var(--brand-orange-500); }
    .fam-quick-more {
      display: inline-flex; align-items: center; gap: 2px;
      font-size: 16px; font-weight: 700; letter-spacing: -0.2px;
      color: var(--brand-orange-700);
      text-decoration: none;
      padding: 4px 6px; border-radius: 10px;
      transition: background .15s;
    }
    .fam-quick-more:hover { background: rgba(var(--color-accent-rgb), .1); }
    /* Variant C — 가로 행 + 우측 아이콘 액션 */
    .fam-quick-list {
      display: flex; flex-direction: column; gap: 8px;
    }
    .fam-row {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      text-decoration: none;
      color: var(--color-text-primary);
      transition: background .12s, border-color .15s, box-shadow .15s;
    }
    .fam-row:hover {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), 0.12);
    }
    .fam-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .fam-row-name-line {
      display: flex; align-items: center; gap: 8px;
      font-size: 20px; font-weight: 700; letter-spacing: -0.3px;
      line-height: 1.1;
    }
    .fam-row-relation {
      font-size: 15px; font-weight: 600;
      color: var(--patient-text-warm);
      padding: 3px 10px; border-radius: 999px;
      background: rgba(0, 0, 0, 0.05);
    }
    .fam-row-status {
      font-size: 15px; font-weight: 600;
      color: var(--brand-green-600);
      line-height: 1.2;
    }
    .fam-row--offline .fam-row-status { color: var(--patient-text-warm); }
    .fam-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .fam-icon-btn {
      width: 44px; height: 44px;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--brand-orange-50);
      color: var(--brand-orange-600);
      text-decoration: none;
      cursor: pointer;
      transition: transform .1s, background .12s;
    }
    .fam-icon-btn:hover { background: var(--brand-orange-100); }
    .fam-icon-btn:active { transform: scale(.92); }
    .fam-icon-btn iconify-icon { font-size: 20px; }
    .fam-icon-btn--primary {
      background: var(--brand-orange-500);
      color: white;
      box-shadow: 0 4px 12px rgba(var(--color-accent-rgb), 0.32);
    }
    .fam-row--offline .fam-icon-btn--primary {
      background: var(--palette-gray-200);
      color: var(--color-text-secondary);
      box-shadow: none;
    }

    .fam-row .fam-av { width: 52px; height: 52px; }
    .fam-row .fam-av-dot { width: 14px; height: 14px; border-width: 2.5px; right: 1px; bottom: 1px; }

    .fam-av {
      width: 64px; height: 64px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px; font-weight: 700; color: white;
      position: relative; flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(0,0,0,.12);
      overflow: hidden;
    }
    .fam-av img {
      position: absolute; inset: 0;
      width: 100%; height: 100%; border-radius: 50%;
      object-fit: cover; display: block;
    }
    /* 가족 아바타 — 이미지 로딩 전 fallback 배경 (브랜드 warm 톤) */
    .fam-av--orange { background: var(--brand-orange-600); }
    .fam-av--green  { background: var(--patient-avatar-sage-2); }
    .fam-av--blue   { background: var(--patient-avatar-dusty-2); }
    .fam-av-dot {
      position: absolute; right: 2px; bottom: 2px; z-index: 1;
      width: 16px; height: 16px; border-radius: 50%;
      border: 3px solid white; background: var(--patient-avatar-offline);
    }
    .fam-av-dot--on { background: var(--brand-green-500); }
    .fam-name { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
    .fam-relation { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin-top: -4px; }

    /* ── D. "지금 할 일" 카드 — 약 복용 hero (오른쪽 칼럼 내 최우선) ── */
    .now-action {
      flex-shrink: 0;
      border-radius: 24px;
      padding: 18px 22px 18px;
      background: white;
      box-shadow: 0 10px 28px rgba(234,88,12,.16), 0 0 0 2px rgba(var(--color-accent-rgb), .32);
      display: flex; flex-direction: column;
      position: relative;
    }
    /* 약 시간이 임박했다는 시각적 신호 — 미세한 펄스 */
    .now-action::before {
      content: ""; position: absolute; inset: -2px;
      border-radius: 26px; pointer-events: none;
      box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .28);
      animation: now-pulse 2.4s ease-out infinite;
    }
    @keyframes now-pulse {
      0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), .32); }
      70% { box-shadow: 0 0 0 14px rgba(var(--color-accent-rgb), 0); }
      100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
    }
    .now-tag {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 18px; font-weight: 700; letter-spacing: -0.2px;
      color: var(--brand-orange-700);
    }
    .now-tag iconify-icon { color: var(--brand-orange-500); font-size: 22px; }
    .now-title {
      font-size: 32px; font-weight: 800; letter-spacing: -0.6px;
      color: var(--color-text-primary); line-height: 1.05; margin-top: 6px;
    }
    .now-sub {
      font-size: 19px; font-weight: 600; color: var(--patient-text-warm);
      margin-top: 6px; letter-spacing: -0.2px; line-height: 1.35;
    }
    .now-confirm {
      margin-top: 14px;
      border: 0; cursor: pointer;
      width: 100%; padding: 18px 18px;
      border-radius: 16px;
      background: var(--brand-orange-500);
      color: white;
      display: flex; align-items: center; justify-content: center; gap: 12px;
      font-size: 24px; font-weight: 800; letter-spacing: -0.3px;
      box-shadow: 0 6px 20px rgba(var(--color-accent-rgb), .38);
      transition: transform .15s, box-shadow .15s;
    }
    .now-confirm:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(var(--color-accent-rgb), .25); }
    .now-confirm iconify-icon { flex-shrink: 0; font-size: 30px; }

    /* 오늘 일정 — 타임라인 카드 (지금 전후 4개만 보이는 컴팩트 버전) */
    .fn-schedule {
      flex: 1; min-height: 0;
      background: rgba(255,255,255,.88);
      border-radius: 24px;
      box-shadow: 0 8px 28px rgba(0,0,0,.08);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      display: flex; flex-direction: column;
      padding: 18px 22px 16px;
      text-decoration: none; color: var(--color-text-primary);
      transition: transform .15s, box-shadow .15s;
      overflow: hidden;
    }
    .fn-schedule:hover { box-shadow: 0 12px 36px rgba(0,0,0,.10); }
    .fn-schedule:active { transform: scale(.99); }
    .sch-header {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; margin-bottom: 12px; flex-shrink: 0;
    }
    .sch-title { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
    .sch-date {
      font-size: 17px; font-weight: 700;
      padding: 5px 12px; border-radius: 999px;
      background: rgba(var(--color-accent-rgb), .18); color: var(--brand-orange-700);
    }
    .sch-list {
      display: flex; flex-direction: column; width: 100%; flex: 1; gap: 4px; min-height: 0;
      overflow: hidden;
    }
    .sch-item {
      display: grid; grid-template-columns: 60px 22px 1fr;
      gap: 0 12px; align-items: flex-start; padding-bottom: 8px;
    }
    .sch-item:last-child { padding-bottom: 0; }
    .sch-time {
      font-size: 18px; font-weight: 700;
      color: var(--patient-text-warm-soft); padding-top: 2px; text-align: right;
      white-space: nowrap;
    }
    .sch-line { display: flex; flex-direction: column; align-items: center; }
    .sch-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
    .sch-connector {
      width: 2px; flex: 1; min-height: 8px;
      background: rgba(0,0,0,.10); margin-top: 4px;
    }
    .sch-item:last-child .sch-connector { display: none; }
    .sch-label { font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--color-text-primary); }
    .sch-sub { font-size: 17px; font-weight: 600; color: var(--patient-text-warm); margin-top: 3px; }

    /* "자세히 보기" 힌트 — 카드 하단 */
    .sch-footer {
      width: 100%; margin-top: 8px; padding-top: 12px;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      font-size: 18px; font-weight: 700; color: var(--brand-orange-700);
      letter-spacing: -0.2px; flex-shrink: 0;
    }

    .sch-item.done .sch-time,
    .sch-item.done .sch-label { color: var(--palette-gray-300); }
    .sch-item.done .sch-dot { background: var(--palette-gray-200); }

    .sch-item.current .sch-time { color: var(--brand-orange-600); font-weight: 700; }
    .sch-item.current .sch-dot {
      background: var(--brand-orange-500);
      box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), .22);
      width: 14px; height: 14px; margin-top: 6px;
    }
    .sch-item.current .sch-label { color: var(--brand-orange-700); font-weight: 700; font-size: 21px; }
    .sch-item.current .sch-sub { color: var(--brand-orange-600); font-weight: 600; }

    .sch-item.upcoming .sch-dot {
      background: var(--palette-gray-300);
      opacity: 0.6;
    }

    /* 도움 요청 — 왼쪽 눌러서 말하기와 형태 맞춤 (한 줄, 동일 높이) */
    .help-btn {
      flex-shrink: 0; height: 88px; border-radius: 22px;
      border: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 14px;
      font-size: 26px; font-weight: 700; letter-spacing: -0.3px;
      background: var(--color-danger); color: white;
      box-shadow: 0 10px 32px rgba(var(--color-danger-rgb), .38);
      transition: transform .15s, box-shadow .15s;
    }
    .help-btn:active { transform: scale(.97); box-shadow: 0 5px 16px rgba(var(--color-danger-rgb), .3); }
    .help-btn iconify-icon { flex-shrink: 0; }

    /* ================================================================
       먹었어요 확인 모달 — 의료 안전: 한 번의 탭 실수 방지
    ================================================================ */
    .confirm-overlay {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(0,0,0,.42);
      display: none; align-items: center; justify-content: center;
      padding: 24px;
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .confirm-overlay.is-open { display: flex; animation: cf-fade .18s ease-out; }
    @keyframes cf-fade { from { opacity: 0; } to { opacity: 1; } }
    .confirm-dialog {
      background: white; border-radius: 28px;
      padding: 36px 36px 28px;
      max-width: 520px; width: 100%;
      box-shadow: 0 32px 64px rgba(0,0,0,.28);
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      animation: cf-rise .22s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes cf-rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .confirm-icon {
      width: 84px; height: 84px; border-radius: 50%;
      background: rgba(var(--color-accent-rgb), .14);
      display: flex; align-items: center; justify-content: center;
      color: var(--brand-orange-600);
      margin-bottom: 8px;
    }
    .confirm-icon iconify-icon { font-size: 44px; }
    .confirm-title {
      font-size: 30px; font-weight: 800; letter-spacing: -0.5px;
      color: var(--color-text-primary); text-align: center;
      line-height: 1.2;
    }
    .confirm-sub {
      font-size: 20px; font-weight: 600; color: var(--patient-text-warm);
      text-align: center; line-height: 1.45;
      margin-top: 4px; letter-spacing: -0.2px;
    }
    .confirm-actions {
      display: flex; gap: 14px; width: 100%; margin-top: 22px;
    }
    .cf-btn {
      flex: 1; border: 0; cursor: pointer;
      padding: 22px 18px; border-radius: 18px;
      font-size: 24px; font-weight: 800; letter-spacing: -0.3px;
      transition: transform .15s, box-shadow .15s, background .15s;
    }
    .cf-btn:active { transform: scale(.97); }
    .cf-btn--primary {
      background: var(--brand-orange-500); color: white;
      box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), .42);
    }
    .cf-btn--ghost {
      background: var(--patient-ghost-bg); color: var(--patient-text-warm);
    }
    .cf-btn--ghost:hover { background: var(--patient-ghost-hover); }

    /* Inline 대체 */
    .msg-card--clickable { cursor: pointer; }