/* =========================================================
   성북당 메인 페이지 반응형
   - 공통·데스크톱 규칙은 main.css에서 관리
========================================================= */
/* 작은 데스크톱 / 가로 태블릿 */
@media(max-width:1200px){
    .quick-menu{gap:16px;padding:48px 0 26px}
    .quick-card{height:230px;padding:24px}
    .quick_btn img{width:140px}

    .product-section{padding-top:58px}
    .product-row>.prev{left:-8px}
    .product-row>.next{right:-8px}

    .benefit-grid{grid-template-columns:repeat(3,1fr)}
    .benefit-grid>div{min-height:126px;padding:28px 18px}
    .benefit-grid>div:nth-child(3):after,.benefit-grid>div:last-child:after{display:none}
    .benefit-grid>div:nth-child(n+4){border-top:1px solid var(--line)}
    .benefit-grid strong,.cook-grid strong{font-size:19px}
    .benefit-grid span,.cook-grid span{font-size:15px}

    .cook-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 22px}
    .cook-grid>div{min-width:0;padding:28px 22px;gap:20px;white-space:normal}
    .cook-grid>div:nth-child(2):after,.cook-grid>div:last-child:after{display:none}
    .cook-grid>div:nth-child(n+3){border-top:1px solid var(--line)}

    .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
    .footer-grid .cs_box:nth-child(2){border-right:0}
    .footer-grid .cs_box:nth-child(n+3){padding-top:24px;border-top:1px solid #fff}
}

/* 세로 태블릿 */
@media(max-width:1024px){
    /* 모바일 헤더가 fixed로 전환되므로 메인 콘텐츠가 헤더 뒤로 들어가지 않게 보정 */
    #shop-main{padding-top:64px}
}

@media(max-width:900px){
    .hero{min-height:560px;background-position:62% center}
    .hero:before{background:linear-gradient(90deg,rgba(14,16,17,.9) 0%,rgba(14,16,17,.68) 45%,rgba(14,16,17,.1) 100%)}
    .hero-copy{width:min(100%,530px)}
    .hero h1{font-size:64px}
    .hero-eyebrow,.hero-description{font-size:21px}
    .quick-menu{gap:12px;padding-top:36px}
    .quick-card{height:190px;padding:20px}
    .quick_btn img{width:120px}

    .section-head .main_tit{font-size:27px}
    .section-head>a{font-size:15px}
    .product-section{padding-top:48px}
    .product-row>.slide-btn{display:none}

    .partner{padding:36px 0 42px}
    .partner-card{height:86px}

    .info-section{padding:18px 0}
    h2.main_tit,h2.main_tit2,.info-section h2{font-size:27px}
    h2.main_tit:after{height:28px}

    .benefit-grid{grid-template-columns:repeat(2,1fr)}
    .benefit-grid>div:nth-child(3):after{display:block}
    .benefit-grid>div:nth-child(even):after,.benefit-grid>div:last-child:after{display:none}
    .benefit-grid>div:nth-child(n+3){border-top:1px solid var(--line)}

    .notice-grid{gap:14px;padding:34px 0 48px}
    .notice-grid a{min-height:190px;padding:24px;background-position:center}
    .notice-grid .wide-card,.notice-grid .ntbg_02,.notice-grid .ntbg_03{min-height:190px}
    .notice-grid a>div{max-width:56%}
    .notice-grid strong{font-size:24px}
    .notice-grid span{font-size:16px;line-height:1.45}
}

