/*
Theme Name: Salient Child Theme
Description: 향몽(hyangmong) 전용 자식 테마 — 브랜드 타이포그래피와 페이지 구성 유틸리티
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.1
*/

/* ==========================================================================
   향몽 브랜드 토큰
   근거: 실제 판매 제품 사진 분석 — content\브랜드-무드-가이드.md
   ========================================================================== */

:root {
	/*
	 * 브랜드 색 — 향몽_brand guide.pdf 의 COLOR SYSTEM
	 * JADE GREEN LIGHT / DEEP · BAEK WHITE · EUN SILVER
	 * 로고 파일에서 뽑은 실제 픽셀값: #43C3BD, #8EC5BD
	 *
	 * 제품 사진의 앰버 골드는 사진의 배경일 뿐 브랜드 색이 아니다.
	 * 사이트 골격은 옥색·백·은으로 두고, 따뜻한 앰버는 사진 안에만 남긴다.
	 */
	--hm-jade:      #43C3BD;   /* JADE GREEN DEEP — 강조·버튼·링크 */
	--hm-jade-lt:   #8EC5BD;   /* JADE GREEN LIGHT — 보조 */
	--hm-jade-dk:   #2E8C86;   /* 호버 */
	--hm-white:     #FFFFFF;   /* BAEK WHITE — 본문 배경 */
	--hm-paper:     #F5F3EF;   /* 한지 오프화이트 — 섹션 교차 */
	--hm-silver:    #B8BCBC;   /* EUN SILVER — 헤어라인 */
	--hm-deep:      #12312C;   /* 어두운 섹션 — 옥빛 먹색 */
	--hm-deep-dk:   #0C221F;
	--hm-ink:       #1A1614;   /* 본문 글자 */

	/* 이전 앰버 토큰 — 제품 사진과 맞물리는 곳에만 남겨둔다 */
	--hm-gold:      var(--hm-jade);
	--hm-amber:     var(--hm-jade-lt);
	--hm-amber-dk:  var(--hm-jade-dk);
	--hm-wood:      var(--hm-deep);
	--hm-wood-dk:   var(--hm-deep-dk);
	--hm-ivory:     var(--hm-paper);
	--hm-cream:     #EBE8E2;
	--hm-mint:      #7FF0E0;   /* 병에 새겨진 발광 캘리그래피 색 */

	/* 상품별 액체색 */
	--hm-joseon:    #A81C18;   /* 조선의 꿈 */
	--hm-empress:   #C98A2E;   /* 황후의 정원 */
	--hm-night:     #3D1E5C;   /* 밤에 피는 꽃 */
	--hm-forest:    #0E7A5F;   /* 숲의 향기를 담은 바람 */
	--hm-wave:      #1178C4;   /* 푸른 파도의 속삭임 */
	--hm-warrior:   #4A443F;   /* 군신의 기백 */

	/* 보조 */
	--hm-line:      rgba(184, 188, 188, 0.55);   /* 은빛 헤어라인 */
	--hm-muted:     #6B7472;
}

/* ==========================================================================
   타이포그래피
   Salient 기본 14px 는 한글에 너무 작다. 본문 16px / 행간 1.8 로 올린다.
   제목은 명조(전통), 본문은 고딕.
   ========================================================================== */

body,
body .container-wrap,
body #search-outer input[type="text"] {
	font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: var(--hm-ink);
	word-break: keep-all;      /* 한글은 어절 단위로 줄바꿈해야 읽힌다 */
	overflow-wrap: break-word;
}

h1, h2, h3, h4,
.nectar-split-heading,
#header-outer .sf-menu > li > a {
	font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
	word-break: keep-all;
	letter-spacing: -0.01em;
}

h1 { font-weight: 600; line-height: 1.28; }
h2 { font-weight: 600; line-height: 1.35; }
h3 { font-weight: 600; line-height: 1.45; }

/* 헤더 메뉴는 고딕이 더 또렷하다 */
#header-outer .sf-menu > li > a {
	font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   히어로 — 제품 사진의 배경을 CSS 로 재현한다

   실물 제품 컷은 앰버~허니 골드가 중앙에서 밝게 퍼지고 가장자리로 어두워지는
   라디얼 비네팅에, 아래쪽은 어두운 원목 바닥이다. 그 구조를 그대로 옮겼다.
   AI 히어로 이미지가 준비되면 build-pages.php 의 hero() 에 URL 만 넘기면
   이 클래스가 빠지고 사진으로 교체된다.
   ========================================================================== */

