// 이 파일이 하는 일: "프로그램이란 무엇일까?" 코스 — 코딩을 한 번도 안 해 본 사람이
// 코드를 한 줄도 쓰기 전에, '컴퓨터에게 일을 시킨다'는 게 무슨 뜻인지 몸으로 이해하도록
// 7개 섹션으로 안내하는 정적 학습 페이지. 프레이밍은 "컴퓨터는 시킨 대로만 하는 기계" —
// 정확한 지시(=프로그램)의 감각을 일상 사례(알람·엘리베이터·라면 레시피)로 먼저 세운다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 예제 코드 상수들 ──

const CODE_ROBOT = `상황: 로봇에게 "목이 마르니까 물 좀 줘"라고 말했다.

사람 친구라면?          컴퓨터(로봇)라면?
─────────────          ─────────────────
"응, 잠깐만~"           ...아무 일도 일어나지 않음.
컵을 찾고, 물을 따르고,
건네주기까지 알아서 함.  왜? '물을 준다'가 무슨 뜻인지 모름.
                        어디 있는 컵을, 어느 정수기에서,
                        얼마나 따라서, 누구에게 줄지
                        하나도 정해 주지 않았기 때문.

컴퓨터가 알아듣는 지시는 이런 모양이어야 해요:
1. 부엌으로 이동한다
2. 찬장 두 번째 칸을 연다
3. 컵을 하나 꺼낸다
4. 정수기 앞으로 이동한다
5. 컵을 냉수 버튼 아래에 놓는다
6. 버튼을 3초간 누른다
7. 컵을 들고 사용자에게 이동한다
8. 컵을 건넨다`;

const CODE_IPO = `모든 프로그램의 공통 뼈대: 입력 → 처리 → 출력

알람 앱
  입력: 사용자가 맞춘 시각(07:00), 지금 시각
  처리: "지금 시각이 07:00이 되었나?"를 계속 확인
  출력: 되었으면 → 소리 울리기, 화면 켜기

엘리베이터
  입력: 눌린 버튼(5층), 현재 위치(1층)
  처리: 어느 방향으로 몇 층 움직일지 계산
  출력: 모터를 위로 돌리기, 5층에서 문 열기

신호등
  입력: 타이머(30초가 지났나?), 보행자 버튼
  처리: 다음 신호가 무엇인지 정해진 규칙대로 결정
  출력: 빨간불 끄고 초록불 켜기

패턴이 보이나요? 무엇을 받아서(입력) → 무엇을 따져서(처리)
→ 무엇을 내보낸다(출력). 여러분이 오늘 아침에 쓴 앱들도 전부 이 모양이에요.`;

const CODE_RAMEN = `라면 끓이기 프로그램 v1.0

1. 냄비에 물 550ml를 넣는다
2. 물을 불에 올려 끓인다
3. 물이 끓으면 면과 분말수프를 넣는다
4. 4분 30초 동안 더 끓인다
5. 불을 끄고 그릇에 옮겨 담는다

── 순서를 바꾸면? ──
3번을 1번보다 먼저 하면 → 마른 냄비에 면이 눌어붙음 (실패)
4번을 건너뛰면       → 설익은 면 (실패)
2번과 5번을 바꾸면    → 차가운 물에 불은 면 (대실패)

같은 5개의 단계인데, '순서'가 다르면 완전히 다른 결과가 나와요.
프로그램도 똑같습니다. 무엇을 하느냐만큼, 어떤 순서로 하느냐가 결과를 정해요.`;

