o2o-negosium-original/landing/app/components/ui/typography.tsx

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

/*
 * 랜딩 텍스트 스케일 단일 소스. 페이지마다 text-[44px]/font-black/…을 직접 박지 말고
 * variant 로 통일한다. 색·크기 미세조정은 className 으로 합성.
 *
 * 값은 레퍼런스(statworx.com) 실측에서 가져왔다. 핵심 규칙 셋:
 *
 *  1) 크기·굵기·조임은 같이 움직인다. 44px 에 900 은 뭉툭하지만, 72px 에 800 +
 *     자간 -0.044em + 행간 1.0 은 확신으로 읽힌다(jitter.video 실측: 72px/800/-0.044em/0.95).
 *     굵기만 올리면 둔해지고, 크기만 올리면 헐거워진다.
 *  2) 한글 줄바꿈은 break-keep 만으로 부족하다. break-keep 은 어절 안에서 안 쪼개지게
 *     할 뿐 어디서 넘어갈지는 못 정해서 "에이전트는 기준 / 밖으로 안 나갑니다" 같은
 *     어색한 분절이 나온다. text-balance 를 같이 걸어 줄 길이를 고르게 맞춘다.
 *  3) 크면 조인다. 디스플레이는 자간 -0.042em·행간 1.0 까지 조이고, 작아질수록 푼다.
 *     단 한글은 행간 0.95 를 못 쓴다 — 라틴은 어센더·디센더가 여백을 만들지만
 *     한글은 네모틀을 꽉 채워 줄이 붙는다. 라틴 기준 0.95~1.0 을 그대로 쓰면
 *     두 줄짜리 한글 헤드라인이 서로 닿아 답답해진다. 1.07 이 붙지도 벌어지지도 않는 지점.
 *  3) 라벨은 작고 자간은 normal. 레퍼런스 아이브로우가 10.4px/600/자간 normal 이다.
 *     14px + tracking-wider + 알약 배경 + 반짝이 아이콘 조합이 전형적인 AI 생성 티다.
 *
 * 한글 보정: 본문은 레퍼런스(13.9px)보다 키운다. 한글은 14px 미만에서 판독성이 급격히
 * 떨어진다. 대신 디스플레이를 더 키워 대비(디스플레이:본문 ≈ 4.5:1)를 만든다.
 */
const typographyVariants = cva("", {
  variants: {
    variant: {
      // 라이트 섹션 h1
      display: "text-[44px] sm:text-[58px] md:text-[68px] font-extrabold tracking-[-0.04em] leading-[1.14] text-ink break-keep text-balance",
      // 다크 무대 히어로 h1. 색은 쓰는 쪽에서 준다(2톤 헤드라인).
      stageDisplay:
        "text-[40px] sm:text-[56px] md:text-[70px] lg:text-[80px] font-extrabold tracking-[-0.042em] leading-[1.07] break-keep text-balance",
      // 섹션 제목 h2
      /* 본문(15px)의 4.3배. 대비는 굵기가 아니라 크기로 만든다 —
         굵기를 올리면 뭉툭해지고, 크기를 올리면 확신이 생긴다.
         커질수록 자간을 더 조인다: 52px 에서 적당한 -0.021em 도 64px 에선 헐거워 보인다. */
      title: "text-[34px] md:text-[64px] font-extrabold tracking-[-0.042em] leading-[1.16] text-ink break-keep text-balance",
      // 섹션 내 서브 제목 (데모 패널 등)
      heading: "text-[24px] md:text-[32px] font-bold tracking-[-0.034em] leading-[1.14] text-ink break-keep text-balance",
      // 카드 제목
      cardTitle: "text-[20px] font-bold tracking-[-0.028em] leading-[1.3] text-ink break-keep",
      /* 섹션 상단 라벨. 영문 전용 — 한글 내용은 title 이 맡고, 여기는 조판 요소다.
         작은 대문자 산세리프 라벨은 어느 SaaS 랜딩에나 있다. 세리프 이탤릭으로 두면
         같은 자리에서 장식이 아니라 편집 디자인처럼 읽힌다. 한글은 넣지 않는다. */
      eyebrow: "font-display italic text-[24px] md:text-[30px] font-normal text-primary tracking-[0.005em]",
      // 섹션 리드 문단
      lead: "text-[16px] sm:text-[17px] text-ink-soft font-normal leading-[1.6] break-keep",
      body: "text-[15px] text-ink-soft font-normal leading-[1.6] break-keep",
      small: "text-[14px] text-ink-soft font-normal leading-[1.6] break-keep",
      caption: "text-[12.5px] text-ink-muted font-normal leading-[1.55] break-keep",
      // 메타 라벨 (단가 패널·푸터 컬럼 제목 등)
      micro: "text-[11px] font-semibold text-ink-muted tracking-normal",
    },
  },
  defaultVariants: { variant: "body" },
})

const defaultTag: Record<NonNullable<VariantProps<typeof typographyVariants>["variant"]>, React.ElementType> = {
  display: "h1",
  stageDisplay: "h1",
  title: "h2",
  heading: "h3",
  cardTitle: "h3",
  eyebrow: "span",
  lead: "p",
  body: "p",
  small: "p",
  caption: "p",
  micro: "span",
}

type TypographyProps = React.HTMLAttributes<HTMLElement> &
  VariantProps<typeof typographyVariants> & {
    /** 의미상 태그를 강제로 바꾸고 싶을 때 (예: cardTitle 을 h4 로) */
    as?: React.ElementType
    htmlFor?: string
  }

function Typography({ className, variant, as, ...props }: TypographyProps) {
  const Comp = as ?? defaultTag[variant ?? "body"]
  return <Comp className={cn(typographyVariants({ variant }), className)} {...props} />
}

export { Typography, typographyVariants }