@charset "utf-8";
/* ----------------------------------------------------------------------------------------
 * xendurance 스킨 보정 CSS
 *
 * Nutriax 템플릿(custom.css)은 그대로 두고, 우리 쇼핑몰에 맞춰 고쳐야 하는 부분만
 * 이 파일에 모읍니다. header.php 에서 항상 "가장 마지막"에 로드되므로 여기 선언이 이깁니다.
 *
 * 규칙
 *  - 템플릿 원본 파일(custom.css 등)은 되도록 수정하지 않습니다.
 *  - 페이지를 하나씩 전환할 때 필요한 보정 CSS를 이 파일 아래쪽에 계속 추가하세요.
 *
 * 목차
 *  01. 한글 폰트 / 공통
 *  02. 동영상 히어로 (메인 상단 배너)
 *  03. 헤더 액션 아이콘 배지 (장바구니 / 관심상품 수량)
 *  04. 메인 카테고리 (메뉴 기반)
 *  05. 상품 카드 보정 (원화 표기 / 별점)
 *  06. 메인 배너 슬라이더
 *  07. 관리자 팝업 레이어
 *  08. CEO 소개 (/ceo/history, /ceo/founder, /ceo/korea, /ceo/vision)
 *  09. 석세스 리듬 (/business/success)
 *  10. 보상플랜 (/education/plan)
 *  11. 찾아오시는 길 (/company/location)
 *  12. 게시판 (쇼핑몰 스킨) (/board/lists/{게시판}, /board/views/{게시판}/{번호})
 *  13. 상품상세 구성품 (BOM) (/shop/product/detail/{번호})
 *  14. 결제 페이지 버튼 색 (/shop/checkout)
 *  15. 쇼핑몰 버튼 색 통일 (구 스킨 잔재 정리)
 *  16. 주문내역 조회 (/shop/order)
 *  17. 주문 상세조회 버튼 · 페이지헤더 높이
 *  18. 주문 상세 - 구성품 · 상품 블록
 *  19. 주문 상세 - 배송지정보 · 결제 정보 표
 *  20. 주문 상세 - 이용안내
 *  21. 주문 상세 - 창고별 배송정보
 * ---------------------------------------------------------------------------------------- */


/* ========================================================================================
 * 01. 한글 폰트 / 공통
 *  템플릿 기본 폰트는 'Stack Sans Headline' 이고 한글 글리프가 없습니다.
 *  그래서 한글은 OS 기본 고딕으로 떨어지도록 fallback 을 뒤에 붙입니다.
 * ======================================================================================== */
:root {
	--xen-korean-font: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", sans-serif;
}

body,
input, textarea, select, button {
	font-family: "Stack Sans Headline", var(--xen-korean-font);
}

/* 한글은 letter-spacing 을 좁게 잡아야 자연스럽습니다 */
body {
	letter-spacing: -0.01em;
	word-break: keep-all;
}


/* ========================================================================================
 * 02. 동영상 히어로 (메인 상단 배너)
 *  .hero 원본은 hero-bg-image.jpg 를 CSS 배경으로 씁니다.
 *  .hero-video 를 함께 주면 배경 이미지를 끄고 <video> 를 꽉 채워 깔아줍니다.
 *  (원본의 .parallaxie 는 붙이지 않습니다 — transform 패럴랙스와 object-fit 이 충돌)
 * ======================================================================================== */
.hero.hero-video {
	position: relative;
	overflow: hidden;
	background-image: none;
	background-color: var(--primary-color);
}

.hero.hero-video .hero-bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.hero.hero-video .hero-bg-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 동영상 위 텍스트 가독성 확보용 오버레이 */
.hero.hero-video .hero-bg-video::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(41, 8, 4, 0.80) 0%, rgba(41, 8, 4, 0.45) 55%, rgba(41, 8, 4, 0.15) 100%);
}

.hero.hero-video > .container {
	position: relative;
	z-index: 2;
}

@media only screen and (max-width: 767px) {
	/* 모바일에서는 세로 영상 비율이 과하게 커지지 않도록 높이를 줄입니다 */
	.hero.hero-video {
		min-height: 520px;
	}
	.hero.hero-video .hero-bg-video::after {
		background: rgba(41, 8, 4, 0.55);
	}
}


/* ========================================================================================
 * 03. 헤더 액션 아이콘 배지 (장바구니 / 관심상품 수량)
 * ======================================================================================== */
.header-action-details ul li {
	position: relative;
}

.header-action-details .action-count {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--accent-color);
	color: var(--white-color);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}

/* 수량 0 이면 배지를 숨깁니다 */
.header-action-details .action-count.is-zero {
	display: none;
}

/* 비로그인/로그인 텍스트 링크 */
.header-action-details .action-text {
	display: inline-block;
	margin-left: 6px;
	font-size: 14px;
	color: var(--primary-color);
	white-space: nowrap;
}


/* ========================================================================================
 * 04. 메인 카테고리 (메뉴 기반)
 *  원본 .category-item 은 카테고리 이미지를 전제로 합니다.
 *  우리는 메뉴(nv_nav)에 이미지가 없는 경우가 많아 아이콘/텍스트만으로도 보기 좋게 보정합니다.
 * ======================================================================================== */
.category-item .category-item-image.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	background: var(--secondary-color);
	border-radius: 12px;
}

.category-item .category-item-image.is-empty i {
	font-size: 44px;
	color: var(--accent-color);
}


/* ========================================================================================
 * 05. 상품 카드 보정 (한 줄 개수 / 슬라이더 / 원화 표기 / 별점)
 * ======================================================================================== */

/* --- 한 줄 개수 -----------------------------------------------------------------------
 * custom.css 의 .product-item 은 width:calc(25% - 7.5px) 로 4열이 고정입니다.
 * 관리자 > 쇼핑몰설정 > 스킨설정의 "한 줄 개수"를 반영하려고
 * main.20.skin.php 가 --xen-cols 변수를 넘겨줍니다. (.product-item-list 의 gap 은 10px)
 * 데스크톱만 덮어쓰고 태블릿/모바일은 템플릿 기본 반응형(2열)을 그대로 따릅니다.
 * ------------------------------------------------------------------------------------- */
/*
 * 폭을 calc 로 계산하면 .product-item-list 의 gap 값(화면마다 10px/15px 로 다름)과
 * 어긋나 마지막 카드가 아래로 밀립니다. 그리드로 칸을 나눠 정확히 맞춥니다.
 */
@media only screen and (min-width: 1025px) {
	.page-products .product-item-list.xen-cols,
	.product-item-list.xen-cols {
		display: grid;
		grid-template-columns: repeat(var(--xen-cols, 4), minmax(0, 1fr));
		gap: 20px;
	}

	.page-products .product-item-list.xen-cols > .product-item,
	.product-item-list.xen-cols > .product-item {
		width: auto !important;
		max-width: none;
		margin: 0;
		padding: 25px;
	}
}

/* 태블릿·모바일은 2열 */
@media only screen and (max-width: 1024px) {
	.page-products .product-item-list.xen-cols,
	.product-item-list.xen-cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.page-products .product-item-list.xen-cols > .product-item,
	.product-item-list.xen-cols > .product-item {
		width: auto !important;
		max-width: none;
		margin: 0;
	}
}

/* --- 슬라이더 안의 카드 ---------------------------------------------------------------
 * main.10.skin.php(Swiper)에서는 .swiper-slide 가 폭을 정하므로
 * .product-item 의 25% 고정폭을 반드시 해제해야 합니다.
 * ------------------------------------------------------------------------------------- */
.xen-product-slider .swiper-slide > .product-item {
	width: 100%;
	height: auto;
}

/* 슬라이드 높이를 서로 맞춥니다 */
.xen-product-slider .swiper-slide {
	height: auto;
	display: flex;
}

/* 카드 내부 여백 : 좁은 카드에서는 40px 이 과합니다 */
@media only screen and (max-width: 1199px) {
	.product-item {
		padding: 24px;
	}
}

/* 원화는 자릿수가 길어서 줄바꿈을 허용합니다 */
.product-item-price h3 {
	word-break: keep-all;
}

/* 정상가(취소선) */
.product-item-price h3 span {
	text-decoration: line-through;
}

/* 회원가 안내 뱃지 */
.product-item-price .price-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 400;
	color: var(--accent-color);
	text-decoration: none;
}

/* 별점 - 채워지지 않은 별은 흐리게 */
.product-item-rating i.is-off {
	opacity: 0.28;
}

/* 상품이 없을 때 안내 */
.xen-empty-items {
	width: 100%;
	padding: 60px 20px;
	text-align: center;
	color: var(--text-color);
	background: var(--secondary-color);
	border-radius: 12px;
}


/* ========================================================================================
 * 06. 메인 배너 슬라이더
 * ======================================================================================== */
.xen-banner-slider {
	overflow: hidden;
	border-radius: 12px;
}

.xen-banner-slider .swiper-slide img {
	display: block;
	width: 100%;
	height: auto;
}

.xen-banner-slider .swiper-pagination {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 2;
}

.xen-banner-slider .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	margin: 0 4px;
	background: var(--white-color);
	opacity: 0.5;
	border-radius: 50%;
	display: inline-block;
	cursor: pointer;
}

.xen-banner-slider .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--accent-color);
}


/* ========================================================================================
 * 07. 관리자 팝업 레이어
 *  기존 basic 스킨의 팝업 마크업(.popup-overlay / .popup-container)을 그대로 쓰기 때문에
 *  거기에 필요한 스타일을 여기에 정의합니다.
 * ======================================================================================== */
.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1080;
}

.popup-container {
	position: absolute;
	display: flex;
	flex-direction: column;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	background: var(--white-color);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--divider-color);
}

.popup-header h2 {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
}

.popup-close {
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	color: var(--text-color);
	cursor: pointer;
}

.popup-content {
	flex: 1 1 auto;
	padding: 16px;
	overflow: auto;
}

.popup-content img {
	max-width: 100%;
	height: auto;
}

.popup-footer {
	flex: 0 0 auto;
	padding: 12px 16px;
	border-top: 1px solid var(--divider-color);
	text-align: right;
}

@media only screen and (max-width: 767px) {
	/* 모바일에서는 관리자가 지정한 좌표/크기를 무시하고 화면에 맞춥니다 */
	.popup-container {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		width: calc(100vw - 24px) !important;
		height: auto !important;
		max-height: calc(100vh - 40px);
	}
}

/* =============================================================================
 * 카테고리 메가메뉴 (쇼핑몰) - 이미지 카드형
 * -----------------------------------------------------------------------------
 * 관리자 > 메뉴관리에서 하위 메뉴에 "메뉴 이미지"를 올리면
 * layout/nav.php 가 .mega-menu-box--category 구조로 메뉴를 그립니다.
 * 카드(이미지 + 메뉴이름)들을 한 줄로 가운데 정렬해서 보여줍니다.
 * ========================================================================== */
.main-menu .mega-menu-box--category {
	justify-content: center;
}
.mega-menu-box--category .mega-menu-items-list {
	width: 100%;
	justify-content: center;
}
/* 카드 개수에 상관없이 균등하게 늘어나고, 너무 커지지 않도록 상한을 둡니다 */
.mega-menu-box--category .mega-menu-item {
	width: auto;
	flex: 1 1 170px;
	max-width: 220px;
	text-align: center;
}
.mega-menu-box--category .mega-menu-item-content h2 {
	font-size: 18px;
	margin-top: 6px;
}

/* 모바일(슬릭내비) 에서는 카드가 세로로 쌓이므로 폭 제한을 풉니다 */
@media only screen and (max-width: 991px) {
	.mega-menu-box--category .mega-menu-item {
		flex-basis: auto;
		max-width: none;
	}
}

/* =============================================================================
 * 메인 상품 섹션 구분용 배경 (살구색 ↔ 흰색 교대)
 * -----------------------------------------------------------------------------
 * start.php 각 섹션 div 에 xen-bg-white / xen-bg-skin 클래스를 부여해
 * 추천(흰색) → 인기(살구색) → 히트(흰색) → 할인(살구색) 순으로 번갈아 보이게 합니다.
 * .our-products 의 그라데이션 배경을 덮어써야 하므로 background 단축속성 + !important 사용.
 * ========================================================================== */
.xen-bg-white { background: var(--white-color) !important; }
.xen-bg-skin  { background: var(--secondary-color) !important; }

