/**
 * 찬양율동 콘텐츠(A) 구매/다운로드 목록 — 앨범형 (Zeplin Web 1280)
 * https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69c4d54edd9c50aff7ab13e3
 * 스킨: list.ttodrak-album.skin.php
 * 글꼴: Zeplin Pretendard — theme/head.sub.php Pretendard Variable CDN과 동일 스택(Variable 우선)
 */
#sct.tta-zeplin-page,
.tta-album-wrap,
.tta-zeplin {
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-synthesis: none;
}

/* 목록 하단(페이지네이션·검색): Zeplin과 동일 스택 강제 */
.tta-zeplin-page .tta-zeplin__list-foot {
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* ---------- Zeplin: 히어로 · 콘텐츠 안내 · 검색 ---------- */
.tta-zeplin {
    max-width: 1036px;
    margin: 0 auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 1068px) {
    .tta-zeplin {
        padding: 0;
    }
}

.tta-zeplin__subhead {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #e1f9fe;
    box-sizing: border-box;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    text-align: center;
}

/* ttodrak-2026 .tt6-page-title 동일: Zeplin 서브헤더 28/33 Regular */
.tta-zeplin__title {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 33px;
    letter-spacing: -0.02em;
    color: #000;
}

@media (min-width: 768px) {
    .tta-zeplin__title {
        font-size: 28px;
    }
}

/* 상품 검색(/shop/search.php): 프로모 셸 없음 — 서브헤더에 요약만 */
.tta-zeplin--search .tta-zeplin__subhead {
    flex-direction: column;
    gap: 10px;
}

.tta-zeplin__search-summary {
    margin: 0;
    max-width: 640px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
    color: #333;
    letter-spacing: -0.01em;
}

/* Zeplin mo: Component 50 — 시안 띠 + 제목만(콘텐츠 안내 없음, 블루 프로모 없음) */
@media (max-width: 576px) {
    .tta-zeplin__subhead {
        min-height: 100px;
        padding: 20px 16px;
    }

    .tta-zeplin__title {
        font-size: 24px;
        line-height: 29px;
        font-weight: 400;
        letter-spacing: -0.02em;
    }

    .tta-zeplin__promo-shell {
        display: none;
    }
}

/* 모바일 쇼핑몰 목록(/mobile/shop/list.php): Zeplin MO — UA·URL 기준, 뷰포트 폭과 무관 */
#sct.tta-zeplin-page--mshop .tta-zeplin__promo-shell {
    display: none;
}

/*
 * 반응형(PC shop/list.php, G5_IS_MOBILE 아님): 뷰포트로 Zeplin MO 전환
 * — 좁을 때: 더보기 + / 프로모 숨김 / 하단 풋(검색·페이지네이션) 없음 — 모바일 시안과 동일
 * — 넓을 때: 페이지네이션·검색(더보기 영역은 DOM에 두고 숨김)
 */
@media (min-width: 768px) {
    #sct.tta-zeplin-page--responsive .li_more {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #sct.tta-zeplin-page--responsive .li_more {
        display: block !important;
    }

    #sct.tta-zeplin-page--responsive .tta-zeplin__list-foot {
        display: none !important;
    }

    #sct.tta-zeplin-page--responsive .tta-zeplin__promo-shell {
        display: none;
    }
}

/* 모바일 쇼핑몰 URL(/mobile/shop/): 다른 스킨 규칙이 가리는 경우 대비 */
#sct.tta-zeplin-page--mshop .li_more {
    display: block !important;
}

/* Zeplin Group 3816: 1036×80, r24, #0096e3 + Mask(패턴 10%·테두리 #707070) */
.tta-zeplin__promo-shell {
    max-width: 1036px;
    margin: 24px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 1068px) {
    .tta-zeplin__promo-shell {
        padding: 0;
    }
}

.tta-zeplin__promo {
    position: relative;
    width: 100%;
    height: 80px;
    min-height: 80px;
    border-radius: 24px;
    background: #0096e3;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Zeplin Mask Group 215: 배경 패턴 — 금색 #ffdc48 물방울(타원) 격자, opacity 0.1 + overlay (SVG 내보내기 PNG) */
.tta-zeplin__promo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: url("../img/tta-zeplin-promo-mask215.png") center / 100% 100% no-repeat;
}

.tta-zeplin__promo-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
}

