/**
 * /site/v2/inc/_mobile-menu.css
 * v2 모바일 햄버거 메뉴 drawer (Phase 5-8)
 * v2 (2026-05-14): Codex [16차] 권고 Option D — translateY + 메뉴 항목 stagger
 *
 * 동작:
 *   - .rubion-mobile-drawer: 위→아래 슬라이드 (블라인드 느낌)
 *   - .open: 표시 + 내부 항목 stagger fade-in
 *   - Phone Menu Icon 클릭 시 toggle
 *   - 열기 420ms / 닫기 280ms (반응성 ↑)
 */

.rubion-mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  min-height: 100vh;
  min-height: 100dvh; /* iOS 동적 viewport 대응 */
  background: rgb(15, 15, 15);
  color: #fff;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  /* 닫힘 상태 */
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  /* 닫기 transition (280ms · 빠르게) */
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.28s;
}
.rubion-mobile-drawer * { box-sizing: border-box; }

.rubion-mobile-drawer.open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  /* 열기 transition (420ms · 부드럽게) */
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* ── 상단: 로고 + 닫기 ── */
.rmd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* 항목 stagger 의 첫 단 (panel open 직후) */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0s;
}
.rmd-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.rmd-logo img {
  display: block;
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
}
.rmd-close {
  background: transparent;
  border: 0;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.18s ease;
}
.rmd-close:hover { background-color: rgba(255,255,255,0.06); }

/* ── 메뉴 리스트 + 항목 stagger ── */
.rmd-list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 24px 6px;
}
.rmd-list li {
  margin: 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.rmd-list a {
  display: block;
  padding: 14px 22px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: background-color 0.18s ease, color 0.18s ease;
  border-radius: 8px;
  margin: 4px 12px;
}
.rmd-list a:hover { background-color: rgba(255,255,255,0.05); }
.rmd-list a.is-current {
  color: #ff5fbf;
  background-color: rgba(255,95,191,0.08);
}

/* ── 하단: admin 톱니바퀴 ── */
.rmd-bottom {
  padding: 16px 22px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.rmd-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 22px;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.rmd-admin-link:hover {
  background-color: rgba(255,255,255,0.10);
  color: #fff;
}

/* ── stagger entry 활성 (drawer.open 시) ── */
/* panel 슬라이드 ~100ms 지난 후 내부 entry 시작 */
.rubion-mobile-drawer.open .rmd-top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}
.rubion-mobile-drawer.open .rmd-list li {
  opacity: 1;
  transform: translateY(0);
}
.rubion-mobile-drawer.open .rmd-list li:nth-child(1) { transition-delay: 0.16s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(2) { transition-delay: 0.21s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(3) { transition-delay: 0.26s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(4) { transition-delay: 0.31s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(5) { transition-delay: 0.36s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(6) { transition-delay: 0.41s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(7) { transition-delay: 0.46s; }
.rubion-mobile-drawer.open .rmd-list li:nth-child(8) { transition-delay: 0.51s; }
.rubion-mobile-drawer.open .rmd-bottom {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.50s;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .rubion-mobile-drawer,
  .rubion-mobile-drawer .rmd-top,
  .rubion-mobile-drawer .rmd-list li,
  .rubion-mobile-drawer .rmd-bottom {
    transition: none !important;
    transition-delay: 0s !important;
  }
}