@charset "utf-8";
/* ==========================================================================
    contents.css — 샘플 서브페이지 콘텐츠 (인사말/연혁/비전/사업소개/오시는길)
    페이지 스코프 클래스(.pg-*)로 작성 — 새 페이지를 만들 때 이 패턴을 복제한다.
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준)
   ========================================================================== */

/* 공통 리드 문구 */
.pg-container {display: flex; flex-direction: column; gap: var(--sub-gap);}
.pg-greeting .lead, .pg-vision-intro .lead, .pg-biz-intro .lead {font-size: var(--fs-h3); font-weight: 700; color: var(--ink); line-height: 1.4; letter-spacing: -.01em;}
.pg-vision-intro, .pg-biz-intro { margin-bottom: var(--space-block); }
.pg-vision-intro p + p, .pg-biz-intro p + p { margin-top: 10px; color: var(--ink-3); }

/* ==========================================================================
    브랜드 소개
   ========================================================================== */
.pg-about {
    & .about-intro {display: flex; align-items: center; gap: 60px;
        & .img {flex: 1; aspect-ratio: 1 / 0.8; border-radius: 8px; overflow: hidden; animation: imgRadius 1s ease-in-out;}
        & .txt {display: flex; flex-direction: column; gap: 24px; flex: 1;
            & span {font-family: 'JoseonPalace'; font-size: 30px; font-weight: 500; line-height: 1; color: var(--ink-5); opacity: 0.7;}
            & h2 {font-size: 24px; margin: 12px 0 6px;}
            & p {color: var(--ink-2);}
            & p:last-child {margin: 0;}
        }
    }
    & .about-point {display: flex; flex-direction: column; gap: 24px;
        & .txt {
            & p {font-size: 24px; font-weight: 700; margin: 0 0 12px;}
            & span {color: var(--ink-3);}
        }
        & .img {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
            & .card {aspect-ratio: 447 / 154; border-radius: 8px; overflow: hidden;}
        }
    }
    & .about-title {padding: var(--sub-gap) 0; text-align: center;
        & p {font-family: 'JoseonPalace'; font-size: 24px; color: var(--ink-4);}
        & h2 {position: relative; display: inline-block; font-size: 40px; margin: 36px 0 60px;
            & .icon-quote-left-1 {position: absolute; top: -16px; left: -60px; opacity: 0.1;}
            & .icon-quote-right-1 {position: absolute; top: -16px; right: -60px; opacity: 0.1;}
        }
        & span {display: block; font-size: 20px; margin: 0 0 24px;}
        & span:last-child {margin: 0;}
    }
    & .about-info {display: flex; gap: 80px;
        & .txt {
            & p {font-size: 24px; font-weight: 700; margin: 0 0 12px;}
            & span {color: var(--ink-3);}
        }
        & .info {flex: 1; border-top: 1px solid var(--ink);
            > ul {}
            > ul > li {display: flex; gap: 24px; border-bottom: 1px solid var(--line-soft); padding: 12px 16px;
                & p {font-size: 17px; width: 150px; font-weight: 700;}
                & span {font-size: 17px; flex: 1; color: var(--ink-2);}
            }
        }
    }
    @media (width <= 1280px) {
        & .about-title {
            & h2 {
                & .icon-quote-left-1 {display: none;}
                & .icon-quote-right-1 {display: none;}
            }
        }
    }
    @media (width <= 1024px) {
        & .about-intro {gap: 36px;
            & .txt {gap: 16px;
                & h2 {font-size: 20px; margin: 0;}
                & p {font-size: 15px;}
            }
        }
        & .about-point {
            & .txt {
                & p {font-size: 20px;}
                & span {font-size: 15px;}
            }
        }
        & .about-title {
            & p {font-size: 18px;}
            & h2 {font-size: 24px; margin: 24px 0 36px;
                & .icon-quote-left-1 {display: block; left: -36px;}
                & .icon-quote-right-1 {display: block; right: -36px;}
            }
            & span {font-size: 16px;}
        }
        & .about-info {gap: 48px;
            & .txt {
                & p {font-size: 20px;}
                & span {font-size: 15px;}
            }
            & .info {
                > ul > li {padding: 10px 12px;}
                > ul > li p {width: 100px; font-size: 15px;}
                > ul > li span {font-size: 15px;}
            }
        }
    }
    @media (width <= 768px) {
        & .about-intro {flex-direction: column;
            & .img {aspect-ratio: 1 / 0.6;}
        }
        & .about-point {
            & .img {grid-template-columns: repeat(2, 1fr);
                .card:last-child {display: none;}
            }
        }
        & .about-title {text-align: left; padding: 0;
            & p {font-size: 15px;}
            & h2 {font-size: 20px; margin: 8px 0 24px;
                & .icon-quote-left-1 {display: none;}
                & .icon-quote-right-1 {display: none;}
            }
            & span {font-size: 15px;}
        }
        & .about-info {flex-direction: column; gap: 16px;
            & .info {
                > ul > li {padding: 8px 10px;}
                > ul > li p {width: 80px; font-size: 14px;}
                > ul > li span {font-size: 14px;}
            }
        }
    }
}

