@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;
}

/**
 * 슬라이더 아래 여유 공간 (2026-08-14)
 * 페이지네이션 점이 카드 바로 밑에 붙어 다음 섹션 경계와 맞닿아 보여서,
 * 슬라이더 아래쪽에 여백을 두고 그 안에 점을 배치합니다.
 */
.xen-product-slider {
	padding-bottom: 50px;
}

.xen-product-slider .swiper-pagination {
	bottom: 8px;
}

/* 카드 내부 여백 : 좁은 카드에서는 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 구조로 메뉴를 그립니다.
 * 카드(이미지 + 메뉴이름)들을 한 줄로 가운데 정렬해서 보여줍니다.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * [2026-08-24] 메가메뉴가 가로가 아니라 세로로 쌓이던 문제
 * -----------------------------------------------------------------------------
 * custom.css 661줄의 `.main-menu ul li.submenu:first-child ul { width: 235px }`
 * 는 원래 "첫 번째 메뉴의 좁은 텍스트 드롭다운"을 위한 템플릿 기본 규칙입니다.
 * 그런데 관리자 > 메뉴관리에서 CEO소개·교육자료를 감추면서 "쇼핑몰"이 첫 메뉴가 되어,
 * 이 규칙이 쇼핑몰 메가메뉴 패널(ul.dropdown-menu)까지 잡아버렸습니다.
 *
 * 선택자 우선순위가 (0,3,3) 이어서 템플릿이 메가메뉴용으로 둔
 * `.main-menu .dropdown-menu { width: 100% }` (0,2,0) 를 이깁니다.
 * 그래서 패널 폭이 235px 로 줄고, 카드(.mega-menu-item, flex 1 1 170px)가
 * 한 줄에 하나씩만 들어가 세로로 쌓였습니다.
 *
 * 메뉴를 감추거나 순서를 바꿔도 항상 가로 전체폭으로 펼쳐지도록 되돌립니다.
 * (0,4,2) 로 위 규칙보다 우선순위를 높였습니다.
 * 모바일 햄버거(.slicknav_menu / .responsive-menu)는 .main-menu 밖이라 영향 없습니다.
 * -------------------------------------------------------------------------- */
header.main-header .main-menu li.mega-menu > .dropdown-menu {
	width: 100%;
	left: 0;
	right: 0;
}
.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;
}
/**
 * 여기서는 "흰 상자 모양"만 잡습니다.
 * ⚠ 크기(height·padding)는 이 절에 두지 않습니다. 파일 뒤 36절이 순서로 이기기 때문에
 *   여기에 또 적어두면 어느 쪽이 실제 값인지 헷갈립니다. → shop.css 36절 한 곳에서만.
 */
.footer-payment-options ul li img {
	display: block;
	width: auto;
	max-width: none;
	background: #fff;
	border-radius: 6px;
	box-sizing: content-box;
}

/* =============================================================================
 * 푸터 혜택 줄 : 기존 "맨위 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.webp 이미지로 대체했습니다.
 * ========================================================================== */

/* 좌우 높이를 맞춰 이미지가 폼과 같은 높이로 늘어나게 합니다 */
.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;
}

/* -----------------------------------------------------------------------------
 * 오른쪽 칸 : 사진 + 안내문 + 사업자 등록 버튼   [2026-08-30 운영자 요청]
 * -----------------------------------------------------------------------------
 * 원래는 사진 한 장만 있던 자리입니다(그나마 loginBg.webp 가 서버에 없어 비어
 * 있었습니다). 사진 아래에 사업기회 클로징과 같은 문구와 가입 버튼을 붙였습니다.
 *
 * 사진 → 문구 → 버튼 순으로 세로로 쌓습니다.
 * -------------------------------------------------------------------------- */
.dug-login-visual {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.dug-login-visual .login-content-image { flex: 0 0 auto; }

/**
 * 사진은 원본 비율(425x272) 그대로 둡니다.  ★ 이 화면에서만 ★
 *
 * 위쪽 기본 규칙 `.login-content-image img` 는 `height:100% / min-height:420px /
 * object-fit:cover` 입니다. 아이디찾기처럼 "사진만 세로로 길게" 넣는 화면 기준이라
 * 여기서 그대로 쓰면 칸 폭(약 620px)에 맞춰 확대된 뒤 위아래가 100px 넘게 잘려
 * 인물 머리가 날아갑니다. 그래서 높이를 풀어 가로폭에만 맞춥니다.
 * (width:100% + height:auto 면 브라우저가 알아서 원본 비율을 지킵니다)
 *
 * 사진 아래 글·버튼은 자기 높이만큼만 쓰므로, 두 칸의 아래끝이 정확히 맞지는
 * 않습니다. .login-content-box 가 align-items:stretch 라 짧은 쪽 칸이 늘어날 뿐
 * 내용은 위에서부터 채워지므로 보기에 어색하지 않습니다.
 *
 * 명시도 : 클래스 3개(.page-login .dug-login-visual .login-content-image)로
 * 원본 규칙(클래스 1개)을 이깁니다. 미디어쿼리 안의 min-height 260/200px 도
 * 함께 이기므로 모바일에서도 비율이 유지됩니다.
 */
.page-login .dug-login-visual .login-content-image img {
	height: auto;
	min-height: 0;
}

/* 사진 아래 글 묶음 */
.dug-login-visual-text {
	margin-top: 30px;
	text-align: center;
}

.dug-login-visual-text h3 {
	font-size: 30px;
	line-height: 1.3;
	color: var(--primary-color);
	margin: 0;
}

.dug-login-visual-text p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-color);
	margin: 14px 0 0;
}

.dug-login-visual-btn { margin-top: 26px; }

/* 아이디찾기 / 비밀번호찾기 / 회원가입 링크 줄 */
.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; }

	/* 오른쪽 칸 : 폼 아래로 내려오므로 글자를 한 단계 줄입니다 [2026-08-30] */
	.dug-login-visual-text { margin-top: 22px; }
	.dug-login-visual-text h3 { font-size: 24px; }
	.dug-login-visual-text p { font-size: 16px; margin-top: 10px; }
	.dug-login-visual-btn { margin-top: 20px; }
}

/* =============================================================================
 * 아이디 / 비밀번호 찾기 (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;
	/* 밑줄과 첫 입력줄이 붙어 보여서 아래 여백을 둡니다  [2026-09-10] */
	margin: 0 0 18px;
}

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

/*
 * 카드 스킨에서 옮겨온 입력줄(.mb-3)			[2026-09-10]
 * ---------------------------------------------------------------------
 * register_field.php 가 [라벨 + 입력칸] 을 .mb-3 한 덩어리로 내보냅니다.
 * 부트스트랩 기본값(16px)으로는 윗줄 입력칸과 아랫줄 라벨이 붙어 보여
 * 줄 간격과 라벨 아래 여백을 조금씩 키웠습니다.
 */
.register-group-body > .mb-3 { margin-bottom: 22px; }

.register-group-body .form-label { margin-bottom: 8px; }

/*
 * 비밀번호 ↔ 비밀번호 확인 사이					[2026-09-10]
 * 두 칸은 한 쌍이라 마크업에서 인라인 style 로 붙여 놨습니다(인라인 !important
 * 라 CSS 로는 못 이깁니다). 대신 그 아래 "일치 여부" 문구에 여백을 줘서
 * 다음 줄(이름)이 입력칸에 달라붙지 않게 합니다. 문구가 비어 있어도
 * 자리(여백)는 남습니다.
 */
.register-group-body > .pw-match-msg { margin: 6px 0 22px; }

/*
 * 우편번호 줄만 폭을 절반으로					[2026-09-10]
 * 우편번호는 다섯 자리라 다른 칸과 같은 폭이면 허전합니다.
 * 휴대폰에서는 [우편번호 찾기] 버튼이 들어갈 자리가 필요해 260px 아래로는
 * 줄이지 않습니다(그 폭이면 화면 폭보다 좁아 그대로 반영됩니다).
 */
.mb-3.reg-post-row {
	width: 50%;
	min-width: 260px;
	max-width: 100%;
}

/* 휴대폰 : 70% (운영자 지시). 260px 하한을 풀어야 70% 가 그대로 먹습니다 */
@media only screen and (max-width: 767px) {
	.mb-3.reg-post-row {
		width: 70%;
		min-width: 0;
	}
}

/*
 * 우편번호 찾기 버튼 (주소칸은 읽기전용이라 이 버튼으로만 채웁니다)
 * ⚠ 껍데기(.register-group-body)로 감싸지 않습니다 - 같은 컴포넌트를 쓰는
 *   마이페이지 > 회원등록에는 그 껍데기가 없어 버튼이 맨몸으로 나옵니다.
 */
.reg-post-btn {
	flex: 0 0 auto;
	align-self: stretch;
	margin: 0 4px 0 8px;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--primary-color);
	color: #fff;
	font-size: 14px;
	white-space: nowrap;
}

.reg-post-btn:hover { opacity: .88; }

/*
 * 계좌인증 결과 팝업							[2026-09-11]
 * ---------------------------------------------------------------------
 * 회원가입 2단계·회원등록 두 화면이 같이 씁니다(마크업은 register_field.php).
 * 부트스트랩 모달 JS 에 기대지 않습니다 - 그 스크립트는 푸터 맨 아래에서
 * 늦게 실려서, 칸 옆 버튼이 먼저 눌리면 아무 일도 안 일어납니다.
 */
.reg-modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .45);
}

.reg-modal.is-open { display: flex; }

.reg-modal__box {
	width: min(92vw, 380px);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	padding: 26px 24px 20px;
	text-align: center;
}

.reg-modal__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--primary-color);
}

.reg-modal__title.is-fail { color: #c0392b; }

.reg-modal__msg {
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	margin: 0 0 18px;
	word-break: keep-all;
}

.reg-modal__ok {
	min-width: 120px;
	padding: 10px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--primary-color);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.reg-modal__ok:hover { opacity: .9; }

/*
 * 성별 라디오								[2026-09-10]
 * 「남 / 여」 글자가 동그라미보다 조금 위로 떠 보여 두어 픽셀 내립니다.
 * (부트스트랩 .form-check-input 은 위쪽 여백으로 맞추는데, 이 줄은 아이콘이
 *  함께 있어 눈에는 어긋나 보입니다)
 */
.reg-sex-group .form-check-label { position: relative; top: 2px; }

/* 읽기전용 칸(우편번호·주소)은 눌러도 검색창이 열립니다 */
.register-group-body input[readonly],
input#usex_post[readonly],
input#usex_address[readonly] { cursor: pointer; }

/*
 * 휴대폰에서 버튼 줄이기							[2026-09-10]
 * 줄 폭이 70% 로 좁아지면 버튼이 입력칸 글자를 덮습니다.
 * ⚠ 이 블록은 반드시 위 .reg-post-btn 기본값 **뒤**에 있어야 합니다
 *   (명시도가 같아 순서로 이깁니다).
 */
@media only screen and (max-width: 767px) {
	.reg-post-btn {
		margin: 0 3px 0 4px;
		padding: 0 10px;
		font-size: 13px;
	}
}

/* 한 줄 = [ 라벨(회색) | 입력칸 ] */
.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; }

/**
 * 초대 링크로 자동 지정된 추천인 칸   [2026-08-30]
 * ----------------------------------------------------------------------------
 * /user/referral/{코드} 로 들어오면 추천인이 이미 정해져 있어 고칠 수 없습니다
 * (register_field.php 가 readonly 로 그립니다). 눌러도 안 고쳐지는 칸이므로
 * 보기에도 "채워져 있는 값"임이 드러나야 합니다. 회색 바탕 + 굵은 글씨로 구분합니다.
 */
.register-group-body .form-group .form-control.is-fixed {
	background: var(--secondary-color);
	color: var(--primary-color);
	font-weight: 600;
	cursor: default;
}

/* 그 아래 안내 한 줄. 위 `> *:not(h5)` 의 margin:0 을 이겨야 붙어 보이지 않습니다 */
.register-group-body .form-group > .form-help-text { margin-top: 8px; }

/* 오류 메시지 / 안내 문구 */
.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);
}

/* -----------------------------------------------------------------------------
 * 쇼핑 계속하기 (.btn-continue) - 평소엔 곤색으로 채우고, 올리면 흰 배경으로 비웁니다
 * -----------------------------------------------------------------------------
 * .btn-default 는 배경색을 직접 바꾸는 버튼이 아닙니다. ::after 막이 가운데(left/right 50%)
 * 에서 좌우로 펼쳐지며 버튼을 덮는 구조라, 배경만 바꾸면 호버 때 엉뚱한 색이 덮입니다.
 * 그래서 여기서는 **막 자체를 흰색으로** 바꿔 원래 애니메이션을 그대로 쓰면서 색만 뒤집습니다.
 *   평소 : 버튼 배경 곤색 + 흰 글자 (막은 접혀 있어 안 보임)
 *   호버 : 흰 막이 좌우로 펼쳐져 덮음 + 글자 곤색
 * ::after 는 z-index:-1 이지만 부모가 z-index:1 로 쌓임 맥락을 만들어서,
 * 버튼 자기 배경 '위' · 글자 '아래' 에 그려집니다. 그래서 이 방식이 성립합니다.
 * 옆의 [장바구니 비우기]와 관심상품 페이지 버튼은 손대지 않았습니다(테두리형 그대로).
 * -------------------------------------------------------------------------- */
.cart-item-buttons .btn-default.btn-outline.btn-continue {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.cart-item-buttons .btn-default.btn-outline.btn-continue::after {
	background-color: var(--white-color);
}

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

/* =============================================================================
 * 주문서 금액 줄 (구매금액 / 배송비 / 추천 판매자)		[2026-08-30 운영자 요청]
 * -----------------------------------------------------------------------------
 * 구 스킨 색이 민트(#abf1f1)와 하늘(#abd3f1)이라 사이트 톤과 따로 놀았습니다.
 * 브랜드 색(곤색·오프화이트)으로 바꾸고 두 줄의 높이를 맞춥니다.
 *
 * 높이가 달랐던 이유
 *   구매금액은 구 CSS 의 padding 20px, 배송비는 뷰에 박힌 인라인 style 의 10px
 *   이었습니다. 그래서 구매금액만 20px 더 높았습니다.
 *   인라인 style 은 CSS 로 덮을 수 없어(!important 를 써야 함) 뷰에서 걷어내고
 *   `.is-delivery` 클래스로 바꿨습니다. 이제 색·높이 모두 여기서 정합니다.
 *
 * 구매금액은 상품 줄마다 반복되므로 옅게(오프화이트), 배송비는 한 줄뿐이라
 * 곤색으로 채워 목록을 닫아 줍니다.
 * ========================================================================== */

.checkout__purchase__price {
	align-items: center;
	padding: 10px 20px;                 /* 20px → 10px : 배송비 줄과 높이를 맞춥니다 */
	border-radius: 8px;
	background-color: var(--secondary-color, #F2F6FC);
}

.checkout__purchase__price span,
.checkout__purchase__price span:last-child {
	color: var(--primary-color, #04183F);
}

/* 배송비 : 곤색으로 채웁니다 */
.checkout__purchase__price.is-delivery {
	background-color: var(--primary-color, #04183F);
}

.checkout__purchase__price.is-delivery span,
.checkout__purchase__price.is-delivery span:last-child {
	color: var(--white-color, #fff);
}

/* 주문요약 금액 줄 */
.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); }

/* 주문하기 버튼 */
/**
 * 장바구니 '주문하기'   [2026-08-30 운영자 요청]
 * ----------------------------------------------------------------------------
 * 평소 골드 → 마우스를 올리면 곤색.
 * 헤더의 '사업자 등록'(.dug-btn-gold)과 **똑같은 동작**입니다. 사이트에서 가장
 * 중요한 버튼 두 개가 같은 결로 움직이도록 맞췄습니다.
 *
 * ::after 를 곤색으로 바꾸는 이유   ★ 안 그러면 버튼이 통째로 비어 보입니다 ★
 *   custom.css 4692줄이 이 버튼만 막 색을 흰색(--bg-color: #FFFFFF)으로 잡아뒀습니다.
 *   .btn-default 는 마우스를 올리면 ::after 막이 가운데서 좌우로 펼쳐지며 덮는
 *   구조라, 막이 흰색이면 흰 바탕이 되고 그 위 흰 글씨는 보이지 않습니다.
 *   여기서 막을 곤색으로 덮어써야 "골드 → 곤색"이 실제로 그렇게 보입니다.
 *   (custom.css 보다 shop.css 가 뒤에 실려서 이깁니다)
 */
.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::after {
	background: var(--primary-color);
}

/* 곤색으로 채워지므로 글자는 흰색을 유지합니다 (custom.css 는 곤색 글씨로 바꿉니다) */
.order-checkout-button .btn-default:hover {
	color: var(--white-color);
	border-color: var(--primary-color);
}

.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;
}

/* -----------------------------------------------------------------------------
 * 모바일 햄버거 메뉴 안에서도 같은 무효화가 필요합니다  [2026-08-29]
 * -----------------------------------------------------------------------------
 * 증상 : /company/management 같은 페이지에서 햄버거를 열면 '제품소개' 자리가
 *        글자 없는 흰 상자로 나왔습니다.
 *
 * 원인 : SlickNav 는 #menu 를 통째로 복제해 .slicknav_menu 안에 새로 그립니다.
 *        복제본은 .main-menu 밖이라 바로 위 무효화 규칙이 닿지 않고,
 *        legacy/style.css 의  .mega-menu { background:#fff; border:1px solid #ccc;
 *        display:flex }  가 그대로 살아납니다. 흰 배경 위에 흰 글자
 *        (.slicknav_nav li a { color:#fff })라 글자까지 안 보였습니다.
 *
 * 왜 특정 페이지에서만 보이나
 *        legacy/style.css 는 LEGACY_BODY 인 페이지에만 실립니다(header.php 133줄).
 *        회사소개·사업기회처럼 $new_skin_pages 에 등록된 페이지는 안 실려서
 *        멀쩡했고, 등록이 빠진 페이지에서만 흰 상자가 났습니다.
 *        근본 해결은 그 목록에 페이지를 등록하는 것이고, 이 규칙은 등록이
 *        빠지더라도 메뉴만은 깨지지 않게 하는 안전장치입니다.
 * -------------------------------------------------------------------------- */
.slicknav_menu li.mega-menu {
	display: block;
	flex-flow: initial;
	justify-content: initial;
	padding: 0;
	background: transparent;
	border: 0;
}

/*
 * 위 PC 규칙과 달리 여기에는  li.mega-menu > *  짝이 없습니다  [2026-08-29]
 * ----------------------------------------------------------------------------
 * 처음에 PC 규칙을 그대로 베껴  > * { padding: 0 }  을 넣었더니, 구 CSS 의
 * padding 만 지운 게 아니라 슬릭내비 고유의  padding: 6px 20px  까지 같이
 * 지워졌습니다. 그래서 '제품소개' 줄만 글자가 왼쪽 끝에 붙고 줄 높이도
 * 12px 얇아져 다른 메뉴와 균형이 안 맞았습니다.
 *
 * 안 넣어도 되는 이유
 *   구 CSS 의  .mega-menu > *  는 명시도 (0,1,0) 이고,
 *   custom.css 의  .slicknav_nav .slicknav_row  는 (0,2,0) 입니다.
 *   게다가 custom.css 가 legacy/style.css 보다 뒤에 실립니다(header.php 148 / 162줄).
 *   명시도로도 순서로도 슬릭내비 쪽이 이기므로 손댈 필요가 없습니다.
 *   남는 것은  width: 100%  뿐인데 블록 요소라 아무 영향이 없습니다.
 *
 * PC 쪽에 그 규칙이 필요한 건 .main-menu 의 구조가 달라서입니다. 둘을 같은
 * 규칙으로 맞추려 하지 마세요.
 */

/* 이미지가 칸을 넘지 않도록 */
.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; }

/* -----------------------------------------------------------------------------
 * 모바일·태블릿(≤991px) : 2단을 1단으로 풀어 위아래로 쌓습니다  [2026-09-03 운영자 요청]
 * -----------------------------------------------------------------------------
 * 증상 : 휴대폰에서도 PC 와 똑같이 왼쪽(사진) / 오른쪽(정보)이 나란히 붙어 있어
 *        두 칸 모두 폭이 절반뿐이라 썸네일도 구성품 목록도 잘게 눌려 보였습니다.
 *
 * 원인 : 아래 width:100% 만 있었는데, 이 셋은 grid 아이템이라 폭을 100% 로 줘도
 *        `grid-template-columns` 가 2칸으로 남아 있는 한 계속 옆으로 붙습니다.
 *        (칸 자체가 절반이라 그 안에서의 100% 였습니다)
 *        legacy/style.css 767px 의 `flex-flow: column wrap` 도 display 가 grid 라
 *        아무 일을 하지 않습니다.
 *
 * 해결 : 칸을 한 줄로 바꾸고 grid-column / grid-row 지정을 모두 auto 로 풉니다.
 *        그러면 마크업 순서 그대로 쌓입니다.
 *          ① 사진 갤러리(.ps-product__thumbnail)      ← "왼쪽 부분"
 *          ② 상품명·별점(.ps-product__info)           ┐
 *          ③ 가격·구성품·수량·구매버튼(.xen-detail-info) ┘ ← "오른쪽 부분"
 *        PC(≥992px)는 위쪽 2단 규칙 그대로라 지금 모양이 바뀌지 않습니다.
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.ps-page--product .ps-product--detail .ps-product__header {
		grid-template-columns: minmax(0, 1fr);	/* 2칸 → 1칸 */
		column-gap: 0;
		row-gap: 24px;
	}

	/* 칸 지정(grid-column:1 / grid-row:1 span 2 등)을 풀어 흐르는 대로 쌓이게 */
	.ps-page--product .ps-product--detail .ps-product__thumbnail,
	.ps-page--product .ps-product--detail .ps-product__info,
	.ps-page--product .xen-detail-info {
		grid-column: auto;
		grid-row: auto;
		width: 100%;
		max-width: 100%;
	}

	/* 구 CSS(legacy/style.css 991px)가 오른쪽 정보에 넣던 왼쪽 여백 3rem 제거 */
	.ps-page--product .ps-product--detail .ps-product__header .ps-product__info {
		padding-left: 0;
	}
}

/* -----------------------------------------------------------------------------
 * 큰 이미지 칸을 고정 크기로  [2026-09-03 운영자 요청]
 * -----------------------------------------------------------------------------
 * 증상 : 썸네일을 눌러 사진을 넘길 때마다 큰 이미지의 크기가 제각각이었습니다.
 *        VIP Pack 4(/shop/product/detail/18)에 등록된 5장을 실측하면
 *          1202x553(비율 2.17) · 2048x2048(1.00) · 215x347(0.62)
 *          345x398(0.87) · 1080x1080(1.00)
 *        으로 비율이 전부 다릅니다. 위 규칙이 `max-width:100%; height:auto` 뿐이라
 *          - 폭이 넓은 사진(1202x553)은 폭에 맞춰 줄어들며 낮고 납작하게
 *          - 작고 세로로 긴 사진(215x347)은 칸보다 작아 원본 215px 그대로 작게
 *        나왔습니다. "정작 큰 사진이 더 작아 보인다" 는 말이 이 현상입니다.
 *
 * 해결 : 슬라이드(.item)를 정사각형 고정 칸으로 만들고 사진은 그 안에서
 *        object-fit:contain 으로 맞춥니다. 어떤 비율이 들어와도 칸 크기가 같고
 *        사진은 잘리거나 늘어나지 않습니다(cover 가 아닌 contain 인 이유).
 *        정사각형은 상품목록 카드(custom.css 1897줄 `aspect-ratio:1/1`)와 같은
 *        비율이라 목록 → 상세로 넘어와도 사진 크기가 튀지 않습니다.
 *
 * 주의 1 : `.item` 은 slick 이 잡아가는 슬라이드(`.slick-slide`)입니다.
 *          slick.css 가 `.slick-slide { height:100% }` 를 걸어두므로
 *          `height:auto` 로 먼저 풀어야 aspect-ratio 가 높이를 계산합니다.
 *          폭은 slick 이 인라인 style 로 넣어주므로 건드리지 않습니다.
 * 주의 2 : `<a>` 에 `display:block; height:100%` 이 반드시 필요합니다.
 *          `<a>` 가 인라인으로 남으면 높이가 auto 라, 그 안 img 의 `height:100%`
 *          가 auto 로 풀려 고정 칸이 무의미해집니다.
 * 주의 3 : 이미지 규칙은 위쪽 `.ps-product__gallery img`(클래스 3개)와
 *          `.ps-product__thumbnail img`(3개)를 이겨야 해서 `.item` 을 끼워
 *          클래스 4개로 올렸습니다 → [[dreamupg-css-specificity-trap]]
 *
 * 마우스 오버 확대(scale 2)는 그대로 동작합니다. 칸이 고정이라 확대 배율도
 * 사진마다 같아졌습니다(예전에는 작은 사진만 유난히 크게 확대됐습니다).
 * -------------------------------------------------------------------------- */
.ps-page--product .ps-product__gallery .item {
	height: auto;				/* slick.css 의 height:100% 해제 (주의 1) */
	aspect-ratio: 1 / 1;
	background: var(--white-color);
}

.ps-page--product .ps-product__gallery .item > a {
	display: block;				/* 인라인이면 아래 height:100% 가 안 먹습니다 (주의 2) */
	width: 100%;
	height: 100%;
}

.ps-page--product .ps-product__gallery .item img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;		/* 잘리지 않고 칸 안에 다 들어옵니다 */
	object-position: center;
}

/* ⛔ 위 규칙만으로는 부족합니다 - 아이디 선택자에게 집니다  [2026-09-03]
 * ---------------------------------------------------------------------------
 * 증상 : 세로로 긴 사진 한 장만 등록한 상품(콜라겐 업 = 215x347)의 큰 이미지가
 *        아래쪽이 잘려 나왔습니다. 가로로 넓은 사진은 멀쩡해서 눈에 안 띄었습니다.
 * 원인 : legacy/style.css 9734줄
 *          #prodGallery .item img.zoom-target { width:100%; height:auto; }
 *        아이디 1개(#prodGallery)가 들어 있어 클래스 4개짜리 위 규칙보다 셉니다.
 *        그래서 height 가 auto 로 풀리고, 사진이 칸 폭(약 690px)에 맞춰
 *        원본의 3배로 늘어나 세로 1100px 가까이 됩니다. 칸은 정사각형이고
 *        `.item { overflow:hidden }` 이라 넘친 아래쪽이 잘립니다.
 * 해결 : 같은 무게(아이디 1개 + 클래스 2개 + 태그)로 맞춰 씁니다. shop.css 가
 *        legacy 보다 뒤에 실려서 무게가 같으면 이쪽이 이깁니다.
 *        → [[dreamupg-css-specificity-trap]]
 * 참고 : 잘림은 이걸로 끝이지만, 원본이 작으면(215px) 확대되어 흐린 것은
 *        그대로입니다. 그건 사진을 큰 걸로 다시 올려야 합니다. */
#prodGallery .item img.zoom-target {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}

/* -----------------------------------------------------------------------------
 * 상품정보 표(배송비 / 판매가)의 진한 검정 선 제거
 * -----------------------------------------------------------------------------
 * 부트스트랩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); }

/* -----------------------------------------------------------------------------
 * 소비자가 · PV 줄			[2026-09-11 운영자 지시로 상세페이지에 추가]
 * -----------------------------------------------------------------------------
 * 회원 화면은 '회원가'가 실제로 낼 금액이라 그 줄만 크게(위 strong 22px) 두고,
 * 참고값인 소비자가와 PV 는 한 단계 작게 둡니다.
 * 비회원 화면에서는 소비자가가 곧 낼 금액이라 뷰가 <strong> 으로 그립니다
 * (그래서 여기 규칙은 <span> 에만 겁니다 - 같은 칸이라도 태그로 크기가 갈립니다).
 * -------------------------------------------------------------------------- */
.ps-page--product .product-price-table .price-consumer span,
.ps-page--product .product-price-table .price-pv span {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
}

.ps-page--product .product-price-table .price-pv span {
	font-size: 15px;
	font-weight: 600;
	color: #777;
}

/* 할인율 뱃지 */
.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;
}

/* -----------------------------------------------------------------------------
 * 상품명 영역
 *   LEAN+                    ← 크고 굵은 상품명
 *   SLIM DOWN · TONE UP      ← 기본설명(item_description)
 *   ★★★★★ 4.86점 · 리뷰 669개
 * -----------------------------------------------------------------------------
 * [2026-09-03] 기본설명이 제목 위(눈썹글씨)에서 제목 아래로 내려갔습니다.
 * 마크업은 product/components/thing_view.php 입니다.
 * 아래 두 margin 은 짝입니다 — 제목은 설명에 붙이고(8px), 설명 아래에서
 * 별점 줄과 간격을 벌립니다(16px). 한쪽만 고치면 간격이 어긋납니다.
 * -------------------------------------------------------------------------- */
.ps-page--product .ps-product__info h1 {
	margin: 0 0 8px;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

.ps-page--product .ps-product__info .product-subtext {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	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;
}

/* 바로구매 : 평소엔 골드로 채우고, 마우스를 올리면 흰 바탕 + 골드 글자로 비웁니다.
   장바구니와 같은 방식이라 두 버튼이 나란히 같은 동작을 합니다.
   테두리는 크기가 흔들리지 않도록 안쪽 그림자(inset)로 그립니다.
   흰 바탕 위 글자는 --accent-color 대신 한 단계 진한 --accent-text 를 씁니다.

   :not() 을 다섯 개나 붙인 이유  [2026-08-30]
     아래 15절 "주 액션 버튼"이
       .ps-btn:not(--outline):not(--gray):not(--post):not(--reverse):not(--black):hover
     라서 우선순위가 클래스 6개(0,6,0)입니다. 여기가 원래 (0,5,0) 이라 늘 졌고,
     그래서 **바로구매에 마우스를 올리면 15절이 시키는 곤색 배경 + 흰 글자**가 나왔습니다.
     (테두리 box-shadow 만 15절에 없는 속성이라 골드로 남아 곤색 버튼에 골드 테두리로 보였습니다)
     같은 :not() 사슬을 여기에도 붙여 (0,9,0) 으로 올려 확실히 이기게 했습니다.
     원래 있던 `.ps-page--product .ps-btn.sit_btn_buy` 선택자는 (0,3,0) 이라 어차피 지고,
     그 버튼도 .bp-actions 안에 있어 아래 선택자가 함께 잡으므로 지웠습니다. */
.ps-page--product .bp-actions .ps-btn:not(.ps-btn--black):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse) {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
	box-shadow: inset 0 0 0 2px var(--accent-color);
}

.ps-page--product .bp-actions .ps-btn:not(.ps-btn--black):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):hover {
	background: var(--white-color, #fff);
	border-color: transparent;
	color: var(--accent-text, #BB7E20);
	box-shadow: inset 0 0 0 2px var(--accent-color);
}

/* 장바구니 : 평소엔 곤색으로 채우고, 마우스를 올리면 흰 바탕 + 곤색 글자로 비웁니다.
   호버 때 테두리를 border 로 주면 .ps-btn 이 border:none + content-box 라 버튼이
   상하좌우 2px 씩 커져 옆의 '바로구매'와 높이가 어긋납니다.
   그래서 테두리는 안쪽 그림자(inset)로 그립니다 - 크기가 변하지 않습니다. */
.ps-page--product .bp-actions .ps-btn--black {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
	box-shadow: inset 0 0 0 2px var(--primary-color);
}

.ps-page--product .bp-actions .ps-btn--black:hover {
	background: var(--white-color, #fff);
	border-color: transparent;
	color: var(--primary-color);
	box-shadow: inset 0 0 0 2px var(--primary-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;
}

/**
 * 혜택 목록이 마지막일 때는 아래 여백을 없앱니다.  [2026-08-30]
 * 30px 은 원래 목록과 그 아래 사진 사이를 띄우려던 값입니다.
 * 사진을 걷어내면서(register.php) 목록이 마지막이 되어, 그냥 두면 상자 아래쪽에
 * 이유 없는 빈 칸 30px 이 남습니다. 나중에 사진을 다시 넣으면 이 규칙은 저절로
 * 풀려서(마지막이 아니게 되어) 30px 이 되살아납니다.
 */
.register-info-benefits:last-child { margin-bottom: 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차 메뉴'와 똑같이 보이게  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * 왜 혼자 달라 보였나
	 *   nav.php 는 하위에 메뉴이미지가 하나라도 등록돼 있으면 그 메뉴를
	 *   이미지형 메가메뉴(ul.dropdown-menu)로 그립니다. 제품소개가 그 경우입니다.
	 *   .dropdown-menu 는 부트스트랩이 흰 배경을 깔고, PC 카드 배열용
	 *   .mega-menu-box--category 규칙이 text-align:center 를 걸어서
	 *   혼자만 '흰 판 + 가운데 정렬 + 검은 글씨' 가 되었습니다.
	 *   메뉴이미지가 없는 회사소개는 평범한 <ul> 이라 남색 판에 흰 글씨였고요.
	 *
	 * 어떻게 맞췄나
	 *   흰 배경과 여백을 걷어내 남색 판이 그대로 비치게 하고,
	 *   가운데 정렬을 풀고, 글자를 평범한 2차 메뉴와 같은 값으로 맞춥니다.
	 *     흰색 / 16px / 왼쪽 정렬 / padding 6px 20px 6px 30px  (custom.css 1139줄과 동일)
	 *   구분선도 뺍니다. 회사소개 하위에는 선이 없어서, 있으면 또 달라 보입니다.
	 */
	.slicknav_menu ul.dropdown-menu {
		padding: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	/* PC 카드 배열용 가운데 정렬 해제 */
	.slicknav_menu .mega-menu-box--category .mega-menu-item {
		text-align: left;
	}

	.slicknav_menu .mega-menu-item-content h2 {
		font-size: 16px;
		margin: 0;
	}

	.slicknav_menu .mega-menu-item-content h2 a {
		display: block;
		padding: 6px 20px 6px 30px;
		border-bottom: 0;
		color: var(--white-color);
		font-size: 16px;
		font-weight: 400;
	}

	/**
	 * 햄버거 버튼 색  [2026-08-29 운영자 요청 : 골드 → 남색]
	 * custom.css 의  .slicknav_btn { background: var(--accent-color) }  를 덮습니다.
	 * shop.css 가 마지막에 실리므로 여기서 덮으면 됩니다(header.php 163줄 참고).
	 * 페이지헤더 띠와 같은 --primary-color 라 상단이 한 색으로 맞습니다.
	 * 막대 세 줄은 흰색 그대로라 남색 위에서 대비가 더 좋아집니다.
	 */
	.slicknav_btn {
		background: var(--primary-color);
	}

	/**
	 * 펼쳐진 메뉴판 색  [2026-08-29 운영자 요청 : 골드 → 남색]
	 * ------------------------------------------------------------------------------
	 * custom.css 의  .slicknav_menu { background: var(--accent-color) }  를 덮습니다.
	 * 바로 위 햄버거 버튼과 같은 --primary-color 라 버튼과 메뉴판이 한 덩어리로 보입니다.
	 *
	 * 이 판 위에 뭐가 올라오는지
	 *   1차 메뉴 - 원래부터 흰 글자라 그대로 둡니다(custom.css 1123줄).
	 *   2차 메뉴 - 하위에 등록된 메뉴이미지가 없으면 nav.php 가 평범한 <ul> 로 그리고,
	 *              그 <ul> 은 배경이 없어서 이 남색 판 위에 그대로 얹힙니다.
	 *              (회사소개 > 기업소개·창립자·경영철학 이 그 경우입니다)
	 *   이미지형 메가메뉴(제품소개)는 부트스트랩 .dropdown-menu 라 원래 흰 배경이지만,
	 *   위 ① 에서 그 배경을 걷어내 다른 메뉴와 같은 남색 판으로 맞췄습니다.
	 *   덕분에 1차·2차·3차 글자색 규칙을 한 벌로 쓸 수 있습니다.
	 */
	.slicknav_menu {
		background: var(--primary-color);
	}

	/**
	 * 대메뉴 사이 구분선  [2026-08-29 운영자 요청]
	 * 남색 판 위라 어두운 선은 보이지 않습니다. 흰색을 15% 만 섞어 옅게 긋습니다.
	 * li + li 라 첫 줄 위에는 긋지 않습니다. 맨 아래 선은 custom.css 의
	 * ul.slicknav_nav { border-bottom } 이 이미 그어줍니다.
	 * 더 진하게 하려면 0.15 만 올리세요(0.25 쯤이면 또렷해집니다).
	 */
	.slicknav_menu > ul.slicknav_nav > li + li {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
	}

	/**
	 * 펼쳤을 때 화살표가 사라지는 문제  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * custom.css 1161줄이 펼친 상태의 화살표를 --primary-color(남색)로 칠합니다.
	 * 배경이 골드였을 때는 잘 보였지만, 배경도 남색이 되면서 그대로 묻혔습니다.
	 * 접힌 상태(흰색)만 보이고 펼치면 없어진 것처럼 보인 이유입니다.
	 *
	 * 골드로 칠하고, 회전도 -180도(∧) 대신 -90도로 바꿔 > 모양이 되게 했습니다.
	 * ∧ 로 되돌리려면 -90deg 를 -180deg 로만 고치면 됩니다.
	 */
	.slicknav_menu .slicknav_open > a .slicknav_arrow:after,
	.slicknav_menu .slicknav_open > .slicknav_row .slicknav_arrow:after {
		transform: translateY(-50%) rotate(-90deg);
		color: var(--accent-color);
	}

	/**
	 * 남색 판 위 글자를 누르거나 마우스를 올렸을 때
	 * custom.css 는 이걸 --primary-color(남색)로 잡아뒀습니다. 배경이 골드일 때는
	 * 맞았지만 이제 배경도 남색이라 글자가 배경에 묻혀 사라집니다. 골드로 바꿉니다.
	 * 1차·2차·3차가 모두 같은 남색 판 위라 한 규칙으로 함께 겁니다.
	 * (예전에는 이미지형 메가메뉴만 흰 판이라 예외를 뒀는데, 위에서 그 흰 판을
	 *  없앴으므로 예외도 같이 지웠습니다)
	 * (.slicknav_row 는 하위메뉴가 있는 항목을, a 는 없는 항목을 가리킵니다)
	 */
	.slicknav_menu ul.slicknav_nav a:hover,
	.slicknav_menu ul.slicknav_nav a:focus,
	.slicknav_menu ul.slicknav_nav .slicknav_row:hover {
		color: var(--accent-color);
	}

	/* ── ② 헤더 아래 카테고리 가로 스크롤 줄 ─────────────────────────────── */
	/*
	 * [2026-08-29] 이 줄 자체는 nav.php 의 $show_cat_strip = FALSE 로 꺼져 있어
	 * 지금은 화면에 나오지 않습니다. 되살릴 때를 위해 규칙은 남겨둡니다.
	 */
	.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;
	}

	/*
	 * 3차 항목 - 2차(왼쪽 30px)보다 한 단 더 들여씁니다.  [2026-08-29 남색 판에 맞춤]
	 * 판이 남색이 되었으므로 글자도 흰색입니다. 예전에는 흰 판이라 회색이었습니다.
	 * 살짝 옅게(0.8) 둬서 2차보다 한 단계 아래라는 게 색으로도 읽히게 했습니다.
	 */
	.slicknav_menu .mega-menu-sub li a {
		display: block;
		padding: 6px 20px 6px 44px;
		font-size: 15px;
		border-bottom: 0;
		opacity: 0.8;
		color: var(--white-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/dreamup/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.webp(사옥), founder 는 founder01.webp(성조기),
 *  korea 는 korea01.webp(강남 거리)를 깝니다.
 *  그 위에 어두운 그라데이션을 덮어 흰 글씨가 어떤 화면에서도 읽히게 합니다.
 *  .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.webp');
}

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

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

/* 인물 페이지(창립자·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/dreamup/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)                                    [2026-09-01 전면 교체]
 * ----------------------------------------------------------------------------------------
 * 운영자가 준 「보상플랜 뉴.pptx」(2025.ver, 3장)를 화면으로 옮긴 규칙입니다.
 * 시안 3장 = 아래 세 덩어리
 *   .edu-plan-cover  표지 (왼쪽 글 + 오른쪽 세로 패널 side.png)
 *   .edu-plan-vip    VIP 보너스 플랜 5줄 + 남색 띠
 *   .edu-plan-level  직급별 보상 기준 16단계 표
 *
 * 색은 시안의 무지개색(파랑/초록/주황/빨강/보라)을 쓰지 않고 사이트 톤으로 맞췄습니다.
 * 딥네이비(--primary-color) + 골드(--accent-color) 두 색만 쓰고, 구분은 배경 명암과
 * 줄무늬로 합니다. 다른 브랜드 페이지(회사소개·사업기회·소셜셀링)와 같은 방식입니다.
 * 유일한 예외가 직급표 왼쪽의 보석 조각(.edu-rank-gem)인데, 이건 직급 이름 자체가
 * 보석 이름이라 색이 의미를 갖는 자리라서 남겨뒀습니다(15px 로 작게).
 *
 * 예전 규칙(.edu-bonus-*, .edu-plan-qualify, .edu-plan-slide)은 쓰는 곳이 없어져
 * 지웠습니다. 필요하면 assets/css/shop.css.bak-20260901-plan 에 그대로 있습니다.
 * ======================================================================================== */
.edu-plan {
	padding: 60px 0 120px;
}

/* ----------------------------------------------------------------------------------------
 * 1장 · 표지
 * -------------------------------------------------------------------------------------- */
.edu-plan-cover {
	padding-bottom: 20px;
}

.edu-plan-cover-text {
	padding-right: 20px;
}

.edu-plan-cover-text h2 {
	font-size: 52px;
	font-weight: 600;
	line-height: 1.22em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

/* 시안의 'compensation plan' - 원본은 빨간 이탤릭이지만 사이트 톤에 맞춰 골드로 씁니다 */
.edu-plan-cover-en {
	display: block;
	margin-top: 14px;
	font-size: 18px;
	font-style: italic;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent-text);
}

/* 23절 공용 골드 밑줄. 이 자리에서만 위아래 여백을 조금 줄입니다 */
.edu-plan-cover-text .dug-rule {
	margin: 24px 0 26px;
}

.edu-plan-cover-lead {
	max-width: 520px;
	font-size: 17px;
	line-height: 1.85em;
	color: var(--text-color);
	margin: 0;
	word-break: keep-all;
}

/**
 * 시안 왼쪽 아래의 주소 + 판버전
 * [2026-09-01] 화면에서는 뺐습니다(운영자 요청). 마크업만 지웠고 규칙은 남겨둡니다 -
 * 다시 넣을 때 그대로 쓸 수 있게. education/plan.php 의 표지 주석을 보세요.
 */
.edu-plan-cover-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
}

.edu-plan-cover-site {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
	font-weight: 600;
	font-style: italic;
	color: var(--primary-color);
}

.edu-plan-cover-site i {
	font-size: 18px;
	font-style: normal;
	color: var(--accent-color);
}

.edu-plan-cover-ver {
	display: inline-block;
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
}

/**
 * 오른쪽 세로 패널
 * side.png(427x651)는 네이비 바탕과 골드 곡선이 그림 안에 다 들어 있어 배경색이
 * 필요 없습니다. 오른쪽 끝 1px 만 흰 줄이 남아 있어서 상자로 감싸고 잘라냅니다.
 */
.edu-plan-cover-panel {
	/**
	 * 원본은 427x651 입니다. 그대로 두면 세로가 651px 이라 왼쪽 글보다 훨씬 길어서
	 * 표지 아래에 빈 자리가 크게 남습니다  [2026-09-01 운영자 요청]
	 * 폭을 300px 로 줄이면 세로가 약 457px 이 되어 200px 가까이 짧아집니다.
	 * 더 줄이려면 이 값만 내리면 됩니다(세로는 폭 x 1.525 로 따라옵니다).
	 */
	max-width: 300px;
	margin-left: auto;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 22px 50px rgba(4, 24, 63, 0.20);
}

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

/* ----------------------------------------------------------------------------------------
 * 2장 · VIP 보너스 플랜
 * ----------------------------------------------------------------------------------------
 * 시안은 5줄짜리 표지만 여기서는 <table> 이 아니라 그리드 목록입니다.
 * 휴대폰에서 아이콘/이름/설명이 세로로 접혀야 하는데 표는 그게 자연스럽지 않습니다.
 * -------------------------------------------------------------------------------------- */
.edu-plan-vip {
	padding-top: 80px;
}

.edu-vip-list {
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	overflow: hidden;
	background: var(--white-color);
}

/* 아이콘 | 이름 | 설명 */
.edu-vip-row {
	display: grid;
	grid-template-columns: 92px 210px 1fr;
	align-items: center;
	gap: 0 26px;
	padding: 26px 34px;
	border-bottom: 1px solid var(--divider-color);
}

/* 한 줄 걸러 옅은 바탕 - 시안의 줄무늬를 한 가지 색으로만 표현한 것입니다 */
.edu-vip-row:nth-child(even) {
	background: var(--secondary-color);
}

.edu-vip-row:last-child {
	border-bottom: 0;
}

.edu-vip-icon img {
	display: block;
	width: 72px;
	height: auto;
}

/* 이름칸 오른쪽의 세로 구분선 (시안과 같은 자리) */
.edu-vip-name {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding-right: 26px;
	border-right: 1px solid var(--divider-color);
}

.edu-vip-name h3 {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.35em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

.edu-vip-lines {
	font-size: 17px;
	line-height: 1.75em;
	color: var(--primary-color);
	margin: 0;
	word-break: keep-all;
}

/* '일반팩 PV 15%   파워팩 PV 20%' 처럼 좌우로 벌려 쓰는 줄 */
.edu-vip-pairs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 54px;
}

.edu-vip-pair {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
}

.edu-vip-pair-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--primary-color);
}

.edu-vip-pair-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--accent-text);
}

/* 체크 목록 - 폰트아이콘 대신 글자 ✓ 를 씁니다 (아이콘 폰트 이름에 안 기대려고) */
.edu-vip-checks {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.edu-vip-checks li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.75em;
	color: var(--text-color);
	word-break: keep-all;
}

.edu-vip-checks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-color);
}

/* 시안 맨 아래 남색 띠 */
.edu-vip-foot {
	margin-top: 26px;
	padding: 22px 30px;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5em;
	text-align: center;
	color: var(--white-color);
	background: var(--primary-color);
	border-radius: 100px;
	word-break: keep-all;
}

.edu-vip-foot strong {
	font-weight: 700;
	color: var(--accent-color);
}

/* ----------------------------------------------------------------------------------------
 * 3장 · 직급별 보상 기준
 * -------------------------------------------------------------------------------------- */
.edu-plan-level {
	padding-top: 90px;
}

/* 좁은 화면에서 표가 페이지를 밀지 않도록 이 상자 안에서만 가로로 밀립니다 */
.edu-plan-table-wrap {
	width: 100%;
	overflow-x: auto;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 20px;
}

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

.edu-plan-table th,
.edu-plan-table td {
	text-align: center;
	vertical-align: middle;
	padding: 15px 16px;
	white-space: nowrap;
}

/* 머리줄 - 시안처럼 남색 바탕에 흰 글자, 아이콘만 골드 */
.edu-plan-table thead th {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4em;
	color: var(--white-color);
	background: var(--primary-color);
}

.edu-plan-table thead th i {
	margin-right: 9px;
	color: var(--accent-color);
}

.edu-plan-table thead th.is-rank {
	text-align: left;
	padding-left: 26px;
}

.edu-plan-table tbody td {
	font-size: 15px;
	line-height: 1.5em;
	color: var(--text-color);
	border-bottom: 1px solid var(--divider-color);
}

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

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

.edu-plan-table tbody tr:hover td {
	background: #E8EFFA;
}

.edu-plan-table td.is-rank {
	text-align: left;
	padding-left: 26px;
	font-weight: 600;
	color: var(--primary-color);
}

/* 달성인원 - 시안에서 파란 굵은 숫자였던 칸 */
.edu-plan-table td.is-count {
	font-weight: 700;
	color: var(--primary-color);
}

.edu-plan-table td.is-month {
	font-weight: 600;
	color: var(--accent-text);
}

/**
 * 직급 앞의 보석 조각
 * 시안은 보석 그림 16개였는데, 파일을 새로 만들지 않으려고 CSS 육각형으로 그렸습니다.
 * 색은 직급 이름(실버·골드·에메랄드…)을 따라갑니다. 흰 바탕에서 묻히지 않게
 * 밝은 보석(실버·펄)은 시안보다 한 단계 어둡게 잡았습니다.
 */
.edu-rank-gem {
	display: inline-block;
	width: 15px;
	height: 17px;
	margin-right: 12px;
	vertical-align: -3px;
	background-color: var(--primary-color);
	background-image: linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.edu-rank-name {
	vertical-align: middle;
}

.edu-rank-gem.is-lv1  { background-color: #AEB8C4; }	/* 실버 */
.edu-rank-gem.is-lv2  { background-color: #D2A03C; }	/* 골드 */
.edu-rank-gem.is-lv3  { background-color: #A9BDD0; }	/* 플래티넘 */
.edu-rank-gem.is-lv4  { background-color: #8E86A8; }	/* 티타늄 */
.edu-rank-gem.is-lv5  { background-color: #3E9E77; }	/* 제이드 */
.edu-rank-gem.is-lv6  { background-color: #C9C3B4; }	/* 펄 */
.edu-rank-gem.is-lv7  { background-color: #2C8C5A; }	/* 에메랄드 */
.edu-rank-gem.is-lv8  { background-color: #B8404A; }	/* 루비 */
.edu-rank-gem.is-lv9  { background-color: #2F63A8; }	/* 사파이어 */
.edu-rank-gem.is-lv10 { background-color: #6FB5D8; }	/* 다이아몬드 */
.edu-rank-gem.is-lv11 { background-color: #4E9CCB; }	/* 더블 다이아몬드 */
.edu-rank-gem.is-lv12 { background-color: #6E86C4; }	/* 트리플 다이아몬드 */
.edu-rank-gem.is-lv13 { background-color: #C9962F; }	/* 크라운 */
.edu-rank-gem.is-lv14 { background-color: #BC8529; }	/* 로얄크라운 */
.edu-rank-gem.is-lv15 { background-color: #A8701F; }	/* 월드 로얄 크라운 */
.edu-rank-gem.is-lv16 { background-color: #8A5A16; }	/* 월드 슈퍼 로얄 크라운 */

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

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

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

/* ----------------------------------------------------------------------------------------
 * 반응형
 * -------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	.edu-plan-cover-text h2 {
		font-size: 44px;
	}

	.edu-plan-cover-panel {
		max-width: 260px;
	}

	.edu-vip-row {
		grid-template-columns: 80px 180px 1fr;
		gap: 0 20px;
		padding: 24px 26px;
	}

	.edu-vip-icon img {
		width: 64px;
	}

	.edu-vip-name h3 {
		font-size: 19px;
	}
}

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

	.edu-plan-vip {
		padding-top: 60px;
	}

	.edu-plan-level {
		padding-top: 60px;
	}

	.edu-plan-cover-text {
		padding-right: 0;
		text-align: center;
	}

	.edu-plan-cover-lead {
		margin-left: auto;
		margin-right: auto;
	}

	.edu-plan-cover-text .dug-rule {
		margin-left: auto;
		margin-right: auto;
	}

	.edu-plan-cover-meta {
		justify-content: center;
	}

	/* 세로 패널은 글 아래로 내려가므로 폭을 줄이고 가운데로 둡니다 */
	.edu-plan-cover-panel {
		max-width: 260px;
		margin: 40px auto 0;
	}

	/**
	 * 아이콘 + 이름이 한 줄, 설명은 그 아래 줄로 접힙니다.
	 * 이름칸의 세로 구분선은 아래가 비어 보여서 뺍니다.
	 */
	.edu-vip-row {
		grid-template-columns: 64px 1fr;
		gap: 0 18px;
		padding: 22px 24px;
	}

	.edu-vip-icon img {
		width: 56px;
	}

	.edu-vip-name {
		padding-right: 0;
		border-right: 0;
	}

	.edu-vip-body {
		grid-column: 1 / -1;
		margin-top: 14px;
	}
}

@media only screen and (max-width: 767px) {
	.edu-plan-cover-text h2 {
		font-size: 34px;
	}

	.edu-plan-cover-en {
		font-size: 16px;
	}

	.edu-plan-cover-lead {
		font-size: 15px;
	}

	.edu-plan-cover-panel {
		max-width: 210px;
		margin-top: 32px;
	}

	.edu-vip-list {
		border-radius: 16px;
	}

	.edu-vip-row {
		padding: 20px 18px;
	}

	.edu-vip-name h3 {
		font-size: 17px;
	}

	.edu-vip-lines {
		font-size: 15px;
	}

	.edu-vip-pairs {
		gap: 8px 28px;
	}

	.edu-vip-pair-label {
		font-size: 15px;
	}

	.edu-vip-pair-value {
		font-size: 16px;
	}

	.edu-vip-checks li {
		font-size: 14px;
	}

	/* 알약 모양이 세로로 길어지면 어색해서 사각형으로 바꿉니다 */
	.edu-vip-foot {
		font-size: 16px;
		padding: 18px 20px;
		border-radius: 16px;
	}

	.edu-plan-table-wrap {
		border-radius: 16px;
	}

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

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

	/* 좁은 화면에서는 머리줄 아이콘을 빼서 글자 자리를 벌어줍니다 */
	.edu-plan-table thead th i {
		display: none;
	}

	.edu-plan-table thead th.is-rank,
	.edu-plan-table td.is-rank {
		padding-left: 16px;
	}

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

	.edu-rank-gem {
		margin-right: 8px;
	}

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


/* ========================================================================================
 * 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);
}

/* -----------------------------------------------------------------------------
 * 글만 있는 게시판 카드					[2026-09-09 신설]
 * 평균후원수당공지처럼 본문이 표뿐이라 그림이 없는 게시판입니다.
 * 썸네일 칸을 안 그리므로(board/shop_lists.php 의 $bl_text_only) 카드가
 * 허전해지지 않게 왼쪽에 골드 띠를 두고 요약을 네 줄까지 보여줍니다.
 * -------------------------------------------------------------------------- */
.board-card--text {
	border-left: 3px solid var(--accent-color, #B9822C);
}

.board-card--text .board-card-body {
	padding: 26px 26px 28px;
}

.board-card--text .board-card-desc {
	-webkit-line-clamp: 4;
}

.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 는 이 스킨에서 밝은 크림색(#F2F6FC)이라
   글자는 반드시 진한 색(--primary-color)을 써야 읽힙니다. */
.board-card-thumb-empty {
	background-color: var(--secondary-color, #F2F6FC);
}

.board-card-noimg {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color, #04183F);
	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, #04183F);
	/* 제목은 두 줄까지만 */
	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, #04183F);
	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, #04183F);
}

.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, #04183F);
}

.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, #04183F);
}

.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, #04183F19);
	border-radius: 10px;
	background-color: var(--secondary-color, #F2F6FC);
}

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

.xen-bom__count {
	padding: 2px 9px;
	font-size: 12px;
	color: var(--white-color, #fff);
	border-radius: 20px;
	/* 골드 → 곤색  [2026-08-30 운영자 요청] 개수 배지는 강조가 아니라 정보라서 */
	background-color: var(--primary-color, #04183F);
}

.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, #04183F19);
}

/* 구성품 썸네일 */
.xen-bom__thumb {
	flex: 0 0 auto;
	position: relative;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border: 1px solid var(--divider-color, #04183F19);
	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, #04183F);
	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, #04183F);
	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, #B9822C);
	vertical-align: middle;
}

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

@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, #B9822C);
	background-color: var(--accent-color, #B9822C);
}

#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, #04183F);
	background-color: var(--primary-color, #04183F);
}

/**
 * 결제수단 선택 - 평소엔 곤색, 고른 것만 골드		[2026-08-30 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 예전에는 '골드 하나로 두고 안 고른 것만 opacity 0.55 로 옅게' 였는데,
 * 세 개가 다 비슷한 금색이라 무엇을 골랐는지 구분이 어려웠습니다.
 * 이제 **색 자체를 바꿔** 구분합니다. 곤색 ↔ 골드는 멀리서도 갈립니다.
 *
 * ⚠ :not() 을 다섯 개씩 붙인 이유
 *   이 버튼들은 class="ps-btn ps-btn--sm pay-btn" 이라 아래 15절
 *   "주 액션 버튼"(.ps-btn + :not() 5개 = 0,6,0)에도 함께 걸립니다.
 *   예전 규칙은 (0,3,0) 이라 늘 져서, **색은 15절이 시키는 골드로 나오고
 *   opacity 만 살아남아** 있었습니다. 그래서 화면이 '진한 금색 / 옅은 금색' 이었죠.
 *   (같은 사고가 오늘 상품상세 '바로구매'에서도 났습니다)
 *   같은 :not() 사슬을 붙여 (0,8,0) 으로 올려 확실히 이기게 했습니다.
 * -------------------------------------------------------------------------------------- */

/* 안 고른 것 : 곤색 */
.pay-methods .pay-btn:not(.is-selected):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black),
.pay-methods button.pay-btn:not(.is-selected):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black) {
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #04183F);
	background-color: var(--primary-color, #04183F);
	opacity: 1;
}

/**
 * 안 고른 것에 마우스를 올리면 골드로 미리 보여줍니다.
 * 누르면 그 색 그대로 굳습니다(선택 = 골드). 손이 얹힌 곳과 고른 곳이 같은 색이라
 * "여기를 누르면 이렇게 된다"가 바로 읽힙니다.
 */
.pay-methods .pay-btn:not(.is-selected):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black):hover,
.pay-methods button.pay-btn:not(.is-selected):not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black):hover {
	border-color: var(--accent-color, #B9822C);
	background-color: var(--accent-color, #B9822C);
	opacity: 1;
}

/* 고른 것 : 골드 */
.pay-methods .pay-btn.is-selected:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black),
.pay-methods button.pay-btn.is-selected:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black) {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #B9822C);
	background-color: var(--accent-color, #B9822C);
	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 을 같이 적어 우선순위를 맞춥니다.
 * ======================================================================================== */

/**
 * 주 액션 버튼
 *
 * :not(.ps-btn--black) 이 왜 필요한가   [2026-08-30 버그 수정]
 *   원래 이 선택자에는 --black 이 빠져 있었습니다. :not() 은 괄호 안 선택자만큼
 *   우선순위를 올리므로, 여기는 클래스 5개(0,5,0)짜리가 됩니다. 그런데 바로 아래
 *   "검정 버튼은 곤색으로" 규칙은 `.ps-btn.ps-btn--black`(0,2,0) 뿐이라 늘 졌습니다.
 *   그래서 **상품 상세의 장바구니 버튼이 바로구매와 똑같은 골드로** 나왔습니다.
 *   여기서 한 번 빼주면 아래 규칙이 제 역할을 하고, 두 버튼이 곤색/골드로 갈립니다.
 */
.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black),
button.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black) {
	color: var(--white-color, #fff);
	background-color: var(--accent-color, #B9822C);
}

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

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

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

/* 보조 액션 버튼 (주소검색 · 되돌리기 등) */
.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, #04183F);
}

.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, #B9822C);
}

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

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

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

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


/* ========================================================================================
 * 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, #04183F19) !important;
	vertical-align: middle;
}

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

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

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

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

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

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

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

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

/* 페이지 번호 - 가운데 정렬 */
.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, #04183F);
	text-align: center;
	border: 1px solid var(--divider-color, #04183F19);
	border-radius: 8px;
}

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

@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, #04183F);
	border-radius: 6px;
	background-color: var(--primary-color, #04183F);
	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, #B9822C);
	background-color: var(--accent-color, #B9822C);
}

/* 주문취소는 되돌릴 수 없는 동작이라 테두리형으로 구분합니다 */
.xen-order-page .__btn-order-cancel {
	color: var(--primary-color, #04183F);
	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, #04183F);
}

.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, #04183F19);
}

.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, #04183F19);
	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, #04183F);
}

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

.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, #04183F);
}

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

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

.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, #04183F);
}

.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, #B9822C);
}

/* 상품별 주문상태 */
.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, #04183F);
}

.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, #B9822C);
}

@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, #04183F19);
	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, #04183F19);
	word-break: break-word;
}

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

.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, #04183F19);
	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, #04183F19) !important;
	vertical-align: middle;
}

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

/* 표를 감싸는 영역 - 모서리 둥글게 */
.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, #04183F) !important;
	border-radius: 6px !important;
}

.xen-order-page .__btn_shipping_address_change:hover {
	background: var(--accent-color, #B9822C) !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, #04183F19);
	border-radius: 10px;
	background-color: var(--secondary-color, #F2F6FC);
}

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

.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, #04183F);
}

.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, #B9822C);
	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, #04183F19);
}

.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, #04183F);
}

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

.xen-order-ship__inv {
	color: var(--accent-color, #B9822C);
	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; }
}

/* ============================================================
   베스트상품 섹션 (2026-08-14)
   ------------------------------------------------------------
   마크업 : theme/shop/dreamup/start.php 의 .best-products
     왼쪽 위   : .xen-best-visual — 메인 베스트상품배너(main_type_4) 이미지
     왼쪽 아래 : .xen-best-items  — 베스트상품(히트상품) 카드
     오른쪽    : .xen-best-info   — 배너 텍스트삽입(bn_meno) + 링크 버튼
   Nutriax 템플릿 2번째 섹션(왼쪽 이미지 / 오른쪽 설명+버튼) 배치를 따릅니다.
   ============================================================ */
/**
 * 섹션 배경 : assets/img/founder01-bg.webp
 *  - 원본 founder01.webp(1920px·4.7MB, 불투명도 30% 반투명 사진)을
 *    1600px webp(342KB)로 줄인 것입니다. 투명도까지 동일하므로 보이는 느낌은 같습니다.
 *    원본 png 는 백업으로 같은 폴더에 그대로 남겨뒀습니다.
 *  - 사진이 옅어 흰 카드·글자가 묻히지 않지만, 톤을 맞추려고
 *    ::before 로 베이지(--secondary-color) 반투명 막을 한 겹 덮습니다.
 *  - 사진을 더 진하게 보이려면 아래 rgba 의 마지막 값(0.6)을 낮추고,
 *    더 연하게 하려면 1 에 가깝게 올리시면 됩니다.
 */
.xen-best-bg{
	position: relative;
	background-image: url('../img/founder01-bg.webp');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.xen-best-bg::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(250, 245, 243, 0.6);
	pointer-events: none;
}

/* 배경막 위로 내용이 올라오게 합니다 */
.xen-best-bg > .container{
	position: relative;
	z-index: 1;
}

.xen-best-row{
	align-items: flex-start;
	row-gap: 40px;
}

/* 오른쪽 글은 세로 가운데가 아니라 배너 이미지와 윗줄을 맞춰 위로 붙입니다 */

/* --- 왼쪽 위 : 배너 이미지 ------------------------------------------------ */
.xen-best-visual{
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 25px;
}

/**
 * 배너 이미지 높이
 * 원본이 세로로 긴 사진이라 그대로 두면 화면을 다 덮어버려서,
 * 화면 폭에 따라 높이를 고정하고 가운데를 기준으로 잘라(cover) 보여줍니다.
 * 더 크게/작게 하려면 아래 height 값만 조절하시면 됩니다.
 */
.xen-best-visual .swiper-slide a{
	display: block;
	height: 100%;
}

.xen-best-visual .swiper-slide img{
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	object-position: center center;
	border-radius: 10px;
}

.xen-best-visual .swiper-pagination{
	bottom: 14px;
}

.xen-best-visual .swiper-pagination-bullet{
	background: #fff;
	opacity: .55;
}

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

/* 배너가 한 장뿐이면 점(pagination)을 숨깁니다 */
.xen-best-visual .swiper-pagination-bullet:only-child{
	display: none;
}

/* --- 왼쪽 아래 : 베스트상품 좌우 슬라이더 ---------------------------------
   전체 폭이 아니라 7/12 칸 안에 들어가므로 카드 여백을 줄여줍니다.
   화살표(.xen-best-prev/next)는 슬라이더 좌우, 점(pagination)은 아래에 둡니다. */
.xen-best-items{
	position: relative;
	padding-bottom: 40px;
}

/* 슬라이드끼리 카드 높이를 맞춥니다 */
.xen-best-items .swiper-slide{
	height: auto;
	display: flex;
}

.xen-best-items .swiper-slide > .product-item{
	width: 100%;
	height: auto;
}

.xen-best-items .product-item{
	padding: 25px;
}

/* 좌우 화살표 */
.xen-best-items .swiper-button-prev,
.xen-best-items .swiper-button-next{
	width: 40px;
	height: 40px;
	/* 점(pagination) 영역만큼 위로 올려 카드 세로 가운데에 오게 합니다 */
	margin-top: -40px;
	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);
}

.xen-best-items .swiper-button-prev{ left: 0; }
.xen-best-items .swiper-button-next{ right: 0; }

.xen-best-items .swiper-button-prev::after,
.xen-best-items .swiper-button-next::after{
	font-size: 16px;
	font-weight: 700;
}

/* 아래쪽 점 */
.xen-best-items .swiper-pagination{
	bottom: 0;
}

.xen-best-items .swiper-pagination-bullet-active{
	background: var(--accent-color);
}

.xen-best-items .product-item-header{
	margin-bottom: 15px;
}

/* 카드 안 상품 이미지 (숫자를 키우면 이미지가 커집니다) */
.xen-best-items .product-item-image{
	max-width: 150px;
}

.xen-best-items .product-item-content .product-item-title{
	font-size: 18px;
}

.xen-best-items .product-item-price h3{
	font-size: 20px;
}

/* --- 오른쪽 : 배너 글 + 링크 버튼 ----------------------------------------- */
.xen-best-info{
	width: 100%;
}

/* 섹션 배경이 베이지(--secondary-color)라서 글 상자는 흰색으로 띄웁니다 */
.xen-best-info-inner{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 40px;
}

.xen-best-info-title{
	font-size: 30px;
	font-weight: 600;
	line-height: 1.2em;
	color: var(--primary-color);
	margin-bottom: 20px;
}

/* 관리자 에디터(CKEditor)로 넣은 내용 : 본문 줄간격·이미지·영상 보정 */
.xen-best-info-text{
	font-size: 16px;
	line-height: 1.8em;
	color: var(--text-color);
}

.xen-best-info-text p{
	margin-bottom: 15px;
}

.xen-best-info-text p:last-child{
	margin-bottom: 0;
}

.xen-best-info-text h1,
.xen-best-info-text h2,
.xen-best-info-text h3,
.xen-best-info-text h4{
	color: var(--primary-color);
	line-height: 1.3em;
	margin-bottom: 15px;
}

.xen-best-info-text ul,
.xen-best-info-text ol{
	padding-left: 20px;
	margin-bottom: 15px;
}

.xen-best-info-text li{
	margin-bottom: 8px;
}

.xen-best-info-text img{
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.xen-best-info-text iframe,
.xen-best-info-text video{
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
}

.xen-best-info-btn{
	margin-top: 30px;
}

/* --- 노트북(992~1199px) : 왼쪽 칸이 좁아지므로 배너도 조금 낮춥니다 ------- */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.xen-best-visual .swiper-slide img{
		height: 320px;
	}
}

/* --- 태블릿 이하 : 왼쪽/오른쪽을 위아래로 쌓습니다 ------------------------ */
@media only screen and (max-width: 991px){
	.xen-best-visual .swiper-slide img{
		height: 340px;
	}

	.xen-best-info-inner{
		padding: 30px;
	}

	.xen-best-info-title{
		font-size: 24px;
	}
}

@media only screen and (max-width: 575px){
	.xen-best-visual .swiper-slide img{
		height: 240px;
	}

	.xen-best-items .product-item{
		padding: 18px;
	}

	.xen-best-items .product-item-image{
		max-width: 120px;
	}

	.xen-best-info-inner{
		padding: 22px;
	}
}

/* ========================================================================================
 * 22. 언어(국가) 선택 드롭다운  - layout/nav.php 헤더 액션 영역
 * ----------------------------------------------------------------------------------------
 * 목업 헤더 오른쪽의 "🌐 한국어 ▾" 를 재현한 것입니다.
 * 쇼핑몰에는 언어 선택기가 없어서 (마케팅 오피스 푸터에만 있었습니다) 새로 넣었습니다.
 * ======================================================================================== */

.xen-lang-select {
	position: relative;
}

/* 헤더의 다른 아이콘 버튼과 같은 높이/여백을 맞춥니다 */
.xen-lang-select .xen-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--divider-color);
	border-radius: 22px;
	background: transparent;
	color: var(--primary-color);
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	transition: all 0.3s ease;
}

.xen-lang-select .xen-lang-btn:hover,
.xen-lang-select.is-open .xen-lang-btn {
	border-color: var(--accent-color);
	color: var(--accent-text);
}

.xen-lang-select .xen-lang-caret {
	font-size: 10px;
	transition: transform 0.3s ease;
}

.xen-lang-select.is-open .xen-lang-caret {
	transform: rotate(180deg);
}

/* 드롭다운 목록 : 기본은 닫힘(투명 + 아래로 살짝 내려가 있음) */
.xen-lang-select .xen-lang-menu {
	/**
	 * display:block 을 반드시 지정해야 합니다.
	 * custom.css 의 `.header-action-details ul { display:flex; flex-wrap:wrap; gap:20px }`
	 * 가 후손 ul 을 전부 잡아서, 그냥 두면 이 드롭다운이 가로로 흐르며
	 * 2열(한국어·中文 / 日本語·English)로 벌어집니다.
	 * gap 도 함께 0 으로 돌려놔야 항목 사이가 벌어지지 않습니다.
	 */
	display: block;
	gap: 0;
	flex-wrap: nowrap;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 999;
	min-width: 190px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(4, 24, 63, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all 0.3s ease;
}

.xen-lang-select.is-open .xen-lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.xen-lang-select .xen-lang-menu li {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

.xen-lang-select .xen-lang-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--text-color);
	font-size: 14px;
	transition: all 0.3s ease;
}

.xen-lang-select .xen-lang-menu a:hover {
	background: var(--secondary-color);
	color: var(--primary-color);
}

/* 현재 선택된 언어는 굵게 + 골드로 구분합니다 */
.xen-lang-select .xen-lang-menu a.is-current {
	color: var(--accent-text);
	font-weight: 600;
}

/**
 * 국기 그림 (버튼 + 목록)  [2026-08-30]
 * ----------------------------------------------------------------------------
 * 두 곳 모두 같은 크기로 그립니다. 버튼 쪽은 .xen-lang-flag,
 * 목록 쪽은 a 안의 img 입니다. (layout/nav.php 의 xen_lang_flag() 가 경로를 찾습니다)
 *
 * 22x15 인 이유
 *   assets/img/flags/ 원본이 40x27(가로세로비 1.48)이라 22x15(1.47)로 줄이면
 *   잘리는 곳 없이 거의 그대로 들어갑니다.
 *   assets/img/lang/ 의 30x30 동그란 배지가 걸릴 때만 위아래가 조금 잘립니다.
 *
 * 테두리를 준 이유
 *   일본·중국 등 흰색이 많은 국기는 흰 배경 위에서 경계가 사라져
 *   국기가 아니라 얼룩처럼 보입니다. 아주 옅은 선 하나로 형태를 잡아줍니다.
 */
.xen-lang-select .xen-lang-flag,
.xen-lang-select .xen-lang-menu img {
	flex: 0 0 auto;
	width: 22px;
	height: 15px;
	object-fit: cover;
	border-radius: 2px;
	border: 1px solid rgba(4, 24, 63, 0.12);
}

/* 태블릿 이하에서는 언어 이름을 숨기고 국기만 남깁니다 (헤더가 좁아지므로) */
@media only screen and (max-width: 1199px) {
	.xen-lang-select .xen-lang-now {
		display: none;
	}
	.xen-lang-select .xen-lang-btn {
		padding: 6px 8px;
	}
}

/* ========================================================================================
 * 23. Dream Up Global 브랜드 페이지 - 공통 부품
 * ----------------------------------------------------------------------------------------
 * /company/about · /company/founder · /products/quality · /business/opportunity
 * /business/social · /success/growth · /global/vision 이 함께 쓰는 조각들입니다.
 *
 * 클래스 앞머리를 dug- 로 통일한 이유는, 기존 Xendurance 스킨의 클래스(xen-, ceo-)와
 * 섞이지 않게 해서 나중에 어느 쪽을 고쳐도 서로 영향이 없게 하려는 것입니다.
 *
 * 스크롤 등장 연출은 CSS 가 아니라 WOW.js(animate.css) 가 담당합니다.
 * 마크업의 class="wow fadeInUp" + data-wow-delay 를 보세요.
 * ======================================================================================== */

/* 섹션 위의 작은 영문 라벨 (ABOUT / OUR PURPOSE / SHARED GROWTH …) */
.dug-eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--accent-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.dug-eyebrow.is-gold,
.dark-section .dug-eyebrow {
	color: var(--accent-color);
}

/* 제목 아래 짧은 골드 밑줄 */
.dug-rule {
	display: block;
	width: 56px;
	height: 3px;
	margin: 22px 0;
	background: var(--accent-color);
	border-radius: 2px;
}

.dug-rule.is-center {
	margin-left: auto;
	margin-right: auto;
}

/* ----------------------------------------------------------------------------------------
 * 프로세스 흐름 (제품 경험 → 제품 소개 → … / 링크 생성 → 링크 공유 → …)
 * ----------------------------------------------------------------------------------------
 * 목업에서는 통이미지였지만 HTML 로 다시 만들었습니다.
 * 이유는 두 가지입니다 - 영문 번역이 되어야 하고, 모바일에서 세로로 떨어져야 합니다.
 * PC 는 가로 한 줄, 태블릿 이하는 2열, 모바일은 1열로 접힙니다.
 * -------------------------------------------------------------------------------------- */
.dug-system-flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

.dug-system-step {
	position: relative;
	flex: 1 1 0;
	min-width: 150px;
	max-width: 220px;
	padding: 0 6px;
	text-align: center;
}

/* 단계 사이 화살표 */
.dug-system-arrow {
	flex: 0 0 auto;
	margin-top: 34px;
	color: var(--primary-color);
	font-size: 20px;
	opacity: 0.55;
}

.dark-section .dug-system-arrow {
	color: var(--white-color);
}

/* 원형 아이콘 배지 - 목업의 래스터 아이콘을 폰트 아이콘으로 재현한 것입니다 */
.dug-system-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 18px;
	border-radius: 50%;
	color: var(--white-color);
	font-size: 32px;
	transition: all 0.4s ease;
}

.dug-system-icon.is-navy    { background: var(--primary-color); }
.dug-system-icon.is-gold    { background: var(--accent-color); }

/**
 * 이미지형 아이콘  [2026-08-28]
 * step-1~5 png 는 동그란 배경색까지 이미지에 들어 있어 CSS 배경이 필요 없습니다.
 * 소셜셀링·성공공유 페이지는 아직 폰트 아이콘(is-navy/is-gold)을 쓰므로,
 * 기존 규칙은 그대로 두고 변형 클래스만 새로 만들었습니다.
 */
.dug-system-icon.is-img {
	display: block;
	background: none;
}

.dug-system-icon.is-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 화살표 이미지형 */
.dug-system-arrow.is-img {
	display: flex;
	align-items: center;
	width: 26px;
	opacity: 1;
}

.dug-system-arrow.is-img img {
	width: 100%;
	height: auto;
}

/* 테두리형 (소셜셀링 4단계에서 사용) */
.dug-system-icon.is-outline {
	background: transparent;
	border: 2px solid var(--accent-color);
	color: var(--accent-text);
}

.dug-system-step:hover .dug-system-icon {
	transform: translateY(-6px);
}

/* ----------------------------------------------------------------------------------------
 * 아이콘 강조 테두리  [2026-08-29 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 다섯 칸 모두 자기 아이콘 색으로 테두리를 두릅니다. 움직이지 않습니다.
 *
 * 원래는 1번부터 5번까지 차례로 커지며 깜빡이는 애니메이션이었는데,
 * 화면을 캡처할 때마다 그 순간 차례인 칸 하나만 크고 진해 보여서
 * "왜 하나만 다르냐" 가 반복됐습니다. 다섯이 늘 똑같아 보이는 쪽을 택했습니다.
 * (되살리려면 shop.css.bak4 의 같은 자리를 보세요. 그쪽에 keyframes 가 들어 있습니다)
 *
 * 색
 *   --dug-ring 은 opportunity.php 가 그 칸 아이콘의 색을 'R, G, B' 로 넘긴 값입니다
 *   (rgba 로 투명도를 섞어야 해서 hex 가 아닙니다). 값이 없으면 골드로 떨어집니다.
 *   0.3 은 테두리가 아이콘을 눌러 보이지 않을 만큼의 농도입니다.
 *
 * 아이콘과의 간격 3px 을 어떻게 맞췄나
 *   step-*.png 는 네모 캔버스에 동그라미가 그려진 그림이고 그 동그라미가 캔버스의 96%
 *   입니다(다섯 장 모두 같은 비율이라 84px 칸에서 실제 지름은 80.6px 로 동일합니다).
 *   그래서 칸 가장자리까지 2% 가 비어 있고, 거기서 3px 을 더 밀어내면 정확히 3px 간격.
 *   px 이 아니라 calc(2% - 3px) 로 쓴 덕분에, 휴대폰에서 아이콘이 70px 로 줄어도
 *   간격은 그대로 3px 입니다.
 *
 * 이 절은 .is-ring 이 붙은 흐름에만 적용됩니다. 소셜셀링(social.php)처럼
 * 클래스를 안 붙인 페이지는 예전 그대로 테두리가 없습니다.
 * -------------------------------------------------------------------------------------- */
.dug-system-flow.is-ring .dug-system-icon {
	position: relative;   /* 테두리(::after)를 얹을 자리 */
}

.dug-system-flow.is-ring .dug-system-icon::after {
	content: '';
	position: absolute;
	inset: calc(2% - 3px);
	border-radius: 50%;
	border: 2px solid rgba(var(--dug-ring, 187, 132, 46), 0.3);
	pointer-events: none;
}

/**
 * 그림자도 다섯 칸 모두 똑같이, 은은하게 고정입니다.
 * box-shadow 가 아니라 filter: drop-shadow 인 이유는 step-*.png 가 네모 캔버스 안의
 * 동그라미라(모서리 투명) box-shadow 를 쓰면 네모난 그림자가 생기기 때문입니다.
 * drop-shadow 는 그림의 투명도를 따라가서 동그란 그림자가 됩니다.
 */
.dug-system-flow.is-ring .dug-system-icon.is-img img {
	filter: drop-shadow(0 3px 6px rgba(4, 24, 63, 0.14));
}

.dug-system-step h4 {
	margin-bottom: 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--primary-color);
}

.dug-system-step p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6em;
	color: var(--text-color);
}

.dark-section .dug-system-step h4 { color: var(--white-color); }
.dark-section .dug-system-step p  { color: rgba(255, 255, 255, 0.78); }

/* 다크 섹션 안이라도 카드만 밝게 두고 싶을 때 (성공공유 선순환) */
.dug-system-flow.is-onlight .dug-system-step h4 { color: var(--white-color); }
.dug-system-flow.is-onlight .dug-system-step p  { color: rgba(255, 255, 255, 0.78); }

/* 01 · 02 … 단계 번호 */
/**
 * 단계 번호 배지 (01 02 03 04)  [2026-08-29 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 예전에는 CSS 로 남색 동그라미를 그리고 그 안에 숫자를 넣었습니다.
 * 이제 badge-01~04.png(45x45) 에 동그라미와 흰 숫자가 함께 들어 있어서,
 * 배경·글자색·모양을 CSS 로 줄 필요가 없습니다. 자리만 잡아줍니다.
 *
 * "동그라미 아이콘의 위쪽 살짝 왼쪽에 걸친 모습" 을 만드는 방법
 *   .dug-step-badge-wrap 이 원형 아이콘(84px)만 감싸는 상자입니다.
 *   inline-block 이라 폭이 아이콘 폭에 딱 맞고, 가운데 정렬된 그 상자를
 *   기준으로 배지를 왼쪽 위 바깥으로 빼냅니다.
 *     left: -11px   왼쪽으로
 *     top:  -13px   위로
 *   [2026-08-29 운영자 요청] -6/-8 → -14/-16 으로 뺐다가, 너무 살짝만 걸쳐
 *   보인다고 해서 사선으로 3px 되돌린 값입니다(-11/-13).
 *   두 값을 비슷하게 움직여야 45도 대각선으로 나갑니다. 한쪽만 키우면
 *   배지가 옆으로만, 또는 위로만 밀려 사선이 아니라 어긋나 보입니다.
 *   더 빼내려면 두 값을 같은 폭으로 키우세요(음수 방향).
 *   wrap 없이 .dug-system-step 을 기준으로 삼으면 칸 전체(200px) 왼쪽 끝으로
 *   튀어나가므로 상자를 따로 둔 것입니다.
 */
.dug-step-badge-wrap {
	position: relative;
	display: inline-block;
	margin-bottom: 4px;
}

.dug-step-no {
	position: absolute;
	top: -13px;
	left: -11px;
	z-index: 2;
	display: block;
	width: 38px;
	margin: 0;
}

.dug-step-no img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * 배지를 감싼 뒤에는 아이콘의 아래 여백을 이 상자가 대신 맡습니다.
 * (아이콘 자체의 margin-bottom 18px 은 그대로 두고 여기서 더하지 않습니다)
 */
.dug-step-badge-wrap .dug-system-icon {
	margin-bottom: 12px;
}

/**
 * 제목 좌우의 선  [2026-08-29 운영자 요청]
 * 글로벌비전·핵심가치 제목(25절)과 같은 방식입니다. 색만 남색으로 씁니다.
 * 한 줄로 보이게 하려면 줄바꿈을 막아야 해서 white-space: nowrap 을 함께 겁니다.
 * 좁은 화면에서는 선을 짧게 줄이고, 그래도 모자라면 줄바꿈을 허용합니다(아래 반응형).
 */
.dug-lined-title h2 {
	display: block;
	white-space: nowrap;
	color: var(--primary-color);
}

/**
 * 좁은 화면에서는 줄바꿈을 허용하고 선을 뺍니다  [2026-08-29]
 * 'SOCIAL SELLING, 이렇게 간단합니다!' 는 좌우 선까지 합치면 500px 을 넘습니다.
 * nowrap 을 그대로 두면 제목이 화면보다 넓어져 페이지 전체에 가로 스크롤이
 * 생기고, 그 결과 배너 오른쪽에 빈 자리가 생긴 것처럼 보입니다.
 * (배너는 width:100% 라 화면 폭까지만 그려지는데 문서는 그보다 넓어지기 때문)
 * 선을 숨기는 규칙은 위 27절 반응형 블록에 있습니다.
 */
@media only screen and (max-width: 991px) {
	.dug-lined-title h2 {
		white-space: normal;
		text-align: center;
	}
}

.dug-lined-title h2::before,
.dug-lined-title h2::after {
	content: '';
	display: inline-block;
	width: 46px;
	height: 1px;
	margin: 0 18px;
	vertical-align: middle;
	background: var(--primary-color);
}

/* ----------------------------------------------------------------------------------------
 * 클로징 CTA (페이지 맨 아래 지구 배경 + 버튼)
 * -------------------------------------------------------------------------------------- */
.dug-closing {
	position: relative;
	padding: 90px 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* 배경 사진 위에 네이비 막을 덮어 글자가 항상 읽히게 합니다 */
.dug-closing::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 24, 63, 0.92) 0%, rgba(0, 31, 76, 0.78) 55%, rgba(0, 31, 76, 0.55) 100%);
}

.dug-closing-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}

.dug-closing-inner h3 {
	margin-bottom: 16px;
	color: var(--white-color);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.35em;
}

.dug-closing-inner p {
	margin-bottom: 30px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.7em;
}

.dug-closing-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/**
 * 다크 섹션 위의 보조 버튼
 * .btn-default.btn-outline 은 원래 밝은 배경용(네이비 글자)이라
 * 다크 섹션에 그대로 두면 네이비 글자가 네이비 배경에 묻힙니다.
 * 여기서만 흰색으로 뒤집습니다.
 */
.dark-section .btn-default.btn-outline,
.dug-closing .btn-default.btn-outline {
	color: var(--white-color);
	border-color: rgba(255, 255, 255, 0.45);
}

.dark-section .btn-default.btn-outline:hover,
.dug-closing .btn-default.btn-outline:hover {
	color: var(--primary-color);
	border-color: var(--white-color);
}

/**
 * 클로징 변형 - 왼쪽에 지구 / 오른쪽에 글   [2026-08-29]
 * 쓰는 곳 : /business/opportunity  (.dug-closing 에 함께 붙입니다)
 *
 * 왜 따로 두었나
 *   business/section-earth.png 은 왼쪽에 지구가 있고 오른쪽은 이미 남색인
 *   한 장입니다. 그런데 기본 .dug-closing::before 는 왼쪽(0%)이 0.92 로 가장
 *   진해서, 정작 보여줘야 할 지구를 그 막이 덮어버립니다.
 *   여기서는 막을 반대로 - 왼쪽은 비우고 글이 앉는 오른쪽만 덮습니다.
 *   social·growth 의 클로징은 사진이 달라서 기본값을 그대로 둡니다.
 */
.dug-closing-earth-left::before {
	background: linear-gradient(90deg,
		rgba(0, 24, 63, 0) 0%,
		rgba(0, 24, 63, 0.12) 32%,
		rgba(0, 26, 66, 0.58) 50%,
		rgba(0, 26, 66, 0.80) 68%,
		rgba(0, 26, 66, 0.86) 100%);
}

/* 사진 아래쪽이 잘리지 않게 - 시안은 지구 윗부분이 보입니다 */
.dug-closing-earth-left {
	background-position: center bottom;
}

/* 글은 오른쪽 절반 안에서 가운데 정렬. 왼쪽 지구를 가리지 않습니다 */
.dug-closing-earth-left .dug-closing-inner {
	width: 56%;
	margin-left: auto;
}

.dug-closing-earth-left .dug-closing-btn {
	justify-content: center;
}

/* ----------------------------------------------------------------------------------------
 * 슬로건 밴드 ("우리의 꿈을 세계로! | Dream Up Global")
 * -------------------------------------------------------------------------------------- */
.dug-slogan-band {
	padding: 34px 0;
	/**
	 * 띠 배경  [2026-08-28]
	 * 운영자가 올린 company/ceo_bar.png (68x87) 를 가로로 반복해 깝니다.
	 * 이미지 자체가 '위쪽 골드 선 + 아래 남색' 구조라, 예전에 CSS 로 그렸던
	 * border-top(골드 3px)은 겹치므로 걷어냈습니다.
	 * 타일 높이(87px)보다 띠가 높아지는 경우를 대비해 배경색을 같은 남색으로
	 * 깔아둡니다. 타일 아래쪽 색(#091A36)을 그대로 뽑아 쓴 값입니다.
	 */
	background-color: #091A36;
	background-image: url(../img/company/ceo_bar.png);
	background-repeat: repeat-x;
	background-position: left top;
}

.dug-slogan-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

/**
 * 창립자 페이지의 띠 글자 위치  [2026-08-28]
 * 왼쪽은 인물이 차지하고 있어서, 글자를 화면 전체 가운데에 두면 인물과 겹쳐
 * 왼쪽으로 치우쳐 보입니다. 시안처럼 '오른쪽 칼럼 기준 가운데'로 옮깁니다.
 * 41.666% 는 왼쪽 인물 칼럼(col-lg-5)의 폭입니다. 그만큼 왼쪽을 비우면
 * 남은 58.333% 안에서 가운데 정렬되어 위쪽 글과 축이 맞습니다.
 * 991px 이하(세로로 쌓이는 구간)에서는 0 으로 되돌립니다.
 */
.dug-founder-page .dug-slogan-inner {
	padding-left: 41.666%;
}

/* 지구 아이콘 (골드) - 이미지입니다 [2026-08-28] */
.dug-slogan-globe {
	display: block;
	line-height: 0;
}

.dug-slogan-globe img {
	width: 34px;
	height: auto;
}

.dug-slogan-text {
	color: var(--white-color);
	font-size: 26px;
	font-weight: 700;
}

.dug-slogan-sep {
	width: 1px;
	height: 26px;
	background: rgba(255, 255, 255, 0.35);
}

/**
 * 브랜드  [2026-08-28]
 * 한 줄 워드마크(logo-wordmark-white.png, 256x48)입니다.
 * 폭 176px 이면 높이가 33px 이라 옆의 글자(26px)와 자연스럽게 맞습니다.
 * 두 줄 로고(logo-white.png)를 쓰면 같은 폭에서 높이가 78px 이 되어 띠가 뭉개집니다.
 */
.dug-slogan-brand {
	display: block;
	line-height: 0;
}

.dug-slogan-brand img {
	width: 176px;
	max-width: 44vw;
	height: auto;
}

/* ----------------------------------------------------------------------------------------
 * 공통 반응형
 * -------------------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
	/**
	 * 화살표는 가로 배치일 때만 의미가 있어서 세로로 접히면 숨깁니다.
	 *
	 * .is-img 를 반드시 같이 써야 합니다  [2026-08-29 운영자 요청으로 실제 고침]
	 *   이 규칙은 예전부터 있었지만 화면에는 화살표가 계속 보였습니다.
	 *   위 6109줄의  .dug-system-arrow.is-img { display: flex }  가 명시도 (0,2,0)
	 *   이라 (0,1,0) 짜리 이 규칙을 이기고 있었기 때문입니다.
	 *   미디어쿼리는 명시도를 올려주지 않습니다. 클래스를 맞춰 적어야 이깁니다.
	 *   (사업기회 5단계 png 화살표가 .is-img 입니다. 폰트 아이콘을 쓰는
	 *    소셜셀링 쪽은 .is-img 가 없어서 예전부터 잘 숨겨지고 있었습니다)
	 */
	.dug-system-arrow,
	.dug-system-arrow.is-img { display: none; }

	.dug-system-step {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 34px;
	}

	.dug-closing { padding: 70px 0; }
	.dug-closing-inner h3 { font-size: 27px; }

	/**
	 * 좁은 화면에서는 지구/글 좌우 나눔을 되돌립니다  [2026-08-29]
	 * 폭이 좁아지면 배경이 심하게 잘려 왼쪽에 지구가 남지 않습니다.
	 * 그래서 막을 위아래 방향으로 고르게 깔고 글도 전체 폭을 씁니다.
	 */
	.dug-closing-earth-left::before {
		background: linear-gradient(180deg, rgba(0, 24, 63, 0.55) 0%, rgba(0, 26, 66, 0.88) 100%);
	}
	.dug-closing-earth-left .dug-closing-inner {
		width: 100%;
		margin-left: 0;
	}
	.dug-slogan-text { font-size: 21px; }
	.dug-slogan-brand { font-size: 19px; }
}

@media only screen and (max-width: 575px) {
	.dug-system-step {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.dug-system-icon {
		width: 70px;
		height: 70px;
		font-size: 27px;
	}

	.dug-closing-inner h3 { font-size: 23px; }
	/**
	 * 클로징 버튼을 글자 폭에 맞춰 작게  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * 예전에는 width:100% 라 화면 끝까지 늘어나서, '보상플랜' 네 글자 옆이
	 * 통째로 비고 화살표만 저 멀리 오른쪽 끝에 붙어 있었습니다.
	 * 폭 지정을 빼면 .dug-closing-btn 의 justify-content:center 가 가운데로 모읍니다.
	 *
	 * 오른쪽 여백 40px 은 화살표 자리입니다  ← 더 줄이지 마세요
	 *   .btn-default::before(화살표)가 오른쪽에서 20px 지점에 11px 폭으로 놓입니다.
	 *   합이 31px 이라 40px 이면 글자와 9px 떨어집니다. 여백을 31px 밑으로
	 *   내리면 화살표가 글자 위로 올라탑니다.
	 *
	 * 버튼이 두 개인 클로징(글로벌비전의 '사업자 등록' + '회사소개')도 확인했습니다.
	 * 한 개당 약 130~150px 이라 375px 화면에서 gap 14px 을 포함해 한 줄에 들어갑니다.
	 */
	.dug-closing-btn .btn-default {
		width: auto;
		padding: 13px 40px 13px 22px;
		font-size: 16px;
	}

	.dug-closing-btn .btn-default::before {
		right: 20px;
		width: 11px;
		height: 11px;
	}
	.dug-slogan-sep { display: none; }
}

/* ========================================================================================
 * 23-2. 경영철학  /company/management   [2026-08-28 시안대로 전면 교체]
 * ----------------------------------------------------------------------------------------
 * 운영자 시안(GLOBAL VISION 한 판)을 배경사진 한 장 + HTML 로 재현합니다.
 *
 * 높이 : 배경 원본 비율(1536:1024 = 3:2)대로 화면 폭에 맞춰 잡습니다.
 *        min() 으로 900px 상한을 둔 이유는 넓은 모니터에서 한 화면을 넘길 정도로
 *        커지는 것을 막기 위함입니다. 상한에 걸리면 cover 가 위아래를 잘라냅니다.
 * 세로 배치 : 위(제목) / 가운데(핀 3개) / 아래(슬로건) 를 flex 로 나눕니다.
 *        가운데를 margin:auto 로 띄워 시안의 위치감을 맞췄습니다.
 * 글자 색 : 배경 위쪽이 밝고 아래쪽이 어두워서 위는 남색, 아래는 흰색입니다.
 * ======================================================================================== */

.dug-gvision {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: min(calc(100vw * 1024 / 1536), 900px);
	padding: 46px 0 40px;
	background: #0A1F44;   /* 사진을 못 읽을 때의 바탕색 */
}

.dug-gvision-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dug-gvision-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.dug-gvision-inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: center;
}

/* ---------- 위 : 제목 ---------- */
.dug-gvision-title {
	/* [2026-08-28] 제목·경로·부제 사이를 시안처럼 촘촘하게 붙입니다.
	   테마의 h2/p 기본 여백이 남아 있어 세 줄이 벌어져 보였습니다 */
	margin-bottom: 2px;
	color: var(--primary-color);
	font-size: 62px;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.01em;
}

/* VISION 만 골드 (시안과 동일) */
.dug-gvision-title em {
	color: var(--accent-color);
	font-style: normal;
}

/* Korea → USA → Asia */
.dug-gvision-route {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	line-height: 1.2em;
	color: var(--primary-color);
	font-size: 34px;
	font-weight: 600;
}

.dug-gvision-route img {
	width: 40px;
	height: auto;
}

.dug-gvision-sub {
	margin: 4px 0 0;
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

/* ---------- 가운데 : 핀 3개 ---------- */
.dug-gvision-steps {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	/**
	 * [2026-08-28] 핀 위치를 위로 올렸습니다.
	 * 처음에는 margin:auto 0 으로 위아래 가운데에 두었는데, 그러면 핀과 설명글이
	 * 배경 아래쪽 도시 스카이라인과 겹쳐 글자가 안 읽혔습니다.
	 * 지금은 제목 아래 38px 에 두고, 남는 공간을 전부 아래로 보냅니다
	 * (margin-bottom:auto). 시안처럼 핀이 지도·하늘 영역에 놓입니다.
	 * 조절 이력 : 30px(가운데정렬에서 변경) → 8px → 38px (운영자 확인값)
	 * 이 값 하나로 핀 3개가 위아래로 움직입니다.
	 */
	margin: 38px 0 auto;
}

.dug-gvision-step {
	flex: 0 0 auto;
	width: 200px;
}

/**
 * 핀 미세조정  [2026-08-28]
 * 배경 지도의 나라 위치와 핀을 맞추는 값입니다.
 * transform 을 쓰는 이유 : margin 으로 밀면 사이 연결선 길이까지 같이 변해
 * 화살표가 어긋납니다. transform 은 그린 자리만 옮기므로 배치가 안 흔들립니다.
 * 배경 이미지를 바꾸면 이 값도 다시 맞춰야 합니다.
 *   KOREA : 왼쪽으로 35px  (30px → 35px, 운영자 확인값)
 *   USA / ASIA : 지금은 조정 없음 - 필요하면 아래 주석을 풀어 쓰세요
 */
.dug-gvision-step:first-child {
	transform: translateX(-35px);
}

/*
.dug-gvision-step:nth-child(3) { transform: translateX(0); }
.dug-gvision-step:nth-child(5) { transform: translateX(0); }
*/

.dug-gvision-pin {
	display: block;
	margin-bottom: 10px;
}

.dug-gvision-pin img {
	width: 84px;
	height: auto;
}

/* 핀 아래 남색 칩 */
.dug-gvision-label {
	display: inline-block;
	padding: 7px 22px;
	background: var(--primary-color);
	border-radius: 8px;
	color: var(--white-color);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dug-gvision-text {
	margin: 12px 0 0;
	color: var(--primary-color);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6em;
}

/**
 * 핀 사이 연결선 : 골드 선 + 화살촉  [2026-08-28 가운데 정렬로 수정]
 * 예전에는 선이 남는 폭을 다 채우고(flex:1) 화살촉이 맨 오른쪽에 붙어서,
 * 화살표가 오른쪽 핀(미국)에 바짝 붙어 보였습니다.
 * 지금은 선 길이를 고정하고 '선+화살촉' 묶음을 두 핀 사이 가운데에 둡니다.
 * 선을 길게/짧게 하려면 .dug-gvision-link-line 의 width 만 고치세요.
 */
.dug-gvision-link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 200px;
	margin-top: 52px;      /* 핀 몸통 높이만큼 내려 선이 핀 가운데를 지나게 */
}

/**
 * 첫 번째 연결선만 왼쪽으로 18px 옮깁니다.
 * KOREA 핀을 배경 지도에 맞추려고 왼쪽으로 35px 밀어두었는데(위 :first-child),
 * 그만큼 왼쪽 간격이 벌어져 화살표가 오른쪽으로 치우쳐 보이기 때문입니다.
 * KOREA 핀의 translateX 를 바꾸면 이 값도 절반쯤으로 같이 맞춰주세요.
 */
.dug-gvision-link:first-of-type {
	transform: translateX(-18px);
}

.dug-gvision-link-line {
	flex: 0 0 auto;
	width: 96px;
	height: 2px;
	background: var(--accent-color);
}

.dug-gvision-link img {
	flex: 0 0 auto;
	width: 20px;
	height: auto;
	margin-left: -2px;     /* 선과 화살촉 사이 빈틈 제거 */
}

/* ---------- 아래 : 슬로건 ---------- */
/**
 * 상단 메뉴 '글로벌 비전 > 우리의 꿈을 세계로'가 /global/vision#dream 으로 들어옵니다.
 * 앵커가 이 블록(id="dream")이라, 고정 헤더에 가려지지 않게 여유를 둡니다.
 * 예전에는 같은 역할을 .dug-gv-dream 이 했습니다(30절). [2026-08-30]
 */
.dug-gvision-bottom {
	scroll-margin-top: 110px;
}

.dug-gvision-slogan {
	margin-bottom: 10px;
	color: var(--white-color);
	font-size: 56px;
	font-weight: 700;
	line-height: 1.15em;
}

.dug-gvision-slogan em {
	color: var(--accent-color);
	font-style: normal;
}

/* 좌우로 뻗는 골드 선 + 국문 슬로건 */
.dug-gvision-slogan-kr {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 0;
	color: var(--white-color);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* '세계로' 만 골드 (시안과 동일)  [2026-08-28] */
.dug-gvision-slogan-kr em {
	color: var(--accent-color);
	font-style: normal;
}

.dug-gvision-slogan-kr::before,
.dug-gvision-slogan-kr::after {
	content: '';
	flex: 0 0 auto;
	width: 120px;
	height: 1px;
	background: var(--accent-color);
}

/* ---------- 반응형 ---------- */
@media only screen and (max-width: 1199px) {
	.dug-gvision-title { font-size: 46px; }
	.dug-gvision-route { font-size: 26px; gap: 10px; }
	.dug-gvision-route img { width: 32px; }
	.dug-gvision-step { width: 168px; }
	.dug-gvision-link { max-width: 90px; }
	.dug-gvision-slogan { font-size: 40px; }
	.dug-gvision-slogan-kr { font-size: 21px; }
	.dug-gvision-slogan-kr::before,
	.dug-gvision-slogan-kr::after { width: 70px; }
}

@media only screen and (max-width: 991px) {
	/**
	 * 좁은 화면
	 * 1) 높이를 내용에 맞춥니다 (배경 비율로 잡으면 글이 넘칩니다)
	 * 2) 핀 3개를 세로로 쌓고 사이 연결선은 숨깁니다
	 * 3) 배경이 잘려 밝고 어두운 위치가 흐트러지므로, 위는 흰색 / 아래는 남색을
	 *    덮는 그라디언트를 한 겹 올려 글자가 항상 읽히게 합니다
	 */
	.dug-gvision {
		min-height: 0;
		padding: 44px 0 40px;
	}

	.dug-gvision-bg::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.88) 0%,
			rgba(255, 255, 255, 0.62) 42%,
			rgba(10, 31, 68, 0.55) 68%,
			rgba(10, 31, 68, 0.86) 100%);
	}

	.dug-gvision-steps {
		flex-direction: column;
		align-items: center;
		gap: 26px;
		margin: 34px 0;
		padding: 0;
	}

	/**
	 * 세로로 쌓일 때는 셋 다 정확히 가운데로  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * .dug-gvision-step:first-child 에 걸린 transform: translateX(-35px) 때문에
	 * KOREA 만 왼쪽으로 35px 밀려 있었습니다. 그 값은 PC 에서 핀을 배경 지도의
	 * 한국 위치에 맞추려고 넣은 것인데, 세로로 쌓이는 좁은 화면에서는 지도와
	 * 맞출 일이 없어 그냥 줄이 어긋나 보이기만 합니다. 여기서 되돌립니다.
	 * (PC 규칙은 그대로 둡니다 - 지도 위치 맞춤은 계속 필요합니다)
	 *
	 * 선택자에 :first-child 를 그대로 붙여야 합니다  ← 처음에 여기서 틀렸습니다
	 *   미디어쿼리는 명시도를 올려주지 않습니다. 원본이 (0,2,0) 인데
	 *   .dug-gvision-step 만 쓰면 (0,1,0) 이라 화면이 좁아도 원본이 계속 이깁니다.
	 *   핀 이미지 세 장의 실제 중심도 재봤는데 캔버스 대비 1px 이내라
	 *   어긋남의 원인은 오직 이 transform 하나였습니다.
	 */
	.dug-gvision-step {
		width: 100%;
		max-width: 300px;
	}

	.dug-gvision-step:first-child {
		transform: none;
	}

	.dug-gvision-link { display: none; }

	/**
	 * 마지막(ASIA) 설명글만 흰색  [2026-08-29 운영자 요청 : "잘 안 보임"]
	 * ------------------------------------------------------------------------------
	 * 위 .dug-gvision-bg::after 그라디언트가 아래로 갈수록 짙은 남색
	 * (rgba(10,31,68,0.86))이 됩니다. 설명글 기본색이 --primary-color(남색)라
	 * 맨 아래 ASIA 글자가 배경에 묻혔습니다.
	 *
	 * 셋 다 흰색으로 바꾸지 않은 이유
	 *   KOREA 는 그라디언트 위쪽(흰색 88%)에 있어 흰 글자면 반대로 안 보입니다.
	 *   USA 는 중간이라 남색이 아직 읽힙니다. 배경이 바뀌면 이 규칙도 다시 보세요.
	 */
	.dug-gvision-step:last-child .dug-gvision-text {
		color: var(--white-color);
	}
	.dug-gvision-title { font-size: 36px; }
	.dug-gvision-route { font-size: 21px; }
	.dug-gvision-route img { width: 26px; }
	.dug-gvision-sub { font-size: 16px; }
	.dug-gvision-slogan { font-size: 30px; }
	.dug-gvision-slogan-kr { font-size: 18px; gap: 12px; }
	.dug-gvision-slogan-kr::before,
	.dug-gvision-slogan-kr::after { width: 40px; }
}

@media only screen and (max-width: 575px) {
	.dug-gvision-title { font-size: 28px; }
	.dug-gvision-route { font-size: 17px; gap: 8px; }
	.dug-gvision-route img { width: 20px; }
	.dug-gvision-slogan { font-size: 23px; }
	.dug-gvision-slogan-kr { font-size: 16px; }
	.dug-gvision-slogan-kr::before,
	.dug-gvision-slogan-kr::after { width: 24px; }
}

/* ========================================================================================
 * 24. 창립자  /company/founder
 * ----------------------------------------------------------------------------------------
 * 원본 시안을 왼쪽 인물 / 오른쪽 철학 문장 구조로 옮긴 것입니다.
 *
 * [2026-08-28] 운영자가 올린 이미지로 전면 교체하며 다음을 함께 손봤습니다.
 *   - 인물 : 흰 배경째 잘린 조각(webp, 없는 파일) → 누끼 png. 아래쪽 페이드 제거
 *   - 아이콘 : Font Awesome + CSS 원형 배지 → png (동그란 배경이 이미지에 포함)
 *   - 오른쪽 소개글 : 왼쪽 정렬 → 가운데 정렬 (원본 시안과 동일)
 *   - 철학/비전 : 회색 카드 → 배경 없이 두 단, 사이에 세로 구분선
 *   - 경력 : 회색 카드 → 배경 없이 골드 윗선만
 * ======================================================================================== */

/**
 * 낮은 페이지 상단  [2026-08-28 추가]
 * ----------------------------------------------------------------------------------------
 * custom.css 의 기본 .page-header 는 위아래 160px 여백 + 제목 80px 로 약 480px 입니다.
 * 창립자 페이지에서는 상단이 너무 두꺼워 인물이 한참 아래로 밀렸습니다.
 * 뷰에서 $page_header_class = 'page-header-slim' 을 넘긴 페이지만 낮춥니다.
 * (클래스를 두 개 겹쳐 쓴 이유는 custom.css 의 한 개 클래스 규칙을 이기기 위함입니다)
 * -------------------------------------------------------------------------------------- */
.page-header.page-header-slim {
	/**
	 * 위아래 여백  [2026-08-28]
	 *   기본(custom.css) 160px → 74px → 26px 으로 두 번 줄였습니다.
	 *   지금 상단 전체 높이는 약 130px 입니다.
	 *   (26 + 제목 40 + 6 + 브레드크럼 24 + 26)
	 *   더 얇게/두껍게는 이 값만 고치면 됩니다.
	 */
	padding: 26px 0;
}

.page-header-slim .page-header-box h1 {
	margin-bottom: 6px;
	font-size: 40px;
}

/* 제목·브레드크럼은 왼쪽 정렬(테마 기본)입니다.
   [2026-08-28] 잠깐 오른쪽으로 옮겼다가 되돌렸습니다.
   오른쪽으로 다시 옮길 일이 생기면 아래 두 줄을 되살리면 됩니다.
     .page-header-slim .page-header-box { text-align: right; }
     .page-header-slim .page-header-box ol.breadcrumb { justify-content: flex-end; }
   그때는 어두운 그라디언트 방향(custom.css .page-header:before)도 뒤집어야
   나중에 배경사진을 넣었을 때 흰 글자가 묻히지 않습니다. */

@media only screen and (max-width: 991px) {
	.page-header.page-header-slim { padding: 20px 0; }
	.page-header-slim .page-header-box h1 { font-size: 30px; }
}

.dug-founder {
	/**
	 * 아래 여백 100px → 0  [2026-08-28]
	 * 원본 시안은 인물 정장이 맨 아래 남색 띠를 덮습니다.
	 * 여백이 있으면 인물과 띠 사이에 흰 줄이 생겨 둘이 떨어져 보입니다.
	 */
	padding: 70px 0 0;
	background: var(--white-color);
}

.dug-founder-row {
	margin-bottom: 0;
}

/**
 * 인물사진  [2026-08-28]
 * chairman.png 은 배경이 완전히 투명한 누끼입니다(알파 검사로 확인).
 * 예전 조각(흰 배경)에 쓰던 아래쪽 페이드 마스크는 필요가 없어졌습니다.
 * 페이드를 남겨두면 오히려 인물의 팔·정장 아랫부분이 흐려집니다.
 */
/**
 * 인물은 칼럼 '아래쪽'에 붙이고 남색 띠를 덮습니다.  [2026-08-28]
 * ----------------------------------------------------------------------------------------
 * 처음에는 .dug-founder-photo 에 height:100% + align-items:flex-end 를 주고
 * margin-bottom 을 음수로 걸었습니다. 그런데 그러면 인물이 내려가지 않습니다.
 * height 가 100% 로 고정된 요소의 음수 margin 은 '차지하는 공간'만 줄이고
 * 위치는 그대로 두기 때문입니다. 그래서 인물이 띠 위에 떠 있었습니다.
 *
 * 지금은 칼럼(부트스트랩 col)을 flex 컨테이너로 만들고 인물을 끝(아래)에 붙입니다.
 * 이렇게 하면 인물의 '바깥 아래끝(margin 포함)'이 칼럼 바닥에 맞춰지므로,
 * 음수 margin 이 인물을 그만큼 실제로 아래로 밀어냅니다.
 *
 * 덮는 양은 margin-bottom 한 값으로 조절합니다.
 *   띠 높이는 약 102px (위아래 여백 34px + 내용 34px) 입니다.
 *   -88px 이면 정장 아랫단이 띠 안쪽 거의 끝까지 내려갑니다(원본 시안과 같은 모습).
 * -------------------------------------------------------------------------------------- */
.dug-founder-row > div:first-child {
	display: flex;
	align-items: stretch;   /* 인물 칼럼 높이 = 오른쪽 글 높이 */
}

/**
 * 좌우 균형  [2026-08-28]
 * ----------------------------------------------------------------------------------------
 * 인물을 '가능한 한 크게' 하고 오른쪽 글과 위아래를 맞추는 방법입니다.
 *
 *   1) 칼럼을 stretch → 인물 상자 높이가 오른쪽 글 높이와 같아집니다.
 *   2) 이미지에 height:100% + object-fit:contain
 *      → 상자를 꽉 채우되 비율은 유지합니다. 폭이 부족하면 폭에 맞춰 줄어들고,
 *        남는 자리는 투명이라 눈에 보이지 않습니다. (찌그러지지 않습니다)
 *   3) object-position:bottom → 남는 자리는 위쪽에 두고 인물은 바닥에 붙습니다.
 *   4) 상자를 화면 왼쪽 끝까지 넓혀(아래 min-width 규칙) 인물이 더 커집니다.
 *      컨테이너 좌우 여백(1440px 화면에서 72px)이 그냥 비어 있던 자리입니다.
 *
 * max-width 로 크기를 묶어두던 규칙(560px)은 없앴습니다. 그것이 인물이 작아 보이던
 * 직접적인 원인입니다.
 * -------------------------------------------------------------------------------------- */
.dug-founder-photo {
	position: relative;
	z-index: 2;   /* 띠보다 위에 그려집니다 */
	display: flex;
	align-items: flex-end;   /* 이미지를 상자 아래쪽(띠 쪽)에 붙입니다 */
	width: 100%;
	/**
	 * 남색 띠를 덮는 양 (데스크톱).  [2026-08-28]
	 *   -88 → -73 → -80 → -90 → -40 → -10px (운영자 확인값)
	 *   인물 이미지를 chairman-portrait-full.png 로 바꾼 뒤 여백이 달라져
	 *   두 번에 걸쳐 80px 올렸습니다(50px + 30px).
	 * 값을 키우면 인물이 띠 속으로 더 내려가고, 줄이면 올라옵니다.
	 * 좁은 화면(991px 이하)은 아래 반응형에서 따로 지정합니다(-51px 확정).
	 */
	margin-bottom: -10px;
}

/**
 * [2026-08-28] 비율 문제 수정
 * 전에는 width:100% + height:100% + object-fit:contain 이었습니다.
 * object-fit 은 비율을 지켜주지만, 상자 크기에 따라 위아래에 빈 공간이 생기고
 * object-fit 을 모르는 환경에서는 그냥 늘어나 찌그러집니다.
 *
 * 지금은 폭만 100% 로 두고 높이는 auto - 즉 '이미지 원래 비율'대로 그립니다.
 * 어떤 환경에서도 절대 찌그러지지 않습니다.
 * 상자 아래쪽에 붙이는 일은 부모(.dug-founder-photo)의 flex-end 가 합니다.
 * (1440px 화면 기준 : 폭 598px → 높이 857px, 칼럼 높이 약 900px 안에 들어옵니다)
 */
.dug-founder-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * 사진 비교용 페이지(/company/founder1) 전용  [2026-08-28 임시]
 * 예전 사진(chairman.png)은 아래 투명 여백이 새 사진과 달라서, 새 사진 기준값
 * (-10px)을 그대로 주면 인물이 띠 위에 떠 보입니다.
 * 그래서 사진 교체 직전에 쓰던 값으로 되돌립니다.
 * 사진을 확정하고 founder1 을 지울 때 이 규칙도 함께 지워주세요.
 */
.dug-founder-photo.is-legacy-photo {
	margin-bottom: -90px;
}

/**
 * 인물 상자를 화면 왼쪽 끝까지 넓힙니다.
 * 칼럼 자체에 음수 margin 을 주면 행의 남는 폭이 오른쪽에 몰려 글이 밀립니다.
 * 그래서 칼럼은 그대로 두고 안쪽 상자만 넓힙니다.
 * 컨테이너 최대폭이 구간별로 달라(960 / 1140 / 1320) 식을 세 번 씁니다.
 */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.dug-founder-photo {
		margin-left: calc((960px - 100vw) / 2 - 12px);
		width: calc(100% + (100vw - 960px) / 2 + 12px);
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.dug-founder-photo {
		margin-left: calc((1140px - 100vw) / 2 - 12px);
		width: calc(100% + (100vw - 1140px) / 2 + 12px);
	}
}

@media only screen and (min-width: 1400px) {
	.dug-founder-photo {
		margin-left: calc((1320px - 100vw) / 2 - 12px);
		width: calc(100% + (100vw - 1320px) / 2 + 12px);
	}
}

/**
 * 오른쪽 소개 영역  [2026-08-28]
 * 원본 시안은 로고 · 이름 · 직함 · 철학문장이 모두 가운데 정렬입니다.
 * (아래 철학/비전과 경력은 왼쪽 정렬 그대로입니다)
 */
.dug-founder-intro {
	text-align: center;
	padding-top: 10px;   /* 로고가 인물 머리 높이에서 시작하도록 */
}

/**
 * 이름 위 로고  [2026-08-28]
 * logo-script-navy.png 는 'DreamUp' 스크립트만 담긴 이미지(1497x552)입니다.
 * 시안의 '— GLOBAL —' 줄은 이미지에 없어서 여기서 만듭니다.
 *   좌우 짧은 골드선 : ::before / ::after
 *   글자 : 골드, 자간 넓게
 * em 에 padding-left 를 준 것은 자간 때문에 글자가 오른쪽으로 밀려 보이는 것을
 * 되돌리기 위한 것입니다(마지막 글자 뒤에도 자간이 붙기 때문입니다).
 */
.dug-founder-logo {
	margin-bottom: 14px;
}

.dug-founder-logo img {
	display: block;
	width: 215px;
	max-width: 56%;
	height: auto;
	margin: 0 auto;
}

.dug-founder-logo-sub {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 4px;
}

.dug-founder-logo-sub::before,
.dug-founder-logo-sub::after {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--accent-color);
}

.dug-founder-logo-sub em {
	padding-left: 0.42em;
	color: var(--accent-text);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.42em;
}

.dug-founder-name {
	margin-bottom: 4px;
	color: var(--primary-color);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1em;
}

.dug-founder-name-kr {
	margin-bottom: 0;
	color: var(--primary-color);
	font-size: 22px;
	font-weight: 600;
}

/* 이름과 직함 사이 골드 구분선 + 별 */
.dug-founder-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 18px 0;
}

.dug-founder-divider::before,
.dug-founder-divider::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--accent-color);
	opacity: 0.55;
}

.dug-founder-star {
	flex: 0 0 auto;
	display: block;
	line-height: 0;   /* 이미지 아래 여백 제거 - 선과 별 높이를 맞춥니다 */
}

.dug-founder-star img {
	width: 16px;
	height: auto;
}

.dug-founder-position {
	margin-bottom: 26px;
}

.dug-founder-position strong {
	display: block;
	color: var(--primary-color);
	font-size: 27px;
	font-weight: 700;
}

/**
 * 직함 아래 회사명  [2026-08-28]
 * 시안대로 이미지가 아니라 골드 글자입니다.
 * (잠깐 워드마크 이미지를 넣었다가 되돌렸습니다 - line-height:0 과 img 규칙 삭제)
 */
.dug-founder-position span {
	display: block;
	margin-top: 4px;
	color: var(--accent-text);
	font-size: 20px;
	font-weight: 600;
}

/* 창업 철학 - 이 페이지에서 가장 크게 보여야 하는 문장입니다 */
.dug-founder-headline span {
	display: block;
	color: var(--primary-color);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5em;
}

.dug-founder-headline-sub {
	margin-top: 12px;
	margin-bottom: 0;
	color: var(--text-color);
	font-size: 17px;
}

/* 철학 / 비전 두 블록 */
/**
 * 철학 / 비전  [2026-08-28]
 * 전폭 행에서 오른쪽 칼럼 안쪽 행으로 옮겼습니다(원본 시안 구조).
 * 위쪽은 철학문장과 간격, 아래쪽은 EXPERIENCE 골드선과 간격입니다.
 */
.dug-founder-blocks {
	margin-top: 34px;
	margin-bottom: 30px;
}

/**
 * 철학 / 비전  [2026-08-28]
 * 예전에는 회색 카드 + 테두리였는데, 원본 시안은 배경 없이 두 단으로 나뉘고
 * 사이에 얇은 세로선만 있습니다. 그 선은 운영자가 올린 divider-vertical.png 입니다.
 */
.dug-belief {
	display: flex;
	gap: 18px;
	height: 100%;
	padding: 8px 0;
}

/* 오른쪽 단(비전) 왼쪽에만 세로 구분선을 넣습니다 */
.dug-founder-blocks > div:nth-child(2) .dug-belief {
	padding-left: 34px;
	background: url(../img/icon/divider-vertical.png) left center no-repeat;
	background-size: 2px 82%;
}

/* 아이콘 - 동그란 남색 배경까지 이미지에 포함되어 있어 CSS 배경은 걷어냈습니다 */
.dug-belief-icon {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
}

.dug-belief-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dug-belief-label {
	display: block;
	margin-bottom: 4px;
	color: var(--accent-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.dug-belief-title {
	margin-bottom: 10px;
	color: var(--primary-color);
	font-size: 21px;
	font-weight: 700;
}

.dug-belief-body p {
	margin: 0;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.75em;
}

/* 경력 */
/* 경력 - 원본 시안대로 배경 없이 골드 윗선만 둡니다 [2026-08-28] */
.dug-career {
	padding: 30px 0 0;
	border-top: 2px solid var(--accent-color);
}

.dug-career-label {
	display: block;
	margin-bottom: 20px;
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.dug-career-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dug-career-list li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 11px;
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.6em;
}

/* 목업의 점(•) 목록을 그대로 */
.dug-career-list li::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent-color);
}

@media only screen and (max-width: 991px) {
	/**
	 * [2026-08-28] 아래 여백을 0 으로.
	 * 이 두 값(섹션 70px + 행 44px = 114px)이 남아 있어서, 좁은 화면에서 인물이
	 * 남색 띠에서 한참 위에 떠 보였습니다. 겹치라고 준 음수 margin 보다
	 * 이 여백이 훨씬 커서 상쇄되고도 남았던 것입니다.
	 */
	.dug-founder { padding: 60px 0 0; }
	.dug-founder-row { margin-bottom: 0; }
	/**
	 * 세로로 쌓이는 구간  [2026-08-28]
	 * 인물을 글 '아래'로 내립니다. 부트스트랩 row 가 flex 라서 order 로 순서를
	 * 바꿀 수 있습니다(마크업은 그대로 - 데스크톱에서는 왼쪽에 있어야 합니다).
	 * 데스크톱처럼 인물이 남색 띠를 살짝 덮게 두되, 좁은 화면에서는 띠 안의 글자와
	 * 부딪히지 않도록 겹치는 양을 24px 로 줄입니다.
	 */
	.dug-founder-row > div:first-child {
		display: block;
		order: 2;               /* 인물 - 아래 */
	}
	.dug-founder-row > div:last-child {
		order: 1;               /* 글 - 위 */
	}
	.dug-founder-photo {
		width: 100%;
		margin-left: 0;
		margin-top: 20px;
		/* 띠를 덮는 양 (좁은 화면) : -58 → -43 → -48 → -51 → -21 → -10px.
		   지금은 데스크톱과 같은 값입니다(운영자 확인).
		   ※ 값이 같아도 규칙은 남겨둡니다 - 좁은 화면에서는 인물도 가운데 정렬이라
		     띠 글자와 부딪히기 쉬워, 따로 조절할 자리가 필요합니다. */
		margin-bottom: -10px;
	}

	/* 비교용 페이지(founder1)의 예전 사진 - 좁은 화면도 교체 직전 값으로 */
	.dug-founder-photo.is-legacy-photo {
		margin-bottom: -51px;
	}

	.dug-founder-photo img {
		height: auto;             /* 세로로 쌓이면 상자 높이 기준이 없어집니다 */
		max-width: 380px;
		margin: 0 auto;
	}

	/* 띠 글자는 화면 가운데로 되돌립니다 */
	.dug-founder-page .dug-slogan-inner { padding-left: 0; }

	/**
	 * 띠 위쪽 여백을 늘립니다.  [2026-08-28]
	 * 좁은 화면에서는 인물도 가운데, 띠 글자도 가운데라서 겹칩니다.
	 * 인물이 내려오는 만큼(58px) 글자를 아래로 밀어 서로 닿지 않게 합니다.
	 * 인물 겹침(margin-bottom)을 더 키우면 이 값도 같이 키워주세요.
	 */
	.dug-slogan-band.dug-founder-page { padding-top: 48px; }
	.dug-founder-name { font-size: 38px; }
	.dug-founder-position strong { font-size: 22px; }
	.dug-founder-headline span { font-size: 22px; }
	.dug-belief { margin-bottom: 16px; }
	.dug-career { padding: 26px 0 0; }

	/**
	 * 이 폭부터는 철학/비전이 위아래로 쌓입니다.
	 * 세로 구분선은 의미가 없어져 가로선(윗변)으로 바꿉니다.
	 */
	.dug-founder-blocks > div:nth-child(2) .dug-belief {
		padding-left: 0;
		padding-top: 26px;
		background: none;
		border-top: 1px solid var(--divider-color);
	}

	/* 좁은 화면에서는 로고를 조금 줄입니다 */
	.dug-founder-logo img { width: 175px; max-width: 66%; }
	.dug-founder-logo-sub em { font-size: 13px; }
	.dug-founder-logo-sub::before,
	.dug-founder-logo-sub::after { width: 18px; }
}

@media only screen and (max-width: 575px) {
	.dug-founder-name { font-size: 30px; }
	.dug-founder-headline span { font-size: 19px; }
	.dug-belief { flex-direction: column; gap: 14px; }
}


/* ========================================================================================
 * 25. 회사소개  /company/about
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-40)의 5개 구역을 그대로 섹션으로 나눴습니다.
 *   히어로 → OUR PURPOSE → OUR CORE VALUES(#values) → 슬로건+팀 → GLOBAL NETWORK
 * '경영철학' 메뉴가 #values 앵커로 들어오므로 그 섹션의 id 를 지우지 말아주세요.
 * ======================================================================================== */

/**
 * 히어로 : 전폭 배너 위에 글 얹기  [2026-08-28 재구성]
 * ----------------------------------------------------------------------------------------
 * 원본 시안은 배너 사진 한 장 위에 왼쪽으로 글이 올라간 한 덩어리입니다.
 *
 * 높이 : 배너 원본 비율(1024:511)대로 화면 폭에 맞춰 잡습니다.
 *        min() 으로 720px 상한을 둔 이유는, 아주 넓은 모니터에서 히어로가
 *        1000px 가까이 커지는 것을 막기 위함입니다. 상한에 걸리면 cover 가
 *        위아래를 조금 잘라냅니다.
 * 배경 : 두 장(배경/인물)을 같은 규칙으로 겹칩니다. 배경 이미지의 인물 자리가
 *        흐리게 지워져 있어서, 두 장이 어긋나면 그 흐린 자리가 드러납니다.
 *        그래서 두 img 에 완전히 같은 object-fit/position 을 씁니다.
 * 글 가독성 : 왼쪽을 흰색으로 덮는 그라디언트를 한 겹 올립니다(::after).
 *        시안에서도 왼쪽이 하얗게 흐려져 글이 잘 보입니다.
 * -------------------------------------------------------------------------------------- */
.dug-about-hero,
.dug-biz-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: min(calc(100vw * 511 / 1024), 720px);
	padding: 60px 0;
	background: linear-gradient(180deg, var(--secondary-color) 0%, var(--white-color) 100%);
}

.dug-about-hero-bg,
.dug-biz-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.dug-about-hero-bg img,
.dug-biz-hero-bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center bottom;   /* 인물(아래쪽)이 잘리지 않게 아래를 기준으로 */
}

/* 왼쪽을 흰색으로 덮어 글이 잘 보이게 (이미지 두 장보다 위, 글보다 아래) */
.dug-about-hero-bg::after,
.dug-biz-hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0.92) 0%,
		rgba(255, 255, 255, 0.78) 30%,
		rgba(255, 255, 255, 0.25) 50%,
		rgba(255, 255, 255, 0) 64%);
}

.dug-about-hero > .container,
.dug-biz-hero > .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.dug-about-hero-title {
	margin-bottom: 10px;
	color: var(--primary-color);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.15em;
}

.dug-about-hero-slogan {
	margin-bottom: 0;
	color: var(--primary-color);
	font-size: 26px;
	font-weight: 700;
}

.dug-about-hero-desc {
	margin-bottom: 18px;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.8em;
}

.dug-purpose-img img,
.dug-about-slogan-img img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* (히어로 사진카드 규칙은 전폭 배너로 바뀌면서 없앴습니다 - 위 .dug-about-hero-bg 참고) */

/* OUR PURPOSE */
.dug-purpose {
	padding: 90px 0;
	background: var(--white-color);
}

/**
 * 오른쪽 성장 화살표 그래픽  [2026-08-28]
 * 원본 시안에서 본문 오른쪽에 있는 '사람 + 골드 화살표' 그림입니다.
 * (icon/feature-6-growth.png)
 * 글 위로 겹치지 않게 본문에 오른쪽 여백을 주고 그 자리에 얹습니다.
 * 좁은 화면에서는 자리가 없어 숨깁니다(아래 반응형).
 */
.dug-purpose-body {
	position: relative;
	padding-right: 130px;
}

.dug-purpose-mark {
	position: absolute;
	top: 38px;
	right: 0;
	display: block;
	width: 108px;
	line-height: 0;
}

.dug-purpose-mark img {
	width: 100%;
	height: auto;
}

.dug-purpose-title {
	margin-bottom: 22px;
	color: var(--primary-color);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4em;
}

.dug-purpose-body p {
	margin-bottom: 18px;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.85em;
}

.dug-purpose-body p strong {
	color: var(--primary-color);
	font-weight: 700;
}

/* OUR CORE VALUES - 5개라서 5열 그리드로 두고 좁아지면 3 → 2 → 1 로 접습니다 */
.dug-values {
	padding: 90px 0;
	background: var(--secondary-color);
	/* 메뉴 앵커(#values)로 들어올 때 헤더에 가려지지 않게 여유를 둡니다 */
	scroll-margin-top: 110px;
}

.dug-values-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.dug-value-item {
	padding: 30px 18px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	text-align: center;
	transition: all 0.4s ease;
}

.dug-value-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(4, 24, 63, 0.1);
	border-color: var(--accent-color);
}

/* 아이콘 - 동그란 남색 배경까지 이미지에 포함되어 있어 CSS 배경은 걷어냈습니다 */
.dug-value-icon {
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 18px;
}

.dug-value-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dug-value-en {
	margin-bottom: 6px;
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dug-value-kr {
	margin-bottom: 12px;
	color: var(--accent-text);
	font-size: 14px;
	font-weight: 600;
}

.dug-value-text {
	margin: 0;
	color: var(--text-color);
	font-size: 13px;
	line-height: 1.7em;
}

/* 슬로건 + 팀 사진 (좌 텍스트 / 우 사진, 여백 없이 붙임) */
.dug-about-slogan-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	/* [2026-08-28] 글 묶음을 오른쪽으로 옮겼습니다 (왼쪽 여백 40 → 90 → 110) */
	padding: 54px 40px 54px 110px;
}

.dug-about-slogan-text span {
	display: block;
	color: var(--white-color);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.55em;
}

/**
 * '우리의 꿈을 세계로!'  [2026-08-28 필기체로 교체]
 * 예전에는 기울임(italic) 굵은 글씨로 흉내냈습니다. 시안은 붓글씨체입니다.
 * 폰트는 layout/header.php 의 구글폰트 링크에서 받아옵니다(Nanum Brush Script).
 * 필기체는 같은 크기에서 작아 보여서 30px → 42px 로 키웠습니다.
 * 폰트를 못 받아오면 브라우저 기본 필기체로 떨어집니다(cursive).
 */
.dug-about-slogan-em {
	display: block;
	margin-top: 14px;
	color: var(--accent-color);
	font-family: 'Nanum Brush Script', cursive;
	font-size: 42px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.2em;
}

.dug-about-slogan-img {
	height: 100%;
}

.dug-about-slogan-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* GLOBAL NETWORK - 도시 4곳 */
/* [2026-08-28] 섹션 여백 : 80px → 46px → 위쪽만 다시 26px (운영자 확인값).
   위쪽 사진(슬로건 밴드)과 제목 사이가 넓어 보였습니다. 아래는 64px 유지 */
.dug-network {
	padding: 26px 0 64px;
}

/* [2026-08-28] 제목 위아래 간격을 좁혔습니다 (아래 44px → 26px) */
.dug-network-title {
	margin-bottom: 26px;
}

.dug-values-title {
	margin-bottom: 40px;
}

/**
 * 골드 선 제목  ── OUR CORE VALUES ── / ── GLOBAL NETWORK ──
 * [2026-08-28] 두 섹션이 시안에서 같은 모양이라 규칙을 함께 씁니다.
 * (GLOBAL NETWORK 는 흰색이었는데 시안대로 골드로 바꿨습니다)
 */
/**
 * [2026-08-28] .dark-section .section-title h2 (custom.css) 가 흰색으로 덮고 있어서
 * 클래스를 하나 더 붙여 우선순위를 올렸습니다. 그래서 골드가 실제로 적용됩니다.
 */
.dark-section .dug-network-title h2,
.dug-values-title h2,
.dug-network-title h2 {
	color: var(--accent-color);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 제목 좌우의 골드 선 */
.dug-values-title h2::before,
.dug-values-title h2::after,
.dug-network-title h2::before,
.dug-network-title h2::after {
	content: '';
	display: inline-block;
	width: 46px;
	height: 1px;
	margin: 0 18px;
	vertical-align: middle;
	background: var(--accent-color);
}

.dug-network-item {
	text-align: center;
}

.dug-network-img {
	overflow: hidden;
	border-radius: 12px;
	margin-bottom: 14px;
}

.dug-network-img img {
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

.dug-network-item:hover .dug-network-img img {
	transform: scale(1.07);
}

.dug-network-item h4 {
	margin-bottom: 4px;
	color: var(--white-color);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.dug-network-item p {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

/* 도시 4장은 PC 에서 다 보이므로 페이지네이션 점을 숨깁니다 */
.dug-network-slider .swiper-pagination {
	position: static;
	margin-top: 22px;
	display: none;
}

@media only screen and (max-width: 1199px) {
	.dug-values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media only screen and (max-width: 991px) {
	.dug-about-hero,
	.dug-purpose,
	.dug-values { padding: 60px 0; }

	.dug-about-hero-title { font-size: 34px; }
	.dug-about-hero-slogan { font-size: 21px; }
	.dug-purpose-img { margin-bottom: 30px; }

	/**
	 * 좁은 화면  [2026-08-28]
	 * 배너를 배경으로 깔면 글이 길어 사진이 심하게 잘립니다.
	 * 그래서 배경을 흐름 안으로 되돌려 '사진 위 / 글 아래'로 쌓습니다.
	 * 첫 장(배경)이 높이를 만들고 둘째 장(인물)이 그 위에 정확히 겹칩니다.
	 *
	 * 배너를 화면 끝까지 붙였습니다  [2026-08-29 운영자 요청]
	 *   예전에는  padding: 50px 0 0  과  margin-top: 30px  이 페이지헤더와 배너
	 *   사이에 80px 짜리 흰 띠를 만들고 있었습니다. 둘 다 0 으로 되돌렸습니다.
	 *   모서리 둥글리기(16px)도 없애 좌우 끝까지 직사각형으로 붙입니다.
	 *   사업기회 배너에 먼저 같은 요청이 있었고(26절), 회사소개도 같게 맞춥니다.
	 *   (아래 글과의 간격은 건드리지 않았습니다 - 바뀐 것은 배너 위쪽뿐입니다)
	 */
	.dug-about-hero,
	.dug-biz-hero {
		display: block;
		min-height: 0;
		padding: 0;
	}
	.dug-about-hero-bg,
	.dug-biz-hero-bg {
		position: relative;
		inset: auto;
		margin-top: 0;
	}
	.dug-about-hero-bg img:first-child,
	.dug-biz-hero-bg img:first-child {
		position: relative;
		height: auto;
		border-radius: 0;
	}
	.dug-about-hero-bg img + img,
	.dug-biz-hero-bg img + img {
		border-radius: 0;
	}

	/* ------------------------------------------------------------------------------------
	 * 회사소개 - 글 전체를 배너 사진 안으로  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------------
	 * 요청 : "글자 크기를 좀 작게 하면 배너 이미지 안에 다 들어가게 할 수 있을 것 같다"
	 *
	 * 뼈대 (사업기회 배너와 같은 방식입니다 - 26절 참고)
	 *   ① 배너를 흐름에서 빼 칸 전체에 깝니다.
	 *   ② 사진은 자르지 않고(contain) 칸 아래쪽에 붙입니다. 위에 하늘 자리가 생깁니다.
	 *   ③ 그 하늘 자리를 사진 윗변 색을 그대로 이어붙인 그라디언트로 메웁니다.
	 *   ④ 글이 그 위에 앉고, 아래여백으로 인물 자리를 비워둡니다.
	 *
	 * 높이를 aspect-ratio 로 안 잡은 이유  ← 여기가 핵심입니다
	 *   글자에 min() 상한을 걸어야 해서(아래 참고) 글 높이가 화면 폭에 정비례하지
	 *   않습니다. 그런데 배너 높이를 vw 로 고정하면 375px 에 맞춘 값이 991px 에서는
	 *   1200px 넘는 허공이 됩니다. 그래서 높이를 글에 맡기고, 대신 아래여백으로
	 *   인물 자리만 비워둡니다. 이러면 어느 폭에서도 저절로 맞습니다.
	 *
	 * 아래여백 33.78vw 가 어디서 나왔나 (원본 1024x511, 누끼 알파 실측)
	 *   사진은 contain 이라 높이가 항상 화면 폭의 49.90% 입니다 (= 511/1024).
	 *   인물 머리는 그 사진의 위에서 32.3% 지점부터 시작합니다.
	 *   그러니 칸 아랫변에서 49.90 x (1 - 0.323) = 33.78vw 를 비워두면
	 *   글 아랫줄이 정확히 인물 머리선 위에서 끝납니다. +16px 은 여유입니다.
	 *   글을 더 내리고 싶으면 이 숫자를 줄이세요. 줄이는 만큼 인물에 가까워집니다.
	 * ---------------------------------------------------------------------------------- */
	.dug-about-hero {
		position: relative;
	}

	.dug-about-hero .dug-about-hero-bg {
		position: absolute;
		inset: 0;
		margin: 0;
		/**
		 * 사진 위쪽에 이어붙일 하늘색
		 * banner2-bg.png 맨 윗줄 색을 10% 간격으로 실측해 그대로 옮긴 값입니다.
		 * 단색으로 칠하면 사진 윗변에서 이음매가 드러납니다
		 * (왼쪽 #DBDFE5 부터 오른쪽 #085C97 까지 색이 크게 변합니다).
		 */
		background: linear-gradient(90deg,
			#DBDFE5 0%,  #D3DCE4 10%, #BFCFDE 20%, #A9BFD6 30%,
			#92B1D0 40%, #71A0CA 50%, #3F85BD 60%, #2978B6 70%,
			#0F64A3 80%, #085E9F 90%, #085C97 100%);
	}

	/*
	 * 두 장(배경·인물)에 같은 규칙을 걸어야 정확히 포개집니다.
	 * 선택자에 .dug-about-hero 를 붙인 건 위 공용 규칙(명시도 0,2,1)을 이기기
	 * 위해서입니다. 클래스 하나짜리로 쓰면 밀려서 두 장이 어긋납니다.
	 */
	.dug-about-hero .dug-about-hero-bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
		border-radius: 0;
	}

	/**
	 * 글 자리에 흰 막을 한 겹 덮어 글자가 읽히게 합니다.
	 * 하늘 오른쪽이 진한 파랑(#085C97)이라, 막이 없으면 남색 글자가 배경에 묻힙니다.
	 * 84% 아래로는 완전히 투명해서 인물과 노을은 원래 색 그대로 보입니다.
	 * (PC 는 이 막을 왼쪽→오른쪽 방향으로 씁니다 - 25절 위쪽 공용 규칙 참고)
	 */
	.dug-about-hero .dug-about-hero-bg::after {
		display: block;
		/*
		 * 끝점을 84% → 88% 로 늘렸습니다  [2026-08-29 사진을 50px 올리면서]
		 * 사진이 올라온 만큼 글 마지막 줄이 머리 쪽으로 내려갔습니다.
		 * 막이 거기까지 닿아야 글자가 읽힙니다. 얼굴은 88% 아래라 원래 색 그대로입니다.
		 */
		background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.90) 0%,
			rgba(255, 255, 255, 0.88) 62%,
			rgba(255, 255, 255, 0.62) 76%,
			rgba(255, 255, 255, 0) 88%);
	}

	/**
	 * 글 덩어리 - 위는 살짝 띄우고, 아래는 인물 자리를 비웁니다.
	 * 이 아래여백이 배너 높이를 결정합니다. 위 절 머리말의 33.78vw 설명을 보세요.
	 *
	 * 세 항의 뜻  [2026-08-29]
	 *   33.78vw   가장 높은 머리(가로 70% 지점, 사진 위 32.3%)가 시작하는 선
	 *   +16px     그 선까지의 여유
	 *   -50px     운영자 요청으로 사진을 50px 위로 올린 값 ← 여기만 고치면 됩니다
	 *
	 * 50px 을 올리면 글 마지막 줄이 머리선 아래로 내려갑니다. 얼마나 내려가는지
	 * 실측하면 화면 폭에 따라 14~28px 입니다(좁을수록 많이 겹칩니다).
	 *   375px 26px 겹침   768px 18px 겹침   991px 14px 겹침
	 * 마지막 줄이 'Dream Up Global의 비전입니다.' 라 짧아서 가로 50% 까지만 뻗고,
	 * 그 지점의 머리선은 사진 위 36.4% 라 32.3% 보다 아래입니다. 그래서 실제로는
	 * 계산보다 덜 겹칩니다. 겹치는 자리는 아래 흰 막이 덮어 글자는 읽힙니다.
	 *
	 * 안 겹치게 하려면 -50px 을 -24px 로 줄이세요. 그게 겹침 0 인 최대치입니다.
	 */
	.dug-about-hero-text {
		padding-top: 5vw;
		padding-bottom: calc(33.78vw + 16px - 50px);
	}

	/**
	 * 글자 크기 - vw 로 두되 min() 으로 상한을 겁니다.
	 *
	 * vw 인 이유    사진 높이가 화면 폭에 비례하므로, 글자만 고정 px 이면
	 *               좁은 화면에서 글이 인물 위로 내려앉습니다.
	 * 상한이 필요한 이유
	 *               991px 쪽 끝에서 vw 만 쓰면 제목이 74px 까지 커져
	 *               'DREAM UP GLOBAL' 이 컨테이너(720px)를 넘어 두 줄이 됩니다.
	 *               52px 에서 멈추면 515px 이라 한 줄로 유지됩니다.
	 */
	.dug-about-hero-head .dug-eyebrow {
		margin-bottom: 1.6vw;
		font-size: min(3.4vw, 20px);
	}

	.dug-about-hero-head .dug-about-hero-title {
		margin-bottom: 1.8vw;
		font-size: min(7.5vw, 52px);
		line-height: 1.15em;
	}

	.dug-about-hero-head .dug-about-hero-slogan {
		font-size: min(4.6vw, 30px);
	}

	.dug-about-hero-head .dug-rule {
		width: 14vw;
		max-width: 56px;
		margin: 3.4vw 0 4vw;
	}

	/**
	 * 본문  [2026-08-29 운영자 요청 : 작게]
	 * 16px → 3.3vw(상한 15px). 375px 화면에서 12.4px, 320px 화면에서 10.6px 입니다.
	 * 가장 긴 줄이 약 26.3em('공유하는 새로운 글로벌 비즈니스 문화를 만들어 갑니다.')
	 * 이라, 가장 좁은 320px 화면에서도 278px 이라 컨테이너(290px)에 한 줄로 들어갑니다.
	 * 16px 그대로면 421px 이라 줄이 넘어가 아홉 줄이 열두 줄로 늘어났습니다.
	 * 줄간격도 1.8 → 1.7 로 좁혀 전체 높이를 한 번 더 줄였습니다.
	 *
	 * 혹시 줄이 넘어가도 배너가 그만큼 같이 길어집니다 - 높이를 글에 맡겼기 때문입니다.
	 * 글이 인물 위로 올라타는 일은 없습니다.
	 */
	.dug-about-hero-body .dug-about-hero-desc {
		margin-bottom: 3vw;
		font-size: min(3.3vw, 15px);
		line-height: 1.7em;
	}

	.dug-about-hero-body .dug-about-hero-desc:last-child {
		margin-bottom: 0;
	}
	.dug-about-hero-bg::after,
	.dug-biz-hero-bg::after { display: none; }

	/* 성장 화살표는 자리가 없어 숨기고, 본문 오른쪽 여백도 되돌립니다 */
	.dug-purpose-body { padding-right: 0; }
	.dug-purpose-mark { display: none; }
	.dug-purpose-title { font-size: 24px; }
	/**
	 * 슬로건 밴드 - 좁은 화면에서도 글과 사진을 한 줄에  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * 마크업은 col-lg-4(글) + col-lg-8(사진) 이라 992px 아래에서는 둘 다 전폭이 되어
	 * 위아래로 쌓였습니다. 여기서 폭을 다시 지정해 나란히 세웁니다.
	 * (부트스트랩의 col-lg-* 는 992px 이상에서만 폭을 잡으므로, 그 아래에서는
	 *  .row > * 의 width:100% 가 남습니다. 그 값을 덮는 것이 아래 두 줄입니다)
	 *
	 * 39 : 61 로 나눈 이유  [2026-08-29 "글자와 사진 사이 틈을 줄여줘"]
	 *   46:54 → 41:59 → 39:61 로 세 번 좁혔습니다.
	 *   글 칸이 좁아진 만큼 글씨도 3.4 → 2.95 → 3.04vw 로 같이 움직였습니다.
	 *   (마지막엔 오히려 키웠습니다. 줄이 길어져야 칸을 채워 틈이 줄어듭니다)
	 *
	 * 틈이 왜 생겼나
	 *   틈 = 글 칸 폭 - 가장 긴 줄 - 왼쪽 여백 입니다.
	 *   글씨가 작으면 줄이 짧아 칸 오른쪽이 남고, 그 남는 자리가 통째로
	 *   글과 사진 사이의 빈 남색으로 보입니다. 493px 화면에서 30px 이었습니다.
	 *
	 * 좌우 여백을 px 이 아니라 vw 로 바꾼 것이 핵심입니다
	 *   px 여백은 좁은 화면에서 비중이 커집니다. 그래서 320px 에 맞추면 493px 에서
	 *   틈이 벌어지고, 493px 에 맞추면 320px 에서 줄이 넘쳤습니다.
	 *   여백까지 vw 로 두면 글 칸·여백·글씨가 모두 같은 비율로 움직여
	 *   어느 폭에서나 틈이 화면 폭의 2.6% 로 일정하게 유지됩니다.
	 *
	 * 실측 (틈)  320px 8px · 375px 10px · 493px 13px · 575px 15px
	 *            예전에는 각각 15 · 20 · 30 · 37px 이었습니다.
	 *
	 * 사진은 object-fit:cover 라 칸 높이에 맞춰 좌우가 잘립니다.
	 * 넓힐수록 덜 잘려 인물이 더 많이 보입니다.
	 */
	.dug-about-slogan .col-lg-4 {
		flex: 0 0 auto;
		width: 39%;
	}

	.dug-about-slogan .col-lg-8 {
		flex: 0 0 auto;
		width: 61%;
	}

	/**
	 * 글 묶음
	 * 좌우 여백을 vw 로 둔 이유는 위 절 머리말을 보세요. 이게 틈을 잡는 장치입니다.
	 *
	 * 글씨 3.04vw 는 375px 화면에서 11.4px, 493px 에서 15px 입니다.
	 * 상한 24px 은 768px 태블릿에서 딱 채워지는 값이라 그대로 두면 됩니다.
	 * (vw 만 쓰면 991px 에서 30px 까지 커지고, 고정 px 만 쓰면 좁은 화면에서
	 *  줄이 넘어갑니다. 두 가지를 min() 으로 묶은 이유입니다)
	 *
	 * 위 39%/61% 를 고칠 때는 아래 3.04vw 도 같은 방향으로 함께 고쳐야 합니다.
	 * 글 칸만 줄이면 줄이 넘치고, 글씨만 줄이면 틈이 다시 벌어집니다.
	 */
	.dug-about-slogan-text {
		padding: 24px 1.6vw 24px 3vw;
	}

	.dug-about-slogan-text span {
		font-size: min(3.04vw, 24px);
		line-height: 1.55em;
	}

	/* 붓글씨는 같은 크기에서 좁게 보여 본문보다 큰 값을 씁니다 */
	.dug-about-slogan-em {
		margin-top: 2.4vw;
		font-size: min(4.1vw, 32px);
	}
	.dug-network-slider .swiper-pagination { display: block; }
}

@media only screen and (max-width: 767px) {
	.dug-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dug-values-title h2,
	.dug-network-title h2 { font-size: 23px; }
	.dug-network-title h2::before,
	.dug-network-title h2::after { width: 24px; margin: 0 10px; }
}

@media only screen and (max-width: 479px) {
	.dug-values-grid { grid-template-columns: minmax(0, 1fr); }
	.dug-about-hero-title { font-size: 27px; }
}

/* ========================================================================================
 * 26. 사업기회  /business/opportunity
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-19) 구조 : 히어로 → 네이비 4강점 밴드 → 5단계 시스템 → WHY → 클로징
 * 5단계 시스템은 23절의 .dug-system-flow 를 그대로 씁니다.
 * ======================================================================================== */

.dug-biz-hero {
	padding: 90px 0;
	background: linear-gradient(180deg, var(--secondary-color) 0%, var(--white-color) 100%);
}

/**
 * 히어로 배경을 자르지 않고 원본 그대로 보여줍니다  [2026-08-29 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 무엇이 문제였나
 *   (1) 공용 규칙의 min-height 가  min(100vw*511/1024, 720px)  이라 넓은 화면에서
 *       720px 에 걸리고, cover 가 위아래를 잘라 지구 네트워크 윗부분이 날아갔습니다.
 *   (2) 글 가독성용 흰 막(.dug-biz-hero-bg::after)이 왼쪽을 92% 로 덮어서,
 *       정작 왼쪽 아래에 있는 노을과 도시가 회색 유령처럼 지워졌습니다.
 *
 * 어떻게 고쳤나
 *   aspect-ratio 를 원본 비율(1022x496)에 딱 맞춥니다. 칸과 사진의 비율이 같아지면
 *   cover 가 잘라낼 것이 없어져서 배경이 어느 화면 폭에서도 통째로 보입니다.
 *   대신 화면이 넓어지면 히어로도 같이 높아집니다(1920px 에서 약 932px).
 *   '배경이 풀로 보이게' 해달라는 요청이라 높이 상한을 두지 않았습니다.
 *   상한을 다시 두면 그만큼 위아래가 잘립니다.
 *
 *   흰 막은 껐습니다. 원본 왼쪽 밝기를 실측하니 글이 앉는 영역이 휘도 190~249 로,
 *   남색 글자와 대비가 8:1 을 넘어 막 없이도 읽힙니다.
 *   되살리려면 아래 display:none 한 줄만 지우면 공용 그라디언트가 돌아옵니다.
 *
 * 제목이 두 줄('BUSINESS' / 'OPPORTUNITY')로 떨어지는 것을 전제한 높이입니다.
 * 회사소개(.dug-about-hero)는 사진이 달라서 예전 방식 그대로 둡니다.
 */
.dug-biz-hero {
	aspect-ratio: 1022 / 496;
	min-height: 0;
	padding: 0;
	background: none;
}

.dug-biz-hero-bg::after {
	display: none;
}

/**
 * 인물 슬라이드 인  [2026-08-29 운영자 요청]
 * 배경은 가만히 있고 인물(누끼)만 오른쪽에서 미끄러져 들어옵니다.
 *
 * WOW.js 가 아니라 순수 CSS 인 이유
 *   히어로는 첫 화면이라 스크롤 감지가 필요 없고, JS 가 늦게 붙어도
 *   애니메이션이 반드시 끝까지 갑니다. fill-mode both 라서 시작 전에는
 *   투명하고 끝나면 제자리에 그대로 남습니다.
 *
 * 10% 만 미는 이유
 *   배경 사진은 인물 자리가 흐리게 지워져 있습니다. 크게 밀면 인물이
 *   비켜난 동안 그 흐린 자국이 드러납니다. 10% + 페이드가 그 경계입니다.
 */
.dug-biz-hero-people {
	animation: dugBizHeroPeopleIn 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

@keyframes dugBizHeroPeopleIn {
	from {
		opacity: 0;
		transform: translateX(10%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 움직임을 줄여달라고 설정한 사용자에게는 그냥 처음부터 제자리에 둡니다 */
@media (prefers-reduced-motion: reduce) {
	.dug-biz-hero-people { animation: none; }
}

/**
 * 히어로 제목  [2026-08-29 운영자 요청 - 두 줄 고정 + 키움]
 * 줄바꿈은 CSS 가 아니라 opportunity.php 의 <br> 이 합니다. 여기서는 크기만 봅니다.
 * 46px → 60px. col-lg-6 안쪽 폭이 546px 인데 'OPPORTUNITY' 한 단어가 약 6.8em
 * 이라 60px 에서 408px 입니다. 79px 을 넘기면 그 한 단어가 칸을 벗어납니다.
 */
.dug-biz-hero-title {
	margin-bottom: 14px;
	color: var(--primary-color);
	font-size: 60px;
	font-weight: 700;
	line-height: 1.12em;
}

.dug-biz-hero-tagline {
	margin-bottom: 20px;
	color: var(--accent-text);
	font-size: 21px;
	font-weight: 600;
}

.dug-biz-hero-desc {
	margin: 0;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.85em;
}

/* (사업기회 히어로는 전폭 배너로 바뀌었습니다 - 위 .dug-biz-hero-bg 참고.
   아래 규칙은 소셜셀링 페이지 사진카드에서 계속 씁니다) */
.dug-social-hero-img img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

/* 네이비 4강점 밴드 */
.dug-point-band {
	padding: 54px 0;
}

.dug-point-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.dug-point-item {
	padding: 0 22px;
	text-align: center;
	/* 목업처럼 항목 사이에 얇은 세로 구분선 */
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.dug-point-item:first-child {
	border-left: 0;
}

/* 아이콘 - 흰 테두리 원까지 이미지에 포함되어 있어 CSS 테두리는 걷어냈습니다 */
.dug-point-icon {
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 16px;
}

.dug-point-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dug-point-item h4 {
	margin-bottom: 8px;
	color: var(--white-color);
	font-size: 20px;
	font-weight: 700;
}

.dug-point-item p {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.65em;
}

/* 5단계 시스템 섹션 */
.dug-system {
	padding: 90px 0;
	background: var(--white-color);
}

.dug-system-sub {
	margin-top: 10px;
	margin-bottom: 0;
	color: var(--text-color);
	font-size: 16px;
}

/**
 * WHY DREAM UP GLOBAL?   [2026-08-29 전폭 배너 + 글 얹기로 전면 교체]
 * ----------------------------------------------------------------------------------------
 * section-office.png 은 1022x261 한 장인데 왼쪽 x=520 까지만 하이파이브 사진이고
 * 오른쪽 절반은 처음부터 비어 있는 밝은 창가입니다(픽셀 실측).
 * 원래 그 빈자리에 글을 얹으라고 만들어진 배너라서, 반쪽 칸에 우겨넣지 않고
 * 화면 폭 100% 로 깔고 오른쪽 빈자리에 글을 올립니다.
 *
 * 그래서 없어진 것
 *   - 사진 자르기(object-fit: cover) : 원본 비율 그대로 100% 로 깝니다
 *   - 오른쪽 흰 여백 : 그 자리가 이제 글자리입니다
 *   - 파란 패널 배경(--secondary-color) : 운영자 요청으로 뺐습니다
 */
.dug-why-banner {
	position: relative;
}

/* 원본 비율(1022x261) 그대로. 이 이미지가 섹션 높이를 정합니다 */
.dug-why-banner-img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * 사진 위에 얹는 글
 * left 51% - 사람이 x=520/1022 = 50.9% 에서 끝납니다. 이 값을 더 줄이면
 *            글자가 맨 오른쪽 사람 위로 올라탑니다.
 * 글자 크기를 vw 로 잡은 이유 - 배너 높이가 화면 폭에 비례해서 같이 변하는데
 *            글자만 고정 px 이면 좁은 화면에서 배너 밖으로 넘칩니다.
 *            clamp 의 최소값은 992px 화면에서도 들어가도록 잡은 값입니다.
 *
 * 왼쪽 여백의 +80px  [2026-08-29 운영자 요청, 50px → 80px]
 *   사람에서 조금 더 떼어달라고 해서 왼쪽으로만 80px 밀어둔 값입니다.
 *   % 가 아니라 고정 px 이라 화면 폭이 달라져도 항상 50px 입니다.
 *   더 밀거나 당기려면 이 숫자만 바꾸면 됩니다(오른쪽 끝은 그대로).
 *   991px 아래에서는 글이 사진 밑으로 내려가면서 이 padding 자체가
 *   통째로 덮어써지므로 모바일에는 영향이 없습니다.
 */
.dug-why-banner-text {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 51%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 3% 0 calc(2% + 80px);
}

.dug-why-title {
	margin-bottom: clamp(14px, 1.7vw, 30px);
	color: var(--primary-color);
	font-size: clamp(20px, 2.1vw, 38px);
	font-weight: 700;
	line-height: 1.25em;
}

.dug-why-list,
.dug-smart-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dug-why-list li,
.dug-smart-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 1.6em;
}

/* 체크 아이콘 - 시안은 남색 동그라미입니다  [2026-08-28 골드 → 남색] */
.dug-why-list li i {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--primary-color);
	font-size: 17px;
}

.dug-why-list li span {
	color: var(--text-color);
}

/* 배너 위에 얹히므로 목록도 배너 폭을 따라 커집니다 (공용 .dug-smart-list 는 그대로) */
.dug-why-list li {
	margin-bottom: clamp(8px, 1vw, 18px);
	font-size: clamp(13px, 1.12vw, 19px);
}

.dug-why-list li:last-child {
	margin-bottom: 0;
}

.dug-why-list li i {
	font-size: clamp(13px, 1.15vw, 19px);
}

@media only screen and (max-width: 1199px) {
	.dug-point-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dug-point-item {
		padding: 22px;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}
	.dug-point-item:nth-child(1),
	.dug-point-item:nth-child(2) { border-top: 0; }
}

@media only screen and (max-width: 991px) {
	/**
	 * 좁은 화면에서도 글을 '배경 안 왼쪽'에 얹습니다  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * 예전에는 여기서 히어로를 display:block 으로 풀어, 사진이 위 / 글이 아래로
	 * 떨어지게 해뒀습니다(31절 공용 규칙). 운영자가 데스크톱처럼 글이 사진 안에
	 * 들어가야 한다고 해서 사업기회만 되돌립니다. 회사소개는 그대로 둡니다.
	 *
	 * 공백이 없어지는 이유
	 *   공용 규칙의  padding: 50px 0 0  과  .dug-biz-hero-bg 의 margin-top: 30px
	 *   이 페이지헤더와 배너 사이에 흰 띠를 만들고 있었습니다. 둘 다 0 으로
	 *   되돌리고 사진의 border-radius 16px 도 없애 화면 끝까지 붙입니다.
	 *
	 * aspect-ratio 를 원본(1022/496 = 2.06)보다 세로로 키운 이유
	 *   폭이 좁으면 원본 비율 그대로는 배너가 너무 납작해서(375px 화면에서 182px)
	 *   글 네 덩어리가 안 들어갑니다. 칸을 세로로 키우면 cover 가 좌우를 조금
	 *   잘라내는 대신 글자리가 생깁니다. 1022/560 은 375px 화면에서 좌우 11%
	 *   정도만 잘리는 값이라 노을도 인물도 대부분 남습니다.
	 *
	 * 글자 크기는 vw 로 - 배너 높이가 화면 폭에 비례하므로 글자만 고정 px 이면
	 * 좁은 화면에서 배너 밖으로 넘칩니다.
	 */
	.dug-biz-hero {
		display: flex;
		align-items: flex-start;      /* 가운데가 아니라 위쪽에 붙입니다 */
		/*
		 * 700 → 620 → 585  [2026-08-29 운영자 요청 : 전체 위로, 이어서 사진 30px 더]
		 * 뒷숫자가 칸 높이입니다. 사진은 폭에 맞춰 들어가므로(contain) 이 숫자를
		 * 줄이면 사진 위 하늘만 줄어들고 사진 크기는 그대로입니다.
		 * 아래 .dug-biz-hero-text 의 padding-top 과 같은 양(약 60px)만큼 줄여야
		 * 글과 사진이 함께 올라옵니다. 한쪽만 줄이면 글이 사진에 붙습니다.
		 */
		aspect-ratio: 1022 / 585;
		min-height: 0;
		padding: 0;

		/**
		 * 사진 위쪽에 이어붙일 하늘색  [2026-08-29]
		 * banner-bg.png 맨 윗줄 색을 10% 간격으로 실측해 그대로 옮긴 값입니다.
		 * 사진이 칸 아래쪽에 붙고 위에 빈 자리가 생기는데, 이 그라디언트가
		 * 그 자리를 메워 하늘이 그대로 이어진 것처럼 보이게 합니다.
		 * 단색으로 칠하면 사진 윗변에서 이음매가 드러납니다
		 * (왼쪽 #F6F8FA 부터 오른쪽 #2B78B6 까지 색이 크게 변합니다).
		 */
		background: linear-gradient(90deg,
			#F6F8FA 0%,  #E8ECF0 10%, #D6E1EC 20%, #BDD0E3 30%,
			#A9C3DE 40%, #95B8D9 50%, #8BB1D5 60%, #76A3CE 70%,
			#578EC2 80%, #3F7EB9 90%, #2B78B6 100%);
	}

	.dug-biz-hero-bg {
		position: absolute;
		inset: 0;
		margin-top: 0;
	}

	/**
	 * 사진은 자르지 않고 통째로, 칸 아래쪽에 붙입니다  [2026-08-29 운영자 요청]
	 * ------------------------------------------------------------------------------
	 * 왜 cover 를 버렸나
	 *   좌우를 자르면 오른쪽 인물이 잘려 나갑니다. '인물이 다 나오게' 해달라고
	 *   해서 contain 으로 바꿨습니다. 폭에 맞춰 통째로 들어가고 세로로 남는
	 *   자리는 위쪽에 생기며, 그 자리는 위 background 하늘색이 메웁니다.
	 *
	 * 이 구조가 세 가지를 한꺼번에 풉니다
	 *   - 인물 아홉 명이 다 보입니다 (자르지 않으므로)
	 *   - 인물이 작아 보입니다 (칸이 세로로 길어져 사진이 차지하는 비중이 줄어듦)
	 *   - 글자리가 생깁니다 (사진 위 빈 하늘)
	 *
	 * 두 장(배경·인물)에 같은 규칙을 걸어야 정확히 포개집니다.
	 * 선택자에 .dug-biz-hero 를 붙인 건 31절 공용 규칙(명시도 0,2,1)을 이기기
	 * 위해서입니다. 클래스 하나짜리로 쓰면 밀려서 두 장이 어긋납니다.
	 */
	.dug-biz-hero .dug-biz-hero-bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom center;
		border-radius: 0;
	}

	/**
	 * 글 덩어리 - 사진 위 빈 하늘에 앉힙니다
	 *
	 * 인물을 피하는 기준 (누끼 알파 실측, 원본 1022x496)
	 *   인물은 가로 40.1% 지점부터 시작하고, 머리 높이는 열마다 다릅니다.
	 *     가로 43% 까지 - 머리가 사진 높이의 74% 아래
	 *     가로 47~51%   - 54% 아래
	 *     가로 55% 부터 - 38% 아래 (여기부터 키 큰 사람들)
	 *   글이 이 선 위에서 끝나면 겹치지 않습니다.
	 *
	 * max-width 를 키우거나 padding-top 을 키우면 글이 그 선을 넘어
	 * 다시 인물 위로 올라탑니다. 둘은 같이 봐야 합니다.
	 */
	.dug-biz-hero-text {
		max-width: 42%;
		/*
		 * padding-top 16%  [2026-08-29 글을 아래로]
		 * 글 높이는 폭의 23.8%(제목 두 줄+태그라인+본문 세 줄)이고,
		 * 42% 폭 아래에서 가장 낮은 머리선은 칸 높이 기준 56.1% 입니다
		 * (하늘을 1022/560 → 1022/700 으로 키워 그만큼 내려갔습니다).
		 * 지금 글 아랫변은 768px 화면에서 356px, 머리선은 431px 이라 여유가 있습니다.
		 *
		 * +50px 은 고정값이라 화면이 좁을수록 비중이 커집니다. 더 내리려면
		 * 이 숫자와 함께 위 aspect-ratio 뒷숫자도 같이 키워야 안 겹칩니다.
		 */
		/*
		 * +50px → -10px  [2026-08-29 운영자 요청 : 위쪽 공백이 크다]
		 * 화면 폭에 상관없이 60px 씩 위로 올라갑니다.
		 * (494px 화면에서 125px → 65px, 375px 에서 106px → 46px)
		 * 더 올리려면 이 -10px 만 더 줄이세요. 16% 는 폭에 비례하는 부분이라
		 * 건드리면 화면 폭마다 다르게 움직입니다.
		 */
		padding-top: calc(16% - 10px);
		padding-left: 4%;
		/*
		 * 왼쪽으로 20px  [2026-08-29 운영자 요청]
		 * 컨테이너 기본 여백(12px) + 위 padding-left 를 상쇄해 화면 끝 쪽으로
		 * 당깁니다. padding 은 음수가 안 되고 calc 로 빼면 0 에서 잘리므로
		 * 음수 margin 을 씁니다. 히어로에 overflow:hidden 이 있어 화면이
		 * 옆으로 밀리지는 않습니다. 더 당기려면 이 숫자만 키우세요.
		 */
		margin-left: -20px;
	}

	/**
	 * 제목은 항상 두 줄('BUSINESS' / 'OPPORTUNITY')  [2026-08-29 운영자 요청]
	 * 예전에는 max-width: 9em 으로 폭을 좁혀 줄이 바뀌게 했지만, 이제는
	 * opportunity.php 에서 <br> 로 직접 끊습니다. 폭에 기대지 않으니 규칙을 뺐습니다.
	 *
	 * 4.6vw → 5.4vw 로 키웠습니다  [2026-08-29 '글씨 크게']
	 * 'OPPORTUNITY' 한 단어가 약 6.8em 이라 이 범위의 제일 넓은 991px 화면에서
	 * 364px 이 되고, 글 칸(.dug-biz-hero-text max-width 42% = 302px)을 조금 넘습니다.
	 * 오른쪽으로 넘치는 만큼은 인물 머리 위 하늘이라 겹치지 않습니다.
	 * 더 키우려면 인물 왼쪽 끝(가로 40.1%)까지 남은 자리를 먼저 재세요.
	 */
	.dug-biz-hero-title {
		margin-bottom: 1.6%;
		font-size: 5.4vw;
		line-height: 1.08em;
	}

	.dug-biz-hero-tagline {
		margin-bottom: 1.4%;
		font-size: 1.95vw;
	}

	.dug-biz-hero-desc {
		font-size: 1.75vw;
		line-height: 1.7em;
	}

	.dug-system { padding: 60px 0; }
	/**
	 * 좁은 화면 - 글을 사진 위에서 내립니다  [2026-08-29]
	 * 배너 높이는 화면 폭의 25.5% 라서(1022x261) 991px 아래에서는
	 * 오른쪽 빈자리에 네 줄이 다 안 들어갑니다. English 로 바꾸면 줄이
	 * 늘어나 더 빨리 넘칩니다. 그래서 사진은 전폭으로 두고 글만 내립니다.
	 */
	.dug-why-banner-text {
		position: static;
		padding: 34px 20px 40px;
	}
	.dug-why-title { font-size: 24px; }
	.dug-why-list li { font-size: 15px; margin-bottom: 12px; }
	.dug-why-list li i { font-size: 16px; }
}

@media only screen and (max-width: 575px) {
	.dug-point-grid { grid-template-columns: minmax(0, 1fr); }
	.dug-point-item:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.16); }

	/*
	 * 휴대폰 - 배너를 조금 더 세로로 키워 글자리를 넓힙니다  [2026-08-29]
	 * 1022/680 은 375px 화면에서 높이 250px 이 되는 값입니다.
	 * 더 키우면 글자는 커지지만 좌우가 그만큼 더 잘려 노을이 사라집니다.
	 */
	/**
	 * 휴대폰 - 칸을 더 세로로 늘려 하늘 자리를 넓힙니다  [2026-08-29]
	 * 1022/1000 이면 칸 높이가 폭의 97.9%, 사진이 48.5% 라
	 * 위쪽에 폭의 49.3% 만큼 하늘 자리가 생깁니다.
	 * (글을 내려달라고 할 때마다 이 뒷숫자를 같이 키웠습니다 770 → 860 → 1000.
	 *  하늘을 안 키운 채 글만 내리면 본문이 인물 머리에 걸립니다.
	 *  특히 +50px 같은 고정값은 375px 화면에서 비중이 커서 금방 닿습니다)
	 * 사진은 그대로(자르지 않음)라 인물 아홉 명이 다 보이고,
	 * 칸이 길어진 만큼 인물이 차지하는 비중은 줄어듭니다.
	 *
	 * 하늘 자리가 넓어져 글도 62% 폭에 큰 글씨로 쓸 수 있습니다.
	 * (좁은 화면에서 42% 폭으로 줄이면 본문이 7px 아래로 떨어져 못 읽습니다)
	 */
	/*
	 * 1000 → 876 → 814  [2026-08-29 운영자 요청 : 사진을 30px 더 위로]
	 * 뒷숫자를 줄이면 칸이 짧아지고, 사진은 칸 아래쪽에 붙어 있으므로(contain +
	 * object-position:bottom) 글에 대해 그만큼 위로 올라옵니다.
	 * 876 → 814 는 494px 화면에서 정확히 30px 입니다(폭에 비례하므로 320px 에서는
	 * 19px, 575px 에서는 35px 올라갑니다).
	 *
	 * 여기가 한계입니다  ← 더 줄이기 전에 읽어주세요
	 *   본문 마지막 줄 '성공의 가치를 공유하는 글로벌 사업 기회입니다.' 는 가로 59%
	 *   까지 뻗고, 그 지점의 머리선은 사진 높이의 38% 입니다(누끼 실측).
	 *   지금 글 아랫변과 그 머리선 사이가 화면 폭별로 0~5px 밖에 안 남습니다.
	 *     320px 5px · 375px 4px · 494px 1px · 575px -3px(살짝 닿음)
	 *   여유를 두려면 814 를 826 쯤으로 되돌리세요(약 6px 내려갑니다).
	 */
	.dug-biz-hero { aspect-ratio: 1022 / 814; }
	/*
	 * 375px 화면 기준 - 글 아랫변 231px, 62% 폭 아래 가장 낮은 머리선 254px.
	 * 23px 여유가 남습니다. 여기서 더 내리면 aspect-ratio 도 같이 키우세요.
	 */
	.dug-biz-hero-text    { max-width: 62%; padding-top: calc(16% - 10px); padding-left: 4%; margin-left: -20px; }
	.dug-biz-hero-title   { margin-bottom: 2.2%; font-size: 7.4vw; }  /* 6.2 → 7.4vw [2026-08-29]. 375px 화면에서 'OPPORTUNITY' 189px, 글 칸 214px 안에 들어갑니다 */
	.dug-biz-hero-tagline { margin-bottom: 2%;   font-size: 2.9vw; }
	.dug-biz-hero-desc    { font-size: 2.6vw; line-height: 1.65em; }
}


/* ========================================================================================
 * 27. 소셜셀링  /business/social
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-57) 구조
 *   히어로 → 아이콘 4개 + 개인링크 안내 밴드 → 4단계 → 사업자/소비자 비교(가운데 폰)
 *   → 5단계 요약 + SMART → 클로징
 * ======================================================================================== */

/**
 * 소셜셀링 히어로 - 전폭 배너  [2026-08-29 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 사업기회 히어로(26절)와 같은 '배경 + 인물 누끼' 2겹 구조입니다.
 * 운영자가 올린 두 장이 같은 캔버스(1024x541)라 그대로 포갤 수 있습니다.
 *   promo-top-bg.png      배경
 *   promo-top-people.png  인물 누끼 + 남색 바 (바까지 그림에 들어 있습니다)
 *
 * aspect-ratio 를 원본 비율(1024/541)에 딱 맞춥니다. 칸과 사진의 비율이 같으면
 * cover 가 잘라낼 것이 없어져서 어느 화면 폭에서도 통째로 보입니다.
 *
 * 인물은 가로 39.0% 지점부터 시작합니다(누끼 알파 실측). 그 왼쪽이 글자리입니다.
 * ======================================================================================== */
.dug-social-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	/*
	 * 541 이 아니라 414 인 이유
	 *   원본 그림에는 아래쪽 남색 띠까지 그려져 있는데, 그 띠는 번역이 되어야 해서
	 *   바로 아래 .dug-social-band 섹션이 HTML 로 다시 그립니다.
	 *   그림의 띠가 시작되는 높이가 541px 중 414px(76.5%) 이라, 거기서 잘라내면
	 *   인물이 시안과 똑같이 허리쯤에서 끊기고 그 자리에 진짜 띠가 이어집니다.
	 *   (아래 object-position: center top 이 '위쪽부터 보여주기'를 담당합니다)
	 */
	aspect-ratio: 1024 / 414;
	padding: 0;
	background: none;
}

.dug-social-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/*
	 * 반드시 있어야 합니다  [2026-08-29]
	 * 인물(.dug-social-hero-people)은 이 상자보다 세로로 깁니다(높이 110.9%).
	 * 그림 아래쪽에 남색 바가 그려져 있는데, 그 부분을 여기서 잘라내야
	 * .dug-social-band 가 그 자리를 대신 그릴 수 있습니다.
	 * 이게 없으면 PC 는 .dug-social-hero 의 overflow 가 대신 막아주지만,
	 * 좁은 화면(1399px 이하)에서는 히어로 높이가 글까지 포함하도록 늘어나기 때문에
	 * 안 막히고, 남색 바가 그대로 흘러나와 'SOCIAL SELLING' 글자를 덮습니다.
	 */
	overflow: hidden;
}

/*
 * 두 장에 완전히 같은 규칙을 걸어야 정확히 포개집니다.
 * 배경의 인물 자리가 흐리게 지워져 있어서, 어긋나면 그 흐린 자국이 드러납니다.
 */
/**
 * 두 장을 왼쪽으로 6% 옮깁니다  [2026-08-29 운영자 요청 : 인물을 조금 더 왼쪽으로]
 * ----------------------------------------------------------------------------------------
 * object-position 으로는 못 옮깁니다
 *   칸 비율(1024/414 = 2.47)이 그림 비율(1024/541 = 1.89)보다 넓어서, cover 가
 *   폭을 기준으로 맞춥니다. 좌우로 넘치는 부분이 아예 없으니 object-position 의
 *   가로값은 아무 일도 하지 않습니다. 그래서 상자 자체를 옮깁니다.
 *
 * left 와 width 를 짝으로 씁니다
 *   left:-6% 로 왼쪽으로 밀고, width:106% 로 그만큼 넓혀 오른쪽 끝이 정확히
 *   칸 오른쪽(-6 + 106 = 100%)에 닿게 합니다. 한쪽만 고치면 반대쪽이 빕니다.
 *   결과로 인물 왼쪽 끝이 39.3% → 35.7% 로 옮겨오고 그림도 6% 커집니다.
 *
 * 두 장(배경·인물)에 반드시 같은 값을 줘야 합니다
 *   배경 그림은 인물이 서 있는 자리가 흐리게 지워져 있습니다. 한 장만 옮기면
 *   그 흐린 자국이 인물 옆에 드러납니다. 그래서 선택자 하나로 둘을 함께 겁니다.
 *
 * 더 옮기려면 6 을 키우고 106 도 같은 만큼 키우세요. 그리고 아래
 * .dug-social-hero-text 의 폭 상한도 함께 줄여야 글이 인물에 안 걸립니다.
 */
/**
 * 배경 - 칸 전체를 덮습니다 (사업기회 히어로 26절과 완전히 같은 방식)
 * ----------------------------------------------------------------------------------------
 * 한때 left:-6%; width:106% 로 그림을 왼쪽으로 밀었는데, 그 변환 때문에 넓은 화면에서
 * 배너 오른쪽에 흰 자리가 생겼습니다. 잘 되고 있는 /business/opportunity 는
 * 아무 변환 없이 inset:0 만 씁니다. 여기도 그대로 맞췄습니다.
 * 인물 위치는 아래 .dug-social-hero-people 의 left 값 하나로만 조절하세요.
 */
.dug-social-hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;   /* 위 aspect-ratio 주석 참고 - 아래 띠를 잘라냅니다 */
}

/**
 * 인물 - 배경 위 정해진 자리에 얹습니다
 * ----------------------------------------------------------------------------------------
 * 배경처럼 inset:0 으로 깔지 않는 이유
 *   promo-top-people-trim.png 은 여백 없이 잘린 파일이라 캔버스가 628x433 입니다.
 *   배경(1024x541)과 크기가 달라서 그냥 겹치면 인물이 늘어나고 자리가 어긋납니다.
 *   그래서 배경 그림 좌표계에서 인물이 있어야 할 사각형을 계산해 앉힙니다.
 *
 * 좌표 (전부 배너 칸 기준입니다. 배경에 변환이 없으니 그림 좌표 = 화면 좌표)
 *
 *   width = 68.3%   인물을 키우고 오른쪽 끝에 붙입니다  [2026-08-29 운영자 요청]
 *                   left 31.7 + width 68.3 = 100 이라 맨 오른쪽 사람이 칸
 *                   오른쪽 변에 딱 닿습니다. 예전에는 92.5% 에서 끝나 오른쪽에
 *                   배경만 7.5% 남았고, 그게 '잘린 듯한 공백'으로 보였습니다.
 *                   오른쪽 끝을 유지하려면 이 둘의 합을 항상 100 으로 맞추세요
 *                   (left = 100 - width). 원본 비율(623/1024=60.8%)보다 12% 큽니다.
 *
 *   left  = 31.7%   운영자 요청으로 두 번 왼쪽으로 옮긴 값
 *                   (원래 자리는 398/1024 = 38.9% 였습니다)
 *
 *   top   = 19.3%   인물을 키운 만큼 위로 올립니다  ← width 와 짝입니다
 *                   아래쪽은 칸 밖으로 나가 잘리는데, 그림의 70% 지점부터
 *                   남색 바라서 '69% 까지만 보이게' 맞춰야 바가 안 드러납니다.
 *                   그 조건이  0.4043 x (1 - top) = 0.4774 x width  이고,
 *                   width 68.3% 를 넣으면 top 19.3% 가 나옵니다.
 *                   (28.2% 그대로 두고 키우면 62% 에서 잘려 손에 든 폰이 날아갑니다)
 *                   width 를 바꾸면 이 식으로 top 도 다시 구하세요.
 *   height 는 auto - 파일 비율(433/628)을 그대로 지켜야 인물이 안 찌그러집니다.
 *
 * 아래쪽이 칸 밖으로 나가는 것은 의도한 것입니다. 그림 아래쪽 남색 바가
 * 잘려나가고 그 자리에 .dug-social-band 가 이어집니다(위 aspect-ratio 주석 참고).
 *
 * 인물을 더 옮기려면 위 배경의 -6/106 과 아래 left/width 를 같은 규칙으로
 * 함께 고쳐야 합니다. 한쪽만 고치면 배경의 흐린 자리와 인물이 어긋납니다.
 */
.dug-social-hero-people {
	position: absolute;
	/*
	 * 35.2% → 31.7%  [2026-08-29 운영자 요청 : 50px 더 왼쪽으로]
	 * 배너가 화면 폭에 비례해 커지므로 px 이 아니라 % 로 환산했습니다.
	 * 3.5% 는 1500px 화면에서 약 52px 입니다. px 로 박으면 좁은 화면에서
	 * 비중이 커져 인물이 왼쪽으로 과하게 쏠립니다.
	 *
	 * 배경은 안 옮겼습니다. 인물만 왼쪽으로 오면 배경의 흐린 자리 경계를
	 * 인물이 덮어주기 때문에 오히려 자연스러워집니다.
	 */
	left: 31.7%;
	top: 19.3%;
	width: 68.3%;
	height: auto;
}

/*
 * 인물 등장 연출은 뺐습니다  [2026-08-29 운영자 요청 : 그 자리에서 그냥 보이게]
 * 예전에는 사업기회 히어로처럼 오른쪽에서 미끄러져 들어왔습니다.
 * 되살리려면 아래 한 줄을 다시 넣으면 됩니다. keyframes 는 26절에 그대로 있고
 * 사업기회 배너가 계속 쓰고 있으니 지우지 마세요.
 *   .dug-social-hero-people { animation: dugBizHeroPeopleIn 1.15s ... both; }
 */

.dug-social-hero > .container {
	position: relative;
	z-index: 2;
	width: 100%;
}


.dug-social-hero-title {
	margin-bottom: 14px;
	color: var(--primary-color);
	font-size: 46px;
	font-weight: 700;
	line-height: 1.12em;
}

.dug-social-hero-tagline {
	margin-bottom: 20px;
	color: var(--accent-text);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5em;
}

.dug-social-hero-desc {
	margin: 0;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.85em;
}

/**
 * 글칸 폭  [2026-08-29]
 * ----------------------------------------------------------------------------------------
 * 여기서 두 번 실패했습니다. 다음에 또 건드리기 전에 읽어주세요.
 *   1차 - .container 에 max-width:100%; padding-right:0 을 줘서 폭을 풀었더니,
 *         custom.css 의 .row { margin-right:-15px } 를 흡수할 여백이 사라져
 *         행이 15px 튀어나가고 문서에 가로 스크롤이 생겼습니다.
 *   2차 - 글 상자에 margin-left: calc(3.5vw - (100vw - 100%)/2) 로 끌어왔더니,
 *         calc 의 100% 가 컨테이너가 아니라 부모인 .col-lg-6 (컨테이너의 절반)
 *         기준으로 계산돼 글이 화면 왼쪽 밖으로 숨어버렸습니다.
 *
 * 결론 : 아무 것도 옮기지 않습니다. 잘 되고 있는 사업기회 히어로와 똑같이,
 * 부트스트랩 컨테이너가 놓는 자리에 두고 폭 상한만 겁니다(32절 공용 620px).
 * 굳이 옮겨야 한다면 .dug-social-hero-text 가 아니라 부모 칼럼(.col-lg-6)에
 * 손대야 계산 기준이 컨테이너가 됩니다.
 */

/**
 * 소셜셀링 히어로 - 1399px 이하는 사업기회 배너와 같은 구조  [2026-08-29 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 요청 : "/business/opportunity 를 참고해서, 글을 위로 배경을 아래로"
 *
 * 구조
 *   ① 히어로 아래쪽에 배너 높이만큼 자리를 비워둡니다 (padding-bottom: 40.43%).
 *      40.43% 는 배너 비율 414/1024 입니다. 퍼센트 padding 은 '폭' 기준이라
 *      배너가 커지고 작아져도 자리가 정확히 맞습니다.
 *   ② 배너 덩어리를 그 자리에 절대배치로 앉힙니다 (bottom: 0).
 *      안쪽 구조(배경 cover + 인물 좌표)는 PC 와 완전히 같아서, 잘리는 모습도
 *      PC 와 똑같습니다. aspect-ratio 1024/414 를 그대로 물려줍니다.
 *   ③ 글은 흐름 그대로 위쪽에 남아 사진 위 빈 하늘에 놓입니다.
 *
 * aspect-ratio 로 칸 전체 높이를 잡지 않은 이유
 *   글 높이가 글자 크기(고정 px)에 따라 정해지는데, aspect-ratio 는 폭에만
 *   비례합니다. 둘을 묶으면 320px 에서는 하늘이 모자라고 1399px 에서는
 *   1200px 짜리 허공이 생깁니다. padding-bottom 으로 배너 자리만 예약하면
 *   칸 높이는 '글 높이 + 배너 높이' 가 되어 어느 폭에서나 저절로 맞습니다.
 *
 * 글 영역 배경을 사진 윗변 색으로 이어붙입니다  [2026-08-29 운영자 요청]
 *   "모바일에서 하나의 배경처럼 보이게"
 *
 *   배너는 cover + object-position:center top 이라 윗변이 원본 0행입니다.
 *   그래서 0행 색을 10% 간격으로 실측해 가로 그라디언트로 그대로 옮겨두면
 *   글 영역과 사진이 이음매 없이 이어집니다.
 *   (운영자가 8/29 13:08 에 테두리를 지운 파일을 다시 올려주셔서 0행을 쓸 수
 *    있게 되었습니다. 예전 파일은 0행이 가장자리 티가 나 쓸 수 없었습니다)
 *
 *   흰 막은 쓰지 않습니다. 막의 끝점은 칸 '높이' 기준인데 배너가 시작하는
 *   높이는 글 길이에 따라 달라져서, 예전에 막이 사진 윗부분까지 덮어
 *   뿌옇게 씻긴 적이 있습니다. 대신 아래에서 본문 글자색을 바꿉니다.
 */
@media only screen and (max-width: 1399px) {
	.dug-social-hero {
		display: block;
		aspect-ratio: auto;
		padding: 30px 0 40.43%;
		/**
		 * promo-top-bg.png 윗변 색  [2026-08-29 이음매 보강]
		 * 처음에는 y=0 행을 10% 간격(11점)으로 땄는데 경계가 희미하게 보였습니다.
		 * 두 가지를 고쳐 맞췄습니다.
		 *   (1) 5% 간격 21점으로 촘촘하게 - 10% 간격은 두 점 사이를 직선으로
		 *       이으면서 실제 하늘의 완만한 곡선과 어긋났습니다.
		 *   (2) 0행이 아니라 0~1행 x 좌우 1px, 총 6픽셀 평균 - 브라우저가 배너를
		 *       축소해 그릴 때(1024px 그림을 375~493px 로) 윗줄 두어 행이 섞여
		 *       나오기 때문에, 0행 하나만 쓰면 실제보다 밝게 잡힙니다.
		 */
		background: linear-gradient(90deg,
			#E9E9EC 0%,  #E7E7E9 5%,  #E0E4E8 10%, #DDE0E5 15%,
			#D8DCE4 20%, #D0D7DF 25%, #C8D0DA 30%, #C0CBD8 35%,
			#B5C4D4 40%, #ABBDD1 45%, #A1B8CF 50%, #9CB4CE 55%,
			#92ACC9 60%, #86A5C5 65%, #7B9FC4 70%, #6E95BC 75%,
			#6E96C0 80%, #6593BF 85%, #6894C0 90%, #5F8DBB 95%,
			#6D96BE 100%);
	}

	/**
	 * 본문 글자를 남색으로  [2026-08-29]
	 * 배경이 오른쪽으로 갈수록 파래집니다(#6D96BE). 기본 본문색인 회색
	 * (--text-color #4A5568)은 그 위에서 대비가 2.4:1 까지 떨어져 읽기 어렵습니다.
	 * 남색(--primary-color)으로 바꾸면 가장 어두운 지점에서도 5.5:1 이라
	 * 어디서나 읽힙니다. 제목과 같은 색이라 덩어리로도 잘 묶입니다.
	 * (흰 막을 씌우는 방법도 있지만 사진까지 뿌옇게 만들어서 쓰지 않습니다)
	 */
	.dug-social-hero-desc {
		color: var(--primary-color);
	}

	/* 배너 덩어리를 칸 아래쪽에 붙입니다. 안쪽 좌표는 PC 와 동일하게 유지됩니다 */
	.dug-social-hero-bg {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		aspect-ratio: 1024 / 414;
		height: auto;
	}

	.dug-social-hero-text {
		max-width: 100%;
	}
}

/**
 * 아이콘 4개 + 개인링크 안내 밴드
 * 위 배너를 띠 시작선에서 잘랐기 때문에, 이 띠가 배너 바로 아래 붙어야
 * 시안처럼 한 덩어리로 보입니다. 그래서 위쪽 여백을 주지 않습니다.
 */
.dug-social-band {
	padding: 34px 0 38px;
}

.dug-social-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dug-social-badge {
	flex: 1 1 0;
	min-width: 96px;
	text-align: center;
}

/**
 * 배지 아이콘  [2026-08-29 폰트아이콘 → png]
 * promo-icon-*.png 에 동그란 테두리까지 그려져 있어 CSS 원형 배지(border/radius)는
 * 걷어냈습니다. 그림이 남색 선그림이라 그대로 두면 남색 띠에 묻히므로,
 * brightness(0) 으로 검정을 만든 뒤 invert(1) 로 흰색으로 뒤집습니다.
 * (아이콘 파일을 흰색으로 다시 만들 필요가 없습니다)
 */
.dug-social-badge-icon {
	display: block;
	width: 54px;
	margin: 0 auto 10px;
}

.dug-social-badge-icon img {
	display: block;
	width: 100%;
	height: auto;
	filter: brightness(0) invert(1);
}

.dug-social-badge-text {
	display: block;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	line-height: 1.4em;
}

/* 나만의 개인 링크 안내 박스 */
.dug-social-linkbox {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 26px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
}

/* 그림 자체가 '흰 동그라미 + 남색 링크' 라 배경·색을 CSS 로 줄 필요가 없습니다 */
.dug-social-linkbox-icon {
	flex: 0 0 auto;
	display: block;
	width: 56px;
}

.dug-social-linkbox-icon img {
	display: block;
	width: 100%;
	height: auto;
}

.dug-social-linkbox-body h4 {
	margin-bottom: 6px;
	color: var(--accent-color);
	font-size: 19px;
	font-weight: 700;
}

.dug-social-linkbox-body p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	line-height: 1.6em;
}

.dug-social-steps {
	padding: 90px 0;
	background: var(--white-color);
}

/* 사업자 / 소비자 비교 */
.dug-social-compare {
	padding: 80px 0;
	background: var(--secondary-color);
}

.dug-compare-col {
	height: 100%;
	padding: 30px 26px;
	border-radius: 16px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
}

/* 왼쪽은 네이비 제목, 오른쪽은 골드 제목 (목업과 동일) */
.dug-compare-title {
	display: block;
	margin: -30px -26px 24px;
	padding: 14px 26px;
	border-radius: 16px 16px 0 0;
	color: var(--white-color);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.dug-compare-col.is-seller .dug-compare-title { background: var(--primary-color); }
.dug-compare-col.is-buyer  .dug-compare-title { background: var(--accent-color); }

.dug-compare-item {
	display: flex;
	gap: 14px;
	margin-bottom: 22px;
}

.dug-compare-item:last-child {
	margin-bottom: 0;
}

.dug-compare-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 17px;
}

.dug-compare-col.is-seller .dug-compare-icon {
	background: var(--primary-color);
	color: var(--white-color);
}

.dug-compare-col.is-buyer .dug-compare-icon {
	background: rgba(185, 130, 44, 0.14);
	color: var(--accent-text);
}

.dug-compare-item h4 {
	margin-bottom: 5px;
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 700;
}

.dug-compare-col.is-buyer .dug-compare-item h4 {
	color: var(--accent-text);
}

.dug-compare-item p {
	margin: 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.65em;
}

/* 가운데 폰 목업 */
.dug-compare-phone {
	text-align: center;
}

.dug-compare-phone img {
	width: 100%;
	max-width: 240px;
	height: auto;
}

/**
 * PC 3칸 배치 다듬기  [2026-08-29 운영자 요청 : 시안처럼]
 * ----------------------------------------------------------------------------------------
 * 마크업은 이미 col-lg-4 세 칸(사업자 / 폰 / 소비자)이라 배치 자체는 맞았습니다.
 * 시안과 달라 보이던 두 가지를 맞춥니다.
 *
 * (1) 두 카드 높이가 달랐습니다
 *     .row 에 align-items-center 가 걸려 있어 칸이 늘어나지 않고 내용 높이대로
 *     잡힌 뒤 가운데 정렬만 됩니다. 그래서 글이 짧은 쪽 카드가 짧아집니다.
 *     stretch 로 바꾸면 두 카드가 같은 높이가 되고(.dug-compare-col 의 height:100%
 *     가 그때 비로소 동작합니다), 대신 가운데 폰이 위로 붙으므로 폰 칸만
 *     따로 세로 가운데 정렬해 줍니다.
 *
 * (2) 폰이 작았습니다
 *     240px → 300px. 시안에서 폰 높이가 카드 높이의 3분의 2쯤 됩니다.
 *     더 키우려면 이 값만 올리세요. 카드 폭(약 350px)을 넘기지 않는 선까지입니다.
 */
@media only screen and (min-width: 992px) {
	.dug-social-compare .row {
		align-items: stretch;
	}

	.dug-compare-phone {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.dug-compare-phone img {
		max-width: 300px;
	}
}

/* 5단계 요약 + SMART */
.dug-social-system-left {
	/* 위아래 여백 축소 60 → 46/34 → 34/20  [2026-08-29 운영자 요청, 두 번 줄임] */
	padding: 34px 40px 20px;
	background: var(--white-color);
	height: 100%;
}

.dug-social-system-left h3 {
	margin-bottom: 30px;
	color: var(--primary-color);
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}

.dug-minisys {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

.dug-minisys-item {
	flex: 1 1 0;
	min-width: 86px;
	text-align: center;
}

.dug-minisys-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 10px;
	border: 2px solid var(--divider-color);
	border-radius: 50%;
	color: var(--primary-color);
	font-size: 19px;
}

.dug-minisys-item strong {
	display: block;
	margin-bottom: 3px;
	color: var(--primary-color);
	font-size: 14px;
	font-weight: 700;
}

.dug-minisys-item em {
	display: block;
	color: var(--text-color);
	font-size: 12px;
	font-style: normal;
	line-height: 1.45em;
}

.dug-minisys-arrow {
	flex: 0 0 auto;
	margin-top: 18px;
	color: var(--accent-color);
	font-size: 13px;
}

.dug-social-system-right {
	position: relative;
	/* 왼쪽 판과 같은 값이라야 두 판의 글 시작선이 맞습니다 */
	padding: 34px 40px 20px;
	height: 100%;
	overflow: hidden;
}

.dug-social-system-right h3 {
	margin-bottom: 24px;
	color: var(--white-color);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.45em;
}

/* 둘째 줄 'SMART한 사업 방식!' 전체가 골드입니다 (social.php 주석 참고) */
.dug-social-system-right h3 .is-gold,
.dug-social-system-right h3 strong {
	color: var(--accent-color);
}

/**
 * 체크 표시  [2026-08-29 운영자 요청 : 시안처럼]
 * 시안은 '골드 동그라미 테두리 + 골드 체크' 입니다. 폰트아이콘 fa-circle-check 는
 * 원과 체크가 한 글자로 붙어 있어 색을 따로 줄 수 없으므로, 원은 CSS 테두리로
 * 그리고 아이콘은 체크만 남깁니다(social.php 에서 fa-check 로 바꿨습니다).
 * 지름 20px 은 본문 15px 과 어울리는 크기이고, 더 키우면 글줄 간격도 같이
 * 늘려야 균형이 맞습니다.
 */
.dug-smart-list li i {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border: 1.5px solid var(--accent-color);
	border-radius: 50%;
	color: var(--accent-color);
	font-size: 10px;
}

.dug-smart-list li span {
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
}

/* 오른쪽 아래 사진 - 밴드 안에 자연스럽게 걸치도록 */
/**
 * SMART 섹션 인물 사진  [2026-08-29 운영자 요청 : 시안처럼, 많이 위로]
 * ----------------------------------------------------------------------------------------
 * 시안은 사진이 글 '아래'가 아니라 '오른쪽 옆'에 있습니다. 그래서 남색 띠가
 * 글 높이만큼만 차지하고 전체가 짧고 단단해 보입니다.
 * 처음에는 음수 margin 으로 끌어올려 봤는데, 흐름 안에 있는 한 사진 높이가
 * 계속 띠 높이에 더해져서 아래가 휑한 문제가 남았습니다.
 *
 * 그래서 흐름에서 아예 빼냅니다(position: absolute).
 *   - 사진은 오른쪽 아래 모서리에 붙입니다. 넘치는 부분은 .dug-social-system-right
 *     에 이미 걸려 있는 overflow:hidden 이 잘라내 시안처럼 판 끝에서 끊깁니다.
 *   - 대신 판에 오른쪽 여백(padding-right)을 줘서 글이 사진 밑으로 들어가지
 *     않게 합니다. 이 두 값(사진 폭 / 오른쪽 여백)은 항상 같이 움직여야 합니다.
 *   - 흐름에서 빠졌으므로 띠 높이는 이제 '글 높이'만으로 정해집니다.
 *
 * 사진을 키우려면 width 와 padding-right 를 같은 비율로 올리세요.
 * (padding-right 를 안 올리면 마지막 체크 줄이 사진 밑으로 들어갑니다)
 */
.dug-social-system-img {
	margin-top: 26px;
	text-align: right;
}

@media only screen and (min-width: 992px) {
	/*
	 * 사진 자리  [2026-08-29 운영자 요청 : 조금 더 크게]
	 * 310 → 350px. padding-right 도 같이 키워야 글이 사진 밑으로 안 들어갑니다.
	 * 다만 여백을 키운 만큼 글칸이 좁아져 체크 문구가 두 줄로 접히고 판이
	 * 높아집니다. 그래서 여백은 사진보다 조금만(+10px) 크게 잡았습니다.
	 * 더 키우려면 두 값을 같이 올리되, 체크 문구가 몇 줄로 접히는지 보세요.
	 */
	.dug-social-system-right {
		padding-right: 360px;
	}

	/**
	 * 사진을 판 높이에 꽉 채웁니다  [2026-08-29 운영자 요청 : 공백 없게 최대한 위로]
	 * bottom 에만 붙여두면 판이 사진보다 높을 때(글이 여러 줄로 접히는 좁은
	 * 데스크톱에서 특히) 사진 위에 남색 빈 자리가 남습니다.
	 * top 과 bottom 을 둘 다 0 으로 잡아 오른쪽 칸을 세로로 꽉 채우면
	 * 판이 얼마나 높아지든 빈 자리가 생기지 않습니다.
	 *
	 * 대신 사진이 칸 비율에 맞춰 좌우가 조금 잘립니다(object-fit: cover).
	 * object-position 을 55% 로 둔 것은 두 인물이 오른쪽에 치우쳐 있어
	 * 가운데(50%)로 자르면 왼쪽 남자의 어깨가 더 많이 잘리기 때문입니다.
	 */
	.dug-social-system-img {
		position: absolute;
		right: 0;
		/*
		 * top 34px  [2026-08-29 운영자 확인값. 62px 까지 내렸다가 되돌렸습니다]
		 * 0 이면 인물 머리가 판 윗변에 딱 붙어 잘린 듯 보입니다.
		 * 값을 키울수록 위에 남색이 남아 인물이 아래로 내려앉지만, 그만큼 사진 칸이
		 * 세로로 짧아져 머리 위가 더 잘립니다(object-position: bottom 이므로).
		 * 아래는 계속 bottom:0 이라 판 바닥에는 그대로 붙습니다.
		 */
		top: 34px;
		bottom: 0;
		width: 350px;
		margin: 0;
	}

	.dug-social-system-img img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: 55% bottom;   /* 잘릴 때 위를 잘라내고 바닥을 남깁니다 [2026-08-29] */
		border-radius: 0;
	}
}

.dug-social-system-img img {
	/*
	 * display: block 이 꼭 필요합니다  [2026-08-29]
	 * img 는 기본이 inline 이라 글자의 아랫부분(디센더) 자리만큼 약 4~5px 이
	 * 아래에 남습니다. 그래서 사진이 판 바닥에서 살짝 떠 보였습니다.
	 * block 으로 바꾸면 그 빈 줄이 사라져 경계선에 딱 붙습니다.
	 */
	display: block;
	width: 100%;
	max-width: 360px;   /* 300 → 360 [2026-08-29 운영자 요청 : 조금 더 크게] */
	height: auto;
	border-radius: 12px;
}

@media only screen and (max-width: 991px) {
	.dug-social-steps,
	.dug-social-compare { padding: 60px 0; }

	/**
	 * 좁은 화면에서는 제목 좌우 선을 아예 뺍니다  [2026-08-29 운영자 요청]
	 * 제목이 두 줄로 접히면 앞 선은 첫 줄 앞에, 뒤 선은 둘째 줄 뒤에 붙습니다.
	 * 그래서 선 하나가 아래로 뚝 떨어진 것처럼 보였습니다.
	 * 선은 '한 줄일 때만' 의미가 있어서 좁은 화면에서는 글자만 가운데 둡니다.
	 */
	.dug-lined-title h2::before,
	.dug-lined-title h2::after { display: none; }

	/**
	 * (소셜셀링 히어로 쌓기 규칙은 아래 @media (max-width: 1399px) 로 옮겼습니다.
	 *  991px 이 아니라 1399px 인 이유는 그쪽 주석을 보세요)
	 */

	.dug-social-hero-title { font-size: 34px; }
	.dug-social-hero-tagline { font-size: 17px; }
	.dug-social-linkbox { margin-top: 26px; }
	.dug-compare-col { margin-bottom: 22px; }
	.dug-compare-phone { margin: 10px 0 26px; }
	/*
	 * 아래 여백 20px 은 사진의 margin-bottom: -20px 과 짝입니다  [2026-08-29]
	 * 두 값이 어긋나면 사진이 바닥에서 뜨거나 판을 뚫고 나갑니다.
	 */
	.dug-social-system-left,
	.dug-social-system-right { padding: 34px 24px 20px; }
	/*
	 * 좁은 화면에서는 위 절대배치를 쓰지 않고 글 아래에 가운데로 둡니다.
	 * 글과 사진 사이 여백은 26px → 10px 로 줄였습니다 [2026-08-29].
	 */
	/*
	 * 사진 아랫변을 판 바닥선에 붙입니다  [2026-08-29 운영자 요청]
	 * 판에 padding-bottom 이 있어 사진 아래 남색이 그만큼 남습니다.
	 * 같은 크기의 음수 margin 으로 그 여백을 상쇄하면 사진이 경계선까지 내려옵니다.
	 * 위 .dug-social-system-left/right 의 padding 아래값과 항상 같은 숫자여야 합니다
	 * (지금은 20px). 한쪽만 고치면 사진이 뜨거나 판을 뚫고 나갑니다.
	 */
	/**
	 * 사진을 오른쪽 끝에 붙이고 위로 당깁니다  [2026-08-29 운영자 요청]
	 *   margin-right: -24px  판의 좌우 여백(24px)을 상쇄해 화면 오른쪽 끝까지
	 *   margin-bottom: -20px 판의 아래 여백을 상쇄해 바닥선까지
	 *   margin-top: -14px    체크리스트 쪽으로 끌어올립니다
	 *
	 * -14px 이 한계에 가깝습니다. 사진은 오른쪽에 붙어 있지만 폭이 360px 이라
	 * 좁은 화면에서는 왼쪽 끝이 체크 문구가 끝나는 지점까지 옵니다.
	 * 더 당기면 마지막 줄('작은 소개가 큰 기회를 만듭니다.') 위로 사진이 올라탑니다.
	 * 더 올리고 싶으면 사진 폭(max-width)을 함께 줄이세요.
	 */
	.dug-social-system-img {
		margin: -14px -24px -20px 0;
	}

	.dug-social-system-img img {
		margin-left: auto;
		margin-right: 0;
	}
}

@media only screen and (max-width: 575px) {
	.dug-social-hero-title { font-size: 28px; }
	.dug-minisys-arrow { display: none; }
	.dug-minisys-item { flex: 0 0 45%; margin-bottom: 20px; }
	.dug-social-linkbox { flex-direction: column; text-align: center; }
}

/* ========================================================================================
 * 28. 품질·제조 / Co-Branding  /products/quality
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-49) 구조 : 다크 히어로 → 3개 카드 → 파트너십 가치 → 클로징
 * 3번째 카드가 #cobranding 앵커입니다 ('Co-Branding' 메뉴가 여기로 들어옵니다).
 * ======================================================================================== */

/**
 * 히어로 - 원본 시안의 한 장짜리 배너  [2026-08-29]
 * ----------------------------------------------------------------------------------------
 * 배경 그림에는 성조기와 사옥만 있고, 그 위에 얹히는 글자·로고·인증 박스는 전부
 * HTML 입니다. 번역(국가선택 English)이 되어야 하기 때문입니다.
 * 그림에 들어 있던 가로선 2개와 인증 박스 테두리는 미리 지워두었습니다
 * (global/cobrand-banner-bg.png, 만든 과정은 quality.php 머리말 주석 참고).
 *
 * aspect-ratio 를 쓰지 않고 cover 로 깐 이유
 *   글 분량이 번역에 따라 달라져 칸 높이가 변합니다. 비율을 고정하면 영문에서
 *   글이 넘칩니다. cover + right center 로 두면 칸이 높아져도 성조기·사옥이
 *   오른쪽에 그대로 남고, 좁아지면 왼쪽 빈 하늘부터 잘려나갑니다.
 *   왼쪽은 어차피 글자리라 잘려도 문제가 없습니다.
 *
 * background-color 를 같이 준 것은 그림이 칸을 다 못 덮을 때(아주 높은 화면)
 * 빈 자리가 흰색으로 뚫리는 것을 막기 위해서입니다.
 */
.dug-q-hero {
	padding: 80px 0 70px;
	background-color: #04183F;
	background-image: url('../img/global/cobrand-banner-bg.png');
	background-repeat: no-repeat;
	/*
	 * right top 인 이유  [2026-08-29 운영자 : 국기가 안 보임]
	 * 배너 그림은 1024x635(비율 1.61)인데 히어로 칸은 글 높이만큼만 잡혀
	 * 훨씬 납작합니다(약 2.5). cover 는 폭을 맞추고 넘치는 세로를 잘라내는데,
	 * center 로 두면 위아래를 반씩 잘라 성조기(그림 위에서 7~25% 자리)가
	 * 윗부분부터 날아갑니다.
	 * top 으로 바꾸면 위쪽을 기준으로 잘라내므로 국기와 건물 간판이 온전히
	 * 남고, 대신 아래쪽 도로·조경이 잘립니다. 그쪽은 어두워서 티가 덜 납니다.
	 *
	 * 그림 전체를 다 보이게 하려면 칸 높이가 폭의 62%(=635/1024) 여야 합니다.
	 * 1400px 화면에서 868px 짜리 히어로가 되어 너무 큽니다. 그래서 자르는 쪽을 택했습니다.
	 */
	background-position: right top;
	background-size: cover;
}

/**
 * 히어로 글 덩어리는 가운데 정렬입니다  [2026-08-29 운영자 요청]
 * 시안에서 작은 제목(DREAM UP GLOBAL + NUTRIMENTS), 큰 제목, Co-Branding,
 * 한 줄 소개, 두 브랜드 로고가 모두 같은 중심선에 놓입니다.
 * 아래 .dug-q-hero-bottom 의 본문·인증박스는 별도 행이라 영향받지 않습니다.
 */
.dug-q-hero-text {
	text-align: center;
}

.dug-q-hero-title {
	margin-bottom: 4px;
	color: var(--white-color);
	font-size: 44px;
	font-weight: 400;
	line-height: 1.15em;
	/* 목업의 세리프 느낌 (U.S. Professional Nutrition) */
	font-family: Georgia, "Times New Roman", var(--xen-korean-font), serif;
}

.dug-q-hero-title2 {
	margin-bottom: 16px;
	color: var(--accent-color);
	font-size: 40px;
	font-weight: 700;
	font-family: Georgia, "Times New Roman", var(--xen-korean-font), serif;
}

.dug-q-hero-sub {
	position: relative;
	/*
	 * padding-bottom 이 '글자 ↔ 선' 간격, margin-bottom 이 '선 ↔ 로고 줄' 간격입니다.
	 * [2026-08-29] 선이 글자에서 너무 떨어져 보인다고 해서 24 → 12 로 당기고,
	 * 그만큼 아래를 26 → 34 로 늘려 전체 높이는 그대로 두었습니다.
	 * 선을 더 붙이려면 12 를 줄이고 34 를 같은 만큼 키우세요.
	 */
	margin-bottom: 34px;
	padding-bottom: 12px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
}

/**
 * 한 줄 소개 아래 금색 선  [2026-08-29 운영자 요청]
 * 시안에는 금색 선이 두 개 있습니다.
 *   윗선 - 여기(한 줄 소개와 로고 줄 사이). 원본에서 폭이 배너의 12% 로 짧습니다.
 *   아랫선 - 로고 줄 아래(.dug-q-brands::after). 원본에서 56% 로 깁니다.
 * 그래서 이 선은 짧게, 아래 선은 길게 두어 길이 차이를 살렸습니다.
 * 짧은 선이라 흐려지는 구간도 좁게(12%/88%) 잡아야 가운데가 또렷합니다.
 */
.dug-q-hero-sub::after {
	content: '';
	position: absolute;
	left: 50%;
	/*
	 * -50% 가 '가운데 정렬', 뒤의 -20px 이 왼쪽으로 옮긴 값입니다  [2026-08-29 요청]
	 * 더 옮기려면 20px 만 키우고, 오른쪽으로 보내려면 부호를 + 로 바꾸세요.
	 */
	transform: translateX(calc(-50% - 20px));
	bottom: 0;
	/*
	 * 길이  [2026-08-29 요청 : 20px 줄이기]
	 * 30% 에서 20px 을 뺍니다. calc 로 쓰면 화면이 넓어져도 '비율 - 20px' 이
	 * 유지돼, 어느 폭에서나 20px 만큼만 짧아집니다.
	 * min-width 도 130 → 110 으로 같이 줄였습니다. 안 줄이면 좁은 화면에서
	 * min-width 가 이겨서 길이가 안 변합니다.
	 */
	width: calc(30% - 20px);
	min-width: 110px;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(185, 130, 44, 0) 0%,
		rgba(185, 130, 44, 0.9) 12%,
		rgba(185, 130, 44, 0.9) 88%,
		rgba(185, 130, 44, 0) 100%);
}

/* 두 브랜드 로고 나란히 */
/**
 * 두 브랜드 로고 줄  [2026-08-29 운영자 요청 : 선을 위 → 아래, 흰색 → 금색]
 * 예전에는 로고 줄 '위'에 흰색 20% 선이 있었습니다. 시안은 로고 줄 '아래'에
 * 금색 선이 있어서 위치와 색을 바꿨습니다.
 * 선 길이는 이 상자의 폭을 따라갑니다. 짧게 하려면 max-width 와 margin:auto 를
 * 함께 주세요(가운데 정렬이라 margin auto 가 있어야 가운데에 놓입니다).
 */
.dug-q-brands {
	display: flex;
	align-items: center;
	justify-content: center;   /* 글 덩어리가 가운데 정렬이라 로고 줄도 맞춥니다 */
	gap: 20px;
	flex-wrap: wrap;
	position: relative;
	padding-top: 6px;
	padding-bottom: 24px;
}

/**
 * 로고 줄 아래 금색 선 - 양 끝이 흐려집니다  [2026-08-29 운영자 요청]
 * border 로는 그라디언트를 못 줘서 ::after 로 1px 짜리 띠를 그리고
 * 가로 그라디언트를 깝니다. 양 끝 0%, 가운데 구간만 진하게 두면
 * 시안처럼 선이 스며들 듯 사라집니다.
 * 흐려지는 폭을 늘리려면 18%/82% 를 30%/70% 처럼 안쪽으로 당기세요.
 * (185,130,44 는 --accent-color #B9822C 입니다. rgba 를 써야 해서 숫자로 적었습니다)
 */
.dug-q-brands::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(185, 130, 44, 0) 0%,
		rgba(185, 130, 44, 0.9) 18%,
		rgba(185, 130, 44, 0.9) 82%,
		rgba(185, 130, 44, 0) 100%);
}

.dug-q-brand-dug {
	color: var(--accent-color);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: 0.02em;
}

.dug-q-brand-dug em {
	display: block;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.4em;
}

.dug-q-brand-plus {
	color: var(--white-color);
	font-size: 26px;
	font-weight: 300;
}

/**
 * NUTRIMENTS 로고 재현  [2026-08-29]
 * 로고 원본 파일이 없어서 원본 시안에서 뽑은 새싹 png 위에 글자를 얹었습니다.
 * 새싹은 28x28 짜리 작은 그림이라 22px 을 넘겨 키우면 뭉개집니다.
 * 로고 파일을 받으면 이 규칙을 지우고 img 한 줄로 바꾸세요.
 */
.dug-q-brand-nut {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1em;
}

.dug-q-brand-nut img {
	width: 22px;
	height: auto;
	margin-bottom: 2px;
}

.dug-q-brand-nut strong {
	color: var(--white-color);
	font-size: 21px;
	font-weight: 500;
	letter-spacing: 0.12em;
}

.dug-q-brand-nut sup {
	font-size: 0.5em;
	top: -0.7em;
}

.dug-q-brand-nut em {
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.02em;
}

.dug-q-hero-img img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.dug-q-hero-bottom {
	margin-top: 44px;
}

.dug-q-hero-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	line-height: 1.85em;
}

/* NSF / cGMP 인증 박스 */
.dug-q-certbox {
	padding: 22px 24px 16px;
	border: 1px solid var(--accent-color);
	border-radius: 12px;
	text-align: center;
}

.dug-q-certs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.dug-q-cert-sep {
	width: 1px;
	height: 74px;
	background: rgba(255, 255, 255, 0.28);
}

.dug-q-cert {
	flex: 1 1 0;
}

/**
 * 인증 배지  [2026-08-29 글자 → png]
 * badge-nsf.png 는 파란 원, badge-cgmp.png 는 남색 배경에 금색 테두리가
 * 그림에 이미 들어 있습니다. 그래서 CSS 로 원·배경색을 주지 않습니다.
 * (예전에는 흰 원을 그리고 그 안에 NSF / cGMP 글자를 넣었습니다)
 * badge-cgmp.png 는 배경이 남색이라 남색 판 위에서만 씁니다.
 * 밝은 배경에 쓰려면 badge-cgmp-outline.png(투명)로 바꾸세요.
 */
.dug-q-cert-code {
	display: block;
	width: 62px;
	margin: 0 auto 10px;
}

.dug-q-cert-code img {
	display: block;
	width: 100%;
	height: auto;
}

.dug-q-cert p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	line-height: 1.45em;
}

.dug-q-cert-tagline {
	display: block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--accent-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/**
 * 인증 마크 4개  [2026-10-05]  FDA 로고 · NSF · PlanetOne FDA Registered · GMP
 * 마크 아래 설명 글도 있습니다(운영자 요청으로 살림). 칸이 좁아 간격·글자를 줄입니다.
 * FDA 로고(01_FDA.png)는 투명 바탕의 파란 글자라 남색 판에서 안 보여 흰 바탕을 깝니다.
 */
.dug-q-certs.is-four { gap: 12px; align-items: flex-start; }
.dug-q-certs.is-four .dug-q-cert-sep { height: 74px; align-self: center; }
.dug-q-certs.is-four .dug-q-cert-code { width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.dug-q-certs.is-four .dug-q-cert p { font-size: 11px; line-height: 1.4em; word-break: keep-all; }
.dug-q-certs.is-four .dug-q-cert.is-fda { flex-grow: 1.4; }
.dug-q-certs.is-four .is-fda .dug-q-cert-code {
	width: 86px;
	height: auto;
	margin-top: 12px;
	margin-bottom: 18px;
	padding: 7px 8px;
	background: #fff;
	border-radius: 8px;
}

@media only screen and (max-width: 575px) {
	.dug-q-certbox { padding-left: 14px; padding-right: 14px; }
	.dug-q-certs.is-four { gap: 7px; }
	.dug-q-certs.is-four .dug-q-cert-sep { height: 60px; }
	.dug-q-certs.is-four .dug-q-cert-code { width: 100%; max-width: 54px; height: 54px; }
	.dug-q-certs.is-four .dug-q-cert p { font-size: 9.5px; }
	.dug-q-certs.is-four .is-fda .dug-q-cert-code { max-width: 74px; height: auto; padding: 5px 6px; margin-top: 10px; margin-bottom: 14px; }
}

/* 3개 카드 */
.dug-q-cards {
	padding: 80px 0;
	background: var(--secondary-color);
}

/* 앵커(#cobranding)로 들어올 때 헤더에 가려지지 않게 */
.dug-q-cards [id] {
	scroll-margin-top: 110px;
}

.dug-q-card {
	height: 100%;
	padding: 26px;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	transition: all 0.4s ease;
}

.dug-q-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 38px rgba(4, 24, 63, 0.1);
}

.dug-q-card-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 20px;
}

.dug-q-card-no {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 700;
}

.dug-q-card-headtext {
	flex: 1 1 auto;
}

.dug-q-card-headtext h3 {
	margin-bottom: 4px;
	color: var(--primary-color);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4em;
}

.dug-q-card-label {
	display: block;
	color: var(--accent-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
}

/* 카드 아이콘 - 남색 선그림 png. 제목 옆 장식이라 옅게 둡니다 */
.dug-q-card-icon {
	flex: 0 0 auto;
	display: block;
	width: 34px;
	opacity: 0.45;
}

.dug-q-card-icon img {
	display: block;
	width: 100%;
	height: auto;
}

.dug-q-card-img {
	overflow: hidden;
	border-radius: 10px;
	margin-bottom: 18px;
}

.dug-q-card-img img {
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

.dug-q-card:hover .dug-q-card-img img {
	transform: scale(1.05);
}

.dug-q-card-desc {
	margin-bottom: 16px;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.75em;
}

.dug-q-card-checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dug-q-card-checks li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-bottom: 10px;
	color: var(--text-color);
	font-size: 13px;
	line-height: 1.55em;
}

.dug-q-card-checks li i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--primary-color);
	font-size: 14px;
}

/* VENTURA, CALIFORNIA 처럼 카드 아래 붙는 위치 표시 */
.dug-q-card-footer {
	margin-top: 18px;
	padding: 12px 14px;
	background: var(--primary-color);
	border-radius: 8px;
	text-align: center;
}

.dug-q-card-footer i {
	color: var(--accent-color);
	font-size: 13px;
}

.dug-q-card-footer strong {
	display: block;
	margin: 4px 0 2px;
	color: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.dug-q-card-footer span {
	display: block;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
}

/* ------------------------------------------------------------------
   품질·제조 배너					[2026-09-29 신설]
   카드 3개를 걷어내고 가로 배너 한 장(/data/quality/quality.png,
   1763x425)을 넣은 자리입니다. 위 .dug-q-card* 규칙은 지우지 않았습니다.
   카드를 되살릴 때 CSS 까지 다시 쓰지 않아도 되게 두었습니다.

   높이를 못 박지 않고 img 를 그대로 흘립니다. 배너에 글자가 들어 있어
   cover 로 잘라내면 「건강을 향한 쉬 없는 연구개발」이 날아갑니다.
   좁은 화면에서도 그림 전체가 보이도록 비율 그대로 줄입니다.
   ------------------------------------------------------------------ */
.dug-q-banner {
	padding: 80px 0;
	background: var(--secondary-color);
}

/* 앵커(#cobranding)로 들어올 때 헤더에 가려지지 않게 - 카드 때와 같은 값 */
.dug-q-banner[id] {
	scroll-margin-top: 110px;
}

/*
   두 장을 나란히							[2026-09-29 오후]
   넓은 화면에서는 이음매 없이 붙여 원본 한 장처럼 보이게 하고,
   휴대폰에서는 세로로 쌓아 각자 한 장씩 보이게 합니다.
   ("모바일에서 각자 한 장씩 위아래로" - 운영자 지시)
*/
.dug-q-banner-box {
	display: flex;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	line-height: 0;	/* 인라인 img 아래 생기는 여백을 없앱니다 */
}

/*
   flex-grow 값이 곧 원본에서의 가로폭입니다(784 : 979).
   flex-basis 를 0 으로 두어야 이 비율대로 정확히 나뉩니다.
   ⚠ 그림을 갈아끼우면 이 두 숫자도 새 가로폭으로 고쳐야 합니다.
      안 그러면 두 장의 높이가 달라져 이음매가 어긋납니다.
*/
.dug-q-banner-half {
	min-width: 0;	/* flex 항목이 그림 원본폭 아래로 줄어들 수 있게 */
}

.dug-q-banner-half-1 { flex: 784 1 0; }
.dug-q-banner-half-2 { flex: 979 1 0; }

.dug-q-banner-box img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.dug-q-banner {
		padding: 50px 0;
	}

	/*
	   휴대폰 - 위아래로 쌓습니다.
	   바깥 상자의 모서리·그림자를 걷고 각 장이 따로 모서리를 갖습니다.
	   가로로 두면 한 장이 390px 화면에서 170px 남짓까지 줄어
	   오른쪽 그림의 글자가 읽히지 않습니다.
	*/
	.dug-q-banner-box {
		display: block;
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
	}

	.dug-q-banner-half {
		overflow: hidden;
		border-radius: 10px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	}

	.dug-q-banner-half + .dug-q-banner-half {
		margin-top: 14px;
	}
}

/* OUR PARTNERSHIP VALUE */
.dug-q-partner {
	padding: 70px 0;
}

.dug-q-partner-title {
	margin-bottom: 40px;
}

.dug-q-partner-title h2 {
	color: var(--accent-color);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.dug-q-partner-flow {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.dug-q-partner-item {
	flex: 1 1 0;
	min-width: 150px;
	text-align: center;
}

/* 파트너십 아이콘 - 흰 원까지 그림에 들어 있어 CSS 원을 걷어냅니다 */
.dug-q-partner-icon {
	display: block;
	width: 76px;
	margin: 0 auto 14px;
}

.dug-q-partner-icon img {
	display: block;
	width: 100%;
	height: auto;
}

.dug-q-partner-item h4 {
	margin-bottom: 6px;
	color: var(--white-color);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45em;
}

.dug-q-partner-item p {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
	line-height: 1.55em;
}

.dug-q-partner-plus {
	flex: 0 0 auto;
	margin-top: 22px;
	color: var(--white-color);
	font-size: 24px;
	font-weight: 300;
}

/* 오른쪽 큰 문장 (미국에서 시작된 전문성을 … 세계로.) */
/**
 * 파트너십 배경 세계지도  [2026-08-29]
 * 시안에서 오른쪽 뒤에 점묘 지도가 깔려 있습니다. 글 뒤에 두어야 하므로
 * 흐름에서 빼고(absolute) 컨테이너를 그 위로 올립니다.
 * 좁은 화면에서는 글과 겹쳐 읽기가 나빠져 숨깁니다.
 */
.dug-q-partner {
	position: relative;
	overflow: hidden;
}

.dug-q-partner > .container {
	position: relative;
	z-index: 2;
}

.dug-q-partner-map {
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
	width: 30%;
	max-width: 340px;
	height: auto;
	opacity: 0.5;
	pointer-events: none;
}

@media only screen and (max-width: 991px) {
	.dug-q-partner-map { display: none; }
}

.dug-q-partner-claim {
	padding-left: 34px;
	border-left: 2px solid var(--accent-color);
	color: var(--white-color);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.6em;
}

.dug-q-partner-claim strong {
	color: var(--accent-color);
	font-size: 32px;
	font-weight: 700;
}

.dug-q-closing {
	padding: 54px 0;
	background: var(--white-color);
}

.dug-q-closing-inner {
	text-align: center;
}

.dug-q-closing-inner p {
	margin-bottom: 26px;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.8em;
}

@media only screen and (max-width: 991px) {
	.dug-q-hero { padding: 60px 0 50px; }
	.dug-q-hero-title { font-size: 32px; }
	.dug-q-hero-title2 { font-size: 28px; }
	.dug-q-hero-img { margin-top: 30px; }
	.dug-q-hero-bottom { margin-top: 30px; }
	.dug-q-certbox { margin-top: 26px; }
	.dug-q-cards { padding: 60px 0; }
	.dug-q-card { margin-bottom: 22px; }
	.dug-q-partner-claim {
		margin-top: 34px;
		padding-left: 0;
		padding-top: 24px;
		border-left: 0;
		border-top: 2px solid var(--accent-color);
		text-align: center;
	}
}

@media only screen and (max-width: 575px) {
	.dug-q-hero-title { font-size: 26px; }
	.dug-q-hero-title2 { font-size: 23px; }
	.dug-q-partner-plus { display: none; }
	.dug-q-partner-item { flex: 0 0 100%; margin-bottom: 26px; }
	.dug-q-brands { gap: 12px; }
	.dug-q-brand-dug { font-size: 24px; }
}


/* ========================================================================================
 * 29. 성공공유  /success/growth
 * ----------------------------------------------------------------------------------------
 * 히어로 → 성장의 선순환(다크) → 우리의 약속(#commitment) → 안내문 → 클로징
 *
 * ★ .dug-sg-notice 는 "제도가 확정되기 전"임을 밝히는 안내문입니다.
 *   문서가 확정적 표현을 금지했기 때문에 넣은 장치이므로 지우지 말아주세요.
 * ======================================================================================== */

.dug-sg-hero {
	padding: 90px 0;
	background: linear-gradient(180deg, var(--secondary-color) 0%, var(--white-color) 100%);
}

.dug-sg-hero-title {
	margin-bottom: 0;
	color: var(--primary-color);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3em;
}

.dug-sg-hero-desc {
	margin: 0;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.9em;
}

.dug-sg-hero-img img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.dug-sg-cycle {
	padding: 80px 0;
}

.dug-sg-cycle-title {
	margin-bottom: 44px;
}

.dug-sg-cycle-title h2 {
	color: var(--white-color);
	font-size: 30px;
	font-weight: 700;
}

.dug-sg-commit {
	padding: 90px 0;
	background: var(--white-color);
	/* '우리의 약속' 메뉴가 #commitment 앵커로 들어옵니다 */
	scroll-margin-top: 110px;
}

.dug-sg-commit-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 44px;
}

.dug-sg-commit-item {
	padding: 30px 22px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	text-align: center;
	transition: all 0.4s ease;
}

.dug-sg-commit-item:hover {
	transform: translateY(-6px);
	border-color: var(--accent-color);
	box-shadow: 0 16px 34px rgba(4, 24, 63, 0.1);
}

.dug-sg-commit-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 25px;
}

/**
 * 아이콘을 그림으로 쓸 때  [2026-08-30]
 * ic-commit-01~04.png 는 네이비 동그라미까지 그림에 들어 있어서,
 * 위 규칙의 배경(네이비 원)이 남으면 동그라미가 두 겹으로 겹칩니다.
 * 그래서 배경을 지우고 그림만 칸에 맞춥니다.
 * (성장 사이클 쪽은 .dug-system-icon.is-img 가 23절에 이미 같은 일을 합니다)
 */
.dug-sg-commit-icon.is-img {
	display: block;
	background: none;
}

.dug-sg-commit-icon.is-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dug-sg-commit-item h4 {
	margin-bottom: 10px;
	color: var(--primary-color);
	font-size: 19px;
	font-weight: 700;
}

.dug-sg-commit-item p {
	margin: 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.7em;
}

/* 제도 확정 전 안내문 */
.dug-sg-notice {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 22px 26px;
	background: var(--secondary-color);
	border-left: 3px solid var(--accent-color);
	border-radius: 0 10px 10px 0;
}

.dug-sg-notice i {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--accent-text);
	font-size: 18px;
}

.dug-sg-notice p {
	margin: 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.75em;
}

@media only screen and (max-width: 1199px) {
	.dug-sg-commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 991px) {
	.dug-sg-hero,
	.dug-sg-commit { padding: 60px 0; }
	.dug-sg-cycle { padding: 60px 0; }
	.dug-sg-hero-title { font-size: 30px; }
	.dug-sg-hero-img { margin-top: 30px; }
	.dug-sg-cycle-title h2 { font-size: 24px; }
}

@media only screen and (max-width: 575px) {
	.dug-sg-commit-grid { grid-template-columns: minmax(0, 1fr); }
	.dug-sg-hero-title { font-size: 25px; }
	.dug-sg-notice { flex-direction: column; gap: 10px; }
}


/* ========================================================================================
 * 30. 글로벌 비전  /global/vision   ※ 대부분 쓰이지 않습니다 (.dug-gv-route 만 사용)
 * ----------------------------------------------------------------------------------------
 * 이 절의 .dug-gv-* 규칙은 예전 본문(세계지도+핀 4개 / 도시사진 3장 / OUR DREAM 밴드)용
 * 입니다. 운영자 요청으로 본문을 경영철학에 있던 시안 한 판으로 갈아서, 지금 화면을
 * 그리는 것은 23절의 .dug-gvision-* 쪽입니다.
 * 되돌릴 수 있게 규칙은 지우지 않고 둡니다. (예전 뷰 : global/vision.php.bak-20260830)
 *
 * ※ 예외 하나 - .dug-gv-route 는 [2026-08-30] 부터 페이지 맨 아래 클로징 띠에서
 *   다시 쓰고 있습니다. 지우면 그 띠의 KOREA → USA → ASIA → GLOBAL 이 무너집니다.
 * ----------------------------------------------------------------------------------------
 * 상단 지도 이미지 + HTML 핀 설명 → 확장 전략(도시 3장 슬라이더) → 우리의 꿈(#dream)
 *
 * 지도 이미지에는 "GLOBAL VISION / Korea → USA → Asia" 가 영문·국문 병기로
 * 이미 박혀 있습니다. 핀 아래 한글 설명만 이미지에서 잘라내고 HTML 로 다시 썼습니다.
 * (이미지에 박아두면 국가선택을 English 로 바꿔도 한글이 남습니다)
 * ======================================================================================== */

.dug-gv-map {
	padding-bottom: 54px;
}

.dug-gv-map-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* 지도 아래 핀 설명 4개 */
.dug-gv-pins {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: -30px;
	position: relative;
	z-index: 2;
}

.dug-gv-pin {
	padding: 22px 16px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	text-align: center;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.4s ease;
}

.dug-gv-pin:hover {
	transform: translateY(-6px);
	border-color: var(--accent-color);
}

.dug-gv-pin-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--white-color);
	color: var(--primary-color);
	font-size: 20px;
	overflow: hidden;
}

.dug-gv-pin-mark img {
	width: 30px;
	height: auto;
	border-radius: 2px;
}

.dug-gv-pin-code {
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px 16px;
	border-radius: 6px;
	background: var(--primary-color);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.dug-gv-pin p {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	line-height: 1.6em;
}

/* 확장 전략 */
.dug-gv-strategy {
	padding: 90px 0;
	background: var(--white-color);
}

.dug-gv-route {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 18px 0 0;
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.dug-gv-route i {
	color: var(--accent-color);
	font-size: 15px;
}

/**
 * 클로징 띠 안의 확장 경로  [2026-08-30]
 * ----------------------------------------------------------------------------------------
 * 쓰는 곳 : /global/vision 맨 아래 (.dug-closing.dug-closing-earth-left 안)
 *
 * 위 .dug-gv-route 는 밝은 배경용이라 글자가 남색입니다. 다크 배경에 그대로 두면
 * 남색 글자가 남색 막에 묻히므로 여기서만 흰색으로 뒤집습니다.
 * 화살표는 골드 그대로가 잘 보여 손대지 않습니다.
 *
 * .dug-closing-inner p 가 아래 여백 30px 과 17px 글자를 주고 있어 함께 지웁니다.
 * (선택자 무게 : .dug-closing .dug-gv-route 는 클래스 2개라 그 규칙을 이깁니다)
 */
.dug-closing .dug-gv-route {
	margin: 0;
	color: var(--white-color);
	font-size: 26px;
}

/**
 * 좁은 화면
 * 아래 30절 미디어쿼리의 .dug-gv-route(클래스 1개)보다 무겁기 때문에,
 * 다크 배경용 크기는 반드시 여기에서 따로 잡아 줘야 합니다.
 */
@media only screen and (max-width: 991px) {
	.dug-closing .dug-gv-route { font-size: 20px; }
}

@media only screen and (max-width: 575px) {
	.dug-closing .dug-gv-route { font-size: 16px; }
}

/* 도시 3장 */
.dug-gv-cities {
	margin-top: 44px;
}

.dug-gv-city {
	text-align: center;
}

.dug-gv-city-img {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	margin-bottom: 16px;
}

.dug-gv-city-img img {
	width: 100%;
	height: auto;
	transition: transform 0.6s ease;
}

.dug-gv-city:hover .dug-gv-city-img img {
	transform: scale(1.06);
}

/* 사진 위 왼쪽 아래에 KOREA / USA / ASIA 라벨 */
.dug-gv-city-code {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 6px 14px;
	border-radius: 6px;
	background: rgba(4, 24, 63, 0.85);
	color: var(--white-color);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.dug-gv-city h4 {
	margin-bottom: 6px;
	color: var(--primary-color);
	font-size: 19px;
	font-weight: 700;
}

.dug-gv-city p {
	margin: 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.6em;
}

.dug-gv-cities .swiper-pagination {
	position: static;
	margin-top: 22px;
}

/* 우리의 꿈을 세계로 */
/* [2026-08-30] 이 앵커는 .dug-gvision-bottom 으로 옮겨갔습니다(23절). 아래는 남은 흔적입니다. */
.dug-gv-dream {
	scroll-margin-top: 110px;
}

.dug-gv-dream-img img {
	display: block;
	width: 100%;
	height: auto;
}

.dug-gv-dream-body {
	padding: 44px 0 70px;
	text-align: center;
}

.dug-gv-dream-body h3 {
	margin-bottom: 10px;
	color: var(--white-color);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.dug-gv-dream-kr {
	margin-bottom: 30px;
	color: var(--accent-color);
	font-size: 24px;
	font-weight: 700;
}

@media only screen and (max-width: 991px) {
	.dug-gv-pins { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
	.dug-gv-strategy { padding: 60px 0; }
	.dug-gv-route { font-size: 16px; gap: 8px; }
	.dug-gv-dream-body h3 { font-size: 24px; }
	.dug-gv-dream-kr { font-size: 20px; }
}

@media only screen and (max-width: 575px) {
	.dug-gv-pins { grid-template-columns: minmax(0, 1fr); }
	.dug-gv-route { font-size: 14px; }
	.dug-gv-dream-body h3 { font-size: 20px; }
}

/* ========================================================================================
 * 31. 메인 히어로 + 브랜드 링크 카드  /shop/start
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-05)의 구성입니다.
 *   히어로(좌 문구 / 우 제품컷+인물) → 링크 카드 4개 → 가치 배지 4개 → 약속 문구
 *
 * 예전 히어로는 Xendurance 시절의 동영상 배너(.hero-video)였습니다.
 * 그 CSS(02절)는 다른 데서 쓰지 않지만 되돌릴 여지를 남겨 지우지 않았습니다.
 * ======================================================================================== */

.dug-main-hero {
	position: relative;
	/**
	 * 아래 여백 80px → 24px  [2026-08-28]
	 * 히어로가 끝나고 카드가 시작되는 사이가 넓어서, 두 영역이 따로 떨어진
	 * 것처럼 보였습니다. 카드를 위로 끌어올리는 대신 이 여백을 줄였습니다.
	 */
	padding: 70px 0 24px;
	overflow: hidden;
	/**
	 * 히어로 바탕  [2026-08-28]
	 * 1) bnbg.png (44x40) 를 타일로 반복해 깝니다.
	 *    거의 단색(#F4F5F8)에 미세한 결만 있어 이어 붙여도 티가 안 납니다.
	 *    뒤에 같은 색을 지정한 이유는 이미지를 못 읽어도 톤이 유지되게 하려는 것입니다.
	 * 2) 그 위에 아래쪽 40% 를 흰색으로 서서히 덮는 그라디언트를 한 겹 올렸습니다.
	 *    카드 영역(흰 배경)과 맞닿는 자리에 가로줄이 그어진 것처럼 보였는데,
	 *    이렇게 하면 경계가 사라지고 한 덩어리처럼 이어집니다.
	 *    (배경색은 마지막 레이어에만 쓸 수 있어 background-color 로 따로 뺐습니다)
	 * 3) 그 위에 hero-bg-map.png 세계지도가 얹힙니다 - 아래 .dug-main-hero-map
	 */
	background-color: #F4F5F8;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.72) 82%, #FFFFFF 100%),
		url(../img/home/bnbg.png);
	background-repeat: no-repeat, repeat;
	background-size: 100% 100%, auto;
}

/* 지도 위에 글·이미지가 올라오도록 (지도 레이어가 z-index:0 이라 명시가 필요합니다) */
.dug-main-hero .container {
	position: relative;
	z-index: 1;
}

.dug-main-hero-eyebrow {
	margin-bottom: 6px;
	color: var(--primary-color);
	font-size: 24px;
	font-weight: 700;
}

.dug-main-hero-title {
	margin-bottom: 0;
	color: var(--primary-color);
	font-size: 62px;
	font-weight: 700;
	line-height: 1.06em;
	letter-spacing: -0.01em;
}

/* GLOBAL 만 골드 (목업과 동일) */
.dug-main-hero-title em {
	display: block;
	color: var(--accent-text);
	font-style: normal;
}

.dug-main-hero-desc {
	margin: 0 0 30px;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.85em;
}

.dug-main-hero-btn {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/**
 * 골드 채운 버튼
 * .btn-default 는 기본이 "테두리만"이고 .btn-highlighted 는 다크배경용(흰색)입니다.
 * 목업의 오른쪽 버튼은 밝은 배경 위의 골드 채움이라 여기서 새로 만듭니다.
 */
.btn-default.dug-btn-gold {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/**
 * 마우스를 올리면 흰색 채움  [2026-09-10 운영자 요청]
 * 예전에는 곤색으로 채웠습니다. '제품 알아보기'·'로그인'(.dug-btn-navy)과 결을
 * 맞춰, 사업자 등록 버튼도 흰 바탕이 되도록 바꿨습니다.
 * 테두리는 골드 그대로 두고 글자·화살표만 골드로 뒤집습니다(→ 11815절).
 */
.btn-default.dug-btn-gold:hover {
	background: var(--white-color);
	border-color: var(--accent-color);
	color: var(--accent-text);
}

/* ----------------------------------------------------------------------------------------
 * 오른쪽 비주얼 : 배경 세계지도 위에 사람 → 제품 순서로 등장  [2026-08-28 교체]
 * ----------------------------------------------------------------------------------------
 * 운영자가 직접 분리해 올린 png 세 장을 씁니다. (assets/img/home/)
 *
 *   hero-bg-map.png           957 x 452   배경 (세계지도 - 히어로 전체에 깔립니다)
 *   people-transparent.png    499 x 406   사람 (누끼)
 *   product-transparent.png   417 x 324   제품 (누끼)
 *
 * 예전에는 목업 원본(1536x1024)에서 잘라낸 픽셀 좌표를 퍼센트로 환산해 높이까지
 * 못박아 두었습니다. 이미지가 새로 바뀌면 그 값이 전부 틀어집니다.
 * 그래서 이번에는 "아래(bottom) 정렬 + 폭(%)" 만 지정하고 높이는 이미지 원래
 * 비율대로 따라오게 했습니다. 이미지를 다시 잘라 올려도 배치가 깨지지 않습니다.
 *   제품 : 왼쪽 아래   폭 45%  (지금 이미지 기준 상자 높이의 약 72%)
 *   사람 : 오른쪽 아래 폭 60%  (상자 높이를 꽉 채웁니다)
 * 크기를 바꾸고 싶으면 아래 width 두 값만 손보면 됩니다.
 * -------------------------------------------------------------------------------------- */
.dug-main-hero-visual {
	position: relative;
	/**
	 * 사람·제품이 놓이는 빈 상자입니다. 비율을 고정해 두면 화면 폭이 줄어도
	 * 두 이미지의 구도(왼쪽 제품 / 오른쪽 사람)가 그대로 유지됩니다.
	 * [2026-08-28] 상자 높이는 '사람 이미지 높이'에 맞춰 둡니다.
	 * 낮으면 인물 머리가 위로 삐져나오고, 높으면 인물 위에 빈 공간이 남습니다.
	 * 계산 : 사람 폭 60% ÷ 이미지 비율 1.229 = 상자 폭의 0.488
	 *        → 가로:세로 = 1 : 0.488 = 2.05 : 1
	 * 사람 폭을 바꾸면 이 값도 같이 고쳐주세요.
	 */
	aspect-ratio: 2.05;
	width: 100%;
	/* 아주 넓은 모니터에서 인물이 끝없이 커지지 않게 상한을 둡니다 */
	max-width: 1000px;
	margin-left: auto;   /* 남는 자리는 왼쪽으로 흘려 오른쪽에 붙입니다 */
}

/**
 * 비주얼 상자를 화면 오른쪽 끝까지 빼냅니다.  [2026-08-28]
 * ----------------------------------------------------------------------------------------
 * 사람 이미지 오른쪽에 남던 빈 자리는 부트스트랩 컨테이너의 좌우 여백이었습니다.
 * (1440px 화면이면 (1440-1320)/2 + 칼럼 패딩 12px = 72px)
 * 그 폭만큼 음수 margin 으로 빼내면 사람이 화면 끝에 바짝 붙습니다.
 * 계산값(12px)에 14px 을 더해 26px 로 둔 것은 여유분입니다. 스크롤바가 있으면
 * 100vw 가 스크롤바까지 세기 때문에 몇 px 이 남아 보입니다. 넘치는 부분은
 * overflow:hidden 이 잘라내므로, 남는 것보다 넘치는 편이 깔끔합니다.
 * ※ 그래도 오른쪽에 옅은 띠가 보인다면 그것은 브라우저 스크롤바 자리입니다.
 *    (웹페이지 내용이 덮을 수 없는 영역입니다)
 * 상자만 넓어질 뿐 안쪽 배치(제품 34% / 사람 66%)는 그대로라 맞댄 자리도 유지됩니다.
 *
 * 컨테이너 최대폭이 구간별로 달라서(960 / 1140 / 1320) 식을 세 번 씁니다.
 * 991px 이하는 글과 이미지가 위아래로 쌓이므로 빼내지 않습니다.
 * 히어로에 overflow:hidden 이 있어 화면 밖으로는 넘치지 않습니다.
 * -------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.dug-main-hero-visual { margin-right: calc((960px - 100vw) / 2 - 26px); }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.dug-main-hero-visual {
		margin-right: calc((1140px - 100vw) / 2 - 26px);
		/**
		 * 왼쪽으로도 80px 넓힙니다.  [2026-08-28]
		 * 글 칼럼과 상자 사이에 쓰지 않는 빈 여백이 100px 넘게 있었습니다.
		 * 이 폭을 쓰면 사람을 키워도 제품이 작아지지 않습니다.
		 * ('사업자 등록' 버튼과는 40px 이상 떨어집니다 - 더 늘리면 닿습니다)
		 */
		width: calc(100% + 80px);
	}
}

@media only screen and (min-width: 1400px) {
	.dug-main-hero-visual {
		margin-right: calc((1320px - 100vw) / 2 - 26px);
		width: calc(100% + 80px);   /* 위와 같은 이유 (왼쪽 빈 여백 활용) */
	}
}

/* ----------------------------------------------------------------------------------------
 * 배경 세계지도  [2026-08-28 / 크기 수정]
 * ----------------------------------------------------------------------------------------
 * 지도는 히어로 오른쪽 위에 원본 크기(957x452) 그대로 깔립니다.
 *
 * 처음에는 object-fit:cover 로 히어로 전체를 채웠는데, 이미지가 1.5배쯤 확대되면서
 * 대륙과 빛줄기가 커져 인물과 겹쳐 보였습니다("지도가 이상해 / 겹쳐 보여서").
 * 그래서 확대하지 않고 원본 픽셀 크기로만 놓습니다. 화면이 좁으면 max-width 로
 * 줄어들 뿐, 절대 늘어나지 않습니다.
 *
 * 가장자리 처리 : 마스크를 한 요소에 두 장 겹치면(mask-composite) 구형 브라우저에서
 * 깨지므로, 껍데기와 이미지에 한 방향씩 나눠 걸었습니다. (효과는 자연히 곱해집니다)
 *   껍데기 : 왼쪽(글이 있는 쪽)으로 서서히 사라짐
 *   이미지 : 위(헤더)·아래(카드영역)로 서서히 사라짐
 * 껍데기 크기를 지도와 똑같이(957px) 맞춘 것이 중요합니다. 히어로 전체 크기로 두면
 * 넓은 화면에서 마스크가 지도 바깥에서 끝나버려 지도의 왼쪽 세로선이 드러납니다.
 * 오른쪽 끝은 화면 경계라 따로 지울 필요가 없습니다.
 * -------------------------------------------------------------------------------------- */
.dug-main-hero-map {
	position: absolute;
	top: 0;
	right: 0;
	width: 957px;      /* hero-bg-map.png 원본 폭 - 늘리지 않습니다 */
	max-width: 100%;   /* 좁은 화면에서는 줄어들기만 합니다 */
	z-index: 0;
	pointer-events: none;
	/* 왼쪽(글이 있는 쪽)으로 서서히 사라짐 - 지도 폭 기준이라 화면이 넓어져도
	   왼쪽 세로 경계선이 드러나지 않습니다 */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

.dug-main-hero-map img {
	display: block;
	width: 100%;
	height: auto;      /* 원본 비율 그대로 */
	/* 위(헤더)·아래(카드영역)의 흰 배경과 맞닿는 선을 지웁니다 */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 74%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 74%, transparent 100%);
}

/**
 * 1층 : 사람 (오른쪽 아래 기준)
 * 2층 : 제품 (왼쪽 아래 기준 - 사람보다 앞으로 옵니다)
 *
 * 두 png 모두 여백 없이 딱 잘려 있어서, 좌표를 살짝 겹치게 두면 빈틈 없이 붙습니다.
 *
 * [2026-08-28] 배치 규칙 두 줄입니다.
 *
 *   ★ 1. 제품의 오른쪽 끝 = 사람의 왼쪽 끝   (딱 맞대고 겹치지 않습니다)
 *   ★ 2. 두 이미지는 상자 안에만 있습니다     (개별로 밀어내지 않습니다)
 *   ★ 3. 상자 자체를 화면 오른쪽 끝까지 빼냅니다 (위 margin-right 참고)
 *        → 사람은 화면 끝에 붙고, 제품은 글 칼럼과 안전한 거리를 지킵니다
 *
 * 처음에는 크게 보이려고 제품을 왼쪽으로 18%, 사람을 오른쪽으로 6% 밀어냈습니다.
 * 그런데 실제 화면에서
 *   - 제품이 '사업자 등록' 버튼을 침범하고
 *   - 사람이 화면 오른쪽 끝에 붙어 잘릴 것처럼 보였습니다.
 * 그래서 밀어내기를 모두 없애고, 대신 오른쪽 칼럼 자체를 넓혔습니다
 * (start.php : col-lg-7 → col-xl-8, 글 칼럼은 col-xl-4).
 * 칼럼이 넓어진 덕에 퍼센트를 줄여도 실제 픽셀 크기는 거의 그대로입니다.
 *
 *   사람  width 60%, right  0   →  왼쪽 끝 = 40%
 *   제품  width 45%, left  -5%  →  오른쪽 끝 = -5 + 45 = 40%   ← 같은 40%
 *
 * [2026-08-28] 여기서 방식이 하나 바뀌었습니다.
 * 전까지는 "두 폭의 합 = 100%" 로 맞췄습니다(한쪽을 키우면 다른 쪽이 작아짐).
 * 이제는 제품 폭을 45% 로 유지한 채, 사람이 커진 만큼 제품을 왼쪽으로 밀어
 * 맞댑니다. 사람만 커지고 제품은 그대로 남습니다.
 *   → 지켜야 할 식 :  제품 left + 제품 width = 100 - 사람 width
 *      (지금 : -5 + 45 = 40 = 100 - 60)
 * 사람을 더 키우면 left 를 그만큼 더 음수로 내려주세요.
 * 다만 왼쪽으로 계속 밀면 '사업자 등록' 버튼에 닿습니다.
 * 지금은 1440px 화면에서 버튼과 90px 정도 떨어져 있습니다.
 * [2026-08-28] 비율 변경 이력 (1440px 화면 기준 실제 픽셀)
 *   제품 34% / 사람 66%  →  제품 316 , 사람 612
 *   제품 40% / 사람 60%  →  제품 342 , 사람 514   (상자를 화면 끝까지 빼냄)
 *   제품 50% / 사람 50%  →  제품 428 , 사람 428
 *   제품 45% / 사람 55%  →  제품 421 , 사람 515
 *     이 단계에서 상자를 왼쪽으로 80px 넓혀(위 min-width 규칙),
 *     사람을 키우면서도 제품이 거의 그대로 남게 했습니다.
 *   제품 45% / 사람 60%  →  제품 421 , 사람 562   ← 지금
 *     제품 폭은 그대로 두고 왼쪽으로 5%(약 47px) 밀어 맞댔습니다.
 *
 * 아래쪽 : 둘 다 bottom:0 입니다.  [2026-08-28]
 * 예전에는 사람 png 아래쪽 투명 여백(1.5%)을 감안해 제품을 2% 올려두었는데,
 * 그러니 제품만 떠 있는 것처럼 보였습니다. 사람과 똑같이 바닥에 붙입니다.
 */
.dug-main-hero-people {
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	width: 60%;
}

.dug-main-hero-product {
	position: absolute;
	z-index: 2;
	/**
	 * [2026-08-28] 사람이 55% → 60% 로 커진 만큼 왼쪽으로 밀었습니다.
	 * 폭(45%)은 그대로라 제품 크기는 변하지 않고, 맞댄 자리만 40% 로 옮겨집니다.
	 * 오른쪽 미세조정값은 5px 입니다. (5px → 15px → 다시 5px 로 되돌림)
	 * -5% 로 왼쪽에 맞댄 뒤 5px 만 오른쪽으로 되돌리는 식입니다.
	 * 이 값만 고치면 제품이 좌우로 미세하게 움직입니다.
	 */
	left: calc(-5% + 5px);
	bottom: 0;      /* 사람과 같은 바닥선 (예전에는 2% 띄워 두었습니다) */
	width: 45%;
}

.dug-main-hero-people img,
.dug-main-hero-product img {
	display: block;
	width: 100%;
	height: auto;   /* 이미지 원래 비율 유지 */
}

/**
 * [2026-08-28] 제품에 걸어두었던 그림자를 걷어냈습니다.
 *   filter: drop-shadow(0 14px 26px rgba(4, 24, 63, 0.14));
 * 사람 이미지에는 그림자가 없어서, 나란히 두면 제품만 붕 떠 보였습니다.
 * (특히 제품 오른쪽 - 남성분 정장과 맞닿는 부분에 어두운 번짐이 생겼습니다)
 * 그림자를 다시 넣고 싶으면 위 한 줄을 되살리면 됩니다.
 */

/* ----------------------------------------------------------------------------------------
 * 사람 → 제품, 차례로 천천히 나타나기  [2026-08-28 추가]
 * ----------------------------------------------------------------------------------------
 * wow.js(fadeInUp) 를 쓰지 않았습니다.
 *   1) wow 는 0.5~1초로 짧아서 "천천히"가 표현되지 않습니다.
 *   2) 스크립트가 늦게 뜨거나 막히면 사람·제품이 아예 안 보일 수 있습니다.
 * 순서·속도는 아래 delay 와 animation-duration 만 고치면 됩니다.
 *   1번 사람 : 0.3초 기다린 뒤 1.8초 동안, 살짝 올라오면서
 *   2번 제품 : 1.2초 기다린 뒤 1.8초 동안, 사람과 똑같이 (사람에 이어서)
 * -------------------------------------------------------------------------------------- */
.dug-hero-appear {
	opacity: 0;
	animation-name: dugHeroAppear;
	animation-duration: 1.8s;
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	animation-fill-mode: forwards;   /* 끝난 뒤 보이는 상태로 남습니다 */
}

.dug-hero-appear-1 { animation-delay: 0.3s; }   /* 사람 */

/**
 * 제품  [2026-08-28]
 * 사람과 똑같은 방식으로 나타나게 되돌렸습니다(살짝 올라오면서).
 * 잠깐 제자리 등장(dugHeroFadeIn)으로 두었는데, 사람만 올라오고 제품은
 * 가만히 있으니 두 사진의 움직임이 어긋나 부자연스러웠습니다.
 * 제자리 등장으로 되돌리려면 animation-name 한 줄만 되살리면 됩니다.
 *   animation-name: dugHeroFadeIn;
 */
.dug-hero-appear-2 {
	/* [2026-08-28] 1.9초 → 1.2초. 사람이 절반쯤 나타났을 때 제품이 뒤따릅니다.
	   더 빠르게 하려면 이 값을 더 줄이세요(0 이면 사람과 동시에 시작합니다) */
	animation-delay: 1.2s;
}

/* 사람·제품 공통 : 살짝 올라오면서 나타남 */
@keyframes dugHeroAppear {
	from { opacity: 0; transform: translateY(24px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 제자리 등장용 - 지금은 쓰지 않지만 되돌릴 수 있게 남겨둡니다 */
@keyframes dugHeroFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* 애니메이션을 줄이도록 설정한 사용자(멀미·어지럼)에게는 처음부터 그냥 보여줍니다 */
@media (prefers-reduced-motion: reduce) {
	.dug-hero-appear {
		opacity: 1;
		animation: none;
	}
}

/* ----------------------------------------------------------------------------------------
 * 브랜드 링크 카드 4개
 * -------------------------------------------------------------------------------------- */
.dug-main-cards {
	/**
	 * [2026-08-28] 히어로와 한 영역처럼 보이게 붙였습니다.
	 * 처음에는 -18px 로 겹쳤다가, 요청에 따라 20px 내려 지금은 2px 입니다.
	 * 히어로 아래쪽이 흰색으로 페이드되어 있어 겹치지 않아도 이음선은 없습니다.
	 * position/z-index 는 카드가 히어로 위로 올라오게 하기 위한 것입니다.
	 */
	position: relative;
	z-index: 2;
	margin-top: 2px;   /* -18px → 2px : 요청대로 20px 내렸습니다 */
	padding: 0 0 80px;
	background: transparent;   /* 흰 배경을 깔면 페이드가 끊깁니다 */
}

.dug-main-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.dug-main-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	/* [2026-08-28] 아래 여백 46px → 26px.
	   오른쪽 아래 화살표(.dug-main-card-arrow)를 없앤 자리입니다 */
	padding: 26px 22px;
	background: var(--white-color);
	border-radius: 16px;
	/**
	 * 카드 그림자  [2026-08-28]
	 * 예전에는 1px 회색 테두리 + 옅은 그림자였습니다. 테두리 선이 또렷해서
	 * 카드가 배경 위에 '그려진' 느낌이었습니다.
	 * 테두리를 걷고, 넓게 퍼지는 그림자 + 아주 가까운 그림자를 겹쳐
	 * 배경에서 살짝 떠 있는 것처럼 보이게 했습니다.
	 *   1층 : 0 14px 34px  - 넓고 부드러운 번짐 (떠 있는 느낌)
	 *   2층 : 0 2px 8px    - 바닥에 닿는 짧은 그림자 (윤곽 살리기)
	 */
	box-shadow:
		0 14px 34px rgba(4, 24, 63, 0.09),
		0 2px 8px rgba(4, 24, 63, 0.04);
	transition: all 0.4s ease;
}

.dug-main-card:hover {
	transform: translateY(-6px);
	/* 테두리가 없어졌으므로, hover 표시는 그림자 + 얇은 골드 테(0 0 0 1px)로 냅니다 */
	box-shadow:
		0 22px 48px rgba(4, 24, 63, 0.16),
		0 0 0 1px var(--accent-color);
}

/* 카드 아이콘 - 동그란 남색 배경까지 이미지에 포함되어 있어 CSS 배경은 걷어냈습니다 */
.dug-main-card-icon {
	flex: 0 0 auto;
	display: block;
	width: 58px;
	height: 58px;
}

.dug-main-card-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dug-main-card-body strong {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--accent-color);
	color: var(--primary-color);
	font-size: 19px;
	font-weight: 700;
}

.dug-main-card-body em {
	display: block;
	color: var(--text-color);
	font-size: 14px;
	font-style: normal;
	line-height: 1.65em;
}

/* ----------------------------------------------------------------------------------------
 * 가치 배지 4개 (한 덩어리 안에 세로 구분선으로 나눔 - 목업과 동일)
 * -------------------------------------------------------------------------------------- */
.dug-main-value-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	padding: 26px 10px;
	background: var(--secondary-color);
	border-radius: 16px;
}

.dug-main-value {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 22px;
	border-left: 1px solid var(--divider-color);
	transition: all 0.3s ease;
}

.dug-main-value:first-child {
	border-left: 0;
}

/* 배지 아이콘 - 흰 동그라미까지 이미지에 포함되어 있어 CSS 배경은 걷어냈습니다 */
.dug-main-value-icon {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	transition: transform 0.3s ease;
}

.dug-main-value-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 예전에는 hover 때 배경을 골드로 바꿨지만, 이미지 아이콘은 색을 바꿀 수 없습니다.
   대신 살짝 커지게 해서 "누를 수 있는 것"이라는 느낌만 남겼습니다 */
.dug-main-value:hover .dug-main-value-icon {
	transform: scale(1.08);
}

.dug-main-value-body strong {
	display: block;
	margin-bottom: 4px;
	color: var(--primary-color);
	font-size: 17px;
	font-weight: 700;
}

.dug-main-value-body em {
	display: block;
	color: var(--text-color);
	font-size: 13px;
	font-style: normal;
	line-height: 1.55em;
}

/* ----------------------------------------------------------------------------------------
 * 맨 아래 약속 문구  [2026-08-28 이미지 한 장으로 교체]
 * ----------------------------------------------------------------------------------------
 * 예전에는 따옴표 2개(&ldquo;/&rdquo;) + 텍스트 + ::before/::after 골드선을
 * 조합해서 흉내냈습니다.
 * 이제 운영자가 올린 home/quote-strip.png (1188x45 - 선·따옴표·손글씨 문구가
 * 모두 한 장에 들어 있음) 를 그대로 씁니다.
 * 원본 폭보다 크게 늘리면 글씨가 흐려지므로 max-width 를 원본 폭으로 묶었습니다.
 * -------------------------------------------------------------------------------------- */
.dug-main-promise {
	margin-top: 44px;
	text-align: center;
}

.dug-main-promise img {
	display: block;
	width: 100%;
	max-width: 1188px;   /* quote-strip.png 원본 폭 */
	height: auto;
	margin: 0 auto;
}

/* ----------------------------------------------------------------------------------------
 * 반응형
 * -------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {
	.dug-main-hero-title { font-size: 50px; }

	/**
	 * 이 폭에서는 칼럼이 5/7 로 돌아가 상자가 좁아집니다.
	 * 안쪽 비율(제품 45% / 사람 60%)은 그대로 두어도 두 이미지가 같이 작아지므로
	 * 따로 손댈 것이 없습니다. 화면 끝까지 빼내는 폭은 위쪽 min-width 규칙에서
	 * 컨테이너 폭(960px)에 맞춰 따로 계산합니다.
	 */
	.dug-main-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dug-main-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dug-main-value:nth-child(3) { border-left: 0; }
	.dug-main-value:nth-child(3),
	.dug-main-value:nth-child(4) {
		margin-top: 18px;
		padding-top: 22px;
		border-top: 1px solid var(--divider-color);
	}
}

@media only screen and (max-width: 991px) {
	.dug-main-hero { padding: 50px 0 60px; }
	.dug-main-hero-title { font-size: 42px; }
	.dug-main-hero-eyebrow { font-size: 20px; }

	/**
	 * 좁은 화면
	 * 3겹 배치는 aspect-ratio + 퍼센트 좌표라 화면 폭만 줄어도 구도가 그대로
	 * 유지됩니다. 그래서 배치를 손대지 않고 위쪽 여백만 줍니다.
	 * (예전에는 여기서 flex 로 다시 짜는 규칙이 있었는데, 절대배치를 static 으로
	 *  바꿔버려서 제품과 사람이 어긋났습니다)
	 */
	.dug-main-hero-visual { margin-top: 34px; }

	/* 이 폭부터는 글과 이미지가 위아래로 쌓입니다.
	   두 이미지 배치는 위(1199px) 규칙을 그대로 물려받습니다 */

	/* 약속 문구 이미지 - 좁은 화면에서는 위쪽 여백만 줄입니다 */
	.dug-main-promise { margin-top: 34px; }
}

@media only screen and (max-width: 575px) {
	.dug-main-hero-title { font-size: 34px; }
	/**
	 * 히어로 버튼 두 개를 한 줄에  [2026-08-29 운영자 요청]
	 * ----------------------------------------------------------------------------------
	 * 예전에는 width:100% 라 위아래로 쌓였습니다. 이제 반씩 나눠 갖습니다.
	 *
	 * flex: 1 1 0 + min-width: 0
	 *   둘을 정확히 반반으로 만들고(글자 길이가 달라도 폭이 같습니다),
	 *   화면이 좁아지면 글자 폭 밑으로도 줄어들 수 있게 합니다.
	 *   min-width:0 이 없으면 flex 항목이 글자 폭 아래로 안 줄어들어 줄이 넘칩니다.
	 *
	 * font-size: clamp(13px, 4.2vw, 17px)
	 *   화면 폭에 따라 글자가 같이 줄어듭니다. 고정 px 로 두면 320px 짜리 작은
	 *   화면에서 '제품 알아보기' 여섯 글자가 반쪽 칸을 넘겨 잘립니다
	 *   (.btn-default 에 overflow:hidden 이 있어 넘치면 글자가 잘려 보입니다).
	 *   실측 - 320px 화면에서 칸 140px / 글자+여백 131px, 490px 화면에서 224px / 152px.
	 *   English 로 바뀌면 글이 길어지지만 clamp 가 같이 줄여줍니다.
	 *
	 * 좌우 여백을 30/52 에서 16/34 로 줄인 것도 같은 이유입니다.
	 * 화살표도 12px → 10px 로 줄이고 오른쪽 끝에 더 붙였습니다.
	 */
	.dug-main-hero-btn {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.dug-main-hero-btn .btn-default {
		flex: 1 1 0;
		min-width: 0;
		padding: 14px 34px 14px 16px;
		font-size: clamp(13px, 4.2vw, 17px);
		text-align: left;
		white-space: nowrap;
	}

	.dug-main-hero-btn .btn-default::before {
		right: 14px;
		width: 10px;
		height: 10px;
	}
	.dug-main-card-grid { grid-template-columns: minmax(0, 1fr); }
	.dug-main-value-grid { grid-template-columns: minmax(0, 1fr); padding: 18px 8px; }
	.dug-main-value {
		border-left: 0;
	}
	.dug-main-value + .dug-main-value {
		margin-top: 16px;
		padding-top: 20px;
		border-top: 1px solid var(--divider-color);
	}
	/* 문구는 이미지 한 장이라 폭만 좁혀줍니다 */
	.dug-main-promise img { max-width: 100%; }
}

/* ========================================================================================
 * 32. 브랜드 페이지 - 텍스트 칼럼 래퍼
 * ----------------------------------------------------------------------------------------
 * 아래 클래스들은 히어로의 "글이 들어가는 칼럼"을 감싸는 껍데기입니다.
 * 안쪽 요소(제목·본문·버튼)가 각자 스타일을 갖고 있어서 래퍼 자체에는
 * 원래 규칙이 없었는데, 정의가 없으면 나중에 오타로 오해하기 쉬워 명시해 둡니다.
 *
 * 겸해서 아주 넓은 화면에서 한 줄이 너무 길어지지 않게 최대폭만 잡아둡니다.
 * (한글 본문은 한 줄이 길면 읽기 흐름이 끊깁니다)
 * ======================================================================================== */

.dug-main-hero-text,
.dug-about-hero-text,
.dug-biz-hero-text,
.dug-social-hero-text,
.dug-q-hero-text,
.dug-sg-hero-text,
.dug-founder-intro {
	position: relative;
	max-width: 620px;
}

/* 모바일에서는 칼럼이 세로로 쌓이므로 최대폭 제한을 풉니다 */
@media only screen and (max-width: 991px) {
	.dug-main-hero-text,
	.dug-about-hero-text,
	.dug-biz-hero-text,
	.dug-social-hero-text,
	.dug-q-hero-text,
	.dug-sg-hero-text,
	.dug-founder-intro {
		max-width: 100%;
	}
}

/* ========================================================================================
 * 33. 브랜드 기본색 적용 - 상단 메뉴 드롭다운 · 채움 버튼
 * ----------------------------------------------------------------------------------------
 * Dream Up Global 의 주 분위기 색은 검정에 가까운 곤색(--primary-color : #04183F)입니다.
 * 그런데 custom.css 의 기본값은 두 곳에서 강조색(골드)을 배경으로 쓰고 있어
 * 브랜드 분위기와 어긋납니다. 여기서 네이비로 되돌립니다.
 *
 *   custom.css:668  .main-menu ul ul { background: var(--accent-color) }  ← 드롭다운 배경
 *   custom.css:252  .btn-default     { background: transparent }          ← 버튼은 테두리만
 *
 * custom.css 를 직접 고치지 않은 이유는 그 파일이 구입한 테마의 기본 파일이라,
 * 나중에 테마를 갱신하면 덮어써질 수 있기 때문입니다.
 * shop.css 가 가장 마지막에 로드되므로 여기서 덮는 편이 안전합니다.
 * ======================================================================================== */

/* ── 상단 메뉴 드롭다운 : 골드 → 네이비 ─────────────────────────────────────── */
.main-menu ul ul {
	background: var(--primary-color);
	box-shadow: 0 14px 30px rgba(4, 24, 63, 0.18);
}

/* 3차 메뉴(패키지 > VIP팩 등)도 같은 네이비로 */
.main-menu ul ul ul {
	background: var(--navy-section);
}

/**
 * 하위 메뉴 글자
 * 기본 규칙은 hover 시 색을 --primary-color(네이비)로 바꾸는데,
 * 배경이 네이비가 되었으니 그대로 두면 글자가 배경에 묻힙니다. 골드로 바꿉니다.
 */
.main-menu ul ul .nav-item .nav-link:hover,
.main-menu ul ul .nav-item .nav-link:focus {
	color: var(--accent-color);
	background-color: rgba(255, 255, 255, 0.06);
}

/* ── 채움 버튼 2종 (목업 히어로의 버튼 두 개) ────────────────────────────────── */

/**
 * .btn-default 는 원래 "테두리만 + 골드 글자"입니다.
 * 목업의 히어로 버튼은 둘 다 색이 채워진 형태라 변형을 만들었습니다.
 *   .dug-btn-navy  제품 알아보기 - 딥네이비 채움  (브랜드 기본색)
 *   .dug-btn-gold  사업자 등록   - 골드 채움
 *
 * 두 변형 모두 화살표 아이콘을 흰색으로 뒤집어야 합니다.
 * .btn-default::before 가 arrow-accent.svg(골드 화살표)를 쓰기 때문에,
 * 그냥 두면 골드 버튼에서는 화살표가 배경에 묻혀 안 보입니다.
 */
.btn-default.dug-btn-navy {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--white-color);
}

.btn-default.dug-btn-gold {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--white-color);
}

/* 화살표 흰색으로 (골드 SVG 를 밝기0 → 반전 으로 흰색화) */
.btn-default.dug-btn-navy::before,
.btn-default.dug-btn-gold::before {
	filter: brightness(0) invert(1);
}

/**
 * 마우스를 올렸을 때 (::after 가 가운데에서 좌우로 펼쳐지며 덮는 구조)
 *   .dug-btn-navy  네이비 → 흰색 채움   [2026-08-29 운영자 요청]
 *   .dug-btn-gold  골드   → 흰색 채움      [2026-09-10 운영자 요청 - 예전엔 네이비]
 *
 * 흰색으로 채우면 글자와 화살표도 같이 뒤집어야 합니다. 안 그러면 흰 바탕에
 * 흰 글씨가 되어 버튼이 통째로 비어 보입니다. 그래서 아래 세 가지를 묶어서 봅니다.
 *   배경(::after) 흰색  /  글자 네이비  /  화살표 검정
 * 테두리는 네이비 그대로라, 흰 안쪽 + 네이비 테두리 + 네이비 글자가 됩니다.
 */
.btn-default.dug-btn-navy::after {
	background-color: var(--white-color);
}

.btn-default.dug-btn-gold::after {
	background-color: var(--white-color);
}

.btn-default.dug-btn-navy:hover {
	color: var(--primary-color);
}

/* 흰 바탕이 되므로 글자는 골드로 (흰 배경 위 골드 글자용 변수) */
.btn-default.dug-btn-gold:hover {
	color: var(--accent-text);
}

/**
 * hover 시 화살표 (기본 규칙의 45도 회전은 그대로 살아 있습니다)
 *   골드 버튼 - 흰 배경이 되므로 원래 색(arrow-accent.svg = 골드)으로 되돌립니다.
 *               평상시에 걸어둔 흰색화 filter 를 none 으로 끄면 됩니다.
 *               (custom.css 의 `.btn-default:hover::before` 도 흰색화를 걸지만
 *                클래스가 하나 더 많아 여기가 이깁니다)
 *   네이비 버튼 - 흰 배경이 되므로 검정으로. brightness(0) 은 어떤 색이든 검정으로
 *                 만듭니다. 글자색 네이비(#04183F)와는 미세하게 다르지만 12px
 *                 아이콘이라 구분되지 않고, 새 아이콘 파일을 만들 필요가 없습니다.
 */
.btn-default.dug-btn-gold:hover::before {
	filter: none;
}

.btn-default.dug-btn-navy:hover::before {
	filter: brightness(0);
}

/* ========================================================================================
 * 34. 상단 헤더 한 줄 배치  - layout/nav.php
 * ----------------------------------------------------------------------------------------
 * 목표 : [ 왼쪽 로고 ]  [ 가운데 메뉴 ]  [ 오른쪽 로그인·사업자등록·언어 ]  한 줄
 *
 * 예전 문제 : custom.css 의 `.navbar { flex-wrap: wrap }` 때문에 메뉴+아이콘이
 *            한 줄에 안 들어가면 로고가 윗줄로 밀려 2단으로 보였습니다.
 *            여기서 nowrap 으로 바꾸고, 메뉴 영역이 남는 공간을 먹으면서
 *            가운데 정렬되도록 합니다.
 *
 * 1차 메뉴가 6개(회사소개~뉴스·이벤트)라 글자크기와 항목 간격을 조금 줄였습니다.
 * custom.css 기본값은 18px / margin 0 25px 인데 그대로 두면 1200px 화면에서 넘칩니다.
 * ======================================================================================== */

@media only screen and (min-width: 992px) {

	.navbar {
		flex-wrap: nowrap;
		gap: 18px;
	}

	/* 로고는 줄어들지 않게 고정 */
	.navbar-brand {
		flex: 0 0 auto;
	}

	.main-menu {
		flex: 1 1 auto;
		min-width: 0;                 /* 자식이 넘칠 때 줄어들 수 있게 */
		justify-content: space-between;
		gap: 18px;
	}

	/* 메뉴를 가운데로 : 남는 공간을 모두 먹고 안에서 center 정렬 */
	.main-menu .navbar-collapse {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}

	.main-menu .nav-menu-wrapper {
		width: auto;
	}

	.main-menu ul.navbar-nav#menu {
		justify-content: center;
		flex-wrap: nowrap;
	}

	/* 오른쪽 영역은 내용 크기만 차지 */
	.header-action-details {
		flex: 0 0 auto;
	}

	/* 6개 메뉴가 한 줄에 들어가도록 글자·간격 축소 */
	.main-menu ul .nav-item {
		margin: 0 14px;
	}

	.main-menu ul .nav-item .nav-link {
		font-size: 16px;
		white-space: nowrap;
	}
}

/* 1200px 미만에서는 더 좁게 */
@media only screen and (min-width: 992px) and (max-width: 1399px) {
	.main-menu ul .nav-item { margin: 0 9px; }
	.main-menu ul .nav-item .nav-link { font-size: 15px; }
	.navbar-brand img { max-width: 132px; }
}

/* ----------------------------------------------------------------------------------------
 * 로그인 / 사업자 등록 버튼 (로그인 전에만 노출)
 * -------------------------------------------------------------------------------------- */
.dug-header-auth {
	display: flex;
	align-items: center;
	gap: 8px;
}

/**
 * 헤더용 작은 버튼
 * .btn-default 기본값은 본문용(18px / 좌우 여백 큼 / 오른쪽에 화살표)입니다.
 * 헤더에서는 화살표를 빼고 크기를 줄여야 6개 메뉴와 함께 한 줄에 들어갑니다.
 */
.btn-default.dug-btn-sm {
	font-size: 15px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: 8px;
	white-space: nowrap;
}

/* 화살표 아이콘 제거 (목업 헤더 버튼에는 화살표가 없습니다) */
.btn-default.dug-btn-sm::before {
	display: none;
}

.btn-default.dug-btn-sm:hover::before {
	display: none;
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
	.btn-default.dug-btn-sm {
		font-size: 14px;
		padding: 10px 14px;
	}
}

/* 모바일 : 슬릭나브가 메뉴를 대신하므로 버튼만 작게 남깁니다 */
@media only screen and (max-width: 991px) {
	.dug-header-auth {
		gap: 6px;
	}
	.btn-default.dug-btn-sm {
		font-size: 13px;
		padding: 9px 12px;
	}
}

/* [2026-09-03] 예전에는 여기서 아주 좁은 화면(≤479px)의 '로그인' 버튼을 숨겼습니다.
 *   @media (max-width:479px) { .dug-header-auth a:first-child { display:none } }
 * 운영자가 "모바일에서 로그인이 안 보인다"고 해서 걷어냈습니다.
 * 대신 검색 아이콘을 감춰 자리를 만들고 버튼을 줄였습니다 → 아래 41절 */

/* ========================================================================================
 * 35. 푸터 Co-Branding 밴드  - layout/footer.php
 * ----------------------------------------------------------------------------------------
 * 목업(16-37-49) 맨 아래 밴드를 그대로 옮긴 것입니다.
 *   [ Dream Up Global 로고 ]  [ NUTRIMENTS ]  [ 파트너십 문구 2줄 ]
 *
 * 참고 이미지에는 항목 사이 세로 구분선이 없어서 넣지 않았습니다.
 * 아래에 네이비 본 푸터가 바로 이어지므로 밴드 자체에는 아래 테두리를 두지 않고,
 * 위쪽에만 얇은 선을 둬서 앞 섹션과 구분합니다.
 * ======================================================================================== */

.dug-cobrand {
	/* 목업 밴드의 아주 옅은 밝은 배경 */
	background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FD 100%);
	border-top: 1px solid var(--divider-color);
	padding: 26px 0;
}

.dug-cobrand-inner {
	display: flex;
	align-items: center;
	gap: 30px;
}

/**
 * 세 칸 비율 2 : 2 : 6  [2026-08-28]
 * 예전에는 로고 두 개가 '내용 크기'(flex:0 0 auto)였고 문구만 남는 폭을 차지해서
 * 왼쪽에 몰려 보였습니다. 이제 폭을 비율로 나눠 가집니다.
 *   드림업 로고 2 / NUTRIMENTS 로고 2 / 파트너십 문구 6
 * flex-basis 를 0 으로 두는 이유 : 내용 크기를 무시하고 비율만으로 나누게 하려는 것입니다.
 */
.dug-cobrand-logo { flex: 2 1 0; }
.dug-cobrand-nut  { flex: 2 1 0; }
.dug-cobrand-msg  { flex: 6 1 0; }

.dug-cobrand-logo img {
	max-width: 168px;
	height: auto;
}

/* NUTRIMENTS : 목업 밴드에서 잘라낸 실제 로고 (배경 투명) */
.dug-cobrand-nut img {
	max-width: 186px;
	height: auto;
}

/* ── 파트너십 문구 ────────────────────────────────────────────────────────── */
.dug-cobrand-msg {
	flex: 1 1 auto;
	margin: 0;
	color: var(--text-color);
	font-size: 14px;
	line-height: 1.85em;
}

/* ── 반응형 ───────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1199px) {
	.dug-cobrand-inner { gap: 30px; }
	.dug-cobrand-logo img { max-width: 148px; }
	.dug-cobrand-nut img  { max-width: 164px; }
	.dug-cobrand-msg { font-size: 13px; }
}

@media only screen and (max-width: 991px) {
	.dug-cobrand { padding: 22px 0; }

	/* 로고 두 개는 한 줄, 문구는 아래 줄로 내립니다 */
	.dug-cobrand-inner {
		flex-wrap: wrap;
		gap: 18px 34px;
	}

	.dug-cobrand-msg {
		flex: 1 1 100%;
	}
}

@media only screen and (max-width: 575px) {
	.dug-cobrand-inner { gap: 14px 22px; }
	.dug-cobrand-logo img { max-width: 124px; }
	.dug-cobrand-nut img  { max-width: 138px; }
	.dug-cobrand-msg { font-size: 12.5px; line-height: 1.75em; }
}

/* ----------------------------------------------------------------------------------------
 * 36. 푸터 링크 칼럼 4열
 * ----------------------------------------------------------------------------------------
 * 고객센터 칼럼이 늘어 쇼핑/고객안내/고객센터/관련기관 4개가 되었습니다.
 * custom.css 기본값은 `.footer-links { max-width: 30% }` 라서 4개면
 * 4 x 30% = 120% 로 넘쳐 2줄(2+2)로 접힙니다. 4열이 한 줄에 들어가게 바꿉니다.
 * (gap 이 30px 이므로 3칸 x 30px = 90px 를 빼고 나눕니다)
 * -------------------------------------------------------------------------------------- */
@media only screen and (min-width: 992px) {
	.footer-links-box .footer-links {
		max-width: calc(25% - 22.5px);
		flex: 1 1 calc(25% - 22.5px);
	}
}

/* 태블릿 : 2열 */
@media only screen and (min-width: 576px) and (max-width: 991px) {
	.footer-links-box .footer-links {
		max-width: calc(50% - 15px);
		flex: 1 1 calc(50% - 15px);
	}
}

/* ========================================================================================
 * 33. 푸터  [2026-08-28 the7.io/consulting 하단 참고]
 * ----------------------------------------------------------------------------------------
 * 참고 사이트의 하단은
 *   1) 딥네이비 바탕에 아주 옅은 대각선 리본 몇 겹이 지나가는 배경
 *   2) 칼럼 제목 아래 짧은 골드 밑줄
 *   3) 연락처가 '아이콘 + 값 + 작은 설명' 3조각
 *   4) 맨 아래 얇은 구분선 위에 저작권 / 오른쪽에 배지
 * 이 네 가지가 특징입니다. 배경 리본은 이미지가 아니라 CSS 그라디언트로 그렸습니다.
 * (이미지로 하면 화면 폭마다 잘리고, 용량도 늘어납니다)
 *
 * 기존 푸터 규칙은 custom.css(2740행 부근)에 있습니다. 여기서는 그 위에 덧칠만 합니다.
 * shop.css 가 custom.css 보다 나중에 실리므로 이쪽이 이깁니다.
 * ======================================================================================== */

.main-footer {
	position: relative;
	overflow: hidden;
	/**
	 * 바탕 : 기본 네이비(#04183F)보다 살짝 어둡게 깔고, 오른쪽 아래를 옅게 밝혀
	 * 참고 사이트처럼 '빛이 스며드는' 느낌을 만듭니다.
	 */
	background-color: #071531;
	background-image:
		radial-gradient(120% 100% at 88% 96%, rgba(52, 96, 168, 0.28) 0%, rgba(7, 21, 49, 0) 62%),
		radial-gradient(90% 80% at 8% 4%, rgba(255, 255, 255, 0.05) 0%, rgba(7, 21, 49, 0) 58%);
}

/**
 * 대각선 무늬  [2026-08-28 운영자가 올린 bottom.svg 로 교체]
 * 처음에는 CSS 그라디언트로 리본을 흉내냈는데, 참고 사이트의 실제 배경 도형을
 * 받았으므로 그것을 씁니다. (assets/img/bottom.svg - 1920x1080)
 *
 * svg 안의 도형은 회색(#404040~#AAAAAA) 그라디언트입니다. 그대로 얹으면 네이비
 * 위에 회색 얼룩처럼 보이므로
 *   opacity 0.16 + mix-blend-mode: screen
 * 으로 '밝히기'만 하게 했습니다. 그러면 색은 네이비를 유지한 채 결만 살아납니다.
 * 무늬를 더/덜 보이게 하려면 opacity 만 조절하세요.
 * (mix-blend-mode 를 모르는 아주 오래된 브라우저에서는 아주 옅은 회색으로 보입니다)
 */
.main-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url(../img/bottom.svg) center bottom / cover no-repeat;
	opacity: 0.16;
	mix-blend-mode: screen;
}

/* 글·이미지는 리본 위로 */
.main-footer > .container {
	position: relative;
	z-index: 2;
}

/* ----------------------------------------------------------------------------------------
 * 왼쪽 칼럼 : 로고 · 소개문 · 연락처
 * -------------------------------------------------------------------------------------- */
.about-footer {
	max-width: 340px;
}

.footer-logo img {
	max-width: 190px;   /* 흰 로고가 두 줄(DreamUp/GLOBAL)이라 조금 크게 */
}

.about-footer-desc {
	margin: 26px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 15px;
	line-height: 1.85em;
}

/* (왼쪽 칼럼의 연락처 3줄은 없앴습니다 - 사업자 정보와 중복이라 2026-08-28 제거.
   custom.css 의 .about-footer-contact-list 기본 규칙은 그대로 남아 있습니다) */

/* ----------------------------------------------------------------------------------------
 * 링크 칼럼 : 제목 아래 골드 밑줄
 * -------------------------------------------------------------------------------------- */
.footer-links h2 {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 22px;
	font-size: 19px;
}

.footer-links h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 62px;
	height: 2px;
	background: var(--accent-color);
}

.footer-links ul li {
	margin-bottom: 13px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

/* ----------------------------------------------------------------------------------------
 * 사업자 정보 (전자상거래법 필수 표기)
 * -------------------------------------------------------------------------------------- */
.footer-company-info {
	margin-top: 54px;
	padding-top: 28px;
	border-top: 1px solid var(--dark-divider-color);
}

.footer-company-info p {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 13px;
	line-height: 1.9em;
}

/* 항목 사이 구분 막대 - span 사이에만 들어갑니다 */
.footer-company-info p span + span::before {
	content: '|';
	margin: 0 10px;
	color: rgba(255, 255, 255, 0.25);
}

.footer-company-info .biz-info-link {
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 4px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	transition: all 0.3s ease;
}

.footer-company-info .biz-info-link:hover {
	border-color: var(--accent-color);
	color: var(--accent-color);
}

/* ----------------------------------------------------------------------------------------
 * 맨 아래 : 저작권 + 약관링크 + 배지
 * -------------------------------------------------------------------------------------- */
.footer-copyright {
	align-items: center;
	padding: 30px 0 40px;
	margin-top: 34px;
}

.footer-copyright-text {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.footer-copyright-text p {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}

.footer-policy-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-policy-links li a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	transition: all 0.3s ease;
}

.footer-policy-links li a:hover {
	color: var(--accent-color);
}

/**
 * 공정거래위원회 / 공제조합 배지
 * ----------------------------------------------------------------------------
 * ⚠ `a img` 까지 써야 custom.css 를 이깁니다              [2026-09-10 수정]
 *   custom.css 2926줄이
 *     .footer-payment-options ul li a img { width: 100%; max-width: 30px }
 *   로 잡고 있습니다. 클래스 1개 + 태그 4개라 여기 `li img`(태그 3개)보다
 *   명시도가 높습니다. 그래서 2026-09-07 에 로고를 <a> 로 감싼 순간부터
 *   폭이 30px 로 눌려 배지가 찌그러져 보였습니다. (그 전에는 <img> 만 있어서
 *   이 규칙이 아예 안 걸렸습니다 - 마크업을 바꾸며 잠들어 있던 규칙이 깨어난 것)
 *   같은 `a img` 로 받아 폭 제한을 풀고 높이만 지정해, 원래 비율대로 나옵니다.
 *   원본 크기 : footImg01 185x45 / footImg02 214x39
 */
/**
 * 크기는 **높이 하나로만** 조절합니다.               [2026-09-10 한 단 줄임 40 → 30]
 * 폭은 `width:auto` 라 원본 비율대로 따라오므로, 높이를 줄이면 가로도 같이 줄어듭니다.
 * 흰 상자를 키우는 padding 도 같이 줄여야 상자만 헐렁해지지 않습니다(content-box).
 *   높이 30 + padding 6*2 = 상자 42px,  가로는 공정위 123 / 공제조합 164 (+padding 20)
 */
.footer-payment-options ul li img,
.footer-payment-options ul li a img {
	height: 30px;
	width: auto;
	max-width: none;
	padding: 6px 10px;
	border-radius: 4px;
}

/* 좁은 화면 : 두 배지가 한 줄에 들어가도록 한 단 더 (비율은 그대로) */
@media only screen and (max-width: 767px) {
	.footer-payment-options ul li img,
	.footer-payment-options ul li a img { height: 24px; padding: 5px 9px; }
}

@media only screen and (max-width: 479px) {
	.footer-payment-options ul li img,
	.footer-payment-options ul li a img { height: 21px; padding: 5px 8px; }
}

@media only screen and (max-width: 991px) {
	.about-footer { max-width: 100%; margin-bottom: 40px; }
	.footer-company-info { margin-top: 34px; }
	.footer-copyright { padding: 24px 0 30px; }
}

@media only screen and (max-width: 575px) {
	.footer-company-info p span + span::before { display: none; }
	.footer-company-info p span { display: block; }
}


/* ========================================================================================
 * 37. 본문이 빈 페이지의 여백  .dug-page-blank
 * ----------------------------------------------------------------------------------------
 * 쓰는 곳 : company/management.php (경영철학 - 2026-08-30 현재 내용 준비 중)
 *
 * 상단 제목띠(page-header-slim)만 있고 본문이 없으면 그 밑에 푸터가 곧바로 붙어서
 * 화면이 찌그러져 보입니다. 글자 없이 높이만 잡아 주는 빈 칸입니다.
 * 본문 글이 정해지면 뷰에서 이 div 를 지우고, 여기 절도 함께 지우면 됩니다.
 * ======================================================================================== */
.dug-page-blank {
	min-height: 320px;
}

@media only screen and (max-width: 767px) {
	.dug-page-blank {
		min-height: 200px;
	}
}

/* ========================================================================================
 * 36. 상품 상세 탭 & 리뷰·문의 버튼 색 맞추기   [2026-08-30 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 이 부분은 구 스킨(legacy/style.css · legacy/shop.css)이 색을 잡고 있어서
 * 상품 상세만 사이트와 다른 색이 나오고 있었습니다.
 *
 *   탭 선택 밑줄     주황 #fcb800  → 곤색  (--primary-color)
 *   전체보기         청록 #33cccc  → 곤색 테두리 + 흰 바탕
 *   리뷰작성/문의하기 청록 #33cccc  → 골드 채움 (--accent-color)
 *   리뷰 작성하기(작은 버튼) 청록  → 곤색 테두리
 *
 * 구 스킨 파일을 직접 고치지 않는 이유
 *   같은 파일을 옛 화면들이 함께 쓰고 있어 어디까지 번질지 알 수 없습니다.
 *   shop.css 가 맨 마지막에 실리므로 여기서 덮는 편이 되돌리기도 쉽습니다.
 * ======================================================================================== */

/* --- 상품 상세 탭 -------------------------------------------------------------------- */

/* 선택된 탭 아래 3px 선. 구 스킨은 a:before 로 그립니다(주황) */
.ps-product--detail .ps-tab-list li a:before {
	background-color: var(--primary-color, #04183F);
}

/* 선택된 탭 글자도 곤색으로 (구 스킨은 #000) */
.ps-product--detail .ps-tab-list li.active a,
.ps-product--detail .ps-tab-list li a:hover {
	color: var(--primary-color, #04183F);
}

/* --- 리뷰 / 상품문의 아래쪽 버튼 두 개 ------------------------------------------------ */

/**
 * 전체보기 : 테두리만 있는 보조 버튼
 * 선택자에 클래스를 두 개 겹쳐 구 스킨(0,2,0)과 같은 무게로 맞추고,
 * 이 파일이 뒤에 실리므로 이깁니다.
 */
.__product_review--content--btns .__list,
.__product_inquiry--content--btns .__list {
	color: var(--primary-color, #04183F);
	border-color: var(--primary-color, #04183F);
	background-color: var(--white-color, #fff);
	transition: all 0.3s ease;
}

.__product_review--content--btns .__list:hover,
.__product_inquiry--content--btns .__list:hover {
	color: var(--white-color, #fff);
	background-color: var(--primary-color, #04183F);
}

/* 리뷰작성하기 / 상품문의하기 : 주 액션이라 골드 채움 (헤더의 '사업자 등록'과 같은 결) */
.__product_review--content--btns .__write,
.__product_inquiry--content--btns .__write {
	color: var(--white-color, #fff);
	border-color: var(--accent-color, #B9822C);
	background-color: var(--accent-color, #B9822C);
	transition: all 0.3s ease;
}

.__product_review--content--btns .__write:hover,
.__product_inquiry--content--btns .__write:hover {
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #04183F);
	background-color: var(--primary-color, #04183F);
}

/* 리뷰 요약 상자 안의 작은 '리뷰 작성하기' (모서리 4px 그대로 두고 색만) */
.__product_review--status--block.__writing .__btn {
	color: var(--primary-color, #04183F);
	border-color: var(--primary-color, #04183F);
	transition: all 0.3s ease;
}

.__product_review--status--block.__writing .__btn:hover {
	color: var(--white-color, #fff);
	background-color: var(--primary-color, #04183F);
}

/* ========================================================================================
 * 37. 주문서 왼쪽 칸을 상자 세 개로   [2026-08-30 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * /shop/checkout 오른쪽 '결제수단선택' 은 둥근 테두리 상자인데 왼쪽은 그냥 나열이라
 * 좌우가 따로 놀았습니다. 왼쪽도 같은 상자로 묶습니다.
 *
 *   주문하시는 분 / 받으시는 분   product/components/checkout_address.php
 *   후원인                        product/components/checkout_sponsor.php
 *   (오토십 결제일도 같은 껍데기라 오토십 주문에서는 상자 하나가 더 붙습니다)
 *
 * 상자 값은 오른쪽 결제 상자(legacy/shop.css 198줄 .ps-block--checkout-total)와
 * 같게 맞췄습니다. 그쪽을 고치면 여기도 같이 고쳐야 좌우가 계속 맞습니다.
 * ======================================================================================== */

.ps-form--checkout .ps-form__billing-info {
	margin-bottom: 24px;
	padding: 20px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}

/**
 * 상자 머리띠
 * 상자마다 <h3 class="ps-form__heading"> 가 바로 자식으로 하나씩 있습니다
 * (주문하시는 분 · 받으시는 분 · 후원인 · 오토십 결제일 - 모두 같은 모양).
 *   [2026-08-30] '받으시는 분' 만 제목+버튼이 한 줄인 .is-card-head 였는데,
 *   버튼을 배송지 선택 줄로 옮기면서 다른 상자와 같아졌습니다.
 * 좌우 음수 margin 으로 상자 안쪽 여백(20px)만큼 밖으로 빼서 선을 끝까지 긋습니다.
 */
.ps-form--checkout .ps-form__billing-info > .ps-form__heading {
	/**
	 * 아래 여백  [2026-08-30 운영자 요청]
	 *   16px → 24px → 34px 로 두 번 늘렸습니다.
	 *   구분선과 첫 줄(이름·결제일) 사이 숨 쉴 자리입니다.
	 *   이 값 하나가 왼쪽 상자 전부(주문하시는 분·받으시는 분·후원인·오토십 결제일)에
	 *   함께 걸립니다. 한 상자만 다르게 하려면 여기 말고 그 상자에 따로 줘야 합니다.
	 *
	 * 위 여백은 일부러 0 입니다.
	 *   원래 -20px 로 적혀 있었지만 아래 규칙에 덮여 한 번도 먹은 적이 없어서,
	 *   지금 화면은 '제목이 상자 위 여백 20px 아래에서 시작하는' 모양으로 굳었습니다.
	 *   이제 와서 -20px 을 살리면 제목이 20px 위로 튀어 올라 모양이 바뀝니다.
	 *   요청은 '이름 위를 벌려 달라' 였으므로 아래 여백만 건드립니다.
	 */
	margin: 0 -20px 34px;
	padding: 14px 20px;
	border-bottom: 1px solid #f0f0f0;
}

/**
 * 제목 글자 모양 (두 경우 공통)
 *
 * ⚠ 여기서 margin 을 건드리면 안 됩니다.				[2026-08-30 버그 수정]
 *   원래 이 규칙에 `margin-top: 0; margin-bottom: 0;` 이 있었습니다.
 *   선택자 명시도가 바로 위 머리띠 규칙과 **똑같이 (0,3,0)** 인데 파일에서 뒤에
 *   있어서, 머리띠의 `margin: -20px -20px 34px` 중 **위아래가 통째로 0 으로**
 *   덮이고 좌우(-20px)만 살아남았습니다.
 *   그래서 "구분선과 이름 사이를 벌려 달라"는 요청에 값을 16 → 24 → 34 로 올려도
 *   화면이 꿈쩍도 하지 않았습니다. 값이 아니라 **진 싸움**이었습니다.
 *   margin 리셋이 실제로 필요한 곳은 머리띠 '안에' 들어 있는 제목뿐이라,
 *   아래 규칙으로 그 경우에만 따로 줍니다.
 */
.ps-form--checkout .ps-form__billing-info .ps-form__heading {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary-color, #04183F);
}


/**
 * [배송지목록] 버튼						[2026-08-30 운영자 요청]
 * 예전에는 '받으시는 분' 머리띠 안에 있었는데(.is-card-head) 제목 아래로 밀려
 * 자리가 어정쩡했습니다. 배송지 선택 라디오 줄 오른쪽 끝으로 옮기고 높이를 낮춥니다.
 *   margin-left:auto  → .addr-inline 이 flex 라 남는 자리를 전부 왼쪽에 주고
 *                       버튼을 줄 끝으로 밀어냅니다.
 *   padding          → .ps-btn 기본이 15px 45px 이라 라디오 줄에 비해 너무 큽니다.
 * (머리띠는 이제 '주문하시는 분' 과 똑같이 제목만 들어가므로 .is-card-head 규칙은
 *  모두 지웠습니다 - 되돌리려면 checkout_address.php.bak-20260830 을 보세요)
 */
/* =============================================================================
 * 주문완료 - 주문정보 / 배송지 / 결제수단 상자		[2026-08-30 운영자 요청]
 * -----------------------------------------------------------------------------
 * 예전에는 제목(h4)이 상자 **밖**에 떠 있고, 내용만 각진 네모(구 CSS 의
 * .ps-block__panel : 1px #d1d1d1, radius 4px)에 들어 있었습니다.
 * 주문서 왼쪽 상자들과 같은 모양으로 맞춥니다 — 둥근 테두리 상자 안에
 * 제목이 머리띠로 들어가고, 그 아래 구분선, 그 아래 내용이 죽 이어집니다.
 *
 * 마크업은 손대지 않았습니다.
 *   h4 와 .ps-block__panel 은 **나란히 붙어 있는 형제**라, 위쪽 모서리만 둥근
 *   머리 + 아래쪽 모서리만 둥근 몸통으로 나눠 칠하면 한 상자로 보입니다.
 *   (감싸는 div 를 새로 넣으면 세 군데를 다 고쳐야 하고 되돌리기도 번거롭습니다)
 *   그래서 그림자는 넣지 않았습니다 - 두 조각 사이에 그림자 이음매가 생깁니다.
 * ========================================================================== */

.ps-block--shipping h4 {
	margin: 0;
	padding: 14px 20px;
	border: 1px solid #e5e7eb;
	border-bottom: 1px solid #f0f0f0;
	border-radius: 12px 12px 0 0;
	background: var(--white-color, #fff);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary-color, #04183F);
}

.ps-block--shipping .ps-block__panel {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid #e5e7eb;
	border-top: 0;                  /* 머리띠의 구분선이 경계 역할을 합니다 */
	border-radius: 0 0 12px 12px;
	background: var(--white-color, #fff);
}

/**
 * 오른쪽 '주문상품' 제목만 왼쪽 '주문정보' 와 같은 크기로  [2026-08-30 운영자 요청]
 * 구 CSS 는 이 칸의 <strong> 을 전부 14px 로 잡습니다
 * (legacy/style.css 6396줄 .ps-block--checkout-order figure figcaption strong).
 * 그대로 키우면 상품명·수량·금액까지 다 커지므로, **맨 위 제목 한 줄만** 잡습니다.
 * 그 제목은 .ps-block__content 의 첫 figure 라 :first-child 로 골라냅니다.
 */
.ps-block--checkout-order .ps-block__content > figure:first-child figcaption strong {
	font-size: 18px;
	line-height: 1.4;
}

/* =============================================================================
 * 배송지 목록 팝업 버튼 두 개					[2026-08-30 운영자 요청]
 * -----------------------------------------------------------------------------
 * 닫기 : 글자 버튼 → 동그란 X 아이콘
 * 적용 : 곤색으로 채우고, 마우스를 올리면 흰 배경으로 비웁니다
 *        (상품상세 장바구니·바로구매와 같은 동작입니다)
 *
 * ⚠ 적용 버튼에 :not() 을 다섯 개 붙인 이유
 *   class 에 ps-btn 이 있어서 15절 "주 액션 버튼"(0,6,0)에도 함께 걸립니다.
 *   그냥 `.addr-modal__apply`(0,1,0) 로 쓰면 색이 15절에 밀려 골드로 나옵니다.
 *   같은 사슬을 붙여 (0,7,0) 으로 올렸습니다.
 *
 * ⚠ 호버 테두리를 border 가 아니라 inset 그림자로 그리는 이유
 *   .ps-btn 은 border:none + content-box 라 테두리를 실제로 주면 버튼이
 *   상하좌우 2px 씩 커져 호버할 때마다 덜컥거립니다.
 * ========================================================================== */

/* 닫기 : 동그란 X */
.addr-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--divider-color, #04183F1A);
	border-radius: 50%;
	background: var(--white-color, #fff);
	color: var(--primary-color, #04183F);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: all .2s ease;
}

.addr-modal__close:hover {
	border-color: var(--primary-color, #04183F);
	background: var(--primary-color, #04183F);
	color: var(--white-color, #fff);
}

/* 적용 : 평소 곤색 */
.addr-modal__apply.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black) {
	padding: 10px 35px;
	color: var(--white-color, #fff);
	border-color: var(--primary-color, #04183F);
	background-color: var(--primary-color, #04183F);
	box-shadow: inset 0 0 0 2px var(--primary-color, #04183F);
}

/* 적용 : 마우스를 올리면 흰 배경 + 곤색 글자 */
.addr-modal__apply.ps-btn:not(.ps-btn--outline):not(.ps-btn--gray):not(.ps-btn--post):not(.ps-btn--reverse):not(.ps-btn--black):hover {
	color: var(--primary-color, #04183F);
	border-color: transparent;
	background-color: var(--white-color, #fff);
	box-shadow: inset 0 0 0 2px var(--primary-color, #04183F);
}

.ps-form--checkout .addr-inline .ps-btn.addr-btn {
	margin-left: auto;
	padding: 8px 16px;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

/* 상자 안 마지막 줄은 아래 여백을 없애 상자가 헐렁해 보이지 않게 합니다 */
.ps-form--checkout .ps-form__billing-info > .form-group:last-child {
	margin-bottom: 0;
}

/**
 * 상단 제목띠 바로 밑 여백  [2026-08-30 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 주문서 본문(.ps-section--shopping)은 구 스킨에서 위 여백이 0 입니다
 * (legacy/style.css 12509줄 `padding: 0 0 50px`). 예전에는 위에 회색 브레드크럼과
 * 통이미지 배너가 있어서 티가 안 났는데, 그것들을 걷어내고 남색 제목띠로 바꾸면서
 * 상자들이 띠에 그대로 붙어 버렸습니다.
 *
 * 선택자를 `.page-header +` 로 시작한 이유
 *   같은 `.ps-checkout.ps-section--shopping` 을 구 주문서(product/checkout1.php)도
 *   씁니다. 그쪽은 위에 배너와 `.ps-section__header`(margin-top:40px)가 따로 있어
 *   여백이 이미 있습니다. 여기서 한 번에 잡으면 그 화면만 두 배로 벌어집니다.
 *   **제목띠 바로 다음에 오는 본문**에만 걸어 그 화면은 건드리지 않습니다.
 *   (장바구니·로그인은 각자 .page-cart / .page-login 의 padding 120px 을 씁니다)
 * -------------------------------------------------------------------------------------- */
.page-header + .ps-page--simple .ps-checkout.ps-section--shopping {
	padding-top: 50px;
}

@media only screen and (max-width: 767px) {
	.page-header + .ps-page--simple .ps-checkout.ps-section--shopping {
		padding-top: 30px;
	}
}


/* ========================================================================================
 * 38. 상품유형별 진열 페이지  /shop/skin			[2026-09-03 신설]
 * ----------------------------------------------------------------------------------------
 * 관련 파일
 *   theme/shop/dreamup/product/skin.php        화면
 *   theme/shop/dreamup/skin/_type_card.php     카드
 *   application/controllers/shop/Skin.php         컨트롤러
 *
 * 이 절의 선택자는 모두 `.xen-typepage` / `.xen-typesec` / `.xen-tc` 로 시작합니다.
 * 다른 화면과 이름이 겹치지 않으니 여기 규칙을 고쳐도 딴 데는 안 움직입니다.
 *
 * ⚠ 카드 안 글자 크기·색은 구 스킨(legacy/style.css)의 `.product-item` 계열과
 *   **일부러 따로** 뒀습니다. 그쪽을 손대면 메인·목록·검색 카드가 같이 움직입니다.
 * ====================================================================================== */

.xen-typepage {
	padding: 60px 0 100px;
	background: #fff;
}

/* 진열할 유형이 하나도 없을 때의 안내 */
.xen-typepage__empty {
	padding: 80px 20px;
	text-align: center;
	color: #888;
	font-size: 15px;
	border: 1px solid #eee;
	background: #fafafa;
}

/* ---------------------------------------------------------------------------------------
 * 38-0. 배너 네 자리 (최상단 · 상단 · 중간 · 하단)			[2026-09-04 클래스 구조로 교체]
 * ----------------------------------------------------------------------------------------
 * ⚠ 배너의 **모양**에 관한 CSS 는 여기 없습니다.
 *   theme/common/css/banner-layout.css 로 옮겼습니다 - 관리자 배너관리 화면의
 *   미리보기가 같은 파일을 써야 실제 화면과 어긋나지 않기 때문입니다.
 *   (.bnc / .bnl 로 시작하는 규칙이 전부 그 파일에 있습니다)
 *
 * 여기에는 **이 페이지에서의 자리와 여백**만 남깁니다.
 *
 * 되돌리려면 shop.css.bak-20260904-class 에 옛 절 네 개
 * (38-0 최상단 · 38-0-0 히어로 · 38-0-1 배너 위 글자 · 38-0-3 중간배너)가 그대로 있습니다.
 * ------------------------------------------------------------------------------------- */

/**
 * 최상단 배너는 남색 제목띠 자리를 그대로 대신하므로 여백을 주지 않습니다.
 * (아래 본문 .xen-typepage 가 자기 padding-top 60px 으로 띄웁니다)
 */

/* 상단 배너 : 대분류 버튼과 첫 묶음 사이 */
.xen-typepage__headbn {
	margin-bottom: 60px;
}

/* 중간 배너 : 묶음과 묶음 사이. 위 여백은 묶음 사이 간격(.xen-typesec 70px)과 같은 값 */
.xen-typepage__midbn {
	margin-top: 70px;
}

/* 하단 배너 : 마지막 묶음 아래 */
.xen-typepage__bottombn {
	margin-top: 70px;
}

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

	.xen-typepage__headbn   { margin-bottom: 36px; }
	.xen-typepage__midbn,
	.xen-typepage__bottombn { margin-top: 46px; }
}

/* ---------------------------------------------------------------------------------------
 * 38-0-2. 대분류 바로가기 버튼   [2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 제목띠와 첫 묶음(MD 추천) 사이에 깔리는 알약 모양 버튼입니다.
 * 운영자가 준 시안대로 **테두리와 글자를 곤색**으로 하고, 마우스를 올리면 곤색으로 채웁니다.
 * (처음에 골드로 했다가 2026-09-03 운영자 요청으로 곤색으로 바꿨습니다)
 * 목록은 product/skin.php 가 분류관리의 대분류에서 뽑습니다(스킨에 이름을 안 박습니다).
 *
 * 색은 새로 만들지 않고 스킨 변수 --primary-color(#04183F 딥네이비) 하나만 씁니다.
 * 제목·다크섹션과 같은 색이라 페이지 톤이 하나로 맞습니다.
 *
 * ⚠ 쇼핑몰 상단의 알약 메뉴(.xen-shop-nav-list)와 **일부러 따로** 뒀습니다.
 *   그건 메뉴관리(nv_nav)를 읽는 바이고 2026-08-30 에 목록화면에서 빠졌습니다.
 *   모양이 비슷해도 합치면 그쪽 색까지 같이 움직입니다.
 * ------------------------------------------------------------------------------------- */
.xen-typepage__cats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	/**
	 * 위아래 여백을 20px 씩 줄였습니다  [2026-09-04 운영자 요청]
	 *   위  : 60px → 40px,  아래 : 60px → 40px
	 *
	 * 위쪽 여백은 이 버튼줄이 아니라 바깥 .xen-typepage 의 padding-top(60px)입니다.
	 * 그 값을 줄이면 버튼이 없는 경우(분류가 다 걸러진 때)까지 같이 올라붙으므로,
	 * 버튼줄만 -20px 로 끌어올립니다. 버튼이 없으면 아무 것도 달라지지 않습니다.
	 * 되돌리려면 아래 두 줄을 margin-bottom: 60px 한 줄로 되돌리면 됩니다.
	 * (백업 shop.css.bak-20260904-cats-margin)
	 */
	margin-top: -20px;
	margin-bottom: 40px;		/* 아래 첫 묶음 제목과 붙지 않게 */
}

.xen-typepage__cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 110px;
	height: 42px;
	padding: 0 22px;
	border: 1px solid var(--primary-color, #04183F);
	border-radius: 999px;
	background: var(--white-color, #fff);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--primary-color, #04183F);
	white-space: nowrap;
	transition: all 0.25s ease-in-out;
}

/* 마우스 올리면 시안의 첫 버튼처럼 색을 채웁니다 */
.xen-typepage__cat:hover,
.xen-typepage__cat:focus-visible {
	background: var(--primary-color, #04183F);
	color: var(--white-color, #fff);
}

/* ---------------------------------------------------------------------------------------
 * 38-1. 묶음(섹션) 공통
 * ------------------------------------------------------------------------------------- */
.xen-typesec {
	margin-top: 70px;
}

/* 첫 묶음은 제목띠 바로 아래라 위 여백을 없앱니다 */
.xen-typesec--first {
	margin-top: 0;
}

.xen-typesec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;		/* 제목 왼쪽 · 더보기 오른쪽 */
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e5e5e5;
}

/* 더보기 : 배너슬라이더 스킨(main.40)의 것과 같은 모양으로 맞춥니다 */
.xen-typesec__more {
	font-size: 13px;
	color: #999;
	white-space: nowrap;
}

.xen-typesec__more:hover {
	color: var(--primary-color, #04183F);
	text-decoration: underline;
}

.xen-typesec__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color, #04183F);
	letter-spacing: -0.02em;
}

/* 시안의 밑줄 강조 제목 (베스트) */
.xen-typesec__title--underline {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* ---------------------------------------------------------------------------------------
 * 38-2. feature 묶음 : 왼쪽 큰 카드 1 + 오른쪽 작은 카드 3   (MD 추천)
 * ----------------------------------------------------------------------------------------
 * .xen-mainfeature 는 쇼핑몰 **메인**의 같은 모양 스킨(skin/main.30.skin.php)입니다.
 * 규칙을 한 벌만 두고 같이 걸어 둡니다 - 한쪽만 모양이 달라지는 일이 없게.
 * ------------------------------------------------------------------------------------- */
.xen-typesec__feature,
.xen-mainfeature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: stretch;		/* 왼쪽 큰 카드가 줄 높이를 꽉 채우게 (아래 참고) */
}

/* 오른쪽 목록은 카드 3장을 같은 높이로 세로로 쌓습니다 */
.xen-typesec__side,
.xen-mainfeature__side {
	display: grid;
	gap: 16px;
}

/**
 * 왼쪽 큰 카드 높이를 오른쪽 목록에 맞춥니다  [2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 증상 : 왼쪽 큰 카드가 오른쪽 작은 카드 3장보다 180px 가까이 길어, 오른쪽 아래가
 *        허옇게 비어 보였습니다.
 * 원인 : 큰 사진칸이 정사각(인라인 `aspect-ratio` = 관리자 스킨설정 200x200)이라
 *        높이가 **칸 폭에 딸려** 정해집니다. 컨테이너가 1200px 면 한 칸이 592px 이고
 *        거기에 글칸(약 130px)이 붙어 720px 을 넘습니다. 오른쪽은 작은 카드
 *        (사진칸 180px) 3장 + 간격이라 620px 안팎입니다.
 *
 * 해결 : 배너슬라이더(38-3)에서 쓴 것과 **같은 방법**입니다.
 *        큰 카드를 `position:absolute` 로 띄우면 줄 높이 계산에서 빠지므로
 *        **줄 높이는 오른쪽 목록이 정하고, 큰 카드가 그 높이에 맞춰 채워집니다.**
 *        사진칸은 남는 높이를 다 먹고(`flex:1`), 사진은 그 안에서 contain 으로 맞춥니다.
 *
 * ⚠ 사진의 `aspect-ratio`·`height` 는 인라인 style 이라 `!important` 가 필요합니다.
 *   (`_type_card.php` 가 관리자 설정값을 인라인으로 박습니다)
 *   → [[dreamupg-css-specificity-trap]]
 * ⚠ 높이를 바꾸고 싶으면 이 절이 아니라 **오른쪽 작은 카드의 사진칸 폭**
 *   (`.xen-tc--row` 의 `grid-template-columns` 첫 값)을 조절하세요. 그게 줄 높이입니다.
 * ⚠ 아래 규칙을 `min-width:992px` 로 묶은 이유 : 한 칸으로 접히면 옆에 기준이 될
 *   오른쪽 칸이 없어 띄우기가 오히려 해가 됩니다(사진이 min-height 로 굳음).
 *   38-3 배너처럼 max-width 로 되돌리지 않은 것은, 사진의 `aspect-ratio` 가 관리자
 *   설정에서 온 인라인값이라 한 번 !important 로 덮으면 원래 값으로 되돌릴 방법이
 *   없기 때문입니다(되돌리려면 1/1 을 손으로 박아야 하고, 설정을 바꾸면 어긋납니다).
 */
@media only screen and (min-width: 992px) {

	.xen-typesec__hero,
	.xen-mainfeature__hero {
		position: relative;
		min-height: 380px;	/* 안전망. 오른쪽 목록이 보통 이보다 높아 실제로는 안 걸립니다 */
	}

	.xen-typesec__hero > .xen-tc,
	.xen-mainfeature__hero > .xen-tc {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
	}

	/* 사진칸이 남는 높이를 전부 먹습니다 (글칸은 제 높이만) */
	.xen-tc--hero .xen-tc__thumb {
		flex: 1 1 auto;
		min-height: 0;		/* 안 주면 사진 원본 높이가 최소높이로 남습니다 */
	}

	.xen-tc--hero .xen-tc__thumb > a {
		height: 100%;
	}

	.xen-tc--hero .xen-tc__thumb img {
		height: 100% !important;
		aspect-ratio: auto !important;	/* 인라인 200/200 해제 - 높이는 칸이 정합니다 */
		object-fit: contain;
	}
}

/* ---------------------------------------------------------------------------------------
 * 38-3. 왼쪽 세로배너 + 오른쪽 슬라이더   (스킨 main.40.skin.php · 베스트)
 * ----------------------------------------------------------------------------------------
 * 이름에 페이지(typesec)를 넣지 않았습니다. 같은 스킨 파일을 쇼핑몰 메인에서도
 * 고를 수 있어서, /shop/skin 전용 이름이면 메인에서 모양이 깨집니다.
 * ------------------------------------------------------------------------------------- */
.xen-bannerslider {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

/**
 * 배너 칸
 * ----------------------------------------------------------------------------------------
 * 배너가 오른쪽 상품칸보다 100px 넘게 길어져 아래가 혼자 삐져나왔습니다  [2026-09-03 운영자 요청]
 * 원인이 두 가지였습니다.
 *   1) 아래 img 에 `min-height:520px` 이 있어, 오른쪽 칸이 그보다 짧아도 줄 높이를 밀어올렸습니다.
 *   2) img 의 `height:100%` 는 부모 높이가 정해져 있어야 먹습니다. 여기서는 부모 높이가
 *      "자식(=img) 높이" 로 정해지는 관계라 100% 가 무시되고 원본 비율(427x651)대로 길어졌습니다.
 *
 * 그래서 img 를 `position:absolute` 로 띄웁니다. 띄운 요소는 줄 높이 계산에 끼지 않으므로
 * **줄 높이는 오른쪽 상품칸이 정하고, 배너는 그 높이에 딱 맞춰 채워지고 잘립니다.**
 * 배너를 더 길게/짧게 하고 싶으면 이 파일이 아니라 오른쪽 칸(카드 사진 크기)을 조절하세요.
 */
.xen-bannerslider__banner {
	position: relative;
	overflow: hidden;
	min-height: 380px;		/* 안전망. 오른쪽 칸은 카드 때문에 보통 이보다 높아 실제로는 안 걸립니다 */
}

/* 배너는 칸 높이를 그대로 채우고 넘치는 부분은 잘라냅니다 (시안의 세로 통사진) */
.xen-bannerslider__banner img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.xen-bannerslider__panel {
	min-width: 0;			/* 슬라이더가 그리드 칸을 밀어내지 않게 (calc 함정 방지) */
	display: flex;
	flex-direction: column;
}

.xen-bannerslider__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	border-bottom: 1px solid #e5e5e5;
}

/* 제목 - 시안의 밑줄 강조 */
.xen-bannerslider__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--primary-color, #04183F);
	letter-spacing: -0.02em;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.xen-bannerslider__more {
	font-size: 13px;
	color: #999;
	white-space: nowrap;
}

.xen-bannerslider__more:hover {
	color: var(--primary-color, #04183F);
	text-decoration: underline;
}

.xen-bannerslider__subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 16px;
}

.xen-bannerslider__sub {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}

.xen-bannerslider__navs {
	display: inline-flex;
	gap: 4px;
}

/* 좌우 화살표 : 테두리 없는 회색 갈매기 (시안 모양) */
.xen-bannerslider__nav {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	color: #999;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.xen-bannerslider__nav:hover {
	color: var(--primary-color, #04183F);
}

/* 끝에 닿아 더 넘길 수 없을 때 (Swiper 가 붙이는 클래스) */
.xen-bannerslider__nav.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

.xen-bannerslider__slider {
	width: 100%;
	padding-bottom: 26px;		/* 아래 스크롤바 자리 */
}

.xen-bannerslider__slider .swiper-scrollbar {
	left: 0;
	width: 100%;
	height: 3px;
	background: #eee;
}

.xen-bannerslider__slider .swiper-scrollbar-drag {
	background: #333;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------------------
 * 38-4. grid 묶음 : 격자   (신상품 · 추천 · 할인)
 * ----------------------------------------------------------------------------------------
 * 한 줄 개수는 뷰가 인라인으로 넘기는 --xen-tc-per-row (관리자 스킨설정값) 를 씁니다.
 * ------------------------------------------------------------------------------------- */
.xen-typesec__grid,
.xen-mainfeature__grid {
	display: grid;
	grid-template-columns: repeat(var(--xen-tc-per-row, 4), minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

/* ---------------------------------------------------------------------------------------
 * 38-5. 카드 공통  .xen-tc
 * ------------------------------------------------------------------------------------- */
.xen-tc {
	position: relative;
	background: #fff;
	border: 1px solid #ececec;
	overflow: hidden;
}

.xen-tc__thumb {
	position: relative;
	display: block;
	background: #f4f4f4;			/* 시안처럼 사진 뒤를 옅은 회색으로 */
}

.xen-tc__thumb > a {
	display: block;
}

/* 상품 패키지 사진은 잘리면 안 되므로 contain 으로 맞춥니다 (비율은 인라인 aspect-ratio) */
.xen-tc__thumb img {
	display: block;
	width: 100%;
	object-fit: contain;
}

.xen-tc__body {
	padding: 18px 20px 20px;
}

/* 상품명 + 오른쪽 아이콘 두 개를 한 줄에 */
.xen-tc__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.xen-tc__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #111;
	letter-spacing: -0.02em;
}

.xen-tc__title a {
	color: inherit;
}

.xen-tc__title a:hover {
	color: var(--primary-color, #04183F);
}

/* 하트 · 가방 아이콘 */
.xen-tc__act {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 0 auto;
}

.xen-tc__act a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 17px;
	color: #bbb;
	line-height: 1;
}

.xen-tc__act a:hover {
	color: var(--primary-color, #04183F);
}

/* 장바구니(가방)만 시안처럼 주황색 */
.xen-tc__act .xen-tc__cart {
	color: #F2762E;
}

.xen-tc__act .xen-tc__cart:hover {
	color: #d55f19;
}

/* 구성 (item_description) */
.xen-tc__desc {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #777;
	word-break: keep-all;
}

/* 금액 줄 */
.xen-tc__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.xen-tc__price strong {
	font-size: 17px;
	font-weight: 700;
	color: #111;
}

.xen-tc__price del {
	font-size: 14px;
	color: #bbb;
}

/* 할인율 : 시안처럼 빨강 */
.xen-tc__price .xen-tc__off {
	font-size: 15px;
	font-weight: 700;
	font-style: normal;
	color: #e02020;
}

/* 비회원에게 금액을 감출 때 / 전화문의 상품 */
.xen-tc__price-hide {
	font-size: 14px;
	color: #aaa;
}

.xen-tc__pv {
	font-size: 12px;
	color: #999;
}

/* 유형 배지 - 금액 아래 (feature · grid 카드) */
.xen-tc__badge {
	display: inline-block;
	margin-top: 12px;
	padding: 2px 7px;
	border: 1px solid #e02020;
	font-size: 11px;
	line-height: 1.5;
	color: #e02020;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------------------
 * 38-6. 카드 변형
 * ------------------------------------------------------------------------------------- */

/* hero : MD 추천 왼쪽 큰 카드 - 사진을 넉넉하게, 글자도 한 단계 크게 */
.xen-tc--hero {
	height: 100%;
}

.xen-tc--hero .xen-tc__body {
	padding: 26px 28px 30px;
}

.xen-tc--hero .xen-tc__title {
	font-size: 22px;
}

.xen-tc--hero .xen-tc__thumb img {
	padding: 30px;
}

/* row : MD 추천 오른쪽 작은 카드 - 사진 왼쪽 / 글 오른쪽 */
.xen-tc--row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: center;
}

.xen-tc--row .xen-tc__thumb img {
	padding: 16px;
}

.xen-tc--row .xen-tc__body {
	padding: 20px 24px;
}

/* grid : 격자 카드 */
.xen-tc--grid .xen-tc__thumb img {
	padding: 20px;
}

/* slide : 베스트 슬라이더 카드 - 테두리 없이 사진칸만 회색, 하트는 사진 위 */
.xen-tc--slide {
	border: 0;
	background: none;
}

.xen-tc--slide .xen-tc__thumb {
	background: #f2f2f2;
}

.xen-tc--slide .xen-tc__thumb img {
	padding: 14px;
}

.xen-tc--slide .xen-tc__body {
	padding: 14px 2px 0;
}

/* 사진 오른쪽 위에 얹는 하트 */
.xen-tc__wish {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 18px;
	line-height: 1;
	color: #999;
}

.xen-tc__wish:hover {
	color: #e02020;
}

/* 상품명 위에 오는 유형 태그 (시안의 [NEW] 자리) */
.xen-tc__tag {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #00a3d3;
}

.xen-tc--slide .xen-tc__title {
	font-size: 15px;
	font-weight: 400;
	color: #333;
}

.xen-tc--slide .xen-tc__desc {
	margin-top: 4px;
	font-size: 13px;
	color: #aaa;
}

.xen-tc--slide .xen-tc__price {
	margin-top: 8px;
	gap: 6px;
}

/* ---------------------------------------------------------------------------------------
 * 38-7. 태블릿 · 휴대폰
 * ----------------------------------------------------------------------------------------
 * 배너 묶음은 좁아지면 배너를 위로 올려 한 칸으로 쌓습니다.
 * feature 묶음도 큰 카드 아래로 작은 카드가 이어지게 한 칸으로 만듭니다.
 * ------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1199px) {

	.xen-bannerslider {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		gap: 28px;
	}

	.xen-typesec__grid,
	.xen-mainfeature__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	.xen-bannerslider {
		grid-template-columns: minmax(0, 1fr);
	}

	/**
	 * 한 칸으로 접히면 배너 위에 상품칸이 없어 '줄 높이' 라는 기준 자체가 사라집니다.
	 * 그래서 띄우기(absolute)를 풀고 원래대로 그림이 제 높이를 갖게 되돌립니다.
	 * 안 되돌리면 부모의 min-height(380px)만 남아 배너가 380px 로 고정돼 버립니다.
	 */
	.xen-bannerslider__banner {
		min-height: 0;
	}

	.xen-bannerslider__banner img {
		position: static;
		height: auto;
		max-height: 360px;
	}

	.xen-typesec__feature,
	.xen-mainfeature {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.xen-typepage {
		padding: 36px 0 60px;
	}

	.xen-typesec {
		margin-top: 46px;
	}

	.xen-typesec__title {
		font-size: 20px;
	}

	/* ----------------------------------------------------------------------------------
	 * 분류 버튼 : 모바일에서도 한 줄로			[2026-09-03 운영자 요청]
	 * ----------------------------------------------------------------------------------
	 * 휴대폰에서 3개 + 1개로 접혀 두 줄이 됐습니다. `flex-wrap: nowrap` 으로 붙들고
	 * 글자·여백·최소폭을 줄여 한 줄에 넣습니다.
	 * (`min-width: 110px`(38-0-2절)를 0 으로 푸는 것이 먼저입니다 — 그게 남아 있으면
	 *  네 개 합이 440px 이라 어떤 폭으로도 안 들어갑니다)
	 *
	 * 폭 계산 (현재 대분류 4개 : 단품 제품 · VIP 스타트팩 · 오토십 팩 · 대용량 할인팩)
	 *   글자 길이 합계는 글자크기 F 의 약 22.2배입니다(한글 1자 ≈ 1F).
	 *   필요폭 = 22.2F + (좌우여백 × 2 × 4) + (간격 × 3)
	 *     F=14, 여백 10 → 311 + 80 + 18 = 409px  (480px 이상에서 들어감)
	 *     F=12, 여백 6  → 266 + 48 + 12 = 326px  (360px 화면에서 겨우 들어감 → 479px 블록)
	 *
	 * ⚠ 대분류가 5개 이상으로 늘면 이 계산이 깨집니다. 그때는 글자를 더 줄이기보다
	 *   `overflow-x: auto` 로 옆으로 미는 방식이 낫습니다(더 작아지면 못 읽습니다).
	 * -------------------------------------------------------------------------------- */
	.xen-typepage__cats {
		flex-wrap: nowrap;		/* 줄바꿈 금지 - 이 한 줄이 핵심입니다 */
		gap: 6px;
		/**
		 * 휴대폰은 예전 그대로 둡니다  [2026-09-04]
		 * 여기 위쪽 여백은 .xen-typepage 의 padding-top 36px 뿐이라, PC 처럼
		 * 20px 을 더 빼면 16px 만 남아 배너/제목띠에 붙어 버립니다.
		 * 그래서 PC 에서 준 margin-top:-20px 만 되돌립니다.
		 */
		margin-top: 0;
		margin-bottom: 40px;
	}

	.xen-typepage__cat {
		min-width: 0;			/* 110px 최소폭 해제 */
		flex: 0 1 auto;			/* 모자라면 줄어들도록 */
		overflow: hidden;		/* 아주 좁은 기기에서 글자가 칸 밖으로 새지 않게 */
		height: 38px;
		padding: 0 10px;
		font-size: 14px;
	}

	.xen-typesec__grid,
	.xen-mainfeature__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.xen-tc__body {
		padding: 14px 14px 16px;
	}

	.xen-tc__title {
		font-size: 15px;
	}

	.xen-tc--hero .xen-tc__title {
		font-size: 18px;
	}

	.xen-tc--hero .xen-tc__body {
		padding: 18px 18px 20px;
	}

	/* 작은 카드는 사진 칸을 줄여 글자가 눌리지 않게 합니다 */
	.xen-tc--row {
		grid-template-columns: 118px minmax(0, 1fr);
	}

	.xen-tc--row .xen-tc__body {
		padding: 12px 14px;
	}

	.xen-tc__desc {
		font-size: 13px;
	}

	.xen-tc__price strong {
		font-size: 15px;
	}
}

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

	/* 분류 버튼 : 360px 화면에서도 한 줄에 들어가도록 한 단계 더  [2026-09-03] */
	.xen-typepage__cats {
		gap: 4px;
		margin-bottom: 32px;
	}

	.xen-typepage__cat {
		height: 34px;
		padding: 0 6px;
		font-size: 12px;
		letter-spacing: -0.2px;
	}

	/* 휴대폰에서는 격자도 한 줄에 하나씩 (사진이 너무 작아지지 않게) */
	.xen-typesec__grid,
	.xen-mainfeature__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/**
	 * 베스트 슬라이더는 좁은 휴대폰에서도 두 개씩 보여줍니다  [2026-09-03 운영자 요청]
	 * (개수는 main.40.skin.php 의 slidesPerView 가 정합니다 - 여기는 글자만 맞춥니다)
	 * 360px 화면이면 카드 하나가 155px 안팎이라, 글자만 조금씩 줄여 상품명이 세 줄로
	 * 늘어지거나 금액 옆 PV 가 아래로 떨어지지 않게 합니다.
	 *
	 * ⚠ 안쪽 여백(.xen-tc--slide .xen-tc__body 의 `padding: 14px 2px 0`)은 건드리지 않습니다.
	 *   이 카드는 시안대로 사진 아래 글이 좌우 끝에 붙는 평면 모양이라, 여백을 주면
	 *   글이 안으로 밀려 들어가 다른 화면폭과 모양이 달라집니다.
	 */
	.xen-tc--slide .xen-tc__title {
		font-size: 14px;
	}

	.xen-tc--slide .xen-tc__desc {
		font-size: 12px;
	}

	.xen-tc--slide .xen-tc__price strong {
		font-size: 14px;
	}
}


/* ========================================================================================
 * 39. 목록 제목 줄의 정렬 셀렉트를 오른쪽 끝으로		[2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 상품목록(skin/_product_list_page.php)의 제목 줄
 *   「단품 제품 (7)」 ………………………………………………… [ 최신순 ▾ ]
 * 데스크톱은 .product-category-filter-header 가 space-between 이라 이미 오른쪽 끝인데,
 * 휴대폰(≤767px)에서 셀렉트가 제목 아래로 내려가 왼쪽에 붙어 있었습니다.
 *
 * 원인 : custom.css 의 767px 미디어쿼리가 .product-category-result-info 에
 *        width:100% 를 줘서 한 줄을 통째로 먹고 줄바꿈됩니다.
 *        (그 상태에서 space-between 은 칸이 하나뿐이라 왼쪽 정렬처럼 보입니다)
 *
 * 왼쪽 분류 사이드바(.page-single-sidebar)의 같은 이름 헤더는 건드리면 안 되므로
 * 오른쪽 목록칸(.product-item-list-box) 안으로만 한정합니다. 그래야 명시도(0,2,0)도
 * custom.css 원본(0,1,0)보다 높아 미디어쿼리 안에서 덮입니다 → dreamupg-css-specificity-trap
 * ===================================================================================== */

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

	/* 한 줄을 다 먹지 않게 되돌리고, 남는 자리는 왼쪽 여백으로 밀어 오른쪽 끝에 붙입니다. */
	.product-item-list-box .product-category-result-info {
		width: auto;
		margin-left: auto;
		justify-content: flex-end;
	}

	/* 제목이 길어 줄바꿈이 일어나더라도 셀렉트는 그 줄의 오른쪽 끝에 남습니다.
	   (max-width:50% 를 풀어 제목이 먼저 줄어들게 두면 대개 한 줄에 같이 들어갑니다) */
	.product-item-list-box .product-category-filter-title {
		max-width: none;
		min-width: 0;
		flex: 1 1 auto;
	}

	.product-item-list-box .product-category-filter-title h2 {
		margin-bottom: 0;
	}
}


/* ========================================================================================
 * 40. 모바일 상품상세 갤러리 : 썸네일 줄 대신 좌우 슬라이더		[2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 요청 : "모바일에서는 아래 이미지 여러 개 보여주지 말고, 통 이미지 하나를 좌우로 넘기게.
 *         확대는 하지 말고, 좌우 화살표도 보여주고, 터치로도 넘어가게."
 *
 * 하는 일 (≤991px 에서만, PC 는 지금 그대로 썸네일 + 마우스오버 확대)
 *   ① 큰 이미지 아래 썸네일 줄(.xen-thumbs)을 감춥니다
 *   ② 좌우 화살표를 항상 보이게 합니다
 *   ③ 확대(scale)와 확대 커서를 막습니다
 *
 * ② 를 따로 손대야 하는 이유
 *   화살표 자체는 예전부터 slick 이 만들어 붙이고 있었습니다(main.js slickConfig).
 *   그런데 legacy/style.css 8567줄이 `visibility:hidden; opacity:0` 으로 숨겨두고
 *   `.ps-product__gallery:hover` 일 때만 보여줍니다. 손가락에는 hover 가 없으니
 *   휴대폰에서는 화살표가 영영 나타나지 않았습니다.
 *
 * 함께 고친 곳
 *   - assets/js/main.js  : 모바일이면 fade 를 꺼서 손가락을 따라 밀리는 슬라이드로
 *   - product/index.php  : 마우스오버 확대를 PC(마우스 있는 기기)에서만 켬
 *
 * 참고 : 사진이 한 장뿐이면 slick 이 화살표를 아예 만들지 않습니다
 *        (slideCount <= slidesToShow 일 때 DOM 에 붙이지 않습니다). 따로 감출 필요 없습니다.
 * ===================================================================================== */

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

	/* ① 아래 썸네일 줄은 감춥니다 (마크업은 그대로 두어 PC 에서는 계속 씁니다) */
	.ps-page--product .xen-thumbs { display: none; }

	/* ② 좌우 화살표 : hover 없이 항상 보이게 + 손가락으로 누를 만한 크기로 */
	.ps-page--product .ps-product--detail .ps-product__gallery { position: relative; }

	.ps-page--product .ps-product--detail .ps-product__gallery .slick-arrow {
		visibility: visible;
		opacity: 1;
		width: 40px;
		height: 40px;
		font-size: 20px;
		color: var(--primary-color);
		background-color: rgba(255, 255, 255, 0.85);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		border-radius: 8px;
	}

	.ps-page--product .ps-product--detail .ps-product__gallery .slick-arrow:first-child { left: 10px; }
	.ps-page--product .ps-product--detail .ps-product__gallery .slick-arrow:last-child  { right: 10px; }

	/* 끝(첫 장·마지막 장)에 닿아 더 갈 수 없는 쪽은 흐리게 하고 눌리지 않게 합니다.
	   infinite:false 라 slick 이 그때 .slick-disabled 를 붙여줍니다. */
	.ps-page--product .ps-product--detail .ps-product__gallery .slick-arrow.slick-disabled {
		opacity: 0.25;
		pointer-events: none;
	}

	/* 화살표를 눌러도 배경이 주황(#fcb800)으로 바뀌지 않게 — 터치에서는 hover 가
	   한 번 붙으면 손을 떼도 남아서 눌린 채로 보입니다 (legacy/style.css 8597줄) */
	.ps-page--product .ps-product--detail .ps-product__gallery .slick-arrow:hover {
		color: var(--primary-color);
		background-color: rgba(255, 255, 255, 0.85);
	}

	/* ③ 확대 금지 : 확대 커서도, 혹시 남아 있는 scale 도 되돌립니다 */
	.ps-page--product .ps-product__gallery .item { cursor: default; }
	.ps-page--product .ps-product__gallery .item img { transform: none !important; }
}


/* ========================================================================================
 * 41. 모바일 헤더 : 좁은 화면에 로그인 버튼 살리기		[2026-09-03 운영자 요청]
 *     └─ 검색 아이콘은 상품 화면에서만, 휴대폰에서도 보이게	[2026-09-11 운영자 지시]
 * ----------------------------------------------------------------------------------------
 * 요청 : "모바일에서 로그인이 안 보인다. 검색 아이콘은 안 보이게 하고
 *         대신 로그인 버튼이 제대로 보이게."
 *
 * 왜 로그인이 없었나
 *   34절 아래에 있던 `@media (max-width:479px) { .dug-header-auth a:first-child { display:none } }`
 *   가 '로그인'만 숨기고 있었습니다. 휴대폰(360px)에서 헤더 한 줄에
 *     로고 · 검색 · 로그인 · 사업자 등록 · 국기 · 햄버거
 *   여섯 개가 다 안 들어가서 넣어둔 임시 조치였습니다. 그 규칙은 지웠습니다.
 *
 * 어떻게 자리를 만들었나 (360px 기준 실측 대신 계산)
 *   ① 검색 아이콘 li 를 통째로 감춤            −30px (아이콘 20 + 항목 간격 10)
 *   ② 로고를 90px 로                            −16px
 *   ③ 버튼 글자 13→12px, 좌우 여백 12→8px      −20px (두 버튼 합)
 *   ④ 항목·버튼·바깥 간격을 한 단계씩 줄임      −20px
 *   ⑤ 국기 버튼 여백 축소                       −8px
 *   합쳐서 약 94px 이 남고, '로그인' 버튼(약 48px)이 들어갑니다.
 *
 * 검색을 감추는 폭을 767px 로 잡은 이유
 *   태블릿 가로(768~991px)는 아직 자리가 넉넉해서 검색을 남겨두는 편이 낫습니다.
 *   햄버거(slicknav)는 991px 부터 나오지만, 좁아서 문제가 되는 건 휴대폰뿐입니다.
 *
 * 검색 모달(#headerSearchModal)은 이 li 안에 들어 있습니다. 모달을 여는 곳이
 * 그 안의 버튼 하나뿐이라(nav.php 281줄) li 를 감춰도 다른 데가 깨지지 않습니다.
 *
 * ----------------------------------------------------------------------------------------
 * 2026-09-11 : 위 ① 을 CSS 에서 걷어냈습니다
 * ----------------------------------------------------------------------------------------
 * 새 지시 : "검색아이콘은 상품을 보여주는 페이지에서만 나오게. 모바일에서는
 *            안 나오는데, 상품을 보여주는 페이지에서는 모바일에서도 보이게."
 *
 * 화면 폭으로 감추던 것을 **화면 성격**으로 판정하게 바꿨습니다. 검색 li 자체를
 * 상품 화면에서만 그리므로(nav.php · is_shop_product_page()) 여기서 폭으로
 * 감출 일이 없어졌습니다. 그래서 max-width:767px 의 display:none 은 지웠습니다.
 *
 * 대신 ① 이 벌어준 30px 을 다른 데서 되찾아야 합니다. 검색이 **있는** 화면의
 * 휴대폰 헤더는 9/3 계산보다 30px 빡빡해지고, `.header-action-details ul` 은
 * flex-wrap:wrap (custom.css 734줄)이라 넘치면 국기·버튼이 **아래로 떨어집니다.**
 *
 * 되찾은 곳 (≤479px, 합계 약 −27px ≒ 검색 아이콘 20 + 항목간격 6)
 *   아이콘 24→20px −4  /  항목 간격 8→6px −6  /  버튼 좌우 여백 8→6px −8
 *   버튼 사이 4→3px −1  /  국기 여백 6→4px −4  /  바깥 간격 10→8px −4
 * 로고(90px)와 버튼 글자(12px)는 건드리지 않았습니다 — 화면을 옮길 때마다
 * 로고 크기가 달라 보이고, 12px 밑으로 내리면 읽기 어려워집니다.
 *
 * ⚠ 이 압축은 body.has-header-search 안에서만 걸립니다(header.php 가 붙입니다).
 *   검색이 없는 화면까지 좁히면 글자만 작아지고 얻는 게 없습니다.
 * ⚠ 그래서 **판정이 두 군데서 어긋나면 안 됩니다.** nav.php(아이콘)와
 *   header.php(body 클래스)가 같은 함수 shop_header_search_visible() 를 봅니다
 *   (helpers/layout_shop_helper.php).
 * ===================================================================================== */

/* ── 휴대폰 : 검색이 있는 화면만 한 단계 더 압축 ───────────────────────────── */
@media only screen and (max-width: 479px) {

	/* 검색 아이콘 (custom.css 838줄의 24px 을 덮습니다) */
	body.has-header-search .header-action-details ul li.dug-header-search button img {
		max-width: 20px;
	}

	/* 아이콘 항목 사이 · 로그인↔사업자등록 사이 · 로고↔메뉴 바깥 간격 */
	body.has-header-search .header-action-details ul { gap: 6px; }
	body.has-header-search .dug-header-auth { gap: 3px; }
	body.has-header-search .navbar { gap: 8px; }
	body.has-header-search .main-menu { gap: 8px; }

	/* 헤더 버튼 두 개 (로그인 · 사업자 등록) — 좌우 여백만. 글자는 12px 그대로 */
	body.has-header-search .btn-default.dug-btn-sm { padding: 8px 6px; }

	/* 국기(언어 선택) 버튼 */
	body.has-header-search .xen-lang-select .xen-lang-btn { padding: 5px 4px; }
}

/* ── 아주 좁은 화면(≤479px) : 로그인 + 사업자 등록 두 개가 다 들어가도록 압축 ── */
@media only screen and (max-width: 479px) {

	/* ② 로고 (위쪽 767px 블록의 139px 을 덮습니다) */
	.navbar-brand img { max-width: 90px; }

	/* ④ 바깥 간격 : 로고↔메뉴, 메뉴묶음 안, 아이콘 항목 사이 */
	.navbar { gap: 10px; }
	.main-menu { gap: 10px; }
	.header-action-details ul { gap: 8px; }
	.dug-header-auth { gap: 4px; }

	/* ③ 헤더 버튼 두 개 (로그인 · 사업자 등록) */
	.btn-default.dug-btn-sm {
		font-size: 12px;
		padding: 8px 8px;
		border-radius: 6px;
	}

	/* ⑤ 국기(언어 선택) 버튼 */
	.xen-lang-select .xen-lang-btn {
		gap: 4px;
		padding: 5px 6px;
	}
}


/* ========================================================================================
 * 42. 주문서 결제수단 버튼을 모바일에서도 한 줄로		[2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 대상 : /shop/checkout 의 「결제수단선택」
 *        무통장입금 · 카드결제 · 현장결제 · 복수카드  (product/checkout.php 130줄)
 *        결제수단은 관리자 설정에 따라 2~4개로 달라집니다.
 *
 * 증상 : PC 는 한 줄인데 휴대폰에서는 3개 + 1개로 접혀 두 줄이 됐습니다.
 * 원인 : 버튼이 그냥 inline-block 나열(legacy/shop.css 232줄 `margin-right:6px`)이라
 *        폭이 모자라면 자연스럽게 줄바꿈됩니다. 게다가 legacy/style.css 2137줄
 *        `.ps-btn--sm { padding: .5rem 2rem }` 의 좌우 여백이 20px 씩이라
 *        버튼 하나가 90px 을 넘습니다. 4개면 376px — 360px 화면에 들어갈 수 없습니다.
 *
 * 해결 : 휴대폰에서만 flex 한 줄(`flex-wrap: nowrap`)로 묶고, 남은 폭을 넷이 똑같이
 *        나눠 갖게 합니다(`flex: 1 1 0`). 글자가 들어갈 만큼만 좌우 여백을 줄입니다.
 *
 * 폭 계산 (360px 화면 기준)
 *   360 − 24(컨테이너 여백) − 2(테두리) − 40(상자 머리띠 좌우 여백 20+20) = 294
 *   버튼 간격 6px × 3 = 18 을 빼고 넷으로 나누면 한 칸 69px.
 *   가장 긴 '무통장입금' 이 12px 글자로 약 54px + 좌우 여백 8px = 62px → 들어갑니다.
 *
 * PC·태블릿(≥768px)은 손대지 않습니다. 지금도 한 줄이고, flex 로 균등분할하면
 * 넓은 화면에서 버튼 하나가 200px 씩 늘어나 오히려 어색해집니다.
 * ===================================================================================== */

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

	.pay-methods {
		display: flex;
		flex-wrap: nowrap;		/* 줄바꿈 금지 - 이 한 줄이 핵심입니다 */
		gap: 6px;
	}

	.pay-methods .pay-btn {
		flex: 1 1 0;			/* 남은 폭을 똑같이 나눠 갖기 */
		min-width: 0;
		margin: 0;				/* legacy/shop.css 의 margin-right:6px 대신 위 gap 사용 */
		padding: 10px 4px;		/* legacy/style.css .ps-btn--sm 의 .5rem 2rem 를 덮습니다 */
		font-size: 12px;
		line-height: 1.2;
		letter-spacing: -0.3px;	/* '무통장입금' 다섯 글자가 안전하게 들어가도록 */
		white-space: nowrap;
		text-align: center;
	}
}


/* ========================================================================================
 * 43. 주문서 「주문상품」 상자를 모바일에서도 PC 처럼			[2026-09-03 운영자 요청]
 * ----------------------------------------------------------------------------------------
 * 대상 : /shop/checkout 의 주문상품 상자
 *        product/components/checkout_order.php · product/checkout1.php 371줄
 *
 * 증상 : PC 는  [구매금액 ────────── 500,000원]  처럼 좌우 끝으로 벌어지는데,
 *        휴대폰에서는 「구매금액1,650,000원」 이 딱 붙은 채 상자가 화면 폭의 절반쯤에서
 *        끝나고, 글자가 상자 밖으로 삐져나왔습니다. 배송비 줄도 마찬가지였습니다.
 *
 * 원인 : 표에 `ps-table--responsive` 가 붙어 있고, legacy/style.css 10996줄의
 *        `@media (max-width:768px)` 가 tbody·tr 을 `display:block` 으로 바꿉니다.
 *        그런데 `td` 는 그대로 `table-cell` 이라, 블록이 된 tr 안에서 브라우저가
 *        **익명 표(anonymous table)** 를 하나 만들어 감쌉니다. 익명 표의 폭은
 *        내용에 맞춰 줄어드는 shrink-to-fit 이라 줄 전체를 채우지 않습니다.
 *        그 안의 `.checkout__purchase__price { width:100% }` 도 결국 줄어든 칸의
 *        100% 라서 좁고, flex 에 남는 자리가 없으니 `space-between` 이 일을 못 해
 *        라벨과 금액이 붙어버립니다.
 *        (legacy 의 그 블록은 `td[data-label]` 이 있는 표를 전제로 쓴 것인데,
 *         이 표의 td 에는 data-label 이 없어 절반만 적용된 상태였습니다)
 *
 * 해결 : td 를 블록으로 만들어 줄 전체 폭을 쓰게 합니다. 그러면 안쪽 flex 가
 *        제자리를 찾아 PC 와 같은 「라벨 왼쪽 / 금액 오른쪽」이 됩니다.
 *        더불어
 *          - td 좌우 여백 30px → 10px  (`.ps-table tbody>tr>td` 의 `20px 30px` 을 덮음)
 *          - 글자 24px → 16px          (legacy/shop.css 347줄. 24px 는 360px 화면에서
 *                                       '구매금액 + 1,650,000원' 이 겨우 들어갈 크기라
 *                                       td 여백까지 더하면 넘칩니다)
 *
 * 다른 표에 번지지 않도록 `.ps-block--checkout-total` 안으로 한정했습니다.
 * 관심상품(mypage/wish_list)·묶음문의(inquiry_bulk)도 같은 responsive 표를 쓰는데
 * 그쪽은 열이 여러 개라 td 를 블록으로 만들면 안 됩니다.
 *
 * 폭 잣대는 legacy 블록과 똑같이 768px 로 맞췄습니다. 둘이 어긋나면 딱 768px 에서만
 * 반쪽 적용되는 구간이 생깁니다.
 * ===================================================================================== */

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

	/* ① td 를 블록으로 : 익명 표가 안 생기고 줄 전체 폭을 씁니다 */
	.ps-block--checkout-total .ps-table--shopping-cart tbody > tr > td {
		display: block;
		width: 100%;
		padding: 12px 10px;
	}

	/* ② 라벨 왼쪽 / 금액 오른쪽 (legacy 규칙과 같지만, 이 상자 안에서 확실히 하려고 다시 적습니다) */
	.ps-block--checkout-total .checkout__purchase__price {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		padding: 10px 14px;
	}

	/* ③ 글자 크기 */
	.ps-block--checkout-total .checkout__purchase__price span {
		font-size: 16px;
		line-height: 1.3;
	}

	/* 금액은 오른쪽 끝에 붙이고 줄바꿈하지 않습니다 */
	.ps-block--checkout-total .checkout__purchase__price span:last-child {
		text-align: right;
		white-space: nowrap;
	}
}


/* ========================================================================================
 * 44. 고객안내 6화면 : 곤색 제목띠 밑 여백			[2026-09-11 운영자 지시]
 * ----------------------------------------------------------------------------------------
 * 대상 (푸터 '고객안내' 칼럼에서 들어가는 화면들)
 *   /page/intro  회사소개      /page/privacy       개인정보처리방침
 *   /page/guide  이용안내      /page/seller_terms  무실적탈퇴동의약관
 *   /page/terms  판매원관리규정 /page/revoke        청약철회
 *
 * 이 여섯은 위에 회색 브레드크럼 + 통배너가 있던 자리를 곤색 제목띠
 * (layout/page_header.php)로 바꿨습니다. 그런데 본문이 구 마크업이라
 * 위 여백을 배너의 `margin-top:40px` + `<br>` 네 개에 의지하고 있었습니다.
 * 그것을 걷어내니 본문이 띠에 그대로 붙었습니다.
 *
 * 구 스킨 값 (legacy/style.css)
 *   .ps-section--shopping { padding: 0 0 50px }   12509줄 - 위가 0
 *   .ps-about-intro       { padding: 10px 0 }     13231줄 - **≥1200px 에서만 10px**
 *                         { padding: 80px 0 }     13266줄 - ≤1199px
 *   .ps-section--vendor   { padding: 40px 0 }     12455줄 - 이용안내 화면
 * 그래서 넓은 화면에서 10px 밖에 안 떨어지고, 태블릿에서는 80px 로 벌어져
 * **화면 폭에 따라 여백이 뒤집혔습니다.** 폭과 무관하게 같은 값으로 고정합니다.
 *
 * 선택자를 `.page-header +` 로 시작한 이유
 *   42절(주문서)과 같은 이유입니다. `.ps-about-intro` 는 제목띠를 안 붙인
 *   다른 구 화면도 씁니다. **제목띠 바로 다음에 오는 본문**에만 걸어
 *   그 화면들은 건드리지 않습니다.
 * ===================================================================================== */

.page-header + .ps-page--simple > .ps-compare.ps-section--shopping > .ps-about-intro,
.page-header + .ps-page--simple > .ps-compare.ps-section--shopping > .ps-section--vendor {
	padding-top: 60px;
}

@media only screen and (max-width: 767px) {
	.page-header + .ps-page--simple > .ps-compare.ps-section--shopping > .ps-about-intro,
	.page-header + .ps-page--simple > .ps-compare.ps-section--shopping > .ps-section--vendor {
		padding-top: 36px;
	}
}

/* ── 45. 회사소개·이용안내 표 테두리 ─────────────────── [2026-09-11 운영자 지시]
 * 지시 : "회사소개 상단 표 위의 선이 선명하게 안 보임"
 *
 * 구 스킨의 `.ps-table--compare tbody tr td`(legacy/style.css 11088줄)는
 * **border-bottom 과 border-right 만** 그립니다. 위·왼쪽이 없어 표가
 * 위쪽으로 열려 있었습니다. 게다가 위에 있어야 할 선은
 * `.ps-about-intro .ps-section__content { border-top: 0px }`(13260줄)로
 * 두께가 0 이라 아예 안 그려졌습니다 — "선명하게 안 보인다"가 아니라 없었습니다.
 *
 * 첫 줄에 위 선, 첫 칸에 왼쪽 선을 넣어 네 변을 닫습니다.
 * 색은 나머지 선과 같은 #dee2e6 입니다(따로 진하게 하면 위만 도드라집니다).
 *
 * ⚠ `.ps-table--compare` 는 마이페이지(주문내역·주문상세·개인정보)도 씁니다.
 *   그쪽은 건드리지 않으려고 이 두 화면의 감싸는 클래스로 한정했습니다.
 *   (.ps-about-intro = 회사소개·약관류, .ps-vendor-about = 이용안내)
 * ------------------------------------------------------------------------------ */
.ps-about-intro   .ps-table--compare > tbody > tr:first-child > td,
.ps-vendor-about  .ps-table--compare > tbody > tr:first-child > td {
	border-top: 1px solid #dee2e6;
}

.ps-about-intro   .ps-table--compare > tbody > tr > td:first-child,
.ps-vendor-about  .ps-table--compare > tbody > tr > td:first-child {
	border-left: 1px solid #dee2e6;
}
/* =======================================================================================
 * 45. 목록 카드의 금액 줄 : 소비자가 · 회원가 · PV			[2026-09-11 운영자 지시]
 * ---------------------------------------------------------------------------------------
 * 규칙
 *   비회원 : 소비자가 하나만 (예전 그대로 큰 금액 한 줄)
 *   회원   : 소비자가 / 회원가 / (직급 할인가) / PV
 *
 * 모양 [2026-09-11 오후 운영자 시안]
 *   [ 소비자가 ]          100,000 원      ← 라벨은 하늘색 배지, 금액은 오른쪽 정렬
 *   [ 회원가   ]           80,000 원
 *   [ PV       ]               50 PV
 *   처음엔 라벨·금액을 가운데로 모았는데 "가지런해 보이지 않는다"고 해서
 *   라벨은 왼쪽 배지, 금액은 오른쪽 끝으로 갈라 놓았습니다.
 *
 * 쓰는 곳 (마크업은 두 카드 파일이 만듭니다)
 *   skin/_product_card.php  분류목록 · 전체상품 · 브랜드 · 검색결과 · 최근본상품 · 메인
 *   skin/_type_card.php     전체상품 진열 /shop/skin (+ 메인의 main.30/40 묶음)
 *
 * ⚠ 배지색은 아래 변수 두 개만 바꾸면 됩니다.
 *   운영자가 준 색(#ABCBE1)에서 한 톤 밝게 잡았습니다. 글자는 흰색이 아니라
 *   브랜드 네이비입니다 - 이 정도로 밝은 하늘색 위에 흰 글씨를 올리면
 *   명도차가 2.5:1 밖에 안 나와 12px 글자가 읽히지 않습니다.
 *   시안처럼 진한 배지 + 흰 글씨로 가려면 bg 를 #2E86C1 쯤으로 내리고 fg 를 #fff 로.
 * ------------------------------------------------------------------------------------- */
.xen-pricelines {
	--xen-pl-bg: #BBD7EC;		/* 배지 바탕 - 밝은 하늘색 */
	--xen-pl-fg: #04183F;		/* 배지 글자 - 브랜드 네이비 */
	--xen-pl-lb-w: 66px;		/* 배지 최소 너비. '소비자가' 4글자가 기준입니다.
	                               '직급 할인가' 줄(level_sale=Y 일 때만 생김)과 한국어가 아닌
	                               언어에서는 그 줄 배지만 넓어집니다 - 금액 끝자리는 그대로 맞습니다 */

	max-width: 260px;			/* 카드가 넓어도 라벨과 금액이 멀어지지 않게 폭을 묶습니다 */
	margin: 0;					/* 기본은 왼쪽 - 가운데로 모으는 건 아래 상품카드 규칙에서만 */
	padding: 0;
	list-style: none;
	text-align: left;
}

.xen-tc__price .xen-pricelines {
	flex: 1 1 100%;				/* 38절에서 .xen-tc__price 가 flex 입니다 */
}

/*
 * 한 줄 = [배지] ... [금액]
 * ⚠ flex-wrap 을 빼면 안 됩니다.
 *   휴대폰 2열 격자에서 카드 안쪽 폭이 120px 정도까지 좁아집니다. 배지(66px)와
 *   '1,650,000 원'(약 80px)이 한 줄에 안 들어가는데, wrap 이 있으면 금액만
 *   아래 줄로 내려가고 margin-left:auto 때문에 그대로 오른쪽에 붇습니다.
 *   wrap 이 없으면 카드 밖으로 삐져나옵니다.
 */
.xen-pricelines li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 8px;
}

.xen-pricelines li + li {
	margin-top: 5px;
}

/* 라벨 배지 */
.xen-pl__lb {
	box-sizing: border-box;		/* min-width 안에 padding 을 포함시켜 배지 폭을 맞춥니다 */
	flex: 0 0 auto;
	min-width: var(--xen-pl-lb-w);
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--xen-pl-bg);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--xen-pl-fg);
	text-align: center;
	white-space: nowrap;
}

/* 금액 : 오른쪽 끝으로 밀어 줄마다 끝자리를 맞춥니다 */
.xen-pl__vl {
	margin-left: auto;
	text-align: right;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: #555;
	word-break: keep-all;
}

/* 숫자와 단위('원'·'PV') 사이 */
.xen-pl__unit {
	margin-left: 3px;
	font-size: 0.8em;			/* 그 줄 금액 크기를 따라갑니다 */
	font-weight: 500;
}

/* 회원가 : 이 줄이 대표 금액이라 크고 진하게 */
.xen-pl--member .xen-pl__vl {
	font-size: 19px;
	font-weight: 700;
	color: #111;
}

/* 소비자가 취소선 : 회원가가 실제로 더 쌀 때만 카드 쪽에서 is-off 를 붙입니다 */
.xen-pl__vl.is-off {
	color: #bbb;
	text-decoration: line-through;
}

/* 직급 할인가 (쇼핑몰설정 level_sale = Y 일 때만 생기는 줄) */
.xen-pl--sale .xen-pl__vl {
	font-weight: 700;
	color: #e02020;
}

/* 할인율 : 금액 앞에 붇습니다 */
.xen-pl__off {
	margin-right: 4px;
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	color: #e02020;
}

/* PV */
.xen-pl--pv .xen-pl__vl {
	font-size: 13px;
	font-weight: 600;
	color: #888;
}

/*
 * 상품카드(.product-item)는 글자가 가운데 정렬인 카드입니다.
 * 줄 안쪽은 좌/우로 갈라 두고, 금액 묶음 자체만 카드 가운데에 놓습니다.
 * (max-width 260px 이라 데스크톱 카드에서는 거의 폭을 다 씁니다)
 */
.product-item-price .xen-pricelines {
	margin-left: auto;
	margin-right: auto;
}

/* 태블릿 · 휴대폰 : 카드가 좁아지므로 한 단계씩 줄입니다 */
@media only screen and (max-width: 767px) {

	.xen-pricelines {
		--xen-pl-lb-w: 54px;
	}

	.xen-pricelines li {
		gap: 2px 6px;
	}

	.xen-pl__lb {
		padding: 2px 6px;
		font-size: 10px;
	}

	.xen-pl__vl {
		font-size: 13px;
	}

	.xen-pl--member .xen-pl__vl {
		font-size: 15px;
	}

	.xen-pl--pv .xen-pl__vl {
		font-size: 12px;
	}

	/*
	 * 휴대폰 2열 격자의 카드 안쪽 여백을 24px → 16px 로 줄입니다.
	 * 금액 줄이 한 줄에 들어갈 폭을 16px 씩 벌기 위한 것입니다
	 * (위 flex-wrap 설명 참고 - 그래도 넘치면 금액이 아래 줄로 내려갑니다).
	 */
	.product-item-list.xen-cols > .product-item {
		padding: 16px;
	}
}


/* ========================================================================================
 * 46. 품질·제조 : 미국 직구 프리미엄 제품  /products/quality		[2026-10-03 전면 재작성]
 * ----------------------------------------------------------------------------------------
 * 운영자 시안 한 장대로 다시 짰습니다. 뷰 : products/quality.php
 * 예전 28절(.dug-q-*)은 이제 안 쓰지만 되돌리기용으로 남겨 뒀습니다.
 *
 *   ① .dug-usq-head    로고 + 제목 두 줄 (왼쪽)
 *      .dug-usq-scene   공장·성조기 사진 (오른쪽 위, 화면 끝까지)
 *   ② .dug-usq-cards   카드 2개 (생산시설|친환경 / 의사 유통 + 의사 사진)
 *   ③ .dug-usq-bottom  지도·핀·트럭 + 파란 띠(약속 3개, 오른쪽은 화면 끝까지)
 *
 * 아이콘 png 에 동그란 배경이 이미 들어 있습니다. 여기서 원(border/background)을 또 그리지 마세요.
 * 파란색 : 시안의 코발트 블루 #1747C9 (사이트 기본색 네이비 --primary-color 와 같이 씁니다)
 * ======================================================================================== */

.dug-usq {
	--usq-blue      : #1747C9;
	--usq-blue-deep : #10349A;
	--usq-line      : #DCE4F3;

	position: relative;
	overflow: hidden;			/* 파란 띠·사진을 화면 끝까지 늘릴 때 가로 스크롤이 안 생기게 */
	background: linear-gradient(180deg, #FFFFFF 0%, #F5F8FE 100%);
	padding-top: 40px;
}

/* ── ① 머리 ───────────────────────────────────────────────────────────────── */
.dug-usq-top { position: relative; }

/**
 * 공장·성조기 사진
 * 그림 왼쪽·아래가 흰색으로 번져 있지만 왼쪽 아래 모서리에 파란 테두리 조각이 남아 있어서
 * 왼쪽과 아래를 투명하게 한 번 더 지웁니다(mask 두 장을 겹쳐 둘 다 보이는 곳만 남김).
 */
.dug-usq-scene {
	position: absolute;
	top: -40px;					/* .dug-usq 위 여백까지 올려 상단 띠 바로 밑에 붙임 */
	right: 0;
	width: 54vw;
	max-width: 1040px;
	z-index: 0;
	pointer-events: none;
}

.dug-usq-scene img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%),
	                    linear-gradient(to bottom, #000 72%, transparent 100%);
	-webkit-mask-composite: source-in;
	        mask-image: linear-gradient(to right, transparent 0, #000 16%),
	                    linear-gradient(to bottom, #000 72%, transparent 100%);
	        mask-composite: intersect;
}

.dug-usq-top > .container {
	position: relative;
	z-index: 1;					/* 사진 위로 글·카드 */
}

.dug-usq-head { max-width: 760px; }

.dug-usq-logo {
	display: block;
	width: 230px;
	height: auto;
	margin-bottom: 26px;
}

.dug-usq-title { margin: 0; }

.dug-usq-title-sm {
	display: block;
	color: var(--primary-color);
	font-size: clamp(22px, 2.6vw, 44px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.3;
}

.dug-usq-title-lg {
	display: block;
	margin-top: 6px;
	font-size: clamp(32px, 4.1vw, 68px);
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.2;
	/* 시안처럼 왼쪽이 짙고 오른쪽이 밝은 파랑 */
	background: linear-gradient(90deg, #1340C0 0%, #2B6BF0 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	color: var(--usq-blue);
	-webkit-text-fill-color: transparent;
}

/* ── ② 카드 2개 ───────────────────────────────────────────────────────────── */
.dug-usq-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 46px;
	align-items: start;		/* 오른쪽 카드를 내려도 왼쪽 카드가 따라 늘어나지 않게 */
}

.dug-usq-card {
	background: rgba(255, 255, 255, 0.94);	/* 오른쪽 카드 뒤로 공장 사진이 살짝 비침 */
	border: 1px solid var(--usq-line);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(4, 24, 63, 0.06);
}

/* 왼쪽 : 생산시설 | 친환경 */
.dug-usq-made {
	display: flex;
	align-items: center;
	padding: 30px 22px;
	text-align: center;
}

.dug-usq-made-main {
	flex: 72 1 0;		/* [2026-10-03 운영자 요청] 구분선 기준 왼쪽 72% : 오른쪽(친환경) 28% - 숫자 = 비율(%) */
	min-width: 0;
	padding-right: 20px;
	border-right: 1px solid var(--usq-line);
}

.dug-usq-certs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}

/**
 * 인증 4개 (FDA · NSF · PlanetOne · GMP)  [2026-10-03 PlanetOne 추가로 4개]
 * 칸 폭에 맞춰 같이 줄어들도록 **폭(%)** 으로 잡습니다. 높이를 px 로 고정하면
 * 칸이 좁은 화면에서 넷이 한 줄에 안 들어가 카드 밖으로 넘칩니다.
 * FDA 는 가로로 긴 글자 로고라 원형 배지보다 넓게 줍니다.
 */
.dug-usq-certs img {
	flex: 0 1 auto;
	min-width: 0;
	width: 22%;
	max-width: 88px;
	height: auto;
}
.dug-usq-certs img.is-fda {
	width: 30%;
	max-width: 128px;
}

.dug-usq-made-title {
	margin: 20px 0 8px;
	color: var(--primary-color);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.dug-usq-made-desc {
	margin: 0;
	color: var(--usq-blue);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.dug-usq-made-eco {
	flex: 28 1 0;		/* 왼쪽 .dug-usq-made-main 72 와 합쳐 100 */
	min-width: 0;
	padding-left: 20px;
}

.dug-usq-made-eco img {
	display: block;
	width: 86px;
	height: auto;
	margin: 0 auto 14px;
}

.dug-usq-eco-title {
	margin: 0 0 12px;
	color: var(--usq-blue);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.dug-usq-eco-desc {
	margin: 0;
	color: var(--primary-color);
	font-size: 15px;
	line-height: 1.6;
}

/**
 * 오른쪽 : 의사 유통 + 의사 사진
 * 사진은 position:absolute 로 띄웁니다. 흐름에 넣으면 사진 높이가 카드 높이를 밀어 올려
 * 왼쪽 카드보다 혼자 길어집니다. (레이아웃 함정 7번)
 */
.dug-usq-doctor {
	position: relative;
	overflow: hidden;
	padding: 28px 28px 26px;
	/* [2026-10-03 운영자 지적] 시안에서 오른쪽 카드는 왼쪽보다 한 단 아래(1600px 폭 기준 약 60px)에 있습니다 */
	margin-top: clamp(30px, 3.75vw, 60px);
}

/**
 * [2026-10-03 운영자 요청] 오른쪽 카드를 컨테이너 밖으로 늘려 화면 오른쪽 끝 가까이까지
 * 시안에서 이 카드는 화면 끝에서 조금만 떨어져 있습니다. 컨테이너 안에 두면 오른쪽 공백이 큽니다.
 *
 * ⚠ 컨테이너 폭을 숫자로 박지 않습니다. custom.css 가 .container 를 1300px 로 덮어써서
 *   부트스트랩 구간(960/1140/1320)과 실제 폭이 다릅니다.
 *   대신 카드 칸 폭(margin % 의 기준 = 그리드 칸)으로 계산합니다.
 *     컨테이너 안쪽 폭 = 칸 폭 × 2 + 칸 사이 20px
 *     카드 오른쪽 끝 = 화면 오른쪽에서 24px  →  margin-right = 100% - 50vw + 34px
 *   화면이 좁아 컨테이너가 이미 화면 끝에 붙어 있으면 값이 양수가 되므로 min(0, …) 으로 막습니다.
 * 그리드 칸은 그대로이고 카드만 길어집니다. 가로 스크롤은 .dug-usq 의 overflow:hidden 이 막습니다.
 */
@media only screen and (min-width: 992px) {
	.dug-usq-doctor { margin-right: min(0px, calc(100% - 50vw + 34px)); }
}

.dug-usq-doctor-text {
	position: relative;
	z-index: 1;
	width: 60%;
}

.dug-usq-doctor-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.dug-usq-doctor-head img {
	flex: 0 0 auto;
	width: 86px;
	height: auto;
}

.dug-usq-doctor-head h3 {
	margin: 0;
	color: var(--usq-blue);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.28;
}

.dug-usq-doctor-desc {
	margin: 18px 0 0;
	color: var(--primary-color);
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: -0.02em;
}

/**
 * [2026-10-03] 병원 배경이 있는 사진(11b_doctors_group_bg.png)으로 교체.
 * 누끼가 아니라 배경째 있는 사진이라 카드 오른쪽 위·아래를 꽉 채웁니다.
 * 사진 왼쪽이 흰색으로 번져 있어 글 쪽과 자연스럽게 이어집니다.
 * 카드 높이가 글 길이로 정해지므로 object-fit:cover 로 잘라 맞춥니다(사람이 오른쪽에 있어 right 기준).
 */
.dug-usq-doctor-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 54%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	display: block;
}

/* ── ③ 지도·트럭 + 파란 띠 ───────────────────────────────────────────────── */
.dug-usq-bottom {
	/**
	 * [2026-10-03 운영자 요청] 아랫줄(지도·트럭·파란 띠)을 위로 올립니다.
	 * 오른쪽 카드를 시안처럼 한 단(clamp 30~60px) 내렸기 때문에 왼쪽 카드 밑에 그만큼 빈자리가 생깁니다.
	 * 그 단차만큼 거슬러 올리고 25px 만 남겨 지도가 왼쪽 카드 바로 밑에 오게 합니다.
	 * (파란 띠는 줄 아래쪽에 붙어 있어 오른쪽 카드와 겹치지 않습니다)
	 */
	margin-top: calc(10px - clamp(30px, 3.75vw, 60px));
}

.dug-usq-bottom-row {
	display: flex;
	align-items: flex-end;
}

/* 왼쪽 : 지도 위에 핀, 그 오른쪽에 트럭 (트럭 앞부분이 파란 띠를 살짝 덮음) */
.dug-usq-route {
	position: relative;
	flex: 0 0 36%;	/* 지도+트럭 칸 */			/* [2026-10-03 조정] 42% → 36% : 파란 띠를 넓혀 글이 한 줄에 들어가게 (마지막 칸 '직구' 잘림) */
	height: 180px;
	z-index: 2;
}

.dug-usq-map {
	position: absolute;
	left: -10px;
	bottom: 14px;
	width: 62%;
}

.dug-usq-map-img {
	display: block;
	width: 100%;
	height: auto;
}

/**
 * 라스베가스 자리 : 지도 그림 기준 % (지도를 바꾸면 이 값도 다시 맞출 것)
 * [2026-10-03 조정] 시안처럼 글을 핀 **오른쪽**에 붙입니다 (예전엔 핀 아래).
 * 핀 끝(아래 뾰족한 곳)이 라스베가스이고 글은 그 옆 아래쪽에 맞춥니다.
 */
.dug-usq-pin {
	position: absolute;
	left: 10%;
	top: 22%;
	display: flex;
	flex-direction: column;		/* [2026-10-03 시안 맞춤] 핀 아래에 글, 글은 핀 가운데쯤에서 시작 */
	align-items: flex-start;
	line-height: 1.2;
}

.dug-usq-pin img {
	display: block;
	flex: 0 0 auto;
	width: 30px;
	height: auto;
}

.dug-usq-pin-text { margin: 4px 0 0 14px; }

.dug-usq-pin-ko,
.dug-usq-pin-en {
	display: block;
	white-space: nowrap;
	color: var(--usq-blue-deep);
}

.dug-usq-pin-ko { font-size: 15px; font-weight: 700; }
.dug-usq-pin-en { font-size: 12px; font-weight: 500; }

.dug-usq-truck {
	position: absolute;
	/**
	 * [2026-10-03 운영자 요청 2회] 트럭을 오른쪽으로 - 지도가 트럭에 가려 다 안 보였음.
	 * 트럭 왼쪽 끝 = 칸의 100% + 24% - 62% = 62% 지점 → 지도(폭 62%, 왼쪽 -10px) 오른쪽 끝과 거의 맞닿음.
	 * 파란 띠를 너무 덮지 않게 폭은 68% → 62% 로 조금 줄였습니다.
	 */
	right: -24%;
	bottom: 0;
	width: 62%;
	height: auto;
	display: block;
}

/**
 * 파란 띠
 * 컨테이너 안에서 시작하고, 오른쪽은 ::after 로 화면 끝까지 같은 색을 이어 붙입니다.
 * (.dug-usq 에 overflow:hidden 이 있어 가로 스크롤은 안 생깁니다)
 */
.dug-usq-promise {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	margin: 0;
	/**
	 * 왼쪽 여백 = 트럭 앞부분이 띠를 덮는 길이 + 시안의 틈(약 25px)		[2026-10-03 운영자 요청 : 틈 좁히기]
	 * ⚠ padding 의 % 는 **띠 자신이 아니라 부모(.dug-usq-bottom-row) 폭** 기준입니다.
	 *   트럭이 덮는 길이 = 지도칸(줄의 36%) × 24% = 줄의 8.64%
	 *   그래서 8.64% + 25px. (예전 15% 는 줄 기준이라 틈이 80px 가까이 벌어졌음)
	 *   트럭 right(-24%)·지도칸 폭(36%) 을 바꾸면 이 값도 같이 바꿀 것.
	 */
	padding: 18px 0 18px calc(8.64% + 25px);
	list-style: none;
	background: linear-gradient(90deg, var(--usq-blue-deep) 0%, var(--usq-blue) 100%);
}

.dug-usq-promise::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
	width: 50vw;
	background: var(--usq-blue);
}

.dug-usq-promise li {
	flex: 0 0 auto;			/* [2026-10-03 조정] 칸을 똑같이 나누지 않고 글 길이만큼 (줄바꿈 방지) */
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	color: #FFFFFF;
	white-space: nowrap;	/* 시안처럼 제목·설명이 한 줄씩. 마지막 칸은 화면 끝 쪽으로 넘쳐도 띠가 이어져 있음 */
}
.dug-usq-promise li:first-child { padding-left: 0; }

.dug-usq-promise li + li { border-left: 1px solid rgba(255, 255, 255, 0.4); }

.dug-usq-promise img {
	flex: 0 0 auto;
	width: 54px;
	height: auto;
}

.dug-usq-promise strong {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 500;		/* 시안 제목은 굵지 않은 중간 굵기 */
	letter-spacing: -0.02em;
}

.dug-usq-promise span {
	display: block;
	font-size: 13px;
	line-height: 1.55;
	opacity: 0.9;
}

/* ── 반응형 ───────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 1399px) {
	.dug-usq-made-title      { font-size: 25px; }
	.dug-usq-doctor-head h3  { font-size: 26px; }
	.dug-usq-doctor-desc     { font-size: 15px; }
	.dug-usq-promise strong  { font-size: 15px; }
	.dug-usq-promise span    { font-size: 12px; }
	.dug-usq-promise img     { width: 52px; }
}

@media only screen and (max-width: 1199px) {
	.dug-usq-made-title       { font-size: 21px; }
	.dug-usq-made-desc        { font-size: 13px; }
	.dug-usq-made-eco img     { width: 70px; }
	.dug-usq-eco-title,
	.dug-usq-eco-desc         { font-size: 13.5px; }
	.dug-usq-doctor-head img  { width: 68px; }
	.dug-usq-doctor-head h3   { font-size: 22px; }
	.dug-usq-doctor-desc      { font-size: 13.5px; }
	.dug-usq-route            { height: 160px; }
	.dug-usq-promise li       { gap: 8px; padding: 0 12px; }
	.dug-usq-promise img      { width: 44px; }
	.dug-usq-promise strong   { font-size: 13.5px; }
	.dug-usq-promise span     { font-size: 11.5px; }
}

/**
 * 태블릿·휴대폰 : 한 줄씩 세로로
 *   사진은 맨 위 일반 흐름으로 내려 제목 뒤에 깔리지 않게 하고,
 *   카드 2개·지도/트럭·파란 띠를 차례로 쌓습니다.
 */
@media only screen and (max-width: 991px) {
	.dug-usq { padding-top: 0; }

	.dug-usq-scene {
		position: relative;
		top: 0;
		width: 100%;
		max-width: none;
		margin-bottom: -40px;		/* 아래로 번지는 부분 위에 제목이 살짝 올라타게 */
	}
	.dug-usq-scene img {
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
		        mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	}

	.dug-usq-logo   { width: 180px; margin-bottom: 16px; }
	.dug-usq-cards  { grid-template-columns: 1fr; margin-top: 28px; }
	.dug-usq-doctor { margin-top: 0; }		/* 한 줄에 하나씩 쌓일 때는 단차 없음 */

	.dug-usq-made-title       { font-size: 24px; }
	.dug-usq-made-desc        { font-size: 14px; }
	.dug-usq-doctor-head h3   { font-size: 26px; }
	.dug-usq-doctor-desc      { font-size: 15px; }

	.dug-usq-bottom      { margin-top: 26px; }		/* 한 줄씩 쌓일 땐 카드 단차가 없으니 올리지 않음 */
	.dug-usq-bottom-row  { flex-direction: column; align-items: stretch; }

	.dug-usq-route {
		flex: none;
		width: 100%;
		max-width: 560px;
		height: 200px;
		margin: 0 auto;
	}
	.dug-usq-map   { left: 0; width: 60%; }
	.dug-usq-truck { right: 0; width: 56%; }

	/* 파란 띠 : 화면 폭 전체, 항목은 한 줄에 하나씩 */
	.dug-usq-promise {
		flex-direction: column;
		margin: 0 calc(var(--bs-gutter-x, 30px) * -0.5);
		padding: 22px 24px;
	}
	.dug-usq-promise::after { display: none; }
	.dug-usq-promise li { padding: 14px 0; gap: 14px; white-space: normal; }
	.dug-usq-promise li + li {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.3);
	}
	.dug-usq-promise img    { width: 56px; }
	.dug-usq-promise strong { font-size: 16px; }
	.dug-usq-promise span   { font-size: 13px; }
}

@media only screen and (max-width: 575px) {
	.dug-usq-scene { margin-bottom: -20px; }
	.dug-usq-logo  { width: 150px; }

	/* 왼쪽 카드 : 생산시설 위 / 친환경 아래 */
	.dug-usq-made { flex-direction: column; padding: 24px 18px; }
	.dug-usq-made-main {
		padding: 0 0 20px;
		border-right: 0;
		border-bottom: 1px solid var(--usq-line);
	}
	.dug-usq-made-eco { padding: 20px 0 0; }
	.dug-usq-certs { gap: 10px; }
	.dug-usq-made-title { font-size: 22px; }

	/* 오른쪽 카드 : 글 위 / 의사 사진 아래 (사진을 흐름으로 되돌림) */
	.dug-usq-doctor      { padding: 24px 20px 0; }
	.dug-usq-doctor-text { width: 100%; }
	.dug-usq-doctor-head img { width: 64px; }
	.dug-usq-doctor-head h3  { font-size: 22px; }
	.dug-usq-doctor-img {
		position: static;
		width: calc(100% + 40px);		/* 카드 좌우 안쪽 여백(20px)까지 꽉 채움 */
		height: auto;
		margin: 14px -20px 0;
	}

	.dug-usq-route { height: 160px; }
	.dug-usq-pin-ko { font-size: 13px; }
	.dug-usq-pin-en { font-size: 11px; }
	.dug-usq-pin img { width: 24px; }
}