/* 첫 화면 배너 슬라이드. 컴퓨터 2:1, 휴대폰 4:3(가운데 1600×1200만 보임). 장은 겹쳐 두고 천천히 바뀜(서서히 나타나기).
   배너 한 장의 그림·문구·바둑판 모양은 /lib/banner-view.css */
.home { padding-top: 6px; padding-bottom: 56px; }
.hero { position: relative; aspect-ratio: 2 / 1; max-height: calc(100dvh - 190px); min-height: 220px; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .035); }
.hero-track { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; display: block; background: var(--c, #e9e7e1); opacity: 0; transition: opacity 1.1s ease; color: inherit; }
.slide.on { opacity: 1; z-index: 1; }
/* 비었을 때: 아주 흐린 심볼 하나 */
.hero.empty { display: grid; place-items: center; }
.hero.empty::after { content: ''; width: 64px; height: 66px; opacity: .08; background: url(/favicon.svg) center / contain no-repeat; filter: grayscale(1); }

.hero-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 2px 0; }
.hero-bar[hidden] { display: none; }
.hero-caption { margin: 0; min-width: 0; font: 400 14px/1.6 var(--serif); color: var(--muted); word-break: keep-all; text-wrap: pretty; }
.hero-nav { display: flex; align-items: center; gap: 4px; flex: none; font: 500 11.5px var(--sans); letter-spacing: .1em; color: var(--faint); font-variant-numeric: tabular-nums; }
.hero-nav button { width: 32px; height: 32px; border: 0; background: none; font: 400 20px/1 var(--sans); color: var(--muted); cursor: pointer; border-radius: 50%; }
.hero-nav button:hover { color: var(--ink); background: rgba(0, 0, 0, .04); }
.hero-count { min-width: 54px; text-align: center; }
.hero-bar.single .hero-nav { display: none; }

@media (max-width: 640px) {
  .home { padding-top: 0; }
  .hero { aspect-ratio: 4 / 3; max-height: none; border-radius: 3px; }
  .hero-caption { font-size: 13px; }
  .hero-nav button { width: 28px; height: 28px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}