/*
Theme Name: ANUE
Author: ANUE
Description: ANUE custom theme (Tailwind CDN + inline CSS per template). This style.css is kept minimal for WordPress compatibility.
Version: 1.0.0
*/

/* Base variables (used by inline CSS too) */
:root {
  --blue-dark: #122139;
  --blue-light: #C59F5E;
  --footer-bg: #0e1626;
  --anue-vh: 1vh;
}

/* Optional global defaults */
html, body {
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  word-break: keep-all;
  width: 100%;
  overflow-x: hidden;
}

/* === Floating Social + TOP Buttons === */
#floatingStack{
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
#floatingStack.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#floatingStack .floating-btn{
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: var(--blue-dark) !important;
  color: #fff !important;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
#floatingStack .floating-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.16);
}
#floatingStack .floating-btn svg,
#floatingStack .floating-btn img{
  width: 22px;
  height: 22px;
  display:block;
  color: #fff !important;
  fill: #fff !important;
  filter: none !important;
}
#floatingStack .floating-btn img{ /* ensure PNG icons appear light on dark bg */
  filter: brightness(0) invert(1) !important;
}
#floatingStack .floating-btn.kakao{
  /* unified navy background */
  background: var(--blue-dark) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
#floatingStack .floating-btn.top{
  background: var(--blue-dark) !important;
  color: #fff;
  border-color: rgba(255,255,255,0.08) !important;
}
@media (max-width: 768px){
  #floatingStack{ right: 20px; bottom: 25px; }
  #floatingStack .floating-btn{ width: 52px; height: 52px; }
}

/* Mobile landscape + tablet-first overrides (up to 1024px) */
.hero-section,
.hero-full,
.sub-hero,
.photo-grid-section {
  height: 100vh;
  height: calc(var(--anue-vh, 1vh) * 100);
  height: 100svh;
}

#mobileMenu {
  height: 100vh;
  height: calc(var(--anue-vh, 1vh) * 100);
  height: 100dvh;
}

@media (max-width: 1024px) {
  #mainNav {
    height: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #mainNav .hidden.md\:flex {
    display: none !important;
  }

  #mainNav .md\:hidden {
    display: flex !important;
    align-items: center;
  }

  #mainNav .md\:hidden a[href*="instagram"] {
    display: none !important;
  }

  #mainNav .md\:hidden {
    gap: 0 !important;
  }

  #mainNav #navLogo {
    height: 28px !important;
    width: auto !important;
    object-fit: contain;
  }

  #mainNav #menuToggle {
    display: flex !important;
  }

  #mobileMenu {
    padding: 72px 20px 24px;
    overflow-y: auto;
  }

  section.mt-40,
  section.mt-56 {
    margin-top: 76px !important;
  }

  .footer-btn-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .about-intro-media {
    min-height: clamp(360px, 70svh, 560px) !important;
    height: clamp(360px, 70svh, 560px) !important;
  }

  .about-intro-section {
    padding-top: 1.4rem !important;
    padding-bottom: 3rem !important;
  }

  .about-intro-inner {
    gap: 1rem !important;
  }

  .about-intro-copy {
    padding-top: 1.2rem !important;
    padding-bottom: 1rem !important;
  }

  .about-intro-copy h2 {
    font-size: clamp(1.7rem, 4.2vw, 2.5rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
  }

  .about-intro-copy .mb-10 {
    margin-bottom: 1rem !important;
  }

  .about-intro-stats {
    padding: 1rem 1.25rem !important;
    border-radius: 20px !important;
    gap: 0.75rem !important;
  }

  .about-intro-stats .text-5xl {
    font-size: 2rem !important;
    line-height: 1 !important;
  }

  .about-intro-stats .h-\[1px\] {
    display: none;
  }

  .portfolio-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.06) 100%) !important;
    padding: 18px !important;
  }

  .portfolio-item:hover img {
    transform: none !important;
  }

  .portfolio-overlay h3 {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem) !important;
    line-height: 1.25 !important;
    color: #fff !important;
  }

  .portfolio-overlay span {
    color: rgba(255, 255, 255, 0.86) !important;
  }

  #home-showcase-calendar.anue-showcase-shell {
    --showcase-h: auto !important;
    height: auto !important;
  }

  #home-showcase-calendar .anue-showcase-left,
  #home-showcase-calendar .anue-showcase-right {
    height: auto !important;
  }

  #partnerLogoGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem 1.4rem !important;
  }

  #partnerLogoGrid .partner-logo-wrapper {
    height: 96px;
  }

  #partnerLogoGrid .partner-logo {
    max-width: 126px;
    max-height: 56px;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  #mainNav {
    height: 56px !important;
  }

  section.mt-40,
  section.mt-56 {
    margin-top: 62px !important;
  }

  .hero-section,
  .hero-full,
  .sub-hero {
    min-height: 320px;
  }

  .about-intro-media {
    min-height: 320px !important;
    height: 320px !important;
  }

  .about-intro-section {
    padding-top: 1.5rem !important;
    padding-bottom: 3rem !important;
  }

  .about-intro-copy {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .about-intro-copy h2 {
    font-size: clamp(1.7rem, 3.6vw, 2.6rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1.25rem !important;
  }

  .about-intro-copy .text-lg {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  #home-showcase-calendar.anue-showcase-shell {
    --showcase-h: clamp(360px, 62svh, 520px) !important;
    height: var(--showcase-h) !important;
  }

  #home-showcase-calendar .count-box,
  #home-showcase-calendar .anue-showcase-right {
    min-height: 0 !important;
  }

  #home-showcase-calendar .anue-showcase-left .py-10 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  #home-showcase-calendar .anue-showcase-left .mb-24 {
    margin-bottom: 2rem !important;
  }

  #home-showcase-calendar .anue-month-btn {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  #home-showcase-calendar .anue-showcase-left .mt-8 {
    margin-top: 1rem !important;
  }

  #floatingStack {
    right: 16px !important;
    bottom: 16px !important;
  }

  #mobileMenu {
    gap: 0.9rem !important;
    padding-top: 64px;
  }

  #mobileMenu .text-2xl {
    font-size: 1.125rem !important;
  }

  #mobileMenu .mt-8,
  #mobileMenu .mt-10 {
    margin-top: 0.85rem !important;
  }

  #partnerLogoGrid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 1.4rem 0.9rem !important;
  }

  #partnerLogoGrid .partner-logo-wrapper {
    height: 84px;
  }

  #partnerLogoGrid .partner-logo {
    max-width: 112px;
    max-height: 50px;
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  #home-showcase-calendar.anue-showcase-shell {
    --showcase-h: auto !important;
    height: auto !important;
  }

  #home-showcase-calendar .anue-showcase-left,
  #home-showcase-calendar .anue-showcase-right {
    height: auto !important;
    min-height: 0 !important;
  }

  .about-intro-media {
    min-height: 460px !important;
    height: 460px !important;
  }

  .about-intro-stats {
    left: auto !important;
    right: 0.85rem !important;
    transform: none !important;
    bottom: -18px !important;
    width: min(64vw, 280px) !important;
    max-width: 280px !important;
    padding: 0.95rem 1rem !important;
    border-radius: 18px !important;
  }

  .about-intro-stats .text-5xl {
    font-size: 2rem !important;
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  #partnerLogoGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.7rem 1.1rem !important;
  }

  #partnerLogoGrid .partner-logo-wrapper {
    height: 88px;
  }

  #partnerLogoGrid .partner-logo {
    max-width: 110px;
    max-height: 48px;
  }
}