// 공용 컴포넌트: 네비, 푸터, 스토리 카드, 아이콘
const { useState, useEffect, useRef, useMemo } = React;

// SVG 아이콘들
window.Ico = {
  Sparkle: ({size=16, color='#FFD166'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 2l2.39 6.96L22 11l-6.61 2.39L12 22l-3.39-6.61L2 13l7.61-2.04L12 2z" fill={color}/>
    </svg>
  ),
  Star: ({size=16, filled=true}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? '#FFD166' : '#D1C4E9'}>
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  ),
  Heart: ({size=18, filled=false}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={filled ? '#FF8A80' : 'none'} stroke="#FF8A80" strokeWidth="2">
      <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
    </svg>
  ),
  Moon: ({size=24, color='#9575CD'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
    </svg>
  ),
  Book: ({size=20, color='currentColor'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/>
    </svg>
  ),
  Camera: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/>
    </svg>
  ),
  Chat: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
    </svg>
  ),
  Check: ({size=16, color='#81C784'}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  ),
  ArrowR: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
    </svg>
  ),
  ArrowL: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
  ),
  Upload: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
    </svg>
  ),
  Wand: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M15 4V2m0 14v-2m7-5h-2M4 9H2m17.24-6.24l-1.42 1.42M6.76 16.24l-1.42 1.42m0-12.48l1.42 1.42m12.48 12.48l-1.42-1.42"/><circle cx="12" cy="12" r="3"/>
    </svg>
  ),
  User: ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/>
    </svg>
  ),
  Bell: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/>
    </svg>
  ),
  Bag: ({size=18}) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/>
    </svg>
  ),
};

// BUBA 로고 마크
window.BubaLogo = ({size=36}) => (
  <div style={{display:'flex', alignItems:'center', gap:10}}>
    <div style={{
      width: size, height: size, borderRadius: '50%',
      background: 'linear-gradient(135deg, #B39DDB, #7E57C2)',
      display:'flex', alignItems:'center', justifyContent:'center',
      boxShadow:'0 4px 16px rgba(179,157,219,0.4)',
      position:'relative'
    }}>
      <svg width={size*0.55} height={size*0.55} viewBox="0 0 24 24" fill="#fff">
        <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
      </svg>
      <div style={{position:'absolute', top:-2, right:-2}}>
        <Ico.Sparkle size={12}/>
      </div>
    </div>
    <div>
      <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'#311B57', lineHeight:1}}>부바</div>
      <div style={{fontSize:9, color:'#9575CD', letterSpacing:2, marginTop:2}}>BUBA</div>
    </div>
  </div>
);

// 상단 네비게이션
window.Nav = ({variant='light', active}) => {
  const links = [
    {label:'홈', k:'home'},
    {label:'스토리 둘러보기', k:'stories'},
    {label:'제작 과정', k:'how'},
    {label:'요금제', k:'pricing'},
    {label:'후기', k:'reviews'},
  ];
  const isDark = variant === 'dark';
  return (
    <nav style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'18px 48px', position:'relative', zIndex: 10,
      background: isDark ? 'rgba(49,27,87,0.85)' : 'rgba(255,255,255,0.75)',
      backdropFilter:'blur(14px)',
      borderBottom: isDark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(209,196,233,0.35)',
      color: isDark ? '#fff' : '#37274A'
    }}>
      <BubaLogo/>
      <div style={{display:'flex', gap:28, alignItems:'center'}}>
        {links.map(l => (
          <a key={l.k} style={{
            fontSize:15, fontWeight:500,
            color: active===l.k ? (isDark? '#FFD166' : '#7E57C2') : 'inherit',
            cursor:'pointer'
          }}>{l.label}</a>
        ))}
      </div>
      <div style={{display:'flex', gap:12, alignItems:'center'}}>
        <button className="btn-ghost" style={{color: isDark?'#fff':'#37274A'}}>로그인</button>
        <button className="btn btn-primary" style={{padding:'10px 20px', fontSize:14}}>
          <Ico.Wand size={16}/> 동화 만들기
        </button>
      </div>
    </nav>
  );
};

