@charset "utf-8";
/* ===== sub01 (제이엠프로젝트) page styles ===== */

/* ===== 탭 시스템 (3단 · sticky 는 L1·L2 만) =====
   L1 브랜드/사업 = 벌 전환 · L2 카테고리 = 콘텐츠 전환 · L3 방법론 = 콘텐츠 전환(고정 안 함)
   --hdrH 는 js/sub01.js 가 헤더 노출 여부(.header.insert)에 맞춰 91 ↔ 0 으로 갱신한다 */
:root {
    --hdrH: calc(var(--px)*91);
}

.sub01-pane {
    display: none;
}

.sub01-pane.sub01-pane--active {
    display: block;
}

.sub01-sticky {
    position: sticky;
    /* 헤더 top 트랜지션(0.3s)과 맞춰야 헤더 숨김/노출 시 탭바가 튀지 않는다 */
    transition: top 0.3s;
}

/* 고정 중 표식 — is-stuck 토글은 js/sub01.js 의 스크롤 핸들러가 담당한다.
   흰 판을 깔면 뒤 그라디언트가 끊겨서 끔. 훅은 남겨두니 필요하면 여기에 다시 선언한다 */
.sub01-sticky.is-stuck {
    /* background-color: #fff; */
}

/* margin-top 1 은 공용 .sub-tabs 가 아니라 여기가 소유한다 — sub-visual 의 aspect-ratio 계산값
   (396.875)이 시안 396 보다 커서 생기는 sub01 전용 보정이고, sub02 는 이 보정 없이 맞는다 */
.sub01-sticky--l1 {
    top: var(--hdrH);
    margin-top: calc(var(--px)*1);
    z-index: 30;
}

/* L1 탭바 h83 + 여유 7 */
.sub01-sticky--l2 {
    top: calc(var(--hdrH) + var(--px)*90);
    z-index: 20;
}

/* L3(방법론 탭바)는 sticky 아님 — 2026-08-03 유저 결정. 카테고리 전환이 이미 화면을 되감아
   방법론 탭이 늘 시야에 있고, 3단 고정은 스크롤 여유를 185 나 잡아먹는다 */

.js-cat-panel:not(.js-cat-panel--active),
.js-method-panel:not(.js-method-panel--active) {
    display: none;
}

/* ★ 카테고리 넷은 catsbar 바로 아래 같은 자리를 나눠 쓴다 — 각 섹션의 padding-top·배경은
   세로 적층 시절 값이 아니라 "1번 카테고리와 같은 자리" 기준이다. 각 섹션 루트 규칙 참조 */

/* 전역 section{overflow:hidden}(style.css·library.css)이 아래로 삐져나온
   "제이엠이 하는 일" 스티커를 잘라낸다 */
.bcon05__head {
    overflow: visible;
}

/* FONT:AUTO bcon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon01__intro {
    font-family: var(--font-pretendard);
}

.bcon01__title {
    font-size: var(--titleS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.25;
}

.bcon01__title-lead {
    color: #000000;
}

.bcon01__title-point {
    color: #3b02f8;
}

.bcon01__desc {
    font-size: var(--bodyXL);
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}

.bcon01__desc-para {
    font-weight: 300;
}

.bcon01__desc-emphasis {
    font-weight: 700;
}

.bcon01__desc-tail {
    font-weight: 300;
}
/* /FONT:AUTO bcon01 */

/* IMG:AUTO bcon01 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon01__card.bcon01__card--making.swiper-slide {
    width: calc(var(--px)*370);
    aspect-ratio: 370 / 566;
}

.bcon01__card.bcon01__card--studio.swiper-slide {
    width: calc(var(--px)*317);
    aspect-ratio: 314 / 388;
}

.bcon01__card.bcon01__card--store.swiper-slide {
    width: calc(var(--px)*317);
    aspect-ratio: 314 / 457;
}
/* /IMG:AUTO bcon01 */

/* 탭바(h83 + margin 1)를 페이지 레벨로 승격하면서 .bcon01 상단이 84 내려갔다 → 배경 offset 81-84 */
.bcon01 {
    overflow-x: hidden;
    padding-bottom: calc(var(--px)*105);
    background: #fff url(/images/bcon01_bg.webp) no-repeat;
    background-position: left calc(var(--px)*-7.5) top calc(var(--px)*-3);
    background-size: calc(var(--px)*1923) calc(var(--px)*969);
}

.bcon01__inner {
    margin-top: calc(var(--px)*106);
    padding-left: calc(var(--px)*232);
    gap: calc(var(--px)*206);
}

.bcon01__intro {
    width: calc(var(--px)*469);
    margin-top: calc(var(--px)*59);
    gap: calc(var(--px)*33);
}

.bcon01__desc {
    width: calc(var(--px)*470);
    gap: calc(var(--px)*30);
}

/* letter-spacing 은 em 이라 상속 시 부모 font-size 로 계산돼 고정된다 — 자식이 자기 크기 기준으로 재선언해야 spec 값과 맞는다 */
.bcon01__title,
.bcon01__desc {
    letter-spacing: -0.05em;
}

.bcon01__gallery {
    width: calc(var(--px)*1067);
    flex-shrink: 0;
    margin-inline: 0;
}

/* height:auto 는 3클래스 복합 셀렉터(0,3,0)로 — 단일클래스는 .swiper-slide{height:100%}(0,1,0)와 동률이라 로드순서에 종속됨 */
.bcon01__card.bcon01__card--making.swiper-slide,
.bcon01__card.bcon01__card--studio.swiper-slide,
.bcon01__card.bcon01__card--store.swiper-slide {
    height: auto;
}

/* 갤러리 왼쪽 끝은 마스크로 흐려지며 끝난다(유저 요청 2026-08-05). 마퀴가 우→좌로 흐르므로
   카드가 빠져나가는 쪽이 왼쪽이다 — 거기서 툭 잘리지 않고 사라지게 한다.
   오른쪽 끝(998 지점)은 뷰포트 가장자리라 화면 밖으로 나가며 자연히 잘린다. */
.bcon01__gallery {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--px)*200));
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--px)*200));
}

