/*
Theme Name: cheongjo
Theme URI: https://generatepress.com
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Version: 3.6.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

GeneratePress, Copyright 2014-2025 EDGE22 Studios LTD.
GeneratePress is distributed under the terms of the GNU GPL

GeneratePress is based on Underscores http://underscores.me/, (C) 2012-2025 Automattic, Inc.

Actual CSS can be found in /assets/css/ folder.
*/
/*
 Theme Name:   청조푸드 테마 (GeneratePress Child)
 Template:     generatepress
*/


@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

body, h1, h2, h3, h4, h5, h6, a, p, span, li, button, input {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif !important;
}

/* ==================================
   헤더 최종 완성 (센터 정렬)
   ================================== */

/* 헤더 기본 설정 */
body .site-header {
    position: absolute !important; width: 100%; top: 0; left: 0; z-index: 100;
    background: none !important; box-shadow: none !important;
}
#cheongjo-header-wrapper { position: relative; }

/* 상단 유틸리티 바 */
.header-top-bar {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.top-bar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    padding: 0 40px;
}
.top-bar-container a {
    color: #fff;
    margin-left: 25px; /* 간격 조정 */
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 5px 0; /* 세로 여백 추가 */
}
.top-bar-container a i {
    margin-right: 6px; /* 아이콘과 텍스트 사이 간격 */
    font-size: 14px;
}
.top-bar-container a:hover {
    opacity: 0.8;
}

/* 로그인 버튼 특별 스타일 */
.top-bar-container a.btn-login {
    background-color: #fff;
    color: #333; /* 어두운 글자색 */
    padding: 5px 12px; /* 좌우 여백 추가 */
    border-radius: 5px;
    font-weight: 700;
}
.top-bar-container a.btn-login:hover {
    opacity: 1;
    background-color: #f0f0f0;
}

/* 국기 이미지 스타일 */
.top-bar-container a.lang-flag img {
    height: 16px;
    vertical-align: middle;
}

/* 메인 헤더 영역 */
.header-main-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 40px;
    width: 100%;
}

/* 로고 */
.site-logo {
    width: 280px;
    flex-shrink: 0;
}
.site-logo a {
    display: inline-block; /* 이미지 크기에 맞춤 */
}
/* 두 로고에 공통 스타일 적용 */
.site-logo img {
    height: 45px;
    display: block;
    transition: opacity 0.3s ease;
}
/* 기본 상태 로고 스타일 */
.logo-main {
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
}
/* 스크롤 시 로고는 기본적으로 숨김 */
.logo-scrolled {
    display: none !important;
}
/* 메인 네비게이션 */
.main-navigation {
    flex-grow: 1;
    background: transparent !important;
}
.main-navigation ul.main-menu-list {
    list-style: none; margin: 0; padding: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.main-navigation li {
    flex: 1; /* 모든 li가 동일한 공간을 나눠가짐 */
    text-align: center;
}
.main-navigation li a {
    display: inline-block;
    padding: 0 10px;
    font-size: 20px; font-weight: 600;
    color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); line-height: 90px;
}
.main-navigation li a:hover { color: #ddd; }


/* 검색창 */
.header-search {
    width: 280px; flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}
.header-search .search-form {
    display: flex; align-items: center;
    border: 1px solid #fff; border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}
.header-search .search-field {
    border: none; background-color: transparent;
    padding: 8px 15px; width: 180px; font-size: 14px;
    color: #fff; outline: none;
}
.header-search .search-field::placeholder { color: rgba(255, 255, 255, 0.8); }
.header-search .search-submit {
    background: none; border: none; cursor: pointer;
    padding: 0 15px; font-size: 16px; color: #fff;
    align-self: stretch; display: flex; align-items: center;
}

/* 메가 메뉴 */
.mega-menu-wrap {
    position: absolute; top: 120px; left: 0; width: 100%;
    background-color:rgba(52, 52, 52, 0.85); z-index: 10; padding: 15px 0;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}
.mega-menu-wrap.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }

.mega-menu-inner {
    display: flex;
    padding: 0 40px;
}
.mega-menu-placeholder-left, .mega-menu-placeholder-right {
    width: 280px; flex-shrink: 0;
}

.mega-menu-columns-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★
   메가 메뉴 컬럼 최종 정렬
   ★★★★★★★★★★★★★★★★★★★★★ */
.mega-menu-column {
    flex: 1; /* 모든 컬럼이 동일한 너비를 가짐 */
    display: flex; /* 내부 ul을 중앙정렬 하기 위함 */
    justify-content: center; /* 내부 ul을 중앙정렬 하기 위함 */
}
.mega-menu-column ul {
    list-style: none; margin: 0; padding: 0;
    text-align: left; /* ul 내부의 li 텍스트는 왼쪽 정렬 */
}
.mega-menu-column li a {
    display: block; color: #ccc; font-size: 18px; font-weight: 400; padding: 8px 0;
    text-decoration: none; border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-align:center;
}
.mega-menu-column li a:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}




