/* =====================================================================
   layout.css — reset + 전역 변수
   전 페이지 공통. 페이지별 디자인 CSS 는 각 페이지 HTML 의 <link> 로 별도 참조.

   금강보청기 광주첨단센터 — 2026-08 리뉴얼
   색 출처: 기존 로고 /imgs/logo.png 픽셀 실측 (GetPixel 집계 상위색)
     #150A50 486px  워드마크 네이비   → --color-navy 계열
     #2C77BC  51px  심볼 블루         → --color-primary
     #96CB63  36px  심볼 그린         → --color-accent
   ※ 고령층(난청)이 주 사용자다. 본문 16px 이상·행간 1.7·대비 4.5:1 이상 유지할 것.
     회색 위 회색 텍스트를 쓰지 않는다.
   ===================================================================== */

:root {
	/* --- 브랜드 색상 (로고 실측) --- */
	--color-primary: #2c77bc;        /* 로고 심볼 블루 — CTA·강조 */
	--color-primary-dark: #245f96;   /* 버튼 hover (primary -20% L) */
	--color-primary-deep: #150a50;   /* 로고 워드마크 네이비 — 진한 섹션 배경 */
	--color-accent: #96cb63;         /* 로고 심볼 그린 — eyebrow·포인트 */
	--color-accent-dark: #6fa441;    /* 그린 위 텍스트가 필요할 때(대비 확보용) */
	--color-kakao: #fae100;          /* 카카오 옐로 */
	--color-kakao-text: #3c1e1e;     /* 카카오 버튼 텍스트 */

	/* --- 텍스트 --- */
	--color-text: #1a1e2c;           /* 본문 (네이비 기운의 먹) */
	--color-text-sub: #5b6270;       /* 보조 텍스트 */
	--color-text-mute: #8b909c;      /* 흐린 텍스트 */
	--color-text-on-dark: #ffffff;
	--color-text-on-dark-sub: #b9bccb;
	--color-text-on-dark-mute: #8a8ea0;

	/* --- 배경 --- */
	--color-bg: #ffffff;
	--color-bg-cream: #f3f7fb;       /* 헤더/히어로 — 블루 기운의 아주 옅은 톤 */
	--color-bg-cream-2: #e8eff7;     /* 섹션 교차 배경 */
	--color-bg-card: #fbfdff;        /* 섹션 배경용 오프화이트 */
	--color-bg-card-solid: #ffffff;  /* 카드 흰색 */
	--color-bg-dark: #171b2e;        /* 푸터 다크 (네이비 계열) */
	--color-bg-dark-2: #121626;
	--color-bg-dark-3: #0f1220;      /* 푸터 최하단 CTA 바 */

	/* --- 선 --- */
	--color-line: #d5dee8;
	--color-line-2: #e3ebf3;
	--color-line-dark: rgba(255, 255, 255, .1);

	/* --- 타이포 --- */
	/* ★ "Pretendard Variable" 을 맨 앞에 둔다.
	   CDN(00-site-assets.php 에서 enqueue)이 등록하는 이름이 그것이다.
	   순서를 바꿔 "Pretendard" 를 앞에 두면, 그 이름으로 로드된 폰트가 없어
	   방문자 PC 에 Pretendard 가 설치된 경우에만 적용되는 상태로 되돌아간다
	   (2026-08-20 이전 상태가 정확히 그랬다). 순서를 건드리지 말 것.
	   뒤의 "Pretendard" 는 로컬 설치본을 쓰는 사람을 위한 것이다. */
	--font-base: "Pretendard Variable", "Pretendard", "Noto Sans KR", system-ui, -apple-system, sans-serif;
	/* 고령 사용자 배려 + 2026-08 요청("글씨 10~25% 확대") → 17px → 19px (+11.8%) */
	--fs-base: 19px;
	--lh-base: 1.75;

	/* --- 레이아웃 ---
	   1120px 은 와이드 모니터에서 답답해 보인다는 지적 → 1400px 로 넓힌다.
	   좌우 여백도 함께 키워야 넓어진 만큼 가장자리가 빡빡해 보이지 않는다. */
	--container: 1400px;
	--gutter: 32px;
	--header-h: 72px;
}

/* =====================================================================
   Pretendard 웹폰트는 여기서 @import 하지 않는다.

   ★ 폰트 CSS 는 00-site-assets.php 에서 wp_enqueue_style('pretendard') 로
     불러온다. @import 를 쓰지 않는 이유(성능):
       @import 는 브라우저가 layout.css 를 먼저 받아 "파싱한 뒤" 발견하므로
       폰트 요청이 한 단계 늦어진다(요청 사슬이 직렬로 길어진다).
       <link> 로 내보내면 HTML 파싱 즉시 병렬로 받기 시작한다.

   ★ 폰트를 반드시 로드해야 한다 (2026-08-20 실측으로 겪은 것):
     --font-base 에 이름만 적어두고 폰트를 받아오는 코드가 없으면,
     Pretendard 가 설치된 작업자 PC 에서는 정상으로 보이지만 일반 방문자는
     Noto Sans KR 이나 시스템 기본 글꼴로 본다. 자폭이 달라 줄바꿈까지 어긋난다.
     → 스크린샷으로는 발견되지 않는다. document.fonts 로 실측할 것.
   ===================================================================== */

