// 이 파일이 하는 일: "IP 주소 깊이 보기" 코스 — IPv4 주소의 생김새와 고갈 문제에서 출발해
// 사설 대역, 서브넷마스크, 게이트웨이, DHCP, IPv6, 그리고 우리 EC2의 탄력적 IP까지
// 8개 섹션으로 파고드는 정적 학습 페이지.
// (IPv4 구조 → 사설 대역 → 서브넷마스크 → 게이트웨이 → DHCP → IPv6 → ipconfig /all 해부 → 고정 vs 유동)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_IPV4_STRUCT = `IPv4 주소 = 32비트를 8비트씩 4칸으로 끊어 읽은 것

  192  .  168  .   0   .   5      ← 사람이 읽는 표기 (점으로 구분)
┌────────┬────────┬────────┬────────┐
│11000000│10101000│00000000│00000101│  ← 컴퓨터가 보는 실제 모습
└────────┴────────┴────────┴────────┘
  8비트     8비트     8비트     8비트   = 총 32비트

한 칸(옥텟)은 8비트 → 0~255 (2^8 = 256가지)
전체 조합 = 2^32 ≈ 약 43억 개

43억이면 많아 보이지만... 지구 인구가 이미 80억이 넘고,
1인당 폰·노트북·태블릿·IoT 기기까지 생각하면 턱없이 부족해요.
→ 이게 바로 "IPv4 고갈 문제"입니다. (해결책은 섹션 2와 6에서!)`;

const CODE_PRIVATE_RANGES = `사설 IP 3대 대역 — 전 세계 누구나 '집 안에서만' 마음껏 쓰는 주소

대역                              크기          암기법
──────────────────────────────────────────────────────────
10.0.0.0    ~ 10.255.255.255     약 1,678만 개   "10 하나만 외우면 끝"
172.16.0.0  ~ 172.31.255.255     약 104만 개     "172의 16~31층만"
192.168.0.0 ~ 192.168.255.255    약 6.5만 개     "집 공유기의 국민 주소"

암기 요령:
· 10.x.x.x        → 제일 크다. 큰 회사·클라우드가 즐겨 씀 (우리 AWS VPC도!)
· 172.16~31.x.x   → 어중간해서 제일 헷갈림. "16부터 31까지 딱 16개 층"
· 192.168.x.x     → 집·학교 공유기 단골. ipconfig 치면 십중팔구 이 녀석

이 주소들은 인터넷(바깥세상)에서는 라우터가 아예 안 받아 줍니다.
그래서 옆집도 우리 집도 똑같이 192.168.0.5를 써도 충돌이 없어요 —
아파트마다 302호가 있어도 괜찮은 것과 같죠. 덕분에 43억 개뿐인
IPv4를 전 세계가 '재활용'하며 버티고 있는 겁니다. (NAT의 마법)`;

const CODE_SUBNET = `서브넷마스크 = "주소에서 어디까지가 단지 이름이고, 어디부터가 호수인가"

주소:      192.168.0.5
마스크:    255.255.255.0   ←  /24 라고도 써요 (앞에서부터 1이 24개)

              ┌─ 네트워크 부분 (아파트 단지 이름) ─┐┌ 호스트 부분 ┐
주소(2진수):   11000000.10101000.00000000        . 00000101
마스크:        11111111.11111111.11111111        . 00000000
               └────────── 1이 24개 = /24 ──────┘└─ 남은 8비트 ┘

해석: "192.168.0 까지가 우리 단지 이름, 마지막 칸이 각 세대 호수"
→ 호수로 쓸 수 있는 번호: 2^8 = 256개
   그중 .0(단지 자체를 가리키는 이름)과 .255(단지 전체 방송용)를 빼면
   실제 입주 가능한 세대 = 254개

같은 단지(같은 네트워크) 주민끼리는 경비실(게이트웨이)을 안 거치고
바로 대화할 수 있고, 단지가 다르면 반드시 경비실을 거쳐야 해요.
서브넷마스크는 그 '단지 경계선'을 긋는 자입니다.`;

const CODE_GATEWAY = `게이트웨이 = 우리 단지의 유일한 정문(경비실)

