/* ═══════════════════════════════════════════════════════════
   두손기획인쇄 — WDS Component Library (Phase 2C)
   Wanted Design System 기반 컴포넌트 클래스
   생성일: 2026-05-05
   참조 문서: docs/02-design/features/wds-component-migration.design.md

   포함 컴포넌트 (12종 + 헬퍼):
   - Button (4종 × 3 크기 = 12 변형)
   - Card (.card, .card-raised)
   - Input (.input + 상태)
   - Badge (3종)

   ⚠️ btn-primary.css 통합 (deprecation 대상)
   ⚠️ 모든 색상은 wds-tokens.css의 --ds-* 사용
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   Button — Primary (메인 CTA, 블루)
   ───────────────────────────────────────────── */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--ds-space-12) var(--ds-space-24);
  background: var(--ds-brand-blue);
  color: var(--ds-text-inverse);
  border: none;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-base);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--ds-shadow-sm);
  text-decoration: none;
}

.btn-primary:hover {
  background: var(--ds-brand-blue-dark);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Button 크기 modifier */
.btn-primary--small {
  padding: var(--ds-space-8) var(--ds-space-16);
  font-size: 13px;
}

.btn-primary--large {
  padding: var(--ds-space-16) var(--ds-space-32);
  font-size: 16px;
}

/* 전체 너비 (기존 btn-primary.css 호환) */
.btn-primary--block {
  width: 100%;
}


/* ─────────────────────────────────────────────
   Button — Secondary (보조, 그레이 외곽선)
   ───────────────────────────────────────────── */

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--ds-space-12) var(--ds-space-24);
  background: var(--ds-surface-default);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-surface-border);
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-base);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--ds-surface-subtle);
  border-color: var(--ds-surface-strong);
}

.btn-secondary:active {
  background: var(--ds-surface-raised);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary--small { padding: var(--ds-space-8) var(--ds-space-16); font-size: 13px; }
.btn-secondary--large { padding: var(--ds-space-16) var(--ds-space-32); font-size: 16px; }


/* ─────────────────────────────────────────────
   Button — Ghost (텍스트 버튼)
   ───────────────────────────────────────────── */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--ds-space-12) var(--ds-space-16);
  background: transparent;
  color: var(--ds-brand-blue);
  border: none;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-base);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-ghost:hover {
  background: var(--ds-brand-blue-light);
}

.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-ghost--small { padding: var(--ds-space-8) var(--ds-space-12); font-size: 13px; }
.btn-ghost--large { padding: var(--ds-space-16) var(--ds-space-24); font-size: 16px; }


/* ─────────────────────────────────────────────
   Button — Danger (위험 액션, 레드)
   ───────────────────────────────────────────── */

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--ds-space-12) var(--ds-space-24);
  background: var(--ds-status-error);
  color: var(--ds-text-inverse);
  border: none;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-base);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--ds-shadow-sm);
  text-decoration: none;
}

.btn-danger:hover {
  filter: brightness(0.92);
  box-shadow: var(--ds-shadow-md);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger--small { padding: var(--ds-space-8) var(--ds-space-16); font-size: 13px; }
.btn-danger--large { padding: var(--ds-space-16) var(--ds-space-32); font-size: 16px; }


/* ─────────────────────────────────────────────
   Option Box (옵션 영역 박스)
   사이트 표준 — 프리미엄 옵션, 후가공 옵션 모두 통일
   기존 클래스 호환: .premium-options-section, .additional-options-section,
                   .leaflet-premium-options-section
   ───────────────────────────────────────────── */

.option-box,
.premium-options-section,
.additional-options-section,
.leaflet-premium-options-section,
.tape-option-section {
  background: var(--ds-surface-subtle);
  border: 1px solid var(--ds-surface-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-8) var(--ds-space-12);
  margin: var(--ds-space-8) 0;
  font-family: var(--ds-font-base);
}


/* ─────────────────────────────────────────────
   Card
   ───────────────────────────────────────────── */

.card {
  background: var(--ds-surface-default);
  border: 1px solid var(--ds-surface-border);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-16);
}

.card-raised {
  background: var(--ds-surface-default);
  border: none;
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-16);
  box-shadow: var(--ds-shadow-md);
}

.card-raised:hover {
  box-shadow: var(--ds-shadow-lg);
}


/* ─────────────────────────────────────────────
   Input
   ───────────────────────────────────────────── */

.input {
  display: block;
  width: 100%;
  padding: var(--ds-space-8) var(--ds-space-12);
  background: var(--ds-surface-default);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-surface-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-base);
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.input:focus {
  outline: none;
  border-color: var(--ds-brand-blue);
  box-shadow: 0 0 0 3px var(--ds-brand-blue-light);
}

.input:disabled,
.input.is-disabled {
  background: var(--ds-surface-subtle);
  color: var(--ds-text-disabled);
  cursor: not-allowed;
}

.input.is-error {
  border-color: var(--ds-status-error);
}

.input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}


/* ─────────────────────────────────────────────
   Badge
   ───────────────────────────────────────────── */

.badge-success,
.badge-warning,
.badge-error,
.badge-info {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ds-radius-full);
  font-family: var(--ds-font-base);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ds-text-inverse);
}

.badge-success { background: var(--ds-status-success); }
.badge-warning {
  background: var(--ds-status-warning);
  color: var(--ds-gray-0);   /* warning은 노란색이라 검정 텍스트 */
}
.badge-error { background: var(--ds-status-error); }
.badge-info { background: var(--ds-status-info); }


/* ─────────────────────────────────────────────
   기존 btn-primary.css 호환 헬퍼 보존
   ───────────────────────────────────────────── */

.gallery-more-button {
  text-align: center;
  margin-top: 20px;
  padding: 0 10px;
}


/* ═══════════════════════════════════════════════════════════
   사용 가이드

   ✅ 권장:
   <button class="btn-primary">기본 버튼</button>
   <button class="btn-primary btn-primary--large">큰 버튼</button>
   <button class="btn-danger">삭제</button>
   <input class="input" type="text">
   <input class="input is-error" type="text">
   <span class="badge-success">완료</span>
   <div class="card-raised">카드 내용</div>

   ❌ 금지:
   <button class="btn-primary" style="background: red !important;">  ← !important 금지
   <button class="custom-btn" style="background: #DC2626;">         ← hex 직접 사용 X

   📌 마이그레이션 전략 (Phase 2C):
   - btn-primary.css → btn-primary.deprecated.css (1주 후 삭제)
   - 5개 페이지(littleprint, namecard×3, msticker)에서
     btn-primary.css 인클루드 제거 + wds-components.css 추가
   ═══════════════════════════════════════════════════════════ */