/* Seamless Integrated Top Nav Bar (No isolated pill border, Streamlined GNB) */
.top-nav-integrated {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  padding: 14px 24px;
  /* 막대는 항상 밤색 불투명. 반투명+블러는 낮 페이지가 비쳐 회색이 된다. */
  background: #070220;
  border-bottom: 1px solid rgba(255, 77, 255, 0.12);
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner-seamless {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  transition: transform 0.25s ease, filter 0.25s ease;
  /* 로고는 띠에 따라 12종으로 교체되고 종횡비가 2.46~3.11로 제각각이다.
     박스를 여기서 고정해야 교체 때 헤더 높이와 탭 위치가 흔들리지 않고,
     이미지 로드 전 자리도 예약되어 CLS가 없다. */
  width: 145px;
  height: 50px;
  flex-shrink: 0;
}
.brand-logo-link:hover {
  transform: scale(1.04);
}
.brand-logo-img {
  /* 12종 중 개·용·양만 원화 종횡비가 2.46~2.48(나머지는 2.98~3.11)라
     max-height를 박스(50px)에 묶으면 이 세 종만 폭이 145px를 못 채우고
     좁아 보인다. max-height를 60px로 넉넉히 풀어 폭(max-width) 기준으로
     넘어가게 하면 세 종만 세로로 최대 ~4px 박스 밖(nav 패딩 14px 안)으로
     번진다 — 박스 자체(145x50)는 그대로라 헤더 높이·탭 위치는 안 흔들린다.
     (여백을 이미지에 덧대는 방식은 안 된다 — contain의 scale은 항상
     min(maxW/w, maxH/h)라 죽은 캔버스를 늘리면 그림이 더 작아질 뿐이다.) */
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(203, 35, 162, 0.5));
  display: block;
}
@media (max-width: 600px) {
  .brand-logo-link {
    width: 113px;
    height: 39px;
  }
}
.brand-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.text-pink { color: var(--pink-ink); }
.text-cyan { color: var(--neon-cyan); }
.mascot-ico { font-size: 16px; transition: transform 0.25s ease; }

/* Streamlined GNB Segmented Pill */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-nav-pill);
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 77, 255, 0.18);
}
@media (max-width: 860px) {
  .nav-links {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
}

.nav-tab-btn,
.nav-tab-link {
  background: transparent;
  border: none;
  color: var(--text-sub);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}
.nav-tab-btn:hover,
.nav-tab-link:hover {
  color: var(--text-pure);
  background: rgba(255, 77, 255, 0.15);
}
.nav-tab-btn.active,
.nav-tab-link.active {
  color: var(--text-on-neon);
  background: linear-gradient(135deg, #cb23a2 0%, #8338ec 100%);
  box-shadow: 0 0 14px rgba(203, 35, 162, 0.5);
  font-weight: 800;
}

/* 궁합 메뉴 — 연애·결혼 두 갈래. 롤오버·포커스로 열린다(≤1024px는 햄버거 드로어가 대신한다). */
.nav-tab-group { position: relative; display: inline-flex; }
.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 148px;
  margin-top: 6px;
  padding: 4px;
  background: var(--bg-nav-pill);
  border: 1px solid rgba(255, 77, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
  z-index: 70;
}
/* 링크와 목록 사이 틈을 메워 마우스를 옮기는 동안 닫히지 않게 한다 */
.nav-submenu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-tab-group:hover .nav-submenu,
.nav-tab-group:focus-within .nav-submenu,
.nav-tab-group.is-open .nav-submenu { display: flex; flex-direction: column; gap: 2px; }
.nav-submenu-item {
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.nav-submenu-item:hover { color: var(--text-pure); background: rgba(255, 77, 255, 0.15); }
.nav-submenu-item.active { color: var(--text-on-neon); background: linear-gradient(135deg, #cb23a2 0%, #8338ec 100%); }

/* Mobile Hamburger Button */
.btn-nav-hamburger {
  display: none;
  background: rgba(18, 8, 34, 0.85);
  border: 1px solid var(--border-box-purple);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.btn-nav-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--neon-pink);
  border-radius: 2px;
  transition: all 0.25s ease;
}
.btn-nav-hamburger.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.btn-nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}
.btn-nav-hamburger.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Nav Drawer */
.mobile-nav-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #080316;
  border-bottom: 1px solid var(--border-box-bright);
  padding: 16px 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.25s ease;
}
.mobile-nav-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.mobile-nav-links .m-link {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-pure);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.2s ease;
}
.mobile-nav-links .m-link:hover {
  background: rgba(203, 35, 162, 0.2);
  border-color: var(--neon-pink);
  transform: translateX(4px);
}
.mobile-nav-links .m-divider {
  height: 1px;
  background: var(--border-box-purple);
  margin: 4px 0;
}

/* 탭이 7개(홈·속마음·타이밍·궁합·재회·살롱·우주정거장)라 820px에서 이미 넘친다.
   가로 스크롤은 항목이 더 있다는 걸 알 수 없어 실패한다 — 햄버거로 넘긴다. */
@media (max-width: 1024px) {
  .nav-links { display: none !important; }
  .btn-nav-hamburger { display: flex; }
  .mobile-nav-drawer { display: block; }
}

/* Nav Actions Compact Buttons & Badges */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-nav-sub {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(203, 35, 162, 0.25) 0%, rgba(131, 56, 236, 0.25) 100%);
  border: 1px solid var(--neon-pink);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(203, 35, 162, 0.3);
  transition: all 0.2s ease;
}
.btn-nav-sub:hover,
.btn-nav-sub.active {
  background: linear-gradient(135deg, var(--neon-pink) 0%, var(--neon-purple) 100%);
  box-shadow: 0 0 16px rgba(203, 35, 162, 0.6);
  transform: scale(1.04);
}

