// 이 파일이 하는 일: "아이콘과 이미지" 코스 — 비트맵과 벡터의 차이에서 출발해
// 해상도(@2x), 좋은 아이콘의 조건, 저작권, 이미지 최적화, 파비콘·OG 이미지까지
// 7개 섹션으로 안내하는 정적 학습 페이지. (마지막 섹션은 SVG를 메모장으로 여는 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_BITMAP_VS_VECTOR = `비트맵 vs 벡터 — 같은 그림, 완전히 다른 저장 방식

비트맵 (PNG · JPG)                벡터 (SVG)
────────────────────────      ────────────────────────
"픽셀 색을 전부 기록"              "그리는 법을 기록"
1번 칸은 빨강, 2번 칸은 파랑...     "중심 (50,50)에 반지름 40 원을 그려"
확대하면 → 칸이 커져서 계단현상      확대하면 → 다시 계산해 그림 → 항상 매끈
사진에 최적 (색이 수백만 가지)       아이콘·로고에 최적 (도형 몇 개)

레고 모자이크 vs 설계도 비유:
비트맵 = 레고 브릭으로 만든 그림. 가까이서 보면 브릭이 다 보여요.
벡터  = "여기에 원, 저기에 선" 설계도. 어떤 크기로 지어도 매끈해요.`;

const CODE_FORMAT_TABLE = `언제 어떤 포맷? — 실무 선택 기준표

포맷    종류     투명배경   최적 용도
─────────────────────────────────────────────
JPG    비트맵    ✗        사진 (풍경·인물, 색이 많은 이미지)
PNG    비트맵    ○        스크린샷, 투명 배경이 필요한 비트맵
SVG    벡터     ○        아이콘, 로고, 단순 일러스트
WebP   비트맵    ○        JPG·PNG 대체 — 같은 품질에 더 작음

한 줄 요약:
사진이면 JPG(또는 WebP), 아이콘·로고면 SVG,
"투명 배경 + 비트맵"이면 PNG.`;

const CODE_RETINA = `해상도와 @2x — 화면 픽셀 밀도 이야기

일반 모니터:  CSS의 1px = 실제 화소 1개
고해상도 폰:  CSS의 1px = 실제 화소 2개(@2x)~3개(@3x)

100×100으로 보여줄 이미지를 준비한다면?

  icon.png      (100×100)  → 일반 화면용
  icon@2x.png   (200×200)  → 고해상도 화면용 (2배 크게 만들어 축소 표시)

100×100짜리를 고해상도 폰에서 그대로 쓰면?
→ 화소 4개가 픽셀 1개의 색을 나눠 가져야 해서 뿌옇게 보여요.

그런데 SVG라면? @2x, @3x 전부 필요 없음!
어차피 "그리는 법"이라 어떤 밀도에서도 다시 매끈하게 그려집니다.
아이콘에 SVG를 쓰는 가장 실용적인 이유예요.`;

const CODE_ICON_RULES = `좋은 아이콘의 3가지 조건 — 단순 · 일관 · 의미

1) 단순함
   16~24px 크기에서도 알아볼 수 있어야 한다.
   → 디테일이 많으면 작아졌을 때 뭉개진 점이 된다.

2) 일관성
   한 화면의 아이콘은 한 가족처럼 보여야 한다.
   → 선 굵기(2px이면 전부 2px), 모서리 둥글기, 채움/외곽선
     스타일을 통일. 한 세트에서 골라 쓰는 게 정답.

3) 의미 (관습 존중)
   돋보기 = 검색, 톱니바퀴 = 설정, 집 = 홈, 휴지통 = 삭제.
   → 이미 전 세계가 합의한 기호. 창의력을 발휘할 곳이 아니다.
     "예쁜데 무슨 뜻인지 모를 아이콘"은 실패한 아이콘.`;

const CODE_OPTIMIZE = `이미지 최적화 — 용량이 곧 속도

