// 이 파일이 하는 일: "컴퓨터처럼 생각하기: 컴퓨팅 사고" 코스 — 코딩을 한 번도 안 해 본
// 사람을 위한 초급 과정의 첫 강좌. 코드를 한 줄도 쓰지 않고, 문제를 쪼개고(분해),
// 반복을 찾고(패턴 인식), 중요한 것만 남기고(추상화), 순서를 세우는(알고리즘) 네 가지
// 생각 기술을 7개 섹션으로 안내하는 정적 학습 페이지. 마지막엔 자판기·횡단보도 같은
// 실생활 문제를 순서도로 그려 보며 "다음 강좌부터 이 그림이 코드가 된다"로 연결한다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제(순서도·의사코드)는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 예제 상수들 ──
// 학습 포인트: 이 강좌의 '코드'는 전부 한국어 의사코드와 그림(ASCII)이다.
// 프로그래밍 언어 문법이 하나도 안 나와도, 컴퓨팅 사고는 충분히 연습할 수 있다.

const CODE_FOUR_PILLARS = `컴퓨팅 사고의 네 기둥
─────────────────────────────────────────────
① 분해        큰 문제를 풀 수 있는 크기의 작은 문제들로 쪼갠다
② 패턴 인식   쪼갠 조각들 사이에서 반복되는 모양을 찾는다
③ 추상화      목적에 필요 없는 정보는 지우고 중요한 것만 남긴다
④ 알고리즘    남은 것들을 순서 있는 해결 절차로 늘어세운다

포인트: ①→②→③→④ 순서로 생각이 흘러가요.
쪼개야 패턴이 보이고, 패턴이 보여야 무엇이 중요한지 알고,
중요한 것만 남아야 깔끔한 순서(알고리즘)를 세울 수 있습니다.`;

const CODE_PARTY = `문제: "친구 생일파티를 준비하자"   ← 막막하다!

쪼개 보기 (1단계)
├─ 장소 정하기
├─ 사람 부르기
├─ 먹을 것 준비하기
└─ 선물·이벤트 준비하기

더 쪼개 보기 (2단계: "먹을 것 준비하기"만)
├─ 몇 명이 오는지 세기
├─ 메뉴 정하기 (알레르기 있는 친구 확인!)
├─ 케이크 주문하기
└─ 음료 사 오기

포인트: "생일파티 준비"는 못 해도
"몇 명이 오는지 세기"는 지금 당장 할 수 있어요.
막막함은 문제가 어려워서가 아니라, 문제가 커서 생깁니다.`;

const CODE_PATTERN = `친구 20명에게 초대장을 보내야 한다면?

민지에게 보내기: 이름 쓰기 → 날짜 쓰기 → 장소 쓰기 → 보내기
서준에게 보내기: 이름 쓰기 → 날짜 쓰기 → 장소 쓰기 → 보내기
하윤에게 보내기: 이름 쓰기 → 날짜 쓰기 → 장소 쓰기 → 보내기
... (17번 더)

어? 이름만 바뀌고 나머지는 똑같네?  ← 이게 '패턴 발견'

패턴으로 다시 쓰기:
"친구 목록의 각 사람에 대해 반복한다.
   그 사람 이름 쓰기 → 날짜 쓰기 → 장소 쓰기 → 보내기"

20줄짜리 일이 2줄짜리 규칙이 됐어요.
컴퓨터는 이런 '반복 규칙'을 실행하는 데 세계 최강입니다.`;

const CODE_SUBWAY = `실제 서울 지도                 지하철 노선도
─────────────────────────────────────────────
강의 굽이굽이 모양       →   (지운다)
건물·산·도로             →   (지운다)
역 사이의 실제 거리      →   (지운다)
역의 이름과 순서         →   남긴다!
어디서 갈아타는지        →   남긴다!

노선도는 '틀린 지도'가 아니라
"목적지에 가려면 몇 정거장, 어디서 환승?"이라는
질문에만 답하도록 다듬어진 지도예요.

이렇게 목적에 맞춰 중요한 것만 남기는 일 = 추상화`;

