/* 제플린 메인: Pretendard + 16px 기준 (default_shop body 0.75em 덮어쓰기) */
body.ttdr-home-body {
    --ttdr-brand: #d53d3f;
    --ttdr-brand-hover: #e85d5d;
    --ttdr-cart-count: #ff5151;
    --ttdr-notice-bg: #206aab;
    --ttdr-notice-badge-bg: #62aeef;
    --ttdr-util-bg: #fbf1d6;
    --ttdr-util-text: #333333;
    /* 상단 공지: PC 제플린 Web 1280 본문 16/19 · MO는 미디어쿼리에서 별도 */
    --ttdr-z-notice-h: 60px;
    --ttdr-z-notice-h-mobile: 48px;
    --ttdr-z-notice-text: 16px;
    --ttdr-z-notice-badge: 15px;
    --ttdr-z-notice-text-lh: 19px;
    /* 아트보드: PC 1280 · MO 360 (제플린 화면 이름 기준) */
    --ttdr-z-artboard-pc: 1280px;
    --ttdr-z-artboard-mo: 360px;
    /* PC 본문 컬럼: 너비 1036, 좌우 마진 각 120 (=1280−1036)/2 */
    --ttdr-z-content-max: 1036px;
    /* MO: 카드 328 = 360 − 16×2 */
    --ttdr-z-mo-gutter: 16px;
    /* 헤더·히어로 공통: Web 1280 아트보드 좌우 인셋(대칭 120) */
    --ttdr-z-header-max: 1280px;
    --ttdr-z-header-pl: clamp(16px, 9.375vw, 120px);
    --ttdr-z-header-pr: clamp(16px, 9.375vw, 120px);
    /* 플로팅 퀵(1280 기준 콘텐츠 우측 ~48px 안쪽) */
    --ttdr-z-float-quick-inset: 48px;
    /* 40px 베이스 리듬(헤더·본문 세로 간격 통일) */
    --ttdr-z-rhythm: 40px;
    --ttdr-z-rhythm-half: 20px;
    /* 제플린 간격 스케일 (PC Web 1280, 본문 1040) */
    --ttdr-z-space-4: 4px;
    --ttdr-z-space-8: 8px;
    --ttdr-z-space-9: 9px;
    --ttdr-z-space-10: 10px;
    --ttdr-z-space-12: 12px;
    --ttdr-z-space-14: 14px;
    --ttdr-z-space-16: 16px;
    --ttdr-z-space-20: 20px;
    --ttdr-z-space-24: 24px;
    --ttdr-z-space-28: 28px;
    --ttdr-z-space-30: 30px;
    --ttdr-z-space-32: 32px;
    --ttdr-z-space-40: 40px;
    --ttdr-z-space-44: 44px;
    --ttdr-z-space-48: 48px;
    --ttdr-z-space-60: 60px;
    --ttdr-z-space-section-y: var(--ttdr-z-rhythm);
    /* 히어로: 비주얼 하단(y510) → 타이틀(y570) = 60px (Web 1280 main) */
    --ttdr-z-space-hero-pt: var(--ttdr-z-rhythm);
    --ttdr-z-space-hero-heading-pt: 60px;
    /* 타이틀(lh29) → 서브카피(y608) = 9px */
    --ttdr-z-space-hero-p-mt: 9px;
    --ttdr-z-space-hero-quick-mt: var(--ttdr-z-rhythm);
    --ttdr-z-space-hero-quick-gap: var(--ttdr-z-rhythm);
    --ttdr-z-space-hero-quick-max: 540px;
    --ttdr-z-space-section-compact-pt: var(--ttdr-z-rhythm);
    /* 제플린(PC Web 1280): 히어로 하단(y510) → 인트로 타이틀(y570) = 60px */
    --ttdr-z-space-intro-cards-pt: 60px;
    /* 인트로 하단 → 다운로드 제목(y1050): 카드 하단990 + 60 = pb20 + 다음 섹션 pt40 */
    --ttdr-z-space-intro-cards-pb: 20px;
    /* 제플린(PC Web 1280): 인트로 desc 하단(y626) → 카드(y658) = 32px / MO·태블릿은 미디어쿼리에서 16px 유지 */
    --ttdr-z-space-intro-head-mb: 32px;
    --ttdr-z-space-head-gap: var(--ttdr-z-rhythm-half);
    --ttdr-z-space-head-mb: 32px;
    --ttdr-z-space-eyebrow-mb: var(--ttdr-z-rhythm-half);
    /* 섹션 타이틀(29px lh) ↔ 설명: 제플린 ~9px */
    --ttdr-z-space-title-to-desc: var(--ttdr-z-space-9);
    --ttdr-z-space-head-to-grid: 32px;
    --ttdr-z-space-desc-center-mt: var(--ttdr-z-space-9);
    /* 제플린(PC Web 1280): 배송 상품 가격 하단(y2684) → 푸터 시작(y2764) = 80px */
    --ttdr-z-space-delivery-pb: 80px;
    --ttdr-z-space-grid-gap-pc: var(--ttdr-z-space-20);
    /* 플로팅 퀵: 셀 52 + 라벨(4+10) = 66, 행 간격 82 → 그리드 gap 16 */
    --ttdr-z-space-float-quick-gap: 16px;
    --ttdr-z-card-thumb-h-pc: 210px;
    --ttdr-z-card-body-min-pc: 122px;
    --ttdr-z-card-min-h-pc: 332px;
    --ttdr-z-card-radius-pc: 24px;
    --ttdr-z-card-content-px: var(--ttdr-z-space-20);
    --ttdr-z-card-content-pt: 14px;
    --ttdr-z-card-content-pb: 22px;
    --ttdr-z-card-badge-mb: var(--ttdr-z-space-10);
    --ttdr-z-card-title-mb: var(--ttdr-z-space-8);
    /* 제플린(PC Web 1280): desc 하단(y926) → 버튼 상단(y935) = 9px / MO는 @768에서 10px 직접 지정 */
    --ttdr-z-card-link-mt: 9px;
    --ttdr-z-product-thumb-radius: 12px;
    /* 제플린(Web 1280) 다운로드 상품: 썸(244) 아래 → 버튼(32) 시작까지 8px */
    --ttdr-z-product-body-pt: 8px;
    --ttdr-z-product-name-mb: 8px;
    /* 버튼(118×32) 사이 간격 8px, 버튼 → 상품명 간격 16px */
    --ttdr-z-product-actions-gap: var(--ttdr-z-space-8);
    --ttdr-z-product-actions-mb: 16px;
    --ttdr-z-product-badge-inset: 18px;
    --ttdr-z-product-badge-gap: var(--ttdr-z-space-8);
    /* 연합회 밴드: 상단(y1994) - 밴드 시작(y1962) = 32px 안쪽 패딩에 가깝게 */
    --ttdr-z-about-pt: 32px;
    --ttdr-z-about-pb: 32px;
    --ttdr-z-about-actions-mt: var(--ttdr-z-rhythm-half);
    --ttdr-z-about-actions-gap: var(--ttdr-z-space-4);
    --ttdr-z-footer-px-pb: var(--ttdr-z-rhythm);
    --ttdr-z-footer-top-py: var(--ttdr-z-rhythm) 0 var(--ttdr-z-rhythm);
    --ttdr-z-footer-top-gap: var(--ttdr-z-rhythm);
    --ttdr-z-footer-logo-mb: var(--ttdr-z-rhythm-half);
    --ttdr-z-footer-meta-pt: var(--ttdr-z-rhythm);
    --ttdr-z-footer-bottom-pt: var(--ttdr-z-rhythm-half);
    /* 제플린 본문·사이드 토큰 (Web 1280 메인 스크린) */
    --ttdr-z-c-text: #333333;
    --ttdr-z-c-text-muted: #bcbcbc;
    --ttdr-z-c-text-subtle: #303030;
    --ttdr-z-c-hero-grad-top: #faf8f5;
    --ttdr-z-c-hero-grad-mid: #ffffff;
    --ttdr-z-c-hero-visual: #949494;
    /* 컨텐츠 영역은 흰색(상단/하단만 베이지 계열) */
    --ttdr-z-c-intro-section: #ffffff;
    --ttdr-z-c-section-muted: #ffffff;
    --ttdr-z-c-card-surface: #f2f2f2;
    --ttdr-z-c-card-thumb-placeholder: #a2a2a2;
    --ttdr-z-c-intro-badge-bg: #47452a;
    --ttdr-z-c-intro-badge-text: #ffffff;
    --ttdr-z-c-product-thumb-border: #707070;
    --ttdr-z-c-float-cell-border: #e1e1e1;
    --ttdr-z-c-float-cell-bg: #ffffff;
    /* 제플린 버튼(PC): 기본 회색 아웃라인, 호버는 중립 회색 */
    --ttdr-z-c-outline-btn-border: #c9c9c9;
    --ttdr-z-c-soft-action-bg-hover: #f7f7f7;
    --ttdr-z-c-soft-action-border-hover: #bdbdbd;
    /* 타이포 스케일 (Zeplin Web 1280 / Pretendard) */
    --ttdr-z-t-hero-heading-size: 24px;
    --ttdr-z-t-hero-heading-lh: 29px;
    --ttdr-z-t-hero-heading-weight: 800;
    /* 제플린 Web 1280 타이틀 트래킹 */
    --ttdr-z-t-hero-heading-track: -0.48px;
    --ttdr-z-t-hero-desc-size: 15px;
    --ttdr-z-t-hero-desc-lh: 18px;
    --ttdr-z-t-section-title-size: 24px;
    --ttdr-z-t-section-title-lh: 29px;
    --ttdr-z-t-section-title-weight: 800;
    /* 제플린 Web 1280 섹션 타이틀 트래킹 */
    --ttdr-z-t-section-title-track: -0.48px;
    --ttdr-z-t-section-desc-size: 15px;
    --ttdr-z-t-section-desc-lh: 18px;
    --ttdr-z-t-intro-card-title-size: 16px;
    --ttdr-z-t-intro-card-title-lh: 19px;
    --ttdr-z-t-intro-card-desc-size: 12px;
    --ttdr-z-t-intro-card-desc-lh: 14px;
    --ttdr-z-t-product-name-size: 14px;
    --ttdr-z-t-product-name-lh: 20px;
    --ttdr-z-t-price-size: 16px;
    --ttdr-z-t-price-lh: 19px;
    --ttdr-z-t-price-del-size: 12px;
    --ttdr-z-t-price-del-lh: 14px;
    --ttdr-z-t-about-title-size: 20px;
    --ttdr-z-t-about-title-lh: 24px;
    --ttdr-z-t-about-desc-size: 12px;
    --ttdr-z-t-about-desc-lh: 14px;
    /* MO 섹션 타이틀 (mo main 18/21, -0.36) */
    --ttdr-z-t-mo-section-title-size: 18px;
    --ttdr-z-t-mo-section-title-lh: 21px;
    --ttdr-z-t-mo-section-title-track: -0.36px;
    /* 행 너비: 244×4+20×3=1036, 332×3+20×2=1036, 332×2+20=684 */
    --ttdr-z-grid-col-download: 244px;
    --ttdr-z-grid-col-intro: 332px;
    --ttdr-z-grid-col-delivery: 332px;
    --ttdr-z-grid-row-download: calc(var(--ttdr-z-grid-col-download) * 4 + var(--ttdr-z-space-grid-gap-pc) * 3);
    --ttdr-z-grid-row-intro: calc(var(--ttdr-z-grid-col-intro) * 3 + var(--ttdr-z-space-grid-gap-pc) * 2);
    --ttdr-z-grid-row-delivery: calc(var(--ttdr-z-grid-col-delivery) * 2 + var(--ttdr-z-space-grid-gap-pc));
    /* Zeplin: Pretendard(본문) + PretendardVariable(헤드라인) 혼용 */
    font-family: Pretendard, "PretendardVariable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ttdr-z-c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--ttdr-z-c-hero-grad-mid);
}

/* default.css/default_shop.css가 맑은고딕을 강제하므로 홈 레이아웃에서는 상속으로 되돌림 */
body.ttdr-home-body h1,
body.ttdr-home-body h2,
body.ttdr-home-body h3,
body.ttdr-home-body h4,
body.ttdr-home-body h5,
body.ttdr-home-body h6 {
    font-family: inherit;
}

body.ttdr-home-body input,
body.ttdr-home-body button,
body.ttdr-home-body textarea,
body.ttdr-home-body select {
    font-family: inherit;
}

/*
 * 제플린은 1280 고정 아트보드 기준이라 1280 미만(노트북/브라우저 축소)에서는
 * 좌우 패딩과 간격이 과해지며 헤더가 줄바꿈되기 쉬움.
 * → 1025~1279 구간은 "간격(패딩/갭)"을 줄여 레이아웃을 유지.
 */
@media (min-width: 1025px) and (max-width: 1279px) {
    body.ttdr-home-body {
        --ttdr-z-header-pl: clamp(16px, 5.2vw, 96px);
        --ttdr-z-header-pr: clamp(16px, 5.2vw, 96px);
    }

    .ttdr-home-header {
        --ttdr-z-util-gap: 12px;
        --ttdr-z-gnb-logo-mr: 24px;
        --ttdr-z-gnb-search-ml: 18px;
        --ttdr-z-nav-gap: 28px;
        --ttdr-z-nav-row-gap: 6px;
    }
}

/* 제플린 1280 아트보드: 좌우 120px 고정 (뷰포트 ≥1280) */
@media (min-width: 1280px) {
    body.ttdr-home-body {
        --ttdr-z-header-pl: 120px;
        --ttdr-z-header-pr: 120px;
    }

    /* Web 1280 정확도: GNB 메뉴 gap은 40px 고정 */
    .ttdr-home-header {
        --ttdr-z-nav-gap: 40px;
        --ttdr-z-nav-row-gap: 8px;
    }
}

body.ttdr-home-body #wrapper {
    background: #fff !important;
}

