// hub-design.jsx — kimjungtae.com root brand pages (SiteHub, SitePoll)
// Self-contained: own hooks + palette. Intentionally light/editorial, non-"game".

const serif = '"Noto Serif KR", serif';
const sans  = '"Noto Sans KR", system-ui, sans-serif';
const mono  = '"JetBrains Mono", monospace';

function useBreakpoint() {
  const getSize = () => {
    if (typeof window === 'undefined') return 'desktop';
    const w = window.innerWidth;
    if (w < 600) return 'mobile';
    if (w < 1024) return 'tablet';
    return 'desktop';
  };
  const [bp, setBp] = React.useState(getSize);
  React.useEffect(() => {
    const h = () => setBp(getSize());
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return bp;
}

const H = {
  bg:"#f4f0e7", card:"#ffffff", soft:"#ece5d6", ink:"#191713",
  inkSoft:"#463f36", inkMute:"#8b8478", rule:"#e2dccb", rule2:"#cec6b1",
  dark:"#12181f", teal:"#0f5b54", tealTint:"#e6efec", gold:"#a8792a",
  navy:"#1b3a5c",
};

// ─────────────────────────────────────────────
// Shared top nav
// ─────────────────────────────────────────────
function HubNav({ links }) {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const [open, setOpen] = React.useState(false);
  const [bookOpen, setBookOpen] = React.useState(false);
  const newBooks = [
    ["/poll", "2026 · 데이터·정치", "AI 지방선거 해부"],
    ["/AIGame", "2026 · 게임개발", "AI 게임 개발 시작"],
  ];
  const items = links || [
    ["books", "#books", "저서"],
    ["work",  "#work",  "약력"],
    ["research", "#research", "연구"],
  ];
  return (
    <nav style={{
      position:"sticky", top:0, zIndex:50,
      background:"rgba(244,240,231,0.88)", backdropFilter:"blur(10px)",
      borderBottom:`1px solid ${H.rule}`,
      padding: isMobile ? "0 18px" : "0 clamp(24px,5vw,64px)", height: isMobile?58:68,
      display:"flex", alignItems:"center", justifyContent:"space-between",
    }}>
      <a href="/" style={{display:"flex", alignItems:"center", gap:11}}>
        <div style={{width:34, height:34, background:H.dark, color:H.card,
          display:"flex", alignItems:"center", justifyContent:"center",
          fontFamily:serif, fontWeight:900, fontSize:19}}>金</div>
        <div>
          <div style={{fontFamily:serif, fontWeight:700, fontSize:16, color:H.ink, lineHeight:1.05}}>김정태</div>
          <div style={{fontFamily:mono, fontSize:9, color:H.gold, letterSpacing:".22em", marginTop:2}}>JUNGTAE KIM</div>
        </div>
      </a>
      {!isMobile ? (
        <div style={{display:"flex", alignItems:"center", gap:30}}>
          {items.map(([k,href,t]) => (
            <a key={k} href={href} style={{fontFamily:sans, fontSize:14, fontWeight:500, color:H.inkSoft}}>{t}</a>
          ))}
          <div style={{position:"relative"}} onMouseEnter={()=>setBookOpen(true)} onMouseLeave={()=>setBookOpen(false)}>
            <button onClick={()=>setBookOpen(o=>!o)} style={{fontFamily:sans, fontSize:13, fontWeight:700, color:H.card, background:H.teal, padding:"9px 16px", border:"none", cursor:"pointer"}}>신간 보기 {bookOpen?"▴":"▾"}</button>
            {bookOpen && (
              <div style={{position:"absolute", top:"100%", right:0, paddingTop:8, minWidth:236, zIndex:60}}>
                <div style={{background:H.card, border:`1px solid ${H.rule}`, boxShadow:"0 14px 34px rgba(0,0,0,0.16)", overflow:"hidden"}}>
                  {newBooks.map(([href,tag,name],i)=>(
                    <a key={href} href={href} style={{display:"block", padding:"13px 18px", borderTop: i>0?`1px solid ${H.rule}`:"none", background:H.card}}>
                      <div style={{fontFamily:mono, fontSize:9, color:H.gold, letterSpacing:".18em", marginBottom:4}}>{tag}</div>
                      <div style={{fontFamily:serif, fontWeight:700, fontSize:15, color:H.ink}}>{name} <span style={{color:H.teal}}>▸</span></div>
                    </a>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>
      ) : (
        <button onClick={()=>setOpen(o=>!o)} style={{background:"transparent", border:`1px solid ${H.rule2}`, color:H.ink, width:38, height:38, fontSize:18, cursor:"pointer"}}>{open?"✕":"☰"}</button>
      )}
      {isMobile && open && (
        <div style={{position:"absolute", top:58, left:0, right:0, background:H.card, borderBottom:`1px solid ${H.rule}`, boxShadow:"0 12px 30px rgba(0,0,0,0.12)"}}>
          {items.map(([k,href,t]) => (
            <a key={k} href={href} onClick={()=>setOpen(false)} style={{display:"block", padding:"15px 20px", fontSize:15, color:H.inkSoft, borderBottom:`1px solid ${H.rule}`}}>{t}</a>
          ))}
          <div style={{padding:"14px 20px 6px", fontFamily:mono, fontSize:10, color:H.gold, letterSpacing:".2em"}}>신간 보기</div>
          {newBooks.map(([href,tag,name])=>(
            <a key={href} href={href} onClick={()=>setOpen(false)} style={{display:"block", padding:"12px 20px", fontSize:15, fontWeight:700, color:H.teal, borderBottom:`1px solid ${H.rule}`}}>{name} ▸</a>
          ))}
        </div>
      )}
    </nav>
  );
}

const hubLabel = (t) => (
  <div style={{fontFamily:mono, fontSize:11, color:H.gold, letterSpacing:".28em", marginBottom:14}}>{t}</div>
);

// ═════════════════════════════════════════════
// ROOT HUB
// ═════════════════════════════════════════════
window.SiteHub = function SiteHub() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;

  const stats = [["30년","게임 현장"],["200편+","제작·퍼블리싱"],["12권","저서·역서"],["468","논문 피인용"]];
  const roles = [
    ["현직","동양대학교 게임학부 · AI게임융합전공 전임교수"],
    ["현직","대통령 직속 국가AI전략위원회 자문위원"],
    ["현직","K컬처포럼 의장 · 게임인재단 이사"],
    ["前","삼성전자 게임 PD — 게임·엔터 200편+ 기획·제작·퍼블리싱"],
    ["前","지스타 국제게임전시회 1·2회 총괄감독"],
    ["학위","중앙대학교 물리학(영문학) 학사 · 영문학 석사(음성 멀티미디어) · 공학 박사(엔터테크)"],
  ];
  const books = [
    ["2026","AI 지방선거 해부 — 데이터가 밝히는 승패의 법칙","신간", true],
    ["2026","AI 게임 개발 시작 — 누구나 게임을 만든다","도서출판 홍릉", true],
    ["2026","도시레벨디자인","신간", true],
    ["2022","게이미피케이션 개론","", false],
    ["2018","게임의 미래","", false],
    ["2017","게임메카닉스 (공동번역)","", false],
    ["2015","게이미피케이션의 이해","", false],
    ["2015","게이미피케이션 & 게임아트쇼","", false],
    ["2015","게임의 역사와 이해","", false],
    ["2015","아트 오브 게임 디자인 2판 (공동번역)","", false],
    ["2014","게이미피케이션: 세상을 플레이하다 (대표저자)","", false],
    ["2014","게임디자인 원리 (공동번역)","", false],
  ];
  const interests = ["게임","게이미피케이션","웹툰게임","게임기반학습","AI 창작"];

  return (
    <div style={{background:H.bg, color:H.ink, fontFamily:sans, position:"relative"}}>
      <HubNav/>

      {/* HERO */}
      <section style={{padding: isMobile ? "40px 0 30px" : "72px 0 56px", borderBottom:`1px solid ${H.rule}`}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`,
          display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.55fr 1fr",
          gap: isMobile ? 32 : 56, alignItems:"center"}}>
          <div>
            {hubLabel("PROFESSOR · GAME · GAMIFICATION · AI")}
            <h1 style={{fontFamily:serif, fontWeight:900, lineHeight:1.05, letterSpacing:"-0.03em", margin:"0 0 20px", color:H.ink}}>
              <span style={{display:"block", fontSize: "clamp(38px,10.5vw,98px)"}}>게임과 문화AI</span>
              <span style={{display:"block", fontSize: "clamp(21px,4.6vw,44px)", marginTop:10}}><span style={{color:H.teal}}>‘지역균형발전’</span> 연구에 집중합니다.</span>
            </h1>
            <p style={{fontSize: isMobile ? 16 : 17, lineHeight:1.9, color:H.inkSoft, maxWidth:600, margin:"0 0 26px"}}>
              삼성전자 게임 PD로 200편이 넘는 타이틀을 만들고, 지스타를 총괄하고,
              지금은 동양대 게임학부에서 학생들과 매일 게임을 만듭니다. 게이미피케이션과 AI 창작을
              오가며 <b style={{color:H.ink}}>열두 권의 책</b>을 썼습니다.
            </p>
            <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <a href="#books" style={{background:H.dark, color:H.card, padding:"13px 22px", fontFamily:sans, fontWeight:700, fontSize:14}}>두 권의 신간 ▾</a>
              <a href="https://sites.google.com/view/jungtaekim" target="_blank" rel="noopener" style={{background:"transparent", color:H.ink, border:`1px solid ${H.rule2}`, padding:"13px 22px", fontFamily:sans, fontWeight:600, fontSize:14}}>공식 홈페이지 →</a>
            </div>
          </div>
          <div style={{display:"flex", justifyContent:"center"}}>
            <div style={{position:"relative", width: isMobile? 220 : 300}}>
              <div style={{aspectRatio:"3/4", background:`linear-gradient(160deg, ${H.dark}, #223140)`, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", boxShadow:`14px 14px 0 ${H.soft}, 0 30px 60px rgba(0,0,0,0.18)`}}>
                <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?96:130, color:H.card, lineHeight:1}}>金</div>
                <div style={{fontFamily:mono, fontSize:11, color:"rgba(255,255,255,0.55)", letterSpacing:".3em", marginTop:14}}>KIM JUNGTAE</div>
              </div>
              <div style={{position:"absolute", bottom:-14, left:-14, background:H.gold, color:"#fff", fontFamily:mono, fontSize:10, letterSpacing:".2em", padding:"6px 12px"}}>SINCE 1995</div>
            </div>
          </div>
        </div>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`, marginTop: isMobile?32:48}}>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr 1fr":"repeat(4,1fr)", borderTop:`1px solid ${H.rule}`, borderLeft:`1px solid ${H.rule}`}}>
            {stats.map(([n,l],i)=>(
              <div key={i} style={{padding: isMobile?"18px 16px":"22px 24px", borderRight:`1px solid ${H.rule}`, borderBottom:`1px solid ${H.rule}`}}>
                <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?30:40, color:H.teal, lineHeight:1}}>{n}</div>
                <div style={{fontFamily:mono, fontSize:11, color:H.inkMute, letterSpacing:".12em", marginTop:7}}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TWO BOOKS */}
      <section id="books" style={{padding: isMobile ? "44px 0" : "80px 0", scrollMarginTop:70}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {hubLabel("NEW · 2026")}
          <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(24px,5.4vw,46px)", letterSpacing:"-0.025em", margin:"0 0 34px", color:H.ink}}>올해, AI책 두권을 냈습니다</h2>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"1fr 1fr", gap: isMobile?18:24}}>
            <a href="/AIGame" style={{display:"block", background:H.dark, color:"#fff", overflow:"hidden", boxShadow:"0 20px 50px rgba(0,0,0,0.18)"}}>
              <div style={{display:"grid", gridTemplateColumns:"140px 1fr", gap:0}}>
                <div style={{background:"#0a1620", display:"flex", alignItems:"center", justifyContent:"center", padding:16}}>
                  <img src="/assets/figures/cover-final.png" alt="AI 게임 개발 시작" style={{width:"100%", height:"auto", imageRendering:"pixelated", boxShadow:"0 10px 24px rgba(0,0,0,0.5)"}}/>
                </div>
                <div style={{padding: isMobile?"20px 18px":"26px 24px", display:"flex", flexDirection:"column"}}>
                  <div style={{fontFamily:mono, fontSize:10, color:"#7DCFF0", letterSpacing:".2em", marginBottom:10}}>VOL.03 · 게임개발</div>
                  <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?20:23, lineHeight:1.25, marginBottom:8}}>AI 게임 개발 시작</div>
                  <p style={{fontSize:13, lineHeight:1.7, color:"rgba(255,255,255,0.72)", margin:"0 0 16px"}}>코딩을 몰라도, 그림을 못 그려도. AI와 함께 5 Part·20장으로 진짜 게임 한 편을 완주하는 입문서.</p>
                  <span style={{marginTop:"auto", fontFamily:sans, fontSize:13, fontWeight:700, color:"#7DCFF0"}}>사이트 들어가기 ▸</span>
                </div>
              </div>
            </a>
            <a href="/poll" style={{display:"block", background:P.bg, color:P.ink, overflow:"hidden", position:"relative", border:`1px solid ${P.rule2}`, boxShadow:"0 20px 50px rgba(0,0,0,0.28)"}}>
              {/* HUD grid texture + glow — echoes /poll */}
              <div style={{position:"absolute", inset:0, backgroundImage:`linear-gradient(${P.rule}66 1px, transparent 1px), linear-gradient(90deg, ${P.rule}66 1px, transparent 1px)`, backgroundSize:"22px 22px", opacity:0.5, pointerEvents:"none"}}/>
              <div style={{position:"absolute", inset:0, background:"radial-gradient(420px 260px at 82% 6%, rgba(53,198,244,0.18), transparent 62%), radial-gradient(360px 240px at 8% 100%, rgba(230,57,78,0.12), transparent 60%)", pointerEvents:"none"}}/>
              <div style={{position:"relative", display:"grid", gridTemplateColumns:"140px 1fr", gap:0}}>
                <div style={{background:"#05080f", display:"flex", alignItems:"center", justifyContent:"center", padding:12, position:"relative", borderRight:`1px solid ${P.rule}`}}>
                  <img src="/assets/figures/poll-cover.jpg" alt="AI 지방선거 해부" style={{width:"100%", height:"auto", boxShadow:"0 10px 24px rgba(0,0,0,0.6)"}}/>
                  <span style={{position:"absolute", top:8, left:8, background:P.red, color:"#fff", fontFamily:mono, fontSize:9, letterSpacing:".15em", padding:"3px 7px"}}>NEW</span>
                </div>
                <div style={{padding: isMobile?"20px 18px":"24px 24px", display:"flex", flexDirection:"column"}}>
                  <div style={{display:"inline-flex", alignItems:"center", gap:8, fontFamily:mono, fontSize:10, color:P.cyan, letterSpacing:".2em", marginBottom:11}}>
                    <span style={{width:18, height:1, background:P.cyan}}/>AI ELECTION DECODE
                  </div>
                  <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?20:23, lineHeight:1.25, marginBottom:8, color:"#fff"}}>AI 지방선거 <span style={{color:P.red}}>해부</span></div>
                  <p style={{fontSize:13, lineHeight:1.7, color:P.inkSoft, margin:"0 0 14px"}}>수천 개 선거구 데이터를 AI로 해부해 승패의 법칙과 대한민국 정치의 미래를 읽습니다.</p>
                  <div style={{display:"flex", gap:16, flexWrap:"wrap", marginBottom:16}}>
                    {[["SEATS","4,227"],["CANDIDATE","7,770"],["VOTES","27.2M"]].map(([k,v])=>(
                      <div key={k}>
                        <div style={{fontFamily:mono, fontSize:8.5, color:P.cyan, letterSpacing:".14em", marginBottom:3}}>{k}</div>
                        <div style={{fontFamily:serif, fontWeight:900, fontSize:16, color:"#fff", lineHeight:1}}>{v}</div>
                      </div>
                    ))}
                  </div>
                  <span style={{marginTop:"auto", fontFamily:sans, fontSize:13, fontWeight:700, color:P.cyan}}>자세히 보기 ▸</span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </section>

      {/* WORK */}
      <section id="work" style={{padding: isMobile ? "44px 0" : "72px 0", background:H.soft, borderTop:`1px solid ${H.rule}`, borderBottom:`1px solid ${H.rule}`, scrollMarginTop:70}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`,
          display:"grid", gridTemplateColumns: isMobile?"1fr":"0.9fr 1.1fr", gap: isMobile?28:56}}>
          <div>
            {hubLabel("CAREER · 약력")}
            <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(22px,4.7vw,40px)", letterSpacing:"-0.025em", margin:"0 0 16px", color:H.ink, lineHeight:1.2}}>
              30년 현장,<br/>그리고 연구실
            </h2>
            <p style={{fontSize:15, lineHeight:1.9, color:H.inkSoft, margin:0}}>
              게임 산업의 최전선에서 만들고, 지스타를 열고, 이제 대학에서 다음 세대와 함께
              AI 시대의 게임과 창작을 연구합니다.
            </p>
          </div>
          <div>
            {roles.map(([k,v],i)=>(
              <div key={i} style={{display:"grid", gridTemplateColumns:"64px 1fr", gap:16, padding:"14px 0", borderBottom: i<roles.length-1?`1px solid ${H.rule2}`:"none", alignItems:"baseline"}}>
                <span style={{fontFamily:mono, fontSize:11, color:H.gold, letterSpacing:".08em"}}>{k}</span>
                <span style={{fontSize:15, color:H.ink, lineHeight:1.6}}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BIBLIOGRAPHY + RESEARCH */}
      <section id="research" style={{padding: isMobile ? "44px 0 20px" : "80px 0 40px", scrollMarginTop:70}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`,
          display:"grid", gridTemplateColumns: isMobile?"1fr":"1.3fr 0.7fr", gap: isMobile?36:56}}>
          <div>
            {hubLabel("BIBLIOGRAPHY · 저서")}
            <h2 style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?26:34, letterSpacing:"-0.025em", margin:"0 0 24px", color:H.ink}}>펴낸 책들</h2>
            <div>
              {books.map(([y,t,pub,feat],i)=>(
                <div key={i} style={{display:"grid", gridTemplateColumns:"56px 1fr", gap:16, padding:"13px 0", borderTop:`1px solid ${H.rule}`, alignItems:"baseline"}}>
                  <span style={{fontFamily:mono, fontSize:12, color:H.inkMute}}>{y}</span>
                  <div style={{display:"flex", flexWrap:"wrap", alignItems:"baseline", gap:"0 10px"}}>
                    <span style={{fontSize:15.5, color:H.ink, fontWeight: feat?700:400, lineHeight:1.55}}>{t}</span>
                    {pub && <span style={{fontFamily:mono, fontSize:10.5, color: feat?H.teal:H.inkMute, letterSpacing:".05em"}}>· {pub}</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            {hubLabel("RESEARCH · 연구")}
            <div style={{background:H.dark, color:"#fff", padding: isMobile?"24px 22px":"30px 28px"}}>
              <div style={{fontFamily:serif, fontWeight:700, fontSize:19, marginBottom:18}}>연구 관심 분야</div>
              <div style={{display:"flex", flexWrap:"wrap", gap:8, marginBottom:26}}>
                {interests.map(t=>(
                  <span key={t} style={{padding:"6px 12px", border:"1px solid rgba(255,255,255,0.25)", fontFamily:sans, fontSize:13, color:"rgba(255,255,255,0.9)"}}>{t}</span>
                ))}
              </div>
              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:0, borderTop:"1px solid rgba(255,255,255,0.15)", paddingTop:20}}>
                {[["468","피인용"],["5","h-index"],["2","i10"]].map(([n,l])=>(
                  <div key={l}>
                    <div style={{fontFamily:serif, fontWeight:900, fontSize:28, color:"#7DCFF0", lineHeight:1}}>{n}</div>
                    <div style={{fontFamily:mono, fontSize:10, color:"rgba(255,255,255,0.6)", letterSpacing:".12em", marginTop:6}}>{l}</div>
                  </div>
                ))}
              </div>
              <div style={{display:"flex", flexDirection:"column", gap:8, marginTop:24}}>
                <a href="https://scholar.google.com/citations?user=VpKHWywAAAAJ" target="_blank" rel="noopener" style={{fontFamily:sans, fontSize:13, fontWeight:600, color:"#fff", borderBottom:"1px solid rgba(255,255,255,0.3)", paddingBottom:2, alignSelf:"flex-start"}}>Google Scholar →</a>
                <a href="https://sites.google.com/view/jungtaekim" target="_blank" rel="noopener" style={{fontFamily:sans, fontSize:13, fontWeight:600, color:"#fff", borderBottom:"1px solid rgba(255,255,255,0.3)", paddingBottom:2, alignSelf:"flex-start"}}>공식 홈페이지 →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <HubFooter/>
    </div>
  );
};

function HubFooter() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const maxW = 1500;
  return (
    <footer style={{background:H.dark, color:"rgba(255,255,255,0.75)", padding: isMobile?"36px 18px 28px":"48px clamp(24px,5vw,64px) 32px"}}>
      <div style={{maxWidth:maxW, margin:"0 auto", display:"grid", gridTemplateColumns: isMobile?"1fr":"1.4fr 1fr 1fr", gap: isMobile?24:40}}>
        <div>
          <div style={{fontFamily:serif, fontWeight:900, fontSize:20, color:"#fff", marginBottom:6}}>김정태 <span style={{fontFamily:mono, fontSize:11, color:H.gold, letterSpacing:".2em", marginLeft:6}}>JUNGTAE KIM</span></div>
          <div style={{fontSize:13, lineHeight:1.8, color:"rgba(255,255,255,0.6)"}}>동양대학교 게임학부 전임교수<br/>게임 · 게이미피케이션 · AI 창작 연구</div>
        </div>
        <div>
          <div style={{fontFamily:mono, fontSize:10, color:H.gold, letterSpacing:".2em", marginBottom:12}}>BOOKS</div>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            <a href="/AIGame" style={{fontSize:13, color:"rgba(255,255,255,0.8)"}}>AI 게임 개발 시작</a>
            <a href="/poll" style={{fontSize:13, color:"rgba(255,255,255,0.8)"}}>AI 지방선거 분석</a>
          </div>
        </div>
        <div>
          <div style={{fontFamily:mono, fontSize:10, color:H.gold, letterSpacing:".2em", marginBottom:12}}>LINKS</div>
          <div style={{display:"flex", flexDirection:"column", gap:8}}>
            <a href="https://scholar.google.com/citations?user=VpKHWywAAAAJ" target="_blank" rel="noopener" style={{fontSize:13, color:"rgba(255,255,255,0.8)"}}>Google Scholar</a>
            <a href="https://sites.google.com/view/jungtaekim" target="_blank" rel="noopener" style={{fontSize:13, color:"rgba(255,255,255,0.8)"}}>공식 홈페이지</a>
            <a href="/AIGame/contact" style={{fontSize:13, color:"rgba(255,255,255,0.8)"}}>문의하기</a>
          </div>
        </div>
      </div>
      <div style={{maxWidth:maxW, margin:"28px auto 0", paddingTop:18, borderTop:"1px solid rgba(255,255,255,0.12)", fontFamily:mono, fontSize:10.5, color:"rgba(255,255,255,0.45)", letterSpacing:".1em"}}>© 2026 김정태 · JUNGTAE KIM</div>
    </footer>
  );
}

// ═════════════════════════════════════════════
// POLL BOOK — 『AI 지방선거 해부』  (cover tone: dark HUD / data-viz)
// Pages: SitePoll(/poll) · SitePollContents(/poll/contents) · SitePollHighlights(/poll/highlights)
// ═════════════════════════════════════════════
const P = {
  bg:"#070b14", bg2:"#0d1524", bg3:"#111c30", panel:"rgba(19,32,54,0.55)",
  ink:"#eaf1fb", inkSoft:"#a9b8cd", inkMute:"#6d8299",
  cyan:"#35c6f4", cyanDeep:"#1f8fc0", blue:"#3d6ee0", red:"#e6394e",
  violet:"#8b4fd6", gold:"#f2b134", gray:"#7a8aa0",
  rule:"#1a2740", rule2:"#26385a",
};

function PollNav({ active }) {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const [open,setOpen] = React.useState(false);
  const items = [["about","/poll/about","책 소개"],["contents","/poll/contents","목차"],["highlights","/poll/highlights","핵심 발견"],["faq","/poll/faq","Q&A"],["contact","/poll/contact","문의"],["home","/","← 김정태"]];
  return (
    <nav style={{position:"sticky", top:0, zIndex:50, background:"rgba(7,11,20,0.9)", backdropFilter:"blur(10px)",
      borderBottom:`1px solid ${P.rule}`, padding: isMobile?"0 18px":"0 clamp(24px,5vw,64px)", height:isMobile?58:66,
      display:"flex", alignItems:"center", justifyContent:"space-between"}}>
      <a href="/poll" style={{display:"flex", alignItems:"center", gap:11}}>
        <div style={{width:32, height:32, background:P.cyan, color:P.bg, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:serif, fontWeight:900, fontSize:18}}>金</div>
        <div>
          <div style={{fontFamily:serif, fontWeight:800, fontSize:15, color:"#fff", lineHeight:1.05}}>AI 지방선거 해부</div>
          <div style={{fontFamily:mono, fontSize:8.5, color:P.cyan, letterSpacing:".22em", marginTop:2}}>AI ELECTION DECODE</div>
        </div>
      </a>
      {!isMobile ? (
        <div style={{display:"flex", alignItems:"center", gap:22}}>
          {items.map(([k,h,t])=>(<a key={k} href={h} style={{fontFamily:sans, fontSize:13.5, fontWeight: active===k?700:500, color: active===k?P.cyan:P.inkSoft}}>{t}</a>))}
          <a href="/poll/order" style={{background:P.cyan, color:P.bg, padding:"9px 18px", fontFamily:sans, fontWeight:900, fontSize:13, marginLeft:2}}>책 구매하기 ▸</a>
        </div>
      ) : (
        <button onClick={()=>setOpen(o=>!o)} style={{background:"transparent", border:`1px solid ${P.rule2}`, color:P.ink, width:38, height:38, fontSize:18, cursor:"pointer"}}>{open?"✕":"☰"}</button>
      )}
      {isMobile && open && (
        <div style={{position:"absolute", top:58, left:0, right:0, background:P.bg2, borderBottom:`1px solid ${P.rule}`, paddingBottom:14}}>
          {items.map(([k,h,t])=>(<a key={k} href={h} onClick={()=>setOpen(false)} style={{display:"block", padding:"15px 20px", fontSize:15, color: active===k?P.cyan:P.inkSoft, borderBottom:`1px solid ${P.rule}`}}>{t}</a>))}
          <a href="/poll/order" onClick={()=>setOpen(false)} style={{display:"block", margin:"14px 20px 2px", background:P.cyan, color:P.bg, textAlign:"center", padding:"13px", fontFamily:sans, fontWeight:900, fontSize:15}}>책 구매하기 ▸</a>
        </div>
      )}
    </nav>
  );
}

function PollDonut({ data, size=176, stroke=28 }) {
  const r = (size-stroke)/2, C = 2*Math.PI*r;
  let acc = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{transform:"rotate(-90deg)"}}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={stroke}/>
      {data.map(([name,pct,color],i)=>{
        const len = C*pct/100;
        const el = (<circle key={i} cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeDasharray={`${len} ${C-len}`} strokeDashoffset={-C*acc/100}/>);
        acc += pct; return el;
      })}
    </svg>
  );
}

const pLabel = (t, color) => (
  <div style={{display:"inline-flex", alignItems:"center", gap:8, fontFamily:mono, fontSize:11, color:color||P.cyan, letterSpacing:".24em", marginBottom:16}}>
    <span style={{width:22, height:1, background:color||P.cyan}}/>{t}
  </div>
);

// 5부 구조
const POLL_PARTS = [
  ["01","출구조사는 어땠나","예측이 무너진 밤","서울·경남에서 방향째 뒤집힌 예측을 부검한다."],
  ["02","열네 개의 빈자리","국회의원 재보궐","가장 먼저 도착한 성적표 — 14곳의 미니 총선."],
  ["03","열여섯 개의 왕좌","광역단체장","압승의 표면 아래 어른거리는 '빛바랜 승리'."],
  ["04","227개의 골목","기초단체장","골목까지 내려가 확인한 디커플링과 균열."],
  ["05","민심의 귀결과 미래","견제와 균형 · 2028","흩어진 조각이 하나의 의지로 모이다."],
];
// 핵심 발견
const POLL_FINDS = [
  ["28 · 60","아무도 웃지 못한 밤","여당은 광역 16곳 중 12곳을 가져갔지만, 결과 만족은 28%·불만족 60%. 이긴 쪽도 진 쪽도 웃지 못했다.", P.gold],
  ["2곳 역전","출구조사가 뒤집힌 자리","가장 확신했던 서울과 경남에서 예측은 정반대를 가리켰다. 광역 예측이 하룻밤 두 곳 빗나간 것은 처음.", P.red],
  ["자산 > 이념","서울의 진짜 균열선","2026 서울의 분단선은 진보-보수가 아니라 '아파트 한 채'였다. 조사가 붙들지 못한 침묵의 표심.", P.cyan],
  ["20 · 40 · 60","세대와 성별의 단층","스무 살에서 갈라지고 예순에서 뒤집히며, 마흔과 쉰이 떠받치는 표심의 지층.", P.blue],
  ["12 : 4","빛바랜 승리","유권자는 이기게 하되, 이긴 자를 묶었다. 압승과 견제선은 하나의 의지가 남긴 앞면과 뒷면.", P.violet],
  ["예측 → 해부","다음은 2028","예측은 '누가 이기나', 해부는 '이 세계를 어떻게 설계하나'. 예측은 무너져도, 해부는 남는다.", P.cyan],
];

window.SitePoll = function SitePoll() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const isTablet = bp === 'tablet';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;

  const matrix = [
    ["SEATS","4,227","선출 정수 · 당선인"],
    ["POLLING PLACE","14,288","선거일 투표소"],
    ["CANDIDATE","7,770","등록 후보자"],
    ["VOTERS","44,649,908","선거인"],
    ["VOTES","27,249,586","투표수 · 투표율 61.0%"],
  ];
  const questions = [
    ["01","어디서 표가 움직였는가?","지역·세대·이슈별 지지 변경을 데이터로 추적한다."],
    ["02","왜 결과가 달라졌는가?","숨은 변수와 승패를 가른 결정적 순간을 해부한다."],
    ["03","다음 선거는 어떻게 될까?","AI 시뮬레이션으로 2028의 시나리오를 예측한다."],
  ];
  const parties = [["더불어민주당",45.2,P.blue],["국민의힘",37.1,P.red],["정의당",4.3,P.gold],["기타·무소속",13.4,P.gray]];
  const caps = ["AI 분석","빅데이터","시뮬레이션","지역 인사이트","전망·전략"];

  const gridBg = {
    backgroundImage:`linear-gradient(${P.rule}55 1px, transparent 1px), linear-gradient(90deg, ${P.rule}55 1px, transparent 1px)`,
    backgroundSize:"26px 26px",
  };

  return (
    <div style={{background:P.bg, color:P.ink, fontFamily:sans, position:"relative"}}>
      <PollNav active="intro"/>

      {/* HERO */}
      <section style={{position:"relative", overflow:"hidden",
        background:`radial-gradient(700px 500px at 12% 20%, rgba(53,198,244,0.14), transparent 60%),
                   radial-gradient(700px 600px at 88% 40%, rgba(230,57,78,0.12), transparent 60%),
                   radial-gradient(600px 500px at 60% 90%, rgba(61,110,224,0.12), transparent 60%)`}}>
        <div style={{position:"absolute", inset:0, ...gridBg, opacity:0.5, pointerEvents:"none"}}/>
        <div style={{position:"relative", zIndex:2, maxWidth:maxW, margin:"0 auto", padding:`${isMobile?"40px":"70px"} ${px} ${isMobile?"44px":"64px"}`,
          display:"grid", gridTemplateColumns: isMobile?"1fr":"1.25fr 0.9fr", gap: isMobile?36:56, alignItems:"center"}}>
          <div style={{order:isMobile?2:1}}>
            <div style={{fontFamily:mono, fontSize: isMobile?10.5:11.5, color:P.cyan, letterSpacing:".24em", marginBottom:18, lineHeight:1.7}}>
              AI ELECTION DECODE<br/><span style={{color:P.inkMute}}>MODEL · K-LOCAL ELECTION AI v2.6</span>
            </div>
            <h1 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(40px,10.6vw,90px)", lineHeight:1.02, letterSpacing:"-0.03em", margin:"0 0 20px"}}>
              <span style={{color:P.cyan, textShadow:`0 0 40px rgba(53,198,244,0.5)`}}>AI</span><br/>
              지방선거 <span style={{color:P.red}}>해부</span>
            </h1>
            <p style={{fontFamily:serif, fontSize: isMobile?17:20, lineHeight:1.6, color:P.ink, margin:"0 0 10px"}}>
              데이터가 밝히는 <b style={{color:P.cyan}}>승패의 법칙</b>과 대한민국 정치의 미래
            </p>
            <p style={{fontSize: isMobile?14:15, lineHeight:1.8, color:P.inkSoft, margin:"0 0 26px"}}>
              14 국회의원(재보궐) · 16개 광역단체 · 227개 기초단체(시·군·구) · 수천 개 선거구 데이터를 AI로 해부하다.
            </p>
            <div style={{display:"flex", gap:14, flexWrap:"wrap", marginBottom:22}}>
              {[["값","30,000원"],["ISBN","979-11-979949-3-7"],["출간","2026.07"]].map(([k,v])=>(
                <div key={k} style={{fontFamily:mono, fontSize:11, color:P.inkMute, letterSpacing:".08em"}}>
                  <span style={{color:P.cyan}}>{k}</span> &nbsp;<span style={{color:P.ink}}>{v}</span>
                </div>
              ))}
            </div>
            <div style={{display:"flex", gap:10, flexWrap:"wrap"}}>
              <a href="/poll/highlights" style={{background:P.cyan, color:P.bg, padding:"13px 24px", fontFamily:sans, fontWeight:900, fontSize:14}}>핵심 발견 보기 ▸</a>
              <a href="/poll/about" style={{background:"transparent", color:P.ink, border:`1px solid ${P.rule2}`, padding:"13px 24px", fontFamily:sans, fontWeight:600, fontSize:14}}>책 소개 →</a>
              <a href="/poll/contents" style={{background:"transparent", color:P.ink, border:`1px solid ${P.rule2}`, padding:"13px 24px", fontFamily:sans, fontWeight:600, fontSize:14}}>목차 →</a>
            </div>
          </div>
          <div style={{order:isMobile?1:2, display:"flex", justifyContent:"center", position:"relative"}}>
            <div style={{position:"absolute", inset:-24, background:"radial-gradient(closest-side, rgba(53,198,244,0.28), transparent 72%)", filter:"blur(24px)"}}/>
            <div style={{position:"relative", width: isMobile?260:"100%", maxWidth:360, boxShadow:`0 40px 90px rgba(0,0,0,0.7), 0 0 0 1px ${P.rule2}`}}>
              <img src="/assets/figures/poll-cover.jpg" alt="AI 지방선거 해부 표지" style={{width:"100%", display:"block"}}/>
            </div>
          </div>
        </div>
      </section>

      {/* DATA MATRIX */}
      <section style={{borderTop:`1px solid ${P.rule}`, borderBottom:`1px solid ${P.rule}`, background:P.bg2}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`${isMobile?"26px":"30px"} ${px}`}}>
          {pLabel("LOCAL ELECTION DATA MATRIX")}
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr 1fr":"repeat(5,1fr)", gap: isMobile?12:0}}>
            {matrix.map(([k,v,d],i)=>(
              <div key={k} style={{padding: isMobile?"6px 4px":"6px 22px", borderRight: !isMobile && i<4?`1px solid ${P.rule}`:"none"}}>
                <div style={{fontFamily:mono, fontSize:9.5, color:P.cyan, letterSpacing:".16em", marginBottom:8}}>{k}</div>
                <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?24:"clamp(24px,2.4vw,34px)", color:"#fff", lineHeight:1, letterSpacing:"-0.02em"}}>{v}</div>
                <div style={{fontSize:12, color:P.inkMute, marginTop:6}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 5 PARTS */}
      <section style={{padding: isMobile?"48px 0":"84px 0"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("STRUCTURE · 다섯 개의 부")}
          <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(24px,5.2vw,44px)", letterSpacing:"-0.025em", margin:"0 0 12px"}}>다섯 개의 부, 하나의 해부</h2>
          <p style={{fontSize:15, color:P.inkSoft, lineHeight:1.8, maxWidth:640, margin:"0 0 34px"}}>출구조사의 붕괴에서 2028의 지형까지 — 2026 지방선거를 다섯 층으로 해부합니다.</p>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"1fr 1fr", gap:12}}>
            {POLL_PARTS.map(([n,t,tag,d])=>(
              <a key={n} href="/poll/contents" style={{display:"block", background:P.bg2, border:`1px solid ${P.rule}`, padding:"22px 24px", position:"relative", overflow:"hidden"}}>
                <div style={{display:"flex", alignItems:"baseline", gap:14}}>
                  <span style={{fontFamily:serif, fontWeight:900, fontSize:34, color:P.cyan, lineHeight:1, opacity:0.85, minWidth:52}}>{n}</span>
                  <div>
                    <div style={{display:"flex", alignItems:"baseline", gap:10, flexWrap:"wrap"}}>
                      <span style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?18:20, color:"#fff"}}>{t}</span>
                      <span style={{fontFamily:mono, fontSize:10, color:P.inkMute, letterSpacing:".1em"}}>{tag}</span>
                    </div>
                    <div style={{fontSize:13.5, color:P.inkSoft, lineHeight:1.6, marginTop:6}}>{d}</div>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* AI INSIGHT */}
      <section style={{padding: isMobile?"48px 0":"84px 0", background:P.bg2, borderTop:`1px solid ${P.rule}`, borderBottom:`1px solid ${P.rule}`}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("AI INSIGHT · 이 책이 답하는 질문", P.red)}
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"repeat(3,1fr)", gap:16}}>
            {questions.map(([n,q,a])=>(
              <div key={n} style={{background:P.bg, border:`1px solid ${P.rule}`, borderTop:`3px solid ${P.cyan}`, padding: isMobile?"26px 22px":"32px 26px"}}>
                <div style={{fontFamily:mono, fontSize:12, color:P.cyan, letterSpacing:".2em", marginBottom:16}}>Q{n}</div>
                <div style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?21:22, color:"#fff", lineHeight:1.35, marginBottom:12}}>{q}</div>
                <div style={{fontSize:14, color:P.inkSoft, lineHeight:1.75}}>{a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* KEY FINDINGS PREVIEW */}
      <section style={{padding: isMobile?"48px 0":"84px 0"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom:30, flexWrap:"wrap", gap:12}}>
            <div>
              {pLabel("KEY FINDINGS · 핵심 발견")}
              <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(22px,4.7vw,40px)", letterSpacing:"-0.025em", margin:0}}>데이터가 드러낸 것들</h2>
            </div>
            <a href="/poll/highlights" style={{fontFamily:sans, fontSize:13, fontWeight:700, color:P.cyan}}>전체 보기 ▸</a>
          </div>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"repeat(3,1fr)", gap:14}}>
            {POLL_FINDS.slice(0,3).map(([stat,t,d,c])=>(
              <div key={t} style={{background:P.bg2, border:`1px solid ${P.rule}`, padding:"24px 22px"}}>
                <div style={{fontFamily:serif, fontWeight:900, fontSize:30, color:c, lineHeight:1, marginBottom:14}}>{stat}</div>
                <div style={{fontFamily:serif, fontWeight:700, fontSize:18, color:"#fff", marginBottom:8}}>{t}</div>
                <div style={{fontSize:13.5, color:P.inkSoft, lineHeight:1.65}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VOTE DISTRIBUTION */}
      <section style={{padding: isMobile?"48px 0":"80px 0", background:P.bg2, borderTop:`1px solid ${P.rule}`}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`,
          display:"grid", gridTemplateColumns: isMobile?"1fr":"0.8fr 1.2fr", gap: isMobile?32:56, alignItems:"center"}}>
          <div style={{display:"flex", justifyContent:"center", position:"relative"}}>
            <div style={{position:"relative"}}>
              <PollDonut data={parties}/>
              <div style={{position:"absolute", inset:0, display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
                <div style={{fontFamily:mono, fontSize:9, color:P.cyan, letterSpacing:".2em"}}>VOTE SHARE</div>
                <div style={{fontFamily:serif, fontWeight:900, fontSize:30, color:"#fff", lineHeight:1}}>득표율</div>
              </div>
            </div>
          </div>
          <div>
            {pLabel("VOTE FLOW · REAL-TIME SIMULATION")}
            <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(22px,4.7vw,40px)", letterSpacing:"-0.025em", margin:"0 0 20px"}}>표는 어떻게 나뉘었나</h2>
            <div style={{display:"flex", flexDirection:"column", gap:12}}>
              {parties.map(([name,pct,color])=>(
                <div key={name}>
                  <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:6}}>
                    <span style={{fontSize:14, color:P.ink, display:"flex", alignItems:"center", gap:9}}>
                      <span style={{width:11, height:11, background:color, display:"inline-block"}}/>{name}
                    </span>
                    <span style={{fontFamily:mono, fontSize:14, color:"#fff", fontWeight:700}}>{pct.toFixed(1)}%</span>
                  </div>
                  <div style={{height:6, background:"rgba(255,255,255,0.06)"}}>
                    <div style={{height:"100%", width:`${pct}%`, background:color}}/>
                  </div>
                </div>
              ))}
            </div>
            <div style={{marginTop:18, fontFamily:mono, fontSize:11, color:P.inkMute, letterSpacing:".05em", lineHeight:1.7}}>* 표지 콘셉트 데이터 · 실제 분석 수치는 본문에서 다룹니다.</div>
          </div>
        </div>
      </section>

      {/* QUOTE */}
      <section style={{padding: isMobile?"52px 0":"96px 0", background:`linear-gradient(180deg, ${P.bg}, ${P.bg3})`, borderTop:`1px solid ${P.rule}`, textAlign:"center", position:"relative", overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0, ...gridBg, opacity:0.3, pointerEvents:"none"}}/>
        <div style={{position:"relative", maxWidth:820, margin:"0 auto", padding:`0 ${px}`}}>
          <div style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(28px,6.6vw,56px)", lineHeight:1.35, letterSpacing:"-0.02em", color:"#fff"}}>
            예측은 <span style={{color:P.red}}>무너져도</span>,<br/>해부는 <span style={{color:P.cyan}}>남는다</span>.
          </div>
          <div style={{marginTop:22, fontFamily:mono, fontSize:12, color:P.inkMute, letterSpacing:".2em"}}>— 닫는 글, 다섯 개의 부 하나의 문장</div>
        </div>
      </section>

      {/* CAPABILITIES + BOOK INFO */}
      <section style={{padding: isMobile?"48px 0":"80px 0"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"repeat(2,1fr)":"repeat(5,1fr)", gap:12, marginBottom: isMobile?40:56}}>
            {caps.map((c,i)=>(
              <div key={c} style={{border:`1px solid ${P.rule}`, padding:"18px 14px", textAlign:"center", background:P.bg2}}>
                <div style={{fontFamily:mono, fontSize:10, color:P.cyan, letterSpacing:".14em", marginBottom:8}}>{String(i+1).padStart(2,"0")}</div>
                <div style={{fontSize:14, fontWeight:600, color:"#fff"}}>{c}</div>
              </div>
            ))}
          </div>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"1fr 1fr", gap: isMobile?28:56, alignItems:"center", background:P.bg2, border:`1px solid ${P.rule}`, padding: isMobile?"26px 22px":"40px 44px"}}>
            <div>
              {pLabel("ABOUT THE BOOK")}
              <h2 style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?24:30, letterSpacing:"-0.02em", margin:"0 0 16px", color:"#fff"}}>AI 지방선거 해부</h2>
              <p style={{fontSize:14.5, color:P.inkSoft, lineHeight:1.85, margin:0}}>
                2026년 6월 3일, 압승으로 기록됐지만 아무도 웃지 못한 밤. 수천 개 선거구의 데이터를
                AI로 해부해 표심이 움직인 지점과 승패를 가른 변수를 드러내고, '견제와 균형'이라는
                하나의 의지를 읽어냅니다.
              </p>
            </div>
            <div>
              {[["저자","김정태 · 동양대학교 AI게임융합전공 교수"],["발행","사단법인 게이미피케이션포럼 · 2026.07.07"],["값","30,000원"],["ISBN","979-11-979949-3-7"]].map(([k,v])=>(
                <div key={k} style={{display:"grid", gridTemplateColumns:"64px 1fr", gap:14, padding:"12px 0", borderBottom:`1px solid ${P.rule}`}}>
                  <span style={{fontFamily:mono, fontSize:10, color:P.cyan, letterSpacing:".12em", paddingTop:2}}>{k.toUpperCase()}</span>
                  <span style={{fontSize:14, color:P.ink, lineHeight:1.5}}>{v}</span>
                </div>
              ))}
              <div style={{display:"flex", gap:10, flexWrap:"wrap", marginTop:18}}>
                <a href="/poll/about" style={{background:P.cyan, color:P.bg, padding:"12px 22px", fontFamily:sans, fontWeight:900, fontSize:13}}>책 소개 자세히 ▸</a>
                <a href="/poll/contact" style={{background:"transparent", color:P.ink, border:`1px solid ${P.rule2}`, padding:"12px 22px", fontFamily:sans, fontWeight:600, fontSize:13}}>도서·강연 문의 →</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <PollFooter/>
    </div>
  );
};

// ─────────────────────────────────────────────
// /poll/contents — 목차
// ─────────────────────────────────────────────
const POLL_TOC = [
  {p:"01", title:"출구조사는 어땠나", sub:"예측이 무너진 밤, 그리고 민심의 해부", page:"06",
   items:["여는 글 — 예측이라는 낡은 지도","1장 · 예측이 무너진 밤 — 출구조사라는 착시","2장 · 세대와 성별의 지도 — 열여섯 개의 단층 촬영","3장 · AI는 실제와 얼마나 가까웠나 — 예측의 성적표"]},
  {p:"02", title:"열네 개의 빈자리", sub:"국회의원 재보궐", page:"85",
   items:["여는 글 — 가장 먼저 도착한 성적표","1장 · 열네 개의 빈자리 — 미니 총선의 탄생","2장 · 두 개의 전장 — 북구갑과 평택을","3장 · 살얼음 위의 세 곳 — 하남갑·공주·울산 남구갑","4장 · 귀환의 세 얼굴 — 송영길·김의겸·김남국","5장 · 대통령의 사람들 — 계양을·아산을·서귀포","6장 · 요새의 문법 — 그리고 열네 개의 결산"]},
  {p:"03", title:"열여섯 개의 왕좌", sub:"광역단체장", page:"162",
   items:["여는 글 — 하나의 숫자가 감추는 열여섯 개의 이야기","1장 · 텃밭도 안에서 갈라진다 — 호남·제주","2장 · 심판의 지대 — 충청","3장 · 붉은 요새, 갈라진 금 — 대구·경북·경남","4장 · 탈환, 동해안을 따라 — 부산·울산·강원","5장 · 수도권, 그리고 심장 하나 — 경기·인천·서울","총론 — 열여섯 개의 결산"]},
  {p:"04", title:"227개의 골목", sub:"기초단체장", page:"245",
   items:["여는 글 — 하나의 스코어가 감추는 227개의 표정","1장 · 심판은 어디까지 내려갔나 — 충청","2장 · 텃밭도 골목마다 다르다 — 호남·제주","3장 · 진자는 어디서 멎었나 — 부산·울산·경남","4장 · 요새의 두 얼굴 — 대구·경북·강원","5장 · 디커플링, 수도권에서 폭발하다 — 경기·인천·서울","6장 · 227 기초장, 에디트하다"]},
  {p:"05", title:"민심의 귀결과 미래", sub:"견제와 균형, 그리고 2028", page:"310",
   items:["1장 · 2026 지방선거, 에디트하다 — 민심의 복합 방정식","2장 · 견제와 균형을 요구한 표심","3장 · 2028을 향하여 — 견제는 이어질 것인가","4장 · 예측에서 해부로 — 새로운 분석의 지평","닫는 글 — 다섯 개의 부, 하나의 문장"]},
];

window.SitePollContents = function SitePollContents() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;
  return (
    <div style={{background:P.bg, color:P.ink, fontFamily:sans, minHeight:"100vh"}}>
      <PollNav active="contents"/>
      <section style={{padding: isMobile?"40px 0 24px":"64px 0 32px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("TABLE OF CONTENTS · 차례")}
          <h1 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(30px,6.8vw,58px)", letterSpacing:"-0.03em", margin:"0 0 14px"}}>목차</h1>
          <p style={{fontSize: isMobile?15:16, color:P.inkSoft, lineHeight:1.8, maxWidth:640, margin:0}}>
            5부 · 25개 장으로 2026 지방선거를 해부합니다. 출구조사의 붕괴에서 2028의 지형까지.
          </p>
        </div>
      </section>
      <section style={{padding: isMobile?"8px 0 60px":"16px 0 90px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {POLL_TOC.map((part)=>(
            <div key={part.p} style={{marginBottom: isMobile?28:40}}>
              <div style={{display:"grid", gridTemplateColumns:"auto 1fr auto", gap:16, alignItems:"baseline", paddingBottom:14, borderBottom:`2px solid ${P.cyan}`, marginBottom:6}}>
                <span style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?30:40, color:P.cyan, lineHeight:1}}>{part.p}</span>
                <div>
                  <div style={{fontFamily:mono, fontSize:10, color:P.inkMute, letterSpacing:".2em", marginBottom:5}}>제{part.p}부 · {part.sub}</div>
                  <h2 style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?20:26, color:"#fff", margin:0, letterSpacing:"-0.02em"}}>{part.title}</h2>
                </div>
                <span style={{fontFamily:mono, fontSize:12, color:P.inkMute}}>p.{part.page}</span>
              </div>
              {part.items.map((it,i)=>(
                <div key={i} style={{display:"flex", gap:12, padding: isMobile?"11px 4px":"12px 8px", borderBottom:`1px solid ${P.rule}`, alignItems:"baseline"}}>
                  <span style={{width:6, height:6, background: it.startsWith("여는")||it.startsWith("닫는")||it.startsWith("총론")?P.gold:P.cyan, flexShrink:0, transform:"translateY(-2px)"}}/>
                  <span style={{fontSize: isMobile?14.5:15, color: it.startsWith("여는")||it.startsWith("닫는")||it.startsWith("총론")?P.inkSoft:P.ink, lineHeight:1.55, fontStyle: it.startsWith("여는")||it.startsWith("닫는")||it.startsWith("총론")?"italic":"normal"}}>{it}</span>
                </div>
              ))}
            </div>
          ))}
          <div style={{marginTop:32, display:"flex", gap:10, flexWrap:"wrap"}}>
            <a href="/poll/highlights" style={{background:P.cyan, color:P.bg, padding:"13px 24px", fontFamily:sans, fontWeight:900, fontSize:14}}>핵심 발견 보기 ▸</a>
            <a href="/poll" style={{background:"transparent", color:P.ink, border:`1px solid ${P.rule2}`, padding:"13px 24px", fontFamily:sans, fontWeight:600, fontSize:14}}>← 소개로</a>
          </div>
        </div>
      </section>
      <PollFooter/>
    </div>
  );
};

