/*
 * GEO 콘텐츠 공용 클래스 (2026-09-28)
 *
 * 사용법 (tpl 상단에 링크 추가, 수정할 때마다 ?v= 값을 올릴 것):
 *   <link rel="stylesheet" href="/include/resources/css/geo.css?v=20260928" />
 *
 *   <div class="geo_answer">
 *     <h1 class="sr-only">H1 문구</h1>   ← 화면에는 안 보이고 스크린리더/검색엔진에만 노출
 *     <p>
 *       Answer-First 문단<br />
 *       (줄바꿈 br 은 모바일에서 자동으로 숨겨짐)
 *     </p>
 *   </div>
 *
 * .sr-only      : 시각적으로만 숨김 (display:none 아님 → 검색엔진/스크린리더가 읽음)
 * .geo_answer   : Answer-First 문단 블록. PC 30px / 위 125px·아래 85px(+ id Selfiegram 40px 패딩 = 눈으로 125px), 폰트는 사이트 기본(Pretendard)
 *                 1200px 이하는 vw 로 축소, 720px 이하(모바일)는 br 숨김 + 자동 줄바꿈
 */

.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;
}

.geo_answer {
    margin: 125px auto 85px;
    padding: 0 20px;
}
.geo_answer p {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    word-break: keep-all;
    font-family: var(--basic-font-family); /* Pretendard (variable.css) */
    font-weight: 500;
    font-size: 30px;
    line-height: 45px;
    color: #222222;
    letter-spacing: -0.75px;
    text-align: center;
}

@media screen and (max-width: 1200px) {
    .geo_answer { margin: 10.417vw auto 8.333vw; }
    .geo_answer p { font-size: 2.5vw; line-height: 3.75vw; letter-spacing: -0.0625vw; }
}

@media screen and (max-width: 720px) {
    .geo_answer { margin: 13.361vw auto 11.806vw; padding: 0 6.111vw; }
    .geo_answer p { font-size: 3.889vw; line-height: 6.111vw; letter-spacing: -0.097vw; word-break: keep-all; }
    .geo_answer p br { display: none; }
}

/*
 * .geo_table : GEO 비교/단계 표 (2026-09-28)
 *   <div class="geo_table">
 *     <table>
 *       <caption class="sr-only">표 설명</caption>
 *       <thead><tr><th scope="col">구분</th><th scope="col">항목1</th>...</tr></thead>
 *       <tbody><tr><th scope="row">행제목</th><td>내용</td>...</tr></tbody>
 *     </table>
 *   </div>
 * 왼쪽 위 칸(thead 첫 th) + 행 제목(tbody th) = 분홍(--geo-table-head / --geo-table-head-line 으로 페이지별 변경), 열 제목(thead 나머지 th) = 회색, 내용 = 흰색
 * 폭은 부모 폭을 100% 사용 (부모에서 폭·여백 조절), 모바일은 vw 로 축소
 */
.geo_table { width: 100%; }
.geo_table table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.geo_table th,
.geo_table td { text-align: center; letter-spacing: -0.5px; word-break: keep-all; vertical-align: middle; }
.geo_table th {
    padding: 14px 5px 11px;
    font-weight: 900;
    font-size: 18px;
    line-height: 25px;
    color: #ffffff;
    background-color: var(--geo-table-head, #f25ace);
    border-bottom: 1px solid var(--geo-table-head-line, #f8a7e5);
}
.geo_table thead th:not(:first-child) {
    font-weight: 700;
    color: #222222;
    background-color: #e0e0e0;
    border-bottom: 1px solid #bfbfbf;
}
.geo_table thead th:nth-child(n+3) { border-left: 1px solid #bfbfbf; } /* 회색 열 제목 사이 세로선 */
.geo_table td {
    padding: 23px 10px 21px;
    font-weight: 500;
    font-size: 15px;
    line-height: 25px;
    color: #222222;
    background-color: #ffffff;
    border-left: 1px solid #bfbfbf;
    border-bottom: 1px solid #e1e1e1;
}
.geo_table tbody th + td { border-left: none; }
.geo_table tbody tr:last-child th,
.geo_table tbody tr:last-child td { border-bottom: none; }

@media screen and (max-width: 720px) {
    .geo_table th { padding: 2.083vw 0.521vw 2.083vw; font-size: 2.778vw; line-height: 3.889vw; letter-spacing: -0.069vw; }
    .geo_table td { padding: 2.604vw 0.833vw 2.604vw; font-size: 2.5vw; line-height: 3.75vw; letter-spacing: -0.069vw; }
}

/*
 * .geo_block : 질문형 H2 + 설명 문단 (+ .geo_table) 묶음 (2026-09-28)
 *   <div class="geo_block">
 *     <h2>질문형 제목</h2>
 *     <p>설명 문단<br />(br 은 모바일에서 숨겨짐)</p>
 *     <div class="geo_table">…</div>      ← 선택
 *   </div>
 * 간격: h2 → p 65px, p → 표 65px (위·아래 125px 은 부모 영역에서 조절)
 * 제목 색은 --geo-accent 로 페이지별 변경 (기본 #ea32ab)
 */
.geo_block { text-align: center; }
.geo_block h2 {
    margin: 0;
    padding: 0;
    font-family: var(--basic-font-family);
    font-weight: 900;
    font-size: 40px;
    line-height: 50px;
    letter-spacing: -1px;
    color: var(--geo-accent, #ea32ab);
    word-break: keep-all;
}
.geo_block p {
    margin: 65px auto 0;
    padding: 0;
    font-family: var(--basic-font-family);
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.5px;
    color: #222222;
    word-break: keep-all;
}
.geo_block .geo_table { margin: 65px auto 0; }

@media screen and (max-width: 720px) {
    .geo_block h2 { font-size: 5.556vw; line-height: 6.944vw; letter-spacing: -0.139vw; }
    .geo_block p { margin: 7.639vw auto 0; font-size: 2.778vw; line-height: 4.167vw; letter-spacing: -0.069vw; }
    .geo_block p br { display: none; }
    .geo_block .geo_table { margin: 8.333vw auto 0; }
}

/*
 * .geo_section : GEO 블록(.geo_block 등)을 페이지 안에 놓는 영역 (2026-09-28)
 *   <div class="geo_section"><div class="geo_block">…</div></div>
 * 위·아래 125px (모바일 vw), 내용 폭은 최대 960px 중앙
 */
.geo_section { margin: 125px auto; padding: 0 20px; }
.geo_section .geo_block { max-width: 960px; margin: 0 auto; }

@media screen and (max-width: 720px) {
    .geo_section { margin: 15.972vw auto 17.361vw; padding: 0 6.111vw; }
}