@charset "utf-8";
/*───────────────────────────────────────────────────────────

     리스트 타입 및 옵션

───────────────────────────────────────────────────────────*/

/*** 쇼핑몰 메인본문 튜닝 | main/index.php ***/

#header_wrap header {box-shadow: none;}
#contents_wrap  {border-top:0;}
.main_slide {padding-top: 8px;}
.mainTopSwiper { width: 100%; position: relative;}
/* 센터 모드 — 좌우로 이웃 배너가 살짝 보인다(시안 2026-08-26).
   시안 375 화면에서 한 장 335px = 컨테이너 − 40px, 슬라이드 간격 12px
   → 좌우 여백 20px 에서 간격 12px 을 빼고 8px 씩 노출 */
.mainTopSwiper .swiper-slide {width:calc(100% - 40px); padding:0;}
.mainTopSwiper .swiper-slide img { width:100%; height:auto; aspect-ratio:2 / 1; object-fit:cover; display: block; border-radius: 8px; }
/* 분수 페이징은 모바일만 노출 — 운영몰과 동일(PC 는 좌우 화살표를 쓰므로 아래 @media 에서 숨긴다) */
.mainTopSwiper .swiper-slide .mainBnrCont  { position: relative; }
.mainTopSwiper .swiper-slide .mainBnrCont .bnrTit  { position: absolute; padding:24px; color:#fff;  }
.mainTopSwiper .swiper-slide .mainBnrCont .bnrTit strong  { display:block; font-size: 24px;  }
.mainTopSwiper .swiper-slide .mainBnrCont .bnrTit span  {  font-size: 16px;  }
.mainTopSwiper .swiper-pagination  { width:fit-content; color:#fff; left:auto; right: 32px; bottom:12px; background:rgba(0, 0, 0, .2); border-radius:11px; font-size:0;  }
.mainTopSwiper .swiper-pagination span  { position: relative; padding:0 4px 0 6px; opacity: 0.5; line-height:22px; font-size:14px; font-weight: 500; }
.mainTopSwiper .swiper-pagination span.swiper-pagination-current  { opacity: 1; }
.mainTopSwiper .swiper-pagination span + span::before  { content:""; position: absolute;
left:0; top:2px;  width:1px; height:10px; background:rgba(255, 255, 255, .5)  }

.mainLnkWrap {width:100%; overflow: hidden;}
.mainLnkWrap .mainLnkList {display:flex; gap:12px; padding: 12px 20px 24px; overflow: scroll;  }
.mainLnkWrap .mainLnkList::-webkit-scrollbar {display: none; }
.mainLnkWrap .mainLnkList div {width:56px; }
.mainLnkWrap .mainLnkList div a { display:block; }
.mainLnkWrap .mainLnkList div a span { display:block; padding-top:60px; text-align: center; font-size: 12px; text-align: center; color:#333; font-weight: 400; }
.mainLnkWrap .mainLnkList div a.lnk_1 { background:url(/data/skin/mobile/moment/images/main/main_menus_1.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_2 { background:url(/data/skin/mobile/moment/images/main/main_menus_2.gif?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_3 { background:url(/data/skin/mobile/moment/images/main/main_menus_3.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_4 { background:url(/data/skin/mobile/moment/images/main/main_menus_4.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_5 { background:url(/data/skin/mobile/moment/images/main/main_menus_5.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_6 { background:url(/data/skin/mobile/moment/images/main/main_menus_6.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_7 { background:url(/data/skin/mobile/moment/images/main/main_menus_7.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_8 { background:url(/data/skin/mobile/moment/images/main/main_menus_8.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_9 { background:url(/data/skin/mobile/moment/images/main/main_menus_9.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_10 { background:url(/data/skin/mobile/moment/images/main/main_menus_10.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_11 { background:url(/data/skin/mobile/moment/images/main/main_menus_11.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_12 { background:url(/data/skin/mobile/moment/images/main/main_menus_12.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_13 { background:url(/data/skin/mobile/moment/images/main/main_menus_13.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_14 { background:url(/data/skin/mobile/moment/images/main/main_menus_14.png?v=250516) no-repeat 0 0 / 56px  }
.mainLnkWrap .mainLnkList div a.lnk_15 { background:url(/data/skin/mobile/moment/images/main/main_menus_15.png?v=250526) no-repeat 0 0 / 56px  }

.mainTitBox     {display:flex; padding:20px 20px 10px; justify-content: space-between; }
.mainTitBox.line { padding-top:26px; border-top:8px solid rgba(136, 136, 136, .1);}
.mainTitBox h3 { font-size:20px; font-weight: 600;  }
.mainTitBox a.more { margin:auto 0; font-size: 14px; color:#888; padding-right:20px; background:url(/data/skin/mobile/moment/images/icon/btn_r_bul.png) no-repeat 100% 0 /16px }
.mainTitBox a.setting { margin:auto 0; width: 22px; height:22px; overflow: hidden; text-indent: -100px; font-size: 14px; color:#888; padding-right:20px; background:url(/data/skin/mobile/moment/images/icon/setting.png) no-repeat 100% 0 /22px }

.main img { vertical-align: top;}
.main_prd_7day {padding-bottom:24px; }

.goods_list     { display:flex; overflow: hidden; padding:0 20px; }
.goods_list::-webkit-scrollbar {display: none; }
.goods_list .goods_prd_com     { width:100%; }
.goods_list .goods_prd_com * { font-style: normal; font-size:14px; line-height:16px; vertical-align: top; font-weight: 400; letter-spacing: -.78px;  }
.goods_list .goods_prd_com img { max-width:100%; border-radius: 8px; width: 100%; }
.goods_list .goods_prd_com .hide {display:none;  }
.goods_list .goods_prd_com .goods_item .prd_img .img_box  {position: relative;}
.goods_list .goods_prd_com .goods_item .prd_img .img_box_big  {position: relative;}

.goods_list .goods_prd_com .goods_item .prd_img .img_box span.badge {position: absolute; left:8px; top:8px; }

/* 품절 오버레이 — 썸네일 전체를 덮는 반투명 층 + '품절' 텍스트로 통일.
   관리자에 등록된 SOLD OUT 이미지는 원형 배지라 덮어씌워도 글자와 겹쳐 보이므로 쓰지 않는다.
   (마크업에서 style="background-image:..."로 직접 박히기 때문에 !important 필요) */
.goods_list .goods_prd_com .goods_item .prd_img .img_box .soldout_img {position:absolute; left:0; top:0; z-index:2; display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:8px; background-image:none !important; background-color:rgba(34, 34, 34, .45); color:#fff; font-size:14px; line-height:1.4; font-weight:700; text-align:center;}
/* 오버레이가 이미 품절을 알리므로 버튼 영역의 별도 품절 아이콘은 감춘다(중복 표기 방지) */
.goods_list .goods_prd_com .goods_item .prd_unit .goods_prd_soldout {display:none;}
.goods_list .goods_prd_com .badge {}
.goods_list .goods_prd_com .badge em {display: inline-block; height:20px; font-size:12px; line-height:20px; padding:0 6px;  font-weight: 400; line-height:20px; border-radius: 2px; }
.goods_list .goods_prd_com .badge em.green { background:#33C28F; color:#fff;   }
.goods_list .goods_prd_com .badge em.gray { background:rgba(204, 204, 204, .3); color:#555;  }

.goods_list .goods_prd_com .prd_unit   {position: relative; padding:8px 0;}
.goods_list .goods_prd_com .prd_unit .badge         {position: absolute;}
.goods_list .goods_prd_com .prd_unit .btns  {display:flex; justify-content: end; gap:8px; margin-left:auto} /* 퍼블 0617 */
.goods_list .goods_prd_com .prd_unit .btns a         {display:inline-block; width:20px; min-width:20px; height:20px;  }
.goods_list .goods_prd_com .prd_unit .btns a.speedOrder { background: url(/data/skin/mobile/moment/images/icon/speed-order.png) no-repeat 50% 50% / 20px;  }
.goods_list .goods_prd_com .prd_unit .btns a.addCart { background: url(/data/skin/mobile/moment/images/icon/cart.png) no-repeat 50% 50%  / 20px;  }
.goods_list .goods_prd_com .prd_unit .btns button         {display:inline-block; width:20px; min-width:20px; height:20px;  }
.goods_list .goods_prd_com .prd_unit .btns button.speedOrder { background: url(/data/skin/mobile/moment/images/icon/speed-order.png) no-repeat 50% 50% / 20px;  }
.goods_list .goods_prd_com .prd_unit .btns button.addCart { background: url(/data/skin/mobile/moment/images/icon/cart.png) no-repeat 50% 50%  / 20px;  }
.goods_list .goods_prd_com ul.goods_info_list li.prd_name {font-size: 14px; color:#222; line-height:20px; }
.goods_list .goods_prd_com ul.goods_info_list li.fixed_price span {font-size:12px; text-decoration: line-through; color:#CCC; font-weight: 400; }
.goods_list .goods_prd_com ul.goods_info_list li.price span     {font-size: 16px; line-height:20px; color:#222; font-weight: 700;}
.goods_list .goods_prd_com ul.goods_info_list li.price span.dc_per     {color:#00B373;  }
.goods_list .goods_prd_com ul.goods_info_list li.member_price span {font-size: 12px; color:#888; }


.goods_list.type_1 { gap:12px; overflow: scroll; }
.goods_list.type_1 .goods_prd_com { min-width: 136px; width:136px;  }
.goods_list.type_1 > li .goods_item     {}
.goods_list.type_1 > li .goods_item .prd_img     {width:100%;}
.goods_list.type_1 > li .goods_item .prd_img .img_box     {}
.goods_list.type_1 > li .goods_item .prd_img .img_box a     {}
.goods_list.type_1 > li .goods_item .prd_img .img_box a .img {}
.goods_list.type_1 > li .goods_item .prd_img .img_box a .img img {}
.goods_list.type_1 > li .goods_item .prd_unit                 {}
.goods_list.type_1 > li .goods_item .prd_unit .badge         {}
.goods_list.type_1 > li .goods_item .prd_unit .btns         {}
.goods_list.type_1 > li .goods_item .prd_content             {}
.goods_list.type_1 > li .goods_item .prd_content a         {display:block; }
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list {}
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list li {}
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list li.prd_name { }
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list li.fixed_price {margin-top:4px; }
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list li.price     {margin-top:1px;}
.goods_list.type_1 > li .goods_item .prd_content ul.goods_info_list li.member_price {margin-top:1px;}


.goods_list.type_2 { gap:12px; overflow: hidden; flex-direction: column; margin-top: 12px; }
.goods_list.type_2 .goods_prd_com {  min-width: 288px; width:288px;  }
.goods_list.type_2 > li .goods_item     {display:flex; position: relative; gap:12px; }
.goods_list.type_2 > li .goods_item .prd_img     {min-width:112px; width:112px;  }
.goods_list.type_2 > li .goods_item .prd_unit     {position: absolute; width:40px; right: 0; height:100%; }
.goods_list.type_2 > li .goods_item .prd_unit .badge { display:none;  }
.goods_list.type_2 > li .goods_item .prd_unit .btns         { height:100%; flex-direction: column; justify-content:center;}
.goods_list.type_2 > li .goods_item .prd_unit .btns a         { display:iline-block; width:40px; min-width:40px; height:40px; border:1px solid #DFDFDF; border-radius: 50%;   }
.goods_list.type_2 > li .goods_item .prd_content              { margin:auto 0; padding-right:52px}
.goods_list.type_2 > li .goods_item .prd_content ul.goods_info_list { }
.goods_list.type_2 > li .goods_item .prd_content ul.goods_info_list li.fixed_price {display:none;  }
.goods_list.type_2 > li .goods_item .prd_content ul.goods_info_list li.price     {margin-top:3px;}
.goods_list.type_2 > li .goods_item .prd_content ul.goods_info_list li.member_price {margin-top:1px;}


.goods_list.type_3 { gap:12px; overflow: scroll; padding-bottom:24px;  }
.goods_list.type_3 .goods_prd_com {  min-width: 288px; width:288px;  }
.goods_list.type_3 .goods_prd_com .goods_item     {display:flex; position: relative; gap:12px; }
.goods_list.type_3 .goods_prd_com .goods_item .prd_img     {min-width:112px; width:112px;  }
.goods_list.type_3 .goods_prd_com .goods_item .prd_unit     {position: absolute; width:40px; right: 0; height:100%; }
.goods_list.type_3 .goods_prd_com .goods_item .prd_unit .badge { display:none;  }
.goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns         { height:100%; flex-direction: column; justify-content:center;}
.goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a         { display:iline-block; width:40px; min-width:40px; height:40px; border:1px solid #DFDFDF; border-radius: 50%;   }
.goods_list.type_3 .goods_prd_com .goods_item .prd_content              { margin:auto 0; padding-right:52px}
.goods_list.type_3 .goods_prd_com .goods_item .prd_content ul.goods_info_list { }
.goods_list.type_3 .goods_prd_com .goods_item .prd_content ul.goods_info_list li.fixed_price {display:none;  }
.goods_list.type_3 .goods_prd_com .goods_item .prd_content ul.goods_info_list li.price     {margin-top:3px;}
.goods_list.type_3 .goods_prd_com .goods_item .prd_content ul.goods_info_list li.member_price {margin-top:1px;}
.goods_list.type_3 .goods_prd_com .img_box_big     {width:100%; padding-bottom:12px;  }
.goods_list.type_3 .goods_prd_com .img_box_big img {width:100%;  }


.goods_list.type_4 {gap:11px; flex-wrap: wrap; }
.goods_list.type_4 .goods_prd_com { width:calc(33.33% - 7.33px);  }

.mainTheme_list     { display:flex; overflow: scroll; gap:12px; padding:0 20px 24px; }
.mainTheme_list::-webkit-scrollbar {display: none; }
.mainTheme_list .theme_prd  {width:288px; height: 100%;  }
.mainTheme_list .theme_prd .goods_list {padding:0;}
.mainTheme_list .titImg  img { max-width: 100%;}

.main_bnr_txt     { height:100px; background:#B0E7D4;  }
.main_bnr_txt a     { display:flex; width:100%; padding:0 20px; height:100px; }
.main_bnr_txt a span { margin:auto 0; max-height:48px; font-size:18px; line-height:24px; font-weight: 500; }


.recipe_list                 {padding:0 20px 24px; display:flex; gap:12px; overflow: scroll; }
.recipe_list::-webkit-scrollbar {display: none; }
.recipe_list .recipe_items {min-width:218px; width:218px; }
.recipe_list .recipe_items img {width: 100%; height:125px; object-fit: cover; }
.recipe_list .recipe_items .recipe_img {}
.recipe_list .recipe_items .recipe_tit {margin-top:8px; }
.recipe_list .recipe_items .recipe_tit a {color:#222; font-size: 14px; }
.recipe_list .recipe_items .recipe_tit a strong { display: block; font-size: 16px; }
.recipe_list .recipe_items .recipe_prd {display: flex; margin-top:8px; justify-content: space-between;}
.recipe_list .recipe_items .recipe_prd ul.thumb_item {overflow: hidden; padding-right:4px;}
.recipe_list .recipe_items .recipe_prd ul.thumb_item li {float: left; width:36px; height:36px; margin-right:-4px; border:1px solid #EBEBEB; border-radius: 50%; overflow: hidden; background-color:#Fff}
.recipe_list .recipe_items .recipe_prd ul.thumb_item li a { display: block; }
.recipe_list .recipe_items .recipe_prd ul.thumb_item li img {width:36px; height:36px; vertical-align: top; margin:0; }
.recipe_list .recipe_items .recipe_prd .btn {}
.recipe_list .recipe_items .recipe_prd .btn a { display:flex; align-items: center; height:36px; border:1px solid #DFDFDF; line-height:20px; border-radius: 4px; padding: 8px 12px; }
.recipe_list .recipe_items .recipe_prd .btn a::before {content: ""; display: inline-block; vertical-align: top; width:20px; height:20px; background:url(/data/skin/mobile/moment/images/icon/cart.png) no-repeat 50% 50% / 100% }

.monoTv {padding-bottom:24px; }
.monoTv .videoBox {margin:0 20px 16px; border-radius: 8px; overflow: hidden; }

@media screen and (max-width: 500px) {
.monoTv .videoBox iframe { height:51vw; }
}

.cate_list {padding-bottom:24px; }

ul.mainStab     {display:flex; overflow: scroll; padding:8px 20px 16px; gap:6px; }
ul.mainStab::-webkit-scrollbar {display: none; }
ul.mainStab li  { }
ul.mainStab li a { display:block; padding:0 12px; height:32px; white-space: nowrap; line-height:32px; border:1px solid #DFDFDF; border-radius: 16px; cursor: pointer; }
ul.mainStab li a.active     {background-color: #00B373; color: #ffffff; border: 1px solid #00B373; }


.btnBigMore     { padding:0 20px; margin-top:24px; }
.btnBigMore a {display:flex; width:100%; height:46px; align-items: center; justify-content: center; border:1px solid #DFDFDF; border-radius: 4px; }
.btnBigMore a span {margin:auto 0; font-size: 16px; color:#888; font-weight: 600; }
.btnBigMore a::after{content:""; width:20px; height:20px; background:url(/data/skin/mobile/moment/images/icon/btn_r_more.svg) no-repeat 50% 50% / 100% }

.restaurant_cont         {}
.restaurant_cont .restaurant_list         {display:flex;   padding:0 20px; gap:12px; overflow: scroll;}
.restaurant_cont .restaurant_list::-webkit-scrollbar {display: none; }
.restaurant_cont .restaurant_list .swiper-slide     {width:288px; min-width:288px; border-radius:8px; overflow: hidden; }
.restaurant_cont .restaurant_list  a {position: relative;}
.restaurant_cont .restaurant_list  a img {width: 100%;}
.restaurant_cont .restaurant_list  a em {position: absolute; height:24px; line-height:24px; padding:0 6px; left:16px; top:15px; background:rgba(255, 255, 255, .3); color:#fff; font-size: 14px; font-weight: 600; font-style: normal; border-radius: 2px; }
.restaurant_cont .restaurant_list  a span { display: -webkit-box; padding:16px 16px 0; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp:2 }

.banner_cont {}
.banner_cont img {
    max-width: -webkit-fill-available;
    width:100%; /* 지우기 마세요. 배너용 입니다. */

}


.container_time_sale            {margin:0 20px 8px; height:24px; display: block; padding-left:30px; background:url(/data/skin/mobile/moment/images/icon/time.png) no-repeat 0 0/24px}
.container_time_sale span       { font-size: 18px; color:#222; }

/* ==========================================================================
   2026-08 리뉴얼: 일반 메인 PC 레이아웃 (1024px~) @entwiz 2026-08-07
   - 모바일 가로스크롤 리스트 → PC 그리드 전환. 디자인 토큰(gd_tokens.css) 기준.
   - 미정: 메인배너 3분할(사이드 배너)·롤링 방식, 퀵메뉴 브랜드 아이콘 미노출 — 기획 확정 후 반영
   ========================================================================== */
/* 슬라이더 화살표: 모바일 숨김 (PC에서만 노출) */
.recipe_list .swiper-button-prev,
.recipe_list .swiper-button-next,
.main_slide .swiper-button-prev,
.main_slide .swiper-button-next,
.mainTheme_wrap .swiper-button-prev,
.mainTheme_wrap .swiper-button-next {display:none;}

/* ※ 모바일은 기존 그대로 — PC 전용 변경은 아래 @media (min-width:1024px) 안에만 둘 것 */

@media (min-width: 1024px) {
    /* --- PC 전용 미노출 (모바일은 그대로 노출) --- */
    .mainTopSwiper .swiper-pagination {display:none !important;} /* 배너 페이징 */
    .restaurant_cont {display:none !important;}                  /* 외식업 정보 */
    .mainLnkWrap .mainLnkList .lnk_cooperation {display:none !important;} /* 퀵메뉴 제휴문의 */

    /* 콘텐츠 폭 (overflow:hidden 해제 — 배너 풀블리드가 잘리지 않게) */
    .main {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; overflow:visible;}

    /* 메인 배너 (v2 시안): 가운데 480px + 좌우 이전/다음 배너가 화면 가장자리까지 채워지는 형태.
       .main이 콘텐츠 폭 1280으로 묶여 있어 그대로 두면 1280 바깥이 흰 여백으로 남는다.
       100vw로 되뽑아 양옆 배너가 화면 끝까지 이어지게 하고, 넘치는 부분은 여기서 잘라낸다.
       (가로 스크롤은 gd_layout.css의 html:has(#wrap.pcReady){overflow-x:hidden}가 막아준다)
       ※ 배너 이미지는 관리자 등록분을 비율에 맞춰 크롭 — PC용 가로 배너(약 960×500) 등록 시 잘림 없음 */
    .main_slide {position:relative; width:100vw; margin-left:calc(50% - 50vw); padding:var(--space-3, 12px) 0 0; overflow:hidden;}
    .mainTopSwiper {max-width:none; margin:0; overflow:visible;}
    /* 배너 3개가 화면 폭에 정확히 꽉 차도록: 슬라이드 3개 + 사이 간격 2개(각 20px) = 100vw
       시안(1280px) 기준으로 (1280-40)/3 = 413px, 높이 215px가 되어 그대로 맞는다.
       높이는 aspect-ratio로 같이 커져야 크롭 비율이 유지된다. */
    .mainTopSwiper .swiper-slide {width:calc((100vw - 40px) / 5); padding:0;}
    .mainTopSwiper .swiper-slide img {width:100%; height:auto; aspect-ratio:480 / 250; object-fit:cover; object-position:center; border-radius:var(--radius-3, 12px);}
    /* 좌우 화살표 (화면 가장자리 기준) — 반투명 흰 배경 */
    /* 좌우 버튼을 배너 이미지 기준 세로 가운데로.
       .main_slide 는 위쪽에만 여백(12px)이 있어 top:50% 로 두면 그 절반(6px)만큼 위로 뜬다. */
    .main_slide .swiper-button-prev,
    .main_slide .swiper-button-next {display:flex; top:calc(50% + 6px); width:44px; height:44px; margin-top:-22px; border:0; border-radius:50%; background:rgba(255, 255, 255, .75); backdrop-filter:blur(2px); box-shadow:0 2px 6px rgba(0, 0, 0, .12); color:var(--color-neutral-10, #333); z-index:10; transition:background .2s;}
    .main_slide .swiper-button-prev:hover,
    .main_slide .swiper-button-next:hover {background:rgba(255, 255, 255, .95);}
    /* 화살표를 본문 폭(--layout-max) 경계에 맞춘다.
       배너는 100vw 라서 화면 끝 기준으로 두면 넓은 모니터에서 본문보다 한참 바깥에 붙는다.
       화면이 본문 폭보다 좁으면 계산값이 음수가 되므로 좌우 마진(20px)을 하한으로 둔다. */
    .main_slide {--bnr-arrow-inset:max(var(--layout-margin, 20px), calc((100vw - (var(--layout-max, 1440px) + var(--layout-margin, 20px) * 2)) / 2 + var(--layout-margin, 20px)));}
    .main_slide .swiper-button-prev {left:var(--bnr-arrow-inset);}
    .main_slide .swiper-button-next {right:var(--bnr-arrow-inset);}
    .main_slide .swiper-button-prev::after,
    .main_slide .swiper-button-next::after {font-size:15px; font-weight:900;}

    /* 퀵메뉴: 스와이퍼 레이아웃 무력화 → 진짜 중앙 정렬 (래퍼 transform 제거 + 부모 flex 중앙) */
    .mainLnkWrap .mainLnkList {justify-content:center; padding:var(--space-6, 24px) var(--layout-margin, 20px) var(--space-8, 32px); overflow:visible;}
    .mainLnkWrap .mainLnkList .swiper-wrapper {transform:none !important; display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-4, 16px); width:auto;}
    .mainLnkWrap .mainLnkList .swiper-slide {width:64px !important; margin:0 !important; flex:none;}
    .mainLnkWrap .mainLnkList .swiper-slide a {background-size:64px !important;}
    .mainLnkWrap .mainLnkList .swiper-slide a span {padding-top:68px; font-size:14px;}

    /* 섹션 타이틀 */
    /* 섹션 사이 간격(시안 2026-08-28): 기본 100px, 브랜드관 바로 아래 추천테마만 70px */
    .mainTitBox {padding:100px var(--layout-margin, 20px) var(--space-4, 16px);}
    .mainTitBox.line {border-top:0; padding-top:100px;} /* PC: 회색 구분띠 제거 */
    #main_section_theme .mainTitBox,
    #main_section_theme .mainTitBox.line {padding-top:70px;}
    .mainTitBox h3 {font-size:24px; line-height:32px;}

    /* 상품 카드형(type_1): 가로스크롤 → 5열 그리드 */
    .goods_list.type_1 {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-8, 32px) var(--layout-gutter, 16px); overflow:visible;}
    .goods_list.type_1 .goods_prd_com {width:auto; min-width:0;}

    /* --- 상품 카드 v2 (COMPONENTS.md 아이템 카드 규격) --- */
    .goods_list .goods_prd_com {transition:transform .18s ease;}
    .goods_list .goods_prd_com:hover {transform:translateY(-2px);}
    .goods_list .goods_prd_com img {border-radius:var(--radius-2, 8px);}
    .goods_list .goods_prd_com .prd_unit {padding:var(--space-2, 8px) 0 var(--space-1, 4px);}
    /* 상품명 2줄 고정 → 카드 높이 정렬 */
    /* 상품 정보 줄 — 상품명 아래 4px, 정가(취소선)는 할인가 오른쪽 (시안).
       마크업 순서가 정가 → 판매가라 order 로 뒤집고, 두 값을 한 줄에 두려고 flex-wrap 을 쓴다.
       두 줄 자리를 미리 잡던 min-height:44px 은 빼되, 두 줄까지 자르는 처리는 유지한다. */
    /* 판매가(18px)와 정가(13px)를 세로 가운데로 맞춘다 —
       baseline 으로 두면 글자 크기 차이 때문에 정가가 위로 떠 보인다. */
    .goods_list .goods_prd_com ul.goods_info_list {display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-1, 4px);}
    .goods_list .goods_prd_com ul.goods_info_list li.prd_name {width:100%; order:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:0; font-size:15px; line-height:22px; color:var(--color-neutral-5, #222);}
    /* 판매가·정가를 같은 줄 높이로 맞춘다.
       기본값(.goods_prd_com * {line-height:16px})이 남아 있으면 두 li 높이가 달라
       align-items 로도 글자가 안 맞는다. 안쪽 span 도 함께 가운데로. */
    .goods_list .goods_prd_com ul.goods_info_list li.price {order:2; margin-top:var(--space-1, 4px); line-height:20px;}
    .goods_list .goods_prd_com ul.goods_info_list li.fixed_price {order:3; margin-top:var(--space-1, 4px); line-height:24px;}
    .goods_list .goods_prd_com ul.goods_info_list li.price span,
    .goods_list .goods_prd_com ul.goods_info_list li.fixed_price span {line-height:24px; vertical-align:middle;}
    .goods_list .goods_prd_com ul.goods_info_list li.member_price {width:100%; order:4;}
    .goods_list .goods_prd_com ul.goods_info_list li.fixed_price span {font-size:13px; color:var(--color-neutral-50, #AAA);}
    .goods_list .goods_prd_com ul.goods_info_list li.price span {font-size:18px; line-height:24px; font-weight:600;}
    .goods_list .goods_prd_com ul.goods_info_list li.price span.dc_per {color:var(--color-green-40, #00B373); font-weight:700;}
    .goods_list .goods_prd_com ul.goods_info_list li.member_price span {font-size:13px;}
    /* 상품 뱃지 */
    .goods_list .goods_prd_com .badge em {height:22px; line-height:22px; padding:0 var(--space-2, 8px); border-radius:var(--radius-1, 4px); font-size:12px; font-weight:500;}
    .goods_list .goods_prd_com .badge em.green {background:var(--color-green-50, #33C28F); color:var(--color-common-100, #fff);}
    /* --- 카드 하단 [구매하기] 버튼 (시안) ---
       마크업상 버튼(.prd_unit .btns)이 상품명 위에 있어 카드 하단으로 절대배치 */
    .goods_list.type_1 .goods_prd_com .goods_item {position:relative; padding-bottom:52px;}
    /* .prd_unit이 relative라 버튼 absolute 기준이 되어버림 → static으로 풀어 .goods_item 기준으로 */
    .goods_list.type_1 .goods_prd_com .prd_unit {position:static;}
    .goods_list.type_1 .goods_prd_com .prd_unit .badge {position:static; display:flex; flex-wrap:wrap; gap:var(--space-1, 4px);}
    .goods_list.type_1 .goods_prd_com .prd_unit .btns {position:absolute; left:0; right:0; bottom:0; margin:0;}
    .goods_list.type_1 .goods_prd_com .prd_unit .btns a.speedOrder,
    .goods_list.type_1 .goods_prd_com .prd_unit .btns button.speedOrder {display:none;} /* 시안: 빠른주문 미노출 */
    .goods_list.type_1 .goods_prd_com .prd_unit .btns a.addCart,
    .goods_list.type_1 .goods_prd_com .prd_unit .btns button.addCart {display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:40px; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background-image:none; background-color:var(--color-common-100, #fff); font-size:0; transition:background-color .18s;}
    .goods_list.type_1 .goods_prd_com .prd_unit .btns a.addCart::after,
    .goods_list.type_1 .goods_prd_com .prd_unit .btns button.addCart::after {content:'장바구니'; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    .goods_list.type_1 .goods_prd_com .prd_unit .btns a.addCart:hover,
    .goods_list.type_1 .goods_prd_com .prd_unit .btns button.addCart:hover {background-color:var(--color-green-90, #E6F7F1);}

    /* 품절 상품: [구매하기] → [품절] 비활성 (각 타입의 기존 규칙보다 구체적이어야 덮인다) */
    .goods_list.type_1 .goods_prd_com.soldout .prd_unit .btns a.addCart,
    .goods_list.type_1 .goods_prd_com.soldout .prd_unit .btns button.addCart,
    .goods_list.type_2 > li.soldout .goods_item .prd_unit .btns a.addCart,
    .week_prd .goods_list.type_3 .goods_prd_com.soldout .goods_item .prd_unit .btns a.addCart {border-color:var(--color-neutral-70, #DFDFDF); background-color:var(--color-common-100, #fff); pointer-events:none; cursor:default;}
    .goods_list.type_1 .goods_prd_com.soldout .prd_unit .btns a.addCart::after,
    .goods_list.type_1 .goods_prd_com.soldout .prd_unit .btns button.addCart::after,
    .goods_list.type_2 > li.soldout .goods_item .prd_unit .btns a.addCart::after,
    .week_prd .goods_list.type_3 .goods_prd_com.soldout .goods_item .prd_unit .btns a.addCart::after {content:'품절'; color:var(--color-neutral-40, #888);}

    /* 추천테마 등 가로형(type_2/type_3): 원형 아이콘 → 텍스트 버튼
       ※ 기존 규칙이 `> li .goods_item ...`라 셀렉터 구체성을 동일하게 맞춰야 덮인다 */
    .goods_list.type_2 > li .goods_item .prd_unit,
    .goods_list.type_3 .goods_prd_com .goods_item .prd_unit {width:auto; right:0;}
    /* 추천테마(type_2)는 시안대로 88 x 40, 따끈따끈 신상품(type_3)은 기존 크기 유지 */
    .goods_list.type_2 > li .goods_item .prd_unit .btns a {display:flex; align-items:center; justify-content:center; width:88px; min-width:88px; height:40px; padding:0; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background-image:none; background-color:var(--color-common-100, #fff); font-size:0;}
    .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a {display:flex; align-items:center; justify-content:center; width:auto; min-width:88px; height:40px; padding:0 var(--space-3, 12px); border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background-image:none; background-color:var(--color-common-100, #fff); font-size:0;}
    .goods_list.type_2 > li .goods_item .prd_unit .btns a.addCart::after,
    .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a.addCart::after {content:'장바구니'; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    .goods_list.type_2 > li .goods_item .prd_content,
    .goods_list.type_3 .goods_prd_com .goods_item .prd_content {padding-right:96px;}

    /* 섹션 타이틀 / 간격 */
    .mainTitBox h3 {letter-spacing:var(--letter-spacing-base, -0.006em);}
    .mainTitBox a.more {font-size:15px; color:var(--color-neutral-30, #707070);}
    .main_prd_7day, .cate_list, .monoTv, .restaurant_cont {padding-bottom:var(--space-8, 32px);}

    /* 업태별 탭(필 라벨) */
    ul.mainStab li a {height:38px; line-height:36px; padding:0 var(--space-4, 16px); border-radius:19px; font-size:15px; color:var(--color-neutral-20, #555);}
    ul.mainStab li a.active {background-color:var(--color-green-40, #00B373); border-color:var(--color-green-40, #00B373); color:var(--color-common-100, #fff); font-weight:700;}

    /* 하단 배너 영역 여백 */
    .banner_cont {padding:0;}
    .banner_cont img {border-radius:var(--radius-3, 12px);}

    /* 따끈따끈 신상품(.week_prd > .week_prd_list.goods_list.type_3): 가로 슬라이더 → 5열 세로 카드 (시안)
       ※ 아이템이 .swiper-wrapper 안에 있으므로 그리드는 wrapper에 건다 (PC는 Swiper 미초기화) */
    .week_prd .goods_list.type_3 {display:block; padding:0 var(--layout-margin, 20px); overflow:visible;}
    .week_prd .goods_list.type_3 .swiper-wrapper {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-10, 40px) var(--layout-gutter, 16px); transform:none !important; width:auto;}
    .week_prd .goods_list.type_3 .goods_prd_com {width:auto !important; min-width:0 !important; margin:0 !important;}
    /* 가로형(썸네일 좌) → 세로 카드로 전환 */
    /* 버튼을 흐름 안에 두어 가격 아래 20px 로 고정 (업태별 인기상품과 같은 방식).
       absolute + 카드 아래 padding 방식은 카드 높이에 따라 간격이 달라진다. */
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item {display:flex; flex-direction:column; position:relative; padding-bottom:0;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_img {order:1;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit {display:contents;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .badge {order:2; min-height:20px; margin:var(--space-2, 8px) 0 var(--space-1, 4px);}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_content {order:3;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns {order:4; position:static; margin:var(--space-5, 20px) 0 0;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_img {min-width:0; width:100%;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit {position:static; width:auto; height:auto; padding:var(--space-2, 8px) 0 var(--space-1, 4px);}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .badge {display:flex; flex-wrap:wrap; gap:var(--space-1, 4px);}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_content {margin:0; padding:0;}
    /* 카드 하단 [구매하기] 버튼 */
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns {position:static; left:auto; right:auto; bottom:auto; height:auto; flex-direction:row;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a.addCart {display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:40px; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background-image:none; background-color:var(--color-common-100, #fff); font-size:0;}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a.addCart::after {content:'장바구니'; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit .btns a.addCart:hover {background-color:var(--color-green-90, #E6F7F1);}

    /* 그 외 리스트형(type_3): 2열 그리드 */
    .goods_list.type_3 {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4, 16px) var(--space-8, 32px); overflow:visible;}
    .goods_list.type_3 .goods_prd_com {width:auto; min-width:0;}

    /* 업태별 인기상품(type_4): 3열 → 5열 그리드 + 카드 하단 [구매하기] (시안) */
    /* overflow:hidden(기본 .goods_list)이 남으면 2행째 카드가 잘린다 → visible */
    /* 줄 사이(버튼 → 다음 줄 썸네일) 40px */
    .goods_list.type_4 {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-10, 40px) var(--layout-gutter, 16px); flex-wrap:nowrap; overflow:visible; height:auto; max-height:none;}
    .goods_list.type_4 .goods_prd_com {width:auto; min-width:0;}
    /* 상품명 한 줄 + 말줄임.
       -webkit-line-clamp:1 은 '단어' 단위로 끊어서 줄 끝에 빈자리가 남는다
       → nowrap + text-overflow 로 바꿔 폭이 허용하는 글자까지 최대한 채운다 (요청 2026-09-04).
       line-clamp 를 쓰려면 display:-webkit-box 여야 하므로 display 도 함께 되돌린다. */
    .goods_list.type_4 .goods_prd_com ul.goods_info_list li.prd_name,
    .week_prd .goods_list.type_3 .goods_prd_com ul.goods_info_list li.prd_name {display:block; -webkit-line-clamp:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:0;}
    .goods_list.type_4 .goods_prd_com .goods_item {position:relative; padding-bottom:52px;}
    .goods_list.type_4 .goods_prd_com .prd_unit {position:static; padding:var(--space-2, 8px) 0 var(--space-1, 4px);}
    .goods_list.type_4 .goods_prd_com .prd_unit .badge {position:static; display:flex; flex-wrap:wrap; gap:var(--space-1, 4px);}
    .goods_list.type_4 .goods_prd_com .prd_unit .btns {position:absolute; left:0; right:0; bottom:0; margin:0;}
    .goods_list.type_4 .goods_prd_com .prd_unit .btns a.speedOrder,
    .goods_list.type_4 .goods_prd_com .prd_unit .btns button.speedOrder {display:none;}
    .goods_list.type_4 .goods_prd_com .prd_unit .btns a.addCart,
    .goods_list.type_4 .goods_prd_com .prd_unit .btns button.addCart {display:flex; align-items:center; justify-content:center; width:100%; min-width:0; height:40px; border:1px solid var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); background-image:none; background-color:var(--color-common-100, #fff); font-size:0; transition:background-color .18s;}
    .goods_list.type_4 .goods_prd_com .prd_unit .btns a.addCart::after,
    .goods_list.type_4 .goods_prd_com .prd_unit .btns button.addCart::after {content:'장바구니'; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    .goods_list.type_4 .goods_prd_com .prd_unit .btns a.addCart:hover,
    .goods_list.type_4 .goods_prd_com .prd_unit .btns button.addCart:hover {background-color:var(--color-green-90, #E6F7F1);}
    /* 품절 */
    .goods_list.type_4 .goods_prd_com.soldout .prd_unit .btns a.addCart,
    .goods_list.type_4 .goods_prd_com.soldout .prd_unit .btns button.addCart {border-color:var(--color-neutral-70, #DFDFDF); pointer-events:none;}
    .goods_list.type_4 .goods_prd_com.soldout .prd_unit .btns a.addCart::after,
    .goods_list.type_4 .goods_prd_com.soldout .prd_unit .btns button.addCart::after {content:'품절'; color:var(--color-neutral-40, #888);}

    /* 버튼 문구 — 메인은 '장바구니'로 통일(시안 2026-08-31). 비법 레시피만 예외로 그대로 둔다
       (그쪽은 .recipe_prd 구조라 이 규칙에 걸리지 않는다) */
    .goods_list.type_4 .goods_prd_com .prd_unit .btns a.addCart::after,
    .goods_list.type_4 .goods_prd_com .prd_unit .btns button.addCart::after {content:'장바구니';}

    /* 버튼을 흐름 안에 두어 가격 바로 아래 20px 로 고정한다.
       원래는 absolute(bottom:0) + 카드 아래 padding 으로 자리를 만들었는데,
       카드나 격자 칸 높이가 조금만 달라져도 버튼이 그만큼 밀려 간격이 어긋난다.
       마크업이 이미지 → 뱃지·버튼 → 상품정보 순서라, .prd_unit 의 상자를 없애(display:contents)
       뱃지와 버튼을 카드의 직접 자식으로 만든 뒤 순서를 다시 준다. */
    .goods_list.type_4 .goods_prd_com .goods_item {display:flex; flex-direction:column; padding-bottom:0;}
    .goods_list.type_4 .goods_prd_com .prd_img {order:1;}
    .goods_list.type_4 .goods_prd_com .prd_unit {display:contents;}
    /* 뱃지 줄 — 뱃지가 없어도 자리를 잡아 상품명 높이를 맞춘다(.prd_unit 이 갖고 있던 역할) */
    .goods_list.type_4 .goods_prd_com .prd_unit .badge {order:2; min-height:20px; margin:var(--space-2, 8px) 0 var(--space-1, 4px);}
    .goods_list.type_4 .goods_prd_com .prd_content {order:3;}
    /* flex:none 이 없으면 이 줄이 눌려(20px) 안의 40px 버튼이 카드 밖 gap 으로 삐져나온다 */
    .goods_list.type_4 .goods_prd_com .prd_unit .btns {order:4; position:static; flex:none; min-height:40px; margin:var(--space-5, 20px) 0 0;}
    /* 업태별 탭 + 설정(⚙) 버튼: 탭 우측 끝 원형 (시안) */
    .cate_list .mainTitBox a.setting {display:none;} /* 제목 옆 설정은 PC에서 숨김 */
    /* 설정 버튼은 탭 바로 옆에 붙임 (탭이 남은 폭을 다 먹으면 버튼이 화면 끝으로 밀린다) */
    /* 탭 줄: 좌우 여백은 wrap이 갖고, 탭 자체 패딩은 0 (설정 버튼과 세로 중심을 맞추기 위함) */
    .cate_list .stab_wrap {display:flex; align-items:center; justify-content:flex-start; gap:var(--space-3, 12px); padding:0 var(--layout-margin, 20px); margin-bottom:var(--space-5, 20px);}
    .cate_list .stab_wrap ul.mainStab {flex:0 1 auto; min-width:0; padding:0;}
    /* 설정 버튼: 탭과 같은 높이의 원형 아웃라인 + 배경 없는 기어 아이콘(SVG) */
    .cate_list .stab_wrap .setting_pc {flex:none; display:block; width:38px; height:38px; border:1px solid var(--color-neutral-70, #DFDFDF); border-radius:50%; background:var(--color-common-100, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") no-repeat 50% 50% / 18px auto; font-size:0; cursor:pointer;}
    .cate_list .stab_wrap .setting_pc:hover {border-color:var(--color-neutral-60, #CCC); background-color:var(--color-neutral-90, #F7F7F7);}

    /* 카드를 줄 높이에 맞춰 늘리지 않는다.
       늘리면 버튼(카드 바닥에 붙어 있음)이 아래로 밀려 가격과의 간격이 20px 보다 벌어진다.
       뱃지 유무로 생기는 높이 차이는 아래 .prd_unit 의 min-height 로 맞춘다. */
    /* align-self:start 로 격자가 칸을 늘리는 것도 막는다.
       칸만 늘어나면 카드(.goods_item)는 그대로인데 버튼이 늘어난 칸 바닥에 붙어
       카드 밖으로 빠져나간다(업태별 인기상품에서 확인). */
    .goods_list.type_1 .goods_prd_com,
    .goods_list.type_4 .goods_prd_com,
    .week_prd .goods_list.type_3 .goods_prd_com {height:auto; align-self:start;}
    .goods_list.type_1 .goods_prd_com .goods_item,
    .goods_list.type_4 .goods_prd_com .goods_item,
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item {height:auto;}
    .goods_list.type_1 .goods_prd_com .prd_unit,
    .goods_list.type_4 .goods_prd_com .prd_unit,
    .week_prd .goods_list.type_3 .goods_prd_com .goods_item .prd_unit {min-height:34px;} /* 뱃지 자리 확보 */

    /* 상품 썸네일: 아이콘/비율과 무관하게 정사각 고정 (시안) */
    .goods_list.type_1 .goods_prd_com .prd_img .img_box,
    .goods_list.type_4 .goods_prd_com .prd_img .img_box,
    .week_prd .goods_list.type_3 .goods_prd_com .prd_img .img_box {position:relative; aspect-ratio:1 / 1; overflow:hidden; border-radius:var(--radius-2, 8px); background:var(--color-neutral-90, #F7F7F7);}
    .goods_list.type_1 .goods_prd_com .prd_img .img_box .img,
    .goods_list.type_4 .goods_prd_com .prd_img .img_box .img,
    .week_prd .goods_list.type_3 .goods_prd_com .prd_img .img_box .img {width:100%; height:100%;}
    /* ※ 상품 이미지(.img 안)만 대상 — 아이콘/뱃지 이미지까지 잡으면 아이콘이 썸네일 크기로 늘어난다 */
    .goods_list.type_1 .goods_prd_com .prd_img .img_box .img img,
    .goods_list.type_4 .goods_prd_com .prd_img .img_box .img img,
    .week_prd .goods_list.type_3 .goods_prd_com .prd_img .img_box .img img {width:100%; height:100%; object-fit:cover; border-radius:0;}
    /* 썸네일 위 아이콘/뱃지는 원래 크기 유지 */
    .goods_list .goods_prd_com .prd_img .img_box .img_icon_list img,
    .goods_list .goods_prd_com .prd_img .img_box span.badge img {width:auto; height:20px; object-fit:contain;}

    /* 추천테마: 화살표 없이 3.5개 노출 슬라이드 (시안) — 다음 카드가 살짝 보임 */
    .mainTheme_wrap {position:relative; padding:0 var(--layout-margin, 20px);}
    .mainTheme_list {padding:0; overflow:hidden;}
    /* 시안 수치 — 카드 290px, 카드 사이 30px(Swiper spaceBetween), 배너 아래 12px */
    .mainTheme_list .theme_prd {width:290px; min-width:0; height:auto;}
    .mainTheme_list .main_banner_image {width:100%; max-height:none; aspect-ratio:576 / 252; border-radius:var(--radius-2, 8px);}
    .mainTheme_list .titImg {margin-bottom:var(--space-3, 12px); line-height:0; cursor:pointer;}
    /* 테마 내 상품 행: 고정폭(288) 해제 + 시안 수치(행 높이 72 · 썸네일 72)
       목록의 gap(12px)은 아래 행 패딩과 겹쳐 여백이 두 번 들어가므로 없앤다 */
    .goods_list.type_2 {gap:0; margin-top:0;}
    .goods_list.type_2 .goods_prd_com {width:auto; min-width:0;}
    /* 행마다 아래 구분선(시안 1px #F7F7F7) — 마지막 행에도 선이 남는다.
       시안 간격: 선 → 12px → 상품 → 13px → 선 */
    .goods_list.type_2 > li {min-height:72px; margin:0; padding:12px 0 13px; border-bottom:1px solid var(--color-neutral-90, #F7F7F7);}
    .goods_list.type_2 > li:first-child {padding-top:0;}
    .goods_list.type_2 > li .goods_item .prd_img {min-width:72px; width:72px; height:72px;}
    .goods_list.type_2 > li .goods_item .prd_img img {width:72px; height:72px; object-fit:cover;}
    /* 담기 버튼 88 x 40 + 정보와의 간격 12 */
    .goods_list.type_2 > li .goods_item .prd_content {padding-right:100px;}
    .goods_list.type_2 .goods_prd_com ul.goods_info_list li.prd_name {-webkit-line-clamp:1; min-height:0; font-size:14px; line-height:20px;}
    .goods_list.type_2 .goods_prd_com ul.goods_info_list li.price {white-space:nowrap;}
    .goods_list.type_2 .goods_prd_com ul.goods_info_list li.price span {font-size:16px; line-height:20px;}
    /* 썸네일 ↔ 정보 간격 (시안) */
    .goods_list.type_2 > li .goods_item {gap:17px;}

    /* 비법레시피: PC 5열 그리드 (시안) — Swiper 미초기화, 화살표 미사용 */
    .main_recipe .recipe_list {display:block; position:relative; padding:0 var(--layout-margin, 20px); margin:0; overflow:visible;}
    .main_recipe .recipe_list .swiper-wrapper {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--layout-gutter, 16px); transform:none !important; width:auto;}
    .recipe_list .recipe_items {width:auto !important; min-width:0 !important; margin:0 !important;}
    .recipe_list .recipe_items:nth-child(n+6) {display:none;} /* 시안: 5개 한 줄, 나머지는 '더보기'로 */
    .recipe_list .recipe_items img {height:180px;}
    /* 두 줄까지만 보이되 자리를 미리 잡지는 않는다 — min-height 를 두면
       한 줄짜리 제목에서 아래 상품아이콘까지 44px 이 벌어진다 */
    .recipe_list .recipe_items .recipe_tit a strong {display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:0;}
    /* 시안 2026-08-31 — 이미지 ↔ 제목 12px / 제목 ↔ 상품아이콘 10px */
    .recipe_list .recipe_items .recipe_tit {margin-top:var(--space-3, 12px);}
    .recipe_list .recipe_items .recipe_prd {margin-top:10px;}
    /* 구매하기 버튼: 초록 아웃라인 + 아이콘 없음 (시안 / 다른 섹션과 통일) */
    .recipe_list .recipe_items .recipe_prd .btn a {justify-content:center; min-width:88px; height:40px; padding:0 var(--space-3, 12px); border-color:var(--color-green-40, #00B373); border-radius:var(--radius-1, 4px); color:var(--color-green-40, #00B373); font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em;}
    .recipe_list .recipe_items .recipe_prd .btn a::before {display:none;}
    .recipe_list .recipe_items .recipe_prd .btn a:hover {background:var(--color-green-90, #E6F7F1);}
    .recipe_list .swiper-button-prev,
    .recipe_list .swiper-button-next {display:none !important;}

    /* 모노마트TV: 좌 영상 + 우 '영상 속 제품' 가로형 행 리스트 (시안) */
    /* 아래 여백은 두지 않는다 — 다음 섹션이 제목 위 100px 을 갖고 있어 그걸로 충분하다(시안) */
    .monoTv {display:grid; grid-template-columns:minmax(0, 2fr) minmax(360px, 1fr); gap:0 var(--space-6, 24px); align-items:start; padding:0 var(--layout-margin, 20px) 0;}
    .monoTv .mainTitBox {grid-column:1 / -1; padding-left:0; padding-right:0;}
    /* 비율은 감싼 박스가 잡는다. iframe 에 직접 aspect-ratio 를 주면 계산 높이가 소수점이 되어
       영상보다 1px 크게 잡히고, 그 틈으로 유튜브의 검은 배경이 아래쪽에 선처럼 비친다. */
    .monoTv .videoBox {position:relative; grid-column:1; margin:0; max-width:none; aspect-ratio:16 / 9; line-height:0; font-size:0; overflow:hidden;}
    /* 우측 목록 높이에 맞춘다 — 제목 줄(22 + 아래 12) + 4줄 387 = 421 */
    /* 위 박스가 16:9 를 잡으므로 iframe 은 그 안을 채우기만 한다.
       유튜브 플레이어는 정수 픽셀로 그려서 소수점 높이와 어긋나고, 그 틈이 검은 선으로 보인다.
       오차 크기가 화면 배율마다 달라 고정 px 로는 계속 어긋나므로 살짝 키워서 가장자리를 덮는다
       (박스가 overflow:hidden 이라 넘친 만큼 잘린다). */
    .monoTv .videoBox iframe {position:absolute; left:0; top:0; display:block; width:100%; height:100%; aspect-ratio:auto; transform:scale(1.008); transform-origin:center center;}
    /* 영상 높이가 폭에 따라 달라지므로(16:9) 우측 목록도 따라가게 한다 — 높이 고정값을 두지 않는다 */
    .monoTv .maintv_side {grid-column:2; align-self:stretch; display:flex; flex-direction:column; min-height:0;}
    .monoTv .maintv_tit {display:block; margin-bottom:var(--space-3, 12px); font-size:20px; line-height:24px; font-weight:600; color:var(--color-neutral-5, #222);}
    /* 시안: 4줄까지는 스크롤 없이 보이고 5줄째부터 스크롤.
       한 줄 = 썸네일 72 + 위아래 여백 12씩 = 96, 둘째 줄부터 구분선 1px → 96 + 97*3 = 387 */
    .monoTv .maintv_list {display:block; flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; padding:0; border-top:1px solid var(--color-neutral-90, #F7F7F7); border-bottom:1px solid var(--color-neutral-90, #F7F7F7);}
    .monoTv .maintv_list .swiper-wrapper {display:block; transform:none !important; width:auto;}
    .monoTv .maintv_list .goods_prd_com {width:auto !important; min-width:0 !important; margin:0 !important; padding:var(--space-3, 12px) 0; border:0;}
    .monoTv .maintv_list .goods_prd_com + .goods_prd_com {border-top:1px solid var(--color-neutral-90, #F7F7F7);} /* 시안: 행 사이 구분선 */
    /* 가로형 행: 썸네일 | 정보 | 구매하기 (type_1 세로카드 규칙 무력화)
       ※ DOM 순서가 img→unit→content라 grid-row를 명시하지 않으면 content가 다음 줄로 밀린다 */
    .monoTv .maintv_list .goods_prd_com .goods_item {position:static; display:grid; grid-template-columns:72px minmax(0, 1fr) auto; grid-template-rows:auto; gap:0 var(--space-3, 12px); align-items:center; padding:0; border:0;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_img {grid-column:1; grid-row:1; width:72px;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_content {grid-column:2; grid-row:1; min-width:0;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_unit {grid-column:3; grid-row:1; position:static; padding:0;}
    .monoTv .maintv_list .goods_prd_com .img_box_big {display:none !important;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_unit .btns {position:static; margin:0;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_unit .btns a.addCart {width:auto; min-width:88px; height:40px; padding:0 var(--space-3, 12px); font-size:0;}
    .monoTv .maintv_list .goods_prd_com .goods_item .prd_unit .btns a.addCart::after {content:'장바구니'; white-space:nowrap; font-size:16px; line-height:24px; font-weight:600; letter-spacing:-0.006em; color:var(--color-green-40, #00B373);}
    .monoTv .maintv_list .goods_prd_com ul.goods_info_list li.prd_name {-webkit-line-clamp:1; min-height:0; font-size:14px; line-height:20px;}
    .monoTv .maintv_list .goods_prd_com ul.goods_info_list li.price {white-space:nowrap;}
    .monoTv .maintv_list .goods_prd_com ul.goods_info_list li.price span {font-size:15px; line-height:21px;}

    /* 영상 속 제품이 비어 있으면(진열 미설정) 우측 영역 숨기고 영상만 좌측 배치 */
    .monoTv .maintv_side:has(.swiper-wrapper:empty) {display:none;}

    /* 업태별 탭 */
    ul.mainStab {padding:var(--space-2, 8px) var(--layout-margin, 20px) var(--space-6, 24px); overflow:visible; flex-wrap:wrap;}

    /* 더보기 버튼 (시안: 전체 폭 · 연한 테두리 · 진한 글자 — 간편주문 더보기와 통일) */
    .btnBigMore {display:block; padding:0 var(--layout-margin, 20px); margin-top:var(--space-12, 48px);} /* 시안: 상품과 간격 확보 */
    .btnBigMore a {width:100%; height:48px; gap:var(--space-2, 8px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-2, 8px); background:var(--color-common-100, #fff);}
    .btnBigMore a:hover {border-color:var(--color-neutral-70, #DFDFDF); background:var(--color-neutral-90, #F7F7F7);}
    .btnBigMore a span {font-size:15px; line-height:21px; font-weight:500; color:var(--color-neutral-10, #333);}
    /* 시안 2026-08-31: 문구 옆 화살표 제거 */
    .btnBigMore a::after {display:none;}

    /* 외식업 정보: 가로스크롤 → 4열 */
    .restaurant_cont .restaurant_list {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--layout-gutter, 16px); overflow:visible;}
    .restaurant_cont .restaurant_list .swiper-slide {width:auto; min-width:0;}

    /* 장바구니 버튼 문구는 섹션별 규칙에서 같은 값(16/600/24px, -0.006em, #00B373)으로 맞춰 두었다.
       공통 규칙으로 묶으면 섹션 셀렉터가 더 구체적이라(클래스 6개) 순서와 무관하게 밀린다. */
}