/* ========================================
   Section5: PIDIAN AI
   ======================================== */
.pidian-section {
    width: 100%;
    max-width: 1440px;
    height: clamp(840px, 84.31vw, 1214px);
    margin: 0 auto;
    padding: 0;
    background: white;
    position: relative;
}

.pidian-container {
    position: relative;
    padding: clamp(88px, 8.89vw, 128px) 0 0;
}

/* 텍스트 영역 */
.pidian-text {
    width: clamp(566px, 73.61vw, 1060px);
    height: auto;
    margin: 0 auto clamp(88px, 8.89vw, 128px);
}

.pidian-text-main {
    width: 100%;
    margin: 0 auto;
}

/* PIDIAN AI 서브타이틀 */
.pidian-subtitle {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 700;
    line-height: 1.33;
    color: #000;
    margin: 0 0 clamp(16px, 1.67vw, 24px) 0;
    text-align: center;
}

/* 메인 타이틀 */
.pidian-title {
    font-size: clamp(36px, 3.89vw, 56px);
    font-weight: 700;
    line-height: 1.29;
    color: #000;
    margin: 0 0 clamp(16px, 1.67vw, 24px) 0;
    text-align: center;
}

/* 설명 텍스트 */
.pidian-description {
    font-size: clamp(18px, 1.67vw, 24px);
    font-weight: 500;
    line-height: 1.33;
    color: #666;
    margin: 0;
    text-align: center;
}

/* 이미지 영역 */
.pidian-image-area {
    position: relative;
    left: clamp(101px, 13.19vw, 190px);
    width: clamp(566px, 73.61vw, 1060px);
    height: clamp(360px, 36.53vw, 526px);
}

/* 배경 (Atomic/Green/95) */
.pidian-background {
    position: absolute;
    left: 0;
    top: clamp(156px, 15.83vw, 228px);
    width: 100%;
    height: clamp(205px, 20.69vw, 298px);
    background: #F0FDF4;
    border-radius: clamp(16px, 1.67vw, 24px);
}

/* 이미지 래퍼 (테두리 포함) */
.pidian-image-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 74.43%;
    height: clamp(360px, 36.53vw, 526px);
    border-radius: clamp(16px, 1.67vw, 24px);
    border: 2px solid #E5E7EB;
    overflow: hidden;
    background: white;
}

.pidian-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========================================
   PIDIAN Mobile Styles
   ======================================== */
@media (max-width: 767px) {
    /* vw 반응형 (375px 기준) */
    .pidian-section {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 5.33vw 25.6vw 5.33vw !important;
        background: white !important;
        box-sizing: border-box !important;
        height: auto !important;
    }

    .pidian-container {
        display: block !important;
        width: 89.33vw !important;
        height: 120.27vw !important;
        padding: 0 !important;
        position: relative !important;
    }

    .pidian-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 3.73vw !important;
        width: 89.33vw !important;
        height: 60.27vw !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        text-align: center !important;
    }

    .pidian-text-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 3.73vw !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    .pidian-subtitle {
        font-size: 5.87vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: #000000 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .pidian-title {
        font-size: 7.47vw !important;
        font-weight: 700 !important;
        line-height: 1.36 !important;
        color: #000000 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .pidian-description {
        font-size: 3.47vw !important;
        font-weight: 500 !important;
        line-height: 1.38 !important;
        color: rgba(55, 56, 60, 0.61) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .pidian-image-area {
        display: block !important;
        width: 89.33vw !important;
        height: 42.93vw !important;
        position: static !important;
    }

    .pidian-background {
        display: block !important;
        width: 89.33vw !important;
        height: 25.07vw !important;
        background: #E6FCF3 !important;
        box-shadow: 0px 0px 0.67vw rgba(0, 0, 0, 0.08) !important;
        border-radius: 2.4vw !important;
        position: absolute !important;
        top: 95.2vw !important;
        left: 0 !important;
        bottom: auto !important;
        z-index: 0 !important;
    }

    .pidian-image-wrapper {
        width: 66.4vw !important;
        height: 42.93vw !important;
        position: absolute !important;
        top: 77.33vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 1 !important;
        background: transparent !important;
        overflow: visible !important;
        border: none !important;
        margin: 0 !important;
    }

    .pidian-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
}