@charset "utf-8";
:root {
	/* color */
	--main-color: #c385ff;
	--sub-color: #e4b9f9;
}
/********** 1. 공통 **********/

/* 프리텐다드 CDN 불러오기 */
/*
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
*/

/* 모든 요소에 프리텐다드 적용 (Font Awesome 아이콘은 제외) */
*:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not([class*="xi-"]) {
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
	letter-spacing: -0.02em; /* 프리텐다드는 자간을 살짝 줄여야 더 예쁩니다 */
}

/* 기본폰트 최소 사이즈 */
body {
	font-size:1em;
}

/* sitemap 배경 및 글자 색상 */
.category {
	background-color: unset;
}
.category > ul > li > a {
	color: white;
}
.category > ul > li ul a {
	color: #ddd;
}
#sitemap-container #sitemap_close span,
#header-wrap.scrolled #sitemap_close span {
	background-color: white;
}

/* menalab: 모바일 전체메뉴 닫기(X, ×) 글자 색상 흰색 고정 (2026-07-22)
   -webkit-appearance 리셋 없이는 일부 모바일 브라우저에서 버튼 기본 스타일이
   color 지정을 덮어써서 흰색이 아닌 색으로 보이는 경우가 있어 명시적으로 재지정 */
#mobile-nav-close {
	color: #fff;
	-webkit-appearance: none;
	appearance: none;
}

/* menalab: 모바일 메뉴 버튼(#mobile-menu-btn)이 눌린(.active) 상태에서는 흰색 유지 (2026-07-22)
   header.css 4번째 줄 "#header-wrap .fixed #mobile-menu-btn span { background-color: #1a1a1a; }"가
   스크롤 시(menu.js가 #header에 .fixed를 붙임) 70번째 줄의 기본 흰색(#fff)을 specificity로 덮어쓰고 있었음.
   #header-wrap을 추가해 specificity를 동일하게 맞추고, custom.css가 나중에 로드되므로 이 규칙이 우선 적용됨 */
#header-wrap #mobile-menu-btn.active span {
	background-color: #fff;
}

/* menalab: 사이트맵/모바일 메뉴 오픈 중 배경(body) 스크롤 방지 (2026-07-22)
   - header.js에서 사이트맵(#sitemap)과 모바일메뉴(#mobile-menu-btn)를 열 때 body에 "open" 클래스를 붙이는데,
     원래 header.css에는 이 클래스에 대응하는 규칙이 없어 배경이 그대로 스크롤되고 있었음.
   - 오버레이가 열린 채로 배경이 스크롤되면, 모바일 브라우저(특히 iOS Safari)에서 주소창 표시/숨김에 따른
     뷰포트 변화와 겹쳐 fixed 요소(닫기 X 버튼 등)가 스크롤 중 일시적으로 사라지거나 밀리는 현상이 발생함.
     PC에서는 재현되지 않던 문제. */
body.open {
	overflow: hidden;
}

/* TOP 버튼 */
#top_btn {
	color: var(--main-color);
}
#top_btn:hover {
	background: var(--main-color);
	border-color: var(--main-color);
}

/*** head ***/
/* 로고 사이즈 */
.logo a {
    width: 200px;
    height: 45px;
}
#header-wrap.scrolled #login-box a {
	font-size: 0.8em;
}

/* 도트 타이틀 */
.dot-title {
	font-size: 1.4em;
}

/*** index 화면 ***/
.mission-grid .left .view-btn {
	border: 1px solid var(--main-color);
}
.mission-grid .left .view-btn a::before { 
	background: var(--main-color);
}
.mission-grid .left .view-btn a {
	color: var(--main-color);
}
.section04 .black_bg .txt_area {
	
}

/* youtube intro 영상 배경필터 제거 */
.video-slide::before, .youtube-slide::before {
    background: unset;
}

/* Exhibition Design Project 우측 여백 제거 */
.section04 .black_bg:after {
    right: unset;
    width: unset;
}
.section04 .black_bg .bg {
    margin-top: 74px;
}

/* 최하단 우측 이미지 높이 */
.section07-swiper {
    height: auto;
}