/* PC 는 Swiper 마퀴(끊김 없는 흐름, 유저 확정 2026-08-05) — Swiper 가 인라인으로 넣는
   transition-duration 에 이징이 걸리면 슬라이드마다 가속·감속이 생겨 흐름이 끊긴다.
   Swiper 기본 ease 를 확실히 덮으려면 !important 가 필요하다(swiper-slide 스킬 §2).
   pointer-events:none = 마우스 호버·드래그가 흐름을 건드리지 못하게(마퀴 전용).
   모바일(아래 media)은 한 장씩 넘기는 페이징이라 둘 다 되돌린다. */
.bcon01__gallery-track {
    transition-timing-function: linear !important;
    pointer-events: none;
}

/* 간격을 인접 셀렉터로 통일한 이유 = loop 복제본에도 같은 간격이 붙어야 하기 때문.
   고유 클래스에 margin-left 를 매달면 첫 카드(--making)엔 없어서 복제본이 이어붙을 때
   카드3'↔카드1 만 간격 0 이 된다. 시안 30·33 → 31 (오차 ≤2px, 허용 범위).
   첫 카드에는 안 붙으므로 갤러리 시작점은 그대로다. */
.bcon01__card + .bcon01__card {
    margin-left: calc(var(--px)*31);
}

.bcon01__card--studio {
    margin-top: calc(var(--px)*362);
}

.bcon01__card--store {
    margin-top: calc(var(--px)*96);
}

.bcon01__card img {
    display: block;
    border-radius: calc(var(--px)*30);
}

/* FONT:AUTO bcon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon02__head {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
}

.bcon02__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.05;
    color: #ffffff;
}

.bcon02__title-point {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.05;
    color: #afcbfd;
}

.bcon02__desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    line-height: 1.5;
    color: #ffffff;
}

.bcon02__desc-strong {
    font-size: var(--bodyXL);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
}

.bcon02__card-text {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
    color: #ffffff;
}

.bcon02__card-title {
    font-size: var(--headM);
    font-weight: 700;
    line-height: 0.92;
}

.bcon02__card-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    line-height: 1.56;
}

.bcon02__more-label {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO bcon02 */

/* IMG:AUTO bcon02 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon02__card-fig--print {
    width: calc(var(--px)*146);
    aspect-ratio: 146 / 129;
}

.bcon02__card-fig--goods {
    width: calc(var(--px)*164);
    aspect-ratio: 164 / 118;
}

.bcon02__card-fig--material {
    width: calc(var(--px)*131);
    aspect-ratio: 131 / 112;
}

.bcon02__card-fig--sign {
    width: calc(var(--px)*154);
    aspect-ratio: 154 / 107;
}
/* /IMG:AUTO bcon02 */

.bcon02 {
    background: #000;
    padding: calc(var(--px)*160) 0 calc(var(--px)*111);
}

/* 아래 세로 간격은 layout-spec 의 글리프 bbox 간격에서 line-height half-leading 을 뺀 값이다 (36→31 · 56→48 · 50→39) */
.bcon02__head {
    gap: calc(var(--px)*27);
}

.bcon02__cards {
    margin-top: calc(var(--px)*48);
    gap: calc(var(--px)*27);
}

.bcon02__card {
    box-sizing: border-box;
    width: calc(var(--px)*400);
    height: calc(var(--px)*390);
    padding: calc(var(--px)*66) 0 0 calc(var(--px)*49);
    background: #111111;
    border-radius: calc(var(--px)*50);
    gap: calc(var(--px)*39);
}

.bcon02__cards > .bcon02__card:nth-child(3) {
    padding-top: calc(var(--px)*75);
}

.bcon02__card {
    transition: background-color .4s ease, box-shadow .4s ease;
}

.bcon02__card-text {
    transition: color .4s ease;
}

.bcon02__card--active {
    background: #afcbfd;
    box-shadow: inset 0 0 54px rgba(244, 244, 244, .35);
}

.bcon02__card--active .bcon02__card-text {
    color: #000;
}

/* letter-spacing 은 em 이라 상속 시 부모 font-size 로 계산돼 고정된다 — 자식이 자기 크기 기준으로 재선언해야 spec 값과 맞는다 */
.bcon02__title,
.bcon02__title-point,
.bcon02__desc,
.bcon02__desc-strong,
.bcon02__card-title,
.bcon02__card-desc {
    letter-spacing: -0.05em;
}

.bcon02__card-text {
    gap: calc(var(--px)*38);
}

.bcon02__cards > .bcon02__card:nth-child(3) .bcon02__card-text {
    gap: calc(var(--px)*29);
}

.bcon02__card-icon-slot {
    width: calc(var(--px)*306);
    height: calc(var(--px)*130);
}

.bcon02__more {
    margin-top: calc(var(--px)*45);
    width: calc(var(--px)*290);
    height: calc(var(--px)*74);
    background: #afcbfd;
    border-radius: calc(var(--px)*50);
}

/* FONT:AUTO bcon03 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon03__head {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
}

.bcon03__title {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
}

.bcon03__title-point {
    font-size: var(--titleL);
    font-weight: 700;
    line-height: 1.2;
    color: #3b02f8;
}

.bcon03__desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    line-height: 1.5;
    color: #000000;
}

.bcon03__desc-strong {
    font-size: var(--bodyXL);
    font-weight: 700;
    line-height: 1.5;
    color: #000000;
}

.bcon03__card-text {
    font-family: var(--font-pretendard);
    letter-spacing: -0.05em;
    color: #000000;
}

.bcon03__card-title {
    font-size: var(--subheadM);
    font-weight: 700;
    line-height: 1.2;
}

.bcon03__card-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    line-height: 1.56;
}

.bcon03__bubble.bcon03__bubble--tail-right {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.bcon03__bubble-text {
    color: #ffffff;
}

.bcon03__bubble-point {
    color: #b19aff;
}

.bcon03__bubble.bcon03__bubble--tail-left {
    font-family: var(--font-pretendard);
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
}
/* /FONT:AUTO bcon03 */

