@charset "utf-8";
/******************************************************************
    회사소개 서브페이지 공통 스타일
    - 구해줘부산방충망 (about_us)
    - 선택해야 하는 이유 (vision2)
    - 시공가능 지역 (area)
    컬러 토큰은 theme/busanbcm/css/brand.css 에 정의되어 있다.
******************************************************************/

/* gw.css 의 `#container > [id*="sub-"]{padding-bottom:170px}` 를 덮어써 하단 여백을 120px 로 맞춘다 */
#container > .bcm-sub { padding-bottom: 120px; }
/* 견적문의 페이지만 하단 여백 제거 */
#container > #sub-inquiry.bcm-sub { padding-bottom: 0; }
.bcm-sub-con {
    margin: 0 auto;
    width: 1200px;
    max-width: calc(100% - 40px);
}

/* ---------- 상단 Hero ---------- */

.bcm-sub-hero {
    padding: 100px 0;
    background: var(--navy);
    color: #fff;
}
.bcm-sub-hero .bcm-sub-eyebrow {
    margin-bottom: 12px;
    color: var(--brand-orange);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
}
.bcm-sub-hero h2 {
    margin-bottom: 24px;
    color: #fff;
    font-size: 44px;
    line-height: 1.35;
}
.bcm-sub-hero p {
    color: rgba(255, 255, 255, .8);
    font-size: 18px;
    line-height: 1.7;
}
/* Hero 안의 전화문의 CTA */
.bcm-sub-hero .bcm-sub-cta { margin-top: 36px; }

/* ---------- 섹션 ---------- */

.bcm-sub-sec { padding: 90px 0; }
.bcm-sub-sec.is-gray { background: var(--gray-bg); }
.bcm-sub-sec.is-accent { background: var(--accent-bg); }

.bcm-sub-sec h3 {
    margin-bottom: 20px;
    color: var(--navy);
    font-size: 32px;
    line-height: 1.4;
}
.bcm-sub-sec p {
    color: #555;
    font-size: 18px;
    line-height: 1.8;
}
.bcm-sub-sec p + p { margin-top: 18px; }

/* ---------- 표 ---------- */

.bcm-sub-table {
    width: 100%;
    border-top: 2px solid var(--navy);
    border-collapse: collapse;
}
.bcm-sub-table th,
.bcm-sub-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e2e2;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
}
.bcm-sub-table th {
    width: 260px;
    color: var(--navy);
    font-weight: 700;
    background: #fff;
}
.bcm-sub-table td { color: #555; background: #fff; }

/* ---------- 카드 ---------- */

.bcm-sub-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.bcm-sub-card {
    padding: 32px 28px;
    border: 1px solid #e8e8e8;
    background: #fff;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.bcm-sub-card:hover {
    box-shadow: 0 14px 34px rgba(46, 49, 99, .1);
    transform: translateY(-4px);
}
.bcm-sub-card h4 {
    margin-bottom: 12px;
    color: var(--navy);
    font-size: 19px;
}
.bcm-sub-card p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

/* 주요 서비스 카드 — 아이콘 + 전체 중앙 정렬 (about 페이지만) */
#sub-about-us .bcm-sub-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* 카드 제목 남색 → 포인트 컬러 */
#sub-about-us .bcm-sub-card h4 { color: var(--brand-orange); }
.bcm-sub-card-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
}
.bcm-sub-card-ico > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ---------- 주요 서비스 카드 그리드 스크롤 리빌 (IntersectionObserver) ----------
   각 카드가 화면에 들어올 때 아래(40px)→위, opacity 0→1 로 나타난다.
   3열 기준 스태거: 1행(1·2·3) 0/100/200ms, 2행(4·5·6) 300/400/500ms.
   딜레이는 인라인 스타일 대신 nth-child + CSS 변수로 지정한다.
   .is-anim 은 JS(IntersectionObserver 지원 + 모션 축소 아님)일 때만 붙으므로,
   JS 가 없으면 카드는 그냥 보인다(숨김 상태로 갇히지 않는다). */