/********** 2. 일반페이지 **********/
/***** 회사소개 *****/
/* 우측 소제목 */
.about-wrap h6 {
	font-size: 21px;
	margin-bottom: 20px;
}
/* 이미지 폭 제한 / 간격 조정
   menalab: width:100%를 함께 지정해 컨테이너보다 이미지가 넓어지지 않도록 함.
   기존에는 max-width만 있어서, 이미지 원본 크기가 1000px보다 큰 경우
   모바일/태블릿처럼 컨테이너 폭이 1000px보다 좁은 화면에서 이미지가 화면 밖으로 넘쳐
   잘려 보이는 문제가 있었음 (2026-07-28) */
.about-wrap img {
	max-width: 1000px;
	width: 100%;
	height: auto;
	margin-bottom: 160px;
}
/* Core Value 1번, 2번 간격 조정 */
.about-wrap.tmp1 {
	margin-bottom: 90px;
}
/* 첫번째 이미지 aboutus_1pc.png 간격 조정 */
.about-wrap.tmp2 img {
	margin-bottom: 50px;
}


/***** 전시행사 디자인 하위페이지 *****/
.content11 {
	display: flex;
	margin-bottom: 40px;
	flex-direction: column;
	align-items: center;
}
.content11 .photo_box {
	flex: 1;
	padding: 20px 0 0 40px;
	}
.content11 h2 {
	color: var (--main-color);
	margin-bottom: 10px;
	font-size: 30px;
}
.content11 h3 {
	margin-bottom: 10px;
	font-size: 25px;
}
.content11 .txt {
	font-size: 18px;
	padding-top: 20px;
	padding-bottom: 20px;
	word-break :keep-all;
	line-height: 1.5;
	text-align: center;
}
.content11 img {
	max-width: 100 % ;
	height: auto;
}


/********** 3. 커뮤니티**********/

/********** 4. 쇼핑몰 **********/

/* 사이드 메뉴 때문에 생기는 가로 스크롤바 제거 */
.main_visual {
	overflow: hidden;
}

/* 사이드 메뉴 때문에 겹치는 현상발생 / 가로 폭 조정 */
#header {
    padding-right: 90px;
}

/* FAQ | 1:1문의 | 개인결제 | 사용후기 | 상품문의 | 쿠폰존 --- 제거 */
#tnb {
	display: none;
}

/* 상단 메뉴 고정 */
#header-wrap {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transition: all 0.3s ease;
}

/* 컨테이너 넓이 조정 */
#container {
	width: unset;
    max-width: 1600px;
    margin: 0 auto 150px auto;
    padding: 0 20px;
}

/* 방문자집계 */
#visit p {
    display: block;
    color: #e3e3e3;
}

/* footer */
#footer .top .left,
#footer .top .center,
#footer .top .right {
	flex: 1;
	min-width: 300px;
}

#footer .sns_box .sns a { display: block; width: 4rem; height: 4rem; border: 1px solid rgba(255,255,255,0.2); font-size: 0; background: url(../img/brunchstory.png) no-repeat center / 0.6rem; }
#footer .sns_box .sns.n1 a {
	background-image: url(../img/brunchstory.png);
	background-size: 1.8rem;
}
#footer .sns_box .sns.n2 a {
	background-image: url(../img/instagram.png);
	background-size: 1.8rem;
}
#footer .sns_box .sns.n3 a {
	background-image: url(../img/naverblog.png);
	background-size: 1.8rem;
}
#footer .sns_box .sns.n4 a {
	background-image: url(../img/kakaotalk_channel.png);
	background-size: 1.8rem;
}