// ─────────────────────────────────────────────
// /poll/highlights — 핵심 발견
// ─────────────────────────────────────────────
window.SitePollHighlights = function SitePollHighlights() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;
  const gridBg = {
    backgroundImage:`linear-gradient(${P.rule}55 1px, transparent 1px), linear-gradient(90deg, ${P.rule}55 1px, transparent 1px)`,
    backgroundSize:"26px 26px",
  };
  return (
    <div style={{background:P.bg, color:P.ink, fontFamily:sans, minHeight:"100vh"}}>
      <PollNav active="highlights"/>
      <section style={{position:"relative", overflow:"hidden", padding: isMobile?"44px 0 30px":"70px 0 44px",
        background:`radial-gradient(600px 400px at 20% 20%, rgba(53,198,244,0.12), transparent 60%), radial-gradient(600px 400px at 85% 30%, rgba(230,57,78,0.10), transparent 60%)`}}>
        <div style={{position:"absolute", inset:0, ...gridBg, opacity:0.4, pointerEvents:"none"}}/>
        <div style={{position:"relative", maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("KEY FINDINGS · 핵심 발견")}
          <h1 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(30px,7.1vw,60px)", letterSpacing:"-0.03em", margin:"0 0 14px"}}>데이터가 드러낸 것들</h1>
          <p style={{fontSize: isMobile?15:16, color:P.inkSoft, lineHeight:1.85, maxWidth:660, margin:0}}>
            압승의 밤이 감춘 여섯 개의 진실. 출구조사가 놓친 표심을 AI가 해부해 건져 올렸습니다.
          </p>
        </div>
      </section>
      <section style={{padding: isMobile?"12px 0 64px":"24px 0 96px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`, display:"grid", gridTemplateColumns:"1fr", gap:16}}>
          {POLL_FINDS.map(([stat,t,d,c],i)=>(
            <div key={t} style={{background:P.bg2, border:`1px solid ${P.rule}`, borderLeft:`3px solid ${c}`, padding: isMobile?"24px 20px":"30px 34px",
              display:"grid", gridTemplateColumns: isMobile?"1fr":"200px 1fr", gap: isMobile?12:32, alignItems:"center"}}>
              <div>
                <div style={{fontFamily:mono, fontSize:10, color:P.inkMute, letterSpacing:".2em", marginBottom:8}}>FINDING {String(i+1).padStart(2,"0")}</div>
                <div style={{fontFamily:serif, fontWeight:900, fontSize: isMobile?32:40, color:c, lineHeight:1.05, letterSpacing:"-0.02em", wordBreak:"keep-all"}}>{stat}</div>
              </div>
              <div>
                <div style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?20:24, color:"#fff", marginBottom:10}}>{t}</div>
                <div style={{fontSize: isMobile?14.5:15.5, color:P.inkSoft, lineHeight:1.8}}>{d}</div>
              </div>
            </div>
          ))}
          <div style={{marginTop:20, display:"flex", gap:10, flexWrap:"wrap"}}>
            <a href="/poll/contents" style={{background:P.cyan, color:P.bg, padding:"13px 24px", fontFamily:sans, fontWeight:900, fontSize:14}}>목차 보기 ▸</a>
            <a href="/poll" style={{background:"transparent", color:P.ink, border:`1px solid ${P.rule2}`, padding:"13px 24px", fontFamily:sans, fontWeight:600, fontSize:14}}>← 소개로</a>
          </div>
        </div>
      </section>
      <PollFooter/>
    </div>
  );
};

