/* 아리 — 대시보드 v2 (Rond 클린 화이트 + 아리 결재함)
   v2: '제안만 하는 AI' → '미리 해두고 승인/되돌리기만 받는 AI'
   - ApprovalCard (approve.jsx) · 자율성 수준은 Tweaks로 조절 */
const { useState, useEffect, useRef } = React;
const D = window.AriData;

/* ---------- 아이콘 ---------- */
const P = {
  spark: "M12 3l1.9 5.2L19 10l-5.1 1.8L12 17l-1.9-5.2L5 10l5.1-1.8z|M19 4v3|M5 17v3",
  grid: "M3 3h7v7H3z|M14 3h7v7h-7z|M14 14h7v7h-7z|M3 14h7v7H3z",
  route: "M6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M18 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M9 16h6a3 3 0 0 0 3-3V11",
  cal: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  check: "M9 11l3 3L22 4|M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
  tick: "M20 6 9 17l-5-5",
  mail: "M22 7 13.03 12.7a1.94 1.94 0 0 1-2.06 0L2 7|M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
  target: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z|M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z|M12 12h.01",
  heart: "M19 14c1.5-1.5 3-3.4 3-5.5A4.5 4.5 0 0 0 12 5.5 4.5 4.5 0 0 0 2 8.5c0 2.1 1.5 4 3 5.5l7 7z",
  wallet: "M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5|M16 12h.01",
  brain: "M12 5a3 3 0 1 0-5.9.8A3 3 0 0 0 4 9.5 3 3 0 0 0 6 14a3 3 0 0 0 6 1zM12 5a3 3 0 1 1 5.9.8A3 3 0 0 1 20 9.5 3 3 0 0 1 18 14a3 3 0 0 1-6 1z|M12 5v14",
  zap: "M13 2 3 14h9l-1 8 10-12h-9z",
  settings: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z",
  more: "M5 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM11 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM17 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0z",
  search: "M21 21l-4.34-4.34|M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
  bell: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9|M10.3 21a1.94 1.94 0 0 0 3.4 0",
  back: "M19 12H5|M12 19l-7-7 7-7",
  send: "M22 2 11 13|M22 2 15 22l-4-9-9-4z",
  sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z|M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4",
  moon: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z",
  video: "M23 7l-7 5 7 5zM1 5h15a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H1a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z",
  swap: "M16 3h5v5|M21 3l-7 7|M8 21H3v-5|M3 21l7-7",
  up: "M12 19V5|M5 12l7-7 7 7",
  foot: "M4 16c0-2 .5-4 2-4s2 1 2 3 .5 4-1 4-3-1-3-3z|M8 7c0-2 .5-3 1.5-3S11 5 11 7s0 3-1.5 3S8 9 8 7z|M14 16c0-2-.5-4-2-4s-2 1-2 3-.5 4 1 4 3-1 3-3z|M16 7c0-2-.5-3-1.5-3S13 5 13 7s0 3 1.5 3S16 9 16 7z",
  drop: "M12 2.7S5 10 5 14a7 7 0 0 0 14 0c0-4-7-11.3-7-11.3z",
  zzz: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z|M16 4h4l-4 4h4",
  arrow: "M5 12h14|M13 6l6 6-6 6",
  pin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z|M12 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
  inbox: "M22 12h-6l-2 3h-4l-2-3H2|M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
  mic: "M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z|M19 10v1a7 7 0 0 1-14 0v-1|M12 18v4M8 22h8",
  image: "M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z|M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z|M21 15l-5-5L5 21",
  pen: "M12 20h9|M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z",
  layers: "M12 2 2 7l10 5 10-5z|M2 17l10 5 10-5M2 12l10 5 10-5",
  users: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2|M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z|M23 21v-2a4 4 0 0 0-3-3.87|M16 3.13a4 4 0 0 1 0 7.75",
  clock: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z|M12 7v5l3 2",
  branch: "M6 3v12|M18 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM6 6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M15 12H9a3 3 0 0 0-3 3",
  play: "M6 3l15 9-15 9z",
  flag: "M4 22V4M4 4s1.5-1 5-1 5 2 8 2 4-1 4-1v10s-1.5 1-4 1-5-2-8-2-5 1-5 1",
  rain: "M16 13v6M8 13v6M12 15v6|M20 16.6A5 5 0 0 0 18 7h-1.3A8 8 0 1 0 4 14.9",
  plus: "M12 5v14M5 12h14",
  scaffold: "M3 9h18M9 21V9|M4 4h16a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z",
};
function I({ d, w }) {
  return (
    <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={w || 1.9} strokeLinecap="round" strokeLinejoin="round">
      {P[d].split("|").map((s, i) => <path key={i} d={s} />)}
    </svg>
  );
}

