/*
Theme Name: Webcore Renewal
Theme URI: https://webcoreonline.com/
Author: 고객센터 가이드
Description: 고객센터 가이드 — 브랜드·기관 고객센터 번호와 절차 안내 전용 테마. 경량 단일 컬럼.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: webcore-renewal
*/
/* DESIGN-ID 2026-09-05 — Noto Sans KR 400/700 셀프호스팅 서브셋 300,352B, optional+preload */
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:400;font-display:optional;src:url(assets/fonts/noto-sans-kr-400.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+3000-303F,U+3131-3163,U+AC00-D7A3}
@font-face{font-family:"Noto Sans KR";font-style:normal;font-weight:700;font-display:optional;src:url(assets/fonts/noto-sans-kr-700.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+3000-303F,U+3131-3163,U+AC00-D7A3}


/* ==========================================================================
   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: "Noto Sans KR", -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); }
nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ==========================================================================
   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: 13px; 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: 13px; 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-2); }
.wc-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 600px) {
  body { font-size: 17px; }
  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으로 접는다. */
@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; } }

/* ==========================================================================
   13. 카드 그리드 — 목록 화면(홈·카테고리·묶음 표 인덱스)
   carstera.com/magazine/ 의 카드형 목록과 같은 계열로 이식했다.
   가져온 골격: .card(면+헤어라인+radius) / .card-grid(중단점 2·3열)
                카드 전체가 하나의 <a> / body 안에 제목+요약+메타
                이미지는 aspect-ratio로 **자리를 먼저 예약**한다

   CLS 0을 위한 규칙 (§4 재측정 대상):
   - 썸네일 자리는 aspect-ratio 16/9 로 **이미지 유무와 무관하게** 예약된다.
     플레이스홀더와 실제 이미지가 같은 비율을 쓰므로 교체돼도 밀리지 않는다.
   - <img>에 width/height 속성을 함께 박아 비율을 두 경로로 고정한다.
   - 그리드 아이템의 min-width:auto가 트랙을 내용물 최소폭까지 늘려
     모바일 가로 오버플로를 만든다 — min-width:0으로 되돌린다(carstera 실사례).
   ========================================================================== */
.wc-grid { display: grid; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.wc-grid > * { min-width: 0; }
@media (min-width: 620px) { .wc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .wc-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.wc-card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wc-card:hover {
  border-color: var(--c1); box-shadow: 0 2px 10px rgba(26, 29, 28, .07);
}
.wc-card:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; }

/* 썸네일 자리 — 이미지가 없어도 이 비율만큼 자리를 잡는다 */
.wc-card-thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3);
}
.wc-card-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* 플레이스홀더 — 단색 + 아이콘. 카테고리별로 색이 갈린다.
 * 실제 이미지 파일이 생기면 발행 없이 자동으로 <img>로 교체된다(테마 헬퍼). */
.wc-card-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ph-bg, var(--bg-3));
}
.wc-card-ph svg {
  width: 34%; max-width: 76px; height: auto;
  color: var(--ph-fg, var(--ink-3)); opacity: .5;
}

