/* The homepage photo carousel. Scoped to preserve all existing sections. */
.hero.hero-carousel {
  margin-top: var(--header-h);
  min-height: 0;
  height: auto;
  aspect-ratio: 1672 / 941;
  padding: 0;
  background: #281a11;
  isolation: isolate;
  container-type: inline-size;
}
.hero.hero-carousel::before,
.hero.hero-carousel::after { display: none; }
.hero-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.hero-track { position: relative; height: 100%; width: 100%; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 1000ms ease, visibility 0s 1000ms; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 1000ms ease; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-position, center); }
.hero-slide.has-caption::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,12,7,.38), transparent 56%); pointer-events: none; }
.hero-caption { position: absolute; z-index: 1; top: 45%; left: clamp(62px, 7.5cqw, 110px); transform: translateY(-50%); width: 41%; color: #fff8ef; text-shadow: 0 2px 20px rgba(0,0,0,.28); }
.hero-caption-label { display: block; margin-bottom: 24px; font-size: clamp(14px, 1.15cqw, 18px); font-weight: 600; letter-spacing: .05em; color: #eedccc; }
.hero-caption-title { margin: 0; font-family: Georgia, 'Noto Serif KR', 'Batang', serif; font-size: clamp(28px, 3.5cqw, 44px); font-weight: 500; letter-spacing: -.055em; line-height: 1.42; white-space: pre-line; }
.hero-caption-brand { margin: 28px 0 0; font-size: 15px; letter-spacing: .08em; color: #e8d8c8; }
.hero-controls[hidden] { display: none; }
.hero-arrow { position: absolute; z-index: 3; top: 50%; transform: translateY(-50%); width: 48px; height: 60px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); background: rgba(25,15,10,.28); color: #fff8ef; cursor: pointer; border-radius: 4px; transition: background .2s; }
.hero-prev { left: 18px; }
.hero-next { right: 18px; }
.hero-arrow:hover, .hero-play:hover { background: rgba(148,31,26,.88); }
.hero-pagination { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; padding: 0 6px 0 15px; min-height: 48px; border: 1px solid rgba(255,248,239,.22); border-radius: 28px; background: rgba(28,18,12,.82); color: #fff8ef; }
.hero-dots { display: flex; align-items: center; }
.hero-dot { position: relative; display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.hero-dot::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 6px; background: rgba(255,248,239,.48); transition: width .25s, background .25s; }
.hero-dot[aria-current='true']::before { width: 24px; background: #fff8ef; }
.hero-count { display: flex; gap: 7px; margin-left: 12px; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; color: #d6c9bd; }
.hero-count strong { font-weight: 600; color: #fff8ef; }
.hero-play { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin-left: 8px; border: 0; border-radius: 50%; background: transparent; color: #fff8ef; font-size: 18px; cursor: pointer; }
.hero-controls button:focus-visible { outline: 2px solid #fff8ef; outline-offset: 3px; }
@media (max-width: 760px) {
  .hero.hero-carousel { margin-bottom: 56px; overflow: visible; }
  .hero-caption { left: 6%; top: 46%; width: 46%; }
  .hero-caption-label { margin-bottom: 9px; font-size: 14px; }
  .hero-caption-title { font-size: clamp(17px, 3.8cqw, 29px); line-height: 1.45; }
  .hero-caption-brand { display: none; }
  .hero-arrow { width: 44px; height: 44px; top: auto; bottom: -50px; transform: none; border: 0; background: transparent; color: #281a11; }
  .hero-prev { left: 8px; }
  .hero-next { right: 8px; }
  .hero-pagination { bottom: -52px; min-height: 48px; padding: 0; border: 0; background: transparent; color: #281a11; }
  .hero-dot { width: 26px; }
  .hero-dot::before { background: #b7a89c; }
  .hero-dot[aria-current='true']::before { width: 19px; background: #b52a24; }
  .hero-count { margin-left: 5px; gap: 4px; color: #766355; }
  .hero-count strong { color: #281a11; }
  .hero-play { color: #281a11; margin-left: 3px; }
  .hero-arrow:hover, .hero-play:hover { background: #f3e6dd; }
  .hero-controls button:focus-visible { outline-color: #941f1a; }
}
@media (max-width: 400px) {
  .hero-dot { width: 21px; }
  .hero-count { display: none; }
  .hero-caption-label { margin-bottom: 5px; }
  .hero-caption-title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active, .hero-dot::before, .hero-arrow { transition: none; }
}