// 이 파일이 하는 일: "윈도우 터미널과 PowerShell" 코스 — 검은 창이 왜 세 종류나 있는지부터
// Windows Terminal 설치·탭 분할, PowerShell 기본기, 관리자 권한, 꾸미기, Git Bash 탭 실습까지
// 7개 섹션으로 안내하는 정적 학습 페이지. (부록 · 도구 코스)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 명령어 예시·표는 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_THREE_SHELLS = `검은 창 삼형제 — 뭐가 뭔지 한 장 정리

이름        정체                            언제 쓰나
──────────────────────────────────────────────────────────
cmd        윈도우의 원조 명령창 (1980년대    아주 오래된 배치(.bat) 파일
           MS-DOS의 후손). 기능이 적음       실행할 때 정도. 요즘은 거의 안 씀

PowerShell 마이크로소프트가 새로 만든        윈도우에서의 기본 선택지.
           현대식 셸. 파란 배경이 상징       파일 관리, 프로그램 실행, 개발

Git Bash   Git을 설치하면 딸려 오는          리눅스 명령을 그대로 쓰고 싶을 때.
           '리눅스 흉내' 셸                  강의·블로그의 리눅스 명령 따라 하기

→ 결론: 평소엔 PowerShell, 리눅스 명령이 필요하면 Git Bash.
  cmd는 "아, 옛날 거구나" 하고 알아만 두면 됩니다.`;

const CODE_WT_KEYS = `Windows Terminal 필수 단축키

동작                단축키
─────────────────────────────────────
새 탭 열기          Ctrl + Shift + T
탭 이동             Ctrl + Tab
탭 닫기             Ctrl + Shift + W
세로로 화면 분할    Alt + Shift + +
가로로 화면 분할    Alt + Shift + -
분할된 창 사이 이동 Alt + 방향키
글자 크게/작게      Ctrl + 마우스 휠

→ 분할 기능이 진짜 보물이에요. 왼쪽엔 서버 로그,
  오른쪽엔 명령 입력 — 창 전환 없이 한 화면에서!`;

const CODE_PS_BASIC = `# PowerShell 기본 명령 — 폴더 산책하기

pwd                  # 지금 내가 있는 폴더 위치 (print working directory)
ls                   # 이 폴더 안에 뭐가 있는지 목록 (list)
cd frontend          # frontend 폴더로 들어가기 (change directory)
cd ..                # 한 단계 위 폴더로 나오기
cat README.md        # 파일 내용을 터미널에 출력
mkdir test           # test 폴더 만들기
clear                # 화면 깨끗하게 지우기

# Tab 키를 꼭 활용하세요!
cd fro (Tab) → cd frontend   # 앞 글자만 치고 Tab = 자동완성`;

const CODE_PS_VS_LINUX = `"어? 리눅스 명령이 되네?" — 반은 맞고 반은 함정

명령          리눅스에서        PowerShell에서
──────────────────────────────────────────────────────
ls            진짜 ls 프로그램   Get-ChildItem의 별명(alias)
cd            내장 명령          Set-Location의 별명
cat           진짜 cat           Get-Content의 별명
rm 파일       바로 삭제          Remove-Item의 별명 (동작 비슷)
rm -rf 폴더   폴더 통째 삭제     ❌ 에러! -rf 옵션이 없음
              → PowerShell식:   rm -r -fo 폴더  (Recurse + Force)
touch 파일    빈 파일 생성       ❌ 없음 → New-Item 파일명
which 명령    명령 위치 찾기     ❌ 없음 → Get-Command 명령

핵심: PowerShell의 ls·cd·cat은 리눅스 명령을 '흉내 낸 별명'이에요.
간단한 건 통하지만, 옵션(-rf 같은 것)부터는 서로 다른 언어입니다.
블로그의 리눅스 명령이 안 먹으면 → Git Bash 탭에서 실행하세요.`;

const CODE_DAILY = `# 개발자가 매일 쓰는 명령 3종 세트

# 1) 내 네트워크 정보 — IP 주소, 게이트웨이 확인
ipconfig

# 2) 지금 실행 중인 프로그램(프로세스) 전부 보기
tasklist

# 특정 프로그램만 골라 보기 (예: node)
tasklist | findstr node

# 3) 응답 없는 프로그램 강제 종료
taskkill /f /im node.exe        # 이름으로 (node.exe 전부 종료)
taskkill /f /pid 12345          # PID(프로세스 번호)로 콕 집어서`;

