// 이 파일이 하는 일: "노트북과 주변기기 고르기" 코스 — 개발자의 첫 장비 선택을
// 노트북 vs 데스크탑 고민부터 스펙표 읽는 법, 모니터·키보드·USB·독까지 7개 섹션으로 안내하는 정적 학습 페이지.
// (노트북 vs 데스크탑 → 스펙표 읽기 → 모니터 → 키보드 → 듀얼 모니터 → USB 규격 → 허브·독 → 정리)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 표·다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_LAPTOP_VS_DESKTOP = `노트북 vs 데스크탑 — 개발자 관점 비교

항목          노트북                데스크탑
──────────────────────────────────────────────────
휴대성        어디서든 개발 OK       책상에 고정
성능/가격     같은 돈이면 불리        같은 돈이면 유리
업그레이드    거의 불가(램 온보드!)   램·SSD·GPU 교체 자유
발열/소음     좁아서 뜨겁고 시끄러움  쿨링 여유, 조용
화면/자세     작고 목이 굽음         모니터·의자 자유 배치

→ 실무 개발자의 흔한 정답: "노트북 + 자리에선 독으로
  큰 모니터·키보드에 연결" — 두 세계의 장점만 취하기.`;

const CODE_SPEC_SHEET = `노트북 스펙표 예시 — 이렇게 읽어요

CPU     : 8코어 / 16스레드, 접미사 U or H (아래 참고!)
RAM     : 16GB LPDDR5 (온보드)   ← "온보드" 단어를 찾아라!
저장장치 : 512GB NVMe SSD        ← HDD면 개발용으론 탈락
화면     : 14" 1920x1200 IPS
무게     : 1.2kg / 배터리 70Wh

CPU 접미사 해독법 (모델명 끝 알파벳):
  U = Ultra-low power. 저전력·저발열. 배터리 오래감.
      가볍게 코딩+문서엔 충분, 무거운 빌드는 느림.
  H = High performance. 고성능·고발열. 빌드·Docker 빠름.
      대신 무겁고 배터리 빨리 닳음.
  → "들고 다니며 수업+코딩" = U도 OK
    "Docker 여러 개 + 무거운 IDE" = H 추천`;

const CODE_RAM_ONBOARD = `램 "온보드"가 왜 함정인가

[교체 가능 램]  메인보드 ── [슬롯] ←→ 램 카드 꽂았다 뺐다 OK
[온보드 램]     메인보드에 램 칩이 납땜 → 영원히 그 용량

개발자 램 체감 (2026 기준):
  8GB  → IDE + 브라우저만으로 허덕임. 비추천.
  16GB → IDE + 브라우저 + Docker 컨테이너 몇 개. 최소선.
  32GB → 로컬에 PostgreSQL·백엔드·프론트 다 띄워도 여유.

→ 온보드 16GB를 사면 3년 뒤에도 16GB.
  "나중에 추가하지 뭐"가 불가능하니 처음부터 여유 있게!`;

const CODE_MONITOR = `모니터 스펙표 3대장

① 해상도 — 화면에 찍히는 점(픽셀)의 개수
   FHD  1920x1080   가장 흔함. 코드 두 파일 나란히는 빠듯
   QHD  2560x1440   개발자 인기. 코드+브라우저 여유롭게
   4K   3840x2160   글자 또렷. 단, 배율(스케일링) 설정 필요

② 주사율(Hz) — 1초에 화면을 몇 번 새로 그리는가
   60Hz  사무·코딩 기본. 개발엔 충분
   144Hz+ 게임용. 스크롤이 부드럽긴 하지만 코드가 빨리
          짜지진 않아요(!)

③ 패널 — 화면을 만드는 방식
   IPS  색 정확, 어느 각도에서 봐도 균일 → 개발·디자인 추천
   VA   명암비 좋음(까만 게 진짜 까맣다), 곡면 많음 → 영화·게임
   TN   응답속도만 빠르고 색·시야각 나쁨 → 요즘은 비추천`;

