/*
 * 브랜드 랜딩 전용 스타일 (site/landing.html 에서 로드)
 * - 브랜드 컬러 등 site 전역은 components-site.css(html[data-theme=light])에서 처리.
 * - 이 파일은 랜딩 고유 스타일만 담당한다.
 *   (1) 아래 "브랜드 랜딩 base" 블록: 기존 components-site.css의 #brandContainer 규칙을 이관한 것.
 *   (2) 그 아래 ".baromedi-landing …" 블록: 바로메디 색상/톤/애니메이션 오버라이드.
 *   base 를 먼저 두고 오버라이드를 뒤에 두어, 원래 파일 로드 순서(components → landing)와 동일한 캐스케이드를 유지한다.
 */

/* ─────────────────────────────────────────────────────────────
 * 브랜드 랜딩 base (components-site.css에서 이관 — #brandContainer 전용)
 * 색상/클립은 아래 ".baromedi-landing …" 규칙이 오버라이드한다.
 * ───────────────────────────────────────────────────────────── */

#brandContainer #brandHeader {
    background-color: transparent;
    box-shadow: unset;
    z-index: 100;
    transition-duration: 100ms;
    transition-property: background-color;
    transition-timing-function: ease-in;
}

.brand-phrase {
    margin-top: 5px;
}

.bg-main-people {
    background: url("/assets/images/brand-main-1.svg") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer #section1 {
    background-color: #003a83 !important;
}

#brandContainer #section2 {
    background-color: #0070ff0f !important;
}

#brandContainer #section2 .step {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 10rem;
}

#brandContainer #section2 .arrow {
    height: 10rem;
    width: 5rem;
    position: relative;
}

#brandContainer #section2 .arrow::after {
    content: "";
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/assets/images/brand-arrow.svg");
    height: 2.5rem;
    width: 2.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#brandContainer #section2 #step1.step {
    background-image: url("/assets/images/brand-folder.png");
}

#brandContainer #section2 #step2.step {
    background-image: url("/assets/images/brand-apply.png");
}

#brandContainer #section2 #step3.step {
    background-image: url("/assets/images/brand-money.png");
}

#brandContainer #section4 {
    background-color: #0070ff0f !important;
}

.bg-main-sales {
    background: url("/assets/images/bg-brand-sales.png") no-repeat;
    background-size: contain;
    background-position: center;
}

.bg-main-flow {
    background: url("/assets/images/bg-brand-flow.png") no-repeat;
    background-size: contain;
    background-position: center;
}

.bg-main-event {
    background: url("/assets/images/bg-brand-event.png") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer .bg-brand-ai-reply-2 {
    background: url("/assets/images/bg-brand-ai-reply-2.svg") no-repeat;
    background-size: 55% 55%;
    background-position: center;
}

#brandContainer .bg-brand-ai-reply-3 {
    background: url("/assets/images/bg-brand-ai-reply-3.svg") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer #section6 {
    background-color: #0070ff0f !important;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* 하단 대각선 모양을 만듦 */
    padding-bottom: 75px !important;
}

#brandContainer #section8 {
    background-color: #0070ff0f !important;
}

#brandContainer #section9 swiper-slide {
    text-align: center;
}

#brandContainer #section9 swiper-container {
    max-width: 900px;
    width: 85vw;
}

#brandContainer #section11 {
    background-color: #0070ff0f !important;
}

.btn-white-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.btn-white-30:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

/* Button XL — 랜딩페이지 대형 CTA 버튼
 * border-radius는 --bs-btn-border-radius 변수로만 지정(직접 !important 금지) →
 * .rounded-pill 유틸이 필요할 때 덮어쓸 수 있게 함. */
.btn-xl {
    --bs-btn-padding-y: 1.375rem;
    --bs-btn-padding-x: 3rem;
    --bs-btn-font-size: 1.75rem;
    --bs-btn-border-radius: 1.5625rem;
    font-size: 1.75rem !important;
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon).btn-xl {
    padding: calc(1.375rem + 1px) calc(3rem + 1px);
}

/* 브랜드 랜딩 반응형 (components-site.css에서 이관) */
@media (max-width: 1400px) and (min-width: 1200px) {
    /* xxl */
    #brandContainer .bg-brand-ai-reply-2 {
        background-size: 75% 75% !important;
    }
}
@media (max-width: 991px) and (min-width: 767px) {
    /* lg */
    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }
}
@media (max-width: 768px) and (min-width: 576px) {
    /* md */
    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }

    #brandContainer #section6 {
        background-color: #0070ff0f !important;
        clip-path: polygon(0 0, 100% 0, 100% 75.6%, 0 100%);
        padding-bottom: 90px !important;
    }
}
@media (max-width: 576px) {
    /* sm */
    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }

    #brandContainer #section6 {
        background-color: #0070ff0f !important;
        clip-path: polygon(0 0, 100% 0, 100% 81.6%, 0 100%);
        padding-bottom: 75px !important;
    }
}
@media (max-width: 767.98px) {
    .btn-xl {
        --bs-btn-padding-y: 0.775rem;
        --bs-btn-padding-x: 1.5rem;
        --bs-btn-font-size: 1.1rem;
        --bs-btn-border-radius: 0.75rem;
        font-size: 1.1rem !important;
    }
    .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon).btn-xl {
        padding: calc(0.775rem + 1px) calc(1.5rem + 1px);
    }
}


/* ─────────────────────────────────────────────────────────────
 * 바로메디 오버라이드 (색상 / 톤 / 뱃지 / 이용절차 / reveal 애니메이션)
 * ───────────────────────────────────────────────────────────── */