/* default_shop.css: #hd,#wrapper,#ft { min-width:1200px }, #hd { background:#212020 }, #container { width:1200px } 등과 충돌 방지 */
body.ttdr-home-body .ttdr-home-header,
body.ttdr-home-body .ttdr-home-mobile-header {
    background: #fff !important;
    min-width: 0 !important;
    width: 100%;
    max-width: none !important;
}

body.ttdr-home-body #wrapper,
body.ttdr-home-body #ft {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
}

.ttdr-home-body #container_wr {
    width: 100% !important;
    max-width: 100%;
}

.ttdr-home-body #container {
    float: none;
    width: 100% !important;
    max-width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 로그인·회원가입(약관/폼/결과): 본문 최대폭 1260px */
body.ttdr-home-body #container > .register,
body.ttdr-home-body #container > .mbskin {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin-left: auto;
    margin-right: auto;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

/* 쇼핑몰 메인(/shop/) — 배너·이벤트 영역 */
body.ttdr-home-body #container > .ttdr-shop-index {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin-left: auto;
    margin-right: auto;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

/* 내용관리 이용약관·개인정보처리방침(provision, privacy): 본문 폭 1036px·중앙 */
body.ttdr-home-body #container #ctt.ctt_provision,
body.ttdr-home-body #container #ctt.ctt_privacy {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ttdr-z-content-max);
    margin-left: auto;
    margin-right: auto;
    padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px));
}

/* 게시판·FAQ: default.css(930px+aside) 전제 없이 홈 레이아웃만 쓸 때 본문 여백·표 가로 스크롤 */
body.ttdr-home-body #container:has(#bo_list),
body.ttdr-home-body #container:has(#bo_v),
body.ttdr-home-body #container:has(#bo_w),
body.ttdr-home-body #container:has(#faq_sch) {
    box-sizing: border-box;
    padding: max(28px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}

body.ttdr-home-body #container:has(#faq_sch) #faq_sch {
    margin-top: 40px;
}

body.ttdr-home-body #container:has(#bo_list) #bo_list,
body.ttdr-home-body #container:has(#bo_v) #bo_v,
body.ttdr-home-body #container:has(#bo_w) #bo_w,
body.ttdr-home-body #container:has(#faq_sch) #container_title,
body.ttdr-home-body #container:has(#faq_sch) #faq_himg,
body.ttdr-home-body #container:has(#faq_sch) #faq_hhtml,
body.ttdr-home-body #container:has(#faq_sch) #bo_cate,
body.ttdr-home-body #container:has(#faq_sch) #faq_sch,
body.ttdr-home-body #container:has(#faq_sch) #faq_wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: 1036px;
    margin-left: auto;
    margin-right: auto;
}

body.ttdr-home-body #container:has(#bo_list) .tbl_head01.tbl_wrap,
body.ttdr-home-body #container:has(#bo_v) .tbl_head01.tbl_wrap,
body.ttdr-home-body #container:has(#bo_w) .tbl_head01.tbl_wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    body.ttdr-home-body:has(#bo_list),
    body.ttdr-home-body:has(#bo_v),
    body.ttdr-home-body:has(#bo_w),
    body.ttdr-home-body:has(#faq_sch) {
        overflow-x: visible;
    }
}

/*
 * 순정 그누 basic 게시판 — 홈 레이아웃(ttdr-home-body)에서만 톤 통일
 * (목록·검색·페이지네이션·보기·쓰기·댓글 공통 여백/타이포/포커스)
 */
/* 목록 상단 · 보기 하단 버튼줄 */
body.ttdr-home-body #bo_list #bo_btn_top,
body.ttdr-home-body #bo_v #bo_v_top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

body.ttdr-home-body #bo_list #bo_list_total {
    margin: 0;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #475467;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 8px;
}

body.ttdr-home-body #bo_v #bo_v_info {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #475467;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
}

body.ttdr-home-body #bo_v #bo_v_info h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.ttdr-home-body #bo_v #bo_v_info strong {
    font-weight: 600;
    color: #344054;
}

body.ttdr-home-body #bo_v #bo_v_info .if_date {
    margin-left: auto;
    color: #667085;
    font-weight: 500;
}

body.ttdr-home-body #bo_v > header {
    margin-bottom: 14px;
}

body.ttdr-home-body #bo_v #bo_v_title {
    margin: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid #eaecf0;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    color: #1d2939;
    letter-spacing: -0.02em;
}

body.ttdr-home-body #bo_v #bo_v_title .bo_v_cate {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #b42318;
    vertical-align: middle;
    background: #fee4e2;
    border-radius: 4px;
}

body.ttdr-home-body #bo_list .btn_bo_user,
body.ttdr-home-body #bo_v .btn_bo_user,
body.ttdr-home-body #bo_v .bo_v_left,
body.ttdr-home-body #bo_v .bo_v_com {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ttdr-home-body #bo_v #bo_v_top .bo_v_nb {
    flex-basis: 100%;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    overflow: hidden;
}

body.ttdr-home-body #bo_v #bo_v_top .bo_v_nb li {
    padding: 12px 16px;
    border-top: 1px solid #f2f4f7;
    font-size: 14px;
}

body.ttdr-home-body #bo_v #bo_v_top .bo_v_nb li:first-child {
    border-top: 0;
}

body.ttdr-home-body #bo_v #bo_v_top .bo_v_nb .nb_tit {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #667085;
    text-transform: none;
    letter-spacing: 0;
}

body.ttdr-home-body #bo_v #bo_v_top .bo_v_nb a {
    color: #1d2939;
    font-weight: 600;
}

body.ttdr-home-body #bo_list .btn_bo_user .btn,
body.ttdr-home-body #bo_v .btn_bo_user .btn,
body.ttdr-home-body #bo_v .bo_v_left .btn,
body.ttdr-home-body #bo_v .bo_v_com .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.ttdr-home-body #bo_list a.btn_b01,
body.ttdr-home-body #bo_v a.btn_b01 {
    background: #fff;
    border-color: #d0d5dd;
    color: #344054 !important;
}

body.ttdr-home-body #bo_list a.btn_b01:hover,
body.ttdr-home-body #bo_v a.btn_b01:hover {
    background: #f9fafb;
    border-color: #98a2b3;
}

body.ttdr-home-body #bo_list a.btn_b02,
body.ttdr-home-body #bo_v a.btn_b02,
body.ttdr-home-body #bo_w button.btn_submit,
body.ttdr-home-body #bo_w .btn_confirm .btn_submit {
    background: #d92d20 !important;
    border-color: #d92d20 !important;
    color: #fff !important;
}

body.ttdr-home-body #bo_list a.btn_b02:hover,
body.ttdr-home-body #bo_v a.btn_b02:hover,
body.ttdr-home-body #bo_w button.btn_submit:hover,
body.ttdr-home-body #bo_w .btn_confirm .btn_submit:hover {
    background: #b42318 !important;
    border-color: #b42318 !important;
}

body.ttdr-home-body #bo_list a.btn_admin,
body.ttdr-home-body #bo_v a.btn_admin,
body.ttdr-home-body #bo_list button.btn_admin,
body.ttdr-home-body #bo_v button.btn_admin {
    background: #fff !important;
    border: 1px solid #d0d5dd !important;
    color: #344054 !important;
    cursor: pointer;
}

body.ttdr-home-body #bo_list button.btn_admin:hover,
body.ttdr-home-body #bo_v button.btn_admin:hover {
    background: #f9fafb !important;
}

body.ttdr-home-body #bo_list #bo_cate,
body.ttdr-home-body #bo_w #bo_cate {
    margin: 0 0 18px;
}

body.ttdr-home-body #bo_list #bo_cate h2,
body.ttdr-home-body #bo_w #bo_cate h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

body.ttdr-home-body #bo_list #bo_cate_ul,
body.ttdr-home-body #bo_w #bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ttdr-home-body #bo_list #bo_cate_ul a,
body.ttdr-home-body #bo_w #bo_cate_ul a {
    display: inline-block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eaecf0;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

body.ttdr-home-body #bo_list #bo_cate_ul a:hover,
body.ttdr-home-body #bo_w #bo_cate_ul a:hover {
    border-color: #d0d5dd;
    color: #1d2939;
}

body.ttdr-home-body #bo_list #bo_cate_ul #bo_cate_on a,
body.ttdr-home-body #bo_list #bo_cate_ul .active a,
body.ttdr-home-body #bo_w #bo_cate_ul #bo_cate_on a {
    background: #1d2939;
    border-color: #1d2939;
    color: #fff !important;
}

body.ttdr-home-body #bo_list .tbl_head01 table,
body.ttdr-home-body #bo_v .tbl_head01 table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eaecf0;
    border-radius: 10px;
    overflow: hidden;
}

body.ttdr-home-body #bo_list .tbl_head01 thead th,
body.ttdr-home-body #bo_v .tbl_head01 thead th {
    padding: 14px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    background: #f2f4f7;
    border-bottom: 1px solid #eaecf0;
    white-space: nowrap;
}

body.ttdr-home-body #bo_list .tbl_head01 thead th a,
body.ttdr-home-body #bo_v .tbl_head01 thead th a {
    color: inherit;
    text-decoration: none;
}

body.ttdr-home-body #bo_list .tbl_head01 thead th a:hover,
body.ttdr-home-body #bo_v .tbl_head01 thead th a:hover {
    color: #1d2939;
    text-decoration: underline;
}

body.ttdr-home-body #bo_list .tbl_head01 tbody td,
body.ttdr-home-body #bo_v .tbl_head01 tbody td {
    padding: 14px 12px;
    font-size: 14px;
    line-height: 1.45;
    color: #475467;
    border-top: 1px solid #f2f4f7;
    vertical-align: middle;
}

body.ttdr-home-body #bo_list .tbl_head01 tbody tr:hover td {
    background: #fcfcfd;
}

body.ttdr-home-body #bo_list .tbl_head01 tbody tr.bo_notice td {
    background: linear-gradient(90deg, #fffbeb 0%, #fffaeb 100%);
    border-color: #fde68a;
}

body.ttdr-home-body #bo_list .tbl_head01 tbody tr.bo_notice:hover td {
    background: #fff5d6;
}

body.ttdr-home-body #bo_list .notice_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 50px;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, #ff8a4c 0%, #ff692e 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.02em;
    box-shadow: 0 1px 2px rgba(255, 86, 30, 0.22);
}

body.ttdr-home-body #bo_list .notice_icon .fa {
    font-size: 12px;
    opacity: 0.95;
}

body.ttdr-home-body #bo_list .td_subject .bo_tit {
    line-height: 1.45;
}

body.ttdr-home-body #bo_list .td_subject .bo_tit a {
    color: #1d2939;
    font-weight: 600;
    text-decoration: none;
}

body.ttdr-home-body #bo_list .td_subject .bo_tit a:hover {
    color: #d92d20;
    text-decoration: underline;
}

body.ttdr-home-body #bo_list .cnt_cmt {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 700;
    color: #b42318;
    vertical-align: middle;
    background: #fee4e2;
    border-radius: 999px;
}

body.ttdr-home-body #bo_list .td_num,
body.ttdr-home-body #bo_list .td_datetime {
    font-variant-numeric: tabular-nums;
    color: #667085;
    font-size: 13px;
}

body.ttdr-home-body #bo_list .bo_current {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #067647;
    background: #ecfdf3;
    border-radius: 4px;
}

body.ttdr-home-body #bo_list td.empty_table {
    padding: 56px 20px;
    color: #98a2b3;
    font-size: 15px;
    text-align: center;
}

body.ttdr-home-body #bo_list .bo_fx {
    margin-top: 18px;
    margin-bottom: 8px;
}

body.ttdr-home-body #bo_list .bo_fx .btn_bo_user {
    justify-content: flex-end;
}

body.ttdr-home-body #bo_list #bo_sch {
    margin: 28px auto 0;
    padding: 0;
    border: 0;
    max-width: 1036px;
}

body.ttdr-home-body #bo_list #bo_sch legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

body.ttdr-home-body #bo_list #bo_sch form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

body.ttdr-home-body #bo_list #bo_sch #sfl {
    flex: 0 0 auto;
    min-width: 120px;
    width: auto;
    max-width: 100%;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
    color: #344054;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

body.ttdr-home-body #bo_list #bo_sch .sch_input {
    flex: 0 1 320px;
    width: 100%;
    max-width: min(100%, 420px);
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    font-size: 14px;
    color: #1d2939;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
}

body.ttdr-home-body #bo_list #bo_sch .sch_input::placeholder {
    color: #98a2b3;
}

body.ttdr-home-body #bo_list #bo_sch .sch_btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 42px;
    padding: 0 16px;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    background: #344054;
    border: 1px solid #344054;
    border-radius: 8px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

body.ttdr-home-body #bo_list #bo_sch .sch_btn:hover {
    background: #1d2939;
    border-color: #1d2939;
}

/* 공지사항 게시판(notice): 본문 위·아래 여백 확대, 검색창 가로 전체 사용 */
body.tt-board-notice.ttdr-home-body #container:has(#bo_list),
body.tt-board-notice.ttdr-home-body #container:has(#bo_v),
body.tt-board-notice.ttdr-home-body #container:has(#bo_w) {
    padding-top: max(48px, env(safe-area-inset-top, 0px));
    padding-bottom: max(56px, env(safe-area-inset-bottom, 0px));
}

body.tt-board-notice.ttdr-home-body #bo_list #bo_sch {
    width: 100%;
    max-width: 100%;
}

body.tt-board-notice.ttdr-home-body #bo_list #bo_sch form {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
}

body.tt-board-notice.ttdr-home-body #bo_list #bo_sch .sch_input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

/* 공지 게시판: 목록·글보기·쓰기 영역 시작부 위쪽 30px */
body.tt-board-notice.ttdr-home-body #container #bo_list,
body.tt-board-notice.ttdr-home-body #container #bo_v,
body.tt-board-notice.ttdr-home-body #container #bo_w {
    padding-top: 30px;
    box-sizing: border-box;
}

