@charset "utf-8";
/* ==========================================================================
    main.css — 메인 페이지 전용 (히어로 / 공지·인기 / 갤러리 / CTA)
    브레이크포인트: 1280 / 1024 / 768 / 560 (common.css 표준)
   ========================================================================== */

/* ==========================================================================
    Swiper 공통 오버라이드 (Swiper 는 메인에서만 사용)
   ========================================================================== */
.swiper{user-select: none;}
.swiper-wrapper{transition-timing-function: ease-out;}
.swiper-slide{transform: translateZ(0); backface-visibility: hidden;}

/* ==========================================================================
    메인 섹션 공통
   ========================================================================== */
.main-container {display: flex; flex-direction: column; gap: var(--main-gap); padding: 0 0 var(--main-gap);
    & .sec {
        & .main-title {padding: 0 0 36px;
            &.type1 {}
            &.type2 {display: flex; justify-content: space-between; align-items: flex-end;}
            & .txt {
                & span {display: block; font-size: 14px; font-weight: 700; color: var(--point); letter-spacing: 0.5rem; margin: 0 0 8px;}
                & h2 {font-size: 30px;}
                & p {font-size: 17px; color: var(--ink-3); margin: 24px 0 0;}
            }
            & .more {
                & a {display: flex; justify-content: center; align-items: center; width: 80px; height: 36px; font-size: 15px; font-weight: 500; color: var(--white); background: var(--point); border-radius: 4px;}
            }
        }
    }
    @media (width <= 1280px) {
        & .sec {
            & .main-title {padding: 0 0 24px;
                & .txt {flex: 1;
                    & span {font-size: 13px;}
                    & h2 {font-size: 26px;}
                    & p {font-size: 16px;}
                }
                & .more {display: none;}
            }
        }
    }
    @media (width <= 768px) {
        & .sec {
            & .main-title {
                & .txt {
                    & span {font-size: 12px; letter-spacing: 0.3rem; margin: 0 0 4px;}
                    & h2 {font-size: 20px;}
                    & h2 br {display: none;}
                    & p {font-size: 15px; margin: 18px 0 0;}
                    & p br {display: none;}
                }
            }
        }
    }
    @media (width <= 560px) {
        & .sec {
            & .main-title {
                & .txt {
                    & h2 {font-size: 18px;}
                    & p {font-size: 14px;}
                }
            }
        }
    }
}

/* ==========================================================================
    메인 비주얼 영역
   ========================================================================== */
.visual {position: relative; width: 100%; height: var(--view-height);
    & .visual-bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; overflow: hidden; z-index: 1;
        & video {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
        &::after {content: ''; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: rgba(0, 0, 0, 0.45); z-index: 2;}
    }
    & .visual-txt {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-shadow: 0px 0px 8px rgb(0 0 0 / 20%); color: var(--white); z-index: 2;
        & span {font-size: 15px; font-weight: 600; letter-spacing: 0.4rem;}
        & h2 {font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); padding: 4px 0 36px;}
        & p {font-size: 17px;}
    }
    & .visual-scroll {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-shadow: 0px 0px 8px rgb(0 0 0 / 20%); z-index: 2;
        & p {font-size: 13px; font-weight: 500; letter-spacing: 0.3rem; color: #fff; margin-bottom: 5px;}
        & i {display: block; color: #fff; text-align: center; animation: scrollFadeDown 1s infinite;}
    }
    @media (width <= 768px) {
        & .visual-txt {text-align: center;
            & span {font-size: 12px;}
            & p {font-size: 14px;}
        }
        & .visual-scroll {bottom: 24px;
            & p {font-size: 12px;}
        }
    }
}

/* ==========================================================================
    메인 소개 영역
   ========================================================================== */
.about {
    & .about-card {
        > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;}
        > ul > li {position: relative; aspect-ratio: 34 / 23; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-1);}
        > ul > li:nth-child(3) {grid-column: 2 / span 2; grid-row: 1 / span 2; aspect-ratio: auto;}
        > ul > li img {transition: all 0.3s ease;}
        > ul > li:hover img {transform: scale(1.09);}
    }
    @media (width <= 768px) {
        & .about-card {
            > ul {gap: 8px;}
        }
    }
}

