/* 비앤비바이오 — 사이트 스타일
 * 배치 · 여백 · 움직임: daontheme pro13 을 참고해 새로 작성(코드 · 이미지 · 문구 미사용)
 * 색 · 글꼴 · 가독성: 홈페이지 작업기획안 2차 (Deep Black · Royal Navy · Signature Gold 5% 이하, Pretendard, 본문 16px 이상)
 */
:root {
  --black: #0A0A0C;
  --navy: #0E1B33;
  --navy-2: #172A4D;
  --gold: #C9A227;
  --gold-d: #7A5E16;          /* 밝은 배경 위 금색 글자 (대비 4.5:1 이상) */
  --ink: #1B1F27;
  --ink-2: #4A505B;
  --grey: #8A8F98;
  --off: #F5F3EE;
  --soft: #F7F7F5;
  --line: #E4E1D9;
  --white: #FFFFFF;
  --gut: 12%;                /* 좌 · 우 여백 12% (고객 지정 2026-09-29) */
  --maxw: none;
  --head-h: 88px;
  --fs: 18px;                /* 본문 기본 18px · 최소 16px (고객 지정) */
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.lang-jp { --font: "Pretendard Variable", Pretendard, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; }
.lang-cn { --font: "Pretendard Variable", Pretendard, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.bnb { margin: 0; font-family: var(--font); font-size: var(--fs); line-height: 1.75; color: var(--ink); background: var(--white); letter-spacing: -0.01em; }
.bnb.lang-kr, .bnb.lang-en { word-break: keep-all; overflow-wrap: break-word; }
.bnb.lang-jp, .bnb.lang-cn { word-break: normal; line-break: strict; overflow-wrap: break-word; }
.bnb img { max-width: 100%; height: auto; display: block; }
.bnb a { color: inherit; text-decoration: none; }
.bnb p { margin: 0 0 1em; }
.bnb figure { margin: 0; }
.bnb-skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--black); padding: 10px 16px; }
.bnb-skip:focus { left: 12px; top: 12px; }
.bnb :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bnb-ico { width: 1.15em; height: 1.15em; flex: none; }
.bnb-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.bnb-narrow { max-width: none; margin-left: auto; margin-right: auto; }   /* 좌 · 우 12% 여백만 남기고 사용 (고객 지정) */
.bnb-center { text-align: center; }
.bnb-mt { margin-top: 64px !important; }

/* ---------- 타이포 ---------- */
.bnb-eyebrow { font-size: 16px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-d); margin: 0 0 12px !important; }
.bnb-h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.3; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 18px; color: var(--ink); }
.bnb-h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; font-weight: 700; margin: 0 0 20px; letter-spacing: -0.02em; }
.bnb-h4 { font-size: 19px; line-height: 1.5; font-weight: 700; margin: 28px 0 12px; }
.bnb-lead { font-size: clamp(18px, 1.35vw, 20px); color: var(--ink-2); line-height: 1.8; }
.bnb-small { font-size: 16px; color: var(--ink-2); margin-top: 12px; }
.bnb-sec-head { margin-bottom: 48px; max-width: 880px; }
.bnb-sec-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.bnb-sec-head .bnb-lead { margin: 0; }