/* 목록 인기글(조회 상한) 표시 하트 미노출 — PC `.bo_tit` / 모바일 `a.bo_subject` */
body.tt-board-notice #bo_list .bo_tit .fa-heart,
body.tt-board-notice #bo_list a.bo_subject .fa-heart {
    display: none !important;
}

body.ttdr-home-body #container:has(#bo_list) .pg_wrap {
    float: none;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 24px 0 0;
    padding: 0;
}

body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_page,
body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_current {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-indent: 0 !important;
    text-decoration: none;
    border-radius: 8px;
    overflow: visible;
    background: #fff !important;
    border: 1px solid #eaecf0 !important;
    color: #475467 !important;
    box-shadow: none;
}

body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_page:hover {
    background: #f9fafb !important;
    border-color: #d0d5dd !important;
    color: #1d2939 !important;
}

body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_current {
    background: #1d2939 !important;
    border-color: #1d2939 !important;
    color: #fff !important;
}

body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_start,
body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_prev,
body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_next,
body.ttdr-home-body #container:has(#bo_list) .pg_wrap .pg_end {
    background: #fff !important;
    background-image: none !important;
    text-indent: 0 !important;
    font-size: 13px;
    font-weight: 700;
    color: #344054 !important;
}

body.ttdr-home-body #bo_v #bo_v_atc {
    margin-top: 8px;
}

body.ttdr-home-body #bo_v #bo_v_atc_title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

body.ttdr-home-body #bo_v #bo_v_con {
    padding: 20px 4px 8px;
    font-size: 16px;
    line-height: 1.75;
    color: #344054;
    word-break: break-word;
}

body.ttdr-home-body #bo_v #bo_v_con img {
    max-width: 100%;
    height: auto;
}

body.ttdr-home-body #bo_v #bo_v_file,
body.ttdr-home-body #bo_v #bo_v_link {
    margin-top: 24px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

body.ttdr-home-body #bo_v #bo_v_file h2,
body.ttdr-home-body #bo_v #bo_v_link h2 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1d2939;
}

body.ttdr-home-body #bo_v #bo_v_file ul,
body.ttdr-home-body #bo_v #bo_v_link ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ttdr-home-body #bo_v #bo_v_file li,
body.ttdr-home-body #bo_v #bo_v_link li {
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px solid #eaecf0;
}

body.ttdr-home-body #bo_v #bo_v_file li:first-child,
body.ttdr-home-body #bo_v #bo_v_link li:first-child {
    border-top: 0;
    padding-top: 0;
}

body.ttdr-home-body #bo_v #bo_v_share {
    margin: 20px 0;
}

body.ttdr-home-body #bo_w {
    padding-bottom: 8px;
}

body.ttdr-home-body #bo_w .tbl_frm01 caption {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1d2939;
    text-align: left;
}

body.ttdr-home-body #bo_w .tbl_frm01 th {
    padding: 14px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #344054;
    background: #f9fafb;
}

body.ttdr-home-body #bo_w .tbl_frm01 td {
    padding: 14px 12px;
    font-size: 14px;
    background: #fff;
}

body.ttdr-home-body #bo_w .frm_input,
body.ttdr-home-body #bo_w input[type="text"],
body.ttdr-home-body #bo_w input[type="password"],
body.ttdr-home-body #bo_w input[type="email"],
body.ttdr-home-body #bo_w input[type="number"],
body.ttdr-home-body #bo_w select,
body.ttdr-home-body #bo_w textarea {
    border-radius: 8px;
    border: 1px solid #d0d5dd;
}

body.ttdr-home-body #bo_w textarea {
    min-height: 200px;
    padding: 12px 14px;
}

body.ttdr-home-body #bo_w .btn_confirm {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eaecf0;
}

body.ttdr-home-body #bo_w .btn_cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    margin-right: 8px;
    font-weight: 600;
    border-radius: 8px;
}

body.ttdr-home-body #bo_vc_w {
    margin-top: 28px;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 10px;
}

body.ttdr-home-body #bo_vc #bo_vc_sns h2 {
    font-size: 15px;
    font-weight: 700;
    color: #1d2939;
}

body.ttdr-home-body #bo_list a:focus-visible,
body.ttdr-home-body #bo_v a:focus-visible,
body.ttdr-home-body #bo_w a:focus-visible,
body.ttdr-home-body #bo_list button:focus-visible,
body.ttdr-home-body #bo_v button:focus-visible,
body.ttdr-home-body #bo_w button:focus-visible,
body.ttdr-home-body #bo_list #bo_sch .sch_input:focus-visible,
body.ttdr-home-body #bo_list #bo_sch #sfl:focus-visible {
    outline: 2px solid #2e90fa;
    outline-offset: 2px;
}

@media (max-width: 767px) {
    body.ttdr-home-body #bo_list #bo_btn_top {
        flex-direction: column;
        align-items: stretch;
    }

    body.ttdr-home-body #bo_list .btn_bo_user {
        justify-content: flex-start;
    }

    body.ttdr-home-body #bo_v #bo_v_info .if_date {
        margin-left: 0;
    }

    body.ttdr-home-body #bo_list #bo_sch form {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    body.ttdr-home-body #bo_list #bo_sch #sfl,
    body.ttdr-home-body #bo_list #bo_sch .sch_input,
    body.ttdr-home-body #bo_list #bo_sch .sch_btn {
        width: 100%;
    }

    body.tt-board-notice.ttdr-home-body #bo_list #bo_sch .sch_input {
        flex: 0 0 auto;
        width: 100%;
    }

    body.ttdr-home-body #bo_list .tbl_head01 thead th,
    body.ttdr-home-body #bo_list .tbl_head01 tbody td {
        padding: 10px 8px;
        font-size: 13px;
    }

    body.ttdr-home-body #bo_v #bo_v_top {
        flex-direction: column;
        align-items: stretch;
    }

    body.ttdr-home-body #bo_v .bo_v_com,
    body.ttdr-home-body #bo_v .bo_v_left {
        justify-content: flex-start;
    }
}

.ttdr-home {
    max-width: 100%;
    overflow-x: clip;
    color: var(--ttdr-z-c-text);
}

.ttdr-home-body .ttdr-logo-text {
    display: inline-block;
    color: #1d2939;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* PC 헤더: 제플린 Component 1 (Web 1280) — 공지60·유틸36·GNB94·메뉴16/19 Semibold */
.ttdr-home-header {
    --ttdr-z-util-h: 36px;
    --ttdr-z-util-text: 14px;
    --ttdr-z-util-gap: 16px;
    --ttdr-z-gnb-min-h: 94px;
    --ttdr-z-gnb-pad-y: 0;
    /* 실사용 메뉴 항목 수가 늘어도 1280에서 1줄 유지되도록 여백을 보수적으로 */
    --ttdr-z-gnb-logo-mr: 22px;
    --ttdr-z-gnb-search-ml: 18px;
    --ttdr-z-logo-mark: 56px;
    --ttdr-z-logo-title: 18px;
    --ttdr-z-logo-domain: 12px;
    --ttdr-z-nav: 16px;
    --ttdr-z-nav-lh: 19px;
    --ttdr-z-nav-letter: 0;
    /* 정확도 우선: Web 1280 기준 메뉴 gap 40px 고정 */
    --ttdr-z-nav-gap: 40px;
    --ttdr-z-nav-row-gap: 8px;
    --ttdr-z-gnb-col-gap: 0;
    --ttdr-z-search-w: 156px;
    --ttdr-z-search-h: 38px;
    --ttdr-z-search-in: 14px;
    --ttdr-z-search-ph: #bcbcbc;
    /* 38px 높이 캡슐 → 반지름 19px (제플린과 동일 비율) */
    --ttdr-z-search-radius: 19px;
    /* 제플린 Component 51: 24×24 히트, 렌즈 약 15px */
    --ttdr-z-search-icon: 15px;
    --ttdr-z-search-btn: 24px;
    --ttdr-z-search-pl: 20px;
    --ttdr-z-search-pr: 12px;
    position: relative;
    z-index: 300;
    background: #fff;
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
}

.ttdr-home-header input,
.ttdr-home-header button,
.ttdr-home-header a {
    font-family: inherit;
}

/* 스크린리더 제목·스킵링크 */
.ttdr-home-header #hd_h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
}

.ttdr-home-header #skip_to_container a {
    position: absolute;
    left: -9999px;
    z-index: 1000;
    padding: 12px 16px;
    background: var(--ttdr-notice-bg);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.ttdr-home-header #skip_to_container a:focus {
    left: 16px;
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ─── 상단 공지 바 ─── */
.ttdr-home-header__topband {
    height: var(--ttdr-z-notice-h);
    background: var(--ttdr-notice-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ttdr-home-header__topband-inner {
    display: flex;
    align-items: center;
    gap: var(--ttdr-z-space-16);
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ttdr-z-header-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--ttdr-z-header-pr) 0 var(--ttdr-z-header-pl);
}

.ttdr-home-header__topband-link {
    display: flex;
    align-items: center;
    gap: var(--ttdr-z-space-16);
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.ttdr-home-header__topband-link:hover,
.ttdr-home-header__topband-link:focus-visible {
    color: inherit;
    text-decoration: none;
    opacity: 0.94;
}

.ttdr-home-header__topband-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
    border-radius: 4px;
}

.ttdr-home-header__notice-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 44px;
    height: 22px;
    padding: 0 var(--ttdr-z-space-8);
    border-radius: 11px;
    background: var(--ttdr-notice-badge-bg);
    color: #fff;
    font-size: var(--ttdr-z-notice-badge); /* 제플린: Regular 15px */
    line-height: 18px; /* 제플린 lh18 */
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.ttdr-home-header__notice-text {
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: #fff;
    font-size: var(--ttdr-z-notice-text);
    line-height: var(--ttdr-z-notice-text-lh);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttdr-home-header__notice-close {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    position: relative;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ttdr-home-header__notice-close::before,
.ttdr-home-header__notice-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: rgba(255, 255, 255, 1);
    transform-origin: center;
}

.ttdr-home-header__notice-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.ttdr-home-header__notice-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.ttdr-home-header__notice-close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.ttdr-home-header__notice-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ttdr-home-header__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ttdr-z-header-max);
    margin: 0 auto;
    padding-left: var(--ttdr-z-header-pl);
    padding-right: var(--ttdr-z-header-pr);
}

/* ─── 유틸(베이지 바) — 장바구니·건수는 여기만 (GNB에 중복 없음) ─── */
.ttdr-home-header__utility {
    height: var(--ttdr-z-util-h);
    background: var(--ttdr-util-bg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ttdr-home-header__utility-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--ttdr-z-space-4) var(--ttdr-z-util-gap);
    min-height: var(--ttdr-z-util-h);
    padding: 0;
    box-sizing: border-box;
}

.ttdr-home-header__utility-links a {
    display: inline-flex;
    align-items: center;
    color: var(--ttdr-util-text);
    font-size: var(--ttdr-z-util-text);
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.ttdr-home-header__utility-links a:hover {
    color: #111;
}

.ttdr-home-header__utility-links a:focus-visible {
    outline: 2px solid var(--ttdr-notice-bg);
    outline-offset: 2px;
    border-radius: 2px;
}

.ttdr-home-header__utility-links a .ttdr-home-header__count {
    color: var(--ttdr-util-text);
    font-weight: 500;
    transition: color 0.15s ease;
}

.ttdr-home-header__utility-links a .ttdr-home-header__count:not(.ttdr-home-header__count--zero) {
    color: var(--ttdr-cart-count);
}

.ttdr-home-header__count--zero {
    font-weight: 500;
}

/* ─── GNB(로고 · 메뉴 · 검색) — 장바구니는 유틸 바만 ─── */
.ttdr-home-header__main {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
    border-bottom: 0;
    position: relative;
    z-index: 100;
}

.ttdr-home-header__main .ttdr-home-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ttdr-z-gnb-col-gap);
    row-gap: 0;
    min-height: var(--ttdr-z-gnb-min-h);
    padding-top: var(--ttdr-z-gnb-pad-y);
    padding-bottom: var(--ttdr-z-gnb-pad-y);
    box-sizing: border-box;
}

/* 가로 스크롤 금지: 한 줄 초과 시 항목(li) 단위로만 줄바꿈 */
.ttdr-home-header__nav {
    min-width: 0;
    justify-self: stretch;
    overflow: visible;
}

/* ─── GNB 2depth 드롭다운 ─── */

/* 각 메뉴 아이템 기준으로 드롭다운 위치 잡기 */
.ttdr-home-header__nav-item {
    position: relative;
}

/* 제플린 Group 3827 기준: 182×76px, borderRadius 12, border 2px #bcbcbc, opacity 0.9 */
.ttdr-home-header__drop {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    /* top: nav item 하단 + dot(10px) + 4px gap + 8px margin = 22px */
    top: calc(100% + 22px);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #bcbcbc;
    border-radius: 12px;
    z-index: 300;
    min-width: 182px;
    white-space: nowrap;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

/* 22px 갭 브릿지 - 마우스가 메뉴와 드롭다운 사이를 이동할 때 hover 유지 */
.ttdr-home-header__drop::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    height: 22px;
}

.ttdr-home-header__nav-item--has-drop:hover .ttdr-home-header__drop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* 제플린: padding 16px 0, gap 12px (item height 16px, top/bottom 16px) */
.ttdr-home-header__drop-inner {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    gap: 12px;
}

.ttdr-home-header__drop-group {
    display: block;
}

/* 명시도 (0,2,0): nav-list a (0,1,1)보다 높아 정확히 override */
/* 제플린: Pretendard-Regular 14px/16px, textAlign center, color #000 */
.ttdr-home-header__drop .ttdr-home-header__drop-head {
    display: block;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    font-variation-settings: "wght" 400; /* variable font weight 명시 override */
    color: #000;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0;
    transition: color 0.12s ease;
}

