@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;600;700&display=swap');

/* ==========================================================================
   CareSource - common.css
   index / air / cs1 / cs_b2b 4개 페이지가 공유하는 공통 스타일
   페이지별로 달라지는 값은 아래 :root 변수로 뽑아두었고,
   각 페이지 CSS(css/index.css 등)에서 변수만 덮어쓰면 됩니다.
   (cs2.html은 디자인 시스템이 완전히 달라 css/cs2.css 단독 사용)
   ========================================================================== */

:root {
    /* --- 브랜드 컬러 --- */
    --cs-navy: #1e3a8a;
    --cs-accent: #1e3a8a;

    /* --- Hero 섹션 --- */
    --hero-height: 85vh;
    --hero-min-height: 650px;
    --hero-overlay-from: rgba(15, 23, 42, 0.3);
    --hero-overlay-to: rgba(15, 23, 42, 0.8);

    /* --- 네비게이션 --- */
    --nav-bg-alpha: 0.9;
    --mobile-menu-bg-alpha: 0.97;
    --hamburger-color: #1e3a8a;

    /* --- 스크롤 등장 애니메이션 --- */
    --reveal-easing: ease-out;
    --reveal-duration: 0.8s;

    /* --- Before / After 슬라이더 --- */
    --ba-handle-bg: #1e3a8a;
    --ba-icon-font: "Font Awesome 5 Free";
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body {
    font-family: 'Pretendard', sans-serif;
    scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   2. Hero Section
   -------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    height: var(--hero-height);
    min-height: var(--hero-min-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    overflow: hidden;
}

/* 배경 이미지가 서서히 확대되는 효과 */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    transition: transform 15s ease-out;
    transform: scale(1.1);
}

.hero-section.active .hero-bg {
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--hero-overlay-from), var(--hero-overlay-to));
    z-index: -1;
}

/* --------------------------------------------------------------------------
   3. Care-Badge (신뢰 배지 애니메이션)
   -------------------------------------------------------------------------- */
.care-badge-pulse {
    animation: pulse-blue 2s infinite;
}

@keyframes pulse-blue {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgba(30, 58, 138, 0.4); }
    70%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(30, 58, 138, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0    rgba(30, 58, 138, 0); }
}

/* --------------------------------------------------------------------------
   4. Navigation / Mobile Menu
   -------------------------------------------------------------------------- */
.glass-nav {
    background: rgba(255, 255, 255, var(--nav-bg-alpha));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mobile-menu {
    display: none;
    background: rgba(255, 255, 255, var(--mobile-menu-bg-alpha));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mobile-menu.open {
    display: block;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--hamburger-color);
    margin: 5px 0;
    transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Scroll Reveal
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--reveal-duration) var(--reveal-easing);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* --------------------------------------------------------------------------
   6. Before / After 슬라이더
   -------------------------------------------------------------------------- */
.ba-slider {
    position: relative;
    overflow: hidden;

    /* 좌우 터치 시 모바일 기본 스크롤 간섭 방지 */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;

    /* iOS 렌더링 증발 버그 대응 (하드웨어 가속) */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    isolation: isolate;
}

.ba-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: white;
    left: 50%;
    cursor: ew-resize;
    z-index: 10;
}

.ba-handle::after {
    content: '\f337';               /* fa-arrows-alt-h */
    font-family: var(--ba-icon-font);
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ba-handle-bg);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   7. 서비스 카드 호버 확대
   -------------------------------------------------------------------------- */
.service-bg {
    transition: transform 0.5s ease;
}

.service-card:hover .service-bg {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   8. 투명 배경 이미지 보호용 유틸리티
   투명 PNG(로고 등)를 어두운 영역에 올려야 할 때 이 클래스를 붙이면
   이미지 뒤에 흰 배경이 깔려 로고가 묻히지 않습니다.
   예: <img src="img/logo_m2.png" class="img-white-bg">
   -------------------------------------------------------------------------- */
.img-white-bg {
    background-color: #ffffff;
}