/* 마커 자체는 보이지 않는다 */
.hm-hero-mark {
	display: none;
}

/*
 * 배경은 행(.wpb_row)이 아니라 .row-bg-wrap 에 그려야 한다.
 * Salient 의 full_width_background 행에서 행 자체는 컨테이너 폭으로 묶여 있고,
 * 화면 끝까지 칠해지는 건 절대배치된 .row-bg-wrap 레이어다.
 * 행에 배경을 주면 좌우에 흰 여백이 남는다.
 */
.wpb_row:has(.hm-hero-mark) > .row-bg-wrap {
	background-color: #17403A;
	background-image:
		/* 아래로 가라앉는 옥빛 먹색 */
		linear-gradient(to bottom, rgba(8, 26, 23, 0) 58%, rgba(8, 26, 23, 0.8) 90%, #08201C 100%),
		/* 중앙에서 퍼지는 비색 광원 */
		radial-gradient(ellipse 92% 76% at 50% 40%,
			#8EC5BD 0%,
			#5FB6AF 24%,
			#3A9089 50%,
			#1F5F58 76%,
			#0E3833 100%);
	background-repeat: no-repeat;
	background-size: cover;
}

/* 한지 결 — 옅은 결을 겹쳐 색면이 밋밋해 보이지 않게 한다 */
.wpb_row:has(.hm-hero-mark) > .row-bg-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.14;
	background-image:
		repeating-linear-gradient(90deg, rgba(240, 255, 252, 0.5) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(0deg, rgba(10, 50, 45, 0.35) 0 1px, transparent 1px 5px);
}

/* 가장자리를 눌러 시선을 가운데로 모은다 */
.wpb_row:has(.hm-hero-mark) > .row-bg-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 78% 68% at 50% 45%, transparent 55%, rgba(6, 28, 25, 0.55) 100%);
}

/* 본문은 배경 레이어 위로 */
.wpb_row:has(.hm-hero-mark) > .row_col_wrap_12 {
	position: relative;
	z-index: 2;
}

/* ==========================================================================
   유틸리티 — 페이지 구성용
   선택자를 좁게 유지한다. 넓게 잡으면 WooCommerce 상품명 h2 까지 물든다.
   ========================================================================== */

/* 섹션 상단의 작은 라벨 */
.hm-eyebrow {
	font-family: 'Pretendard', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hm-amber-dk);
	margin-bottom: 0.9rem;
}
.hm-eyebrow::before {
	content: '';
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--hm-gold);
	vertical-align: middle;
	margin-right: 0.7rem;
}

/* 리드 문장 */
.hm-lead {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.25rem;
	line-height: 1.7;
	color: var(--hm-ink);
}

.hm-h2 {
	font-family: 'Noto Serif KR', serif;
	font-size: clamp(1.75rem, 3.2vw, 2.75rem);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 1.2rem;
}

.hm-h3 {
	font-family: 'Noto Serif KR', serif;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.45;
}

/* 어두운 섹션 위에 얹는 텍스트 */
.hm-on-dark,
.hm-on-dark .hm-h2,
.hm-on-dark .hm-h3,
.hm-on-dark p {
	color: var(--hm-ivory);
}
.hm-on-dark .hm-eyebrow {
	color: var(--hm-amber);
}

/* 카드 — 백색 바탕 + 은빛 헤어라인 */
.hm-card {
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 2px;
	padding: 2rem 1.75rem;
	height: 100%;
	box-sizing: border-box;      /* 안 주면 패딩이 칸 밖으로 삐져나간다 */
	transition: border-color 0.35s ease, transform 0.35s ease;
}
.hm-card:hover {
	border-color: var(--hm-gold);
	transform: translateY(-3px);
}

