/* Bootstrap 5 위에 얹는 프로젝트 고유 스타일.
   레이아웃/컴포넌트는 Bootstrap 을 그대로 쓰고 여기서는 최소한만 덮어쓴다. */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Malgun Gothic", "Noto Sans KR", sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-content {
    flex: 1 0 auto;
}

code {
    background: var(--bs-secondary-bg);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    color: var(--bs-body-color);
}

/* 제품 사진 캐러셀 (_product_carousel.html)
   사진이 대부분 정사각형이라 높이가 곧 보이는 크기다. 카드가 화면 폭을 다 쓰는
   라인업에서 낮은 높이는 사진을 폭의 20% 로 만든다. 화면이 넓을수록 키운다. */
.product-photo-frame {
    height: 300px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .product-photo-frame { height: 420px; }
}

@media (min-width: 1200px) {
    .product-photo-frame { height: 560px; }
}