/* menalab 쇼핑몰 모바일 대응 (2026-07-20) */
@media screen and (max-width: 768px) {

    /* 페이지 전체를 1200px 이하로 못 줄이게 막던 규칙 해제 */
    #hd, #wrapper, #ft {
        min-width: 0;
    }
    #container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
	}
	
    /* PC 전용 사이드 여백 제거 */
    #header {
        padding-right: 0;
    }

    /* 상단 고정 헤더에 콘텐츠가 가려지는지 확인 후 조정 */
    #container {
        padding-top: 60px; /* 임시값, 실기기 확인 후 조정 */
    }

    /* 카테고리 탭 메뉴 - 좁은 화면에서 가로 스크롤 처리 */
    #gnb_tabs_wrapper ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #gnb_tabs_wrapper .tab_item {
        flex: 0 0 auto;
        min-width: 90px;
    }

    /* 우측 고정 퀵메뉴(마이메뉴/오늘본상품/장바구니/위시리스트) - 모바일에서는 방해가 되므로 숨김 */
    #side_menu {
        display: none;
    }

    /* 상품 정렬 바 - 가로 스크롤 방식으로 전환 */
    #sct_sort {
        float: none;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #sct_sort ul {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    #sct_sort li {
        float: none;
        flex: 0 0 auto;
    }

    /* 목록페이지 정렬 바 옆 카테고리 선택 드롭다운 
    .is_list.is_right .shop_select_to_html.shop_hover_selectbox {
        float: none;
        width: 100%;
    }
	*/
    /* 상품 그리드 좌우 네거티브 마진으로 인한 미세 가로스크롤 방지 */
    .lists-row {
        margin-left: 0;
        margin-right: 0;
    }

    /* 상품 그리드 - PC용 -20px 네거티브 마진을 모바일에서 무력화 */
    .sct_10.lists-row {
        margin-left: 0;
        margin-right: 0;
    }
    .sct_10.lists-row .col-row-1,
    .sct_10.lists-row .col-row-2,
    .sct_10.lists-row .col-row-3,
    .sct_10.lists-row .col-row-4,
    .sct_10.lists-row .col-row-5,
    .sct_10.lists-row .col-row-6 {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* 관리자 설정과 무관하게 모바일에서는 무조건 2열로 강제 */
    .shop-content .lists-row [class*="col-row-"] {
        width: 50%;
    }

}



/***** 상품 정보 *****/

/* 미리보기 이미지 바로 아래의 상품 라벨의 세로 중앙 정렬 */
.sit_ov_tbl th,
.sit_ov_tbl td {
    vertical-align: middle;
}
.sit_ov_tbl td strong {
    line-height: normal;
    vertical-align: middle;
}
.sit_ov_tbl td select,
.sit_ov_tbl td label {
    vertical-align: middle;
}

/* 상품 정보 고시 표 너비 900px로 고정 + 가운데 정렬 (2026-07-27, style.css의 width:100% 대신 여기서 override) */
#sit_inf_open {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 768px) {
    /* 상세페이지 상단 영역 - 고정폭 1200px 해제 */
    #sit_ov_wrap {
        width: 100%;
        padding: 15px;
    }

    /* 메인 상품 이미지 - 고정폭 500px 해제 */
    #sit_pvi_big img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    /* 하단 썸네일 이미지도 안전하게 */
    #sit_pvi_thumb img {
        max-width: 100%;
        height: auto;
    }

    /* 상품정보/구매 영역 - 고정폭 448px, float:right 해제 */
    #sit_ov {
        float: none;
        width: 100%;
        height: auto !important;
        min-height: 0;
    }

    /* 모바일에서는 이미지 바로 아래로 상품명(#sit_title)이 붙게 되므로 상단 여백 확보 */
    /* (이전 시도가 안 먹혔던 이유: 미디어쿼리 밖 전역 규칙으로 넣어서 데스크톱과 뒤섞여 있었음.
       데스크톱은 #sit_ov가 이미지 옆(float:right)이라 이 여백이 필요 없고, 모바일에서 이미지 아래로 쌓일 때만 필요함) */
    /* 이미지 미리보기 영역과 바로 아래 상품명 사이 여백 확보 (#sit_title margin-top 대신 이미지 쪽에서 margin-bottom으로 처리) */
    #sit_pvi {
        margin-bottom: 15px;
    }
    #sit_title {
        margin-top: 15px;
        font-size: 24px !important;
    }

	/* 4탭 (상품정보, 사용후기, 상품문의, 배송교환) */
    #sit_tab .tab_tit li button {
        padding: 12px 4px;
        font-size: 12px;
        line-height: 1.3;
    }
    #sit_tab .tab_con {
        padding-top: 20px;
    }

	/* 4탭 (상품정보, 사용후기, 상품문의, 배송교환) 아래의 해당 라벨은 원래 보이지 않아야하는데 스마트폰브라우저가 강제로 확대해버리기때문에 해당 기능을 무효과해서 보이지 않게 하기 */
	#sit_inf h2,
	#sit_use h2,
	#sit_qa h2 {
		font-size: 0 !important;
		line-height: 0 !important;
		max-height: 0;
		overflow: hidden;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}

	/* 상품 정보 고시 표 - PC에서는 900px 고정폭이지만 모바일에서는 화면 밖으로 넘치므로 해제 */
	/* PC: th(라벨)-td(값)가 한 줄에 나란히 표시 → 모바일: th, td를 각각 한 줄씩 세로로 쌓아서 표시 (배경색은 th/td 각자 값 그대로 유지) */
	#sit_inf_open {
		width: 100%;
	}
	#sit_inf_open tbody,
	#sit_inf_open tr,
	#sit_inf_open th,
	#sit_inf_open td {
		display: block;
		width: 100%;
	}

}



