/* ============================================================
   Meality Official - Fully Integrated Style (Restore Version)
   - 3-Column PC Header (Logo Center)
   - Hamburger Mobile Menu with Language Links
   - Aspect-ratio Preserved Hero Sections
   - Centered Business Footer
   ============================================================ */

/* ============================================================
   기본 변수 및 초기화 (모바일 최적화 포함)
   ============================================================ */

:root {
    --primary-red: #A31E32;
    --bg-neutral: #FAF9F6;
    --text-main: #2D2A26;
    --text-light: #666;
    --white: #ffffff;
    --border: #eeeeee;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    /* 모바일 터치 시 발생하는 파란색 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent; 
}

html, body {
    /* 모바일에서 의도치 않은 가로 스크롤 방지 */
    overflow-x: hidden;
    /* iOS 등 일부 브라우저에서 가로 회전 시 글자 크기가 제멋대로 커지는 현상 방지 */
    -webkit-text-size-adjust: 100%;
}

body { 
    font-family: 'Noto Sans KR', sans-serif; /* IP 이슈 없는 오픈 라이선스 폰트 */
    color: var(--text-main); 
    background-color: var(--white); 
    line-height: 1.6; 
    /* 한글 단어 끊김 방지 (모바일 가독성의 핵심) */
    word-break: keep-all; 
}

h1, h2, h3, .serif { 
    font-family: 'Playfair Display', serif; /* IP 이슈 없는 오픈 라이선스 세리프 폰트 */
}

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

img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

/* 모바일 대응 기본 설정 */
@media (max-width: 768px) {
    .container { 
        /* 모바일에서는 여백을 조금 줄여 콘텐츠 공간을 더 확보합니다 */
        padding: 0 15px; 
    }
}

/* ============================================================
   HEADER - 3단 레이아웃 (PC & MOBILE)
   ============================================================ */

/* 1. Header 베이스 (80px 고정 및 상단 고정) */
header, #header-placeholder {
    position: sticky; 
    top: 0; 
    width: 100%; 
    height: 80px;
    background: rgba(255, 255, 255, 0.98); 
    z-index: 1000;
    border-bottom: 1px solid var(--border);
}

/* 2. Header 내부 정렬 (3단 등분 레이아웃) */
.header-inner {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%; 
    height: 100%; 
    padding: 0 40px;
}

/* 좌, 중, 우 영역 flex:1 로 설정하여 로고 정중앙 보장 */
.header-left, .logo, .header-right { 
    flex: 1; 
    display: flex; 
    align-items: center; 
    height: 100%; 
}

.header-left { justify-content: flex-start; }
.logo { justify-content: center; }
.header-right { justify-content: flex-end; }

/* 3. PC 내비게이션 링크 스타일 */
.nav-link { 
    display: flex; 
    gap: 30px; 
}

.nav-link a { 
    font-size: 13px; 
    font-weight: 500; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #333; 
    transition: 0.3s;
}

.nav-link a:hover, .nav-link a.active-page { 
    color: var(--primary-red); 
    font-weight: 700; 
}

/* 4. 로고 및 PC 언어 선택 */
.logo img { 
    height: 35px; 
    width: auto; 
    transition: 0.3s; 
}

.lang-nav { 
    display: flex; 
    gap: 12px; 
    font-size: 11px; 
    color: #999; 
}

.lang-nav a { 
    text-decoration: none; 
    color: #999; 
}

.lang-nav a.active-lang { 
    color: #000 !important; 
    font-weight: 700; 
}

/* 5. 햄버거 버튼 (기본 숨김) */
.menu-toggle { 
    display: none; 
    cursor: pointer; 
    flex-direction: column; 
    gap: 5px; 
    z-index: 1100; 
}

.menu-toggle span { 
    width: 22px; 
    height: 1.5px; 
    background: #333; 
    transition: 0.3s; 
}

/* 모바일 전용 언어 선택 (기본 숨김) */
.mobile-lang-links { 
    display: none; 
}

