:root{--bkh-accent:#2563EB}
/* 세 사이트 공용 헤더 손질 (2026-10-14) — 정본은 이 파일 하나. shared/apply_bk_header.py 가 사이트마다
   맨 앞에 :root{--bkh-accent:사이트 색} 한 줄을 붙여 <사이트>/bk-header.css 로 복사한다.

   PC(721px 이상) — 틀(높이 68·글자·색 버튼)은 그대로(사장님 10/14 "PC 는 지금으로 문제 없음"). 10/14 PC 재평가 손질:
     · 헤더 내용 폭 = 바닥글과 같은 1110px(사이트마다 1000·1060·1180 으로 제각각이었다)
     · 지금 페이지 = 진한 글자 + 사이트 색 밑줄 2px(키프리는 표시가 안 보였다)
     · 키프리: 로고 그림자 제거 · 「문의하기」 글자를 메뉴와 같게 · 메뉴 세로줄을 모든 항목 사이에 같게
     · 구매·주문 화면(header.site-header)을 일반 페이지 헤더와 같은 모양으로 — 들어가면 헤더가 통째로 바뀌던 것
   휴대폰(720px 이하) — 한 줄 56px, 처음 온 사람이 지금 페이지를 먼저 보게:
     · 로고 | 건너편 사이트 ↗ (.bkh-cross) ······ ☰   (구매·주문 화면도 같음)
       KEY-LINK ↔ KEY-FREE 두 사이트 사이 이동만 늘 보이게, 사이트 안 이동(캠프 가드 포함)은 ☰ 목록.
       ☠TECH BRICK 은 따로 — 두 사이트와 서로 잇지 않는다(성격이 다른 앱, 10/13·10/14).
     · ☰ 목록 = 그 사이트 메뉴(건너편 사이트 링크 .bkh-dup 은 뺌) + 문의하기 + 맨 아래 구매하기 버튼. 열면 ✕, 뒤는 어둡게(.bkh-dim)
   .bkh-m-only = 휴대폰 ☰ 목록에만 보이는 사본 · .bkh-st = 구매·주문 화면 ☰(bk-header.js 가 연다).
   body:not(#bkh) 는 id 한 칸만큼 우선순위를 올려 각 사이트 bundle·shop·design-v5·design-refresh 의 !important 규칙을 이긴다. */

body:not(#bkh) nav.nav a.logo, body:not(#bkh) nav.nav a.logo *{text-shadow:none!important}
.bkh-dim{position:fixed;inset:0;z-index:999;background:rgba(21,27,35,.55)}
.bkh-dim[hidden]{display:none}

@media (min-width:721px){
  /* 휴대폰 전용 — PC 에서는 숨김. ☠미디어쿼리 밖에 두면 :is(.nav-toggle.bkh-st) 의 높은 우선순위가 휴대폰 규칙까지 이겨
     건너편 링크·☰ 이 휴대폰에서도 사라진다(10/14 로컬에서 겪음) */
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) :is(.bkh-cross, .bkh-m-only, .nav-toggle.bkh-st){display:none!important}

  /* 폭 — 바닥글(.bkfa-in 1110px)과 같은 줄에 */
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header){box-sizing:border-box!important;padding-left:24px!important;padding-right:24px!important}
  body:not(#bkh) :is(nav.nav, nav.top) .inner, body:not(#bkh) header.site-header .header-inner{max-width:1110px!important;width:auto!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box!important}

  /* 키프리 — 문의하기 글자 · 세로줄 · 지금 페이지 밑줄 */
  body:not(#bkh) nav.nav .acts a.iq-nav{font-size:13.5px!important;font-weight:700!important;color:#1B2A3E!important;letter-spacing:-.03em!important;line-height:22px!important}
  /* 키링크(건너편 사이트)는 문의하기 다음 — HOME · 키프리 · 캠프 가드 · 문의하기 · 키링크 (2026-10-25 사장님) */
  body:not(#bkh) nav.nav .acts a.bkh-dup{position:relative!important;margin-left:14px!important;padding:8px 14px 8px 15px!important;font-size:13.5px!important;font-weight:700!important;color:#1B2A3E!important;letter-spacing:-.03em!important;line-height:22px!important;text-decoration:none!important}
  body:not(#bkh) nav.nav .acts a.bkh-dup::before{content:""!important;position:absolute!important;left:0!important;top:50%!important;height:1em!important;border-left:1px solid #CBD5E1!important;transform:translateY(-50%)!important}
  body:not(#bkh) nav.nav .menu a{position:relative!important;border-left:0!important;background:none!important}
  body:not(#bkh) nav.nav .menu a::before{content:none!important}
  body:not(#bkh) nav.nav .menu a:not(:first-child)::before{content:""!important;display:block!important;position:absolute!important;left:0!important;top:50%!important;height:1em!important;border-left:1px solid #CBD5E1!important;transform:translateY(-50%)!important;pointer-events:none!important}
  body:not(#bkh) nav.nav .menu a[aria-current="page"]::after{content:""!important;position:absolute!important;left:15px!important;right:15px!important;bottom:2px!important;height:2px!important;background:var(--bkh-accent)!important}

  /* 키링크·테크브릭 — 지금 페이지 밑줄 */
  body:not(#bkh) nav.top .links a:is(.on, [aria-current="page"]):not(.buy){position:relative!important;color:#1A1A1A!important}
  body:not(#bkh) nav.top .links a:is(.on, [aria-current="page"]):not(.buy)::after{content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:-8px!important;height:2px!important;background:var(--bkh-accent)!important}

  /* 구매·주문 화면 헤더 — 키링크·테크브릭 일반 헤더(nav.top)와 같은 모양 */
  body:not(#bkh) header.site-header{position:sticky!important;top:0!important;z-index:50!important;height:68px!important;background:rgba(255,255,255,.92)!important;color:#151B23!important;border-bottom:0!important;box-shadow:0 11px 8px -10px rgba(51,51,51,.12)!important}
  body:not(#bkh) header.site-header .header-inner{height:68px!important;min-height:0!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:0!important}
  body:not(#bkh) header.site-header a.brand{display:flex!important;align-items:center!important;gap:8px!important;margin:0 auto 0 0!important;text-decoration:none!important;font-family:Montserrat,Pretendard,-apple-system,sans-serif!important;font-size:14px!important;font-weight:700!important;color:#5B6068!important;letter-spacing:-.03em!important;white-space:nowrap!important}
  body:not(#bkh) header.site-header .brand .mark{display:inline-flex!important;align-items:stretch!important;gap:7px!important;margin:0 2px 0 0!important;font-size:19px!important;font-weight:700!important;letter-spacing:.07em!important;line-height:26.6px!important}
  body:not(#bkh) header.site-header .brand .mark b{background:#27509B!important;color:#FFFFFF!important;padding:3px 10px 4px 11px!important;font-weight:inherit!important}
  body:not(#bkh) header.site-header .brand .mark span{color:#27509B!important;padding:3px 0 4px!important;font-weight:inherit!important}
  body:not(#bkh) header.site-header .brand .tag{font-family:Pretendard,-apple-system,sans-serif!important;font-size:14px!important;font-weight:700!important;color:#5B6068!important;opacity:1!important}
  body[data-inquiry-site="techbrick"]:not(#bkh) header.site-header .brand .mark{font-weight:900!important;letter-spacing:.06em!important}
  body[data-inquiry-site="techbrick"]:not(#bkh) header.site-header .brand .mark b{background:#E4501E!important}
  body[data-inquiry-site="techbrick"]:not(#bkh) header.site-header .brand .mark span{color:#1A1A1A!important}
  body:not(#bkh) header.site-header .site-menu{display:flex!important;align-items:center!important;gap:18px!important;margin:0!important;padding:0!important;overflow:visible!important}
  body:not(#bkh) header.site-header .site-menu a{position:relative!important;font-size:14px!important;font-weight:600!important;color:#5B6068!important;letter-spacing:-.03em!important;line-height:24.5px!important;padding:0!important;opacity:1!important;box-shadow:none!important;text-decoration:none!important;white-space:nowrap!important;background:none!important}
  body:not(#bkh) header.site-header .site-menu a:hover{color:#1A1A1A!important}
  body:not(#bkh) header.site-header .site-menu a.buy{display:inline-flex!important;align-items:center!important;height:38px!important;padding:0 16px!important;background:var(--bkh-accent)!important;color:#FFFFFF!important;font-weight:700!important}
  body:not(#bkh) header.site-header .site-menu a.buy:hover{filter:brightness(.92)}

  /* 구매·주문 화면 헤더 — 키프리는 키프리 일반 헤더(nav.nav)와 같은 모양 */
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header{background:#FFFFFF!important;box-shadow:0 1px 8px rgba(20,35,52,.1)!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header a.brand{font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif!important;font-size:16px!important;font-weight:900!important;gap:0!important;letter-spacing:-.03em!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .kf{color:#1B2A3E!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .x{color:#7C8999!important;font-weight:300!important;margin:0 7px!important;opacity:1!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .cg{color:#244F95!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu{gap:0!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a{font-size:13.5px!important;font-weight:700!important;color:#1B2A3E!important;line-height:23.6px!important;padding:8px 15px!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a:not(:first-child):not(.iq-nav):not(.buy)::before{content:"";position:absolute;left:0;top:50%;height:1em;border-left:1px solid #CBD5E1;transform:translateY(-50%)}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a.iq-nav{padding:8px 0!important;margin-left:10px!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a.buy{height:auto!important;padding:8px 15px!important;margin-left:8px!important;color:#FFFFFF!important}
}

/* 좁은 PC·태블릿(721~1000px) — 메뉴가 8개인 키링크·4+2 개인 키프리가 넘치거나 세 줄로 접히던 것(10/14 측정) → 한 줄 유지 */
@media (min-width:721px) and (max-width:1000px){
  body:not(#bkh) :is(nav.top .links, header.site-header .site-menu){flex-wrap:nowrap!important;gap:12px!important}
  body:not(#bkh) :is(nav.top .links, header.site-header .site-menu) a{font-size:13px!important}
  body:not(#bkh) :is(nav.top, header.site-header) a.buy{padding:0 12px!important}
  body:not(#bkh) nav.top a.brand{font-size:0!important}                          /* 「리모컨 솔루션」 글자만 숨김(KEY LINK 상자는 그대로) */
  body:not(#bkh) header.site-header .brand .tag{display:none!important}
  body:not(#bkh) nav.nav .menu a, body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a:not(.iq-nav){padding:8px 9px!important;font-size:13px!important}
  body:not(#bkh) nav.nav .menu a[aria-current="page"]::after{left:9px!important;right:9px!important}
  body:not(#bkh) nav.nav .acts{gap:6px!important}
  body:not(#bkh) nav.nav .acts a, body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a.iq-nav{font-size:13px!important}
  body:not(#bkh) nav.nav .acts a.buy{padding:8px 11px!important}
  body:not(#bkh) :is(nav.top .links, header.site-header .site-menu) a{white-space:nowrap!important}
}
@media (min-width:721px) and (max-width:800px){
  body:not(#bkh) :is(nav.top .links, header.site-header .site-menu){gap:9px!important}
  body:not(#bkh) :is(nav.top, header.site-header) a.buy{padding:0 10px!important}
  body:not(#bkh) nav.top a.brand .l, body:not(#bkh) header.site-header .brand .mark{font-size:17px!important}
  body:not(#bkh) nav.nav .menu a, body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a:not(.iq-nav){padding:8px 7px!important}
  body:not(#bkh) nav.nav .menu a[aria-current="page"]::after{left:7px!important;right:7px!important}
}

@media (max-width:720px){
  /* 한 줄 — 로고 | 건너편 사이트 ↗ ······ ☰ */
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header){height:auto!important;min-height:0!important;padding:0!important;background:#FFFFFF!important;border-bottom:1px solid #E3E7EC!important;box-shadow:none!important;z-index:1000!important}
  body:not(#bkh) header.site-header{position:sticky!important;top:0!important}
  body:not(#bkh) :is(nav.nav, nav.top) .inner, body:not(#bkh) header.site-header .header-inner{height:56px!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0 6px 0 18px!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;position:relative!important;box-sizing:border-box!important}
  body:not(#bkh) nav.nav a.logo, body:not(#bkh) :is(nav.top, header.site-header) a.brand{order:0;display:flex!important;align-items:center!important;height:56px!important;margin:0 auto 0 0!important;padding:0!important;flex:0 0 auto!important;text-decoration:none!important;white-space:nowrap!important}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header):has(.bkh-cross) :is(a.logo, a.brand){margin-right:0!important}
  body:not(#bkh) nav.nav a.logo .home-m{display:none!important}
  body:not(#bkh) nav.nav a.logo{font-size:15px!important;letter-spacing:-.01em!important}   /* 10/14 사장님 "혼자 커도 이상함" — 17 → 15px(키링크 로고·건너편 링크와 무게 맞춤) */
  body:not(#bkh) nav.top a.brand{font-size:0!important;gap:0!important}             /* 「리모컨 솔루션」 글자(태그 없는 글자)만 숨김 — KEY LINK 상자는 .l 이 17px 를 따로 갖고 있다 */
  body:not(#bkh) header.site-header .brand .tag{display:none!important}
  body:not(#bkh) header.site-header .brand .mark{font-size:17px!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header a.brand{font-family:Pretendard,-apple-system,sans-serif!important;font-size:15px!important;font-weight:900!important;letter-spacing:-.01em!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .kf{color:#1B2A3E!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .x{color:#7C8999!important;font-weight:300!important;margin:0 6px!important;opacity:1!important}
  body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .brand .cg{color:#244F95!important}
  body:not(#bkh) nav.nav .acts{order:2;display:flex!important;align-items:center!important;height:56px!important;margin:0!important;padding:0!important;gap:0!important;background:none!important;border:0!important;width:auto!important}
  body:not(#bkh) nav.nav .acts > a{display:none!important}
  body:not(#bkh) :is(nav.top, header.site-header) .nav-toggle{order:2}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) .nav-toggle{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:44px!important;height:44px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;cursor:pointer;position:static!important;flex:0 0 auto!important}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) .nav-toggle span{display:block!important;width:20px!important;height:2px!important;margin:0!important;background:#1A1A1A!important;border-radius:0!important;transform:none!important;opacity:1!important;position:static!important;transition:transform .18s ease, opacity .12s ease}
  /* 열린 동안은 ☰ → ✕ (닫는 길이 덮개만이 아니게) — 선 2px + 간격 4px 이라 6px 씩 모은다 */
  body:not(#bkh) :is(nav.nav.open, nav.top.nav-open, header.site-header.nav-open) .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  body:not(#bkh) :is(nav.nav.open, nav.top.nav-open, header.site-header.nav-open) .nav-toggle span:nth-child(2){opacity:0!important}
  body:not(#bkh) :is(nav.nav.open, nav.top.nav-open, header.site-header.nav-open) .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

  /* 건너편 사이트 링크 — 로고 바로 옆, 옅은 세로줄 뒤 */
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) a.bkh-cross{order:1;display:inline-flex!important;align-items:center!important;gap:4px!important;height:44px!important;margin:0 auto 0 12px!important;padding:0 8px 0 13px!important;position:relative!important;border:0!important;background:none!important;color:#1B2A3E!important;font-family:Pretendard,-apple-system,sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:normal!important;text-decoration:none!important;white-space:nowrap!important;flex:0 0 auto!important}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) a.bkh-cross::before{content:""!important;position:absolute!important;left:0!important;top:50%!important;height:16px!important;border-left:1px solid #D5DAE1!important;transform:translateY(-50%)!important}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) a.bkh-cross::after{content:""!important;width:11px;height:11px;flex:0 0 11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none' stroke='%235B6068' stroke-width='1.6'%3E%3Cpath d='M3 1h7v7M10 1L1 10'/%3E%3C/svg%3E") no-repeat center/contain}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) a.bkh-cross:active{background:#F4F6F9!important}

  /* ☰ 목록 — 헤더 바로 아래 */
  body:not(#bkh) nav.nav .menu, body:not(#bkh) nav.top .links, body:not(#bkh) header.site-header .site-menu{order:3;display:none!important}
  body:not(#bkh) nav.nav.open .menu, body:not(#bkh) nav.top.nav-open .links, body:not(#bkh) header.site-header.nav-open .site-menu{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;position:absolute!important;top:100%!important;left:0!important;right:0!important;width:auto!important;height:auto!important;z-index:60!important;margin:0!important;background:#FFFFFF!important;padding:4px 18px 16px!important;border:0!important;border-top:1px solid #E3E7EC!important;border-bottom:1px solid #E3E7EC!important;box-shadow:0 14px 24px rgba(21,27,35,.12)!important;max-height:calc(100vh - 100px)!important;overflow-y:auto!important;white-space:normal!important}
  body:not(#bkh) nav.nav.open .menu a, body:not(#bkh) nav.top.nav-open .links a, body:not(#bkh) header.site-header.nav-open .site-menu a{display:flex!important;align-items:center!important;height:52px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-bottom:1px solid #F0F2F5!important;border-radius:0!important;background:none!important;box-shadow:none!important;opacity:1!important;color:#1A1A1A!important;font-size:16px!important;font-weight:600!important;letter-spacing:normal!important;text-align:left!important;text-decoration:none!important;white-space:nowrap!important}
  body:not(#bkh) :is(nav.nav .menu, nav.top .links, header.site-header .site-menu) a::before, body:not(#bkh) :is(nav.nav .menu, nav.top .links, header.site-header .site-menu) a::after{content:none!important}
  body:not(#bkh) nav.nav .menu a[href$="index.html"]:first-child, body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header .site-menu a:first-child{display:none!important}
  body:not(#bkh) nav.nav.open .menu a.bkh-dup, body:not(#bkh) nav.top.nav-open .links a.bkh-dup, body:not(#bkh) header.site-header.nav-open .site-menu a.bkh-dup{display:none!important}
  body:not(#bkh) nav.nav.open .menu a[aria-current="page"], body:not(#bkh) nav.top.nav-open .links a:is([aria-current="page"], .on){color:var(--bkh-accent)!important;font-weight:700!important}
  body:not(#bkh) nav.nav.open .menu a.buy, body:not(#bkh) nav.top.nav-open .links a.buy, body:not(#bkh) header.site-header.nav-open .site-menu a.buy{justify-content:center!important;height:48px!important;margin-top:12px!important;border:0!important;background:var(--bkh-accent)!important;color:#FFFFFF!important;font-weight:700!important}
}

/* 좁은 폰(360px 대) — 키프리 홈 로고 「KEY-FREE × 캠프 가드」 와 KEY-LINK ↗ · ☰ 가 한 줄에 여유 있게 */
@media (max-width:389px){
  body:not(#bkh) nav.nav a.logo, body[data-inquiry-site="keyfree"]:not(#bkh) header.site-header a.brand{font-size:14px!important}
  body:not(#bkh) :is(nav.nav, nav.top, header.site-header) a.bkh-cross{font-size:13px!important;margin-left:8px!important;padding:0 6px 0 9px!important}
}