/* =========================================
   Section Number Overlay
   ========================================= */

.gb-overlap {
    display: grid;
    place-items: center;
    justify-items: center;
    position: relative;
    margin-bottom: 1rem;
}

.gb-overlap > * {
    grid-area: 1 / 1;
}

/* Background Number */

.gb-overlap-number {
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 700;
    line-height: 1;
    color: #d9d9d9;
    opacity: 0.7;
    z-index: 1;
    user-select: none;
}

/* Front Text */

.gb-overlap-text {
    font-size: clamp(28px, 8vw, 100px);
    font-weight: 700;
    line-height: 1;
    color: #9c6234;
    z-index: 2;

    /* 숫자 위쪽으로 조금 이동 */
    transform: translateY(20%);
}
:root{
    --container-width:1440px;
    --container-padding:30px;
}
.gb-container-wide{

    width:100%;
    max-width:var(--container-width);
    padding-inline:var(--container-padding);
    margin-inline:auto;
    box-sizing:border-box;
	margin-bottom:200px;
}
.highlight-strong strong {
    font-weight: 700;
    background-image: linear-gradient(#eae3dc, #eae3dc);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-position: left bottom;
}
.entry-header {
    display: none;
}


/* ===========================
   YAAN Signature Auto Slider
=========================== */

/* 바깥 영역 */
.signature-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

/* 카드 트랙 */
.signature-track{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    width:max-content;
    animation:signatureScroll 30s linear infinite;
    will-change:transform;
}

/* 카드 */
.signature-track > *{
    flex:0 0 320px;
}

/* 마우스를 올리면 일시정지 */
.signature-track:hover{
    animation-play-state:paused;
}

/* 무한 롤링 */
@keyframes signatureScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* 태블릿 */
@media (max-width:1024px){

.signature-track{
    gap:20px;
    animation-duration:25s;
}

.signature-track > *{
    flex:0 0 280px;
}

}

/* 모바일 */
@media (max-width:768px){

.signature-track{
    gap:16px;
    animation-duration:18s;
}

.signature-track > *{
    flex:0 0 240px;
}

}

/* 사진 두개 살짝 기울여서 겹치기 */
.photo-overlap{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:-60px;
    position:relative;
    overflow:visible;
    padding:40px 0;
}

/* 공통 */
.photo-overlap img{
    width:320px;
    max-width:48%;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    transition:all .35s ease;
}

@keyframes float-left {
    0%,100%{
        transform: rotate(-7deg) translateY(0);
    }
    50%{
        transform: rotate(-7deg) translateY(-20px);
    }
}

@keyframes float-right {
    0%,100%{
        transform: rotate(7deg) translateY(0);
    }
    50%{
        transform: rotate(7deg) translateY(20px);
    }
}

/* 왼쪽 */
.photo-left{
    transform:rotate(-7deg);
    z-index:1;
    animation:float-left 4s ease-in-out infinite;
}

/* 오른쪽 */
.photo-right{
    transform:rotate(7deg);
    margin-left:-70px;
    z-index:2;
    animation:float-right 4s ease-in-out infinite;
}

/* Hover */
.photo-overlap img:hover{
    animation-play-state: paused;
}


/* ===========================
   FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* ===========================
   Premium FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* 질문 */

.wp-block-details summary{

    list-style:none;
    cursor:pointer;

    display:flex;
    align-items:center;

    padding:22px 0;

    font-size:22px;
    font-weight:600;
    line-height:1.5;

    color:#222;

    transition:color .25s ease;

}

/* 기본 삼각형 제거 */

.wp-block-details summary::-webkit-details-marker{

    display:none;

}

.wp-block-details summary::marker{

    display:none;

}

/* 왼쪽 Search SVG */

.wp-block-details summary::before{

    content:"";

    width:28px;
    height:28px;

    flex:0 0 28px;

    margin-right:14px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:28px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E73BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16L21 21'/%3E%3C/svg%3E");

}

/* 오른쪽 + */

.wp-block-details summary::after{

    content:"+";

    margin-left:auto;

    font-size:28px;
    font-weight:300;
    line-height:1;

    color:#999;

    transition:.25s ease;

}

/* 열린 상태 */

.wp-block-details[open] summary::after{

    content:"−";

    color:#1E73BE;

}

/* Hover */

.wp-block-details summary:hover{

    color:#1E73BE;

}

/* 답변 */

.wp-block-details > div{

    padding:0 0 28px 34px;

    color:#666;

    font-size:17px;
    line-height:1.9;

}

/* 슬라이더 css + JS 약간 30kb 들어감*/
.slider-track{

    display:flex;
    gap:24px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    scrollbar-width:none;

}

.slider-track::-webkit-scrollbar{
    display:none;
}

.card{

    flex:0 0 320px;

    scroll-snap-align:start;

}
/* =========================================
   3단 배너 사선 넣고 멀티플레스. Banner Stack
   ========================================= */

.banner-stack {
    position: relative;
    width: 100%;
    overflow: visible;
}


/* =========================================
   Individual Banner
   ========================================= */

.banner-stack > .banner {
    position: relative;
    min-height: 400px;
    margin-bottom: -70px;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*
     * 사선 형태
     */
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   Banner Layer / Stacking Order
   ========================================= */

.banner-stack > .banner-1 {
    z-index: 1;
}

.banner-stack > .banner-2 {
    z-index: 2;
}

.banner-stack > .banner-3 {
    z-index: 3;
}


/* =========================================
   Middle Banner - Opposite Angle
   ========================================= */
/* =========================================
   Clip Path
   1st: Top Horizontal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-1 {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   2nd: Top Diagonal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-2 {
    clip-path: polygon(
        0 0,
        100% 8%,
        100% 100%,
        0 92%
    );
}


/* =========================================
   3rd: Top Diagonal / Bottom Horizontal
   ========================================= */

.banner-stack > .banner-3 {
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 100%,
        0 100%
    );
}



/* =========================================
   Color Overlay
   ========================================= */

.banner-stack > .banner::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}