@keyframes bcmSvcReveal {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bcm-svc-grid.is-anim .bcm-sub-card { opacity: 0; }
.bcm-svc-grid.is-anim .bcm-sub-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* backwards: 딜레이 동안 시작 프레임(숨김) 유지, 끝나면 정상 상태로 복귀해 hover 등과 충돌하지 않는다 */
    animation: bcmSvcReveal .6s ease var(--reveal-delay, 0ms) backwards;
}
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(1) { --reveal-delay: 0ms; }
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(2) { --reveal-delay: 100ms; }
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(3) { --reveal-delay: 200ms; }
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(4) { --reveal-delay: 300ms; }
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(5) { --reveal-delay: 400ms; }
.bcm-svc-grid.is-anim .bcm-sub-card:nth-child(6) { --reveal-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
    .bcm-svc-grid.is-anim .bcm-sub-card { opacity: 1; }
    .bcm-svc-grid.is-anim .bcm-sub-card.is-visible { animation: none; }
}

/* 왜 구해줘 부산 방충망인가 — 텍스트 왼쪽 + 이미지 3장 세로 스택 오른쪽 */
.bcm-why-grid {
    display: flex;
    align-items: center;
    gap: 48px;
}
.bcm-why-text { flex: 1 1 52%; }
.bcm-why-text h3 { margin-bottom: 20px; }
.bcm-why-text p { padding-right: 12px; }
.bcm-why-photos {
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 사례 사진 3장 규격 통일 — 같은 비율로 크롭해 높이를 일치시킨다 */
.bcm-why-photos > img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
}

/* 선택해야 하는 이유 카드 (why-us) — 오렌지 카드, 제목/설명 상단, 일러스트가 하단 오른쪽으로 넘쳐 잘린다 */
#sub-why-us .bcm-sub-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
#sub-why-us .bcm-sub-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    padding: 32px 30px;
    border: 0;
    background: #ff703c;
    text-align: left;
}
#sub-why-us .bcm-sub-card:hover {
    box-shadow: none;
    transform: none;
    background: #ff703c;
}
#sub-why-us .bcm-reason-body { position: relative; z-index: 1; }
#sub-why-us .bcm-sub-card h4 {
    margin-bottom: 12px;
    color: #fff;
    font-size: 21px;
}
#sub-why-us .bcm-sub-card p {
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    line-height: 1.7;
}
/* 일러스트를 하단에 크게 두고 오른쪽으로 넘겨 잘리게 한다 */
#sub-why-us .bcm-reason-fig {
    position: absolute;
    right: -9%;
    bottom: 18px;
    height: 152px;
    margin: 0;
    padding: 0;
}
#sub-why-us .bcm-reason-fig > img {
    display: block;
    width: auto;
    height: 100%;
}

@media screen and (max-width: 768px) {
    #sub-why-us .bcm-sub-cards { grid-template-columns: 1fr; }
}

/* 상황별 추천 방충망 — 아이콘+상황 카드, 호버 시 추천 제품 노출 */
/* 위 3개 + 아래 2개(가운데 정렬). 6열 그리드에서 카드마다 2칸씩 차지하고,
   아래 두 장은 한 칸씩 안쪽으로 넣어 가운데에 오게 한다. */
.bcm-rec-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-top: 32px;
}
.bcm-rec-card {
    position: relative;
    overflow: hidden;
    grid-column: span 2;
    min-height: 200px;
    border: 1px solid #e8e8e8;
    background: #fff;
}
.bcm-rec-card:nth-child(4) { grid-column: 2 / span 2; }
.bcm-rec-card:nth-child(5) { grid-column: 4 / span 2; }
.bcm-rec-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 30px 20px;
    text-align: center;
}
.bcm-rec-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background: var(--accent-bg);
    color: var(--cta-orange);
    font-size: 30px;
}
.bcm-rec-ico img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}
.bcm-rec-situation {
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}
/* 호버 시 덮이는 추천 제품 오버레이 */
.bcm-rec-product {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    text-align: center;
    opacity: 0;
    transition: opacity .3s;
}
.bcm-rec-card:hover .bcm-rec-product { opacity: 1; }

