// 이 파일이 하는 일: "색 이론 기초" 코스 — 색의 3속성에서 출발해
// 배색 원리, 우리 브랜드 블루(#2159C5), 접근성, 다크모드까지 8개 섹션으로 안내하는 정적 학습 페이지.
// (3속성 → 색상환·배색 → 60-30-10 → 브랜드 컬러 → 톤앤매너 → 명도 대비·접근성 → 다크모드 → 배색 실습)
// 학습 포인트: API 호출이 없는 '내용 고정' 페이지다. 스타일은 global.css의
// 가이드 전용 클래스(step-card, code-block, tip 등)를 재사용한다 — 색을 여기서 하드코딩하지 않는다.
// 텍스트 다이어그램은 JSX 중괄호/백틱 충돌을 피하려고 파일 상단의 백틱 문자열 상수로 정의한다.

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

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

const CODE_HSL = `색 하나를 말로 설명하는 세 가지 좌표 — HSL

H (Hue, 색상)        "무슨 색이야?"          0~360° 각도
S (Saturation, 채도)  "얼마나 쨍해?"          0%(회색)~100%(쨍함)
L (Lightness, 명도)   "얼마나 밝아?"          0%(검정)~100%(흰색)

예) 우리 브랜드 블루 #2159C5 를 HSL로 번역하면:
    hsl(219, 71%, 45%)
    → 색상 219° (파랑 근처) · 채도 71% (꽤 쨍함) · 명도 45% (중간보다 살짝 어두움)

CSS에서 그대로 쓸 수 있어요:
    color: hsl(219, 71%, 45%);
    /* 명도만 올리면 같은 파랑의 '밝은 버전'이 나옵니다 */
    background: hsl(219, 71%, 92%);`;

const CODE_WHEEL = `색상환(Color Wheel) — 색상(H) 0~360°를 시계처럼 둥글게 배열한 것

              0° 빨강
        330°        30° 주황
     270° 보라          60° 노랑
        240°        120° 초록
             180° 청록
      (219° ← 우리 블루는 이 근처!)

배색의 두 기본기:
1) 보색(Complementary)  — 정반대(180° 차이)의 색.
   파랑(219°) ↔ 주황(39°)  → 대비가 강렬, 강조·경고에 딱
2) 유사색(Analogous)    — 이웃(±30° 안팎)의 색.
   파랑 · 청록 · 남보라     → 차분하고 조화로움, 화면 전체 톤에 딱

암기법: "싸울 땐 맞은편(보색), 친할 땐 옆자리(유사색)"`;

const CODE_603010 = `60-30-10 법칙 — 화면 색 비율의 황금 레시피

┌────────────────────────────────────┐
│ 60%  바탕색 (배경·카드)             │  ← 무대
│      예) 흰색 / 아주 연한 회색       │
├─────────────────────┐              │
│ 30%  보조색 (텍스트·경계선·아이콘)  │  ← 조연
│      예) 진회색 계열                │
├───────┐             │              │
│ 10%   │ 포인트색     │              │  ← 주인공
│ #2159C5 (버튼·링크·강조)            │
└───────┴─────────────┴──────────────┘

포인트색이 10%뿐이라서 눈에 띄는 거예요.
파란 버튼이 화면의 60%를 차지하면? 아무것도 강조되지 않습니다.`;

const CODE_BRAND_BLUE = `우리 블루 #2159C5 해부

#2159C5  =  R 33 · G 89 · B 197   (16진수 21=33, 59=89, C5=197)
         =  hsl(219, 71%, 45%)

왜 이 파랑인가?
- 색상 219°  : 순수 파랑(240°)보다 살짝 청록 쪽 → 차갑되 딱딱하지 않음
- 채도 71%   : 쨍하지만 형광은 아님 → "일 잘하는" 인상
- 명도 45%   : 흰 배경 위에서 글자·버튼으로 써도 또렷함

파랑이 '신뢰의 색'인 이유 — 하늘·바다처럼 변하지 않는 것의 색이라
심리적으로 안정·전문성을 떠올리게 해요. 은행·병원·개발사 로고에
파랑이 유난히 많은 건 우연이 아닙니다. 어썸데브도 그 계보!`;

