타입 스케일·폰트 패밀리·사용 가이드를 담은 폰트 시스템 문서

const FONT_URL =
  "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Gothic+A1:wght@400;500;600;700;800&display=swap";

const SCALE = [
  { token: "Display", spec: "32 / ExtraBold", sample: "페이지 메인 타이틀", size: 32, weight: 800, usage: "로그인 화면, 주요 페이지 헤더" },
  { token: "Heading 1", spec: "28 / Bold", sample: "노트 라이브러리", size: 28, weight: 700, usage: "섹션 대제목" },
  { token: "Heading 2", spec: "20 / Bold", sample: "컴포넌트 섹션", size: 20, weight: 700, usage: "그룹 헤더" },
  { token: "Heading 3", spec: "18 / Bold", sample: "Leafnote", size: 18, weight: 700, usage: "카드 헤더, 모달 제목" },
  { token: "Title", spec: "16 / Bold", sample: "업로드", size: 16, weight: 700, usage: "카드 제목, 탭 레이블" },
  { token: "Body Large", spec: "15 / Regular", sample: "PDF 파일을 드래그하거나 직접 올려주세요", size: 15, weight: 400, usage: "주요 본문" },
  { token: "Body", spec: "14 / Regular", sample: "업로드된 모든 노트를 관리하고 AI 기능을 설정합니다", size: 14, weight: 400, usage: "일반 본문, 설명 텍스트" },
  { token: "Label", spec: "13 / Medium", sample: "레이블 텍스트", size: 13, weight: 500, usage: "폼 레이블, 태그" },
  { token: "Caption", spec: "12 / Regular", sample: "보조 설명 텍스트", size: 12, weight: 400, usage: "메타 정보, 날짜" },
];

const FAMILIES = [
  { name: "Gothic A1", role: "Korean UI Primary", family: "'Gothic A1',sans-serif", weights: [["Regular 400", 400], ["SemiBold 600", 600], ["Bold 700", 700], ["ExtraBold 800", 800]] },
  { name: "Geist", role: "Navigation & Workspace", family: "'Geist',sans-serif", weights: [["Regular 400", 400], ["Medium 500", 500], ["SemiBold 600", 600], ["Bold 700", 700]] },
  { name: "Inter", role: "Data & Settings", family: "'Inter',sans-serif", weights: [["Regular 400", 400], ["Medium 500", 500], ["SemiBold 600", 600], ["Bold 700", 700]] },
] as const;

const GUIDES = [
  { title: "한국어 텍스트", body: "Gothic A1 사용. 모든 한국어 UI 레이블, 본문, 제목에 적용." },
  { title: "네비게이션 영역", body: "Geist 사용. 사이드바, 워크스페이스, 상단 네비게이션." },
  { title: "데이터/설정 화면", body: "Inter 사용. 테이블, 설정 모달, 숫자 데이터." },
  { title: "행간 (Line Height)", body: "본문 텍스트 150%, 제목 Auto." },
  { title: "자간 (Letter Spacing)", body: "기본 0%, 캡션 2-4%." },
  { title: "색상 규칙", body: "제목 #111827, 본문 #374151, 보조 #6B7280, 비활성 #9CA3AF." },
];

function SectionTitle({ children }: { children: string }) {
  return (
    <div className="flex items-center gap-3">
      <span className="h-6 w-1 shrink-0 rounded-[2px] bg-[#6366f1]" aria-hidden="true" />
      <h3 className="font-['Gothic_A1',sans-serif] text-[18px] font-bold leading-normal text-[#111827] sm:text-[20px]">{children}</h3>
    </div>
  );
}

