// Litt.ly-style mobile profile pages.
// Mobile-only, 390 wide. Uses the existing page's content but tighter.
// Three theme variations in one file.

const LW = 390;
const LP = 22;

// ─────────────────────────────────────────────────────────────
// Shared content (matches existing page; do not invent new copy)
// ─────────────────────────────────────────────────────────────
const PROFILE = {
  photo: "assets/profile-photo-circle.png",
  name: "최원재",
  nameEn: "Choi Wonjai",
  role: "CEO · 아이티커넥트(주)",
  tagline1: "AI로 업무를 혁신하고",
  tagline2: "자동화 하는 방법을 연구합니다.",
  taglineMark: "연구합니다",
  pills: ["비개발자 창업가", "AI 바이브코딩 교육자", "실서비스 빌더"],
};

const SERVICES = [
  {
    icon: "screen",
    title: "기업 AX 컨설팅 · AI 교육",
    tags: ["B2B", "추천"],
    desc: "기업 업무 AX 적용, 임직원 대상 AX 교육 진행.",
    highlight: true,
  },
  {
    icon: "code",
    title: "4주 AI 바이브코딩 프로그램",
    tags: ["B2C", "기수제"],
    desc: "기획·설계부터 개발·배포까지 체계적인 바이브코딩 교육.",
  },
];

const CONTENT_LINKS = [
  { icon: "youtube", iconBg: "#FF0033", iconColor: "#fff", tag: "구독",
    title: "YouTube · 아이티커넥트",
    desc: "AX, AI 바이브코딩, AI 활용 방법 공유.",
    href: "https://youtube.com/@itconnect_dev" },
];

const BOOK = {
  tag: "UPCOMING BOOK",
  title: "『비개발자를 위한 바이브코딩』",
  badge: "출간 예정",
};

const PROOF = [
  { tag: "", name: "b-creator",      desc: "AI 바이브코딩 가이드 및 프로젝트 기록 플랫폼.", bg: "#1f2430", swatch: "#FFE066", href: "https://b-creator.com", thumb: "assets/site-bcreator-thumb.png" },
  { tag: "", name: "homepage.works", desc: "AI로 알아보는 외주 견적 플랫폼.",               bg: "#2a3142", swatch: "#5A7AAE", href: "https://homepage.works", thumb: "assets/site-homepage-works-thumb.png" },
  { tag: "", name: "Rutiqa",         desc: "AI 바이오 해킹을 위한 건강기록 플랫폼.",        bg: "#8a6f47", swatch: "#F5E6C8", href: "https://rutiqa.com", thumb: "assets/site-rutiqa-thumb.png" },
  { tag: "AI AUTOMATION", name: "Startora",        desc: "AI 콘텐츠 자동화 파이프라인 플랫폼.",            bg: "#22293a", swatch: "#FFE066", href: "https://startora.net" },
];

const CERTS = ["청년창업사관학교 15기", "창업중심대학 예비창업자", "과천시 우수 스타트업"];

const CAREER = [
  { y: "2023 —",       t: "아이티커넥트(주) CEO" },
  { y: "2017 — 2020",  t: "㈜엔코아 IT교육 전략기획실장" },
  { y: "2014 — 2016",  t: "㈜코코로톡 COO, Co-founder" },
];

const SNS = [
  { i: "insta",    l: "Instagram", href: "https://instagram.com/itconnect_dev" },
  { i: "youtube",  l: "YouTube",   href: "https://youtube.com/@itconnect_dev" },
  { i: "threads",  l: "Threads",   href: "https://threads.net/@itconnect_dev" },
  { i: "linkedin", l: "LinkedIn",  href: "https://www.linkedin.com/in/%EC%9B%90%EC%9E%AC-%EC%B5%9C-983478b6/" },
];

// ─────────────────────────────────────────────────────────────
// Small inline icons for service cards
// ─────────────────────────────────────────────────────────────
function SvcGlyph({ kind, color = "#fff" }) {
  if (kind === "screen") return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/>
    </svg>
  );
  if (kind === "spark") return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
    </svg>
  );
  if (kind === "code") return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
      <path d="m9 8-4 4 4 4"/>
      <path d="m15 8 4 4-4 4"/>
      <path d="m13 5-2 14"/>
    </svg>
  );
  if (kind === "youtube") return <Icon.YouTube />;
  if (kind === "site")    return <Icon.Building />;
  if (kind === "book")    return <Icon.Book />;
  return null;
}

function SnsIcon({ i }) {
  if (i === "insta")    return <Icon.Insta />;
  if (i === "youtube")  return <Icon.YouTube />;
  if (i === "threads")  return <Icon.Threads />;
  if (i === "linkedin") return <Icon.Linkedin />;
  return null;
}

