/* =========================================================
   DOOGO GROUP — brands.css (브랜드와 성과)
   ========================================================= */

/* 헤더가 스크롤로 숨으면 서브내비가 맨 위에 붙도록 */
.subnav { transition: top .45s var(--ease); }
/* 서브내비 높이만큼 앵커 위치 보정 */
main section[id] { scroll-margin-top: calc(var(--header-h) + 72px); }

/* ---------- 탭 바 + 탭 패널 (운영 브랜드 · 프로젝트 · 성장 사례 · 협력 파트너) ----------
   brands.js 가 선택된 패널 하나만 보여 줍니다(그룹 소개 페이지와 같은 방식). 처음 그림은 <head> 의 작은 스크립트가 정한
   html[data-bn-tab] 으로, brands.js 가 준비되면(.bn-tabs-ready) 패널의 hidden 속성으로 이어받습니다. 스크립트가 없으면 네 패널이 모두 보입니다.
   탭 바 안의 검은 알약(::before)은 선택된 탭 아래로 미끄러져 옮겨 갑니다(--ind-*: brands.js 가 탭 위치로 계산). */
.bn-tabs ul { position: relative; isolation: isolate; padding-inline: 6px; scroll-padding-inline: 24px; }
.bn-tabs ul::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: var(--ind-y, 10px);
  width: var(--ind-w, 0px); height: var(--ind-h, 44px); border-radius: 999px; background: var(--ink);
  transform: translate3d(var(--ind-x, 0px), 0, 0); opacity: 0; pointer-events: none;
}
.bn-tabs ul.is-ind::before { opacity: 1; }
.bn-tabs ul.is-ind.is-glide::before { transition: transform .42s var(--ease), width .42s var(--ease); }
html.motion-off .bn-tabs ul::before { transition: none !important; }
.bn-tabs li { flex: none; }
.bn-tabs [role="tab"] { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bn-tabs [role="tab"][aria-selected="true"] { color: #fff; background: var(--ink); }
.bn-tabs ul.is-ind [role="tab"][aria-selected="true"] { background: transparent; } /* 알약이 준비되면 알약이 대신 깔림 */
@media (hover: hover) { .bn-tabs [role="tab"][aria-selected="false"]:hover { color: var(--ink); background: rgba(11, 27, 51, .05); } }
.bn-tabs [role="tab"]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 999px; }
/* 좁은 화면: 탭 바를 화면 끝까지 넓혀 가로로 넘기고, 양 끝에 여백을 두어 첫 탭 · 마지막 탭이 가장자리에 붙거나 잘리지 않게 */
@media (max-width: 760px) {
  .bn-tabs > .container { padding-inline: 0; }
  .bn-tabs ul { justify-content: flex-start; gap: 2px; padding-inline: var(--gutter) 0; scroll-padding-inline: var(--gutter); }
  .bn-tabs ul::after { content: ""; flex: 0 0 calc(var(--gutter) - 2px); } /* 끝 여백: 스크롤 끝의 padding 을 무시하는 브라우저도 있어 빈 칸으로 */
  .bn-tabs [role="tab"] { padding: 0 16px; font-size: .92rem; }
}

html[data-bn-tab]:not(.bn-tabs-ready) .bn-panel { display: none; }
html[data-bn-tab="brands"]:not(.bn-tabs-ready) #brands,
html[data-bn-tab="projects"]:not(.bn-tabs-ready) #projects,
html[data-bn-tab="cases"]:not(.bn-tabs-ready) #cases,
html[data-bn-tab="partners"]:not(.bn-tabs-ready) #partners { display: block; }
.bn-panel[hidden] { display: none !important; }
/* #앵커로 열면 탭 바 바로 아래에 패널 머리가 오도록 (--bn-tabs-h: 탭 바 높이, brands.js 가 잼) */
main section.bn-panel { scroll-margin-top: calc(var(--header-h) + var(--bn-tabs-h, 65px)); }
/* 패널은 tabindex="-1": Tab 순서에는 없고, 헤더 메뉴 · #앵커로 열 때 읽기 시작 위치로만 포커스를 받음 (테두리 없음) */
.bn-panel:focus, .bn-panel:focus-visible { outline: none; }
/* 바뀌는 동안 아래 CTA 띠가 위로 튀어 올라오지 않도록, 패널 자리는 화면 높이만큼 확보 */
.bn-panels { min-height: calc(100vh - var(--header-h) - var(--bn-tabs-h, 65px)); }
.bn-panels > .bn-panel { min-height: inherit; }
/* 성장 사례(남색) 다음에 바로 남색 CTA 띠가 오면 경계가 사라지므로 얇은 선으로 나눔 */
.bn-cases.bn-panel { border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* 섹션 머리: 제목은 왼쪽, 설명은 오른쪽 */
@media (min-width: 861px) {
  main .sec-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
  main .sec-head--split > .lead, main .sec-head--split > .bn-pf-intro { grid-column: 2; max-width: none; }
}

/* ---------- HERO ---------- */
.bn-hero {
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 112px));
  padding-bottom: 0;
  isolation: isolate;
}
.bn-hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 75% at 92% 0%, rgba(10, 93, 226, .46), transparent 62%),
    radial-gradient(42% 60% at 0% 100%, rgba(76, 141, 246, .14), transparent 70%);
}
.bn-hero-glow::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 18%, #000, transparent 75%);
  mask-image: radial-gradient(70% 80% at 72% 18%, #000, transparent 75%);
}
.bn-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px clamp(40px, 6vw, 112px); }
.bn-hero-title { max-width: none; font-size: clamp(2.9rem, 7.6vw, 7.25rem); line-height: 1.04; letter-spacing: -.05em; }
.bn-hero .lead { max-width: 36ch; }

