// 이 파일이 하는 일: "운영체제의 이해" 코스 — 컴퓨터를 켜는 순간부터
// 운영체제가 뒤에서 해주는 일들(자원 관리·프로세스·파일·보안)을 7개 섹션으로 안내하는 정적 학습 페이지.
// (OS의 역할 → 윈도우/맥/리눅스 → 프로세스와 멀티태스킹 → 부팅 과정 → 가상 메모리 → 업데이트 → 서버와 리눅스)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_OS_ROLE = `운영체제(OS) = 컴퓨터라는 건물의 '총괄 매니저'

        [카톡] [브라우저] [VS Code] [게임]   ← 앱(입주 손님들)
           │       │        │       │
      ┌────┴───────┴────────┴───────┴────┐
      │        운영체제 (매니저)          │  ← Windows, macOS, Linux
      └────┬───────┬────────┬───────┬────┘
           │       │        │       │
        [CPU]   [메모리]  [디스크] [네트워크]  ← 하드웨어(건물 시설)

매니저가 하는 4가지 큰 일:
1) 자원 관리  — CPU·메모리를 누구에게 얼마나 줄지 배분
2) 프로세스 관리 — 실행 중인 프로그램들을 만들고, 돌리고, 정리
3) 파일 관리  — 디스크의 0과 1을 '폴더와 파일'로 보이게 정리
4) 보안·권한  — "이 앱이 카메라를 써도 될까?" 허락을 관리`;

const CODE_OS_COMPARE = `세 가지 대표 OS — 어디서 만나게 될까?

OS        주로 쓰는 곳            어썸데브에서는?
──────────────────────────────────────────────────────
Windows   회사·학교 PC, 게임      여러분의 개발 PC 대부분
macOS     디자인·개발자 노트북    일부 개발자의 노트북
Linux     서버, 클라우드, 임베디드  AWS EC2 서버 전부!

공통점: 셋 다 위에서 배운 4가지 일(자원·프로세스·파일·보안)을 해요.
차이점: '누구를 위해 최적화됐나'가 달라요.
  Windows/macOS → 화면 앞의 '사람' 한 명이 편하게
  Linux         → 화면 없이 24시간 일하는 '프로그램들'이 안정적으로`;

const CODE_PROCESS = `프로그램 vs 프로세스 — 레시피와 요리 중인 냄비

프로그램 = 디스크에 저장된 레시피(파일). 가만히 있음.
프로세스 = 그 레시피로 지금 요리 중인 냄비. CPU와 메모리를 먹으며 살아 움직임.

크롬을 3개 창으로 띄우면?
  chrome.exe (프로그램 1개) → 프로세스 여러 개!

멀티태스킹의 비밀:
  CPU 코어 1개는 한 순간에 한 가지 일만 해요.
  대신 1초에 수천 번씩 프로세스를 갈아 끼우죠(문맥 교환).
  ┌────┬────┬────┬────┬────┐
  │카톡│크롬│음악│카톡│크롬│ ... ← 아주 잘게 쪼갠 시간 조각
  └────┴────┴────┴────┴────┘
  너무 빨라서 사람 눈에는 '동시에' 도는 것처럼 보입니다.
  (선생님 한 분이 질문하는 학생들 사이를 초고속으로 오가는 셈!)`;

const CODE_TASKMGR = `# 작업 관리자 여는 법 (셋 중 아무거나):
Ctrl + Shift + Esc          ← 가장 빠른 단축키
Ctrl + Alt + Del → 작업 관리자
작업 표시줄 우클릭 → 작업 관리자

# '프로세스' 탭에서 볼 것:
이름            CPU     메모리
──────────────────────────────
Google Chrome   4.2%   1,824MB   ← 창은 1개인데 프로세스는 수십 개!
Code            1.1%     512MB
System            0%      ...    ← OS 자신도 프로세스로 돌아요

