// 이 파일이 하는 일: "반복문: 지루한 일은 컴퓨터에게" 코스 — 코딩을 처음 배우는 수습(중·고등학생
// 눈높이)에게 반복문이 왜 필요한지에서 출발해, while·for·누적 계산·조건과의 콤보·배열 맛보기·
// 별 그림 실습·흔한 함정까지 8개 섹션으로 안내하는 정적 학습 페이지.
// 프레이밍은 "같은 일을 100번? 그건 컴퓨터의 일" — 사람은 규칙을 찾고, 반복은 기계에게 맡긴다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_COPYPASTE = `// "안녕하세요"를 100번 출력하라는 미션을 받았다면?

// 방법 1: 복사-붙여넣기 100번 (사람의 방식... 이지만 최악)
console.log("안녕하세요");   // 1번째
console.log("안녕하세요");   // 2번째
console.log("안녕하세요");   // 3번째
// ... 97줄이 더 남았어요. 그리고 "안녕하세요!"로 바꾸라는
// 요청이 오면? 100줄을 전부 다시 고쳐야 합니다.

// 방법 2: 반복문 (컴퓨터의 방식)
for (let i = 1; i <= 100; i = i + 1) {
  console.log("안녕하세요");
}
// 딱 3줄. 100번이든 100만 번이든 숫자 하나만 바꾸면 끝.
// 문구를 바꿀 때도 한 줄만 고치면 됩니다.`;

const CODE_WHILE = `// while — "조건이 참(true)인 동안" 계속 반복한다
let count = 1;              // ① 카운터: 몇 번째인지 세는 변수

while (count <= 5) {        // ② 조건: count가 5 이하인 동안만
  console.log(count + "번째 인사!");
  count = count + 1;        // ③ 변화: 한 바퀴 돌 때마다 1씩 커진다
}

// 실행 결과:
// 1번째 인사!
// 2번째 인사!
// 3번째 인사!
// 4번째 인사!
// 5번째 인사!
// count가 6이 되는 순간 조건(count <= 5)이 거짓 → 반복 끝.`;

const CODE_INFINITE = `// 무한루프 — 조건이 영원히 참이면 컴퓨터는 영원히 돈다
let count = 1;
while (count <= 5) {
  console.log("멈추지 않아요...");
  // count를 키우는 줄을 깜빡했다!
  // count는 계속 1 → 조건은 영원히 참 → 무한루프
}

// 일부러 한 번 겪어 보세요. 브라우저 탭이 멈추면
// 탭을 닫거나, 콘솔이라면 Ctrl + C 로 강제 종료합니다.
// 교훈: while을 쓸 땐 "조건을 거짓으로 만드는 줄"이
// 반복문 안에 반드시 있는지부터 확인하세요.`;

const CODE_FOR = `// for — 반복의 3요소를 한 줄에 모아 둔 '반복의 정석'
//
//    ① 초기화        ② 조건       ③ 증감
//    (시작할 때 1번)  (매 바퀴 검사) (매 바퀴 끝에 실행)
for (let i = 1;      i <= 10;     i = i + 1) {
  console.log(i);
}
// 출력: 1 2 3 4 5 6 7 8 9 10

// 읽는 법: "i를 1에서 시작해서, 10 이하인 동안, 1씩 키우며 반복해라"
// while로 흩어져 있던 ①②③이 첫 줄에 모여 있어서
// 한눈에 '몇 번 도는지'가 보입니다. 그래서 횟수가 정해진
// 반복엔 거의 항상 for를 씁니다.

// 참고: i = i + 1 은 i++ 로 줄여 쓸 수 있어요. 뜻은 같습니다.`;

