/* BASIC css start */
/* 추천, 신상품 타이틀 */
.main_title {text-align:center; margin:0px auto 35px; font-size:0px; position:relative;}
.main_title .title_t01 {color:#1a1a1a; font-size:15px; font-weight:700; text-align:center; line-height:1; }
.main_title .title_t02 {width:15px; height:1px; background-color:#1a1a1a; margin:9px auto;}
.main_title .title_t03 {color:#8a8a8a; font-size:13px; font-weight:300; text-align:center; line-height:1.5; }


#contents {padding:0 2%}
#contents .product_category_wrap {padding:0 14px; text-align:center}
#contents .product_category_wrap .cate1 {padding:30px 0 10px}
#contents .product_category_wrap .cate1 >a {font-size:14px; font-weight:600; line-height: 1; padding: 30px 0 10px; letter-spacing: -1px;}

#contents .product_category_wrap .cate3 {
    display: inline-flex
;
    display: inline-flex
;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

#contents .product_category_wrap .cate3 >a {font-size:12px; font-weight:500; line-height: 1; padding: 30px 0 10px; letter-spacing: -1px;}

#contents .product_list_outer {border:none;}
#contents .product_category_wrap .cate_child_wrap {padding-bottom: 20px;}
.product_category_wrap .cate_child_wrap ul li a {
    font-size: 11px;
    font-weight: 300;
    color: #202020;
    /* border-radius: 6px; */
    display: inline-block;
    padding: 1px 9px;
    text-decoration: none;
    display: inline;
    box-shadow: inset 0 -7px #eaf1f4;
}
#contents .product_category_wrap .cate_child_wrap ul li a.sel {color:#000; background:#fff; border:0; font-weight:500}

.cateTitleImg {width:100%; text-align:center; margin-bottom:50px}
.cateTitleImg img {width:100%}


/* 분류페이지 추천, 신상품 상품진열 */
.swiper-container.recmd_roll {margin: 30px 15px;}
.recmd_roll .swiper-wrapper {padding-left: 0 !important;}
.recmd_roll .swiper-slide {width:168px; margin-bottom:40px;}.recmd_roll .swiper-pagination-bullet {width:9px; height:9px; border:1px solid #9c9c9c; background-color: transparent; border-radius:50%; box-sizing:border-box; vertical-align:middle; opacity:1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s;  transition: all 0.3s;}
.recmd_roll .swiper-slide .thumbnail img {width: 100%; height: 100%;}
.recmd_roll .swiper-pagination-bullet-active {width:9px; height:9px; background-color: #1a1a1a; border: 1px solid #1a1a1a; opacity:1;}

/* 목록 타이틀, 중분류 */
#titleArea {position: relative; border-bottom:1px solid #f6f6f6; background-color: #fff; }
#titleArea h2 {padding: 0 61px; color: #2e2e2e; text-align: center; font-weight: bold; line-height:72px; font-size:16px;}
#titleArea span {position: absolute; top:20px; left: 14px;}
#titleArea span img {width: 33px;}
.list_menu {border-bottom:1px solid #e9e9e9;}
.menuCategory {padding: 20px 0; padding-left:0 !important; padding-right:0px !important;  margin:0 auto; text-align:center !important;  border-bottom: 0;}
.menuCategory li {width:unset; height: 31px; display:inline-block;text-align:center; margin: 0 5px; padding:0 8px; border:1px solid #e9e9e9 !important; background-color:#fff;}
.menuCategory li:first-child {margin-left: 16px;}
.menuCategory li a {display: block; padding-top: 9px; font-size:12px !important;color:#777 !important;font-weight:400 !important;}
.menuCategory li.on {border-color: #1a1a1a !important;}
.menuCategory li.on > a {color:#1a1a1a !important;}

/*목록페이지 정렬 */
.list_array {padding:18px 14px; height: auto; border: 0; margin-bottom: 0;}
.list_array .list_arrayLeft {margin: 0; float: none !important; text-align: right; }
.list_array .list_arrayLeft select {max-width:150px; width:150px; height:40px; border:1px solid #e5e5e5;}
.list_array .list_arrayRight {margin: 0; font-size:0;}
.list_array .list_arrayRight a {display:inline-block; margin-left:-1px; border:1px solid #e5e5e5; box-sizing:border-box;}
.list_array .list_arrayRight a img {height:40px; margin: 0;}

/*목록상단배너 100% */
.xans-product-menupackage .banner img {width:100%; }
.xans-product-menupackage .banner {padding:0px;}

/* 더보기 */
#MS_product_more_btn_area .more {margin-top: 0;}


@media screen and (min-width: 420px) {
.list_shopping1x li:fisrt-child + li {padding-top: 0;}
}


.cate_top_2name { padding: 10px 0px 10px 0px; text-align: center; }
.cate_top_2name span { font-size: 14px; font-weight: 700; }
.cate_top_2name .now_cate {}
.cate_top_2name .now_cate:before { content: ">"; display: inline-block; padding: 0px 10px; }



@media screen and (max-width: 600px) {
   .rbContent > div,
   .rbContent > div > table,
   .rbContent > div > table > tbody,
   .rbContent > div > table > tbody > tr,
   .rbContent > div > table > tbody > tr > td { display: block; width: 100%; }
   .rbContent > div > table > tbody > tr > td > #MS_WritenBySEB { position: relative; width: 100%; display: block; padding: 100% 0px; }
   .rbContent > div > table > tbody > tr > td > #MS_WritenBySEB > iframe { width: 100%; height: 100%; position: absolute; display: block; top: 0px; }
}

/* 1. 기본 스타일 리셋 및 폰트 설정 */
.delivery-check-container {
    background: #ffffff;
    padding: 15px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    margin: 10px auto;
    max-width: 1000px;
    font-family: 'Pretendard', -apple-system, sans-serif;
    /* 가로 스크롤 방지 핵심 */
    box-sizing: border-box; 
    overflow: hidden;
    width: 95%; /* 모바일에서 양옆 여백 확보 */
}

/* 모든 자식 요소에도 너비 계산 방식 적용 */
.delivery-check-container *, 
.delivery-check-container *:before, 
.delivery-check-container *:after {
    box-sizing: border-box;
}

/* 2. 레이아웃: 모바일(세로 1단), PC(가로 2단) */
.delivery-flex-wrapper {
    display: flex;
    flex-direction: column; /* 기본 모바일 세로 */
    gap: 20px;
}

@media (min-width: 769px) {
    .delivery-flex-wrapper {
        flex-direction: row; /* PC 가로 배치 */
        align-items: flex-start;
    }
    .delivery-search-side { flex: 0.8; }
    .delivery-info-side { flex: 1.2; }
}

/* 3. 검색 영역 스타일 */
.delivery-header h3 { 
    font-size: 18px; 
    margin: 0 0 8px 0; 
    font-weight: bold; 
    color: #333; 
}
.delivery-header p { 
    font-size: 14px; 
    color: #666; 
    margin-bottom: 15px; 
}

.search-box {
    display: flex;
    gap: 5px;
    width: 100%;
}

#zipcode-input {
    flex: 1;
    min-width: 0; /* Flexbox 너비 버그 방지 */
    padding: 12px;
    font-size: 16px !important; /* 모바일 확대 방지 */
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
}

#zipcode-input:focus { border-color: #004730; }

#check-delivery-btn {
    padding: 0 15px;
    background: #004730;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* 4. 결과 메시지 영역 */
.result-message { 
    margin-top: 10px; 
    padding: 12px; 
    border-radius: 6px; 
    display: none; 
    font-size: 15px;
    text-align: center;
    font-weight: bold;
}

/* 5. 표 영역 스타일 (깨짐 방지 핵심) */
.area-details { margin-top: 10px; }
.area-details summary { 
    font-size: 16px; 
    font-weight: bold; 
    padding: 10px 0; 
    cursor: pointer; 
    color: #333; 
}

.area-table {
    width: 100%;
    margin-top: 10px;
    border-top: 2px solid #333;
}

.area-table table {
    width: 100% !important;
    table-layout: fixed; /* 셀 너비를 고정하여 화면 밖 이탈 방지 */
    border-collapse: collapse;
}

.area-table th, .area-table td {
    border-bottom: 1px solid #eee;
    padding: 12px 5px !important; /* 좌우 패딩 축소 */
    text-align: center;
    font-size: 14px !important;
    word-break: break-all; /* 긴 숫자 줄바꿈 방지 */
}

.area-table th {
    background: #f9f9f9;
    color: #777;
    font-weight: normal;
}



 .notice-wrap {
      max-width: 1000px;
      margin: 0 auto;
    }

    /* 상단 그린 배너 */
    .top-banner {
      background: #4caf50;
      color: #fff;
      border-radius: 10px;
      padding: 16px 22px;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 36px;
    }
    .top-banner .badge {
      background: #fff;
      color: #4caf50;
      font-weight: 800;
      font-size: 13px;
      padding: 6px 12px;
      border-radius: 20px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .top-banner .text strong {
      display: block;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .top-banner .text span {
      font-size: 13px;
      opacity: 0.92;
    }

    /* 섹션 블록 */
    .section {
      margin-bottom: 36px;
    }
    .section-title {
      font-size: 16px;
      font-weight: 800;
      color: #111;
      padding-bottom: 10px;
      border-bottom: 2px solid #222;
      margin-bottom: 0;
    }

    /* 테이블 */
    table {
      width: 100%;
      border-collapse: collapse;
    }
    table tr {
      border-bottom: 1px solid #ebebeb;
    }
    table tr:last-child {
      border-bottom: none;
    }
    table td {
      padding: 15px 8px;
      vertical-align: top;
      line-height: 1.75;
    }
    table td.key {
      color: #888;
      width: 130px;
      min-width: 100px;
      white-space: nowrap;
      font-size: 13.5px;
    }
    table td.val {
      color: #222;
      font-size: 13.5px;
    }
    table td.val strong {
      color: #111;
      font-weight: 700;
    }
    table td.val .green {
      color: #4caf50;
      font-weight: 700;
    }
    table td.val .red {
      color: #d32f2f;
      font-weight: 700;
    }
    table td.val .highlight {
      background: #f1f8e9;
      color: #2e7d32;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
    }

    /* 경고 행 */
    .warn-row td {
      background: #fff8e1;
      border-left: 3px solid #ffc107;
      padding: 14px 14px 14px 16px;
      border-bottom: none;
      font-size: 13px;
      color: #6d4c00;
      line-height: 1.8;
    }
    .warn-row td strong { color: #c62828; }

    /* 안내 박스 */
    .info-box {
      background: #f8f8f8;
      border-radius: 6px;
      padding: 13px 18px;
      font-size: 13px;
      color: #666;
      text-align: center;
      margin-top: 12px;
    }

    /* 섹션 구분선 */
    .divider {
      border: none;
      border-top: 1px solid #e0e0e0;
      margin: 28px 0;
    }

/* BASIC css end */