/* ds/effects.css — 원본 데이터스케쳐스 사이트의 배경/인터랙션 이펙트 (기존과 동일 재현)
   토큰은 tokens.css 의 --ds-* 를 그대로 사용. 오로라/마퀴/리빌/블러핑 등.
   ====================================================================== */

/* ─── Aurora (배경 오로라 그로우) ─── */
.bg-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-aurora::before, .bg-aurora::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.5; mix-blend-mode: multiply;
}
.bg-aurora::before {
  width: 60vw; height: 60vw; left: -10vw; top: -10vw;
  background: radial-gradient(circle, var(--ds-brand-soft), transparent 60%);
  animation: aurora-1 22s ease-in-out infinite;
}
.bg-aurora::after {
  width: 50vw; height: 50vw; right: -10vw; top: 30vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--ds-brand) 18%, transparent), transparent 60%);
  animation: aurora-2 28s ease-in-out infinite;
}
@keyframes aurora-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(8vw,4vh) scale(1.15); } }
@keyframes aurora-2 { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-6vw,6vh) scale(1.2); } }

/* ─── Marquee (무한 스크롤 스트립) ─── */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; gap: 56px; padding-right: 56px; animation: marquee 40s linear infinite; will-change: transform; align-items: center; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__item { font-family: var(--font-head); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ds-text); display: inline-flex; align-items: center; gap: 24px; flex-shrink: 0; }
.marquee__item::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-brand); }

/* ─── Reveal (스크롤 리빌) ─── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; }
.reveal.is-in { opacity: 1 !important; transform: translateY(0) !important; }
.reveal[data-reveal-delay="100"] { transition-delay: 100ms; }
.reveal[data-reveal-delay="200"] { transition-delay: 200ms; }
.reveal[data-reveal-delay="300"] { transition-delay: 300ms; }
.reveal[data-reveal-delay="400"] { transition-delay: 400ms; }
.reveal[data-reveal-delay="500"] { transition-delay: 500ms; }
.reveal[data-reveal-delay="600"] { transition-delay: 600ms; }
.reveal[data-reveal-delay="700"] { transition-delay: 700ms; }
.reveal[data-reveal-delay="800"] { transition-delay: 800ms; }

/* ─── BlurWord (헤딩 블러 인) ─── */
.blur-word { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(20px); transition: opacity 0.85s var(--ease-out), filter 0.85s var(--ease-out), transform 0.85s var(--ease-out); will-change: opacity, filter, transform; }
.blur-word.is-in { opacity: 1; filter: blur(0); transform: translateY(0); }

/* ─── Float (부유) ─── */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float-y { animation: float-y 6s ease-in-out infinite; }

/* ─── Glow dot ─── */
.glow-dot { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.35; pointer-events: none; }

/* ─── 위키 페이지 3-컬럼 레이아웃 (scope tree + content + TOC) 반응형 ─── */
.wiki-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  grid-template-areas: "scope doc toc";
  gap: 32px;
  align-items: start;
}
.wiki-layout > .wiki-scope { grid-area: scope; min-width: 0; }
.wiki-layout > .ds-doc     { grid-area: doc;  min-width: 0; width: 100%; }
.wiki-layout > .wiki-toc   { grid-area: toc;  min-width: 0; }
/* 사이드바(scope tree) 고정 컬럼 — 데스크톱 sticky, 모바일 드로어(아래 @media 에서 오버라이드) */
.wiki-scope {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow: auto;
  padding: 8px 0;
}
/* 콘텐츠가 중간 컬럼 폭을 넘어 TOC 로 넘치지 않도록 제한 (760px 고정 대신 컬럼에 맞춤) */
.wiki-layout .ds-doc { max-width: 100%; margin: 0; }
/* TOC 접힘 상태: 기본 열림 */
.wiki-toc__nav { display: block; }
.wiki-toc.is-collapsed .wiki-toc__nav { display: none; }
/* 중간 화면(≤1200px): TOC 컬럼 축소해 본문 폭 확보 — 토글 버튼만 남김 */
@media (max-width: 1200px) {
  .wiki-layout { grid-template-columns: 210px minmax(0, 1fr) 48px; grid-template-areas: "scope doc toc"; }
}
/* 모바일(≤900px): 단일 컬럼. 목차는 본문 상단(제목 하단)에 항상 펼침, 트리는 맨 하단에 */
@media (max-width: 900px) {
  .wiki-layout { display: flex; flex-direction: column; }
  .wiki-layout > .ds-doc     { order: 1; }
  .wiki-layout > .wiki-toc   { display: none; }   /* 모바일은 본문 상단의 wiki-toc-mobile 사용 */
  /* 목차(본문 상단, 제목 하단) — 페이지 타이틀 아래 항상 펼침 */
  .wiki-toc-mobile { display: block !important; }
  /* 트리: 맨 하단 static 블록 */
  .wiki-layout > .wiki-scope {
    order: 3; width: 100%;
    position: static; top: auto; max-height: none; overflow: visible;
    padding: 28px 0 0; margin-top: 32px;
    border-top: 1px solid var(--ds-line);
  }
}

/* ─── 모바일 내비 (헤더 반응형) ─── */
@media (max-width: 900px) {
  .site-header__nav.is-mobile-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: var(--ds-bg); border-bottom: 1px solid var(--ds-line);
    padding: 12px 24px 20px; gap: 4px; z-index: 99;
    box-shadow: var(--sh-overlay);
  }
  .site-header__nav.is-mobile-open .site-header__nav-wrap { width: 100%; }
  .site-header__nav.is-mobile-open .site-header__nav-item { width: 100%; justify-content: flex-start; padding: 12px 14px; }
  .site-header__nav.is-mobile-open .site-header__submenu { position: static; transform: none; opacity: 1; pointer-events: auto; box-shadow: none; border: none; padding: 0 0 0 16px; }
  body.nav-open { overflow: hidden; }
}