[내 PC 192.168.0.5]                       목적지: 8.8.8.8 (다른 단지!)
        │
        │ "이 주소, 우리 단지(192.168.0.x)가 아니네?
        │  → 그럼 무조건 정문으로 보내자"
        ▼
[게이트웨이 192.168.0.1]  ← 공유기. 보통 단지의 1호를 차지해요
        │
        ▼
     바깥 인터넷으로...

PC의 판단 로직 (매 패킷마다!):
1) 목적지 IP를 서브넷마스크로 잘라 본다
2) 우리 단지 주소와 같으면 → 직접 전달 (경비실 안 거침)
3) 다르면 → 게이트웨이(정문)로 던진다. "나머진 알아서 부탁해!"

게이트웨이 주소를 잘못 설정하면? 단지 안 친구와는 대화가 되는데
인터넷만 안 되는, 그 유명한 "내부망은 되는데 외부가 안 돼요" 상태가 됩니다.`;

const CODE_DHCP = `DHCP 임대 4단계 — 새 기기가 IP를 '빌리는' 과정 (DORA로 외워요)

내 노트북                              공유기(DHCP 서버)
   │                                        │
   │── ① Discover ─────────────────────────▶│
   │   "여기 DHCP 서버 계세요? 저 IP 필요해요!"  (단지 전체에 방송)
   │                                        │
   │◀───────────────────────── ② Offer ──── │
   │   "저요! 192.168.0.7 어때요? 24시간 빌려드림"
   │                                        │
   │── ③ Request ──────────────────────────▶│
   │   "좋아요, 그 주소 저 주세요!"              │
   │                                        │
   │◀──────────────────── ④ Acknowledge ─── │
   │   "확정! 192.168.0.7 / 마스크 255.255.255.0
   │    게이트웨이 192.168.0.1 / DNS는 이거 쓰세요. 임대기간 24시간"

포인트: IP만 주는 게 아니라 마스크·게이트웨이·DNS까지
'네트워크 생활 풀세트'를 한 번에 배정해 줘요.
'임대(lease)'라는 말 그대로 기간이 있어서, 절반쯤 지나면
기기가 알아서 "연장할게요" 하고 갱신합니다. 전세 재계약처럼요.`;

const CODE_IPV6 = `IPv6 — 주소가 모자라면? 자릿수를 늘리면 되지!

IPv4:  32비트  → 약 43억 개 (4.3 × 10^9)
IPv6: 128비트  → 약 3.4 × 10^38 개
       (지구 모든 모래알에 주소를 붙여도 남는 수준)

생김새:  2001:0db8:85a3:0000:0000:8a2e:0370:7334
         └ 16진수 4자리 × 8덩어리, 콜론(:)으로 구분

줄여 쓰기 규칙:
· 각 덩어리 앞의 0 생략:  0db8 → db8
· 연속된 0000 덩어리는 :: 로 한 번만 축약
  2001:0db8:0000:0000:0000:0000:0000:0001
  → 2001:db8::1   (훨씬 낫죠?)

이미 여러분 PC에도 IPv6 주소가 조용히 붙어 있어요 (다음 섹션에서 확인!).
다만 전 세계 장비가 다 바뀌는 데 시간이 걸려서, 지금은
IPv4(+NAT)와 IPv6가 나란히 달리는 과도기입니다.`;

const CODE_IPCONFIG_ALL = `# Windows 터미널(cmd/PowerShell)에서:
ipconfig /all

# 주요 줄 해부 — 이 코스에서 배운 게 전부 여기 있어요:

이더넷 어댑터 이더넷:  (또는 Wi-Fi)
   물리적 주소 . . . : A1-B2-C3-D4-E5-F6  ← MAC 주소. 랜카드의 '주민번호'
   DHCP 사용 . . . . : 예                 ← 섹션 5! IP를 빌려 쓰는 중
   IPv6 주소 . . . . : fe80::...          ← 섹션 6! 이미 갖고 있었죠?
   IPv4 주소 . . . . : 192.168.0.5        ← 섹션 2! 사설 대역
   서브넷 마스크 . . : 255.255.255.0      ← 섹션 3! /24, 우리 단지 경계
   기본 게이트웨이 . : 192.168.0.1        ← 섹션 4! 단지 정문
   DHCP 서버 . . . . : 192.168.0.1        ← IP를 빌려준 임대인 = 공유기
   임대 시작 날짜 . .: 2026-07-16 오전...  ← 섹션 5의 '임대' 그 자체!
   임대 만료 날짜 . .: 2026-07-17 오전...  ← 24시간짜리 계약이네요
   DNS 서버 . . . . .: ...                ← DHCP가 풀세트로 준 전화번호부

# 게이트웨이와 DHCP 서버 주소가 같죠? 집 공유기 한 대가
# 정문 경비(게이트웨이) + 임대인(DHCP)을 겸직하고 있기 때문입니다.`;