const CODE_AMBIGUOUS = `사람의 말은 이렇게나 모호해요:

"적당히 익혀 줘"        → 적당히가 몇 분인데?
"물 좀 넉넉히"          → 넉넉히가 몇 ml인데?
"거의 다 되면 불 꺼"     → '거의 다'를 어떻게 판단하는데?

사람끼리는 눈치와 경험으로 빈칸을 채우지만,
컴퓨터는 빈칸을 채우는 능력이 0이에요. 그래서 이렇게 써 줘야 해요:

"550ml의 물을 100도까지 가열한 뒤 270초간 유지한다"

그리고 컴퓨터의 심장(CPU)이 진짜로 알아듣는 말은 딱 두 글자:

01001000 01101001  ← 컴퓨터의 진짜 언어(0과 1)

이 사이를 이어 주는 게 '프로그래밍 언어'입니다:

사람의 생각  →  프로그래밍 언어(Python, Java...)  →  0과 1  →  실행
             사람도 읽을 수 있고                번역기가
             컴퓨터도 번역할 수 있는 중간 언어    바꿔 줌`;

const CODE_RUN = `# 진짜 파이썬(Python) 코드 — 아직 외울 필요 없어요. 구경만 하세요.

print("안녕하세요")
print("저는 컴퓨터예요")
print("시킨 것만, 시킨 순서대로 합니다")

── 실행하면 화면에 이렇게 나와요 ──
안녕하세요
저는 컴퓨터예요
시킨 것만, 시킨 순서대로 합니다

포인트 ①: 위에서 아래로, 한 줄씩, 쓴 순서 그대로 실행됐어요.
포인트 ②: 두 번째 줄과 세 번째 줄의 순서를 바꾸면?
         → 출력도 그대로 바뀝니다. 컴퓨터는 절대 알아서 안 바꿔요.`;

const CODE_CYCLE = `개발자가 하루 종일 도는 사이클:

  ① 작성한다   →   ② 실행한다   →   ③ 결과를 본다
       ↑                                   │
       └──────── ④ 고친다 ←────────────────┘
              (생각과 다르면)

처음부터 완벽한 코드를 쓰는 사람은 없어요.
프로게이머가 연습 경기를 돌려 보며 실력을 다듬듯,
개발자는 이 사이클을 빠르게 돌면서 프로그램을 완성해 갑니다.
'틀리는 것'은 실패가 아니라 사이클의 정상적인 한 칸이에요.`;

const CODE_DRAW = `실습: 사람 프로그래밍 — '그림 그리기 로봇' 놀이

준비물: 종이 2장, 펜 2개, 친구 1명
규칙: 지시하는 사람은 자기 그림을 보여 줄 수 없고,
     그리는 사람(로봇)은 질문할 수 없다. 시킨 것만 그대로 그린다.

나쁜 지시(모호함):              좋은 지시(정확함):
"집을 그려"                    "종이 한가운데에 한 변이 5cm인
"지붕도 그리고"                 정사각형을 그린다"
"창문은 알아서"                "정사각형의 윗변을 밑변으로 하는
                              삼각형을 그린다. 높이는 3cm"
                              "정사각형 안, 왼쪽 아래에
                              1cm x 2cm 직사각형을 그린다"

끝나고 두 그림을 비교해 보세요.
모호한 지시로 그린 그림은 머릿속 그림과 전혀 다를 거예요.
컴퓨터에게 일을 시킨다는 건, 매 순간 오른쪽처럼 말하는 일입니다.`;

