/*
Theme Name: PlayGrow Child
Theme URI: https://playgrow.qodeinteractive.com
Description: A child theme of PlayGrow
Author: Mikado Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: playgrow
Template: playgrow
*/

/* BABY WALKER(상품 61) 페이지에 훅으로 넣은 섹션들 (저장된 템플릿 5184 HAPPY CUSTOMERS / 5195 RECENT NEWS / 5196 PRODUCT SHOWCASE)
   — 본문 그리드(1300px)를 벗어나 Our Story에서처럼 화면 전체 폭 배경으로 표시
   ⚠ 2026-08-30 부터 5195·5196 은 페이지에서 내려서(functions.php 의 add_action 주석 처리)
      아래 5195·5196 규칙은 지금은 걸리는 곳이 없다. 되살릴 때를 위해 남겨 둠. */
.single-product .elementor-5184 > .elementor-section,
.single-product .elementor-5195 > .elementor-section,
.single-product .elementor-5196 > .elementor-section,
.single-product .elementor-5245 > .elementor-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* BABY WALKER(상품 61): 페이지 마지막이 HAPPY CUSTOMERS(5184)의 옅은 배경 섹션이라
   본문 아래 여백(테마 기본 #qodef-page-inner padding-bottom: 140px)이 남으면
   그만큼 흰 띠가 생겨 섹션과 푸터 사이가 벌어진다 → 이 페이지에서만 여백을 없애
   섹션 배경이 푸터에 바로 닿게 한다. 섹션 자체의 아래 여백(99px)은 그대로 둔다. */
.postid-61 #qodef-page-inner {
	padding-bottom: 0;
}

/* ══ HAPPY CUSTOMERS 후기 — PC: 연속 띠 / 모바일: 슬라이더 ══════════════
   후기 16개를 모두 보여주려고 2026-08-30 에 만든 구조. 템플릿 5184 안에 같은
   테스티모니얼 위젯을 두 벌 두고(마퀴용 .pgw-hc-marquee / 슬라이더용 .pgw-hc-slider)
   화면 폭에 따라 하나만 보여준다. 기준 680px 은 테마가 이미 쓰는 값(위젯도 여기서 1열).
   마퀴는 CSS 애니메이션뿐이라 폭이 바뀌어도 다시 계산할 게 없다. 반대로 슬라이더는
   숨은 채 초기화되면 폭을 0 으로 잡으므로, 폭이 바뀌는 순간 swiper.update() 를
   부르는 처리를 functions.php 의 playgrow_child_walker_happy_customers_motion 에 뒀다. */
@media (max-width: 680px) { .pgw-hc-marquee { display: none; } }
@media (min-width: 681px) { .pgw-hc-slider  { display: none; } }

/* PC 연속 띠 — 움직이는 띠(테마 text marquee)와 같은 원리.
   같은 카드 묶음을 두 벌 이어 붙이고(복제는 functions.php 의 JS) 왼쪽으로 등속 이동,
   정확히 절반(-50%)을 지나면 처음과 같은 그림이라 이음매가 보이지 않는다.
   ⚠ 절반이 딱 맞으려면 카드 사이 간격이 '카드마다 붙는 여백'이어야 한다
      → 테마의 column-gap 은 끄고 카드 오른쪽 margin 으로 바꿈.
   ⚠ 폭은 테마 본문 그리드를 쓰지 않고 따로 잡는다(2026-08-30 수정).
      테마 그리드는 창 폭에 따라 1300 → 1100 → 960 → 86% 로 뚝뚝 끊겨서
      (main.css 의 1441 / 1201 / 1025 경계) 창을 줄이는 동안 좌우 여백이
      좁아졌다 갑자기 넓어졌다를 반복한다. 띠에는 이 계단이 그대로 보여 거슬린다.
      → min() 공식으로 창 폭을 따라 매끄럽게 바뀌게 하고, 좌우 40px 은 남겨
      기린·인형 캐릭터 자리를 지킨다. 아주 넓은 화면에서는 1720px 에서 멈춘다. */
/* 선택자가 길어진 이유: Elementor 가 위젯에 width:100% 를 더 강한 선택자로 걸어서
   .pgw-hc-marquee 하나만으로는 width 가 먹지 않는다.
   2026-09-03: Main Home(5081) 의 HAPPY CUSTOMERS 섹션에도 같은 띠를 넣어서 선택자 추가.
   두 곳 다 섹션이 화면 전폭이고 그 안의 열이 테마 그리드로 가운데 정렬돼 있어
   같은 공식(50% - 폭/2)이 그대로 통한다. */
.single-product .elementor-5184 .pgw-hc-marquee,
.home .elementor-5081 .pgw-hc-marquee {
	--pgw-hc-width: min(100vw - 80px, 1720px);
	width: var(--pgw-hc-width);
	/* flex-shrink 를 꺼야 하는 이유(2026-09-03, Main Home 에 붙이면서 발견):
	   Elementor 의 .elementor-widget-wrap 은 flex 컨테이너다. 위젯은 flex 아이템이라
	   width 를 줘도 기본값 flex-shrink:1 때문에 부모(테마 그리드 1300px + 음수 마진만큼)
	   폭까지 쭈그러든다. 상품 페이지(5184)는 섹션 자체를 100vw 로 넓혀 놔서 쭈그러들 일이
	   없어 지금까지 드러나지 않았다. */
	flex-shrink: 0;
	margin-left: calc(50% - var(--pgw-hc-width) / 2);
	overflow: hidden;
}
.pgw-hc-marquee .qodef-grid-inner {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	column-gap: 0;
	animation: pgw-hc-scroll 120s linear infinite;
}
.pgw-hc-marquee .qodef-grid-item {
	flex: 0 0 380px;
	max-width: none;
	margin-right: 60px;
}
/* 읽고 싶을 때 멈출 수 있게 */
.pgw-hc-marquee:hover .qodef-grid-inner { animation-play-state: paused; }

@keyframes pgw-hc-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* 움직임을 줄이도록 설정한 사용자에게는 정지 */
@media (prefers-reduced-motion: reduce) {
	.pgw-hc-marquee .qodef-grid-inner { animation: none; }
}

/* ══ HAPPY CUSTOMERS(템플릿 5184) 좌우 캐릭터 ═══════════════════════════
   데모 Main Home 의 같은 섹션에 있는 기린(main-img-1)·인형(main-img-2)·잎(main-img-3).
   5184 섹션 설정에는 데모에서 가져온 "Offset Images" 값이 그대로 들어 있지만,
   테마는 그 값을 상품 페이지 post meta(qodef_elementor_section_data_meta)에 캐시된
   것만 JS 로 넘겨서 그린다. 그 캐시는 훅으로 마지막에 붙는 5184 를 담지 못해
   이 섹션에서만 그림이 안 나온다 → 스토리 섹션의 .pgw-scene 처럼 직접 깐다.
   위치·크기는 데모 offset 값 그대로(기린 top 19%/left -0.8%, 잎 bottom 28.5%/right 1%,
   인형 bottom 0/right 1.3%).

   ⚠ 좌표 기준: 그림은 컬럼 안의 HTML 위젯에 들어 있어서 그대로 두면 섹션 여백
   (위 140px·아래 99px)을 뺀 안쪽 상자가 기준이 된다. 데모와 같은 자리에 놓으려면
   기준 상자를 섹션 전체로 넓혀야 하므로 그 여백만큼 음수로 잡아 늘린다. */
/* 그림이 든 HTML 위젯 자체는 position:relative 에 높이 0 이라, 그대로 두면
   기준 상자가 그 0 짜리 상자가 된다 → static 으로 바꿔 컬럼 상자가 기준이 되게 한다. */
.single-product .elementor-5184 .elementor-widget-html { position: static; }

/* ⚠ left·right 를 반드시 지정한다(2026-08-30 수정).
   예전에는 top·bottom 만 주고 가로는 width:100vw + margin-left 로만 잡았는데,
   left 가 auto 면 브라우저는 "원래 흐름에서 있었을 자리"(= HTML 위젯 상자의 왼쪽)를
   기준으로 삼는다. 그런데 테마는 1024px 이하에서 컬럼 안쪽(.elementor-widget-wrap)에
   좌우 10% padding 을 넣어 위젯 상자를 안으로 들여보낸다 → 기준점이 그만큼 오른쪽으로
   밀리면서 캐릭터 3개가 통째로 이동, 오른쪽 인형·잎은 화면 밖으로 나가 사라졌다.
   → 양 끝을 화면 좌우에 직접 고정해 위젯 상자와 무관하게 만든다.
   width 도 100vw 대신 양 끝으로 결정되게 두면 세로 스크롤바 폭 오차까지 없어진다. */
.single-product .elementor-5184 .pgw-happy-deco {
	position: absolute;
	top: -140px;
	bottom: -99px;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	width: auto;
	margin-left: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
/* 좌우 위치는 % 가 아니라 px — % 로 두면 창 폭에 따라 몇 px 씩 계속 움직인다
   (인형이 오른쪽 끝에서 13~25px 사이로 변동했다). 값은 넓은 화면일 때 모습 그대로. */
.pgw-happy-deco img { position: absolute; display: block; }
.pgw-happy-deco-giraffe { top: 19%;      left: -12px;  width: 104px; }
.pgw-happy-deco-leaves  { bottom: 28.5%; right: 14px;  width: 25px; }
.pgw-happy-deco-doll    { bottom: 0;     right: 18px;  width: 69px; }

/* 태블릿 폭에서는 섹션 여백이 110/74 로 줄어든다(템플릿 설정) */
@media (max-width: 1024px) {
	.single-product .elementor-5184 .pgw-happy-deco { top: -110px; bottom: -74px; }
}
/* 좁은 화면에서는 후기가 세로로 쌓여 글과 겹치므로 정리 — .pgw-scene-item 과 같은 기준 */
@media (max-width: 680px) {
	.single-product .elementor-5184 .pgw-happy-deco { display: none; }
}

/* 여백을 없애 섹션이 푸터에 닿자 테마 푸터의 윗줄(#qodef-page-footer border-top: 1px #eae3de)이
   섹션 아래에 실선으로 보인다. 섹션 위쪽에는 선이 없으므로 아래쪽도 없앤다.
   다른 페이지의 푸터 윗줄은 그대로 둔다. */
.postid-61 #qodef-page-footer {
	border-top: none;
}

/* 움직이는 띠(템플릿 5245)는 글자가 화면 끝까지 흘러야 하므로
   Elementor 기본 콘텐츠 폭(1140px) 제한도 함께 푼다. */
.single-product .elementor-5245 > .elementor-section > .elementor-container { max-width: none !important; }
.single-product .elementor-5245 .elementor-widget-wrap { padding: 0 !important; }

/* 데모처럼 띠 위아래에 얇은 실선.
   섹션 설정에도 테두리 값이 들어 있지만 Elementor 가 만든 CSS 가 실제로는
   적용되지 않아(계산값 0px) 여기서 직접 지정한다. 색은 상품 탭·표와 같은 #eae3de. */
.single-product .elementor-5245 > .elementor-section {
	border-top: 1px solid #eae3de !important;
	border-bottom: 1px solid #eae3de !important;
}

/* BABY WALKER 상품 쇼케이스(템플릿 5196): 이미지만 쓰고 글자 부분은 감춘다.
   카테고리(OTHER)·상품명·가격·Add to cart 가 전부 .qodef-e-content 한 덩어리라
   이것만 숨기면 됨. 마우스 올렸을 때 배경이 동그라미로 바뀌는 효과는
   .qodef-e-media 쪽 SVG 라 그대로 남는다.
   쇼핑몰이 아니어서 가격·장바구니가 노출되면 안 되는 것도 겸함. */
.single-product .elementor-5196 .qodef-e-content {
	display: none;
}

/* BABY WALKER 상품 쇼케이스(템플릿 5196): 상품 그리드가 마지막 행 아래에도 남기는
   세로 간격(22.5px)을 제거해 아래 RECENT NEWS 섹션과 경계선이 맞닿게 함 */
.single-product .elementor-5196 .qodef-grid-inner {
	margin-bottom: 0;
}

/* BABY WALKER RECENT NEWS(템플릿 5195): 위젯 위·아래 가로 실선 제거 */
.single-product .elementor-5195 .qodef-interactive-link-showcase {
	border-top: none;
	border-bottom: none;
}

/* BABY WALKER(상품 61): 갤러리 썸네일을 비웠으므로 남아 있는 빈 썸네일 칼럼(117px)을 없애고
   대표 이미지가 이미지 영역 전체 폭을 쓰도록 함 */
.postid-61 .qodef-woo-thumbnails-wrapper {
	display: none !important;   /* 테마가 grid 로 지정하므로 !important 필요 */
}

.postid-61 .woocommerce-product-gallery__image {
	flex: 1 1 100%;
	width: 100%;
	aspect-ratio: 3 / 4;
}

/* 썸네일이 사라지면서 대표 이미지 높이 기준(썸네일 5장 = 약 642px)이 없어져
   이미지가 원본 비율대로 작아짐 → 3:4 틀을 지정해 기존 크기 복원 */
.postid-61 .woocommerce-product-gallery__image img.wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* BABY WALKER(상품 61): 2열(이미지|정보) 레이아웃을 세로 1열 가운데 정렬로 재배치
   순서 = 제목 → 브랜드 문구 → 메인 이미지 → 탭(Description) */
.postid-61 .qodef-woo-single-inner {
	grid-template-columns: 1fr !important;   /* 테마가 615px 615px 2열로 지정 */
}

.postid-61 .summary.entry-summary {
	max-width: 1000px;
	margin: 0 auto !important;
	text-align: center;
}

/* 대표 사진은 가로(3:2) 원본인데 테마가 세로 틀에 object-fit:cover 로 넣어
   좌우 절반을 잘라내고 있었다. 자르지 말고 원본 비율 그대로 보여준다. */
.postid-61 .summary .woocommerce-product-gallery {
	max-width: 1000px;
	margin: 40px auto;   /* 제목 바로 아래 붙는 게 맞아 원래 값 유지 (2026-09-07 확인) */
}
.postid-61 .summary .woocommerce-product-gallery__image {
	/* 테마가 3/4 세로 비율을 강제한다. 풀지 않으면 사진 아래에 빈 칸이 남는다 */
	aspect-ratio: auto !important;
	height: auto !important;
}
/* :not(.zoomImg) 필수 — 마우스 확대(wc-product-gallery-zoom)는 원본 크기의
   <img class="zoomImg"> 를 겹쳐서 움직인다. 여기에 width:100% 를 걸면
   확대 이미지가 표시 크기로 눌려서 확대가 안 되는 것처럼 보인다. */
.postid-61 .summary .woocommerce-product-gallery img:not(.zoomImg) {
	width: 100% !important;
	height: auto !important;
	object-fit: initial !important;
}

/* ===== 블로그 상세글 2단 배치 (Blog Post - First Steps 배치도) ===== */

/* 2단 행: 데스크톱은 좌우 40px 패딩으로 80px 간격 */
.pgc-row .elementor-column > .elementor-element-populated {
	padding-top: 0;
	padding-bottom: 0;
}

/* 이미지·텍스트 세로 가운데 정렬 */
.pgc-row--middle > .elementor-container {
	align-items: center;
}

/* 사진 자리 플레이스홀더 */
.pgc-figure {
	margin: 0;
}