const CODE_FLOW_SYMBOLS = `순서도(플로차트)의 기본 기호 3가지

(  시작 / 끝  )   ← 둥근 모양: 여기서 출발, 여기서 종료
[  처 리  ]       ← 네모: 실제로 '하는 일' (물 붓기, 문 열기)
<  판 단 ? >      ← 마름모: 예/아니오로 갈라지는 질문

화살표(→)로 기호들을 이으면 '해결의 흐름'이 됩니다.

예: 라면 끓이기
(시작) → [물 550ml 붓기] → [끓이기]
      → <물이 끓는가?> ─ 아니오 → 다시 [끓이기]로
                       └ 예 → [면·스프 넣기] → [4분 기다리기] → (끝)`;

const CODE_TWO_WAYS = `같은 문제: "1부터 10까지 모두 더하라"

알고리즘 A (하나씩 더하기)
1+2=3, 3+3=6, 6+4=10, ... 9번 더해서 55

알고리즘 B (짝지어 더하기 — 수학자 가우스의 방법)
1+10=11, 2+9=11, 3+8=11, 4+7=11, 5+6=11
→ 11이 5쌍이니까 11 x 5 = 55

둘 다 정답 55에 도착하지만, B가 훨씬 빨라요.
같은 문제라도 알고리즘은 여러 개 —
그중 더 좋은 것을 고르는 안목도 컴퓨팅 사고의 일부입니다.`;

const CODE_PSEUDO_IF = `의사코드: 문법 없이 한국어로 쓰는 코드

── 조건은 "만약 ~라면 / 아니면" ──

만약 비가 온다면
    우산을 챙긴다
아니면
    모자를 쓴다

만약 편의점 결제 금액이 포인트보다 작거나 같다면
    포인트로 결제한다
아니면
    카드로 결제한다

포인트: 컴퓨터의 판단은 전부 이 모양이에요.
"만약 (예/아니오 질문) 이라면 → 이 길, 아니면 → 저 길"`;

const CODE_PSEUDO_LOOP = `── 반복은 "~할 때까지 반복" / "~에 대해 각각" ──

물이 끓을 때까지 반복한다
    3초 기다린다
    물 상태를 확인한다

신발장의 각 신발에 대해 반복한다
    먼지를 턴다
    제자리에 넣는다

비밀번호가 맞을 때까지 반복한다
    비밀번호를 입력받는다
    만약 5번 틀렸다면
        계정을 잠그고 반복을 멈춘다

포인트: 조건(만약)과 반복(~까지)만 있으면
세상 대부분의 절차를 적을 수 있습니다. 진짜예요.`;

const CODE_VENDING = `자판기를 순서도 언어로 읽어 보기

(시작)
  → [돈 투입을 기다린다]
  → <투입 금액 >= 음료 가격 ?>
       아니오 → [금액 부족 표시] → 다시 [돈 투입을 기다린다]로   ← 반복!
       예 → [버튼 입력을 기다린다]
  → <선택한 음료 재고가 있는가?>
       아니오 → [품절 표시] → 다시 [버튼 입력을 기다린다]로
       예 → [음료를 내보낸다] → [거스름돈을 내보낸다] → (끝)

우리가 배운 게 전부 들어 있죠?
마름모 2개 = 조건, "다시 ~로" = 반복, 네모들 = 처리.
자판기 설계자는 코드를 쓰기 전에 먼저 이 그림을 그렸을 거예요.`;

