/* ==========================================================================
   또드락 (B) — bbs/ttodrak-2026b.php
   1차 기준: Zeplin 레이어 수치 → 본 파일 `--tt6b-z-*` 토큰만 수정.
   MCP: Cursor user-zeplin `get_screen` — PC 69c4d561dd43627542d098d7 / MO 69c4d56077071543371545da (Group 3763·3564·텍스트 스타일).
   2차 검수: 라이브 https://yyychild.mycafe24.com/bbs/ttodrak-2026b.php 와 Zeplin PC/MO 나란히 대조.
   핸드오프: https://support.zeplin.io/en/articles/367386-exporting-css-and-html
   PC: https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69c4d561dd43627542d098d7
   MO: https://app.zeplin.io/project/621705fa11c4f4941702a483/screen/69c4d56077071543371545da
   Cursor Simple Browser 나란히 보기: dev/tt6b-cursor-browser-compare.html (로컬 파일 열기)
   Zeplin Group3763 세로: Mask151 끝=Group3563 시작 → 78px → Rect2255 캡슐 → 30px → Group3564 패널(y=777) — Group3563 에셋 1036×1103(MCP) 전체 높이 = .tt6b-showcase--has-bg3563 min-height /
   MCP 스펙: Rect2251 396×469@(572,60)·2255 420×60@(308,687)·3564 920×263@(58,777) /
   (mo) Zeplin `bg_mo`+Component87 — Mask153 328×284(#009fe0)·노란카드328×360·캡슐 Rect2286·인박스 r16·Mask156 328×369 #707070·Mask149 328×630 /
   PC radius: Mask151 r0·Mask152(하단 덤불) 별도 PNG·카드·인박스·CTA r20/16/24·캡슐 r30·영상·칩 r10 — 외곽선·패널 그림자 없음(Zeplin 평면)
   ========================================================================== */

/* Zeplin 본문만 — .tt6-subhd(페이지 타이틀)는 사이트 GNB와 별개 */
body.ttdr-home-body .tt6-page--b > #tt6b-content.tt6b-main {
    display: block;
    margin: 0;
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-page--b {
    overflow-x: clip;
    --tt6b-font-sans: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --tt6b-font-video: "SDGothicNeob-eSm", "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard Variable", Pretendard, sans-serif;
    font-family: var(--tt6b-font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* 색 (Zeplin 스타일/레이어) */
    --tt6b-z-hero-title: #333333;
    --tt6b-z-hero-lead: #824b12;
    --tt6b-z-card-yellow: #ffca4b;
    --tt6b-z-inbox: #ffffff;
    --tt6b-z-cta: #2c5273;
    --tt6b-z-pill: #e4535b;
    --tt6b-z-video-bg: #3d3d3d;
    --tt6b-z-video-text: #0072b9;
    /* Zeplin MCP Ellipse 불릿 rgb(252,126,122) */
    --tt6b-z-chip-bullet: #fc7e7a;
    /* Zeplin Rect2256: 검정 + opacity ~0.58 / Rect627 영상: #3d3d3d */
    --tt6b-z-chips-bg: rgba(0, 0, 0, 0.58);
    /*
     * PNG 투명·cover 여백 시 보이는 톤 = Zeplin 뷰어 합성(밝은 하늘) 기준.
     * (Rect2260 단일 레이어는 더 어두우나, 일러스트 아래로는 밝은 하늘색이 맞음)
     */
    --tt6b-z-blue-mask: #009fe0;
    --tt6b-z-subhd-bg: #e1f9fe;
    /* 레이아웃·반경 (px, Zeplin 그룹3763·3564 기준) */
    --tt6b-z-artboard: 1036px;
    --tt6b-z-panel-fr: 920;
    --tt6b-z-column-fr: 1036;
    --tt6b-z-gap-panel: 14px;
    --tt6b-z-panel-min-h: 263px;
    --tt6b-z-panel-max: 920px;
    /* Zeplin MCP Group 3563 export — 배경 PNG 전체(하단 풀밭 등)가 잘리지 않게 min-height 산출용 */
    --tt6b-z-bg3563-art-w: 1036;
    --tt6b-z-bg3563-art-h: 1103;
    --tt6b-z-r-mask-mo: 16px;
    --tt6b-z-card-max: 396px;
    --tt6b-z-inbox-max: 364px;
    --tt6b-z-cta-min-w: 244px;
    --tt6b-z-cta-min-h: 48px;
    --tt6b-z-pill-max: 420px;
    --tt6b-z-pill-min-h: 60px;
    /* PC: Web1280 제플린 내보내기·합성 기준 둥근 히어로 — 레이어 Rect2260은 0이어도 시안 PNG는 r20에 가깝게 보임 */
    --tt6b-z-r-mask151: 20px;
    --tt6b-z-r-mask151-pc: 20px;
    --tt6b-z-r-card: 20px;
    --tt6b-z-r-inbox: 16px;
    --tt6b-z-r-cta: 24px;
    --tt6b-z-r-pill: 30px;
    --tt6b-z-r-video: 10px;
    /* 마스크(609) ~ 빨강 캡슐(y=687): Zeplin Group3763 기준 간격 78px */
    --tt6b-z-sky-h-pc: 78px;
    --tt6b-z-sky-h-mo: 48px;
    --tt6b-z-chip-row: 29px;
    --tt6b-z-inbox-pad-t: 42px;
    --tt6b-z-inbox-pad-x: 20px;
    --tt6b-z-inbox-pad-b: 28px;
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-page--b {
        overflow-x: visible;
        /* Zeplin 노란 카드 좌우 40px과 맞춤 — 인박스만 82px이면 시각적으로 튐 */
        --tt6b-z-inbox-pad-t: 42px;
        --tt6b-z-inbox-pad-x: 40px;
        --tt6b-z-inbox-pad-b: 40px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero-band__inner {
        padding-left: max(0px, env(safe-area-inset-left, 0px));
        padding-right: max(0px, env(safe-area-inset-right, 0px));
    }
}

/* 넓은 PC(Web 1280 시안): 1036 컬럼이 그대로 보이는 구간 */
@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b {
        --tt6b-z-inbox-pad-b: 41px;
    }
}

body.ttdr-home-body .tt6-page--b .tt6-outer {
    max-width: var(--ttdr-z-header-max, 1280px);
    margin-left: auto;
    margin-right: auto;
    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));
    padding-bottom: 120px;
    box-sizing: border-box;
}