/* 버튼 142×32, Pretendard-Bold 14/16 (Zeplin Group 3813) */
.tta-zeplin__promo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 142px;
    min-width: 142px;
    height: 32px;
    padding: 0 12px 0 10px;
    border-radius: 24px;
    background: #333;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.tta-zeplin__promo-btn:hover {
    color: #fff;
    background: #444;
}

.tta-zeplin__promo-btn-ic {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    opacity: 0.62;
}

/* 본문 Pretendard-Regular 20/24 #fff — Group 3813 */
.tta-zeplin__promo-text {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    text-align: left;
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #fff;
}

/* Mask Group 214: 64×64 슬롯 — 내보낸 PNG는 투명 여백+일러만(흰 타일·래퍼 그림자 없음). .sct 등 전역 img 스타일 무력화 */
.tta-zeplin__promo .tta-zeplin__promo-mascot {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.tta-zeplin__promo .tta-zeplin__promo-mascot img {
    display: block;
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    object-fit: contain;
}

@media (max-width: 576px) {
    .tta-zeplin__promo {
        height: auto;
        min-height: 80px;
        padding: 12px 14px;
    }

    .tta-zeplin__promo-inner {
        max-width: none;
        justify-content: center;
    }

    .tta-zeplin__promo-text {
        font-size: 17px;
        line-height: 22px;
        flex-basis: 100%;
        text-align: center;
        order: 3;
    }

    .tta-zeplin__promo-btn {
        order: 1;
    }

    .tta-zeplin__promo-mascot {
        order: 2;
    }
}

/* Zeplin 목록 하단: 페이지네이션·검색 필드 공통 테두리 #dedede (제플린 Rectangle 2402 등) */
.tta-zeplin__foot-search {
    width: 100%;
    max-width: 1036px;
    margin: 0 auto;
}

/* Zeplin Group 3776: 회색 띠 없음 — 셀렉트·입력·돋보기만 4px 간격, 흰 필드 + #b2b2b2 테두리 */
#sct.tta-zeplin-page .tta-zeplin__search,
.tta-zeplin__search {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 0;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 402px;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    gap: 4px;
    box-shadow: none;
}

#sct.tta-zeplin-page .tta-zeplin__search-select,
.tta-zeplin__search-select {
    flex: 0 0 130px;
    width: 130px;
    max-width: 130px;
    height: 38px;
    padding: 0 28px 0 12px;
    margin: 0;
    border: 1px solid #dedede;
    border-radius: 4px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23333333' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #666;
    box-sizing: border-box;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    vertical-align: middle;
}

#sct.tta-zeplin-page .tta-zeplin__search-field,
.tta-zeplin__search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

#sct.tta-zeplin-page .tta-zeplin__search-input,
#sct.tta-zeplin-page .tta-zeplin__search input[type="search"].tta-zeplin__search-input,
.tta-zeplin__search-input,
.tta-zeplin__search input[type="search"].tta-zeplin__search-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 38px;
    padding: 0 36px 0 12px;
    margin: 0;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #333;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    vertical-align: middle;
    -webkit-appearance: none;
}

#sct.tta-zeplin-page .tta-zeplin__search input::placeholder,
.tta-zeplin__search input::placeholder {
    color: #bcbcbc;
    opacity: 1;
}

#sct.tta-zeplin-page .tta-zeplin__search input::-webkit-search-cancel-button,
.tta-zeplin__search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* 제플린: 돋보기는 입력 필드 오른쪽 안쪽(별도 버튼 칸 없음) */
#sct.tta-zeplin-page .tta-zeplin__search-btn,
.tta-zeplin__search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #111;
    cursor: pointer;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    flex-shrink: 0;
}

#sct.tta-zeplin-page .tta-zeplin__search-ic,
.tta-zeplin__search-ic {
    display: block;
    flex-shrink: 0;
}

#sct.tta-zeplin-page .tta-zeplin__search-btn:hover,
.tta-zeplin__search-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

#sct.tta-zeplin-page .tta-zeplin__search-btn:focus-visible,
.tta-zeplin__search-btn:focus-visible {
    outline: 2px solid #0096e3;
    outline-offset: 2px;
}

#sct.tta-zeplin-page .tta-zeplin__search-select:focus-visible,
#sct.tta-zeplin-page .tta-zeplin__search-input:focus-visible,
.tta-zeplin__search-select:focus-visible,
.tta-zeplin__search-input:focus-visible {
    border-color: #b2b2b2;
    outline: none;
}

