// 이 파일이 하는 일: "윈도우 단축키 마스터" 코스 — 마우스에서 손을 떼는 순간
// 왜 작업 속도가 달라지는지, 창 관리부터 클립보드 히스토리까지 7개 섹션으로 안내하는 정적 학습 페이지.
// (왜 단축키인가 → 상황별 필수 30개 → 클립보드 히스토리 → 이모지 패널 → 자동 치환 도구 → 실습 미션 → 정리)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 단축키 표는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

// ── 단축키 표 · 텍스트 상수들 ──

const CODE_WINDOW = `창 관리 — 화면 위의 창들을 손끝으로 배치하기

단축키                  하는 일
──────────────────────────────────────────────────
Win + ←  /  Win + →     창을 화면 왼쪽/오른쪽 절반에 착 붙이기(스냅)
Win + ↑  /  Win + ↓     창 최대화 / 원래 크기 → 최소화
Win + Z                 스냅 레이아웃 열기 (3분할·4분할도 가능)
Alt + Tab               열린 창 사이를 순서대로 전환 (누른 채 Tab 반복)
Win + Tab               작업 보기 — 모든 창 + 가상 데스크톱 한눈에
Win + D                 모든 창 최소화 → 바탕화면 (다시 누르면 복귀)
Win + L                 화면 잠금 (자리 비울 땐 반드시! 회사 보안 기본기)
Win + Shift + S         화면 캡처 (영역 지정 스크린샷)

가상 데스크톱 — "책상을 여러 개 쓰는" 기능
──────────────────────────────────────────────────
Win + Ctrl + D          새 가상 데스크톱 만들기
Win + Ctrl + ← / →      데스크톱 사이 이동
Win + Ctrl + F4         현재 가상 데스크톱 닫기

추천 배치: 1번 책상 = 코딩(에디터+터미널),
          2번 책상 = 자료(브라우저·문서), 3번 책상 = 메신저`;

const CODE_TEXT = `텍스트 편집 — 코드를 다룰수록 몸값이 오르는 조합

단축키                  하는 일
──────────────────────────────────────────────────
Ctrl + ← / →            단어 단위로 커서 점프 (한 글자씩 ×, 한 단어씩 ○)
Ctrl + Shift + ← / →    단어 단위로 선택
Home / End              줄의 맨 앞 / 맨 끝으로
Shift + Home / End      커서부터 줄 앞/끝까지 통째로 선택
Ctrl + Home / End       문서의 맨 위 / 맨 아래로
Ctrl + A                전체 선택
Ctrl + Z / Ctrl + Y     실행 취소 / 다시 실행
Ctrl + Backspace        단어 하나를 통째로 지우기

조합 공식: Ctrl = "단어/문서 단위로 크게",
          Shift = "이동하면서 선택까지" — 둘을 섞으면 곱셈이 됩니다.
예) Ctrl+Shift+End = 커서부터 문서 끝까지 전부 선택!`;

const CODE_TABS = `탐색기 · 브라우저 — 매일 수백 번 하는 동작들

단축키                  하는 일
──────────────────────────────────────────────────
Win + E                 파일 탐색기 열기
Alt + ↑                 탐색기에서 상위 폴더로
F2                      파일 이름 바꾸기 (더블클릭-클릭 곡예 금지!)
Ctrl + T                브라우저 새 탭
Ctrl + W                현재 탭 닫기
Ctrl + Shift + T        방금 닫은 탭 되살리기 (실수 복구의 은인)
Ctrl + Tab              다음 탭으로 / Ctrl+Shift+Tab 이전 탭으로
Ctrl + 1 ~ 8            n번째 탭으로 바로 점프 (Ctrl+9 = 마지막 탭)
Ctrl + L                주소창으로 커서 이동 (F6도 동일)
Ctrl + F                페이지 안에서 글자 찾기
F5 / Ctrl + Shift + R   새로고침 / 캐시 무시하고 강력 새로고침`;

const CODE_CLIPBOARD = `Win + V — 클립보드 히스토리

보통의 복사-붙여넣기:  클립보드에 "마지막 1개"만 산다
Win + V의 세계:       최근 복사한 것들이 목록으로 줄 서 있다

처음 한 번만: Win + V → "켜기" 버튼 클릭 (활성화)

이후에는:
  Ctrl + C  (여러 번, 여러 곳에서 복사해 두고)
  Win + V   (목록에서 골라서 붙여넣기!)

보너스: 자주 쓰는 항목은 목록에서 📌 고정(pin) —
재부팅해도 살아남아요. Gitea 주소, 자주 쓰는 커밋 접두어,
회사 위키 링크 같은 걸 고정해 두면 됩니다.`;