export default function FontSystemDoc() {
  return (
    <section className="w-full bg-white px-4 py-12 font-['Geist',sans-serif] sm:px-10 sm:py-20 lg:px-20">
      <link rel="stylesheet" href={FONT_URL} precedence="default" />
      <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-16">
        <header className="flex flex-col gap-3 border-b-2 border-[#111827] pb-3">
          <h2 className="text-[24px] font-bold leading-normal text-[#111827] sm:text-[28px]">04 · FONT SYSTEM</h2>
        </header>

        <div className="flex flex-col gap-8">
          <SectionTitle>타입 스케일 (Type Scale)</SectionTitle>
          <div className="w-full overflow-x-auto">
            <table className="w-full min-w-[720px] border-collapse text-left">
              <thead>
                <tr className="border-b border-[#e5e7eb]">
                  <th scope="col" className="w-[140px] py-4 pr-6 text-[12px] font-semibold uppercase leading-normal text-[#9ca3af]">Token</th>
                  <th scope="col" className="w-[180px] py-4 pr-6 font-['Inter',sans-serif] text-[13px] font-semibold leading-normal text-[#9ca3af]">Size / Weight</th>
                  <th scope="col" className="py-4 pr-6 font-['Gothic_A1',sans-serif] text-[13px] font-semibold leading-normal text-[#9ca3af]">Specimen</th>
                  <th scope="col" className="w-[240px] py-4 font-['Gothic_A1',sans-serif] text-[12px] font-normal leading-normal text-[#6b7280] lg:w-[320px]">Usage</th>
                </tr>
              </thead>
              <tbody>
                {SCALE.map((row) => (
                  <tr key={row.token} className="border-b border-[#e5e7eb]">
                    <th scope="row" className="py-4 pr-6 text-[12px] font-semibold uppercase leading-normal text-[#6366f1]">{row.token}</th>
                    <td className="py-4 pr-6 font-['Inter',sans-serif] text-[13px] font-medium leading-normal text-[#6b7280]">{row.spec}</td>
                    <td className="py-4 pr-6 font-['Gothic_A1',sans-serif] leading-normal text-[#111827]" style={{ fontSize: row.size, fontWeight: row.weight }}>
                      {row.sample}
                    </td>
                    <td className="py-4 font-['Gothic_A1',sans-serif] text-[12px] leading-normal text-[#6b7280]">{row.usage}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="flex flex-col gap-8">
          <SectionTitle>폰트 패밀리 (Font Families)</SectionTitle>
          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {FAMILIES.map((f) => (
              <div key={f.name} className="flex flex-col gap-6 rounded-xl bg-[#f3f4f6] p-8">
                <div className="flex flex-col gap-1 leading-normal">
                  <p className="text-[20px] font-bold text-[#111827]" style={{ fontFamily: f.family }}>
                    {f.name}
                  </p>
                  <p className="text-[13px] text-[#6b7280]">{f.role}</p>
                </div>
                <p className="py-3 text-center text-[64px] font-bold leading-normal text-[#111827] sm:text-[80px]" style={{ fontFamily: f.family }} aria-hidden="true">
                  Aa
                </p>
                <div className="flex flex-col gap-2 pt-2 leading-normal">
                  <p className="text-[11px] font-bold uppercase text-[#9ca3af]">Weights</p>
                  <ul className="flex flex-col gap-1 text-[14px] text-[#374151]" style={{ fontFamily: f.family }}>
                    {f.weights.map(([label, w]) => (
                      <li key={label} style={{ fontWeight: w }}>
                        {label}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="flex flex-col gap-8">
          <SectionTitle>사용 가이드 (Usage Guidelines)</SectionTitle>
          <div className="grid grid-cols-1 gap-x-20 gap-y-6 md:grid-cols-2 lg:max-w-[1224px]">
            {GUIDES.map((g) => (
              <div key={g.title} className="flex flex-col gap-3 rounded-lg border border-[#e5e7eb] p-6 font-['Gothic_A1',sans-serif]">
                <p className="text-[16px] font-bold leading-normal text-[#111827]">{g.title}</p>
                <p className="text-[14px] leading-[1.5] text-[#374151]">{g.body}</p>
              </div>
            ))}
          </div>
        </div>

        <footer className="flex justify-end pt-10">
          <p className="text-[12px] font-semibold uppercase leading-normal text-[#9ca3af]">Design System v1.2 · Leafnote</p>
        </footer>
      </div>
    </section>
  );
}