// 이 파일이 하는 일: "HTML / CSS 기초" 코스 — 웹페이지가 HTML(뼈대)과 CSS(옷)로
// 만들어진다는 사실에서 출발해, 우리 플랫폼의 실제 코드(global.css, 상단 네비)를
// 해부하고, 마지막엔 자기소개 페이지 한 장을 직접 만들어 보는 8섹션 정적 학습 페이지.
// (웹의 정체 → HTML 구조 → CSS 첫걸음 → 박스 모델 → 색·글꼴 → Flexbox → 반응형 → 직접 해보기)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 코드 예시는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 코드 예시 · 텍스트 다이어그램 상수들 ──

const CODE_THREE_LAYERS = `웹페이지 한 장 = 세 가지 재료의 합작

HTML  →  뼈대     "여기 제목이 있고, 그 아래 버튼이 있다" (구조)
CSS   →  옷       "제목은 크고 파랗게, 버튼은 둥글게"      (모양)
JS    →  움직임   "버튼을 누르면 창이 뜬다"                (동작)

사람으로 치면: HTML은 골격, CSS는 옷과 화장, JS는 근육.
같은 뼈대(HTML)에 옷(CSS)만 갈아입혀도 완전히 다른 사이트처럼 보여요.`;

const CODE_HTML_ANATOMY = `<button class="btn">저장</button>
└┬────┘ └┬──────────┘└┬─┘└┬──────┘
 여는 태그   속성(attribute)  내용   닫는 태그

태그는 <상자>처럼 열고 닫으며, 상자 안에 상자를 넣을 수 있어요(중첩):

<section>            ← 큰 상자
  <h3>제목</h3>      ← 그 안의 작은 상자
  <p>본문 문단</p>
</section>

규칙 하나만 기억: 나중에 연 상자를 먼저 닫는다.
<a><b>...</a></b>  ← 이렇게 엇갈리면 안 돼요!`;

const CODE_SEMANTIC = `우리 학습 플랫폼의 실제 뼈대 (요약 발췌)

<header class="topnav">        ← "여긴 상단 바야"
  <nav>...메뉴들...</nav>      ← "여긴 이동 메뉴야"
</header>
<main>                          ← "여기부터 본문이야"
  <section class="step-card">  ← "이건 한 덩어리 섹션이야"
    <h3>랜선의 구조</h3>
    <p>...</p>
  </section>
</main>

전부 <div>로 써도 화면은 똑같이 나와요. 그런데 왜 이름을 나눌까?
1) 사람이 코드를 읽기 쉬움 — div 100개보다 header/main/section이 지도처럼 보임
2) 검색엔진·스크린리더가 구조를 이해함 (시각장애인용 낭독기가 "본문 시작!"을 앎)
3) 클릭되는 건 <button> — div에 onClick을 달면 키보드로는 못 누릅니다`;

const CODE_CSS_BASIC = `CSS 문장의 생김새: "누구에게(선택자) { 무엇을: 어떻게; }"

h1        { color: blue; }      ← 태그 선택자: 모든 <h1>에게
.card     { padding: 20px; }    ← 클래스 선택자: class="card"인 애들에게
#top-logo { font-size: 15px; }  ← id 선택자: id="top-logo"인 딱 하나에게

셋 중 실무에서 제일 많이 쓰는 건 압도적으로 클래스(.)예요.
태그는 너무 광범위하고, id는 페이지에 하나만 허용되거든요.`;

const CODE_CARD_RULE = `우리 global.css에 실제로 있는 규칙 — .card 해부

.card {
  background: var(--card);       /* 배경색: 변수에서 가져옴 (섹션 5 예고!) */
  border: 1px solid var(--line); /* 테두리: 1px 실선 */
  border-radius: var(--radius);  /* 모서리 둥글기 (= 14px) */
  box-shadow: var(--shadow);     /* 그림자: 살짝 떠 있는 느낌 */
  padding: 20px;                 /* 안쪽 여백 (섹션 4 예고!) */
}

.card + .card {
  margin-top: 14px;              /* 카드가 연달아 오면 사이를 14px 띄움 */
}

읽는 법: "class가 card인 요소는 → 배경·테두리·둥근 모서리·그림자·안쪽 여백을 가져라"
지금 여러분이 보고 있는 이 페이지의 흰 상자들이 전부 이 다섯 줄의 작품이에요.`;

