/*
  carousel.css
  스와이프형 카드 캐러셀. 자동 재생 없음 (디자인가이드 §11 안티패턴 금지 규정 준수).
  터치 스와이프 / 트랙패드 / 시프트+휠 스크롤로 넘긴다. 별도 JS 불필요.
*/

.carousel{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px){
  .carousel{
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 32px;
    padding: 4px 32px 20px;
    margin: 0 -32px;
    -webkit-overflow-scrolling: touch;
  }
}

.carousel::-webkit-scrollbar{ height: 8px; }
.carousel::-webkit-scrollbar-track{ background: var(--mist); border-radius: 999px; }
.carousel::-webkit-scrollbar-thumb{ background: var(--line-2); border-radius: 999px; }
.carousel::-webkit-scrollbar-thumb:hover{ background: var(--clay); }

.carousel-card{
  width: 100%;
  min-width: 0;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px){
  .carousel-card{ flex: 0 0 auto; width: 280px; scroll-snap-align: start; }
}

.carousel-card__media{
  position: relative;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius: var(--r);
}
.carousel-card__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px){
  .carousel-card__media{ padding-bottom: 133.333%; }
}

.carousel-card__body{ padding-top: 14px; }
.carousel-card__body .eyebrow{ margin-bottom: 6px; }
.carousel-card__body h3{ margin-bottom: 6px; }
.carousel-card__body p{
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: none;
}
.carousel-card__link{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--wood);
}
.carousel-card__link::after{
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--clay);
  border-right: 2px solid var(--clay);
  transform: rotate(45deg);
}

.carousel-hint{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.carousel-hint svg{ flex: none; color: var(--clay); }

/* ==========================================================================
   관련 시공서비스 카드 아키타입 1~6 — 페이지마다 카드 구성을 다르게 한다
   (히어로·CTA 아키타입과 같은 원칙: 색상·간격 토큰은 그대로, 구성만 바꾼다)
   ========================================================================== */

/* 카드 1 — /nseo-1 가로 리스트형 (원형 썸네일 + 텍스트) */
.carousel.rcard-1{ grid-template-columns: 1fr; }
.carousel.rcard-1 .carousel-card{ flex-direction: row; align-items: center; gap: 14px; }
.carousel.rcard-1 .carousel-card__media{
  flex: none;
  width: 72px;
  height: 72px;
  padding-bottom: 0;
  border-radius: 999px;
}
.carousel.rcard-1 .carousel-card__body{ padding-top: 0; min-width: 0; }
.carousel.rcard-1 .carousel-card__body p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 768px){
  .carousel.rcard-1 .carousel-card{ width: 320px; }
}

/* 카드 2 — /nseo-2 포스터형 (이미지 위 텍스트 오버레이) */
.carousel.rcard-2 .carousel-card{ position: relative; border-radius: var(--r); overflow: hidden; color: var(--white); }
.carousel.rcard-2 .carousel-card__media{ position: absolute; inset: 0; height: auto; padding-bottom: 0; border-radius: 0; z-index: 0; }
.carousel.rcard-2 .carousel-card__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, hsl(24 30% 12% / 0), hsl(24 30% 12% / .85));
}
.carousel.rcard-2 .carousel-card__body{
  position: relative;
  z-index: 1;
  min-height: 220px;
  padding: 120px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.carousel.rcard-2 .carousel-card__body .eyebrow{ color: hsl(30 25% 94%); }
.carousel.rcard-2 .carousel-card__body h3{ color: var(--white); }
.carousel.rcard-2 .carousel-card__body p{ color: hsl(30 20% 85%); }

/* 카드 3 — /nseo-3 이미지 없는 텍스트 중심형 */
.carousel.rcard-3 .carousel-card__media{ display: none; }
.carousel.rcard-3 .carousel-card{ background: var(--mist); border-radius: var(--r); padding: 20px; }
.carousel.rcard-3 .carousel-card__body{ padding-top: 0; }
.carousel.rcard-3 .carousel-card__body h3{ font-size: 20px; }

/* 카드 4 — /nseo-4 와이드 이미지형 (16:9 상단 이미지) */
.carousel.rcard-4 .carousel-card__media{ padding-bottom: 56.25%; }
@media (min-width: 768px){
  .carousel.rcard-4 .carousel-card{ width: 320px; }
  .carousel.rcard-4 .carousel-card__media{ padding-bottom: 56.25%; }
}

/* 카드 5 — /nseo-5 가로 반전형 (텍스트 좌 / 정사각 이미지 우) */
.carousel.rcard-5{ grid-template-columns: 1fr; }
.carousel.rcard-5 .carousel-card{ flex-direction: row-reverse; align-items: center; gap: 14px; }
.carousel.rcard-5 .carousel-card__media{ flex: none; width: 96px; height: 96px; padding-bottom: 0; }
.carousel.rcard-5 .carousel-card__body{ padding-top: 0; min-width: 0; }
@media (min-width: 768px){
  .carousel.rcard-5 .carousel-card{ width: 320px; }
}

/* 카드 6 — /nseo-6 다크 패널형 */
.carousel.rcard-6 .carousel-card{ background: var(--wood-deep); border-radius: var(--r); padding: 14px; color: var(--white); }
.carousel.rcard-6 .carousel-card__body{ padding-top: 12px; }
.carousel.rcard-6 .carousel-card__body .eyebrow{ color: hsl(30 25% 85%); }
.carousel.rcard-6 .carousel-card__body h3{ color: var(--white); }
.carousel.rcard-6 .carousel-card__body p{ color: hsl(30 18% 78%); }