/* 히어로 두번째 줄(설명 문구) - 어두운 히어로 위 흰색 텍스트 */
.hero-content .xen-hero-desc {
	color: var(--white-color);
	font-size: 18px;
	line-height: 1.6;
	margin: 14px 0 26px;
	max-width: 560px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
@media only screen and (max-width: 767px) {
	.hero-content .xen-hero-desc { font-size: 15px; margin: 10px 0 20px; }
}

/* =============================================================================
 * 푸터 하단 인증 로고 (공정거래위원회 / 한국특수판매공제조합)
 * -----------------------------------------------------------------------------
 * 로고 PNG가 투명 배경 + 어두운 글자라 어두운 푸터에서 안 보입니다.
 * 흰색 라운드 박스를 씌워 항상 선명하게 보이도록 처리합니다.
 * ========================================================================== */
.footer-payment-options ul {
	align-items: center;
}
.footer-payment-options ul li img {
	display: block;
	height: 30px;
	width: auto;
	max-width: none;
	background: #fff;
	padding: 7px 12px;
	border-radius: 6px;
	box-sizing: content-box;
}
@media only screen and (max-width: 767px) {
	.footer-payment-options ul li img { height: 24px; padding: 6px 10px; }
}

/* =============================================================================
 * 푸터 혜택 줄 : 기존 "맨위 key-benefit-box(마룬)" 제거 → 이 줄을 그 색으로
 * -----------------------------------------------------------------------------
 * footer-benefits(정품보증/빠른배송/안전결제/고객지원)를 살구색 대신
 * 위 줄과 같은 accent(마룬) 배경 + 흰색 글자/아이콘으로 표시합니다.
 * ========================================================================== */
.footer-benefits.light-section,
.footer-benefits {
	background-color: var(--accent-color) !important;
}
.footer-benefits .footer-benefit-item-content h2,
.footer-benefits .footer-benefit-item-content p {
	color: var(--white-color);
}
/* 아이콘(SVG)을 어두운 배경에서도 보이도록 흰색으로 */
.footer-benefits .footer-benefit-item .icon-box img {
	filter: brightness(0) invert(1);
}
/* 항목 사이 구분선 : 흰색 반투명 */
.footer-benefits .footer-benefit-item::before {
	background: rgba(255, 255, 255, 0.35) !important;
}

/* =============================================================================
 * 맨 하단 배너 - 좌우슬라이더(leftright) : 여러 카드가 보이는 가로 캐러셀 + 화살표
 * ========================================================================== */
.xen-lr-slider { padding: 10px 0; position: relative; }
.xen-lr-slider .swiper-slide {
	height: auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.xen-lr-slider .swiper-slide a,
.xen-lr-slider .swiper-slide img {
	display: block;
	width: 100%;
	border-radius: 12px;
}
/* 좌우 화살표 */
.xen-lr-slider .swiper-button-prev,
.xen-lr-slider .swiper-button-next {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	color: var(--primary-color);
	margin-top: -22px;
}
.xen-lr-slider .swiper-button-prev { left: 6px; }
.xen-lr-slider .swiper-button-next { right: 6px; }
.xen-lr-slider .swiper-button-prev::after,
.xen-lr-slider .swiper-button-next::after {
	font-size: 18px;
	font-weight: 700;
}

/* =============================================================================
 * 메인 중간 배너(main_type_2) - 배경(mainSocialBg) + 3개 좌우 배치(에디터 영상 포함)
 * -----------------------------------------------------------------------------
 * PC(≥992px): 3열 좌우 배치 / 모바일: 세로 3개. 하단 배너와 배경으로 구분됩니다.
 * ========================================================================== */
.xen-social-banner {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 70px 0;
}
.xen-social-banner .row { row-gap: 30px; }
.xen-social-item { }
.xen-social-item > a,
.xen-social-item > a img {
	display: block;
	width: 100%;
	border-radius: 12px;
}
/* 에디터 내용 카드 */
.xen-social-editor {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	padding: 0 0 14px;
}
.xen-social-editor h3 { font-size: 18px; margin: 14px 16px 4px; }
.xen-social-editor h4 { font-size: 14px; font-weight: 400; line-height: 1.5; margin: 0 16px; color: var(--text-color); }
.xen-social-editor p  { margin: 6px 16px 0; }
.xen-social-editor img { max-width: 100%; height: auto; display: block; }

/* 에디터에 넣은 영상(유튜브 등) : 저장 시 aspect 래퍼 style 이 제거돼도 16:9 로 보이게 강제 */
.xen-social-editor figure.media,
.xen-social-editor .media { position: relative; margin: 0; }
.xen-social-editor figure.media > div,
.xen-social-editor [data-oembed-url] {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
}
.xen-social-editor figure.media iframe,
.xen-social-editor [data-oembed-url] iframe,
.xen-social-editor iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* 메인 배너 섹션 제목 (Xendurance USA / XND Media) */
.xen-banner-title { margin-bottom: 34px; }
.xen-banner-title h2 {
	font-size: 34px;
	line-height: 1.2;
	color: var(--primary-color);
	margin: 0;
}
@media only screen and (max-width: 767px) {
	.xen-banner-title { margin-bottom: 22px; }
	.xen-banner-title h2 { font-size: 24px; }
}

/* XND Media(메인 하단배너) 섹션 상단 공백 절반으로 축소 (기본 our-offers 120px → 60px) */
.xen-media-section { padding-top: 60px !important; }

/* -----------------------------------------------------------------------------
 * Linearicons 아이콘폰트 오작동 방지
 * -----------------------------------------------------------------------------
 * 구 마크업 페이지(상품상세 등)에서만 싣는 Linearicons 의 demo.css 에
 *   [class*=" icon-"], [class^=icon-] { font-family: Linearicons; ... }
 * 규칙이 있습니다. 새 푸터/헤더의 .icon-box 도 "icon-" 으로 시작해서 걸리는 바람에
 * 아이콘 옆에 작은 회색 글리프가 찍힙니다. 새 테마 영역에서는 무효화합니다.
 * -------------------------------------------------------------------------- */
.footer-benefit-item .icon-box,
.header-action-details .icon-box,
.about-us-item .icon-box,
.key-benefit-item .icon-box {
	font-family: var(--default-font) !important;
	font-feature-settings: normal !important;
	font-size: 0 !important;			/* 남아 있는 텍스트 노드까지 안 보이게 */
}

.footer-benefit-item .icon-box::before,
.footer-benefit-item .icon-box::after,
.header-action-details .icon-box::before,
.header-action-details .icon-box::after,
.about-us-item .icon-box::before,
.about-us-item .icon-box::after,
.key-benefit-item .icon-box::before,
.key-benefit-item .icon-box::after {
	content: none !important;
}

/* 아이콘 이미지는 원래 크기 유지 */
.footer-benefit-item .icon-box img,
.header-action-details .icon-box img,
.about-us-item .icon-box img,
.key-benefit-item .icon-box img { font-size: 16px; }

/* -----------------------------------------------------------------------------
 * 마우스를 따라다니는 점(매직커서) 제거
 * -----------------------------------------------------------------------------
 * layout/header.php 의 mousecursor.css 와 layout/footer.php 의 magiccursor.js 를
 * 주석 처리했습니다. 다만 custom.css 가 아래 요소들에 cursor:none 을 걸어둬서
 * 그대로 두면 그 위에서 마우스 포인터 자체가 사라집니다. 되돌려 줍니다.
 * -------------------------------------------------------------------------- */
.page-header-box h1,
.section-title h1,
.section-title h2,
.category-item-image a,
.featured-product-item-image a,
.quality-products-item-image a,
.post-item-image a,
.latest-update-video a,
.video-play-button a,
.best-selling-product-img-item .swiper-slide,
.best-selling-product-img-slider .swiper-wrapper,
.testimonials-slider .swiper-wrapper {
	cursor: auto;
}

.category-item-image a,
.featured-product-item-image a,
.quality-products-item-image a,
.post-item-image a,
.latest-update-video a,
.video-play-button a {
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * preloader : 관리자 > 테마관리에 등록한 "사이트 아이콘"을 크게 보여줍니다.
 * 아이콘만 키우면 회전하는 원 밖으로 삐져나오므로 원도 함께 키웁니다.
 * (템플릿 기본값 : 원 100px / 아이콘 66px)
 * -------------------------------------------------------------------------- */
.loading-container,
.preloader .loading {
	width: 170px !important;
	height: 170px !important;
}

#loading-icon { max-width: 130px !important; }

@media only screen and (max-width: 767px) {
	.loading-container,
	.preloader .loading {
		width: 130px !important;
		height: 130px !important;
	}
	#loading-icon { max-width: 96px !important; }
}

/* =============================================================================
 * 로그인 / 회원가입 / 찾기 페이지 공통 좌우 여백
 * -----------------------------------------------------------------------------
 * 템플릿 기본 .container 좌우 여백이 15px 라서, 화면 폭이 1300px 보다 좁아지면
 * 제목과 입력칸이 화면 왼쪽 끝에 붙어 보입니다. 이 화면들만 여백을 넓힙니다.
 * (상단 제목과 본문이 같은 선에 맞도록 세 섹션에 같은 값을 줍니다)
 * ========================================================================== */
.page-header .container,
.page-login .container,
.page-forgot-password .container {
	padding-left: 30px;
	padding-right: 30px;
}

@media only screen and (max-width: 767px) {
	.page-header .container,
	.page-login .container,
	.page-forgot-password .container {
		padding-left: 25px;
		padding-right: 25px;
	}
}

/* =============================================================================
 * 로그인 페이지 (user/login.php)
 * 원본 템플릿은 좌 = 로그인폼 / 우 = 회원가입폼 이지만,
 * 우리는 우측을 loginBg.png 이미지로 대체했습니다.
 * ========================================================================== */

/* 좌우 높이를 맞춰 이미지가 폼과 같은 높이로 늘어나게 합니다 */
.page-login .login-content-box { align-items: stretch; }

/* 오른쪽 이미지 칸 */
.login-content-image-item { display: flex; }

.login-content-image {
	width: 100%;
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

.login-content-image img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 아이디찾기 / 비밀번호찾기 / 회원가입 링크 줄 */
.login-content-form-btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
}

.login-content-form-btn a { font-size: 16px; }

/* 캡챠 : 이미지 + 새로고침 버튼 */
.login-captcha-box {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.login-captcha-box img {
	border: 1px solid var(--divider-color);
	border-radius: 10px;
}

.login-captcha-refresh {
	width: 42px;
	height: 42px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	background: transparent;
	color: var(--primary-color);
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.login-captcha-refresh:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* 태블릿 이하 : 이미지는 폼 아래로 내려가므로 높이를 줄입니다 */
@media only screen and (max-width: 991px) {
	.login-content-image img { min-height: 260px; }
}

@media only screen and (max-width: 767px) {
	.login-content-image { border-radius: 14px; }
	.login-content-image img { min-height: 200px; }
	.login-content-form-btn { gap: 8px 18px; }
	.login-content-form-btn a { font-size: 15px; }
}

/* =============================================================================
 * 아이디 / 비밀번호 찾기 (user/find_*.php, user/password_reset.php)
 * 로그인 페이지와 같은 2단(좌 폼 / 우 이미지) 구성을 씁니다.
 * ========================================================================== */

/* 찾는 방법(이메일 / 휴대폰번호) 라디오 */
.find-method-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	padding: 4px 0;
}

.find-method-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--primary-color);
	cursor: pointer;
	margin: 0;
}

.find-method-item input[type=radio] {
	width: 18px;
	height: 18px;
	accent-color: var(--accent-color);
	margin: 0;
}

/* 휴대폰 번호 3칸 */
.form-phone-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.form-phone-row .form-control { text-align: center; }

.form-phone-row span {
	color: var(--text-color);
	flex: 0 0 auto;
}

/* 입력칸 아래 보조 설명 */
.form-help-text {
	display: block;
	font-size: 14px;
	color: var(--text-color);
	margin-top: 8px;
}

/* 인증번호 받기 : 대상(휴대폰/이메일) + 버튼 */
.find-auth-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 8px 8px 8px 20px;
}

.find-auth-target {
	font-size: 16px;
	font-weight: 500;
	color: var(--primary-color);
	word-break: break-all;
}

.btn-auth-send {
	font-size: 15px;
	padding: 11px 22px;
	flex: 0 0 auto;
}

/* 아이디 찾기 결과 목록 */
.find-result-list dl {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 20px;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.find-result-list dl:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.find-result-list dt {
	flex: 0 0 140px;
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
	margin: 0;
}

.find-result-list dd {
	flex: 1;
	font-size: 16px;
	color: var(--primary-color);
	margin: 0;
	word-break: break-all;
}

.find-result-list dd.is-strong {
	font-size: 22px;
	font-weight: 600;
}

/* 버튼 두 개를 나란히 (확인 / 취소, 로그인 / 비밀번호 찾기) */
.find-result-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* 보조 버튼 : 테두리만 있는 형태 */
.btn-default.btn-outline {
	background: transparent;
	color: var(--primary-color);
	border-color: var(--divider-color);
}

.btn-default.btn-outline:hover {
	color: var(--white-color);
	border-color: var(--primary-color);
}

/* 비밀번호 보기(눈) 버튼 */
.form-password-wrap { position: relative; }

.form-password-wrap .form-control { padding-right: 48px; }

.form-password-wrap .toggle-password {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.form-password-wrap .toggle-password:hover { color: var(--accent-color); }

@media only screen and (max-width: 767px) {
	.find-result-list dt { flex: 0 0 100%; }
	.find-auth-row { padding: 12px; }
	.btn-auth-send { width: 100%; }
}

/* =============================================================================
 * 회원가입 (user/register.php + user/components/register_field.php)
 * 입력 항목은 관리자 가입설정에 따라 자동 생성되며 라벨이 <h5> 로 나옵니다.
 * ========================================================================== */

/* register_field.php 의 <h5> 를 템플릿 라벨과 같게 맞춥니다 */
.checkout-login-form .form-group h5 {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--primary-color);
	margin: 0 0 10px !important;
}

/* 아이디/추천인 중복확인 오류 메시지 */
.checkout-login-form .reg-error {
	font-size: 14px;
	margin-top: 8px;
}

.checkout-login-form .reg-error:empty { display: none; }

/* 우편번호 검색 버튼 (register_field.php 인라인 스타일 위에 덮어씁니다) */
.checkout-login-form .form-group .btn[onclick*="execDaumPostcode"] {
	height: auto !important;
	padding: 12px 20px !important;
	border-radius: 10px !important;
	background-color: var(--primary-color) !important;
	color: var(--white-color) !important;
	font-size: 15px;
	font-weight: 500;
}

/* 성별 등 라디오 묶음 */
.checkout-login-form .radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: center;
}

.checkout-login-form .radio-group input[type=radio] {
	width: 18px !important;
	height: 18px !important;
	padding: 0;
	border: 0;
	accent-color: var(--accent-color);
}

/* --- 가입 단계 표시 (1 약관동의 → 2 정보입력) ----------------------------- */

.register-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.register-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	font-size: 15px;
	font-weight: 500;
	color: var(--text-color);
	border-bottom: 2px solid var(--divider-color);
	padding-bottom: 12px;
	transition: all 0.3s ease-in-out;
}

.register-steps li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--divider-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 600;
	flex: 0 0 auto;
}

.register-steps li.is-active {
	color: var(--primary-color);
	border-bottom-color: var(--accent-color);
}

.register-steps li.is-active span { background: var(--accent-color); }

/* 완료된 단계 */
.register-steps li.is-done { color: var(--primary-color); }
.register-steps li.is-done span { background: var(--accent-color); }

.register-step2-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 40px;
}

.register-step2-btns .btn-default { width: auto; }

/* --- 2단계(정보입력) : 오른쪽 안내 없이 전체 폭으로 -------------------------- */

.page-register-form .login-content-title-box { margin-bottom: 40px; }

/* --- 구역(회원 가입 정보 / 추천인·후원인·센터 / 계좌정보) -------------------- */

.register-group { margin-bottom: 50px; }

.register-group:last-of-type { margin-bottom: 0; }

.register-group-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	border-bottom: 2px solid var(--primary-color);
	padding-bottom: 14px;
	margin: 0 0 0;
}

.register-group-body {
	border-bottom: 1px solid var(--divider-color);
}

/* 한 줄 = [ 라벨(회색) | 입력칸 ] */
.register-group-body .form-group {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	row-gap: 10px;
	border-bottom: 1px solid var(--divider-color);
	margin: 0 !important;
	/*
	 * 위아래 여백은 각 자식이 아니라 이 줄(행)에 줍니다.
	 * 자식에 margin 을 주면, 마지막 자식이 오류메시지(비어 있으면 숨김)일 때
	 * 여백이 같이 사라져 입력칸이 밑줄에 딱 붙어 보입니다.
	 */
	padding: 14px 0;
	/*
	 * 왼쪽 라벨 칸 배경(살구색)은 <h5> 가 아니라 줄 전체에 그라데이션으로 깝니다.
	 * <h5> 에 배경을 주면 안내문구·오류메시지처럼 줄이 두 칸 이상으로 늘어날 때
	 * 아랫줄에는 배경이 없어 흰 띠가 생깁니다.
	 * (grid-row: 1 / -1 은 행을 명시하지 않은 그리드에서는 끝까지 늘어나지 않습니다)
	 */
	background: linear-gradient(to right, var(--secondary-color) 0 220px, transparent 220px);
}

.register-group-body .form-group:last-child { border-bottom: 0; }

/* 라벨 칸 : register_field.php 가 <h5> 로 내보냅니다 */
.register-group-body .form-group > h5 {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4em;
	color: var(--primary-color);
	margin: 0 !important;
	padding: 4px 20px;
}

/* 입력 칸 : <h5> 를 뺀 나머지 자식들 */
.register-group-body .form-group > *:not(h5) {
	grid-column: 2;
	margin: 0 20px;
}

/* 입력칸이 너무 길게 늘어지지 않도록 */
.register-group-body .form-group .form-control { max-width: 520px; }

/* 눈 아이콘이 입력칸 오른쪽 끝에 붙도록 래퍼도 같은 폭으로 */
.register-group-body .form-password-wrap { max-width: 520px; }
.register-group-body .form-password-wrap .form-control { width: 100%; }

.register-group-body .form-group select.form-control { max-width: 320px; }

/* 오류 메시지 / 안내 문구 */
.register-group-body .reg-error { font-size: 14px; }
.register-group-body .reg-error:empty { display: none; margin: 0; }

.register-group-body > .form-help-text,
.register-group-body > span {
	display: block;
	font-size: 14px;
	color: var(--text-color);
	padding: 12px 20px;
	border-bottom: 1px solid var(--divider-color);
	margin: 0;
}

/* hidden input 은 자리를 차지하지 않게 */
.register-group-body > input[type="hidden"] { display: none; }

/* =============================================================================
 * 상품목록 (product/lists.php)
 * ========================================================================== */

/* --- 쇼핑몰 바로가기 메뉴 (알약 필터 바) --------------------------------- */

