// 이 파일이 하는 일: "모바일 디자인" 코스 — 엄지손가락 하나로 조작하는 화면을
// 어떻게 설계하는지 7개 섹션으로 안내하는 정적 학습 페이지.
// (엄지의 법칙 → 모바일 우선 → 뷰포트/브레이크포인트 → 제스처 → 흔한 실수 → 웹 vs 앱 → 실습 점검)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 텍스트 다이어그램 · 표 상수들 ──

const CODE_THUMB_ZONE = `한 손으로 폰을 쥐었을 때, 엄지가 닿는 영역 지도

┌─────────────────┐
│  ✕ 힘든 영역      │  ← 화면 위쪽: 엄지를 쭉 뻗어야 닿음
│                 │     (뒤로가기·닫기 같은 '가끔 쓰는' 버튼 자리)
│  △ 애매한 영역    │
│                 │
│  ○ 편한 영역      │  ← 화면 아래쪽 1/3: 엄지의 홈그라운드
│ [탭바] [탭바] [탭바]│     (자주 쓰는 내비게이션은 여기!)
└─────────────────┘

그래서 요즘 앱들의 메인 메뉴가 전부 '하단 탭바'인 거예요.
PC 시절엔 메뉴가 위에 있었죠 — 마우스는 어디든 똑같이 편하니까.`;

const CODE_TOUCH_TARGET = `터치 타깃 최소 크기 — 44px의 근거

마우스 커서 끝:      약 1px  → 픽셀 단위로 정밀 클릭 가능
어른 엄지 접촉면:    약 10mm → 화면에서 대략 44px 이상

┌──────┐          ┌──┐
│  OK  │ 44×44px  │OK│ 24×24px
└──────┘          └──┘
  누르기 쉬움        옆 버튼을 같이 누르거나 빗나감

CSS로 보장하는 법:
.btn { min-width: 44px; min-height: 44px; }

버튼이 작아 보여야 한다면? 보이는 크기는 작게, 누르는 영역은
padding으로 넓게 — '과녁'과 '그림'을 분리하면 됩니다.`;

const CODE_MOBILE_FIRST = `모바일 우선(Mobile First) — CSS를 쓰는 순서가 뒤집힌다

/* ✕ 데스크톱 우선: 큰 화면 기준으로 만들고 좁은 화면을 '고침' */
.card-list { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .card-list { grid-template-columns: 1fr; }  /* 덜어내는 작업의 연속 */
}

/* ○ 모바일 우선: 좁은 화면이 기본값, 넓어지면 '더함' */
.card-list { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .card-list { grid-template-columns: repeat(4, 1fr); }
}

핵심 차이: max-width로 '빼며' 내려가느냐, min-width로 '더하며' 올라가느냐.
좁은 화면은 넣을 수 있는 게 적어서, 여기서 시작하면
"진짜 중요한 것"부터 고르게 됩니다 — 우선순위 정리가 공짜로 따라와요.`;

const CODE_VIEWPORT = `뷰포트(viewport) = 브라우저가 페이지를 그리는 '창문'의 크기

index.html에 이 한 줄이 없으면 모바일 브라우저는
"이건 PC용 페이지겠지" 하고 980px짜리 가상 화면에 그린 뒤 축소해서 보여줘요:

<meta name="viewport" content="width=device-width, initial-scale=1" />

width=device-width  → 창문 폭 = 기기 실제 폭 (375px이면 375px로)
initial-scale=1     → 처음부터 확대/축소 없이 1:1로

우리 플랫폼 index.html에도 이 태그가 있어요. 지워 보면(실습 금지!)
모든 글씨가 개미만 해집니다.`;