const CODE_TONE = `톤앤매너(Tone & Manner) — 색이 만드는 '말투'

같은 파랑 계열이라도 톤이 다르면 인상이 달라요:

  진하고 채도 높게  → 또렷·전문적   (우리 메인 버튼)
  연하고 채도 낮게  → 부드러움·여백  (배경·비활성 상태)
  어둡고 탁하게     → 진지·무게감    (다크모드 표면)

어썸데브 학습 플랫폼의 톤앤매너 한 줄 요약:
"흰 바탕 + 회색 글 + 파랑 한 방울" — 차분한 교실에
선생님(파랑)이 필요한 순간에만 등장하는 구성이에요.

톤앤매너가 무너지는 흔한 실수:
- 페이지마다 다른 파랑을 쓰는 것 (#2159C5 하나로 통일!)
- 강조하고 싶다고 빨강·초록·보라를 한 화면에 다 쓰는 것`;

const CODE_CONTRAST = `명도 대비(Contrast)와 WCAG — "읽히는가?"의 기준

대비비(contrast ratio) = 밝은 색 밝기 : 어두운 색 밝기 (1:1 ~ 21:1)

WCAG(웹 접근성 표준)의 최소 기준:
  본문 텍스트     4.5 : 1 이상   (AA 등급)
  큰 텍스트(18pt+) 3 : 1 이상

우리 팔레트로 확인해 보면:
  흰 배경(#FFFFFF) 위 #2159C5 글자  →  약 6.3 : 1  ✅ 본문 합격
  흰 배경 위 연한 하늘색 글자        →  약 1.8 : 1  ❌ 눈 아픔

기억할 것: "예쁜데 안 읽히는 색"은 디자인이 아니라 장식입니다.
저시력 사용자, 햇빛 아래 폰 화면 — 대비는 모두를 위한 배려예요.`;

const CODE_DARKMODE = `다크모드에서 색이 달라지는 이유 — 그냥 반전이 아니다!

라이트 모드                     다크 모드
─────────────────────       ─────────────────────
배경: 흰색                     배경: 검정에 가까운 짙은 회색
                               (순수 검정 #000은 눈이 피로 → 살짝 회색)
글자: 진회색                   글자: 연회색
                               (순수 흰색은 어둠 속에서 너무 번쩍임)
포인트: #2159C5                포인트: 더 밝은 파랑!

왜 포인트색을 밝게 바꿀까?
어두운 배경 위에서 #2159C5(명도 45%)는 배경에 묻혀서
대비비가 뚝 떨어져요. 그래서 다크모드에선 같은 색상(H)을
유지한 채 명도(L)만 올린 파랑을 씁니다.
"같은 사람인데 무대 조명에 맞춰 옷만 갈아입는" 거예요.

우리 앱도 CSS 변수로 이걸 해요:
  :root        { --accent: #2159C5; }
  [data-theme="dark"] { --accent: 더 밝은 파랑; }
컴포넌트는 var(--accent)만 쓰니까 테마가 바뀌면 색이 따라 바뀝니다.
(이 코스 페이지에 색을 하드코딩하지 않는 이유이기도 해요!)`;

const CODE_PRACTICE = `배색 연습 — 우리 팔레트로 '가입 완료' 화면을 칠해 보세요

재료 (우리 플랫폼 팔레트):
  A. 흰색/연회색 (바탕)      B. 진회색 (본문 글자)
  C. #2159C5 (브랜드 블루)   D. 연한 블루 (C의 명도 올린 버전)

미션: 아래 요소에 A~D를 배정하고, 이유를 한 줄씩 써 보기
  1) 페이지 배경           → ?
  2) "가입을 축하해요" 제목  → ?
  3) 안내 본문 3줄          → ?
  4) [학습 시작하기] 버튼    → ?
  5) 버튼 뒤 강조 배경 띠    → ?

체크리스트 (60-30-10 감사):
  □ 파랑(C)이 화면의 10%쯤인가? 버튼·링크에만 썼는가?
  □ 글자와 배경의 대비가 충분한가? (섹션 6 기준으로!)
  □ 파랑을 두 가지 이상 섞지 않았는가? (D는 C의 명도 변형만 OK)

모범답안은 없어요 — 다만 "왜 여기에 이 색?"을
말로 설명할 수 있으면 통과입니다.`;

