/* Thierry Content Studio v1.2.1 - Home carousel */
/* =========================================================
   HOME SOCIAL CAROUSEL - KREAM STYLE
========================================================= */

.tcs-home-social {
    width: 100%;
    background: #fff;
    padding: 64px 0 78px;
    color: #111;
}

.tcs-home-social-container {
    width: 100%;
}

.tcs-home-social-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;

    /* 카드 시작/끝 선과 정확히 맞추기: 캐러셀 화살표 gutter와 동일 */
    padding-left: 30px;
    padding-right: 30px;
}

.tcs-home-social-title {
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.025em;
}

.tcs-home-social-more {
    color: #999;
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
}

.tcs-home-social-more:hover {
    color: #111;
}

.tcs-home-carousel {
    position: relative;
    width: 100%;
    box-sizing: border-box;

    /*
     * KREAM처럼 캐러셀 좌우에 화살표 전용 gutter를 항상 확보합니다.
     * 화살표가 숨겨져도 이 공간은 유지되므로 창 폭이 줄어들어도
     * 카드가 컨테이너 끝까지 답답하게 붙지 않습니다.
     */
    padding-left: 30px;
    padding-right: 30px;
}

.tcs-home-viewport {
    width: 100%;
    overflow: hidden;
}

.tcs-home-track {
    display: grid;
    grid-auto-flow: column;

    /*
     * PC 한 화면 5개는 유지하되 카드 사이 간격을 조금 넓혀
     * 기존보다 카드 자체가 살짝 작아 보이도록 조정합니다.
     */
    grid-auto-columns: calc((100% - 32px) / 5);
    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tcs-home-track::-webkit-scrollbar {
    display: none;
}

.tcs-home-card {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
}

.tcs-home-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #eee;
    border-radius: 0;
}

.tcs-home-card-placeholder {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f1f1f1;
    color: #777;
    font-size: 13px;
    text-align: center;
}

.tcs-home-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    transition: transform .28s ease, opacity .2s ease;
}

.tcs-home-card:hover .tcs-home-card-media img {
    transform: scale(1.012);
    opacity: .97;
}

.tcs-home-arrow {
    position: absolute;
    top: 50%;
    z-index: 6;

    /* 화살표 전용 gutter 안에만 존재: 카드 이미지를 침범하지 않음 */
    width: 30px;
    height: 48px;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;

    /* KREAM처럼 평소에는 숨기고 캐러셀 hover/focus 때만 노출 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.tcs-home-carousel:hover .tcs-home-arrow:not(.is-hidden),
.tcs-home-carousel:focus-within .tcs-home-arrow:not(.is-hidden) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tcs-home-arrow.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.tcs-home-arrow-prev {
    left: 0;
}

.tcs-home-arrow-next {
    right: 0;
}

.tcs-home-arrow span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 1.25px solid #9a9a9a;
    border-right: 1.25px solid #9a9a9a;
    transition: border-color .16s ease;
}

.tcs-home-arrow:hover span,
.tcs-home-arrow:focus-visible span {
    border-color: #222;
}

.tcs-home-arrow:focus-visible {
    outline: none;
}

.tcs-home-arrow-next span {
    transform: translate(-68%, -50%) rotate(45deg);
}

.tcs-home-arrow-prev span {
    transform: translate(-32%, -50%) rotate(-135deg);
}

@media (min-width: 768px) and (max-width: 1024px) {

    .tcs-home-social-head {
        padding-left: 26px;
        padding-right: 26px;
    }

    .tcs-home-carousel {
        padding-left: 26px;
        padding-right: 26px;
    }

    .tcs-home-track {
        grid-auto-columns: calc((100% - 16px) / 3);
        gap: 8px;
    }

    .tcs-home-arrow {
        width: 26px;
    }
}

@media (max-width: 767px) {

    /*
     * 모바일에서는 Blocksy의 .ct-container 여백 자체를 제거합니다.
     * 이전 버전처럼 자식 요소에서 100vw를 계산하면 테마의 컨테이너 폭/패딩에
     * 따라 실제 위치가 바뀔 수 있어, Instagram과 같은 고정 16px 시작선을
     * 만들기 어려웠습니다. 컨테이너를 먼저 viewport 전체폭으로 만든 뒤
     * 프로필 영역에만 16px 여백을 다시 부여합니다.
     */

    /* KREAM 모바일처럼 설명은 프로필 사진/이름 줄 아래 전체 폭 */

    /* 모바일: 게시물 수를 피드 1열 카드의 정중앙에 맞춥니다. */

    /* 모바일 Instagram/KREAM 피드 느낌: 3열 */

    .tcs-home-social {
        /* v1.1.7에서 확정한 모바일 상/하 여백 */
        padding: 30px 0 36px;
    }

    .tcs-home-social-head {
        margin-bottom: 10px;

        /* KREAM 모바일처럼 제목/더보기를 화면 끝에서 살짝 안쪽으로 */
        padding-left: 16px;
        padding-right: 16px;
    }

    .tcs-home-social-title {
        font-size: 17px;
    }

    .tcs-home-social-more {
        font-size: 12px;
    }

    .tcs-home-carousel {
        padding-left: 0;
        padding-right: 0;
    }

    .tcs-home-viewport {
        width: 100%;
        overflow: hidden;
    }

    .tcs-home-track {
        /*
         * KREAM 모바일 비율:
         * 첫 진입/맨 왼쪽에서는 첫 카드 앞에 16px 여백을 유지합니다.
         * 이후 카드를 넘기면 이 여백은 함께 스크롤되어 사라지고,
         * 다음 카드부터는 화면 왼쪽에 붙을 수 있습니다.
         *
         * mandatory snap이 첫 카드의 시작점을 자동으로 0px에 맞추며
         * padding-left를 먹어버리는 Safari 동작을 피하기 위해
         * 모바일에서는 proximity snap으로 완화합니다.
         */
        grid-auto-columns: 44vw;
        gap: 4px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
        scroll-padding-left: 0;
        scroll-snap-type: x proximity;

        /*
         * 중요: pan-x만 지정하면 iOS Safari가 이 영역에서 시작한
         * 세로 제스처를 body 스크롤로 넘기지 못합니다.
         * 좌우 카드 스와이프와 페이지 세로 스크롤을 둘 다 허용합니다.
         */
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* 첫 카드는 snap 대상에서 제외해 시작 여백 16px이 실제로 보이게 함 */
    .tcs-home-card:first-child {
        scroll-snap-align: none;
    }

    /*
     * 카드(a 태그) 위에서 시작한 세로 스와이프도 페이지 스크롤로 처리.
     * 링크 탭 동작은 기존 JS fallback이 그대로 유지합니다.
     */
    .tcs-home-card,
    .tcs-home-card-media,
    .tcs-home-card-media img {
        touch-action: pan-x pan-y;
    }

    .tcs-home-arrow {
        display: none;
    }
}