// 이 파일이 하는 일: "컴퓨터의 역사" 코스 — 방 하나를 가득 채우던 에니악에서
// 주머니 속 스마트폰, 그리고 우리가 매일 쓰는 클라우드·AI 도구까지,
// 컴퓨터가 걸어온 길을 7개 시대로 나눠 안내하는 정적 학습 페이지.
// (에니악 → 트랜지스터·무어의 법칙 → PC 혁명 → 인터넷·웹 → 스마트폰 → 클라우드 → AI 시대)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_ENIAC = `에니악(ENIAC, 1946) vs 지금 여러분의 노트북

              에니악                     요즘 노트북
────────────────────────────────────────────────────
무게          약 27톤 (버스 2대)         약 1.5kg
크기          교실 하나를 가득 채움       가방에 쏙
부품          진공관 약 18,000개         트랜지스터 수백억 개
전기          150kW (동네가 깜빡)        약 60W (전구 하나)
프로그램 교체  케이블을 손으로 다시 꽂음    파일 하나 실행
속도          초당 덧셈 약 5,000번        초당 수십억 번 이상

→ "프로그램을 바꾼다 = 배선을 다시 꽂는다"였던 시대.
  소프트웨어라는 말조차 아직 없던 출발점이에요.`;

const CODE_MOORE = `무어의 법칙 (1965, 고든 무어의 관찰)

"칩 하나에 들어가는 트랜지스터 수는 약 2년마다 2배가 된다"

1971년  Intel 4004      약 2,300개
1993년  Pentium         약 310만 개
2006년  Core 2 Duo      약 2억 9천만 개
2020년대 스마트폰 칩     100억 개 이상
────────────────────────────────────────
50년 동안 대략 "2배 × 25번" — 계산해 보면 수백만 배!

법칙이라기보다 '업계 전체가 지켜온 약속'에 가까워요.
그리고 이 약속 덕분에: 어제의 슈퍼컴퓨터 = 오늘의 주머니 속 폰.`;

const CODE_PC_ERA = `개인용 컴퓨터(PC) 혁명 — "1인 1컴퓨터"라는 미친 생각

~1970년대   컴퓨터 = 회사·대학의 공용 대형 장비
            (예약하고 줄 서서 잠깐 빌려 쓰는 물건)

1977~1984   가정용 PC 등장 — 거실과 책상 위로!
            + GUI(그래픽 화면)와 마우스의 등장
            "명령어를 외운 사람"만 쓰던 기계가
            "아이콘을 클릭할 줄 아는 사람" 모두의 도구로

바뀐 것:
- 소프트웨어 산업 탄생 (프로그램을 '사고파는' 시장)
- 개발자라는 직업의 대중화
- 지금 여러분이 PC로 코딩하는 풍경의 시작점`;

const CODE_WEB = `인터넷과 웹 — '연결'이 만든 폭발

1969  ARPANET — 대학 연구실 컴퓨터 몇 대를 연결한 실험
1983  TCP/IP 표준화 — 서로 다른 네트워크가 한 언어로 대화
1989  팀 버너스리, 웹(WWW) 제안 — "문서를 링크로 잇자"
1990s 브라우저 등장 → 누구나 클릭만으로 인터넷 항해
2000s 웹이 '문서'에서 '애플리케이션'으로 진화

핵심 구분 (헷갈리기 쉬워요!)
인터넷 = 전 세계 컴퓨터를 잇는 도로망 (물리적 연결)
웹     = 그 도로 위를 달리는 서비스 중 하나 (HTTP로 문서·앱 주고받기)

→ 우리가 만드는 React 페이지도, Spring Boot API도
  전부 이 1989년 아이디어의 후손입니다.`;

const CODE_SMARTPHONE = `스마트폰(2007~) — 컴퓨터가 주머니로 들어온 날

