/* =========================================
   Custom Utilities (Arbitrary Values)
   Tailwind 4.0에서 지원하지 않는 임의 값 클래스
   ========================================= */

/* 박스쿤 이미지 블록 - flex 컨테이너 내 전체 너비 */
.wp-block-boxkun-image .boxkun-lightbox-item {
    width: 100%;
}

/* LQIP 컨테이너 - 즉시 자리 확보 및 레이아웃 시프트 방지 */
.bk-lqip-container {
    display: block;
    width: 100%;
    overflow: hidden;
    /* height는 inline aspect-ratio가 처리 */
}
/* 부모가 명시적 height를 가질 때 대응 */
.bk-lqip-container.h-full,
[class*="aspect-"] > .bk-lqip-container {
    height: 100%;
}
.bk-lqip-container > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* z-index 임의 값 */
.bk-z-100000 { z-index: 100000 !important; }
.bk-z-100001 { z-index: 100001 !important; }

/* max-width 임의 값 */
.bk-max-w-480 { max-width: 480px !important; }
.bk-max-w-280 { max-width: 280px !important; }
.bk-max-w-320 { max-width: 320px !important; }
.bk-max-w-650 { max-width: 650px !important; }
.bk-max-w-850 { max-width: 850px !important; }

/* 반응형 max-width (태블릿: md = 768px ~ lg = 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .md\:bk-max-w-850 { max-width: 850px !important; }
}

/* width 임의 값 */
.bk-w-100 { width: 100px !important; }
.bk-w-280 { width: 280px !important; }
.bk-w-320 { width: 320px !important; }
.bk-w-650 { width: 650px !important; }

/* height 임의 값 */
.bk-h-100 { height: 100px !important; }

/* 반응형 그리드 카드 썸네일 오버라이드 */
@media (min-width: 768px) {
    .bk-grid-card .bk-w-100 { width: 100% !important; }
    .bk-grid-card .bk-h-100 { height: auto !important; }
}

/* min-width 임의 값 */
.bk-min-w-280 { min-width: 280px !important; }
.bk-min-w-650 { min-width: 650px !important; }

/* aspect-ratio 임의 값 */
.bk-aspect-2-3 { aspect-ratio: 2/3 !important; }
.bk-aspect-3-4 { aspect-ratio: 3/4 !important; }
.bk-aspect-4-3 { aspect-ratio: 4/3 !important; }
.bk-aspect-9-16 { aspect-ratio: 9/16 !important; }
.bk-aspect-16-9 { aspect-ratio: 16/9 !important; }