/* ================================================
   바이블 온 콘텐츠 안내 페이지 스타일
   PC: 1280px 기준 / MO: 360px 기준 (반응형)
================================================ */

/* ── gnuboard5 default.css #container 오버라이드 ──
   home-main.css와 동일한 패턴 (body.ttdr-home-body 의존)
   #container { width:930px; float:left } 등을 리셋 */
body.ttdr-home-body #wrapper,
body.ttdr-home-body #ft {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
}

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

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

/* ── 공통 래퍼 ── */
.bbon-wrap {
    width: 100%;
    background: #fff;
}

/* ══════════════════════════════════════
   서브페이지 헤더 (배너)
   PC: 1280 × 130px  bg: #e1f9fe
   MO: 360 × 100px   bg: #e1f9fe
══════════════════════════════════════ */
.bbon-subhd {
    width: 100%;
    height: 130px;
    background: #e1f9fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbon-subhd__inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 122px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbon-subhd__title {
    font-family: "Pretendard", sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 33px;
    color: #000;
    text-align: center;
    margin: 0;
}

/* ══════════════════════════════════════
 탭 네비게이션
 PC: 각 508 × 80px, 탭 사이 20px 간격
 MO: 각 160 × 52px
 Zeplin: 서브헤더 아래 80px 갭 후 시작
══════════════════════════════════════ */
.bbon-tabs {
 width: 100%;
 background: #fff;
 margin-top: 80px;
}

.bbon-tabs__inner {
 width: 100%;
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 122px;
 display: flex;
 gap: 20px;
}

/* 컨텐츠 안내(cguide)와 동일 슬롯 클래스 — 탭 아래 공과·다운로드 바 */
.bbon-wrap .xkv7-cguide-kingdom-product-slot {
    width: 100%;
    max-width: 1280px;
    margin: 20px auto 0;
    padding: 0 122px;
    box-sizing: border-box;
}

.bbon-wrap .xkv7-cguide-kingdom-product-slot .xkv7-cguide-kingdom-product .bbon-product {
    margin-top: 0;
}

.bbon-tab {
    flex: 1;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Pretendard", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
    /* Zeplin: 탭은 상단만 대형 radius (PC 프로모/단원 카드 28px와 톤 맞춤) */
    border-radius: 28px 28px 0 0;
}

.bbon-tab:not(.bbon-tab--active) {
    background: #fff;
    color: #333;
    border: 3px solid #dfdfdf;
}

.bbon-tab--active {
    background: #333;
    color: #fff;
    border: none;
}

/* ══════════════════════════════════════
   메인 콘텐츠 영역
══════════════════════════════════════ */
.bbon-content {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 122px 60px;
    box-sizing: border-box;
    overflow: visible; /* 월 배지(left: -122px)가 좌측 패딩 영역에 표시되도록 */
}

/* ══════════════════════════════════════
   프로모션 카드
   PC: 1036 × 623px  bg: #d6e549  radius: 28px
   MO: 328 × auto    bg: #d6e549  radius: 8px
══════════════════════════════════════ */
.bbon-promo {
 margin-bottom: 0;
}

.bbon-promo__card {
 background-color: #d6e549;
 /* 레이어 1: 캐릭터+로고 이미지 (투명 배경, 우측에 캐릭터 배치)
    레이어 2: 폴카도트 패턴 (Zeplin bg_pattern02) */
 background-image:
     url('img/bible-on/bg-promo-bibleon.png'),
     radial-gradient(circle, #ddec51 26px, transparent 26px);
 background-size: 100% 100%, 72px 72px;
 background-position: 0 0, 31px 33px;
 background-repeat: no-repeat, repeat;
 border-radius: 28px;
 padding: 62px 55px 40px;
 position: relative;
 display: grid;
 grid-template-columns: 540px 1fr;
 grid-template-rows: auto 1fr;
 gap: 0;
 min-height: 623px;
 box-sizing: border-box;
}

/* 미리보기 영역 (PC: 485×271 / MO: 296×166) */
.bbon-promo__preview {
 grid-column: 1;
 grid-row: 1;
 width: 485px;
 height: 271px;
 border-radius: 6px;
 overflow: hidden;
 align-self: start;
 flex-shrink: 0;
}

/* 미리보기 이미지 (Zeplin: 소개영상 준비중 - 어두운 배경+하트+pill+꽃) */
.bbon-promo__preview-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 border-radius: 6px;
}