/* 스크롤 시 변화하는 헤더 스타일 */
body .site-header.is-scrolled {
    position: fixed !important;
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* ★수정★: 스크롤 시 로고 교체 */
body .site-header.is-scrolled .logo-main {
    display: none; /* 기본 로고 숨김 */
}
body .site-header.is-scrolled .logo-scrolled {
    display: block !important;; /* 스크롤 로고 보임 */
}

/* 스크롤 시 나머지 스타일 */
body .site-header.is-scrolled .top-bar-container a,
body .site-header.is-scrolled .main-navigation li a {
    color: #333;
    text-shadow: none;
}
body .site-header.is-scrolled .top-bar-container a,
body .site-header.is-scrolled .main-navigation li a {
    color: #333; text-shadow: none;
}
body .site-header.is-scrolled .main-navigation li a:hover { color: #0a3d1b; }
body .site-header.is-scrolled .header-search .search-form {
    border-color: #ccc; background-color: #f5f5f5;
}
body .site-header.is-scrolled .header-search .search-field { color: #333; }
body .site-header.is-scrolled .header-search .search-field::placeholder { color: #999; }
body .site-header.is-scrolled .header-search .search-submit { color: #777; }

/* 콘텐츠 상단 여백 처리 */
.site-content { margin-top: 130px; }
body.home .site-content, body.front-page .site-content { margin-top: 0; }


/* ==================================
   소개 섹션 스타일 (맛과 영양) - 최종 수정
   ================================== */
.intro-section {
    padding: 100px 0;
    background-color: #f8f8f8;
}

/* ★수정★: 이 컨테이너가 Flexbox의 직접적인 부모가 됩니다. */
.flex-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.intro-text-wrapper {
    flex: 7;
}

.intro-image-wrapper {
    flex: 5;
}

.intro-heading {
    font-size: 46px;
    font-weight: 700;
    color: #222;
    line-height: 1.5;
    margin: 0 0 40px 0;
    letter-spacing: -0.5px;
}

.intro-paragraph {
    font-size: 20px;
    color: #616161;
    line-height: 2;
}

.intro-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* 992px 이하 태블릿 & 모바일 화면 대응 */
@media (max-width: 992px) {
    .flex-container {
        flex-direction: column; /* 세로로 쌓기 */
        text-align: center;
    }
    .intro-heading {
        font-size: 32px;
    }
    .intro-paragraph {
        font-size: 18px;
    }
    .intro-paragraph br {
        display: none;
    }
}


/* ==================================
   비즈니스 필드 섹션 스타일
   ================================== */
.business-field {
    padding: 100px 0;
    background-color: #fff; /* 흰색 배경 */
}

/* 섹션 헤더 (BUSINESS FIELD, 메인 타이틀) */
.business-field .section-header {
    text-align: center;
    margin-bottom: 80px;
}

.business-field .sub-title {
    font-size: 48px;
    font-weight: 700;
    color: #942c27; /* 진한 녹색 */
    margin: 0 0 20px 0;
}

.business-field .main-title {
    font-size: 36px;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
}

.business-field .main-title strong {
    font-weight: 700;
}

/* 아이콘 박스 그리드 */
.business-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개의 컬럼 */
    gap: 40px; /* 아이템 사이의 간격 */
}

.business-item {
    text-align: center;
}

.business-item .icon-wrap {
    margin-bottom: 25px;
}

.business-item .icon-wrap i {
    font-size: 35px;
    color: #777;
}

.business-item h3 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin: 0 0 15px 0;
}

.business-item p {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
}

/* 992px 이하 태블릿 화면 대응 */
@media (max-width: 992px) {
    .business-grid {
        grid-template-columns: repeat(2, 1fr); /* 2개의 컬럼으로 변경 */
        gap: 60px;
    }
}

/* 768px 이하 모바일 화면 대응 */
@media (max-width: 768px) {
    .business-field {
        padding: 80px 0;
    }
    .business-field .sub-title {
        font-size: 36px;
    }
    .business-field .main-title {
        font-size: 24px;
    }
    .business-grid {
        grid-template-columns: 1fr; /* 1개의 컬럼으로 변경 */
        gap: 50px;
    }
}


/* ==================================
   브랜드 섹션 스타일
   ================================== */
.brands-section {
    position: relative; /* 배경 이미지를 위한 기준점 */
    padding: 150px 0;
    color: #fff; /* 기본 텍스트 색상을 흰색으로 */
    overflow: hidden;
}

/* 패럴랙스 배경 이미지 */
.brands-bg-image {
    background-image: url('https://cheongjo.com/img/goodfood.png'); /* ★중요: 배경 이미지 URL 입력 */
    background-attachment: fixed; /* 패럴랙스 효과의 핵심 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* 반투명 오버레이 */
.brands-bg-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 어두운 반투명 오버레이 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 콘텐츠 컨테이너 */
.brands-container {
    max-width: 95%; /* 전체 너비를 넓게 설정 */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* 왼쪽 텍스트 영역 */
.brands-intro {
    flex: 1;
    max-width: 300px; /* 최대 너비 고정 */
}

.brands-intro h1 {
    font-size: 70px;
    font-weight: 800;
    margin: 0 0 20px 0;
    color: #fff;
}

.brands-intro p {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #eee;
}

.btn-outline {
    display: inline-block;
    border: 2px solid #fff;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

.btn-outline:hover {
    background-color: #fff;
    color: #333;
}

/* 오른쪽 브랜드 카드 그리드 */
.brands-grid {
    flex: 3;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개의 컬럼 */
    gap: 20px;
}

.brand-card {
    text-align: center;
    padding: 20px;
}

.brand-card .brand-logo {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.brand-card .brand-logo img {
    max-width: 250px;
    max-height: 250px;
    height: auto;
}

.brand-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #fff;
}
.brand-card h3 span {
    font-weight: 400;
    margin: 0 5px;
    color: #ccc;
}

.brand-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #ddd;
    margin-bottom: 30px;
    height: 115px; /* 단락 높이를 고정하여 버튼 위치 통일 */
}

.btn-circle-arrow {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    line-height: 48px;
    color: #fff;
    font-size: 18px;
    transition: background-color 0.3s;
}

.btn-circle-arrow:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* 반응형 처리 */
@media (max-width: 1200px) {
    .brands-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .brands-intro {
        max-width: 100%;
        margin-bottom: 60px;
    }
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
}

@media (max-width: 768px) {
    .brands-grid {
        grid-template-columns: 1fr;
    }
    .brand-card p {
        height: auto; /* 모바일에서는 높이 고정 해제 */
    }
}


/* ==================================
   제품 소개 섹션 스타일
   ================================== */
.product-section {
    padding: 120px 0;
    background-color: #fff;
}

/* 섹션 헤더 (PRODUCT, 메인 타이틀) */
.product-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.product-section .sub-title {
    font-size: 48px;
    font-weight: 700;
    color: #942c27; /* 진한 녹색 */
    margin: 0 0 15px 0;
}

.product-section .main-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
}

/* 제품 카테고리 탭 */
.product-tabs {
    margin-bottom: 50px;
}
.product-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 50px;
}
.product-tabs a {
    font-size: 20px;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.3s, border-color 0.3s;
}
.product-tabs a:hover {
    color: #333;
}
.product-tabs a.active {
    color: #333;
    font-weight: 700;
    border-bottom-color: #333;
}

/* 제품 그리드 */
.product-grid {
  display: flex;
  justify-content: center; /* 아이템들을 수평 중앙에 정렬 */
  flex-wrap: wrap;         /* 아이템이 많아지면 다음 줄로 넘김 */
  gap: 20px;               /* 아이템 사이의 간격 (원하는 값으로 조절) */
}

.product-item {
    text-align: center;
    transition: transform 0.3s ease;
}
.product-item:hover {
    transform: translateY(-10px);
}

.product-item a {
    text-decoration: none;
    color: inherit;
}

.product-item .product-image {
    margin-bottom: 20px;
    background-color: #ffffff; /* 이미지 배경색 */
    border-radius: 10px;
    overflow: hidden;
}

.product-item .product-image img {
    width: 100%;
    height: auto;
    display: block;
}

.product-item .product-info h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.product-item .product-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border: 1px solid #e00;
    color: #e00;
    font-size: 12px;
    font-weight: 700;
    border-radius: 5px;
}

/* 반응형 처리 */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .product-tabs ul {
        gap: 30px;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .product-section {
        padding: 80px 0;
    }
}

/* ==================================
   구매하기 버튼 스타일
   ================================== */
.cta-button-section {
    padding: 30px 0;
    text-align: center;
    background-color: #fff;
}

.btn-purchase {
    display: inline-block;
    background-color: #f2f2f2;
    color: #333;
    padding: 12px 40px;
    border-radius: 9999px; /* 완전한 캡슐 형태 */
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-purchase:hover {
    background-color: #e0e0e0;
}

/* 현재 코드 */
/*
.partner-slider .partner-item { ... }
...
.partner-section .owl-nav, .partner-section .owl-dots { ... }
*/

/* ★★★★★★★★★★★★★★★★★★★★★★★
   아래 코드로 교체하세요
   ★★★★★★★★★★★★★★★★★★★★★ */

/* ==================================
   파트너 섹션 스타일 (Grid 버전)
   ================================== */
.partner-section {
    padding: 100px 0;
    background-color: #fff;
}

.partner-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.partner-section .sub-title {
    font-size: 48px;
    font-weight: 700;
    color: #942c27; /* 진한 녹색 */
    letter-spacing: 1px;
}

/* 파트너 로고 그리드 */
.partner-grid {
    max-width: 1400px; /* 더 넓은 콘텐츠 영역 */
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    /* ★수정★: 한 줄에 8개의 컬럼 생성 */
    grid-template-columns: repeat(4, 1fr);
    gap: 40px; /* 로고 사이의 간격 */
    align-items: center; /* 로고들을 세로 중앙 정렬 */
}

.partner-item {
    text-align: center;
}

.partner-item img {
    max-width: 300px; /* 로고 최대 너비 */
    width: 100%;
    height: auto;
    display: inline-block;
    filter: grayscale(30%);
    opacity: 0.9;
    transition: filter 0.3s, opacity 0.3s;
}

.partner-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* 반응형 처리 */
@media (max-width: 1200px) {
    .partner-grid {
        /* 태블릿에서는 4개씩 */
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .partner-grid {
        /* 모바일에서는 2개씩 */
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* ==================================
   문의 섹션 (CTA) 스타일
   ================================== */
.contact-cta-section {
    position: relative; /* 배경 이미지를 위한 기준점 */
    padding: 120px 0;
    color: #fff; /* 기본 텍스트 색상을 흰색으로 */
    text-align: center;
    overflow: hidden;
}

/* 패럴랙스 배경 이미지 */
.contact-cta-bg-image {
    background-image: url('https://cdn.imweb.me/thumbnail/20240103/144f7051e21f0.jpg'); /* ★중요: 배경 이미지 URL 입력 */
    background-attachment: fixed; /* 패럴랙스 효과의 핵심 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* 반투명 오버레이 */
.contact-cta-bg-overlay {
    background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* 콘텐츠 영역 */
.contact-cta-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-cta-content h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -1px;
    margin: 0;
}

/* 구분자 스타일 (....) */
.contact-cta-content .separator {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 5px;
    margin: 30px 0;
    opacity: 0.8;
}

.contact-cta-content p {
    font-size: 20px;
    line-height: 2;
    margin: 0 0 40px 0;
    opacity: 0.9;
}

.btn-cta {
    display: inline-block;
    background-color: #fff;
    color: #333;
    padding: 15px 50px;
    border-radius: 9999px; /* 완전한 캡슐 형태 */
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .contact-cta-section {
        padding: 80px 0;
    }
    .contact-cta-content h2 {
        font-size: 28px;
    }
    .contact-cta-content p {
        font-size: 18px;
    }
}

/* ==================================
   페이지 상단 배경 (Page Hero) 스타일
   ================================== */
.page-hero-background {
    position: relative;
    height: 450px; /* 배경 영역의 높이 (원하는 대로 조절) */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 어두운 반투명 오버레이 */
    z-index: 1;
}

.page-hero-title {
    position: relative;
    z-index: 2;
    font-size: 50px;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

/* GeneratePress 기본 콘텐츠 영역의 상단 여백 제거 */
.separate-containers .site-main {
    margin-top: 0;
}
.page .entry-header {
    display: none; /* 기본 페이지 제목 숨기기 (배경 안에 표시했으므로) */
}

.featured-image.page-header-image {
    display: none !important;
}

/* 회사 연혁 스타일 V3 (레퍼런스 사이트 복제) */
.cheongjo-history-v3 {
    padding: 100px 20px;
    margin-left:200px;
    background: #fff;
    font-family: 'Noto Sans KR', sans-serif;
    
}
.cheongjo-history-v3 .container {
    max-width: 1200px;
    margin: 0 auto;
    
}
.cheongjo-history-v3 .section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 80px;
}
.cheongjo-history-v3 .history-wrapper {
    position: relative;
    
}
.cheongjo-history-v3 .line-container {
    position: absolute;
    left: 42.5%; /* 5/12 지점, 왼쪽 컬럼과 오른쪽 컬럼 사이 */
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}
.cheongjo-history-v3 .line-gray {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e0e0e0;
}
.cheongjo-history-v3 .line-active {
    position: absolute;
    width: 100%;
    height: 0; /* ← 반드시 0으로! */
    background-color: #27ae60;
    transform-origin: top;
    transition: height 0.4s ease-out;
}
.cheongjo-history-v3 .history-block {
    display: flex;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s, transform 0.8s;
}
.cheongjo-history-v3 .history-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.cheongjo-history-v3 .history-block:last-child {
    margin-bottom: 0;
}
.cheongjo-history-v3 .block-left {
    flex: 5; /* 12칸 중 5칸 */
    padding-right: 60px;
    text-align: right;
}
.cheongjo-history-v3 .block-right {
    flex: 7; /* 12칸 중 7칸 */
    padding-left: 60px;
    list-style: none;
    margin: 0;
    padding-top: 5px;
}
.cheongjo-history-v3 .period-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 20px 0;
}
.cheongjo-history-v3 .period-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.cheongjo-history-v3 .year-group {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}
.cheongjo-history-v3 .year-group::before {
    content: '';
    position: absolute;
    left: -60px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    transform: translateX(-50%);
}
.cheongjo-history-v3 .year {
    flex: 0 0 80px;
}
.che-history-v3 .year h4, .cheongjo-history-v3 .year h4 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    padding-top: 2px;
}
.cheongjo-history-v3 .events p {
    margin: 0 0 15px 0;
    color: #555;
    line-height: 1.7;
}
.cheongjo-history-v3 .events .month {
    font-weight: 600;
    color: #777;
    margin-right: 15px;
}
@media (max-width: 768px) {
    .cheongjo-history-v3 .line-container { display: none; }
    .cheongjo-history-v3 .history-block { flex-direction: column; }
    .cheongjo-history-v3 .block-left, .cheongjo-history-v3 .block-right {
        flex: 1;
        padding: 0;
        text-align: left;
    }
    .cheongjo-history-v3 .block-left { margin-bottom: 30px; }
    .cheongjo-history-v3 .year-group::before { display: none; }
}


/* '글' 페이지에서 특성 이미지 숨기기 */
.single-post .wp-post-image {
    display: none;
}

/* '글' 페이지에서 작성일, 작성자 정보 숨기기 */
.single-post .entry-meta {
    display: none;
}

/* --- 글 페이지 헤더 최종 스타일 --- */

/* 1. 메뉴(헤더)를 투명하게 만들고 맨 위로 올리기 */
.single-post #masthead {
    background-color: transparent !important;
    position: relative;
    z-index: 10;
}

/* 2. 배경 이미지 영역 설정 (헤더 뒤로 보내기) */
.single-post .page-hero-background {
    /* ▼ 원하는 높이로 조절하세요 */
    height: 450px; 

    /* ▼ 헤더 높이에 맞춰 음수 값 조절 (이미지를 위로 끌어올림) */
    margin-top: -120px; 

    /* 기본 배경 스타일 */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* 자식 요소(제목)를 중앙에 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 쌓임 순서 */
    position: relative;
    z-index: 1;
}

/* 3. 배경 이미지 위 어두운 오버레이 효과 */
.single-post .page-hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* ▼ 40% 투명도의 검은색 (0.4 부분을 0.1 ~ 0.9 사이로 조절) */
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 2;
}

/* 4. 이미지 위 제목 스타일 */
.single-post .page-hero-title {
    color: #FFFFFF;
    margin-top:100px;
    z-index: 3; /* 오버레이보다 위에 표시 */
    /* ▼ 원하는 글자 크기로 조절하세요 */
    font-size: 48px; 
}

#masthead.header-scrolled {
    background-color: #ffffff !important; /* 흰색 배경 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    transition: background-color 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

.featured-image .page-header-image-single .grid-container .grid-parent {
 display:none;

}


/* 각 제품 아이템 설정 */
.product-item .inside-article {
    text-align: center;
}

/* 제품 이미지 설정 */
.product-item img {
    max-width: 350px;
    height: auto; /* 이미지 비율 유지 */
    margin-bottom: 0px;
}

/* 제품 제목 설정 */
.product-item .product-title {
    font-size: 20px;
    margin: 0;
}
.product-item .product-title a {
    text-decoration: none;
    color: #333;
}

/* 화면 크기가 작아질 때 (모바일) 2열로 변경 */
@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}



/* 카테고리 상단 헤더 */
.category-header {
    position: relative; /* 자식 요소를 위한 위치 기준 */
    width: 100%;
    min-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://cheongjo.com/img/product_bg.png'); /* 알려주신 최종 주소로 반영 */
    background-size: cover;
    background-position: center;
    margin-bottom: 30px;
}

/* 배경 이미지 위에 어두운 오버레이 추가 */
.category-header::before {
    content: ''; /* 가상 요소 필수 속성 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4); /* 40% 투명도의 검은색 배경 */
    z-index: 1; /* 오버레이를 배경 이미지 바로 위에 배치 */
}

/* 테마 기본 제목 스타일 제거 및 위치 설정 */
.category-header .page-header {
    background-color: transparent;
    padding: 0;
    margin: 0;
    position: relative; /* 텍스트를 오버레이 위에 두기 위한 설정 */
    z-index: 2; /* 텍스트를 오버레이(z-index: 1) 위에 배치 */
}

/* 카테고리 제목 텍스트 스타일 */
.category-header h1.page-title {
    color: white;
    font-size: 2.2em;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    background-color: transparent;
    padding: 0;
    border: none;
}

body, .site-main {
    background-color: #ffffff;
}

.w-full2 {
    margin:0 auto;
}


/* =======================================
   [추가] 오뚜기 스타일 모바일 메뉴 (Full Screen)
   ======================================= */

/* --- 모바일 헤더 컨트롤 (언어 선택, 햄버거) --- */
.header-right-controls {
    display: none; /* PC에선 숨김 */
    align-items: center;
    gap: 15px;
}
.lang-selector {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 5px;
    cursor: pointer;
}
.lang-selector option {
    color: #000;
}
/* 스크롤 시 흰색 헤더 대응 */
.site-header.is-scrolled .lang-selector {
    color: #333;
}
.hamburger-button {
    width: 24px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.hamburger-button span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    display: block;
    transition: background-color 0.3s ease;
}
.site-header.is-scrolled .hamburger-button span {
    background-color: #333;
}


/* --- 풀스크린 메뉴 패널 --- */
.fullscreen-menu-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease;
}
.fullscreen-menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, visibility 0s 0s, transform 0.3s ease;
}
body.noscroll {
    overflow: hidden; /* 메뉴 열렸을 때 배경 스크롤 방지 */
}