/* FONT:AUTO hoist 보정 — 부모(.bcon03__head/.bcon03__card-text)에 font-size 없이 hoist된 letter-spacing:-0.05em이 16px 기준으로 확정돼 자식에 px로 상속됨. 각 자식 font-size 로 재계산되도록 여기서 직접 재선언 */
.bcon03__title,
.bcon03__title-point,
.bcon03__desc,
.bcon03__desc-strong,
.bcon03__card-title,
.bcon03__card-desc {
    letter-spacing: -0.05em;
}

/* IMG:AUTO bcon03 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon03__card-fig {
    width: calc(var(--px)*101);
    aspect-ratio: 101 / 101;
}
/* /IMG:AUTO bcon03 */

.bcon03 {
    background: #f5f2ff;
    padding: calc(var(--px)*134.5) 0 calc(var(--px)*129);
}

.bcon03__inner {
    width: calc(var(--px)*1125);
    gap: calc(var(--px)*53);
}

.bcon03__head {
    gap: calc(var(--px)*22.5);
}

.bcon03__cards {
    gap: calc(var(--px)*18);
}

.bcon03__card-row {
    gap: calc(var(--px)*21);
}

.bcon03__card {
    /* ★ 말풍선(.bcon03__bubble)의 컨테이닝 블록을 카드로 고정한다.
       원래는 library.css 의 전역 section{position:relative} 가 기준이라 버블 좌표를
       섹션 기준(222/359·1424/613)으로 잡았는데, 카드에 인라인 transform 이 붙는
       순간(GSAP 등) 카드가 컨테이닝 블록으로 승격돼 버블이 카드 offset 만큼 밀린다.
       기준을 처음부터 카드로 두면 transform 유무와 무관하게 좌표가 불변이다.
       (모바일 블록도 동일하게 position:relative — PC/MO 기준이 일치한다.) */
    position: relative;
    width: calc(var(--px)*552);
    height: calc(var(--px)*204);
    padding-left: calc(var(--px)*43);
    box-sizing: border-box;
    gap: calc(var(--px)*46);
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: calc(var(--px)*30);
}

.bcon03__card-text {
    gap: calc(var(--px)*12.5);
}

.bcon03__bubble {
    background: #000;
    border-radius: calc(var(--px)*20);
}

.bcon03__bubble::after {
    content: "";
    position: absolute;
    left: calc(var(--px)*125);
    top: 100%;
    width: calc(var(--px)*15);
    height: calc(var(--px)*13);
    background: #000;
}

.bcon03__bubble--tail-right {
    /* 카드1(개인 고객) 기준 — 섹션 기준 222/359 에서 카드 원점(390/402)과 border 1px 을 뺀 값 */
    left: calc(var(--px)*-169);
    top: calc(var(--px)*-44);
    width: calc(var(--px)*258);
    height: calc(var(--px)*85);
}

.bcon03__bubble--tail-right::after {
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.bcon03__bubble--tail-left {
    /* 카드4(기업 B2B) 기준 — 섹션 기준 1424/613 에서 카드 원점(963/624)과 border 1px 을 뺀 값 */
    left: calc(var(--px)*460);
    top: calc(var(--px)*-12);
    width: calc(var(--px)*274);
    height: calc(var(--px)*85);
}

.bcon03__bubble--tail-left::after {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* ★ 말풍선 부유 루프는 CSS keyframe 이 소유한다 — GSAP 로 돌리면 pop 트윈이 끝나고
   루프 트윈이 붙는 순간 transform 주체가 바뀌며 눈에 띄게 튄다.
   .is-floating 은 pop 이 끝난 뒤 animation.js 가 붙인다(JS-off 면 정지 = 원위치).
   ★ 0% 를 원위치(0)로 잡는 게 핵심 — -6% 에서 시작하면 클래스가 붙는 순간
     0 → -6% 로 순간이동해 툭 튄다. 0 → 위 → 0 → 아래 → 0 한 바퀴가 1주기 2초,
     진폭 ±6%(유저 승인값). alternate 는 쓰지 않는다(주기가 keyframe 안에 다 있음). */
@keyframes bcon03-float {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-6%);
    }

    75% {
        transform: translateY(6%);
    }
}

.bcon03__bubble.is-floating {
    animation: bcon03-float 2s ease-in-out infinite;
}

/* 두 말풍선이 같은 위상으로 뭉쳐 보이지 않게 1초 어긋냄 */
.bcon03__bubble--tail-left.is-floating {
    animation-delay: 1s;
}

/* FONT:AUTO bcon04 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon04__flow-center {
    font-family: var(--font-pretendard);
}

.bcon04__flow-step {
    font-size: var(--bodyM);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.88;
    color: #18ebd4;
}

.bcon04__flow-title {
    font-size: var(--headL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: #ffffff;
}

.bcon04__flow-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
    color: #ffffff;
}

.bcon04__intro {
    font-family: var(--font-pretendard);
}

.bcon04__title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: #ffffff;
}

.bcon04__title-point {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
    color: #18ebd4;
}

.bcon04__desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}

.bcon04__desc-strong {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #ffffff;
}

.bcon04__cta-label {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.5;
    color: #000000;
}
/* /FONT:AUTO bcon04 */

/* IMG:AUTO bcon04 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon04__ring--outer {
    width: calc(var(--px)*638);
    aspect-ratio: 638 / 638;
}

.bcon04__ring--inner {
    width: calc(var(--px)*638);
    aspect-ratio: 638 / 638;
}

.bcon04__node-fig--learn {
    width: calc(var(--px)*43);
    aspect-ratio: 43 / 64;
}

.bcon04__node-fig--make {
    width: calc(var(--px)*43);
    aspect-ratio: 43 / 64;
}

.bcon04__node-fig--sell {
    width: calc(var(--px)*59);
    aspect-ratio: 59 / 64;
}

.bcon04__node-fig--grow {
    width: calc(var(--px)*59);
    aspect-ratio: 59 / 65;
}
/* /IMG:AUTO bcon04 */

.bcon04 {
    padding-bottom: calc(var(--px)*139);
    background: #00080e url(/images/bcon04_bg.webp) no-repeat center bottom / calc(var(--px)*1920) calc(var(--px)*927);
}

.bcon04__inner {
    margin: calc(var(--px)*144) 0 0 calc(var(--px)*265);
    gap: calc(var(--px)*138);
}

