/*
 * Runtime compatibility layer for the preserved 2026-04-05 production bundle.
 * Keep this file additive: the original hashed CSS/JS remain untouched.
 */

html.azel-runtime-fixes {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.azel-runtime-fixes body {
  min-width: 0;
  overflow-x: clip;
}

/* The production bundle placed its centered shell inside the flex page. Make
   that shell the actual full-height column so short pages keep the footer down. */
html.azel-runtime-fixes
  #root
  .flex.min-h-screen.flex-col.bg-background
  > .mx-auto.w-full.max-w-3xl {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
}

html.azel-runtime-fixes
  #root
  .flex.min-h-screen.flex-col.bg-background
  > .mx-auto.w-full.max-w-3xl
  > .flex-1 {
  flex: 1 1 auto;
  min-width: 0;
}

@media (min-width: 900px) {
  html.azel-runtime-fixes
    #root
    .flex.min-h-screen.flex-col.bg-background
    > .mx-auto.w-full.max-w-3xl {
    max-width: 64rem;
  }
}

/* Header actions remain one line and meet a 44px coarse-pointer target. */
html.azel-runtime-fixes header .container {
  min-width: 0;
  gap: 0.5rem;
}

html.azel-runtime-fixes header .container > button:first-child {
  min-height: 44px;
}

html.azel-runtime-fixes header [data-azel-header-action] {
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}

html.azel-runtime-fixes header [data-azel-action-label] {
  white-space: nowrap;
}

@media (max-width: 359px) {
  html.azel-runtime-fixes header .container {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  html.azel-runtime-fixes header h1 {
    font-size: 13px !important;
  }

  html.azel-runtime-fixes header [data-azel-header-actions] {
    gap: 0.375rem;
  }

  html.azel-runtime-fixes header [data-azel-header-action] {
    width: 44px;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  html.azel-runtime-fixes header [data-azel-action-label] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Stable, less abrupt grid breakpoints for the wider production shell. */
html.azel-runtime-fixes [data-azel-product-grid] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 576px) {
  html.azel-runtime-fixes [data-azel-product-grid] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 900px) {
  html.azel-runtime-fixes [data-azel-product-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

html.azel-runtime-fixes [data-azel-product-card] {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

html.azel-runtime-fixes [data-azel-product-card] p {
  font-size: 12px !important;
}

html.azel-runtime-fixes [data-azel-product-card] > div:last-child button {
  min-height: 44px;
  font-size: 12px !important;
}

html.azel-runtime-fixes footer [class*="text-[10px]"],
html.azel-runtime-fixes footer [class*="text-[11px]"] {
  font-size: 11px !important;
  line-height: 1.5;
}

/* Runtime-enhanced product dialog controls. */
html.azel-runtime-fixes [data-azel-product-dialog] {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

html.azel-runtime-fixes [data-azel-dialog-control] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Login/onboarding artwork stays within the visual viewport. The original
   dialog rendered two overlapping close buttons; retain the larger one. */
html.azel-runtime-fixes [data-azel-login-popup] {
  width: min(560px, calc(100vw - 16px)) !important;
  max-width: min(560px, calc(100vw - 16px)) !important;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
}

html.azel-runtime-fixes [data-azel-login-popup] img {
  width: 100%;
  max-height: 78vh !important;
  max-height: 78dvh !important;
  object-fit: contain !important;
  touch-action: pinch-zoom;
}

html.azel-runtime-fixes [data-azel-popup-close],
html.azel-runtime-fixes [data-azel-popup-dismiss] {
  min-width: 44px;
  min-height: 44px;
}

html.azel-runtime-fixes [data-azel-redundant-close] {
  display: none !important;
}

/* Keep transient messages clear of the sticky search/menu controls. */
html.azel-runtime-fixes [data-sonner-toaster][data-y-position="top"] {
  --mobile-offset-top: calc(72px + env(safe-area-inset-top)) !important;
  --offset-top: 96px !important;
}

html.azel-runtime-fixes button:focus-visible,
html.azel-runtime-fixes a:focus-visible,
html.azel-runtime-fixes input:focus-visible,
html.azel-runtime-fixes select:focus-visible,
html.azel-runtime-fixes textarea:focus-visible,
html.azel-runtime-fixes [tabindex]:focus-visible {
  outline: 3px solid hsl(var(--pixel-pink)) !important;
  outline-offset: 2px !important;
}

html.azel-runtime-fixes .announcement-marquee-track:hover,
html.azel-runtime-fixes button:focus-visible .announcement-marquee-track {
  animation-play-state: paused;
}

/* Touch screens already receive native pressed feedback; keep particles from
   obscuring compact header buttons and the modal. */
@media (pointer: coarse) {
  html.azel-runtime-fixes .pixel-click-burst {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.azel-runtime-fixes *,
  html.azel-runtime-fixes *::before,
  html.azel-runtime-fixes *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  html.azel-runtime-fixes .announcement-marquee-track {
    width: 100% !important;
    transform: none !important;
  }

  html.azel-runtime-fixes .announcement-marquee-item {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.azel-runtime-fixes .announcement-marquee-item[aria-hidden="true"] {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   브랜드 색: 핑크 → 아우라 보라

   원래 디자인(운영 번들)은 --pixel-pink 350 (핑크) 이다. 쿠지 화면이 쓰는
   아우라 색과 맞추기 위해 색상(hue)만 250 으로 옮긴다. 채도와 명도는 원본
   그대로 둬서 어두운 배경 위 대비와 화면 인상을 유지한다.

     원본 핑크   350 95% 76%  = #fc889b   어두운 배경 대비 7.96:1
     아우라 보라 250 95% 76%  = #a188fc   어두운 배경 대비 6.48:1

   쿠지의 --modern-accent(#6f5cd4) 가 색상 250 이라 같은 계열로 읽힌다.
   테마·글꼴·레이아웃은 운영 번들 원본을 그대로 쓴다.
   -------------------------------------------------------------------------- */
html.azel-runtime-fixes {
  --pixel-pink: 250 100% 76%;
}

html.azel-runtime-fixes.dark {
  --pixel-pink: 250 95% 76%;
}