@charset "utf-8";
  
/* Carousel (snap) */
.c-carousel {
    padding: var(--space-3);
    padding-top: var(--space-4);
    --carousel-item-basis: 100%;
    --carousel-gap: 0px;
    --carousel-snap: mandatory;
    --carousel-dot: rgba(0,0,0,0.22);
    --carousel-dot-active: rgba(0,0,0,0.7);
  }
  
  .c-carousel__viewport{
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    position: relative;
    background: #f4f4f4;
    aspect-ratio: 4 / 5;
  }
  
  @media (min-width: 480px){
    .c-carousel__viewport{ aspect-ratio: 16 / 9; }
  }
  
  .c-carousel__track{
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    position: relative;
    scroll-snap-type: x var(--carousel-snap);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--carousel-gap);
  }
  .c-carousel__track::-webkit-scrollbar{ display:none; }
  
  .c-carousel__item{
    flex: 0 0 var(--carousel-item-basis);
    width: var(--carousel-item-basis);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    background-color: #ddd; /* 이미지 로딩 전 배경색 */
  }
  
  /* Slide Contents (Hero 등에서 사용) */
  .c-carousel__bg{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }
  .c-carousel__content{
    position: absolute;
    left: 20px; right: 20px; bottom: 30px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 1;
    pointer-events: none;
  }
  .c-carousel__content a{ pointer-events: auto; }
  
  .c-carousel__title{ margin: 0 0 8px; font-size: 24px; font-weight: 800; line-height: 1.2; }
  .c-carousel__desc{ margin: 0 0 16px; font-size: 15px; opacity: 0.9; }
  
  /* Controls (Root 아래) */
  .c-carousel__controls{
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  
  .c-carousel__btn{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .c-carousel__btn:active{ transform: scale(0.96); }
  .c-carousel__btn.is-disabled{ opacity: 0.35; }
  
  .c-carousel__btn .material-symbols-outlined{ font-size: 22px; }
  
  .c-carousel__dots{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .c-dot{
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--carousel-dot);
    transition: width .2s, background .2s;
  }
  .c-dot.is-active{
    width: 16px;
    background: var(--carousel-dot-active);
    border-radius: 6px;
  }
  
  .c-carousel__page{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    color: var(--sub);
    white-space: nowrap;
  }
  .c-carousel__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .c-carousel__toggle .material-symbols-outlined{ font-size: 20px; }
  
  /* ===== c-carousel: Cards variant (page-based pagination) ===== */
  /* 카드형은 화면 폭에 따라 "한 페이지당 몇 장"이 바뀌므로 CSS에서 규칙을 선언합니다. */
  .c-carousel.is-cards{
    /* track 성격 */
    --carousel-snap: proximity;
    --carousel-gap: 10px;
  
    /* JS가 읽어갈 값(중요): 한 페이지당 카드 수 */
    --cards-per-page: 1;
  
    /* 카드 폭(브레이크포인트마다 조절) */
    --carousel-item-basis: 72%;
  }
  
  /* >= 520px: 2장 */
  @media (min-width: 520px){
    .c-carousel.is-cards{
      --cards-per-page: 2;
      --carousel-item-basis: 48%;
    }
  }
  
  /* >= 900px: 3장 */
  @media (min-width: 900px){
    .c-carousel.is-cards{
      --cards-per-page: 3;
      --carousel-item-basis: 32%;
    }
  }