/* ═══════════════════════════════════════════
   Components — Button, Card, Tag, Input, Icon
   ═══════════════════════════════════════════ */

/* ═══ BUTTON ═══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-5);
  font-family: var(--font-primary);
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  padding: var(--sp-7) calc(var(--sp-8) * 2);
  border: none; border-radius: var(--radius-pill);
  cursor: pointer; min-height: 44px;
  transition: all var(--motion);
}
.btn--primary {
  background: var(--color-accent-red); color: var(--color-surface-white);
}
.btn--primary:hover { background: #d63340; box-shadow: var(--shadow-2); }
.btn--secondary {
  background: transparent; color: var(--color-text-dark);
  border: 1.5px solid var(--color-text-dark);
}
.btn--secondary:hover {
  background: var(--color-surface-base); color: var(--color-text-primary);
  border-color: var(--color-surface-base);
}
.btn--accent {
  background: var(--color-accent-blue); color: var(--color-surface-white);
}
.btn--accent:hover { background: #2e9ae8; box-shadow: var(--shadow-2); }
.btn--yellow {
  background: var(--color-accent-yellow); color: var(--color-text-dark);
}
.btn--yellow:hover { background: #eee34a; }
.btn--ghost {
  background: transparent; color: var(--color-text-primary);
  border: 1.5px solid rgba(240,239,144,0.3);
}
.btn--ghost:hover { border-color: var(--color-text-primary); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* GSAP Flair effect (마우스 위치에서 원형이 확장되며 채움) */
.btn { position: relative; overflow: hidden; }
.btn__flair {
  position: absolute; inset: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: 0 0;
  will-change: transform;
  z-index: 0;
}
.btn__flair::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 300%; aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* flair 색: 대비가 확실하게 */
.btn--primary .btn__flair::before { background: rgba(255,255,255,0.35); }
.btn--secondary .btn__flair::before { background: var(--color-text-dark); }
.btn--accent .btn__flair::before { background: rgba(255,255,255,0.3); }
.btn--yellow .btn__flair::before { background: rgba(0,0,0,0.12); }
.btn--ghost .btn__flair::before { background: rgba(240,239,144,0.3); }
/* 텍스트를 flair 위에 유지 */
.btn__label { position: relative; z-index: 1; pointer-events: none; }
/* hover text color */
.btn--secondary:hover { color: var(--color-surface-white); }
.btn--ghost:hover { color: var(--color-accent-yellow); }
.btn--lg { padding: var(--sp-8) calc(var(--sp-8) * 3); font-size: var(--fs-xl); }

/* ═══ CARD ═══ */
.card {
  background: var(--color-surface-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform var(--motion), box-shadow var(--motion);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.card-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--motion);
}
.card:hover .card-img img { transform: scale(1.04); }
.card-img--placeholder {
  background: linear-gradient(135deg, var(--color-accent-red), var(--color-surface-base));
  display: flex; align-items: center; justify-content: center;
}
.card-img--placeholder svg {
  width: 48px; height: 48px; opacity: 0.4;
  stroke: white; fill: none; stroke-width: 1.5;
}
.card-body {
  padding: var(--sp-element) var(--sp-8);
}
.card-name {
  font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); color: var(--color-text-dark);
  margin-bottom: var(--sp-3);
}
.card-desc {
  font-size: var(--fs-md); color: var(--color-text-heading);
  line-height: var(--lh-base); margin-bottom: var(--sp-6);
}
.card-price {
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--color-accent-red);
}
.card-meta {
  display: flex; align-items: center; gap: var(--sp-5);
  font-size: var(--fs-sm); color: var(--color-text-heading);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-element);
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ═══ TAG ═══ */
.tag {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--sp-1) var(--sp-5);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-5);
}
.tag--pottery   { background: rgba(234,62,74,0.1); color: var(--color-accent-red); }
.tag--textile   { background: rgba(67,170,250,0.1); color: var(--color-accent-blue); }
.tag--woodwork  { background: rgba(253,244,91,0.15); color: #8a7a00; }
.tag--food      { background: rgba(29,26,24,0.06); color: var(--color-text-dark); }
.tag--beauty    { background: rgba(176,175,207,0.15); color: #6b6aaa; }
.tag--living    { background: rgba(49,107,157,0.1); color: var(--color-text-heading); }
.tag--tour      { background: rgba(67,170,250,0.1); color: var(--color-accent-blue); }
.tag--experience { background: rgba(234,62,74,0.1); color: var(--color-accent-red); }

/* ═══ INPUT ═══ */
.input-group { margin-bottom: var(--sp-element); }
.input-label {
  display: block;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--sp-3);
}
.input-field {
  width: 100%;
  font-family: var(--font-primary); font-size: var(--fs-xl);
  padding: var(--sp-7) var(--sp-8);
  border: 1.5px solid rgba(29,26,24,0.12);
  border-radius: var(--radius-sm);
  background: var(--color-surface-white);
  color: var(--color-text-dark);
  min-height: 44px;
  transition: all var(--motion);
}
.input-field:hover { border-color: rgba(29,26,24,0.24); }
.input-field:focus {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
  border-color: var(--color-accent-blue);
}
.input-field::placeholder { color: rgba(29,26,24,0.3); }
.input-hint {
  font-size: var(--fs-sm); color: var(--color-text-heading);
  margin-top: var(--sp-2);
}
.input-error {
  border-color: var(--color-accent-red);
}
.input-error-msg {
  font-size: var(--fs-sm); color: var(--color-accent-red);
  margin-top: var(--sp-2);
}

/* ═══ ICON (inline SVG defaults) ═══ */
.icon {
  width: 24px; height: 24px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; }

/* ═══ BREADCRUMB ═══ */
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-5);
  font-size: var(--fs-sm); color: var(--color-text-heading);
  padding: var(--sp-8) 0;
  border-bottom: 1px solid rgba(29,26,24,0.06);
  margin-bottom: var(--sp-block);
}
.breadcrumb-sep { opacity: 0.3; }
.breadcrumb a:hover { color: var(--color-accent-blue); }
.breadcrumb-current { color: var(--color-text-dark); font-weight: var(--fw-medium); }

/* ═══ FILTER BAR ═══ */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: var(--sp-5);
  margin-bottom: var(--sp-block);
}
.filter-btn {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  padding: var(--sp-4) var(--sp-8);
  border: 1.5px solid rgba(29,26,24,0.12);
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
  color: var(--color-text-dark);
  cursor: pointer;
  transition: all var(--motion);
}
.filter-btn:hover {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}
.filter-btn.is-active {
  background: var(--color-accent-red);
  color: var(--color-surface-white);
  border-color: var(--color-accent-red);
}