반응형 + 컨테이너 쿼리: 모바일 우선

// 기본은 모바일 — sm/md/lg는 점진적 확장
<div className="
  flex flex-col          // 모바일: 세로
  sm:flex-row sm:gap-4   // 640+: 가로
  lg:gap-8 lg:p-12       // 1024+: 더 큰 간격
">

// 그리드
<div className="
  grid
  grid-cols-1 gap-4       // 모바일: 1열
  sm:grid-cols-2          // 640+: 2열
  lg:grid-cols-3          // 1024+: 3열
  xl:grid-cols-4          // 1280+: 4열
">

sm:  640px
md:  768px
lg:  1024px
xl:  1280px
2xl: 1536px


// 커스텀 추가
theme: {
  screens: {
    'xs': '375px',
    'mobile': { 'max': '767px' },
    'tablet': { 'min': '768px', 'max': '1023px' },
    'desktop': { 'min': '1024px' },
  },
}

// 부모 폭 기준 — 더 모듈화됨
<div className="@container">
  <div className="
    grid grid-cols-1
    @md:grid-cols-2     // 부모 컨테이너가 768+
    @lg:grid-cols-3     // 부모가 1024+
  ">
    <Card />
    <Card />
  </div>
</div>


// 카드 자체 반응형
<div className="@container">
  <article className="
    flex flex-col
    @sm:flex-row        // 카드 자체가 640+
    @sm:gap-4
  ">
    <img className="@sm:w-1/3" src={...} />
    <div className="@sm:w-2/3">{...}</div>
  </article>
</div>

/* clamp(min, preferred, max) */
.heading-xl {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  /* 모바일: 2rem
     중간: 5vw + 1rem
     데스크톱: 4rem 캡 */
}

.body {
  font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1.125rem);
}


/* Tailwind */
<h1 className="text-[clamp(2rem,5vw+1rem,4rem)]">
  반응형 헤딩
</h1>


/* 또는 plugin */
// tailwind.config.ts
fontSize: {
  'fluid-xl': 'clamp(2rem, 5vw + 1rem, 4rem)',
  'fluid-lg': 'clamp(1.5rem, 3vw + 0.5rem, 2.5rem)',
}

✅ 폰트 14~16px (가독성)
✅ 터치 영역 44×44px 이상 (Apple HIG)
✅ 가로 스크롤 없음 (overflow-x: hidden 비상시)
✅ 폼 input: font-size: 16px (iOS 자동 줌 방지)
✅ 모바일 메뉴 햄버거 (@md 이상에서 가로 메뉴)
✅ 테이블 — 가로 스크롤 또는 카드 변환
✅ 이미지 — width: 100% + sizes 속성
✅ 모달 — 모바일에선 풀스크린