/* 6. 모바일 반응형 세팅 (768px 이하) */
@media (max-width: 768px) {
    header, #header-placeholder { 
        height: 70px; /* 모바일은 조금 더 낮게 */
    }

    .header-inner { 
        padding: 0 20px; 
    }

    /* PC용 우측 언어바 숨기기 */
    .header-right { 
        display: none; 
    }

    /* 햄버거 버튼 활성화 */
    .menu-toggle { 
        display: flex; 
    }

    /* 로고 위치 및 크기 조정 */
    .logo { 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%); 
    }
    .logo img { 
        height: 28px; 
    }

    /* 모바일 메뉴 (사이드 드로워 방식) */
    .nav-link {
        position: fixed; 
        top: 0; 
        left: -100%; /* 기본적으로 화면 밖에 위치 */
        width: 80%; 
        height: 100vh;
        background: #fff; 
        flex-direction: column; 
        align-items: flex-start;
        padding: 100px 40px; 
        gap: 25px; 
        transition: 0.4s ease-in-out; 
        z-index: 1050;
        box-shadow: 10px 0 20px rgba(0,0,0,0.05);
    }

    /* 메뉴 활성화 시 (.active 클래스 필요) */
    .nav-link.active { 
        left: 0; 
    }

    .nav-link a { 
        font-size: 18px; 
        letter-spacing: 2px; 
    }

    /* 모바일 메뉴 내 언어 선택 링크 노출 */
    .mobile-lang-links {
        display: flex; 
        gap: 15px; 
        margin-top: 30px; 
        padding-top: 20px; 
        border-top: 1px solid #eee;
        width: 100%;
    }

    .mobile-lang-links a {
        font-size: 14px !important; 
        color: #bbb !important; 
        letter-spacing: 1px;
    }

    .mobile-lang-links a.active { 
        color: var(--primary-red) !important; 
        font-weight: 700; 
    }
    
    /* 햄버거 버튼 X자 애니메이션용 (main.js 연동 시 사용) */
    .menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ============================================================
   HEADER - 상단 완전 고정 (Fixed Header)
   ============================================================ */

/* 1. 헤더 본체 고정 */
header#header-placeholder {
    position: fixed !important; /* 어떤 상황에서도 고정되도록 강제 */
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* PC 헤더 높이 */
    background-color: rgba(255, 255, 255, 0.98); /* 배경색 (약간 투명) */
    z-index: 9999; /* 본문의 어떤 요소보다 위에 오도록 설정 */
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

/* 2. 본문 밀어내기 (가장 중요!) 
   헤더가 고정되면 본문이 위로 붙기 때문에, 본문 시작점에 여백을 줍니다. */
main {
    margin-top: 80px; /* 헤더 높이(80px)만큼 본문을 아래로 내림 */
}

/* 3. 모바일 대응 */
@media (max-width: 768px) {
    header#header-placeholder {
        height: 70px !important; /* 모바일 헤더 높이 */
    }
    main {
        margin-top: 70px; /* 모바일 헤더 높이만큼 본문을 아래로 내림 */
    }
}

/* ============================================================
   FOOTER - 가운데 정렬 및 비즈니스 정보 최적화
   ============================================================ */

/* 1. Footer 베이스 */
#footer-placeholder { 
    border-top: 1px solid var(--border); 
    background: #fff; 
}

.site-footer { 
    padding: 80px 0; 
    text-align: center; 
    color: #888; 
    font-size: 13px; 
}

/* 2. 회사명 및 주요 링크 */
.footer-company-name { 
    font-weight: 700; 
    color: #333; 
    margin-bottom: 30px; 
    font-size: 16px; 
    letter-spacing: 1px;
    text-transform: uppercase;
}

.footer-bottom-links { 
    margin-bottom: 35px; 
    display: flex;
    justify-content: center;
    gap: 25px;
}

.footer-bottom-links a { 
    color: #555; 
    font-weight: 500; 
    transition: 0.3s;
}

.footer-bottom-links a:hover {
    color: var(--primary-red);
}

/* 3. 사업자 정보 영역 (가운데 정렬 최적화) */
.footer-business-info { 
    max-width: 900px; 
    margin: 0 auto; 
    line-height: 1.8;
}