# '성능' 탭에서 볼 것:
CPU 사용률 그래프, 코어 개수, 메모리 사용량 —
지금 이 순간 매니저(OS)가 자원을 어떻게 배분 중인지 실시간 중계입니다.`;

const CODE_BOOT = `전원 버튼을 누르면 벌어지는 일 (부팅 4단계)

① 펌웨어(UEFI/BIOS) 기상
   메인보드에 새겨진 첫 프로그램이 눈을 뜸.
   "키보드 있나? 메모리 정상인가?" 하드웨어 점호(POST).

② 부트로더 호출
   펌웨어: "디스크야, OS를 깨울 담당자(부트로더) 나와!"
   부트로더가 디스크에서 OS 커널을 찾아냄.

③ 커널 적재
   OS의 심장인 '커널'이 메모리에 올라와 시동을 걺.
   드라이버(하드웨어 통역사)들을 하나씩 깨움.

④ 서비스·로그인 화면
   백그라운드 서비스들 시작 → 로그인 화면 등장.
   여러분이 비밀번호를 치는 순간, 부팅 완료!

비유: 아침의 학교 — 경비아저씨가 문을 열고(①) 교무실에 불이 켜지고(②)
교장선생님이 출근해 방송을 켜면(③) 각 반 선생님들이 조회를 시작(④)해요.`;

const CODE_VMEM = `가상 메모리 — "RAM이 모자라면 디스크를 빌려 쓴다"

물리 메모리(RAM) 8GB인데 앱들이 12GB를 원한다면?

  [ RAM 8GB ]  ←  지금 활발히 쓰는 것들 (책상 위)
  [ 디스크의 페이지 파일 ]  ←  한동안 안 쓴 것들 (사물함)

OS가 하는 일:
- 안 쓰는 메모리 조각을 몰래 디스크로 옮겨 둠 (스왑 아웃)
- 다시 필요해지면 RAM으로 가져옴 (스왑 인)
- 각 프로세스에게는 "너 혼자 메모리 다 쓰는 거야"라고
  널찍한 가상 주소 공간을 보여줌 (서로 침범 못 하게 격리!)

부작용: 디스크는 RAM보다 훨씬 느려서, 스왑이 잦아지면
컴퓨터가 갑자기 굼떠져요 — "메모리 부족하면 느려진다"의 정체입니다.`;

const CODE_UPDATE = `업데이트가 담고 있는 것들

종류          내용                          미루면?
─────────────────────────────────────────────────────
보안 패치     발견된 구멍(취약점) 메꾸기      해커의 뚫린 문이 계속 열려 있음
버그 수정     "가끔 멈춰요" 같은 오류 고침    같은 오류를 계속 겪음
드라이버      새 하드웨어와의 통역 개선       기기 인식 오류, 성능 저하
기능 추가     새 기능·UI 개선                 그냥 못 씀 (이건 좀 아쉬운 정도)

핵심: 업데이트의 절반 이상은 '보안'입니다.
취약점은 발견되는 순간 전 세계에 공개돼요. 패치 안 한 컴퓨터는
"우리 집 도어락 비밀번호가 인터넷에 올라왔는데 안 바꾼 집"과 같아요.
회사 서버(EC2)도 마찬가지 — 그래서 서버 OS도 꾸준히 패치합니다.`;

const CODE_SYSTEMINFO = `# 터미널(PowerShell)에서 내 OS의 신상명세 보기:
systeminfo | Select-Object -First 12

호스트 이름:      MY-PC
OS 이름:          Microsoft Windows 11 ...
OS 버전:          10.0.26xxx ...          ← 업데이트할 때마다 올라가는 번호
부팅 시간:        2026-07-16 오전 8:31    ← 마지막 부팅(섹션 4!)이 언제였는지
총 물리 메모리:   16,384MB               ← 내 RAM 크기(섹션 5!)

# 더 간단히 버전만 보려면: 시작 → 실행(Win+R) → winver 입력`;

