순수 CSS로 만드는 대표기업 서비스

CSS position: sticky가 뭔지 알려줘.
일반 position(static/relative/absolute/fixed)과
차이를 비교표로 만들어줘.
sticky가 스크롤에 따라 어떻게 동작하는지
단계별 예시 코드를 보여줘.

Apple 제품 페이지처럼
스크롤하면 텍스트가 fadeIn되고
이미지가 확대되는 CSS 애니메이션을 만들어줘.

사용할 속성:
- position: sticky
- @keyframes (fadeIn, scaleUp)
- Intersection Observer 대신 CSS만으로

모바일/데스크톱 반응형도 포함해줘.

Apple.com 제품 랜딩 페이지의 CSS 아키텍처를 분석하고
같은 수준의 스크롤 시네마틱 경험을 CSS만으로 설계해줘.

포함:
- scroll-snap-type으로 섹션 고정
- CSS Variables로 섹션별 테마 전환
- prefers-reduced-motion으로 접근성
- will-change로 GPU 가속 최적화
- 성능: Composite-only 속성만 애니메이션

각 기법이 Core Web Vitals에 미치는 영향도 설명해줘.

CSS 그라데이션 종류를 알려줘.
linear-gradient, radial-gradient, conic-gradient의
차이와 각각의 활용 예시를 보여줘.
버튼에 그라데이션 배경을 적용하는 코드도 작성해줘.

Stripe처럼 움직이는 그라데이션 배경과
유리 효과(글래스모피즘) 카드를 만들어줘.

포함:
- @keyframes로 그라데이션 이동 애니메이션
- backdrop-filter: blur(16px)
- border: 1px solid rgba(255,255,255,0.1)
- 다크/라이트 모드 대응

Stripe가 이 디자인을 선택한 이유(신뢰감+현대적)도 설명해줘.

Stripe 대시보드 수준의 CSS 디자인 시스템을 설계해줘.

포함:
- CSS Variables로 색상/간격/그림자 토큰
- 그라데이션 팔레트 시스템 (5가지 조합)
- 글래스모피즘 컴포넌트 (카드/모달/드롭다운)
- 마이크로 인터랙션 (버튼 ripple, 입력 포커스)
- 다크/라이트 테마 자동 전환
- CSS-only 토글 스위치 (체크박스 해킹)

backdrop-filter 미지원 브라우저 폴백도 포함해줘.

CSS Flexbox와 Grid를 처음 배우고 있어.
네이버 뉴스처럼 카드 4개를 한 줄에 배치하고
모바일에서는 1개씩 세로로 쌓이는
반응형 카드 레이아웃을 만들어줘.
Flexbox 버전과 Grid 버전 둘 다 보여줘.

카카오 스타일의 반응형 그리드 시스템을 만들어줘.

요구사항:
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
- 카드 내부: 이미지(aspect-ratio: 16/9) + 제목 + 설명 + 태그
- 호버 시 카드 살짝 올라감 (translateY + shadow)
- 모바일(375px) / 태블릿(768px) / 데스크톱(1024px) 3단계
- clamp()로 제목 폰트 자동 조절

각 속성이 왜 필요한지 주석으로 설명해줘.

네이버 메인 페이지의 CSS 레이아웃 아키텍처를 분석하고
동일한 수준의 반응형 그리드 시스템을 설계해줘.

포함:
- CSS Grid로 메인 레이아웃 (헤더/메인/사이드바/푸터)
- auto-fill + minmax로 콘텐츠 자동 배치
- Container Queries(@container)로 컴포넌트 단위 반응형
- subgrid로 카드 내부 정렬 통일
- content-visibility: auto로 렌더링 성능 최적화
- print 스타일시트

성능: 리플로우를 최소화하는 CSS 작성 원칙도 포함해줘.

CSS Variables(사용자 정의 속성)가 뭔지 알려줘.
--primary-color 같은 변수를 만들고
여러 곳에서 var()로 사용하는 예시를 보여줘.
변수를 바꾸면 전체 디자인이 바뀌는 원리를 설명해줘.

