// 이 파일이 하는 일: "피그마와 디자인 툴" 코스 — 피그마가 뭔지부터 시작해
// 화면 그리기 → 오토레이아웃 → 컴포넌트 → 프로토타입 → 개발자 핸드오프까지
// 8개 섹션으로 안내하는 정적 학습 페이지. 디자인 수습생이 주인공이지만,
// 섹션 7(핸드오프)은 개발 수습생도 꼭 읽어야 하는 공용 구간이에요.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 표·텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_TOOL_ROLES = `디자인 툴들의 역할 분담 — 다 같은 '그림 툴'이 아니에요

툴          한 줄 역할
──────────────────────────────────────────────────
피그마       화면(UI) 설계 + 팀 협업 — 우리의 메인 작업대
포토샵       사진 보정·합성 — 픽셀을 만지는 붓
일러스트     로고·아이콘 같은 벡터 그래픽 제작 — 정밀한 펜
스케치       피그마 이전 세대의 UI 툴 — Mac 전용이라 협업이 불편했음

→ 앱·웹 화면을 그린다 = 요즘은 거의 무조건 피그마입니다.`;

const CODE_SHORTCUTS = `꼭 외울 단축키 8개 — 이것만 알아도 손이 3배 빨라져요

키              하는 일
──────────────────────────────────────────────
V               이동(선택) 도구 — 기본 손
F               프레임(Frame) — '화면' 만들기
R               사각형(Rectangle)
T               텍스트(Text)
O               원(Oval)
Ctrl + D        복제(Duplicate) — 방금 만든 걸 하나 더
Ctrl + G        그룹 묶기
Shift + A       오토레이아웃 씌우기 (섹션 4의 주인공!)

보너스: Space 누른 채 드래그 = 캔버스 이동,
        Ctrl + 스크롤 = 확대/축소. 지도 앱 조작과 똑같아요.`;

const CODE_LOGIN_STEPS = `로그인 화면 모작 — 따라 하기 순서

1) F → 우측 패널에서 "Desktop" 프리셋 클릭 → 1440×1024 프레임 생성
2) R → 프레임 가운데에 세로로 긴 사각형 (로그인 카드)
   → 우측 패널에서 모서리 둥글기(Corner radius) 12 정도
3) T → "로그인" 제목, "이메일", "비밀번호" 라벨 입력
4) R → 납작한 사각형 2개 (입력창 2개) — Ctrl+D로 복제하면 빠름
5) R → 파란색 사각형 1개 + T로 "로그인" 글자 → 버튼 완성
6) 우리 플랫폼 로그인 화면을 옆에 띄워 두고
   간격·크기·색을 눈으로 비교하며 다듬기

완성 기준: 멀리서 보면 진짜 우리 로그인 화면과 헷갈릴 정도!`;

const CODE_AUTOLAYOUT = `오토레이아웃 = 피그마의 flexbox

오토레이아웃 없는 버튼            오토레이아웃 있는 버튼
─────────────────────       ─────────────────────
글자를 바꾸면...                글자를 바꾸면...
[ 로그인    ]  ← 상자는 그대로   [ 비밀번호 재설정 ]  ← 상자가
  글자만 삐져나옴!                 알아서 늘어남!

우측 패널에 나타나는 값들 (CSS와 짝지어 보세요):
  방향(가로/세로)      ↔  flex-direction: row / column
  간격(Spacing)       ↔  gap
  패딩(Padding)       ↔  padding
  정렬(Alignment)     ↔  justify-content / align-items

HTML/CSS 코스에서 배운 flex 그대로예요.
디자이너와 개발자가 같은 개념을 다른 화면에서 만지는 것뿐!`;

const CODE_COLOR_STYLES = `색 스타일로 등록할 우리 브랜드 팔레트 (예시)

이름            값          쓰임새
──────────────────────────────────────────
Brand/Primary   #2159C5     메인 버튼, 링크, 강조
Brand/Dark      #17408F     버튼 hover, 진한 강조
Gray/Text       #222222     본문 글자
Gray/Sub        #777777     보조 설명 글자
Gray/Line       #E5E5E5     구분선, 테두리
BG/Base         #FFFFFF     기본 배경

