// 하루결 — 보호자 모드 화면 3개

// ────────────────────────────────────────────────────────────
// 보호자 홈
// ────────────────────────────────────────────────────────────
function CaregiverHomeScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const profile = s.profile;
  const recDay = daysBetween(profile.cycleStartDate, today) + 1;

  // 환자 상태 요약 (오늘)
  const todayMeals = s.meals.filter(m => m.date === today);
  const mealCount = todayMeals.filter(m => m.type !== '수분').length;
  const waterCount = todayMeals.filter(m => m.type === '수분').length;
  const todaySymp = s.symptoms.filter(y => y.date === today);
  const maxSym = todaySymp.length ? Math.max(...todaySymp.map(y => y.severity)) : 0;

  const stats = [
    { label: '체온', value: '36.8', unit: '°C', tone: 'ok',   tag: '정상' },
    { label: '식사', value: String(mealCount), unit: '회',     tone: mealCount >= 3 ? 'ok' : 'warn', tag: mealCount >= 3 ? '충분' : '평소보다 적음' },
    { label: '수분', value: String(waterCount), unit: '잔',    tone: waterCount >= 6 ? 'ok' : 'warn', tag: `목표 6잔` },
    { label: '증상', value: String(todaySymp.length), unit: '건', tone: maxSym >= 4 ? 'bad' : todaySymp.length > 0 ? 'warn' : 'ok', tag: todaySymp.length ? `최고 강도 ${maxSym}` : '없음' },
  ];

  const tasks = [
    { t: '저녁 식사 소분 준비',      sub: '두부조림 + 미음', time: '18:00', done: false, tone: 'sage' },
    { t: '체온 측정 도와주기',        sub: '식사 후',          time: '19:30', done: false, tone: 'clay' },
    { t: '오늘 증상 한 줄 기록 함께', sub: '잠들기 전',         time: '22:00', done: false, tone: 'honey' },
    { t: '미지근한 물 6잔 권하기',     sub: '오전부터',          time: '온종일', done: true,  tone: 'mist' },
  ];
  const [taskState, setTaskState] = React.useState(() => tasks.map(t => t.done));
  const tones = { sage: 'var(--hg-sage)', clay: 'var(--hg-clay)', honey: 'var(--hg-honey)', mist: 'var(--hg-mist)' };

  const next = [...s.schedules].filter(x => x.date >= today).sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time))[0];
  const hoursIdle = hoursSince(s.safety.lastCheckIn);
  const idleAlert = hoursIdle > (s.safety.thresholdHours || 24);

  return (
    <>
      <div style={{ padding: '54px 22px 6px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <Chip style={{ background: 'var(--hg-mist)', color: '#fff', padding: '5px 12px' }}>보호자 모드</Chip>
          <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{profile.name}님과 함께</span>
        </div>
        <div className="hg-serif" style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.025em', color: 'var(--hg-ink)' }}>
          오늘 {profile.name}님은 회복 {recDay}일차예요
        </div>
      </div>

      <div style={{ padding: '16px 22px 0' }}>
        {idleAlert ? (
          <Panel style={{
            padding: 16,
            background: 'linear-gradient(135deg, #FCEEEC, var(--hg-surface) 130%)',
            borderColor: 'rgba(194,85,74,0.32)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                background: 'var(--hg-rose)', color: '#fff',
                display: 'grid', placeItems: 'center', flexShrink: 0,
                fontSize: 18, fontWeight: 700,
              }}>!</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-rose)' }}>안전 확인 필요</div>
                <div style={{ fontSize: 12, color: 'var(--hg-ink-2)', fontWeight: 600, marginTop: 2 }}>{profile.name}님 {Math.round(hoursIdle)}시간 동안 활동 없음</div>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <button onClick={() => { window.location.href = 'tel:'; }} style={{ padding: 12, borderRadius: 12, background: 'var(--hg-rose)', color: '#fff', fontSize: 13, fontWeight: 700 }}>전화</button>
              <button onClick={() => { window.location.href = `sms:?body=${encodeURIComponent(profile.name + '님 안녕하세요. 잘 계신지요?')}`; }} style={{ padding: 12, borderRadius: 12, background: 'var(--hg-surface)', border: '1px solid var(--hg-rose-soft)', color: 'var(--hg-rose)', fontSize: 13, fontWeight: 700 }}>문자</button>
            </div>
          </Panel>
        ) : (
          <Panel style={{ padding: 14, background: 'var(--hg-sage-tint)', borderColor: 'var(--hg-sage-soft)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{
                width: 32, height: 32, borderRadius: '50%',
                background: 'var(--hg-sage)', color: '#fff',
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--hg-sage)' }}>안전 체크 정상</div>
                <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{profile.name}님 마지막 활동 {Math.round(hoursIdle)}시간 전</div>
              </div>
            </div>
          </Panel>
        )}
      </div>

      <div style={{ padding: '16px 22px 0' }}>
        <Panel style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <Eyebrow color="var(--hg-mist)">{profile.name}님 컨디션</Eyebrow>
            <span style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600 }}>지금 막 업데이트</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
            {stats.map((st) => <StatCard key={st.label} {...st}/>)}
          </div>
        </Panel>
      </div>

      <div style={{ padding: '14px 22px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>오늘 함께해야 할 일</div>
          <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{taskState.filter(Boolean).length} / {tasks.length} 완료</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {tasks.map((task, i) => (
            <button key={i} onClick={() => { const next = [...taskState]; next[i] = !next[i]; setTaskState(next); }} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: 14, borderRadius: 16, width: '100%', textAlign: 'left',
              background: taskState[i] ? 'var(--hg-bg-deeper)' : 'var(--hg-surface)',
              border: '1px solid var(--hg-line-soft)',
              opacity: taskState[i] ? 0.65 : 1,
            }}>
              <div style={{ width: 4, height: 36, borderRadius: 2, background: tones[task.tone] }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)', textDecoration: taskState[i] ? 'line-through' : 'none' }}>{task.t}</div>
                <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{task.sub}</div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 700 }}>{task.time}</div>
              <Checkbox checked={taskState[i]} />
            </button>
          ))}
        </div>
      </div>

      <div style={{ padding: '14px 22px 0' }}>
        <button onClick={() => navigate('emergency')} style={{
          width: '100%', textAlign: 'left',
          padding: 16, borderRadius: 18,
          background: 'linear-gradient(135deg, #FCEEEC, var(--hg-surface) 130%)',
          border: '1px solid rgba(194,85,74,0.24)',
          display: 'flex', gap: 12, alignItems: 'center',
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: '50%',
            background: 'var(--hg-rose-soft)', color: 'var(--hg-rose)',
            display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 18, flexShrink: 0,
          }}>!</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>알아두기</div>
            <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2, lineHeight: 1.5 }}>
              38°C 이상, 출혈, 심한 호흡곤란 시 즉시 병원 연락
            </div>
          </div>
          <span style={{
            padding: '8px 12px', borderRadius: 999,
            background: 'var(--hg-rose)', color: '#fff',
            fontSize: 11, fontWeight: 700, flexShrink: 0,
          }}>병원 콜</span>
        </button>
      </div>

      {next && (
        <div style={{ padding: '14px 22px 24px' }}>
          <button onClick={() => navigate('cg-visit')} style={{
            width: '100%', textAlign: 'left',
            padding: 16, borderRadius: 22,
            background: 'linear-gradient(135deg, var(--hg-mist-tint), var(--hg-surface) 100%)',
            border: '1px solid var(--hg-line-soft)',
          }}>
            <Eyebrow color="var(--hg-mist)">다음 진료 동행</Eyebrow>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
              <div>
                <div className="hg-serif" style={{ fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em' }}>
                  {fmtMonth(next.date)} · {next.time}
                </div>
                <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>
                  {next.dept} · 질문 {s.questions.filter(q => !q.done).length}개
                </div>
              </div>
              <span style={{
                padding: '10px 14px', borderRadius: 12,
                background: 'var(--hg-surface)', border: '1px solid var(--hg-line)',
                fontSize: 12, fontWeight: 700, color: 'var(--hg-ink)',
              }}>준비하기 →</span>
            </div>
          </button>
        </div>
      )}
    </>
  );
}