const CODE_ELASTIC_IP = `고정 IP vs 유동 IP — 그리고 우리 EC2의 '탄력적 IP'

유동(동적) IP: DHCP가 그때그때 빌려줌. 만료·재부팅 때 바뀔 수 있음
고정(정적) IP: 손으로 못 박아 둠. 절대 안 바뀜 — 서버에겐 필수!

왜 서버는 고정이어야 할까?
→ 도메인(edu.awesomedevapp.com)이 DNS에 "이 IP로 가"라고
  등록돼 있는데, 서버 IP가 바뀌면 전화번호부가 통째로 틀려져요.
  가게가 매주 이사 다니면 단골이 못 찾아오는 것과 같죠.

그런데 AWS EC2는 기본이 유동이에요:
  EC2 인스턴스를 중지(stop)했다 시작(start)하면 공인 IP가 바뀜!

그래서 쓰는 게 '탄력적 IP(Elastic IP)':
  [고정 공인 IP 하나를 내 계정 명의로 예약] ──연결──▶ [서울 EC2 인스턴스]
  · 인스턴스를 껐다 켜도 이 IP는 그대로
  · 서버를 새 인스턴스로 갈아타도, IP만 옮겨 붙이면 DNS는 손댈 필요 없음
  · 가게 건물을 옮겨도 '전화번호(대표 IP)'는 그대로 가져가는 셈

우리 플랫폼이 언제나 같은 주소로 열리는 건,
서울 EC2에 탄력적 IP가 못 박혀 있고 → DNS가 그 IP를 가리키고 →
Caddy가 443 포트에서 손님을 맞이하기 때문입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'IPv4 구조와 고갈' },
  { n: 2, label: '사설 대역 암기법' },
  { n: 3, label: '서브넷마스크' },
  { n: 4, label: '게이트웨이' },
  { n: 5, label: 'DHCP 임대' },
  { n: 6, label: 'IPv6 맛보기' },
  { n: 7, label: 'ipconfig /all 해부' },
  { n: 8, label: '고정 vs 유동 IP' },
];

export default function IpDeepPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 얼마나 깊이 파는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 네트워크</div>
        <h1>IP 주소 깊이 보기<br />— 숫자 네 칸에 숨은 세계</h1>
        <p>
          "네트워크의 이해"에서 스치듯 지나간 <span className="icode">192.168.0.5</span> 같은
          숫자를 이번엔 비트 단위까지 뜯어봅니다. 사설 대역 암기법부터 서브넷마스크,
          DHCP 임대, 그리고 우리 서울 EC2에 못 박힌 탄력적 IP까지 —
          숫자 네 칸을 읽을 줄 알면 네트워크 장애의 절반은 눈으로 진단할 수 있어요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 이상</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="IPv4의 구조와 고갈 문제" sub="점 세 개로 나뉜 32비트, 그리고 43억의 한계">
        <p>
          IP 주소는 사실 <strong>숫자 네 개가 아니라 비트 32개</strong>예요. 컴퓨터는
          0과 1로 된 32자리 숫자 하나로 보는데, 사람이 읽기 힘드니까 8비트씩 네 칸으로
          끊고 점을 찍어 표기하는 것뿐이죠. 한 칸이 8비트라서 각 칸은
          <strong> 0~255</strong>까지만 가능해요 — <span className="icode">192.168.0.300</span> 같은
          주소가 존재할 수 없는 이유입니다.
        </p>
        <Code>{CODE_IPV4_STRUCT}</Code>
        <p>
          1980년대에 설계할 땐 43억 개면 영원히 충분해 보였어요. 하지만 지금은 한 사람이
          폰·노트북·워치까지 기기를 여러 대 들고 다니는 시대 — 주소가 진작에 바닥났습니다.
          인류는 두 가지 답을 냈어요. 하나는 <strong>사설 IP + NAT로 주소를 재활용</strong>하기(섹션 2),
          다른 하나는 <strong>자릿수를 왕창 늘린 새 체계, IPv6</strong>(섹션 6)입니다.
        </p>
        <div className="tip">
          <b>비유로 기억하기</b> IPv4는 전 세계에 43억 장만 발행된 <strong>한정판 번호표</strong>예요.
          번호표가 모자라자 "건물 안에서는 자체 번호표(사설 IP)를 쓰고, 밖에 나갈 때만
          건물 대표 번호표(공인 IP)를 빌려 쓰자"는 아이디어가 나온 거죠.
        </div>
      </Section>

      <Section n={2} title="사설 대역 3형제 암기법" sub="10 · 172.16 · 192.168 — 시험에도 실무에도 평생 나오는 숫자">
        <p>
          국제 규약(RFC 1918)은 IPv4 주소 중 <strong>딱 세 구역</strong>을 떼어
          "이건 누구나 내부에서만 자유롭게 써라"고 정해 뒀어요. 이 세 대역은 면접에서도,
          서버 설정에서도, 장애 대응에서도 끝없이 마주치니 지금 확실히 외워 둡시다.
        </p>
        <Code>{CODE_PRIVATE_RANGES}</Code>
        <svg className="diagram" viewBox="0 0 640 330" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="사설망의 기기들이 공유기 NAT를 거쳐 공인 IP 하나로 인터넷에 나가는 구조도">
          <defs>
            <marker id="ipdeep-arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
              <path d="M0,0 L8,4 L0,8 Z" fill="var(--primary)" />
            </marker>
          </defs>
          <rect x="16" y="36" width="240" height="236" rx="10" fill="none" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="6 4" />
          <text x="136" y="58" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">사설망 (우리 집 공유기 안쪽)</text>
          <rect x="40" y="72" width="130" height="46" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="105" y="91" textAnchor="middle" fontSize="12" fill="var(--ink)">노트북</text>
          <text x="105" y="108" textAnchor="middle" fontSize="12" fill="var(--teal)">192.168.0.5</text>
          <rect x="40" y="132" width="130" height="46" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="105" y="151" textAnchor="middle" fontSize="12" fill="var(--ink)">폰</text>
          <text x="105" y="168" textAnchor="middle" fontSize="12" fill="var(--teal)">192.168.0.7</text>
          <rect x="40" y="192" width="130" height="46" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="105" y="211" textAnchor="middle" fontSize="12" fill="var(--ink)">데스크톱 PC</text>
          <text x="105" y="228" textAnchor="middle" fontSize="12" fill="var(--teal)">192.168.0.9</text>
          <line x1="170" y1="95" x2="298" y2="140" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="170" y1="155" x2="298" y2="154" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="170" y1="215" x2="298" y2="168" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="298" y="110" width="134" height="88" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="365" y="134" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">공유기 (NAT)</text>
          <text x="365" y="156" textAnchor="middle" fontSize="12" fill="var(--muted)">안쪽 192.168.0.1</text>
          <text x="365" y="176" textAnchor="middle" fontSize="12" fill="var(--primary)">바깥 203.0.113.10</text>
          <line x1="432" y1="154" x2="486" y2="154" stroke="var(--primary)" strokeWidth="2" markerEnd="url(#ipdeep-arrow)" />
          <rect x="492" y="112" width="132" height="84" rx="12" fill="var(--card)" stroke="var(--line)" />
          <text x="558" y="144" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">인터넷</text>
          <text x="558" y="168" textAnchor="middle" fontSize="12" fill="var(--muted)">예: 8.8.8.8</text>
          <text x="136" y="296" textAnchor="middle" fontSize="12" fill="var(--muted)">사설 IP — 집 안에서만 유효</text>
          <text x="136" y="313" textAnchor="middle" fontSize="12" fill="var(--muted)">(옆집과 같은 주소여도 충돌 없음)</text>
          <text x="460" y="296" textAnchor="middle" fontSize="12" fill="var(--muted)">밖에서는 온 집안 기기가</text>
          <text x="460" y="313" textAnchor="middle" fontSize="12" fill="var(--muted)">공인 IP 하나로 보임 (NAT 변환)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 사설망(192.168.0.x) 기기들이 공유기 NAT를 거쳐 공인 IP 하나로 인터넷에 나가는 구조</p>
        <p>
          실무 감각 하나: 터미널에서 본 IP가 <span className="icode">10.x</span>나
          <span className="icode">192.168.x</span>면 "아, 내부망 주소구나 — 바깥에서는 이 주소로
          못 들어오겠네"가 <strong>반사적으로</strong> 떠올라야 해요. 우리 회사 AWS도
          VPC 내부는 <span className="icode">10.x.x.x</span> 사설 대역을 쓰고, 바깥과의 접점에만
          공인 IP를 붙입니다(섹션 8에서 자세히!).
        </p>
        <div className="warn">
          <b>제일 많이 틀리는 함정</b> — 172 대역은 <span className="icode">172.16.x.x</span>부터
          <span className="icode">172.31.x.x</span>까지 <strong>만</strong> 사설이에요.
          <span className="icode">172.15.x.x</span>나 <span className="icode">172.32.x.x</span>는
          남의 공인 IP입니다. "172는 16층부터 31층까지만 우리 것"으로 기억하세요.
        </div>
      </Section>

      <Section n={3} title="서브넷마스크 — 아파트 단지의 경계선" sub="/24가 대체 무슨 뜻일까">
        <p>
          IP 주소 32비트는 사실 <strong>두 부분의 합체</strong>예요. 앞부분은
          <strong> 네트워크 주소</strong>(어느 아파트 단지인지), 뒷부분은
          <strong> 호스트 주소</strong>(그 단지의 몇 호인지). 그런데 어디까지가 단지 이름이고
          어디부터가 호수인지는 주소만 봐선 몰라요 — 그 <strong>경계선을 알려 주는 자</strong>가
          바로 서브넷마스크입니다.
        </p>
        <Code>{CODE_SUBNET}</Code>
        <p>
          <span className="icode">255.255.255.0</span>과 <span className="icode">/24</span>는
          같은 말이에요. 2진수로 펼치면 1이 앞에서부터 24개라서 "슬래시 24"라고 줄여 부르는
          것뿐이죠. <strong>/24 단지에는 254세대</strong>가 살 수 있고, 만약
          <span className="icode">/16</span>(255.255.0.0)이라면 호스트 비트가 16개라
          6만 세대가 넘는 초대형 단지가 됩니다. 회사 네트워크를 설계할 때 "이 팀 서브넷은
          /24면 충분한가?" 같은 결정이 전부 이 계산에서 나와요.
        </p>
        <div className="tip">
          <b>3초 판별법</b> 두 기기가 <strong>같은 단지</strong>인지 보려면: 서브넷마스크가
          255인 칸끼리 비교해서 전부 같으면 같은 네트워크! <span className="icode">192.168.0.5</span>와
          <span className="icode">192.168.0.200</span>은 (/24 기준) 같은 단지,
          <span className="icode">192.168.1.5</span>는 다른 단지예요.
        </div>
      </Section>

      <Section n={4} title="게이트웨이 — 단지의 정문" sub="'우리 단지가 아니면 무조건 정문으로'">
        <p>
          PC는 패킷을 보낼 때마다 딱 한 가지를 판단해요 — <strong>"목적지가 우리 단지인가?"</strong>
          같은 단지면 직접 건네고, 아니면 고민 없이 <strong>게이트웨이</strong>(대개 공유기)에게
          넘깁니다. 단지 밖 세상의 길은 정문 경비실이 다 알아서 하니까요.
        </p>
        <Code>{CODE_GATEWAY}</Code>
        <p>
          섹션 3의 서브넷마스크가 왜 중요한지 여기서 드러나요. <strong>마스크가 경계선을 긋고,
          게이트웨이가 그 경계 밖으로 나가는 유일한 문</strong>이 됩니다. 이 둘 중 하나만
          잘못 설정돼도 "같은 사무실 프린터는 되는데 인터넷이 안 돼요" 같은,
          겉보기에 이상한 장애가 생겨요 — 이제 여러분은 원인을 짚을 수 있습니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널에서 <span className="icode">ping 192.168.0.1</span>
          (내 게이트웨이 주소는 섹션 7 실습에서 확인)을 쳐 보세요. 응답이 오면 "정문까지는
          길이 뚫려 있다"는 뜻이에요. 인터넷이 안 될 때 <strong>정문까지는 되는지</strong>부터
          확인하는 게 네트워크 장애 진단의 1단계입니다.
        </div>
      </Section>

      <Section n={5} title="DHCP — IP를 '빌리는' 4단계" sub="Discover, Offer, Request, Acknowledge = DORA">
        <p>
          새 기기가 와이파이에 붙는 순간, 우리 눈에 안 보이는 <strong>4단계 임대 계약</strong>이
          순식간에 체결돼요. 부동산에 비유하면 ① 세입자가 "방 있나요?" 외치고 ② 임대인이
          "이 방 어때요?" 제안하고 ③ "계약할게요!" ④ "도장 쾅!" — 이 흐름을 첫 글자를 따서
          <strong> DORA</strong>라고 외웁니다.
        </p>
        <Code>{CODE_DHCP}</Code>
        <p>
          핵심은 DHCP가 <strong>IP 하나만 주는 게 아니라</strong>는 점이에요. 지금까지 배운
          서브넷마스크(섹션 3)·게이트웨이(섹션 4)·DNS 서버 주소까지 세트로 배정해 줍니다.
          우리가 카페 와이파이에 붙자마자 아무 설정 없이 인터넷이 되는 건, 이 계약이
          1초 안에 자동으로 끝나기 때문이에요.
        </p>
        <div className="warn">
          <b>'임대'라는 말에 담긴 뜻</b> — 기한이 지나면 주소를 반납해요. 그래서 유동 IP는
          어느 날 바뀌어 있을 수 있죠. 노트북에게는 아무 문제 없지만, <strong>서버가 이러면
          큰일</strong>납니다(섹션 8에서 이어짐).
        </div>
      </Section>

      <Section n={6} title="IPv6 맛보기" sub="주소가 모자라? 그럼 3.4 × 10^38개로 늘리자">
        <p>
          섹션 1의 고갈 문제에 대한 정공법이 <strong>IPv6</strong>예요. 32비트를 128비트로
          늘려서, 주소 개수가 <strong>상상 자체가 안 되는 수준</strong>으로 많아졌습니다.
          지구의 모래알 전부에 주소를 붙이고도 남아요 — 사설 IP로 아껴 쓸 필요조차 없죠.
        </p>
        <Code>{CODE_IPV6}</Code>
        <p>
          표기법이 낯설지만 원리는 같아요. 16진수라 <span className="icode">a~f</span>가 섞여
          있고, 콜론으로 구분하며, 0이 연속되면 <span className="icode">::</span>로 접어 줍니다.
          국내 통신사들도 이미 IPv6를 함께 제공하고 있어서, 여러분의 폰은 지금도 두 체계를
          <strong> 동시에</strong> 쓰고 있을 가능성이 높아요. 다음 섹션 실습에서 내 PC의
          IPv6 주소를 직접 찾아봅시다.
        </p>
      </Section>

      <Section n={7} title="실습 — ipconfig /all 해부하기" sub="배운 걸 전부 내 PC에서 눈으로 찾기">
        <p>
          이번 코스의 하이라이트 실습이에요. <span className="icode">ipconfig</span> 뒤에
          <span className="icode"> /all</span>을 붙이면 숨어 있던 정보가 전부 나옵니다.
          출력의 <strong>한 줄 한 줄이 지금까지 배운 섹션과 1:1로 연결</strong>돼요 —
          아래 해부도와 내 화면을 나란히 놓고 대조해 보세요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> <span className="kbd">Win</span> + <span className="kbd">R</span> →
          <span className="icode">cmd</span> 입력 → 터미널에서 <span className="icode">ipconfig /all</span> 실행.
          아래 해부도의 항목을 내 PC에서 <strong>전부</strong> 찾아 체크해 보세요.
          특히 <strong>임대 시작/만료 날짜</strong> — DHCP 계약서의 기간 조항을 실물로 보는 순간입니다.
        </div>
        <Code>{CODE_IPCONFIG_ALL}</Code>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 같은 터미널에서 <span className="icode">ipconfig /release</span> →
          <span className="icode">ipconfig /renew</span>를 차례로 실행해 보세요. 방금 배운
          <strong> DHCP 임대 계약을 해지했다가 다시 맺는</strong> 과정이에요. 잠깐 인터넷이 끊겼다
          돌아오고, 대개 같은 IP를 다시 받습니다(공유기가 "단골이니 같은 방 드릴게요" 하는 셈).
          와이파이 PC라면 연결이 몇 초 출렁일 수 있으니 다운로드 중엔 하지 마세요!
        </div>
      </Section>

      <Section n={8} title="고정 IP vs 유동 IP — 그리고 우리 EC2" sub="서버의 주소는 왜 못 박아야 하는가">
        <p>
          집 PC는 IP가 바뀌어도 아무도 안 곤란해요 — 우리는 항상 <strong>거는 쪽</strong>이니까요.
          하지만 서버는 <strong>받는 쪽</strong>입니다. 전 세계가 DNS 전화번호부에 적힌 번호로
          찾아오는데, 그 번호가 수시로 바뀌면 아무도 못 찾아와요. 그래서
          <strong> 서버의 공인 IP는 반드시 고정</strong>이어야 합니다.
        </p>
        <Code>{CODE_ELASTIC_IP}</Code>
        <p>
          정리하면 우리 플랫폼의 주소 체계는 3단 구조예요.
        </p>
        <ol className="olist">
          <li><strong>탄력적 IP</strong> — 서울 EC2에 못 박힌 고정 공인 IP. 인스턴스를 재시작해도 안 바뀜.</li>
          <li><strong>DNS</strong> — <span className="icode">edu.awesomedevapp.com</span>이 그 IP를 가리키도록 등록.</li>
          <li><strong>Caddy</strong> — 그 IP의 443 포트에서 HTTPS로 손님을 맞아 Spring Boot로 안내.</li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기 ③</b> <span className="icode">nslookup edu.awesomedevapp.com</span>을
          오늘 한 번, 내일 한 번 실행해 보세요. IP가 <strong>이틀 연속 똑같다면</strong> —
          그게 바로 탄력적 IP가 일하고 있다는 증거예요. 반대로 브라우저에서 "내 아이피"를
          검색해 나온 <strong>우리 집 공인 IP</strong>는 공유기를 오래 껐다 켜면 바뀔 수도 있는
          유동 IP입니다. 고정과 유동을 내 손으로 비교해 본 거예요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📍 여기까지 왔다면</h3>
          <p className="muted">
            이제 <span className="icode">192.168.0.5/24</span> 같은 표기를 보면 사설 대역,
            단지 경계, 게이트웨이의 위치까지 한눈에 읽어낼 수 있어요. IP는 네트워크의
            <strong> 주소</strong>였다면, 다음은 그 주소로 오가는 <strong>대화의 규칙</strong>을
            배울 차례 — <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스의
            DNS·TCP/IP·HTTP 섹션을 복습하고, 멘토에게 <strong>과제</strong>로
            "우리 EC2의 탄력적 IP와 VPC 사설 대역을 AWS 콘솔에서 찾아 그림으로 그려 오기"를
            받아 보세요. 콘솔을 눈으로 본 순간, 이 코스의 모든 개념이 실물이 됩니다.
          </p>
        </div>
      </div>
    </div>
  );
}