.bn-hero-index ol { border-top: 1px solid var(--line-dark); }
.bn-hero-index a {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; gap: 12px;
  min-height: 64px; border-bottom: 1px solid var(--line-dark); color: #fff;
  font-size: clamp(1.02rem, 1.3vw, 1.18rem); font-weight: 600; letter-spacing: -.02em;
  transition: padding .45s var(--ease), color .25s var(--ease);
}
.bn-hero-index a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--blue-300);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.bn-hero-index .num { font-size: .78rem; font-weight: 600; color: var(--blue-300); }
.bn-hero-index .s { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); }
.bn-hero-index .ico { width: 18px; height: 18px; color: var(--on-dark-3); transition: transform .35s var(--ease), color .25s; }
.bn-hero-index a:hover, .bn-hero-index a:focus-visible { padding-left: 10px; }
.bn-hero-index a:hover::after, .bn-hero-index a:focus-visible::after { transform: scaleX(1); }
.bn-hero-index a:hover .ico, .bn-hero-index a:focus-visible .ico { transform: translateX(4px); color: #fff; }

/* 흐르는 워드마크 띠 */
.bn-marquee {
  margin-top: clamp(64px, 8vw, 120px); padding-block: clamp(22px, 2.8vw, 36px);
  border-top: 1px solid var(--line-dark); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bn-marquee-track { display: flex; width: max-content; animation: bnMarquee 60s linear infinite; will-change: transform; }
.bn-marquee:hover .bn-marquee-track { animation-play-state: paused; }
.bn-marquee-group { display: flex; align-items: center; flex: none; gap: clamp(24px, 3vw, 52px); padding-right: clamp(24px, 3vw, 52px); }
.bn-mq-item { font-size: clamp(1.9rem, 4.6vw, 4.4rem); font-weight: 600; line-height: 1; letter-spacing: -.015em; white-space: nowrap; color: rgba(255, 255, 255, .92); }
.bn-mq-item.ko { font-family: var(--font-ko); font-weight: 700; letter-spacing: -.045em; }
.bn-mq-item.is-outline { color: rgba(255, 255, 255, .22); }
@supports (-webkit-text-stroke: 1px #fff) {
  .bn-mq-item.is-outline { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .5); }
}
.bn-mq-sym { width: clamp(20px, 2.2vw, 34px); height: clamp(20px, 2.2vw, 34px); flex: none; --sym-bg: var(--blue); --sym-fg: #fff; }
@keyframes bnMarquee { to { transform: translateX(-50%); } }

/* ---------- 01 운영 브랜드 ---------- */
/* 3D 렌더 배경과 같은 연한 블루 그라데이션 (카드 상단 · 지주회사 배너 비주얼) */
.bn-brands { --render-bg: linear-gradient(180deg, #ABC5E8 0%, #C3D6EE 52%, #DCE6F5 100%); }

/* 구조 범례: 지주회사 1 → 그룹사 5 → 브랜드 */
.bn-legend {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr) minmax(0, 1fr);
  margin-bottom: clamp(28px, 3.2vw, 44px); padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.bn-lg-node { position: relative; display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 20px; }
.bn-lg-node + .bn-lg-node { padding-left: 34px; border-left: 1px solid var(--line-2); }
.bn-lg-arrow {
  position: absolute; left: -15px; top: 50%; z-index: 1; width: 30px; height: 30px; margin-top: -15px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--blue);
}
.bn-lg-arrow svg { width: 14px; height: 14px; }
.bn-lg-key {
  position: relative; width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 15px;
  font-size: 1.6rem; font-weight: 600; line-height: 1; color: #fff;
}
.is-hold .bn-lg-key { background: var(--navy); }
.is-sub .bn-lg-key { background: var(--blue); box-shadow: 0 12px 24px -14px rgba(10, 93, 226, .8); }
.is-brand .bn-lg-key { background: var(--blue-50); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-100); }
.bn-lg-txt { display: grid; min-width: 0; line-height: 1.35; }
.bn-lg-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: .74rem; font-weight: 700; color: var(--blue); letter-spacing: 0; }
.bn-lg-kk { font-weight: 600; color: var(--muted-2); }
.bn-lg-txt strong { font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; }
.bn-lg-txt strong.en { font-weight: 600; letter-spacing: .005em; }
.bn-lg-txt small { margin-top: 3px; font-size: .78rem; line-height: 1.5; color: var(--muted); text-wrap: balance; } /* 줄바꿈 시 마지막 단어가 혼자 남지 않도록 */

/* 타일 공통 조각 */
.bn-tile-area {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 7px;
  background: #fff; color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.bn-tile-go {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(11, 27, 51, .16); transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.bn-tile-go svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.bn-tile-no { font-size: .74rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-2); }

/* 브랜드 3D 카드 */
.bn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bn-card {
  --mx: 0; --my: 0; --lift: 0px; --sc: 1;
  position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column;
  border-radius: var(--radius); background: #fff; border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 27, 51, .04);
}
.js .bn-card[data-reveal] {
  transition: opacity var(--dur) var(--ease) var(--d, 0s), transform var(--dur) var(--ease) var(--d, 0s),
    translate .6s var(--ease), box-shadow .6s var(--ease), border-color .45s var(--ease);
}
.bn-card:not(.bn-card--chain):hover, .bn-card:not(.bn-card--chain):focus-within {
  --lift: -14px; --sc: 1.05;
  translate: 0 -6px; border-color: rgba(10, 93, 226, .18); box-shadow: 0 34px 64px -34px rgba(10, 45, 110, .5);
}
.bn-card-media {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1 / .88; margin: 6px 6px 0;
  border-radius: calc(var(--radius) - 6px); background: var(--render-bg);
}
.bn-card-obj {
  position: absolute; inset: -5% 0 -3%; display: block;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--lift) + var(--my) * 7px), 0) scale(var(--sc));
  transition: transform .9s var(--ease); will-change: transform;
}
.bn-card-obj img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
/* 등장: 오브젝트가 아래에서 살짝 떠오르며 */
.js .bn-card[data-reveal] .bn-card-obj img { transform: translateY(26px) scale(.94); opacity: 0; transition: transform 1.2s var(--ease) calc(var(--d, 0s) + .15s), opacity .9s var(--ease) calc(var(--d, 0s) + .15s); }
.js .bn-card[data-reveal].is-in .bn-card-obj img { transform: none; opacity: 1; }
/* 가리킬 때: 유리처럼 빛이 한 번 스쳐 지나감 */
.bn-card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
  transform: translateX(-110%); transition: transform 0s;
}
.bn-card:hover .bn-card-media::after { transform: translateX(110%); transition: transform 1.2s var(--ease); }
.bn-card-top { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.bn-card-top .bn-tile-no { padding: 0 2px; }
.bn-card-go {
  position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .62); color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .45s var(--ease), color .45s var(--ease), transform .6s var(--ease);
}
.bn-card-go svg { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.bn-card:hover .bn-card-go, .bn-card:focus-within .bn-card-go { background: var(--blue); color: #fff; transform: scale(1.06); }
.bn-card:hover .bn-card-go svg, .bn-card:focus-within .bn-card-go svg { transform: translateX(2px); }

.bn-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 20px 20px 18px; }
.bn-card-name { font-size: clamp(1.32rem, 1.65vw, 1.6rem); line-height: 1.12; letter-spacing: -.005em; text-transform: uppercase; white-space: nowrap; }
.bn-card-name .a { font-weight: 400; }
.bn-card-name .b { font-weight: 700; }
.bn-card-link { color: inherit; transition: color .35s var(--ease); }
.bn-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* 카드 어디를 눌러도 사업 페이지로 */
.bn-card-link:focus-visible { outline: none; }
.bn-card-link:focus-visible::after { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--radius); }
.bn-card:hover .bn-card-link { color: var(--blue); }
.bn-card-corp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-size: .88rem; font-weight: 700; line-height: 1.35; letter-spacing: -.015em; color: var(--ink-2); }
.bn-card-corp .k { font-size: .74rem; font-weight: 500; color: var(--muted-2); }
.bn-card-corp .n.en { font-weight: 600; letter-spacing: .01em; }
.bn-corp-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue-700); font-size: .7rem; font-weight: 700; letter-spacing: 0; white-space: nowrap;
}
.bn-corp-chip.is-hold { background: var(--navy); color: #fff; }
.bn-corp-chip.is-global { background: #fff; color: var(--blue-700); box-shadow: inset 0 0 0 1px var(--blue-100); }
.bn-card-desc { margin: 12px 0 20px; font-size: .9rem; line-height: 1.62; color: var(--muted); }
/* 설명 안의 자사몰 · 플랫폼 링크: 카드 전체 링크(::after) 위로 올려 따로 누를 수 있게 */
.bn-card-sub {
  position: relative; z-index: 2; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(10, 93, 226, .35); text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.bn-card-sub:hover, .bn-card-sub:focus-visible { color: var(--blue); text-decoration-color: currentColor; }
.bn-card-sub:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }

/* 하나의 그룹 타일 */
.bn-card.bn-card--chain { overflow: hidden; border: 0; background: var(--blue); color: #fff; }
.bn-chain { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 26px 24px 22px; color: #fff; }
.bn-chain::before { content: ""; position: absolute; inset: -2px; z-index: -1; background: var(--navy); transform: translateY(101%); transition: transform .6s var(--ease); }
.bn-chain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 70% at 100% 0%, rgba(111, 162, 242, .5), transparent 60%); }
.bn-chain-k { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.bn-chain-t { font-size: clamp(1.4rem, 1.9vw, 1.8rem); font-weight: 800; line-height: 1.3; letter-spacing: -.04em; }
/* 일곱 사업이 가운데 두고 심볼로 모이는 작은 궤도 (등장할 때 바깥에서 안으로 집결) */
.bn-chain-orbit { --r: 76px; position: relative; align-self: center; width: 188px; height: 188px; flex: none; margin-block: 6px; --sym-bg: #fff; --sym-fg: var(--blue); }
.bn-co-ring { position: absolute; inset: 17px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .34); }
.bn-co-dot {
  --conv: 1.75;
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4); color: #fff;
  transform: rotate(calc(var(--i) * 51.4286deg)) translateY(calc(var(--r) * -1 * var(--conv))) rotate(calc(var(--i) * -51.4286deg));
  opacity: 0; transition: transform 1.1s var(--ease), opacity .6s var(--ease), background-color .4s var(--ease); transition-delay: calc(var(--i) * .07s + .2s);
}
.bn-co-dot svg { width: 16px; height: 16px; }
.bn-card--chain.is-in .bn-co-dot, html:not(.js) .bn-co-dot { --conv: 1; opacity: 1; }
.bn-co-core {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center;
  border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -12px rgba(5, 20, 60, .55);
}
.bn-co-core svg { width: 30px; height: 30px; }
.bn-co-core::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid rgba(255, 255, 255, .7); opacity: 0; }
.bn-card--chain.is-in .bn-co-core::after { animation: bnCoPulse 3.2s var(--ease) 1.2s infinite; }
@keyframes bnCoPulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.bn-chain:hover .bn-co-dot, .bn-chain:focus-visible .bn-co-dot { background: rgba(255, 255, 255, .22); }
.bn-chain-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bn-chain-steps span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .38); transition: background-color .4s var(--ease), color .4s var(--ease); }
.bn-chain-end { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.bn-chain-end::before { content: ""; width: 22px; height: 1.5px; background: currentColor; }
.bn-chain-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .3); font-size: .86rem; font-weight: 600; }
.bn-chain .bn-tile-go { border-color: rgba(255, 255, 255, .45); }
.bn-chain:hover::before, .bn-chain:focus-visible::before { transform: none; }
.bn-chain:hover .bn-chain-steps span, .bn-chain:focus-visible .bn-chain-steps span { background: rgba(255, 255, 255, .08); }
.bn-chain:hover .bn-chain-steps span:last-child, .bn-chain:focus-visible .bn-chain-steps span:last-child { background: var(--blue); border-color: var(--blue); }
.bn-chain:hover .bn-tile-go, .bn-chain:focus-visible .bn-tile-go { background: #fff; border-color: #fff; color: var(--blue); }
.bn-chain:hover .bn-tile-go svg, .bn-chain:focus-visible .bn-tile-go svg { transform: translateX(2px); }
.bn-chain:focus-visible { outline-offset: -4px; }

main .note { color: var(--muted); }

/* ---------- 02 프로젝트 — 큰 이미지 커버플로우 ----------
   JS(.is-ready): 슬라이드가 한 칸에 겹쳐 있고 brands.js 가 translate3d · rotateY 로 배치
   (가운데 카드는 정면 · 크게, 양옆 카드는 살짝 돌아 뒤로 물러나 가장자리만 보임). JS 없음: 가로 스크롤 목록.
   이미지는 각 사이트 화면 캡처(assets/img/sites · 1200×750, 16:10) — 큰 화면은 1200px 판, 맨 위 사이트 헤더 기준으로 자름. */
.bn-projects { overflow-x: clip; }
.bn-pf-intro { display: grid; gap: 14px; }
.bn-pf-intro .lead { max-width: none; }
.bn-pf-struct { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .86rem; font-weight: 600; color: var(--muted); }
.bn-pf-struct .en { letter-spacing: .01em; color: var(--ink-2); }
.bn-pf-struct a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--blue); font-weight: 700; white-space: nowrap; }
.bn-pf-struct a .ico { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.bn-pf-struct a:hover .ico, .bn-pf-struct a:focus-visible .ico { transform: translateX(3px); }

.bn-pf { --pf-w: min(820px, 58vw); position: relative; isolation: isolate; margin-top: clamp(4px, 1vw, 12px); }
.bn-pf-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px var(--gutter) 28px; list-style: none; }
.bn-pf-track::-webkit-scrollbar { display: none; }
.bn-pf-slide { flex: none; width: var(--pf-w); scroll-snap-align: center; }
.bn-pf.is-ready .bn-pf-viewport { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.bn-pf.is-ready.is-dragging .bn-pf-viewport { cursor: grabbing; }
.bn-pf.is-ready .bn-pf-track { display: grid; justify-content: center; overflow: visible; padding: 24px 0 40px; perspective: 1800px; perspective-origin: 50% 42%; }
.bn-pf.is-ready .bn-pf-slide { grid-area: 1 / 1; transition: transform .9s cubic-bezier(.2, .78, .2, 1), opacity .6s var(--ease); }
.bn-pf.is-ready.is-dragging .bn-pf-slide, .bn-pf .bn-pf-slide.no-tr, .bn-pf .bn-pf-slide.no-tr .bn-pf-dim { transition: none; }

.bn-pf-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%;
  overflow: hidden; border-radius: 24px; background: #fff; color: var(--ink); border: 1px solid rgba(11, 27, 51, .08);
  box-shadow: 0 34px 70px -40px rgba(11, 27, 51, .4); -webkit-user-drag: none;
  transition: box-shadow .6s var(--ease);
}
.bn-pf-slide.is-current .bn-pf-card { box-shadow: 0 50px 90px -44px rgba(11, 27, 51, .5), 0 0 0 1px rgba(11, 27, 51, .04); }
.bn-pf-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
/* 브라우저 창: 위 막대(점 3개 + 주소 알약) + 16:10 캡처 */
.bn-pf-win { display: block; background: #F1F4F9; }
.bn-pf-bar { position: relative; display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid #E2E7EF; }
.bn-pf-lights { position: absolute; left: 16px; top: 50%; display: flex; gap: 6px; transform: translateY(-50%); }
.bn-pf-lights i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 27, 51, .16); }
.bn-pf-url {
  display: flex; align-items: center; gap: 7px; max-width: min(62%, 360px); height: 26px; margin: 0 auto; padding: 0 16px;
  overflow: hidden; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 27, 51, .06);
  font-size: .78rem; font-weight: 600; color: var(--muted); white-space: nowrap; text-overflow: ellipsis;
}
.bn-pf-url::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #1DB97A; box-shadow: 0 0 0 3px rgba(29, 185, 122, .16); }
.bn-pf-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.bn-pf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 0; transition: transform 1.2s var(--ease); pointer-events: none; }
.bn-pf-slide.is-current .bn-pf-card:hover .bn-pf-shot img { transform: scale(1.025); }

