// 이 파일이 하는 일: "공유기와 홈 네트워크 실전" 코스 — 공유기 관리자 페이지에 직접 들어가 보는 것부터
// WiFi 주파수 선택, 채널 간섭, 포트포워딩, UPnP·DMZ, 보안 설정, "인터넷 느릴 때" 점검 순서까지
// 7개 섹션으로 안내하는 정적 학습 페이지. ("네트워크의 이해" 코스의 실전편)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_ADMIN_LOGIN = `공유기 관리자 페이지 들어가기 — 3단계

1) 내 공유기 주소(게이트웨이) 알아내기 — 터미널에서:
   ipconfig
   기본 게이트웨이 . . . : 192.168.0.1   ← 이게 공유기 주소!

2) 브라우저 주소창에 그 주소를 입력:
   http://192.168.0.1
   (제조사에 따라 192.168.1.1, 192.168.219.1 등으로 다를 수 있어요)

3) 관리자 아이디/비밀번호 입력 → 관리 화면 입장!
   초기 비번은 공유기 밑면 스티커에 적혀 있는 경우가 많아요.

→ 여기서 볼 수 있는 것: 연결된 기기 목록, DHCP가 나눠준 IP,
  WiFi 이름(SSID)·비밀번호, 포트포워딩 설정 전부!`;

const CODE_BAND_COMPARE = `2.4GHz vs 5GHz — 저음 스피커와 고음 스피커

              2.4GHz              5GHz
──────────────────────────────────────────────
속도          느림                빠름 (몇 배 차이)
도달 거리     멀리 감             가까움
벽 통과       잘 뚫음             잘 막힘
간섭          많음 (전자레인지,    적음
              블루투스도 이 대역)

→ 낮은 주파수 = 낮은 음처럼 벽 너머까지 웅웅 울려 퍼지고,
  높은 주파수 = 높은 음처럼 또렷하지만 문 닫으면 잘 안 들려요.

선택 기준:
공유기와 같은 방·거실  → 5GHz (SSID에 "_5G"가 붙은 쪽)
방 2~3개 건너·먼 방   → 2.4GHz
잘 모르겠으면          → 둘 다 잡히는 곳에서는 5GHz 우선!`;

const CODE_CHANNEL = `채널 간섭 — 같은 주파수 안의 '차선' 나누기

2.4GHz 대역은 채널 1~13번이 있지만, 서로 겹치는 구조라
실제로 안 겹치는 조합은 1 · 6 · 11 세 개뿐이에요.

  채널:  1  2  3  4  5  6  7  8  9  10 11 12 13
         ├──겹침──┤
               ├──겹침──┤
  안전:  1───────────6───────────11

아파트라면? 윗집·옆집 공유기가 전부 6번 채널이면
왕복 2차선 도로에 트럭 수십 대가 몰린 상황 — 서로 양보하느라 다 느려져요.

해결:
1) 관리자 페이지 → 무선 설정 → 채널을 "자동"으로 (요즘 공유기는 알아서 회피)
2) 수동으로 바꾼다면 1·6·11 중 이웃이 덜 쓰는 번호로
3) 5GHz는 채널이 훨씬 넓고 많아 간섭 걱정이 적어요 — 이것도 5GHz를 권하는 이유!`;

const CODE_PORT_FORWARD = `포트포워딩 — 경비실(공유기)에 배달 규칙 등록하기

문제 상황: 내 PC(192.168.0.5)에서 Spring Boot 서버를 8080 포트로 켰다.
친구가 우리 집 공인 IP로 접속하면... 공유기까지만 오고 끝!

  친구 ──> [공인 IP]:8080 ──> [공유기] "8080? 누구 건지 모르는데?" ✗
                                  │
                          192.168.0.5 (내 PC, Spring Boot :8080)

경비실(NAT)은 '안에서 나간 요청의 답장'만 배달할 줄 알아요.
밖에서 먼저 들어온 손님은 몇 호로 보낼지 규칙이 없으면 돌려보냅니다.