.wc-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wc-card-title { font-size: 16px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.01em; margin: 0; }
.wc-card:hover .wc-card-title { color: var(--c1); }
.wc-card-sum {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wc-card-foot { margin-top: auto; padding-top: 2px; display: flex;
  align-items: center; gap: 7px; flex-wrap: wrap; }

/* 카테고리 배지 — 알약형. 6갈래 각각 고유색 */
.wc-badge {
  display: inline-block; padding: 3px 9px; font-size: 13px; font-weight: 600;
  line-height: 1.5; border-radius: 999px;
  background: var(--ph-bg, var(--bg-3)); color: var(--ph-fg, var(--ink-2));
}

/* 카테고리 색 — 플레이스홀더와 배지가 **같은 토큰**을 공유한다.
 * 한 페이지 안에서 배지 색과 카드 이미지 색이 어긋나지 않게 하기 위함이다. */
.wc-c-shopping { --ph-bg: #E8F0FB; --ph-fg: #1B4F8F; }
.wc-c-travel   { --ph-bg: #E4F3EE; --ph-fg: #14664F; }
.wc-c-finance  { --ph-bg: #FBEEE4; --ph-fg: #94491A; }
.wc-c-telecom  { --ph-bg: #EDEAF9; --ph-fg: #4A3A94; }
.wc-c-public   { --ph-bg: #E7F1F5; --ph-fg: #1C5A72; }
.wc-c-life     { --ph-bg: #FAEDF1; --ph-fg: #8C3557; }

/* ==========================================================================
   14. 정돈 — 워드프레스 기본 티 제거와 밀도 조정 (§3)
   목표는 "공식 사이트 옆에 떠도 밀리지 않는 신뢰감".
   상단 배지·번호 카드·출처/확인일 표기는 **유지**하고 시각만 정돈한다.
   ========================================================================== */

/* 14-1. 상단 사칭 방지 배지 — 유지하되 경고문이 아니라 안내선으로 읽히게.
   노란 경고 배경이 페이지 첫인상을 "주의" 톤으로 만들고 있었다.
   중립적인 회색 면 + 좌측 강조선으로 바꿔 정보 밀도를 낮추지 않으면서 톤만 내린다. */
.wc-disclaimer {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px; line-height: 1.6;
}
.wc-disclaimer p {
  max-width: var(--wrap); margin-inline: auto; padding: 9px 20px;
  display: flex; gap: 8px; align-items: baseline;
}
.wc-disclaimer strong {
  flex: none; font-weight: 700; font-size: 13px; letter-spacing: .04em;
  color: var(--c1); border: 1px solid var(--line);
  background: var(--bg); border-radius: 4px; padding: 1px 6px;
}

/* 14-2. 헤더 — 스크롤해도 분류 이동이 가능하게 고정. 높이는 고정값이라 CLS 무관. */
.wc-header { position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: saturate(1.6) blur(8px); }
.wc-logo { font-size: 18px; }
.wc-logo span { color: var(--c1); }
.wc-nav a {
  padding: 5px 0; border-bottom: 2px solid transparent; font-weight: 500;
}
.wc-nav a:hover { border-bottom-color: var(--c1); }

/* 14-3. 표제 — h2의 회색 굵은 윗선은 워드프레스 기본 티가 난다.
   짧은 강조선 + 여백으로 바꾼다. */
h2 {
  border-top: 0; padding-top: 0; margin: 40px 0 14px;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 9px;
}
h2::before {
  content: ""; flex: none; width: 3px; height: 17px;
  background: var(--c1); border-radius: 2px;
}
.wc-count {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 8px;
}

/* 14-4. 홈 히어로 */
.wc-hero { padding: 10px 0 4px; }
.wc-hero h1 { font-size: 32px; line-height: 1.32; letter-spacing: -0.03em;
  margin: 0 0 10px; }
.wc-lede { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; margin: 0 0 18px; }
.wc-search { margin: 0 0 6px; }
.wc-search input { border-radius: 999px; padding: 12px 18px; }

/* 지표 줄 — 규모를 한눈에. 값은 발행 대장 실측이다. */
.wc-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 18px 0 6px; padding: 0;
}
@media (min-width: 620px) { .wc-stats { grid-template-columns: repeat(4, 1fr); } }
.wc-stats > div {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 11px 13px;
}
.wc-stats dt { font-size: 13px; color: var(--ink-3); margin: 0 0 1px; }
.wc-stats dd { margin: 0; font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* 14-5. 분류 타일 — 아이콘을 얹어 카드와 같은 계열로 */
.wc-cats { grid-template-columns: repeat(auto-fit, minmax(164px, 1fr)); gap: 12px; }
.wc-cats a { padding: 15px; border-radius: var(--radius); }
.wc-cats a:hover { border-color: var(--ph-fg, var(--c1)); background: var(--bg); }
.wc-cat-ico {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; margin: 0 0 9px;
  background: var(--ph-bg, var(--bg-3)); color: var(--ph-fg, var(--ink-2));
}
.wc-cat-ico svg { width: 19px; height: 19px; }
.wc-cats b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.wc-cat-desc { font-size: 13px; color: var(--ink-3); line-height: 1.55;
  display: block; margin-top: 2px; }

/* 14-6. 카테고리 페이지 머리 */
.wc-pagehead { margin: 0 0 6px; }
.wc-pagehead .wc-badge { margin: 0 0 8px; }
.wc-pagehead h1 { margin: 0 0 8px; }

/* 14-7. 번호 카드 — 유지하되 번호가 더 또렷하게(§3) */
.wc-phone {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-left-width: 3px;
}
.wc-phone-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* 14-8. 확인일·출처 — 신뢰 장치라 지우지 않는다. 정렬만 정돈. */
.wc-checked { border: 1px solid #F3DCC6; }
.wc-sources li { padding-left: 2px; }

/* 14-9. 페이지네이션 — 워드프레스 기본 마크업을 카드 계열로 */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 6px;
  margin: 22px 0 0; font-size: 14px; }
.nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; text-align: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  text-decoration: none; color: var(--ink-2); background: var(--bg);
}
.nav-links .page-numbers:hover { border-color: var(--c1); color: var(--c1); }
.nav-links .page-numbers.current { background: var(--c1); border-color: var(--c1);
  color: #fff; font-weight: 600; }
.nav-links .page-numbers.dots { border-color: transparent; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 14-10. 푸터 */
.wc-footer nav a { font-weight: 500; }
.wc-footer-in { line-height: 1.7; }

@media (max-width: 600px) {
  .wc-hero h1 { font-size: 26px; }
  h2 { font-size: 18px; margin: 32px 0 12px; }
  .wc-card-title { font-size: 15.5px; }
  .wc-nav { width: 100%; gap: 0 5px; }
  .wc-disclaimer p { display: block; }
  .wc-disclaimer strong { display: inline-block; margin: 0 6px 3px 0; }
}

/* ==========================================================================
   15. 실렌더 보정 — 스크린샷으로만 드러나는 것들
   ========================================================================== */

/* 15-1. 분류 타일: auto-fit이 1280px에서 4+2로 끊겨 빈 칸이 크게 남았다.
   6갈래는 고정 수이므로 트랙을 명시한다 — 2 → 3 → 6열. */
.wc-cats { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .wc-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .wc-cats { grid-template-columns: repeat(6, 1fr); } }
.wc-cats > * { min-width: 0; }

/* 15-2. 플레이스홀더 아이콘이 카드 폭 대비 과하게 컸다(34%).
   카드가 넓어져도 아이콘은 일정 크기를 유지하게 고정폭으로 바꾼다. */
.wc-card-ph svg { width: 46px; max-width: 46px; opacity: .42; }

/* 15-3. 고정 헤더가 앵커 이동 시 제목을 가린다. */
:target { scroll-margin-top: 76px; }

/* 15-4. 카드 제목이 3줄까지 흘러 카드 높이가 들쭉날쭉했다.
   2줄로 묶어 그리드 행 높이를 고르게 한다(내용은 title 속성으로 보존되지 않으므로
   자르지 않고 클램프만 — 전체 제목은 상세 페이지에서 읽힌다). */
.wc-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* PHASE 0 2026-09-05 — 대표이미지(16:9 예약, CLS 0) */
.wc-thumb { margin: 0 0 18px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.wc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 리뉴얼 2026-09-13 */
.wc-hero-renewal { display:grid; gap:22px; align-items:center; padding:12px 0 28px; }
.wc-hero-renewal > * { min-width:0; }
.wc-hero-copy h1 { margin-bottom:12px; }
.wc-hero-art { margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); aspect-ratio:16/9; }
.wc-hero-art img { display:block; width:100%; height:100%; object-fit:cover; }
.wc-hub-art { margin:18px 0 28px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:var(--bg-2); }
.wc-hub-art img { display:block; width:100%; height:100%; object-fit:cover; }
.wc-quick { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:18px 0 8px; }
.wc-quick a { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; background:var(--bg); font-size:14px; font-weight:700; }
.wc-quick a::after { content:"→"; color:var(--c1); }
.wc-quick a:hover { border-color:var(--c1); transform:translateY(-2px); }
.wc-principles { display:grid; gap:10px; }
.wc-principle { border:1px solid var(--line); border-radius:var(--radius); padding:15px; background:var(--bg-2); }
.wc-principle b { display:block; margin-bottom:3px; color:var(--c1); }
.wc-related { margin-top:36px; padding-top:4px; border-top:1px solid var(--line); }
.wc-related-list { display:grid; gap:8px; list-style:none; padding:0; }
.wc-related-list a { min-height:44px; display:flex; align-items:center; padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; }
.wc-related-list a:hover { border-color:var(--c1); color:var(--c1); }
.wc-jump { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 24px; }
.wc-jump a { min-height:44px; display:inline-flex; align-items:center; padding:7px 11px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink-2); font-size:14px; }
.wc-js .wc-reveal { opacity:1; transform:none; transition:transform 180ms ease; }
.wc-js .wc-reveal.is-visible { transform:none; }
@media (min-width:760px) {
  .wc-hero-renewal { grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr); }
  .wc-quick { grid-template-columns:repeat(3,1fr); }
  .wc-principles { grid-template-columns:repeat(3,1fr); }
  .wc-related-list { grid-template-columns:repeat(2,1fr); }
}
@media (hover:none) { .wc-quick a:hover { transform:none; } }
@media (prefers-reduced-motion:reduce) { .wc-js .wc-reveal,.wc-js .wc-reveal.is-visible { opacity:1; transform:none; transition:none; } }