@charset "utf-8";

/* CSS: 디자인 시스템 및 변수 선언 */
:root {
    --active-scale: 1.15;
    --inactive-opacity: 0.5;
    --transition-speed: 0.4s;
    --card-width: 420px;
    --card-height: 530px; /* 카드의 전체 높이 고정 */
    --img-height: 380px; /* 이미지 영역 높이 고정 */
    --card-gap: 0;
    --primary-color: #2c7f44;
    --text-dark: #333;
    --text-gray: #333;
}
/*2026 수정*/
.newHeader {
    header {
        height: 150px;
    }
    header .header {
        width: 100%;
    }
    header .header .logo {
        top: 23px;
        width: 173px;
        height: 34px;
    }
    header .header .logo.b2g {
        top: 20px;
        width: 203px;
        height: 44px;
    }
    header aside {
        width: 85%;
        top: 20px;
        justify-content: space-between;
    }
    header.fixed aside {
        display: none;
    }
    header.fixed {
        height: 64px;
    }
    header.fixed .gnbMenu {
        top: 0;
    }
    header.fixed .gnbMenu .side {
        display: block;
    }
    header .gnbMenu {
        top: 87px;
        border-top: 1px solid #eee;
    }
    header .category {
        top: 65px;
    }
    .gnbInner {
        position: relative;
        display: flex;
        align-items: center;
        width: 1440px;
        margin: 0 auto;
    }
    header .gnbMenu .gnbInner {
        height: 62px;
    }
    header .gnbMenu .gnbInner .ic_cat {
        width: 28px;
        margin-right: 14px;
    }
    header .gnbMenu .side {
        top: 2px;
    }
    header .gnbMenu .side a ~ a {
        padding: 0 9px 5px;
        margin: 0;
        border-radius: 6px;
    }
    header .gnbMenu .side a ~ a:after {
        display: none;
    }
    header .gnbMenu .side a:hover {
        background-color: #e5f6ee;
        color: #222;
    }
    header .gnbMenu .side .fixSearch {
        display: none;
    }
    header.fixed .gnbMenu .side .fixSearch {
        display: inline-block;
        background: url(../images/ic/ic_search_n.svg) no-repeat 50% 20%;
        padding: 0 9px 5px;
    }
    .fixSearch {
        transition: all 0.3s ease;
    }
    .fixSearch span.close {
        display: none;
    }
    .fixSearch.on {
        background: url(../images/ic/ic-close-n.svg) no-repeat 50% 20% !important;
    }
    .fixSearch.on span {
        display: none;
    }
    .fixSearch.on span.close {
        display: block;
        color: #008848;
    }
    header .gnb a {
        padding: 0 40px;
    }
    header .gnb li {
        position: relative;
        margin-right: 0;
    }
    header .gnb li:hover > a {
        color: var(--primary-green-90);
        text-decoration: underline;
    }
    header .gnb li.arrwDrop > a {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    header .gnb li.arrwDrop > a::after {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: url(../images/ic/arrw-dropdown.svg) no-repeat center center;
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        filter: black;
        transform: rotate(180deg);
        transition: 0.2s;
    }
    header .gnb li.arrwDrop:hover a::after {
        transform: rotate(0);
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
    }
    header .gnb li.arrwDrop .submenu {
        position: absolute;
        display: none;
        width: 174px;
    }
    header .gnb li.arrwDrop:hover .submenu {
        display: block;
    }
    header .gnb li.arrwDrop .submenu::before {
        content: url(../images/arrw-submenu.png);
        display: block;
        width: 14px;
        height: 14px;
        margin: 0 auto;
    }
    header .gnb li.arrwDrop .submenu a {
        font-size: 16px;
        text-align: center;
        font-weight: 400;
        padding: 0;
    }
    header .gnb li.arrwDrop .submenu a:hover {
        color: var(--primary-green-90);
    }
    header .gnb li.arrwDrop .submenu > p {
        background-color: #fff;
        border: 1px solid var(--primary-green-90);
        border-radius: 6px;
        padding: 15px 0;
        box-sizing: border-box;
    }

    header .searchForm_box {
        width: 480px;
        height: 48px;
        border-radius: 48px;
        overflow: hidden;
    }
    header .searchForm_box .btn_search {
        top: 8px;
        right: 16px;
        background: url(../images/ic/ic_search_g_b.svg) no-repeat 50% 50%;
    }
    header .searchForm_box input {
        font-size: 16px;
    }
    input:not([type='checkbox']):not([type='radio']) {
        padding: 0 18px;
    }
    header .fnc_menu a {
        width: auto;
        height: 54px;
        font-size: 14px;
    }
    header .btn_cart i {
        top: 2px;
        left: 57%;
        width: 18px;
        height: 18px;
        line-height: 18px;
        border: none;
    }
    header .btn_cart {
        background: url(../images/ic/ic_cart_n.svg) no-repeat 50% 20%;
    }
    header .btn_login {
        background: url(../images/ic/ic_login_n.svg) no-repeat 50% 20%;
    }
    header .btn_logout {
        background: url(../images/ic/ic_logout_n.svg) no-repeat 50% 20%;
    }
    header .btn_join {
        background: url(../images/ic/ic_join_n.svg) no-repeat 50% 20%;
    }
    header .btn_mypage {
        background: url(../images/ic/ic_my_n.svg) no-repeat 50% 20%;
    }
    header .btn_help {
        background: url(../images/ic/ic_help_n.svg) no-repeat 50% 20%;
    }
    /* 2026-08-04 장일훈 - newType_old.css에서 btn_quick/btn_seller 아이콘 스타일 복원 */
    header .btn_quick {
        background: url(../images/ic/ic_quick_n.svg) no-repeat 50% 20%;
    }
    header .btn_seller {
        background: url(../images/ic/ic_seller_n.svg) no-repeat 50% 20%;
    }
    /* 2026-08-06 장일훈 - 우선구매실적 아이콘 스타일 추가 */
    header .btn_prfmnc {
        background: url(../images/ic/ic_prfmnc_n.svg) no-repeat 50% 20%;
    }
    header .btn_menu {
        width: auto;
        height: 64px;
        font-size: 18px;
        font-weight: 700;
        line-height: 32px;
        background: url(../images/ic/menu-alt-1.svg) no-repeat left 36px center;
        padding: 0 40px 0 66px;
        border-right: 1px solid #eee;
        border-left: 1px solid #eee;
    }

    header .totalSch {
        width: 840px;
        top: 74px;
        left: 50%;
        background: none;
        border: none;
        box-shadow: none;
        margin-left: -504px;
    }
    header .totalSch .schWrap {
        width: 100%;
        min-height: 546px;
        font-size: 18px;
        font-weight: 600;
        background: #fff;
        border: 2px solid #008848;
        border-radius: 20px;
        padding: 24px;
        padding-bottom: 48px;
    }
    header .totalSch .schWrap > section {
        display: flex;
        gap: 20px;
        height: 470px;
        border-bottom: 1px solid #eee;
        padding-bottom: 14px;
    }
    header .totalSch .schWrap .close {
        font-size: 16px;
        color: #666;
        top: calc(100% - 40px);
        right: 30px;
        padding: 5px 10px;
    }
    header .totalSch .schWrap .close:before,
    .totalSch .schWrap .close::after {
        left: 100%;
        height: 12px;
    }
    header .recent {
        display: flex;
        flex-direction: column;
        width: 360px;
        border-right: 1px solid #eee;
        padding-right: 38px;
    }
    header .recent > div {
        flex: 1;
    }
    header .recent .rec-key li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url(../images/ic/icon-sch.svg) no-repeat left center;
        padding: 0 0 0 30px;
    }
    header .recent .rec-key li .del {
        font-size: 0;
        width: 18px;
        height: 18px;
        background: url(../images/ic/icon-close.svg) no-repeat center center;
    }
    header .recent .rec-key li ~ li {
        margin-top: 12px;
    }
    header .recent .rec-key li > a:hover {
        color: #008848;
        text-decoration: underline;
    }
    header .recent .tit {
        display: flex;
        align-items: center;
        height: 48px;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    header .recent .st-del button {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        color: #666;
        font-weight: 600;
        text-decoration: underline;
    }
    header .recent .st-del button::before {
        content: '';
        width: 18px;
        height: 18px;
        background: url(../images/ic/icon-close.svg) no-repeat center center;
    }
    header .keyContent {
        width: 432px;
        margin: 0;
        display: flex;
        flex-direction: column;
    }
    header .keyContent .list {
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding-bottom: 0;
        padding-right: 0;
    }
    header .keyContent .list a:hover {
        text-decoration: underline;
    }
    header .keyContent .list li:nth-child(1) span,
    header .keyContent .list li:nth-child(2) span,
    header .keyContent .list li:nth-child(3) span {
        border-radius: 50%;
    }
    .st-date {
        font-size: 14px;
        font-weight: 600;
        color: #666;
        text-align: right;
        margin-top: 10px;
    }
    /* s-탭 메뉴 스타일링 */
    input[name='s-tabs'] {
        display: none;
    }
    .s-tab-menu {
        display: flex;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
    }
    .s-tab-menu label {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 48px;
        font-size: 20px;
        text-align: center;
        background-color: #f6f6f6;

        cursor: pointer;
        transition: 0.3s;
    }
    .s-tab-menu label:first-child {
        border-right: 1px solid #ddd;
    }
    /* 3. 탭 내용 기본값: 모두 숨김 */
    .s-tab-content .s-item {
        display: none;
        padding: 20px;
        border: 1px solid #ddd;
        border-top: none;
    }
    /* 핵심 로직: 체크된 라벨 스타일 변경 */
    #s-tab1:checked ~ .s-tab-menu label[for='s-tab1'],
    #s-tab2:checked ~ .s-tab-menu label[for='s-tab2'],
    #s-tab3:checked ~ .s-tab-menu label[for='s-tab3'] {
        color: #222;
        font-weight: bold;
        background-color: #fff;
    }
    /* 핵심 로직: 체크된 라디오 버튼에 따라 해당하는 내용 노출 */
    #s-tab1:checked ~ .s-tab-content #s-content1,
    #s-tab2:checked ~ .s-tab-content #s-content2,
    #s-tab3:checked ~ .s-tab-content #s-content3 {
        display: block;
    }

    /* 상세검색창 및 신규 레이어 강제 노출 (기존 CSS 충돌 무시) */
    #hotSearch.is-open,
    #newSearchLayer.is-open {
        display: block;
        opacity: 1;
        visibility: visible;
        z-index: 9999;
    }

    /* 신규 검색 레이어 스타일 (임시) */
    #newSearchLayer {
        position: absolute;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        /*width: 880px;*/
        background: #fff;
        padding: 25px;
        box-shadow: 0 0 5px rgba(34, 34, 34, 0.2);
        border-radius: 20px;
    }
    header #newSearchLayer .searchForm_box {
        width: 840px;
    }
    header #newSearchLayer .totalSch {
        position: static;
        margin-top: 10px;
        margin-left: 0;
        display: block;
    }
    header #newSearchLayer .totalSch .schWrap {
        border: 1px solid #008848;
    }

    .link-fam {
        display: flex;
        align-items: center;
        gap: 30px;
    }
    .link-fam a {
        display: flex;
        align-items: center;
        height: 30px;
    }
    .link-fam a img {
        filter: grayscale(100%); /* 표준 브라우저) */
        -webkit-filter: grayscale(100%); /* WebKit(Chrome, Safari) 호환 */
        filter: gray; /* IE6-9(구형) 호환(필요 시) */
        opacity: 0.5;
        transition: 0.3s;
    }
    .link-fam a:hover img {
        filter: grayscale(0%); /* 표준 브라우저) */
        -webkit-filter: grayscale(0%); /* WebKit(Chrome, Safari) 호환 */
        filter: none; /* IE6-9(구형) 호환(필요 시) */
        opacity: 1;
    }
    /* 2026-08-04 장일훈 - newType_old.css에서 visual_sustValue 반응형 스타일 복원 */
    .visual_sustValue {
        width: 100%;
        margin: 0;
        text-align: center;
    }
    .visual_sustValue img {
        width: auto;
    }
}
.newType {
    * {
        box-sizing: border-box;
    }

    .dMbody {
        padding-bottom: 0;
    }
    /* 2026-08-08 장일훈 - 지속가능한가치(/event/ctncPsbltyWrth)에서 상품목록과 footer가 바로 붙어 보이던 문제 수정.
       .dMbody{padding-bottom:0}은 다른 화면과 공용이라 건드리지 않고, 이 화면 전용 클래스에만 하단 여백을 준다.
       B2G 짝(ctncPsbltyWrthB2g)은 목록 뒤에 공지사항(noticeBox)이 이어져 이미 여백이 있으므로 이 클래스를 붙이지 않는다. */
    .dMbody.footerGap {
        padding-bottom: 100px;
    }

    .b2gBannerWrap {
        height: 420px;
    }
    .link-site a .b2gBanner {
        width: 960px;
        height: 420px;
    }
    /* 2026-08-05 장일훈 - 목업처럼 배너 모서리가 라운드 처리되도록 추가 (이미지 자체에 라운드가 없는 경우 대비) */
    .b2gBanner {
        border-radius: 20px;
        overflow: hidden;
    }
    .b2gBanner .item a {
        height: 420px;
    }
    .b2gBanner .controller {
        left: 0;
        bottom: 0;
        justify-content: flex-end;
        height: 38px;
    }
    .b2gBanner .controller .slide-nums {
        height: 38px;
        line-height: 38px;
        background: none;
        padding: 0;
        margin-left: 0;
    }
    .b2gBanner .controller .slide-nums .swiper-pagination-current,
    .b2gBanner .controller .slide-nums .swiper-pagination-total {
        margin: 0;
        font-size: 16px;
    }
    .b2gBanner .controller .slide-pause,
    .b2gBanner .controller .slide-play {
        width: 38px;
        height: 38px;
        background: #999;
    }
    .b2gBanner .controller .slide-arrows {
        padding: 0;
        margin-left: 8px;
        background: #999;
    }
    .b2gBanner .controller .slide-arrows .slide-prev {
        margin-right: 0;
    }
    .b2gBanner .controller .slide-arrows button {
        width: 38px;
        height: 38px;
        background: url(../images/ic/Ic_arr-w_b.svg) no-repeat 50% 50%;
    }
    .b2gBanner .controller .slide-pause:before,
    .b2gBanner .controller .slide-pause:after {
        width: 3px;
        height: 12px;
    }
    .b2gBanner .controller .slide-pause:before {
        left: 21px;
    }
    .b2gBanner .controller .slide-pause:after {
        right: 21px;
    }
    .setCon {
        display: flex;
        align-items: center;
    }

    /* 2026-08-05 장일훈 - 로그인 후 내부 콘텐츠(set-info 등)가 고정 height(420px)를 넘어 박스 하단 밖으로 테두리가 삐져나오던 문제 수정: min-height로 변경 */
    .loginWrap {
        flex: none;
        width: 460px;
        min-height: 420px;
        padding: 30px 40px;
        border-radius: 20px;
        border: 2px solid #ddd;
        box-shadow: 0 0 4px rgba(0, 170, 90, 0.4);
        background: url(../images/bg-login-box.png) no-repeat right bottom;
    }
    .loginWrap .title {
        font-size: 24px;
        margin-top: 20px;
    }
    .loginWrap .title > img {
        margin-top: 10px;
    }
    .loginWrap .loginOpt {
        margin-top: 70px;
    }
    .loginWrap .loginOpt button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 52px;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        border-radius: 50px;
        background-color: var(--primary-green-90);
        border: 2px solid var(--primary-green-90);
        margin-bottom: 20px;
        transition: 0.3s;
    }
    .loginWrap .loginOpt button:hover {
        color: var(--primary-green-90);
        background-color: #fff;
    }
    .loginWrap .loginOpt a {
        display: inline-block;
        color: #666;
        line-height: 14px;
        padding: 0 14px;
        border-left: 1px solid #ddd;
    }
    .loginWrap .loginOpt a:first-child {
        border: none;
    }
    .loginInner .user {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .loginInner .user dt {
        width: 80px;
        height: 80px;
        background: url(../images/ic/no-img-user.png) no-repeat center center;
    }
    .loginInner .user dd {
        flex: 1;
        text-align: left;
        font-size: 18px;
    }
    .loginInner .user dd p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2px;
    }
    .loginInner .user dd p span,
    .loginInner .user dd p a {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
    }
    .loginInner .user dd p span {
        height: 28px;
        color: #fff;
        background-color: #999;
        border-radius: 30px;
        padding: 2px 12px;
    }
    .loginInner .user dd p a {
        height: 38px;
        background: #fff url(../images/ic/btn-login-b.svg) no-repeat center right 12px;
        border: 1px solid #ddd;
        border-radius: 30px;
        padding: 0 40px 0 14px;
        transition: 0.2s;
    }
    .loginInner .user dd p a:hover {
        color: #fff;
        background: #666 url(../images/ic/btn-login-w.svg) no-repeat center right 12px;
        border: 1px solid #666;
    }
    .loginInner .user dd > strong {
        font-size: 20px;
    }
    .loginInner .btn-mypage {
        display: block;
        font-size: 18px;
        text-align: center;
        color: #008848;
        font-weight: bold;
        border: 1px solid #008848;
        border-radius: 10px;
        padding: 12px;
        margin: 20px 0 10px;
    }
    .loginInner .set-info {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 14px;
        padding: 0 20px;
    }
    .loginInner .set-info .m-alert {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
    .loginInner .set-info .m-alert ~ .m-alert {
        border-top: 1px solid #eee;
    }
    .loginInner .set-info .m-alert a {
        flex: 1;
        border-right: 1px solid #eee;
    }
    .loginInner .set-info .m-alert a:last-child {
        border: none;
    }
    .loginInner .set-info .m-alert a > span {
        display: block;
        margin-bottom: 6px;
    }
    .loginInner .set-info .m-alert a > strong {
        display: inline-block;
        color: #fff;
        background-color: #00aa5a;
        border-radius: 30px;
        padding: 4px 10px;
    }

    /* 2026.08.01 장일훈 - 추천상품/지속가능한 가치 섹션 제목 위 구분선 (목업 반영) */
    /* 2026-08-05 장일훈 - b2gBannerWrap(로그인 박스) 바로 다음에 오는 경우 margin:0으로 인해 구분선이 로그인 박스에 바로 붙어 보이던 문제 수정: 상단 여백 추가 */
    .addborder {
        position: relative;
        margin: 40px auto 0;
        padding: 40px 0 61px;
    }
    .addborder::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%);
        width: 1440px;
        height: 1px;
        background-color: #e4e4e4;
    }

    /* --- 추천상품 그리드 슬라이더 필수 CSS --- */
    .grid-slider-container {
        overflow: hidden;
        position: relative;
        width: 100%;
    }
    .pasing button:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }
    /* 동적으로 생성될 페이지 래퍼용 스타일 */
    .grid-slide-page {
        flex: 0 0 100%;
        width: 100%;
        box-sizing: border-box;
    }
    #gridTrack, .gridTrack {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: transform;
    }
    .goods.col4 .itemg {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 26px;
    }
    /* 2026-08-06 장일훈 - .goods .item{width:100%}가 Swiper 슬라이더형 상품목록(.sliderJs, 예: store365 메인 "지속가능한 가치")에서
       슬라이드 하나가 부모(.itemg) 전체 폭을 차지해 상품이 1개만 보이고 관심상품 하트가 화면 우측 끝으로 밀리던 문제 수정.
       goods.col4(그리드형)에만 100%가 적용되도록 스코프 축소, 슬라이더형은 style.css의 기존 고정폭(300px)을 유지 */
    .goods.col4 .item {
        width: 100%;
    }
    .goods.col4 .item .thum {
        width: 100%;
        border: none;
        border-radius: 20px;
        margin-bottom: 14px;
    }
    .goods.col4 .item .thum img {
        width: 100%;
    }
    /* 2026-08-08 장일훈 - 추천상품(/event/rcmdtnGds) 등 col4를 쓰지 않는 상품목록에서 상품 이미지(.thum)와
       인증마크(.compset)가 붙어 보이던 문제 수정. col4 그리드는 .goods.col4 .item .thum{margin-bottom:14px}으로
       이미 간격이 있으나 .goods(단독)에는 해당 규칙이 없어, 인증마크가 뒤따르는 경우에만 동일한 간격을 준다.
       :not(.col4)로 제외해 이미 간격이 있는 col4 목록(/main, ctncPsbltyWrthZoneB2g)에 간격이 중복되지 않게 하고,
       인접 형제 선택자로 한정해 인증마크가 없는 카드/슬라이더형(.sliderJs) 등의 레이아웃에는 영향이 없다.
       2026-08-08 장일훈 - col4 기준값(14px)으로는 이미지 박스와 인증목록이 여전히 붙어 보여 15px로 상향 */
    .goods:not(.col4) .item .thum + .compset {
        margin-top: 15px;
    }
    .compset {
        display: flex;
        gap: 10px;
        color: #666;
        font-size: 14px;
    }
    .compset > div {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }
    /* 2026.08.01 장일훈 - 인증마크 원본 이미지가 최대 150x150이라 크기 고정 없이는 과대 출력되는 문제 수정 */
    .compset u {
        display: inline-flex;
        width: 16px;
        height: 16px;
    }
    .compset u img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .m-pasing {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }
    .m-pasing > button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 6px;
        transition: 0.3s;
    }
    .m-pasing > button > img {
        filter: brightness(0);
        transition: 0.3s;
    }
    .m-pasing > button.right > img {
        transform: rotate(180deg);
    }
    .m-pasing > button:hover > img {
        filter: brightness(1);
    }
    .m-pasing > button:hover {
        border: 1px solid #00aa5a;
    }
    .m-pasing > p {
        display: flex;
        align-items: center;
        padding: 0 40px;
    }
    .m-pasing > p > a {
        color: #666;
    }
    .m-pasing > p > a.active {
        color: #222;
        font-weight: bold;
        font-size: 20px;
        margin-right: 5px;
    }

    .paging {
        margin-top: 60px;
    }
    .paging li a {
        color: #666;
    }
    .paging li strong {
        min-width: 24px;
        line-height: 24px;
        color: #fff;
        background-color: #008848;
        border-radius: 4px;
    }
    .paging li strong a:before,
    .paging li strong:before {
        display: none;
    }

    .goods .item .btn_wish {
        position: absolute;
        top: 264px;
        right: 8px !important;
        width: 28px;
        height: 28px;
        background: url(../images/icon-like-off.png) no-repeat 50% 50%;
    }
    .goods .item .btn_wish.active {
        background: url(../images/icon-like-on.png) no-repeat 50% 50%;
    }
    /* 2026-08-06 장일훈 - 순위 표시(.rank, <a> 안)가 있는 카드는 .thum이 약 46px 아래로 밀리는데, .btn_wish는
       <a> 밖의 .item 직계 자식이라 .rank와 형제가 아니므로 ~ 대신 :has로 .item을 스코프. 하트가 이미지
       하단보다 위에 떠 보이던 문제 수정 */
    .goods .item:has(.rank) .btn_wish {
        top: 310px;
    }
    /* 2026-08-06 장일훈 - .newType .goods .item .btn_wish{top:264px}가 특이도상 style.css의
       .goodList_box .goods .item .btn_wish{top:202px}(썸네일 270x238 기준)보다 항상 이겨
       미니홈(includeSclentIntrGdsLst.jsp) 등 .goodList_box 안 카드에서 하트가 이미지 밖으로 밀리던 문제 수정 */
    .goodList_box .goods .item .btn_wish {
        top: 202px;
    }
    /* 2026-08-06 장일훈 - .goodList_box 안에 .rank(순위, 예: b2bBstGdsZone.jsp 전체목록)까지 있는 카드는
       썸네일(238px)이 .rank만큼(약 46px) 더 밀리므로, 위 202px에 46px를 더해 이미지 하단에 맞춤 */
    .goodList_box .goods .item:has(.rank) .btn_wish {
        top: 248px;
    }
    /* 2026-08-08 장일훈 - 지속가능한가치(/event/ctncPsbltyWrth) 등 col4 그리드 카드의 관심상품 하트를
       썸네일 이미지 안쪽 우하단에 배치. .btn_wish는 .thum 밖(.item 직계)이라 .thum의 overflow:hidden에
       잘리지 않으며, .thum(height:300px) + margin-bottom:14px 이후 콘텐츠가 이어지므로
       .item 하단 기준으로 (전체높이 - 썸네일하단)만큼 띄우고 8px 안쪽으로 들여 이미지 위에 겹치도록 한다. */
    .goods.col4 .item .btn_wish {
        top: 258px;
        bottom: auto;
    }

    .btn_more {
        padding-right: 20px;
        text-decoration: none !important;
    }
    .btn_more::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: url(../images/ic/ic-plus-more.svg) no-repeat 50% 50%;
        transition: 0.3s;
    }
    .btn_more:hover {
        text-decoration: underline !important;
    }
    .btn_more:hover::after {
        transform: rotate(90deg);
    }

    .btn_plus {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        height: 28px;
        border: 1px solid #ddd;
        border-radius: 20px;
        padding: 0 12px;
        margin-left: 5px;
    }
    .btn_plus::after {
        content: '+';
    }
    /* 2026.07.31 장일훈 - 수량 조절 + 버튼(.numsComponent .plus)도 클래스명이 우연히 btn_plus라
       위 "기업정보 더보기" 링크용 .btn_plus 스타일(font-size:14px)에 텍스트가 다시 보이는 문제가 있어 예외 처리 */
    .numsComponent .btn_plus,
    .numsComponent1 .btn_plus {
        display: inline-block;
        width: 22px;
        height: 22px;
        font-size: 0;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin-left: 0;
    }
    .numsComponent .btn_plus::after,
    .numsComponent1 .btn_plus::after {
        content: none;
    }

    .brandstory {
        position: relative;
        width: 100%;
        text-align: center;
        padding: 80px 0;
    }
    .brandstory::before,
    .brandstory::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 1440px;
        height: 1px;
        background-color: #e4e4e4;
    }
    .brandstory::before {
        top: 0;
    }
    .brandstory::after {
        bottom: 0;
    }
    .brandstory .titg {
        width: 1440px;
        text-align: left;
        margin: 0 auto;
    }
    .brandstory .titg h2 > p {
        font-size: 20px;
        color: #666;
        font-weight: 400;
        margin-top: 10px;
        margin-bottom: 40px;
    }
    .brandstory .titg .btn_more {
        top: 100%;
        transform: translateY(-100%);
    }
    /* 캐러셀 컨테이너 */

    /* 2026-08-08 장일훈 - 가치장터 메인 최하단 콘텐츠와 footer가 붙어 보여 목업처럼 여백 추가.
       .dMbody{padding-bottom:0}은 store365 등 다른 화면과 공용이라 건드리지 않고,
       가치장터 메인에만 있는 마지막 섹션(.multiWrap)에 하단 여백을 준다 */
    .multiWrap {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
        margin-bottom: 100px;
    }
    .multiWrap > div h3 {
        font-size: 28px;
        font-weight: 700;
    }
    .multiWrap > div > h3 {
        padding-bottom: 18px;
    }
    .multiWrap > div.notice {
        width: 470px;
    }

    /* 1. 실제 라디오 버튼은 화면에서 숨김. */
    input[name='tabs'] {
        display: none;
    }
    /* 2. 탭 메뉴 스타일링 */
    .tab-menu {
        position: relative;
        display: flex;
        gap: 20px;
        border-bottom: 2px solid var(--primary-green-90);
    }
    .addMore {
        position: absolute;
        top: 10px;
        right: 0;
    }
    .tab-menu label {
        cursor: pointer;
        color: #ddd;
        font-weight: bold;
        padding: 0 0 20px 0;
        transition: 0.3s;
    }
    .tab-menu label:hover {
        color: #222;
    }
    /* 3. 탭 내용 기본값: 모두 숨김 */
    .tab-content .item {
        display: none;
        padding: 20px 0;
        border-top: none;
    }
    /* 체크된 라벨 스타일 변경 */
    #tab1:checked ~ .tab-menu label[for='tab1'],
    #tab2:checked ~ .tab-menu label[for='tab2'] {
        color: #222;
    }
    /* 체크된 라디오 버튼에 따라 해당하는 내용 노출 */
    #tab1:checked ~ .tab-content #content1,
    #tab2:checked ~ .tab-content #content2 {
        display: block;
        /* 2026-07-25 장일훈: 목업 반영 */
        min-height: 214px;
    }
    .board_list2 {
        border-top: none;
        padding-top: 0;
    }
    .board_list2 a {
        font-size: 18px;
        max-width: calc(100% - 10px);
        transition: 0.3s;
    }
    .board_list2 a:hover {
        color: #00aa5a;
    }
    .board_list2 .ic_notice {
        width: 24px;
        height: 24px;
        text-align: center;
        font-size: 14px;
        line-height: 24px;
        color: var(--neutral-white-100);
        font-weight: 600;
        border-radius: 20px;
        background: #00aa5a;
        padding: 0;
        margin-right: 8px;
    }

    .multiWrap > div.guide {
        width: 530px;
    }
    .multiWrap > div.guide .guide-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .multiWrap > div.guide .guide-inner > p {
        width: 260px;
        margin-bottom: 10px;
    }
    .multiWrap > div.guide .guide-inner > p > a {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        width: 100%;
        height: 90px;
        background-color: #f6f6f6;
        border: 2px solid #f6f6f6;
        border-radius: 12px;
        padding-left: 10px;
        box-sizing: border-box;
        transition: 0.3s;
    }
    .multiWrap > div.guide .guide-inner > p > a:hover {
        color: #008848;
        font-weight: 700;
        border: 2px solid #00aa5a;
    }

    .multiWrap > div.helper {
        width: 340px;
    }
    .multiWrap > div.helper p > strong {
        font-size: 42px;
        font-weight: 800 !important;
    }
    .multiWrap > div.helper .timeinfo {
        color: #666;
        line-height: 150%;
        padding: 10px 0 20px;
    }
    .multiWrap > div.helper .helper-links {
        display: flex;
        gap: 8px;
    }
    .multiWrap > div.helper .helper-links a {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        height: 48px;
        font-weight: bold;
        border: 1px solid #ddd;
        border-radius: 50px;
        transition: 0.3s;
    }
    .multiWrap > div.helper .helper-links a:hover {
        color: #00aa5a;
        border: 1px solid #00aa5a;
    }

    /* --- 캐러셀 코어 스타일 --- */
    #brandStoryCarousel {
        position: relative !important;
        width: 100% !important;
        min-height: 520px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #brandStoryCarousel * {
        box-sizing: border-box !important;
    }

    #brandStoryCarousel .carousel-track {
        display: flex !important;
        align-items: center !important;
        gap: var(--card-gap) !important;
        width: max-content !important;
        will-change: transform;
        margin: 0 !important;
        padding: 0 !important;
    }

    #brandStoryCarousel .carousel-card {
        flex: 0 0 var(--card-width) !important;
        width: var(--card-width) !important;
        min-height: var(--card-height) !important;
        display: flex !important;
        flex-direction: column !important;
        background: #fff !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        transform: scale(1) !important;
        opacity: var(--inactive-opacity) !important;
        cursor: pointer !important;
        border: 1px solid transparent !important;
        transition:
            transform var(--transition-speed) ease,
            opacity var(--transition-speed) ease,
            box-shadow var(--transition-speed) ease !important;
        padding: 30px;
    }

    /* 상단 이미지 영역 */
    #brandStoryCarousel .card-image-wrap {
        width: 100% !important;
        height: var(--img-height) !important; /* 이미지 높이 절대 고정 */
        flex-shrink: 0 !important;
        border-radius: 16px !important;
        background: #f4f4f4 !important;
        overflow: hidden !important;
    }

    #brandStoryCarousel .main-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 하단 텍스트 영역 (남은 높호를 모두 차지) */
    #brandStoryCarousel .text-area-wrap {
        position: relative !important;
        width: 100% !important;
        flex-grow: 1 !important;
        background: transparent !important;
    }

    /* 비활성 텍스트 (가운데 정렬) */
    #brandStoryCarousel .inactive-title {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 20px !important;
        color: var(--text-gray) !important;
        padding: 0 10px !important;
        margin: 0 !important;
        opacity: 1;
        visibility: visible;
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }

    /* 활성 텍스트 (좌측 정렬, 숨김 상태) */
    #brandStoryCarousel .active-content {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        /*height: 100% !important;*/
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /*padding: 0 16px !important;*/
        margin: 0 !important;
        opacity: 0; /* 기본 숨김 */
        visibility: hidden;
        transition:
            opacity 0.3s ease,
            visibility 0.3s ease !important;
    }

    /* 활성화된 카드(정중앙) 스타일 덮어쓰기 */
    #brandStoryCarousel .carousel-card.is-active {
        /*transform: scale(var(--active-scale));*/
        opacity: 1 !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        margin: 0 20px;
        z-index: 10 !important;
    }

    /* 활성화 시 비활성 텍스트 숨김 */
    #brandStoryCarousel .carousel-card.is-active .inactive-title {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* 활성화 시 상세 텍스트 노출 */
    #brandStoryCarousel .carousel-card.is-active .active-content {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 텍스트 내부 디테일 */
    #brandStoryCarousel .company-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        height: 48px !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
    }

    #brandStoryCarousel .company-logo {
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background: var(--primary-color) !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }

    #brandStoryCarousel .company-name {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: var(--text-dark) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        word-break: keep-all !important;
    }

    #brandStoryCarousel .description {
        font-size: 18px !important;
        text-align: left;
        line-height: 1.4 !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 좌우 네비게이션 버튼 */
    #brandStoryCarousel .nav-btn {
        position: absolute !important;
        /*top: 240px !important;*/
        transform: translateY(-50%) !important;
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 1px solid #ddd !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
        z-index: 20 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s !important;
        padding: 0 !important;
    }

    #brandStoryCarousel .nav-btn:hover {
        border-color: var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    #brandStoryCarousel .nav-btn.prev {
        left: 50%;
        margin-left: -230px;
    }
    #brandStoryCarousel .nav-btn.next {
        right: 50%;
        margin-right: -270px;
    }
    /*
    #brandStoryCarousel .nav-btn svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
    }
*/
    /* 무한 루프 점프 시 깜박임 방지 */
    #brandStoryCarousel.is-jumping .carousel-track,
    #brandStoryCarousel.is-jumping .carousel-card {
        transition: none !important;
    }

    /*** Sub ***/
    .dBody {
        background-color: #fff;
        padding-top: 170px;
    }
    .dBody.mypageWrap {
        background-color: #f6f6f6;
    }
    .mypage .goodList_box {
        background-color: #effaf5;
        border-radius: 12px;
        padding: 24px 30px;
    }
    .mypage .goodList_box::before {
        content: '알아두세요!';
        display: block;
        height: 24px;
        font-size: 18px;
        font-weight: bold;
        background: url(../images/ic/ic_refer-green.svg) no-repeat left center;
        padding-left: 28px;
        margin-bottom: 8px;
    }
    .mypage .goodList_box .mgt10 {
        margin-top: 5px !important;
    }
    .txt_tbl {
        font-size: 16px;
        font-weight: 600;
        background: url(../images/ic/ic_refer.svg) no-repeat left top 9px;
        padding-left: 14px;
        margin-bottom: 6px;
    }
    .infoList > li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        padding-top: 10px;
    }
    .infoList > li::before {
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #222;
    }
    .infoNum {
        width: 100%;
    }
    .infoNum li {
        margin-top: 4px;
        padding-left: 8px;
    }
    .secTit {
        margin-top: 22px;
    }
    /* 2026-08-11 장일훈 - 출력수 드롭다운 테두리 디자인을 .mypage 스코프에서 해제.
       마이페이지 계열이 아닌 화면(oneStopInfo/prchsCtrtTrgt 등)에서는 테두리가 없어
       화면마다 모양이 달랐다. .secTit 안의 출력수는 어디서든 동일하게 보이도록 한다. */
    .secTit .sorting {
        top: -4px;
        line-height: 32px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 0 9px;
    }
    .secTit .sorting .selected:after {
        top: 11px;
    }
    .mypage .secTit .btn {
        border-radius: 6px;
    }
    /* 2026-08-11 장일훈 - 고정 오프셋(right:125px)은 출력수 드롭다운 폭이 늘면("100개") 버튼과 겹친다.
       style.css에서 .secTit:has(.sorting + .btng)를 flex로 배치하도록 바꿨으므로,
       여기서는 위치 지정을 하지 않고 세로 정렬만 맞춘다. */
    .mypage .secTit .sorting + .btng {
        margin-right: 3px;
    }
    /* 2026-08-11 장일훈 - 펼쳐지는 목록 정렬도 .mypage 스코프 해제(위 테두리와 동일 맥락) */
    .secTit .sorting .option {
        right: 0;
    }
    .tit_coount {
        font-size: 18px;
    }
    .tit_coount strong {
        font-size: 20px;
        font-weight: bold;
        color: #008848;
    }
    .mgtTitle {
        margin-top: 50px;
    }
    .ing_order2 {
        gap: 40px;
        border: none;
        padding: 6px 0 0 0;
    }
    .ing_order2 li {
        color: #008848;
        border: 1px solid #ddd;
        border-radius: 50px;
    }
    /* 2026-08-07 장일훈 - 위 .ing_order2 li{color:#008848}가 style.css(1490~1491줄)의 .done/.active 색상보다
       나중에 평가되어(newType.css가 style.css 뒤에 로드) 진행중 단계의 흰 글씨를 초록으로 덮어써
       진초록 배경 위에 초록 글씨가 되어 글자가 보이지 않던 문제 수정.
       done(지나온 단계) = 연초록 배경 + 초록 글씨, active(현재 단계) = 진초록 배경 + 흰 글씨 */
    .ing_order2 li.done {
        color: var(--primary-green-90);
        background: var(--primary-green-30);
        border: 1px solid var(--primary-green-80);
    }
    .ing_order2 li.active {
        color: var(--neutral-white-100);
        background: var(--primary-green-90);
        border: 1px solid var(--primary-green-90);
    }
    .ing_order2 li ~ li:before {
        left: -32px;
        width: 24px;
        height: 24px;
        background: url(../images/ic/ic_pgArr_line.svg) no-repeat 50% 50%;
    }

    /* goods */
    .btn_select_box {
        position: absolute;
        top: -90px;
        left: -2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 90px;
        border: 2px solid #008848;
        border-bottom: 1px solid #ddd;
        border-radius: 12px 12px 0 0;
        background: #fff;
        padding: 0 20px;
    }
    .sm_thum_info {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 20px;
        font-weight: 800;
    }
    .sm_thum_info dt {
        width: 60px;
        height: 60px;
        overflow: hidden;
    }
    .sm_thum_info .price {
        color: #612888;
    }
    .g-title .sm_thum_info {
        font-size: 18px;
        font-weight: 600;
    }
    .fixed_select {
        width: 1440px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 2px solid #008848;
        border-right: 2px solid #008848;
    }
    .fixed_select .btn_select {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 240px;
        height: 54px;
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        color: var(--neutral-white-100);
        border-radius: 10px;
        background: var(--primary-green-90);
        padding: 0 20px;
    }
    .fixed_select .btn_select:after {
        top: 0;
    }
    .fixed_select[aria-expanded='true'] .btn_select {
        background-color: #999;
    }
    .fixed_select .in {
        width: calc(100% - 12px);
        padding: 0 0 30px 0;
        max-height: 320px;
        overflow-y: auto;
    }
    .goods_detail {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 4px);
        padding: 30px 0 0 0;
    }
    .goods_detail > div {
        flex: 1;
        border-right: 1px solid #ddd;
        padding: 0 40px;
    }
    .goods_detail > div:last-child {
        border-right: none;
    }
    .goods_detail .gbox {
        display: flex;
        gap: 10px;
        font-size: 16px;
        color: #666;
        line-height: 130%;
        background-color: #f6f6f6;
        border-radius: 12px;
        padding: 14px;
        margin-top: 20px;
    }
    .goods_detail .gbox dt {
        color: #222;
    }
    .good_detail .detail .biz {
        display: flex;
        justify-content: space-between;
    }
    .good_detail .detail .biz .code {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        font-size: 14px;
        color: #666;
        background-color: #f6f6f6;
        border-radius: 20px;
        padding: 0 12px;
    }
    .good_detail .detail .biz .code strong {
        font-weight: 500 !important;
    }
    .good_detail .detail .titg .wish {
        display: flex;
        align-items: center;
    }
    .good_detail .detail .titg .wish span {
        font-size: 22px;
        color: #222;
    }
    .good_detail .detail .titg .btn_wish {
        width: 34px;
        height: 34px;
        background-size: auto;
    }
    .good_detail .goodList_box {
        background: #e5f6ee;
        border-radius: 12px;
        padding: 20px;
    }
    .good_detail .goodList_box .txt_tbl2 li {
        padding-left: 0;
    }
    .good_detail .goodList_box .txt_tbl2 li strong {
        display: inline-block;
        color: #008848;
        margin-right: 10px;
    }
    .good_detail .goodList_box .txt_tbl2 li::before {
        display: none;
    }
    .tabs2 {
        /* 2026-07-25 장일훈: 목업 반영 (height:180px -> margin:0 0 40px 0) */
        margin: 0 0 40px 0;
    }
    .tabs2 > div {
        height: 68px;
        border-radius: 10px;
        padding: 6px;
        background: #eeee;
    }
    .tabs2 a {
        font-size: 18px;
        background: #eee;
        border-bottom: none;
        height: 100%;
        width: auto;
        flex: 1;
    }
    .tabs2 .current {
        color: #008848;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    }
    .btn_rec {
        border-radius: 10px;
        font-size: 18px;
    }
    .btn_rec:before {
        width: 20px;
        height: 20px;
        margin-right: 2px;
    }
    .btn_rec span {
        font-size: 18px;
    }
    .btn.fnc03 {
        color: #008848;
        border-radius: 6px;
        border-color: #008848;
    }
    .btn.siz_xs {
        height: 34px;
        padding: 0 14px;
    }

    .g-choice {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .g-choice .count {
        display: flex;
        gap: 40px;
        align-items: center;
    }
    .g-choice .count dt {
        font-size: 18px;
        color: #222;
        font-weight: 600;
    }

    .total-result dl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
    }
    .total-result dl dd {
        font-size: 28px;
        font-weight: bold;
        color: #612888;
    }
    .set-btns {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 30px;
    }
    .set-btns > div {
        display: flex;
        gap: 8px;
    }
    .set-btns button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 58px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background-color: #008848;
        border-radius: 10px;
        transition: 0.3s;
    }
    .set-btns button:hover {
        background-color: #00aa5a;
    }
    .set-btns .cart {
        width: 140px;
        flex: none;
        color: #008848;
        background-color: #fff;
        border: 1px solid #008848;
        padding: 1px;
        transition: 0.1s;
    }
    .set-btns .cart:hover {
        border: 2px solid #008848;
        background-color: #fff;
        padding: 0;
    }
    .set-btns .cart::before {
        content: '';
        width: 26px;
        height: 26px;
        background: url(../images/cart.png) no-repeat center center;
        margin-right: 6px;
    }
    /* 2026-08-04 장일훈 - 선물하기 버튼을 장바구니와 동일한 테두리형 스타일로 변경 */
    .set-btns .gift-outline {
        width: 140px;
        flex: none;
        color: #008848;
        background-color: #fff;
        border: 1px solid #008848;
        padding: 1px;
        transition: 0.1s;
    }
    .set-btns .gift-outline:hover {
        border: 2px solid #008848;
        background-color: #fff;
        padding: 0;
    }
    /* 2026-08-04 장일훈 - 장바구니 아이콘(cart.png)과 동일 톤/굵기로 제작한 선물하기 아이콘 */
    .set-btns .gift-outline::before {
        content: '';
        width: 26px;
        height: 26px;
        background: url(../images/gift.svg) no-repeat center center;
        margin-right: 6px;
    }
    /* 2026-08-04 장일훈 - .btn{width:100%}이 .set-btns 내부에서 flex-basis를 강제해 예약하기/견적요청 버튼이 좁게 눌리는 문제 수정 */
    .set-btns .btn {
        flex: 1;
        width: auto;
    }
    .fixed_select .quantity {
        background: none;
        padding: 0;
        margin-top: 0;
        margin-bottom: 14px;
        overflow-y: visible;
    }
    .fixed_select .quantity .btn_close {
        top: 12px;
        right: 12px;
    }
    .fixed_select .quantity .tit {
        display: flex;
        width: 100%;
        color: #222;
        padding-right: 20px;
    }
    .fixed_select .quantity .tit span {
        padding-right: 8px;
    }
    .fixed_select .quantity .tit span ~ span {
        border-left: 1px solid #ddd;
        padding: 0 8px;
    }
    .fixed_select .quantity .item {
        flex-direction: column;
        background-color: #f6f6f6;
        border-radius: 12px;
        padding: 14px;
    }
    .fixed_select .quantity .item ~ .item {
        border: none;
        margin-top: 14px;
    }
    .fixed_select .quantity .item > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .fixed_select .quantity .resualt,
    .fixed_select .quantity .resualt span {
        font-size: 20px;
        color: #222;
        font-weight: bold;
    }
    .inboxFlex {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .inboxFlex > span {
        width: 24px;
        text-align: center;
    }

    .numsComponent,
    .numsComponent1 {
        position: relative;
        width: 130px;
        padding: 7px 0;
        margin-top: 0;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
    }
    input:not([type='checkbox']):not([type='radio']) {
        /* 2026-07-25 장일훈: 목업 반영 (border:none 제거) */
        font-size: 18px;
        font-weight: 500;
    }

    .multiSelectbox .selected {
        height: 48px;
        font-size: 18px;
        border-radius: 6px;
    }
    .goods_detail .multiSelectbox ~ .multiSelectbox {
        margin-top: 0;
    }
    .good_detail .quantity {
        background: none;
        padding: 0;
    }
    .good_detail .quantity .item {
        background-color: #f6f6f6;
        border-radius: 12px;
        padding: 20px;
    }
    .good_detail .quantity .item ~ .item {
        border-top: none;
        margin-top: 10px;
    }
    .good_detail .quantity .tit {
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 18px;
        margin-bottom: 14px;
    }
    .good_detail .quantity .item .tit span {
        display: inline-block;
        color: #222;
        line-height: 18px;
        margin-left: 0;
    }
    .good_detail .quantity .tit span ~ span {
        border-left: 1px solid #ddd;
        padding-left: 10px;
    }
    .good_detail .quantity .resualt {
        font-size: 24px;
        bottom: 24px;
        right: 20px;
    }
    .good_detail .quantity .btn_close {
        top: 20px;
        right: 20px;
    }
    .good_detail .total {
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        border-top: 0;
        margin-top: 30px;
        padding-top: 0;
    }
    .good_detail .total strong {
        font-size: 32px;
        font-weight: bold;
        color: #612888;
    }
    .goods .item .price {
        font-weight: 500;
        /* 2026-07-25 장일훈: 목업 반영 */
        margin-top: 0;
    }
    .goods .item .price span {
        font-size: 26px;
        font-weight: 900;
        color: #222;
    }
    /* 2026-07-25 장일훈: 목업 반영 */
    .goods .item .tit {
        margin-bottom: 8px;
    }

    /* 드롭다운 컨테이너 기준점 설정 */
    .dropdown-wrapper {
        position: relative;
        display: inline-block;
        z-index: 100;
    }
    .dropdown-trigger {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        padding: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
    }
    .dropdown-trigger:hover {
        background-color: #f8f9fa;
    }
    .dropdown-trigger::after {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: url(../images/ic/Ic-drop-arrow.svg) no-repeat center center;
        transition: transform 0.3s ease;
    }
    .dropdown-trigger.active::after {
        transform: rotate(180deg);
    }
    .dropdown-layer {
        position: absolute;
        bottom: calc(100% + 2px); /* 버튼 바로 아래 위치 */
        right: 0;
        min-width: 220px;
        background: #ffffff;
        border: 1px solid #2d8a4e;
        border-radius: 6px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        opacity: 0;
        visibility: hidden;
        /*transform: translateY(-10px);*/
        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
        z-index: 100;
    }
    .dropdown-layer.show {
        opacity: 1;
        visibility: visible;
        /*transform: translateY(0);*/
    }
    .dropdown-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px;
        padding-bottom: 8px;
    }
    .dropdown-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #333;
    }
    .dropdown-close {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: #333;
        display: flex;
    }
    .dropdown-list {
        list-style: none;
        margin: 0;
        padding: 0 14px 14px 14px;
    }
    .dropdown-list li {
        display: flex;
        align-items: center;
        padding: 3px 0;
        font-size: 14px;
        color: #666;
    }
    .dropdown-list li:last-child {
        border-bottom: none;
    }
    .list-icon {
        height: 24px;
        margin-right: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }

    /* MyPage */
    .gridG .aside.is-stuck {
        /* transition: box-shadow 0.3s ease; */
        /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */
    }
    .dBody .gridG .aside {
        align-self: start;
        background-color: #fff;
        border-radius: 12px;
        padding: 12px 20px 20px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
    }
    .dBody .gridG .aside .tit {
        border-bottom: 1px solid #ddd;
        padding: 12px 0 16px;
        margin-bottom: 10px;
    }
    .dBody .gridG .lnb > li {
        padding-bottom: 10px;
    }
    .dBody .gridG .lnb > li.on {
        color: #008848;
    }
    .dBody .gridG .lnb button,
    .dBody .gridG .lnb > li > a {
        display: flex;
        align-items: center;
        gap: 4px;
        height: 40px;
        border-bottom: none;
        padding-left: 0;
    }
    .dBody .gridG .lnb button:after {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        background: url(../images/ic/ic_arr4.svg) no-repeat 50% 50%;
    }
    .dBody .gridG .lnb.noDepth button:after {
        display: none;
    }
    .dBody .gridG .lnb button img {
        filter: brightness(0);
    }
    .dBody .gridG .lnb li.on button img {
        filter: brightness(1);
    }
    .dBody .gridG .lnb .current a {
        background-color: #f6f6f6;
        border-radius: 6px;
    }

    .dBody .gridG .lnb ul a {
        padding: 8px 0 8px 28px;
    }

    .dBody .gridG .contents .h1Loca_box {
        height: 60px;
        margin-bottom: 0;
    }
    .dBody .gridG .contents .h1Loca_box h1 {
        font-size: 26px;
    }
    .dBody .gridG .contents .h1Loca_box .loca {
        bottom: 34px;
    }

    /* 2026-08-05 장일훈 - .bullet .tit가 섹션 제목(h2.tit)뿐 아니라 상품 카드 안의 p.tit(상품명)에도 적용되어
       초록 원형 불릿과 24px 큰 폰트가 잘못 나오던 문제 수정: 셀렉터를 .secTit .tit로 좁힘 */
    .bullet .secTit .tit {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 24px;
    }
    .bullet .secTit .tit::before {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 5px solid #008848;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .my_profile {
        display: flex;
        align-items: center;
        font-size: 18px;
        background-color: #fff;
        padding: 30px;
    }
    .my_profile > dl {
        display: flex;
        align-items: center;
        gap: 20px;
        width: 430px;
        border-right: 1px solid #eee;
    }
    .my_profile > dl > dt {
        position: relative;
        width: 80px;
        height: 80px;
    }
    .my_profile > dl > dt .mi-bn-edit {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 34px;
        height: 34px;
        font-size: 0;
        background: #fff url(../images/ic/mi-bn-edit.svg) no-repeat center center;
        border-radius: 50%;
        border: 1px solid #ddd;
    }
    .my_profile > dl > dd {
        color: #666;
    }
    .my_profile > dl > dd .name {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #222;
        margin-top: 10px;
    }
    .my_profile > dl > dd strong {
        font-size: 24px;
        font-weight: bold;
    }
    .my_profile > dl > dd span {
        display: inline-block;
        background-color: #999;
        border-radius: 20px;
        color: #fff;
        padding: 2px 10px;
    }
    .my_profile > ul {
        flex: 1;
        display: flex;
        padding-left: 30px;
    }
    .my_profile > ul > li {
        flex: 1;
        text-align: center;
    }
    .my_profile > ul > li .count {
        color: #008848;
        margin-top: 4px;
    }
    .my_profile > ul > li .count a {
        font-size: 28px;
        font-weight: bold;
    }
    .task {
        background-color: #fff;
        padding: 30px;
    }
    .task-list {
        display: flex;
        width: 100%;
        height: 68px;
        font-size: 18px;
        border: 1px solid #eee;
        border-radius: 14px;
        margin-bottom: 14px;
        overflow: hidden;
    }
    .task-list:last-child {
        margin-bottom: 0;
    }
    .task-list dt,
    .task-list dd {
        width: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .task-list dt {
        font-weight: bold;
        background-color: #f6f6f6;
    }
    .task-list dd p {
        display: flex;
        justify-content: space-between;
        width: 100%;
        text-align: center;
        border-right: 1px solid #eee;
        padding: 0 25px;
    }
    .task-list dd:last-child p {
        border: none;
    }
    .task-list dd p a {
        display: inline-block;
        color: #008848;
        font-weight: bold;
        line-height: 28px;
        border-radius: 30px;
        background-color: #f6f6f6;
        padding: 0 10px;
        margin-left: 6px;
    }
    .est-list th,
    .est-list td {
        font-size: 16px;
        padding: 20px 12px;
    }
    .est-list th {
        font-weight: bold;
        border-right: 1px solid #fff;
        background-color: #f6f6f6;
    }
    .est-list th:first-child {
        border-radius: 10px 0 0 10px;
    }
    .est-list th:last-child {
        border-right: none;
        border-radius: 0 10px 10px 0;
    }
    .est-list td {
        text-align: center;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
    }
    .est-list td:last-child {
        border-right: none;
    }
    .est-list td.eststat span {
        color: #999;
        font-weight: bold;
    }
    .est-list td.eststat span.on {
        color: #008848;
    }
    .est-list .est-vs {
        display: inline-flex;
        align-items: center;
        font-weight: bold;
        color: #008848;
        border: 1px solid #008848;
        border-radius: 30px;
        padding: 5px 8px 5px 10px;
    }
    .est-list .est-vs span {
        display: inline-block;
        color: #fff;
        background-color: #008848;
        border-radius: 30px;
        padding: 2px 8px;
        margin-left: 4px;
    }

    .ship-list {
        display: flex;
        gap: 17px;
    }
    .ship-list > li {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 204px;
    }
    .ship-list .state {
        color: #666;
    }
    .ship-list .state strong {
        font-size: 18px;
        color: #222;
    }
    .ship-list .imgArea {
        height: 180px;
        border-radius: 12px;
        overflow: hidden;
        background-color: #ccc;
    }
    .ship-list .imgArea img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ship-list .detail-info,
    .ship-list .detail-test {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        border-radius: 6px;
    }
    .ship-list .detail-info {
        color: #666;
        border: 1px solid #ddd;
    }
    .ship-list .detail-test {
        color: #008848;
        border: 1px solid #008848;
    }

    .recent-list {
        display: flex;
        gap: 17px;
    }
    .recent-list > li {
        width: 204px;
    }
    .recent-list .imgArea {
        height: 180px;
        border-radius: 12px;
        overflow: hidden;
        background-color: #ccc;
    }
    .recent-list .imgArea img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .recent-list .corp {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 14px;
        margin: 10px 0;
    }
    .recent-list .corp > img {
        height: 24px;
    }
    /* 2026-07-25 장일훈: 목업 반영 (.recent-list .price{margin-top:10px} -> 아래 블록들로 교체) */
    .recent-list .tit {
        margin-bottom: 4px;
        height: 40px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .recent-list .cost,
    .item .cost {
        color: #999;
        font-size: 12px;
        text-decoration: line-through;
    }
    .recent-list .price .sale,
    .goods .item .price .sale {
        font-weight: 700;
        color: #eb003b;
        margin-top: 4px;
    }
    .recent-list .price strong,
    .recent-list .price .sale {
        font-size: 20px;
    }

    .boxSdw h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .boxSdw h3 p {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .boxSdw h3 span {
        font-size: 16px;
        font-weight: 500;
        color: #666;
    }
    .boxSdw {
        border-radius: 12px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    }

    .sample-title {
        font-size: 26px;
        font-weight: bold;
        margin: 30px 0 20px 0;
    }

    .dBody .gridG > .contents {
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.06);
        padding: 30px;
    }
    .dBody .gridG > .contents.m_page_wrap {
        background: none;
        box-shadow: none;
        padding: 0;
        margin-top: 10px;
    }
    /* 2026-08-05 장일훈 - 이 규칙이 미디어쿼리 밖 전역 스코프에 있어 style.css의 .h1Loca_box padding-top(24px)을
       CSS 로드순서(newType.css가 style.css 끝에서 @import되어 나중 평가)로 4px로 덮어써 지속가능한가치 등에서
       gnb와 타이틀 사이 간격이 목업보다 좁아지던 문제 수정. 목업(mokup/resources/css/layout.css) 기준 24px로 통일 */
    .h1Loca_box {
        padding-top: 24px;
    }

    /** select custom **/
    .schBox {
        background: #eee;
        border-radius: 12px;
        padding-bottom: 20px !important;
    }
    /* 2026-08-04 장일훈 - detail_tbl의 overflow:hidden이 우선구매대상 커스텀 셀렉트박스 옵션을 잘라내던 문제 수정 */
    .schBox .detail_tbl {
        overflow: visible;
    }
    .date_search {
        flex-wrap: wrap;
        gap: 14px;
        background: none;
        padding: 20px;
    }
    .date_search input[type='text'] {
        border-radius: 10px;
        border: 1px solid #ddd;
    }
    .date_search input::placeholder {
        font-size: 16px;
        color: #999;
    }
    .date_search .set {
        display: flex;
        gap: 4px;
    }
    .date_search .datepicg span {
        margin: 0 5px 0 6px;
    }
    .date_search .link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 180px;
        height: 48px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 0 12px 0 16px;
    }
    .date_search .link::after {
        content: '';
        width: 24px;
        height: 24px;
        background: url(../images/ic/ic-link.svg) no-repeat center center;
    }

    /* 2026-08-05 장일훈 - 2026-08-04에 추가했던 .datepic/.datepicg 오버라이드가 목업(style.css 원본: width:156px, .datepic + button{left:-14px})과
       달라 달력 아이콘이 입력창 밖으로 벗어나는 문제를 만들어 전량 제거. style.css의 원본 규칙이 그대로 적용되도록 되돌림 */
    .date_search input.datepic::placeholder {
        color: #222;
        font-weight: 400;
    }

    .detail_tbl .SumoSelect,
    .date_search .SumoSelect,
    .custom-div-select .select-trigger {
        width: 100%;
        min-width: 180px;
    }
    .detail_tbl .wd-md .SumoSelect,
    .date_search .wd-md .SumoSelect {
        width: 100%;
        min-width: 150px;
    }
    .date_search .filter button,
    .detail_tbl .filter button {
        border-radius: 10px;
        height: 34px;
    }
    .date_search .filter button ~ button {
        margin-left: 0;
    }
    .date_search .filter button.active,
    .detail_tbl .filter button.active {
        background-color: #008848;
        border: 1px solid #008848;
    }
    .detail_tbl.sizeup .SumoSelect,
    .date_search.sizeup .SumoSelect,
    .date_search.sizeup .link {
        width: 100%;
        min-width: 198px;
    }
    .date_search.sizeup .datepic {
        width: 198px;
    }

    .SlectBox {
        padding-left: 16px;
    }
    .flex-box {
        gap: 14px;
    }

    .SumoSelect > .CaptionCont,
    .custom-div-select .select-trigger {
        border-radius: 10px;
    }
    .SumoSelect .CaptionCont > span {
        color: #222 !important;
    }
    .SumoSelect > .optWrapper {
        top: 46px;
    }
    .SumoSelect.open + .SlectBox,
    .custom-div-select.open button {
        border: 1px solid #ddd;
        border-radius: 10px 10px 0 0;
    }
    .SumoSelect .optWrapper.open {
        border: 1px solid #ddd;
        border-radius: 0 0 10px 10px;
        box-shadow: none;
        padding-right: 4px;

        /*box-shadow: 4px 8px 18px rgba(1, 1, 1, 0.2);*/
    }
    .SumoSelect .optWrapper .options > li label {
        line-height: 48px !important;
    }
    .SumoSelect .optWrapper .options {
        max-height: 372px !important;
        overflow-y: auto;
    }

    /* --- 커스텀 DIV 셀렉트 박스 --- */
    .custom-div-select {
        position: relative;
        width: 200px;
    }
    .custom-div-select .select-trigger {
        width: 100%;
        height: 48px;
        padding: 10px 15px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        color: #333;
        text-align: left;
        cursor: default;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .custom-div-select .select-trigger::after {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background: url(../images/ic/ic_select.svg) no-repeat center center;
    }
    .custom-div-select .select-options {
        display: none;
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        width: 100%;
        padding: 0;
        list-style: none;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        z-index: 100;
    }
    .custom-div-select.open .select-options {
        display: block;
        border-radius: 0 0 10px 10px;
    }
    .custom-div-select.open .select-trigger::after {
        transform: rotate(180deg);
    }
    .custom-div-select .select-options li {
        padding: 15px 15px;
        font-weight: 700;
        color: #555;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .custom-div-select .select-options li:hover {
        background-color: #e7f7f2 !important;
    }
    .custom-div-select .select-options li.selected {
        color: #2c7f44;
        font-weight: bold;
        background: url(../images/ic/ic_opChk.svg) no-repeat left 18px center;
        padding-left: 40px;
    }
    .custom-div-select .select-options li ~ li,
    .SumoSelect .optWrapper .options > li ~ li {
        /*border-top: 1px solid #ddd !important;*/
        border-top: none !important;
    }

    .schForm {
        position: relative;
    }
    .schForm > button {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background: url(../images/ic/ic-btn-sch.svg) no-repeat center center;
        font-size: 0;
    }

    .full-child {
        display: flex;
        gap: 14px;
    }
    .full-child > button,
    .full-child > div,
    .full-child > input[type='text'] {
        flex: 1;
    }
    .fulldiv {
        display: flex;
        gap: 14px;
        justify-content: space-between;
        width: 100%;
    }
    .date_search .fulldiv .link {
        flex: 1;
    }

    /** 넓이/간격/기타 **/
    .wd-text {
        width: 312px !important;
    }
    .wd-text2 {
        width: 354px !important;
    }
    .wd-text3 {
        width: 410px !important;
    }
    .wd-sm {
        width: 164px;
    }
    .wd-msm {
        width: 174px;
    }
    .wd-basic {
        width: 180px;
    }
    .wd-mid {
        width: 220px !important;
    }
    .wd-smid {
        width: 225px !important;
    }
    .wd-big {
        width: 836px !important;
    }
    .wd-100 {
        width: 100%;
    }
    .wd-flex {
        flex: 1;
    }
    .wd-sp1 {
        width: 499px;
    }
    .wd-sp2 {
        width: 1206px;
    }
    .wd-sp3 {
        width: 198px;
    }
    .wd-sp6 {
        width: 202px;
    }
    .date_search .wd-sp4 .SumoSelect {
        width: 120px !important;
        min-width: 120px !important;
    }
    .date_search .wd-sp5 .SumoSelect {
        width: 150px !important;
        min-width: 150px !important;
    }
    /* 2026-07-25 장일훈: 목업 반영 */
    .wd100p {
        width: 100%;
    }
    .fullWidth {
        display: flex;
        gap: 14px;
        width: 100%;
    }
    .fullWidth > div {
        flex: 1;
    }
    .select .wd-full {
        flex: 1 !important;
    }
    /* 2026-07-25 장일훈: 목업 반영 */
    .flex-box .wd-full {
        flex: 1;
    }
    .date_search .wd-sm .SumoSelect {
        min-width: 100px;
    }
    .link_set {
        display: flex;
        gap: 4px;
        width: 790px;
    }
    .link_set > a,
    .link_set > button {
        flex: 1;
    }

    /* 2026-07-25 장일훈: 목업 반영 */
    .taBox {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ddd;
        padding: 10px 16px;
    }

    .schbtn_area .btng {
        margin: 10px 0 0 0;
        width: 100%;
        display: flex;
        gap: 10px;
        box-sizing: border-box;
        justify-content: center;
    }
    .schbtn_area .btng .btn:last-child {
        width: 240px;
    }
    .schbtn_area .btn,
    .schbtn_area .btn_reset {
        border-radius: 10px;
        font-size: 16px;
    }
    .schbtn_area .btn_reset {
        width: 140px;
        border: 1px solid #008848;
        color: #008848;
    }

    .singleLine {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0 !important;
        padding-right: 20px !important;
    }
    .singleLine .date_search {
        padding-right: 14px;
    }
    .singleLine .schbtn_area .btng {
        margin: 0;
    }
    .singleLine .schbtn_area .btn,
    .singleLine .schbtn_area .btn_reset {
        height: 42px;
    }
    .singleLine .schbtn_area .btng .btn {
        width: 180px;
    }
    .singleLine .schbtn_area .btn_reset {
        width: 100px;
    }

    .notice_box {
        background: none;
        border-bottom: none;
        margin-bottom: 40px;
    }
    .notice_box .box {
        background-color: #effaf5;
        border-radius: 12px;
    }
    .notice_box .tit {
        left: 24px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #008848;
    }
    .notice_box .tit::before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(../images/ic/ic-bt-notice.png) no-repeat center center;
    }
    .notice_box .tit::after {
        display: none;
    }
    .notice_box .box .btn_more {
        right: 24px;
    }

    /** table custom **/
    .detail_tbl {
        border-radius: 10px 0 0 10px;
        border: none;
        /** overflow: hidden; 202607**/
    }
    .detail_tbl.headbg th {
        background: #f6f6f6;
        border-bottom: 1px solid #fff;
    }
    .detail_tbl.headbg tr:last-child th {
        border-bottom: none;
    }
    .detail_tbl.headbg td {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        /* 2026-07-25 장일훈: 목업 반영 (padding:10px 20px -> 15px 20px) */
        padding: 15px 20px;
        height: 62px;
    }

    .board_list,
    .board_list1 {
        border-top: none;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }
    .board_list thead th,
    .board_list1 thead th {
        height: 62px;
        background: #f6f6f6;
        border-right: 1px solid #fff;
    }
    .board_list td,
    .board_list1 td {
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        padding: 20px 12px;
    }
    .board_list thead th:last-child,
    .board_list td:last-child,
    .board_list1 thead th:last-child,
    .board_list1 td:last-child {
        border-right: none;
    }
    .board_list tfoot td {
        background: #effaf5;
        border-right: 1px solid #fff;
    }
    /*
    .board_list tfoot td:first-child {
        border-radius: 10px 0 0 10px;
    }
    .board_list tfoot td:last-child {
        border-radius: 0 10px 10px 0;
    }
        */
    .board_list .title a:hover {
        color: #008848;
        text-decoration: none;
    }
    .board_list .price {
        color: #008848;
        font-weight: bold;
    }
    .btnList_block .btn {
        width: 300px;
        font-size: 18px;
        border-radius: 10px;
    }
    .board_view .had {
        border-bottom: 1px solid #ddd;
    }
    .board_view .had h2 {
        font-size: 24px;
    }
    .board_view .had button {
        display: none;
    }
    /* 2026-08-06 장일훈 - 위 .board_view .had button{display:none}이 기획전 상세(exhibDtl.jsp)의
       관심기획 하트 버튼(.evt_wish)까지 숨기던 문제 수정 */
    .board_view.event .had button.evt_wish {
        display: inline-block;
    }
    .board_view .files {
        padding: 18px 20px 14px;
    }
    .board_view .files a {
        padding-left: 24px;
    }
    .prevNext {
        border: none;
    }
    .prevNext div {
        height: 60px;
        background-color: #f6f6f6;
        border-radius: 10px;
    }
    .prevNext div ~ div {
        border: none;
        margin-top: 8px;
    }

    td.tdTitle {
        text-align: left;
    }
    td .ic_notice {
        background-color: #008848;
    }
    .numinfo {
        color: #666;
    }
    .g-font {
        color: #008848;
    }

    .newBtn {
        justify-content: center !important;
    }
    .newBtn .btn {
        border-radius: 10px;
    }
    .newBtn .btnList {
        font-size: 18px;
        height: 58px;
        width: 300px !important;
        max-width: 300px !important;
    }

    .btnPrint {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 48px;
        font-size: 18px;
        color: #008848;
        font-weight: 600;
        border: 1px solid #008848;
        border-radius: 10px;
        padding: 0 16px;
        transform: translateY(-50%);
    }
    .btnPrint::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url(../images/ic/btn-inPrint.png) no-repeat center center;
    }

    .pgBtng .paging {
        top: 0;
    }

    /** footer **/
    footer {
        background: #fff;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        padding: 50px 0 80px;
    }
    .footer div {
        box-sizing: border-box;
    }
    .logoBox {
        flex: 1;
    }
    .logoBox dl {
        margin-top: 20px;
    }
    .logoBox dd {
        color: #666;
        padding-bottom: 5px;
    }
    .footer .infoBox {
        width: 530px;
        color: #666;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        padding: 0 40px;
    }
    .footer .infoBox dt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24px;
        color: #222;
        margin-bottom: 14px;
    }
    .footer .infoBox dt > p {
        display: flex;
        align-items: center;
    }
    .footer .infoBox dt > p > a {
        display: inline-block;
        font-size: 14px;
        color: #666;
        border: 1px solid #ddd;
        border-radius: 30px;
        padding: 4px 18px;
        margin-left: 4px;
    }
    .footer .infoBox dt span {
        font-size: 18px;
        margin-right: 3px;
    }
    .footer.infoBox dt a {
        display: inline-flex;
        font-size: 14px;
        color: #666;
        border: 1px solid #ddd;
        border-radius: 24px;
        padding: 2px 16px;
        margin-left: 8px;
    }
    .footer .infoBox dd {
        margin-bottom: 3px;
    }
    .cusBox {
        position: relative;
        width: 456px;
        color: #666;
        padding: 0 40px;
    }
    /* 2026-08-11 장일훈 - line-height 미지정 시 고객센터/구매계약문의 두 줄의 줄간격이
       글자 크기(28px)보다 좁게 잡혀 전화번호가 서로 겹쳐 보이던 문제 수정 */
    .cusBox dt {
        display: flex;
        align-items: center;
        color: #222;
        font-weight: bold;
        font-size: 28px;
        line-height: 140%;
    }
    .cusBox dt span {
        display: inline-block;
        width: 105px;
        color: #666;
        font-size: 18px;
        font-weight: 400;
    }
    .cusBox dd {
        margin-top: 15px;
        line-height: 150%;
    }

    /** Footer **/
    .f-head {
        background-color: #f6f6f6;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #eee;
    }
    .f-menus {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1440px;
        height: 64px;
        margin: 0 auto;
    }
    .f-menus > ul {
        display: flex;
        gap: 20px;
    }
    .f-menus > ul > li a {
        font-size: 16px;
        color: #666;
    }
    .f-menus > ul > li a.point {
        color: #008848;
    }
    .f-menus > div {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .familysite {
        position: relative;
        right: 0;
        bottom: 0;
        width: 270px;
        font-size: 16px;
        color: var(--neutral-gray-500);
    }
    .familysite .selected {
        background-color: #fff;
        border-radius: 12px;
    }

    .good_detail .detail dl {
        color: #666;
    }
    .good_detail .detail dt,
    .good_detail .detail dd {
        display: flex;
        align-items: center;
    }
    /* 2026.07.31 장일훈 - "상품 선택"/"주문수량" 영역을 dl 밖으로 분리(목업 구조 반영) */
    .good_detail .detail .mgt30 {
        margin-top: 30px;
    }
    .good_detail .detail .mgt30 .selectbox ~ .optionDiv {
        margin-top: 10px;
    }
    .sp-fee {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sp-fee > div {
        display: flex;
        align-items: center;
        border-right: 1px solid #ddd;
        padding-right: 10px;
    }
    .sp-fee .info span {
        color: #999;
    }
    .sp-fee .dropdown-wrapper {
        margin-left: 6px;
    }
    .sp-fee .dropdown-layer {
        bottom: -470%;
        padding-bottom: 14px;
    }
    .fee-opt {
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
    }
    .fee-opt th {
        text-align: left;
        padding: 2px 14px;
    }
    .fee-opt td {
        text-align: right;
        color: #222;
        font-weight: bold;
        padding: 2px 14px;
    }

    .link-icon {
        display: flex;
        align-items: center;
        gap: 3px;
    }
    .link-icon::after {
        content: url(../images/icon-link.png);
        height: 20px;
    }
    /* 키워드 드롭다운 */
    .dropbox {
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    .dropbox::after {
        content: url(../images/btn-addopt.png);
        height: 24px;
        margin-left: 3px;
    }
    .dropbox .drop_content {
        display: none;
        position: absolute;
        top: calc(100% + 2px);
        left: 50%;
        transform: translateX(-50%);
        min-width: 200px;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #008848;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }
    .dropbox.active .drop_content {
        display: block;
        font-size: 16px;
    }
    .dropbox.active .drop_content .tit {
        font-size: 18px;
        color: #222;
        margin-bottom: 10px;
    }
    .dropbox.active .drop_content .btn_close {
        position: absolute;
        right: 14px;
        top: 13px;
    }
    .dropbox.active .drop_content th {
        text-align: left;
    }
    .dropbox.active .drop_content td {
        text-align: right;
        font-weight: bold;
        color: #222;
        padding: 3px 0;
    }

    /*** Modal add ***/
    /* 모달을 여는 트리거 버튼 스타일 */
    .trigger-btn {
        padding: 10px 20px;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
    }
    .simple-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    .simple-modal-content {
        background-color: #ffffff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        min-width: 300px;
        max-width: 90%;
    }
    .btn-close {
        cursor: pointer;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 4px;
    }
    .btn-close:hover {
        background-color: #eee;
    }

    /******* 우선구매실적 관련 팝업 ********/
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .modal {
        width: 880px;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        padding: 20px;
        overflow: hidden;
    }
    .modal.smSize {
        width: 670px;
    }
    .modal.smSize .right-box {
        min-height: 306px;
    }
    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 14px;
        border-bottom: 1px solid #222;
    }
    .modal-header h2 {
        font-size: 24px;
        font-weight: bold;
        letter-spacing: -0.05rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .modal-header .btn-close {
        background: none;
        border: none;
        cursor: pointer;
        color: #333;
    }
    .modal-body {
        display: flex;
        padding: 20px 0;
        gap: 14px;
        background-color: #fff;
    }
    .panel-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 12px;
    }
    .left-panel {
        flex: 0 0 200px;
    }
    .left-box {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 16px;
        min-height: 426px;
    }
    ul.check-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .chk-label {
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        user-select: none;
        position: relative;
    }
    .chk-label input[type='checkbox'] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .chk-box-custom {
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        flex-shrink: 0;
        transition: all 0.2s ease;
        margin-top: 2px;
    }
    .chk-label input[type='checkbox']:checked ~ .chk-box-custom {
        border-color: #333;
    }
    .chk-box-custom::after {
        content: '';
        display: none;
        width: 5px;
        height: 10px;
        border: solid #333;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        margin-bottom: 3px;
    }
    .chk-label input[type='checkbox']:checked ~ .chk-box-custom::after {
        display: block;
    }
    .chk-text {
        font-size: 15px;
        color: #333;
        line-height: 1.5;
    }
    .left-panel .chk-label input[type='checkbox']:checked ~ .chk-text {
        font-weight: 700;
    }
    /* 우측 패널 (소분류) */
    .right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .right-box {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 16px 8px 16px 16px;
        min-height: 426px;
        max-height: 426px;
        display: flex;
        flex-direction: column;
    }
    .scroll-area {
        flex: 1;
        overflow-y: auto;
        padding-right: 8px;
    }
    .scroll-area::-webkit-scrollbar,
    .options::-webkit-scrollbar {
        width: 6px;
    }
    .scroll-area::-webkit-scrollbar-track,
    .option::-webkit-scrollbar-track {
        background: transparent;
    }
    .scroll-area::-webkit-scrollbar-thumb,
    .options::-webkit-scrollbar-thumb {
        background: #008a45 !important;
        border-radius: 4px;
    }
    .section-group {
        margin-bottom: 24px;
    }
    .section-header {
        background-color: #f7f7f7;
        border-radius: 6px;
        padding: 12px 16px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .section-header h4 {
        font-size: 16px;
        font-weight: 700;
    }
    .section-header p.desc {
        font-size: 14px;
        color: #888;
        font-weight: 400;
    }
    ul.chkg {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2열 그리드 배치 */
        column-gap: 20px;
        row-gap: 16px;
        padding: 0 8px;
    }
    .chk_box {
        display: flex;
        align-items: flex-start;
        position: relative;
    }
    .chk_box input[type='checkbox'] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .chk_box label {
        display: flex;
        align-items: flex-start;
        cursor: pointer;
        user-select: none;
        padding-left: 30px;
    }
    .chk_box label::before {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }
    /* 체크박스 > 라디오박스 변환*/
    .chkg .chk_box input[type='radio'] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .chkg .chk_box label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        position: relative;
        padding-left: 28px;
        min-height: 22px;
    }
    .chkg .chk_box label p {
        display: flex;
        align-items: center;
        margin: 0;
    }
    .chkg .chk_box label p img {
        margin-right: 4px; /* 아이콘과 텍스트 사이 간격 */
    }
    /* 3. 체크박스 모양(네모) 만들기 */
    .chkg .chk_box label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }
    /* 4. 선택(Checked) 되었을 때 네모 박스 색상 변경 */
    .chkg .chk_box input[type='radio']:checked + label::before {
        background-color: #2c7f44;
        border-color: #2c7f44;
    }
    .chkg .chk_box label::after {
        content: '';
        position: absolute;
        display: none;
        left: 6px;
        top: 50%;
        width: 6px;
        height: 10px;
    }

    /* 6. 선택(Checked) 되었을 때 V자 마크  */
    .chkg .chk_box input[type='radio']:checked + label::after {
        display: block;
    }
    .chk_box p {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: #333;
    }
    .chk_box p img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    .modal-footer {
        display: flex;
        justify-content: center;
    }
    .btn-apply {
        background-color: #008a45;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 600;
        padding: 14px 40px;
        min-width: 160px;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .btn-apply:hover {
        background-color: #007339;
    }

    /*****/
    /* 2026-07-25 장일훈: 목업 반영 */
    .btn {
        border-radius: 10px;
    }
    .btn.fnc01 {
        background: #008848 !important;
    }
    .btn.fnc02 {
        border: 1px solid #008848 !important;
        /* 2026-07-25 장일훈: 목업 반영 */
        color: #008848;
    }
    /* 2026-07-25 장일훈: 목업 반영 */
    .btn.fnc04 {
        border: 1px solid #008848;
        color: #008848;
        background: #fff;
    }
    .btn.siz_lg {
        height: 58px;
        /* 2026-07-25 장일훈: 목업 반영 */
        font-size: 18px;
    }
    /* 2026-07-25 장일훈: 목업 반영 */
    .login_ui .btn.siz_md {
        height: 58px;
    }
    .dLoad {
        position: relative;
        padding-right: 10px !important;
    }
    .dLoad::after {
        content: '';
        display: inline-block;
        width: 18px;
        height: 18px;
        background: url(../images/ic/dload.svg) no-repeat center center;
        vertical-align: bottom;
        margin: 0 0 1px 4px;
    }

    th input[type='text'],
    td input[type='text'] {
        border-radius: 10px;
    }

    u {
        text-decoration: none;
    }
    .box dl ~ dl {
        margin: 0;
    }
    .titg h2 {
        font-size: 36px;
    }
    .top_box.fixed._index {
        z-index: 0;
    }
    .taLeft {
        text-align: left !important;
    }

    /**202607**/
    .detail_tbl.headbg > table tr:first-child th:first-child {
        border-radius: 10px 0 0 0;
    }
    .detail_tbl.headbg > table tr:last-child th:first-child {
        border-radius: 0 0 0 10px;
    }
        
    /**202608 : 퀵메뉴 & SVI 추가**/
    .quickLink {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100px;
        z-index: 999; /*20260813*/
    }
    .q-menu {
        border-radius: 12px 0 0 12px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        background-color: #fff; /*20260811*/
    }
    input[id*='quick'] {
        display: none;
    }
    input[id*='quick'] + label {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        height: 48px;
        color: #fff;
        font-weight: bold;
        background-color: #612888;
        cursor: pointer;
        position: relative;
    }
    input[id*='quick'] + label em {
        width: 11px;
        height: 7px;
        background: url(../images/ic/q-arrow.svg) 0 0 no-repeat;
        transform: rotate(180deg);
        transition: 0.3s;
    }
    input[id*='quick'] + label + div {
        max-height: 0;
        transition: all 0.35s;
    }
    input[id*='quick'] + label + div > p {
        display: block;
        padding: 10px 0;
    }
    input[id*='quick'] + label + div > p > a {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        font-size: 15px;
        font-weight: 600;
    }
    input[id*='quick'] + label + div > p > a > img {
        filter: brightness(0);
        opacity: 0.8;
    }
    input[id*='quick'] + label + div > p > a:hover {
        color: #00aa5a;
    }
    input[id*='quick'] + label + div > p > a:hover > img {
        filter: brightness(100%);
        opacity: 1;
    }
    input[id*='quick']:checked + label + div {
        max-height: 300px;
        padding: 10px 0;
    }
    input[id*='quick']:checked + label em {
        transform: rotate(0);
    }
    .q-chat {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        height: 73px;
        background-color: #effaf5;
        border-radius: 12px 0 0 12px;
        color: #008848;
    }
    .q-chat:hover {
        color: #fff;
        background-color: #00aa5a;
    }
    .q-chat:hover > img {
        filter: brightness(0) invert(100%);
    }
    .top_box {
        width: 100%;
    }
    .btnTop {
        right: 26px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: url(../images/ic/arrow-top.svg) no-repeat center #fff;
    }
    .btnTop:hover {
        background: url(../images/ic/arrow-top-w.svg) no-repeat center #222;
    }

    .svi-icon {
        position: absolute;
        top: 8px;
        right: 8px;
        min-height: 42px;
        min-width: 42px;
        background: url(../images/ic/sp-icon.png) no-repeat right top;
        z-index: 999;
    }
    .svi-icon .textbox {
        position: absolute;
        top: 46px;
        right: 0;
        background-color: #fff;
        border-radius: 4px;
        white-space: nowrap;
        padding: 6px 8px;
        display: none;
    }
    .svi-icon .textbox strong {
        display: inline-block;
        margin-right: 2px;
        color: #008848;
    }
    .svi-icon:hover .textbox {
        display: block;
    }
    /**e:202608**/    
    /*20260811*/
    .b2gBanner .controller {
        height: 67px;
        background: url(../images/bg-slider.png) no-repeat center right;
        align-items: end;
    }
    .b2gBanner {
        border-radius: 20px;
    }
    .b2gBanner .controller .slide-arrows {
        height: 38px;
    }
    /*e:20260811*/
}

/* 2026-08-04 장일훈 - newType_old.css에서 newPopup 블록(팝업 버튼/테이블/게시판 스타일) 복원 */
.newPopup {
    .ui-dialog-buttonset {
        display: flex;
        gap: 10px;
        justify-content: center;
        padding: 0 20px;
    }
    .ui-state-default {
        border-radius: 4px !important;
    }
    .btn.siz_md {
        width: 100%;
        max-width: 140px;
        height: 58px;
    }
    .btn_wrap .btng {
        justify-content: center;
    }
    .btn_wrap .btng .btn.list {
        margin-right: 0 !important;
    }
    .btn {
        border-radius: 10px !important;
    }

    .detail_tbl,
    .board_list {
        border: 1px solid #ddd;
        border-radius: 10px;
        overflow: hidden;
    }
    .detail_tbl.headbg th {
        border-color: #fff;
    }
    .detail_tbl.headbg td {
        border-color: #eee;
    }
    .detail_tbl.headbg tr:last-child th,
    .detail_tbl.headbg tr:last-child td,
    .board_list tr:last-child td {
        border-bottom: none;
    }

    .board_list td {
        border-left: 1px solid #eee;
    }
    .board_list th:first-child,
    .board_list td:first-child {
        border-left: none;
    }
    .board_list th {
        border-left: 1px solid #fff;
    }

    .btn_wrap .btng .btn {
        width: 100%;
        max-width: 140px;
    }
}

/* 2026-07-25 장일훈: 목업 반영 */
.notice_box.parts {
    background: none;
    border-bottom: none;
    margin-bottom: 40px;
}
.notice_box.parts .box {
    background-color: #effaf5;
    border-radius: 12px;
}
.notice_box.parts .tit {
    left: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #008848;
}
.notice_box.parts .tit::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/ic/ic-bt-notice.png) no-repeat center center;
}
.notice_box.parts .tit::after {
    display: none;
}
.notice_box.parts .box .btn_more {
    right: 24px;
}

