// 이 파일이 하는 일: "변수와 자료형: 이름 붙인 상자" 코스 — 코딩을 처음 접하는 사람을 위해
// '값을 상자에 담아 이름으로 꺼내 쓴다'는 변수 개념에서 출발해, let/const, 문자열·숫자·불리언
// 세 가지 기본 자료형, typeof와 형 변환의 함정, prompt 실습까지 7개 섹션으로 안내하는
// 정적 학습 페이지. 프레이밍은 "모든 프로그램의 가장 작은 부품" — 다음 강좌(조건문)에서
// 바로 쓰일 불리언까지 손에 쥐게 하는 것이 목표다.
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 styles/global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용하고 색은 var(--*)만 쓴다(하드코딩 금지).
// 예제 코드는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.
// 단, 예제 자체에 백틱(`)이 들어가는 템플릿 리터럴 코드만은 백틱 상수에 담을 수 없어서
// 일반 문자열 배열을 join('\n')으로 이어 붙여 만든다.

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

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

const CODE_BOX = `// 변수 만들기 — let이라는 낱말이 "상자 하나 만들어 줘"라는 신호예요
let name = "지민";        // ① 선언(상자 만들기) + 할당(값 넣기)을 한 번에
let age = 17;             // 숫자도 담을 수 있어요

console.log(name);        // 지민   ← 이름을 부르면 안의 값이 나온다
console.log(age);         // 17

// 선언과 할당을 나눠서 할 수도 있어요
let school;               // ② 먼저 빈 상자만 만들고 (선언)
school = "미림마이스터고";  // ③ 나중에 값을 넣는다 (할당)
console.log(school);      // 미림마이스터고

// 아직 값을 안 넣은 상자를 열면? '비어 있음'이라는 뜻의 undefined가 나와요
let empty;
console.log(empty);       // undefined`;

const CODE_NAMING = `// 이름 짓는 규칙 — 어기면 아예 실행이 안 돼요 (문법 오류)
let score = 90;           // O  영문 소문자로 시작
let userName = "지민";     // O  두 단어면 두 번째 단어 첫 글자만 대문자 (camelCase)
let _temp = 0;            // O  _ 와 $ 는 예외적으로 허용
// let 2ndPlace = "은메달";  // X  숫자로 시작할 수 없다
// let my-score = 90;        // X  하이픈(-) 불가 — 빼기로 오해해요
// let let = 5;              // X  let, const 같은 예약어는 이름으로 못 쓴다

// 규칙만큼 중요한 건 '좋은 이름'의 감각이에요
let a = 172.5;            // △  문법은 맞지만, a가 뭔지 아무도 몰라요
let height = 172.5;       // O  석 달 뒤의 나도, 옆자리 친구도 바로 이해

// 학습 포인트: 컴퓨터는 a든 height든 상관없어요. 이름은 '사람'을 위한 거예요.`;

const CODE_CONST = `// 변수(variable)라는 이름 그대로 — let 상자의 값은 언제든 바뀔 수 있어요
let level = 1;
console.log(level);       // 1
level = 2;                // 새 값을 넣으면 이전 값은 사라진다 (덮어쓰기)
console.log(level);       // 2

// 그런데 절대 바뀌면 안 되는 값도 있죠. 그럴 땐 const (constant, 상수)
const birthYear = 2009;   // "이 상자는 뚜껑을 접착제로 붙였다"
// birthYear = 2010;      // X 실행하면 오류! (TypeError: Assignment to constant)

// 주의: const는 선언과 동시에 값을 넣어야 해요
// const pi;              // X 빈 const 상자는 만들 수 없다 (SyntaxError)
const pi = 3.14;          // O`;