포트포워딩 = 그 규칙을 등록하는 것:

  "외부 8080 포트로 오는 손님은 → 192.168.0.5의 8080호로 안내해 줘"

  외부 포트    내부 IP         내부 포트    프로토콜
  8080     →   192.168.0.5     8080         TCP

등록 후:
  친구 ──> [공인 IP]:8080 ──> [공유기] "아, 302호(내 PC)!" ──> Spring Boot ✓`;

const CODE_UPNP_DMZ = `UPnP와 DMZ — 편한 만큼 위험한 두 가지

UPnP (Universal Plug and Play)
  프로그램이 공유기에게 "저한테 포트 하나 열어 주세요" 하고
  스스로 포트포워딩을 등록하는 기능. 게임기·화상통화가 이걸 써요.
  장점: 설정이 자동  /  위험: 악성 프로그램도 몰래 문을 열 수 있음

DMZ
  "밖에서 오는 모든 요청을 전부 이 기기로 보내"라는 극단적 설정.
  포트 하나가 아니라 현관문·창문·베란다를 전부 열어 두는 것과 같아요.

권장 순서 (좁게 열수록 안전):
  1순위  필요한 포트만 포트포워딩      ← 방 하나만 열기
  2순위  UPnP (신뢰하는 기기만 쓸 때)  ← 자동문
  최후   DMZ                           ← 사실상 쓰지 말 것.
         "귀찮아서 DMZ"는 집 비밀번호를 현관에 써 붙이는 것과 같아요.`;

const CODE_SECURITY = `공유기 보안 체크리스트 — 위에서부터 순서대로!

□ 1. 관리자 비밀번호 변경
     초기 비번(admin/admin 같은)은 검색하면 다 나와요.
     같은 WiFi에 접속한 누구든 공유기를 통째로 조종할 수 있게 됩니다.

□ 2. WiFi 암호화 방식 = WPA3 (없으면 WPA2)
     WEP·"열림(Open)"은 금지 — 지나가던 사람도 통신 내용을 엿볼 수 있어요.
     WPA3는 최신 자물쇠, WPA2는 아직 튼튼한 자물쇠, WEP는 부서진 자물쇠.

□ 3. WiFi 비밀번호는 길고 엉뚱하게
     생일·전화번호 ✗ → 긴 문장형 ○ (예: 단어 3~4개 조합)

□ 4. 원격 관리(외부에서 관리자 페이지 접속) 끄기
     켜 두면 전 세계 누구나 우리 집 공유기 로그인 화면을 두드려 볼 수 있어요.

□ 5. 안 쓰는 포트포워딩·UPnP·DMZ 정리
     실습 끝난 규칙은 바로 지우기 — 열어 둔 문은 언젠가 누가 두드립니다.

□ 6. 펌웨어 업데이트
     공유기도 작은 컴퓨터라 보안 패치가 나와요. 관리자 페이지에서 확인.`;

const CODE_SLOW_CHECK = `"집 인터넷이 느려요!" — 범인 찾기 순서 (안쪽 → 바깥쪽)

① 내 기기 문제인가?
   다른 기기(폰·노트북)로 같은 사이트 접속.
   → 다른 기기는 빠르다? 범인은 내 PC (재부팅·백그라운드 다운로드 확인)

② WiFi 문제인가?
   랜선으로 직접 연결해서 속도 비교.
   → 유선은 빠르다? 범인은 무선 구간 (거리·채널 간섭·2.4/5GHz 선택)

③ 공유기 문제인가?
   공유기 전원을 뽑고 10초 뒤 다시 연결 (재부팅).
   관리자 페이지에서 연결 기기 수 확인 — 모르는 기기가 있다면 비번 유출!
   → 재부팅 후 빨라졌다? 공유기 과부하였던 것

