/* ============================================
   PC 레이아웃 기준폭 1920px
   - 모든 치수는 1920px 기준 vw (화면 폭에 비례 확대/축소)
   - 1920px를 넘으면 더 커지지 않도록 상한 고정
   ============================================ */
body {
    max-width: 1920px;
    margin: 0 auto;
    overflow-x: clip;   /* 풀블리드 섹션이 가로 스크롤을 만들지 않도록 */
    /* Pretendard (common.css의 시스템 폰트 스택 재정의) */
    font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', 'Roboto', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
}

/* 버튼·입력 요소는 폰트를 상속하지 않으므로 명시 */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* 애니메이션 */
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(-1.0417vw); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-1.0417vw); }
}

/* 메시지 알림 */
.message-notification {
    position: fixed;
    top: 4.1667vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: min(0.7812vw, 15px) min(1.5625vw, 30px);
    border: 0.0521vw solid;
    border-radius: 0.2604vw;
    box-shadow: 0 0.1042vw 0.4167vw rgba(0,0,0,0.2);
    animation: fadeInOut 3s ease-in-out;
}

.message-notification.success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.message-notification.error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* 관리자 버튼 */
.admin-btn {
    padding: min(0.4167vw, 8px) min(0.8333vw, 16px);
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 0.2604vw;
    font-size: min(0.7292vw, 14px);
    display: inline-block;
}

.admin-btn-container {
    margin-top: min(0.7812vw, 15px);
}

/* Contact Section */
.contact-phone-link {
    color: inherit;
    text-decoration: none;
}

/* PC/모바일 디스플레이 제어 */
.desktop-only {
    display: flex;
}

