/*
 * 브랜드 홈 — 데모용 임시 스타일 (B-50)
 *
 * 🔴 디자이너 확정 시안이 오면 교체된다.
 *    색·타이포·간격을 전부 :root 변수로 빼 두었으므로, 시안이 오면
 *    **마크업을 건드리지 않고 변수값만 갈아끼우는** 것으로 1차 대응이 가능하다.
 *
 * 모바일 우선 — 375px 기준으로 쓰고 넓은 화면에서 벌린다.
 */

:root {
	/* ── 색 ────────────────────────────────────────────────────────────
	 * 🔴 값은 기존 것을 이어받는다(새 팔레트 발명 금지 — style-archetypes R3).
	 *    2026-08-27 정리한 것은 **역할 이름과 통일**이다:
	 *    brand.css 는 `#8A6F4E`, pet-public.css 는 `#5B3A29` 를 각각 "브랜드색"으로
	 *    쓰고 있어서 같은 브랜드가 화면마다 다른 색을 냈다. 이제 한 벌만 있다.
	 * 고채도 accent 는 2개까지(캐논) — 여기서는 brand(딥) · accent(탠) 둘 다 저채도라 여유가 있다. */
	--pn-ink:      #241E1A;   /* 본문 — 순흑 아닌 웜 니어블랙 */
	--pn-ink-soft: #6B615A;   /* 보조 텍스트 */
	--pn-ink-mute: #A3988E;   /* 신설 — 헤드라인에서 힘을 빼는 자리(명도 강조) */
	--pn-line:     #E5DED6;
	--pn-bg:       #FFFFFF;
	--pn-tint:     #F7F3EE;   /* 섹션 배경 */
	--pn-cream:    #FBF7F1;   /* 신설 — tint 보다 한 단계 옅은 브레이크 */
	--pn-brand:    #5B3A29;   /* 새들 레더 — 주 행동·브랜드 (pet-public 과 통일) */
	--pn-brand-dk: #402A1E;
	--pn-accent:   #8A6F4E;   /* 탠 — 아이브로우·미세 강조 */
	--pn-tan:      #A9784F;   /* 밝은 탠 — 보조 행동(문자 버튼) */
	--pn-tan-dk:   #8A6140;
	--pn-dark:     #221C18;   /* 다크 브레이크 섹션 바탕 */
	--pn-on-dark:      #EFE8DF;
	--pn-on-dark-soft: #A2958A;

	/* ── 타이포 ────────────────────────────────────────────────────────
	 * 두 벌이다. 브랜드가 말할 때(워드마크·히어로·섹션 제목·아이 이름) = 세리프,
	 * 도구가 말할 때(폼·버튼·표·마이페이지) = 산세리프.
	 * 🔴 한글 대형 디스플레이에 Light(300) 금지 — 최소 500 (taste-profile). 여기선 700 을 쓴다. */
	--pn-display: 'Gowun Batang', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
	--pn-font:    'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;

	/* ── 간격 ──────────────────────────────────────────────────────────
	 * 섹션 여백 80~120px (캐논). 이전 값 72px 은 캐논 하한에도 못 미쳤다. */
	--pn-gap:  20px;
	--pn-sect: 88px;
	--pn-max:  1180px;
}

@media (min-width: 768px)  { :root { --pn-gap: 32px; --pn-sect: 108px; } }
@media (min-width: 1024px) { :root { --pn-gap: 40px; --pn-sect: 128px; } }

.pn-home {
	font-family: var(--pn-font);
	color: var(--pn-ink);
	background: var(--pn-bg);
	line-height: 1.7;
	letter-spacing: -0.01em;
}

/* 🔴 이미지 리셋은 홈 전용이 아니라 **셸을 타는 전 화면 공통**이어야 한다.
 *    처음엔 `.pn-home img` 로만 걸어 뒀는데, 새 화면(/story/)에서 `.pn-product` 가
 *    안 줄어들어 375px 에서 205px 가로 오버플로가 났다(2026-08-26 실측).
 *    화면이 늘어날 때마다 같은 버그가 재발하므로 범위를 공용으로 올린다. */
.pn-home img,
.pn-main img,
body.pn-skin .wp-site-blocks img { max-width: 100%; height: auto; }
.pn-home img, .pn-main > * > img { display: block; }

/* ── 공통 요소 ─────────────────────────────── */

/* 아이브로우 — 자간으로 만든다. 🚫 모노스페이스 올캡스는 쓰지 않는다
   (브루탈 시그니처는 F·H 업종 전용 — style-archetypes R5). */
.pn-eyebrow {
	font-family: var(--pn-font);
	font-size: 12px; font-weight: 600; letter-spacing: 0.18em;
	color: var(--pn-accent); margin: 0 0 16px;
}

/* 디스플레이 — 브랜드가 말하는 자리. 세리프 700.
   히어로는 캐논 하한(48px)을 넘긴다. 이전 값 32px 은 "제목이 아니라 소제목"으로 읽혔다. */
