/* pages.css — 정적 페이지 4종(인사말·사업영역·오시는길·서비스) 전용 스타일.
   토큰은 labs.css :root(docs/04 §2)를 참조하되, 병행 개발 중에도 렌더되도록 var() 폴백 병기.
   전 클래스 pg- 접두어 — labs.css 공용 클래스와 충돌 금지. 그라데이션 금지·네이비+검정 램프만. */

/* ── 레이아웃 골격 ── */
.pg-main { background: var(--bg, #ffffff); }
.pg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}
.pg-container-narrow { max-width: 820px; }

/* ── 빵부스러기 (docs/03 §6-1) ── */
.pg-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 14px;
    color: var(--ink-500, #6b7280);
}
.pg-breadcrumb li + li::before {
    content: "\203A"; /* › */
    margin-right: 4px;
    color: var(--primary-300, #9aa1d0);
}
.pg-breadcrumb a {
    color: var(--ink-500, #6b7280);
    text-decoration: none;
}
.pg-breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--primary-600, #1c2a8a); }
.pg-breadcrumb [aria-current="page"] { color: var(--ink-900, #000000); }

/* ── 페이지 헤더 ── */
.pg-header { margin-bottom: 48px; }
.pg-title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink-900, #000000);
}
.pg-tagline {
    margin: 12px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink-900, #000000);
}
.pg-lead {
    margin: 16px 0 0;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-700, #3a3a3a);
    /* 두세 줄짜리 리드에서 마지막 줄에 한 어절만 떨어지는 것을 막는다(미지원 브라우저는 무시) */
    text-wrap: balance;
}

/* ── 섹션 공통 ── */
.pg-section { margin-bottom: 48px; }
.pg-section-title {
    margin: 0 0 16px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--ink-900, #000000);
}

/* ── 본문 프로즈 — 페이지 헤더 라인과 같은 폭 체계(좌측 협폭 몰림 방지, 2026-08-04 지시) ── */
.pg-prose { max-width: 900px; }
.pg-prose p {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink-700, #3a3a3a);
}
.pg-caption {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-500, #6b7280);
}

/* ── 인사말: 대표 사진 대형 영역 — 다른 페이지 밴드 카드처럼 컨테이너 전체 폭(2026-08-04 지시).
   실사진은 배너형 크롭(max-height + cover)으로 폭 대비 과도한 세로 확장을 막는다 ── */
/* ⚠️ 2026-08-05 — 대표 사진·CEO 메시지 블록이 화면에서 제거되어 아래 .pg-photo* / .pg-notice* /
   .pg-prose 는 현재 어떤 템플릿도 쓰지 않는다. 원고·사진 확정 시 블록과 함께 되살릴 수 있게 보존. */
.pg-photo { margin: 0; }
.pg-photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-photo-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    background: var(--bg-soft, #f2f3fa);
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-photo-pending p { margin: 0; font-size: 16px; color: var(--ink-700, #3a3a3a); }

/* ── 인사말(2026-08-05 리디자인) — 중앙 1열 스테이트먼트 + 편지형 본문 + 서명.
   근거(ui-ux-pro-max): 미니멀 단일 컬럼(대형 타이포 + 넉넉한 여백 + 시선 분산 없음),
   스테이트먼트:본문 크기비 ≈ 2:1 위계, 본문 줄 길이 65~75자(열 680px). 팔레트 준수 —
   네이비는 오버라인 룰(채움) 한 곳, 글자는 전부 검정 램프. 구 .pg-vision(좌측 보더)은 대체·삭제. */
.pg-greet { max-width: 680px; margin-left: auto; margin-right: auto; }
.pg-greet-rule {
    width: 40px;
    height: 4px;
    margin: 8px auto 28px;
    background: var(--primary, #070f54);
    border-radius: 2px;
}
.pg-greet-vision {
    margin: 0 0 56px;
    text-align: center;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--ink-900, #000000);
    text-wrap: balance; /* 마지막 줄 외톨이 어절 방지(미지원 브라우저는 무시) */
}
.pg-greet-lead {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 600;
    color: var(--ink-900, #000000);
}
.pg-greet-body p {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--ink-700, #3a3a3a);
}
.pg-greet-body p:last-child { margin-bottom: 0; }
.pg-greet-sign { margin-top: 40px; align-items: flex-end; } /* 편지 관례 — 우측 서명 */
.pg-greet-neighbors { justify-content: center; }

/* ── 원고 확정 전 안내 박스 — 컨테이너 전체 폭(밴드 카드 체계와 동일) ── */
.pg-notice {
    margin: 0 0 24px;
    padding: 24px;
    background: var(--bg-soft, #f2f3fa);
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-notice-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900, #000000);
}
.pg-notice-body {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-700, #3a3a3a);
}

/* ── 서명 ── */
.pg-signature {
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pg-signature-role { font-size: 14px; color: var(--ink-500, #6b7280); }
.pg-signature-name { font-size: 22px; font-weight: 600; color: var(--ink-900, #000000); }

/* ── 카드 (docs/04 §5-4 준용) ── */
.pg-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-card-featured { background: var(--bg-soft, #f2f3fa); }
.pg-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary, #070f54);
    color: var(--on-primary, #ffffff);
}
.pg-card-featured .pg-card-icon { background: var(--primary, #070f54); }
.pg-card-body { min-width: 0; } /* flex 자식 축소 허용 — 긴 문장이 아이콘을 밀어내지 않게 */
.pg-card-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--ink-900, #000000);
    text-wrap: pretty; /* 지원 브라우저에서 마지막 줄 고아 단어 방지(미지원은 무시) */
}
.pg-card-desc {
    margin: 0 0 12px;
    /* 줄 길이 상한 — 한 줄 65~75자 권장(docs/04 §3-2 = 68ch ≈ 720px).
       풀폭 featured 카드에서 본문이 1000px 넘게 늘어나 읽기 어려워지던 것을 막는다. */
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-700, #3a3a3a);
}
.pg-card-desc:last-child { margin-bottom: 0; }
/* 카드 안의 단일 행동 — 텍스트 링크는 버튼으로 안 읽혀 pg-btn으로 승격(2026-08-05).
   본문과 붙지 않게 위 여백만 준다(버튼 자체 규격은 .pg-btn). */
.pg-card-cta { margin-top: 4px; }

/* 확장 영역 2카드(사업 영역) — 제목이 라벨이 아니라 "선언 문장"이라 스케일을 한 단계 낮춘다.
   22px 그대로 두면 제목이 3~4줄로 번져 본문과의 위계가 무너진다(2026-08-04 카피 교체 대응). */
.pg-grid-2 .pg-card-title {
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.5;
}

/* 본문 내 강조 2단계 (2026-08-04 지시) — 색은 검정 램프 안에서만 준다.
   팔레트 규칙상 글자에 네이비(--primary)를 쓰지 않는다(선·채움 전용, docs/04 §2-4).
   .pg-em        살짝 — 무게만 올림(본문 색 유지)
   .pg-em-strong 강조 — 무게 + 검정으로 한 단계 더 */
.pg-em { font-weight: 600; }
.pg-em-strong { font-weight: 700; color: var(--ink-900, #000000); }
.pg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.pg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* 태블릿(768~1023) — 2열을 유지하면 카드 하나가 340px 남짓이라 선언 문장 제목이 4~5줄로 접힌다.
   이 구간은 1열로 내려 문장을 온전한 길이로 읽게 한다(모바일 규칙은 아래 767 블록). */
@media (min-width: 768px) and (max-width: 1023px) {
    .pg-grid-2 { grid-template-columns: 1fr; }
}

/* ── 텍스트 링크 ── */
.pg-textlink {
    color: var(--ink-900, #000000);
    font-weight: 500;
    text-decoration: none;
}
.pg-textlink:hover { text-decoration: underline; text-decoration-color: var(--primary-600, #1c2a8a); }

/* ── 버튼 (docs/04 §5-3 준용) ── */
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.pg-btn-secondary {
    background: var(--bg, #ffffff);
    border: 1.5px solid var(--primary, #070f54);
    color: var(--ink-900, #000000);
}
.pg-btn-secondary:hover { background: var(--primary-50, #f2f3fa); }
.pg-btn-secondary:active { background: var(--primary-100, #dfe2f2); }
.pg-btn-cta {
    background: var(--primary, #070f54);
    color: var(--on-primary, #ffffff);
    border: none;
}
.pg-btn-cta:hover { background: var(--primary-700, #101a6e); }
.pg-btn-cta:active { background: var(--primary-900, #050b40); }
.pg-btn:focus-visible,
.pg-textlink:focus-visible,
.pg-breadcrumb a:focus-visible {
    outline: 2px solid var(--focus-ring, #1c2a8a);
    outline-offset: 2px;
}
.pg-neighbors { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── CTA 밴드 (네이비 면 + 흰 글자 — 그라데이션 없음) ── */
.pg-cta-band {
    padding: 48px 24px;
    background: var(--primary, #070f54);
    border-radius: 12px;
    text-align: center;
}
.pg-cta-band .pg-cta-title {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--on-primary, #ffffff);
}
/* 네이비 밴드 위의 CTA는 반전(흰 면 + 검정 글자) — 같은 네이비 채움이면 버튼 형태가
   배경에 묻혀 글자만 떠 보인다(대비 4.5:1 미달, 2026-08-05 수정). */
.pg-cta-band .pg-btn-cta {
    background: var(--bg, #ffffff);
    color: var(--ink-900, #000000);
    font-weight: 600;
}
.pg-cta-band .pg-btn-cta:hover { background: var(--primary-50, #f2f3fa); }
.pg-cta-band .pg-btn-cta:active { background: var(--primary-100, #dfe2f2); }
.pg-cta-band .pg-btn:focus-visible { outline-color: #ffffff; }

/* ── 오시는길: 지도·연락처 ── */
.pg-map {
    width: 100%;
    height: 420px;
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-map-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 260px;
    padding: 32px 24px;
    background: var(--bg-soft, #f2f3fa);
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
    text-align: center;
}
.pg-map-pending p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-700, #3a3a3a);
}
.pg-map-pending .pg-textlink { margin: 0 8px; }
.pg-contact {
    margin: 0;
    max-width: 720px;
    border-top: 2px solid var(--primary, #070f54);
}
.pg-contact-row {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border, #e3e6f0);
}
.pg-contact-row dt {
    flex: 0 0 96px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-900, #000000);
}
.pg-contact-row dd { margin: 0; }
.pg-contact-row dd p { margin: 0 0 4px; font-size: 16px; line-height: 1.7; color: var(--ink-700, #3a3a3a); }
.pg-contact-row dd p:last-child { margin-bottom: 0; }

/* ── 서비스: 키 비주얼 자리 ── */
.pg-visual-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: var(--bg-soft, #f2f3fa);
    border: 1px solid var(--border, #e3e6f0);
    border-radius: 12px;
}
.pg-visual-pending p { margin: 0; font-size: 16px; color: var(--ink-700, #3a3a3a); }

/* ── 접근성 보조 ── */
.pg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

/* ── 반응형 (docs/04 §8 — 모바일 <768px 타이포 축소·1열 전환) ── */
@media (max-width: 767px) {
    .pg-container { padding: 32px 16px 64px; }
    .pg-header { margin-bottom: 32px; }
    .pg-title { font-size: 28px; }
    .pg-tagline { font-size: 19px; }
    .pg-lead { font-size: 17px; }
    .pg-section { margin-bottom: 32px; }
    .pg-section-title { font-size: 22px; }
    .pg-greet-vision { margin-bottom: 40px; }
    .pg-greet-lead { font-size: 18px; }
    .pg-greet-body p { font-size: 16px; line-height: 1.8; }
    .pg-grid-2, .pg-grid-3 { grid-template-columns: 1fr; gap: 16px; }
    .pg-photo-pending { min-height: 240px; }
    .pg-map { height: 300px; }
    .pg-contact-row { flex-direction: column; gap: 4px; }

    /* 카드: 가로 배치(아이콘 48px + 본문)를 세로로 — 375px에서 본문 폭이 250px대로 눌려
       선언 문장 제목이 한 어절씩 끊기던 것을 없앤다(2026-08-04 카피 교체 대응). */
    .pg-card { flex-direction: column; gap: 12px; padding: 20px; }
    .pg-grid-2 .pg-card-title { font-size: 18px; }
}