/* 검색 블록: default_shop 본문 글꼴이 덮는 경우 대비 */
#sct.tta-zeplin-page .tta-zeplin__foot-search,
#sct.tta-zeplin-page .tta-zeplin__search {
    font-family: "Pretendard Variable", Pretendard, "PretendardVariable", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* ---------- 하단: 페이지네이션 + 상품명 검색 ---------- */
.tta-zeplin__list-foot {
    max-width: 1036px;
    margin: 40px auto 0;
    padding: 28px 16px 0;
    box-sizing: border-box;
    border-top: 0;
}

@media (min-width: 1068px) {
    .tta-zeplin__list-foot {
        padding: 28px 0 0;
    }
}

.tta-zeplin__list-foot-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Component 90 하단(1859) → Group 3776 상단(1889) = 30px */
    gap: 30px;
}

.tta-zeplin__list-foot-paging {
    width: 100%;
    text-align: center;
}

/* Zeplin 페이지네이션 — default_shop .pg_start~.pg_end 가 text-indent:-999 + GIF 라 글자 숨김·빈 칸 현상 → 초기화 */
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg .pg_start,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg .pg_prev,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg .pg_next,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg .pg_end {
    text-indent: 0 !important;
    overflow: visible !important;
    background-image: none !important;
    background-position: 0 0 !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

/* Zeplin 페이지네이션 — default_shop .pg_* 덮어쓰기(#sct로 특이도 확보), float 제거 */
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg_wrap {
    float: none !important;
    display: block !important;
    width: 100%;
    clear: both;
    margin: 0 !important;
    padding: 0;
    text-align: center;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    float: none !important;
    vertical-align: middle;
}

/* 공통 셀: 32×30, Medium 12/14 */
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg strong.pg_current {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    height: 30px;
    padding: 0 6px;
    margin: 0;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 14px !important;
    letter-spacing: -0.02em;
    border-radius: 4px;
    text-decoration: none !important;
    vertical-align: middle;
    flex-shrink: 0;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_start,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_end,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_start,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_end {
    min-width: 38px;
    max-width: none;
    padding: 0 2px;
    white-space: nowrap;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_prev,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_next,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_prev,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_next {
    min-width: 32px;
    max-width: 32px;
    padding: 0;
    white-space: nowrap;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}

/* Zeplin: <<  <  …  > (빨강)  >> */
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_start::before,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_start::before {
    content: "<<";
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.12em;
    color: #111;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_prev::before,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_prev::before {
    content: "<";
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #111;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_next::before,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_next::before {
    content: ">";
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #ff5151;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_end::before,
#sct.tta-zeplin-page .tta-zeplin__list-foot .pg span.pg_page.pg_end::before {
    content: ">>";
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.12em;
    color: #111;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page {
    background: #fff !important;
    border: 1px solid #dedede !important;
    color: #333 !important;
    box-shadow: none !important;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page:hover {
    background: #fafafa !important;
    border-color: #d0d0d0 !important;
    color: #111 !important;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page.pg_next:hover::before {
    color: #e04040 !important;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg a.pg_page:focus-visible {
    outline: 2px solid #0096e3;
    outline-offset: 2px;
}

#sct.tta-zeplin-page .tta-zeplin__list-foot .pg strong.pg_current {
    background: #2c4e6c !important;
    border: 1px solid #2c4e6c !important;
    color: #fff !important;
    font-weight: 500 !important;
    cursor: default;
    box-shadow: none !important;
}

@media (max-width: 576px) {
    #sct.tta-zeplin-page .tta-zeplin__search--foot,
    .tta-zeplin__search--foot {
        flex-wrap: wrap;
        align-items: stretch;
        max-width: none;
    }

    #sct.tta-zeplin-page .tta-zeplin__search--foot .tta-zeplin__search-select,
    .tta-zeplin__search--foot .tta-zeplin__search-select {
        flex: 1 1 100%;
        max-width: none;
        width: 100%;
    }

    #sct.tta-zeplin-page .tta-zeplin__search--foot .tta-zeplin__search-field,
    .tta-zeplin__search--foot .tta-zeplin__search-field {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* ---------- Zeplin: 프로모 바로 아래 회색 띠(48) — 총 n건 + 필터 ---------- */
.tta-zeplin-page #sct_sortlst.tta-zeplin-sortlst {
    max-width: 1036px;
    width: 100%;
    margin: 32px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 1068px) {
    .tta-zeplin-page #sct_sortlst.tta-zeplin-sortlst {
        padding: 0;
    }
}

.tta-zeplin__toolbar-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    box-sizing: border-box;
    background: #e9e9e9;
    border-radius: 8px;
}

.tta-zeplin__toolbar-strip .tta-zeplin__total {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #333;
}

.tta-zeplin__total-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* PC·모바일 공통: 인라인 3필터 대신 «상품정렬» 드롭다운 */
.tta-zeplin__filters {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
    text-align: right;
    font-family: inherit;
}

.tta-zeplin__sort-details {
    position: relative;
    display: inline-block;
    text-align: right;
}

.tta-zeplin__sort-summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #333;
    -webkit-user-select: none;
    user-select: none;
}

.tta-zeplin__sort-summary::-webkit-details-marker {
    display: none;
}

.tta-zeplin__sort-summary-text {
    display: inline-block;
}

.tta-zeplin__sort-chevron {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5px solid #333;
    margin-top: 1px;
    transition: transform 0.15s ease;
}

.tta-zeplin__sort-details[open] .tta-zeplin__sort-chevron {
    transform: rotate(180deg);
}

.tta-zeplin__sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tta-zeplin__sort-option {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-bottom: 1px solid #d4d4d4;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    color: #000;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.tta-zeplin__sort-option:last-child {
    border-bottom: 0;
}

.tta-zeplin__sort-option:hover,
.tta-zeplin__sort-option:focus-visible {
    background: #f7f7f7;
    outline: none;
}

@media (max-width: 576px) {
    /* Group 3295: 전폭 구분선, 40px 띠 */
    .tta-zeplin-page #sct_sortlst.tta-zeplin-sortlst {
        margin-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .tta-zeplin__toolbar-strip {
        min-height: 40px;
        padding: 0 16px;
        column-gap: 12px;
        row-gap: 0;
        background: #fff;
        border-radius: 0;
        box-shadow: none;
        align-items: center;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
    }

    .tta-zeplin__toolbar-strip .tta-zeplin__total {
        margin: 0;
        font-size: 13.5px;
        line-height: 16px;
        letter-spacing: -0.02em;
        color: #000;
        font-weight: 400;
    }

    .tta-zeplin__toolbar-strip .tta-zeplin__total-num {
        font-weight: 400;
    }

    .tta-zeplin__sort-summary {
        font-size: 13.5px;
        color: #000;
    }

    .tta-zeplin__sort-chevron {
        border-top-color: #000;
    }
}

/* ---------- 브레드크럼(영카트) 숨김 ---------- */
.tta-zeplin-page #sct_location {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

.tta-zeplin-page #sct_lst {
    display: none !important;
}

