/* --- src/screens-3.jsx --- */
// Screens 7-10: Public report, AI analysis detail, Insight report, Agencies
const { useState: useStateC } = React;

// ─────────── 07 국민 제보 ───────────
function ReportScreen({ go }){
  const [topic, setTopic] = useStateC('민원서식');
  const [region, setRegion] = useStateC('권역 A');
  const [text, setText] = useStateC('');
  const charLen = text.length;

  return (
    <Page
      eyebrow="07 · 시민 참여"
      title="국민 제보 분석 — 자연어 제보를 구조화된 검토 리포트로"
      desc="옛 기준대로 운영되는 규정·서식·안내문 의심 사례를 일상에서 마주쳤다면 제보해 주세요. AI가 관련 법령·자치법규·민원서식·안내문을 탐색해 담당기관 검토를 위한 보조자료를 정리합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="download" data-action="export-report-csv">제보 현황 CSV</Btn>,
        <Btn key="2" kind="primary" icon="spark" data-action="run-citizen-report-analysis">AI 구조화 분석 실행</Btn>,
      ]}
    >
      <div data-role="mock-notice" style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', marginBottom:14, background:'#FEF3C7', border:'1px solid #FCD34D', borderRadius:8, fontSize:12, color:'#854D0E', fontWeight:600}}>
        <span style={{fontSize:14}}>📋</span>
        <span style={{flex:1, lineHeight:1.55}}><b>이 화면은 시연용 mock 데이터</b>입니다. 표시된 제보 목록은 화면 구성을 보여드리는 예시이며 실제 접수된 제보가 아닙니다. 실측 데이터로 작동하는 화면: <b>홈 · 정비 검토 후보 · 신구조문 비교 · 사례 상세 분석</b>.</span>
        <button onClick={()=>go('dashboard')} style={{fontSize:11, fontWeight:700, color:'#854D0E', background:'#FEF9C3', border:'1px solid #EAB308', padding:'4px 10px', borderRadius:5, cursor:'pointer'}}>실측 후보 보기 →</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14}}>
        <Card>
          <SectionHeader title="제보 내용 입력" desc="개인정보가 포함되지 않도록 주의해 주세요." />
          <div style={{display:'grid', gap:14}}>
            <Field label="제보 유형">
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {['민원서식','자치법규','행정규칙','안내문','기타'].map(t=>(
                  <Chip key={t} active={topic===t} onClick={()=>setTopic(t)}>{t}</Chip>
                ))}
              </div>
            </Field>
            <Field label="예시 제보 · 클릭해 둘러볼 수 있습니다">
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {[
                  '복지급여 신청서에 폐지된 동의 항목이 남아있어요',
                  '옥외광고물 조례가 상위법 개정 후 그대로입니다',
                  '주민센터 안내문이 구 양식 그대로 부착되어 있어요',
                  '사업자등록 안내가 상위법과 다릅니다'
                ].map((t,i)=>(
                  <button key={i} data-action="insert-example-report" data-example-idx={i} onClick={()=>setText(t)} style={{
                    padding:'6px 12px', borderRadius:99, fontSize:11.5, fontWeight:500,
                    background:'#FBFCFE', border:'1px dashed var(--line-2)', color:'var(--ink-2)',
                    cursor:'pointer', textAlign:'left'
                  }}>{t}</button>
                ))}
              </div>
            </Field>
            <Field label="발생 지역">
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {['권역 A','권역 B','권역 C','권역 D','권역 E','권역 F','권역 G','기타'].map(r=>(
                  <Chip key={r} active={region===r} onClick={()=>setRegion(r)}>{r}</Chip>
                ))}
              </div>
            </Field>
            <Field label="관련 기관 (선택)">
              <input placeholder="예: 광역시 X 가상구청, C부처" style={inputStyle}/>
            </Field>
            <Field label="제보 제목">
              <input placeholder="짧고 명확한 제목을 작성해 주세요" style={inputStyle}/>
            </Field>
            <Field label="상세 내용" hint={`${charLen} / 1000자`}>
              <textarea id="input-citizen-report-text" data-action="input-citizen-report" value={text} onChange={e=>setText(e.target.value.slice(0,1000))}
                placeholder="언제, 어디서, 어떤 규제 또는 서식이 불편했는지 구체적으로 적어주세요. AI가 관련 법령 · 자치법규 · 민원서식을 탐색해 드립니다."
                style={{...inputStyle, minHeight:140, resize:'vertical', lineHeight:1.6, padding:'12px 14px'}}
              />
            </Field>
            <Field label="첨부 자료 (선택)" hint="JPG / PNG / PDF · 10MB 이하">
              <div style={{
                border:'1.5px dashed var(--line-2)', borderRadius:8, padding:'24px',
                textAlign:'center', color:'var(--ink-3)', background:'#FBFCFE'
              }}>
                <Icon name="plus" size={20} color="var(--ink-4)"/>
                <div style={{fontSize:13, marginTop:8, fontWeight:600, color:'var(--ink-2)'}}>파일을 드래그하거나 클릭하여 업로드</div>
                <div style={{fontSize:11, marginTop:4}}>관련 서식·안내문 사진을 첨부하시면 분석 정확도가 높아집니다</div>
              </div>
            </Field>
            <Field>
              <label style={{display:'flex', alignItems:'flex-start', gap:8, fontSize:12, color:'var(--ink-2)'}}>
                <input type="checkbox" defaultChecked style={{marginTop:3}}/>
                <span>제보 내용에 개인정보가 포함되어 있지 않으며, 검증을 위해 담당 기관에 전달되는 것에 동의합니다.</span>
              </label>
            </Field>
            <div style={{display:'flex', gap:8, justifyContent:'flex-end'}}>
              <Btn kind="secondary" data-action="save-report-draft">임시 저장</Btn>
              <Btn kind="primary" icon="megaphone" data-action="submit-citizen-report">제보 제출 · AI 구조화 분석</Btn>
            </div>
          </div>
        </Card>

        <div style={{display:'grid', gap:14, alignContent:'start'}}>
          <Card>
            <SectionHeader title="제보 처리 절차"/>
            {[
              {n:'01', t:'AI 1차 검증', d:'유사 사례·법령과 자동 매칭하여 신빙성 분석'},
              {n:'02', t:'담당 기관 이송', d:'관할 기관과 법제처 정비과로 자동 송부'},
              {n:'03', t:'기관 회신 / 정비', d:'14일 이내 기관 검토 결과 회신'},
              {n:'04', t:'결과 통보', d:'제보자에게 처리 결과 알림 발송'},
            ].map((s,i)=>(
              <div key={s.n} style={{display:'flex', gap:12, padding:'10px 0', borderBottom:i<3?'1px dashed var(--line)':'none'}}>
                <div className="mono" style={{
                  width:30, height:30, borderRadius:'50%',
                  background:'var(--blue-soft)', color:'var(--navy)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:11, fontWeight:700, flexShrink:0
                }}>{s.n}</div>
                <div>
                  <div style={{fontSize:13, fontWeight:600, color:'var(--ink)'}}>{s.t}</div>
                  <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2, lineHeight:1.55}}>{s.d}</div>
                </div>
              </div>
            ))}
          </Card>

          <Card>
            <SectionHeader title="최근 제보 현황" right={<Badge tone="teal" size="sm">487건</Badge>}/>
            {RSData.REPORT_FEED.map(r=>(
              <div key={r.id} style={{padding:'10px 0', borderBottom:'1px dashed var(--line)'}}>
                <div style={{display:'flex', alignItems:'center', gap:6, marginBottom:4}}>
                  <span className="mono" style={{fontSize:10, color:'var(--ink-4)'}}>{r.id}</span>
                  <Badge tone="ghost" size="sm">{r.topic}</Badge>
                  <Badge tone={r.status==='정비 반영'?'teal': r.status==='기관 이송'?'blue':'steel'} size="sm">{r.status}</Badge>
                </div>
                <div style={{fontSize:12.5, color:'var(--ink)', fontWeight:500, lineHeight:1.5}}>{r.title}</div>
                <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-3)', marginTop:4}}>
                  <span>{r.region}</span>
                  <span>{r.date} · 공감 {r.votes}</span>
                </div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </Page>
  );
}