// 별점 표시
window.StarRating = ({rating, reviews, size=14}) => (
  <div style={{display:'flex', alignItems:'center', gap:4}}>
    {[1,2,3,4,5].map(i => <Ico.Star key={i} size={size} filled={i<=Math.round(rating)}/>)}
    <span style={{fontSize:13, color:'#7B6B8A', marginLeft:4, fontWeight:600}}>{rating}</span>
    {reviews!=null && <span style={{fontSize:12, color:'#B0A3BF'}}>({reviews})</span>}
  </div>
);

// 동화책 커버 (플레이스홀더 or 실제)
// BookCover — 부바의 이미지는 1536×768 (2:1 펼침) 이므로 기본 렌더도 펼침 비율.
// w 하나만 넘기면 h = w/2. 세로 표지가 필요한 경우 variant="portrait"로.
window.BookCover = ({story, w=280, h, variant='spread', showChild=true}) => {
  const accent = story.color || '#B39DDB';
  const isSpread = variant === 'spread';
  const height = h || (isSpread ? Math.round(w/2) : Math.round(w*4/3));

  if (story.cover) {
    return (
      <div style={{
        width:w, height:height, borderRadius:10, overflow:'hidden', position:'relative',
        boxShadow:'0 14px 32px -8px rgba(55,39,74,0.28), 0 4px 10px rgba(55,39,74,0.1)',
        flexShrink:0, background:'#FBF8FF',
      }}>
        <img src={story.cover} alt={`${story.title} 표지 이미지`}
          style={{width:'100%', height:'100%', objectFit: isSpread ? 'cover' : 'cover', objectPosition: isSpread ? 'center' : 'left center', display:'block'}}/>
        {/* 책 중앙 제본선 (펼침 뷰에만) */}
        {isSpread && <div aria-hidden="true" style={{position:'absolute', top:0, bottom:0, left:'50%', width:2, background:'linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.04))', transform:'translateX(-1px)', pointerEvents:'none'}}/>}
        {/* 미세한 상하 그림자 */}
        <div aria-hidden="true" style={{position:'absolute', inset:0, boxShadow:'inset 0 0 0 1px rgba(49,27,87,0.12)', borderRadius:10, pointerEvents:'none'}}/>
      </div>
    );
  }

  // placeholder (cover 없는 스토리)
  return (
    <div style={{
      width:w, height:height, borderRadius:10, position:'relative', overflow:'hidden',
      background: `linear-gradient(145deg, ${accent}, ${accent}CC)`,
      boxShadow:'0 14px 32px -8px rgba(55,39,74,0.25), 0 4px 10px rgba(55,39,74,0.08)',
      flexShrink:0, display:'flex',
    }}>
      {/* 좌측(표지) */}
      <div style={{flex:1, padding:'14px 14px', position:'relative', borderRight:'1px solid rgba(0,0,0,0.15)'}}>
        <div style={{position:'absolute', inset:0, background:'radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 55%)'}}/>
        <div style={{position:'relative', display:'flex', flexDirection:'column', justifyContent:'space-between', height:'100%', color:'#fff'}}>
          <div style={{fontSize:9, letterSpacing:2, opacity:0.85, fontWeight:600}}>BUBA · {story.tag}</div>
          {showChild && (
            <div style={{
              width: Math.min(w*0.22, 64), height: Math.min(w*0.22, 64), borderRadius:'50%', alignSelf:'center',
              background:'rgba(255,255,255,0.18)', border:'1.5px dashed rgba(255,255,255,0.6)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontSize:9, color:'rgba(255,255,255,0.85)', textAlign:'center'
            }}>주인공</div>
          )}
          <div style={{fontFamily:'var(--font-display)', fontSize: Math.max(11, w*0.05), lineHeight:1.2, textShadow:'0 2px 8px rgba(0,0,0,0.3)'}}>
            {story.title}
          </div>
        </div>
      </div>
      {/* 우측(샘플 페이지) */}
      <div style={{flex:1, background:'linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,249,236,0.88))', padding:'14px 16px', display:'flex', flexDirection:'column', justifyContent:'center', gap:6}}>
        <div style={{height:3, width:'70%', background:'rgba(49,27,87,0.18)', borderRadius:2}}/>
        <div style={{height:3, width:'90%', background:'rgba(49,27,87,0.14)', borderRadius:2}}/>
        <div style={{height:3, width:'55%', background:'rgba(49,27,87,0.18)', borderRadius:2}}/>
        <div style={{height:3, width:'80%', background:'rgba(49,27,87,0.1)', borderRadius:2, marginTop:8}}/>
        <div style={{height:3, width:'65%', background:'rgba(49,27,87,0.14)', borderRadius:2}}/>
      </div>
    </div>
  );
};

