/* --- src/screens-2.jsx --- */
// Screens 3-6: Upper-law detection, Compare, Lower regs, Forms
const { useState: useStateB } = React;

// ─────────── 03 상위법 개정 감지 ───────────
function UpperLawScreen({ go }){
  const [selected, setSelected] = useStateB(0);
  const [graphModalOpen, setGraphModalOpen] = useStateB(false);
  const [selectedNode, setSelectedNode] = useStateB('시행령');
  const alerts = RSData.RECENT_ALERTS;
  const sel = alerts[selected];
  return (
    <Page
      eyebrow="03 · 탐지 모듈"
      title="상위법 개정 감지"
      desc="국가법령정보센터 데이터를 5분 간격으로 모니터링하여, 개정된 상위법이 영향을 미치는 하위 규정을 자동으로 탐지합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="bell" data-action="configure-alerts">알림 설정</Btn>,
        <Btn key="2" kind="primary" icon="spark" data-action="recalculate-impact">전체 영향도 재계산</Btn>,
      ]}
    >
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginBottom:18}}>
        <Stat label="모니터링 법령"      value={4892} delta="+12" tone="navy" icon="shield"/>
        <Stat label="이번 주 개정 감지"   value={47}   delta="+8"  tone="amber" icon="pulse"/>
        <Stat label="영향 큰 개정"        value={12}   delta="+3"  tone="amber" icon="arrow-up"/>
        <Stat label="처리 대기"           value={184}  delta="+24" tone="steel" icon="bell"/>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1.6fr', gap:14}}>
        <Card>
          <SectionHeader title="감지된 개정 (최근 30일)" right={<Btn kind="ghost" size="sm" icon="filter">필터</Btn>}/>
          <div style={{margin:'0 -20px'}}>
            {alerts.map((a,i)=>(
              <button key={i} data-action="select-detected-amendment" data-amendment-idx={i} data-law={a.law} onClick={()=>setSelected(i)} style={{
                display:'block', width:'100%', textAlign:'left',
                padding:'14px 20px', border:'none',
                background: selected===i ? 'var(--blue-soft)' : 'transparent',
                borderLeft: selected===i ? '3px solid var(--navy)' : '3px solid transparent',
                borderBottom:'1px solid var(--line)', cursor:'pointer'
              }}>
                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:4}}>
                  <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:14, fontWeight:700, color:'var(--ink)'}}>{a.law}</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:2}}>{a.change}</div>
                <div style={{display:'flex', gap:14, marginTop:8, fontSize:11, color:'var(--ink-3)'}}>
                  <span><span className="mono" style={{color:'var(--navy)', fontWeight:700}}>{a.impact}</span> 하위규정</span>
                  <span><span className="mono" style={{color:'var(--navy)', fontWeight:700}}>{Math.round(a.impact*0.4)}</span> 자치법규</span>
                  <span><span className="mono" style={{color:'var(--navy)', fontWeight:700}}>{Math.round(a.impact*0.2)}</span> 민원서식</span>
                </div>
              </button>
            ))}
          </div>
        </Card>

        <div>
          <Card style={{marginBottom:14}}>
            <div style={{display:'flex', alignItems:'flex-start', gap:14, marginBottom:12}}>
              <div>
                <Badge tone="amber" size="sm">영향 큼</Badge>
                <div style={{fontSize:20, fontWeight:700, marginTop:8, color:'var(--ink)'}}>{sel.law}</div>
                <div style={{fontSize:13, color:'var(--ink-3)', marginTop:4}}>{sel.change} · 공포일 {sel.date}{sel.effective ? ` · 시행일 ${sel.effective}` : ''}</div>
              </div>
              <div style={{flex:1}}/>
              <Btn icon="compare" onClick={()=>go('compare')} data-action="open-compare-view" data-law={sel.law}>신구조문 비교</Btn>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:10, marginTop:12, paddingTop:14, borderTop:'1px solid var(--line)'}}>
              {[
                {l:'영향 점수', v:'87.4', s:'/ 100', tone:'#C77A1B'},
                {l:'연관 하위규정', v:sel.impact, s:'건', tone:'#0B2E5C'},
                {l:'예상 정비 기간', v:'5.2', s:'개월', tone:'#5B7C99'},
              ].map(s=>(
                <div key={s.l} style={{padding:'12px 14px', background:'#F8FAFC', borderRadius:8}}>
                  <div style={{fontSize:11, color:'var(--ink-3)'}}>{s.l}</div>
                  <div style={{display:'flex', alignItems:'baseline', gap:4, marginTop:6}}>
                    <span className="mono" style={{fontSize:22, fontWeight:700, color:s.tone}}>{s.v}</span>
                    <span style={{fontSize:11, color:'var(--ink-4)'}}>{s.s}</span>
                  </div>
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <SectionHeader
              title="영향 범위 그래프"
              desc="상위법 → 하위 규정 인용 관계"
              right={
                <Btn kind="secondary" size="sm" icon="arrow-right" onClick={()=>setGraphModalOpen(true)}>
                  자세히 보기
                </Btn>
              }
            />
            <ImpactGraph/>
            <div style={{display:'flex', gap:18, marginTop:10, paddingTop:10, borderTop:'1px solid var(--line)', fontSize:11, color:'var(--ink-3)'}}>
              <LegendDot color="#0B2E5C" label="상위법"/>
              <LegendDot color="#2E5FB0" label="시행령·시행규칙"/>
              <LegendDot color="#5B7C99" label="고시·훈령"/>
              <LegendDot color="#C77A1B" label="자치법규"/>
              <LegendDot color="#7DA9E6" label="민원서식"/>
            </div>
          </Card>
        </div>
      </div>

      {graphModalOpen && (
        <ImpactGraphModal
          selectedNode={selectedNode}
          onSelectNode={setSelectedNode}
          onClose={()=>setGraphModalOpen(false)}
        />
      )}
    </Page>
  );
}

function ImpactGraph({ onNodeClick, selectedNode, large=false }){
  // Wider viewBox + leaves grouped under their parents with enough horizontal room
  // mids: 시행령(130), 시행규칙(360), 고시 2024-7(600), 훈령 31호(840), 예규 9호(1070)
  // leaves under each mid (cx values):
  //   시행령 → [75, 185]   (권역 A 조례, 광역도 Y 규칙)
  //   시행규칙 → [360]      (권역 D 조례)
  //   고시 2024-7 → [600]   (민원24 양식)
  //   훈령 31호 → [780, 900](복지 안내, 권역 E 조례)
  //   예규 9호 → [1070]     (납세 양식)
  const mids = [
    {x:130,  c:'#2E5FB0', l:'시행령'},
    {x:360,  c:'#2E5FB0', l:'시행규칙'},
    {x:600,  c:'#5B7C99', l:'고시 2024-7'},
    {x:840,  c:'#5B7C99', l:'훈령 31호'},
    {x:1070, c:'#5B7C99', l:'예규 9호'},
  ];
  const leaves = [
    {x:75,   c:'#C77A1B', l:'권역 A 조례',     parent:130},
    {x:185,  c:'#C77A1B', l:'광역도 Y 규칙',     parent:130},
    {x:360,  c:'#C77A1B', l:'권역 D 조례',     parent:360},
    {x:600,  c:'#7DA9E6', l:'민원24 양식',   parent:600},
    {x:780,  c:'#7DA9E6', l:'복지 안내',     parent:840},
    {x:900,  c:'#C77A1B', l:'권역 E 조례',     parent:840},
    {x:1070, c:'#7DA9E6', l:'납세 양식',     parent:1070},
  ];
  const ROOT_X = 600, ROOT_Y_MID = 40;
  const MID_Y_TOP = 100, MID_Y_BOT = 136;
  const LEAF_Y_TOP = 188, LEAF_Y_BOT = 218;
  const LEAF_W = 95, LEAF_H = 30;
  const MID_W = 110, MID_H = 36;
  const clickable = !!onNodeClick;
  const nodeStyle = clickable ? { cursor:'pointer' } : {};

  return (
    <svg viewBox="0 0 1200 240" width="100%" height={large?320:240} style={{display:'block'}}>
      {/* root → mid connectors */}
      {mids.map((m,i)=>(
        <path key={`rm-${i}`}
          d={`M ${ROOT_X} ${ROOT_Y_MID+22} C ${ROOT_X} ${(ROOT_Y_MID+MID_Y_TOP)/2 + 22}, ${m.x} ${(ROOT_Y_MID+MID_Y_TOP)/2 + 22}, ${m.x} ${MID_Y_TOP}`}
          stroke={selectedNode===m.l ? m.c : '#CBD5E1'} strokeWidth={selectedNode===m.l ? 2 : 1} fill="none"/>
      ))}
      {/* mid → leaf connectors */}
      {leaves.map((l,i)=>(
        <path key={`ml-${i}`}
          d={`M ${l.parent} ${MID_Y_BOT} C ${l.parent} ${(MID_Y_BOT+LEAF_Y_TOP)/2}, ${l.x} ${(MID_Y_BOT+LEAF_Y_TOP)/2}, ${l.x} ${LEAF_Y_TOP}`}
          stroke={selectedNode===l.l ? l.c : '#CBD5E1'} strokeWidth={selectedNode===l.l ? 2 : 1} fill="none"/>
      ))}

      {/* root */}
      <g style={nodeStyle} onClick={clickable ? ()=>onNodeClick('개인정보 보호법') : undefined}>
        <rect x={ROOT_X-90} y={ROOT_Y_MID-22} width="180" height="44" rx="22" fill="#0B2E5C"
          stroke={selectedNode==='개인정보 보호법' ? '#5EE6B5' : 'none'} strokeWidth={selectedNode==='개인정보 보호법' ? 3 : 0}/>
        <text x={ROOT_X} y={ROOT_Y_MID+5} textAnchor="middle" fill="#fff" fontSize="13" fontWeight="600" pointerEvents="none">개인정보 보호법</text>
      </g>

      {/* mids */}
      {mids.map((n,i)=>{
        const isSel = selectedNode === n.l;
        return (
          <g key={`m-${i}`} style={nodeStyle} onClick={clickable ? ()=>onNodeClick(n.l) : undefined}>
            <rect x={n.x-MID_W/2} y={MID_Y_TOP} width={MID_W} height={MID_H} rx="18" fill={n.c} opacity={isSel?1:0.92}
              stroke={isSel?'#FFD86B':'none'} strokeWidth={isSel?3:0}/>
            <text x={n.x} y={MID_Y_TOP+23} textAnchor="middle" fill="#fff" fontSize="11" fontWeight="600" pointerEvents="none">{n.l}</text>
          </g>
        );
      })}

      {/* leaves */}
      {leaves.map((n,i)=>{
        const isSel = selectedNode === n.l;
        return (
          <g key={`l-${i}`} style={nodeStyle} onClick={clickable ? ()=>onNodeClick(n.l) : undefined}>
            <rect x={n.x-LEAF_W/2} y={LEAF_Y_TOP} width={LEAF_W} height={LEAF_H} rx="6"
              fill={isSel?n.c:'#fff'} stroke={n.c} strokeWidth={isSel?2:1.4}/>
            <text x={n.x} y={LEAF_Y_TOP+19} textAnchor="middle" fill={isSel?'#fff':n.c} fontSize="10.5" fontWeight="600" pointerEvents="none">{n.l}</text>
          </g>
        );
      })}
    </svg>
  );
}

// ─────────── Impact Graph Detail Modal ───────────
const NODE_DETAILS = {
  '개인정보 보호법': {
    role:'상위법', tone:'#0B2E5C',
    title:'개인정보 보호법 제15조 (개인정보의 수집·이용)',
    sub:'2026.04.29 공포 · 2026.10.30 시행 · 개정 정부안',
    status:{label:'개정 완료', tone:'#1F7A6B'},
    body:[
      {text:'① 개인정보처리자는 다음 각 호의 어느 하나에 해당하는 경우에는 개인정보를 수집할 수 있다.'},
      {text:'  3. 공공기관이 법령등에서 정하는 소관 업무의 수행을 위하여 불가피한 경우'},
      {tag:'단서 신설', tone:'teal', text:'다만, 정보주체의 권리보다 명백히 우선하는 경우에 한하여 수집·이용할 수 있다.'},
      {text:'② 개인정보처리자는 제1항 제3호에 따라 개인정보를 수집한 경우 그 수집 사실을 정보주체에게 즉시 알려야 한다.'},
    ],
  },
  '시행령': {
    role:'시행령', tone:'#2E5FB0',
    title:'개인정보 보호법 시행령 제5조 (수집·이용 범위)',
    sub:'중앙위원회 K · 최종개정 2024-08-12',
    status:{label:'정비 필요성 높음', tone:'#C77A1B'},
    body:[
      {text:'① 법 제15조 제1항 제3호에 따라 공공기관이 개인정보를 수집할 수 있는 경우는 다음 각 호와 같다.'},
      {text:'  1. 법령에서 명시적으로 위임한 경우'},
      {text:'  2. 소관 업무의 수행을 위하여 불가피한 경우'},
      {tag:'미반영', tone:'rose', text:'② 정보주체의 권리보다 명백히 우선하는 경우의 절차 — 상위법 단서 신설(2026.04.29)이 시행령에 반영되지 않았습니다.'},
      {tag:'AI 권고', tone:'amber', text:'시행령 제5조 제2항을 신설하거나 별도 조항으로 단서 절차를 정의해야 합니다.'},
    ],
  },
  '시행규칙': {
    role:'시행규칙', tone:'#2E5FB0',
    title:'개인정보 보호법 시행규칙 제3조',
    sub:'중앙위원회 K · 최종개정 2024-12-01',
    status:{label:'표기 정비 필요', tone:'#5B7C99'},
    body:[
      {text:'① 법 제15조에 따른 수집·이용의 절차는 별표 1과 같다.'},
      {tag:'표기 불일치', tone:'amber', text:'본문 "법령 등" 표기를 상위법(개정 후) "법령등"으로 통일 필요.'},
      {text:'② 처리자는 수집 시 동의서를 별지 제2호 서식에 따라 받는다.'},
    ],
  },
  '고시 2024-7': {
    role:'고시', tone:'#5B7C99',
    title:'중앙위원회 K 고시 제2024-7호',
    sub:'동의 요건 및 표시 방법 · 시행 2024-09-01',
    status:{label:'정비 필요성 높음', tone:'#C77A1B'},
    body:[
      {text:'1. (목적) 이 고시는 개인정보 보호법 제15조에 따른 동의 요건의 세부사항을 정한다.'},
      {tag:'미반영', tone:'rose', text:'2. (동의 표시) 상위법 개정으로 신설된 "정보주체 권리 우선 단서"에 관한 표시 방법이 누락되었습니다.'},
      {text:'3. (예외 사유) 별표 1의 사유에 해당하는 경우에는 동의 없이 수집할 수 있다.'},
      {tag:'AI 권고', tone:'amber', text:'2026년 6월까지 고시 개정안 마련 권고 (영향 점수 88).'},
    ],
  },
  '훈령 31호': {
    role:'훈령', tone:'#5B7C99',
    title:'H부처 훈령 제31호',
    sub:'공공기관 개인정보 처리 매뉴얼 · 최종개정 2023-11-04',
    status:{label:'검토 필요', tone:'#5B7C99'},
    body:[
      {text:'제1장 총칙 — 본 훈령은 공공기관의 개인정보 처리 절차를 정한다.'},
      {tag:'유사도 76%', tone:'steel', text:'제3조 수집 사유 — 상위법 개정과 의미 유사도 76%, 단서 명문화 검토 필요.'},
    ],
  },
  '예규 9호': {
    role:'예규', tone:'#5B7C99',
    title:'중앙위원회 K 예규 제9호',
    sub:'민원처리 운영 예규 · 시행 2022-04-01',
    status:{label:'영향 작음', tone:'#94A3B8'},
    body:[
      {text:'본 예규는 민원 처리 시 개인정보 보호 절차를 정한다.'},
      {tag:'영향 낮음', tone:'steel', text:'상위법 개정의 직접 영향은 낮으나 인용 조항 표기는 갱신 필요.'},
    ],
  },
  '권역 A 조례': {
    role:'자치법규', tone:'#C77A1B',
    title:'광역시 X 정보화 기본조례 제12조',
    sub:'광역시 X · 최종개정 2022-06-30',
    status:{label:'정비 필요성 높음', tone:'#C77A1B'},
    body:[
      {text:'① 시장은 시민의 개인정보 보호를 위하여 다음 각 호의 사항을 추진한다.'},
      {tag:'상위법 미반영', tone:'rose', text:'② 2026.04.29 개정 단서 — "정보주체 권리 우선 시 수집·이용 제한"이 조례에 미반영.'},
      {tag:'AI 권고', tone:'amber', text:'광역시 X 자치법규시스템에 정비 필요 자동 알림 발송 권고.'},
    ],
  },
  '광역도 Y 규칙': {
    role:'자치법규', tone:'#C77A1B',
    title:'광역도 Y 개인정보 보호 규칙 제8조',
    sub:'광역도 Y · 최종개정 2023-02-21',
    status:{label:'검토 필요', tone:'#5B7C99'},
    body:[
      {text:'① 도지사는 도민의 개인정보 보호 시책을 수립·시행한다.'},
      {tag:'유사도 74%', tone:'steel', text:'② 수집 사유 조항이 상위법 개정과 의미 유사도 74%로 일부 정비 필요.'},
    ],
  },
  '권역 D 조례': {
    role:'자치법규', tone:'#C77A1B',
    title:'광역시 Z 개인정보 보호 조례 제6조',
    sub:'광역시 Z · 최종개정 2021-09-15',
    status:{label:'정비 필요성 높음', tone:'#C77A1B'},
    body:[
      {tag:'미반영 다수', tone:'rose', text:'2021년 이후 상위법 변경사항 3건이 조례에 반영되지 않았습니다.'},
      {text:'본 조례는 광역시 Z민의 개인정보 보호를 위하여 필요한 사항을 정한다.'},
      {tag:'AI 권고', tone:'amber', text:'전면 개정 권고 — 영향 점수 92, 우선순위 TOP 5에 포함.'},
    ],
  },
  '민원24 양식': {
    role:'민원서식', tone:'#7DA9E6',
    title:'민원24 정보공개 청구서 (별지 제3호)',
    sub:'H부처 · 양식 ID FORM-PR-003',
    status:{label:'정비 필요성 높음', tone:'#C77A1B'},
    body:[
      {text:'본 서식은 정보공개 청구 시 개인정보 수집 동의를 받기 위한 표준 양식입니다.'},
      {tag:'잔존 문구', tone:'rose', text:'주민등록번호 13자리 기재란이 그대로 유지 — 2020년 폐지된 양식 문구.'},
      {tag:'AI 권고', tone:'amber', text:'OCR 분석 결과 동일 패턴 7건 — 일괄 정비 가능.'},
    ],
  },
  '복지 안내': {
    role:'안내문', tone:'#7DA9E6',
    title:'C부처 복지 안내문 V.2024',
    sub:'C부처 · 최종 게시 2024-03-12',
    status:{label:'표기 정비', tone:'#5B7C99'},
    body:[
      {text:'복지서비스 신청 시 개인정보 수집·이용에 동의해 주십시오.'},
      {tag:'표기 불일치', tone:'amber', text:'"개인정보 보호법 제15조 제1항 제3호" 인용이 개정 전 표현으로 잔존.'},
    ],
  },
  '권역 E 조례': {
    role:'자치법규', tone:'#C77A1B',
    title:'광역시 Q 개인정보 보호 조례',
    sub:'광역시 Q · 최종개정 2022-11-08',
    status:{label:'검토 필요', tone:'#5B7C99'},
    body:[
      {text:'본 조례는 해당 권역 주민의 개인정보 자기결정권을 보장한다.'},
      {tag:'유사 사례', tone:'steel', text:'권역 A·권역 D 조례와 동일한 미반영 패턴 — 광역지자체 5곳 동시 정비 권고.'},
    ],
  },
  '납세 양식': {
    role:'민원서식', tone:'#7DA9E6',
    title:'국세청 납세자 정보 등록 양식',
    sub:'국세청 · 양식 ID FORM-TX-001',
    status:{label:'영향 작음', tone:'#94A3B8'},
    body:[
      {text:'본 양식은 납세자의 기본정보 수집을 위한 표준 양식입니다.'},
      {tag:'영향 낮음', tone:'steel', text:'상위법 개정의 직접 영향은 낮음. 차기 정기 개정 시 반영 권고.'},
    ],
  },
};

function ImpactGraphModal({ selectedNode, onSelectNode, onClose }){
  const detail = NODE_DETAILS[selectedNode] || NODE_DETAILS['시행령'];
  const tagColors = {
    teal:  {bg:'#DBEEEA', fg:'#155F53', dot:'#1F7A6B'},
    rose:  {bg:'#F5E1E3', fg:'#7C2F35', dot:'#A8434A'},
    amber: {bg:'#FBEFD9', fg:'#8B5410', dot:'#C77A1B'},
    steel: {bg:'#EEF2F7', fg:'#3F5A75', dot:'#5B7C99'},
  };
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(15,23,42,0.55)',
      display:'flex', alignItems:'center', justifyContent:'center',
      zIndex:9999, padding:'40px 32px', backdropFilter:'blur(4px)'
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        background:'#fff', borderRadius:14, width:'min(1320px, 100%)',
        maxHeight:'92vh', display:'flex', flexDirection:'column',
        overflow:'hidden', boxShadow:'0 24px 60px rgba(15,23,42,0.25)'
      }}>
        {/* Header */}
        <div style={{
          display:'flex', alignItems:'center', justifyContent:'space-between',
          padding:'18px 28px', borderBottom:'1px solid var(--line)',
          background:'linear-gradient(120deg, #0B2E5C 0%, #143A73 100%)', color:'#fff'
        }}>
          <div>
            <div style={{fontSize:11, fontWeight:700, color:'#7DA9E6', letterSpacing:'0.1em', marginBottom:4}}>IMPACT GRAPH · DETAIL</div>
            <div style={{fontSize:18, fontWeight:700}}>영향 범위 상세 분석</div>
            <div style={{fontSize:12, opacity:0.75, marginTop:3}}>노드를 클릭하면 해당 법령·규칙의 본문과 AI가 식별한 정비 필요 부분을 확인할 수 있습니다.</div>
          </div>
          <button onClick={onClose} style={{
            display:'inline-flex', alignItems:'center', gap:6,
            padding:'8px 14px', borderRadius:7, fontSize:12, fontWeight:600,
            background:'rgba(255,255,255,0.10)', color:'#fff',
            border:'1px solid rgba(255,255,255,0.22)', cursor:'pointer'
          }}>
            ✕ 닫기
          </button>
        </div>

        {/* Body — graph + detail panel */}
        <div style={{flex:1, overflowY:'auto', padding:'24px 28px', display:'flex', flexDirection:'column', gap:20}}>
          {/* Larger clickable graph */}
          <div style={{background:'#FBFCFE', border:'1px solid var(--line)', borderRadius:12, padding:'18px 20px'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12}}>
              <div style={{fontSize:13, fontWeight:700, color:'var(--ink)'}}>법령 인용 네트워크 (클릭하여 상세 보기)</div>
              <div style={{display:'flex', gap:14, fontSize:11, color:'var(--ink-3)'}}>
                <LegendDot color="#0B2E5C" label="상위법"/>
                <LegendDot color="#2E5FB0" label="시행령·시행규칙"/>
                <LegendDot color="#5B7C99" label="고시·훈령"/>
                <LegendDot color="#C77A1B" label="자치법규"/>
                <LegendDot color="#7DA9E6" label="민원서식"/>
              </div>
            </div>
            <ImpactGraph onNodeClick={onSelectNode} selectedNode={selectedNode} large/>
          </div>

          {/* Detail panel */}
          <div style={{display:'grid', gridTemplateColumns:'1fr', gap:14}}>
            <div style={{
              background:'#fff', border:'1px solid var(--line)', borderRadius:12, overflow:'hidden'
            }}>
              {/* doc header */}
              <div style={{padding:'16px 20px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:14, flexWrap:'wrap', background:'#F8FAFC'}}>
                <span style={{
                  fontSize:10, fontWeight:700, letterSpacing:'0.08em',
                  color:'#fff', background:detail.tone, padding:'4px 10px', borderRadius:99
                }}>{detail.role}</span>
                <div style={{flex:1, minWidth:240}}>
                  <div style={{fontSize:15, fontWeight:700, color:'var(--ink)'}}>{detail.title}</div>
                  <div style={{fontSize:11.5, color:'var(--ink-3)', marginTop:2}}>{detail.sub}</div>
                </div>
                <span style={{
                  fontSize:11, fontWeight:700, color:'#fff',
                  background:detail.status.tone, padding:'4px 10px', borderRadius:99
                }}>{detail.status.label}</span>
              </div>

              {/* doc body with highlighted issues */}
              <div style={{padding:'18px 22px', display:'flex', flexDirection:'column', gap:10}}>
                {detail.body.map((line,i)=>{
                  if(!line.tag){
                    return (
                      <div key={i} style={{fontSize:13, color:'var(--ink-2)', lineHeight:1.75, paddingLeft:8}}>{line.text}</div>
                    );
                  }
                  const c = tagColors[line.tone] || tagColors.steel;
                  return (
                    <div key={i} style={{
                      display:'flex', alignItems:'flex-start', gap:10,
                      background:c.bg, border:`1px solid ${c.dot}33`, borderLeft:`3px solid ${c.dot}`,
                      padding:'10px 14px', borderRadius:8
                    }}>
                      <span style={{
                        fontSize:10.5, fontWeight:700, color:'#fff',
                        background:c.dot, padding:'3px 9px', borderRadius:99,
                        whiteSpace:'nowrap', flexShrink:0, marginTop:1
                      }}>{line.tag}</span>
                      <div style={{fontSize:13, color:c.fg, lineHeight:1.7, fontWeight:500}}>{line.text}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding:'12px 28px', borderTop:'1px solid var(--line)',
          background:'#F8FAFC', display:'flex', justifyContent:'space-between', alignItems:'center', gap:10
        }}>
          <span style={{fontSize:11.5, color:'var(--ink-3)'}}>
            클릭한 노드: <span style={{color:'var(--ink-2)', fontWeight:700}}>{selectedNode}</span>
            <span style={{margin:'0 8px', color:'var(--ink-4)'}}>·</span>
            전체 노드 13개 · AI 의미 유사도 매칭
          </span>
          <div style={{display:'flex', gap:8}}>
            <Btn kind="secondary" size="sm" icon="download">PDF 내보내기</Btn>
            <Btn kind="primary" size="sm" icon="compare">신구조문 비교</Btn>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────── 04 신구조문 비교 ───────────
function CompareScreen({ go }){
  const c = RSData.COMPARE_DATA;
  return (
    <Page
      eyebrow="04 · 탐지 모듈"
      title="신구조문 비교"
      desc="개정 전후 조문을 의미 단위로 비교하고, 변경된 부분이 하위규정에 반영되었는지 자동으로 검증합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="download">PDF 내보내기</Btn>,
        <Btn key="2" kind="primary" icon="layers" onClick={()=>go('lower')}>하위규정 대조 보기</Btn>,
      ]}
    >
      <Card style={{marginBottom:14}}>
        <div style={{display:'flex', alignItems:'center', gap:14, flexWrap:'wrap'}}>
          <Badge tone="navy">상위법</Badge>
          <span style={{fontSize:16, fontWeight:700, color:'var(--ink)'}}>{c.upperLaw}</span>
          <span style={{fontSize:13, color:'var(--ink-3)'}}>{c.article}</span>
          <div style={{flex:1}}/>
          <span style={{fontSize:12, color:'var(--ink-3)'}}>공포 <span className="mono" style={{color:'var(--ink)', fontWeight:600}}>{c.amendDate}</span></span>
          <span style={{fontSize:12, color:'var(--ink-3)'}}>시행 <span className="mono" style={{color:'var(--ink)', fontWeight:600}}>{c.effective}</span></span>
        </div>
      </Card>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:14}}>
        {[
          {label:'개정 전 (구 조문)', tone:'#A8434A', items:c.old, side:'old'},
          {label:'개정 후 (신 조문)', tone:'#1F7A6B', items:c.new, side:'new'},
        ].map(col=>(
          <Card key={col.side} padding={0}>
            <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:10, background:'#FBFCFE'}}>
              <span style={{width:8, height:8, borderRadius:2, background:col.tone}}/>
              <span style={{fontSize:13, fontWeight:700, color:'var(--ink)'}}>{col.label}</span>
            </div>
            <div style={{padding:'18px 22px'}}>
              {col.items.map((line,i)=>{
                const bg = line.type==='added' ? '#E6F4F1' : line.type==='removed' ? '#FBE9EB' : 'transparent';
                const accent = line.type==='added' ? '#1F7A6B' : line.type==='removed' ? '#A8434A' : 'transparent';
                return (
                  <div key={i} style={{
                    fontSize:13, lineHeight:1.85, color:'var(--ink-2)',
                    padding:'4px 10px', margin:'2px -8px',
                    background:bg, borderRadius:4,
                    borderLeft: line.type!=='normal' ? `3px solid ${accent}` : '3px solid transparent',
                    textDecoration: line.type==='removed' ? 'line-through' : 'none',
                    textDecorationColor: line.type==='removed' ? 'rgba(168,67,74,0.5)' : 'transparent'
                  }}>{line.text}</div>
                );
              })}
            </div>
          </Card>
        ))}
      </div>

      <Card>
        <SectionHeader
          title="AI 변경 분석"
          desc="의미 단위 변경 요약 및 하위규정 반영 여부"
          right={<Badge tone="blue"><Icon name="brain" size={12}/> Claude·GPT-4o + KoBERT 법률 임베딩</Badge>}
        />
        <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:12, marginTop:10}}>
          {[
            { tag:'추가', tone:'teal', t:'제3호 단서 신설',
              d:'"정보주체의 권리보다 명백히 우선하는 경우" 단서가 새로 추가되었습니다. 공공기관 처리 근거가 좁아짐.', impact:'시행령·고시 7건 정비 필요성' },
            { tag:'추가', tone:'teal', t:'제5호 신설',
              d:'사전 동의를 받을 수 없는 예외 조항이 신설되었습니다. 자치법규 12건 반영 필요.', impact:'자치법규 12건 정비 필요성' },
            { tag:'문구 정비', tone:'steel', t:'표기 정비 ("법령 등" → "법령등")',
              d:'표기 통일에 따른 변경. 직접 영향은 작으나 인용 조항 31건 표기 정비 권고.', impact:'표기 정비 31건' },
            { tag:'유의', tone:'amber', t:'시행 시점 차이',
              d:'본법 시행은 2026-10-30. 시행 이전 기간 동안 잠정 운영 지침 마련 권고.', impact:'시행 전 6개월 검토' },
          ].map((b,i)=>(
            <div key={i} style={{padding:'14px 16px', border:'1px solid var(--line)', borderRadius:8, background:'#FBFCFE'}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:8}}>
                <Badge tone={b.tone} size="sm">{b.tag}</Badge>
                <span style={{fontSize:13, fontWeight:700, color:'var(--ink)'}}>{b.t}</span>
              </div>
              <div style={{fontSize:12.5, color:'var(--ink-2)', lineHeight:1.65}}>{b.d}</div>
              <div style={{fontSize:11, color:'var(--ink-3)', marginTop:8, display:'flex', alignItems:'center', gap:6}}>
                <Icon name="arrow-right" size={11}/> {b.impact}
              </div>
            </div>
          ))}
        </div>
      </Card>
    </Page>
  );
}