const TONE = { blue: "var(--blue)", violet: "var(--violet)", coral: "var(--coral)", green: "var(--green)" };

const MAIN = [
  { id: "dash", label: "대시보드", icon: "grid", href: "대시보드.html" },
  { id: "sbox", label: "인박스", icon: "inbox", href: "인박스.html" },
  { id: "appr", label: "결재함", icon: "spark", badge: "3", href: "결재함.html" },
  { id: "auto", label: "자동화", icon: "zap", href: "자동화.html" },
  { id: "journey", label: "여정", icon: "route", href: "여정.html" },
  { id: "cal", label: "일정", icon: "cal", href: "일정.html" },
  { id: "task", label: "작업", icon: "check", badge: "4", href: "작업.html" },
  { id: "mail", label: "메일", icon: "mail", href: "메일.html" },
  { id: "noti", label: "알림", icon: "bell", badge: "6", href: "알림.html" },
  { id: "research", label: "리서치", icon: "brain", href: "리서치.html" },
  { id: "trip", label: "여행", icon: "send", href: "여행.html" },
  { id: "life", label: "라이프", icon: "heart", href: "라이프.html" },
  { id: "wrap", label: "하루 마감", icon: "moon", href: "하루 마감.html" },
];
const CURRENT = "dash";
const RAIL = [
  { icon: "grid", label: "오늘 개요" },
  { icon: "cal", label: "일정" },
  { icon: "check", label: "할 일" },
  { icon: "mail", label: "메일" },
  { icon: "target", label: "목표" },
  { icon: "heart", label: "건강" },
  { icon: "wallet", label: "지출" },
  { icon: "zap", label: "자동화" },
  { icon: "brain", label: "리서치" },
];
const CHIPS = [
  { icon: "cal", text: "내일 오후 비워줘" },
  { icon: "mail", text: "중요 메일만 요약" },
  { icon: "video", text: "14시 미팅 준비" },
];

const PRIO = { 높음: "high", 보통: "mid", 낮음: "low" };
const AVCOL = ["var(--coral)", "var(--blue)", "var(--violet)"];

/* 요약 카드용 데이터 — 실행은 전용 페이지(결재함·스마트 인박스)에서 */
const AP = window.AriApprovals;
const SB = window.AriSmartInbox;
const apPending = AP.items.filter((i) => i.risk === "high");

