// 이 파일이 하는 일: "디자인 시스템 입문" 코스 — 디자인 시스템이 왜 '제품의 문법'인지에서
// 출발해, 토큰 → 컴포넌트 → 피그마↔React 짝 맞추기 → 문서화 → 우리 플랫폼 미니 디자인 시스템
// 정리 실습(티켓 DZ-03)까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_GRAMMAR = `디자인 시스템이 없을 때 vs 있을 때

없을 때 — 페이지마다 각자 알아서
  로그인 페이지 버튼:   파랑 #3B82F6, 둥근 모서리 8px
  마이페이지 버튼:      파랑 #2F80ED, 둥근 모서리 6px
  과제 제출 버튼:       파랑 #4A90D9, 둥근 모서리 10px
  → 셋 다 "파란 버튼"인데 미묘하게 다 다름. 사용자는 어수선함을 느끼고,
    개발자는 매번 "이번엔 무슨 파랑이지?" 고민.

있을 때 — 약속(문법)이 하나
  버튼은 <Button> 하나. 파랑은 --color-primary 하나.
  → 어느 페이지를 만들어도 같은 부품을 조립만 하면 됨.

디자인 시스템 = 색·글꼴·간격·부품·사용 규칙을 모아 둔 "제품의 문법책"`;

const CODE_TOKENS = `디자인 토큰 = 디자인 결정에 이름을 붙인 변수

/* global.css 의 :root — 우리 플랫폼 토큰의 실물 (예시) */
:root {
  /* 색 — "무슨 파랑?"이 아니라 "primary"라고 부르기로 약속 */
  --color-primary: #...;
  --color-danger:  #...;
  --color-text:    #...;

  /* 간격 — 4의 배수 눈금자. 아무 숫자나 쓰지 않기 */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;

  /* 글꼴 크기 — 제목/본문/캡션 단계 */
  --font-lg: 1.25rem;
  --font-md: 1rem;
  --font-sm: 0.875rem;
}

/* 쓰는 쪽은 값 대신 이름을 부른다 */
.btn-primary { background: var(--color-primary); }

토큰의 힘: 브랜드 색을 바꾸는 날, :root 한 줄만 고치면
플랫폼 전체의 버튼·링크·배지가 한꺼번에 바뀐다.`;

const CODE_BUTTON_STATES = `버튼 하나에도 상태가 최소 5가지

상태        언제?                   겉모습 약속 (예)
──────────────────────────────────────────────────────
default    평소                    primary 색, 또렷한 글자
hover      마우스를 올렸을 때        살짝 어두워짐 → "눌러도 돼요" 신호
active     누르는 순간              더 어두워지거나 살짝 꺼진 느낌
disabled   지금은 못 누를 때        회색 + 커서 금지 표시
loading    처리 중(제출 직후 등)     스피너 + 다시 못 누르게 잠금

→ "버튼을 디자인한다" = 예쁜 네모 하나가 아니라
  이 5가지 상태 세트를 전부 정하는 일이에요.
  하나라도 빠지면? disabled가 없는 제출 버튼은
  따닥 두 번 눌려 과제가 두 번 제출되는 사고로 이어집니다.`;

const CODE_BADGE_PAIR = `피그마 컴포넌트 ↔ React 컴포넌트 — 이름까지 1:1로 짝 맞추기

피그마 쪽                          React 쪽
────────────────────────       ────────────────────────
컴포넌트: Badge                  function Badge({ tone, children })
variant 속성: tone               props: tone
  = info | success | danger        = 'info' | 'success' | 'danger'

// Badge.jsx — 피그마의 variant가 그대로 props가 된다
function Badge({ tone = 'info', children }) {
  return <span className={'badge badge-' + tone}>{children}</span>;
}

// 쓰는 쪽 — 디자이너와 개발자가 같은 단어로 대화 가능
<Badge tone="success">제출 완료</Badge>
<Badge tone="danger">기한 초과</Badge>

짝이 맞으면: 디자이너 "Badge의 tone을 danger로 바꿔 주세요"
             개발자   "네, tone='danger' 한 글자요" — 대화 끝.
짝이 안 맞으면: "그 빨간 거... 라벨? 칩? 태그?" — 매번 통역이 필요해요.`;

const CODE_DOC_EXAMPLE = `문서 없는 컴포넌트는 설명서 없는 조립 가구예요.

좋은 컴포넌트 문서에 꼭 들어가는 4가지:

1) 언제 쓰나 (When)
   "Badge는 상태 표시용. 클릭되는 건 Badge가 아니라 Button."