.xen-shop-nav {
	background: var(--secondary-color);
	padding: 22px 0;
	/* [2026-08-04] 아래 상품목록과 너무 벌어져 있어 60px → 30px 로 줄였습니다 */
	margin-bottom: 30px;
}

/*
 * 바로가기 메뉴와 상품목록 사이 공백
 * ------------------------------------------------------------------------------
 * 템플릿 원본(custom.css)은 .page-products 위아래 여백이 120px 입니다.
 * 알약 메뉴 아래 여백까지 더하면 180px 이나 비어 보여서 위쪽만 절반으로 줄였습니다.
 *   (30px + 60px = 90px)
 * 아래쪽 여백은 페이지 끝 여백이라 원본 120px 그대로 둡니다.
 */
.page-products { padding-top: 60px; }

.xen-shop-nav-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.xen-shop-nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.xen-shop-nav-list li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 44px;
	padding: 0 24px;
	border: 1px solid var(--divider-color);
	border-radius: 999px;
	background: var(--white-color);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--primary-color);
	white-space: nowrap;
	transition: all 0.3s ease-in-out;
}

.xen-shop-nav-list li a:hover {
	border-color: var(--primary-color);
}

/* 현재 보고 있는 메뉴 */
.xen-shop-nav-list li a.is-active {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

@media only screen and (max-width: 767px) {
	.xen-shop-nav { padding: 16px 0; margin-bottom: 40px; }
	.xen-shop-nav-inner { display: block; }
	.xen-shop-nav-list {
		flex-wrap: nowrap;
		justify-content: flex-start;	/* 가로 스크롤이라 왼쪽부터 채웁니다 */
		overflow-x: auto;				/* 좁은 화면에서는 옆으로 밀어서 봅니다 */
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}
	.xen-shop-nav-list li a {
		min-width: auto;
		height: 40px;
		padding: 0 18px;
		font-size: 14px;
	}
}

/* --- 목록 제목 / 상품 수 -------------------------------------------------- */

.product-category-filter-title .xen-total-count {
	font-size: 16px;
	font-weight: 400;
	color: var(--text-color);
	margin-left: 4px;
}

/* =============================================================================
 * 장바구니 (product/cart.php) — 템플릿 cart.html 기준 + 우리 항목 보정
 * ========================================================================== */

.page-cart .xen-page-head { margin-bottom: 40px; }

/* 상품명 아래 옵션 */
.cart-item-option {
	display: block;
	font-size: 14px;
	color: var(--text-color);
	margin-top: 6px;
}

/* 단가/합계 아래 보조 문구 (옵션가·할인가·포인트) */
.cart-item-sub {
	display: block;
	font-size: 13px;
	color: var(--text-color);
	margin-top: 4px;
}

/* 삭제(X) 버튼 */
.cart-item-remove {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: transparent;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.cart-item-remove:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* 삭제 버튼이 들어가면서 수량/합계 폭을 다시 잡습니다 */
.cart-item-quantity-total { flex-wrap: nowrap; }
.cart-item-subtotal { width: auto; flex: 1; text-align: right; }

/* 담은 상품이 없을 때 */
.cart-item-empty {
	text-align: center;
	padding: 70px 20px;
	color: var(--text-color);
}

/* -----------------------------------------------------------------------------
 * 하단 버튼 (쇼핑 계속하기 / 장바구니 비우기 / 전체상품 주문 …)
 * -----------------------------------------------------------------------------
 * 템플릿 .btn-default 는 ::before 로 화살표 아이콘을 오른쪽 30px 에 띄우고
 * padding-right 52px 으로 자리를 비워둡니다. 여기 버튼들은 아이콘 없이 쓰므로
 * 화살표를 끄고 좌우 여백을 같게 맞춥니다. (안 그러면 글자와 화살표가 겹칩니다)
 * -------------------------------------------------------------------------- */
.cart-item-buttons .btn-default {
	padding: 15px 30px;
	text-align: center;
}

.cart-item-buttons .btn-default::before { display: none; }

.cart-item-buttons .btn-default.btn-outline {
	background: transparent;
	border-color: var(--divider-color);
	color: var(--primary-color);
}

.cart-item-buttons .btn-default.btn-outline:hover {
	border-color: var(--primary-color);
	color: var(--white-color);
}

/* 주문요약 금액 줄 */
.order-summary-total {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.order-summary-total:last-child { margin-bottom: 0; }

.order-summary-total h3 {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
	margin: 0;
}

.order-summary-total h3:last-child {
	font-weight: 600;
	color: var(--primary-color);
}

/* 결제금액(합계) 줄은 크게 */
.order-summary-grand h3 { font-size: 20px; color: var(--primary-color); }
.order-summary-grand h3:last-child { color: var(--accent-color); }

/* 주문하기 버튼 */
.order-checkout-button .btn-default {
	width: 100%;
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	padding-right: 30px;
}

.order-checkout-button .btn-default::before { display: none; }

@media only screen and (max-width: 767px) {
	.cart-item-quantity-total { flex-wrap: wrap; }
	.cart-item-subtotal { text-align: left; }
}

/* =============================================================================
 * 관심상품 (product/wishlist.php) — 장바구니와 같은 목록 형식
 * ========================================================================== */

.page-wishlist .xen-page-head p {
	font-size: 15px;
	color: var(--text-color);
	margin: 10px 0 0;
}

.wishlist-item-header,
.wishlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.wishlist-item-header span {
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
}

/* 칸 너비 : 선택 / 상품 / 금액 / 옵션 / 관리 */
.wishlist-check-tag,   .wishlist-item-check          { width: 44px; flex: 0 0 44px; }
.wishlist-product-tag, .wishlist-item-image-content  { width: calc(38% - 44px); }
.wishlist-price-tag,   .wishlist-item-price          { width: 16%; }
.wishlist-status-tag,  .wishlist-item-option         { width: 27%; }
.wishlist-action-tag,  .wishlist-item-action         { width: 15%; }

.wishlist-item-check input[type=checkbox] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent-color);
	cursor: pointer;
}

/*
 * 이미지 칸은 템플릿 기본(80x80, gap 15px)을 그대로 씁니다.
 * 여기서 크기를 바꾸면 .wishlist-item-info-content 의 width: calc(100% - 95px) 와
 * 어긋나서 상품명이 이미지 아래로 줄바꿈됩니다.
 */
.wishlist-item-image-content { display: flex; align-items: center; gap: 15px; }

.wishlist-item-image { flex: 0 0 auto; overflow: hidden; }

.wishlist-item-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* 상품명은 왼쪽 정렬로 (템플릿 기본은 space-between) */
.wishlist-item-info-content { justify-content: flex-start; }

.wishlist-item-title p { margin: 0; font-size: 16px; line-height: 1.5em; }

.wishlist-item-title a {
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.wishlist-item-title a:hover { color: var(--accent-color); }

.wishlist-item-price p {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
}

/* 옵션 목록 */
.wishlist-item-option .option-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wishlist-item-option .option-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--primary-color);
	margin: 0;
	cursor: pointer;
}

.wishlist-item-option .option-item input[type=checkbox] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent-color);
}

.wishlist-item-option .opt-price { color: var(--text-color); }