const CODE_PRACTICE = `실습(50분 중 15분): 엘리베이터를 순서도 한 장으로

상황: 3층에 서 있던 엘리베이터. 누군가 7층 버튼을 눌렀다.

종이에 그려 볼 것:
(시작) 과 (끝)은 어디인가?
[처리] 네모에 들어갈 일은? (문 닫기, 위로 이동, 문 열기 ...)
<판단> 마름모에 들어갈 질문은? (현재 층 == 목표 층 ?)
"아직 아니오"일 때 어디로 돌아가는가? ← 반복이 숨어 있다!

힌트: 다 그렸다면 "누군가 문 사이에 서 있다면?"을 추가해 보세요.
판단 마름모가 하나 더 생길 거예요. 현실의 예외를 그림에
반영하는 것 — 그게 바로 개발자가 매일 하는 일입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다 — 사실 이것도 '패턴 인식'이다.
// 섹션 7개가 전부 같은 구조(번호·제목·부제·본문)라는 패턴을 찾아, 하나의 부품으로 만들었다.
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 Lv1ComputationalThinkingPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>컴퓨터처럼 생각하기<br />: 컴퓨팅 사고 🧩</h1>
        <p>
          코딩의 첫 수업인데, 오늘은 <strong>코드를 한 줄도 쓰지 않아요.</strong> 대신 코드보다
          먼저 필요한 것 — 문제를 <strong>쪼개고</strong>, <strong>패턴을 찾고</strong>,{' '}
          <strong>순서를 세우는</strong> 생각의 근육을 기릅니다. 이 근육은 코딩 없이도 기를 수
          있고, 한번 붙으면 어떤 언어를 배우든 그대로 씁니다. 시험공부 계획을 세우는 데도요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습: 엘리베이터 순서도 그리기</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>
          <strong>컴퓨팅 사고(Computational Thinking)</strong>는 "컴퓨터처럼 계산을 빨리 하는
          능력"이 아니에요. <strong>컴퓨터에게 시킬 수 있을 만큼, 문제를 명확하게 정리하는
          사람의 생각 기술</strong>입니다. 컴퓨터는 놀랍도록 빠르지만 눈치가 전혀 없어서,
          "알아서 잘 해 줘"가 통하지 않아요. 그래서 시키는 사람이 문제를 대신 정리해 줘야
          하고, 그 정리법에는 이름 붙은 네 가지 기둥이 있습니다.
        </p>
        <Code>{CODE_FOUR_PILLARS}</Code>
        <p>
          이 네 가지가 이번 강좌의 전부예요. 섹션 2~5에서 하나씩 만나고, 섹션 6~7에서 합쳐서
          써 봅니다. 중요한 건, 이 기둥들이 <strong>컴퓨터 문제에만 쓰이는 게 아니라는 것</strong>.
          방 청소, 시험공부 계획, 동아리 행사 준비 — 일상의 막막한 문제에 그대로 적용됩니다.
          실제로 이번 시간의 연습 문제들은 전부 일상에서 가져올 거예요.
        </p>
        <div className="tip">
          <b>왜 코딩보다 먼저?</b> 프로그래밍 언어는 '표현 수단'이고, 컴퓨팅 사고는 '표현할
          내용'이에요. 내용 없이 수단부터 배우면, 문법은 아는데 뭘 만들지 모르는 상태가 됩니다.
          거꾸로 생각이 서 있으면, 언어는 그 생각을 받아 적는 도구일 뿐이에요. 다음 강좌부터
          배울 HTML·JavaScript가 훨씬 덜 무서워집니다.
        </div>
      </Section>

      <Section n={2} title="분해 — 큰 문제를 잘게 쪼개기" sub="작은 문제는 풀 수 있는 크기가 된다">
        <p>
          "친구 생일파티를 준비해 줘"라는 말을 들으면 잠깐 막막하죠. 그런데 그 막막함의 정체를
          들여다보면, 문제가 <strong>어려운</strong> 게 아니라 <strong>큰</strong> 거예요.
          분해(Decomposition)는 그 큰 덩어리를, 하나하나는 만만해 보일 때까지 쪼개는
          기술입니다.
        </p>
        <Code>{CODE_PARTY}</Code>
        <p>
          쪼개는 순간 두 가지가 생깁니다. 첫째, <strong>시작점</strong>이 생겨요. "파티
          준비"는 어디서부터 손대야 할지 모르지만 "오는 사람 수 세기"는 지금 바로 할 수
          있죠. 둘째, <strong>나눠 맡기</strong>가 가능해져요. 케이크는 내가, 초대장은 네가 —
          실제 개발 현장에서 여러 명이 한 프로그램을 함께 만들 수 있는 이유도, 큰 문제가
          작은 조각들로 분해되어 있기 때문입니다.
        </p>
        <div className="tip">
          <b>얼마나 잘게?</b> 정답 기준이 하나 있어요 — <strong>"이건 그냥 하면 되네"라는
          생각이 들 때까지.</strong> 조각을 보고도 여전히 막막하면 아직 덜 쪼갠 거예요.
          "메뉴 정하기"가 막막하면 "알레르기 있는 친구 확인 → 후보 3개 적기 → 투표"로 한 번
          더 쪼개면 됩니다. 나중에 배울 프로그래밍의 '함수'가 정확히 이 조각 하나에
          해당해요.
        </div>
      </Section>

      <Section n={3} title="패턴 인식 — 반복되는 것 찾기" sub="한 번 푼 방법을 재사용하는 습관">
        <p>
          문제를 쪼개 놓고 조각들을 늘어놓으면, 신기하게도 <strong>비슷하게 생긴 조각들</strong>이
          눈에 들어오기 시작해요. 초대장 20장 보내기, 수학 문제집의 같은 유형 10문제, 매주
          반복되는 주번 활동 — 패턴 인식(Pattern Recognition)은 이 "어? 또 이 모양이네?"를
          알아차리는 눈입니다.
        </p>
        <Code>{CODE_PATTERN}</Code>
        <p>
          패턴을 찾으면 일이 <strong>절반 이하로</strong> 줄어요. 20개의 서로 다른 일이 아니라
          "규칙 1개 + 반복 20번"이 되니까요. 그리고 더 큰 보상이 있습니다 — <strong>비슷한
          문제는 비슷한 해법을 가진다</strong>는 사실이에요. 자판기에서 "돈이 모자라면 더
          기다린다"를 풀어 봤다면, 엘리베이터의 "목표 층이 아니면 더 움직인다"도 같은
          모양이라는 걸 알아보게 됩니다. 한 번 푼 방법이 재산이 되는 거죠.
        </p>
        <div className="tip">
          <b>오늘부터 하는 연습</b> 숙제나 집안일을 하다가 "아까도 이거 했는데"라는 기분이
          들면 멈추고 적어 보세요. <strong>무엇이 똑같고, 무엇만 바뀌는지.</strong> 위의 초대장
          예시에선 '이름'만 바뀌었죠. 이 "바뀌는 부분"에 이름을 붙이는 것이 나중에 배울
          '변수'의 정체입니다. 벌써 프로그래밍의 절반을 만난 셈이에요.
        </div>
      </Section>

      <Section n={4} title="추상화 — 중요한 것만 남기기" sub="지하철 노선도가 실제 지도가 아닌 이유">
        <p>
          지하철 노선도를 떠올려 보세요. 실제 서울 지도와 비교하면 '엉터리'예요. 노선은 자로 잰
          듯 직선이고, 역 사이 간격도 실제 거리와 다르고, 한강은 대충 그려져 있죠. 그런데
          아무도 불평하지 않습니다. 왜일까요?
        </p>
        <Code>{CODE_SUBWAY}</Code>
        <p>
          노선도의 목적은 "어느 역에서 타고, 어디서 갈아타는가"라는 질문에 답하는 것뿐이에요.
          그 목적에 강의 모양이나 실제 거리는 필요 없으니 <strong>과감히 버린</strong> 겁니다.
          이렇게 <strong>목적에 필요한 정보만 남기고 나머지를 지우는 일</strong>이
          추상화(Abstraction)예요. 버려서 부정확해지는 게 아니라, 버려서 비로소 쓸모 있어지는
          것 — 단순화가 곧 이해력입니다.
        </p>
        <p>
          섹션 7에서 그릴 순서도도 마찬가지예요. 엘리베이터의 모터 종류, 케이블 굵기, 버튼
          색깔은 전부 지우고 <strong>"층 버튼에 어떻게 반응하는가"라는 목적에 필요한 동작만</strong>{' '}
          남길 겁니다. 무엇을 버릴지 결정하는 것도 실력이에요.
        </p>
        <div className="tip">
          <b>추상화는 이미 쓰고 있다</b> 친구에게 학교 가는 길을 알려 줄 때 "전봇대 37개를
          지나서"라고 하지 않죠. "편의점에서 좌회전"처럼 <strong>길 찾기에 중요한 것만</strong>{' '}
          말합니다. 그게 추상화예요. 컴퓨팅 사고는 새 능력을 심는 게 아니라, 이미 쓰고 있는
          능력에 이름을 붙여 의식적으로 꺼내 쓰게 만드는 과정에 가깝습니다.
        </div>
      </Section>

      <Section n={5} title="알고리즘 — 순서 있는 해결책" sub="시작 → 처리 → 판단 → 끝의 흐름">
        <p>
          이제 재료가 다 모였어요. 문제를 쪼갰고(분해), 반복을 찾았고(패턴), 필요 없는 건
          버렸습니다(추상화). 마지막 기둥은 남은 조각들을 <strong>순서대로 늘어세우는 것</strong> —
          이 순서 있는 해결 절차를 <strong>알고리즘(Algorithm)</strong>이라고 부릅니다. 거창한
          말 같지만 요리 레시피, 가구 조립 설명서, 라면 봉지 뒷면이 전부 알고리즘이에요.
        </p>
        <p>
          알고리즘을 그림으로 나타낸 것이 <strong>순서도(플로차트)</strong>입니다. 기호는 딱
          세 개만 기억하면 돼요.
        </p>
        <Code>{CODE_FLOW_SYMBOLS}</Code>
        {/* 학습 포인트: 순서도의 '판단 마름모'는 예/아니오 두 갈래로만 갈라진다.
            아래 SVG도 그 규칙대로 — 끓는가? 에서 예/아니오 두 화살표만 나간다. */}
        <svg className="diagram" viewBox="0 0 640 210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="라면 끓이기 순서도. 시작에서 물 붓기, 끓이기로 진행하고, 물이 끓는가라는 판단에서 아니오면 끓이기로 되돌아가고 예면 면과 스프를 넣고 끝난다.">
          <rect x="20" y="80" width="90" height="44" rx="22" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="65" y="107" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">시작</text>

          <rect x="140" y="80" width="100" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="190" y="107" textAnchor="middle" fontSize="12" fill="var(--ink)">물 붓기</text>

          <rect x="270" y="80" width="100" height="44" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="107" textAnchor="middle" fontSize="12" fill="var(--ink)">끓이기</text>

          <polygon points="455,66 520,102 455,138 390,102" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="455" y="106" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--ink)">끓는가?</text>

          <rect x="545" y="80" width="80" height="44" rx="22" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="585" y="100" textAnchor="middle" fontSize="12" fontWeight="600" fill="var(--ink)">면·스프</text>
          <text x="585" y="116" textAnchor="middle" fontSize="11" fill="var(--muted)">→ 끝</text>

          <line x1="110" y1="102" x2="134" y2="102" stroke="var(--line)" strokeWidth="2" />
          <path d="M140 102 L130 97 L130 107 Z" fill="var(--muted)" />
          <line x1="240" y1="102" x2="264" y2="102" stroke="var(--line)" strokeWidth="2" />
          <path d="M270 102 L260 97 L260 107 Z" fill="var(--muted)" />
          <line x1="370" y1="102" x2="384" y2="102" stroke="var(--line)" strokeWidth="2" />
          <path d="M390 102 L380 97 L380 107 Z" fill="var(--muted)" />

          <line x1="520" y1="102" x2="539" y2="102" stroke="var(--teal)" strokeWidth="2" />
          <path d="M545 102 L535 97 L535 107 Z" fill="var(--teal)" />
          <text x="532" y="92" textAnchor="middle" fontSize="11" fill="var(--teal)">예</text>

          {/* 아니오: 판단에서 아래로 내려가 '끓이기'로 되돌아가는 반복 화살표 */}
          <line x1="455" y1="138" x2="455" y2="176" stroke="var(--amber)" strokeWidth="2" strokeDasharray="5 4" />
          <line x1="455" y1="176" x2="320" y2="176" stroke="var(--amber)" strokeWidth="2" strokeDasharray="5 4" />
          <line x1="320" y1="176" x2="320" y2="130" stroke="var(--amber)" strokeWidth="2" strokeDasharray="5 4" />
          <path d="M320 124 L315 134 L325 134 Z" fill="var(--amber)" />
          <text x="390" y="168" textAnchor="middle" fontSize="11" fill="var(--amber)">아니오 — 다시 끓이기 (반복!)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 마름모(판단)에서 '아니오'가 뒤로 돌아가는 화살표 — 순서도에 반복이 그려지는 방식</p>
        <p>
          한 가지 더. 알고리즘엔 <strong>정답이 하나가 아니에요.</strong> 같은 문제라도 도착만
          한다면 여러 길이 있고, 그중엔 더 빠르고 우아한 길이 있습니다.
        </p>
        <Code>{CODE_TWO_WAYS}</Code>
        <div className="tip">
          <b>좋은 알고리즘의 조건</b> ① <strong>명확할 것</strong> — 눈치 없는 컴퓨터도 헷갈리지
          않게, 각 단계가 하나의 뜻만 갖기. ② <strong>끝날 것</strong> — "끓을 때까지"처럼
          반복엔 반드시 빠져나오는 조건이 있어야 해요. 빠져나올 수 없는 반복은 영원히 도는
          '무한 루프'가 됩니다(프로그램이 멈추는 흔한 원인!). ③ <strong>같은 입력엔 같은
          결과</strong> — 어제는 되고 오늘은 안 되는 절차는 절차가 아니죠.
        </div>
      </Section>

      <Section n={6} title="의사코드 — 한국어로 쓰는 코드" sub="문법 걱정 없이 논리에만 집중하는 연습">
        <p>
          순서도가 알고리즘의 '그림'이라면, <strong>의사코드(pseudocode)</strong>는 알고리즘의
          '글'이에요. 진짜 프로그래밍 언어가 아니라, <strong>사람 말(한국어)로 코드 흉내를 내며
          쓰는 글</strong>입니다. 세미콜론이 어쩌고 괄호가 어쩌고 하는 문법 걱정이 0이라서,
          순수하게 <strong>논리에만</strong> 집중할 수 있어요. 실제 개발자들도 복잡한 문제 앞에선
          코드보다 의사코드를 먼저 씁니다.
        </p>
        <p>
          재료는 놀랍게도 두 가지면 충분해요. 갈림길을 만드는 <strong>조건</strong>과, 되돌아가게
          하는 <strong>반복</strong>.
        </p>
        <Code>{CODE_PSEUDO_IF}</Code>
        <Code>{CODE_PSEUDO_LOOP}</Code>
        <p>
          눈치챘나요? 조건의 "만약 ~라면"은 순서도의 <strong>마름모</strong>이고, "~할 때까지
          반복"은 <strong>뒤로 돌아가는 화살표</strong>예요. 순서도와 의사코드는 같은 생각을
          그림으로 그리느냐, 글로 쓰느냐의 차이일 뿐입니다. 그리고 다음 강좌들에서 만날 진짜
          코드의 <span className="icode">if</span>와 <span className="icode">while</span>은, 이
          한국어 문장을 영어 낱말로 바꿔 쓴 것에 지나지 않아요.
        </p>
        <div className="tip">
          <b>직접 해 보기 (5분)</b> "아침에 일어나서 학교 갈 준비"를 의사코드 7줄 이내로 써
          보세요. 조건("만약 늦잠을 잤다면 → 아침은 생략한다")과 반복("가방에 오늘 시간표의
          각 과목 교과서를 넣는다")이 최소 하나씩 들어가면 성공입니다. 잘 써졌는지 확인하는
          법: <strong>동생에게 그대로 시켜 보기.</strong> 동생이 "이게 무슨 말이야?"라고 하는
          줄이 바로 컴퓨터도 못 알아들을 줄이에요.
        </div>
      </Section>

      <Section n={7} title="실생활 문제를 순서도로 그리기" sub="이 그림이 다음 강좌에서 코드가 된다">
        <p>
          이제 네 기둥을 전부 합쳐 봅시다. 매일 스치는 기계들 — 자판기, 횡단보도 신호등,
          엘리베이터 — 이 전부 <strong>누군가 그린 순서도가 코드가 되어 돌아가는 것</strong>들이에요.
          먼저 자판기를 우리가 배운 언어로 읽어 볼게요.
        </p>
        <Code>{CODE_VENDING}</Code>
        <p>
          횡단보도 신호등도 같은 눈으로 볼 수 있어요. "보행 버튼이 눌렸는가?"(조건) →
          "차량 신호를 노란불로" → "빨간불로" → "보행 초록불 켜기" → "30초를 셀 때까지
          반복하며 숫자 표시" → 다시 처음으로(전체가 큰 반복). <strong>조건과 반복이 억지로
          끼워 넣은 게 아니라, 세상의 동작을 정직하게 적기만 해도 자연스럽게 등장한다</strong>는
          걸 느끼는 것이 이 섹션의 목표입니다.
        </p>
        <p>이제 여러분 차례예요. 이번 강좌의 실습입니다.</p>
        <Code>{CODE_PRACTICE}</Code>
        <div className="tip">
          <b>제출 전 자가 점검</b> ① 시작과 끝이 둥근 모양으로 있는가? ② 마름모에서 나가는
          화살표에 <strong>예/아니오가 둘 다</strong> 붙어 있는가? ③ "아니오"가 갈 곳을 잃고
          허공에 떠 있지 않은가? ④ 어떤 경로로 따라가도 언젠가 (끝)에 도착하는가? — ④가
          안 되면 무한 루프입니다. 손가락으로 화살표를 따라가며 직접 검사해 보세요. 이
          '손가락 실행'이 개발자들이 말하는 디버깅의 원형이에요.
        </div>
        <div className="warn">
          <b>완벽한 그림은 없어요</b> 같은 엘리베이터라도 그리는 사람마다 순서도가 다릅니다
          — 알고리즘은 여러 개일 수 있다고 했죠(섹션 5). 친구와 그림을 비교하며 "너는 왜
          여기서 판단을 넣었어?"를 이야기하는 것이 정답 맞히기보다 훨씬 좋은 공부입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🧩 여기까지 왔다면</h3>
          <p className="muted">
            코드를 한 줄도 안 썼는데, 여러분은 이미 개발자의 하루를 살아 봤어요. 문제를
            쪼개고(분해), 반복을 찾고(패턴), 필요 없는 걸 버리고(추상화), 순서를 세워
            그림으로 그렸으니까요(알고리즘·순서도). 이 네 근육은 앞으로 배울 모든 것의
            바탕이 됩니다. 그런데 머릿속 순서도를 <strong>진짜 화면</strong>으로 만들려면,
            이제 컴퓨터가 알아듣는 표현 수단이 하나 필요해요. 다음{' '}
            <Link to="/learn/lv1-first-html"><strong>나의 첫 웹페이지: HTML 첫걸음</strong></Link>{' '}
            강좌에서, 오늘 세운 생각을 브라우저에 처음으로 띄워 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
