// 이 파일이 하는 일: "무선 네트워크와 보안" 코스 — 눈에 안 보이는 전파로 데이터가
// 어떻게 날아가는지에서 출발해, 공용 와이파이의 위험·피싱 구별법·비밀번호와 2단계 인증까지
// '나를 지키는 습관'을 8개 섹션으로 안내하는 정적 학습 페이지.
// (전파의 원리 → WPA2/WPA3 → 공용 와이파이의 위험 → 피싱·스미싱 → 비밀번호 관리
//  → 2단계 인증 → 회사 보안 수칙(수습 가이드 A7) → 정리 퀴즈)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_RADIO = `와이파이 = 눈에 안 보이는 '빛'으로 보내는 모스 부호

[노트북] ~~~전파(2.4GHz / 5GHz)~~~ [공유기(AP)] ──랜선──> 인터넷

- 전파도 빛과 같은 전자기파예요. 다만 눈에 보이는 색보다 훨씬 '낮은 음'일 뿐.
- 0과 1을 전파의 모양(진폭·주파수·위상)에 실어서 깜빡깜빡 보냅니다.
- 2.4GHz: 멀리 가고 벽을 잘 뚫지만 붐빔 (전자레인지·블루투스와 같은 동네!)
- 5GHz : 빠르지만 벽에 약함 — 방문 하나에도 신호가 뚝 떨어져요.

핵심: 전파는 '벽이 없는 복도'에 대고 말하는 것과 같아서,
      범위 안의 누구나 물리적으로는 '들을 수' 있습니다. → 그래서 암호화가 필수!`;

const CODE_NETSH = `# Windows 터미널(cmd/PowerShell)에서 — 지금 연결된 와이파이의 속살 보기:
netsh wlan show interfaces

    SSID          : AWESOMEDEV_5G     ← 네트워크 이름
    무선 종류      : 802.11ax          ← Wi-Fi 6이라는 뜻!
    인증          : WPA3-개인          ← 오늘의 주인공 (섹션 2)
    채널          : 44                ← 5GHz 대역
    신호          : 88%               ← 벽에서 멀어지면 떨어져요

# 자리를 옮겨 가며 '신호' %가 변하는 걸 관찰해 보세요.
# '인증' 칸이 WPA2인지 WPA3인지도 꼭 확인!`;

const CODE_WPA = `무선 암호화의 세대교체 — 자물쇠의 역사

세대      상태              한 줄 평
──────────────────────────────────────────────
WEP      절대 금지          몇 분 만에 뚫림. 박물관행.
WPA      은퇴              WEP 응급처치 버전. 역시 옛날 것.
WPA2     아직 주력          20년 가까이 버틴 튼튼한 자물쇠.
WPA3     현재 표준          최신. 아래 두 가지가 크게 좋아짐.

WPA3가 좋아진 점 (비유와 함께):
1) 비밀번호 추측 공격 방어(SAE)
   WPA2: 악수 과정을 녹음해 가서 집에서 무한 대입 가능
   WPA3: 한 번 틀릴 때마다 공유기와 '다시 대면'해야 함 → 무한 대입 불가
2) 순방향 비밀성(Forward Secrecy)
   나중에 비밀번호가 털려도, '과거에 오간' 데이터는 못 풀어요.
   매일 다른 열쇠로 잠근 일기장이라, 마스터키를 뺏겨도 어제 일기는 안전.`;

const CODE_MITM = `중간자 공격(MITM, Man-in-the-Middle) 개념도 — 가짜 우체부 이야기

정상 상황:
  [내 폰] ────────────────────> [카페 공유기] ──> [인터넷]

공격 상황: 공격자가 '진짜보다 신호가 센 가짜 공유기'를 켭니다.
  [내 폰] ──> [가짜 AP "Cafe_Free_WiFi"] ──> [진짜 인터넷]
                     │
              공격자가 여기 앉아서
              오가는 내용을 전부 읽고 · 바꿀 수 있음

- 내 폰 입장에선 인터넷이 '잘 되니까' 눈치채기 어려워요.
- 편지를 우체부가 몰래 뜯어 읽고, 다시 붙여서 배달하는 것과 같습니다.
- 이름(SSID)은 누구나 마음대로 지을 수 있다는 게 함정 —
  "OO카페 공식 와이파이"라는 이름 자체는 아무 증명도 아니에요.`;