/* ── 서브(제플린 Component 49/50) ── */
/* h1 UA bold 제거 — Zeplin Component 49 타이틀 Regular */
body.ttdr-home-body .tt6-page--b .tt6-page-title {
    font-weight: 400;
    color: #000;
}

@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page--b .tt6-subhd {
        min-height: 100px;
        background: var(--tt6b-z-subhd-bg);
    }

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

    body.ttdr-home-body .tt6-page--b .tt6-page-title {
        max-width: 194px;
        margin: 0 auto;
        font-size: 24px;
        line-height: 29px;
    }

    body.ttdr-home-body .tt6-page--b .tt6-outer {
        margin-top: 60px;
    }
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-page--b .tt6-subhd {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 130px;
        background: var(--tt6b-z-subhd-bg);
    }

    body.ttdr-home-body .tt6-page--b .tt6-subhd__inner {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6-page-title {
        max-width: 226px;
        margin: 0 auto;
        font-size: 28px;
        line-height: 33px;
    }

    body.ttdr-home-body .tt6-page--b .tt6-outer {
        margin-top: 80px;
    }
}

/* --------------------------------------------------------------------------
   히어로 풀블리드 밴드 — Zeplin: 서브헤더(Component49) 아래 80px만 두고 Mask151(1036×609) 시작
   -------------------------------------------------------------------------- */
body.ttdr-home-body .tt6-page--b .tt6b-hero-band {
    /* 제한 폭 부모(.tt6-outer) 안에서도 뷰포트 풀폭 — left:-50vw 방식은 부모 기준으로 어긋남 */
    width: 100vw;
    max-width: none;
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 24px 0 32px;
    box-sizing: border-box;
    background: #ffffff;
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero-band {
        /* 추가 세로 패딩은 시안과 어긋남(80px 마진만 유지) */
        padding: 0;
    }
}

