// 이 파일이 하는 일: "레이아웃과 그리드" 코스 — 화면 뒤에 숨어 있는 보이지 않는 뼈대(그리드)에서
// 시작해, 정렬·근접성·시각적 흐름·여백·카드 레이아웃·반응형까지 8개 섹션으로 안내하는 정적 학습 페이지.
// (8pt 그리드 → 정렬 → 근접성 → Z/F 패턴 → 여백 → 카드 레이아웃 → 반응형 → 피그마 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_8PT = `8pt 그리드 — 모든 간격을 8의 배수로

허용되는 간격:  8  16  24  32  40  48  64 ...
(작은 디테일엔 4도 허용 — '4의 배수'라고 외워도 좋아요)

나쁜 예                      좋은 예
──────────────           ──────────────
제목 아래 여백 13px          제목 아래 여백 16px
카드 안쪽 여백 18px          카드 안쪽 여백 16px 또는 24px
버튼 높이 37px              버튼 높이 40px

→ 13, 18, 37처럼 '어중간한 숫자'가 사라지면
  화면 전체가 같은 박자로 뛰기 시작합니다.`;

const CODE_ALIGN = `정렬 전 vs 정렬 후 — 왼쪽 선 하나만 맞춰도

정렬 전 (기준선 없음)          정렬 후 (왼쪽 기준선 하나)
┌─────────────────┐        ┌─────────────────┐
│   제목이 여기       │        │ 제목이 여기        │
│ 본문은 여기서 시작   │        │ 본문은 여기서 시작   │
│     버튼           │        │ 버튼              │
└─────────────────┘        └─────────────────┘
  ↑ 시작점이 제각각           ↑ 눈이 세로선 하나를 타고
    눈이 지그재그로 헤맴          미끄러지듯 내려감

핵심: 가운데 정렬을 남발하면 기준선이 사라져요.
긴 글은 왼쪽 정렬이 기본, 가운데 정렬은 짧은 제목용.`;

const CODE_PROXIMITY = `근접성 — 붙어 있으면 한 팀, 떨어져 있으면 남남

나쁜 예 (간격이 전부 16px)        좋은 예 (팀 안 8px / 팀 사이 32px)

이름                            이름
                                홍길동          ← 라벨과 값이 한 팀
홍길동
                                이메일
이메일                          hong@...        ← 다음 팀과는 멀리

hong@...

→ 선이나 박스를 긋지 않아도, 간격 차이만으로
  "이 라벨은 이 값의 것"이라는 관계가 보입니다.`;

const CODE_FLOW = `시선의 이동 경로 — Z 패턴과 F 패턴

Z 패턴 (그림·여백 많은 화면)       F 패턴 (글 많은 화면)
로고 ─────────→ 메뉴           제목 ──────────→
   ╲                          본문 첫 줄 ────→
     ╲  (대각선으로 훑고)        본문 둘째 줄 ──→
       ╲                      나머지는
문구 ─────────→ [버튼]         │ 왼쪽만
                              │ 훑으며
                              ↓ 내려감

활용법:
Z의 끝(오른쪽 아래) = 가장 중요한 버튼 자리
F의 왼쪽 세로선     = 제목·핵심 단어를 앞에 배치`;

const CODE_WHITESPACE = `여백 = 아무것도 없는 게 아니라 '숨 쉴 자리'

빽빽한 화면                     여백 있는 화면
┌────────────┐             ┌────────────┐
│글글글글글글글│             │            │
│글글글글글글글│             │   핵심 문장   │
│글글글글글글글│             │            │
│글글글글글글글│             │   [버튼]    │
└────────────┘             │            │
 전부 소리치니까              └────────────┘
 아무것도 안 들림               하나만 말하니까 잘 들림

명품 매장이 물건을 띄엄띄엄 놓는 이유와 같아요 —
여백이 넓을수록 그 안의 콘텐츠가 귀해 보입니다.`;

const CODE_CARD = `우리 학습 센터 허브가 카드 레이아웃인 이유

