최신 CSS — has 선택자, Nesting, Subgrid, 그리고 새로운 가능성

/* .img를 자식으로 가진 .card만 선택 */
.card:has(.img) {
  grid-template-rows: 200px 1fr;
}

/* 유효하지 않은 입력이 있는 폼 그룹에 경고 테두리 */
.form-group:has(input:invalid) {
  border-left: 3px solid var(--color-error);
}

/* placeholder가 보이는 상태(= 빈 필드)인 입력의 라벨 스타일 변경 */
label:has(+ input:placeholder-shown) {
  color: var(--color-muted);
}

/* 이미지가 있는 카드 — 가로 배치 */
.card:has(img) {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
}

/* 이미지가 없는 카드 — 세로 배치 */
.card:not(:has(img)) {
  display: flex;
  flex-direction: column;
}

/* 다크 모드 토글 체크박스가 체크되면 전체 페이지에 다크 테마 적용 */
html:has(#dark-mode-toggle:checked) {
  color-scheme: dark;
  --bg: #1a1a2e;
  --text: #eaeaea;
}

/* 기존 방식 — 선택자를 반복해서 작성 */
.card { background: white; }
.card .title { font-size: 1.2rem; }
.card .title:hover { color: blue; }
.card .body { padding: 1rem; }

/* CSS Nesting — 구조가 한눈에 보인다 */
.card {
  background: white;

  .title {
    font-size: 1.2rem;

    &:hover {
      color: blue;
    }
  }

  .body {
    padding: 1rem;
  }
}

.btn {
  background: var(--color-primary);
  transition: background 0.2s;

  /* & = .btn → .btn:hover */
  &:hover {
    background: var(--color-primary-dark);
  }

  /* & = .btn → .btn::after */
  &::after {
    content: '→';
    margin-left: 0.5rem;
  }

  /* & = .btn → .btn.active */
  &.active {
    font-weight: bold;
  }

  /* &를 뒤에 놓으면 — .dark-theme .btn */
  .dark-theme & {
    background: var(--color-dark-primary);
  }
}

.sidebar {
  width: 100%;
  padding: 1rem;

  /* 이 선택자에 대한 반응형 스타일이 바로 아래에 */
  @media (min-width: 768px) {
    width: 300px;
    padding: 2rem;
  }

  @media (min-width: 1200px) {
    width: 400px;
  }
}

/* 일반 Grid — 카드 내부는 각자 독립적인 트랙 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  display: grid;
  /* 각 카드가 자체적으로 행을 나눔 — 옆 카드와 높이가 안 맞음 */
  grid-template-rows: auto 1fr auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 부모에서 행 트랙도 명시적으로 정의 */
  grid-template-rows: subgrid;
  gap: 1.5rem;
}

.card {
  display: grid;
  /* 부모의 행 트랙을 그대로 사용 */
  grid-template-rows: subgrid;
  /* 이 카드가 차지할 행 범위 지정 */
  grid-row: span 3;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3; /* 헤더, 본문, 푸터 — 3개의 행 */

  .card-header {
    /* 첫 번째 행에 자동 배치 */
    font-weight: bold;
  }

  .card-body {
    /* 두 번째 행 — 남은 공간을 채움 */
    align-self: start;
  }

  .card-footer {
    /* 세 번째 행 — 항상 카드 하단에 고정 */
    align-self: end;
  }
}

/* 레이어 순서 선언 — 나중에 선언된 레이어가 우선 */
@layer base, components, utilities;

@layer base {
  /* 리셋 + 기본 스타일 */
  * {
    margin: 0;
    box-sizing: border-box;
  }
}

@layer components {
  .card {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;

    /* Nesting으로 컴포넌트 스타일을 한 블록에 */
    .title {
      font-size: 1.25rem;
    }

    &:has(img) {
      /* :has()와 조합하여 조건부 레이아웃 */
      grid-template-columns: 200px 1fr;
    }
  }
}

@layer utilities {
  /* 유틸리티가 항상 컴포넌트보다 우선 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

/* 외부 라이브러리 CSS를 낮은 우선순위 레이어에 배치 */
@layer vendor, app;

@import url('some-library.css') layer(vendor);

@layer app {
  /* 내 스타일이 항상 라이브러리를 덮어쓴다 — !important 불필요 */
  .datepicker {
    border-radius: 0.75rem;
    font-family: inherit;
  }
}

/* 기본 문법: color-mix(in 색공간, 색1 비율, 색2) */
.element {
  /* oklch 색 공간에서 파랑 60% + 초록 40% 혼합 */
  background: color-mix(in oklch, blue 60%, green);
}

:root {
  --brand: #3b82f6;

  /* 기본색에서 밝은/어두운 변형을 자동 생성 */
  --brand-light: color-mix(in oklch, var(--brand) 40%, white);
  --brand-dark: color-mix(in oklch, var(--brand) 70%, black);

  /* 반투명 변형 */
  --brand-subtle: color-mix(in srgb, var(--brand) 15%, transparent);
}

.badge {
  background: var(--brand-subtle);
  color: var(--brand-dark);
  border: 1px solid var(--brand-light);
}

/* sRGB에서의 혼합 — 중간 색이 탁하게 보일 수 있음 */
.srgb { background: color-mix(in srgb, blue 50%, yellow); }

/* oklch에서의 혼합 — 인간이 지각하는 밝기가 균일 */
.oklch { background: color-mix(in oklch, blue 50%, yellow); }

@scope (.card) {
  /* .card 내부에서만 적용 — 외부의 .title에는 영향 없음 */
  .title {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .body {
    line-height: 1.6;
  }
}

@scope (.article) to (.comments) {
  /* .article 내부이되, .comments 안은 제외 */
  p {
    font-size: 1.1rem;
    color: var(--text-primary);
  }

  a {
    color: var(--link-color);
    text-decoration: underline;
  }
}

@scope (.light-theme) {
  .btn { background: white; color: black; }
}

@scope (.dark-theme) {
  .btn { background: black; color: white; }
}

/* 기본 폴백 스타일 */
.card {
  display: flex;
  flex-direction: column;
}

/* Subgrid를 지원하면 업그레이드 */
@supports (grid-template-rows: subgrid) {
  .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

/* :has() 지원 여부를 확인 */
@supports selector(:has(*)) {
  .form-group:has(input:invalid) {
    border-color: red;
  }
}

/* :has()를 지원하지 않는 브라우저용 폴백 */
@supports not selector(:has(*)) {
  .form-group.has-error {
    border-color: red;
  }
}

/* 1단계: 모든 브라우저에서 동작하는 기본 스타일 */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* 2단계: Grid를 지원하면 Grid로 업그레이드 */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

/* 3단계: Subgrid를 지원하면 정렬 개선 */
@supports (grid-template-rows: subgrid) {
  .layout .card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

/* 4단계: :has()를 지원하면 조건부 스타일 추가 */
@supports selector(:has(*)) {
  .layout .card:has(img) {
    grid-column: span 2;
  }
}