/* Zeplin Group3763 가로 1036px — border-box에서 좌우 패딩을 두면 실폭이 1036−32가 되므로 PC는 0 */
body.ttdr-home-body .tt6-page--b .tt6b-hero-band__inner {
    width: var(--tt6b-z-artboard);
    max-width: 100%;
    margin: 0 auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* 히어로: Zeplin Mask151 전면 1036×609 + Rectangle2251(396×469) x=572 y=60 오버레이 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__grid {
    position: relative;
    width: var(--tt6b-z-artboard);
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Zeplin PC 스크린 기준 오버레이(카드 x572 y60) — 901px 미만은 세로 스택(MO 시안에 가깝게) */
@media (min-width: 901px) {
    /*
     * Zeplin Mask151 1036×609 — aspect-ratio만 쓰면 자식이 전부 absolute일 때
     * 일부 브라우저에서 높이 0으로 무너져 카드가 '가운데'처럼 보일 수 있음.
     * padding-bottom 비율 박스로 고정(외부 CSS와 동일).
     */
    body.ttdr-home-body .tt6-page--b .tt6b-hero__grid {
        display: block;
        width: 100%;
        max-width: 1036px;
        height: 0;
        padding-bottom: calc(609 * 100% / 1036);
        position: relative;
        overflow: hidden;
    }
}

/* Mask151~캡슐 사이 78px — 시안은 별도 ‘구름 하늘’ 레이어 없음, 페이지 배경(#fff)과 맞닿게 단색만 */
body.ttdr-home-body .tt6-page--b .tt6b-hero-sky {
    position: relative;
    z-index: 1;
    width: var(--tt6b-z-artboard);
    max-width: 100%;
    height: var(--tt6b-z-sky-h-pc);
    margin: 0 auto;
    border-radius: 0;
    box-sizing: border-box;
    pointer-events: none;
    background: #ffffff;
}

@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero-sky {
        height: var(--tt6b-z-sky-h-mo);
        margin-top: 16px;
        border-radius: 0;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1036 / 609;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__stage {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        flex: none;
    }
}

/* Mask Group 151 — 스테이지를 꽉 채움 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151 {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--tt6b-z-r-mask151);
    overflow: hidden;
    background-color: var(--tt6b-z-blue-mask);
    background-image: var(--tt6b-bg151-pc, none);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    isolation: isolate;
}

/* Zeplin PC: Mask Group 152 — 626×161 @x410 y448(1036×609 기준), Mask151 위 덤불·흰 박스 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__bg152 {
    display: none;
}

@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg152 {
        display: block;
        position: absolute;
        left: calc(410 * 100% / 1036);
        bottom: 0;
        width: calc(626 * 100% / 1036);
        height: calc(161 * 100% / 609);
        z-index: 3;
        pointer-events: none;
        background-color: transparent;
        background-image: var(--tt6b-bg152-pc, none);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% auto;
    }
}

/* Zeplin MO Mask153: 덤불 111×90 좌하단 — PC 152 에셋을 스테이지(328) 기준으로 축소 */
@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg152 {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(111 * 100% / 328);
        aspect-ratio: 111 / 90;
        height: auto;
        z-index: 1;
        pointer-events: none;
        background-color: transparent;
        background-image: var(--tt6b-bg152-pc, none);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% auto;
    }
}

/* 에셋 없을 때도 Zeplin Path1272 단색만(가짜 그라데이션 없음) */
body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151:not(.tt6b-hero__bg151--has) {
    background-image: none;
}

/* PC: 시안은 상단 정렬 한 덩어리 일러스트 — 과한 % 오프셋은 상단에 어두운 폴백만 남김 */
@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151.tt6b-hero__bg151--has {
        background-position: center top;
        background-size: cover;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151--slice3763 {
        background-position: center top;
    }
}

/* Group 3763 통 PNG(1036×1712) 폴백 — 상단 609px만 보이게 (overflow로 하단 클립) */
body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151--slice3763 {
    background-size: 100% auto;
    background-position: center top;
}

@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151 {
        border-radius: var(--tt6b-z-r-mask151-pc) var(--tt6b-z-r-mask151-pc) 0 0;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__card {
    position: static;
    z-index: 1;
    width: 100%;
    max-width: var(--tt6b-z-card-max);
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 28px 20px 26px;
    background: var(--tt6b-z-card-yellow);
    border-radius: var(--tt6b-z-r-card);
    text-align: center;
}

@media (min-width: 901px) {
    /* Rectangle 2251 — 시안 좌표: x=572 y=60, 396×469, r20 */
    body.ttdr-home-body .tt6-page--b .tt6b-hero__card {
        position: absolute;
        z-index: 2;
        left: calc(572 * 100% / 1036);
        top: calc(60 * 100% / 609);
        width: calc(396 * 100% / 1036);
        max-width: 396px;
        min-height: calc(469 * 100% / 609);
        margin: 0;
        padding: 56px 16px 32px;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__h2 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
    letter-spacing: -1.2px;
    color: var(--tt6b-z-hero-title);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Zeplin (mo): 한 줄 제목 — PC는 2줄(\u000b 대응 br) */
body.ttdr-home-body .tt6-page--b .tt6b-hero__h2-line--mo {
    display: none;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__lead-line--mo {
    display: none;
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero__h2 {
        text-wrap: balance;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__lead {
    margin: 0 0 36px;
    font-size: 16px;
    line-height: 19px;
    font-weight: 500;
    letter-spacing: -0.32px;
    color: var(--tt6b-z-hero-lead);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Zeplin Rectangle 2252 364×252 r16 — 패딩은 항상 .tt6-page--b 변수 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--tt6b-z-inbox-max);
    margin: 0 auto;
    padding: var(--tt6b-z-inbox-pad-t) var(--tt6b-z-inbox-pad-x) var(--tt6b-z-inbox-pad-b);
    background: var(--tt6b-z-inbox);
    border-radius: var(--tt6b-z-r-inbox);
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox-text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: -0.32px;
    color: #000;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__price {
    margin: 0;
    font-size: 42px;
    line-height: 50px;
    font-weight: 800;
    letter-spacing: -1.68px;
    color: #000;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox .tt6b-hero__price {
    margin-top: 8px;
    margin-bottom: 20px;
}

/* 다운로드 권한 시 가격 미표시 — 가격 행 대신 CTA 상단 여백 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox--has-dl .tt6b-cta {
    margin-top: 28px;
}

/* Component 64 — 244×48 r24, fill rgb(44,82,115) */
body.ttdr-home-body .tt6-page--b .tt6b-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tt6b-z-cta-min-w);
    min-height: var(--tt6b-z-cta-min-h);
    box-sizing: border-box;
    padding: 0 24px;
    background: var(--tt6b-z-cta);
    border-radius: var(--tt6b-z-r-cta);
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.18s ease, filter 0.18s ease;
}

body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox .tt6b-cta {
    flex-shrink: 0;
    width: 100%;
    max-width: var(--tt6b-z-cta-min-w);
}

/* cartupdate.php 장바구니 담기 — 앵커와 동일 폭·버튼 리셋 */
body.ttdr-home-body .tt6-page--b .tt6b-hero__cartadd {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    width: 100%;
    max-width: var(--tt6b-z-cta-min-w);
    flex-shrink: 0;
}

body.ttdr-home-body .tt6-page--b button.tt6b-cta {
    width: 100%;
    border: none;
    cursor: pointer;
    font: inherit;
    font-family: inherit;
}

body.ttdr-home-body .tt6-page--b .tt6b-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

body.ttdr-home-body .tt6-page--b .tt6b-cta:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

body.ttdr-home-body .tt6-page--b .tt6b-cta:focus {
    outline: none;
}

body.ttdr-home-body .tt6-page--b .tt6b-cta:focus-visible {
    outline: 3px solid #206aab;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    body.ttdr-home-body .tt6-page--b .tt6b-cta {
        transition: none;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-cta:hover,
    body.ttdr-home-body .tt6-page--b .tt6b-cta:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    body.ttdr-home-body .tt6-page--b .tt6b-cta {
        border: 1px solid CanvasText;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__video-img {
        forced-color-adjust: none;
    }
}

/* 빨강 캡슐 — Zeplin Rectangle 2255 420×60 r30 (마스크 하단~캡슐 간격은 .tt6b-hero-sky 78px에 포함) */
body.ttdr-home-body .tt6-page--b .tt6b-hero-sky + .tt6b-pill {
    position: relative;
    z-index: 2;
    margin-top: clamp(20px, 4vw, 28px);
}

@media (min-width: 769px) {
    body.ttdr-home-body .tt6-page--b .tt6b-hero-sky + .tt6b-pill {
        margin-top: 0;
    }
}
body.ttdr-home-body .tt6-page--b .tt6b-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--tt6b-z-pill-max);
    min-height: var(--tt6b-z-pill-min-h);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 13px 20px;
    background: var(--tt6b-z-pill);
    border-radius: var(--tt6b-z-r-pill);
    text-align: center;
    font-size: 28px;
    line-height: 33px;
    font-weight: 700;
    letter-spacing: -1.12px;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 쇼케이스 — Zeplin Web1280: 1036 아트보드 안(풀블리드 연파랑 제거, 시안과 동일 프레이밍) */
body.ttdr-home-body .tt6-page--b .tt6b-showcase {
    position: relative;
    width: 100%;
    max-width: var(--tt6b-z-artboard);
    margin: 48px auto 0;
    box-sizing: border-box;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* PNG 없음: 시안에 없는 연하늘 그라데이션 제거 — 페이지와 동일 흰 바탕 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) {
    background: #ffffff;
    border-radius: var(--tt6b-z-r-mask151-pc);
    overflow: hidden;
}

/* Zeplin Group3563: 일러스트 PNG만 — HTML로 연하늘 덧칠하지 않음(Rect627·2256 회색은 DOM 패널) */
body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 {
    margin-top: 0;
    background-color: transparent;
    border-radius: 0 0 var(--tt6b-z-r-mask151-pc) var(--tt6b-z-r-mask151-pc);
    overflow: hidden;
    /* 배경(.tt6b-showcase__bg3563)이 짧은 박스에 맞춰 세로로 잘리지 않도록 — 1036×1103 비율 */
    container-type: inline-size;
    container-name: tt6b-g3563;
}

/* Group3563 PNG 없을 때도 제목 구역이 Zeplin처럼 살짝 떠 있게 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) .tt6b-showcase__fore {
    padding-top: 8px;
}

/* Group 3563 — 배경 레이어, 전경은 .tt6b-showcase__fore */
body.ttdr-home-body .tt6-page--b .tt6b-showcase__bg3563 {
    display: none;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__bg3563 {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: var(--tt6b-bg3563, none);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase__fore {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    box-sizing: border-box;
}

body.ttdr-home-body .tt6-page--b .tt6b-pill + .tt6b-showcase {
    margin-top: 28px;
}

@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-pill + .tt6b-showcase {
        /* Zeplin: 캡슐·쇼케이스 사이 리듬 */
        margin-top: 24px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-pill {
        width: min(420px, 100%);
        max-width: 420px;
        min-height: 60px;
        padding: 13px 24px 14px;
    }
}

/* 캡슐이 Group3563 PNG 첫 78px(마스크~Rect2255) 위에 올라가도록 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore > .tt6b-pill {
    position: relative;
    z-index: 2;
}

/*
 * Group3563(PC)·bg_mo/Component87(MO) 배경 PNG에 제목·부제가 포함됨 —
 * 시각 중복 방지, #tt6b-included-title·desc·aria-labelledby는 HTML 유지
 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__h2,
body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__sub {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Zeplin Group3562: 제목·부제 — Group3563 미사용 폴백 시에만 화면에 표시 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase__h2 {
    margin: 0 auto 12px; /* MO: 제목 block 높이 53 기준 부제까지 간격 ≈12px */
    max-width: 344px;
    text-align: center;
    font-size: 30px;
    line-height: 40px;
    font-weight: 800;
    letter-spacing: -0.9px;
    color: var(--tt6b-z-hero-title);
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase__sub {
    margin: 0 auto 28px;
    max-width: 490px;
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: -0.32px;
    color: var(--tt6b-z-hero-lead);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Zeplin Group3564 920×263: 좌 460(Rect627 #3d3d3d) + 간격 14 + 우 446(Rect2256 r10) */
body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel {
    display: grid;
    grid-template-columns: minmax(0, 460fr) minmax(0, 446fr);
    align-items: stretch;
    gap: var(--tt6b-z-gap-panel);
    width: calc(100% * var(--tt6b-z-panel-fr) / var(--tt6b-z-column-fr));
    max-width: var(--tt6b-z-panel-max);
    margin-left: auto;
    margin-right: auto;
    min-height: var(--tt6b-z-panel-min-h);
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Zeplin Rect 627: 460×263, r10, #3d3d3d — 미리보기 PNG는 bible-on과 동일 계열(bbs/bible-on.php) */
body.ttdr-home-body .tt6-page--b .tt6b-showcase__video {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--tt6b-z-panel-min-h);
    height: var(--tt6b-z-panel-min-h);
    background: var(--tt6b-z-video-bg);
    border-radius: var(--tt6b-z-r-video);
    overflow: hidden;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase__video-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 에셋 없을 때만 텍스트 플레이스홀더(Zeplin SD Gothic 톤) */
body.ttdr-home-body .tt6-page--b .tt6b-showcase__video--text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase__video-text {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: var(--tt6b-z-video-text);
    text-align: center;
    font-family: var(--tt6b-font-video);
}

/* PC ≥901: Group3563 — Zeplin 세로: 78px(마스크~캡슐) → 캡슐 60 → 30px → 패널 y=777 */
@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-chips-wrap {
        align-self: stretch;
        height: 100%;
        min-height: var(--tt6b-z-panel-min-h);
        padding: 32px 22px 22px 22px;
        box-sizing: border-box;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore {
        display: flex;
        flex-direction: column;
        padding-top: calc(78 * 100% / var(--tt6b-z-column-fr));
        /* 하단 잔디·장식은 PNG에 포함 — 섹션 min-height로 전체 노출 */
        padding-bottom: 0;
        min-height: 1103px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore > .tt6b-pill {
        margin-top: 0;
        margin-bottom: calc(30 * 100% / var(--tt6b-z-column-fr));
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__panel {
        align-items: stretch;
        margin-bottom: calc(89 * 100% / var(--tt6b-z-column-fr));
    }

    /* 시안: 263고 안에 12칩 전부 노출 — 스크롤바 없음(패딩·행간으로 맞춤) */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-chips-wrap {
        max-height: none;
        overflow: visible;
    }

    /* 그리드 행 높이 = 좌우 열 중 큰 쪽 — 영상 칸도 같은 높이로 채움 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel > .tt6b-showcase__video {
        height: 100%;
        min-height: var(--tt6b-z-panel-min-h);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) .tt6b-showcase__h2 {
        -webkit-font-smoothing: antialiased;
        text-wrap: balance;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) .tt6b-showcase__sub {
        -webkit-font-smoothing: antialiased;
    }

    /* MCP: 제목(y489·h75) → 부제(y588) 간격 24px */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase__h2 {
        margin-bottom: 24px;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-chips-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background-color: var(--tt6b-z-chips-bg);
    background-image: none;
    border-radius: var(--tt6b-z-r-video);
    overflow: hidden;
    isolation: isolate;
}

/* Zeplin Group3562 in 패널 우측: 리스트 y=37, 텍스트 x=22, 불릿 Repeat Grid 14px 간격 29 — 패딩은 위 @media (901px) */

body.ttdr-home-body .tt6-page--b .tt6b-chips {
    list-style: none;
    margin: 0;
    flex: 1;
    padding: 22px 22px 24px 26px;
    display: flex;
    flex-direction: column;
    /* Zeplin Repeat Grid 29px − Pretendard 15/26 줄높이 */
    gap: calc(var(--tt6b-z-chip-row) - 26px);
    box-sizing: border-box;
}

@media (min-width: 901px) {
    body.ttdr-home-body .tt6-page--b .tt6b-chips {
        padding: 0;
    }

    /* Zeplin Group3562: Repeat Grid 두 줄 — 6행×2열, grid-auto-flow: column + 열 우선 배열된 12개 li */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel .tt6b-chips {
        display: grid;
        grid-template-rows: repeat(6, auto);
        grid-auto-flow: column;
        row-gap: calc(var(--tt6b-z-chip-row) - 26px);
        column-gap: 0px;
        align-content: start;
    }
}

body.ttdr-home-body .tt6-page--b .tt6b-chips__item {
    position: relative;
    padding: 0 0 0 22px;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: 0;
    color: #ffffff;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel .tt6b-chips__item {
    color: #ffffff;
}

body.ttdr-home-body .tt6-page--b .tt6b-chips__text {
    word-break: keep-all;
    overflow-wrap: break-word;
}

body.ttdr-home-body .tt6-page--b .tt6b-chips__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tt6b-z-chip-bullet);
}

/* 선택 중단 이미지 — 쇼케이스 아래 */
body.ttdr-home-body .tt6-page--b .tt6b-showcase + .tt6b-mid {
    margin-top: 40px;
}

body.ttdr-home-body .tt6-page--b .tt6b-mid {
    max-width: 626px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body.ttdr-home-body .tt6-page--b .tt6b-mid__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* ── MO — Zeplin MCP 69c4d56077071543371545da (360 아트보드·328 컬럼), PC 규칙 비적용 ── */
@media (max-width: 768px) {
    body.ttdr-home-body .tt6-page--b {
        /* Rectangle 2287 인박스 패딩 리듬 */
        --tt6b-z-inbox-pad-t: 32px;
        --tt6b-z-inbox-pad-x: 16px;
        --tt6b-z-inbox-pad-b: 24px;
        /* MO 단일열 칩 행간 — 시안 Repeat 29px 기준 이론값 13px은 모바일에서 과하게 벌어져 보여 6px 고정 */
        --tt6b-z-mo-chip-gap: 6px;
        /* Component 87 기준: 캡슐(Rect2286) 상단까지 40px */
        --tt6b-z-sky-h-mo: 40px;
        /*
         * MO + bg_mo(.tt6b-showcase--has-mo-c87) 전용 — .tt6b-showcase__panel margin-top
         *
         * 제목·부제는 PNG에만 있고 HTML은 sr-only라 **문서 흐름에서 높이 0**입니다.
         * 그런데 DOM 순서는 [캡슐] → [h2] → [sub] → [패널] 이라, margin 없으면 패널이
         * 캡슐 바로 아래로 붙어 배경의 제목·부제 구간과 어긋납니다.
         *
         * Zeplin Component 87(높이 1270) 기준: Mask156 상단 y = 517, 캡슐까지 padding-top 40·캡슐 54·캡슐~패널 16 (아트보드 px).
         * bg_mo 가로 W = min(100vw−32px, 328px)일 때 **배경 세로도 W/328 비율**이므로, DOM도 같은 비율로 맞춰야 상하가 어긋나지 않음.
         * 패널 margin-top = (517 − 40 − 54) × W/328 (= 423 × W/328); 캡슐 영역 padding·min-height·margin-bottom 도 동일 비율.
         * (이전: Mask만 스케일하고 40·54는 px 고정 → 좁은 폭에서 캡슐~패널 세로가 시안과 달라짐.)
         */
        --tt6b-z-mo-c87-fore-top: 40px;
        --tt6b-z-mo-c87-pill-h: 54px;
        --tt6b-z-mo-c87-pill-mb: 16px;
        --tt6b-z-mo-c87-mask156-y: 517px;
        --tt6b-z-mo-c87-artboard-w-mo: 328px;
        --tt6b-z-mo-c87-render-w: min(100vw - 32px, 328px);
        --tt6b-z-mo-c87-panel-mt: max(
            0px,
            calc(
                (var(--tt6b-z-mo-c87-mask156-y) - var(--tt6b-z-mo-c87-fore-top) - var(--tt6b-z-mo-c87-pill-h)) *
                    var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo)
            )
        );
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero-band {
        padding: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        max-width: 328px;
        overflow: visible;
        height: auto;
        padding-bottom: 0;
        position: relative;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__stage {
        position: relative;
        width: 100%;
        max-width: 328px;
        flex: none;
        aspect-ratio: 328 / 284;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151 {
        border-radius: 0;
        background-image: var(--tt6b-bg151-mo, var(--tt6b-bg151-pc, none));
        background-size: cover;
        background-position: center top;
        border-radius: 10px 10px 0 0;

    }

    /* Zeplin Mask153 PNG에 덤불 레이어 포함 — PC Mask152와 중복 방지 */
    body.ttdr-home-body .tt6-page--b .tt6b-hero__stage--has-mask153-mo .tt6b-hero__bg152 {
        display: none;
    }

    /* Zeplin Rectangle 40: 328×360, r0 */
    body.ttdr-home-body .tt6-page--b .tt6b-hero__card {
        position: static;
        max-width: 328px;
        min-height: 0;
        margin: 0;
        padding: 40px 16px 40px;
        border-radius: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__h2-line--pc {
        display: none;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__h2-line--mo {
        display: block;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__h2 {
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 24px;
        font-weight: 700;
        letter-spacing: -0.8px;
        color: #000;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__lead-line--pc {
        display: none;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__lead-line--mo {
        display: inline;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__lead {
        margin-bottom: 20px;
        font-size: 13px;
        line-height: 15px;
        font-weight: 500;
        color: #824b12;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox {
        max-width: 296px;
        /* Zeplin Rectangle 2287: r16 */
        border-radius: 16px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox-text {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: -0.32px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox .tt6b-hero__price {
        margin-top: 8px;
        margin-bottom: 20px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__price {
        font-size: 36px;
        line-height: 42px;
        font-weight: 800;
        letter-spacing: -1.44px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox .tt6b-cta {
        max-width: 158px;
        min-width: 158px;
        width: 158px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox .tt6b-hero__cartadd {
        max-width: 158px;
        width: 158px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__inbox button.tt6b-cta {
        max-width: 158px;
        min-width: 158px;
        width: 158px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-cta {
        min-width: 158px;
        min-height: 44px;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: -0.32px;
        border-radius: 22px;
        padding: 0 20px;
    }

    /* Zeplin Rectangle 2286: 296×54, r30, #e4535b */
    body.ttdr-home-body .tt6-page--b .tt6b-pill {
        max-width: 296px;
        width: 100%;
        min-height: 54px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        padding: 14px 30px;
        box-sizing: border-box;
        font-size: 22px;
        line-height: 26px;
        font-weight: 700;
        letter-spacing: -0.44px;
        background: #e4535b;
        border-radius: 30px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero-sky {
        margin-top: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero-sky + .tt6b-pill {
        margin-top: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase {
        margin-top: 32px;
        max-width: 100%;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) {
        border-radius: var(--tt6b-z-r-mask-mo);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 {
        margin-top: 0;
        background-color: #e9e9e9;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563:not(.tt6b-showcase--has-mo-c87) {
        border-radius: var(--tt6b-z-r-mask-mo);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-pill + .tt6b-showcase {
        margin-top: 20px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__fore {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore {
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        /* Component 87: 캡슐까지 상단 40px — has-mo-c87 에서만 W/328 스케일(아래 블록) */
        padding-top: 40px;
        box-sizing: border-box;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-showcase__fore {
        padding-top: calc(var(--tt6b-z-mo-c87-fore-top) * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore > .tt6b-pill {
        margin-top: 0;
        margin-bottom: 16px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-showcase__fore > .tt6b-pill {
        min-height: calc(var(--tt6b-z-mo-c87-pill-h) * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
        margin-bottom: calc(var(--tt6b-z-mo-c87-pill-mb) * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
        padding-top: calc(14px * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
        padding-bottom: calc(14px * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
    }

    /* PC Group3563만 있을 때: 하단 일러 크롭 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563:not(.tt6b-showcase--has-mo-c87) .tt6b-showcase__bg3563 {
        inset: auto 0 0 0;
        top: auto;
        height: 50%;
        min-height: 200px;
        background-position: center bottom;
        background-size: min(100%, var(--tt6b-z-artboard)) auto;
    }

    /* Zeplin Component 87 – 1 MCP PNG (328×1270) */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 {
        background-color: transparent;
        border-radius: 0;
        min-height: calc(1270 * min(100vw - 32px, 328px) / 328);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-showcase__bg3563 {
        inset: 0;
        top: 0;
        height: 100%;
        min-height: 100%;
        background-image: var(--tt6b-bg3563-mo);
        background-position: center top;
        background-size: min(100vw - 32px, 328px) auto;
        background-repeat: no-repeat;
    }

    /* Mask156(328×369) — margin-top 은 위 주석(--tt6b-z-mo-c87-panel-mt) 참고 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-showcase__panel {
        /* margin-top: var(--tt6b-z-mo-c87-panel-mt); */
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Mask156 Rect2297: 내부 모서리 r0 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-showcase__video {
        margin-top: 8px;
        border-radius: 8px;
        overflow: hidden;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563.tt6b-showcase--has-mo-c87 .tt6b-chips-wrap {
        margin-top: 8px;
        border-radius: 8px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563:not(.tt6b-showcase--has-mo-c87) .tt6b-showcase__panel {
        border-radius: 10px;
        overflow: hidden;
        border: none;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-chips-wrap {
        background-color: rgba(0, 0, 0, 0.58) !important;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__video,
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__video--text {
        background-color: var(--tt6b-z-video-bg) !important;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__h2 {
        margin-bottom: 12px;
        font-size: 21px;
        line-height: 28px;
        font-weight: 800;
        letter-spacing: -0.63px;
        color: #333;
        max-width: min(296px, 100%);
        text-align: center;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__sub {
        font-size: 13px;
        line-height: 20px;
        font-weight: 500;
        letter-spacing: -0.26px;
        color: #824b12;
        margin-top: 0;
        margin-bottom: 22px;
        max-width: min(296px, 100%);
        text-align: center;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel {
        order: 0;
        width: 100%;
        max-width: none;
        margin-bottom: 0;
        gap: 0;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__video {
        height: auto;
        min-height: 0;
        aspect-ratio: 460 / 263;
        border-radius: 10px 10px 0 0;
    }

    /* 실제 영상과 동일 비율 — min-height:180px 는 칩 블록과 사이가 과하게 벌어짐 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase__video--text {
        min-height: 0;
        aspect-ratio: 460 / 263;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-chips-wrap {
        border-radius: 0 0 10px 10px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__video-text {
        font-size: 20px;
        line-height: 26px;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-chips {
        padding: 16px 18px 20px 22px;
        gap: var(--tt6b-z-mo-chip-gap);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-chips__item {
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        letter-spacing: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-chips__item::before {
        top: 2px;
        width: 12px;
        height: 12px;
    }

    /* 현수막 한 줄(6번째 칩): PC는 br 유지, MO만 한 줄 */
    body.ttdr-home-body .tt6-page--b .tt6b-chips__item--mo-nowrap .tt6b-chips__text br {
        display: none;
    }

    /* Zeplin Mask Group 149: 328×630 — 하단 일러 폭 맞춤 */
    body.ttdr-home-body .tt6-page--b .tt6b-mid {
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-mo-c87 + .tt6b-mid {
        margin-top: calc(16px * var(--tt6b-z-mo-c87-render-w) / var(--tt6b-z-mo-c87-artboard-w-mo));
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 {
        margin-top: 0;
    }

    /*
     * 769–900: Zeplin PC(901+) 오버레이 비활성 — 히어로 세로 스택(좁은 뷰에서 카드 절대좌표 깨짐 방지)
     */
    body.ttdr-home-body .tt6-page--b .tt6b-hero__grid {
        overflow: visible;
        max-width: min(1036px, 100%);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__stage {
        width: 100%;
        max-width: min(560px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-hero__bg151 {
        border-radius: 0;
    }

    /* 좁은 PC: 제목 먼저(MO와 동일), 패널 1열 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase:not(.tt6b-showcase--has-bg3563) .tt6b-showcase__fore {
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Group3563: 78px 브릿지·캡슐·30px·패널 리듬을 태블릿에서도 유지 */
    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore {
        display: block;
        padding-top: clamp(32px, 10vw, 78px);
        padding-bottom: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__fore > .tt6b-pill {
        margin-bottom: clamp(12px, 3vw, 30px);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__panel {
        order: 0;
        margin-bottom: 28px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase--has-bg3563 .tt6b-showcase__panel {
        margin-bottom: clamp(20px, 7vw, 89px);
    }

    body.ttdr-home-body .tt6-page--b .tt6b-showcase__video {
        height: auto;
        aspect-ratio: 460 / 263;
        border-radius: 10px 10px 0 0;
    }

    body.ttdr-home-body .tt6-page--b .tt6b-chips-wrap {
        border-radius: 0 0 10px 10px;
    }
}

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

@media (min-width: 1068px) and (max-width: 1279px) {
    body.ttdr-home-body .tt6-page--b .tt6-outer {
        padding-left: max(16px, calc((100% - 1036px) / 2));
        padding-right: max(16px, calc((100% - 1036px) / 2));
    }
}