const CODE_DEFENSE = `공용 와이파이에서 나를 지키는 3중 방어

1) HTTPS 확인 — 편지 내용을 '암호문'으로 쓰기
   주소창의 자물쇠(🔒) = 브라우저와 서버가 종단간 암호화 중.
   가짜 우체부가 편지를 뜯어도 암호문만 보여요.
   단, 자물쇠는 "대화가 암호화됐다"는 뜻이지 "상대가 착한 사이트"라는
   보증이 아님! (피싱 사이트도 자물쇠는 달 수 있어요 → 섹션 4)

2) VPN — 아예 '전용 비밀 터널'로 다니기
   내 기기 ↔ VPN 서버 사이에 암호화 터널을 뚫고, 모든 트래픽이
   그 터널 안으로만 다녀요. 카페 공유기(와 가짜 우체부)에게는
   터널의 겉모습만 보이고 내용물·목적지가 안 보입니다.

3) 습관 — 공용 와이파이에서는
   ✗ 인터넷뱅킹·결제·회사 시스템 로그인은 미루기
   ✗ "자동 연결" 켜 두지 않기 (폰이 알아서 가짜 AP에 붙을 수 있어요)
   ✓ 급하면 차라리 내 폰의 LTE/5G 테더링 쓰기`;

const CODE_PHISHING = `피싱·스미싱 감별 체크리스트 — 4가지만 기억해요

□ 1. 긴급함을 조성하나요?
     "오늘까지 안 하면 계정 정지" "택배 반송 임박" —
     사람을 급하게 만들어 생각할 틈을 뺏는 게 1번 수법.

□ 2. 링크의 '진짜 도메인'이 맞나요?
     edu.awesomedevapp.com        ← 진짜 (awesomedevapp.com 소속)
     edu.awesomedevapp.com.xn.ru  ← 가짜! (진짜 주인은 맨 뒤 xn.ru)
     awesornedevapp.com           ← 가짜! (m이 아니라 r+n, 폰트 착시)
     도메인은 '뒤에서부터' 읽으세요. 마지막 두 덩어리가 진짜 주인.

□ 3. 보낸 사람과 링크가 따로 노나요?
     문자·메일의 파란 글씨(표시 텍스트)와 실제 이동 주소는
     다를 수 있어요. PC에선 마우스를 '올려만' 놓고 좌하단 미리보기 확인.

□ 4. 비밀번호·인증번호를 '먼저' 요구하나요?
     정상 서비스는 문자·전화로 비밀번호나 인증번호를 묻지 않아요.
     인증번호를 알려달라는 전화 = 100% 사기.

스미싱(SMS+피싱) 단골 소재: 택배 주소 오류, 건강검진 결과,
경조사 부고, 과태료·범칙금. → 링크 누르지 말고 공식 앱/사이트로 직접 확인!`;

const CODE_PASSWORD = `비밀번호 도미노 — 재사용이 위험한 진짜 이유

[허술한 사이트 A가 해킹당함]
        │  A에서 쓴 이메일+비밀번호 목록이 유출
        ▼
[공격자가 그 조합을 유명 서비스들에 자동 대입]   ← 크리덴셜 스터핑
        ▼
[같은 비밀번호를 쓴 내 메일·SNS·회사 계정까지 연쇄 함락]

즉, 내 비밀번호의 안전은 '내가 가입한 사이트 중
가장 허술한 곳'의 보안 수준으로 떨어집니다.

해법: 사이트마다 다른, 길고 무작위한 비밀번호
사람 머리로는 불가능 → 비밀번호 관리자(password manager)에게 위임
- 마스터 비밀번호 '하나'만 외우면, 나머지는 도구가
  생성(무작위 20자+)·저장·자동입력까지 해 줘요.
- 브라우저 내장 관리자도 훌륭한 출발점입니다.
- 마스터 비밀번호는 '길이'가 왕: 특수문자 범벅 8자보다
  "무작위 한글 단어 4~5개 조합" 같은 긴 문구가 더 강해요.`;

