/* ILIAS Desktop — 홈 */

/* Hero (Atomy 스타일: 풀폭 캐러셀, 좌 텍스트 + 우 상품 이미지) */
.hero {
  position: relative; width: 100%;
  aspect-ratio: 2.96 / 1;
  max-height: clamp(240px, 60vh, 460px);
  overflow: hidden; background: #f5e9b8;
  border-radius: var(--r-lg);
  margin-top: 24px;
}
.hero .slides { position: absolute; inset: 0; }
.hero .slide {
  position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity .6s ease;
  display: flex; align-items: center;
}
.hero .slide.is-active { opacity: 1; z-index: 1; }
.hero-controls {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
}
.hero-controls button {
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.6); color: var(--ink); border: none;
  display: grid; place-items: center; font-size: 22px;
  backdrop-filter: blur(4px);
}
.hero-controls button:hover { background: #fff; }
.hero-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 3;
  display: flex; gap: 8px;
}
.hero-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.2); padding: 0;
}
.hero-dots button.is-active { background: var(--navy); width: 28px; border-radius: 5px; }

/* Section */
.section { padding: var(--pad-section) 0; }
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 20px;
}
.section-title h2 { font-size: 24px; }
.section-title .more { font-size: 15px; color: var(--ink-3); }
.section-title .more:hover { color: var(--navy); }

/* Grid — Atomy 기준 큼직한 배치 (1400px 컨테이너, 1280+ 4열) */
.grid { display: grid; gap: 20px; }
.grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(4, 1fr); }
}