@media screen and (max-width: 768px) {
    .bcm-rec-cards { grid-template-columns: repeat(2, 1fr); }
    .bcm-rec-card,
    .bcm-rec-card:nth-child(4),
    .bcm-rec-card:nth-child(5) { grid-column: auto; }
}
@media screen and (max-width: 480px) {
    .bcm-rec-cards { grid-template-columns: 1fr; }
    .bcm-rec-card { min-height: 160px; }
}

/* 시공 사례 — 왼쪽 텍스트+CTA, 오른쪽 이미지 콜라주(지금은 회색 자리표시) */
.bcm-case-grid {
    display: flex;
    align-items: center;
    gap: 48px;
}
.bcm-case-text { flex: 1 1 40%; }
.bcm-case-text h3 { margin-bottom: 16px; }
.bcm-case-cta { margin-top: 28px; flex-wrap: wrap; }
.bcm-case-collage {
    flex: 1 1 60%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 108px);
    gap: 12px;
}
.bcm-case-ph { overflow: hidden; background: #dcdde1; }
.bcm-case-ph > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 빈틈 없이 채워지도록 크기를 섞어 배치한다 (3열 × 4행) */
.bcm-case-ph:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.bcm-case-ph:nth-child(2) { grid-column: 3;     grid-row: 1; }
.bcm-case-ph:nth-child(3) { grid-column: 3;     grid-row: 2; }
.bcm-case-ph:nth-child(4) { grid-column: 1;     grid-row: 3 / 5; }
.bcm-case-ph:nth-child(5) { grid-column: 2 / 4; grid-row: 3; }
.bcm-case-ph:nth-child(6) { grid-column: 2;     grid-row: 4; }
.bcm-case-ph:nth-child(7) { grid-column: 3;     grid-row: 4; }

@media screen and (max-width: 768px) {
    .bcm-case-grid { flex-direction: column; align-items: stretch; gap: 28px; }
    .bcm-case-collage { grid-template-rows: repeat(4, 22vw); }
}

/* ---------- 지역 태그 ---------- */

.bcm-area-group + .bcm-area-group { margin-top: 28px; }
.bcm-area-group h4 {
    margin-bottom: 14px;
    color: var(--navy);
    font-size: 18px;
}
.bcm-area-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bcm-area-tags > li {
    padding: 10px 18px;
    border: 1px solid #ddd;
    background: #fff;
    color: #444;
    font-size: 15px;
}

/* 신뢰 포인트 리스트 (area.php) — 아이콘 없이 한 줄로 가운데 정렬, 사이 구분선 */
.bcm-point-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}
.bcm-point-list > li {
    position: relative;
    padding: 4px 22px;
    color: var(--navy);
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 16px;
}
.bcm-point-list > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: #d5d5d5;
}
@media screen and (max-width: 560px) {
    .bcm-point-list > li::after { display: none; }
}

/* 시공 가능 공간 — 세로 번호 리스트 (area.php).
   호버하면 해당 행에 시공 이미지(.bcm-space-photo)가 배경으로 떠오르고 글자가 흰색이 된다.
   이미지가 없는 행은 은은한 배경 변화만 준다. */
