// 이 파일이 하는 일: "네트워크 속도와 대역폭" 코스 — "우리 집 인터넷 500메가인데
// 왜 다운로드는 60짜리로 나와요?"라는 질문에서 출발해, 대역폭·속도·지연시간을
// 구분하고 병목을 찾아 직접 측정까지 해보는 정적 학습 페이지. (8개 섹션)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_ROAD = `대역폭 = 도로의 "폭"(차선 수), 속도 = 차 한 대의 빠르기

1차선 도로              4차선 도로
──────────         ════════════════
🚗                  🚗 🚗 🚗 🚗
초당 1대 지나감        초당 4대 지나감

→ 차(데이터)의 최고 속도는 둘 다 비슷해요.
  차이는 "동시에 몇 대가 지나갈 수 있느냐" = 대역폭!

인터넷에서 말하는 "속도 500Mbps"는 사실
차의 속도가 아니라 도로의 폭(초당 옮길 수 있는 양)입니다.`;

const CODE_MBPS = `Mbps와 MB/s — 대문자 B 하나가 8배를 가릅니다

Mbps = Mega bit  per second  (비트: 0 아니면 1, 가장 작은 알갱이)
MB/s = Mega Byte per second  (바이트 = 비트 8개 묶음)

1 Byte = 8 bit  이므로:

  100 Mbps ÷ 8 = 12.5 MB/s
  500 Mbps ÷ 8 = 62.5 MB/s
 1000 Mbps ÷ 8 =  125 MB/s  (기가 인터넷)

통신사 광고는 큰 숫자가 예쁜 Mbps로,
브라우저 다운로드 창은 MB/s로 표시해요.
"500메가 쓰는데 다운로드는 60밖에 안 나와!" → 사실 정상입니다.`;

const CODE_DOWNLOAD_TIME = `4GB(=4,096MB) 게임 하나 받는 데 걸리는 시간 (이론상 최대치)

회선          MB/s 환산     걸리는 시간
─────────────────────────────────────
100 Mbps      12.5 MB/s     약 5분 28초
500 Mbps      62.5 MB/s     약 1분 6초
  1 Gbps       125 MB/s     약 33초

계산법: 파일 크기(MB) ÷ (Mbps ÷ 8) = 초
실제로는 서버 사정·와이파이 손실 때문에 이보다 느려요. (섹션 5 참고)`;

const CODE_PING = `지연시간(ping) = 왕복 "반응 속도", 대역폭 = 한 번에 옮기는 "양"

수도관 비유:
  대역폭  = 파이프의 굵기 (초당 몇 리터?)
  지연시간 = 수도꼭지를 튼 순간 ~ 물이 나오기까지의 시간

굵은 파이프여도 물이 100m 밖에서 오면 첫 물은 늦게 나와요.
→ 기가 인터넷이어도 해외 서버면 ping은 높을 수 있습니다!

무엇이 중요할까?
  온라인 게임      → ping!  (작은 데이터를 빠르게 주고받음)
  영상 스트리밍    → 대역폭 (큰 데이터를 계속 흘려받음)
  파일 다운로드    → 대역폭
  화상회의        → 둘 다 (특히 ping이 높으면 대화가 어긋남)

ping 감각 기준: ~30ms 쾌적 / 50~100ms 게임에서 체감 / 200ms+ 답답`;

const CODE_PING_CMD = `# 터미널(cmd/PowerShell)에서 — 서버까지 왕복 시간 재기:
ping google.com

Ping google.com [142.250.x.x] 32바이트 데이터 사용:
142.250.x.x의 응답: 바이트=32 시간=34ms TTL=115
...
평균 = 34ms   ← 이게 지연시간!

# 국내 서버와 비교해 보세요:
ping naver.com          # 보통 5~20ms
ping edu.awesomedevapp.com   # 우리 플랫폼 서버는 몇 ms?

# 물리적 거리가 멀수록 ms가 커지는 걸 관찰해 보세요.
# 빛도 태평양을 건너는 데 시간이 걸립니다!`;