/* 제플린 Component 95: active color rgb(255,81,81) = #ff5151 */
.ttdr-home-header__drop .ttdr-home-header__drop-head:hover {
    color: #ff5151;
}

/* 3depth 있을 경우 (me_code 6자리 지원 시) */
.ttdr-home-header__drop-sub {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 4px;
}

/* 명시도 (0,2,1) */
.ttdr-home-header__drop .ttdr-home-header__drop-sub a {
    display: block;
    padding: 6px 14px 6px 22px;
    font-size: 13px;
    font-weight: 400;
    font-variation-settings: "wght" 400;
    color: #555;
    text-decoration: none;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    letter-spacing: 0;
    transition: color 0.12s ease;
}

.ttdr-home-header__drop .ttdr-home-header__drop-sub a:hover {
    color: #ff5151;
}

.ttdr-home-header__tail {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-left: var(--ttdr-z-gnb-search-ml);
    position: relative;
    z-index: 2;
    background: #fff;
}

.ttdr-home-header__search {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: var(--ttdr-z-search-w);
    min-width: var(--ttdr-z-search-w);
    max-width: var(--ttdr-z-search-w);
    flex-shrink: 0;
    height: var(--ttdr-z-search-h);
    padding: 0 var(--ttdr-z-search-pr) 0 var(--ttdr-z-search-pl);
    gap: 0;
    border: 2px solid #fc6161;
    border-radius: var(--ttdr-z-search-radius);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ttdr-home-header__search:focus-within {
    border-color: #fc6161;
    box-shadow: 0 0 0 3px rgba(252, 97, 97, 0.22);
    background: #fff;
}

.ttdr-home-header__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--ttdr-z-search-in);
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #333333;
}

.ttdr-home-header__search input:focus {
    outline: none;
}

.ttdr-home-header__search input::placeholder {
    color: var(--ttdr-z-search-ph);
}

.ttdr-home-header__search-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ttdr-z-search-btn);
    height: var(--ttdr-z-search-btn);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fc6161;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ttdr-home-header__search-submit .fa {
    display: block;
    font-size: var(--ttdr-z-search-icon);
    line-height: 1;
    text-align: center;
}

.ttdr-home-header__search-submit:hover {
    background: rgba(252, 97, 97, 0.1);
}

.ttdr-home-header__search-submit:focus-visible {
    outline: 2px solid #fc6161;
    outline-offset: 1px;
}

.ttdr-home-header__logo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: var(--ttdr-z-space-12);
    margin-right: var(--ttdr-z-gnb-logo-mr);
    max-width: min(280px, 32vw);
    line-height: 1.2;
    text-decoration: none;
    color: inherit;
}

.ttdr-home-header__logo-mark {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ttdr-home-header__logo-mark img {
    display: block;
    max-width: var(--ttdr-z-logo-mark);
    max-height: var(--ttdr-z-logo-mark);
    width: auto;
    height: auto;
    object-fit: contain;
}

.ttdr-home-header__logo-mark--text {
    width: var(--ttdr-z-logo-mark);
    height: var(--ttdr-z-logo-mark);
    border-radius: 50%;
    background: #1d2939;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: background 0.15s ease;
}

.ttdr-home-header__logo:hover .ttdr-home-header__logo-mark--text {
    background: var(--ttdr-brand);
}

.ttdr-home-header__logo-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.ttdr-home-header__logo-title {
    margin: 0;
    font-size: var(--ttdr-z-logo-title);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111;
    line-height: 1.25;
}

.ttdr-home-header__logo-domain {
    display: block;
    margin-top: 2px;
    font-size: var(--ttdr-z-logo-domain);
    font-weight: 500;
    color: #888;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 제플린 logo_ver 148×64: 가로 비율 유지, 타이틀 텍스트와 중복 없음 */
.ttdr-home-header__logo--wordmark {
    max-width: min(148px, 44vw);
    flex-shrink: 0;
}

.ttdr-home-header__logo--wordmark .ttdr-home-header__logo-mark img {
    display: block;
    max-height: 64px;
    max-width: 148px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.ttdr-home-header__nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    gap: var(--ttdr-z-nav-row-gap) var(--ttdr-z-nav-gap);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 제플린(Web 1280): 유틸/메뉴는 한 줄 고정 */
@media (min-width: 1025px) {
    .ttdr-home-header__utility-links {
        flex-wrap: nowrap;
    }

    .ttdr-home-header__nav-list {
        flex-wrap: nowrap;
    }
}

/*
 * 곡별악보콘텐츠 | 배송상품몰: 구분선 기준 양옆 각 30px 고정.
 * 메뉴 리스트의 column-gap(--ttdr-z-nav-gap)과 합쳐서 항상 30px이 되도록 보정한다.
 */
.ttdr-home-header__nav-sep {
    list-style: none;
    flex-shrink: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: calc(30px - var(--ttdr-z-nav-gap));
    margin-right: calc(30px - var(--ttdr-z-nav-gap));
    padding: 0;
    box-sizing: border-box;
}

/* 제플린 Line: 세로 1px 막대(문자 | 대체), 메뉴 라인하이트에 맞춤 */
.ttdr-home-header__nav-sep-bar {
    display: block;
    width: 1px;
    height: var(--ttdr-z-nav-lh);
    padding: 0;
    background: #707070;
    border: 0;
    border-radius: 0;
}

.ttdr-home-header__nav-list li {
    margin: 0;
    padding: 0;
}

.ttdr-home-header__nav-list a {
    display: inline-block;
    padding: 0;
    color: #333333;
    font-size: var(--ttdr-z-nav);
    line-height: var(--ttdr-z-nav-lh);
    font-weight: 600;
    font-variation-settings: "wght" 600;
    letter-spacing: var(--ttdr-z-nav-letter);
    white-space: nowrap;
    word-break: keep-all;
    transition: color 0.15s ease;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-kerning: normal;
    font-feature-settings: "kern" 1;
    font-optical-sizing: auto;
}

/* 메뉴가 길어도 1줄을 강제(드롭다운은 overflow:visible 필요) */
@media (min-width: 1025px) {
    .ttdr-home-header__nav {
        overflow: visible;
    }

    .ttdr-home-header__nav-list {
        flex-wrap: nowrap;
        min-width: 0;
        overflow: visible;
    }
}

/* 제플린: dropdown 없는 일반 메뉴만 hover 시 빨간색 */
.ttdr-home-header__nav-list li:not(.ttdr-home-header__nav-item--has-drop) a:hover {
    color: var(--ttdr-brand);
}

/* 제플린 Component 96: dropdown 있는 메뉴는 hover해도 텍스트 색 유지 (#333), dot만 표시 */
.ttdr-home-header__nav-item--has-drop > a:hover {
    color: #333333;
}

/* 드롭다운이 viewport 오른쪽 끝에 걸리지 않도록 마지막 아이템들 우측 정렬 */
.ttdr-home-header__nav-list li:nth-last-child(-n+2).ttdr-home-header__nav-item--has-drop .ttdr-home-header__drop {
    left: auto;
    right: 0;
    transform: translateY(6px);
}

.ttdr-home-header__nav-list li:nth-last-child(-n+2).ttdr-home-header__nav-item--has-drop:hover .ttdr-home-header__drop {
    transform: translateY(0);
}

/* 제플린 Ellipse 1391: 10×10px, #ff5151, 텍스트 하단 4px 아래 */
.ttdr-home-header__nav-item--has-drop > a {
    position: relative;
}

.ttdr-home-header__nav-item--has-drop > a::after {
    content: '';
    position: absolute;
    /* 텍스트 하단 4px gap 후 dot 시작, dot bottom이 ::after bottom */
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5151;
    transition: transform 0.15s ease;
}

.ttdr-home-header__nav-item--has-drop:hover > a::after {
    transform: translateX(-50%) scale(1);
}

.ttdr-home-header__nav-list a:focus-visible {
    outline: 2px solid var(--ttdr-brand);
    outline-offset: 3px;
    border-radius: 2px;
}

.ttdr-home-mobile-header {
    display: none;
}

.ttdr-home-mobile-drawer {
    display: none; /* 모바일 미디어쿼리에서 flex로 변경, [hidden] 속성으로 제어 */
}

.ttdr-home a {
    color: inherit;
}

.ttdr-home__inner {
    box-sizing: border-box;
    width: min(var(--ttdr-z-content-max), calc(100% - var(--ttdr-z-header-pl) - var(--ttdr-z-header-pr)));
    max-width: 100%;
    margin: 0 auto;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.ttdr-home__section {
    padding: var(--ttdr-z-space-section-y) 0;
}

.ttdr-home__section--compact {
    padding-top: var(--ttdr-z-space-section-compact-pt);
    padding-bottom: 0;
}

/* 제플린: 여름성경학교 콘텐츠 소개 — 섹션 톤·타이틀 간격 */
.ttdr-home__section--intro-cards.ttdr-home__section--compact {
    padding-top: var(--ttdr-z-space-intro-cards-pt);
    padding-bottom: var(--ttdr-z-space-intro-cards-pb);
    background: var(--ttdr-z-c-intro-section);
}

.ttdr-home__intro-section-head {
    margin-bottom: var(--ttdr-z-space-intro-head-mb);
}

.ttdr-home__intro-section-head .ttdr-home__title {
    margin-bottom: 0;
    color: var(--ttdr-z-c-text);
}

.ttdr-home__section--muted {
    background: var(--ttdr-z-c-section-muted);
}

.ttdr-home__section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ttdr-z-space-head-gap);
    margin-bottom: var(--ttdr-z-space-head-mb);
}

.ttdr-home__section-head--center {
    display: block;
    text-align: center;
}

.ttdr-home__section-head--center .ttdr-home__eyebrow {
    display: inline-block;
    margin-bottom: var(--ttdr-z-space-eyebrow-mb);
}

.ttdr-home__section-head--center .ttdr-home__desc {
    max-width: 480px;
    margin: var(--ttdr-z-space-desc-center-mt) auto 0;
}

/* 제플린: 섹션 제목(29) → 설명 간 약 9px */
#ttdr-download .ttdr-home__section-head--center .ttdr-home__title,
#ttdr-delivery .ttdr-home__section-head--center .ttdr-home__title {
    margin-bottom: var(--ttdr-z-space-title-to-desc);
}

/* 설명(18px lh) 아래 상품 그리드까지 약 32px */
#ttdr-download .ttdr-home__section-head--center .ttdr-home__desc,
#ttdr-delivery .ttdr-home__section-head--center .ttdr-home__desc {
    margin-top: 0;
    margin-bottom: 0;
}

#ttdr-download .ttdr-home__section-head,
#ttdr-delivery .ttdr-home__section-head {
    margin-bottom: var(--ttdr-z-space-head-to-grid);
}

@media (min-width: 769px) {
    #ttdr-delivery.ttdr-home__section {
        /* 제플린(PC Web 1280): 연합회 밴드 하단(y2102) → 배송 타이틀(y2162) = 60px */
        padding-top: 60px;
        padding-bottom: var(--ttdr-z-space-delivery-pb);
    }
}

.ttdr-home__eyebrow {
    display: inline-block;
    margin-bottom: var(--ttdr-z-space-eyebrow-mb);
    padding: var(--ttdr-z-space-8) 14px;
    border-radius: 999px;
    background: #f4ead0;
    color: #8f6b1a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ttdr-home__title {
    margin: 0;
    font-size: var(--ttdr-z-t-section-title-size);
    line-height: var(--ttdr-z-t-section-title-lh);
    font-weight: var(--ttdr-z-t-section-title-weight);
    letter-spacing: var(--ttdr-z-t-section-title-track);
    font-variation-settings: "wght" 800;
}

.ttdr-home__desc {
    max-width: 460px;
    color: var(--ttdr-z-c-text-muted);
    font-size: var(--ttdr-z-t-section-desc-size);
    line-height: var(--ttdr-z-t-section-desc-lh);
    font-weight: 400;
}

.ttdr-home__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ttdr-z-space-8);
    color: #5b6470;
    font-size: 15px;
    font-weight: 700;
}

.ttdr-home__hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ttdr-z-c-hero-grad-top) 0%, var(--ttdr-z-c-hero-grad-mid) 52%);
    /* 제플린 기준: 헤더 바로 아래에서 비주얼 시작 */
    padding: 0;
}

.ttdr-home__hero:before,
.ttdr-home__hero:after {
    display: none;
}

.ttdr-home__hero-inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--ttdr-z-header-max);
    margin: 0 auto;
    padding: 0 var(--ttdr-z-header-pr) 0 var(--ttdr-z-header-pl);
}

.ttdr-home__hero-copy {
    display: none;
}

.ttdr-home__hero-top {
    display: block;
    width: 100%;
    max-width: 100%;
}

.ttdr-home__hero-left {
    min-width: 0;
}

/* PC: 히어로와 무관하게 뷰포트에 고정(스크롤 따라다님). 모바일은 미디어쿼리에서 숨김 */
.ttdr-home__float-quick {
    display: none;
}

@media (min-width: 769px) {
    .ttdr-home__float-quick {
        display: grid;
        gap: var(--ttdr-z-space-float-quick-gap);
        justify-items: center;
        position: fixed;
        z-index: 200;
        top: 50%;
        right: max(12px, calc((100vw - min(100vw, var(--ttdr-z-header-max))) / 2 + var(--ttdr-z-float-quick-inset)));
        transform: translateY(-50%);
        padding-bottom: env(safe-area-inset-bottom, 0);
        pointer-events: none;
    }

    .ttdr-home__float-quick > .ttdr-home__tool-link {
        pointer-events: auto;
    }
}

/* Web 1280 정확도: 사이드 퀵 right 값을 정수 px 기준으로 안정화 */
@media (min-width: 1280px) {
    .ttdr-home__float-quick {
        right: calc((100vw - var(--ttdr-z-header-max)) / 2 + var(--ttdr-z-float-quick-inset));
    }
}