.bcm-space-list {
    margin-top: 32px;
    padding: 0;
    list-style: none;
    border-top: 1px solid #e2e2e2;
}
.bcm-space-row {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 92px;
    padding: 22px 26px;
    border-bottom: 1px solid #e2e2e2;
    background: transparent;
    transition: background .3s ease;
}
.bcm-space-row:hover { background: #fff; }
/* 배경 시공 이미지 (호버 시 노출) */
.bcm-space-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s ease, transform .6s ease;
    z-index: 0;
}
.bcm-space-row.has-photo:hover .bcm-space-photo { opacity: 1; transform: scale(1.04); }
/* 이미지 위 어두운 오버레이 (글자 가독성) */
.bcm-space-row.has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(34, 37, 74, .5);
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 1;
}
.bcm-space-row.has-photo:hover::before { opacity: 1; }
.bcm-space-num {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    color: var(--cta-orange);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 16px;
    transition: color .3s ease;
}
.bcm-space-label {
    position: relative;
    z-index: 2;
    color: var(--navy);
    font-weight: 700;
    font-size: 20px;
    transition: color .3s ease;
}
.bcm-space-row.has-photo:hover .bcm-space-num { color: var(--brand-orange); }
.bcm-space-row.has-photo:hover .bcm-space-label { color: #fff; }

@media screen and (max-width: 768px) {
    .bcm-space-row { min-height: 76px; padding: 18px 18px; gap: 16px; }
    .bcm-space-label { font-size: 18px; }
}

/* 시공 사례 흐르는 띠 (area.php) — 실제 현장이 좌우로 계속 흐른다.
   두 줄이 반대 방향으로 흘러 '부산 곳곳, 다양하게' 를 보여준다. 마우스 올리면 정지.
   라이브러리 없이 CSS 애니메이션만 사용. */
.bcm-area-marquee {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
    overflow: hidden;
    /* 양끝을 부드럽게 페이드 아웃 */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.bcm-area-row {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: bcmAreaMarquee 46s linear infinite;
}
/* 둘째 줄은 반대 방향 + 살짝 다른 속도로 흘려 서로 어긋나게 */
.bcm-area-row.is-reverse {
    animation-direction: reverse;
    animation-duration: 54s;
}
.bcm-area-marquee:hover .bcm-area-row { animation-play-state: paused; }
/* 아이템 세트를 2번 반복해 두므로 -50% 에서 이음매 없이 순환 */
@keyframes bcmAreaMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.bcm-area-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 22px;
    border: 1px solid #e8e8e8;
    background: #fff;
    white-space: nowrap;
}
.bcm-area-item .bcm-area-loc {
    color: var(--cta-orange);
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 13px;
}
.bcm-area-item .bcm-area-place {
    color: var(--navy);
    font-weight: 700;
    font-size: 16px;
}
.bcm-area-item .bcm-area-prod { color: #999; font-size: 13px; }

/* 모션 축소 선호 시: 흐름 정지 + 줄바꿈으로 정적 나열 */
@media (prefers-reduced-motion: reduce) {
    .bcm-area-marquee { -webkit-mask-image: none; mask-image: none; }
    .bcm-area-row { animation: none; width: auto; flex-wrap: wrap; }
}

/* ---------- SNS 연결 ---------- */

.bcm-sub-sns {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
.bcm-sub-sns > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    min-height: 44px;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    transition: border-color .3s, color .3s;
}
.bcm-sub-sns > a:hover { border-color: var(--cta-orange); color: var(--cta-orange); }

/* ---------- 브랜드 소개 (왼쪽 회색 텍스트 + 오른쪽 인물) ---------- */

.bcm-intro { padding: 90px 0; }
/* 좌우 여백은 다른 섹션(bcm-sub-con)과 동일하게 1200px 컨테이너로 맞춘다 */
.bcm-intro-grid {
    display: flex;
    align-items: stretch;
    gap: 48px;
    min-height: 480px;
    margin: 0 auto;
    width: 1200px;
    max-width: calc(100% - 40px);
}
.bcm-intro-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
}
.bcm-intro-text-inner { max-width: 560px; }
.bcm-intro-text h3 {
    margin-bottom: 24px;
    color: var(--navy);
    font-size: 32px;
    line-height: 1.4;
}
.bcm-intro-text p {
    padding-right: 12px;
    color: #555;
    font-size: 18px;
    line-height: 1.8;
}
.bcm-intro-text p + p { margin-top: 16px; }
/* 사진 높이를 옆 텍스트 단과 맞추되 원본 비율은 그대로 둔다.
   원본이 정사각(900x900)이므로, 칸을 1:1 로 두고 텍스트 높이만큼 늘리면
   폭이 높이를 따라와 잘리는 부분 없이 정확히 채워진다.
   (max-width 는 텍스트가 아주 길어졌을 때 사진이 과하게 커지는 것만 막는 안전장치) */
.bcm-intro-photo {
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    max-width: 45%;
    overflow: hidden;
}
.bcm-intro-photo > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* area.php — 이미지 자리(플레이스홀더). 실제 이미지 준비되면 <img> 로 교체한다.
   점선 대신 은은한 회색 블록으로 자리만 잡아둔다. */
.bcm-photo-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 360px;
    background: var(--gray-bg);
    color: #c4c4c4;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* area.php 전용 — 방문 소개 섹션은 텍스트+이미지를 세로(컬럼)로 쌓고 가운데 정렬한다.
   (.bcm-intro-grid 는 about_us 와 공용이라 #sub-area 로 한정) */
#sub-area .bcm-intro-grid {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    min-height: 0;
    text-align: center;
}
#sub-area .bcm-intro-text { width: 100%; justify-content: center; }
#sub-area .bcm-intro-text-inner { max-width: 820px; }
#sub-area .bcm-intro-text p { padding-right: 0; }
#sub-area .bcm-intro-photo { width: 100%; flex: 0 0 auto; }

/* ---------- 이미지 슬롯 ---------- */

.bcm-sub-figure {
    overflow: hidden;
    margin-top: 40px;
    aspect-ratio: 16 / 10;
}
.bcm-sub-figure.bcm-sub-figure-wide { aspect-ratio: 21 / 9; }
.bcm-sub-figure > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bcm-figure-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg, #f1f1f1, #f1f1f1 12px, #f7f7f7 12px, #f7f7f7 24px);
    color: #bbb;
    font-size: 14px;
}