const CODE_BOTTLENECK = `병목(bottleneck) — 전체 속도는 "가장 좁은 구간"이 정합니다

[내 PC] ─①─ [공유기] ─②─ [통신사 회선] ─③─ [상대 서버]

① PC ↔ 공유기 구간
   - 와이파이: 벽·거리·전자레인지 간섭으로 뚝뚝 떨어짐 (최대 병목 단골!)
   - 오래된 랜선: Cat5(무印)는 100Mbps가 한계 — 기가 회선이 무용지물
   - 공유기 자체가 구형이면 여기서 막힘

② 통신사 회선
   - 계약한 상품이 실제 상한 (500메가 상품이면 여기가 500)

③ 상대 서버
   - 서버가 붐비면 내 회선이 기가여도 느리게 내려줌
   - 해외 서버는 국제 구간에서 느려지기도

→ 기가 인터넷 + 구형 공유기 + 벽 너머 와이파이
  = 8차선 고속도로를 달려와서 골목길로 들어가는 셈이에요.`;

const CODE_SPEEDTEST = `속도 측정, 이렇게 해야 "진짜" 숫자가 나와요

측정 사이트: fast.com(넷플릭스), speedtest.net(Ookla),
             benchbee.co.kr(국내 서버 기준)

체크리스트:
1) 다운로드·업로드·핑 세 가지를 모두 기록 (숫자 하나가 아님!)
2) 측정 서버 위치 확인 — 해외 서버로 재면 낮게 나오는 게 정상
3) 측정 중 유튜브·게임·다른 기기 다운로드 끄기 (도로를 나눠 쓰는 중이면
   내 차선만 잰 게 아니게 됨)
4) 시간대 바꿔서 2~3번 측정 — 저녁 8~11시는 다들 쓰는 혼잡 시간
5) 유선과 무선을 따로 측정 (섹션 8 실습!)

읽는 법:
  다운로드 480Mbps / 업로드 490Mbps / 핑 8ms  ← 500메가 상품이면 정상
  다운로드  90Mbps / 핑 5ms                   ← 회선은 멀쩡, ①구간 의심!`;