/* ---------- 버튼 ---------- */
.bnb-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 26px; font-size: 17px; font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background .25s, color .25s, border-color .25s; font-family: inherit; line-height: 1.3; }
.bnb-btn--gold { background: var(--gold); color: var(--black) !important; }
.bnb-btn--gold:hover { background: #d8b13c; }
.bnb-btn--navy { background: var(--navy); color: #fff !important; }
.bnb-btn--navy:hover { background: var(--navy-2); }
.bnb-btn--line { border-color: rgba(255,255,255,.75); color: #fff !important; }
.bnb-btn--line:hover { background: #fff; color: var(--black) !important; }
.bnb-btn--line-d { border-color: var(--ink); color: var(--ink) !important; }
.bnb-btn--line-d:hover { background: var(--ink); color: #fff !important; }
.bnb-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy); border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.bnb-more .bnb-ico { transition: transform .25s; }
.bnb-more:hover .bnb-ico { transform: translateX(4px); }

/* ---------- 헤더 (홈 첫 화면은 투명, 스크롤 · 서브는 네이비) ---------- */
.bnb-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--head-h); transition: background .35s var(--ease), box-shadow .35s; color: #fff; }
.is-sub .bnb-header, .bnb-header.is-scrolled, .bnb-header.is-open { background: var(--navy); box-shadow: 0 2px 20px rgba(0,0,0,.18); }
.bnb-header-in { height: 100%; display: flex; align-items: center; gap: 24px; padding: 0 var(--gut); max-width: none; }
.bnb-brand { flex: none; display: flex; align-items: center; }
.bnb-brand .bnb-brand-logo { height: 54px; width: auto; image-rendering: -webkit-optimize-contrast; }
.bnb-gnb { flex: 1; display: flex; justify-content: center; }
.bnb-gnb > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 3vw, 56px); }
.bnb-gnb > ul > li { position: relative; }
.bnb-gnb > ul > li > a { display: flex; align-items: center; height: var(--head-h); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; position: relative; white-space: nowrap; }
.bnb-gnb > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.bnb-gnb > ul > li:hover > a::after, .bnb-gnb > ul > li.is-on > a::after { transform: scaleX(1); }
.bnb-drop { list-style: none; margin: 0; padding: 14px 0; position: absolute; top: calc(var(--head-h) - 8px); left: 50%; min-width: 230px; transform: translate(-50%, 8px); background: #fff; color: var(--ink); box-shadow: 0 16px 40px rgba(14,27,51,.18); border-top: 3px solid var(--gold); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; }
.bnb-gnb > ul > li:hover .bnb-drop, .bnb-gnb > ul > li:focus-within .bnb-drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.bnb-drop a { display: block; padding: 9px 22px; font-size: 16px; white-space: nowrap; }
.bnb-drop a:hover { background: var(--off); color: var(--navy); }
.bnb-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.bnb-lang { position: relative; }
.bnb-lang-btn { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; border-radius: 22px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.bnb-lang-list { list-style: none; margin: 0; padding: 8px 0; position: absolute; right: 0; top: 52px; min-width: 150px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.18); display: none; }
.bnb-lang.is-open .bnb-lang-list { display: block; }
.bnb-lang-list a { display: block; padding: 8px 18px; color: var(--ink); font-size: 16px; }
.bnb-lang-list a.is-on { color: var(--gold-d); font-weight: 700; }
.bnb-burger { width: 48px; height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; }
.bnb-burger span { width: 26px; height: 2px; background: #fff; transition: transform .3s; }
.bnb-burger span:nth-child(2) { width: 18px; margin-left: 8px; }

/* 전체 메뉴 (드로어) */
.bnb-drawer { position: fixed; inset: 0; z-index: 200; }
.bnb-drawer[hidden] { display: none; }
.bnb-drawer-dim { position: absolute; inset: 0; background: rgba(10,10,12,.55); }
.bnb-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--navy); color: #fff; overflow-y: auto; padding: 24px 32px 40px; animation: bnbSlide .35s var(--ease); }
@keyframes bnbSlide { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.bnb-drawer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.bnb-drawer-top img { height: 40px; width: auto; }
.bnb-drawer-x { width: 44px; height: 44px; position: relative; background: transparent; border: 0; cursor: pointer; }
.bnb-drawer-x span { position: absolute; left: 10px; right: 10px; top: 21px; height: 2px; background: #fff; }
.bnb-drawer-x span:first-child { transform: rotate(45deg); } .bnb-drawer-x span:last-child { transform: rotate(-45deg); }
.bnb-drawer-g { border-bottom: 1px solid rgba(255,255,255,.12); padding: 18px 0; }
.bnb-drawer-g p { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.bnb-drawer-g ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.bnb-drawer-g a { display: block; padding: 5px 0; font-size: 17px; color: rgba(255,255,255,.92); }
.bnb-drawer-lang { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 16px; }
.bnb-drawer-lang a { padding: 6px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 18px; font-size: 16px; }
.bnb-drawer-lang a.is-on { background: var(--gold); color: var(--black); border-color: var(--gold); }
.bnb-drawer-cs a { display: inline-flex; gap: 8px; align-items: center; font-size: 20px; font-weight: 700; }

/* ---------- 메인 : 히어로 슬라이드 ---------- */
.bnb-main { display: block; }
.is-sub .bnb-main { padding-top: var(--head-h); }
.bnb-hero { position: relative; height: 100vh; min-height: 640px; max-height: 1080px; overflow: hidden; background: var(--black); color: #fff; }
.bnb-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.1s var(--ease), visibility 1.1s; display: flex; align-items: center; }
.bnb-hero-slide::before { content: ""; position: absolute; inset: 0; background: var(--img) center/cover no-repeat; transform: scale(1.12); transition: transform 4.2s linear; }
.bnb-hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.82) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.15) 100%); }
.bnb-hero-slide.is-on { opacity: 1; visibility: visible; }
.bnb-hero-slide.is-on::before { transform: scale(1); }
.bnb-hero-slide.has-side::before { background: radial-gradient(ellipse at 72% 50%, var(--navy-2) 0%, var(--navy) 55%, var(--black) 100%); }
.bnb-hero-side { position: absolute; right: 12%; top: 50%; transform: translateY(-46%); z-index: 1; height: 72%; }
.bnb-hero-side img { height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.bnb-hero-side figcaption { position: absolute; right: 0; bottom: -34px; font-size: 16px; color: rgba(255,255,255,.8); }
.bnb-hero-tx { position: relative; z-index: 2; padding-top: 40px; }
.bnb-hero-eyebrow { font-size: 16px; font-weight: 700; letter-spacing: .24em; color: var(--gold); margin-bottom: 18px !important; }
.bnb-hero-title { font-size: clamp(38px, 4.4vw, 64px); line-height: 1.22; font-weight: 700; letter-spacing: -0.035em; max-width: 14em; margin: 0 0 20px !important; }
.bnb-hero-lead { font-size: clamp(18px, 1.4vw, 21px); color: rgba(255,255,255,.9); max-width: 34em; margin-bottom: 34px !important; }
.bnb-hero-slide .bnb-hero-tx > * { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.bnb-hero-slide.is-on .bnb-hero-tx > * { opacity: 1; transform: none; }
.bnb-hero-slide.is-on .bnb-hero-tx > *:nth-child(2) { transition-delay: .15s; }
.bnb-hero-slide.is-on .bnb-hero-tx > *:nth-child(3) { transition-delay: .3s; }
.bnb-hero-slide.is-on .bnb-hero-tx > *:nth-child(4) { transition-delay: .45s; }
.bnb-hero-ctrl { position: absolute; z-index: 3; left: var(--gut); bottom: 56px; display: flex; gap: 10px; }
.bnb-hero-ctrl button { background: transparent; border: 0; padding: 12px 0 0; width: 72px; text-align: left; color: rgba(255,255,255,.62); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; position: relative; border-top: 2px solid rgba(255,255,255,.3); }
.bnb-hero-ctrl button::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--gold); }
.bnb-hero-ctrl button.is-on { color: #fff; }
.bnb-hero-ctrl button.is-on::before { width: 100%; transition: width 6.5s linear; }
.bnb-hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 36px; width: 28px; height: 46px; border: 2px solid rgba(255,255,255,.7); border-radius: 16px; transform: translateX(-50%); }
.bnb-hero-scroll i { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: bnbScroll 1.8s infinite; }
@keyframes bnbScroll { 0% { opacity: 1; transform: none; } 70% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }

/* ---------- 메인 : Welcome ---------- */
.bnb-welcome { padding: 140px 0 120px; background: linear-gradient(160deg, var(--white) 0%, var(--white) 55%, var(--off) 55%, var(--off) 100%); }
.bnb-welcome-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.bnb-welcome-lead { font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; color: var(--ink); line-height: 1.7; }
.bnb-welcome-small { margin-top: 48px; max-width: 420px; }
.bnb-welcome-small img, .bnb-welcome-big img { width: 100%; object-fit: cover; }
.bnb-welcome-big { position: relative; margin-top: 40px; }
.bnb-welcome-big img { aspect-ratio: 16/10; box-shadow: 0 30px 60px rgba(14,27,51,.16); }
.bnb-welcome-big figcaption { position: absolute; left: -24px; bottom: -24px; background: var(--navy); color: #fff; padding: 16px 24px; font-size: 16px; max-width: 80%; }

/* ---------- 메인 : 어두운 띠 + 카드 슬라이더 ---------- */
.bnb-band { position: relative; padding: 110px 0 120px; }
.bnb-band-bg { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: var(--navy); }
.bnb-band .bnb-wrap { position: relative; }
.bnb-band .bnb-sec-head .bnb-h2 { color: #fff; }
.bnb-band .bnb-sec-head .bnb-lead { color: rgba(255,255,255,.82); }
.bnb-band .bnb-eyebrow { color: var(--gold); }
.bnb-slider { overflow: hidden; }
.bnb-slider-track { display: flex; gap: 28px; transition: transform .6s var(--ease); }
.bnb-slider-item { flex: 0 0 calc((100% - 56px) / 3); min-width: 0; }
.bnb-slider-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
.bnb-slider-ctrl button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.bnb-slider-ctrl button:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.bnb-slider-count { font-size: 16px; color: var(--ink-2); min-width: 64px; text-align: center; }
.bnb-slider-count b { color: var(--ink); }

/* 제품 카드 */
.bnb-staged { position: absolute; right: 10px; bottom: 10px; font-style: normal; font-size: 16px; background: rgba(10,10,12,.7); color: #fff; padding: 2px 10px; border-radius: 12px; }

/* ---------- 메인 : 원료 (사진 배경 + 타일) ---------- */

/* ---------- 메인 : 시설 (큰 사진 + 번호 목록) ---------- */

/* ---------- 메인 : 협력 카드 ---------- */

/* ---------- 메인 : 소식 · 상담 · 오시는 길 ---------- */
.bnb-bottom { padding: 90px 0 110px; background: var(--off); border-top: 1px solid var(--line); }
.bnb-bottom-in { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; gap: clamp(28px, 4vw, 64px); }
.bnb-news-tabs { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.bnb-news-tabs button { background: transparent; border: 0; padding: 10px 0; font-family: inherit; font-size: 17px; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bnb-news-tabs button.is-on { color: var(--navy); font-weight: 700; border-color: var(--gold); }
.bnb-news-more { margin-left: auto; font-size: 26px; line-height: 1; color: var(--ink-2); }
.bnb-news-list { list-style: none; margin: 0; padding: 0; display: none; }
.bnb-news-list.is-on { display: block; }
.bnb-news-list li a { display: flex; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.bnb-news-list time { flex: none; width: 64px; text-align: center; font-size: 16px; color: var(--ink-2); line-height: 1.2; }
.bnb-news-list time b { display: block; font-size: 26px; color: var(--navy); }
.bnb-news-list li.is-empty { padding: 30px 0; color: var(--ink-2); }
.bnb-cs-label { font-size: 16px; color: var(--ink-2); margin: 0 !important; }
.bnb-cs-tel { display: block; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; color: var(--navy); letter-spacing: -0.02em; margin: 4px 0 6px; }
.bnb-cs-mail { color: var(--ink-2); }
.bnb-cs-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bnb-loc-map { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 230px; padding: 24px; background: radial-gradient(circle at 80% 20%, rgba(201,162,39,.18), transparent 45%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px), var(--navy); color: #fff; position: relative; }
.bnb-loc-pin { position: absolute; top: 22px; right: 22px; color: var(--gold); } .bnb-loc-pin .bnb-ico { width: 34px; height: 34px; }
.bnb-loc-addr { font-size: 17px; font-weight: 600; }
.bnb-loc-go { font-size: 16px; color: var(--gold); }

/* ---------- 서브 비주얼 · 경로 · 탭 ---------- */
.bnb-sub { position: relative; min-height: 380px; display: flex; align-items: flex-end; color: #fff; background: var(--navy); overflow: hidden; }
.bnb-sub::before { content: ""; position: absolute; inset: 0; background: var(--sub-img) center/cover no-repeat; opacity: .42; transform: scale(1.08); animation: bnbSubZoom 9s ease-out forwards; }
.bnb-sub::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,27,51,.92), rgba(14,27,51,.35)); }
@keyframes bnbSubZoom { to { transform: scale(1); } }
.bnb-sub-in { position: relative; z-index: 1; padding-top: 70px; padding-bottom: 64px; }
.bnb-sub .bnb-eyebrow { color: var(--gold); }
.bnb-sub-title { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.25; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 12px !important; }
.bnb-sub-lead { font-size: 18px; color: rgba(255,255,255,.88); max-width: 46em; margin: 0 !important; }
.bnb-snb { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: var(--head-h); z-index: 50; }
.bnb-snb-in { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.bnb-crumbs { display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink-2); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.bnb-crumbs > * { min-width: 0; overflow-wrap: anywhere; }
.bnb-crumbs a:hover { color: var(--navy); }
.bnb-tabs { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; }
.bnb-tabs a { display: block; padding: 18px 18px; font-size: 16px; font-weight: 600; color: var(--ink-2); border-bottom: 3px solid transparent; }
.bnb-tabs a.is-on, .bnb-tabs a:hover { color: var(--navy); border-color: var(--gold); }

/* ---------- 서브 공통 ---------- */
.bnb-page { background: #fff; }
.bnb-sec { padding: 96px 0; }
.bnb-sec--soft { background: var(--soft); }
.bnb-note { display: flex; gap: 12px; align-items: flex-start; background: var(--off); border-left: 3px solid var(--gold); padding: 18px 22px; color: var(--ink-2); font-size: 16px; margin: 0 0 40px !important; }
.bnb-note .bnb-ico { margin-top: 4px; color: var(--gold-d); }
.bnb-prep { border: 1px dashed #c9c4b6; background: #fbfaf6; padding: 22px 26px; margin: 32px 0; color: var(--ink-2); font-size: 16px; }
.bnb-prep p { margin: 0 0 4px !important; }
.bnb-prep-t { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--ink) !important; font-size: 17px; }
.bnb-prep-x { margin-top: 8px !important; }
.bnb-dl { margin: 0; border-top: 2px solid var(--navy); }
.bnb-dl > div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.bnb-dl dt { font-weight: 700; color: var(--ink); }
.bnb-dl dd { margin: 0; color: var(--ink-2); }
.bnb-dl a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.bnb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bnb-table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 520px; }
.bnb-table th { background: var(--navy); color: #fff; text-align: left; font-weight: 600; padding: 13px 16px; }
.bnb-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bnb-table tbody tr:nth-child(even) td { background: #fafaf8; }
.bnb-table a { color: var(--navy); text-decoration: underline; }
.bnb-list { padding-left: 1.2em; color: var(--ink-2); }
.bnb-list li { margin-bottom: 8px; }
.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 인사말 · 연혁 */
.bnb-greet { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.bnb-greet-img img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.bnb-greet-p { font-size: 17px; line-height: 1.9; margin: 0 0 18px; color: var(--ink-2, #333); }
.bnb-greet-img { position: sticky; top: 110px; }
.bnb-sign { margin-top: 36px !important; text-align: right; font-size: 18px; }
.bnb-sign strong { font-size: 24px; margin-left: 8px; }
.bnb-timeline { list-style: none; margin: 0 0 40px; padding: 0 0 0 28px; border-left: 2px solid var(--line); }
.bnb-timeline li { position: relative; padding: 0 0 36px 24px; }
.bnb-timeline li::before { content: ""; position: absolute; left: -37px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); }
.bnb-timeline time { display: block; font-size: 26px; font-weight: 800; color: var(--navy); }
.bnb-timeline p { font-size: 18px; margin: 4px 0 0 !important; }

/* 시설 */
.bnb-facs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.bnb-fac { border: 1px solid var(--line); background: #fff; display: grid; grid-template-rows: auto 1fr; }
.bnb-fac-img { aspect-ratio: 16/9; background: var(--soft); display: grid; place-items: center; overflow: hidden; }
.bnb-fac-img img { width: 100%; height: 100%; object-fit: cover; }
.bnb-fac-img i .bnb-ico { width: 56px; height: 56px; color: var(--grey); }
.bnb-fac-tx { padding: 26px 28px 30px; }
.bnb-fac-owner { font-size: 16px; font-weight: 700; color: var(--gold-d); margin-bottom: 6px !important; }
.bnb-fac h3 { font-size: 22px; margin: 0 0 8px; }
.bnb-fac-tx > p { color: var(--ink-2); }
.bnb-fac-addr { display: flex; gap: 8px; font-size: 16px; margin: 0 !important; }

/* 오시는 길 */
.bnb-loc-page { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; }
.bnb-map { aspect-ratio: 4/3; background: var(--soft); border: 1px solid var(--line); }
.bnb-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.bnb-map-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }

/* 인증 */
.bnb-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; }
.bnb-cert { border: 1px solid var(--line); background: #fff; }
.bnb-cert-img { display: block; background: var(--soft); padding: 18px; }
.bnb-cert-img img { margin: 0 auto; max-height: 300px; width: auto; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.bnb-cert figcaption { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; color: var(--ink-2); }
.bnb-cert figcaption strong { font-size: 17px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.bnb-cert figcaption small { font-size: 16px; line-height: 1.55; }

/* 제품 상세 */
.bnb-pd-top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.bnb-pd-img { position: relative; background: var(--soft); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); }
.bnb-pd-img img { width: 100%; height: 100%; object-fit: contain; padding: 28px; }
.bnb-pd-img i .bnb-ico { width: 72px; height: 72px; color: var(--grey); }
.bnb-pd-img .bnb-staged { bottom: 14px; right: 14px; }
.bnb-pd-name { font-size: clamp(36px, 3.4vw, 52px); line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.03em; }
.bnb-pd-sub { font-size: 19px; color: var(--gold-d); font-weight: 600; }
.bnb-pd-lead { font-size: 18px; color: var(--ink-2); margin-bottom: 28px !important; }
.bnb-dl--spec > div { grid-template-columns: 160px 1fr; padding: 13px 4px; }
.bnb-dl--spec dd { white-space: pre-line; }
.bnb-pd-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px !important; }
.bnb-ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bnb-ing-grid .bnb-h4 { margin-top: 0; }
.bnb-pd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); justify-content: center; gap: 24px; }
.bnb-pd-gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--soft); padding: 20px; }

/* 선물세트 */
.bnb-gift { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; margin-bottom: 30px; }

/* 협력사 */
.bnb-split { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; margin-bottom: 40px; }
.bnb-split-imgs { display: grid; gap: 18px; }
.bnb-split-imgs img, .bnb-split-one img { width: 100%; object-fit: cover; }
.bnb-split-one { background: var(--soft); padding: 24px; }
.bnb-split .bnb-dl { margin-top: 28px; }

/* FAQ */
.bnb-faq { border-top: 2px solid var(--navy); }
.bnb-faq-i { border-bottom: 1px solid var(--line); }
.bnb-faq-i summary { display: flex; gap: 16px; align-items: center; padding: 22px 8px; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.bnb-faq-i summary::-webkit-details-marker { display: none; }
.bnb-faq-i summary::after { content: "+"; margin-left: auto; font-size: 26px; color: var(--gold-d); transition: transform .3s; }
.bnb-faq-i[open] summary::after { transform: rotate(45deg); }
.bnb-faq-q { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; font-weight: 700; }
.bnb-faq-q.is-a { background: var(--gold); color: var(--black); }
.bnb-faq-a { display: flex; gap: 16px; padding: 0 8px 24px; color: var(--ink-2); }
.bnb-faq-a p { margin: 4px 0 0 !important; }

/* 문의 */
.bnb-contact { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
.bnb-contact:has(> .bnb-narrow) { display: block; }
.bnb-contact-side { background: var(--navy); color: #fff; padding: 36px 34px; }
.bnb-contact-side .bnb-eyebrow { color: var(--gold); }
.bnb-contact-side .bnb-cs-tel { color: #fff; }
.bnb-contact-side a { color: #fff; }
.bnb-contact-side .bnb-list { color: rgba(255,255,255,.88); }
.bnb-contact-side .bnb-prep { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
.bnb-contact-side .bnb-prep-t { color: #fff !important; }
.bnb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.bnb-form label { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 600; }
.bnb-form label b { color: #B3261E; font-weight: 700; font-size: 16px; }
.bnb-form input[type=text], .bnb-form input[type=tel], .bnb-form input[type=email], .bnb-form select, .bnb-form textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #cfcbc0; background: #fff; font-family: inherit; font-size: 17px; color: var(--ink); border-radius: 2px; }
.bnb-form textarea { resize: vertical; }
.bnb-form input:focus, .bnb-form select:focus, .bnb-form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(14,27,51,.12); }
.bnb-form-full { margin-top: 20px; }
.bnb-form-foot { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.bnb-cap { max-width: 460px; }
.bnb-cap input { max-width: 140px; }
.bnb-consent { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 500 !important; }
.bnb-consent input { width: 22px; height: 22px; margin-top: 3px; flex: none; }
.bnb-consent small { display: block; font-size: 16px; color: var(--ink-2); font-weight: 400; margin-top: 4px; }
.bnb-consent a { text-decoration: underline; }
.bnb-form-foot .bnb-btn { align-self: flex-start; }
.bnb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bnb-alert { display: flex; gap: 10px; align-items: center; padding: 16px 20px; margin-bottom: 24px !important; font-weight: 600; }
.bnb-alert.is-ok { background: #EAF4EC; color: #1E5B2E; }
.bnb-alert.is-err { background: #FBEAEA; color: #8A1C1C; }

/* 약관 · 404 */
.bnb-legal h2 { margin-top: 36px; }
.bnb-legal p { color: var(--ink-2); }
.bnb-404 { padding: 160px 0 140px; }
.bnb-404-n { font-size: 110px; font-weight: 800; color: var(--gold-d); line-height: 1; margin-bottom: 16px !important; }

/* ---------- 게시판 영역 (대시보드 게시판을 사이트 안에) ---------- */
.bnb-board-area { padding: 64px 0 96px; }
.bnb-board-area .container { max-width: none; padding: 0; }
.bnb-board-area h1 { font-size: clamp(28px, 2.6vw, 38px); }
.bnb-board-area, .bnb-board-area p, .bnb-board-area td, .bnb-board-area li { font-size: 17px; }
.bnb-board-area small, .bnb-board-area .muted, .bnb-board-area time { font-size: 16px; }

/* ---------- 푸터 ---------- */
.bnb-footer { background: var(--black); color: rgba(255,255,255,.72); font-size: 16px; }
.bnb-foot-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.bnb-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.bnb-foot-nav a { color: rgba(255,255,255,.85); }
.bnb-foot-nav strong { color: var(--gold); font-weight: 700; }
.bnb-sns { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.bnb-foot-in { padding-top: 40px; padding-bottom: 48px; display: grid; grid-template-columns: auto 1fr; gap: 16px 48px; align-items: start; }
.bnb-footer .bnb-foot-logo { height: 54px; width: auto; }
.bnb-foot-info { font-style: normal; display: flex; flex-wrap: wrap; gap: 6px 22px; line-height: 1.7; }
.bnb-foot-info strong { color: #fff; }
.bnb-foot-info a { color: rgba(255,255,255,.88); }
.bnb-copy { grid-column: 2; margin: 8px 0 0 !important; color: rgba(255,255,255,.55); }
.bnb-top { position: fixed; right: 28px; bottom: 28px; z-index: 90; width: 54px; height: 54px; display: grid; place-items: center; background: var(--navy); color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 30px rgba(10,10,12,.28); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s var(--ease), visibility .35s, transform .35s var(--ease), background .35s; }
.bnb-top.is-show { opacity: 1; visibility: visible; transform: none; }
.bnb-top:hover { background: var(--gold); color: var(--black); border-color: var(--gold); }
.bnb-top .bnb-ico { width: 20px; height: 20px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1200px) {
  .bnb-gnb { display: none; }
  .bnb-actions { margin-left: auto; }
          .bnb-bottom-in { grid-template-columns: 1fr 1fr; }
  .bnb-bottom-in .bnb-news { grid-column: 1 / -1; }
  .bnb-hero-side { right: 6%; height: 56%; opacity: .55; }
}
@media (max-width: 900px) {
  :root { --gut: 20px; --head-h: 72px; }
  .bnb-brand .bnb-brand-logo { height: 38px; }
  .bnb-lang-btn span { display: none; }
  .bnb-slider-item { flex-basis: calc((100% - 28px) / 2); }
  .bnb-greet, .bnb-pd-top, .bnb-split, .bnb-gift, .bnb-loc-page, .bnb-contact, .bnb-ing-grid, .bnb-facs { grid-template-columns: 1fr; }
    .bnb-dl > div, .bnb-dl--spec > div { grid-template-columns: 1fr; gap: 2px; }
  .bnb-sec { padding: 64px 0; }
  .bnb-welcome, .bnb-band,       .bnb-tabs { margin-left: 0; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .bnb-tabs a { white-space: nowrap; padding: 14px 14px; }
  .bnb-snb { position: static; }
  .bnb-foot-in { grid-template-columns: 1fr; }
  .bnb-copy { grid-column: 1; }
  .bnb-form-grid { grid-template-columns: 1fr; }
  .bnb-hero-side { display: none; }
}
@media (max-width: 600px) {
  .bnb-slider-item { flex-basis: 100%; }
    .bnb-hero-ctrl { bottom: 96px; }
      .bnb-welcome-big figcaption { position: static; max-width: none; }
  .bnb-sub { min-height: 300px; }
  .bnb-drawer-g ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .bnb-hero-slide::before { transform: none; }
}
/* 제품 상세 — 주의사항 번호 목록 · FAQ 구획선 */
.bnb-ol { margin: 0; padding-left: 1.3em; }
.bnb-ol li { margin: 0 0 6px; }
.bnb-sec--line { border-top: 1px solid var(--line); }
/* 제품 상세 끝 */
/* 메인 보강 — 히어로 버튼 2개 · 제품 3분할 · L27 · 신뢰 근거 · 해외 바이어 배너 (작업기획안 2.2) */
.bnb-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
.bnb-cs-global { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; background: var(--navy); color: #fff !important; }
.bnb-cs-global .bnb-ico { width: 28px; height: 28px; color: var(--gold); }
.bnb-cs-global span { display: flex; flex-direction: column; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); }
.bnb-cs-global strong { color: #fff; font-size: 17px; }
/* 메인 보강 끝 */
/* 협력사 — 마이코바이오 스마트팜 사진 */
.bnb-myco-img { margin: 0 0 32px; }
.bnb-myco-img img { width: 100%; max-height: 460px; object-fit: cover; }
.bnb-myco-img figcaption { font-size: 16px; color: var(--grey); margin-top: 8px; }
/* 협력사 끝 */
/* 표 그리드 — 칸이 표의 최소 폭만큼 늘어나 모바일에서 가로 넘치던 문제 */
.bnb-ing-grid > * { min-width: 0; }
.bnb-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bnb-table--ing, .bnb-table--nutri { min-width: 0; }
/* 표 그리드 끝 */

/* 선물세트 추가 사진 */
.bnb-gift-more { margin-top: 48px; }
.bnb-gift-more img { width: 100%; max-height: 520px; object-fit: cover; }
.bnb-gift-more figcaption { margin-top: 8px; font-size: 16px; color: var(--grey); }
/* 선물세트 추가 사진 끝 */
/* 가독성 — 줄바꿈 · 한 줄 길이 (2026-09-29 고객 요청) */
.bnb h1, .bnb h2, .bnb h3, .bnb h4,
.bnb-h2, .bnb-h3, .bnb-h4, .bnb-hero-title, .bnb-pd-name, .bnb-sub-title { text-wrap: balance; }
.bnb p, .bnb li, .bnb dd, .bnb figcaption { text-wrap: pretty; }
/* 긴 문단은 한 줄이 너무 길어지지 않게 (좌우 12% 여백은 그대로 유지) */
.bnb-lead, .bnb-hero-lead, .bnb-welcome-lead, .bnb-sec-head p, .bnb-pd-lead,
.bnb-greet-p, .bnb-small, .bnb-note, .bnb-faq-a p, .bnb-timeline p { max-width: 62em; }
.bnb-narrow p, .bnb-narrow li, .bnb-narrow dd { max-width: 62em; }
.bnb-dl dd, .bnb-fac-tx p, .bnb-cat-tx > span, /* 표 안 글자는 줄바꿈으로 잘리지 않게 */
.bnb-table td, .bnb-table th { overflow-wrap: anywhere; }
/* 가독성 끝 */
/* 소식 게시판 화면 — 가장 작은 글자도 16px 이상 (고객 지정) */
body.bnb .wz-kicker, body.bnb .wz-hero-badge, body.bnb .wz-section-title, body.bnb .wz-dot,
body.bnb .wz-meta, body.bnb .wz-card-meta, body.bnb .wz-pick-meta, body.bnb .wz-hero-meta,
body.bnb .board-table th, body.bnb .board-table td, body.bnb .post-list time,
body.bnb .badge, body.bnb .photo-sub, body.bnb .photo-title, body.bnb .link,
body.bnb .btn, body.bnb .btn.small, body.bnb .pager a, body.bnb .pager span,
body.bnb .comment-form input, body.bnb .comment-form textarea, body.bnb .comment-form button,
body.bnb .post-meta, body.bnb .post-nav a, body.bnb .search-box input, body.bnb .search-box button { font-size: 16px; }
body.bnb .wz-hero-badge, body.bnb .badge { padding: 3px 10px; }
body.bnb .wz-meta-small, body.bnb .wz-meta-small *, body.bnb .search input, body.bnb .search button,
body.bnb .wz-search input, body.bnb .wz-search button, body.bnb .crumbs, body.bnb .crumbs *,
body.bnb .prev-next a, body.bnb button, body.bnb input, body.bnb select, body.bnb textarea { font-size: 16px; }
/* 소식 게시판 글자 크기 끝 */

/* 히어로 영상 슬라이드 (고객 지정 2026-09-29) */
.bnb-hero-video { position: absolute; inset: 0; overflow: hidden; background: var(--black); }
.bnb-hero-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.45); width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; border: 0; pointer-events: none; }  /* 1.45배 — 유튜브 제목 · 로고 · 컨트롤을 화면 밖으로 */
.bnb-hero-slide.has-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.62) 45%, rgba(10,10,12,.35) 100%); z-index: 1; }
.bnb-hero-slide.has-video .bnb-hero-tx { position: relative; z-index: 2; }
/* 히어로 영상 끝 */

/* ---------- About BNBBIO (재디자인 2026-09-29) ---------- */
.bnb-about { position: relative; padding: 140px 0 130px; background: linear-gradient(180deg, #fff 0%, #fff 56%, var(--off) 56%, var(--off) 100%); overflow: hidden; }
.bnb-about-in { display: grid; grid-template-columns: 5.6fr 6.4fr; gap: clamp(40px, 5vw, 96px); align-items: start; position: relative; z-index: 1; }
.bnb-about-tag { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-d); margin: 0 0 22px !important; }
.bnb-about-tag::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold) 0%, rgba(201,162,39,0) 100%); }
.bnb-about-tag span { color: var(--grey); font-weight: 600; }
.bnb-about-h { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.28; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 24px; color: var(--ink); text-wrap: balance; }
.bnb-about-h em { font-style: normal; position: relative; color: var(--navy); white-space: nowrap; }
.bnb-about-h em::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: .12em; height: .34em; background: rgba(201,162,39,.32); z-index: -1; }
.bnb-about-lead { font-size: clamp(18px, 1.3vw, 20px); line-height: 1.85; color: var(--ink-2); max-width: 34em; margin-bottom: 40px !important; }
.bnb-about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 40px; background: var(--line); border: 1px solid var(--line); }
.bnb-about-stats > div { background: #fff; padding: 22px 24px; transition: background .3s, transform .3s; }
.bnb-about-stats > div:hover { background: var(--navy); transform: translateY(-2px); }
.bnb-about-stats dt { font-size: 16px; font-weight: 700; color: var(--gold-d); letter-spacing: .02em; margin-bottom: 6px; }
.bnb-about-stats dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.bnb-about-stats dd strong { font-size: clamp(30px, 2.6vw, 40px); font-weight: 800; line-height: 1.05; color: var(--navy); letter-spacing: -0.03em; }
.bnb-about-stats dd span { font-size: 16px; color: var(--ink-2); line-height: 1.5; }
.bnb-about-stats > div:hover dt { color: var(--gold); }
.bnb-about-stats > div:hover dd strong { color: #fff; }
.bnb-about-stats > div:hover dd span { color: rgba(255,255,255,.78); }
.bnb-about-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin: 0 !important; }
.bnb-about-main { position: relative; }
.bnb-about-main::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.bnb-about-pin { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--navy); color: var(--gold); }
.bnb-about-pin .bnb-ico { width: 18px; height: 18px; }
.bnb-about-sub img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bnb-about-sub figcaption { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--navy); }
@media (max-width: 1200px) {
  .bnb-about-in { grid-template-columns: 1fr; }
  .bnb-about-visual { padding-bottom: 96px; }
  .bnb-about-sub { left: 0; width: 40%; }
  .bnb-about::before { display: none; }
}
@media (max-width: 700px) {
  .bnb-about { padding: 80px 0; background: linear-gradient(180deg, #fff 0%, #fff 46%, var(--off) 46%, var(--off) 100%); }
  .bnb-about-stats { grid-template-columns: 1fr; }
  .bnb-about-visual { padding-bottom: 0; }
  .bnb-about-sub { position: static; width: 100%; margin-top: 16px; box-shadow: none; padding: 0; }
  .bnb-about-main { display: flex; flex-direction: column; }
  .bnb-about-main img { order: 1; }
  .bnb-about-main figcaption { order: 2; position: static; background: none; padding: 12px 0 0; }
  .bnb-about-quote { order: 3; position: static; margin-top: 16px !important; align-self: flex-start; }
  .bnb-about-quote { position: static; margin-top: 16px !important; }
  .bnb-about-quote::before { margin-left: 0; }
}
/* ---------- About 끝 ---------- */

/* ---------- 마우스 오버 동작 (2026-09-29) ---------- */
.bnb-btn { position: relative; z-index: 0; overflow: hidden; }
.bnb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
.bnb-btn:hover::before, .bnb-btn:focus-visible::before { transform: scaleX(1); }
.bnb-btn--navy::before { background: var(--gold); }
.bnb-btn--navy:hover { background: var(--navy); color: var(--black) !important; }
.bnb-btn--gold::before { background: var(--navy); }
.bnb-btn--gold:hover { background: var(--gold); color: #fff !important; }
.bnb-btn--line::before { background: #fff; }
.bnb-btn--line-d::before { background: var(--ink); }
.bnb-btn .bnb-ico { transition: transform .35s var(--ease); }
.bnb-btn:hover .bnb-ico { transform: translateX(5px); }
.bnb-more { position: relative; border-bottom: 0; padding-bottom: 6px; }
.bnb-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(1); transform-origin: right center; transition: transform .4s var(--ease); }
.bnb-more:hover::after { transform: scaleX(.35); transform-origin: left center; }
.bnb-more:hover { color: var(--gold-d); }
/* About — 사진 · 숫자 카드 */
.bnb-about-main, .bnb-about-sub { overflow: hidden; }
.bnb-about-main img, .bnb-about-sub img { transition: transform .8s var(--ease); }
.bnb-about-main:hover img, .bnb-about-sub:hover img { transform: scale(1.05); }
.bnb-about-main figcaption, .bnb-about-quote { transition: transform .4s var(--ease), background .4s; }
.bnb-about-main:hover figcaption { transform: translateY(-3px); }
.bnb-about-main:hover .bnb-about-quote { background: var(--black); }
.bnb-about-stats > div { position: relative; }
.bnb-about-stats > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--ease); }
.bnb-about-stats > div:hover::before { transform: scaleX(1); }
/* 카드 · 타일 */
.bnb-cat-tx b .bnb-ico { transition: transform .35s var(--ease); }
.bnb-cat:hover .bnb-cat-tx b .bnb-ico { transform: translateX(5px); }
.bnb-cat-tx b { transition: color .3s; }
.bnb-cat:hover .bnb-cat-tx b { color: var(--gold-d); }
@media (prefers-reduced-motion: reduce) {
  .bnb-btn::before, .bnb-more::after, .bnb-about-main img, .bnb-about-sub img { transition: none !important; }
}
/* ---------- 마우스 오버 끝 ---------- */

/* ---------- 제품 섹션 — 사진이 카드를 채우는 편집형 (2026-09-29) ---------- */
.bnb-cats { padding: 0 0 130px; background: var(--off); }
.bnb-cats-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: end; margin: 0 0 54px; }
.bnb-cats-head .bnb-h2 { margin: 0; }
.bnb-cats-head .bnb-lead { margin: 0; max-width: 40em; }
.bnb-cats-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bnb-cat { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--navy); color: #fff; isolation: isolate; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.bnb-cat:hover { transform: translateY(-8px); box-shadow: 0 36px 70px rgba(10,10,12,.28); }
.bnb-cat-img { position: absolute; inset: 0; display: block; }
.bnb-cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; }
.bnb-cat:hover .bnb-cat-img img { transform: scale(1.07); }
.bnb-cat::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,12,.48) 0%, rgba(10,10,12,.04) 22%, rgba(10,10,12,.34) 48%, rgba(10,10,12,.84) 62%, rgba(10,10,12,.96) 82%, rgba(10,10,12,.98) 100%); transition: opacity .5s; }
.bnb-cat:hover::before { opacity: .94; }
.bnb-cat-top { position: absolute; z-index: 2; top: 24px; left: 26px; right: 26px; display: flex; align-items: baseline; gap: 12px; }
.bnb-cat-top em { font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: .2em; color: var(--gold); }
.bnb-cat-top i { font-style: normal; font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.bnb-cat-tx { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.bnb-cat-tx strong { font-size: clamp(24px, 2vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; color: #fff !important; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.bnb-cat-tx strong sup { font-size: 16px; font-weight: 700; color: var(--gold); margin-left: 8px; top: -.7em; }
.bnb-cat-list { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 10px rgba(0,0,0,.45); max-height: 3.2em; overflow: hidden; }
.bnb-cat-go { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 16px; font-weight: 700; color: #fff !important; }
.bnb-cat-go span { position: relative; padding-bottom: 4px; }
.bnb-cat-go span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(.28); transform-origin: left center; transition: transform .5s var(--ease); }
.bnb-cat:hover .bnb-cat-go span::after { transform: scaleX(1); }
.bnb-cat-go .bnb-ico { transition: transform .4s var(--ease); }
.bnb-cat:hover .bnb-cat-go .bnb-ico { transform: translateX(6px); }
.bnb-cat-note { position: absolute; z-index: 2; top: 22px; right: 26px; padding: 6px 12px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.28); font-size: 16px; font-weight: 600; color: #fff; opacity: 0; transform: translateY(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.bnb-cat:hover .bnb-cat-note { opacity: 1; transform: translateY(0); }
@media (max-width: 1100px) {
  .bnb-cats-head { grid-template-columns: 1fr; align-items: start; }
  .bnb-cats-in { grid-template-columns: repeat(2, 1fr); }
  .bnb-cat:last-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
  .bnb-cat-note { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .bnb-cats { padding-bottom: 80px; }
  .bnb-cats-head { margin-bottom: 32px; }
  .bnb-cats-in { grid-template-columns: 1fr; }
  .bnb-cat, .bnb-cat:last-child { aspect-ratio: 4/5; }
}
/* ---------- 제품 섹션 끝 ---------- */

/* ---------- L27 섹션 — 다크 에디토리얼 (재디자인 2026-09-29) ---------- */
.bnb-l27 { position: relative; padding: 130px 0; background: radial-gradient(120% 90% at 18% 10%, #16233f 0%, #0d1526 45%, var(--black) 100%); color: #fff; overflow: hidden; }
.bnb-l27::before { content: "27"; position: absolute; right: 2%; top: 4%; font-size: clamp(180px, 22vw, 380px); font-weight: 800; line-height: .8; color: rgba(255,255,255,.035); letter-spacing: -0.06em; pointer-events: none; }
.bnb-l27-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 84px); align-items: center; }
.bnb-l27-visual { position: relative; }
.bnb-l27-visual img { width: 100%; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.bnb-l27-visual::after { content: ""; position: absolute; left: -22px; top: -22px; width: 140px; height: 140px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); opacity: .8; }
.bnb-l27-badge { position: absolute; right: -18px; bottom: -26px; margin: 0 !important; display: flex; align-items: baseline; gap: 8px; padding: 18px 22px; background: var(--gold); color: var(--black); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.bnb-l27-badge b { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.bnb-l27-badge span { display: flex; flex-direction: column; font-size: 16px; font-weight: 700; line-height: 1.25; }
.bnb-l27-badge em { font-style: normal; font-weight: 600; opacity: .72; }
.bnb-l27-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px !important; font-size: 18px; font-weight: 800; letter-spacing: .22em; color: var(--gold); }
.bnb-l27-eyebrow span { font-size: 16px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.bnb-l27-h { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.26; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance; }
.bnb-l27-lead { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.8; color: rgba(255,255,255,.78); margin: 0 0 30px !important; max-width: 34em; }
/* 9 + 1 구성 시각화 */
.bnb-l27-mix { display: flex; gap: 6px; margin-bottom: 12px; }
.bnb-l27-mix span { display: block; width: 100%; max-width: 46px; height: 46px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 100%); border: 1px solid rgba(255,255,255,.22); }
.bnb-l27-mix span.is-b { background: linear-gradient(180deg, var(--gold) 0%, #a5811d 100%); border-color: var(--gold); }
.bnb-l27-mixtx { display: flex; align-items: center; gap: 12px; margin: 0 0 32px !important; font-size: 16px; color: rgba(255,255,255,.7); }
.bnb-l27-mixtx b { font-weight: 700; color: #fff; }
.bnb-l27-mixtx b.is-b { color: var(--gold); }
.bnb-l27-mixtx i { flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.bnb-l27-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 28px; border-top: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.bnb-l27-spec > div { padding: 18px 20px; border-right: 1px solid rgba(255,255,255,.12); }
.bnb-l27-spec > div:last-child { border-right: 0; }
.bnb-l27-spec dt { font-size: 16px; color: var(--gold); font-weight: 700; margin-bottom: 6px; }
.bnb-l27-spec dd { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.bnb-l27-spec dd span { display: block; font-size: 16px; font-weight: 500; color: rgba(255,255,255,.6); margin-top: 2px; }
.bnb-l27-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.bnb-l27-cards > div { padding: 20px 22px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(4px); transition: background .4s, transform .4s var(--ease); }
.bnb-l27-cards > div:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.bnb-l27-cards strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-right: 8px; }
.bnb-l27-cards span { font-size: 16px; font-weight: 700; color: var(--gold); }
.bnb-l27-cards p { margin: 10px 0 0 !important; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); }
.bnb-l27-note { font-size: 16px; color: rgba(255,255,255,.55); margin: 0 0 26px !important; }
.bnb-l27-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }
@media (max-width: 1100px) {
  .bnb-l27 { padding: 90px 0; }
  .bnb-l27-in { grid-template-columns: 1fr; }
  .bnb-l27-badge { right: 16px; bottom: -22px; }
}
@media (max-width: 700px) {
  .bnb-l27-spec { grid-template-columns: 1fr; }
  .bnb-l27-spec > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .bnb-l27-spec > div:last-child { border-bottom: 0; }
  .bnb-l27-cards { grid-template-columns: 1fr; }
  .bnb-l27-mix span { height: 34px; }
}
/* ---------- L27 섹션 끝 ---------- */

/* ---------- 제품 카드 — 오버레이형 (재디자인 2026-09-29) ---------- */
.bnb-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.bnb-pgrid--3 { grid-template-columns: repeat(3, 1fr); }
.bnb-pcard { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--navy); color: #fff; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.bnb-pcard:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(10,10,12,.3); }
.bnb-pcard-img { position: absolute; inset: 0; display: block; }
.bnb-pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bnb-pcard:hover .bnb-pcard-img img { transform: scale(1.06); }
.bnb-pcard-img i { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.35); }
.bnb-pcard-img i .bnb-ico { width: 46px; height: 46px; }
.bnb-pcard::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,12,.42) 0%, rgba(10,10,12,.04) 26%, rgba(10,10,12,.32) 50%, rgba(10,10,12,.84) 68%, rgba(10,10,12,.96) 100%); }
.bnb-pcard-cat { position: absolute; z-index: 2; top: 18px; left: 20px; font-size: 16px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.7); }
.bnb-pcard-staged { position: absolute; z-index: 2; top: 18px; right: 20px; font-size: 16px; color: rgba(255,255,255,.6); }
.bnb-pcard-tx { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.bnb-pcard-tx strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.bnb-pcard-tx small { font-size: 16px; color: rgba(255,255,255,.82); line-height: 1.5; }
.bnb-pcard-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--gold); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.bnb-pcard:hover .bnb-pcard-go { opacity: 1; transform: translateY(0); }
.bnb-pcard-go .bnb-ico { transition: transform .35s var(--ease); }
.bnb-pcard:hover .bnb-pcard-go .bnb-ico { transform: translateX(5px); }
.bnb-pcard.is-wait .bnb-pcard-img img { filter: grayscale(.35) brightness(.9); }
@media (max-width: 900px) { .bnb-pgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bnb-pgrid, .bnb-pgrid--3 { grid-template-columns: 1fr; } }
/* ---------- 제품 카드 끝 ---------- */

/* ---------- 버섯 원료 섹션 — 재디자인 2026-09-29 ---------- */
.bnb-ing { position: relative; padding: 130px 0; background: var(--black); color: #fff; overflow: hidden; }
.bnb-ing::before { content: ""; position: absolute; inset: 0; background: var(--img) center/cover no-repeat; opacity: .3; transform: scale(1.04); }
.bnb-ing::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,12,.96) 0%, rgba(10,10,12,.82) 38%, rgba(10,10,12,.5) 72%, rgba(10,10,12,.72) 100%); }
.bnb-ing-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(40px, 5vw, 90px); align-items: center; }
.bnb-ing-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px !important; font-size: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.bnb-ing-eyebrow span { width: 42px; height: 1px; background: var(--gold); }
.bnb-ing-h { font-size: clamp(30px, 3.1vw, 48px); line-height: 1.3; font-weight: 800; letter-spacing: -0.035em; margin: 0 0 20px; text-wrap: balance; }
.bnb-ing-h em { font-style: normal; color: var(--gold); }
.bnb-ing-lead { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.85; color: rgba(255,255,255,.76); margin: 0 0 38px !important; max-width: 32em; }
/* 유리 배지 */
.bnb-ing-badges { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 30em; }
.bnb-ing-badges li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); transition: background .4s, transform .4s var(--ease), border-color .4s; }
.bnb-ing-badges li:hover { background: rgba(255,255,255,.1); border-color: rgba(201,162,39,.5); transform: translateY(-3px); }
.bnb-ing-badge { grid-row: span 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(201,162,39,.38) 0%, rgba(201,162,39,.08) 60%, rgba(255,255,255,.04) 100%); border: 1px solid rgba(201,162,39,.55); box-shadow: inset 0 0 18px rgba(201,162,39,.18); transition: box-shadow .45s, transform .45s var(--ease); }
.bnb-ing-badges li:hover .bnb-ing-badge { box-shadow: inset 0 0 22px rgba(201,162,39,.32), 0 0 22px rgba(201,162,39,.28); transform: rotate(-6deg); }
.bnb-ing-badge .bnb-ico { width: 24px; height: 24px; color: var(--gold); }
.bnb-ing-badges b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.bnb-ing-badges i { font-style: normal; font-size: 16px; color: rgba(255,255,255,.6); }
.bnb-ing-links { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 !important; }
.bnb-ing-links .bnb-more { color: #fff; }
.bnb-ing-links .bnb-more:hover { color: var(--gold); }
/* 엇갈린 원료 카드 */
.bnb-ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.bnb-ing-card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4/5; background: #101018; }
.bnb-ing-card:nth-child(odd) { transform: translateY(-26px); }
.bnb-ing-card:nth-child(even) { transform: translateY(26px); }
.bnb-ing-img { position: absolute; inset: 0; display: block; }
.bnb-ing-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: saturate(1.02); }
.bnb-ing-card:hover .bnb-ing-img img { transform: scale(1.08); }
.bnb-ing-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.1) 0%, rgba(10,10,12,.02) 40%, rgba(10,10,12,.78) 74%, rgba(10,10,12,.95) 100%); }
.bnb-ing-pct { position: absolute; z-index: 2; top: 16px; left: 16px; display: flex; flex-direction: column; padding: 10px 14px; background: rgba(201,162,39,.92); color: var(--black); }
.bnb-ing-pct b { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.bnb-ing-pct i { font-style: normal; font-size: 16px; font-weight: 600; margin-top: 2px; }
.bnb-ing-card figcaption { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.bnb-ing-card figcaption strong { font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.bnb-ing-card figcaption span { font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.82); }
@media (max-width: 1100px) {
  .bnb-ing { padding: 90px 0; }
  .bnb-ing-in { grid-template-columns: 1fr; }
  .bnb-ing-card:nth-child(odd), .bnb-ing-card:nth-child(even) { transform: none; }
}
@media (max-width: 700px) {
  .bnb-ing-badges { grid-template-columns: 1fr; }
  .bnb-ing-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .bnb-ing-card figcaption span { display: none; }
}
/* ---------- 버섯 원료 섹션 끝 ---------- */

/* ---------- 연구소 · 공장 (재디자인 2026-09-29) ---------- */
.bnb-fac-sec { padding: 130px 0; background: var(--white); }
.bnb-fac-head, .bnb-trust-head, .bnb-part-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 72px); align-items: end; margin: 0 0 52px; }
.bnb-fac-head .bnb-h2, .bnb-trust-head .bnb-h2, .bnb-part-head .bnb-h2 { margin: 0; }
.bnb-fac-head .bnb-lead, .bnb-trust-head .bnb-lead, .bnb-part-head .bnb-lead { margin: 0; max-width: 38em; }
.bnb-fac-stage { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; align-items: stretch; }
.bnb-fac-view { position: relative; min-height: 560px; overflow: hidden; background: var(--black); }
.bnb-fac-view .bnb-tour-img { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.bnb-fac-view .bnb-tour-img.is-on { opacity: 1; transform: scale(1); }
.bnb-fac-view .bnb-tour-img img { width: 100%; height: 100%; object-fit: cover; }
.bnb-fac-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.16) 0%, rgba(10,10,12,.02) 26%, rgba(10,10,12,.5) 48%, rgba(10,10,12,.88) 70%, rgba(10,10,12,.97) 100%); }
.bnb-fac-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 60px 34px 30px; background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.72) 34%, rgba(10,10,12,.93) 100%); }
.bnb-fac-cap .bnb-tour-cap-i { display: none; }
.bnb-fac-cap .bnb-tour-cap-i.is-on { display: block; animation: bnbFadeUp .6s var(--ease); }
@keyframes bnbFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bnb-fac-owner { margin: 0 0 8px !important; font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--gold); text-shadow: 0 2px 12px rgba(0,0,0,.75); }
.bnb-fac-name { margin: 0 0 8px !important; font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.bnb-fac-role { margin: 0 !important; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 46em; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.bnb-fac-nav { background: var(--off); display: flex; flex-direction: column; justify-content: center; padding: 26px 0 26px 0; }
.bnb-fac-nav ol { list-style: none; margin: 0 0 24px; padding: 0; }
.bnb-fac-nav li + li { border-top: 1px solid var(--line); }
.bnb-fac-nav button { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px 28px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: inherit; position: relative; transition: background .35s, padding-left .35s var(--ease); }
.bnb-fac-nav button::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.bnb-fac-nav button em { font-style: normal; font-size: 16px; font-weight: 800; color: var(--grey); letter-spacing: .06em; transition: color .35s; }
.bnb-fac-nav button span { font-size: 19px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.02em; transition: color .35s; }
.bnb-fac-nav button i { display: grid; place-items: center; opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease); color: var(--gold-d); }
.bnb-fac-nav button:hover { background: rgba(255,255,255,.6); }
.bnb-fac-nav button.is-on { background: #fff; padding-left: 34px; }
.bnb-fac-nav button.is-on::before { transform: scaleY(1); }
.bnb-fac-nav button.is-on em { color: var(--gold-d); }
.bnb-fac-nav button.is-on span { color: var(--ink); }
.bnb-fac-nav button.is-on i, .bnb-fac-nav button:hover i { opacity: 1; transform: none; }
.bnb-fac-nav .bnb-more { margin-left: 28px; align-self: flex-start; }
/* ---------- 신뢰 근거 (재디자인) ---------- */
.bnb-trust { padding: 130px 0; background: var(--off); }
.bnb-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 44px; }
.bnb-tr { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.bnb-tr:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(14,27,51,.12); border-color: rgba(201,162,39,.6); }
.bnb-tr-img { display: block; height: 190px; background: linear-gradient(160deg, #fbfaf7, #f0ece2); display: grid; place-items: center; overflow: hidden; padding: 18px; }
.bnb-tr-img img { max-height: 100%; width: auto; object-fit: contain; transition: transform .7s var(--ease); }
.bnb-tr:hover .bnb-tr-img img { transform: scale(1.05); }
.bnb-tr-tx { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.bnb-tr-tx em { font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: .16em; color: var(--gold-d); }
.bnb-tr-tx strong { font-size: 18px; font-weight: 700; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); }
.bnb-tr-meta { display: flex; flex-direction: column; gap: 0; margin-top: auto; border-top: 1px solid var(--line); }
.bnb-tr-meta i { display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: baseline; padding: 9px 0; font-style: normal; font-size: 16px; color: var(--ink-2); border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.bnb-tr-meta i:last-child { border-bottom: 0; }
.bnb-tr-meta b { font-weight: 700; font-size: 16px; color: var(--grey); letter-spacing: .04em; }
.bnb-trust-more { margin: 0 !important; text-align: center; }
/* ---------- 협력 기술 (재디자인) ---------- */
.bnb-part { padding: 130px 0; background: var(--white); }
.bnb-part-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bnb-part-card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--navy); color: #fff; transition: transform .55s var(--ease), box-shadow .55s var(--ease); }
.bnb-part-card:nth-child(even) { margin-top: 34px; }
.bnb-part-card:hover { transform: translateY(-8px); box-shadow: 0 32px 64px rgba(10,10,12,.28); }
.bnb-part-img { position: absolute; inset: 0; display: block; }
.bnb-part-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bnb-part-card:hover .bnb-part-img img { transform: scale(1.08); }
.bnb-part-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,12,.5) 0%, rgba(10,10,12,.08) 34%, rgba(10,10,12,.66) 66%, rgba(10,10,12,.95) 100%); }
.bnb-part-no { position: absolute; z-index: 2; top: 18px; left: 20px; font-size: 16px; font-weight: 800; letter-spacing: .18em; color: var(--gold); }
.bnb-part-tx { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 22px; display: flex; flex-direction: column; gap: 6px; }
.bnb-part-tx strong { font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.bnb-part-tx span { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82); }
.bnb-part-go { position: absolute; z-index: 2; right: 18px; bottom: 22px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.35); color: #fff; opacity: 0; transform: translateX(-6px); transition: opacity .4s, transform .4s var(--ease), background .4s; }
.bnb-part-card:hover .bnb-part-go { opacity: 1; transform: none; background: var(--gold); color: var(--black); border-color: var(--gold); }
@media (max-width: 1100px) {
  .bnb-fac-head, .bnb-trust-head, .bnb-part-head { grid-template-columns: 1fr; align-items: start; }
  .bnb-fac-stage { grid-template-columns: 1fr; }
  .bnb-fac-view { min-height: 420px; }
  .bnb-trust-grid, .bnb-part-grid { grid-template-columns: repeat(2, 1fr); }
  .bnb-part-card:nth-child(even) { margin-top: 0; }
}
@media (max-width: 700px) {
  .bnb-fac-sec, .bnb-trust, .bnb-part { padding: 80px 0; }
  .bnb-fac-view { min-height: 320px; }
  .bnb-fac-nav button { padding: 16px 20px; }
  .bnb-trust-grid, .bnb-part-grid { grid-template-columns: 1fr; }
  .bnb-tr-img { height: 170px; }
}
/* ---------- 세 섹션 끝 ---------- */