const CODE_EMOJI = `Win + .  (윈도우 키 + 마침표) — 이모지 패널

커밋 메시지, 리뷰 코멘트, 메신저 어디서든:
  Win + .  →  검색창에 "체크" / "불" / "박수" 입력  →  Enter

이모지만 있는 게 아니에요. 패널 상단 탭을 보면:
  😀 이모지   |   Ω 기호(특수문자)   |   ; 콜론(카오모지)

→ 화살표, ±, ≠, · 같은 특수문자를
  "ㅁ + 한자키" 곡예 없이 검색해서 넣을 수 있습니다.`;

const CODE_AUTOHOTKEY = `자동 문자열 치환 — "자주 치는 긴 문장"을 약어로

아이디어: 특정 약어를 치면 긴 문자열로 자동 확장.
예)
  ;; 를 치면   →  wnrud2222@awesomedev.dev 같은 자주 쓰는 주소
  gtea 를 치면 →  edu.awesomedevapp.com:3000
  ㅈㅅ 를 치면  →  "확인했습니다. 감사합니다!"

도구 예시:
  - PowerToys (마이크로소프트 공식, Keyboard Manager 포함)
  - AutoHotkey (스크립트로 무엇이든 — 진입장벽은 좀 있음)
  - Espanso (오픈소스 텍스트 확장 전용, 설정이 파일이라 Git 관리 가능)

주의: 회사 PC에 도구를 설치할 땐 먼저 멘토에게 확인!
설치 없이도 Win+V 고정(pin)으로 절반은 흉내 낼 수 있어요.`;

const CODE_MISSION = `실습 미션 1 — "오늘 하루 마우스 없이 창 전환"

규칙: 오늘 퇴근(하교)까지, 창을 바꿀 때 마우스로
     작업 표시줄을 클릭하면 벌점 1점. 대신:

  창 전환        →  Alt + Tab
  창 배치        →  Win + ← / →
  바탕화면 보기   →  Win + D
  탐색기 열기     →  Win + E
  탭 이동        →  Ctrl + Tab / Ctrl + 숫자

목표: 벌점 5점 이하로 하루 버티기.
처음엔 답답해서 손이 근질근질할 거예요 — 정상입니다.
3일째부터 손이 먼저 움직이기 시작해요.`;

