/* ══════════════════════════════════════
   범용 콘텐츠 페이지 (개인정보처리방침/이용약관 등 서술형 문서 포함)
══════════════════════════════════════ */

/* ── 공용 페이지 히어로 (components/page-hero.php) ── */
.page-hero {
	background: var(--hyoo-bg-soft);
	padding: 56px 20px 48px;
	border-bottom: 1px solid var(--hyoo-border);
}

.page-hero__inner {
	max-width: 1180px;
	margin: 0 auto;
}

.page-hero__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--hyoo-accent-dark);
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.page-hero__title {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.8px;
	margin: 0 0 10px;
	word-break: keep-all;
}

.page-hero__sub {
	font-size: 14px;
	color: var(--hyoo-text-muted);
	letter-spacing: -0.3px;
	margin: 0;
	word-break: keep-all;
}

@media (max-width: 768px) {
	.page-hero {
		padding: 40px 20px 36px;
	}
}

@media (max-width: 360px) {
	.page-hero {
		padding: 32px 16px 28px;
	}
}

/* 사이트 전체 컨테이너 폭 기준(main.css/footer.css/components.css)과 통일 — 860px는
   본문만 좁아 보여 헤더/푸터와 폭이 안 맞는 느낌을 줬음 */
.page-content {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 20px 80px;
}

/* 제목/본문 둘 다 .page-content(1180px)와 동일한 폭 */

.page-content__head {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--hyoo-text);
}

/* functions.php에 add_theme_support('align-wide')는 선언돼 있는데 이 폭을 실제로
   넓혀주는 CSS가 없으면 비주얼 에디터에서 "전체너비"로 지정한 블록(이미지 등)이 본문
   폭(1180px)에 그대로 눌려서 나옴 — 뷰포트 기준으로 강제로 빠져나오게 처리 */
.page-content__body .alignwide {
	max-width: 1140px;
	width: 100vw;
	margin-top: 24px;
	margin-bottom: 24px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.page-content__body .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-top: 24px;
	margin-bottom: 24px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.page-content__body .alignleft {
	float: left;
	margin: 0.4em 1.5em 0.8em 0;
}

.page-content__body .alignright {
	float: right;
	margin: 0.4em 0 0.8em 1.5em;
}

.page-content__body .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.page-content__title {
	font-size: 28px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.6px;
	word-break: keep-all;
}

.page-content__body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--hyoo-text);
	word-break: keep-all;
}

.page-content__body h2 {
	font-size: 19px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.4px;
	margin: 40px 0 14px;
}

.page-content__body h2:first-child {
	margin-top: 0;
}

.page-content__body h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.3px;
	margin: 24px 0 10px;
}

/* h2/h3만 쓸 걸 예상하고 만들었는데, 비주얼 에디터에서 자유롭게 블록을 넣으면
   h1/h4~h6, 인용구, 이미지, 버튼 등도 나올 수 있어 전부 대응 */
.page-content__body h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.5px;
	margin: 40px 0 14px;
	word-break: keep-all;
}

.page-content__body h1:first-child {
	margin-top: 0;
}

.page-content__body h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--hyoo-text);
	letter-spacing: -0.2px;
	margin: 20px 0 8px;
}

.page-content__body h5,
.page-content__body h6 {
	font-size: 14px;
	font-weight: 700;
	color: var(--hyoo-text-muted);
	margin: 16px 0 8px;
}

.page-content__body blockquote {
	margin: 0 0 20px;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--hyoo-accent-muted);
	color: var(--hyoo-text-muted);
	font-style: normal;
}

.page-content__body blockquote p:last-child {
	margin-bottom: 0;
}

.page-content__body blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: var(--hyoo-text-soft);
	font-style: normal;
}

.page-content__body figure {
	margin: 0 0 20px;
}

.page-content__body figure img {
	border-radius: 8px;
}

.page-content__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--hyoo-text-soft);
	text-align: center;
}

.page-content__body pre,
.page-content__body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	background: var(--hyoo-bg-soft);
	border-radius: 4px;
}

.page-content__body code {
	padding: 2px 6px;
}

.page-content__body pre {
	padding: 16px;
	overflow-x: auto;
	line-height: 1.6;
	margin: 0 0 20px;
}

.page-content__body pre code {
	background: none;
	padding: 0;
}

.page-content__body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	background: var(--hyoo-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: 50px;
	transition: background 0.2s;
}

.page-content__body .wp-block-button__link:hover {
	background: var(--hyoo-accent-dark);
}

.page-content__body .is-style-outline .wp-block-button__link {
	background: none;
	color: var(--hyoo-accent);
	border: 1.5px solid var(--hyoo-accent);
}

.page-content__body p {
	margin: 0 0 16px;
	color: var(--hyoo-text-muted);
}

.page-content__body strong {
	color: var(--hyoo-text);
	font-weight: 700;
}

.page-content__body a {
	color: var(--hyoo-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.page-content__body a:hover {
	color: var(--hyoo-accent-dark);
}

.page-content__body ul,
.page-content__body ol {
	margin: 0 0 16px;
	padding-left: 22px;
	color: var(--hyoo-text-muted);
}

.page-content__body li {
	margin-bottom: 6px;
}

.page-content__body li > ul,
.page-content__body li > ol {
	margin-top: 6px;
	margin-bottom: 0;
}

/* 보유기간 표처럼 표 형태 정보가 들어갈 수 있어 가로 스크롤로 안전하게 처리 */
.page-content__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 14px;
}

.page-content__body .table-scroll {
	overflow-x: auto;
	margin: 0 0 20px;
}

/* 구텐베르크 표 블록은 <figure class="wp-block-table"><table>...</table></figure>로
   한 번 더 감싸서 나옴 — figure 기본 여백 제거하고 가로 스크롤 처리 */
.page-content__body .wp-block-table {
	margin: 0 0 20px;
	overflow-x: auto;
}

.page-content__body .wp-block-table table {
	margin: 0;
}

.page-content__body th,
.page-content__body td {
	border: 1px solid var(--hyoo-border);
	padding: 10px 14px;
	text-align: left;
	white-space: nowrap;
}

.page-content__body th {
	background: var(--hyoo-bg-soft);
	font-weight: 700;
	color: var(--hyoo-text);
}

.page-content__body hr {
	border: none;
	border-top: 1px solid var(--hyoo-border);
	margin: 32px 0;
}

@media (max-width: 480px) {
	.page-content {
		padding: 40px 20px 56px;
	}

	.page-content__title {
		font-size: 22px;
	}

	.page-content__body h2 {
		font-size: 17px;
		margin: 32px 0 12px;
	}
}

@media (max-width: 360px) {
	.page-content {
		padding: 32px 16px 48px;
	}

	.page-content__body {
		font-size: 14px;
	}

	.page-content__body th,
	.page-content__body td {
		padding: 8px 10px;
		font-size: 13px;
	}
}