/* 1. 공통 변수 설정 (Vectair 브랜드 컬러 추출) */
:root {
    /* 브랜드 메인 컬러 */
    --primary-teal: #005F83;       /* 깊은 파란색/틸 */
    --accent-blue: #0693e3;        /* 밝은 파란색 */
    --text-dark: #244C5A;          /* 텍스트용 짙은 남색 */
    --bg-light: #ffffff;           /* 배경 흰색 */
    --gray-light: #f5f5f5;         /* 배경 및 구분선용 연그레이 */
    
    /* 폰트 크기 및 간격 */
    --font-small: 13px;
    --font-medium: 18px;
    --font-large: 36px;
    --spacing-unit: 1rem;
}

/* 2. 기본 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', sans-serif; /* 한국어 가독성을 위해 추천 */
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* 3. 레이아웃 컨테이너 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 4. 헤더 및 네비게이션 스타일 기초 */
header {
    width: 100%;
    border-bottom: 1px solid var(--gray-light);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

/* 로고 사이즈 조절 */
.logo img {
    height: 40px;
}

/* 메인 메뉴 스타일 */
.main-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-menu > li > a {
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--text-dark);
    padding: 30px 0;
    display: block;
}

.main-menu > li > a:hover {
    color: var(--primary-teal);
}

/* Footer 스타일링 */
.site-footer {
    background-color: #002D3D; /* 이미지와 유사한 다크 Teal 색상 */
    color: #ffffff;
    padding-top: 60px;
    font-size: 14px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; /* 5개 컬럼 비율 */
    gap: 30px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-col h4 {
    color: #8CC63F; /* 연두색 강조 텍스트 */
    font-size: 16px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.footer-col h5 {
    font-size: 14px;
    margin: 15px 0 5px;
    color: #ffffff;
}

.footer-col p {
    color: #cbd5e0;
    line-height: 1.6;
    margin-bottom: 5px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a:hover {
    color: #8CC63F;
    text-decoration: underline;
}

/* Footer Bottom 섹션 */
.footer-bottom {
    padding: 30px 0;
    font-size: 12px;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    height: 30px;
    margin-bottom: 10px;
    display: block;
}

.footer-legal-links a {
    margin-left: 20px;
    color: #cbd5e0;
}

.footer-legal-links a:hover {
    color: #ffffff;
}

/* Hero Section */
.flex-section--hero {
    height: 80vh;
    background: var(--desktop-bg) no-repeat center center / cover;
    display: flex;
    align-items: center;
    color: #fff;
}

.hero-content h1 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Common Buttons */
.btn-main {
    display: inline-block;
    background-color: var(--primary-teal);
    color: #fff;
    padding: 15px 35px;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 20px;
}

.btn-outline {
    display: inline-block;
    border: 2px solid var(--primary-teal);
    color: var(--primary-teal);
    padding: 12px 30px;
    font-weight: bold;
    margin-top: 20px;
}

/* Product Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.product-card {
    text-align: center;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-10px);
}

.product-card img {
    width: 100%;
    margin-bottom: 20px;
}
/* Page Heading */
.page-heading {
    padding: 40px 0;
    background: #fdfdfd;
    border-bottom: 1px solid #eee;
}
.page-title { font-size: 32px; color: var(--text-dark); margin-bottom: 10px; }
#breadcrumbs { font-size: 14px; color: #888; }
#breadcrumbs a { color: var(--primary-teal); }

/* Hub Hero */
.flex-section--hub-hero {
    height: 60vh;
    background: var(--desktop-bg) no-repeat center center / cover;
    display: flex;
    align-items: center;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Product Grid */
.flex-section--product-list { padding: 80px 0; }
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}
.product-item { text-align: left; }
.product-item h4 { font-size: 18px; margin: 20px 0 10px; color: var(--primary-teal); }
.img-hover { display: block; overflow: hidden; background: #f9f9f9; border-radius: 4px; }
.img-hover img { width: 100%; transition: transform 0.4s ease; }
.product-item:hover img { transform: scale(1.05); }

/* Promo Banner */
.flex-section--promo-banner {
    background: #f4f7f9;
    padding: 100px 0;
    overflow: hidden;
}
.promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.promo-text { flex: 1; }
.promo-image { flex: 1; text-align: right; }
.promo-image img { max-width: 450px; }
.badge { background: var(--primary-teal); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; }

/* 1. 제품 페이지 레이아웃 */
.gray-bg { background-color: #f7f9fa; padding: 100px 0; }
.text-center { text-align: center; }

/* 2. 섹션 구분 실선 (Section Divider) */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-teal);
    margin-bottom: 30px;
    letter-spacing: 1px;
}
.section-divider::before, .section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
    max-width: 150px;
}

/* 3. 혜택(Benefit) 그리드 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
    text-align: center;
}
.benefit-item img { width: 48px; height: 48px; margin-bottom: 20px; }
.benefit-item h4 { font-size: 16px; margin-bottom: 12px; color: #2d3748; }
.benefit-item p { font-size: 14px; color: #718096; line-height: 1.5; }

/* 4. 제품(Product) 그리드 및 카드 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 60px 0;
}
.product-card {
    position: relative;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    border: 1px solid #edf2f7;
}
.product-card:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.product-card .badge {
    position: absolute; top: 15px; left: 15px;
    background: #8CC63F; color: #fff; padding: 3px 10px;
    font-size: 10px; font-weight: 800; border-radius: 3px;
}
.product-card img { width: 100%; height: auto; margin-bottom: 20px; }
.product-card h4 { font-size: 18px; margin-bottom: 10px; color: var(--primary-teal); }
.product-card .availability { font-size: 12px; color: #a0aec0; display: block; margin-top: 15px; }

/* 5. 버튼 공통 */
.btn-teal {
    display: inline-block;
    background: var(--primary-teal);
    color: #fff;
    padding: 14px 28px;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 25px;
}

/* 섹션 공통 간격 */
section { padding: 80px 0; }

/* 이미지 크기 자동 조절 */
img { max-width: 100%; height: auto; display: block; }

/* 3열 제품 그리드 */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.product-card { text-align: center; }
.product-card h4 { margin-top: 20px; color: var(--primary-teal); font-size: 20px; }

/* 히어로 섹션 텍스트 중앙 정렬 */
.hero-content {
    text-align: left;
    color: white;
}

/* Vibe Pro Promo Section */
.promo-vibe-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 60px 0;
}

.cta-content { flex: 1; }
.cta-image { flex: 1; text-align: right; }
.cta-image img { max-width: 100%; height: auto; border-radius: 10px; }

/* Fragrance Grid */
.variants-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PC 기준 3열 정렬 */
    gap: 30px;
    margin-top: 50px;
}