/* =========================================
   Banner 1 Overlay
   ========================================= */

.banner-stack > .banner-1::before {
    background: rgba(30, 50, 60, 0.38);

}


/* =========================================
   Banner 2 Overlay
   ========================================= */

.banner-stack > .banner-2::before {
    background: rgba(110, 65, 55, 0.42);
}


/* =========================================
   Banner 3 Overlay
   ========================================= */

.banner-stack > .banner-3::before {
    background: rgba(0, 0, 0, 0.45);
}


/* =========================================
   Content Layer
   ========================================= */

.banner-stack > .banner > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   Text / Content Position
   ========================================= */

.banner-stack .banner-content {
    position: relative;
    z-index: 2;
}
@media (max-width: 767px) {
    .design-wrap.gb-element-45008d9f {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 768px) {

    .banner-stack > .banner {
        min-height: 260px;
        margin-bottom: -34px;

        clip-path: polygon(
            0 5%,
            100% 0,
            100% 95%,
            0 100%
        );
    }


    .banner-stack > .banner-2 {
        clip-path: polygon(
            0 0,
            100% 5%,
            100% 100%,
            0 95%
        );
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    .banner-stack > .banner {
        min-height: 220px;
        margin-bottom: -24px;
    }

}


/* =========================================
   전체 영역 사각형 배너 디자인
   ========================================= */

.design-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;

    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

    padding: 30px 0;
}


/* =========================================
   왼쪽 2 × 2 카드
   ========================================= */

.design-cards {
    position: relative;
    z-index: 3;
    width: 100%;

    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================
   각각의 카드
   ========================================= */

.design-card {
    position: relative;

    min-height: 200px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 35px 25px;

    box-sizing: border-box;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   카드 내부 테두리
   ========================================= */

.design-cards::after {           /* ← .design-card::after 에서 이동 */
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid #e59a52;
    pointer-events: none;
    z-index: 1;
}


/* =========================================
   카드 숫자
   ========================================= */

.design-card::before {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
}


/* =========================================
   주황색 카드
   ========================================= */

.card-01,
.card-04 {
    background: #f57c00;
}

/* =========================================
   카드 콘텐츠
   ========================================= */

.design-card > * {
    position: relative;

    z-index: 2;
}



/* =========================================
   제목 밑의 작은 선
   ========================================= */

.design-card h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin: 15px auto 0;

    background: #df7620;
}


/* 주황색 카드의 선 */

.card-01 h3::after,
.card-04 h3::after {
    background: rgba(255, 255, 255, 0.8);
}

/* 주황색 카드 설명 */

.card-01 p,
.card-04 p {
    color: rgba(255, 255, 255, 0.9);
}


/* =========================================
   오른쪽 설명 박스
   ========================================= */

.design-info {
    position: relative;
    z-index: 1;

    min-height: 310px;

    margin-left: -1px;

    padding: 60px 70px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #e59a52;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   오른쪽 박스 제목
   ========================================= */

.design-info h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 20px;

    font-size: 27px;
    line-height: 1.4;

    color: #df7620;

    font-weight: 500;
}


/* =========================================
   오른쪽 설명
   ========================================= */

.design-info p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #777;
}


/* =========================================
   오른쪽 워터마크
   ========================================= */

.design-info::after {
    content: "Yaan Clinic Gang-Nam";

    position: absolute;

    left: 20px;
    bottom: 5px;

    white-space: nowrap;

    font-size: 62px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

    color: rgba(245, 130, 20, 0.045);

    z-index: 1;

    pointer-events: none;
}


/* =========================================
   모바일
   ========================================= */

@media (max-width: 768px) {

    .design-wrap {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }


    .design-cards {
        width: 100%;
    }


    .design-card {
        min-height: 180px;

        padding: 30px 15px;
    }


    .design-card h3 {
        font-size: 19px;
    }


    .design-card p {
        font-size: 13px;
    }


    .design-info {
        min-height: 280px;

        margin-left: 0;

        padding: 50px 30px;
    }


    .design-info h2 {
        font-size: 24px;
    }


    .design-info::after {
        font-size: 42px;
        left: 10px;
    }
}


/* =========================================
   작은 모바일
   ========================================= */

@media (max-width: 480px) {

    .design-card {
        min-height: 160px;

        padding: 25px 10px;
    }


    .design-card::before {
        font-size: 55px;
    }


    .design-card h3 {
        font-size: 17px;

        margin-bottom: 20px;
    }


    .design-card p {
        font-size: 12px;
        line-height: 1.5;
    }


    .design-info {
        padding: 40px 20px;
    }

}

/* ===== 카드 폭 (잘림 방지 핵심) ===== */
.gb-element-39ba0ee7 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .gb-element-39ba0ee7 {
        width: 100% !important;
        margin-top: -40px !important;
    }
}

