/* 1주차 */
.button { background: blue; }
 
/* 3주차 — 사이드바 안에서는 다르게 */
.sidebar .button { background: gray; }
 
/* 6주차 — 사이드바의 강조 버튼은 또 달라야 함 */
.sidebar .button.primary { background: blue; }
 
/* 10주차 — 모달 안 사이드바의... */
#app .modal .sidebar .button.primary { background: blue; }
 
/* 12주차 — 포기 */
.button-override { background: blue !important; }

// CSS Modules — 클래스명이 자동으로 고유해진다
import styles from './Button.module.css';
<button className={styles.button} />

// 유틸리티 클래스 — 특이성이 전부 동일해서 순서만 남는다
<button className="bg-blue-500 hover:bg-blue-600" />

@layer reset, vendor, base, components, utilities;
 
@layer vendor {
  /* 서드파티 CSS — 특이성이 아무리 높아도 */
  #app .some-plugin .btn { color: red; }
}
 
@layer components {
  /* 뒤 레이어가 이긴다. 특이성 0.0.1이어도 */
  .btn { color: blue; }
}

/* 특이성 0,1,0 — 재정의하기 어렵다 */
.card .title { font-size: 18px; }
 
/* 특이성 0,0,0 — :where()는 특이성을 0으로 만든다 */
:where(.card) :where(.title) { font-size: 18px; }

.header  { z-index: 100; }
.dropdown { z-index: 1000; }
.modal   { z-index: 9999; }
.toast   { z-index: 99999; }
.tooltip { z-index: 999999; }   /* 다음 사람은 9999999를 쓸 것이다 */

/* 이 부모 때문에 자식은 아무리 z-index를 올려도 형제 밖으로 못 나간다 */
.card { opacity: 0.99; }      /* 새 stacking context 생성 */
.card .tooltip { z-index: 999999; }   /* 소용없음 */

:root {
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;
}
 
.modal { z-index: var(--z-modal); }

createPortal(<Modal />, document.body);

/* 🔴 컴포넌트가 자기 "바깥" 여백을 소유한다 */
.card { margin-bottom: 16px; }

.card--no-margin { margin-bottom: 0; }
.card--compact { margin-bottom: 8px; }
.sidebar .card:last-child { margin-bottom: 0; }

/* ✅ 부모가 간격을 결정 */
.card-list { display: flex; flex-direction: column; gap: 16px; }
.card { padding: 16px; }   /* margin 없음 */

<Stack gap={16}>
  <Card />
  <Card />
</Stack>

/* 🔴 어떻게 나온 숫자인가? */
.dropdown { position: absolute; top: 37px; left: -12px; }
.badge { transform: translate(-3px, 2px); }

/* ✅ 관계로 표현 */
.dropdown-wrapper { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));   /* 트리거 바로 아래 + 간격 토큰 */
  left: 0;
}

/* 🔴 200곳에 흩어진 같은 파랑 */
.btn-primary { background: #3b82f6; }
.link { color: #3b82f6; }
.badge-info { border-color: #3b82f6; }

:root {
  /* 1층: 원시 토큰 — 값 그 자체 */
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --gray-50: #f9fafb;
  --gray-900: #111827;
 
  /* 2층: 시맨틱 토큰 — 역할 */
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
}

.btn-primary { background: var(--color-primary); }

/* ✅ 시맨틱 토큰이 있으면 매핑만 바꾸면 된다 */
:root {
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
}
 
:root[data-theme='dark'] {
  --color-surface: var(--gray-900);
  --color-text: var(--gray-50);
}
 
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-surface: var(--gray-900);
    --color-text: var(--gray-50);
  }
}

/* 🔴 단순 반전 — 대비가 깨지고 눈이 아프다 */
filter: invert(1);
 
/* 🔴 순수 검정 배경 — OLED에서 번짐, 대비가 과함 */
background: #000;   /* → #0a0a0a ~ #18181b 권장 */
 
/* 🔴 그림자를 그대로 — 어두운 배경에서 검정 그림자는 안 보인다 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 다크모드에서는 밝은 테두리나 배경 밝기 차이로 층위를 표현 */

/* 🔴 사용자가 브라우저 기본 폰트 크기를 키워도 반영되지 않는다 */
body { font-size: 14px; }
.container { max-width: 1200px; }
@media (max-width: 768px) { /* ... */ }

/* ✅ rem — 사용자 설정을 존중한다 */
body { font-size: 1rem; }          /* 기본 16px, 사용자가 바꾸면 따라감 */
.container { max-width: 75rem; }
@media (min-width: 48em) { /* ... */ }

/* 미디어쿼리 없이 부드럽게 */
h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }

/* 🔴 컴포넌트마다 브레이크포인트를 반복 */
@media (max-width: 640px) { .card { ... } }
@media (max-width: 640px) { .list { ... } }
@media (max-width: 640px) { .nav { ... } }

/* ✅ 컨테이너 쿼리 — 자기가 놓인 공간을 기준으로 */
.card-container { container-type: inline-size; }
 
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

/* ✅ 내재적 반응형 — 쿼리 없이 알아서 줄바꿈 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

/* 🔴 모바일 브라우저에서 주소창 높이만큼 잘린다 */
.full-screen { height: 100vh; }
 
/* ✅ 동적 뷰포트 단위 */
.full-screen { height: 100dvh; }

// 🔴
<div onClick={handleClick} className="btn">저장</div>

// ✅ 이 전부가 공짜
<button type="button" onClick={handleClick} className="btn">저장</button>

.btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

// 🔴 이동인데 버튼
<button onClick={() => router.push('/orders')}>주문 목록</button>
// → 새 탭으로 열기, 링크 복사, 미들클릭이 전부 안 됨
 
// 🔴 동작인데 링크
<a href="#" onClick={handleDelete}>삭제</a>
// → 주소창에 #이 남고, 새 탭으로 열면 아무 일도 안 일어남

/* 🔴 포커스 링이 안 예뻐서 */
*:focus { outline: none; }

/* ✅ 기본 링을 대체하되, 마우스 클릭 시엔 안 보이게 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

// 🔴
<input placeholder="이메일" />

// ✅
<label htmlFor="email">이메일</label>
<input id="email" type="email" autoComplete="email" placeholder="you@example.com" />

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

// 🔴 빨간 테두리와 빨간 글씨 — 스크린 리더는 아무것도 모른다
<input className={error ? 'border-red-500' : ''} />
{error && <span className="text-red-500">{error}</span>}

// ✅ 프로그래밍적으로 연결
<label htmlFor="email">이메일</label>
<input
  id="email"
  aria-invalid={!!error}
  aria-describedby={error ? 'email-error' : undefined}
/>
{error && (
  <span id="email-error" role="alert" className="text-red-500">
    {error}
  </span>
)}

// 🔴 색각 이상 사용자에게는 전부 같은 회색
<Badge className="bg-green-100">완료</Badge>
<Badge className="bg-red-100">실패</Badge>

// 🔴 상태를 점 색깔로만 표현
<span className={`dot ${isOnline ? 'bg-green-500' : 'bg-gray-400'}`} />
 
// 🔴 차트에서 색으로만 계열 구분

// ✅ 색 + 아이콘 + 텍스트
<span className="dot bg-green-500" />
<span className="sr-only">온라인</span>

// 🔴 모달이 열렸지만 키보드 포커스는 뒤쪽 페이지에 남아있다
{isOpen && <div className="modal">...</div>}

// ✅ 직접 구현하지 말고 검증된 것을 쓰세요
import * as Dialog from '@radix-ui/react-dialog';

// ✅ 라우트 변경 시 알리고 포커스 이동
function RouteAnnouncer() {
  const pathname = usePathname();
  const ref = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    ref.current?.focus();
  }, [pathname]);
 
  return <div ref={ref} tabIndex={-1} aria-live="polite" className="sr-only" />;
}

// 🔴 시맨틱 요소를 두고 ARIA로 흉내
<div role="button" tabIndex={0} onKeyDown={handleKey} onClick={handleClick}>저장</div>
 
// ✅
<button onClick={handleClick}>저장</button>

// 🔴 잘못된 ARIA는 없는 것보다 나쁘다
<button aria-label="닫기">저장</button>
// → 화면에는 "저장", 스크린 리더는 "닫기". 음성 제어 사용자가 "저장 클릭"이라고 말해도 안 됨
 
// 🔴 이미 버튼인데 role 중복
<button role="button">
 
// 🔴 숨겨진 요소에 aria-label
<div aria-hidden="true"><button aria-label="메뉴">…</button></div>
// → aria-hidden 안의 포커스 가능 요소는 접근성 트리에서 사라지지만 Tab으로는 도달함

// 🔴 장식용 이미지에 설명 — 스크린 리더가 불필요한 것을 읽는다
<img src="/decorative-swirl.svg" alt="장식용 곡선 무늬" />
 
// ✅ 장식이면 빈 alt (속성 자체를 빼면 안 됨 — 그러면 파일명을 읽는다)
<img src="/decorative-swirl.svg" alt="" />
 
// 🔴 파일명 그대로
<img src={url} alt="IMG_2024_001.jpg" />
 
// 🔴 불필요한 접두사
<img src={url} alt="이미지: 제품 사진" />   // "이미지"는 스크린 리더가 이미 말한다
 
// ✅ 그 이미지가 전달하는 정보
<img src={url} alt="파란색 무선 이어폰 케이스가 열려 있는 모습" />

// 🔴 "작게 보이고 싶어서" h4
<h1>페이지 제목</h1>
<h4>섹션 제목</h4>     {/* h2가 맞다 */}

// ✅ 레벨은 구조로, 크기는 CSS로
<h2 className="text-base font-medium">섹션 제목</h2>

/* ✅ 사용자가 모션 감소를 요청했으면 존중한다 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

// 자동재생 캐러셀도 마찬가지 — 일시정지 수단이 반드시 있어야 한다

// 🔴 아이콘 버튼 16px
<button className="w-4 h-4"><TrashIcon /></button>

.icon-btn {
  position: relative;
  width: 16px; height: 16px;
}
.icon-btn::after {
  content: '';
  position: absolute;
  inset: -14px;         /* 44×44 터치 영역 */
}

// eslint.config.js — 한 번 설정하면 계속 막아준다
'jsx-a11y/alt-text': 'error',
'jsx-a11y/anchor-is-valid': 'error',
'jsx-a11y/click-events-have-key-events': 'error',
'jsx-a11y/no-static-element-interactions': 'error',
'jsx-a11y/label-has-associated-control': 'error',
'jsx-a11y/no-autofocus': 'warn',

# 자동 검사 (린터가 못 잡는 런타임 문제)
npm i -D @axe-core/playwright

// e2e 테스트에 추가
import AxeBuilder from '@axe-core/playwright';
 
test('대시보드 접근성', async ({ page }) => {
  await page.goto('/dashboard');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});