/* 2026-08-04 장일훈 - newType_old.css에서 tab-ui/sub-btns/link-btn-arrow 스타일 복원 */
.tab-ui {
    width: 100%;
}

/* 공통 탭 버튼 스타일 */
.tab-ui .tab-btns {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0 0 6px 0; /* 버튼과 컨텐츠 박스 사이 간격 */
    flex-wrap: wrap;
}

.tab-ui .tab-btns {
    justify-content: space-between;
    margin-bottom: 40px;
}
.tab-ui .tab-btns > li {
    display: flex;
    justify-content: center;
    width: 120px;
}
.tab-ui .tab-btns button {
    color: #666;
}
.tab-ui .tab-btns button:hover,
.tab-ui .tab-btns button.active {
    font-weight: bold;
    color: #222;
}
.tab-ui .tab-btns button > p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 108px;
}
.tab-ui .tab-btns button > p > img {
    display: none;
}
.tab-ui .tab-btns button > p > img.offbtn {
    display: block;
}
.tab-ui .tab-btns button:hover > p > img,
.tab-btns button.active > p > img {
    display: block;
}
.tab-ui .tab-btns button:hover > p > img.offbtn,
.tab-ui .tab-btns button.active > p > img.offbtn {
    display: none;
}

/* 2 Depth 전용 버튼 스타일 */
.sub-btns {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    padding: 24px 60px;
    margin-bottom: 40px;
}
.sub-btns > li {
    flex: 1;
}
.sub-btns button {
    font-size: 18px;
}
.sub-btns button:hover,
.sub-btns button.active {
    text-decoration: underline;
    color: var(--primary-green-90);
}

