// 이 파일이 하는 일: "데스크탑 조립하기" 코스 — 부품 고르기부터 첫 부팅, OS 설치까지
// 조립 전 과정을 초보자 눈높이로 안내하는 정적 페이지.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip, warn 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.

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

// 텍스트 다이어그램·표 — JSX 안에서 중괄호/백틱이 깨지지 않게 문자열로 먼저 만들어 둔다.
const CODE_COMPAT = `호환성 3대 체크 — 이것만 맞으면 큰 사고는 없어요

① CPU 소켓 ↔ 메인보드 소켓
   인텔 예)  LGA1700 CPU  ↔  LGA1700 보드   ✅
             LGA1700 CPU  ↔  AM5 보드       ❌ (아예 안 꽂혀요)
   → CPU와 보드는 "같은 소켓 이름"끼리만 결혼할 수 있어요.

② RAM 규격
   DDR5 보드에는 DDR5만, DDR4 보드에는 DDR4만.
   (홈 파인 위치가 달라서 물리적으로도 안 들어가요)

③ 파워(PSU) 용량
   부품 전체 소비전력 합계 × 1.5배 정도 여유를 두는 게 국룰.
   예) CPU 125W + GPU 220W + 기타 100W ≈ 445W → 700W 파워 추천`;

const CODE_BUDGET = `용도별 예산 배분 감각 (총 예산을 어디에 몰아줄까?)

              CPU   RAM   GPU        비고
개발용 PC     ★★★  ★★★  ★          컴파일·IDE·도커가 CPU·RAM을 먹어요
게임용 PC     ★★    ★★    ★★★      화면을 그리는 건 GPU의 일
영상편집 PC   ★★★  ★★★  ★★        CPU+RAM+GPU 골고루, SSD도 크게
사무용 PC     ★      ★      내장     인터넷·문서엔 내장그래픽으로 충분

→ "비싼 부품 = 좋은 PC"가 아니라, 용도에 맞는 배분이 좋은 PC예요.`;

const CODE_BOOT_CHECK = `화면이 안 나올 때 점검 순서 (위에서부터 하나씩!)

1) 전원 확인
   - 파워 뒷면 스위치가 I 인가? (O는 꺼짐!)
   - 콘센트·케이블 꽂혔나? 케이스 전원 버튼 눌렀을 때 팬이 도나?

2) 팬은 도는데 화면이 안 나온다?
   - RAM을 뽑았다가 "딸깍" 소리 나게 다시 장착 (원인 1위!)
   - RAM이 2개면 하나만 꽂고 부팅 시도

3) 그래도 안 나온다?
   - 모니터 케이블이 그래픽카드 포트에 꽂혔는지 확인
   - 다른 케이블(HDMI ↔ DP)로 바꿔서 시도
   - CPU 보조전원(8핀), 그래픽카드 보조전원 꽂혔나 재확인`;

const CODE_OS_FLOW = `OS 설치 큰 흐름 (자세한 건 다음 기회에 — 감만 잡아요)

① 다른 PC에서 "부팅 USB" 만들기
   Microsoft 홈페이지 → "미디어 생성 도구" 다운로드 → USB(8GB+)에 굽기

② 새 PC에 USB 꽂고 켜기 → BIOS에서 부팅 순서를 USB 먼저로

③ 윈도우 설치 화면 따라가기
   설치할 디스크 선택(새 SSD) → 20~30분 대기 → 재부팅

④ 드라이버 설치
   요즘 윈도우는 대부분 자동으로 잡아줘요.
   그래픽카드 드라이버(NVIDIA/AMD 홈페이지)만 직접 설치하면 체감이 확 달라져요.

⑤ 윈도우 업데이트 한 바퀴 돌리면 끝!`;