GitHub처럼 다크 모드를 구현해줘.

포함:
- CSS Variables로 색상 팔레트 (bg, text, border, accent)
- prefers-color-scheme: dark로 OS 자동 감지
- 수동 토글 버튼 (CSS 체크박스 해킹 또는 data-theme 속성)
- 전환 시 transition으로 부드러운 색상 변화

라이트→다크 전환 시 깜빡임(FOUC) 방지도 설명해줘.

GitHub의 Primer Design System처럼
CSS Variables 기반 디자인 토큰 시스템을 설계해줘.

포함:
- Primitive 토큰: --color-gray-100 ~ 900
- Semantic 토큰: --color-bg-primary, --color-text-primary
- Component 토큰: --button-bg, --button-hover
- 테마 3개: light, dark, high-contrast
- 토큰 전환: data-theme 속성 기반
- 접근성: 고대비 모드, forced-colors 대응

토큰 네이밍 컨벤션과 관리 전략도 설명해줘.

CSS transition이 뭔지 알려줘.
버튼에 호버하면 색이 바뀌고
크기가 살짝 커지는 효과를 만들어줘.
transition의 4가지 속성(property, duration, timing, delay)을
각각 설명해줘.

Airbnb 스타일의 숙소 카드를 만들어줘.

포함:
- 이미지: object-fit: cover + border-radius
- 하트 아이콘: 호버 시 scale(1.2) + 색상 전환
- 카드 호버: 그림자 강화 + translateY(-4px)
- 가격: line-through(원가) + 할인가 강조
- 별점: ⭐ 인라인 + 리뷰 수
- 반응형: 모바일 1열 → 데스크톱 4열 그리드

모든 전환에 transition: 0.2s ease 적용해줘.

Airbnb의 CSS 마이크로 인터랙션 시스템을 설계해줘.

포함:
- 커스텀 체크박스/라디오 (기본 UI 숨기고 CSS 재설계)
- 커스텀 range 슬라이더 (가격 필터)
- 이미지 캐러셀 CSS scroll-snap
- skeleton loading (콘텐츠 로딩 전 회색 박스 애니메이션)
- focus-visible로 키보드 사용자만 포커스 링 표시
- prefers-reduced-motion으로 모션 민감 사용자 대응

접근성과 성능을 모두 갖춘 인터랙션을 설계해줘.

/* 대표기업 CSS 기법 5가지 — 한 파일 데모 */

/* 1. Apple: sticky + scroll-snap */
.apple-section {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
.apple-section > section {
  scroll-snap-align: start;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Stripe: 움직이는 그라데이션 + 글래스모피즘 */
.stripe-bg {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px;
}

/* 3. 네이버/카카오: 자동 반응형 그리드 */
.naver-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.naver-card img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}
.naver-card h3 {
  font-size: clamp(14px, 2vw, 18px); /* 자동 크기 조절 */
}

/* 4. GitHub: 다크 모드 토큰 */
:root {
  --gh-bg: #ffffff;
  --gh-text: #1f2328;
  --gh-border: #d1d9e0;
  --gh-accent: #0969da;
}
[data-theme='dark'] {
  --gh-bg: #0d1117;
  --gh-text: #e6edf3;
  --gh-border: #30363d;
  --gh-accent: #58a6ff;
}
body {
  background: var(--gh-bg);
  color: var(--gh-text);
  transition: background 0.3s, color 0.3s;
}

/* 5. Airbnb: 마이크로 인터랙션 */
.airbnb-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 12px;
  overflow: hidden;
}
.airbnb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.heart-icon {
  transition: transform 0.2s ease;
  cursor: pointer;
}
.heart-icon:hover {
  transform: scale(1.3);
  color: #ff385c;
}

/* 💡 이 5가지 기법만 알면 대부분의 웹 UI를 만들 수 있습니다 */