.btn-nav-auth {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-box-purple);
  color: var(--text-pure);
  transition: all 0.2s ease;
}
.btn-nav-auth:hover,
.btn-nav-auth.active {
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.1);
  transform: scale(1.04);
}

/* 마이페이지 네온 뱃지 */
.badge-nav-my {
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(203, 35, 162, 0.3) 100%);
  border: 1px solid var(--neon-cyan);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.4), inset 0 0 8px rgba(0, 240, 255, 0.2);
  animation: pulseMyBadge 2.5s infinite ease-in-out;
  transition: all 0.25s ease;
}
.badge-nav-my:hover,
.badge-nav-my.active {
  background: linear-gradient(135deg, var(--neon-cyan) 0%, #ff7ad9 100%); /* 검정 글자가 분홍 끝에서도 4.5:1 */
  color: #000000;
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.8);
  transform: scale(1.06);
}
.badge-nav-my .badge-dot-live {
  font-size: 9px;
  background: var(--neon-yellow);
  color: #000;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

@keyframes pulseMyBadge {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3); }
  50% { box-shadow: 0 0 20px rgba(203, 35, 162, 0.6), 0 0 10px rgba(0, 240, 255, 0.5); }
}

.btn-action-pill {
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.btn-zodiac-shuffle {
  background: rgba(0, 240, 255, 0.12);
  border: 1px solid var(--neon-cyan);
  color: var(--text-pure);
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.25);
}
.btn-zodiac-shuffle:hover {
  background: var(--neon-cyan);
  color: var(--text-on-cyan);
  box-shadow: 0 0 18px var(--neon-cyan);
  transform: scale(1.04);
}

.btn-theme-toggle {
  background: rgba(255, 77, 255, 0.15);
  border: 1px solid var(--neon-pink);
  color: var(--text-pure);
}
.btn-theme-toggle:hover {
  background: var(--neon-pink);
  box-shadow: var(--glow-pink);
  transform: scale(1.04);
}

/* Hero Content Area inside Unified Wrapper - Ample Spacing */

.text-gradient-pink {
  background: linear-gradient(135deg, #ffffff 0%, #ff8adb 35%, #ff2e93 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 46, 147, 0.7));
  font-weight: 900;
  display: inline-block;
}

/* ==========================================================================
   COMMON CHARACTER BLEND BOX (테두리 없는 투명 캐릭터 렌더링)
   ill-*.webp는 처음부터 투명 배경으로 제작된 일러스트라 blend-mode/마스크로
   경계를 지울 필요가 없다 — 정사각 배경이 있던 mascot/rabbit_*.webp 시절의
   보정 장치였음 (누끼 WebP 교체 시 제거 대상, [[project_saju_heal7]] 참고).
   ========================================================================== */
.rabbit-blend-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  outline: none;
}
.blend-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.rabbit-blend-box.small { width: 50px; height: 50px; }
.rabbit-blend-box.medium { width: 110px; height: 110px; margin: 0 auto 12px; }
.rabbit-blend-box.small-card { width: 85px; height: 85px; flex-shrink: 0; }

/* 태블릿 */
@media (max-width: 1024px) {
  .top-nav-integrated { padding: 12px 18px; }
  .nav-inner-seamless { gap: 10px; }
  .badge-nav-my { font-size: 11px; padding: 6px 10px; }
}

/* 모바일 — 로고 · 별잔액 · 햄버거만 남긴다. 나머지는 드로어 안에 있다. */
@media (max-width: 620px) {
  .top-nav-integrated { padding: 10px 14px; }
  .nav-inner-seamless { gap: 8px; }
  .badge-nav-my { display: none; }
  .btn-nav-auth { display: none; }
  .btn-nav-star { padding: 6px 11px; font-size: 12px; }
  .nav-actions { gap: 6px; }
}


/* 공통 footer 정본은 layout.js. 인라인 이벤트 없이 CSP 아래에서 동작한다. */
.badge-admin-link:hover, .badge-admin-link:focus-visible { transform: scale(1.15) rotate(45deg); }
.ai-counselor-data-note { margin: 0; padding: 8px 14px; color: var(--text-sub); font-size: 12px; line-height: 1.6; text-align: justify; }