/* ============================================================
   screens.jsx — 홈 · 사주 풀이 · 궁합 · 다이어리 (라이트)
   ============================================================ */
const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ---------- 프로필 입력 폼 ---------- */
function ProfileForm({ initial, onSubmit, submitLabel = "사주 풀어보기", who = "나" }) {
  const [name, setName] = uS(initial?.name || "");
  const [gender, setGender] = uS(initial?.gender || "");
  const [y, setY] = uS(initial?.y || "");
  const [m, setM] = uS(initial?.m || "");
  const [d, setD] = uS(initial?.d || "");
  const [hour, setHour] = uS(initial?.hour ?? "");

  const HOURS = [
    ["", "시간 모름"], ["0","자시 23–01시"], ["2","축시 01–03시"], ["4","인시 03–05시"],
    ["6","묘시 05–07시"], ["8","진시 07–09시"], ["10","사시 09–11시"], ["12","오시 11–13시"],
    ["14","미시 13–15시"], ["16","신시 15–17시"], ["18","유시 17–19시"], ["20","술시 19–21시"], ["22","해시 21–23시"],
  ];
  const valid = name.trim() && y && m && d && (+y>=1930 && +y<=2025) && gender;

  return (
    <div className="form-card card rise">
      <div className="form-grid">
        <div className="field">
          <label>{who}의 이름 (또는 애칭)</label>
          <input className="input" value={name} onChange={e=>setName(e.target.value)} placeholder={who==="나"?"예) 서연":"예) 그 사람"} />
        </div>
        <div className="field">
          <label>생년월일 (양력)</label>
          <div className="dob-grid">
            <input className="input" type="number" inputMode="numeric" value={y} onChange={e=>setY(e.target.value)} placeholder="1996" />
            <select className="input" value={m} onChange={e=>setM(e.target.value)}>
              <option value="">월</option>
              {Array.from({length:12},(_,i)=><option key={i} value={i+1}>{i+1}월</option>)}
            </select>
            <select className="input" value={d} onChange={e=>setD(e.target.value)}>
              <option value="">일</option>
              {Array.from({length:31},(_,i)=><option key={i} value={i+1}>{i+1}일</option>)}
            </select>
          </div>
        </div>
        <div className="field">
          <label>태어난 시각 <span style={{color:"var(--text-faint)",fontWeight:400}}>· 선택</span></label>
          <select className="input" value={hour} onChange={e=>setHour(e.target.value)}>
            {HOURS.map(([v,t])=><option key={v} value={v}>{t}</option>)}
          </select>
        </div>
        <div className="field">
          <label>성별</label>
          <div className="gender-row">
            <div className={"chip "+(gender==="여"?"on":"")} onClick={()=>setGender("여")}>여성</div>
            <div className={"chip "+(gender==="남"?"on":"")} onClick={()=>setGender("남")}>남성</div>
          </div>
        </div>
      </div>
      <button className="btn" style={{width:"100%", marginTop:20}} disabled={!valid}
              onClick={()=>onSubmit({name:name.trim(), gender, y:+y, m:+m, d:+d, hour: hour===""?null:+hour})}>
        {submitLabel}
      </button>
    </div>
  );
}

/* ---------- AI 해석 블록 ---------- */
function AIReading({ prompt, persona, deps, intro }) {
  const [text, setText] = uS("");
  const [loading, setLoading] = uS(true);
  uE(() => {
    let alive = true;
    setLoading(true); setText("");
    (async () => {
      try {
        const out = await window.askClaude(prompt);
        if (alive) { setText(out); setLoading(false); }
      } catch (e) {
        if (alive) { setText("지금은 기운을 읽기 어렵네요. 잠시 후 다시 시도해 주세요."); setLoading(false); }
      }
    })();
    return () => { alive = false; };
  }, deps);
  return (
    <div className="ai-reading">
      <div className="ai-badge"><span className="dot"></span> {persona} · AI 해석</div>
      {loading ? (
        <div style={{display:"flex",flexDirection:"column",gap:11}}>
          <div style={{color:"var(--text-dim)",fontSize:14}}>{intro||"기운을 읽는 중"}</div>
          <window.Typing />
        </div>
      ) : (
        <div className="body-txt">{text}</div>
      )}
    </div>
  );
}

/* ============================================================
   HOME
   ============================================================ */