.bcon04__flow {
    width: calc(var(--px)*640);
    height: calc(var(--px)*640);
}

/* 점선 원 상시 역회전(시안 주석 '원 두개 돌아가는 모션 (방향 반대로)').
   ★ GSAP 가 아니라 CSS 로 도는 이유 = 스크롤 진입 전에도 계속 돌아야 한다(유저 확정).
   ★ 그래서 ani_bcon04 의 링 reveal 은 autoAlpha 만 쓴다 — 링에 GSAP scale 을 걸면
   실행 중인 CSS animation 의 transform 이 캐스케이드에서 이겨 인라인 scale 이 죽는다.
   inner 는 별도 keyframe 없이 direction:reverse 로 반대로 돌린다. */
@keyframes bcon04-ring-spin {
    to { transform: rotate(360deg); }
}

.bcon04__ring--outer {
    animation: bcon04-ring-spin 40s linear infinite;
}

.bcon04__ring--inner {
    animation: bcon04-ring-spin 30s linear infinite reverse;
}

/* 5b 보정: layout-spec img_ring_outer/inner x 266→264 (corrections[]) */
.bcon04__ring-wrap {
    left: calc(var(--px)*-1);
    top: calc(var(--px)*1);
    width: calc(var(--px)*638);
    height: calc(var(--px)*638);
}

.bcon04__flow-center {
    top: calc(var(--px)*226);
}

/* 4벌 중 1벌만 노출 — 런타임 상태 토글이라 CLAUDE.md #9(뷰포트 표시 유틸)의 예외다.
   ★ display 토글이 아니라 grid 한 칸에 네 벌을 겹쳐 놓고 opacity 로 크로스페이드한다.
     display:none 은 트랜지션이 안 걸려 교체가 툭 끊기고, 그렇다고 둘 다 display 를 켜면
     flow 에서 세로로 쌓여 레이아웃이 순간 두 배가 된다. 겹쳐야 둘 다 해결된다.
   ★ 컨테이너 높이·폭은 가장 큰 벌을 따라 자동으로 잡힌다(px 하드코딩 없음).
     가로 중앙은 여전히 부모(.bcon04__flow flex-cc)의 static position 이 소유한다. */
.bcon04__flow-center {
    display: grid;
    justify-items: center;
}

.bcon04__flow-panel {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--px)*8));
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.bcon04__flow-panel.bcon04__flow-panel--active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* 아래 세로 간격은 layout-spec 의 글리프 bbox 간격에서 line-height half-leading 을 뺀 값이다.
   5b 실측(step dy−8 · title dy−12 · desc 0)으로 재산출 — 컨테이너를 8 올리고(top 234→226)
   title 은 4 더, desc 는 그 12 를 되돌려 제자리에 둔다 (15.5→11.5 · 16.5→28.5) */
.bcon04__flow-title {
    margin-top: calc(var(--px)*11.5);
}

.bcon04__flow-desc {
    margin-top: calc(var(--px)*15.5);
}

/* ★ 위치 modifier(--learn/--make/--sell/--grow)와 활성 표시(--on)를 분리한다 —
   hover 로 활성이 노드 사이를 옮겨다니므로 좌표와 상태가 한 클래스에 붙어 있으면 안 된다.
   활성 = 청록 원 + fig 불투명. 비활성 fig 는 .bcon04__node-fig 의 opacity:.33 그대로. */
.bcon04__node {
    width: calc(var(--px)*120);
    height: calc(var(--px)*121);
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    /* ★ background-color 만 — opacity 는 넣지 않는다. GSAP reveal 이 이 노드에 autoAlpha
       를 걸어서, opacity 에 transition 이 붙으면 등장 트윈이 CSS 전환에 끌려 느려진다.
       fig 쪽 opacity 는 GSAP 가 안 건드리므로 아래에서 전환해도 안전하다. */
    transition: background-color .35s ease;
}

.bcon04__node--on {
    background-color: #18ebd4;
}

.bcon04__node-fig {
    transition: opacity .35s ease;
}

.bcon04__node--on .bcon04__node-fig {
    opacity: 1;
}

.bcon04__node--learn {
    left: calc(var(--px)*90);
    top: calc(var(--px)*101);
}

.bcon04__node--make {
    left: calc(var(--px)*424);
    top: calc(var(--px)*101);
}

.bcon04__node--sell {
    left: calc(var(--px)*424);
    top: calc(var(--px)*422);
}

.bcon04__node--grow {
    left: calc(var(--px)*90);
    top: calc(var(--px)*422);
}

.bcon04__node-fig {
    opacity: .33;
}

/* 5b 보정: layout-spec img_node_learn x 393→391 (corrections[]) — flex-cc 중앙에서 좌 2px = margin-right 4.
   opacity 는 여기 없다 — 활성은 hover 로 옮겨다니므로 .bcon04__node--on 이 소유한다 */
.bcon04__node-fig--learn {
    margin-right: calc(var(--px)*4);
}

/* 아래 세로 값은 글리프 bbox 간격에서 line-height half-leading 을 뺀 값이다 (39→36 · 58→52).
   desc 4행이 line-box 로 spec 대비 +12px 커져 align-items:center 가 블록 전체를 6px 끌어올리므로,
   title 만 −2 로 되돌리고 나머지는 gap 으로 흡수한다 (5b 실측 title-point dy+3 · cta y+5.8) */
.bcon04__title {
    margin-top: calc(var(--px)*-2);
}

.bcon04__intro {
    width: calc(var(--px)*516);
    gap: calc(var(--px)*52);
}

.bcon04__intro-text {
    gap: calc(var(--px)*36);
}

.bcon04__cta {
    width: calc(var(--px)*266);
    height: calc(var(--px)*74);
    border-radius: calc(var(--px)*35.5);
    background-color: #18ebd4;
}

.aura:has(> .bcon04__cta) {
    --aura: 24 235 212;
}