// ─────────────────────────────────────────────
// Shared purchase band (stores TBD — wired to 문의 for now)
// ─────────────────────────────────────────────
function PollBuy({ isMobile }) {
  const stores = ["교보문고","예스24","알라딘","영풍문고","리디북스"];
  return (
    <div>
      <div style={{display:"flex", gap:9, flexWrap:"wrap", alignItems:"center"}}>
        <a href="/poll/order" style={{background:P.cyan, color:P.bg, padding: isMobile?"12px 20px":"14px 26px", fontFamily:sans, fontWeight:900, fontSize:14, textDecoration:"none", display:"inline-block"}}>책 구매하기 ▸</a>
        {/* TODO: 실제 온라인 서점 URL 입수 시 각 스토어를 <a href=…>로 연결 */}
        {stores.map(s=>(
          <span key={s} title="온라인 서점 링크 준비 중" style={{color:P.inkMute, border:`1px solid ${P.rule2}`, padding: isMobile?"11px 13px":"13px 20px", fontFamily:sans, fontWeight:600, fontSize:13, opacity:0.5, cursor:"not-allowed"}}>{s}</span>
        ))}
      </div>
      <div style={{marginTop:12, fontFamily:mono, fontSize:11, color:P.inkMute, letterSpacing:".04em", lineHeight:1.7}}>* [책 구매하기]에서 계좌 입금 후 주문하시면 입금 확인 후 배송해 드립니다. 온라인 서점 판매는 준비 중입니다.</div>
    </div>
  );
}