.variant-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 30px;
    border-radius: 12px;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
}

.variant-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.07);
    transform: translateY(-5px);
}

.variant-card h4 {
    color: var(--primary-teal);
    font-size: 19px;
    margin: 15px 0 10px;
}

.variant-card .availability {
    display: block;
    margin-top: 15px;
    font-size: 12px;
    color: #94a3b8;
}

.badge-new {
    background: #8CC63F;
    color: white;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}

/* 텍스트 컨테이너 */
.copy-container h3 {
    font-size: 28px;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* 텍스트 가독성을 위한 유틸리티 */
.max-width-800 {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.mb-50 { margin-bottom: 50px; }

/* 제품 카드 내 상세보기 링크 */
.btn-text {
    display: inline-block;
    margin-top: 15px;
    color: var(--primary-teal);
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
}

/* 히어로 섹션 다크 모드 텍스트 */
.hero-content h2.dark-mode {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* 그리드 간격 미세 조정 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}/* 혜택 섹션 그리드 교정 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* PC 기준 정확히 4등분 */
    gap: 20px;
    margin-top: 50px;
}

.benefit-item {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefit-item img {
    width: 60px; /* 아이콘 크기 고정 */
    height: 60px;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

.benefit-item:hover img {
    transform: scale(1.1); /* 마우스 호버 시 아이콘 강조 */
}

.benefit-item h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 15px;
    min-height: 40px; /* 제목 높이 통일 */
    display: flex;
    align-items: center;
}

.benefit-item p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all; /* 한글 가독성 향상 */
}

.mt-40 { margin-top: 40px; }
/* 리필 아이템 그리드 (4열 배치) */
.variants-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4열로 변경하여 리필 4개를 나란히 배치 */
    gap: 25px;
    margin-top: 50px;
}

.variant-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    text-align: left;
    transition: all 0.3s ease;
}

.variant-card img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

.variant-card h4 {
    font-size: 17px;
    color: var(--primary-teal);
    margin-bottom: 10px;
}

.variant-card p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

.variant-card .availability {
    display: block;
    margin-top: 15px;
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

/* 공통 섹션 스타일 */
section { padding: 100px 0; overflow: hidden; }
.bg-light { background-color: #f8fafb; }
.text-center { text-align: center; }
.shadow { box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.max-600 { max-width: 600px; margin: 0 auto; line-height: 1.6; }

/* 1. Purpose 그리드 정렬 (텍스트 왼쪽, 이미지 오른쪽) */
.purpose-grid {
    display: flex;
    align-items: center;
    gap: 80px;
}
.purpose-text { flex: 1; }
.purpose-visual { flex: 1.2; }
.purpose-visual img { width: 100%; border-radius: 20px; }

/* 2. 카테고리 카드 세련되게 다듬기 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.cat-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #eee;
}
.cat-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.cat-img-box { height: 250px; background: #fdfdfd; overflow: hidden; }
.cat-img-box img { width: 100%; height: 100%; object-fit: contain; }
.cat-desc { padding: 30px; }

/* 3. Vibe Pro 프로모션 가로 배치 */
.promo-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}
.promo-content { flex: 1; }
.promo-image-box { flex: 1; text-align: right; }
.promo-image-box img { max-width: 500px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }

/* 4. 제품 리스트 5열 배치 (한 줄에 다 보이도록) */
.variant-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5개 제품 한 줄에 */
    gap: 20px;
    margin: 60px 0;
}
.solution-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    border: 1px solid #f0f0f0;
}
.sol-img img { width: 100%; height: auto; }
.tag-new {
    position: absolute; top: 10px; left: 10px;
    background: #8CC63F; color: #fff; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 3px;
}

/* 메인 히어로 레이아웃 설정 */
.main-hero {
    position: relative;
    width: 100%;
    min-height: 80vh; /* 화면 높이의 80%를 차지하여 이미지가 보이게 함 */
    display: flex;
    align-items: center; /* 텍스트 세로 중앙 정렬 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; /* 이미지가 잘리지 않고 꽉 차게 설정 */
    color: #ffffff;
}