/* ---------- 하단 오시는 길 · 관리자 아이콘 (2026-09-29) ---------- */
.bnb-loc { display: flex; flex-direction: column; }
.bnb-loc-map { position: relative; flex: 1; min-height: 200px; border: 1px solid var(--line); overflow: hidden; background: var(--soft); }
.bnb-loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.15); }
.bnb-loc-addr { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 10px !important; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bnb-loc-addr .bnb-ico { flex: none; margin-top: 3px; color: var(--gold-d); }
.bnb-loc-links { display: flex; align-items: center; gap: 18px; margin: 0 !important; }
.bnb-loc-nav { font-size: 16px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.bnb-loc-nav:hover { color: var(--navy); border-color: var(--gold); }
.bnb-copy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bnb-admin { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.6); transition: color .3s, border-color .3s, background .3s; }
.bnb-admin:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }
.bnb-admin .bnb-ico { width: 16px; height: 16px; }
/* ---------- 하단 끝 ---------- */

/* 하단 3칸 — 모바일에서 1열, 긴 전화번호가 폭을 넓히지 않도록 (2026-09-29) */
.bnb-bottom-in > * { min-width: 0; }
.bnb-cs-tel { word-break: keep-all; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .bnb-bottom-in { grid-template-columns: 1fr !important; }
  .bnb-bottom-in .bnb-news { grid-column: auto !important; }
}
/* 하단 3칸 끝 */

