/*
Theme Name: Webcore
Theme URI: https://webcoreonline.com/
Author: 고객센터 가이드
Description: 고객센터 가이드 — 브랜드·기관 고객센터 번호와 절차 안내 전용 테마. 경량 단일 컬럼.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: webcore
*/

/* ==========================================================================
   1. 디자인 토큰 — 색은 전부 여기를 경유한다(하드코딩 금지)
   ========================================================================== */
:root {
  --c1: #1F5F4E;      /* 주색 — 짙은 녹청. 참고 사이트(파랑 계열)와 의도적으로 다르다 */
  --c2: #C2410C;      /* 강조 — 번호·확인일 배지 */
  --ink: #1A1D1C;
  --ink-2: #4A5250;
  --ink-3: #6B7472;
  --line: #DFE4E2;
  --bg: #FFFFFF;
  --bg-2: #F5F7F6;
  --bg-3: #ECF1EF;
  --warn-bg: #FEF6EC;
  --warn-line: #E7C99B;
  --radius: 10px;
  --wrap: 860px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
          "Malgun Gothic", "맑은 고딕", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 17px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; }
a { color: var(--c1); }

/* ==========================================================================
   2. 상단 사칭 방지 배지 — §1-2. 전 페이지 공통, 푸터가 아니라 최상단이다.
   ========================================================================== */
.wc-disclaimer {
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-line);
  color: #7A4A12; font-size: 14px; line-height: 1.6;
}
.wc-disclaimer p { margin: 0; padding: 10px 20px; max-width: var(--wrap);
  margin-inline: auto; }
.wc-disclaimer strong { font-weight: 700; }

/* ==========================================================================
   3. 헤더 / 내비 — 가볍게. 유입 본체는 개별 페이지다(§5-2).
   ========================================================================== */