/* ===== 타임라인 01 ===== */
.care-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    padding: 50px 60px 30px;
    text-align: center;
}
.care-timeline-item { display: flex; flex-direction: column; align-items: center; }
.care-timeline-title { font-size: 18px; font-weight: 700; color: #333; margin: 0; }

.care-timeline-stem {
    position: relative;
    width: 0;
    height: 26px;
    margin-top: 10px;
    border-left: 1px dotted #aaa;
}
.care-timeline-stem::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a6bb5;
    z-index: 2;
}

.care-timeline-track {
    grid-column: 1 / -1;
    position: relative;
    height: 3px;
    margin: 0 0 25px;
    background: linear-gradient(90deg, #cfe8f0 0%, #b9a8e0 100%);
}
.care-timeline-track::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid #b9a8e0;
    transform: translateY(-50%);
}

.care-timeline-desc { font-size: 14px; line-height: 1.7; color: #666; margin: 0; }

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .care-timeline {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .care-timeline-track,
    .care-timeline-stem {
        display: none;
    }

    .care-timeline-item:nth-child(1) { order: 1; }
    .care-timeline-item:nth-child(6) { order: 2; margin-bottom: 22px; }
    .care-timeline-item:nth-child(2) { order: 3; }
    .care-timeline-item:nth-child(7) { order: 4; margin-bottom: 22px; }
    .care-timeline-item:nth-child(3) { order: 5; }
    .care-timeline-item:nth-child(8) { order: 6; margin-bottom: 22px; }
    .care-timeline-item:nth-child(4) { order: 7; }
    .care-timeline-item:nth-child(9) { order: 8; }

    .care-timeline-title::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #7a6bb5;
        margin-right: 6px;
        vertical-align: middle;
    }
}


/* ===== recommand for 조정 ===== */
.numbered-row-item {
    position: relative;
    margin-top: 35px;
}
.numbered-row-number {
    position: absolute;
    top: -35px;
    left: 15px;
    z-index: 2;
    font-size: 65px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}
.numbered-row-text {
    position: relative;
    z-index: 1;
    border: 1px solid var(--contrast-2);
    padding: 20px 20px 20px 75px;
    font-size: 30px;
    text-align: left;
    margin: 0;
}