/*
 * 카드가 컬럼 높이를 꽉 채우게 한다.
 * .hm-card 에 height:100% 만 줘도 WPBakery 의 중간 래퍼
 * (.vc_column-inner > .wpb_wrapper > .wpb_text_column > .wpb_wrapper)
 * 가 높이를 물려주지 않아 카드 아랫변이 들쭉날쭉해진다.
 *
 * ⚠️ :only-child 가 반드시 필요하다.
 * 이 조건 없이 .wpb_text_column 전부에 height:100% 를 주면,
 * 텍스트 블록이 여러 개인 컬럼(브랜드 스토리의 라벨+한자+카드2개)에서
 * 각 블록이 컬럼 높이만큼 늘어나 4배로 쌓이고 다음 섹션까지 밀고 내려간다.
 * 2026-08-12 브랜드 스토리 레이아웃이 실제로 이렇게 무너졌다.
 */
.wpb_column:has(.hm-card) > .vc_column-inner,
.wpb_column:has(.hm-card) > .vc_column-inner > .wpb_wrapper {
	height: 100%;
}
.wpb_column:has(.hm-card) > .vc_column-inner > .wpb_wrapper > .wpb_text_column:only-child,
.wpb_column:has(.hm-card) > .vc_column-inner > .wpb_wrapper > .wpb_text_column:only-child > .wpb_wrapper {
	height: 100%;
}

/*
 * 호몽이 이야기 장면.
 * 원본 일러스트가 화면 가장자리에서 잘리는 구도라 그대로 넓게 쓴다.
 * 정사각으로 자르면 호랑이 얼굴이 날아간다.
 */
.hm-scene {
	margin: 0;
	overflow: hidden;
	border-radius: 2px;
	background: var(--hm-paper);
}
.hm-scene img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hm-scene:hover img {
	transform: scale(1.03);
}

/* ==========================================================================
   원료 카드
   ========================================================================== */

.hm-ing-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem;
	margin: 1.5rem 0 0;
}

@media (min-width: 720px) {
	.hm-ing-grid { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
	.hm-ing-grid--small { grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
}

.hm-ing {
	margin: 0;
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 0.35s ease, transform 0.35s ease;
}
.hm-ing:hover {
	border-color: var(--hm-jade);
	transform: translateY(-3px);
}

.hm-ing img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.hm-ing figcaption {
	padding: 1rem 1rem 1.2rem;
}

.hm-ing__note {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--hm-jade-dk);
	margin-bottom: 0.4rem;
}

.hm-ing__name {
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--hm-ink);
	margin-bottom: 0.45rem;
}

.hm-ing__desc {
	display: block;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--hm-muted);
	word-break: keep-all;
}

/*
 * 홈 전용 배치.
 * 분류 6개를 가로로 늘어놓아 세로 길이를 줄인다.
 * 24종을 한 줄씩 쌓으면 홈 높이가 8,000px 가까이 되어 모바일 이탈이 커진다.
 */
.hm-ing-home {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.4rem 1.6rem;
	margin-top: 1.8rem;
}

@media (min-width: 720px) {
	.hm-ing-home { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.hm-ing-home { grid-template-columns: repeat(3, 1fr); }
}

.hm-ing-home .hm-ing-group + .hm-ing-group { margin-top: 0; }

.hm-ing-grid--home { grid-template-columns: repeat(2, 1fr) !important; }

/* 분류 묶음 */
.hm-ing-group + .hm-ing-group { margin-top: 3rem; }

.hm-ing-group__label {
	font-family: 'Noto Serif KR', serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--hm-ink);
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--hm-line);
	margin: 0;
}

/* 어두운 섹션 위에 놓일 때 */
.hm-on-dark .hm-ing {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(142, 197, 189, 0.3);
}
.hm-on-dark .hm-ing__name { color: var(--hm-white); }
.hm-on-dark .hm-ing__desc { color: var(--hm-jade-lt); }
.hm-on-dark .hm-ing__note { color: var(--hm-jade); }
.hm-on-dark .hm-ing-group__label {
	color: var(--hm-white);
	border-bottom-color: rgba(142, 197, 189, 0.3);
}

/* ==========================================================================
   일반 이미지 — 브랜드 스토리 · 뮤즈 · 약도
   ========================================================================== */

.hm-figure {
	margin: 0 0 1.1rem;
	overflow: hidden;
	border-radius: 2px;
	background: var(--hm-paper);
}
.hm-figure:last-child { margin-bottom: 0; }

.hm-figure img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.hm-figure:hover img { transform: scale(1.035); }