→ 우리 global.css가 색을 CSS 변수(var(--...))로 한곳에 모아두는 것과
  완전히 같은 발상이에요. "색을 바꿀 땐 한 군데만 고친다."`;

const CODE_HANDOFF_SPEC = `핸드오프 스펙 문서에 꼭 적을 것 — 그림만으론 부족해요

1) 상태(State)
   버튼: 기본 / hover / 눌림 / 비활성(disabled) — 4가지 다 그렸나?
   입력창: 기본 / 포커스 / 에러(빨간 테두리+메시지)

2) 인터랙션
   "이 버튼 누르면 어디로 가나요?" "로딩 중엔 뭐가 보이나요?"

3) 엣지케이스
   글자가 아주 길면? (말줄임? 줄바꿈?)
   목록이 0개면? (빈 화면에 뭘 보여주나?)
   이미지가 안 불러와지면?

→ 개발자가 물어보기 전에 디자이너가 먼저 적어 두는 것,
  그게 '일 잘하는 핸드오프'입니다.`;

const CODE_FINAL_MISSION = `졸업 과제 3단계 — 우리 플랫폼을 재료로

STEP 1. 모작 (관찰력 훈련)
  우리 플랫폼 화면 중 하나를 골라 피그마로 그대로 옮기기
  (추천: 로그인, 코스 목록, 이 페이지 같은 학습 페이지)
  체크: 프레임 사용? 오토레이아웃 사용? 색 스타일 등록?

STEP 2. 개선안 (제안력 훈련)
  UI/UX 기초 코스에서 적어 둔 "우리 플랫폼 아쉬운 점" 목록을 꺼내서
  모작한 화면 옆에 개선 버전을 나란히 만들기
  체크: 뭘 왜 바꿨는지 한 줄 설명을 화면 옆에 메모로 남겼나?

STEP 3. 공유 (협업 훈련)
  우측 상단 Share → "링크가 있는 모든 사용자 - 보기 가능" 설정
  → 링크를 멘토에게 보내고 코멘트(C키) 피드백 받기

이 3단계가 실제 디자이너의 하루 축소판이에요:
관찰하고 → 제안하고 → 공유해서 피드백 받기.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
// (섹션 5에서 배울 피그마 '컴포넌트'와 정확히 같은 발상이에요!)
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: '개발자에게 넘기기' },
  { n: 8, label: '직접 해보기' },
];