const CODE_LAB = `실습: 유선 vs 무선 속도 비교 측정

준비물: 노트북(또는 PC), 랜선 1개, 측정 사이트

┌ 순서 ─────────────────────────────────────┐
1) 무선(와이파이) 상태로 speedtest.net 측정
   → 다운로드 / 업로드 / 핑 3개를 표에 기록
2) 같은 자리에서 한 번 더 (와이파이는 편차가 커요)
3) 랜선을 공유기에 직접 연결, 와이파이 끄기
4) 같은 사이트에서 다시 2회 측정 → 기록
5) (도전) 공유기에서 먼 방으로 이동해 무선 재측정
└──────────────────────────────────────────┘

기록표 예시:
구분        다운로드    업로드     핑
무선 1회    233 Mbps   180 Mbps   12ms
무선 2회    198 Mbps   171 Mbps   15ms
유선 1회    492 Mbps   488 Mbps    5ms
유선 2회    489 Mbps   490 Mbps    5ms
먼 방 무선   87 Mbps    60 Mbps   23ms

관찰 포인트:
- 유선이 얼마나 더 빠르고 "일정"한가? (편차도 성능이에요)
- 거리가 멀어지면 무선은 얼마나 떨어지나?
- 핑도 유선이 낮은 이유를 섹션 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: '대역폭 = 도로 폭' },
  { n: 2, label: 'Mbps vs MB/s' },
  { n: 3, label: '다운로드 시간 계산' },
  { n: 4, label: '지연시간(ping)' },
  { n: 5, label: '100메가 vs 기가' },
  { n: 6, label: '병목 찾기' },
  { n: 7, label: '속도 측정 제대로' },
  { n: 8, label: '실습: 유선 vs 무선' },
];

export default function BandwidthPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 풀어 줄 오해가 무엇인지 */}
      <div className="hero">
        <div className="eyebrow">Course · 네트워크</div>
        <h1>네트워크 속도와 대역폭<br />— 500메가 인터넷인데 왜 60밖에 안 나올까?</h1>
        <p>
          "인터넷 속도"라는 한 단어 안에는 사실 <strong>대역폭·지연시간·병목</strong>이라는
          서로 다른 개념이 섞여 있어요. 이 코스에서 그 셋을 갈라서 이해하고, 마지막엔
          <strong> 내 손으로 직접 측정</strong>해서 우리 집 인터넷의 진짜 실력을 확인합니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">측정 실습 2개</span>
          <span className="chip">준비물: PC + 랜선 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>, 즉
          <strong> 동시에 얼마나 많은 데이터를 흘려보낼 수 있느냐</strong>예요.
          이게 바로 <strong>대역폭</strong>(bandwidth)입니다.
        </p>
        <Code>{CODE_ROAD}</Code>
        <p>
          그래서 "기가 인터넷"은 "차가 기가급으로 빠른 인터넷"이 아니라
          <strong> "1초에 1기가비트를 옮길 수 있는 넓은 도로"</strong>라는 뜻이에요.
          이 구분이 이 코스 전체의 뼈대입니다 — 섹션 4에서 "차가 출발해서 도착하기까지의
          시간"(지연시간)과 확실히 갈라 볼 거예요.
        </p>
        <svg className="diagram" viewBox="0 0 640 280" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="1차선 도로와 4차선 도로 비교로 보는 대역폭 개념 도해">
          <text x="160" y="34" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">1차선 도로 (예: 100Mbps)</text>
          <text x="480" y="34" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">4차선 도로 (예: 1Gbps)</text>
          <rect x="40" y="99" width="240" height="34" rx="8" fill="var(--card)" stroke="var(--line)" />
          <rect x="120" y="106" width="44" height="20" rx="6" fill="var(--primary)" />
          <line x1="190" y1="116" x2="248" y2="116" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="242,110 250,116 242,122" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <rect x="360" y="56" width="240" height="120" rx="8" fill="var(--card)" stroke="var(--line)" />
          <line x1="368" y1="86" x2="592" y2="86" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="8 6" />
          <line x1="368" y1="116" x2="592" y2="116" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="8 6" />
          <line x1="368" y1="146" x2="592" y2="146" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="8 6" />
          <rect x="420" y="61" width="44" height="20" rx="6" fill="var(--teal)" />
          <rect x="470" y="91" width="44" height="20" rx="6" fill="var(--teal)" />
          <rect x="400" y="121" width="44" height="20" rx="6" fill="var(--teal)" />
          <rect x="450" y="151" width="44" height="20" rx="6" fill="var(--teal)" />
          <line x1="530" y1="71" x2="586" y2="71" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="580,65 588,71 580,77" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <text x="160" y="200" textAnchor="middle" fontSize="13" fill="var(--muted)">초당 1대 지나감</text>
          <text x="480" y="200" textAnchor="middle" fontSize="13" fill="var(--muted)">초당 4대 지나감</text>
          <text x="320" y="238" textAnchor="middle" fontSize="13.5" fontWeight="600" fill="var(--ink)">차(데이터)의 빠르기는 비슷 — 동시에 몇 대가 지나가느냐가 대역폭</text>
          <text x="320" y="260" textAnchor="middle" fontSize="12.5" fill="var(--muted)">'인터넷 속도 500Mbps'는 차의 속도가 아니라 도로의 폭(초당 옮기는 양)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 대역폭은 차의 속도가 아니라 도로의 폭 — 동시에 옮길 수 있는 양</p>
        <div className="tip">
          <b>용어 정리</b> 일상에서 "인터넷 속도"라고 부르는 것 = 대부분 <strong>대역폭</strong>.
          이 코스에서도 편의상 섞어 쓰지만, 머릿속에서는 항상 "도로 폭"으로 번역하세요.
        </div>
      </Section>

      <Section n={2} title="Mbps와 MB/s — 8배의 비밀" sub="다운로드가 생각보다 느린 진짜 이유">
        <p>
          여기가 이 코스 최대의 <strong>"아하!" 포인트</strong>예요. 통신사가 말하는
          <span className="icode"> 500Mbps</span>의 <strong>b</strong>는 <strong>bit</strong>(비트),
          다운로드 창에 뜨는 <span className="icode">MB/s</span>의 <strong>B</strong>는
          <strong> Byte</strong>(바이트)입니다. 바이트 하나는 비트 8개 묶음이라,
          <strong> 같은 회선인데 숫자는 8분의 1</strong>로 보여요.
        </p>
        <Code>{CODE_MBPS}</Code>
        <p>
          비유하면 통신사는 "1초에 계란 <strong>낱개</strong> 500개!"라고 광고하고,
          브라우저는 "1초에 계란 <strong>한 판(8개들이)</strong> 62.5판"이라고 표시하는 거예요.
          같은 양인데 단위가 달라서 작아 보이는 것뿐입니다.
        </p>
        <div className="warn">
          <b>속지 마세요</b> 소문자 b와 대문자 B는 <strong>정확히 8배</strong> 차이입니다.
          "500메가 계약했는데 60밖에 안 나온다"는 민원의 대부분은 고장이 아니라
          <strong> 단위 착시</strong>예요. 나누기 8부터 해보고 이야기를 시작하세요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 브라우저에서 큰 파일(예: 리눅스 ISO나 게임 클라이언트)을
          내려받으며 다운로드 창의 <span className="icode">MB/s</span> 숫자에 <strong>×8</strong>을
          해 보세요. 우리 집 계약 상품(Mbps)과 얼마나 가까운가요? 다운로드는
          <span className="kbd">Ctrl</span>+<span className="kbd">J</span>로 볼 수 있어요.
          (확인만 했으면 다 받을 필요 없이 취소해도 됩니다.)
        </div>
      </Section>

      <Section n={3} title="다운로드 시간, 직접 계산해 보기" sub="파일 크기 ÷ (Mbps ÷ 8) = 초">
        <p>
          단위 변환을 배웠으니 바로 써먹어 봅시다. 4GB짜리 게임을 받는 데 얼마나 걸릴까요?
          공식은 간단해요 — <strong>파일 크기(MB)를 MB/s로 나누면 초</strong>가 나옵니다.
        </p>
        <Code>{CODE_DOWNLOAD_TIME}</Code>
        <p>
          이 표는 <strong>이론상 최대치</strong>예요. 실제로는 상대 서버가 그만큼 빨리
          안 내려주거나(섹션 6), 와이파이에서 새거나 해서 더 걸립니다. 그래도 이 계산을
          할 줄 알면 "지금 다운로드가 <strong>정상 범위</strong>인지 이상하게 느린 건지"를
          감이 아니라 숫자로 판단할 수 있어요 — 개발자다운 습관이죠.
        </p>
        <div className="tip">
          <b>암산 요령</b> Mbps를 8로 나누기 어려우면 <strong>10으로 나눠서 조금 후하게</strong>
          잡으세요. 500Mbps ≈ 50MB/s쯤. 어림값으로도 "이상 감지"에는 충분합니다.
        </div>
      </Section>

      <Section n={4} title="지연시간(ping) — 대역폭과는 다른 축" sub="게임은 ping, 다운로드는 대역폭">
        <p>
          도로가 아무리 넓어도(대역폭), 목적지가 멀면 첫 차가 <strong>도착하기까지의
          시간</strong>은 오래 걸려요. 이 왕복 시간이 <strong>지연시간</strong>(latency)이고,
          그걸 재는 도구 이름을 따서 흔히 <strong>ping</strong>(핑)이라고 부릅니다.
          단위는 <strong>ms</strong>(밀리초, 1000분의 1초).
        </p>
        <Code>{CODE_PING}</Code>
        <p>
          그래서 <strong>"기가 인터넷인데 게임이 랙 걸려요"</strong>가 성립해요. 게임은
          "내 캐릭터 움직였어!" 같은 <strong>작은 메시지를 아주 자주</strong> 주고받는데,
          이건 도로 폭이 아니라 <strong>왕복 시간</strong> 싸움이거든요. 반대로 영화
          다운로드는 핑이 200ms여도 일단 흐르기 시작하면 대역폭만큼 콸콸 받습니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="수도관 비유로 보는 대역폭과 지연시간의 차이 도해">
          <text x="320" y="30" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">파이프 굵기 = 대역폭 (한 번에 흐르는 양)</text>
          <text x="200" y="66" textAnchor="middle" fontSize="12" fill="var(--muted)">물(데이터)이 흘러가는 중</text>
          <line x1="200" y1="72" x2="212" y2="100" stroke="var(--muted)" strokeWidth="1.5" />
          <rect x="30" y="90" width="90" height="60" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="75" y="115" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">서버</text>
          <text x="75" y="133" textAnchor="middle" fontSize="12" fill="var(--muted)">(수원지)</text>
          <rect x="520" y="90" width="90" height="60" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="565" y="115" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">내 PC</text>
          <text x="565" y="133" textAnchor="middle" fontSize="12" fill="var(--muted)">(수도꼭지)</text>
          <rect x="120" y="100" width="400" height="40" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="122" y="106" width="182" height="28" rx="4" fill="var(--teal)" />
          <path d="M304 106 L318 120 L304 134 Z" fill="var(--teal)" />
          <line x1="478" y1="103" x2="478" y2="137" stroke="var(--teal)" strokeWidth="2" />
          <polyline points="472,109 478,102 484,109" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="472,131 478,138 484,131" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <line x1="132" y1="172" x2="508" y2="172" stroke="var(--amber)" strokeWidth="2" />
          <polyline points="140,166 130,172 140,178" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="500,166 510,172 500,178" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <text x="320" y="198" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">꼭지를 튼 순간부터 첫 물이 나올 때까지 = 지연시간(ping)</text>
          <text x="320" y="218" textAnchor="middle" fontSize="12" fill="var(--muted)">파이프가 굵어도 거리가 멀면 첫 물은 늦어요 — 기가 회선 + 해외 서버 = 높은 ping</text>
          <rect x="70" y="238" width="235" height="46" rx="8" fill="var(--card)" stroke="var(--amber)" />
          <text x="187" y="257" textAnchor="middle" fontSize="12.5" fontWeight="600" fill="var(--ink)">온라인 게임 · 화상회의</text>
          <text x="187" y="275" textAnchor="middle" fontSize="12" fill="var(--muted)">지연시간(ping)이 체감을 좌우</text>
          <rect x="335" y="238" width="235" height="46" rx="8" fill="var(--card)" stroke="var(--teal)" />
          <text x="452" y="257" textAnchor="middle" fontSize="12.5" fontWeight="600" fill="var(--ink)">스트리밍 · 파일 다운로드</text>
          <text x="452" y="275" textAnchor="middle" fontSize="12" fill="var(--muted)">대역폭이 체감을 좌우</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 대역폭(파이프 굵기)과 지연시간(첫 물 도착까지의 시간)은 서로 다른 축</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널에서 국내 서버와 해외 서버의 핑을 재서 비교해 보세요.
          숫자 차이가 곧 <strong>물리적 거리</strong>입니다.
        </div>
        <Code>{CODE_PING_CMD}</Code>
      </Section>

      <Section n={5} title="100메가 vs 기가 — 체감은 언제 갈릴까" sub="10배 비싸도 10배 빠르게 '느껴지지는' 않는 이유">
        <p>
          기가 인터넷은 100Mbps의 10배지만, <strong>웹서핑·유튜브에서는 체감이 거의 없어요.</strong>
          유튜브 풀HD는 5~8Mbps, 4K도 20~25Mbps면 충분해서 100메가 도로도 텅텅 남거든요.
          카톡·검색·우리 학습 플랫폼 이용도 마찬가지 — 도로 폭보다 <strong>핑과 서버 응답</strong>이
          체감을 좌우합니다.
        </p>
        <p>
          차이가 확 벌어지는 순간은 <strong>큰 데이터를 한꺼번에</strong> 옮길 때예요.
          섹션 3의 표를 다시 보세요 — 4GB 게임이 <strong>5분 반 → 33초</strong>.
          수십 GB짜리 게임 업데이트, 4K 영상 원본 업로드, 그리고 개발자에겐
          <span className="icode"> docker pull</span>로 수 GB 이미지를 받을 때가 그렇죠.
          또 하나, <strong>가족 여럿이 동시에</strong> 쓸 때 — 4차선(100M)은 두 명만 4K를 봐도
          붐비지만, 40차선(1G)은 여유롭습니다.
        </p>
        <div className="tip">
          <b>정리</b> "혼자서 웹서핑·영상 시청 위주"면 100메가도 충분,
          "대용량 다운로드가 잦거나 여러 명이 동시에" 쓰면 기가가 값을 해요.
          속도 상품 선택도 결국 <strong>내 사용 패턴 분석</strong> 문제입니다.
        </div>
      </Section>

      <Section n={6} title="병목은 어디서 생길까" sub="전체 속도는 가장 좁은 구간이 정한다">
        <p>
          8차선 고속도로를 신나게 달려도 마지막에 <strong>1차선 골목</strong>을 지나야 한다면,
          전체 여행 속도는 골목이 정해요. 네트워크도 똑같습니다 — 내 PC에서 서버까지의 길에서
          <strong> 가장 좁은 구간</strong>이 내 체감 속도가 됩니다. 이 좁은 구간을
          <strong> 병목</strong>(bottleneck, 병의 좁아지는 목 부분)이라고 해요.
        </p>
        <Code>{CODE_BOTTLENECK}</Code>
        <p>
          가정에서 1순위 용의자는 거의 항상 <strong>와이파이</strong>예요. 전파는 벽을 지날 때마다
          약해지고, 옆집 공유기·전자레인지와 채널을 나눠 씁니다. 2순위는 <strong>오래된 케이블과
          구형 공유기</strong> — 지난 코스에서 배운 랜선 카테고리(Cat5e부터 기가 지원!)가 여기서
          다시 등장하죠. 그리고 내 쪽이 다 멀쩡해도 <strong>상대 서버</strong>가 붐비면 느립니다.
          우리 회사 서버도 AWS EC2 인스턴스 사양과 회선에 따라 내려줄 수 있는 양에 한계가 있어요 —
          서버 쪽 대역폭도 누군가 설계한 자원이라는 것, 백엔드를 배울 때 다시 만나게 됩니다.
        </p>
        <div className="warn">
          <b>흔한 착각</b> "인터넷이 느려요 → 통신사에 전화"부터 하기 쉽지만, 병목이
          집 안(와이파이·케이블·공유기)에 있으면 통신사는 해줄 게 없어요.
          <strong> 어느 구간이 좁은지 먼저 측정으로 갈라내는 것</strong> — 그게 다음 두 섹션입니다.
        </div>
      </Section>

      <Section n={7} title="속도 측정 사이트, 제대로 쓰기" sub="숫자 하나 찍고 끝이 아니에요">
        <p>
          측정 사이트는 <strong>내 PC와 측정 서버 사이</strong>에 데이터를 왕창 흘려보내서 도로
          폭을 재는 도구예요. 그런데 조건을 안 갖추고 재면 <strong>병목 낀 숫자</strong>가 나와서
          엉뚱한 결론을 내리게 됩니다. 측정도 실험이에요 — 조건 통제가 생명!
        </p>
        <Code>{CODE_SPEEDTEST}</Code>
        <p>
          특히 마지막 줄을 보세요. <strong>다운로드는 낮은데 핑은 좋은</strong> 패턴이 나오면
          회선(②)이 아니라 집 안 구간(①)이 병목일 가능성이 커요. 이렇게 다운로드·업로드·핑
          <strong> 세 숫자를 조합해서 범인을 추리</strong>하는 게 측정의 진짜 목적입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 바로 <span className="icode">fast.com</span>에 들어가
          측정하고, 이어서 <span className="icode">speedtest.net</span>에서도 재 보세요.
          두 사이트 숫자가 다르죠? 측정 서버 위치와 방식이 달라서예요 —
          그래서 속도는 <strong>한 번의 숫자가 아니라 여러 번의 경향</strong>으로 읽습니다.
        </div>
      </Section>

      <Section n={8} title="실습 — 유선 vs 무선 비교 측정" sub="이 코스의 졸업 과제">
        <p>
          배운 걸 전부 동원하는 실습입니다. 같은 회선을 <strong>랜선(유선)과 와이파이(무선)</strong>로
          번갈아 재서, 우리 집(또는 실습실)의 병목이 어디인지 데이터로 밝혀내 보세요.
        </p>
        <Code>{CODE_LAB}</Code>
        <p>
          측정이 끝나면 결과표를 가지고 <strong>세 문장으로 결론</strong>을 써 보세요.
          "우리 집 회선의 실제 대역폭은 약 ___Mbps다. 무선은 유선 대비 약 ___%가 나왔고,
          병목은 ___ 구간으로 추정된다." — 숫자로 말하는 연습, 이게 엔지니어의 보고서예요.
        </p>
        <div className="tip">
          <b>더 해보기</b> 측정한 유선 대역폭으로 섹션 3의 공식을 써서 "4GB 파일 다운로드
          예상 시간"을 계산한 뒤, 실제로 큰 파일을 받아 예측과 비교해 보세요.
          예측 → 측정 → 오차 분석, 실험의 3단계를 그대로 해보는 겁니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🚗 여기까지 왔다면</h3>
          <p className="muted">
            이제 "인터넷이 느려요"를 <strong>대역폭 문제인지, 지연시간 문제인지, 병목이
            어느 구간인지</strong>로 쪼개서 말할 수 있게 됐어요. 8로 나누는 습관과 측정
            체크리스트는 평생 갑니다. 데이터가 달리는 길 자체가 궁금해졌다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            랜선부터 해저 케이블까지 이어서 배우고, 측정 결과표는 멘토에게 공유해
            함께 병목 추리를 해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