.hm-figure--map {
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	max-width: 900px;
	margin: 0 auto;
}
.hm-figure--map:hover img { transform: none; }

/* Salient image_with_animation — 레지나 원본이 480px 폭이라
 * 그대로 두면 컬럼을 못 채운다. hm-figure 와 같은 규칙을 적용한다.
 * (클래스 철자 오타는 Salient 마크업 그대로다) */
.img-with-aniamtion-wrap { margin: 0 0 1.1rem; border-radius: 2px; overflow: hidden; }
.img-with-aniamtion-wrap img.img-with-animation {
	display: block;
	width: 100% !important;   /* Salient 기본 규칙이 원본 폭으로 고정한다 */
	height: auto;
}

/* ==========================================================================
   이상형 캐릭터 8명 — 뮤즈 페이지
   ========================================================================== */

.hm-ideal {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 1.8rem;
}

@media (min-width: 760px) {
	.hm-ideal { grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
}

.hm-ideal__card {
	margin: 0;
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 2px;
	overflow: hidden;
	transition: border-color 0.35s ease, transform 0.35s ease;
}
.hm-ideal__card:hover {
	border-color: var(--hm-jade);
	transform: translateY(-4px);
}

.hm-ideal__card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
}

.hm-ideal__card figcaption { padding: 1rem 1.1rem 1.2rem; }

.hm-ideal__fam {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--hm-jade-dk);
	margin-bottom: 0.4rem;
}
.hm-ideal__name {
	display: block;
	font-family: 'Noto Serif KR', serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--hm-ink);
}
.hm-ideal__en {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	color: var(--hm-muted);
	margin: 0.2rem 0 0.6rem;
	text-transform: uppercase;
}
.hm-ideal__desc {
	display: block;
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--hm-muted);
	word-break: keep-all;
}

/* 사진이 들어간 카드 — 브랜드 아이덴티티 5테마 */
.hm-card--img {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hm-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.hm-card__body {
	padding: 1.4rem 1.3rem 1.6rem;
	flex: 1;
}
.hm-card--img .hm-eyebrow { margin-bottom: 0.6rem; }
.hm-card--img .hm-h3 { margin-bottom: 0.3rem; }
.hm-card--img p { font-size: 0.85rem; line-height: 1.7; }

/* ==========================================================================
   실사용 후기 사진
   ========================================================================== */

.hm-reviews {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
	margin-top: 1.8rem;
}

@media (min-width: 760px) {
	.hm-reviews { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
}

.hm-review {
	margin: 0;
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 2px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 0.35s ease, transform 0.35s ease;
}
.hm-review:hover {
	border-color: var(--hm-jade);
	transform: translateY(-3px);
}

.hm-review img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.hm-review figcaption {
	padding: 1rem 1.05rem 1.2rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.hm-review__text {
	font-size: 0.82rem;
	line-height: 1.7;
	color: var(--hm-ink);
	margin: 0 0 0.7rem;
	word-break: keep-all;
}

.hm-review__by {
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	color: var(--hm-muted);
}
.hm-review__by::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 1px;
	background: var(--hm-jade);
	vertical-align: middle;
	margin-right: 0.4rem;
}

/* 향 노트 목록 */
.hm-notes {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hm-notes li {
	display: flex;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--hm-line);
	font-size: 0.95rem;
}
.hm-notes li strong {
	flex: 0 0 5.5rem;
	color: var(--hm-amber-dk);
	font-weight: 600;
}

/* 표 — 모바일에서 표만 자체 스크롤 */
.hm-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.hm-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}
.hm-table th,
.hm-table td {
	border: 0;
	border-bottom: 1px solid var(--hm-line);
	padding: 0.95rem 1rem;
	text-align: left;
	vertical-align: top;
}
.hm-table th {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--hm-muted);
	border-bottom-color: var(--hm-gold);
	white-space: nowrap;
}

.hm-note p {
	font-size: 0.8125rem;
	color: var(--hm-muted);
	margin-top: 1rem;
}