const CODE_PIVOT = `개발자의 비밀 무기 — 세로 회전(피벗, Pivot)

 [가로 모니터]                [세로 모니터]
┌───────────────┐             ┌───────┐
│ 코드 40줄쯤    │             │ 코드   │
│ 보이다가 끝    │      →      │ 100줄+ │
└───────────────┘             │ 한눈에!│
                              │ 문서·   │
                              │ 로그도  │
                              └───────┘

코드는 옆으로 길지 않고 아래로 길어요.
스탠드가 "피벗 지원"인 모니터를 세로로 돌리면
긴 함수·로그·문서를 스크롤 없이 통째로 봅니다.
듀얼 모니터라면 하나는 가로(메인) + 하나는 세로(코드/로그)가 국룰.`;

const CODE_KEYBOARD = `키보드 — 배열과 축

배열(키 개수):
  풀배열(104키)   숫자패드 있음. 넓은 책상용
  텐키리스(87키)  숫자패드 삭제. 마우스가 가까워져 어깨 편함
  60~75%          방향키·F열까지 압축. 휴대 좋지만 조합키 암기 필요

기계식 키보드의 "축" = 키 하나하나 속 스위치 종류:
  청축  "찰칵!" 소리 큼. 타건감 최고, 사무실에선 민폐
  갈축  적당한 걸림 + 적당한 소리. 무난한 첫 축
  적축  걸림 없이 부드럽고 조용한 편. 장시간 타이핑
  저소음 적축  도서관급 정숙. 사무실 최강

→ 개발자는 하루 수천 번 키를 눌러요. 의자·키보드는
  "몸이 닿는 시간"이 가장 긴 장비라 투자 가치가 큽니다.`;

const CODE_USB = `USB — 이름이 꼬여서 생긴 대혼란 정리

헷갈림의 원인: "모양"과 "속도"는 별개다!

① 모양(커넥터):
   USB-A  납작한 직사각형. 뒤집으면 안 들어가는 그거
   USB-C  타원형. 위아래 구분 없음. 요즘 표준

② 속도(규격):
   USB 2.0        480Mbps   마우스·키보드용
   USB 3.x Gen1     5Gbps   보통 파란색 단자
   USB 3.x Gen2    10Gbps
   USB4          40Gbps~

③ 함정: USB-C 모양이라고 다 빠른 게 아니다!
   C 모양인데 속도는 2.0인 저가 케이블도 많아요.
   충전만 되고 데이터·영상은 안 되는 C 케이블도 있고요.

→ 확인법: 제품 스펙에서 "Gen" 숫자와
  "영상 출력(DP Alt Mode) 지원" 여부를 읽을 것.
  모양만 보고 사면 모니터가 안 켜지는 수가 있어요.`;

const CODE_DOCK = `허브 vs 독 — 문어발의 두 등급

[USB 허브]  = 멀티탭
  노트북 C포트 1개 → A포트 몇 개 + HDMI 1개 정도로 분배
  전원 없이 노트북 전력을 나눠 씀. 가볍고 저렴.

[도킹 스테이션(독)] = 노트북의 "자리 기지"
  ┌─ 모니터 2대 (HDMI/DP)
  ├─ 유선 랜(RJ45)          독 ←C 케이블 1개→ 노트북
  ├─ 키보드·마우스 (USB-A)
  └─ 노트북 충전(전원 공급)까지!

  아침에 출근 → C 케이블 딱 1개 꽂으면
  모니터·랜·키보드·충전이 한 번에 연결.
  퇴근할 땐 1개만 뽑으면 끝. 이게 "노트북+독" 조합의 힘.`;