/* FONT:AUTO bcon05 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon05__cats {
    font-family: var(--font-pretendard);
}

.bcon05__cat.bcon05__cat--active {
    color: #18ebd4;
}

.bcon05__cat-en.bcon05__cat-en--active {
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bcon05__cat-ko.bcon05__cat-ko--active {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.9;
}

.bcon05__cat {
    color: #000000;
}

.bcon05__cat-en {
    font-size: var(--bodyM);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bcon05__cat-ko {
    font-size: var(--bodyXL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.9;
}

.bcon05__intro {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon05__intro-en {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 0.94;
}

.bcon05__intro-title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.89;
}

.bcon05__intro-desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.bcon05__methods {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.36;
}

.bcon05__method-tab.bcon05__method-tab--active {
    color: #000000;
}

.bcon05__method-tab {
    color: #dddddd;
}

.bcon05__panel-text {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon05__panel-title {
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.91;
}

.bcon05__panel-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
}
/* /FONT:AUTO bcon05 */

/* IMG:AUTO bcon05 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon05__sticker.bcon05__sticker--question {
    width: calc(var(--px)*128);
    aspect-ratio: 128 / 40;
}

.bcon05__headline {
    width: calc(var(--px)*1147);
    aspect-ratio: 1147 / 89;
}

.bcon05__sticker.bcon05__sticker--answer {
    width: calc(var(--px)*148);
    aspect-ratio: 148 / 40;
}

.bcon05__panel-photo {
    width: calc(var(--px)*661);
    aspect-ratio: 661 / 405;
}
/* /IMG:AUTO bcon05 */

/* 배경판 소유자가 pane 으로 올라갔다 — L2 카테고리 탭바가 bcon05 밖(pane 직계)에 있어야
   bcon06~08 구간까지 sticky 가 유지되고, overflow:hidden 조상도 없어야 하기 때문.
   pane 상단 = 구 .bcon05 상단 + 84(승격한 L1 탭바) → 배경 offset 76-84 */
.sub01-pane[data-pane="biz"] {
    background: #fff url(/images/bcon05_bg.webp) no-repeat;
    background-position: left calc(var(--px)*-7.5) top calc(var(--px)*-8);
    background-size: calc(var(--px)*1920) calc(var(--px)*1778);
}

/* 구 padding-top 187 − 84(밖으로 나간 탭바) */
.bcon05__head {
    position: relative;
    padding-top: calc(var(--px)*103);
}

/* intro 의 margin-top 98 이 밖으로 새지 않게 BFC — sticky 를 죽이는 overflow 대신 flow-root */
.bcon05__body {
    display: flow-root;
    padding-bottom: calc(var(--px)*50);
}

/* img 기본이 inline 이라 래퍼에 line-box 여백(+7px)이 붙는다 — 섹션 높이 체인이 통째로 밀림 */
.bcon05__head img,
.bcon05__body img {
    display: block;
}

.bcon05__sticker {
    z-index: 1;
}

/* top 은 구값 −84 — 기준 박스가 .bcon05__head 로 바뀌며 상단이 탭바 높이만큼 내려왔다 */
.bcon05__sticker--question {
    left: calc(var(--px)*320);
    top: calc(var(--px)*74);
}

/* 182 = layout-spec y183 − 1. 재크롭(−84) 뒤 대조가 dy−1 을 확정해 anchor 를 1px 올렸다
   (질문 스티커는 74 그대로 맞음 — 답변 쪽만 크롭 반올림이 걸린 것) */
.bcon05__sticker--answer {
    left: calc(var(--px)*1471);
    top: calc(var(--px)*182);
}

/* 전체폭 래퍼가 sticky·배경을 소유하고 cats 는 정렬만 — 배경이 1831 폭에서 끊기면 안 되기 때문 */
.bcon05__catsbar {
    margin-top: calc(var(--px)*103);
}

.bcon05__cats {
    width: calc(var(--px)*1831);
    gap: calc(var(--px)*14);
    margin-inline: auto;
}

.bcon05__cat {
    color: inherit;
    text-decoration: none;
}

.bcon05__cat {
    box-sizing: border-box;
    width: calc(var(--px)*447);
    height: calc(var(--px)*102);
    gap: calc(var(--px)*9);
    border-radius: calc(var(--px)*20);
    background-color: #fff;
    border: 1px solid #ddd;
}

.bcon05__cat.bcon05__cat--active {
    background-color: #000;
    border: none;
}

/* w635 는 시안 잉크 폭(측정 기하)이지 CSS width 명령이 아니다 — 고정하면 desc 가 2줄로 접힌다(CLAUDE.md 원칙 7) */
/* 시안 간격이 22(en→title) / 26(title→desc) 비균일이라 gap 24 균일로는 title 이 2px 내려앉는다 */
.bcon05__intro {
    margin: calc(var(--px)*98) auto 0;
}

.bcon05__intro-title,
.bcon07__intro-title,
.bcon08__intro-title {
    margin-top: calc(var(--px)*22);
}

.bcon05__intro-desc,
.bcon07__intro-desc,
.bcon08__intro-desc {
    margin-top: calc(var(--px)*26);
}

/* 76 = 잉크 기준 간격. intro 의 desc line-box 가 잉크보다 12px 아래로 남아 실렌더는 64 여야 y787 에 앉는다 (bcon07 도 동일 실측) */
/* 흐름상의 자리는 sticky 래퍼가 잡고 methods 는 정렬만 — 고정 시 배경으로 뒤 콘텐츠를 가려야 하기 때문 */
.bcon05__methodsbar,
.bcon07__methodsbar,
.bcon08__methodsbar {
    margin-top: calc(var(--px)*64);
}

.bcon05__methodsbar {
    width: calc(var(--px)*1321);
    margin-left: calc(var(--px)*295);
}

/* 노드 h45 = 텍스트 top(787)~하단선 위(832). 선 832~834 는 박스 바깥이라 content-box 여야 시안과 맞는다 (bcon07 3탭도 동일 h45) */
.bcon05__method-tab,
.bcon07__method-tab,
.bcon08__method-tab {
    box-sizing: content-box;
    width: calc(var(--px)*440);
    height: calc(var(--px)*45);
    border-bottom: 3px solid currentColor;
}

/* bcon08 은 탭 2분할(1321/2=660.5) 이라 440 고정폭을 flex:1 로 override */
.bcon08__method-tab {
    flex: 1;
}

.bcon05__panel,
.bcon07__panel,
.bcon08__panel {
    margin-top: calc(var(--px)*64);
}

