Pseudo-classes

<!-- 기본 호버 버튼 -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2-4rem br8px bn cp fs14px tall200msease">
  버튼
</button>

<!-- 글자색 변경 링크 -->
<a class="c71717A hover-cFAFAFA tdn tall200msease" href="#">
  링크 텍스트
</a>

<!-- 투명도 변경 -->
<div class="o60 hover-o100 tall200msease">
  호버하면 선명해짐
</div>

<!-- 스케일 효과 카드 -->
<div class="bg18181B p2rem br8px hover-ts1-05 tall200msease cp">
  호버하면 살짝 확대
</div>

<!-- 복합 호버: 배경 + 글자색 + 그림자 -->
<button class="bg18181B hover-bg6366F1 c71717A hover-cFFFFFF py12px px2-4rem br8px bn cp tall200msease">
  복합 효과
</button>

<!-- 기본 포커스 스타일 -->
<input
  class="w100p bg18181B cFAFAFA b1pxsolid27272A focus-bc6366F1 focus-bw2px py12px px16px br8px tall200msease"
  type="text"
  placeholder="포커스 시 테두리 강조"
/>

<!-- focus-within: 자식이 포커스 받으면 부모 스타일 변경 -->
<div class="b1pxsolid27272A focus-within-bc6366F1 br8px p16px tall200msease">
  <label class="cA1A1AA fs12px db mb4px">이름</label>
  <input class="w100p bg18181B cFAFAFA bn py8px fs14px" type="text" />
</div>

<!-- focus-visible: 키보드 포커스 전용 -->
<button class="bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp focus-visible-bw2px focus-visible-bcFFFFFF">
  Tab으로 포커스 시 테두리 표시
</button>

<!-- 비활성 버튼 -->
<button
  class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2-4rem br8px bn cp fs14px tall200msease disabled-o50 disabled-pen"
  disabled
>
  비활성 버튼
</button>

<!-- 비활성 입력 필드 -->
<input
  class="w100p bg18181B cFAFAFA b1pxsolid27272A py12px px16px br8px disabled-o50"
  type="text"
  placeholder="수정 불가"
  disabled
/>

<!-- 활성/비활성 비교 -->
<div class="df gap16px">
  <button class="bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp disabled-o50 disabled-pen">
    활성
  </button>
  <button class="bg6366F1 cFFFFFF py12px px2-4rem br8px bn cp disabled-o50 disabled-pen" disabled>
    비활성
  </button>
</div>

<!-- 커스텀 체크박스 스타일 -->
<label class="df aic gap8px cp">
  <input type="checkbox" class="w16px h16px checked-bg6366F1" />
  <span class="cFAFAFA fs14px">옵션 1</span>
</label>

<!-- 커스텀 라디오 버튼 -->
<label class="df aic gap8px cp">
  <input type="radio" name="option" class="w16px h16px checked-bg6366F1" />
  <span class="cFAFAFA fs14px">선택 A</span>
</label>
<label class="df aic gap8px cp">
  <input type="radio" name="option" class="w16px h16px checked-bg6366F1" />
  <span class="cFAFAFA fs14px">선택 B</span>
</label>

<!-- 이메일 검증 -->
<input
  type="email"
  required
  placeholder="이메일을 입력하세요"
  class="w100p bg18181B cFAFAFA b1pxsolid27272A invalid-bcEF4444 valid-bc34D399 py12px px16px br8px tall200msease"
/>

<!-- 패턴 검증 (숫자만) -->
<input
  type="text"
  pattern="[0-9]+"
  required
  placeholder="숫자만 입력"
  class="w100p bg18181B cFAFAFA b1pxsolid27272A invalid-bcEF4444 py12px px16px br8px tall200msease"
/>

<!-- 범위 검증 -->
<input
  type="number"
  min="1"
  max="100"
  placeholder="1-100"
  class="w100p bg18181B cFAFAFA b1pxsolid27272A in-range-bc34D399 out-of-range-bcEF4444 py12px px16px br8px tall200msease"
/>

<!-- 마지막 항목 테두리 제거 -->
<ul class="lsn m0 p0 bg18181B br8px oh">
  <li class="py12px px16px bb1pxsolid27272A last-child-bb0">항목 1</li>
  <li class="py12px px16px bb1pxsolid27272A last-child-bb0">항목 2</li>
  <li class="py12px px16px bb1pxsolid27272A last-child-bb0">항목 3</li>
  <li class="py12px px16px bb1pxsolid27272A last-child-bb0">항목 4</li>
</ul>

<!-- 첫 번째 항목 강조 -->
<div class="df fdc">
  <div class="py12px px16px first-child-fw700 first-child-cFAFAFA c71717A">첫 번째 (강조)</div>
  <div class="py12px px16px first-child-fw700 first-child-cFAFAFA c71717A">두 번째</div>
  <div class="py12px px16px first-child-fw700 first-child-cFAFAFA c71717A">세 번째</div>
</div>