.bcm-sub-lead { margin-bottom: 8px; }

/* 시공 철학 이미지 모자이크 — 왼쪽 큰 이미지 + 오른쪽 상하 2분할 */
.bcm-philo-mosaic {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: 560px;
    margin-top: 40px;
}
.bcm-philo-main { grid-row: 1 / 3; }
.bcm-philo-cell { overflow: hidden; }
.bcm-philo-cell > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1);
}
.bcm-philo-cell:hover > img { transform: scale(1.05); }

/* ---------- 시공 사례 슬라이더 ---------- */

/* 시공 사례: CTA 버튼을 슬라이더 위에 둔다 */
.is-accent .bcm-sub-cta-center { margin-top: 32px; }
.bcm-case-slider {
    overflow: hidden;
    margin: 44px 0 0;
    /* Swiper 등속 흐름 */
}
.bcm-case-slider .swiper-wrapper { transition-timing-function: linear; }
/* 카드 폭 최대 300px (3:4 비율). 좁은 화면에서는 줄어든다. */
.bcm-case-slider .swiper-slide { width: min(300px, 72vw); }
.bcm-case-thumb {
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.bcm-case-thumb > img,
.bcm-case-thumb > .bcm-figure-empty {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 하단 공통 CTA 배너 (강조) ---------- */

.bcm-cta-band {
    margin-top: 120px;
    padding: 70px 0;
    background: url('../../img/about/cta-band-bg.jpg') center / cover no-repeat;
}
.bcm-cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.bcm-cta-band-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: var(--brand-orange);
    font-size: 14px;
    font-weight: 700;
}
.bcm-cta-band-left h3 {
    margin-bottom: 12px;
    color: #fff;
    font-size: 34px;
    line-height: 1.35;
}
.bcm-cta-band-left p {
    color: rgba(255, 255, 255, .8);
    font-size: 18px;
    line-height: 1.7;
}
.bcm-cta-band-right {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px;
}
/* 두 버튼 폭을 동일하게 (전화는 Outfit 숫자, 견적은 한글이라 내용 폭이 달라진다) */
.bcm-cta-band-tel,
.bcm-cta-band-quote { min-width: 200px; }
.bcm-cta-band-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 26px;
    min-height: 44px;
    background: var(--brand-orange);
    color: #fff;
    font-family: "Outfit", "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 16px;
    transition: background .3s;
}
.bcm-cta-band-tel:hover { background: var(--cta-orange); color: #fff; }
.bcm-cta-band-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 26px;
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    transition: background .3s, color .3s, border-color .3s;
}
.bcm-cta-band-quote:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- CTA 버튼 ---------- */