const CODE_SUM = `// 1부터 100까지의 합 — 반복 속에서 계산을 '쌓는' 패턴
let sum = 0;                     // ① 반복 전에 0으로 시작 (빈 저금통)

for (let i = 1; i <= 100; i++) {
  sum = sum + i;                 // ② 매 바퀴 i를 저금통에 더한다
}

console.log(sum);                // ③ 반복이 끝나면 결과 확인 → 5050

// sum의 변화를 따라가 보면:
// i=1일 때 sum = 0 + 1 = 1
// i=2일 때 sum = 1 + 2 = 3
// i=3일 때 sum = 3 + 3 = 6
// ...
// i=100일 때 sum = 4950 + 100 = 5050
// 이렇게 값을 쌓아 가는 변수를 '누적 변수'라고 불러요.`;

const CODE_COMBO = `// 반복 + 조건 콤보: 구구단에서 '짝수 단'만 출력하기
for (let dan = 2; dan <= 9; dan++) {
  if (dan % 2 === 0) {                  // dan을 2로 나눈 나머지가 0이면 짝수
    console.log(dan + "단은 짝수 단!");
  }
}
// 출력: 2단은 짝수 단! / 4단은 짝수 단! / 6단은 짝수 단! / 8단은 짝수 단!

// 반복문이 "모든 후보를 훑고", 조건문이 "그중 골라낸다" —
// 두 개념이 만나는 순간 표현력이 폭발합니다.`;

const CODE_BREAK_CONTINUE = `// break — 반복을 '통째로' 탈출한다
for (let i = 1; i <= 10; i++) {
  if (i === 4) {
    break;              // i가 4가 되는 순간 반복문 전체 종료
  }
  console.log(i);
}
// 출력: 1 2 3  (4부터는 아예 실행되지 않음)

// continue — '이번 바퀴만' 건너뛰고 다음 바퀴로
for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;           // 3일 때만 아래 줄을 건너뛴다
  }
  console.log(i);
}
// 출력: 1 2 4 5  (3만 빠지고 반복은 계속됨)

// 비유: break는 "하교", continue는 "이 수업만 조퇴".`;

const CODE_ARRAY = `// 배열 — 여러 값을 순서대로 담는 한 상자
const fruits = ["사과", "바나나", "포도", "귤"];

// 인덱스(번호)는 0부터 시작합니다!
console.log(fruits[0]);        // "사과"  ← 첫 번째가 0번
console.log(fruits[3]);        // "귤"    ← 네 번째가 3번
console.log(fruits.length);    // 4       ← 상자에 든 개수

// for로 배열의 모든 항목 순회하기
for (let i = 0; i < fruits.length; i++) {
  console.log(i + "번 칸: " + fruits[i]);
}
// 출력:
// 0번 칸: 사과
// 1번 칸: 바나나
// 2번 칸: 포도
// 3번 칸: 귤

// 조건이 i <= fruits.length가 아니라 i < fruits.length인 이유:
// 개수는 4지만 마지막 번호는 3이니까요. (0, 1, 2, 3)`;

const CODE_STARS = `// 별(★)을 한 줄씩 늘려 삼각형 만들기
for (let line = 1; line <= 5; line++) {
  let stars = "";                       // 이번 줄에 쌓을 빈 문자열
  for (let j = 1; j <= line; j++) {     // line번째 줄엔 별을 line개
    stars = stars + "★";
  }
  console.log(stars);
}

// 출력:
// ★
// ★★
// ★★★
// ★★★★
// ★★★★★

// 규칙을 발견했나요? "n번째 줄엔 별이 n개".
// 규칙을 찾으면 코드가 짧아집니다. 바깥 for가 '줄'을,
// 안쪽 for가 '그 줄의 별 개수'를 맡는 '반복 안의 반복(중첩)'이에요.`;

const CODE_PRACTICE = `// 실습 과제: 구구단 2~9단 전부 출력 + 7단만 별표(*)로 강조
for (let dan = 2; dan <= 9; dan++) {
  console.log("--- " + dan + "단 ---");

  for (let n = 1; n <= 9; n++) {
    if (dan === 7) {
      // 7단이면 앞뒤에 별표를 붙여 눈에 띄게!
      console.log("* " + dan + " x " + n + " = " + dan * n + " *");
    } else {
      console.log(dan + " x " + n + " = " + dan * n);
    }
  }
}

// 바깥 for: 단(2~9)을 돈다 → 8바퀴
// 안쪽 for: 곱하는 수(1~9)를 돈다 → 각 단마다 9바퀴
// 총 8 x 9 = 72줄이 출력됩니다. 손으로 72줄을 쓸 뻔했어요!`;