const CODE_BINGO = `실습 미션 2 — 단축키 빙고 (5×5)

오늘 실제 업무/학습 중에 "자연스럽게" 쓴 칸에 O 표시.
가로·세로·대각선 한 줄이면 빙고!

┌──────────┬──────────┬──────────┬──────────┬──────────┐
│ Win+←/→  │ Alt+Tab  │ Ctrl+W   │ Win+V    │ Ctrl+L   │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ Ctrl+    │ Win+E    │ F2       │ Ctrl+    │ Win+.    │
│ Shift+T  │          │          │ Shift+S* │          │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ Ctrl+←/→ │ Win+D    │ ★무료칸★ │ Ctrl+Tab │ Win+L    │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ Ctrl+    │ Home/End │ Win+Z    │ Ctrl+F   │ Ctrl+    │
│ Backspace│          │          │          │ 숫자     │
├──────────┼──────────┼──────────┼──────────┼──────────┤
│ Win+Tab  │ Win+Ctrl │ Ctrl+    │ Shift+   │ F5       │
│          │ +←/→     │ Shift+End│ Home/End │          │
└──────────┴──────────┴──────────┴──────────┴──────────┘
* Ctrl+Shift+S 아님 주의 — Win+Shift+S (화면 캡처)

빙고 3줄 완성 = 이 코스 실기 합격!
같이 배우는 동기가 있다면 누가 먼저 3줄 채우나 내기해 보세요.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'Win+V 클립보드' },
  { n: 6, label: 'Win+. 와 치환 도구' },
  { n: 7, label: '실습 미션' },
];

export default function ToolShortcutsPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 약속하는 것 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>윈도우 단축키 마스터</h1>
        <p>
          하루에 수백 번 하는 "창 바꾸기·복사·붙여넣기"에서 마우스로 왕복하는 2초씩을
          아끼면, 일주일이면 한 시간이 됩니다. 이 코스는 외울 단축키를 늘어놓는 대신,
          <strong> 오늘 당장 손에 붙는 30개</strong>를 상황별로 골라 실습 미션과 함께 익혀요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분 + 실습 하루</span>
          <span className="chip">필수 단축키 30개</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="키보드 → 마우스 → 키보드, 그 왕복이 문제">
        <p>
          타자를 치다가 창을 바꾸려고 마우스로 손을 옮기는 순간을 떠올려 보세요.
          손이 이동하고, 마우스 커서를 찾고, 작업 표시줄의 작은 아이콘을 조준하고,
          클릭하고, 다시 키보드로 돌아옵니다. 한 번에 2~3초 — 별거 아닌 것 같지만
          이 왕복을 하루에 수백 번 해요. <strong>요리사가 칼질 한 번 할 때마다
          칼을 서랍에 넣었다 꺼낸다면</strong> 어떨까요? 단축키는 칼을 손에서
          놓지 않는 기술입니다.
        </p>
        <p>
          더 중요한 건 <strong>흐름(몰입)</strong>이에요. 코드를 짜다가 마우스로 손을 옮기면
          머릿속 생각도 잠깐 끊깁니다. 단축키가 손에 붙으면 "창 바꿔야지"라는 생각조차 없이
          손가락이 먼저 움직여요 — 자전거 탈 때 "페달을 밟아야지" 하고 생각하지 않는 것처럼요.
        </p>
        <ol className="olist">
            <li>이번 주: 섹션 2~4의 표에서 <strong>내가 자주 하는 동작 5개</strong>만 고른다.</li>
            <li>그 5개를 쓸 때마다 마우스 대신 단축키로 — 어색해도 참는다.</li>
            <li>손에 붙으면(대략 3일) 다음 5개를 추가한다.</li>
          </ol>
        <div className="tip">
          <b>한꺼번에 30개 외우려 하지 마세요</b> — 단축키는 암기 과목이 아니라
          <strong> 운동</strong>이에요. 하루 5개씩, 실제 상황에서 손으로 반복하는 게
          표를 열 번 읽는 것보다 백 배 낫습니다.
        </div>
      </Section>

      <Section n={2} title="창 관리 — Win 키의 재발견" sub="창 스냅, Alt+Tab, 그리고 가상 데스크톱">
        <p>
          개발할 땐 화면에 창이 최소 셋은 떠 있죠 — 에디터, 브라우저, 터미널.
          이 창들을 마우스로 끌어서 배치하는 대신, <span className="kbd">Win</span> 키와
          화살표로 <strong>착착 스냅</strong>시키는 것부터 시작합니다.
        </p>
        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Win 키와 화살표로 창이 좌우 절반 또는 4분할로 배치되는 스냅 도해">
          <text x="150" y="26" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">좌/우 절반 — Win + ← / →</text>

          <rect x="30" y="42" width="240" height="150" rx="8" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="38" y="50" width="112" height="134" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="158" y="50" width="104" height="134" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="94" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">에디터</text>
          <text x="94" y="132" textAnchor="middle" fontSize="12" fill="var(--muted)">Win + ←</text>
          <text x="210" y="112" textAnchor="middle" fontSize="13" fill="var(--ink)">브라우저</text>
          <text x="210" y="132" textAnchor="middle" fontSize="12" fill="var(--muted)">Win + →</text>
          <line x1="154" y1="50" x2="154" y2="184" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <text x="150" y="212" textAnchor="middle" fontSize="12" fill="var(--muted)">창 하나를 화면 절반에 착 붙이기</text>

          <text x="480" y="26" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">4분할 — 절반 뒤 Win + ↑ / ↓</text>

          <rect x="360" y="42" width="240" height="150" rx="8" fill="none" stroke="var(--line)" strokeWidth="2" />
          <rect x="368" y="50" width="112" height="63" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <rect x="488" y="50" width="104" height="63" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <rect x="368" y="121" width="112" height="63" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <rect x="488" y="121" width="104" height="63" rx="8" fill="var(--card)" stroke="var(--rose)" strokeWidth="2" />
          <text x="424" y="86" textAnchor="middle" fontSize="12" fill="var(--ink)">에디터</text>
          <text x="540" y="86" textAnchor="middle" fontSize="12" fill="var(--ink)">브라우저</text>
          <text x="424" y="157" textAnchor="middle" fontSize="12" fill="var(--ink)">터미널</text>
          <text x="540" y="157" textAnchor="middle" fontSize="12" fill="var(--ink)">문서</text>
          <text x="480" y="212" textAnchor="middle" fontSize="12" fill="var(--muted)">Win + Z 스냅 레이아웃으로도 같은 배치</text>

          <line x1="290" y1="117" x2="340" y2="117" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <polyline points="330,110 340,117 330,124" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />

          <text x="320" y="262" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--ink)">누르는 순서</text>
          <circle cx="120" cy="300" r="14" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="120" y="305" textAnchor="middle" fontSize="12" fill="var(--ink)">1</text>
          <text x="120" y="332" textAnchor="middle" fontSize="12.5" fill="var(--muted)">Win + ← (왼쪽 절반)</text>
          <circle cx="320" cy="300" r="14" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="320" y="305" textAnchor="middle" fontSize="12" fill="var(--ink)">2</text>
          <text x="320" y="332" textAnchor="middle" fontSize="12.5" fill="var(--muted)">이어서 Win + ↑ (왼쪽 위 1/4)</text>
          <circle cx="520" cy="300" r="14" fill="var(--card)" stroke="var(--amber)" strokeWidth="2" />
          <text x="520" y="305" textAnchor="middle" fontSize="12" fill="var(--ink)">3</text>
          <text x="520" y="332" textAnchor="middle" fontSize="12.5" fill="var(--muted)">남은 칸에 다음 창 고르기</text>
          <line x1="140" y1="300" x2="300" y2="300" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
          <line x1="340" y1="300" x2="500" y2="300" stroke="var(--line)" strokeWidth="1" strokeDasharray="4 4" />
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: Win+화살표로 좌/우 절반 → 4분할까지, 마우스 없이 창 배치하기</p>
        <Code>{CODE_WINDOW}</Code>
        <p>
          <strong>가상 데스크톱</strong>은 "책상을 여러 개 쓰는" 기능이에요. 공부 책상 위에
          게임기가 보이면 집중이 흩어지듯, 코딩 책상(1번)과 메신저 책상(3번)을 분리해 두면
          알림에 홀려 딴 길로 새는 걸 물리적으로 막을 수 있어요.
          <span className="kbd">Win</span>+<span className="kbd">Ctrl</span>+<span className="kbd">→</span> 한 번이면
          책상이 통째로 바뀝니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 바로 이 페이지에서 —
          <span className="kbd">Win</span>+<span className="kbd">→</span>로 브라우저를 오른쪽 절반에 붙이고,
          <span className="kbd">Win</span>+<span className="kbd">E</span>로 탐색기를 열어
          <span className="kbd">Win</span>+<span className="kbd">←</span>로 왼쪽에 붙여 보세요.
          마우스 없이 2분할 화면 완성! 이어서 <span className="kbd">Win</span>+<span className="kbd">Ctrl</span>+<span className="kbd">D</span>로
          새 데스크톱을 만들고 <span className="kbd">Win</span>+<span className="kbd">Ctrl</span>+<span className="kbd">←</span>로 돌아와 보세요.
        </div>
        <div className="warn">
          <b>자리를 비울 땐 <span className="kbd">Win</span>+<span className="kbd">L</span></b> —
          속도 이전에 <strong>보안 기본기</strong>예요. 회사에서 화면을 잠그지 않고 자리를 뜨는 건
          현관문을 열어 두고 외출하는 것과 같습니다. 어썸데브에서도 필수 습관!
        </div>
      </Section>

      <Section n={3} title="텍스트 편집 — Ctrl과 Shift의 곱셈" sub="한 글자씩 ×, 한 단어씩 ○">
        <p>
          커서를 옮기려고 화살표 키를 다다다다 연타하고 있다면, 이 섹션이 인생을 바꿔요.
          핵심 공식은 딱 두 개 — <span className="kbd">Ctrl</span>은 "<strong>단어/문서 단위로
          크게 움직여라</strong>", <span className="kbd">Shift</span>는 "<strong>움직인 만큼
          선택해라</strong>". 이 둘은 곱셈처럼 조합됩니다.
        </p>
        <Code>{CODE_TEXT}</Code>
        <p>
          이 조합들은 메모장·브라우저 주소창·에디터·코드 리뷰 코멘트 창 어디서든 똑같이 통해요.
          특히 코드를 다룰 때 <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">→</span>로
          변수 이름 하나를 정확히 선택하는 감각은, 한번 익히면 마우스 더블클릭으로 돌아갈 수 없습니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 메모장을 열고 아무 문장이나 세 줄 쳐 보세요. 그리고 마우스에서
          손을 뗀 채로 — ① <span className="kbd">Ctrl</span>+<span className="kbd">Home</span>으로 맨 위로,
          ② <span className="kbd">Ctrl</span>+<span className="kbd">→</span>로 세 단어 점프,
          ③ <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">End</span>로
          거기서 끝까지 선택, ④ <span className="kbd">Ctrl</span>+<span className="kbd">Backspace</span>로
          단어 하나 삭제 후 <span className="kbd">Ctrl</span>+<span className="kbd">Z</span>로 복구.
          4단계가 3초 안에 되면 합격!
        </div>
      </Section>

      <Section n={4} title="탐색기와 브라우저 — 하루 수백 번의 동작" sub="탭과 파일을 손끝에서 다루기">
        <p>
          개발자의 하루는 탭과의 전쟁이에요. 문서 탭, Gitea 탭, 학습 플랫폼 탭, 검색 탭...
          이 탭들 사이를 마우스로 오가는 대신, 아래 표의 조합으로 다녀 보세요.
        </p>
        <Code>{CODE_TABS}</Code>
        <p>
          특히 <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">T</span>는
          "닫은 탭 되살리기" — 실수로 중요한 문서 탭을 닫았을 때의 구조대예요. 여러 번 누르면
          닫은 순서 역순으로 계속 되살아납니다. 그리고 <span className="kbd">F2</span>(이름 바꾸기)는
          탐색기에서 "천천히 두 번 클릭" 곡예를 은퇴시켜 줍니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 브라우저에서 <span className="kbd">Ctrl</span>+<span className="kbd">T</span>로
          새 탭 → <span className="kbd">Ctrl</span>+<span className="kbd">L</span>로 주소창 이동 →
          우리 Gitea 주소 <span className="icode">edu.awesomedevapp.com:3000</span> 입력 → 접속되면
          <span className="kbd">Ctrl</span>+<span className="kbd">W</span>로 닫고 →
          <span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">T</span>로 부활!
          한 사이클을 마우스 없이 완주해 보세요.
        </div>
      </Section>

      <Section n={5} title="Win + V — 클립보드 히스토리 (인생 단축키)" sub="복사한 것들이 사라지지 않는 세계">
        <p>
          보통의 클립보드는 <strong>기억력이 딱 1개</strong>예요. A를 복사하고 B를 복사하면
          A는 증발하죠. 그래서 우리는 창 두 개를 오가며 복사-붙여넣기-복사-붙여넣기를
          반복해 왔습니다. <span className="kbd">Win</span>+<span className="kbd">V</span>는
          이 세계관을 바꿔요 — <strong>최근 복사한 것들이 목록으로 줄 서서 기다립니다.</strong>
        </p>
        <Code>{CODE_CLIPBOARD}</Code>
        <p>
          수습 개발자의 실전 활용: 코드 리뷰를 받으며 고칠 부분 여러 곳을 미리
          <strong> 연달아 복사</strong>해 두고, 문서에 붙일 때 <span className="kbd">Win</span>+<span className="kbd">V</span>에서
          하나씩 골라 넣기. 브랜치 이름, 커밋 해시, 에러 메시지를 동시에 들고 다닐 수 있어요.
          장바구니에 담아 두고 계산대에서 꺼내는 것과 같죠.
        </p>
        <div className="warn">
          <b>주의: 비밀번호는 복사하지 마세요</b> — 클립보드 히스토리는 편리한 만큼,
          복사한 <strong>비밀번호나 토큰도 목록에 남아요</strong>. 자리를 비운 사이 누가
          <span className="kbd">Win</span>+<span className="kbd">V</span>를 열면 다 보입니다.
          민감한 값을 복사했다면 목록에서 바로 삭제하고, 애초에 비밀번호는
          비밀번호 관리자의 자동 입력으로 다루는 게 안전해요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> ① <span className="kbd">Win</span>+<span className="kbd">V</span>를 눌러
          히스토리를 켜고 ② 이 페이지에서 서로 다른 문장 3개를 차례로
          <span className="kbd">Ctrl</span>+<span className="kbd">C</span> ③ 메모장을 열어
          <span className="kbd">Win</span>+<span className="kbd">V</span>로 <strong>복사한 역순</strong>으로
          붙여 보세요. 마지막으로 자주 쓰는 우리 Gitea 주소를 복사해 📌 고정까지!
        </div>
      </Section>

      <Section n={6} title="Win + . 이모지 패널, 그리고 자동 치환 도구 한 입" sub="특수문자 곡예 은퇴 + 자주 치는 문장 자동화">
        <p>
          <span className="kbd">Win</span>+<span className="kbd">.</span>(마침표)를 누르면
          이모지 패널이 떠요. 커밋 메시지나 리뷰 코멘트에 👍 하나 넣으려고 이모지를
          검색 사이트에서 복사해 오던 시절과 작별할 시간입니다.
        </p>
        <Code>{CODE_EMOJI}</Code>
        <p>
          한 걸음 더 — <strong>자동 문자열 치환</strong> 도구는 "자주 치는 긴 문장"을
          짧은 약어로 등록해 두면, 약어를 치는 순간 자동으로 확장해 줘요. 문자를 보낼 때
          "ㅇㅋ"라고 줄여 쓰는 걸 컴퓨터가 거꾸로 해 주는 셈이죠 — 내가 약어를 치면
          컴퓨터가 정식 문장으로 풀어 씁니다.
        </p>
        <Code>{CODE_AUTOHOTKEY}</Code>
        <div className="tip">
          <b>어디까지 자동화할까?</b> 이메일 주소, 자주 안내하는 링크, 매일 쓰는 인사말처럼
          <strong> 글자 그대로 반복되는 것</strong>이 좋은 후보예요. 반대로 매번 내용이 조금씩
          달라지는 문장은 자동화하면 오히려 어색한 복붙 티가 납니다.
        </div>
      </Section>

      <Section n={7} title="실습 — 미션 두 개로 손에 새기기" sub="읽어서 아는 것 ≠ 손이 아는 것">
        <p>
          여기까지 읽었다면 머리는 다 알아요. 하지만 단축키는 <strong>손이 기억해야</strong>
          진짜 내 것 — 그래서 미션 두 개를 준비했어요. 오늘부터 시작합니다.
        </p>
        <Code>{CODE_MISSION}</Code>
        <Code>{CODE_BINGO}</Code>
        <ol className="olist">
            <li>미션 1(마우스 없이 창 전환)을 <strong>오늘</strong> 시작한다 — 벌점을 메모장에 정직하게 기록.</li>
            <li>빙고판을 종이에 그리거나 인쇄해서 모니터 옆에 붙인다.</li>
            <li>3일 안에 빙고 3줄을 완성하면 멘토에게 자랑한다. (진짜로 자랑해도 됩니다)</li>
          </ol>
        <div className="tip">
          <b>공부 팁</b> 새 단축키가 손에 붙는 데는 보통 <strong>3일의 어색함</strong>이
          필요해요. "마우스가 더 빠른데?" 싶은 그 3일을 버티는 게 이 코스의 전부입니다.
          자전거 보조 바퀴를 떼던 날을 떠올려 보세요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>⌨️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 창 배치·텍스트 편집·탭 관리·클립보드까지, 마우스 없이 PC를 지휘하는
            기본기를 갖췄어요. 이 손놀림은 앞으로 배울 모든 도구에서 그대로 통합니다 —
            에디터, 터미널, 그리고 우리 Gitea까지. 다음은{' '}
            <Link to="/learn/network"><strong>네트워크의 이해</strong></Link> 코스에서
            그 도구들이 달리는 길을 배우거나, 오늘 배운 단축키로{' '}
            <Link to="/learn/coding"><strong>코딩 기초</strong></Link> 실습을 두 배 빠르게
            진행해 보세요. 빙고 3줄 완성 인증은 멘토와의 주간 미팅에서!
          </p>
        </div>
      </div>
    </div>
  );
}