// ─────────── 05 하위규정·자치법규 대조 ───────────
function LowerScreen({ go }){
  const [picked, setPicked] = useStateB('L-2841');
  const matches = RSData.LOWER_MATCHES;
  return (
    <Page
      eyebrow="05 · 탐지 모듈"
      title="하위규정·행정규칙·자치법규 대조"
      desc="상위법과 연결된 하위 규정·고시·조례·규칙을 의미 유사도로 매칭하고, 미정비 항목을 위험도순으로 정렬합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="filter" data-action="open-advanced-filter">고급 필터</Btn>,
        <Btn key="2" kind="primary" icon="download" data-action="export-comparison-table">대조표 내보내기</Btn>,
      ]}
    >
      <Card style={{marginBottom:14, padding:'14px 18px'}}>
        <div style={{display:'flex', alignItems:'center', gap:18, flexWrap:'wrap'}}>
          <span style={{fontSize:12, color:'var(--ink-3)', fontWeight:600}}>대상 상위법</span>
          <Badge tone="navy">개인정보 보호법 제15조</Badge>
          <div style={{height:18, width:1, background:'var(--line)'}}/>
          <div style={{display:'flex', gap:6}}>
            {['전체 (7)','시행령 (1)','고시 (2)','조례 (2)','규칙 (1)','지침 (1)'].map((t,i)=>(
              <Chip key={t} active={i===0}>{t}</Chip>
            ))}
          </div>
        </div>
      </Card>

      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:14}}>
        <Card padding={0}>
          <div style={{display:'grid', gridTemplateColumns:'70px 70px 1fr 110px 130px', padding:'12px 18px', fontSize:11, color:'var(--ink-3)', fontWeight:600, background:'#F8FAFC', borderBottom:'1px solid var(--line)', borderRadius:'12px 12px 0 0'}}>
            <span>ID</span><span>유형</span><span>대조 규정</span><span>위험도</span><span>상태</span>
          </div>
          {matches.map((m,i)=>(
            <button key={m.id} onClick={()=>setPicked(m.id)} style={{
              display:'grid', gridTemplateColumns:'70px 70px 1fr 110px 130px',
              padding:'14px 18px', textAlign:'left', alignItems:'center',
              background: picked===m.id ? 'var(--blue-soft)' : 'transparent',
              border:'none', borderBottom: i<matches.length-1?'1px solid var(--line)':'none',
              cursor:'pointer', width:'100%'
            }}>
              <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>{m.id}</span>
              <span><Badge tone="ghost" size="sm">{m.kind}</Badge></span>
              <span>
                <div style={{fontSize:13, fontWeight:600, color:'var(--ink)'}}>{m.src}</div>
                <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2}}>{m.agency} · 최종개정 <span className="mono">{m.updated}</span></div>
              </span>
              <RiskBar value={m.risk}/>
              <Badge tone={m.risk>=90?'amber': m.risk>=70?'steel':'ghost'} size="sm">{m.status}</Badge>
            </button>
          ))}
        </Card>

        <Card>
          <SectionHeader title="규정 상세 대조" right={<Badge tone="blue" size="sm"><Icon name="check" size={11}/> AI 매칭 96.4%</Badge>}/>
          <div style={{padding:'12px 14px', background:'#F8FAFC', borderRadius:8, marginBottom:12}}>
            <div style={{fontSize:11, color:'var(--ink-3)'}}>대조 대상</div>
            <div style={{fontSize:13.5, fontWeight:700, color:'var(--ink)', marginTop:4}}>개인정보 보호법 시행령 제5조</div>
            <div style={{fontSize:11, color:'var(--ink-3)', marginTop:4}}>중앙위원회 K · 최종개정 2024-08-12</div>
          </div>

          <div style={{fontSize:11, color:'var(--ink-3)', fontWeight:600, marginBottom:6}}>차이 분석</div>
          {[
            { tag:'미반영', tone:'amber', t:'단서 조항 누락',
              d:'상위법 신설 단서 "정보주체의 권리보다 명백히 우선하는 경우"가 시행령 제5조에 반영되지 않았습니다.' },
            { tag:'표기 정비', tone:'steel', t:'"법령 등" → "법령등"',
              d:'표기 통일에 따른 정비 권고.' },
            { tag:'미반영', tone:'amber', t:'예외 조항 부재',
              d:'상위법 제15조 제1항 제5호 신설 사항에 대한 시행령상 운영 절차가 정의되지 않았습니다.' },
          ].map((d,i)=>(
            <div key={i} style={{padding:'12px 14px', border:'1px solid var(--line)', borderRadius:8, marginBottom:8}}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                <Badge tone={d.tone} size="sm">{d.tag}</Badge>
                <span style={{fontSize:13, fontWeight:600, color:'var(--ink)'}}>{d.t}</span>
              </div>
              <div style={{fontSize:12, color:'var(--ink-2)', lineHeight:1.6}}>{d.d}</div>
            </div>
          ))}
          <Btn kind="primary" icon="brain" style={{width:'100%', justifyContent:'center', marginTop:8}} onClick={()=>go('analysis')} data-action="open-ai-analysis">AI 분석 결과 상세</Btn>
        </Card>
      </div>
    </Page>
  );
}