// ─────────────────────────────────────────────
// /poll/about — 책 소개 (mirrors /AIGame 책소개 depth, poll HUD theme)
// ─────────────────────────────────────────────
const POLL_FOR = [
  ["시민·유권자","압승으로 기록된 밤의 진짜 표심을, 진영 논리 없이 데이터로 이해하고 싶은 분."],
  ["정치·언론 실무자","선거구 단위의 흐름과 변수를 근거로 브리핑·기사·전략에 쓰고 싶은 분."],
  ["연구자·학생","AI와 데이터로 사회현상을 읽는 방법론을 실제 사례로 배우고 싶은 분."],
  ["전략가·캠프","2028을 향해 '견제와 균형'의 신호를 미리 읽고 대비하려는 분."],
];
const POLL_METHOD = [
  ["01","공개 데이터 기반","중앙선관위 공표 자료 등 공개 선거 데이터를 출발점으로 삼습니다."],
  ["02","AI 교차분석","수천 개 선거구 · 세대 · 이슈 변수를 교차해 사람이 놓친 패턴과 이상치를 찾습니다."],
  ["03","예측이 아닌 해부","'누가 이기나'가 아니라 '왜 그렇게 되었나'를 사후에 규명합니다."],
  ["04","구조를 읽기","흩어진 결과를 '견제와 균형'이라는 하나의 표심 구조로 엮어냅니다."],
];