const CODE_BREAKPOINTS = `브레이크포인트 = 레이아웃이 '변신'하는 폭의 기준선

폭(px)     대표 기기            흔한 레이아웃
──────────────────────────────────────────────
~ 640     스마트폰 세로         1열, 하단 탭바
640~1024  태블릿·폰 가로        2열, 사이드바 접힘
1024 ~    노트북·데스크톱        3~4열, 사이드바 펼침

주의: "아이폰은 390px이니까 390에 브레이크포인트!"는 함정이에요.
기기는 매년 바뀝니다. 기기가 아니라
"이 레이아웃이 몇 px부터 불편해지는가"를 기준으로 잡으세요.
창을 천천히 줄여 보다가 디자인이 깨지는 지점 — 거기가 브레이크포인트입니다.`;

const CODE_GESTURES = `말 안 해도 통하는 제스처 관습 — 사용자의 '근육 기억'

제스처              사용자가 기대하는 동작
─────────────────────────────────────────────
아래로 당기기         새로고침 (풀 투 리프레시)
좌우 스와이프         탭 전환, 카드 넘기기, 항목 삭제
길게 누르기          복사·상세 메뉴 (PC의 우클릭 역할)
두 손가락 벌리기      확대 (핀치 줌)
화면 가장자리 스와이프  뒤로 가기 (특히 iOS)

규칙 1: 관습을 따르라 — 당겨서 새로고침인데 삭제가 되면 대참사.
규칙 2: 제스처는 '지름길'로만 — 스와이프로만 삭제 가능하고
        버튼이 없다면, 그 기능은 없는 거나 마찬가지예요.
        보이는 버튼 + 제스처 지름길, 이게 정석입니다.`;

const CODE_MISTAKES = `모바일에서 가장 흔한 실수 2가지 — 우리도 겪었어요

① 너무 작은 글씨
   본문 16px 미만은 모바일에서 읽기 고문입니다.
   특히 input의 글씨가 16px보다 작으면 iOS는
   입력할 때 화면을 강제로 확대해 버려요(레이아웃이 튐).
   → input { font-size: 16px; } 은 사실상 필수.

② 의도치 않은 가로 스크롤
   요소 하나가 화면 폭을 삐져나가면 페이지 전체가
   좌우로 흔들리는 '덜렁거리는 페이지'가 됩니다.
   단골 범인: 고정 폭(width: 600px), 긴 URL/코드 줄바꿈 실패,
   100vw + padding 조합, 스크롤 컨테이너 없는 넓은 표.

   범인 색출 1줄 (개발자 도구 Console에서):
   [...document.querySelectorAll('*')]
     .filter(el => el.scrollWidth > document.documentElement.clientWidth)

② 번이 낯익다면 정상입니다 — 우리 플랫폼 FE-06 티켓이 바로
"모바일에서 표가 화면을 뚫고 나가는" 가로 스크롤 버그예요.`;

const CODE_WEB_VS_APP = `모바일 웹 vs 네이티브 앱 — 두 갈래 길 비교

              모바일 웹 (React)        앱 (React Native · Flutter)
────────────────────────────────────────────────────────────
설치           필요 없음 (URL로 접속)     스토어에서 설치
업데이트        배포 즉시 반영            스토어 심사 대기
푸시 알림       제한적                   자유로움
카메라·센서     제한적                   깊게 접근 가능
첫 진입 장벽    낮음                     높음 (설치 설득 필요)
손맛(체감 성능)  브라우저 거침            네이티브급 부드러움

React Native: JS/React 문법으로 iOS·Android 동시 개발
              → React를 아는 우리에게 진입장벽이 낮아요.
Flutter:      Dart 언어, 자체 렌더링 엔진으로 픽셀까지 직접 그림.

지금 배우는 모바일 디자인 원칙(엄지 영역·터치 타깃·제스처)은
웹이든 앱이든 똑같이 적용됩니다 — 도구가 바뀌어도 엄지는 그대로니까요.`;

