/* ==========================================================================
COMPONENT: HEADER & LOGO (STATIC LOAD) [EXTRACTED]
========================================================================== */
.fl-logo__gif-wrap {
  position: fixed; top: 0; left: 4px; height: var(--fl-nav-h);
  display: flex; align-items: center; z-index: 1001;
  transition: transform 0.6s var(--fl-ease), opacity 0.6s var(--fl-ease);
}
.fl-logo__gif {
  height: var(--logo-size-pc);
  width: auto; cursor: pointer; opacity: 0;
  transition: opacity 0.3s var(--fl-ease);
}
.fl-logo__gif:hover { opacity: 0.7 !important; }

.fl-header {
  position: fixed; width: 100%; z-index: 999;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px; height: var(--fl-nav-h); top: 0;
  mix-blend-mode: difference;
  transition: transform 0.6s var(--fl-ease), opacity 0.6s var(--fl-ease);
}

.fl-logo-text {
  text-decoration: none; color: #fff;
  font-family: var(--header-font); font-size: var(--header-fs); font-weight: var(--header-fw);
  transition: opacity 0.3s var(--fl-ease);
  opacity: 0; 
}

.fl-nav { display: flex; gap: 40px; }
.fl-nav__link {
  font-family: var(--header-font); font-size: var(--header-fs); font-weight: var(--header-fw);
  color: #fff; text-decoration: none; transition: opacity 0.3s var(--fl-ease);
}
.fl-nav__link:hover { opacity: 0.7; }

/* --- Mobile Adaptations --- */
@media (max-width: 768px) {
  .is-nav-hidden { transform: translateY(100px) !important; opacity: 0; pointer-events: none; }
  
  .fl-header {
    top: auto !important;
    bottom: 24px !important;
    left: 32px !important;
    width: calc(100% - 64px) !important; 
    height: 44px !important;
    padding: 0 16px !important; 
    border-radius: 12px !important; 
    mix-blend-mode: normal !important;
    transition: transform 0.6s var(--fl-ease), opacity 0.6s var(--fl-ease), background 0.3s ease;
    background: rgba(255, 255, 255, 0.95) !important; 
    border: 0.5px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  }

  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fl-header {
      background: rgba(255, 255, 255, 0.2) !important;
      backdrop-filter: blur(16px) saturate(160%) !important;
      -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
      box-shadow: none !important;
      border: 0.5px solid rgba(0, 0, 0, 0.05) !important;
    }
  }

  @media (prefers-color-scheme: dark) {
    .fl-header { background: rgba(28, 28, 30, 0.98) !important; }
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
      .fl-header {
        background: rgba(28, 28, 30, 0.45) !important;
        border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
      }
    }
  }

  .fl-logo__gif-wrap {
    top: auto !important;
    bottom: 24px !important;
    left: 48px !important;
    height: 44px !important;
  }

  .fl-nav__link, .fl-logo-text { 
    font-size: var(--header-fs-m) !important; 
    color: var(--fl-text) !important; 
  }
  .fl-logo__gif { height: var(--logo-size-m) !important; }
  .fl-nav { gap: 20px !important; }
}

@media (max-width: 350px) {
  :root { --header-fs-m: 17px !important; }
  .fl-header {
    left: 16px !important;
    width: calc(100% - 32px) !important; 
    padding: 0 12px !important; 
    bottom: 16px !important;
  }
  .fl-logo__gif-wrap { 
    left: 28px !important;
    bottom: 16px !important; 
  }
  .fl-nav { gap: 12px !important; }
}