/* --- src/screens-1.jsx --- */
// Home + Dashboard
const { useState: useState1, useMemo: useMemo1, useEffect: useEffect1 } = React;

// ─────────── Sparkline / Area ───────────
function AreaChart({ data, height=120, accent='#2E5FB0', fill=false }){
  const w = 640, h = height, pad = 8;
  const max = Math.max(...data.map(d=>d.total));
  const min = Math.min(...data.map(d=>d.total));
  const span = max - min || 1;
  const stepX = (w - pad*2) / (data.length-1);
  const pts = data.map((d,i)=>[ pad + i*stepX, h - pad - ((d.total-min)/span)*(h-pad*2) ]);
  const path = pts.map((p,i)=> (i===0?'M':'L')+p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');
  const area = path + ` L${pts[pts.length-1][0]},${h-pad} L${pts[0][0]},${h-pad} Z`;

  const resPts = data.map((d,i)=>[ pad + i*stepX, h - pad - ((d.residual - 1900)/(3600-1900))*(h-pad*2) ]);
  const resPath = resPts.map((p,i)=>(i===0?'M':'L')+p[0].toFixed(1)+','+p[1].toFixed(1)).join(' ');

  // when fill=true, SVG stretches to fill its parent (height:100%); otherwise uses fixed pixel height.
  const svgHeight = fill ? '100%' : h;
  const wrapStyle = fill
    ? { display:'block', width:'100%', height:'100%' }
    : { display:'block' };

  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={svgHeight} preserveAspectRatio="none" style={wrapStyle}>
      <defs>
        <linearGradient id="areaG" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor={accent} stopOpacity="0.22"/>
          <stop offset="100%" stopColor={accent} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0.25,0.5,0.75].map((t,i)=>(
        <line key={i} x1={pad} y1={pad + t*(h-pad*2)} x2={w-pad} y2={pad + t*(h-pad*2)} stroke="#EEF2F7" strokeWidth="1" strokeDasharray="3 3"/>
      ))}
      <path d={area} fill="url(#areaG)"/>
      <path d={path} stroke={accent} strokeWidth="2" fill="none"/>
      <path d={resPath} stroke="#C77A1B" strokeWidth="1.5" fill="none" strokeDasharray="4 3"/>
      {pts.map((p,i)=>(
        <circle key={i} cx={p[0]} cy={p[1]} r={i===pts.length-1?4:0} fill={accent}/>
      ))}
    </svg>
  );
}

function Donut({ segments, size=120, thickness=18 }){
  const r = (size - thickness)/2;
  const c = 2 * Math.PI * r;
  const total = segments.reduce((s,x)=>s+x.value,0);
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="#EEF2F7" strokeWidth={thickness}/>
      {segments.map((s,i)=>{
        const len = (s.value/total)*c;
        const dash = `${len} ${c-len}`;
        const off = -acc;
        acc += len;
        return <circle key={i} cx={size/2} cy={size/2} r={r} fill="none"
          stroke={s.color} strokeWidth={thickness} strokeDasharray={dash}
          strokeDashoffset={off} transform={`rotate(-90 ${size/2} ${size/2})`}
          strokeLinecap="butt"/>
      })}
    </svg>
  );
}

