.app-shell { max-width: 430px; margin: 0 auto; }

    /* #1 오늘의 순간 — 사진 위 텍스트 오버레이 (Google Photos / Liven Journal 패턴) */
    .moment-card {
      position: relative;
      display: block; cursor: pointer; padding: 0; overflow: hidden;
      aspect-ratio: 4 / 5;
      background: url('../img/opt/mockup.webp') center/cover no-repeat, var(--color-bg-canvas);
      border-radius: var(--radius-card-lg);
      box-shadow: var(--card-shadow);
      color: white;
      text-decoration: none;
    }
    .moment-card::after {
      content: '';
      position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
      background: rgba(0,0,0,0.55);
      pointer-events: none;
    }
    .moment-chip {
      position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 10px; border-radius: var(--radius-pill);
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      font-size: 11px; font-weight: var(--weight-bold);
      color: var(--color-text-primary); letter-spacing: -0.2px;
    }
    .moment-chip iconify-icon { font-size: 12px; color: var(--color-accent); }
    .moment-body {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      padding: var(--space-5) var(--space-5) var(--space-5);
    }
    .moment-quote {
      font-size: var(--text-headline); font-weight: var(--weight-bold);
      line-height: 1.4; letter-spacing: -0.4px;
      margin-bottom: var(--space-2);
      color: white;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }
    .moment-meta {
      font-size: var(--text-caption);
      color: rgba(255,255,255,0.82);
    }

    /* #2 AI 분석 점수 — Tonal / Liven 스타일: 점수 hero */
    .ai-bar {
      display: flex; align-items: center; gap: var(--space-5);
    }
    .ai-score { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
    .ai-score__num {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 32px; font-weight: 800;
      color: var(--color-accent);
      letter-spacing: -1px;
    }
    .ai-bar__body { flex: 1; min-width: 0; }
    .ai-bar__label {
      font-size: 11px; font-weight: var(--weight-bold);
      color: var(--color-text-tertiary);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 4px;
    }
    .ai-bar__headline {
      font-size: var(--text-callout); font-weight: var(--weight-bold);
      line-height: 1.35; color: var(--color-text-primary);
      margin-bottom: 2px;
    }
    .ai-bar__sub {
      font-size: var(--text-caption); color: var(--color-text-secondary);
      line-height: 1.4;
    }

    /* 오늘의 케어 — 그리드 */
    .zone-title {
      font-size: var(--text-headline); font-weight: var(--weight-bold);
      margin-bottom: var(--space-3);
    }
    .grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
    }
    .grid-full { grid-column: 1 / -1; }
    .w-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--space-3);
    }
    .w-title {
      font-size: var(--text-callout); font-weight: var(--weight-bold);
      display: flex; align-items: center; gap: var(--space-2);
    }
    .w-title iconify-icon { font-size: 18px; color: var(--color-accent); }
    .w-num {
      font-size: var(--font-32); font-weight: var(--weight-bold);
      letter-spacing: -1.5px; line-height: 1;
    }
    .w-num em { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-text-tertiary); font-style: normal; }

    /* #3 투약 — dual-signal: 완료(filled) / 미완(outline) */
    .w-dots { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
    .w-dot {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      font-size: var(--text-mini); color: var(--color-text-secondary);
    }
    .w-dot__mark {
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--color-success); color: white;
    }
    .w-dot__mark iconify-icon { font-size: 12px; }
    .w-dot--pending .w-dot__mark {
      background: transparent;
      border: 1.5px solid var(--color-border-strong, var(--color-border-subtle));
    }
    .w-dot--pending { color: var(--color-text-tertiary); }

    /* #4 식사 바 + variance marker */
    .meal-bars { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
    .meal-bar-row { display: flex; align-items: center; gap: var(--space-3); }
    .meal-bar-label { font-size: var(--text-mini); width: 28px; color: var(--color-text-secondary); }
    .meal-bar-bg {
      flex: 1; height: 6px;
      background: var(--color-bg-canvas);
      border-radius: var(--radius-pill);
      overflow: hidden;
    }
    .meal-bar-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-pill); }
    .meal-bar-fill--warn { background: var(--color-warning); }
    .meal-bar-delta {
      display: inline-flex; align-items: center; gap: 2px;
      font-size: 10px; font-weight: var(--weight-bold);
      color: var(--palette-amber-700);
      min-width: 32px; justify-content: flex-end;
    }
    .meal-bar-delta iconify-icon { font-size: 10px; }

    /* #5 결합 — 기분/활동 (각 사이드 톤 분리) */
    .combined-inner {
      display: flex; align-items: stretch;
      gap: var(--space-5);
    }
    .combined-half { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
    .combined-icon {
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; color: var(--color-accent);
      margin-bottom: 2px;
    }
    .combined-icon--mood { color: var(--brand-green-500, var(--color-success)); }
    .combined-icon--activity { color: var(--color-accent); }
    .combined-metric { font-size: 26px; font-weight: 800; color: var(--color-text-primary); line-height: 1; letter-spacing: -0.6px; }
    .combined-metric em { font-size: var(--text-caption); font-weight: var(--weight-semibold); font-style: normal; color: var(--color-text-tertiary); margin-left: 2px; }
    .combined-sub { font-size: var(--text-caption); color: var(--color-text-secondary); }
    .combined-divider { width: 1px; align-self: stretch; background: var(--color-border-subtle); }

    /* #6 위생 체크 — 미니 progress + dual state */
    .chk-progress {
      display: flex; align-items: center; gap: var(--space-2);
      margin-top: var(--space-2); margin-bottom: var(--space-3);
    }
    .chk-progress-bar {
      flex: 1; height: 4px; background: var(--color-bg-canvas);
      border-radius: var(--radius-pill); overflow: hidden;
    }
    .chk-progress-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-pill); }
    .chk-progress-text { font-size: 11px; font-weight: var(--weight-bold); color: var(--color-text-secondary); }
    .chk-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
    .chk-row__icon {
      width: 22px; height: 22px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      background: var(--color-success-soft); color: var(--color-success);
    }
    .chk-row__icon iconify-icon { font-size: 14px; }
    .chk-row--pending .chk-row__icon {
      background: var(--color-bg-canvas);
      color: var(--color-text-tertiary);
    }
    .chk-row--pending .chk-name,
    .chk-row--pending .chk-time { color: var(--color-text-tertiary); }
    .chk-name { flex: 1; font-size: var(--text-callout); }
    .chk-time { font-size: var(--text-mini); color: var(--color-text-tertiary); }

    /* #7 간호사 카드 + 듀얼 액션 */
    .nurse-card {
      grid-column: 1 / -1;
      display: flex; align-items: center; gap: var(--space-4);
    }
    .nurse-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .nurse-icon-btn {
      width: 40px; height: 40px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--color-accent-soft); color: var(--color-accent);
      border: 0; cursor: pointer;
      text-decoration: none;
    }
    .nurse-icon-btn iconify-icon { font-size: 18px; }
    .nurse-icon-btn--call { background: var(--color-success-soft); color: var(--color-success); }

    /* #8 특이사항 inline action link */
    .alert-link {
      display: inline-flex; align-items: center; gap: 2px;
      margin-top: 6px;
      font-size: var(--text-caption); font-weight: var(--weight-bold);
      color: var(--palette-amber-700);
      text-decoration: none;
    }
    .alert-link iconify-icon { font-size: 14px; }

    /* #9 CTA primary/secondary 위계 (g03-sotong 정렬) */
    .cta-row .btn--primary {
      background: var(--color-accent); color: white;
      border: 0;
      box-shadow: 0 1px 2px rgba(0,0,0,.06);
    }
    .cta-row .btn--secondary {
      background: transparent; color: var(--color-text-primary);
      border: 1px solid var(--color-border-strong, var(--color-border-subtle));
    }
    .nurse-img {
      width: 56px; height: 56px; border-radius: var(--radius-pill);
      background: var(--color-accent-soft);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; overflow: hidden;
    }
    .nurse-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .nurse-img iconify-icon { font-size: 28px; color: var(--color-accent); }
    .nurse-body { flex: 1; }
    .nurse-name { font-size: var(--text-headline); font-weight: var(--weight-bold); }
    .nurse-sub { font-size: var(--text-caption); color: var(--color-text-secondary); }

    .cta-row { display: flex; gap: var(--space-3); }
    .cta-row .btn { flex: 1; }