2) 어떻게 쓰나 (How) — 복사해서 바로 쓰는 예제 코드
   <Badge tone="success">제출 완료</Badge>

3) 하지 말 것 (Don't)
   "Badge 안에 문장 넣지 않기 — 두 단어 이내."
   "danger tone을 '강조'용으로 쓰지 않기 — 진짜 경고에만."

4) 상태·변형 전체 목록
   tone 3종 × 크기 2종 = 전부 몇 가지 모습인지 한눈에.

→ 문서가 있으면 새 수습이 와도 "물어볼 필요 없이" 조립을 시작할 수 있어요.
  디자인 시스템의 절반은 부품이고, 나머지 절반은 이 설명서입니다.`;

const CODE_DZ03_TABLE = `[실습 · 티켓 DZ-03] 우리 플랫폼 미니 디자인 시스템 표 만들기

우리 학습 플랫폼 화면을 직접 뒤져서 아래 표를 채워 보세요.
(정답을 외우는 게 아니라, '찾아내는 눈'을 만드는 실습이에요)

① 색 (global.css의 :root에서 찾기)
   역할          토큰 이름           실제 값
   ─────────────────────────────────────────
   주 색상        --color-????       #______
   위험/경고      --color-????       #______
   본문 글자      --color-????       #______

② 버튼 (아무 페이지의 버튼을 F12로 관찰)
   상태          겉모습 변화 메모
   ─────────────────────────────────────────
   default      ______________________
   hover        ______________________
   disabled     ______________________

③ 카드 (이 페이지의 step-card가 바로 실물!)
   항목          값
   ─────────────────────────────────────────
   모서리 반지름   ______ px
   안쪽 여백      ______ px
   그림자        있음 / 없음

완성한 표는 DZ-03 티켓에 댓글로 올리고 멘토 리뷰를 받으세요.
이 표가 곧 여러분이 만든 첫 '디자인 시스템 문서'입니다.`;

const CODE_QUIZ = `셀프 체크 4문항 — 말로 설명할 수 있으면 통과!

Q1. 페이지마다 파란색 코드값이 조금씩 다르면
    사용자와 개발자에게 각각 어떤 문제가 생길까요? (섹션 1)

Q2. 브랜드 색을 바꿔야 할 때, 토큰을 쓴 프로젝트와
    안 쓴 프로젝트의 작업량은 어떻게 다를까요? (섹션 2)

Q3. loading 상태가 없는 제출 버튼은 어떤 사고를 부를까요? (섹션 3)

Q4. 피그마 컴포넌트와 React 컴포넌트의 '이름'까지
    맞추라고 하는 이유는 뭘까요? (섹션 4)

→ 막히는 문항은 해당 섹션으로 돌아가서 한 번 더.
  비유를 들어 설명할 수 있으면 진짜 이해한 거예요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
// (지금 이 Section/Code가 바로 이 코스에서 배우는 '컴포넌트 재사용'의 실물이에요!)
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: '제품의 문법' },
  { n: 2, label: '디자인 토큰' },
  { n: 3, label: '컴포넌트와 상태' },
  { n: 4, label: '피그마 ↔ React' },
  { n: 5, label: '문서화' },
  { n: 6, label: '실습: DZ-03' },
  { n: 7, label: '정리 퀴즈' },
];