/* 텍스트 가독성을 위한 그림자 효과 */
.hero-content {
    max-width: 700px;
    z-index: 2;
}

.hero-content h1 {
    font-size: 52px;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* 어두운 배경에서 글씨가 더 잘 보임 */
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

/* 모바일 전용 배경 처리 */
@media (max-width: 768px) {
    .main-hero {
        background-image: var(--mobile-bg) !important;
        min-height: 60vh;
    }
    .hero-content h1 {
        font-size: 32px;
    }
}
/* 제품 상세 상단 레이아웃 */
.product-main-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 60px 0;
}
.product-header-content { flex: 1; }
.product-main-visual { flex: 1.2; }
.product-main-visual img { width: 100%; border-radius: 15px; }

/* 컬러 옵션 (동그라미 버튼) */
.color-options { display: flex; gap: 10px; margin: 15px 0 30px; }
.color-dot {
    width: 25px; height: 25px; border-radius: 50%;
    cursor: pointer; border: 2px solid #ddd;
}
.color-dot.black { background-color: #000; }
.color-dot.white { background-color: #fff; }

/* 특장점 그리드 (4열) */
.benefit-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.focus-num {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-teal);
    margin: 10px 0;
}

/* 상세 사양 표 */
.specs-table-wrapper { margin: 40px 0; border-top: 2px solid var(--primary-teal); }
.specs-table { width: 100%; border-collapse: collapse; }
.specs-table th { background: #f8fafc; padding: 15px; text-align: left; border-bottom: 1px solid #eee; }
.specs-table td { padding: 15px; border-bottom: 1px solid #eee; }
.specs-extra-info { background: #fdfdfd; padding: 20px; border-radius: 8px; font-size: 14px; line-height: 1.8; }

/* 리소스 카드 */
.resource-card { display: block; max-width: 350px; margin: 0 auto; text-decoration: none; color: inherit; }
.res-thumb {
    height: 200px; background-size: cover; background-position: center;
    position: relative; border-radius: 10px; margin-bottom: 15px;
}
.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(0, 95, 131, 0.8); color: white; padding: 10px 20px; border-radius: 50px;
}
/* 제품 상세 상단 레이아웃 */
.product-flex-container {
    display: flex;
    align-items: flex-start; /* 상단 정렬 */
    justify-content: space-between;
    gap: 80px;
    padding: 60px 0;
}

.product-header-content { flex: 1; }
.product-header-visual { flex: 1.2; position: relative; }

/* 텍스트 스타일 */
.product-header-content h2 { font-size: 36px; line-height: 1.2; margin-bottom: 20px; color: var(--text-dark); }
.product-description { font-size: 18px; color: #4a5568; margin-bottom: 30px; line-height: 1.6; }

/* 바로가기 링크 */
.product-quick-links { list-style: none; display: flex; gap: 20px; margin-bottom: 40px; }
.btn-text-link { color: var(--primary-teal); font-weight: 700; text-decoration: underline; font-size: 14px; }

/* 옵션 박스 */
.product-variations-box { border-top: 1px solid #edf2f7; padding-top: 30px; }
.variation-item { margin-bottom: 25px; }
.variation-item h4 { font-size: 14px; color: #718096; margin-bottom: 15px; text-transform: uppercase; }

/* 컬러 피커 (동그라미) */
.color-picker { display: flex; gap: 12px; }
.color-option {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e2e8f0;
    cursor: pointer; position: relative;
}
.color-option.black-opt { background: #000; }
.color-option.white-opt { background: #fff; }
.color-option.active { border-color: var(--primary-teal); }
.color-option span { display: none; } /* 텍스트 숨김 */

/* 가용성 태그 */
.availability-list { display: flex; gap: 20px; }
.avail-tag { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.avail-tag img { width: 16px; }

/* 이미지 영역 */
.main-image-wrapper img { width: 100%; border-radius: 15px; }
.product-thumbnails { display: flex; gap: 15px; margin-top: 20px; }
.product-thumbnails .thumb {
    width: 80px; height: 80px; object-fit: cover; border-radius: 8px;
    cursor: pointer; border: 1px solid #eee; transition: 0.2s;
}
.product-thumbnails .thumb:hover { border-color: var(--primary-teal); opacity: 0.8; }

/* --- 모바일 완성도 극대화 섹션 --- */
@media (max-width: 1024px) {
    /* 1. 기본 폰트 및 레이아웃 조정 */
    body { font-size: 15px; }
    .container { width: 100% !important; padding: 0 20px !important; }

    /* 2. 히어로 섹션 (가장 중요한 얼굴) */
    .flex-section--hero {
        min-height: 80vh !important; /* 모바일에서 길게 보이도록 */
        background-image: var(--mobile-bg) !important;
        display: flex;
        align-items: flex-end; /* 텍스트를 하단에 배치 (원본 스타일) */
        padding-bottom: 60px;
        text-align: left !important;
    }
    .flex-section--hero h1 {
        font-size: 32px !important;
        line-height: 1.2;
        font-weight: 800 !important;
    }
    .flex-section--hero p { font-size: 16px !important; margin: 15px 0 25px; }

    /* 3. 섹션 공통 간격 (모바일은 좁게) */
    section { padding: 60px 0 !important; }
    h2 { font-size: 28px !important; margin-bottom: 20px !important; text-align: left; }
    h3 { font-size: 20px !important; line-height: 1.4 !important; text-align: left; }

    /* 4. 제품 카테고리 (2열 배치 - 원본과 동일) */
    .products, .category-grid, .variant-grid, .products-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    /* 사진 크기 통일 */
    .product img, .variant img {
        height: 150px !important;
        object-fit: contain !important;
        background: #f9f9f9;
        border-radius: 10px;
    }


    /* 6. 파트너십/솔루션 (1열로 변경하여 가독성 확보) */
    .items, .benefit-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    .item, .benefit-item {
        padding: 30px !important;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 15px;
        text-align: left !important;
    }

    /* 7. 메뉴 숨기기 (헤더 수정) */
    .header-navigation {
        display: none; /* 모바일에서 기존 메뉴 숨김 */
    }
    .header-inner {
        justify-content: center !important; /* 로고만 중앙에 */
    }
    .header-brand img { height: 35px !important; }

    /* 8. 푸터 정리 */
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .footer-legal-links { justify-content: center; gap: 15px !important; }
}

/* 초소형 모바일 (아이폰 SE 등) */
@media (max-width: 480px) {
    .flex-section--hero h1 { font-size: 26px !important; }
    .products, .category-grid, .variant-grid {
        grid-template-columns: 1fr !important; /* 완전한 1열 */
    }
}

/* --- 모바일 레이아웃 눌림(짜부) 방지 및 자동 정렬 --- */

/* [1] 공통 반응형 설정 */
@media (max-width: 1024px) {
    /* 모든 컨테이너의 고정 너비를 해제하고 화면 너비에 맞춤 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }

    /* [2] 섹션 레이아웃: 가로 배치를 세로 배치로 강제 전환 */
    /* 목적: 옆으로 눌리는 현상 근본적 해결 */
    .promo-inner, 
    .purpose-grid, 
    .product-main-flex, 
    .product-flex-container,
    .product-main-layout,
    .promo-flex-row {
        display: flex !important;
        flex-direction: column !important; /* 가로 -> 세로 */
        align-items: center !important;
        text-align: center !important;
        gap: 40px !important;
    }

    /* [3] 이미지 눌림 방지 */
    /* 목적: 이미지가 비율을 유지하며 화면 너비에 맞게 조정됨 */
    img {
        max-width: 100% !important;
        height: auto !important; /* 세로로 찌그러지는 것 방지 */
        object-fit: contain !important;
    }

    .cta-image, .promo-image, .product-header-visual, .product-visual-column {
        width: 100% !important;
        max-width: 450px !important; /* 모바일에서 너무 크지 않게 제한 */
        margin: 0 auto !important;
    }

    /* [4] 그리드 시스템 (제품 리스트 등) 조정 */
    /* 3열/5열 -> 모바일에서는 1열 또는 2열로 변경 */
    .products-grid, 
    .category-grid, 
    .product-grid,
    .benefit-grid,
    .benefit-grid-4,
    .variant-grid {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important; /* 1열 배치 */
        gap: 20px !important;
    }

    /* 리필 제품 리스트는 2열이 예쁘므로 2열로 유지 */
    .variants-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* [5] 히어로 섹션 텍스트 크기 및 여백 보정 */
    .flex-section--hero {
        padding: 80px 0 !important;
        min-height: auto !important;
        background-image: var(--mobile-bg) !important;
    }

    .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* [6] 푸터 배율 조정 */
    .footer-top {
        grid-template-columns: 1fr !important; /* 5열 -> 1열 */
        text-align: center !important;
    }
    
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom-inner {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* [7] 아주 작은 스마트폰 (480px 이하) 추가 보정 */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 26px !important;
    }
    
    .variants-grid {
        grid-template-columns: 1fr !important; /* 아주 작은 화면에선 1열 */
    }

    .btn-main, .btn-premium, .btn-teal {
        width: 100% !important; /* 버튼을 화면 가득 채움 (터치하기 편하게) */
        padding: 15px 0 !important;
    }
}
/* --- Benefits 섹션 정밀 수선 --- */

/* 1. PC 버전 (기본 그리드 최적화) */
.benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4열 유지 */
    gap: 30px !important;
    align-items: start !important; /* 높이가 달라도 위쪽 정렬 */
}

.benefit-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 가로 중앙 */
    text-align: center !important;
}

/* 아이콘이 찌그러지지 않게 고정 */
.benefit-card .icon-box {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.benefit-card .icon-box img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* 박스 안에서 비율 유지 */
}

/* 한글 단어 끊김 방지 (가독성 핵심) */
.benefit-card h4, 
.benefit-card p {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

/* 2. 모바일/태블릿 버전 (반응형 전환) */
@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 태블릿 2열 */
        gap: 20px !important;
    }
}

@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr !important; /* 모바일 1열로 세로 쌓기 */
        gap: 40px !important;
    }
    
    .benefit-card {
        padding: 0 10px !important; /* 좁은 화면 여백 */
    }

    /* 모바일 제목 크기 조정 */
    .container h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
}
/* --- Fragrance Solutions 섹션 교정 --- */

/* 1. PC 및 공통 설정 */
.sol-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important; /* 카드 높이 통일 */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.sol-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* 이미지 박스 크기 고정 및 이미지 비율 보호 */
.sol-card div[style*="height: 140px"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.sol-card img {
    max-width: 100% !important;
    max-height: 120px !important; /* 이미지 크기 제한으로 겹침 방지 */
    object-fit: contain !important;
}

/* 2. 태블릿 버전 (1024px 이하): 5열 -> 3열 */
@media (max-width: 1024px) {
    /* 부모 div의 5열 그리드를 3열로 강제 변경 */
    .container > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px !important;
    }
}

/* 3. 모바일 버전 (600px 이하): 3열 -> 2열 또는 1열 */
@media (max-width: 600px) {
    .container > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important; /* 2열이 가장 예쁩니다 */
        gap: 15px !important;
    }

    .sol-card {
        padding: 20px 10px !important;
    }

    .sol-card h4 {
        font-size: 14px !important; /* 모바일에서 글자 크기 조정 */
    }

    /* 하단 텍스트 가독성 조정 */
    .flex-center p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        word-break: keep-all !important;
    }
}
/* --- Product Categories 섹션 교정 --- */

/* 1. PC 및 공통 카드 스타일 최적화 */
.card-v3 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important; /* 모든 카드의 높이를 동일하게 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
}

.card-v3:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* 이미지 박스 찌그러짐 방지 */
.card-v3 div[style*="height: 200px"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.card-v3 img {
    max-width: 100% !important;
    max-height: 180px !important;
    object-fit: contain !important;
}

/* 2. 태블릿 버전 (1024px 이하): 3열 -> 2열 */
@media (max-width: 1024px) {
    /* 부모 그리드 강제 제어 */
    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* 3. 모바일 버전 (600px 이하): 2열 -> 1열 */
@media (max-width: 600px) {
    .container > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important; /* 한 줄에 하나씩 큼직하게 */
        gap: 25px !important;
    }

    .card-v3 {
        padding: 40px 20px !important; /* 모바일 전용 여백 감소 */
    }

    .card-v3 h4 {
        font-size: 20px !important;
    }

    .card-v3 p {
        font-size: 14px !important;
        word-break: keep-all !important;
    }

    /* 상단 제목 크기 조정 */
    .section-title-big {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }
}
/* --- 모바일 제품 상세 페이지 레이아웃 정밀 보정 --- */
@media (max-width: 1024px) {
    /* 1. 전체 컨테이너 순서 재배치 */
    .single-product-header .container {
        display: flex !important;
        flex-direction: column !important; /* 위에서 아래로 순서대로 쌓기 */
        padding: 0 !important;
    }

    /* 2. 제품 이미지 슬라이더 (순서 1) */
    #sliderWindow {
        order: 1 !important; /* 맨 위 */
        width: 100% !important;
        margin-bottom: 10px !important; /* 아래 컨트롤러와 가까이 붙임 */
    }

    .slide-item {
        flex: 0 0 100% !important;
        padding: 0 20px;
    }

    .slide-item img {
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 10px;
        background: #fff;
        object-fit: contain !important;
    }

    /* 3. [핵심수정] 슬라이더 컨트롤러 (순서 2 - 사진 바로 밑으로) */
    /* HTML에 직접 써진 margin-top: 50px을 0으로 죽이고 이미지 바로 밑으로 올립니다 */
    .single-product-header .container[style*="margin-top: 50px"] {
        order: 2 !important; 
        margin-top: 0 !important; 
        padding: 0 20px !important;
        margin-bottom: 20px !important; /* 텍스트 시작 전 여백 */
    }

    /* HTML에 직접 써진 padding-left: 430px을 제거하고 양 끝 정렬 */
    .single-product-header div[style*="align-items: center"] {
        display: flex !important;
        justify-content: space-between !important; /* 이전 - 페이지번호 - 다음 양끝 정렬 */
        padding-left: 0 !important; /* PC용 패딩 제거 */
        width: 100% !important;
    }

    .single-product-header button[onclick*="moveSlider"] {
        color: #fff !important;
        text-decoration: underline !important;
        text-underline-offset: 4px;
        font-size: 14px !important;
        padding: 10px 0 !important;
    }

    #pageIndicator {
        color: #fff !important;
        font-size: 13px !important;
    }

    /* 프로그레스 바 배경 (250px은 모바일에서 너무 깁니다) */
    div[style*="width: 250px"] {
        width: 100px !important; /* 바의 길이를 줄여 모바일에 맞춤 */
        margin: 0 15px !important;
        background: rgba(255,255,255,0.2) !important;
    }

    /* 4. 제품 정보 텍스트 (순서 3) */
    .product-info-sidebar {
        order: 3 !important; /* 컨트롤러보다 아래에 배치 */
        width: 100% !important;
        padding: 10px 20px 40px !important;
        text-align: left !important;
    }

    /* ... 이하 기존 h2, p, ul 스타일은 그대로 유지 ... */
    .product-info-sidebar h2 { font-size: 28px !important; color: #fff !important; margin-bottom: 15px; }
    .product-info-sidebar p { font-size: 16px !important; color: #cbd5e0 !important; }
    .product-info-sidebar ul { display: flex !important; gap: 20px !important; margin-top: 20px !important; }
    .product-info-sidebar ul li a { color: #8CC63F !important; text-decoration: underline !important; }

    /* 옵션 선택 드롭다운 */
    select, .nice-select {
        width: 100% !important;
        background-color: #002D3D !important;
        border: 1px solid #8CC63F !important;
        color: #fff !important;
        height: 50px !important;
    }
}

/* --- 공간 완성 향기 섹션 교정 --- */

/* 1. 태블릿 & 모바일 공통 (1024px 이하) */
@media (max-width: 1024px) {
    /* 첫 번째 그리드: 텍스트 / 이미지 위아래로 */
    .container > div > div[style*="grid-template-columns: 1.2fr 0.8fr"] {
        grid-template-columns: 1fr !important; /* 1열로 변경 */
        gap: 40px !important;
        text-align: center !important;
    }

    /* 이미지 크기 조절 및 중앙 정렬 */
    .container > div > div[style*="grid-template-columns: 1.2fr 0.8fr"] img {
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* 두 번째 그리드: Airadicate / Fragrance Your Way 위아래로 */
    .container > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important; /* 1열로 변경 */
        gap: 30px !important;
    }

    /* 세 번째 그리드: 향기 스케줄링 / 맞춤형 프로그래밍 위아래로 */
    .container > div > div[style*="grid-template-columns: 1fr 1fr"]:last-of-type {
        grid-template-columns: 1fr !important; /* 1열로 변경 */
        gap: 20px !important;
    }
}

/* 2. 작은 모바일 (600px 이하) */
@media (max-width: 600px) {
    /* 섹션 패딩 줄이기 */
    section[style*="padding: 120px 0"] {
        padding: 60px 0 !important;
    }

    /* 제목 크기 조정 */
    section h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    /* 카드 내부 패딩 조정 */
    div[style*="padding: 40px"] {
        padding: 30px 20px !important;
    }
}

/* --- Benefit Card 중앙 정렬 정밀 교정 --- */

/* 1. PC 및 공통 설정 */
.b-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 내부의 모든 요소를 가로 중앙 정렬 */
    justify-content: center !important;
    width: 100% !important;
}

/* 2. 이미지 정렬 강제 (이미지가 왼쪽으로 쏠리는 문제 해결) */
.b-card img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. 모바일 버전 (1024px 이하) */
@media (max-width: 1024px) {
    /* 부모 그리드 자체가 중앙에 오도록 설정 */
    .benefits-grid, 
    .container > div[style*="display: grid"] {
        justify-items: center !important; /* 그리드 내부 아이템들을 중앙으로 */
        align-items: center !important;
    }

    .b-card {
        max-width: 350px !important; /* 모바일에서 너무 뚱뚱해지지 않게 제한 */
        margin: 0 auto !important;   /* 카드 자체를 중앙으로 */
    }
}

/* --- 테이블 짤림 현상 및 가로 스크롤 완전 해결 --- */

@media (max-width: 1024px) {
    /* 1. 부모 박스의 가로 제한 강제 해제 */
    #specifications div[style*="min-width: 800px"], 
    #specifications table {
        min-width: 0 !important; /* 800px 제한 해제 */
        width: 100% !important;
    }

    /* 2. 테이블을 리스트(카드) 형태로 변환 */
    #specifications table, 
    #specifications thead, 
    #specifications tbody, 
    #specifications th, 
    #specifications td, 
    #specifications tr {
        display: block !important; /* 표 형식을 깨고 블록으로 쌓기 */
    }

    /* 3. 제목줄(Header) 숨기기 */
    #specifications thead tr {
        display: none !important;
    }

    /* 4. 각 행(줄)을 하나의 독립된 카드로 만들기 */
    #specifications tr {
        margin-bottom: 20px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 15px !important;
        background: #fff !important;
        padding: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    }

    /* 5. 각 셀(데이터) 정렬 및 라벨 추가 */
    #specifications td {
        display: flex !important;
        justify-content: space-between !important; /* 라벨은 왼쪽, 내용은 오른쪽 */
        align-items: center !important;
        padding: 12px 5px !important;
        border-bottom: 1px solid #f7fafc !important;
        text-align: right !important; /* 데이터는 오른쪽 정렬 */
        font-size: 14px !important;
    }

    #specifications td:last-child {
        border-bottom: none !important;
    }

    /* 6. 데이터 왼쪽에 항목 이름(라벨) 강제 삽입 */
    #specifications td::before {
        content: ""; /* 기본 초기화 */
        font-weight: 800 !important;
        color: #071D49 !important;
        text-align: left !important;
        font-size: 13px !important;
    }

    /* 순서에 맞게 항목 이름 지정 */
    #specifications td:nth-of-type(1)::before { content: "Item #"; }
    #specifications td:nth-of-type(2)::before { content: "Description"; }
    #specifications td:nth-of-type(3)::before { content: "Intensity"; }
    #specifications td:nth-of-type(4)::before { content: "Pack Size"; }

    /* 첫 번째 항목(Item #)은 배경색을 넣어 강조 */
    #specifications td:nth-of-type(1) {
        background-color: #f8fafc !important;
        margin: -15px -15px 10px -15px !important;
        padding: 15px !important;
        border-radius: 15px 15px 0 0 !important;
        justify-content: space-between !important;
    }
}/* --- 히어로 섹션 가독성 및 글자 크기 최적화 --- */