.info-row { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
    margin-bottom: 5px; 
}

/* 정보 사이의 구분선 (|) */
.info-row span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ddd;
    margin-left: 15px;
    vertical-align: middle;
}

/* 4. 카피라이트 */
.footer-copyright { 
    color: #bbb; 
    margin-top: 50px; 
    letter-spacing: 1px; 
    font-size: 11px;
    text-transform: uppercase;
}

/* 5. 풋터 모바일 대응 */
@media (max-width: 768px) {
    .site-footer {
        padding: 60px 0;
    }

    .footer-bottom-links {
        gap: 15px;
        flex-wrap: wrap;
    }

    .info-row {
        flex-direction: column; /* 모바일은 세로로 나열하여 가독성 확보 */
        gap: 5px;
    }

    .info-row span:after {
        display: none !important; /* 모바일 세로 나열 시 구분선 제거 */
    }
}

/* ============================================================
   HERO SECTIONS - 이미지 비율 유지 및 가로 100% 최적화
   ============================================================ */

/* 1. 히어로 공통 레이아웃 (고정 높이 제거 및 비율 설정) */
.index-hero, 
.brand-hero, 
.product-hero-section, 
.stockist-hero, 
.community-hero {
    position: relative; 
    width: 100%; 
    height: auto; /* 고정 높이 제거 */
    
    /* [핵심] 가로 100%일 때 이미지의 원본 느낌을 살리는 비율 설정 */
    /* 16:7 비율을 기준으로 하되, 이미지에 따라 16/8 등으로 조절 가능합니다 */
    aspect-ratio: 16 / 7; 
    
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    overflow: hidden; 
    
    /* 이미지를 자르지 않고 가로 100%에 맞춰 꽉 채움 */
    background-size: 100% auto; 
    background-position: center; 
    background-repeat: no-repeat;
    background-color: #000; /* 이미지 비율 외 여백 발생 시 검은색 처리 */
}

/* 2. 페이지별 배경 이미지 개별 삽입 (기존과 동일) */
.index-hero { background-image: url('../images/index-hero-bg.jpg'); }
.brand-hero { background-image: url('../images/brand-hero-bg.jpg'); }
.product-hero-section { background-image: url('../images/product-hero-bg.jpg'); }
.stockist-hero { background-image: url('../images/stockists-hero-bg.jpg'); }
.community-hero { background-image: url('../images/community-hero-bg.jpg'); }

/* 3. 히어로 텍스트 가독성 (어두운 오버레이 효과) */
.index-hero::before, 
.brand-hero::before, 
.product-hero-section::before, 
.stockist-hero::before, 
.community-hero::before {
    content: ''; 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.3); 
    z-index: 1;
}

/* 4. 히어로 내부 텍스트 스타일 */
.index-hero *, 
.brand-hero *, 
.product-hero-section *, 
.stockist-hero *, 
.community-hero * { 
    position: relative; 
    z-index: 2; 
    color: #ffffff !important; 
}

.hero-tag { 
    font-size: 12px; 
    letter-spacing: 4px; 
    font-weight: 700; 
    margin-bottom: 20px; 
    text-transform: uppercase; 
    opacity: 0.9; 
}

.hero-title { 
    font-size: clamp(24px, 5vw, 56px); /* 모바일 대응을 위해 최소 크기 조정 */
    font-weight: 700; 
    margin-bottom: 25px; 
    line-height: 1.2;
}

/* 5. 모바일 대응 (반응형) */
@media (max-width: 768px) {
    .index-hero, 
    .brand-hero, 
    .product-hero-section, 
    .stockist-hero, 
    .community-hero {
        /* 모바일에서는 세로가 너무 좁아질 수 있으므로 비율을 살짝 높게 조정 */
        aspect-ratio: 4 / 3; 
        background-size: cover; /* 모바일의 좁은 화면에서는 이미지가 꽉 차는 것이 더 예쁠 수 있습니다 */
    }
}

/* ============================================================
   MAIN PAGE - Grand Open Event Section (Button Only Layout)
   - 텍스트 제거 후 이미지와 버튼만 심플하게 배치
   ============================================================ */