const CODE_DEVTOOLS = `개발자 도구로 모바일 뷰 켜기 (Chrome/Edge 기준)

1) 우리 플랫폼(edu.awesomedevapp.com) 접속
2) F12 → 개발자 도구 열기
3) Ctrl+Shift+M → '기기 툴바' 토글 (스마트폰 아이콘)
4) 상단에서 기기 선택: iPhone SE(375px)가 좋은 시험대예요
   — 좁은 화면에서 살아남으면 어디서든 살아남습니다.
5) 회전 아이콘으로 가로 모드도 확인

점검 체크리스트 (섹션 1~5 총출동!)
□ 하단/주요 버튼이 엄지 영역에 있는가? (섹션 1)
□ 터치 타깃이 44px 이상인가? 링크끼리 너무 붙지 않았나? (섹션 1)
□ 본문 글씨가 16px 이상인가? (섹션 5)
□ 가로 스크롤이 생기는 페이지는 없는가? (섹션 5)
□ 375px에서 레이아웃이 깨지는 지점은? (섹션 3)`;

const CODE_REPORT = `개선점 리포트 양식 — 이렇게 3개를 적어 멘토에게 공유하세요

[개선점 1]
- 발견 위치: (예: 학습 센터 목록 페이지, iPhone SE 세로)
- 증상:     (예: 코스 카드 안의 긴 제목이 잘리지 않고 삐져나가
             가로 스크롤 발생)
- 어긴 원칙: (예: 섹션 5 — 의도치 않은 가로 스크롤)
- 제안:     (예: 제목에 줄바꿈 허용, 카드에 max-width: 100%)

→ 세 번째 개선점까지 채웠다면, 그중 하나는
  FE-06 같은 실제 티켓으로 등록해 보세요.
  "발견 → 리포트 → 티켓 → 수정"이 실무의 한 바퀴입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '웹 vs 앱' },
  { n: 7, label: '실습: 플랫폼 점검' },
];

export default function MobileDesignPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>모바일 디자인<br />— 엄지손가락을 위한 화면 설계</h1>
        <p>
          모바일 화면은 "작은 PC 화면"이 아니라, <strong>엄지 하나로 조작하는 완전히 다른
          무대</strong>예요. 이 코스에서는 엄지가 닿는 영역부터 제스처 관습까지 배운 뒤,
          마지막엔 <strong>우리 플랫폼을 직접 모바일 뷰로 점검</strong>해서 개선점 3개를 찾아냅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">실습 2개 + 점검 리포트</span>
          <span className="chip">준비물: 내 PC와 내 폰</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="터치 타깃 44px, 그리고 내비게이션이 아래로 내려온 이유">
        <p>
          PC의 마우스 커서는 화면 어디든 <strong>똑같은 노력</strong>으로 갑니다. 하지만 폰을
          한 손으로 쥔 엄지는 달라요 — 화면 아래쪽은 홈그라운드, 위쪽은 원정 경기입니다.
          버스 손잡이를 잡은 반대 손으로 폰을 쓰는 자신을 떠올려 보세요.
        </p>
        <Code>{CODE_THUMB_ZONE}</Code>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="한 손으로 폰을 쥐었을 때 엄지가 닿는 영역을 폰 화면 위에 세 구간으로 나눈 그림. 하단은 편한 영역, 중간은 애매한 영역, 상단 모서리는 힘든 영역.">
          <rect x="200" y="20" width="200" height="320" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="2" />
          <rect x="212" y="40" width="176" height="93" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="2" strokeDasharray="5 4" />
          <rect x="212" y="137" width="176" height="90" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" strokeDasharray="5 4" />
          <rect x="212" y="231" width="176" height="89" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="300" y="80" textAnchor="middle" fontSize="14" fill="var(--ink)">힘든 영역</text>
          <text x="300" y="100" textAnchor="middle" fontSize="12" fill="var(--muted)">엄지를 쭉 뻗어야 닿음</text>
          <text x="300" y="118" textAnchor="middle" fontSize="12" fill="var(--muted)">가끔 쓰는 버튼 자리</text>
          <text x="300" y="178" textAnchor="middle" fontSize="14" fill="var(--ink)">애매한 영역</text>
          <text x="300" y="198" textAnchor="middle" fontSize="12" fill="var(--muted)">본문·콘텐츠</text>
          <text x="300" y="258" textAnchor="middle" fontSize="14" fill="var(--ink)">편한 영역</text>
          <text x="300" y="278" textAnchor="middle" fontSize="12" fill="var(--muted)">엄지의 홈그라운드</text>
          <rect x="224" y="292" width="48" height="20" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <rect x="276" y="292" width="48" height="20" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <rect x="328" y="292" width="48" height="20" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="300" y="332" textAnchor="middle" fontSize="12" fill="var(--teal)">하단 탭바 = 자주 쓰는 내비게이션</text>
          <circle cx="230" cy="58" r="9" fill="var(--card)" stroke="var(--rose)" strokeWidth="2" />
          <text x="230" y="63" textAnchor="middle" fontSize="12" fill="var(--rose)">✕</text>
          <line x1="196" y1="58" x2="120" y2="58" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <text x="116" y="54" textAnchor="end" fontSize="13" fill="var(--ink)">상단 모서리 버튼</text>
          <text x="116" y="72" textAnchor="end" fontSize="12" fill="var(--muted)">폰을 고쳐 잡아야 함</text>
          <line x1="404" y1="275" x2="500" y2="275" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <text x="508" y="271" fontSize="13" fill="var(--ink)">화면 아래쪽 1/3</text>
          <text x="508" y="289" fontSize="12" fill="var(--muted)">한 손으로 다 닿는 구간</text>
          <text x="508" y="120" fontSize="13" fill="var(--ink)">터치 타깃</text>
          <rect x="508" y="132" width="44" height="44" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="530" y="159" textAnchor="middle" fontSize="12" fill="var(--primary)">44px</text>
          <text x="562" y="159" fontSize="12" fill="var(--muted)">누르기 쉬움</text>
          <rect x="508" y="190" width="24" height="24" rx="8" fill="var(--card)" stroke="var(--muted)" strokeWidth="2" />
          <text x="540" y="206" fontSize="12" fill="var(--muted)">24px — 빗나감</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 엄지 도달 범위 — 아래쪽 1/3은 편하고, 위쪽 모서리로 갈수록 힘들어진다</p>
        <p>
          두 번째 법칙은 <strong>과녁의 크기</strong>예요. 마우스 커서는 바늘 끝이지만,
          엄지는 도장입니다. 도장으로 바늘구멍을 맞출 수는 없죠. 그래서 눌리는 모든 것은
          <strong> 최소 44×44px</strong>을 확보해야 해요.
        </p>
        <Code>{CODE_TOUCH_TARGET}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 자기 폰에서 자주 쓰는 앱 3개를 열어 보세요.
          메인 메뉴가 전부 <strong>하단 탭바</strong>에 있지 않나요? 그리고 화면 맨 위
          왼쪽 구석의 버튼을 한 손 엄지로 눌러 보세요 — 폰을 고쳐 잡게 되는 그 불편함이
          오늘 배운 '엄지의 법칙'의 증거입니다.
        </div>
      </Section>

      <Section n={2} title="모바일 우선 설계" sub="좁은 화면에서 시작하면 우선순위가 공짜로 정리된다">
        <p>
          <strong>모바일 우선(Mobile First)</strong>은 "좁은 화면용 CSS를 기본값으로 쓰고,
          화면이 넓어질 때 스타일을 <strong>더해 가는</strong>" 설계 방식이에요.
          작은 원룸에 살림을 먼저 들여 보면 진짜 필요한 물건이 뭔지 알게 되죠 — 넓은 집으로
          이사가면서 물건을 더하는 건 쉽지만, 반대로 큰 집 살림을 원룸에 욱여넣는 건 고역입니다.
        </p>
        <Code>{CODE_MOBILE_FIRST}</Code>
        <p>
          기술적인 이유도 있어요. 실제 사용자 트래픽의 절반 이상이 모바일이고, 모바일 기기는
          PC보다 성능과 네트워크가 약합니다. <strong>가장 약한 환경을 기본값</strong>으로 삼으면,
          나머지 환경에서는 저절로 쾌적해져요. 우리 플랫폼의 학습 페이지들도 1열 세로 흐름이
          기본이고, 넓은 화면에서 여백이 늘어나는 구조입니다.
        </p>
        <div className="warn">
          <b>흔한 오해</b> 모바일 우선 = "모바일만 잘하면 됨"이 아니에요. PC 화면도
          똑같이 중요합니다. 순서의 문제예요 — <strong>어느 쪽을 기본값으로 두고
          시작하느냐</strong>의 이야기입니다.
        </div>
      </Section>

      <Section n={3} title="뷰포트와 브레이크포인트" sub="창문의 크기, 그리고 레이아웃이 변신하는 기준선">
        <p>
          <strong>뷰포트</strong>는 브라우저가 페이지를 그리는 '창문'이에요. 모바일 브라우저는
          기본적으로 이 창문을 PC 크기로 가정하기 때문에, HTML에 <strong>viewport 메타 태그</strong>
          한 줄을 넣어 "창문 크기 = 기기 실제 크기"라고 알려줘야 합니다.
        </p>
        <Code>{CODE_VIEWPORT}</Code>
        <p>
          <strong>브레이크포인트</strong>는 화면 폭이 어느 선을 넘으면 레이아웃이 변신하는
          기준선이에요. 옷 사이즈 S·M·L처럼, 모든 몸에 맞는 옷 한 벌 대신
          <strong> 몇 개의 구간</strong>을 정해 두는 거죠.
        </p>
        <Code>{CODE_BREAKPOINTS}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 이 페이지에서 브라우저 창의 오른쪽 끝을 잡고
          <strong> 천천히 좁혀 보세요</strong>. 상단 메뉴와 카드 배치가 어느 폭에서
          '변신'하나요? 그 순간이 바로 이 페이지의 브레이크포인트가 발동한 지점입니다.
        </div>
      </Section>

      <Section n={4} title="제스처 관습" sub="스와이프·풀투리프레시 — 사용자의 근육 기억을 존중하기">
        <p>
          모바일에는 버튼 없이도 통하는 <strong>몸짓 언어</strong>가 있어요. 목록을 아래로
          당기면 새로고침, 카드를 옆으로 밀면 넘기기 — 아무도 가르쳐 주지 않았는데 모두가
          알고 있죠. 수년간 수백 개의 앱이 같은 동작을 반복하며 만들어진
          <strong> 근육 기억</strong>이기 때문입니다.
        </p>
        <Code>{CODE_GESTURES}</Code>
        <p>
          디자이너가 할 일은 새 제스처를 발명하는 게 아니라 <strong>관습을 따르는 것</strong>이에요.
          문 손잡이를 상상해 보세요 — 아무리 예뻐도 돌리는 방향이 남들과 반대라면 나쁜
          손잡이입니다. 그리고 제스처는 눈에 보이지 않으니, 반드시 <strong>보이는 버튼과
          짝</strong>을 이뤄야 해요. 제스처는 아는 사람의 지름길일 뿐입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 자기 폰의 메신저 앱에서 대화 목록을 <strong>왼쪽으로
          살짝 밀어</strong> 보세요. 숨어 있던 버튼(알림 끄기·삭제 등)이 나타나죠?
          그 기능이 스와이프 없이도 (길게 누르기 등으로) 가능한지 확인해 보세요 —
          잘 만든 앱은 반드시 두 번째 길을 마련해 둡니다.
        </div>
      </Section>

      <Section n={5} title="모바일에서 흔한 실수" sub="작은 글씨와 가로 스크롤 — FE-06 티켓의 정체">
        <Code>{CODE_MISTAKES}</Code>
        <p>
          가로 스크롤이 특히 악질인 이유는 <strong>범인이 요소 하나</strong>여도 페이지
          전체가 덜렁거리기 때문이에요. 표(table)처럼 원래 넓은 콘텐츠는 페이지를 늘리는 대신,
          <span className="icode">overflow-x: auto</span>를 준 <strong>컨테이너 안에서만</strong>
          스크롤되게 가두는 것이 정석입니다.
        </p>
        <div className="warn">
          <b>FE-06 티켓과 연결</b> 우리 플랫폼 이슈 트래커의 <strong>FE-06</strong>이 정확히
          이 유형이에요 — 모바일에서 표가 화면 폭을 뚫고 나가 가로 스크롤이 생기는 버그.
          이 섹션을 이해했다면 여러분은 이미 FE-06을 고칠 이론을 갖춘 겁니다.
          섹션 7 실습에서 직접 재현해 보고, 관심 있다면 멘토에게 이 티켓을 요청해 보세요.
        </div>
      </Section>

      <Section n={6} title="웹 vs 앱" sub="React Native·Flutter — 두 길의 차이 알아보기">
        <p>
          같은 서비스라도 <strong>모바일 웹</strong>으로 낼지 <strong>네이티브 앱</strong>으로
          낼지는 큰 갈림길이에요. 웹은 URL 하나로 바로 열리는 <strong>노점</strong> — 진입은
          쉽지만 할 수 있는 게 제한적이죠. 앱은 <strong>정식 매장</strong> — 들어오게 하는
          문턱(설치)은 높지만, 들어온 손님에게는 푸시 알림·카메라·부드러운 손맛까지
          훨씬 많은 걸 해줄 수 있어요.
        </p>
        <Code>{CODE_WEB_VS_APP}</Code>
        <p>
          어썸데브는 React로 웹을 만들어요. 그리고 <strong>React Native는 React 지식을
          그대로 살릴 수 있는 길</strong>이라, 언젠가 앱 프로젝트를 만나도 낯설지 않을 거예요.
          좋은 소식: 지금 이 코스에서 배운 원칙들은 도구와 무관하게 전부 그대로 통합니다.
          화면을 누르는 건 언제나 사람의 엄지니까요.
        </p>
      </Section>

      <Section n={7} title="실습: 우리 플랫폼 모바일 점검" sub="개발자 도구 모바일 뷰 + 개선점 3개 리포트">
        <p>
          이제 배운 걸 전부 들고 <strong>우리 플랫폼을 검사</strong>할 시간입니다. 폰이 없어도
          돼요 — 개발자 도구의 <strong>기기 툴바</strong>가 다양한 화면 크기를 흉내 내 줍니다.
        </p>
        <Code>{CODE_DEVTOOLS}</Code>
        <p>점검하면서 발견한 문제를 아래 양식으로 <strong>3개</strong> 정리해 보세요.</p>
        <ol className="olist">
          <li>기기 툴바(<span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">M</span>)로 375px 화면에서 플랫폼의 주요 페이지 4~5개를 돌아본다.</li>
          <li>체크리스트에 걸리는 지점을 스크린샷으로 남긴다.</li>
          <li>아래 리포트 양식으로 개선점 3개를 작성한다.</li>
          <li>여유가 되면 실제 폰으로도 접속해 개발자 도구와 <strong>느낌이 다른 지점</strong>(터치 정확도, 키보드가 화면을 가리는 문제 등)을 메모한다.</li>
        </ol>
        <Code>{CODE_REPORT}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 섹션 5의 <strong>가로 스크롤 범인 색출 1줄</strong>을
          개발자 도구 Console에 붙여넣어 보세요. 빈 배열 <span className="icode">[]</span>이
          나오면 그 페이지는 합격, 요소가 나오면 — 축하합니다, 개선점 1번을 코드로 찾아낸 거예요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📱 여기까지 왔다면</h3>
          <p className="muted">
            이제 여러분은 화면을 볼 때 엄지 영역·터치 타깃·브레이크포인트가 보이는
            눈을 갖게 됐어요. 점검 리포트에서 찾은 개선점은 <strong>FE-06</strong> 같은
            실제 티켓으로 이어질 수 있습니다 — 발견한 사람이 고치는 사람이 되는 게
            가장 빠른 성장이에요. 이어서{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 코스에서 오늘 본
            CSS(미디어 쿼리·overflow)를 직접 다뤄 보거나,{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            모바일 기기가 서버와 어떻게 대화하는지 배워 보세요.
          </p>
        </div>
      </div>
    </div>
  );
}