const CODE_BOX_MODEL = `박스 모델 — 모든 HTML 요소는 사실 네 겹의 상자다

┌─ margin (바깥 여백: 옆 상자와의 거리) ─────────┐
│  ┌─ border (테두리: 상자의 벽) ─────────────┐  │
│  │  ┌─ padding (안쪽 여백: 벽과 내용 사이) ─┐  │  │
│  │  │                                      │  │  │
│  │  │        content (내용: 글자·이미지)     │  │  │
│  │  │                                      │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
└──────────────────────────────────────────────┘

택배 상자 비유:
content = 물건, padding = 뽁뽁이, border = 상자 벽, margin = 옆 상자와의 간격

.card의 padding: 20px  → "벽과 글자 사이를 20px 띄워라"
.card + .card의 margin-top: 14px → "상자끼리 14px 떨어져라"`;

const CODE_COLOR_VARS = `색은 사실 숫자예요 — #RRGGBB (빨강·초록·파랑 각 00~FF)

#2159C5  ← 우리 AWESOMEDEV 브랜드 블루!
 ││││└┴─ C5 = 파랑 많이
 ││└┴─── 59 = 초록 조금
 └┴───── 21 = 빨강 아주 조금        → 섞으면 진한 파랑

그런데 이 색을 파일 곳곳에 300번 복붙하면? 색 바꿀 때 300군데 수정...
그래서 우리 global.css는 맨 위 :root에 '색 이름표'를 붙여 둡니다:

:root {
  --primary: #2159C5;    /* 브랜드 블루 */
  --bg: #FAFBFD;         /* 페이지 배경 */
  --ink: #101A28;        /* 글자색 */
}
.btn { background: var(--primary); }   /* 쓸 때는 var(이름표) */

다크 모드의 정체가 바로 이거예요 — 이름표의 '값'만 갈아끼우면 끝:

@media (prefers-color-scheme: dark) {  /* PC가 다크 모드면 */
  :root {
    --bg: #0B1017;       /* 배경은 어둡게 */
    --ink: #E8EDF4;      /* 글자는 밝게 */
    --primary: #6AA0F0;  /* 파랑도 어두운 배경에서 잘 보이게 살짝 밝게 */
  }
}

컴포넌트 코드는 한 줄도 안 바꿨는데 사이트 전체가 옷을 갈아입습니다.`;

const CODE_FLEX = `Flexbox — 상자들을 한 줄로 착착 정렬하는 도구

부모에게 display: flex 를 선언하면, 자식들이 가로로 한 줄에 서요.

우리 플랫폼 상단 네비의 실제 코드 (global.css의 .topnav-inner):

.topnav-inner {
  display: flex;          /* 자식들아, 한 줄로 서! */
  align-items: center;    /* 세로 방향은 가운데 맞춰 */
  gap: 20px;              /* 서로 20px씩 떨어져 */
  height: 56px;
  max-width: 960px;
  margin: 0 auto;         /* 좌우 여백 자동 = 화면 가운데 정렬 */
}

자주 쓰는 3총사:
justify-content → 가로(진행 방향) 정렬: flex-start / center / space-between
align-items     → 세로(교차 방향) 정렬: center가 국룰
gap             → 자식들 사이 간격 (margin 노가다 탈출!)

grid 한 입: flex가 '한 줄 정렬'이라면 grid는 '바둑판 배치'예요.
display: grid; grid-template-columns: 1fr 1fr;  → 두 칸짜리 표 완성.
카드 목록처럼 행과 열이 둘 다 필요할 때 grid를 씁니다.`;