const CODE_STRING = `// 문자열(string) — 글자를 따옴표로 감싼 값. 따옴표가 곧 "이건 글자다"라는 표시예요
let a = '작은따옴표';       // '' 작은따옴표
let b = "큰따옴표";         // "" 큰따옴표 — 둘은 기능이 완전히 같아요. 하나로 통일만 하면 OK
// 세 번째 종류인 백틱(키보드 1 왼쪽의 기호)은 바로 아래에서 따로 다뤄요. 특별하거든요.

// + 로 문자열을 이어 붙일 수 있어요 (연결, concatenation)
let name = "지민";
let greeting = "안녕, " + name + "!";
console.log(greeting);    // 안녕, 지민!

// 따옴표가 없으면 글자가 아니라 '변수 이름'으로 취급돼요
console.log("name");      // name   ← 글자 그대로
console.log(name);        // 지민   ← 상자 안의 값`;

// 학습 포인트: 이 예제엔 백틱(`)과 ${ }가 코드 '내용물'로 들어가야 해서
// 백틱 상수에 담을 수 없다. 일반 문자열 배열을 join으로 이어 붙여 우회한다.
const CODE_TEMPLATE = [
  '// 세 번째 따옴표, 백틱(`) — 문자열 안에 변수를 "구멍"처럼 끼워 넣을 수 있어요',
  'let name = "지민";',
  'let age = 17;',
  '',
  '// + 방식: 따옴표를 열었다 닫았다… 조금만 길어져도 정신없죠',
  'let intro1 = "저는 " + name + "이고, " + age + "살이에요.";',
  '',
  '// 템플릿 리터럴: 백틱으로 감싸고, 변수 자리는 ${변수} 라고 뚫어 둔다',
  'let intro2 = `저는 ${name}이고, ${age}살이에요.`;',
  '',
  'console.log(intro1);   // 저는 지민이고, 17살이에요.',
  'console.log(intro2);   // 저는 지민이고, 17살이에요.  ← 결과는 똑같아요',
  '',
  '// ${ } 구멍 안에는 계산식도 들어가요',
  'console.log(`내년엔 ${age + 1}살!`);   // 내년엔 18살!',
].join('\n');

const CODE_NUMBER = `// 숫자(number) — 따옴표 없이 그냥 쓰면 숫자예요. 정수도 소수도 한 식구입니다
let price = 1500;         // 정수
let rate = 0.5;           // 소수
let minus = -20;          // 음수도 OK

// 사칙연산: + - * / (곱하기는 x가 아니라 *, 나누기는 ÷가 아니라 /)
console.log(3 + 4);       // 7
console.log(3 - 4);       // -1
console.log(3 * 4);       // 12
console.log(10 / 4);      // 2.5  ← 나누어떨어지지 않으면 소수로

// 다섯 번째 연산자 % — '나머지'를 구해요 (나눗셈 몫 말고 나머지!)
console.log(10 % 3);      // 1   (10 = 3 x 3 + 나머지 1)
console.log(7 % 2);       // 1   ← 2로 나눈 나머지가 1이면 홀수
console.log(8 % 2);       // 0   ← 나머지가 0이면 짝수. %는 홀짝 판별의 단골!

// 연산 '결과'를 다시 변수에 담을 수 있어요 — 이게 프로그램이 자라는 방식
let total = price * 3;    // 4500
total = total + 500;      // 오른쪽 먼저 계산(4500+500) → 왼쪽 상자에 다시 담기
console.log(total);       // 5000`;

const CODE_BOOLEAN = `// 불리언(boolean) — 값이 딱 두 개뿐인 자료형: true(참) / false(거짓)
let isRaining = true;
let isWeekend = false;

// 불리언은 주로 '비교'에서 태어나요. 비교 연산자의 답은 항상 true 아니면 false!
console.log(10 > 3);      // true    (10은 3보다 크다 → 참)
console.log(10 < 3);      // false   (10은 3보다 작다 → 거짓)
console.log(7 >= 7);      // true    (크거나 같다)
console.log(7 === 7);     // true    (같다 — 등호 3개!)
console.log(7 === 8);     // false

// === 는 '값'과 '자료형'이 모두 같아야 true예요
console.log("7" === 7);   // false   ← 글자 "7"과 숫자 7은 다른 존재

// 비교 결과도 값이니까, 당연히 상자에 담을 수 있죠
let age = 17;
let isTeen = age >= 13 && age <= 19;   // && 는 "그리고" — 둘 다 참이어야 참
console.log(isTeen);      // true`;