.wc-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.wc-header-in {
  max-width: var(--wrap); margin-inline: auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.wc-logo { font-size: 19px; font-weight: 700; color: var(--ink); text-decoration: none;
  letter-spacing: -0.02em; white-space: nowrap; }
.wc-logo span { color: var(--c1); }
.wc-nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.wc-nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.wc-nav a:hover { color: var(--c1); }

/* ==========================================================================
   4. 본문 골격
   ========================================================================== */
.wc-main { max-width: var(--wrap); margin-inline: auto; padding: 28px 20px 56px; }
.wc-crumb { font-size: 13px; color: var(--ink-3); margin: 0 0 14px; }
.wc-crumb a { color: var(--ink-3); }
h1 { font-size: 30px; line-height: 1.35; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 21px; line-height: 1.4; margin: 38px 0 12px; padding-top: 4px;
  border-top: 2px solid var(--bg-3); }
h3 { font-size: 17px; margin: 24px 0 8px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin: 4px 0; }

/* ==========================================================================
   5. 번호 카드 — 번호 옆에는 반드시 출처 링크 + 확인일이 붙는다(§1-2)
   ========================================================================== */
.wc-phone {
  border: 1px solid var(--line); border-left: 4px solid var(--c1);
  border-radius: var(--radius); padding: 16px 18px; margin: 0 0 14px;
  background: var(--bg-2);
}
.wc-phone-label { font-size: 13px; color: var(--ink-3); margin: 0 0 2px; }
.wc-phone-num { font-size: 27px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1.25; margin: 0; }
.wc-phone-num a { color: var(--ink); text-decoration: none; }
.wc-phone-kind { display: inline-block; font-size: 12px; font-weight: 600;
  border-radius: 999px; padding: 2px 9px; vertical-align: 5px; margin-left: 6px; }
.wc-kind-rep { background: var(--bg-3); color: var(--ink-2); }
.wc-kind-direct { background: #E6F2ED; color: var(--c1); }
.wc-phone-meta { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; }
.wc-phone-meta a { color: var(--c1); }

/* 확인일 배지 — 신선도는 여기서만 표시한다(§5-5: 색인 판정과 연결하지 않는다) */
.wc-checked { display: inline-block; font-size: 12px; font-weight: 600;
  background: #FDF1E7; color: var(--c2); border-radius: 999px; padding: 2px 9px; }
.wc-checking { background: #FEF3C7; color: #92400E; }

/* ==========================================================================
   6. 표 — 묶음 표 페이지. 각 행에 출처가 걸린다(§4-2)
   ========================================================================== */
.wc-tablewrap { overflow-x: auto; margin: 0 0 18px; -webkit-overflow-scrolling: touch; }
table.wc-table { border-collapse: collapse; width: 100%; font-size: 15px;
  min-width: 460px; }
.wc-table th, .wc-table td { border: 1px solid var(--line); padding: 9px 11px;
  text-align: left; vertical-align: top; }
.wc-table thead th { background: var(--bg-3); font-size: 14px; white-space: nowrap; }
.wc-table td.num { font-weight: 700; white-space: nowrap; }
.wc-table td.num a { color: var(--ink); text-decoration: none; }
.wc-table tbody tr:nth-child(even) { background: var(--bg-2); }

/* ==========================================================================
   7. 지점 목록 (AS센터)
   ========================================================================== */
.wc-branch { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin: 0 0 12px; }
.wc-branch h3 { margin: 0 0 6px; font-size: 16px; }
.wc-branch dl { margin: 0; font-size: 14px; display: grid;
  grid-template-columns: 74px 1fr; gap: 3px 10px; }
.wc-branch dt { color: var(--ink-3); }
.wc-branch dd { margin: 0; }

/* ==========================================================================
   8. 알림 상자 / 출처 목록
   ========================================================================== */
.wc-note { background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; font-size: 15px; margin: 0 0 18px; }
.wc-note p:last-child { margin-bottom: 0; }
.wc-sources { font-size: 14px; color: var(--ink-2); }
.wc-sources li { margin: 6px 0; }

/* ==========================================================================
   9. 홈 — 허브일 뿐이다. 과투자하지 않는다(§5-2)
   ========================================================================== */
.wc-hero { padding: 6px 0 22px; }
.wc-hero p { color: var(--ink-2); font-size: 16px; }
.wc-search { display: flex; gap: 8px; margin: 0 0 8px; }
.wc-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); }
.wc-search input:focus { outline: 2px solid var(--c1); outline-offset: -1px; }
.wc-suggest { list-style: none; margin: 0 0 20px; padding: 0; font-size: 15px; }
.wc-suggest li { border-bottom: 1px solid var(--line); }
.wc-suggest a { display: block; padding: 9px 4px; text-decoration: none; color: var(--ink); }
.wc-suggest a:hover { background: var(--bg-2); }
.wc-empty { color: var(--ink-3); font-size: 14px; padding: 8px 4px; }

.wc-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.wc-cats a { display: block; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; text-decoration: none; color: var(--ink); background: var(--bg); }
.wc-cats a:hover { border-color: var(--c1); background: var(--bg-2); }
.wc-cats b { display: block; font-size: 15px; }
.wc-cats span { font-size: 13px; color: var(--ink-3); }

.wc-cardlist { list-style: none; margin: 0 0 12px; padding: 0; }
.wc-cardlist li { border-bottom: 1px solid var(--line); }
.wc-cardlist a { display: block; padding: 11px 4px; text-decoration: none; color: var(--ink); }
.wc-cardlist a:hover { color: var(--c1); }
.wc-cardlist span { display: block; font-size: 13px; color: var(--ink-3); }

/* ==========================================================================
   10. 푸터
   ========================================================================== */
.wc-footer { border-top: 1px solid var(--line); background: var(--bg-2);
  margin-top: 40px; }
.wc-footer-in { max-width: var(--wrap); margin-inline: auto; padding: 22px 20px 34px;
  font-size: 13px; color: var(--ink-3); }
.wc-footer a { color: var(--ink-2); }
.wc-footer nav { margin: 0 0 10px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   11. 지도 — 클릭 시 로드. 초기 로드 외부 JS 0건.
   CLS 0: 자리표시자와 지도 캔버스의 높이를 **같은 aspect-ratio**로 예약한다.
   높이를 실재하는 래퍼(.wc-map-block)에 걸어야 한다 — 나중에 삽입되는
   자식 캔버스에 걸면 자리가 예약되지 않는다.
   ========================================================================== */
.wc-map-block { position: relative; width: 100%; aspect-ratio: 16 / 10;
  max-height: 420px; min-height: 240px; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-2);
  margin: 0 0 20px; }
.wc-map-ph { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 16px;
  text-align: center; }
.wc-map-btn { font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--c1); border: 0; border-radius: var(--radius);
  padding: 11px 20px; }
.wc-map-btn:hover { filter: brightness(1.08); }
.wc-map-btn:disabled { opacity: .6; cursor: default; }
.wc-map-note { margin: 0; font-size: 13px; color: var(--ink-3); }
.wc-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 25px; }
  h2 { font-size: 19px; }
  .wc-phone-num { font-size: 24px; }
  .wc-branch dl { grid-template-columns: 66px 1fr; }
}

