/* ============================================================
   HOVERBG — Hover로 섹션 배경이 부드럽게 바뀌는 4박스 카드
   ============================================================ */

/* ★ 위젯 root의 padding(상하/배경 영역)을 hbg_wrap의 안쪽 padding으로 옮기기
   - 메인블럭 모달 [상단/하단 패딩]은 .com_f 인라인 style에 들어옴
   - 그대로 두면 padding 영역에는 배경이 안 깔림
   - → .com_f 의 padding 값을 CSS 변수로 받아서 hbg_wrap 의 padding 으로 옮김
   - 동시에 hbg_wrap 을 음수 margin 으로 padding 영역까지 덮어 100% 채움 */
.HOVERBG.com_f {
    overflow: visible;
    /* padding 시각 효과는 hbg_wrap 안쪽 padding으로 옮긴다 → root padding 자체는 시각 영향만 제거 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 위젯 wrap: 섹션 전체 폭(100vw)으로 확장 — contents-container 안에 있어도 전체 폭 깔림 */
.HOVERBG .hbg_wrap {
    position: relative;
    /* 100vw 확장 트릭: 부모 inner 폭 무시하고 viewport 전체 */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* root padding 대신 자체 padding 으로 (메인블럭 상하단 패딩 영역까지 배경 덮음) */
    padding-top: var(--hbg-root-pt, 0);
    padding-bottom: var(--hbg-root-pb, 0);
    min-height: var(--hbg-section-min, auto);
    overflow: hidden;
    isolation: isolate;
    background-color: #111; /* 이미지 깔리기 전 fallback */
}

/* ★ 배경 레이어 (base + next 2개 ping-pong) */
/*    이미지 투명도/블러는 이 레이어에만 적용 → 콘텐츠 영향 없음 */
/*    is-active 가 붙은 레이어가 보임, 나머지는 opacity 0 */
.HOVERBG .hbg_bg_base,
.HOVERBG .hbg_bg_next {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--hbg-bg-pos, center center);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity var(--hbg-bg-trans, 0.8s) ease;
    /* 이미지 자체 블러 */
    filter: blur(var(--hbg-bg-img-blur, 0));
}

/* is-active 인 레이어가 사용자 설정 투명도(기본 1)로 보임 */
.HOVERBG .hbg_bg_base.is-active,
.HOVERBG .hbg_bg_next.is-active {
    opacity: var(--hbg-bg-img-op, 1);
}