/* --- reset (요약형) --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-bg);
	/* 한글은 어절 단위 줄바꿈(keep-all)이 자연스럽지만, 긴 어절이 뷰포트를 밀어내
	   가로 스크롤을 만들 수 있다 → overflow-wrap 으로 최후 방어. */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 페이지 전체가 가로로 밀리는 것 원천 차단 (모바일에서 자주 발생)
   ★ hidden 이 아니라 clip 을 쓴다 (실측으로 확인한 이유):
     overflow-x:hidden 은 그 요소를 "스크롤 컨테이너" 로 만든다. 그러면
     position:sticky 가 뷰포트가 아니라 그 컨테이너 기준으로 붙어 헤더가
     스크롤과 함께 사라진다(실측: scrollY 5899 일 때 헤더 rectTop -5899).
     clip 은 넘침만 잘라내고 스크롤 컨테이너를 만들지 않아 sticky 가 살아있다.
     (Chrome 90+/Firefox 81+/Safari 16+ 지원. 미지원 브라우저는 넘침이 보일 뿐
      레이아웃이 깨지지는 않는다) */
html, body { max-width: 100%; overflow-x: clip; }
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* --- 공통 컨테이너 --- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* --- 섹션 공통 (시안 실측: 상하 104px) --- */
.section { padding: 104px 0; }
.section--tight { padding: 72px 0; }
@media (max-width: 900px) {
	.section { padding: 72px 0; }
	.section--tight { padding: 56px 0; }
}
@media (max-width: 560px) {
	.section { padding: 56px 0; }
}

/* --- eyebrow — 2026-08 확대 요청 반영 (12 → 14px, +16.7%) --- */
.eyebrow {
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--color-primary);
}
.eyebrow--gold { color: var(--color-accent); }

/* --- 섹션 타이틀 (40 → 50px, +25%) --- */
.sec-title {
	margin-top: 18px;
	font-size: 50px;
	line-height: 66px;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: -.025em;
}
.sec-title .em { color: var(--color-primary); }
/* 섹션 설명 (16.8 → 19.5px, +16%) */
.sec-desc {
	margin-top: 22px;
	font-size: 19.5px;
	line-height: 34px;
	color: var(--color-text-sub);
}
@media (max-width: 1100px) {
	.sec-title { font-size: 42px; line-height: 56px; }
}
@media (max-width: 900px) {
	.sec-title { font-size: 36px; line-height: 48px; }
	.sec-desc { font-size: 17.5px; line-height: 30px; }
}
@media (max-width: 560px) {
	.sec-title { font-size: 30px; line-height: 42px; }
	.sec-desc { font-size: 16.5px; line-height: 28px; }
}

/* --- 버튼 --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
	background: var(--color-primary);
	color: #fff;
	/* 14.4 → 17px (+18%). 탭 영역도 함께 커진다 */
	padding: 15px 32px;
	font-size: 17px;
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--kakao {
	background: var(--color-kakao);
	color: var(--color-kakao-text);
	padding: 15px 30px;
	font-size: 15px;
}
.btn--kakao:hover { filter: brightness(.96); }
.btn--gold {
	background: var(--color-accent);
	color: #1b2620;
	padding: 15px 30px;
	font-size: 15px;
}
.btn--gold:hover { filter: brightness(.96); }

/* 다크 섹션 위 텍스트 */
.on-dark { color: var(--color-text-on-dark); }
.on-dark .sec-title { color: var(--color-text-on-dark); }
.on-dark .sec-desc { color: var(--color-text-on-dark-sub); }

/* 면책 문구 (※ 로 시작하는 작은 회색 텍스트) */
/* 시안 실측 — 면책문구 3곳(Stats·Reviews·Fee) 모두 동일: 13.6px / lh 23.12 / #6a7065 / pt 26 */
.disclaimer {
	margin-top: 26px;
	font-size: 13.6px;
	line-height: 23.12px;
	color: var(--color-text-sub);
}
.on-dark .disclaimer { color: var(--color-text-on-dark-mute); }

/* 접근성: 키보드 포커스 링 */
:where(a, button, input, textarea, select):focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.on-dark :where(a, button, input, textarea, select):focus-visible,
.site-footer :where(a, button):focus-visible {
	outline-color: var(--color-accent);
}

/* 스크린리더 전용 */
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- 스크롤 리빌 공통 (common.js 의 IntersectionObserver 와 연동) ---
   ★ 중요: 숨김(opacity:0)은 **JS 가 살아있을 때만** 적용한다.
   `html.js` 클래스는 00-site-assets.php 가 <head> 최상단에서 즉시 부여한다.
   JS 오류·차단·느린 로딩 시에도 본문이 영구히 안 보이는 사고를 원천 차단.  */
html.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	/* .7s + 이동거리 40px 은 "컨텐츠가 늦게 보인다" 는 체감으로 이어졌다.
	   등장 자체를 없애지 않으면서 반응이 빠르게 느껴지도록 .42s / 24px 로 줄인다. */
	transition: opacity .42s ease-out, transform .42s ease-out;
}
html.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}