.main-event-section {
    margin-top: 60px; /* 히어로 섹션과의 간격 유지 */
    background-color: #ffffff;
}

.event-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 이미지 박스 */
.event-image-box {
    width: 100%;
}

.event-image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* 버튼 영역 - 상하 여백 조절 */
.event-content {
    width: 100%;
    padding: 60px 20px 100px; /* 이미지 아래쪽 간격을 적절히 배치 */
    text-align: center;
}

/* 버튼 디자인 - 고스트 버튼 스타일 유지 */
.btn-event-link {
    display: inline-block;
    background-color: transparent;
    color: #111 !important;
    border: 1px solid #111;
    padding: 15px 60px; /* 버튼을 좀 더 와이드하게 설정 */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-event-link:hover {
    background-color: #111;
    color: #fff !important;
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .event-content {
        padding: 40px 20px 80px;
    }
    .btn-event-link {
        width: 100%; /* 모바일에서는 터치하기 쉽게 꽉 채움 */
    }
}

/* ============================================================
   BRAND PAGE - 스토리텔링 레이아웃 및 브랜드 요소 디자인
   ============================================================ */

/* 브랜드 특징 섹션 (이미지 & 텍스트 배치) */
.brand-feature { 
    padding: 120px 0; 
    background-color: #fff; 
}

.feature-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 80px; 
    margin-bottom: 100px;
    /* 📍 교차 명령(reverse)을 삭제하여 HTML에 적힌 순서대로 배치됩니다. */
}

.feature-image { 
    flex: 1.2; 
}

.feature-image img { 
    width: 100%; 
    height: auto; 
    box-shadow: 20px 20px 60px rgba(0,0,0,0.05); 
}

.feature-text { 
    flex: 1; 
}

.feature-text .category { 
    font-size: 11px; 
    color: var(--primary-red); 
    font-weight: 700; 
    letter-spacing: 3px; 
    display: block; 
    margin-bottom: 20px; 
    text-transform: uppercase;
}

.feature-text h2 { 
    font-size: clamp(28px, 4vw, 42px); 
    line-height: 1.3; 
    margin-bottom: 30px; 
    font-weight: 700;
}

.feature-text p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.8;
}

/* 브랜드 페르소나 및 원칙 리스트 스타일 */
.persona-traits, .principle-list { 
    list-style: none; 
    margin-top: 40px; 
}

.persona-traits li, .principle-list li { 
    margin-bottom: 30px; 
    padding-left: 25px; 
    border-left: 2px solid var(--primary-red); 
}

.persona-traits li strong, .principle-list li strong { 
    display: block; 
    font-size: 17px; 
    margin-bottom: 8px; 
    color: var(--text-main);
}

.persona-traits li span, .principle-list li span { 
    font-size: 15px; 
    color: var(--text-light); 
}

/* 브랜드 커뮤니케이션 메시지 박스 */
.brand-communication {
    padding: 120px 0;
    background-color: #fff;
}

.comm-message-box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 100px;
}

.comm-message-box h3 {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.5;
    margin-bottom: 30px;
    color: var(--text-main);
}

