// 이 파일이 하는 일: "타이포그래피" 코스 — 세리프/산세리프 구분에서 시작해
// 한글 폰트, 크기 위계, 행간·자간, 굵기, 폰트 조합, 라이선스, 실습까지
// 8개 섹션으로 안내하는 정적 학습 페이지. (API 호출 없음)
// 학습 포인트: 스타일은 global.css의 가이드 전용 클래스(step-card, code-block, tip 등)를
// 재사용한다 — 색이나 폰트를 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램·표는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

import { Link } from 'react-router-dom';

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_SERIF_VS_SANS = `세리프(Serif) vs 산세리프(Sans-serif) — 획 끝의 '삐침' 유무

세리프                          산세리프
──────────────────────      ──────────────────────
획 끝에 장식(삐침)이 있음         획 끝이 깔끔하게 잘림
붓글씨·활판 인쇄의 후예           금속 간판·표지판의 후예
예) 명조 계열, Times 계열        예) 고딕 계열, Pretendard

언제 뭘 쓰나?
세리프   : 긴 글(소설·논문·기사 본문), 격식·전통·신뢰의 분위기
산세리프 : 화면(UI), 버튼·메뉴·대시보드, 작은 글씨, 모던한 분위기

→ 웹 서비스 UI는 거의 다 산세리프예요. 화면 픽셀에서는
  가는 삐침이 뭉개져서 오히려 지저분해 보이기 때문!`;

const CODE_HANGUL = `한글이 폰트 만들기 어려운 이유 — 글자 수부터 다릅니다.

알파벳: A~Z 대소문자 + 숫자 + 기호 ≈ 100자 남짓
한글  : 초성×중성×종성 조합 = 완성형 11,172자!

그래서 생기는 일:
- 잘 만든 무료 한글 폰트가 귀함 (만드는 비용이 어마어마)
- 영문 폰트만 지정하면 한글은 브라우저 기본 폰트로 '대체'되어
  한글·영문의 굵기와 크기가 따로 노는 '짬뽕 화면'이 됨

Pretendard를 쓰는 이유:
1) 11,172자 완성형을 모두 갖춘 고품질 무료 폰트 (SIL OFL 라이선스)
2) Thin(100)~Black(900) 9단계 굵기 — 위계 표현이 자유로움
3) 영문·숫자도 한글과 어울리게 조율되어 있어 섞어 써도 자연스러움
→ 우리 학습 플랫폼의 본문 폰트도 이 계열이에요.`;

const CODE_SCALE = `크기 위계(Type Scale) — 크기 차이가 곧 '읽는 순서'

역할          크기 예시    쓰임
─────────────────────────────────────────────
페이지 제목    28~36px     화면에 딱 하나. "여긴 어디?"의 답
섹션 제목      20~24px     내용의 큰 덩어리 구분
본문          14~16px     실제로 읽는 글. 기준점!
캡션·보조      12~13px     날짜, 힌트, 라벨 — 작지만 12px 밑으로는 금지

포인트: 크기를 '감'으로 정하지 말고 단계(스케일)를 정해 두고
그 안에서만 고르세요. 21px, 17px, 15px... 이렇게 제멋대로면
화면 전체가 미묘하게 어수선해집니다. 계단은 몇 개만, 간격은 일정하게.`;

const CODE_LINE_HEIGHT = `행간(line-height)·자간(letter-spacing) — 가독성의 8할

행간 = 줄과 줄 사이 간격 (책의 '줄 간격')
─────────────────────────────────────────────
너무 좁으면(1.2 이하) : 줄이 붙어서 답답, 다음 줄 찾다가 길을 잃음
적당하면(1.5~1.7)     : 본문 기준 가장 편안한 범위
너무 넓으면(2.0 이상) : 문단이 흩어져서 한 덩어리로 안 읽힘

CSS에서는 단위 없는 배수를 추천:
  line-height: 1.6;   /* 글자 크기의 1.6배 — 크기가 바뀌어도 비율 유지 */

자간 = 글자와 글자 사이 간격
─────────────────────────────────────────────
한글 본문 : 기본값 그대로 또는 살짝 좁게 (-0.01em ~ -0.02em)
제목(큰 글씨) : 클수록 자간이 넓어 '보이므로' 살짝 좁히면 단단해 보임
영문 대문자 라벨 : 반대로 살짝 벌리면(+0.05em) 읽기 좋아짐`;