/* TOP 버튼 — 전역 a{color:inherit} 보다 우선하도록 (2026-09-29) */
.bnb a.bnb-top { color: #fff; }
.bnb a.bnb-top:hover { color: var(--black); background: var(--gold); border-color: var(--gold); }
.bnb a.bnb-top .bnb-ico { width: 20px; height: 20px; }
@media (max-width: 700px) { .bnb-fac-cap { padding: 46px 20px 22px; } }

/* ---------- About 시각 영역 — 좌우 높이 균형 (2026-09-30) ---------- */
.bnb-about-in { align-items: stretch; }
.bnb-about-visual { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 18px; }
.bnb-about-main { position: relative; overflow: hidden; min-height: 300px; }
.bnb-about-main img { width: 100%; height: 100%; object-fit: cover; }
.bnb-about-main figcaption { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 10px; padding: 0 20px 0 0; background: rgba(255,255,255,.95); font-size: 16px; font-weight: 600; color: var(--ink); }
.bnb-about-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; }
.bnb-about-sub { position: static; width: auto; margin: 0; background: #fff; overflow: hidden; }
.bnb-about-sub img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bnb-about-sub figcaption { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--navy); }
.bnb-about-quote { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 24px; background: var(--navy); color: #fff; }
.bnb-about-quote::before { content: ""; display: block; width: 40px; height: 2px; background: var(--gold); }
.bnb-about-quote-tx { margin: 0 !important; font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.4; }
.bnb-about-quote-sub { margin: 0 !important; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.76); }
.bnb-about-quote-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 700; color: var(--gold); }
.bnb-about-quote-go .bnb-ico { transition: transform .35s var(--ease); }
.bnb-about-quote:hover .bnb-about-quote-go .bnb-ico { transform: translateX(5px); }
@media (max-width: 1200px) {
  .bnb-about-visual { padding-bottom: 0; }
}
@media (max-width: 700px) {
  .bnb-about-row { grid-template-columns: 1fr; }
  .bnb-about-main { min-height: 220px; }
  .bnb-about-main figcaption { position: static; padding: 12px 0 0; background: none; }
}
/* ---------- About 시각 영역 끝 ---------- */

