/* =====================================================================
   Components  (값은 Figma design_context 정밀 감사 기준 — 1px 일치)
   ===================================================================== */

/* ---------------- 섹션 헤더 ---------------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.section-title {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  color: #000;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking);
}
.section-title--sm {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking);
}
.more-link {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  color: var(--orange-65);                   /* #FF5F20 */
}
.more-link::after { content: " ›"; }
.more-link:hover { color: var(--orange-50); }

/* ---------------- 히어로 + 타일 ---------------- */
.hero { display: flex; gap: 24px; }

.hero__carousel {
  position: relative;
  width: 792px;
  height: 380px;
  border-radius: var(--radius-lg);           /* 16px */
  overflow: hidden;
  background: var(--neutral-95);             /* #f7f7f7 (디자인: 빈 배너 플레이스홀더) */
  flex: 0 0 792px;
}
.hero__track { display: flex; height: 100%; transition: transform .45s ease; }
.hero__slide { position: relative; flex: 0 0 100%; height: 100%; background: var(--neutral-95); }
.hero-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 44px 52px;
  background: #f7f4ef;
  color: var(--neutral-10);
}
.hero-fallback__copy {
  position: relative;
  z-index: 2;
  flex: 0 0 47%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero-fallback__copy em {
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--orange-65);
  letter-spacing: var(--tracking);
}
.hero-fallback__copy strong {
  margin-top: 12px;
  font-size: var(--fs-title-xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  word-break: keep-all;
}
.hero-fallback__copy span {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--neutral-40);
  line-height: 1.65;
  word-break: keep-all;
}
.hero-fallback__media {
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.58);
}
.hero-fallback__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-fallback__media--contain {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 22px 22px 0;
}
.hero-fallback__media--contain img { width: auto; max-width: 100%; object-fit: contain; }
.hero__nav {
  position: absolute;
  top: 170px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.hero__nav img { width: 24px; height: 24px; }
.hero__nav--prev { left: 20px; }
.hero__nav--next { right: 20px; }
.hero__carousel--fallback .hero__nav {
  top: auto;
  bottom: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 18px rgba(23,23,23,.08);
}
.hero__pager {
  position: absolute;
  right: 12px; bottom: 12px;
  height: 36px;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,.3);
  color: var(--c-white);
  font-size: 13px; font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking);
}

.tiles {
  width: 384px;
  height: 380px;
  flex: 0 0 384px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 16px;
}
.tile {
  position: relative;
  min-height: 116px;
  background: var(--neutral-95);
  border-radius: var(--radius-lg);           /* 16px */
  padding: 12px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.tile:hover { box-shadow: var(--shadow-card); }
.tile__title {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
  color: var(--c-black);
}
.tile__thumb {
  position: absolute;
  right: 8px; top: 28px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(189,189,189,.4);
  overflow: hidden;
}
.tile__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__thumb--contain { background: #fff; }
.tile__thumb--contain img { object-fit: contain; padding: 6px; }

/* ---------------- 상품 카드 ---------------- */
.product-grid { display: grid; gap: 24px; }
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }
.product-grid--3 { grid-template-columns: repeat(3, 1fr); }

.product-card { display: flex; flex-direction: column; transition: transform .28s ease; }
.product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow .28s ease;
}
.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
  will-change: transform;
}
/* 자연스러운 호버 강조: 살짝 떠오르며 부드러운 그림자 + 이미지 천천히 확대 + 상품명 강조 */
@media (hover: hover) {
  .product-card:hover { transform: translateY(-6px); }
  .product-card:hover .product-card__media { box-shadow: 0 12px 28px rgba(23, 23, 23, .12); }
  .product-card:hover .product-card__media img { transform: scale(1.06); }
  .product-card:hover .product-card__name { color: var(--orange-65); }
  .product-card__name { transition: color .2s ease; }
}
.badge-new {
  position: absolute;
  top: 8px; right: 8px;
  padding: 6px 9px;
  border-radius: 6.795px;
  background: var(--orange-65);              /* #FF5F20 */
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
}
.badge-rank {
  position: absolute;
  top: 0; right: 22px;
  width: 58px; height: 80px;
  background: url("../../img/fdm/ribbon-rank.svg") no-repeat center / contain;
  color: var(--c-white);
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
}