// ─────────── HOME ───────────
function HomeScreen({ go }){
  const [day5Metrics, setDay5Metrics] = useState1(RSData.DAY5_DEFAULT_METRICS);
  useEffect1(() => {
    let alive = true;
    RSData.loadDay5Metrics()
      .then((metrics) => { if (alive) setDay5Metrics(metrics); })
      .catch(() => { if (alive) setDay5Metrics({ ...RSData.DAY5_DEFAULT_METRICS, status:'error' }); });
    return () => { alive = false; };
  }, []);
  const homeStats = [
    {l:'AI가 확인한 자치법규', v:day5Metrics.uniqueOrdinances.toLocaleString(), s:'건'},
    {l:'본문까지 읽은 사례', v:day5Metrics.sampleSize.toLocaleString(), s:'건'},
    {l:'정비 검토 후보', v:day5Metrics.flaggedOrdinances.toLocaleString(), s:'건'},
    {l:'AI 검토 메모', v:day5Metrics.level4Reviews.toLocaleString(), s:'건'},
  ];
  return (
    <Page
      eyebrow="Sync Law · 법령 정합성 AI 점검"
      title="상위 규범과 하위 규범이 같은 기준으로 움직이는지 점검합니다."
      desc="Sync Law는 헌법·법률 등 상위 규범과 명령·규칙·조례 등 위임 규범, 그리고 민원서식·안내문 같은 현장 문서를 함께 대조해 담당자가 실제로 검토할 만한 정비 후보만 근거와 함께 정리합니다."
      actions={[
        <Btn key="1" kind="primary" icon="grid" onClick={()=>go('dashboard')} data-action="open-dashboard">정비 검토 후보 바로가기</Btn>,
      ]}
    >
      {/* Hero band */}
      <Card style={{padding:0, overflow:'hidden', marginBottom:24}}>
        <div style={{
          background:'linear-gradient(135deg, #0B2E5C 0%, #143A73 60%, #1E4D8C 100%)',
          color:'#fff', padding:'36px 36px 32px', position:'relative'
        }}>
          {/* Geometric backdrop */}
          <svg style={{position:'absolute', top:0, right:0, height:'100%', opacity:0.18}} viewBox="0 0 480 280" fill="none">
            <circle cx="380" cy="80" r="120" stroke="#7DA9E6" strokeWidth="1"/>
            <circle cx="380" cy="80" r="80" stroke="#7DA9E6" strokeWidth="1"/>
            <circle cx="380" cy="80" r="40" stroke="#7DA9E6" strokeWidth="1"/>
            <path d="M0 240 Q120 180 240 220 T480 200" stroke="#5EE6B5" strokeWidth="1" strokeDasharray="4 4"/>
            <path d="M0 200 Q120 140 240 180 T480 160" stroke="#7DA9E6" strokeWidth="1" strokeDasharray="4 4"/>
            {[...Array(20)].map((_,i)=>(
              <circle key={i} cx={20+i*22} cy={50+(i%4)*14} r="1.5" fill="#7DA9E6"/>
            ))}
          </svg>

          <div style={{maxWidth:680, position:'relative'}}>
            <div style={{
              display:'inline-flex', alignItems:'center', gap:8, padding:'4px 10px',
              background:'rgba(94,230,181,0.14)', color:'#5EE6B5', borderRadius:99,
              fontSize:11, fontWeight:600, marginBottom:14
            }}>
              <span style={{width:6, height:6, borderRadius:'50%', background:'#5EE6B5'}}/>
              법제처 API 실측 + AI 검증 사례 연결
            </div>
            <div style={{fontSize:34, fontWeight:700, lineHeight:1.25, letterSpacing:'-0.02em'}}>
              상위 규범과 하위 규범의 기준이 어긋나지 않았는지<br/>
              <span style={{color:'#7DA9E6'}}>AI가 먼저 읽고, 담당자가 볼 후보만 추립니다.</span>
            </div>
            <div style={{fontSize:14, opacity:.8, marginTop:14, lineHeight:1.7, maxWidth:620}}>
              상위 규범(헌법·법률 등)과 하위 규범(명령·규칙·조례 등 각종 위임 규범), 그리고 서식·안내문에 서로 다른 기한·서류·금액 기준이 남아 있으면 국민은 잘못된 기준을 믿고 행동할 수 있습니다.
              <span style={{color:'#fff', fontWeight:600}}> Sync Law</span>는 법제처 API로 실제 본문을 가져오고 AI로 같은 절차·같은 단위·직접 상위근거 여부를 검증해, 정비 가능성이 높은 후보를 먼저 보여줍니다.
            </div>
            <div style={{display:'flex', gap:10, marginTop:22}}>
              <Btn icon="grid" kind="accent" onClick={()=>go('dashboard')} data-action="open-dashboard">탐지 대시보드 열기</Btn>
              <Btn icon="megaphone" kind="ghost" data-action="open-citizen-report" style={{color:'#fff', border:'1px solid rgba(255,255,255,0.25)'}} onClick={()=>go('report')}>국민 제보 참여</Btn>
            </div>
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', borderTop:'1px solid var(--line)'}}>
          {homeStats.map((s,i)=>(
            <div key={i} style={{padding:'18px 24px', borderRight: i<3?'1px solid var(--line)':'none'}}>
              <div style={{fontSize:11, color:'var(--ink-3)', marginBottom:4}}>{s.l}</div>
              <div style={{display:'flex', alignItems:'baseline', gap:6}}>
                <span className="mono" style={{fontSize:22, fontWeight:700, color:'var(--navy)', letterSpacing:'-0.02em'}}>{s.v}</span>
                <span style={{fontSize:12, color:'var(--ink-4)'}}>{s.s}</span>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Quick entry */}
      <SectionHeader title="무엇을 해주나요" desc="상위법 변경을 찾고, 관련 현장 문서를 대조해, 담당자가 볼 후보를 정리합니다."/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginBottom:32}}>
        {[
          { id:'upper',    icon:'pulse',     t:'상위법 변경 찾기',     d:'국가법령정보에서 최근 개정된 조문과 시행일을 확인합니다.' },
          { id:'compare',  icon:'compare',   t:'바뀐 조문 비교',        d:'개정 전후 조문을 나란히 보여주고, 하위문서가 따라 바뀌어야 할 기준을 찾습니다.' },
          { id:'lower',    icon:'layers',    t:'조례·행정규칙 대조',    d:'상위법과 연결된 조례·규칙 본문을 읽어 같은 절차와 같은 단위의 차이를 찾습니다.' },
          { id:'forms',    icon:'doc',       t:'서식·안내문 점검',      d:'민원인이 보는 신청서와 안내문에 예전 기준이나 불필요한 서류가 남았는지 확인합니다.' },
          { id:'report',   icon:'megaphone', t:'국민 제보 확인',       d:'국민이 제보한 사례를 법령 데이터와 대조해 담당자가 볼 검토 후보로 정리합니다.' },
          { id:'analysis', icon:'brain',     t:'AI 검토 메모',         d:'AI가 같은 절차·같은 단위·직접 상위근거 조건을 확인하고 검토 메모를 작성합니다.' },
        ].map(c=>(
          <button key={c.id} data-action={`open-${c.id}`} onClick={()=>go(c.id)} style={{
            background:'#fff', border:'1px solid var(--line)', borderRadius:12,
            padding:'20px 22px', textAlign:'left', cursor:'pointer',
            transition:'all .15s', boxShadow:'var(--shadow-sm)'
          }}
          onMouseEnter={e=>{ e.currentTarget.style.borderColor='var(--blue)'; e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='var(--shadow-md)';}}
          onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--line)'; e.currentTarget.style.transform='none'; e.currentTarget.style.boxShadow='var(--shadow-sm)';}}>
            <div style={{
              width:38, height:38, borderRadius:9, background:'var(--blue-soft)',
              display:'flex', alignItems:'center', justifyContent:'center',
              color:'var(--navy)', marginBottom:14
            }}>
              <Icon name={c.icon} size={20}/>
            </div>
            <div style={{fontSize:15, fontWeight:700, color:'var(--ink)', marginBottom:6}}>{c.t}</div>
            <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.6}}>{c.d}</div>
            <div style={{display:'flex', alignItems:'center', gap:6, marginTop:14, color:'var(--blue)', fontSize:12, fontWeight:600}}>
              바로가기 <Icon name="arrow-right" size={13}/>
            </div>
          </button>
        ))}
      </div>

      {/* Process diagram */}
      <Card>
        <SectionHeader eyebrow="작동 방식" title="데이터 수집부터 정비 권고까지 5단계"/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, marginTop:14}}>
          {[
            { n:'01', t:'데이터 수집', d:'국가법령정보·자치법규·민원24·기관 데이터' },
            { n:'02', t:'개정 감지',   d:'상위법 변경 사항을 실시간 모니터링' },
            { n:'03', t:'AI 비교 분석', d:'신구조문·하위규정·서식 의미 유사도 분석' },
            { n:'04', t:'우선순위 산정', d:'영향도·민원량·국민 제보 가중치 반영' },
            { n:'05', t:'기관 정비 권고', d:'담당 기관에 정비 필요성 알림 자동 발송' },
          ].map((s,i,arr)=>(
            <div key={s.n} style={{position:'relative', padding:'22px 14px 4px 0'}}>
              {/* timeline at the very top — out of the way of all text */}
              <div style={{
                position:'absolute', left:14, top:9, height:1,
                right: i===arr.length-1 ? 20 : 14,
                background:'repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px)'
              }}/>
              <div style={{
                position:'absolute', left:0, top:4, width:10, height:10,
                borderRadius:'50%', background:'#fff', border:'2px solid var(--blue)',
                boxShadow:'0 0 0 3px #fff'
              }}/>
              <div className="mono" style={{fontSize:11, color:'var(--blue)', fontWeight:700, letterSpacing:'0.06em'}}>STEP {s.n}</div>
              <div style={{fontSize:14, fontWeight:700, color:'var(--ink)', marginTop:6}}>{s.t}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4, lineHeight:1.6}}>{s.d}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* ────────── 왜 지금 필요한가 — 공식 자료 근거 ────────── */}
      <div style={{height:32}}/>
      <SectionHeader eyebrow="왜 지금 필요한가" title="이미 정부가 반복 확인한 구조적 문제" desc="법령 검색이 불편한 것이 아니라, 상위법 개정이 현장 규정·서식까지 내려오지 않아 국민의 권리·재산·신청 절차에 실제 부담을 만드는 문제입니다."/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:18}}>
        {[
          { v:'20,000', s:'건', l:'불합리한 자치법규 확인', sub:'10만여 건 점검 결과', src:'K-공감 (2020)', href:'https://gonggam.korea.kr/newsView.do?newsId=GAJUXLC4YDGJM000' },
          { v:'23',    s:'%',  l:'법령 개정사항 미반영 비율', sub:'위임 일탈 57% · 미근거 20%', src:'K-공감 (2020)', href:'https://gonggam.korea.kr/newsView.do?newsId=GAJUXLC4YDGJM000' },
          { v:'2,730', s:'건', l:'정비된 과태료 자치법규', sub:'상위법과 다른 금액·절차', src:'행안부 (2018)', href:'https://www.mois.go.kr/frt/bbs/type010/commonSelectBoardArticle.do%3Bjsessionid%3DG%2BULNYXXjGcEaXo4sRS%2BZ9FF.node10?bbsId=BBSMSTR_000000000008&nttId=63532' },
          { v:'2,300', s:'건', l:'주민권리 보호 정비 과제', sub:'재산권 침해 우려 조례 등', src:'법제처 (2025)', href:'https://www.moleg.go.kr/board.es?act=view&bid=0048&cg_code=&keyField=&keyWord=&list_no=140825&mid=a10501000000&nPage=1&pageCntBySelf=50&tag=' },
        ].map(s=>(
          <div key={s.l} style={{
            background:'#fff', border:'1px solid var(--line)', borderRadius:12,
            padding:'18px 20px', boxShadow:'var(--shadow-sm)', position:'relative', overflow:'hidden'
          }}>
            <div style={{position:'absolute', top:0, left:0, height:3, width:'100%', background:'linear-gradient(90deg, #C77A1B, #D4A24A)'}}/>
            <div style={{fontSize:11, color:'var(--ink-3)', fontWeight:600, marginBottom:8}}>{s.l}</div>
            <div style={{display:'flex', alignItems:'baseline', gap:4}}>
              <span className="mono" style={{fontSize:30, fontWeight:800, color:'var(--navy)', letterSpacing:'-0.025em'}}>{s.v}</span>
              <span style={{fontSize:13, color:'var(--ink-3)', fontWeight:600}}>{s.s}</span>
            </div>
            <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:8, lineHeight:1.55}}>{s.sub}</div>
            <div style={{fontSize:10.5, color:'var(--ink-4)', marginTop:8, paddingTop:8, borderTop:'1px dashed var(--line)', fontStyle:'italic'}}>출처 · <a href={s.href} target='_blank' rel='noopener noreferrer' style={{color:'var(--blue)', textDecoration:'underline', textUnderlineOffset:2, fontWeight:600}}>{s.src}</a></div>
          </div>
        ))}
      </div>

      <Card style={{marginBottom:18}}>
        <SectionHeader title="실제 확인된 피해 유형" desc="공식 보도자료·언론 기사에서 확인된 사례 (단순 불편이 아닌 국민 재산권 문제)"/>
        <div style={{margin:'8px -20px 0', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'180px 1fr 200px', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)', letterSpacing:'0.02em'}}>
            <span>피해 유형</span><span>실제 확인 내용</span><span>근거</span>
          </div>
          {[
            { t:'재산권 침해 우려', body:'일부 지자체 조례가 공공시설 운영 위탁 종료 시 수탁자의 사유재산까지 지자체에 귀속하도록 규정 — 법적 근거 없는 침해 소지', src:'법제처 보도자료 2025-11-06', href:'https://www.moleg.go.kr/board.es?act=view&bid=0048&cg_code=&keyField=&keyWord=&list_no=140825&mid=a10501000000&nPage=1&pageCntBySelf=50&tag=' },
            { t:'잘못된 과태료·가산금', body:'상위법령과 다른 금액 부과·반(反)절차로 주민 불편과 행정 혼란을 야기한 자치법규 2,730건 정비', src:'행정안전부 보도자료 2018-05-15', href:'https://www.mois.go.kr/frt/bbs/type010/commonSelectBoardArticle.do%3Bjsessionid%3DG%2BULNYXXjGcEaXo4sRS%2BZ9FF.node10?bbsId=BBSMSTR_000000000008&nttId=63532' },
            { t:'상위법 한도 초과 과태료', body:'위임 없는 과태료 320건, 상위법 한도보다 높게 부과한 사례 63건, 이의신청 기간·가산금이 다른 사례 1,866건', src:'경향신문 2018-05-15', href:'https://www.khan.co.kr/article/201805152107005' },
            { t:'생활·영업 제한 / 재정부담', body:'불합리한 자치법규의 내용 — 불합리한 행정절차 58%, 영업·주민생활 지나친 제한 23%, 과도한 재정부담 9%', src:'K-공감 2020-09-28', href:'https://gonggam.korea.kr/newsView.do?newsId=GAJUXLC4YDGJM000' },
            { t:'그림자 조세', body:'부담금·사용료·수수료·과태료 등 조세는 아니지만 강제 금전 부담으로 작용하는 준조세를 정비 대상으로 제시', src:'K-공감 2024-02-15', href:'https://gonggam.korea.kr/newsContentView.es?b_list=9&code_cd=0118000000&content=NC002&mid=a10215000000&nPage=104&news_id=3e7eefa3-e801-4fa4-a694-bb0e6d880e0c&section_id=NCCD_POLICY' },
            { t:'조례 미정비로 처분 효력 다툼', body:'상위법 과태료 상한이 1,000만 → 500만 원으로 낮아졌는데 조례가 1,000만으로 남아 700만 원이 부과되는 경우 처분·조례 효력 문제', src:'국민참여입법센터 2021-10-18', href:'https://opinion.lawmaking.go.kr/advc/stmInq/17549?blockStartPage=26&inqClsCd=CE0514&pageIndex=27&srchType=inqTtl' },
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'180px 1fr 200px',
              padding:'14px 20px', fontSize:12.5, alignItems:'flex-start', gap:14,
              borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none'
            }}>
              <span style={{color:'var(--amber)', fontWeight:700}}>{r.t}</span>
              <span style={{color:'var(--ink-2)', lineHeight:1.65}}>{r.body}</span>
              <a href={r.href} target='_blank' rel='noopener noreferrer' style={{fontSize:11, color:'var(--blue)', fontStyle:'italic', textDecoration:'underline', textUnderlineOffset:2}}>{r.src}</a>
            </div>
          ))}
        </div>
      </Card>

      {/* ────────── 기존 서비스와의 차별점 ────────── */}
      <div style={{height:24}}/>
      <SectionHeader eyebrow="독창성·차별성" title="법령 '검색' 서비스에서 법령 '동기화 관리' 플랫폼으로" desc="기존 정부 서비스의 빈 자리 — 상위법 개정이 하위 문서까지 내려오는 과정을 전체적으로 추적하는 도구는 없습니다."/>
      <Card style={{marginBottom:18}}>
        <div style={{margin:'0 -20px', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'200px 1.1fr 1.4fr', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)', letterSpacing:'0.02em'}}>
            <span>기존 체계</span><span>현재 역할</span><span>Sync Law 차별점</span>
          </div>
          {[
            { sys:'국가법령정보센터 (law.go.kr)', cur:'법령 검색·열람 중심', diff:'개정 이벤트가 하위규정·서식·안내문에 미치는 영향을 자동 추적하고 정비 후보를 제시' },
            { sys:'자치법규정보시스템 (ELIS)',     cur:'자치법규 검색·비교 중심', diff:'상위법 개정 후 미정비 조례·규칙을 자동 탐지하고 지자체별 싱크Law율 산정' },
            { sys:'정부24',                       cur:'민원서식 제공·신청 중심', diff:'서식 안의 폐지된 인용·구버전 요건·불필요한 동의항목을 법령 변경과 연결해 점검' },
            { sys:'국민신문고',                   cur:'민원 접수·처리 중심',     diff:'민원·제보를 법령 정비 후보로 구조화하고 반복 제보를 정비 우선순위에 반영' },
            { sys:'법령 정비 사례집',             cur:'사후 사례 축적·공유 중심', diff:'사례에서 학습한 위험 유형을 상시 탐지 규칙으로 전환' },
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'200px 1.1fr 1.4fr',
              padding:'14px 20px', fontSize:12.5, alignItems:'flex-start', gap:14,
              borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none'
            }}>
              <span style={{color:'var(--ink)', fontWeight:700}}>{r.sys}</span>
              <span style={{color:'var(--ink-3)', lineHeight:1.65}}>{r.cur}</span>
              <span style={{color:'var(--navy)', fontWeight:600, lineHeight:1.65}}>{r.diff}</span>
            </div>
          ))}
        </div>
      </Card>

      {/* ────────── 4가지 사용자 페르소나 ────────── */}
      <div style={{height:24}}/>
      <SectionHeader eyebrow="사용자별 흐름" title="법제처·소관부처·지자체·국민 — 4가지 역할의 작동 흐름" desc="모든 결과는 'AI 후보 제시 + 담당자 검토·승인' 구조로 작동합니다. AI는 판단자가 아니라 증거 정리자입니다."/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:14, marginBottom:18}}>
        {[
          { tone:'#0B2E5C', icon:'shield',    role:'법제처 담당자', flow:'대시보드 접속 → 고위험 미정비 후보 확인 → 근거 원문 확인 → 소관부처·지자체 정비 권고 발송 → 정비율 관리' },
          { tone:'#2E5FB0', icon:'building',  role:'소관부처 담당자', flow:'본인 소관 법령 관련 경보 수신 → 상위법 개정 내용과 하위규정 잔존 문구 비교 → 정비안 검토 → 회신 등록' },
          { tone:'#5B7C99', icon:'doc',       role:'지자체 법무 담당자', flow:'관할 조례·규칙 중 상위법 미반영 후보 확인 → 조문별 정비 초안 확인 → 의회 제출용 검토자료 다운로드' },
          { tone:'#1F7A6B', icon:'megaphone', role:'일반 국민', flow:'서식·안내문·조례가 이상하다고 제보 → AI가 관련 법령 후보 매칭 → 담당기관 검토 상태 확인' },
        ].map(p=>(
          <div key={p.role} style={{
            background:'#fff', border:'1px solid var(--line)', borderRadius:12,
            padding:'18px 22px', boxShadow:'var(--shadow-sm)', display:'flex', gap:14
          }}>
            <div style={{
              width:42, height:42, borderRadius:10,
              background:`${p.tone}15`, color:p.tone,
              display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0
            }}>
              <Icon name={p.icon} size={22}/>
            </div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:14, fontWeight:700, color:'var(--ink)', marginBottom:6}}>{p.role}</div>
              <div style={{fontSize:12.5, color:'var(--ink-3)', lineHeight:1.7}}>{p.flow}</div>
            </div>
          </div>
        ))}
      </div>

      {/* ────────── AI 책임성 장치 ────────── */}
      <div style={{height:24}}/>
      <Card style={{marginBottom:18, padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 24px', background:'linear-gradient(135deg, #0B2E5C 0%, #143A73 100%)', color:'#fff'}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'4px 10px', background:'rgba(94,230,181,0.14)', color:'#5EE6B5', borderRadius:99, fontSize:11, fontWeight:700, marginBottom:10}}>
            <Icon name="shield" size={11}/> 책임성 장치
          </div>
          <div style={{fontSize:18, fontWeight:700, letterSpacing:'-0.01em'}}>AI는 판단자가 아니라 정비 후보를 찾는 보조 분석관입니다.</div>
          <div style={{fontSize:13, opacity:.78, marginTop:8, lineHeight:1.7, maxWidth:780}}>
            법적 판단을 AI가 최종 결정하면 위험합니다. Sync Law의 AI는 정비 후보 정리, 원문 근거 부착, 우선순위 계산, 담당자 검토용 초안 작성에 역할을 제한하며, 최종 정비 여부와 법적 판단은 법제처·소관부처·지자체 담당자가 수행합니다.
          </div>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', borderTop:'1px solid var(--line)'}}>
          {[
            { t:'원문 근거 병기', d:'모든 경보에 상위법 변경 원문, 하위문서 잔존 문구, 출처 URL을 함께 표시' },
            { t:'신뢰도·판단 사유 표기', d:'유사도 점수와 LLM 판단 근거 문장을 공개하여 담당자가 검토 가능' },
            { t:'담당자 승인 필수', d:'AI는 "검토 필요" 상태로만 이송 — 자동 위법 판정·강제 정비 없음' },
            { t:'개인정보 마스킹', d:'국민 제보·서식 업로드 시 주민등록번호·민감정보 자동 마스킹' },
            { t:'점수 산식 공개', d:'정비 시급성 스코어의 가중치와 산식을 사용자에게 모두 공개·조정 가능' },
            { t:'오탐 피드백 학습', d:'담당자가 오탐을 표시하면 룰·임베딩 모델을 재훈련해 점진적 개선' },
          ].map((s,i)=>(
            <div key={i} style={{
              padding:'16px 20px',
              borderRight: (i+1)%3 !== 0 ? '1px solid var(--line)' : 'none',
              borderBottom: i < 3 ? '1px solid var(--line)' : 'none'
            }}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                <Icon name="check" size={13} color="var(--teal)"/>
                <span style={{fontSize:13, fontWeight:700, color:'var(--ink)'}}>{s.t}</span>
              </div>
              <div style={{fontSize:11.5, color:'var(--ink-3)', lineHeight:1.6}}>{s.d}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* ────────── 단계별 추진계획 ────────── */}
      <div style={{height:24}}/>
      <SectionHeader eyebrow="실현가능성" title="단계별 추진계획" desc="법제처 Open API와 자치법규 연계정보를 기반으로 PoC부터 단계적으로 확장합니다."/>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginBottom:18}}>
        {[
          { tone:'#0B2E5C', stage:'1단계', dur:'3개월', t:'PoC',         d:'법제처 Open API · 자치법규 연계정보 · 정부24 일부 서식을 대상으로 과태료·재산권·민원서식 3개 분야 시범 분석' },
          { tone:'#2E5FB0', stage:'2단계', dur:'6개월', t:'파일럿',       d:'1개 중앙부처 + 2~3개 지자체 선정해 실제 정비 후보 리포트 생성 · 담당자 피드백으로 오탐 유형 개선' },
          { tone:'#5B7C99', stage:'3단계', dur:'12개월', t:'범정부 확장', d:'부처별·지자체별 대시보드 · 국민 제보 연계 · 분기별 싱크Law 리포트 발간' },
          { tone:'#1F7A6B', stage:'4단계', dur:'2년차',  t:'고도화',       d:'판례·법령해석례·결정선례 반영 위험도 모델 고도화 · 상위법-하위문서 정합성 점검 체계와 연동' },
        ].map((s,i,arr)=>(
          <div key={s.stage} style={{
            background:'#fff', border:'1px solid var(--line)', borderRadius:12,
            padding:'18px 20px', boxShadow:'var(--shadow-sm)', position:'relative', overflow:'hidden'
          }}>
            <div style={{position:'absolute', top:0, left:0, height:3, width:'100%', background:s.tone}}/>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8}}>
              <span className="mono" style={{fontSize:10.5, fontWeight:700, color:s.tone, letterSpacing:'0.06em'}}>{s.stage}</span>
              <span style={{fontSize:11, color:'var(--ink-3)', fontWeight:600, padding:'2px 8px', background:'#F8FAFC', borderRadius:99}}>{s.dur}</span>
            </div>
            <div style={{fontSize:18, fontWeight:700, color:'var(--ink)', marginBottom:8}}>{s.t}</div>
            <div style={{fontSize:12, color:'var(--ink-3)', lineHeight:1.65}}>{s.d}</div>
          </div>
        ))}
      </div>

      {/* ────────── As-Is / To-Be ────────── */}
      <div style={{height:24}}/>
      <Card style={{marginBottom:18}}>
        <SectionHeader title="As-Is → To-Be" desc="현재 사후 점검 중심 구조에서 데이터 기반 상시 동기화 체계로 전환"/>
        <div style={{margin:'0 -20px', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'160px 1fr 1fr', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)'}}>
            <span>영역</span><span>As-Is (현재)</span><span>To-Be (Sync Law 적용 후)</span>
          </div>
          {[
            { area:'상위법 개정 추적', as:'담당자가 개별적으로 개정 내용을 확인하고 하위문서 영향 범위를 수작업 추정', to:'개정 이벤트 발생 시 영향 법령·자치법규·서식 후보 자동 표시' },
            { area:'자치법규 정비',   as:'대규모 일제정비 또는 민원·감사 이후 사후 발견',                                  to:'상위법 시행일 전후로 미정비 후보를 상시 경보' },
            { area:'민원서식 점검',   as:'서식 개정 여부를 기관별로 별도 관리',                                            to:'폐지된 인용·구버전 제출서류·불필요한 동의항목을 자동 탐지' },
            { area:'국민 제보 처리',   as:'제보가 민원 처리로 끝나고 법령 정비 데이터로 축적되기 어려움',                    to:'검증된 제보를 법령 그래프에 연결해 반복 문제를 구조적으로 개선' },
            { area:'정비 우선순위',   as:'담당자 경험과 개별 판단에 의존',                                                to:'재산권·과태료·취약계층·민원량 기준으로 우선순위 자동 산정' },
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'160px 1fr 1fr',
              padding:'14px 20px', fontSize:12.5, alignItems:'flex-start', gap:14,
              borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none'
            }}>
              <span style={{color:'var(--ink)', fontWeight:700}}>{r.area}</span>
              <span style={{color:'var(--ink-3)', lineHeight:1.65}}>{r.as}</span>
              <span style={{color:'var(--teal)', fontWeight:600, lineHeight:1.65}}>{r.to}</span>
            </div>
          ))}
        </div>
      </Card>

      {/* ────────── 활용 데이터 출처 ────────── */}
      <div style={{height:24}}/>
      <SectionHeader eyebrow="데이터" title="활용 법령데이터 — 8종 공공데이터 결합" desc="각 데이터는 단순 소개용이 아니라 탐지 로직의 입력값으로 직접 사용됩니다."/>
      <Card>
        <div style={{margin:'0 -20px', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr 1.3fr', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)'}}>
            <span>데이터</span><span>주요 필드·내용</span><span>Sync Law 활용 방식</span>
          </div>
          {[
            { d:'국가법령정보 공동활용 Open API', f:'현행법령 본문, 법령 연혁, 조문별 변경이력, 신구법, 3단 비교, 위임법령, 법령-자치법규 연계현황', u:'상위법 개정 감지, 신·구 조문 비교, 영향 법령 후보 추출' },
            { d:'법제처 국가법령정보 공유서비스',  f:'법률·대통령령·총리령·부령 조문 원문, 시행일자, 개정 이력, 소관 부처', u:'조문 단위 기준 데이터, 법령 개정 타임라인 생성' },
            { d:'법제처 자치법규 본문 조회',       f:'전국 지자체 자치법규 조문번호·전문·제목·내용·부칙·연계 법령',     u:'상위법 개정 후 조례·규칙 미반영 여부 분석' },
            { d:'법제처 자치법규(연계) 정보',      f:'자치법규ID, 법령ID, 연계조문번호, 연계유형, 연계일자',                u:'법령-자치법규 그래프 구축, 영향 전파 분석' },
            { d:'행정규칙 데이터',                f:'고시·훈령·예규·지침 본문 및 개정 이력',                              u:'법률·시행령 개정 후 중앙부처 하위 규정의 잔존 문구 탐지' },
            { d:'정부24 서식·안내문',             f:'민원신청서, 별지 서식, 안내문 PDF·HWP·HTML',                        u:'폐지된 동의항목, 잘못된 인용조문, 구버전 요건 문구 탐지' },
            { d:'국민불편 법령정비 사례집',        f:'국민 신고·제도 운영 중 확인된 불편, 절차적 애로, 정비 성과',           u:'AI 위험유형 학습, 정비 우선순위 가중치 설계' },
            { d:'국민신문고·민원 통계',            f:'기관·분야별 민원량, 반복 민원 키워드, 제보 처리 결과',                u:'국민 체감도가 높은 정비 후보 우선순위 산정' },
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr 1.2fr 1.3fr',
              padding:'12px 20px', fontSize:12.5, alignItems:'flex-start', gap:14,
              borderBottom: i<arr.length-1 ? '1px solid var(--line)' : 'none'
            }}>
              <span style={{color:'var(--ink)', fontWeight:700}}>{r.d}</span>
              <span style={{color:'var(--ink-3)', lineHeight:1.6}}>{r.f}</span>
              <span style={{color:'var(--navy)', fontWeight:600, lineHeight:1.6}}>{r.u}</span>
            </div>
          ))}
        </div>
      </Card>
    </Page>
  );
}