const CODE_TYPEOF = `// typeof — 값 앞에 붙이면 그 값의 자료형(type)을 알려 주는 돋보기
console.log(typeof "안녕");    // "string"   (문자열)
console.log(typeof 42);        // "number"   (숫자)
console.log(typeof true);      // "boolean"  (불리언)

let mystery = "2026";
console.log(typeof mystery);   // "string"  ← 따옴표에 싸였으니 숫자처럼 보여도 문자열!

// 그래서 이런 일이 벌어져요 — 같은 + 인데 결과가 다르다
console.log(1 + 1);            // 2      숫자 + 숫자 → 덧셈
console.log("1" + 1);          // "11"   문자열이 끼면 + 는 '이어 붙이기'로 변신

// 문자열을 숫자로 바꾸고 싶을 땐 Number()로 형을 변환해요
console.log(Number("1") + 1);  // 2      "1" → 1 로 바꾼 뒤 덧셈
console.log(Number("2009"));   // 2009`;

// 학습 포인트: 실습 코드도 템플릿 리터럴(백틱)을 쓰므로 join 방식으로 정의한다.
const CODE_PRACTICE = [
  '// 실습: 이름과 출생연도를 물어봐서, 나이를 계산해 자기소개 문장을 만들어 보자',
  'const THIS_YEAR = 2026;                 // 올해 — 바뀌면 안 되니 const',
  '',
  '// prompt는 브라우저에 입력창을 띄우고, 입력한 내용을 "문자열로" 돌려줘요',
  'let name = prompt("이름이 뭐예요?");',
  '',
  '// 출생연도는 계산에 써야 하니 Number()로 숫자로 바꿔서 담는다 (섹션 6 복습!)',
  'let birthYear = Number(prompt("몇 년에 태어났어요? (예: 2009)"));',
  '',
  '// 연산 결과를 새 변수에 담기 (섹션 4 복습!)',
  'let age = THIS_YEAR - birthYear;',
  '',
  '// 템플릿 리터럴로 문장 조립 (섹션 3 복습!)',
  'let intro = `안녕하세요! 저는 ${name}이고, 올해 ${age}살이 돼요.`;',
  '',
  'console.log(intro);',
  '// 입력이 "지민", "2009"였다면 → 안녕하세요! 저는 지민이고, 올해 17살이 돼요.',
].join('\n');

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'let과 const' },
  { n: 3, label: '문자열' },
  { n: 4, label: '숫자' },
  { n: 5, label: '불리언' },
  { n: 6, label: '자료형의 힘' },
  { n: 7, label: '실습' },
];