/* ---------- 앨범 그리드 (제플린 4열) ---------- */
.tta-album-wrap {
    max-width: 1036px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

@media (min-width: 1068px) {
    .tta-album-wrap {
        padding: 0;
    }
}

.tta-album__card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    border: 0;
    box-shadow: none;
}

.tta-album__link--thumb {
    display: block;
    text-decoration: none;
    color: inherit;
}

ul.tta-album {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    width: 100%;
}

.tta-zeplin-page ul.tta-album {
    margin-top: 32px;
}

@media (min-width: 768px) {
    ul.tta-album {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1068px) {
    ul.tta-album {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    ul.tta-album {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tta-zeplin__filters {
        justify-content: flex-start;
    }

    /* Zeplin (mo) 69c4d54df2d706b0c0dd1dcf — 360 기준 2열·12px 간격, 액션 세로 스택, 썸네일 radius 8 */
    .tta-zeplin-page ul.tta-album {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tta-zeplin-page .tta-album__card {
        border-radius: 8px;
    }

    .tta-zeplin-page .tta-album__link--thumb .tta-album__thumb {
        border-radius: 8px;
    }

    /* 모바일 액션/바로구매 스타일은 파일 하단에서 공통 규칙 이후에 재선언 (캐스케이드) */
}

.tta-album__item {
    margin: 0;
    padding: 0;
    min-width: 0;
}

.tta-album__thumb {
    position: relative;
    margin: 0;
    aspect-ratio: 1 / 1;
    background: #a2a2a2;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.tta-album__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 썸네일만 링크 */
.tta-album__link--thumb .tta-album__thumb {
    border-radius: 0;
}

/* 메인(home-main) 상품 버튼과 동일 마크업: .ttdr-home__product-actions */
.tta-zeplin-page .tta-album__card .tta-album__actions.ttdr-home__product-actions {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ttdr-z-product-actions-gap, 8px);
    margin: 0 0 var(--ttdr-z-product-actions-mb, 16px);
    padding: var(--ttdr-z-product-body-pt, 8px) 0 0;
    box-sizing: border-box;
}

/* 다운로드만 노출 시 장바구니·바로구매 자리를 한 행으로 대체 */
.tta-zeplin-page .tta-album__card .tta-album__actions.tta-album__actions--download-only {
    grid-template-columns: 1fr;
}

.tta-zeplin-page .tta-album__card .tta-album__actions.ttdr-home__product-actions.sct_btn {
    margin: 0 0 var(--ttdr-z-product-actions-mb, 16px);
}

/* 스킨 기본(.btn_cart)보다 우선: 메인과 동일 흰 배경 + 회색 테두리 + 호버는 home-main 톤 (--download 제외: 소프트 다운로드 버튼 유지) */
.tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--download) button,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--download) a {
    background: #fff !important;
    border: 1px solid #c9c9c9 !important;
    color: #333 !important;
}

.tta-zeplin-page .tta-album__card .ttdr-home__product-action--primary a:hover,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--primary a:focus-visible {
    border-color: #ff5151 !important;
    color: #ff5151 !important;
    background: #fff !important;
}

/* 데모 4번째(다운로드): Zeplin screen 69dda1fa — Component 68 (244×32, radius 16, #ffeeee / 2px #ebc9c9 / #ff5151) */
.tta-zeplin-page .tta-album__item--demo-download .tta-album__actions--download {
    display: flex;
    grid-template-columns: none;
}

.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 16px;
    border: 2px solid #ebc9c9;
    background: #ffeeee;
    color: #ff5151;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download:hover,
.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download:focus-visible {
    background: #ffe4e4;
    border-color: #ff5151;
    color: #ff5151;
    outline: none;
}

.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download-icon {
    display: flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}

.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download-icon svg {
    display: block;
    width: 20px;
    height: 21px;
}

.tta-zeplin-page .tta-album__item--demo-download .tta-album__btn-download-icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) .ttdr-home__btn-cart:hover,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) .ttdr-home__btn-cart:focus-visible {
    border-color: #ff5151 !important;
    color: #ff5151 !important;
    background: #fff !important;
}

