/* 개발자 A가 작성 */
.title {
  color: blue;
  font-size: 24px;
}

/* 개발자 B가 작성 — 충돌! */
.title {
  color: red;
  font-size: 16px;
}

/* 결국 이렇게 됩니다... */
.title {
  color: green !important; /* 우선순위 전쟁의 끝 */
}

.block {}            /* 독립적인 컴포넌트 */
.block__element {}   /* 블록 내부의 하위 요소 */
.block--modifier {}  /* 블록이나 요소의 변형/상태 */

<!-- 카드 컴포넌트 -->
<div class="card card--featured">
  <img class="card__image" src="thumbnail.jpg" alt="썸네일" />
  <h3 class="card__title">제목입니다</h3>
  <p class="card__description">설명 텍스트</p>
  <button class="card__button card__button--primary">자세히 보기</button>
</div>

/* 블록 */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

/* 블록의 변형 */
.card--featured {
  border-color: gold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 요소 */
.card__title {
  font-size: 18px;
  font-weight: bold;
}

/* 요소의 변형 */
.card__button--primary {
  background-color: #007bff;
  color: white;
}

/* Button.module.css */
.wrapper {
  display: inline-flex;
  align-items: center;
}

.title {
  font-size: 16px;
  color: #333;
}

.primary {
  background-color: #007bff;
  color: white;
}

// Button.tsx — React에서의 사용
import styles from './Button.module.css';

export function Button({ children, variant }) {
  return (
    <button className={`${styles.wrapper} ${variant === 'primary' ? styles.primary : ''}`}>
      <span className={styles.title}>{children}</span>
    </button>
  );
}

<!-- 빌드 후 실제 HTML -->
<button class="Button_wrapper_x7d3f Button_primary_a2b1c">
  <span class="Button_title_k9m2n">클릭하세요</span>
</button>

/* 전역 클래스가 필요할 때 */
:global(.visually-hidden) {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

/* 다른 모듈의 스타일을 조합할 때 */
.errorText {
  composes: title; /* 같은 파일의 .title 스타일을 가져옴 */
  color: red;
}

.imported {
  composes: base from './shared.module.css'; /* 다른 파일에서 가져오기 */
}

import styled from 'styled-components';

// 스타일이 포함된 컴포넌트를 직접 생성
const Card = styled.div`
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;

  /* props에 따라 동적으로 스타일 변경 */
  background-color: ${(props) => (props.$featured ? '#fff9e6' : 'white')};
  border-color: ${(props) => (props.$featured ? 'gold' : '#ddd')};
`;

const Title = styled.h3`
  font-size: 18px;
  font-weight: bold;
  /* 테마 시스템과 연동 */
  color: ${(props) => props.theme.colors.text};
`;

// 기존 컴포넌트 확장
const PrimaryButton = styled(Button)`
  background-color: #007bff;
  color: white;

  &:hover {
    background-color: #0056b3;
  }
`;

// 사용하는 쪽
function ProductCard({ product }) {
  return (
    <Card $featured={product.isNew}>
      <Title>{product.name}</Title>
      <PrimaryButton>구매하기</PrimaryButton>
    </Card>
  );
}

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

// css prop 방식 — 별도 컴포넌트 생성 없이 사용
const cardStyle = (featured: boolean) => css`
  border: 1px solid ${featured ? 'gold' : '#ddd'};
  border-radius: 8px;
  padding: 16px;
`;

function Card({ featured, children }) {
  return <div css={cardStyle(featured)}>{children}</div>;
}

// Next.js에서 styled-components를 쓰려면 별도 설정이 필요합니다
// next.config.js
module.exports = {
  compiler: {
    styledComponents: true, // SWC 컴파일러에 styled-components 지원 추가
  },
};

<!-- 기존 CSS 방식 -->
<button class="primary-button">클릭</button>

<!-- Tailwind 방식 — 클래스 자체가 스타일 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
  클릭
</button>

/* globals.css 또는 컴포넌트 CSS */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }

  .btn-primary {
    @apply btn bg-blue-500 text-white hover:bg-blue-600;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
  }
}

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'], // 사용 중인 클래스 스캔 경로
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
      spacing: {
        '18': '4.5rem', // 커스텀 간격
      },
      fontFamily: {
        sans: ['Pretendard', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'), // prose 클래스 등
    require('@tailwindcss/forms'),      // 폼 요소 스타일 리셋
  ],
};