const CODE_PORT_KILL = `# 실전 단골 상황: "포트가 이미 사용 중입니다" 에러

# 개발 서버를 껐는데 유령처럼 남아서 포트를 잡고 있을 때:

# 1단계 — 누가 5173 포트를 쓰는지 범인 찾기
netstat -ano | findstr :5173
#   TCP  0.0.0.0:5173  ...  LISTENING  23456   ← 맨 끝 숫자가 PID!

# 2단계 — 그 PID가 어떤 프로그램인지 확인
tasklist | findstr 23456

# 3단계 — 종료
taskkill /f /pid 23456

# 이 3단계면 "포트 충돌" 에러의 90%는 해결됩니다.`;

const CODE_ADMIN = `관리자 권한이 필요한 순간 vs 아닌 순간

일반 권한으로 충분              관리자 권한 필요
────────────────────────────────────────────────
ls, cd, cat 파일 산책           프로그램 설치/제거 (winget 일부)
npm run dev 개발 서버 실행       hosts 파일 수정
git 명령 전부                   방화벽 규칙 변경
내 폴더 안 파일 만들기/지우기    C:\\Program Files 안에 쓰기
                               서비스(Docker 등) 시작/중지

관리자로 여는 법:
시작 메뉴 → "터미널" 검색 → 우클릭 → "관리자 권한으로 실행"
(창 제목에 '관리자:'가 붙어 있으면 관리자 모드라는 표시)`;

const CODE_CUSTOM = `# 터미널 꾸미기 한 입 — 설정 파일 없이 되는 것부터

# Windows Terminal에서 Ctrl + , (쉼표) → 설정 화면
#  · 색 구성표: One Half Dark, Campbell 등 고르기만 하면 끝
#  · 배경 불투명도(아크릴): 살짝 비치는 배경, 은근 감성
#  · 글꼴: 'Cascadia Code' (기본 내장, 코딩용 폰트)

# 한 걸음 더 (선택): 프롬프트를 예쁘게 — oh-my-posh
winget install JanDeDobbeleer.OhMyPosh
# 설치 후 안내대로 프로필에 한 줄 추가하면
# 현재 폴더·git 브랜치가 프롬프트에 컬러로 표시돼요.

# 주의: 꾸미기는 후식이에요. 명령이 먼저, 테마는 나중에!`;

const CODE_PRACTICE = `실습 순서 — Windows Terminal에 Git Bash 탭 추가하기

① Git이 설치돼 있는지 확인 (PowerShell에서)
   git --version        # 버전이 나오면 OK, 없으면 git-scm.com에서 설치

② Windows Terminal 열기 → 탭 줄의 ∨ (아래 화살표) 클릭
   → 목록에 "Git Bash"가 보이면 클릭! (Git 설치 시 자동 등록됨)

③ 안 보인다면: ∨ → 설정 → 새 프로필 추가 → 새 빈 프로필
   이름: Git Bash
   명령줄: C:\\Program Files\\Git\\bin\\bash.exe
   저장 후 다시 ∨ 를 열면 Git Bash가 나타나요.

④ Git Bash 탭에서 우리 프로젝트로 이동
   cd /c/awesomedev/mirim-app      # ← 경로 스타일이 다른 것에 주목!
   ls
   git log --oneline -5            # 최근 커밋 5개 구경

⑤ 관찰 포인트: PowerShell은 C:\\awesomedev\\mirim-app,
   Git Bash는 /c/awesomedev/mirim-app — 같은 폴더, 다른 표기법.
   삼형제가 왜 '다른 언어를 쓰는 형제'인지 몸으로 느끼는 순간!`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: 'Windows Terminal' },
  { n: 3, label: 'PowerShell 기본기' },
  { n: 4, label: '매일 쓰는 명령' },
  { n: 5, label: '관리자 권한' },
  { n: 6, label: '꾸미기 한 입' },
  { n: 7, label: '실습: Git Bash 탭' },
];