/* 첫번째 섹션 배경 - 브랜드 그라데이션 (청록 → 브랜드색)
 * base `#brandContainer #section1`(2 IDs + !important) 를 이기도록
 * body 전용 클래스(.baromedi-landing)를 더해 특이도를 높임 */
#brandContainer.baromedi-landing #section1 {
    background: transparent linear-gradient(180deg, #17C5C4 0%, #0593BE 100%) 0% 0% no-repeat padding-box !important;
}

/* 남색(bg-brand-1-dark) 헤더만 투명 처리 */
#brandContainer.baromedi-landing #brandHeader.bg-brand-1-dark {
    background-color: transparent !important;
}

/* 옅은 파랑(#0070ff0f) 쓰던 섹션들 → 브랜드색(#0593BE) 동일 톤으로 */
#brandContainer.baromedi-landing #section2,
#brandContainer.baromedi-landing #section4,
#brandContainer.baromedi-landing #section6 {
    background-color: #0593BE0f !important;
}

/* section11(CONTACT) 배경 흰색 - base 의 #0070ff0f 오버라이드 */
#brandContainer.baromedi-landing #section11 {
    background-color: #fff !important;
}

/* section6(이용절차) 하단 대각선 절단(clip-path) 제거 - 쏜다 원본 section6용이라 baromedi엔 불필요 */
#brandContainer.baromedi-landing #section6 {
    clip-path: none !important;
}

/* 섹션 상단 라벨 뱃지 (PROBLEM, SOLUTION 등) - 브랜드색 아웃라인 pill
 * 이 랜딩 공용. 폰트 크기/굵기는 HTML 유틸(fs-*, fw-*)로 지정. */
.baromedi-landing .section-badge {
    display: inline-block;
    padding: 0.72rem 1.5rem;
    border: 1px solid #0593BE;
    border-radius: 999px;
    color: #0593BE;
}

/* 이용절차 단계 숫자 - display-1(Bootstrap 최대)보다 큰 고정 크기 (뷰포트 너비 비의존) */
.baromedi-landing .process-num {
    font-size: 7rem;
    line-height: 1;
}

/* 이용절차 화살표 (재사용) - SVG를 mask로 1회 정의, 색은 currentColor(.step-N)에서 상속 */
.baromedi-landing .process-arrow {
    display: inline-block;
    width: 44px;
    height: 51px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M1 1 L17 11 L1 21 Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M1 1 L17 11 L1 21 Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 모바일 아래 화살표 - 실제 크기 75% (44×51 → 33×38) */
.baromedi-landing .process-arrow-sm {
    width: 33px;
    height: 38px;
}

/* 화살표 spacer - 높이(process-num)만 확보, 가로폭 0 (데스크톱 세로중앙 계산용) */
.baromedi-landing .process-arrow-spacer {
    width: 0;
    overflow: hidden;
}

/* 모바일 아래 방향 화살표 (오른쪽 삼각형 90도 회전) */
.baromedi-landing .process-arrow-down {
    transform: rotate(90deg);
}

/* 채팅문의 버튼 숨김 - 연결처가 바로쏜다 채널이라 baromedi에선 미노출 */
.baromedi-landing #chatInquiry {
    display: none !important;
}


/* 이용절차 단계별 색상 (숫자 + 그 앞 화살표) */
.baromedi-landing .step-1 { color: #93DFF6 !important; }
.baromedi-landing .step-2 { color: #42CDF7 !important; }
.baromedi-landing .step-3 { color: #0593BE !important; }
.baromedi-landing .step-4 { color: #056D8E !important; }

/* section11(CONTACT) 배경 이미지 - 오른쪽 끝에서 7% 띄움, 크기는 화면 너비 비례 */
.baromedi-landing .section11-bg {
    right: 7%;
    width: 30vw;
}

/* 스크롤 등장 애니메이션 - 뷰포트 진입 시 JS가 .in 추가. 스태거 딜레이는 --reveal-delay.
 * 트랜지션이 아닌 keyframe 애니메이션이라, 로드 시 이미 보이는 요소(히어로)도 항상 재생됨. */
.baromedi-landing .reveal { opacity: 0; }
.baromedi-landing .reveal.in       { animation: baromedi-reveal-up    .6s ease var(--reveal-delay, 0s) both; }
.baromedi-landing .reveal-left.in  { animation-name: baromedi-reveal-left; }
.baromedi-landing .reveal-right.in { animation-name: baromedi-reveal-right; }
.baromedi-landing .reveal-scale.in { animation-name: baromedi-reveal-scale; }

@keyframes baromedi-reveal-up    { from { opacity: 0; transform: translateY(24px); }           to { opacity: 1; transform: none; } }
@keyframes baromedi-reveal-left  { from { opacity: 0; transform: translateX(-24px); }          to { opacity: 1; transform: none; } }
@keyframes baromedi-reveal-right { from { opacity: 0; transform: translateX(24px); }           to { opacity: 1; transform: none; } }
@keyframes baromedi-reveal-scale { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .baromedi-landing .reveal,
    .baromedi-landing .reveal.in { opacity: 1 !important; animation: none !important; }
}

/* 커스텀 라인하이트 유틸 - lh-sm(1.25)과 lh-base(1.5) 사이 (테마엔 없는 중간값) */
.baromedi-landing .brand-lh-md {
    line-height: 1.35 !important;
}

/* 커스텀 라운드 유틸 (테마 rounded-* 와 구분되도록 brand- 접두어)
 * 이 랜딩 어디서든 재사용. 사이즈 필요 시 brand-round-md/xl 등으로 확장. */
.baromedi-landing .brand-round-lg {
    border-radius: 2.5rem !important;
}