/* Before: 반복적인 셀렉터 */
.card { background: white; }
.card .title { font-size: 1.5rem; }
.card .title:hover { color: blue; }
.card .body { padding: 1rem; }

/* After: CSS Nesting */
.card {
  background: white;

  .title {
    font-size: 1.5rem;

    &:hover {
      color: blue;
    }
  }

  .body {
    padding: 1rem;
  }
}

.button {
  background: transparent;

  /* &는 부모 셀렉터를 참조 */
  &:hover {
    background: var(--bg-tertiary);
  }

  &:disabled {
    opacity: 0.5;
  }

  /* 복합 셀렉터 */
  &.primary {
    background: var(--text-primary);
    color: var(--bg-primary);
  }

  /* 부모 참조 위치 변경 */
  .dark & {
    border-color: #333;
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

// SCSS: 어떤 셀렉터든 직접 중첩 가능
.card {
  h2 { color: red; }    // OK in SCSS
  p { margin: 0; }      // OK in SCSS
}

// CSS Nesting: 요소 셀렉터는 & 필요 (relaxed syntax는 불필요)
.card {
  h2 { color: red; }    // Chrome 120+에서 OK (relaxed)
  & h2 { color: red; }  // 모든 지원 브라우저에서 OK
}

/* Button.module.css */
.button {
  padding: 8px 24px;

  &:hover {
    background: var(--bg-tertiary);
  }

  &.large {
    padding: 12px 32px;
  }
}