/* 장바구니 (모바일 카드형 레이아웃) */
@media screen and (max-width: 768px) {

    /* 표 헤더(thead)는 숨기고, 표/본문을 블록으로 전환 */
    #sod_bsk_list .tbl_head03 table thead {
        display: none;
    }
    #sod_bsk_list .tbl_head03 table,
    #sod_bsk_list .tbl_head03 tbody {
        display: block;
        width: 100%;
    }

    /* 상품 한 개 = 카드 하나. 2열 그리드로 배치 순서 재구성 */
    #sod_bsk_list .tbl_head03 tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prd   prd"
            "price qty"
            "dvr   point"
            "subtotal subtotal";
        column-gap: 10px;
        position: relative;
        margin-bottom: 15px;
        padding: 15px;
        border: none;
        border-radius: 8px;
        background: #fff;
    }

    /* td 공통 리셋 (표 기본 스타일 제거) */
    #sod_bsk_list .tbl_head03 tr td {
        display: block;
        width: auto;
        min-width: 0;
        border-top: none;
        border-left: none;
    }

    /* 체크박스 - 별도 칸을 차지하지 않고 prd 영역(1행) 좌상단에 겹쳐서 배치 */
    #sod_bsk_list .tbl_head03 td.td_chk {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        align-self: start;
        width: auto;
        padding: 0;
        z-index: 1;
    }

    /* 상품 이미지 + 이름 - 체크박스와 안 겹치게 좌측에 여백 확보 */
    #sod_bsk_list .tbl_head03 td.td_prd {
        grid-area: prd;
        display: flex;
        gap: 10px;
        padding-left: 28px; /* 체크박스 자리 확보 */
        min-height: 0;
    }
    #sod_bsk_list .tbl_head03 td.td_prd .sod_img {
        position: static; /* 원래 position:absolute였던 것을 해제 */
        flex: 0 0 70px;
    }
    #sod_bsk_list .tbl_head03 td.td_prd .sod_img img {
        width: 70px;
        height: 70px;
        display: block;
    }
    #sod_bsk_list .tbl_head03 td.td_prd .sod_name {
        flex: 1;
        min-height: 0;
    }

    /* 판매가 / 배송비 - 왼쪽 칸. 라벨 좌측, 값 우측. 오른쪽 칸과의 구분선 유지 */
    #sod_bsk_list .tbl_head03 td.td_price {
        grid-area: price;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    #sod_bsk_list .tbl_head03 td.td_dvr {
        grid-area: dvr;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    /* 수량 / 적립포인트 - 오른쪽 칸. 구분선 없음 */
    #sod_bsk_list .tbl_head03 td.td_num {
        grid-area: qty;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    #sod_bsk_list .tbl_head03 td.td_point {
        grid-area: point;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    /* 라벨 텍스트 (::before로 삽입, 좌측 정렬 유지용) */
    #sod_bsk_list .tbl_head03 td.td_price::before { content: "판매가";     font-size: 12px; color: #888; }
    #sod_bsk_list .tbl_head03 td.td_num::before   { content: "수량";       font-size: 12px; color: #888; }
    #sod_bsk_list .tbl_head03 td.td_dvr::before   { content: "배송비";     font-size: 12px; color: #888; }
    #sod_bsk_list .tbl_head03 td.td_point::before { content: "적립포인트"; font-size: 12px; color: #888; }

    /* 소계 - 하단 전체 폭, 흰 배경, 굵게 강조 */
    #sod_bsk_list .tbl_head03 td.td_subtotal {
        grid-area: subtotal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        padding: 12px 0 0;
        margin-top: 8px;
        border-top: none;
        font-weight: bold;
        white-space: nowrap;
    }
    #sod_bsk_list .tbl_head03 td.td_subtotal::before { content: "소계"; color: #555; font-weight: normal; }
    #sod_bsk_list .tbl_head03 td.td_subtotal .total_prc { color: #3a8afd; font-size: 1.2em; }
}