/* ==========================================================================
    인사말
   ========================================================================== */
.pg-greeting {
    & .greeting-box {display: flex; flex-direction: column; gap: 60px;
        & .img {aspect-ratio: 13 / 4; border-radius: 8px; overflow: hidden; animation: imgRadius 1s ease-in-out;}
        & .txt {display: flex; gap: 48px;
            & .desc {display: flex; flex-direction: column; gap: 24px; flex: 1;
                & h2 {font-size: 24px; line-height: 1.4; margin: 0 0 12px;}
                & p {font-size: 17px;}
                & span {display: block; font-size: 17px; font-weight: 500; text-align: right; color: var(--ink-3);}
                & span strong {font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: 0.2rem; padding: 0 0 0 8px;}
            }
        }
    }
    @media (width <= 1024px) {
        & .greeting-box {gap: 48px;
            & .txt {gap: 36px;
                & .desc {gap: 16px;}
                & .desc h2 {font-size: 20px; margin: 0;}
                & .desc p {font-size: 15px;}
                & .desc span {font-size: 16px;}
                & .desc span strong {font-size: 18px;}
            }
        }
    }
    @media (width <= 768px) {
        & .greeting-box {gap: 36px;
            & .txt {flex-direction: column; gap: 16px;
                & .desc {gap: 16px;}
                & .desc h2 {font-size: 20px; margin: 0;}
                & .desc p {font-size: 15px;}
                & .desc span {font-size: 16px;}
                & .desc span strong {font-size: 18px;}
            }
        }
    }
}

/* ==========================================================================
    연혁 — 세로 타임라인
   ========================================================================== */