/* 상품 컬러칩 — 6종 액체색을 점으로 표시 */
.hm-chip {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 50%;
	margin-right: 0.5rem;
	vertical-align: -1px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.hm-chip--joseon  { background: var(--hm-joseon); }
.hm-chip--empress { background: var(--hm-empress); }
.hm-chip--night   { background: var(--hm-night); }
.hm-chip--forest  { background: var(--hm-forest); }
.hm-chip--wave    { background: var(--hm-wave); }
.hm-chip--warrior { background: var(--hm-warrior); }

/* ==========================================================================
   WooCommerce 보정
   ========================================================================== */

/* 상품 카드가 칸 밖으로 넘치는 것 방지 (li.product 는 기본 content-box) */
.woocommerce ul.products li.product {
	box-sizing: border-box;
}

/* 가격은 골드가 아니라 먹빛이 읽기 좋다 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--hm-ink);
	font-weight: 600;
}

/* 버튼 — 골드 테두리, 호버 시 채움 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: transparent;
	border: 1px solid var(--hm-gold);
	color: var(--hm-wood);
	border-radius: 0;
	letter-spacing: 0.04em;
	transition: background 0.3s ease, color 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--hm-gold);
	color: var(--hm-wood);
}

/* ---------- 품절 배지 ---------- */

/*
 * Salient 는 목록 카드에 품절 표시를 넣지 않는다. functions.php 가
 * .product-wrap 다음에 배지를 찍으므로, 카드를 기준 삼아 이미지 위로 올린다.
 */
.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product .hm-soldout {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	padding: 7px 14px;
	background: var(--hm-deep);
	color: var(--hm-white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1;
	pointer-events: none;
}

/* 품절 상품은 사진을 한 톤 낮춰 판매중과 구분한다 */
.woocommerce ul.products li.product.outofstock .product-wrap img {
	opacity: 0.62;
	filter: saturate(0.8);
}

/* ---------- 푸터 법정 표기 ---------- */

#copyright .hm-foot-links,
#copyright .hm-foot-biz {
	display: inline-block;
	margin-bottom: 6px;
	line-height: 1.9;
}

#copyright .hm-foot-links a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
#copyright .hm-foot-links a:hover {
	border-bottom-color: currentColor;
}

/* 사업자 정보는 정책 링크보다 한 단계 낮춘다 — 읽히되 앞서지 않게 */
#copyright .hm-foot-biz {
	font-size: 0.92em;
	opacity: 0.72;
}

/* ---------- 브랜드 스토리 — 가운데 정렬 블록 ---------- */

/*
 * 2026-08-31 레이아웃 변경.
 * 사진(세로 2장)과 글을 좌우 1/2 로 두면 높이가 1271 대 450 으로 벌어져
 * 한쪽이 통째로 비었다. 행을 사진행·제목행·카드행으로 나누고 가운데 정렬한다.
 */
.hm-center {
	text-align: center;
}

/* eyebrow 앞의 대시가 가운데 정렬에서 글자를 왼쪽으로 밀어 보인다 */
.hm-eyebrow.hm-center::before {
	margin-right: 0.7rem;
	margin-left: 0.7rem;
}

/* 리드 문장 가운데 정렬 — **브랜드 스토리 도입부 전용**.
 * hm-lead 는 각 페이지 히어로에도 쓰인다(히어로는 왼쪽 정렬이라
 * 전역으로 가운데를 주면 히어로가 다 깨진다). 전용 클래스로만 건다. */
.hm-lead--center {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*
 * 나란히 놓인 브랜드 스토리 사진 2장의 높이를 맞춘다.
 *
 * 원본이 정사각(자개)과 가로형(화조도)으로 비율이 제각각이라 그대로 두면
 * 한쪽만 짧아지고 그 아래가 흰 여백으로 남는다.
 * 4:3 으로 통일하고 cover 로 채운다 — 잘려도 되는 텍스처 사진들이다.
 */
.hm-story-img .img-with-aniamtion-wrap img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 사업자 정보 항목이 줄바꿈으로 쪼개지지 않게 — 전화번호가 중간에서 끊겼다 */
#copyright .hm-foot-item {
	display: inline-block;
	white-space: nowrap;
}

/* 주소는 길어서 모바일에서 nowrap 을 주면 잘린다 — 이것만 줄바꿈 허용 */
#copyright .hm-foot-item--wrap {
	white-space: normal;
}

/* ---------- 호몽이 시향 일기 (홈 후기) ---------- */