/* 1. PC 버전 기본 설정 */
.hero-content h2 {
    font-size: 52px !important; /* 기본 크기 */
    line-height: 1.2 !important;
    font-weight: 900 !important;
    word-break: keep-all !important; /* 한글 단어 단위 줄바꿈 */
}

.hero-content p {
    font-size: 20px !important;
    margin: 20px 0 30px !important;
    word-break: keep-all !important;
}

/* 2. 태블릿 버전 (1024px 이하) */
@media (max-width: 1024px) {
    .hero-bg-box {
        padding: 80px 20px !important;
    }

    .hero-content h2 {
        /* 화면 너비에 비례해 줄어들되, 최소/최대 크기 제한 */
        font-size: clamp(32px, 5vw, 48px) !important; 
    }

    .hero-content p {
        font-size: 18px !important;
    }
}

/* 3. 모바일 버전 (600px 이하) */
@media (max-width: 600px) {
    .hero-bg-box {
        text-align: center !important; /* 모바일은 중앙 정렬이 더 예쁩니다 */
        padding: 60px 20px !important;
    }

    .hero-content h2 {
        font-size: 28px !important; /* 모바일 전용 크기 */
        line-height: 1.3 !important;
    }

    .hero-content p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }

    .btn-primary {
        width: 100% !important; /* 모바일 버튼은 큼직하게 */
        max-width: 280px;
        padding: 15px 0 !important;
    }
}
/* --- Fragrance Solutions 1열 배치 교정 --- */