바뀐 숫자:
- PC 보급률로는 닿지 못한 사람들까지 "전 인류가 컴퓨터 보유"
- 인터넷 접속의 기본값: 책상 앞 → 언제 어디서나

개발자에게 바뀐 것:
- '앱'이라는 새로운 소프트웨어 시장
- 웹 개발의 상식 변화: 반응형 디자인
  (같은 페이지가 폰·태블릿·PC에서 다 예뻐야 함)
- 위치·카메라·센서 = 새로운 서비스 재료

→ 우리 학습 플랫폼을 폰으로 열어도 레이아웃이
  다시 배치되는 것 — 이게 스마트폰 시대가 남긴 숙제이자 기본기.`;

const CODE_CLOUD = `클라우드(2006~) — "서버를 사지 말고 빌려 쓰세요"

옛날 방식: 서비스 하나 열려면
  서버 컴퓨터 구매(수백만 원) → 설치할 공간(전기·냉방) →
  회선 계약 → 몇 주~몇 달 뒤 오픈

클라우드 방식:
  클릭 몇 번 → 몇 분 뒤 서울 데이터센터에 내 서버 완성
  쓴 만큼만 요금 (전기요금처럼)

우리 회사(AWESOMEDEV)의 실제 모습:
  AWS EC2 (서울 리전) ← 우리 서버가 사는 곳
   ├── Docker      : 앱을 컨테이너(규격 화물)로 포장해 실행
   ├── Caddy       : HTTPS 현관 안내데스크
   ├── Spring Boot : 백엔드
   └── PostgreSQL  : 데이터베이스

→ 학생 몇 명이서도 전 세계 서비스를 열 수 있는 시대 —
  클라우드가 창업의 문턱을 확 낮췄어요.`;

const CODE_AI = `AI 시대(2020s~) — 컴퓨터에게 '말'이 통하기 시작했다

에니악:  배선을 꽂아서 지시
PC:     프로그래밍 언어로 지시
스마트폰: 터치로 지시
AI:     사람 말(자연어)로 지시 — "이 버그 원인 찾아줘"

개발자의 일이 바뀌는 중:
- 코드 자동완성 → 함수 통째로 제안 → 에이전트가 작업 수행
- "코드를 치는 능력"보다
  "무엇을 만들지 정확히 설명하고, 결과를 검증하는 능력"이 중요해짐

변하지 않는 것:
- AI가 짠 코드도 결국 사람이 읽고 책임져야 해요.
- 기초(자료구조·네트워크·DB)를 아는 사람만이
  AI의 답이 맞는지 틀린지 판별할 수 있습니다.`;

const CODE_TIMELINE = `일곱 시대 한눈에 — 각 시대가 '지금 우리 개발'에 남긴 것

1946 에니악        → "컴퓨터"라는 물건 자체
1947~ 트랜지스터    → 작고 싸고 빠르게 (무어의 법칙)
1977~ PC 혁명      → 1인 1컴퓨터, 개발자라는 직업
1989~ 인터넷·웹    → 우리가 만드는 웹 서비스의 무대
2007~ 스마트폰     → 반응형 디자인, 모바일 우선
2006~ 클라우드     → AWS EC2 위의 우리 서버
2020s AI          → 말로 하는 개발, 검증하는 개발자

한 줄 요약: 컴퓨터는 점점 "작아지고, 연결되고, 똑똑해지는"
방향으로 달려왔고 — 우리는 그 최전선에서 일합니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '트랜지스터와 무어의 법칙' },
  { n: 3, label: 'PC 혁명' },
  { n: 4, label: '인터넷과 웹' },
  { n: 5, label: '스마트폰' },
  { n: 6, label: '클라우드' },
  { n: 7, label: 'AI 시대' },
];