// ─────────── DASHBOARD (most important) ───────────
function DashboardScreen({ go }){
  const [region, setRegion] = useState1('전체');
  const [type, setType] = useState1('전체');
  const [period, setPeriod] = useState1('최근 12주');

  return (
    <Page
      eyebrow="실시간 모니터링"
      title="범정부 법령 정합성 점검 대시보드"
      desc="2026년 4월 30일 23:48 기준 · 다음 업데이트 30분 후"
      actions={[
        <Btn key="1" kind="secondary" icon="download">데이터 내보내기</Btn>,
        <Btn key="2" kind="primary" icon="spark" onClick={()=>go('insight')}>AI 분석 리포트 생성</Btn>,
      ]}
    >
      {/* Filters */}
      <Card style={{marginBottom:18, padding:'14px 18px'}}>
        <div style={{display:'flex', alignItems:'center', gap:18, flexWrap:'wrap'}}>
          <div style={{display:'flex', alignItems:'center', gap:8}}>
            <Icon name="filter" size={14} color="var(--ink-3)"/>
            <span style={{fontSize:12, color:'var(--ink-3)', fontWeight:600}}>필터</span>
          </div>
          <FilterDropdown label="지역" value={region} options={RSData.REGIONS} onChange={setRegion}/>
          <FilterDropdown label="규제 유형" value={type} options={RSData.REG_TYPES} onChange={setType}/>
          <FilterDropdown label="기간" value={period} options={['최근 4주','최근 12주','최근 24주','연간']} onChange={setPeriod}/>
          <div style={{flex:1}}/>
          <div style={{display:'flex', gap:6}}>
            {['리스트','카드','지도'].map((v,i)=>(
              <Chip key={v} active={i===0}>{v}</Chip>
            ))}
          </div>
        </div>
      </Card>

      {/* KPI row */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:12, marginBottom:18}}>
        <Stat label="전체 탐지 건수"        value={RSData.KPIS[0].value} delta={RSData.KPIS[0].delta} tone="navy"  icon="grid"/>
        <Stat label="잔존 규제 의심"        value={RSData.KPIS[1].value} delta={RSData.KPIS[1].delta} tone="amber" icon="shield"/>
        <Stat label="그림자 규제 의심"      value={RSData.KPIS[2].value} delta={RSData.KPIS[2].delta} tone="amber" icon="layers"/>
        <Stat label="행정규칙 불일치 의심"   value={RSData.KPIS[3].value} delta={RSData.KPIS[3].delta} tone="steel" icon="compare"/>
        <Stat label="자치법규 미정비 의심"   value={RSData.KPIS[4].value} delta={RSData.KPIS[4].delta} tone="steel" icon="building"/>
        <Stat label="민원서식 미정비 의심"   value={RSData.KPIS[5].value} delta={RSData.KPIS[5].delta} tone="steel" icon="doc"/>
      </div>

      {/* Trend + Composition + Citizen reports */}
      <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr', gap:14, marginBottom:18}}>
        <Card>
          <SectionHeader
            title="탐지 추이"
            desc="주별 누적 탐지 건수 · 잔존 규제 의심 (점선)"
            right={
              <div style={{display:'flex', gap:14, alignItems:'center', fontSize:12, color:'var(--ink-3)'}}>
                <LegendDot color="#2E5FB0" label="전체 탐지"/>
                <LegendDot color="#C77A1B" label="잔존 규제 의심" dashed/>
              </div>
            }
          />
          <AreaChart data={RSData.TREND}/>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:8, paddingTop:10, borderTop:'1px solid var(--line)', fontSize:11, color:'var(--ink-4)'}}>
            {RSData.TREND.filter((_,i)=>i%2===0).map(t=> <span key={t.w}>{t.w}</span>)}
          </div>
        </Card>

        <Card>
          <SectionHeader title="규제 유형별 구성"/>
          <div style={{display:'flex', alignItems:'center', gap:18}}>
            <div style={{position:'relative'}}>
              <Donut size={130} thickness={20} segments={[
                { value: 3421, color:'#0B2E5C' },
                { value: 1284, color:'#C77A1B' },
                { value: 2156, color:'#5B7C99' },
                { value: 4892, color:'#2E5FB0' },
                { value: 1094, color:'#7DA9E6' },
              ]}/>
              <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center'}}>
                <div className="mono" style={{fontSize:18, fontWeight:700, color:'var(--ink)'}}>12,847</div>
                <div style={{fontSize:10, color:'var(--ink-3)'}}>전체 의심 건</div>
              </div>
            </div>
            <div style={{flex:1}}>
              {[
                {c:'#0B2E5C', l:'잔존 규제',     v:3421, p:26.6},
                {c:'#C77A1B', l:'그림자 규제',   v:1284, p:10.0},
                {c:'#5B7C99', l:'행정규칙 불일치',v:2156, p:16.8},
                {c:'#2E5FB0', l:'자치법규 미정비',v:4892, p:38.1},
                {c:'#7DA9E6', l:'민원서식 미정비',v:1094, p: 8.5},
              ].map(s=>(
                <div key={s.l} style={{display:'flex', alignItems:'center', gap:8, fontSize:11.5, padding:'4px 0'}}>
                  <span style={{width:8, height:8, borderRadius:2, background:s.c}}/>
                  <span style={{flex:1, color:'var(--ink-2)'}}>{s.l}</span>
                  <span className="mono" style={{color:'var(--ink-2)', fontWeight:600}}>{s.v.toLocaleString()}</span>
                  <span className="mono" style={{color:'var(--ink-4)', minWidth:38, textAlign:'right'}}>{s.p}%</span>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <Card style={{background:'linear-gradient(180deg, #FBFCFE 0%, #fff 60%)'}}>
          <SectionHeader title="국민 제보 연계" right={<Badge tone="teal">참여 487건</Badge>}/>
          <div style={{display:'flex', alignItems:'baseline', gap:12, marginTop:4}}>
            <div className="mono" style={{fontSize:36, fontWeight:700, color:'var(--navy)', letterSpacing:'-0.02em'}}>92</div>
            <div style={{fontSize:12, color:'var(--ink-3)'}}>건이 AI 탐지와 일치</div>
          </div>
          <div style={{height:6, background:'#EEF2F7', borderRadius:99, marginTop:10, overflow:'hidden'}}>
            <div style={{width:'18.9%', height:'100%', background:'var(--teal)'}}/>
          </div>
          <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-3)', marginTop:6}}>
            <span>AI 일치율 18.9%</span>
            <span>최근 7일 +14건</span>
          </div>
          <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid var(--line)'}}>
            {RSData.REPORT_FEED.slice(0,3).map(r=>(
              <div key={r.id} style={{display:'flex', alignItems:'flex-start', gap:10, padding:'8px 0', borderBottom:'1px dashed var(--line)'}}>
                <div style={{width:6, height:6, borderRadius:'50%', background:'var(--teal)', marginTop:6}}/>
                <div style={{flex:1}}>
                  <div style={{fontSize:12, fontWeight:600, color:'var(--ink)', lineHeight:1.4}}>{r.title}</div>
                  <div style={{fontSize:10.5, color:'var(--ink-4)', marginTop:3}}>{r.region} · {r.date}</div>
                </div>
                <Badge tone={r.status==='정비 반영'?'teal': r.status==='기관 이송'?'blue':'steel'} size="sm">{r.status}</Badge>
              </div>
            ))}
          </div>
          <Btn kind="secondary" size="sm" icon="megaphone" style={{width:'100%', marginTop:12, justifyContent:'center'}} onClick={()=>go('report')}>국민 제보 화면 열기</Btn>
        </Card>
      </div>

      {/* TOP 10 + Recent alerts */}
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:14}}>
        <Card>
          <SectionHeader
            title="개선 우선순위 TOP 10"
            desc="영향도 · 민원 · 제보 가중 점수 기준"
            right={
              <div style={{display:'flex', gap:6}}>
                <Chip active>전체</Chip><Chip>중앙</Chip><Chip>지방</Chip>
              </div>
            }
          />
          <div style={{margin:'8px -20px 0', borderTop:'1px solid var(--line)'}}>
            <div style={{display:'grid', gridTemplateColumns:'40px 110px 90px 1fr 100px 130px 32px', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)', letterSpacing:'0.02em'}}>
              <span>순위</span><span>기관</span><span>유형</span><span>건명</span>
              <span>위험도</span><span>상태</span><span></span>
            </div>
            {RSData.TOP10.map((r,i)=>(
              <div key={r.rank} style={{
                display:'grid', gridTemplateColumns:'40px 110px 90px 1fr 100px 130px 32px',
                padding:'12px 20px', fontSize:13, alignItems:'center',
                borderBottom: i<RSData.TOP10.length-1 ? '1px solid var(--line)' : 'none',
                cursor:'pointer'
              }}
              onMouseEnter={e=> e.currentTarget.style.background='#FBFCFE'}
              onMouseLeave={e=> e.currentTarget.style.background='transparent'}
              onClick={()=>go('analysis')}>
                <span className="mono" style={{
                  fontWeight:700, color: r.rank<=3 ? 'var(--amber)' : 'var(--ink-3)',
                  fontSize: r.rank<=3 ? 14:13
                }}>{String(r.rank).padStart(2,'0')}</span>
                <span style={{color:'var(--ink-2)', fontWeight:500, fontSize:12.5}}>{r.agency}</span>
                <span><Badge tone="ghost" size="sm">{r.type}</Badge></span>
                <span style={{color:'var(--ink)', fontWeight:500}}>{r.title}</span>
                <RiskBar value={r.score}/>
                <Badge tone={r.status.includes('높음')?'amber':'steel'} size="sm">{r.status}</Badge>
                <Icon name="arrow-right" size={14} color="var(--ink-4)"/>
              </div>
            ))}
          </div>
        </Card>

        <Card>
          <SectionHeader
            title="최근 상위법 개정 감지"
            right={<Badge tone="amber"><span style={{width:6,height:6,borderRadius:'50%',background:'#C77A1B'}}/>실시간</Badge>}
          />
          {RSData.RECENT_ALERTS.map((a,i)=>(
            <div key={i} style={{
              padding:'14px 0', borderBottom: i<RSData.RECENT_ALERTS.length-1?'1px solid var(--line)':'none',
              cursor:'pointer'
            }} onClick={()=>go('upper')}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>{a.date}</span>
                <Badge tone={a.severity==='high'?'amber': a.severity==='mid'?'steel':'ghost'} size="sm">
                  {a.severity==='high'?'영향 큼': a.severity==='mid'?'영향 보통':'영향 작음'}
                </Badge>
              </div>
              <div style={{fontSize:13.5, fontWeight:600, color:'var(--ink)'}}>{a.law}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{a.change}</div>
              <div style={{display:'flex', alignItems:'center', gap:6, marginTop:6}}>
                <Icon name="layers" size={11} color="var(--ink-4)"/>
                <span style={{fontSize:11, color:'var(--ink-3)'}}>연관 하위규정</span>
                <span className="mono" style={{fontSize:12, fontWeight:700, color:'var(--navy)'}}>{a.impact}</span>
                <span style={{fontSize:11, color:'var(--ink-3)'}}>건 추가 검토 필요</span>
              </div>
            </div>
          ))}
          <Btn kind="ghost" size="sm" icon="arrow-right" style={{width:'100%', justifyContent:'center', marginTop:8, color:'var(--blue)'}} onClick={()=>go('upper')}>전체 알림 보기</Btn>
        </Card>
      </div>
    </Page>
  );
}

