@font-face {
    font-family: 'Pretendard';
    font-weight: 400; /* Regular */
    font-style: normal;
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500; /* Medium */
    font-style: normal;
    src: url('../fonts/Pretendard-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700; /* Bold */
    font-style: normal;
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2');
}

/* =======================================================
   iOS 및 브라우저 기본 폼 스타일 전역 초기화 (Reset)
======================================================= */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
button {
    -webkit-appearance: none; /* 아이폰 Safari 기본 스타일 무시 */
    -moz-appearance: none;
    appearance: none;
    border-radius: 0; /* 아이폰 특유의 둥근 모서리 강제 제거 */
    margin: 0;
}

/* IE/Edge 브라우저에서 인풋 창에 생기는 X 버튼 숨김 */
input::-ms-clear,
input::-ms-reveal {
    display: none; width: 0; height: 0;
}
/* 웹킷(크롬, 사파리) 브라우저 검색창에 생기는 X 버튼 숨김 */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    display: none;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body { background-color: #fff; color: #333; font-family: 'Pretendard', sans-serif;}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ==========================================================================
   [상단 전체 메가 드롭다운 헤더 (GNB) - 개별 위치 매칭 버전]
   ========================================================================== */
header {
    width: 100%;
    border-bottom: 1px solid #eee;
    position: relative;
    background-color: #fff;
    z-index: 1000;
}
.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
    z-index: 1002; /* 최상단 유지 */
}
header::after {
    content: '';
    position: fixed;
    top: 100px; /* 헤더의 높이인 100px 아래 구역부터 어두워지도록 설정 */
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* 검은색 반투명 강도 (0.5를 낮추면 더 밝아지고, 높이면 더 어두워집니다) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease; /* 부드럽게 어두워지는 애니메이션 속도 */
    z-index: 990; /* 메인 비주얼 슬라이더(1)보다는 위, 내려오는 드롭다운 메뉴(999)보다는 아래에 깔리도록 설정 */
    pointer-events: none; /* 배경 판이 마우스 클릭이나 스크롤을 방해하지 않도록 차단 */
}

/* 2. 활성화 상태: 헤더 구역에 마우스 커서가 올라가면 배경 판을 노출시킵니다 */
header:hover::after {
    opacity: 1;
    visibility: visible;
}


/* 🌐 헤더 한/영 변환 버튼 스타일 */
.header-lang-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px; /* 앞쪽 메뉴와의 간격 */
}

