@charset "utf-8";
/* ========================================
   BOX_H2W2 - 헤더 + 4박스 비대칭 그리드
   moodu/index.html .modu-card-grid 디자인 이식
   모든 선택자는 .BOX_H2W2 (스킨 폴더명) 스코핑
======================================== */

.BOX_H2W2 {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.BOX_H2W2 .bh2w2-wrap {
    width: 100%;
    box-sizing: border-box;
}

/* 헤더 */
.BOX_H2W2 .bh2w2-header {
    width: 100%;
    margin-bottom: 40px;
}
.BOX_H2W2 .bh2w2-textset {
    text-align: center;
}
.BOX_H2W2 .bh2w2-subtit {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bh2w2-subtit, #00c896);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}
.BOX_H2W2 .bh2w2-title {
    font-size: clamp(24px, calc(1.41vw + 19.5px), 42px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 24px;
    line-height: 1.3;
}
.BOX_H2W2 .bh2w2-desc {
    font-size: clamp(14px, calc(0.16vw + 13.5px), 16px);
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* 4박스 비대칭 그리드 */
.BOX_H2W2 .bh2w2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    grid-template-rows: 1fr 1fr;
    gap: clamp(16px, calc(1.25vw + 12px), 24px);
    width: 100%;
    margin-top: 40px;
    height: var(--bh2w2-h, 650px);
}

/* 카드 4개일 때: 1·2번 세로2칸, 3·4번 위아래 분할 */
.BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(1) { grid-row: 1 / 3; }
.BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(2) { grid-row: 1 / 3; }
.BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(3) { grid-row: 1 / 2; }
.BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(4) { grid-row: 2 / 3; }

.BOX_H2W2 .bh2w2-card {
    position: relative;
    border-radius: var(--bh2w2-radius, 16px);
    overflow: hidden;
    text-decoration: none;
    display: block;
    color: inherit;
}

.BOX_H2W2 .bh2w2-card-img {
    width: 100%;
    height: 100%;
}
.BOX_H2W2 .bh2w2-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.BOX_H2W2 .bh2w2-card:hover .bh2w2-card-img img {
    transform: scale(1.08);
}
.BOX_H2W2 .bh2w2-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.BOX_H2W2 .bh2w2-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

.BOX_H2W2 .bh2w2-card-text {
    position: absolute;
    top: 0;
    left: 0;
    padding: clamp(20px, calc(1.56vw + 15px), 36px);
    z-index: 1;
    pointer-events: none;
}
.BOX_H2W2 .bh2w2-card-title {
    font-size: clamp(18px, calc(0.78vw + 15.5px), 24px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.3;
    pointer-events: auto;
}
.BOX_H2W2 .bh2w2-card-desc {
    font-size: clamp(13px, calc(0.31vw + 12px), 15px);
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
    margin: 0;
    pointer-events: auto;
}

/* 인라인 편집 호버 가시성 */
.BOX_H2W2 .wg_edit_txt:hover,
.BOX_H2W2 .wg_edit_img:hover,
.BOX_H2W2 .wg_edit_link:hover {
    outline: 2px dashed rgba(0, 200, 150, 0.7);
    outline-offset: 2px;
}

/* 반응형 */
@media (max-width: 992px) {
    .BOX_H2W2 .bh2w2-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        height: auto;
    }
    .BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(1),
    .BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(2),
    .BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(3),
    .BOX_H2W2 .bh2w2-grid > .bh2w2-card:nth-child(4) {
        grid-row: auto;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 640px) {
    .BOX_H2W2 .bh2w2-grid {
        grid-template-columns: 1fr;
    }
    .BOX_H2W2 .bh2w2-grid > .bh2w2-card {
        aspect-ratio: 4 / 3;
    }
    .BOX_H2W2 .bh2w2-header {
        margin-bottom: 24px;
    }
}