/* Hero Section — 배경은 화면 전체 폭, 내용만 1920px */
.hero-section {
    width: 100vw;
    padding: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    background-color: #14213D;
    background-image: url('/image/heroBg-48e6045b71c3803d98add7ffd1400015.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 29.1667vw;
    display: flex;
    align-items: center;
}

.hero-bg-shape {
    display: none;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: min(6.7708vw, 130px) min(11.9792vw, 230px);
    display: flex;
    align-items: center;
}

.hero-text {
    flex: 1;
}

.hero-illustration {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: min(2.0833vw, 40px);
}

.hero-illustration img {
    width: 100%;
    max-width: 525px;
    height: auto;
    display: block;
}

.hero-title {
    font-size: min(3.5417vw, 68px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin: 0 0 min(1.875vw, 36px) 0;
    letter-spacing: -0.026vw;
}

.hero-title-accent {
    color: #F4D120;
    font-weight: 800;
}

.hero-buttons {
    display: flex;
    gap: min(1.5625vw, 30px);
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: min(0.4167vw, 8px);
    padding: min(0.625vw, 12px) min(1.25vw, 24px);
    font-size: min(1.2891vw, 24.75px);
    font-weight: 700;
    border: none;
    border-radius: 0.4297vw;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.hero-btn-mail {
    background-color: #F4D120;
    color: #1A2D52;
}

.hero-btn-mail:hover {
    transform: translateY(-0.1042vw);
    box-shadow: 0 0.4167vw 0.9375vw rgba(244, 209, 32, 0.35);
    filter: brightness(1.05);
}

.hero-btn-storage {
    background-color: #2D6BC4;
    color: #ffffff;
}

.hero-btn-storage:hover {
    transform: translateY(-0.1042vw);
    box-shadow: 0 0.4167vw 0.9375vw rgba(45, 107, 196, 0.4);
    filter: brightness(1.08);
}

/* ============================================
   우측 상단 고정 상담 버튼 (PC/모바일 모두 표시)
   ============================================ */
.fixed-consult-buttons {
    position: fixed;             /* 화면에 고정 (스크롤해도 위치 유지) */
    display: flex;               /* Flexbox 사용 */
    flex-direction: column;      /* 세로 배치 (카톡상담, 전화상담 순서로) */
    right: 0.7812vw;             /* PC 기본값: 오른쪽에서 15px */
    top: 6.25vw;                 /* PC 기본값: 헤더 아래 120px */
    gap: min(0.4167vw, 8px);               /* 버튼 간 간격 8px */
    z-index: 50;                 /* 헤더(z-index: 100)보다는 낮지만 다른 요소보다 높게 */
}

/* 모바일용 고정 버튼 스타일 - 박스 형태 */
.fixed-consult-btn {
    background-color: #ffffff;   /* 기본 흰색 배경 */
    border: none;                /* 테두리 없음 */
    border-radius: 0;            /* 모서리 각지게 */
    padding: min(0.7292vw, 14px) min(0.625vw, 12px);          /* 내부 여백 */
    display: flex;
    flex-direction: column;      /* 세로 배치: 아이콘 위, 텍스트 아래 */
    align-items: center;
    justify-content: center;
    gap: min(0.4167vw, 8px);                    /* 아이콘과 텍스트 간격 */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.1042vw 0.5208vw rgba(0, 0, 0, 0.12);
    width: 5.7292vw;                /* 고정 너비 */
    min-height: 5.2083vw;           /* 최소 높이 */
}

/* 카카오톡 상담 버튼 - 노란색 배경 */
.fixed-consult-btn.kakao-btn {
    background-color: #FEE500;   /* 카카오톡 노란색 */
}

.fixed-consult-btn.kakao-btn span {
    color: #392020;              /* 어두운 갈색 텍스트 */
}

/* 전화 상담 버튼 - 회색 배경 */
.fixed-consult-btn.call-btn {
    background-color: #E8E8E8;   /* 밝은 회색 배경 */
    display: none;               /* PC에서는 숨김 */
}

.fixed-consult-btn.call-btn span {
    color: #333333;              /* 어두운 회색 텍스트 */
}

/* 버튼 호버 효과 */
.fixed-consult-btn:hover {
    transform: scale(1.05);      /* 살짝 확대 */
    box-shadow: 0 0.2083vw 0.8333vw rgba(0, 0, 0, 0.2);
}

/* 아이콘 크기 */
.fixed-consult-btn img {
    width: min(2.3438vw, 45px);                 /* 아이콘 크기 줄임 */
    height: min(2.3438vw, 45px);
    object-fit: contain;
    display: block;
}

/* 텍스트 스타일 */
.fixed-consult-btn span {
    font-size: min(0.7292vw, 14px);
    font-weight: 700;
    transition: none;
}

/* ============================================
   서비스 소개 섹션 (우편대행 / 물품보관관리)
   ============================================ */
/* 섹션 공통 상하 여백 (common.css의 80px 재정의) */
section {
    padding: min(7.8125vw, 150px) min(3.125vw, 60px);
}

/* 장점 섹션: 위 여백 줄이고 아래 여백 늘림 */
.features-section {
    padding-top: min(5.2083vw, 100px);
    padding-bottom: min(10.4167vw, 200px);
}

/* 물품보관 장점: 위는 넉넉하게, 아래는 짧게 */
.storage-features-section {
    padding-top: min(10.4167vw, 200px);
    padding-bottom: min(7.8125vw, 150px);
}

.service-intro-section {
    background-color: #ffffff;
    padding-top: min(7.8125vw, 150px);
    padding-bottom: min(7.8125vw, 150px);
    /* 좌우 패딩은 1920px 기준값(113px)에서 상한 고정 — 넘어가면 콘텐츠가 좁아져 글자 줄바꿈 발생 */
    padding-left: min(5.8854vw, 113px);
    padding-right: min(5.8854vw, 113px);
    /* sticky 헤더에 가리지 않도록 앵커 정지 위치 보정 */
    scroll-margin-top: min(5.2083vw, 100px);
}

/* 히어로 아래 여백 확보 */
.mail-intro-section {
    padding-top: min(9.375vw, 180px);
}

/* 배경은 화면 전체 폭, 내용만 1920px */
.storage-intro-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    background-color: #EAF2FB;
    background-image: url('/image/storageIntroBg-c6b6fb64ca60699d318b856437761694.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 물품보관 소개: 좌우 패딩 391px */
.storage-intro-section {
    padding-left: min(20.3646vw, 391px);
    padding-right: min(20.3646vw, 391px);
}

.storage-intro-section > * {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

/* 푸터: 배경은 화면 전체 폭, 내용만 1920px */
.footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.footer .footer-content {
    max-width: 1920px;
}

/* 푸터 글자 크기 */
.footer .footer-link {
    font-size: 20px;
}

.footer .footer-right p {
    font-size: 15px;
}

.footer .company-info p {
    font-size: 15px;
}

.footer .footer-logo {
    font-size: 34px;
}

/* 물품보관 흐름 카드: 배경 없이 섹션 배경 위에 바로 얹기 */
.storage-intro-section .service-flow-card {
    background-color: transparent;
    padding: min(4.7917vw, 92px) 0 0;   /* 좌우 패딩 제거 */
    overflow: visible;
}

.storage-intro-section .service-flow-card::before {
    display: none;
}

.storage-intro-section .service-flow-body {
    padding-bottom: 0;
}

.service-intro-header {
    text-align: center;
}

/* 상단 뱃지 (알약 형태) */
.service-badge {
    display: inline-flex;
    align-items: center;
    gap: min(0.5208vw, 10px);
    padding: min(0.5208vw, 10px) min(1.4583vw, 28px);
    border: 0.0781vw solid #1871FE;
    border-radius: 1.9531vw;
    background-color: #ffffff;
    color: #1871FE;
    font-size: min(1.3724vw, 26.35px);
    font-weight: 700;
    margin-bottom: min(1.0417vw, 20px);
}

.service-badge-icon {
    width: min(1.7708vw, 34px);
    height: min(1.7708vw, 34px);
    object-fit: contain;
    display: block;
}

.service-intro-title {
    font-size: min(3.0989vw, 59.5px);
    font-weight: 800;
    color: #000000;
    line-height: 1.35;
    margin: 0 0 min(1.1458vw, 22px) 0;
    letter-spacing: -0.0521vw;
}

.service-intro-title .accent {
    color: #254681;
}

.service-intro-desc {
    font-size: min(1.6823vw, 32.3px);
    font-weight: 500;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
}

.service-intro-note {
    font-size: min(1.3724vw, 26.35px);
    color: rgba(0, 0, 0, 0.5);
    margin: min(0.9375vw, 18px) 0 min(4.6875vw, 90px) 0;
}

/* 흐름 카드 */
.service-flow-card {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    background-color: #F0F5FD;
    border-radius: 1.0417vw;
    padding: min(4.7917vw, 92px);
    display: flex;
    align-items: flex-end;
    gap: min(1.6667vw, 32px);
    overflow: hidden;
}

/* 우체부 뒤 원형 장식 */
.service-flow-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url('/image/flowCardDecor-c697a448c128d3b0f00a351c63db586f.webp');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* 우체부는 카드 하단 패딩을 뚫고 내려와 배경 아래쪽과 줄을 맞춘다 */
.service-flow-character {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    align-self: flex-end;
    margin-bottom: max(-4.7917vw, -92px);
    line-height: 0;
}

.service-flow-character img {
    width: min(18.1771vw, 349px);   /* 1920px 기준 349px에서 상한 고정 */
    height: auto;
    display: block;
}

.service-flow-body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding-bottom: min(1.0417vw, 20px);
}

.service-flow-heading {
    text-align: center;
    margin-bottom: min(1.3542vw, 26px);
}

.service-flow-heading h3 {
    font-size: min(2.6172vw, 50.25px);
    font-weight: 700;
    color: #000000;
    margin: 0 0 min(0.625vw, 12px) 0;
}

.service-flow-heading h3 .accent {
    color: #254681;
}

.service-flow-heading p {
    font-size: min(1.3542vw, 26px);
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* 4단계 흐름 */
.service-flow-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(1.5625vw, 30px);
}

.service-flow-step {
    position: relative;
    min-width: 0;   /* 그리드 칸이 좁아져도 넘치지 않도록 */
    aspect-ratio: 263 / 372;
    background-color: #FFFFFF;
    border: 0.0521vw solid #BED3E7;
    border-radius: 0.8109vw;
    padding: min(1.3542vw, 26px) min(0.625vw, 12px) min(1.25vw, 24px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 단계 사이 점선 화살표 (60x30 원본) */
.service-flow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.7708vw;
    width: 1.5625vw;
    height: 0.7812vw;
    transform: translateY(-50%);
    background-image: url('/image/flowArrow-67178977a48be18839464541c4b4192e.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.service-flow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(2.2917vw, 44px);
    height: min(2.2917vw, 44px);
    margin: 0 auto min(0.7292vw, 14px);
    border-radius: 50%;
    background-color: #375F99;
    color: #FFFFFF;
    font-size: min(1.2167vw, 23.36px);
    font-weight: 800;
}

/* 높이 7.9687vw로 통일, 너비는 원본 비율대로 (1번 171x153) */
.service-flow-step img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    height: min(7.9687vw, 153px);
    display: block;
    margin: 0 auto min(0.8333vw, 16px);
}

.service-flow-step p {
    font-size: min(1.3542vw, 26px);
    font-weight: 800;
    color: #000000;
    line-height: 1.45;
    margin: 0;
}

.service-flow-step .accent {
    color: #254681;
}

/* 카드 하단 CTA */
/* 흰 알약 배경 안에 파란 태그가 들어앉는 구조 */
.service-flow-footer {
    display: flex;
    align-items: center;
    margin-top: min(1.3542vw, 26px);
    background-color: #FBFCFF;
    border-radius: 2.0312vw;
}

.service-flow-tag {
    display: inline-flex;
    align-items: center;
    gap: min(0.4167vw, 8px);
    flex-shrink: 0;
    padding: min(0.7292vw, 14px) min(1.3542vw, 26px);
    border-radius: 2.0312vw;
    background-color: #1871FE;
    color: #FFFFFF;
    font-size: min(1.3813vw, 26.52px);
    font-weight: 700;
}

.service-flow-tag-icon {
    width: min(1.7188vw, 33px);
    height: auto;
    display: block;
}

/* 파란 태그를 뺀 나머지 공간의 중앙 정렬 */
.service-flow-footer p {
    flex: 1;
    margin: 0;
    padding: min(0.7292vw, 14px) min(1.3542vw, 26px);
    text-align: center;
    font-size: min(1.3813vw, 26.52px);
    font-weight: 700;
    color: #000000;
}

/* 서비스 소개 섹션 - 모바일 */
@media (max-width: 990px) {
    /* 푸터: 이용약관·개인정보처리방침 링크 폰트 축소 */
    .footer .footer-link {
        font-size: 14px;
    }

    /* 모바일 전용 세로형 배경 */
    .storage-intro-section {
        background-image: url('/image/storageIntroBgMobile-67c4d26c223433470a74a37849e05812.webp');
    }

    .service-intro-section {
        padding: 10vw 3.3333vw;
    }

    /* 이하 1088px 시안 기준 */
    .service-badge {
        gap: 1vw;
        padding: 1.1667vw 2.6667vw;
        font-size: 2.8493vw;   /* 31px */
    }

    .service-badge-icon {
        width: 3vw;
        height: 3vw;
    }

    .service-intro-title {
        font-size: 6.25vw;     /* 68px */
        margin: 3vw 0;         /* 위아래 여백 */
    }

    .service-intro-desc {
        font-size: 3.3088vw;   /* 36px */
    }

    .service-intro-note {
        font-size: 2.2059vw;   /* 24px */
        margin: 3vw 0 6vw;     /* 위 3vw, 아래 6vw */
    }

    .service-flow-card {
        padding: 5vw 7.3333vw;
        border-radius: 2.6667vw;
        gap: 0;
        overflow: visible;
    }

    /* 물품보관 카드: 좌우 패딩 161.75px @1080, radius 14.34px */
    .storage-intro-section .service-flow-card {
        padding-left: 14.9769vw;
        padding-right: 14.9769vw;
        border-radius: 14.34px;
    }

    /* 하단 footer: 좌우 여백 131px @1080 (카드 패딩보다 좁게 → 스텝보다 넓게) */
    .storage-intro-section .service-flow-footer {
        margin-left: -2.8473vw;
        margin-right: -2.8473vw;
    }

    /* 모바일에서는 우체부 캐릭터 숨김 */
    .service-flow-character {
        display: none;
    }

    .service-flow-body {
        padding-bottom: 0;
    }

    .service-flow-heading h3 {
        font-size: 5.5147vw;   /* 60px */
    }

    .service-flow-heading p {
        font-size: 2.3897vw;   /* 26px */
        margin: 3vw 0 6vw;     /* 위 3vw, 아래 6vw */
    }

    .service-flow-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 8vw 4vw;
    }

    /* 모바일 2x2 배치: PC 화살표 규칙 초기화 후 재배치 */
    .service-flow-step:not(:last-child)::after {
        display: none;
    }

    /* 1번→2번, 3번→4번 (열 사이) 오른쪽 화살표 */
    .service-flow-step:nth-child(1)::after,
    .service-flow-step:nth-child(3)::after {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        right: -4vw;
        width: 4vw;
        height: 2vw;
        transform: translateY(-50%);
        background-image: url('/image/flowArrow-67178977a48be18839464541c4b4192e.webp');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 2번→3번 (행 넘어감) 3번 카드 왼쪽 화살표 — 음수 좌표 없이 스텝 왼쪽에 배치 */
    .service-flow-step:nth-child(3)::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 100%;
        width: 4vw;
        height: 2vw;
        transform: translateY(-50%);
        background-image: url('/image/flowArrow-67178977a48be18839464541c4b4192e.webp');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .service-flow-num {
        width: 5.5147vw;
        height: 5.5147vw;
        margin-bottom: 1.6667vw;
        font-size: 2.7574vw;   /* 30px */
    }

    /* 높이 200px 기준 (600px 폭 기준 vw), 너비는 원본 비율대로 */
    .service-flow-step img {
        width: auto;
        height: 17vw;
        margin-bottom: 1.6667vw;
    }

    .service-flow-step p {
        font-size: 2.9412vw;   /* 32px */
    }

    /* 모바일에서도 CTA는 한 줄 유지 */
    .service-flow-footer {
        gap: 0;
        margin-top: 3vw;
    }

    .service-flow-tag {
        gap: 0.6667vw;
        padding: 1.3333vw 2vw;
        font-size: 2.8vw;
        border-radius: 39px;
    }

    .service-flow-tag-icon {
        width: 3vw;
        height: auto;   /* 원본 비율 유지 (99x115) */
    }

    .service-flow-footer p {
        padding: 1.3333vw 2vw;
        font-size: 2.8vw;
        border-radius: 39px;
    }
}

/* Features Section */
.features-section {
    background-color: #ffffff;
}

.features-section .section-title-icon {
    width: min(1.875vw, 36px);
    height: min(1.875vw, 36px);
    vertical-align: middle;
    margin-right: min(0.5208vw, 10px);
    margin-bottom: min(0.3125vw, 6px);
}

@media (max-width: 990px) {
    .features-section .section-title-icon {
        width: 4.6667vw;
        height: 4.6667vw;
    }
}

.features-grid {
    max-width: 990px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(1.0417vw, 20px);
}

/* 장점 카드 */
.feature-card {
    padding: min(1.5625vw, 30px) min(1.0417vw, 20px);
    border-radius: 0.625vw;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
}

/* 애니메이션 활성화 시 */
.feature-card.animate {
    animation: slideUpFade 0.8s ease-out forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(2.0833vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 장점 이미지 디자인 */
/* 376.07px @1920, 좌우 마진 없음 */
.feature-card img {
    width: min(19.587vw, 376.07px);
    height: min(19.587vw, 376.07px);
    object-fit: contain;
    padding: min(5.2083vw, 100px);
    margin: 0 auto min(2.0833vw, 40px);
    display: block;
    background-color: #ffffff;
    border-radius: 3.1792vw;
    box-shadow: 0 0.4167vw 0.9062vw 0 rgba(0, 0, 0, 0.12);
}

.feature-icon {
    width: min(3.125vw, 60px);
    height: min(3.125vw, 60px);
    margin: 0 auto min(0.8333vw, 16px);
    background-color: #f0f4f8;
    border: 0.1042vw dashed #ccc;
    border-radius: 0.4167vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: min(0.5208vw, 10px);
}

/* 섹션 제목 (68px @1920) — 강조색 + '장점'만 검정 */
.section-title {
    font-size: min(3.0104vw, 57.8px);
    font-weight: 800;
    color: #254681;
}

.section-title .plain {
    color: #000000;
}

/* 카드 본문 1행 (28.55px @1920) */
.feature-text {
    font-size: min(1.487vw, 28.55px);
    font-weight: 700;
    color: #000000;
    line-height: 1.5;
}

.feature-text .highlight {
    color: #2369A4;
    font-weight: 900;
    background-color: #E3F2FD;  /* 밝은 파란색 형광펜 효과 */
    padding: min(0.026vw, 0.5px) min(0.1562vw, 3px);            /* 글자 주변 여백 */
    border-radius: 0.2286vw;          /* 둥근 모서리 */
}

/* 카드 본문 2행 설명 (24px @1920, 검정 70%) */
.feature-sub {
    display: block;
    margin-top: min(0.4167vw, 8px);
    font-size: min(1.25vw, 24px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

/* 모바일 전용 줄바꿈 - PC에서는 숨김 */
.mobile-br {
    display: none;
}

/* Contact Section */
.contact-section {
    background-color: #ffffff;
}

.contact-list {
    max-width: 730px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.contact-item {
    padding: min(2.0833vw, 40px) min(0.4167vw, 8px);
    display: flex;
    align-items: flex-start;   /* 원을 텍스트 상단에 맞춤 */
    gap: min(3.125vw, 60px);
    border-bottom: 2px solid #E7E7E7;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-item.animate {
    animation: slideUpFade 0.6s ease-out forwards;
}

.contact-item-clickable {
    cursor: pointer;
}

/* 원형 아이콘 (지름 94.33px @1920) */
.contact-icon {
    width: 80.18px;
    height: 80.18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: min(1.0417vw, 20px);   /* 왼쪽 여백 20px */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon img {
    display: block;
    object-fit: contain;
}

.contact-icon-kakao {
    background-color: #FEE500;
}

.contact-icon-kakao img {
    width: 41px;
}

.contact-icon-call,
.contact-icon-visit {
    background-color: #254681;
}

.contact-icon-call img {
    width: 31px;
}

.contact-icon-visit img {
    width: 39px;
}

.contact-info {
    flex: 1;
}

/* 상담 섹션 제목 (67.98px @1920) — '포스룸'만 다른 색 */
.contact-section .section-title {
    font-size: min(3.0095vw, 57.78px);
    font-weight: 800;
    color: #0D0D0D;
}

.contact-section .section-title .brand {
    color: #254681;
}

/* 항목 제목 */
.contact-info h3 {
    font-size: min(1.43vw, 27.46px);
    font-weight: 800;
    color: #254681;
}

/* 항목 본문 */
.contact-info p {
    font-size: min(1.0912vw, 20.95px);
    font-weight: 700;
    color: #2D2D2D;
    line-height: 1.6;
}

/* 방문 가능 시간 */
.contact-info .contact-hours {
    font-size: min(1.3095vw, 25.14px);
    font-weight: 800;
    color: #070707;
}

/* 안내 문구 — .contact-info p 보다 명시도 높이기 */
.contact-info .contact-note {
    font-size: min(0.9784vw, 18.79px);
    font-weight: 500;
    color: #797979;
    margin-top: min(0.2083vw, 4px);
}

.contact-chevron {
    flex-shrink: 0;
    align-self: center;   /* 화살표는 세로 중앙 유지 */
    margin-right: min(1.0417vw, 20px);   /* 오른쪽 여백 20px */
    width: min(1.9271vw, 37px);   /* 37px */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.contact-item-clickable:hover .contact-chevron {
    transform: translateX(0.1562vw);
}

/* Responsive Design */
@media (max-width: 990px) {
    /* PC/모바일 디스플레이 전환 */
    .desktop-only {
        display: none !important;
    }

    /* Hero Section 모바일 */
    .hero-section {
        min-height: auto;
        background-image: url('/image/heroBgMobile-27f500faa026eea687dbc4be1c552469.webp');
    }

    .hero-content {
        padding: 13.3333vw 10.0184vw;   /* 좌우 109px @1088 */
        flex-direction: column;
        align-items: stretch;
        gap: 6vw;
    }

    /* 70px @1088 시안 기준 */
    .hero-title {
        font-size: 6.4338vw;
        margin-bottom: 4vw;
    }

    .hero-title-accent {
        color: #C2976C;
    }

    /* 모바일 시안에는 신청 버튼이 없음 (우측 고정 상담 버튼으로 대체) */
    .hero-buttons {
        display: none;
    }

    .hero-btn {
        padding: 1.6667vw 3vw;
        font-size: 2.1667vw;
    }

    .hero-illustration {
        margin-left: 0;
        justify-content: flex-end;
    }

    .hero-illustration img {
        max-width: 46.6667vw;
    }

    /* ============================================
       모바일 화면 (128vw 이하) - 고정 상담 버튼 위치 및 크기 조정
       우측 상단에 박스 형태로 배치
       ============================================ */
    .fixed-consult-buttons {
        right: 1.6667vw;             /* 모바일: 오른쪽에서 1.6667vw */
        top: 16.6667vw;              /* 모바일: 헤더 아래 16.6667vw */
        gap: 1.3333vw;                /* 모바일: 버튼 간격 1.3333vw */
    }

    .fixed-consult-btn {
        padding: 2vw 1.6667vw;      /* 모바일 패딩 더 줄임 */
        width: 15vw;             /* 모바일 너비 더 줄임 */
        min-height: 14.1667vw;        /* 모바일 높이 더 줄임 */
        gap: 1vw;                /* 아이콘-텍스트 간격 줄임 */
    }

    /* 모바일에서는 전화 버튼도 표시 */
    .fixed-consult-btn.call-btn {
        display: flex;           /* 모바일에서는 표시 */
    }

    .fixed-consult-btn img {
        width: 6.3333vw;             /* 모바일 아이콘 크기 더 줄임 */
        height: 6.3333vw;
    }

    .fixed-consult-btn span {
        font-size: 2vw;         /* 모바일 텍스트 크기 줄임 */
    }

    /* 장점 섹션 좌우 패딩 (178.27px @1080) */
    .features-section {
        padding-left: 16.5065vw;
        padding-right: 16.5065vw;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5vw;
    }

    .feature-card {
        padding: 3.3333vw 0;
    }

    .feature-card img {
        width: 27vw;
        height: 27vw;
        padding: 5.5vw;
        margin: 0 0 3vw;
        background-color: #F6F6F6;
        border-radius: 28.98px;
        box-shadow: 0 8px 17.4px 0 rgba(0, 0, 0, 0.12);
    }

    /* 타일: 바깥쪽 정렬 (왼쪽 칸 1,3 → 왼쪽 / 오른쪽 칸 2,4 → 오른쪽) */
    .feature-card:nth-child(odd) img {
        margin: 0 auto 3vw 0;
    }

    .feature-card:nth-child(even) img {
        margin: 0 0 3vw auto;
    }

    /* 아래 텍스트: 타일 폭 안에서 중앙정렬, 타일 아래에 위치 */
    .feature-text {
        width: 27vw;
        text-align: center;
        font-size: 2.2vw;
    }

    .feature-card:nth-child(odd) .feature-text {
        margin-right: auto;
        margin-left: 0;
    }

    .feature-card:nth-child(even) .feature-text {
        margin-left: auto;
        margin-right: 0;
    }

    .feature-sub {
        font-size: 1.7vw;
    }

    /* 모바일에서는 mobile-br 표시 */
    .mobile-br {
        display: inline;
    }

    .section-title {
        font-size: 6.2482vw;   /* 67.98px */
    }

    .section-subtitle {
        font-size: 2.3333vw;
    }

    .contact-list {
        max-width: 100%;
        padding-left: 16.2037vw;
        padding-right: 16.2037vw;
    }

    .contact-item {
        padding: 3vw 2.6667vw;
        flex-direction: row;
        align-items: center;
        gap: 2.3333vw;
    }

    .contact-icon {
        width: 6.5vw;
        height: 6.5vw;
        flex-shrink: 0;
    }

    /* 원 안 글리프도 비례 축소 (원 6.5vw 기준) */
    .contact-icon-kakao img {
        width: 3.3vw;
    }

    .contact-icon-call img {
        width: 2.5vw;
    }

    .contact-icon-visit img {
        width: 3.2vw;
    }

    .contact-info {
        flex: 1;
    }

    .contact-info h3 {
        font-size: 2.5vw;
        margin-bottom: 0.6667vw;
    }

    .contact-info p {
        font-size: 2.1667vw;
    }

    /* 방문 가능 시간: 전화번호보다 조금 크게 */
    .contact-info .contact-hours {
        font-size: 2.5vw;
    }

    .contact-info .contact-note {
        font-size: 1.8333vw;
    }

    .contact-arrow-icon {
        width: 4vw;
        height: 4vw;
        flex-shrink: 0;
    }
}

/* 초소형 모바일 (Z폴드 외부 화면) */
@media (max-width: 500px) {
    /* 접은화면: 히어로 좌우 패딩을 위아래와 동일하게 */
    .hero-content {
        padding-left: 13.3333vw;
        padding-right: 13.3333vw;
    }

    .fixed-consult-buttons {
        width: 14.2857vw;
        right: 1.1905vw;
        top: 23.8095vw;
    }

    .fixed-consult-btn {
        font-size: 2.381vw;
        padding: 1.9048vw 1.1905vw;
        width: 14.2857vw;
        min-height: 15.4762vw;
        gap: 0.9524vw;
    }

    .fixed-consult-btn img {
        width: 6.6667vw;
        height: 6.6667vw;
    }

    .fixed-consult-btn span {
        font-size: 2.1429vw;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.381vw;
    }

    .feature-card {
        padding: 3.5714vw 0;
    }

    .feature-card img {
        width: 29vw;
        height: 29vw;
        padding: 6vw;
    }

    .feature-text {
        width: 29vw;
    }

    .feature-text {
        font-size: 2.3vw;
        line-height: 1.4;
    }

    .main-content section {
        padding: 9.5238vw 3.5714vw;
    }

    .hero-content h1 {
        font-size: 6.6667vw;
    }

    .hero-content p {
        font-size: 3.3333vw;
    }

    .section-title {
        font-size: 5.2381vw;
    }

    .section-subtitle {
        font-size: 3.0952vw;
    }
}