.pgc-figure .pgc-ph {
	position: relative;
	width: 100%;
	background: repeating-linear-gradient(135deg, #ededed 0 12px, #f7f7f7 12px 24px);
}

.pgc-figure--219 .pgc-ph { aspect-ratio: 21 / 9; }
.pgc-figure--43 .pgc-ph  { aspect-ratio: 4 / 3; }
.pgc-figure--11 .pgc-ph  { aspect-ratio: 1 / 1; }

.pgc-figure .pgc-ph::after {
	content: attr(data-label);
	position: absolute;
	left: 18px;
	bottom: 16px;
	font-family: monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
}

.pgc-figure figcaption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.65;
	text-align: left;
	color: rgba(0, 0, 0, 0.55);
}

/* 본문 양쪽 정렬 */
.pgc-justify p {
	text-align: justify;
	hyphens: auto;
}

/* 태블릿 이하: 2단 -> 1단 (테마 브레이크포인트 1024px에 맞춤) */
@media only screen and (max-width: 1024px) {
	/* Elementor 컬럼은 flex 아이템이라 width 만으로는 줄바꿈이 안 됨 */
	.pgc-row > .elementor-container {
		flex-wrap: wrap;
		align-items: stretch;
	}

	.pgc-row > .elementor-container > .elementor-column {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.pgc-row .elementor-column > .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* 1단으로 접히면 위아래 간격이 필요함 */
	.pgc-row > .elementor-container > .elementor-column + .elementor-column > .elementor-element-populated {
		padding-top: 36px;
	}

	/* 모바일에서 좌우 순서를 뒤집는 행에만 적용 (예: 이미지가 왼쪽이라 제목·본문을 위로 올릴 때).
	   pgc-row--middle 은 세로 가운데 정렬만 담당하므로 여기에 섞지 말 것 —
	   통계 콜아웃처럼 왼쪽이 먼저 와야 하는 행이 같이 뒤집힘. */
	.pgc-row--flip > .elementor-container {
		flex-direction: column-reverse;
	}

	.pgc-row--flip > .elementor-container > .elementor-column + .elementor-column > .elementor-element-populated {
		padding-top: 0;
	}

	.pgc-row--flip > .elementor-container > .elementor-column:first-child > .elementor-element-populated {
		padding-top: 36px;
	}
}

/* 모바일: 양쪽 정렬 해제 (좁은 폭에서 단어 간격이 벌어짐) */
@media only screen and (max-width: 680px) {
	.pgc-justify p {
		text-align: left;
		hyphens: manual;
	}

	.pgc-figure .pgc-ph::after {
		left: 12px;
		bottom: 10px;
		font-size: 9px;
	}
}

/* 2단 위 구분선 (배치도의 border-top + 여백) */
.pgc-row--rule > .elementor-container {
	border-top: 1px solid rgba(0, 0, 0, 0.16);
	padding-top: 72px;
}

/* 번호 + 소제목 + 본문 가로 행 리스트 */
.pgc-list {
	border-top: 1px solid rgba(0, 0, 0, 0.16);
	margin-top: 32px;
}

.pgc-list-item {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	align-items: baseline;
	padding: 28px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.pgc-list-n {
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: #e38443;
}

.pgc-list-item h3 {
	/* 테마 기본 h3 는 대문자+넓은 자간이라 같은 페이지 h2 와 어긋남 -> 리스트 안에서만 맞춤 */
	margin: 0;
	flex: 0 1 300px;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pgc-list-item p {
	margin: 0;
	flex: 1 1 280px;
	min-width: 0;
	font-size: 16.5px;
	line-height: 1.76;
}

@media only screen and (max-width: 1024px) {
	.pgc-row--rule > .elementor-container {
		padding-top: 44px;
	}
}

@media only screen and (max-width: 680px) {
	.pgc-list-item {
		gap: 8px 20px;
		padding: 22px 0;
	}

	.pgc-list-n {
		font-size: 28px;
	}

	.pgc-list-item h3 {
		flex: 1 1 100%;
		font-size: 20px;
	}
}

/* 3:2 사진 비율 추가 */
.pgc-figure--32 .pgc-ph { aspect-ratio: 3 / 2; }

/* 번호 카드 그리드 (칸 사이 2px 선은 배경색으로) */
.pgc-cards {
	display: grid;
	gap: 2px;
	margin-top: 48px;
	background: rgba(0, 0, 0, 0.14);
}

.pgc-cards--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pgc-card {
	padding: 36px 32px 40px;
	background: #fff;
}

.pgc-card-n {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #e38443;
}

.pgc-card h3 {
	/* 테마 기본 h3(대문자·넓은 자간) 대신 같은 페이지 h2 와 결 맞춤 */
	margin: 18px 0 12px;
	font-size: 23px;
	font-weight: 500;
	line-height: 1.24;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pgc-card p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.74;
}

@media only screen and (max-width: 1024px) {
	.pgc-cards--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 680px) {
	.pgc-cards--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.pgc-card {
		padding: 28px 22px 32px;
	}

	.pgc-card-n {
		font-size: 32px;
	}

	.pgc-card h3 {
		font-size: 20px;
	}
}

/* 큰 번호 + 제목·본문 가로 단계 레일 */
.pgc-steps {
	margin-top: 56px;
}

.pgc-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 48px;
	padding: 40px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.pgc-steps .pgc-step:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.pgc-step-n {
	font-size: 76px;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: #e38443;
}

.pgc-step-body h3 {
	/* 테마 기본 h3(대문자·넓은 자간) 대신 같은 페이지 h2 와 결 맞춤 */
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pgc-step-body p {
	margin: 0;
	max-width: 74ch;
	font-size: 16.5px;
	line-height: 1.78;
	text-align: justify;
	hyphens: auto;
}

/* 글 맨 끝 이탤릭 마무리 문단 */
.pgc-closing p {
	max-width: 80ch;
	margin: 56px 0 0;
	font-size: 19px;
	line-height: 1.68;
}

@media only screen and (max-width: 1024px) {
	.pgc-step {
		gap: 28px;
		padding: 32px 0;
	}

	.pgc-step-n {
		font-size: 56px;
	}
}

@media only screen and (max-width: 680px) {
	.pgc-step {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.pgc-step-n {
		font-size: 44px;
	}

	.pgc-step-body h3 {
		font-size: 22px;
	}

	.pgc-step-body p {
		text-align: left;
		hyphens: manual;
	}

	.pgc-closing p {
		margin-top: 36px;
		font-size: 17px;
	}
}

/* 16:9 사진 비율 추가 */
.pgc-figure--169 .pgc-ph { aspect-ratio: 16 / 9; }

/* 왼쪽 고정 목차(가이드 레일) */
/* sticky 가 움직이려면 컬럼이 행 전체 높이여야 하므로 stretch 유지 (start 로 두면 안 붙음) */
.pgc-row--guide > .elementor-container {
	align-items: stretch;
}

.pgc-guide-col > .elementor-element-populated {
	position: sticky;
	top: 40px;
	align-self: start;
}

.pgc-guide-label {
	font-family: monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.45);
}

.pgc-guide-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 18px;
	font-size: 13.5px;
	line-height: 1.45;
}

.pgc-guide-nav a {
	padding: 9px 12px;
	color: rgba(0, 0, 0, 0.62);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pgc-guide-nav a:hover,
.pgc-guide-nav a.qodef-anchor--active {
	background: rgba(227, 132, 67, 0.12);
	color: #b8642c;
	font-weight: 500;
}

/* 제목 | 본문 2단 규칙 표 */
.pgc-rules {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: rgba(0, 0, 0, 0.14);
	margin: 0 0 64px;
}

.pgc-rule {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px;
	padding: 26px 28px;
	background: #fff;
}

.pgc-rule h3 {
	/* 테마 기본 h3(대문자·넓은 자간) 대신 같은 페이지 h2 와 결 맞춤 */
	margin: 0;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-transform: none;
}

.pgc-rule p {
	margin: 0;
	font-size: 16px;
	line-height: 1.74;
}

@media only screen and (max-width: 1024px) {
	/* 목차는 모바일에서 고정 해제하고 본문 위로 */
	.pgc-guide-col > .elementor-element-populated {
		position: static;
		padding-bottom: 36px;
	}

	.pgc-rule {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* 옆 제목이 스크롤 따라 붙는 행 (sticky 는 컬럼이 stretch 여야 동작) */
.pgc-row--sticky > .elementor-container {
	align-items: stretch;
}

.pgc-sticky-col > .elementor-element-populated {
	position: sticky;
	top: 40px;
	align-self: start;
}

/* 통계 콜아웃 */
.pgc-stat > .elementor-container {
	border-top: 1px solid rgba(0, 0, 0, 0.16);
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
	padding: 56px 0;
}

.pgc-stat-n {
	font-size: 150px;
	font-weight: 700;
	line-height: 0.86;
	letter-spacing: -0.055em;
	color: #e38443;
}

.pgc-stat-t {
	margin: 0;
	font-size: 25px;
	line-height: 1.44;
	letter-spacing: -0.018em;
	color: #000;
}

/* 2단 카드 (번호 없는 넓은 카드) */
.pgc-cards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pgc-cards--wide .pgc-card {
	padding: 38px 34px 42px;
}

.pgc-cards--wide .pgc-card h3 {
	margin: 0 0 14px;
	font-size: 25px;
}

.pgc-cards--wide .pgc-card p {
	font-size: 16px;
	line-height: 1.76;
}

@media only screen and (max-width: 1024px) {
	.pgc-sticky-col > .elementor-element-populated {
		position: static;
		padding-bottom: 24px;
	}

	.pgc-stat > .elementor-container {
		padding: 40px 0;
	}

	.pgc-stat-n {
		font-size: 96px;
	}

	.pgc-stat-t {
		font-size: 21px;
	}

	.pgc-cards--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media only screen and (max-width: 680px) {
	.pgc-stat-n {
		font-size: 68px;
	}

	.pgc-stat-t {
		font-size: 18px;
	}

	.pgc-cards--wide .pgc-card {
		padding: 28px 22px 32px;
	}

	.pgc-cards--wide .pgc-card h3 {
		font-size: 21px;
	}
}

/* 캐치프레이즈를 인용바 없이 큰 리드 문단으로 (Early Allergens 배치도) */
.pgc-lede blockquote {
	margin: 0;
	padding: 0;
	border: none;
}

.pgc-lede blockquote::before,
.pgc-lede blockquote::after {
	display: none;
}

.pgc-lede blockquote p {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.015em;
	font-style: normal;
	color: rgba(0, 0, 0, 0.78);
}

@media only screen and (max-width: 680px) {
	.pgc-lede blockquote p {
		font-size: 19px;
	}
}

/* 좌우 칸을 아래쪽 기준으로 맞추는 행 */
.pgc-row--bottom > .elementor-container {
	align-items: flex-end;
}

/* 제목 | 본문 가로 행 (구분선만, 배경 없음) */
.pgc-splits {
	margin-top: 56px;
	border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.pgc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	padding: 44px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.pgc-split h3 {
	/* 테마 기본 h3(대문자·넓은 자간) 대신 같은 페이지 h2 와 결 맞춤 */
	margin: 0;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.16;
	letter-spacing: -0.012em;
	text-transform: none;
}

.pgc-split p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.78;
	text-align: justify;
	hyphens: auto;
}

/* 옆 칸에 놓이는 마무리 문단은 위 여백 없이 */
.pgc-closing--flush p {
	margin-top: 0;
	font-size: 20px;
	line-height: 1.62;
}

@media only screen and (max-width: 1024px) {
	.pgc-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 32px 0;
	}

	.pgc-split h3 {
		font-size: 25px;
	}
}

@media only screen and (max-width: 680px) {
	.pgc-split p {
		text-align: left;
		hyphens: manual;
	}

	.pgc-split h3 {
		font-size: 22px;
	}

	.pgc-closing--flush p {
		font-size: 18px;
	}
}

/* 24:9 사진 비율 추가 */
.pgc-figure--249 .pgc-ph { aspect-ratio: 24 / 9; }

/* 화면 전체 폭으로 빠져나가는 히어로 (본문 그리드 1100px 을 벗어남)
   body 에 overflow-x:hidden 이 있어 가로 스크롤은 생기지 않음 */
.pgc-fullbleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 좁은 본문 컬럼 (배치도의 max-width:900px) */
.pgc-narrow .elementor-widget-wrap > .elementor-element {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* 본문 중간 풀 인용 */
.pgc-pull {
	margin: 56px auto;
	padding: 0 0 0 32px;
	border-left: 3px solid #e38443;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.42;
	letter-spacing: -0.025em;
	font-style: normal;
	color: #000;
}

.pgc-pull::before,
.pgc-pull::after {
	display: none;
}

/* 활동 블록의 제목 */
.pgc-act h3 {
	/* 테마 기본 h3(대문자·넓은 자간) 대신 같은 페이지 h2 와 결 맞춤 */
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.012em;
	text-transform: none;
}

.pgc-act p {
	margin: 0;
}

@media only screen and (max-width: 1024px) {
	.pgc-pull {
		margin: 40px auto;
		font-size: 23px;
	}

	.pgc-act h3 {
		font-size: 25px;
	}
}

@media only screen and (max-width: 680px) {
	.pgc-pull {
		padding-left: 20px;
		font-size: 20px;
	}

	.pgc-act h3 {
		font-size: 22px;
	}
}

/* 2:1 사진 비율 추가 */
.pgc-figure--21 .pgc-ph { aspect-ratio: 2 / 1; }

/* 더 좁은 본문 컬럼 (배치도의 max-width:760px) */
.pgc-narrow--760 .elementor-widget-wrap > .elementor-element {
	max-width: 760px;
}

/* 번호 없는 카드는 위 여백 없이 (카드 섹션이 독립적으로 놓일 때) */
.pgc-cards--3 .pgc-card h3 {
	margin-top: 0;
}

/* ══ 헤더 언어 선택기 (GTranslate) ═══════════════════════════════════════
   플러그인 기본 스킨(회색 테두리 박스 + Arial)을 걷어내고 상단 메뉴와
   같은 서체·자간·대문자 규칙으로 맞춘다.
   같은 위젯이 헤더 영역 4곳(enlarged-right / header-widget-area-one /
   sticky / mobile)에 들어가므로 .widget_gtranslate 하나로 전부 커버됨.
   플러그인이 인라인 <style> 로 자기 스킨을 넣기 때문에 !important 필요. */
.widget_gtranslate { margin: 0 20px 0 0; }
.widget_gtranslate .gtranslate_wrapper { position: relative; line-height: 1; }
.widget_gtranslate .gt_switcher { width: auto !important; font-family: inherit !important; }
.widget_gtranslate .gt_switcher .gt_selected {
    width: auto !important;
    background: none !important;   /* 플러그인이 흰 배경을 깔아둠 */
}

.widget_gtranslate .gt_switcher .gt_selected a {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.4px;
    line-height: 1;
    text-transform: uppercase;
    color: #000 !important;        /* 플러그인 인라인 스타일이 #666 을 지정함 */
    transition: color .2s ease-out;
}
.widget_gtranslate .gt_switcher .gt_selected a:hover { color: #db915e !important; }
.widget_gtranslate .gt_switcher .gt_selected a img { width: 16px !important; height: 16px !important; margin: 0 !important; }

/* 기본 화살표는 배경이미지라 색이 고정됨 → 글자색을 따라가는 꺾쇠로 교체 */
.widget_gtranslate .gt_switcher .gt_selected a::after {
    content: '' !important;
    position: static !important;   /* 기본값은 absolute 라 글자 위로 겹침 */
    display: block !important;
    background: none !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 3px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
/* 열림 상태: 플러그인이 rotate(180deg) 를 덮어쓰므로 위 방향으로 다시 지정 */
.widget_gtranslate .gt_switcher .gt_selected a.open::after {
    transform: translateY(2px) rotate(-135deg) !important;
}

/* 펼쳐지는 언어 목록 */
.widget_gtranslate .gt_switcher .gt_option {
    position: absolute !important;
    top: calc(100% + 16px);
    right: 0;
    left: auto !important;
    width: 190px !important;
    height: auto !important;       /* 플러그인이 인라인 height 를 박아 목록이 잘림 */
    max-height: 340px !important;
    overflow-y: auto;
    padding: 6px 0;
    background: #fff !important;
    border: 1px solid #f1ebe5 !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .09);
    z-index: 120;
}
.widget_gtranslate .gt_switcher .gt_option a {
    display: flex !important;
    align-items: center;
    gap: 9px;
    height: auto !important;
    padding: 8px 16px !important;
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    line-height: 1.35 !important;  /* 플러그인 기본값 0 → "Chinese (Simplified)" 두 줄이 겹침 */
    letter-spacing: .6px;
    color: #6e6e6e !important;
    background: none !important;
    transition: color .2s ease-out, background-color .2s ease-out;
}
.widget_gtranslate .gt_switcher .gt_option a:hover {
    color: #db915e !important;
    background: #faf6f3 !important;
}
.widget_gtranslate .gt_switcher .gt_option a img { width: 16px !important; height: 16px !important; margin: 0 !important; }

/* 좁은 화면: 목록이 화면 밖으로 나가지 않도록 */
@media (max-width: 680px) {
    .widget_gtranslate { margin-right: 12px; }
    .widget_gtranslate .gt_switcher .gt_option { max-width: calc(100vw - 32px); }
}

/* 브랜드명(MONTENY) 번역 제외용 span.
   테마의 일부 규칙이 이 위치의 span 을 display:block 으로 잡아
   앞뒤 공백이 사라지면서 "BYMONTENY" 처럼 붙어버린다. */
.pgc-brand { display: inline !important; }

/* ══ BABY WALKER 상품 페이지 하단 브랜드 섹션 (저장된 템플릿 "Baby Walker Story") ══
   배치도: ~/Downloads/Baby Walker/Baby Walker.dc.html
   배치만 가져오고 서체·색상은 기존 PLAYGROW 유지(강조색 #e38443).
   사진은 회색 플레이스홀더 — 실사진 오면 .pgc-ph 를 <img> 로 교체.
   블로그 글에서 쓰던 .pgc-figure / .pgc-ph 를 그대로 재사용한다. */
.pgc-figure--34 .pgc-ph  { aspect-ratio: 3 / 4; }
.pgc-figure--241 .pgc-ph { aspect-ratio: 2.4 / 1; }

/* 사이트 표준 콘텐츠 폭(1300px)에 맞춘다.
   ⚠ Elementor 전역 콘텐츠 폭이 1140px 이라 그냥 두면 여기서 먼저 잘린다
   (컬럼 좌우 padding 10px 까지 더해 실제 1120px 이 됐었음).
   그래서 컨테이너 max-width 와 컬럼 padding 을 함께 풀어야 1300px 이 나온다. */
.pgw-section > .elementor-container { max-width: none !important; }
.pgw-section .elementor-widget-wrap { padding: 0 !important; }

.pgw-block {
	max-width: 1300px;
	margin: 0 auto;
	text-align: left;
}

/* ══ 본문 좌우 여백 — 테마 기준과 통일 (2026-08-31) ═══════════════════════
   히어로·01~04 섹션은 배경을 화면 끝까지 깔려고 width:100vw 로 펴 놨는데,
   그 안의 글상자는 max-width:1300px 만 있어서 창이 1300px 아래로 좁아지면
   글이 화면 가장자리에 그대로 붙었다(04 만 24px 패딩으로 예외였고, 그 값도
   다른 페이지보다 10px 좁았다).
   Blog·Our Story·Contact Us 등 나머지 페이지는 테마의 본문 그리드
   (.qodef-content-grid: 1441px↑ 1300 / ~1440 1100 / ~1200 960 / ~1024 86%)를
   쓰므로 같은 값을 그대로 따라간다 → 어느 페이지에서든 글 시작선이 같아진다.
   ※ 마무리(closing) 섹션은 애초에 테마 그리드 안에 있어 여기서 제외.
   ※ 배경·구름 띠·장식은 그대로 화면 전체 폭 유지(글자 위치만 맞춤). */
.pgw-section--hero .pgw-block,
.pgw-section--materials .pgw-block,
.pgw-section--design .pgw-block,
.pgw-section--craft .pgw-block,
.pgw-section--initials .pgw-panel > .pgw-panel-grid {
	width: 1300px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}
@media (max-width: 1440px) {
	.pgw-section--hero .pgw-block,
	.pgw-section--materials .pgw-block,
	.pgw-section--design .pgw-block,
	.pgw-section--craft .pgw-block,
	.pgw-section--initials .pgw-panel > .pgw-panel-grid { width: 1100px; }
}
@media (max-width: 1200px) {
	.pgw-section--hero .pgw-block,
	.pgw-section--materials .pgw-block,
	.pgw-section--design .pgw-block,
	.pgw-section--craft .pgw-block,
	.pgw-section--initials .pgw-panel > .pgw-panel-grid { width: 960px; }
}
@media (max-width: 1024px) {
	.pgw-section--hero .pgw-block,
	.pgw-section--materials .pgw-block,
	.pgw-section--design .pgw-block,
	.pgw-section--craft .pgw-block,
	.pgw-section--initials .pgw-panel > .pgw-panel-grid { width: 86%; }
}
.pgw-block p { margin: 0; }

/* 섹션 상단 라벨 (WOODEN BABY WALKER — HANDMADE IN-HOUSE) */
.pgw-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
}
.pgw-eyebrow-accent { color: #e38443; }
.pgw-eyebrow-rule { width: 18px; height: 1px; background: rgba(0, 0, 0, 0.25); }

.pgw-h1 {
	margin: 26px 0 0;
	/* 26ch: 첫 줄이 "…Companion" 에서 끊기는 폭(2026-08-31 사용자 요청).
	   20ch 였을 때는 "The Warmest and Safest / Companion for Your Child's / First Steps" 3줄.
	   600px 이상에서는 항상 2줄로 끊기고, 그보다 좁으면 글상자 자체가 좁아 자연스럽게 더 접힌다. */
	max-width: 26ch;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	text-transform: none;
}
.pgw-h2 {
	margin: 0;
	max-width: 26ch;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-transform: none;
}
.pgw-h2--plain { max-width: none; }
.pgw-block h4 {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-transform: none;
}

/* 두 번째 문단부터는 앞 문단과 20px (2026-09-07 — 다른 페이지 문단 간격과 동일) */
.pgw-lede + .pgw-lede {
	margin-top: 20px !important;
}
.pgw-lede {
	margin: 30px 0 0 !important;
	max-width: 50ch;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
}
.pgw-sublede {
	margin: 26px 0 0 !important;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.8;
}

/* 버튼 */
.pgw-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 38px; }
.pgw-btn {
	display: inline-block;
	padding: 15px 30px;
	border: 1px solid rgba(0, 0, 0, 0.26);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #000;
	transition: background-color .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
.pgw-btn:hover { border-color: #e38443; color: #e38443; }
.pgw-btn--solid { background: #e38443; border-color: #e38443; color: #fff; }
.pgw-btn--solid:hover { background: #c96f31; border-color: #c96f31; color: #fff; }

.pgw-hero-figure { margin-top: clamp(44px, 6vw, 80px) !important; }

/* 신뢰 배지 4칸 — 1px 선으로 나뉜 격자 */
.pgw-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 1px;
	background: #eae3de;
	border: 1px solid #eae3de;
	border-radius: 20px;
	overflow: hidden;
}
.pgw-trust-item { padding: 26px 24px; background: #fff; }
.pgw-k {
	font-family: monospace;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e38443;
}
.pgw-v { margin-top: 12px; font-size: 17px; font-weight: 600; line-height: 1.34; letter-spacing: -0.02em; color: #000; }

/* 제목 | 본문 2단 */
.pgw-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}
.pgw-split .pgw-h2 { margin-top: 22px; }
.pgw-body { display: flex; flex-direction: column; gap: 26px; font-size: 17px; line-height: 1.8; }

/* 번호 + 제목 */
.pgw-secthead { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.pgw-num { font-family: monospace; font-size: 12px; color: rgba(0, 0, 0, 0.4); }

/* 제목 | 본문 표 형태 행 */
/* 상품 탭(Description) 패널과 같은 테두리로 맞춤 — 모서리 20px, 1px #eae3de.
   행 사이 구분선은 gap:1px + 컨테이너 배경색으로 그리므로 배경도 같은 색을 쓴다.
   둥근 모서리 밖으로 안쪽 행의 각진 모서리가 삐져나오지 않게 overflow:hidden 필요. */
.pgw-rows {
	margin-top: clamp(32px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: #eae3de;
	border: 1px solid #eae3de;
	border-radius: 20px;
	overflow: hidden;
}
.pgw-row {
	display: grid;
	grid-template-columns: minmax(min(100%, 200px), 1fr) 2fr;
	gap: 32px;
	padding: 30px 28px;
	background: #fff;
}
.pgw-row p { font-size: 16px; line-height: 1.76; }
.pgw-row--stack { grid-template-columns: 1fr; gap: 14px; }

/* 사진 위 · 글 아래 카드 */
.pgw-cards {
	margin-top: clamp(32px, 4vw, 56px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(26px, 3vw, 44px);
}
.pgw-card h4 { margin-top: 24px; font-size: 21px; }
.pgw-card p { margin-top: 14px; font-size: 16px; line-height: 1.76; }

/* 03 장인정신: 왼쪽 사진 · 오른쪽 글(제목·설명·표), 두 칸 세로 가운데 정렬.
   2026-09-01 사용자 요청으로 04 섹션(.pgw-panel-grid)과 같은 형식으로 맞췄다 —
   같은 auto-fit 2단 + align-items:center. 그래서 템플릿 5238 에서도 04 처럼
   글 세 덩어리를 <div> 하나로 묶어 .pgw-craft 의 자식이 둘(글묶음 · 사진)이 되게 했다.
   글묶음이 .pgw-block 안으로 통째로 들어왔으므로 예전의 margin-top 은 뺀다. */
.pgw-craft {
	display: grid;
	/* 296.34px: 세로로 쌓이는(사진이 글 아래로 내려가는) 시점을 04(.pgw-panel-grid)와
	   정확히 맞추기 위한 값. 2026-09-01 사용자 요청.
	   두 그리드 모두 `컨테이너 폭 < 칸최소폭×2 + 간격` 일 때 한 칸으로 쌓인다.
	   04 = 최소폭 300px · 간격 clamp(28px,4vw,60px) / 03 = 간격 clamp(32px,5vw,68px).
	   03 의 간격이 더 넓어서 같은 300px 를 쓰면 03 이 먼저 쌓인다 → 간격 차이의 절반
	   (0.5vw ≈ 3.66px)을 빼서 보정. 300 − 3.66 = 296.34.
	   전환은 테마 그리드가 86% 인 구간에서 일어난다 — 둘 다 창 폭 732px 에서 뒤집힌다
	   (725~740px 를 1px 단위로 실측, 어긋나는 지점 0).
	   ⚠ 간격까지 04 와 같게 맞추면 이런 숫자가 필요 없지만 사진 폭이 616→620px 로
	     바뀌므로 사용자 요청대로 크기는 건드리지 않았다. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 296.34px), 1fr));
	gap: clamp(32px, 5vw, 68px);
	align-items: center;
	/* 사진을 왼쪽 칸으로. HTML 순서는 글 → 사진 그대로 두어, 좁아져서 한 칸으로
	   쌓일 때는 01·04 처럼 글이 먼저 온다(한 칸에서는 direction 이 세로 순서에
	   영향을 주지 않는다). 글자 방향은 자식에서 되돌린다. */
	direction: rtl;
}
.pgw-craft > * { direction: ltr; }
/* 설명 ↔ 표 간격(예전에 .pgw-craft 가 갖고 있던 값) */
.pgw-craft .pgw-rows { margin-top: clamp(32px, 4vw, 56px); }
/* 기본 56ch(571px) 면 칸(616px)보다 좁아 오른쪽 끝선이 표와 안 맞는다 */
.pgw-craft .pgw-sublede { max-width: none; }
/* 이니셜 각인 안내 박스 — 배경만 화면 좌우 끝까지 펼치고,
   안의 글·사진은 위 섹션들(1300px)과 같은 선에 맞춘다. */
.pgw-panel {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(48px, 6vw, 88px) 0;
	background: rgba(227, 132, 67, 0.09);
}
.pgw-panel > .pgw-panel-grid {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 24px;
}
.pgw-panel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}
.pgw-chips { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pgw-chips span {
	padding: 9px 16px;
	border-radius: 999px;
	background: #fff;
	font-family: monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #b96a2c;
}

/* 제원표 — 2026-08-28 사용자 요청으로 화면에서 제거함(템플릿 5238 의 specs 섹션 삭제).
   되살릴 일이 있어 스타일은 남겨둠. 현재 이 클래스를 쓰는 마크업 없음. */
.pgw-specs {
	margin-top: clamp(26px, 3vw, 42px);
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(0, 0, 0, 0.14);
	border: 1px solid rgba(0, 0, 0, 0.14);
}
.pgw-spec {
	display: grid;
	grid-template-columns: minmax(min(100%, 180px), 1fr) 2fr;
	gap: 24px;
	padding: 20px 24px;
	background: #fff;
}
.pgw-spec .pgw-k { font-size: 11px; letter-spacing: 0.14em; color: rgba(0, 0, 0, 0.5); }
.pgw-sv { font-size: 16px; line-height: 1.7; color: #000; }

/* 마무리 */
/* 2026-08-31: 위쪽 실선 제거. 실선을 띄우려고 있던 위 여백도 함께 없앤다
   (글은 섹션 여백 80/150 으로 흰 영역 한가운데에 오도록 맞춰 놓았다 — 템플릿 5238) */
.pgw-closing {
	border-top: none;
	padding-top: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(30px, 4vw, 60px);
	/* 2026-08-31: 아래끝 맞춤(end) → 가운데 맞춤.
	   왼쪽 제목과 오른쪽(문단+버튼) 덩어리의 세로 중심을 맞춘다. */
	align-items: center;
}
.pgw-closing .pgw-h2 { max-width: 18ch; font-size: clamp(28px, 4vw, 54px); }
/* 제목(54px 2줄)과 오른쪽 문단(17px 2줄)의 **줄과 줄 사이 경계**를 같은 높이로 맞춘다.
   글자 크기가 달라 그냥 세로 가운데 정렬만으로는 어긋나므로, 레이아웃은 그대로 두고
   보이는 위치만 위로 당긴다. -34px = 두 경계의 실측 차이(2026-08-31 사용자 요청). */
.pgw-closing .pgw-h2 { position: relative; top: -34px; }
/* 좁은 화면(약 730px 이하)에서는 두 칸이 위아래로 쌓여서 '줄 맞춤'이라는 개념 자체가
   없어진다 → 끌어올리기 해제. */
@media (max-width: 735px) {
	.pgw-closing .pgw-h2 { top: 0; }
}
.pgw-closing p { max-width: 44ch; font-size: 17px; line-height: 1.78; }
.pgw-closing .pgw-actions { margin-top: 22px; }

/* 좁은 화면: 2단 표를 세로로 */
@media (max-width: 1024px) {
	.pgw-row,
	.pgw-spec { grid-template-columns: 1fr; gap: 12px; }
}

/* 회색 플레이스홀더 자리에 실사진이 들어간 경우.
   .pgc-ph 가 비율 상자를 잡고 있으므로 구조는 그대로 두고 줄무늬 배경과
   설명 라벨만 없앤 뒤 이미지를 채운다 — 실사진 교체 때 이 클래스만 붙이면 됨. */
.pgc-figure .pgc-ph--filled { background: none; }
.pgc-figure .pgc-ph--filled::after { content: none; }
.pgc-figure .pgc-ph--filled img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 기본은 가운데 기준이라 좌우가 똑같이 잘린다.
   한쪽만 잘라내고 싶을 때 붙이는 보조 클래스. */
.pgc-figure .pgc-ph--left img  { object-position: left center; }
.pgc-figure .pgc-ph--right img { object-position: right center; }
.pgc-figure .pgc-ph--top img   { object-position: center top; }
/* 02 섹션 왼쪽 사진(5.jpg, 정사각 원본을 4:3 틀에 담아 위아래가 잘림)용.
   2026-08-31 사용자가 준 기준 사진과 아래쪽 경계를 맞춘 값 — 그 사진은 원본 세로의
   11%~84% 구간이었다. 4:3 틀은 원본의 75% 만 보여주므로, 아래쪽 경계를 맞추면
   잘리는 157px 중 위 57px·아래 100px → 57/157 ≈ 36%. */
.pgc-figure .pgc-ph--y36 img   { object-position: center 36%; }
/* 03 장인정신 사진(woodsanding-photo.jpg, 540x960 을 1:1 틀에 담아 위아래가 잘림)용.
   2026-09-01 사용자가 50 / 62 / 75 / 88 / 100% 를 나란히 보고 고른 값 — 손톱과 사포가
   가운데 오고 손등·관절은 위로 밀려난다. */
.pgc-figure .pgc-ph--y62 img   { object-position: center 62%; }

/* ══ 브랜드 스토리 배경 장면 ═══════════════════════════════════════════
   Shop Grid 데모 슬라이더(Slider Revolution "home-4-rev-02", 슬라이드 7)의
   그림 레이어만 가져와 CSS 로 다시 깐 것.
   슬라이더 자체를 쓰지 않은 이유: 그 안에 텍스트·버튼 레이어가 섞여 있고
   화면 하나 높이로 고정돼 있어 이 섹션(높이 절반 이하) 뒤에 깔 수 없음.
   그림 파일은 데모와 동일한 것을 그대로 씀. */
/* overflow 는 .pgw-scene 쪽에만. 섹션에 걸면 화면 전체로 퍼져야 할
   구름 띠가 본문 폭(1300px)에서 잘린다. */
.pgw-section--story { position: relative; }
/* ⚠ Elementor 는 컬럼·위젯에 position:relative 를 준다. 그대로 두면
   .pgw-scene 의 기준 상자가 "위젯"(= 글 높이)이 돼서 배경이 글 주변에만
   깔린다. 섹션 전체를 기준으로 삼도록 중간 상자들을 static 으로 되돌린다. */
.pgw-section--story > .elementor-container,
.pgw-section--story .elementor-column,
.pgw-section--story .elementor-widget-wrap,
.pgw-section--story .elementor-widget,
.pgw-section--initials > .elementor-container,
.pgw-section--initials .elementor-column,
.pgw-section--initials .elementor-widget-wrap,
.pgw-section--initials .elementor-widget { position: static !important; }

/* 글은 항상 그림 위에. .pgw-scene 과 .pgw-block 이 같은 부모 안 형제라
   .pgw-block 에도 position 을 줘야 위로 올라온다(정적 요소는 아래에 깔림). */
.pgw-section--story .pgw-block,
.pgw-section--initials .pgw-block { position: relative; z-index: 1; }

.pgw-scene {
	position: absolute;
	inset: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.pgw-scene img { position: absolute; display: block; }

/* 아래쪽 구름 띠 두 겹.
   img-02 = 회색 구름(보이는 띠), img-01 = 흰 구름(회색 위에 겹쳐 테두리를
   두 겹으로 보이게 함). 원본은 세로 460px 짜리인데 아랫부분이 단색이라
   그대로 쓰면 글까지 덮는다 → height 로 자르고 object-position:top 으로
   구름 봉우리 쪽만 남긴다. */
.pgw-scene-clouds {
	/* 화면 폭에 맞춰 늘어나야 데모처럼 좌우 끝까지 꽉 찬다.
	   1920px 로 고정하면 넓은 화면에서 양옆이 비고 구름도 작아 보인다.
	   좌우로 흔들려도 가장자리가 드러나지 않게 조금 넉넉히 잡는다. */
	left: -40px;
	/* 위로 흔들려도 아래쪽 흰 틈이 안 보이게 조금 내려서 깐다 */
	bottom: -16px;
	/* ⚠ 테마의 img { max-width:100% } 가 이겨서 !important 가 없으면 폭이
	   화면 폭으로 잘린다. 그러면 left 로 밀어둔 만큼 오른쪽에 빈 곳이
	   생기고, 좌우로 흔들릴 때마다 그 틈이 나타났다 사라진다. */
	width: calc(100% + 80px) !important;
	max-width: none !important;
	object-fit: cover;
	object-position: top center;
}
/* 테마가 img { height:auto } 를 걸어둬서 !important 없으면 잘리지 않는다 */
.pgw-scene-clouds--back {
	height: 345px !important;
	z-index: 0;
	animation: pgw-cloud 2.3s ease-in-out infinite alternate;
}
.pgw-scene-clouds--front {
	height: 195px !important;
	z-index: 1;
	animation: pgw-cloud 2s ease-in-out infinite alternate;
}

/* 떠다니는 작은 요소들 — 원본은 위아래가 아니라 좌우로 갸웃거리는 회전.
   각도는 슬라이더 원본값 그대로(구름 +7~9°, 열기구·새·별 -11°),
   주기 1.5초 yoyo. 시작 시점을 조금씩 어긋내 동시에 움직이지 않게 함. */
.pgw-scene-item {
	z-index: 2;
	transform-origin: 50% 60%;
	animation: pgw-rock-ccw 1.5s ease-in-out infinite alternate;
}
.pgw-scene-cloudA,
.pgw-scene-cloudB  { animation-name: pgw-rock-cw9; }
.pgw-scene-cloudC  { animation-name: pgw-rock-cw7; }

.pgw-scene-balloon { left: 3%;   bottom: 88px;  width: 74px;  animation-delay: -.4s; }
.pgw-scene-bird    { right: 5%;  bottom: 215px; width: 63px;  animation-delay: -.9s; }
.pgw-scene-cloudA  { left: 1%;   top: 40px;     width: 104px; animation-delay: -.2s; }
.pgw-scene-cloudB  { right: 3%;  top: 122px;    width: 84px;  animation-delay: -1.1s; }
.pgw-scene-cloudC  { right: 23%; top: 86px;     width: 86px;  opacity: .75; animation-delay: -.6s; }
.pgw-scene-star1   { left: 13%;  bottom: 96px;  width: 32px;  animation-delay: -.3s; }
.pgw-scene-star2   { left: 46%;  bottom: 52px;  width: 26px;  animation-delay: -1.2s; }
.pgw-scene-star3   { right: 16%; bottom: 108px; width: 30px;  animation-delay: -.7s; }

@keyframes pgw-cloud {
	from { transform: translateY(0); }
	to   { transform: translateY(-12px); }
}
@keyframes pgw-rock-ccw { from { transform: rotate(0deg); } to { transform: rotate(-11deg); } }
@keyframes pgw-rock-cw9 { from { transform: rotate(0deg); } to { transform: rotate(9deg); } }
@keyframes pgw-rock-cw7 { from { transform: rotate(0deg); } to { transform: rotate(7deg); } }

/* 좁은 화면에서는 구름 띠만 남기고 작은 요소는 정리 */
@media (max-width: 1024px) {
	.pgw-scene-cloudC,
	.pgw-scene-star2 { display: none; }
	.pgw-scene-clouds--back  { height: 230px !important; }
	.pgw-scene-clouds--front { height: 135px !important; }
}
@media (max-width: 680px) {
	.pgw-scene-item { display: none; }
	.pgw-scene-clouds--back  { height: 160px !important; }
	.pgw-scene-clouds--front { height: 95px !important; }
}

/* 움직임을 줄이도록 설정한 사용자에게는 정지 */
@media (prefers-reduced-motion: reduce) {
	.pgw-scene img { animation: none !important; }
}

/* ══ 01~04 배경 띠 ══════════════════════════════════════════════
   움직이는 띠 아래 선부터 04 섹션 끝까지 하나의 배경색으로 이어지게 한다.
   (데모 Landing 페이지 히어로와 같은 #F7F3F0)
   섹션은 본문 그리드(1300px) 안에 있으므로 배경이 그 폭에서 끊긴다 →
   섹션 자체를 화면 전체 폭으로 펴고, 안의 .pgw-block 이 1300px 로 가운데 정렬되게 둔다. */
.pgw-section--materials,
.pgw-section--design,
.pgw-section--craft,
.pgw-section--initials {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #f7f3f0;
}

/* 히어로도 화면 전체 폭으로. 배경은 없지만, 마우스 따라 움직이는 아이콘이
   본문(1300px) 바깥 여백에 놓여야 글을 가리지 않는다. */
.pgw-section--hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* 마우스 따라 움직이는 아이콘(테마 섹션 옵션 "Offset Images")은 섹션에
   position:absolute 로 prepend 되는데, Elementor 컬럼이 position:relative 라
   DOM 순서상 본문이 항상 위에 깔린다. 2026-08-29 에 열기구(l-img-5)와
   새(l-img-4)를 사진 좌우 여백까지 내렸는데, 창이 좁아 여백이 사라지는
   폭(1025~1300px)에서는 이 둘이 사진 뒤로 숨어 버린다.
   → 이 둘만 앞으로 올린다. 나머지 4개까지 올리면 글 위에 겹쳐 보인다
   (창이 좁을 때 왼쪽 별이 제목 첫 글자를 덮음).
   클릭은 통과시켜 사진·버튼을 가리지 않게 한다. */
.pgw-section--hero > .qodef-offset-image-holder:has(img[src*="l-img-5"]),
.pgw-section--hero > .qodef-offset-image-holder:has(img[src*="l-img-4"]) {
	z-index: 2;
	pointer-events: none;
}

/* 04 는 자기만의 옅은 주황 배경을 갖고 있었는데, 이제 띠 전체가 배경색이라
   따로 두면 네모가 겹쳐 보인다. 배경만 빼고 여백은 유지. */
.pgw-section--initials .pgw-panel {
	background: none;
}

/* ══ 04 섹션 끝의 구름 + 동물 ═══════════════════════════════════════════
   데모 Landing 하단(Slider Revolution "landing-rev-01")과 같은 그림·움직임.
   구름 두 겹 사이에 동물을 끼워 넣어 앞 구름 뒤에서 얼굴만 내미는 모양을 만든다.
   흰 구름 아랫부분이 단색이라 섹션 바닥까지 채우면 아래 흰 배경과 자연스럽게 이어짐. */
.pgw-section--initials { position: relative; }

.pgw-scene--animals .pgw-scene-clouds--back  { z-index: 0; }
.pgw-scene--animals .pgw-scene-animal        { z-index: 1; }
.pgw-scene--animals .pgw-scene-clouds--front { z-index: 2; }

.pgw-scene-animal {
	position: absolute;
	display: block;
	max-width: none !important;
	transform-origin: 50% 90%;
	animation: pgw-rock-ccw 1.5s ease-in-out infinite alternate;
}
/* 원본 슬라이더의 회전값 그대로: 기린 10°, 생쥐 8°, 고양이 7° */
.pgw-scene-giraffe { right: 17%; bottom: 96px;  width: 105px; animation-name: pgw-rock-cw10; animation-delay: -.3s; }
.pgw-scene-mouse   { left: 47%;  bottom: 118px; width: 77px;  animation-name: pgw-rock-cw8;  animation-delay: -.9s; }
.pgw-scene-cat     { left: 7%;   bottom: 84px;  width: 111px; animation-name: pgw-rock-cw7;  animation-delay: -.6s; }

@keyframes pgw-rock-cw10 { from { transform: rotate(0deg); } to { transform: rotate(10deg); } }
@keyframes pgw-rock-cw8  { from { transform: rotate(0deg); } to { transform: rotate(8deg); } }

@media (max-width: 1024px) {
	.pgw-scene-mouse { display: none; }
	.pgw-scene-giraffe { width: 84px; }
	.pgw-scene-cat { width: 88px; }
}
@media (max-width: 680px) {
	.pgw-scene-animal { display: none; }
}

/* 04 구름 위 장식 — 데모 Landing 의 하트(landing-rev-01-img-06)와
   상단에서 쓰던 별(h2-icon-01). 앞 구름보다 위에 떠 있게 z-index 3. */
.pgw-scene-deco {
	position: absolute;
	z-index: 3;
	display: block;
	max-width: none !important;
}
.pgw-scene-heart { left: 6.5%;  bottom: 208px; width: 25px; animation: pgw-bob 1.5s ease-in-out infinite alternate; }
.pgw-scene-star4 { left: 27%;   bottom: 158px; width: 30px; animation: pgw-rock-ccw 1.5s ease-in-out infinite alternate; animation-delay: -.5s; }
.pgw-scene-star5 { right: 29%;  bottom: 136px; width: 26px; animation: pgw-rock-ccw 1.5s ease-in-out infinite alternate; animation-delay: -1.1s; }

/* 원본 하트는 회전이 아니라 위아래 5px 이동 */
@keyframes pgw-bob {
	from { transform: translateY(0); }
	to   { transform: translateY(-5px); }
}

@media (max-width: 1024px) {
	.pgw-scene-star5 { display: none; }
}
@media (max-width: 680px) {
	.pgw-scene-deco { display: none; }
}

/* ══ 01~04 사진 — 상품 카드와 같은 모서리·마우스오버 ═══════════════════
   테마의 상품 목록 카드(.qodef-woo-product-list li)가 하는 표현을 그대로 옮겨 왔다.
   ① 모서리 20px  ② 마우스를 올리면 점선 테두리가 흐르고  ③ 사진이 1.05배로 커짐.
   흐르는 점선은 CSS 로 만들 수 없어서, 테마가 카드에 쓰는 것과 똑같이
   <svg><rect stroke-dasharray="10"> 를 깔고 stroke-dashoffset 을 돌린다.
   그 svg 마크업은 functions.php 의 playgrow_child_walker_figure_hover() 가 끼워 넣는다.
   ⚠ 마우스오버는 실사진이 든 틀(.pgc-ph--filled)에만 — 아직 회색 플레이스홀더인
   01·03·04 사진에는 걸리지 않는다. 실사진을 넣으면 자동으로 살아난다.
   범위는 스토리 템플릿(.elementor-5238) 안으로 한정 — 블로그 글의 .pgc-figure 는 무관. */
.elementor-5238 .pgc-figure { position: relative; }

/* 점선·확대의 기준이 되는 사진 전용 상자. functions.php 가 사진(.pgc-ph)만
   감싸서 끼워 넣는다 — figure 를 기준으로 삼으면 01 처럼 설명(figcaption)이
   붙은 틀에서 점선이 설명까지 감싸고, 설명 위에서도 효과가 켜진다. */
.pgw-figure-frame { position: relative; }

.elementor-5238 .pgc-ph {
	border-radius: 20px;
	overflow: hidden;
}

/* 사진 확대 — 테마 카드와 같은 값(0.3s ease-out, 1.05배) */
.elementor-5238 .pgc-ph--filled img {
	will-change: transform;
	transition: transform 0.3s ease-out;
}
.elementor-5238 .pgw-figure-frame:hover .pgc-ph--filled img {
	transform: scale(1.05);
}

/* 흐르는 점선 테두리. 테마 상품 카드와 눈에 보이는 결과가 같아지도록 맞춘 것:
   stroke-width 4 · stroke-dasharray 10 · linecap square · #EAE3DE · 5s linear 무한.
   ⚠ <svg> 의 width="100%" height="100%" 속성이 CSS 의 inset 보다 먼저 크기를 정해
   버려서 오른쪽·아래가 4px 모자랐다 → CSS 에서 폭·높이를 직접 지정한다.
   ⚠ svg 는 기본이 overflow:hidden 이라 4px 선의 바깥 절반이 잘려 2px 로만 보인다.
   테마 카드도 그 상태라 한때 똑같이 맞췄었는데, 카드는 **흰 배경** 위에 있어서
   그래도 보이지만 이 섹션들은 배경이 크림색(#f7f3f0)이라 선 색(#eae3de)과
   명도 차가 거의 없어(대비 약 1.1:1) 2px 로는 아예 안 보였다.
   → overflow: visible 로 4px 전부 보이게 둔다. 테마보다 두꺼운 건 의도한 것.
   (그래도 흐리면 stroke 색을 조금 진하게 하면 된다 — functions.php 의 svg 마크업) */
.pgw-figure-svg {
	/* rect 선은 상자 테두리 위에 가운데 정렬로 그려진다(두께의 절반이 안팎으로).
	   선 두께가 3px 이므로 상자를 1.5px 밖으로 빼야 선의 안쪽 끝이 사진 가장자리에
	   딱 맞는다. 두께를 바꾸면 이 1.5px 과 rx(사진 20px + 1.5)도 같이 바꿀 것. */
	position: absolute;
	left: -1.5px;
	top: -1.5px;
	width: calc(100% + 3px) !important;
	height: calc(100% + 3px) !important;
	overflow: visible;
	border-radius: 21.5px;
	opacity: 0;
	transition: opacity 0.2s ease-out;
	pointer-events: none;
	z-index: 2;
}
.pgw-figure-svg rect {
	animation: pgw-ants 5s linear infinite;
}
.elementor-5238 .pgw-figure-frame:hover > .pgw-figure-svg {
	opacity: 1;
}

/* ⚠ 테마는 `stroke-dashoffset: 100%` 로 도는데, SVG 에서 이 % 는 요소 크기 기준이라
   상자가 클수록 점선이 빨라진다. 사진 틀(584×439)은 상품 카드(225×357)보다 커서
   그대로 두면 1.7배 빨랐다. → 데스크톱 상품 카드(303×407 = 5초에 359px, 72px/s)와
   같은 속도가 되도록 절대값 360px 으로 고정. 360 은 점선 주기(10+10)의 배수라
   한 바퀴가 끊김 없이 이어진다(테마 쪽은 배수가 아니라 미세하게 튄다). */
@keyframes pgw-ants {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: 360px; }
}

/* ══ 푸터 왼쪽 아래 로고 크기 (2026-09-01 MONTENY 로고 교체) ═══════════════
   푸터 로고는 헤더와 달리 테마 옵션이 아니라 푸터 하단 블록 위젯(block-10) 안의
   Single Image 위젯이다. 그 위젯은 '레티나' 옵션이 켜져 있어 원본의 절반 크기를
   width/height 속성으로 박아서 내보낸다 — 옛 로고(308x96)는 154x48 로 딱 맞았지만
   새 로고(1604x410)는 802x205 가 되어 버린다. 자를 수는 없으므로 CSS 로 높이만 맞춘다.
   34px = 헤더 로고와 같은 높이. */
#block-10 .qodef-single-image img {
	height: 34px;
	width: auto;
}

/* ══ 로고 글자를 옆 텍스트와 시각적으로 중앙정렬 (2026-09-01 사용자 요청) ═══════
   Monteny-LOGO.png 는 'O' 위의 동그라미 장식이 글자보다 훨씬 위로 올라가 있어서,
   글자(M O N T E N Y)의 중심이 이미지 상자 중심이 아니라 **세로 65.6% 지점**에 있다.
   (원본 1604x410 에서 글자 밴드 161~377px. 임계값을 0.25~0.5 로 바꿔도 같은 값.)
   그래서 상자를 가운데 맞추면 글자는 상자 높이의 15.6% 만큼 아래로 처져 보인다
   — 헤더/푸터 34px 기준 5.4px. 옆 메뉴·저작권 문구가 그만큼 위로 뜬 것처럼 보였다.
   layout 은 건드리지 않고 보이는 위치만 15.6% 올린다(%는 자기 높이 기준이라
   헤더 34px·홈 70px 어디서든 같은 비율로 맞는다). 실측 오차 0.07px.
   ⚠ dark/light 변형은 테마가 이미 translateY(-50%) 로 위치를 잡고 있어 합쳐서 -65.6%. */
.qodef-header-logo-image,
#block-10 .qodef-single-image img {
	transform: translateY(-15.6%);
}
/* 테마 규칙 `#qodef-page-header .qodef-header-logo-link img:not(.qodef--main)`
   (playgrow-core.min.css)이 ID 를 써서 더 세다 → 같은 선택자로 덮는다 */
#qodef-page-header .qodef-header-logo-link img:not(.qodef--main) {
	transform: translateY(-65.6%);
}

/* ══ 홈 상단 슬라이더: 이미지 전체에 뜨는 손가락 커서 없애기 (2026-09-02 사용자 요청) ══
   원인은 링크가 아니다. 슬라이더의 '드래그 & 스와이프'(nav.swipe.setOnDesktop) 가
   데스크탑에서도 켜져 있어서, Slider Revolution 이 초기화할 때 모듈 전체를 드래그
   영역으로 만들고 <sr7-module> 에 인라인으로 cursor:pointer 를 박는다
   (sr7.js 의 touchSwipeSimple → _tpt.draggable.create({cursor:"pointer"})).
   cursor 는 상속되는 속성이라 그 값이 슬라이드 이미지 전체로 퍼진다 —
   글씨 없는 1번 슬라이드와 BUILT TO STAY(3번)처럼 누를 게 없는 곳까지 손가락이 뜬 이유.
   인라인 스타일이라 !important 로만 덮인다. 모듈 하나만 default 로 바꾸면
   좌우 화살표(.sr7-arrows 가 자기 cursor:pointer 를 갖는다)와 READ MORE 링크
   (브라우저 기본 a:link cursor:pointer)는 자기 선언이 있어 상속을 안 받으므로 그대로다.
   드래그로 슬라이드 넘기는 기능 자체는 살아 있다(끄려면 슬라이더 설정에서 Drag&Swipe off).
   2026-09-03: BABY WALKER 상단 슬라이더(home-3-rev = SR7_3_*)도 같은 이유로 추가.
   그 슬라이더의 유일한 링크였던 sHOP NOW 버튼은 이날 지웠으므로, 이제 두 슬라이더 모두
   실제로 누를 수 있는 것은 좌우 화살표뿐이다. */
[id^="SR7_8_"],
[id^="SR7_3_"] {
	cursor: default !important;
}

/* ══ OUR STORY(page 1609) 상단 타이틀 영역 사진 잘리는 위치 (2026-09-03 사용자 요청) ══
   테마 데모의 타이틀 배경은 1920×320 짜리 딱 맞는 띠 이미지라 잘릴 게 없었다.
   지금 넣은 our-story-1-scaled.jpg 는 2560×1709(비율 1.50) 인데 타이틀 영역은
   화면 전폭 × 320px(브라우저 1554px 에서 비율 4.86) 이라 Cover 로 채우면
   세로의 약 69% 가 잘린다 — 보이는 건 원본 527px 짜리 띠 하나뿐.
   기본값(50% 0%, 맨 위)이면 텅 빈 벽만 나오고, 가운데면 앉아 있는 사람이 걸린다.
   35% 로 두면 원본 y 414~941 구간이 보인다 → 곰 머리·사다리·토끼 액자·오른쪽 액자·
   풍선등·별이 들어오고 사람(y 1037 부터)은 빠진다.
   숫자만 바꾸면 위아래로 움직인다: 0% = 맨 위, 100% = 맨 아래.

   ── 폭이 줄어도 사진이 더 작아지지 않게 (2026-09-03 추가) ──────────────
   데모(About us)는 타이틀 이미지가 **1920×320**, 즉 세로가 타이틀 높이와 똑같은 6:1 띠다.
   테마 규칙이 background-size:cover 이므로 확대율 = max(폭/1920, 320/320=1) 이 되어
   화면이 1920px 아래로 줄어도 확대율이 1 에서 멈춘다 → 사진은 그대로 두고 좌우만 잘린다.
   (멈추는 폭 = 320 × 이미지 가로세로비. 데모는 320×6 = 1920)

   우리 사진은 2560×1709(비율 1.50)라 그 공식대로면 320×1.5 = 479px 에서야 멈춘다.
   즉 데스크탑 내내 계속 작아지고, 작아질수록 세로로 더 넓은 범위가 보여서
   빼놨던 사람(원본 y 1037~)이 좁은 화면에서 다시 들어온다.
   → 이미지를 다시 자르지 않고, cover 대신 가로 최소치를 준다.
      max(100%, 1440px) = 화면이 1440px 아래로 내려가도 사진은 1440px 폭 기준으로 고정.
      1440 이상에서는 지금까지와 똑같이 화면 폭을 따라간다.
      숫자를 키우면 더 일찍 멈춘다(데모와 똑같이 하려면 1920px). */
.page-id-1609 .qodef-page-title {
	background-size: max(100%, 1440px) auto;
	background-position: 50% 35%;
}

/* ══ OUR STORY 하단 NEWSLETTER 입력 카드 — 데모와 같은 반응형 폭 (2026-09-03) ══════
   이 페이지는 데모 About us 를 그대로 가져온 것이라 Elementor 데이터에
   `margin_laptop = 오른쪽 62%` 값이 이미 들어 있다. 그런데 우리 사이트는 Elementor 의
   "추가 커스텀 브레이크포인트"가 꺼져 있어서 laptop(1500px) 단계 CSS 가 아예 출력되지 않는다.
   그래서 1031~1500px 구간에서 데모 카드는 62% 여백(=폭 38%)인데 우리는 68%(=폭 32%) 로
   58~78px 더 좁았다. 브레이크포인트를 전역으로 켜면 사이트 전체(laptop 값만 194곳)가
   한꺼번에 바뀌므로, 이 카드에만 데모가 내보내는 규칙을 그대로 재현한다.

   선택자에 body 를 덧붙인 이유: 자식 테마 style.css 가 elementor-post-1609.css 보다
   **먼저** 로드되므로(head 19번 vs 28번), 같은 특이도로는 진다. body 하나로 이긴다.
   ⚠ min-width 로 아래쪽을 막지 않으면 태블릿(≤1024) 전체폭 규칙까지 덮어써 버린다. */
@media (max-width: 1500px) and (min-width: 1031px) {
	body .elementor-1609 .elementor-element.elementor-element-1e79e6d > .elementor-element-populated {
		margin: 0% 62% 0% 0%;
		--e-column-margin-right: 62%;
		--e-column-margin-left: 0%;
	}
}
/* 데모의 태블릿 경계는 1030px, 우리 Elementor 는 1024px 이라 생기는 6px 틈을 메운다.
   (1025~1030 에서 데모는 이미 전체 폭인데 우리는 68% 로 남아 있었다) */
@media (max-width: 1030px) and (min-width: 1025px) {
	body .elementor-1609 .elementor-element.elementor-element-1e79e6d > .elementor-element-populated {
		margin: 0% 0% 0% 0%;
		--e-column-margin-right: 0%;
		--e-column-margin-left: 0%;
		padding: 0% 7% 0% 7%;
	}
	body .elementor-1609 .elementor-element.elementor-element-0aeeaaf {
		margin-top: 104px;
		padding: 120px 0px 119px 0px;
	}
}

/* ══ MAIN HOME(5081) 하단 NEWSLETTER 입력 카드 — 위 OUR STORY 와 같은 처리 (2026-09-03) ══
   데모 Main Home(post 21)의 post-21.css 에도 같은 element id(963d6fc / b10dbc0)와
   `@media(max-width:1500px) { margin-right: 62% }` 규칙이 그대로 있다.
   우리 쪽은 laptop 브레이크포인트가 꺼져 있어 그 규칙이 안 나오므로 여기서 재현한다.
   OUR STORY 와 다른 점: 이 섹션은 태블릿에서 margin-top 변화 없이 padding 만 바뀐다. */
@media (max-width: 1500px) and (min-width: 1031px) {
	body .elementor-5081 .elementor-element.elementor-element-b10dbc0 > .elementor-element-populated {
		margin: 0% 62% 0% 0%;
		--e-column-margin-right: 62%;
		--e-column-margin-left: 0%;
	}
}
/* 데모 태블릿 경계 1030px vs 우리 1024px 의 6px 틈 메우기 */
@media (max-width: 1030px) and (min-width: 1025px) {
	body .elementor-5081 .elementor-element.elementor-element-b10dbc0 > .elementor-element-populated {
		margin: 0% 0% 0% 0%;
		--e-column-margin-right: 0%;
		--e-column-margin-left: 0%;
		padding: 0% 7% 0% 7%;
	}
	body .elementor-5081 .elementor-element.elementor-element-963d6fc {
		padding: 120px 0px 119px 0px;
	}
}
/* 블로그 4 "The First Steps Companion" 마지막 사진(Blog-4-4, 1536x1024)용.
   21:9 틀(pgc-figure--219)에 담겨 원본 세로의 64%만 보이는데, 이 사진은 위쪽 절반이
   빈 회색 벽이고 워커·인형·러그·전구줄이 전부 아래쪽에 몰려 있다. 가운데(50%)로 두면
   바퀴와 바닥이 잘려 나가서, 2026-09-04 사용자 요청으로 아래쪽을 더 보이게 내렸다.
   50% → 원본 y 183~841 / 75% → y 274~932 (바퀴까지 들어옴). */
.pgc-figure .pgc-ph--y75 img { object-position: center 75%; }

/* 본문 문단 사이 간격 20px — 전 페이지 공통 (2026-09-07)
   테마 기본은 36px 이라 한 덩어리 글이 뚝뚝 끊겨 보였다.
   홈 첫 블록에서 20px 로 맞춰 보고 그 값을 나머지에도 적용했다.
   자식 테마 CSS 가 elementor-post-*.css 보다 먼저 실려서 body 접두사가 필요하다.
   ⚠ 블로그 글(single post)은 일부러 뺐다 — 긴 글은 넓은 문단 간격이 읽기 편하다. */
body .elementor-5081 .elementor-widget-text-editor p + p,   /* 홈 */
body .elementor-1609 .elementor-widget-text-editor p + p,   /* Our Story */
body .elementor-1844 .elementor-widget-text-editor p + p,   /* Contact Us */
body .elementor-2326 .elementor-widget-text-editor p + p,   /* FAQs */
body .elementor-61   .elementor-widget-text-editor p + p,   /* BABY WALKER 상품 본문 */
body .elementor-5239 .elementor-widget-text-editor p + p,   /* BABY WALKER Hero */
body .elementor-5238 .elementor-widget-text-editor p + p {  /* BABY WALKER Story */
	margin-top: 20px;
}

/* 같은 섹션 Read More 버튼 위 여백.
   기본은 본문 마지막 문단 아래 10px + 본문 위젯 아래 68px + .pgw-actions 위 38px = 116px 라
   버튼만 뚝 떨어져 보였다. 2026-09-05 사용자 요청으로 문단 사이 간격(24px)과 같게 맞췄다.
   10(문단) + 0(위젯) + 14(.pgw-actions) = 24px */
body .elementor-5081 .elementor-element.elementor-element-631beba {
	margin-bottom: 0;
}
body .elementor-5081 .elementor-element-pgwhomebtn .pgw-actions {
	margin-top: 14px;
}

/* WHY MONTENY 섹션 설명문 강제 줄바꿈.
   이 위젯(playgrow_core_section_title)의 설명 칸은 테마가 esc_html() 로 출력해서
   <br> 을 넣으면 태그가 글자 그대로 보인다. 그래서 설명 값에 진짜 줄바꿈 문자를 넣고
   여기서 pre-line 으로 살린다. 화면 폭과 무관하게 'on,' 뒤에서 항상 끊긴다.
   (2026-09-05, 앞서 쓴 NBSP 방식은 넓은 화면에서 끊기는 위치가 달라져 교체) */
body .elementor-5081 .elementor-element-a01cbfa .qodef-m-text {
	white-space: pre-line;
}

/* 위 문장이 특정 화면 폭에서 'on,' 만 셋째 줄로 떨어지던 문제. (2026-09-07)
   원인: 이 위젯을 감싼 .qodef-shortcode 가 inline-block 이라 글상자가 내용 너비로 오그라든다.
   그 너비가 첫 줄에 필요한 폭보다 몇 px 모자라는 구간이 생겨 거기서 저절로 접혔다.
   pre 는 넣어 둔 줄바꿈 문자는 그대로 살리면서 '저절로 접히는 것'만 막는다.
   단, 아주 좁은 화면에서는 한 줄이 화면보다 길어져 넘치므로 그때만 pre-line 으로 되돌린다.

   ⚠ 번역된 화면에서는 이 규칙을 걸면 안 된다. (2026-09-08)
      구글 번역은 넣어 둔 줄바꿈 문자를 버리고 한 줄로 돌려주는데, pre/nowrap 이면
      그 한 줄이 글상자(416px)를 넘어가고 넘친 글자가 왼쪽 끝에서 시작해 오른쪽으로 흘러
      가운데가 아니라 우측으로 밀려 보인다. (말레이어에서 부제가 125px 밀렸다)
      → 구글 번역이 <html> 에 붙이는 translated-ltr / translated-rtl 이 없을 때만 적용한다.
      번역 화면에서는 위의 pre-line 이 그대로 살아 정상적으로 접히고 가운데 정렬된다. */
@media only screen and (min-width: 481px) {
	html:not(.translated-ltr):not(.translated-rtl) body .elementor-5081 .elementor-element-a01cbfa .qodef-m-text {
		white-space: pre;
	}
	/* HOW ONE IS MADE 섹션 설명문도 같은 이유로 특정 폭에서 저절로 접혔다. (2026-09-07)
	   이쪽은 일부러 넣은 줄바꿈이 없는 한 문장(한 줄에 337px 필요)이라 nowrap 으로 충분하다. */
	html:not(.translated-ltr):not(.translated-rtl) body .elementor-5081 .elementor-element-c0dcd53 .qodef-m-text {
		white-space: nowrap;
	}
}

/* WHY MONTENY 섹션(상품 목록 위젯 34da5f5) 사진을 정사각형으로.
   원래는 폭만 271px 로 고정되고 높이는 사진 비율을 그대로 따라가서,
   가로 사진·세로 사진이 섞이면 카드마다 사진 높이가 제각각이 된다.
   1:1 틀에 object-fit:cover 로 가운데를 잘라 넣어 네 칸을 똑같이 맞춘다. (2026-09-05) */
body .elementor-5081 .elementor-element-34da5f5 .qodef-e-media-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

/* WHY MONTENY 카드에서 상품 분류(BEDS) 줄 숨김. (2026-09-05)
   네 칸이 상품이 아니라 '약속 항목' 이라 분류 표시가 필요 없다.
   상품 데이터에서 카테고리를 떼면 목록 위젯이 tax_slug=beds 로 물어 오는 조건이 깨지므로,
   데이터는 그대로 두고 표시만 감춘다. */
body .elementor-5081 .elementor-element-34da5f5 .qodef-e-top-holder {
	display: none;
}

/* 위 설명 문구가 들어가는 칸의 모양. 가격 줄은 감춘다. (2026-09-05)
   가격은 원래 자리를 절대배치로 차지하고 있어서 display:none 으로 빼야 빈 줄이 안 남는다. */
body .elementor-5081 .elementor-element-34da5f5 .qodef-e:has(.pgw-promise-note) .qodef-woo-product-price,
body .elementor-5081 .elementor-element-f2e121e .qodef-woo-product-price {
	display: none;
}
body .elementor-5081 .elementor-element-34da5f5 .pgw-promise-note,
body .elementor-5081 .elementor-element-f2e121e .pgw-promise-note {
	display: block;
	width: 100%;
	/* 원래 Add to cart 는 아래쪽에 점선이 붙어 padding-bottom 9px 이었다.
	   점선을 위로 올리므로 여백도 위쪽으로 옮긴다.
	   테마가 .qodef-woo-shortcode a.button 에 !important 로 여백을 박아 둬서 여기도 필요하다. */
	padding: 12px 0 0 !important;
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 22px;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: rgb(219, 145, 94);   /* Add to cart 와 같은 색. 점선도 이 색을 따라간다 */
	cursor: default;
	white-space: normal;
}

/* 점선을 글 아래(bottom:0)에서 글 위(top:0)로 옮긴다 — 제목 / 점선 / 설명 순서가 되도록. */
body .elementor-5081 .elementor-element-34da5f5 .pgw-promise-note::after,
body .elementor-5081 .elementor-element-f2e121e .pgw-promise-note::after {
	top: 0;
	bottom: auto;
}

/* 평소에는 제목이 사진 아래 흰 영역의 세로 가운데에 있다가,
   마우스를 올리면 위로 올라가면서 그 아래로 설명 문구가 떠오르게 한다. (2026-09-05)
   설명 문구는 숨겨져 있어도 자리를 그대로 차지하므로(투명도만 0),
   카드 높이는 건드리지 않고 제목만 아래로 내려 두었다가 제자리로 되돌리는 방식이다.
   --pgw-title-shift 값이 내려두는 거리. 문구 줄 수가 바뀌면 이 값만 조정하면 된다. */
body .elementor-5081 .elementor-element-34da5f5 .qodef-e {
	--pgw-title-shift: 30px;
}
body .elementor-5081 .elementor-element-34da5f5 .qodef-woo-product-title {
	transform: translateY(var(--pgw-title-shift));
	transition: transform 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}
body .elementor-5081 .elementor-element-34da5f5 .qodef-e:hover .qodef-woo-product-title {
	transform: translateY(0);
}

/* SAFE TO TOUCH 블록 글 칸 폭 (2026-09-05)
   원래 칼럼 좌우 여백이 22% 라 글 칸이 465px 이었고, 두 번째 문장(488px)이 한 줄에 안 들어갔다.
   % 여백은 화면이 좁아지면 글 칸도 같이 줄어들어 다시 접히므로,
   "칼럼이 560px 보다 넓으면 글 칸을 560px 로 고정, 좁으면 여백 0" 이 되도록 계산식으로 바꾼다. */
@media (min-width: 1025px) {
	body .elementor-5081 .elementor-element.elementor-element-5595ed3 > .elementor-element-populated {
		padding-left: max(0px, calc((100% - 560px) / 2));
		padding-right: max(0px, calc((100% - 560px) / 2));
	}
}

/* WHY MONTENY 네 칸은 상품이 아니라 '약속 항목' 이라 클릭 대상이 아니다. (2026-09-05)
   테마가 사진·제목·카드 전체에 각각 링크를 걸어 두어서, 마우스 커서와 클릭을 모두 막는다.
   li 자체의 hover 효과(점선 테두리·문구 떠오름)는 그대로 살아 있다. */
body .elementor-5081 .elementor-element-34da5f5 .qodef-e a,
body .elementor-5081 .elementor-element-f2e121e .qodef-e a,
body .elementor-5081 .elementor-element-4a4dd88 .qodef-e a {
	pointer-events: none;
	cursor: default;
}

/* HOW ONE IS MADE 네 칸에서 상품 분류(CARRIAGE) 줄 숨김. (2026-09-05)
   WHY MONTENY 와 같은 이유 — 상품이 아니라 '만드는 단계' 라 분류 표시가 필요 없다.
   상품에서 카테고리를 실제로 떼면 목록 위젯의 tax_slug=carriage 조건이 깨지므로 표시만 감춘다. */
body .elementor-5081 .elementor-element-f2e121e .qodef-e-top-holder {
	display: none;
}

/* HOW ONE IS MADE 의 설명 문구는 '항상' 보이게. (2026-09-05)
   WHY MONTENY 쪽은 사진이 있어서 마우스를 올렸을 때만 떠오르지만,
   여기는 사진 없이 글만 있는 칸이라 평소에도 보여야 한다.
   테마가 .qodef-price-cart-holder a 에 opacity:0 / translateY(100%) 를 걸어 두었으므로
   선택자에 a 를 붙여 우선순위를 높인다(자식 CSS 가 테마보다 먼저 실리기 때문). */
body .elementor-5081 .elementor-element-f2e121e a.pgw-promise-note {
	opacity: 1;
	transform: none;
	color: #7a7a7a;   /* 이 구역은 주황이 아니라 본문 회색. 점선도 이 색을 따라간다 */
	/* 점선(위 ::after, 높이 5px)과 글 사이 간격 24px → 위 여백 5 + 24 = 29 */
	padding-top: 29px !important;
}
/* 제목 아래 → 점선 위 간격 24px */
body .elementor-5081 .elementor-element-f2e121e .qodef-price-cart-holder {
	margin-top: 24px;
}

/* 동그라미 8칸(카테고리 슬라이더) 사진. (2026-09-05)
   데모 사진은 92x92 정사각형이라 그 크기 그대로 동그랗게 보였다.
   새로 넣은 사진들은 가로·세로가 제각각이고 원본도 커서, 같은 92px 정원 틀에
   object-fit:cover 로 가운데를 잘라 넣는다. */
/* 동그라미 크기: 기본 92px, 칸이 좁아지면 칸 폭의 72% 로 함께 줄어든다. (2026-09-06)
   점선 테두리(SVG)도 이 틀을 따라가야 해서 사진이 아니라 틀에 크기를 준다. */
body .elementor-5081 .elementor-element-4a4dd88 .qodef-image-holder {
	display: inline-block;
	/* 좌우 화살표(폭 29px)가 슬라이더 양 끝에 겹쳐 있어서, 칸 양옆에 30px 씩 비워 둬야
	   첫/마지막 동그라미가 화살표와 겹치지 않는다. 그래서 '칸 폭 - 60px'. (2026-09-06) */
	width: min(92px, calc(100% - 60px));
}
body .elementor-5081 .elementor-element-4a4dd88 .qodef-image-holder img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}
/* 동그라미가 작아지는 폭에서는 아래 글자도 함께 줄인다 */
@media only screen and (max-width: 680px) {
	body .elementor-5081 .elementor-element-4a4dd88 .woocommerce-loop-category__title {
		font-size: 13px;
		line-height: 19px;
	}
}
@media only screen and (max-width: 480px) {
	body .elementor-5081 .elementor-element-4a4dd88 .woocommerce-loop-category__title {
		font-size: 12px;
		line-height: 17px;
	}
}

/* 사진 위 핫스팟(주황 점)이 화면이 좁아지면 옆으로 밀리는 문제. (2026-09-06)
   점을 감싸는 상자에 테마가 오른쪽 여백 12px 을 줘서, 실제 점이 상자 중심보다 6px 왼쪽에 있다.
   상자는 지정한 좌표(%)에 정확히 맞춰지지만 이 6px 은 화면 크기와 무관한 고정값이라,
   사진이 작아질수록 6px 이 차지하는 비율이 커져 점이 왼쪽으로 밀려 보인다.
   여백을 없애 점이 좌표 위에 정확히 오도록 한다. */
body .elementor-5081 .elementor-element-fb533ea .qodef-e-pin,
body .elementor-5081 .elementor-element-ad2e83a .qodef-e-pin {
	padding-right: 0;
	/* 점에 링크가 걸려 있지 않은데 테마가 cursor:pointer 를 줘서 눌리는 것처럼 보였다.
	   마우스 오버로 설명만 뜨면 되므로 기본 커서로 되돌린다. (2026-09-06) */
	cursor: default;
}

/* 모바일(680px 이하)에서는 점을 숨긴다. (2026-09-06)
   테마가 이 폭에서 사진 틀을 height:300px 로 고정하고 사진을 object-fit:cover 로 잘라 넣는다.
   점의 좌표(%)는 잘리기 전 '틀' 기준이라, 잘린 사진 위에서는 엉뚱한 자리를 가리키게 된다.
   사진 크기는 테마 기본값(잘라서 채우기) 그대로 두고, 점만 감춘다. */
@media only screen and (max-width: 680px) {
	body .elementor-5081 .elementor-element-fb533ea .qodef-m-items,
	body .elementor-5081 .elementor-element-ad2e83a .qodef-m-items {
		display: none;
	}
}

/* 핫스팟 팝업(흰 박스) 규격 통일. (2026-09-06)
   박스 폭(116px)과 글자는 원래 같았고, 사진 높이만 사진 비율을 따라가서 박스 높이가 달랐다
   (65 / 75 / 88px → 박스 122 / 132 / 145px).
   'Rounded Edges' 의 88x75 비율을 기준으로 고정하고 가운데를 잘라 채운다. */
body .elementor-5081 .elementor-element-fb533ea .qodef-e-item-image img,
body .elementor-5081 .elementor-element-ad2e83a .qodef-e-item-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 88 / 75;
	object-fit: cover;
	object-position: center;
}

/* 오른쪽 배너(Dotori 사진) 위에 'Your Dream Nursery' 흰 손글씨 얹기. (2026-09-06)
   미디어의 h1-rev-img-1-2.png (211x101, 흰 글씨 투명 배경).
   사진 파일에 합성하지 않고 위에 겹쳐 두어서, 위치·크기 조정이나 제거가 쉽다.
   주소는 style.css 기준 상대경로라 실서버로 옮겨도 그대로 동작한다. */
body .elementor-5081 .elementor-element-ad2e83a .qodef-image-hotspots::after {
	content: "";
	position: absolute;
	left: 40%;   /* 서랍장이 사진 왼쪽에 치우쳐 있어 가운데(50%)보다 왼쪽으로 */
	top: 28%;    /* 서랍장 앞면 위 */
	width: 52%;
	aspect-ratio: 211 / 101;
	transform: translateX(-50%);
	background: url(../../uploads/2023/01/h1-rev-img-1-2.png) center / contain no-repeat;
	pointer-events: none;
	z-index: 4;
}

/* 두 배너가 위아래로 쌓이는 폭에서 첫째 칸 버튼과 둘째 사진이 붙어 버리는 문제. (2026-09-06)
   데모는 오른쪽 칼럼에 '위 여백 65px' 을 넣어 뒀는데, 그 값이 mobile extra(880px) 브레이크포인트에
   저장돼 있고 이 사이트는 그 브레이크포인트가 꺼져 있어 적용되지 않는다.
   칼럼이 실제로 쌓이는 767px 이하에서 같은 65px 을 넣어 준다. */
@media only screen and (max-width: 767px) {
	body .elementor-5081 .elementor-element.elementor-element-d5a033d > .elementor-element-populated {
		padding-top: 65px;
	}
}

/* 두 배너가 위아래로 쌓일 때 좌우 기준이 어긋나던 문제. (2026-09-06)
   왼쪽 칸에는 margin-right 24px, 오른쪽 칸에는 margin-left 24px 이 걸려 있어
   쌓였을 때 서로 반대 방향으로 밀린다.
   데모는 이 값을 mobile extra(880px)에서 0 으로 지웠지만 그 브레이크포인트가 꺼져 있어 남아 있었다.
   실제로 쌓이는 767px 이하에서 좌우 여백을 지운다. */
@media only screen and (max-width: 767px) {
	body .elementor-5081 .elementor-element.elementor-element-7153578 > .elementor-element-populated,
	body .elementor-5081 .elementor-element.elementor-element-d5a033d > .elementor-element-populated {
		margin-left: 0;
		margin-right: 0;
	}
}

/* READ OUR BLOG 설명문이 두 줄로 접히던 문제. (2026-09-06)
   칼럼 좌우 여백이 34% 라 글 칸이 416px 뿐이었고 문구는 450px 이 필요했다.
   % 여백은 화면이 좁아지면 같이 줄어 다시 접히므로, 글 칸을 520px 로 고정하는 계산식으로 바꾼다.
   칼럼이 520px 보다 좁아지면 여백 0 이 되어 넘치지 않는다. */
@media only screen and (min-width: 1025px) {
	body .elementor-5081 .elementor-element.elementor-element-6b11fa5 > .elementor-element-populated {
		padding-left: max(0px, calc((100% - 520px) / 2));
		padding-right: max(0px, calc((100% - 520px) / 2));
	}
}

/* CONTACT US 매장 2·3·4번 사진: 흐리게 + 가운데 "Coming soon". (2026-09-06)
   아직 준비되지 않은 곳이라는 표시. 사진 파일은 손대지 않고 화면에서만 처리한다.
   흐림 효과는 가장자리가 번지므로 틀에서 잘라내고(overflow:hidden) 사진을 살짝 키운다. */
body .elementor-1844 .elementor-element-ef679de .qodef-m-image,
body .elementor-1844 .elementor-element-3cdd8c4 .qodef-m-image,
body .elementor-1844 .elementor-element-3e79a50 .qodef-m-image {
	position: relative;
	overflow: hidden;
}
body .elementor-1844 .elementor-element-ef679de .qodef-m-image img,
body .elementor-1844 .elementor-element-3cdd8c4 .qodef-m-image img,
body .elementor-1844 .elementor-element-3e79a50 .qodef-m-image img {
	filter: blur(7px);
	transform: scale(1.08);   /* 흐림 때문에 생기는 가장자리 여백 가리기 */
}
body .elementor-1844 .elementor-element-ef679de .qodef-m-image::after,
body .elementor-1844 .elementor-element-3cdd8c4 .qodef-m-image::after,
body .elementor-1844 .elementor-element-3e79a50 .qodef-m-image::after {
	content: "Coming soon";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.18);
	color: #fff;
	font-family: inherit;
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/* CHECK OUT OUR GALLERY — 격자는 정사각형으로 잘라 보여준다. (2026-09-06)
   사진 파일 자체는 건드리지 않는다. 클릭하면 뜨는 팝업은 원본 전체를 그대로 보여준다.
   원본 비율이 세로·정사각·가로로 섞여 있어 벽돌쌓기처럼 높이가 들쭉날쭉하던 것을 맞춘다. */
body .elementor-5081 .elementor-element-b840634 .qodef-image-wrapper {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
body .elementor-5081 .elementor-element-b840634 .qodef-image-wrapper a {
	display: block;
	width: 100%;
	height: 100%;
}
body .elementor-5081 .elementor-element-b840634 .qodef-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* FAQs 페이지 — 질문을 누르면 답이 펼쳐지는 아코디언. (2026-09-06)
   페이지 구조(질문=제목, 답=설명문)는 그대로 두고 여닫는 동작만 입힌다.
   관리자 화면에서 편집하는 방법이 지금과 똑같이 유지된다. */
body.page-id-2326 .pgw-faq .qodef-m-title {
	cursor: pointer;
	position: relative;
	padding-right: 44px;
	transition: color 0.2s ease-out;
}
body.page-id-2326 .pgw-faq .qodef-m-title::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 26px;
	line-height: 1;
	font-weight: 400;
	color: #db915e;
	transition: transform 0.25s ease-out;
}
body.page-id-2326 .pgw-faq.pgw-open .qodef-m-title::after {
	content: "–";
}
/* 처음 상태만 CSS 로 닫아 두고, 여닫는 동안의 높이 변화는 자바스크립트가 맡는다.
   (테마가 요소마다 자체 애니메이션을 걸어 CSS 트랜지션이 무시되기 때문) */
body.page-id-2326 .pgw-faq .qodef-m-text {
	display: none;
	margin-top: 14px;
}

/* FAQs 질문 사이 구분선. (2026-09-07)
   선은 각 항목 '위'에 붙이고 마지막 항목만 아래에도 붙여 목록 전체를 닫는다.
   Elementor 가 두 번째 항목부터 위 여백 39px 을 주고 있어, 선 위아래 간격이 같도록 26px 로 통일한다. */
body.page-id-2326 .elementor-element-de39182 .elementor-widget-playgrow_core_section_title {
	border-top: 1px solid #EAE3DE;
	/* 질문 사이 75px, 구분선이 정확히 가운데 (2026-09-07)
	   위 37 = Elementor 위젯 기본 아래 여백 20 + 여기 17
	   아래 37 = 여기 padding-top */
	margin-top: 17px !important;
	padding-top: 37px;
}
body.page-id-2326 .elementor-element-de39182 .elementor-widget-playgrow_core_section_title:first-child {
	margin-top: 0 !important;
}
body.page-id-2326 .elementor-element-de39182 .elementor-widget-playgrow_core_section_title:last-child {
	border-bottom: 1px solid #EAE3DE;
	padding-bottom: 37px;   /* 마지막 줄도 같은 37px */
}

/* 홈 HAPPY CUSTOMERS 아래 구름 띠. (2026-09-07)
   BABY WALKER 스토리 섹션(.pgw-scene)에서 쓰는 것과 같은 그림 두 장을 쓰되,
   그쪽은 섹션 배경으로 깔리는 구조라 여기서는 독립된 띠로 따로 만든다.
   img-02 = 회색 구름(뒤), img-01 = 흰 구름(앞). 두 장을 겹쳐 테두리가 두 겹으로 보인다.
   원본이 세로로 긴 그림이고 아랫부분이 단색이라 height 로 자르고 위쪽(구름 봉우리)만 남긴다. */
.pgw-cloudband {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: -90px;                 /* 후기 아래 여백을 파고들어 구름을 위로 끌어올린다 */
	height: 345px;
	overflow: hidden;
	pointer-events: none;
}
.pgw-cloudband-img {
	position: absolute;
	display: block;
	left: -40px;                       /* 좌우로 흔들려도 가장자리가 드러나지 않게 */
	bottom: -16px;
	width: calc(100% + 80px) !important;   /* 테마의 img{max-width:100%} 를 이겨야 함 */
	max-width: none !important;
	object-fit: cover;
	object-position: top center;
}
.pgw-cloudband--back {
	height: 345px !important;
	z-index: 0;
	animation: pgw-cloud 2.3s ease-in-out infinite alternate;
}
.pgw-cloudband--front {
	height: 195px !important;
	z-index: 2;                        /* 0=회색 구름, 1=쥐·하트, 2=흰 구름, 3=별구름·별 */
	animation: pgw-cloud 2s ease-in-out infinite alternate;
}
@media only screen and (max-width: 1024px) {
	.pgw-cloudband { height: 230px; margin-top: -65px; }
	.pgw-cloudband--back  { height: 230px !important; }
	.pgw-cloudband--front { height: 135px !important; }
}
@media only screen and (max-width: 680px) {
	.pgw-cloudband { height: 160px; margin-top: -70px; }
	.pgw-cloudband--back  { height: 160px !important; }
	.pgw-cloudband--front { height: 95px !important; }
}

/* 두 구름 사이(회색 뒤 / 흰 앞)에 끼워 넣는 것들. (2026-09-07)
   원래 HAPPY CUSTOMERS 섹션의 커서 패럴랙스 장식이었는데, 층 사이에 넣으려면
   같은 상자 안에 있어야 해서 구름 띠 HTML 로 옮겼다.
   BABY WALKER 스토리의 .pgw-scene-animal 과 같은 방식 — 흰 구름 뒤에서 몸 아래쪽이 가려진다. */
.pgw-cloudband-mid {
	position: absolute;
	z-index: 1;
	display: block;
	max-width: none !important;
	transform-origin: 50% 90%;
}
.pgw-cb-mouse {
	right: 13%; bottom: 108px; width: 69px;
	animation: pgw-rock-cw8 1.5s ease-in-out infinite alternate;
	animation-delay: -.9s;
}
/* 쥐 왼쪽 머리 옆. 가로 위치를 쥐와 같은 기준(right %)에 픽셀을 더해 잡아야
   화면 폭이 달라져도 쥐와의 간격이 일정하다 — 둘 다 % 로 두면 좁아질수록 붙어 겹친다.
   13% = 쥐의 right, 69px = 쥐 폭, 6px = 사이 간격 */
.pgw-cb-heart {
	right: calc(13% + 75px); bottom: 199px; width: 25px;
	animation: pgw-bob 1.5s ease-in-out infinite alternate;
	animation-delay: -.4s;
}
@media only screen and (max-width: 1024px) {
	.pgw-cb-mouse { width: 56px; bottom: 74px; }
	.pgw-cb-heart { width: 21px; bottom: 140px; right: calc(13% + 62px); }   /* 56px 쥐 폭 + 6px */
}
@media only screen and (max-width: 680px) {
	.pgw-cloudband-mid { display: none; }   /* 구름 띠만 남긴다 */
}
@media (prefers-reduced-motion: reduce) {
	.pgw-cloudband-mid { animation: none !important; }
}

/* 구름 위 장식 3종. (2026-09-07)
   데모 Landing 의 그림을 그대로 쓴다 — l-img-1 별구름 / l-img-2 별.
   BABY WALKER 스토리의 .pgw-scene-item 과 같은 규칙: 위아래가 아니라 좌우로 갸웃거리는 회전,
   주기 1.5초 yoyo, 시작 시점을 어긋내 셋이 동시에 움직이지 않게 한다. */
.pgw-cloudband-deco {
	position: absolute;
	z-index: 3;                        /* 구름 두 겹(0,1)보다 위 */
	display: block;
	max-width: none !important;        /* 테마의 img{max-width:100%} 방어 */
	transform-origin: 50% 70%;
	animation: pgw-rock-ccw 1.5s ease-in-out infinite alternate;
}
/* bottom 기준으로 앉힌다 — 흰 구름(앞 구름)의 마루가 띠 바닥에서 약 195px 위라,
   장식 밑동을 그 언저리에 두면 구름 위에 올라앉은 모양이 된다. */
.pgw-cb-starcloud { left: 7%;   bottom: 196px; width: 104px; animation-name: pgw-rock-cw7; animation-delay: -.2s; }
.pgw-cb-star      { left: 41%;  bottom: 205px; width: 30px;  animation-delay: -1.1s; }

@media only screen and (max-width: 1024px) {
	.pgw-cb-star      { display: none; }        /* 좁아지면 작은 별부터 정리 */
	.pgw-cb-starcloud { width: 78px; bottom: 138px; }
}
@media only screen and (max-width: 680px) {
	.pgw-cloudband-deco { display: none; }      /* 구름 띠만 남긴다 */
}
@media (prefers-reduced-motion: reduce) {
	.pgw-cloudband-deco { animation: none !important; }
}

/* ── "We made what we couldn't find" 우측 사진에 매달린 그네 토끼 ──── (2026-09-07)
   갤러리 섹션(701dcf8)이 쓰는 것과 같은 그림 main-img-24.png (96×201).
   사진은 칸(8a6a562)의 배경이고 그 칸이 이미 position:relative / overflow:visible 이라,
   가상요소를 칸 바닥 밖으로 내려도 잘리지 않는다.
   회전축을 위쪽 줄 끝에 두어 실제로 매달려 흔들리는 것처럼 보이게 했다. */
body .elementor-5081 .elementor-element-8a6a562 > .elementor-element-populated::after {
	content: "";
	position: absolute;
	right: 10%;                        /* 사진 우측 끝 */
	bottom: -196px;                    /* 그림 높이(201)보다 5px 위 — 줄 윗끝이 사진 뒤로 살짝 들어간다 */
	width: 96px;
	height: 201px;
	background: url(../../uploads/2022/11/main-img-24.png) center top / contain no-repeat;
	transform-origin: 50% 0;           /* 줄이 매달린 지점 */
	animation: pgw-swing 3.4s ease-in-out infinite alternate;
	pointer-events: none;
	/* 사진 뒤로 보낸다. 이 칸은 position:relative 지만 z-index:auto 라 쌓임 맥락을 만들지 않아,
	   음수 z-index 가 칸 배경(=사진)보다 먼저 그려진다.
	   페이지 흰 배경은 body 것(맨 아래)이라 토끼가 그 밑으로 숨지는 않는다. */
	z-index: -1;
}
@keyframes pgw-swing {
	from { transform: rotate(-2.5deg); }
	to   { transform: rotate(2.5deg); }
}
/* 좁은 화면에서는 아래 섹션(WHY MONTENY)의 위 여백이 300 → 150px 로 줄어든다.
   전에는 그림을 사진에 걸쳐 높이를 벌었는데, 토끼를 사진 뒤로 보낸 뒤로는
   걸친 만큼이 그대로 가려져 줄이 사라져 보였다.
   → 어느 폭에서든 `bottom = -(height - 5)` 로 두어 가려지는 건 줄 윗끝 5px 뿐이고,
     대신 그림 크기를 줄여 남은 여백 안에 통째로 들어가게 한다. */
@media only screen and (max-width: 1024px) {
	body .elementor-5081 .elementor-element-8a6a562 > .elementor-element-populated::after {
		width: 60px; height: 126px; bottom: -121px;   /* 아래 여백 150px 중 29px 남김 */
	}
}
@media only screen and (max-width: 767px) {
	body .elementor-5081 .elementor-element-8a6a562 > .elementor-element-populated::after {
		right: 8%;   /* 크기는 태블릿과 동일 — 아래 여백도 150px 로 같다 */
	}
}
@media (prefers-reduced-motion: reduce) {
	body .elementor-5081 .elementor-element-8a6a562 > .elementor-element-populated::after {
		animation: none !important;
	}
}

/* ── FAQs "Ask us anything" 배경 사진 위에 선 코끼리 ──── (2026-09-07)
   테마 오프셋 이미지의 세로 위치는 **섹션 높이의 %** 라서, 화면 폭이 바뀌어
   섹션이 길어지면 같은 % 도 픽셀로는 훨씬 아래/위가 된다.
   여기서는 "사진 윗선에 발이 딱 닿는" 고정 관계가 필요하므로 px 로 덮어쓴다.
   -160px = 그림 높이 그대로. 그림 아래끝이 섹션 윗선(= 사진 윗선)에 정확히 맞는다.
   ⚠ 측정 함정: 이 장식들은 등장할 때 transform 트랜지션(아래→제자리)을 쓴다.
     자동화 브라우저에서는 그게 0 프레임에서 멈춰 있어 25px 아래로 보인다.
     실제 브라우저에서 트랜지션이 끝난 위치가 기준이다.
   ⚠ Elementor 쪽 세로 값(-18.1%)은 이 규칙이 이깁니다. 위치를 바꾸려면 여기 px 를 고칠 것. */
body.page-id-2326 .elementor-element-8de3999
	.qodef-offset-image-holder:has(img[src*="main-img-27"]) {
	top: -160px !important;
}

/* ── Our Story 03 섹션: 오른쪽 사진 위에 걸친 별구름 위치 고정 ──── (2026-09-07)
   테마 오프셋 이미지는 위치를 **화면 폭·섹션 높이의 %** 로 잡는다. 그런데 사진은
   가운데 정렬된 1300px 그리드 안에 있어서, 화면이 넓어지면 % 위치가 사진 밖으로 나간다.
   (right:6% 는 1477px 부근에서만 사진 오른쪽 끝과 맞고, 그보다 넓으면 사진 바깥.)
   → 그리드를 따라가도록 px 로 고정한다.
   right: 50% - 635px  = 사진 오른쪽 끝에서 15px 안쪽 (그리드 1300 기준: 650 - 15)
   max(15px, …)        = 화면이 1300px 보다 좁아 그리드가 화면을 꽉 채울 때의 값
   top: -25px          = 사진 윗선(섹션 위에서 59px)보다 위. 매달린 별만 26px 걸친다.
   ⚠ Elementor 쪽 값(-3% / 6%)은 이 규칙이 이깁니다. 옮기려면 여기 px 를 고칠 것. */
body.page-id-1609 .elementor-element-154bd2a
	.qodef-offset-image-holder:has(img[src*="l-img-1"]) {
	top: -25px !important;
	right: max(15px, calc(50% - 635px)) !important;
	left: auto !important;
}

/* ── BABY WALKER 상품 페이지: WooCommerce 블록 간격 224px ──── (2026-09-07)
   이 페이지는 Elementor 문서 6개 + WooCommerce 상품 영역이 섞여 있다.
   가운데 3개(상품 제목·대표 사진·설명 탭)는 Elementor 설정이 아니라 테마 CSS 라
   여기서 덮어쓴다. `postid-61` 로 이 상품에만 걸리게 한다.
   앞 블록(BRAND STORY)의 끝은 **흰 구름 윗선** 기준 — 구름 띠 아래쪽은 흰색이라
   눈에 보이는 경계가 거기다. */
body.postid-61 .qodef-woo-single-inner { margin-top: 45px; }           /* 구름 → 상품 제목 179 → 224 */
/* 대표 사진의 위 여백(40px)은 원래대로 둔다 — 제목에 붙어 있어야 한다.
   탭은 테마 CSS 가 자식테마보다 뒤에 실려서 !important 가 필요하다. */
body.postid-61 .woocommerce-tabs { margin-top: 184px !important; }   /* 사진 → 탭 115 → 224 (사진 아래 여백 40 포함) */

@media only screen and (max-width: 1024px) {
	/* 태블릿 이하는 이번 통일 대상이 아니라 원래 값 유지 */
	body.postid-61 .qodef-woo-single-inner { margin-top: 0; }
	body.postid-61 .woocommerce-tabs { margin-top: 75px !important; }
}

/* ── Our Story "OUR VALUES" 세 문장 사이 간격 20px ──── (2026-09-07)
   이 글은 문단 3개가 아니라 **한 문단 안의 줄바꿈**이다. 테마가 제목 위젯의 설명문을
   `esc_html` 로 출력해서(`<p class="qodef-m-text">` 하나) HTML 을 넣을 수 없고,
   그래서 `p + p` 규칙이 걸리지 않는다. 줄 간격 자체를 늘려 문단처럼 보이게 한다.
   26.4(원래 줄간격) + 20 = 46.4px.
   ⚠ 이 <p> 는 테마가 `margin-top` 을 **인라인 스타일**로 박아서 CSS 로는 못 이긴다.
      제목과의 간격은 Elementor 위젯 설정 `text_margin_top` 에서 조정한다(11 → 15px).
   좁은 화면에서 한 문장이 두 줄로 접히면 그 줄 사이까지 46.4px 이 되므로,
   접히기 전에 원래 줄간격으로 되돌린다. 가장 긴 문장이 491px, 글상자가 520px 이라
   뷰포트 약 571px 부터 접힌다 → 620px 에서 미리 되돌린다.
   ※ 사이트 전체에서 이렇게 여러 문장을 줄바꿈으로 넣은 곳은 여기 한 곳뿐임을 확인했다
     (홈 WHY MONTENY 의 줄바꿈은 한 문장을 두 줄로 나눈 것이라 대상이 아니다). */
body .elementor-1609 .elementor-element-d952ff0 .qodef-m-text {
	line-height: 46.4px;
}
@media only screen and (max-width: 620px) {
	body .elementor-1609 .elementor-element-d952ff0 .qodef-m-text {
		line-height: 26.4px;
		margin-top: 11px !important;   /* 인라인 15px 을 원래 값으로 되돌린다 */
	}
}

/* ── 상단바 겹침 해결 (2026-09-07) ────────────────────────────────
   상단바는 좌(NEWSLETTER)·가운데(메뉴)·우(언어+SNS) 세 덩어리인데,
   **좌우가 position:absolute** 라 흐름에서 빠져 있다. 가운데 메뉴는 그 존재를 모른 채
   가운데 정렬되므로, 폭이 모자라도 서로 밀어내지 못하고 그냥 포개진다.

   실측: 좌 145 + 메뉴 720 + 우 202 + 여유 32 = 1099 → 1169px 아래부터 겹침.
   데스크톱 상단바가 나오는 최소 폭은 1025px(그 아래는 모바일 헤더), 안쪽 폭 955.
   → 144px 을 줄여야 한다.

   위젯을 없애지 않고 **CSS 로만** 처리한다. 1200px 이상에서는 지금 그대로 보인다. */
@media only screen and (max-width: 1200px) {
	/* SNS 아이콘 3개 숨김 (-130). 같은 링크가 푸터에 그대로 있다 */
	.qodef-standard-enlarged-header-top-wrapper .qodef-widget-holder .widget_playgrow_core_svg_icon {
		display: none;
	}
	/* 메뉴 항목 간격: 실제 간격은 margin-left 31 + margin-right 24 = 55px 이다.
	   **양쪽을 함께** 22px 로 → 간격 44px (-11px × 5곳 + 마지막 여백) */
	.qodef-standard-enlarged-header-top-wrapper .qodef-header-navigation > ul > li {
		margin-left: 22px;
		margin-right: 22px;
	}
	.qodef-standard-enlarged-header-top-wrapper .qodef-header-navigation > ul > li:first-child {
		margin-left: 0;
	}
}

/* 푸터 아래 영역(로고 + 저작권)을 가운데로. (2026-09-08)
   결제수단 아이콘 위젯을 없애면서 두 칸을 한 칸으로 줄이고 테마 설정의 정렬을 center 로 바꿨는데,
   테마가 이 칸에 justify-content:flex-end 를 걸어 둬서 내용이 계속 오른쪽 끝에 붙어 있었다.
   (원래 오른쪽에 결제 아이콘을 놓으려고 만든 규칙이라 한 칸이 된 지금은 맞지 않는다)
   부모 테마 규칙이 `.qodef-grid-item:last-child` 라 클래스를 겹쳐 써서 셈을 높여야 이긴다. */
#qodef-page-footer-bottom-area .qodef-grid-item.qodef-grid-item:last-child {
	justify-content: center;
}

/* ─────────────────────────────────────────────────────────────
   이니셜 미리보기 (BABY WALKER · 04 Special Touch) 2026-09-08
   방문자가 아이 이름을 넣으면 제품 사진에 그 이름이 바로 올라간다.

   ⚠ 사진이 아니라 흉내다. 바탕은 원본 사진에서 로고와 MONTENY 글자를 지운 것이고
     (첨부 5402 확대 / 5403 전체), 글자는 Jost 800 으로 그린다.
     자리·크기 값은 원본 사진에서 직접 잰 비율이며 HTML 의 data-* 에 들어 있다.
   ───────────────────────────────────────────────────────────── */
.pgw-ip { display: flex; flex-direction: column; gap: 14px; }

/* 사진 무대 — 두 장을 겹쳐 두고 하나만 보여준다 */
/* 틀 크기는 사진 비율로 고정한다. 확대해도 높이가 그대로라 아래 내용이 밀리지 않는다.
   (처음엔 활성 뷰를 position:relative 로 바꿔 높이를 잡으려 했는데 inset:0 이 무효가 돼 높이가 0이 됐다) */
.pgw-ip-stage {
	position: relative; border-radius: 16px; overflow: hidden; background: #f4f1ee;
	aspect-ratio: 1536 / 1024;
}

/* 마우스를 올리면 이니셜 자리를 중심으로 살짝 키운다.
   사진을 갈아 끼우지 않고 같은 사진을 키우는 방식이라 글자도 함께 커져 어긋날 일이 없다.
   가운데 값(50.9% 62.6%)은 판에 새겨진 이니셜의 한가운데다. */
.pgw-ip-view {
	transform-origin: 50.9% 62.6%;
	transition: opacity .25s ease-out, transform .35s ease-out;
}
.pgw-ip-stage.is-zoomed .pgw-ip-view { transform: scale(2.7); }

.pgw-ip-view {
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	background-size: cover; background-position: center;
	transition: opacity .25s ease-out;
}
.pgw-ip-view--is-on { opacity: 1; visibility: visible; }

/* 판에 올라가는 이름. 크기는 스크립트가 사진 비율에 맞춰 정한다. */
.pgw-ip-text {
	position: absolute; left: 50%; transform: translateX(-50%);
	white-space: nowrap; line-height: 1;
	font-family: Jost, sans-serif; font-weight: 800; color: #E0A055;   /* 바퀴 나무색을 쨍하고 조금 어둡게 */
	/* 나무 글자의 두께와 그림자 흉내 */
	text-shadow:
		0 .006em 0 rgba(255,255,255,.45),
		0 .022em .035em rgba(120,100,80,.42),
		0 .05em .07em rgba(120,100,80,.20);
	pointer-events: none;
}

/* 글자 속을 나뭇결로 채운다.
   편백 사진(hinoki)에서 옹이 없는 잔결을 떼어 **바퀴 색 #E6C1A2** 로 옮기고,
   결의 세기를 55%로 낮춘 뒤 채도를 3.0배 올리고 색을 #D2AB86 으로 낮춘 것이다. (2026-09-08 사용자 선택)
   (세기를 안 낮추면 무늬가 튀고, 채도를 안 올리면 회색빛으로 보인다 — 둘 다 실제로 겪었다)
   글자 폭에 맞춰 무늬가 늘어나도록 background-size 는 100% 로 둔다.
   위 color 는 이 방식을 못 쓰는 브라우저를 위한 대비책이라 그대로 남겨 둔다.
   (background-clip:text 는 글자 속만 채우므로 text-shadow 는 글자 바깥에 그대로 보인다) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.pgw-ip-text {
		background-image: url(../../uploads/2026/09/wood-grain.jpg);
		background-size: 100% 100%;
		background-position: center;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* 입력 */
.pgw-ip-form label { display: block; font-size: 13px; color: #6b6b6b; margin-bottom: 7px; }
.pgw-ip-row { display: flex; align-items: center; gap: 10px; }
.pgw-ip .pgw-ip-row input {
	flex: 1 1 auto; min-width: 0; width: auto; height: 46px; margin: 0; padding: 0 16px;
	font-family: Jost, sans-serif; font-size: 16px; letter-spacing: 2px; text-transform: uppercase;
	color: #3d3d3d; background: #fff; border: 1px solid #eae3de; border-radius: 23px;
}
.pgw-ip .pgw-ip-row input:focus { outline: none; border-color: #db915e; }
/* 입력값은 대문자로 보여야 하지만(실제 각인이 대문자라서), 안내글까지 대문자면 강해 보인다.
   안내글만 원래 대소문자로 되돌리고 자간도 줄인다. */
.pgw-ip .pgw-ip-row input::placeholder {
	text-transform: none;
	letter-spacing: .3px;
	color: #b4aca6;
}
.pgw-ip-count { flex: 0 0 auto; width: 48px; text-align: right; font-size: 13px; color: #a6a6a6; }
.pgw-ip-count.is-over { color: #b5561f; }

.pgw-ip-help { margin: 9px 0 0; font-size: 11.5px; line-height: 1.7; color: #a6a6a6; }

.pgw-ip-go { margin-top: 16px; display: inline-block; }
.pgw-ip-go[aria-disabled="true"] { opacity: .45; pointer-events: none; }

@media (max-width: 680px) {
	.pgw-ip .pgw-ip-row input { height: 44px; font-size: 15px; }
}

/* ────────────────────────────────────────────────────────────
   섹션 제목 — 번역된 긴 문구 대응 (2026-09-08)

   문제: 가운데 정렬 섹션 제목 박스가 `display:inline-block` 이라
         폭이 "영문 문구 길이"에 맞춰 좁게 잡힌다.
         (예: "Why Monteny" → 1667px 화면에서 416px, 1200px 화면에서 307px)
         말레이어·태국어로 번역되면 문구가 길어져 그 좁은 박스 안에서 접히고,
         `overflow-wrap:break-word` 때문에 브랜드명까지 MONTEN / Y 로 쪼개졌다.

   해결: 단어 중간 쪼개짐만 막는다. 박스는 여전히 가운데 정렬이고,
         긴 문구는 단어 경계에서 접힌다. 영문에서는 겉보기가 그대로다.
   ──────────────────────────────────────────────────────────── */
/* 제목 위젯의 폭은 건드리지 않는다 — 위젯마다 디자인 시 정한 값이 다르다
   (같은 홈에서도 871 / 560 / 416 / 1300px 로 제각각이고, 줄바꿈 위치를 그 폭으로 잡아 뒀다).
   일괄로 넓히면 영문 화면의 줄바꿈이 전부 달라지므로 아래 한 가지만 손본다. */

/* 브랜드명이 단어 중간에서 끊기지 않도록 (MONTEN / Y 방지) */
.qodef-section-title .qodef-m-title {
	overflow-wrap: normal;
}