@media print {
    .ttdr-home__float-quick {
        display: none !important;
    }
}

/* 제플린 사이드 퀵: 52×52, radius 16, 라벨 9px 볼드 — 기본 흰 셀·회색 테두리, 호버·포커스만 레드
 * 연합회 아이콘: screen 69dda1fa541863118e4d1ab9, layer icon_연합회 → theme/basic/img/hero-side-icon-federation.svg
 */
.ttdr-home__tool-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ttdr-z-c-text);
    text-align: center;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ttdr-home__tool-link__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border: 2px solid var(--ttdr-z-c-float-cell-border);
    border-radius: 16px;
    background: var(--ttdr-z-c-float-cell-bg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ttdr-home__tool-link__icons {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.ttdr-home__tool-link__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
}

.ttdr-home__tool-link__icon--off {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .ttdr-home__tool-link__icon {
        transition: none;
    }
}

.ttdr-home__tool-link__label {
    display: block;
    margin-top: 4px;
    max-width: 52px;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
    letter-spacing: 0;
    word-break: keep-all;
    color: var(--ttdr-z-c-text);
}

.ttdr-home__tool-link:hover,
.ttdr-home__tool-link:focus-visible {
    color: #111;
}

.ttdr-home__tool-link:hover .ttdr-home__tool-link__cell,
.ttdr-home__tool-link:focus-visible .ttdr-home__tool-link__cell {
    border-color: var(--ttdr-cart-count);
    background: #ffffff;
}

.ttdr-home__tool-link:focus-visible {
    outline: 2px solid var(--ttdr-cart-count);
    outline-offset: 2px;
    border-radius: 4px;
}

.ttdr-home__hero-visual {
    position: relative;
    overflow: hidden;
    max-width: min(var(--ttdr-z-content-max), 100%);
    margin: 0 auto;
    border-radius: 0;
    background: var(--ttdr-z-c-hero-visual);
    box-shadow: none;
    /* Zeplin(Web 1280): 메인 비주얼 1040×320 */
    height: 320px;
}

.ttdr-home__hero-visual picture {
    display: block;
}

.ttdr-home__hero-visual img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

/* 롤링 2장 이상일 때만 표시(마크업 존재). 제플린: PC 69faeae1ca6b3fab604b7561 · MO 69faeae293a531c9a38a641a */
.ttdr-home__hero-visual--multi .ttdr-home__hero-pager {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    min-height: 36px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #303030;
    font-size: 14px;
    line-height: 1;
}

.ttdr-home__hero-visual--multi .ttdr-home__hero-pager strong {
    min-width: 2.25em;
    font-weight: 500;
    text-align: center;
}

.ttdr-home__hero-visual--multi .ttdr-home__hero-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #303030;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ttdr-home__hero-visual--multi .ttdr-home__hero-pager-btn:hover {
    opacity: 0.82;
}

.ttdr-home__hero-slider {
    display: flex;
    width: 100%;
    will-change: transform;
    transition: transform 0.4s ease;
}

.ttdr-home__hero-slide {
    flex: 0 0 100%;
    min-width: 0;
}

.ttdr-home__hero-slide picture {
    display: block;
}

.ttdr-home__hero-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.ttdr-home__hero-card-title {
    margin-bottom: var(--ttdr-z-space-8);
    color: var(--ttdr-z-c-text-muted);
    font-size: var(--ttdr-z-t-hero-desc-size);
    font-weight: 400;
    line-height: var(--ttdr-z-t-hero-desc-lh);
    text-align: center;
}

.ttdr-home__hero-heading {
    padding: var(--ttdr-z-space-hero-heading-pt) 0 0;
    text-align: center;
}

.ttdr-home__hero-heading strong {
    display: block;
    color: var(--ttdr-z-c-text);
    font-size: var(--ttdr-z-t-hero-heading-size);
    line-height: var(--ttdr-z-t-hero-heading-lh);
    font-weight: var(--ttdr-z-t-hero-heading-weight);
    letter-spacing: var(--ttdr-z-t-hero-heading-track);
    font-variation-settings: "wght" 800;
}

.ttdr-home__hero-heading p {
    margin-top: var(--ttdr-z-space-hero-p-mt);
    color: var(--ttdr-z-c-text-muted);
    font-size: var(--ttdr-z-t-hero-desc-size);
    line-height: var(--ttdr-z-t-hero-desc-lh);
    font-weight: 400;
    text-align: center;
}

/* Zeplin Web: 메인 비주얼 아래 별도 오버레이 타이틀 블록 없음 — 모바일 전용 마크업은 max-width 768에서만 표시 */
@media (min-width: 769px) {
    .ttdr-home__hero-heading {
        display: none !important;
    }
}

/* 배너(히어로 오버레이) 서브카피는 인트로 섹션으로 이동 — 배너/본문 중복 방지 */
.ttdr-home__hero-card-desc {
    display: none !important;
}

.ttdr-home__hero-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ttdr-z-space-hero-quick-gap);
    max-width: var(--ttdr-z-space-hero-quick-max);
    margin: var(--ttdr-z-space-hero-quick-mt) auto 0;
}

.ttdr-home__quick-link {
    padding: 0;
    text-align: center;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.ttdr-home__quick-link strong {
    display: block;
    margin-bottom: var(--ttdr-z-space-8);
    font-size: 14px;
    font-weight: 400;
}

.ttdr-home__quick-link span {
    display: none;
}

.ttdr-home__cards {
    display: grid;
    grid-template-columns: repeat(3, var(--ttdr-z-grid-col-intro));
    justify-content: center;
    gap: var(--ttdr-z-space-grid-gap-pc);
    max-width: var(--ttdr-z-grid-row-intro);
    margin-left: auto;
    margin-right: auto;
}

.ttdr-home__intro-card {
    position: relative; /* 뱃지 position: absolute 기준 */
    display: block;
    overflow: hidden;
    min-height: var(--ttdr-z-card-min-h-pc);
    padding: 0;
    border-radius: var(--ttdr-z-card-radius-pc);
    color: #2b2e34;
    box-shadow: none;
    border: 0;
    background: var(--ttdr-z-c-card-surface);
}

.ttdr-home__intro-card:before {
    display: none;
}

.ttdr-home__intro-card-thumb {
    position: relative;
    height: var(--ttdr-z-card-thumb-h-pc);
    border-radius: 0;
    overflow: hidden;
    background: rgba(214, 214, 214, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ttdr-home__intro-card-thumb picture {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.ttdr-home__intro-card-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ttdr-home__intro-card--sand,
.ttdr-home__intro-card--rose,
.ttdr-home__intro-card--mint {
    background: var(--ttdr-z-c-card-surface);
}

.ttdr-home__intro-card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: var(--ttdr-z-card-body-min-pc);
    text-align: center;
    padding: var(--ttdr-z-card-content-pt) var(--ttdr-z-card-content-px) var(--ttdr-z-card-content-pb);
}

.ttdr-home__intro-card-badge {
    position: absolute;
    left: 28px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    background: var(--ttdr-z-c-intro-badge-bg);
    color: var(--ttdr-z-c-intro-badge-text);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    backdrop-filter: blur(30px);
}

.ttdr-home__intro-card-title {
    margin-bottom: var(--ttdr-z-card-title-mb);
    color: #000000;
    font-size: var(--ttdr-z-t-intro-card-title-size);
    line-height: var(--ttdr-z-t-intro-card-title-lh);
    font-weight: 700;
    letter-spacing: 0;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ttdr-home__intro-card-desc {
    margin: 0 auto;
    color: var(--ttdr-z-c-text-subtle);
    font-size: var(--ttdr-z-t-intro-card-desc-size);
    line-height: var(--ttdr-z-t-intro-card-desc-lh);
    font-weight: 400;
    letter-spacing: 0;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PC: Zeplin (Web 1280) 문구 — MO는 max-width 768에서 별도 desc_mo */
.ttdr-home__intro-card-desc-label--mo {
    display: none;
}

/* 자세히 보기: Component 55 — 기본 회색 테두리, 호버는 중립 회색 */
.ttdr-home__intro-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 118px;
    height: 32px;
    margin-top: var(--ttdr-z-card-link-mt);
    padding: 0;
    border: 1px solid var(--ttdr-z-c-outline-btn-border);
    border-radius: 16px;
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px; /* 제플린 Component 55: SemiBold 14px lh16 */
    letter-spacing: 0;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ttdr-home__intro-card-link-label--mo {
    display: none;
}

.ttdr-home__intro-card-link--accent,
.ttdr-home__intro-card-link--muted {
    border-color: var(--ttdr-z-c-outline-btn-border);
    color: #333;
    background: #fff;
}

.ttdr-home__intro-card-link:hover,
.ttdr-home__intro-card-link:focus-visible {
    border-color: var(--ttdr-z-c-soft-action-border-hover);
    color: #333;
    background: var(--ttdr-z-c-soft-action-bg-hover);
}

.ttdr-home ul.ttdr-home__products {
    display: grid !important;
    float: none !important;
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ttdr-home .sct_li.ttdr-home__product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}

/* 제플린 Web 1280: 썸네일 244×244, 가로 간격 20px, 행 너비 1036px (=244×4+20×3) */
.ttdr-home__products {
    display: grid;
    grid-template-columns: repeat(4, var(--ttdr-z-grid-col-download));
    gap: var(--ttdr-z-space-grid-gap-pc);
    width: 100%;
    max-width: var(--ttdr-z-grid-row-download);
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

#ttdr-delivery .ttdr-home__products {
    grid-template-columns: repeat(2, var(--ttdr-z-grid-col-delivery));
    gap: var(--ttdr-z-space-grid-gap-pc);
    max-width: var(--ttdr-z-grid-row-delivery);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 배송상품 품절: 썸네일 그레이스케일 */
#ttdr-delivery .ttdr-home__product--soldout .ttdr-home__product-thumb img {
    filter: grayscale(1);
}

.ttdr-home__product {
    position: relative;
    overflow: hidden;
    min-width: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ttdr-home__product-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--ttdr-z-c-product-thumb-border);
    border-radius: var(--ttdr-z-product-thumb-radius);
}

.ttdr-home__product-thumb > a {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
}

/* get_it_image 인라인 width·height와 무관하게 1:1 박스 전체 채움 (리스트 앨범형과 동일 효과) */
.ttdr-home__product-thumb a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
}

/* 원본 파일에 큰 여백이 포함된 상품(it_id는 home-main.php product_thumb_zoom_by_it_id) */
.ttdr-home__product-thumb--source-zoom a img {
    transform: scale(var(--ttdr-thumb-zoom, 1));
    transform-origin: center center;
}

.ttdr-home__product-badges {
    position: absolute;
    top: var(--ttdr-z-product-badge-inset);
    left: var(--ttdr-z-product-badge-inset);
    display: flex;
    gap: var(--ttdr-z-product-badge-gap);
    z-index: 2;
}

.ttdr-home__badge {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(35, 35, 35, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.ttdr-home__badge--soldout {
    background: rgba(196, 44, 69, 0.92);
}

.ttdr-home__product-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--ttdr-z-product-body-pt) 0 0;
    box-sizing: border-box;
}

.ttdr-home__product-category {
    display: none;
}

.ttdr-home__product-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    min-height: 0;
    margin-bottom: var(--ttdr-z-product-name-mb);
    font-size: var(--ttdr-z-t-product-name-size);
    line-height: var(--ttdr-z-t-product-name-lh);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #333;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ttdr-home__product-name:hover {
    color: var(--ttdr-brand);
}

.ttdr-home__product-desc {
    display: none;
}

/* Zeplin: 판매가(y=46) 위 → 원가 취소선(y=69) 아래, gap=4px 세로 스택 */
.ttdr-home__product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 0;
}

.ttdr-home__product-price strong {
    color: #333;
    font-size: var(--ttdr-z-t-price-size);
    line-height: var(--ttdr-z-t-price-lh);
    font-weight: 700;
}

.ttdr-home__product-price .price-del {
    color: #a1a1a1;
    font-size: var(--ttdr-z-t-price-del-size);
    line-height: var(--ttdr-z-t-price-del-lh);
    font-weight: 300;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: #a4a4a4;
    text-decoration-skip-ink: none;
}

.ttdr-home__product-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ttdr-z-product-actions-gap);
    margin-bottom: var(--ttdr-z-product-actions-mb);
}

#ttdr-delivery .ttdr-home__product-actions {
    gap: var(--ttdr-z-product-actions-gap);
}

.ttdr-home__product-actions > :only-child {
    grid-column: 1 / -1;
}

.ttdr-home__product-actions.sct_btn {
    margin: 0 0 var(--ttdr-z-product-actions-mb);
}

.ttdr-home__product-action,
.ttdr-home__product-action button,
.ttdr-home__product-action a {
    width: 100%;
}

.ttdr-home__product-action button,
.ttdr-home__product-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 16px;
    border: 1px solid var(--ttdr-z-c-outline-btn-border);
    background: #fff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* 제플린: '바로 구매'는 기본 회색 아웃라인, hover/focus에서만 레드 계열로 강조 */
.ttdr-home__product-action--primary button,
.ttdr-home__product-action--primary a {
    border-color: var(--ttdr-z-c-outline-btn-border);
    color: #333;
}

.ttdr-home__product-action--primary button:hover,
.ttdr-home__product-action--primary a:hover,
.ttdr-home__product-action--primary button:focus-visible,
.ttdr-home__product-action--primary a:focus-visible {
    border-color: #ff5151;
    color: #ff5151;
    background: #fff;
}

.ttdr-home__product-action button:focus-visible,
.ttdr-home__product-action a:focus-visible {
    outline: 2px solid var(--ttdr-brand);
    outline-offset: 2px;
}