/* 📍 가치 제안 카드 (하단 2개 영역) 호버 액션 추가 */
.comm-value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.value-item {
    background: var(--bg-neutral);
    overflow: hidden;
    /* 부드러운 움직임을 위한 트랜지션 */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

/* 마우스를 올렸을 때 위로 살짝 들리는 효과 */
.value-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.value-img {
    overflow: hidden;
}

.value-img img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* 이미지 확대 애니메이션 */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 마우스를 올렸을 때 내부 이미지가 슬며시 커지는 효과 */
.value-item:hover .value-img img {
    transform: scale(1.08);
}

.value-info {
    padding: 40px;
}

.value-info .v-tag {
    font-size: 10px;
    color: var(--primary-red);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}

.value-info h4 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* 브랜드 페이지 모바일 최적화 */
@media (max-width: 768px) {
    .brand-feature {
        padding: 80px 0;
    }

    .feature-wrapper {
        flex-direction: column !important;
        gap: 40px;
        margin-bottom: 80px;
    }

    .feature-text {
        text-align: center;
    }

    .persona-traits li, .principle-list li {
        text-align: left;
    }

    .comm-value-grid {
        grid-template-columns: 1fr;
    }
    
    .value-info {
        padding: 30px 20px;
    }
}

/* ============================================================
   PRODUCT PAGE - 미니멀 럭셔리 라인업 및 제품 상세 디자인
   - 기존 통합 스타일(style.css)과 독립적으로 작동
   - image_1.png의 감각적인 무드 및 마룬 컬러 포인트 반영
   - 비대칭 스태거드(Staggered) 그리드 레이아웃
   ============================================================ */

/* 1. 제품 페이지 전용 변수 (기존 변수와 충돌 방지) */
:root {
    --meality-maroon: #800000; /* image_1.png 로고 및 강조색 */
    --p-text-dark: #111111;
    --p-text-gray: #666666;
    --p-text-soft: #999999;
    --p-bg-off-white: #fcfcfc;
}

/* 2. 섹션 공통 레이아웃 */
.meality-product-display {
    padding: 120px 0;
    background-color: #ffffff;
}

/* 3. 제품 섹션 헤더 (이미지에서 보신 좌측 바 정렬 스타일) */
.meality-section-header {
    text-align: left;
    margin-bottom: 80px;
    padding-left: 20px;
    border-left: 1px solid #eee;
}

.meality-section-header .v-tag {
    font-size: 11px;
    letter-spacing: 4px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
    color: var(--meality-maroon);
}

.meality-section-header h2 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 25px;
    color: var(--p-text-dark);
    font-family: 'Playfair Display', serif;
}

.meality-section-header .section-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--p-text-gray);
    word-break: keep-all;
}

/* 4. 제품 그리드 시스템 (비대칭 staggered layout) */
.product-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}

.product-item {
    display: flex;
    flex-direction: column;
}

/* 좌우 비대칭 배치를 위한 개별 패딩 조정 */
.staggered {
    padding-top: 60px;
}

.staggered-reverse {
    padding-bottom: 60px;
}

/* 5. 이미지 박스 및 인터랙티브 호버 */
.p-img-box {
    position: relative;
    overflow: hidden;
    background-color: var(--p-bg-off-white);
    aspect-ratio: 1 / 1.1; /* 감각적인 세로 비율 */
}

.p-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.2, 1);
}

.p-link:hover img {
    transform: scale(1.05);
}

/* 깨끗한 화이트 오버레이 효과 */
.p-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.6s ease-in-out;
}

.view-detail {
    font-size: 16px;
    color: var(--p-text-dark);
    position: relative;
    padding-bottom: 5px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.view-detail::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1px;
    background-color: var(--p-text-dark);
    transition: 0.4s;
    transform: translateX(-50%);
}

.p-link:hover .p-overlay {
    opacity: 1;
}

.p-link:hover .view-detail::after {
    width: 100%;
}

/* 6. 제품 텍스트 정보 디자인 */
.p-details {
    padding: 35px 15px 0;
    text-align: left;
}

.p-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--p-text-dark);
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}

.p-subtitle-ko {
    font-size: 14px;
    color: var(--p-text-gray);
    margin-bottom: 20px;
}

.p-features {
    font-size: 13px;
    line-height: 1.8;
    color: var(--p-text-soft);
    margin-bottom: 25px;
}

/* 7. 가격 표시 디자인 */
.p-pricing-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.origin-price {
    font-size: 12px;
    color: #ccc;
    text-decoration: line-through;
}

.sale-price {
    font-size: 17px;
    font-weight: 700;
    color: var(--meality-maroon);
}

.sale-price small {
    font-size: 13px;
    margin-left: 4px;
    font-weight: 400;
}