.tta-zeplin-page .tta-album__card .ttdr-home__product-action--disabled button {
    background: #f9f9f9 !important;
    border: 1px solid #dfdfdf !important;
    color: #b9b9b9 !important;
}

/* 액션 행 margin-bottom으로 버튼→본문 간격(메인 토큰) — meta 상단 패딩은 0 */
.tta-zeplin-page .tta-album__card .tta-album__meta {
    padding: 0 0 14px;
    box-sizing: border-box;
}

.tta-album__meta {
    padding: 16px 0 14px;
    box-sizing: border-box;
}

.tta-album__meta .sct_star {
    margin: 0 0 6px;
}

.tta-album__name {
    margin: 0 0 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tta-album__name a {
    color: inherit;
    text-decoration: none;
}

.tta-album__name a:hover {
    text-decoration: underline;
}

/* 요약(it_basic)은 앨범 목록에서 출력하지 않음 — 스킨·set_view로 끔 */
.tta-zeplin-page .tta-album__basic {
    display: none !important;
}

.tta-album__cost {
    font-family: inherit;
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #333;
}

.tta-album__cost,
.tta-album__cost span {
    color: #333;
}

.tta-album__cost .sct_dict {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    color: #a1a1a1;
    text-decoration: line-through;
    text-decoration-color: #a4a4a4;
}

.tta-album__placeholder-note {
    max-width: 1036px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #5c4a12;
    background: #fff8e6;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
}

/* 메인 헤더(_TTDR_HOME_LAYOUT) 본문 */
.ttdr-home-body #container #sct.tta-zeplin-page {
    padding: 0 0 48px;
    box-sizing: border-box;
}

.ttdr-home-body #container #sct:not(.tta-zeplin-page) {
    padding: 24px 16px 48px;
}

/* 로딩 문구: PC 스킨에 #item_load_msg 기본 숨김이 없을 수 있음 */
.tta-zeplin-page #item_load_msg {
    display: none;
}

/*
 * Zeplin MO 더보기 (Group 3778 등)
 * — 라벨은 HTML «더보기 +»만 사용. ::after 십자 장식은 제거(이중 + 방지).
 * — 시안: 전체 너비 둥근 박스, 연한 테두리, 진한 브라운 그레이 텍스트
 */
.tta-zeplin-page .li_more {
    margin: 24px auto 0;
    padding: 0 16px;
    box-sizing: border-box;
    text-align: center;
    max-width: 1036px;
}

