<div class="card">
  <h2>Hello CSS!</h2>
  <p>속성과 값을 변경하여 디자인을 바꿔보세요.</p>
</div>

<style>
/* --- 아래는 적용 방법 예시 --- */
/* 내부 스타일 시트 (Internal) */
.box {
  background-color: #3b82f6; /* 파란 배경 */
  color: white; /* 흰색 텍스트 */
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
}
</style>

<!-- 인라인 스타일이 내부 스타일을 덮어씁니다! -->
<div class="box" style="background-color: #ef4444; /* 인라인 스타일 (빨간색으로 강제 적용) */">
  나는 파란색이어야 하지만, 인라인 스타일 때문에 빨간색입니다!
</div>
<!-- ====== CSS 선택자(Selectors)와 네이티브 중첩(Nesting) ====== -->
<div style="margin: 30px 0; border-top: 1px solid #475569;"></div>
<style>
/* 1. 다양한 복합 선택자 */
.card > h2 { color: #ef4444; margin-bottom: 5px; } /* 자식: 바로 밑의 h2만 */
.card h2 { color: #3b82f6; }  /* 자손: 자식의 자식까지 포함한 모든 h2 (위 규칙이 없었다면 파란색) */
.title + p { font-weight: bold; color: #10b981; }  /* 인접 형제: 바로 뒤에 오는 p 1개만 초록색/굵게 */
.title ~ p { opacity: 0.6; } /* 일반 형제: 뒤에 오는 모든 p 반투명 */

/* 2. 속성 선택자 */
input[type="password"] { background: #fee2e2; border: 1px solid #ef4444; padding: 4px; }
a[href^="https"] { color: #10b981; font-weight: bold; text-decoration: none; } 

/* ======================================= */
/* 3. 🔥 최신 문법: Native CSS Nesting 🔥 */
/* ======================================= */
.article {
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  margin-top: 20px;

  /* .article 안의 p 요소 */
  p {
    line-height: 1.6;
    color: #334155;
    margin: 5px 0;
  }

  /* .article 에 마우스를 올렸을 때 (& = .article) */
  &:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border-color: #94a3b8;
  }

  /* .article 안의 자식 중 .highlight 클래스 */
  & > .highlight {
    background: #fef08a;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
  }
}
</style>

<!-- HTML 구조 -->
<div class="card" style="padding:15px; border:1px solid #ccc; border-radius:8px; margin-bottom:15px;">
  <h2>카드 제목 (자식)</h2>
  <div>
    <h2>카드 안의 다른 제목 (자손)</h2>
  </div>
</div>

<h3 class="title">형제 선택자 테스트</h3>
<p>첫 번째 단락 (인접 형제)</p>
<p>두 번째 단락 (일반 형제)</p>
<p>세 번째 단락 (일반 형제)</p>

<div style="margin: 20px 0;">
  <input type="text" placeholder="일반 텍스트" style="padding: 4px;">
  <input type="password" placeholder="비밀번호 입력">
  <br><br>
  <a href="https://google.com">HTTPS 보안 링크</a> | <a href="http://example.com">HTTP 일반 링크</a>
</div>

<div class="article">
  <h4>CSS Nesting 테스트 영역 (마우스를 올려보세요!)</h4>
  <p>이 단락은 article 내부의 p 요소 스타일이 적용되었습니다.</p>
  <div class="highlight">나는 하이라이트 된 자식 요소입니다.</div>
</div>