/*
 * 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%;
}

/* overflow-x: clip 을 여기서 걸면 안 된다. clip 은 스크롤 상자를 만들지
   않는 대신 position: fixed 자손까지 잘라 낸다. 화면을 덮어야 할 팝업·상품
   상세·사진 크게 보기가 body 상자 크기로 잘려서, 아이폰에서 오른쪽과 아래에
   덜 칠해진 띠가 남고 그 안에서 가운데 맞춘 카드가 한쪽으로 치우쳤다
   (실기기 측정: 화면 393x695, 겹침막 377x679, 카드 좌16/우32).

   가로로 넘치던 공지 흐름막은 이미 자기 칸에서 overflow-hidden 으로 잘린다.
   여기 규칙은 옛 번들 시절의 중복이었다. */
html.azel-runtime-fixes body {
  min-width: 0;
}

/* 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%;
}


/* --------------------------------------------------------------------------
   카테고리 바: 3칸 격자 → 2x2

   운영 번들은 모바일에서 카테고리를 grid-cols-3 으로 깐다. 카테고리가
   전체/피규어/굿즈 셋일 때는 딱 한 줄로 떨어졌는데, '리멘트/랜덤토이' 가
   늘면서 넷이 되어 3+1 로 하나만 덩그러니 남았다. 2x2 로 바꿔 짝을 맞춘다.
   가로가 넓어지면(sm 이상) 원래대로 flex 한 줄이라 이 규칙은 꺼진다.

   이름이 긴 카테고리가 있어 글자를 줄바꿈 없이 한 줄로 두되, 칸을 넘치면
   줄어들도록 한다. 번들의 whitespace-nowrap 을 그대로 두면 글자가 칸 밖으로
   삐져나간다.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  html.azel-runtime-fixes .grid-cols-3.scrollbar-hide {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.azel-runtime-fixes .grid-cols-3.scrollbar-hide > button > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 가로 화면에서는 한 줄에 넷이 들어가야 해서 긴 이름이 눌린다.
   글자만 한 단계 줄여 잘리지 않게 한다. */
@media (min-width: 640px) {
  html.azel-runtime-fixes .grid-cols-3.scrollbar-hide > button {
    padding-inline: 0.75rem;
  }

  html.azel-runtime-fixes .grid-cols-3.scrollbar-hide > button > span {
    font-size: 14px;
  }
}


/* --------------------------------------------------------------------------
   상품 상세: 원본 비율 그대로 보여 주기

   목록 카드는 정사각 칸에 object-cover 라 가로로 긴 사진(16:9 같은)이 좌우만
   남고 위아래가 잘린다. 칸을 정사각으로 맞춰야 격자가 가지런하니 카드는 그대로
   두고, 눌러서 여는 상세 창에서만 사진 전체를 보여 준다.

   상세 창의 사진 칸은 `relative aspect-square bg-deep-void overflow-hidden z-0`
   인데, 세 군데 있는 aspect-square 중 z-0 이 붙은 것은 여기뿐이라 이걸로 집는다.
   (나머지 둘: 목록 카드, 장바구니 줄 썸네일 — 둘 다 그대로 둔다.)

   - 칸의 정사각 고정을 풀어 사진 높이를 따라가게 한다. 그래야 가로로 긴 사진에
     쓸데없이 큰 위아래 여백이 안 생긴다.
   - object-contain 으로 잘리지 않게 한다.
   - 세로로 아주 긴 사진이 창을 넘기지 않도록 높이 상한을 둔다. 이때는 여백이
     생기는데, 잘리는 것보다는 낫다.
   - 재고/HOT/NEW 배지, 좌우 넘김 버튼, 품절 표시는 이 칸을 기준으로 절대배치라
     칸 높이가 바뀌어도 따라온다.
   -------------------------------------------------------------------------- */
/* 상세 창의 사진 칸은 이제 비율이 어떻든 같은 자리만 차지하도록 화면 쪽에서
   직접 정한다(data-azel-detail-media). 아래 보정은 그 이전 마크업용이라
   지금은 걸리는 것이 없다 — 옛 번들이 캐시에 남아 있을 때를 위해 남겨 둔다. */
html.azel-runtime-fixes .aspect-square.z-0 {
  aspect-ratio: auto !important;
  min-height: 180px;
  max-height: 60vh;
}

html.azel-runtime-fixes .aspect-square.z-0 > img {
  height: auto !important;
  max-height: 60vh;
  object-fit: contain !important;
}