.product-card__info { margin-top: 14px; display: flex; flex-direction: column; }
.cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border: 1px solid var(--neutral-90);
  border-radius: var(--radius-xs);
  background: var(--neutral-100);
  font-size: var(--fs-md);
  color: #222;
  transition: background .15s, border-color .15s;
}
.cart-btn img { width: 24px; height: 24px; }
.cart-btn:hover { background: var(--neutral-90); border-color: var(--neutral-80); }

.product-card__brand { margin-top: 8px; font-size: var(--fs-sm); line-height: var(--lh-body); color: #505050; }
.product-card__name { margin-top: 8px; font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-body); color: #222; }

.price { margin-top: 8px; }
.price__origin { font-size: 16px; line-height: 1.5; color: #b5b5b5; text-decoration: line-through; }
.price__main { display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.price__rate { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-heading); color: #fa622f; }
.price__final { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-heading); color: #222; }

.rating { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rating img { width: 24px; height: 24px; }
.rating__score { font-size: var(--fs-sm); line-height: var(--lh-body); color: #111; }
.rating__count { color: #111; }
.product-card__ship { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--neutral-50); }

/* ---------------- 베스트 탭 ---------------- */
.best .section-head { margin-bottom: 24px; }
.tabs { display: flex; gap: 12px; margin-bottom: 32px; }
.tab {
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--neutral-100);
  color: #333;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  transition: background .15s, color .15s;
}
.tab:hover { background: var(--neutral-90); }
.tab.is-active {
  background: rgba(234,97,27,.2);
  color: var(--orange-60);
}

/* ---------------- 동물칩 CTA 배너 (792 / 384 비대칭) ---------------- */
.chip-banners { display: flex; gap: 24px; }
.chip-card {
  position: relative;
  min-height: 400px;
  border-radius: var(--radius-lg);           /* 16px */
  background: #d9d9d9;
  color: var(--c-black);
  overflow: hidden;
}
.chip-card:nth-child(1) { flex: 0 0 792px; padding: 43px 0 0 39px; }
.chip-card:nth-child(2) { flex: 0 0 384px; padding: 24px 0 0 24px; }
.chip-card__label { display: block; font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-black); }
.chip-card__title {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking);
  color: var(--c-black);
}
.chip-card__btn {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-pill);
  background: var(--c-white);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--c-black);
  transition: transform .15s;
}
.chip-card:hover .chip-card__btn { transform: translateX(4px); }

/* ---------------- 베스트 리뷰 ---------------- */
.reviews__viewport { position: relative; overflow: hidden; }
.reviews__track { display: flex; gap: 24px; transition: transform .45s ease; }
.review-card { flex: 0 0 384px; width: 384px; height: 550px; }
.review-card__thumb {
  width: 384px; height: 384px;
  background: var(--neutral-95);
  border-radius: var(--radius-sm);
}
.review-card__name { margin-top: 20px; font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-heading); color: #222; }
.review-card__meta { display: flex; align-items: center; gap: 5.447px; margin-top: 8px; }
.review-card__id { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--c-black); }
.review-card__stars { display: flex; }
.review-card__stars img { width: 21.787px; height: 21.787px; }
.review-card__body {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-black);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reviews__nav {
  position: absolute;
  top: 172px; right: 8px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.reviews__nav img { width: 10px; height: 20px; }

/* ---------------- 라인 배너 ---------------- */
.line-banner {
  height: 120px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--orange-65), var(--orange-70));
  display: flex; align-items: center; justify-content: center;
}
.line-banner__text {
  color: var(--c-white);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking);
}

/* ---------------- 토스트 ---------------- */
.toast {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(23,23,23,.92);
  color: #fff;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- CS 플로팅 버튼 (Figma 697:22308) ---------------- */
.cs-fab {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cs-fab__circle {
  position: relative;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: #fae100;                         /* 카카오 옐로우 */
  color: #532300;
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cs-fab__circle::after {                        /* 말풍선 꼬리 */
  content: "";
  position: absolute;
  left: 16px; bottom: -4px;
  width: 13px; height: 13px;
  background: #fae100;
  border-radius: 0 0 0 3px;
  transform: rotate(45deg);
}
.cs-fab:hover .cs-fab__circle { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
.cs-fab__tip {
  padding: 4px 8px;
  background: var(--neutral-95);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--neutral-20);
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .cs-fab { display: none; }
}