/* seo_django_ui — 동작에 꼭 필요한 최소 CSS.
 *
 * 여기 있는 것은 "이게 없으면 기능이 안 되는" 규칙뿐이다.
 * 색·여백·글꼴·테두리는 하나도 정하지 않는다 — 그건 프로젝트 몫이다.
 * 덮어쓰려면 프로젝트 SCSS 에서 같은 선택자를 다시 쓰면 된다.
 *
 * 값 조정은 대부분 커스텀 속성으로 된다:
 *   :root { --ui-reveal-distance: 40px; --ui-duration: .5s; }
 *
 * ★ 초기 숨김 규칙은 전부 html[data-ui-ready] 안에 있다.
 *   JS 가 죽으면 이 속성이 안 붙어서 아무것도 감춰지지 않는다.
 */

:root {
  --ui-duration: .45s;
  --ui-ease: cubic-bezier(.22, .61, .36, 1);
  --ui-reveal-distance: 24px;
}

/* ── sticky-header ──────────────────────────────────────────
   is-stuck / is-hidden 은 JS 가 붙인다. 그림자·배경은 프로젝트가 준다. */
[data-ui-sticky-header] {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform var(--ui-duration) var(--ui-ease);
}

[data-ui-sticky-header].is-hidden {
  transform: translateY(-100%);
}

/* ── reveal ─────────────────────────────────────────────────
   data-ui-reveal-item 은 JS 가 붙인다. 그래서 JS 가 없으면 안 감춰진다. */
[data-ui-ready] [data-ui-reveal-item] {
  opacity: 0;
  transform: translateY(var(--ui-reveal-distance));
  transition: opacity var(--ui-duration) var(--ui-ease),
              transform var(--ui-duration) var(--ui-ease);
}

[data-ui-ready] [data-ui-reveal-item].is-visible {
  opacity: 1;
  transform: none;
}

/* ── scroll-top ─────────────────────────────────────────────
   위치·모양은 프로젝트가 정한다. 여기서는 여닫는 것만. */
[data-ui-scroll-top] {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ui-duration) var(--ui-ease),
              visibility var(--ui-duration);
}

[data-ui-scroll-top].is-visible {
  opacity: 1;
  visibility: visible;
}

/* ── marquee ────────────────────────────────────────────────
   JS 가 목록을 두 벌로 복제하고 --ui-marquee-distance(한 벌 너비)를 준다.
   그만큼 왼쪽으로 밀면 두 번째 벌이 첫 번째 벌 자리에 정확히 겹쳐서,
   0 으로 되돌아가는 순간이 보이지 않는다. */
[data-ui-marquee] {
  overflow: hidden;
}

[data-ui-marquee] > * {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-ui-marquee][data-ui-marquee-ready] > * {
  animation: ui-marquee var(--ui-marquee-duration, 30s) linear infinite;
  animation-direction: var(--ui-marquee-direction, normal);
}

/* 마우스를 올리면 멈춘다 — 로고를 눌러야 할 때만 붙인다. */
[data-ui-marquee][data-pause-on-hover]:hover > * {
  animation-play-state: paused;
}

@keyframes ui-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--ui-marquee-distance, 0px) * -1)); }
}

/* 동작 줄이기: 흐르지 않고 손으로 미는 목록이 된다. */
[data-ui-marquee][data-ui-marquee-static] {
  overflow-x: auto;
}

/* ── carousel ───────────────────────────────────────────────
   실제 가로 스크롤 + scroll-snap. 스와이프는 브라우저가 해 준다. */
[data-ui-carousel] {
  position: relative;
}

[data-ui-carousel-track] {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;             /* 스크롤바는 점 네비로 대신한다 */
  -ms-overflow-style: none;
}

[data-ui-carousel-track]::-webkit-scrollbar {
  display: none;
}

[data-ui-carousel-track] > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 화살표·점의 모양은 프로젝트가 정한다. 여기서는 상태만. */
[data-ui-carousel-dot].is-current {
  opacity: 1;
}

[data-ui-carousel-dot] {
  opacity: .4;
  transition: opacity var(--ui-duration) var(--ui-ease);
}

/* ── lightbox ───────────────────────────────────────────────
   확대 화면은 화면 전체를 덮어야 하므로 위치와 크기만 정한다. */
[data-ui-lightbox-item] {
  cursor: zoom-in;
}

[data-ui-lightbox-overlay] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin;
  background: rgba(0, 0, 0, .82);
}

/* ★ 이 한 줄이 없으면 닫아도 오버레이가 남는다.
   브라우저의 기본 [hidden] 규칙은 요소 선택자 하나만큼의 무게라,
   바로 위의 display:flex 가 이겨 버린다. 화면은 그대로인데 클릭만
   가로채는 유령 층이 되어 원인을 찾기 매우 어렵다.
   같은 선택자에 [hidden] 을 더해 확실히 이기게 한다. */
[data-ui-lightbox-overlay][hidden] {
  display: none;
}

[data-ui-lightbox-frame] {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

[data-ui-lightbox-overlay] img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

[data-ui-lightbox-caption] {
  color: #fff;
  text-align: center;
  font-size: .9rem;
}

[data-ui-lightbox-overlay] button {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  padding: .5rem 1rem;
  cursor: pointer;
}

[data-ui-lightbox-overlay] button[hidden] {
  display: none;
}

[data-ui-lightbox-close] { top: 1rem; right: 1rem; }
[data-ui-lightbox-prev]  { left: .5rem;  top: 50%; transform: translateY(-50%); }
[data-ui-lightbox-next]  { right: .5rem; top: 50%; transform: translateY(-50%); }

/* 확대 중에는 뒤 본문이 같이 스크롤되지 않게 */
html[data-ui-lightbox-open] {
  overflow: hidden;
}

/* ── 동작 줄이기 ────────────────────────────────────────────
   OS 접근성 설정을 켠 사용자에게는 움직임을 없앤다.
   JS 도 같은 판단을 하지만, CSS 쪽도 막아 둔다. */
@media (prefers-reduced-motion: reduce) {
  [data-ui-sticky-header],
  [data-ui-ready] [data-ui-reveal-item],
  [data-ui-scroll-top],
  [data-ui-carousel-dot] {
    transition: none;
  }

  [data-ui-marquee][data-ui-marquee-ready] > * {
    animation: none;
  }
}