// 이 파일이 하는 일: "레퍼런스와 무드보드" 코스 — 좋은 디자인을 '많이 보는 법'에서 시작해
// 레퍼런스 사이트 투어, 베끼기와 참고의 경계, 무드보드 만들기, 분석하는 눈, 수집 루틴,
// 그리고 우리 학습 플랫폼 개선 실습까지 7개 섹션으로 안내하는 정적 학습 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_REF_SITES = `3대 레퍼런스 사이트 — 각자 성격이 달라요

사이트        비유              여기서 얻는 것
──────────────────────────────────────────────────────
드리블        미술관 전시장      완성도 높은 '한 장면' — 색·타이포·분위기
(dribbble)                     실제 서비스가 아닌 컨셉 작업이 많음

비핸스        포트폴리오 발표회   프로젝트 '전체 과정' — 문제 정의부터
(behance)                      최종 화면까지 스토리로 봄

핀터레스트     스크랩북          뭐든 다 모임 — 폭넓은 탐색과
(pinterest)                    '비슷한 이미지' 추천으로 꼬리물기

→ 순서 추천: 핀터레스트로 넓게 훑고 → 드리블에서 완성도를 보고
  → 비핸스에서 "어떻게 만들었는지" 과정을 읽어요.`;

const CODE_COPY_LINE = `베끼기와 참고의 경계 — 스스로에게 던지는 질문

❌ 베끼기 (하면 안 되는 것)
   - 남의 화면을 그대로 따라 그림 (트레이싱)
   - 색·레이아웃·아이콘·문구를 통째로 옮김
   - "출처만 밝히면 되지 않나?" → 안 됩니다. 출처 표기 ≠ 사용 허락

✅ 참고 (해야 하는 것)
   - "이 화면은 왜 여백을 이렇게 줬을까?" 원리를 뽑아냄
   - 여러 레퍼런스에서 원리를 모아 내 문제에 다시 적용
   - 결과물을 나란히 놓았을 때 "영향은 보이지만 다른 작업물"

판별 테스트: 원본을 안 보고도 내 디자인을 다시 그릴 수 있는가?
  YES → 원리를 이해한 것 (참고)
  NO  → 그림을 외운 것 (베끼기에 가까움)`;

const CODE_MOODBOARD = `피그마 무드보드 만들기 — 4단계

① 새 파일 만들기: Figma → New design file → 이름 "무드보드_학습플랫폼"

② 수집: 마음에 드는 화면을 스크린샷(Win+Shift+S) → 피그마 캔버스에
   Ctrl+V로 붙여넣기. 이미지 아래에 출처 URL을 텍스트로 함께!

③ 태그 붙이기: 이미지 옆에 짧은 메모 텍스트
   [색감] [여백] [카드UI] [버튼] [네비게이션] ...
   → 나중에 "카드 디자인 참고할 거 어딨지?" 할 때 바로 찾게

④ 묶기: 비슷한 태그끼리 Frame으로 그룹핑 + 프레임 이름 지정
   예) Frame "따뜻한 색감 모음", Frame "학습 카드 레이아웃"

핵심: 무드보드는 '전시'가 아니라 '작업 도구'예요.
      예쁘게 정리하는 데 시간 쓰지 말고, 빨리 찾을 수 있게만.`;

const CODE_ANALYSIS = `"왜 좋은가"를 언어로 바꾸는 분석 틀 — 한 장면당 3문장

1) 첫인상 한 단어:  "정돈됨" / "발랄함" / "신뢰감" ...
2) 그 인상의 원인:  UI/UX 코스에서 배운 용어로!
   - 여백(화이트스페이스)이 넉넉해서?
   - 색이 2~3개로 절제돼서? (메인 컬러 + 포인트 컬러)
   - 정렬(그리드)이 맞아서? 위계(큰 제목→작은 본문)가 분명해서?
3) 내 프로젝트 적용: "우리 학습 카드에도 제목-부제 크기 차이를
   더 키우면 위계가 살겠다"

예시 분석 (어느 학습 앱 대시보드):
  ① 첫인상: "차분한 집중"
  ② 원인: 배경은 무채색, 진행률 바에만 초록 포인트 —
     색의 절제가 시선을 '진행률'로 모음
  ③ 적용: 우리 코스 목록도 완료 표시에만 색을 주면 어떨까?`;

const CODE_ROUTINE = `나만의 수집 루틴 — 하루 10분이면 충분해요

매일 (10분)
  □ 핀터레스트/드리블 피드 훑기 → 마음에 드는 것 2~3개 저장
  □ 저장할 때 태그 한 단어라도 붙이기 (나중은 없다!)