같은 사진, 처리에 따른 용량 차이 (예시)

  원본 (폰 카메라, 4000×3000 JPG)   ...... 약 5 MB
  화면 크기에 맞게 리사이즈 (1200px)  ...... 약 400 KB
  WebP로 변환 + 압축               ...... 약 150 KB

→ 30배 이상 차이! 페이지에 사진이 10장이면 50MB vs 1.5MB.

기억할 순서:
1) 리사이즈 — 보여줄 크기보다 큰 이미지를 올리지 않는다
   (프로필 사진 영역이 200px인데 4000px 원본을 올리면 낭비)
2) 포맷 선택 — 사진은 JPG/WebP, 아이콘은 SVG
3) 압축 — 압축 도구를 거치면 눈으로 구분 안 되는 수준에서 확 줄어듦
4) 확인 — F12 → Network 탭에서 실제 전송 용량 확인`;

const CODE_FAVICON_OG = `파비콘과 OG 이미지 — 우리 서비스의 '얼굴' 두 장

파비콘 (favicon)
  브라우저 탭 왼쪽의 작은 아이콘 (16~32px).
  <head> 안에서 선언:
  <link rel="icon" href="/favicon.ico" />
  → 탭이 수십 개 열려 있을 때 우리 서비스를 찾게 해주는 이름표.

OG 이미지 (Open Graph)
  링크를 카톡·메신저에 공유했을 때 뜨는 미리보기 카드 이미지.
  <meta property="og:image" content="https://.../og.png" />
  <meta property="og:title" content="어썸데브 학습 센터" />
  → 권장 1200×630. 이게 없으면 링크가 밋밋한 글자로만 공유돼요.

둘 다 "코드 한 줄 + 이미지 한 장"이지만,
서비스의 첫인상을 결정하는 디테일입니다.`;

const CODE_SVG_SOURCE = `메모장으로 연 SVG의 실제 내용 — 이미지가 아니라 '코드'!

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="11" cy="11" r="8" />
  <line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>

읽어 보면:
  circle → 중심 (11,11), 반지름 8짜리 원
  line   → (21,21)에서 (16.65,16.65)까지 직선
= 원 하나 + 짧은 선 하나 = 돋보기(검색) 아이콘!

stroke-width="2"를 "4"로 바꿔 저장하고 브라우저로 열면
선이 굵어져요. 그림을 '수정'한 게 아니라 '코드를 고친' 겁니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '해상도와 @2x' },
  { n: 3, label: '좋은 아이콘의 조건' },
  { n: 4, label: '무료 소스와 저작권' },
  { n: 5, label: '이미지 최적화' },
  { n: 6, label: '파비콘 · OG 이미지' },
  { n: 7, label: '실습: SVG 열어보기' },
];