.tta-zeplin-page .li_more_btn {
    margin: 0;
    width: 100%;
}

.tta-zeplin-page #btn_more_item,
.tta-zeplin-page .li_more_btn button {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    height: auto;
    min-height: 48px;
    padding: 14px 20px;
    margin: 0;
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #47452a;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.tta-zeplin-page #btn_more_item::after,
.tta-zeplin-page .li_more_btn button::after {
    content: none !important;
    display: none !important;
}

.tta-zeplin-page #btn_more_item:hover,
.tta-zeplin-page .li_more_btn button:hover:not(:disabled) {
    background: #fafafa;
    border-color: #c8c8c8;
}

.tta-zeplin-page #btn_more_item:focus-visible,
.tta-zeplin-page .li_more_btn button:focus-visible {
    outline: 2px solid #0096e3;
    outline-offset: 2px;
}

/* 추가 페이지 없음(예시): 동일 박스, 텍스트·배경만 시안에 맞게 연하게 */
.tta-zeplin-page .li_more--sample .tta-zeplin__more-sample {
    opacity: 1;
    color: #8a8778;
    cursor: not-allowed;
    background: #f9f9f8;
    border-color: #e8e8e8;
}

.tta-zeplin-page .li_more--sample .tta-zeplin__more-sample::after {
    content: none !important;
    display: none !important;
}

/* 다운로드 전용 상품 — 썸네일 하단 배너 (디자인 시안) */
.tta-zeplin-page .tta-album__thumb--download-only {
    position: relative;
}

.tta-zeplin-page .tta-album__download-badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 7px 8px;
    box-sizing: border-box;
    background: #2e3192;
    color: #fff;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-align: center;
    border-radius: 0 0 12px 12px;
}

@media (max-width: 576px) {
    .tta-zeplin-page .tta-album__download-badge {
        border-radius: 0 0 8px 8px;
        font-size: 11px;
        padding: 6px 6px;
    }
}

/**
 * Zeplin (mo) 69c4d54df2d706b0c0dd1dcf — 액션 세로 스택·타이포·바로구매 강조
 * 반드시 .tta-album__actions 공통 선언(위쪽) 이후에 두어 덮어쓰기
 */
@media (max-width: 576px) {
    .tta-zeplin-page .tta-album__card .tta-album__actions.ttdr-home__product-actions:not(.tta-album__actions--download) {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-top: 8px;
    }

    .tta-zeplin-page .tta-album__item--demo-download .tta-album__actions--download {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding-top: 8px;
        gap: 0;
    }

    .tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--download) button,
    .tta-zeplin-page .tta-album__card .ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--download) a {
        font-size: 13.5px !important;
        line-height: 16px !important;
        letter-spacing: -0.27px !important;
        min-height: 32px;
        box-sizing: border-box;
        border-radius: 16px !important;
    }

    .tta-zeplin-page .tta-album__card .ttdr-home__product-action--primary a {
        background: #fff !important;
        border: 1px solid #ff5151 !important;
        color: #ff5151 !important;
    }

    .tta-zeplin-page .tta-album__card .ttdr-home__product-action--primary a:hover,
    .tta-zeplin-page .tta-album__card .ttdr-home__product-action--primary a:focus-visible {
        background: #fff5f5 !important;
        border-color: #ff5151 !important;
        color: #ff5151 !important;
    }
}

/* 실상품 다운로드 버튼(분류 연동) — 데모 카드와 동일 계열, 앨범 리스트·공통 마크업 */
.tta-album__action-dl-span {
    grid-column: 1 / -1;
    width: 100%;
}

.tta-album__btn-download--content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 32px;
    padding: 0 16px;
    box-sizing: border-box;
    margin: 0;
    border-radius: 16px;
    border: 2px solid #ebc9c9;
    background: #ffeeee;
    color: #ff5151;
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

a.tta-album__btn-download--content:hover,
a.tta-album__btn-download--content:focus-visible {
    background: #ffe4e4;
    border-color: #ff5151;
    color: #ff5151;
    outline: none;
}

button.tta-album__btn-download--content:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    border-color: #e8e8e8;
    background: #f5f5f5;
    color: #999;
}

.ttodrak-shop-dl-btn--compact {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 14px;
}

.tta-album__btn-download--content .tta-album__btn-download-icon {
    display: flex;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
}

.tta-album__btn-download--content .tta-album__btn-download-icon svg {
    display: block;
    width: 20px;
    height: 21px;
}

.tta-album__btn-download--content .tta-album__btn-download-icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}