<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>2025 재건축 시장 전략 보고서</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap');
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Noto Sans KR', sans-serif; background: #060A12; }
  #root { width: 100%; height: 100%; }
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #2a3444; border-radius: 4px; }
  button { font-family: 'Noto Sans KR', sans-serif; }
</style>
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.9/babel.min.js"></script>
<script type="text/babel">
const { useState, useEffect, useCallback } = React;

const C = {
  bg:"#0B1120", card:"#111827", cardAlt:"#1a2332",
  accent:"#C9A96E", accentLight:"#E8D5A8", accentDark:"#8B7340",
  text:"#E8ECF1", textMuted:"#8B95A5", textDim:"#5A6577",
  divider:"#1E293B", highlight:"rgba(201,169,110,0.08)",
  bar1:"#C9A96E", bar2:"#5B8DEF", bar3:"#34D399", bar4:"#F87171", bar5:"#A78BFA",
};

const BarChart = ({data, maxVal, barColor, height=150}) => {
  const max = maxVal || Math.max(...data.map(d=>d.value))*1.15;
  return (
    <div style={{display:"flex",alignItems:"flex-end",gap:8,height,padding:"0 4px"}}>
      {data.map((d,i) => {
        const h = (d.value/max)*(height-30);
        return (
          <div key={i} style={{flex:1,display:"flex",flexDirection:"column",alignItems:"center",gap:4}}>
            <span style={{fontSize:11,color:C.accentLight,fontWeight:700}}>{d.label2||d.value}</span>
            <div style={{width:"100%",maxWidth:48,height:h,background:`linear-gradient(180deg,${barColor||C.bar1},${barColor||C.bar1}88)`,borderRadius:"4px 4px 0 0",transition:"height 0.6s",minHeight:4}}/>
            <span style={{fontSize:10,color:C.textMuted,textAlign:"center",lineHeight:1.2}}>{d.label}</span>
          </div>
        );
      })}
    </div>
  );
};

const MiniTable = ({headers, rows, accent=false}) => (
  <div style={{width:"100%",overflow:"auto"}}>
    <table style={{width:"100%",borderCollapse:"collapse",fontSize:12}}>
      <thead><tr>
        {headers.map((h,i)=>(
          <th key={i} style={{padding:"8px 10px",background:accent?C.accent:C.divider,color:accent?C.bg:C.accentLight,fontWeight:700,textAlign:"left",borderBottom:`2px solid ${C.accent}44`,fontSize:11,whiteSpace:"nowrap"}}>{h}</th>
        ))}
      </tr></thead>
      <tbody>
        {rows.map((row,ri)=>(
          <tr key={ri}>{row.map((cell,ci)=>(
            <td key={ci} style={{padding:"7px 10px",borderBottom:`1px solid ${C.divider}`,color:ci===0?C.accentLight:C.text,fontWeight:ci===0?600:400,fontSize:11.5,lineHeight:1.5}}>{cell}</td>
          ))}</tr>
        ))}
      </tbody>
    </table>
  </div>
);

const KPICard = ({label, value, sub, color}) => (
  <div style={{background:`linear-gradient(135deg,${C.cardAlt},${C.card})`,border:`1px solid ${color||C.accent}33`,borderRadius:8,padding:"14px 16px",flex:1,minWidth:100}}>
    <div style={{fontSize:10,color:C.textMuted,marginBottom:4,textTransform:"uppercase",letterSpacing:1}}>{label}</div>
    <div style={{fontSize:22,fontWeight:800,color:color||C.accent,lineHeight:1.1}}>{value}</div>
    {sub && <div style={{fontSize:10,color:C.textMuted,marginTop:4}}>{sub}</div>}
  </div>
);

const TagBadge = ({text, color}) => (
  <span style={{display:"inline-block",padding:"3px 10px",borderRadius:20,fontSize:10,fontWeight:600,background:`${color||C.accent}22`,color:color||C.accent,border:`1px solid ${color||C.accent}44`,marginRight:6,marginBottom:4}}>{text}</span>
);

const RiskMatrix = ({items}) => (
  <div style={{display:"flex",flexDirection:"column",gap:6}}>
    {items.map((item,i)=>(
      <div key={i} style={{display:"flex",alignItems:"center",gap:8}}>
        <span style={{fontSize:11,color:C.textMuted,width:80,flexShrink:0}}>{item.label}</span>
        <div style={{flex:1,height:8,background:C.divider,borderRadius:4,overflow:"hidden"}}>
          <div style={{width:`${item.value}%`,height:"100%",background:item.color||C.bar4,borderRadius:4,transition:"width 0.8s"}}/>
        </div>
        <span style={{fontSize:10,color:item.color||C.bar4,fontWeight:700,width:30}}>{item.level}</span>
      </div>
    ))}
  </div>
);

