/* quiga-chrome.css — 블로그 헤더/푸터를 라이브 quiga.io 다크 디자인과 통일 (2026-07-13)
 * 방식: 기존 wz-* 마크업/JS/반응형/i18n을 보존하고 색·배경·폰트만 오버라이드(마지막 로드).
 * 팔레트(라이브 globals.css): bg #09090b · elevated #18181b · gold #ffb830/#e6a52b
 *   text #f4f4f5 / secondary #a1a1aa / muted #71717a · border rgba(255,255,255,.08). Font=Fredoka(wordmark). */

:root {
  --quiga-bg: #09090b;
  --quiga-elevated: #18181b;
  --quiga-gold: #ffb830;
  --quiga-gold-dark: #e6a52b;
  --quiga-text: #f4f4f5;
  --quiga-text-2: #a1a1aa;
  --quiga-text-muted: #71717a;
  --quiga-border: rgba(255, 255, 255, 0.08);
  --quiga-border-hover: rgba(255, 255, 255, 0.15);
}

/* ── HEADER: 다크 프로스티드(항상 표시), 골드 액센트 ───────────────────────── */
.wz-header,
.wz-header--top,
.wz-header--hero-mode,
.wz-header--mobile-visible {
  background: rgba(9, 9, 11, 0.8) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--quiga-border) !important;
  box-shadow: none !important;
}
.wz-header--scrolled {
  background: rgba(9, 9, 11, 0.9) !important;
}
/* 로고 워드마크 = Fredoka, 밝은 텍스트 */
.wz-header__logo-text {
  color: var(--quiga-text) !important;
  font-family: 'Fredoka', var(--wz-font-korean-display), system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.25rem !important;
  letter-spacing: -0.01em;
}
.wz-header__logo:hover .wz-header__logo-text {
  color: var(--quiga-gold) !important;
}
/* nav 링크: 회색 → 호버/활성 골드 */
.wz-header__nav-link {
  color: var(--quiga-text-2) !important;
  font-weight: 500 !important;
}
.wz-header__nav-link:hover,
.wz-header__nav-link--active {
  color: var(--quiga-gold) !important;
}
.wz-header__nav-link::after {
  background: var(--quiga-gold) !important;
}
/* CTA: 골드 필 + 다크 잉크 */
.wz-header__cta,
.wz-header__cta-mobile {
  background: var(--quiga-gold) !important;
  color: #1a1205 !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 0 var(--quiga-gold-dark) !important;
  font-weight: 600 !important;
}
.wz-header__cta:hover,
.wz-header__cta-mobile:hover {
  background: var(--quiga-gold-dark) !important;
}
.wz-header__cta:active,
.wz-header__cta-mobile:active {
  box-shadow: 0 1px 0 var(--quiga-gold-dark) !important;
}
/* 언어 선택기(헤더): 다크 */
.wz-lang-selector__trigger,
.wz-header__lang {
  border-color: var(--quiga-border-hover) !important;
  color: var(--quiga-text-2) !important;
}
.wz-lang-selector__trigger:hover,
.wz-header__lang:hover {
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: var(--quiga-text) !important;
}
.wz-lang-selector--simple .wz-lang-selector__trigger {
  color: var(--quiga-text-2) !important;
}
.wz-lang-selector--simple .wz-lang-selector__trigger:hover {
  color: var(--quiga-text) !important;
}
.wz-lang-selector__menu {
  background: var(--quiga-elevated) !important;
  border: 1px solid var(--quiga-border-hover) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
.wz-lang-selector__item {
  color: var(--quiga-text-2) !important;
}
.wz-lang-selector__item:hover {
  background: #27272a !important;
  color: var(--quiga-text) !important;
}
.wz-lang-selector__item.is-active {
  color: var(--quiga-gold) !important;
  background: rgba(255, 184, 48, 0.12) !important;
}
.wz-lang-selector__item--pinned {
  border-bottom-color: var(--quiga-border) !important;
}
.wz-lang-selector__menu::-webkit-scrollbar-thumb {
  background: rgba(255, 184, 48, 0.3) !important;
}
.wz-header__hamburger-line {
  background: var(--quiga-text) !important;
}
.wz-header__lang-icon,
.wz-lang-selector__icon {
  filter: invert(1) brightness(1.6) !important;
}

/* ── MOBILE DRAWER: 다크 ──────────────────────────────────────────────────── */
.wz-mobile-menu {
  background: var(--quiga-bg) !important;
  color: var(--quiga-text) !important;
}
.wz-mobile-menu__header {
  border-bottom-color: var(--quiga-border) !important;
}
.wz-mobile-menu__link,
.wz-mobile-menu__link-name {
  color: var(--quiga-text) !important;
}
.wz-mobile-menu__link:hover .wz-mobile-menu__link-name {
  color: var(--quiga-gold) !important;
}
.wz-mobile-menu__nav {
  border-color: var(--quiga-border) !important;
}
.wz-mobile-menu__cta-btn {
  background: var(--quiga-gold) !important;
  color: #1a1205 !important;
}
.wz-mobile-menu__close-icon {
  color: var(--quiga-text) !important;
}
.wz-mobile-menu__lang-select {
  background: var(--quiga-elevated) !important;
  color: var(--quiga-text) !important;
  border-color: var(--quiga-border-hover) !important;
}
.wz-mobile-menu__search input {
  background: var(--quiga-elevated) !important;
  color: var(--quiga-text) !important;
}
.wz-mobile-menu__search button {
  background: var(--quiga-elevated) !important;
}

/* ── FOOTER: 다크(#09090b) + 골드 액센트 ─────────────────────────────────── */
.wz-footer {
  background: var(--quiga-bg) !important;
  border-top: 1px solid var(--quiga-border);
}
.wz-footer__grid {
  border-bottom-color: var(--quiga-border) !important;
}
.wz-footer__title {
  color: var(--quiga-text-muted) !important;
  border-bottom: none !important;
  padding-bottom: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.wz-footer__link {
  color: var(--quiga-text-2) !important;
}
.wz-footer__link:hover {
  color: var(--quiga-text) !important;
}
.wz-footer__lang-title,
.wz-footer__biz-title {
  color: var(--quiga-text-muted) !important;
}
.wz-footer__lang-link {
  color: var(--quiga-text-muted) !important;
}
.wz-footer__lang-link:hover {
  color: var(--quiga-text) !important;
}
.wz-footer__lang-link--active {
  color: var(--quiga-gold) !important;
  font-weight: 600 !important;
}
.wz-footer__copyright {
  color: var(--quiga-text-muted) !important;
  border-top-color: var(--quiga-border) !important;
}
.wz-footer__lang-feedback {
  color: var(--quiga-text-2) !important;
  border-left-color: var(--quiga-border) !important;
}
.wz-footer__lang-feedback:hover {
  color: var(--quiga-text) !important;
}
/* 사업자정보(전자상거래법) — 다크 */
.wz-footer__biz {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--quiga-border);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--quiga-text-muted);
}
.wz-footer__biz dt {
  display: inline;
}
.wz-footer__biz dd {
  display: inline;
  margin: 0 0 0 4px;
}
.wz-footer__biz > div {
  display: flex;
}
.wz-footer__back-to-hero {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--quiga-border) !important;
  color: var(--quiga-text-muted) !important;
}
.wz-footer__back-to-hero:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--quiga-text) !important;
}