const CODE_MEDIA = `반응형 — 화면 크기에 따라 옷을 갈아입는 CSS

@media (max-width: 640px) {   /* 화면 폭이 640px 이하일 때만 */
  .card-grid {
    grid-template-columns: 1fr;  /* 두 칸짜리 바둑판을 한 칸으로 */
  }
}

'모바일 우선(mobile-first)' 사고방식:
1) 기본 CSS는 제일 좁은 화면(폰) 기준으로 작성
2) @media (min-width: ...) 로 "화면이 넓어지면 이렇게 확장"을 추가

이유: 좁은 화면이 제약이 많아서, 좁은 것부터 설계하면 넓히기는 쉬운데
넓은 것부터 만들면 좁힐 때 여기저기 터져요. 옷도 줄이는 수선이 더 어렵죠.`;

const CODE_MINI_PAGE = `<!-- me.html — VS Code에 새 파일로 저장하고 더블클릭으로 열어 보세요 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>나의 소개</title>
  <style>
    :root { --brand: #2159C5; }          /* 우리처럼 색을 변수로! */
    body {
      font-family: sans-serif;
      background: #FAFBFD;
      display: flex;                      /* 섹션 6에서 배운 flex */
      justify-content: center;
      padding: 40px 16px;
    }
    .card {                               /* 섹션 3·4에서 배운 카드 */
      background: #FFFFFF;
      border: 1px solid #E4E8F0;
      border-radius: 14px;
      padding: 24px;
      max-width: 420px;
    }
    h1 { color: var(--brand); margin: 0 0 8px; }
    .tag {
      display: inline-block;
      background: #E5EDFB;
      color: var(--brand);
      border-radius: 999px;
      padding: 4px 12px;
      font-size: 13px;
      margin-right: 6px;
    }
  </style>
</head>
<body>
  <main class="card">
    <h1>홍길동</h1>
    <p>미림마이스터고 3학년, AWESOMEDEV 수습 개발자입니다.</p>
    <span class="tag">React</span>
    <span class="tag">Spring Boot</span>
    <span class="tag">PostgreSQL</span>
  </main>
</body>
</html>`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'HTML 구조' },
  { n: 3, label: 'CSS 첫걸음' },
  { n: 4, label: '박스 모델' },
  { n: 5, label: '색과 글꼴' },
  { n: 6, label: 'Flexbox' },
  { n: 7, label: '반응형' },
  { n: 8, label: '직접 해보기' },
];

