// 이 파일이 하는 일: "파일과 폴더의 원리" 코스 — 파일시스템이라는 사서에서 출발해
// 확장자·경로·숨김 파일·휴지통·압축까지, 매일 쓰는 파일의 뒤편을 7개 섹션으로 안내하는 정적 학습 페이지.
// (파일시스템 → 확장자의 진실 → 절대/상대 경로 → 숨김·시스템 파일 → 휴지통과 완전삭제 → 압축 한 입 → 확장자 표시 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_FILESYSTEM = `디스크의 민낯 = 그냥 거대한 0과 1의 바다

[디스크 실제 모습]  0110100101110... (수조 개의 비트가 쭉 이어져 있을 뿐)

여기에 파일시스템(사서)이 '장부'를 얹으면:

  장부(메타데이터)                     실제 데이터
  ─────────────────────────      ──────────────
  보고서.docx │ 크기 24KB │ 위치 #4021 ──→ [#4021~#4026 구역]
  사진.jpg    │ 크기 3MB  │ 위치 #7113 ──→ [#7113~#7800 구역]

대표 선수들:
  NTFS   Windows 기본 (권한·저널링 지원)
  exFAT  USB·SD카드 단골 (양쪽 OS에서 잘 읽힘)
  ext4   리눅스 기본 — 우리 EC2 서버가 쓰는 것!`;

const CODE_EXTENSION = `확장자는 '내용물'이 아니라 '이름표'일 뿐이에요.

photo.jpg 의 진짜 정체는 파일 맨 앞 몇 바이트(매직 넘버)에 있어요:

  파일 종류   맨 앞 바이트(16진수)      사람 눈으로 보면
  ─────────────────────────────────────────────
  JPG        FF D8 FF                 (알 수 없는 문자)
  PNG        89 50 4E 47              .PNG
  ZIP        50 4B 03 04              PK..
  PDF        25 50 44 46              %PDF

photo.jpg → photo.txt 로 이름을 바꾸면?
  - 내용물(바이트)은 1도 안 변함. 여전히 JPG 데이터.
  - 단지 Windows가 "텍스트구나!" 하고 메모장으로 열 뿐.
  - 메모장엔 외계어가 가득 → 다시 .jpg로 바꾸면 멀쩡히 열림!`;

const CODE_PATH = `경로 = 파일까지 찾아가는 '길 안내'

절대 경로 — 뿌리(루트)부터 전체 주소
  Windows:  C:\\awesomedev\\mirim-app\\frontend\\src\\App.jsx
  리눅스:   /home/ubuntu/mirim-app/frontend/src/App.jsx
            (드라이브 문자가 없고, / 가 뿌리!)

상대 경로 — "지금 내가 서 있는 곳" 기준
  현재 위치가 frontend/src/pages/ 라면:
    ./courses/FilesPage.jsx   ← 여기서 한 층 내려가기 (.= 현재 폴더)
    ../App.jsx                ← 한 층 올라가기 (..= 부모 폴더)
    ../../package.json        ← 두 층 올라가기

React 코드에서 매일 보는 그 줄이 바로 상대 경로예요:
  import App from '../App';   ← "내 부모 폴더의 App 파일"`;

const CODE_HIDDEN = `숨김 파일 — 감춰진 게 아니라 '표시 안 함' 체크된 것

Windows: 파일 속성에 '숨김' 딱지 하나 붙은 것뿐
리눅스:  이름이 점(.)으로 시작하면 자동으로 숨김!

개발자가 매일 만나는 점(.) 파일들 — 우리 저장소에도 있어요:
  .git/          Git이 커밋 역사를 통째로 보관하는 방
  .gitignore     "이건 커밋하지 마" 목록
  .env           비밀번호·API 키 (그래서 .gitignore에 꼭 넣음!)

시스템 파일: OS가 "나 없으면 부팅 못 해" 하는 파일들.
  C:\\Windows\\System32 안의 파일들이 대표 — 구경은 OK, 삭제는 절대 금지.`;

const CODE_RECYCLE = `휴지통의 비밀: '삭제'는 사실 '이사'예요.