.header-lang-toggle .lang-link {
    font-size: 16px;
    font-weight: 500;
    color: #888; /* 기본 텍스트 색상 (회색) */
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

/* 마우스를 올렸거나, 현재 선택된 언어일 때 포인트 컬러 적용 */
.header-lang-toggle .lang-link:hover,
.header-lang-toggle .lang-link.active {
    color: #9bc63b; /* 영남 메인 포인트 컬러 (그린) */
    font-weight: 500;
}

/* KOR과 ENG 사이의 구분선(|) 스타일 */
.header-lang-toggle .lang-divider {
    color: #ddd;
    font-size: 12px;
}
.logo img { height: 45px; vertical-align: middle; }

.nav-container { 
    display: flex; 
    align-items: center; 
    height: 100%; 
    flex: 1; 
    justify-content: space-between; /* 메뉴 영역과 제휴쇼핑몰 버튼을 양 끝으로 밀어냅니다 */
    padding-left: 80px; /* 로고와 첫 메뉴(회사소개) 사이의 여백을 시원하게 벌려줍니다 */
}

/* 다섯 개의 메인 메뉴를 담고 있는 바구니 */
.nav-menu { 
    display: flex; 
    height: 100%; 
    flex: 1; /* ⭐ 제휴쇼핑몰 버튼 전까지 남은 가로 공간을 한 번 더 통째로 확보합니다 */
    justify-content: space-between; /* 🌟 핵심: 5개 메뉴가 가로 공간을 정확히 '비례 분할'하여 똑같은 여백을 두고 흩어지게 만듭니다 */
    max-width: 750px; /* 메뉴들이 너무 멀리 찢어지지 않도록 피그마 비율에 맞춰 최대 폭을 제한합니다 */
}

/* 각각의 메인 메뉴 글자 주머니 (기존 코드 유지) */
.nav-item { 
    position: relative; 
    height: 100%; 
    display: flex; 
    align-items: center; 
}
.nav-item > a { 
    font-size: 17px; 
    font-weight: 600; 
    color: #333; 
    transition: color 0.2s; 
    display: block; 
    line-height: 100px; 
    white-space: nowrap;
}
.btn-shop { background-color: #9bc63b; color: #fff !important; padding: 8px 18px; border-radius: 20px; font-size: 16px; font-weight: bold; margin-left: 40px; z-index: 1003; }
.btn-shop:hover { background-color: #83a92e; }

/* ------------------------------------------
   Background Panel: 마우스 올리면 스르륵 내려오는 공통 '흰색 바탕판'
   ------------------------------------------ */
.nav-bg {
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    border-top: 1px solid #eee;
    height: 0; /* 평소엔 접어둠 */
    overflow: hidden;
    transition: height 0.25s ease;
    z-index: 999; /* 서브 메뉴 글자보다 아래에 깔림 */
}

/* ------------------------------------------
   Sub Menus: 메인 메뉴 글자 바로 아래 일치되어 떨어지는 서브 박스
   ------------------------------------------ */
.sub-box {
    position: absolute;
    top: 95px; /* 헤더 바로 밑 */
    left: 50%;
    transform: translateX(-50%); /* 메뉴 글자 중심에 정렬 */
    padding-top: 25px;
    width: 130px; /* 서브 메뉴 글자들이 넉넉히 들어갈 너비 */
    text-align: center;
    opacity: 0; /* 평소엔 투명하게 숨김 */
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 1001;
}
.sub-box ul li { margin-bottom: 10px; }
.sub-box ul li a { font-size: 15px; color: #666; font-weight: 400; display: block; transition: color 0.2s; white-space: nowrap; }
.sub-box ul li a:hover { color: #9bc63b; font-weight: 500; }

/* ------------------------------------------
   🔥 작동 상호작용 (Hover)
   ------------------------------------------ */
/* 1. 헤더 전체에 마우스가 들어오면 뒷배경 흰 판 롤다운 */
header:hover .nav-bg { 
    height: 250px; 
}

/* 2. 마우스가 올라간 대메뉴의 글자색을 바꾸고, '그 대메뉴 내부의 서브박스'만 쏙 등장시킴 */
.nav-item:hover > a { color: #9bc63b; }
.nav-item:hover .sub-box {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   [메인 비주얼 슬라이더 (자동 롤링 및 관리자 연동)]
   ========================================================================== */
.main-visual {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: auto;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden; /* 사진이 영역 밖으로 나가지 않도록 차단 */
    z-index: 1;
}

/* 슬라이더 내부의 개별 이미지 카드 */
.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s; /* 부드러운 페이드인 효과 */
}
.slide-item.active {
    opacity: 1;
    visibility: visible;
}
.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 꽉 차게 조절 */
}

/* 하단 내비게이션 점(Dots) 구역 */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10; /* 이미지보다 무조건 위 */
}
.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(247, 248, 249, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #495057; 
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(73, 80, 87, 0.3);
}

.products-section { width: 100%; max-width: 1200px; margin: 60px auto; padding: 0 20px; text-align: center; }
.products-section h2 { font-size: 34px; font-weight: bold; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.products-section p { font-size: 18px; color: #666; margin-bottom: 40px; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.product-card { background-color: #fff; border-radius: 4px; overflow: hidden; transition: transform 0.2s; }
.product-card:hover { transform: translateY(-5px); }
.product-card a {
    display: flex;
    flex-direction: column;
    align-items: center; /* 링크 내부 요소를 중앙으로 모음 */
    text-decoration: none;
}
.prod-img-box { width: 100%; height: 380px; background-color: #e5e5e5; overflow: hidden; }
.prod-img-box img { width: 100%; height: 100%; object-fit: cover; }
.prod-info { 
    padding: 5px 0px; 
    text-align: center; /* 여기서 모든 내부 텍스트를 중앙으로 */
}

/* 슬라이더가 4개씩 잘 보이도록 조정 */
.category-slider {
    width: 100%;
    margin: 0 auto;
}

/* 슬라이드 내부 카드 간격 */
.category-slider .product-card {
    padding: 0 15px; /* 좌우 여백 */
    box-sizing: border-box;
}

/* 슬라이더 화살표 색상 조정 */
.slick-prev:before, .slick-next:before {
    color: #333 !important;
    font-size: 30px;
}
/* 2. 상품명 스타일 */
.prod-name { 
    font-size: 18px; 
    font-weight: 500; 
    margin-bottom: 5px; 
    text-align: center; 
    
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    width: 100%; 
}

.admin-trigger { display: block; text-align: center; margin: 20px 0; font-size: 15px; color: #aaa; }

.board-section { width: 100%; max-width: 1200px; margin: 0 auto 5px auto; display: flex; }
.board-box { flex: 1; padding: 40px; color: #fff; min-height: 220px; }
.notice-bg { background-color: #9bc63b; }
.qna-bg { background-color: #848484; }
.board-box h3 { font-size: 30px; font-weight: bold; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 10px; display: flex; justify-content: space-between; }
.board-list li { display: flex; justify-content: space-between; font-size: 15px; opacity: 0.9; cursor: pointer; align-items: center;margin-bottom: 6px;}
.board-list li:hover { opacity: 1; text-decoration: underline; }
.board-date { font-weight: 300; font-size: 15px; }
.board-list .board-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 20px; /* 제목이 길어져도 날짜와 침범하지 않도록 간격 확보 */
}

.board-list .board-date {
    width: 85px; /* 날짜가 들어갈 고정 공간 할당 */
    flex-shrink: 0; /* 모바일 화면처럼 좁아져도 날짜 영역은 축소되지 않도록 보호 */
    text-align: right; 
    font-variant-numeric: tabular-nums; 
    letter-spacing: 0.5px;
}

.sns-section { width: 100%; max-width: 1200px; margin: 40px auto; display: flex; justify-content: center; gap: 60px; }
.sns-icon img { height: 55px; transition: opacity 0.2s; }
.sns-icon img:hover { opacity: 0.7; }

/* ==========================================================================
   [상품 상세 페이지 (detail.php 전용)]
   ========================================================================== */
.detail-main { max-width: 900px; margin: 40px auto; padding: 0 20px; line-height: 1.6; }
.back-btn { display: inline-block; margin-bottom: 20px; color: #555; text-decoration: none; font-weight: bold; font-size: 15px; }
.detail-container { display: flex; gap: 40px; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 40px; }
.detail-img { flex: 1; max-width: 400px; }
.detail-img img { width: 100%; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); -webkit-user-drag: none; user-drag: none; }
.detail-info { flex: 1; }
.p-title { font-size: 28px; font-weight: bold; margin: 0 0 10px 0; color: #333; }
.p-price { font-size: 22px; color: #9bc63b; font-weight: bold; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 15px; }

/* 우클릭 방지 및 에디터 본문용 CSS */
.p-desc {
    font-size: 16px; color: #555; 
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.p-desc img {
    max-width: 100% !important; height: auto !important; display: block; margin: 15px 0;
    -webkit-user-drag: none; user-drag: none;
}

/* ==========================================================================
   [하단 푸터 공통]
   ========================================================================== */
footer { width: 100%; background-color: #111; color: #ccc; padding: 10px 0; font-size: 12px; line-height: 1.8; }
.footer-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 40px; }
.footer-logo img { height: 30px; filter: grayscale(1) brightness(2); opacity: 0.7;margin-top: -20px; }
.footer-info p { margin: 0; color: #888;line-height: 1.3; }
/* ==========================================================================
   📱 [모바일 반응형 (Responsive Web) 스타일]
   화면 가로폭이 768px 이하일 때만 아래 디자인이 덮어씌워집니다.
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 1. 헤더 구역: 로고를 위로, 메뉴를 아래로 분리하고 가로 스크롤(스와이프) 적용 */
    .header-inner { 
        flex-direction: column; 
        height: auto; 
        padding: 15px; 
        gap: 15px; 
    }
    .logo { text-align: center; width: 100%; }
    
    /* 스마트폰에서 손가락으로 좌우로 밀어서 메뉴를 볼 수 있게 만듭니다 */
    .nav-container { 
        width: 100%; 
        padding-left: 0; 
        overflow-x: auto; /* 가로 스크롤 생성 */
        white-space: nowrap; 
        -webkit-overflow-scrolling: touch; /* 아이폰 스크롤 부드럽게 */
        padding-bottom: 10px;
    }
    .nav-menu { width: max-content; gap: 20px; }
    .nav-item { height: auto; }
    .nav-item > a { line-height: normal; padding: 5px 0; font-size: 14px; }
    .btn-shop { margin-left: 15px; padding: 6px 14px; font-size: 12px; }

    /* 💡 모바일은 터치(클릭) 방식이라 '마우스 호버'가 불편하므로 드롭다운과 배경 어두워짐을 숨깁니다 */
    .sub-box, .dropdown-menu { display: none !important; }
    header::after { display: none !important; }

    /* 2. 메인 롤링 배너: 스마트폰 화면 비율에 맞게 높이 축소 */
    .main-visual { height: 220px; }

    /* 3. 상품 목록: 3칸에서 2칸 배열로 촘촘하게 변경 */
    .products-grid { 
        grid-template-columns: repeat(2, 1fr); /* 1줄에 2개씩 */
        gap: 15px; 
    }
    .prod-img-box { height: 200px; } /* 사진 높이도 모바일에 맞게 축소 */
    .prod-name { font-size: 14px; }
    .prod-price { font-size: 13px; }

    /* 4. 공지사항 & QnA: 가로 배열을 세로 배열로 층층이 쌓기 */
    .board-section { flex-direction: column; }
    .board-box { min-height: auto; padding: 25px 20px; }

    /* 5. 하단 SNS & 푸터 구역 정리 */
    .sns-section { gap: 30px; margin: 30px auto; }
    .sns-icon img { height: 40px; }
    .footer-container { 
        flex-direction: column; 
        text-align: center; 
        gap: 15px; 
    }

    /* 6. 상품 상세 페이지 (detail.php) 세로 정렬 */
    .detail-container { flex-direction: column; gap: 20px; padding: 15px; }
    .detail-img { max-width: 100%; }
    .p-title { font-size: 22px; }
}
/* ==========================================================================
   [상품소개 메뉴 전용 비주얼 카테고리 스타일]
   ========================================================================== */
.prod-cat-img {
    width: 130px;
    height: 130px;
    margin: 0 auto 10px auto;
    transition: transform 0.3s ease;
}
.prod-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지가 네모 틀에 잘리지 않고 온전히 들어가게 조절 */
}

.prod-cat-title {
    font-size: 15px; /* 13px -> 15px 로 확대 */
    color: #555;
    font-weight: 500;
    display: block;
    transition: color 0.2s;
    white-space: normal !important; 
    word-break: keep-all; 
    line-height: 1.4;
}
.prod-cat-sub {
    font-size: 12px; /* 11px -> 12px 로 확대 */
    color: #aaa;
    display: block;
    margin-top: 4px;
    font-weight: 300;
    text-transform: capitalize;
    white-space: normal !important; 
    word-break: keep-all;
    line-height: 1.2;
}

/* 마우스 올렸을 때 애니메이션 */
.sub-box ul li:hover .prod-cat-img {
    transform: translateY(-5px) scale(1.05);
}
.sub-box ul li:hover .prod-cat-title {
    color: #9bc63b;
}
/* ==========================================================================
   [브랜드 메뉴 - 가로 5단 로고 그리드 스타일]
   ========================================================================== */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 가로 5칸 배열 */
    gap: 15px; /* 상자 사이의 간격 */
    padding: 25px 30px;
}

.brand-logo-box {
    width: 160px;
    height: 80px;
    border: 1px solid #e5e5e5; /* 얇고 연한 회색 테두리 */
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.brand-logo-box img {
    max-width: 80%;
    max-height: 70%;
    object-fit: contain; /* 로고 비율이 깨지지 않게 쏙 들어가게 조절 */
    transition: transform 0.3s ease;
}

/* 마우스 올렸을 때 효과 */
.brand-logo-box:hover {
    border-color: #9bc63b; /* 영남 포인트 컬러로 테두리 강조 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.brand-logo-box:hover img {
    transform: scale(1.05); /* 로고가 살짝 커지는 효과 */
}
/* ==========================================================================
   [브랜드 상세 - 통이미지 위 텍스트 및 버튼 오버레이]
   ========================================================================== */
.brand-detail-wrapper {
    padding: 50px 20px 80px 20px;
    background-color: #f9f9f9;
}

/* 이미지와 텍스트를 묶어주는 기준점 */
.brand-visual-container {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.brand-visual-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: block;
}

/* 🌟 이미지 위로 뜨는 텍스트 박스 */
.showcase-desc-overlay {
    position: absolute;
    top: 5%;
    right: 18%;
    width: 18%;
    text-align: left;
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 300;
    word-break: keep-all;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

/* 텍스트 박스 안의 브랜드명 제목 */
.overlay-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* 🌟 하단 바로가기 버튼 래퍼 */
.btn-overlay-wrapper {
    position: absolute;
    bottom: 8%; 
    left: 6%;  
    z-index: 10;
}

/* 바로가기 검은색 버튼 디자인 */
.btn-shortcut {
    display: inline-flex;
    align-items: center;
    background: #000;
    color: #fff;
    padding: 12px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    width: max-content;
    transition: background 0.3s;
}
.btn-shortcut::after { content: '→'; margin-left: 10px; transition: transform 0.3s; }
.btn-shortcut:hover { background: #333; }
.btn-shortcut:hover::after { transform: translateX(5px); }

/* 📱 모바일 화면 최적화 (미디어 쿼리 중복 제거 및 통합) */
@media screen and (max-width: 768px) {
    .showcase-desc-overlay {
        position: static; /* 띄우기 해제 */
        width: 100%;
        color: #555; /* 어두운 색으로 원상복구 */
        text-shadow: none;
        text-align: center;
        padding: 20px 15px 0 15px;
        font-size: 14px;
    }
    
    .overlay-title { 
        font-size: 20px; 
        margin-bottom: 10px; 
        color: #222; 
    }
    
    .btn-overlay-wrapper {
        position: static; /* 버튼 띄우기 해제 */
        text-align: center;
        margin-top: 30px;
        padding-bottom: 20px;
    }
}

/* ==========================================================================
   [상품 목록 페이지 (product_list.php) 스타일]
   ========================================================================== */
.list-wrapper {
    max-width: 1200px;
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

/* 상단 타이틀 */
.list-title {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #222;
    margin-bottom: 20px;
}
.list-title-line {
    width: 40px;
    height: 1px;
    background-color: #999;
    margin: 0 auto 40px auto;
}

/* 검색 바 (위아래 테두리) */
.list-search-bar {
    border-top: 2px solid #2a3c5a; /* 상단 진한 남색 선 */
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.list-search-bar select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    margin-right: 30px;
    font-size: 13px;
    color: #555;
    outline: none;
}
.list-search-bar .search-label {
    font-weight: bold;
    font-size: 14px;
    margin-right: 10px;
    font-family: Arial, sans-serif;
}
.list-search-bar input[type="text"] {
    border: 1px solid #ccc;
    padding: 4px 8px;
    width: 150px;
    font-size: 13px;
    outline: none;
}
.btn-search-icon {
    background: #777;
    color: #fff;
    border: none;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    margin-left: 5px;
    border-radius: 2px;
}

/* 4단 상품 그리드 */
.list-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4칸 배열 */
    gap: 20px;
    margin-bottom: 50px;
}
.list-product-item {
    border: 1px solid #eaeaea; /* 얇은 회색 테두리 */
    padding: 20px 10px;
    text-align: center;
    background: #fff;
    transition: border-color 0.3s;
}
.list-product-item:hover {
    border-color: #9bc63b; /* 마우스 올리면 영남 컬러 */
}
.list-product-img {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.list-product-img img {
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
}
.list-product-name {
    font-size: 13px;
    color: #444;
    word-break: keep-all;
    line-height: 1.4;
}

/* 하단 페이지 번호 (Pagination) */
.list-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.list-pagination a {
    display: inline-block;
    min-width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #666;
    background: #fff;
    text-decoration: none;
}
.list-pagination a.active {
    background-color: #555;
    color: #fff;
    border-color: #555;
}
.list-pagination a:hover:not(.active) {
    background-color: #f9f9f9;
}

/* ==========================================================================
   [푸터 우측 언어 전환 버튼 스타일]
   ========================================================================== */
.lang-switcher-footer {
    margin-left: auto; /* ✨ flex 구조에서 자신을 맨 오른쪽 끝으로 밀어냅니다 */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
}

/* 세로 구분선 (|) 색상 */
.lang-switcher-footer .divider {
    color: #555; 
}

/* 선택되지 않은 언어 글자 색상 */
.lang-switcher-footer a {
    color: #888;
    font-weight: 400;
    transition: color 0.2s ease;
}

/* 🌟 현재 선택되어 활성화된 언어 강조 (흰색 볼드) */
.lang-switcher-footer a.active {
    color: #fff;
    font-weight: 700;
}

/* 마우스 올렸을 때 영남 포인트 컬러 적용 */
.lang-switcher-footer a:hover {
    color: #9bc63b;
}

/* 📱 모바일 반응형 처리 (기존 @media screen and (max-width: 768px) 블록 안에 넣으셔도 됩니다) */
@media screen and (max-width: 768px) {
    .lang-switcher-footer {
        margin: 20px auto 0 auto; /* 모바일 세로 화면에서는 중앙 하단으로 정렬 배치 */
        gap: 15px;
    }
}

/* 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .list-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .list-search-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   [서브페이지 공통 & CEO 인사말]
   ========================================================================== */
.sub-page-wrapper {
    max-width: 1000px; /* 글을 읽기 편하도록 전체 너비를 살짝 좁힘 */
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

/* 상단 타이틀 공통 */
.sub-page-title {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #222;
    margin-bottom: 20px;
}
.sub-page-line {
    width: 40px;
    height: 1px;
    background-color: #999;
    margin: 0 auto 60px auto;
}

/* CEO 2단 레이아웃 */
.ceo-content {
    display: flex;
    gap: 60px; /* 사진과 텍스트 사이의 간격 */
    align-items: flex-start;
}

/* 좌측 CEO 사진 */
.ceo-image {
    flex: 1;
    max-width: 380px; /* 사진 최대 너비 */
}
.ceo-image img {
    width: 100%;
    display: block;
}

/* 우측 텍스트 영역 */
.ceo-text {
    flex: 1.5; /* 텍스트 영역이 조금 더 넓게 차지하도록 비율 조정 */
}
.ceo-text h4 {
    font-size: 20px;
    line-height: 1.3;
    font-weight: 600;
    color: #111;
    margin-bottom: 40px;
    word-break: keep-all; /* 단어 단위 줄바꿈 유지 */
}
.ceo-text p {
    font-size: 14px;
    line-height: 1.3;
    color: #444;
    margin-bottom: 25px;
    word-break: keep-all;
}
.ceo-text .sign {
    margin-top: 50px;
    font-size: 15px;
    color: #111;
}

/* 📱 모바일 화면 (화면이 작아지면 사진이 위로, 글이 아래로 내려갑니다) */
@media screen and (max-width: 768px) {
    .ceo-content {
        flex-direction: column;
        gap: 30px;
    }
    .ceo-image {
        max-width: 100%;
        text-align: center;
    }
    .ceo-image img {
        max-width: 300px;
        margin: 0 auto;
    }
    .ceo-text h4 {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   [회사소개 - 탭 메뉴 및 좌우 슬라이드]
   ========================================================================== */
.company-wrapper {
    max-width: 1200px;
    margin: 60px auto 100px auto;
    padding: 0 20px;
    overflow: hidden; /* 영역 밖으로 나가는 슬라이드를 숨김 */
}

/* 🌟 상단 탭 메뉴 */
.tab-menu {
    display: flex;
    margin-bottom: 50px;
    border-bottom: 2px solid #ccc;
}
.tab-menu li {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #888;
    padding: 15px 0;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}
.tab-menu li.active {
    color: #72a02b; /* 영남 그린 */
}
/* 활성화된 탭 아래 초록색 선 */
.tab-menu li::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    transition: background-color 0.3s;
}
.tab-menu li.active::after {
    background-color: #72a02b;
}

/* 🌟 슬라이드 컨테이너 (높이가 변할 때 부드럽게 움직이도록 transition 추가) */
.slide-container {
    width: 100%;
    overflow: hidden;
    transition: height 0.4s ease; /* 👈 높이가 바뀔 때 0.4초 동안 부드럽게 움직입니다 */
}

/* 🌟 슬라이드 트랙 (align-items 추가) */
.slide-track {
    display: flex;
    width: 300%;
    align-items: flex-start; /* 👈 중요! 이 속성이 들어가야 비전/CI가 연혁 높이로 강제 스트레칭되지 않습니다 */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide-pane {
    width: 33.3333%; /* 각각 전체 화면의 1/3씩 차지 */
    padding: 20px;
    box-sizing: border-box;
}

/* ==========================================================================
   [개별 탭 디자인: 1. 비전]
   ========================================================================== */
.vision-header { text-align: center; margin-bottom: 80px; }
.vision-header h3 { color: #8ab736; font-size: 18px; margin-bottom: 15px; font-weight: 700; }
.vision-header h2 { font-size: 22px; font-weight: 500; margin-bottom: 40px; color: #333; }

/* 🌟 대형 따옴표 텍스트 구역 */
.vision-quote { 
    position: relative; 
    display: inline-block; 
    padding: 0 60px; /* 양옆 따옴표가 들어갈 공간 확보 */
}
.vision-quote p { 
    font-size: 22px; 
    line-height: 1.6; 
    font-weight: 500; 
    color: #333; 
    margin: 0;
}
/* 따옴표 디자인 설정 (가상 요소 사용) */
.vision-quote::before,
.vision-quote::after {
    position: absolute;
    font-size: 70px;
    color: #e0e4e8; /* 연한 회색 */
    font-family: Georgia, serif; /* 따옴표 모양이 예쁘게 나오는 폰트 */
    line-height: 1;
    top: -15px; /* 높낮이 조절 */
}
.vision-quote::before {
    content: '“';
    left: 0;
}
.vision-quote::after {
    content: '”';
    right: 0;
}

/* 🌟 Value 통이미지 구역 */
.vision-value-section { text-align: center; }
.vision-value-section h3 { color: #8ab736; font-size: 18px; margin-bottom: 40px; font-weight: 700; }
.vision-value-img { display: flex; justify-content: center; }
.vision-value-img img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 📱 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .vision-quote p { font-size: 16px; }
    .vision-quote { padding: 0 30px; }
    .vision-quote::before, .vision-quote::after { font-size: 40px; top: -5px; }
}
/* ==========================================================================
   [개별 탭 디자인: 2. CI&BI (상세 레이아웃)]
   ========================================================================== */
.ci-section { margin-bottom: 10px; }
.ci-main-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #111; }

.ci-img-box { 
    text-align: center; 
    margin-bottom: 20px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* 배경색, 테두리, 모눈종이 효과, 안쪽 여백 모두 삭제함 */
}
.ci-img-box.main-logo { margin-bottom: 40px; }

/* 이미지 크기 제한을 풀고 원본 비율 그대로 예쁘게 나오도록 수정 */
.ci-img-box img { 
    max-width: 100%; 
    height: auto; 
    object-fit: contain; 
}

/* 🌟 로고 & 워터마크 2단 그리드 */
.ci-grid-new { display: flex; gap: 40px; margin-top: 30px; margin-bottom: 60px; }
.ci-col { flex: 1; display: flex; flex-direction: column; }
/* 🌟 로고 & 워터마크 제목 (투톤 밑줄 효과) */
.ci-col-header { 
    font-size: 18px; 
    font-weight: 700; 
    color: #111; 
    padding-bottom: 12px; 
    margin-bottom: 20px; 
    position: relative; /* 초록색 선의 기준점이 됩니다 */
    border-bottom: 2px solid #222; /* 바탕이 되는 전체 검은색 선 */
}

/* 제목 앞부분 초록색 포인트 선 */
.ci-col-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* 검은 선과 높이를 정확히 맞춤 */
    width: 45px; /* 초록색 선의 길이 (원하시면 숫자를 조절하세요) */
    height: 2px; /* 선의 두께 */
    background-color: #8ab736; /* 영남 올리브 그린 컬러 */
}
.ci-col-text { 
    font-size: 14px; color: #555; line-height: 1.6; word-break: keep-all; 
    flex: 1; /* 글자 수가 달라도 아래 이미지를 수평으로 딱 맞춰줌 */
    margin-bottom: 20px; 
}
/* 기존에 있던 강제 높이(height: 160px) 제거하여 원본 이미지 비율 유지 */
.ci-col .ci-img-box { margin-bottom: 0; height: auto; }

/* 하단 컬러 정보 */
.ci-color h4 { font-size: 16px; font-weight: 700; margin-bottom: 15px; color: #111; }
.ci-color p { font-size: 14px; color: #555; margin-bottom: 25px; }
.color-box { display: flex; align-items: center; gap: 20px; }
.color-chip { width: 100px; height: 100px; background-color: #8ab736; }
.color-info { font-size: 13px; color: #555; line-height: 1.8; }
.color-info strong { color: #72a02b; font-size: 14px; display: block; margin-bottom: 5px; }

/* 📱 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .ci-grid-new { flex-direction: column; gap: 40px; }
    .ci-col-text { flex: auto; }
}
/* ==========================================================================
   [개별 탭 디자인: 3. 연혁 (2단 분할 레이아웃)]
   ========================================================================== */
.history-decade { margin-bottom: 60px; }
.history-title { display: flex; align-items: center; margin-bottom: 30px; }
.history-title h2 { color: #8ab736; font-size: 40px; font-weight: 800; margin-right: 5px; letter-spacing: -1px; }
.history-title span { font-size: 22px; font-weight: 600; margin-right: 20px; color: #333; }
.history-title .line { flex: 1; height: 1px; background-color: #222; }

/* 본문 레이아웃: 텍스트 영역(좌측) + 이미지 영역(우측) */
.history-content { display: flex; justify-content: space-between; align-items: flex-start; }

/* 텍스트 영역 (다시 2단으로 나눔) */
.history-list-wrap { display: flex; flex: 1; gap: 40px; }
.history-column { flex: 1; }
.history-column li { display: flex; margin-bottom: 12px; font-size: 14px; color: #555; line-height: 1.5; letter-spacing: -0.5px; }
.history-column li .date { color: #8ab736; width: 75px; font-weight: 300; flex-shrink: 0; }

/* 우측 이미지 영역 */
.history-image { width: 320px; margin-left: 40px; flex-shrink: 0; }
.history-image img { width: 100%; border: 1px solid #eee; display: block; }

/* 📱 모바일 반응형 처리 */
@media screen and (max-width: 768px) {
    .history-content { flex-direction: column; }
    .history-list-wrap { flex-direction: column; gap: 0; }
    .history-image { width: 100%; margin-left: 0; margin-top: 30px; }
}

/* ==========================================================================
   [헤더 메뉴 - 전체 브랜드 강조 스타일]
   ========================================================================== */
.sub-box ul li.all-brand-link {
    border-top: 1px solid #eee;
    margin-top: 5px;
    padding-top: 5px;
}

.sub-box ul li.all-brand-link a {
    font-weight: 700;
    color: #8ab736; /* 영남 올리브 그린 컬러로 포인트 */
}

.sub-box ul li.all-brand-link a:hover {
    color: #222;
}

/* ==========================================================================
   [전체 브랜드 목록 페이지 (brand_list.php)]
   ========================================================================== */
.brand-list-wrapper {
    max-width: 1200px;
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

.brand-list-title {
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #222;
    margin-bottom: 20px;
}

.brand-list-line {
    width: 40px;
    height: 1px;
    background-color: #999;
    margin: 0 auto 50px auto;
}

/* 🌟 5단 그리드 컨테이너 (간격을 넓게 띄운 카드형) */
.brand-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 40px 20px; /* 위아래 간격 40px, 좌우 간격 20px */
}

/* 개별 브랜드 전체 링크 래퍼 */
.brand-item-link {
    text-decoration: none;
    display: block;
}

/* 🌟 사진이 들어가는 네모 상자 (둥근 테두리) */
.brand-img-box {
    border: 1px solid #eaeaea;
    border-radius: 8px; /* 사진처럼 모서리를 살짝 둥글게 */
    background: #fff;
    aspect-ratio: 1 / 1; /* 1:1 완벽한 정사각형 비율 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* 마우스 올렸을 때 상자에 생기는 은은한 효과 */
.brand-item-link:hover .brand-img-box {
    border-color: #ccc;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 상자 안의 이미지 (비율 유지) */
.brand-img-box img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.brand-item-link:hover .brand-img-box img {
    transform: scale(1.08); /* 마우스 올리면 로고가 살짝 커짐 */
}

/* 🌟 상자 아래 브랜드 이름 텍스트 */
.brand-name-txt {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #555;
    font-weight: 500;
    word-break: keep-all;
    transition: color 0.3s;
}

.brand-item-link:hover .brand-name-txt {
    color: #111; /* 마우스 올리면 글씨가 진해짐 */
    font-weight: 700;
}

/* 📱 모바일 반응형 처리 */
@media screen and (max-width: 992px) {
    .brand-grid-container { grid-template-columns: repeat(3, 1fr); gap: 30px 15px; }
}
@media screen and (max-width: 768px) {
    .brand-grid-container { grid-template-columns: repeat(2, 1fr); gap: 20px 10px; }
    .brand-name-txt { font-size: 13px; margin-top: 10px; }
}

/* ==========================================================================
   [조직도 페이지 (organization.php)]
   ========================================================================== */
.org-wrapper { 
    max-width: 1100px; 
    margin: 60px auto 100px auto; 
    padding: 0 20px; 
}

/* 상단 타이틀 */
.org-page-title { text-align: center; font-size: 32px; font-weight: 500; color: #222; margin-bottom: 20px; }
.org-page-line { width: 40px; height: 1px; background-color: #999; margin: 0 auto 80px auto; }

/* 🌟 CEO & 이사회 (원형 디자인) */
.org-head { position: relative; display: flex; justify-content: center; margin-bottom: 0; }
.org-bg-text { 
    position: absolute; left: 5%; top: 50%; transform: translateY(-50%); 
    font-size: 32px; color: #d9d9d9; font-weight: 700; line-height: 1.1; letter-spacing: -1px; 
}
.org-circles { display: flex; flex-direction: column; align-items: center; }
.org-circle { 
    width: 170px; height: 170px; border-radius: 50%; 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    color: #fff; font-size: 22px; 
}
/* 🌟 CEO (위쪽 겹치는 원 - 투명도 적용) */
.org-circle.green { 
    /* 기존 #8ab736 색상에 85% 투명도(0.85)를 적용하여 아래가 비치게 만듭니다 */
    background-color: rgba(138, 183, 54, 0.85); 
    z-index: 2; 
    font-weight: 500; 
}
.org-circle.green span { 
    font-size: 22px; 
    font-weight: 400; 
    margin-top: 5px; 
}

/* 🌟 이사회 (아래쪽 원 - 겹치는 면적 확대) */
.org-circle.black { 
    background-color: #1a1a1a; 
    z-index: 1; 
    margin-top: -20px; /* 사진과 비슷하도록 위로 더 끌어올려 겹치는 면적을 늘림 */
}

/* 🌟 공통 연결선 및 교차점(Dot) */
.org-v-line { width: 1px; height: 50px; background-color: #e0e0e0; margin: 0 auto; }
.org-dot { 
    position: absolute; top: -3px; left: 50%; transform: translateX(-50%); 
    width: 7px; height: 7px; background-color: #aaa; border-radius: 50%; z-index: 2; 
}

/* 🌟 조직도 트리 레벨 구조 */
.org-level { position: relative; }
/* 5개 부서를 가로로 이어주는 긴 선 */
.org-h-line { position: absolute; top: 0; left: 10%; width: 80%; height: 1px; background-color: #e0e0e0; }
.org-grid { display: flex; justify-content: space-between; }
.org-col { flex: 1; position: relative; padding: 0 10px; display: flex; flex-direction: column; align-items: center; }
.org-v-line-short { width: 1px; height: 30px; background-color: #e0e0e0; margin-bottom: 0; }

/* 🌟 개별 부서 네모 박스 */
.org-box { 
    width: 100%; max-width: 160px; background: #fff; border: 1px solid #eaeaea; 
    padding: 15px 5px; text-align: center; font-size: 14px; color: #555; 
    margin-bottom: 10px; box-sizing: border-box; 
}
.org-box.head { background: #fbfbfb; font-weight: 700; color: #333; margin-bottom: 20px; }

/* 중앙 부서(영업부)에서 하단 영업팀으로 내려가는 연결선 */
.org-v-line-center { width: 1px; height: 50px; background-color: #e0e0e0; margin: 10px auto 0 auto; }

/* 📱 모바일 화면 최적화 (세로 일렬 배열 및 복잡한 선 숨김) */
@media screen and (max-width: 768px) {
    .org-bg-text { position: static; transform: none; text-align: center; margin-bottom: 30px; font-size: 26px; }
    .org-h-line, .org-v-line, .org-v-line-short, .org-dot, .org-v-line-center { display: none; }
    .org-grid { flex-direction: column; gap: 30px; }
    .org-col { border-bottom: 1px dashed #ddd; padding-bottom: 30px; width: 100%; }
    .org-col:last-child { border-bottom: none; }
}

/* ==========================================================================
   [유통현황 (distribution.php)]
   ========================================================================== */
.dist-wrapper { max-width: 1100px; margin: 60px auto 100px auto; padding: 0 20px; }
.dist-page-title { text-align: center; font-size: 32px; font-weight: 500; color: #222; margin-bottom: 20px; }
.dist-page-line { width: 40px; height: 1px; background-color: #999; margin: 0 auto 60px auto; }

/* 🌟 카테고리별 행 레이아웃 */
.dist-row { 
    display: flex; 
    margin-bottom: 40px; 
    padding-bottom: 40px; 
    border-bottom: 1px dotted #ccc; /* 사진과 동일한 점선 구분선 */
}
.dist-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* 🌟 좌측: 카테고리 배경 및 블랙 박스 타이틀 */
.dist-category {
    width: 220px; 
    height: 220px; 
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    position: relative;
    flex-shrink: 0;
}
.dist-category-title {
    position: absolute;
    top: 18px;
    left: 14px;
    
    background: rgba(17, 17, 17, 0.9);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    
    /* 🌟 박스 크기를 일정하게 만들기 위한 핵심 속성 */
    width: 100px;         /* 모든 박스의 가로 너비를 145px로 동일하게 고정 */
    padding: 9px 0;      /* 위아래 패딩만 유지하고, 좌우 패딩은 0으로 처리 */
    text-align: center;   /* 고정된 너비 안에서 글자가 정중앙에 오도록 설정 */
    
    white-space: nowrap;
    letter-spacing: 1px;
}

/* 🌟 우측: 업체 로고 그리드 (5단) */
.dist-logos {
    flex: 1;
    margin-left: 40px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px; /* 로고 사이 간격 */
    align-content: flex-start;
}
.dist-logo-item {
    border: 1px solid #eaeaea;
    background: #fff;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.dist-logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 📱 모바일 반응형 */
@media screen and (max-width: 992px) {
    .dist-logos { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (max-width: 768px) {
    .dist-row { flex-direction: column; align-items: center; }
    .dist-category { width: 100%; height: 150px; margin-bottom: 20px; }
    .dist-logos { margin-left: 0; width: 100%; grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 480px) {
    .dist-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   [상품 상세 페이지 (product_detail.php)]
   ========================================================================== */
.prod-detail-wrap {
    max-width: 1200px;
    margin: 60px auto 100px auto;
    padding: 0 20px;
}

/* 🌟 상단: 사진(좌) + 정보(우) 2단 분할 */
.prod-top {
    display: flex;
    gap: 60px;
    margin-bottom: 80px;
}

/* 좌측 갤러리 영역 */
.prod-gallery {
    width: 45%;
}
.prod-main-img {
    border: 1px solid #eee;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
.prod-main-img img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
}
.prod-thumbs {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.prod-thumb {
    width: 80px;
    height: 80px;
    border: 1px solid #eee;
    padding: 5px;
    cursor: pointer;
    transition: border 0.3s;
}
.prod-thumb:hover, .prod-thumb.active {
    border: 1px solid #72a02b;
}
.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 우측 상품 정보 영역 */
.prod-info {
    width: 55%;
}
.prod-info h2 {
    font-size: 28px;
    font-weight: 400;
    color: #111;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.prod-info .short-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    word-break: keep-all;
}

/* 스펙 정보 테이블 */
.prod-specs {
    width: 100%;
    border-top: 2px solid #333;
    border-collapse: collapse;
}
.prod-specs th, .prod-specs td {
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    text-align: left;
}
.prod-specs th {
    width: 120px;
    font-weight: 600;
    color: #111;
}
.prod-specs td {
    color: #555;
}

/* 🌟 중단: 탭 및 목록 버튼 */
.prod-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 40px;
}
.prod-tabs h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0;
}
.btn-list {
    background: #777;
    color: #fff;
    padding: 8px 25px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-list:hover {
    background: #555;
}

/* 🌟 하단: 상세 이미지 수직 배치 구역 */
.prod-detail-content {
    width: 100%;
    max-width: 860px; /* 상세 이미지가 너무 넓어지지 않도록 제한 (필요시 수정) */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 이미지를 수직으로 쌓음 */
    align-items: center;
}
.prod-detail-content img {
    width: 100%;
    display: block; /* 이미지 하단의 미세한 여백 제거 */
    margin: 0;
}

/* 📱 모바일 반응형 */
@media screen and (max-width: 768px) {
    .prod-top { flex-direction: column; gap: 30px; }
    .prod-gallery, .prod-info { width: 100%; }
    .prod-info h2 { font-size: 24px; }
    .prod-specs th { width: 90px; }
}

/* 찾아오시는 길 페이지 스타일 */
.contact-wrap { max-width: 1100px; margin: 60px auto 100px auto; padding: 0 20px; text-align: center; }
.page-title { font-size: 32px; font-weight: 300; margin-bottom: 20px; }
.page-line { width: 40px; height: 1px; background-color: #999; margin: 0 auto 60px auto; }

.contact-card { 
    display: grid; 
    grid-template-columns: 1fr 350px; 
    gap: 40px; 
    background: #fff; 
    padding: 30px; 
    border-radius: 8px;
}

.map-box { width: 100%; height: 400px; border-radius: 4px; }

.contact-info { text-align: left; }
.info-group { margin-bottom: 30px; }
.info-group h3 { font-size: 16px; color: #8ab736; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.info-group p { font-size: 14px; color: #555; line-height: 1.8; }

/* 반응형 (모바일) */
@media screen and (max-width: 768px) {
    .contact-card { grid-template-columns: 1fr; }
}
/* 찾아오시는 길 레이아웃 */
.location-container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
}
.location-card { 
    background: #fff; 
    padding: 20px; 
    
    border-radius: 8px; 
}
.location-card h3 { font-size: 20px; margin-bottom: 15px; text-align: left; }
.map-box { width: 100%; height: 350px; margin-bottom: 20px; }

.info-table { width: 100%; border-top: 2px solid #8ab736; border-collapse: collapse; }
.info-table th { width: 30%; background: #f9f9f9; padding: 15px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }
.info-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; }

/* 모바일 반응형: 화면이 작아지면 위아래로 쌓임 */
@media screen and (max-width: 900px) {
    .location-container { grid-template-columns: 1fr; }
}

/* 🌟 브레드크럼(현재 위치) 네비게이션 스타일 */
.breadcrumb-wrap {
    width: 100%;
    background-color: #f9f9f9; /* 사진처럼 연한 회색 배경 */
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.breadcrumb-inner {
    max-width: 1100px; /* 기존 상세페이지 너비와 맞춤 */
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: #555;
    font-family: 'Pretendard', sans-serif;
}

.breadcrumb-inner a {
    color: #555;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.breadcrumb-inner a:hover {
    color: #111; /* 마우스 올리면 진해짐 */
}

.breadcrumb-inner .separator {
    margin: 0 14px;
    color: #ccc; /* 연한 슬래시 기호 */
    font-size: 13px;
}

.breadcrumb-inner .current {
    font-weight: 700;
    color: #111; /* 사진처럼 현재 페이지는 진하고 굵게 */
}

.breadcrumb-inner .home-icon {
    width: 16px;
    height: 16px;
    fill: currentColor; /* 글자색과 동일하게 맞춰짐 */
}
/* -------------------------------------------
   서브 페이지 공통 타이틀 (글씨 굵기 및 크기 통일)
------------------------------------------- */
.page-title,
.sub-page-title,
.dist-page-title,
.org-page-title {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif !important;
    font-size: 36px !important;    /* 타이틀 크기 통일 */
    font-weight: 500 !important;   /* 아주 굵은 두께로 통일 (Bold) */
    color: #222 !important;        /* 글씨 색상 */
    text-align: center; /* 가운데 정렬 */
    margin-top: 60px !important;   /* 위쪽 여백 */
    margin-bottom: 20px !important;/* 라인과의 간격 */
    letter-spacing: -1px !important; /* 자간 조절 */
}

/* -------------------------------------------
   타이틀 밑에 들어가는 포인트 컬러 라인 통일
------------------------------------------- */
.page-line,
.sub-page-line,
.dist-page-line,
.org-page-line {
    width: 40px !important;        /* 라인 길이 */
    height: 3px !important;        /* 라인 두께 */
    background-color: #9bc63b !important; /* 영남 올리브그린 포인트 색상 */
    margin: 0 auto 60px auto !important;  /* 가운데 정렬 및 본문과의 하단 간격 */
}
/* 모바일 환경(화면 너비 768px 이하)에서만 모든 텍스트 중앙 정렬 강제 적용 */
@media (max-width: 768px) {
    body, body * {
        text-align: center;
    }
}