/* 우측 그리드 컬럼 placeholder — 실제 캐릭터/로고는 .bbon-promo__card의 background-image */
.bbon-promo__right {
    grid-column: 2;
    grid-row: 1 / 3;
}

/* 피처 목록 — 좌측 컬럼 하단 */
/* 피처 목록 컨테이너
 Zeplin: 프리뷰(271px) 아래 49px 갭 후 피처 시작
 가용 높이: 623-62-40 = 521px / 피처 시작: 321px(=271+50) / 피처 높이 5rows×38px=190px */
.bbon-promo__features {
 grid-column: 1;
 grid-row: 2;
 list-style: none;
 margin: 0;
 padding-top: 49px;
 padding-right: 0;
 display: flex;
 flex-wrap: wrap;
 align-content: flex-start;
}

/* 피처 항목 공통 */
.bbon-promo__feature-item {
 display: flex;
 align-items: center;
 gap: 8px;
 font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
 font-size: 15px;
 font-weight: 500;
 height: 38px;
 letter-spacing: -0.375px;
 color: #313131;
 white-space: nowrap;
}

/* Row 1: 50% 너비 (찬양음원, 손유희 영상) */
.bbon-promo__feature-item--half {
 width: 50%;
}

/* Row 2-3: auto 너비, 항목 간 오른쪽 여백 */
.bbon-promo__feature-item--auto {
 width: auto;
 padding-right: 24px;
}

/* Row 4-5: 전체 너비 */
.bbon-promo__feature-item--full {
 width: 100%;
 white-space: normal;
}