window.SitePollAbout = function SitePollAbout() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;
  const meta = [["저자","김정태"],["발행","게이미피케이션포럼"],["출간","2026.07.07"],["값","30,000원"],["ISBN","979-11-979949-3-7"]];
  return (
    <div style={{background:P.bg, color:P.ink, fontFamily:sans, minHeight:"100vh"}}>
      <PollNav active="about"/>

      {/* BOOK HERO */}
      <section style={{background:P.bg2, borderBottom:`1px solid ${P.rule}`, padding: isMobile?"36px 0 40px":"64px 0"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`,
          display:"grid", gridTemplateColumns: isMobile?"1fr":"320px 1fr", gap: isMobile?28:56, alignItems:"flex-start"}}>
          <div style={{width: isMobile?200:320, margin: isMobile?"0 auto":0, position:"relative",
            boxShadow:`0 30px 80px rgba(0,0,0,0.6), 10px 10px 0 ${P.cyan}`, border:`1px solid ${P.rule2}`}}>
            <img src="/assets/figures/poll-cover.jpg" alt="AI 지방선거 해부 표지" style={{width:"100%", display:"block"}}/>
          </div>
          <div>
            <div style={{fontFamily:mono, fontSize: isMobile?10.5:11.5, color:P.cyan, letterSpacing:".26em", marginBottom:12}}>AI ELECTION DECODE · 책 소개</div>
            <h1 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(34px,7.8vw,66px)", lineHeight:1.04, letterSpacing:"-0.03em", margin:"0 0 8px", color:"#fff"}}>
              AI 지방선거 <span style={{color:P.red}}>해부</span>
            </h1>
            <div style={{fontFamily:serif, fontSize: isMobile?17:21, color:P.cyan, marginBottom:18}}>데이터가 밝히는 승패의 법칙과 대한민국 정치의 미래</div>
            <p style={{fontSize: isMobile?15:15.5, lineHeight:1.9, color:P.inkSoft, maxWidth:640, margin:"0 0 24px"}}>
              2026년 6월 3일, 압승으로 기록됐지만 아무도 웃지 못한 밤. 14곳의 국회의원 재보궐, 16개 광역단체,
              227개 기초단체 — 수천 개 선거구의 데이터를 AI로 해부해 표심이 움직인 지점과 승패를 가른 변수를
              드러내고, <b style={{color:P.cyan}}>'견제와 균형'이라는 하나의 의지</b>를 읽어냅니다.
            </p>
            <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr 1fr":"repeat(5,auto)", gap:0,
              borderTop:`1px solid ${P.rule}`, borderBottom:`1px solid ${P.rule}`, padding:"16px 0", marginBottom:24}}>
              {meta.map(([k,v],i)=>(
                <div key={k} style={{paddingRight: isMobile?12:26, marginRight: isMobile?0:26,
                  paddingTop: isMobile?10:0, paddingBottom: isMobile?10:0,
                  borderRight: isMobile ? ((i+1)%2===0?"none":`1px solid ${P.rule}`) : (i<4?`1px solid ${P.rule}`:"none"),
                  borderBottom: isMobile && i<3 ? `1px solid ${P.rule}` : "none"}}>
                  <div style={{fontFamily:mono, fontSize: isMobile?10:9.5, color:P.cyan, letterSpacing:".16em", marginBottom:5}}>{k.toUpperCase()}</div>
                  <div style={{fontSize: isMobile?13.5:13, fontWeight:600, color:"#fff"}}>{v}</div>
                </div>
              ))}
            </div>
            <PollBuy isMobile={isMobile}/>
          </div>
        </div>
      </section>

      {/* 이런 분께 */}
      <section style={{padding: isMobile?"48px 0":"80px 0"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("FOR WHOM · 이런 분께 권합니다")}
          <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(22px,4.7vw,40px)", letterSpacing:"-0.025em", margin:"0 0 30px", color:"#fff"}}>누구를 위한 책인가</h2>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"1fr 1fr", gap:12}}>
            {POLL_FOR.map(([t,d],i)=>(
              <div key={t} style={{background:P.bg2, border:`1px solid ${P.rule}`, borderLeft:`3px solid ${P.cyan}`, padding: isMobile?"20px 20px":"24px 26px", display:"flex", gap:18, alignItems:"flex-start"}}>
                <span style={{fontFamily:serif, fontWeight:900, fontSize:26, color:P.cyan, lineHeight:1, opacity:0.85}}>{String(i+1).padStart(2,"0")}</span>
                <div>
                  <div style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?18:19, color:"#fff", marginBottom:7}}>{t}</div>
                  <div style={{fontSize:14, color:P.inkSoft, lineHeight:1.7}}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 방법: 예측에서 해부로 */}
      <section style={{padding: isMobile?"48px 0":"80px 0", background:P.bg2, borderTop:`1px solid ${P.rule}`, borderBottom:`1px solid ${P.rule}`}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("METHOD · 예측에서 해부로", P.red)}
          <h2 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(22px,4.7vw,40px)", letterSpacing:"-0.025em", margin:"0 0 12px", color:"#fff"}}>이 책이 데이터를 다루는 법</h2>
          <p style={{fontSize:15, color:P.inkSoft, lineHeight:1.8, maxWidth:640, margin:"0 0 32px"}}>맞히는 책이 아니라, 되짚는 책입니다. 출구조사가 놓친 자리를 AI로 다시 열어 표심의 구조를 규명합니다.</p>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"repeat(2,1fr)", gap:12}}>
            {POLL_METHOD.map(([n,t,d])=>(
              <div key={n} style={{background:P.bg, border:`1px solid ${P.rule}`, borderTop:`3px solid ${P.cyan}`, padding: isMobile?"22px 20px":"26px 26px"}}>
                <div style={{fontFamily:mono, fontSize:12, color:P.cyan, letterSpacing:".2em", marginBottom:12}}>{n}</div>
                <div style={{fontFamily:serif, fontWeight:700, fontSize: isMobile?19:21, color:"#fff", marginBottom:9}}>{t}</div>
                <div style={{fontSize:14, color:P.inkSoft, lineHeight:1.75}}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 저자의 말 */}
      <section style={{padding: isMobile?"52px 0":"90px 0"}}>
        <div style={{maxWidth:860, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("AUTHOR'S NOTE · 저자의 말")}
          <blockquote style={{fontFamily:serif, fontWeight:700, fontSize: "clamp(20px,4.4vw,34px)", lineHeight:1.5, letterSpacing:"-0.02em", color:"#fff", margin:"0 0 20px", borderLeft:`3px solid ${P.red}`, paddingLeft: isMobile?18:26}}>
            "압승으로 기록된 밤, 그러나 아무도 웃지 못했다. 나는 그 밤을 데이터로 다시 열어보고 싶었다.
            예측은 무너져도, <span style={{color:P.cyan}}>해부는 남기</span> 때문이다."
          </blockquote>
          <div style={{fontSize:14.5, color:P.inkSoft, lineHeight:1.9, marginBottom:16}}>
            30년 게임 현장에서 200편이 넘는 타이틀을 만들고, 이제 동양대에서 AI와 데이터를 가르치는 저자가
            '견제와 균형'이라는 표심의 문장을 수천 개 선거구에서 건져 올립니다.
          </div>
          <div style={{fontFamily:mono, fontSize:12, color:P.inkMute, letterSpacing:".14em"}}>— 김정태 · 동양대학교 AI게임융합전공 교수 &nbsp;·&nbsp; <a href="/" style={{color:P.cyan}}>저자 소개 →</a></div>
        </div>
      </section>

      {/* 목차·핵심발견 크로스링크 + 구매 */}
      <section style={{padding: isMobile?"0 0 56px":"0 0 90px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          <div style={{display:"grid", gridTemplateColumns: isMobile?"1fr":"1fr 1fr", gap:12, marginBottom:32}}>
            <a href="/poll/contents" style={{display:"block", background:P.bg2, border:`1px solid ${P.rule}`, padding: isMobile?"22px 22px":"28px 30px"}}>
              <div style={{fontFamily:mono, fontSize:10, color:P.cyan, letterSpacing:".2em", marginBottom:10}}>TABLE OF CONTENTS</div>
              <div style={{fontFamily:serif, fontWeight:700, fontSize:22, color:"#fff", marginBottom:6}}>목차 — 5부 25장</div>
              <div style={{fontSize:13.5, color:P.inkSoft, lineHeight:1.6}}>출구조사의 붕괴에서 2028의 지형까지, 장별 구성 전체 보기 ▸</div>
            </a>
            <a href="/poll/highlights" style={{display:"block", background:P.bg2, border:`1px solid ${P.rule}`, padding: isMobile?"22px 22px":"28px 30px"}}>
              <div style={{fontFamily:mono, fontSize:10, color:P.cyan, letterSpacing:".2em", marginBottom:10}}>KEY FINDINGS</div>
              <div style={{fontFamily:serif, fontWeight:700, fontSize:22, color:"#fff", marginBottom:6}}>핵심 발견 6가지</div>
              <div style={{fontSize:13.5, color:P.inkSoft, lineHeight:1.6}}>압승의 밤이 감춘 진실 — 데이터가 드러낸 것들 ▸</div>
            </a>
          </div>
          <PollBuy isMobile={isMobile}/>
        </div>
      </section>

      <PollFooter/>
    </div>
  );
};

// ─────────────────────────────────────────────
// /poll/faq — Q&A (정적 아코디언)
// ─────────────────────────────────────────────
const POLL_FAQ = [
  ["이 책의 데이터는 실제 선거 결과인가요?","본문 분석은 중앙선거관리위원회 공표 자료 등 공개 선거 데이터를 기반으로 합니다. 다만 이 웹사이트에 표시된 일부 수치(득표율 도넛 등)는 표지 콘셉트용 예시이며, 정확한 분석 수치는 책 본문에서 다룹니다."],
  ["특정 정당에 편향된 책 아닌가요?","특정 진영을 옹호하거나 비판하려는 책이 아닙니다. '견제와 균형'을 요구한 표심의 구조를 데이터로 드러내는 것이 목적이며, 여야 양쪽의 승부처를 같은 잣대로 해부합니다."],
  ["'예측'이 아니라 '해부'라는 게 무슨 뜻인가요?","예측은 '누가 이기나'를 맞히려는 시도이고, 해부는 '왜 그런 결과가 나왔나'를 사후에 분석하는 작업입니다. 이 책은 출구조사가 놓친 지점을 되짚어 표심이 움직인 이유를 규명합니다."],
  ["통계나 데이터 지식이 없어도 읽을 수 있나요?","네. 복잡한 수식 대신 지도·차트와 이야기로 풀어, 데이터에 익숙하지 않은 독자도 따라올 수 있게 구성했습니다."],
  ["AI는 분석에 어떻게 활용됐나요?","수천 개 선거구·세대·이슈 변수를 교차분석하고, 사람이 놓치기 쉬운 패턴과 이상치를 찾아내는 데 AI를 활용했습니다. 최종 해석과 판단은 저자가 맡았습니다."],
  ["2028 대선 전망도 담겨 있나요?","5부에서 2026 지방선거가 남긴 '견제와 균형'의 신호가 2028로 어떻게 이어질지 시나리오로 다룹니다."],
  ["어디서 살 수 있나요?","상단 [책 구매하기]에서 안내 계좌로 입금하신 뒤 구매 수량·받을 주소를 남겨주세요. 입금 확인 후 3일 내외로 배송해 드립니다(대량 구입은 별도 안내). 온라인 서점 판매는 준비 중입니다."],
  ["강연·인터뷰·자문을 요청하고 싶어요.","문의 페이지에서 저자에게 직접 요청하실 수 있습니다. 데이터 정치 분석, AI 활용 등 주제로 강연·자문이 가능합니다."],
];

window.SitePollFaq = function SitePollFaq() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  const px = isMobile ? "18px" : "clamp(24px,5vw,64px)";
  const maxW = 1500;
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{background:P.bg, color:P.ink, fontFamily:sans, minHeight:"100vh"}}>
      <PollNav active="faq"/>
      <section style={{padding: isMobile?"40px 0 24px":"64px 0 32px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {pLabel("Q&A · 자주 묻는 질문")}
          <h1 style={{fontFamily:serif, fontWeight:900, fontSize: "clamp(30px,6.8vw,58px)", letterSpacing:"-0.03em", margin:"0 0 14px"}}>궁금한 것들</h1>
          <p style={{fontSize: isMobile?15:16, color:P.inkSoft, lineHeight:1.8, maxWidth:620, margin:0}}>
            이 책과 분석 방법에 대해 자주 받는 질문을 모았습니다. 더 궁금한 점은 언제든 문의로 남겨주세요.
          </p>
        </div>
      </section>
      <section style={{padding: isMobile?"8px 0 56px":"16px 0 80px"}}>
        <div style={{maxWidth:maxW, margin:"0 auto", padding:`0 ${px}`}}>
          {POLL_FAQ.map(([q,a],i)=>{
            const isOpen = open===i;
            return (
              <div key={i} style={{borderBottom:`1px solid ${P.rule}`, borderTop: i===0?`1px solid ${P.rule}`:"none", background: isOpen?P.bg2:"transparent"}}>
                <button onClick={()=>setOpen(isOpen?-1:i)} style={{width:"100%", background:"transparent", border:"none", cursor:"pointer", textAlign:"left",
                  display:"flex", gap:16, alignItems:"center", padding: isMobile?"18px 16px":"22px 20px"}}>
                  <span style={{fontFamily:mono, fontSize:12, color:P.cyan, letterSpacing:".1em", flexShrink:0}}>Q{String(i+1).padStart(2,"0")}</span>
                  <span style={{flex:1, fontFamily:serif, fontWeight:700, fontSize: isMobile?16.5:18.5, color:"#fff", lineHeight:1.4}}>{q}</span>
                  <span style={{fontFamily:mono, fontSize:18, color: isOpen?P.cyan:P.inkMute, flexShrink:0, transform: isOpen?"rotate(45deg)":"none", transition:"transform .15s"}}>+</span>
                </button>
                {isOpen && (
                  <div style={{padding: isMobile?"0 16px 20px 44px":"0 20px 24px 50px"}}>
                    <div style={{fontSize: isMobile?14.5:15.5, color:P.inkSoft, lineHeight:1.85}}>{a}</div>
                  </div>
                )}
              </div>
            );
          })}
          <div style={{marginTop:32}}><PollBuy isMobile={isMobile}/></div>
        </div>
      </section>
      <PollFooter/>
    </div>
  );
};

function PollFooter() {
  const bp = useBreakpoint();
  const isMobile = bp === 'mobile';
  return (
    <footer style={{background:"#050810", borderTop:`1px solid ${P.rule}`, padding: isMobile?"32px 18px":"40px clamp(24px,5vw,64px)"}}>
      <div style={{maxWidth:1500, margin:"0 auto", display:"flex", flexDirection: isMobile?"column":"row", justifyContent:"space-between", alignItems: isMobile?"flex-start":"center", gap:16}}>
        <div>
          <div style={{fontFamily:serif, fontWeight:800, fontSize:17, color:"#fff"}}>AI 지방선거 해부 <span style={{fontFamily:mono, fontSize:9.5, color:P.cyan, letterSpacing:".2em", marginLeft:6}}>AI ELECTION DECODE</span></div>
          <div style={{fontSize:12.5, color:P.inkMute, marginTop:6}}>김정태 · 사단법인 게이미피케이션포럼 · 2026</div>
        </div>
        <div style={{display:"flex", gap:20, fontSize:13, flexWrap:"wrap"}}>
          <a href="/poll/about" style={{color:P.inkSoft}}>책 소개</a>
          <a href="/poll/contents" style={{color:P.inkSoft}}>목차</a>
          <a href="/poll/highlights" style={{color:P.inkSoft}}>핵심 발견</a>
          <a href="/poll/faq" style={{color:P.inkSoft}}>Q&A</a>
          <a href="/" style={{color:P.inkSoft}}>김정태 소개</a>
        </div>
      </div>
      <div style={{maxWidth:1500, margin:"20px auto 0", paddingTop:16, borderTop:`1px solid ${P.rule}`, fontFamily:mono, fontSize:10, color:P.inkMute, letterSpacing:".1em"}}>© 2026 김정태 · JUNGTAE KIM</div>
    </footer>
  );
}