// ─────────────────────────────────────────────────────────────
// V1 · Refined cream — warm editorial, tightened spacing
// (Close to current but with better hierarchy + breathing)
// ─────────────────────────────────────────────────────────────
function LittV1() {
  const PG = "var(--paper)";
  const CARD = "#fff";
  const LINE = "var(--line-light)";
  const INK = "var(--brand-ink)";

  return (
    <MobileFrame width={LW} theme="paper" showHome={false}>
      {/* Header */}
      <div style={{
        padding: `12px ${LP}px 12px`,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: `1px solid var(--line-faint)`,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Wordmark size={14} />
          <span style={{ width: 1, height: 11, background: LINE }} />
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.18em", color: "var(--text-soft)", textTransform: "uppercase" }}>
            REBUILD BUSINESS WITH AI
          </span>
        </div>
      </div>

      {/* Profile card */}
      <div style={{ padding: `28px ${LP}px 0` }}>
        <div style={{
          background: CARD, border: `1px solid ${LINE}`, borderRadius: 18,
          padding: "26px 22px 22px", textAlign: "center", position: "relative",
          overflow: "hidden",
        }}>
          <div style={{
            position: "absolute", left: 0, right: 0, top: 0, height: 88,
            background: "linear-gradient(180deg, var(--bg2) 0%, transparent 100%)",
          }}/>
          <div style={{ position: "relative", display: "inline-block" }}>
            <img src={PROFILE.photo} alt={PROFILE.name}
              style={{
                width: 124, height: 124, borderRadius: "50%",
                border: "3px solid #fff", boxShadow: "0 8px 24px -6px rgba(31,36,48,0.18)",
                objectFit: "cover", display: "block",
              }}
            />
            <span style={{
              position: "absolute", right: 4, bottom: 4,
              width: 14, height: 14, borderRadius: 99, background: "#3d8b5f",
              boxShadow: "0 0 0 3px #fff",
            }}/>
          </div>
          <h1 style={{
            margin: "16px 0 4px",
            fontFamily: "var(--font-serif)", fontWeight: 700,
            fontSize: 30, letterSpacing: "0.16em", color: INK,
          }}>{PROFILE.name}</h1>
          <div style={{ fontSize: 12.5, color: "var(--text-soft)", letterSpacing: "0.04em" }}>
            {PROFILE.role}
          </div>
          <p style={{
            margin: "16px auto 0", maxWidth: 270,
            fontSize: 15, lineHeight: 1.65, color: INK, fontWeight: 600, letterSpacing: "-0.013em",
          }}>
            {PROFILE.tagline1}<br/>
            자동화 하는 방법을 <Mark>{PROFILE.taglineMark}</Mark>.
          </p>
          <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center" }}>
            {PROFILE.pills.map((p) => <Pill small key={p}>{p}</Pill>)}
          </div>
        </div>

        {/* Primary CTA */}
        <div style={{ marginTop: 14 }}>
          <Btn variant="primary" size="lg" iconLeft={<Icon.Mail />}>기업 교육·컨설팅 문의하기</Btn>
        </div>
      </div>

      {/* SERVICES */}
      <SectionV1 eyebrow="Services" icon={<Icon.Building size={14} />}
        lead="기업 업무를 AI로 혁신하기 위한 컨설팅과 바이브 코딩 교육을 진행합니다.">
        {SERVICES.map((s, i) => (
          <ServiceCardV1 key={i} svc={s} />
        ))}
      </SectionV1>

      {/* CONTENT */}
      <SectionV1 eyebrow="Content" icon={<Icon.Play size={12} />}>
        {CONTENT_LINKS.map((c, i) => (
          <LinkCardV1 key={i} {...c} />
        ))}
      </SectionV1>

      {/* BOOK */}
      <SectionV1 eyebrow="Book" icon={<Icon.Book size={14} />}>
        <BookCardV1 />
      </SectionV1>

      {/* BUILD PROOF */}
      <SectionV1 eyebrow="Build Proof" icon={<Icon.Box size={14} />}>
        {PROOF.map((p, i) => (
          <ProofCardV1 key={i} item={p} />
        ))}
      </SectionV1>

      {/* CREDENTIALS */}
      <CredV1 />

      {/* FOLLOW */}
      <FollowV1 />

      {/* Footer */}
      <FooterV1 />
    </MobileFrame>
  );
}

function SectionV1({ eyebrow, icon, lead, children }) {
  return (
    <section style={{ padding: `40px ${LP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <span style={{
          width: 22, height: 22, borderRadius: 6,
          background: "var(--blue-subtle)", color: "var(--brand-blue)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
        }}>{icon}</span>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600,
          letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-soft)",
        }}>{eyebrow}</span>
        <span style={{ flex: 1, height: 1, background: "var(--line-light)" }} />
      </div>
      {lead && (
        <p style={{ margin: "0 0 14px", fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.65 }}>
          {lead}
        </p>
      )}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>{children}</div>
    </section>
  );
}

function ServiceCardV1({ svc }) {
  const Tag = svc.href ? "a" : "div";
  const linkProps = svc.href ? { href: svc.href, target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <Tag {...linkProps} style={{
      display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "center",
      padding: "16px 14px", borderRadius: 12,
      background: svc.highlight ? "rgba(255,224,102,0.12)" : "#fff",
      border: `1px solid ${svc.highlight ? "rgba(200,158,30,0.32)" : "var(--line-light)"}`,
      color: "inherit", textDecoration: "none", cursor: svc.href ? "pointer" : "default",
    }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10,
        background: "var(--brand-ink)", color: "#fff",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><SvcGlyph kind={svc.icon} /></span>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap", marginBottom: 4 }}>
          {svc.tags.map((t, i) => (
            <Pill small key={t} variant={i === 0 ? (svc.highlight ? "yellow" : "ink") : (svc.highlight ? "yellow" : "ink")}>
              {t}
            </Pill>
          ))}
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: "-0.012em" }}>{svc.title}</div>
        <div style={{ fontSize: 12, color: "var(--text-soft)", marginTop: 4, lineHeight: 1.5 }}>{svc.desc}</div>
      </div>
      <span style={{ color: "var(--text-tertiary)", display: "inline-flex", alignItems: "center" }}><Icon.ArrowUR /></span>
    </Tag>
  );
}

function LinkCardV1({ icon, iconBg, iconColor, tag, title, desc }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "start",
      padding: "14px 14px", borderRadius: 12,
      background: "#fff", border: "1px solid var(--line-light)",
    }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10,
        background: iconBg, color: iconColor,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><SvcGlyph kind={icon} color={iconColor} /></span>
      <div>
        <Pill small variant="ink">{tag}</Pill>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: "-0.012em", marginTop: 4 }}>{title}</div>
        <div style={{ fontSize: 12, color: "var(--text-soft)", marginTop: 3, lineHeight: 1.5 }}>{desc}</div>
      </div>
      <span style={{ color: "var(--text-tertiary)", paddingTop: 4 }}><Icon.ArrowUR /></span>
    </div>
  );
}

function BookCardV1() {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "72px 1fr auto", gap: 14, alignItems: "center",
      padding: "16px 14px", borderRadius: 12,
      background: "#fff", border: "1px solid var(--line-light)",
    }}>
      <div style={{
        width: 60, height: 84, borderRadius: 4,
        background: "linear-gradient(155deg, #2a3a5e, #1f2742)",
        boxShadow: "0 6px 14px -4px rgba(31,36,48,0.3)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{ position: "absolute", left: 6, top: 8, right: 6, fontFamily: "var(--font-serif)", fontSize: 7, color: "rgba(255,255,255,0.85)", lineHeight: 1.2 }}>
          비개발자를<br/>위한
        </div>
        <div style={{ position: "absolute", left: 6, top: 32, right: 6, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 9.5, color: "var(--accent-highlight)", lineHeight: 1, letterSpacing: "-0.02em" }}>
          바이브<br/>코딩
        </div>
        <div style={{ position: "absolute", right: 6, top: 6, width: 7, height: 7, borderRadius: "50%", background: "var(--accent-highlight)" }} />
      </div>
      <div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--text-soft)", textTransform: "uppercase" }}>{BOOK.tag}</span>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--brand-ink)", marginTop: 4, letterSpacing: "-0.012em" }}>{BOOK.title}</div>
        <div style={{ marginTop: 8 }}>
          <Pill small variant="yellow">{BOOK.badge}</Pill>
        </div>
      </div>
      <span style={{ color: "var(--text-tertiary)" }}><Icon.ArrowUR /></span>
    </div>
  );
}

function ProofCardV1({ item }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "64px 1fr auto", gap: 14, alignItems: "center",
      padding: "14px 14px", borderRadius: 12,
      background: "#fff", border: "1px solid var(--line-light)",
    }}>
      <div style={{
        width: 52, height: 40, borderRadius: 5,
        background: item.bg, position: "relative", overflow: "hidden",
      }}>
        <span style={{ position: "absolute", left: 5, top: 5, width: 6, height: 6, borderRadius: 99, background: item.swatch }} />
        <span style={{ position: "absolute", left: 5, top: 14, right: 5, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.35)" }} />
        <span style={{ position: "absolute", left: 5, top: 20, width: 16, height: 2, borderRadius: 1, background: item.swatch, opacity: 0.7 }} />
        <span style={{ position: "absolute", left: 5, bottom: 5, width: 20, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.2)" }} />
      </div>
      <div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.14em", color: "var(--text-soft)", textTransform: "uppercase" }}>{item.tag}</span>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--brand-ink)", marginTop: 3, letterSpacing: "-0.012em" }}>{item.name}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-soft)", marginTop: 2, lineHeight: 1.5 }}>{item.desc}</div>
      </div>
      <span style={{ color: "var(--text-tertiary)" }}><Icon.ArrowUR /></span>
    </div>
  );
}

function CredV1() {
  return (
    <section style={{ padding: `40px ${LP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--blue-subtle)", color: "var(--brand-blue)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          <Icon.Check />
        </span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-soft)" }}>
          Credentials
        </span>
        <span style={{ flex: 1, height: 1, background: "var(--line-light)" }} />
      </div>

      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--text-tertiary)", textTransform: "uppercase", marginBottom: 8 }}>
        Certification
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 22 }}>
        {CERTS.map((c) => (
          <span key={c} style={{
            padding: "6px 10px", borderRadius: 99, background: "#fff",
            border: "1px solid var(--line-light)", fontSize: 11.5, color: "var(--brand-ink)",
            fontWeight: 500,
          }}>{c}</span>
        ))}
      </div>

      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--text-tertiary)", textTransform: "uppercase", marginBottom: 10 }}>
        Career
      </div>
      <div style={{ position: "relative" }}>
        {CAREER.map((c, i, arr) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "92px 1fr", gap: 12,
            padding: "10px 0",
            borderBottom: i === arr.length - 1 ? "none" : "1px dashed var(--line-faint)",
          }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-soft)", letterSpacing: "0.04em" }}>{c.y}</span>
            <span style={{ fontSize: 13.5, color: "var(--brand-ink)", fontWeight: 500, letterSpacing: "-0.01em" }}>{c.t}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function FollowV1() {
  return (
    <section style={{ padding: `40px ${LP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <span style={{ width: 22, height: 22, borderRadius: 6, background: "var(--blue-subtle)", color: "var(--brand-blue)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-soft)" }}>
          Follow
        </span>
        <span style={{ flex: 1, height: 1, background: "var(--line-light)" }} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 8 }}>
        {SNS.map((s) => (
          <a key={s.l} href={s.href} target="_blank" rel="noopener noreferrer" style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
            padding: "14px 8px", borderRadius: 10,
            background: "#fff", border: "1px solid var(--line-light)",
            color: "inherit", textDecoration: "none",
          }}>
            <span style={{ color: "var(--brand-ink)" }}><SnsIcon i={s.i} /></span>
            <span style={{ fontSize: 10.5, color: "var(--text-soft)", fontWeight: 500 }}>{s.l}</span>
          </a>
        ))}
      </div>
    </section>
  );
}

function FooterV1() {
  return (
    <div style={{ padding: `36px ${LP}px 28px`, marginTop: 16, textAlign: "center" }}>
      <Wordmark size={13} />
      <div style={{ marginTop: 10, fontSize: 11, color: "var(--text-soft)", lineHeight: 1.7 }}>
        © 2026 아이티커넥트(주)<br/>
        contact@itconnect.dev · 010-8796-1600
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// V2 · Contrast hero — bigger profile photo, color-coded sections
// ─────────────────────────────────────────────────────────────
function LittV2() {
  return (
    <MobileFrame width={LW} theme="paper" showHome={false}>
      {/* Header */}
      <div style={{ padding: `12px ${LP}px`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Wordmark size={14} />
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.18em", color: "var(--text-soft)", textTransform: "uppercase" }}>
          Founder · 2026
        </span>
      </div>

      {/* Hero — large photo + dual CTA */}
      <div style={{
        margin: `8px ${LP}px 0`, borderRadius: 22, overflow: "hidden",
        background: "linear-gradient(180deg, var(--bg2) 0%, #FAF5E7 100%)",
        border: "1px solid var(--line-light)", position: "relative",
      }}>
        <div style={{ position: "relative", padding: "32px 22px 22px", textAlign: "center" }}>
          <div style={{ position: "absolute", left: "50%", top: -1, transform: "translateX(-50%)", width: 60, height: 4, background: "var(--brand-blue)", borderRadius: "0 0 4px 4px" }} />
          <div style={{ position: "relative", display: "inline-block" }}>
            <img src={PROFILE.photo} alt={PROFILE.name}
              style={{
                width: 156, height: 156, borderRadius: "50%",
                border: "5px solid #fff", boxShadow: "0 14px 32px -8px rgba(31,36,48,0.25)",
                objectFit: "cover", display: "block",
              }}
            />
            <span style={{
              position: "absolute", right: 6, bottom: 6, padding: "4px 10px",
              borderRadius: 99, background: "var(--brand-ink)", color: "#fff",
              fontFamily: "var(--font-mono)", fontSize: 9, letterSpacing: "0.14em",
              fontWeight: 600, textTransform: "uppercase",
              boxShadow: "0 0 0 2px #fff",
            }}>OPEN</span>
          </div>
          <h1 style={{ margin: "20px 0 6px", fontFamily: "var(--font-serif)", fontSize: 34, fontWeight: 700, letterSpacing: "0.12em", color: "var(--brand-ink)" }}>
            {PROFILE.name}
          </h1>
          <div style={{ fontSize: 13, color: "var(--text-soft)", letterSpacing: "0.04em" }}>
            CEO · 아이티커넥트(주) · <span style={{ fontFamily: "var(--font-mono)", letterSpacing: "0.06em" }}>{PROFILE.nameEn}</span>
          </div>
          <p style={{
            margin: "18px auto 0", maxWidth: 290,
            fontFamily: "var(--font-serif)", fontSize: 17, lineHeight: 1.55,
            color: "var(--brand-ink)", letterSpacing: "-0.015em",
          }}>
            AI로 업무를 혁신하고<br/>
            자동화 하는 방법을 <Mark>연구합니다.</Mark>
          </p>
        </div>
        {/* keyword chips bar */}
        <div style={{ padding: `0 20px 20px`, display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 6 }}>
          {PROFILE.pills.map((p) => <Pill small key={p}>{p}</Pill>)}
        </div>
      </div>

      {/* CTA pair */}
      <div style={{ padding: `14px ${LP}px 0`, display: "grid", gridTemplateColumns: "1.45fr 1fr", gap: 8 }}>
        <Btn variant="primary" iconLeft={<Icon.Mail />}>교육·컨설팅 문의</Btn>
        <Btn variant="light" iconLeft={<Icon.Kakao />}>카카오톡</Btn>
      </div>

      {/* SERVICES — color-coded eyebrow */}
      <SectionV2 eyebrow="01 · Services" color="var(--brand-blue)"
        lead="기업 업무를 AI로 혁신하기 위한 컨설팅과 바이브코딩 교육.">
        {SERVICES.map((s, i) => <ServiceCardV2 key={i} svc={s} />)}
      </SectionV2>

      {/* CONTENT */}
      <SectionV2 eyebrow="02 · Content" color="#c45b5b">
        {CONTENT_LINKS.map((c, i) => <LinkCardV2 key={i} {...c} />)}
      </SectionV2>

      {/* BOOK — feature card with cover larger */}
      <SectionV2 eyebrow="03 · Book" color="#c87d1a">
        <BookFeatureV2 />
      </SectionV2>

      {/* BUILD PROOF */}
      <SectionV2 eyebrow="04 · Build Proof" color="#3d8b5f">
        {PROOF.map((p, i) => <ProofCardV2 key={i} item={p} />)}
      </SectionV2>

      {/* CREDENTIALS */}
      <CredV1 />

      {/* FOLLOW */}
      <FollowV1 />
      <FooterV1 />
    </MobileFrame>
  );
}

function SectionV2({ eyebrow, color, lead, children }) {
  return (
    <section style={{ padding: `36px ${LP}px 0` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
        <span style={{ width: 4, height: 16, background: color, borderRadius: 2 }} />
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 600,
          letterSpacing: "0.18em", textTransform: "uppercase", color: color,
        }}>{eyebrow}</span>
      </div>
      {lead && (
        <p style={{ margin: "0 0 12px", fontSize: 12.5, color: "var(--text-secondary)", lineHeight: 1.6 }}>{lead}</p>
      )}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>{children}</div>
    </section>
  );
}

function ServiceCardV2({ svc }) {
  const styles = svc.highlight
    ? { bg: "var(--brand-ink)", color: "#fff", subtle: "rgba(255,255,255,0.55)", line: "rgba(255,255,255,0.08)" }
    : { bg: "#fff", color: "var(--brand-ink)", subtle: "var(--text-soft)", line: "var(--line-light)" };
  return (
    <div style={{
      padding: "18px 16px", borderRadius: 14, background: styles.bg,
      border: `1px solid ${styles.line}`, color: styles.color, position: "relative", overflow: "hidden",
    }}>
      {svc.highlight && (
        <span style={{
          position: "absolute", right: -30, top: -30, width: 110, height: 110, borderRadius: "50%",
          background: "rgba(255,224,102,0.25)", filter: "blur(20px)",
        }} />
      )}
      <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "start" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 10 }}>
          {svc.tags.map((t, i) => (
            <span key={t} style={{
              padding: "3px 8px", borderRadius: 99,
              background: i === 1 && svc.highlight ? "var(--accent-highlight)" : (svc.highlight ? "rgba(255,255,255,0.1)" : "rgba(62,94,146,0.08)"),
              color: i === 1 && svc.highlight ? "#5a4506" : (svc.highlight ? "#fff" : "var(--brand-blue)"),
              fontSize: 10.5, fontWeight: 600, letterSpacing: "0.02em",
            }}>{t}</span>
          ))}
        </div>
        <span style={{ color: svc.highlight ? "rgba(255,255,255,0.65)" : "var(--text-tertiary)", marginTop: 2 }}><Icon.ArrowUR /></span>
      </div>
      <div style={{ position: "relative", fontFamily: "var(--font-serif)", fontSize: 19, fontWeight: 700, lineHeight: 1.3, letterSpacing: "-0.018em" }}>{svc.title}</div>
      <div style={{ position: "relative", fontSize: 12.5, color: styles.subtle, marginTop: 6, lineHeight: 1.55 }}>{svc.desc}</div>
    </div>
  );
}

function LinkCardV2({ icon, iconBg, iconColor, tag, title, desc, href }) {
  const Tag = href ? "a" : "div";
  const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <Tag {...linkProps} style={{
      display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "center",
      padding: "14px 14px", borderRadius: 12,
      background: "#fff", border: "1px solid var(--line-light)",
      color: "inherit", textDecoration: "none", cursor: href ? "pointer" : "default",
    }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10, background: iconBg, color: iconColor,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><SvcGlyph kind={icon} color={iconColor} /></span>
      <div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: "-0.012em" }}>{title}</div>
        <div style={{ fontSize: 12, color: "var(--text-soft)", marginTop: 3, lineHeight: 1.5 }}>{desc}</div>
      </div>
      <span style={{ color: "var(--text-tertiary)" }}><Icon.ArrowUR /></span>
    </Tag>
  );
}

function BookFeatureV2() {
  return (
    <div style={{
      padding: "20px 18px", borderRadius: 14,
      background: "linear-gradient(135deg, #fef3c7 0%, #FAF5E7 50%, #ECE6DA 100%)",
      border: "1px solid var(--line-light)",
      display: "grid", gridTemplateColumns: "96px 1fr", gap: 18, alignItems: "center",
    }}>
      <div style={{
        width: 84, height: 118, borderRadius: 5,
        background: "linear-gradient(155deg, #2a3a5e, #1f2742)",
        boxShadow: "0 10px 24px -6px rgba(31,36,48,0.35)",
        position: "relative", overflow: "hidden", transform: "rotate(-3deg)",
      }}>
        <div style={{ position: "absolute", left: 8, top: 10, right: 8, fontFamily: "var(--font-serif)", fontSize: 9, color: "rgba(255,255,255,0.85)", lineHeight: 1.2 }}>비개발자를<br/>위한</div>
        <div style={{ position: "absolute", left: 8, top: 40, right: 8, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 12, color: "var(--accent-highlight)", lineHeight: 1, letterSpacing: "-0.02em" }}>바이브<br/>코딩</div>
        <div style={{ position: "absolute", right: 8, top: 8, width: 9, height: 9, borderRadius: "50%", background: "var(--accent-highlight)" }} />
        <div style={{ position: "absolute", left: 8, bottom: 8, fontFamily: "var(--font-mono)", fontSize: 5.5, letterSpacing: "0.15em", color: "rgba(255,255,255,0.55)" }}>ITCONNECT</div>
      </div>
      <div>
        <span style={{
          padding: "3px 8px", borderRadius: 4, background: "rgba(31,36,48,0.08)",
          fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.14em", color: "var(--brand-ink)",
          textTransform: "uppercase", fontWeight: 600,
        }}>UPCOMING BOOK</span>
        <div style={{ marginTop: 8, fontFamily: "var(--font-serif)", fontSize: 18, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: "-0.018em", lineHeight: 1.25 }}>
          『비개발자를 위한<br/>바이브코딩』
        </div>
        <div style={{ marginTop: 10 }}>
          <Pill small variant="yellow">출간 예정 · 알림 받기 →</Pill>
        </div>
      </div>
    </div>
  );
}

function ProofCardV2({ item }) {
  const Tag = item.href ? "a" : "div";
  const linkProps = item.href ? { href: item.href, target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <Tag {...linkProps} style={{
      padding: "0", borderRadius: 12, overflow: "hidden",
      background: "#fff", border: "1px solid var(--line-light)",
      display: "grid", gridTemplateColumns: "92px 1fr auto",
      minHeight: 148,
      color: "inherit", textDecoration: "none", cursor: item.href ? "pointer" : "default",
    }}>
      <div style={{ position: "relative", background: item.bg, overflow: "hidden" }}>
        {item.thumb ? (
          <img
            src={item.thumb}
            alt={`${item.name} 웹사이트 스크린샷`}
            style={{ width: "100%", height: "100%", display: "block", objectFit: "cover" }}
          />
        ) : (
          <>
            <span style={{ position: "absolute", left: 10, top: 10, width: 8, height: 8, borderRadius: 99, background: item.swatch }} />
            <span style={{ position: "absolute", left: 10, top: 22, right: 10, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.3)" }} />
            <span style={{ position: "absolute", left: 10, top: 30, width: 24, height: 2, borderRadius: 1, background: item.swatch, opacity: 0.85 }} />
            <span style={{ position: "absolute", left: 10, bottom: 10, width: 30, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.2)" }} />
          </>
        )}
      </div>
      <div style={{ padding: "18px 14px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: "-0.012em" }}>{item.name}</div>
        <div style={{ fontSize: 11.5, color: "var(--text-soft)", marginTop: 2, lineHeight: 1.5 }}>{item.desc}</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", padding: "0 14px", color: "var(--text-tertiary)" }}><Icon.ArrowUR /></div>
    </Tag>
  );
}

// ─────────────────────────────────────────────────────────────
// V3 · Dark editorial — premium navy/ink theme
// ─────────────────────────────────────────────────────────────
function LittV3() {
  const PG = "var(--accent-navy)";
  const CARD = "rgba(255,255,255,0.04)";
  const LINE = "rgba(255,255,255,0.08)";
  const INK = "#fff";
  return (
    <MobileFrame width={LW} theme="navy" showHome={false}>
      <div style={{ background: PG, color: INK, paddingBottom: 24, position: "relative", overflow: "hidden" }}>
        <DotGrid opacity={0.4} dark size={22} />
        <div style={{ position: "absolute", right: -100, top: -80, width: 280, height: 280, borderRadius: "50%", background: "rgba(255,224,102,0.13)", filter: "blur(80px)" }} />

        <div style={{ position: "relative" }}>
          {/* Header */}
          <div style={{ padding: `14px ${LP}px`, display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: `1px solid ${LINE}` }}>
            <Wordmark size={14} color="#fff" />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", color: "var(--accent-highlight)" }}>VOL.01 · 2026</span>
          </div>

          {/* Profile — center column */}
          <div style={{ padding: `40px ${LP}px 0`, textAlign: "center" }}>
            <div style={{
              position: "relative", display: "inline-block", borderRadius: "50%",
              padding: 4, background: "linear-gradient(135deg, rgba(255,224,102,0.55), rgba(255,224,102,0.05))",
            }}>
              <img src={PROFILE.photo} alt={PROFILE.name}
                style={{
                  width: 134, height: 134, borderRadius: "50%",
                  border: "2px solid var(--accent-navy)", objectFit: "cover", display: "block",
                  background: "#fff",
                }}
              />
            </div>
            <h1 style={{ margin: "20px 0 6px", fontFamily: "var(--font-serif)", fontSize: 30, fontWeight: 700, letterSpacing: "0.18em", color: "#fff" }}>
              {PROFILE.name}
            </h1>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.5)", letterSpacing: "0.16em", textTransform: "uppercase" }}>
              CEO · ITCONNECT
            </div>
            <p style={{ margin: "18px auto 0", maxWidth: 280, fontFamily: "var(--font-serif)", fontSize: 16.5, color: "rgba(255,255,255,0.92)", lineHeight: 1.55, letterSpacing: "-0.013em" }}>
              AI로 업무를 혁신하고<br/>
              자동화 하는 방법을 <span style={{ color: "var(--accent-highlight)" }}>연구합니다.</span>
            </p>
            <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center" }}>
              {PROFILE.pills.map((p) => (
                <span key={p} style={{
                  padding: "5px 10px", borderRadius: 99,
                  background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)",
                  fontSize: 11, color: "rgba(255,255,255,0.8)", fontWeight: 500,
                }}>{p}</span>
              ))}
            </div>
          </div>

          {/* CTA */}
          <div style={{ padding: `22px ${LP}px 0` }}>
            <Btn variant="yellow" size="lg" iconLeft={<Icon.Mail />}>기업 교육·컨설팅 문의하기</Btn>
          </div>
        </div>
      </div>

      {/* Sections on dark */}
      <SectionV3 eyebrow="Services" lead="기업 업무를 AI로 혁신하기 위한 컨설팅과 바이브코딩 교육.">
        {SERVICES.map((s, i) => <ServiceCardV3 key={i} svc={s} />)}
      </SectionV3>

      <SectionV3 eyebrow="Content">
        {CONTENT_LINKS.map((c, i) => <LinkCardV3 key={i} {...c} />)}
      </SectionV3>

      <SectionV3 eyebrow="Book">
        <BookCardV3 />
      </SectionV3>

      <SectionV3 eyebrow="Build Proof">
        {PROOF.map((p, i) => <ProofCardV3 key={i} item={p} />)}
      </SectionV3>

      <CredV3 />
      <FollowV3 />
      <FooterV3 />
    </MobileFrame>
  );
}

function SectionV3({ eyebrow, lead, children }) {
  return (
    <section style={{ padding: `40px ${LP}px 0`, background: "var(--accent-navy)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-highlight)" }}>{eyebrow}</span>
        <span style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.1)" }} />
      </div>
      {lead && <p style={{ margin: "0 0 14px", fontSize: 12.5, color: "rgba(255,255,255,0.62)", lineHeight: 1.65 }}>{lead}</p>}
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>{children}</div>
    </section>
  );
}

function ServiceCardV3({ svc }) {
  return (
    <div style={{
      padding: "16px 14px", borderRadius: 12,
      background: svc.highlight ? "linear-gradient(135deg, rgba(255,224,102,0.16), rgba(255,224,102,0.02))" : "rgba(255,255,255,0.04)",
      border: `1px solid ${svc.highlight ? "rgba(255,224,102,0.35)" : "rgba(255,255,255,0.08)"}`,
      display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "start",
    }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10,
        background: svc.highlight ? "var(--accent-highlight)" : "rgba(255,255,255,0.08)",
        color: svc.highlight ? "var(--brand-ink)" : "#fff",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><SvcGlyph kind={svc.icon} color={svc.highlight ? "var(--brand-ink)" : "#fff"} /></span>
      <div>
        <div style={{ display: "flex", gap: 4, marginBottom: 4, flexWrap: "wrap" }}>
          {svc.tags.map((t, i) => (
            <span key={t} style={{
              padding: "3px 8px", borderRadius: 99,
              background: svc.highlight && i === 1 ? "var(--accent-highlight)" : "rgba(255,255,255,0.08)",
              color: svc.highlight && i === 1 ? "var(--brand-ink)" : "rgba(255,255,255,0.85)",
              fontSize: 10, fontWeight: 600,
            }}>{t}</span>
          ))}
        </div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", letterSpacing: "-0.012em" }}>{svc.title}</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.6)", marginTop: 4, lineHeight: 1.5 }}>{svc.desc}</div>
      </div>
      <span style={{ color: "rgba(255,255,255,0.5)", paddingTop: 4 }}><Icon.ArrowUR /></span>
    </div>
  );
}

function LinkCardV3({ icon, iconBg, iconColor, tag, title, desc }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "44px 1fr auto", gap: 14, alignItems: "center",
      padding: "14px 14px", borderRadius: 12,
      background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
    }}>
      <span style={{
        width: 44, height: 44, borderRadius: 10, background: iconBg, color: iconColor,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
      }}><SvcGlyph kind={icon} color={iconColor} /></span>
      <div>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", letterSpacing: "-0.012em" }}>{title}</div>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginTop: 3, lineHeight: 1.5 }}>{desc}</div>
      </div>
      <span style={{ color: "rgba(255,255,255,0.5)" }}><Icon.ArrowUR /></span>
    </div>
  );
}

function BookCardV3() {
  return (
    <div style={{
      padding: "16px 14px", borderRadius: 12,
      background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
      display: "grid", gridTemplateColumns: "72px 1fr auto", gap: 14, alignItems: "center",
    }}>
      <div style={{
        width: 60, height: 84, borderRadius: 4,
        background: "linear-gradient(155deg, #4a5e8e, #2a3a5e)",
        boxShadow: "0 8px 16px -4px rgba(0,0,0,0.5)",
        position: "relative", overflow: "hidden",
      }}>
        <div style={{ position: "absolute", left: 6, top: 8, right: 6, fontFamily: "var(--font-serif)", fontSize: 7, color: "rgba(255,255,255,0.85)", lineHeight: 1.2 }}>비개발자를<br/>위한</div>
        <div style={{ position: "absolute", left: 6, top: 32, right: 6, fontFamily: "var(--font-serif)", fontWeight: 700, fontSize: 9.5, color: "var(--accent-highlight)", lineHeight: 1, letterSpacing: "-0.02em" }}>바이브<br/>코딩</div>
        <div style={{ position: "absolute", right: 6, top: 6, width: 7, height: 7, borderRadius: "50%", background: "var(--accent-highlight)" }} />
      </div>
      <div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "var(--accent-highlight)", textTransform: "uppercase" }}>UPCOMING BOOK</span>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", marginTop: 4, letterSpacing: "-0.012em" }}>{BOOK.title}</div>
        <div style={{ marginTop: 8 }}>
          <span style={{ padding: "3px 8px", borderRadius: 4, background: "var(--accent-highlight)", color: "var(--brand-ink)", fontSize: 10, fontWeight: 600 }}>출간 예정</span>
        </div>
      </div>
      <span style={{ color: "rgba(255,255,255,0.5)" }}><Icon.ArrowUR /></span>
    </div>
  );
}

function ProofCardV3({ item }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "64px 1fr auto", gap: 14, alignItems: "center",
      padding: "14px 14px", borderRadius: 12,
      background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
    }}>
      <div style={{ width: 52, height: 40, borderRadius: 5, background: item.bg, position: "relative", overflow: "hidden" }}>
        <span style={{ position: "absolute", left: 5, top: 5, width: 6, height: 6, borderRadius: 99, background: item.swatch }} />
        <span style={{ position: "absolute", left: 5, top: 14, right: 5, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.35)" }} />
        <span style={{ position: "absolute", left: 5, top: 20, width: 16, height: 2, borderRadius: 1, background: item.swatch, opacity: 0.7 }} />
        <span style={{ position: "absolute", left: 5, bottom: 5, width: 20, height: 2, borderRadius: 1, background: "rgba(255,255,255,0.2)" }} />
      </div>
      <div>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.14em", color: "rgba(255,255,255,0.45)", textTransform: "uppercase" }}>{item.tag}</span>
        <div style={{ fontSize: 14.5, fontWeight: 700, color: "#fff", marginTop: 3, letterSpacing: "-0.012em" }}>{item.name}</div>
        <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.5)", marginTop: 2, lineHeight: 1.5 }}>{item.desc}</div>
      </div>
      <span style={{ color: "rgba(255,255,255,0.5)" }}><Icon.ArrowUR /></span>
    </div>
  );
}

function CredV3() {
  return (
    <section style={{ padding: `40px ${LP}px 0`, background: "var(--accent-navy)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-highlight)" }}>Credentials</span>
        <span style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.1)" }} />
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 10 }}>Certification</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 22 }}>
        {CERTS.map((c) => (
          <span key={c} style={{
            padding: "6px 10px", borderRadius: 99, background: "rgba(255,255,255,0.04)",
            border: "1px solid rgba(255,255,255,0.1)", fontSize: 11.5, color: "rgba(255,255,255,0.85)",
            fontWeight: 500,
          }}>{c}</span>
        ))}
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", color: "rgba(255,255,255,0.4)", textTransform: "uppercase", marginBottom: 10 }}>Career</div>
      <div>
        {CAREER.map((c, i, arr) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "92px 1fr", gap: 12, padding: "10px 0",
            borderBottom: i === arr.length - 1 ? "none" : "1px dashed rgba(255,255,255,0.08)",
          }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>{c.y}</span>
            <span style={{ fontSize: 13.5, color: "#fff", fontWeight: 500, letterSpacing: "-0.01em" }}>{c.t}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function FollowV3() {
  return (
    <section style={{ padding: `40px ${LP}px 0`, background: "var(--accent-navy)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--accent-highlight)" }}>Follow</span>
        <span style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.1)" }} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 8 }}>
        {SNS.map((s) => (
          <div key={s.l} style={{
            display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
            padding: "14px 8px", borderRadius: 10,
            background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)",
          }}>
            <span style={{ color: "#fff" }}><SnsIcon i={s.i} /></span>
            <span style={{ fontSize: 10.5, color: "rgba(255,255,255,0.55)", fontWeight: 500 }}>{s.l}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function FooterV3() {
  return (
    <div style={{ padding: `36px ${LP}px 28px`, marginTop: 16, textAlign: "center", background: "var(--accent-navy)" }}>
      <Wordmark size={13} color="#fff" />
      <div style={{ marginTop: 10, fontSize: 11, color: "rgba(255,255,255,0.45)", lineHeight: 1.7 }}>
        © 2026 아이티커넥트(주)<br/>
        contact@itconnect.dev · 010-8796-1600
      </div>
    </div>
  );
}

Object.assign(window, { LittV1, LittV2, LittV3 });