/* 탭 콘텐츠 박스 스타일 */
.tab-ui .tab-content-box {
}

.tab-ui .tab-content {
    display: none;
    width: 100%;
    min-height: 950px;
}
.tab-ui .tab-content.active {
    display: block;
}
.tab-ui .tab-content-box .tab-content-box {
    border: none;
    background-color: transparent;
}

.tab-ui .tab-content-box .tab-content-box .content-inner {
    min-height: 200px;
}

.tab-ui .tab-content .item {
    display: block;
    padding: 0;
}

.link-btn-arrow {
    margin-top: 40px;
    text-align: center;
}
.link-btn-arrow > a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 240px;
    height: 54px;
    font-weight: 500;
    font-size: 18px;
}
.link-btn-arrow > a:hover {
    color: #00aa5a;
    font-weight: bold;
    border: 2px solid #00aa5a;
}
.link-btn-arrow > a::after {
    content: url(../images/ic/link-arrow.svg);
    display: block;
    height: 24px;
}
.link-btn-arrow > a:hover::after {
    content: url(../images/ic/link-arrow-on.svg);
    display: block;
    height: 24px;
}

/* 2026-08-06 장일훈 - 우선구매실적 화면(.perStep 다음 .date_search)에서 .newType .date_search{flex-wrap:wrap; background:none; padding:20px}이
   회색 배경 제거 + 줄바꿈 + 폭 초과를 유발해 "구매실적 기준년도 조회" 제목이 두 줄로 밀리고 조회버튼/문의목록이 다음 줄로 내려가던 문제 수정.
   다른 .newType 화면(schBox 등)의 flex-wrap:wrap 의도는 유지하기 위해 이 페이지 구조(.perStep + .date_search)로만 스코프 */