export default function HtmlCssPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 소프트웨어</div>
        <h1>HTML / CSS 기초<br />— 웹페이지의 뼈대와 옷</h1>
        <p>
          지금 보고 있는 이 화면도 결국 HTML과 CSS로 만들어졌어요. 이 코스에서는
          웹페이지의 재료를 하나씩 뜯어 보고, <strong>우리 플랫폼의 진짜 코드</strong>를
          해부한 뒤, 마지막엔 자기소개 페이지 한 장을 직접 만들어 봅니다.
          각 섹션의 <strong>"직접 확인해 보기"</strong>는 꼭 손으로 해보세요 —
          CSS는 눈으로 읽는 과목이 아니라 만져 보는 과목이에요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 60분</span>
          <span className="chip">우리 코드 해부 3회</span>
          <span className="chip">준비물: 브라우저 + VS Code</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="모든 웹은 HTML + CSS + JS, 딱 세 가지로 만든다">
        <p>
          유튜브도, 네이버도, 우리 학습 플랫폼도 — 세상 모든 웹페이지는 결국
          <strong> 딱 세 가지 언어</strong>로 만들어져요. 브라우저가 읽을 수 있는 언어가
          이 셋뿐이거든요.
        </p>
        <Code>{CODE_THREE_LAYERS}</Code>
        <p>
          이번 코스에서는 앞의 두 가지, <strong>뼈대(HTML)</strong>와 <strong>옷(CSS)</strong>을
          배웁니다. 움직임(JS)은 다음 코스에서 이어져요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아무 웹사이트에서나 마우스 <span className="kbd">우클릭</span> →
          <span className="kbd">페이지 소스 보기</span>를 눌러 보세요. 화려한 화면 뒤에 숨어 있던
          진짜 재료 — <span className="icode">&lt;html&gt;</span>로 시작하는 텍스트 —
          가 나타납니다. 어떤 사이트든 예외가 없어요. 웹의 '주방 공개'인 셈이죠.
        </div>
      </Section>

      <Section n={2} title="HTML 구조" sub="태그, 중첩, 그리고 이름이 있는 상자들">
        <p>
          HTML은 <strong>태그(tag)</strong>라는 꺾쇠 괄호로 내용을 감싸는 언어예요.
          "여기부터 여기까지는 제목이야", "이건 버튼이야" 하고 <strong>이름표가 붙은
          상자</strong>에 내용을 담는 거죠.
        </p>
        <Code>{CODE_HTML_ANATOMY}</Code>
        <p>
          여기서 초보와 실무자를 가르는 포인트 하나 — <strong>div만 쓰지 않기</strong>예요.
          <span className="icode">&lt;div&gt;</span>는 "이름 없는 그냥 상자"인데,
          HTML에는 역할이 이름에 담긴 <strong>시맨틱 태그</strong>들이 있어요.
          우리 플랫폼의 실제 뼈대를 보면 이렇게 생겼습니다.
        </p>
        <Code>{CODE_SEMANTIC}</Code>
        <div className="warn">
          <b>클릭은 button에게</b> 겉보기엔 <span className="icode">&lt;div onClick=...&gt;</span>도
          클릭이 되지만, 키보드 <span className="kbd">Tab</span>으로는 접근이 안 되고 스크린리더도
          버튼인 줄 몰라요. "누르는 것"은 반드시 <span className="icode">&lt;button&gt;</span> —
          우리 코드 리뷰에서도 자주 나오는 지적입니다.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 이 페이지에서 <span className="kbd">F12</span> →
          <span className="kbd">Elements</span> 탭을 열어 보세요. 접었다 펼 수 있는 태그 트리가
          보일 거예요. <span className="icode">&lt;section class="step-card"&gt;</span>를 찾아서 —
          네, 바로 지금 읽고 있는 이 카드예요! — 그 안에 어떤 상자들이 중첩돼 있는지 세어 보세요.
        </div>
      </Section>

      <Section n={3} title="CSS 첫걸음" sub="누구에게, 무엇을, 어떻게 — 선택자와 속성">
        <p>
          CSS는 문법이 단순해요. <strong>"누구에게(선택자) 무엇을(속성) 어떻게(값)"</strong> —
          이 한 문장 구조가 전부입니다. 미용실 주문서와 같아요:
          "앞머리는(선택자) 길이를(속성) 눈썹 위로(값)".
        </p>
        <Code>{CODE_CSS_BASIC}</Code>
        <p>
          말로만 배우면 심심하니, <strong>우리 플랫폼의 진짜 CSS</strong>를 해부해 봅시다.
          여러분이 매일 보는 흰 카드 상자의 정체예요.
        </p>
        <Code>{CODE_CARD_RULE}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span> → 개발자 도구 왼쪽 위의
          <span className="kbd">화살표 아이콘(요소 선택)</span>을 누르고 이 카드를 클릭해 보세요.
          오른쪽 <span className="kbd">Styles</span> 패널에 방금 본 <span className="icode">.card</span> 나
          <span className="icode"> .step-card</span> 규칙이 그대로 떠요. 거기서
          <span className="icode"> padding: 20px</span>을 <span className="icode">60px</span>로
          바꿔 보세요 — 화면이 즉시 변합니다! (새로고침하면 원래대로 돌아오니 마음껏.)
        </div>
      </Section>

      <Section n={4} title="박스 모델" sub="모든 요소는 네 겹의 택배 상자다">
        <p>
          CSS에서 제일 중요한 개념 하나만 꼽으라면 <strong>박스 모델</strong>이에요.
          화면의 모든 요소 — 글자 한 줄, 버튼 하나, 이미지 하나 — 는 전부
          <strong> 네 겹짜리 상자</strong>로 취급됩니다.
        </p>
        <Code>{CODE_BOX_MODEL}</Code>
        <p>
          헷갈리기 쉬운 <strong>padding vs margin</strong> — 뽁뽁이(padding)는 상자
          <strong> 안</strong>에 있고, 상자 사이 간격(margin)은 <strong>밖</strong>에 있어요.
          "내용물이 벽에 닿아서 답답하다" → padding, "상자끼리 너무 붙었다" → margin.
          이 구분만 되면 CSS 레이아웃 고민의 절반이 사라집니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 340" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="박스 모델: content를 padding, border, margin이 차례로 감싸는 네 겹 구조">
          <rect x="70" y="25" width="500" height="300" rx="8" fill="var(--amber)" fillOpacity="0.14" stroke="var(--amber)" strokeWidth="1.5" strokeDasharray="6 4" />
          <text x="320" y="52" textAnchor="middle" fontSize="13" fill="var(--ink)">margin · 바깥 여백 — 옆 상자와의 거리</text>
          <rect x="130" y="70" width="380" height="210" rx="8" fill="var(--rose)" fillOpacity="0.14" stroke="var(--rose)" strokeWidth="1.5" />
          <text x="320" y="97" textAnchor="middle" fontSize="13" fill="var(--ink)">border · 테두리 — 상자의 벽</text>
          <rect x="190" y="115" width="260" height="120" rx="8" fill="var(--teal)" fillOpacity="0.14" stroke="var(--teal)" strokeWidth="1.5" />
          <text x="320" y="142" textAnchor="middle" fontSize="13" fill="var(--ink)">padding · 안쪽 여백</text>
          <rect x="250" y="160" width="140" height="50" rx="8" fill="var(--primary)" fillOpacity="0.16" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="320" y="182" textAnchor="middle" fontSize="13" fill="var(--ink)">content · 내용</text>
          <text x="320" y="200" textAnchor="middle" fontSize="12" fill="var(--muted)">글자 · 이미지</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 박스 모델 — content(물건)를 padding(뽁뽁이), border(상자 벽), margin(옆 상자와의 간격)이 차례로 감싼다</p>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span>로 이 카드를 선택한 상태에서
          <span className="kbd">Styles</span> 패널을 아래로 스크롤하면 <strong>알록달록한 상자
          그림</strong>이 나와요 — 주황(margin), 노랑(border), 초록(padding), 파랑(content).
          브라우저가 위 다이어그램을 실제 숫자와 함께 그려 주는 거예요. 각 겹에 마우스를
          올리면 화면에서 해당 영역이 색으로 표시됩니다.
        </div>
      </Section>

      <Section n={5} title="색과 글꼴" sub="#2159C5의 비밀, 그리고 다크 모드의 원리">
        <p>
          <Link to="/learn/computer">컴퓨터의 구성</Link> 코스의 <strong>"색이 숫자"</strong> 파트를
          기억하나요? 컴퓨터에게 색은 빨강·초록·파랑의 양을 적은 숫자였죠. CSS에서는 그 숫자를
          <span className="icode"> #RRGGBB</span> 형태의 <strong>hex 코드</strong>로 씁니다.
        </p>
        <Code>{CODE_COLOR_VARS}</Code>
        <p>
          글꼴도 같은 원리로 관리해요. <span className="icode">font-family</span>로 글꼴,
          <span className="icode"> font-size</span>로 크기, <span className="icode">font-weight</span>로
          굵기(400=보통, 700=굵게)를 정합니다. 우리 플랫폼이 다크 모드에서도 코드를 한 줄도
          안 고치고 멀쩡한 이유 — <strong>모든 색이 :root 변수 한 곳에 모여 있기 때문</strong> —
          를 이제 설명할 수 있어야 해요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> PC의 테마를 바꿔 보세요.
          <span className="kbd">Windows 설정 → 개인 설정 → 색 → 다크</span>로 전환하고
          이 페이지로 돌아오면 — 새로고침 없이도 옷을 갈아입습니다.
          <span className="icode"> @media (prefers-color-scheme: dark)</span> 블록이
          이름표 값을 통째로 바꿔치기한 순간이에요.
        </div>
      </Section>

      <Section n={6} title="레이아웃: Flexbox" sub="우리 상단 네비가 한 줄로 서 있는 이유">
        <p>
          박스 모델이 상자 <strong>한 개</strong>의 해부학이라면, <strong>Flexbox</strong>는
          상자 <strong>여러 개</strong>를 줄 세우는 기술이에요. 부모가
          <span className="icode"> display: flex</span> 하고 구령을 외치면 자식들이 정렬합니다.
          지금 화면 맨 위의 네비게이션 바 — 로고와 메뉴가 나란히 서 있는 것도 flex의 작품이에요.
        </p>
        <Code>{CODE_FLEX}</Code>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Flexbox: display flex를 선언한 부모 안에서 자식 상자들이 가로 한 줄로 gap 간격을 두고 세로 가운데 정렬된 모습">
          <text x="34" y="40" fontSize="12" fill="var(--muted)">display: flex 를 선언한 부모 (.topnav-inner)</text>
          <rect x="30" y="52" width="580" height="110" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="38" y1="107" x2="602" y2="107" stroke="var(--line)" strokeDasharray="4 4" />
          <rect x="55" y="84" width="100" height="46" rx="8" fill="var(--primary)" fillOpacity="0.16" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="105" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">로고</text>
          <rect x="175" y="84" width="90" height="46" rx="8" fill="var(--primary)" fillOpacity="0.16" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="220" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">메뉴</text>
          <rect x="285" y="84" width="90" height="46" rx="8" fill="var(--primary)" fillOpacity="0.16" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="330" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">메뉴</text>
          <rect x="395" y="84" width="90" height="46" rx="8" fill="var(--primary)" fillOpacity="0.16" stroke="var(--primary)" strokeWidth="1.5" />
          <text x="440" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">메뉴</text>
          <line x1="155" y1="168" x2="155" y2="182" stroke="var(--muted)" strokeWidth="1" />
          <line x1="175" y1="168" x2="175" y2="182" stroke="var(--muted)" strokeWidth="1" />
          <line x1="155" y1="182" x2="175" y2="182" stroke="var(--muted)" strokeWidth="1" />
          <text x="165" y="202" textAnchor="middle" fontSize="12.5" fill="var(--muted)">gap: 20px — 자식 사이 간격</text>
          <text x="470" y="202" textAnchor="middle" fontSize="12.5" fill="var(--muted)">align-items: center — 세로 가운데 정렬</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 부모에 display: flex — 자식들이 한 줄로 서고, gap만큼 떨어지고, 세로는 점선(중앙)에 맞춰 정렬된다</p>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span>로 상단 네비의
          <span className="icode"> .topnav-inner</span>를 선택하면 <span className="kbd">Elements</span> 탭에서
          태그 옆에 작은 <span className="kbd">flex</span> 배지가 붙어 있어요. 배지를 클릭하면
          flex 컨테이너가 화면에 표시되고, <span className="kbd">Styles</span> 패널에서
          <span className="icode"> gap: 20px</span>을 <span className="icode">60px</span>으로 바꾸면
          메뉴 사이가 즉시 벌어집니다. flex를 글이 아니라 손으로 익히는 순간!
        </div>
      </Section>

      <Section n={7} title="반응형" sub="폰에서도, 모니터에서도 — @media 하나로">
        <p>
          같은 사이트가 폰에서는 한 줄로, 모니터에서는 여러 칸으로 보이죠?
          비밀은 <span className="icode">@media</span> — <strong>"화면이 이런 조건일 때만
          이 CSS를 적용해"</strong>라는 조건문이에요. 화면 크기에 따라 다른 옷을 꺼내 입는 겁니다.
        </p>
        <Code>{CODE_MEDIA}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> <span className="kbd">F12</span> → 왼쪽 위
          <span className="kbd">폰·태블릿 아이콘(기기 툴바)</span>을 누르면 이 페이지를
          모바일 화면 크기로 볼 수 있어요. 위쪽에서 <span className="kbd">iPhone</span> 등
          기종을 골라 가며 우리 플랫폼의 레이아웃이 어떻게 접히는지 관찰해 보세요.
        </div>
        <div className="warn">
          <b>티켓 풀 연결 (FE-06)</b> 수습 티켓 풀의 <strong>FE-06 "모바일 레이아웃 깨짐 수정"</strong>이
          바로 이 섹션의 실전판이에요. 방금 배운 기기 툴바로 깨지는 화면을 재현하고,
          @media 블록을 다듬어 고치는 티켓입니다. 이 코스를 마치면 도전해 보세요.
        </div>
      </Section>

      <Section n={8} title="직접 해보기 — 자기소개 페이지 한 장" sub="배운 것 전부를 30줄에 담기">
        <p>
          이제 진짜로 만들어 봅시다. <span className="kbd">VS Code</span>에서 새 파일
          <span className="icode"> me.html</span>을 만들고, 아래 코드를 <strong>복붙 말고
          한 줄씩 따라 쳐 보세요</strong>. 타자로 친 코드만 손에 남아요. 다 쳤으면 파일을
          저장하고 더블클릭 — 브라우저에 내 페이지가 뜹니다. 서버도, 설치도 필요 없어요.
        </p>
        <Code>{CODE_MINI_PAGE}</Code>
        <ol className="olist">
          <li>일단 그대로 완성해서 브라우저로 열어 본다. (뜨는 것 자체가 첫 성공!)</li>
          <li>이름·소개 문구를 진짜 내 것으로 바꾼다.</li>
          <li><span className="icode">--brand</span> 값을 내가 좋아하는 색 hex 코드로 바꿔 본다 —
            변수 하나 바꿨는데 제목과 태그가 한꺼번에 바뀌는 걸 확인!</li>
          <li><span className="icode">border-radius</span>를 <span className="icode">0</span>과
            <span className="icode"> 30px</span>으로 바꿔 보며 카드 인상이 어떻게 달라지는지 느껴 본다.</li>
          <li>(도전) <span className="icode">.tag</span>를 하나 더 추가하고,
            @media로 화면이 좁을 때 카드 padding을 줄여 본다.</li>
        </ol>
        <div className="tip">
          <b>막히면</b> 화면이 하얗게만 나오면 십중팔구 <strong>태그를 안 닫았거나 중괄호 짝이
          안 맞는</strong> 거예요. <span className="kbd">F12</span> → <span className="kbd">Console</span>에
          단서가 있고, VS Code의 색 표시가 이상해지는 지점이 범인 근처입니다.
          그래도 안 되면 멘토 채널로 — 에러 화면 캡처와 함께!
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎨 여기까지 왔다면</h3>
          <p className="muted">
            이제 웹페이지의 <strong>뼈대(HTML)</strong>를 세우고 <strong>옷(CSS)</strong>을
            입힐 수 있게 됐어요. 남은 재료는 하나 — 페이지를 움직이게 하는{' '}
            <strong>근육</strong>이죠. <Link to="/learn/javascript"><strong>자바스크립트 기초</strong></Link> 코스에서
            버튼이 눌리고, 데이터가 바뀌고, 화면이 반응하는 원리를 이어서 배워 보세요.
            거기까지 가면 우리 React 코드가 읽히기 시작합니다.
          </p>
        </div>
      </div>
    </div>
  );
}
