/*
  BEST K Blinds - inline catalog final layout

  핵심:
  1. 검은 컨테이너 높이를 강제로 키우지 않습니다.
  2. 카탈로그 표시 높이를 임의 숫자로 강제하지 않습니다.
  3. 실제 이미지의 자연 비율(naturalWidth / naturalHeight)을 사용합니다.
  4. 사이트 안 카탈로그만 #catalogBook으로 제어합니다.
  5. 전체화면 카탈로그의 공통 .catalog-book 규칙은 건드리지 않습니다.
*/

html body .inline-catalog-shell {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding-bottom: 14px !important;
}

html body .inline-catalog-stage {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) 64px !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 26px 0 8px !important;
  gap: 18px !important;
  box-sizing: border-box !important;
}

html body #catalogBook.inline-catalog-book {
  width: min(100%, 900px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--bestk-inline-catalog-ratio, 1.5 / 1) !important;
  transform: none !important;
  transform-origin: center center !important;
  align-self: center !important;
  justify-self: center !important;
}

html body #catalogBook.inline-catalog-book .catalog-book-page {
  position: absolute !important;
  inset: 0 !important;
}

html body #catalogBook.inline-catalog-book .catalog-book-page img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .inline-catalog-footer {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

@media (max-width: 1100px) {
  html body .inline-catalog-stage {
    grid-template-columns: 54px minmax(0, 1fr) 54px !important;
    gap: 12px !important;
    padding-top: 22px !important;
  }

  html body #catalogBook.inline-catalog-book {
    width: min(100%, 820px) !important;
  }

  html body .inline-catalog-footer {
    margin-top: 7px !important;
  }
}

@media (max-width: 760px) {
  html body .inline-catalog-shell {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 8px !important;
  }

  html body .inline-catalog-stage {
    grid-template-columns: 38px minmax(0, 1fr) 38px !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 0 4px !important;
  }

  html body #catalogBook.inline-catalog-book {
    width: 100% !important;
    min-height: 0 !important;
  }

  html body .inline-catalog-footer {
    margin-top: 5px !important;
    padding-bottom: 0 !important;
  }
}

/* KBLINDS_NATURAL_RATIO_LAYOUT_FINAL */