/* 장바구니·바로 구매: 기본 회색 테두리, 호버는 중립 회색 */
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) a:hover,
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) button:hover,
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) a:focus-visible,
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) button:focus-visible {
    background: #fff;
    border-color: var(--ttdr-z-c-soft-action-border-hover);
    color: #111;
}

/* 제플린: '장바구니 담기' hover/focus는 '바로 구매'와 동일한 레드 아웃라인(배경은 유지) */
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) .ttdr-home__btn-cart:hover,
.ttdr-home__product-action:not(.ttdr-home__product-action--disabled):not(.ttdr-home__product-action--primary) .ttdr-home__btn-cart:focus-visible {
    border-color: var(--ttdr-cart-count);
    color: var(--ttdr-cart-count);
    background: #fff;
}

/* 제플린: 일시 품절 뱃지(레드 pill) */
.ttdr-home__badge--soldout {
    background: #ff5151;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
}

/* 제플린 버튼 폭/정렬: 다운로드(244) = 118×2 + 8, 배송(332) = 162×2 + 8 */
.ttdr-home__product-actions {
    width: 244px;
    justify-content: flex-start;
    grid-template-columns: repeat(2, 118px);
}

#ttdr-delivery .ttdr-home__product-actions {
    width: 332px;
    justify-content: flex-start;
    grid-template-columns: repeat(2, 162px);
}

/* 배송상품 2열 카드(332)에서 액션/텍스트가 중앙으로 보이도록 카드 폭 기준 맞춤 */
#ttdr-delivery .ttdr-home__product-body {
    align-items: flex-start;
}

.ttdr-home__product-action--disabled button {
    border-color: #dfdfdf; /* Zeplin Component 57 */
    background: #f9f9f9; /* Zeplin fill */
    color: #b9b9b9; /* Zeplin text */
    cursor: default;
}

/* 다운로드 분류 상품 — 장바구니/바로구매 아래 전폭 다운로드 행 (Zeplin 데모 버튼 톤과 동일)
 * 메인(#ttdr-download)과 상품 검색·앨범 목록(.tta-zeplin-page) 동일 규칙 공유 */
#ttdr-download .ttdr-home__product-action--download,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download {
    grid-column: 1 / -1;
    width: 100%;
}

#ttdr-download .ttdr-home__product-action--download .tta-album__btn-download--content,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download .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-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#ttdr-download .ttdr-home__product-action--download a.tta-album__btn-download--content:hover,
#ttdr-download .ttdr-home__product-action--download a.tta-album__btn-download--content:focus-visible,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download a.tta-album__btn-download--content:hover,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download a.tta-album__btn-download--content:focus-visible {
    background: #ffe4e4;
    border-color: #ff5151;
    color: #ff5151;
    outline: none;
}

#ttdr-download .ttdr-home__product-action--download button.tta-album__btn-download--content:disabled,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download button.tta-album__btn-download--content:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    border-color: #e8e8e8;
    background: #f5f5f5;
    color: #999;
}

#ttdr-download .ttdr-home__product-action--download .tta-album__btn-download-icon svg,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download .tta-album__btn-download-icon svg {
    display: block;
    width: 20px;
    height: 21px;
}

#ttdr-download .ttdr-home__product-action--download .tta-album__btn-download-icon-img,
.tta-zeplin-page .tta-album__card .ttdr-home__product-action--download .tta-album__btn-download-icon-img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ttdr-home__product .cart-layer {
    position: relative;
    z-index: 3;
}

.ttdr-home__empty {
    padding: var(--ttdr-z-space-40) var(--ttdr-z-space-24);
    border-radius: 12px;
    background: #fff;
    color: #667085;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.ttdr-home__empty strong {
    display: block;
    margin-bottom: var(--ttdr-z-space-8);
    color: #1f2933;
    font-size: 18px;
}

.ttdr-home__about-band {
    padding: 0;
    background: #c9e5b6;
}

.ttdr-home__about {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px; /* 제플린: 텍스트 블록(332) ↔ 이미지(336) 간 18px */
}

.ttdr-home__about-brand {
    box-sizing: border-box;
    padding: var(--ttdr-z-about-pt) 0 var(--ttdr-z-about-pb);
    text-align: center;
    width: 332px; /* 제플린 desc 폭 */
    flex: 0 0 auto;
}

.ttdr-home__about-brand h3 {
    margin: 0 0 8px;
    font-size: var(--ttdr-z-t-about-title-size);
    line-height: var(--ttdr-z-t-about-title-lh);
    font-weight: 700;
    letter-spacing: 0;
    color: #000;
}

.ttdr-home__about-desc {
    margin: 0;
    max-width: 332px;
    color: #5c754f;
    font-size: var(--ttdr-z-t-about-desc-size);
    line-height: var(--ttdr-z-t-about-desc-lh);
    font-weight: 400;
}

.ttdr-home__about-desc-label--mo {
    display: none;
}

.ttdr-home__about-actions {
    display: flex;
    justify-content: center;
    gap: 4px; /* 제플린: 버튼 사이 4px */
    margin-top: 12px; /* desc → 버튼 12px */
}

.ttdr-home__about-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 110px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid #acc49c;
    border-radius: 16px;
    background: #fff;
    color: #333;
    font-size: 12.5px;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ttdr-home__about-media {
    width: 336px;
    height: 140px;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 25px 0 17px; /* 제플린: 이미지 좌 17px 인셋 */
}

.ttdr-home__about-media img {
    display: block;
    width: 294px;
    height: 140px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .ttdr-home__about {
        flex-direction: column;
        align-items: center;
        gap: var(--ttdr-z-space-16);
    }

    .ttdr-home__about-brand {
        width: 100%;
        max-width: 420px;
    }

    .ttdr-home__about-desc {
        max-width: 420px;
    }

    .ttdr-home__about-media {
        width: 100%;
        max-width: 420px;
        height: auto;
        padding: 0;
    }

    .ttdr-home__about-media img {
        width: 100%;
        height: auto;
        aspect-ratio: 336 / 140;
        object-fit: cover;
    }
}

/* 제플린(Web 1280) 좌표 고정: 텍스트 시작 x=298, 이미지 시작 x=648 */
@media (min-width: 1280px) {
    .ttdr-home__about-band {
        height: 140px; /* 제플린: Rectangle 137 높이 */
    }

    .ttdr-home__about {
        margin-left: 178px; /* 298 - (아트보드 좌패딩 120) */
        height: 140px;
        align-items: flex-start;
    }

    /* 제플린: 타이틀 y=1994 (섹션 y=1962 → 32px) */
    .ttdr-home__about-brand {
        padding: 32px 0 0;
    }

    /*
     * Zeplin: desc rect height가 16px로 잡혀 있어(실렌더링 포함),
     * PC에서는 line-height를 16으로 맞춰 밴드(140) 내 수직 리듬을 고정한다.
     */
    .ttdr-home__about-desc {
        line-height: 16px;
    }
}

.ttdr-home__about-action:hover,
.ttdr-home__about-action:focus-visible {
    background: rgba(255, 255, 255, 0.92);
    border-color: #8fb87e;
}

.ttdr-home__about-action:focus-visible {
    outline: 2px solid var(--ttdr-brand);
    outline-offset: 2px;
}

.ttdr-home__footer {
    /* 제플린: 배송상품 섹션과 footer 사이 간격 */
    margin-top: 80px;
    padding: 0;
    background: #fbf5e2;
    color: #000;
    /* Zeplin: top line is full width */
    border-top: 4px solid #eee2bd;
}

.ttdr-home__footer-inner {
    width: 100%;
    max-width: var(--ttdr-z-header-max);
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: calc(var(--ttdr-z-header-pl) + env(safe-area-inset-left));
    padding-right: calc(var(--ttdr-z-header-pr) + env(safe-area-inset-right));
}

.ttdr-home__footer-top {
    display: grid;
    grid-template-columns: 148px 1fr; /* logo_ver 148 */
    column-gap: 30px; /* meta start x=298 */
    align-items: start;
    padding-top: 36px;
    padding-bottom: 0;
}

.ttdr-home__footer-brand {
    display: flex;
    align-items: center;
}

.ttdr-home__footer-logo {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
}

.ttdr-home__footer-logo img {
    display: block;
    width: 148px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ttdr-home__footer-meta {
    padding-top: 0;
}

/* Zeplin: 첫 줄은 y=40 (footer padding-top 36 + 4) */
.ttdr-home__footer-row--first {
    margin-top: 4px;
}

.ttdr-home__footer-company {
    display: inline-flex;
    align-items: baseline;
    color: #000;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.ttdr-home__footer-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.ttdr-home__footer-row:last-child {
    margin-bottom: 0;
}

.ttdr-home__footer-pair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ttdr-home__footer-pair strong {
    color: #000;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
}

.ttdr-home__footer-pair span {
    color: #808080;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
}

.ttdr-home__footer-block {
    /* Zeplin PC: meta + copyright를 세로로 배치, 210px 내에서 spacing */
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding-bottom: 30px;
}

.ttdr-home__footer-bottom {
    margin-top: auto; /* 하단 고정 */
    padding: 0;
    color: #808080;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ttdr-home__footer-bottom strong {
    font-weight: 600;
    color: #333;
}

.ttdr-home__footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    color: #808080;
}

.ttdr-home__footer-legal a {
    color: #666;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.ttdr-home__footer-legal a:hover,
.ttdr-home__footer-legal a:focus {
    color: #333;
    text-decoration: underline;
}

.ttdr-home__footer-legal-sep {
    color: #c8c8c8;
    user-select: none;
    pointer-events: none;
}

.ttdr-home__footer-copy {
    font-weight: 500;
}

@media (max-width: 1024px) {
    body.ttdr-home-body {
        --ttdr-z-float-quick-inset: 36px;
        --ttdr-z-space-section-y: var(--ttdr-z-rhythm);
        --ttdr-z-space-section-compact-pt: var(--ttdr-z-rhythm);
        --ttdr-z-space-head-mb: 32px;
        --ttdr-z-space-head-to-grid: 32px;
        --ttdr-z-space-intro-head-mb: 16px;
    }

    .ttdr-home-header {
        --ttdr-z-util-h: 36px;
        --ttdr-z-gnb-min-h: 80px;
        --ttdr-z-gnb-pad-y: 0;
        --ttdr-z-gnb-logo-mr: 16px;
        --ttdr-z-gnb-search-ml: 16px;
        --ttdr-z-logo-mark: 48px;
        --ttdr-z-logo-title: 16px;
        --ttdr-z-logo-domain: 11px;
        --ttdr-z-nav: 14px;
        --ttdr-z-nav-lh: 18px;
        --ttdr-z-nav-letter: -0.42px;
        --ttdr-z-nav-gap: 20px;
        --ttdr-z-nav-row-gap: 6px;
        --ttdr-z-gnb-col-gap: 0;
        --ttdr-z-search-w: 156px;
        --ttdr-z-search-h: 38px;
        --ttdr-z-search-in: 14px;
        --ttdr-z-search-radius: 19px;
        --ttdr-z-search-icon: 15px;
        --ttdr-z-search-btn: 24px;
        --ttdr-z-search-pl: 18px;
        --ttdr-z-search-pr: 10px;
    }

    .ttdr-home-header__main .ttdr-home-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: var(--ttdr-z-gnb-col-gap);
    }

    .ttdr-home-header__logo-mark--text {
        font-size: 17px;
    }

    .ttdr-home-header__logo--wordmark .ttdr-home-header__logo-mark img {
        max-height: 52px;
        max-width: 120px;
    }

    .ttdr-home__hero-inner {
        width: 100%;
        max-width: var(--ttdr-z-header-max);
        padding-left: var(--ttdr-z-header-pl);
        padding-right: var(--ttdr-z-header-pr);
    }

    .ttdr-home__section {
        padding: var(--ttdr-z-space-section-y) 0;
    }

    .ttdr-home__section--compact {
        padding-top: var(--ttdr-z-space-section-compact-pt);
        padding-bottom: 0;
    }

    .ttdr-home__intro-card {
        min-height: 0;
        border-radius: 18px;
    }

    /* 인트로 카드만 세로 스택 — 2열 그리드 적용 시 카드 레이아웃 깨짐 방지 */
    .ttdr-home__cards {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .ttdr-home__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    #ttdr-delivery .ttdr-home__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .ttdr-home__footer-top {
        grid-template-columns: 1fr;
        gap: var(--ttdr-z-space-24);
    }
}