const StepFlow = ({steps}) => (
  <div style={{display:"flex",flexDirection:"column",gap:2}}>
    {steps.map((s,i)=>(
      <div key={i} style={{display:"flex",alignItems:"center",gap:10}}>
        <div style={{width:28,height:28,borderRadius:"50%",background:`linear-gradient(135deg,${C.accent},${C.accentDark})`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:12,fontWeight:800,color:C.bg,flexShrink:0}}>{i+1}</div>
        <div style={{flex:1}}>
          <div style={{fontSize:12,fontWeight:700,color:C.accentLight}}>{s.title}</div>
          <div style={{fontSize:10.5,color:C.textMuted,lineHeight:1.4}}>{s.desc}</div>
        </div>
      </div>
    ))}
  </div>
);

const Callout = ({children, color}) => (
  <div style={{padding:"12px 16px",background:color?`${color}11`:C.highlight,borderLeft:`3px solid ${color||C.accent}`,borderRadius:"0 6px 6px 0",marginTop:10}}>
    <p style={{fontSize:12,color:color||C.accentLight,fontWeight:600,lineHeight:1.6,margin:0}}>{children}</p>
  </div>
);

const slides = [
  // 0: COVER
  {type:"cover",title:"재건축 시장 구조 변화와\n전략적 시사점",subtitle:"2025 도시정비사업 전략 보고서",meta:"Reconstruction Market Strategy Report",date:"2025"},
  // 1: DIVIDER
  {type:"divider",chapter:"PART 01",title:"시장 환경 분석",subtitle:"48조원 수주 시대의 구조적 의미와 경쟁 구도 재편"},
  // SLIDE 1
  {type:"content",num:1,title:"48조원 수주 시대의 구조적 의미",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>2025년 도시정비사업 수주 규모는 약 <b style={{color:C.accent}}>48조원</b>으로 사상 최대치를 기록했습니다. 이는 단순한 호황이 아니라, 정비사업이 건설사의 <b style={{color:C.accent}}>핵심 수익 축으로 구조화</b>되었음을 의미합니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>2023년 PF 경색과 공사비 급등으로 20조원대까지 급랭된 시장은, 2024년 정책 완화와 함께 선별적으로 회복되었고, 2025년에는 상급지 집중·초대형화 구조로 재편되었습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>핵심은 <b style={{color:C.bar4}}>"확장"이 아니라 "집중과 고위험화"</b>입니다. 프로젝트 평균 규모 확대, 금융 레버리지 증가, 공사비 상승 고착화로 수주 1건이 연간 영업이익을 좌우하는 구조로 전환되었습니다.</p>
      <Callout>▶ 48조원 시대는 성장 신호가 아니라 "정비사업 의존도 심화"라는 구조적 경고로 해석해야 합니다.</Callout>
    </>,
    right:<>
      <div style={{marginBottom:20}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>도시정비사업 수주 규모 추이 (조원)</div>
        <BarChart data={[{label:"2021",value:35,label2:"~35조"},{label:"2022",value:42,label2:"~42조"},{label:"2023",value:20,label2:"~20조"},{label:"2024",value:28,label2:"~28조"},{label:"2025",value:48,label2:"~48조"}]} maxVal={55} height={150}/>
      </div>
      <MiniTable headers={["항목","과거 정비시장","현재 정비시장"]} rows={[["사업 위상","보완적 시장","핵심 수익원"],["리스크 인식","대형 = 안정","대형 = 고위험"],["경쟁 기준","브랜드·가격","금융·기술·브랜드"],["수주 전략","물량 확대","IRR 중심 선별"]]} accent/>
    </>
  },
  // SLIDE 2
  {type:"content",num:2,title:"양강 체제와 경쟁 구도 재편",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>상위 2개사 점유율이 <b style={{color:C.accent}}>40%를 상회</b>하는 양강 체제가 고착화되었습니다. 이는 자본·브랜드·금융 역량 격차가 구조화된 결과입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>초대형 사업에서 조합은 <b style={{color:C.accent}}>시공사 안정성을 최우선</b>으로 고려하며, 금융기관도 시공사 신용도 기준으로 PF 조건을 설정합니다. "자본 규모 = 경쟁력" 구조가 강화되고 있습니다.</p>
      <div style={{fontSize:12,color:C.textMuted,fontWeight:600,marginBottom:8,marginTop:16}}>중견사의 전략적 선택지</div>
      <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
        <TagBadge text="① 특정 지역 특화 집중"/><TagBadge text="② 대형사 컨소시엄 참여"/><TagBadge text="③ 리모델링·틈새시장 집중"/>
      </div>
      <p style={{fontSize:12.5,color:C.textMuted,lineHeight:1.6,marginTop:14}}>향후 초대형 파이프라인 본격화 시, PF 보수화와 맞물려 중견사 단독 대형 수주는 구조적으로 더욱 어려워질 전망입니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:18}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:10,fontWeight:600}}>양강 체제 형성의 구조적 요인</div>
        <MiniTable headers={["요인","구조적 배경","시장 영향"]} rows={[["브랜드 신뢰","하이엔드 분양 수요","분양가 방어"],["금융 신용도","PF 금리 차이","자금조달 격차"],["리스크 감내","분담금·공사비 분쟁","대형사 유리"],["기술 제안력","BIM·스마트 제안","수주 경쟁력 차별"]]}/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>중견사 전략 옵션 생존 가능성</div>
      <RiskMatrix items={[{label:"컨소시엄 참여",value:80,level:"높음",color:C.bar3},{label:"지역 특화",value:55,level:"중",color:C.bar2},{label:"틈새시장",value:50,level:"중",color:C.bar2},{label:"단독 고위험",value:25,level:"낮음",color:C.bar4}]}/>
    </>
  },
  // SLIDE 3
  {type:"content",num:3,title:"수도권 초집중 현상과 시장 양극화",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>정비사업 수주의 대부분이 수도권에 집중되는 구조가 형성되었습니다. 이는 단순한 지역 선호가 아닌 <b style={{color:C.accent}}>사업성 구조 차이</b>에서 기인합니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>서울 상·하위 가격대 간 격차 확대는 초양극화를 심화시키고, 지방은 인구 감소·미분양·PF 거절 등으로 구조적 침체 위험에 직면해 있습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>시장은 <b style={{color:C.bar3}}>상급지 초대형 과열</b>과 <b style={{color:C.bar4}}>지방 저수익 유찰</b>로 극단적 양극화 구조를 보이고 있습니다.</p>
      <Callout>▶ 향후 3~5년, 수도권 중심 선택적 집중 전략이 기본 전제입니다.</Callout>
    </>,
    right:<>
      <div style={{marginBottom:18}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>수도권 vs 지방 구조 비교</div>
        <MiniTable headers={["구분","수도권","지방"]} rows={[["분양가","고가 방어 가능","상승 한계 명확"],["일반분양","수요 탄탄","미분양 위험"],["금융 접근","PF 조달 용이","보수적 심사"],["유찰 가능성","낮음","반복 발생"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>지방 리스크 평가</div>
      <RiskMatrix items={[{label:"미분양 증가",value:85,level:"높음",color:C.bar4},{label:"분양가 제한",value:80,level:"높음",color:C.bar4},{label:"PF 거절",value:65,level:"중~높",color:"#F59E0B"},{label:"유찰 반복",value:75,level:"높음",color:C.bar4}]}/>
    </>
  },
  // SLIDE 4
  {type:"content",num:4,title:"공사비 30% 상승의 구조적 고착",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>최근 4~5년간 공사비는 약 <b style={{color:C.bar4}}>30% 상승</b>했습니다. 자재비·인건비·안전규제·친환경규제·금융비가 복합 작용한 <b style={{color:C.accent}}>구조적 비용 체계 상향</b>입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>ZEB 의무화 확대는 단열·창호·설비 사양 상향으로 세대당 비용을 구조적으로 올리고 있으며, 숙련공 부족과 중대재해 대응 비용은 장기 지속됩니다.</p>
      <Callout color={C.bar4}>⚠ 공사비 +5% → IRR -2~3%p, 분담금 급증 / +10% → IRR -4~6%p, 사업성 붕괴</Callout>
      <p style={{fontSize:12.5,color:C.textMuted,lineHeight:1.6,marginTop:14}}>공사비는 협상 대상이 아니라 <b style={{color:C.accent}}>기술 기반 원가 관리 체계</b>로 통제해야 합니다.</p>
    </>,
    right:<>
      <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:16}}>
        <KPICard label="공사비 상승률" value="+30%" sub="최근 4~5년 누적" color={C.bar4}/>
        <KPICard label="IRR 영향" value="-2~6%p" sub="공사비 +5~10% 시" color="#F59E0B"/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>공사비 상승 요인 분석</div>
      <MiniTable headers={["구분","세부 요인","지속 가능성"]} rows={[["자재비","철근·시멘트·마감재","중장기 지속"],["인건비","숙련공 부족·임금 인상","구조적"],["안전 규제","중대재해 대응","상시화"],["친환경 규제","ZEB·단열 강화","확대 예정"],["금융비","금리 상승기","변동성"]]}/>
    </>
  },
  // SLIDE 5
  {type:"content",num:5,title:"규제 영향과 PF 리스크 구조 변화",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>재초환 완화에도 조합원 체감 부담은 여전히 높고, 대출 한도 규제는 고가 단지 이주비 조달을 제약합니다. 시공사는 <b style={{color:C.accent}}>"재무 설계 파트너"</b> 역할을 요구받고 있습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>PF 연체율 상승으로 금융기관 심사가 강화되어 자기자본비율 요구, 위험가중치 차등화 등 조달 환경이 보수화되었습니다. 금융 구조 불안정 시 수주 자체가 리스크입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:6}}>패스트트랙(안전진단·동의율 완화)이 사업 추진 속도를 단축시키나, 실제 착공까지는 금융·분담금 문제가 병목으로 작용합니다.</p>
      <Callout>▶ PF 역량은 영업 역량과 동등한 핵심 경쟁력입니다.</Callout>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>규제 영향 구조</div>
        <MiniTable headers={["규제","직접 영향","시공사 대응"]} rows={[["재초환","분담금 증가","금융 구조 설계"],["대출 한도","이주비 부족","브릿지 금융 제안"],["분양가 통제","수익 제한","사전 시뮬레이션"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>PF 환경 변화 영향</div>
      <MiniTable headers={["항목","변화 내용","전략적 대응"]} rows={[["자기자본 요구","비율 상향","재무 안정성 확보"],["금리 가산","조달 비용 ↑","신용도 관리"],["보증 요구","우발채무 확대","보증 한도 관리"],["심사 기간","승인 지연","사전 협의 강화"]]}/>
    </>
  },
  // DIVIDER 2
  {type:"divider",chapter:"PART 02",title:"기술·디자인 트렌드",subtitle:"스마트건설과 프리미엄 상품 전략이 만드는 경쟁력 재편"},
  // SLIDE 6
  {type:"content",num:6,title:"BIM과 디지털 전환 전략",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>건설산업 디지털 전환은 <b style={{color:C.accent}}>제도적 필연</b> 단계에 진입했습니다. BIM 의무화가 대형 민간 프로젝트로 확산되며, 기술 제안이 조합 평가 요소로 반영되는 사례가 증가하고 있습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>BIM 활용 범위는 3D 모델링을 넘어 <b style={{color:C.accent}}>4D 공정 시뮬레이션, 5D 원가 통제, 디지털 트윈</b>으로 확장되어야 합니다. 공기 3~6개월 지연은 금융비 증가로 직결됩니다.</p>
      <p style={{fontSize:12.5,color:C.textMuted,lineHeight:1.6,marginTop:12}}>설계-시공-운영 통합 플랫폼으로 하자 패턴 분석, 에너지 데이터 축적, 유지관리 서비스 고도화까지 확장 가능합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>BIM 디지털 전환 단계별 가치</div>
        <MiniTable headers={["단계","활용 범위","재무 영향"]} rows={[["3D BIM","설계 검토·간섭 제거","변경 비용 감소"],["4D BIM","일정 시뮬레이션","금융비 절감"],["5D BIM","원가 연동","마진 개선"],["디지털 트윈","운영 연계","장기 수익"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>스마트건설 기술 전략 효과</div>
      <MiniTable headers={["기술","단기 효과","장기 가치"]} rows={[["BIM","설계 오류 감소","데이터 축적"],["4D 시뮬레이션","일정 단축","리스크 예측"],["AI 공정 관리","생산성 향상","자동화 기반"],["로봇 시공","안전성 개선","표준화"]]}/>
    </>
  },
  // SLIDE 7
  {type:"content",num:7,title:"AI·자동화와 스마트 안전 체계",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>인건비 상승, 숙련공 부족, 안전 규제 강화는 자동화를 가속화하는 구조적 요인입니다. AI·로봇 기술은 <b style={{color:C.accent}}>일정 예측, 자재 최적화, 위험 작업 대체</b>에서 전략적 가치를 제공합니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>AI 공정 관리는 일정 지연을 사전 탐지하며, <b style={{color:C.bar3}}>공기 5% 단축 시 수십억 원 금융비 절감</b> 효과가 발생합니다. 자동화의 핵심은 생산성보다 "변동성 감소"입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:6}}>중대재해 처벌 강화 이후 안전은 <b style={{color:C.accent}}>생존 조건</b>입니다. IoT 센서와 AI 영상 분석 기반 스마트 안전 체계가 대안입니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>핵심 자동화 영역</div>
        <MiniTable headers={["영역","기존 한계","자동화 효과"]} rows={[["공정 일정","경험 의존","AI 예측·지연 감소"],["자재 운반","대기 시간","동선 최적화"],["위험 작업","안전사고 위험","로봇 대체"],["품질 관리","편차 발생","데이터 분석·하자 감소"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>스마트 안전 기술</div>
      <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
        <TagBadge text="고소 작업자 안전고리 감지" color={C.bar3}/><TagBadge text="가스·밀폐 공간 센서" color={C.bar3}/><TagBadge text="위험 행동 영상 분석" color={C.bar3}/><TagBadge text="현장 인원 위치 추적" color={C.bar3}/>
      </div>
    </>
  },
  // SLIDE 8
  {type:"content",num:8,title:"ZEB 의무화와 스마트홈 플랫폼 경쟁",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>ZEB 의무화는 단기적 공사비 상승 요인이지만, 중장기적으로는 <b style={{color:C.accent}}>진입 장벽이자 차별화 요소</b>입니다. 핵심은 "인증 확보"가 아닌 CAPEX 대비 OPEX 최적화 설계입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>스마트홈 플랫폼은 분양 경쟁력과 직결되는 전략 요소입니다. 세대 통합 제어, 에너지 모니터링, 커뮤니티 예약, 헬스케어 연계가 기본 사양으로 요구됩니다.</p>
      <p style={{fontSize:12.5,color:C.textMuted,lineHeight:1.6}}>장기적으로 외부 기기·서비스 연동이 가능한 개방형 플랫폼이 확장성 면에서 유리합니다. ESG 연계 채권·그린 파이낸싱으로 자금 조달 비용 절감도 가능합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>친환경 기술 전략 효과</div>
        <MiniTable headers={["기술","단기 영향","중장기 효과"]} rows={[["고성능 외피","공사비 증가","에너지 절감"],["태양광","초기 투자","관리비 절감"],["BEMS","시스템 비용","데이터 축적"],["ESS","설치 비용","피크 대응"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>스마트홈 플랫폼 전략 가치</div>
      <MiniTable headers={["영역","효과","재무 기여"]} rows={[["분양 경쟁력","프리미엄 형성","분양가 방어"],["에너지 관리","관리비 절감","운영 수익"],["커뮤니티","체류형 단지","고객 충성도"],["헬스케어","고령 대응","신규 사업"]]}/>
    </>
  },
  // SLIDE 9
  {type:"content",num:9,title:"평면 혁신과 커뮤니티 고급화",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>재건축 시장은 "새 아파트"에서 <b style={{color:C.accent}}>"라이프스타일 업그레이드"</b>로 본질이 전환되었습니다. 평면 혁신은 비용이 아닌 분양가 프리미엄 확보 수단입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>LDK 구조(거실·주방·식당 통합), 가변형 벽체, 알파룸 확대 등이 핵심이며, 커뮤니티는 호텔식 라운지, 스카이라운지, 실내 수영장 등으로 진화하고 있습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75}}>특히 상급지 재건축은 <b style={{color:C.accent}}>커뮤니티의 상징성</b>이 조합 의사결정에 영향을 미치며, 랜드마크 공간 제안이 수주 경쟁의 결정적 요인입니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>공간 혁신 전략</div>
        <MiniTable headers={["요소","과거","현재"]} rows={[["거실","분리형","LDK 통합"],["방 구성","고정형","가변형"],["수납","최소화","대형화"],["보조공간","제한적","알파룸 확대"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>커뮤니티 고급화 전략 가치</div>
      <MiniTable headers={["영역","단기 효과","중장기 효과"]} rows={[["스카이라운지","상징성 확보","랜드마크화"],["호텔식 운영","만족도 상승","재판매 가치 ↑"],["문화 공간","차별화","커뮤니티 활성화"],["게스트 시설","편의성","고급 이미지"]]}/>
    </>
  },
  // SLIDE 10
  {type:"content",num:10,title:"고령화 대응과 친환경 디자인 전략",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>초고령사회 진입 단계에서, 재건축 단지 고령 조합원이 다수입니다. 고령화 대응 설계는 <b style={{color:C.accent}}>필수</b>이며, "Aging in Place" 개념이 확산 중입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>무단차 구조, 광폭 복도, 미끄럼 방지, 스마트 헬스 모니터링 등은 장기 자산가치 유지 전략이자 ESG 평가와도 연계됩니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75}}>친환경 디자인은 패시브 설계, 자연 채광·환기 최적화, 탄소 저감 자재로 <b style={{color:C.accent}}>분양 프리미엄, ESG 투자 유치, 운영비 절감</b>의 삼중 효과를 제공합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>고령화 대응 설계 방향</div>
        <MiniTable headers={["요소","기능","기대 효과"]} rows={[["무단차","이동 편의","안전성 증가"],["광폭 설계","휠체어 대응","접근성 향상"],["스마트 헬스","건강 모니터링","고령자 안심"],["커뮤니티 연계","고립 방지","삶의 질 향상"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>친환경 디자인 전략 효과</div>
      <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
        <KPICard label="분양" value="프리미엄" sub="친환경 선호 증가" color={C.bar3}/>
        <KPICard label="운영" value="OPEX↓" sub="관리비 절감" color={C.bar2}/>
        <KPICard label="금융" value="ESG" sub="투자 유치" color={C.bar5}/>
      </div>
    </>
  },
  // DIVIDER 3
  {type:"divider",chapter:"PART 03",title:"전략 프레임워크 & 실행 방안",subtitle:"사업성 분석 재정립과 향후 3~5년 전략 도출"},
  // SLIDE 11
  {type:"content",num:11,title:"기존 사업성 분석의 한계와 전환",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>기존 분석은 분양가→공사비→사업비→단일 IRR 산출의 <b style={{color:C.bar4}}>"정상 상태 시장"</b> 전제였습니다. 현재는 <b style={{color:C.accent}}>고변동성 시장</b>입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>공사비 구조적 상승, 분양가 양극화, PF 변동성, 초대형 집중, ZEB 의무화가 기존 단순 계산법을 무력화하고 있습니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75}}>초대형 사업은 IRR 1~2%p 하락이 회사 ROE를 직접 훼손합니다. 기준이 "이 사업이 돈이 되느냐"에서 <b style={{color:C.accent}}>"회사 전체 리스크 구조 안에서 감당 가능한가"</b>로 전환되어야 합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>기존 분석 방식의 한계</div>
        <MiniTable headers={["한계 요인","기존 방식","현재 환경"]} rows={[["공사비","평균치 적용","변동성 확대"],["분양가","과거 사례 기준","입지별 양극화"],["금융비","단일 금리 가정","PF 구조 보수화"],["일정","계획 기준","지연 리스크 상시화"],["기술 비용","선택 요소","의무화·필수화"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>분석 단위 전환</div>
      <MiniTable headers={["항목","과거","현재 필요"]} rows={[["분석 단위","프로젝트 단위","포트폴리오 단위"],["손실 허용","일부 가능","거의 불가"],["재무 영향","제한적","전사적 영향"]]}/>
    </>
  },
  // SLIDE 12
  {type:"content",num:12,title:"새로운 5단계 사업성 분석 프레임워크",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>최근 트렌드를 반영한 <b style={{color:C.accent}}>5단계 통합 리스크 관리 모델</b>을 제안합니다.</p>
      <StepFlow steps={[
        {title:"입지 등급 분류",desc:"상급지/준상급지/비상급지 구분, 분양가 민감도 차등 적용"},
        {title:"공사비 3단계 시나리오",desc:"기준·보수(+5%)·스트레스(+10%) 시나리오 적용"},
        {title:"금융 구조 스트레스 테스트",desc:"금리 +1%, 일정 지연 6개월, 자기자본 +5% 가정"},
        {title:"기술 적용 시나리오",desc:"BIM·AI 적용 여부에 따른 비용·공기 차이 반영"},
        {title:"전사 포트폴리오 영향 분석",desc:"해당 프로젝트의 전사 재무 영향 평가"},
      ]}/>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>프레임워크 요약</div>
        <MiniTable headers={["단계","핵심 변수","목적"]} rows={[["입지 평가","분양가 방어력","수익 안정성"],["공사비 분석","상승 리스크","마진 보호"],["금융 분석","PF·보증","유동성 보호"],["기술 반영","비용 절감","경쟁력 확보"],["포트폴리오","집중도","전사 안정성"]]} accent/>
      </div>
      <Callout>민감도 분석 상시 적용: 분양가 ±10% · 공사비 ±5% · 금리 ±1% · 일정 지연 6개월</Callout>
    </>
  },
  // SLIDE 13
  {type:"content",num:13,title:"선별 수주 & 기술 투자 전략",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>전략의 출발점은 <b style={{color:C.accent}}>"확장"이 아니라 "통제"</b>입니다. 수익 안정화가 목표이며, 수도권 상급지 중심 포트폴리오를 기본 축으로 하되 단일 초대형 의존도를 제한합니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}><b style={{color:C.bar4}}>손실 프로젝트 1건은 3년간의 수익을 상쇄</b>합니다. "못 따는 사업"이 아닌 "따면 위험한 사업"을 구분하는 것이 핵심입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75}}>기술 투자 목표는 <b style={{color:C.accent}}>공사비 3~5% 절감</b>입니다. BIM 100% 최우선, AI 공정, 로봇 자동화, 모듈러를 순차 적용합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>선별 수주 전략 KPI</div>
        <MiniTable headers={["전략","실행 기준","KPI"]} rows={[["IRR 기준","최소 8% 이상","평균 마진 8~10%"],["지역 선택","수도권 중심","수도권 비중 85%↑"],["포트폴리오","초대형 제한적","단일 사업 비중 제한"],["컨소시엄","고위험 사업","우발채무 관리"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>기술 투자 우선순위</div>
      <RiskMatrix items={[{label:"BIM 100%",value:95,level:"최우선",color:C.bar3},{label:"AI 공정",value:75,level:"높음",color:C.bar2},{label:"로봇 자동화",value:50,level:"중",color:"#F59E0B"},{label:"모듈러",value:30,level:"선택적",color:C.textMuted}]}/>
    </>
  },
  // SLIDE 14
  {type:"content",num:14,title:"브랜드·금융·조합 설득 전략",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}><b style={{color:C.accent}}>브랜드와 상품은 분양가 방어 장치</b>입니다. 분양가 3~5% 차이가 사업 전체 수익 구조를 바꾸며, 하이엔드 시장에서 상품력 = 수주 경쟁력입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>금융 전략은 보수적 레버리지·우발채무 관리·고정금리 확대·ESG 연계 조달 원칙을 따릅니다. <b style={{color:C.accent}}>금융 역량은 영업력과 동일한 전략 축</b>입니다.</p>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75}}>조합 설득은 "최저가"가 아닌 <b style={{color:C.accent}}>"예측 가능성 제공"</b>이 핵심입니다. 분담금 시뮬레이션, 공사비 관리 프로세스, 금융 사전 제안, 민감도 분석 공유로 투명성을 확보합니다.</p>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>브랜드·상품 고급화 전략</div>
        <MiniTable headers={["전략","적용 내용","시장 효과"]} rows={[["LDK·가변형","평면 유연화","수요 확대"],["유니버설 디자인","무단차·광폭","고령 대응"],["호텔식 커뮤니티","라운지·문화 공간","프리미엄 강화"],["조경 특화","녹지 강화","선호도 상승"]]} accent/>
      </div>
      <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>조합 설득: 투명성 기반 제안</div>
      <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
        <TagBadge text="분담금 시뮬레이션" color={C.bar2}/><TagBadge text="공사비 변동 관리" color={C.bar2}/><TagBadge text="금융 구조 사전 제안" color={C.bar2}/><TagBadge text="민감도 분석 공유" color={C.bar2}/>
      </div>
    </>
  },
  // SLIDE 15
  {type:"content",num:15,title:"최종 결론: 시공사에서 통합 개발 파트너로",
    left:<>
      <p style={{fontSize:13,color:C.text,lineHeight:1.75,marginBottom:14}}>향후 3~5년 재건축 시장은 <b style={{color:C.accent}}>고위험·고기회 구조</b>입니다. 승패를 가르는 네 가지 기준:</p>
      <div style={{display:"flex",flexDirection:"column",gap:6,marginBottom:16}}>
        {["수주를 통제할 수 있는가","공사비를 통제할 수 있는가","금융 리스크를 통제할 수 있는가","분양가를 방어할 수 있는가"].map((t,i) => (
          <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"8px 12px",background:C.highlight,borderRadius:6}}>
            <span style={{fontSize:16,fontWeight:800,color:C.accent}}>{i+1}</span>
            <span style={{fontSize:12.5,color:C.text,fontWeight:500}}>{t}</span>
          </div>
        ))}
      </div>
      <div style={{padding:"14px 16px",background:`linear-gradient(135deg,${C.accent}15,${C.accent}08)`,border:`1px solid ${C.accent}33`,borderRadius:8}}>
        <p style={{fontSize:13,color:C.accentLight,fontWeight:700,lineHeight:1.7,margin:0}}>지향 모델: "공사를 따는 회사"가 아닌<br/>"사업을 설계하는 회사"</p>
        <p style={{fontSize:11.5,color:C.textMuted,lineHeight:1.5,margin:"8px 0 0 0"}}>기획 참여 → 금융 설계 → 설계·시공 통합 → 운영 플랫폼</p>
      </div>
    </>,
    right:<>
      <div style={{marginBottom:16}}>
        <div style={{fontSize:11,color:C.textMuted,marginBottom:8,fontWeight:600}}>6대 구조 변화와 전략 대응</div>
        <MiniTable headers={["구조 변화","전략 키워드"]} rows={[["초대형화","포트폴리오 리스크 관리"],["수도권 초집중","선별 수주·IRR 중심"],["공사비 상승","기술 기반 원가 통제"],["PF 보수화","금융 역량 강화"],["ZEB 의무화","CAPEX↔OPEX 최적화"],["기술 경쟁","BIM·AI 필수 투자"]]} accent/>
      </div>
      <Callout color={C.bar4}>지금은 확장의 시기가 아닙니다. 선택과 집중, 통제와 구조 고도화의 시기입니다.</Callout>
    </>
  },
  // THANK YOU
  {type:"thankyou"},
];

function App() {
  const [cur, setCur] = useState(0);
  const total = slides.length;
  const go = useCallback((idx) => { if(idx>=0 && idx<total) setCur(idx); }, [total]);

  useEffect(() => {
    const h = (e) => {
      if(e.key==="ArrowRight"||e.key===" "){e.preventDefault();go(cur+1);}
      if(e.key==="ArrowLeft"){e.preventDefault();go(cur-1);}
    };
    window.addEventListener("keydown",h);
    return ()=>window.removeEventListener("keydown",h);
  },[cur,go]);

  const s = slides[cur];

  return (
    <div style={{width:"100%",height:"100vh",background:"#060A12",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:10}}>
      <div style={{width:"100%",maxWidth:1200,aspectRatio:"16/9",background:C.bg,borderRadius:10,overflow:"hidden",position:"relative",boxShadow:`0 4px 60px rgba(0,0,0,0.6), 0 0 0 1px ${C.divider}`,display:"flex",flexDirection:"column"}}>

        {s.type==="cover" && (
          <div style={{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",position:"relative",overflow:"hidden"}}>
            <div style={{position:"absolute",inset:0,background:`radial-gradient(ellipse at 30% 50%,${C.accent}12 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,${C.bar2}08 0%,transparent 50%)`}}/>
            <div style={{position:"absolute",top:0,left:0,right:0,height:4,background:`linear-gradient(90deg,${C.accent},${C.accentDark},${C.bar2})`}}/>
            <div style={{position:"relative",textAlign:"center",padding:"0 40px"}}>
              <div style={{fontSize:11,color:C.accentDark,letterSpacing:6,textTransform:"uppercase",fontWeight:700,marginBottom:20}}>{s.meta}</div>
              <h1 style={{fontSize:"clamp(22px,3.5vw,42px)",fontWeight:900,color:C.text,lineHeight:1.35,margin:0,whiteSpace:"pre-line"}}>{s.title}</h1>
              <div style={{width:80,height:3,background:C.accent,margin:"24px auto",borderRadius:2}}/>
              <div style={{fontSize:"clamp(12px,1.5vw,18px)",color:C.textMuted,fontWeight:500}}>{s.subtitle}</div>
              <div style={{fontSize:13,color:C.textDim,marginTop:16}}>{s.date}</div>
            </div>
          </div>
        )}

        {s.type==="divider" && (
          <div style={{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",position:"relative",overflow:"hidden"}}>
            <div style={{position:"absolute",inset:0,background:`linear-gradient(135deg,${C.accent}08 0%,transparent 50%)`}}/>
            <div style={{position:"absolute",top:0,left:0,right:0,height:4,background:`linear-gradient(90deg,${C.accent},${C.accentDark})`}}/>
            <div style={{position:"relative",padding:"0 60px"}}>
              <div style={{fontSize:12,color:C.accent,letterSpacing:5,fontWeight:800,marginBottom:16}}>{s.chapter}</div>
              <h2 style={{fontSize:"clamp(24px,4vw,48px)",fontWeight:900,color:C.text,margin:0,lineHeight:1.2}}>{s.title}</h2>
              <div style={{width:60,height:3,background:C.accent,margin:"20px 0",borderRadius:2}}/>
              <p style={{fontSize:"clamp(12px,1.4vw,16px)",color:C.textMuted,maxWidth:600,lineHeight:1.6,margin:0}}>{s.subtitle}</p>
            </div>
          </div>
        )}

        {s.type==="content" && (
          <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
            <div style={{padding:"14px 28px 10px",borderBottom:`1px solid ${C.divider}`,flexShrink:0,display:"flex",alignItems:"center",gap:14,background:`linear-gradient(90deg,${C.accent}08,transparent)`}}>
              <div style={{width:32,height:32,borderRadius:6,background:`linear-gradient(135deg,${C.accent},${C.accentDark})`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:14,fontWeight:800,color:C.bg,flexShrink:0}}>{String(s.num).padStart(2,"0")}</div>
              <h3 style={{fontSize:"clamp(14px,2vw,20px)",fontWeight:800,color:C.text,margin:0}}>{s.title}</h3>
            </div>
            <div style={{flex:1,display:"flex",overflow:"hidden",minHeight:0}}>
              <div style={{flex:1.1,padding:"16px 24px",overflowY:"auto",minWidth:0}}>{s.left}</div>
              <div style={{width:1,background:C.divider,flexShrink:0}}/>
              <div style={{flex:0.9,padding:"16px 20px",overflowY:"auto",minWidth:0,background:`${C.card}88`}}>{s.right}</div>
            </div>
          </div>
        )}

        {s.type==="thankyou" && (
          <div style={{flex:1,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",position:"relative",overflow:"hidden"}}>
            <div style={{position:"absolute",inset:0,background:`radial-gradient(ellipse at 50% 50%,${C.accent}10 0%,transparent 60%)`}}/>
            <div style={{position:"absolute",top:0,left:0,right:0,height:4,background:`linear-gradient(90deg,${C.accent},${C.accentDark},${C.bar2})`}}/>
            <div style={{position:"relative",textAlign:"center"}}>
              <div style={{fontSize:11,color:C.accentDark,letterSpacing:6,textTransform:"uppercase",fontWeight:700,marginBottom:20}}>END OF PRESENTATION</div>
              <h2 style={{fontSize:"clamp(28px,5vw,56px)",fontWeight:900,color:C.text,margin:0}}>Thank You</h2>
              <div style={{width:80,height:3,background:C.accent,margin:"24px auto",borderRadius:2}}/>
              <p style={{fontSize:"clamp(12px,1.4vw,16px)",color:C.textMuted,lineHeight:1.6}}>2025 재건축 시장 전략 보고서</p>
            </div>
          </div>
        )}

        {/* Footer */}
        <div style={{padding:"8px 20px",borderTop:`1px solid ${C.divider}`,display:"flex",alignItems:"center",justifyContent:"space-between",flexShrink:0,background:C.card}}>
          <div style={{fontSize:10,color:C.textDim}}>{cur+1} / {total}</div>
          <div style={{display:"flex",gap:3,alignItems:"center",overflow:"hidden",maxWidth:"50%"}}>
            {slides.map((_,i) => (
              <div key={i} onClick={()=>go(i)} style={{width:i===cur?18:6,height:6,borderRadius:3,background:i===cur?C.accent:C.divider,cursor:"pointer",transition:"all 0.3s",flexShrink:0}}/>
            ))}
          </div>
          <div style={{display:"flex",gap:6}}>
            <button onClick={()=>go(cur-1)} disabled={cur===0} style={{padding:"6px 14px",borderRadius:5,border:`1px solid ${C.divider}`,background:cur===0?"transparent":C.cardAlt,color:cur===0?C.textDim:C.text,fontSize:11,fontWeight:600,cursor:cur===0?"default":"pointer",transition:"all 0.2s"}}>← 이전</button>
            <button onClick={()=>go(cur+1)} disabled={cur===total-1} style={{padding:"6px 14px",borderRadius:5,border:"none",background:cur===total-1?C.divider:`linear-gradient(135deg,${C.accent},${C.accentDark})`,color:cur===total-1?C.textDim:C.bg,fontSize:11,fontWeight:700,cursor:cur===total-1?"default":"pointer",transition:"all 0.2s"}}>다음 →</button>
          </div>
        </div>
      </div>
      <div style={{marginTop:10,fontSize:10,color:C.textDim,textAlign:"center"}}>← → 방향키 또는 스페이스바로 이동</div>
    </div>
  );
}

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