.pg-history {
    & .history-title {text-align: center;
        & h2 {font-size: 48px; margin: 0 0 12px;}
        & h2 strong {font-weight: 700; color: var(--point);}
        & p {font-size: 17px; color: var(--ink-3);}
    }
    & .history-grid {
        & .history-box {display: flex; align-items: flex-start; gap: 100px;
            & .txt {width: 300px;
                & span {display: block; font-size: 14px; font-weight: 700; color: var(--ink-5);}
                & p {font-size: 48px; font-weight: 700; line-height: 1.2; color: var(--ink-2); margin: 8px 0 0; letter-spacing: -0.1rem;}
                & p em {padding: 0 0 0 36px;}
            }
            & .con {flex: 1;
                > ul {display: flex; flex-direction: column;}
                > ul > li {display: flex; align-items: flex-start;
                    & .year {position: relative; width: 135px; padding-right: 60px;
                        &::before {content: ''; position: absolute; top: 50%; right: -6px; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--point-faint); border: 4px solid var(--point-border);}
                        & p {font-size: 28px; line-height: 1; font-weight: 700; color: var(--point);}
                    }
                    & .desc {position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 0 0 60px 60px;
                        &.br1::before {content: ''; position: absolute; bottom: 0; left: 0; width: 1px; height: calc(100% - 8px); background: var(--line); z-index: -1;}
                        &.br2::before {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 8px; background: var(--line); z-index: -1;}
                        &::before {content: ''; position: absolute; bottom: 0; left: 0; width: 1px; height: 100%; background: var(--line); z-index: -1;}
                        > dl {display: flex;
                            & dt {width: 50px; font-weight: 700; line-height: 28px; color: var(--ink-3);}
                            & dd {line-height: 28px; color: var(--ink-3);}
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .history-title {
            & h2 {font-size: 30px;}
            & p {font-size: 16px;}
        }
        & .history-grid {
            & .history-box {flex-direction: column; gap: 24px;
                & .txt {width: 100%;
                    & p {font-size: 36px;}
                    & p br {display: none;}
                    & p em {padding: 0;}
                }
                & .con {flex: 1; width: 100%;
                    > ul > li .desc {padding: 0 0 48px 60px;}
                    > ul > li:last-child .desc::before {top: 0; height: 8px;}
                    > ul > li:first-child .desc::before {height: calc(100% - 8px);}
                }
            }
        }
    }
    @media (width <= 768px) {
        & .history-title {
            & h2 {font-size: 24px;}
            & p {font-size: 14px;}
        }
        & .history-grid {
            & .history-box {margin: 0 0 48px;
                & .txt {
                    & span {font-size: 13px;}
                    & p {font-size: 30px; margin: 0;}
                }
                & .con {flex: 1; width: 100%;
                    > ul > li .year {width: 80px; padding: 0;}
                    > ul > li .year p {font-size: 20px;}
                    > ul > li .desc {padding: 0 0 36px 36px;}
                    > ul > li .desc > dl dt {font-size: 15px; line-height: 20px;}
                    > ul > li .desc > dl dd {font-size: 15px; line-height: 20px;}
                    > ul > li:last-child .desc {padding: 0 0 0 36px;}
                }
                &:last-child {margin: 0;}
            }
        }
    }
    @media (width <= 560px) {
        & .history-title {
            & h2 {font-size: 20px; margin: 0 0 6px;}
        }
        & .history-grid {
            & .history-box {
                & .txt {display: none;}
                & .con {
                    > ul {gap: 36px;}
                    > ul > li {flex-direction: column; gap: 12px;}
                    > ul > li .year {width: 100%;}
                    > ul > li .year p {font-size: 24px;}
                    > ul > li .year::before {content: none;}
                    > ul > li .desc {width: 100%; padding: 0; gap: 12px;}
                    > ul > li .desc > dl dt {width: 30px;}
                    > ul > li .desc::before {content: none !important;}
                    > ul > li:last-child .desc {padding: 0;}
                }
            }
        }
    }
}

/* ==========================================================================
    제품 소개
   ========================================================================== */
.pg-product {
    & .product-tit {margin: 0 0 12px;
        & p {font-size: 20px; font-weight: 700;}
    }
    & .product-thumbs {display: flex; gap: 12px; aspect-ratio: 1193 / 602;
        & .product-swiper01 {flex: 3;
            & .swiper-slide {position: relative; border-radius: 8px; overflow: hidden;}
        }
        & .product-swiper02 {flex: 1;
            & .swiper-slide {position: relative; opacity: 0.4; border-radius: 8px; overflow: hidden; cursor: pointer;}
            & .swiper-slide-thumb-active {opacity: 1; border: 4px solid var(--point);}
        }
    }
    & .product-info {padding: 36px 0 60px;
        & .tit {margin: 0 0 36px;
            & p {font-size: 14px; color: var(--ink-4); font-weight: 500;}
            & h2 {font-size: 24px; margin: 4px 0 12px;}
            & span {font-size: 17px; color: var(--ink-2);}
        }
        & .label {
            & .label-tit {display: flex; align-items: flex-end; margin: 0 0 12px;
                & p {font-size: 14px; line-height: 1;}
                & p strong {font-size: 20px; padding: 0 8px 0 0;}
                & span {flex: 1; text-align: right; font-size: 14px; line-height: 1; color: var(--ink-3);}
            }
            & .label-tb {
                & table {width: 100%; table-layout: fixed; text-align: center; border-top: 2px solid var(--ink);
                    & th {font-size: 15px; background: #f5f5f5; border: 1px solid var(--line); border-right: none; padding: 8px;}
                    & th:first-child {border-left: none;}
                    & td {font-size: 15px; border: 1px solid var(--line); padding: 8px;}
                    & td:last-child {border-right: none;}
                }
            }
        }
    }
    & .product-cate {
        & .list {
            > ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
            > ul > li {position: relative;
                & .thumbs {position: relative; aspect-ratio: 327 / 204; border-radius: 4px; overflow: hidden;}
                & .subject {padding: 12px 0;
                    & span {font-size: 14px; color: var(--ink-4);}
                    & p {font-size: 18px; line-height: 1;}
                    & p strong {color: var(--point);}
                }
                & .txt {
                    & p {font-size: 15px; margin: 0 0 12px;}
                    & span {display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2);}
                    & span em {font-size: 12px; font-weight: 700; color: var(--point); padding: 4px 12px; border-radius: 999px; background: var(--point-faint);}
                }
            }
        }
    }
    & .product-detail {position: relative; display: flex; align-items: flex-start; gap: 24px; padding: 60px 0;
        & .img {width: 860px; border-radius: 8px; overflow: hidden;
            & img {width: 100%;}
        }
        & .float {position: sticky; top: calc(var(--header-height) + 12px); flex: 1; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); padding: 24px; border-radius: 8px;
            & .float-txt {
                & p {font-size: 24px; font-weight: 600; line-height: 1; margin: 0 0 16px;}
                & span {display: block; font-size: 13px; color: var(--ink-3); margin: 0 0 4px;}
                & span:last-child {margin: 0;}
            }
            & .float-link {
                & a {display: block; text-align: center; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--ink-5); background: var(--bg-soft);}
                & a:hover {background: var(--point-faint); color: var(--point);}
            }
        }
    }
    & .product-recipe {
        & .recipe-list {
            > ul {display: flex; flex-direction: column; gap: 24px;}
            > ul > li {border: 1px solid var(--line); border-radius: 8px;
                & .subject {display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 16px;
                    & em {display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; font-size: 15px; font-weight: 600; color: var(--white); border-radius: 4px; background: var(--point);}
                    & p {display: flex; align-items: flex-end; font-size: 14px; line-height: 1; color: var(--ink-4); flex: 1; gap: 8px;}
                    & p strong {font-size: 18px; font-weight: 600; color: var(--ink);}
                    & i {}
                }
                & .con {display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; opacity: 0; transition: opacity 0.3s ease;
                    &.on {opacity: 1;}
                    & .desc {
                        & p {font-size: 15px; color: var(--ink-4);}
                    }
                    & .cate {
                        & p {font-size: 15px; font-weight: 600; color: var(--point);}
                        & span {font-size: 15px; color: var(--ink-2);}
                    }
                    & .cook {border: 1px solid var(--point-border); background: var(--point-faint); border-radius: 8px; padding: 12px 16px;
                        & p {font-size: 15px; font-weight: 600; color: var(--point); padding: 0 0 4px;}
                        & span {position: relative; display: block; font-size: 15px; padding: 0 0 0 12px;}
                        & span::before {content: ''; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--point);}
                    }
                }
            }
        }
        @media (width <= 768px) {
            & .recipe-list {
                > ul > li {
                    & .subject {padding: 12px; gap: 12px;
                        & em {width: 30px; height: 30px; font-size: 13px;}
                        & p {font-size: 13px;}
                        & p strong {font-size: 16px;}
                        & i {font-size: 14px;}
                    }
                    & .con {padding: 0 12px 12px; gap: 12px;
                        & .desc p {font-size: 14px;}
                        & .cate p {font-size: 14px;}
                        & .cate span {font-size: 14px;}
                        & .cook {padding: 8px 12px;}
                        & .cook p {font-size: 14px;}
                        & .cook span {font-size: 14px;}
                    }
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .product-detail {
            & .img {width: 700px;}
        }
    }
    @media (width <= 1024px) {
        & .product-tit {
            & p {font-size: 18px;}
        }
        & .product-info {padding: 24px 0 48px;
            & .tit {margin: 0 0 24px;
                & h2 {font-size: 20px;}
                & span {font-size: 16px;}
                & span br {display: none;}
            }
            & .label {
                & .label-tit p {font-size: 13px;}
                & .label-tit p strong {font-size: 18px;}
                & .label-tit span {font-size: 13px;}
                & .label-tb table th {font-size: 13px;}
                & .label-tb table td {font-size: 13px;}
            }
        }
        & .product-cate {
            & .list > ul {gap: 16px;}
        }
        & .product-detail {flex-direction: column; padding: 48px 0;
            & .img {width: 100%;}
            & .float {position: relative; top: auto; width: 100%;}
        }
    }
    @media (width <= 768px) {
        & .product-thumbs {flex-direction: column; aspect-ratio: auto;
            & .product-swiper01 {width: 100%; flex: 1; aspect-ratio: 1193 / 602;}
            & .product-swiper02 {width: 100%; flex: auto; height: 90px;}
        }
        & .product-info {
            & .label {
                & .label-tit {flex-direction: column; align-items: flex-start; gap: 8px;}
                & .label-tb {
                    & table thead {display: none;}
                    & table tbody {display: block;
                        & tr {display: block;}
                        & th {display: block; border: 0; border-bottom: 1px solid var(--line);}
                        & td {display: flex; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); text-align: right;}
                        & td:nth-of-type(1)::before {content: '나트륨'; font-weight: 600;}
                        & td:nth-of-type(2)::before {content: '탄수화물'; font-weight: 600;}
                        & td:nth-of-type(3)::before {content: '당류'; font-weight: 600;}
                        & td:nth-of-type(4)::before {content: '지방'; font-weight: 600;}
                        & td:nth-of-type(5)::before {content: '트랜스지방'; font-weight: 600;}
                        & td:nth-of-type(6)::before {content: '포화지방'; font-weight: 600;}
                        & td:nth-of-type(7)::before {content: '콜레스테롤'; font-weight: 600;}
                        & td:nth-of-type(8)::before {content: '단백질'; font-weight: 600;}
                    }
                }
            }
        }
        & .product-cate {
            & .list > ul {grid-template-columns: repeat(1, 1fr);}
            & .list > ul > li .subject span {font-size: 12px;}
            & .list > ul > li .subject p {font-size: 17px;}
            & .list > ul > li .txt p {font-size: 14px; margin: 0 0 8px;}
            & .list > ul > li .txt span {font-size: 13px;}
        }
        & .product-detail {
            & .float {padding: 16px;
                & .float-txt {
                    & p {font-size: 18px;}
                }
            }
        }
        & .product-recipe {
            & .recipe-list {
                > ul {gap: 12px;}
                > ul > li {
                    & .subject {padding: 12px; gap: 12px;
                        & em {width: 30px; height: 30px; font-size: 13px;}
                        & p {font-size: 13px;}
                        & p strong {font-size: 16px;}
                        & i {font-size: 14px;}
                    }
                    & .con {padding: 0 12px 12px; gap: 12px;
                        & .desc p {font-size: 14px;}
                        & .cate p {font-size: 14px;}
                        & .cate span {font-size: 14px;}
                        & .cook {padding: 8px 12px;}
                        & .cook p {font-size: 14px;}
                        & .cook span {font-size: 14px;}
                    }
                }
            }
        }
    }
}

/* ==========================================================================
    오시는길 — 지도 + 연락처 카드
   ========================================================================== */
.pg-location {
    & .location-title {text-align: center; margin: 0 0 36px;
        & p {font-size: 2rem; font-weight: 700;}
        & span {display: block; color: var(--ink-3); margin: 12px 0 0;}
    }
    & .location-map {margin: 0 0 48px;
        & iframe {width: 100%;}
    }
    & .location-info {display: flex; gap: 60px;
        & .txt {
            & span {font-size: 15px; color: var(--ink-4);}
            & h2 {font-size: 36px;}
        }
        & .info {flex: 1; border-top: 1px solid var(--ink);
            > ul {}
            > ul > li {display: flex; gap: 24px; border-bottom: 1px solid var(--line-soft); padding: 12px 16px;
                & p {font-size: 17px; width: 150px; font-weight: 700;}
                & span {font-size: 17px; flex: 1; color: var(--ink-2);}
            }
        }
    }
    @media (width <= 1280px) {
        & .location-title {
            & p {font-size: 1.8rem;}
            & span {font-size: 15px;}
        }
    }
    @media (width <= 1024px) {
        & .location-info {gap: 48px;
            & .info {
                > ul > li {padding: 10px 12px;}
                > ul > li p {width: 100px; font-size: 15px;}
                > ul > li span {font-size: 15px;}
            }
        }
    }
    @media (width <= 768px) {
        & .location-title {margin: 0 0 24px;
            & p {font-size: 1.6rem;}
            & span {font-size: 14px; margin: 6px 0 0;}
        }
        & .location-info {
            & .info {
                > ul > li {padding: 8px 10px;}
                > ul > li p {width: 80px; font-size: 14px;}
                > ul > li span {font-size: 14px;}
            }
        }
    }
    @media (width <= 560px) {
        & .location-map {margin: 0 0 24px;
            & iframe {height: 350px;}
        }
        & .location-info {flex-direction: column; gap: 24px;
            & .txt {
                & span {font-size: 13px;}
                & h2 {font-size: 24px;}
            }
        }
    }
}

/* ==========================================================================
    준비중 안내 (layout/_prepare.php)
   ========================================================================== */
.pg-prepare {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(56px, 8vw, 100px) 20px;
    color: var(--ink-4);
}
.pg-prepare svg { color: var(--point-border); }
.pg-prepare strong {
    margin: 20px 0 10px;
    font-size: 1.25rem; font-weight: 700;
    color: var(--ink);
}
.pg-prepare p { color: var(--ink-3); }
.pg-prepare .btn { margin: 26px 0 0; }