function StatCard({ label, value, unit, tone, tag }) {
  const toneMap = {
    ok:   { bg: 'var(--hg-sage-tint)',  c: 'var(--hg-sage)' },
    warn: { bg: 'var(--hg-honey-tint)', c: 'var(--hg-honey)' },
    bad:  { bg: 'var(--hg-rose-soft)',  c: 'var(--hg-rose)' },
  };
  const t = toneMap[tone];
  return (
    <div style={{
      padding: 12, borderRadius: 14,
      background: t.bg, border: `1px solid ${t.c}33`,
    }}>
      <div style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginBottom: 4 }}>
        <span className="hg-serif" style={{ fontSize: 26, fontWeight: 600, color: 'var(--hg-ink)', letterSpacing: '-0.02em', lineHeight: 1 }}>{value}</span>
        <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{unit}</span>
      </div>
      <div style={{ fontSize: 10, color: t.c, fontWeight: 700 }}>{tag}</div>
    </div>
  );
}

// ────────────────────────────────────────────────────────────
// 환자 일지 (모니터링)
// ────────────────────────────────────────────────────────────
function CaregiverMonitorScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const profile = s.profile;

  // 1주 그래프: 컨디션(높을수록 좋음) + 평균 증상강도
  const week = [];
  const todayD = new Date(today + 'T00:00:00');
  for (let i = 6; i >= 0; i--) {
    const d = new Date(todayD); d.setDate(todayD.getDate() - i);
    const iso = d.toISOString().slice(0, 10);
    const moodVal = ({ good: 90, ok: 65, hard: 40, 'very-hard': 20 })[s.mood[iso]] ?? 50;
    const syms = s.symptoms.filter(y => y.date === iso);
    const symAvg = syms.length ? syms.reduce((a, b) => a + b.severity, 0) / syms.length : 0;
    week.push({
      iso,
      label: ['일','월','화','수','목','금','토'][d.getDay()],
      mood: moodVal,
      sym: symAvg,
      today: i === 0,
    });
  }

  // 오늘 타임라인
  const todayMeals = s.meals.filter(m => m.date === today);
  const todaySymp = s.symptoms.filter(y => y.date === today);
  const timeline = [
    ...todaySymp.map(x => ({ t: x.time, kind: 'symptom', label: `${x.name} 강도 ${x.severity}`, tone: x.severity >= 4 ? 'rose' : x.severity >= 3 ? 'honey' : 'clay', icon: 'fatigue' })),
    ...todayMeals.map(x => ({ t: x.time, kind: 'meal', label: `${x.type} ${x.name} ${x.amount}`, tone: 'sage', icon: 'meal' })),
  ].sort((a, b) => b.t.localeCompare(a.t));

  return (
    <>
      <ScreenHeader title="환자 일지" sub={`${profile.name}님의 한 주`} />

      <div style={{ padding: '6px 22px 0' }}>
        <Panel style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <Eyebrow>이번 주 컨디션</Eyebrow>
            <div style={{ display: 'flex', gap: 12, fontSize: 10, color: 'var(--hg-muted)', fontWeight: 600 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--hg-clay)' }} />컨디션
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 8, height: 2, background: 'var(--hg-honey)' }} />증상
              </span>
            </div>
          </div>
          <WeekChart week={week} />
        </Panel>
      </div>

      <div style={{ padding: '14px 22px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>오늘 타임라인</div>
          <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>{fmtMonth(today)}</span>
        </div>
        {timeline.length === 0 ? (
          <div style={{ padding: 24, textAlign: 'center', color: 'var(--hg-muted)', fontSize: 13, background: 'var(--hg-surface)', borderRadius: 16, border: '1px dashed var(--hg-line)' }}>
            아직 기록이 없어요
          </div>
        ) : (
          <Panel style={{ padding: 4 }}>
            {timeline.map((e, i) => {
              const toneC = { clay: 'var(--hg-clay)', sage: 'var(--hg-sage)', honey: 'var(--hg-honey)', rose: 'var(--hg-rose)' }[e.tone];
              const toneBg = { clay: 'var(--hg-clay-tint)', sage: 'var(--hg-sage-tint)', honey: 'var(--hg-honey-tint)', rose: 'var(--hg-rose-soft)' }[e.tone];
              return (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 14px',
                  borderBottom: i < timeline.length - 1 ? '1px solid var(--hg-line-soft)' : 'none',
                }}>
                  <div style={{ fontSize: 10, color: 'var(--hg-muted)', fontWeight: 700, minWidth: 36 }}>{e.t}</div>
                  <div style={{
                    width: 30, height: 30, borderRadius: 10,
                    background: toneBg, color: toneC,
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    {e.kind === 'meal' ? (
                      <svg width="16" height="16" viewBox="0 0 22 22" fill="none"><path d="M6 4v7a3 3 0 003 3v5M9 4v7M14 4c-1.5 1-2 3-2 5s1 4 2 4v6" stroke={toneC} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    ) : (
                      <svg width="16" height="16" viewBox="0 0 22 22" fill="none"><path d="M11 18s-7-4.2-7-9.5C4 5.5 6.5 4 8.5 4c1.4 0 2.3.6 2.5 1 .2-.4 1.1-1 2.5-1C15.5 4 18 5.5 18 8.5 18 13.8 11 18 11 18z" stroke={toneC} strokeWidth="1.6" strokeLinejoin="round"/></svg>
                    )}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--hg-ink)' }}>{e.label}</div>
                  </div>
                </div>
              );
            })}
          </Panel>
        )}
      </div>

      <div style={{ padding: '14px 22px 24px' }}>
        <Panel style={{ padding: 16, background: 'var(--hg-honey-tint)', borderColor: 'var(--hg-honey-soft)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <Eyebrow color="var(--hg-honey)">보호자 메모</Eyebrow>
            <span style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600 }}>· 진료 때 공유</span>
          </div>
          <textarea className="hg-textarea" placeholder="환자분을 가까이서 본 인상을 적어두세요" style={{ background: 'var(--hg-surface-2)', border: '1px solid var(--hg-honey-soft)' }}/>
        </Panel>
      </div>
    </>
  );
}