// ── 이 페이지 안에서만 쓰는 작은 부품들 ──
// 학습 포인트: 같은 모양이 반복되면 컴포넌트로 뽑는다. 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: '색의 3속성' },
  { n: 2, label: '색상환과 배색' },
  { n: 3, label: '60-30-10 법칙' },
  { n: 4, label: '우리 블루 해부' },
  { n: 5, label: '톤앤매너' },
  { n: 6, label: '대비와 접근성' },
  { n: 7, label: '다크모드의 색' },
  { n: 8, label: '배색 실습' },
];

export default function ColorPage() {
  return (
    <div>
      {/* 히어로: 이 코스가 어디서 출발해 어디까지 가는지 */}
      <div className="hero">
        <div className="eyebrow">Course · 디자인</div>
        <h1>색 이론 기초<br />— 감이 아니라 문법으로 색 고르기</h1>
        <p>
          "예쁜 색"은 취향이지만, "잘 읽히고 신뢰가 가는 색"은 배울 수 있는 문법이에요.
          색의 3속성에서 출발해 우리 브랜드 블루 <strong>#2159C5</strong>가 왜 그 자리에
          있는지, 다크모드에선 왜 옷을 갈아입는지까지 따라가 봅니다.
        </p>
        <div className="chip-row">
          <span className="chip">예상 소요 50분</span>
          <span className="chip">직접 확인 실습 4개</span>
          <span className="chip">준비물: 우리 플랫폼 화면</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="색의 3속성 — 색상·명도·채도" sub="모든 색은 세 개의 손잡이로 만들어진다">
        <p>
          세상의 모든 색은 딱 <strong>세 개의 손잡이(다이얼)</strong>를 돌려서 만들 수 있어요.
          <strong> 색상(Hue)</strong>은 "무슨 색이냐"(빨강·파랑·초록...),
          <strong> 명도(Lightness)</strong>는 "얼마나 밝냐",
          <strong> 채도(Saturation)</strong>는 "얼마나 쨍하냐"입니다.
        </p>
        <p>
          음악에 비유하면 색상은 <strong>음정</strong>(도·레·미), 명도는 <strong>볼륨</strong>,
          채도는 <strong>이펙트의 세기</strong> 같은 거예요. 같은 '도'라도 크게 치거나 작게 칠 수
          있듯이, 같은 파랑도 밝은 파랑·어두운 파랑·탁한 파랑이 될 수 있죠.
        </p>
        <Code>{CODE_HSL}</Code>
        <div className="tip">
          <b>직접 확인해 보기</b> 이 페이지에서 <span className="kbd">F12</span>로 개발자
          도구를 열고, 아무 요소나 선택해 CSS의 색상값을 클릭해 보세요. 색상 피커가 뜨면
          <span className="icode">HEX</span> 표기를 <span className="icode">HSL</span>로
          전환한 뒤 <strong>H·S·L 슬라이더를 하나씩만</strong> 움직여 보세요 — 세 손잡이가
          각각 뭘 바꾸는지 눈으로 확인할 수 있어요. (새로고침하면 원래대로 돌아오니 마음껏!)
        </div>
      </Section>

      <Section n={2} title="색상환과 배색 — 보색·유사색" sub="색들의 자리 배치도를 알면 조합이 보인다">
        <p>
          색상(H) 0~360°를 시계처럼 둥글게 배열한 것이 <strong>색상환</strong>이에요.
          색상환은 배색의 <strong>지도</strong>입니다 — 어떤 색과 어떤 색을 붙이면 싸우고,
          어떤 색끼리는 잘 지내는지가 자리 배치로 보이거든요.
        </p>
        <Code>{CODE_WHEEL}</Code>
        <p>
          <strong>보색</strong>은 반에서 정반대 성격의 두 친구 같아요 — 붙여 놓으면 서로가
          서로를 돋보이게 하지만, 너무 많이 쓰면 화면이 시끄러워져요. 그래서 보색은
          "여기 좀 봐 주세요" 하는 <strong>강조 한 곳</strong>에만 씁니다.
          <strong> 유사색</strong>은 단짝 친구들 — 나란히 있어도 튀지 않아서 배경·카드·그래프처럼
          <strong> 넓은 면적</strong>을 채울 때 좋아요.
        </p>

        <svg className="diagram" viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="12색 색상환. 마주보는 색은 보색, 이웃한 색은 유사색 관계임을 선으로 표시한 그림">
          <circle cx="210" cy="180" r="115" fill="none" stroke="var(--line)" strokeWidth="1" strokeDasharray="3 4" />

          <line x1="152.5" y1="279.6" x2="267.5" y2="80.4" stroke="var(--ink)" strokeWidth="2" strokeDasharray="6 5" strokeLinecap="round" />
          <line x1="210" y1="295" x2="152.5" y2="279.6" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
          <line x1="152.5" y1="279.6" x2="110.4" y2="237.5" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />

          <circle cx="210" cy="65" r="17" fill="hsl(0, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="267.5" cy="80.4" r="17" fill="hsl(30, 70%, 50%)" stroke="var(--ink)" strokeWidth="3" />
          <circle cx="309.6" cy="122.5" r="17" fill="hsl(60, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="325" cy="180" r="17" fill="hsl(90, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="309.6" cy="237.5" r="17" fill="hsl(120, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="267.5" cy="279.6" r="17" fill="hsl(150, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="210" cy="295" r="17" fill="hsl(180, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="152.5" cy="279.6" r="17" fill="hsl(210, 70%, 50%)" stroke="var(--ink)" strokeWidth="3" />
          <circle cx="110.4" cy="237.5" r="17" fill="hsl(240, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="95" cy="180" r="17" fill="hsl(270, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="110.4" cy="122.5" r="17" fill="hsl(300, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />
          <circle cx="152.5" cy="80.4" r="17" fill="hsl(330, 70%, 50%)" stroke="var(--line)" strokeWidth="1" />

          <text x="210" y="30" textAnchor="middle" fontSize="12" fill="var(--muted)">0° 빨강</text>
          <text x="282.5" y="49" textAnchor="middle" fontSize="12" fill="var(--ink)" fontWeight="bold">30° 주황</text>
          <text x="335.7" y="102" textAnchor="middle" fontSize="12" fill="var(--muted)">60°</text>
          <text x="370" y="184" textAnchor="middle" fontSize="12" fill="var(--muted)">90° 연두</text>
          <text x="335.7" y="266" textAnchor="middle" fontSize="12" fill="var(--muted)">120°</text>
          <text x="282.5" y="319" textAnchor="middle" fontSize="12" fill="var(--muted)">150°</text>
          <text x="210" y="338" textAnchor="middle" fontSize="12" fill="var(--muted)">180° 청록</text>
          <text x="122" y="322" textAnchor="middle" fontSize="12" fill="var(--ink)" fontWeight="bold">210° 파랑</text>
          <text x="84.3" y="266" textAnchor="middle" fontSize="12" fill="var(--muted)">240°</text>
          <text x="50" y="184" textAnchor="middle" fontSize="12" fill="var(--muted)">270° 보라</text>
          <text x="84.3" y="102" textAnchor="middle" fontSize="12" fill="var(--muted)">300°</text>
          <text x="137.5" y="49" textAnchor="middle" fontSize="12" fill="var(--muted)">330°</text>

          <line x1="404" y1="70" x2="444" y2="70" stroke="var(--ink)" strokeWidth="2" strokeDasharray="6 5" strokeLinecap="round" />
          <text x="454" y="74" fontSize="14" fill="var(--ink)" fontWeight="bold">보색 — 마주보는 색</text>
          <text x="454" y="96" fontSize="13" fill="var(--muted)">180° 차이 · 대비가 강렬</text>
          <text x="454" y="115" fontSize="13" fill="var(--muted)">강조 한 곳에만 작게</text>

          <line x1="404" y1="160" x2="444" y2="160" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
          <text x="454" y="164" fontSize="14" fill="var(--ink)" fontWeight="bold">유사색 — 옆자리 색</text>
          <text x="454" y="186" fontSize="13" fill="var(--muted)">±30° 안팎 · 차분하고 조화</text>
          <text x="454" y="205" fontSize="13" fill="var(--muted)">넓은 면적(배경·카드)에</text>

          <rect x="404" y="240" width="216" height="76" rx="8" fill="var(--card)" stroke="var(--line)" strokeWidth="1" />
          <text x="418" y="264" fontSize="13" fill="var(--ink)">우리 블루 219° ↔ 보색 주황 39°</text>
          <text x="418" y="286" fontSize="13" fill="var(--muted)">싸울 땐 맞은편(보색),</text>
          <text x="418" y="305" fontSize="13" fill="var(--muted)">친할 땐 옆자리(유사색)</text>
        </svg>
        <p className="muted" style={{ fontSize: 12.5, textAlign: 'center', marginTop: 2 }}>그림: 12색 색상환 — 마주보면 보색(강조), 이웃하면 유사색(조화)</p>

        <div className="warn">
          <b>주의</b> 보색을 글자와 배경으로 쓰는 건 금물이에요. 예를 들어 파란 배경에
          주황 글자는 경계가 아른아른 떨리는 <strong>진동 현상</strong>이 생겨 읽기 괴롭습니다.
          보색은 "면 대 면"이 아니라 "넓은 면 위의 작은 포인트"로!
        </div>
      </Section>

      <Section n={3} title="60-30-10 법칙" sub="색 비율의 황금 레시피">
        <p>
          어떤 색을 고를지 알았다면, 이제 <strong>얼마나 쓸지</strong>가 문제예요.
          인테리어에서 온 유명한 법칙이 <strong>60-30-10</strong>입니다 —
          바탕색 60%, 보조색 30%, 포인트색 10%. 요리로 치면 밥(60) + 반찬(30) + 고추장
          한 스푼(10)이에요. 고추장이 맛있다고 밥 대신 고추장을 60% 담으면... 그건 요리가 아니죠.
        </p>
        <Code>{CODE_603010}</Code>
        <p>
          핵심 원리는 <strong>희소성</strong>이에요. 포인트색이 귀하니까(10%) 눈이 거기로
          가는 거예요. 우리 플랫폼에서 파란 버튼이 한눈에 들어오는 이유는 파랑이 예뻐서가
          아니라, 화면의 나머지 90%가 <strong>파랑에게 양보</strong>하고 있기 때문입니다.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 지금 우리 학습 플랫폼 아무 페이지나 열고 눈을 살짝 찡그린 채
          바라보세요(디테일이 뭉개지면 색 덩어리만 보여요). 흰 바탕이 대략 60, 회색 글·선이 30,
          파랑이 10 근처인지 어림해 보세요. 그리고 자주 쓰는 다른 서비스 하나를 열어 같은 방식으로
          비율을 세어 보면 — 잘 만든 화면일수록 이 비율에 가깝다는 걸 발견하게 될 거예요.
        </div>
      </Section>

      <Section n={4} title="브랜드 컬러의 힘 — 우리 블루 #2159C5 해부" sub="왜 하필 '신뢰의 파랑'인가">
        <p>
          브랜드 컬러는 회사의 <strong>교복</strong> 같은 거예요. 로고, 버튼, 발표 자료,
          명함 — 어디서든 같은 색이 반복되면 사람들은 색만 보고도 "아, 어썸데브"라고
          알아봅니다. 반복이 만드는 기억, 그게 브랜드 컬러의 힘이에요.
        </p>
        <Code>{CODE_BRAND_BLUE}</Code>
        <p>
          섹션 1의 세 손잡이로 다시 보면, #2159C5는 <strong>우연히 예쁜 파랑이 아니라
          설계된 파랑</strong>이에요. 채도를 71%까지만 올려서 형광펜처럼 가볍지 않고,
          명도를 45%로 잡아서 흰 배경 위 글자·버튼 어느 쪽으로도 쓸 수 있죠.
          B2B 개발사에게 필요한 "차분한데 유능해 보이는" 인상을 세 손잡이로 조율한 결과입니다.
        </p>
        <div className="tip">
          <b>기억할 것</b> 브랜드 컬러는 <strong>딱 하나의 값</strong>으로 관리해요.
          "대충 비슷한 파랑"이 문서마다 다르게 쓰이는 순간 교복 효과는 사라집니다.
          우리 코드에서는 CSS 변수 한 곳에만 정의하고 모두가 그 변수를 가져다 쓰는 이유예요.
        </div>
      </Section>

      <Section n={5} title="톤앤매너" sub="색이 만드는 서비스의 '말투'">
        <p>
          <strong>톤앤매너</strong>는 서비스 전체가 색·서체·말씨로 풍기는 일관된 분위기예요.
          사람으로 치면 <strong>말투</strong>죠. 어제는 존댓말, 오늘은 반말, 내일은 사투리인
          사람은 신뢰가 안 가듯이, 페이지마다 색의 성격이 바뀌는 서비스도 어딘가 불안해 보여요.
        </p>
        <Code>{CODE_TONE}</Code>
        <p>
          중요한 건 톤앤매너가 <strong>새 색을 고르는 일이 아니라, 쓸 수 있는 색을 좁히는
          일</strong>이라는 점이에요. "우리는 이 파랑과 이 회색만 쓴다"는 제약이 있어야
          누가 어떤 페이지를 만들어도 같은 회사 제품처럼 보입니다. 제약이 곧 정체성이에요.
        </p>
      </Section>

      <Section n={6} title="명도 대비와 접근성" sub="예쁜 색보다 먼저, 읽히는 색 — WCAG 감각 익히기">
        <p>
          색 조합의 첫 번째 관문은 미적 감각이 아니라 <strong>"읽히는가?"</strong>예요.
          글자색과 배경색의 <strong>명도 차이(대비)</strong>가 작으면, 시력이 좋은 사람도
          햇빛 아래선 못 읽고, 저시력 사용자에겐 아예 보이지 않는 화면이 됩니다.
        </p>
        <Code>{CODE_CONTRAST}</Code>
        <p>
          <strong>WCAG</strong>는 웹 접근성의 국제 기준인데, 숫자를 다 외울 필요는 없어요.
          <strong> "본문은 4.5:1"</strong> 하나만 기억하고, 애매하면 대비 검사 도구로
          확인하는 습관이면 충분합니다. 좋은 자가 테스트: 만든 화면을 <strong>흑백으로
          상상</strong>했을 때도 글자가 또렷하면 대체로 합격이에요 — 대비는 결국 색상이 아니라
          <strong> 명도</strong>의 문제거든요.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 개발자 도구(<span className="kbd">F12</span>)로 우리 플랫폼의
          아무 텍스트나 검사한 뒤, Styles 패널에서 <span className="icode">color</span> 값 옆의
          색 견본을 클릭해 보세요. 색상 피커 안에 <strong>Contrast ratio(대비비)</strong> 항목이
          나타나고, AA 기준 통과 여부를 체크 표시로 알려 줍니다. 본문 글자가 4.5:1을 넘는지
          직접 확인해 보고, 슬라이더로 명도를 올려 "몇부터 불합격이 되는지" 경계선도 찾아보세요.
        </div>
      </Section>

      <Section n={7} title="다크모드에서 색이 달라지는 이유" sub="우리 앱의 테마 토글이 하는 일">
        <p>
          다크모드는 색을 단순히 <strong>반전</strong>하는 게 아니에요. 무대 조명이 바뀌면
          같은 옷도 다르게 보이듯, 배경이 어두워지면 모든 색의 <strong>대비 관계</strong>가
          다시 계산돼야 합니다. 그래서 잘 만든 다크모드는 색마다 "어두운 무대용 버전"을
          따로 준비해요.
        </p>
        <Code>{CODE_DARKMODE}</Code>
        <p>
          여기서 섹션 1의 세 손잡이가 또 등장해요. 다크모드용 파랑은 <strong>색상(H)은
          그대로 두고 명도(L)만 올린</strong> 색이에요. 색상까지 바꾸면 "다른 브랜드"가
          되어 버리니까, 정체성(색상)은 지키고 조명 대응(명도)만 하는 거죠.
        </p>
        <div className="tip">
          <b>직접 확인해 보기</b> 우리 학습 플랫폼의 <strong>테마 토글</strong>을 눌러
          라이트 ↔ 다크를 오가며 파란 버튼과 링크를 관찰해 보세요. "같은 파랑인데 다크모드에서
          조금 더 밝다"가 보이면 성공! 그다음 <span className="kbd">F12</span> →
          Elements에서 <span className="icode">html</span> 요소의 속성이 토글에 따라 바뀌는 것과,
          CSS 변수 값이 함께 바뀌는 것까지 찾아내면 오늘 배운 이론과 코드가 한 줄로 이어집니다.
        </div>
      </Section>

      <Section n={8} title="실습 — 우리 팔레트로 배색 연습" sub="이론을 손으로: 화면 하나를 직접 칠해 보기">
        <p>
          이제 1~7섹션의 도구를 전부 꺼내 쓸 시간이에요. 종이(또는 그림 도구)에
          간단한 <strong>'가입 완료' 화면</strong>을 스케치하고, 우리 팔레트 네 가지만으로
          칠해 봅니다. 규칙은 하나 — <strong>모든 색 선택에 이유를 달 것.</strong>
        </p>
        <Code>{CODE_PRACTICE}</Code>
        <ol className="olist">
          <li>요소 다섯 개에 A~D를 배정하고 이유를 한 줄씩 적어요.</li>
          <li>60-30-10 체크리스트로 스스로 감사(audit)해요 — 파랑이 넘치면 덜어내기.</li>
          <li>흑백으로 상상했을 때도 위계(제목 &gt; 본문 &gt; 배경)가 보이는지 확인해요.</li>
          <li>완성본을 멘토나 동기에게 보여 주고 "왜 이 색?" 질문에 말로 답해 보세요.</li>
        </ol>
        <div className="warn">
          <b>흔한 함정</b> "허전해서" 색을 추가하고 싶어질 거예요. 참으세요!
          허전함은 대부분 색이 아니라 <strong>여백과 크기 조절</strong>로 해결됩니다.
          색을 추가하는 건 언제나 마지막 수단이에요.
        </div>
      </Section>

      <div className="step-card">
        <div className="step-body">
          <h3 style={{ marginBottom: 6 }}>🎨 여기까지 왔다면</h3>
          <p className="muted">
            이제 색을 <strong>감</strong>이 아니라 <strong>세 개의 손잡이(색상·명도·채도)와
            비율(60-30-10), 대비(4.5:1)</strong>라는 문법으로 다룰 수 있게 됐어요.
            우리 블루 #2159C5가 버튼 위에 있는 이유도 설명할 수 있고요. 다음은 색이 올라가는
            뼈대를 배울 차례 — <Link to="/learn/layout"><strong>레이아웃과
            그리드</strong></Link> 코스에서 여백·정렬을, <Link to="/learn/typography"><strong>타이포그래피</strong></Link> 코스에서
            글자 위계를 이어서 배워 보세요.
            배색 실습 결과물은 멘토 리뷰 과제로 꼭 제출하는 것, 잊지 마세요!
          </p>
        </div>
      </div>
    </div>
  );
}