const CODE_SERVER_LINUX = `왜 서버는 거의 다 리눅스일까?

우리 플랫폼이 사는 곳: AWS EC2 (서울) — OS는 리눅스

이유 1) 무료 + 오픈소스   서버 수백 대를 띄워도 OS 값 0원
이유 2) 가볍다            화면(GUI)이 없어 자원을 앱에 몰아줌
이유 3) 안 끄고 오래 감    몇 달씩 재부팅 없이 안정적으로 동작
이유 4) 자동화 친화        전부 명령어·스크립트로 조작 → 배포 자동화
이유 5) Docker의 고향     컨테이너 기술 자체가 리눅스 커널 기능 기반

여러분이 매일 쓰는 것들 뒤에도:
학습 플랫폼(이 페이지!) · Gitea(edu.awesomedevapp.com:3000) ·
PostgreSQL · Caddy — 전부 리눅스 위의 프로세스(섹션 3!)로 돌고 있어요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'OS가 하는 일' },
  { n: 2, label: '윈도우·맥·리눅스' },
  { n: 3, label: '프로세스와 멀티태스킹' },
  { n: 4, label: '부팅 과정' },
  { n: 5, label: '가상 메모리 한 입' },
  { n: 6, label: '업데이트는 왜?' },
  { n: 7, label: '서버는 왜 리눅스?' },
];

export default function OsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>운영체제의 이해<br />— 전원 버튼 뒤에서 벌어지는 일</h1>
        <p>
          여러분이 카톡을 켜고 브라우저를 띄우는 동안, 뒤에서 CPU와 메모리를 나눠 주고
          질서를 지키는 총괄 매니저가 있어요 — 바로 <strong>운영체제(OS)</strong>입니다.
          이 코스에서는 그 매니저가 하는 일을 하나씩 열어 보고, <strong>"직접 확인해 보기"</strong>로
          내 PC에서 그 증거를 눈으로 찾아봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 3개</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="앱과 하드웨어 사이의 총괄 매니저">
        <p>
          컴퓨터를 건물에 비유하면, CPU·메모리·디스크는 <strong>건물 시설</strong>(전기·수도·방)이고,
          카톡·브라우저 같은 앱은 <strong>입주 손님</strong>이에요. 손님이 시설을 직접 뜯어 쓰게 두면
          건물은 순식간에 아수라장이 되겠죠. 그래서 그 사이에 <strong>총괄 매니저</strong>가 서 있습니다 —
          이게 운영체제예요.
        </p>
        <Code>{CODE_OS_ROLE}</Code>
        <p>매니저의 4가지 일을 조금만 더 풀면 이래요.</p>
        <ol className="olist">
          <li><strong>자원 관리</strong> — 여러 앱이 CPU와 메모리를 달라고 아우성칠 때, 공평하고 효율적으로 배분해요.</li>
          <li><strong>프로세스 관리</strong> — 프로그램을 실행시키고(탄생), 순서를 조율하고(생활), 끝나면 자원을 회수해요(정리).</li>
          <li><strong>파일 관리</strong> — 디스크에 있는 건 사실 0과 1의 바다예요. 이걸 폴더·파일·확장자로 보이게 정리해 주는 게 OS입니다.</li>
          <li><strong>보안·권한</strong> — "이 앱이 마이크를 켜도 될까?", "이 사용자가 이 파일을 지워도 될까?"를 검문해요.</li>
        </ol>
        <svg className="diagram" viewBox="0 0 640 310" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="앱, 운영체제, 하드웨어의 3계층 구조 — 앱이 자원을 요청하면 운영체제가 하드웨어 자원을 배분한다">
          <text x="30" y="18" fontSize="12" fill="var(--muted)">앱 — 입주 손님 (자원을 요청)</text>
          <rect x="30" y="26" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="90" y="53" fontSize="13" fill="var(--ink)" textAnchor="middle">카톡</text>
          <rect x="170" y="26" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="230" y="53" fontSize="13" fill="var(--ink)" textAnchor="middle">브라우저</text>
          <rect x="310" y="26" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="370" y="53" fontSize="13" fill="var(--ink)" textAnchor="middle">VS Code</text>
          <rect x="450" y="26" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="510" y="53" fontSize="13" fill="var(--ink)" textAnchor="middle">게임</text>
          <line x1="90" y1="74" x2="90" y2="108" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M90 116 l-5 -8 h10 z" fill="var(--muted)" />
          <line x1="230" y1="74" x2="230" y2="108" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M230 116 l-5 -8 h10 z" fill="var(--muted)" />
          <line x1="370" y1="74" x2="370" y2="108" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M370 116 l-5 -8 h10 z" fill="var(--muted)" />
          <line x1="510" y1="74" x2="510" y2="108" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M510 116 l-5 -8 h10 z" fill="var(--muted)" />
          <text x="300" y="98" fontSize="11.5" fill="var(--muted)" textAnchor="middle">자원 요청</text>
          <rect x="30" y="120" width="540" height="64" rx="10" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="300" y="146" fontSize="15" fontWeight="700" fill="var(--ink)" textAnchor="middle">운영체제 (총괄 매니저)</text>
          <text x="300" y="168" fontSize="12" fill="var(--muted)" textAnchor="middle">자원 배분 · 프로세스 · 파일 · 보안 — Windows · macOS · Linux</text>
          <line x1="90" y1="188" x2="90" y2="222" stroke="var(--primary)" strokeWidth="1.5" />
          <path d="M90 230 l-5 -8 h10 z" fill="var(--primary)" />
          <line x1="230" y1="188" x2="230" y2="222" stroke="var(--primary)" strokeWidth="1.5" />
          <path d="M230 230 l-5 -8 h10 z" fill="var(--primary)" />
          <line x1="370" y1="188" x2="370" y2="222" stroke="var(--primary)" strokeWidth="1.5" />
          <path d="M370 230 l-5 -8 h10 z" fill="var(--primary)" />
          <line x1="510" y1="188" x2="510" y2="222" stroke="var(--primary)" strokeWidth="1.5" />
          <path d="M510 230 l-5 -8 h10 z" fill="var(--primary)" />
          <text x="300" y="210" fontSize="11.5" fill="var(--primary)" textAnchor="middle">자원 배분</text>
          <rect x="30" y="234" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="90" y="261" fontSize="13" fill="var(--ink)" textAnchor="middle">CPU</text>
          <rect x="170" y="234" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="230" y="261" fontSize="13" fill="var(--ink)" textAnchor="middle">메모리</text>
          <rect x="310" y="234" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="370" y="261" fontSize="13" fill="var(--ink)" textAnchor="middle">디스크</text>
          <rect x="450" y="234" width="120" height="44" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <text x="510" y="261" fontSize="13" fill="var(--ink)" textAnchor="middle">네트워크</text>
          <text x="30" y="300" fontSize="12" fill="var(--muted)">하드웨어 — 건물 시설</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 앱(손님)과 하드웨어(시설) 사이에서 자원을 요청받아 배분하는 운영체제(매니저)</p>
        <div className="tip">
          <b>미리 보는 연결고리</b> 우리가 만들 웹 서비스(React 프론트, Spring Boot 백엔드)도
          결국 어느 컴퓨터 위에서 <strong>OS에게 자원을 받아 쓰는 손님</strong>이에요.
          OS를 알면 "왜 서버가 느려졌지?", "왜 메모리가 부족하지?"를 추적할 수 있게 됩니다.
        </div>
      </Section>

      <Section n={2} title="윈도우 · 맥 · 리눅스" sub="같은 일을 하는 세 매니저, 다른 성격">
        <p>
          운영체제는 하나가 아니에요. 여러분의 PC엔 <strong>Windows</strong>, 디자이너 노트북엔
          <strong> macOS</strong>, 그리고 우리 서비스가 사는 AWS 서버엔 <strong>Linux</strong>가
          돌고 있죠. 셋 다 섹션 1의 4가지 일을 똑같이 하지만, <strong>성격</strong>이 다릅니다.
        </p>
        <Code>{CODE_OS_COMPARE}</Code>
        <p>
          비유하면 이래요. Windows는 <strong>대형 마트</strong> — 누구나 들어와서 뭐든 할 수 있게
          다 갖춰 놨어요. macOS는 <strong>큐레이션 잘 된 편집숍</strong> — 정해진 하드웨어(맥) 위에서
          매끈하게 다듬어져 있죠. Linux는 <strong>공구 창고</strong> — 화려하진 않지만 튼튼하고,
          필요한 만큼만 꺼내 조립할 수 있어서 전문가(서버)들이 사랑해요.
        </p>
        <div className="warn">
          <b>흔한 오해 바로잡기</b> "리눅스는 검은 화면에 글자만 나오는 어려운 OS"가 아니에요.
          화면(GUI)을 <strong>일부러 뺀 채</strong> 서버용으로 쓰는 경우가 많은 것뿐,
          우분투처럼 Windows 못지않은 데스크톱 화면을 가진 리눅스도 많습니다.
        </div>
      </Section>

      <Section n={3} title="프로세스와 멀티태스킹" sub="CPU 하나로 어떻게 '동시에' 다 돌아갈까?">
        <p>
          디스크에 저장된 실행 파일은 <strong>프로그램</strong>, 그게 실행돼서 메모리에 올라가
          살아 움직이는 상태가 <strong>프로세스</strong>예요. 레시피(프로그램)와
          지금 불 위에서 끓고 있는 냄비(프로세스)의 차이죠.
        </p>
        <Code>{CODE_PROCESS}</Code>
        <p>
          그래서 "멀티태스킹"은 사실 <strong>초고속 돌려막기</strong>예요. OS가 아주 잘게 쪼갠
          시간 조각을 프로세스들에게 번갈아 나눠 주는데, 그 전환이 1초에 수천 번이라 사람 눈엔
          전부 동시에 도는 것처럼 보이는 거죠. 이 배분 순서를 정하는 게 OS의
          <strong> 스케줄러</strong>입니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="CPU 코어 하나가 시간을 잘게 쪼개 세 프로세스를 번갈아 실행하는 멀티태스킹 도해">
          <text x="320" y="16" fontSize="12" fill="var(--muted)" textAnchor="middle">실행 중인 프로세스 3개</text>
          <rect x="170" y="24" width="80" height="30" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="210" y="43" fontSize="12" fill="var(--ink)" textAnchor="middle">카톡</text>
          <rect x="280" y="24" width="80" height="30" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="320" y="43" fontSize="12" fill="var(--ink)" textAnchor="middle">크롬</text>
          <rect x="390" y="24" width="80" height="30" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="430" y="43" fontSize="12" fill="var(--ink)" textAnchor="middle">음악</text>
          <text x="320" y="74" fontSize="12" fill="var(--muted)" textAnchor="middle">CPU 코어 1개 — 시간을 잘게 쪼개 번갈아 배정</text>
          <rect x="44" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="77" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">카톡</text>
          <rect x="110" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="143" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">크롬</text>
          <rect x="176" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="209" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">음악</text>
          <rect x="242" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="275" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">카톡</text>
          <rect x="308" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="341" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">크롬</text>
          <rect x="374" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="407" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">음악</text>
          <rect x="440" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="473" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">카톡</text>
          <rect x="506" y="84" width="66" height="40" rx="6" fill="var(--card)" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="539" y="109" fontSize="11.5" fill="var(--ink)" textAnchor="middle">크롬</text>
          <line x1="44" y1="138" x2="566" y2="138" stroke="var(--muted)" strokeWidth="1.5" />
          <path d="M578 138 l-10 -5 v10 z" fill="var(--muted)" />
          <text x="586" y="142" fontSize="12" fill="var(--muted)">시간</text>
          <text x="320" y="172" fontSize="12.5" fontWeight="600" fill="var(--ink)" textAnchor="middle">전환은 1초에 수천 번 — 문맥 교환</text>
          <text x="320" y="194" fontSize="12" fill="var(--muted)" textAnchor="middle">너무 빨라서 사람 눈에는 세 앱이 '동시에' 도는 것처럼 보여요</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 멀티태스킹의 실체 — 한 코어가 시간 조각을 프로세스들에 번갈아 배정한다</p>
        <div className="tip">
          <b>직접 확인해 보기 ①</b> <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
          작업 관리자를 열어 보세요. 브라우저 창은 하나인데 프로세스는 수십 개인 것,
          OS 자신(<span className="icode">System</span>)도 목록에 있는 것, 그리고 성능 탭에서
          CPU 코어 개수와 실시간 사용률 그래프를 찾아보세요. 탭을 잔뜩 열면 메모리 숫자가
          쑥쑥 올라가는 것도 관찰 포인트!
        </div>
        <Code>{CODE_TASKMGR}</Code>
      </Section>

      <Section n={4} title="부팅 과정" sub="전원 버튼과 로그인 화면 사이의 몇 초">
        <p>
          전원을 누른 순간의 컴퓨터는 아무것도 모르는 상태예요. OS는 디스크에 잠들어 있고요.
          그럼 <strong>누가 OS를 깨울까요?</strong> 이 릴레이가 바로 부팅입니다.
        </p>
        <Code>{CODE_BOOT}</Code>
        <ol className="olist">
          <li><strong>펌웨어(UEFI)</strong>가 하드웨어 점호를 하고,</li>
          <li><strong>부트로더</strong>가 디스크에서 OS 커널을 찾아 메모리에 올리고,</li>
          <li><strong>커널</strong>이 드라이버와 함께 시동을 걸고,</li>
          <li><strong>서비스들</strong>이 켜지면 로그인 화면이 여러분을 맞이해요.</li>
        </ol>
        <p>
          "부팅이 느려요"의 범인은 대부분 ④단계 — 시작할 때 같이 켜지는 프로그램이 너무 많은
          경우예요. 작업 관리자의 <strong>시작 앱</strong> 탭에서 그 목록을 볼 수 있습니다.
        </p>
        <div className="warn">
          <b>주의</b> 시작 앱 목록은 <strong>구경만</strong> 하세요. 회사 PC에서 보안 프로그램이나
          모르는 항목을 함부로 끄면 안 돼요. 끄고 싶은 게 있다면 멘토와 먼저 상의!
        </div>
      </Section>

      <Section n={5} title="가상 메모리 한 입" sub="RAM 8GB로 12GB짜리 일을 하는 마법">
        <p>
          앱들이 원하는 메모리를 다 합치면 실제 RAM보다 클 때가 많아요. 그런데도 컴퓨터가
          안 터지는 이유가 <strong>가상 메모리</strong>입니다. 책상(RAM)이 좁으면 당장 안 쓰는
          책을 <strong>사물함(디스크)</strong>에 넣어 두고, 필요할 때 다시 꺼내 오는 거예요.
        </p>
        <Code>{CODE_VMEM}</Code>
        <p>
          덤으로 중요한 효과가 하나 더 있어요 — <strong>격리</strong>. OS는 각 프로세스에게
          자기만의 가상 주소 공간을 주기 때문에, 한 앱이 다른 앱의 메모리를 마음대로 읽거나
          망가뜨릴 수 없어요. 크롬이 죽어도 카톡은 멀쩡한 이유죠.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ②</b> 작업 관리자 → 성능 → 메모리에서
          <strong> "커밋된 크기"</strong>를 찾아보세요. <span className="icode">12/20GB</span>처럼
          두 숫자가 보이는데, 뒤 숫자가 실제 RAM보다 크다면 — 그게 바로 디스크까지 합쳐진
          가상 메모리의 크기입니다. 방금 배운 마법의 실물이에요.
        </div>
      </Section>

      <Section n={6} title="업데이트는 왜 하나" sub="귀찮은 재부팅에 숨어 있는 것">
        <p>
          한창 작업 중인데 "업데이트 후 다시 시작" — 다들 미뤄 본 적 있죠?
          그런데 업데이트의 정체를 알면 생각이 좀 달라져요.
        </p>
        <Code>{CODE_UPDATE}</Code>
        <p>
          OS도 사람이 만든 거대한 소프트웨어라 계속 구멍(취약점)이 발견돼요. 발견된 취약점은
          공개되고, 공격자들은 <strong>"패치 안 한 컴퓨터"</strong>부터 노립니다.
          그래서 업데이트는 새 기능 선물이라기보다 <strong>도어락 비밀번호 교체</strong>에 가까워요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기 ③</b> 터미널에서 아래 명령으로 내 PC의 OS 버전·마지막 부팅
          시간·RAM 크기를 확인해 보세요. 섹션 4(부팅)와 섹션 5(메모리)에서 배운 것들의
          신상명세가 한 화면에 나옵니다.
        </div>
        <Code>{CODE_SYSTEMINFO}</Code>
      </Section>

      <Section n={7} title="서버는 왜 리눅스인가" sub="우리 플랫폼이 리눅스 위에 사는 이유">
        <p>
          지금 보고 있는 이 학습 플랫폼도, 코드가 사는 Gitea도, 전부 AWS EC2 위의
          <strong> 리눅스</strong>에서 돌아가요. 전 세계 서버의 대다수가 리눅스인 데는
          분명한 이유들이 있습니다.
        </p>
        <Code>{CODE_SERVER_LINUX}</Code>
        <p>
          섹션 2에서 말한 "성격 차이"가 여기서 빛나요. 서버는 화면 앞에 사람이 앉아 있지 않고,
          수십 개의 프로세스(섹션 3!)가 24시간 묵묵히 일하는 곳이에요. 그래서 화려함보다
          <strong> 가볍고, 안정적이고, 명령어로 전부 자동화되는</strong> 리눅스가 딱 맞습니다.
          우리가 쓰는 <strong>Docker</strong>도 리눅스 커널의 격리 기능(섹션 5의 격리, 기억나죠?)을
          토대로 만들어진 기술이고요.
        </p>
        <div className="tip">
          <b>다음 코스 예고</b> "그래서 리눅스는 어떻게 다루는데?"가 궁금해졌다면 성공이에요.
          터미널에서 파일을 만지고, 프로세스를 확인하고, 서버에 접속하는 법은{' '}
          <Link to="/learn/linux"><strong>리눅스 기초</strong></Link> 코스에서 손으로 직접 배웁니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🖥️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 전원 버튼 뒤의 세계 — 매니저(OS)가 자원을 배분하고, 프로세스를 돌려막고,
            부팅 릴레이로 잠에서 깨고, 가상 메모리로 책상을 넓히는 과정을 전부 알게 됐어요.
            다음은 우리 서버의 OS를 직접 다뤄 볼 차례 —{' '}
            <Link to="/learn/linux"><strong>리눅스 기초</strong></Link> 코스에서 터미널로 프로세스와
            파일을 만져 보고, <Link to="/learn/network"><strong>네트워크의 이해</strong></Link>와
            이어 붙이면 "서버 한 대가 어떻게 굴러가는지"의 큰 그림이 완성됩니다.
          </p>
        </div>
      </div>
    </div>
  );
}
