// 이 파일이 하는 일: "2진수와 데이터 표현" 코스 — 전기 스위치의 켜짐/꺼짐에서 출발해
// 숫자·문자·색·이미지·소리가 전부 0과 1로 표현되는 원리까지 7개 섹션으로 안내하는 정적 학습 페이지.
// (왜 0과 1인가 → 진법 변환 → 비트·바이트 단위 → 문자 인코딩 → 색 → 이미지·소리 → 계산기 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_SWITCH = `컴퓨터의 가장 작은 부품 = 전기 스위치(트랜지스터)

전기가 흐른다  → 1 (켜짐, ON)
전기가 안 흐른다 → 0 (꺼짐, OFF)

"왜 하필 2개?" — 상태가 딱 2개면 헷갈릴 수가 없어서예요.
전압이 조금 흔들려도 "켜짐인지 꺼짐인지"는 확실히 구분됩니다.

만약 0~9를 전압 10단계로 표현했다면?
  전압이 살짝만 흔들려도 6이 7로 읽히는 사고가 나요.
  → 그래서 컴퓨터는 '확실한 둘'만 씁니다.

여러분 PC의 CPU 안에는 이런 스위치가 수십억 개 들어 있어요.
컴퓨터가 하는 모든 일은 결국 이 스위치들을 켜고 끄는 것!`;

const CODE_BIN_TO_DEC = `2진수 → 10진수: 각 자리의 '값'을 더하면 끝!

10진수는 자리마다 1, 10, 100, 1000... (×10씩)
 2진수는 자리마다 1, 2, 4, 8, 16, 32, 64, 128... (×2씩)

예) 2진수 1011 은?

  자리값:   8    4    2    1
  숫자  :   1    0    1    1
           ─────────────────
  계산  :   8  + 0  + 2  + 1  = 11

→ 1이 켜진 자리의 값만 골라 더하면 됩니다.
  (스위치가 켜진 전구의 값만 더한다고 생각해 보세요)

연습) 1101 = ?    11111111 = ?
답:   13          255  ← 이 255, 곧 또 만나요!`;

const CODE_DEC_TO_BIN = `10진수 → 2진수: 2로 계속 나누고, 나머지를 거꾸로 읽기

예) 13을 2진수로:

  13 ÷ 2 = 6  나머지 1  ↑
   6 ÷ 2 = 3  나머지 0  │ 아래에서 위로
   3 ÷ 2 = 1  나머지 1  │ 거꾸로 읽는다
   1 ÷ 2 = 0  나머지 1  │
                        │
  → 1101                 끝!

검산: 8 + 4 + 0 + 1 = 13  ✓

지름길 — '큰 자리값부터 빼기'도 있어요:
  13에서 8 빼기 가능? → 1, 남은 5에서 4 빼기 가능? → 1,
  남은 1에서 2 빼기 가능? → 0, 1 빼기 가능? → 1  ⇒ 1101`;

const CODE_UNITS = `비트에서 테라바이트까지 — 데이터의 단위

1 bit          0 아니면 1. 스위치 한 개.
1 Byte = 8bit  스위치 8개 묶음. 영어 한 글자 크기.
               8칸이면 2⁸ = 256가지(0~255)를 표현!

1 KB = 1,024 Byte     ← 1,000이 아니라 1,024?!
1 MB = 1,024 KB       비밀: 2¹⁰ = 1,024
1 GB = 1,024 MB       컴퓨터는 2의 거듭제곱으로 세는 게 편해서,
1 TB = 1,024 GB       1,000에 가장 가까운 2¹⁰을 한 묶음으로 씁니다.

대략적인 감:
  카톡 메시지 한 줄  ≈ 수십 Byte
  사진 한 장        ≈ 2~5 MB
  영화 한 편        ≈ 1~4 GB
  요즘 노트북 SSD    ≈ 256 GB ~ 1 TB

참고: 하드디스크 제조사는 1TB = 1,000⁴Byte로 계산해서 팔아요.
그래서 1TB 디스크를 꽂으면 윈도우엔 약 931GB로 보입니다. (사기 아님!)`;

const CODE_ASCII = `문자는 어떻게 숫자가 되나 — "글자마다 번호표를 붙이자"