.bbon-promo__bullet {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fc7e7a;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   단원 목록
   제플린 기준:
   - 헤더: 1036×88px, bg: [unit color]
   - 배지: 150×126px ellipse, 헤더 상단 38px 오버랩
   - 본문: bg #ecf8e0, 좌(이미지150px) + 우(테이블)
   - 컬럼: 주제pill / 본문pill / 오늘의말씀pill
══════════════════════════════════════ */
.bbon-units {
 /* Zeplin: 상품 카드 하단(y:1262) ~ 배지 상단(y:1288) = 26px */
 margin-top: 26px;
 overflow: visible; /* 배지가 좌측 밖으로 나오도록 클리핑 방지 */
}

/* 단원 래퍼 (배지 오버랩용 padding-top = 배지가 헤더 위 38px 오버랩) */
.bbon-unit {
 position: relative;
 padding-top: 38px;
 margin-bottom: 40px;
 overflow: visible; /* 배지가 좌측으로 튀어나오도록 */
}

/* ── 월 배지: 카드 헤더 좌상단 오버랩 ──
   Zeplin: left=0 (bbon-unit 좌측 끝에 딱 붙음), 그림자 없음
   top=0 → padding-top(38px) 위에서 시작, bottom=126px → 헤더 하단과 일치 */
.bbon-unit__badge {
 position: absolute;
 top: 0;
 left: 0;
 width: 150px;
 height: 126px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 2;
}

.bbon-unit__month {
    font-family: "SDGyeokdongGL2-fHv", "Pretendard", sans-serif;
    font-size: 52px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -2.08px;
    color: #f7f7f7;
    text-align: center;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/* PC 월 배지: 이미지 에셋 사용 시 */
.bbon-unit__badge--img {
    background: none !important;
    border-radius: 0;
    display: block;
    padding: 0;
}

.bbon-unit__badge-img {
    width: 150px;
    height: 126px;
    display: block;
}

/* ── 단원 헤더 바 ── */
/* Zeplin: 카드 상단 모서리 둥글게 (배지가 좌상단 가림, top-right만 시각적으로 보임) */
.bbon-unit__header {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 36px;
    position: relative;
    z-index: 1;
    border-radius: 28px 28px 0 0;
}

/* 모바일용 월 표시 (PC에서는 숨김) */
.bbon-unit__mob-month {
    display: none;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
}

/* PC 우측 타이틀 영역 */
.bbon-unit__header-right {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

/* 단원 부제목 (창조하신 하나님) - 진한 초록 */
.bbon-unit__titlesub {
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -1.12px;
    color: #2a7128;
}

/* 단원 번호 태그 (N단원) - 흰색 */
.bbon-unit__numtag {
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -1.12px;
    color: #fff;
    white-space: nowrap;
}

/* ── 단원 본문 영역 (이미지 + 테이블) ── */
/* Zeplin: 카드 하단 모서리 둥글게 */
.bbon-unit__body {
    background: #ecf8e0;
    position: relative; /* specials absolute 기준 */
    display: flex;
    min-height: 294px;
    border-radius: 0 0 28px 28px;
    overflow: hidden;
}

/* 이미지 컬럼 — 너비는 PHP에서 img_width 인라인 스타일로 단원별 지정
   실제 에셋 크기: 150px(3·4·10·11·12단원) / 179px(7·8) / 190px(1·2·5·6·9) */
.bbon-unit__img-col {
    /* width: PHP 인라인 style="width:Xpx" 로 단원별 지정 */
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* 캐릭터 하단 정렬 */
    padding: 0;
}

/* 캐릭터 이미지: 너비는 PHP 인라인, 높이는 행수에 따라 CSS 로 결정 */
.bbon-unit__img {
    /* width: PHP 인라인 style="width:Xpx" 로 단원별 지정 */
    height: 294px;    /* 4행 단원 기본 높이 */
    object-fit: contain;
    object-position: bottom center;
    display: block;
    flex-shrink: 0;
}

/* 5행 단원 (3·5·8·11): body/table min-height + 이미지 높이 339px */
.bbon-unit--5rows .bbon-unit__body {
    min-height: 339px;
}
.bbon-unit--5rows .bbon-unit__table-wrap {
    min-height: 339px;
}
.bbon-unit--5rows .bbon-unit__img {
    height: 339px;
}

/* 특별일 태그: absolute 오버레이
   Zeplin 실측 (unit11 Rectangle 1240: x=240, width=88, right=328)
   - img-col: x=162~312 (width=150)
   - 태그 우측끝 x=328 → img-col 우측(312)에서 16px 넘어감 → right: -16px
   - top: PHP 인라인 스타일로 제어 (주차별 개별 배치, row1=85px, 행간격 46px) */

/* 개별 주차 특별일 태그: 해당 행 높이에 절대 배치
   top은 PHP에서 (85 + i * 46)px 인라인 스타일로 주입 → 태그 상단 = 행 중앙 - 15px (태그 h 30px의 절반) */
.bbon-unit__special--row {
    position: absolute;
    right: -16px;   /* img-col 우측 경계에서 16px 오버행 → 주차 배지와 인접 */
    z-index: 3;
    pointer-events: none;
}

.bbon-unit__special {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 30px;
    background: #56c73c;
    border-radius: 15px;
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: #fff;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ── 테이블 영역 (우측, flex:1) ── absolute 기반 레이아웃
   모든 자식 요소(pills, rows)가 absolute 로 정확한 좌표에 배치됨
   Zeplin 좌표 기준 (body top = 0):
     pills  : top=32, left=28, right=28, h=29 → end at 61px
     gap    : 16px (pills end→row1 top)
     row 1  : top=77, h=46  (1주 badge y=1499, body=1414 → 85px start, center=100)
     row 2  : top=123 (+46), row 3: top=169 (+46), row 4: top=215 (+46)
     row4 bottom : 215+46=261, body h=294 → 하단 여백 33px */
.bbon-unit__table-wrap {
    flex: 1;
    position: relative;
    min-height: 294px;
    min-width: 0;
}

/* 컬럼 헤더 pill 행 — absolute 좌표 배치 */
.bbon-unit__pills {
    position: absolute;
    left: 28px;
    top: 32px;
    right: 28px;
    height: 29px;
    display: grid;
    grid-template-columns: 64px 1fr 20px 180px 20px 114px;
    align-items: stretch;
}

.bbon-unit__pill {
    height: 29px;
    background: #c6de22;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
    color: #fff;
}

.bbon-unit__pill--theme {
    grid-column: 1 / 3; /* week col + theme col */
}

.bbon-unit__pill--body {
    grid-column: 4;
}

.bbon-unit__pill--verse {
    grid-column: 6;
}

/* 데이터 행 — absolute 좌표 배치
   Zeplin 실측: 행 높이 46px (분리선 간격 1536.5→1582.5→1628.5 = 46px)
   left=28, right=28 (pills 동일)
   배지/특별태그 높이 30px → 수직 중앙 = (46-30)/2 = 8px 여백 */
.bbon-unit__row {
    position: absolute;
    left: 28px;
    right: 28px;
    height: 46px;
    display: grid;
    grid-template-columns: 64px 1fr 20px 180px 20px 114px;
    align-items: center;
}
/* nth-child: pills 가 1번, 행들은 2~5번(4행) / 2~6번(5행)
   pills bottom: 32+29=61px, gap=16px → row1 top=77
   이후 46px 간격 */
.bbon-unit__row:nth-child(2) { top: 77px;  }
.bbon-unit__row:nth-child(3) { top: 123px; }
.bbon-unit__row:nth-child(4) { top: 169px; }
.bbon-unit__row:nth-child(5) { top: 215px; }

/* 5행 단원(units 5·8·11): 5번째 데이터 행(nth-child(6)) */
.bbon-unit--5rows .bbon-unit__row:nth-child(6) { top: 261px; }

/* 마지막 행 밑줄 제거: 4행 단원 = nth-child(5), 5행 단원 = nth-child(6) */
.bbon-unit__row:nth-child(5)::after              { display: none; }
.bbon-unit--5rows .bbon-unit__row:nth-child(5)::after { display: block; } /* 5행 단원은 5번째가 마지막 아님 */
.bbon-unit--5rows .bbon-unit__row:nth-child(6)::after { display: none; }

/* 셀 공통: 행 높이 46px 고정이므로 텍스트는 1줄 처리 */
.bbon-unit__cell {
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.4px;
    color: #666;
    padding: 0 4px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PC 구분선: row::after로 연속선
   Zeplin 실측: Line 109 x=414.5, width=716
   행 좌측(x=340) 기준 → left = 414.5-340 = 74.5 ≈ 74px
   행 우측(x=1130) 기준 → right = 0 (행 우측끝까지) */
.bbon-unit__row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 74px;  /* Zeplin: 배지 컬럼(64px) + 10px 여백 후 시작 */
    right: 0;
    height: 1px;
    background: #56c73c;
}

.bbon-unit__cell--week {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bbon-unit__cell--theme {
    grid-column: 2;
    padding-left: 8px;
}

.bbon-unit__cell--body {
    grid-column: 4;
    text-align: center;
}

.bbon-unit__cell--verse {
    grid-column: 6;
    text-align: center;
}

/* 주차 배지 pill (행 안의 pill) */
.bbon-week-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 30px;
    background: #fff;
    border: 1px solid #56c73c;
    border-radius: 15px;
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #377b36;
    box-sizing: border-box;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   주황 계열 단원 색상 오버라이드
   Zeplin: 4월·5월·6월 단원 = 주황 테마
   본문 배경 #fff7e2, pill #fed400,
   주차배지 border/text #ff8800/#8b5319,
   구분선 #ff8800, 특별일 태그 #ff8800,
   단원 부제목 색상 #824b12
══════════════════════════════════════ */
.bbon-unit--orange .bbon-unit__body {
    background: #fff7e2;
}

.bbon-unit--orange .bbon-unit__titlesub {
    color: #824b12;
}

.bbon-unit--orange .bbon-unit__special {
    background: #ff8800;
}

.bbon-unit--orange .bbon-unit__pill {
    background: #fed400;
}

.bbon-unit--orange .bbon-week-badge {
    border-color: #ff8800;
    color: #8b5319;
}

.bbon-unit--orange .bbon-unit__row::after {
    background: #ff8800;
}

/* ══════════════════════════════════════
   상품 카드 (구매/다운로드)
   PC 구조:
     - .bbon-product__bar : 1036×80px 회색 바 (공지 + 버튼)
     - 상단 카드: 공과구매 버튼 / 하단 카드: 다운로드 버튼
   Zeplin: bar radius=28, buy btn 142×48, dl btn 142×48
══════════════════════════════════════ */
.bbon-product {
    /* Zeplin: 프로모 카드 하단(y:1122) → 상품 카드(y:1142) = 20px 간격 */
    margin-top: 20px;
}

.bbon-product__bar {
    height: 80px;
    background: #f6f6f6;
    border: 3px solid #d6d6d6;
    border-radius: 28px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-sizing: border-box;
}

.bbon-product__notice {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bbon-product__notice-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.bbon-product__notice-text {
    font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.5px;
    color: #333;
}

/* 단원 일부만 보유: 공과구매 + 다운로드 (요청 간격 16px) */
.bbon-product__cta--dual {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
}

/* 공통 버튼 */
.bbon-product__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.15s;
    white-space: nowrap;
    cursor: pointer;
    border: none;
}

.bbon-product__btn:hover {
    opacity: 0.85;
}

/* 공과구매 버튼 (Zeplin: 142×48, #2c5273, radius 24, Pretendard SemiBold 20px) */
.bbon-product__btn--buy {
    flex-shrink: 0;
    width: 142px;
    height: 48px;
    border-radius: 24px;
    background: #2c5273;
    color: #fff;
    font-family: "Pretendard", sans-serif;
    font-size: 20px;
    font-weight: 600;
}

/* 다운로드 버튼 (Zeplin: 142×48, #ffeeee, border 2px #ebc9c9, radius 24, Pretendard SemiBold 16px #ff5151) */
.bbon-product__btn--dl {
    flex-shrink: 0;
    width: 142px;
    height: 48px;
    border-radius: 24px;
    background: #ffeeee;
    border: 2px solid #ebc9c9;
    box-sizing: border-box;
    color: #ff5151;
    font-family: "Pretendard", sans-serif;
    font-size: 16px;
    font-weight: 600;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max-width: 767px)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

 /* 서브헤더 */
 .bbon-subhd {
 height: 100px;
 }

 .bbon-subhd__inner {
 padding: 0 20px;
 }

 .bbon-subhd__title {
 font-size: 24px;
 line-height: 29px;
 }

 /* 탭 — MO: 서브헤더 아래 60px 갭 후 시작
    Zeplin: 서브헤더 bottom y:204 → 탭 y:264 → gap 60px */
 .bbon-tabs {
 margin-top: 60px;
 }

 .bbon-tabs__inner {
 padding: 0 16px;
 gap: 8px;                /* Zeplin: 가운데 간격 고정 8px */
 }

 .bbon-wrap .xkv7-cguide-kingdom-product-slot {
 margin-top: 16px;
 padding: 0 16px;
 }

 /* MO: 양옆 16px 고정 + 중앙 8px 고정, 나머지 너비를 절반씩 채움 */
 .bbon-tab {
 flex: 1;
 height: 52px;
 font-size: 16px;
 font-weight: 600;
 line-height: 19px;
 /* Zeplin MO: 단원 헤더(14)와 동일 스케일 */
 border-radius: 14px 14px 0 0;
 }

 /* MO: 활성 탭 — Zeplin: fontWeight 500 (Medium) */
 .bbon-tab--active {
 font-weight: 500;
 }

    /* 콘텐츠 */
    .bbon-content {
        padding: 16px 16px 40px;
    }

    /* 프로모션 카드
       Zeplin MO: 배경 y:332, 미리보기 y:364 → top 32px
                  미리보기 x:32(좌우 16px 여백) → padding 좌우 16px
                  미리보기 끝 y:530, 피처 y:556 → gap 26px */
    .bbon-promo__card {
        border-radius: 8px;
        padding: 32px 16px;
        display: flex;
        flex-direction: column;
        gap: 26px;
        min-height: unset;
        grid-template-columns: none;
        /* MO: 캐릭터 이미지(하단) + 폴카도트 패턴 */
        background-image:
            url('img/bible-on/bg-promo-bibleon-mo.png'),
            radial-gradient(circle, #ddec51 16px, transparent 16px);
        background-size: 100% auto, 48px 48px;
        background-position: bottom center, 16px 16px;
        background-repeat: no-repeat, repeat;
        /* 캐릭터 이미지(하단 180px 영역) 표시를 위한 하단 공간 */
        padding-bottom: 180px;
    }

    .bbon-promo__preview {
        width: 100%;
        /* PC 비율 485:271 = 1.789:1 → 296px 기준 height ≈ 166px */
        max-width: 296px;
        aspect-ratio: 485 / 271;
        height: auto;   /* aspect-ratio 로 자동 계산 */
        margin: 0 auto;
        grid-column: unset;
        grid-row: unset;
    }

    /* MO: preview 컨테이너(overflow:hidden)가 코너 클리핑 담당 */
    .bbon-promo__preview-img {
        border-radius: 0;
    }

    .bbon-promo__right {
        display: none; /* MO에서는 우측 캐릭터 이미지 숨김 */
    }

    .bbon-promo__features {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        padding-right: 0;
        grid-column: unset;
        grid-row: unset;
    }

    /* MO: 모든 항목 1열
       Zeplin 측정: 항목 간 bullet y간격 26px, 텍스트 높이 16px
       → 상하 padding = (26-16)/2 = 5px */
    .bbon-promo__feature-item,
    .bbon-promo__feature-item--half,
    .bbon-promo__feature-item--auto,
    .bbon-promo__feature-item--full {
        width: 100%;
        height: auto;
        padding: 5px 0;
        padding-right: 0;
        font-family: "Pretendard", sans-serif;
        font-size: 14px;
        font-weight: 400;
        white-space: normal;
        line-height: 16px;
    }

    .bbon-promo__bullet {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
    }

 /* ── 단원 (MO) ── */
 .bbon-units {
 margin-top: 24px;
 }

 /* 배지 오버랩 없이 단순 구조 */
 .bbon-unit {
 padding-top: 0;
 margin-bottom: 12px;
 }

    /* PC 배지 숨김 */
    .bbon-unit__badge {
        display: none;
    }

    /* MO 헤더: 48px, 좌(월) 우(타이틀), 상단 라운딩 */
    .bbon-unit__header {
        height: 48px;
        padding: 0 16px;
        justify-content: space-between;
        border-radius: 14px 14px 0 0;
    }

    /* MO: 월 표시 (좌측) 보임 */
    .bbon-unit__mob-month {
        display: block;
    }

    /* MO: 우측 그룹 — Zeplin: 생명의 하나님(x:190~277) + 16px gap + 1단원(x:293) */
    .bbon-unit__header-right {
        gap: 16px;
        align-items: center;
    }

    /* MO: 부제목 (타이틀) */
    .bbon-unit__titlesub {
        font-family: "Pretendard", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        letter-spacing: 0;
    }

    /* MO: "N단원" 표시 — Zeplin: x:293, fontSize 16, fontWeight 600, white */
    .bbon-unit__numtag {
        display: inline;
        font-family: "Pretendard", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 19px;
        letter-spacing: 0;
    }

    /* MO: 본문 영역 — 하단 라운딩, min-height 초기화
       .bbon-unit--5rows { min-height: 339px } PC 규칙보다 명시도 맞춰 재설정 */
    .bbon-unit__body,
    .bbon-unit--5rows .bbon-unit__body {
        flex-direction: column;
        min-height: 0;
        border-radius: 0 0 14px 14px;
    }

    /* MO: 이미지 컬럼 숨김 */
    .bbon-unit__img-col {
        display: none;
    }

    /* MO: 테이블 래퍼 — absolute 레이아웃 해제, flex 복원
       Zeplin: body y=1272, 첫 행 y=1288 → padding 16px
       행 간 gap 4px (Zeplin step 28 = height 24 + gap 4)
       .bbon-unit--5rows .bbon-unit__table-wrap { min-height: 339px } PC 규칙
       명시도 초과이므로 동일 명시도로 함께 초기화 */
    .bbon-unit__table-wrap,
    .bbon-unit--5rows .bbon-unit__table-wrap {
        position: static;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 16px;
        row-gap: 4px;
    }

    /* MO: pill 헤더 숨김 (absolute 해제도 함께) */
    .bbon-unit__pills {
        position: static;
        height: auto;
        display: none;
    }

    /* MO: 행 — absolute 해제, flow 복원
       Zeplin: 각 행 height 24px (line-height 16 + padding 4×2)
       row-gap 4px는 table-wrap 에서 처리 */
    .bbon-unit__row {
        position: static;
        height: auto;
        min-height: 24px;
        grid-template-columns: 52px 1fr;
        align-items: start;
    }
    .bbon-unit__row:nth-child(2),
    .bbon-unit__row:nth-child(3),
    .bbon-unit__row:nth-child(4),
    .bbon-unit__row:nth-child(5),
    .bbon-unit__row:nth-child(6) { top: auto; }

    /* MO: PC ::after 구분선 전체 숨김
       — .bbon-unit--5rows .bbon-unit__row:nth-child(5)::after { display:block }가
         PC에서 더 높은 명시도로 설정되어 있으므로 동일 명시도로 덮어씀 */
    .bbon-unit__row::after,
    .bbon-unit--5rows .bbon-unit__row:nth-child(5)::after {
        display: none;
    }

    .bbon-unit__cell--week {
        grid-column: 1;
        border-bottom: none;
    }

    .bbon-unit__cell--theme {
        grid-column: 2;
        font-family: "Pretendard", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;   /* Zeplin: lineHeight 16 (기본 1.5 오버라이드) */
        letter-spacing: 0;
        color: #666;
        /* MO: 밑줄 없음 (PC ::after 구분선 방식도 이미 숨김) */
        border-bottom: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding: 4px;
    }

    /* MO: 본문/말씀 컬럼 숨김 */
    .bbon-unit__cell--body,
    .bbon-unit__cell--verse {
        display: none;
    }

    /* MO: 주차 배지 (더 작게) */
    .bbon-week-badge {
        width: 52px;
        height: 24px;
        border-radius: 12px;
        font-family: "Pretendard", sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    /* MO: 특별일 태그 */
    .bbon-unit__special {
        font-size: 11px;
        height: 24px;
    }
    .bbon-unit__special--row {
        position: static;
        right: auto;
        transform: none;
    }

    /* MO: 상품 카드
       Zeplin: 내부 박스 328×136 (radius 8), 버튼 158×48 가운데 정렬 */
    .bbon-product {
        margin-top: 24px;
    }

    .bbon-product__bar {
        height: auto;
        min-height: 80px;
        border-radius: 8px;
        padding: 16px;
        flex-direction: column;
        align-items: center;   /* 버튼 가운데 정렬 */
        gap: 14px;
    }

    .bbon-product__notice {
        width: 100%;           /* 공지 텍스트는 전체 너비 */
    }

    .bbon-product__notice-text {
        font-family: "NotoSansCJKkr", "Pretendard", sans-serif;
        font-size: 14px;
        letter-spacing: -0.35px;
    }

    /* MO: 공과구매 버튼 — Zeplin: 158×48, radius 24 */
    .bbon-product__btn--buy {
        width: 158px;
        height: 48px;
        border-radius: 24px;
        font-size: 16px;
    }

    /* MO: 다운로드 버튼 — Zeplin: 158×48, radius 24 */
    .bbon-product__btn--dl {
        width: 158px;
        height: 48px;
        border-radius: 24px;
        font-size: 16px;       /* Zeplin: fontSize 16 (이전 14) */
    }

    .bbon-product__cta--dual {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        width: 100%;
    }
}