/* 어두운 오버레이 */
.HOVERBG .hbg_overlay {
    position: absolute;
    inset: 0;
    background-color: var(--hbg-overlay, #000);
    opacity: var(--hbg-overlay-op, 0.55);
    z-index: 1;
    pointer-events: none;
}

/* 내부 콘텐츠 컨테이너 — contents-container 클래스가 함께 붙어 max-width 자동 적용 */
.HOVERBG .hbg_inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(30px, calc(2vw + 20px), 60px);
    /* contents-container 클래스가 max-width/margin:auto 처리하지만, 안전망 */
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   타이틀 영역 (좌상단)
   ============================================================ */
.HOVERBG .hbg_titles {
    text-align: var(--hbg-title-align, left);
    max-width: var(--hbg-title-maxw, none);
    width: 100%;
}

.HOVERBG .hbg_subtit {
    font-size: var(--hbg-subtit-size, clamp(13px, calc(0.2vw + 12px), 16px));
    color: var(--hbg-subtit-color, #ddd);
    margin: 0 0 12px;
    opacity: 0.9;
    letter-spacing: 0.02em;
}

.HOVERBG .hbg_title {
    font-size: var(--hbg-title-size, clamp(24px, calc(1.5vw + 12px), 42px));
    color: var(--hbg-title-color, #fff);
    margin: 0 0 16px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* 제목4 = 자유 문구 (제목3 아래) */
.HOVERBG .hbg_title4 {
    font-size: var(--hbg-subtit-size, clamp(13px, calc(0.2vw + 12px), 16px));
    color: var(--hbg-subtit-color, #ddd);
    line-height: 1.6;
    margin-top: 10px;
    word-break: keep-all;
}

.HOVERBG .hbg_more_wrap {
    margin-top: 18px;
}
/* 메인블럭 공통 더보기가 박혀 들어올 때 정렬 보정 (타이틀 정렬 따라감)
   ★ more_loader.php가 .hymore_wrap{position:absolute;right:0;bottom:0;float:left} 을 강제 주입하므로
      여기서 정적 위치로 재정의해야 제목5 아래에 정상 노출됨 */
.HOVERBG .hbg_more_wrap.hbg_more_mbt {
    display: flex;
    justify-content: flex-start;
    position: relative;
    min-height: 0;
}
.HOVERBG .hbg_more_wrap.hbg_more_mbt .hymore_wrap,
.HOVERBG .hbg_titles .hymore_wrap {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    display: inline-flex;
    width: auto;
}
.HOVERBG .hbg_wrap[style*="--hbg-title-align:center"] .hbg_more_wrap.hbg_more_mbt { justify-content: center; }
.HOVERBG .hbg_wrap[style*="--hbg-title-align:right"]  .hbg_more_wrap.hbg_more_mbt { justify-content: flex-end; }

/* HOVERBG 안에 들어온 메인블럭 더보기 버튼 — 어두운 배경에서도 보이게 컬러 강제
   기본: 라인/텍스트/아이콘 = 타이틀 컬러(흰색)
   Hover: 배경 transparent 유지 + 라인/텍스트/아이콘 = 메인 primary 컬러 */
.HOVERBG .hbg_titles .hymore,
.HOVERBG .hbg_titles .hymore1,
.HOVERBG .hbg_titles .hymore2,
.HOVERBG .hbg_titles .hymore3,
.HOVERBG .hbg_titles .hymore4,
.HOVERBG .hbg_titles .hymore5,
.HOVERBG .hbg_titles .hymore6,
.HOVERBG .hbg_titles .hymore7,
.HOVERBG .hbg_titles .hymore8,
.HOVERBG .hbg_titles .hymore11 {
    color: var(--hbg-title-color, #fff) !important;
    border-color: var(--hbg-title-color, #fff) !important;
}
.HOVERBG .hbg_titles .hymore i,
.HOVERBG .hbg_titles .hymore5 i {
    color: var(--hbg-title-color, #fff) !important;
}

/* Hover — 배경 OFF 유지 + 라인/텍스트/아이콘 primary 컬러 */
.HOVERBG .hbg_titles .hymore:hover,
.HOVERBG .hbg_titles .hymore1:hover,
.HOVERBG .hbg_titles .hymore2:hover,
.HOVERBG .hbg_titles .hymore3:hover,
.HOVERBG .hbg_titles .hymore4:hover,
.HOVERBG .hbg_titles .hymore5:hover,
.HOVERBG .hbg_titles .hymore6:hover,
.HOVERBG .hbg_titles .hymore7:hover,
.HOVERBG .hbg_titles .hymore8:hover,
.HOVERBG .hbg_titles .hymore11:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--primary, #d91f29) !important;
    border-color: var(--primary, #d91f29) !important;
}
.HOVERBG .hbg_titles .hymore:hover i,
.HOVERBG .hbg_titles .hymore5:hover i {
    color: var(--primary, #d91f29) !important;
}

.HOVERBG .hbg_more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    color: var(--hbg-title-color, #fff);
    background: transparent;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.25s, border-color 0.25s, transform 0.25s;
    cursor: pointer;
}
.HOVERBG .hbg_more:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.85);
    transform: translateX(2px);
}
.HOVERBG .hbg_more i {
    font-size: 18px;
    line-height: 1;
}

/* ============================================================
   카드 그리드 (반복 박스)
   ============================================================ */
.HOVERBG .hbg_cards {
    display: grid;
    grid-template-columns: repeat(var(--hbg-cols-pc, 4), 1fr);
    gap: var(--hbg-card-gap, 20px);
    width: 100%;
}

@media (max-width: 1024px) {
    .HOVERBG .hbg_cards {
        grid-template-columns: repeat(var(--hbg-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 640px) {
    .HOVERBG .hbg_cards {
        grid-template-columns: repeat(var(--hbg-cols-mobile, 1), 1fr);
    }
}

/* 카드 1개 */
.HOVERBG .hbg_card {
    position: relative;
    display: block;
    min-height: var(--hbg-card-min-h, 280px);
    border-radius: var(--hbg-card-radius, 16px);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform var(--hbg-hover-trans, 0.4s) ease, box-shadow var(--hbg-hover-trans, 0.4s) ease;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.HOVERBG .hbg_card:hover {
    transform: scale(var(--hbg-hover-scale, 1.03));
    box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}

/* 카드 안 이미지 (투명도 + 약간의 어두움 + 옵션 블러 + 옵션 확대) */
/* ★ blur 값은 [평상시: --hbg-card-img-blur (비우면 0)] [hover시: --hbg-card-img-hover-blur (비우면 0)] 로 완전 분리 */
.HOVERBG .hbg_card_img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: var(--hbg-card-img-op, 0.6);
    z-index: 0;
    transform: scale(1);
    transform-origin: center center;
    transition: opacity var(--hbg-hover-trans, 0.4s) ease,
                filter var(--hbg-hover-trans, 0.4s) ease,
                transform var(--hbg-hover-trans, 0.4s) ease;
    /* 기본: 살짝 어둡고 채도 낮음 + 평상시 블러(폴백 0px) */
    filter: brightness(0.85) saturate(0.9) blur(var(--hbg-card-img-blur, 0px));
}

/* Hover 시 이미지가 더 밝고 선명 + 채도 살짝 ↑ + hover 전용 블러(폴백 0px) + 이미지만 확대 */
.HOVERBG .hbg_card:hover .hbg_card_img {
    opacity: var(--hbg-card-img-hover-op, 1);
    transform: scale(var(--hbg-card-img-hover-scale, 1));
    filter: brightness(var(--hbg-card-img-brightness, 1.05))
            saturate(var(--hbg-card-img-saturate, 1.1))
            blur(var(--hbg-card-img-hover-blur, 0px));
}

/* 카드 안 어두운 dim 레이어 */
.HOVERBG .hbg_card_dim {
    position: absolute;
    inset: 0;
    background-color: var(--hbg-card-bg, #000);
    opacity: var(--hbg-card-bg-op, 0.45);
    z-index: 1;
    transition: opacity var(--hbg-hover-trans, 0.4s) ease,
                background-color var(--hbg-hover-trans, 0.4s) ease;
}

/* Hover 시 카드 어두운배경 밝아짐 + 컬러 교체 (옵션)
   --hbg-hover-bg-color 가 정의돼 있으면 그 컬러로, 없으면 기본 컬러 유지 */
.HOVERBG .hbg_card:hover .hbg_card_dim {
    opacity: var(--hbg-hover-bg-dim, 0.15);
    background-color: var(--hbg-hover-bg-color, var(--hbg-card-bg, #000));
}

/* 카드 콘텐츠 (아이콘 + 제목 + 상세) */
.HOVERBG .hbg_card_content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: var(--hbg-card-padding, 30px 20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: var(--hbg-text-align, center);
    gap: 14px;
}

/* 가로 정렬 좌/우 옵션 */
.HOVERBG[style*="--hbg-text-align:left"] .hbg_card_content,
.HOVERBG .hbg_card_content[data-align="left"] {
    align-items: flex-start;
}
.HOVERBG[style*="--hbg-text-align:right"] .hbg_card_content {
    align-items: flex-end;
}

/* 아이콘 */
.HOVERBG .hbg_icon {
    font-size: var(--hbg-icon-size, 44px);
    line-height: 1;
    color: var(--hbg-subject-color, #fff);
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.HOVERBG .hbg_icon i,
.HOVERBG .hbg_icon svg,
.HOVERBG .hbg_icon img {
    width: 1em;
    height: 1em;
    font-size: inherit;
}
.HOVERBG .hbg_icon img {
    width: var(--hbg-icon-size, 44px);
    height: auto;
}

/* 카드 제목 */
.HOVERBG .hbg_subject {
    font-size: var(--hbg-subject-size, clamp(14px, calc(0.3vw + 12px), 18px));
    color: var(--hbg-subject-color, #fff);
    line-height: 1.4;
    opacity: 0.92;
    letter-spacing: 0.02em;
}

/* 카드 상세 (카운터 아님 — 순수 텍스트) */
.HOVERBG .hbg_desc {
    font-size: var(--hbg-desc-size, clamp(22px, calc(1vw + 18px), 34px));
    color: var(--hbg-desc-color, #fff);
    font-weight: var(--hbg-desc-weight, 600);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ============================================================
   접근성 — 동작 줄이기
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .HOVERBG .hbg_wrap::before,
    .HOVERBG .hbg_card,
    .HOVERBG .hbg_card_dim {
        transition: none !important;
    }
    .HOVERBG .hbg_card:hover {
        transform: none !important;
    }
}

/* 인쇄 */
@media print {
    .HOVERBG .hbg_overlay,
    .HOVERBG .hbg_wrap::before {
        display: none;
    }
    .HOVERBG .hbg_subtit,
    .HOVERBG .hbg_title,
    .HOVERBG .hbg_subject,
    .HOVERBG .hbg_desc {
        color: #000 !important;
    }
}