매주 (30분)
  □ 이번 주 모은 것 피그마 무드보드로 옮기기
  □ 그중 1개 골라 '3문장 분석' 써보기 (섹션 5의 틀!)

매달 (1시간)
  □ 무드보드 대청소 — 한 달 지나 봐도 안 설레는 건 삭제
  □ "내 취향 지도" 갱신: 자꾸 모으게 되는 스타일이 뭔지 관찰

→ 실력은 '많이 본 총량 × 분석한 횟수'로 자랍니다.
  모으기만 하고 분석 안 하면 그냥 스크랩 중독이에요.`;

const CODE_PRACTICE = `실습 과제 — 학습 플랫폼 개선 레퍼런스 5개 수집

목표: 지금 보고 있는 이 학습 플랫폼의 개선에 참고할
      레퍼런스 5개 + 각각 한 줄 분석

제출 형식 (피그마 무드보드 1페이지):

  [이미지1] 출처 URL
  한 줄 분석: "코스 카드에 썸네일+진행률을 함께 노출 →
              우리 코스 목록에도 진행률 표시 추가하면 좋겠다"

  [이미지2] 출처 URL
  한 줄 분석: ...
  (× 5개)

수집 힌트 — 이런 화면을 찾아보세요:
  - 온라인 강의 플랫폼의 코스 목록 화면
  - 학습 진행률/뱃지 같은 '동기부여 UI'
  - 코드 예제가 들어간 문서/튜토리얼 페이지의 가독성
  - 다크모드가 예쁜 개발자용 서비스