// ─────────── 06 민원서식·안내문 ───────────
function FormsScreen({ go }){
  const [picked, setPicked] = useStateB('F-114');
  const list = RSData.FORMS_MATCHES;
  const sel = list.find(f=>f.id===picked) || list[0];
  return (
    <Page
      eyebrow="06 · 탐지 모듈"
      title="민원서식·안내문 잔존 문구 탐지"
      desc="민원24 서식과 기관 안내문을 OCR + 의미 분석하여, 상위법 개정 후 정비되지 않은 문구를 식별합니다."
      actions={[
        <Btn key="1" kind="secondary" icon="filter" data-action="open-form-category">서식 카테고리</Btn>,
        <Btn key="2" kind="primary" icon="download" data-action="send-maintenance-recommendation">정비 권고서 발송</Btn>,
      ]}
    >
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, marginBottom:18}}>
        <Stat label="검사한 서식"     value={8421} delta="+142" tone="navy" icon="doc"/>
        <Stat label="잔존 문구 의심"   value={1094} delta="+22"  tone="amber" icon="search"/>
        <Stat label="OCR 처리량(주)"  value={3214} delta="+88"  tone="steel" icon="layers"/>
        <Stat label="기관 회신 대기"   value={284}  delta="+19"  tone="steel" icon="bell"/>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1.4fr', gap:14}}>
        <Card padding={0}>
          <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', gap:10}}>
            <Icon name="search" size={14} color="var(--ink-3)"/>
            <input placeholder="서식·안내문 검색" style={{
              border:'none', outline:'none', flex:1, fontSize:13, fontFamily:'inherit', color:'var(--ink)'
            }}/>
            <Badge tone="ghost" size="sm">{list.length}건</Badge>
          </div>
          {list.map((f,i)=>(
            <button key={f.id} onClick={()=>setPicked(f.id)} style={{
              display:'block', width:'100%', textAlign:'left',
              padding:'14px 18px', border:'none',
              background: picked===f.id?'var(--blue-soft)':'transparent',
              borderLeft: picked===f.id?'3px solid var(--navy)':'3px solid transparent',
              borderBottom: i<list.length-1?'1px solid var(--line)':'none', cursor:'pointer'
            }}>
              <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:4}}>
                <span className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>{f.id}</span>
                <Badge tone={f.risk>=85?'amber':'steel'} size="sm">{f.risk}</Badge>
              </div>
              <div style={{fontSize:13.5, fontWeight:600, color:'var(--ink)'}}>{f.name}</div>
              <div style={{fontSize:11, color:'var(--ink-3)', marginTop:3}}>{f.section} · 관련 법령 {f.law}</div>
              <div style={{fontSize:12, color:'var(--ink-2)', marginTop:6, padding:'6px 10px', background:'#FBEFD9', borderRadius:4}}>{f.issue}</div>
            </button>
          ))}
        </Card>

        <Card>
          <SectionHeader title="서식 미리보기" desc={`${sel.name} · ${sel.section}`} right={<Btn kind="ghost" size="sm" icon="download">원본 다운로드</Btn>}/>
          <FormPreview sel={sel}/>
          <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid var(--line)'}}>
            <div style={{fontSize:11, color:'var(--ink-3)', fontWeight:600, marginBottom:6}}>AI 정비 권고</div>
            <div style={{padding:'12px 14px', background:'#FBEFD9', borderRadius:8, fontSize:12.5, color:'var(--ink-2)', lineHeight:1.65}}>
              상위법 <b style={{color:'var(--ink)'}}>{sel.law}</b> 개정에 따라 해당 문구는 정비가 필요합니다.
              표기를 신구 조문에 맞춰 수정하고, 안내문에서 폐지 조항 인용을 제거할 것을 권고합니다.
            </div>
            <div style={{display:'flex', gap:8, marginTop:10}}>
              <Btn kind="secondary" size="sm" icon="compare" onClick={()=>go('compare')} data-action="open-compare-view">신구조문 보기</Btn>
              <Btn kind="primary" size="sm" icon="arrow-right" onClick={()=>go('analysis')} data-action="open-ai-analysis">분석 상세</Btn>
            </div>
          </div>
        </Card>
      </div>
    </Page>
  );
}

