@charset "UTF-8";
/* =============================================================
   /css/main.css — 메인 페이지 전용
   ============================================================= */

/* 배너 */
.banner { margin-top: var(--sp-3); border-radius: var(--r-card); overflow: hidden; }
.banner img { width: 100%; display: block; }

/* 빠른메뉴 */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin: var(--sp-5) 0; }
.quick a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 0; background: var(--g100); border-radius: var(--r-card);
    font-size: var(--fs-13); font-weight: 600; color: var(--g700);
}
.quick a i { font-size: 24px; color: var(--blue); }

/* 섹션 */
.sec { margin: var(--sp-6) 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.sec-h h2 { font-size: var(--fs-18); font-weight: 700; }
.sec-h h2 i { color: var(--orange); font-size: 18px; vertical-align: -2px; }
.sec-h .more { font-size: var(--fs-13); color: var(--g500); }

/* 가로 스크롤 캐러셀 (마감임박) */
.hscroll {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 0 var(--sp-2);
    scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .card { flex: 0 0 78%; scroll-snap-align: start; }

/* 캐러셀 좌우 버튼 (모바일: 스와이프 / PC: 마우스 드래그 불가 → 버튼 노출) */
.hscroll-wrap { position: relative; }
.hs-nav {
    display: none;   /* 모바일은 스와이프로 충분, PC에서만 버튼 노출 */
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2; width: 36px; height: 36px; border-radius: 50%;
    background: var(--white); color: var(--g700);
    align-items: center; justify-content: center; font-size: 18px;
    border: 1px solid var(--g100); box-shadow: 0 2px 8px rgba(17, 24, 39, .15);
}
.hs-nav:hover { background: var(--g100); }
.hs-nav:disabled { opacity: .3; pointer-events: none; }
.hs-prev { left: -14px; }
.hs-next { right: -14px; }

/* 빈 상태 */
.empty { padding: var(--sp-10) 0; text-align: center; color: var(--g400); font-size: var(--fs-14); }
.empty i { font-size: 36px; display: block; margin-bottom: var(--sp-2); }

/* 반응형 */
@media (min-width: 768px) {
    .hscroll .card { flex-basis: 44%; }
    .quick { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1280px) {
    .hscroll .card { flex-basis: 23.5%; }
    .hs-nav { display: flex; }
    .hs-prev { left: -18px; }
    .hs-next { right: -18px; }
}