function WeekChart({ week }) {
  return (
    <svg width="100%" height="140" viewBox="0 0 320 140" style={{ overflow: 'visible' }}>
      <defs>
        <linearGradient id="hgArea2" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"   stopColor="var(--hg-clay)" stopOpacity="0.32"/>
          <stop offset="100%" stopColor="var(--hg-clay)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0, 1, 2, 3].map((g) => (
        <line key={g} x1="20" x2="310" y1={20 + g * 30} y2={20 + g * 30} stroke="var(--hg-line-soft)" strokeDasharray="2 4"/>
      ))}
      <path d={week.reduce((acc, w, i) => {
        const x = 30 + i * 42;
        const y = 110 - (w.mood * 0.9);
        return acc + `${i === 0 ? 'M' : 'L'}${x},${y}`;
      }, '') + ` L${30 + 6*42},110 L30,110 Z`} fill="url(#hgArea2)"/>
      <path d={week.reduce((acc, w, i) => {
        const x = 30 + i * 42;
        const y = 110 - (w.mood * 0.9);
        return acc + `${i === 0 ? 'M' : 'L'}${x},${y}`;
      }, '')} fill="none" stroke="var(--hg-clay)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
      <path d={week.reduce((acc, w, i) => {
        const x = 30 + i * 42;
        const y = 110 - (w.sym * 15);
        return acc + `${i === 0 ? 'M' : 'L'}${x},${y}`;
      }, '')} fill="none" stroke="var(--hg-honey)" strokeWidth="2" strokeDasharray="4 3" strokeLinecap="round"/>
      {week.map((w, i) => {
        const x = 30 + i * 42;
        const y = 110 - (w.mood * 0.9);
        return (
          <g key={i}>
            <circle cx={x} cy={y} r={w.today ? 5 : 3} fill={w.today ? 'var(--hg-clay)' : '#fff'} stroke="var(--hg-clay)" strokeWidth="2"/>
            <text x={x} y={130} textAnchor="middle" fontSize="11" fontWeight={w.today ? 700 : 600} fill={w.today ? 'var(--hg-clay-dark)' : 'var(--hg-muted)'} fontFamily="Pretendard">{w.label}</text>
          </g>
        );
      })}
    </svg>
  );
}