/* ── 풍선 로고 SVG float 애니메이션 (라이브 quiga-float) ────────────────────── */
.quiga-balloon {
  width: 32px;
  height: 32px;
  transform-origin: bottom center;
  animation: quiga-float 3.4s ease-in-out infinite;
}
@keyframes quiga-float {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50% { transform: translateY(-6px) rotate(2.5deg); }
}
.wz-header__logo:hover .quiga-balloon {
  animation: quiga-cheer 0.7s ease-in-out;
}
@keyframes quiga-cheer {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-8px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .quiga-balloon { animation: none !important; }
}

/* ══ HEADER LIGHT-TONE OVERRIDE (site-fix 2026-07-17, 오너 승인 "와그작 라이트톤") ══
 * 위 다크 헤더 블록(L18~117)을 와그작식 반투명 프로스티드 화이트로 전환. 파일 끝 =
 * 같은 특이도에서 마지막 선언 = 승리(레이아웃상 quiga-chrome.css 뒤엔 헤더 규칙 없음).
 * 목적: 스크롤 시 불투명 다크 바가 제목을 덮던 문제 해소 — 라이트+반투명이라 제목이
 * 바 뒤에서 비쳐 "숨음" 체감 제거. 대비(AA): 로고/nav/아이콘=다크 잉크(≥4.5:1),
 * CTA 골드 필은 흰 배경서도 대비 충분 → 유지. quiga-chrome은 !important 체계라
 * 헤더 오버라이드도 이 파일 안에서 일관되게 !important 유지(신규 CSS 규칙 아님).
 * 모바일 드로어(wz-mobile-menu)·언어 메뉴 패널은 오버레이라 다크 유지(스코프 제한). */
.wz-header,
.wz-header--top,
.wz-header--hero-mode,
.wz-header--mobile-visible {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
}
.wz-header--scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* 로고 워드마크 = 다크 잉크 (호버 시 진한 앰버) */
.wz-header__logo-text {
  color: #18181b !important;
}
.wz-header__logo:hover .wz-header__logo-text {
  color: #7a5000 !important;
}
/* nav 링크: 다크 그레이 → 호버/활성 진한 앰버(AA 통과) + 골드 밑줄 유지 */
.wz-header__nav-link {
  color: #3f3f46 !important;
}
.wz-header__nav-link:hover,
.wz-header__nav-link--active {
  color: #7a5000 !important;
}
/* 언어 선택기 트리거(헤더 바): 다크 잉크. 드롭다운 패널은 다크 유지(오버레이) */
.wz-lang-selector__trigger,
.wz-header__lang {
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #3f3f46 !important;
}
.wz-lang-selector__trigger:hover,
.wz-header__lang:hover {
  border-color: rgba(0, 0, 0, 0.32) !important;
  color: #18181b !important;
}
.wz-lang-selector--simple .wz-lang-selector__trigger {
  color: #3f3f46 !important;
}
.wz-lang-selector--simple .wz-lang-selector__trigger:hover {
  color: #18181b !important;
}
/* 햄버거 라인: 다크 잉크 */
.wz-header__hamburger-line {
  background: #18181b !important;
}
/* 언어 아이콘: 라이트 헤더에선 invert 무효화(원본 다크 아이콘 유지) */
.wz-header__lang-icon,
.wz-lang-selector__icon {
  filter: none !important;
}

/* ══ MOBILE HEADER — 더 투명하게(오너 2026-07-17 "너무 헤더만 눈에 띔") ══
 * 라이트 프로스티드가 모바일에서 바처럼 도드라져 콘텐츠와 블렌드되도록 알파 하향 +
 * 하단 보더 제거. blur는 유지해 텍스트 가독 확보. 파일 끝 = 위 라이트 오버라이드보다
 * 뒤 = 승리. quiga-chrome !important 체계 내 일관 유지. */
@media (max-width: 768px) {
  .wz-header,
  .wz-header--top,
  .wz-header--hero-mode,
  .wz-header--mobile-visible {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    border-bottom: none !important;
  }
  .wz-header--scrolled {
    background: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  }
}