/* 약관·정책 페이지 보조 스타일
   - 카드 외관·간격은 form-section / form-article / form-header / form-group 디자인 시스템 그대로 사용.
   - 본 파일은 (1) audience 라벨, (2) 탭 nav, (3) policy body 본문 가독성 만 정의.
*/

.policy-doc-shell {
	display: block;
}

.policy-doc-loading {
	margin: 0 0 1rem;
	color: var(--blue-gray-500, #64748b);
	padding: 0 1.5rem;
}

.policy-doc[data-policy-load-state="ok"] .policy-doc-loading,
.policy-doc[data-policy-load-state="empty"] .policy-doc-loading,
.policy-doc[data-policy-load-state="error"] .policy-doc-loading {
	display: none;
}

.policy-doc-shell[data-policy-load-state="ok"] .policy-doc-loading,
.policy-doc-shell[data-policy-load-state="empty"] .policy-doc-loading,
.policy-doc-shell[data-policy-load-state="error"] .policy-doc-loading {
	display: none;
}

.policy-doc-banner {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	font-size: 0.875rem;
}

.policy-doc-banner--error {
	background: #fff4f0;
	border: 1px solid #f0c4b8;
	color: #8a2f1f;
}

/* 타이틀 옆 audience 라벨 (공급기업) / (수요 사용자) */
.policy-doc-audience {
	margin-left: 0.35rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--blue-gray-500, #64748b);
}

/* 탭 nav: form-group 안에 들어가는 둥근 pill 버튼 두 개.
   form-group 의 flex-direction: column 을 명시적으로 row 로 덮어쓴다. 모바일에서도 동일 가로 정렬. */
.policy-doc-tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
}

.policy-doc-tab {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	border: 1px solid var(--blue-gray-200, #e2e8f0);
	background: #fff;
	color: var(--blue-gray-800, #1e293b);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.policy-doc-tab:hover {
	border-color: var(--color-primary, #4f46e5);
	color: var(--color-primary, #4f46e5);
}

.policy-doc-tab.is-active,
.policy-doc-tab[aria-current="true"] {
	background: var(--color-primary, #4f46e5);
	border-color: var(--color-primary, #4f46e5);
	color: #fff;
}

/* form-header-title-sub 의 시행·버전 표시 */
.policy-doc-version:empty {
	display: none;
}

/* PolicyRevisions.content_html 본문 가독성 */
.policy-doc-body {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--blue-gray-800, #1e293b);
	overflow-wrap: anywhere;
}

.policy-doc-body p {
	margin: 0 0 0.85rem;
}

.policy-doc-body h1,
.policy-doc-body h2,
.policy-doc-body h3 {
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 1.5rem 0 0.5rem;
	color: var(--blue-gray-900, #0f172a);
}

.policy-doc-body h1:first-child,
.policy-doc-body h2:first-child,
.policy-doc-body h3:first-child {
	margin-top: 0;
}

.policy-doc-body ul,
.policy-doc-body ol {
	margin: 0 0 0.85rem;
	padding-left: 1.25rem;
}

.policy-doc-body li {
	margin: 0.15rem 0;
}

.policy-doc-body strong {
	font-weight: 600;
}

/* anchor scroll target 보정: 상단 헤더(simple layout 의 page-header) 가려지지 않게 */
#terms,
#privacy {
	scroll-margin-top: 1.5rem;
}

/* form-section 의 display:flex 가 [hidden] 의 기본 display:none 을 덮어쓰므로 명시적으로 잡는다.
   탭 = 한 번에 한 섹션만 노출이라 핵심. */
.form-section[data-policy-section][hidden] {
	display: none;
}