export default function IconsImagesPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 다루는 범위 소개 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>아이콘과 이미지<br />— 화면 위의 그림, 제대로 다루기</h1>
        <p>
          웹 화면의 절반은 그림이에요 — 아이콘, 사진, 로고, 미리보기 이미지까지.
          이 코스에서는 그림 파일의 두 가지 종류부터 저작권, 최적화, 그리고
          <strong> SVG가 사실은 코드라는 것</strong>을 직접 눈으로 확인하는 실습까지 다룹니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 3개</span>
          <span className="chip">준비물: 내 PC와 메모장</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="비트맵(PNG·JPG) vs 벡터(SVG)" sub="확대해 보면 정체가 드러난다">
        <p>
          컴퓨터가 그림을 저장하는 방식은 딱 두 가지예요.
          <strong> 비트맵</strong>은 그림을 아주 작은 칸(픽셀)으로 나눠서
          <strong> 칸마다 무슨 색인지 전부 기록</strong>하는 방식이고,
          <strong> 벡터</strong>는 색을 기록하는 대신
          <strong> "어떻게 그리는지"라는 설계도</strong>를 기록하는 방식입니다.
        </p>
        <Code>{CODE_BITMAP_VS_VECTOR}</Code>
        <p>
          구분법은 간단해요 — <strong>확대해 보면</strong> 됩니다. 비트맵은 확대할수록
          네모 칸(픽셀)이 드러나면서 계단처럼 깨지고, 벡터는 아무리 확대해도 매끈해요.
          설계도는 크게 지어도 설계도니까요.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="비트맵을 확대하면 픽셀 칸이 드러나 계단처럼 깨지고, 벡터를 확대하면 다시 계산되어 매끈한 곡선이 유지되는 좌우 비교 그림">
          <text x="160" y="28" textAnchor="middle" fill="var(--ink)" fontSize="15" fontWeight="600">비트맵 (PNG · JPG)</text>
          <text x="160" y="48" textAnchor="middle" fill="var(--muted)" fontSize="12.5">칸마다 색을 기록</text>
          <text x="480" y="28" textAnchor="middle" fill="var(--ink)" fontSize="15" fontWeight="600">벡터 (SVG)</text>
          <text x="480" y="48" textAnchor="middle" fill="var(--muted)" fontSize="12.5">그리는 법을 기록</text>

          <line x1="320" y1="20" x2="320" y2="340" stroke="var(--line)" strokeWidth="1" strokeDasharray="5 5" />

          <rect x="100" y="66" width="120" height="60" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <path d="M 130 110 Q 160 74 190 110" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <text x="160" y="144" textAnchor="middle" fill="var(--muted)" fontSize="12">원래 크기</text>

          <rect x="420" y="66" width="120" height="60" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <path d="M 450 110 Q 480 74 510 110" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="480" y="144" textAnchor="middle" fill="var(--muted)" fontSize="12">원래 크기</text>

          <text x="160" y="170" textAnchor="middle" fill="var(--muted)" fontSize="12">↓ 확대</text>
          <text x="480" y="170" textAnchor="middle" fill="var(--muted)" fontSize="12">↓ 확대</text>

          <rect x="60" y="184" width="200" height="120" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <line x1="100" y1="184" x2="100" y2="304" stroke="var(--line)" strokeWidth="1" />
          <line x1="140" y1="184" x2="140" y2="304" stroke="var(--line)" strokeWidth="1" />
          <line x1="180" y1="184" x2="180" y2="304" stroke="var(--line)" strokeWidth="1" />
          <line x1="220" y1="184" x2="220" y2="304" stroke="var(--line)" strokeWidth="1" />
          <line x1="60" y1="224" x2="260" y2="224" stroke="var(--line)" strokeWidth="1" />
          <line x1="60" y1="264" x2="260" y2="264" stroke="var(--line)" strokeWidth="1" />
          <rect x="60" y="264" width="40" height="40" fill="var(--rose)" />
          <rect x="100" y="224" width="40" height="40" fill="var(--rose)" />
          <rect x="140" y="184" width="40" height="40" fill="var(--rose)" />
          <rect x="180" y="224" width="40" height="40" fill="var(--rose)" />
          <rect x="220" y="264" width="40" height="40" fill="var(--rose)" />
          <text x="160" y="326" textAnchor="middle" fill="var(--rose)" fontSize="13" fontWeight="600">칸이 커져 계단 현상</text>
          <text x="160" y="346" textAnchor="middle" fill="var(--muted)" fontSize="12">없는 정보는 만들어 낼 수 없다</text>

          <rect x="380" y="184" width="200" height="120" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <path d="M 400 288 Q 480 168 560 288" fill="none" stroke="var(--teal)" strokeWidth="4" strokeLinecap="round" />
          <circle cx="400" cy="288" r="4" fill="var(--teal)" />
          <circle cx="560" cy="288" r="4" fill="var(--teal)" />
          <circle cx="480" cy="208" r="4" fill="var(--amber)" />
          <text x="480" y="326" textAnchor="middle" fill="var(--teal)" fontSize="13" fontWeight="600">다시 계산해 그림 → 매끈</text>
          <text x="480" y="346" textAnchor="middle" fill="var(--muted)" fontSize="12">설계도는 크게 지어도 설계도</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 확대하면 정체가 드러난다 — 비트맵은 픽셀 칸이 커져 계단이 되고, 벡터는 좌표를 다시 계산해 언제나 매끈하다</p>
        <Code>{CODE_FORMAT_TABLE}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼을 연 상태에서
          <span className="kbd">Ctrl</span> + <span className="kbd">+</span> 를 여러 번 눌러
          화면을 300~400%로 확대해 보세요. 메뉴의 아이콘(SVG)은 여전히 매끈한데,
          사진(비트맵)은 슬슬 뭉개지기 시작할 거예요. 다 보고 나면
          <span className="kbd">Ctrl</span> + <span className="kbd">0</span> 으로 원래 크기 복귀!
        </div>
      </Section>

      <Section n={2} title="해상도와 @2x" sub="같은 1px인데 폰에서는 왜 4배 촘촘할까">
        <p>
          요즘 스마트폰 화면은 같은 면적에 화소를 훨씬 촘촘하게 박아 넣어요.
          그래서 코드에서 말하는 <span className="icode">1px</span>이 실제로는
          화소 <strong>2개(@2x)</strong> 또는 <strong>3개(@3x)</strong>로 그려집니다.
          도화지 한 칸을 더 잘게 쪼개 색칠하는 셈이라 글씨와 그림이 훨씬 선명하죠.
        </p>
        <Code>{CODE_RETINA}</Code>
        <p>
          그래서 비트맵 이미지는 <strong>보여줄 크기의 2배로 만들어 두는</strong> 관습이
          생겼어요 — 파일명 뒤의 <span className="icode">@2x</span>가 그 표시입니다.
          디자이너에게 아이콘을 받을 때 "@2x로 주세요"라는 말이 오가는 이유예요.
          그리고 이 번거로움을 한 방에 없애는 게 벡터 — <strong>SVG는 애초에 설계도라
          어떤 화면 밀도에서도 스스로 매끈하게 그려집니다.</strong>
        </p>
        <div className="tip">
          <b>비유 한 스푼</b> 비트맵 @1x를 고해상도 화면에 쓰는 건, A4로 뽑은 포스터를
          현수막 크기로 확대 복사하는 것과 같아요. 원본이 작으면 아무리 좋은 화면도
          없는 정보를 만들어 내지 못합니다.
        </div>
      </Section>

      <Section n={3} title="좋은 아이콘의 조건" sub="단순하게, 일관되게, 뜻이 통하게">
        <p>
          아이콘은 <strong>글자 없이 뜻을 전하는 그림 언어</strong>예요. 화장실 표지판이나
          비상구 픽토그램처럼, 처음 보는 사람도 0.5초 안에 알아봐야 합니다.
          잘 만든 아이콘에는 세 가지 공통점이 있어요.
        </p>
        <Code>{CODE_ICON_RULES}</Code>
        <p>
          특히 <strong>일관성</strong>이 초보가 가장 많이 놓치는 부분이에요. 이 사이트
          저 사이트에서 아이콘을 하나씩 주워 오면, 선 굵기와 스타일이 제각각이라
          화면이 어수선해집니다. 교복 입은 반에 혼자 사복 입고 온 느낌이랄까요.
          <strong> 반드시 한 아이콘 세트 안에서 골라 쓰세요.</strong>
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼의 메뉴 아이콘들을 관찰해 보세요.
          선 굵기가 같은지, 전부 외곽선(라인) 스타일로 통일돼 있는지,
          돋보기·집·톱니바퀴가 관습대로 쓰였는지 — 배운 3가지 조건으로 채점해 보는 거예요.
        </div>
      </Section>

      <Section n={4} title="무료 소스와 저작권" sub="'무료'와 '마음대로'는 다른 말이다">
        <p>
          아이콘과 사진을 전부 직접 그릴 수는 없으니, 실무에서는 무료 아이콘 세트와
          무료 이미지 사이트를 많이 활용해요. 오픈소스 아이콘 세트, 무료 스톡 사진
          사이트처럼 좋은 소스가 많습니다. <strong>단, 다운로드 버튼이 있다고 해서
          마음대로 써도 된다는 뜻은 절대 아니에요.</strong>
        </p>
        <div className="warn">
          <b>이것만은 꼭! — 라이선스를 확인하지 않고 쓰면 회사가 위험해집니다</b>
          <p>
            인터넷의 모든 이미지에는 <strong>저작권</strong>이 있어요. 검색해서 나온 이미지를
            회사 서비스에 그냥 쓰면 <strong>저작권 침해</strong>이고, 손해배상 청구로
            이어질 수 있습니다. "학생이라서", "몰랐어서"는 면책 사유가 아니에요.
            쓰기 전에 반드시 확인하세요.
          </p>
          <ol className="olist">
            <li><strong>상업적 이용 가능?</strong> — 우리 회사 서비스에 쓰는 건 전부 상업적 이용이에요. "개인/비상업용 무료"는 회사에서 못 씁니다.</li>
            <li><strong>출처 표기(저작자 표시) 필요?</strong> — CC BY 같은 라이선스는 무료지만 저작자 이름을 표기해야 해요. 조건을 지켜야 무료입니다.</li>
            <li><strong>수정 가능?</strong> — 색을 바꾸거나 잘라 쓰는 것도 '수정'이에요. 수정 금지(ND) 라이선스는 원본 그대로만 써야 합니다.</li>
          </ol>
          <p>
            <strong>CC(Creative Commons)</strong>는 "이 조건만 지키면 써도 좋다"는 약속
            표시예요. CC0는 조건 없음, CC BY는 저작자 표시, BY-NC는 비상업만…
            글자가 늘수록 조건이 늘어난다고 기억하세요. 조금이라도 애매하면
            <strong> 혼자 판단하지 말고 멘토에게 물어보는 것</strong> — 그게 프로의 습관입니다.
          </p>
        </div>
        <div className="tip">
          <b>안전한 기본기</b> 라이선스가 명확한 무료 아이콘 세트 하나, 상업적 이용이
          허용된 무료 이미지 사이트 한두 곳을 '내 단골'로 정해 두세요. 매번 검색으로
          아무 이미지나 줍는 것보다 훨씬 빠르고, 훨씬 안전합니다.
        </div>
      </Section>

      <Section n={5} title="이미지 최적화" sub="용량이 곧 속도, 속도가 곧 사용자 경험">
        <p>
          웹페이지가 느린 원인 1순위는 거의 항상 <strong>이미지 용량</strong>이에요.
          코드(HTML·JS)는 보통 수십~수백 KB인데, 최적화 안 된 사진 한 장이
          5MB를 넘기도 하거든요. 책가방에 교과서 대신 아령을 넣고 다니는 셈이죠.
        </p>
        <Code>{CODE_OPTIMIZE}</Code>
        <p>
          특히 <strong>리사이즈</strong>가 핵심이에요. 화면에 200px로 보일 프로필 사진에
          4000px 원본을 올리면, 사용자는 쓰지도 않을 픽셀 수백만 개를 다운로드하는
          거예요. 서버(AWS EC2)의 트래픽 비용도 그만큼 늘어나고요 —
          <strong> 최적화는 사용자에게도, 회사 지갑에도 좋은 일</strong>입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼에서 <span className="kbd">F12</span> →
          <span className="kbd">Network</span> 탭 → 필터에서 <span className="icode">Img</span>를
          선택하고 <span className="kbd">F5</span> 새로고침. 이미지마다 전송 용량(Size)이
          보여요. 가장 무거운 이미지는 몇 KB인가요? SVG 아이콘들이 얼마나 가벼운지도
          비교해 보세요 — 보통 1KB 안팎입니다.
        </div>
      </Section>

      <Section n={6} title="파비콘과 OG 이미지" sub="탭 속 이름표와 공유 미리보기 카드">
        <p>
          서비스에는 화면 속 그림 말고도 중요한 이미지가 두 장 더 있어요.
          하나는 브라우저 <strong>탭에 뜨는 작은 아이콘(파비콘)</strong>, 다른 하나는
          링크를 메신저에 공유했을 때 뜨는 <strong>미리보기 카드(OG 이미지)</strong>입니다.
          둘 다 서비스의 명함 같은 존재예요.
        </p>
        <Code>{CODE_FAVICON_OG}</Code>
        <p>
          파비콘이 없으면 탭에 밋밋한 기본 아이콘이 뜨고, OG 이미지가 없으면 링크
          공유가 글자만 덜렁 있는 초라한 모습이 돼요. 기능에는 지장이 없지만
          <strong> "관리 안 된 서비스"라는 인상</strong>을 줍니다. 작지만 완성도를
          가르는 디테일이에요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼과 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)의
          탭 아이콘을 비교해 보세요. 그리고 아무 페이지에서 <span className="kbd">F12</span> →
          <span className="kbd">Elements</span> 탭에서 <span className="icode">&lt;head&gt;</span>를
          펼쳐 <span className="icode">link rel="icon"</span>과
          <span className="icode">og:image</span> 태그를 찾아보세요. 방금 배운 두 장의 얼굴이
          코드로는 이렇게 선언돼 있습니다.
        </div>
      </Section>

      <Section n={7} title="실습: SVG를 메모장으로 열어 보기" sub="이미지인 줄 알았는데, 코드였다">
        <p>
          이 코스의 하이라이트 실습이에요. SVG 파일을 <strong>이미지 뷰어가 아니라
          메모장으로</strong> 열어 보면, 그림이 아니라 <strong>글자(코드)</strong>가
          나타납니다. 벡터가 "그리는 법의 기록"이라는 말을 눈으로 확인하는 순간이죠.
        </p>
        <ol className="olist">
          <li>브라우저에서 아무 사이트의 SVG 아이콘에 우클릭 → <strong>"이미지를 다른 이름으로 저장"</strong>으로 <span className="icode">.svg</span> 파일을 바탕화면에 저장해요. (플랫폼 프로젝트를 받았다면 <span className="icode">frontend/src/assets</span> 폴더 안의 SVG를 써도 좋아요.)</li>
          <li>저장한 파일에 우클릭 → <strong>연결 프로그램 → 메모장</strong>으로 열어요.</li>
          <li>그림 대신 <span className="icode">&lt;svg&gt;</span>로 시작하는 코드가 보이면 성공!</li>
          <li>같은 파일을 이번엔 브라우저로 열어 보세요(파일을 브라우저 창에 끌어다 놓기). 똑같은 내용이 그림으로 그려집니다.</li>
        </ol>
        <Code>{CODE_SVG_SOURCE}</Code>
        <p>
          한 발 더 — 메모장에서 <span className="icode">stroke-width</span> 숫자나
          색 값을 바꿔 저장한 뒤 브라우저를 새로고침해 보세요. <strong>포토샵 없이
          텍스트 편집만으로 그림이 바뀝니다.</strong> 그래서 SVG는 개발자가 코드로
          색을 입히고(<span className="icode">currentColor</span>), CSS로 애니메이션까지
          걸 수 있는 특별한 이미지예요. React 컴포넌트 안에 직접 넣을 수도 있고요.
        </p>
        <div className="tip">
          <b>정리 한 줄</b> 비트맵은 "완성된 그림"이라 편집 도구가 필요하지만,
          SVG는 "그림을 그리는 코드"라 우리가 배우는 개발 도구로 다룰 수 있어요.
          아이콘의 세계에서 SVG가 표준이 된 이유입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎨 여기까지 왔다면</h3>
          <p className="muted">
            이제 그림 파일의 두 종류(비트맵·벡터), @2x가 필요한 이유, 좋은 아이콘의
            3조건, <strong>저작권 확인 습관</strong>, 최적화 순서, 파비콘·OG까지 —
            화면 위의 그림을 다루는 기본기를 갖췄어요. 다음은 이 그림들이 놓일 화면
            전체의 배치를 배울 차례 — <Link to="/learn/layout"><strong>레이아웃과 그리드</strong></Link> 코스에서
            여백과 정렬을 이어서 배우고, <Link to="/learn/coding"><strong>코딩 기초</strong></Link>에서
            SVG를 컴포넌트로 다루는 법까지 연결해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