ASCII (1963년~) : 영어권에서 만든 128개짜리 번호표

  'A' = 65    'B' = 66    'C' = 67 ...
  'a' = 97    'b' = 98    ...
  '0' = 48    (문자로서의 0! 숫자 0과 달라요)
  스페이스 = 32,  줄바꿈 = 10

즉 컴퓨터에 "AB"를 저장하면 실제로는:
  65, 66  →  01000001, 01000010  ← 이렇게 스위치가 켜집니다

문제: 128칸으로는 한글·한자·이모지를 못 담아요.
→ 전 세계 모든 문자에 번호를 붙인 '유니코드'가 등장!
  '가' = 44032(U+AC00),  '힣' = 55203,  '😀' = 128512`;

const CODE_UTF8 = `UTF-8 — 유니코드 번호를 실제 바이트로 담는 포장법

글자마다 필요한 만큼만 바이트를 씁니다 (가변 길이):

  영어 'A'   → 1바이트   01000001
  한글 '가'  → 3바이트   11101010 10110000 10000000
  이모지 😀  → 4바이트

그래서 같은 10글자라도 영어보다 한글 문장이 용량이 커요.

'글자 깨짐(뷁·)'의 정체:
  UTF-8로 포장한 데이터를 다른 규칙(EUC-KR 등)으로 풀면
  번호표가 엉뚱한 글자에 매칭 → 외계어가 됩니다.
  포장 규칙과 개봉 규칙이 같아야 해요!

우리 스택에서도: PostgreSQL 데이터베이스를 만들 때
인코딩을 UTF8로 지정하는 이유가 바로 이것입니다.`;

const CODE_COLOR = `색은 숫자다 — #2159C5 해부하기

모니터의 픽셀 하나 = 빨강(R)·초록(G)·파랑(B) 꼬마전구 3개.
각 전구의 밝기를 0~255(= 1바이트!)로 조절해 색을 섞어요.

#2159C5 를 두 글자씩 자르면:

  # 21 59 C5
    │  │  └─ B(파랑) = C5(16진수) = 197  ← 많이!
    │  └──── G(초록) = 59        =  89  ← 조금
    └─────── R(빨강) = 21        =  33  ← 아주 조금

→ 파랑이 압도적 = 파란색 계열!

잠깐, 16진수(0~9, A~F)는 왜 쓰나요?
  2진수 4자리 = 딱 16진수 1글자. (1100 0101 = C5)
  긴 2진수를 사람이 읽기 좋게 접어 쓴 것뿐이에요.

극단값으로 감 잡기:
  #000000 = R0 G0 B0   → 전구 다 끔 = 검정
  #FFFFFF = 255 255 255 → 다 최대 = 하양
  #FF0000 = 빨강만 최대 = 빨강`;

const CODE_MEDIA = `이미지와 소리도 결국 숫자입니다

이미지 = 픽셀(색 숫자)의 격자
  1920×1080 사진 = 픽셀 2,073,600개
  픽셀당 RGB 3바이트 → 약 6MB
  "어? 사진은 2~3MB던데?" → JPEG 같은 압축이
  눈이 눈치 못 챌 정보를 줄여 주기 때문이에요.

소리 = 공기의 떨림(파형)을 초당 수만 번 '숫자로 채집'
  CD 음질: 1초에 44,100번, 매번 2바이트로 기록
  = 파형 곡선을 아주 촘촘한 점으로 받아 적기 (샘플링)
  점이 촘촘할수록 원래 곡선에 가깝고, 용량도 커집니다.

영상 = 이미지(프레임)를 초당 30~60장 + 소리
  → 그래서 영상이 GB급으로 큰 거예요.

핵심: 사진·노래·영상·이 페이지의 글자까지, 저장되는 순간
전부 0과 1의 긴 행렬입니다. 다르게 '해석'될 뿐!`;