export default function Lv1VariablesAndTypesPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 초급 과정</div>
        <h1>📦 변수와 자료형<br />— 이름 붙인 상자</h1>
        <p>
          모든 프로그램은 결국 <strong>값을 어딘가에 담아 두고, 필요할 때 꺼내 쓰는 일</strong>의
          반복이에요. 그 "어딘가"가 바로 <strong>변수</strong> — 이름표를 붙인 상자입니다.
          이 강좌에서는 상자를 만들고(let·const), 상자에 담기는 값의 세 가지 종류
          (문자열·숫자·불리언)를 익힌 뒤, 여러분의 이름으로 자기소개 문장을 조립해 봅니다.
          코딩이 처음이어도 괜찮아요 — 여기가 첫걸음이니까요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">실습: 자기소개 문장 조립</span>
          <span className="chip">선수 지식: 없음 — 진짜 첫 강좌</span>
        </div>
      </div>

      {/* 섹션 바로가기 — 학습 포인트: SECTIONS 배열을 map으로 돌려 반복을 없앤다 */}
      <div className="chip-row">
        {SECTIONS.map((s) => (
          <a key={s.n} className="chip" href={`#sec-${s.n}`}>
            <b>{s.n}</b> {s.label}
          </a>
        ))}
      </div>

      <Section n={1} title="변수 = 이름 붙인 상자" sub="값을 저장해 두고, 이름으로 다시 꺼내 쓴다">
        <p>
          계산기를 떠올려 보세요. <span className="icode">3 + 4</span>를 누르면 7이 나오지만,
          화면을 끄는 순간 그 7은 사라져요. 프로그램은 달라야 합니다. 계산한 값을{' '}
          <strong>어딘가에 보관해 뒀다가</strong>, 나중에 다시 꺼내 써야 하죠. 그 보관함이{' '}
          <strong>변수(variable)</strong>예요. 상자 하나를 만들고, 겉에 <strong>이름표</strong>를
          붙이고, 안에 <strong>값</strong>을 넣는다 — 이게 전부입니다.
        </p>
        <p>
          자바스크립트에서 상자를 만드는 낱말이 <span className="icode">let</span>이에요.
          상자를 만드는 일을 <strong>선언(declaration)</strong>, 값을 넣는 일을{' '}
          <strong>할당(assignment)</strong>이라고 부릅니다. 여기서 딱 하나 조심할 것 —{' '}
          <span className="icode">=</span>는 수학의 "같다"가 아니라{' '}
          <strong>"오른쪽 값을 왼쪽 상자에 넣어라"</strong>라는 명령이에요.
        </p>
        <Code>{CODE_BOX}</Code>
        <p>
          이름표는 아무렇게나 지을 수 없어요. 숫자로 시작하면 안 되고, 하이픈(-)이나 띄어쓰기도
          안 되고, <span className="icode">let</span> 같은 예약어도 안 됩니다. 그리고 규칙보다
          중요한 게 있어요 — <strong>값의 정체가 드러나는 이름</strong>을 짓는 감각이요.
        </p>
        <Code>{CODE_NAMING}</Code>
        <div className="tip">
          <b>비유</b> 변수는 <strong>이름표 붙인 사물함</strong>이에요. "3번째 줄 왼쪽에서 두 번째
          칸"이라고 외우는 대신 <span className="icode">지민이의 사물함</span>이라는 이름표만
          기억하면 되죠. 안에 뭘 넣든, 몇 번을 바꾸든, <strong>이름표만 있으면 언제든 찾아갈 수
          있다</strong> — 이게 변수의 존재 이유입니다.
        </div>
      </Section>

      <Section n={2} title="값 바꾸기, 그리고 const" sub="변할 수 있어서 '변수' — 그런데 변하면 안 되는 값도 있다">
        <p>
          변수(<strong>변</strong>하는 <strong>수</strong>)라는 이름 그대로,{' '}
          <span className="icode">let</span>으로 만든 상자의 값은 <strong>언제든 바꿀 수
          있어요</strong>. 게임 레벨이 오르고, 점수가 쌓이고, 남은 시간이 줄어드는 것 — 전부
          변수의 값이 바뀌는 일입니다. 새 값을 넣으면 이전 값은 <strong>흔적 없이
          사라진다</strong>(덮어쓰기)는 것만 기억하세요.
        </p>
        <p>
          그런데 세상엔 <strong>바뀌면 큰일 나는 값</strong>도 있어요. 태어난 연도, 원주율,
          우리 서비스의 이름 같은 것들이요. 이런 값은 <span className="icode">const</span>
          (constant, 상수)로 만듭니다. 한번 값을 넣으면 <strong>바꾸려는 순간 오류</strong>를
          내면서 프로그램이 멈춰요 — 실수를 컴퓨터가 대신 막아 주는 거죠.
        </p>
        <Code>{CODE_CONST}</Code>
        <div className="tip">
          <b>let과 const, 뭘 고를까</b> 실무 개발자들의 습관은 의외로 단순해요.{' '}
          <strong>일단 전부 const로 쓰고, 값을 정말 바꿔야 하는 것만 let으로</strong> 바꿉니다.
          "이 값은 안 변해요"라고 코드에 적어 두는 셈이라, 나중에 읽는 사람(대부분 미래의 나)이
          신경 쓸 게 줄어들거든요. 이 강좌의 예제는 배우는 단계라 let을 많이 쓰지만, 감각은
          지금부터 익혀 두세요.
        </div>
      </Section>

      <Section n={3} title="문자열 — 글자 다루기" sub="따옴표 세 종류, 그리고 문장을 조립하는 두 가지 방법">
        <p>
          이제 상자에 담기는 <strong>값의 종류(자료형)</strong>를 하나씩 봅시다. 첫 번째는{' '}
          <strong>문자열(string)</strong> — 글자들이 실에 꿰인 듯 <strong>줄지어 선</strong>{' '}
          값이에요. 이름, 주소, 채팅 메시지, 지금 읽는 이 문장까지, 프로그램 속 모든 글자가
          문자열입니다. 만드는 법은 간단해요 — <strong>따옴표로 감싸면</strong> 끝.
        </p>
        <Code>{CODE_STRING}</Code>
        <p>
          작은따옴표(<span className="icode">''</span>)와 큰따옴표(<span className="icode">""</span>)는
          완전히 같은 일을 해요. 그런데 세 번째 따옴표, <strong>백틱</strong>
          (<span className="icode">``</span> — 키보드 숫자 1 왼쪽의 키)은 특별합니다. 문자열
          안에 <strong>변수를 끼워 넣는 구멍</strong>을 뚫을 수 있거든요. 이걸{' '}
          <strong>템플릿 리터럴</strong>이라고 불러요.
        </p>
        <Code>{CODE_TEMPLATE}</Code>
        <div className="tip">
          <b>+ 와 템플릿 리터럴, 뭘 쓸까</b> 둘 다 결과는 같아요. 다만 변수가 두세 개만 넘어가면{' '}
          + 방식은 따옴표 지옥이 됩니다. 요즘 코드는 대부분 템플릿 리터럴을 써요 — 문장{' '}
          <strong>틀(템플릿)을 먼저 만들고 빈칸만 채우는</strong> 방식이라 읽기도 훨씬 편하거든요.
          섹션 7의 실습에서 직접 써 봅니다.
        </div>
      </Section>

      <Section n={4} title="숫자 — 계산 다루기" sub="사칙연산, 그리고 의외로 쓸모 많은 나머지 연산 %">
        <p>
          두 번째 자료형은 <strong>숫자(number)</strong>예요. 따옴표 <strong>없이</strong> 쓰면
          숫자입니다. 다른 언어들은 정수와 소수를 다른 자료형으로 나누기도 하는데,
          자바스크립트는 <span className="icode">17</span>도 <span className="icode">3.14</span>도
          똑같이 number 한 식구예요. 덧셈 뺄셈은 그대로인데, 곱하기는{' '}
          <span className="icode">*</span>, 나누기는 <span className="icode">/</span>를 쓴다는 것만
          새로 기억하면 됩니다.
        </p>
        <Code>{CODE_NUMBER}</Code>
        <p>
          낯선 친구는 <span className="icode">%</span>일 거예요. 퍼센트가 아니라{' '}
          <strong>나머지 연산자</strong>입니다. <span className="icode">10 % 3</span>은 "10을 3으로
          나눈 나머지", 즉 1이에요. "이게 어디에 쓰여?" 싶겠지만 —{' '}
          <strong>어떤 수를 2로 나눈 나머지가 0이면 짝수, 1이면 홀수</strong>. 다음 강좌에서
          조건문을 배우면 이 아이디어로 홀짝 판별기를 만들게 됩니다.
        </p>
        <div className="tip">
          <b>계산 결과를 다시 상자에</b> <span className="icode">total = total + 500</span>이
          이상해 보였다면 정상이에요. 수학이라면 말이 안 되는 식이죠. 하지만{' '}
          <span className="icode">=</span>는 "넣어라"라는 명령(섹션 1)이었죠 —{' '}
          <strong>오른쪽을 먼저 계산</strong>하고(현재 total인 4500 + 500 = 5000),
          그 결과를 <strong>왼쪽 상자에 다시 넣는</strong> 겁니다. 점수 누적, 좋아요 카운트,
          게임 경험치… 프로그램의 거의 모든 '쌓이는 값'이 이 한 줄의 반복이에요.
        </div>
      </Section>

      <Section n={5} title="불리언 — 참과 거짓" sub="값이 단 두 개뿐인 자료형, 그런데 프로그램의 두뇌가 된다">
        <p>
          세 번째 자료형은 좀 독특해요. 문자열은 무한히 많고 숫자도 무한히 많은데,{' '}
          <strong>불리언(boolean)</strong>은 값이 딱 <strong>두 개</strong>뿐입니다 —{' '}
          <span className="icode">true</span>(참)와 <span className="icode">false</span>(거짓).
          "지금 비가 오나?", "로그인했나?", "정답인가?" — 예/아니오로 답할 수 있는 모든 질문의
          답을 담는 자료형이에요.
        </p>
        <p>
          불리언은 직접 쓰기보다 <strong>비교의 결과로 태어나는</strong> 경우가 많아요.{' '}
          <span className="icode">{'>'}</span>(크다), <span className="icode">{'<'}</span>(작다),{' '}
          <span className="icode">===</span>(같다) 같은 <strong>비교 연산자</strong>는 양쪽 값을
          견줘 보고, 그 답을 <strong>반드시 true 아니면 false로</strong> 내놓습니다.
        </p>
        <Code>{CODE_BOOLEAN}</Code>
        <div className="tip">
          <b>등호가 왜 3개?</b> <span className="icode">=</span> 하나는 이미 "상자에 넣어라"(할당)로
          쓰이고 있어요. 그래서 "같은가?"를 물을 땐 다른 기호가 필요했고, 자바스크립트에선{' '}
          <span className="icode">===</span>를 씁니다. 등호 2개짜리 <span className="icode">==</span>도
          있긴 한데, 형이 달라도 대충 같다고 해 버리는 느슨한 녀석이라 요즘은 잘 안 써요.{' '}
          <strong>"같은지 물을 땐 무조건 3개"</strong>로 외워 두면 안전합니다.
        </div>
        <div className="tip">
          <b>다음 강좌 예고</b> "불리언이 왜 프로그램의 두뇌예요?" — 다음 강좌의 조건문{' '}
          <span className="icode">if</span>가 바로 <strong>불리언을 보고 갈림길을 고르는</strong>{' '}
          문법이거든요. "나이가 19 이상이<strong>면</strong>(true) 이쪽, 아니<strong>면</strong>
          (false) 저쪽." 오늘 배운 비교 연산자가 그대로 조건문의 재료가 됩니다.
        </div>
      </Section>

      <Section n={6} title="자료형이 왜 중요할까" sub={'"1" + 1은 왜 2가 아닐까 — 형이 다르면 같은 연산도 다르게 움직인다'}>
        <p>
          "문자열이든 숫자든 그냥 값이면 됐지, 종류가 왜 중요해요?" 좋은 질문이에요. 답부터
          말하면 — <strong>컴퓨터는 값의 종류(자료형)를 보고 행동을 결정</strong>하기 때문입니다.
          겉보기엔 같은 <span className="icode">+</span>인데, 숫자 사이에선 <strong>덧셈</strong>을
          하고 문자열이 끼어 있으면 <strong>이어 붙이기</strong>를 해요.
        </p>
        <p>
          값의 정체가 궁금할 땐 <span className="icode">typeof</span>라는 돋보기를 대 보세요.
          값 앞에 붙이면 그 값의 자료형을 문자열로 알려 줍니다.
        </p>
        <Code>{CODE_TYPEOF}</Code>
        <p>
          <span className="icode">"1" + 1</span>이 <span className="icode">"11"</span>이 되는 이유,
          이제 보이시죠? 왼쪽의 <span className="icode">"1"</span>은 따옴표에 싸인{' '}
          <strong>문자열</strong>이에요. 문자열이 낀 <span className="icode">+</span>는 이어
          붙이기로 동작하니까, 숫자 1까지 글자 취급해서 <span className="icode">"11"</span>을
          만듭니다. 오류도 안 내고 <strong>조용히</strong> 이상한 결과를 내놓는다는 게 진짜
          함정이에요.
        </p>
        <div className="tip">
          <b>이 함정, 실전에서 꼭 만난다</b> 섹션 7에서 쓸 <span className="icode">prompt</span>는
          사용자가 뭘 입력하든 <strong>항상 문자열로</strong> 돌려줘요. "2009"를 입력해도
          숫자 2009가 아니라 문자열 <span className="icode">"2009"</span>라는 뜻이죠. 그대로
          계산에 쓰면 사고가 나니까, <span className="icode">Number()</span>로{' '}
          <strong>형을 변환</strong>해서 담아야 합니다. 헷갈리면{' '}
          <span className="icode">typeof</span>로 정체를 확인하는 습관을 들이세요.
        </div>
      </Section>

      <Section n={7} title="실습 — 변수로 문장 조립하기" sub="오늘 배운 걸 전부 모아, 나를 소개하는 프로그램 만들기">
        <p>
          이제 손을 움직일 차례예요. 목표: <strong>이름과 출생연도를 입력받아, 나이를 계산해서
          자기소개 문장을 출력하는 프로그램</strong>. 오늘 배운 재료가 전부 들어갑니다 —
          변수(1), const(2), 템플릿 리터럴(3), 뺄셈(4), 그리고 형 변환(6)까지요.
        </p>
        <p>
          새 등장인물은 <span className="icode">prompt</span> 하나뿐이에요. 브라우저에{' '}
          <strong>입력창을 띄우고, 사용자가 적은 내용을 문자열로 돌려주는</strong> 함수입니다.
          브라우저에서 <span className="icode">F12</span>를 눌러 콘솔(Console) 탭을 열고, 아래
          코드를 한 줄씩 입력해 보세요.
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <p>
          실행됐다면, 여기서 멈추지 말고 <strong>변수를 하나만 바꿔 보세요.</strong>{' '}
          <span className="icode">intro</span> 문장은 그대로 두고{' '}
          <span className="icode">name</span>에 친구 이름을 넣으면? 출생연도를 바꾸면? —{' '}
          <strong>변수 하나를 바꿨을 뿐인데 문장 전체가 따라 바뀌는</strong> 이 경험이 오늘의
          핵심입니다. 값과 틀을 분리해 두면, 값만 갈아 끼워서 무한히 재사용할 수 있다 — 모든
          프로그램이 이 원리로 만들어져요.
        </p>
        <div className="tip">
          <b>도전 과제</b> ① <span className="icode">THIS_YEAR - birthYear + 1</span>로 바꿔서
          '한국식 세는나이'를 계산해 보세요. ② <span className="icode">age {'>'}= 20</span>의
          결과를 <span className="icode">isAdult</span> 변수에 담아 함께 출력해 보세요 — 섹션 5의
          불리언이 어떻게 태어나는지 눈으로 확인할 수 있어요. ③ 일부러{' '}
          <span className="icode">Number()</span>를 빼고 실행해 보세요. 나이가 이상한 값이 되는
          걸 보면, 섹션 6의 함정이 왜 무서운지 몸으로 알게 됩니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📦 여기까지 왔다면</h3>
          <p className="muted">
            축하해요 — 프로그래밍의 가장 작은 부품을 손에 넣었습니다. 값을 상자에 담고(변수),
            바뀌면 안 되는 건 봉인하고(const), 글자·숫자·참거짓이라는 세 가지 재료를 구분하고
            (자료형), 형이 다르면 결과도 달라진다는 함정까지 겪어 봤어요. 그런데 지금 우리
            프로그램은 위에서 아래로 <strong>한 길로만</strong> 흘러가죠. "나이가 19 이상이면
            이렇게, 아니면 저렇게" — 상황을 보고 <strong>컴퓨터가 스스로 길을 고르게</strong>{' '}
            만들려면, 오늘 배운 불리언이 핵심 열쇠가 됩니다. 다음{' '}
            <Link to="/learn/lv1-conditionals"><strong>조건문: 컴퓨터가 판단하게 하기</strong></Link>{' '}
            강좌에서 이어서 배워 봅시다.
          </p>
        </div>
      </div>
    </div>
  );
}
