/* 홈 빌보드(메인 슬라이드): 글씨 없는 키아트 위에 HTML 문구를 얹는다.
   모바일은 4:5 카드로 인물(오른쪽)을 보여 주고 문구를 아래에, 태블릿은 넓은 카드에 문구를 왼쪽에, 데스크탑은 두 장씩 둔다.
   이전 hero2 슬라이드와 겹치지 않도록 이 파일의 클래스만 쓴다(public/js/index.js setupBillboard). */
.nox-billboard { position: relative; margin: 6px 0 22px; padding: 0 16px; }
.nox-billboard-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 18px;
}
.nox-billboard-track::-webkit-scrollbar { display: none; }
.nox-billboard-slide {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: #0b0b0d;
  color: #fff;
  text-decoration: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-tap-highlight-color: transparent;
}
.nox-billboard-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-mobile, 72%) 28%;
  transition: transform 6s ease-out;
}
.nox-billboard-slide.is-active .nox-billboard-art { transform: scale(1.04); }
.nox-billboard-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #08080a00 30%, #08080a8c 58%, #08080af5 100%);
  pointer-events: none;
}
.nox-billboard-copy { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; justify-items: start; }
.nox-billboard-kicker { margin: 0; padding: 5px 10px; border-radius: 999px; background: #ffffff1f; backdrop-filter: blur(8px); color: #fff; font: 700 11.5px/1.2 var(--c-sans, 'Pretendard Variable', Pretendard, sans-serif); letter-spacing: .02em; }
.nox-billboard-title { margin: 2px 0 0; color: #fff; font: 800 24px/1.28 var(--c-sans, 'Pretendard Variable', Pretendard, sans-serif); letter-spacing: -.035em; word-break: keep-all; text-shadow: 0 2px 14px #00000080; }
.nox-billboard-hook { margin: 0; display: -webkit-box; overflow: hidden; color: #ffffffd9; font: 500 13.5px/1.55 var(--c-sans, 'Pretendard Variable', Pretendard, sans-serif); word-break: keep-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nox-billboard-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; background: #f0323f; color: #fff; font: 700 14px/1 var(--c-sans, 'Pretendard Variable', Pretendard, sans-serif); box-shadow: 0 10px 24px -12px #f0323fcc; }
.nox-billboard-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.nox-billboard-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #ffffff38; cursor: pointer; transition: width .25s ease, background .25s ease; }
.nox-billboard-dot[aria-current="true"] { width: 22px; background: #fff; }
.nox-billboard-dot:focus-visible, .nox-billboard-nav:focus-visible, .nox-billboard-slide:focus-visible { outline: 2px solid #ff5268; outline-offset: 2px; }
.nox-billboard-nav { display: none; }

@media (min-width: 768px) {
  .nox-billboard { padding: 0 var(--catalog-gutter, 24px); }
  .nox-billboard-slide { aspect-ratio: auto; height: clamp(320px, 34vw, 460px); }
  .nox-billboard-art { object-position: var(--focus-desktop, center) 30%; }
  .nox-billboard-slide::after { background: linear-gradient(90deg, #08080af2 0%, #08080ab8 30%, #08080a00 60%), linear-gradient(180deg, #08080a00 70%, #08080a99 100%); }
  .nox-billboard-copy { left: clamp(28px, 4vw, 56px); right: auto; top: 50%; bottom: auto; width: min(44%, 520px); gap: 12px; transform: translateY(-50%); }
  .nox-billboard-title { font-size: clamp(28px, 3vw, 40px); }
  .nox-billboard-hook { font-size: 15px; }
  .nox-billboard-nav {
    position: absolute;
    z-index: 2;
    top: calc(50% - 30px);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid #ffffff29;
    border-radius: 50%;
    background: #0a0a0cb3;
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
  .nox-billboard-nav.prev { left: calc(var(--catalog-gutter, 24px) + 12px); }
  .nox-billboard-nav.next { right: calc(var(--catalog-gutter, 24px) + 12px); }
  .nox-billboard-nav:hover { background: #1c1c20; }
}
/* 데스크탑: 한 화면에 두 장. 카드가 좁아지므로 문구는 왼쪽 가운데 대신 아래쪽에 얹는다. */
@media (min-width: 1024px) {
  .nox-billboard-track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; }
  .nox-billboard-slide { height: clamp(300px, 26vw, 440px); }
  .nox-billboard-art { object-position: var(--focus-mobile, 72%) 30%; }
  .nox-billboard-slide::after { background: linear-gradient(180deg, #08080a00 38%, #08080a9e 66%, #08080af2 100%); }
  .nox-billboard-copy { left: 28px; right: 28px; top: auto; bottom: 26px; width: auto; gap: 9px; transform: none; }
  .nox-billboard-title { max-width: 30ch; font-size: clamp(22px, 1.9vw, 30px); }
  .nox-billboard-hook { max-width: 46ch; font-size: 14px; }
  .nox-billboard-cta { height: 40px; }
  /* 화살표는 카드 가장자리에 반쯤 걸쳐 문구를 가리지 않게 한다. */
  .nox-billboard-nav.prev { left: calc(var(--catalog-gutter, 24px) - 21px); }
  .nox-billboard-nav.next { right: calc(var(--catalog-gutter, 24px) - 21px); }
}
@media (prefers-reduced-motion: reduce) {
  .nox-billboard-art { transition: none; }
  .nox-billboard-slide.is-active .nox-billboard-art { transform: none; }
  .nox-billboard-track { scroll-behavior: auto; }
}