.bcon05__panel {
    width: calc(var(--px)*1242);
    gap: calc(var(--px)*70);
    margin-left: calc(var(--px)*295);
}

/* SAD 매칭(1.4)이 dy-1 을 확정 — 공통 margin-top 64 를 63 으로 덮어 panel 블록을 1px 올린다 */
.bcon07__panel {
    gap: calc(var(--px)*69);
    margin-top: calc(var(--px)*63);
}

/* desc line-box 하단 여백 11px 탓에 잉크 중심이 박스 중심보다 위 — 그만큼 상단을 채워 잉크를 y1036 에 앉힌다 (bcon07 도 동일 폰트조합) */
.bcon05__panel-text,
.bcon07__panel-text,
.bcon08__panel-text {
    gap: calc(var(--px)*30);
    padding-top: calc(var(--px)*15);
}

.bcon05__panel-text {
    width: calc(var(--px)*511);
}

/* FONT:AUTO bcon06 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon06__intro {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon06__intro-en {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 0.94;
}

.bcon06__intro-title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.89;
}

.bcon06__intro-desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.bcon06__methods {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.36;
}

.bcon06__method-tab.bcon06__method-tab--active {
    color: #000000;
}

.bcon06__method-tab {
    color: #dddddd;
}

.bcon06__panel-text {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon06__panel-title {
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.91;
}

.bcon06__panel-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
}
/* /FONT:AUTO bcon06 */

/* IMG:AUTO bcon06 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon06__panel-photo {
    width: calc(var(--px)*661);
    aspect-ratio: 661 / 405;
}
/* /IMG:AUTO bcon06 */

/* ★ 카테고리 탭 패널 — padding-top 은 catsbar 하단 → intro 간격이라 1번 카테고리(98)와 같다.
   시안이 넷을 세로로 이어붙여 그려서 나온 125 는 "앞 섹션과의 간격"이었고 탭에선 근거가 없다.
   배경도 깔지 않는다 — pane 의 bcon05_bg 그라디언트가 카테고리 공용 배경면이다 */
.bcon06 {
    padding-top: calc(var(--px)*98);
    padding-bottom: calc(var(--px)*49);
}

.bcon06__inner {
    width: calc(var(--px)*1320);
    margin-left: calc(var(--px)*295);
}

/* img 기본이 inline 이라 래퍼에 line-box 여백(+7px)이 붙는다 — 섹션 높이 체인이 통째로 밀림 */
.bcon06 img {
    display: block;
}

/* 71 = spec 잉크 델타. intro-desc 의 line-box(30) 가 잉크(18) 보다 12 커서 그만큼 뺀다 */
.bcon06__methodsbar {
    margin-top: calc(var(--px)*59);
}

.bcon06__method-tab {
    box-sizing: border-box;
    width: calc(var(--px)*660);
    height: calc(var(--px)*53);
    border-bottom: 3px solid currentColor;
}

.bcon06__panel {
    gap: calc(var(--px)*69);
    margin-top: calc(var(--px)*63);
}

/* panel-desc 의 line-box 가 잉크보다 11 커서 align-c 중앙이 그만큼 위로 뜬다 — 절반만 내리면 되므로 padding-top 14 */
.bcon06__panel-text {
    width: calc(var(--px)*467);
    gap: calc(var(--px)*30);
    padding-top: calc(var(--px)*14);
}

/* FONT:AUTO bcon07 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon07__intro {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon07__intro-en {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
}

.bcon07__intro-title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.89;
}

.bcon07__intro-desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.bcon07__methods {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.36;
}

.bcon07__method-tab.bcon07__method-tab--active {
    color: #000000;
}

.bcon07__method-tab {
    color: #dddddd;
}

.bcon07__panel-text {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon07__panel-title {
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.91;
}

.bcon07__panel-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
}
/* /FONT:AUTO bcon07 */

/* IMG:AUTO bcon07 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon07__panel-photo {
    width: calc(var(--px)*661);
    aspect-ratio: 661 / 405;
}
/* /IMG:AUTO bcon07 */

/* ★ 카테고리 탭 패널 — 상단 간격·배경 근거는 .bcon06 주석과 동일 */
.bcon07 {
    padding-top: calc(var(--px)*98);
    padding-bottom: calc(var(--px)*38);
}

.bcon07__inner,
.bcon08__inner {
    width: calc(var(--px)*1321);
    margin-left: calc(var(--px)*295);
}

/* img 기본이 inline 이라 래퍼에 line-box 여백(+7px)이 붙는다 — 섹션 높이 체인이 통째로 밀림 */
.bcon07 img {
    display: block;
}

/* layout-spec w357 은 잉크 bbox(측정 기하)라 고정 width 로 쓰면 desc 가 3줄 → 4줄로 깨진다.
   줄 나눔은 <br class="pc-inline"> 이 소유하므로 폭은 콘텐츠에 맡긴다 */
.bcon07__panel-text,
.bcon08__panel-text {
    width: auto;
}