/* ==========================================================================
    메인 상품 영역
   ========================================================================== */
.product {
    & .product-box {display: flex; gap: 60px;
        & .left {width: 250px;
            & .cate {display: flex; flex-direction: column; gap: 12px;
                & button {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-soft); border-radius: 4px; color: var(--ink-5);}
                & button.on {background: var(--point); color: var(--white); border: 1px solid var(--point);}
                & button p {font-weight: 500;}
                & button i {}
            }
        }
        & .right {flex: 1;
            & .list {
                > ul {}
                > ul > li {display: flex; flex-direction: column; gap: 16px;
                    & .subject {
                        & span {font-size: 14px; color: var(--ink-4);}
                        & h2 {font-size: 24px; padding: 4px 0 12px;}
                        & p {color: var(--ink-2);}
                    }
                    & .img {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
                        & .card {position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 1 / 1;}
                        & .card img {}
                    }
                    & .more {
                        & a {display: inline-flex; justify-content: center; align-items: center; width: 80px; height: 36px; font-size: 15px; font-weight: 500; color: var(--ink-5); background: var(--bg-soft); border-radius: 4px; transition: all 0.3s ease;}
                        & a:hover {background: var(--point); color: var(--white);}
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .product-box {gap: 36px;}
    }
    @media (width <= 768px) {
        & .product-box {display: flex; flex-direction: column; gap: 24px;
            & .left {display: flex; flex-direction: column; width: 100%; flex: 1;
                & .cate {flex-direction: unset; gap: 8px;
                    & button {width: 100%; height: 36px; flex: 1;
                        & p {font-size: 14px;}
                    }
                }
            }
            & .right {
                & .list {
                    > ul > li {
                        & .subject {
                            & h2 {font-size: 20px;}
                            & h2 br {display: none;}
                            & p {font-size: 15px; margin: 0;}
                            & p br {display: none;}
                        }
                        & .img {gap: 8px;}
                        & .more {text-align: center;}
                    }
                }
            }
        }
    }
}

/* ==========================================================================
    메인 레시피 영역
   ========================================================================== */
.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 {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;}
                }
            }
        }
    }
}

/* ==========================================================================
    메인 공지사항 영역
   ========================================================================== */
.gallery {
    & .gallery-list {
        > ul {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
        > ul > li {}
        > ul > li a {display: flex; flex-direction: column; gap: 16px; background: var(--bg-soft); padding: 16px; border: 3px solid var(--bg-soft); border-radius: 8px; transition: all 0.3s ease;
            & .txt {position: relative;
                &::before {content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: var(--point); border-radius: 50%;}
                & p {font-size: 18px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin: 36px 0 4px;}
                & span {display: block; font-size: 14px; line-height: 1; color: var(--ink-4);}
            }
            & .thumbs {aspect-ratio: 55 / 31; border-radius: 8px; overflow: hidden;
                & img {}
            }
            &:hover {border: 3px solid var(--point); background: var(--white); box-shadow: var(--shadow-2);}
        }
        & .empty {font-size: 15px; border: 1px solid var(--point-border); background: var(--point-faint); border-radius: 4px; padding: 40px; text-align: center;}
    }
    @media (width <= 768px) {
        & .gallery-list {
            > ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
                > li:nth-child(3) {display: none;}
                > li a {
                    & .txt::before {content: none;}
                    & .txt p {font-size: 16px; margin: 0 0 4px;}
                    & .txt span {font-size: 12px;}
                }
            }
        }
    }
    @media (width <= 560px) {
        & .gallery-list {
            > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px;}
        }
    }
}