@charset "utf-8";
/* ===== 실제 장례식장 비용 사례 — 연속 흐름 슬라이더 (place_case) ===== */
/* PC: 가로 연속 흐름 / 모바일: 세로 연속 흐름. 트랙은 카드 2벌(복제)로 끊김 없는 루프 */

.ecs-wrap{
    overflow:hidden;
    width:100%;
    max-width:1400px;
    margin:0 auto;
    box-sizing:border-box;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.ecs-track{
    display:flex;
    flex-direction:row;
    gap:16px;
    width:max-content;
    animation:ecsFlowX 55s linear infinite;
}
.ecs-wrap:hover .ecs-track{ animation-play-state:paused; }

@keyframes ecsFlowX{
    from{ transform:translateX(0); }
    to  { transform:translateX(-50%); }
}

/* 카드 (PC: 사진 위 / 텍스트 아래) */
.ecs-card{
    flex:0 0 230px;
    width:230px;
    display:flex;
    flex-direction:column;
    text-align:left; /* 상위 .funeral-cost-wrap의 text-align:center 상속 차단 */
    background:#fff;
    border:1px solid #e8ebef;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease;
    font-family:'NanumSquareRound',sans-serif;
}
.ecs-card:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.10); }

.ecs-img{
    width:100%;
    height:138px;
    background-size:cover;
    background-position:center;
    background-color:#dde3ea;
    flex:0 0 auto;
}
.ecs-info{ padding:11px 13px 13px; }
.ecs-name{
    font-size:15px; font-weight:800; color:#1a2330;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ecs-meta{ font-size:12.5px; color:#8a929c; font-weight:600; margin-top:7px; }
.ecs-tot{ font-size:13px; color:#3a4452; font-weight:700; margin-top:9px; }
.ecs-tot b{ color:#d4272d; font-size:16px; font-weight:800; }

/* ===== 모바일: 세로 연속 흐름 ===== */
@media (max-width:768px){
    .ecs-wrap{
        height:340px;
        margin:0 10px;
        touch-action:pan-y; /* 영역 위에서 위아래로 쓸면 페이지가 스크롤되도록 양보 */
        -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
                mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
    }
    .ecs-track{
        flex-direction:column;
        gap:11px;
        width:auto;
        animation:ecsFlowY 42s linear infinite;
    }
    @keyframes ecsFlowY{
        from{ transform:translateY(0); }
        to  { transform:translateY(-50%); }
    }
    /* 카드 (모바일: 사진 왼쪽 / 텍스트 오른쪽, 가로형 사진) */
    .ecs-card{
        flex:0 0 auto;
        width:auto;
        flex-direction:row;
        gap:13px;
        padding:13px;
        border-radius:12px;
        box-shadow:0 1px 6px rgba(0,0,0,.04);
    }
    .ecs-card:hover{ transform:none; box-shadow:0 1px 6px rgba(0,0,0,.04); }
    .ecs-img{
        width:150px; height:104px; flex:0 0 150px;
        border-radius:9px;
    }
    .ecs-info{
        flex:1; min-width:0; padding:0;
        display:flex; flex-direction:column; justify-content:center;
    }
    .ecs-name{ font-size:13.5px; }
    .ecs-meta{ font-size:11px; margin-top:12px; }
    .ecs-tot{ font-size:12px; margin-top:12px; }
    .ecs-tot b{ font-size:14.5px; }
}