④ 회선(통신사) 문제인가?
   속도 측정 사이트에서 측정 → 가입한 상품 속도(예: 500Mbps)와 비교.
   ping 8.8.8.8 -t 로 응답 시간이 널뛰거나 손실이 나오는지 관찰.
   → 유선 직결인데도 한참 느리다? 통신사에 문의할 차례

핵심: 안쪽(내 기기)부터 바깥쪽(통신사)으로 한 칸씩!
서버 장애 대응에서 배울 "원인 격리"와 완전히 같은 사고방식이에요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '2.4G vs 5G' },
  { n: 3, label: '채널 간섭' },
  { n: 4, label: '포트포워딩' },
  { n: 5, label: 'UPnP와 DMZ' },
  { n: 6, label: '공유기 보안' },
  { n: 7, label: '느릴 때 점검 순서' },
];

export default function HomeNetworkPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 무엇을 다루는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 네트워크</div>
        <h1>공유기와 홈 네트워크 실전<br />— 우리 집 네트워크의 관리자 되기</h1>
        <p>
          매일 쓰는 공유기, 사실은 우리 집의 작은 서버실이에요. 관리자 페이지에 직접
          들어가서 WiFi를 튜닝하고, 내 PC를 바깥에 열어 보고(포트포워딩), 보안까지 잠그는
          <strong> 실전 코스</strong>입니다. 집에 공유기만 있으면 전부 직접 해볼 수 있어요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">직접 해보기 4개</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="공유기 관리자 페이지 들어가기" sub="192.168.x.1 — 우리 집 서버실의 문 열기">
        <p>
          공유기는 그냥 인터넷 나눠 주는 상자가 아니라, 관리 화면을 가진
          <strong> 작은 컴퓨터</strong>예요. 그 관리 화면의 주소가 바로
          <span className="icode">192.168.0.1</span> 같은 <strong>게이트웨이 주소</strong>입니다.
          "네트워크의 이해" 코스에서 <span className="icode">ipconfig</span>로 봤던
          <strong> 기본 게이트웨이</strong> — 그게 공유기의 집 주소였던 거죠.
        </p>
        <Code>{CODE_ADMIN_LOGIN}</Code>
        <p>
          입장하면 학교 교무실 상황판 같은 화면이 나와요. 지금 우리 집에 어떤 기기가
          몇 대 붙어 있고, 각자 어떤 IP를 받았는지(DHCP), WiFi 이름과 암호는 뭔지 —
          이 코스의 나머지 섹션은 전부 <strong>이 화면 안에서</strong> 진행됩니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 330" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="집 네트워크 구성도: 인터넷에서 모뎀과 공유기를 거쳐 유선 PC와 무선 기기들로 연결된다">
          <rect x="10" y="45" width="90" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="55" y="78" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">인터넷</text>
          <line x1="100" y1="72" x2="185" y2="72" stroke="var(--line)" strokeWidth="1.5" />
          <text x="142" y="62" textAnchor="middle" fontSize="12" fill="var(--muted)">통신사 회선</text>
          <rect x="185" y="45" width="90" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="230" y="78" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">모뎀</text>
          <line x1="275" y1="72" x2="350" y2="72" stroke="var(--line)" strokeWidth="1.5" />
          <text x="312" y="62" textAnchor="middle" fontSize="12" fill="var(--muted)">공인 IP</text>
          <rect x="350" y="30" width="170" height="85" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="435" y="56" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">공유기</text>
          <text x="435" y="76" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.1</text>
          <text x="435" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">(기본 게이트웨이)</text>
          <line x1="380" y1="115" x2="95" y2="235" stroke="var(--line)" strokeWidth="1.5" />
          <text x="235" y="172" textAnchor="end" fontSize="12" fill="var(--muted)">유선(랜선)</text>
          <line x1="410" y1="115" x2="250" y2="235" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <line x1="435" y1="115" x2="405" y2="235" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <line x1="465" y1="115" x2="560" y2="235" stroke="var(--line)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="520" y="150" fontSize="12" fill="var(--muted)">무선(WiFi)</text>
          <rect x="40" y="235" width="110" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="95" y="258" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">PC</text>
          <text x="95" y="278" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.5</text>
          <rect x="195" y="235" width="110" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="250" y="258" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">스마트폰</text>
          <text x="250" y="278" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.7</text>
          <rect x="350" y="235" width="110" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="405" y="258" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">노트북</text>
          <text x="405" y="278" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.12</text>
          <rect x="505" y="235" width="110" height="55" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="560" y="258" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">TV</text>
          <text x="560" y="278" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.20</text>
          <text x="320" y="318" textAnchor="middle" fontSize="12" fill="var(--muted)">사설 IP — 공유기의 DHCP가 나눠준 주소</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 우리 집 네트워크 구성 — 인터넷·모뎀·공유기, 그리고 유선·무선 기기들</p>
        <div className="warn">
          <b>학교·회사 공유기는 손대지 마세요!</b> 관리자 페이지 실습은 반드시
          <strong> 우리 집 공유기</strong>로만 하세요. 남의 네트워크 장비 설정을 건드리는 건
          장난이 아니라 사고입니다. (어썸데브 사무실 공유기도 인프라 담당자 것!)
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 집에서 <span className="icode">ipconfig</span>로 게이트웨이
          주소를 찾아 브라우저로 접속해 보세요. 로그인했다면 <strong>연결된 기기 목록</strong>을
          열어 우리 집 기기 수를 세어 보세요 — 폰, 노트북, TV, 심지어 냉장고까지.
          예상보다 많아서 놀랄 거예요.
        </div>
      </Section>

      <Section n={2} title="WiFi 2.4GHz vs 5GHz" sub="멀리 가는 저음, 빠르지만 여린 고음">
        <p>
          공유기 WiFi 목록을 보면 같은 이름에 <span className="icode">_5G</span>만 붙은 게
          두 개 있죠? 같은 공유기가 <strong>두 개의 주파수 대역</strong>으로 방송 중인 거예요.
          스피커에 비유하면 2.4GHz는 <strong>저음(우퍼)</strong> — 벽 너머까지 울려 퍼지지만
          정보량이 적고, 5GHz는 <strong>고음(트위터)</strong> — 또렷하고 빠르지만 문 하나만
          닫아도 확 줄어들어요.
        </p>
        <Code>{CODE_BAND_COMPARE}</Code>
        <p>
          그래서 정답은 "무조건 5G"가 아니라 <strong>"내 위치에 따라"</strong>예요.
          공유기 옆에서 화상수업을 듣는다면 5GHz, 공유기에서 방 두 개 건너에 있다면
          신호가 약한 5GHz보다 안정적인 2.4GHz가 오히려 빠를 수 있습니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 폰으로 속도 측정 사이트를 열고, 공유기 <strong>바로 옆</strong>과
          <strong> 가장 먼 방</strong>에서 각각 2.4GHz·5GHz에 붙어 총 4번 측정해 보세요.
          "가까우면 5G 압승, 멀어지면 역전"이 실제 숫자로 보이면 이 섹션은 완전히 이해한 거예요.
        </div>
      </Section>

      <Section n={3} title="채널 간섭" sub="아파트에서 WiFi가 유독 느린 이유">
        <p>
          같은 2.4GHz 대역 안에서도 <strong>채널</strong>이라는 세부 차선이 나뉘어 있어요.
          문제는 옆집·윗집 공유기도 같은 하늘(전파 대역)을 쓴다는 것. 모두가 같은 채널에
          몰리면, 같은 주파수의 무전기 여러 대가 동시에 말하는 것처럼 서로를 기다리느라
          다 같이 느려집니다.
        </p>
        <Code>{CODE_CHANNEL}</Code>
        <p>
          다행히 요즘 공유기는 채널을 <strong>자동</strong>으로 두면 주변을 스캔해서
          한산한 채널로 옮겨 가요. 관리자 페이지의 무선 설정에서 지금 몇 번 채널을 쓰는지
          확인해 보고, 수동 고정돼 있다면 자동으로 바꿔 주는 것만으로도 개선되는 경우가 많습니다.
        </p>
        <div className="tip">
          <b>비유 하나 더</b> 2.4GHz의 1·6·11 채널은 왕복 6차선 도로에서 실제로는
          <strong> 안 부딪히는 차선이 3개뿐</strong>인 상황이에요. 5GHz로 가면 차선이
          수십 개인 새 고속도로 — 섹션 2에서 5GHz를 권한 숨은 이유이기도 해요.
        </div>
      </Section>

      <Section n={4} title="포트포워딩 — 내 PC를 서버로" sub="경비실에 '이 손님은 302호로' 규칙 등록하기">
        <p>
          "네트워크의 이해"에서 배운 NAT를 기억하나요? 공유기는 아파트 <strong>경비실</strong>이라
          안에서 나간 요청의 답장은 잘 배달하지만, <strong>밖에서 먼저 찾아온 손님</strong>은
          몇 호로 보낼지 몰라 돌려보냅니다. 그래서 내 PC에서 Spring Boot 서버를 켜도
          친구는 접속할 수 없어요. 이 문을 열어 주는 규칙이 <strong>포트포워딩</strong>입니다.
        </p>
        <Code>{CODE_PORT_FORWARD}</Code>
        <p>
          포트포워딩이 필요한 순간들: 내 PC의 개발 서버를 친구에게 잠깐 보여줄 때,
          게임 방을 직접 열 때, 집 PC에 원격 접속할 때. 참고로 우리 학습 플랫폼이 도는
          AWS EC2는 공유기 대신 <strong>보안 그룹</strong>이라는 방화벽으로 "어떤 포트를
          열지"를 정해요 — 개념은 완전히 같습니다. 집에서 익힌 감각이 서버 운영에서 그대로 쓰여요.
        </p>
        <svg className="diagram" viewBox="0 0 640 290" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="포트포워딩 전후 비교: 규칙이 없으면 공유기가 외부 요청을 돌려보내고, 규칙을 등록하면 내 PC까지 전달된다">
          <text x="20" y="28" fontSize="13" fontWeight="600" fill="var(--ink)">규칙이 없을 때</text>
          <rect x="20" y="45" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="70" y="66" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">친구</text>
          <text x="70" y="86" textAnchor="middle" fontSize="12" fill="var(--muted)">외부 인터넷</text>
          <line x1="120" y1="71" x2="230" y2="71" stroke="var(--line)" strokeWidth="1.5" />
          <polyline points="222,65 231,71 222,77" fill="none" stroke="var(--line)" strokeWidth="1.5" />
          <text x="177" y="60" textAnchor="middle" fontSize="12" fill="var(--muted)">공인 IP:8080</text>
          <rect x="236" y="45" width="140" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="306" y="66" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">공유기 (NAT)</text>
          <text x="306" y="86" textAnchor="middle" fontSize="12" fill="var(--muted)">규칙 없음</text>
          <text x="392" y="66" fontSize="13" fontWeight="600" fill="var(--rose)">✗ 몇 호로 보낼지 몰라요</text>
          <text x="392" y="86" fontSize="12" fill="var(--muted)">→ 돌려보냄 (접속 실패)</text>
          <line x1="20" y1="122" x2="620" y2="122" stroke="var(--line)" strokeDasharray="4 4" />
          <text x="20" y="152" fontSize="13" fontWeight="600" fill="var(--ink)">포트포워딩 규칙을 등록한 후</text>
          <rect x="20" y="170" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="70" y="191" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">친구</text>
          <text x="70" y="211" textAnchor="middle" fontSize="12" fill="var(--muted)">외부 인터넷</text>
          <line x1="120" y1="196" x2="216" y2="196" stroke="var(--line)" strokeWidth="1.5" />
          <polyline points="208,190 217,196 208,202" fill="none" stroke="var(--line)" strokeWidth="1.5" />
          <text x="168" y="185" textAnchor="middle" fontSize="12" fill="var(--muted)">공인 IP:8080</text>
          <rect x="222" y="165" width="180" height="100" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="312" y="186" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">공유기 (NAT)</text>
          <rect x="234" y="198" width="156" height="54" rx="6" fill="var(--card)" stroke="var(--amber)" />
          <text x="312" y="220" textAnchor="middle" fontSize="12" fill="var(--ink)">규칙: 외부 8080 →</text>
          <text x="312" y="240" textAnchor="middle" fontSize="12" fill="var(--ink)">192.168.0.5:8080</text>
          <line x1="402" y1="196" x2="466" y2="196" stroke="var(--line)" strokeWidth="1.5" />
          <polyline points="458,190 467,196 458,202" fill="none" stroke="var(--line)" strokeWidth="1.5" />
          <text x="434" y="185" textAnchor="middle" fontSize="12" fill="var(--muted)">전달</text>
          <rect x="472" y="170" width="148" height="72" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="546" y="192" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">내 PC</text>
          <text x="546" y="211" textAnchor="middle" fontSize="12" fill="var(--muted)">192.168.0.5</text>
          <text x="546" y="230" textAnchor="middle" fontSize="12" fill="var(--muted)">Spring Boot :8080</text>
          <text x="546" y="266" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--teal)">✓ 접속 성공</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 포트포워딩 — 규칙이 없을 때와 등록한 후의 차이</p>
        <div className="tip">
          <b>직접 확인해 보기</b> 관리자 페이지에서 <strong>포트포워딩 메뉴를 찾아 규칙 화면까지만</strong>
          들어가 보세요(NAT 설정, 고급 설정 등의 이름). 외부 포트·내부 IP·내부 포트 입력칸이
          위 그림과 똑같이 생겼는지 확인! 실제 규칙 추가는 섹션 6의 보안 설정을 마친 뒤,
          실습이 끝나면 <strong>반드시 삭제</strong>하는 조건으로만 해보세요.
        </div>
      </Section>

      <Section n={5} title="UPnP와 DMZ 한 입" sub="자동문과 '문 전부 열기' — 편리함의 값은 보안">
        <p>
          포트포워딩을 매번 손으로 등록하는 게 귀찮아서 나온 것들이 있어요.
          <strong> UPnP</strong>는 프로그램이 공유기에 스스로 "포트 열어 주세요" 요청하는
          자동문이고, <strong>DMZ</strong>는 아예 한 기기로 모든 문을 다 열어 버리는
          극단적인 방법입니다.
        </p>
        <Code>{CODE_UPNP_DMZ}</Code>
        <div className="warn">
          <b>DMZ의 함정</b> 인터넷 검색에서 "포트포워딩 안 되면 DMZ 하세요"라는 글을 자주
          보게 될 거예요. 되긴 됩니다 — 문을 전부 열었으니까요. 하지만 그 순간 그 PC는
          인터넷의 모든 자동 공격 스캐너에 그대로 노출됩니다. <strong>문제를 푸는 것과
          문을 다 여는 것은 달라요.</strong> 필요한 포트 하나만 정확히 여는 습관을 들이세요.
        </div>
        <p>
          기억할 원칙은 하나예요. <strong>"가장 좁게 열 수 있는 문을 열어라."</strong>
          나중에 배울 서버 보안(EC2 보안 그룹, 방화벽)에서도 똑같은 원칙이
          <strong> 최소 권한 원칙</strong>이라는 이름으로 다시 등장합니다.
        </p>
      </Section>

      <Section n={6} title="공유기 보안 설정" sub="관리자 비번과 WPA3 — 우리 집 네트워크의 자물쇠">
        <p>
          공유기를 장악당하면 그 집의 <strong>모든 인터넷 통신이 남의 손을 거쳐</strong> 나가게
          돼요. 가짜 사이트로 몰래 데려가거나, 어떤 사이트에 접속하는지 전부 지켜볼 수도 있죠.
          그런데도 많은 집이 공유기를 <strong>초기 비밀번호 그대로</strong> 씁니다.
          아래 체크리스트를 위에서부터 순서대로 점검해 보세요.
        </p>
        <Code>{CODE_SECURITY}</Code>
        <p>
          <strong>WPA3</strong>는 WiFi 전파 자체를 암호화하는 최신 방식이에요. WiFi는
          전파라서 비밀번호가 없으면 같은 공간의 누구나 오가는 내용을 주울 수 있는데,
          WPA2/WPA3는 그 내용을 자물쇠로 잠가 줍니다. 오래된 <span className="icode">WEP</span>는
          이미 몇 분 만에 뚫리는 부서진 자물쇠라 절대 쓰면 안 돼요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 집 공유기에서 두 가지를 확인하고, 가능하면 바로 고쳐 보세요.
          ① 관리자 비밀번호가 초기값이면 <strong>지금 변경</strong> (부모님께 새 비번 공유!)
          ② 무선 설정에서 암호화 방식이 <span className="icode">WPA2</span> 이상인지 확인,
          <span className="icode">WPA3</span> 항목이 있으면 <span className="icode">WPA2/WPA3 혼용</span>으로.
          오늘 이 실습 하나로 여러분은 가족의 보안 담당자가 됩니다.
        </div>
      </Section>

      <Section n={7} title="실습 — 집 인터넷 느릴 때 점검 순서" sub="감이 아니라 순서로 범인을 찾는다">
        <p>
          "인터넷 느려!"라는 한마디에는 범인 후보가 최소 넷이에요 — 내 기기, WiFi 구간,
          공유기, 통신사 회선. 아무거나 찔러 보는 대신, <strong>안쪽에서 바깥쪽으로</strong>
          한 칸씩 용의자를 지워 나가면 반드시 범인이 나옵니다. 의사가 문진하듯이요.
        </p>
        <Code>{CODE_SLOW_CHECK}</Code>
        <p>
          이 "한 칸씩 격리해서 지워 나가기"는 개발자의 핵심 근육이에요. 나중에
          "우리 플랫폼이 안 열려요"라는 문의를 받으면 똑같이 진행합니다 — 브라우저 문제?
          DNS 문제? Caddy까지는 왔나? Spring Boot가 죽었나? PostgreSQL이 안 붙나?
          <strong> 집 인터넷 점검과 서버 장애 대응은 같은 사고방식의 두 얼굴</strong>입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 문제가 없어도 <strong>평소 기준값</strong>을 만들어 두세요.
          ① 속도 측정 사이트에서 유선·무선 속도를 각각 재서 메모
          ② <span className="icode">ping 8.8.8.8</span>의 평균 응답 시간(ms) 메모.
          장애 대응의 반은 "평소엔 어땠는지"를 아는 것 — 서버 모니터링에서도 똑같아요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🏠 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 공유기 관리 화면을 열고(1), 상황에 맞는 주파수와 채널을 고르고(2·3),
            필요한 문만 정확히 열고(4·5), 자물쇠를 채우고(6), 문제가 생기면 순서대로 범인을
            찾을 수 있어요(7). 집에서 익힌 이 감각 — 포트 열기, 최소 권한, 원인 격리 — 는
            서버 운영의 축소판입니다. 아직 안 들었다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스로 이론 기초를
            다지고, 멘토에게 <strong>"내 PC 개발 서버를 포트포워딩으로 친구에게 보여주기"</strong>
            과제를 받아 이번 코스를 실전으로 마무리해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