function App() {
  const [theme, setTheme] = useState("light");
  const [tasks, setTasks] = useState(D.tasks);
  const shellRef = useRef(null);

  useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
  useEffect(() => {
    const el = shellRef.current;
    const id = requestAnimationFrame(() => el && el.classList.add("entered"));
    return () => cancelAnimationFrame(id);
  }, []);

  const toggle = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
  const openCount = tasks.filter((t) => !t.done).length;

  return (
    <div className="dash" ref={shellRef}>
      {/* ===== 상단바 — 메인 메뉴 ===== */}
      <header className="topbar">
        <div className="brand">
          <div className="brand-mark"><I d="spark" /></div>
          <div className="brand-tag"><b>아리</b><span>AI LIFE OS</span></div>
        </div>
        <nav className="mainnav">
          {MAIN.map((m) => (
            <a key={m.id} href={m.href} className={CURRENT === m.id ? "active" : ""}>
              <I d={m.icon} />
              {m.label}
              {m.badge && <span className="badge">{m.badge}</span>}
            </a>
          ))}
        </nav>
        <div className="top-actions">
          <button className="t-btn" aria-label="검색"><I d="search" /></button>
          <button className="t-btn dot" aria-label="메일"><I d="mail" /></button>
          <button className="t-btn" aria-label="테마" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
            <I d={theme === "light" ? "moon" : "sun"} />
          </button>
          <div className="t-ava">{D.user.initial}</div>
        </div>
      </header>

      {/* ===== 페이지 헤더 ===== */}
      <div className="pagehead">
        <div>
          <div className="ph-eyebrow">
            <span>{D.today}</span>
            <span className="sep" />
            <span className="wx"><I d="sun" />{D.weather.cond}</span>
          </div>
          <h1 className="ph-title">좋은 아침이에요, {D.user.name}님 <em>☀</em></h1>
        </div>
        <div className="ph-search">
          <I d="search" />
          <input placeholder="아리에게 무엇이든…" />
        </div>
      </div>

      {/* ===== 작업 영역 ===== */}
      <div className="work">
        {/* 보드 — 베n토 그리드 */}
        <div className="board">
          {/* 히어로 — 브리핑 + 명령 */}
          <section className="card hero sp2">
            <span className="hero-spark"><I d="spark" />아리 브리핑</span>
            <p className="brief" dangerouslySetInnerHTML={{ __html: D.briefingNote }} />
            <div className="chips">
              {CHIPS.map((c, i) => (
                <button className="chip" key={i}><I d={c.icon} />{c.text}</button>
              ))}
            </div>
            <div className="cmd">
              <I d="spark" />
              <input placeholder="오늘 하루, 무엇이든 맡겨보세요…" />
              <button className="send" aria-label="보내기"><I d="send" /></button>
            </div>
          </section>

          {/* 결재함 요약 — 실행은 전용 페이지에서 */}
          <section className="card">
            <div className="ch">
              <div className="ico lime"><I d="spark" /></div>
              <div className="htext"><h3>아리 결재함</h3><div className="sub">오늘 {AP.savedToday} 아껴드렸어요</div></div>
              <span className="count warm">대기 {apPending.length}건</span>
            </div>
            <div className="mini-list">
              {apPending.map((it) => (
                <div className="mini-row" key={it.id}>
                  <span className="mini-ic" style={{ "--tone": `var(--${it.tone})` }}><I d={it.icon} /></span>
                  <span className="mini-text">{it.title}</span>
                  <span className="mini-sub">{it.time}</span>
                </div>
              ))}
            </div>
            <a className="mini-cta" href="결재함.html"><I d="tick" w="3" />결재함에서 승인하기</a>
          </section>

          {/* 인박스 요약 — 캡처·분류는 전용 페이지에서 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="inbox" /></div>
              <div className="htext"><h3>스마트 인박스</h3><div className="sub">적으면 아리가 제자리로</div></div>
              <span className="count">오늘 {SB.todayRouted}건</span>
            </div>
            <div className="mini-list">
              {SB.items.slice(0, 3).map((c) => (
                <div className="mini-row" key={c.id}>
                  <span className="mini-ic" style={{ "--tone": `var(--${c.route.tone})` }}><I d={c.kind === "voice" ? "mic" : c.kind === "image" ? "image" : "pen"} /></span>
                  <span className="mini-text">{c.raw}</span>
                  <span className="mini-sub">{c.route.typeLabel}</span>
                </div>
              ))}
            </div>
            <a className="mini-cta" href="인박스.html"><I d="plus" />새로 적기 · 인박스 열기</a>
          </section>

          {/* 오늘의 집중 모드 — 캘린더 빈 블록에 맞춰 큐레이션 */}
          <section className="card foc r2">
            <div className="ch">
              <div className="ico"><I d="target" /></div>
              <div className="htext"><h3>오늘의 집중</h3><div className="sub">Focus of the Day</div></div>
              <span className="count">4블록</span>
            </div>
            <p className="foc-note" dangerouslySetInnerHTML={{ __html: D.focus.note }} />
            <div className="foc-track">
              {D.focus.blocks.map((b, i) => (
                <div className={"foc-block " + b.type} key={i}>
                  <div className="fb-time">{b.time}</div>
                  <div className="fb-card">
                    <div className="fb-top">
                      <span className={"fb-tag " + b.type}>{b.tag}</span>
                      <span className="fb-len">{b.len}</span>
                    </div>
                    <div className="fb-title">{b.title}</div>
                    <div className="fb-gap"><I d="clock" />{b.gap}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* 오늘 일정 */}
          <section className="card r2">
            <div className="ch">
              <div className="ico"><I d="cal" /></div>
              <div className="htext"><h3>오늘 일정</h3><div className="sub">4개 · 다음까지 2시간</div></div>
              <button className="tool"><I d="more" /></button>
            </div>
            <div className="sched">
              {D.schedule.map((e, i) => (
                <div className="ev" key={i}>
                  <div className="ev-time">{e.time}</div>
                  <div className="ev-body" style={{ "--accent": TONE[e.tone] }}>
                    <div className="ev-title">{e.title}</div>
                    <div className="ev-meta"><span>{e.tag}</span><span className="dur">{e.dur}</span></div>
                  </div>
                  {e.soon && <span className="soon">곧</span>}
                </div>
              ))}
              <div className="sched-note"><I d="bell" />치과 예약은 16:00로 옮겨뒀어요 — 결재함에서 되돌릴 수 있어요.</div>
            </div>
          </section>

          {/* 할 일 */}
          <section className="card r2">
            <div className="ch">
              <div className="ico"><I d="check" /></div>
              <div className="htext"><h3>할 일</h3></div>
              <span className="count">{openCount}개 남음</span>
            </div>
            <div className="tasks">
              {tasks.map((t, idx) => {
                const focus = !t.done && idx === 0;
                return (
                  <div key={t.id} className={"task" + (t.done ? " done" : "") + (focus ? " focus" : "")} onClick={() => toggle(t.id)}>
                    <div className="box"><I d="tick" w="3" /></div>
                    <div className="task-body">
                      <div className="task-title">{t.title}</div>
                      <div className="task-meta">{t.project}</div>
                    </div>
                    {focus
                      ? <span className="focus-tag">지금</span>
                      : !t.done && <span className={"prio " + PRIO[t.prio]}>{t.prio}</span>}
                  </div>
                );
              })}
            </div>
          </section>

          {/* 미팅 준비 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="video" /></div>
              <div className="htext"><h3>미팅 준비</h3></div>
            </div>
            <div className="mtg-when">{D.meeting.title} · {D.meeting.when}</div>
            <div className="mtg-people">
              {D.meeting.people.slice(0, 3).map((p, i) => (
                <div className="av" key={i} style={{ background: AVCOL[i] }}>{p[0]}</div>
              ))}
              <span className="more">{D.meeting.people.join(", ")}</span>
            </div>
            <ul className="mtg-brief">
              {D.meeting.brief.map((b, i) => (
                <li key={i}><span className="dot" />{b}</li>
              ))}
            </ul>
            <div className="mtg-actions">
              <div className="ma-head"><I d="spark" />내가 맡기로 한 일 · {D.meeting.recap}</div>
              {D.meeting.actions.map((a, i) => (
                <div className="ma-row" key={i}>
                  <span className="ma-check"><I d="tick" w="3" /></span>
                  <span className="ma-text">{a.text}</span>
                  <span className="ma-meta">{a.when}</span>
                </div>
              ))}
            </div>
            <button className="mtg-cta"><I d="spark" />브리핑 열기</button>
          </section>

          {/* 위임 현황 — 매니지먼트 & 위임 */}
          <section className="card deleg">
            <div className="ch">
              <div className="ico"><I d="users" /></div>
              <div className="htext"><h3>위임 현황</h3><div className="sub">대기 중인 작업</div></div>
            </div>
            <div className="dg-suggest">
              <div className="dg-s-ic"><I d="spark" /></div>
              <p>오늘 일정이 꽉 차 ‘{D.delegation.suggest.task}’를 직접 하기 빠듯해요. ‘{D.delegation.suggest.proj}’를 함께 하는 <b>{D.delegation.suggest.who}</b>님께 넘기고 진행은 제가 추적할게요.</p>
            </div>
            <div className="dg-list">
              {D.delegation.waiting.map((w, i) => (
                <div className={"dg-row" + (w.review ? " review" : "")} key={i}>
                  <div className="dg-av" style={{ background: w.c }}>{w.initial}</div>
                  <div className="dg-body">
                    <div className="dg-task">{w.task}</div>
                    <div className="dg-sub">{w.who}님 · {w.note}</div>
                  </div>
                  <span className={"dg-state" + (w.review ? " review" : "")}>{w.state}</span>
                </div>
              ))}
            </div>
          </section>

          {/* 이어가기 & 우선순위 — 개인 프로젝트 스마트 어시스턴트 */}
          <section className="card resume">
            <div className="ch">
              <div className="ico"><I d="play" /></div>
              <div className="htext"><h3>이어서 하기</h3><div className="sub">맥락이 끊기지 않게</div></div>
            </div>
            <div className="rs-card">
              <div className="rs-top">
                <span className="rs-proj">{D.resume.project}</span>
                <span className="rs-ago">{D.resume.ago}</span>
              </div>
              <p className="rs-ctx">{D.resume.context}</p>
              <div className="rs-next"><span className="rs-next-lb">다음</span>{D.resume.next}</div>
              <button className="rs-cta"><I d="play" />이어서 작업하기</button>
            </div>
            <div className="env-nudge">
              <div className="en-ic"><I d="rain" /></div>
              <div className="en-body">
                <div className="en-task">{D.envNudge.task}</div>
                <div className="en-reason">{D.envNudge.reason}</div>
              </div>
              <span className="en-flag"><I d="flag" />최우선</span>
            </div>
          </section>

          {/* 이번 주 집중도 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="zap" /></div>
              <div className="htext"><h3>이번 주 집중도</h3><div className="sub">딥 워크 시간</div></div>
              <button className="tool"><I d="more" /></button>
            </div>
            <div className="focus-stat">
              <b>27.4</b><span className="u">시간</span>
              <span className="delta"><I d="up" />+12%</span>
            </div>
            <div className="chart">
              <svg viewBox="0 0 300 130" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="var(--ink)" stopOpacity="0.16" />
                    <stop offset="1" stopColor="var(--ink)" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <path d="M6 96 L48 80 L90 88 L132 54 L174 64 L216 36 L258 48 L294 26 L294 130 L6 130 Z" fill="url(#fg)" />
                <polyline points="6,96 48,80 90,88 132,54 174,64 216,36 258,48 294,26"
                  fill="none" stroke="var(--ink)" strokeWidth="2.2" strokeLinejoin="round" strokeLinecap="round" />
                <circle cx="216" cy="36" r="4" fill="var(--ink)" stroke="var(--card)" strokeWidth="2.5" />
              </svg>
              <div className="chart-x">
                {["월","화","수","목","금","토","일"].map((d) => <span key={d}>{d}</span>)}
              </div>
            </div>
          </section>

          {/* 목표 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="target" /></div>
              <div className="htext"><h3>목표</h3></div>
            </div>
            <div className="goals">
              {D.goals.map((g, i) => (
                <div key={i}>
                  <div className="goal-top">
                    <span className="goal-title">{g.title}</span>
                    <span className="goal-pct">{g.pct}%</span>
                  </div>
                  <div className="goal-bar"><i style={{ width: g.pct + "%", background: g.c }} /></div>
                  <div className="goal-sub">{g.sub}</div>
                </div>
              ))}
            </div>
          </section>

          {/* 메일 요약 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="mail" /></div>
              <div className="htext"><h3>메일 요약</h3></div>
              <span className="count">{D.emailCount}통</span>
            </div>
            <div className="mails">
              {D.emails.map((m, i) => (
                <div className="mail-row" key={i}>
                  <span className="mail-dot" style={{ background: TONE[m.tone] }} />
                  <div className="mail-body">
                    <div className="mail-from">
                      <b>{m.from}</b>
                      {m.task && <span className="mail-task">할 일</span>}
                      <span className="t">{m.time}</span>
                    </div>
                    <div className="mail-subj">{m.subj}</div>
                    <div className="mail-sum">{m.summary}</div>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* 건강 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="heart" /></div>
              <div className="htext"><h3>건강 & 웰니스</h3></div>
            </div>
            <div className="rings">
              {D.health.rings.map((r, i) => {
                const ico = { footprints: "foot", moonZz: "zzz", droplet: "drop" }[r.icon];
                return (
                  <div className="ring" key={i}>
                    <div className="dial" style={{ background: `conic-gradient(${r.c} ${r.pct}%, var(--card-2) 0)` }}>
                      <I d={ico} />
                    </div>
                    <div className="rv">{r.val}</div>
                    <div className="rl">{r.label}</div>
                  </div>
                );
              })}
            </div>
            <div className="health-nudge"><I d="drop" />{D.health.nudge}</div>
          </section>

          {/* 지출 */}
          <section className="card">
            <div className="ch">
              <div className="ico"><I d="wallet" /></div>
              <div className="htext"><h3>이번 달 지출</h3></div>
            </div>
            <div className="fin-big"><b>{D.finance.spentPct}%</b><span className="u">예산 사용</span></div>
            <div className="fin-delta">{D.finance.delta}</div>
            <div className="fin-bar"><i style={{ width: D.finance.spentPct + "%" }} /></div>
            <div className="fin-range">
              <span>₩{D.finance.spent}</span><span>₩{D.finance.budget}</span>
            </div>
            <div className="fin-subs">
              {D.finance.subs.map((s, i) => (
                <div className="fin-sub" key={i}>
                  <span className="nm">{s.name}</span>
                  <span className="dt">{s.date}</span>
                  <span className="amt">₩{s.amt}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>

    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);