function Field({ label, hint, children }){
  return (
    <div>
      {(label || hint) && (
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6}}>
          <span style={{fontSize:12, fontWeight:600, color:'var(--ink-2)'}}>{label}</span>
          {hint && <span style={{fontSize:11, color:'var(--ink-4)'}}>{hint}</span>}
        </div>
      )}
      {children}
    </div>
  );
}
const inputStyle = {
  width:'100%', padding:'10px 14px', border:'1px solid var(--line-2)',
  borderRadius:7, fontSize:13, fontFamily:'inherit', outline:'none',
  background:'#fff', color:'var(--ink)'
};

// ─────────── 08 AI 분석 결과 상세 ───────────
function AnalysisScreen({ go }){
  return (
    <Page
      eyebrow="08 · AI 분석"
      title="AI 분석 결과 상세"
      desc="개인정보 보호법 시행령 제5조 / 정비 필요성 분석"
      actions={[
        <Btn key="1" kind="secondary" icon="flag">담당자 지정</Btn>,
        <Btn key="2" kind="secondary" icon="download">분석 보고서</Btn>,
        <Btn key="3" kind="primary" icon="check">정비 권고 발송</Btn>,
      ]}
    >
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14, marginBottom:14}}>
        <Card>
          <div style={{display:'flex', gap:14}}>
            <div style={{position:'relative', flexShrink:0}}>
              <ScoreCircle score={87.4}/>
            </div>
            <div style={{flex:1}}>
              <Badge tone="amber">정비 필요성 높음</Badge>
              <div style={{fontSize:18, fontWeight:700, marginTop:8}}>개인정보 보호법 시행령 제5조</div>
              <div style={{fontSize:12.5, color:'var(--ink-3)', marginTop:4}}>중앙위원회 K · 최종개정 2024-08-12 · ID L-2841</div>
              <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10, marginTop:14}}>
                {[
                  {l:'영향도',  v:'92', s:'/ 100'},
                  {l:'민원량',  v:'78', s:'/ 100'},
                  {l:'제보 가중치', v:'81', s:'/ 100'},
                  {l:'정비 시급성', v:'96', s:'/ 100'},
                ].map(s=>(
                  <div key={s.l} style={{padding:'10px 12px', background:'#F8FAFC', borderRadius:6}}>
                    <div style={{fontSize:11, color:'var(--ink-3)'}}>{s.l}</div>
                    <div style={{display:'flex', alignItems:'baseline', gap:3, marginTop:4}}>
                      <span className="mono" style={{fontSize:18, fontWeight:700, color:'var(--navy)'}}>{s.v}</span>
                      <span style={{fontSize:10, color:'var(--ink-4)'}}>{s.s}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Card>

        <Card>
          <SectionHeader title="AI 분석 요약" right={<Badge tone="blue" size="sm"><Icon name="brain" size={11}/> v2.4</Badge>}/>
          <div style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.75}}>
            상위법 <b style={{color:'var(--ink)'}}>개인정보 보호법 제15조</b>가 2026년 4월 29일 개정되었으나,
            본 시행령 조항은 신설된 단서와 예외 조항이 반영되지 않아 <b style={{color:'var(--amber)'}}>정비 필요성이 높습니다</b>.
            연관 자치법규 <span className="mono" style={{fontWeight:600}}>3건</span>, 행정규칙 <span className="mono" style={{fontWeight:600}}>2건</span>,
            민원서식 <span className="mono" style={{fontWeight:600}}>1건</span>이 동일한 미정비 패턴을 보이고 있어, 일괄 정비를 권고합니다.
          </div>
          <div style={{marginTop:12, paddingTop:12, borderTop:'1px solid var(--line)', display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:10}}>
            <Insight icon="layers" t="유사 사례 5건"  d="다른 부처 시행령에서 동일 패턴 확인"/>
            <Insight icon="megaphone" t="국민 제보 7건" d="동일 조항에 대한 정비 요청"/>
          </div>
        </Card>
      </div>

      <Card style={{marginBottom:14}}>
        <SectionHeader title="근거 데이터" desc="AI 판단의 근거가 된 출처를 모두 제시합니다."/>
        <div style={{margin:'8px -20px 0', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'104px 130px 1fr 120px 100px', padding:'10px 20px', gap:14, fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)'}}>
            <span>유형</span><span>출처</span><span>인용 내용</span><span>유사도</span><span>가중치</span>
          </div>
          {[
            {kind:'법령',     src:'개인정보 보호법',      content:'제15조 제1항 제3호 단서 신설 · 2026-04-29 공포', sim:96, w:'1.00'},
            {kind:'법령',     src:'개인정보 보호법 시행령', content:'제5조 (수집·이용 범위) 단서 미반영', sim:94, w:'0.95'},
            {kind:'고시',     src:'중앙위원회 K 고시 제2023-7호', content:'동의 요건 표기 불일치', sim:88, w:'0.80'},
            {kind:'민원',     src:'국민신문고 민원 분석',  content:'유사 민원 78건 / 6개월', sim:74, w:'0.70'},
            {kind:'국민제보', src:'Sync·Law 제보 R-2398', content:'광역도 Y 수원시 옥외광고물 조례 — 미반영 신고', sim:81, w:'0.65'},
            {kind:'판례',     src:'헌재 2024헌마415',     content:'개인정보 자기결정권 우선 판단', sim:62, w:'0.50'},
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'104px 130px 1fr 120px 100px', gap:14,
              padding:'12px 20px', fontSize:12.5, alignItems:'center',
              borderBottom: i<arr.length-1?'1px solid var(--line)':'none'
            }}>
              <div style={{minWidth:0, overflow:'hidden'}}>
                <Badge tone="ghost" size="sm">{r.kind}</Badge>
              </div>
              <span style={{fontSize:12, color:'var(--ink-2)', fontWeight:600, minWidth:0, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{r.src}</span>
              <span style={{color:'var(--ink-2)'}}>{r.content}</span>
              <RiskBar value={r.sim}/>
              <span className="mono" style={{color:'var(--ink-2)', fontWeight:600}}>{r.w}</span>
            </div>
          ))}
        </div>
      </Card>

      <Card>
        <SectionHeader title="권고 조치"/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12}}>
          {[
            {n:'01', t:'시행령 제5조 단서 신설', d:'상위법과 동일한 단서 조항을 시행령에 반영', tone:'navy'},
            {n:'02', t:'고시 제2023-7호 정비',   d:'표기 통일 및 폐지된 인용 정비', tone:'blue'},
            {n:'03', t:'관련 민원서식 일괄 점검', d:'민원24 서식·안내문 7건 OCR 재검사', tone:'steel'},
          ].map(a=>(
            <div key={a.n} style={{
              padding:'16px 18px', border:'1px solid var(--line)', borderRadius:8, position:'relative',
              background:'#FBFCFE'
            }}>
              <div className="mono" style={{fontSize:11, color:'var(--blue)', fontWeight:700, marginBottom:8}}>권고 {a.n}</div>
              <div style={{fontSize:14, fontWeight:700, color:'var(--ink)'}}>{a.t}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:6, lineHeight:1.6}}>{a.d}</div>
            </div>
          ))}
        </div>
      </Card>
    </Page>
  );
}