export default function ToolTerminalPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 부록 · 도구</div>
        <h1>윈도우 터미널과 PowerShell</h1>
        <p>
          개발자의 하루는 검은 창에서 시작해서 검은 창에서 끝나요. 마우스 없이
          키보드만으로 컴퓨터에게 말을 거는 법 — cmd·PowerShell·Git Bash가 뭐가 다른지부터
          Windows Terminal로 세 개를 한 창에 모으는 실습까지 함께 갑니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 40분</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="검은 창 삼형제 — cmd, PowerShell, Git Bash" sub="셋 다 '터미널'이라 부르지만 쓰는 언어가 달라요">
        <p>
          윈도우에서 "터미널 열어 보세요" 하면 사람마다 다른 창이 열려요. 이 셋은
          <strong> 같은 컴퓨터에게 말을 거는 세 가지 통역사</strong>라고 생각하면 됩니다.
          컴퓨터라는 외국인은 같지만, 어떤 통역사를 쓰느냐에 따라 통하는 말이 달라요.
        </p>
        <svg className="diagram" viewBox="0 0 640 330" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="cmd, PowerShell, Git Bash 세 셸의 정체와 쓰임새를 비교한 도해">
          <text x="320" y="24" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--ink)">검은 창 삼형제 — 같은 컴퓨터, 다른 통역사</text>

          <rect x="24" y="46" width="184" height="176" rx="8" fill="var(--card)" stroke="var(--muted)" strokeWidth="1.5" strokeDasharray="5 4" />
          <text x="116" y="72" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--muted)">cmd</text>
          <line x1="44" y1="84" x2="188" y2="84" stroke="var(--line)" strokeWidth="1" />
          <text x="116" y="104" textAnchor="middle" fontSize="12" fill="var(--muted)">윈도우 원조 명령창</text>
          <text x="116" y="122" textAnchor="middle" fontSize="12" fill="var(--muted)">MS-DOS의 후손</text>
          <text x="116" y="148" textAnchor="middle" fontSize="12.5" fill="var(--ink)">기능이 적음</text>
          <text x="116" y="172" textAnchor="middle" fontSize="12" fill="var(--muted)">옛날 .bat 실행 정도</text>
          <text x="116" y="200" textAnchor="middle" fontSize="12.5" fontWeight="bold" fill="var(--muted)">요즘은 거의 안 씀</text>

          <rect x="228" y="46" width="184" height="176" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2.5" />
          <text x="320" y="72" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--primary)">PowerShell</text>
          <line x1="248" y1="84" x2="392" y2="84" stroke="var(--line)" strokeWidth="1" />
          <text x="320" y="104" textAnchor="middle" fontSize="12" fill="var(--muted)">MS가 만든 현대식 셸</text>
          <text x="320" y="122" textAnchor="middle" fontSize="12" fill="var(--muted)">파란 배경이 상징</text>
          <text x="320" y="148" textAnchor="middle" fontSize="12.5" fill="var(--ink)">ls·cd는 별명(alias)</text>
          <text x="320" y="172" textAnchor="middle" fontSize="12" fill="var(--muted)">파일·실행·개발 전반</text>
          <text x="320" y="200" textAnchor="middle" fontSize="12.5" fontWeight="bold" fill="var(--primary)">윈도우 기본 선택지</text>

          <rect x="432" y="46" width="184" height="176" rx="8" fill="var(--card)" stroke="var(--teal)" strokeWidth="2" />
          <text x="524" y="72" textAnchor="middle" fontSize="14" fontWeight="bold" fill="var(--teal)">Git Bash</text>
          <line x1="452" y1="84" x2="596" y2="84" stroke="var(--line)" strokeWidth="1" />
          <text x="524" y="104" textAnchor="middle" fontSize="12" fill="var(--muted)">Git 설치 시 딸려 옴</text>
          <text x="524" y="122" textAnchor="middle" fontSize="12" fill="var(--muted)">리눅스 흉내 셸</text>
          <text x="524" y="148" textAnchor="middle" fontSize="12.5" fill="var(--ink)">경로도 /c/... 리눅스식</text>
          <text x="524" y="172" textAnchor="middle" fontSize="12" fill="var(--muted)">rm -rf 같은 옵션 OK</text>
          <text x="524" y="200" textAnchor="middle" fontSize="12.5" fontWeight="bold" fill="var(--teal)">리눅스 명령 그대로</text>

          <text x="320" y="252" textAnchor="middle" fontSize="12.5" fill="var(--muted)">셋 다 하나의 Windows Terminal 창에 탭으로 함께 열 수 있어요</text>

          <rect x="120" y="270" width="400" height="44" rx="8" fill="var(--card)" stroke="var(--amber)" strokeWidth="1.5" />
          <text x="320" y="288" textAnchor="middle" fontSize="12.5" fill="var(--ink)">평소엔 PowerShell, 리눅스 명령이 필요하면 Git Bash</text>
          <text x="320" y="306" textAnchor="middle" fontSize="12" fill="var(--muted)">cmd는 "아, 옛날 거구나" 하고 알아만 두면 됩니다</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 삼형제 포지셔닝 — cmd는 유물, PowerShell은 기본, Git Bash는 리눅스 통로</p>
        <Code>{CODE_THREE_SHELLS}</Code>
        <p>
          여기서 용어 하나만 정리해요. <strong>터미널</strong>은 글자가 표시되는
          <strong> 창(화면)</strong>이고, <strong>셸(shell)</strong>은 그 안에서 내 명령을
          해석해 주는 <strong>통역 프로그램</strong>이에요. 카페(터미널) 안에 바리스타(셸)가
          있는 구조 — 그래서 하나의 Windows Terminal 창 안에 PowerShell 탭과 Git Bash 탭을
          동시에 열 수 있는 거예요. 이건 섹션 7에서 직접 해봅니다.
        </p>
        <div className="tip">
          <b>어썸데브에서는?</b> 우리 스택의 Docker·AWS EC2 서버는 리눅스라서, 서버에
          접속하면 리눅스 명령을 쓰게 돼요. 그래서 Git Bash로 리눅스 명령에 미리 익숙해져
          두면 나중에 서버 다룰 때 훨씬 편합니다.
        </div>
      </Section>

      <Section n={2} title="Windows Terminal 설치와 탭·분할" sub="삼형제를 한 창에 모으는 최신 터미널">
        <p>
          예전엔 cmd 창 따로, PowerShell 창 따로 열어서 작업표시줄이 검은 창으로 가득했어요.
          <strong> Windows Terminal</strong>은 이 창들을 <strong>브라우저 탭처럼</strong> 한 창에
          모아 주는 마이크로소프트의 공식 터미널 앱이에요. 크롬에서 탭 여러 개 쓰듯이,
          탭마다 다른 셸을 띄울 수 있죠.
        </p>
        <ol className="olist">
            <li>윈도우 11이라면 이미 기본 설치돼 있어요 — 시작 메뉴에서 <strong>"터미널"</strong> 검색.</li>
            <li>없다면 <strong>Microsoft Store</strong>에서 "Windows Terminal" 검색 → 설치. 끝!</li>
            <li>열면 기본으로 PowerShell 탭이 하나 떠요. 탭 줄의 <strong>∨</strong> 버튼을 누르면 다른 셸 목록이 나옵니다.</li>
          </ol>
        <Code>{CODE_WT_KEYS}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> Windows Terminal을 열고 <span className="kbd">Alt</span> +
          <span className="kbd">Shift</span> + <span className="kbd">+</span> 로 화면을 세로로
          쪼개 보세요. 왼쪽 창에서 <span className="icode">ls</span>, 오른쪽 창에서도{' '}
          <span className="icode">ls</span> — 두 개의 독립된 셸이 한 화면에 사는 걸 확인!
          프론트 개발 서버(<span className="icode">npm run dev</span>)를 한쪽에 켜 두고
          다른 쪽에서 git 명령을 치는 게 실무의 기본 자세예요.
        </div>
      </Section>

      <Section n={3} title="PowerShell 기본기" sub="ls·cd는 되는데 rm -rf는 안 된다?">
        <p>
          터미널에서 가장 먼저 배울 건 <strong>폴더 산책</strong>이에요. 탐색기에서
          더블클릭으로 폴더를 드나들던 걸, 이제 글자로 합니다. "내가 지금 어디 있지?"
          (<span className="icode">pwd</span>) → "여기 뭐가 있지?"(<span className="icode">ls</span>)
          → "저 방으로 들어가자"(<span className="icode">cd</span>) — 이 세 개면 어디든 갈 수 있어요.
        </p>
        <Code>{CODE_PS_BASIC}</Code>
        <p>
          그런데 여기 <strong>중요한 함정</strong>이 있어요. PowerShell에서{' '}
          <span className="icode">ls</span>가 되니까 "리눅스랑 같네?" 하고 안심하면,
          어느 날 블로그에서 복사한 <span className="icode">rm -rf</span>가 에러를 뿜습니다.
          PowerShell의 리눅스풍 명령은 <strong>진짜가 아니라 별명(alias)</strong>이거든요 —
          외국어 몇 마디 흉내 내는 것과 그 언어를 하는 건 다르죠.
        </p>
        <Code>{CODE_PS_VS_LINUX}</Code>
        <div className="warn">
          <b>삭제 명령은 항상 손을 멈추고 한 번 더</b> — <span className="icode">rm -r -fo</span>는
          휴지통을 거치지 않고 <strong>즉시, 영구히</strong> 지웁니다. 되돌리기(Ctrl+Z)가 없어요.
          엔터 치기 전에 <span className="icode">pwd</span>로 내 위치, 지우려는 이름의 오타를
          꼭 확인하는 습관을 들이세요.
        </div>
      </Section>

      <Section n={4} title="매일 쓰는 명령 — ipconfig, tasklist, 프로세스 죽이기" sub="개발하다 막히면 열에 아홉은 이 셋으로 해결">
        <p>
          이번엔 폴더 산책을 넘어, 컴퓨터의 <strong>상태를 들여다보는</strong> 명령들이에요.
          작업 관리자(<span className="kbd">Ctrl</span>+<span className="kbd">Shift</span>+<span className="kbd">Esc</span>)로
          하던 일을 글자로 하는 셈이죠. 특히 <strong>프로세스 강제 종료</strong>는 개발 서버가
          유령처럼 남아 포트를 점거할 때 매일같이 쓰게 됩니다.
        </p>
        <Code>{CODE_DAILY}</Code>
        <p>
          <span className="icode">|</span> (파이프) 기호는 <strong>앞 명령의 출력을 뒤 명령에게
          넘겨주는 배관</strong>이에요. <span className="icode">tasklist | findstr node</span>는
          "전체 목록을 뽑아서(tasklist), 그중 node가 들어간 줄만 걸러 줘(findstr)"라는 뜻 —
          수백 줄에서 눈으로 찾는 대신 컴퓨터에게 시키는 거죠.
        </p>
        <Code>{CODE_PORT_KILL}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 터미널을 열고 <span className="icode">tasklist | findstr chrome</span>을
          실행해 보세요. 크롬이 프로세스 여러 개로 나뉘어 도는 게 보일 거예요(탭마다 별도 프로세스!).
          그리고 <span className="icode">netstat -ano | findstr LISTENING</span>으로 내 PC에서
          지금 열려 있는 포트들도 구경해 보세요. 네트워크 코스에서 배운 '포트 = 방 번호'가
          실제로 목록으로 보입니다.
        </div>
      </Section>

      <Section n={5} title="관리자 권한으로 실행이 필요한 순간" sub="집 열쇠와 마스터키는 다르다">
        <p>
          윈도우는 평소에 여러분을 <strong>'내 방 열쇠'만 가진 사용자</strong>로 대해요.
          내 폴더 안에서는 뭐든 할 수 있지만, 건물 전체 설비(시스템 폴더, 방화벽, 서비스)를
          만지려면 <strong>마스터키 = 관리자 권한</strong>이 필요합니다. 실수로 시스템을
          망가뜨리지 못하게 하는 안전장치예요.
        </p>
        <Code>{CODE_ADMIN}</Code>
        <p>
          에러 메시지에 <strong>"액세스가 거부되었습니다"</strong>나{' '}
          <strong>"권한이 없습니다(permission denied)"</strong>가 보이면 관리자 권한을 의심해
          보세요. 반대로, 평소 작업까지 습관적으로 관리자 창에서 하는 건 금물 — 마스터키를
          꽂아 둔 채 돌아다니는 것과 같아서, 오타 한 번의 사고가 시스템 전체로 번질 수 있어요.
        </p>
        <div className="warn">
          <b>회사 규칙</b> 어썸데브 지급 PC에서 시스템 설정을 바꾸는 관리자 작업(방화벽, hosts
          수정 등)은 하기 전에 멘토에게 먼저 물어보세요. "왜 필요한지"를 설명할 수 있어야
          하는 작업들입니다.
        </div>
      </Section>

      <Section n={6} title="터미널 꾸미기 한 입" sub="매일 보는 창이니까, 보기 좋게">
        <p>
          터미널은 하루 종일 들여다보는 작업 공간이에요. 책상 정리하듯 색과 글꼴을 정돈해
          두면 눈도 덜 피곤하고, 무엇보다 <strong>프롬프트에 정보를 띄워 두면 실수가 줄어요</strong> —
          지금 어느 폴더, 어느 git 브랜치에 있는지 매번 명령으로 확인하지 않아도 되니까요.
        </p>
        <Code>{CODE_CUSTOM}</Code>
        <div className="tip">
          <b>추천 조합</b> 색 구성표 <strong>One Half Dark</strong> + 글꼴{' '}
          <strong>Cascadia Code</strong> + 불투명도 90%. 설정 화면에서 클릭 몇 번이면 끝나고,
          어느 PC에서나 같은 조합을 쓸 수 있어요. oh-my-posh는 여유 있을 때 도전 —
          없어도 개발에는 전혀 지장 없습니다.
        </div>
      </Section>

      <Section n={7} title="실습: Git Bash 탭 추가하고 우리 프로젝트로 이동" sub="삼형제를 한 창에 — 이 코스의 최종 미션">
        <p>
          이제 배운 걸 전부 모아 봅니다. Windows Terminal 안에 <strong>Git Bash 탭</strong>을
          추가하고, 리눅스식 명령으로 우리 프로젝트 폴더까지 걸어 들어가는 실습이에요.
          섹션 1의 "터미널은 카페, 셸은 바리스타" 비유가 실제로 어떤 모습인지 확인하는 시간!
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <p>
          ④번에서 경로가 <span className="icode">/c/awesomedev/...</span>로 바뀐 게 보이나요?
          Git Bash는 리눅스 흉내를 내느라 <strong>드라이브 문자(C:)를 /c 폴더처럼</strong> 표현해요.
          역슬래시(<span className="icode">\</span>) 대신 슬래시(<span className="icode">/</span>)를
          쓰는 것도 리눅스식이죠. 나중에 EC2 서버에 접속하면 진짜 리눅스가 이 모습 그대로
          여러분을 맞이합니다.
        </p>
        <div className="tip">
          <b>한 걸음 더</b> Git Bash 탭에서 <span className="icode">git remote -v</span>를 실행해
          보세요. 우리 프로젝트가 회사 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)와
          연결돼 있는 게 보일 거예요. 화면을 분할해서 한쪽은 PowerShell, 한쪽은 Git Bash로
          같은 폴더에서 <span className="icode">ls</span>를 쳐 보는 것도 재밌습니다 —
          출력 모양이 미묘하게 달라요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>⌨️ 여기까지 왔다면</h3>
          <p className="muted">
            이제 검은 창이 무섭지 않죠? cmd·PowerShell·Git Bash를 구분할 수 있고,
            Windows Terminal 한 창에서 탭과 분할로 오가며, 포트를 점거한 유령 프로세스도
            직접 잡을 수 있게 됐어요. 터미널은 <strong>모든 개발 도구의 현관문</strong> —
            다음은 이 문으로 들어가 쓰는 첫 번째 도구,{' '}
            <Link to="/learn/git-deep"><strong>Git과 버전 관리</strong></Link> 코스로 이어 가세요.
            방금 만든 Git Bash 탭이 바로 그 교실입니다.
          </p>
        </div>
      </div>
    </div>
  );
}