function FormPreview({ sel }){
  return (
    <div style={{
      border:'1px solid var(--line-2)', borderRadius:8, padding:'24px 28px',
      background:'#fff', position:'relative', minHeight:340,
      backgroundImage:'repeating-linear-gradient(0deg, #F8FAFC 0 1px, transparent 1px 28px)'
    }}>
      <div style={{position:'absolute', top:14, right:18, fontSize:10, color:'var(--ink-4)', fontFamily:'JetBrains Mono'}}>
        [별지 제3호 서식]
      </div>
      <div style={{textAlign:'center', fontSize:18, fontWeight:700, color:'var(--ink)', marginBottom:18, paddingBottom:10, borderBottom:'2px solid var(--ink)'}}>
        {sel.name}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'120px 1fr', rowGap:6, columnGap:10, fontSize:12, color:'var(--ink-2)'}}>
        <div style={{color:'var(--ink-3)'}}>성명</div><div style={{borderBottom:'1px solid var(--line-2)', paddingBottom:2}}>홍 길 동</div>
        <div style={{color:'var(--ink-3)'}}>주민등록번호</div>
        <div style={{borderBottom:'1px solid var(--line-2)', paddingBottom:2, position:'relative'}}>
          <span style={{background:'#FBEFD9', padding:'1px 4px', borderBottom:'2px wavy #C77A1B'}}>900101 - 1234567</span>
          <span style={{position:'absolute', right:0, top:-18, fontSize:10, background:'#C77A1B', color:'#fff', padding:'1px 6px', borderRadius:4}}>잔존 문구 의심</span>
        </div>
        <div style={{color:'var(--ink-3)'}}>주소</div><div style={{borderBottom:'1px solid var(--line-2)', paddingBottom:2}}>광역시 X 가상구 표본로 60</div>
        <div style={{color:'var(--ink-3)'}}>연락처</div><div style={{borderBottom:'1px solid var(--line-2)', paddingBottom:2}}>02 - ____ - ____</div>
      </div>
      <div style={{marginTop:18, padding:'10px 12px', background:'#F8FAFC', borderRadius:4, fontSize:11.5, color:'var(--ink-3)', lineHeight:1.7}}>
        ※ 본 신청서는 「{sel.law}」<span style={{background:'#FBEFD9', padding:'0 4px', borderBottom:'2px wavy #C77A1B'}}>제15조 제3호</span>에 따라 처리됩니다.
        <span style={{display:'block', fontSize:10, color:'var(--amber)', marginTop:4}}>↑ 개정 후 단서 추가됨 — 안내문 정비 필요성</span>
      </div>
    </div>
  );
}

Object.assign(window, { UpperLawScreen, CompareScreen, LowerScreen, FormsScreen });