/* ---------- 회사소개 6개 서브 재디자인 (2026-09-30) ---------- */
/* 1) 대표이사 인사말 */
.bnb-ceo-in { display: grid; grid-template-columns: minmax(280px, 30%) 1fr; gap: clamp(32px, 4vw, 72px); align-items: start; }
.bnb-ceo-side { position: sticky; top: 118px; display: flex; flex-direction: column; gap: 18px; }
.bnb-ceo-fig { position: relative; overflow: hidden; }
.bnb-ceo-fig img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform 1.2s var(--ease); }
.bnb-ceo-side:hover .bnb-ceo-fig img { transform: scale(1.05); }
.bnb-ceo-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 54px 20px 16px; color: #fff; font-size: 16px; font-weight: 600; background: linear-gradient(to top, rgba(10,10,12,.82), rgba(10,10,12,0)); }
.bnb-ceo-card { background: var(--navy); color: #fff; padding: 26px 26px 24px; }
.bnb-ceo-card-k { margin: 0 0 6px !important; font-size: 16px; font-weight: 700; letter-spacing: .18em; color: var(--gold); }
.bnb-ceo-card-t { margin: 0 0 16px !important; font-size: clamp(19px, 1.5vw, 22px); font-weight: 800; letter-spacing: -0.02em; }
.bnb-ceo-meta { margin: 0; display: grid; gap: 0; }
.bnb-ceo-meta > div { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 16px; }
.bnb-ceo-meta dt { color: rgba(255,255,255,.58); }
.bnb-ceo-meta dd { margin: 0; color: #fff; line-height: 1.6; }
.bnb-ceo-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 16px; font-weight: 700; color: var(--gold); }
.bnb-ceo-go .bnb-ico { transition: transform .35s var(--ease); }
.bnb-ceo-go:hover .bnb-ico { transform: translateX(5px); }
.bnb-ceo-h { font-size: clamp(28px, 2.9vw, 42px); line-height: 1.32; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 26px; color: var(--ink); }
.bnb-ceo-lead { margin: 0 0 30px !important; padding-left: 22px; border-left: 3px solid var(--gold); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.75; font-weight: 700; color: var(--navy); }
.bnb-ceo-p { margin: 0 0 20px !important; font-size: 18px; line-height: 1.95; color: var(--ink-2); }
.bnb-ceo-quote { margin: 34px 0; padding: 30px 34px; background: var(--off); border-top: 2px solid var(--navy); }
.bnb-ceo-quote::before { content: ""; display: block; width: 44px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.bnb-ceo-quote p { margin: 0 !important; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.6; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.bnb-ceo-sign { display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; margin: 34px 0 0 !important; padding-top: 22px; border-top: 1px solid var(--line); }
.bnb-ceo-sign span { font-size: 16px; color: var(--ink-2); }
.bnb-ceo-sign strong { font-size: clamp(21px, 1.8vw, 26px); letter-spacing: .02em; color: var(--ink); }
.bnb-ceo-next { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
.bnb-ceo-next a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border: 1px solid var(--line); background: #fff; font-size: 17px; font-weight: 700; color: var(--navy); transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease); }
.bnb-ceo-next a em { font-style: normal; }
.bnb-ceo-next a:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-3px); }

/* 2) 회사연혁 */
.bnb-hist-in { display: grid; grid-template-columns: minmax(280px, 32%) 1fr; gap: clamp(30px, 4vw, 70px); align-items: start; }
.bnb-hist-stick { position: sticky; top: 118px; }
.bnb-hist-year { margin: 0 0 16px !important; font-size: clamp(64px, 8vw, 118px); line-height: .9; font-weight: 800; letter-spacing: -0.05em; color: var(--navy); }
@supports (-webkit-text-stroke: 2px #000) {
  .bnb-hist-year { color: transparent; -webkit-text-stroke: 2px var(--navy); }
}
.bnb-hist-say { margin: 0 0 26px !important; font-size: 18px; line-height: 1.8; color: var(--ink-2); max-width: 24em; }
.bnb-hist-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bnb-hist-stats li { background: #fff; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.bnb-hist-stats strong { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--navy); }
.bnb-hist-stats span { font-size: 16px; color: var(--ink-2); }
.bnb-hist-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding-bottom: 4px; font-size: 16px; font-weight: 700; color: var(--gold-d); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.bnb-hist-go:hover { color: var(--navy); border-color: var(--gold); }
.bnb-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.bnb-tl::before { content: ""; position: absolute; left: 88px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.bnb-tl-li { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 0 34px; padding-bottom: 24px; }
.bnb-tl-li::before { content: ""; position: absolute; left: 83px; top: 30px; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(201,162,39,.16); }
.bnb-tl-date { margin: 0 !important; display: flex; flex-direction: column; align-items: flex-start; padding-top: 20px; }
.bnb-tl-date strong { font-size: clamp(26px, 2.2vw, 32px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--navy); }
.bnb-tl-date span { font-size: 16px; letter-spacing: .06em; color: var(--grey); }
.bnb-tl-card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--navy); padding: 20px 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.bnb-tl-li:hover .bnb-tl-card { transform: translateX(6px); box-shadow: 0 18px 40px rgba(14,27,51,.1); border-left-color: var(--gold); }
.bnb-tl-ev { display: flex; gap: 12px; margin: 0 !important; padding: 11px 0; font-size: 18px; line-height: 1.65; color: var(--ink); border-top: 1px solid var(--line); }
.bnb-tl-ev:first-child { border-top: 0; padding-top: 0; }
.bnb-tl-ev:last-child { padding-bottom: 0; }
.bnb-tl-ev .bnb-ico { margin-top: 5px; color: var(--gold-d); }
.bnb-tl-card--next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: var(--navy); border-color: var(--navy); border-left-color: var(--gold); color: #fff; }
.bnb-tl-next-t { margin: 0 !important; font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; }
.bnb-tl-card--next .bnb-more { color: var(--gold); }
.bnb-tl-li--next .bnb-tl-date strong { font-size: 19px; letter-spacing: .1em; color: var(--gold-d); }

/* 3) 연구소 · 공장 */
.bnb-fcl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bnb-fcl-c { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.bnb-fcl-c:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14,27,51,.14); border-color: transparent; }
.bnb-fcl-c.is-feature { grid-column: span 3; flex-direction: row; }
.bnb-fcl-media { position: relative; overflow: hidden; background: var(--navy); aspect-ratio: 16/10; }
.bnb-fcl-c.is-feature .bnb-fcl-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 340px; }
.bnb-fcl-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bnb-fcl-c:hover .bnb-fcl-media img { transform: scale(1.06); }
.bnb-fcl-c.is-plain .bnb-fcl-media { background: linear-gradient(135deg, var(--navy) 0%, #1C3358 100%); display: grid; place-items: center; }
.bnb-fcl-c.is-plain .bnb-fcl-media::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px); background-size: 16px 16px; }
.bnb-fcl-mark { position: relative; z-index: 1; }
.bnb-fcl-mark .bnb-ico { width: 62px; height: 62px; color: rgba(201,162,39,.9); }
.bnb-fcl-no { position: absolute; right: 0; bottom: 0; z-index: 2; padding: 6px 14px; background: var(--gold); color: var(--black); font-size: 16px; font-weight: 800; letter-spacing: .06em; }
.bnb-fcl-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 26px 28px; }
.bnb-fcl-c.is-feature .bnb-fcl-body { justify-content: center; padding: clamp(28px, 3vw, 44px); }
.bnb-fcl-owner { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-size: 16px; font-weight: 700; color: var(--gold-d); }
.bnb-fcl-name { margin: 0; font-size: clamp(21px, 1.7vw, 26px); letter-spacing: -0.02em; color: var(--ink); }
.bnb-fcl-c.is-feature .bnb-fcl-name { font-size: clamp(26px, 2.4vw, 34px); }
.bnb-fcl-role { margin: 0 !important; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.bnb-fcl-c.is-feature .bnb-fcl-role { font-size: 18px; }
.bnb-fcl-addr { display: flex; gap: 8px; margin: 6px 0 0 !important; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bnb-fcl-addr .bnb-ico { flex: none; margin-top: 4px; color: var(--gold-d); }

/* 4) 찾아오시는 길 */
.bnb-loc2-top { position: relative; }
.bnb-loc2-map { height: clamp(360px, 44vw, 560px); border: 1px solid var(--line); overflow: hidden; background: var(--soft); }
.bnb-loc2-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.12); }
.bnb-loc2-card { position: absolute; left: 0; bottom: -34px; width: min(430px, 44%); padding: 30px 32px 32px; background: var(--navy); color: #fff; box-shadow: 0 30px 60px rgba(10,10,12,.28); }
.bnb-loc2-card .bnb-eyebrow { color: var(--gold); }
.bnb-loc2-name { margin: 0 0 14px !important; font-size: clamp(22px, 1.9vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.bnb-loc2-addr { display: flex; gap: 10px; margin: 0 0 10px !important; font-size: 17px; line-height: 1.7; }
.bnb-loc2-addr .bnb-ico { flex: none; margin-top: 5px; color: var(--gold); }
.bnb-loc2-sub { margin: 0 0 22px !important; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.72); }
.bnb-loc2-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.bnb-loc2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 72px; background: var(--line); border: 1px solid var(--line); }
.bnb-loc2-i { background: #fff; padding: 28px 26px 30px; transition: background .35s; }
.bnb-loc2-i:hover { background: var(--off); }
.bnb-loc2-ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px; background: var(--off); color: var(--gold-d); transition: background .35s, color .35s; }
.bnb-loc2-i:hover .bnb-loc2-ico { background: var(--navy); color: var(--gold); }
.bnb-loc2-ico .bnb-ico { width: 22px; height: 22px; }
.bnb-loc2-k { margin: 0 0 6px !important; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--gold-d); }
.bnb-loc2-v { margin: 0 !important; font-size: 17px; line-height: 1.7; color: var(--ink); }
.bnb-loc2-v a { color: var(--navy); border-bottom: 1px solid var(--line); }
.bnb-loc2-v a:hover { border-color: var(--gold); }