const CODE_HOMEWORK = `과제: '아침에 일어나 학교 가기'를 컴퓨터 수준으로 쪼개기 (15단계 이상)

이렇게 쓰면 안 돼요(사람용):     이렇게 쪼개기 시작하세요(컴퓨터용):
1. 일어난다                     1. 알람 소리가 들리면 눈을 뜬다
2. 씻는다                       2. 이불을 걷는다
3. 학교에 간다                   3. 침대에서 두 발을 바닥에 내린다
                               4. 일어서서 화장실로 이동한다
  (컴퓨터: "일어난다가             5. 수도꼭지를 왼쪽으로 돌려 물을 튼다
   뭔데요...?")                 6. 손에 물을 묻힌다
                               ... (여러분이 이어서 15단계 이상!)

채점 기준은 하나예요: "이대로만 움직이는 로봇이 정말 학교에 도착할까?"
'양치한다' 같은 뭉툭한 단계가 보이면 더 쪼개 보세요.
칫솔은 어디서? 치약은 얼마나? 몇 초 동안? — 그게 프로그래머의 눈입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '레시피 = 알고리즘' },
  { n: 4, label: '왜 프로그래밍 언어?' },
  { n: 5, label: '코드가 실행된다는 것' },
  { n: 6, label: '개발자의 일' },
  { n: 7, label: '첫 실습' },
];

export default function Lv1WhatIsAProgramPage() {
  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">예상 소요 40분</span>
          <span className="chip">실습: 등교 과정 15단계 쪼개기</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>

      <Section n={1} title="컴퓨터는 사실 바보다" sub="시킨 것만, 시킨 그대로 하는 기계">
        <p>
          영화 속 AI 때문에 컴퓨터가 엄청 똑똑하다고 느껴지지만, 진실은 반대예요.{' '}
          <strong>컴퓨터는 스스로 판단하는 능력이 전혀 없습니다.</strong> 눈치도 없고, 상식도
          없고, "대충 알아서"라는 말을 세상에서 제일 못 알아듣는 기계죠. 컴퓨터가 잘하는 건 딱
          두 가지 — 시킨 일을 <strong>엄청나게 빠르게</strong>, 그리고{' '}
          <strong>한 치의 오차 없이 그대로</strong> 하는 것뿐이에요.
        </p>
        <Code>{CODE_ROBOT}</Code>
        <p>
          위 오른쪽처럼, 사람이라면 한마디로 끝날 부탁을 컴퓨터에게는{' '}
          <strong>여덟 단계로 쪼개서, 하나하나 정확하게</strong> 말해 줘야 해요. 그리고 바로 이{' '}
          <strong>'정확한 지시의 묶음'이 프로그램</strong>이고, 그걸 만드는 일이{' '}
          <strong>프로그래밍</strong>입니다. 어렵고 신비한 게 아니라, "바보지만 성실한 기계에게
          일을 아주 자세히 시키는 기술"이에요.
        </p>
        <div className="tip">
          <b>뒤집어 생각하면</b> 컴퓨터가 바보라는 건 좋은 소식이기도 해요. 컴퓨터는{' '}
          <strong>절대 제멋대로 하지 않으니까요.</strong> 프로그램이 이상하게 돌아간다면 범인은
          늘 하나 — 우리가 내린 지시 어딘가에 있어요. 그래서 프로그래밍은 '기계와의 싸움'이
          아니라 '내 지시를 점점 정확하게 다듬는 연습'입니다.
        </div>
      </Section>

      <Section n={2} title="일상 속의 프로그램 찾기" sub="여러분은 이미 하루에 수십 개를 쓰고 있다">
        <p>
          "프로그램"이라고 하면 컴퓨터 화면 속 뭔가를 떠올리기 쉽지만, 사실 여러분의 하루는
          이미 프로그램으로 가득 차 있어요. 아침에 깨워 준 <strong>알람 앱</strong>, 등굣길에 탄{' '}
          <strong>엘리베이터</strong>, 건널목의 <strong>신호등</strong> — 전부 누군가가 미리
          써 둔 '정확한 지시의 묶음'이 돌아가고 있는 겁니다.
        </p>
        <p>
          그리고 이 프로그램들을 뜯어 보면 놀랍도록 닮은 패턴이 하나 나와요. 바로{' '}
          <strong>입력 → 처리 → 출력</strong>입니다. 무언가를 받아서, 규칙대로 따져 보고,
          결과를 내보낸다 — 세상의 거의 모든 프로그램이 이 세 박자로 움직여요.
        </p>
        <Code>{CODE_IPO}</Code>
        <p>
          유튜브도 마찬가지예요. 검색어를 <strong>입력</strong>하면, 수많은 영상 중 뭘 보여 줄지{' '}
          <strong>처리</strong>(계산)하고, 목록을 화면에 <strong>출력</strong>하죠. 게임에서
          버튼을 누르면(입력) 캐릭터가 점프할 위치를 계산해서(처리) 화면에 그려 냅니다(출력).
          앞으로 어떤 프로그램을 보든 "여기서 입력은 뭐고, 출력은 뭐지?"라고 물어보는 습관을
          들여 보세요.
        </p>
        <div className="tip">
          <b>오늘의 미션</b> 집에 가는 길에 프로그램 세 개를 찾아 보세요. 버스 도착 안내 전광판,
          편의점 자동문, 교통카드 단말기... 각각의 <strong>입력·처리·출력</strong>이 뭔지 한 줄씩
          적어 보면, 세상이 프로그램으로 보이기 시작할 거예요. 그 순간이 개발자의 눈이 떠지는
          순간입니다.
        </div>
      </Section>

      <Section n={3} title="명령을 순서대로: 라면 끓이기 레시피" sub="레시피가 곧 알고리즘이다">
        <p>
          프로그램의 조상님을 하나 꼽으라면 <strong>요리 레시피</strong>예요. "무엇을, 어떤
          순서로, 얼마나" — 정해진 단계를 순서대로 따라가면 누구나 같은 결과를 얻는 절차.
          이렇게 <strong>문제를 해결하는 단계들의 순서 있는 묶음</strong>을 멋진 말로{' '}
          <strong>알고리즘(algorithm)</strong>이라고 부릅니다. 라면 봉지 뒷면에 이미 하나
          인쇄되어 있죠.
        </p>
        <Code>{CODE_RAMEN}</Code>
        <p>
          여기서 두 가지 감각을 가져가면 됩니다. 첫째, <strong>순서가 결과를 바꾼다.</strong>{' '}
          같은 다섯 단계라도 순서를 섞으면 라면이 아니라 참사가 나와요. 컴퓨터는 우리가 쓴
          순서를 절대 알아서 고쳐 주지 않으니, 순서를 정하는 건 온전히 프로그래머의 몫입니다.
          둘째, <strong>한 단계만 빠져도 실패한다.</strong> "물이 끓으면"을 빼먹으면 찬물에
          면을 넣게 되죠. 프로그램의 오류(버그)도 대부분 이런 '빠진 단계, 뒤집힌 순서'에서
          나옵니다.
        </p>
        <div className="tip">
          <b>알고리즘은 코드가 아니에요</b> 알고리즘은 '문제 푸는 절차' 그 자체라서, 한국어로
          쓰든 그림으로 그리든 상관없어요. 코드는 그 절차를 컴퓨터가 알아듣는 언어로 옮긴
          결과물일 뿐이죠. 그래서 좋은 개발자는 코드를 치기 전에 <strong>절차부터</strong>{' '}
          종이에 정리합니다 — 오늘 여러분이 실습에서 할 바로 그 일이요.
        </div>
      </Section>

      <Section n={4} title="프로그래밍 언어는 왜 필요할까" sub="사람과 기계 사이의 번역기">
        <p>
          "그럼 그냥 한국어로 시키면 안 돼요?" — 아주 좋은 질문이에요. 안 되는 이유는 사람의
          말이 <strong>모호함투성이</strong>이기 때문입니다. 우리는 눈치와 경험으로 빈칸을
          채우며 대화하지만, 컴퓨터는 모호함을 <strong>단 1도 견디지 못해요.</strong>
        </p>
        <Code>{CODE_AMBIGUOUS}</Code>
        <p>
          게다가 컴퓨터의 심장인 CPU가 실제로 알아듣는 말은 <strong>0과 1의 나열</strong>이
          전부예요. 전기가 흐른다(1), 안 흐른다(0) — 이 두 가지 신호만으로 모든 걸 처리하죠.
          그렇다고 사람이 0과 1로 직접 지시를 쓰는 건 너무나 고통스럽기 때문에, 그 사이에{' '}
          <strong>프로그래밍 언어</strong>라는 다리를 놓았습니다.
        </p>
        <p>
          그러니까 프로그래밍 언어는 <strong>사람과 기계 사이의 번역기</strong>예요. 사람이
          읽고 쓸 수 있을 만큼은 사람의 말을 닮았고, 기계가 0과 1로 정확히 바꿀 수 있을 만큼은
          엄격한 — 딱 중간의 언어. <span className="icode">Python</span>,{' '}
          <span className="icode">Java</span>, <span className="icode">JavaScript</span> 같은
          이름들을 들어 봤다면, 전부 이 '중간 언어'의 종류들입니다.
        </p>
        <div className="tip">
          <b>언어가 여러 개인 이유</b> 요리 도구에 칼·가위·필러가 따로 있듯, 언어마다 잘하는
          일이 달라요. 웹 화면엔 JavaScript, 데이터·AI엔 Python, 큰 서버엔 Java가 자주
          쓰입니다. 하지만 걱정 마세요 — <strong>'정확한 절차를 순서대로 쓴다'는 뼈대는 모든
          언어가 똑같아서</strong>, 하나를 제대로 배우면 두 번째부터는 훨씬 쉬워져요.
        </div>
      </Section>

      <Section n={5} title="코드가 실행된다는 것" sub="작성 → 실행 → 결과 확인, 그리고 다시">
        <p>
          이제 진짜 코드를 <strong>구경</strong>해 봅시다. 아래는 Python이라는 언어로 쓴 세
          줄짜리 프로그램이에요. <span className="icode">print</span>는 "괄호 안의 내용을
          화면에 출력하라"는 명령입니다.
        </p>
        <Code>{CODE_RUN}</Code>
        <p>
          여기서 꼭 가져가야 할 감각은 하나예요. <strong>코드는 위에서 아래로, 한 줄씩, 쓴
          순서 그대로 실행된다.</strong> 섹션 3의 라면 레시피와 완전히 같은 원리죠. 1번 줄이
          끝나야 2번 줄이 실행되고, 컴퓨터는 중간에 딴생각을 하거나 순서를 바꾸지 않습니다.
        </p>
        <p>
          그리고 개발은 '한 번 쓰고 끝'이 아니라 <strong>사이클</strong>이에요. 쓰고, 돌려 보고,
          결과가 생각과 다르면 고치고, 다시 돌려 보고 — 이 반복 자체가 개발이라는 일의
          본모습입니다.
        </p>
        <Code>{CODE_CYCLE}</Code>
        <div className="tip">
          <b>에러는 선생님이에요</b> 코드를 돌렸는데 빨간 글씨(에러)가 나오면 심장이 철렁하죠.
          하지만 에러 메시지는 컴퓨터가 주는 가장 친절한 힌트예요 — "몇 번째 줄의, 어떤 지시를,
          왜 못 알아들었는지"를 알려 주거든요. 앞으로 에러를 만나면 겁내지 말고{' '}
          <strong>읽어 보는</strong> 습관부터 들이세요. 그게 실력이 느는 가장 빠른 길입니다.
        </div>
      </Section>

      <Section n={6} title="개발자는 무슨 일을 할까" sub="문제를 코드로 푸는 직업">
        <p>
          개발자를 '하루 종일 코드만 치는 사람'으로 상상하기 쉽지만, 본질은 다릅니다.
          개발자는 <strong>문제를 코드로 푸는 사람</strong>이에요. "버스가 언제 올지 몰라
          불편하다"는 문제를 도착 안내 앱으로, "손으로 계산하니 실수가 난다"는 문제를 자동
          계산 프로그램으로 — 세상의 불편함을 찾아 <strong>정확한 절차</strong>로 바꿔 내는
          직업이죠.
        </p>
        <p>
          푸는 문제의 종류에 따라 분야도 다양하게 갈라져요. 웹사이트를 만드는{' '}
          <strong>웹 개발자</strong>, 스마트폰 앱을 만드는 <strong>앱 개발자</strong>, 게임 속
          세계를 짓는 <strong>게임 개발자</strong>, 데이터에서 답을 찾고 인공지능을 만드는{' '}
          <strong>AI·데이터 개발자</strong>, 그리고 이 모든 서비스가 돌아가는 서버를 책임지는{' '}
          <strong>서버(백엔드) 개발자</strong>까지. 쓰는 언어와 도구는 달라도, 전원의
          공통분모는 오늘 배운 것 — <strong>문제를 컴퓨터가 알아들을 만큼 정확한 단계로 쪼개는
          능력</strong>입니다.
        </p>
        <p>
          그래서 오늘 이 40분이 그냥 워밍업이 아니에요. "컴퓨터는 시킨 대로만 한다",
          "입력→처리→출력", "순서가 결과를 정한다", "모호함을 정확함으로 바꾼다" — 이 네
          문장은 여러분이 어떤 분야의 개발자가 되든 <strong>끝까지 들고 가는 출발점</strong>
          입니다.
        </p>
        <div className="tip">
          <b>코딩 = 개발의 일부</b> 실제 개발자의 시간은 코드 치기 반, 나머지 반은 '문제를
          이해하고 절차를 설계하고 동료와 맞추는 일'이에요. 그래서 오늘처럼 코드 없이 절차를
          고민하는 연습이, 타자 연습보다 백 배 중요한 기초 체력이 됩니다.
        </div>
      </Section>

      <Section n={7} title="첫 실습: 사람을 프로그래밍해 보기" sub="모호한 지시는 어떻게 실패하는가">
        <p>
          이론은 여기까지! 이제 컴퓨터가 요구하는 '정확함'이 어떤 느낌인지 직접 겪어 볼
          차례예요. 준비물은 컴퓨터가 아니라 <strong>종이와 펜, 그리고 친구 한 명</strong>
          입니다. 친구가 컴퓨터(로봇) 역할을 맡아요.
        </p>
        <Code>{CODE_DRAW}</Code>
        <p>
          이 놀이의 핵심 규칙은 <strong>"로봇은 질문할 수 없다"</strong>예요. 진짜 컴퓨터도
          그렇거든요. 지시가 모호하면 되묻는 대신, 이상한 결과를 내거나 멈춰 버립니다.
          "창문은 알아서"라고 말한 순간 그림이 산으로 가는 경험 — 그게 바로 전 세계 개발자들이
          매일 겪는 버그의 정체예요.
        </p>
        <p>
          그리고 오늘의 본 과제. <strong>'아침에 일어나 학교 가기'를 컴퓨터가 이해할 수준으로
          15단계 이상 쪼개서 종이에 써 보세요.</strong> 이 과정에는 이름도 있어요 — 큰 문제를
          컴퓨터가 처리할 수 있는 작은 단계로 나누는 것, 개발자들이 매일 하는 일의 심장부입니다.
        </p>
        <Code>{CODE_HOMEWORK}</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">
            축하해요 — 코드를 한 줄도 쓰지 않고, 프로그래밍의 심장을 이해했습니다.{' '}
            <strong>컴퓨터는 시킨 것만 시킨 그대로 하는 기계</strong>이고, 프로그램은{' '}
            <strong>정확한 지시의 순서 있는 묶음</strong>이며, 프로그래밍 언어는 사람과 0과 1
            사이의 <strong>번역기</strong>라는 것. 그리고 등교 과정을 15단계로 쪼개면서, 큰
            문제를 작은 단계로 나누는 개발자의 눈을 처음 떠 봤어요. 다음 코스에서는 이 '쪼개는
            눈'을 본격적으로 훈련합니다 — 패턴을 찾고, 불필요한 것을 걷어 내고, 절차를
            설계하는 생각법이요. <Link to="/learn/lv1-computational-thinking"><strong>컴퓨터처럼
            생각하기: 컴퓨팅 사고</strong></Link> 코스에서 이어서 만나요.
          </p>
        </div>
      </div>
    </div>
  );
}