const CODE_WEIGHT = `굵기(font-weight)로 강조하기 — 색보다 먼저 굵기

숫자     이름        쓰임
─────────────────────────────────────────────
400     Regular     본문 기본값
500     Medium      살짝 강조 (메뉴, 라벨)
600     SemiBold    소제목, 버튼 텍스트
700     Bold        제목, 진짜 중요한 단어

강조의 우선순위:
1순위 굵기 ↑   : 조용하지만 확실함. 어디서나 안전
2순위 크기 ↑   : 위계 자체를 바꿀 때만
3순위 색 변경  : 남용하면 '뭐가 중요한지 모르는 화면'이 됨

→ 형광펜을 교과서 전체에 칠하면 아무것도 강조 안 한 것과 같죠.
  Bold도 마찬가지 — 한 문단에 한두 곳이면 충분합니다.`;

const CODE_TWO_FONTS = `한 화면 폰트는 2종까지 — 조합의 기본 공식

안전한 조합 패턴:
┌─────────────────────────────────────────┐
│ 본문용 1종 (예: Pretendard)              │ ← 화면의 90%
│ + 포인트용 1종 (예: 코드용 고정폭 폰트)   │ ← 코드·숫자·로고
└─────────────────────────────────────────┘

3종 이상이 되면:
- 화면이 '전단지'처럼 산만해짐
- 웹폰트 파일이 늘어나 로딩도 느려짐 (한글 폰트는 특히 무거움!)

우리 플랫폼도 딱 2종이에요:
1) 본문·제목 전부 = 산세리프 1종 (굵기만 바꿔 위계 표현)
2) code-block·icode = 고정폭(monospace) 1종 (코드는 글자 폭이
   같아야 들여쓰기가 안 깨지니까)`;

const CODE_LICENSE = `무료 폰트 ≠ 마음대로 — 라이선스 4가지 체크포인트

체크          질문
─────────────────────────────────────────────
상업적 이용    회사 서비스(돈 버는 곳)에 써도 되나?
웹폰트 임베딩  파일을 서버에 올려 배포해도 되나?
수정          글자를 고쳐서 재배포해도 되나?
표기 의무      "이 폰트를 썼습니다" 고지가 필요한가?

안심 라이선스: SIL OFL — 상업 이용·웹 임베딩·수정 모두 허용.
Pretendard가 이 라이선스예요.

함정 사례:
- "개인 사용 무료" 폰트를 회사 서비스에 씀 → 라이선스 위반!
- 유료 폰트가 깔린 PC에서 만든 이미지를 웹에 올림 → 계약 범위 확인 필요
→ 회사 프로젝트에 폰트를 추가하기 전엔 반드시 라이선스 원문을 읽고,
  애매하면 멘토에게 물어보세요. "무료 다운로드 가능"과
  "무료 사용 가능"은 다른 말입니다.`;

const CODE_PRACTICE_HIERARCHY = `실습 1 — 우리 플랫폼의 타이포 위계 수사하기

지금 이 페이지에서 F12 → 요소 선택 도구(Ctrl+Shift+C)로
아래 네 곳을 하나씩 클릭하고, Computed 탭에서 값을 받아 적으세요:

조사 대상            font-size    font-weight    line-height
──────────────────────────────────────────────────────────
① 페이지 큰 제목(h1)   ___px        ___            ___
② 섹션 제목(h3)        ___px        ___            ___
③ 이 본문 문단(p)      ___px        ___            ___
④ chip(칩) 글씨        ___px        ___            ___

다 적었으면 스스로 질문:
- 크기 계단이 몇 단계인가? 간격은 일정한가?
- 굵기는 어디서 바뀌는가? (제목만? 강조 단어도?)
→ 답을 멘토에게 보여주고 "왜 이렇게 정했을까" 이야기해 보세요.`;