const CODE_CALC = `Windows 계산기 = 공짜 진법 변환기

1) 시작 메뉴 → "계산기" 실행
2) 왼쪽 위 ☰ 메뉴 → "프로그래머" 모드 선택
3) 화면에 HEX / DEC / OCT / BIN 네 줄이 동시에 보여요

미션 A: DEC를 누르고 13 입력
  → BIN 줄에 1101 이 뜨는지 확인 (섹션 2에서 손으로 푼 값!)

미션 B: DEC 255 입력
  → BIN 1111 1111 (1바이트 꽉 참!), HEX FF 확인

미션 C: HEX를 누르고 21 입력 → DEC 33
  이어서 59 → 89,  C5 → 197
  (섹션 5의 #2159C5 해부를 계산기로 검산한 것!)

미션 D: 아무 수나 넣고 BIN 표시의 자리별 켜짐/꺼짐을
  토글해 보세요 — DEC 값이 자리값만큼 변하는 게 보입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '왜 0과 1인가' },
  { n: 2, label: '진법 변환 연습' },
  { n: 3, label: '비트·바이트·단위' },
  { n: 4, label: '문자 인코딩' },
  { n: 5, label: '색은 숫자다' },
  { n: 6, label: '이미지와 소리' },
  { n: 7, label: '계산기 실습' },
];

export default function BinaryPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>2진수와 데이터 표현<br />— 스위치 하나에서 사진 한 장까지</h1>
        <p>
          컴퓨터는 왜 0과 1밖에 모를까요? 그 둘만으로 어떻게 문자·색·사진·노래를 전부
          담아낼까요? 전기 스위치 하나에서 출발해, 지금 보고 있는 이 화면이 통째로
          숫자라는 걸 <strong>직접 계산하고 확인</strong>하면서 배웁니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">준비물: 계산기 앱 + 손가락</span>
          <span className="chip">실습 4개</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="왜 0과 1인가" sub="컴퓨터의 알파벳은 딱 두 글자">
        <p>
          컴퓨터를 아무리 뜯어 봐도 그 안에 숫자나 글자는 없어요. 있는 건
          <strong> 전기가 흐르거나(1), 안 흐르거나(0)</strong> 하는 아주 작은 스위치
          (트랜지스터) 수십억 개뿐입니다. 형광등 스위치를 상상해 보세요 — 켜짐과 꺼짐,
          중간은 없죠. 이 확실함이 핵심이에요.
        </p>
        <Code>{CODE_SWITCH}</Code>
        <p>
          글자 두 개뿐인 알파벳이라니 너무 가난해 보이지만, <strong>자리수를 늘리면</strong>
          {' '}표현력은 폭발합니다. 스위치 1개는 2가지, 2개는 4가지, 3개는 8가지...
          10개면 벌써 1,024가지예요. 모스 부호가 '삐'와 '삐—' 두 소리만으로 모든 문장을
          전보로 보냈던 것과 똑같은 원리입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 한 손을 펴 보세요. 손가락 5개를 스위치라 치고
          접힘=0, 펴짐=1이라면 몇 가지 상태를 만들 수 있을까요?
          2×2×2×2×2 = <strong>32가지</strong> — 손가락 다섯 개로 0부터 31까지 셀 수 있어요.
          양손이면 1,023까지! (섹션 2를 배우면 진짜로 세는 법을 알게 됩니다.)
        </div>
      </Section>

      <Section n={2} title="2진수 ↔ 10진수 변환 연습" sub="자리값만 알면 5분 만에 끝나는 기술">
        <p>
          우리가 쓰는 10진수는 자리가 하나 올라갈 때마다 값이 <strong>10배</strong>
          (1, 10, 100...)가 돼요. 2진수는 똑같은 규칙에서 숫자만 바꾼 것 —
          자리마다 <strong>2배</strong>(1, 2, 4, 8, 16...)입니다. 이 '자리값'만 기억하면
          변환은 덧셈 문제가 돼요.
        </p>
        <Code>{CODE_BIN_TO_DEC}</Code>
        <svg className="diagram" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="2진수 1011을 자릿값 8, 4, 2, 1로 풀어 10진수 11로 바꾸는 과정 도해">
          <text x="320" y="32" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">2진수 1011 → 10진수 변환</text>
          <text x="320" y="70" textAnchor="middle" fontSize="12" fill="var(--muted)">자릿값 — 오른쪽 끝이 1, 왼쪽으로 갈수록 ×2</text>
          <text x="140" y="96" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">8</text>
          <text x="260" y="96" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">4</text>
          <text x="380" y="96" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">2</text>
          <text x="500" y="96" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">1</text>
          <rect x="100" y="106" width="80" height="56" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="220" y="106" width="80" height="56" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="340" y="106" width="80" height="56" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="460" y="106" width="80" height="56" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="140" y="140" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--primary)">1</text>
          <text x="260" y="140" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--muted)">0</text>
          <text x="380" y="140" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--primary)">1</text>
          <text x="500" y="140" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--primary)">1</text>
          <text x="140" y="182" textAnchor="middle" fontSize="12" fill="var(--primary)">켜짐</text>
          <text x="260" y="182" textAnchor="middle" fontSize="12" fill="var(--muted)">꺼짐</text>
          <text x="380" y="182" textAnchor="middle" fontSize="12" fill="var(--primary)">켜짐</text>
          <text x="500" y="182" textAnchor="middle" fontSize="12" fill="var(--primary)">켜짐</text>
          <line x1="140" y1="190" x2="140" y2="206" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <line x1="260" y1="190" x2="260" y2="206" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" strokeDasharray="3 4" />
          <line x1="380" y1="190" x2="380" y2="206" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <line x1="500" y1="190" x2="500" y2="206" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <text x="140" y="226" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--primary)">8</text>
          <text x="200" y="226" textAnchor="middle" fontSize="14" fill="var(--muted)">+</text>
          <text x="260" y="226" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="320" y="226" textAnchor="middle" fontSize="14" fill="var(--muted)">+</text>
          <text x="380" y="226" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--primary)">2</text>
          <text x="440" y="226" textAnchor="middle" fontSize="14" fill="var(--muted)">+</text>
          <text x="500" y="226" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--primary)">1</text>
          <line x1="100" y1="242" x2="540" y2="242" stroke="var(--line)" strokeWidth="1.5" />
          <text x="320" y="268" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">8 + 0 + 2 + 1 = <tspan fill="var(--teal)">11</tspan></text>
          <text x="320" y="290" textAnchor="middle" fontSize="12" fill="var(--muted)">1이 켜진 자리의 값만 골라 더하면 끝!</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 2진수 1011의 자릿값 도해 — 켜진(1) 자리의 값 8, 2, 1만 더하면 10진수 11</p>
        <p>
          반대 방향(10진수 → 2진수)은 <strong>2로 나눈 나머지를 거꾸로 읽는</strong>
          {' '}기계적인 방법이 제일 안전합니다. 동전 교환기에 지폐를 넣으면 큰 동전부터
          차례로 바꿔 주듯, 수를 2의 덩어리로 분해하는 과정이에요.
        </p>
        <Code>{CODE_DEC_TO_BIN}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 종이에 자기 <strong>생일의 '일'</strong>(1~31)을 2진수로
          바꿔 보세요. 5자리 안에 반드시 들어갑니다(섹션 1의 손가락 5개 = 31까지!).
          다 풀었으면 손가락을 접고 펴서 그 2진수를 만들어 옆 사람에게 맞혀 보게 하세요.
          검산은 섹션 7의 계산기 실습에서 합니다.
        </div>
        <div className="warn">
          <b>흔한 실수</b> 자리값을 왼쪽부터 1, 2, 4... 로 매기면 틀려요.
          자리값은 항상 <strong>오른쪽 끝이 1</strong>이고 왼쪽으로 갈수록 2배씩 커집니다.
          10진수에서 일의 자리가 오른쪽 끝인 것과 같아요.
        </div>
      </Section>

      <Section n={3} title="비트·바이트, 그리고 1024의 비밀" sub="KB, MB, GB — 매일 보던 단위의 정체">
        <p>
          스위치 하나가 <strong>비트(bit)</strong>, 비트 8개 묶음이 <strong>바이트(Byte)</strong>예요.
          왜 하필 8개냐면, 8비트면 2⁸ = <strong>256가지</strong>를 표현할 수 있어서 영어 알파벳·숫자·기호를
          담기에 딱 알맞았거든요. 계란 한 판처럼, 바이트는 데이터를 세는 기본 묶음이 됐습니다.
        </p>
        <Code>{CODE_UNITS}</Code>
        <p>
          핵심은 <strong>1KB = 1,024Byte</strong>라는 것. 1,000이 아니라 1,024인 이유는
          컴퓨터가 2진수 세상에 살기 때문이에요. 2를 10번 곱하면 1,024 — 1,000에 아주 가까운
          '2진수식 천 단위'라서 이걸 한 묶음으로 삼았습니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 290" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="비트 8개가 모여 1바이트가 되고, 바이트부터 테라바이트까지 단위가 1024배씩 커지는 계층 도해">
          <text x="62" y="42" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--ink)">1 bit</text>
          <rect x="40" y="54" width="44" height="44" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="62" y="82" textAnchor="middle" fontSize="15" fontWeight="700" fill="var(--ink)">1</text>
          <text x="62" y="118" textAnchor="middle" fontSize="12" fill="var(--muted)">스위치 1개</text>
          <text x="128" y="62" textAnchor="middle" fontSize="12" fill="var(--muted)">8개</text>
          <line x1="100" y1="76" x2="150" y2="76" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="144,70 154,76 144,82" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <text x="345" y="34" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--ink)">1 Byte = 8 bit (2⁸ = 256가지)</text>
          <line x1="180" y1="44" x2="510" y2="44" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="180" y1="44" x2="180" y2="50" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="510" y1="44" x2="510" y2="50" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="180" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="222" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="264" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="306" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="348" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="390" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="432" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="474" y="54" width="36" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="198" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="240" y="82" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--primary)">1</text>
          <text x="282" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="324" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="366" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="408" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="450" y="82" textAnchor="middle" fontSize="14" fill="var(--muted)">0</text>
          <text x="492" y="82" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--primary)">1</text>
          <text x="345" y="118" textAnchor="middle" fontSize="12" fill="var(--muted)">예) 01000001 → 10진수 65 → 문자 'A'</text>
          <text x="320" y="164" textAnchor="middle" fontSize="13" fontWeight="700" fill="var(--ink)">단위 사다리 — 한 계단마다 ×1,024 (2¹⁰)</text>
          <rect x="20" y="186" width="76" height="52" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="155" y="186" width="76" height="52" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="290" y="186" width="76" height="52" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="425" y="186" width="76" height="52" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="560" y="186" width="76" height="52" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <text x="58" y="217" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">Byte</text>
          <text x="193" y="217" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">KB</text>
          <text x="328" y="217" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">MB</text>
          <text x="463" y="217" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">GB</text>
          <text x="598" y="217" textAnchor="middle" fontSize="14" fontWeight="700" fill="var(--ink)">TB</text>
          <text x="125" y="198" textAnchor="middle" fontSize="12" fontWeight="700" fill="var(--teal)">×1,024</text>
          <line x1="102" y1="212" x2="146" y2="212" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="140,206 149,212 140,218" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="260" y="198" textAnchor="middle" fontSize="12" fontWeight="700" fill="var(--teal)">×1,024</text>
          <line x1="237" y1="212" x2="281" y2="212" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="275,206 284,212 275,218" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="395" y="198" textAnchor="middle" fontSize="12" fontWeight="700" fill="var(--teal)">×1,024</text>
          <line x1="372" y1="212" x2="416" y2="212" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="410,206 419,212 410,218" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="530" y="198" textAnchor="middle" fontSize="12" fontWeight="700" fill="var(--teal)">×1,024</text>
          <line x1="507" y1="212" x2="551" y2="212" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="545,206 554,212 545,218" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="320" y="272" textAnchor="middle" fontSize="12" fill="var(--muted)">감 잡기: 사진 한 장 ≈ 2~5 MB, 영화 한 편 ≈ 1~4 GB</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 비트 8개가 모여 1바이트, 단위는 한 계단마다 ×1,024씩 커진다</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아무 폴더에서 파일 하나를 골라
          <span className="kbd">마우스 오른쪽 클릭</span> → <span className="kbd">속성</span>을 열어 보세요.
          "크기: 2.31MB (2,428,517 바이트)"처럼 <strong>두 숫자가 같이</strong> 나와요.
          2,428,517 ÷ 1,024 ÷ 1,024 를 계산기로 눌러 보면 정말 2.31이 나옵니다 —
          1,000으로 나누면 안 맞아요!
        </div>
      </Section>

      <Section n={4} title="문자는 어떻게 숫자가 되나" sub="ASCII에서 유니코드, 그리고 한글 UTF-8까지">
        <p>
          스위치로 숫자를 만드는 건 알겠는데, 글자는요? 방법은 의외로 단순합니다 —
          <strong> 글자마다 번호표를 붙이는 것</strong>. 사물함에 이름 대신 번호를 매기듯,
          'A'는 65번, 'B'는 66번... 이렇게 전 세계가 같은 번호표를 쓰기로 약속한 게
          문자 인코딩이에요.
        </p>
        <Code>{CODE_ASCII}</Code>
        <p>
          한글은 어떨까요? '가'부터 '힣'까지 조합 가능한 글자가 <strong>11,172자</strong>나
          돼서 1바이트(256칸)로는 어림도 없어요. 그래서 유니코드 번호를
          <strong> 여러 바이트에 나눠 담는 포장법, UTF-8</strong>을 씁니다.
        </p>
        <Code>{CODE_UTF8}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼 아무 페이지에서
          <span className="kbd">F12</span> 개발자 도구 → <span className="kbd">Console</span> 탭을 열고
          <span className="icode">'가'.charCodeAt(0)</span> 을 입력해 보세요 —
          <strong>44032</strong>가 나오면 방금 유니코드 번호표를 직접 읽은 거예요.
          <span className="icode">'A'.charCodeAt(0)</span>(65),
          <span className="icode">String.fromCharCode(44032 + 1)</span>('각'!)도 해 보세요.
        </div>
        <div className="warn">
          <b>실무 연결</b> 백엔드(Spring Boot)와 데이터베이스(PostgreSQL)의 인코딩이 어긋나면
          한글이 <strong>???나 외계어로 깨져 저장</strong>됩니다. 신입 개발자가 가장 자주 만나는
          사고 중 하나라, "인코딩은 처음부터 끝까지 UTF-8로 통일"이 우리 회사의 기본 규칙이에요.
        </div>
      </Section>

      <Section n={5} title="색은 숫자다 — #2159C5 해부" sub="주소창 옆 그 파란색의 정체">
        <p>
          모니터를 돋보기로 확대하면 픽셀 하나하나가 <strong>빨강·초록·파랑 꼬마전구 3개</strong>로
          돼 있어요. 물감과 반대로, 빛은 셋을 다 켜면 하양이 됩니다. 각 전구의 밝기를
          0~255로 정하면 — 어라, 0~255? 섹션 3에서 본 <strong>딱 1바이트</strong>네요!
          색 하나 = 3바이트라는 뜻입니다.
        </p>
        <Code>{CODE_COLOR}</Code>
        <p>
          <span className="icode">#2159C5</span> 같은 색 코드는 결국
          <strong> "빨강 33, 초록 89, 파랑 197만큼 켜라"</strong>는 전구 주문서예요.
          16진수는 새 숫자 체계가 아니라, 길어서 읽기 힘든 2진수를 4자리씩 접어 쓴
          속기법일 뿐이고요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span> 개발자 도구 →
          <span className="kbd">Elements</span> 탭에서 이 페이지의 아무 요소나 클릭하고,
          Styles 영역의 색상 네모를 눌러 보세요. 컬러 피커가 뜨면서
          <span className="icode">#RRGGBB</span>와 <span className="icode">rgb(r, g, b)</span> 값이
          같이 보여요. 슬라이더로 R만 쭉 올려 보세요 — 16진수 앞 두 글자만 변합니다!
        </div>
      </Section>

      <Section n={6} title="이미지와 소리가 숫자인 원리" sub="사진 = 색 숫자의 격자, 소리 = 파형 받아쓰기">
        <p>
          섹션 5에서 "색 하나 = 숫자 3개"를 배웠으니 이미지는 이제 쉬워요.
          사진은 그 색 숫자를 <strong>모눈종이처럼 가로세로로 빽빽하게 채운 격자</strong>일
          뿐입니다. 픽셀 아트를 아주아주 곱게 만든 게 사진인 셈이죠.
        </p>
        <Code>{CODE_MEDIA}</Code>
        <p>
          소리는 눈에 안 보여서 신기하게 느껴지지만, 원리는 <strong>속기사</strong>와 같아요.
          마이크로 들어온 공기의 떨림(파형)의 높이를 1초에 수만 번 재서 숫자로 받아 적는
          것 — 이게 <strong>샘플링</strong>입니다. 재생은 그 숫자대로 스피커를 다시 떨게
          하는 것이고요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아무 사진이나 그림판(또는 이미지 뷰어)에서 열고
          <strong>확대를 끝까지</strong> 해 보세요. 매끈하던 사진이 네모난 색 칸(픽셀)들로
          깨져 보이기 시작합니다 — 그 네모 하나하나가 섹션 5의 3바이트짜리 숫자예요.
          사진 파일 속성에서 "사진 크기: 4032×3024"를 확인하고, 두 수를 곱해
          픽셀이 몇 개인지도 계산해 보세요. (천만 개가 넘어요!)
        </div>
      </Section>

      <Section n={7} title="계산기(프로그래머 모드) 실습" sub="지금까지 손으로 푼 걸 전부 기계로 검산">
        <p>
          Windows 계산기에는 개발자를 위한 <strong>프로그래머 모드</strong>가 숨어 있어요.
          10진수(DEC)·2진수(BIN)·16진수(HEX)를 <strong>동시에 보여주는 진법 변환기</strong>라서,
          이 코스에서 손으로 푼 모든 계산을 1초 만에 검산할 수 있습니다.
        </p>
        <Code>{CODE_CALC}</Code>
        <p>
          미션 D가 특히 재미있어요. BIN 표시줄의 0/1을 직접 클릭해 뒤집을 수 있는데,
          어떤 자리를 켜면 DEC가 정확히 그 자리값(1, 2, 4, 8...)만큼 늘어나는 게
          실시간으로 보입니다. 섹션 2에서 배운 자리값이 눈앞에서 움직이는 순간이에요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 섹션 2에서 종이로 변환했던 <strong>내 생일의 '일'</strong>을
          DEC에 넣고, BIN 결과가 내 답과 같은지 확인하세요. 그다음 보너스 —
          자기 <strong>태어난 연도</strong>(예: 2008)를 넣고 BIN이 몇 자리나 나오는지 세어 보세요.
          11자리! 2008이 2¹⁰(1,024)보다 크고 2¹¹(2,048)보다 작기 때문입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>💡 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 스위치의 켜짐/꺼짐이 어떻게 숫자가 되고, 그 숫자가 글자·색·사진·소리로
            <strong> 해석</strong>되는지 전부 알게 됐어요. 컴퓨터의 세계에서 데이터의 정체는 하나 —
            0과 1의 행렬이고, 다른 건 '읽는 규칙'뿐입니다. 다음은 이 데이터가 어떻게
            <strong> 이동</strong>하는지 배울 차례 — {' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서 방금 배운
            비트들이 랜선과 해저 케이블을 달리는 여행을 따라가 보세요. 배운 내용은
            멘토와의 주간 리뷰에서 "생일 2진수 변환"을 말로 설명하는 것으로 확인합니다.
          </p>
        </div>
      </div>
    </div>
  );
}