// Process step icon (단계별)
window.StepIco = ({n, color='#B39DDB'}) => (
  <div style={{
    width:48, height:48, borderRadius:'50%',
    background: `linear-gradient(135deg, ${color}, ${color}CC)`,
    color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
    fontFamily:'var(--font-display)', fontSize:22, fontWeight:700,
    boxShadow:`0 4px 16px ${color}66`,
    flexShrink:0
  }}>{n}</div>
);

// 수채화 구름 SVG 배경 (재사용)
window.WatercolorBG = ({opacity=1}) => (
  <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity, pointerEvents:'none'}} preserveAspectRatio="xMidYMid slice" viewBox="0 0 1200 800">
    <defs>
      <radialGradient id="wc1" cx="50%" cy="50%"><stop offset="0%" stopColor="#B39DDB" stopOpacity="0.35"/><stop offset="100%" stopColor="#B39DDB" stopOpacity="0"/></radialGradient>
      <radialGradient id="wc2" cx="50%" cy="50%"><stop offset="0%" stopColor="#F48FB1" stopOpacity="0.28"/><stop offset="100%" stopColor="#F48FB1" stopOpacity="0"/></radialGradient>
      <radialGradient id="wc3" cx="50%" cy="50%"><stop offset="0%" stopColor="#FFD166" stopOpacity="0.3"/><stop offset="100%" stopColor="#FFD166" stopOpacity="0"/></radialGradient>
      <radialGradient id="wc4" cx="50%" cy="50%"><stop offset="0%" stopColor="#81C784" stopOpacity="0.22"/><stop offset="100%" stopColor="#81C784" stopOpacity="0"/></radialGradient>
    </defs>
    <circle cx="150" cy="120" r="260" fill="url(#wc1)"/>
    <circle cx="1050" cy="200" r="220" fill="url(#wc2)"/>
    <circle cx="900" cy="650" r="280" fill="url(#wc3)"/>
    <circle cx="250" cy="700" r="240" fill="url(#wc4)"/>
    {/* 별들 */}
    {Array.from({length:18}).map((_,i) => (
      <circle key={i} cx={80 + i*65 + (i%3)*30} cy={60 + (i*37)%700} r={1.5 + (i%3)} fill="#FFD166" opacity={0.5}>
        <animate attributeName="opacity" values="0.2;0.9;0.2" dur={`${2+(i%4)}s`} repeatCount="indefinite"/>
      </circle>
    ))}
  </svg>
);