@media (max-width: 1024px) {
    /* 부모 그리드를 1열로 변경 */
    .container > div[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: 1fr !important; 
        gap: 25px !important;
        padding: 0 10px !important;
    }

    .sol-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 40px 20px !important; /* 모바일에서 카드를 더 시원하게 */
        max-width: 400px !important;    /* 너무 퍼지지 않게 너비 제한 */
        margin: 0 auto !important;      /* 중앙 정렬 */
    }

    /* 이미지 크기를 충분히 확보 */
    .sol-card div[style*="height: 140px"] {
        height: 180px !important; /* 이미지를 더 크게 */
        margin-bottom: 20px !important;
    }

    .sol-card img {
        max-height: 160px !important;
        width: auto !important;
    }

    .sol-card h4 {
        font-size: 18px !important; /* 글자 크기 키움 */
        margin-top: 10px !important;
    }

    /* 상단 제목 간격 조정 */
    .flex-center[style*="margin-bottom: 60px"] {
        margin-bottom: 40px !important;
        text-align: center !important;
    }
}

/* --- 함께 사용하면 좋은 제품 섹션 반응형 교정 --- */

/* 1. PC 및 공통 카드 스타일 보정 */
.product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-5px) !important;
}

/* 이미지 비율 보호 및 배경 추가 (더 고급스럽게) */
.product-card img {
    aspect-ratio: 1 / 1 !important; /* 정사각형 유지 */
    object-fit: contain !important;  /* 이미지 안 잘리게 */
    background-color: #f9f9f9 !important;
    padding: 10px !important;
}