const CODE_CHECKLIST = `내 PC 스펙 직접 확인하기 (Windows)

# 방법 1 — 시스템 정보 창:
윈도우 키 → "시스템 정보" 검색 → 실행
  프로세서 항목에서 CPU 모델명 끝 알파벳(U/H) 찾기!

# 방법 2 — 작업 관리자:
Ctrl + Shift + Esc → [성능] 탭
  CPU: 코어/논리 프로세서 수
  메모리: 용량 + "슬롯 사용: 1/2" ← 2칸 중 1칸이면 증설 가능,
          "슬롯" 표기가 아예 없으면 온보드일 가능성!

# 방법 3 — 터미널에서:
윈도우 키 + R → cmd 입력 → 확인
systeminfo | findstr /C:"메모리"`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '노트북 vs 데스크탑' },
  { n: 2, label: '스펙표 읽기' },
  { n: 3, label: '모니터 고르기' },
  { n: 4, label: '키보드' },
  { n: 5, label: '듀얼 모니터' },
  { n: 6, label: 'USB 규격 정리' },
  { n: 7, label: '허브와 독' },
];

export default function PeripheralsPage() {
  return (
    <div>
      {/* 히어로: 장비는 개발자의 '작업 환경' — 스펙표를 읽을 줄 알면 광고에 안 속는다 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>노트북과 주변기기 고르기<br />— 스펙표가 읽히는 순간, 광고가 안 통한다</h1>
        <p>
          개발자에게 장비는 요리사의 칼과 같아요 — 매일 몇 시간씩 손과 눈이 닿는 도구니까,
          남의 추천이 아니라 <strong>스펙표를 스스로 읽고</strong> 고를 수 있어야 합니다.
          이 코스를 마치면 노트북 상세 페이지의 암호 같은 숫자들이 전부 한국어로 읽혀요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개</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="노트북 vs 데스크탑" sub="개발자는 어느 쪽? — 정답은 '섞어 쓰기'">
        <p>
          같은 가격이면 데스크탑이 성능은 늘 앞서요. 부품이 클수록 싸고, 발열 처리도
          쉬우니까요. 하지만 개발은 <strong>자리를 옮겨 다니며</strong> 하는 일이 많죠 —
          수업, 회의, 카페, 멘토 옆자리. 그래서 실무에선 노트북 파가 다수입니다.
        </p>
        <Code>{CODE_LAPTOP_VS_DESKTOP}</Code>
        <p>
          어썸데브에서도 개발자들은 노트북을 쓰되, 자리에서는 큰 모니터와 키보드에
          연결해 데스크탑처럼 씁니다. 어떻게 케이블 한 가닥으로 그게 되는지는
          마지막 <a href="#sec-7">7번 섹션(허브와 독)</a>에서 밝혀져요. 결국 이 코스 전체가
          "노트북 한 대를 데스크탑급 작업 환경으로 만드는 법" 이야기이기도 합니다.
        </p>
        <div className="tip">
          <b>생각해 보기</b> 서버는 어느 쪽일까요? 우리 플랫폼이 돌아가는 AWS EC2(서울)는
          사실 <strong>데스크탑의 극단</strong>이에요 — 휴대성을 0으로 만들고 성능·안정성에
          전부 투자한, 데이터센터에 붙박이로 사는 컴퓨터죠.
        </div>
      </Section>

      <Section n={2} title="노트북 스펙표 읽기" sub="U와 H, 그리고 '온보드'라는 세 글자">
        <p>
          노트북 상세 페이지의 스펙표는 외계어처럼 보이지만, 개발자가 볼 곳은 사실
          몇 군데 안 돼요. 특히 <strong>CPU 모델명 끝의 알파벳</strong>이 그 노트북의
          성격을 통째로 말해 줍니다.
        </p>
        <Code>{CODE_SPEC_SHEET}</Code>
        <p>
          그리고 램 칸에서 <strong>"온보드"</strong>라는 세 글자를 발견하면 긴장하세요.
          온보드는 램이 메인보드에 <strong>납땜</strong>되어 있다는 뜻 — 스티커처럼 붙였다
          떼는 게 아니라 문신처럼 새겨진 거라, 나중에 용량을 늘릴 수 없습니다.
        </p>
        <Code>{CODE_RAM_ONBOARD}</Code>
        <div className="warn">
          <b>가장 흔한 후회</b> "8GB로 아껴 사고 나중에 늘려야지" → 온보드라 증설 불가 →
          Docker로 PostgreSQL 하나 띄우는 순간 PC가 숨을 헐떡임. 저장장치(SSD)는 교체 가능한
          모델이 많지만 <strong>램은 산 날의 용량이 평생 용량</strong>인 경우가 많아요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> 지금 이 페이지를 보고 있는 PC의 스펙을 스스로 읽어 보세요.
          <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
          작업 관리자를 열고 <strong>성능 탭</strong>에서 CPU 이름(끝 알파벳!)과 메모리 용량,
          슬롯 표기를 확인하는 거예요. 아래 세 가지 방법 중 편한 걸로!
        </div>
        <Code>{CODE_CHECKLIST}</Code>
      </Section>

      <Section n={3} title="모니터 스펙 읽기" sub="해상도·주사율·패널 — 그리고 개발자는 세로로 돌린다">
        <p>
          모니터 광고는 숫자 잔치지만, 개발자가 볼 스펙은 세 가지로 정리돼요.
          해상도는 <strong>책상 크기</strong>(넓을수록 코드·브라우저를 많이 펼침),
          주사율은 <strong>페이지 넘기는 속도</strong>, 패널은 <strong>종이의 재질</strong>이라고
          생각하면 됩니다.
        </p>
        <Code>{CODE_MONITOR}</Code>
        <p>
          개발용 우선순위는 <strong>해상도 &gt; 패널(IPS) &gt; 주사율</strong>이에요.
          게임용과 정반대죠. 코드는 결국 글자라서, 글자가 많이·또렷하게 보이는 게 최고입니다.
        </p>
        <p>그리고 개발자만 아는 반전 기능이 하나 있어요 — 모니터를 90도로 돌리는 겁니다.</p>
        <Code>{CODE_PIVOT}</Code>
        <div className="tip">
          <b>알아 두기</b> 모니터 스탠드 스펙에서 <span className="icode">피벗(Pivot)</span>,
          <span className="icode">높낮이 조절</span>, <span className="icode">베사(VESA) 홀</span> —
          이 세 단어가 있으면 자세와 배치의 자유도가 확 올라가요. 패널 좋고 스탠드가 나쁜
          모니터보다, 베사 홀에 모니터 암을 다는 쪽이 목에는 이득일 때도 많습니다.
        </div>
      </Section>

      <Section n={4} title="키보드" sub="하루 수천 타 — 손이 닿는 시간이 가장 긴 장비">
        <p>
          개발자는 마우스보다 키보드와 보내는 시간이 압도적으로 길어요. 그래서 키보드는
          "취향의 영역"이 아니라 <strong>손목 건강과 타이핑 속도의 영역</strong>입니다.
          고를 때 보는 건 두 가지 — <strong>배열</strong>(키가 몇 개냐)과
          <strong> 축</strong>(눌리는 느낌이 어떠냐)이에요.
        </p>
        <Code>{CODE_KEYBOARD}</Code>
        <p>
          숫자패드를 안 쓴다면 <strong>텐키리스</strong>가 의외의 꿀팁이에요. 키보드가
          좁아진 만큼 마우스가 몸 가까이 오고, 어깨가 벌어지지 않아 장시간 코딩이 편해집니다.
          축은 글로 백날 읽어도 몰라요 — 매장이나 친구 키보드로 <strong>직접 눌러 보고</strong> 고르세요.
          다만 사무실·교실에서 청축은... 옆자리의 원망을 사기 딱 좋습니다.
        </p>
        <div className="warn">
          <b>화려함의 함정</b> RGB 조명이 번쩍인다고 코드가 빨리 짜지진 않아요.
          예산이 정해져 있다면 조명보다 <strong>축 취향과 손목 각도</strong>(팜레스트 포함)에
          먼저 쓰는 게 남는 장사입니다.
        </div>
      </Section>

      <Section n={5} title="듀얼 모니터의 생산성" sub="화면 전환(Alt+Tab)을 눈동자 이동으로 바꾸기">
        <p>
          개발은 본질적으로 <strong>여러 화면을 오가는 일</strong>이에요. 코드를 쓰면서
          브라우저로 결과를 확인하고, 문서를 읽으면서 터미널 로그를 지켜보죠. 모니터가
          한 대면 이 전환이 전부 <span className="kbd">Alt</span>+<span className="kbd">Tab</span> —
          요리하면서 냉장고 문을 매번 여닫는 셈이에요. 듀얼 모니터는 재료를 조리대에
          <strong> 전부 꺼내 놓고</strong> 요리하는 것과 같습니다.
        </p>
        <ol className="olist">
          <li><strong>메인 화면</strong>: 에디터(코드) — 시선이 가장 오래 머무는 정면에.</li>
          <li><strong>보조 화면</strong>: 브라우저(결과 확인)·문서·터미널 로그 — 곁눈질로 확인.</li>
          <li>여유가 되면 보조 화면을 <strong>세로(피벗)</strong>로 — 3번 섹션에서 배운 그 기능!</li>
        </ol>
        <svg className="diagram" viewBox="0 0 640 310" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="듀얼 모니터 배치 도해: 가로 메인 모니터에는 에디터, 세로로 피벗한 보조 모니터에는 브라우저와 로그를 두고 눈동자만 움직여 확인한다">
          <text x="180" y="56" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--primary)">메인 (가로)</text>
          <rect x="40" y="72" width="280" height="180" rx="10" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <line x1="60" y1="98" x2="240" y2="98" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <line x1="60" y1="118" x2="290" y2="118" stroke="var(--primary)" strokeWidth="5" strokeLinecap="round" />
          <line x1="76" y1="138" x2="250" y2="138" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <line x1="76" y1="158" x2="210" y2="158" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <text x="180" y="214" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">에디터 (코드)</text>
          <text x="180" y="236" textAnchor="middle" fontSize="12" fill="var(--muted)">시선이 가장 오래 머무는 곳</text>
          <rect x="168" y="252" width="24" height="24" fill="var(--line)" />
          <rect x="138" y="276" width="84" height="10" rx="5" fill="var(--line)" />
          <text x="515" y="32" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--teal)">보조 (세로 · 피벗)</text>
          <rect x="440" y="44" width="150" height="208" rx="10" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <line x1="456" y1="68" x2="560" y2="68" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <line x1="456" y1="86" x2="575" y2="86" stroke="var(--teal)" strokeWidth="5" strokeLinecap="round" />
          <line x1="456" y1="104" x2="540" y2="104" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <line x1="456" y1="122" x2="566" y2="122" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <line x1="456" y1="140" x2="520" y2="140" stroke="var(--muted)" strokeWidth="5" strokeLinecap="round" />
          <text x="515" y="182" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">브라우저 · 문서</text>
          <text x="515" y="200" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">터미널 로그</text>
          <text x="515" y="226" textAnchor="middle" fontSize="12" fill="var(--muted)">긴 로그도 한눈에</text>
          <rect x="503" y="252" width="24" height="24" fill="var(--line)" />
          <rect x="473" y="276" width="84" height="10" rx="5" fill="var(--line)" />
          <line x1="24" y1="286" x2="616" y2="286" stroke="var(--line)" strokeWidth="2" />
          <line x1="334" y1="160" x2="426" y2="160" stroke="var(--amber)" strokeWidth="2" />
          <polyline points="344,153 334,160 344,167" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="416,153 426,160 416,167" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <text x="380" y="142" textAnchor="middle" fontSize="12" fill="var(--amber)">Alt+Tab 대신</text>
          <text x="380" y="186" textAnchor="middle" fontSize="12" fill="var(--amber)">눈동자만 이동</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 듀얼 모니터 국룰 배치 — 가로 메인(에디터) + 세로 피벗 보조(브라우저·로그)</p>
        <p>
          프론트엔드 개발이라면 한쪽에 코드, 한쪽에 브라우저를 띄우고 저장할 때마다
          화면이 바뀌는 걸 <strong>고개 돌리지 않고</strong> 확인할 수 있어요. 이 "저장 → 결과가
          바로 보임" 루프가 짧아지는 것이 듀얼 모니터 생산성의 정체입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 모니터가 한 대여도 연습할 수 있어요! 브라우저에서 우리
          학습 플랫폼(edu.awesomedevapp.com)을 열고 <span className="kbd">윈도우 키</span>+
          <span className="kbd">←</span>를 눌러 화면 왼쪽 절반에 붙이고, 메모장(또는 에디터)을 열어
          <span className="kbd">윈도우 키</span>+<span className="kbd">→</span>로 오른쪽에 붙여 보세요.
          이 <strong>화면 분할</strong>이 듀얼 모니터의 축소판이에요. 왼쪽 글을 보며 오른쪽에
          요약을 적어 보면 — Alt+Tab이 사라진 세상이 얼마나 편한지 3분 만에 느껴집니다.
        </div>
      </Section>

      <Section n={6} title="USB 규격 정리" sub="C 모양이라고 다 같은 C가 아니다">
        <p>
          USB는 이름 정책이 여러 번 바뀌면서 개발자들도 헷갈리는 동네가 됐어요.
          딱 하나만 기억하면 안개가 걷힙니다 — <strong>"모양"과 "속도"는 완전히 별개</strong>라는 것.
          USB-C는 <strong>커넥터 모양</strong> 이름이고, USB 3.x니 USB4니 하는 건
          <strong> 속도 규격</strong> 이름이에요. 겉은 같은 타원 구멍인데 속도는 제각각일 수 있죠.
        </p>
        <Code>{CODE_USB}</Code>
        <p>
          비유하면 USB-C 커넥터는 <strong>도로의 폭</strong>이고 속도 규격은
          <strong> 제한 속도</strong>예요. 같은 왕복 2차선(같은 모양)이어도 어떤 길은 시속
          480(2.0), 어떤 길은 40,000(USB4)까지 달릴 수 있는 거죠. 케이블·포트·기기
          <strong> 셋 중 가장 느린 놈</strong>이 전체 속도를 정한다는 것도 함정 포인트!
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="USB 도해: 커넥터 모양은 USB-A와 USB-C 두 가지, 속도 규격은 USB 2.0부터 USB4까지 별개로 존재하며, C 모양이어도 속도는 2.0일 수 있다는 함정을 표시">
          <text x="320" y="30" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">① 모양(커넥터) — 겉모습</text>
          <rect x="90" y="52" width="150" height="50" rx="6" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="106" y="66" width="118" height="22" rx="3" fill="none" stroke="var(--muted)" strokeWidth="2" />
          <text x="165" y="124" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">USB-A</text>
          <text x="165" y="143" textAnchor="middle" fontSize="12" fill="var(--muted)">납작 직사각형 · 방향 있음</text>
          <rect x="400" y="58" width="150" height="38" rx="19" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <rect x="424" y="71" width="102" height="12" rx="6" fill="none" stroke="var(--muted)" strokeWidth="2" />
          <text x="475" y="124" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">USB-C</text>
          <text x="475" y="143" textAnchor="middle" fontSize="12" fill="var(--muted)">타원형 · 방향 없음 · 요즘 표준</text>
          <polyline points="475,100 475,156 125,156 125,266" fill="none" stroke="var(--rose)" strokeWidth="2" strokeDasharray="6 5" />
          <polyline points="119,257 125,267 131,257" fill="none" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <text x="300" y="174" textAnchor="middle" fontSize="12" fill="var(--rose)">함정! 겉은 C 모양인데 속은 2.0인 케이블도 있다</text>
          <text x="320" y="196" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">② 속도(규격) — 속사정</text>
          <rect x="70" y="275" width="110" height="25" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="205" y="250" width="110" height="50" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="340" y="225" width="110" height="75" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="475" y="200" width="110" height="100" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <line x1="50" y1="300" x2="606" y2="300" stroke="var(--line)" strokeWidth="2" />
          <polyline points="596,294 606,300 596,306" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <text x="125" y="322" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">USB 2.0</text>
          <text x="260" y="322" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">USB 3.x Gen1</text>
          <text x="395" y="322" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">USB 3.x Gen2</text>
          <text x="530" y="322" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--primary)">USB4</text>
          <text x="125" y="341" textAnchor="middle" fontSize="12" fill="var(--muted)">480Mbps</text>
          <text x="260" y="341" textAnchor="middle" fontSize="12" fill="var(--muted)">5Gbps</text>
          <text x="395" y="341" textAnchor="middle" fontSize="12" fill="var(--muted)">10Gbps</text>
          <text x="530" y="341" textAnchor="middle" fontSize="12" fill="var(--muted)">40Gbps~</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: USB의 '모양'과 '속도'는 별개 — C 모양이라도 속도는 2.0일 수 있다</p>
        <div className="warn">
          <b>실무에서 진짜 겪는 일</b> "독에 모니터를 꽂았는데 화면이 안 나와요" —
          범인은 십중팔구 <strong>충전 전용 C 케이블</strong>이에요. 겉모습은 똑같지만
          영상 신호(DP Alt Mode)를 못 나르는 케이블이 있습니다. 케이블을 살 땐 모양이 아니라
          <span className="icode">Gen 숫자</span>와 <span className="icode">영상 출력 지원</span>
          문구를 읽으세요.
        </div>
      </Section>

      <Section n={7} title="허브와 독" sub="케이블 한 가닥으로 자리에 '도킹'하기">
        <p>
          요즘 얇은 노트북은 포트가 C 두어 개뿐이라, 모니터·랜선·키보드·마우스를 다 꽂으려면
          구멍이 모자라요. 이걸 해결하는 물건이 <strong>허브</strong>와 <strong>독(도킹
          스테이션)</strong>입니다. 허브가 <strong>멀티탭</strong>이라면, 독은 우주선이
          정거장에 접속하듯 노트북이 자리에 <strong>도킹</strong>하는 기지예요.
        </p>
        <Code>{CODE_DOCK}</Code>
        <p>
          1번 섹션의 복선 회수 — "노트북인데 자리에선 데스크탑처럼"의 비밀이 바로 이거예요.
          독에 모니터 두 대·유선 랜·키보드·전원을 상시 연결해 두면, 출근해서 C 케이블
          <strong> 한 가닥</strong>만 꽂는 순간 완전한 데스크탑 환경이 됩니다. 유선 랜(RJ45)이
          되는 독이면 WiFi보다 안정적인 연결까지 덤 — 네트워크 코스에서 배운 그 랜선이
          여기서 다시 등장하죠.
        </p>
        <div className="tip">
          <b>고를 때 체크 3가지</b> ① 내 노트북 C포트가 <strong>영상 출력·충전(PD)을 지원</strong>하는지
          (노트북 스펙표 확인!) ② 독의 <strong>전원 공급 와트(W)</strong>가 내 노트북 충전기 이상인지
          ③ 연결할 <strong>모니터 개수·해상도</strong>를 독이 감당하는지. 6번 섹션에서 배운
          "모양 말고 스펙 읽기"가 여기서 그대로 쓰입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🖥️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 스펙표의 <strong>U/H 접미사</strong>와 <strong>온보드</strong>의 함정을 읽고,
            모니터는 <strong>해상도·패널·피벗</strong>으로 고르고, USB는 <strong>모양이 아니라
            규격</strong>으로 판단하고, 독으로 <strong>케이블 한 가닥 출근</strong>을 설계할 수
            있어요. 좋은 장비가 준비됐다면 그 위를 달릴 지식을 채울 차례 — 데이터가 어떻게
            이 장비들 사이를 여행하는지 궁금하다면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스로,
            바로 코드를 쓰고 싶다면 <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스로
            이어가 보세요. 그리고 오늘 배운 걸 써먹을 겸 — 내 PC 스펙을 정리해서 멘토에게
            공유하는 것을 이번 주 미니 과제로 추천합니다.
          </p>
        </div>
      </div>
    </div>
  );
}