/* 5) 한눈에 보는 비엔비바이오 */
.bnb-fct-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(26px, 3vw, 54px); align-items: center; padding: clamp(32px, 4vw, 54px); background: var(--navy); color: #fff; }
.bnb-fct-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 270px; height: 270px; border: 1px solid rgba(201,162,39,.35); transform: rotate(18deg); pointer-events: none; }
.bnb-fct-hero .bnb-eyebrow { color: var(--gold); }
.bnb-fct-hero-tx { position: relative; z-index: 1; }
.bnb-fct-legal { margin: 0 0 6px !important; font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; }
.bnb-fct-en { margin: 0 0 16px !important; font-size: 18px; letter-spacing: .08em; color: var(--gold); }
.bnb-fct-also { margin: 0 !important; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 36em; }
.bnb-fct-key { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bnb-fct-key li { display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: baseline; padding: 14px 18px; background: rgba(255,255,255,.06); border-left: 2px solid var(--gold); }
.bnb-fct-key span { font-size: 16px; color: rgba(255,255,255,.66); }
.bnb-fct-key strong { font-size: clamp(18px, 1.4vw, 21px); font-weight: 700; }
.bnb-fct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
.bnb-fct-c { position: relative; padding: 26px 26px 28px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.bnb-fct-c.is-wide { grid-column: span 2; }
.bnb-fct-c:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14,27,51,.1); border-color: var(--gold); }
.bnb-fct-n { position: absolute; right: 20px; top: 16px; margin: 0 !important; font-size: 16px; font-weight: 800; letter-spacing: .08em; color: rgba(14,27,51,.18); }
.bnb-fct-k { margin: 0 0 8px !important; font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--gold-d); }
.bnb-fct-v { margin: 0 !important; font-size: 18px; line-height: 1.75; color: var(--ink); }
.bnb-fct-c .bnb-more { margin-top: 12px; }
.bnb-fct-faq { margin-top: clamp(48px, 5vw, 80px); }