function FilterDropdown({ label, value, options, onChange }){
  const [open, setOpen] = useState1(false);
  const [pos, setPos] = useState1(null);
  const wrapRef = React.useRef(null);
  const menuRef = React.useRef(null);

  const updatePosition = React.useCallback(()=>{
    if(!wrapRef.current) return;
    const r = wrapRef.current.getBoundingClientRect();
    setPos({ left:r.left, top:r.bottom + 6, width:Math.max(170, r.width) });
  },[]);

  React.useEffect(()=>{
    if(!open) return;
    updatePosition();
    const onWindow = ()=> updatePosition();
    const onDoc = (ev)=>{
      if(wrapRef.current && wrapRef.current.contains(ev.target)) return;
      if(menuRef.current && menuRef.current.contains(ev.target)) return;
      setOpen(false);
    };
    window.addEventListener('resize', onWindow);
    window.addEventListener('scroll', onWindow, true);
    document.addEventListener('pointerdown', onDoc);
    return ()=>{
      window.removeEventListener('resize', onWindow);
      window.removeEventListener('scroll', onWindow, true);
      document.removeEventListener('pointerdown', onDoc);
    };
  }, [open, updatePosition]);

  const menu = open && pos ? ReactDOM.createPortal(
    <div ref={menuRef} style={{
      position:'fixed', top:pos.top, left:pos.left, zIndex:99999,
      background:'#fff', border:'1px solid var(--line)', borderRadius:8,
      boxShadow:'0 18px 42px rgba(15,23,42,0.18)', minWidth:pos.width,
      maxHeight:'min(360px, calc(100vh - 120px))', overflowY:'auto',
      padding:'4px 0'
    }}>
      {options.map(o=>(
        <button key={o} onClick={()=>{ onChange(o); setOpen(false); }} style={{
          display:'block', width:'100%', textAlign:'left', padding:'9px 12px',
          background: o===value?'var(--blue-soft)':'transparent', border:'none',
          fontSize:12, color: o===value?'var(--navy)':'var(--ink-2)', fontWeight: o===value?700:500
        }}>{o}</button>
      ))}
    </div>,
    document.body
  ) : null;

  return (
    <div ref={wrapRef} style={{position:'relative', overflow:'visible'}}>
      <button onClick={(e)=>{ e.stopPropagation(); updatePosition(); setOpen(o=>!o); }} style={{
        display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px',
        background:'#fff', border:'1px solid var(--line-2)', borderRadius:6,
        fontSize:12, color:'var(--ink-2)', fontWeight:500
      }}>
        <span style={{color:'var(--ink-4)'}}>{label}</span>
        <span style={{fontWeight:600, color:'var(--ink)'}}>{value}</span>
        <Icon name="arrow-down" size={11}/>
      </button>
      {menu}
    </div>
  );
}

function LegendDot({ color, label, dashed }){
  return (
    <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
      <span style={{
        width:14, height:2, background: dashed ? `repeating-linear-gradient(90deg, ${color} 0 3px, transparent 3px 6px)` : color
      }}/>
      <span>{label}</span>
    </span>
  );
}

Object.assign(window, { HomeScreen, DashboardScreen });