┌─────────┐ ┌─────────┐ ┌─────────┐
│ 네트워크   │ │ 디자인     │ │ 코딩 기초  │
│ 코스 설명   │ │ 코스 설명   │ │ 코스 설명  │
│ [시작하기] │ │ [시작하기]  │ │ [시작하기] │
└─────────┘ └─────────┘ └─────────┘

카드 하나 = 정보 한 묶음(근접성) + 같은 틀 반복(정렬)
1) 경계가 분명해서 어디까지가 한 덩어리인지 고민할 필요 없음
2) 전부 같은 규격 → 그리드에 착착 올라감
3) 화면이 좁아지면 카드 단위로 접으면 됨 (다음 섹션!)

React와도 찰떡: 카드 = 컴포넌트 하나.
배열.map()으로 찍어내면 카드 100개도 코드는 그대로.`;

const CODE_RESPONSIVE = `반응형 — 그리드가 '접히는' 방식

데스크톱 (12칸 그리드)          태블릿              모바일
┌───┐┌───┐┌───┐          ┌────┐┌────┐      ┌────────┐
│ A ││ B ││ C │          │ A  ││ B  │      │   A    │
└───┘└───┘└───┘          └────┘└────┘      └────────┘
 4칸   4칸   4칸           ┌────┐            ┌────────┐
                          │ C  │            │   B    │
                          └────┘            └────────┘
                           6칸씩             ┌────────┐
                                            │   C    │
                                            └────────┘
                                             12칸 통째로

칸(컬럼) 수는 그대로 12개 — 카드가 차지하는 칸 수만
4칸 → 6칸 → 12칸으로 바뀌는 거예요.
CSS 한 줄이면 브라우저가 알아서 접어 줍니다:
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));`;

const CODE_FIGMA = `실습 — 피그마에서 8pt 그리드로 코스 카드 3장 배치하기

준비: 피그마에서 새 파일 → Frame(단축키 F) → Desktop(1440) 선택

1) 그리드 켜기
   오른쪽 패널 Layout grid → + 클릭 → Grid → 8px로 설정
   (화면에 8px 모눈종이가 깔립니다)

2) 카드 한 장 만들기
   사각형(R) 320 x 200 → 모서리 둥글게 8
   안에 제목 텍스트(T), 설명 텍스트, 버튼 사각형(높이 40)
   카드 안쪽 여백은 사방 24 — 8의 배수인지 확인!

3) 팀 만들기 (근접성)
   제목↔설명 간격 8, 설명↔버튼 간격 24
   → 제목과 설명은 한 팀, 버튼은 다음 팀으로 보이나요?

4) 카드 복제해서 3장 배치 (정렬)
   Alt+드래그로 복제, 카드 사이 간격 24
   세 카드의 윗변이 한 줄에 딱 맞는지 확인

5) 셀프 체크
   □ 화면의 모든 간격이 8의 배수인가?
   □ 세 카드의 제목이 같은 높이에서 시작하는가?
   □ 그리드를 꺼도(Shift+G) 정돈돼 보이는가?

완성본은 멘토에게 링크로 공유 — 간격 숫자를 물어볼 거예요!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '8pt 그리드' },
  { n: 2, label: '정렬의 힘' },
  { n: 3, label: '근접성' },
  { n: 4, label: 'Z/F 패턴' },
  { n: 5, label: '여백' },
  { n: 6, label: '카드 레이아웃' },
  { n: 7, label: '반응형' },
  { n: 8, label: '피그마 실습' },
];