/* 2. 태블릿 및 모바일 (1024px 이하) */
@media (max-width: 1024px) {
    /* 부모 그리드를 4열에서 2열로 변경 (짜부 방지 핵심) */
    .container > div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }

    /* 제목 크기 및 여백 조정 */
    section[style*="padding: 100px 0"] h2 {
        font-size: 24px !important;
        margin-bottom: 30px !important;
    }

    .product-card h4 {
        font-size: 15px !important;
        word-break: keep-all !important; /* 한글 줄바꿈 최적화 */
    }
}

/* 3. 작은 모바일 (480px 이하) */
@media (max-width: 480px) {
    /* 공간이 너무 좁으면 1열로 변경 (선택사항) */
    /* 원하신다면 아래 주석을 해제하세요. 
    .container > div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    } 
    */
}
/* --- Hand Care Systems 제목 영역 중앙 정렬 교정 --- */

/* 1. 제목 양옆 선을 포함한 컨테이너 정렬 */
.container > div[style*="display: flex"] {
    display: flex !important;
    justify-content: center !important; /* 가로 중앙 */
    align-items: center !important;     /* 세로 중앙 */
    width: 100% !important;
    max-width: 600px !important;        /* 너무 넓게 퍼지지 않도록 제한 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. 메인 제목(H3) 중앙 정렬 */
.container h3 {
    text-align: center !important;
    word-break: keep-all !important;   /* 한글 줄바꿈 예쁘게 */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 3. 모바일 버전 (1024px 이하) */
@media (max-width: 1024px) {
    /* 모바일에서 가로선이 너무 길면 제목을 가리므로 길이를 줄임 */
    .container > div[style*="display: flex"] div[style*="flex: 1"] {
        max-width: 50px !important; /* 선 길이를 50px로 축소 */
    }

    .container h3 {
        font-size: clamp(26px, 6vw, 36px) !important; /* 화면 크기에 맞게 글자 크기 축소 */
        line-height: 1.3 !important;
    }

    .container p.main-text {
        font-size: 16px !important;
        line-height: 1.6 !important;
        padding: 0 10px !important;
    }
}

/* --- Contact CTA 섹션 중앙 정렬 교정 --- */

/* 1. 버튼 텍스트를 버튼 박스 정중앙으로 */
.contact-cta-section .btn-primary {
    display: inline-flex !important;
    align-items: center !important;      /* 세로 중앙 */
    justify-content: center !important;   /* 가로 중앙 */
    text-align: center !important;
    line-height: 1 !important;           /* 줄간격으로 인한 치우침 방지 */
    padding: 18px 35px !important;       /* 균일한 여백 */
    min-width: 220px !important;         /* 버튼이 너무 작아지지 않게 */
    margin: 0 auto !important;           /* 버튼 자체를 중앙으로 */
    text-decoration: none !important;
}

/* 2. 모바일 반응형 처리 (1024px 이하) */
@media (max-width: 1024px) {
    .contact-cta-section {
        padding: 60px 20px !important;   /* 모바일 여백 축소 */
    }

    .contact-cta-section h2 {
        font-size: 26px !important;      /* 제목 크기 조정 */
        line-height: 1.3 !important;
        word-break: keep-all !important; /* 단어 단위 줄바꿈으로 깔끔하게 */
    }

    .contact-cta-section p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        word-break: keep-all !important;
    }

    /* 모바일에서 버튼 너비 최적화 */
    .contact-cta-section .btn-primary {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* --- Hub Hero Section 중앙 정렬 정밀 보정 --- */

/* --- [2] Hub Hero Section (모바일 이미지 소멸 방지) --- */
.hub-hero-section {
    position: relative;
    width: 100%;
    /* PC에서 최소 높이 확보 */
    min-height: 600px !important; 
    
    /* 배경 이미지 출력 설정 (인라인 style의 이미지를 제어) */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; /* 모바일 호환성 */
    
    /* 내부 콘텐츠 정렬 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    color: #ffffff;
    padding: 120px 0 !important;
    background-color: #244C5A; /* 사진 로딩 전 대비용 */
}

.hero-content {
    width: 100%;
    max-width: 850px;
    z-index: 2;
    padding: 0 20px;
}

.hero-content h2 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.2;
    word-break: keep-all;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: clamp(16px, 2vw, 22px);
    margin-bottom: 40px;
    opacity: 0.95;
    word-break: keep-all;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* --- [3] 모바일 통합 대응 (1024px 이하) --- */
@media (max-width: 1024px) {
    .container { 
        width: 100% !important; 
        padding: 0 24px !important; 
    }

    /* 모바일에서 사진이 사라지지 않게 강제로 높이 고정 */
    .hub-hero-section {
        min-height: 450px !important; /* 모바일 전용 최소 높이 확보 */
        padding: 100px 0 !important; /* 여백으로 배경 영역 강제 확보 */
    }

    /* 공통 버튼 모바일 최적화 */
    .btn-primary {
        width: 100% !important;
        max-width: 300px !important;
        padding: 16px 0 !important;
        margin: 0 auto !important;
        display: inline-flex !important;
        justify-content: center;
        border-radius: 50px !important;
        text-decoration: none;
        color: #fff;
    }
}

/* --- [4] 상세 사양 테이블 카드화 (짤림 방지) --- */
@media (max-width: 1024px) {
    #specifications table, #specifications tr, #specifications td {
        display: block !important;
        width: 100% !important;
    }
    #specifications thead { 
        display: none; 
    }
    #specifications tr {
        margin-bottom: 20px;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 12px;
        background: #fff;
    }
    #specifications td {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #f9f9f9;
    }
    #specifications td::before {
        content: attr(data-label);
        font-weight: 700;
        color: #071D49;
    }
}