/* 상태 뱃지 */
.xen-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.xen-tag--none    { background: var(--secondary-color); color: var(--text-color); }
.xen-tag--soldout { background: #fdecea; color: #c62828; }

/* 관리 버튼 (장바구니 / 바로구매 / 삭제) */
.wishlist-item-action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.wishlist-act-btn {
	width: 38px;
	height: 38px;
	border: 1px solid var(--divider-color);
	border-radius: 50%;
	background: transparent;
	color: var(--primary-color);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

.wishlist-act-btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.wishlist-act-btn.is-cart:hover,
.wishlist-act-btn.is-buy:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.wishlist-act-btn.is-remove:hover {
	background: #c62828;
	border-color: #c62828;
}

@media only screen and (max-width: 991px) {
	.wishlist-item-header { display: none; }		/* 좁은 화면에서는 표 머리를 감춥니다 */

	.wishlist-item { position: relative; padding-left: 34px; }
	.wishlist-item-check { position: absolute; top: 0; left: 0; width: auto; flex: none; }
	.wishlist-item-image-content,
	.wishlist-item-price,
	.wishlist-item-option,
	.wishlist-item-action { width: 100%; }
	.wishlist-item-action { justify-content: flex-start; }
}

/* --- 표 형태의 단순 페이지 (그 외) ---------------------------------------- */

.xen-page-head { margin-bottom: 40px; }

.xen-page-head h1 {
	font-size: 40px;
	line-height: 1.2em;
	color: var(--primary-color);
	margin: 0;
}

/* 구 스킨(ps-*) 표를 새 스킨 톤에 맞춥니다 */
.xen-simple-page .table {
	width: 100%;
	border-top: 2px solid var(--primary-color);
	margin-bottom: 30px;
}

.xen-simple-page .table th,
.xen-simple-page .table td {
	border-bottom: 1px solid var(--divider-color);
	padding: 16px 12px;
	vertical-align: middle;
	font-size: 15px;
	color: var(--primary-color);
}

.xen-simple-page .table th {
	background: var(--secondary-color);
	font-weight: 600;
	white-space: nowrap;
}

.xen-simple-page .table img { max-width: 90px; height: auto; }

/* 구 스킨 버튼을 새 스킨 버튼 모양으로 */
.xen-simple-page .ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 26px;
	border: 1px solid var(--accent-color);
	border-radius: 10px;
	background: var(--accent-color);
	font-size: 16px;
	font-weight: 500;
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

.xen-simple-page .ps-btn:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.xen-simple-page .ps-btn--gray,
.xen-simple-page .ps-btn--outline {
	background: transparent;
	border-color: var(--divider-color);
	color: var(--primary-color);
}

.xen-simple-page .ps-section__cart-actions,
.xen-simple-page .ps-section__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.xen-simple-page .ps-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
}

.xen-simple-page .ps-tag--in-stock { background: #e8f5e9; color: #2e7d32; }
.xen-simple-page .ps-tag--soldout  { background: #fdecea; color: #c62828; }

.xen-simple-page { padding-bottom: 100px; }

@media only screen and (max-width: 767px) {
	.xen-page-head h1 { font-size: 28px; }
	.xen-simple-page .table th,
	.xen-simple-page .table td { padding: 12px 8px; font-size: 14px; }
}

/* 사이드바 분류·브랜드는 체크박스가 아니라 링크 목록입니다 */
.xen-category-links { list-style: none; margin: 0; padding: 0; }

.xen-category-links li {
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.xen-category-links li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}

.xen-category-links li a {
	display: block;
	font-size: 16px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.xen-category-links li a:hover { color: var(--accent-color); }

/**
 * 테마 기본값 덮어쓰기
 * ------------------------------------------------------------------------------
 * 테마에 .product-category-item ul li { display:flex } 가 걸려 있습니다(체크박스 목록용).
 * 그대로 두면 분류 링크와 하위 분류 목록이 좌우로 나란히 붙어버립니다.
 * 선택자 우선순위(0,1,2)를 이기려고 .product-category-item 을 앞에 붙였습니다.
 */
.product-category-item ul.xen-category-links > li,
.product-category-item ul.xen-category-sublinks > li {
	display: block;
}

/* 현재 보고 있는 분류 강조 */
.xen-category-links li a.is-active {
	color: var(--accent-color);
	font-weight: 700;
}

/* 상품이 0건인 분류 - 링크는 살리되 흐리게 */
.xen-category-links li a.is-empty { opacity: 0.5; }

/* 분류 옆 상품 수 (예: 패키지 (41)) */
.xen-category-links .xen-cat-count {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #6b6b6b;
}

.xen-category-links li a:hover .xen-cat-count,
.xen-category-links li a.is-active .xen-cat-count {
	color: inherit;
}

/* 하위 분류 (예: 패키지 > VIP팩 / 파워팩, 오토십 > VIP오토십 / 일반오토십) */
.product-category-item ul.xen-category-sublinks {
	list-style: none;
	margin: 14px 0 4px;
	padding: 0 0 0 22px;          /* 세로 구분선과 글자 사이 여백 */
	border-left: 2px solid var(--divider-color);
}

.product-category-item ul.xen-category-sublinks > li {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 14px;
}

.product-category-item ul.xen-category-sublinks > li:last-child { margin-bottom: 0; }

.xen-category-sublinks li a { font-size: 15px; }

.xen-category-sublinks .xen-cat-count { font-size: 13px; }

/* 페이지 번호 */
.xen-pagination { margin-top: 50px; }

.xen-pagination .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.xen-pagination .pagination li a,
.xen-pagination .pagination li span,
.xen-pagination .pagination a,
.xen-pagination .pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	font-size: 15px;
	color: var(--primary-color);
	transition: all 0.3s ease-in-out;
}

.xen-pagination .pagination a:hover,
.xen-pagination .pagination .active a,
.xen-pagination .pagination strong {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* 상품이 없을 때 */
.product-item-list-box .xen-empty-items {
	text-align: center;
	padding: 80px 20px;
	color: var(--text-color);
}

/* -----------------------------------------------------------------------------
 * 분류 사이드바 : 모바일에서는 접었다 펴기 (아코디언)
 * -----------------------------------------------------------------------------
 * [2026-08-04] 모바일(991px 이하)은 사이드바가 상품목록 위로 내려옵니다.
 *   분류가 20개 넘게 길어서 상품을 보려면 한참 스크롤해야 한다는 의견이 있었습니다.
 *   그래서 모바일에서는 "분류" 줄만 남기고 목록은 접어둡니다.
 *   제목을 누르면 .is-open 이 붙어 아래로 펼쳐집니다. (JS 는 스킨 파일 하단)
 * PC 는 아래 규칙이 적용되지 않으므로 항상 펼쳐진 상태 그대로입니다.
 * -------------------------------------------------------------------------- */

/* 펼침 화살표 : PC 에서는 숨깁니다 (모바일에서만 필요) */
.xen-cat-arrow { display: none; }

@media only screen and (max-width: 991px) {

	/* 접혀 있을 때는 아래 여백을 줄여 상품이 빨리 올라오게 합니다 */
	.page-single-sidebar { margin-bottom: 20px; }

	/* "분류" 줄 전체를 누를 수 있게 넓히고, 버튼처럼 보이게 합니다 */
	.xen-cat-side .product-category-filter-title {
		flex: 1;
		max-width: none;			/* 테마 기본값 50% 해제 */
		cursor: pointer;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	/* 접힌 상태에서는 아래 구분선/여백이 과하지 않게 */
	.xen-cat-side .product-category-filter-header {
		padding-bottom: 14px;
		margin-bottom: 0;
	}

	/* 펼쳐진 다음에만 목록 위 여백을 줍니다 */
	.xen-cat-side.is-open .product-category-filter-header { margin-bottom: 20px; }

	/* 화살표 (▾) : 테두리 두 변만 남겨 꺾쇠를 그립니다 */
	.xen-cat-arrow {
		display: inline-block;
		width: 8px;
		height: 8px;
		margin-left: 4px;
		border-right: 2px solid var(--primary-color);
		border-bottom: 2px solid var(--primary-color);
		transform: rotate(45deg);		/* 아래쪽 꺾쇠 */
		transform-origin: center;
		transition: transform 0.3s ease-in-out;
	}

	/* 펼쳐지면 화살표를 위로 뒤집습니다 */
	.xen-cat-side.is-open .xen-cat-arrow { transform: rotate(-135deg); }

	/* 목록 : 기본은 접힘 (높이 0) */
	.xen-cat-side .product-category-item-list {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease-in-out;
	}

	/*
	 * 펼침 : 화면 높이의 70% 까지만 늘리고 그 이상은 목록 안에서 스크롤합니다.
	 * (분류가 많아도 상품 목록이 화면 밖으로 밀려나지 않습니다)
	 */
	.xen-cat-side.is-open .product-category-item-list {
		max-height: 70vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * WOW.js 는 .wow 요소에 inline 으로 visibility:hidden 을 걸어둡니다.
	 * 접힌 상태(높이 0)에서는 화면에 안 들어와 애니메이션이 시작되지 않을 수 있고,
	 * 그러면 펼쳐도 내용이 안 보입니다. 모바일에서는 애니메이션 없이 바로 보여줍니다.
	 */
	.xen-cat-side .product-category-item-list .wow {
		visibility: visible !important;
		animation: none !important;
	}

	/*
	 * 상단 알약 메뉴와 "분류" 사이 공백을 절반으로 줄입니다.
	 * 알약 메뉴 아래 여백 40px + 본문 위 여백 60px = 100px → 20px + 30px = 50px
	 * (위쪽 767px 블록의 margin-bottom:40px 을 여기서 덮어씁니다)
	 */
	.xen-shop-nav { margin-bottom: 20px; }
	.page-products { padding-top: 30px; }
}

/* =============================================================================
 * 상품상세 (product/index.php) — 본문은 구 마크업, 색만 새 스킨에 맞춥니다
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 2단 배치 : 왼쪽 상품 이미지 / 오른쪽 상세 정보
 * -----------------------------------------------------------------------------
 * 구 CSS 의 2단 배치가 새 테마에서는 먹지 않아 여기서 직접 잡습니다.
 * 오른쪽 정보는 product/index.php 에서 .xen-detail-info 로 감쌌습니다.
 * -------------------------------------------------------------------------- */
/*
 * 왼쪽 = 갤러리(.ps-product__thumbnail)
 * 오른쪽 = 상품명·별점(.ps-product__info) + 가격·옵션·구매(.xen-detail-info)
 * 오른쪽이 두 덩어리라 flex 로는 줄바꿈이 나서 grid 로 잡습니다.
 */
.ps-page--product .ps-product--detail .ps-product__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 50px;
	align-items: start;
}

.ps-page--product .ps-product--detail .ps-product__thumbnail {
	grid-column: 1;
	grid-row: 1 / span 2;		/* 왼쪽 한 칸이 오른쪽 두 덩어리 높이를 모두 차지 */
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.ps-page--product .ps-product--detail .ps-product__info {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	max-width: 100%;
	float: none;
	padding: 0;
}

.ps-page--product .xen-detail-info {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
}

/* -----------------------------------------------------------------------------
 * 새 헤더 안에서는 구 CSS 의 .mega-menu 규칙을 무효화합니다.
 * 구 style.css 의 .mega-menu 는 흰 배경 + 회색 테두리 박스라
 * 새 헤더의 "쇼핑몰" 메뉴(li.nav-item.mega-menu)에 흰 상자가 생깁니다.
 * -------------------------------------------------------------------------- */
header.main-header .main-menu li.mega-menu {
	display: block;
	flex-flow: initial;
	justify-content: initial;
	padding: 0;
	background: transparent;
	border: 0;
}

header.main-header .main-menu li.mega-menu > * {
	width: auto;
	padding: 0;
}

/* 이미지가 칸을 넘지 않도록 */
.ps-page--product .ps-product__thumbnail img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
 * 큰 이미지 아래 가로 썸네일 (.xen-thumbs)
 * -----------------------------------------------------------------------------
 * 예전에는 ps-product__variants + owl-carousel 이었는데, 캐러셀이 초기화되지
 * 않으면 통째로 안 보였습니다. 캐러셀과 무관한 독립 클래스로 새로 만들었습니다.
 * 마크업 : product/components/thing_view.php
 * -------------------------------------------------------------------------- */
.ps-page--product .xen-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.ps-page--product .xen-thumb {
	width: 80px;
	height: 80px;
	padding: 5px;
	border: 1px solid var(--divider-color);
	border-radius: 8px;
	background: var(--white-color);
	cursor: pointer;
	transition: border-color 0.2s ease-in-out;
}

.ps-page--product .xen-thumb:hover,
.ps-page--product .xen-thumb.is-active { border-color: var(--accent-color); }

.ps-page--product .xen-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* 큰 이미지 : 캐러셀이 없어도 첫 장(또는 선택한 장)이 보이게
 * ---------------------------------------------------------------------------
 * slick(.slick-initialized)이 살아 있으면 슬라이드 노출은 slick 이 직접
 * 제어하므로 여기서 건드리면 안 됩니다. 그래서 :not(.slick-initialized) 로
 * 막아두고, 캐러셀이 하나도 안 붙었을 때만 적용합니다.
 * legacy/style.css 의 `#prodGallery .item { display:block !important; }` 가
 * 이 규칙을 눌러버려서 예전에는 전체 이미지가 세로로 다 쌓였습니다.
 * 그래서 폴백에도 !important 를 붙였습니다. */
.ps-page--product .ps-product__gallery:not(.owl-loaded) { display: block !important; }
.ps-page--product .ps-product__gallery:not(.owl-loaded):not(.slick-initialized) .item { display: none !important; }
.ps-page--product .ps-product__gallery:not(.owl-loaded):not(.slick-initialized) .item.is-current,
.ps-page--product .ps-product__gallery:not(.owl-loaded):not(.slick-initialized) .item:first-child:not(.is-dimmed) { display: block !important; }

.ps-page--product .ps-product__gallery img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
 * 큰 이미지 마우스 오버 확대(돋보기)
 * -----------------------------------------------------------------------------
 * 구 스킨은 오른쪽에 별도 확대창(.zoom-result)을 띄웠지만 동작하지 않아,
 * 이미지 자체를 커서 위치 기준으로 확대하는 방식으로 바꿨습니다.
 * 동작은 product/index.php 의 스크립트에서 처리합니다.
 * -------------------------------------------------------------------------- */
.ps-page--product .ps-product__gallery .item {
	overflow: hidden;			/* 확대된 부분이 칸 밖으로 나가지 않게 */
	border-radius: 10px;
	cursor: zoom-in;
}

.ps-page--product .ps-product__gallery .item img {
	transition: transform 0.15s ease-out;
	will-change: transform;
}

/* 구 확대창은 쓰지 않습니다 */
.ps-page--product .zoom-result { display: none !important; }

@media only screen and (max-width: 991px) {
	.ps-page--product .ps-product--detail .ps-product__header { gap: 24px; }
	.ps-page--product .ps-product--detail .ps-product__thumbnail,
	.ps-page--product .xen-detail-info {
		width: 100%;
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * 상품정보 표(배송비 / 판매가)의 진한 검정 선 제거
 * -----------------------------------------------------------------------------
 * 부트스트랩5 의 .table 규칙(`> :not(:first-child)` 에 2px 진한 테두리)과
 * 구 CSS 의 테이블 선이 겹쳐 굵은 검정 줄이 생깁니다. 전부 없애고
 * 항목 사이만 옅은 구분선으로 정리합니다.
 * -------------------------------------------------------------------------- */
.ps-page--product .product-price-table,
.ps-page--product .product-price-table > :not(caption) > * ,
.ps-page--product .product-price-table > :not(caption) > * > *,
.ps-page--product .product-price-table > :not(:first-child),
.ps-page--product .product-price-table tr,
.ps-page--product .product-price-table th,
.ps-page--product .product-price-table td {
	border: 0 !important;
	box-shadow: none !important;
}

.ps-page--product .ps-product__desc { border: 0 !important; }

/*
 * 구분선은 "배송비 블록 아래" 한 줄만 둡니다.
 * (표 안 행 사이에는 선을 넣지 않습니다)
 */
.ps-page--product .xen-detail-info > .ps-product__desc:first-child {
	border-bottom: 1px solid var(--divider-color) !important;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.ps-page--product .product-price-table th,
.ps-page--product .product-price-table td {
	padding: 14px 4px !important;
	vertical-align: middle;
}

.ps-page--product .product-price-table th {
	font-weight: 500;
	color: var(--text-color);
	width: 120px;
}

/* 취소선 가격은 흐리게 */
.ps-page--product .product-price-table del {
	color: #a9a2a0;
	margin-right: 4px;
}

/* 실제로 낼 금액은 크고 진하게 */
.ps-page--product .product-price-table strong {
	font-size: 22px;
	font-weight: 700;
	color: var(--primary-color);
}

.ps-page--product .product-price-table .price-sale strong { color: var(--accent-color); }

/* 할인율 뱃지 */
.ps-page--product .product-price-table .bp-price-percent {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--accent-color);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--white-color);
	vertical-align: middle;
}

/* -----------------------------------------------------------------------------
 * 상품명 영역 (참고 디자인 형태)
 *   SLIM DOWN · TONE UP      ← 작은 대문자 한줄설명
 *   LEAN+                    ← 크고 굵은 상품명
 *   ★★★★★ 4.86점 · 리뷰 669개
 * -------------------------------------------------------------------------- */
.ps-page--product .ps-product__info .product-subtext {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--primary-color);
}

.ps-page--product .ps-product__info h1 {
	margin: 0 0 14px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

/* 별점 : 채워진 별은 빨강, 빈 별은 옅은 회색 */
.ps-page--product .rating { display: inline-flex; gap: 3px; }

.ps-page--product .rating__star--full,
.ps-page--product .rating__star--half { color: #e8323c; }

.ps-page--product .rating__star--empty { color: #d9d4d3; }

.ps-page--product .rating__count {
	margin-left: 8px;
	font-size: 15px;
	color: var(--text-color);
}

.ps-page--product .rating__count strong {
	font-weight: 700;
	color: var(--primary-color);
}

.ps-page--product .product-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.ps-page--product .product-meta-left {
	display: flex;
	align-items: center;
}

/* 바로구매 : 구 스킨 초록색 → 새 스킨 강조색 */
.ps-page--product .ps-btn.sit_btn_buy,
.ps-page--product .bp-actions .ps-btn:not(.ps-btn--black) {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

.ps-page--product .ps-btn.sit_btn_buy:hover,
.ps-page--product .bp-actions .ps-btn:not(.ps-btn--black):hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

/* 장바구니 버튼은 진한 기본색으로 */
.ps-page--product .bp-actions .ps-btn--black {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.ps-page--product .bp-actions .ps-btn--black:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
}

/* --- 비밀번호 보안수준 안내 ------------------------------------------------ */

.pw-rules {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.pw-rules li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	line-height: 1.6em;
	color: #b9b3b1;				/* 조건 미충족 : 흐리게 */
	transition: color 0.2s ease-in-out;
}

.pw-rules li i { font-size: 13px; }

.pw-rules li.is-ok { color: var(--accent-color); }	/* 조건 충족 */

/* --- 전자문서 교부 동의 (맨 아래) ------------------------------------------ */

.register-agree-edoc {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-top: 2px solid var(--primary-color);
	padding: 24px 4px 0;
	margin-top: 50px;
}

.register-agree-edoc input[type=checkbox] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent-color);
	flex: 0 0 auto;
	margin-top: 2px;
	cursor: pointer;
}

.register-agree-edoc label {
	flex: 1;
	font-size: 15px;
	line-height: 1.7em;
	color: var(--primary-color);
	margin: 0;
	cursor: pointer;		/* 글자를 눌러도 체크됩니다 */
}

.register-agree-edoc label em {
	font-style: normal;
	color: #d33;
	margin-left: 4px;
}

@media only screen and (max-width: 767px) {
	.register-group-body .form-group {
		grid-template-columns: 1fr;
		background: none;		/* 세로 1열이라 왼쪽 배경 띠는 쓰지 않습니다 */
		padding: 0 0 12px;
	}

	.register-group-body .form-group > h5 {
		grid-column: 1;
		grid-row: auto;
		background: var(--secondary-color);
		padding: 12px 14px;
		margin: 0 0 12px !important;
	}

	.register-group-body .form-group > *:not(h5) {
		grid-column: 1;
		margin: 0 14px;
	}

	.register-group-body .form-group > *:not(h5):first-of-type { margin-top: 12px; }
	.register-group-body .form-group > *:last-child { margin-bottom: 12px; }

	.register-group-body .form-group .form-control,
	.register-group-body .form-group select.form-control { max-width: 100%; }
}

/* --- 약관동의 ------------------------------------------------------------- */

.agree-terms-box {
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	overflow: hidden;
}

.agree-terms-all {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--secondary-color);
	border-bottom: 1px solid var(--divider-color);
	padding: 20px;
}

.agree-terms-all label {
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
	cursor: pointer;
}

.agree-terms-list { padding: 8px 20px; }

.agree-terms-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--divider-color);
}

.agree-terms-item:last-child { border-bottom: 0; }

.agree-terms-item label {
	flex: 1;
	font-size: 15px;
	color: var(--primary-color);
	margin: 0;
	cursor: pointer;
}

.agree-terms-item label em {
	font-style: normal;
	font-size: 13px;
	color: #d33;
	margin-left: 4px;
}

.agree-terms-box input[type=checkbox] {
	width: 20px;
	height: 20px;
	accent-color: var(--accent-color);
	flex: 0 0 auto;
	margin: 0;
	cursor: pointer;
}

.agree-terms-view {
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--text-color);
	text-decoration: underline;
	cursor: pointer;
	padding: 4px;
	flex: 0 0 auto;
}

.agree-terms-view:hover { color: var(--accent-color); }

/* 동의가 끝나기 전에는 다음 버튼을 흐리게 */
.signup-form-btn .btn-default:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* 동의 체크박스 옆 "내용보기" */
.agree-view-link {
	font-size: 15px;
	color: var(--primary-color);
	text-decoration: underline;
	margin-left: 4px;
}

.agree-view-link:hover { color: var(--accent-color); }

/* --- 오른쪽 가입 안내 패널 ------------------------------------------------ */

.register-info-box { position: sticky; top: 110px; }

.register-info-head { margin-bottom: 30px; }

.register-info-head h3 {
	font-size: 28px;
	line-height: 1.35em;
	color: var(--primary-color);
	margin: 0 0 12px;
}

.register-info-head p {
	font-size: 16px;
	margin: 0;
}

.register-info-card {
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 30px;
}

.register-info-tag {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--accent-color);
	margin-bottom: 10px;
}

.register-info-card h4 {
	font-size: 22px;
	color: var(--primary-color);
	margin: 0 0 12px;
}

.register-info-card p {
	font-size: 15px;
	line-height: 1.75em;
	margin: 0;
}

.register-info-benefits {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.register-info-benefits li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--primary-color);
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--divider-color);
}

.register-info-benefits li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.register-info-benefits i {
	color: var(--accent-color);
	margin-top: 4px;
}

.register-info-image {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
}

.register-info-image img {
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}

/* --- 개인정보 수집·이용 동의 모달 ---------------------------------------- */

.modal-agree {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.55);
}

.modal-agree.is-open { display: block; }

.modal-agree-box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(620px, 92vw);
	max-height: 86vh;
	background: var(--white-color);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.modal-agree-cont {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 28px;
}

.modal-agree-cont h2 {
	font-size: 22px;
	color: var(--primary-color);
	margin: 0 0 14px;
}

.modal-agree-cont .policy-body {
	font-size: 14px;
	line-height: 1.8;
	color: var(--text-color);
	margin-bottom: 26px;
	word-break: break-word;
}

.modal-agree-btn { flex: 0 0 auto; }

.modal-agree-btn a {
	display: block;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	padding: 18px 0;
}

.modal-agree-btn a:hover { background: var(--accent-color); }

@media only screen and (max-width: 991px) {
	.register-info-box { position: static; }
	.register-info-head h3 { font-size: 24px; }
	.register-info-image img { height: 200px; }
}