/* 본문: 왼쪽 이름 · 운영 주체 / 오른쪽 한 줄 설명 · 사이트 바로가기 */
.bn-pf-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: end; gap: 18px clamp(24px, 3vw, 44px); padding: 24px clamp(22px, 2.4vw, 32px) 26px; }
.bn-pf-id { display: grid; justify-items: start; min-width: 0; }
.bn-pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bn-pf-no { margin-right: 4px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--blue); }
.bn-pf-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--blue-50); color: var(--blue-700); font-size: .78rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.bn-pf-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: clamp(1.7rem, 2.5vw, 2.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.005em; text-transform: uppercase; }
.bn-pf-title.ko { font-family: var(--font-ko); font-weight: 800; letter-spacing: -.045em; text-transform: none; }
.bn-pf-yt { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: none; }
.bn-pf-team { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 12px; font-size: .94rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink-2); }
.bn-pf-team .en { font-weight: 600; letter-spacing: .02em; }
.bn-pf-sep { color: var(--muted-2); font-weight: 500; }
.bn-pf-loc { font-weight: 600; color: var(--muted); }
.bn-pf-side { display: grid; justify-items: start; gap: 18px; min-width: 0; }
.bn-pf-desc { font-size: 1rem; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.bn-pf-go { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 8px 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .92rem; font-weight: 700; white-space: nowrap; transition: background-color .35s var(--ease); }
.bn-pf-go-i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); transition: color .35s var(--ease); }
.bn-pf-go-i svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.bn-pf-slide.is-current .bn-pf-card:hover .bn-pf-go, .bn-pf-slide.is-current .bn-pf-card:focus-visible .bn-pf-go { background: var(--blue); }
.bn-pf-slide.is-current .bn-pf-card:hover .bn-pf-go-i, .bn-pf-slide.is-current .bn-pf-card:focus-visible .bn-pf-go-i { color: var(--blue); }
.bn-pf-slide.is-current .bn-pf-card:hover .bn-pf-go-i svg, .bn-pf-slide.is-current .bn-pf-card:focus-visible .bn-pf-go-i svg { transform: translate(2px, -2px); }
.bn-pf-dim { position: absolute; inset: 0; z-index: 3; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); }
.bn-pf.is-dragging .bn-pf-dim { transition: none; }

