/* ==========================================================
   responsive.css — 반응형 (T-001)
   기준: 1280px 데스크톱 → 1100 → 900(1단계 축소) → 640
   ========================================================== */

/* ---------- ~1180px: 헤더 슬로건/캐러셀 카드 축소 ---------- */
@media (max-width: 1180px) {
  :root {
    --hero-promo-w: 292px;
    --hero-card-w: 200px;
  }

  .grid--shorts,
  .grid--products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .carousel__next {
    right: 4px;
  }

  /* 카드 높이가 9:16 로 낮아졌으므로 데코 원도 함께 축소 (T-005) */
  .promo__deco {
    right: -30px;
    bottom: -26px;
    width: 170px;
    height: 170px;
  }

  .promo__deco svg {
    width: 36px;
    height: 36px;
  }
}

/* ---------- ~1000px: 검색창 축소, 크리에이터 2열 ---------- */
@media (max-width: 1000px) {
  .logo__slogan {
    display: none;
  }

  .search {
    max-width: 320px;
  }

  .grid--creators {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- ~900px: 반응형 1단계 (그리드 축소) ---------- */
@media (max-width: 900px) {
  :root {
    --gutter: 16px;
    --gap: 12px;
    --hero-promo-w: 260px;
    --hero-card-w: 176px;
    --fs-section: 20px;
  }

  .grid--shorts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid--products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .header__inner {
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 10px;
  }

  .header__search {
    order: 3;
    flex-basis: 100%;
  }

  .search {
    max-width: none;
  }

  .header__actions .is-optional {
    display: none;
  }

  .coupon {
    flex-wrap: wrap;
    padding: 26px 22px;
    gap: 18px;
  }

  .coupon__text {
    flex-basis: 100%;
  }

  .coupon__title {
    font-size: 25px;
  }

  .coupon__title em {
    font-size: 32px;
  }

  .promo__title {
    font-size: 25px;
  }

  /* 카드 높이가 9:16 로 낮아져 데코 원이 CTA 버튼을 덮으므로 축소 (T-005) */
  .promo__deco {
    right: -26px;
    bottom: -24px;
    width: 150px;
    height: 150px;
  }

  .promo__deco svg {
    width: 34px;
    height: 34px;
  }

  /* 카드가 낮아진 만큼 레일도 줄여 상단 프로필 줄과 겹치지 않게 (T-005) */
  .rail {
    bottom: 118px;
    gap: 12px;
  }
}

/* ---------- ~640px: 모바일 ---------- */
@media (max-width: 640px) {
  :root {
    --hero-promo-w: 232px;
    --hero-card-w: 158px;
  }

  .grid--shorts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--creators {
    grid-template-columns: minmax(0, 1fr);
  }

  .usp {
    grid-template-columns: minmax(0, 1fr);
  }

  .ticket {
    width: 100%;
  }

  .section__head {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .section__tabs {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__bottom {
    flex-wrap: wrap;
    gap: 10px;
  }

  .carousel__next {
    display: none;
  }

  .promo__deco {
    right: -22px;
    bottom: -20px;
    width: 122px;
    height: 122px;
  }

  .promo__deco svg {
    width: 28px;
    height: 28px;
  }

  /* 280px 높이 카드 안에서 상단 프로필 줄과 하단 캡션/상품 스트립 사이
     여유를 남기도록 레일을 축소·재배치 (T-005) */
  .rail {
    bottom: 112px;
    gap: 6px;
  }

  .rail__item svg {
    width: 18px;
    height: 18px;
  }
}