/* global React */
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

// ════════════════════════════════════════════════════════════════
//  고방 블로그 단건 — 4차 라운드 상세페이지 (2026-08-27 세그먼트 기획 기준)
//  기존 variant-a.jsx(여름특가 15만원)를 레퍼런스로 재사용.
//  이번 라운드는 할인 강조 전면 반려 — 가치("원하는 키워드로 상위노출")
//  + 오해 해소("애드플러스 없이도 단건 구매 가능")가 핵심 메시지.
//  ⚠️ 카피는 초안 — 토미 확정 카피 패스 전까지 정교화 필요.
// ════════════════════════════════════════════════════════════════

const APPLY_URL = 'https://gobangmkt.github.io/blog_request/';
const ASK_URL   = 'https://open.kakao.com/o/sY3j3WKi';
const PRICE     = '150,000';

// 핸드폰 목업 슬라이드용 이미지 (2026-08-31, 사용자 제공 — assets/mockup/), 603x1024
const PROOF_IMAGES = Array.from({ length: 9 }, (_, i) => `assets/mockup/mockup-${i}.png`);

// ── SVG 아이콘 (icon-design 규칙: 라인 SVG, 이모지 금지) ──────────────
const Ic = {
  check:  (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M20 6 9 17l-5-5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  arrow:  (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  doc:    (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M14 3v5h5M8.5 13h7M8.5 16.5h5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  layers: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M12 3 3 8l9 5 9-5-9-5Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M3 13l9 5 9-5M3 16.5l9 5 9-5" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>),
  target: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><circle cx="12" cy="12" r="8.5" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="12" r="4.5" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="12" r="1.3" fill="currentColor"/></svg>),
  bell:   (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/><path d="M13.7 21a2 2 0 0 1-3.4 0" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  bolt:   (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>),
  users:  (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><circle cx="9" cy="8" r="3.2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 20c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/><path d="M16 5.2A3.2 3.2 0 0 1 18 11M21 20c0-2.6-1.6-4.6-4-5.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  chart:  (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M4 19V5M4 19h16M8 16v-4M12 16V8M16 16v-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  chat:   (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M21 11.5a8 8 0 0 1-11.6 7.1L3 20l1.4-6.4A8 8 0 1 1 21 11.5Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>),
  search: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8"/><path d="m20 20-3.5-3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
  circleCheck: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M8.5 12.5l2.2 2.2L16 9.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  sparkle: (p) => (<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>),
};

function Eyebrow({ children, dark }) {
  return (
    <span className="v2-eyebrow" style={{
      color: dark ? 'var(--accBr)' : 'var(--accD)',
      borderColor: dark ? 'rgba(134,239,172,.42)' : 'rgba(6,122,58,.34)',
      background: dark ? 'rgba(134,239,172,.10)' : 'rgba(6,122,58,.07)',
    }}>{children}</span>
  );
}

// ── 네비 (상단 고정 — CTA 항상 노출, 신청이 유일한 1순위 행동) ───────
function V2Nav() {
  const links = [
    { href: '#why', t: '고방 블로그' },
    { href: '#summary', t: '상품 혜택' },
    { href: '#myth', t: '신청 자격' },
    { href: '#price', t: '가격' },
    { href: '#process', t: '신청 과정' },
    { href: '#faq', t: 'FAQ' },
  ];
  return (
    <nav className="v2-nav">
      <div className="v2-container v2-nav-inner">
        <a href="#top" className="v2-nav-logo">
          <img src="assets/U_ALF.png" alt="고방" />
          <span className="v2-nav-name">고방 블로그</span>
        </a>
        <div className="v2-nav-links">
          {links.map((l) => <a key={l.href} href={l.href}>{l.t}</a>)}
        </div>
        <a href={ASK_URL} target="_blank" rel="noopener" className="v2-cta v2-cta-sm">
          <Ic.chat style={{ marginRight: 4 }} /> 전문가와 상담하기
        </a>
      </div>
    </nav>
  );
}

// ── FAQ ──────────────────────────────────────────────────────────
function V2Faq({ q, a, open: o }) {
  const [open, setOpen] = useStateD(!!o);
  return (
    <div className="v2-faq">
      <button className="v2-faq-q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span className="v2-faq-mark">Q</span>
        <span className="v2-faq-text">{q}</span>
        <span className={'v2-faq-plus' + (open ? ' is-open' : '')} aria-hidden>+</span>
      </button>
      <div className="v2-faq-a" style={{ gridTemplateRows: open ? '1fr' : '0fr' }}>
        <div className="v2-faq-a-inner"><div dangerouslySetInnerHTML={{ __html: a }} /></div>
      </div>
    </div>
  );
}

// ── 실제 노출 사례 — 핸드폰 목업 안에서 한 장씩 넘어가는 슬라이드 ──
// 자동 전환(3.5초) + 직접 스와이프/탭/도트클릭/화살표키로도 넘길 수 있음.
function ProofMarquee() {
  const [idx, setIdx] = useStateD(0);
  const timerRef = useRefD(null);
  const dragXRef = useRefD(null);

  const restartTimer = () => {
    if (timerRef.current) clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setIdx((i) => (i + 1) % PROOF_IMAGES.length), 3500);
  };
  useEffectD(() => {
    restartTimer();
    return () => clearInterval(timerRef.current);
  }, []);

  const goTo = (i) => {
    setIdx(((i % PROOF_IMAGES.length) + PROOF_IMAGES.length) % PROOF_IMAGES.length);
    restartTimer();
  };
  const next = () => goTo(idx + 1);
  const prev = () => goTo(idx - 1);

  const onPointerDown = (e) => { dragXRef.current = e.clientX; };
  const onPointerUp = (e) => {
    if (dragXRef.current == null) return;
    const dx = e.clientX - dragXRef.current;
    dragXRef.current = null;
    if (Math.abs(dx) < 8) { next(); return; } // 작은 이동이면 탭으로 간주
    if (dx > 40) prev();
    else if (dx < -40) next();
  };
  const onKeyDown = (e) => {
    if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') next();
    else if (e.key === 'ArrowLeft') prev();
  };

  return (
    <div className="v2-phone">
      <div
        className="v2-phone-frame"
        onPointerDown={onPointerDown}
        onPointerUp={onPointerUp}
        onKeyDown={onKeyDown}
        role="button"
        tabIndex={0}
        aria-label="다음 사진 보기 — 좌우로 넘길 수 있어요"
      >
        <span className="v2-phone-notch" aria-hidden />
        <div className="v2-phone-screen">
          {PROOF_IMAGES.map((src, i) => (
            <img
              key={src}
              src={src}
              alt="실제 네이버 검색 노출 캡처"
              className={'v2-phone-img' + (i === idx ? ' is-active' : '')}
              loading={i === 0 ? 'eager' : 'lazy'}
              draggable={false}
            />
          ))}
        </div>
      </div>
      <div className="v2-phone-dots">
        {PROOF_IMAGES.map((_, i) => (
          <button
            key={i}
            type="button"
            className={'v2-phone-dot' + (i === idx ? ' is-active' : '')}
            aria-label={`${i + 1}번째 사진 보기`}
            onClick={() => goTo(i)}
          />
        ))}
      </div>
    </div>
  );
}

// ── 블로그 지수 게이지 (meter) — 단일 색상(accent) 램프, 무지개 금지 ──
// 일반(0) → 준최1~7(1~7) → 최적1~3(8~10) → 최적1~4+(11~14), 현재 위치=최적2+(index 12)
function BlogIndexGauge({ currentIndex = 12 }) {
  // 그룹은 색으로, 그룹 내 순서는 명도로 — 일반(1,회색) / 준최적화(7,파랑) / 최적화(3,주황) / 최적화+(4,빨강)
  const TIERS = [
    { t: '일반',   c: '#9AA3AE' },
    { t: '준최1',  c: '#BFDBFE' },
    { t: '준최2',  c: '#93C5FD' },
    { t: '준최3',  c: '#60A5FA' },
    { t: '준최4',  c: '#3B82F6' },
    { t: '준최5',  c: '#2563EB' },
    { t: '준최6',  c: '#1D4ED8' },
    { t: '준최7',  c: '#1E40AF' },
    { t: '최적1',  c: '#FDBA74' },
    { t: '최적2',  c: '#FB923C' },
    { t: '최적3',  c: '#EA580C' },
    { t: '최적1+', c: '#FCA5A5' },
    { t: '최적2+', c: '#F87171' },
    { t: '최적3+', c: '#EF4444' },
    { t: '최적4+', c: '#DC2626' },
  ];
  const N = TIERS.length;
  const cx = 160, cy = 158, rOuter = 138, rInner = 122, rNeedle = 108;
  const toXY = (i, r) => {
    const deg = 180 - (i / (N - 1)) * 180;
    const rad = (deg * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy - r * Math.sin(rad)];
  };
  return (
    <div className="v2-gauge">
      <svg viewBox="0 0 320 178" className="v2-gauge-svg" role="img" aria-label={`블로그 지수: ${TIERS[currentIndex].t} (일반부터 최적4+까지 중)`}>
        {TIERS.map((tier, i) => {
          const [x1, y1] = toXY(i, rInner);
          const [x2, y2] = toXY(i, rOuter);
          return (
            <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
              stroke={tier.c}
              strokeWidth={i === currentIndex ? 5 : 3}
              strokeLinecap="round" />
          );
        })}
        {(() => {
          const [nx, ny] = toXY(currentIndex, rNeedle);
          return (
            <>
              <line x1={cx} y1={cy} x2={nx} y2={ny} stroke="#334155" strokeWidth="3" strokeLinecap="round" />
              <circle cx={cx} cy={cy} r="7" fill="#334155" />
            </>
          );
        })()}
        <text x={toXY(0, rOuter + 16)[0]} y={toXY(0, rOuter + 16)[1]} textAnchor="middle" className="v2-gauge-label">일반</text>
        <text x={toXY(4, rOuter + 16)[0]} y={toXY(4, rOuter + 16)[1] - 8} textAnchor="middle" className="v2-gauge-label">준최적화</text>
        <text x={toXY(9, rOuter + 16)[0]} y={toXY(9, rOuter + 16)[1] - 4} textAnchor="middle" className="v2-gauge-label">최적화</text>
        <text x={toXY(13, rOuter + 16)[0]} y={toXY(13, rOuter + 16)[1]} textAnchor="middle" className="v2-gauge-label">최적화+</text>
      </svg>
      <div className="v2-gauge-value">
        <span className="v2-gauge-value-l">블로그 지수</span>
        <span className="v2-gauge-value-n" style={{ color: TIERS[currentIndex].c }}>{TIERS[currentIndex].t}</span>
      </div>
    </div>
  );
}

// ── 정보 팝오버 — 모바일: 탭 토글 / PC: 호버 노출 ──
function InfoPopover({ children }) {
  const [open, setOpen] = useStateD(false);
  return (
    <div className="v2-info-wrap">
      <button
        type="button"
        className="v2-info-btn"
        aria-label="자세히 보기"
        aria-expanded={open}
        onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}
      >?</button>
      <div className={'v2-info-pop' + (open ? ' is-open' : '')}>
        {children}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
function BlogOnePostDetail() {
  const heroCtaRef = useRefD(null);
  const [showFab, setShowFab] = useStateD(false);
  useEffectD(() => {
    const el = heroCtaRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([entry]) => setShowFab(!entry.isIntersecting), { threshold: 0 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const proofs = [
    { I: Ic.users, n: '17~18만', l: '월 방문자', s: '일 평균 4,500명+' },
    { I: Ic.chart, n: '최적화 2+', l: '네이버 블로그 지수', s: '전체 상위 2.8%' },
    { I: Ic.check, n: '91%', l: '키워드 상위노출 비율', s: '관리 중인 키워드 기준' },
  ];
  const included = [
    { I: Ic.doc,    t: '고방 공식 블로그 정식 발행' },
    { I: Ic.layers, t: 'A타입(설명형)/B타입(후기형) 직접 선택' },
    { I: Ic.target, t: '원하는 키워드 1~3개 직접 지정' },
    { I: Ic.bell,   t: '발행 URL 알림톡 발송' },
  ];
  const steps = [
    { n: 1, t: '신청',       d: '신청 폼에서 지점 정보 · 키워드 · 강조 내용 입력', tag: '사장님' },
    { n: 2, t: '대상자 선정', d: '내부 검토 후 알림톡으로 결제 안내', tag: '고방' },
    { n: 3, t: '결제',       d: '안내받은 토스 결제링크로 결제', tag: '사장님' },
    { n: 4, t: '작성 · 발행', d: '결제 후 영업일 7일 내 작성 → 공식 블로그 발행', tag: '고방' },
    { n: 5, t: '결과 안내',   d: '발행 URL을 카카오 알림톡으로 발송', tag: '완료' },
  ];
  const summary = [
    { l: '포스팅', a1: <span className="v2-acc">고시원 최적화</span>, a2: '블로그에 포스팅' },
    { l: '키워드', a1: <><span className="v2-acc">3개</span>까지</>, a2: '선택 가능' },
    { l: '원고 타입', a1: <span className="v2-acc">설명형·후기형</span>, a2: '선택 가능', info: true },
  ];

  return (
    <div className="v2" id="top">
      <V2Nav />

      {/* ─── 1. HERO — 비대칭 2단(주장 / 증거), 중앙정렬 스택 아님 ─── */}
      <header className="v2-hero">
        <div className="v2-hero-glow" aria-hidden />
        <div className="v2-container v2-hero-grid">
          <div className="v2-hero-col-text">
            <div className="v2-hero-brand-row v2-up d1">
              <img src="assets/U_ALF.png" alt="고방" className="v2-hero-logo-sm" />
            </div>

            <h1 className="v2-h1 v2-up d2">
              <span className="v2-h1-lead">사장님 방이 더 잘 보이도록</span>
              <span className="v2-acc">네이버에<br />원하는 키워드로<br />노출시켜드려요</span>
            </h1>

            <p className="v2-hero-sub v2-up d3">
              U사장님 상품을 이용하지 않아도 OK!<br /><b>네이버 키워드 블로그 노출</b>하세요!
            </p>

            <div className="v2-hero-cta v2-up d4" ref={heroCtaRef}>
              <a href={APPLY_URL} target="_blank" rel="noopener" className="v2-cta v2-cta-float">
                1분 만에 신청하기 <Ic.arrow style={{ marginLeft: 4 }} />
              </a>
            </div>
          </div>

          <div className="v2-hero-col-visual v2-up d5">
            <span className="v2-hero-proof-label">실제 검색 노출 사례</span>
            <ProofMarquee />
          </div>
        </div>
      </header>

      {/* ─── 2. 신뢰 근거 — 히어로에서 본 예시가 우연이 아님을 숫자로 증명 ─── */}
      <section className="v2-sec v2-light" id="why">
        <div className="v2-container">
          <div className="v2-head">
            <span className="v2-h2-siren v2-why-icon" role="img" aria-label="검색">🔍</span>
            <h2 className="v2-why-title">
              사장님 지점,<br />
              <span className="v2-acc">네이버에서 잘 보이나요?</span>
            </h2>
            <p className="v2-why-sub">문의의 시작은 <b>"어떤 키워드에 검색 노출이 되는가"</b>입니다.</p>
            <p className="v2-why-sub"><b>검색 노출에 강한 고방 블로그</b>가<br />사장님 지점을 소개해드립니다.</p>
            <div className="v2-why-solution">
              <span className="v2-why-solution-lead">원하는 키워드와 내용으로<br />검색노출의 기회를 잡아보세요!</span>
            </div>
          </div>
          <a href="https://blog.naver.com/neoflat1116" target="_blank" rel="noopener" className="v2-homepage-shot">
            <img src="assets/gobang-homepage.png" alt="고방 공식 블로그 홈 화면 — 고시원 관련 글이 상단에 노출된 모습" />
          </a>
          <div className="v2-proof-grid v2-proof-grid-narrow">
            {proofs.map((p, i) => (
              <div key={i} className="v2-proof-card">
                {i === 1 && (
                  <InfoPopover>
                    <BlogIndexGauge currentIndex={12} />
                    <p className="v2-proof-note v2-note-left">
                      <b>블로그 지수</b>는 네이버가 매기는 블로그 신뢰도 등급이에요.<br />
                      일반 → 준최적화(1~7단계) → 최적화(1~3단계) → 최적화+(1~4단계) 순으로 올라가고, 등급이 높을수록 상위노출에 유리한데요.<br />
                      고방 블로그는 <b style={{ color: '#F87171' }}>최적화 2+</b>등급이라 검색 노출에 강한 채널이에요.
                    </p>
                  </InfoPopover>
                )}
                <span className="v2-proof-ic"><p.I /></span>
                <div className="v2-proof-n">{p.n}</div>
                <div className="v2-proof-l">{p.l}</div>
                <div className="v2-proof-s">{p.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── 2.5 상품 혜택 요약 ─── */}
      <section className="v2-sec v2-tint" id="summary">
        <div className="v2-container" style={{ maxWidth: 720 }}>
          <div className="v2-head">
            <h2 className="v2-h2">아낌없이 드리는<br /><span className="v2-acc v2-h2-big">3가지 혜택</span></h2>
          </div>
          <div className="v2-proof-grid v2-proof-grid-narrow">
            {summary.map((s, i) => (
              <div key={i} className="v2-proof-card v2-summary-card">
                {s.info && (
                  <InfoPopover>
                    <p className="v2-proof-note">
                      <b>A(설명형)</b> — 지점의 특징과 환경을 상세 설명 (<a href="https://blog.naver.com/neoflat1116/224260067840" target="_blank" rel="noopener">예시 글</a>)
                    </p>
                    <p className="v2-proof-note" style={{ marginTop: 10 }}>
                      <b>B(후기형)</b> — 실제 경험을 바탕으로 한 후기 (<a href="https://blog.naver.com/neoflat1116/224260216013" target="_blank" rel="noopener">예시 글</a>)
                    </p>
                  </InfoPopover>
                )}
                <div className="v2-summary-l">{s.l}</div>
                <div className="v2-summary-a">{s.a1}<br />{s.a2}</div>
              </div>
            ))}
          </div>

          <div className="v2-benefit-detail">
            <div className="v2-benefit-block v2-mini-card">
              <span className="v2-benefit-n">혜택1</span>
              <h3 className="v2-h3">고방 블로그는<br />검색 노출에 강한 채널이에요</h3>
              <p className="v2-sub">고방 블로그는 <b>최적화 2+ 등급</b>(전체 상위 2.8%)이라,<br />그 어떤 블로그보다 상위 노출의 기회가 커져요.</p>
              <div className="v2-benefit-gauge"><BlogIndexGauge currentIndex={12} /></div>
            </div>

            <div className="v2-benefit-block v2-mini-card">
              <span className="v2-benefit-n">혜택2</span>
              <h3 className="v2-h3">키워드를 사장님이<br />직접 고르실 수 있어요</h3>
              <p className="v2-sub">최대 3개까지 직접 정할 수 있어요.<br />방을 찾는 사람이 실제로 검색할 만한 키워드로 골라보세요!</p>
              <div className="v2-kwchips">
                <span className="v2-kwchip"><Ic.search />노량진 고시원</span>
                <span className="v2-kwchip"><Ic.search />강남역 쉐어하우스</span>
                <span className="v2-kwchip"><Ic.search />신림 여성전용 고시원</span>
              </div>
            </div>

            <div className="v2-benefit-block v2-mini-card">
              <span className="v2-benefit-n">혜택3</span>
              <h3 className="v2-h3">지점 상황에 맞는<br />작성 타입을 고르실 수 있어요</h3>
              <div className="v2-typecards">
                <div className="v2-typecard v2-mini-card">
                  <span className="v2-typecard-tag">A · 설명형</span>
                  <p>지점 특징·환경을 자세히 소개하고 싶을 때</p>
                  <a href="https://blog.naver.com/neoflat1116/224260067840" target="_blank" rel="noopener" className="v2-typecard-link">예시글 보러 가기 <Ic.arrow /></a>
                </div>
                <div className="v2-typecard v2-mini-card">
                  <span className="v2-typecard-tag">B · 후기형</span>
                  <p>실제 이용 경험처럼 신뢰감 있게 보여주고 싶을 때</p>
                  <a href="https://blog.naver.com/neoflat1116/224260216013" target="_blank" rel="noopener" className="v2-typecard-link">예시글 보러 가기 <Ic.arrow /></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─── 3. 오해해소 — "다른 상품 가입해야 하는거 아니야?" 해소 ─── */}
      <section className="v2-sec v2-light" id="myth">
        <div className="v2-container" style={{ maxWidth: 640 }}>
          <div className="v2-head">
            <p className="v2-doubt-lead"><b>U사장님에서 특히 인기 많던 블로그 포스팅을</b></p>
            <h2 className="v2-h2">이제 <span className="v2-acc v2-h2-big">누구나</span><br />신청할 수 있어요</h2>
            <p className="v2-sub">더 많은 사장님이 이용하실 수 있도록<br />인기 혜택만 따로 떼서 만들었어요.</p>
            <p className="v2-sub">U사장님 <b>애드플러스에 가입하지 않아도</b>,<br />신청하실 수 있습니다!</p>
          </div>
          <div className="v2-myth-card v2-mini-card">
            <span className="v2-myth-badge"><Ic.check />U사장님 상품 구매 없이도 OK</span>
            <p className="v2-myth-main">
              <b className="v2-myth-strong">블로그 포스팅만</b><br />
              <b className="v2-myth-strong">단독</b>으로 신청할 수 있어요
            </p>
            <span className="v2-myth-divider" aria-hidden />
            <p className="v2-myth-note">다른 상품 가입·구매는 필요 없어요</p>
          </div>
        </div>
      </section>

      {/* ─── 4. 가격 / 구매 (다크 밴드, 할인 표기 없음 — 2026-08-31 회의: 새학기 할인가 제거, 별도 5만원 쿠폰과 중복 우려) ─── */}
      <section className="v2-sec v2-dark v2-price-sec" id="price">
        <div className="v2-container">
          <div className="v2-head">
            <h2 className="v2-h2 v2-on-dark">작성 · 발행 · 알림까지<br />합리적인 가격으로<br />이용해 보세요!</h2>
          </div>
          <div className="v2-price-card">
            <div className="v2-pc-now"><em className="num">{PRICE}</em><span className="v2-pc-won">원</span></div>
            <div className="v2-pc-vat">VAT 별도 · 1건 단독 신청</div>
            <div className="v2-pc-included">
              {included.map((b, i) => (
                <div key={i} className="v2-pc-inc-row">
                  <span className="v2-tick"><Ic.check /></span>{b.t}
                </div>
              ))}
            </div>
            <a href={APPLY_URL} target="_blank" rel="noopener" className="v2-cta v2-cta-lg" style={{ marginTop: 28, width: '100%' }}>
              지금 신청하기 <Ic.arrow style={{ marginLeft: 4 }} />
            </a>
          </div>
        </div>
      </section>

      {/* ─── 5. 진행 프로세스 ─── */}
      <section className="v2-sec v2-light" id="process">
        <div className="v2-container" style={{ maxWidth: 760 }}>
          <div className="v2-head">
            <Eyebrow>진행 방식</Eyebrow>
            <h2 className="v2-h2">신청부터 발행까지</h2>
            <p className="v2-sub">U사장님 상품을 이용하지 않아도 <b>신청</b>할 수 있어요!</p>
          </div>
          <div className="v2-steps">
            {steps.map((s, i) => (
              <div key={i} className="v2-step">
                <div className="v2-step-n">{s.n}</div>
                {i !== steps.length - 1 && <div className="v2-step-line" aria-hidden />}
                <div className="v2-step-head">
                  <h3>{s.t}</h3>
                  <span className="v2-step-tag">{s.tag}</span>
                </div>
                <p className="v2-step-desc">{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── 6. FAQ ─── */}
      <section className="v2-sec v2-tint" id="faq">
        <div className="v2-container" style={{ maxWidth: 760 }}>
          <div className="v2-head"><Eyebrow>자주 묻는 질문</Eyebrow><h2 className="v2-h2">신청 전에 확인해 주세요</h2></div>
          <div className="v2-faq-box">
            <V2Faq open q="U사장님 상품을 이용하고 있지 않은데 신청할 수 있나요?"
              a="네, 해당 상품은 <strong>독립 상품</strong>이에요. U사장님 애드플러스 상품을 이용하고 있지 않아도 누구나 신청하실 수 있어요." />
            <V2Faq q="작성 후 알림을 주나요?"
              a="네, 작성이 완료되면 <strong>신청 시 입력한 번호로 카카오톡 알림</strong>이 발송돼요. 발행된 포스팅 URL도 함께 전달돼요." />
            <V2Faq q="작성한 블로그는 어디에 노출되나요?"
              a="신청하신 키워드 기준으로 <strong>네이버 블로그탭 상위 진입을 목표</strong>로 작성해요. 네이버 알고리즘 특성상 순위·유지 기간은 변동될 수 있어요." />
            <V2Faq q="원하는 키워드로 쓸 수 있나요?"
              a="네, 키워드는 <strong>1~3개 직접 입력</strong>해요. 단, 현재 고방 블로그가 상위노출 중인 키워드에 한하며, 최근 사용된 키워드는 사용이 제한될 수 있어요. 자세한 건 <strong>신청서에서 확인</strong>돼요." />
            <V2Faq q="여러 번 신청할 수 있나요?"
              a="<strong>고방에 등록된 지점당 1회</strong> 신청 가능해요." />
          </div>
        </div>
      </section>

      {/* ─── 7. FINAL CTA (다크 밴드, 할인 카피 없음) ─── */}
      <section className="v2-sec v2-dark v2-final" id="cta">
        <div className="v2-container v2-final-inner">
          <h2 className="v2-final-h">합리적인 가격에 원하는 키워드로<br />블로그 포스팅 맡겨보세요!</h2>
          <a href={APPLY_URL} target="_blank" rel="noopener" className="v2-cta v2-cta-lg">
            지금 신청하기 <Ic.arrow style={{ marginLeft: 4 }} />
          </a>
        </div>
      </section>

      <footer className="v2-foot">
        <div className="v2-container">
          <div className="v2-foot-copy">© 2026 neoflatMKT. All rights reserved.</div>
        </div>
      </footer>

      {/* 전면 고정 플로팅 CTA — 히어로 CTA가 화면에서 벗어난 뒤부터만 노출(상단부터 떠 있으면 번잡함) */}
      <div className={'v2-fab-wrap' + (showFab ? ' is-visible' : '')}>
        <span className="v2-fab-note">U사장님 상품을 구매하지 않아도</span>
        <a href={APPLY_URL} target="_blank" rel="noopener" className="v2-fab">
          1분 만에 신청하기 <Ic.arrow style={{ marginLeft: 4 }} />
        </a>
      </div>

      <V2Styles />
    </div>
  );
}

function V2Styles() {
  return (
    <style>{`
    .v2, .v2 *, .v2 *::before, .v2 *::after { box-sizing:border-box; }
    .v2 {
      --acc:#03C75A;
      --accD:#067A3A;
      --accBr:#86EFAC;
      --blue:#03C75A;
      --blueD:#067A3A;
      --dark:#0A2A1A;
      --tint:#E8F9EE;
      --paper:#FFFFFF;
      --ink:#12201F;
      --ink2:#4E6A69;
      --onD:#EFFCEF;
      --onD2:#A8E6BE;
      --line:#D7F0DE;
      font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
      background:var(--paper); color:var(--ink);
      -webkit-font-smoothing:antialiased;
    }
    .v2 .num { font-family:'Playfair Display', Georgia, serif; font-feature-settings:'tnum'; }
    .v2-container { width:100%; max-width:1080px; margin:0 auto; padding:0 24px; }
    .v2 b, .v2 strong { font-weight:800; }
    .v2-acc { color:var(--accD); font-weight:inherit; }

    .v2-eyebrow {
      display:inline-block; font-size:14px; font-weight:800; letter-spacing:.3px;
      padding:7px 15px; border-radius:999px; border:1px solid; margin-bottom:18px;
    }

    .v2-cta {
      box-sizing:border-box;
      display:inline-flex; align-items:center; justify-content:center;
      font-weight:800; border-radius:999px; text-decoration:none; white-space:nowrap;
      color:#fff; background:linear-gradient(135deg,#03C75A 0%,#067A3A 100%);
      box-shadow:0 10px 26px rgba(6,122,58,.34), 0 2px 6px rgba(6,122,58,.20);
      transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s;
    }
    .v2-cta:hover { transform:translateY(-3px); box-shadow:0 20px 42px rgba(6,122,58,.44), 0 4px 12px rgba(6,122,58,.26); }
    .v2-cta:active { transform:translateY(-1px); }
    .v2-cta-sm { font-size:14px; padding:11px 21px; }
    .v2-cta-lg { font-size:19px; padding:20px 46px; }
    .v2-cta svg { font-size:1.05em; }

    .v2-cta-float {
      font-size:20px; padding:22px 54px; gap:8px;
      box-shadow:0 10px 22px rgba(6,122,58,.24), 0 2px 6px rgba(6,122,58,.16);
    }

    .v2-fab-wrap {
      position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px); z-index:90;
      display:flex; flex-direction:column; align-items:center; gap:9px;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .22s ease, transform .22s ease, visibility .22s;
    }
    .v2-fab-wrap.is-visible {
      opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
    }
    .v2-fab-note {
      font-size:13px; font-weight:800; color:var(--accD); letter-spacing:-.2px;
      background:#fff; padding:6px 15px; border-radius:999px;
      border:1px solid var(--line); box-shadow:0 6px 16px rgba(6,122,58,.14);
    }
    .v2-fab {
      display:inline-flex; align-items:center; gap:6px; justify-content:center;
      font-size:18px; font-weight:800; color:#fff; letter-spacing:-.2px; text-decoration:none; white-space:nowrap;
      padding:17px 38px; border-radius:999px;
      background:linear-gradient(135deg,#03C75A 0%,#067A3A 100%);
      box-shadow:0 10px 24px rgba(6,122,58,.26), 0 2px 8px rgba(6,122,58,.18);
      transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s;
    }
    .v2-fab:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(6,122,58,.34); }
    .v2-fab svg { font-size:1.05em; }

    .v2-nav {
      position:sticky; top:0; z-index:80;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .v2-nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; }
    .v2-nav-logo { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:17px; font-weight:800; text-decoration:none; }
    .v2-nav-logo img { height:26px; width:auto; }
    .v2-nav-links { display:flex; align-items:center; gap:28px; }
    .v2-nav-links a { color:var(--ink2); font-size:14.5px; font-weight:600; text-decoration:none; transition:color .16s; }
    .v2-nav-links a:hover { color:var(--accD); }

    .v2-hero {
      position:relative; overflow:hidden;
      background:linear-gradient(180deg,#E9F9EE 0%,#F4FBF6 56%,#FFFFFF 100%);
      padding:74px 0 92px;
    }
    .v2-hero-glow {
      position:absolute; left:8%; top:-220px; width:820px; height:580px;
      background:radial-gradient(60% 100% at 38% 50%, rgba(3,199,90,.14) 0%, rgba(3,199,90,0) 60%),
                 radial-gradient(60% 100% at 66% 46%, rgba(6,163,74,.12) 0%, rgba(6,163,74,0) 62%);
      pointer-events:none;
    }
    .v2-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:12px; align-items:center; }
    .v2-hero-col-text { text-align:left; min-width:0; }
    .v2-hero-brand-row { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
    .v2-hero-logo-sm { height:34px; width:auto; filter:drop-shadow(0 6px 14px rgba(6,122,58,.20)); }
    .v2-tag {
      display:inline-flex; align-items:center; gap:9px;
      font-size:14px; font-weight:800; letter-spacing:-.2px; color:var(--accD);
      padding:8px 16px; border-radius:999px;
      background:#fff; border:1px solid var(--line); box-shadow:0 6px 16px rgba(6,122,58,.10);
    }
    .v2-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px rgba(3,199,90,.18); }
    .v2-h1 { font-size:52px; font-weight:900; line-height:1.16; letter-spacing:-1.8px; color:var(--ink); word-break:keep-all; margin:6px 0 18px; }
    .v2-h1-lead { display:block; font-size:24px; font-weight:700; line-height:1.4; letter-spacing:-.4px; color:var(--ink2); margin-bottom:6px; }
    .v2-hero-sub { font-size:21px; line-height:1.5; color:var(--ink2); font-weight:600; word-break:keep-all; max-width:460px; }
    .v2-hero-sub b { color:var(--ink); }
    .v2-hero-cta { margin-top:34px; }

    .v2-hero-col-visual { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
    .v2-hero-proof-label { display:block; width:100%; text-align:center; font-size:14px; font-weight:700; color:var(--accD); margin-bottom:16px; }
    .v2-phone { width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; gap:18px; }
    .v2-phone-frame {
      position:relative; width:min(100%, 300px); aspect-ratio:603/1024;
      background:#12201F; border-radius:34px; padding:12px;
      box-shadow:0 20px 44px rgba(16,37,43,.18);
      cursor:pointer; touch-action:pan-y; user-select:none; -webkit-user-select:none;
    }
    .v2-phone-frame:focus-visible { outline:2px solid var(--acc); outline-offset:4px; }
    .v2-phone-notch {
      position:absolute; top:12px; left:50%; transform:translateX(-50%);
      width:74px; height:18px; background:#12201F; border-radius:999px; z-index:2;
    }
    .v2-phone-screen { position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:#fff; }
    .v2-phone-img {
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
      opacity:0; transition:opacity .5s ease;
    }
    .v2-phone-img.is-active { opacity:1; }
    .v2-phone-dots { display:flex; align-items:center; gap:6px; }
    .v2-phone-dot { width:6px; height:6px; border-radius:999px; background:var(--line); border:none; padding:0; cursor:pointer; transition:background .2s, width .2s; }
    .v2-phone-dot.is-active { width:18px; background:var(--accD); }
    @media (prefers-reduced-motion:reduce){ .v2-phone-img { transition:none; } }

    .v2-sec { padding:100px 0; position:relative; }
    .v2-light { background:var(--paper); }
    .v2-tint { background:var(--tint); }
    .v2-dark { background:linear-gradient(150deg,#0B3B22 0%,#082A18 55%,#0A2A1A 100%); color:var(--onD); }
    .v2-head { text-align:center; max-width:720px; margin:0 auto 54px; }
    .v2-doubt-lead { font-size:16px; font-weight:600; line-height:1.5; font-style:italic; color:var(--ink2); margin-bottom:10px; }
    .v2-h2 { font-size:38px; font-weight:900; line-height:1.34; letter-spacing:-1.1px; word-break:keep-all; color:var(--ink); }
    .v2-h2-big { font-size:1.22em; }
    .v2-h2-siren { display:inline-block; font-size:68px; line-height:1; margin-bottom:14px; }
    .v2-on-dark { color:var(--onD); }
    .v2-h3 { font-size:26px; font-weight:900; letter-spacing:-.7px; line-height:1.32; word-break:keep-all; color:var(--ink); }
    .v2-sub { margin-top:15px; font-size:18px; line-height:1.65; color:var(--ink2); word-break:keep-all; }
    .v2-dark .v2-sub { color:var(--onD2); }

    /* ── "why" 헤드 전용 위계(2026-08-31 리디자인, 이 섹션 한정) ── */
    .v2-why-icon { font-size:56px; }
    .v2-why-title { margin:0; padding:0 6px; font-size:38px; font-weight:900; line-height:1.32; letter-spacing:-1.1px; word-break:keep-all; color:var(--ink); }
    .v2-why-sub { margin:20px 0 0; font-size:17px; font-weight:500; line-height:1.5; color:var(--ink); word-break:keep-all; }
    .v2-why-solution {
      display:flex; flex-direction:column; max-width:380px; margin:36px auto 0;
      background:var(--tint); border-radius:20px; padding:26px 30px;
      word-break:keep-all; text-align:center;
    }
    .v2-why-solution-lead { display:block; font-size:21px; font-weight:800; line-height:1.35; color:var(--accD); }

    .v2-homepage-shot { display:block; max-width:900px; margin:0 auto 46px; }
    .v2-homepage-shot img {
      width:100%; display:block; border-radius:16px;
      border:1px solid var(--line); box-shadow:0 14px 36px rgba(16,37,43,.12);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .v2-homepage-shot:hover img { transform:translateY(-3px); box-shadow:0 20px 44px rgba(16,37,43,.18); }
    .v2-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px; }
    .v2-proof-grid-narrow { max-width:900px; margin-left:auto; margin-right:auto; }
    .v2-proof-card { position:relative; z-index:1; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:32px 26px; box-shadow:0 8px 24px rgba(16,37,43,.05); transition:transform .16s, box-shadow .16s; }
    .v2-proof-card:has(.v2-info-pop.is-open) { z-index:30; }
    @media (hover:hover) and (pointer:fine) {
      .v2-proof-card:has(.v2-info-wrap:hover) { z-index:30; }
    }

    .v2-info-btn {
      position:absolute; top:14px; right:14px; z-index:31;
      width:22px; height:22px; border-radius:50%; padding:0;
      border:1.5px solid var(--line); background:var(--paper);
      color:var(--ink2); font-size:12px; font-weight:800; line-height:1;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      transition:border-color .15s, color .15s;
    }
    .v2-info-btn:hover { border-color:var(--acc); color:var(--acc); }
    .v2-info-pop {
      position:absolute; top:38px; left:50%; transform:translateX(-50%) translateY(-6px);
      width:min(88vw, 420px); max-width:420px; z-index:30;
      background:var(--paper); border:1px solid var(--line); border-radius:18px;
      box-shadow:0 20px 48px rgba(16,37,43,.18); padding:22px 24px;
      display:flex; flex-direction:column; align-items:center; gap:16px;
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity .16s ease, transform .16s ease, visibility .16s;
    }
    .v2-info-pop.is-open { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
    .v2-info-pop .v2-gauge-svg { width:180px; }
    .v2-info-pop .v2-proof-note { text-align:center; font-size:13.5px; }
    .v2-info-pop .v2-note-left { text-align:left; }
    @media (hover:hover) and (pointer:fine) {
      .v2-info-wrap:hover .v2-info-pop { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
    }
    .v2-proof-card:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(16,37,43,.1); }
    .v2-proof-ic { display:inline-flex; width:48px; height:48px; align-items:center; justify-content:center; font-size:24px; color:var(--acc); background:rgba(3,199,90,.1); border-radius:13px; margin-bottom:16px; }
    .v2-proof-n { font-size:36px; font-weight:900; letter-spacing:-1px; color:var(--accD); line-height:1.05; }
    .v2-proof-l { font-size:18px; font-weight:800; margin-top:10px; color:var(--ink); }
    .v2-proof-s { font-size:15px; color:var(--ink2); margin-top:6px; }

    .v2-gauge { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
    .v2-gauge-svg { width:220px; height:auto; overflow:visible; }
    .v2-gauge-label { font-size:11px; font-weight:700; fill:var(--ink2); }
    .v2-gauge-value { display:flex; flex-direction:column; align-items:center; margin-top:-6px; }
    .v2-gauge-value-l { font-size:12px; font-weight:600; color:var(--ink2); }
    .v2-gauge-value-n { font-size:20px; font-weight:800; color:var(--accD); margin-top:2px; }
    .v2-proof-note {
      margin:0; text-align:left;
      font-size:14.5px; line-height:1.65; color:var(--ink2); word-break:keep-all;
    }
    .v2-proof-note b { color:var(--ink); }
    .v2-proof-note a { color:var(--acc); font-weight:700; text-decoration:underline; }

    .v2-summary-card { text-align:center; }
    .v2-summary-l { font-size:14px; font-weight:700; color:var(--ink2); margin-bottom:12px; }
    .v2-summary-a { font-size:26px; font-weight:900; line-height:1.3; letter-spacing:-.6px; color:var(--ink); word-break:keep-all; }

    /* 카드 어휘: 정적 비교/설명 카드는 .v2-mini-card 계열만 사용.
       새 섹션에 카드가 필요하면 이 클래스를 확장할 것 — 로컬로 새로 정의 금지.
       (radius 16 · shadow 0 6px 18px · border 1px var(--line)) */
    .v2-mini-card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 18px rgba(16,37,43,.05); }

    /* ── 오해해소 강조 카드 ── */
    .v2-myth-card { margin-top:32px; max-width:600px; margin-left:auto; margin-right:auto; padding:40px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; }
    .v2-myth-badge { display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:800; color:var(--accD); background:var(--tint); border:1px solid var(--line); border-radius:999px; padding:11px 20px; }
    .v2-myth-badge svg { flex-shrink:0; }
    .v2-myth-main { margin:22px 0 0; font-size:22px; font-weight:700; line-height:1.5; color:var(--ink); word-break:keep-all; }
    .v2-myth-strong { color:var(--accD); font-weight:900; }
    .v2-myth-divider { display:block; width:44px; height:1px; background:var(--line); margin:22px 0 18px; }
    .v2-myth-note { font-size:14px; font-weight:600; color:var(--ink2); word-break:keep-all; }

    /* ── 혜택 상세(03-A/B/C) ── */
    .v2-benefit-detail { max-width:640px; margin:64px auto 0; display:flex; flex-direction:column; gap:56px; }
    .v2-benefit-block { text-align:center; padding:40px 32px; }
    .v2-benefit-block .v2-sub { max-width:520px; margin:15px auto 0; }
    .v2-benefit-n { display:block; font-size:16px; font-weight:900; color:var(--accD); letter-spacing:2px; margin-bottom:10px; font-family:'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; }
    .v2-benefit-gauge { display:flex; justify-content:center; margin-top:22px; }

    .v2-kwchips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; }
    .v2-kwchip { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--accD); background:var(--tint); border:1px solid var(--line); padding:9px 16px; border-radius:999px; }

    .v2-typecards { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; max-width:480px; margin-left:auto; margin-right:auto; }
    .v2-typecard { padding:20px 16px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; }
    .v2-typecard-tag { display:inline-block; font-size:18px; font-weight:800; color:var(--accD); background:var(--tint); padding:5px 12px; border-radius:7px; margin-bottom:10px; }
    .v2-typecard p { font-size:14px; color:var(--ink2); line-height:1.6; margin:0; word-break:keep-all; }
    .v2-typecard-link { display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-size:13px; font-weight:700; color:var(--accD); text-decoration:none; }
    .v2-typecard-link svg { font-size:.9em; }
    .v2-typecard-link:hover { text-decoration:underline; }
    @media (max-width:640px){
      .v2-typecards { grid-template-columns:1fr; }
      .v2-benefit-block { padding:28px 22px; }
    }

    .v2-ticks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
    .v2-ticks li { display:flex; align-items:center; gap:11px; font-size:17px; font-weight:600; color:var(--ink); }
    .v2-tick { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; font-size:14px; color:#fff; background:var(--acc); border-radius:50%; flex-shrink:0; }

    .v2-steps { display:flex; flex-direction:column; }
    .v2-step {
      position:relative; display:grid;
      grid-template-columns:46px 1fr; grid-template-rows:auto 7px auto 26px;
      column-gap:20px;
    }
    .v2-step-n {
      grid-column:1; grid-row:2; align-self:center; justify-self:center;
      width:46px; height:46px; border-radius:50%; background:var(--blue); color:#fff;
      display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;
      z-index:1; box-shadow:0 6px 16px rgba(10,110,60,.28);
    }
    .v2-step-line {
      grid-column:1; grid-row:2 / 5; justify-self:center;
      width:2px; background:linear-gradient(180deg,var(--blue),rgba(3,199,90,.18));
    }
    .v2-step-head { grid-column:2; grid-row:1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .v2-step-head h3 { margin:0; font-size:21px; font-weight:800; line-height:1; color:var(--ink); }
    .v2-step-tag { font-size:13px; font-weight:800; line-height:1; color:var(--accD); background:rgba(3,199,90,.12); padding:5px 11px; border-radius:999px; }
    .v2-step-desc { grid-column:2; grid-row:3; font-size:16px; color:var(--ink2); line-height:1.6; word-break:keep-all; }

    /* 가격 — 할인 비교 없이 담백하게 */
    .v2-price-card { position:relative; max-width:480px; margin:0 auto; text-align:center; background:#fff; border-radius:26px; padding:44px 40px; box-shadow:0 24px 56px rgba(0,0,0,.26); }
    .v2-pc-now { display:inline-flex; align-items:baseline; justify-content:center; }
    .v2-pc-now .num { font-size:46px; font-weight:800; line-height:1; letter-spacing:-1.5px; color:var(--accD); }
    .v2-pc-won { font-size:22px; font-weight:800; color:var(--blueD); margin-left:4px; }
    .v2-pc-vat { font-size:16px; color:var(--ink2); margin-top:10px; }
    .v2-pc-included { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; text-align:left; }
    .v2-pc-inc-row { display:flex; align-items:center; gap:11px; font-size:15px; line-height:1.5; color:var(--ink); font-weight:600; }

    .v2-faq-box { background:#fff; border:1px solid var(--line); border-radius:20px; padding:4px 26px; box-shadow:0 8px 24px rgba(16,37,43,.05); }
    .v2-faq { border-bottom:1px solid var(--line); }
    .v2-faq:last-child { border-bottom:none; }
    .v2-faq-q { width:100%; display:flex; align-items:flex-start; gap:12px; text-align:left; padding:22px 0; font-size:18px; font-weight:700; line-height:1.5; color:var(--ink); background:none; border:none; cursor:pointer; }
    .v2-faq-mark { flex-shrink:0; font-size:13px; font-weight:900; color:var(--accD); background:rgba(3,199,90,.12); padding:3px 9px; border-radius:7px; margin-top:1px; }
    .v2-faq-text { flex:1; word-break:keep-all; }
    .v2-faq-plus { flex-shrink:0; font-size:24px; color:var(--acc); transition:transform .2s; line-height:1; }
    .v2-faq-plus.is-open { transform:rotate(45deg); }
    .v2-faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
    .v2-faq-a-inner { overflow:hidden; }
    .v2-faq-a-inner > div { padding:0 0 22px 34px; font-size:16px; color:var(--ink2); line-height:1.7; word-break:keep-all; }

    .v2-final-inner { position:relative; z-index:1; text-align:center; display:flex; flex-direction:column; align-items:center; }
    .v2-final-h { font-size:38px; font-weight:900; line-height:1.28; letter-spacing:-1px; color:var(--onD); word-break:keep-all; margin:0 0 30px; }

    .v2-foot { background:#0A2A1C; color:var(--onD2); padding:48px 0 104px; border-top:1px solid rgba(134,239,172,.12); }
    .v2-foot-copy { margin-top:22px; font-size:13px; color:#5E7B7E; }

    @keyframes v2up { from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
    .v2-up { opacity:0; animation:v2up .6s cubic-bezier(.16,1,.3,1) forwards; }
    .v2-up.d1{animation-delay:.05s}.v2-up.d2{animation-delay:.14s}.v2-up.d3{animation-delay:.24s}
    .v2-up.d4{animation-delay:.34s}.v2-up.d5{animation-delay:.46s}.v2-up.d6{animation-delay:.58s}

    @media (max-width:860px){
      .v2-proof-grid { grid-template-columns:1fr; }
      .v2-hero-grid { grid-template-columns:1fr; gap:48px; text-align:center; }
      .v2-hero-col-text { text-align:center; }
      .v2-hero-brand-row { justify-content:center; }
      .v2-hero-col-visual { align-items:center; }
      .v2-hero-sub { max-width:100%; margin-left:auto; margin-right:auto; }
    }
    @media (max-width:400px){
      .v2-container { padding:0 16px; }
    }
    @media (max-width:640px){
      .v2-container { padding:0 18px; }
      .v2-sec { padding:64px 0; }
      .v2-hero { padding-top:120px; padding-bottom:64px; }
      .v2-hero-grid { grid-template-columns:1fr; gap:44px; }
      .v2-hero-col-text { text-align:center; }
      .v2-hero-brand-row { justify-content:center; }
      .v2-hero-col-visual { align-items:center; }
      .v2-hero-sub { max-width:100%; }
      .v2-h1 { font-size:34px; letter-spacing:-1px; }
      .v2-h1-lead { font-size:18px; }
      .v2-hero-sub { font-size:18px; }
      .v2-tag { font-size:14px; padding:9px 16px; }
      .v2-h2 { font-size:27px; letter-spacing:-.6px; }
      .v2-h3 { font-size:21px; }
      .v2-sub { font-size:16px; }
      .v2-why-icon { font-size:46px; }
      .v2-why-title { font-size:26px; letter-spacing:-.5px; }
      .v2-why-sub { font-size:15px; }
      .v2-why-solution { padding:22px 24px; max-width:320px; }
      .v2-why-solution-lead { font-size:18px; }
      .v2-myth-card { padding:28px 24px; }
      .v2-myth-main { font-size:20px; }
      .v2-info-pop { width:min(92vw, 340px); padding:18px 18px; }
      .v2-info-pop .v2-gauge-svg { width:160px; }
      .v2-price-card { padding:34px 22px; }
      .v2-pc-now .num { font-size:38px; } .v2-pc-won { font-size:19px; }
      .v2-final-h { font-size:26px; }
      .v2-nav-inner { flex-wrap:wrap; height:auto; padding-top:14px; padding-bottom:12px; row-gap:10px; }
      .v2-nav-links { flex:0 0 100%; gap:18px; overflow-x:auto; }
      .v2-nav-links a { white-space:nowrap; font-size:14px; }
      .v2-fab-wrap { left:16px; right:16px; bottom:16px; transform:translateY(12px); }
      .v2-fab-wrap.is-visible { transform:translateY(0); }
      .v2-fab { width:100%; padding:16px 0; font-size:16px; }
    }
    @media (prefers-reduced-motion:reduce){ .v2-up { opacity:1; animation:none; } }
    `}</style>
  );
}

Object.assign(window, { BlogOnePostDetail });