// variants/japanese.jsx — 일본 F&B 에디토리얼형
// 무채색 (스미 먹 + 오프화이트 + 회색) · 히어로 세로쓰기 · 괘선 기반 · 극단적 여백

function JapaneseVariant({ onNav, tweaks = {} }) {
  const [activeMenu, setActiveMenu] = React.useState(0);

  const menus = [
    { no:'01', ko:'민속밀면', en:'Minsok Milmyeon', tag:'SIGNATURE', img:'assets/menu-minsok.jpg', scale:1.0,
      desc:'비법 특제 소스와 풍성한 고명의 완벽한 밸런스. 입맛을 깨우는 민속밀면의 대표 밀면입니다.' },
    { no:'02', ko:'들기름 밀면', en:'Perilla Oil Milmyeon', tag:'CLASSIC', img:'assets/menu-deulgireum.jpg', scale:1.3,
      desc:'고소한 들기름과 건강한 자가 제면. 민속밀면의 시작이자 대표 메뉴.' },
    { no:'03', ko:'고추기름 밀면', en:'Chili Oil Milmyeon', tag:'SPICY', img:'assets/menu-gochu.jpg', scale:1.3,
      desc:'매콤한 고추기름의 깊이. 입안을 감도는 매운 맛의 균형.' },
    { no:'04', ko:'물밀면', en:'Cold Broth Milmyeon', tag:'COOL', img:'assets/menu-mul.jpg', scale:1.3,
      desc:'시원하고 맑은 육수. 여름날의 한 그릇.' },
    { no:'05', ko:'비빔밀면', en:'Spicy Bibim Milmyeon', tag:'MIX', img:'assets/menu-bibim.jpg', scale:1.3,
      desc:'양념이 면에 감기는 그 순간. 사계절 사랑받는 기본.' },
    { no:'06', ko:'특비빔밀면', en:'Signature Bibim Milmyeon', tag:'SPECIAL', img:'assets/menu-teukbibim.jpg', scale:1.0,
      desc:'비빔밀면 그 이상의 맛, 들기름과 쑥갓이 어우러진 민속밀면 대표 밀면.' },
    { no:'07', ko:'온밀면', en:'Warm Broth Milmyeon', tag:'SEASON', img:'assets/menu-on.jpg', scale:1.3,
      desc:'따뜻한 국물의 밀면. 겨울에도 밀면.' },
    { no:'08', ko:'콩밀면', en:'Soy Milk Milmyeon', tag:'SUMMER', img:'assets/menu-kong-v2.jpg', scale:1.0,
      desc:'국내산 콩을 정성껏 갈아 준비했습니다.' },
  ];
  const active = menus[activeMenu];

  // 무채색 팔레트
  const bg = '#F6F1E4';         // 크림 종이 (가맹문의 페이지와 통일)
  const bgDim = '#EDE7D6';      // 한 톤 어두운 종이
  const bgWarm = '#E4DCC6';     // 세 번째 톤
  const bgDark = '#1A1612';     // 먹
  const fg = '#1F1B17';
  const fg2 = '#5A5148';
  const fg3 = '#8F8577';
  const line = 'rgba(31,27,23,0.14)';
  const lineStrong = 'rgba(31,27,23,0.3)';

  return (
    <div style={{
      background: bg, color: fg,
      fontFamily: "'Noto Sans KR', -apple-system, sans-serif",
      minHeight: '100vh',
    }}>
      {/* ============ MINIMAL HEADER ============ */}
      <header style={{
        padding: '28px 56px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr',
        alignItems: 'center', gap: 40,
        borderBottom: `0.5px solid ${line}`,
        position: 'sticky', top: 0, zIndex: 100,
        background: 'rgba(246,241,228,0.94)', backdropFilter: 'blur(20px)',
      }}>
        <div style={{ fontSize: 10, letterSpacing: '0.35em', color: fg3, fontFamily:'Inter, sans-serif' }}>
          EST. 2022
        </div>
        <a onClick={() => onNav && onNav('home')} style={{ cursor: 'pointer', textAlign: 'center' }}>
          <div style={{
            fontFamily: "'Nanum Myeongjo', serif", fontWeight: 800,
            fontSize: 22, letterSpacing: '0.15em', color: fg,
          }}>민속밀면</div>
          <div style={{ fontSize: 8, letterSpacing: '0.4em', color: fg3, marginTop: 2, fontFamily:'Inter, sans-serif' }}>MINSOK MILMYEON</div>
        </a>
        <nav style={{ display:'flex', justifyContent:'flex-end', gap: 28, alignItems:'center' }}>
          {[
            { k:'home',      ko:'홈' },
            { k:'franchise', ko:'가맹문의' },
            { k:'stores',    ko:'매장' },
            { k:'company',   ko:'회사소개' },
          ].map(m => (
            <a key={m.k} onClick={() => onNav && onNav(m.k)} style={{
              fontSize: 12, cursor:'pointer', color: fg,
              fontFamily:"'Noto Sans KR', sans-serif", letterSpacing:'0.05em',
            }}>
              {m.ko}
            </a>
          ))}
        </nav>
      </header>

      {/* ============ HERO — 세로쓰기 ============ */}
      <section style={{ position:'relative', padding: '0', borderBottom: `0.5px solid ${line}` }}>
        <div style={{
          minHeight: '88vh',
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 0,
          alignItems: 'stretch',
        }}>
          {/* LEFT — 세로쓰기 타이포 */}
          <div className="r-hero-left" style={{
            padding: '80px 56px 80px 72px',
            display: 'flex', flexDirection: 'column', justifyContent:'space-between',
            borderRight: `0.5px solid ${line}`,
            position:'relative',
          }}>
            {/* top label */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
              <div>
                <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 8 }}>
                  ─ INDEX 001 / MILMYEON
                </div>
                <div style={{ fontSize: 11, color: fg2, fontFamily:"'Noto Sans KR', sans-serif", letterSpacing:'0.1em' }}>
                  용인 · 민속촌로
                </div>
              </div>
              <div style={{
                writingMode: 'vertical-lr', fontFamily:"'Nanum Myeongjo', serif",
                fontSize: 11, letterSpacing:'0.4em', color: fg3,
              }}>
                자가 제면 · 전통의 맛
              </div>
            </div>

            {/* CENTER — 세로쓰기 거대 타이포 */}
            <div className="r-hero-center" style={{
              display:'flex', gap: 48, alignItems:'flex-start', padding: '48px 0',
              justifyContent:'center',
            }}>
              {/* 세로 부제 (좌→우) */}
              <div style={{
                writingMode: 'vertical-lr',
                fontFamily: "'Nanum Myeongjo', serif",
                fontSize: 22, lineHeight: 1.5, letterSpacing:'0.25em',
                color: fg2, fontWeight: 400,
                paddingTop: 24,
              }}>
                밀면의 재해석
              </div>
              {/* 한글 세로쓰기 (좌→우 방향) */}
              <div className="r-hero-title" style={{
                writingMode: 'vertical-lr',
                fontFamily: "var(--font-jeju), 'Nanum Myeongjo', serif",
                fontSize: `${Math.round(76 * (tweaks.heroScale || 1))}px`,
                lineHeight: 1.15, fontWeight: 400, letterSpacing: '0.08em',
                color: fg,
              }}>
                {(() => {
                  const c = tweaks.heroCopy || 'original';
                  if (c === 'poetic')     return <>오래도록<br/>깊고 맑게</>;
                  if (c === 'craft')      return <>손끝에서<br/>오늘의 전통</>;
                  if (c === 'heritage')   return <>한 그릇에<br/>담은 시간</>;
                  if (c === 'noblegrace') return <>정갈한 한 그릇<br/>오래된 손맛</>;
                  return <>건강한 곡물로 만든<br/>바른 밀면</>;
                })()}
              </div>
            </div>

            {/* bottom — minimal meta row */}
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', borderTop:`0.5px solid ${line}`, paddingTop: 28 }}>
              <div>
                <div style={{ fontSize: 10, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 6 }}>
                  01 ─ 민속밀면이란
                </div>
                <div style={{ fontSize: 14, color: fg2, fontFamily:"'Nanum Myeongjo', serif", lineHeight: 1.8, maxWidth: 420 }}>
                  민속밀면은 전통의 맛을 현대적으로 재해석한 밀면 전문점입니다.
                </div>
              </div>
              <a onClick={() => onNav && onNav('franchise')} style={{
                fontSize: 12, letterSpacing:'0.2em', color: fg, cursor:'pointer',
                fontFamily:"'Noto Sans KR', sans-serif", paddingBottom: 4,
                borderBottom: `1px solid ${fg}`,
              }}>
                가맹문의하기 →
              </a>
            </div>
          </div>

          {/* RIGHT — 흑백 사진 */}
          <div className="r-hero-img" style={{ position: 'relative', overflow:'hidden', background: bgDark }}>
            <img src="assets/hero-storefront.png" alt="민속밀면"
              style={{
                width:'100%', height:'100%', objectFit:'cover', display:'block',
                filter: 'grayscale(1) contrast(1.05) brightness(0.9)',
              }} />
            {/* vertical stamp overlay */}
            <div style={{
              position:'absolute', left: 32, top: 32,
              writingMode:'vertical-lr', fontFamily:"'Nanum Myeongjo', serif",
              fontSize: 14, letterSpacing:'0.5em', color:'rgba(255,255,255,0.85)',
            }}>
              민속밀면 · 2022
            </div>
            <div style={{
              position:'absolute', right: 24, bottom: 24, color:'rgba(255,255,255,0.7)',
              fontSize: 9, letterSpacing:'0.3em', fontFamily:'Inter, sans-serif',
            }}>
              STOREFRONT ─ YONGIN
            </div>
          </div>
        </div>
      </section>

      {/* ============ MANIFESTO — 대형 인용 ============ */}
      <section style={{ padding: '160px 56px', background: bgDim, borderBottom: `0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', display:'grid', gridTemplateColumns:'180px 1fr', gap: 80, alignItems:'flex-start' }}>
          <div>
            <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>02 ─ 대표 인사말</div>
            <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 13, color: fg2, writingMode:'vertical-lr', letterSpacing:'0.3em', marginTop: 24 }}>
              가족·지성
            </div>
          </div>
          <div>
            <div style={{
              fontSize: 14, letterSpacing:'0.15em', color: fg3,
              fontFamily:"'Noto Sans KR', sans-serif", marginBottom: 28,
            }}>
              민속밀면의 철학은
            </div>
            <div style={{
              fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif",
              fontSize: 56, lineHeight: 1.5, fontWeight: 400, letterSpacing:'-0.01em', color: fg,
            }}>
              "고객을 가족처럼 대접하며,<br/>
              <span style={{ color: fg3, fontStyle:'italic' }}>최고의 맛과 서비스를</span> 제공합니다."
            </div>
            <div style={{ marginTop: 48, display:'grid', gridTemplateColumns:'auto 1fr', gap: 40, alignItems:'center', borderTop:`0.5px solid ${line}`, paddingTop: 32 }}>
              <div style={{ width: 120, height: 150, overflow:'hidden', background: bgDim }}>
                <img src="assets/ceo-portrait.jpg" alt="황만영"
                  style={{ width:'100%', height:'100%', objectFit:'cover', filter:'grayscale(1) contrast(1.05)' }} />
              </div>
              <div>
                <div style={{ fontSize: 10, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 10 }}>대표이사 ─ CEO</div>
                <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 24, fontWeight: 700, color: fg, marginBottom: 4 }}>
                  황만영
                </div>
                <div style={{ fontSize: 12, color: fg2, fontFamily:"'Noto Sans KR', sans-serif", lineHeight: 1.8, maxWidth: 500, marginTop: 8 }}>
                  창업 초기부터 지금까지, 트렌디한 메뉴 개발과 지속적인 연구로<br/>전통과 현대를 조화롭게 결합합니다.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ MENU — 리스트 형식 ============ */}
      <section style={{ padding: '140px 56px', borderBottom: `0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          {/* section header */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end', marginBottom: 80, paddingBottom: 32, borderBottom: `0.5px solid ${lineStrong}` }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>03 ─ OUR MENU</div>
              <div style={{
                fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400,
                letterSpacing:'-0.01em', lineHeight: 1.1, color: fg,
              }}>
                여덟 가지 밀면, 따라할 수 없는 맛.
              </div>
            </div>
            <div style={{ fontSize: 12, color: fg3, letterSpacing:'0.1em', fontFamily:'Inter, sans-serif' }}>
              EIGHT COURSES
            </div>
          </div>

          {/* menu list — 괘선 기반 */}
          <div className="r-menu-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap: 80, alignItems:'flex-start' }}>
            {/* LEFT — list */}
            <div>
              {menus.map((m, i) => {
                const isActive = i === activeMenu;
                return (
                  <div key={m.no} className="r-menu-item">
                  <div className="r-menu-row r-keep"
                    onMouseEnter={() => setActiveMenu(i)}
                    onClick={() => setActiveMenu(i)}
                    style={{
                      padding: '28px 0',
                      borderBottom: `0.5px solid ${i === menus.length-1 ? 'transparent' : line}`,
                      borderTop: i === 0 ? `0.5px solid ${line}` : 'none',
                      display:'grid', gridTemplateColumns:'48px 1fr auto', alignItems:'center', gap: 24,
                      cursor:'pointer',
                      transition:'all 0.3s var(--ease)',
                      background: isActive ? bgDim : 'transparent',
                      paddingLeft: isActive ? 24 : 0, paddingRight: isActive ? 24 : 0,
                    }}>
                    <div style={{
                      fontFamily:"'Nanum Myeongjo', serif", fontSize: 22, fontWeight: 700,
                      color: isActive ? fg : fg3, letterSpacing:'0.05em',
                    }}>{m.no}</div>
                    <div>
                      <div style={{
                        fontFamily:"'Nanum Myeongjo', serif", fontSize: 24, fontWeight: 700, color: fg,
                        letterSpacing:'0.02em', marginBottom: 4,
                      }}>
                        {m.ko}
                        <span style={{ fontSize: 12, color: fg3, letterSpacing:'0.1em', fontWeight: 400, marginLeft: 14, fontFamily:"'Nanum Myeongjo', serif" }}>
                          {m.jp}
                        </span>
                      </div>
                      <div style={{ fontSize: 10, letterSpacing:'0.25em', color: fg3, fontFamily:'Inter, sans-serif' }}>
                        {m.en.toUpperCase()}
                      </div>
                    </div>
                    <div style={{
                      fontSize: 9, letterSpacing:'0.3em', color: isActive ? fg : fg3,
                      fontFamily:'Inter, sans-serif', padding:'4px 10px',
                      border:`0.5px solid ${isActive ? fg : line}`,
                    }}>{m.tag}</div>
                  </div>
                  {/* 모바일 전용 — 탭한 메뉴 아래로 펼쳐지는 사진 + 설명 */}
                  <div className="r-menu-inline" data-open={isActive ? '1' : '0'}>
                    <div className="r-menu-inline-in">
                      <div style={{ aspectRatio:'4/3', overflow:'hidden', background: bgDim, position:'relative' }}>
                        <img src={m.img} alt={m.ko} loading="lazy"
                          style={{ width:'100%', height:'100%', objectFit:'cover', display:'block',
                            transform:`scale(${m.scale || 1.3})`, transformOrigin:'center' }} />
                        <div style={{ position:'absolute', right:14, bottom:12, fontSize:9, letterSpacing:'0.3em', color:'rgba(255,255,255,0.85)', fontFamily:'Inter, sans-serif' }}>
                          {m.no} / {String(menus.length).padStart(2,'0')}
                        </div>
                      </div>
                      <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize:14, lineHeight:1.9, color: fg2, padding:'16px 2px 4px' }}>
                        {m.desc}
                      </div>
                    </div>
                  </div>
                  </div>
                );
              })}
            </div>

            {/* RIGHT — photo + description */}
            <div className="r-menu-photo" style={{ position:'sticky', top: 120 }}>
              <div style={{
                aspectRatio:'4/5', background: bgDim, overflow:'hidden', position:'relative',
                borderTop:`0.5px solid ${line}`, borderBottom:`0.5px solid ${line}`,
              }}>
                <img key={active.no} src={active.img} alt={active.ko}
                  style={{
                    width:'100%', height:'100%', objectFit:'cover', display:'block',
                    transform:`scale(${active.scale || 1.3})`, transformOrigin:'center',
                    filter:'grayscale(0.2) contrast(1.02)',
                  }} />
                {/* caption overlay top-left */}
                <div style={{
                  position:'absolute', top: 24, left: 24,
                  fontFamily:"'Nanum Myeongjo', serif", color:'rgba(255,255,255,0.95)',
                  writingMode:'vertical-rl', fontSize: 14, letterSpacing:'0.4em',
                }}>
                  {active.no} ─ {active.jp}
                </div>
                {/* number stamp bottom-right */}
                <div style={{
                  position:'absolute', right: 24, bottom: 20,
                  fontSize: 9, letterSpacing:'0.3em', color:'rgba(255,255,255,0.8)',
                  fontFamily:'Inter, sans-serif',
                }}>
                  {String(activeMenu+1).padStart(2,'0')} / {String(menus.length).padStart(2,'0')}
                </div>
              </div>
              <div style={{ padding: '24px 4px 0', display:'grid', gridTemplateColumns:'1fr auto', gap: 32, alignItems:'flex-start' }}>
                <div style={{
                  fontFamily:"'Nanum Myeongjo', serif", fontSize: 15, lineHeight: 1.9, color: fg2,
                }}>
                  {active.desc}
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontSize: 9, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 4 }}>NOW SHOWING</div>
                  <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 20, fontWeight: 700 }}>{active.ko}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ============ WHY MINSOK — 에디토리얼 타임라인 ============ */}
      <section style={{ padding: '140px 56px', background: bgWarm, borderBottom: `0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ marginBottom: 80, paddingBottom: 32, borderBottom: `0.5px solid ${lineStrong}`, display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end' }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 16 }}>04 ─ WHY MINSOK</div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 56, fontWeight: 400, letterSpacing:'-0.01em', lineHeight: 1.1, color: fg }}>
                느리더라도 원칙으로 커 나가겠습니다.
              </div>
            </div>
            <div style={{ fontSize: 12, color: fg3, letterSpacing:'0.1em', fontFamily:'Inter, sans-serif' }}>
              FOUR PILLARS
            </div>
          </div>

          {[
            { n:'01', nEn:'01', ko:'삼성웰스토리 전용상품 협력', img:'assets/welstory.jpg',
              d:'삼성웰스토리와 전용상품 계약을 통해 전국 표준화된 면·육수·양념을 매장에 공급합니다. 품질의 일관성과 공급의 안정성을 동시에 확보했습니다.' },
            { n:'02', nEn:'02', ko:'사계절 메뉴라인', img:'assets/galbitang.jpg',
              d:'시원한 밀면과 왕갈비탕·육개장·뉴욕국밥까지 — 사계절 꾸준한 매출을 만드는 탄탄한 메뉴 구성.' },
            { n:'03', nEn:'03', ko:'본사 가맹 교육 관리', img:'assets/training.jpg',
              d:'오픈 전 2주 교육과 오픈 후 월 1회 방문 관리. 가맹점의 성공까지 본사가 동행합니다.' },
            { n:'04', nEn:'04', ko:'전통과 현대의 조화', img:'assets/craft.jpg',
              d:'전통의 맛을 중심에 두되, 새로운 맛을 끊임없이 연구합니다. 변하지 않는 기본 위에 오늘의 감각을 더했습니다.' },
          ].map((s, i) => (
            <div key={s.n} className="r-why-row" style={{
              display:'grid', gridTemplateColumns:'80px 280px 1fr 100px',
              gap: 48, alignItems:'flex-start',
              padding: '56px 0',
              borderTop: `0.5px solid ${line}`,
              borderBottom: i === 3 ? `0.5px solid ${line}` : 'none',
            }}>
              <div style={{
                fontFamily:"'Nanum Myeongjo', serif", fontSize: 42, fontWeight: 700, color: fg,
                letterSpacing:'0.02em',
              }}>{s.n}</div>
              <div style={{ aspectRatio:'4/5', overflow:'hidden', background: bgDim }}>
                <img src={s.img} alt={s.ko}
                  style={{ width:'100%', height:'100%', objectFit:'cover', filter:'grayscale(1) contrast(1.05)' }} />
              </div>
              <div style={{ paddingTop: 8 }}>
                <div style={{ fontSize: 10, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 12 }}>
                  {s.jp}
                </div>
                <div style={{
                  fontFamily:"'Nanum Myeongjo', serif", fontSize: 32, fontWeight: 700,
                  color: fg, letterSpacing:'-0.005em', marginBottom: 20, lineHeight: 1.3,
                }}>{s.ko}</div>
                <div style={{
                  fontSize: 15, lineHeight: 1.9, color: fg2, maxWidth: 560,
                  fontFamily:"'Nanum Myeongjo', serif",
                }}>{s.d}</div>
              </div>
              <div className="r-why-tail" style={{ textAlign:'right', paddingTop: 16 }}>
                <div style={{ fontSize: 10, letterSpacing:'0.3em', color: fg3, fontFamily:'Inter, sans-serif' }}>
                  {s.nEn}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ============ CTA — 괘선 + 먹색 ============ */}
      <section style={{ padding: '140px 56px', background: bgDark, color: bg }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{
            display:'grid', gridTemplateColumns:'auto 1fr auto', gap: 80, alignItems:'flex-end',
            borderTop:'0.5px solid rgba(255,255,255,0.15)', paddingTop: 64,
          }}>
            <div style={{
              writingMode:'vertical-lr', fontFamily:"'Nanum Myeongjo', serif",
              fontSize: 14, letterSpacing:'0.4em', color:'rgba(255,255,255,0.6)',
            }}>
              가맹문의
            </div>
            <div>
              <div style={{ fontSize: 10, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 24 }}>
                FRANCHISE ─ 가맹문의
              </div>
              <div style={{
                fontFamily:"var(--font-jeju), 'Nanum Myeongjo', serif",
                fontSize: 84, lineHeight: 1.1, fontWeight: 400, letterSpacing:'-0.01em', color:bg,
              }}>
                민속밀면이면,<br/>
                <span style={{ color:'rgba(255,255,255,0.55)', fontStyle:'italic' }}>가능합니다.</span>
              </div>
              <div style={{ marginTop: 32, fontSize: 14, color:'rgba(255,255,255,0.7)', fontFamily:"'Nanum Myeongjo', serif", lineHeight: 1.9 }}>
                본점 월 최고매출 1억 6천만원.<br/>함께 성장할 파트너를 찾습니다.
              </div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontSize: 9, letterSpacing:'0.4em', color:'rgba(255,255,255,0.5)', fontFamily:'Inter, sans-serif', marginBottom: 12 }}>
                CALL ─ 전화문의
              </div>
              <div style={{
                fontFamily:"'Nanum Myeongjo', serif", fontSize: 44, fontWeight: 800,
                letterSpacing:'-0.01em', color:bg, marginBottom: 24,
              }}>1899-6988</div>
              <a onClick={() => onNav && onNav('franchise')} style={{
                display:'inline-block', padding:'14px 32px',
                border:'0.5px solid rgba(255,255,255,0.6)', color:bg,
                fontSize: 11, letterSpacing:'0.25em', cursor:'pointer',
                fontFamily:'Inter, sans-serif',
              }}>상담신청하기 →</a>
            </div>
          </div>
        </div>
      </section>

      {/* ============ JANGDOKDAE BANNER — 푸터 상단 풀블리드 ============ */}
      <section style={{
        position:'relative', width:'100%',
        overflow:'hidden', background: bgDark,
        borderTop:'0.5px solid rgba(255,255,255,0.08)',
      }}>
        <img src="assets/jangdokdae-banner.jpg" alt="민속밀면 장독대"
          style={{
            width:'100%', height:'auto', display:'block',
          }} />
        <div style={{
          position:'absolute', left: 56, bottom: 24,
          color:'rgba(255,255,255,0.55)', fontSize: 9,
          letterSpacing:'0.35em', fontFamily:'Inter, sans-serif',
        }}>
          ─ 장독대
        </div>
        <div style={{
          position:'absolute', right: 56, bottom: 24,
          color:'rgba(255,255,255,0.55)', fontSize: 9,
          letterSpacing:'0.35em', fontFamily:'Inter, sans-serif',
        }}>
          JANGDOKDAE ─ HERITAGE
        </div>
      </section>

      {/* ============ FOOTER — 세로 괘선 ============ */}
      <footer style={{ padding: '80px 56px 40px', background: bgDim, color: fg2, borderTop: `0.5px solid ${line}` }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 60, marginBottom: 56 }}>
            <div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontWeight: 800, fontSize: 22, color: fg, letterSpacing:'0.1em', marginBottom: 8 }}>민속밀면</div>
              <div style={{ fontSize: 9, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif' }}>SALLY'S FOOD INC.</div>
              <div style={{ marginTop: 24, fontSize: 13, lineHeight: 1.9, color: fg2, fontFamily:"'Nanum Myeongjo', serif" }}>
                전통의 맛을 오롯이 살려<br/>현대적으로 재해석한 밀면.
              </div>
            </div>
            <div>
              <div style={{ fontSize: 9, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 14 }}>CONTACT ─ 연락처</div>
              <div style={{ fontFamily:"'Nanum Myeongjo', serif", fontSize: 22, fontWeight: 800, color: fg, marginBottom: 6 }}>1899-6988</div>
              <div style={{ fontSize: 11, color: fg3, fontFamily:"'Noto Sans KR', sans-serif" }}>가맹문의 · 평일 09:00-18:00</div>
            </div>
            <div>
              <div style={{ fontSize: 9, letterSpacing:'0.35em', color: fg3, fontFamily:'Inter, sans-serif', marginBottom: 14 }}>ADDRESS ─ 오시는 길</div>
              <div style={{ fontSize: 13, lineHeight: 1.8, fontFamily:"'Noto Sans KR', sans-serif", color: fg }}>
                경기도 용인시 기흥구<br/>민속촌로 30, 4층 (보라동)
              </div>
            </div>
          </div>
          <div style={{
            paddingTop: 24, borderTop: `0.5px solid ${line}`,
            display:'flex', justifyContent:'space-between',
            fontSize: 10, color: fg3, letterSpacing:'0.1em', fontFamily:'Inter, sans-serif',
          }}>
            <div>사업자등록번호 450-86-02847 · (주)샐리스푸드 · 대표이사 황만영</div>
            <div>© 2026 SALLY'S FOOD · 이천이십육년</div>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { JapaneseVariant });