/* 8. 제품 페이지 모바일 최적화 (Media Query) */
@media (max-width: 768px) {
    .meality-product-display {
        padding: 80px 0;
    }

    .product-collection-grid {
        grid-template-columns: 1fr; /* 1열 배치 */
        gap: 60px;
    }

    .staggered, .staggered-reverse {
        padding: 0; /* 모바일은 대칭 정렬 */
    }

    .meality-section-header {
        text-align: center;
        border-left: none;
        padding-left: 0;
    }

    .p-details {
        text-align: center;
    }
}

/* ============================================================
   STOCKISTS PAGE STYLE (판매처 본문 전용 최종본)
   - 히어로 제외 / 중간 제목 전체 가운데 정렬
   - 지도 이미지 경로 최적화 (../images/)
   - 오프라인 지도 분할 레이아웃 (1:1.3) 및 카드 호버 액션
   ============================================================ */

/* 1. 판매처 메인 콘텐츠 영역 */
.stockist-section { 
    position: relative;
    padding: 100px 0; 
    border-top: 1px solid #eee; 
    background-color: #fff;
    clear: both;
}

/* 배경색 변형 섹션 (온라인/파트너사 구분) */
.online-bg { background-color: #fcfcfc; }
.partner-bg { background-color: #f8f8f8; }

/* 📍 2) 모든 중간 제목 가운데 정렬 반영 */
.section-header { 
    margin-bottom: 60px; 
    text-align: center; 
}

.section-header h2 { 
    font-size: 32px; 
    font-weight: 700; 
    color: #111; 
    margin-top: 10px; 
    font-family: 'Playfair Display', serif;
}

.v-tag { 
    font-size: 11px; 
    color: var(--primary-red); 
    text-transform: uppercase; 
    font-weight: 700; 
    letter-spacing: 3px; 
    display: block; 
}

/* 2. 선명한 테두리 박스 (공통 스타일) */
.border-sharp {
    border: 1px solid #111111 !important;
    background: #ffffff;
    box-sizing: border-box;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

/* 3. 온라인 판매처 리스트 디자인 */
.stockist-container.border-sharp { 
    max-width: 1000px; 
    margin: 0 auto 80px; 
}

.store-list { list-style: none; padding: 10px 0; margin: 0; }
.store-list li { border-bottom: 1px solid #eee; }
.store-list li:last-child { border-bottom: none; }

.store-list li a { 
    padding: 25px 50px;
    text-decoration: none; 
    color: #333; 
    font-size: 16px; 
    display: flex; 
    width: 100%;
    justify-content: space-between; 
    align-items: center; 
    transition: 0.3s;
}

.store-list li a:hover { background-color: #fafafa; }
.store-list li a:hover .store-name { color: var(--primary-red); font-weight: 600; }

.badge { 
    font-size: 10px; padding: 3px 12px; border-radius: 2px; 
    font-weight: 600; border: 1px solid #ddd; text-transform: uppercase;
}

/* 4. 오프라인 지도 분할 레이아웃 스타일 (1:1.3) */
.map-split {
    display: flex;
    padding: 0 !important; 
    overflow: hidden;
    margin-bottom: 50px;
    min-height: 400px;
    background: #fff;
}

/* 왼쪽 정보 박스 (비율 1) */
.store-info-box {
    flex: 1;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left; /* 주소 가독성을 위해 텍스트는 좌측 정렬 */
}

.store-info strong { 
    font-size: 24px; 
    display: block; 
    margin-bottom: 15px; 
    color: #111; 
    font-family: 'Playfair Display', serif;
}

.store-info p { font-size: 15px; color: #666; line-height: 1.8; margin: 0; }

.map-link-text {
    display: inline-block;
    margin-top: 30px;
    font-size: 13px;
    color: var(--primary-red);
    text-decoration: underline;
    font-weight: 700;
}

/* 오른쪽 지도 이미지 영역 (비율 1.3) */
.store-map-view {
    flex: 1.3; 
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 1px solid #111;
    cursor: pointer;
}

/* 📍 3) 지도 이미지 경로 수정 (assets 제거) */
.coex-map { background-image: url('../images/map_coex.jpg'); }
.insa-map { background-image: url('../images/map_insa.jpg'); }

/* 지도 호버 오버레이 */
.map-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(163, 30, 50, 0); 
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: 0.4s ease;
}

.store-map-view:hover { opacity: 0.9; }
.store-map-view:hover .map-overlay { 
    opacity: 1; 
    background: rgba(163, 30, 50, 0.8); 
}

/* 5. 파트너사 상세 카드 및 호버 액션 */
.partner-detailed-list { 
    display: flex; 
    flex-direction: column; 
    gap: 50px; 
    max-width: 1100px;
    margin: 0 auto;
}

.partner-detail-card { 
    padding: 60px; 
    background: #fff;
    border-top: 6px solid var(--primary-red) !important; 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

/* 마우스를 올리면 위로 살짝 들리는 효과 */
.partner-detail-card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 25px 50px rgba(0,0,0,0.1); 
}

.p-header { 
    margin-bottom: 45px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 35px; 
}

.p-category { 
    font-size: 11px; color: var(--primary-red); font-weight: 700; 
    text-transform: uppercase; margin-bottom: 10px; display: block; letter-spacing: 2px;
}

.p-name { font-size: 28px; font-weight: 700; color: #111; }
.p-name small { font-size: 15px; color: #999; font-weight: 400; margin-left: 12px; }

.p-info-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 50px; 
}

.p-info-item h4 { 
    font-size: 17px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 15px; 
    margin-bottom: 20px; 
    color: #111; 
}

.p-info-item ul { list-style: none; }
.p-info-item ul li { 
    font-size: 14px; color: #666; margin-bottom: 12px; 
    position: relative; padding-left: 18px; 
}

.p-info-item ul li::before { 
    content: '·'; position: absolute; left: 0; 
    color: var(--primary-red); font-weight: bold; 
}

/* 6. 모바일 대응 (반응형 최적화) */
@media (max-width: 768px) {
    .stockist-section { padding: 80px 0; }
    
    .section-header h2 { font-size: 26px; }

    /* 모바일에서 지도 레이아웃 1열화 */
    .map-split { flex-direction: column !important; min-height: auto; }
    .store-map-view { width: 100%; height: 250px; border-left: none; border-top: 1px solid #111; }
    .store-info-box { padding: 40px 25px; text-align: center; }
    
    .store-list li a { padding: 20px 25px; }
    
    .p-info-grid { grid-template-columns: 1fr; gap: 30px; }
    .partner-detail-card { padding: 40px 25px; }
}

/* ============================================================
   COMMUNITY PAGE STYLE (커뮤니티 전용 - 판매처 간섭 방지)
   - 히어로 제외 / 카드 움직임 효과 삭제
   - 📍 오직 커뮤니티 구역(.community-content) 내부만 정렬
   - 버튼 개별 호버 효과 유지
   ============================================================ */

/* 1. 커뮤니티 메인 콘텐츠 구역 */
.community-content {
    padding: 100px 0 150px;
    background-color: #ffffff;
}

.community-content .community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. 📍 커뮤니티 전용 테두리 박스 (판매처 .border-sharp 간섭 방지) */
.community-content .border-sharp {
    border: 1px solid #111111 !important;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center; /* 📍 커뮤니티 박스 내부만 중앙 정렬 */
    margin: 0;
    width: 100%;
    /* 박스 자체의 transform(들썩임) 효과는 삭제했습니다. */
}

/* 3. 커뮤니티 카드 내부 텍스트 및 레이아웃 */
.community-content .comm-card {
    padding: 60px 20px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 📍 내부 요소들 완전 중앙 정렬 */
    justify-content: center;
}

.community-content .comm-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
    font-family: 'Playfair Display', serif;
}

.community-content .comm-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 35px;
    word-break: keep-all;
}

/* 4. 버튼 및 언어 박스 (커뮤니티 전용 중앙 정렬) */
.community-content .btn-group {
    display: flex;
    gap: 12px;
    justify-content: center; /* 버튼 박스 중앙 */
    width: 100%;
}

/* 🔴 레드 버튼 호버 효과 (버튼만 반응) */
.community-content .btn-red {
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--primary-red);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: 1px solid var(--primary-red);
}

.community-content .btn-red:hover {
    background-color: #8b0020;
    transform: scale(1.05); /* 버튼만 살짝 커짐 */
}

.community-content .lang-box {
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

/* 🌐 언어 선택 버튼 호버 효과 */
.community-content .btn-lang {
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.community-content .btn-lang:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
    background-color: #fffafb;
    transform: scale(1.1);
}

/* 5. 모바일 반응형 (커뮤니티 구역만 강제 보정) */
@media (max-width: 768px) {
    .community-content .community-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
        padding: 0 15px;
    }

    .community-content .border-sharp {
        align-items: center !important;
        margin: 0 auto !important;
    }

    .community-content .comm-card {
        padding: 50px 15px;
    }
    
    /* 모바일 터치 반응 */
    .community-content .btn-red:active, 
    .community-content .btn-lang:active {
        transform: scale(0.95);
    }
}

/* ============================================================
   항상 맨 아래 위치!!! RESPONSIVE - 모바일 최적화 레이아웃 (Media Query) 항상 맨 아래 위치!!!
   ============================================================ */

@media (max-width: 768px) {
    /* 1. 모바일 헤더 및 로고 정렬 */
    header, #header-placeholder { 
        height: 70px !important; /* 모바일 높이로 축소 */
    }
    
    .header-inner { 
        padding: 0 20px; 
    }
    
    /* PC용 우측 메뉴 및 내비게이션 숨김 */
    .header-right, 
    .header-left .nav-link:not(.active) { 
        display: none !important; 
    }

    /* 햄버거 메뉴 버튼 활성화 */
    .menu-toggle { 
        display: flex !important; 
    }

    /* 로고 모바일 정중앙 고정 */
    .logo { 
        position: absolute; 
        left: 50%; 
        top: 50%; 
        transform: translate(-50%, -50%); 
    }
    
    .logo img { 
        height: 28px; 
    }

    /* 2. 모바일 사이드 메뉴 (Drawer) */
    .nav-link.active {
        display: flex !important; left: 0 !important; 
        position: fixed; 
        top: 0; left: 0; 
        width: 100%; height: 100vh;
        background: rgba(255, 255, 255, 0.98); 
        flex-direction: column; 
        align-items: center; 
        justify-content: center;
        padding: 40px; 
        gap: 25px; 
        z-index: 1050;
    }

    .nav-link.active a { 
        font-size: 20px; 
        font-weight: 700;
    }

    /* 모바일 전용 언어 선택바 */
    .mobile-lang-links {
        display: flex; 
        gap: 15px; 
        margin-top: 30px; 
        padding-top: 20px; 
        border-top: 1px solid #eee;
        width: 100%;
        justify-content: center;
    }

    /* 3. 레이아웃 1열 최적화 (Stacking) */
    /* 2열로 보이던 그리드들을 모바일에서는 모두 1열로 세웁니다 */
    .feature-wrapper, 
    .product-hero-grid, 
    .community-grid, 
    .p-info-grid, 
    .map-split {
        flex-direction: column !important; 
        grid-template-columns: 1fr !important; 
        gap: 40px;
    }

    .feature-image, 
    .feature-text { 
        width: 100%; 
        text-align: center; 
    }

    /* 좌우 반전 레이아웃 초기화 */
    .feature-wrapper.reverse { 
        flex-direction: column !important; 
    }

    /* 4. 섹션별 세부 조정 */
    /* 히어로 섹션 비율을 모바일에 맞게 조정 (좀 더 세로로 길게) */
    .brand-hero, 
    .community-hero, 
    .stockist-hero { 
        aspect-ratio: 4 / 3 !important; 
        height: auto;
    }

    /* 오프라인 매장 정보 및 지도 */
    .store-info-box { 
        padding: 40px 20px; 
        text-align: center; 
    }
    
    .store-map-view { 
        width: 100%; 
        height: 250px; 
        border-left: none; 
        border-top: 1px solid #111; 
    }

    /* 풋터 비즈니스 정보 세로 정렬 */
    .info-row { 
        flex-direction: column; 
        gap: 8px; 
    }
}