const CODE_2FA = `2단계 인증(2FA) = 아는 것 + 가진 것

1단계: 비밀번호        → 내가 '아는 것'   (유출될 수 있음)
2단계: 내 폰의 코드     → 내가 '가진 것'   (공격자에겐 없음)

비밀번호가 통째로 털려도, 공격자 화면엔 이게 뜹니다:
  ┌─────────────────────────────┐
  │  인증 앱의 6자리 코드를 입력하세요   │   ← 여기서 막힘!
  └─────────────────────────────┘

방식별 안전도 (아래로 갈수록 강함):
  SMS 문자      △  없는 것보단 훨씬 낫지만 심스와핑 위험
  인증 앱(TOTP)  ○  30초마다 바뀌는 코드, 오프라인 생성
  보안키/패스키   ◎  피싱 사이트에선 아예 작동 안 함

한 줄 결론: 메일·Gitea·클라우드처럼 '다른 계정의 열쇠'가 되는
계정부터 2FA를 켜세요. 특히 이메일 = 모든 비밀번호 재설정의 관문!`;

const CODE_COMPANY = `수습 가이드 A7 '보안 수칙'과 오늘 배운 것의 연결

A7 수칙                          오늘 코스의 근거
──────────────────────────────────────────────────
회사 계정 2FA 필수               섹션 6 — 비밀번호 유출 시 2차 방어선
사내 계정 비밀번호 재사용 금지     섹션 5 — 크리덴셜 스터핑 도미노
외부/공용 와이파이에서
  사내 시스템 접속 시 VPN        섹션 3 — 중간자 공격 차단
출처 불명 링크·첨부 열지 않기      섹션 4 — 피싱의 관문 봉쇄
자리 비울 때 화면 잠금(Win+L)     '물리적 중간자'도 있어요

왜 회사에서 더 엄격할까?
개인 계정이 털리면 '내' 피해로 끝나지만, 회사 계정 하나가 털리면
동료 전체·고객 데이터·서비스(EC2의 운영 서버, Gitea의 소스 코드,
PostgreSQL의 실데이터)까지 도미노로 무너질 수 있기 때문이에요.
신입/수습의 계정이 오히려 공격의 첫 표적이 되는 경우가 많습니다 —
"아직 규칙에 익숙하지 않을 것"이라고 노리는 거죠.`;