/* FONT:AUTO bcon08 */
/* spec.json 파생 (tools/spec-font-to-css.js · mode=robust unit=px) — 직접 수정 금지 */
.bcon08__intro {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon08__intro-en {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 0.94;
}

.bcon08__intro-title {
    font-size: var(--titleL);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.89;
}

.bcon08__intro-desc {
    font-size: var(--bodyXL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.5;
}

.bcon08__methods {
    font-family: var(--font-pretendard);
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.36;
}

.bcon08__method-tab.bcon08__method-tab--active {
    color: #000000;
}

.bcon08__method-tab {
    color: #dddddd;
}

.bcon08__panel-text {
    font-family: var(--font-pretendard);
    color: #000000;
}

.bcon08__panel-title {
    font-size: var(--titleXS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.91;
}

.bcon08__panel-desc {
    font-size: var(--bodyL);
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1.56;
}
/* /FONT:AUTO bcon08 */

/* IMG:AUTO bcon08 */
/* layout-spec.json 파생 (tools/img-size-to-css.js · unit=--px) — 직접 수정 금지 */
.bcon08__panel-photo {
    width: calc(var(--px)*661);
    aspect-ratio: 661 / 405;
}
/* /IMG:AUTO bcon08 */

/* ★ 카테고리 탭 패널 — 상단 간격·배경 근거는 .bcon06 주석과 동일 */
.bcon08 {
    padding-top: calc(var(--px)*98);
    padding-bottom: calc(var(--px)*59);
}

/* img 기본이 inline 이라 래퍼에 line-box 여백이 붙는다 — 섹션 높이 체인이 통째로 밀림 */
.bcon08 img {
    display: block;
}

.bcon08__panel {
    gap: calc(var(--px)*69);
}

@media (max-width:599px) {
    .bcon01 {
        padding: 13vw 0 16vw;
        background-position: center top;
        background-size: auto 100%;
    }

    .bcon01__inner {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        padding: 0;
        gap: 10vw;
    }

    .bcon01__intro {
        box-sizing: border-box;
        width: 100%;
        padding-inline: 4.2667vw;
        margin-top: 0;
        gap: 7vw;
    }

    .bcon01__title,
    .bcon01__desc {
        width: auto;
        max-width: 100%;
        word-break: keep-all;
    }

    .bcon01__title {
        align-self: center;
    }

    .bcon01__desc {
        align-self: stretch;
        gap: 5vw;
    }

    .bcon01__gallery {
        display: block !important;
        width: 100%;
        margin-inline: 0;
        /* 우측 페이드는 PC 마퀴 전용 — 모바일은 카드가 가운데 정렬된 페이징이라 걷어낸다 */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .bcon01__gallery-track {
        align-items: center;
        /* 모바일은 한 장씩 넘기는 페이징 — PC 마퀴용 linear·드래그 잠금을 되돌린다.
           PC 선언이 !important 라 여기도 !important 여야 이긴다(미디어쿼리는 특이성을 못 올린다) */
        transition-timing-function: ease !important;
        pointer-events: auto;
    }

    .bcon01__card.bcon01__card--making.swiper-slide,
    .bcon01__card.bcon01__card--studio.swiper-slide,
    .bcon01__card.bcon01__card--store.swiper-slide {
        height: auto;
        border-radius: 6vw;
        overflow: hidden;
    }

    /* 모바일 간격은 Swiper spaceBetween 소유 — PC 마퀴용 인접 margin 을 되돌린다 */
    .bcon01__card + .bcon01__card {
        margin-left: 0;
    }

    .bcon01__card--studio,
    .bcon01__card--store {
        margin-top: 0;
    }

    .bcon01__card img {
        width: 100% !important;
        height: auto !important;
        border-radius: 6vw;
    }

    .bcon01__gallery-pagination {
        position: static;
        justify-content: center;
        gap: 2vw;
        margin-top: 5vw;
    }

    .bcon01__gallery-pagination .swiper-pagination-bullet {
        width: 2.4vw;
        height: 2.4vw;
        margin: 0;
        /* 기본값(비활성 #000/.2 · 활성 #007aff)이 브랜드와 무관해 섹션 포인트색으로 통일 */
        background-color: #3b02f8;
        opacity: .25;
    }

    .bcon01__gallery-pagination .swiper-pagination-bullet-active {
        opacity: 1;
    }

    .bcon02 {
        padding: 16vw 0 17vw;
    }

    .bcon02__inner,
    .bcon02__head,
    .bcon02__cards {
        flex-direction: column;
        align-items: center;
    }

    .bcon02__head {
        width: 92%;
        gap: 5vw;
    }

    .bcon02__cards {
        margin-top: 10vw;
        gap: 4vw;
    }

    .bcon02__card {
        width: 88vw;
        height: 52vw;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 7vw;
        border-radius: 6vw;
        gap: 4vw;
    }

    .bcon02__cards > .bcon02__card:nth-child(3) {
        padding-top: 7vw;
    }

    .bcon02__card-text {
        max-width: 48vw;
        gap: 3vw;
    }

    .bcon02__cards > .bcon02__card:nth-child(3) .bcon02__card-text {
        gap: 3vw;
    }

    .bcon02__card-icon-slot {
        align-self: center;
        width: auto;
        height: auto;
        margin-top: 0;
        padding: 0;
        align-items: center;
    }

    .bcon02__card-fig--print {
        width: 19.6499vw !important;
        height: auto !important;
    }

    .bcon02__card-fig--goods {
        width: 22.0725vw !important;
        height: auto !important;
    }

    .bcon02__card-fig--material {
        width: 17.6311vw !important;
        height: auto !important;
    }

    .bcon02__card-fig--sign {
        width: 20.7266vw !important;
        height: auto !important;
    }

    .bcon02__more {
        margin-top: 10vw;
        width: 70vw;
        height: 14vw;
    }

    .bcon03 {
        padding: 16vw 0 18vw;
    }

    .bcon03__inner,
    .bcon03__head,
    .bcon03__cards {
        flex-direction: column;
        align-items: center;
    }

    .bcon03__inner,
    .bcon03__head {
        width: 92%;
    }

    .bcon03__inner {
        gap: 10vw;
    }

    .bcon03__head {
        gap: 5vw;
    }

    .bcon03__title,
    .bcon03__desc {
        max-width: 100%;
        width: 100%;
        word-break: keep-all;
    }

    .bcon03__cards {
        width: 100%;
        gap: 4vw;
    }

    .bcon03__card-row {
        flex-direction: column;
        align-items: center;
        gap: 4vw;
    }

    .bcon03__card {
        position: relative;
        width: 88vw;
        height: auto;
        padding: 9vw 7vw;
        gap: 6vw;
        border-radius: 6vw;
    }

    .bcon03__card-row:first-child .bcon03__card:first-child {
        margin-top: 12vw;
        padding-top: 12vw;
    }

    .bcon03__card-row:last-child .bcon03__card:last-child {
        margin-bottom: 20vw;
    }

    .bcon03__card-text {
        gap: 3vw;
    }

    .bcon03__card-fig {
        width: 21.6832vw !important;
        height: auto !important;
    }

    .bcon03__bubble {
        width: 58vw;
        height: 17vw;
        border-radius: 5vw;
        z-index: 1;
    }

    .bcon03__bubble::after {
        left: 31vw;
        width: 4vw;
        height: 3.5vw;
    }

    .bcon03__bubble--tail-right {
        left: 2vw;
        top: -16vw;
    }

    .bcon03__bubble--tail-right::after {
        left: 12vw;
    }

    .bcon03__bubble--tail-left {
        right: 2vw;
        bottom: -18vw;
        left: auto;
        top: auto;
    }

    .bcon03__bubble--tail-left::after {
        top: auto;
        bottom: 100%;
        clip-path: polygon(0 100%, 100% 100%, 0 0);
    }

    .bcon04 {
        padding: 16vw 0;
        background-size: auto 100%;
    }

    .bcon04__inner {
        flex-direction: column;
        align-items: center;
        margin: 0;
        gap: 12vw;
    }

    .bcon04__flow {
        width: 92vw;
        height: 92vw;
    }

    .bcon04__ring-wrap {
        left: -0.1438vw;
        top: 0.1438vw;
        width: 91.7125vw;
        height: 91.7125vw;
    }

    .bcon04__ring--outer,
    .bcon04__ring--inner {
        width: 91.7125vw !important;
        height: auto !important;
    }

    .bcon04__flow-center {
        top: 32.4875vw;
    }

    .bcon04__node {
        width: 17.25vw;
        height: 17.3938vw;
    }

    .bcon04__node--learn {
        left: 12.9375vw;
        top: 14.5187vw;
    }

    .bcon04__node--make {
        left: 60.95vw;
        top: 14.5187vw;
    }

    .bcon04__node--sell {
        left: 60.95vw;
        top: 60.6625vw;
    }

    .bcon04__node--grow {
        left: 12.9375vw;
        top: 60.6625vw;
    }

    .bcon04__node-fig--learn,
    .bcon04__node-fig--make {
        width: 6.1813vw !important;
        height: auto !important;
    }

    .bcon04__node-fig--sell,
    .bcon04__node-fig--grow {
        width: 8.4813vw !important;
        height: auto !important;
    }

    .bcon04__intro {
        width: 92%;
        align-items: center;
        gap: 8vw;
    }

    .bcon04__intro-text {
        width: 100%;
        align-items: center;
        gap: 5vw;
    }

    .bcon04__title,
    .bcon04__desc {
        width: 100%;
        word-break: keep-all;
    }

    .bcon04__title {
        max-width: 92%;
    }

    .bcon04__cta {
        width: 65vw;
        height: 14.4737vw;
        border-radius: 9.7369vw;
    }

    .bcon05__head {
        padding-top: 16vw;
        padding-bottom: 12vw;
    }

    .bcon05__sticker.bcon05__sticker--question {
        top: 6vw;
        left: 5vw;
        width: 24vw;
    }

    .bcon05__headline {
        width: 92vw !important;
        height: auto !important;
    }

    .bcon05__sticker.bcon05__sticker--answer {
        top: 24vw;
        right: 4vw;
        left: auto;
        width: 28vw;
    }

    .bcon05__catsbar {
        margin-top: 0;
        position: static;
        top: auto;
        padding: 0 4vw;
    }

    .bcon05__cats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 3vw;
        margin-inline: 0;
    }

    .bcon05__cat {
        width: auto;
        height: 25vw;
        gap: 2vw;
        border-radius: 5vw;
    }

    /* 활성 변형이 (0,2,0) 이라 단일 클래스로는 못 이긴다 — 두 셀렉터 모두 명시 */
    .bcon05__cat-ko,
    .bcon05__cat-ko.bcon05__cat-ko--active {
        font-size: var(--bodyL);
    }

    .bcon05__body,
    .bcon06,
    .bcon07,
    .bcon08 {
        padding-bottom: 16vw;
    }

    .bcon06,
    .bcon07,
    .bcon08 {
        padding-top: 0;
    }

    .bcon06__inner,
    .bcon07__inner,
    .bcon08__inner {
        width: 100%;
        margin-left: 0;
    }

    .bcon05__intro,
    .bcon06__intro,
    .bcon07__intro,
    .bcon08__intro {
        width: 88vw;
        margin-top: 15vw;
        margin-inline: auto;
        gap: 0;
    }

    .bcon05__intro-title,
    .bcon06__intro-title,
    .bcon07__intro-title,
    .bcon08__intro-title {
        margin-top: 4vw;
    }

    .bcon05__intro-desc,
    .bcon06__intro-desc,
    .bcon07__intro-desc,
    .bcon08__intro-desc {
        max-width: 100%;
        width: 100%;
        margin-top: 5vw;
        word-break: keep-all;
    }

    .bcon05__methodsbar,
    .bcon06__methodsbar,
    .bcon07__methodsbar,
    .bcon08__methodsbar {
        width: 100%;
        margin-top: 12vw;
        margin-left: 0;
    }

    .bcon05__methods,
    .bcon06__methods,
    .bcon07__methods,
    .bcon08__methods {
        width: 100%;
    }

    .bcon05__method-tab,
    .bcon06__method-tab,
    .bcon07__method-tab,
    .bcon08__method-tab {
        width: auto;
        height: 11vw;
        flex: 1;
        align-items: center;
    }

    .bcon05__panel,
    .bcon06__panel,
    .bcon07__panel,
    .bcon08__panel {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 8vw;
        margin-top: 12vw;
        margin-left: 0;
    }

    .bcon05__panel-photo,
    .bcon06__panel-photo,
    .bcon07__panel-photo,
    .bcon08__panel-photo {
        width: 90vw;
    }

    .bcon05__panel-photo img,
    .bcon06__panel-photo img,
    .bcon07__panel-photo img,
    .bcon08__panel-photo img {
        width: 90vw !important;
        height: auto !important;
    }

    .bcon05__panel-text,
    .bcon06__panel-text,
    .bcon07__panel-text,
    .bcon08__panel-text {
        width: 88vw;
        align-items: center;
        gap: 4vw;
        padding-top: 0;
    }

    .bcon05__panel-title,
    .bcon05__panel-desc,
    .bcon06__panel-title,
    .bcon06__panel-desc,
    .bcon07__panel-title,
    .bcon07__panel-desc,
    .bcon08__panel-title,
    .bcon08__panel-desc {
        max-width: 100%;
        width: 100%;
        word-break: keep-all;
    }
}