const CODE_OFFBYONE = `// 함정 1: 하나 차이(off-by-one) 실수
for (let i = 1; i < 10; i++) { }    // 1~9까지, 9번 반복 (10 미포함!)
for (let i = 1; i <= 10; i++) { }   // 1~10까지, 10번 반복
for (let i = 0; i < 10; i++) { }    // 0~9까지, 10번 반복 (배열용 관례)
// "<인가 <=인가, 0부터인가 1부터인가"를 늘 소리 내어 읽어 보세요.

// 함정 2: 조건을 안 바꿔 생기는 무한루프
let n = 0;
while (n < 3) {
  console.log("도는 중");
  // n++ 를 깜빡함 → 영원히 돈다 (섹션 2에서 겪어 봤죠?)
}

// 함정 3: i의 범위 착각 — 점검법
// 헷갈리면 반복문 첫 줄에 console.log(i)를 넣고 돌려 보세요.
// i가 실제로 어떤 값들을 거치는지 눈으로 확인하는 게
// 머릿속 상상보다 백 배 정확합니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'while' },
  { n: 3, label: 'for' },
  { n: 4, label: '계산 쌓기' },
  { n: 5, label: '반복+조건' },
  { n: 6, label: '배열 맛보기' },
  { n: 7, label: '실습: 별 그림' },
  { n: 8, label: '흔한 함정' },
];

export default function Lv1LoopsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>🔁 반복문<br />: 지루한 일은 컴퓨터에게</h1>
        <p>
          "안녕하세요"를 100번 출력하라면 어떻게 할까요? 복사-붙여넣기 100번? 컴퓨터에겐
          더 좋은 방법이 있어요. <strong>100번 반복도 한 줄로</strong> — 컴퓨터가 세상에서
          가장 잘하는 일, <strong>지치지 않고 똑같이 반복하기</strong>를 시키는 법을 배웁니다.
          이 코스가 끝나면 구구단 72줄을 코드 몇 줄로 뽑아낼 수 있어요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 70분</span>
          <span className="chip">실습: 구구단 + 7단 별표 강조</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> 같은 일을 100만 번 시켜도 지루해하지 않고, 단 한 번도 틀리지 않아요.</strong>{' '}
          그래서 프로그래밍의 절반은 "이 일에서 <strong>반복되는 부분</strong>이 어디지?"를
          찾아내 컴퓨터에게 떠넘기는 기술입니다.
        </p>
        <Code>{CODE_COPYPASTE}</Code>
        <p>
          복사-붙여넣기 100번과 반복문 3줄 — 결과는 같지만 <strong>고칠 때</strong> 차이가
          드러나요. 문구 하나 바꾸려고 100줄을 고치는 사람과, 1줄만 고치는 사람. 개발자들은
          이 감각을 "<strong>같은 코드를 두 번 쓰지 마라</strong>"라는 격언으로 물려받았어요.
          반복문은 그 격언을 지키는 첫 번째 도구입니다.
        </p>
        <div className="tip">
          <b>일상 속 반복문</b> 이미 여러분은 반복문처럼 생각하고 있어요. "설거지: 그릇이{' '}
          <strong>남아 있는 동안</strong>, 하나 집어 → 씻고 → 헹구기" — '남아 있는 동안'이
          조건이고, 화살표 안이 반복할 내용이에요. 코드는 이 생각을 받아 적는 것뿐입니다.
        </div>
      </Section>

      <Section n={2} title="while — 조건이 참인 동안" sub="반복의 원형: 조건 하나로 돌리기">
        <p>
          가장 단순한 반복문은 <span className="icode">while</span>이에요. 읽는 법도 영어
          그대로입니다. "<strong>~인 동안(while)</strong> 계속해라." 괄호 안의 조건이{' '}
          <strong>참(true)인 동안</strong> 중괄호 안을 계속 실행하고, 조건이 거짓이 되는 순간
          멈춥니다.
        </p>
        <Code>{CODE_WHILE}</Code>
        <p>
          여기서 제일 중요한 부품은 <strong>카운터 변수</strong>{' '}
          <span className="icode">count</span>예요. 반복이 "지금 몇 바퀴째인지"를 세는
          변수인데, 핵심은 <strong>매 바퀴 값이 변해야 한다</strong>는 것.{' '}
          <span className="icode">count = count + 1</span>이 매번 값을 키워 주니까, 언젠가
          조건 <span className="icode">count &lt;= 5</span>가 거짓이 되어 반복이 멈춥니다.
          조건을 <strong>변하게 만드는 줄</strong>이 없으면? 아래처럼 됩니다.
        </p>
        <Code>{CODE_INFINITE}</Code>
        <div className="warn">
          <b>무한루프는 일부러 한 번 겪어 보세요</b> 위 코드를 진짜로 돌려 보고, 탭이 멈추는
          걸 경험한 뒤 직접 멈춰 보세요(탭 닫기, 콘솔은 <strong>Ctrl + C</strong>). 사고를
          안전한 환경에서 미리 겪어 두면, 나중에 실전에서 "어, 이거 무한루프네" 하고 바로
          알아챌 수 있어요. 소방 훈련과 같은 원리입니다.
        </div>
        <div className="tip">
          <b>while 점검 3질문</b> ① 조건은 무엇인가? ② 조건 속 변수를 <strong>바꾸는 줄</strong>이
          반복문 안에 있는가? ③ 그 변화가 언젠가 조건을 <strong>거짓</strong>으로 만드는가?
          — 셋 중 하나라도 "아니오"면 무한루프 후보예요.
        </div>
      </Section>

      <Section n={3} title="for — 반복의 정석" sub="초기화 · 조건 · 증감, 3요소를 한 줄에">
        <p>
          섹션 2의 while 코드를 다시 보면, 반복에 필요한 재료가 세 군데 흩어져 있어요.
          시작값(<span className="icode">let count = 1</span>)은 반복문 <strong>위에</strong>,
          조건은 <strong>괄호에</strong>, 증가는 <strong>몸통 끝에</strong>. 이 셋을 첫 줄에
          모아 정리한 것이 <span className="icode">for</span>문입니다.
        </p>
        <Code>{CODE_FOR}</Code>
        <p>
          세 요소는 세미콜론(<span className="icode">;</span>)으로 구분해요.{' '}
          <strong>① 초기화</strong>는 반복이 시작될 때 딱 한 번, <strong>② 조건</strong>은
          매 바퀴 시작 전에 검사(거짓이면 즉시 종료), <strong>③ 증감</strong>은 매 바퀴가
          끝날 때마다 실행됩니다. 셋이 한 줄에 있으니 "몇 번 도는 반복인지"를 첫 줄만 보고
          알 수 있어요. 그래서 <strong>횟수가 정해진 반복은 for</strong>, 언제 끝날지 모르는
          반복(예: 사용자가 그만할 때까지)은 while — 이게 관례적인 역할 분담입니다.
        </p>
        <div className="tip">
          <b>왜 하필 i인가</b> 반복 변수 이름으로 <span className="icode">i</span>를 쓰는 건
          전 세계 공통 관례예요. index(번호)의 첫 글자로, 수학의 수열 기호에서 건너온
          전통입니다. 중첩되면 <span className="icode">j</span>, <span className="icode">k</span>로
          이어가요. 다만 의미가 뚜렷할 땐 <span className="icode">dan</span>(단),{' '}
          <span className="icode">line</span>(줄)처럼 뜻이 보이는 이름이 더 좋습니다 — 우리
          실습에서도 그렇게 쓸 거예요.
        </div>
      </Section>

      <Section n={4} title="반복 속에서 계산 쌓기" sub="누적 변수(sum) 패턴 — 저금통에 매 바퀴 넣기">
        <p>
          지금까지는 반복하며 <strong>출력</strong>만 했어요. 이제 한 단계 올라가서, 반복하며{' '}
          <strong>계산 결과를 쌓아</strong> 봅시다. 대표 문제: "1부터 100까지 다 더하면?"
          — 사람은 한참 걸리지만, 반복문에겐 순식간입니다.
        </p>
        <Code>{CODE_SUM}</Code>
        <p>
          이 패턴의 주인공은 <strong>누적 변수</strong> <span className="icode">sum</span>이에요.
          반복 <strong>바깥</strong>에서 만들어 두고, 매 바퀴{' '}
          <span className="icode">sum = sum + i</span>로 값을 쌓아 갑니다. "지금까지의 합에
          이번 값을 더해서, 다시 지금까지의 합으로 저장한다" — 저금통에 매일 동전을 넣는
          것과 똑같아요.
        </p>
        <p>
          <strong>왜 0으로 시작할까요?</strong> 저금통은 <strong>비어 있는 상태</strong>에서
          시작해야 정확히 "넣은 만큼"이 남으니까요. 덧셈에서 0은 더해도 값이 변하지 않는
          출발점입니다. 만약 곱셈을 누적한다면(예: 1×2×3×...) 시작값은 1이어야 해요 —
          "그 연산에서 아무 영향이 없는 값"으로 시작한다는 게 원리입니다.
        </p>
        <div className="tip">
          <b>이 패턴, 평생 씁니다</b> 시험 점수 평균 내기, 장바구니 총액 구하기, 게임 누적
          점수 — 형태만 다를 뿐 전부 "반복 전에 0 → 매 바퀴 쌓기 → 반복 후 결과 확인"이라는
          같은 3단계예요. 패턴 하나를 익히면 문제 백 개가 풀립니다.
        </div>
      </Section>

      <Section n={5} title="반복 + 조건 콤보" sub="두 개념이 만나면 표현력이 폭발한다">
        <p>
          이전 강좌에서 배운 <span className="icode">if</span>(조건문)를 반복문 안에 넣으면
          어떻게 될까요? 반복문이 <strong>모든 후보를 하나씩 훑고</strong>, 조건문이{' '}
          <strong>그중에서 골라냅니다</strong>. "2단부터 9단 중에 짝수 단만" 같은 문장을
          그대로 코드로 옮길 수 있게 돼요.
        </p>
        <Code>{CODE_COMBO}</Code>
        <p>
          여기에 반복의 흐름 자체를 조종하는 두 개의 열쇠가 더 있어요.{' '}
          <span className="icode">break</span>는 반복을 <strong>통째로 탈출</strong>하고,{' '}
          <span className="icode">continue</span>는 <strong>이번 바퀴만 건너뛰고</strong>{' '}
          다음 바퀴로 넘어갑니다.
        </p>
        <Code>{CODE_BREAK_CONTINUE}</Code>
        <p>
          언제 쓸까요? <span className="icode">break</span>는 "찾았다! 더 볼 필요 없어"의
          순간에(예: 명단에서 내 이름을 찾으면 멈추기), <span className="icode">continue</span>는
          "이건 건너뛰고 계속"의 순간에(예: 빈칸인 답안은 채점 생략) 씁니다. 남용하면 흐름이
          꼬여 읽기 어려워지니, 지금은 "이런 열쇠가 있다"는 맛보기로 충분해요.
        </p>
        <div className="tip">
          <b>표현력의 도약</b> 변수만 알 때는 '기억'을, 조건문까지 알면 '선택'을, 반복문까지
          알면 '대량 처리'를 시킬 수 있어요. 그리고 셋을 <strong>조합</strong>하는 순간 —
          "전교생 성적 중 90점 이상만 세어 줘" 같은 일이 코드 몇 줄이 됩니다. 프로그래밍의
          힘은 개념 하나하나보다 <strong>조합</strong>에서 나와요.
        </div>
      </Section>

      <Section n={6} title="배열 맛보기 — 여러 값 한 상자에" sub="반복문의 단짝, 순서 있는 목록">
        <p>
          반복문과 늘 붙어 다니는 단짝을 소개할게요. 과일 4개를 저장하려고{' '}
          <span className="icode">fruit1</span>, <span className="icode">fruit2</span>,{' '}
          <span className="icode">fruit3</span>... 변수를 따로 만들면, 그것도 결국
          복사-붙여넣기죠. <strong>배열(array)</strong>은 여러 값을{' '}
          <strong>순서대로 한 상자에</strong> 담는 방법입니다.
        </p>
        <Code>{CODE_ARRAY}</Code>
        <p>
          꼭 기억할 규칙 하나: <strong>인덱스(칸 번호)는 0부터 시작합니다.</strong> 첫 번째
          항목이 <span className="icode">fruits[0]</span>이고, 4개짜리 배열의 마지막은{' '}
          <span className="icode">fruits[3]</span>이에요. 처음엔 어색하지만 거의 모든
          프로그래밍 언어가 이 규칙을 따르니, 지금 확실히 몸에 새겨 두는 게 이득입니다.
        </p>
        <p>
          그리고 배열과 for가 만나는 순간을 보세요. 상자에 뭐가 몇 개 들었든{' '}
          <span className="icode">i = 0</span>부터 <span className="icode">i &lt;{' '}
          fruits.length</span>까지 돌리면 <strong>전부 순회</strong>됩니다. "목록에 있는 것
          전부에 대해 ~해라" — 앞으로 만들 거의 모든 프로그램의 뼈대가 되는 문장이에요.
        </p>
        <div className="tip">
          <b>0부터 세는 이유가 궁금하다면</b> 인덱스는 "몇 번째"가 아니라 "<strong>시작점에서
          몇 칸 떨어졌나</strong>"에 가까워요. 첫 항목은 시작점에서 0칸 떨어져 있으니 0번.
          아파트 1층을 어떤 나라에선 G(0층)라고 부르는 것과 비슷한, 세는 기준의 차이입니다.
        </div>
      </Section>

      <Section n={7} title="실습: 반복문으로 그림 그리기" sub="별 삼각형, 그리고 구구단 미션">
        <p>
          배운 걸 손으로 굳힐 시간이에요. 첫 번째 워밍업: 별(★)을 한 줄씩 늘려{' '}
          <strong>삼각형</strong>을 만들어 봅시다. 시작 전에 먼저 규칙부터 찾아 보세요 —
          "1번째 줄엔 별 1개, 2번째 줄엔 2개, ... n번째 줄엔 n개."
        </p>
        <Code>{CODE_STARS}</Code>
        <p>
          여기서 <strong>반복 안의 반복(중첩 반복문)</strong>이 처음 등장했어요. 바깥{' '}
          <span className="icode">for</span>가 한 바퀴 돌 때마다, 안쪽{' '}
          <span className="icode">for</span>는 처음부터 끝까지 <strong>전부</strong> 돕니다.
          바깥이 '줄', 안쪽이 '그 줄의 내용'을 맡는 구조 — 시계의 시침이 한 칸 갈 때 분침이
          한 바퀴 도는 것과 같아요.
        </p>
        <p>
          이제 진짜 미션입니다. <strong>구구단 2단부터 9단까지 전부 출력하되, 7단만
          별표(*)로 강조</strong>해 보세요. 필요한 재료는 전부 배웠어요 — 중첩 반복문(단 ×
          곱하는 수)과 조건문(7단인가?)의 콤보입니다. 먼저 스스로 시도해 보고, 막히면 아래를
          펼쳐 보세요.
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <div className="tip">
          <b>스스로 점검</b> ① 출력이 정확히 72줄인가요? (8개 단 × 9줄) ② 7단에만 별표가
          붙었나요? ③ <span className="icode">dan === 7</span>을{' '}
          <span className="icode">dan === 3</span>으로 바꾸면 3단이 강조되나요? — 셋 다
          "네"라면 이 강좌의 목표를 달성한 거예요.
        </div>
        <div className="tip">
          <b>한 걸음 더 (도전 과제)</b> 별 삼각형을 <strong>거꾸로</strong>(5개부터 1개로
          줄어들게) 만들어 보세요. 힌트: 초기화·조건·증감 3요소 중 무엇을 뒤집으면 될까요?{' '}
          <span className="icode">let line = 5; line &gt;= 1; line--</span> — 증감이 꼭
          '증가'일 필요는 없답니다.
        </div>
      </Section>

      <Section n={8} title="흔한 함정 모음" sub="모두가 밟는 지뢰를 미리 밟아 보기">
        <p>
          반복문에서 초보자가 빠지는 함정은 신기할 만큼 정해져 있어요. 전 세계 개발자가
          똑같이 밟는 지뢰 세 개를 미리 구경해 둡시다. 나중에 같은 에러를 만나면 "아, 그거!"
          하고 웃으며 고칠 수 있게요.
        </p>
        <Code>{CODE_OFFBYONE}</Code>
        <p>
          <strong>① 하나 차이(off-by-one) 실수</strong> — <span className="icode">&lt;</span>와{' '}
          <span className="icode">&lt;=</span>의 차이, 0부터와 1부터의 차이로 반복이 한 번
          더 돌거나 덜 도는 실수예요. 이름이 따로 있을 만큼 흔합니다. 처방: 조건을{' '}
          <strong>소리 내어 읽고</strong>, 첫 바퀴와 마지막 바퀴의 i 값을 손으로 적어 보기.
        </p>
        <p>
          <strong>② 무한루프</strong> — 조건 속 변수를 바꾸는 줄을 빼먹는 실수(섹션 2).
          처방: while을 쓸 때마다 "조건을 거짓으로 만드는 줄이 어디지?"를 반드시 자문하기.
          for는 증감이 첫 줄에 강제로 자리 잡고 있어서 이 실수가 훨씬 드물어요 — for가
          '정석'인 이유 중 하나입니다.
        </p>
        <p>
          <strong>③ i의 범위 착각</strong> — "i가 지금 무슨 값이지?"를 머릿속으로만 추측하다
          틀리는 경우. 처방은 단순합니다. <strong>반복문 안에{' '}
          <span className="icode">console.log(i)</span> 한 줄을 넣고 직접 돌려 보기.</strong>{' '}
          상상은 틀려도 출력은 거짓말을 하지 않아요. 이 습관 하나가 디버깅 실력의 절반입니다.
        </p>
        <div className="warn">
          <b>에러는 실력의 증거</b> 무한루프로 탭을 멈춰 봤고, off-by-one으로 한 줄이 빠져
          봤다면 — 잘하고 있는 거예요. 한 번 밟아 본 지뢰는 두 번 다시 같은 위력을 갖지
          못합니다. 중요한 건 에러를 안 내는 게 아니라, 에러에서 <strong>원인을 찾아내는
          연습</strong>을 쌓는 것입니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🔁 여기까지 왔다면</h3>
          <p className="muted">
            이제 "100번 반복"이라는 말에 복사-붙여넣기 대신 <strong>for문 3줄</strong>이
            떠오를 거예요. while(조건이 참인 동안), for(초기화·조건·증감), 누적 변수(빈
            저금통에서 시작해 쌓기), 반복+조건 콤보, 배열 순회, 그리고 중첩 반복으로 그린
            별 삼각형까지 — 컴퓨터에게 <strong>지루한 일을 통째로 떠넘기는 법</strong>을
            손에 쥐었습니다. 그런데 구구단 코드를 다른 곳에서 또 쓰고 싶다면? 매번 복사해야
            할까요? 잘 만든 코드 뭉치에 <strong>이름을 붙여 두고 필요할 때마다 부르는</strong>{' '}
            방법이 있어요. 다음{' '}
            <Link to="/learn/lv1-functions"><strong>함수: 나만의 명령어 만들기</strong></Link>{' '}
            코스에서, 코드를 재사용하는 진짜 기술을 이어서 배워 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