/* 조작: 진행 숫자 · 이전 · 점 · 다음 */
.bn-pf-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; padding-inline: var(--gutter); }
.bn-pf:not(.is-ready) .bn-pf-ctrl { display: none; }
.bn-pf-count { display: flex; align-items: baseline; gap: 6px; min-width: 64px; font-size: .86rem; font-weight: 600; letter-spacing: .06em; color: var(--muted-2); }
.bn-pf-count b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.bn-pf-btn { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(11, 27, 51, .14); color: var(--ink); box-shadow: var(--shadow-sm); transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.bn-pf-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bn-pf-btn .ico { width: 18px; height: 18px; }
.bn-pf-btn .ico-prev { transform: rotate(180deg); }
.bn-pf-dots { display: flex; align-items: center; }
.bn-pf-dots button { display: grid; place-items: center; height: 44px; padding: 0 5px; }
.bn-pf-dots button::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 99px; background: rgba(11, 27, 51, .2); transition: width .45s var(--ease), background-color .45s var(--ease); }
.bn-pf-dots button:hover::before { background: rgba(11, 27, 51, .45); }
.bn-pf-dots button[aria-current="true"]::before { width: 28px; background: var(--blue); }
.bn-projects-note { margin-top: clamp(22px, 3vw, 34px); text-align: center; line-height: 1.7; }

