@charset "utf-8";
/* 배너 광고 안내 (about.css 와 함께 사용) */

/* ---------- 히어로: 사이트 화면 모형 ---------- */
.bk-ad-hero .bk-ab-hero-visual { padding: 6px 14px 22px 6px; }
.bk-mock { border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px rgba(29,78,216,.18); overflow: hidden; }
.bk-mock-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.bk-mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.bk-mock-bar span { flex: 1; height: 12px; margin-left: 10px; border-radius: 6px; background: #e2e8f0; }
.bk-mock-body { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); gap: 10px; padding: 12px; background: #f4f6fa; }
.bk-mock-main, .bk-mock-side { display: grid; gap: 8px; align-content: start; }
.bk-mock-feed { display: grid; gap: 6px; padding: 10px; border-radius: 8px; background: #fff; }
.bk-mock-feed b { height: 8px; border-radius: 4px; background: #e2e8f0; }
.bk-mock-feed b:nth-child(odd) { width: 86%; }
.bk-mock-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-mock-boxes div { height: 46px; border-radius: 8px; background: #fff; }
.bk-mock-card { height: 40px; border-radius: 8px; background: #fff; }
.bk-mock-card.is-tall { height: 62px; }
.bk-mock-ad { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: repeating-linear-gradient(135deg, #dbeafe 0 8px, #bfdbfe 8px 16px); border: 2px dashed #1d4ed8; color: #1d4ed8; font-weight: 800; font-size: 15px; }
.bk-mock-ad.is-a { height: 30px; }
.bk-mock-ad.is-b { height: 70px; border-color: #ea580c; color: #ea580c; background: repeating-linear-gradient(135deg, #ffedd5 0 8px, #fed7aa 8px 16px); }
.bk-mock-ad span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: currentColor; }
.bk-mock-ad span { color: #fff; }
.bk-mock-ad.is-a span { background: #1d4ed8; }
.bk-mock-ad.is-b span { background: #ea580c; }
.bk-ad-hero .bk-ab-chip.c1 { left: -10px; top: 38%; }
.bk-ad-hero .bk-ab-chip.c3 { left: auto; right: -8px; bottom: 4px; }

/* ---------- 배너 위치 ---------- */
.bk-ad-pos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bk-ad-posc { position: relative; padding: 28px 28px 26px; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bk-ad-posc:hover { transform: translateY(-4px); border-color: #bfdbfe; box-shadow: 0 16px 34px rgba(29,78,216,.1); }
.bk-ad-badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #1d4ed8; color: #fff; font-size: 20px; font-weight: 800; }
.bk-ad-badge.is-b { background: #ea580c; }
.bk-ad-posc h3 { margin: 16px 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.bk-ad-posc p { margin: 0 0 18px; font-size: 14px; line-height: 1.75; color: #64748b; word-break: keep-all; }
.bk-ad-size { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 14px 16px; border-radius: 14px; background: #f8fafc; font-size: 13px; }
.bk-ad-size span { color: #94a3b8; font-weight: 700; }
.bk-ad-size b { margin-right: 10px; color: #0f172a; font-size: 15px; font-weight: 800; }

/* ---------- 배너 규격 ---------- */
.bk-ad-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bk-ad-spec-col { padding: 26px; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; }
.bk-ad-spec-col h3 { margin: 0 0 18px; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
.bk-ad-spec-col h3 i { margin-right: 6px; color: #1d4ed8; }
.bk-ad-prev { display: grid; gap: 12px; padding: 22px; border-radius: 16px; background: #f4f6fa; }
.bk-ad-box { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; aspect-ratio: calc(var(--w) / var(--h)); border: 2px dashed #1d4ed8; border-radius: 10px; background: repeating-linear-gradient(135deg, #dbeafe 0 10px, #bfdbfe 10px 20px); color: #1d4ed8; }
.bk-ad-box.is-b { max-width: 330px; margin: 0 auto; border-color: #ea580c; color: #ea580c; background: repeating-linear-gradient(135deg, #ffedd5 0 10px, #fed7aa 10px 20px); }
.bk-ad-box span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: currentColor; font-size: 13px; font-weight: 800; }
.bk-ad-box span { color: #fff; }
.bk-ad-box.is-a span { background: #1d4ed8; }
.bk-ad-box.is-b span { background: #ea580c; }
.bk-ad-box b { font-size: 15px; font-weight: 800; }
.bk-ad-list { margin: 18px 0 0; padding: 0; list-style: none; }
.bk-ad-list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.bk-ad-list li:last-child { border-bottom: 0; }
.bk-ad-list span { color: #64748b; font-weight: 600; }
.bk-ad-list b { color: #0f172a; font-weight: 800; }

/* ---------- 문의 ---------- */
.bk-ad-end h2 { margin-top: 8px; }
.bk-ad-mail { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 26px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; word-break: break-all; }
.bk-ad-mail:hover { background: rgba(255,255,255,.22); }
.bk-ad-end .bk-ab-cta { margin-top: 24px; }

@media (max-width: 900px) {
    .bk-ad-pos, .bk-ad-spec { grid-template-columns: minmax(0, 1fr); }
    .bk-ad-hero .bk-ab-chip.c1 { left: 6px; } .bk-ad-hero .bk-ab-chip.c3 { right: 6px; }
}
@media (max-width: 640px) {
    .bk-ad-posc { padding: 22px 20px; }
    .bk-ad-spec-col { padding: 20px 16px; }
    .bk-ad-prev { padding: 14px; }
    .bk-ad-mail { padding: 12px 18px; font-size: 16px; }
}

/* 모바일 보정: 규격 미리보기 박스가 카드 폭을 넘지 않도록 */
.bk-ad-prev { grid-template-columns: minmax(0, 1fr); }
.bk-ad-prev > * { min-width: 0; max-width: 100%; }
.bk-ad-box { box-sizing: border-box; min-width: 0; max-width: 100%; overflow: hidden; }
.bk-ad-spec-col { min-width: 0; overflow: hidden; }
.bk-ad-list li { gap: 12px; }
@media (max-width: 640px) {
    .bk-ad-box { gap: 8px; }
    .bk-ad-box b { font-size: 13px; }
    .bk-ad-box span { width: 22px; height: 22px; font-size: 12px; }
}