.pn-h1 {
	font-family: var(--pn-display);
	font-size: clamp(34px, 8vw, 60px); font-weight: 700;
	line-height: 1.22; letter-spacing: -0.02em;
	margin: 0 0 20px; text-wrap: balance;
}
.pn-h2 {
	font-family: var(--pn-display);
	font-size: clamp(26px, 4.4vw, 40px); font-weight: 700;
	line-height: 1.3; letter-spacing: -0.015em;
	margin: 0 0 18px; text-wrap: balance;
}

/* 🔑 헤드라인 강조는 굵기가 아니라 **명도**로 한다 (근거: VanMoof — refs/mobbin §D).
   한글은 굵기 대비가 라틴만큼 안 나와서, 700 안에서 더 굵게 갈 자리가 없다.
   대신 덜 중요한 절을 흐리게 해 핵심을 남긴다. */
.pn-h1 .pn-mute, .pn-h2 .pn-mute { color: var(--pn-ink-mute); }

.pn-lead {
	font-size: 16px; line-height: 1.85; color: var(--pn-ink-soft);
	margin: 0 0 28px; max-width: 34em;
}
.pn-lead--narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.pn-note { font-size: 13px; line-height: 1.8; color: var(--pn-ink-soft); }

/* 버튼 — 라운딩 2px(샤프한 고급, E 규율). 그림자·그라데이션 없음. */
.pn-btn {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 52px; padding: 0 34px; border-radius: 2px;
	font-family: var(--pn-font);
	font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
	text-decoration: none; border: 1px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pn-btn--primary { background: var(--pn-brand); color: #fff; }
.pn-btn--primary:hover, .pn-btn--primary:focus-visible { background: var(--pn-brand-dk); }
.pn-btn--ghost { border-color: var(--pn-line); color: var(--pn-ink); background: transparent; }
.pn-btn--ghost:hover, .pn-btn--ghost:focus-visible { border-color: var(--pn-ink); }
/* 다크 섹션 위에서 */
.pn-on-dark .pn-btn--primary { background: var(--pn-on-dark); color: var(--pn-dark); }
.pn-on-dark .pn-btn--primary:hover { background: #fff; }

@media (min-width: 768px) {
	.pn-lead { font-size: 17px; }
}

/* ── 히어로 — 사진 먼저, 활자는 그 아래 ────────────────────────────
 * 근거: HBX (refs/mobbin §E-2, PM 선택 2026-08-31). 사진 → 굵은 제목 → 밑줄 링크.
 *
 * 🔴 왜 오버레이를 버렸나 (2026-08-31)
 *    이전 구조(In Common With)는 **1440 데스크톱 웹 섹션**에서 가져온 것이다.
 *    이 제품은 NFC 로 열리므로 트래픽이 거의 전부 모바일인데, 정작 가장 중요한 화면을
 *    가장 안 맞는 레퍼런스로 설계했다. 모바일 앱 레퍼런스 6종(Fi·Tesla·MyDyson·Oura·
 *    World App·Best Buy)은 전부 "사진 블록 → 텍스트 블록"이고, 사진 위 오버레이는
 *    커머스 **세일 배너**에서만 쓰인다.
 *    → 스크림·text-shadow·흰 글씨가 통째로 필요 없어졌다. 대비를 위해 사진을 어둡게
 *      깔던 장치들이므로, 글자가 사진에서 내려오면 같이 사라지는 게 맞다.
 *
 * 🔴 PC 는 이 구조를 그대로 넓힌다 (PM 지시: "모바일 고른 걸 pc로 확장").
 *    좌우 2단으로 바꾸지 않는다 — 순서가 바뀌면 모바일에서 고른 것이 아니게 된다.
 *    넓어지면서 달라지는 건 사진 비율(4:5 → 16:9 → 21:9)과 활자 크기뿐이다. */
.pn-hero__media { margin: 0; }
.pn-hero__media img {
	display: block; width: 100%; height: auto;
	/* 🔴 세로로 잘릴 때 **목줄이 프레임 밖으로 나가면 안 된다** — 이 사진의 요점이 목줄이다.
	      아이와 목줄이 화면 중앙 아래쪽에 오도록 잡는다. */
	aspect-ratio: 4 / 5; object-fit: cover; object-position: 44% 62%;
}
.pn-hero__inner {
	/* 🔴 이 사이트엔 전역 border-box 리셋이 없다 — width:100% 와 좌우 패딩이 더해져
	      375px 에서 430px 가 됐던 사고가 있다(2026-08-27 실측). 함께 쓰면 반드시 명시. */
	box-sizing: border-box;
	max-width: var(--pn-max); width: 100%; margin: 0 auto;
	padding: clamp(30px, 7vw, 52px) var(--pn-gap) clamp(44px, 8vw, 72px);
}
.pn-hero__lead { margin-bottom: 24px; }
.pn-hero__links { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 0; }

/* 밑줄 링크 — 채운 버튼 대신 (HBX). 버튼을 남발하지 않아야 섹션을 이어 붙여도
   화면이 시끄러워지지 않는다. 주 행동만 브랜드색, 보조는 조용하게. */
.pn-link-under {
	font-family: var(--pn-font);
	font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
	color: var(--pn-ink-soft); text-decoration: none;
	padding-bottom: 5px; border-bottom: 1.5px solid var(--pn-line);
	transition: color .18s ease, border-color .18s ease;
}
.pn-link-under:hover, .pn-link-under:focus-visible { color: var(--pn-ink); border-color: var(--pn-ink); }
.pn-link-under--lead { color: var(--pn-brand); border-bottom-color: var(--pn-brand); }
.pn-link-under--lead:hover, .pn-link-under--lead:focus-visible { color: var(--pn-brand-dk); border-bottom-color: var(--pn-brand-dk); }
.pn-on-dark .pn-link-under { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.34); }
.pn-on-dark .pn-link-under:hover, .pn-on-dark .pn-link-under:focus-visible { color: #fff; border-bottom-color: #fff; }

/* ── 섹션 ────────────────────────────────────────────────────────
 * 🔴 정본 컨테이너 하나를 전 섹션이 상속한다 (style-archetypes R1).
 *    섹션마다 유사 컨테이너를 만들지 않는다 — 유지보수 지뢰. */
.pn-section { padding: var(--pn-sect) var(--pn-gap); max-width: var(--pn-max); margin: 0 auto; }
.pn-section--center { text-align: center; }
.pn-section__head { max-width: 34em; margin-bottom: clamp(40px, 6vw, 64px); }

/* ── 3단계 ───────────────────────────────────────────────────────
 * 각 단계에 그때 폰에 뜨는 화면이 들어간다 (Norma — refs/mobbin §C).
 * 순서 표시는 작은 글자로만 — 큰 번호배지는 이 업종에서 금지(R5). */
.pn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 7vw, 56px); }
.pn-step { margin: 0; }
.pn-step__shot { margin: 0 0 24px; }
.pn-step__shot img { width: 100%; display: block; }

/* 사진 단계 — 실제 장면 */
.pn-step__shot--photo img { aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }

/* 화면 단계 — 기기 틀 안에 넣는다. 틀이 있어야 "화면"으로 읽힌다.
   틀은 얇은 테두리 하나로 끝낸다. 노치·버튼까지 그리면 목업 장난감이 된다. */
.pn-step__shot--phone {
	/* 🔴 사진 카드와 **같은 크기**여야 셋이 한 벌로 읽힌다.
	      box-sizing 을 안 잡으면 padding 이 더해져 카드 높이가 서로 달라진다(실측). */
	box-sizing: border-box;
	aspect-ratio: 4/5;
	background: var(--pn-tint);
	border-radius: 3px;
	padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px) 0;
	display: flex; align-items: flex-end; justify-content: center;
	overflow: hidden;
}
.pn-step__shot--phone img {
	/* 폭이 아니라 높이를 기준으로 채운다 — 카드 높이가 달라져도 폰이 항상 바닥에 닿는다. */
	width: auto; height: 100%;
	object-fit: cover; object-position: top center;
	border: 1px solid var(--pn-line);
	border-bottom: none;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 14px 34px -16px rgba(36,30,26,.38);
}