@media (max-width: 768px) {
    body.ttdr-home-body {
        overflow-x: hidden;
        --ttdr-z-space-section-y: 40px;
        /* 히어로 하단(~254) → 인트로 제목(y314) = 60px */
        --ttdr-z-space-mo-intro-pt: 60px;
        --ttdr-z-space-mo-intro-pb: 20px;
        --ttdr-z-space-mo-download-y: var(--ttdr-z-rhythm);   /* 다운로드 pt=40px 유지 */
        /* 제플린 MO: title end y=902 → thumb y=918 = 16px gap (기존 rhythm-half=20px 오류) */
        --ttdr-z-space-mo-download-head-mb: 16px;
        /* 제플린 MO: 상품 액션 mb — buttons end→name start=10px (기존 16px 오류) */
        --ttdr-z-product-actions-mb: 10px;
        --ttdr-z-space-mo-section-head-mb: var(--ttdr-z-rhythm);
        /* 인트로 카드 세로 간격: Zeplin 150 높이 카드 사이 10px */
        --ttdr-z-space-mo-cards-gap: 10px;
        --ttdr-z-space-mo-content-cards-gap: 10px;
        --ttdr-z-space-mo-grid-gap: 10px;
        --ttdr-z-space-mo-hero-heading-pt: 16px;
        --ttdr-z-space-mo-hero-heading-px: 16px;
        --ttdr-z-space-mo-hero-heading-pb: 44px;
        --ttdr-z-space-mo-hero-cardtitle-mb: 6px;
        --ttdr-z-space-mo-about-pt: var(--ttdr-z-rhythm);
        --ttdr-z-space-mo-about-px: var(--ttdr-z-mo-gutter);
        --ttdr-z-space-mo-about-pb: var(--ttdr-z-rhythm);
        --ttdr-z-mo-intro-card-content-p: 8px 10px 10px 13px;
        --ttdr-z-footer-px-pb: var(--ttdr-z-rhythm);
        --ttdr-z-footer-top-pt-mo: var(--ttdr-z-rhythm);
        --ttdr-z-footer-top-gap-mo: var(--ttdr-z-rhythm);
        --ttdr-z-space-intro-head-mb: 16px;
    }

    body.ttdr-home-body #container {
        padding-left: 0;
        padding-right: 0;
    }

    .ttdr-home-header {
        display: none;
    }

    .ttdr-home-mobile-header {
        position: sticky;
        top: 0;
        z-index: 300;
        display: block;
        background: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", sans-serif;
    }

    .ttdr-home-mobile-header .to_content a {
        position: absolute;
        left: -9999px;
        z-index: 400;
        padding: 8px 12px;
        background: var(--ttdr-notice-bg);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 0 0 6px 0;
    }

    .ttdr-home-mobile-header .to_content a:focus {
        left: 12px;
        top: 6px;
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

    /* 제플린 Component 47 (mo): 공지 48px, 뱃지 45×22·new #f2eeeb, 본문 14/20·-0.28px, 닫기 24×24 */
    .ttdr-home-mobile-header__notice {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        height: 48px;
        padding: 0 16px;
        background: var(--ttdr-notice-bg);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        box-sizing: border-box;
    }

    .ttdr-home-mobile-header__notice-link {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .ttdr-home-mobile-header__notice-link:hover,
    .ttdr-home-mobile-header__notice-link:focus-visible {
        color: inherit;
        text-decoration: none;
        opacity: 0.94;
    }

    .ttdr-home-mobile-header__notice-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-sizing: border-box;
        min-width: 45px;
        height: 22px;
        padding: 0 10px;
        border-radius: 11px;
        background: var(--ttdr-notice-badge-bg);
        color: #f2eeeb;
        font-size: 14px;
        line-height: 16px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: lowercase;
    }

    .ttdr-home-mobile-header__notice-text {
        min-width: 0;
        flex: 1;
        overflow: hidden;
        color: #fff;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        letter-spacing: -0.28px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ttdr-home-mobile-header__notice-close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .ttdr-home-mobile-header__notice-close:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    /* 제플린 Component 4 (mo): 흰 바 56px, 좌우 16, 아이콘 24×24, 간격 12, 로고 138×43 가운데 */
    .ttdr-home-mobile-header__bar {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
        height: 56px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .ttdr-home-mobile-header__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #222;
        font-size: 17px;
        cursor: pointer;
        transition: background 0.15s ease;
        text-decoration: none;
        box-sizing: border-box;
    }

    /* Zeplin MO: 아이콘은 24×24 벡터(폰트아이콘 baseline 영향 제거) */
    .ttdr-home-mobile-header__svg {
        display: block;
        width: 24px;
        height: 24px;
        color: #333;
    }

    .ttdr-home-mobile-header__icon:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    .ttdr-home-mobile-header__icon:focus-visible {
        outline: 2px solid var(--ttdr-notice-bg);
        outline-offset: 0;
    }

    .ttdr-home-mobile-header__icon--cart {
        position: relative;
    }

    .ttdr-home-mobile-header__cart-badge {
        position: absolute;
        top: 0;
        right: -4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #333333;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        pointer-events: none;
        transition: background 0.15s ease;
    }

    .ttdr-home-mobile-header__icon--cart:hover .ttdr-home-mobile-header__cart-badge,
    .ttdr-home-mobile-header__icon--cart:focus-visible .ttdr-home-mobile-header__cart-badge {
        background: var(--ttdr-cart-count);
    }

    .ttdr-home-mobile-header__logo {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        line-height: 0;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        text-decoration: none;
    }

    .ttdr-home-mobile-header__logo img {
        display: block;
        width: auto;
        max-width: min(56vw, 220px);
        max-height: 48px;
        height: auto;
        object-fit: contain;
    }

    .ttdr-home-mobile-header__search {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background: #fff;
        border-top: 1px solid #f0f0f0;
    }

    .ttdr-home-mobile-header__search[hidden] {
        display: none;
    }

    .ttdr-home-mobile-header__search form {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 8px;
    }

    .ttdr-home-mobile-header__search input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        height: 38px;
        padding: 0 14px;
        border: 1px solid #ddd;
        border-radius: 19px;
        font-size: 14px;
        color: #222;
        background: #fafafa;
        outline: none;
        box-sizing: border-box;
        transition: border-color 0.15s ease;
    }

    .ttdr-home-mobile-header__search input[type="text"]:focus {
        border-color: #333;
        background: #fff;
    }

    .ttdr-home-mobile-header__search button[type="submit"] {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: #333;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .ttdr-home-mobile-header__search button[type="submit"]:hover {
        background: #555;
    }

    /* ================================================================
       MO 슬라이드 메뉴 드로어 (제플린 "(mo) slide menu" 기준)
       전체화면 fixed 오버레이, 공지 배너(48px) + 헤더(56px) + 스크롤 본문
    ================================================================ */
    .ttdr-home-mobile-drawer {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background: #fff;
        overflow: hidden;
        font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    }

    .ttdr-home-mobile-drawer[hidden] {
        display: none;
    }

    body.ttdr-drawer-open {
        overflow: hidden;
    }

    /* 드로어 내 공지 배너 (제플린: 48px, #206AAB) */
    .ttdr-home-mobile-drawer__notice {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 8px;
        height: 48px;
        padding: 0 16px;
        background: #206aab;
        box-sizing: border-box;
    }

    .ttdr-home-mobile-drawer__notice-link {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        color: inherit;
        text-decoration: none;
    }

    .ttdr-home-mobile-drawer__notice-link:hover,
    .ttdr-home-mobile-drawer__notice-link:focus-visible {
        color: inherit;
        text-decoration: none;
        opacity: 0.94;
    }

    .ttdr-home-mobile-drawer__notice-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 45px;
        height: 22px;
        border-radius: 11px;
        background: #62aeef;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        text-transform: lowercase;
    }

    .ttdr-home-mobile-drawer__notice-text {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: -0.28px;
    }

    .ttdr-home-mobile-drawer__notice-close {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        padding: 0;
        transition: background 0.15s ease;
    }

    .ttdr-home-mobile-drawer__notice-close:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    /* 드로어 헤더 (제플린: 56px 흰 바, shadow 0 3px 6px rgba(0,0,0,0.12)) */
    .ttdr-home-mobile-drawer__head {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 8px;
        height: 56px;
        padding: 0 16px;
        background: #fff;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    /* 로그인/회원가입 버튼 (제플린: 62×28, border 2px #e1e1e1, radius 4, SemiBold 12/14 #303030) */
    .ttdr-home-mobile-drawer__auth-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 62px;
        height: 28px;
        border: 2px solid #e1e1e1;
        border-radius: 4px;
        background: #fff;
        color: #303030;
        font-size: 12px;
        font-weight: 600;
        font-variation-settings: "wght" 600;
        line-height: 14px;
        letter-spacing: -0.24px;
        text-decoration: none;
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
        transition: border-color 0.15s ease, color 0.15s ease;
    }

    .ttdr-home-mobile-drawer__auth-btn:hover {
        border-color: #206aab;
        color: #206aab;
    }

    /* 닫기(×) 버튼 - 우측 끝 정렬 */
    .ttdr-home-mobile-drawer__close {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 4px;
        background: transparent;
        color: #555;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        transition: background 0.15s ease;
    }

    .ttdr-home-mobile-drawer__close:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    /* 스크롤 본문 영역 */
    .ttdr-home-mobile-drawer__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 26px;
        padding-bottom: 32px;
    }

    /* ── 1depth 내비 목록 ── */
    .ttdr-home-mobile-drawer__nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ttdr-home-mobile-drawer__nav-item + .ttdr-home-mobile-drawer__nav-item {
        margin-top: 20px;
    }

    /* 2depth 확장 영역이 닫혔을 때 간격 유지 */
    .ttdr-home-mobile-drawer__nav-item--has-sub + .ttdr-home-mobile-drawer__nav-item {
        margin-top: 12px;
    }

    /* 1depth 공통 (링크 & 버튼) */
    .ttdr-home-mobile-drawer__nav-1depth {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0 16px;
        min-height: 21px;
        font-family: inherit;
        font-size: 18px;
        font-weight: 800;
        font-variation-settings: "wght" 800;
        line-height: 21px;
        letter-spacing: -0.36px;
        color: #333;
        text-decoration: none;
        background: none;
        border: 0;
        cursor: pointer;
        text-align: left;
        box-sizing: border-box;
    }

    .ttdr-home-mobile-drawer__nav-1depth span {
        min-width: 0;
    }

    /* 체브론 아이콘 */
    .ttdr-home-mobile-drawer__chevron {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        transition: transform 0.22s ease;
    }

    .ttdr-home-mobile-drawer__nav-toggle.is-open .ttdr-home-mobile-drawer__chevron {
        transform: rotate(90deg);
    }

    /* 2depth 확장 영역 (제플린: bg #f6f6f6, 10px 상하 패딩, x=40 들여쓰기) */
    .ttdr-home-mobile-drawer__sub {
        margin-top: 10px;
        padding: 10px 16px 10px 40px;
        background: #f6f6f6;
        box-sizing: border-box;
    }

    .ttdr-home-mobile-drawer__sub[hidden] {
        display: none;
    }

    /* 2depth 항목 (제플린: Regular 15.5px/14, -0.31px, #303030) */
    .ttdr-home-mobile-drawer__nav-2depth {
        display: block;
        font-size: 15.5px;
        font-weight: 400;
        font-variation-settings: "wght" 400;
        line-height: 14px;
        letter-spacing: -0.31px;
        color: #303030;
        text-decoration: none;
        padding: 2px 0;
    }

    .ttdr-home-mobile-drawer__nav-2depth + .ttdr-home-mobile-drawer__nav-2depth {
        margin-top: 12px;
    }

    .ttdr-home-mobile-drawer__nav-2depth:hover {
        color: #206aab;
    }

    /* 구분선 (제플린: 328px, x=16, 1px #e8e8e8) */
    .ttdr-home-mobile-drawer__divider {
        display: block;
        margin: 20px 16px;
        border: none;
        border-top: 1px solid #e8e8e8;
        box-sizing: border-box;
    }

    /* 유틸 링크 2열 (제플린: 左 x=16, 右 x=186, ExtraBold 18/21 -0.36 #333) */
    .ttdr-home-mobile-drawer__utils {
        display: flex;
        gap: 0;
        padding: 0 16px;
    }

    .ttdr-home-mobile-drawer__utils-col {
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 0 0 170px;
    }

    .ttdr-home-mobile-drawer__utils-col + .ttdr-home-mobile-drawer__utils-col {
        flex: 1;
    }

    .ttdr-home-mobile-drawer__utils-link {
        font-size: 18px;
        font-weight: 800;
        font-variation-settings: "wght" 800;
        line-height: 21px;
        letter-spacing: -0.36px;
        color: #333;
        text-decoration: none;
    }

    .ttdr-home-mobile-drawer__utils-link:hover {
        color: #206aab;
    }

    /* MO 아트보드 360 기준: 레이어 x=16 → 좌우 16px(기기 너비는 가득 채움) */
    .ttdr-home__inner {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: max(var(--ttdr-z-mo-gutter), env(safe-area-inset-left));
        padding-right: max(var(--ttdr-z-mo-gutter), env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .ttdr-home__footer-inner {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: max(var(--ttdr-z-mo-gutter), env(safe-area-inset-left));
        padding-right: max(var(--ttdr-z-mo-gutter), env(safe-area-inset-right));
        box-sizing: border-box;
    }

    /* ─── Footer (mo main) ───
     * Zeplin (mo): footer block height 380, top line 4px, logo y=28, copyright y=326
     * 배송 섹션 pb=60px로 푸터-상단 여백 확보 → margin-top 불필요 */
    .ttdr-home__footer {
        margin-top: 0;
    }

    .ttdr-home__footer-block {
        /*
         * 반응형: PC height:210px를 auto로 해제하고 min-height로 최소 높이만 확보.
         * 내용은 flex column으로 자연스럽게 배치한다.
         */
        display: flex;
        flex-direction: column;
        height: auto; /* PC height:210px 해제 */
        min-height: 380px;
        padding-bottom: 40px; /* Zeplin: 380 - (326 + 14) = 40 */
    }

    .ttdr-home__footer-top {
        display: block;
        padding-top: 28px;
        padding-bottom: 0;
    }

    .ttdr-home__footer-brand {
        margin: 0 0 20px;
    }

    .ttdr-home__footer-logo img {
        width: 148px;
        height: 64px;
        max-width: 100%; /* none 제거 → 컨테이너 초과 방지 */
        max-height: none;
        object-fit: contain;
    }

    /* Zeplin MO: footer-row는 flex column, pair들은 8px 간격 */
    .ttdr-home__footer-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Zeplin MO: 첫 번째 행은 company(전체폭) + 주소·대표 pair가 같은 줄에 표시 */
    .ttdr-home__footer-row--first {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 16px;
        margin-top: 0;
    }

    /* Zeplin MO: company는 단독 행 차지 — flex: 100%, 하단 간격 없음 */
    .ttdr-home__footer-company {
        display: block;
        flex: 0 0 100%;
        margin-bottom: 0;
    }

    .ttdr-home__footer-pair {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin-bottom: 0;
    }

    .ttdr-home__footer-bottom {
        position: static;
        margin-top: auto;
        padding: 0;
    }

    .ttdr-home__section {
        padding: var(--ttdr-z-space-section-y) 0;
    }

    .ttdr-home__section--compact {
        padding-top: var(--ttdr-z-space-section-compact-pt);
    }

    /* MO: 콘텐츠 소개 — 타이트한 세로 리듬, 배경은 흰색(상단/하단만 베이지) */
    #ttdr-content.ttdr-home__section--intro-cards {
        padding-top: var(--ttdr-z-space-mo-intro-pt);
        padding-bottom: var(--ttdr-z-space-mo-intro-pb);
        background: #fff;
    }

    .ttdr-home__intro-section-head {
        margin-bottom: var(--ttdr-z-space-intro-head-mb);
    }

    .ttdr-home__intro-section-head .ttdr-home__title {
        margin-bottom: 0;
        color: #333;
        font-size: var(--ttdr-z-t-mo-section-title-size);
        line-height: var(--ttdr-z-t-mo-section-title-lh);
        font-weight: 800;
        letter-spacing: var(--ttdr-z-t-mo-section-title-track);
        font-variation-settings: "wght" 800;
        text-align: center; /* Zeplin MO: title x=93 w=174 → 360px 기준 중앙 정렬 */
    }

    /* 제플린 MO: 다운로드 pt=40px(841+40=881✓), pb=60px(1959+60≈2020✓) */
    #ttdr-download.ttdr-home__section {
        padding-top: var(--ttdr-z-space-mo-download-y);   /* 40px */
        padding-bottom: 60px;
    }

    /* 제플린 MO: 배송 pt=60px(2290+60=2350✓), pb=60px(2718+60≈2780✓) */
    #ttdr-delivery.ttdr-home__section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #ttdr-download .ttdr-home__section-head,
    #ttdr-delivery .ttdr-home__section-head {
        margin-bottom: var(--ttdr-z-space-mo-download-head-mb);
    }

    #ttdr-download .ttdr-home__title,
    #ttdr-delivery .ttdr-home__title {
        margin-bottom: 0;
        font-size: var(--ttdr-z-t-mo-section-title-size);
        line-height: var(--ttdr-z-t-mo-section-title-lh);
        letter-spacing: var(--ttdr-z-t-mo-section-title-track);
        font-variation-settings: "wght" 800;
        text-align: center;
    }

    .ttdr-home__desc {
        font-size: 14px;
        line-height: 16px;
        max-width: 328px;
    }

    .ttdr-home__hero {
        padding: 0;
        background: #fff;
    }

    .ttdr-home__hero-inner {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .ttdr-home__hero-left {
        display: grid;
        grid-template-areas: 'stack';
    }

    .ttdr-home__float-quick {
        display: none;
    }

    .ttdr-home__hero-visual {
        grid-area: stack;
        z-index: 0;
        border-radius: 0;
        max-width: none;
        margin: 0;
        width: 100%;
        height: 150px; /* Zeplin (mo) hero image */
    }

    .ttdr-home__hero-visual img {
        height: 150px;
        aspect-ratio: 360 / 150;
        width: 100%;
        display: block;
    }

    /* Zeplin MO: 배너에 텍스트 오버레이 없음 (배너 이미지만 표시) */
    .ttdr-home__hero-heading {
        display: none;
    }

    .ttdr-home__hero-quick {
        grid-template-columns: 1fr;
    }

    .ttdr-home__cards {
        grid-template-columns: 1fr;
        gap: var(--ttdr-z-space-mo-cards-gap);
    }

    #ttdr-content .ttdr-home__cards {
        gap: var(--ttdr-z-space-mo-content-cards-gap);
        max-width: calc(var(--ttdr-z-artboard-mo) - var(--ttdr-z-mo-gutter) * 2);
        margin-left: auto;
        margin-right: auto;
    }

    /* 제플린 MO: col1 x=16 w=158, col2 x=186 w=158 → col-gap=(186-16-158)=12px
     * row-gap: row1 end y=1249, row2 thumb y=1273 → 24px */
    .ttdr-home__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 24px;
    }

    .ttdr-home__section-head {
        display: block;
        margin-bottom: var(--ttdr-z-space-mo-section-head-mb);
    }

    /* section-head보다 나중에 선언되어야 높은 우선순위로 적용됨
     * Zeplin MO: title bottom y=335 → card y=351 = 16px gap */
    #ttdr-content .ttdr-home__intro-section-head {
        margin-bottom: 16px;
    }

    .ttdr-home__section-head--center .ttdr-home__desc {
        display: none;
    }

    /* Zeplin MO: 모든 섹션 타이틀 중앙 정렬 (인트로 y=314, 다운로드 y=881, 배송 y=2350) */
    .ttdr-home__title {
        font-size: var(--ttdr-z-t-mo-section-title-size);
        line-height: var(--ttdr-z-t-mo-section-title-lh);
        margin-bottom: var(--ttdr-z-space-16);
        letter-spacing: var(--ttdr-z-t-mo-section-title-track);
        font-variation-settings: "wght" 800;
        text-align: center;
    }

    /* 콘텐츠 소개: 다운/배송 섹션과 달리 MO에서도 설명 카피가 필요 */
    #ttdr-content .ttdr-home__intro-section-head .ttdr-home__title {
        margin-bottom: 0;
    }

    /* 제플린 MO: 인트로 섹션 설명 문구 비표시 (제플린 화면에 타이틀만 존재) */
    #ttdr-content .ttdr-home__intro-section-head .ttdr-home__desc {
        display: none;
    }

    /* 제플린 MO 360: 카드 328×150, 썸네일 158×150, radius 12, 카드 간격 10px */
    .ttdr-home__intro-card {
        position: relative; /* 뱃지 absolute 기준점 */
        display: grid;
        box-sizing: border-box;
        width: 100%;
        max-width: calc(var(--ttdr-z-artboard-mo) - var(--ttdr-z-mo-gutter) * 2);
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 158px minmax(0, 1fr);
        grid-template-rows: 150px;
        min-height: 150px;
        height: 150px;
        gap: 0;
        padding: 0;
        border-radius: 12px;
        overflow: hidden;
        background: var(--ttdr-z-c-card-surface);
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
        border: 0;
        align-items: stretch;
        align-content: stretch;
    }

    .ttdr-home__intro-card-thumb {
        width: 158px;
        height: 150px;
        min-height: 150px;
        border-radius: 0;
        overflow: hidden;
        background: var(--ttdr-z-c-card-thumb-placeholder);
    }

    .ttdr-home__intro-card-thumb picture {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 150px;
    }

    .ttdr-home__intro-card-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 150px;
        object-fit: cover;
        object-position: center;
    }

    .ttdr-home__intro-card-content {
        box-sizing: border-box;
        min-height: 0;
        padding: var(--ttdr-z-mo-intro-card-content-p);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; /* 하위 요소 수평 중앙 */
        text-align: center;
        gap: 0;
    }

    /*
     * 제플린 MO: 뱃지는 content flex 흐름 안에 유지, align-self:center로 가로 중앙 배치.
     * 바디 너비=170px, 컨텐츠 너비=147px(170-13-10), 뱃지=40px → 중앙=(147-40)/2+187≈240≈x239 ✓
     * justify-content:center 기준: badge(17)+mb(4)+title(19)+mb(8)+desc(28)+mt(10)+link(24)=110
     * 센터 오프셋=(132-110)/2=11px → 카드 top 기준 badge ≈ 11+8(pt) = 19px ≈ 20px(제플린) ✓
     */
    .ttdr-home__intro-card-badge {
        position: static; /* content flex 흐름으로 복귀 */
        align-self: center; /* 가로 중앙 → x≈239 */
        width: 40px;
        height: 17px;
        min-width: auto;
        padding: 0;
        font-size: 10px;
        font-weight: 400;
        line-height: 11px;
        letter-spacing: 0;
        border-radius: 10px;
        margin-bottom: var(--ttdr-z-space-4); /* 4px */
        box-shadow: 0 0 12px rgba(71, 69, 42, 0.2);
    }

    .ttdr-home__intro-card-title {
        font-size: 16px;
        line-height: 19px;
        font-weight: 700;
        letter-spacing: 0;
        color: #000;
        /* 제플린 MO: title end y=573, desc y=581 → gap=8px */
        margin-bottom: var(--ttdr-z-space-8);
    }

    .ttdr-home__intro-card-desc {
        max-width: none;
        margin: 0;
        font-size: 10px;
        line-height: 14px;
        font-weight: 400;
        letter-spacing: -0.2px;
        color: var(--ttdr-z-c-text-subtle);
        white-space: normal;
        text-overflow: clip;
        overflow: visible;
        text-align: center;
    }

    .ttdr-home__intro-card-desc-label--desk {
        display: none;
    }

    .ttdr-home__intro-card-desc-label--mo {
        display: block;
    }

    /* MO 자세히보기: 제플린 Component 73 — 기본 레드 아웃라인(터치 환경이라 호버 의존 X)
     * 링크 x=209, 바디 컨텐츠 left=187, 링크 w=100 → (147-100)/2=23.5px 오프셋 → align-self:center ✓ */
    .ttdr-home__intro-card-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center; /* 제플린: link x=209 = 바디 수평 중앙 */
        width: 100px;
        height: 24px;
        margin-top: var(--ttdr-z-space-10);
        padding: 0;
        border: 1px solid #ff5151;
        border-radius: 15px;
        background: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 11px;
        letter-spacing: -0.2px;
        color: #ff5151;
        box-sizing: border-box;
        text-decoration: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .ttdr-home__intro-card-link:hover,
    .ttdr-home__intro-card-link:focus-visible {
        border-color: #ff5151;
        color: #ff5151;
        background: #fff;
    }

    .ttdr-home__intro-card-link-label--desk {
        display: none;
    }

    .ttdr-home__intro-card-link-label--mo {
        display: inline;
    }

    .ttdr-home__intro-card-link--muted,
    .ttdr-home__intro-card-link--accent {
        border: 1px solid #ff5151;
        color: #ff5151;
        background: #fff;
    }

    .ttdr-home__hero-visual {
        overflow: hidden;
    }

    /* MO 제플린 치수: 롤링 있을 때만 */
    .ttdr-home__hero-visual--multi .ttdr-home__hero-pager {
        right: 10px;
        bottom: 11px;
        gap: 6px;
        width: auto;
        min-width: 79px;
        min-height: 28px;
        height: 28px;
        padding: 0 8px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.8);
        font-size: 13.5px;
        line-height: 16px;
        box-shadow: none;
    }

    .ttdr-home__hero-visual--multi .ttdr-home__hero-pager strong {
        font-weight: 400;
        min-width: 28px;
    }

    .ttdr-home__hero-visual--multi .ttdr-home__hero-pager-btn {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: transparent;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 16px;
    }

    .ttdr-home__hero-visual--multi .ttdr-home__hero-pager-btn:hover {
        opacity: 0.7;
    }

    .ttdr-home__product {
        border-radius: 0;
    }

    .ttdr-home__product-body {
        padding: var(--ttdr-z-product-body-pt) 0 0;
        box-sizing: border-box;
    }

    .ttdr-home__about-brand h3 {
        font-size: 20px;
        line-height: 24px;
        text-align: center;
    }

    .ttdr-home__about-desc-label--desk {
        display: none;
    }

    .ttdr-home__about-desc-label--mo {
        display: inline;
    }

    .ttdr-home__about-brand .ttdr-home__about-desc {
        max-width: 290px;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
    }

    /* 제플린 MO: 버튼 width=158px(카드 전체폭), 세로 스택 배치 */
    .ttdr-home__product-actions,
    #ttdr-delivery .ttdr-home__product-actions {
        width: 100%; /* PC의 244px/332px 고정폭 해제 */
        grid-template-columns: 1fr;
        gap: var(--ttdr-z-product-actions-gap);
    }

    /* 제플린 (mo) Component 62: 장바구니/구매 13.5px, -0.27 tracking */
    .ttdr-home__product-action button,
    .ttdr-home__product-action a {
        font-size: 13.5px;
        letter-spacing: -0.27px;
    }

    /* Zeplin MO: about band
     * y=2020~2290 = 270px
     * title y=2048 → band top 기준 28px (padding-top)
     * desc  y=2080 → title 아래 8px (h3 margin-bottom 8px)
     * buttons y=2112 → desc 아래 16px (actions margin-top)
     * image y=2150 → buttons 아래 10px (brand padding-bottom=10px, gap=0)
     * image height 140px → image bottom y=2290 = band bottom ✓
     */
    .ttdr-home__about-band {
        padding-top: 0;
        height: 270px; /* Zeplin 정확한 높이 고정 */
        overflow: visible; /* 이미지 잘림 방지 */
    }

    /* Zeplin MO: brand 블록 — padding-bottom=10px로 brand/image 간격 10px 확보 */
    .ttdr-home__about-brand {
        box-sizing: border-box;
        padding: 28px var(--ttdr-z-space-mo-about-px) 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }

    /* 1024px 규칙의 gap(16px) 제거 — brand/image 간격은 padding-bottom으로만 */
    .ttdr-home__about {
        gap: 0;
    }

    .ttdr-home__about-actions {
        margin-top: 16px; /* Zeplin: desc bottom y=2096 → buttons top y=2112 = 16px */
    }

    /* Zeplin MO: Mask Group 119 — 328×140px, inner(328px) 전체 너비 */
    .ttdr-home__about-media {
        display: block;
        box-sizing: border-box;
        width: 100%; /* = 328px (360 - 16*2 inner padding) */
        padding: 0;
        height: 140px;
        overflow: hidden;
    }

    .ttdr-home__about-media img {
        display: block;
        width: 100%;
        height: 140px;
        object-fit: contain; /* 이미지 전체 표시, 잘림 없음 */
        object-position: center;
        border-radius: 0;
    }

    .ttdr-home__about-action {
        width: 110px;
        height: 28px;
        font-size: 12.5px;
        line-height: 1;
    }

    /* (기존 MO footer 보정은 상단의 Zeplin footer 블록 규칙으로 대체됨) */
}