/* 세 사이트 공용 본문 디자인 정돈 (2026-10-15) — 정본은 이 파일 하나. shared/apply_bk_header.py 가 사이트 폴더에 복사하고
   본문 페이지(nav.nav·nav.top 이 있는 페이지) </head> 앞에 링크한다. 구매·주문 화면(header.site-header)은 자체 CSS 라 건드리지 않는다.
   검토 캔버스: https://claude.ai/artifact/FeeknszbQ4p8nZGLJfMq65 (9쪽 측정 → 사장님 "다 수정해줘").

   ① 글 단 폭 720px(한 줄 약 40자) — 문단·목록만. 사진·표·카드는 넓은 틀 그대로.
   ② 시작선 하나 — 바깥 틀을 1110px(헤더·바닥글과 같은 틀)로, 안쪽 여백 0. 배경이 있는 상자는 상자 가장자리가 틀에 맞고 글은 28px 들어간다.
   ③ 구역 여백 — 띠(배경 있는 구역) 위아래 64 · 일반 구역 48(= 구역 사이 96), 휴대폰 48 · 32(= 64).
   ④ 제목 위계 — 구역 제목(h2) 30 · 카드 제목(h3) 20, 휴대폰 24 · 18. 첫 화면 제목(h1)·한 문장 메시지(.page-message)는 그대로.
   ⑤ 버튼 — 높이 48 이상·16px 굵게로 통일(휴대폰 터치 권장 44 이상).
   ☠히어로 사진 구성(.cine-hero · .kl-hero-a · .kl-sub-hero)은 건드리지 않는다(Codex 가 px 단위로 맞춤, 10/07).
   ☠글자색·그림 폭·키링크 가운데 정렬 첫 화면은 이번 범위 밖(글자색은 강조색·어두운 구역과 섞여 한 번에 못 바꿈, 그림은 실물 비율 방식).
   body:not(#bkb) 는 id 한 칸만큼 우선순위를 올려 각 사이트 bundle·design-v5·typography 의 !important 규칙을 이긴다. */

:root{--bkb-g:24px}

/* ① 글 단 폭 */
body:not(#bkb) :is(p,li,dd,blockquote):not(:is(nav,footer,header.cine-hero,.cine-hero,.kl-hero-a,.kl-sub-hero,.iq-strip,.page-message) *){max-width:720px!important}

/* ② 시작선 — 바깥 틀 1110 */
body:not(#bkb) :is(.wrap,.inner,.page-message-inner,.tech-proof-inner,.reading-inner,.decision-inner,.kl-how-inner,.kl-lineup-inner,.fact-strip-inner,.m5-foundation__layout):not(:is(nav,footer,.cine-hero,.kl-hero-a,.kl-sub-hero,.post-section,article,details,.iq-strip,.maker-service) *):not(.cine-hero .inner){box-sizing:border-box!important;width:min(1110px,calc(100% - 2 * var(--bkb-g)))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
/* 글 목록·글(블로그)이 아닌 페이지의 .post-section 안 틀(키링크 갤러리·스테이션·호환키) — 블로그는 읽기 단 760 그대로 */
body.minimal:not(.blog-editorial):not(.blog-list-page):not(#bkb) .post-section .wrap{box-sizing:border-box!important;width:min(1110px,calc(100% - 2 * var(--bkb-g)))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
/* 배경 없는 단독 구역 */
body:not(#bkb) :is(.customer-value,.operation-video,.purchase-guide,.related-posts:not(.has-bg)){box-sizing:border-box!important;width:min(1110px,calc(100% - 2 * var(--bkb-g)))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
/* 바깥 틀 자체가 상자(배경·테두리)인 것 — 가장자리를 틀에 맞춤 */
body:not(#bkb) :is(.maker-service,details.minimal-detail.menu-group,.iq-strip){box-sizing:border-box!important;width:min(1110px,calc(100% - 2 * var(--bkb-g)))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important}
body:not(#bkb) :is(.maker-service){padding-left:28px!important;padding-right:28px!important}

/* ③ 구역 여백 */
body:not(#bkb) :is(.page-message,.tech-proof,.home-product-paths,.portals,.docs-sec,.m5-foundation,.reading-start,.minimal-overview,.post-cta,.photo-process){padding-top:64px!important;padding-bottom:64px!important}
body:not(#bkb) :is(.customer-value,.operation-video,.purchase-guide,.maker-service,.related-posts){margin-top:0!important;margin-bottom:0!important;padding-top:48px!important;padding-bottom:48px!important}
body:not(#bkb) :is(.fact-strip){padding-top:48px!important;padding-bottom:48px!important}

/* ④ 제목 위계 — 히어로·한 문장 메시지·궁금한 점 띠·카드 이미지 위 제목은 제외 */
body:not(#bkb) h2:not(:is(nav,footer,.cine-hero,header.hero,.kl-hero-a,.kl-sub-hero,header.phero,header.docs-hero,.page-message,.iq-strip,.portals,.operation-title,.post-cta,.close) *):not(.operation-title){font-size:30px!important;line-height:1.35!important}
body:not(#bkb) h3:not(:is(nav,footer,.cine-hero,header.hero,.kl-hero-a,.kl-sub-hero,header.phero,.iq-strip,.portals) *){font-size:20px!important;line-height:1.4!important}
body:not(#bkb) .operation-title{font-size:30px!important;line-height:1.35!important}

/* ⑤ 버튼 */
body:not(#bkb) :is(a.btn,button.btn,.purchase-primary,.purchase-kakao,.iq-main,.minimal-actions a,.minimal-actions button):not(nav *){min-height:48px!important;font-size:16px!important;font-weight:700!important;border-radius:0!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
body:not(#bkb) .operation-controls button{min-height:44px!important}

@media (max-width:720px){
  :root{--bkb-g:18px}
  body:not(#bkb) :is(.page-message,.tech-proof,.home-product-paths,.portals,.docs-sec,.m5-foundation,.reading-start,.minimal-overview,.post-cta,.photo-process){padding-top:48px!important;padding-bottom:48px!important}
  body:not(#bkb) :is(.customer-value,.operation-video,.purchase-guide,.maker-service,.related-posts,.fact-strip){padding-top:32px!important;padding-bottom:32px!important}
  body:not(#bkb) :is(.maker-service){padding-left:18px!important;padding-right:18px!important}
  body:not(#bkb) h2:not(:is(nav,footer,.cine-hero,header.hero,.kl-hero-a,.kl-sub-hero,header.phero,header.docs-hero,.page-message,.iq-strip,.portals,.operation-title,.post-cta,.close) *):not(.operation-title){font-size:24px!important}
  body:not(#bkb) .operation-title{font-size:24px!important}
  body:not(#bkb) h3:not(:is(nav,footer,.cine-hero,header.hero,.kl-hero-a,.kl-sub-hero,header.phero,.iq-strip,.portals) *){font-size:18px!important}
}