Delete 키 → 파일이 사라진 게 아니라
             C:\\$Recycle.Bin 이라는 숨김 폴더로 이사 + 원래 위치 기록
복원      → 기록을 보고 원래 자리로 다시 이사

휴지통 비우기(또는 Shift+Delete) → 이때도 데이터는 안 지워져요!
  사서의 장부에서 "이 자리 비었음"이라고 지우개질만 함.
  책(데이터)은 서가에 그대로 → 새 파일이 덮어쓰기 전까지는
  복구 프로그램으로 살릴 수 있는 이유가 이것.

완전삭제가 필요하면? → 그 자리를 무의미한 값으로 여러 번 덮어쓰기.
  회사 PC 반납·중고 판매 전에 '디스크 완전 삭제'를 하는 이유예요.`;

const CODE_ZIP = `압축의 핵심 아이디어: '반복'을 짧게 줄여 쓰기

원본:  aaaaaaaaaabbbbb        (15글자)
압축:  a×10, b×5              (훨씬 짧다!)

실제 zip은 훨씬 똑똑한 사전(딕셔너리) 방식을 써요:
  "자주 나오는 패턴은 번호표로 바꿔치기"

그래서 파일마다 압축률이 달라요:
  회의록.txt (반복 많은 글)   → 팍팍 줄어듦 (70~90% 감소)
  사진.jpg, 영상.mp4          → 거의 안 줄어듦!
    (이미 자기 방식으로 압축돼 있어서 더 짜낼 반복이 없음)

zip 하나로 폴더째 묶는 건 덤 — 파일 100개를 상자 하나에
포장해서 옮기는 '묶음' 기능도 겸하고 있어요.`;

const CODE_SHOW_EXT = `탐색기에서 확장자 표시 켜기 (Windows 11 기준, 30초 컷)

1) 탐색기 열기 (Win + E)
2) 상단 메뉴에서 [보기] 클릭
3) [표시] → [파일 확장명] 체크!
   (같은 김에 [숨긴 항목]도 체크 — 섹션 4의 점 파일들이 보여요)

전:  보고서        사진        메모
후:  보고서.docx   사진.jpg    메모.txt

왜 개발자는 무조건 켜 둘까?
  "invoice.pdf" 로 보이던 파일이 사실 "invoice.pdf.exe"(실행 파일!)
  일 수 있어요 — 악성코드의 단골 위장술. 확장자를 켜면 바로 들통납니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '압축(zip) 한 입' },
  { n: 7, label: '확장자 표시 실습' },
];