// ────────────────────────────────────────────────────────────
// 진료 동행 준비
// ────────────────────────────────────────────────────────────
function CaregiverVisitScreen({ navigate }) {
  const s = useStore();
  const today = todayISO();
  const next = [...s.schedules].filter(x => x.date >= today).sort((a, b) => (a.date + a.time).localeCompare(b.date + b.time))[0];
  const daysLeft = next ? daysBetween(today, next.date) : null;

  const initialItems = [
    { t: '진료카드 · 신분증',           done: true },
    { t: '복용약 봉투 (영양제 포함)',    done: true },
    { t: '최근 검사지·영상 CD',         done: true },
    { t: '식사·증상 기록 노트',         done: false, hint: '하루결 앱에서 PDF로 내보내기' },
    { t: '간식과 보온병 (대기시간용)',  done: false },
  ];
  const [items, setItems] = React.useState(initialItems);
  const doneCount = items.filter(i => i.done).length;
  const pct = Math.round((doneCount / items.length) * 100);

  return (
    <>
      <ScreenHeader title="진료 동행 준비" sub={next ? `${fmtMonth(next.date)} · ${next.title}` : '예약된 진료 없음'} />

      {next && (
        <div style={{ padding: '6px 22px 0' }}>
          <Panel style={{
            padding: 18,
            background: 'linear-gradient(135deg, #2A241D 0%, #4A4137 100%)',
            color: '#fff', position: 'relative', overflow: 'hidden', borderColor: 'transparent',
          }}>
            <div style={{ position: 'absolute', right: -40, top: -40, width: 140, height: 140, borderRadius: '50%', background: 'rgba(217,166,108,0.16)' }} />
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--hg-honey)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>진료까지</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
                  <span className="hg-serif" style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1 }}>{daysLeft}</span>
                  <span style={{ fontSize: 14, fontWeight: 600 }}>일 남음</span>
                </div>
                <div style={{ fontSize: 12, opacity: 0.75, marginTop: 6 }}>{doneCount} / {items.length} 준비 완료</div>
              </div>
              <div style={{
                width: 70, height: 70, position: 'relative',
                display: 'grid', placeItems: 'center',
              }}>
                <svg width="76" height="76" viewBox="0 0 76 76" style={{ position: 'absolute', transform: 'rotate(-90deg)' }}>
                  <circle cx="38" cy="38" r="35" fill="none" stroke="rgba(217,166,108,0.3)" strokeWidth="3"/>
                  <circle cx="38" cy="38" r="35" fill="none" stroke="var(--hg-honey)" strokeWidth="3"
                    strokeDasharray={`${35 * 2 * Math.PI * pct/100} ${35 * 2 * Math.PI}`} strokeLinecap="round"/>
                </svg>
                <span className="hg-serif" style={{ fontSize: 18, fontWeight: 600, color: 'var(--hg-honey)' }}>{pct}%</span>
              </div>
            </div>
          </Panel>
        </div>
      )}

      <div style={{ padding: '14px 22px 0' }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)', marginBottom: 10 }}>가져갈 것</div>
        <Panel style={{ padding: 4 }}>
          {items.map((it, i) => (
            <button key={i} onClick={() => { const n = [...items]; n[i] = { ...it, done: !it.done }; setItems(n); }} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12,
              padding: '14px 14px', width: '100%', textAlign: 'left',
              borderBottom: i < items.length - 1 ? '1px solid var(--hg-line-soft)' : 'none',
            }}>
              <Checkbox checked={it.done}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: it.done ? 'var(--hg-muted)' : 'var(--hg-ink)', textDecoration: it.done ? 'line-through' : 'none' }}>{it.t}</div>
                {it.hint && <div style={{ fontSize: 11, color: 'var(--hg-clay)', fontWeight: 600, marginTop: 4 }}>{it.hint}</div>}
              </div>
            </button>
          ))}
        </Panel>
      </div>

      <div style={{ padding: '14px 22px 0' }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)', marginBottom: 10 }}>진료실에서</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { ico: 'mic',  t: '녹음 가능 여부 먼저 묻기',         s: '예의를 갖춰 부탁드려요' },
            { ico: 'pen',  t: '질문 빠짐없이 메모',              s: '하루결 질문 노트 켜기' },
            { ico: 'eye',  t: '의사 설명 중 핵심 단어 받아쓰기', s: '병기·검사명·약 이름' },
          ].map((x, i) => (
            <div key={i} style={{
              padding: 14, borderRadius: 16,
              background: 'var(--hg-surface)',
              border: '1px solid var(--hg-line-soft)',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 12,
                background: 'var(--hg-mist-tint)', color: 'var(--hg-mist)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
              }}>
                {x.ico === 'mic' && <svg width="18" height="18" viewBox="0 0 22 22" fill="none"><rect x="8" y="3" width="6" height="12" rx="3" stroke="currentColor" strokeWidth="1.6"/><path d="M5 11v1a6 6 0 0012 0v-1M11 19v-2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>}
                {x.ico === 'pen' && <svg width="18" height="18" viewBox="0 0 22 22" fill="none"><path d="M14 4l4 4-9 9-4 1 1-4 8-10z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>}
                {x.ico === 'eye' && <svg width="18" height="18" viewBox="0 0 22 22" fill="none"><path d="M2 11s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6z" stroke="currentColor" strokeWidth="1.6"/><circle cx="11" cy="11" r="3" stroke="currentColor" strokeWidth="1.6"/></svg>}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{x.t}</div>
                <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{x.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '14px 22px 24px' }}>
        <Panel style={{ padding: 16, background: 'var(--hg-sage-tint)', borderColor: 'var(--hg-sage-soft)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 32, height: 32, borderRadius: 10, background: 'var(--hg-sage)', color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8l4 4 6-8" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--hg-ink)' }}>진료 끝나면 5분만</div>
              <div style={{ fontSize: 11, color: 'var(--hg-ink-2)', fontWeight: 600, marginTop: 2 }}>오늘 들은 내용을 함께 정리해요</div>
            </div>
            <span style={{ fontSize: 16, color: 'var(--hg-sage)' }}>›</span>
          </div>
        </Panel>
      </div>
    </>
  );
}

// ────────────────────────────────────────────────────────────
// 보호자 더보기 (모드 전환)
// ────────────────────────────────────────────────────────────
function CaregiverMoreScreen({ navigate }) {
  const s = useStore();
  return (
    <>
      <ScreenHeader title="더보기" sub="보호자 모드" />
      <div style={{ padding: '0 22px 24px' }}>
        <Eyebrow style={{ marginLeft: 4, marginTop: 8 }}>모드</Eyebrow>
        <Panel style={{ padding: 4, marginBottom: 18 }}>
          <button onClick={() => { s.setMode('patient'); navigate('home'); showToast('환자 모드'); }} style={{
            width: '100%', textAlign: 'left',
            padding: 14, display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 4, height: 32, borderRadius: 2, background: 'var(--hg-clay)' }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>환자 모드로 전환</div>
              <div style={{ fontSize: 11, color: 'var(--hg-muted)', fontWeight: 600, marginTop: 2 }}>{s.profile.name}님 시점으로</div>
            </div>
            <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
          </button>
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>{s.profile.name}님의 기록 보기</Eyebrow>
        <Panel style={{ padding: 4, marginBottom: 18 }}>
          {[
            { l: '병원 일정',     go: 'schedule', c: 'var(--hg-clay)' },
            { l: '식사 기록',     go: 'meal',     c: 'var(--hg-sage)' },
            { l: '부작용 기록',   go: 'symptom',  c: 'var(--hg-honey)' },
            { l: '진료 질문 노트', go: 'questions', c: 'var(--hg-mist)' },
            { l: '복용 중인 약',   go: 'meds',      c: 'var(--hg-honey)' },
          ].map((it, i, arr) => (
            <button key={it.l} onClick={() => navigate(it.go)} style={{
              width: '100%', textAlign: 'left',
              padding: 14, display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < arr.length - 1 ? '1px solid var(--hg-line-soft)' : 'none',
            }}>
              <div style={{ width: 4, height: 32, borderRadius: 2, background: it.c }} />
              <div style={{ flex: 1, fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>{it.l}</div>
              <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
            </button>
          ))}
        </Panel>

        <Eyebrow style={{ marginLeft: 4 }}>앱</Eyebrow>
        <Panel style={{ padding: 4 }}>
          <button onClick={() => navigate('settings')} style={{
            width: '100%', textAlign: 'left',
            padding: 14, display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 4, height: 32, borderRadius: 2, background: 'var(--hg-muted)' }} />
            <div style={{ flex: 1, fontSize: 14, fontWeight: 700, color: 'var(--hg-ink)' }}>설정</div>
            <span style={{ color: 'var(--hg-muted)', fontSize: 16 }}>›</span>
          </button>
        </Panel>
      </div>
    </>
  );
}

Object.assign(window, { CaregiverHomeScreen, CaregiverMonitorScreen, CaregiverVisitScreen, CaregiverMoreScreen, StatCard });