export default function LayoutPage() {
  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개 + 피그마 과제</span>
          <span className="chip">준비물: 눈과 피그마</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> 쪽이 훨씬 단정해 보이죠. 그리드는 화면 위에
          깔아 두는 <strong>보이지 않는 모눈종이</strong>예요. 완성된 화면에서 격자는 안 보이지만,
          모든 요소가 그 격자 위에 올라앉아 있기 때문에 "이유는 모르겠는데 정돈돼 보인다"는
          느낌이 생깁니다.
        </p>
        <p>
          실무에서 가장 널리 쓰는 규칙이 <strong>8pt(8px) 그리드</strong>입니다.
          규칙은 딱 하나 — <strong>모든 간격·크기를 8의 배수로만</strong> 쓰는 거예요.
        </p>
        <Code>{CODE_8PT}</Code>
        <p>
          왜 하필 8일까요? 8은 2·4로도 나뉘고, 대부분의 화면 해상도와도 딱 떨어져서
          <strong> 어디서든 반 토막·배수 계산이 쉬운 숫자</strong>거든요. 그리고 더 현실적인 이유 —
          "여기 간격 몇으로 할까?"를 매번 고민하면 지쳐요. 선택지를 8, 16, 24, 32로
          좁혀 두면 <strong>고민이 사라지고 일관성은 저절로</strong> 생깁니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 학습 센터 페이지에서 <span className="kbd">F12</span>를
          눌러 개발자 도구를 열고, 왼쪽 위 <strong>요소 선택 아이콘</strong>(화살표)을 클릭한 뒤
          이 카드 위에 마우스를 올려 보세요. <span className="icode">padding</span>과{' '}
          <span className="icode">margin</span> 값이 색깔로 표시되는데 — 대부분 8의 배수일 거예요.
          우리 플랫폼도 이 규칙 위에 서 있습니다.
        </div>
      </Section>

      <Section n={2} title="정렬의 힘" sub="한 줄만 맞춰도 화면이 정돈된다">
        <p>
          디자인을 배우기 전과 후의 가장 큰 차이는 그림 실력이 아니라 <strong>정렬 습관</strong>이에요.
          요소들의 시작점이 제각각이면, 보는 사람의 눈은 다음 줄을 읽을 때마다
          시작점을 새로 찾아야 합니다. 왼쪽 기준선 하나만 맞춰도 눈은 그 <strong>세로선을
          엘리베이터처럼</strong> 타고 내려가요.
        </p>
        <Code>{CODE_ALIGN}</Code>
        <p>
          초보 화면에서 가장 흔한 실수가 <strong>가운데 정렬 남발</strong>입니다.
          가운데 정렬은 줄마다 시작점이 달라져서 기준선이 사라져요. 축하 카드 같은
          짧은 문구엔 어울리지만, 설명이 서너 줄만 넘어가면 왼쪽 정렬이 답입니다.
          "모든 요소는 <strong>다른 무언가와 선이 맞아야 한다</strong>" — 어디에도 안 맞는
          요소가 하나라도 있으면 그게 화면을 흐트러뜨리는 범인이에요.
        </p>
      </Section>

      <Section n={3} title="근접성 — 간격으로 그룹 만들기" sub="붙어 있으면 한 팀, 떨어져 있으면 남남">
        <p>
          운동장에 학생들이 서 있는 모습을 멀리서 보면, 누가 어느 모둠인지
          <strong> 서 있는 거리만으로</strong> 알 수 있죠. 화면도 똑같아요. 관련 있는 것끼리는
          가깝게, 관련 없는 것끼리는 멀게 — 이게 <strong>근접성</strong>의 원리입니다.
        </p>
        <Code>{CODE_PROXIMITY}</Code>
        <p>
          포인트는 <strong>간격의 차이</strong>예요. 팀 안의 간격(8)보다 팀 사이의 간격(32)이
          확실히 넓어야 그룹이 보입니다. 모든 간격이 16으로 똑같으면 눈은 어디서 끊어 읽어야
          할지 몰라요. 선이나 박스를 긋기 전에 먼저 간격으로 그룹을 만들어 보세요 —
          <strong> 여백만으로 충분한데 선까지 그으면</strong> 화면이 창살처럼 답답해집니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 이 페이지의 섹션 카드를 보세요. 카드 <strong>안</strong>의
          문단 사이 간격과 카드와 카드 <strong>사이</strong> 간격 중 어느 쪽이 넓나요?
          그 간격 차이 덕분에 "여기까지가 섹션 3"이라는 걸 선 없이도 알 수 있는 거예요.
        </div>
      </Section>

      <Section n={4} title="시각적 흐름 — Z 패턴과 F 패턴" sub="사람의 눈은 정해진 길로 다닌다">
        <p>
          사람의 시선은 화면 위를 아무렇게나 떠돌지 않아요. 수십 년의 시선 추적 연구가
          찾아낸 <strong>단골 경로</strong>가 두 가지 있습니다. 그림과 여백이 많은 화면에선
          알파벳 <strong>Z</strong> 모양으로, 글이 빽빽한 화면에선 <strong>F</strong> 모양으로
          훑어요. (우리가 왼쪽→오른쪽, 위→아래로 읽는 습관 그대로입니다.)
        </p>
        <Code>{CODE_FLOW}</Code>
        <p>
          이걸 알면 배치가 <strong>전략</strong>이 됩니다. 랜딩 페이지의 "시작하기" 버튼이
          대부분 오른쪽 아래에 있는 건 우연이 아니라 <strong>Z의 종착역</strong>이기 때문이에요.
          긴 글에선 사람들이 왼쪽 세로선만 훑고 지나가니, 문단 첫머리에 핵심 단어를 놓아야
          하고요. 시선이 다니는 길목에 중요한 것을 놓는 것 — 목 좋은 자리에 가게를 여는 것과
          같은 이치죠.
        </p>
      </Section>

      <Section n={5} title="여백은 콘텐츠다" sub="비어 있는 게 아니라 일하고 있는 것">
        <p>
          초보 때 가장 참기 어려운 유혹이 <strong>"빈 곳을 채우고 싶다"</strong>예요.
          하지만 여백은 낭비되는 공간이 아니라, 콘텐츠가 <strong>숨 쉬고 돋보이게 하는
          장치</strong>입니다. 말하다가 잠깐 멈추는 침묵이 그다음 말에 힘을 실어 주듯이요.
        </p>
        <Code>{CODE_WHITESPACE}</Code>
        <p>
          여백에도 규칙이 있어요. <strong>바깥 여백은 안쪽 여백보다 크거나 같게</strong> —
          카드 안쪽 여백이 24라면 카드 사이는 24 이상. 이 규칙이 깨지면 요소가 자기 그룹보다
          남의 그룹에 더 가까워져서(섹션 3의 근접성!) 화면이 이상하게 뒤엉켜 보입니다.
          결국 그리드(1) · 근접성(3) · 여백(5)은 전부 <strong>간격을 다루는 한 가족</strong>이에요.
        </p>
        <div className="warn">
          <b>"허전한데요?"라는 말에 흔들리지 마세요</b> — 허전함과 여유는 다릅니다.
          기준선이 맞고 그룹이 분명하면 여백이 넓어도 '여유'로 보이고,
          정렬이 무너진 채 여백만 넓으면 그때가 진짜 '허전함'이에요.
          채우기 전에 먼저 정렬부터 점검!
        </div>
      </Section>

      <Section n={6} title="카드 레이아웃은 왜 유행일까" sub="우리 학습 센터 허브가 바로 그 실례">
        <p>
          학습 센터 첫 화면을 떠올려 보세요. 코스들이 <strong>같은 크기의 카드</strong>로
          나란히 놓여 있죠. 유튜브의 영상 목록도, 쇼핑몰의 상품 목록도 다 카드입니다.
          이 유행에는 분명한 이유가 있어요 — 카드는 지금까지 배운 원리들의
          <strong> 종합 선물 세트</strong>거든요.
        </p>
        <Code>{CODE_CARD}</Code>
        <p>
          개발자 입장에서도 카드는 효자예요. 카드 한 장이 곧 React <strong>컴포넌트 하나</strong>라서,
          코스가 10개로 늘어나도 데이터 배열에 항목만 추가하면 화면이 알아서 자랍니다.
          디자인 원리(근접성·정렬)와 코드 구조(컴포넌트 재사용)가 카드라는 한 지점에서
          만나는 셈이죠.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="8pt 그리드 위에 카드 세 장이 놓인 그림. 점선 격자와 왼쪽·윗변 정렬선이 보이고, 카드 안 간격 8과 카드 사이 간격 24가 표시되어 있다.">
          <line x1="40" y1="56" x2="600" y2="56" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="80" x2="600" y2="80" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="104" x2="600" y2="104" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="128" x2="600" y2="128" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="152" x2="600" y2="152" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="176" x2="600" y2="176" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="200" x2="600" y2="200" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="224" x2="600" y2="224" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="248" x2="600" y2="248" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="40" y1="272" x2="600" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="64" y1="56" x2="64" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="112" y1="56" x2="112" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="160" y1="56" x2="160" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="208" y1="56" x2="208" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="256" y1="56" x2="256" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="304" y1="56" x2="304" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="352" y1="56" x2="352" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="400" y1="56" x2="400" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="448" y1="56" x2="448" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="496" y1="56" x2="496" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="544" y1="56" x2="544" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />
          <line x1="592" y1="56" x2="592" y2="272" stroke="var(--line)" strokeWidth="1" strokeDasharray="2 6" />

          <text x="40" y="28" fontSize="13" fill="var(--muted)">보이지 않는 8pt 모눈종이 — 모든 간격이 8의 배수</text>

          <line x1="24" y1="80" x2="616" y2="80" stroke="var(--primary)" strokeWidth="1.5" strokeDasharray="6 4" />
          <line x1="40" y1="40" x2="40" y2="300" stroke="var(--primary)" strokeWidth="1.5" strokeDasharray="6 4" />
          <text x="20" y="48" fontSize="12" fill="var(--primary)">정렬선</text>

          <rect x="40" y="80" width="160" height="160" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="224" y="80" width="160" height="160" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="408" y="80" width="160" height="160" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />

          <text x="64" y="118" fontSize="14" fontWeight="600" fill="var(--ink)">네트워크</text>
          <text x="64" y="142" fontSize="12" fill="var(--muted)">코스 설명</text>
          <rect x="64" y="184" width="88" height="32" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="76" y="205" fontSize="12" fill="var(--teal)">시작하기</text>

          <text x="248" y="118" fontSize="14" fontWeight="600" fill="var(--ink)">디자인</text>
          <text x="248" y="142" fontSize="12" fill="var(--muted)">코스 설명</text>
          <rect x="248" y="184" width="88" height="32" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="260" y="205" fontSize="12" fill="var(--teal)">시작하기</text>

          <text x="432" y="118" fontSize="14" fontWeight="600" fill="var(--ink)">코딩 기초</text>
          <text x="432" y="142" fontSize="12" fill="var(--muted)">코스 설명</text>
          <rect x="432" y="184" width="88" height="32" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="444" y="205" fontSize="12" fill="var(--teal)">시작하기</text>

          <line x1="176" y1="126" x2="176" y2="134" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <text x="186" y="132" fontSize="12" fill="var(--amber)">8</text>
          <line x1="176" y1="150" x2="176" y2="182" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <text x="186" y="172" fontSize="12" fill="var(--rose)">24</text>

          <line x1="200" y1="260" x2="224" y2="260" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <text x="196" y="280" fontSize="12" fill="var(--rose)">24</text>
          <text x="256" y="280" fontSize="12" fill="var(--muted)">카드 사이는 넓게 — 카드 하나가 한 팀으로 보인다</text>

          <text x="40" y="322" fontSize="12" fill="var(--amber)">좁은 간격 8 = 제목과 설명은 한 팀</text>
          <text x="320" y="322" fontSize="12" fill="var(--rose)">넓은 간격 24 = 다음 팀과는 남남</text>
          <text x="40" y="344" fontSize="12" fill="var(--muted)">세 카드의 윗변·왼쪽이 같은 선에 올라앉아 있어서 그리드를 꺼도 정돈돼 보인다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 8pt 그리드 위의 카드 — 정렬선이 뼈대를 잡고, 간격 차이(8 vs 24)가 그룹을 만든다</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 학습 센터 허브로 돌아가서 코스 카드들을 관찰해 보세요.
          카드 사이 간격은 일정한가요? 카드 안에서 제목·설명·버튼의 위치는 카드마다 같은가요?
          그리고 <span className="kbd">F12</span> 개발자 도구로 카드 하나를 선택해 —
          같은 클래스 이름이 카드마다 반복되는 것도 확인해 보세요. 그게 컴포넌트 재사용의 흔적입니다.
        </div>
      </Section>

      <Section n={7} title="반응형 — 그리드가 접히는 방식" sub="같은 화면이 폰에서도 예쁜 비밀">
        <p>
          같은 웹사이트가 모니터에서도, 폰에서도 자연스러운 건 화면을 두 벌 만들어서가
          아니에요. <strong>그리드가 접히기</strong> 때문입니다. 데스크톱 화면을 보통
          <strong> 12개의 세로 칸(컬럼)</strong>으로 나누는데, 화면이 좁아지면 각 요소가
          차지하는 칸 수를 늘려서 자연스럽게 아래로 쌓이게 해요.
        </p>
        <Code>{CODE_RESPONSIVE}</Code>
        <p>
          접는 기준이 되는 화면 폭을 <strong>브레이크포인트</strong>라고 불러요.
          식탁 접이식 상다리처럼, 공간이 좁아지면 정해진 관절에서 착착 접히는 거죠.
          섹션 6의 카드 레이아웃이 반응형과 찰떡인 이유가 여기 있습니다 —
          카드는 규격이 같아서 <strong>3장 → 2장 → 1장</strong>으로 줄 서는 방식만 바꾸면 되니까요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 브라우저 창의 오른쪽 끝을 잡고 천천히 좁혀 보세요.
          어느 순간 레이아웃이 <strong>툭</strong> 하고 접히는 지점이 브레이크포인트예요.
          <span className="kbd">F12</span> → 기기 아이콘(<span className="kbd">Ctrl</span>+
          <span className="kbd">Shift</span>+<span className="kbd">M</span>)을 누르면
          폰 화면 크기로 바로 전환해 볼 수도 있습니다.
        </div>
      </Section>

      <Section n={8} title="실습 — 피그마에서 8pt 그리드로 카드 배치" sub="눈으로 본 것을 손으로 굳히기">
        <p>
          이제 배운 걸 전부 꺼내 쓸 시간이에요. 피그마에서 <strong>8pt 그리드를 깔고,
          코스 카드 3장을 배치</strong>합니다. 그리드(1)·정렬(2)·근접성(3)·여백(5)·카드(6)가
          한 화면에 다 들어가는 실습이에요.
        </p>
        <Code>{CODE_FIGMA}</Code>
        <p>
          다 만들었다면 마지막으로 <strong>그리드를 끄고</strong>(Shift+G) 화면을 보세요.
          모눈종이가 사라져도 정돈돼 보인다면 성공 — 뼈대는 안 보여도 자세를 잡아 준다는 걸
          직접 확인한 겁니다.
        </p>
        <div className="tip">
          <b>한 걸음 더</b> 여유가 있다면 만든 카드를 <strong>일부러 망가뜨려</strong> 보세요.
          간격 하나를 13px로, 카드 하나만 3px 아래로 내려 보는 거예요. "어딘가 어색한데?"가
          느껴진다면 — 축하해요, 이제 그리드가 <strong>보이는 눈</strong>이 생긴 겁니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📐 여기까지 왔다면</h3>
          <p className="muted">
            이제 화면을 볼 때 콘텐츠만이 아니라 그 뒤의 <strong>뼈대</strong>가 보일 거예요 —
            8의 배수로 뛰는 간격, 한 줄로 맞은 기준선, 간격이 만든 그룹까지. 다음은 그 뼈대 위에
            입힐 <strong>살</strong>을 배울 차례 — 색과 글꼴을 다루는 디자인 코스로 이어 가거나,{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 오늘 배운 레이아웃을
            직접 코드로 옮겨 보세요. 피그마 실습 결과물은 잊지 말고 멘토에게 공유!
          </p>
        </div>
      </div>
    </div>
  );
}