@media only screen and (max-width: 767px) {
	.register-info-card { padding: 22px; }
	.modal-agree-cont { padding: 20px; }
}


/*--------------------------------------------------------------
# 모바일 카테고리 바로가기 + 모바일 메뉴 단순화
--------------------------------------------------------------*/
/*
 * PC 는 지금의 카드형 메가메뉴 그대로 둡니다. 아래 규칙은 전부 991px 이하에서만 적용됩니다.
 *
 * 문제 : 슬릭내브(모바일 햄버거 메뉴)가 PC 메가메뉴 마크업을 그대로 복제해서,
 *        카테고리 큰 이미지가 세로로 하나씩 쌓여 훑어보기가 어려웠습니다.
 * 해결 : ① 햄버거 메뉴 안에서는 이미지를 감춰 평범한 2단 텍스트 메뉴로 만들고
 *        ② 카테고리 이미지는 헤더 아래 가로 스크롤 줄(.xen-cat-strip)로 따로 보여줍니다.
 */
@media only screen and (max-width: 991px) {

	/* ── ① 햄버거 메뉴 안: 이미지 숨기고 텍스트 2단 메뉴로 ───────────────── */
	.slicknav_menu .mega-menu-item-image {
		display: none;
	}

	.slicknav_menu .mega-menu-items-list {
		display: block;          /* PC 의 flex 카드 배열 해제 */
		gap: 0;
	}

	.slicknav_menu .mega-menu-item {
		width: 100%;
		padding: 0;
	}

	.slicknav_menu .mega-menu-box {
		padding: 0;
	}

	/* 2차 항목을 일반 메뉴 줄처럼 (좌측 들여쓰기 + 옅은 구분선) */
	.slicknav_menu .mega-menu-item-content h2 {
		font-size: 15px;
		margin: 0;
	}

	.slicknav_menu .mega-menu-item-content h2 a {
		display: block;
		padding: 11px 0 11px 14px;
		border-bottom: 1px solid var(--divider-color);
		color: var(--text-color);
		font-weight: 400;
	}

	.slicknav_menu .mega-menu-item:last-child .mega-menu-item-content h2 a {
		border-bottom: 0;
	}

	/* ── ② 헤더 아래 카테고리 가로 스크롤 줄 ─────────────────────────────── */
	.xen-cat-strip {
		background: var(--bg-color);
		border-bottom: 1px solid var(--divider-color);
		padding: 10px 0 8px;
	}

	.xen-cat-strip ul {
		display: flex;
		gap: 14px;
		margin: 0;
		padding: 0 14px;
		list-style: none;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;              /* Firefox - 스크롤바 숨김 */
	}

	.xen-cat-strip ul::-webkit-scrollbar {
		display: none;                       /* Chrome/Safari - 스크롤바 숨김 */
	}

	.xen-cat-strip li {
		flex: 0 0 auto;                      /* 줄바꿈 없이 가로로 흐르게 */
	}

	.xen-cat-strip a {
		display: block;
		width: 68px;
		text-align: center;
		text-decoration: none;
	}

	.xen-cat-strip .xen-cat-thumb {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0 auto 6px;
		border-radius: 50%;
		overflow: hidden;
		background: #F4F1F0;
		border: 2px solid var(--primary-color);
	}

	.xen-cat-strip .xen-cat-thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;                   /* 원형 안에 꽉 차게 */
		display: block;
	}

	.xen-cat-strip .xen-cat-label {
		display: block;
		font-size: 12px;
		line-height: 1.3;
		color: var(--text-color);
		word-break: keep-all;                /* 한글 단어 중간에서 안 끊기게 */
	}
}


/*--------------------------------------------------------------
# 메가메뉴 3차 항목 (예: 쇼핑몰 > 패키지 > VIP팩 / 파워팩)
--------------------------------------------------------------*/
/* PC : 카드 제목 아래 작은 링크 줄 */
.mega-menu-sub {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.mega-menu-sub li {
	margin-top: 3px;
}

.main-menu .mega-menu-sub li a {
	display: inline-block;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-color);
	opacity: .85;
}

.main-menu .mega-menu-sub li a:hover {
	color: var(--primary-color);
	opacity: 1;
	text-decoration: underline;
}

/* 모바일 : 햄버거 메뉴 안에서 한 단 더 들여쓰기 */
@media only screen and (max-width: 991px) {

	.slicknav_menu .mega-menu-sub {
		margin: 0;
	}

	.slicknav_menu .mega-menu-sub li {
		margin-top: 0;
	}

	.slicknav_menu .mega-menu-sub li a {
		display: block;
		padding: 10px 0 10px 30px;          /* 2차(14px)보다 한 단 더 안쪽 */
		font-size: 14px;
		border-bottom: 1px solid var(--divider-color);
		opacity: 1;
		/*
		 * 색을 반드시 명시해야 합니다.
		 * slicknav.min.css 에 `.slicknav_nav a{color:#fff}` 이 있어서, 색을 안 주면
		 * 흰 배경에 흰 글씨가 되어 글자가 안 보입니다. (2차 항목은 custom.css 가 따로 잡아줍니다)
		 */
		color: var(--text-color);
	}

	/* 3차가 달린 2차 항목은 아래 구분선을 빼서 한 덩어리로 보이게 */
	.slicknav_menu .mega-menu-item-content:has(.mega-menu-sub) > h2 > a {
		border-bottom: 0;
		font-weight: 600;
	}
}


/*--------------------------------------------------------------
# PC 메가메뉴 하단 여백
--------------------------------------------------------------*/
/*
 * 템플릿 원본이 .main-menu .mega-menu-box 에 `padding: 0 15px` 만 줘서
 * 카테고리 이름(패키지·건강식품…)이 드롭다운 바닥에 딱 붙어 답답해 보였습니다.
 * 아래쪽만 20px 띄웁니다.
 * (.main-menu 로 한정되어 있어 모바일 slicknav 복제본에는 영향이 없습니다)
 */
.main-menu .mega-menu-box {
	padding-bottom: 20px;
}


/* ========================================================================================
 * 08. CEO 소개 (/ceo/history, /ceo/founder, /ceo/korea, /ceo/vision)
 *  Nutriax 원본에 없는 화면이라 여기서만 정의합니다.
 *  색/여백은 템플릿 변수(--primary-color 등)를 그대로 써서 다른 페이지와 톤을 맞춥니다.
 *
 *  세 페이지가 "사진 배경 박스 + 반투명 유리 패널" 구조를 공유하고,
 *  창립자와 XND 코리아는 인물카드(ceo/_person.php)까지 같이 쓰므로
 *  공통 규칙은 선택자를 묶어서 한 번만 선언합니다.
 * ======================================================================================== */

/* 서브탭 : HISTORY · 창립자 · XND 코리아 ------------------------------------------------ */
/* 마크업 : theme/shop/xendurance/ceo/_subnav.php */
.ceo-subnav {
	padding: 40px 0 0;
}

.ceo-subnav-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.ceo-subnav-item {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	line-height: 1em;
	text-transform: uppercase;
	color: var(--primary-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 13px 26px;
	transition: all 0.3s ease-in-out;
}

a.ceo-subnav-item:hover {
	color: var(--white-color);
	background: var(--accent-color);
	border-color: var(--accent-color);
}

.ceo-subnav-item.active {
	color: var(--white-color);
	background: var(--primary-color);
	border-color: var(--primary-color);
}

/* 아직 만들지 않은 탭 : 링크 없이 흐리게 (깨진 링크 방지) */
.ceo-subnav-item.is-disabled {
	color: var(--text-color);
	opacity: 0.4;
	cursor: default;
}

.ceo-subnav-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--divider-color);
}


/* 공통 : 섹션 여백 ---------------------------------------------------------------------- */
.ceo-history,
.ceo-founder,
.ceo-korea,
.ceo-vision {
	padding: 60px 0 120px;
}

/*
 * 공통 : 사진 배경 박스
 *  history 는 history01.png(사옥), founder 는 founder01.png(성조기),
 *  korea 는 korea01.png(강남 거리)를 깝니다.
 *  그 위에 어두운 그라데이션을 덮어 흰 글씨가 어떤 화면에서도 읽히게 합니다.
 *  .dark-section 이 함께 붙어 있어 템플릿의 다크 배경용 글자색 규칙을 물려받습니다.
 */
.ceo-history-box,
.ceo-founder-box,
.ceo-korea-box {
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 20px;
	overflow: hidden;
}

.ceo-history-box::before,
.ceo-founder-box::before,
.ceo-korea-box::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(41, 8, 4, 0.55) 0%, rgba(41, 8, 4, 0.85) 100%);
	z-index: 1;
}

.ceo-history-box {
	background-image: url('../img/history01.png');
}

.ceo-founder-box {
	background-image: url('../img/founder01.png');
}

.ceo-korea-box {
	background-image: url('../img/korea01.png');
}

/* 인물 페이지(창립자·XND 코리아)는 박스 안쪽 여백이 같습니다 */
.ceo-founder-box,
.ceo-korea-box {
	padding: 70px;
}

/*
 * 공통 : 반투명 유리(글래스) 패널
 *  참고 사이트의 .glassBg 와 같은 역할입니다.
 *  backdrop-filter 를 지원하지 않는 브라우저에서는 반투명 배경만 적용됩니다.
 */
.ceo-history-text,
.ceo-person-card,
.ceo-person-quote {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--dark-divider-color);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}


/* HISTORY - About XND ------------------------------------------------------------------ */
.ceo-history-box-inner {
	position: relative;
	z-index: 2;
	padding: 90px 70px;
}

.ceo-history-box-inner h3 {
	font-size: 36px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
	margin: 0 0 40px;
}

.ceo-history-text {
	padding: 45px 45px;
}

.ceo-history-text p {
	font-size: 17px;
	line-height: 1.8em;
	color: var(--white-color);
	opacity: 0.9;
	margin: 0 0 24px;
	word-break: keep-all;
}

.ceo-history-text p:last-child {
	margin-bottom: 0;
}


/* 인물카드 (창립자 · XND 코리아 공용) ---------------------------------------------------- */
/* 마크업 : theme/shop/xendurance/ceo/_person.php */
/* 인물사진(좌) + 약력(우) 2단. 좁아지면 세로로 쌓입니다. */
.ceo-person-card {
	display: flex;
	flex-wrap: wrap;
	gap: 45px;
	padding: 50px;
	margin-bottom: 30px;
}

.ceo-person-pic {
	flex: 0 0 300px;
	max-width: 300px;
}

.ceo-person-pic img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.ceo-person-info {
	flex: 1 1 380px;
	min-width: 0;
}

.ceo-person-name {
	padding-bottom: 22px;
	margin-bottom: 25px;
	border-bottom: 1px solid var(--dark-divider-color);
}

.ceo-person-name h3 {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2em;
	color: var(--white-color);
	margin: 0 0 10px;
}

.ceo-person-name p {
	font-size: 16px;
	line-height: 1.6em;
	color: var(--white-color);
	opacity: 0.7;
	margin: 0;
}

.ceo-person-career ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.ceo-person-career > *:last-child {
	margin-bottom: 0;
}

/* 점(•) 목록. 좌측 여백을 주고 가상요소로 점을 찍습니다. */
.ceo-person-career ul li {
	position: relative;
	font-size: 16px;
	line-height: 1.7em;
	color: var(--white-color);
	opacity: 0.9;
	padding-left: 16px;
	word-break: keep-all;
}

.ceo-person-career ul li::before {
	content: '';
	position: absolute;
	top: 12px;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--white-color);
	opacity: 0.7;
}

/* 목록 사이에 들어가는 한 줄 설명 */
.ceo-person-career p {
	font-size: 16px;
	line-height: 1.7em;
	color: var(--white-color);
	opacity: 0.9;
	margin: 0 0 20px;
	word-break: keep-all;
}

/* 카드 하단 작은 사진 (창립자 선수 시절 등) */
.ceo-person-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.ceo-person-photos img {
	width: 175px;
	max-width: calc(50% - 7px);
	height: auto;
	border-radius: 10px;
}

/* 어록 패널 */
.ceo-person-quote {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6em;
	text-align: center;
	color: var(--white-color);
	padding: 34px 40px;
	margin-bottom: 20px;
	word-break: keep-all;
}

.ceo-person-quote:last-child {
	margin-bottom: 0;
}

/* 어록 안에 사진이 들어가는 경우 (XND 코리아 단체사진) */
.ceo-person-quote img {
	display: block;
	width: 100%;
	max-width: 640px;
	height: auto;
	border-radius: 12px;
	margin: 0 auto 28px;
}


/* 비전 · 미션 --------------------------------------------------------------------------- */
/*
 * xndk 홈페이지의 스크롤 고정 섹션(.mainComp)을 옮긴 화면입니다.
 * 앞의 세 페이지와 달리 "밝은 배경 + 검정 글씨" 라 어두운 박스 규칙을 쓰지 않습니다.
 *
 * 배경 이미지(mainComp01/02.png)는 뷰에서 인라인 style 로 넣습니다.
 * 파일이 없으면 아래 기본 그라데이션이 그대로 보입니다.
 */
.ceo-vision-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 460px;
	background: linear-gradient(160deg, var(--secondary-color) 0%, var(--bg-color) 55%, var(--secondary-color) 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}

.ceo-vision-item:last-child {
	margin-bottom: 0;
}

/*
 * 사진을 깔았을 때도 글씨가 읽히도록 흰 베일을 덮습니다.
 * (그라데이션만 있을 때는 거의 티가 나지 않습니다)
 */
.ceo-vision-item::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.55);
	z-index: 1;
}

/* 상단 줄 : 왼쪽 라벨 + 오른쪽 번호 (원본의 .comTop) */
.ceo-vision-top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 34px;
}

.ceo-vision-label,
.ceo-vision-num {
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	color: var(--primary-color);
	opacity: 0.35;
}

/* 가운데 : 큰 제목 + 부제 */
.ceo-vision-body {
	position: relative;
	z-index: 2;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px 40px 70px;
}

.ceo-vision-body h3 {
	font-size: 72px;
	font-weight: 600;
	line-height: 1.1em;
	color: var(--primary-color);
	margin: 0;
}

.ceo-vision-body p {
	font-size: 21px;
	line-height: 1.7em;
	color: var(--text-color);
	margin: 34px 0 0;
	word-break: keep-all;
}