export default function HistoryPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>컴퓨터의 역사<br />— 교실만 한 계산기에서 주머니 속 AI까지</h1>
        <p>
          80년 전, 컴퓨터 한 대는 교실 하나를 가득 채우고 프로그램을 바꾸려면 케이블을
          손으로 다시 꽂아야 했어요. 그 기계가 어떻게 여러분 주머니 속으로 들어오고,
          이제는 <strong>말로 시키면 코드를 짜 주는</strong> 지경까지 왔는지 — 일곱 시대를 따라가 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</span>
          <span className="chip">7개 시대 여행</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="27톤짜리 '프로그래밍 가능한' 기계의 탄생">
        <p>
          주판, 계산자, 기계식 계산기 — 인류는 오래전부터 계산 도구를 만들어 왔어요.
          하지만 이 도구들엔 결정적 한계가 있었죠. <strong>한 가지 일만</strong> 할 수 있다는 것.
          주판으로는 계산만 하지, "이 계산을 100번 반복하고 결과가 크면 저 계산으로 넘어가"
          같은 <strong>절차</strong>를 시킬 수 없어요.
        </p>
        <p>
          1946년 등장한 <strong>에니악(ENIAC)</strong>이 그 벽을 깼습니다. 배선을 바꾸면
          <strong> 다른 일을 시킬 수 있는</strong>, 즉 프로그래밍이 가능한 최초의 대형 전자
          컴퓨터 중 하나였어요. 계산기가 '한 곡만 연주하는 오르골'이라면, 컴퓨터는
          '악보만 갈아 끼우면 아무 곡이나 연주하는 피아니스트'인 거죠.
        </p>
        <Code>{CODE_ENIAC}</Code>
        <p>
          이후 "프로그램도 데이터처럼 <strong>메모리에 저장하자</strong>"는 폰 노이만 구조가
          등장하면서 케이블을 다시 꽂는 대신 <strong>파일을 바꿔 실행</strong>하는, 지금 우리가
          아는 컴퓨터의 기본 설계가 완성됩니다. 여러분이 <span className="icode">npm run dev</span>를
          치는 순간에도 이 구조가 돌아가고 있어요.
        </p>
        <div className="tip">
          <b>아침수업과 연결</b> "프로그램의 변화" 수업에서 배선 → 천공카드 → 코드로 이어지는
          흐름을 다뤘죠? 에니악이 바로 그 이야기의 1페이지입니다. 이 코스를 다 읽고 나서
          그 수업 노트를 다시 보면 훨씬 입체적으로 보일 거예요.
        </div>
      </Section>

      <Section n={2} title="트랜지스터와 무어의 법칙" sub="'2년마다 2배'가 50년 이어지면 벌어지는 일">
        <p>
          에니악의 진공관은 전구처럼 뜨겁고, 크고, 자주 타서 끊어졌어요. 1947년 발명된
          <strong> 트랜지스터</strong>는 같은 스위치 역할을 하면서 <strong>작고, 차갑고,
          안 망가지는</strong> 부품이었죠. 그리고 트랜지스터 수천~수십억 개를 손톱만 한 판에
          새겨 넣은 것이 <strong>집적회로(IC), 즉 '칩'</strong>입니다.
        </p>
        <Code>{CODE_MOORE}</Code>
        <p>
          "2배가 25번"이 얼마나 무서운지 감이 안 온다면 — 종이 한 장을 25번 접으면(접을 수만
          있다면) 두께가 <strong>수 킬로미터</strong>가 됩니다. 이게 <strong>지수적 성장</strong>이에요.
          컴퓨터가 매년 조금씩이 아니라 <strong>폭발적으로</strong> 좋아진 비밀이고,
          뒤에 나올 PC·스마트폰·AI가 전부 이 곡선 위에서 태어났습니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 280" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="무어의 법칙 그래프: 1971년 인텔 4004의 약 2,300개에서 2020년대 스마트폰 칩의 100억 개 이상까지 칩 하나의 트랜지스터 수가 지수적으로 증가">
          <line x1="70" y1="28" x2="70" y2="230" stroke="var(--line)" strokeWidth="2" />
          <line x1="70" y1="230" x2="606" y2="230" stroke="var(--line)" strokeWidth="2" />
          <text x="64" y="18" fontSize="12" fill="var(--muted)">칩 하나의 트랜지스터 수 (로그 눈금)</text>
          <line x1="304" y1="146" x2="304" y2="230" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="419" y1="101" x2="419" y2="230" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="560" y1="66" x2="560" y2="230" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <polyline points="110,212 304,141 419,96 560,61" fill="none" stroke="var(--primary)" strokeWidth="2.5" strokeLinecap="round" />
          <circle cx="110" cy="212" r="5" fill="var(--primary)" />
          <circle cx="304" cy="141" r="5" fill="var(--primary)" />
          <circle cx="419" cy="96" r="5" fill="var(--primary)" />
          <circle cx="560" cy="61" r="5" fill="var(--primary)" />
          <text x="118" y="225" fontSize="12" fill="var(--ink)">Intel 4004 · 약 2,300개</text>
          <text x="296" y="132" textAnchor="end" fontSize="12" fill="var(--ink)">Pentium · 약 310만 개</text>
          <text x="409" y="84" textAnchor="end" fontSize="12" fill="var(--ink)">Core 2 Duo · 약 2억 9천만 개</text>
          <text x="572" y="46" textAnchor="end" fontSize="12" fill="var(--ink)">스마트폰 칩 · 100억 개 이상</text>
          <text x="88" y="58" fontSize="12.5" fill="var(--muted)">50년 동안 2배 × 25번 ≈ 수백만 배</text>
          <text x="110" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">1971</text>
          <text x="304" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">1993</text>
          <text x="419" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">2006</text>
          <text x="560" y="252" textAnchor="middle" fontSize="12" fill="var(--muted)">2020년대</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 무어의 법칙 — 로그 눈금에서 직선처럼 보이는 것이 바로 지수적 성장이에요</p>
        <div className="warn">
          <b>공짜 성능의 시대는 끝나가요</b> — 최근엔 트랜지스터가 원자 크기에 가까워지면서
          무어의 법칙이 느려지고 있어요. 그래서 요즘은 코어를 여러 개 쓰고(멀티코어),
          서버를 여러 대로 늘리는(수평 확장 — 클라우드 섹션에서 다시 만나요!) 방향으로
          성능을 끌어올립니다. "하드웨어가 알아서 빨라지겠지"가 안 통하니
          <strong> 효율적인 코드</strong>가 다시 중요해진 거죠.
        </div>
      </Section>

      <Section n={3} title="개인용 PC 혁명" sub="회사의 기계에서 '내 책상 위의 기계'로">
        <p>
          칩이 작고 싸지자 미친 생각이 현실이 됩니다 — <strong>"컴퓨터를 한 사람이
          한 대씩 갖는다면?"</strong> 1970년대까지 컴퓨터는 회사나 대학이 소유하고
          여러 사람이 시간을 쪼개 빌려 쓰는 물건이었거든요. 도서관의 공용 열람실 같은
          존재였던 컴퓨터가, 각자의 책상 위로 내려온 거예요.
        </p>
        <Code>{CODE_PC_ERA}</Code>
        <p>
          특히 <strong>GUI(그래픽 사용자 인터페이스)와 마우스</strong>의 등장이 결정적이었어요.
          명령어를 외운 전문가만 쓰던 기계가 "폴더를 더블클릭할 줄 아는" 모두의 도구가 됐죠.
          그리고 이때 <strong>소프트웨어를 사고파는 시장</strong>이 생기면서, 지금 여러분이
          꿈꾸는 '개발자'라는 직업이 대중적인 직업이 됩니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 내 PC가 에니악보다 얼마나 대단한지 눈으로 확인해 봅시다.
          <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>로
          작업 관리자를 열고 <strong>성능 탭</strong>을 보세요. CPU 코어 수, 속도(GHz = 초당
          수십억 번!), 메모리 용량이 보여요. 에니악의 초당 덧셈 5,000번과 비교하면 —
          여러분 책상 위 물건이 80년 전 국가급 슈퍼컴퓨터의 수백만 배입니다.
        </div>
      </Section>

      <Section n={4} title="인터넷과 웹의 탄생" sub="혼자 좋던 컴퓨터가 '연결'되자 세상이 바뀌었다">
        <p>
          PC 시대의 컴퓨터는 성능은 좋아도 <strong>외딴섬</strong>이었어요. 파일을 옮기려면
          디스켓을 들고 걸어가야 했죠(진짜로 '스니커넷'이라고 불렀어요 — 운동화 신고 나르는
          네트워크라는 농담). 이 섬들을 잇는 다리가 <strong>인터넷</strong>,
          그 다리 위에 세워진 도시가 <strong>웹</strong>입니다.
        </p>
        <Code>{CODE_WEB}</Code>
        <p>
          웹의 아이디어는 놀랍도록 단순해요 — <strong>"문서에 링크를 걸어 서로 잇자."</strong>
          그런데 이 단순한 규칙이 검색, 쇼핑, 동영상, 그리고 우리 학습 플랫폼까지 전부 낳았죠.
          여러분이 배우는 <strong>React는 웹의 화면을</strong>, <strong>Spring Boot는 웹의
          주방(서버)을</strong> 만드는 도구 — 둘 다 이 시대가 깔아 놓은 무대 위의 배우들입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 1989년의 유산이 지금도 살아 있는 현장을 봅시다. 우리 플랫폼
          (<span className="icode">edu.awesomedevapp.com</span>)에서 <span className="kbd">F12</span> →
          <span className="kbd">Network</span> 탭 → 새로고침. 요청 하나를 클릭하면
          <span className="icode">GET</span>, <span className="icode">200 OK</span> 같은 글자가 보여요.
          이 대화 규칙(HTTP)이 웹 탄생 때 만들어진 바로 그것 — 30년 넘게 현역인 설계입니다.
        </div>
      </Section>

      <Section n={5} title="스마트폰이 바꾼 것" sub="컴퓨터가 책상을 떠나 주머니로">
        <p>
          2007년 이후 스마트폰은 "전화기에 컴퓨터를 조금 넣은 것"이 아니라
          <strong> 컴퓨터에 전화 기능을 얹은 것</strong>이었어요. 무어의 법칙(섹션 2) 덕분에
          손바닥만 한 크기에 PC급 성능이 들어갈 수 있었고, 인터넷(섹션 4)이 무선으로
          따라 들어왔죠. 앞의 시대들이 전부 합쳐진 결정체인 셈이에요.
        </p>
        <Code>{CODE_SMARTPHONE}</Code>
        <p>
          개발자 입장에서 가장 큰 변화는 <strong>"사용자가 어떤 화면으로 볼지 모른다"</strong>는
          전제가 생긴 거예요. 그래서 <strong>반응형 디자인</strong>이 기본기가 됐습니다.
          한 벌의 옷이 아니라, 입는 사람 몸에 맞춰 늘어나는 옷을 만들어야 하는 거죠.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 페이지에서 <span className="kbd">F12</span> →
          왼쪽 위 <strong>기기 모양 아이콘</strong>(기기 툴바)을 눌러 보세요. 화면이 스마트폰
          크기로 바뀌면서 레이아웃이 다시 배치되는 게 보이나요? 폭을 마우스로 늘였다 줄였다
          하면서 어느 지점에서 배치가 '뚝' 바뀌는지 찾아보세요 — 그 지점이 바로
          반응형의 분기점(breakpoint)입니다.
        </div>
      </Section>

      <Section n={6} title="클라우드 시대" sub="서버를 '사는' 시대에서 '빌리는' 시대로">
        <p>
          웹 서비스가 폭발하자 새로운 고민이 생겼어요 — <strong>서버를 어디에 둘 것인가.</strong>
          직접 사서 관리하자니 비싸고, 갑자기 사용자가 몰리면 감당이 안 되고, 한가할 땐
          비싼 기계가 놀아요. 그래서 나온 답이 <strong>클라우드</strong>:
          거대한 데이터센터의 컴퓨터를 <strong>전기처럼 쓴 만큼만 빌려 쓰는</strong> 방식입니다.
          자가용(내 서버)을 사는 대신 필요할 때 택시(클라우드)를 부르는 거죠.
        </p>
        <Code>{CODE_CLOUD}</Code>
        <p>
          위 그림은 비유가 아니라 <strong>우리 회사의 실제 구성</strong>이에요. 여러분이 지금
          보고 있는 이 페이지도 AWS 서울 리전의 EC2 서버에서, Docker 컨테이너에 담긴 채,
          Caddy를 거쳐 배달된 겁니다. 클라우드는 남의 이야기가 아니라
          <strong> 오늘 우리가 서 있는 바닥</strong>이에요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 터미널에서 <span className="icode">nslookup edu.awesomedevapp.com</span>을
          쳐 보세요. 나오는 IP가 바로 AWS 서울 데이터센터 어딘가에 있는 우리 EC2 서버의 주소예요.
          "클라우드"라는 뜬구름 같은 말의 정체가 사실은 <strong>주소가 있는 진짜 컴퓨터</strong>라는 걸
          확인하는 순간입니다. (명령이 낯설다면 네트워크 코스 5섹션 복습!)
        </div>
      </Section>

      <Section n={7} title="그리고 AI 시대" sub="'어떻게'를 시키던 개발에서 '무엇을'을 말하는 개발로">
        <p>
          컴퓨터에게 일을 시키는 방법의 역사를 다시 볼까요? 배선 꽂기(에니악) → 프로그래밍
          언어(PC) → 클릭과 터치(GUI·스마트폰) — 점점 <strong>사람 쪽으로</strong> 다가왔어요.
          그리고 지금, 마침내 <strong>사람의 말</strong>이 통하기 시작했습니다.
        </p>
        <Code>{CODE_AI}</Code>
        <p>
          그럼 개발 공부는 필요 없어지는 걸까요? 정반대예요. AI는 그럴듯하지만 틀린 답도
          자신 있게 내놓거든요. 운전기사가 생겨도 <strong>목적지와 길을 아는 사람</strong>이
          차주여야 하듯, AI가 짠 코드를 읽고 "이거 틀렸는데?"라고 말할 수 있는 사람 —
          <strong> 기초가 탄탄한 개발자</strong>의 가치는 오히려 올라갑니다. 여러분이 이 학습
          센터에서 네트워크·DB·코딩 기초를 배우는 이유가 바로 그거예요.
        </p>
        <p>일곱 시대를 한 장으로 정리하면 이렇습니다.</p>
        <Code>{CODE_TIMELINE}</Code>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="컴퓨터 역사 타임라인: 1946년 에니악, 1947년 트랜지스터, 1977년 PC 혁명, 1989년 인터넷과 웹, 2007년 스마트폰, 2006년 클라우드, 2020년대 AI 시대까지 일곱 시대">
          <line x1="28" y1="120" x2="606" y2="120" stroke="var(--line)" strokeWidth="2" />
          <polyline points="598,113 610,120 598,127" fill="none" stroke="var(--line)" strokeWidth="2" strokeLinecap="round" />
          <line x1="60" y1="100" x2="60" y2="110" stroke="var(--line)" strokeWidth="1.5" />
          <text x="60" y="76" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">에니악</text>
          <text x="60" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">1946</text>
          <circle cx="60" cy="120" r="7" fill="var(--primary)" />
          <line x1="147" y1="130" x2="147" y2="140" stroke="var(--line)" strokeWidth="1.5" />
          <text x="147" y="158" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">트랜지스터</text>
          <text x="147" y="175" textAnchor="middle" fontSize="12" fill="var(--muted)">1947~</text>
          <circle cx="147" cy="120" r="7" fill="var(--primary)" />
          <line x1="234" y1="100" x2="234" y2="110" stroke="var(--line)" strokeWidth="1.5" />
          <text x="234" y="76" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">PC 혁명</text>
          <text x="234" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">1977~</text>
          <circle cx="234" cy="120" r="7" fill="var(--primary)" />
          <line x1="320" y1="130" x2="320" y2="140" stroke="var(--line)" strokeWidth="1.5" />
          <text x="320" y="158" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">인터넷·웹</text>
          <text x="320" y="175" textAnchor="middle" fontSize="12" fill="var(--muted)">1989~</text>
          <circle cx="320" cy="120" r="7" fill="var(--teal)" />
          <line x1="406" y1="100" x2="406" y2="110" stroke="var(--line)" strokeWidth="1.5" />
          <text x="406" y="76" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">스마트폰</text>
          <text x="406" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">2007~</text>
          <circle cx="406" cy="120" r="7" fill="var(--teal)" />
          <line x1="493" y1="130" x2="493" y2="140" stroke="var(--line)" strokeWidth="1.5" />
          <text x="493" y="158" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">클라우드</text>
          <text x="493" y="175" textAnchor="middle" fontSize="12" fill="var(--muted)">2006~</text>
          <circle cx="493" cy="120" r="7" fill="var(--teal)" />
          <line x1="580" y1="100" x2="580" y2="110" stroke="var(--line)" strokeWidth="1.5" />
          <text x="580" y="76" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">AI 시대</text>
          <text x="580" y="94" textAnchor="middle" fontSize="12" fill="var(--muted)">2020s</text>
          <circle cx="580" cy="120" r="7" fill="var(--rose)" />
          <circle cx="115" cy="205" r="5" fill="var(--primary)" />
          <text x="125" y="210" fontSize="12" fill="var(--muted)">작아지다 (1946~)</text>
          <circle cx="265" cy="205" r="5" fill="var(--teal)" />
          <text x="275" y="210" fontSize="12" fill="var(--muted)">연결되다 (1989~)</text>
          <circle cx="415" cy="205" r="5" fill="var(--rose)" />
          <text x="425" y="210" fontSize="12" fill="var(--muted)">똑똑해지다 (2020s~)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 컴퓨터 80년 타임라인 — 작아지고, 연결되고, 똑똑해진 일곱 시대</p>
        <div className="warn">
          <b>주의 — 회사에서 AI 도구를 쓸 때</b> 편하다고 아무 코드나 AI 서비스에 붙여 넣으면
          안 돼요. 회사 소스 코드는 계약·보안상 외부 반출에 제약이 있을 수 있으니,
          <strong> 반드시 멘토에게 먼저 확인</strong>하고 회사가 허용한 도구만 사용하세요.
          도구는 바뀌어도 이 원칙은 안 바뀝니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🕰️ 여기까지 왔다면</h3>
          <p className="muted">
            교실만 한 에니악에서 출발해 트랜지스터의 축소 마법, 책상 위 PC, 세상을 이은
            웹, 주머니 속 스마트폰, 우리 서버가 사는 클라우드, 그리고 말이 통하는 AI까지 —
            <strong> "작아지고, 연결되고, 똑똑해진"</strong> 80년을 완주했어요.
            이제 그 역사 위에서 직접 만들 차례입니다. 데이터가 달리는 길이 궁금하면{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link>로, 그 길 위의
            코드를 짜고 싶으면 <Link to="/learn/coding"><strong>코딩 기초</strong></Link>로
            이어서 가 보세요. 아침수업 "프로그램의 변화" 노트와 이 코스의 타임라인을
            나란히 놓고 복습하면 금상첨화!
          </p>
        </div>
      </div>
    </div>
  );
}