// 전자 동화책 뷰어 스펙 섹션 (펼침 400×200mm = 2:1 와이드 뷰어, 한 페이지 200×200mm 정사각)
window.BookSpecs = ({variant='light'}) => {
  const dark = variant === 'dark';
  const fg = dark ? '#fff' : '#37274A';
  const sub = dark ? 'rgba(255,255,255,0.7)' : '#7B6B8A';
  const panel = dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.7)';
  const border = dark ? 'rgba(255,255,255,0.12)' : 'rgba(209,196,233,0.55)';
  return (
    <section aria-labelledby="specs-heading" style={{padding:'80px 48px', background: dark?'#2A1847':'#F6F1E8', position:'relative'}}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div style={{fontFamily:'var(--font-display)', fontSize:13, color:'#C5A572', letterSpacing:4, marginBottom:10, textTransform:'uppercase'}}>E-Book Viewer Format</div>
        <h2 id="specs-heading" style={{fontFamily:'var(--font-display)', fontSize:44, color:fg, margin:'0 0 14px', lineHeight:1.15}}>전자 동화책 뷰어 · 400 × 200 규격</h2>
        <p style={{fontSize:16, color:sub, maxWidth:640, lineHeight:1.7, margin:'0 0 48px'}}>
          부바의 동화는 <strong style={{color:fg}}>펼침 기준 400 × 200 (2:1)</strong> 와이드 뷰어로 재생되는 전자책입니다. 왼쪽·오른쪽 각 <strong style={{color:fg}}>200 × 200 정사각</strong>이어서 아이 사진이 어떤 비율로 들어와도 깔끔하게 담깁니다. PC·태블릿·모바일 자동 대응.
        </p>

        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'center'}}>
          {/* 스펙 도식: 펼침 400x200 */}
          <div aria-hidden="true" style={{background: panel, border:`1px solid ${border}`, borderRadius:24, padding:40, position:'relative', minHeight: 360}}>
            <div style={{position:'relative', width:'100%', maxWidth:500, margin:'0 auto'}}>
              {/* 치수선 위: 400mm */}
              <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:10, marginBottom:14, color: sub, fontSize:12, letterSpacing:2}}>
                <div style={{flex:1, height:1, background: border}}/>
                <span style={{fontFamily:'monospace', fontWeight:700, color:fg}}>400 · 뷰어 펼침 (2:1)</span>
                <div style={{flex:1, height:1, background: border}}/>
              </div>
              {/* 책 펼침 목업 */}
              <div style={{display:'flex', aspectRatio:'2/1', borderRadius:6, overflow:'hidden', boxShadow:'0 20px 60px rgba(49,27,87,0.25)', position:'relative'}}>
                <div style={{flex:1, background:'linear-gradient(135deg, #F6F1E8, #E8DCC4)', padding:20, position:'relative', borderRight:'1px solid rgba(49,27,87,0.15)'}}>
                  <div style={{position:'absolute', top:12, left:16, fontSize:9, color:'#9B8866', letterSpacing:2}}>LEFT · 200×200</div>
                  <div style={{position:'absolute', inset:24, border:'1px dashed rgba(155,136,102,0.4)', borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', color:'#9B8866', fontSize:10}}>삽화</div>
                </div>
                <div style={{flex:1, background:'linear-gradient(135deg, #FFF9EC, #F6EFD9)', padding:20, position:'relative'}}>
                  <div style={{position:'absolute', top:12, right:16, fontSize:9, color:'#9B8866', letterSpacing:2}}>RIGHT · 200×200</div>
                  <div style={{position:'absolute', inset:24, border:'1px dashed rgba(155,136,102,0.4)', borderRadius:4, display:'flex', alignItems:'center', justifyContent:'center', color:'#9B8866', fontSize:10}}>본문</div>
                </div>
                {/* 중앙 제본선 */}
                <div style={{position:'absolute', top:0, bottom:0, left:'50%', width:2, background:'rgba(49,27,87,0.1)', transform:'translateX(-1px)'}}/>
              </div>
              {/* 치수선 아래 오른쪽: 200mm 세로 표시 */}
              <div style={{position:'absolute', top:30, right:-58, bottom:0, width:40, display:'flex', alignItems:'center', justifyContent:'center'}}>
                <div style={{writingMode:'vertical-rl', transform:'rotate(180deg)', fontFamily:'monospace', fontSize:12, color:fg, fontWeight:700, letterSpacing:2}}>200 · 높이</div>
              </div>
            </div>
          </div>

          {/* 스펙 리스트 */}
          <dl style={{margin:0}}>
            {[
              {t:'뷰어 판형', v:'펼침 400×200 (2:1) · 페이지 200×200 정사각'},
              {t:'분량', v:'표지 + 본문 12p (양면 펼침 6 스프레드)'},
              {t:'해상도', v:'2048×1024 기본 / 레티나 4K 대응'},
              {t:'지원 기기', v:'PC · 태블릿 가로 · 모바일 스와이프'},
              {t:'읽기 기능', v:'AI 내레이션(TTS) · 배경음 · 자동 넘김'},
              {t:'공유', v:'링크 공유 · PDF 다운로드 · 앨범 저장'},
            ].map(s => (
              <div key={s.t} style={{display:'grid', gridTemplateColumns:'110px 1fr', gap:20, padding:'16px 0', borderBottom:`1px solid ${border}`}}>
                <dt style={{fontSize:13, color:sub, fontWeight:600, letterSpacing:1}}>{s.t}</dt>
                <dd style={{margin:0, fontSize:15, color:fg, lineHeight:1.5, fontWeight:500}}>{s.v}</dd>
              </div>
            ))}
          </dl>
        </div>
      </div>
    </section>
  );
};