/*
 * 후기 410건 중 89%가 40자 이하다. 긴 리뷰 카드에 넣으면 텅 비어 보여서
 * 말풍선 형태로 간다. 호몽이 그림 아래에 말풍선이 물리는 구조.
 */
.hm-toons {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	margin-top: 2.5rem;
}

.hm-toon {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.hm-toon__art {
	display: block;
	border-radius: 3px;
	overflow: hidden;
	line-height: 0;
	background: var(--hm-paper);
}
.hm-toon__art img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.6s ease;
}
.hm-toon:hover .hm-toon__art img {
	transform: scale(1.04);
}

/* 말풍선 — 그림 아래에서 살짝 겹쳐 올라온다 */
.hm-toon__bubble {
	position: relative;
	margin: -1.6rem 0.7rem 0;
	padding: 1.1rem 1.15rem;
	background: var(--hm-white);
	border: 1px solid var(--hm-line);
	border-radius: 3px;
	box-shadow: 0 6px 18px rgba(18, 49, 44, 0.07);
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}
.hm-toon__bubble p {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.65;
	color: var(--hm-ink);
	word-break: keep-all;   /* 한국어는 어절 단위로 끊어야 읽힌다 */
}

/* 말풍선 꼬리 — 위쪽 그림을 가리킨다 */
.hm-toon__bubble::before,
.hm-toon__bubble::after {
	content: '';
	position: absolute;
	left: 2rem;
	width: 0;
	height: 0;
	border-style: solid;
}
.hm-toon__bubble::before {
	top: -11px;
	border-width: 0 11px 11px 11px;
	border-color: transparent transparent var(--hm-line) transparent;
}
.hm-toon__bubble::after {
	top: -10px;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent var(--hm-white) transparent;
}