/* 모바일 */
@media(max-width:720px){
    .hero{min-height:650px;background-position:68% center}
    .hero:before{background:linear-gradient(180deg,rgba(14,16,17,.84) 0%,rgba(14,16,17,.38) 48%,rgba(14,16,17,.82) 100%)}
    .hero-inner{display:block;position:relative;width:calc(100% - 32px);padding:46px 0 190px}
    .hero-copy{width:100%}
    .hero-copy{width:100%}
    .hero-eyebrow{margin-bottom:8px;font-size:18px}
    .hero h1{font-size:54px;line-height:.95}
    .hero-description{margin-top:18px;font-size:19px;line-height:1.45}
    .hero-actions{position:absolute;right:0;bottom:126px;left:0;gap:8px;margin:0}
    .hero-button{min-width:0;height:46px;flex:1;padding:0 12px;font-size:15px}
    .hero-values{position:absolute;right:0;bottom:25px;left:0;gap:0;margin:0}
    .hero-values li{align-items:center;flex-direction:row;gap:8px;padding:0 10px}
    .hero-values li:first-child{padding-left:0}
    .hero-values li:last-child{padding-right:0}
    .hero-values li+li:before{height:64px}
    .hero-values img{width:38px!important;height:38px!important;flex:none}
    .hero-values strong{font-size:13px}
    .hero-values small{font-size:10px;white-space:normal}

    .quick-menu{display:flex;width:calc(100% - 28px);gap:12px;overflow-x:auto;padding:28px 0 18px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
    .quick-menu::-webkit-scrollbar{display:none}
    .quick-card{min-width:82%;height:180px;flex:0 0 82%;scroll-snap-align:start;scroll-snap-stop:always;background-position:center}
    .quick-card .quick_btn{inset:0;padding:20px}
    .quick-card .quick_btn>img{right:18px;bottom:18px;left:auto}
    .quick_btn img{width:112px}
    .quick-menu-copy strong{font-size:28px}
    .quick-menu-copy small{margin-top:9px;font-size:14px}

    .product-section{padding-top:38px;padding-bottom:12px}
    .section-head{margin-bottom:16px}
    .section-head .main_tit{padding-left:11px;font-size:23px;letter-spacing:-1px}
    .section-head .main_tit:before{width:4px}
    .section-head>a{padding-right:18px;font-size:13px}
    .section-head>a:after{width:7px;height:7px}
    .product-info{min-height:135px;padding:11px 44px 12px 12px}
    .product-info h3{font-size:15px}
    .product-price{padding-top:13px}
    .product-price strong{font-size:18px}
    .rating{font-size:11px}
    .tag-wrap img{height:20px!important}
    .product-tag{height:20px;padding:0 6px;font-size:10px;line-height:20px}
    .heart{width:24px;height:24px}
    .heart:before{font-size:26px}
    .cart-btn{right:10px;bottom:12px;width:34px;height:34px}

    .partner{padding:30px 0 36px}
    .partner h2{font-size:20px}
    .partner-slider-wrap{gap:6px}
    .partner-card{height:76px}
    .partner-card img{max-width:88%;max-height:66px}
    .partner-slider-wrap>.slide-btn{display:none}

    .info-section{padding:14px 0}
    h2.main_tit2,.info-section h2{margin-bottom:14px;padding-left:10px;font-size:23px}
    h2.main_tit2:after{width:4px;height:23px}
    .benefit-grid,.cook-grid{grid-template-columns:1fr;padding:0}
    .benefit-grid>div,.cook-grid>div{min-height:104px;padding:20px 18px;border-top:1px solid var(--line)}
    .benefit-grid>div:first-child,.cook-grid>div:first-child{border-top:0}
    .benefit-grid>div:after,.cook-grid>div:after{display:none!important}
    .benefit-grid strong,.cook-grid strong{font-size:17px}
    .benefit-grid span,.cook-grid span{font-size:13px}
    .cook-grid>div:first-child,.cook-grid>div:last-child{padding-left:18px;padding-right:18px}
    .cook-grid .cook_img{flex:none;transform:scale(.88)}
    .caption{margin-top:10px;font-size:12px;line-height:1.5}

    .notice-grid{grid-template-columns:1fr;gap:12px;padding:28px 0 42px}
    .notice-grid .wide-card{grid-column:auto}
    .notice-grid a{min-height:220px;padding:22px;background-position:center}
    .notice-grid .wide-card,.notice-grid .ntbg_02,.notice-grid .ntbg_03{min-height:220px}
    .notice-grid .wide-card,.notice-grid .ntbg{background-position:left 29% center}
    .notice-grid a>div{max-width:72%}
    .notice-grid strong{font-size:22px}
    .notice-grid span{font-size:14px}
    .notice-grid em{font-size:13px}

    .footer-grid{grid-template-columns:1fr;gap:0;padding:28px 0}
    .footer-grid .cs_box,.footer-grid .cs_box:nth-child(2),.footer-grid .cs_box:nth-child(n+3){min-height:150px;padding:22px 0;border-top:1px solid #fff;border-right:0}
    .footer-grid .cs_box:first-child{border-top:0}
    .footer-grid strong{font-size:22px}
    .footer-grid span{font-size:14px;line-height:1.5}
    .footer-grid .cs_box img.cs_icon{width:72px!important;height:72px!important;align-self:center}
    .footer-grid .cs_btn_wrap{margin-top:20px!important}
    .footer-grid .cs_btn_wrap img{width:auto!important;max-width:190px;height:auto!important}
}

@media (max-width:559px) {
    .product-info h3 {
        display:-webkit-box;
        overflow:hidden;
        min-height:44px;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .product-basic {
        display:-webkit-box;
        overflow:hidden;
        min-height:40px;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }
}

/* 소형 모바일 */
@media(max-width:480px){
    .hero{min-height:480px;background-position:66% center}
    .hero-inner{padding-top:44px}
    .hero h1{font-size:48px}
    .hero-eyebrow{font-size:16px}
    .hero-description{font-size:17px}
    .hero-button{font-size:14px}
    .quick-card{min-width:88%;flex-basis:88%;height:165px}
    .product-section{padding-top:32px}
    .section-head .main_tit{font-size:21px}
    .product-info{min-height:128px}
    .product-price strong{font-size:17px}
    .footer-grid .cs_box{min-height:140px}
    .footer-grid .cs_bar{width:185px}
}