.bcm-sub-cta {
    display: flex;
    gap: 12px;
}
.bcm-sub-cta-band .bcm-sub-cta { justify-content: center; }
.bcm-sub-cta.bcm-sub-cta-center { justify-content: center; }
.bcm-sub-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 8px;
    /* 좌우 패딩 동일. min-width 를 두면 짧은 버튼은 내용이 가운데 몰려 한쪽이 비어 보이므로 쓰지 않는다. */
    padding: 16px 32px;
    /* 브리프 9장: 터치 영역 최소 44px */
    min-height: 56px;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    transition: background-color .3s, color .3s, border-color .3s;
}
.bcm-sub-cta .is-tel {
    border: 1px solid var(--brand-orange);
    background: var(--brand-orange);
    color: #fff;
}
.bcm-sub-cta .is-tel:hover { border-color: var(--cta-orange); background: var(--cta-orange); color: #fff; }
/* 흰/어두운 배경 위 아웃라인 버튼 */
.bcm-sub-cta .is-quote {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}
.bcm-sub-cta .is-quote:hover { background: #fff; color: var(--navy); }
/* 밝은(연오렌지) 배경 위 아웃라인 버튼 */
.bcm-sub-cta .is-line {
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
}
.bcm-sub-cta .is-line:hover { background: var(--navy); color: #fff; }

/* ---------- 반응형 ---------- */

@media screen and (max-width: 1024px) {
    .bcm-sub-cards { grid-template-columns: repeat(2, 1fr); }
    .bcm-sub-hero { padding: 70px 0; }
    .bcm-sub-hero h2 { font-size: 34px; }
    .bcm-sub-sec { padding: 60px 0; }
    .bcm-sub-sec h3, .bcm-cta-band-left h3 { font-size: 26px; }
}

@media screen and (max-width: 768px) {
    .bcm-sub-cards { grid-template-columns: 1fr; }
    .bcm-sub-cta { flex-direction: column; }
    .bcm-sub-cta > a { width: 100%; }

    /* 하단 CTA 배너: 좌우 2단 -> 세로 1단. 문구는 가운데 정렬하고
       버튼은 폭을 꽉 채워 두 개가 서로 다른 너비로 어긋나지 않게 한다. */
    .bcm-cta-band { margin-top: 80px; padding: 56px 0; }
    .bcm-cta-band-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 28px;
    }
    .bcm-cta-band-right {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .bcm-cta-band-tel,
    .bcm-cta-band-quote {
        width: 100%;
        min-width: 0;
        white-space: nowrap;
    }
    .bcm-sub-sns { flex-direction: column; }
    .bcm-sub-table th { width: 120px; padding: 14px 12px; }
    .bcm-sub-table td { padding: 14px 12px; }

    /* 브랜드 소개: 이미지가 위, 텍스트가 아래로 세로 배치 */
    .bcm-intro { padding: 60px 0; }
    .bcm-intro-grid {
        flex-direction: column;
        gap: 24px;
        min-height: 0;
    }
    /* 세로로 쌓이면 옆에 맞출 텍스트가 없으므로 폭 100% + 원본 비율 그대로 */
    .bcm-intro-photo {
        order: -1;
        flex: 0 0 auto;
        align-self: auto;
        aspect-ratio: auto;
        max-width: none;
    }
    .bcm-intro-photo > img { height: auto; }
    .bcm-intro-text { padding: 0; }
    .bcm-intro-text-inner { max-width: none; }

    /* 시공 철학 모자이크 높이 축소 */
    .bcm-philo-mosaic { height: 420px; gap: 10px; }

    /* 왜 구해줘 부산 방충망인가: 텍스트 위, 이미지 아래로 세로 배치 */
    .bcm-why-grid { flex-direction: column; align-items: stretch; gap: 28px; }

    /* CTA 배너 세로 스택 */
    .bcm-cta-band-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .bcm-cta-band-right { min-width: 0; }
}

/* ---------- 견적문의 상담 절차 — 세로 타임라인 (inquiry.php) ----------
   화면에 들어오면(.is-run) 포인트 색이 위→아래로 차례로 차오르며 '진행되는' 느낌을 준다. */

/* 제목 그룹(왼쪽) + 타임라인(오른쪽) 좌우 50:50, 수직 중앙 정렬. 섹션 기본 패딩은 비우고 여기서 120px. */
#sub-inquiry .bcm-sub-sec.is-gray { padding: 0; }
.bcm-inq-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 120px 0;
}
.bcm-inq-head { flex: 1 1 0; }
.bcm-inq-head h3 { margin-bottom: 16px; }

.bcm-inq-timeline {
    position: relative;
    flex: 1 1 0;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}
.bcm-inq-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 0;
}
/* 마커 사이 연결선 — 각 스텝이 자기 마커에서 다음 마커까지 그린다(간격이 넓어져도 자동 정렬).
   ::before = 기본 점선, ::after = 채워지는 포인트 실선(점선→선). */
.bcm-inq-step:not(:last-child)::before,
.bcm-inq-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 27px;              /* 마커(56) 중앙 x = 28, 선 2px 보정 */
    top: 60px;               /* 마커 세로 중앙 = padding-top(32) + 반지름(28) */
    width: 2px;
    height: 100%;            /* 다음 스텝 마커 중앙까지 */
}
.bcm-inq-step:not(:last-child)::before {
    background: repeating-linear-gradient(#d3d3d3 0 4px, transparent 4px 10px);
}
.bcm-inq-step:not(:last-child)::after {
    height: 0;
    background: var(--brand-orange);
    transition: height .55s ease;
}
.bcm-inq-step.is-done:not(:last-child)::after { height: 100%; }

.bcm-inq-marker {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    border: 2px solid #d3d3d3;
    background: #fff;
    color: #bbb;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    font-size: 18px;
    transition: background .45s ease, border-color .45s ease, color .45s ease, transform .45s ease;
}
.bcm-inq-body { padding-top: 8px; }
.bcm-inq-body h4 { margin-bottom: 6px; color: var(--navy); font-size: 20px; }
.bcm-inq-body p { color: #666; font-size: 15px; line-height: 1.7; }

/* 진행: 스텝이 순서대로(.is-done) 포인트 컬러로 채워진다 (순서는 JS 가 제어) */
.bcm-inq-step.is-done .bcm-inq-marker {
    border-color: var(--brand-orange);
    background: var(--brand-orange);
    color: #fff;
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .bcm-inq-step:not(:last-child)::after { transition: none; }
    .bcm-inq-marker { transition: none; }
}
@media screen and (max-width: 768px) {
    .bcm-inq-layout { flex-direction: column; gap: 24px; padding: 60px 0; }
    .bcm-inq-head { max-width: none; }
    .bcm-inq-timeline { max-width: none; }
    .bcm-inq-marker { width: 48px; height: 48px; font-size: 16px; }
    .bcm-inq-step:not(:last-child)::before,
    .bcm-inq-step:not(:last-child)::after { left: 23px; top: 56px; }
    .bcm-inq-body h4 { font-size: 18px; }
}