/* 반응형 ------------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.ceo-history,
	.ceo-founder,
	.ceo-korea,
	.ceo-vision {
		padding: 40px 0 80px;
	}

	.ceo-history-box-inner {
		padding: 60px 40px;
	}

	.ceo-history-box-inner h3 {
		font-size: 28px;
		margin-bottom: 30px;
	}

	.ceo-history-text {
		padding: 32px 28px;
	}

	.ceo-founder-box,
	.ceo-korea-box {
		padding: 40px;
	}

	.ceo-person-card {
		gap: 32px;
		padding: 36px;
	}

	.ceo-person-pic {
		flex: 0 0 240px;
		max-width: 240px;
	}

	.ceo-person-name h3 {
		font-size: 28px;
	}

	.ceo-person-quote {
		font-size: 19px;
		padding: 28px 30px;
	}

	.ceo-vision-item {
		min-height: 380px;
	}

	.ceo-vision-body h3 {
		font-size: 54px;
	}

	.ceo-vision-body p {
		font-size: 18px;
		margin-top: 26px;
	}
}

@media only screen and (max-width: 767px) {
	.ceo-subnav {
		padding-top: 30px;
	}

	.ceo-subnav-list {
		gap: 8px;
	}

	.ceo-subnav-item {
		font-size: 14px;
		padding: 11px 18px;
	}

	.ceo-subnav-dot {
		display: none;
	}

	.ceo-history-box-inner {
		padding: 40px 22px;
	}

	.ceo-history-box-inner h3 {
		font-size: 22px;
	}

	.ceo-history-text {
		padding: 24px 20px;
	}

	.ceo-history-text p {
		font-size: 15px;
		margin-bottom: 18px;
	}

	.ceo-founder-box,
	.ceo-korea-box {
		padding: 22px;
	}

	/* 좁은 화면에서는 인물사진을 가운데 두고 위아래로 쌓습니다. */
	.ceo-person-card {
		gap: 26px;
		padding: 26px 22px;
	}

	.ceo-person-pic {
		flex: 0 0 100%;
		max-width: 240px;
		margin: 0 auto;
	}

	.ceo-person-name h3 {
		font-size: 24px;
	}

	.ceo-person-career ul li,
	.ceo-person-career p {
		font-size: 15px;
	}

	.ceo-person-quote {
		font-size: 17px;
		padding: 24px 20px;
	}

	.ceo-person-quote img {
		margin-bottom: 20px;
	}

	.ceo-vision-item {
		min-height: 300px;
	}

	.ceo-vision-top {
		padding: 20px 22px;
	}

	.ceo-vision-label,
	.ceo-vision-num {
		font-size: 14px;
	}

	.ceo-vision-body {
		padding: 16px 22px 50px;
	}

	.ceo-vision-body h3 {
		font-size: 40px;
	}

	.ceo-vision-body p {
		font-size: 16px;
		margin-top: 20px;
	}
}


/* ========================================================================================
 * 09. 석세스 리듬 (/business/success)
 *  사내 슬라이드(step1/step2.png)를 그대로 보여주는 판 + 7단계 본문 목록입니다.
 *  색/여백은 템플릿 변수(--primary-color 등)를 그대로 씁니다.
 * ======================================================================================== */
.biz-success {
	padding: 60px 0 120px;
}

/* 두 번째 섹션 제목 위 여백 (슬라이드와 붙지 않도록) */
.biz-success .biz-success-row {
	margin-top: 90px;
}

/* 슬라이드 카드 : 클릭하면 원본 크기로 열립니다 --------------------------------------- */
.biz-slide {
	display: block;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.biz-slide:hover {
	border-color: var(--accent-color);
	transform: translateY(-4px);
}

.biz-slide img {
	display: block;
	width: 100%;
	height: auto;
}

/* 7단계 목록 --------------------------------------------------------------------------- */
.biz-step-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.biz-step-item {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px 32px;
	transition: all 0.3s ease-in-out;
}

.biz-step-item:hover {
	border-color: var(--accent-color);
}

/* 번호 배지 */
.biz-step-num {
	flex: 0 0 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 50%;
}

.biz-step-text {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 4px;
}

.biz-step-text h3 {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

.biz-step-text p {
	font-size: 16px;
	line-height: 1.6em;
	color: var(--text-color);
	margin: 10px 0 0;
	word-break: keep-all;
}

/* 마무리 문구 : "우리는 이것을 복제 한다" ----------------------------------------------- */
.biz-success-outro {
	text-align: center;
	margin: 50px 0;
}

.biz-success-outro p {
	display: inline-block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 100px;
	padding: 20px 44px;
	margin: 0;
}

/* 반응형 ------------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.biz-success {
		padding: 40px 0 80px;
	}

	.biz-success .biz-success-row {
		margin-top: 60px;
	}

	.biz-step-item {
		gap: 18px;
		padding: 24px 24px;
	}

	.biz-step-text h3 {
		font-size: 19px;
	}

	.biz-success-outro p {
		font-size: 19px;
		padding: 17px 34px;
	}
}

@media only screen and (max-width: 767px) {
	.biz-slide {
		border-radius: 14px;
	}

	.biz-step-item {
		gap: 14px;
		padding: 20px 18px;
	}

	.biz-step-num {
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	.biz-step-text h3 {
		font-size: 17px;
	}

	.biz-step-text p {
		font-size: 14px;
	}

	.biz-success-outro {
		margin: 36px 0;
	}

	.biz-success-outro p {
		font-size: 16px;
		padding: 15px 26px;
	}
}


/* ========================================================================================
 * 10. 보상플랜 (/education/plan)
 *  사내 슬라이드(plan01/plan02.png)의 내용을 본문으로 옮긴 화면입니다.
 *  09절(석세스 리듬)의 슬라이드 카드와 같은 모양을 씁니다.
 * ======================================================================================== */
.edu-plan {
	padding: 60px 0 120px;
}

/* 두 번째 섹션 제목 위 여백 */
.edu-plan .edu-plan-row {
	margin-top: 90px;
}

/* 슬라이드 카드 : 클릭하면 원본 크기로 열립니다 */
.edu-plan-slide {
	display: block;
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 50px;
	transition: all 0.3s ease-in-out;
}

.edu-plan-slide:hover {
	border-color: var(--accent-color);
	transform: translateY(-4px);
}

.edu-plan-slide img {
	display: block;
	width: 100%;
	height: auto;
}

/* 보상의 종류 5가지 ---------------------------------------------------------------------- */
/* 데스크탑에서 5칸, 좁아지면 자동으로 줄바꿈됩니다. */
.edu-bonus-list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.edu-bonus-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 40px 24px 34px;
	transition: all 0.3s ease-in-out;
}

.edu-bonus-item:hover {
	border-color: var(--accent-color);
	transform: translateY(-6px);
}

/* 원형 배지 (6 / P / T / M / C) */
.edu-bonus-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	background: var(--accent-color);
	border-radius: 50%;
	margin-bottom: 22px;
}

.edu-bonus-item h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3em;
	color: var(--primary-color);
	margin: 0 0 14px;
	word-break: keep-all;
}

.edu-bonus-item p {
	font-size: 15px;
	line-height: 1.7em;
	color: var(--text-color);
	margin: 0;
	word-break: keep-all;
}

/* 승급 보너스 발생 자격 ------------------------------------------------------------------ */
.edu-plan-qualify {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 20px 34px;
	margin-bottom: 40px;
	text-align: center;
}

.edu-plan-qualify-label {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1em;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
	padding: 11px 20px;
}

.edu-plan-qualify p {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

/* 직급표 --------------------------------------------------------------------------------- */
/* 좁은 화면에서 표가 페이지를 밀지 않도록 이 안에서만 가로 스크롤됩니다. */
.edu-plan-table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--divider-color);
	border-radius: 16px;
}

.edu-plan-table {
	width: 100%;
	min-width: 780px;
	border-collapse: collapse;
	margin: 0;
}

.edu-plan-table th,
.edu-plan-table td {
	text-align: center;
	vertical-align: middle;
	padding: 16px 14px;
	border-bottom: 1px solid var(--divider-color);
}

.edu-plan-table thead th {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
	background: var(--secondary-color);
	border-right: 1px solid var(--divider-color);
}

.edu-plan-table thead th:last-child {
	border-right: 0;
}

/* 필요조건 헤더 아래 작은 설명 */
.edu-plan-table thead th small {
	display: block;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	margin-top: 6px;
}

.edu-plan-table tbody td {
	font-size: 15px;
	line-height: 1.5em;
	color: var(--text-color);
	word-break: keep-all;
}

.edu-plan-table tbody tr:last-child td {
	border-bottom: 0;
}

.edu-plan-table tbody tr:hover td {
	background: var(--secondary-color);
}

.edu-plan-table td.is-rank {
	font-weight: 600;
	color: var(--primary-color);
	white-space: nowrap;
}

.edu-plan-table td.is-bonus {
	font-weight: 600;
	color: var(--accent-color);
	white-space: nowrap;
}

/* 표 아래 안내 문구 ---------------------------------------------------------------------- */
.edu-plan-notes {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.edu-plan-notes li {
	position: relative;
	font-size: 15px;
	line-height: 1.7em;
	color: var(--text-color);
	padding-left: 16px;
	word-break: keep-all;
}

.edu-plan-notes li::before {
	content: '※';
	position: absolute;
	left: 0;
	font-size: 12px;
	top: 4px;
}

/* 반응형 ------------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	/* 5칸 → 3칸 */
	.edu-bonus-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 991px) {
	.edu-plan {
		padding: 40px 0 80px;
	}

	.edu-plan .edu-plan-row {
		margin-top: 60px;
	}

	.edu-bonus-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.edu-plan-slide {
		margin-top: 40px;
	}
}

@media only screen and (max-width: 767px) {
	.edu-bonus-list {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.edu-bonus-item {
		padding: 30px 20px 26px;
	}

	.edu-bonus-badge {
		width: 52px;
		height: 52px;
		font-size: 20px;
		margin-bottom: 18px;
	}

	.edu-bonus-item h3 {
		font-size: 18px;
	}

	/* 알약 모양이 세로로 길어지면 어색해서 사각형으로 바꿉니다 */
	.edu-plan-qualify {
		flex-direction: column;
		gap: 12px;
		border-radius: 16px;
		padding: 22px 20px;
		margin-bottom: 30px;
	}

	.edu-plan-qualify p {
		font-size: 15px;
	}

	.edu-plan-table th,
	.edu-plan-table td {
		padding: 13px 10px;
	}

	.edu-plan-table thead th {
		font-size: 14px;
	}

	.edu-plan-table tbody td {
		font-size: 13px;
	}

	.edu-plan-notes li {
		font-size: 13px;
	}

	.edu-plan-slide {
		border-radius: 14px;
		margin-top: 30px;
	}
}


/* ========================================================================================
 * 11. 찾아오시는 길 (/company/location)
 *  좌 : 지도 / 우 : 회사정보 카드. 991px 아래에서는 지도 위, 정보 아래로 쌓입니다.
 *  회사정보는 관리자 설정값이라 줄 수가 늘거나 줄 수 있어 높이를 고정하지 않았습니다.
 * ======================================================================================== */
.company-location {
	padding: 60px 0 120px;
}

.location-box {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* 지도 --------------------------------------------------------------------------------- */
/* 템플릿의 .google-map-iframe 을 그대로 쓰되 높이만 이 페이지에 맞춥니다. */
.location-map {
	min-height: 520px;
	border-radius: 20px;
	overflow: hidden;
}

.location-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 520px;
	border: 0;
}

/* 회사정보 카드 -------------------------------------------------------------------------- */
.location-info {
	display: flex;
	flex-direction: column;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	padding: 44px 40px;
}

.location-company {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--divider-color);
}

.location-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	padding: 8px;
}

.location-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.location-company h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

/* ADDRESS / 고객센터 / E-MAIL / FAX 공통 라벨 */
.location-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 9px;
}

.location-address {
	margin-bottom: 26px;
}

.location-address p {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.6em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

.location-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.location-contact-list li {
	padding-top: 18px;
	margin-top: 18px;
	border-top: 1px solid var(--divider-color);
}

.location-contact-list li:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.location-contact-list p {
	font-size: 16px;
	line-height: 1.6em;
	color: var(--text-color);
	margin: 0;
	word-break: keep-all;
}

.location-contact-list p a {
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.location-contact-list p a:hover {
	color: var(--accent-color);
}

/* 길찾기 버튼 : 카드 아래쪽에 붙입니다 --------------------------------------------------- */
.location-btn-box {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 32px;
}

.location-btn-box .btn-default {
	flex: 1 1 auto;
	text-align: center;
	white-space: nowrap;
}

/* 반응형 ------------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.company-location {
		padding: 40px 0 80px;
	}

	/* 지도 위 / 정보 아래로 쌓기 */
	.location-box {
		grid-template-columns: 1fr;
	}

	.location-map,
	.location-map iframe {
		min-height: 380px;
	}

	.location-info {
		padding: 34px 30px;
	}

	.location-address p {
		font-size: 17px;
	}
}

@media only screen and (max-width: 767px) {
	.location-map,
	.location-map iframe {
		min-height: 300px;
		border-radius: 14px;
	}

	.location-info {
		border-radius: 14px;
		padding: 26px 22px;
	}

	.location-company {
		gap: 12px;
		padding-bottom: 18px;
		margin-bottom: 22px;
	}

	.location-logo {
		width: 46px;
		height: 46px;
	}

	.location-company h3 {
		font-size: 18px;
	}

	.location-address p {
		font-size: 16px;
	}

	.location-contact-list p {
		font-size: 15px;
	}

	/* 좁은 화면에서는 버튼을 한 줄에 하나씩 */
	.location-btn-box {
		flex-direction: column;
		padding-top: 24px;
	}
}


/* ========================================================================================
 * 12. 게시판 (쇼핑몰 스킨)  /board/lists/{게시판}, /board/views/{게시판}/{번호}
 *  게시판관리에서 스킨을 'shop' 으로 지정한 게시판이 이 스타일을 씁니다.
 *  (브랜드영상 / 사업자영상 / 교육자료)
 *  목록은 영상 썸네일 카드, 본문은 유튜브 iframe이 들어가는 글 상세입니다.
 *  색/여백은 템플릿 변수(--primary-color 등)를 그대로 씁니다.
 * ======================================================================================== */
.board-shop {
	padding: 60px 0 120px;
}

/* 목록 - 카드 */
.board-card-list {
	row-gap: 30px;
}

.board-card {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--divider-color, #e5e5e5);
	border-radius: 12px;
	background-color: var(--white-color, #fff);
	transition: all 0.3s ease-in-out;
}

.board-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.board-card-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* 썸네일 - 16:9 고정 */
.board-card-thumb {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	background-color: #f2f2f2;
}

.board-card-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease-in-out;
}

.board-card:hover .board-card-thumb img {
	transform: scale(1.06);
}

/* 영상 카드 위의 재생 버튼 */
.board-card-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 56px;
	height: 56px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.55);
	transition: background-color 0.3s ease-in-out;
}

.board-card-play::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 15px solid #fff;
}