.pn-step__n {
	font-family: var(--pn-font);
	font-size: 12px; font-weight: 600; letter-spacing: .14em;
	color: var(--pn-accent); margin: 0 0 8px;
}
.pn-step h3 {
	font-family: var(--pn-font);
	font-size: 19px; font-weight: 700; line-height: 1.45;
	letter-spacing: -0.01em; margin: 0 0 10px;
}
.pn-step p { font-size: 15px; line-height: 1.8; color: var(--pn-ink-soft); margin: 0; }

/* ── 좌우 분할 ───────────────────────────────────────────────── */
.pn-split { display: grid; }
.pn-split--tint { background: var(--pn-tint); }
.pn-split--dark { background: var(--pn-dark); color: var(--pn-on-dark); }
.pn-split--dark .pn-h2 { color: var(--pn-on-dark); }
.pn-split--dark .pn-eyebrow { color: #C8A87C; }
.pn-split--dark .pn-mute { color: #6E635A; }
.pn-split--dark .pn-split__body p { color: var(--pn-on-dark-soft); }
.pn-split--dark .pn-split__body strong { color: var(--pn-on-dark); }

.pn-split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pn-split__body {
	padding: clamp(44px, 8vw, 72px) var(--pn-gap);
	max-width: 620px;
}
.pn-split__body p { font-size: 16px; line-height: 1.85; color: var(--pn-ink-soft); margin: 0 0 16px; }
.pn-split__body p:last-child { margin-bottom: 0; }
.pn-split__body strong { color: var(--pn-ink); font-weight: 700; }

/* ── 소재 섹션 ───────────────────────────────────────────────────
 * 사진이 크고 글이 옆에 붙는다. 가운데 정렬을 여기서 깬다(캐논: 전 섹션 센터 금지). */
.pn-material { background: var(--pn-cream); display: grid; }
.pn-material__media { margin: 0; }
.pn-material__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pn-material__body { padding: clamp(44px, 8vw, 76px) var(--pn-gap); max-width: 620px; }

/* 사양 — 표가 아니라 목록으로. 항목이 4개뿐이라 표는 과하다. */
.pn-spec { margin: 32px 0 0; display: grid; gap: 0; }
.pn-spec > div {
	display: grid; grid-template-columns: 8.5em 1fr; gap: 16px;
	padding: 14px 0; border-top: 1px solid var(--pn-line);
	font-size: 15px;
}
.pn-spec > div:last-child { border-bottom: 1px solid var(--pn-line); }
.pn-spec dt { color: var(--pn-ink-soft); font-weight: 500; margin: 0; }
.pn-spec dd { margin: 0; color: var(--pn-ink); }

/* ── 마무리 CTA ─────────────────────────────────────────────── */
.pn-cta { background: var(--pn-tint); }
.pn-cta__inner {
	max-width: var(--pn-max); margin: 0 auto;
	padding: var(--pn-sect) var(--pn-gap); text-align: center;
}
.pn-cta .pn-lead { margin-bottom: 32px; }

/* ── 데모 안내 (배포 전 제거) ────────────────── */
.pn-demo-note {
	background: #FDF6E6; border-top: 3px solid #E3B84C;
	padding: 20px var(--pn-gap); text-align: center;
}
.pn-demo-note p { margin: 0; font-size: 13px; color: #8F6E1E; max-width: 720px; margin: 0 auto; }

/* ── 태블릿 이상 ───────────────────────────── */
@media (min-width: 768px) {
	/* h1·h2·lead 는 clamp() 로 이미 늘어난다 — 여기서 다시 지정하지 않는다.
	   (두 곳에서 같은 값을 다루면 반드시 한쪽이 낡는다) */
	.pn-hero__media img { aspect-ratio: 16 / 9; }

	.pn-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }

	.pn-split { grid-template-columns: 1fr 1fr; align-items: center; }
	.pn-split__media img { aspect-ratio: 1/1; height: 100%; }
	.pn-split__body { padding: clamp(48px, 5vw, 72px) clamp(32px, 5vw, 64px); }
	.pn-split--reverse .pn-split__media { order: 2; }

	/* 소재 섹션 — 사진을 크게(7:5), 글을 옆에. 분할과 비율을 달리해 리듬을 바꾼다. */
	.pn-material { grid-template-columns: 1.25fr 1fr; align-items: center; }
	.pn-material__media img { aspect-ratio: 1/1; height: 100%; }
	.pn-material__body { padding: clamp(48px, 5vw, 76px) clamp(32px, 5vw, 64px); }
}

@media (min-width: 1024px) {
	/* 3단계는 세로로 긴 카드라, 사이 간격을 벌려야 각각이 하나의 단계로 읽힌다. */
	.pn-steps { gap: 56px; }
	/* 활자 폭 상한 — 한 줄이 길어지면 읽는 눈이 되돌아올 자리를 잃는다. */
	.pn-hero__inner > * { max-width: 46rem; }
	.pn-hero__media img { aspect-ratio: 21 / 9; max-height: 620px; }
}

/* ── 자체 헤더·푸터 (테마 폴백 헤더 대체) ─────────── */
.pn-nav {
	display: flex; align-items: center; justify-content: space-between;
	/* 🔑 배경·테두리는 화면 폭을 다 쓰되, **내용은 본문 컨테이너에 정렬**한다.
	      이전에는 상단바가 48px, 본문이 170px 에서 시작해 로고와 헤드라인이 어긋나 있었다.
	      섹션마다 유사 컨테이너를 만들지 않고(R1) 패딩 계산 한 줄로 맞춘다. */
	padding-block: 18px;
	padding-inline: max(var(--pn-gap), calc((100% - var(--pn-max)) / 2 + var(--pn-gap)));
	border-bottom: 1px solid var(--pn-line);
	font-family: var(--pn-font);
}
/* ── 워드마크 ────────────────────────────────────────────────────
 * 마크(SVG) + 글자. 글자는 세리프 + 넓은 자간 — 맨 폰트 타이핑이 아니라 **조판**이다.
 * 🔴 브랜드명이 확정되면 이 조판도 함께 재검토한다(지금은 가칭). */
.pn-nav__brand {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--pn-ink); text-decoration: none;
}
.pn-wordmark {
	font-family: var(--pn-display);
	font-size: 21px; font-weight: 700; letter-spacing: 0.22em;
	/* 자간을 오른쪽에도 주면 마지막 글자 뒤가 떠 보인다 — 그만큼 당겨 시각 중심을 맞춘다. */
	margin-right: -0.22em;
	line-height: 1;
}
.pn-mark { color: var(--pn-brand); flex: 0 0 auto; }

.pn-nav__links { display: flex; gap: 24px; }
.pn-nav__links a {
	font-family: var(--pn-font);
	font-size: 14px; font-weight: 500; color: var(--pn-ink-soft);
	text-decoration: none; transition: color .15s;
}
.pn-nav__links a:hover { color: var(--pn-ink); }

.pn-foot {
	background: var(--pn-dark); color: var(--pn-on-dark-soft);
	padding: 72px var(--pn-gap); text-align: center; font-family: var(--pn-font);
}
.pn-foot__brand {
	display: inline-flex; align-items: center; gap: 12px;
	color: var(--pn-on-dark); margin: 0 0 24px;
}
.pn-foot__brand .pn-mark { color: var(--pn-on-dark); opacity: .9; }
.pn-foot__brand .pn-wordmark { font-size: 24px; }
.pn-foot__links { display: flex; gap: 22px; justify-content: center; margin: 0 0 20px; }
.pn-foot__links a {
	font-size: 13px; color: var(--pn-on-dark-soft); text-decoration: none;
	transition: color .15s;
}
.pn-foot__links a:hover { color: var(--pn-on-dark); }
.pn-foot__note { font-size: 12px; color: #6F655C; margin: 0; }


/* ═══════════════════════════════════════════════════════════════
 * 공용 레이어 (2026-08-26 추가) — 전 화면이 같은 머리·꼬리·기본형을 쓴다.
 *
 * 여기는 **공용 자원**이다. 화면별 스타일은 각자 파일에 쓴다:
 *   상점 = shop.css / 보호자 화면 = account.css / 콘텐츠 페이지 = pages.css
 * ═══════════════════════════════════════════════════════════════ */

/* ── 테마 머리·꼬리 감추기 ─────────────────────────────────────
 * ⚠️ 넓은 셀렉터로 감추면 우커머스가 만드는 화면까지 같이 죽는다
 *    (아임웹 공통헤더 사고와 같은 계열). **직계 자식으로만** 건다.
 *    우리 `.pn-nav` 는 `.wp-site-blocks` 바깥에 그려지므로 여기 안 걸린다(실측 확인). */
body.pn-skin > .wp-site-blocks > header.wp-block-template-part,
body.pn-skin > .wp-site-blocks > footer.wp-block-template-part { display: none; }

/* 🔴 한글 줄바꿈은 **공개 프로필에도** 걸어야 한다 (2026-09-04).
      D207 에서 "뿌리에 한 번만 건다"고 적었지만 실제 셀렉터가 `body.pn-skin` 이었고,
      공개 프로필의 body 는 `petnfc-public` 이라 규칙이 닿지 않았다 —
      실측 `getComputedStyle(body).wordBreak === "normal"`. 그 결과 404 제목이
      "…잘못된 주소입 / 니다" 로 갈라졌다. **가장 중요한 화면군이 통째로 빠져 있었다.** */
body.pn-skin,
body.petnfc-public {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 테마 본문에 브랜드 타이포를 입힌다 */
body.pn-skin {
	font-family: var(--pn-font);
	color: var(--pn-ink);
	background: var(--pn-bg);
	line-height: 1.7;
	letter-spacing: -0.01em;
	/* 🔴 한글 줄바꿈 — 이게 없으면 브라우저가 **단어 한가운데**를 끊는다.
	      실측(2026-08-31): "이 목줄을 어느 아 / 이에게 연결할까요?" — 한 글자만 넘어가
	      제목이 망가졌다. 그동안 account.css·pet-public.css 에 낱개로 흩어져 있었고
	      브랜드 화면에는 안 걸려 있었다 → 뿌리에 한 번만 건다.
	      overflow-wrap 을 짝으로 두는 이유: keep-all 만 두면 태그코드·URL 처럼
	      공백 없는 긴 문자열이 상자를 뚫고 나간다. */
	word-break: keep-all;
	overflow-wrap: break-word;
}
body.pn-skin > .wp-site-blocks { padding: 0; }

/* ── 본문 기본 틀 ───────────────────────────────────────────── */
.pn-main { min-height: 50vh; }
.pn-main > .pn-wrap,
.pn-wrap {
	box-sizing: border-box;   /* 전역 리셋이 없다 — 폭과 패딩을 함께 쓰는 곳은 반드시 명시 */
	max-width: var(--pn-max); margin: 0 auto;
	padding: clamp(40px, 7vw, 72px) var(--pn-gap) clamp(72px, 10vw, 112px);
}
.pn-wrap--narrow { max-width: 720px; }

/* 화면 제목 — 각 화면의 유일한 h1.
 *
 * 🔑 목소리를 가른다: 브랜드가 말하는 화면(스토리·접종안내·FAQ·약관)은 **세리프**,
 *    도구가 말하는 화면(마이페이지·반려동물·주문내역·탈퇴·비밀번호)은 **산세리프**.
 *    한 벌로 다 하면 브랜드 화면은 밋밋하고 도구 화면은 과하게 꾸며진다.
 *    기본값은 산세리프이고, 브랜드 화면에서 `.pn-page-title--brand` 로 올린다. */
.pn-page-title {
	font-family: var(--pn-font);
	font-size: clamp(24px, 4.6vw, 30px); font-weight: 700;
	line-height: 1.35; letter-spacing: -0.015em; margin: 0 0 10px;
	text-wrap: balance;
}
.pn-page-title--brand {
	font-family: var(--pn-display);
	font-size: clamp(30px, 6vw, 44px); font-weight: 700;
	line-height: 1.28; letter-spacing: -0.02em;
}
.pn-page-desc { font-size: 15px; line-height: 1.8; color: var(--pn-ink-soft); margin: 0 0 40px; max-width: 34em; }

/* ── 카드·폼·버튼 기본형 (화면별 파일이 이걸 조합해 쓴다) ──────── */
/* 카드 — 테두리 하나로 끝낸다. 그림자를 얹으면 카드가 3개만 겹쳐도 화면이 지저분해진다. */
.pn-card {
	border: 1px solid var(--pn-line); border-radius: 4px;
	background: var(--pn-bg); padding: clamp(22px, 4vw, 30px) clamp(20px, 3.5vw, 28px);
}
.pn-card + .pn-card { margin-top: 20px; }
/* 카드 안의 소제목 — 카드 제목은 도구 목소리다. */
.pn-h2 + .pn-card, .pn-card .pn-h2 { }
.pn-card > h2, .pn-card > .pn-h2 {
	font-family: var(--pn-font);
	font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
	margin: 0 0 18px;
}

.pn-field { margin: 0 0 22px; }
.pn-field > label {
	display: block; font-size: 13px; font-weight: 600;
	color: var(--pn-ink); margin: 0 0 8px; letter-spacing: -0.005em;
}
.pn-field__hint { font-size: 12.5px; line-height: 1.7; color: var(--pn-ink-soft); margin: 8px 0 0; }

.pn-main input[type="text"], .pn-main input[type="email"], .pn-main input[type="tel"],
.pn-main input[type="password"], .pn-main input[type="url"], .pn-main input[type="date"],
.pn-main input[type="number"], .pn-main select, .pn-main textarea,
body.pn-skin .wp-site-blocks input[type="text"], body.pn-skin .wp-site-blocks input[type="email"],
body.pn-skin .wp-site-blocks input[type="tel"], body.pn-skin .wp-site-blocks input[type="password"],
body.pn-skin .wp-site-blocks select, body.pn-skin .wp-site-blocks textarea {
	width: 100%; box-sizing: border-box;
	min-height: 48px;                 /* 엄지로 누르는 화면 — 44px 하한 위로 */
	padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--pn-ink);
	border: 1px solid var(--pn-line); border-radius: 3px; background: #fff;
	transition: border-color .15s, box-shadow .15s;
}
.pn-main input:focus, .pn-main select:focus, .pn-main textarea:focus,
body.pn-skin .wp-site-blocks input:focus, body.pn-skin .wp-site-blocks textarea:focus {
	/* 🔴 outline:none 만 두면 키보드 사용자가 지금 어디 있는지 알 수 없다.
	      테두리 색만 바꾸는 것으로는 약해서 링을 하나 더 얹는다. */
	outline: none;
	border-color: var(--pn-brand);
	box-shadow: 0 0 0 3px rgba(91,58,41,.12);
}
.pn-main textarea { min-height: 120px; resize: vertical; }

/* 버튼 — .pn-btn 과 --primary/--ghost 는 위(§공통 요소)에서 정의된다.
   🔴 여기서 --ghost 를 다시 선언하고 있었다: 같은 요소를 한 파일 안에서 두 번 다루면
      특이성이 같아 소스 순서로 뒤집히고, 나중에 위쪽만 고치면 조용히 안 먹는다. 변형만 남긴다. */
.pn-btn--danger { background: #B3261E; color: #fff; }
.pn-btn--sm { padding: 9px 18px; font-size: 13px; }
.pn-btn[disabled], .pn-btn--disabled { opacity: .45; pointer-events: none; }

/* 알림 상자 */
.pn-alert { border-radius: 3px; padding: 14px 16px; font-size: 14px; margin: 0 0 20px; }
.pn-alert--ok   { background: #EDF6EF; color: #1E5B2E; border-left: 3px solid #2E7D3E; }
.pn-alert--warn { background: #FDF6E6; color: #7A5C10; border-left: 3px solid #E3B84C; }
.pn-alert--err  { background: #FCEDEC; color: #8C1D18; border-left: 3px solid #B3261E; }

/* 비어 있는 상태 — 실제 사용자의 상당수가 여기를 먼저 만난다. 여백을 아끼지 않는다. */
.pn-empty { text-align: center; padding: clamp(56px, 9vw, 84px) 20px; color: var(--pn-ink-soft); }
.pn-empty h2 {
	font-size: 19px; font-weight: 700; color: var(--pn-ink);
	margin: 0 0 10px; letter-spacing: -0.01em; text-wrap: balance;
}
.pn-empty p { font-size: 15px; line-height: 1.8; margin: 0 auto 26px; max-width: 26em; }

/* 표 — 숫자가 세로로 줄 맞게 tabular-nums. 주문번호·금액이 흔들리면 표로 안 읽힌다. */
.pn-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pn-table th, .pn-table td { padding: 15px 12px; border-bottom: 1px solid var(--pn-line); text-align: left; }
.pn-table th {
	font-size: 12px; font-weight: 600; color: var(--pn-ink-soft);
	letter-spacing: .06em; white-space: nowrap;
}
.pn-table tbody tr:last-child td { border-bottom: none; }

/* 뱃지 */
.pn-badge {
	display: inline-block; padding: 5px 10px; border-radius: 2px;
	font-size: 11.5px; font-weight: 600; letter-spacing: .03em; line-height: 1.4;
	background: var(--pn-tint); color: var(--pn-accent);
}
.pn-badge--live { background: #FCEDEC; color: #B3261E; }

/* 현재 위치 표시 */
.pn-nav__links a[aria-current="page"] { color: var(--pn-ink); text-decoration: underline; text-underline-offset: 5px; }

@media (min-width: 768px) {
	.pn-page-title { font-size: 32px; }
	.pn-wrap { padding: 64px 48px 96px; }
}

/* ── 모바일 상단 메뉴 (2026-08-26) ────────────────────────────
 * 항목이 5개로 늘자 375px 에서 **글자 중간이 잘렸다**("제/품", "브랜드 스토/리").
 * 한 줄에 우겨넣는 대신 브랜드와 메뉴를 위아래로 나누고,
 * 메뉴는 가로로 밀어서 보는 줄로 만든다. 항목이 더 늘어도 안 깨진다.
 * 🔴 `overflow-x` 는 메뉴 줄 안에서만 — 페이지 본문이 가로로 밀리면 안 된다. */
.pn-nav__links a { white-space: nowrap; }

@media (max-width: 767px) {
	.pn-nav {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px 0 0;   /* 좌우 패딩은 자식이 각자 준다(메뉴 줄이 화면 끝까지 밀려야 해서) */
	}
	.pn-nav__brand { padding: 0 var(--pn-gap); }
	.pn-nav__links {
		gap: 20px;
		padding: 0 var(--pn-gap) 12px;
		overflow-x: auto;
		scrollbar-width: none;          /* 파이어폭스 */
		-webkit-overflow-scrolling: touch;
	}
	.pn-nav__links::-webkit-scrollbar { display: none; }   /* 사파리·크롬 */
}

/* 단계선 — 지금 어디쯤인지. 큰 번호 배지는 쓰지 않는다(R5: 브루탈 시그니처는 F·H 전용).
   숫자는 작게, 단계 이름이 읽히게. */
.pn-stepline {
	font-family: var(--pn-font);
	font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
	color: var(--pn-ink-mute); margin: 0 0 14px;
}
.pn-stepline__n { color: var(--pn-accent); margin-right: 8px; }
.pn-stepnext { font-size: 12.5px; color: var(--pn-ink-mute); margin: 12px 0 0; text-align: center; }

/* 풀폭 버튼 — 폼 마지막 행동. 인라인 버튼과 달리 좌우를 다 쓴다. */
.pn-btn--block { display: flex; width: 100%; justify-content: center; }

/* ── 태그 등록(claim) — 태깅 직후 첫 화면 ─────────────────────────────── */
.petnfc-claim-confirm { max-width: 480px; }
.petnfc-claim-code {
	display: inline-block; margin: 4px 0 20px; padding: 6px 12px;
	border: 1px solid var(--pn-line); border-radius: 8px; background: var(--pn-tint);
	font-size: 13px; letter-spacing: 0.04em; color: var(--pn-ink-soft);
}
.petnfc-claim-form .pn-btn { width: 100%; text-align: center; }

/* 동의 체크박스 — input 이 label 밖에 있으므로(이중 토글 방지) 정렬을 여기서 잡는다. */
.petnfc-signup-consent,
.petnfc-consent-box > label { display: block; }
/* 주문서 동의도 가입 동의와 **같은 컴포넌트**를 쓴다 — 같은 성격의 필수 동의가
   화면마다 다르게 생기면 사용자가 둘을 다른 것으로 읽는다. */
.petnfc-signup-consent,
.petnfc-order-consent { display: flex; align-items: flex-start; gap: 9px; }
.petnfc-consent-box { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
.petnfc-consent-box > label { flex: 1 1 14em; min-width: 0; }
.petnfc-consent-box > small { flex: 1 1 100%; display: block; margin-top: 8px; opacity: .85; }
.petnfc-signup-consent input[type="checkbox"],
.petnfc-order-consent input[type="checkbox"],
.petnfc-consent-box input[type="checkbox"] {
	flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--pn-brand);
}
.petnfc-signup-consent label,
.petnfc-order-consent label,
.petnfc-consent-box label { cursor: pointer; line-height: 1.6; }
/* 우커머스 결제박스가 안쪽 글자를 굵게 만든다 — 동의문은 본문 무게로 되돌린다. */
.petnfc-order-consent { margin: 0 0 14px; font-weight: 400; }
.petnfc-order-consent label { font-weight: 400; font-size: 14px; }

/* ── 🔴 회원가입 폼의 탭 삼킴 방지 ───────────────────────────────────
 * 실측(2026-08-27): 우커머스의 비밀번호 강도 표시기는 **포커스를 잃을 때** 삽입된다.
 * 그 순간 비밀번호 행이 103px → 140px 로 커지면서 아래 내용이 37px 밀려 내려간다.
 * 사용자가 비밀번호를 입력한 뒤 바로 아래 "동의" 체크박스를 누르면
 *   mousedown(체크박스) → 비밀번호 blur → 표시기 삽입 → 레이아웃 이동 → mouseup(다른 요소)
 * 가 되어 **클릭 이벤트가 아예 발생하지 않는다.** 눌렀는데 아무 일도 안 일어난다.
 *
 * 표시기가 들어올 자리를 미리 비워 두면 이동 자체가 없어진다.
 * (`:has()` 미지원 브라우저에서는 예전 동작으로 남는다 — 그래도 지금보다 나빠지지 않는다)
 * ─────────────────────────────────────────────────────────────── */
.woocommerce-form-register .form-row:has(#reg_password) { min-height: 140px; }

/* ── 목줄 연결 선택 (claim) ─────────────────────────────────────────
   radio 를 label 밖에 두는 것은 동의 체크박스와 같은 이유다(이중 토글 방지). */
.petnfc-claim-choices { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.petnfc-claim-choices li {
	display: flex; align-items: center; gap: 14px;
	border: 1px solid var(--pn-line); border-radius: 4px; padding: 16px 18px;
	transition: border-color .15s, background-color .15s;
}
.petnfc-claim-choices li:has(input:checked) { border-color: var(--pn-brand); background: var(--pn-tint); }
.petnfc-claim-choices input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--pn-brand); }
.petnfc-claim-choices label { flex: 1 1 auto; min-width: 0; cursor: pointer; display: block; }
.petnfc-claim-choices strong { display: block; font-size: 16px; font-weight: 600; }
.petnfc-claim-choices small { display: block; font-size: 13px; color: var(--pn-ink-soft); margin-top: 3px; }

/* ── 상단 메뉴 그룹(INFO ▾) (2026-09-16 D273) ───────────────────────────
   768px 이상: <details> 를 드롭다운으로. 미만: 가로 스크롤 줄 안에 하위 항목을 그대로 흘린다
   (overflow-x:auto 컨테이너 안의 absolute 는 잘린다 — 그래서 모바일은 펼쳐 둔다). */
.pn-nav__group { position: relative; }
.pn-nav__group summary { list-style: none; cursor: pointer; font-family: var(--pn-font); font-size: 14px; font-weight: 500; color: var(--pn-ink-soft); white-space: nowrap; }
.pn-nav__group summary::-webkit-details-marker { display: none; }
.pn-nav__group summary::after { content: ' ▾'; font-size: 11px; }
.pn-nav__group[data-current="1"] summary, .pn-nav__group[open] summary { color: var(--pn-ink); }
.pn-nav__group ul { list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
	.pn-nav__group ul {
		position: absolute; top: calc(100% + 10px); left: -14px; min-width: 160px; z-index: 30;
		background: #fff; border: 1px solid var(--pn-line); border-radius: 3px; padding: 8px 0;
		box-shadow: 0 8px 24px rgba(0,0,0,.08);
	}
	.pn-nav__group ul a { display: block; padding: 9px 16px; }
}
@media (max-width: 767px) {
	/* <details> 의 자식은 섀도 슬롯 안에 그려져 바깥 flex 의 gap 이 안 닿는다(실측: 항목이 붙어 나옴)
	   → 간격은 ul 에서 직접 준다. */
	.pn-nav__group { display: contents; }
	.pn-nav__group ul { display: flex; align-items: center; gap: 20px; }
	.pn-nav__group li { display: contents; }
	.pn-nav__group.is-flat summary { display: none; } /* 스크립트가 열어 둔 뒤에만 숨긴다 — 없으면 INFO 를 눌러 펼친다 */
}