@media (max-width: 1024px) {
  .bn-pf { --pf-w: 72vw; }
}
@media (max-width: 860px) {
  .bn-pf { --pf-w: 80vw; }
  .bn-pf-body { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* 모바일: 가운데 카드 84% 폭 · 양옆 카드 가장자리가 살짝 보임 */
@media (max-width: 640px) {
  .bn-pf { --pf-w: 84vw; }
  .bn-pf.is-ready .bn-pf-track { perspective: 1100px; padding: 16px 0 28px; }
  .bn-pf-card { border-radius: 18px; }
  .bn-pf-bar { height: 30px; padding: 0 10px; }
  .bn-pf-lights { left: 11px; gap: 4px; }
  .bn-pf-lights i { width: 6px; height: 6px; }
  .bn-pf-url { max-width: 70%; height: 20px; padding: 0 10px; gap: 5px; font-size: .66rem; }
  .bn-pf-url::before { width: 5px; height: 5px; box-shadow: 0 0 0 2px rgba(29, 185, 122, .16); }
  .bn-pf-body { gap: 14px; padding: 18px 18px 18px; }
  .bn-pf-chip { height: 24px; padding: 0 8px; font-size: .74rem; }
  .bn-pf-no { font-size: .72rem; }
  .bn-pf-title { margin-top: 10px; font-size: clamp(1.36rem, 6.4vw, 1.6rem); gap: 4px 8px; }
  .bn-pf-yt { height: 20px; padding: 0 7px; font-size: .62rem; }
  .bn-pf-team { margin-top: 8px; font-size: .84rem; }
  .bn-pf-side { gap: 14px; justify-items: stretch; }
  .bn-pf-desc { font-size: .9rem; line-height: 1.6; }
  .bn-pf-go { justify-content: space-between; height: 46px; padding-left: 18px; font-size: .88rem; }
  .bn-pf-ctrl { gap: 8px; }
  .bn-pf-count { min-width: 0; margin-right: 2px; font-size: .78rem; }
  .bn-pf-count b { font-size: .95rem; }
  .bn-pf-btn { width: 46px; height: 46px; }
  .bn-pf-dots button { padding: 0 3px; }
  .bn-pf-dots button[aria-current="true"]::before { width: 20px; }
  .bn-projects-note { text-align: left; }
}
@media (max-width: 360px) {
  .bn-pf-count { display: none; }
}

/* ---------- 03 성장 사례 ---------- */
.bn-cases { overflow: clip; isolation: isolate; }
.bn-cases-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 40% at 100% 0%, rgba(10, 93, 226, .32), transparent 70%), radial-gradient(40% 35% at 0% 100%, rgba(76, 141, 246, .12), transparent 70%);
}
.bn-case-list { display: grid; gap: 28px; }
.bn-case {
  --sc: 1; --dim: 0;
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px);
  padding: clamp(24px, 3.2vw, 48px); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--navy-3) 0%, var(--navy-2) 55%); border: 1px solid var(--line-dark);
  box-shadow: 0 -24px 60px -28px rgba(0, 0, 0, .55);
  transform: scale(var(--sc)); transform-origin: 50% 0;
}
.bn-case::after { /* 뒤로 밀린 카드는 살짝 어둡게 */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: #050B17; opacity: var(--dim);
}
@media (min-width: 1025px) and (min-height: 760px) {
  .bn-case { position: sticky; top: calc(var(--header-h) + 92px); transition: top .45s var(--ease); }
  .bn-case:nth-child(2) { top: calc(var(--header-h) + 112px); }
  .bn-case:nth-child(3) { top: calc(var(--header-h) + 132px); }
  /* 헤더가 숨으면 서브내비가 맨 위로 붙으므로 카드도 그만큼 올립니다 */
  .site-header.is-hidden ~ main .bn-case { top: 92px; }
  .site-header.is-hidden ~ main .bn-case:nth-child(2) { top: 112px; }
  .site-header.is-hidden ~ main .bn-case:nth-child(3) { top: 132px; }
}
.bn-case-side { display: flex; flex-direction: column; min-width: 0; }
.bn-case-no { display: flex; align-items: center; gap: 10px; }
.bn-case-no .en { font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-300); }
.bn-case-title { margin-top: 16px; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.32; letter-spacing: -.035em; }
/* 이어진 사업: 3D 렌더 세 장이 차례로 떠오르고, 사이의 화살표가 뒤따라 켜짐 */
.bn-relay { --gap: clamp(18px, 2.6vw, 34px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap); max-width: 620px; margin-top: 28px; }
.bn-relay-step { display: grid; justify-items: start; gap: 10px; min-width: 0; }
.bn-relay-fig { position: relative; width: 100%; }
.bn-relay-img { display: block; overflow: hidden; aspect-ratio: 1 / 1.04; border-radius: 16px; background: linear-gradient(180deg, #ABC5E8 0%, #C3D6EE 52%, #DCE6F5 100%); box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .7); }
.bn-relay-img img { width: 100%; height: 108%; margin-top: -3%; object-fit: cover; object-position: 50% 52%; }
.bn-relay-arrow {
  position: absolute; z-index: 1; top: 50%; right: calc(var(--gap) / -2 - 14px); width: 28px; height: 28px; margin-top: -14px;
  display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--navy-2);
}
.bn-relay-arrow svg { width: 13px; height: 13px; }
.bn-relay-area {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px; border-radius: 999px;
  border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .04); font-size: .84rem; font-weight: 600; color: #fff; white-space: nowrap;
}
.bn-relay-area svg { width: 15px; height: 15px; color: var(--blue-300); }
.bn-relay-corp { margin-top: -4px; padding-left: 2px; font-size: .78rem; font-weight: 500; line-height: 1.4; color: var(--on-dark-2); }
.js .bn-relay[data-reveal] .bn-relay-step { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .14s + .1s); }
.js .bn-relay[data-reveal] .bn-relay-arrow { transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * .14s + .45s); }
.js .bn-relay[data-reveal].is-in .bn-relay-step, .js .bn-relay[data-reveal].is-in .bn-relay-arrow { opacity: 1; transform: none; }
.bn-nw { white-space: nowrap; }