function Home({ nav, profile, diary }) {
  const f = window.dailyFortune(profile?.name);
  const today = new Date();
  const dateStr = `${today.getFullYear()}.${String(today.getMonth()+1).padStart(2,"0")}.${String(today.getDate()).padStart(2,"0")} (${["일","월","화","수","목","금","토"][today.getDay()]})`;

  return (
    <div className="page">
      <div className="greet rise">
        <div className="hi">{profile?.name ? <><em>{profile.name}</em>님, 안녕하세요</> : <>오늘의 인연을 엽니다</>}</div>
        <div className="sub">달 아래, 당신의 연애 기운을 살펴봤어요.</div>
      </div>

      <div className="hero rise" style={{animationDelay:".04s"}}>
        <div className="hero-top">
          <div>
            <div className="hero-eyebrow">오늘의 연애운</div>
            <div className="hero-date">{dateStr}</div>
          </div>
          <window.ScoreRing value={f.score} size={84} stroke={7}
            color="#fff" trackColor="rgba(255,255,255,0.28)" textColor="#fff" labelColor="rgba(255,255,255,0.85)" label="총운" />
        </div>
        <div className="hero-headline">“{f.headline}”</div>
        <div className="hero-lucks">
          <div className="hl"><b>행운의 시간</b><span>{f.time}</span></div>
          <div className="hl"><b>행운의 색</b><span>{f.color}</span></div>
        </div>
      </div>

      <div className="stat-card card rise" style={{animationDelay:".08s"}}>
        <window.StatBar label="애정운" value={f.love} color="var(--pink)" />
        <window.StatBar label="만남운" value={f.meet} color="var(--primary)" />
        <window.StatBar label="안정운" value={f.stable} color="var(--blue)" />
      </div>

      <div className="sec-label">무엇을 볼까요?</div>
      <div className="tiles">
        {[
          {g:"卜", t:"종합 사주 풀이", d:"성격·직업·재물·연애·건강의 흐름", r:"saju", grad:"linear-gradient(135deg,#7C5CFF,#A86BF0)"},
          {g:"緣", t:"궁합 보기", d:"나와 그 사람, 두 기운이 만나면", r:"compat", grad:"linear-gradient(135deg,#F56FA7,#FF9CC4)"},
          {g:"瞳", t:"AI 연애 상담", d:"명리·심리·코칭, 그 사람 마음을 물어보세요", r:"chat", grad:"linear-gradient(135deg,#5B93F0,#7C6BE8)"},
        ].map((x,i)=>(
          <div key={i} className="tile rise" style={{animationDelay:`${.1+i*.04}s`}} onClick={()=>nav(x.r)}>
            <div className="t-glyph serif" style={{background:x.grad}}>{x.g}</div>
            <div className="t-txt"><h3>{x.t}</h3><p>{x.d}</p></div>
            <div className="arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg></div>
          </div>
        ))}
      </div>

      <div className="section-title">
        <h2>상담 다이어리</h2>
        {diary.length>0 && <a onClick={()=>nav("diary")}>전체 보기</a>}
      </div>
      {diary.length === 0 ? (
        <div className="empty-state card">
          <div className="eglyph serif">緣</div>
          <p>아직 기록된 인연이 없어요.<br/>사주를 풀거나 상담을 시작하면 여기에 모여요.</p>
        </div>
      ) : (
        <div className="recent">
          {diary.slice(0,3).map((it)=>(
            <div key={it.id} className="recent-row" onClick={()=>nav(it.kind==="analysis"?"analysis":it.kind==="compat"?"compat":it.kind==="chat"?"chat":"diary", it)}>
              <div className="rdot" style={{background: it.color||"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}>{it.glyph||"緣"}</div>
              <div className="rmid"><b>{it.title}</b><span>{it.preview}</span></div>
              <div className="rtime">{it.when}</div>
            </div>
          ))}
        </div>
      )}

      <div className="disclaimer">月下의 풀이는 명리학·심리학에 기반한 해석이며,<br/>재미와 위로를 위한 참고용입니다.</div>
    </div>
  );
}

/* ============================================================
   종합 사주 풀이
   ============================================================ */
function SajuScreen({ nav, profile, setProfile, addDiary }) {
  const [editing, setEditing] = uS(!profile);
  const [loading, setLoading] = uS(false);
  const [loadingMessage, setLoadingMessage] = uS("천간과 지지를 세우는 중…");
  const loadingTimers = uR([]);
  const saju = profile ? window.computeSaju(profile) : null;
  const loadingMessages = [
    "천간과 지지를 세우는 중…",
    "오행의 균형을 분석하는 중…",
    "대운의 흐름을 읽는 중…",
    "당신만의 사주를 완성하는 중…",
  ];
  const msgIndex = Math.max(0, loadingMessages.indexOf(loadingMessage));
  const runLoadingSequence = (p) => {
    loadingTimers.current.forEach(clearTimeout);
    setProfile(p);
    setLoading(true);
    setLoadingMessage(loadingMessages[0]);
    loadingTimers.current = [
      setTimeout(() => setLoadingMessage(loadingMessages[1]), 1000),
      setTimeout(() => setLoadingMessage(loadingMessages[2]), 2000),
      setTimeout(() => setLoadingMessage(loadingMessages[3]), 2500),
      setTimeout(() => { setLoading(false); setEditing(false); }, 2500),
    ];
  };
  uE(() => () => loadingTimers.current.forEach(clearTimeout), []);

  if (loading) {
    return (
      <window.LoadingScreen variant="orbit" step={msgIndex} />
    );
  }

  if (editing || !profile) {
    return (
      <div className="page">
        <div className="page-head rise">
          <span className="eyebrow">命理 · SAJU</span>
          <h1>종합 사주 풀이</h1>
          <p>생년월일과 태어난 시각으로 네 기둥을 세우고, 성격·직업운·재물운·연애운·건강운의 흐름을 함께 풀이해 드려요.</p>
        </div>
        <ProfileForm initial={profile} onSubmit={(p)=>{ runLoadingSequence(p); }} />
        <div className="disclaimer">입력한 정보는 이 기기에만 저장됩니다.</div>
      </div>
    );
  }

  const meta = saju.meta;
  const report = saju.freeReport || {};
  const reportData = report.data || {};
  const reportSections = report.sections || {};
  const elementStats = reportData.elementStats || { counts:{}, strong:[], weak:[] };
  const totalLetters = elementStats.totalLetters || 8;
  const elementColors = { "목":"#2E9D62", "화":"#E64C3C", "토":"#D4AC0D", "금":"#7F8C8D", "수":"#1A252F" };
  const strongElements = (elementStats.strong || []).join(", ") || "없음";
  const weakElements = (elementStats.weak || []).join(", ");
  const hasDohwa = !!reportData.shinsal?.active?.some((s) => s.key === "dohwa");
  const currentAge = new Date().getFullYear() - profile.y;
  const daeunList = reportData.daeun?.list || [];
  const orreryDaewoon = reportData.orreryDaewoon || [];
  const orrerySpecialSals = reportData.orrerySpecialSals;
  const hasSpecialSal = (key) => Array.isArray(orrerySpecialSals)
    ? orrerySpecialSals.some((s) => s.key === key && s.active)
    : orrerySpecialSals?.[key] === true || (Array.isArray(orrerySpecialSals?.[key]) && orrerySpecialSals[key].length > 0) || !!reportData.shinsal?.active?.some((s) => s.key === key);
  const specialSalBadges = orrerySpecialSals ? [
    hasSpecialSal("goegang") && "괴강살 剛",
    hasSpecialSal("baekho") && "백호살 虎",
    hasSpecialSal("hongyeom") && "홍염살 炎",
    hasSpecialSal("yangin") && "양인살 刃",
    hasSpecialSal("cheonul") && "천을귀인 ☽",
    hasSpecialSal("cheonduk") && "천덕귀인 德",
    hasSpecialSal("wolduk") && "월덕귀인 月",
    hasSpecialSal("munchang") && "문창귀인 文",
    hasSpecialSal("geumyeo") && "금여귀인 輿",
    hasSpecialSal("dohwa") && "도화살 🌸",
  ].filter(Boolean) : [];
  const wealthSummary = (report.wealthTeasing || reportSections.wealth?.summary || "").split(/(?<=다\.|요\.|죠\.|니다\.)\s*/).filter(Boolean).slice(0, 3).join(" ");
  const currentDaeunIndex = daeunList.findIndex((d) => d.ageStart <= currentAge && currentAge <= d.ageEnd);
  const currentDaeun = currentDaeunIndex >= 0 ? daeunList[currentDaeunIndex] : null;
  const currentOrreryDaeun = currentDaeunIndex >= 0 ? orreryDaewoon?.[currentDaeunIndex] : null;
  const daeunProgress = currentDaeun ? Math.max(0, Math.min(100, Math.round(((currentAge - currentDaeun.ageStart) / 10) * 100))) : 0;
  const ageBand = currentAge < 25 ? "early" : currentAge < 35 ? "late20s" : currentAge < 45 ? "mid30s" : currentAge < 55 ? "mid40s" : "senior";
  const hookTitle = {
    early: "지금은 방향이 흔들리는 게 정상이에요",
    late20s: "일·돈·관계가 동시에 엉키는 구간이에요",
    mid30s: "30대는 사주에서 변수가 가장 많은 구간이에요",
    mid40s: "지금까지 쌓아온 것이 재편되는 시기예요",
    senior: "지금까지 쌓은 것의 결과가 나오는 시기예요",
  }[ageBand];
  const salLabels = {
    dohwa: "도화살",
    hongyeom: "홍염살",
    gwimun: "귀문관살",
    wonjin: "원진살",
    hwagae: "화개살",
    yeokma: "역마살",
    baekho: "백호살",
    goegang: "괴강살",
    yangin: "양인살",
    cheonul: "천을귀인",
    cheonduk: "천덕귀인",
    wolduk: "월덕귀인",
    munchang: "문창귀인",
    geumyeo: "금여귀인",
  };
  const SAL_EXPLANATIONS = {
    dohwa: "내면에 숨겨진 매력이 폭발하여 이성들의 이목(인스타 DM 등)이 집중되는 시기이나, 원치 않는 구설수나 피곤한 치정 관계에 휘말릴 수 있는 아슬아슬한 상태입니다.",
    hongyeom: "특유의 분위기로 상대를 강하게 끌어당기는 무의식적 매력이 짙어지나, 감정 기복과 충동적인 매력 발산으로 어장관리라는 치명적인 오해를 살 수 있는 흐름입니다.",
    gwimun: "직관력과 촉이 비상하게 발달하는 시기이나, 예민함이 극에 달해 상대방의 사소한 행동에도 과몰입하거나 혼자만의 망상·집착으로 멘탈이 무너지기 쉬운 구간입니다.",
    wonjin: "인간관계에서 애증이 교차하며, 특별한 이유 없이 상대가 미워지거나 사소한 오해로 썸남/썸녀와 환장할 밀당의 늪에 빠지기 쉬운 감정선입니다.",
    yeokma: "역동적인 이동수가 들어와 퇴사 욕구, 이직병, 혹은 이사 충동이 강하게 들며, 현실에 안주하지 못하고 계속 밖으로 겉돌게 되는 붕 뜬 상태입니다.",
    hwagae: "화려함을 덮고 내면으로 침잠하는 기운이라, 인간관계에 현타를 느끼고 혼자만의 동굴로 들어가거나 헤어진 전 연인을 자꾸 회상하게 되는 고독한 타이밍입니다.",
    baekho: "폭발적인 에너지가 들어와 회사나 관계에서 홧김에 사표를 던지거나 스트레스성 충동 지출을 감행하여 자산이 크게 요동칠 수 있는 위기입니다.",
    goegang: "주도권과 고집이 극대화되어, 직장이나 연애에서 절대 타협하지 않고 내 방식만 밀어붙이다가 자칫 주변으로부터 고립될 수 있는 상태입니다.",
    yangin: "경쟁심과 칼날 같은 결단력이 솟구쳐 내 이익을 쟁취하기엔 좋으나, 그 과정에서 주변 사람들에게 의도치 않게 상처를 썰어버릴 수 있는 날 선 흐름입니다.",
    cheonul: "인생의 든든한 방어막과 조력자가 들어온 시기이니, 혼자 소파에 누워 고민하지 말고 주변에 적극적으로 SOS를 쳐야 위기가 풀리는 흐름입니다.",
    cheonduk: "인생의 든든한 방어막과 조력자가 들어온 시기이니, 혼자 소파에 누워 고민하지 말고 주변에 적극적으로 SOS를 쳐야 위기가 풀리는 흐름입니다.",
    wolduk: "인생의 든든한 방어막과 조력자가 들어온 시기이니, 혼자 소파에 누워 고민하지 말고 주변에 적극적으로 SOS를 쳐야 위기가 풀리는 흐름입니다.",
    munchang: "생각과 말, 문서운이 살아나는 시기이니 감으로 버티기보다 기록, 제안서, 포트폴리오처럼 보이는 결과물로 기회를 잡아야 하는 흐름입니다.",
    geumyeo: "평판과 호감 자산이 붙는 시기이니 혼자 숨어 있기보다 좋은 자리, 좋은 사람, 좋은 제안을 선별해 받아야 운이 열리는 흐름입니다.",
    default: "대운의 기류가 크게 요동치며 환경적 변화를 자극하고 있으니, 관성대로 움직이기보다 내실을 다져야 리스크를 방어할 수 있는 구간입니다.",
  };
  const hookSalKey = ["dohwa", "hongyeom", "gwimun", "wonjin", "hwagae", "yeokma", "baekho", "goegang", "yangin", "cheonul", "cheonduk", "munchang", "geumyeo"].find(hasSpecialSal);
  const hookSal = hookSalKey ? salLabels[hookSalKey] : "신살 변동";
  const hookSalExplanation = SAL_EXPLANATIONS[hookSalKey] || SAL_EXPLANATIONS.default;
  const findDaeunValue = (obj, keys) => {
    if (!obj || typeof obj !== "object") return "";
    for (const key of keys) if (obj[key]) return obj[key];
    for (const value of Object.values(obj)) {
      const found = findDaeunValue(value, keys);
      if (found) return found;
    }
    return "";
  };
  const daeunTenStar = findDaeunValue(currentOrreryDaeun, ["tenStar","tenStars","sipsin","sibsin","십신"]) || "십신 미상";
  const daeunStage = findDaeunValue(currentOrreryDaeun, ["twelveStage","twelveFortune","unseong","운성","12운성"]) || "12운성 미상";
  const hasHookCard = !!currentDaeun;
  const lockText = `${currentAge}세 ${currentDaeun?.gapja || ""} 대운에서 ${hookSal}과 ${saju.dayMaster.h}${saju.dayMaster.k}${saju.dayMaster.el} 일간이 만나는 구체적 선택지를 확인하세요.`;
  const renderTextCard = (title, body, extra) => (
    <div className="panel card rise" key={title}>
      <h3 style={{marginBottom: extra ? 12 : 16}}>{title}</h3>
      {extra}
      <div className="body-txt" style={{lineHeight:1.85, wordBreak:"keep-all"}}>{body}</div>
    </div>
  );
  const renderBadges = (items) => (
    <div style={{display:"flex", flexWrap:"wrap", gap:8, marginBottom:18, justifyContent:"center"}}>
      {items.filter(Boolean).map((item, i) => <span className="tag-pill" key={i}>{item}</span>)}
    </div>
  );

  return (
    <div className="page">
      <div className="stack">
        <div className="result-head card rise">
          <div className="animal-orb">{saju.animal.emoji}</div>
          <div className="rh-txt">
            <h1>{profile.name}님은 {meta.aura}</h1>
            <div className="sub">{saju.animal.an}띠 · 일간 {saju.dayMaster.h}{saju.dayMaster.k} · {meta.name}</div>
            <div>
              <span className="tag-pill">{meta.focus}</span>
              <span className="tag-pill">{saju.yinYang}</span>
            </div>
          </div>
        </div>

        <div className="card rise panel">
          <h3>네 기둥 四柱</h3>
          <window.PillarRow saju={saju} />
        </div>

        <div className="panel card rise">
          <h3>{report.headline || "정밀 만세력 무료 리포트"}</h3>
          <div className="aura-line">
            <span className="swatch" style={{background:meta.color}}></span>
            <b>{meta.aura}</b><span>{meta.name}</span>
          </div>
          <div className="aura-line">
            <span className="swatch" style={{background:"var(--gold)"}}></span>
            <b>{elementStats.strongLabel || "오행 강점 분석"}</b>
          </div>
          {weakElements && (
            <div className="aura-line" style={{marginBottom:8}}>
              <span className="swatch" style={{background:"var(--text-faint)"}}></span>
              <b>{elementStats.weakLabel}</b>
            </div>
          )}
          <div style={{display:"grid", gap:10, margin:"14px 0 16px"}}>
            {["목","화","토","금","수"].map((el) => {
              const count = elementStats.counts?.[el] || 0;
              const width = `${Math.round((count / totalLetters) * 100)}%`;
              return (
                <div key={el} style={{display:"flex", alignItems:"center", gap:10}}>
                  <span style={{width:38, fontSize:13, color:"var(--text-dim)", fontWeight:700}}>{el}행</span>
                  <div style={{flex:1, height:8, borderRadius:99, background:"var(--track)", overflow:"hidden"}}>
                    <div style={{height:"100%", width, borderRadius:99, background:elementColors[el]}}></div>
                  </div>
                  <span className="serif" style={{width:24, textAlign:"right", color:"var(--text)"}}>{count}</span>
                </div>
              );
            })}
          </div>
          <div className="body-txt">{report.summary}</div>
        </div>

        {renderTextCard("성격과 기질", reportSections.personality?.summary, renderBadges([
          `${saju.dayMaster.h} ${saju.dayMaster.k}${saju.dayMaster.el}`,
          saju.yinYang,
          `강한 오행 ${strongElements}`,
        ]))}

        {renderTextCard("직업 적성", reportSections.career?.summary, renderBadges([
          `강한 오행 ${strongElements}`,
          weakElements && `약한 오행 ${weakElements}`,
        ]))}

        {renderTextCard("연애·이성운", reportSections.loveMarriage?.summary, renderBadges([
          meta.love,
          hasDohwa && "🌸 도화살",
        ]))}

        {renderTextCard("건강", reportSections.health?.summary, renderBadges([
          `강한 오행 ${strongElements}`,
          weakElements && `약한 오행 ${weakElements}`,
        ]))}

        <div className="panel card rise">
          <h3>대운 흐름</h3>
          <div style={{display:"flex", gap:10, overflowX:"auto", paddingBottom:4}}>
            {daeunList.map((d, i) => {
              const active = d.ageStart <= currentAge && currentAge <= d.ageEnd;
              const isGongmang = orreryDaewoon?.[i]?.isGongmang === true;
              return (
                <div key={i} style={{
                  flex:"0 0 auto",
                  minWidth:88,
                  padding:"14px 12px",
                  borderRadius:16,
                  textAlign:"center",
                  border: active ? "1.5px solid var(--primary)" : "1px solid var(--line)",
                  background: active ? "rgba(124,92,255,.10)" : "rgba(255,255,255,.04)",
                }}>
                  <div className="serif" style={{fontSize:20, color: active ? "var(--primary)" : "var(--text)", marginBottom:8}}>{d.gapja}</div>
                  <div style={{fontSize:11.5, color:"var(--text-dim)", lineHeight:1.6, letterSpacing:"0.02em"}}>{d.ageStart}~{d.ageEnd}세</div>
                  {isGongmang && <div style={{fontSize:10.5, color:"var(--text-faint)", marginTop:6, letterSpacing:"0.05em"}}>空</div>}
                </div>
              );
            })}
          </div>
        </div>

        {specialSalBadges.length > 0 && (
          <div className="panel card rise">
            <h3>신살 · 귀인</h3>
            <div style={{display:"flex", flexWrap:"wrap", gap:10, marginTop:4}}>
              {specialSalBadges.map((label, i) => <span className="tag-pill" key={i}>{label}</span>)}
            </div>
          </div>
        )}

        <div className="panel card rise" style={{borderColor:"rgba(212,172,13,.45)", boxShadow:"0 18px 48px rgba(212,172,13,.11)"}}>
          <h3>재물운 및 평생 자산 흐름 진단</h3>
          <div className="aura-line">
            <span className="swatch" style={{background:"var(--gold)"}}></span>
            <b>30~40대 자산 분기점</b>
            <span style={{flex:1,lineHeight:1.5}}>무료 진단 이후 프리미엄 손실 구간 분석으로 이어집니다.</span>
          </div>
          <div className="body-txt">{wealthSummary}</div>
        </div>

        {hasHookCard && (
          <div className="panel card rise" style={{border:"1px solid rgba(245,111,167,.55)", boxShadow:"0 18px 52px rgba(245,111,167,.16)"}}>
            <div style={{fontSize:12.5, color:"var(--pink)", fontWeight:700, marginBottom:10, lineHeight:1.5}}>
              {currentDaeun.gapja} 대운 · {currentDaeun.ageStart}~{currentDaeun.ageEnd}세 · {hookSal}
            </div>
            <h3>{hookTitle}</h3>
            <div className="body-txt" style={{lineHeight:1.85, wordBreak:"keep-all"}}>
              <div>• 현재 {currentAge}세는 {currentDaeun.gapja} 대운의 {daeunProgress}% 지점이고, {daeunTenStar}·{daeunStage} 흐름이 현실 선택에 영향을 줍니다.</div>
              <div>• {saju.dayMaster.h}{saju.dayMaster.k}{saju.dayMaster.el} 일간은 강한 오행 {strongElements}을 밀어붙일 때 성과가 나지만, 약한 오행 {weakElements || "없음"}이 돈과 관계의 빈틈으로 드러날 수 있습니다.</div>
              <div>• {hookSal} 신호가 겹치는 구간입니다. {hookSalExplanation}</div>
            </div>
            <div style={{margin:"18px 0"}}>
              <div style={{display:"flex", justifyContent:"space-between", fontSize:11.5, color:"var(--text-dim)", marginBottom:8}}>
                <span>대운 시작</span><span>현재 {currentAge}세</span><span>대운 끝</span>
              </div>
              <div style={{height:9, borderRadius:99, background:"rgba(255,255,255,.08)", overflow:"hidden"}}>
                <div style={{height:"100%", width:`${daeunProgress}%`, borderRadius:99, background:"linear-gradient(135deg, var(--pink), #c44bef)"}}></div>
              </div>
            </div>
            <div style={{background:"rgba(245,111,167,.07)", borderLeft:"3px solid var(--pink)", borderRadius:14, padding:14}}>
              <div className="body-txt" style={{lineHeight:1.7, marginBottom:12}}>🔒 {lockText}</div>
              <button className="btn" style={{width:"100%", background:"linear-gradient(135deg, var(--pink), #c44bef)"}}
                onClick={()=>nav("analysis")}>
                ✨ AI 심층 분석하기
              </button>
            </div>
          </div>
        )}

        <div style={{display:"flex", flexDirection:"column", gap:10}}>
          {!hasHookCard && (
            <button className="btn" style={{width:"100%", background:"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}
              onClick={()=>nav("analysis")}>
              ✨ AI 심층 분석하기
            </button>
          )}
          <button className="btn ghost" style={{width:"100%"}} onClick={()=>setEditing(true)}>다시 입력</button>
        </div>
      </div>
      <div className="disclaimer">月下의 풀이는 참고용입니다. 마음의 결정은 늘 당신의 몫이에요.</div>
    </div>
  );
}

/* ============================================================
   궁합
   ============================================================ */
function CompatScreen({ nav, profile, setProfile, partner, setPartner, addDiary, diaryItem }) {
  const restoredPartner = diaryItem?.kind === "compat" ? diaryItem.savedPartner : null;
  const effectivePartner = restoredPartner || partner;
  const [step, setStep] = uS(!profile ? "me" : (!effectivePartner ? "partner" : "result"));
  const [followUpMessages, setFollowUpMessages] = window.useStore("wolha_compat_followUpMessages", []);
  const [followUpInput, setFollowUpInput] = window.useStore("wolha_compat_followUpInput", "");
  const [followUpCount, setFollowUpCount] = window.useStore("wolha_compat_followUpCount", 0);
  const [followUpLoading, setFollowUpLoading] = window.useStore("wolha_compat_followUpLoading", false);
  const [followUpSessionKey, setFollowUpSessionKey] = window.useStore("wolha_compat_followUpSessionKey", "");
  const [isPaid, setIsPaid] = uS(false);
  const savedCompatKey = uR("");

  uE(() => {
    if (diaryItem?.kind !== "compat" || !diaryItem.savedPartner) return;
    setPartner(diaryItem.savedPartner);
    setStep(profile ? "result" : "me");
  }, [diaryItem?.id]);

  const hasCompatResult = !!profile && !!effectivePartner;
  const me = hasCompatResult ? window.computeSaju(profile) : null;
  const you = hasCompatResult ? window.computeSaju(effectivePartner) : null;
  const cs = hasCompatResult ? window.compatScore(me, you) : null;
  const currentFollowUpSessionKey = hasCompatResult
    ? `${profile.name}-${profile.y}-${profile.m}-${profile.d}-${effectivePartner.name}-${effectivePartner.y}-${effectivePartner.m}-${effectivePartner.d}`
    : "";

  uE(() => {
    if (!currentFollowUpSessionKey) return;
    if (!followUpSessionKey) {
      setFollowUpSessionKey(currentFollowUpSessionKey);
      return;
    }
    if (followUpSessionKey === currentFollowUpSessionKey) return;
    setFollowUpSessionKey(currentFollowUpSessionKey);
    setFollowUpMessages([]);
    setFollowUpInput("");
    setFollowUpCount(0);
    setFollowUpLoading(false);
  }, [currentFollowUpSessionKey]);

  uE(() => {
    if (!hasCompatResult || !addDiary || diaryItem?.kind === "compat") return;
    const key = `${profile.name}-${profile.y}-${profile.m}-${profile.d}-${effectivePartner.name}-${effectivePartner.y}-${effectivePartner.m}-${effectivePartner.d}-${cs.score}`;
    if (savedCompatKey.current === key) return;
    savedCompatKey.current = key;
    addDiary({
      id: `compat-${profile.name}-${profile.y}${profile.m}${profile.d}-${effectivePartner.name}-${effectivePartner.y}${effectivePartner.m}${effectivePartner.d}`,
      kind: "compat",
      title: `${profile.name} ♥ ${effectivePartner.name} 궁합`,
      preview: `“${cs.label}” — 점수: ${cs.score}점 (${cs.tone})`,
      glyph: "緣",
      color: "var(--pink)",
      when: "방금",
      savedPartner: effectivePartner,
    });
  }, [hasCompatResult, diaryItem?.kind, profile?.name, profile?.y, profile?.m, profile?.d, effectivePartner?.name, effectivePartner?.y, effectivePartner?.m, effectivePartner?.d, cs?.score, cs?.label, cs?.tone]);

  if (step === "me") {
    return (
      <div className="page">
        <div className="page-head rise">
          <span className="eyebrow">緣 · 궁합</span>
          <h1>두 기운이 만나면</h1>
          <p>먼저 내 사주를 입력해 주세요. 한 번 입력하면 다음부터는 바로 궁합을 볼 수 있어요.</p>
        </div>
        <ProfileForm initial={profile} submitLabel="내 사주 저장" onSubmit={(p)=>{ setProfile(p); setStep("partner"); }} />
      </div>
    );
  }
  if (step === "partner") {
    return (
      <div className="page">
        <div className="page-head rise">
          <span className="eyebrow">緣 · 궁합</span>
          <h1>그 사람의 사주</h1>
          <p>마음이 가는 그 사람의 생년월일을 알려주세요. 시각을 모르면 비워두어도 괜찮아요.</p>
        </div>
        <ProfileForm initial={effectivePartner} who="그 사람" submitLabel="궁합 보기" onSubmit={(p)=>{ setPartner(p); setStep("result"); }} />
        <button className="btn ghost" style={{width:"100%",marginTop:12}} onClick={()=>setStep("me")}>내 사주 다시 입력</button>
      </div>
    );
  }

  const API_BASE = window.API_BASE || "http://localhost:3001";
  const relationCopy = {
    "상생": "둘이 만나면 한쪽이 분위기를 띄우고 다른 한쪽이 그 에너지를 현실로 받아주는 흐름입니다. 데이트는 즉흥 제안과 안정적인 마무리가 섞여서 굴러가고, 잘 맞을 때는 서로가 서로의 생활 리듬을 살려줍니다. 다만 챙겨주는 쪽이 혼자 애쓴다고 느끼는 순간 서운함이 빨리 쌓입니다.",
    "비견": "비슷한 결이라 취향, 자존심, 고집이 같은 박자로 움직입니다. 편할 때는 말하지 않아도 통하지만, 싸울 때는 둘 다 먼저 굽히기 싫어서 같은 말만 반복하기 쉽습니다. 데이트도 익숙한 코스를 선호하니 가끔은 일부러 새로운 장소를 넣어야 관계가 덜 낡습니다.",
    "상극": "끌림은 강한데 생활 방식에서 마찰음이 자주 납니다. 한쪽은 바로 풀고 싶고, 다른 한쪽은 시간을 두고 정리하려 해서 카톡 속도와 말투가 갈등의 방아쇠가 됩니다. 대신 서로의 다름을 역할로 인정하면 긴장감이 관계의 성장 동력이 됩니다.",
    "중화": "극적인 불꽃보다 생활 속 호흡을 맞추며 천천히 깊어지는 궁합입니다. 처음엔 심심하게 느껴질 수 있지만 약속을 지키고 작은 루틴을 공유할수록 신뢰가 쌓입니다. 관계를 살리는 핵심은 감정을 미루지 않고 주기적으로 확인하는 것입니다.",
  };
  const riskCopy = {
    "상생": "챙겨준 만큼 알아주길 기다리다가 서운함을 적립하기 쉽습니다. 괜찮다고 말해놓고 나중에 한꺼번에 꺼내는 패턴, 답장이 늦을 때 단답 카톡으로 눈치 주는 습관을 조심해야 합니다.",
    "비견": "둘 다 자존심이 살아 있어서 먼저 사과하면 진 것처럼 느끼기 쉽습니다. 냉전 모드로 동굴에 숨기, 상대가 알아서 풀어주길 기다리기, 같은 논리로 끝까지 맞받아치기가 대표 병목입니다.",
    "상극": "감정이 올라온 순간 말의 칼날이 빨라집니다. 확인받고 싶은 마음을 추궁으로 꺼내거나, 일부러 읽씹과 단답으로 주도권을 잡으려 하면 관계 피로도가 크게 올라갑니다.",
    "중화": "큰 사건보다 방치가 위험합니다. 별일 아니라고 넘긴 서운함, 미뤄둔 대화, 데이트 루틴의 반복이 권태처럼 느껴질 수 있으니 작은 불만을 빨리 말하는 습관이 필요합니다.",
  };
  const freeReportCards = [
    {
      title: "내 타고난 연애 기질",
      body: `${profile.name}님은 ${window.ELEMENTS[me.element].love} 연애 결을 가졌습니다. ${window.ELEMENTS[me.element].trait}`,
    },
    {
      title: "상대방의 타고난 연애 기질",
      body: `${effectivePartner.name}님은 ${window.ELEMENTS[you.element].love} 연애 결을 가졌습니다. ${window.ELEMENTS[you.element].trait}`,
    },
    {
      title: "둘이 만나면 생기는 현실 데이트 패턴",
      body: relationCopy[cs.tone] || relationCopy["중화"],
    },
    {
      title: "사주로 본 두 사람의 위험한 연애 습관",
      body: riskCopy[cs.tone] || riskCopy["중화"],
    },
  ];

  const premiumReportText = [
    `3개년 권태기 및 이별수 유력 타이밍 추적 리포트: ${profile.name}님과 ${effectivePartner.name}님의 흐름은 단순히 좋고 나쁨으로 자르기보다, 어느 쪽의 기운이 먼저 지치고 어느 쪽이 침묵으로 도망가는지를 봐야 합니다. ${profile.name}님은 ${me.meta.name} 기질이 강하게 작동할 때 감정을 빨리 정리하려 하고, ${effectivePartner.name}님은 ${you.meta.name} 기질이 흔들릴 때 표현을 줄이는 방식으로 버팁니다. 앞으로 3년은 약속, 돈, 가족 문제처럼 현실 주제가 관계의 온도를 시험합니다. 특히 서로가 바쁜 시기에 연락의 양을 사랑의 양으로 착각하면 권태가 빨리 옵니다. 이 구간에서는 큰 결론보다 월 1회 관계 점검일을 정해두는 편이 오래 갑니다.`,
    `갈등 발발 시 상대방 방어기제를 녹이는 사주 맞춤형 대화 치트키 문장: ${effectivePartner.name}님은 밀어붙이는 말보다 인정받는 말에 방어가 풀립니다. 싸움이 시작됐을 때 첫 문장은 변명보다 "네가 그렇게 느낀 이유가 있는 것 같아"로 여는 게 좋습니다. 그 다음에 "내가 원하는 건 네가 틀렸다는 말이 아니라, 다음번엔 같이 정하자는 거야"라고 말해보면 달라질 거예요. ${profile.name}님이 먼저 결론을 내리면 상대는 마음을 닫을 가능성이 큽니다. 카톡으로는 "지금 당장 답 안 해도 돼. 대신 오늘 안에 서로 서운했던 포인트 하나씩만 말하자"가 가장 안전합니다.`,
    `현실 결혼 생활 진입 시 두 사람의 재물 관리 역할 분담 및 경제권 주도권 성적표: 두 사람은 돈을 대하는 속도가 다릅니다. ${profile.name}님은 필요한 곳에 힘을 실어주는 쪽이고, ${effectivePartner.name}님은 안정감이 확인될 때 지갑을 여는 쪽입니다. 결혼 후 통장은 한 사람이 독점하기보다 고정비 통장, 비상금 통장, 자유 지출 통장을 분리해야 돈이 덜 샙니다. 큰돈 결정은 감정이 올라온 날 하지 않는 규칙이 필요합니다. 특히 여행, 선물, 가족 행사 지출은 사랑 표현처럼 보이지만 나중에 억울함으로 돌아올 수 있습니다. 경제권은 기록을 잘하는 사람이 잡고, 최종 결정은 둘이 같이 하는 구조가 맞습니다.`,
    `서로의 비어있는 오행 기운을 채워주는 인생 커리어 상생 보완 스위치 지침: ${profile.name}님과 ${effectivePartner.name}님은 같이 있을 때 서로의 부족한 리듬을 보완할 수 있습니다. ${profile.name}님이 속도를 만들면 ${effectivePartner.name}님은 지속성을 보태고, ${effectivePartner.name}님이 현실 감각을 세우면 ${profile.name}님은 방향을 넓힙니다. 단, 한쪽이 코치처럼 굴기 시작하면 상생이 아니라 통제가 됩니다. 서로의 커리어를 끌어올리려면 조언보다 환경을 만들어주는 방식이 좋습니다. 면접, 이직, 사업 결정이 있을 때는 상대의 판단을 대신해주지 말고 선택지를 정리해주는 역할까지만 해보면 달라질 거예요.`,
  ].join("\n\n");

  const premiumParagraphs = premiumReportText.split(/\n{2,}/);
  const handleFollowUp = async () => {
    const question = followUpInput.trim();
    if (!question || followUpLoading || followUpCount >= 2) return;
    const userMessage = { role: "me", text: question };
    setFollowUpMessages((messages) => [...messages, userMessage]);
    setFollowUpInput("");
    setFollowUpLoading(true);
    try {
      const res = await fetch(`${API_BASE}/api/followup`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          impUid: "test_compat_" + Date.now(),
          followUpCount: followUpCount + 1,
          question,
          previousResult: premiumReportText,
          sajuContext: { me, you },
        }),
      });
      if (!res.ok) throw new Error(res.status);
      const data = await res.json();
      setFollowUpMessages((messages) => [...messages, { role: "ai", text: data.result || "답변을 받지 못했어요. 질문을 조금 더 구체적으로 다시 보내주세요." }]);
      setFollowUpCount((count) => count + 1);
    } catch (e) {
      setFollowUpMessages((messages) => [...messages, { role: "ai", text: "답변 중 오류가 발생했어요. 잠시 후 다시 시도해 주세요." }]);
    } finally {
      setFollowUpLoading(false);
    }
  };

  return (
    <div className="page">
      <div className="stack">
        <div className="compat-hero card rise">
          <window.ScoreRing value={cs.score} size={92} stroke={8} color="var(--pink)" label="궁합" />
          <div className="ch-info">
            <div style={{fontFamily:"var(--serif)", fontSize:18, fontWeight:700, marginBottom:6}}>
              {profile.name} <span style={{color:"var(--pink)"}}>♥</span> {effectivePartner.name}
            </div>
            <div style={{fontSize:15, color:"var(--text)", fontWeight:600, marginBottom:6}}>“{cs.label}”</div>
            <div style={{fontSize:12.5, color:"var(--text-dim)", lineHeight:1.5}}>
              {me.meta.name} {me.animal.an}띠 · {you.meta.name} {you.animal.an}띠{cs.note?` · ${cs.note}`:""}
            </div>
          </div>
        </div>

        <div className="panel card rise">
          <h3>두 사람의 일주</h3>
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:18}}>
            <div>
              <div style={{fontSize:11.5,color:"var(--text-faint)",marginBottom:7,fontWeight:600}}>{profile.name}</div>
              <window.PillarBlock p={me.day} label="일주" />
            </div>
            <div>
              <div style={{fontSize:11.5,color:"var(--text-faint)",marginBottom:7,fontWeight:600}}>{effectivePartner.name}</div>
              <window.PillarBlock p={you.day} label="일주" />
            </div>
          </div>
          <div className="aura-line"><span className="swatch" style={{background:me.meta.color}}></span><b>{me.meta.aura}</b><span>{profile.name}</span></div>
          <div className="aura-line" style={{marginBottom:0}}><span className="swatch" style={{background:you.meta.color}}></span><b>{you.meta.aura}</b><span>{effectivePartner.name}</span></div>
        </div>

        {freeReportCards.map((card, index) => (
          <div className="panel card rise compat-free-card" key={card.title}>
            <h3>{String(index + 1).padStart(2, "0")} · {card.title}</h3>
            <div className="body-txt">{card.body}</div>
          </div>
        ))}

        {isPaid ? (
          <>
            {premiumParagraphs.map((paragraph, index) => (
              <div className="panel card rise" key={index}>
                <h3>{[
                  "3개년 권태기 및 이별수 유력 타이밍 추적 리포트",
                  "갈등 발발 시 상대방 방어기제를 녹이는 사주 맞춤형 대화 치트키 문장",
                  "현실 결혼 생활 진입 시 두 사람의 재물 관리 역할 분담 및 경제권 주도권 성적표",
                  "서로의 비어있는 오행 기운을 채워주는 인생 커리어 상생 보완 스위치 지침",
                ][index]}</h3>
                <div className="body-txt">{paragraph}</div>
              </div>
            ))}

            <div className="panel card rise">
              <h3>1:1 비밀 채팅방 · 명리학자 도현</h3>
              <div className="msgs">
                <div className="msg ai">
                  <div className="m-orb" style={{background:"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}>命</div>
                  <div className="bubble">두 분의 궁합 리포트를 바탕으로 2번 더 질문할 수 있어요.</div>
                </div>
                {followUpMessages.map((message, index) => (
                  <React.Fragment key={index}>
                    {(message.text || "").split(/\n{2,}/).map((paragraph, paragraphIndex) => (
                      <div className={`msg ${message.role === "me" ? "me" : "ai"}`} key={`${index}-${paragraphIndex}`}>
                        <div className="m-orb" style={message.role === "ai" ? {background:"linear-gradient(135deg,#7C5CFF,#A86BF0)"} : undefined}>
                          {message.role === "ai" ? "命" : (profile.name?.[0] || "나")}
                        </div>
                        <div className="bubble" style={{lineHeight:1.75, wordBreak:"keep-all"}}>{paragraph}</div>
                      </div>
                    ))}
                  </React.Fragment>
                ))}
                {followUpLoading && (
                  <div className="msg ai">
                    <div className="m-orb" style={{background:"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}>命</div>
                    <div className="bubble"><window.Typing /></div>
                  </div>
                )}
                {followUpCount >= 2 && (
                  <div className="msg ai">
                    <div className="m-orb" style={{background:"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}>命</div>
                    <div className="bubble">추가 질문을 모두 사용했습니다.</div>
                  </div>
                )}
              </div>
              <div className="composer">
                <textarea
                  rows="1"
                  value={followUpInput}
                  disabled={followUpCount >= 2}
                  onChange={(e) => setFollowUpInput(e.target.value)}
                  placeholder={followUpCount >= 2 ? "추가 질문을 모두 사용했습니다." : `${2 - followUpCount}번 더 질문할 수 있어요...`}
                />
                <button className="send-btn" disabled={!followUpInput.trim() || followUpLoading || followUpCount >= 2} onClick={handleFollowUp}>
                  <window.Icon name="send" />
                </button>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="panel card rise compat-paywall">
              <h3>두 사람의 3개년 위기 지수 타임라인</h3>
              <div className="crisis-lock">
                <div className="crisis-bars" aria-hidden="true">
                  {[42, 68, 36, 81, 54, 74, 48, 63, 88, 57, 39, 70].map((height, index) => (
                    <span key={index} style={{height:`${height}%`}} />
                  ))}
                </div>
                <div className="lock-badge">🔒 사주 기반 위기 타이밍 연산 완료</div>
              </div>
            </div>

            <div className="panel card rise premium-index">
              <h3>결제 시 즉시 열리는 프리미엄 리포트 목차</h3>
              {[
                "이별 유력 타이밍 연/월",
                "자존심 안 상하게 풀어주는 대화 치트키",
                "현실 결혼 자산 시너지",
              ].map((item) => (
                <div className="premium-check" key={item}><span>✓</span>{item}</div>
              ))}
            </div>

            <div className="card rise" style={{padding:20, textAlign:"center", background:"linear-gradient(135deg,#FFF0F6,#F2ECFF)", border:"1px solid rgba(245,111,167,.28)"}}>
              <div style={{fontWeight:800, color:"var(--text)", lineHeight:1.55, marginBottom:14}}>
                ⏱️ 첫 방문 한정 혜택: 30분 이내 결제 시 평생 소장 가능
              </div>
              <button
                className="btn"
                style={{width:"100%", fontWeight:800, background:"linear-gradient(135deg,#F56FA7,#7C5CFF)", boxShadow:"0 16px 30px -16px rgba(245,111,167,.9)"}}
                onClick={() => setIsPaid(true)}
              >
                👉 둘의 치명적인 위기 시기 & 해결책 열기 (4,900원)
              </button>
            </div>
          </>
        )}

        <div style={{display:"flex", gap:10}}>
          <button className="btn ghost" style={{flex:1}} onClick={()=>setStep("partner")}>상대 다시</button>
          <button className="btn" style={{flex:1.4}} onClick={()=>nav("chat")}>
            <window.Icon name="chat" /> 더 깊이 상담하기
          </button>
        </div>
      </div>
      <div className="disclaimer">궁합은 가능성의 지도일 뿐, 길은 두 사람이 함께 만들어 갑니다.</div>
    </div>
  );
}

/* ============================================================
   다이어리
   ============================================================ */
function DiaryScreen({ nav, diary, removeDiary }) {
  return (
    <div className="page">
      <div className="page-head rise">
        <span className="eyebrow">日記 · 다이어리</span>
        <h1>내 인연의 기록</h1>
        <p>풀이와 상담이 시간순으로 쌓여요. 마음이 흔들릴 때 다시 꺼내 보세요.</p>
      </div>
      {diary.length === 0 ? (
        <div className="empty-state card">
          <div className="eglyph serif">緣</div>
          <p>아직 기록이 없어요.<br/>사주 풀이나 AI 상담을 시작해 보세요.</p>
          <button className="btn" style={{marginTop:18}} onClick={()=>nav("home")}>홈으로</button>
        </div>
      ) : (
        <div className="recent">
          {diary.map((it)=>(
            <div key={it.id} className="recent-row">
              <div className="rdot" style={{background: it.color||"linear-gradient(135deg,#7C5CFF,#A86BF0)"}}>{it.glyph||"緣"}</div>
              <div className="rmid" onClick={()=>nav(it.kind==="analysis"?"analysis":it.kind==="compat"?"compat":it.kind==="chat"?"chat":"home", it)}>
                <b>{it.title}</b><span>{it.preview}</span>
              </div>
              <div style={{display:"flex",alignItems:"center",gap:10, flex:"none"}}>
                <div className="rtime">{it.when}</div>
                <button className="icon-btn" style={{width:30,height:30,borderRadius:9}} onClick={()=>removeDiary(it.id)} title="삭제">
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"><path d="M5 7h14M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"/></svg>
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Home, SajuScreen, CompatScreen, DiaryScreen, ProfileForm, AIReading });
