.cib-wrapper {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}

.cib-header-area {
    width: 100%;
}

.cib-header-title {
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.5px;
    word-break: keep-all;
}

.cib-header-sub {
    margin: 0;
    line-height: 1.4;
    letter-spacing: -0.3px;
    word-break: keep-all;
}

.cib-slider-outer {
    position: relative;
    width: 100%;
}

.cib-slider-track-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cib-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    transition: transform 0.4s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.cib-is-slider .cib-container {
    cursor: grab;
}

.cib-is-slider .cib-container:active {
    cursor: grabbing;
}

/* --- [1] PC 모드 레이아웃 --- */
@media (min-width: 769px) {
    /* PC 슬라이드 모드일 때 */
    .cib-slider-outer.cib-is-pc-slider .cib-container {
        flex-wrap: nowrap !important;
    }
    .cib-slider-outer.cib-is-pc-slider .cib-item {
        flex: 0 0 calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        width: calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        min-width: calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        max-width: calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        flex-shrink: 0 !important;
    }

    /* PC 그리드 모드일 때 (슬라이드 비활성) */
    .cib-slider-outer:not(.cib-is-pc-slider) .cib-container {
        flex-wrap: wrap !important;
        transform: none !important;
    }
    .cib-slider-outer:not(.cib-is-pc-slider) .cib-item {
        flex: 0 0 calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        width: calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
        max-width: calc((100% - (var(--cib-pc-gap, 15px) * (var(--cib-pc-cols, 2) - 1))) / var(--cib-pc-cols, 2)) !important;
    }
    .cib-slider-outer:not(.cib-is-pc-slider) .cib-nav-btn,
    .cib-slider-outer:not(.cib-is-pc-slider) .cib-dots-container {
        display: none !important;
    }
}

/* --- [2] 모바일 모드 레이아웃 (768px 이하) --- */
@media (max-width: 768px) {
    /* 모바일 슬라이드 모드일 때 */
    .cib-slider-outer.cib-is-m-slider .cib-container {
        flex-wrap: nowrap !important;
    }
    .cib-slider-outer.cib-is-m-slider .cib-item {
        flex: 0 0 calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        width: calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        min-width: calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        max-width: calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        flex-shrink: 0 !important;
    }

    /* 모바일 그리드 모드일 때 (슬라이드 비활성) */
    .cib-slider-outer:not(.cib-is-m-slider) .cib-container {
        flex-wrap: wrap !important;
        transform: none !important;
    }
    .cib-slider-outer:not(.cib-is-m-slider) .cib-item {
        flex: 0 0 calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        width: calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
        max-width: calc((100% - (var(--cib-m-gap, 10px) * (var(--cib-m-cols, 2) - 1))) / var(--cib-m-cols, 2)) !important;
    }
    .cib-slider-outer:not(.cib-is-m-slider) .cib-nav-btn,
    .cib-slider-outer:not(.cib-is-m-slider) .cib-dots-container {
        display: none !important;
    }
}

.cib-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    perspective: 1000px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.cib-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    color: #333;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}
.cib-nav-btn:hover {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}
.cib-prev-btn { left: -18px; }
.cib-next-btn { right: -18px; }

.cib-dots-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.cib-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
    border: none;
    padding: 0;
}

.cib-dot.active {
    transform: scale(1.25);
}

.cib-media-box {
    position: relative;
    width: 100%;
}

.cib-icon-wrapper {
    width: 100%;
    max-width: 100px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}

.cib-img-full {
    border-radius: 8px;
    overflow: hidden;
}

.cib-media-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cib-face {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cib-face img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

.cib-face-front {
    position: relative;
    z-index: 2;
}

.cib-face-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
}

.cib-text {
    display: inline-block;
    text-align: center;
    transition: color 0.3s ease, background-color 0.3s ease;
    word-break: keep-all;
    border-radius: 4px;
    line-height: 1.4;
    letter-spacing: -0.3px;
}

/* --- [3] typ3 전용 디자인 --- */
.cib-item.cib-type-typ3 {
    align-items: stretch;
    justify-content: space-between;
}

.cib-typ3-card {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: space-between;
    box-sizing: border-box;
}

.cib-typ3-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    padding-right: 15px;
}

.cib-typ3-title {
    line-height: 1.3;
    letter-spacing: -0.5px;
    word-break: keep-all;
    transition: color 0.3s ease;
    margin-bottom: 8px;
}

.cib-typ3-desc {
    line-height: 1.5;
    letter-spacing: -0.3px;
    word-break: keep-all;
    margin-bottom: 20px;
}

.cib-typ3-btn-wrap {
    margin-top: auto;
}

.cib-typ3-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    line-height: 1;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.cib-typ3-btn-text .cib-arrow {
    font-size: 0.9em;
    display: inline-block;
    transition: transform 0.3s ease;
}

.cib-item.cib-type-typ3:hover .cib-typ3-btn-text .cib-arrow {
    transform: translateX(3px);
}

.cib-typ3-btn-boxplus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-weight: bold;
    box-sizing: border-box;
    cursor: pointer;
}

.cib-typ3-right {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 110px;
    min-width: 110px;
}

.cib-typ3-right .cib-icon-wrapper {
    max-width: 90px;
    margin: 0;
}

/* 마우스 호버 시 아이콘 살짝 커지는 애니메이션 (Zoom Level: 1.08) */
.cib-item:hover .cib-media-inner {
    transform: scale(1.08);
}

/* 호버 이펙트 처리 */
.cib-effect-slide_up .cib-item:not(.cib-type-typ3):hover .cib-media-inner {
    transform: translateY(-8px) scale(1.08);
}
.cib-effect-slide_up .cib-item.has-hover:hover .cib-face-back {
    opacity: 1;
}
.cib-effect-slide_up .cib-item.has-hover:hover .cib-face-front {
    opacity: 0;
}

.cib-effect-fade .cib-item.has-hover:hover .cib-face-back {
    opacity: 1;
}
.cib-effect-fade .cib-item.has-hover:hover .cib-face-front {
    opacity: 0;
}
.cib-effect-fade .cib-item.no-hover:hover .cib-media-inner {
    opacity: 0.85;
}

.cib-effect-flip_right .cib-item.has-hover .cib-face-back {
    opacity: 1;
    transform: rotateY(180deg);
}

.cib-effect-flip_right .cib-item.has-hover:hover .cib-media-inner {
    transform: rotateY(180deg) scale(1.08);
}

.cib-effect-flip_right .cib-item.no-hover:hover .cib-media-inner {
    transform: rotateY(360deg) scale(1.08);
}