const CODE_UPGRADE = `가상 업그레이드 계획 예시 (이런 식으로 정리해 보세요)

내 PC 사양:  i5-9400 / RAM 8GB / SSD 256GB / 내장그래픽
주 용도:     개발 공부 (IntelliJ + Docker + 크롬 탭 20개)

증상:        IntelliJ 켜고 도커 띄우면 버벅임

1순위: RAM 8GB → 32GB    이유) 개발 도구는 메모리 대식가.
                              가장 싸고 체감 큰 업그레이드.
2순위: SSD 256GB → 1TB   이유) 프로젝트·도커 이미지가 금방 참.
3순위: CPU               이유) 보드 소켓 확인 필수 — 소켓이 다르면
                              보드까지 갈아야 해서 사실상 새 PC.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. props만 바꿔 재사용.
function Sec({ 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: '준비물과 안전' },
  { n: 3, label: '조립 순서' },
  { n: 4, label: '자주 하는 실수' },
  { n: 5, label: '첫 부팅' },
  { n: 6, label: 'OS 설치' },
  { n: 7, label: '직접 해보기' },
];

export default function AssemblyPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 뭘 다루는지 한눈에 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>데스크탑 조립하기<br />— 두려움이 사라지는 순간</h1>
        <p>
          조립을 한 번이라도 해보면 컴퓨터는 더 이상 <strong>블랙박스</strong>가 아니에요.
          "느려졌는데 뭘 바꾸지?", "부팅이 안 되는데 어디부터 보지?" 같은 질문에
          스스로 답할 수 있게 됩니다. 사실 조립은 <strong>어른용 레고</strong>예요 —
          들어갈 곳에만 들어가게 만들어져 있어서, 순서만 알면 누구나 할 수 있어요.
        </p>
        <div className="chip-row">
          <span className="chip">소요 50분</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>

      <Sec n={1} title="부품 고르기 — 호환성이 전부다" sub="비싼 부품보다 '맞는' 부품">
        <p>
          부품 선택에서 실수하면 조립 자체가 불가능해요. 다행히 체크할 건 딱 세 가지입니다.
          퍼즐 조각처럼, 모양이 맞아야 끼울 수 있어요.
        </p>
        <Code>{CODE_COMPAT}</Code>
        <p>
          그다음은 <strong>예산 배분</strong>이에요. 같은 100만 원이라도 용도에 따라
          어디에 돈을 쓸지가 달라집니다.
        </p>
        <Code>{CODE_BUDGET}</Code>
        <div className="tip">
          <b>견적 사이트를 활용하세요</b> — 다나와 등 견적 사이트에서 부품을 담으면
          <strong> 호환성 경고</strong>를 자동으로 띄워줘요. 최종 주문 전에 견적 사이트에
          한 번 담아보는 습관만 들여도 "안 꽂히는 부품" 사고는 거의 막을 수 있어요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> — 견적 사이트에서 "개발 공부용 100만 원 PC"를 가상으로
          견적 내 보세요. CPU 소켓과 보드 소켓이 같은지, 파워 용량이 넉넉한지 스스로 체크!
        </div>
      </Sec>

      <Sec n={2} title="준비물과 안전" sub="드라이버 하나면 충분, 대신 정전기 조심">
        <ol className="olist">
          <li><strong>십자 드라이버 1개</strong> — 자성(자석) 있는 게 편해요. 나사를 케이스 틈에 떨어뜨려도 건질 수 있거든요. 이게 준비물의 거의 전부입니다.</li>
          <li><strong>밝고 넓은 곳</strong> — 책상 위를 싹 치우고 시작하세요. 나사와 케이블 종류가 많아서, 어두우면 뭐가 뭔지 안 보여요.</li>
          <li><strong>부품 상자는 버리지 말기</strong> — 초기 불량 교환 때 필요해요.</li>
        </ol>
        <div className="warn">
          <b>정전기가 왜 위험한가요?</b> 겨울에 문고리 잡을 때 "찌릿" 하죠? 그 순간
          수천 볼트가 흘러요. 사람은 따끔하고 말지만, CPU나 메인보드의 미세 회로엔
          <strong> 벼락</strong>이나 마찬가지예요. 부품을 만지기 전에 <strong>케이스의 금속 부분이나
          철제 책상 다리를 한 번 만져서</strong> 몸의 정전기를 흘려보내세요. 카펫 위에서
          양말 신고 조립하는 건 금지!
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> — 지금 주변에서 정전기를 방전할 수 있는 금속 물체를
          찾아보세요. 조립 전 "금속 터치"를 습관으로 만들면 평생 안전해요.
        </div>
      </Sec>

      <Sec n={3} title="조립 순서 — 표준 9단계" sub="이 코스의 핵심! 순서에는 이유가 있어요">
        <p>
          왜 순서가 중요하냐면, <strong>케이스에 넣기 전이 훨씬 작업하기 편하기 때문</strong>이에요.
          메인보드를 책상 위(보드 상자 위가 딱 좋아요)에 두고 ①~④를 먼저 끝냅니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 280" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="조립 순서 9단계 플로우: 케이스 밖에서 CPU, 쿨러, RAM, SSD를 먼저 장착하고, 케이스 안에서 보드 고정, 파워, 그래픽카드, 전면 패널 커넥터, 선정리 순으로 진행">
          <rect x="16" y="16" width="608" height="110" rx="10" fill="none" stroke="var(--line)" strokeDasharray="6 4" />
          <text x="32" y="38" fontSize="12.5" fontWeight="600" fill="var(--muted)">케이스 밖 — 메인보드를 책상에 두고</text>
          <rect x="32" y="52" width="120" height="52" rx="8" fill="var(--card)" stroke="var(--primary)" />
          <text x="92" y="74" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">① CPU 장착</text>
          <text x="92" y="92" fontSize="12" fill="var(--muted)" textAnchor="middle">삼각형 맞춰 살짝</text>
          <rect x="182" y="52" width="120" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="242" y="74" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">② 쿨러+구리스</text>
          <text x="242" y="92" fontSize="12" fill="var(--muted)" textAnchor="middle">콩알만큼만</text>
          <rect x="332" y="52" width="120" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="392" y="74" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">③ RAM</text>
          <text x="392" y="92" fontSize="12" fill="var(--muted)" textAnchor="middle">"딸깍" 소리까지</text>
          <rect x="482" y="52" width="120" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="542" y="74" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">④ M.2 SSD</text>
          <text x="542" y="92" fontSize="12" fill="var(--muted)" textAnchor="middle">나사 하나 고정</text>
          <line x1="156" y1="78" x2="172" y2="78" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M172 73 L180 78 L172 83 Z" fill="var(--muted)" />
          <line x1="306" y1="78" x2="322" y2="78" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M322 73 L330 78 L322 83 Z" fill="var(--muted)" />
          <line x1="456" y1="78" x2="472" y2="78" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M472 73 L480 78 L472 83 Z" fill="var(--muted)" />
          <polyline points="542,104 542,138 80,138 80,172" fill="none" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          <path d="M74 172 L80 182 L86 172 Z" fill="var(--primary)" />
          <rect x="16" y="150" width="608" height="110" rx="10" fill="none" stroke="var(--line)" strokeDasharray="6 4" />
          <text x="32" y="172" fontSize="12.5" fontWeight="600" fill="var(--muted)">케이스 안 — 보드를 케이스에 넣은 뒤</text>
          <rect x="30" y="186" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="80" y="208" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">⑤ 보드 고정</text>
          <text x="80" y="226" fontSize="12" fill="var(--muted)" textAnchor="middle">케이스에 나사</text>
          <rect x="150" y="186" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="200" y="208" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">⑥ 파워</text>
          <text x="200" y="226" fontSize="12" fill="var(--muted)" textAnchor="middle">24핀+8핀</text>
          <rect x="270" y="186" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320" y="208" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">⑦ GPU</text>
          <text x="320" y="226" fontSize="12" fill="var(--muted)" textAnchor="middle">보조전원도!</text>
          <rect x="390" y="186" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--amber)" />
          <text x="440" y="208" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">⑧ 커넥터</text>
          <text x="440" y="226" fontSize="12" fill="var(--muted)" textAnchor="middle">전면 패널 핀</text>
          <rect x="510" y="186" width="100" height="52" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="560" y="208" fontSize="14" fontWeight="600" fill="var(--ink)" textAnchor="middle">⑨ 선정리</text>
          <text x="560" y="226" fontSize="12" fill="var(--muted)" textAnchor="middle">공기 흐름 확보</text>
          <line x1="134" y1="212" x2="140" y2="212" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M140 207 L148 212 L140 217 Z" fill="var(--muted)" />
          <line x1="254" y1="212" x2="260" y2="212" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M260 207 L268 212 L260 217 Z" fill="var(--muted)" />
          <line x1="374" y1="212" x2="380" y2="212" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M380 207 L388 212 L380 217 Z" fill="var(--muted)" />
          <line x1="494" y1="212" x2="500" y2="212" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M500 207 L508 212 L500 217 Z" fill="var(--muted)" />
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 표준 9단계 조립 순서 — 케이스 밖에서 ①~④를 끝내고, 케이스 안에서 ⑤~⑨를 진행해요</p>
        <ol className="olist">
          <li>
            <strong>메인보드에 CPU 장착</strong> — 소켓 레버를 열고, CPU 모서리의
            <strong> 삼각형 표시</strong>를 소켓의 삼각형과 맞춰 살포시 올려놓기.
            <strong> 절대 힘주지 마세요</strong> — 방향이 맞으면 그냥 안착돼요.
          </li>
          <li>
            <strong>쿨러 + 서멀구리스</strong> — CPU 위에 구리스를 콩알만큼(쌀 한 톨~완두콩 사이).
            쿨러를 눌러 고정하면 알아서 퍼져요. 너무 많이 바르면 옆으로 새요.
          </li>
          <li>
            <strong>RAM 장착</strong> — 홈 위치를 맞추고 양쪽 끝을 <strong>"딸깍" 소리가 날 때까지</strong> 꾹.
            생각보다 힘이 들어가요. 딸깍 안 났으면 안 꽂힌 거예요.
          </li>
          <li>
            <strong>M.2 SSD</strong> — 껌 같이 생긴 SSD를 슬롯에 비스듬히 꽂고, 반대쪽을 눌러 작은 나사 하나로 고정. 끝.
          </li>
          <li>
            <strong>케이스에 메인보드 고정</strong> — 케이스에 스탠드오프(받침 나사)가 제 위치에 있는지 확인하고,
            뒷면 I/O 패널 방향을 맞춰 나사로 고정해요.
          </li>
          <li>
            <strong>파워 장착 + 케이블</strong> — 파워를 케이스에 고정하고, 24핀(보드 메인)과
            <strong> CPU 보조전원 8핀</strong>(보드 왼쪽 위)을 꽂아요. 8핀을 빼먹는 사람이 정말 많아요!
          </li>
          <li>
            <strong>(외장) 그래픽카드</strong> — PCIe 슬롯에 딸깍 소리 나게 장착하고, 카드에 보조전원
            단자가 있으면 파워 케이블(PCIe 6+2핀)도 꽂아요.
          </li>
          <li>
            <strong>전면 패널 커넥터</strong> — 케이스의 전원 버튼·LED에서 나온 아주 작은 핀들
            (<span className="icode">PWR_SW</span>, <span className="icode">RESET_SW</span>,
            <span className="icode">HDD_LED</span>...)을 보드 오른쪽 아래 구석에 하나하나 꽂아요.
          </li>
          <li>
            <strong>선정리</strong> — 케이블을 케이스 뒷면 공간으로 넘기고 케이블타이로 묶기.
            예쁘라고 하는 게 아니라 <strong>공기 흐름(=냉각)</strong>을 위해서예요.
          </li>
        </ol>
        <div className="tip">
          <b>⑧이 제일 짜증나는 게 정상이에요</b> — 전면 패널 커넥터는 조립 전체에서
          가장 작고, 가장 글씨가 안 보이고, 가장 손이 안 들어가는 부분이에요.
          <strong> 메인보드 설명서의 핀 배치도</strong>를 펴놓고, 휴대폰 손전등 켜고 천천히.
          전문가도 여기서 설명서 봐요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> — 유튜브에서 "PC 조립" 영상을 하나 골라, 위 9단계 순서와
          같은지 비교하며 보세요. 순서가 조금 다르다면 왜 다른지 생각해 보는 것도 좋은 공부예요.
        </div>
      </Sec>

      <Sec n={4} title="초보가 자주 하는 실수" sub="미리 알면 100% 피할 수 있어요">
        <div className="warn">
          <b>CPU 핀 휨</b> — CPU 장착 때 방향이 안 맞는데 힘으로 누르면 소켓 핀이 휘어요.
          핀 하나에 몇십만 원이 날아갑니다. <strong>삼각형 표시 확인 → 살포시</strong>, 이 두 가지만 기억하세요.
        </div>
        <div className="warn">
          <b>쿨러 전원(팬 케이블) 안 꽂음</b> — 쿨러를 물리적으로 달아놓고 팬 케이블을
          보드의 <span className="icode">CPU_FAN</span>에 안 꽂는 실수. 부팅은 되는데
          몇 분 뒤 CPU가 과열로 꺼져요.
        </div>
        <div className="warn">
          <b>RAM 덜 꽂힘 — 부팅 안 되는 원인 1위!</b> 겉보기엔 꽂힌 것 같은데 한쪽이 덜 들어간 상태.
          화면이 안 나오면 일단 RAM부터 뽑았다가 "딸깍"까지 다시 꽂아보세요. 이걸로 해결되는 경우가 절반이에요.
        </div>
        <div className="warn">
          <b>파워 뒷면 스위치 O/I</b> — 파워 뒷면 스위치에서 <strong>I가 켜짐, O가 꺼짐</strong>이에요
          (이진수의 1과 0!). "전원 버튼 눌러도 반응이 없어요"의 단골 범인.
        </div>
        <div className="warn">
          <b>모니터를 내장 포트에 꽂는 실수</b> — 외장 그래픽카드가 있으면 화면은
          <strong> 그래픽카드의 포트</strong>(케이스 아래쪽 가로 방향)에서 나와요.
          메인보드의 포트(위쪽)에 꽂으면 검은 화면만 나옵니다.
        </div>
      </Sec>

      <Sec n={5} title="첫 부팅과 확인" sub="화면에 뭐라도 나오면 90% 성공">
        <p>
          전원 버튼을 누르는 순간이 제일 떨려요. 화면이 안 나와도 당황하지 마세요 —
          대부분 아래 순서로 점검하면 해결됩니다.
        </p>
        <Code>{CODE_BOOT_CHECK}</Code>
        <p>
          화면이 나오면 <strong>BIOS</strong>에 들어가 부품이 제대로 인식됐는지 확인해요.
          부팅 직후 <span className="kbd">Del</span> 키(보드에 따라 <span className="kbd">F2</span>)를
          연타하면 들어갈 수 있어요.
        </p>
        <ol className="olist">
          <li><strong>CPU</strong> — 내가 산 모델명이 맞는지</li>
          <li><strong>RAM</strong> — 용량이 전부 잡혔는지 (16GB 꽂았는데 8GB만 보이면 하나가 덜 꽂힌 것!)</li>
          <li><strong>SSD</strong> — 저장 장치 목록에 보이는지</li>
        </ol>
        <div className="tip">
          <b>직접 확인해 보기</b> — 조립 안 해도 할 수 있어요! 지금 쓰는 PC를 재부팅하면서
          BIOS에 들어가 보세요. 내 PC의 CPU·RAM이 어떻게 표시되는지 구경만 하고,
          <strong> 설정은 바꾸지 말고</strong> 저장 없이 나오기(<span className="kbd">Esc</span> →
          Discard)를 해보는 것까지가 미션이에요.
        </div>
      </Sec>

      <Sec n={6} title="조립 후: OS 설치 개요" sub="하드웨어에 영혼 불어넣기">
        <p>
          조립이 끝난 PC는 아직 <strong>몸만 있고 영혼이 없는 상태</strong>예요.
          운영체제(OS)를 설치해야 비로소 "컴퓨터"가 됩니다. 여기선 큰 흐름만 잡아둘게요.
        </p>
        <Code>{CODE_OS_FLOW}</Code>
        <div className="tip">
          <b>부팅 USB는 미리 만들어 두세요</b> — 새 PC는 아직 인터넷도 브라우저도 없어요.
          부팅 USB는 반드시 <strong>지금 쓰는 다른 PC에서</strong> 미리 만들어야 합니다.
        </div>
      </Sec>

      <Sec n={7} title="직접 확인해 보기 — 가상 업그레이드 계획" sub="이 코스의 졸업 과제">
        <p>
          진짜 조립은 부품이 있어야 하지만, <strong>업그레이드 계획</strong>은 지금 바로 세울 수 있어요.
          회사나 집 PC의 사양을 확인하고(<span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span> →
          작업 관리자 → <span className="kbd">성능</span> 탭), 아래처럼 정리해 보세요.
        </p>
        <Code>{CODE_UPGRADE}</Code>
        <ol className="olist">
          <li>내 PC의 CPU·RAM·저장장치·그래픽 사양을 적는다</li>
          <li>내 주 용도에서 <strong>가장 병목인 부품</strong>이 뭔지 추측한다 (작업 관리자에서 뭐가 늘 100%인가?)</li>
          <li>바꿀 부품의 <strong>우선순위와 이유</strong>를 1~3순위로 적는다</li>
          <li>1순위 부품의 호환성(소켓·규격·파워 용량)을 견적 사이트에서 확인한다</li>
        </ol>
        <div className="tip">
          <b>멘토와 이야기해 보세요</b> — 완성한 업그레이드 계획을 멘토에게 보여주고
          "왜 이 순서로 골랐는지" 설명해 보세요. 정답을 맞히는 것보다
          <strong> 이유를 설명하는 과정</strong>이 진짜 공부예요.
        </div>
      </Sec>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🖥️ 이제 컴퓨터가 블랙박스가 아니죠?</h3>
          <p className="muted">
            부품이 어떻게 연결되는지 알았으니, 다음은 <strong>컴퓨터끼리</strong> 어떻게 연결되는지 차례예요.
            방금 조립한 PC가 어떻게 다른 컴퓨터와 대화하는지 —{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서 이어집니다.
          </p>
        </div>
      </div>
    </div>
  );
}