export default function DesignSystemPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>디자인 시스템 입문<br />— 예쁜 화면이 아니라 '약속'을 만드는 일</h1>
        <p>
          왜 큰 회사마다 자기만의 디자인 시스템을 만들까요? 색 하나, 버튼 하나에
          <strong> 이름과 규칙</strong>을 붙이는 순간 디자이너와 개발자가 같은 언어로
          말하게 되기 때문이에요. 이 코스에서는 우리 학습 플랫폼 자체를 교재 삼아,
          토큰에서 문서화까지 디자인 시스템의 뼈대를 따라가 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 + 티켓 DZ-03</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="디자인 시스템 = 제품의 문법" sub="왜 큰 회사마다 하나씩 갖고 있을까?">
        <p>
          문법이 없으면 문장마다 규칙이 달라져서 글을 읽기 힘들죠. 제품도 똑같아요.
          페이지를 만드는 사람이 늘어날수록 버튼 모양·파란색 코드값·여백 크기가
          <strong> 사람 수만큼 갈라지기</strong> 시작합니다. 사용자는 "어딘가 어수선하다"고
          느끼고, 개발자는 화면을 만들 때마다 사소한 결정을 처음부터 다시 해요.
        </p>
        <Code>{CODE_GRAMMAR}</Code>
        <p>
          그래서 사람이 많은 회사일수록 디자인 시스템이 <strong>필수</strong>가 됩니다.
          결정을 한 번만 하고 문법책에 적어 두면, 열 명이 만들어도 한 사람이 만든 것처럼
          보이거든요. 새로 온 수습(여러분!)도 문법책만 읽으면 바로 팀의 말투로 화면을
          만들 수 있고요. 어썸데브처럼 작은 팀도 마찬가지 — 지금 규칙을 세워 두는 게
          나중에 팀이 커졌을 때의 혼란을 미리 막는 보험이에요.
        </p>
        <div className="tip">
          <b>핵심 한 줄</b> 디자인 시스템은 "예쁘게 꾸미는 기술"이 아니라
          <strong> "결정을 재사용하는 기술"</strong>이에요. 한 번 정한 약속을
          모든 화면이 돌려쓰는 거죠.
        </div>
      </Section>

      <Section n={2} title="디자인 토큰 — 색·간격·글꼴에 이름 붙이기" sub="우리 global.css의 :root가 바로 실물">
        <p>
          문법책의 첫 장은 <strong>단어장</strong>이에요. 디자인 시스템의 단어장이 바로
          <strong> 토큰(token)</strong>입니다. "이 파랑은 <span className="icode">#3B82F6</span>"이
          아니라 <span className="icode">--color-primary</span>라는 <strong>이름</strong>으로
          부르기로 약속하는 거예요. 반 친구를 "안경 쓰고 키 큰 애"가 아니라 이름으로 부르는
          것과 같죠 — 겉모습(값)이 바뀌어도 이름은 그대로니까요.
        </p>
        <Code>{CODE_TOKENS}</Code>
        <p>
          멀리 갈 것 없이 <strong>우리 플랫폼의 <span className="icode">global.css</span></strong>를
          열어 보면 <span className="icode">:root</span> 블록에 이 토큰들이 실제로 살고 있어요.
          지금 여러분이 보고 있는 이 페이지의 카드·팁 박스·코드 블록 색이 전부 거기서
          출발합니다. 이 파일이 우리 플랫폼 디자인 시스템의 <strong>1층</strong>인 셈이에요.
        </p>

        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="3단 계층도: 1층 토큰(색·간격)이 모여 2층 컴포넌트(버튼·카드)를 만들고, 그것이 3층 화면을 구성한다">
          <text x="320" y="24" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">아래가 위를 구성한다</text>

          <text x="30" y="66" fontSize="12.5" fill="var(--muted)">3층</text>
          <rect x="80" y="46" width="480" height="86" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="320" y="72" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">화면</text>
          <rect x="104" y="86" width="150" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="179" y="107" textAnchor="middle" fontSize="12" fill="var(--muted)">로그인 페이지</text>
          <rect x="266" y="86" width="150" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="341" y="107" textAnchor="middle" fontSize="12" fill="var(--muted)">과제 제출</text>
          <rect x="428" y="86" width="110" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="483" y="107" textAnchor="middle" fontSize="12" fill="var(--muted)">마이페이지</text>

          <line x1="320" y1="176" x2="320" y2="140" stroke="var(--line)" strokeWidth="2" strokeDasharray="5 4" strokeLinecap="round" />
          <path d="M 320 132 L 314 144 L 326 144 Z" fill="var(--line)" />
          <text x="336" y="164" fontSize="12" fill="var(--muted)">조립하면 화면이 된다</text>

          <text x="30" y="200" fontSize="12.5" fill="var(--muted)">2층</text>
          <rect x="80" y="176" width="480" height="86" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="202" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">컴포넌트</text>
          <rect x="128" y="216" width="130" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="193" y="237" textAnchor="middle" fontSize="12" fill="var(--muted)">버튼 Button</text>
          <rect x="278" y="216" width="110" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="333" y="237" textAnchor="middle" fontSize="12" fill="var(--muted)">카드 Card</text>
          <rect x="408" y="216" width="110" height="32" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="463" y="237" textAnchor="middle" fontSize="12" fill="var(--muted)">배지 Badge</text>

          <line x1="320" y1="306" x2="320" y2="270" stroke="var(--line)" strokeWidth="2" strokeDasharray="5 4" strokeLinecap="round" />
          <path d="M 320 262 L 314 274 L 326 274 Z" fill="var(--line)" />
          <text x="336" y="294" fontSize="12" fill="var(--muted)">조합하면 부품이 된다</text>

          <text x="30" y="330" fontSize="12.5" fill="var(--muted)">1층</text>
          <rect x="80" y="306" width="480" height="44" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="150" y="334" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">토큰</text>
          <circle cx="238" cy="328" r="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="292" y="333" textAnchor="middle" fontSize="12" fill="var(--muted)">색 --color-primary</text>
          <line x1="368" y1="320" x2="368" y2="336" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <line x1="392" y1="320" x2="392" y2="336" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <text x="452" y="333" textAnchor="middle" fontSize="12" fill="var(--muted)">간격 --space-2</text>
          <text x="524" y="333" textAnchor="middle" fontSize="12" fill="var(--muted)">글꼴 --font-md</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 1층 토큰이 2층 컴포넌트를, 컴포넌트가 3층 화면을 구성한다 — global.css의 :root가 이 건물의 1층</p>

        <div className="tip">
          <b>직접 확인해 보기 ①</b> 이 페이지에서 <span className="kbd">F12</span>를 눌러
          개발자 도구를 열고, <span className="kbd">Elements</span> 탭에서 맨 위의
          <span className="icode">html</span>을 선택해 보세요. 오른쪽 Styles 창의
          <span className="icode">:root</span>에 <span className="icode">--</span>로 시작하는
          변수들이 주르륵 보이면 성공! 그중 색 변수 하나를 골라 값을 살짝 바꿔 보세요 —
          화면 곳곳이 <strong>한꺼번에</strong> 바뀌는 걸 볼 수 있어요.
          (새로고침하면 원래대로 돌아오니 마음껏!)
        </div>
      </Section>

      <Section n={3} title="컴포넌트 라이브러리 — 버튼 하나의 다섯 얼굴" sub="부품을 만든다 = 상태 세트를 만든다">
        <p>
          단어(토큰)를 조합하면 <strong>부품(컴포넌트)</strong>이 됩니다. 버튼, 카드, 입력창,
          배지... 이런 부품들을 모아 둔 것이 <strong>컴포넌트 라이브러리</strong>예요.
          그런데 여기서 많은 초보가 놓치는 게 있어요 — 버튼은 <strong>한 가지 모습이 아니라는
          것</strong>. 사람의 표정처럼, 버튼도 상황에 따라 얼굴이 달라져야 해요.
        </p>
        <Code>{CODE_BUTTON_STATES}</Code>
        <p>
          디자인 시스템이 있는 팀은 이 5가지 상태를 <strong>버튼을 만들 때 딱 한 번</strong>
          정합니다. 그 뒤로는 어느 페이지에 버튼을 놓아도 hover·disabled·loading이
          공짜로 따라와요. 없는 팀은? 페이지마다 "아 맞다, disabled 처리..." 를 반복하다가
          어딘가 하나는 꼭 빼먹죠.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 우리 플랫폼에서 아무 버튼이나 하나 골라
          마우스를 <strong>올려 보고(hover)</strong>, <strong>꾹 눌러 보세요(active)</strong>.
          색이나 그림자가 어떻게 변하는지 관찰한 뒤, <span className="kbd">F12</span> →
          해당 버튼 우클릭 → 검사로 어떤 클래스가 그 변화를 만드는지 찾아보세요.
          표정 5가지 중 우리 플랫폼에 없는 상태가 있다면 — 그게 바로 개선 아이디어예요.
        </div>
      </Section>

      <Section n={4} title="피그마 컴포넌트 ↔ React 컴포넌트 짝 맞추기" sub="Badge 하나로 보는 디자이너-개발자 협업">
        <p>
          디자이너는 피그마에서 부품을 만들고, 개발자는 React에서 부품을 만들어요.
          이 둘이 <strong>이름과 속성까지 1:1로 짝이 맞을 때</strong> 디자인 시스템이
          진짜 힘을 냅니다. 번역기 없이 대화하는 두 사람처럼요. 우리 플랫폼의
          <strong> Badge</strong>(제출 완료 · 기한 초과 같은 작은 상태 표시)를 예로 볼게요.
        </p>
        <Code>{CODE_BADGE_PAIR}</Code>
        <p>
          포인트는 <strong>속성 이름</strong>이에요. 피그마에서 variant를
          <span className="icode">tone</span>이라고 지었으면 React props도
          <span className="icode">tone</span>. 피그마에서 <span className="icode">danger</span>면
          코드에서도 <span className="icode">danger</span>. 이렇게 맞춰 두면 디자인 시안을
          보는 순간 코드가 머릿속에 그려지고, 반대로 코드만 봐도 시안이 그려집니다.
        </p>
        <div className="warn">
          <b>짝이 어긋나기 시작하는 순간을 조심!</b> 디자이너가 피그마에 variant를
          하나 추가했는데 코드에는 없다면? 그 순간부터 두 세계가 갈라져요.
          부품을 바꿀 땐 <strong>피그마와 코드를 같은 PR·같은 티켓에서</strong> 함께
          바꾸는 게 규칙입니다.
        </div>
      </Section>

      <Section n={5} title="문서화 — 부품의 절반은 설명서" sub="물어보지 않아도 조립할 수 있게">
        <p>
          부품을 아무리 잘 만들어도 <strong>어떻게 쓰는지</strong>가 머릿속에만 있으면,
          그 지식은 그 사람이 자리를 비운 날 함께 사라져요. 설명서 없는 조립 가구를
          받아 본 적 있나요? 나사는 다 있는데 어디에 끼울지 모르는 상태 — 문서 없는
          컴포넌트 라이브러리가 딱 그렇습니다.
        </p>
        <Code>{CODE_DOC_EXAMPLE}</Code>
        <p>
          특히 <strong>"하지 말 것(Don't)"</strong>이 중요해요. 규칙은 대부분
          누군가 실제로 겪은 사고에서 나오거든요. "danger를 강조용으로 쓰지 말 것"이라는
          한 줄은, 진짜 경고가 필요한 순간에 사용자가 빨간색에 무뎌져 있으면 안 된다는
          경험의 기록이에요. 여러분이 다음 섹션에서 만들 표가 바로 이런 문서의 출발점입니다.
        </p>
      </Section>

      <Section n={6} title="실습 — 우리 플랫폼 미니 디자인 시스템 표 만들기" sub="티켓 DZ-03 · 배운 걸 전부 손으로">
        <p>
          이제 1~5섹션을 전부 합칠 시간이에요. 우리 학습 플랫폼을 <strong>탐험하듯 뒤져서</strong>,
          색 토큰(섹션 2)·버튼 상태(섹션 3)·카드 규격을 표 하나로 정리합니다.
          남이 만든 디자인 시스템을 읽는 것과, 화면에서 규칙을 <strong>직접 캐내는 것</strong>은
          완전히 다른 경험이에요 — 후자를 해 본 사람만 디자인 시스템을 "만들" 수 있습니다.
        </p>
        <Code>{CODE_DZ03_TABLE}</Code>
        <ol className="olist">
            <li>Gitea(edu.awesomedevapp.com:3000)에서 <strong>티켓 DZ-03</strong>을 열고 본인을 담당자로 지정해요.</li>
            <li>위 표의 ①번부터 순서대로 채워요 — ①은 <span className="icode">global.css</span>, ②·③은 <span className="kbd">F12</span>가 무기예요.</li>
            <li>완성한 표를 DZ-03에 댓글로 올리고, "우리 플랫폼에 빠져 있다고 느낀 상태·토큰 1가지"도 함께 적어요.</li>
            <li>멘토 리뷰를 받으면 실습 완료! 지적받은 부분은 표를 고쳐서 다시 올려요.</li>
          </ol>
        <div className="tip">
          <b>막히면</b> 섹션 2의 "직접 확인해 보기 ①"로 돌아가서 :root 보는 법을 복습하세요.
          값이 <span className="icode">var(--...)</span>로 나오면 그 변수를 :root에서
          한 번 더 찾아 들어가면 됩니다 — 이름을 따라가는 것 자체가 토큰 훈련이에요.
        </div>
      </Section>

      <Section n={7} title="정리 퀴즈 — 셀프 체크 4문항" sub="설명할 수 있어야 아는 것">
        <Code>{CODE_QUIZ}</Code>
        <div className="tip">
          <b>공부 팁</b> 이번 코스의 답은 전부 <strong>우리 플랫폼 화면 안</strong>에 있어요.
          퀴즈를 풀다 막히면 이론으로 돌아가지 말고, F12를 열어 실물을 먼저 보세요.
          디자인 시스템은 읽는 게 아니라 만지는 과목입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧩 여기까지 왔다면</h3>
          <p className="muted">
            이제 색 하나에도 이름이 있고, 버튼 하나에도 다섯 얼굴이 있다는 걸 알게 됐어요.
            디자인 시스템의 부품은 결국 <strong>React 컴포넌트</strong>로 태어납니다 —{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 컴포넌트를
            직접 만드는 법을 이어서 배우고, <strong>티켓 DZ-03</strong>의 미니 디자인 시스템
            표를 꼭 완성해서 멘토 리뷰까지 받아 보세요. 그 표가 여러분의 첫 디자인 문서예요.
          </p>
        </div>
      </div>
    </div>
  );
}