/* 6) 품질 · 인증 · 상표 */
.bnb-qa-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bnb-qa-stats li { background: #fff; padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.bnb-qa-stats strong { font-size: clamp(32px, 3.4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--navy); }
.bnb-qa-stats span { font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bnb-qa-h { display: flex; align-items: center; gap: 16px; margin: clamp(46px, 5vw, 74px) 0 24px; font-size: clamp(22px, 2vw, 29px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bnb-qa-h span { position: relative; padding-left: 18px; }
.bnb-qa-h span::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; background: var(--gold); }
.bnb-qa-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bnb-qa-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bnb-qa-item { padding: 24px 26px 26px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--navy); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bnb-qa-item:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14,27,51,.1); }
.bnb-qa-item-n { margin: 0 0 12px !important; font-size: clamp(26px, 2.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.bnb-qa-item dl { margin: 0; }
.bnb-qa-item dl > div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; }
.bnb-qa-item dt { color: var(--ink-2); }
.bnb-qa-item dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.bnb-certs--q .bnb-cert { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.bnb-certs--q .bnb-cert:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(14,27,51,.13); border-color: var(--gold); }
.bnb-certs--q .bnb-cert-img { overflow: hidden; }
.bnb-certs--q .bnb-cert-img img { transition: transform .8s var(--ease); }
.bnb-certs--q .bnb-cert:hover .bnb-cert-img img { transform: scale(1.04); }
.bnb-cert-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.bnb-cert-meta em { font-style: normal; font-size: 16px; padding: 3px 10px; background: var(--off); color: var(--ink-2); }
.bnb-cert-meta em.is-owner { background: var(--navy); color: #fff; }
.bnb-qa-tms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bnb-qa-tm { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; background: var(--navy); color: #fff !important; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.bnb-qa-tm::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border: 1px solid rgba(201,162,39,.3); border-radius: 50%; transition: transform .6s var(--ease); }
.bnb-qa-tm:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(14,27,51,.28); }
.bnb-qa-tm:hover::after { transform: scale(1.25); }
.bnb-qa-tm-n { position: relative; z-index: 1; margin: 0 !important; font-size: clamp(24px, 2vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.bnb-qa-tm-g { position: relative; z-index: 1; margin: 0 !important; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.78); }
.bnb-qa-tm-m { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0 !important; font-size: 16px; color: var(--gold); }
.bnb-qa-tm-o { position: relative; z-index: 1; margin: 0 !important; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.14); font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.62); }
.bnb-qa-tm-go { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 16px; font-weight: 700; color: #fff; }
.bnb-qa-tm:hover .bnb-qa-tm-go { color: var(--gold); }
.bnb-qa-dos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.bnb-qa-dos-c { padding: 30px 32px 32px; background: var(--off); border-top: 3px solid var(--gold); }
.bnb-qa-dos-h { margin: 0 0 16px !important; font-size: 19px; font-weight: 800; letter-spacing: .06em; color: var(--navy); }
.bnb-dossier { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bnb-dossier li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.bnb-dossier li:first-child { padding-top: 0; border-top: 0; }
.bnb-dossier i { font-style: normal; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: var(--gold-d); }
.bnb-dossier span { font-size: 17px; line-height: 1.8; color: var(--ink-2); }

@media (max-width: 1200px) {
  .bnb-fcl-grid, .bnb-fct-grid, .bnb-qa-items, .bnb-qa-tms, .bnb-loc2-grid { grid-template-columns: repeat(2, 1fr); }
  .bnb-fcl-c.is-feature { grid-column: span 2; }
}
@media (max-width: 1000px) {
  .bnb-ceo-in, .bnb-hist-in, .bnb-fct-hero, .bnb-qa-dos { grid-template-columns: 1fr; }
  .bnb-ceo-side, .bnb-hist-stick { position: static; }
  .bnb-ceo-fig img { aspect-ratio: 16/10; }
  .bnb-loc2-card { position: static; width: 100%; box-shadow: none; }
  .bnb-loc2-grid { margin-top: 20px; }
  .bnb-qa-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .bnb-fcl-grid, .bnb-fct-grid, .bnb-qa-items, .bnb-qa-tms, .bnb-loc2-grid, .bnb-ceo-next { grid-template-columns: 1fr; }
  .bnb-fct-c.is-wide { grid-column: span 1; }
  .bnb-fcl-c.is-feature { grid-column: span 1; flex-direction: column; }
  .bnb-fcl-c.is-feature .bnb-fcl-media { flex: none; min-height: 0; aspect-ratio: 16/10; }
  .bnb-ceo-sign { justify-content: flex-start; }
  .bnb-tl::before { left: 8px; }
  .bnb-tl-li { grid-template-columns: 1fr; gap: 10px; padding-left: 34px; }
  .bnb-tl-li::before { left: 3px; top: 10px; }
  .bnb-tl-date { flex-direction: row; align-items: baseline; gap: 10px; padding-top: 0; }
  .bnb-fct-key li { grid-template-columns: 1fr; gap: 2px; }
  .bnb-qa-item dl > div { grid-template-columns: 104px 1fr; gap: 10px; }
  .bnb-qa-dos-c { padding: 24px 22px 26px; }
  .bnb-dossier li { grid-template-columns: 30px 1fr; gap: 10px; }
}
.bnb-hist-links { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.bnb-hist-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 2px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--navy); transition: padding .35s var(--ease), color .35s; }
.bnb-hist-links a em { font-style: normal; }
.bnb-hist-links a:hover { padding-left: 10px; color: var(--gold-d); }
.bnb-hist-links .bnb-ico { color: var(--gold-d); }
.bnb-fct-c.is-full { grid-column: 1 / -1; background: var(--off); border-color: var(--line); }
.bnb-fct-c.is-full .bnb-fct-v { max-width: 72em; }
.bnb-certs--q { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1200px) { .bnb-certs--q { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .bnb-certs--q { grid-template-columns: 1fr; } }
/* 중메뉴 가독성 — 줄바꿈 · 한 줄 길이 (2026-09-30) */
.bnb-ceo-lead, .bnb-ceo-quote p, .bnb-ceo-sign, .bnb-hist-say, .bnb-tl-next-t,
.bnb-fcl-owner, .bnb-loc2-name, .bnb-loc2-sub, .bnb-fct-legal, .bnb-fct-also,
.bnb-qa-item-n, .bnb-qa-tm-g, .bnb-qa-tm-o, .bnb-qa-stats span, .bnb-hist-stats span,
.bnb-fct-faq .bnb-faq-a p, .bnb-fct-v { text-wrap: balance; }
.bnb-ceo-p, .bnb-ceo-lead, .bnb-fcl-role, .bnb-loc2-v, .bnb-dossier span,
.bnb-tl-ev span, .bnb-fct-v { max-width: 54em; }
.bnb-fct-c.is-full .bnb-fct-v { max-width: 54em; }
.bnb-fct-faq .bnb-faq-a p { max-width: 54em; }
.bnb-qa-item dd { text-wrap: pretty; }
/* ---------- 회사소개 6개 서브 재디자인 끝 ---------- */

/* ---------- 제품소개 3개 서브 재디자인 (2026-09-30) ---------- */
/* 공통 */
.bnb-sh-h2 { display: flex; align-items: center; gap: 16px; margin: clamp(52px, 5.5vw, 88px) 0 26px; font-size: clamp(22px, 2vw, 29px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bnb-sh-h2 span { position: relative; padding-left: 18px; }
.bnb-sh-h2 span::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; background: var(--gold); }
.bnb-sh-h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bnb-sh-name { margin: 0 0 6px; font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.bnb-sh-tag { margin: 0 0 14px !important; font-size: 16px; font-weight: 700; letter-spacing: .06em; color: var(--gold-d); }
.bnb-sh-p { margin: 0 0 22px !important; font-size: 18px; line-height: 1.85; color: var(--ink-2); max-width: 54em; }
.bnb-sh-facts { margin: 0 0 26px; }
.bnb-sh-facts > div { display: grid; grid-template-columns: 132px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; }
.bnb-sh-facts dt { font-weight: 700; color: var(--gold-d); }
.bnb-sh-facts dd { margin: 0; color: var(--ink); line-height: 1.65; }

/* 라인업 인트로 */
.bnb-sh-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 56px); padding: clamp(28px, 3.4vw, 48px); background: var(--off); border-left: 3px solid var(--gold); }
.bnb-sh-h { margin: 0 0 16px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.32; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.bnb-sh-intro .bnb-sh-lead { margin: 0 !important; font-size: 18px; line-height: 1.8; color: var(--ink-2); max-width: 46em; }
.bnb-sh-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bnb-sh-steps li { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), border-color .35s; }
.bnb-sh-steps li:hover { transform: translateX(6px); border-color: var(--gold); }
.bnb-sh-steps span { min-width: 64px; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.bnb-sh-steps strong { font-size: 17px; font-weight: 600; color: var(--ink-2); }

/* 대표 제품 (L27) */
.bnb-sh-feat { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: var(--navy); color: #fff; }
.bnb-sh-feat-img { position: relative; overflow: hidden; background: #0B1730; }
.bnb-sh-feat-img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; transition: transform 1.1s var(--ease); }
.bnb-sh-feat:hover .bnb-sh-feat-img img { transform: scale(1.04); }
.bnb-sh-feat-img figcaption { position: absolute; left: 0; top: 0; padding: 8px 16px; background: var(--gold); color: var(--black); font-size: 16px; font-weight: 800; letter-spacing: .1em; }
.bnb-sh-feat-tx { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 54px); }
.bnb-sh-feat-tx .bnb-sh-name { color: #fff; }
.bnb-sh-feat-tx .bnb-sh-tag { color: var(--gold); }
.bnb-sh-feat-tx .bnb-sh-p { color: rgba(255,255,255,.78); }
.bnb-sh-feat-tx .bnb-sh-facts > div { border-color: rgba(255,255,255,.16); }
.bnb-sh-feat-tx .bnb-sh-facts dt { color: var(--gold); }
.bnb-sh-feat-tx .bnb-sh-facts dd { color: #fff; }
.bnb-sh-feat-tx .bnb-btn { align-self: flex-start; }

/* P27 · B27 듀오 */
.bnb-sh-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.bnb-sh-d { position: relative; display: grid; grid-template-columns: 40% 1fr; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.bnb-sh-d:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14,27,51,.14); border-color: transparent; }
.bnb-sh-d-mark { position: absolute; right: -6px; bottom: -46px; font-size: 170px; font-weight: 800; line-height: 1; color: rgba(14,27,51,.05); pointer-events: none; }
.bnb-sh-d-img { overflow: hidden; background: var(--soft); }
.bnb-sh-d-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bnb-sh-d:hover .bnb-sh-d-img img { transform: scale(1.05); }
.bnb-sh-d-tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 26px 28px 28px; }
.bnb-sh-d-n { font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bnb-sh-d-s { font-style: normal; font-size: 16px; font-weight: 700; color: var(--gold-d); }
.bnb-sh-d-ing { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bnb-sh-d-ing i { font-style: normal; font-size: 16px; padding: 4px 10px; background: var(--off); color: var(--ink-2); }
.bnb-sh-d-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 16px; font-weight: 700; color: var(--navy); }
.bnb-sh-d-go .bnb-ico { transition: transform .35s var(--ease); }
.bnb-sh-d:hover .bnb-sh-d-go .bnb-ico { transform: translateX(5px); }

/* 음료 · 예정 세트 카드 */
.bnb-sh-drinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bnb-sh-dr { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.bnb-sh-dr:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14,27,51,.14); border-color: transparent; }
.bnb-sh-dr-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--soft); }
.bnb-sh-dr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.bnb-sh-dr:hover .bnb-sh-dr-img img { transform: scale(1.05); }
.bnb-sh-staged { position: absolute; right: 0; top: 0; padding: 5px 12px; background: rgba(10,10,12,.72); color: #fff; font-size: 16px; font-style: normal; }
.bnb-sh-dr-tx { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px 24px; }
.bnb-sh-dr-tx strong { font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bnb-sh-dr-tx em { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bnb-sh-dr-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 16px; font-weight: 700; color: var(--navy); }
.bnb-sh-dr-go .bnb-ico { transition: transform .35s var(--ease); }
.bnb-sh-dr:hover .bnb-sh-dr-go .bnb-ico { transform: translateX(5px); }

/* 원료 계보 (바이오코스메틱) */
.bnb-sh-origin { list-style: none; margin: 0 0 clamp(34px, 4vw, 58px); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bnb-sh-origin li { display: flex; flex-direction: column; gap: 6px; padding: 26px 26px 24px; background: #fff; transition: background .35s; }
.bnb-sh-origin li:hover { background: var(--off); }
.bnb-sh-origin-i { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; background: var(--off); color: var(--gold-d); transition: background .35s, color .35s; }
.bnb-sh-origin li:hover .bnb-sh-origin-i { background: var(--navy); color: var(--gold); }
.bnb-sh-origin-i .bnb-ico { width: 22px; height: 22px; }
.bnb-sh-origin strong { font-size: clamp(21px, 1.7vw, 26px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.35; color: var(--ink); text-wrap: balance; }
.bnb-sh-origin-k { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 10px; margin-bottom: 2px; background: var(--navy); color: var(--gold); font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.bnb-sh-origin li { padding: 28px 28px 26px; }
.bnb-sh-origin em { font-size: 17px; }
.bnb-sh-origin a { font-size: 17px; }
.bnb-sh-origin em { font-style: normal; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.bnb-sh-origin a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: 16px; font-weight: 700; color: var(--gold-d); }
.bnb-sh-origin a:hover { color: var(--navy); }

/* 지그재그 (바이오코스메틱) */
.bnb-sh-rows { display: grid; gap: clamp(36px, 4vw, 66px); }
.bnb-sh-row { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(26px, 3.4vw, 58px); align-items: center; }
.bnb-sh-row.is-alt .bnb-sh-row-img { order: 2; }
.bnb-sh-row-img { position: relative; overflow: hidden; background: var(--soft); }
.bnb-sh-row-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 1.1s var(--ease); }
.bnb-sh-row:hover .bnb-sh-row-img img { transform: scale(1.04); }
.bnb-sh-row-img figcaption { position: absolute; right: 0; top: 0; padding: 5px 12px; background: rgba(10,10,12,.72); color: #fff; font-size: 16px; }
.bnb-sh-idx { margin: 0 0 10px !important; font-size: 16px; font-weight: 800; letter-spacing: .12em; color: var(--gold); }
.bnb-sh-row .bnb-more { font-size: 17px; }

/* 선물세트 */
.bnb-sh-gift { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; margin-bottom: 24px; background: var(--navy); color: #fff; }
.bnb-sh-gift.is-alt { background: var(--off); color: var(--ink); }
.bnb-sh-gift.is-alt .bnb-sh-gift-img { order: 2; background: #E9E6DE; }
.bnb-sh-gift-img { position: relative; overflow: hidden; background: #0B1730; }
.bnb-sh-gift-img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; transition: transform 1.1s var(--ease); }
.bnb-sh-gift:hover .bnb-sh-gift-img img { transform: scale(1.03); }
.bnb-sh-gift-img figcaption { position: absolute; right: 0; top: 0; padding: 5px 12px; background: rgba(10,10,12,.72); color: #fff; font-size: 16px; }
.bnb-sh-gift-tx { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 54px); }
.bnb-sh-gift .bnb-eyebrow { color: var(--gold); }
.bnb-sh-gift .bnb-sh-name { color: #fff; }
.bnb-sh-gift .bnb-sh-p { color: rgba(255,255,255,.78); }
.bnb-sh-gift.is-alt .bnb-eyebrow { color: var(--gold-d); }
.bnb-sh-gift.is-alt .bnb-sh-name { color: var(--ink); }
.bnb-sh-gift.is-alt .bnb-sh-p { color: var(--ink-2); }
.bnb-sh-gift .bnb-btn, .bnb-sh-gift .bnb-more { align-self: flex-start; }
.bnb-sh-gspec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 24px; background: var(--line); border: 1px solid var(--line); }
.bnb-sh-gs { padding: 24px 26px 26px; background: #fff; transition: background .35s; }
.bnb-sh-gs:hover { background: var(--off); }
.bnb-sh-gs-k { margin: 0 0 8px !important; font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--gold-d); }
.bnb-sh-gs-v { margin: 0 !important; font-size: 17px; line-height: 1.7; color: var(--ink); }

/* 안내 밴드 */
.bnb-sh-cta { display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; margin-top: clamp(44px, 5vw, 76px); padding: clamp(26px, 3vw, 42px) clamp(26px, 3.4vw, 48px); background: var(--navy); color: #fff; }
.bnb-sh-cta-t { margin: 0 0 8px !important; font-size: clamp(21px, 1.8vw, 27px); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.bnb-sh-cta-s { margin: 0 !important; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 54em; }
.bnb-sh-cta-b { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 !important; }

@media (max-width: 1100px) {
  .bnb-sh-intro, .bnb-sh-feat, .bnb-sh-duo, .bnb-sh-gift, .bnb-sh-row, .bnb-sh-cta { grid-template-columns: 1fr; }
  .bnb-sh-row.is-alt .bnb-sh-row-img, .bnb-sh-gift.is-alt .bnb-sh-gift-img { order: 0; }
  .bnb-sh-feat-img img, .bnb-sh-gift-img img { min-height: 260px; }
  .bnb-sh-cta-b { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .bnb-sh-drinks, .bnb-sh-origin, .bnb-sh-gspec, .bnb-sh-d { grid-template-columns: 1fr; }
  .bnb-sh-d-img { aspect-ratio: 4/3; }
  .bnb-sh-facts > div { grid-template-columns: 106px 1fr; gap: 10px; }
  .bnb-sh-steps span { min-width: 56px; }
  .bnb-sh-d-mark { font-size: 120px; bottom: -30px; }
}
/* 줄바꿈 다듬기 (2026-09-30) */
.bnb-sh-cta-s, .bnb-sh-facts dd, .bnb-sh-dr-tx em, .bnb-sh-origin em, .bnb-sh-gs-v { text-wrap: balance; }
@media (max-width: 760px) {
  .bnb-sh-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .bnb-sh-facts dt { font-size: 16px; }
}
/* ---------- 제품소개 3개 서브 재디자인 끝 ---------- */

/* ---------- 제품 상세 대표 이미지 크기 정리 (2026-09-30) ---------- */
/* height:100% 가 순환 참조로 풀리면서 세로 사진(300x1040)이 칸을 1378px까지 밀어올렸다.
   칸 비율을 4:5 로 고정하고, 사진은 그 안에서만 줄어들도록 절대 위치로 가둔다. */
.bnb-pd-img { aspect-ratio: 4 / 5; max-height: 560px; overflow: hidden; }
.bnb-pd-img img { position: absolute; inset: 24px; margin: auto; width: auto; height: auto; max-width: calc(100% - 48px); max-height: calc(100% - 48px); padding: 0; object-fit: contain; }
@media (max-width: 1000px) {
  .bnb-pd-img { aspect-ratio: 1 / 1; max-height: 460px; }
}
/* ---------- 제품 상세 대표 이미지 끝 ---------- */

/* ---------- 원재료 · 영양정보 표 열 비율 고정 (2026-09-30) ---------- */
/* 함량 칸의 긴 문장이 폭을 독점해 원재료명 · 원산지가 한 글자씩 끊겼다 */
.bnb-table--ing, .bnb-table--nutri { table-layout: fixed; }
.bnb-table--ing th:nth-child(1), .bnb-table--ing td:nth-child(1) { width: 32%; }
.bnb-table--ing th:nth-child(2), .bnb-table--ing td:nth-child(2) { width: 16%; }
.bnb-table--ing th:nth-child(3), .bnb-table--ing td:nth-child(3) { width: 52%; }
.bnb-table--nutri th:nth-child(1), .bnb-table--nutri td:nth-child(1) { width: 40%; }
.bnb-table--nutri th:nth-child(2), .bnb-table--nutri td:nth-child(2) { width: 27%; }
.bnb-table--nutri th:nth-child(3), .bnb-table--nutri td:nth-child(3) { width: 33%; }
.bnb-table--ing th, .bnb-table--nutri th { white-space: nowrap; }
.bnb-table--ing td, .bnb-table--nutri td { overflow-wrap: break-word; word-break: keep-all; }
.bnb-table--ing td:nth-child(3) { line-height: 1.7; }
@media (max-width: 900px) {
  .bnb-table--ing th:nth-child(1), .bnb-table--ing td:nth-child(1) { width: 34%; }
  .bnb-table--ing th:nth-child(2), .bnb-table--ing td:nth-child(2) { width: 20%; }
  .bnb-table--ing th:nth-child(3), .bnb-table--ing td:nth-child(3) { width: 46%; }
}
/* ---------- 표 열 비율 끝 ---------- */

/* ---------- 제품 사진(갤러리) 크게 (2026-09-30) ---------- */
.bnb-pd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); justify-content: stretch; gap: 24px; }
.bnb-pd-gallery figure { display: grid; place-items: center; min-height: 280px; padding: clamp(16px, 2vw, 30px); background: var(--soft); border: 1px solid var(--line); }
.bnb-pd-gallery img { width: auto; max-width: 100%; height: auto; max-height: 640px; padding: 0; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 700px) {
  .bnb-pd-gallery { grid-template-columns: 1fr; }
  .bnb-pd-gallery figure { min-height: 200px; }
  .bnb-pd-gallery img { max-height: 420px; }
}
/* ---------- 제품 사진 끝 ---------- */

/* ---------- 방침 시행일 (2026-09-30) ---------- */
.bnb-legal-date { margin: clamp(32px, 4vw, 52px) 0 0 !important; padding-top: 22px; border-top: 2px solid var(--navy); font-size: 17px; font-weight: 700; color: var(--ink); }
/* ---------- 시행일 끝 ---------- */

/* ---------- 제품 사진 잘림 방지 (2026-09-30 고객 요청) ---------- */
/* 카드 전용 이미지는 4:5 인데 틀이 4:3 이라 위아래가 잘려 나갔다. 틀을 4:5 로 맞추고 contain 으로 가둔다 */
.bnb-sh-row-img { background: var(--soft); }
.bnb-sh-row-img img { aspect-ratio: 4 / 5; object-fit: contain; background: var(--soft); }
.bnb-sh-dr-img { aspect-ratio: 4 / 5; background: var(--soft); }
.bnb-sh-dr-img img { object-fit: contain; }
.bnb-sh-d-img { background: var(--soft); }
.bnb-sh-d-img img { object-fit: contain; }
.bnb-sh-feat-img img { object-fit: contain; background: #0B1730; }
.bnb-sh-gift-img img { object-fit: contain; }
@media (max-width: 1100px) {
  .bnb-sh-feat-img img, .bnb-sh-gift-img img { min-height: 320px; }
}
/* ---------- 제품 사진 잘림 방지 끝 ---------- */

/* ---------- 협력회사 3개 서브 재디자인 (2026-09-30) ---------- */
.bnb-pt-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 3.6vw, 60px); align-items: center; padding: clamp(28px, 3.6vw, 52px); background: var(--navy); color: #fff; }
.bnb-pt-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border: 1px solid rgba(201,162,39,.32); transform: rotate(18deg); pointer-events: none; }
.bnb-pt-hero .bnb-eyebrow { color: var(--gold); }
.bnb-pt-hero-tx { position: relative; z-index: 1; }
.bnb-pt-name { margin: 0 0 16px; font-size: clamp(28px, 3vw, 44px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.bnb-pt-lead { margin: 0 0 20px !important; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.82); max-width: 50em; }
.bnb-pt-site { margin: 0 !important; }
.bnb-pt-site a { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font-size: 17px; font-weight: 700; color: var(--gold); border-bottom: 1px solid rgba(201,162,39,.45); transition: color .3s, border-color .3s; }
.bnb-pt-site a:hover { color: #fff; border-color: #fff; }
.bnb-pt-keys { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bnb-pt-keys li { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; background: rgba(255,255,255,.06); border-left: 2px solid var(--gold); }
.bnb-pt-keys span { font-size: 16px; color: rgba(255,255,255,.62); }
.bnb-pt-keys strong { font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.bnb-pt-keys em { font-style: normal; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); text-wrap: balance; }

.bnb-pt-h { display: flex; align-items: center; gap: 16px; margin: clamp(46px, 5vw, 78px) 0 24px; font-size: clamp(22px, 2vw, 29px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.bnb-pt-h span { position: relative; padding-left: 18px; }
.bnb-pt-h span::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; background: var(--gold); }
.bnb-pt-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.bnb-pt-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.bnb-pt-f { position: relative; padding: 26px 26px 28px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.bnb-pt-f.is-wide { grid-column: 1 / -1; }
.bnb-pt-f:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(14,27,51,.1); border-color: var(--gold); }
.bnb-pt-f-n { position: absolute; right: 20px; top: 16px; margin: 0 !important; font-size: 16px; font-weight: 800; letter-spacing: .08em; color: rgba(14,27,51,.18); }
.bnb-pt-f-k { margin: 0 0 8px !important; font-size: 16px; font-weight: 700; letter-spacing: .03em; color: var(--gold-d); }
.bnb-pt-f-v { margin: 0 !important; font-size: 18px; line-height: 1.75; color: var(--ink); max-width: 54em; }
.bnb-pt-f-v a { color: var(--navy); border-bottom: 1px solid var(--line); }
.bnb-pt-f-v a:hover { border-color: var(--gold); }

.bnb-pt-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.bnb-pt-shots.is-one { grid-template-columns: minmax(0, 760px); justify-content: center; }
.bnb-pt-shot-img { display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 2; padding: 18px; background: var(--soft); border: 1px solid var(--line); }
.bnb-pt-shot-img img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.bnb-pt-shots figure:hover .bnb-pt-shot-img img { transform: scale(1.03); }
.bnb-pt-shots figcaption { margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--ink-2); text-wrap: balance; }

.bnb-pt-band { overflow: hidden; margin-bottom: 28px; background: var(--soft); border: 1px solid var(--line); }
.bnb-pt-band img { display: block; width: 100%; height: auto; }

.bnb-pt .bnb-note { margin-top: clamp(40px, 4vw, 64px) !important; }

@media (max-width: 1100px) {
  .bnb-pt-hero { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bnb-pt-facts { grid-template-columns: 1fr; }
  .bnb-pt-f.is-wide { grid-column: 1 / -1; }
  .bnb-pt-shots.is-one { grid-template-columns: 1fr; }
  .bnb-pt-shot-img { aspect-ratio: 4 / 3; padding: 14px; }
}
/* ---------- 협력회사 재디자인 끝 ---------- */

/* 제품 카드 묶음 — 2개만 있을 때 빈칸이 남지 않게 (2026-09-30) */
.bnb-sh-drinks { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* ---------- 소식(웹진 게시판) 화면 재디자인 (2026-09-30) ---------- */
/* 사진은 잘라내지 않는다 — 배경 이미지를 contain 으로 두고 틀 비율만 맞춘다 */
body.bnb .webzine-page { padding-top: 0; }
body.bnb .wz-masthead { align-items: flex-end; gap: 20px; padding-bottom: 22px; margin-bottom: clamp(30px, 3.4vw, 46px); border-bottom: 2px solid var(--navy); }
body.bnb .wz-kicker { margin-bottom: 10px; font-size: 16px; font-weight: 700; letter-spacing: .14em; color: var(--gold-d); }
body.bnb .wz-title { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
body.bnb .wz-tagline { margin: 12px 0 0; font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 54em; }
body.bnb .wz-search { gap: 8px; }
body.bnb .wz-search input { min-height: 50px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 0; background: #fff; }
body.bnb .wz-search input:focus { outline: none; border-color: var(--gold); }
body.bnb .wz-search button { min-height: 50px; padding: 0 24px; border: 0; border-radius: 0; background: var(--navy); color: #fff; font-weight: 700; cursor: pointer; transition: background .3s, color .3s; }
body.bnb .wz-search button:hover { background: var(--gold); color: var(--black); }
body.bnb .wz-masthead-tools .btn-primary { min-height: 50px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 0; background: var(--gold); color: var(--black); font-weight: 700; }

/* 커버 스토리 */
body.bnb .wz-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; margin-bottom: clamp(44px, 5vw, 72px); overflow: hidden; background: var(--navy); border: 0; border-radius: 0; box-shadow: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
body.bnb .wz-hero:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(14,27,51,.22); }
body.bnb .wz-hero-image { position: relative; aspect-ratio: 4 / 3; background-color: #0B1730; background-size: contain; background-repeat: no-repeat; background-position: center; }
body.bnb .wz-hero-badge { top: 0; left: 0; padding: 8px 18px; border-radius: 0; background: var(--gold); color: var(--black); font-size: 16px; font-weight: 800; letter-spacing: .08em; }
body.bnb .wz-hero-body { padding: clamp(28px, 3.2vw, 50px); gap: 14px; }
body.bnb .wz-hero-title { margin: 0; font-family: var(--font); font-size: clamp(24px, 2.3vw, 34px); line-height: 1.34; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
body.bnb .wz-hero-excerpt { font-size: 18px; line-height: 1.8; color: rgba(255,255,255,.76); max-width: 48em; }
body.bnb .wz-hero .wz-meta, body.bnb .wz-hero .wz-meta * { color: rgba(255,255,255,.62); }
body.bnb .wz-hero .wz-tag { background: rgba(255,255,255,.1); color: var(--gold); }

/* 섹션 제목 */
body.bnb .wz-section { margin-bottom: clamp(44px, 5vw, 72px); }
body.bnb .wz-section-head { gap: 16px; margin-bottom: 24px; }
body.bnb .wz-section-title { position: relative; padding-left: 18px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 800; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
body.bnb .wz-section-title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; background: var(--gold); }
body.bnb .wz-section-rule { background: var(--line); }

/* 기사 카드 */
body.bnb .wz-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
body.bnb .wz-card { border-radius: 0; border-color: var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
body.bnb .wz-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14,27,51,.14); border-color: transparent; }
body.bnb .wz-card--notice { border-color: var(--gold); }
body.bnb .wz-card-thumb { aspect-ratio: 4 / 3; background-color: var(--soft); background-size: contain; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid var(--line); }
body.bnb .wz-card-flag { border-radius: 0; font-size: 16px; font-weight: 700; }
body.bnb .wz-card-flag--notice { background: var(--gold); color: var(--black); }
body.bnb .wz-card-body { padding: 22px 24px 24px; gap: 10px; }
body.bnb .wz-card-title { font-family: var(--font); font-size: clamp(19px, 1.5vw, 22px); line-height: 1.4; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); -webkit-line-clamp: 3; }
body.bnb .wz-card-excerpt { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
body.bnb .wz-tag { border-radius: 0; padding: 3px 10px; background: var(--off); color: var(--gold-d); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* 에디터 추천 */
body.bnb .wz-picks { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
body.bnb .wz-pick { border-radius: 0; border-color: var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
body.bnb .wz-pick:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(14,27,51,.13); border-color: transparent; }
body.bnb .wz-pick-thumb { aspect-ratio: 4 / 3; background-color: var(--soft); background-size: contain; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid var(--line); }
body.bnb .wz-pick-body { padding: 18px 20px 20px; }
body.bnb .wz-pick-title { font-size: 18px; line-height: 1.45; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }

body.bnb .wz-empty { border-radius: 0; padding: 70px 24px; font-size: 18px; background: var(--off); border-color: var(--line); color: var(--ink-2); }

@media (max-width: 860px) {
  body.bnb .wz-hero { grid-template-columns: 1fr; }
  body.bnb .wz-hero-image { aspect-ratio: 4 / 3; }
}
@media (max-width: 520px) {
  body.bnb .wz-grid, body.bnb .wz-picks { grid-template-columns: 1fr; }
  body.bnb .wz-masthead { align-items: stretch; }
}
/* ---------- 소식 재디자인 끝 ---------- */

/* ---------- 소식 — 목록형 · 사진형 게시판, 빈 화면 (2026-09-30) ---------- */
/* 목록형(지사 · 대리점 현황) */
body.bnb .board-table { border-top: 2px solid var(--navy); }
body.bnb .board-table thead { background: transparent; }
body.bnb .board-table th { padding: 16px 12px; font-size: 16px; font-weight: 700; color: var(--gold-d); text-transform: none; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
body.bnb .board-table td { padding: 20px 12px; font-size: 17px; border-bottom: 1px solid var(--line); }
body.bnb .board-table .subj a { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
body.bnb .board-table .subj a:hover { color: var(--gold-d); }
body.bnb .board-table tbody tr { transition: background .3s; }
body.bnb .board-table tbody tr:hover { background: var(--off); }
body.bnb .board-table tr.notice-row { background: #FCF8EC; }

/* 사진형 */
body.bnb .photo-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
body.bnb .photo-card { border-radius: 0; border-color: var(--line); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
body.bnb .photo-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(14,27,51,.14); border-color: transparent; }
body.bnb .photo-thumb, body.bnb .photo-card img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--soft); }
body.bnb .photo-title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
body.bnb .photo-sub { font-size: 16px; color: var(--ink-2); }

/* 아직 글이 없는 게시판 — 빈 줄 대신 안내 판 */
body.bnb .empty, body.bnb td.empty { display: block; padding: clamp(48px, 6vw, 88px) 24px; background: var(--off); border: 1px solid var(--line); border-top: 3px solid var(--gold); text-align: center; font-size: 18px; line-height: 1.7; color: var(--ink-2); border-radius: 0; }
body.bnb td.empty { display: table-cell; }
body.bnb .board-table td.empty { border-bottom: 0; }
/* ---------- 소식 목록 · 빈 화면 끝 ---------- */

/* 소식 — 빈 안내 판은 한 줄 전체로, 기사 없는 '최신 기사' 칸은 감춘다 (2026-09-30) */
body.bnb .photo-grid .empty { grid-column: 1 / -1; }
body.bnb .wz-section:has(#bulkForm):not(:has(.wz-card)) { display: none; }

/* ---------- 모바일 최적화 — 손가락 탭 영역 · 드로어 (2026-09-30) ---------- */
@media (max-width: 900px) {
  /* 손끝으로 누를 수 있는 크기(44px)를 보장한다 */
  .bnb a.bnb-more, .bnb-about-quote-go, .bnb-ceo-go, .bnb-hist-go, .bnb-hist-links a,
  .bnb-sh-d-go, .bnb-sh-dr-go, .bnb-sh-origin a, .bnb-qa-tm-go, .bnb-pt-site a,
  .bnb-loc-nav, .bnb-loc2-v a, .bnb-fct-c .bnb-more, .bnb-sh-row .bnb-more {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .bnb-hero-ctrl button { min-height: 44px; padding: 0 14px; }
  .bnb-hero-scroll { min-width: 44px; min-height: 44px; }
  .bnb-news-tabs button { min-height: 44px; }
  .bnb-news-more { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .bnb-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .bnb-crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
  .bnb-foot-nav { gap: 6px 18px; }
  .bnb-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .bnb-foot-info a, .bnb-cs-mail a, .bnb-cs-tel a { display: inline-flex; align-items: center; min-height: 40px; }
  .bnb-admin { width: 44px; height: 44px; }
  body.bnb .wz-search button, body.bnb .wz-search input { min-height: 48px; }
  body.bnb .board-table .subj a { display: inline-flex; align-items: center; min-height: 44px; }
  /* 전체 메뉴(드로어) */
  .bnb-drawer-g a { padding: 11px 0; }
  .bnb-drawer-lang a { min-height: 44px; display: inline-flex; align-items: center; }
  .bnb-drawer-panel { overscroll-behavior: contain; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}
/* 좁은 화면에서는 전체 메뉴를 한 줄씩 */
@media (max-width: 400px) {
  .bnb-drawer-g ul { grid-template-columns: 1fr; }
  .bnb-drawer-panel { width: 100%; padding-left: 22px; padding-right: 22px; }
}
/* 아주 좁은 기기(갤럭시 폴드 등) */
@media (max-width: 330px) {
  .bnb-drawer-top img { height: 32px; }
  .bnb-hero-ctrl { gap: 4px; }
}
/* ---------- 모바일 탭 영역 끝 ---------- */

/* 남은 탭 영역 — 푸터 연락처 · 경로 링크도 44px (2026-09-30) */
@media (max-width: 900px) {
  .bnb-cs-mail a, .bnb-foot-info a, .bnb-crumbs a, .bnb-foot-nav a { min-height: 44px; }
  .bnb-crumbs { gap: 2px; }
  .bnb-foot-info span { display: inline-flex; align-items: center; }
}

/* 전체 메뉴 안 전화 링크도 손끝 크기로 (2026-09-30) */
.bnb-drawer-cs a { min-height: 48px; }

/* ---------- 아주 좁은 화면(갤럭시 폴드 접힘 280px 등) 가로 넘침 방지 (2026-09-30) ---------- */
/* 격자의 최소 칸이 화면보다 넓어 페이지를 밀어내던 문제 — min() 으로 화면 폭을 넘지 않게 */
.bnb-sh-drinks { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.bnb-pt-shots { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.bnb-pd-gallery { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.bnb-certs { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
body.bnb .wz-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
body.bnb .wz-picks { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
body.bnb .photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* 헤더 — 로고 + 언어 + 햄버거가 280px 안에 들어오도록 */
.bnb-header-in, .bnb-brand { min-width: 0; }
.bnb-brand .bnb-brand-logo { max-width: 100%; }
.bnb-hero-ctrl { flex-wrap: wrap; }
body.bnb .wz-search { flex-wrap: wrap; }
body.bnb .wz-search input { min-width: 0; flex: 1 1 140px; }
@media (max-width: 380px) {
  .bnb-header-in { gap: 10px; }
  .bnb-brand .bnb-brand-logo { height: 30px; }
  .bnb-actions { gap: 6px; }
  .bnb-burger { width: 44px; }
  .bnb-lang-btn { padding: 0 6px; }
  .bnb-tabs a { padding: 14px 10px; }
  .bnb-hero-ctrl button { padding: 0 8px; }
}
/* ---------- 좁은 화면 대응 끝 ---------- */

/* ---------- 좁은 화면 — 긴 낱말이 칸을 넓히지 못하게 (2026-09-30) ---------- */
.bnb-fct-grid > *, .bnb-pt-facts > *, .bnb-qa-items > *, .bnb-sh-drinks > *, .bnb-bottom-in > *,
.bnb-sh-duo > *, .bnb-pt-shots > *, .bnb-fcl-grid > *, .bnb-cats > *, .bnb-sh-rows > *,
.bnb-qa-tms > *, .bnb-hist-in > *, .bnb-ceo-in > *, .bnb-pt-hero > * { min-width: 0; }
.bnb-fct-v, .bnb-pt-f-v, .bnb-qa-item dd, .bnb-sh-p, .bnb-tl-ev span, .bnb-dossier span,
.bnb-sh-facts dd, .bnb-fcl-role, .bnb-pt-keys em, .bnb-sh-origin strong { overflow-wrap: anywhere; }
.bnb-news-tabs { flex-wrap: wrap; }
.bnb-tr-meta { flex-wrap: wrap; }
/* ---------- 끝 ---------- */

/* 품질 지표 4칸 — 좁은 화면 대응 (2026-09-30) */
.bnb-qa-stats > li { min-width: 0; }
.bnb-qa-stats span { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .bnb-qa-stats { grid-template-columns: 1fr; }
  .bnb-hist-stats { grid-template-columns: 1fr; }
}

/* 좁은 화면 — 라벨·값을 위아래로 (단어 중간 끊김 방지) (2026-09-30) */
@media (max-width: 560px) {
  .bnb-qa-item dl > div, .bnb-ceo-meta > div, .bnb-sh-facts > div, .bnb-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .bnb-qa-item dt, .bnb-ceo-meta dt, .bnb-sh-facts dt { font-size: 16px; }
}