/* 메뉴 패널 내부 헤더 */
.fullscreen-menu-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.fullscreen-menu-panel .panel-logo { height: 35px; }
.fullscreen-menu-panel .panel-header-right { display: flex; align-items: center; gap: 20px; }
.fullscreen-menu-panel .panel-header-right .lang-selector { color: #333; }
.fullscreen-menu-panel .panel-search-icon { font-size: 20px; color: #333; }
.fullscreen-menu-panel .close-button {
    font-size: 36px;
    font-weight: 300;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

/* 메뉴 패널 네비게이션 */
.fullscreen-menu-panel .panel-nav {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 0;
}
.fullscreen-menu-panel .panel-nav ul { list-style: none; margin: 0; padding: 0; }
.fullscreen-menu-panel .panel-nav li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    text-decoration: none;
}
.fullscreen-menu-panel .panel-nav li a i { color: #ccc; }

/* 메뉴 패널 푸터 */
.fullscreen-menu-panel .panel-footer {
    padding: 25px;
    border-top: 1px solid #eee;
    text-align: center;
}
.fullscreen-menu-panel .panel-footer a {
    color: #555;
    font-weight: bold;
    text-decoration: none;
}

/* --- 반응형 분기점 --- */
@media (max-width: 992px) {
    /* 기존 데스크톱 상단바/메뉴 숨기기 */
    .header-top-bar,
    .main-navigation,
    .header-search {
        display: none !important;
    }
    /* 모바일 헤더 컨트롤 보이기 */
    .header-right-controls {
        display: flex;
    }
    /* 로고와 컨트롤 양쪽 정렬 */
    .header-main-area {
        justify-content: space-between;
         padding: 0 5px;
    }

    .mega-menu-wrap { display: none !important; }
}

/* Fullscreen Panel - 2단계 메뉴 스타일 */
.panel-nav {
    position: relative;
    overflow-x: hidden; /* 좌우로 넘어가는 메뉴를 감춤 */
}

.panel-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 메뉴 패널 기본 위치 및 전환 효과 */
.main-panel-menu,
.sub-menu {
    width: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fff; /* 배경색 통일 */
}

/* 주 메뉴는 항상 떠 있도록 처리 */
.main-panel-menu {
    position: static;
    transform: translateX(0);
}

/* 하위 메뉴는 기본적으로 보이지 않게 처리 (오른쪽 바깥에 위치) */
.sub-menu {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    z-index: 10;
    height: 100%;
}

/* 하위 메뉴가 활성화되었을 때의 스타일 */
.panel-nav.submenu-active .main-panel-menu {
    transform: translateX(-100%); /* 주 메뉴를 왼쪽으로 밀어냄 */
}

.panel-nav.submenu-active .sub-menu.active {
    transform: translateX(0); /* 활성화된 하위 메뉴를 화면 안으로 가져옴 */
}

/* '뒤로가기' 버튼 스타일 */
.sub-menu .menu-back {
    font-weight: bold;
    color: #333;
    background-color: #f0f0f0; /* 배경색으로 구분 */
}
.sub-menu .menu-back a {
    color: #333 !important;
}

.sub-menu .menu-back i {
    margin-right: 8px;
}

/* 하위 메뉴가 없는 항목에는 화살표 아이콘 제거 */
.panel-nav ul li:not(.has-submenu) a i {
    display: none;
}