const CODE_QUIZ = `셀프 체크 5문항 — 답을 소리 내어 설명할 수 있으면 통과!

Q1. 와이파이 전파는 왜 '벽 없는 복도에서 말하기'에 비유될까요?
    힌트: 범위 안에서는 누구나 물리적으로... (섹션 1)

Q2. WPA3가 WPA2보다 비밀번호 추측 공격에 강한 이유는?
    힌트: 녹음해 가서 집에서 대입 vs 매번 다시 대면 (섹션 2)

Q3. 카페 와이파이 이름이 "OO카페 공식"이면 믿어도 될까요?
    힌트: SSID는 누가 정하죠? (섹션 3)

Q4. 주소창의 자물쇠(HTTPS)가 있으면 피싱 걱정은 끝일까요?
    힌트: 자물쇠가 보증하는 건 '암호화'지 '착한 상대'가 아님 (섹션 3·4)

Q5. 여러 사이트에 같은 비밀번호를 쓰면, 내 보안 수준은
    어느 사이트에 의해 결정될까요? (섹션 5)

→ 내가 쓴 답이 맞는지 멘토와 함께 확인해 보세요.
  "말로 설명하다 막히는 지점"이 진짜 복습 포인트입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'WPA2 / WPA3' },
  { n: 3, label: '공용 와이파이의 위험' },
  { n: 4, label: '피싱·스미싱' },
  { n: 5, label: '비밀번호 관리' },
  { n: 6, label: '2단계 인증' },
  { n: 7, label: '회사 보안 수칙' },
  { n: 8, label: '정리 퀴즈' },
];

export default function WifiSecurityPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 네트워크</div>
        <h1>무선 네트워크와 보안<br />— 보이지 않는 전파, 보여야 하는 위험</h1>
        <p>
          랜선 없이도 인터넷이 되는 건 데이터가 <strong>전파</strong>를 타고 날아다니기
          때문인데, 전파는 벽 없는 복도라서 <strong>지키는 법</strong>을 함께 배워야 해요.
          와이파이의 원리에서 출발해 공용 와이파이의 함정, 피싱 감별법, 그리고 회사
          보안 수칙(수습 가이드 A7)까지 — <strong>"직접 확인해 보기"</strong>는 꼭 내
          PC와 폰에서 손으로 해보세요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</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="선이 없는데 어떻게 0과 1이 날아갈까?">
        <p>
          <Link to="/learn/network">네트워크의 이해</Link> 코스에서 랜선 속 구리선으로
          전기 신호가 달리는 걸 배웠죠. 와이파이는 그 <strong>구리선을 공기로 바꾼 것</strong>이에요.
          데이터(0과 1)를 <strong>전파</strong>라는 전자기파에 실어서, 노트북과 공유기가
          서로에게 손전등으로 모스 부호를 보내듯 깜빡깜빡 주고받습니다.
        </p>
        <Code>{CODE_RADIO}</Code>
        <p>
          여기서 보안 관점의 결정적 차이가 나와요. 랜선은 <strong>꽂은 사람만</strong> 신호를
          받지만, 전파는 <strong>범위 안의 모두에게 퍼집니다</strong>. 교실에서 쪽지를 손으로
          전달하는 것(유선)과, 칠판에 크게 써 붙이는 것(무선)의 차이예요. 그래서 무선은
          쪽지 내용을 <strong>암호문으로 바꿔 쓰는 것</strong>, 즉 암호화가 태생적으로 필수입니다.
          그 암호화 방식이 바로 다음 섹션의 WPA예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널에 아래 명령을 쳐서 지금 연결된 와이파이의
          주파수 대역·신호 세기·<strong>인증 방식(WPA2? WPA3?)</strong>을 확인해 보세요.
          노트북이라면 공유기에서 먼 방으로 이동하며 <span className="icode">신호</span> %가
          떨어지는 것도 관찰!
        </div>
        <Code>{CODE_NETSH}</Code>
      </Section>

      <Section n={2} title="WPA2와 WPA3" sub="와이파이 자물쇠의 세대교체">
        <p>
          와이파이 비밀번호를 입력하는 순간, 내 기기와 공유기는 그 비밀번호를 바탕으로
          <strong> 암호 열쇠</strong>를 만들어 이후의 모든 전파를 잠급니다. 이 잠그는
          규칙의 이름이 <strong>WPA</strong>(Wi-Fi Protected Access)이고, 세대를 거치며
          자물쇠가 점점 단단해졌어요.
        </p>
        <Code>{CODE_WPA}</Code>
        <p>
          집이나 회사 공유기 설정에서 암호화 방식을 고를 수 있다면
          <strong> WPA3</strong>(구형 기기가 있으면 WPA2/WPA3 혼합)를 선택하는 게 정답이에요.
          그리고 아무리 WPA3라도 <strong>와이파이 비밀번호 자체가 짧고 뻔하면</strong>
          (<span className="icode">12345678</span> 같은) 자물쇠가 좋아도 열쇠를 문 앞에
          둔 셈이라는 것, 잊지 마세요.
        </p>
        <div className="warn">
          <b>WEP나 '열림(Open)'으로 표시되는 와이파이</b>는 전파가 암호화 없이 그대로
          날아다닌다는 뜻이에요. 칠판에 쪽지를 <strong>원문 그대로</strong> 써 붙이는 것과
          같으니, 연결하더라도 로그인 같은 민감한 일은 하지 않는 게 원칙입니다.
        </div>
      </Section>

      <Section n={3} title="공용 와이파이의 위험과 자기 방어" sub="가짜 우체부가 편지를 뜯어 보는 세계 — 중간자 공격">
        <p>
          카페·지하철의 공짜 와이파이는 편하지만, <strong>누가 세운 공유기인지 알 수 없다</strong>는
          근본 문제가 있어요. 최악의 시나리오가 <strong>중간자 공격</strong>(MITM)입니다 —
          공격자가 나와 인터넷 <strong>사이에 끼어들어</strong> 오가는 내용을 몰래 읽거나
          바꾸는 공격이에요.
        </p>
        <Code>{CODE_MITM}</Code>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="중간자 공격 개념도: 정상 경로와 가짜 공유기를 거치는 도청 경로 비교">
          <text x="32" y="32" fontSize="14" fontWeight="700" fill="var(--teal)">정상 경로 — 데이터가 곧장 목적지로 간다</text>
          <rect x="40" y="54" width="104" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="92" y="83" fontSize="13" textAnchor="middle" fill="var(--ink)">내 폰</text>
          <rect x="258" y="54" width="130" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="323" y="83" fontSize="13" textAnchor="middle" fill="var(--ink)">카페 공유기</text>
          <rect x="500" y="54" width="104" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="552" y="83" fontSize="13" textAnchor="middle" fill="var(--ink)">인터넷</text>
          <line x1="148" y1="78" x2="248" y2="78" stroke="var(--teal)" strokeWidth="2" />
          <polyline points="240,72 250,78 240,84" fill="none" stroke="var(--teal)" strokeWidth="2" />
          <line x1="392" y1="78" x2="490" y2="78" stroke="var(--teal)" strokeWidth="2" />
          <polyline points="482,72 492,78 482,84" fill="none" stroke="var(--teal)" strokeWidth="2" />
          <line x1="32" y1="146" x2="608" y2="146" stroke="var(--line)" strokeDasharray="4 4" />
          <text x="32" y="176" fontSize="14" fontWeight="700" fill="var(--rose)">도청 경로 — 공격자의 가짜 공유기가 끼어든다</text>
          <rect x="40" y="190" width="104" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="92" y="219" fontSize="13" textAnchor="middle" fill="var(--ink)">내 폰</text>
          <rect x="248" y="190" width="150" height="48" rx="8" fill="var(--card)" stroke="var(--rose)" />
          <text x="323" y="210" fontSize="13" textAnchor="middle" fill="var(--ink)">가짜 공유기</text>
          <text x="323" y="228" fontSize="12" textAnchor="middle" fill="var(--muted)">"Cafe_Free_WiFi"</text>
          <rect x="500" y="190" width="104" height="48" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="552" y="219" fontSize="13" textAnchor="middle" fill="var(--ink)">인터넷</text>
          <line x1="148" y1="214" x2="238" y2="214" stroke="var(--rose)" strokeWidth="2" />
          <polyline points="230,208 240,214 230,220" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <line x1="402" y1="214" x2="490" y2="214" stroke="var(--rose)" strokeWidth="2" />
          <polyline points="482,208 492,214 482,220" fill="none" stroke="var(--rose)" strokeWidth="2" />
          <line x1="323" y1="238" x2="323" y2="284" stroke="var(--rose)" strokeWidth="2" strokeDasharray="4 4" />
          <rect x="278" y="284" width="90" height="34" rx="8" fill="var(--card)" stroke="var(--rose)" />
          <text x="323" y="306" fontSize="13" textAnchor="middle" fill="var(--ink)">공격자</text>
          <text x="378" y="306" fontSize="12" fill="var(--rose)">오가는 내용을 전부 읽고 바꿀 수 있음</text>
          <text x="320" y="344" fontSize="12" textAnchor="middle" fill="var(--muted)">이름(SSID)은 누구나 지을 수 있어요 — 이름은 아무 증명도 아닙니다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 정상 경로(위)와 도청 경로(아래) — 가짜 공유기에 붙는 순간 모든 데이터가 공격자를 거쳐요</p>
        <p>
          무섭죠? 하지만 방어법은 명확합니다. 편지를 <strong>뜯겨도 못 읽게</strong> 만들거나
          (HTTPS), 아예 <strong>전용 터널</strong>로 다니는(VPN) 거예요.
        </p>
        <Code>{CODE_DEFENSE}</Code>
        <p>
          VPN을 비유하면, 복도(공용 와이파이)에 <strong>불투명한 파이프</strong>를 깔고
          그 안으로만 다니는 겁니다. 복도에 서 있는 사람(가짜 우체부 포함)은 파이프가
          있다는 것만 알 뿐, 안에서 뭐가 어디로 가는지 못 봐요. 우리 회사도 외부에서
          사내 시스템에 접속할 땐 VPN을 쓰도록 하는 이유가 이거예요(섹션 7).
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 페이지 주소창의 <strong>자물쇠 아이콘</strong>을
          클릭해 보세요. "연결이 안전함" → 인증서 정보에서 <strong>누구에게 발급된
          인증서인지</strong>(edu.awesomedevapp.com)까지 열어 보면, 브라우저가 매 접속마다
          "상대가 진짜인지" 검사하고 있다는 걸 눈으로 확인할 수 있어요.
          <span className="kbd">F12</span> → <span className="kbd">Security</span> 탭에서도
          같은 정보를 볼 수 있습니다.
        </div>
      </Section>

      <Section n={4} title="피싱·스미싱 구별법" sub="기술이 아니라 '사람'을 해킹하는 공격">
        <p>
          지금까지는 전파·암호화 같은 기술 이야기였다면, <strong>피싱</strong>(phishing)은
          기술 대신 <strong>사람의 마음</strong>을 노려요. 진짜처럼 꾸민 가짜 사이트·메일·문자로
          비밀번호를 <strong>스스로 입력하게</strong> 만드는 거죠. 낚시(fishing)처럼 미끼를
          던진다고 해서 피싱, 문자(SMS)로 오면 <strong>스미싱</strong>입니다.
        </p>
        <Code>{CODE_PHISHING}</Code>
        <p>
          체크리스트 2번이 특히 중요해요. 도메인은 <strong>뒤에서부터</strong> 읽는 습관을
          들이세요. <span className="icode">edu.awesomedevapp.com</span>의 주인은
          <span className="icode">awesomedevapp.com</span>이지만,
          <span className="icode">awesomedevapp.com.evil.ru</span>의 진짜 주인은 맨 뒤의
          <span className="icode">evil.ru</span>예요. 앞부분은 얼마든지 그럴듯하게 붙일 수 있거든요.
        </p>
        <div className="warn">
          <b>피싱 사이트도 자물쇠(HTTPS)를 달 수 있어요.</b> 자물쇠는 "대화가 암호화된다"는
          뜻일 뿐, "상대가 착하다"는 보증이 아닙니다. 가짜 은행 창구에서도 문은 잠글 수
          있잖아요. <strong>암호화 확인(자물쇠) + 도메인 확인(진짜 주인)</strong>, 둘 다
          해야 안전합니다.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 최근 받은 광고·안내 문자 중 링크가 든 것을 하나 골라
          (누르지 말고!) 링크를 <strong>길게 눌러 주소 미리보기</strong>를 띄워 보세요.
          도메인을 뒤에서부터 읽어 진짜 주인이 누군지 판별 — 위 체크리스트 4개를 하나씩
          적용해 보는 게 오늘의 실전 훈련입니다.
        </div>
      </Section>

      <Section n={5} title="비밀번호 관리" sub="재사용은 도미노, 기억은 도구에게">
        <p>
          "비밀번호를 어렵게 만들어라"보다 먼저 알아야 할 게 <strong>재사용 금지</strong>예요.
          아무리 어려운 비밀번호도 <strong>여러 사이트에 같이 쓰는 순간</strong> 도미노의
          첫 조각이 됩니다.
        </p>
        <Code>{CODE_PASSWORD}</Code>
        <p>
          "사이트마다 다른 무작위 20자를 어떻게 다 외워요?"가 당연한 반응이고, 정답은
          <strong> 외우지 않는 것</strong>이에요. <strong>비밀번호 관리자</strong>는 금고지기
          같은 도구라서, 우리는 금고 열쇠(마스터 비밀번호) 하나만 단단히 만들고 나머지
          비밀번호의 생성·보관·입력은 전부 금고지기에게 맡깁니다. 관리자 도구는 저장해 둔
          사이트의 <strong>진짜 도메인에서만</strong> 자동입력이 뜨기 때문에, 피싱 사이트에서
          자동입력이 <strong>안 뜨는 것 자체가 경보</strong>가 되는 보너스 효과도 있어요(섹션 4 복습!).
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 크롬 주소창에
          <span className="icode">chrome://password-manager/checkup</span>을 열어 보세요
          (엣지는 설정 → 프로필 → 비밀번호). 브라우저가 내 저장된 비밀번호 중
          <strong> 유출된 것·재사용 중인 것·약한 것</strong>을 검사해 줍니다. 재사용 목록이
          나온다면 오늘 밤 안에 하나씩 바꾸는 게 이번 코스의 진짜 과제예요.
        </div>
      </Section>

      <Section n={6} title="2단계 인증, 왜 켜나" sub="비밀번호가 털려도 문이 안 열리는 이유">
        <p>
          섹션 5를 완벽히 지켜도 비밀번호는 털릴 수 있어요 — 내 잘못이 아니라
          <strong> 사이트 쪽이 해킹</strong>당해서요. 그래서 마지막 안전망이
          <strong> 2단계 인증</strong>(2FA)입니다. 현관에 <strong>비밀번호 자물쇠 + 내 폰에만
          있는 열쇠</strong>, 이중 잠금을 다는 거예요.
        </p>
        <Code>{CODE_2FA}</Code>
        <svg className="diagram" viewBox="0 0 640 260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="2단계 인증 개념도: 비밀번호를 훔친 공격자도 2단계에서 막힌다">
          <rect x="214" y="54" width="112" height="168" rx="10" fill="none" stroke="var(--line)" strokeDasharray="5 4" />
          <rect x="414" y="54" width="112" height="168" rx="10" fill="none" stroke="var(--line)" strokeDasharray="5 4" />
          <text x="270" y="40" fontSize="13" fontWeight="700" textAnchor="middle" fill="var(--ink)">1단계 · 비밀번호</text>
          <text x="270" y="74" fontSize="12" textAnchor="middle" fill="var(--muted)">아는 것</text>
          <text x="470" y="40" fontSize="13" fontWeight="700" textAnchor="middle" fill="var(--ink)">2단계 · 폰의 인증 코드</text>
          <text x="470" y="74" fontSize="12" textAnchor="middle" fill="var(--muted)">가진 것</text>
          <rect x="36" y="86" width="96" height="40" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="84" y="111" fontSize="13" textAnchor="middle" fill="var(--ink)">나</text>
          <rect x="544" y="86" width="84" height="40" rx="8" fill="var(--card)" stroke="var(--primary)" />
          <text x="586" y="111" fontSize="13" textAnchor="middle" fill="var(--ink)">내 계정</text>
          <line x1="132" y1="106" x2="536" y2="106" stroke="var(--teal)" strokeWidth="2" />
          <polyline points="528,100 538,106 528,112" fill="none" stroke="var(--teal)" strokeWidth="2" />
          <text x="270" y="99" fontSize="15" fontWeight="700" textAnchor="middle" fill="var(--teal)">✓</text>
          <text x="470" y="99" fontSize="15" fontWeight="700" textAnchor="middle" fill="var(--teal)">✓</text>
          <rect x="36" y="166" width="96" height="44" rx="8" fill="var(--card)" stroke="var(--rose)" />
          <text x="84" y="184" fontSize="13" textAnchor="middle" fill="var(--ink)">공격자</text>
          <text x="84" y="201" fontSize="12" textAnchor="middle" fill="var(--muted)">훔친 비밀번호</text>
          <line x1="132" y1="188" x2="428" y2="188" stroke="var(--rose)" strokeWidth="2" />
          <text x="270" y="181" fontSize="15" fontWeight="700" textAnchor="middle" fill="var(--amber)">✓</text>
          <line x1="434" y1="170" x2="434" y2="206" stroke="var(--rose)" strokeWidth="4" strokeLinecap="round" />
          <text x="456" y="193" fontSize="16" fontWeight="700" textAnchor="middle" fill="var(--rose)">✕</text>
          <text x="470" y="238" fontSize="12" textAnchor="middle" fill="var(--rose)">폰의 코드가 없어 여기서 막힘!</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 비밀번호(아는 것)가 털려도, 내 폰의 코드(가진 것)가 없는 공격자는 2단계에서 막혀요</p>
        <p>
          "매번 코드 치기 귀찮은데요"가 솔직한 마음이죠. 하지만 대부분의 서비스는
          <strong> 자주 쓰는 기기를 기억</strong>해서 2FA를 매일 묻지 않아요. 실제 체감은
          "새 기기에서 로그인할 때 한 번 더" 정도인데, 얻는 건 <strong>비밀번호 유출을
          무력화하는 방패</strong>입니다. 세상에서 가성비가 가장 좋은 보안 습관이에요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에
          로그인 → 우상단 프로필 → <span className="kbd">설정</span> →
          <span className="kbd">보안</span>에서 <strong>2단계 인증(TOTP) 등록</strong>을 켜 보세요.
          폰에 인증 앱을 설치하고 QR을 찍으면 끝 — 이때 함께 발급되는
          <strong> 복구 코드</strong>는 폰을 잃어버렸을 때의 비상열쇠니 안전한 곳에 적어 두기!
          개인 이메일 계정에도 오늘 켜는 것을 강력 추천해요.
        </div>
      </Section>

      <Section n={7} title="회사 보안 수칙과 연결" sub="수습 가이드 A7이 잔소리가 아닌 이유">
        <p>
          여기까지 배웠다면, 수습 가이드 <strong>A7 보안 수칙</strong>이 왜 그렇게 쓰여
          있는지 전부 설명할 수 있어요. 규칙을 외우는 것과 <strong>이유를 아는 것</strong>은
          완전히 다릅니다 — 이유를 알면 규칙에 없는 새로운 상황에서도 스스로 판단할 수 있거든요.
        </p>
        <Code>{CODE_COMPANY}</Code>
        <p>
          하나만 더 — 보안 사고에서 가장 위험한 건 사고 자체보다 <strong>숨기는 것</strong>이에요.
          이상한 링크를 눌러 버렸거나, 비밀번호를 입력하고 나서 "어? 뭔가 이상한데" 싶으면
          <strong> 그 즉시 멘토나 관리자에게 알리는 게 정답</strong>입니다. 빨리 알리면
          비밀번호 변경·세션 차단으로 몇 분 만에 막을 수 있는 일이, 숨기면 도미노가 돼요.
          어썸데브에서 "보고했다"고 혼나는 일은 없습니다. 반대로 그게 수습이 보여줄 수 있는
          가장 프로다운 행동이에요.
        </p>
        <div className="warn">
          <b>회사 계정 = 개인 계정과 분리.</b> 사내 Gitea·AWS·DB 비밀번호를 개인 사이트
          비밀번호와 같게 쓰는 순간, 섹션 5의 도미노가 <strong>회사 전체</strong>로
          확장됩니다. 입사 첫 주에 받은 초기 비밀번호를 아직 안 바꿨다면 지금이 바로 그때!
        </div>
      </Section>

      <Section n={8} title="정리 퀴즈 — 셀프 체크 5문항" sub="설명할 수 있어야 아는 것">
        <Code>{CODE_QUIZ}</Code>
        <div className="tip">
          <b>공부 팁</b> 답을 종이에 쓰지 말고 <strong>옆 사람에게 말로 설명</strong>해 보세요.
          비유("벽 없는 복도", "가짜 우체부", "도미노")를 들어 설명할 수 있으면 진짜 이해한
          거예요. 막히는 문항은 해당 섹션으로 돌아가 "직접 확인해 보기"를 한 번 더!
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🔐 여기까지 왔다면</h3>
          <p className="muted">
            전파가 데이터를 나르는 원리부터 WPA3 자물쇠, 중간자 공격과 HTTPS·VPN 방패,
            피싱 감별 4단계, 비밀번호 도미노와 2단계 인증, 그리고 A7 수칙의 '이유'까지 —
            이제 여러분은 규칙을 <strong>따르는</strong> 사람이 아니라 <strong>이해하고 지키는</strong> 사람이에요.
            데이터가 달리는 길 자체가 궁금해졌다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스로,
            오늘 배운 습관은 <strong>Gitea 2FA 켜기 + 비밀번호 checkup 돌리기</strong> 두 가지
            과제로 바로 실천해 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