export default function FilesPage() {
  return (
    <div>
      {/* 히어로: 매일 쓰는 파일·폴더의 뒤편을 들여다보는 코스 */}
      <div className="hero">
        <div className="eyebrow">Course · 컴퓨터 기초</div>
        <h1>파일과 폴더의 원리<br />— 더블클릭 뒤에 숨은 이야기</h1>
        <p>
          매일 만들고 지우는 파일, 그 뒤에서 디스크와 운영체제가 실제로 무슨 일을 하는지
          들여다봅니다. 확장자를 바꾸면 파일이 망가질까? 휴지통을 비우면 정말 사라질까? —
          이런 궁금증을 <strong>"직접 확인해 보기"</strong>로 내 PC에서 하나씩 실험해 보세요.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 45분</span>
          <span className="chip">실습 4개</span>
          <span className="chip">준비물: Windows 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="NTFS, exFAT, ext4... 이름은 달라도 하는 일은 하나">
        <p>
          디스크를 현미경으로 보면 파일도 폴더도 없어요. 그냥 <strong>0과 1이 수조 개</strong> 늘어서
          있을 뿐이죠. 이 바다에서 "보고서.docx는 여기부터 여기까지"라고 <strong>장부를 관리해 주는
          사서</strong>가 바로 <strong>파일시스템</strong>입니다. 도서관에 사서가 없으면 책이 아무리
          많아도 한 권도 못 찾는 것처럼, 파일시스템이 없는 디스크는 그냥 비트 덩어리예요.
        </p>
        <Code>{CODE_FILESYSTEM}</Code>
        <p>
          폴더도 사실은 <strong>"이 안에 뭐가 있는지 적어 둔 목록 파일"</strong>에 가까워요.
          파일을 다른 폴더로 옮겨도(같은 디스크 안에서라면) 데이터는 그대로 두고
          <strong> 장부의 소속만 고쳐 씁니다</strong> — 그래서 몇 GB짜리 파일도 같은 드라이브 안
          이동은 순식간에 끝나요.
        </p>
        <div className="tip">
          <b>여기서 잠깐</b> USB를 다른 컴퓨터에 꽂았을 때 "포맷하시겠습니까?"가 뜨는 건,
          그 컴퓨터가 USB의 <strong>장부(파일시스템)를 못 읽는다</strong>는 뜻이에요.
          포맷 = 장부를 백지로 새로 쓰기. 그래서 포맷하면 파일이 다 사라지는 겁니다.
        </div>
      </Section>

      <Section n={2} title="확장자의 진실" sub=".jpg를 .txt로 바꾸면 사진이 망가질까?">
        <p>
          결론부터: <strong>안 망가져요.</strong> 확장자는 파일 내용의 일부가 아니라
          <strong> 이름 끝에 붙은 이름표</strong>일 뿐입니다. 상자에 붙은 "유리컵" 스티커를
          "접시"로 바꿔 붙여도 안에 든 건 여전히 유리컵인 것과 같아요.
        </p>
        <Code>{CODE_EXTENSION}</Code>
        <p>
          그럼 확장자는 왜 있을까요? Windows가 <strong>"어떤 프로그램으로 열지"</strong> 정하는
          기준이기 때문이에요. <span className="icode">.jpg</span>면 사진 뷰어,
          <span className="icode">.txt</span>면 메모장, <span className="icode">.jsx</span>면
          여러분의 코드 에디터. 파일의 정체는 그대로인데 <strong>여는 도구만 엉뚱하게
          바뀌는 것</strong> — 그게 확장자를 바꿨을 때 벌어지는 일의 전부입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 아무 사진이나 <strong>복사본을 만든 뒤</strong>(원본 보호!)
          이름을 <span className="icode">사진.txt</span>로 바꿔 메모장으로 열어 보세요.
          외계어가 가득하죠? 맨 앞에 <span className="icode">JFIF</span> 같은 글자가 보이면
          그게 JPG의 흔적이에요. 다시 <span className="icode">.jpg</span>로 되돌리면 —
          멀쩡히 열립니다. 내용물은 한 번도 변한 적이 없으니까요.
        </div>
      </Section>

      <Section n={3} title="절대 경로와 상대 경로" sub="전체 주소로 안내할까, '여기서 두 블록'으로 안내할까">
        <p>
          친구에게 우리 회사를 알려 주는 두 가지 방법이 있어요.
          <strong>"서울시 ○○구 ○○로 12"</strong>처럼 전체 주소를 불러 주는 게
          <strong> 절대 경로</strong>, <strong>"지금 있는 카페에서 나와서 오른쪽으로 두 블록"</strong>이
          <strong> 상대 경로</strong>입니다. 상대 경로는 짧지만, <strong>출발점이 어디냐</strong>에
          따라 도착지가 완전히 달라진다는 게 포인트예요.
        </p>
        <Code>{CODE_PATH}</Code>
        <p>
          Windows는 <span className="icode">C:\</span>처럼 드라이브 문자에 역슬래시(\)를 쓰고,
          리눅스는 <span className="icode">/</span> 하나가 모든 것의 뿌리예요. 우리 서비스가
          돌아가는 <strong>AWS EC2 서버는 리눅스</strong>라서, 서버 작업을 하는 순간부터는
          <span className="icode">/home/ubuntu/...</span> 스타일과 친해져야 합니다 —
          이 감각은 <strong>리눅스 기초</strong> 코스에서 터미널로 직접 걸어 다니며 익혀요.
        </p>
        <svg className="diagram" viewBox="0 0 640 375" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="폴더 트리 구조와 절대 경로, 상대 경로 도해">
          <text x="30" y="28" fontSize="14" fontWeight="600" fill="var(--ink)">폴더 트리에서 길찾기 — 출발점은 pages/</text>
          <line x1="44" y1="80" x2="44" y2="154" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="44" y1="110" x2="62" y2="110" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="44" y1="154" x2="62" y2="154" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="76" y1="168" x2="76" y2="242" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="76" y1="198" x2="94" y2="198" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="76" y1="242" x2="94" y2="242" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="108" y1="256" x2="108" y2="286" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="108" y1="286" x2="126" y2="286" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="140" y1="300" x2="140" y2="330" stroke="var(--line)" strokeWidth="1.5" />
          <line x1="140" y1="330" x2="158" y2="330" stroke="var(--line)" strokeWidth="1.5" />
          <rect x="30" y="52" width="120" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="42" y="71" fontSize="13" fontWeight="600" fill="var(--ink)">frontend/</text>
          <rect x="62" y="96" width="140" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="74" y="115" fontSize="13" fill="var(--ink)">package.json</text>
          <rect x="62" y="140" width="100" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="74" y="159" fontSize="13" fontWeight="600" fill="var(--ink)">src/</text>
          <rect x="94" y="184" width="120" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="106" y="203" fontSize="13" fill="var(--ink)">App.jsx</text>
          <rect x="94" y="228" width="150" height="28" rx="8" fill="var(--card)" stroke="var(--primary)" strokeWidth="2" />
          <text x="106" y="247" fontSize="13" fontWeight="600" fill="var(--ink)">pages/</text>
          <text x="154" y="247" fontSize="12" fontWeight="600" fill="var(--primary)">← 현재 위치</text>
          <rect x="126" y="272" width="120" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="138" y="291" fontSize="13" fontWeight="600" fill="var(--ink)">courses/</text>
          <rect x="158" y="316" width="150" height="28" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="170" y="335" fontSize="13" fill="var(--ink)">FilesPage.jsx</text>
          <polyline points="248,234 290,234 290,110 214,110" fill="none" stroke="var(--rose)" strokeWidth="2" strokeLinecap="round" />
          <path d="M204 110 L214 105 L214 115 Z" fill="var(--rose)" />
          <polyline points="248,242 268,242 268,198 226,198" fill="none" stroke="var(--amber)" strokeWidth="2" strokeLinecap="round" />
          <path d="M216 198 L226 193 L226 203 Z" fill="var(--amber)" />
          <polyline points="248,250 330,250 330,330 320,330" fill="none" stroke="var(--teal)" strokeWidth="2" strokeLinecap="round" />
          <path d="M310 330 L320 325 L320 335 Z" fill="var(--teal)" />
          <text x="350" y="60" fontSize="13" fontWeight="600" fill="var(--ink)">절대 경로 — 뿌리부터 전체 주소</text>
          <text x="350" y="80" fontSize="12" fill="var(--muted)">C:\awesomedev\mirim-app\frontend\src\App.jsx</text>
          <text x="350" y="98" fontSize="12" fill="var(--muted)">/home/ubuntu/mirim-app/frontend/src/App.jsx</text>
          <text x="350" y="116" fontSize="12" fill="var(--muted)">(위: Windows · 아래: 리눅스)</text>
          <text x="350" y="210" fontSize="13" fontWeight="600" fill="var(--ink)">상대 경로 — 현재 위치(pages/) 기준</text>
          <circle cx="356" cy="233" r="4" fill="var(--rose)" />
          <text x="368" y="237" fontSize="12" fill="var(--ink)">../../package.json — 두 층 올라가기</text>
          <circle cx="356" cy="257" r="4" fill="var(--amber)" />
          <text x="368" y="261" fontSize="12" fill="var(--ink)">../App.jsx — 한 층 올라가기</text>
          <circle cx="356" cy="281" r="4" fill="var(--teal)" />
          <text x="368" y="285" fontSize="12" fill="var(--ink)">./courses/FilesPage.jsx — 한 층 내려가기</text>
          <text x="350" y="309" fontSize="12" fill="var(--muted)">.. = 부모 폴더 · . = 현재 폴더</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: pages/에서 출발하는 상대 경로 세 갈래 — 색깔 화살표와 오른쪽 목록이 짝을 이룹니다</p>
        <div className="warn">
          <b>신입 개발자 단골 에러</b> <span className="icode">Module not found</span>는
          십중팔구 상대 경로 실수예요. <span className="icode">./</span>(현재 폴더)와
          <span className="icode">../</span>(부모 폴더)를 헷갈리면, "여기서 두 블록"을
          반대 방향으로 걸은 것과 같습니다.
        </div>
      </Section>

      <Section n={4} title="숨김 파일과 시스템 파일" sub="개발자의 보물은 대부분 점(.)으로 시작한다">
        <p>
          숨김 파일은 비밀 파일이 아니에요. <strong>"평소엔 보여 주지 마"라는 딱지</strong>가
          붙어 있을 뿐이죠. 실수로 건드리면 곤란한 파일들을 초보자 눈에서 치워 두는,
          일종의 <strong>어린이 보호 캡</strong>입니다. 그런데 개발자가 되면 이 캡을 열 일이
          아주 많아져요.
        </p>
        <Code>{CODE_HIDDEN}</Code>
        <p>
          여러분이 Gitea(<span className="icode">edu.awesomedevapp.com:3000</span>)에서 클론한
          저장소 폴더에도 <span className="icode">.git</span>이라는 숨김 폴더가 있어요.
          커밋 하나하나의 역사가 전부 그 안에 들어 있죠 — <strong>그 폴더를 지우는 순간
          평범한 폴더로 돌아가 버립니다.</strong> "저장소를 복사했는데 Git이 안 돼요"의
          단골 원인이, 숨김 폴더라 <span className="icode">.git</span>이 복사에서 빠진 경우예요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 탐색기에서 [보기] → [표시] → <strong>[숨긴 항목]</strong>을
          켜고, 실습용으로 클론한 프로젝트 폴더를 열어 보세요. 반투명한
          <span className="icode">.git</span> 폴더가 나타나면 성공! 안을 구경하는 건 자유지만
          수정·삭제는 금지 — 여러분의 커밋 역사가 통째로 담긴 금고예요.
        </div>
      </Section>

      <Section n={5} title="휴지통의 원리와 완전삭제" sub="'삭제'라는 말의 세 가지 단계">
        <p>
          Delete 키를 눌렀을 때 파일이 곧바로 소멸한다고 생각하기 쉽지만, 실제로는
          <strong> 3단계의 안전장치</strong>가 있어요. ① 휴지통으로 이사 → ② 장부에서만 지움 →
          ③ 진짜 덮어쓰기. 대부분의 "삭제"는 ①이나 ②에서 멈춥니다.
        </p>
        <Code>{CODE_RECYCLE}</Code>
        <p>
          도서관 비유로 다시 보면: 휴지통 비우기는 <strong>장부에서 책 제목을 지우는 것</strong>이지
          서가에서 책을 태우는 게 아니에요. 사서(파일시스템)는 "그 자리 비었음"으로 표시할 뿐이고,
          새 책이 그 자리를 차지하기 전까지 원래 책은 그대로 꽂혀 있죠. 삭제한 파일을
          복구하는 프로그램들은 이 <strong>"장부엔 없지만 서가엔 남은 책"</strong>을 찾아내는 도구예요.
        </p>
        <svg className="diagram" viewBox="0 0 640 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="삭제의 3단계: 휴지통 이사, 장부에서 지움, 덮어쓰기 도해">
          <text x="320" y="30" textAnchor="middle" fontSize="14" fontWeight="600" fill="var(--ink)">‘삭제’의 3단계 — 오른쪽으로 갈수록 복구가 어려워요</text>
          <rect x="20" y="60" width="180" height="110" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="110" y="85" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--teal)">① Delete 키</text>
          <text x="110" y="110" textAnchor="middle" fontSize="13" fill="var(--ink)">휴지통으로 이사</text>
          <text x="110" y="130" textAnchor="middle" fontSize="12" fill="var(--muted)">원래 위치까지 기록</text>
          <text x="110" y="155" textAnchor="middle" fontSize="12" fill="var(--muted)">복구: [복원] 클릭 한 번</text>
          <rect x="230" y="60" width="180" height="110" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="320" y="85" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--amber)">② 휴지통 비우기</text>
          <text x="320" y="110" textAnchor="middle" fontSize="13" fill="var(--ink)">장부에서만 지움</text>
          <text x="320" y="130" textAnchor="middle" fontSize="12" fill="var(--muted)">데이터는 서가에 그대로</text>
          <text x="320" y="155" textAnchor="middle" fontSize="12" fill="var(--muted)">복구: 전용 프로그램으로 가능</text>
          <rect x="440" y="60" width="180" height="110" rx="8" fill="var(--card)" stroke="var(--line)" />
          <text x="530" y="85" textAnchor="middle" fontSize="13" fontWeight="600" fill="var(--rose)">③ 덮어쓰기(완전삭제)</text>
          <text x="530" y="110" textAnchor="middle" fontSize="13" fill="var(--ink)">무의미한 값으로 덮음</text>
          <text x="530" y="130" textAnchor="middle" fontSize="12" fill="var(--muted)">PC 반납·중고 판매 전 필수</text>
          <text x="530" y="155" textAnchor="middle" fontSize="12" fill="var(--muted)">복구: 사실상 불가능</text>
          <line x1="204" y1="115" x2="222" y2="115" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M230 115 L221 110 L221 120 Z" fill="var(--muted)" />
          <line x1="414" y1="115" x2="432" y2="115" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" />
          <path d="M440 115 L431 110 L431 120 Z" fill="var(--muted)" />
          <line x1="20" y1="200" x2="608" y2="200" stroke="var(--line)" strokeWidth="1.5" />
          <path d="M620 200 L608 194 L608 206 Z" fill="var(--line)" />
          <text x="20" y="224" fontSize="12" fill="var(--muted)">복구 쉬움</text>
          <text x="620" y="224" textAnchor="end" fontSize="12" fill="var(--muted)">복구 불가능</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 삭제의 3단계 — 휴지통 비우기까지는 데이터가 디스크에 남아 있습니다</p>
        <div className="warn">
          <b>회사에서 특히 중요한 이유</b> 고객 정보나 소스 코드가 담긴 디스크는 "삭제 +
          휴지통 비우기"만으로 반납하면 안 됩니다. 복구가 가능하니까요. PC 반납·교체 전엔
          반드시 정해진 <strong>완전삭제 절차</strong>를 따르세요 — 어썸데브도 장비 반납 시
          디스크 초기화를 규칙으로 두고 있어요.
        </div>
        <div className="tip">
          <b>직접 확인해 보기</b> 메모장으로 <span className="icode">연습.txt</span>를 만들어
          Delete로 지운 뒤, 휴지통에서 <strong>[복원]</strong>을 눌러 보세요. 원래 폴더로
          정확히 돌아오죠? 휴지통이 "원래 위치"까지 기억하는 이사 센터라는 증거입니다.
        </div>
      </Section>

      <Section n={6} title="압축(zip)의 원리 한 입" sub="반복을 찾아 줄여 쓰는 기술">
        <p>
          "아아아아아 진짜 최고"를 문자로 보낼 때 <strong>"아×5 진짜 최고"</strong>라고 줄여 쓸 수
          있죠? 압축의 기본 아이디어가 정확히 이거예요. 데이터 속에서 <strong>반복되는 패턴을 찾아
          더 짧은 표현으로 바꿔치기</strong>하고, 풀 때는 그 반대로 복원합니다. 원본과 100% 똑같이
          되살아나기 때문에 <strong>무손실 압축</strong>이라고 불러요.
        </p>
        <Code>{CODE_ZIP}</Code>
        <p>
          개발 현장에서도 압축은 공기처럼 쓰여요. <span className="icode">npm install</span>로
          받는 패키지도 압축된 채로 내려오고, 우리가 쓰는 <strong>Docker 이미지</strong>도 층층이
          압축돼서 EC2 서버로 전송됩니다. 서버가 브라우저에 보내는 응답도 gzip이라는 방식으로
          압축해서 보내는 경우가 많아요 — 압축 덕분에 인터넷이 몇 배는 빨라진 셈이죠.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 메모장에 아무 문장이나 쓰고 복사-붙여넣기로
          <strong> 수백 줄</strong>로 불린 뒤 저장하세요. 그 파일을 우클릭 →
          <strong> [ZIP 파일로 압축]</strong>. 원본과 zip의 크기를 비교하면 몇십 분의 일로
          줄어 있을 거예요. 이번엔 사진(.jpg)을 압축해 보세요 — 거의 안 줄어드는 걸 보면,
          "이미 압축된 건 더 못 짜낸다"를 눈으로 확인한 겁니다.
        </div>
      </Section>

      <Section n={7} title="실습 — 탐색기에서 확장자 표시 켜기" sub="개발자 PC 셋업 1번, 지금 바로 30초">
        <p>
          Windows는 초보자를 배려해 확장자를 기본으로 숨겨요. 하지만 개발자에게 확장자는
          파일의 <strong>신분증</strong>입니다. <span className="icode">App.jsx</span>와
          <span className="icode">App.css</span>를 이름만으로 구분해야 하고, 위장한 실행
          파일도 걸러내야 하니까요. 어썸데브 개발 PC 셋업의 사실상 1번 항목입니다.
        </p>
        <Code>{CODE_SHOW_EXT}</Code>
        <p>
          켜고 나면 세상이 조금 다르게 보여요. 지금까지 "보고서"였던 파일이
          <span className="icode">보고서.docx</span>로, "index"였던 파일이
          <span className="icode">index.html</span>로 — 파일마다 정체가 이름에 드러납니다.
          섹션 2에서 한 확장자 바꾸기 실험도, 표시를 켜야 제대로 할 수 있어요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 위 순서대로 <strong>[파일 확장명]</strong>과
          <strong> [숨긴 항목]</strong>을 켠 뒤, 다운로드 폴더를 둘러보며 확장자를 하나씩
          읽어 보세요. 그리고 아직 안 했다면 섹션 2의 <span className="icode">.jpg</span> →
          <span className="icode">.txt</span> 실험을 지금 해 보세요 — 확장자 표시가 켜져
          있어야 이름 끝을 직접 고칠 수 있습니다.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>📁 여기까지 왔다면</h3>
          <p className="muted">
            이제 파일은 "디스크의 사서가 장부로 관리하는 데이터 구역"이고, 확장자는 이름표,
            삭제는 장부 지우기라는 걸 알게 됐어요. 다음은 이 파일들 사이를 <strong>키보드만으로</strong>
            걸어 다닐 차례 — <Link to="/learn/linux"><strong>리눅스 기초</strong></Link> 코스에서
            오늘 배운 절대/상대 경로를 터미널 명령(<span className="icode">cd</span>,{' '}
            <span className="icode">ls</span>)으로 직접 밟아 보세요. 우리 서비스가 사는
            EC2 서버 속을 돌아다니는 첫걸음입니다.
          </p>
        </div>
      </div>
    </div>
  );
}