function ScoreCircle({ score }){
  const r = 52, c = 2*Math.PI*r;
  const off = c - (score/100)*c;
  return (
    <svg width="130" height="130" viewBox="0 0 130 130">
      <circle cx="65" cy="65" r={r} fill="none" stroke="#EEF2F7" strokeWidth="10"/>
      <circle cx="65" cy="65" r={r} fill="none" stroke="#C77A1B" strokeWidth="10" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 65 65)"/>
      <text x="65" y="63" textAnchor="middle" className="mono" style={{fontSize:24, fontWeight:700, fill:'#0F172A'}}>{score}</text>
      <text x="65" y="80" textAnchor="middle" style={{fontSize:10, fill:'#64748B'}}>정비 필요성</text>
    </svg>
  );
}

function Insight({ icon, t, d }){
  return (
    <div style={{display:'flex', gap:8, alignItems:'flex-start', padding:'8px 10px', background:'#F8FAFC', borderRadius:6}}>
      <Icon name={icon} size={14} color="var(--blue)"/>
      <div>
        <div style={{fontSize:12, fontWeight:600, color:'var(--ink)'}}>{t}</div>
        <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2}}>{d}</div>
      </div>
    </div>
  );
}

// ─────────── 09 정합성 리포트 ───────────
function InsightScreen({ go }){
  return (
    <Page
      eyebrow="09 · 분석 리포트"
      title="정합성 리포트"
      desc="2026년 1분기 · AI 자동 생성 · 법제처 규제정비과 / 발행번호 SLR-2026-Q1-014"
      actions={[
        <Btn key="1" kind="secondary" icon="download">PDF 다운로드</Btn>,
        <Btn key="2" kind="primary" icon="spark">새 리포트 생성</Btn>,
      ]}
    >
      <div data-role="mock-notice" style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', marginBottom:14, background:'#FEF3C7', border:'1px solid #FCD34D', borderRadius:8, fontSize:12, color:'#854D0E', fontWeight:600}}>
        <span style={{fontSize:14}}>📋</span>
        <span style={{flex:1, lineHeight:1.55}}><b>이 리포트는 시연용 mock 데이터</b>입니다. 정비 검토 후보의 실측 사례와는 다릅니다. 실측 데이터로 작동하는 화면: <b>홈 · 정비 검토 후보 · 신구조문 비교 · 사례 상세 분석</b>.</span>
        <button onClick={()=>go('dashboard')} style={{fontSize:11, fontWeight:700, color:'#854D0E', background:'#FEF9C3', border:'1px solid #EAB308', padding:'4px 10px', borderRadius:5, cursor:'pointer'}}>실측 후보 보기 →</button>
      </div>
      <Card style={{marginBottom:14, padding:0, overflow:'hidden'}}>
        <div style={{
          padding:'24px 28px', background:'linear-gradient(135deg, #0B2E5C 0%, #1E4D8C 100%)', color:'#fff'
        }}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
            <div>
              <div style={{fontSize:11, opacity:.7, letterSpacing:'0.08em'}}>EXECUTIVE SUMMARY · 2026 Q1</div>
              <div style={{fontSize:22, fontWeight:700, marginTop:8, letterSpacing:'-0.01em'}}>1분기 상위법-하위문서 정합성 점검 종합</div>
              <div style={{fontSize:13, opacity:.8, marginTop:6, maxWidth:640, lineHeight:1.65}}>
                AI는 1분기 동안 상위법과 하위문서의 기준이 맞지 않을 가능성이 있는 사례를 점검했으며, 직접 상위근거가 확인된 항목을 우선 정리했습니다.
                상위법 개정 영향이 큰 5개 법령에 대한 정비 검토를 권고합니다. <span style={{color:'#5EE6B5', fontWeight:700}}>모든 결과는 담당자 검토용 보조자료</span>이며, 최종 정비 판단은 소관 기관에서 수행합니다.
              </div>
            </div>
            <div style={{display:'flex', gap:24, textAlign:'right'}}>
              {[
                {l:'전체 탐지', v:'12,847'},
                {l:'정비 필요성 높음', v:'1,284'},
                {l:'평균 처리일', v:'8.4일'},
              ].map(s=>(
                <div key={s.l}>
                  <div className="mono" style={{fontSize:24, fontWeight:700}}>{s.v}</div>
                  <div style={{fontSize:11, opacity:.7, marginTop:2}}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Card>

      <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:14, marginBottom:14}}>
        <Card>
          <SectionHeader title="유형별 분기 추이"/>
          <BarChartGrouped/>
        </Card>
        <Card>
          <SectionHeader title="정비 처리율"/>
          <div style={{display:'flex', alignItems:'center', gap:18}}>
            <Donut size={120} thickness={16} segments={[
              { value:64, color:'#1F7A6B' },
              { value:36, color:'#EEF2F7' },
            ]}/>
            <div style={{flex:1}}>
              <div style={{fontSize:30, fontWeight:700, color:'var(--ink)'}} className="mono">64.2<span style={{fontSize:14, color:'var(--ink-4)', fontWeight:500}}>%</span></div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4}}>전체 권고 대비 정비 완료 비율</div>
              <div style={{display:'flex', gap:14, marginTop:14}}>
                <span style={{fontSize:11, color:'var(--ink-3)'}}>완료 <span className="mono" style={{color:'var(--teal)', fontWeight:700}}>824</span></span>
                <span style={{fontSize:11, color:'var(--ink-3)'}}>진행 <span className="mono" style={{color:'var(--steel)', fontWeight:700}}>312</span></span>
                <span style={{fontSize:11, color:'var(--ink-3)'}}>대기 <span className="mono" style={{color:'var(--amber)', fontWeight:700}}>148</span></span>
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* ────────── 정비 시급성 스코어 산식 ────────── */}
      <Card style={{marginBottom:14, padding:0, overflow:'hidden'}}>
        <div style={{padding:'18px 24px', borderBottom:'1px solid var(--line)', background:'#FBFCFE'}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:10}}>
            <div>
              <div style={{display:'inline-flex', alignItems:'center', gap:6, padding:'3px 9px', background:'var(--blue-soft)', color:'var(--navy)', borderRadius:99, fontSize:10.5, fontWeight:700, marginBottom:6}}>
                <Icon name="brain" size={11}/> SCORING MODEL · v2.4
              </div>
              <div style={{fontSize:16, fontWeight:700, color:'var(--ink)'}}>정비 시급성 스코어 산식 (공개)</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:3}}>가중치는 모두 공개되며, 담당자가 분야별로 수동 조정할 수 있습니다.</div>
            </div>
            <Badge tone="teal" size="sm">투명성 · 책임성</Badge>
          </div>
        </div>
        <div style={{padding:'18px 24px', background:'#0B2E5C', color:'#fff', fontFamily:'JetBrains Mono, monospace', fontSize:13.5, letterSpacing:'-0.005em', lineHeight:1.7}}>
          <span style={{color:'#5EE6B5', fontWeight:700}}>Score</span>
          <span style={{color:'#94A3B8'}}> = </span>
          <span style={{color:'#FFD86B'}}>0.30</span><span style={{color:'#94A3B8'}}> × </span>권리침해_위험
          <span style={{color:'#94A3B8'}}> + </span>
          <span style={{color:'#FFD86B'}}>0.20</span><span style={{color:'#94A3B8'}}> × </span>금전부담_위험
          <span style={{color:'#94A3B8'}}> + </span>
          <span style={{color:'#FFD86B'}}>0.15</span><span style={{color:'#94A3B8'}}> × </span>시행일_경과일
          <br/>
          <span style={{paddingLeft:60, color:'#94A3B8'}}>+ </span>
          <span style={{color:'#FFD86B'}}>0.15</span><span style={{color:'#94A3B8'}}> × </span>민원·제보량
          <span style={{color:'#94A3B8'}}> + </span>
          <span style={{color:'#FFD86B'}}>0.10</span><span style={{color:'#94A3B8'}}> × </span>영향_기관_수
          <span style={{color:'#94A3B8'}}> + </span>
          <span style={{color:'#FFD86B'}}>0.10</span><span style={{color:'#94A3B8'}}> × </span>취약계층_관련성
        </div>
        <div style={{padding:'16px 24px'}}>
          <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:10, marginBottom:12}}>
            {[
              { w:'30%', t:'권리침해 위험', d:'재산권·신청권·이의신청 권리 침해 가능성', tone:'#C77A1B' },
              { w:'20%', t:'금전부담 위험', d:'과태료·보증금·수수료 등 금전 부담 발생', tone:'#C77A1B' },
              { w:'15%', t:'시행일 경과일', d:'상위법 시행일 이후 미정비로 경과한 일수', tone:'#5B7C99' },
              { w:'15%', t:'민원·제보량',   d:'국민신문고·Sync Law 제보 누적량 가중치', tone:'#5B7C99' },
              { w:'10%', t:'영향 기관 수',  d:'동일 패턴이 발견된 기관·문서 개수',     tone:'#94A3B8' },
              { w:'10%', t:'취약계층 관련성', d:'노인·장애인·아동·저소득 등 보호 대상 영향', tone:'#1F7A6B' },
            ].map(s=>(
              <div key={s.t} style={{padding:'12px 12px', border:'1px solid var(--line)', borderRadius:8, background:'#FBFCFE'}}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6}}>
                  <span style={{fontSize:10.5, fontWeight:700, color:'var(--ink-3)'}}>가중치</span>
                  <span className="mono" style={{fontSize:13, fontWeight:800, color:s.tone}}>{s.w}</span>
                </div>
                <div style={{fontSize:12, fontWeight:700, color:'var(--ink)', marginBottom:4}}>{s.t}</div>
                <div style={{fontSize:10.5, color:'var(--ink-3)', lineHeight:1.55}}>{s.d}</div>
              </div>
            ))}
          </div>
          <div style={{padding:'12px 14px', background:'#FBEFD9', border:'1px solid #F0D9A8', borderRadius:8, fontSize:12, color:'#8B5410', lineHeight:1.65}}>
            <b>고위험 경보 우선 표시 규칙</b> — 과태료·재산권·영업제한·수급권·이의신청 기간·제출서류·개인정보 동의항목 관련 미정비는 산식 점수와 무관하게 별도 경보로 우선 표시됩니다.
          </div>
        </div>
      </Card>

      {/* ────────── 핵심 KPI 정의 ────────── */}
      <Card style={{marginBottom:14}}>
        <SectionHeader title="핵심 KPI 정의" desc="부처·지자체·문서유형별 정비 상태를 비교 가능한 단일 지표로 관리합니다."/>
        <div style={{margin:'0 -20px', borderTop:'1px solid var(--line)'}}>
          <div style={{display:'grid', gridTemplateColumns:'180px 1fr 1fr', padding:'10px 20px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)'}}>
            <span>지표</span><span>정의</span><span>활용</span>
          </div>
          {[
            { k:'싱크Law율',          d:'영향 받는 하위문서 중 정비 완료 문서 비율 (%)',                       u:'부처·지자체별 80% → 90% → 95% 단계적 개선 목표' },
            { k:'고위험 경보 처리율', d:'재산권·과태료·취약계층 관련 경보 중 담당자 검토 완료 비율',          u:'월별 처리율 관리, 미처리 시 자동 재알림' },
            { k:'정비 소요일',         d:'상위법 시행일/공포일 이후 하위문서 정비 완료까지 걸린 기간 (일)',     u:'평균 소요일 단축 추적' },
            { k:'제보 검증률',         d:'국민 제보 중 실제 법령·서식 정비 후보로 확인된 비율',                u:'제보 품질과 AI 매칭 정확도 평가' },
            { k:'담당자 절감시간',     d:'수작업 대조 대비 AI 후보 제시 후 검토에 소요된 시간',               u:'파일럿 기관에서 업무시간 절감 측정' },
          ].map((r,i,arr)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'180px 1fr 1fr',
              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(--navy)', fontWeight:700}}>{r.k}</span>
              <span style={{color:'var(--ink-3)', lineHeight:1.6}}>{r.d}</span>
              <span style={{color:'var(--ink-2)', lineHeight:1.6}}>{r.u}</span>
            </div>
          ))}
        </div>
      </Card>

      <Card style={{marginBottom:14}}>
        <SectionHeader title="주요 발견 사항"/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12}}>
          {[
            {n:'발견 01', t:'개인정보 보호법 영향 광범위', d:'4월 29일 개정 후 234건의 하위 규정·서식이 미정비 상태로 확인되었습니다.'},
            {n:'발견 02', t:'자치법규 정비 지연 평균 14개월', d:'지방자치단체의 자치법규 정비 시점이 중앙 평균 대비 약 2배 지연됩니다.'},
            {n:'발견 03', t:'민원서식 OCR 정확도 94.2%', d:'서식 OCR + 의미 분석 정확도가 분기 대비 +2.1%p 향상되었습니다.'},
            {n:'발견 04', t:'국민 제보 일치율 18.9%', d:'AI 탐지와 일치하는 제보가 487건 중 92건. 가중치 모델 재훈련 권고.'},
            {n:'발견 05', t:'기관 회신 평균 8.4일', d:'정비 권고 발송 후 평균 회신 기간이 전 분기 대비 2.1일 단축되었습니다.'},
            {n:'발견 06', t:'그림자 규제 의심 +47건', d:'행정규칙 외 비공식 지침 형태의 잔존 규제가 신규로 식별되었습니다.'},
          ].map(f=>(
            <div key={f.n} style={{padding:'14px 16px', border:'1px solid var(--line)', borderRadius:8, background:'#FBFCFE'}}>
              <div className="mono" style={{fontSize:10, color:'var(--blue)', fontWeight:700, letterSpacing:'0.06em'}}>{f.n}</div>
              <div style={{fontSize:14, fontWeight:700, color:'var(--ink)', marginTop:6}}>{f.t}</div>
              <div style={{fontSize:12, color:'var(--ink-3)', marginTop:6, lineHeight:1.65}}>{f.d}</div>
            </div>
          ))}
        </div>
      </Card>

      <Card>
        <SectionHeader title="권고 정비 로드맵"/>
        <div style={{position:'relative', padding:'14px 12px 4px'}}>
          {/* horizontal timeline goes through center of circles only — clipped at first/last node */}
          <div style={{
            position:'absolute', top:21, height:1, background:'var(--line)',
            left:'calc(12.5% + 12px)', right:'calc(12.5% + 12px)'
          }}/>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14}}>
            {[
              {q:'2026 Q2', t:'개인정보·건축법 일괄 정비', tone:'#0B2E5C'},
              {q:'2026 Q3', t:'대기환경·식품 분야 정비', tone:'#2E5FB0'},
              {q:'2026 Q4', t:'자치법규 정비 지원',     tone:'#5B7C99'},
              {q:'2027 Q1', t:'국민 제보 가중치 재훈련', tone:'#94A3B8'},
            ].map((p,i)=>(
              <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
                {/* circle in normal flow, white halo via box-shadow occludes the line */}
                <div style={{
                  width:14, height:14, borderRadius:'50%',
                  background:'#fff', border:`3px solid ${p.tone}`,
                  boxShadow:'0 0 0 6px #fff',
                  position:'relative', zIndex:1
                }}/>
                <div className="mono" style={{fontSize:11, color:p.tone, fontWeight:700, marginTop:14}}>{p.q}</div>
                <div style={{fontSize:13, fontWeight:600, color:'var(--ink)', textAlign:'center', marginTop:6, padding:'0 8px'}}>{p.t}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </Page>
  );
}

function BarChartGrouped(){
  const data = [
    {q:'25 Q2', a:1210, b:421, c:362},
    {q:'25 Q3', a:1421, b:498, c:412},
    {q:'25 Q4', a:1684, b:572, c:481},
    {q:'26 Q1', a:1948, b:687, c:551},
  ];
  const max = 2200;
  const w = 600, h = 220, padL = 32, padR = 12, padT = 14, padB = 32;
  const innerW = w - padL - padR;
  const innerH = h - padT - padB;
  const groupW = innerW / data.length;
  const barW = (groupW - 16)/3;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h}>
      {[0, .25, .5, .75, 1].map((t,i)=>(
        <g key={i}>
          <line x1={padL} y1={padT + (1-t)*innerH} x2={w-padR} y2={padT + (1-t)*innerH} stroke="#EEF2F7"/>
          <text x={padL-6} y={padT + (1-t)*innerH + 3} textAnchor="end" fontSize="9" fill="#94A3B8" fontFamily="JetBrains Mono">{Math.round(max*t).toLocaleString()}</text>
        </g>
      ))}
      {data.map((d,i)=>{
        const gx = padL + i*groupW + 8;
        return (
          <g key={d.q}>
            {[
              {v:d.a, c:'#0B2E5C', x:0},
              {v:d.b, c:'#2E5FB0', x:1},
              {v:d.c, c:'#7DA9E6', x:2},
            ].map((b,j)=>{
              const bh = (b.v/max)*innerH;
              return <rect key={j} x={gx + b.x*barW} y={padT + innerH - bh} width={barW-2} height={bh} fill={b.c} rx="2"/>;
            })}
            <text x={gx + (barW*3)/2} y={h-12} textAnchor="middle" fontSize="10.5" fill="#64748B">{d.q}</text>
          </g>
        );
      })}
      {/* legend */}
      <g transform={`translate(${padL}, 4)`}>
        {[{c:'#0B2E5C',l:'잔존 규제'},{c:'#2E5FB0',l:'행정규칙 불일치'},{c:'#7DA9E6',l:'자치법규 미정비'}].map((s,i)=>(
          <g key={i} transform={`translate(${i*120}, 0)`}>
            <rect width="10" height="10" fill={s.c} rx="2"/>
            <text x="14" y="9" fontSize="10" fill="#475569">{s.l}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

// ─────────── 10 기관별 정비 현황 ───────────
function AgenciesScreen({ go }){
  const [sortKey, setSortKey] = useStateC('urgent');
  const list = [...RSData.AGENCIES].sort((a,b)=> b[sortKey] - a[sortKey]);
  return (
    <Page
      eyebrow="10 · 분석"
      title="기관별 정비 현황·우선순위"
      desc="중앙 행정기관·지방자치단체별 정비 진행 상황과 잔여 우선순위를 한눈에 확인합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="filter">기관 필터</Btn>,
        <Btn key="2" kind="primary" icon="download">기관별 통보서 일괄 발송</Btn>,
      ]}
    >
      <div data-role="mock-notice" style={{display:'flex', alignItems:'center', gap:10, padding:'10px 14px', marginBottom:14, background:'#FEF3C7', border:'1px solid #FCD34D', borderRadius:8, fontSize:12, color:'#854D0E', fontWeight:600}}>
        <span style={{fontSize:14}}>📋</span>
        <span style={{flex:1, lineHeight:1.55}}><b>이 화면은 시연용 mock 데이터</b>입니다. 정비 검토 후보의 실측 사례와는 다릅니다. 실측 데이터로 작동하는 화면: <b>홈 · 정비 검토 후보 · 신구조문 비교 · 사례 상세 분석</b>.</span>
        <button onClick={()=>go('dashboard')} style={{fontSize:11, fontWeight:700, color:'#854D0E', background:'#FEF9C3', border:'1px solid #EAB308', padding:'4px 10px', borderRadius:5, cursor:'pointer'}}>실측 후보 보기 →</button>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginBottom:18}}>
        <Stat label="중앙기관"     value={42}   delta="+2"  tone="navy"  icon="building"/>
        <Stat label="지방자치단체" value={245}  delta="+8"  tone="steel" icon="building"/>
        <Stat label="평균 정비율"   value={62}   delta="+4"  tone="teal"  icon="check"/>
        <Stat label="시급 정비 건"   value={847}  delta="+58" tone="amber" icon="bell"/>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:14}}>
        <Card padding={0}>
          <div style={{padding:'14px 18px', display:'flex', alignItems:'center', gap:8, borderBottom:'1px solid var(--line)'}}>
            <span style={{fontSize:13, fontWeight:700, color:'var(--ink)'}}>기관 순위</span>
            <Badge tone="ghost" size="sm">{list.length}곳</Badge>
            <div style={{flex:1}}/>
            <span style={{fontSize:11, color:'var(--ink-3)'}}>정렬</span>
            {[
              {k:'urgent', l:'시급도'},
              {k:'total',  l:'총 건수'},
              {k:'progress', l:'정비율'},
            ].map(o=>(
              <Chip key={o.k} active={sortKey===o.k} onClick={()=>setSortKey(o.k)}>{o.l}</Chip>
            ))}
          </div>
          <div style={{display:'grid', gridTemplateColumns:'40px 1fr 100px 110px 120px', padding:'10px 18px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)'}}>
            <span>#</span><span>기관</span><span>총 건수</span><span>시급 건</span><span>정비율</span>
          </div>
          {list.map((a,i)=>(
            <div key={a.name} style={{
              display:'grid', gridTemplateColumns:'40px 1fr 100px 110px 120px',
              padding:'12px 18px', alignItems:'center', fontSize:13,
              borderBottom: i<list.length-1?'1px solid var(--line)':'none'
            }}>
              <span className="mono" style={{color:'var(--ink-3)', fontWeight:600}}>{String(i+1).padStart(2,'0')}</span>
              <span>
                <span style={{fontSize:13, fontWeight:600, color:'var(--ink)'}}>{a.name}</span>
                <Badge tone="ghost" size="sm">{a.region}</Badge>
              </span>
              <span className="mono" style={{fontWeight:700, color:'var(--ink)'}}>{a.total.toLocaleString()}</span>
              <span style={{display:'flex', alignItems:'center', gap:6}}>
                <span className="mono" style={{fontWeight:700, color: a.urgent>70?'var(--amber)':'var(--ink-2)'}}>{a.urgent}</span>
                <Badge tone={a.urgent>70?'amber':'steel'} size="sm">{a.urgent>70?'시급':'주의'}</Badge>
              </span>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <div style={{flex:1, height:5, background:'#EEF2F7', borderRadius:99, overflow:'hidden'}}>
                  <div style={{width:`${a.progress}%`, height:'100%', background: a.progress>=65?'var(--teal)': a.progress>=50?'var(--steel)':'var(--amber)'}}/>
                </div>
                <span className="mono" style={{fontSize:11, fontWeight:600, color:'var(--ink-2)', minWidth:28, textAlign:'right'}}>{a.progress}%</span>
              </div>
            </div>
          ))}
        </Card>

        <div style={{display:'grid', gap:14, alignContent:'start'}}>
          <Card>
            <SectionHeader title="권역별 분포"/>
            <KoreaMapMock/>
          </Card>
          <Card>
            <SectionHeader title="이번 주 신규 통보"/>
            {[
              {to:'A부처', n:23, date:'04-29'},
              {to:'B부처',     n:18, date:'04-28'},
              {to:'광역시 X', n:14, date:'04-27'},
              {to:'광역도 Y',     n:12, date:'04-26'},
            ].map((r,i)=>(
              <div key={i} style={{display:'flex', alignItems:'center', gap:10, padding:'10px 0', borderBottom: i<3?'1px dashed var(--line)':'none'}}>
                <div style={{
                  width:32, height:32, borderRadius:7, background:'var(--blue-soft)',
                  display:'flex', alignItems:'center', justifyContent:'center', color:'var(--navy)'
                }}><Icon name="building" size={15}/></div>
                <div style={{flex:1}}>
                  <div style={{fontSize:12.5, fontWeight:600, color:'var(--ink)'}}>{r.to}</div>
                  <div style={{fontSize:11, color:'var(--ink-3)'}}>정비 통보 발송 · {r.date}</div>
                </div>
                <span className="mono" style={{fontSize:14, fontWeight:700, color:'var(--navy)'}}>+{r.n}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </Page>
  );
}

function KoreaMapMock(){
  // Stylized regional grid (not a real map — abstract shapes)
  const regs = [
    {name:'권역 A', x:140, y:80,  v:984, hot:true},
    {name:'권역 B', x:170, y:110, v:872, hot:true},
    {name:'권역 C', x:100, y:80,  v:412},
    {name:'권역 J', x:230, y:80,  v:284},
    {name:'권역 K', x:200, y:160, v:312},
    {name:'권역 L', x:130, y:160, v:284},
    {name:'권역 I', x:160, y:140, v:142},
    {name:'권역 G', x:170, y:175, v:218},
    {name:'권역 M', x:130, y:210, v:268},
    {name:'권역 N', x:120, y:260, v:312},
    {name:'권역 F', x:130, y:240, v:188},
    {name:'권역 O', x:240, y:170, v:341},
    {name:'권역 E', x:220, y:210, v:368},
    {name:'권역 P', x:210, y:250, v:298},
    {name:'권역 D', x:240, y:255, v:541, hot:true},
    {name:'권역 H', x:260, y:230, v:241},
    {name:'권역 Q', x:130, y:310, v:118},
  ];
  const max = Math.max(...regs.map(r=>r.v));
  return (
    <svg viewBox="0 0 340 350" width="100%" height="280">
      {regs.map(r=>{
        const t = r.v/max;
        const sz = 14 + t*26;
        const fill = r.hot ? '#C77A1B' : '#2E5FB0';
        return (
          <g key={r.name}>
            <circle cx={r.x} cy={r.y} r={sz} fill={fill} opacity={0.16}>
              <animate attributeName="r" values={`${sz};${sz*1.18};${sz}`} dur={r.hot?'1.55s':'2.2s'} begin={`${((r.x+r.y)%7)/10}s`} repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.18;0.05;0.18" dur={r.hot?'1.55s':'2.2s'} begin={`${((r.x+r.y)%7)/10}s`} repeatCount="indefinite"/>
            </circle>
            <circle cx={r.x} cy={r.y} r={sz*0.55} fill={fill} opacity={0.42}>
              <animate attributeName="opacity" values="0.45;0.24;0.45" dur={r.hot?'1.35s':'2s'} begin={`${((r.x+r.y)%5)/10}s`} repeatCount="indefinite"/>
            </circle>
            <circle cx={r.x} cy={r.y} r="3" fill={fill}>
              <animate attributeName="r" values="3;5;3" dur="1.4s" repeatCount="indefinite"/>
            </circle>
            <text x={r.x} y={r.y+sz+10} textAnchor="middle" fontSize="9" fill="#475569" fontWeight="600">{r.name}</text>
            <text x={r.x} y={r.y+sz+22} textAnchor="middle" fontSize="9" fill="#94A3B8" fontFamily="JetBrains Mono">{r.v}</text>
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { ReportScreen, AnalysisScreen, InsightScreen, AgenciesScreen });