.bn-steps { display: grid; align-content: start; }
.bn-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 24px 0; border-top: 1px solid var(--line-dark); }
.bn-step:first-child { border-top: 0; padding-top: 4px; }
.bn-step dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.bn-step dt .en:not(.bn-step-n) { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3); }
.bn-step-n { font-size: .78rem; font-weight: 600; color: var(--blue-300); min-width: 22px; }
.bn-step dd { color: var(--on-dark-2); line-height: 1.75; padding-left: 32px; }
.bn-step.is-result { margin-top: 6px; padding: 22px 24px; border: 0; border-radius: var(--radius); background: rgba(10, 93, 226, .16); box-shadow: inset 0 0 0 1px rgba(111, 162, 242, .28); }
.bn-step.is-result dt { color: #fff; }
.bn-step.is-result dd { color: #fff; }

/* ---------- 04 협력 파트너 (공개 파트너 전: 제휴 안내 + 제휴 분야) ---------- */
.bn-pt-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.bn-pt-call {
  --sym-bg: rgba(10, 93, 226, .07); --sym-fg: var(--ivory);
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(28px, 3.4vw, 44px); border-radius: var(--radius); background: var(--ivory);
}
.bn-pt-call-sym { position: absolute; z-index: -1; right: -48px; bottom: -48px; width: clamp(180px, 20vw, 260px); height: clamp(180px, 20vw, 260px); }
.bn-pt-call-k { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.bn-pt-call-t { font-size: clamp(1.6rem, 2.5vw, 2.15rem); font-weight: 800; line-height: 1.25; letter-spacing: -.04em; }
.bn-pt-call-d { max-width: 34ch; color: var(--muted); line-height: 1.7; }
.bn-pt-call-btn { margin-top: auto; }
.bn-pt-call-d { margin-bottom: 14px; }

.bn-pt-label { display: flex; align-items: baseline; gap: 10px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.bn-pt-label .en { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.bn-pt-item {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 6px 18px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.bn-pt-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-50); color: var(--blue); }
.bn-pt-ico svg { width: 22px; height: 22px; }
.bn-pt-txt { display: grid; gap: 4px; min-width: 0; }
.bn-pt-txt strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.bn-pt-txt span { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.bn-pt-biz { font-size: .68rem; font-weight: 600; letter-spacing: .16em; color: var(--muted); white-space: nowrap; }
.bn-pt-note { margin-top: 16px; }

/* ---------- 반응형 ---------- */
@media (max-width: 1180px) {
  .bn-legend { grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr) minmax(0, 1fr); } /* 지주회사 칸이 좁아 DOOGOFOOD가 혼자 떨어지지 않도록 */
  .bn-lg-node { gap: 12px; padding: 12px 14px; }
  .bn-lg-node + .bn-lg-node { padding-left: 28px; }
  .bn-lg-key { width: 44px; height: 44px; border-radius: 13px; font-size: 1.4rem; }

  .bn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bn-card--chain { grid-column: span 2; }
}
@media (max-width: 1024px) {
  .bn-hero-grid { grid-template-columns: 1fr; }
  .bn-hero-index { max-width: 560px; }
  .bn-legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .95fr); }
  .bn-lg-txt small { font-size: .74rem; }
  .bn-case { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  /* 제휴 분야: 담당 사업 표기를 설명 아래로 내려 설명 폭 확보 */
  .bn-pt-item { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "ico txt" ". biz"; align-items: start; }
  .bn-pt-ico { grid-area: ico; }
  .bn-pt-txt { grid-area: txt; }
  .bn-pt-biz { grid-area: biz; }
}
@media (max-width: 860px) {
  .bn-pt-wrap { grid-template-columns: 1fr; }
  .bn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-card--chain { grid-column: auto; }
}
@media (max-width: 900px) {
  /* 범례: 세로로 쌓고 화살표는 아래를 향하게 */
  .bn-legend { grid-template-columns: 1fr; padding: 4px; }
  .bn-lg-node { padding: 14px 14px; }
  .bn-lg-node + .bn-lg-node { padding-left: 14px; border-left: 0; border-top: 1px solid var(--line-2); }
  .bn-lg-arrow { left: 21px; top: -15px; margin-top: 0; }
  .bn-lg-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .bn-hero-index a { min-height: 56px; }
  .bn-step dd { padding-left: 0; }
  .bn-step.is-result { padding: 18px; }
}
@media (max-width: 560px) {
  /* 브랜드 카드: 2열 압축 — 설명은 접고 이름·운영 법인·하위 서비스만 */
  .bn-cards { gap: 10px; }
  .bn-card { border-radius: 16px; }
  .bn-card-media { margin: 4px 4px 0; aspect-ratio: 1 / .92; border-radius: 12px; }
  .bn-card-top { left: 8px; top: 8px; gap: 6px; }
  .bn-card-top .bn-tile-no { display: none; }
  .bn-tile-area { height: 24px; padding: 0 8px; font-size: .74rem; border-radius: 6px; }
  .bn-card-top { right: 44px; } /* 오른쪽 화살표 버튼과 겹치지 않게 — 긴 분야 이름(뉴질랜드 건강식품 제조)은 두 줄 */
  .bn-card-top .bn-tile-area { height: auto; min-height: 24px; padding: 4px 8px; line-height: 1.3; white-space: normal; word-break: keep-all; }
  .bn-card-go { right: 8px; top: 8px; width: 30px; height: 30px; }
  .bn-card-go svg { width: 13px; height: 13px; }
  .bn-card-body { padding: 12px 10px 10px 12px; }
  .bn-card-name { font-size: clamp(.92rem, 4.3vw, 1.08rem); }
  .bn-card-corp { gap: 3px 5px; margin-top: 8px; font-size: .76rem; }
  .bn-card-corp .k { font-size: .66rem; }
  .bn-corp-chip { height: 18px; padding: 0 6px; font-size: .6rem; }
  .bn-card-desc, .bn-hide-sm { display: none; }
  .bn-card-corp { margin-bottom: 12px; }
  .bn-chain { gap: 8px; padding: 16px 14px 12px; }
  .bn-chain-k { font-size: .62rem; letter-spacing: .16em; }
  .bn-chain-t { font-size: 1.06rem; }
  .bn-chain-steps { display: none; }
  /* 좁은 칸에서도 집결 모션은 그대로 — 궤도만 줄여 제목과 결과 줄 사이 가운데에 둡니다 */
  .bn-chain-orbit { --r: 44px; width: 118px; height: 118px; margin-block: auto; }
  .bn-co-ring { inset: 15px; }
  .bn-co-dot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .bn-co-dot svg { width: 13px; height: 13px; }
  .bn-co-core { width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 12px; box-shadow: 0 10px 20px -10px rgba(5, 20, 60, .55); }
  .bn-co-core svg { width: 21px; height: 21px; }
  .bn-relay { --gap: 18px; margin-top: 24px; }
  .bn-relay-step { gap: 8px; }
  .bn-relay-img { border-radius: 12px; }
  .bn-relay-area { height: 26px; padding: 0 8px 0 7px; gap: 4px; font-size: .74rem; }
  .bn-relay-area svg { width: 13px; height: 13px; }
  .bn-relay-corp { margin-top: -3px; font-size: .68rem; }
  .bn-relay-arrow { width: 22px; height: 22px; margin-top: -11px; right: calc(var(--gap) / -2 - 11px); box-shadow: 0 0 0 3px var(--navy-2); }
  .bn-relay-arrow svg { width: 11px; height: 11px; }
  .bn-chain-end { margin-top: 0; font-size: .8rem; gap: 6px; }
  .bn-chain-end::before { width: 12px; }
  .bn-chain-go { padding-top: 10px; font-size: .74rem; }
  .bn-chain .bn-tile-go { width: 30px; height: 30px; }

  .bn-pt-call-btn { align-self: stretch; }
  .bn-pt-item { grid-template-columns: 40px minmax(0, 1fr); gap: 6px 14px; padding: 18px 0; }
  .bn-pt-ico { width: 40px; height: 40px; }
  .bn-pt-ico svg { width: 19px; height: 19px; }
}
@media (max-width: 360px) {
  .bn-chain-orbit { --r: 37px; width: 100px; height: 100px; }
  .bn-co-ring { inset: 13px; }
  .bn-co-dot { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .bn-co-dot svg { width: 11px; height: 11px; }
  .bn-co-core { width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 10px; }
  .bn-co-core svg { width: 18px; height: 18px; }
  .bn-chain-end { font-size: .76rem; white-space: nowrap; }
  .bn-chain-end::before { display: none; }
}
/* 마우스가 없는 화면: 가리키기 효과 대신 늘 보이는 상태 */
@media (hover: none) {
  .bn-card-media::after { display: none; }
}

/* 움직임 멈추기 — OS의 '애니메이션 줄이기' 설정과 관계없이 모션은 재생하고,
   사용자가 왼쪽 아래 '움직임 멈추기'를 고른 경우(html.motion-off)에만 멈춥니다. */
html.motion-off .bn-marquee-track { animation: none; }
html.motion-off .bn-case { transform: none; position: relative !important; top: auto !important; } /* 쌓기 없이 목록으로 */
html.motion-off .bn-case::after { opacity: 0; }
html.motion-off .bn-card:not(.bn-card--chain):hover, html.motion-off .bn-card:not(.bn-card--chain):focus-within { --lift: 0px; --sc: 1; translate: none; }
html.motion-off .bn-card[data-reveal] .bn-card-obj img, html.motion-off .bn-relay[data-reveal] :is(.bn-relay-step, .bn-relay-arrow) { transform: none !important; opacity: 1 !important; }
html.motion-off .bn-co-dot { --conv: 1 !important; opacity: 1 !important; } /* 궤도 위치는 유지하고 집결 이동만 생략 */
html.motion-off .bn-co-core::after { animation: none !important; }
html.motion-off .bn-card-media::after { display: none; }
html.motion-off .bn-pf-shot img { transform: none !important; }
/* 포인터를 따라 기우는 효과는 OS 설정이 켜진 기기(html.soft-motion)에서도 생략 */
html.motion-off .bn-card, html.soft-motion .bn-card { --mx: 0 !important; --my: 0 !important; }