/* ==========================================================================
   찬양율동 콘텐츠(A) — bbs/ttodrak-2026.php
   Zeplin PC (Web 1280): https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69c4d54d402f85af7fab9118
   Zeplin MO (360): https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69c4d54dc11983bbf7777f53
   에셋: `ttodrak-2026-pc.png`(Zeplin Group 3760) · `group-3948.png`(Group 3948, 1x) — 반응형 % 오버레이(.tt6-hot)
   KCL: Zeplin img_kcl시험성적서 PNG — `ttodrak-2026-kcl-pc.png`(1036×130), `ttodrak-2026-kcl-mo.png`(328×100)
   -----------------------------------------------------------------------------
   [서브바] Component 49: min-height 130px, fill #e1f9fe = rgb(225,249,254)
   [h1] 2026 찬양율동 콘텐츠 — 박스 250×33, Pretendard 28/33, Regular, #000
   [서브바(h=130) → Group 3760 상단] 80px → .tt6-outer { margin-top: 80px }
   [Group 3760 PC] 1036px column / [MO] Group 3948 328×4505(1x), @2x PNG 표시폭 328px
   [PC pill] 248×60 r30 / [MO] 상품보기 158×48 r24, 구매하기 158×44 r22
   [푸터] 본문 하단 120 + home-main .ttdr-home__footer margin 상쇄(동일)
   768~ : (B) 는 ttodrak-2026b.css
   ========================================================================== */
body.ttdr-home-body .tt6-page {
    background: #fff;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    max-width: 100%;
    box-sizing: border-box;
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* ── 서브헤더 (제플린 Component 49) ── */
body.ttdr-home-body .tt6-subhd {
    width: 100%;
    min-height: 130px; /* Zeplin Component 49, Rectangle 45 */
    background: #e1f9fe; /* rgb(225,249,254) */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-subhd__inner {
    width: 100%;
    max-width: var(--ttdr-z-header-max, 1280px);
    margin: 0 auto;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 24px;
    padding-left: max(var(--ttdr-z-mo-gutter, 16px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ttdr-z-mo-gutter, 16px), env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

body.ttdr-home-body .tt6-page-title {
    margin: 0 auto;
    padding: 0;
    font-size: 28px;
    line-height: 33px;
    font-weight: 400;
    color: #000; /* Zeplin text rgb(0,0,0) */
    text-align: center;
}

/* 서브헤더·본문 공통 좌우 인셋 (Zeplin 122) */
@media (min-width: 1068px) and (max-width: 1279px) {
    body.ttdr-home-body .tt6-subhd__inner,
    body.ttdr-home-body .tt6-outer {
        padding-left: max(16px, calc((100% - 1036px) / 2));
        padding-right: max(16px, calc((100% - 1036px) / 2));
    }
}

@media (min-width: 1280px) {
    body.ttdr-home-body .tt6-subhd__inner,
    body.ttdr-home-body .tt6-outer {
        padding-left: 122px;
        padding-right: 122px;
    }
}

/* ── 본문: Zeplin 서브헤더 하단 → Group 3760 상단 = 80px ── */
body.ttdr-home-body .tt6-outer {
    width: 100%;
    max-width: var(--ttdr-z-header-max, 1280px);
    margin: 80px auto 0;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 120px;
    padding-left: max(var(--ttdr-z-mo-gutter, 16px), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ttdr-z-mo-gutter, 16px), env(safe-area-inset-right, 0px));
    min-width: 0;
}
.tt6-asset {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
}

/* PC/MO 이중 에셋 전환 — .tt6-outer--ab-* 는 bbs/ttodrak-2026.php */
.tt6-outer--ab-both .tt6-asset--mo,
.tt6-outer--ab-mo .tt6-asset--pc {
    display: none;
}

.tt6-outer--ab-mo .tt6-asset--mo {
    display: block;
}

@media (max-width: 768px) {
    .tt6-outer--ab-both .tt6-asset--pc {
        display: none;
    }

    .tt6-outer--ab-both .tt6-asset--mo {
        display: block;
    }
}

/* Zeplin 1036×4184 PNG 위 “상품보기”만 클릭 — 반응형 % 오버레이(표준 img map은 리사이즈 시 좌표 불일치) */
.tt6-asset--mapped {
    position: relative;
    display: block;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.tt6-hotspots {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tt6-hot {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    /* 투명 히트영역 */
    background: transparent;
}

.tt6-hot--pc {
    border-radius: 30px;
}

/* Zeplin MO: 캡슐형 CTA — 고정 r 대신 스케일에 안전 */
.tt6-hot--mo {
    border-radius: 9999px;
}

.tt6-hot:focus {
    outline: none;
}

.tt6-hot:focus-visible {
    outline: 3px solid #206aab;
    outline-offset: 2px;
}

.tt6-asset__img {
    display: block;
    width: 100%;
    max-width: 1036px;
    height: auto;
    margin: 0;
}

.tt6-asset__img--mo {
    /* max-width: 328px; */
    margin-left: auto;
    margin-right: auto;
}

/* 히트 % = Group 3948 1x 폭 328px 기준 */
.tt6-asset--mo.tt6-asset--mapped {
    /* max-width: 328px; */
}

/* (A) ttodrak-2026 — MO/태블릿: (B) 는 ttodrak-2026b.css */
@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-subhd {
        min-height: 100px;
    }

    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-subhd__inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-page-title {
        font-size: 24px;
        line-height: 29px;
    }

    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-outer {
        margin-top: 60px;
        padding-bottom: 80px;
    }

    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-hot {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
}

@media (min-width: 769px) and (max-width: 1067px) {
    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-page-title {
        padding: 0 4px;
        box-sizing: border-box;
    }
}
.tt6-asset--empty {
    padding: 40px 0;
    text-align: center;
    color: #333;
    font-size: 15px;
    line-height: 1.5;
    max-width: 1036px;
    margin: 0 auto;
}

.tt6-asset--empty code {
    font-size: 12px;
    word-break: break-all;
}

/* ── KCL 시험성적서: Zeplin img_kcl시험성적서 PNG (.tt6-kcl) ── */
body.ttdr-home-body .tt6-kcl {
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-kcl__img {
    display: block;
    width: 100%;
    max-width: 1036px;
    height: auto;
    margin: 0;
}

/* PC/MO 이중 에셋 — critical: bbs/ttodrak-2026.php #tt6-kcl-ab-critical */
.tt6-kcl--ab-both .tt6-kcl__asset--mo {
    display: none;
}

@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page:not(.tt6-page--b) .tt6-kcl {
        margin-top: 0;
    }

    .tt6-kcl--ab-both .tt6-kcl__asset--pc {
        display: none;
    }

    .tt6-kcl--ab-both .tt6-kcl__asset--mo {
        display: block;
    }
}

body.ttdr-home-body .tt6-kcl__asset--mo .tt6-kcl__img {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-kcl--mo-only {
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
    }
}

body.ttdr-home-body .tt6-page + .ttdr-home__footer {
    margin-top: 0;
}