/* ==========================================================================
   12. 광고 자리
   CLS: min-height는 **실재하는 래퍼**에 건다. 애드센스가 나중에 끼워 넣는
   자식 요소에 걸면 무효라서 자리가 예약되지 않는다(실사례).
   ========================================================================== */
/* 예약 높이는 **실제로 채워지는 높이**와 맞아야 한다. 260px로 예약해 두고
 * 멀티플렉스가 1,635px로 커지면 그 차이가 그대로 CLS가 된다(실측 0.36).
 * 멀티플렉스는 본문 맨 끝에만 두므로 넉넉히 예약해도 위 콘텐츠를 밀지 않는다. */
.ad-slot { margin: 26px 0; min-height: 100px; }
.ad-slot ins { display: block; }
.ad-multiplex { min-height: 600px; }

/* 채워지지 않은 슬롯은 처음부터 접는다 — 빈 칸이 자리만 차지하고 밀어낸다.
 * data-ad-status는 애드센스가 응답 후에 붙이므로, 붙기 전에는 예약을 유지하고
 * unfilled로 확정된 뒤에만 0으로 접는다. */
.ad-slot ins[data-ad-status="unfilled"] { display: none; }
.ad-slot:has(ins[data-ad-status="unfilled"]) { min-height: 0; margin: 0; }

@media (max-width: 600px) {
  .ad-slot { margin: 20px 0; }
  .ad-multiplex { min-height: 900px; }   /* 모바일은 세로로 더 길게 채워진다 */
}

/* 자동광고(auto ads)와 CLS — 실측 기록과 대응
 *
 * 자동광고는 **계정 단위 설정**이라 사이트 코드로 끌 수 없다. 구글은
 * `div.google-auto-placed`를 **body 직계에** 나중에 삽입한다(헤더와 본문 사이).
 * 실측: 390px 삽입 → 본문 410px 하강 → CLS 0.36.
 *
 * 시도하고 실패한 것들(같은 삽질을 반복하지 않도록 남긴다):
 *  1. 삽입될 .google-auto-placed에 min-height  → 초기 HTML에 없는 요소라 예약 불가
 *  2. 헤더 뒤에 빈 래퍼를 두고 예약           → 구글이 래퍼가 아니라 body에 넣는다
 *  3. push({enable_page_level_ads:false})      → 계정 설정을 못 이긴다
 *
 * 남은 정공법은 **애드센스 대시보드에서 이 사이트의 자동광고를 끄는 것**이다.
 * 사용자 작업이라 reports/사용자확인요청.md에 올렸다.
 * 그때까지의 완충으로, 본문 시작 위치를 미리 낮춰 삽입 폭을 줄인다. */
body { --wc-autoad-reserve: 390px; }
@media (min-width: 601px) { body { --wc-autoad-reserve: 280px; } }