.perStep + .date_search {
    flex-wrap: nowrap;
    gap: 0;
    background: var(--neutral-gray-200);
    padding: 24px;
}
.perStep + .date_search .tit {
    margin-right: 24px;
    white-space: nowrap;
}
.perStep + .date_search .datepicg {
    margin-right: 16px;
}
.perStep + .date_search .SumoSelect {
    min-width: 140px;
}

/** 202608 : tip 기능 추가 **/
.filter {
    display: flex;
    align-items: center;
    gap: 3px;
}
.tip {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/ic/tip-icon.svg) no-repeat center center;
}
.tip > p {
    display: none;
    position: absolute;
    top: 34px;
    left: -7px;
    font-size: 14px;
    max-width: 240px;
    background-color: #fff;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 6px 8px;
    white-space: nowrap;
    z-index: 999;
}
.tip:hover > p {
    display: block;
}
.tip > p::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 10px;
    display: block;
    width: 16px;
    height: 16px;
    background: url(../images/ic/tip-arrow.svg) no-repeat left top;
}

.wd-tip {
    width: 177px;
}
.wd-tip-long {
    width: 330px;
}
.wd-tip-long2 {
    width: 388px;
}
.wd-sp1-tip1 {
    width: 474px;
}
.wd-sp1-tip2 {
    width: 488px;
}