export default function FigmaPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 누구를 위한 것이고 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>피그마와 디자인 툴<br />— 디자이너의 작업대</h1>
        <p>
          개발자의 작업대가 에디터(VS Code)라면, 디자이너의 작업대는 <strong>피그마</strong>예요.
          빈 캔버스에 첫 사각형을 그리는 것부터, 완성한 시안을 개발자에게 넘기는 순간까지
          한 바퀴를 돕니다. 각 섹션의 <strong>"직접 확인해 보기"</strong>는 꼭 피그마를 열고
          손으로 따라 하세요 — 디자인 툴은 눈으로 배우는 게 아니라 손으로 배웁니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 90분</span>
          <span className="chip">무료 계정으로 충분</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> — 구글 문서처럼 여러 명이 한 화면에 동시에 들어와
          서로의 커서가 움직이는 걸 보며 작업합니다. AWESOMEDEV에서도 디자이너가 그리는 화면에
          개발자가 들어와 "이 간격 몇이에요?" 하고 바로 확인해요. 셋째, <strong>무료</strong> —
          학생·개인은 핵심 기능을 전부 공짜로 씁니다.
        </p>
        <p>
          "포토샵으로 하면 안 돼요?"라는 질문이 많은데, 툴마다 역할이 달라요.
          요리로 치면 붓·펜·작업대를 용도에 맞게 나눠 쓰는 거예요.
        </p>
        <Code>{CODE_TOOL_ROLES}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="icode">figma.com</span>에 접속해서
          학교 이메일로 가입하세요(학생은 무료). 로그인 후
          <span className="kbd">New design file</span> 버튼을 누르면 빈 캔버스가 열려요 —
          이 빈 화면이 앞으로 90분간 여러분의 작업대입니다. 탭을 닫지 말고 다음 섹션으로!
        </div>
      </Section>

      <Section n={2} title="화면 구성 익히기" sub="왼쪽 레이어, 가운데 캔버스, 오른쪽 속성 — 3분할만 알면 끝">
        <p>
          피그마 화면은 크게 셋으로 나뉘어요. <strong>왼쪽은 레이어 패널</strong> —
          지금까지 만든 모든 것의 목차예요. 책의 차례처럼, 캔버스에서 안 보이는 것도
          여기선 다 찾을 수 있어요. <strong>가운데는 캔버스</strong> — 무한히 넓은 책상이에요.
          확대·축소·이동이 자유롭죠. <strong>오른쪽은 속성 패널</strong> — 지금 선택한 것의
          크기·색·글꼴 같은 세부 정보를 보고 고치는 곳입니다.
        </p>
        <p>
          "왼쪽에서 <strong>찾고</strong>, 가운데서 <strong>그리고</strong>, 오른쪽에서
          <strong> 다듬는다</strong>" — 이 한 문장이 피그마 전부예요. 그리고 도구는
          마우스로 아이콘을 누르는 대신 단축키로 바꾸는 습관을 처음부터 들이세요.
        </p>
        <Code>{CODE_SHORTCUTS}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 새 파일에서 <span className="kbd">R</span>을 누르고 드래그해
          사각형 하나를 그린 뒤 — 왼쪽 레이어 패널에 <span className="icode">Rectangle 1</span>이
          생기는지, 오른쪽 속성 패널에 W(너비)·H(높이) 숫자가 뜨는지 확인하세요.
          그 다음 <span className="kbd">Ctrl</span>+<span className="kbd">D</span>를 세 번 —
          사각형 4개가 됐다면 3분할 구조를 다 쓴 겁니다.
        </div>
      </Section>

      <Section n={3} title="프레임과 도형" sub="프레임 = 화면 한 장, 그리고 첫 모작">
        <p>
          <strong>프레임(Frame)</strong>은 '화면 한 장'이에요. 다른 툴에서는 아트보드라고
          부르죠. 스케치북 낱장이라고 생각하면 됩니다 — 캔버스(책상) 위에 스케치북 종이(프레임)를
          여러 장 깔아 놓고, 종이마다 화면 하나씩 그리는 거예요.
          <span className="kbd">F</span>를 누르면 오른쪽 패널에
          <strong> iPhone·Android·Desktop</strong> 같은 실제 기기 크기 프리셋이 떠요 —
          직접 치수를 잴 필요 없이 클릭 한 번이면 됩니다.
        </p>
        <p>
          이제 첫 실전. 새로운 화면을 상상해서 그리는 건 어렵지만, <strong>있는 화면을 보고
          똑같이 옮기는 것(모작)</strong>은 오늘 시작한 사람도 할 수 있어요. 그림 연습을
          명화 따라 그리기로 시작하듯, UI 연습은 실제 서비스 모작으로 시작합니다.
          재료는 가장 가까운 것 — <strong>우리 학습 플랫폼의 로그인 화면</strong>이요.
        </p>
        <Code>{CODE_LOGIN_STEPS}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 순서대로 로그인 화면 모작을 완성해 보세요.
          비교하기 쉽게 브라우저 창을 반으로 나눠 왼쪽엔 우리 플랫폼 로그아웃 상태 화면,
          오른쪽엔 피그마를 띄우면 좋아요. 색은 다음 섹션 전까진 눈대중이어도 괜찮아요 —
          정확한 색 추출은 섹션 5에서 배웁니다.
        </div>
      </Section>

      <Section n={4} title="오토레이아웃" sub="피그마의 flexbox — 상자가 내용에 맞춰 스스로 늘어난다">
        <p>
          섹션 3에서 만든 버튼엔 약점이 있어요. 글자를 "로그인"에서 "비밀번호 재설정"으로
          바꾸면 <strong>글자가 상자를 삐져나갑니다</strong>. 상자 크기를 손으로 다시 맞춰야 하죠.
          <strong> 오토레이아웃(Auto layout)</strong>은 이 문제를 없애 줍니다 —
          내용물에 맞춰 상자가 스스로 늘어나고 줄어들어요.
        </p>
        <Code>{CODE_AUTOLAYOUT}</Code>
        <p>
          눈치챘나요? 이건 HTML/CSS 코스에서 배운 <strong>flexbox와 같은 개념</strong>이에요.
          개발자가 <span className="icode">display: flex; gap: 8px; padding: 12px 24px;</span>라고
          코드로 쓰는 것을, 디자이너는 오토레이아웃 패널에서 숫자로 입력하는 것뿐.
          그래서 오토레이아웃으로 만든 시안은 개발자가 CSS로 옮기기도 훨씬 쉬워요 —
          두 직군이 같은 언어로 대화하게 되는 거죠.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="오토레이아웃 버튼 하나에 패딩·아이템 간격·정렬이 어떻게 적용되는지 치수선으로 보여 주는 도해">
          <text x="20" y="28" fontSize="14" fontWeight="600" fill="var(--ink)">오토레이아웃 버튼 — 우측 패널의 숫자가 붙는 자리</text>
          <text x="60" y="62" fontSize="12.5" fill="var(--muted)">버튼(오토레이아웃 프레임)</text>

          <line x1="152" y1="118" x2="176" y2="118" stroke="var(--teal)" strokeWidth="1.5" />
          <line x1="152" y1="112" x2="152" y2="124" stroke="var(--teal)" strokeWidth="1.5" />
          <line x1="176" y1="112" x2="176" y2="124" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="164" y="106" fontSize="12" textAnchor="middle" fill="var(--teal)">8</text>

          <rect x="60" y="140" width="340" height="100" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="116" y="170" width="228" height="40" rx="8" fill="none" stroke="var(--muted)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="60" y1="190" x2="400" y2="190" stroke="var(--primary)" strokeWidth="1" strokeDasharray="6 5" />

          <rect x="124" y="176" width="28" height="28" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <circle cx="138" cy="190" r="6" fill="var(--muted)" />
          <rect x="176" y="176" width="168" height="28" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="260" y="195" fontSize="14" textAnchor="middle" fill="var(--ink)">로그인</text>

          <line x1="372" y1="140" x2="372" y2="170" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="366" y1="140" x2="378" y2="140" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="366" y1="170" x2="378" y2="170" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="384" y="159" fontSize="12" textAnchor="start" fill="var(--amber)">12</text>
          <line x1="372" y1="210" x2="372" y2="240" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="366" y1="210" x2="378" y2="210" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="366" y1="240" x2="378" y2="240" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="384" y="229" fontSize="12" textAnchor="start" fill="var(--amber)">12</text>

          <line x1="60" y1="262" x2="116" y2="262" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="60" y1="256" x2="60" y2="268" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="116" y1="256" x2="116" y2="268" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="88" y="282" fontSize="12" textAnchor="middle" fill="var(--amber)">24</text>
          <line x1="344" y1="262" x2="400" y2="262" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="344" y1="256" x2="344" y2="268" stroke="var(--amber)" strokeWidth="1.5" />
          <line x1="400" y1="256" x2="400" y2="268" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="372" y="282" fontSize="12" textAnchor="middle" fill="var(--amber)">24</text>

          <line x1="432" y1="146" x2="452" y2="146" stroke="var(--amber)" strokeWidth="3" strokeLinecap="round" />
          <text x="462" y="150" fontSize="13" fill="var(--ink)">패딩(Padding)</text>
          <text x="462" y="168" fontSize="12.5" fill="var(--muted)">padding: 12px 24px</text>

          <line x1="432" y1="196" x2="452" y2="196" stroke="var(--teal)" strokeWidth="3" strokeLinecap="round" />
          <text x="462" y="200" fontSize="13" fill="var(--ink)">간격(Spacing)</text>
          <text x="462" y="218" fontSize="12.5" fill="var(--muted)">gap: 8px</text>

          <line x1="432" y1="246" x2="452" y2="246" stroke="var(--primary)" strokeWidth="3" strokeDasharray="6 5" strokeLinecap="round" />
          <text x="462" y="250" fontSize="13" fill="var(--ink)">정렬(Alignment)</text>
          <text x="462" y="268" fontSize="12.5" fill="var(--muted)">align-items: center</text>

          <text x="60" y="316" fontSize="12.5" fill="var(--muted)">글자가 길어지면 점선 안쪽이 넓어지고, 패딩 값은 그대로 유지된 채 버튼이 늘어난다.</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 버튼 하나에 붙는 패딩·아이템 간격·정렬 — 우측 패널 숫자와 CSS 값의 대응</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 섹션 3에서 만든 로그인 버튼(사각형+글자)을 선택하고
          <span className="kbd">Shift</span>+<span className="kbd">A</span>를 누르세요.
          그 다음 버튼 글자를 더블클릭해 "비밀번호를 잊으셨나요? 이메일로 재설정 링크 받기"처럼
          아주 길게 바꿔 보세요 — 상자가 글자를 따라 스스로 늘어나면 성공!
          내친김에 입력창 2개+버튼을 모두 선택해 한 번 더 <span className="kbd">Shift</span>+
          <span className="kbd">A</span> — 세로 목록 전체가 간격을 유지한 채 움직이는 걸 보세요.
        </div>
      </Section>

      <Section n={5} title="컴포넌트와 스타일" sub="한 번 만들고, 한 곳에서 고친다">
        <p>
          로그인 버튼과 똑같이 생긴 버튼이 회원가입·글쓰기·설정 화면에도 필요하다면?
          복사해 붙이면 당장은 되지만, 나중에 "버튼 색 바꿔 주세요" 한 마디에 화면 40개를
          일일이 고치는 지옥이 열려요. <strong>컴포넌트(Component)</strong>는 이걸 해결합니다 —
          버튼을 컴포넌트로 만들어 두면(<span className="kbd">Ctrl</span>+<span className="kbd">Alt</span>+<span className="kbd">K</span>),
          복사본(인스턴스)이 원본과 연결돼서 <strong>원본 하나만 고치면 전부 한꺼번에 바뀝니다</strong>.
          도장을 하나 파 두고 여기저기 찍는 것과 같아요 — 도장을 다시 파면 다음 찍는 것부터가 아니라,
          이미 찍힌 모든 자국이 함께 바뀌는 마법 도장이죠.
        </p>
        <p>
          색도 마찬가지예요. <strong>색 스타일(Color style)</strong>로 우리 브랜드 색에
          이름을 붙여 등록해 두면, 색을 바꿀 때 스타일 하나만 수정하면 됩니다.
        </p>
        <Code>{CODE_COLOR_STYLES}</Code>
        <p>
          이 발상, 어디서 봤죠? 이 페이지가 쓰는 <span className="icode">global.css</span>도
          색을 CSS 변수로 한곳에 모아 두고 모든 화면이 가져다 써요. 그리고 이 페이지의 8개 섹션
          카드도 사실 <span className="icode">Section</span>이라는 React 컴포넌트 하나를 8번
          재사용한 거예요(파일 위쪽 코드를 열어 보면 진짜 있어요!). <strong>"반복되는 건 하나로
          만들어 재사용한다"</strong> — 피그마도 CSS도 React도 전부 같은 철학입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 로그인 버튼을 선택해 컴포넌트로 만들고
          (<span className="kbd">Ctrl</span>+<span className="kbd">Alt</span>+<span className="kbd">K</span>),
          <span className="kbd">Ctrl</span>+<span className="kbd">D</span>로 인스턴스를 3개 복제하세요.
          이제 <strong>원본</strong> 버튼의 색을 <span className="icode">#2159C5</span>에서 아무 색으로
          바꿔 보세요 — 복제본 3개가 동시에 따라 바뀌면, 방금 여러분은 디자인 시스템의
          첫 조각을 만든 겁니다.
        </div>
      </Section>

      <Section n={6} title="프로토타입" sub="그림을 '눌러 볼 수 있는 가짜 앱'으로">
        <p>
          지금까지 만든 건 멈춰 있는 그림이에요. <strong>프로토타입(Prototype)</strong> 기능은
          화면과 화면을 화살표로 이어서, 코드 한 줄 없이 <strong>진짜 앱처럼 눌러 볼 수 있게</strong>
          만들어 줍니다. 영화로 치면 촬영 전에 장면 순서를 붙여 보는 스토리보드예요 —
          만들기 전에 "이 흐름이 자연스러운가?"를 공짜로 시험해 보는 거죠.
          실제 현장에서도 개발에 들어가기 전에 프로토타입으로 흐름을 먼저 검증해요.
          코드로 만들고 나서 "어, 이 흐름 이상한데?" 하면 고치는 비용이 수십 배거든요.
        </p>
        <ol className="olist">
          <li>로그인 화면 옆에 프레임을 하나 더 만들고, 간단한 대시보드(제목+카드 몇 개)를 그려요.</li>
          <li>오른쪽 패널 상단에서 <span className="kbd">Prototype</span> 탭으로 전환해요.</li>
          <li>로그인 버튼을 선택하면 오른쪽 가장자리에 동그라미(+)가 생겨요 — 그걸 잡아 대시보드 프레임까지 드래그! 파란 화살표가 두 화면을 잇습니다.</li>
          <li>우측 상단 <span className="kbd">▶ Present</span>(재생 버튼)를 누르면 실행 모드가 열려요.</li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기</b> 실행 모드에서 로그인 버튼을 클릭해 보세요.
          화면이 대시보드로 넘어가면 — 방금 여러분은 코드 없이 '동작하는 앱의 뼈대'를 만든 거예요.
          이 상태로 폰에서도 열 수 있어요(피그마 모바일 앱) — 친구에게 눌러 보게 하고
          "로그인 버튼인 줄 알았어?"라고 물어보는 게 가장 값싼 사용성 테스트입니다.
        </div>
      </Section>

      <Section n={7} title="핸드오프 — 개발자에게 넘기기" sub="개발 수습생도 이 섹션은 필독!">
        <p>
          시안이 완성됐다고 끝이 아니에요. 개발자가 그 시안을 <strong>정확한 숫자로</strong>
          읽어낼 수 있어야 진짜 끝입니다. 이 넘겨주는 과정을 <strong>핸드오프(handoff)</strong>라고
          해요 — 건축가가 그림만 주는 게 아니라 치수가 적힌 설계도를 시공팀에 넘기는 것과 같죠.
        </p>
        <p>
          피그마엔 이를 위한 <strong>Dev Mode</strong>(구버전에선 Inspect 탭)가 있어요.
          우측 상단의 <span className="kbd">&lt;/&gt;</span> 토글을 켜고 요소를 클릭하면 —
          색상 코드(<span className="icode">#2159C5</span>), 글꼴과 크기, 요소 사이 간격(px),
          모서리 둥글기까지 전부 숫자로 표시되고, CSS 코드 형태로도 보여 줍니다.
          <strong> 개발 수습생 여러분</strong> — 디자이너에게 "이 파란색 뭐예요?"라고 물어보기 전에
          Dev Mode에서 직접 읽는 것, 그게 협업 매너이자 여러분의 속도예요. 요소를 선택하고
          <span className="kbd">Alt</span>를 누른 채 다른 요소에 마우스를 올리면 둘 사이 간격도
          바로 표시됩니다.
        </p>
        <p>
          아이콘·이미지가 필요하면 <strong>Export</strong>를 써요. 요소를 선택하고 우측 패널
          맨 아래 <span className="kbd">Export</span>에서 PNG(사진류)나 SVG(아이콘류)로 내보내면
          개발자가 바로 프로젝트에 넣을 수 있는 파일이 나옵니다.
        </p>
        <p>그런데 숫자만으론 부족해요. 그림에 안 보이는 것들을 글로 남겨야 합니다.</p>
        <Code>{CODE_HANDOFF_SPEC}</Code>
        <div className="warn">
          <b>수습 3주차 핸드오프 과제 예고</b> 3주차에 디자인 수습생과 개발 수습생이 짝을 지어
          실제 핸드오프를 합니다 — 디자인 쪽은 위 스펙 3종(상태·인터랙션·엣지케이스)이 담긴
          시안을 넘기고, 개발 쪽은 Dev Mode만 보고 질문 없이 화면을 구현하는 게 목표예요.
          "질문이 안 나오는 핸드오프"가 만점입니다.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 섹션 3~5에서 만든 내 로그인 시안에서 Dev Mode를 켜고,
          버튼을 클릭해 보세요. 내가 만든 버튼의 배경색·패딩·둥글기가 CSS 코드로 나오죠?
          그 값과 실제 우리 플랫폼 로그인 버튼(브라우저에서 <span className="kbd">F12</span> →
          요소 검사)의 CSS를 나란히 비교해 보세요 — 얼마나 비슷하게 모작했는지 숫자로 채점됩니다.
        </div>
      </Section>

      <Section n={8} title="직접 해보기 — 모작에서 개선안까지" sub="배운 걸 전부 꺼내 쓰는 졸업 과제">
        <p>
          이제 도구 사용법은 다 배웠어요. 마지막은 <strong>진짜 디자이너의 일 흐름</strong>을
          한 바퀴 도는 과제입니다. 재료는 계속 그래왔듯 우리 플랫폼이에요 —
          매일 쓰는 화면이라 아쉬운 점이 눈에 잘 보이고, 개선안을 멘토에게 보여주면
          <strong> 진짜로 반영될 수도</strong> 있으니까요.
        </p>
        <Code>{CODE_FINAL_MISSION}</Code>
        <div className="tip">
          <b>공유 전 셀프 체크</b> 레이어 패널이 <span className="icode">Rectangle 47</span>,
          <span className="icode">Frame 12</span> 같은 이름투성이라면 잠깐 멈추세요.
          <span className="icode">btn-login</span>, <span className="icode">card-course</span>처럼
          이름을 붙여 정리하는 것까지가 작업이에요 — 개발자가 변수 이름을 정성껏 짓는 것과
          같은 이유입니다. 남이 열어 봤을 때 이해되는 파일이 프로의 파일이에요.
        </div>
        <div className="warn">
          <b>주의: 개선안은 근거와 함께</b> "예뻐서 바꿨어요"는 디자인이 아니라 취향이에요.
          "버튼이 화면 하단에 있어서 스크롤 없이 안 보임 → 상단 고정으로 변경"처럼
          <strong> 문제 → 해결</strong> 형식으로 한 줄씩 근거를 다세요.
          UI/UX 기초 코스에서 배운 원칙들이 그 근거의 재료입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎨 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분의 작업대(피그마)가 생겼어요. 도구는 손에 익었으니, 다음은 그 도구로
            <strong> 무엇을, 왜</strong> 그릴지 배울 차례 —{' '}
            <Link to="/learn/uiux"><strong>UI/UX 기초</strong></Link> 코스에서 좋은 화면의
            원칙을 배우고 돌아오면, 섹션 8의 개선안 과제가 훨씬 깊어질 거예요.
            더 많은 연습 문제는 <strong>디자이너 트랙 과제집</strong>에서 이어집니다 —
            멘토에게 과제집 링크를 요청하세요.
          </p>
        </div>
      </div>
    </div>
  );
}