/* 장바구니(cart.php) 소계 - 데스크톱 폭에서 금액 개행 방지 */
#sod_bsk_list .tbl_head03 td.td_subtotal {
    white-space: nowrap;
}

/* 주문서 작성 (orderform.php) - 판매가/소계 칸 데스크톱 폭에서 금액 개행 방지 */
#sod_list td.td_numbig {
    white-space: nowrap;
}

/* 주문서 작성 (orderform.php) */
#od_tot_price strong {
    color: #000000;
}
/* 주문서 작성 (orderform.php) - 모바일 대응 */
@media screen and (max-width: 768px) {

    /* 좌(주문자/받으시는분 입력) + 우(결제요약/결제수단) 2단 레이아웃 해제 */
    .sod_left {
        float: none;
        width: 100%;
        margin-right: 0;
    }
    .sod_right {
        float: none;
        width: 100%;
        height: auto;
    }

    /* 주문상품 목록 표 - 장바구니와 동일하게 카드형으로 전환 */
    #sod_frm .od_prd_list .tbl_head03 table thead {
        display: none;
    }
    #sod_frm .od_prd_list .tbl_head03 table,
    #sod_frm .od_prd_list .tbl_head03 tbody {
        display: block;
        width: 100%;
    }
    #sod_frm .od_prd_list .tbl_head03 tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prd   prd"
            "price qty"
            "dvr   point"
            "subtotal subtotal";
        column-gap: 10px;
        margin-bottom: 15px;
        padding: 15px;
        border: none;
        border-radius: 8px;
        background: #fff;
    }
    #sod_frm .od_prd_list .tbl_head03 tbody tr td {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 0;
        border-top: none;
        border-left: none;
    }
    #sod_frm .od_prd_list .tbl_head03 td.td_prd {
        grid-area: prd;
        display: flex;
        gap: 10px;
        padding-left: 0;
        min-height: 0;
    }
    #sod_frm .od_prd_list .tbl_head03 td.td_prd .sod_img {
        position: static;
        flex: 0 0 70px;
    }
    #sod_frm .od_prd_list .tbl_head03 td.td_prd .sod_img img {
        width: 70px;
        height: 70px;
        display: block;
    }
    #sod_frm .od_prd_list .tbl_head03 td.td_prd .sod_name {
        flex: 1;
        min-height: 0;
    }
    /* 총수량 (2번째 열) */
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(2) {
        grid-area: qty;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 판매가 (3번째 열) */
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(3) {
        grid-area: price;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 소계 (4번째 열, total_price 포함) - 하단 전체 폭 강조 */
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(4) {
        grid-area: subtotal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0 0;
        margin-top: 8px;
        border-top: none;
        font-weight: bold;
    }
    /* 포인트 (5번째 열) */
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(5) {
        grid-area: point;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 배송비 */
    #sod_frm .od_prd_list .tbl_head03 td.td_dvr {
        grid-area: dvr;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(2)::before { content: "총수량"; font-size: 12px; color: #888; }
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(3)::before { content: "판매가"; font-size: 12px; color: #888; }
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(4)::before { content: "소계";   font-size: 12px; color: #555; font-weight: normal; }
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(5)::before { content: "포인트"; font-size: 12px; color: #888; }
    #sod_frm .od_prd_list .tbl_head03 td.td_dvr::before { content: "배송비"; font-size: 12px; color: #888; }
    #sod_frm .od_prd_list .tbl_head03 tbody tr td:nth-child(4) .total_price { color: #3a8afd; font-size: 1.2em; }

    /* 주문하시는 분 / 받으시는 분 입력폼 - 라벨을 입력창 위로 배치 */
    #sod_frm .tbl_frm01 tr {
        display: block;
        margin-bottom: 6px;
    }
    #sod_frm .tbl_frm01 th,
    #sod_frm .tbl_frm01 td {
        display: block;
        width: 100%;
        line-height: normal;
        padding: 6px 10px;
    }
    #sod_frm .tbl_frm01 th {
        padding-bottom: 4px;
        font-weight: bold;
    }

    /* 40%로 고정되어 있던 입력창들을 전체 폭으로 */
    #sod_frm #od_name,
    #sod_frm #od_tel,
    #sod_frm #od_hp,
    #sod_frm #od_pwd,
    #sod_frm #od_b_name,
    #sod_frm #od_b_tel,
    #sod_frm #od_b_hp,
    #sod_frm #ad_subject,
    #sod_frm #od_hope_date {
        width: 100%;
        box-sizing: border-box;
    }

    /* 배송지선택(주문자와 동일/기본배송지/최근배송지 등) 라디오 목록 줄바꿈 정리 */
    #sod_frm .order_choice_place {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 10px;
    }

    /* 주문요약 박스(#sod_bsk_tot) - 3열 박스형을 좌우 정렬 리스트로 전환 */
    #sod_frm #sod_bsk_tot li {
        float: none;
        width: 100%;
        height: auto;
        padding: 12px 15px;
    }
    #sod_frm #sod_bsk_tot li::after {
        display: block;
        clear: both;
        content: "";
    }

    /* 결제수단 아이콘 - 2열을 1열로 전환해 터치영역 확보 */
    #od_pay_sl .lb_icon {
        width: 100%;
    }

    /* 쿠폰 적용 팝업 - 고정폭(500~540px)이 화면 밖으로 잘리는 문제 수정 */
    #sod_list #cp_frm {
        width: 90%;
        max-width: 400px;
        left: 5%;
        margin-left: 0;
    }
    #sod_frm_pay #sc_coupon_frm,
    #sod_frm_pay #od_coupon_frm {
        width: 90%;
        max-width: 400px;
        right: 5%;
    }

	/* 장바구니 하단 요약바(#sod_bsk_tot: 배송비/포인트/총계 가격) - 라벨 한 줄 + 값 한 줄로 배치 */
	/* cart.php에서 각 li의 단위(원/점)를 <strong> 태그 안으로 옮겨서(단독 텍스트 노드 제거) grid 배치가 정확히 되도록 함 */
    #sod_bsk #sod_bsk_tot ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto;
    }
    #sod_bsk #sod_bsk_tot li {
        display: contents;
    }
    /* li가 display:contents가 되면 li 자체에 걸려있던 background/color가 사라지므로,
       실제 그리드 칸이 되는 span/strong에 직접 배경색/글자색을 다시 지정 */
    #sod_bsk #sod_bsk_tot li span,
    #sod_bsk #sod_bsk_tot li strong {
        text-align: center;
        color: #fff;
        background: #4a505a;
        padding: 10px 5px;
    }
    #sod_bsk #sod_bsk_tot li span {
        grid-row: 1;
    }
    #sod_bsk #sod_bsk_tot li strong {
        grid-row: 2;
    }
    #sod_bsk #sod_bsk_tot li:nth-child(1) span,
    #sod_bsk #sod_bsk_tot li:nth-child(1) strong { grid-column: 1; }
    #sod_bsk #sod_bsk_tot li:nth-child(2) span,
    #sod_bsk #sod_bsk_tot li:nth-child(2) strong {
        grid-column: 2;
        border-left: 1px solid #212a37;
    }
    #sod_bsk #sod_bsk_tot li:nth-child(3) span,
    #sod_bsk #sod_bsk_tot li:nth-child(3) strong {
        grid-column: 3;
        border-left: 1px solid #212a37;
        background: #212a37;
    }

}