// 사이트 푸터 — 국제 표준 HTML5 <footer role="contentinfo">
// 필수 항목: 약관 2종 · SNS · 카톡 고객센터 · 사업자번호 · 이메일
window.SiteFooter = ({variant='dark'}) => {
  const dark = variant === 'dark';
  const bg = dark ? '#1E1230' : '#F0EAE0';
  const fg = dark ? '#fff' : '#37274A';
  const sub = dark ? 'rgba(255,255,255,0.7)' : '#5B4A70';
  const muted = dark ? 'rgba(255,255,255,0.45)' : '#9B8AAD';
  const border = dark ? 'rgba(255,255,255,0.12)' : 'rgba(49,27,87,0.12)';
  const hover = dark ? 'rgba(255,255,255,0.08)' : 'rgba(49,27,87,0.06)';

  // 접근성: 각 SNS는 실제 <a> + aria-label + rel=noopener
  const socials = [
    {k:'instagram', label:'인스타그램 @buba.kr', href:'https://instagram.com/buba.kr',
      svg:<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>},
    {k:'youtube', label:'유튜브 @buba', href:'https://youtube.com/@buba',
      svg:<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" aria-hidden="true"><rect x="2.5" y="6" width="19" height="12" rx="3"/><path d="M10.5 9.5 L 15 12 L 10.5 14.5 Z" fill="currentColor" stroke="none"/></svg>},
    {k:'kakao', label:'카카오톡 채널 @부바 — 고객상담', href:'https://pf.kakao.com/_buba',
      svg:<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 4c-4.97 0-9 3.13-9 7 0 2.3 1.45 4.32 3.68 5.6L5.8 20l3.5-2.2c.87.18 1.77.27 2.7.27 4.97 0 9-3.13 9-7s-4.03-7-9-7Z"/></svg>},
  ];

  return (
    <footer role="contentinfo" style={{background: bg, color: fg, padding:'56px 48px 28px', fontSize:13, lineHeight:1.6}}>
      <div style={{maxWidth:1200, margin:'0 auto'}}>

        {/* 상단: 로고 + 카톡 상담 CTA + 소셜 */}
        <div style={{display:'flex', flexWrap:'wrap', gap:32, alignItems:'flex-start', justifyContent:'space-between', paddingBottom:32, borderBottom:`1px solid ${border}`}}>
          <div style={{maxWidth:420}}>
            <BubaLogo/>
            <p style={{color:sub, marginTop:14, fontSize:13, lineHeight:1.7}}>
              AI × 전문가 일러스트레이터가 함께 만드는,<br/>
              아이가 주인공인 맞춤 전자 동화책.
            </p>
          </div>

          {/* 카톡 상담 버튼 — 강조 CTA */}
          <a href="https://pf.kakao.com/_buba/chat" target="_blank" rel="noopener noreferrer"
             aria-label="카카오톡 고객상담 채널로 이동"
             style={{
               display:'inline-flex', alignItems:'center', gap:10,
               background:'#FEE500', color:'#3C1E1E', textDecoration:'none',
               padding:'14px 22px', borderRadius:12, fontWeight:700, fontSize:14,
               boxShadow: dark? '0 4px 16px rgba(0,0,0,0.3)' : '0 4px 12px rgba(49,27,87,0.15)'
             }}>
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#3C1E1E" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M12 4c-4.97 0-9 3.13-9 7 0 2.3 1.45 4.32 3.68 5.6L5.8 20l3.5-2.2c.87.18 1.77.27 2.7.27 4.97 0 9-3.13 9-7s-4.03-7-9-7Z"/>
            </svg>
            카카오톡 고객상담 →
          </a>

          {/* SNS */}
          <nav aria-label="소셜 미디어" style={{display:'flex', gap:10}}>
            {socials.map(s => (
              <a key={s.k} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                 style={{
                   width:44, height:44, borderRadius:12, background: hover,
                   display:'inline-flex', alignItems:'center', justifyContent:'center',
                   color: fg, textDecoration:'none', transition:'background 0.2s'
                 }}
                 onMouseEnter={e=>e.currentTarget.style.background=dark?'rgba(255,255,255,0.16)':'rgba(49,27,87,0.12)'}
                 onMouseLeave={e=>e.currentTarget.style.background=hover}>
                {s.svg}
              </a>
            ))}
          </nav>
        </div>

        {/* 약관 · 정책 링크 줄 */}
        <nav aria-label="법적 정보 및 정책" style={{display:'flex', flexWrap:'wrap', gap:'10px 28px', padding:'22px 0', borderBottom:`1px solid ${border}`, alignItems:'center'}}>
          <a href="#terms" style={{color: fg, fontSize:13, textDecoration:'none', fontWeight:700}}>이용약관</a>
          <a href="#privacy" style={{color: fg, fontSize:13, textDecoration:'underline', textUnderlineOffset:3, fontWeight:700}}>개인정보처리방침</a>
          <a href="#youth-protection" style={{color: sub, fontSize:13, textDecoration:'none'}}>청소년보호정책</a>
          <a href="#refund-policy" style={{color: sub, fontSize:13, textDecoration:'none'}}>배송·교환·환불</a>
          <a href="#photo-consent" style={{color: sub, fontSize:13, textDecoration:'none'}}>사진 이용 동의</a>
        </nav>

        {/* 사업자 정보 (HTML5 <address>) */}
        <address style={{fontStyle:'normal', display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:'10px 32px', padding:'24px 0', color: sub, fontSize:12, lineHeight:1.8}}>
          <div>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>상호</strong>(주)부바스튜디오
            <span style={{margin:'0 10px', color:border}}>|</span>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>대표</strong>김부바
          </div>
          <div>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>사업자등록번호</strong>
            <span itemProp="taxID">123-45-67890</span>
            <a href="https://www.ftc.go.kr/bizCommPop.do?wrkr_no=1234567890" target="_blank" rel="noopener noreferrer"
               style={{color:sub, marginLeft:8, fontSize:11, textDecoration:'underline'}}>[사업자정보확인]</a>
          </div>
          <div>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>통신판매업신고</strong>제 2024-서울강남-12345호
          </div>
          <div>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>이메일</strong>
            <a href="mailto:hello@buba.kr" style={{color:sub}}>hello@buba.kr</a>
          </div>
          <div style={{gridColumn:'1 / -1'}}>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>주소</strong>서울특별시 강남구 테헤란로 123, 8층 (역삼동)
            <span style={{margin:'0 10px', color:border}}>|</span>
            <strong style={{color:fg, fontWeight:600, marginRight:8}}>개인정보보호책임자</strong>이보바 (<a href="mailto:privacy@buba.kr" style={{color:sub}}>privacy@buba.kr</a>)
          </div>
        </address>

        {/* 저작권 + 인증 배지 */}
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', flexWrap:'wrap', gap:16, paddingTop:20, borderTop:`1px solid ${border}`}}>
          <small style={{color: muted, fontSize:11, fontStyle:'normal'}}>
            © 2026 BUBA Studio, Inc. All rights reserved.
          </small>
          <div style={{display:'flex', gap:8, alignItems:'center'}} aria-label="인증 배지">
            {['KC 안전확인','ISMS','에스크로','KG이니시스'].map(b => (
              <span key={b} style={{
                padding:'5px 10px', borderRadius:6, border:`1px solid ${border}`,
                fontSize:10, letterSpacing:0.5, color: muted, fontWeight:600
              }}>{b}</span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, {});