/* --- [2] hero-section-v4 (독립 섹션) --- */
.hero-section-v4 {
    position: relative;
    width: 100%;
    /* PC 기준 기본 설정 */
    min-height: 700px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 배경 최적화 */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* v4 제목: 화면 너비에 따라 32px ~ 64px 유동적 변화 */
.hero-section-v4 h1 {
    font-size: clamp(32px, 7vw, 64px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin-bottom: 25px !important;
    word-break: keep-all;
    text-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.hero-section-v4 h1 span {
    color: var(--green-main) !important;
}

/* v4 설명문: 화면 너비에 따라 17px ~ 24px 유동적 변화 */
.hero-section-v4 p {
    font-size: clamp(17px, 3vw, 24px) !important;
    max-width: 850px !important;
    margin: 0 auto 45px !important;
    opacity: 0.95 !important;
    word-break: keep-all;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* v4 프리미엄 버튼 */
.hero-section-v4 .btn-premium {
    display: inline-flex !important;
    background-color: var(--green-main) !important;
    color: #071D49 !important;
    padding: 18px 45px !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hero-section-v4 .btn-premium:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}


/* --- [4] 모바일 대응 (1024px 이하) --- */
@media (max-width: 1024px) {
    /* 모바일에서 섹션이 사라지지 않게 최소 높이 강제 */
    .hero-section-v4, .hub-hero-section {
        min-height: 500px !important;
        padding: 80px 20px !important;
    }

    .hero-section-v4 h1 {
        margin-bottom: 20px !important;
    }

    .hero-section-v4 p {
        margin-bottom: 35px !important;
        line-height: 1.5 !important;
    }

    /* 모바일 버튼 큼직하게 조정 */
    .btn-premium, .btn-primary {
        width: 100% !important;
        max-width: 300px !important;
        padding: 16px 0 !important;
        box-sizing: border-box;
    }
}