/* 주문상세내역 (orderinquiryview.php) - 공통 */
	/* 결제정보(#sod_fin_pay) 라벨(주문번호/주문일시/결제방식 등)이 50px 고정폭 때문에 글자 단위로 줄바꿈되는 문제 수정 */
#sod_fin_pay li > strong,
#sod_fin_pay li>span {
	width: auto;
	white-space: nowrap;
}

/* 주문상세내역 (orderinquiryview.php) - 모바일 대응 */
/* .sod_left / .sod_right 2단 레이아웃 해제는 위 orderform 블록의 공통 규칙을 그대로 사용 */
@media screen and (max-width: 768px) {

    /* 주문하신 상품 표 - 카드형으로 전환 (7열: 상품명/총수량/판매가/포인트/배송비/소계/상태) */
    #sod_fin_list .tbl_head03 table thead {
        display: none;
    }
    #sod_fin_list .tbl_head03 table,
    #sod_fin_list .tbl_head03 tbody {
        display: block;
        width: 100%;
    }
    #sod_fin_list .tbl_head03 tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "prd      prd"
            "price    qty"
            "dvr      point"
            "subtotal status";
        column-gap: 10px;
        margin-bottom: 15px;
        padding: 15px;
        border: none;
        border-radius: 8px;
        background: #fff;
    }
    #sod_fin_list .tbl_head03 tbody tr td {
        display: block;
        width: auto;
        min-width: 0;
        min-height: 0;
        border-top: none;
        border-left: none;
    }
    #sod_fin_list .tbl_head03 td.td_prd {
        grid-area: prd;
        display: flex;
        gap: 10px;
        padding-left: 0;
        min-height: 0;
    }
    #sod_fin_list .tbl_head03 td.td_prd .sod_img {
        position: static;
        flex: 0 0 70px;
    }
    #sod_fin_list .tbl_head03 td.td_prd .sod_img img {
        width: 70px;
        height: 70px;
        display: block;
    }
    /* 총수량 (2번째 열) */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(2) {
        grid-area: qty;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 판매가 (3번째 열) */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(3) {
        grid-area: price;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 포인트 (4번째 열) */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(4) {
        grid-area: point;
        padding: 10px 0 10px 12px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 배송비 (5번째 열) */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(5) {
        grid-area: dvr;
        padding: 10px 12px 10px 0;
        border-right: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    /* 소계 (6번째 열) - 강조 */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(6) {
        grid-area: subtotal;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0 0;
        margin-top: 8px;
        border-top: none;
        font-weight: bold;
        color: #3a8afd;
    }
    /* 상태 (7번째 열) */
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(7) {
        grid-area: status;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 12px 0 0;
        margin-top: 8px;
    }

    #sod_fin_list .tbl_head03 tbody tr td:nth-child(2)::before { content: "총수량"; font-size: 12px; color: #888; }
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(3)::before { content: "판매가"; font-size: 12px; color: #888; }
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(4)::before { content: "포인트"; font-size: 12px; color: #888; }
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(5)::before { content: "배송비"; font-size: 12px; color: #888; }
    #sod_fin_list .tbl_head03 tbody tr td:nth-child(6)::before { content: "소계";   font-size: 12px; color: #555; font-weight: normal; }

}


/* menalab S */



/* 6. 하단 탭 메뉴 (기존 유지) */
.tab_tit {
    display: flex;
    list-style: none;
    padding: 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.tab_tit li {
    flex: 1;
    text-align: center;
}

.tab_tit li button {
    width: 100%;
    padding: 25px 0;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    color: #aaa;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.tab_tit li button.selected {
    color: #000;
}

.tab_tit li button.selected::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
}


/* 영카트 기본 카테고리 제거 */
#aside {
	display: none;
}

#container .is_index {
	margin-left: 0;
}

/* 서브타이틀과 전체콘텐츠 사이에 카테고리 추가 */
#gnb_tabs_wrapper {
    width: 100%;
    background: #f6f6f6;
    border: 1px solid #dddddd;
	scroll-margin-top: 90px;
}

#gnb_tabs_wrapper ul {
	max-width: 1560px;
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0 auto;
    list-style: none;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    background: #f6f6f6;
    overflow: hidden;
}

#gnb_tabs_wrapper .tab_item {
    flex: 1;
    min-width: 0;
    border-right: 1px solid #dddddd;
}

#gnb_tabs_wrapper .tab_item:last-child {
    border-right: none;
}

#gnb_tabs_wrapper .tab_link {
    display: block;
    padding: 15px 5px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 활성화된 탭 스타일: 요청하신 배경색 #e4b9f9 */
#gnb_tabs_wrapper .tab_link.active {
    background-color: #e4b9f9;
    color: #000000;
    font-weight: 700;
}

#gnb_tabs_wrapper .tab_link:hover:not(.active) {
    background-color: #ececec;
}