const CODE_PRACTICE_LINEHEIGHT = `실습 2 — 개발자도구로 행간 실험 (새로고침하면 원상복구!)

1) 이 문단 아무 곳이나 우클릭 → 검사
2) Styles 패널에서 해당 요소에 직접 입력:
     line-height: 1.0;   ← 줄이 붙어 답답해지는 걸 확인
     line-height: 2.5;   ← 문단이 흩어지는 걸 확인
     line-height: 1.6;   ← 다시 편안해지는 지점 찾기
3) 보너스: letter-spacing: 0.3em; 을 줘 보세요.
   자간이 너무 벌어지면 단어 경계가 사라져 오히려 안 읽히죠?

핵심: '예쁘다'가 아니라 '오래 읽어도 눈이 안 아프다'가 기준.
숫자를 바꿔 가며 그 경계를 직접 눈으로 찾아보는 게 이 실습의 목적입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Section({ n, title, sub, children }) {
  return (
    <section className="step-card" id={`sec-${n}`}>
      <div className="step-head">
        <span className="step-num">{n}</span>
        <div>
          <h3>{title}</h3>
          {sub && <span className="step-sub">{sub}</span>}
        </div>
      </div>
      <div className="step-body">{children}</div>
    </section>
  );
}

function Code({ children }) {
  return <pre className="code-block"><code>{children}</code></pre>;
}

const SECTIONS = [
  { n: 1, label: '세리프 vs 산세리프' },
  { n: 2, label: '한글 폰트와 Pretendard' },
  { n: 3, label: '크기 위계' },
  { n: 4, label: '행간과 자간' },
  { n: 5, label: '굵기로 강조하기' },
  { n: 6, label: '폰트는 2종까지' },
  { n: 7, label: '무료 폰트와 라이선스' },
  { n: 8, label: '실습 2종' },
];

export default function TypographyPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 다루는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>타이포그래피<br />— 글자가 곧 디자인의 90%</h1>
        <p>
          화면에서 우리가 보는 것의 대부분은 결국 <strong>글자</strong>예요. 폰트 고르기,
          크기 계단 만들기, 행간 조절 — 이 작은 결정들이 "왠지 읽기 편한 화면"과
          "왠지 어수선한 화면"을 가릅니다. 규칙은 몇 개 안 되니, 직접 만져 보며 배워요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 포함</span>
          <span className="chip">준비물: 브라우저 + F12</span>
        </div>
      </div>

      {/* 섹션 바로가기 */}
      <nav className="pill-nav">
        {SECTIONS.map((s) => (
          <a key={s.n} href={`#sec-${s.n}`}>
            <b>{s.n}</b>
            {s.label}
          </a>
        ))}
      </nav>

      <Section n={1} title="세리프 vs 산세리프" sub="획 끝의 삐침 하나가 분위기를 바꾼다">
        <p>
          폰트의 가장 큰 분류는 딱 두 갈래예요. 획 끝에 <strong>삐침(세리프)</strong>이
          있으면 세리프, 없으면 산세리프(sans = 프랑스어로 "없는")입니다.
          한글로 치면 <strong>명조 계열</strong>이 세리프, <strong>고딕 계열</strong>이
          산세리프라고 생각하면 거의 맞아요.
        </p>
        <p>
          비유하자면 세리프는 <strong>정장</strong>, 산세리프는 <strong>깔끔한 캐주얼</strong>이에요.
          종이에 인쇄된 긴 글(책·신문)에서는 세리프의 삐침이 시선을 다음 글자로 자연스럽게
          이어 줘서 오래 읽기 편하고, 픽셀로 그리는 화면(UI)에서는 삐침이 뭉개지기 쉬워서
          산세리프가 훨씬 또렷합니다.
        </p>
        <Code>{CODE_SERIF_VS_SANS}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 자주 쓰는 앱 3개(우리 학습 플랫폼 포함)를 열고
          본문 폰트가 세리프인지 산세리프인지 판정해 보세요. UI는 거의 전부
          산세리프라는 걸 확인하고 — 반대로 뉴스 기사나 전자책 본문에서
          세리프를 찾아보세요.
        </div>
      </Section>

      <Section n={2} title="한글 폰트의 특수성" sub="11,172자의 무게 — 그리고 Pretendard">
        <p>
          영문 폰트는 100자 남짓 그리면 끝이지만, 한글은 초성·중성·종성 조합으로
          <strong> 완성형 11,172자</strong>를 전부 그려야 해요. 알파벳 폰트가 단편 소설이라면
          한글 폰트는 대하소설인 셈이죠. 그래서 품질 좋은 한글 폰트는 귀하고,
          아무 영문 폰트나 지정하면 한글 부분만 브라우저 기본 폰트로 대체되어
          <strong> 한글·영문이 따로 노는 화면</strong>이 됩니다.
        </p>
        <Code>{CODE_HANGUL}</Code>
        <p>
          그래서 실무에서 <strong>Pretendard</strong> 같은 폰트가 사랑받아요. 전체 완성형을
          갖췄고, 굵기가 9단계라 위계 표현이 자유롭고, 영문·숫자까지 한글과 어울리게
          조율돼 있고, 라이선스(SIL OFL)도 안전하거든요. "한 폰트로 화면 전체를
          해결할 수 있다"는 게 핵심입니다.
        </p>
        <div className="warn">
          <b>흔한 실수</b> CSS에 <span className="icode">font-family: 'Cool Font';</span>처럼
          영문 전용 폰트 하나만 달랑 지정하기. 한글이 전부 대체 폰트로 빠져서 굵기·높이가
          어긋납니다. 항상 한글을 지원하는 폰트를 앞에, 뒤에는{' '}
          <span className="icode">sans-serif</span> 같은 최후의 보루를 함께 적어 주세요.
        </div>
      </Section>

      <Section n={3} title="크기 위계" sub="제목–본문–캡션, 계단을 먼저 정한다">
        <p>
          잘 만든 화면은 소리 내지 않고도 <strong>"이 순서로 읽으세요"</strong>라고 말해요.
          그 역할을 하는 게 크기 위계입니다. 신문을 떠올려 보세요 — 헤드라인, 소제목,
          본문, 사진 캡션이 크기만 봐도 구분되죠. 우리 화면도 똑같은 계단이 필요합니다.
        </p>
        <Code>{CODE_SCALE}</Code>
        <p>
          핵심은 <strong>본문 크기를 기준점</strong>으로 잡고 위아래 계단을 몇 개만 정해 두는
          것. 매번 "이건 17px? 18px?" 고민하는 대신, 정해 둔 계단에서 고르기만 하면
          화면 전체가 저절로 통일됩니다. 이게 바로 디자인 시스템의 출발점이에요.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="제목 28px, 부제 20px, 본문 15px, 캡션 12px의 크기 위계를 실제 크기 차이로 비교하고 각 줄의 행간 상자를 점선으로 표시한 도해">
          <text x="20" y="26" fontSize="13" fill="var(--muted)">크기 계단 — 크기 차이가 곧 &apos;읽는 순서&apos;</text>

          <rect x="112" y="52" width="380" height="35" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 3" />
          <text x="100" y="74" fontSize="12" fill="var(--muted)" textAnchor="end">제목</text>
          <text x="124" y="80" fontSize="28" fontWeight="700" fill="var(--primary)">페이지 제목</text>
          <text x="504" y="74" fontSize="12" fill="var(--muted)">28px · 행간 1.25</text>

          <rect x="112" y="126" width="380" height="27" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 3" />
          <text x="100" y="144" fontSize="12" fill="var(--muted)" textAnchor="end">부제</text>
          <text x="124" y="147" fontSize="20" fontWeight="600" fill="var(--teal)">섹션 제목</text>
          <text x="504" y="144" fontSize="12" fill="var(--muted)">20px · 행간 1.35</text>

          <rect x="112" y="198" width="380" height="24" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 3" />
          <text x="100" y="214" fontSize="12" fill="var(--muted)" textAnchor="end">본문</text>
          <text x="124" y="215" fontSize="15" fill="var(--ink)">본문 텍스트입니다 — 기준점!</text>
          <text x="504" y="214" fontSize="12" fill="var(--amber)">15px · 행간 1.6</text>

          <rect x="112" y="261" width="380" height="18" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 3" />
          <text x="100" y="274" fontSize="12" fill="var(--muted)" textAnchor="end">캡션</text>
          <text x="124" y="274" fontSize="12" fill="var(--muted)">캡션·보조 텍스트 (12px 아래로는 금지)</text>
          <text x="504" y="274" fontSize="12" fill="var(--muted)">12px · 행간 1.5</text>

          <line x1="20" y1="298" x2="620" y2="298" stroke="var(--line)" strokeWidth="1" />
          <text x="320" y="320" fontSize="12" fill="var(--muted)" textAnchor="middle">점선 상자 = 행간(줄 상자) 높이 — 글자 크기의 배수로 지정</text>
          <text x="320" y="342" fontSize="12.5" fill="var(--ink)" textAnchor="middle">계단은 몇 개만, 간격은 일정하게 — 본문을 먼저 정하고 위아래로 벌린다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 제목·부제·본문·캡션의 실제 크기 차이와 각 단계의 행간</p>
        <div className="tip">
          <b>기억할 숫자 하나</b> 본문은 <strong>14~16px</strong>, 그리고 어떤 글씨도{' '}
          <strong>12px 아래로 내려가지 않기</strong>. 여러분 눈은 괜찮아도, 모든 사용자의
          눈이 괜찮은 건 아니거든요.
        </div>
      </Section>

      <Section n={4} title="행간과 자간" sub="가독성의 8할은 글자 '사이'의 공간">
        <p>
          같은 폰트, 같은 크기라도 <strong>행간</strong>(줄 간격) 하나로 "술술 읽히는 글"과
          "숨 막히는 글"이 갈려요. 글자가 배우라면 행간·자간은 무대 위의 간격 —
          배우들이 다닥다닥 붙어 있으면 누가 누군지 안 보이는 것과 같습니다.
        </p>
        <Code>{CODE_LINE_HEIGHT}</Code>
        <p>
          특히 한글은 글자 하나하나가 네모 안에 꽉 차는 구조라, 영문보다 행간을
          <strong> 조금 더 넉넉하게</strong> 주는 게 보통이에요. 본문 기준{' '}
          <span className="icode">line-height: 1.6</span> 근처에서 시작해 눈으로
          미세 조정하면 됩니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아래 섹션 8의 실습 2가 바로 이 내용이에요. 지금 이 문단의
          행간을 개발자도구로 직접 바꿔 보며 "답답함 ↔ 편안함 ↔ 산만함"의 경계를 눈으로
          찾아보세요.
        </div>
      </Section>

      <Section n={5} title="굵기(weight)로 강조하기" sub="색보다 먼저, 크기보다 조용하게">
        <p>
          문장에서 뭔가를 강조하고 싶을 때 초보의 손은 색깔로 갑니다. 빨갛게, 파랗게,
          형광으로... 그런데 프로의 첫 번째 도구는 <strong>굵기</strong>예요. 굵기는
          화면의 색 조화를 깨지 않으면서도 확실하게 눈에 띄고, 흑백으로 인쇄해도,
          색약인 사용자에게도 그대로 전달되거든요.
        </p>
        <Code>{CODE_WEIGHT}</Code>
        <p>
          지금 이 페이지도 그래요 — 본문은 Regular, 강조 단어만{' '}
          <strong>Bold</strong>, 제목은 크기+굵기를 함께. 색으로 강조한 곳은 링크와
          경고 박스 정도뿐이죠. <strong>굵기 → 크기 → 색</strong> 순서만 기억해도
          화면이 한 단계 차분해집니다.
        </p>
      </Section>

      <Section n={6} title="한 화면 폰트는 2종까지" sub="많을수록 산만하고, 무겁다">
        <p>
          폰트를 고르다 보면 욕심이 나요. 제목엔 이거, 본문엔 저거, 버튼엔 또 다른 거...
          그 결과물은 대개 <strong>동네 전단지</strong>가 됩니다. 옷도 상의·하의·신발
          브랜드가 전부 다르고 무늬까지 요란하면 어수선하듯, 폰트도 마찬가지예요.
        </p>
        <Code>{CODE_TWO_FONTS}</Code>
        <p>
          "2종인데 화면이 심심하지 않냐"고요? 섹션 3~5에서 배운 <strong>크기·행간·굵기</strong>가
          그 다양함을 다 만들어 줍니다. 한 폰트의 굵기 9단계만으로도 표현할 수 있는 위계는
          충분히 많아요. 폰트 종류가 아니라 <strong>규칙</strong>이 화면을 풍부하게 합니다.
        </p>
        <div className="warn">
          <b>성능도 걸려 있어요</b> 한글 웹폰트 한 벌은 영문 폰트의 수십 배 용량입니다.
          폰트를 하나 추가할 때마다 사용자의 첫 화면이 그만큼 늦게 떠요. 예쁨과 속도를
          맞바꾸는 결정이라는 걸 기억하세요.
        </div>
      </Section>

      <Section n={7} title="무료 폰트와 라이선스" sub="'무료 다운로드'와 '무료 사용'은 다르다">
        <p>
          폰트는 <strong>저작물</strong>이에요. 누군가 수천 시간을 들여 11,172자를 그린
          결과물이죠. "인터넷에서 무료로 받았으니 우리 서비스에 써도 되겠지"는
          위험한 착각입니다 — <strong>개인 사용만 무료</strong>인 폰트를 회사 서비스에
          쓰면 라이선스 위반이고, 실제로 기업에 청구서가 날아오는 일이 드물지 않아요.
        </p>
        <Code>{CODE_LICENSE}</Code>
        <p>
          다행히 <strong>SIL OFL</strong> 같은 오픈 라이선스 폰트(Pretendard 포함)는
          상업 서비스·웹 임베딩까지 자유롭습니다. 회사 프로젝트 기준은 간단해요 —{' '}
          <strong>라이선스 원문을 확인하지 않은 폰트는 쓰지 않는다.</strong> AWESOMEDEV
          프로젝트에 폰트를 추가하고 싶으면 라이선스 근거를 함께 가져와서 멘토와
          상의하세요.
        </p>
      </Section>

      <Section n={8} title="실습 — 눈으로 배운 걸 손으로" sub="우리 플랫폼이 곧 교재">
        <p>
          이제 배운 걸 전부 동원해 <strong>지금 보고 있는 이 플랫폼</strong>을 뜯어볼
          차례예요. 준비물은 <span className="kbd">F12</span> 하나. 개발자도구에서 바꾼
          값은 새로고침하면 사라지니 마음껏 실험해도 됩니다.
        </p>
        <ol className="olist">
          <li>
            <strong>실습 1 · 타이포 위계 수사</strong> — 이 페이지의 제목·본문·칩 글씨를
            요소 선택 도구로 찍어서 실제 값(크기·굵기·행간)을 표로 채워 보세요.
          </li>
          <li>
            <strong>실습 2 · 행간 실험</strong> — 본문 문단의{' '}
            <span className="icode">line-height</span>를 직접 바꿔 가며 편안한 범위를
            눈으로 찾아보세요.
          </li>
        </ol>
        <Code>{CODE_PRACTICE_HIERARCHY}</Code>
        <Code>{CODE_PRACTICE_LINEHEIGHT}</Code>
        <div className="tip">
          <b>제출 팁</b> 실습 1에서 채운 표를 사진이나 메모로 남겨 두세요. 나중에 여러분이
          직접 화면을 만들 때, 이 표가 그대로 <strong>우리 팀의 타이포 규칙 치트시트</strong>가
          됩니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>✍️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 화면을 볼 때 "예쁘다/안 예쁘다" 대신{' '}
            <strong>"위계가 있다, 행간이 좁다, 폰트가 3종이다"</strong>라고 말할 수 있어요.
            글자를 다뤘으니 다음은 글자를 담는 <strong>공간</strong> — 여백과 정렬, 색을
            다루는 디자인 코스로 이어 가거나, <Link to="/learn/coding"><strong>코딩 기초</strong></Link>{' '}
            코스에서 오늘 본 CSS 속성들을 직접 코드로 만져 보세요. 그리고 다음 과제 화면을
            만들 때, 실습 1에서 만든 치트시트를 꼭 옆에 두고 시작하기!
          </p>
        </div>
      </div>
    </div>
  );
}
