/* ══════════════════════════════════════════════════════════
   조아공과 페이지 (Zeplin PC / MO)
   - 레이아웃·반응형·탭·프로모·단원·상품: theme/basic/bible-on.css (공유)
   - 이 파일: 조아공과 팔레트(민트/코랄) 및 프로모 배경 전용
   - 스코프: .bbon-joa  (joa-gwa.php → class="bbon-wrap bbon-joa")
════════════════════════════════════════════════════════════ */

/* 서브페이지 상단 — Zeplin: #E1F9FE */
.bbon-joa .bbon-subhd {
    background: #E1F9FE;
}

/* ══════════════════════════════════════
   팔레트
   ─ Teal  (1·2·7·8·9단원) : 헤더 #48C5D4, 바디 #E1F5FF
   ─ Coral (3·4·5·6·10·11·12단원) : 헤더 #FF8C81, 바디 #FFECEC
   ─ 프로모 배경: #80D5D0 (민트/터키석)
════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   프로모션 카드 — PC
   배경: 민트 + 조아공과 캐릭터 이미지 + 폴카도트
   이미지 파일 없으면 폴카도트만 표시
══════════════════════════════════════ */
.bbon-joa .bbon-promo__card {
    background-color: #80D5D0;
    background-image:
        url('img/joa-gwa/bg-promo-joagwa.png'),
        radial-gradient(circle, #8BDCD7 26px, transparent 26px);
    background-size: 100% 100%, 72px 72px;
    background-position: 0 0, 31px 33px;
    background-repeat: no-repeat, repeat;
}

/* 프로모 bullet */
.bbon-joa .bbon-promo__bullet {
    background: #FFF100; /* Zeplin: Ellipse 1 rgb(255,241,0) */
}

/* ══════════════════════════════════════
   기본(Teal) 단원 색상 오버라이드
   1·2·7·8·9단원 — .bbon-unit (클래스 추가 없음)
══════════════════════════════════════ */

/* 단원 본문 배경: 연하늘 */
.bbon-joa .bbon-unit__body,
.bbon-wrap.bbon-joa .bbon-unit__body {
    background: #E1F5FF !important; /* Zeplin Teal bg (강제 오버라이드) */
}

/* Teal 단원(1·2·7·8·9): 단원 제목 컬러 */
.bbon-joa .bbon-unit__titlesub {
    color: #1B5F6D; /* Zeplin: rgb(27,95,109) */
}

/* 컬럼 헤더 pill: 파란 민트 */
.bbon-joa .bbon-unit__pill {
    background: #62B0E8;
}

/* 주차 배지: 테두리·텍스트 */
.bbon-joa .bbon-week-badge {
    border-color: #2384D6;
    color: #1B5F6D; /* Zeplin: rgb(27,95,109) */
}

/* 행 구분선 (::after pseudo) */
.bbon-joa .bbon-unit__row::after {
    background: #2384D6;
}

/* 특별일 태그 */
.bbon-joa .bbon-unit__special {
    /* Zeplin (사순절/종려주일 등): rgb(26,104,206) */
    background: #1A68CE;
}

/* ══════════════════════════════════════
   Coral 단원 색상 오버라이드
   3·4·5·6·10·11·12단원 — .bbon-unit--coral
   (joa-gwa.php 에서 color==='#FF8C81' 인 단원에 클래스 부여)
══════════════════════════════════════ */

/* 단원 본문 배경: 연분홍 */
.bbon-joa .bbon-unit--coral .bbon-unit__body,
.bbon-wrap.bbon-joa .bbon-unit--coral .bbon-unit__body {
    background: #FFECEC !important; /* Zeplin Coral bg (강제 오버라이드) */
}

/* 일부 환경에서 테이블 래퍼가 배경을 덮는 케이스 방어 */
.bbon-joa .bbon-unit__table-wrap,
.bbon-wrap.bbon-joa .bbon-unit__table-wrap {
    background: transparent;
}
.bbon-joa .bbon-unit--coral .bbon-unit__table-wrap,
.bbon-wrap.bbon-joa .bbon-unit--coral .bbon-unit__table-wrap {
    background: transparent;
}

/* 부제목 텍스트: 진한 코랄 */
.bbon-joa .bbon-unit--coral .bbon-unit__titlesub {
    color: #A51B33; /* Zeplin: rgb(165,27,51) */
}

/* 컬럼 헤더 pill: 코랄 핑크 */
.bbon-joa .bbon-unit--coral .bbon-unit__pill {
    background: #FF8EB1;
}

/* 주차 배지: 코랄 */
.bbon-joa .bbon-unit--coral .bbon-week-badge {
    border-color: #FF708B;
    color: #A51B33; /* Zeplin: rgb(165,27,51) */
}

/* 행 구분선 */
.bbon-joa .bbon-unit--coral .bbon-unit__row::after {
    background: #FF708B;
}

/* 특별일 태그 */
.bbon-joa .bbon-unit--coral .bbon-unit__special {
    /* Zeplin (부활주일/어린이주일/성령강림주일 등): rgb(255,112,139) */
    background: #FF708B;
}

/* ══════════════════════════════════════
   5행 단원 min-height
   bible-on.css 와 동일 값 — 단원 바디/테이블 최소 높이
══════════════════════════════════════ */
.bbon-joa .bbon-unit--5rows .bbon-unit__body {
    min-height: 339px;
}

.bbon-joa .bbon-unit--5rows .bbon-unit__table-wrap {
    min-height: 293px;
}

/* ══════════════════════════════════════
   모바일 오버라이드  (max-width: 767px)
══════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── 프로모 카드 MO ── */
    .bbon-joa .bbon-promo__card {
        background-image:
            url('img/joa-gwa/bg-promo-joagwa-mo.png'),
            radial-gradient(circle, #8BDCD7 16px, transparent 16px);
        background-size: 100% auto, 48px 48px;
        background-position: bottom center, 16px 16px;
        background-repeat: no-repeat, repeat;
    }

    /* ── min-height 전부 제거 (MO 에서는 늘어남 방지) ── */
    .bbon-joa .bbon-unit__body,
    .bbon-joa .bbon-unit--5rows .bbon-unit__body {
        min-height: 0;
    }

    .bbon-joa .bbon-unit__table-wrap,
    .bbon-joa .bbon-unit--5rows .bbon-unit__table-wrap {
        min-height: 0;
    }

    /* ── Coral 단원 MO 유지 ── */
    .bbon-joa .bbon-unit--coral .bbon-unit__body {
        background: #FFECEC;
    }

    /* ── MO: 밑줄 제거 (bible-on.css 와 동일 처리) ── */
    .bbon-joa .bbon-unit__row::after,
    .bbon-joa .bbon-unit--coral .bbon-unit__row::after,
    .bbon-joa .bbon-unit--5rows .bbon-unit__row:nth-child(5)::after {
        display: none;
    }

    /* ── MO: pill 색상 유지 ── */
    .bbon-joa .bbon-unit--coral .bbon-unit__pill {
        background: #FF8EB1;
    }

    /* ── MO: 주차 배지 색상 유지 ── */
    .bbon-joa .bbon-unit--coral .bbon-week-badge {
        border-color: #FF708B;
        color: #A51B33; /* Zeplin: rgb(165,27,51) */
    }
}