제출: 피그마 공유 링크를 멘토에게 전달 (보기 권한 확인!)`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '많이 본 사람이 이긴다' },
  { n: 2, label: '레퍼런스 사이트 투어' },
  { n: 3, label: '베끼기와 참고의 경계' },
  { n: 4, label: '무드보드 만들기' },
  { n: 5, label: '분석하며 보는 법' },
  { n: 6, label: '나만의 수집 루틴' },
  { n: 7, label: '실습: 플랫폼 개선 레퍼런스' },
];

export default function DesignRefsPage() {
  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">준비물: 피그마 계정</span>
          <span className="chip">실습 과제 1개 제출</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>(reference,
          참고 자료)라고 부릅니다.
        </p>
        <p>
          처음엔 "내 눈은 이미 높은데 손이 못 따라간다"는 답답한 시기가 와요. 이건 성장통이지
          재능 문제가 아니에요. 눈과 손의 간격은 <strong>많이 보고 + 많이 만들면</strong> 반드시
          줄어듭니다. 이 코스는 그중 '많이 보는 법'을 제대로 배우는 시간이에요. 그냥 멍하니
          스크롤하는 것과 <strong>수집하고 분석하며 보는 것</strong>은 완전히 다르거든요.
        </p>
        <div className="tip">
          <b>미리 생각해 보기</b> 최근에 "이 앱 화면 예쁘다"라고 느낀 순간이 있나요?
          그때 <strong>왜</strong> 예쁘다고 느꼈는지 한 문장으로 말해 보세요. 지금 막히더라도
          괜찮아요 — 섹션 5가 끝나면 술술 말하게 될 거예요.
        </div>
      </Section>

      <Section n={2} title="레퍼런스 사이트 투어" sub="드리블·비핸스·핀터레스트 — 목적에 맞는 곳으로">
        <p>
          디자이너들이 매일 들르는 3대 사이트가 있어요. 셋 다 "디자인 구경하는 곳"이지만
          성격이 달라서, <strong>언제 어디를 가느냐</strong>를 알아야 시간 낭비가 없습니다.
        </p>
        <Code>{CODE_REF_SITES}</Code>
        <p>
          <strong>드리블</strong>은 미술관이에요 — 한 장면 한 장면의 완성도가 높지만, 실제로
          동작하는 서비스가 아닌 '보여주기용 컨셉'도 많아요. 색 조합이나 분위기를 훔쳐보기(?) 좋죠.
          <strong> 비핸스</strong>는 발표회장 — 프로젝트가 "어떤 문제를, 어떤 과정을 거쳐,
          어떻게 풀었는지" 스토리째로 올라와요. 기획을 배우기에 최고입니다.
          <strong> 핀터레스트</strong>는 스크랩북 — 하나 저장하면 "이것도 좋아할걸?" 하고
          비슷한 걸 계속 추천해 줘서, 취향의 꼬리를 물고 탐색하기 좋아요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 핀터레스트에서 <span className="icode">learning app UI</span>로
          검색해 보세요. 마음에 드는 화면 하나를 저장하고, 그 화면을 눌렀을 때 아래에 뜨는
          "비슷한 이미지" 추천을 따라 3번 꼬리물기 해 보세요 — 점점 내 취향에 가까운
          화면이 나오는 걸 느낄 수 있어요.
        </div>
      </Section>

      <Section n={3} title="그대로 베끼기와 참고의 경계" sub="영감과 도둑질은 다릅니다">
        <p>
          레퍼런스를 모으다 보면 반드시 만나는 유혹 — "이거 그냥 똑같이 만들면 안 되나?"
          안 됩니다. 남의 디자인에도 <strong>저작권</strong>이 있어요. 특히 남의 화면을 밑에 깔고
          그대로 따라 그리는 <strong>트레이싱</strong>은, 연습장 안에서만 허용되지
          <strong> 제출물·포트폴리오·실제 서비스에 쓰는 순간 문제가 됩니다.</strong>
        </p>
        <Code>{CODE_COPY_LINE}</Code>
        <div className="warn">
          <b>저작권, 가볍게 보면 큰일나요</b> 아이콘·일러스트·폰트·사진은 각각 라이선스가
          따로 있어요. "인터넷에서 주웠으니 공짜"가 아닙니다. 회사 프로젝트에 무단으로 쓰면
          <strong> 회사가 법적 책임</strong>을 지게 돼요. 상업적 사용이 허용된 소스인지
          라이선스를 반드시 확인하고, 애매하면 멘토에게 물어보세요.
        </div>
        <p>
          요리로 비유하면 — 남의 레시피를 보고 <strong>"단맛과 매운맛의 균형이 비결이구나"라는
          원리</strong>를 배워 내 요리에 쓰는 건 참고예요. 남의 완성된 요리를 사 와서 내 접시에
          담아 "내가 만들었어요" 하는 건 베끼기고요. 우리가 훔칠 것은 그림이 아니라
          <strong> 원리</strong>입니다.
        </p>
      </Section>

      <Section n={4} title="무드보드 만들기" sub="피그마에 모으고, 태그 붙이고, 묶기">
        <p>
          <strong>무드보드</strong>(moodboard)는 프로젝트의 방향을 잡으려고 이미지·색·화면
          레퍼런스를 한 판에 모아 놓은 보드예요. 요리사가 장 봐 온 재료를 도마 옆에 죽 늘어놓는
          것과 같죠 — 만들기 전에 재료를 한눈에 봐야 메뉴가 정해지니까요. 우리는
          <strong> 피그마</strong>(Figma)에 만듭니다. 무료고, 링크 하나로 멘토와 공유되거든요.
        </p>
        <Code>{CODE_MOODBOARD}</Code>
        <p>
          가장 중요한 건 <strong>③ 태그</strong>예요. 태그 없는 무드보드는 책등에 제목 없는
          도서관과 같아서, 100장 모아도 정작 필요할 때 못 찾아요. 저장하는 그 순간에
          한 단어라도 붙이는 습관 — 이게 무드보드의 절반입니다. 그리고 <strong>출처 URL</strong>도
          꼭 함께 — 섹션 3에서 배웠듯, 어디서 온 이미지인지 모르면 나중에 라이선스 확인도 못 해요.
        </p>

        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="무드보드 구성 3단계: 여러 레퍼런스를 수집하고, 태그로 분류해 프레임으로 묶고, 한 줄 분석을 붙인다">
          <text x="100" y="26" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">① 수집</text>
          <text x="320" y="26" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--teal)">② 태그 분류</text>
          <text x="545" y="26" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--amber)">③ 한 줄 분석</text>

          <rect x="24" y="46" width="152" height="72" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="100" y="74" textAnchor="middle" fontSize="13" fill="var(--ink)">스크린샷 A</text>
          <text x="100" y="98" textAnchor="middle" fontSize="12" fill="var(--muted)">출처 URL 함께</text>

          <rect x="24" y="132" width="152" height="72" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="100" y="160" textAnchor="middle" fontSize="13" fill="var(--ink)">스크린샷 B</text>
          <text x="100" y="184" textAnchor="middle" fontSize="12" fill="var(--muted)">출처 URL 함께</text>

          <rect x="24" y="218" width="152" height="72" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="100" y="246" textAnchor="middle" fontSize="13" fill="var(--ink)">스크린샷 C</text>
          <text x="100" y="270" textAnchor="middle" fontSize="12" fill="var(--muted)">출처 URL 함께</text>

          <text x="100" y="316" textAnchor="middle" fontSize="12" fill="var(--muted)">피그마 캔버스에 붙여넣기</text>

          <line x1="186" y1="168" x2="234" y2="168" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="226,161 234,168 226,175" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />

          <rect x="244" y="46" width="152" height="112" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="320" y="70" textAnchor="middle" fontSize="12.5" fill="var(--teal)">Frame "따뜻한 색감"</text>
          <rect x="258" y="82" width="60" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="288" y="99" textAnchor="middle" fontSize="12" fill="var(--ink)">[색감]</text>
          <rect x="326" y="82" width="60" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="356" y="99" textAnchor="middle" fontSize="12" fill="var(--ink)">[색감]</text>
          <text x="320" y="134" textAnchor="middle" fontSize="12" fill="var(--muted)">A · C 묶음</text>

          <rect x="244" y="176" width="152" height="112" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="320" y="200" textAnchor="middle" fontSize="12.5" fill="var(--teal)">Frame "카드 레이아웃"</text>
          <rect x="258" y="212" width="60" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="288" y="229" textAnchor="middle" fontSize="12" fill="var(--ink)">[카드UI]</text>
          <rect x="326" y="212" width="60" height="26" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="356" y="229" textAnchor="middle" fontSize="12" fill="var(--ink)">[여백]</text>
          <text x="320" y="264" textAnchor="middle" fontSize="12" fill="var(--muted)">B 묶음</text>

          <text x="320" y="316" textAnchor="middle" fontSize="12" fill="var(--muted)">저장하는 그 순간 태그 한 단어</text>

          <line x1="406" y1="168" x2="454" y2="168" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="446,161 454,168 446,175" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />

          <rect x="464" y="46" width="152" height="112" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="540" y="70" textAnchor="middle" fontSize="12.5" fill="var(--amber)">한 줄 분석</text>
          <text x="540" y="94" textAnchor="middle" fontSize="12" fill="var(--ink)">"완료 표시에만</text>
          <text x="540" y="112" textAnchor="middle" fontSize="12" fill="var(--ink)">색을 줘서 시선이</text>
          <text x="540" y="130" textAnchor="middle" fontSize="12" fill="var(--ink)">모인다"</text>

          <rect x="464" y="176" width="152" height="112" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="540" y="200" textAnchor="middle" fontSize="12.5" fill="var(--amber)">한 줄 분석</text>
          <text x="540" y="224" textAnchor="middle" fontSize="12" fill="var(--ink)">"제목-부제 크기</text>
          <text x="540" y="242" textAnchor="middle" fontSize="12" fill="var(--ink)">차이가 커서</text>
          <text x="540" y="260" textAnchor="middle" fontSize="12" fill="var(--ink)">위계가 산다"</text>

          <text x="540" y="316" textAnchor="middle" fontSize="12" fill="var(--muted)">우리 플랫폼 적용까지 한 문장</text>

          <text x="320" y="344" textAnchor="middle" fontSize="12.5" fill="var(--muted)">무드보드는 '전시'가 아니라 빨리 찾는 '작업 도구'</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 수집 → 태그 분류(프레임 묶기) → 한 줄 분석으로 이어지는 무드보드 구성</p>

        <div className="tip">
          <b>직접 확인해 보기</b> 지금 바로 피그마에 새 파일을 만들고, 우리 학습 플랫폼의
          지금 이 페이지를 <span className="kbd">Win</span>+<span className="kbd">Shift</span>+
          <span className="kbd">S</span>로 캡처해서 첫 재료로 붙여 보세요. 태그도 하나 —
          예를 들면 <span className="icode">[코스페이지]</span>. 축하해요, 무드보드 개장입니다!
        </div>
      </Section>

      <Section n={5} title="분석하며 보는 법" sub="'예쁘다'를 '왜 좋은가'의 언어로 바꾸기">
        <p>
          "우와 예쁘다"에서 멈추면 실력이 안 늘어요. 축구 경기를 그냥 보는 관중과, "지금 수비
          라인이 올라가서 뒷공간이 열렸네"라고 읽는 코치의 차이죠. 우리는 코치의 눈으로 봐야
          합니다 — 그러려면 느낌을 <strong>언어로 번역</strong>해야 해요. 다행히 그 언어는 이미
          배웠어요: UI/UX 코스에서 나온 <strong>여백·정렬·위계·색의 절제·일관성</strong> 같은
          용어들이요.
        </p>
        <Code>{CODE_ANALYSIS}</Code>
        <p>
          이 3문장 틀이 처음엔 숙제 같지만, 열 번쯤 하면 화면을 보는 순간 자동으로 원인이
          보이기 시작해요. 그때부터는 남의 디자인이 전부 <strong>공짜 교과서</strong>가 됩니다.
          특히 ③번(내 프로젝트 적용)을 빼먹지 마세요 — 적용 없는 분석은 반쪽짜리예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 보고 있는 이 학습 플랫폼 페이지를 3문장 틀로 분석해
          보세요. 첫인상 한 단어 → 원인(여백? 위계? 색?) → "내가 개선한다면?" 한 가지.
          그 답이 바로 섹션 7 실습의 출발점이 됩니다.
        </div>
      </Section>

      <Section n={6} title="나만의 수집 루틴" sub="하루 10분, 근육처럼 쌓이는 안목">
        <p>
          안목은 벼락치기가 안 돼요. 운동처럼 <strong>짧게, 자주, 꾸준히</strong>가 답입니다.
          시험 전날 몰아서 팔굽혀펴기 300개 한다고 근육이 생기지 않듯이, 레퍼런스도 한 달에
          한 번 3시간보다 <strong>매일 10분</strong>이 훨씬 강해요.
        </p>
        <Code>{CODE_ROUTINE}</Code>
        <p>
          매달 하는 "무드보드 대청소"가 의외로 중요해요. 시간이 지나도 여전히 좋아 보이는 것만
          남기다 보면, 남은 것들 사이에서 <strong>내 취향의 공통점</strong>이 보이기 시작하거든요.
          그게 곧 여러분의 <strong>디자인 정체성</strong>의 씨앗입니다. 개발자의 별표(star) 저장소
          목록이 그 사람의 관심사를 보여주듯이요.
        </p>
        <div className="tip">
          <b>루틴 시작 팁</b> 거창하게 시작하지 마세요. 등하교 지하철에서 핀터레스트 5분,
          자기 전에 태그 정리 5분 — 이미 하는 스크롤을 <strong>수집하는 스크롤</strong>로
          바꾸기만 하면 됩니다.
        </div>
      </Section>

      <Section n={7} title="실습: 학습 플랫폼 개선 레퍼런스 5개" sub="이 플랫폼이 여러분의 첫 클라이언트">
        <p>
          이제 배운 걸 전부 씁니다. 여러분이 매일 쓰는 <strong>이 학습 플랫폼</strong>을
          클라이언트라고 생각하고, 개선에 참고할 레퍼런스 5개를 수집해 오세요. 이 플랫폼은
          어썸데브가 여러분과 함께 계속 고쳐 나가는 <strong>살아 있는 교재</strong>라서,
          좋은 제안은 실제로 반영될 수 있어요 — 진짜 실무 경험이 되는 거죠.
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <ol className="olist">
          <li>섹션 2의 순서대로 탐색 — 핀터레스트로 넓게, 드리블로 완성도, 비핸스로 과정.</li>
          <li>후보를 10개쯤 모은 뒤, 섹션 5의 3문장 분석이 <strong>잘 써지는</strong> 5개만 남기기.</li>
          <li>섹션 4의 방식대로 피그마 무드보드에 정리 — 출처 URL과 태그 필수!</li>
          <li>각 이미지에 "우리 플랫폼에 이렇게 적용하면 좋겠다" 한 줄 분석 달기.</li>
          <li>공유 링크(보기 권한)를 멘토에게 제출.</li>
        </ol>
        <div className="warn">
          <b>주의</b> "예쁜 화면 5개"가 아니라 <strong>"우리 플랫폼에 적용할 근거가 있는 5개"</strong>를
          찾는 과제예요. 분석 한 줄이 안 써지는 레퍼런스는 아무리 예뻐도 탈락입니다.
          그리고 수집한 이미지를 그대로 옮겨 그리는 건 섹션 3에서 배운 대로 금지!
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎨 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 디자인을 <strong>그냥 보는 사람</strong>이 아니라
            <strong> 수집하고 분석하는 사람</strong>이에요. 레퍼런스 사이트 3곳의 용도,
            참고와 베끼기의 경계, 피그마 무드보드, 3문장 분석 틀, 그리고 하루 10분 루틴까지 —
            전부 손에 넣었습니다. 여기서 쓴 <strong>여백·위계·색의 절제</strong> 같은 용어가
            아직 낯설다면 <Link to="/learn/uiux"><strong>UI/UX 기초</strong></Link> 코스를 먼저
            다녀오세요. 그리고 섹션 7 실습 제출을 잊지 마세요 — 여러분의 무드보드가
            이 플랫폼의 다음 버전을 만듭니다.
          </p>
        </div>
      </div>
    </div>
  );
}