.board-card:hover .board-card-play {
	background-color: var(--primary-color, #a4262c);
}

/* 영상이 없는 글 카드
   --secondary-color 는 이 스킨에서 밝은 크림색(#FAF5F3)이라
   글자는 반드시 진한 색(--primary-color)을 써야 읽힙니다. */
.board-card-thumb-empty {
	background-color: var(--secondary-color, #faf5f3);
}

.board-card-noimg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color, #290804);
	opacity: 0.45;
	text-align: center;
}

.board-card-body {
	padding: 22px 24px 24px;
}

.board-card-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.4;
	color: var(--primary-color, #290804);
	/* 제목은 두 줄까지만 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.board-card-desc {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-color, #666);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.board-card-date {
	display: block;
	margin-top: 14px;
	font-size: 14px;
	color: #999;
}

/* 글이 없을 때 */
.board-empty {
	padding: 80px 0;
	font-size: 17px;
	color: var(--text-color, #666);
	text-align: center;
	border: 1px solid var(--divider-color, #e5e5e5);
	border-radius: 12px;
}

/* 페이지 번호 */
.board-pagination {
	margin-top: 30px;
}

.board-pagination .pagination {
	margin: 0;
	gap: 6px;
}

.board-pagination .page-link {
	min-width: 40px;
	padding: 8px 12px;
	color: var(--primary-color, #290804);
	text-align: center;
	border: 1px solid var(--divider-color, #e5e5e5);
	border-radius: 8px;
}

.board-pagination .page-item.active .page-link {
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #a4262c);
	background-color: var(--primary-color, #a4262c);
}

/* ------------------------------------------------------------------
 * 게시물 보기
 * ------------------------------------------------------------------ */
.board-view {
	overflow: hidden;
	border: 1px solid var(--divider-color, #e5e5e5);
	border-radius: 12px;
	background-color: var(--white-color, #fff);
}

.board-view-head {
	padding: 30px 34px;
	border-bottom: 1px solid var(--divider-color, #e5e5e5);
	background-color: #fafafa;
}

.board-view-title {
	margin: 0;
	font-size: 26px;
	line-height: 1.4;
	color: var(--primary-color, #290804);
}

.board-view-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: #999;
}

.board-view-meta span {
	color: var(--text-color, #666);
}

.board-view-body {
	padding: 40px 34px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--text-color, #666);
	word-break: break-word;
}

/* 본문 안 이미지 / 영상이 칸을 넘지 않도록 */
.board-view-body img,
.board-view-body iframe,
.board-view-body video,
.board-view-body table {
	max-width: 100%;
}

/* 에디터가 이미지에 씌우는 figure 는 인라인 폭이 붙는 경우가 있어 !important 로 제한합니다 */
.board-view-body figure {
	max-width: 100% !important;
	margin: 20px 0;
}

.board-view-body figure img {
	width: 100%;
}

/* 첨부파일 */
.board-view-files {
	padding: 22px 34px;
	border-top: 1px solid var(--divider-color, #e5e5e5);
	background-color: #fafafa;
}

.board-view-files-label {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.board-view-files ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.board-view-files li + li {
	margin-top: 8px;
}

.board-view-files a {
	font-size: 15px;
	color: var(--primary-color, #a4262c);
}

.board-view-files em {
	font-style: normal;
	font-size: 13px;
	color: #999;
}

/* 이전글 / 다음글 */
.board-view-nav {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--divider-color, #e5e5e5);
}

.board-view-nav li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 34px;
}

.board-view-nav li + li {
	border-top: 1px solid var(--divider-color, #e5e5e5);
}

.board-view-nav-label {
	flex: 0 0 auto;
	min-width: 60px;
	font-size: 14px;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.board-view-nav a {
	font-size: 15px;
	color: var(--text-color, #666);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.board-view-nav a:hover {
	color: var(--primary-color, #a4262c);
}

.board-view-btns {
	display: flex;
	justify-content: center;
	padding: 30px 34px 34px;
}

/* 반응형 */
@media only screen and (max-width: 767px) {
	.board-shop {
		padding: 40px 0 80px;
	}

	.board-card-title {
		font-size: 17px;
	}

	.board-search-input {
		width: 100%;
	}

	.board-search-select {
		flex: 0 0 auto;
	}

	.board-view-head,
	.board-view-files,
	.board-view-nav li {
		padding-left: 20px;
		padding-right: 20px;
	}

	.board-view-body {
		padding: 26px 20px;
		font-size: 15px;
	}

	.board-view-title {
		font-size: 21px;
	}
}


/* ========================================================================================
 * 13. 상품상세 구성품 (BOM)  /shop/product/detail/{번호}
 *  여러 기본상품을 묶어 파는 세트상품에서 무엇이 몇 개 들어있는지 보여주는 목록입니다.
 *  구성품이 없는 단품에서는 이 영역이 출력되지 않습니다.
 * ======================================================================================== */
.xen-bom {
	margin: 24px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 10px;
	background-color: var(--secondary-color, #faf5f3);
}

.xen-bom__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	font-size: 16px;
	color: var(--primary-color, #290804);
}

.xen-bom__count {
	padding: 2px 9px;
	font-size: 12px;
	color: var(--white-color, #fff);
	border-radius: 20px;
	background-color: var(--accent-color, #a53e0d);
}

.xen-bom__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xen-bom__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
}

.xen-bom__item + .xen-bom__item {
	border-top: 1px dashed var(--divider-color, #29080419);
}

/* 구성품 썸네일 */
.xen-bom__thumb {
	flex: 0 0 auto;
	position: relative;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 8px;
	background-color: var(--white-color, #fff);
}

.xen-bom__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 이미지가 없는 구성품은 이름 앞글자로 대신합니다 */
.xen-bom__noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color, #290804);
	opacity: 0.35;
}

.xen-bom__info {
	flex: 1 1 auto;
	min-width: 0;
}

.xen-bom__name {
	display: block;
	font-size: 15px;
	line-height: 1.4;
	color: var(--primary-color, #290804);
	word-break: break-word;
}

/* 증정품 배지 */
.xen-bom__gift {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-style: normal;
	font-size: 11px;
	color: var(--white-color, #fff);
	border-radius: 20px;
	background-color: var(--accent-color, #a53e0d);
	vertical-align: middle;
}

.xen-bom__qty {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--primary-color, #290804);
}

@media only screen and (max-width: 767px) {
	.xen-bom {
		padding: 16px;
	}

	.xen-bom__thumb {
		width: 44px;
		height: 44px;
	}

	.xen-bom__name,
	.xen-bom__qty {
		font-size: 14px;
	}
}


/* ========================================================================================
 * 14. 결제 페이지 버튼 색  /shop/checkout
 *  구 스킨(organic.css)의 .ps-btn 기본색이 초록(#5fa30f)이라 결제하기 버튼과
 *  결제수단 선택 버튼만 사이트 톤에서 벗어나 보였습니다.
 *  상품상세의 "바로구매" 버튼과 같은 방식으로 새 스킨 색(--accent-color)에 맞춥니다.
 *  --black / --outline / --gray 처럼 색이 따로 정해진 버튼은 건드리지 않습니다.
 * ======================================================================================== */

/* 결제하기 (전체폭 제출 버튼) */
#btn_submit_pay,
button#btn_submit_pay,
.ps-page--simple .ps-btn.ps-btn--fullwidth,
.ps-page--simple button.ps-btn.ps-btn--fullwidth {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #a53e0d);
	background-color: var(--accent-color, #a53e0d);
}

#btn_submit_pay:hover,
button#btn_submit_pay:hover,
.ps-page--simple .ps-btn.ps-btn--fullwidth:hover,
.ps-page--simple button.ps-btn.ps-btn--fullwidth:hover {
	border-color: var(--primary-color, #290804);
	background-color: var(--primary-color, #290804);
}

/* 결제수단 선택 - 선택 안 된 버튼은 옅게, 선택된 버튼은 진하게 */
.pay-methods .pay-btn:not(.is-selected),
.pay-methods button.pay-btn:not(.is-selected) {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #a53e0d);
	background-color: var(--accent-color, #a53e0d);
	opacity: 0.55;
}

.pay-methods .pay-btn:not(.is-selected):hover,
.pay-methods button.pay-btn:not(.is-selected):hover {
	opacity: 0.8;
}

.pay-methods .pay-btn.is-selected,
.pay-methods button.pay-btn.is-selected {
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #290804);
	background-color: var(--primary-color, #290804);
	opacity: 1;
}

/* 포커스 링도 초록 대신 강조색으로 */
.pay-methods .pay-btn:focus {
	box-shadow: 0 0 0 3px rgba(165, 62, 13, 0.25);
}


/* ========================================================================================
 * 15. 쇼핑몰 버튼 색 통일 (구 스킨 잔재 정리)
 *  구 스킨(style/organic/shop.css)에 남아 있던 버튼 색이 페이지마다 제각각이라
 *  사이트 톤(--primary-color / --accent-color)으로 맞춥니다.
 *
 *    .ps-btn 기본        초록 #5fa30f  → 강조색  (주 액션 : 주문·저장·확인)
 *    .ps-btn--post       청회색 #576391 → 기본색  (보조 액션 : 주소검색 등)
 *    .ps-btn--reverse    청회색 #576391 → 기본색
 *    .ps-btn--black      검정 #000      → 기본색  (진한 갈색이라 검정 자리를 그대로 대신합니다)
 *    .__btn_submit       청록 #33cccc   → 강조색
 *
 *  --gray / --outline 은 취소·보조 버튼이라 원래 색을 그대로 둡니다.
 *  구 스킨 규칙이 'button.ps-btn' 처럼 태그까지 붙여 쓰는 곳이 있어
 *  선택자에 button 을 같이 적어 우선순위를 맞춥니다.
 * ======================================================================================== */

/* 주 액션 버튼 */
.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse),
button.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse) {
	color: var(--white-color, #fff);
	background-color: var(--accent-color, #a53e0d);
}

.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):hover,
button.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):hover {
	color: var(--white-color, #fff);
	background-color: var(--primary-color, #290804);
}

/* 검정 버튼(장바구니 등)은 진한 기본색으로 - 색만 바뀌고 대비는 그대로입니다 */
.ps-btn.ps-btn--black,
button.ps-btn.ps-btn--black {
	color: var(--white-color, #fff);
	background-color: var(--primary-color, #290804);
}

.ps-btn.ps-btn--black:hover,
button.ps-btn.ps-btn--black:hover {
	background-color: var(--accent-color, #a53e0d);
}

/* 보조 액션 버튼 (주소검색 · 되돌리기 등) */
.ps-btn.ps-btn--post,
button.ps-btn.ps-btn--post,
.ps-btn.ps-btn--reverse,
button.ps-btn.ps-btn--reverse {
	color: var(--white-color, #fff);
	background-color: var(--primary-color, #290804);
}

.ps-btn.ps-btn--post:hover,
button.ps-btn.ps-btn--post:hover,
.ps-btn.ps-btn--reverse:hover,
button.ps-btn.ps-btn--reverse:hover {
	background-color: var(--accent-color, #a53e0d);
}

/* 폼 제출 버튼 (문의·리뷰 등) */
.__form-btns .__btn.__btn_submit,
.__form-btns button.__btn.__btn_submit {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #a53e0d);
	background-color: var(--accent-color, #a53e0d);
}

.__form-btns .__btn.__btn_submit:hover,
.__form-btns button.__btn.__btn_submit:hover {
	border-color: var(--primary-color, #290804);
	background-color: var(--primary-color, #290804);
}

/* 검정 계열 커스텀 버튼 (.btn-black) 도 같은 기본색으로 */
.btn-black,
button.btn-black {
	background: var(--primary-color, #290804);
	color: var(--white-color, #fff);
}

.btn-black:hover,
button.btn-black:hover {
	background: var(--accent-color, #a53e0d);
}


/* ========================================================================================
 * 16. 주문내역 조회  /shop/order
 *  구 스킨에서 넘어온 화면이라 페이지헤더도 container 도 없이 본문이 화면 끝에 붙어
 *  있었습니다. 뷰에 페이지헤더와 container 를 넣고, 여기서 여백과 카드 모양을 잡습니다.
 *  표 안의 색은 인라인 style 로 박혀 있어 꼭 필요한 곳만 !important 로 덮습니다.
 * ======================================================================================== */
.xen-order-page {
	padding: 60px 0 100px;
}

.xen-order-page .ps-section__right,
.xen-order-page .ps-section--account-setting {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
}

/* 표를 주문 단위 카드처럼 보이게 */
.xen-order-page .ps-table--vendor {
	width: 100%;
	margin: 0;
}

.xen-order-page .ps-table--vendor td {
	border-color: var(--divider-color, #29080419) !important;
	vertical-align: middle;
}

/* 주문 머리줄 (주문일 · 주문번호 · 상세보기) */
.xen-order-page .ps-table--vendor tr:first-child td {
	background-color: var(--secondary-color, #faf5f3) !important;
}

.xen-order-page .ps-table--vendor a {
	color: var(--primary-color, #290804) !important;
}

.xen-order-page .ps-table--vendor a:hover {
	color: var(--accent-color, #a53e0d) !important;
}

/* 상품 이미지 */
.xen-order-page .ps-table--vendor img {
	border-color: var(--divider-color, #29080419) !important;
}

/* 입금증 첨부 버튼 - 사이트 강조색으로 */
.xen-order-page .__btn_upload_deposit {
	color: var(--white-color, #fff) !important;
	background: var(--accent-color, #a53e0d) !important;
}

.xen-order-page .__btn_upload_deposit:hover {
	background: var(--primary-color, #290804) !important;
}

/* 이 화면 안의 기본 버튼(.__btn)도 검정 대신 기본색으로 */
.xen-order-page .__btn {
	background-color: var(--primary-color, #290804);
}

.xen-order-page .__btn:hover {
	background-color: var(--accent-color, #a53e0d);
}

/* 페이지 번호 - 가운데 정렬 */
.xen-order-pagination {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.xen-order-pagination .pagination {
	margin: 0;
	gap: 6px;
}

.xen-order-pagination .page-link {
	min-width: 40px;
	padding: 8px 12px;
	color: var(--primary-color, #290804);
	text-align: center;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 8px;
}

.xen-order-pagination .page-item.active .page-link {
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #290804);
	background-color: var(--primary-color, #290804);
}

@media only screen and (max-width: 767px) {
	.xen-order-page {
		padding: 40px 0 70px;
	}

	.xen-order-page .ps-table--vendor td {
		padding: 12px 10px !important;
	}
}


/* ========================================================================================
 * 17. 주문 상세조회 버튼 · 페이지헤더 높이
 *  · 주문목록보기 버튼(.__btn_order_list)은 CSS가 아예 없어 맨 글자 링크로 보였습니다.
 *  · 주문 화면은 유틸리티 페이지라 상단 배너를 낮게 씁니다.
 * ======================================================================================== */

/* 상단 배너 축소 - 뷰에서 page_header 를 .xen-page-header--compact 로 감쌉니다 */
.xen-page-header--compact .page-header {
	padding: 90px 0 70px;
}

.xen-page-header--compact .page-header-box h1 {
	font-size: 46px;
	margin-bottom: 6px;
}

/* 주문목록보기 - 위쪽 버튼 */
.xen-order-topbtns {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
}

/* 주문목록보기 / 주문취소 등 상세화면 버튼 공통 */
.xen-order-page .__btn_order_list,
.xen-order-page .__btn-order-cancel {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 22px;
	font-size: 15px;
	line-height: 1;
	color: var(--white-color, #fff);
	text-decoration: none;
	border: 1px solid var(--primary-color, #290804);
	border-radius: 6px;
	background-color: var(--primary-color, #290804);
	cursor: pointer;
	transition: all 0.25s ease-in-out;
}

.xen-order-page .__btn_order_list:hover,
.xen-order-page .__btn-order-cancel:hover {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #a53e0d);
	background-color: var(--accent-color, #a53e0d);
}

/* 주문취소는 되돌릴 수 없는 동작이라 테두리형으로 구분합니다 */
.xen-order-page .__btn-order-cancel {
	color: var(--primary-color, #290804);
	background-color: transparent;
}

.xen-order-page .__btn-order-cancel:hover {
	color: var(--white-color, #fff);
}

/* 화면 아래쪽 버튼 줄 */
.xen-order-page .__content__body__bottom_btns,
.xen-order-page .__order_cancel {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

/* 각 구획 제목 (주문 정보 · 주문 상품정보 · 배송지정보 …) */
.xen-order-page .__title {
	margin: 34px 0 14px;
	font-size: 20px;
	color: var(--primary-color, #290804);
}

.xen-order-page .xen-order-topbtns + .table-responsive .__title {
	margin-top: 0;
}

@media only screen and (max-width: 767px) {
	.xen-page-header--compact .page-header {
		padding: 60px 0 45px;
	}

	.xen-page-header--compact .page-header-box h1 {
		font-size: 30px;
	}

	.xen-order-topbtns {
		justify-content: stretch;
	}

	.xen-order-page .__btn_order_list {
		flex: 1 1 auto;
		justify-content: center;
	}
}


/* ========================================================================================
 * 18. 주문 상세 - 구성품 / 상품 블록
 *  세트상품에 무엇이 몇 개 들어있는지 보여주는 목록입니다.
 *  주문 당시 스냅샷(nv_shop_cart_bom)을 그대로 보여주므로 과거 주문도 정확합니다.
 * ======================================================================================== */
.xen-order-page .__order_item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid var(--divider-color, #29080419);
}

.xen-order-page .__order_item__info_wrap {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	flex: 1 1 320px;
	min-width: 0;
}

.xen-order-page .__order_item .__image {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 8px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.xen-order-page .__order_item .__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

.xen-order-page .__order_item .__info {
	min-width: 0;
}

.xen-order-page .__order_item .__info .__title a {
	font-size: 17px;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.xen-order-page .__order_item .__info .__title a:hover {
	color: var(--accent-color, #a53e0d);
}

.xen-order-page .__order_item .__option,
.xen-order-page .__order_item .__price {
	margin-top: 6px;
	font-size: 15px;
	color: var(--text-color, #5c5757);
}

.xen-order-page .__order_item .__price strong {
	color: var(--primary-color, #290804);
}

/* 구성품 목록 */
.xen-order-bom {
	margin-top: 12px;
	padding: 12px 14px;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 8px;
	background-color: var(--secondary-color, #faf5f3);
}

.xen-order-bom__label {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--primary-color, #290804);
}

.xen-order-bom__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xen-order-bom__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 14px;
	color: var(--text-color, #5c5757);
}

.xen-order-bom__name {
	flex: 1 1 auto;
	min-width: 0;
	word-break: break-word;
}

.xen-order-bom__qty {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.xen-order-bom__gift {
	flex: 0 0 auto;
	padding: 1px 7px;
	font-style: normal;
	font-size: 11px;
	color: var(--white-color, #fff);
	border-radius: 20px;
	background-color: var(--accent-color, #a53e0d);
}

/* 상품별 주문상태 */
.xen-order-page .__order_item__status_wrap {
	flex: 0 0 auto;
	text-align: right;
}

.xen-order-page .__order_item__status_wrap .__title span {
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.xen-order-page .__order_item__status_wrap .type1 {
	font-weight: 400;
	color: var(--text-color, #5c5757);
}

/* 총 결제금액 강조 */
.xen-order-total {
	font-size: 18px;
	color: var(--accent-color, #a53e0d);
}

@media only screen and (max-width: 767px) {
	.xen-order-page .__order_item .__image {
		width: 68px;
		height: 68px;
	}

	.xen-order-page .__order_item__status_wrap {
		width: 100%;
		text-align: left;
	}
}


/* ========================================================================================
 * 19. 주문 상세 - 배송지정보 · 결제 정보 표
 *  이 두 구역은 <table class="__table"> 인데 CSS 가 없어 항목과 값이 그냥 나열돼
 *  보였습니다. 위쪽 주문 정보 표(.ps-table--compare)와 같은 모양으로 맞춥니다.
 * ======================================================================================== */
.xen-order-page .__table {
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--divider-color, #29080419);
	border-collapse: collapse;
}

.xen-order-page .__table th,
.xen-order-page .__table td {
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--divider-color, #29080419);
	word-break: break-word;
}

/* 항목명 칸 */
.xen-order-page .__table th {
	width: 30%;
	min-width: 110px;
	font-weight: 600;
	color: var(--primary-color, #290804);
	background-color: var(--secondary-color, #faf5f3);
}

.xen-order-page .__table td {
	color: var(--text-color, #5c5757);
	background-color: var(--white-color, #fff);
}

/* 위쪽 주문 정보 표도 같은 모양으로 */
.xen-order-page .ps-table--compare {
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--divider-color, #29080419);
	border-collapse: collapse;
}

.xen-order-page .ps-table--compare td {
	padding: 14px 18px !important;
	font-size: 15px;
	color: var(--text-color, #5c5757);
	border-bottom: 1px solid var(--divider-color, #29080419) !important;
	vertical-align: middle;
}

.xen-order-page .ps-table--compare td.heading {
	font-weight: 600;
	color: var(--primary-color, #290804);
	background-color: var(--secondary-color, #faf5f3);
}

/* 표를 감싸는 영역 - 모서리 둥글게 */
.xen-order-page .table-responsive,
.xen-order-page .__shipping_info,
.xen-order-page .__payment_info {
	margin-bottom: 8px;
}

.xen-order-page .__table,
.xen-order-page .ps-table--compare {
	overflow: hidden;
	border-radius: 8px;
}

/* 배송지 변경 버튼 */
.xen-order-page .__btn_shipping_address_change {
	background: var(--primary-color, #290804) !important;
	border-radius: 6px !important;
}

.xen-order-page .__btn_shipping_address_change:hover {
	background: var(--accent-color, #a53e0d) !important;
}

@media only screen and (max-width: 767px) {
	.xen-order-page .__table th,
	.xen-order-page .__table td,
	.xen-order-page .ps-table--compare td {
		padding: 11px 12px !important;
		font-size: 14px;
	}

	.xen-order-page .__table th {
		width: 34%;
		min-width: 0;
	}
}


/* ========================================================================================
 * 20. 주문 상세 - 이용안내
 *  안내문이 테두리 없이 본문에 그대로 붙어 있어 어디까지가 안내인지 구분이 안 됐습니다.
 *  회색 박스로 묶고, 소제목과 본문 줄간격을 구분합니다.
 * ======================================================================================== */
.xen-order-page .__usage_guide {
	margin-top: 40px;
	padding: 26px 28px;
	border: 1px solid var(--divider-color, #29080419);
	border-radius: 10px;
	background-color: var(--secondary-color, #faf5f3);
}

.xen-order-page .__usage_guide__title {
	margin: 0 0 16px;
	padding-bottom: 12px;
	font-size: 18px;
	color: var(--primary-color, #290804);
	border-bottom: 1px solid var(--divider-color, #29080419);
}

.xen-order-page .__usage_guide__content p {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--text-color, #5c5757);
}

/* 소제목 (신용카드매출전표 발행 안내 등) */
.xen-order-page .__usage_guide__content p.type1 {
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.xen-order-page .__usage_guide__content p.type1:first-child {
	margin-top: 0;
}

/* 설명줄 앞에 점을 붙여 목록처럼 읽히게 */
.xen-order-page .__usage_guide__content p.type2 {
	position: relative;
	margin-top: 5px;
	padding-left: 12px;
}

.xen-order-page .__usage_guide__content p.type2::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--accent-color, #a53e0d);
	opacity: 0.55;
}

@media only screen and (max-width: 767px) {
	.xen-order-page .__usage_guide {
		margin-top: 30px;
		padding: 18px 16px;
	}

	.xen-order-page .__usage_guide__content p {
		font-size: 13px;
	}
}


/* ========================================================================================
 * 21. 주문 상세 - 창고별 배송정보
 *  구성품이 서로 다른 창고에서 나가면 택배가 나뉘어 도착합니다.
 *  회원이 운송장을 창고별로 구분해 볼 수 있게 목록으로 보여줍니다.
 * ======================================================================================== */
.xen-order-ship {
	margin: 0;
	padding: 0;
	list-style: none;
}

.xen-order-ship li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
}

.xen-order-ship li + li {
	border-top: 1px dashed var(--divider-color, #29080419);
}

.xen-order-ship__wh {
	flex: 0 0 auto;
	min-width: 74px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 600;
	color: var(--white-color, #fff);
	text-align: center;
	border-radius: 20px;
	background-color: var(--primary-color, #290804);
}

.xen-order-ship__com {
	font-weight: 600;
	color: var(--primary-color, #290804);
}

.xen-order-ship__inv {
	color: var(--accent-color, #a53e0d);
	word-break: break-all;
}

.xen-order-ship__date {
	font-size: 13px;
	color: #999;
}

.xen-order-ship__note {
	margin: 8px 0 0;
	font-size: 13px;
	color: #999;
}

@media only screen and (max-width: 767px) {
	.xen-order-ship__wh {
		min-width: 0;
	}
}

/* ============================================================
   소셜셀링 유입 안내 띠 (2026-08-05)
   ------------------------------------------------------------
   /shop/{회원아이디} 로 들어온 방문자에게만 헤더 아래에 노출됩니다.
   마크업 : layout/nav.php 의 .xen-seller-notice
   ※ 예전 xen.css 는 폐기되어 로드되지 않으므로 반드시 이 파일에 둡니다.
   ============================================================ */
.xen-seller-notice{
	background:#7c2d12;
	color:#fff;
	padding:10px 0;
	font-size:14px;
	text-align:center;
}
.xen-seller-notice strong{ color:#ffd9a0; font-weight:700; }
@media (max-width: 575px){
	.xen-seller-notice{ font-size:12.5px; padding:8px 0; line-height:1.5; }
}

/* ============================================================
   비회원 주문조회 · 소셜셀링 하단 이동 버튼 (2026-08-05)
   ------------------------------------------------------------
   색으로 역할을 구분합니다.
     __btn--primary (갈색) : 주 동작   - 주문내역 보기 / 다시 조회하기 / URL 복사
     __btn--green   (연두) : 보조 동작 - 다른 주문 조회 / 쇼핑몰 보기
     __btn--dark    (검정) : 종료 동작 - 조회 종료
     __btn          (흰색) : 위 셋에 해당하지 않는 기타 이동
   마크업 : product/guest/*.php, mypage/social/lists.php 의 .xen-guest-actions
   ============================================================ */
.xen-guest-actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:12px;
	margin:28px 0 40px;
}
/* button 요소도 <a> 와 같은 모양이 되도록 브라우저 기본값을 지웁니다 */
.xen-guest-actions button.__btn{
	appearance:none;
	-webkit-appearance:none;
	font-family:inherit;
	cursor:pointer;
}
.xen-guest-actions .__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:150px;
	/* 글자 주변 여백 : 위아래 14px / 좌우 28px */
	padding:14px 28px;
	border:1px solid #d5d5d5;
	border-radius:4px;
	background:#fff;
	color:#555;
	font-size:14px;
	font-weight:600;
	line-height:1.2;
	text-align:center;
	text-decoration:none;
	transition:background .15s, border-color .15s, color .15s;
}
.xen-guest-actions .__btn:hover,
.xen-guest-actions .__btn:focus{
	background:#f5f5f5;
	border-color:#b9b9b9;
	color:#333;
	text-decoration:none;
}

/* 주 동작 : 테마 갈색 (주문내역 보기 / URL 복사) */
.xen-guest-actions .__btn--primary{
	background:#7c2d12;
	border-color:#7c2d12;
	color:#fff;
}
.xen-guest-actions .__btn--primary:hover,
.xen-guest-actions .__btn--primary:focus{
	background:#63220e;
	border-color:#63220e;
	color:#fff;
}

/* 보조 동작 : 연두색 (다른 주문 조회 / 쇼핑몰 보기) */
.xen-guest-actions .__btn--green{
	background:#7cb342;
	border-color:#7cb342;
	color:#fff;
}
.xen-guest-actions .__btn--green:hover,
.xen-guest-actions .__btn--green:focus{
	background:#689f38;
	border-color:#689f38;
	color:#fff;
}

/* 종료 동작 : 검정색 (조회 종료) */
.xen-guest-actions .__btn--dark{
	background:#222;
	border-color:#222;
	color:#fff;
}
.xen-guest-actions .__btn--dark:hover,
.xen-guest-actions .__btn--dark:focus{
	background:#000;
	border-color:#000;
	color:#fff;
}

/* 좁은 화면에서는 세로로 쌓고 폭을 꽉 채웁니다 */
@media (max-width: 575px){
	.xen-guest-actions{ flex-direction:column; gap:10px; margin:24px 0 32px; }
	.xen-guest-actions .__btn{ width:100%; min-width:0; }
}

/* ============================================================
   비회원 주문조회 - 폼 제출 버튼 (2026-08-05)
   ------------------------------------------------------------
   원래 .ps-btn--fullwidth 를 썼는데 이 화면에서는 폭·높이가 잡히지 않아
   작은 버튼으로 보였습니다. 전용 스타일로 넉넉하게 잡습니다.
   마크업 : product/guest/find.php 의 button.xen-guest-submit
   ============================================================ */
.xen-guest-submit{
	display:block;
	width:100%;
	margin-top:24px;
	/* 글자 주변 여백 넉넉히 */
	padding:18px 24px;
	appearance:none;
	-webkit-appearance:none;
	border:1px solid #7c2d12;
	border-radius:4px;
	background:#7c2d12;
	color:#fff;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.02em;
	cursor:pointer;
	transition:background .15s, border-color .15s;
}
.xen-guest-submit:hover,
.xen-guest-submit:focus{
	background:#63220e;
	border-color:#63220e;
	color:#fff;
}

/* 탭·입력칸 사이 간격도 조금 넓혀 답답하지 않게 합니다 */
.xen-guest-find .form-group{ margin-bottom:20px; }
.xen-guest-find .form-group .form-control{
	height:auto;
	padding:14px 16px;
	font-size:15px;
}

/* ============================================================
   로그인 화면의 비회원 주문조회 입구 (2026-08-05)
   ------------------------------------------------------------
   비회원은 며칠 뒤 재방문하면 세션·쿠키가 만료되어 주문을 찾을 길이 없습니다.
   그때 가장 먼저 들르는 로그인 화면에 입구를 둡니다.
   마크업 : user/login.php 의 .xen-login-guest
   ============================================================ */
.xen-login-guest{
	margin-top:28px;
	padding-top:24px;
	border-top:1px solid #eee;
	text-align:center;
}
.xen-login-guest .__msg{
	margin-bottom:12px;
	font-size:14px;
	font-weight:600;
	color:#555;
}
.xen-login-guest .__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:200px;
	padding:15px 28px;
	border:1px solid #7cb342;
	border-radius:4px;
	background:#7cb342;
	color:#fff;
	font-size:15px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	transition:background .15s, border-color .15s;
}
.xen-login-guest .__btn:hover,
.xen-login-guest .__btn:focus{
	background:#689f38;
	border-color:#689f38;
	color:#fff;
	text-decoration:none;
}
.xen-login-guest .__note{
	margin-top:12px;
	font-size:12.5px;
	color:#999;
	line-height:1.7;
}
@media (max-width: 575px){
	.xen-login-guest .__btn{ width:100%; min-width:0; }
}

/* ============================================================
   비회원 주문조회 목록 - 카드 안 '주문상세' 버튼 (2026-08-05)
   ------------------------------------------------------------
   원래 .ps-btn--sm 을 썼는데 여백이 거의 없어 글자에 테두리만 붙은 모양이었습니다.
   하단 이동 버튼(.xen-guest-actions)보다는 작게, 대신 여백은 확실히 줍니다.
   마크업 : product/guest/lists.php 의 .__btn-detail
   ============================================================ */
.xen-guest-list .__btn-detail{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:120px;
	/* 글자 주변 여백 : 위아래 11px / 좌우 22px */
	padding:11px 22px;
	border:1px solid #7c2d12;
	border-radius:4px;
	background:#7c2d12;
	color:#fff;
	font-size:13.5px;
	font-weight:600;
	line-height:1.2;
	text-decoration:none;
	transition:background .15s, border-color .15s;
}
.xen-guest-list .__btn-detail:hover,
.xen-guest-list .__btn-detail:focus{
	background:#63220e;
	border-color:#63220e;
	color:#fff;
	text-decoration:none;
}

/* 카드 내부도 조금 여유를 줍니다 */
.xen-guest-list .__card{ padding:24px; }
.xen-guest-list .__foot{ margin-top:20px; padding-top:16px; border-top:1px solid #f2f2f2; }
.xen-guest-list .__row{ padding:7px 0; }
/* 주문상태 배지도 하단 버튼과 모서리를 맞춥니다 */
.xen-guest-list .__status{ padding:6px 14px; border-radius:4px; }

@media (max-width: 575px){
	.xen-guest-list .__card{ padding:18px; }
	.xen-guest-list .__foot{ text-align:center; }
	.xen-guest-list .__btn-detail{ width:100%; min-width:0; }
}