html{
        font-size: var(--basic-font-pc);
    }
       body {
        padding-top: 5rem;}
       /* 공통 스타일 */
        .container {
            width: 100%;
            max-width: 1360px; /* 전체 너비 제한 */
            margin: 0 auto;
            
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        /* 섹션 제목 스타일 */
        .section-title {
            color:var(--pm-color-500); /* 파란색 제목 */
            text-align: center;
            font-size: var(--fs-h1);
            font-weight: var(--fw-bold);
            margin-bottom: 1rem;
        }

        .section-subtitle {
            text-align: center;
            font-size: var(--fs--bd1);
            font-weight: var(--fw-reg);
            color: #000;
            margin-bottom: 6rem;
        }

        /* 헤더 (메뉴) */
        .menu2dep{
            text-align: center;
        }

        .menu2dep h1 {
            color: var(--pm-color-500);
            font-size: var(--fs-h1);
            font-weight: var(--fw-bold);
            margin-bottom: 4rem;
            margin-top: 5rem;
            
        }

        .menu-tabs {
            display: flex;
            justify-content: center;
            gap: 2rem;
            padding-bottom: 4rem;
        }

        .menu-tabs a {
            font-size: var(--fs--bd1);
            font-weight: var( --fw-med);
            color:var(--pm-color-900);
            
        }

        /* 선택된 탭 스타일 */
        .menu-tabs a.active {
            color: #e6a23c; /* 주황색 */
            font-weight: 500;
        }

        /* 메인 콘텐츠 */
        main {
            padding: 0;
        }

        /* 그리드 시스템 */
        .product-grid {
            display: grid;
            gap: 2rem;
        }

        
        .beer-grid {
            grid-template-columns: repeat(3, 1fr);
        }

        /* MD 상품 그리드 (3x1) */
        .md-grid {
            grid-template-columns: repeat(3, 1fr);
            margin-bottom: 5rem;
        }

        /* 상품 카드 스타일 */
        .product-card {
            background-color: #fff;
            text-align: left;
        }

        .product-card .image-wrapper {
            position: relative;
            margin-bottom: 15px;
            overflow: hidden;
            background-color: #f9f9f9; 
        }

        .product-card img {
            width: 100%;
            height: 100%;
            display: block;
        }

               
        .image-hover-wrapper {
            position: relative; 
            width: 100%;        
            aspect-ratio: 3 / 4;
            overflow: hidden;   
            cursor: pointer;    
        }

        
        .image-hover-wrapper img {
            position: absolute; 
            top: 0;
            left: 0;
            object-fit: cover;  
            transition: opacity 0.4s ease-in-out; 
        }

        /* 기본 이미지(위층) 설정 */
        .default-img {
            z-index: 2; 
        }

       
        .image-hover-wrapper:hover .default-img {
            opacity: 0; 
        }
        /* Best 배지 */
        .badge-best {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 10; 
            background-color: var(--pm-color-500);
            color: #fff;
            font-size: var(--fs-h4);
            font-weight: var(--fw-bold);
            padding: 5px 10px;
            border-radius: 50px;
        }

        /* 상품 상세 정보 */
        .product-details {
            padding: 0 5px;
        }

        .product-details h3 {
            font-size: var(--fs--bd1);
            font-weight: var(--fw-bold);
            color: var(--pm-color-500); 
            margin-bottom: 1.5rem;
        }

        .product-details .price {
            font-size: var(--fs--bd2);
            color: #000;
            margin-bottom: .8rem;
            border-bottom: 1px solid var(--pm-color-300);
        }

         .product-details .description2 {
            width: 400px;
            height: 44px;
            font-size: var( --fs-det);
            margin-bottom: 1.5rem;
            font-weight: var(--fw-reg);
            border-top: 1px solid var(--pm-color-300);
            padding-top: 1rem;
            

        }

        .taste-info {
            font-size: var(--fs-det);
            font-weight: var(--fw-reg);
        }

        .taste-info strong {
            font-weight: var(--fw-bold);
            margin-right: 5px;
        }

        /* 페이지네이션 */
        .pagination {
            display: flex;
            justify-content: center;
            gap: .5rem;
            margin-top: 5rem;
            margin-bottom: 10rem;
        }

        .pagination a {
            font-size: 13px;
            color: #666;
        }

        /* 활성화된 페이지 */
        .pagination a.active {
            font-weight: bold;
            color: #333;
        }
       
        /* 반응형 설정 (모바일) */
         
        @media (max-width: 1440px){
            html{
                font-size: var(--basic-font-tab);}
            .beer-grid {
                grid-template-columns: repeat(3, 0.1fr);}
            .product-card .image-wrapper {
                 width: 300px;
                 height: 375px;}
       
            .product-details .description2 {
                width: 300px;}
            /* .container {
                max-width: 1000px;} */
                .product-grid {
                justify-content: center;}

            .badge-best {
                top: 0.8rem;
                right: 0.8rem;
                font-size: var(--fs--h1);
                font-weight: var(--fw-bold);
                padding: 5px 10px;}
            .md-grid {
                grid-template-columns: repeat(3, 0.1fr);
                margin-bottom: 5rem;}
    
    
        }

         @media (max-width: 1060px) {
            .beer-grid, .md-grid {
                grid-template-columns: repeat(2, 0.1fr); /* 2열로 변경 */
                margin: 0 auto;
            }
            .product-grid {
                justify-content: center;
            margin-bottom: 5rem;}

    }

        @media (max-width: 790px){
            html{
                font-size: var(--basic-font-mo);}
           .product-card .image-wrapper {
                width: 200px;
                height: 250px;}
            .product-details .description2 {
                width: 200px;}
            
            .badge-best {
                top: 0.5rem;
                right: 0.5rem;
                font-size: var(--fs--bd1);
                font-weight: var(--fw-bold);
                padding: 5px 10px;}
            .menu-tabs {
                flex-direction: column;}
    }

     @media (max-width: 480px) {
            .beer-grid, .md-grid {
                grid-template-columns: 0.1fr; /* 1열로 변경 */
            }
            .container {
            width: 100%;
            max-width: 170px;}
        
        
        }