<div class="test-container">
    <div>
        <strong>1 & 2. 버튼 테스트 (:hover, :active)</strong><br><br>
        <button class="btn">마우스를 올리고 클릭해보세요!</button>
    </div>
    
    <div>
        <strong>3. 입력창 테스트 (:focus)</strong><br><br>
        <input type="text" placeholder="여기를 클릭해서 입력해보세요...">
    </div>
    
    <div>
        <strong>4. 목록 테스트 (:nth-child)</strong><br><br>
        <ul>
            <li>첫 번째 아이템 (홀수)</li>
            <li>두 번째 아이템 (짝수)</li>
            <li>세 번째 아이템 (홀수, 빨간색)</li>
            <li>네 번째 아이템 (짝수)</li>
        </ul>
    </div>
</div>

<hr style="margin:20px 0; border:none; border-top:2px dashed #ccc;">

<div class="test-container">
    <div>
        <strong>1. ::before (요소 내부의 맨 앞에 추가)</strong><br><br>
        <button class="btn-new">새로운 업데이트</button>
    </div>
    
    <div>
        <strong>2. ::after (요소 내부의 맨 뒤에 추가)</strong><br><br>
        <div class="card">카드 내용</div>
    </div>
</div>