.hm-toon__meta {
	margin-top: 0.85rem;
	padding-left: 0.7rem;
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 0.8rem;
}
.hm-toon__scent {
	color: var(--hm-jade-dk);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
a.hm-toon__scent:hover {
	border-bottom-color: currentColor;
}
.hm-toon__age {
	color: var(--hm-silver);
}

/* 체험단 표시 — 법정 고지라 작아도 반드시 보여야 한다 */
.hm-toon-note {
	margin-top: 2rem;
	text-align: center;
	font-size: 0.78rem;
	color: var(--hm-silver);
	line-height: 1.7;
}

@media (max-width: 999px) {
	.hm-toons { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
@media (max-width: 690px) {
	.hm-toons { grid-template-columns: 1fr; gap: 1.6rem; }
	.hm-toon__bubble { margin-left: 1rem; margin-right: 1rem; }
}

/*
 * Salient 이 blockquote 에 왼쪽 굵은 선·인용부호·여백을 붙인다.
 * 말풍선으로 쓰려면 그걸 전부 걷어내야 한다. (실제로 옥색 장식이 삐져나왔다)
 */
blockquote.hm-toon__bubble {
	border-left: 0;
	border-top: 1px solid var(--hm-line);
	quotes: none;
	font-style: normal;
	font-size: inherit;
}
blockquote.hm-toon__bubble::first-letter { font-size: inherit; }
blockquote.hm-toon__bubble > p::before,
blockquote.hm-toon__bubble > p::after { content: none; }

/* 부제는 제목과 같이 가운데 — WPBakery 의 custom css 클래스가 안 먹었다 */
.hm-toon-sub {
	text-align: center;
	color: var(--hm-ink);
	opacity: 0.75;
}

/* 카드 아랫변을 맞춘다 — 말풍선 길이가 달라도 메타 줄이 한 선에 오도록 */
.hm-toons { align-items: stretch; }
.hm-toon__meta { margin-top: auto; padding-top: 0.85rem; }

/*
 * 말풍선 꼬리 색 강제.
 *
 * Salient 의 동적 색상 CSS(regen.php 가 만든다)가 blockquote::before 의
 * border-color 를 브랜드 옥색(#43C3BD)으로 통째로 덮어쓴다.
 * 그래서 꼬리가 옥색 삼각형으로 튀어나왔다. 태그+클래스로 특정도를 올리고
 * !important 로 못 박는다. (Salient 규칙도 important 라 이것 없이는 진다 — §7-17 과 같은 상황)
 */
blockquote.hm-toon__bubble::before {
	border-color: transparent transparent var(--hm-line) transparent !important;
}
blockquote.hm-toon__bubble::after {
	border-color: transparent transparent var(--hm-white) transparent !important;
}

/* ==========================================================================
   홈 히어로 슬라이더 — 컨트롤 정리 (2026-09-14)

   사장님 라이브 카페24 사이트와 나란히 놓고 보니 차이가 컸다.
   라이브는 사진 전면 + 점 인디케이터만이고, 우리는

     - 양쪽에 앰버색 큰 사각형 화살표가 박혀 사진을 잘라먹었고
     - 점 인디케이터가 사진 맨 아래 어두운 부분에 묻혀 안 보였고
     - 형광 옥색 버튼이 튀었다

   화살표는 없앤다. 슬라이드가 3장뿐이고 자동으로 넘어가므로,
   화살표가 주는 값보다 사진을 가리는 손해가 크다. 점으로 충분하다.
   ========================================================================== */

.nectar-slider-wrap .slider-prev,
.nectar-slider-wrap .slider-next {
	display: none !important;
}

/* 점은 사진 아래쪽 여백으로 올리고 또렷하게 */
.nectar-slider-wrap .slider-pagination-wrap {
	bottom: 38px !important;
}

.nectar-slider-wrap .slider-pagination .swiper-pagination-switch {
	width: 9px !important;
	height: 9px !important;
	margin: 0 7px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.45) !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	opacity: 1 !important;
	transform: none !important;
	transition: background 0.25s;
}
/* Salient 은 점 안쪽을 가상요소로 그린다 — 그게 흰 네모로 부풀어 보였다 */
.nectar-slider-wrap .slider-pagination .swiper-pagination-switch::before,
.nectar-slider-wrap .slider-pagination .swiper-pagination-switch::after {
	display: none !important;
}
.nectar-slider-wrap .slider-pagination .swiper-pagination-switch.swiper-active-switch {
	background: #FFFFFF !important;
}

/* 슬라이드 A 배경 정렬·모바일 글자 위치는 build-pages.php 의 $fix 가 홈 본문에 넣는다 (배너와 한 몸이라서) */
/* 스크롤 안내 아이콘 — 점과 겹쳤다. 사진 위 요소를 줄이는 방향으로 뺀다 */
.nectar-slider-wrap .slider-down-arrow { display: none !important; }

/*
 * 히어로 버튼 — 채운 형광 옥색 네모였다. 사진 위에서 혼자 튄다.
 * 테두리만 남긴 흰 버튼으로 바꾼다. 사진이 주인공이고 버튼은 안내다.
 */
.nectar-slider-wrap .buttons .button a,
.nectar-slider-wrap a.nectar-button {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	color: #FFFFFF !important;
	border-radius: 2px !important;
	padding: 0.85em 1.9em !important;
	font-weight: 500;
	letter-spacing: 0.02em;
	box-shadow: none !important;
	transition: background-color 0.25s, border-color 0.25s;
}

.nectar-slider-wrap .buttons .button a:hover,
.nectar-slider-wrap a.nectar-button:hover {
	background-color: rgba(255, 255, 255, 0.14) !important;
	border-color: #FFFFFF !important;
}

/* 아래로 내려가라는 화살표도 사진을 가린다 — 모바일에서만 뺀다 */
@media (max-width: 690px) {
	.nectar-slider-wrap .slider-down-arrow { display: none !important; }
	.nectar-slider-wrap .slider-pagination-wrap { bottom: 24px !important; }
}

/* 무통장 안내 (checkout/bank-only.php) — 장바구니 버튼 아래 한 줄 */
.hm-pay-note {
	margin: 1rem 0 0 !important;
	padding: 0.75rem 0.9rem;
	background: rgba(67, 195, 189, 0.08);
	border-left: 2px solid var(--hm-jade, #43C3BD);
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--hm-ink, #1A1614);
	word-break: keep-all;
}
.hm-depositor { margin-top: 0.5rem; }

/* Salient 이 검색창 밑줄에 기본 파랑(#3452ff)을 박아 둔다 — 옵션으로 안 바뀌어 여기서 덮는다 (2026-10-02) */
#search-outer #search input[type="text"],
#search-outer #search .search-box input[type="text"] { border-bottom-color: var(--hm-jade) !important; }