/* ============================================================
   집산책 블로그 테마
   토큰은 packages/templates/lead-realestate/src/styles/realestate.css 원본 이식.
   Astro 홈과 같은 값을 써야 한 브랜드로 붙는다 — 임의로 바꾸지 말 것.
   ============================================================ */
:root{
  --re-ink:#1c1f26; --re-ink-soft:#4a4f5a;
  --re-line:#d7dade; --re-line-soft:#e9ebee;
  --re-paper:#f7f6f3; --re-surface:#fff;
  --re-navy:#1d2b45; --re-navy-deep:#141d30;
  --re-point:#7a2231; --re-gold:#9a8458;
  --re-font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --re-max:1120px; --re-gnb-h:72px;
}

*{box-sizing:border-box}
body.zb{margin:0;font-family:var(--re-font-sans);color:var(--re-ink);background:var(--re-paper);
  line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased}
.zb h1,.zb h2,.zb h3{margin:0;letter-spacing:-.005em;text-wrap:balance;line-height:1.35}
.zb p{margin:0}
.zb a{color:inherit;text-decoration:none}
.zb img{max-width:100%;height:auto;display:block}

.zb-wrap{max-width:var(--re-max);margin:0 auto;padding:0 24px}
.zb-skip{position:absolute;left:-9999px}
.zb-skip:focus{left:12px;top:12px;z-index:99;background:var(--re-navy);color:#fff;padding:10px 14px;border-radius:6px}
.zb :focus-visible{outline:2px solid var(--re-point);outline-offset:2px}

/* ── GNB ── */
.zb-gnb{background:var(--re-surface);border-bottom:1px solid var(--re-line);position:sticky;top:0;z-index:5}
.zb-gnb__in{display:flex;align-items:center;justify-content:space-between;height:var(--re-gnb-h);gap:16px}
.zb-brand{display:flex;flex-direction:column;line-height:1.15}
.zb-brand__en{font-size:10px;letter-spacing:.18em;color:var(--re-gold);font-weight:600}
.zb-brand__ko{font-size:19px;font-weight:800;color:var(--re-navy)}
.zb-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600}
.zb-nav a{color:var(--re-ink-soft);padding:4px 0;border-bottom:2px solid transparent}
.zb-nav a.on{color:var(--re-navy);border-bottom-color:var(--re-point)}
.zb-tel{font-size:14.5px;font-weight:700;color:var(--re-navy);white-space:nowrap}

/* ── 히어로 ── */
.zb-hero{padding:52px 0 34px;border-bottom:1px solid var(--re-line)}
.zb-eyebrow{font-size:11px;letter-spacing:.16em;color:var(--re-gold);font-weight:700}
.zb-hero h1{font-size:32px;font-weight:800;color:var(--re-navy);margin:10px 0}
.zb-hero__lead{color:var(--re-ink-soft);font-size:15.5px;max-width:640px}

/* ── 카테고리 칩 ── */
.zb-cats{padding:20px 0 4px}
.zb-cats__in{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 단지 필터 줄(단지 2개 이상일 때만 렌더) */
.zb-cats--project{padding:20px 0 0}
.zb-cats--project + .zb-cats{padding-top:10px}
.zb-cats__label{font-size:11px;letter-spacing:.14em;color:var(--re-gold);font-weight:700;margin-right:2px}
.zb-chip{border:1px solid var(--re-line);background:var(--re-surface);color:var(--re-ink-soft);
  padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;
  transition:border-color .15s ease,color .15s ease}
.zb-chip:hover{border-color:var(--re-navy);color:var(--re-navy)}
.zb-chip.on{background:var(--re-navy);border-color:var(--re-navy);color:#fff}
.zb-chip em{font-style:normal;opacity:.6;margin-left:5px;font-size:12px}

/* ── 카드 그리드 ── */
.zb-list{padding:26px 0 60px}
.zb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.zb-card{background:var(--re-surface);border:1px solid var(--re-line);border-radius:10px;overflow:hidden}
.zb-card__link{display:flex;flex-direction:column;height:100%}
/* 썸네일 원본 = 1200x630(OG 1.905:1). 글자가 들어간 이미지라 비율을 바꾸면 잘린다.
   40/21 = 1.9048 로 원본과 맞춰 잘림 0. object-fit 은 cover 로 두되 비율이 같아 실제 크롭은 없다. */
.zb-card__img{aspect-ratio:40/21;object-fit:cover;width:100%;display:block}
/* hover 확대가 글자 가장자리를 먹으므로 카드 이미지 확대는 쓰지 않는다(썸네일에 텍스트가 있다). */
/* 대표이미지·fallback 파일이 둘 다 없을 때 — 깨진 이미지 대신 브랜드 톤 플레이스홀더 */
.zb-card__img--none{background:linear-gradient(135deg,#e8e6e1,#dcdad4);
  border-bottom:1px solid var(--re-line)}
.zb-card:hover{border-color:var(--re-navy)}
.zb-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.zb-card__meta{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--re-ink-soft)}
.zb-card__cat{color:var(--re-point);font-weight:700}
.zb-card h3{font-size:16.5px;font-weight:700;color:var(--re-navy)}
.zb-card__desc{font-size:13.5px;color:var(--re-ink-soft);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zb-card__more{margin-top:auto;font-size:13px;font-weight:700;color:var(--re-navy)}

/* ── 빈 상태 ── */
.zb-empty{border:1px dashed var(--re-line);border-radius:10px;background:var(--re-surface);
  padding:46px 24px;text-align:center}
.zb-empty h3{font-size:17px;color:var(--re-navy);margin-bottom:8px}
.zb-empty p{font-size:14px;color:var(--re-ink-soft);margin-bottom:16px}

/* ── 페이지네이션 ──
   get_the_posts_pagination() 의 'class' 인자는 WP 5.5+ 에서만 먹는다.
   구버전에서도 깨지지 않도록 기본 클래스(.navigation.pagination)도 함께 잡는다. */
.zb-page,.zb .navigation.pagination{margin-top:34px}
.zb-page .screen-reader-text,.zb .pagination .screen-reader-text{position:absolute;left:-9999px}
.zb-page .nav-links,.zb .pagination .nav-links{display:flex;gap:6px;justify-content:center}
.zb-page .page-numbers,.zb .pagination .page-numbers{min-width:36px;height:36px;
  display:grid;place-items:center;border:1px solid var(--re-line);border-radius:6px;
  background:var(--re-surface);font-size:13.5px;font-weight:600;padding:0 8px}
.zb-page .page-numbers.current,.zb .pagination .page-numbers.current{
  background:var(--re-navy);color:#fff;border-color:var(--re-navy)}

/* ── 상세 ── */
.zb-art{padding:44px 0 0}
.zb-art__head,.zb-art__body{max-width:760px;margin:0 auto}
.zb-crumb{font-size:12px;color:var(--re-ink-soft);margin-bottom:14px}
.zb-crumb a{color:var(--re-point);font-weight:600}
.zb-art h1{font-size:30px;font-weight:800;color:var(--re-navy);margin-bottom:12px}
.zb-art__meta{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--re-ink-soft);
  padding-bottom:20px;border-bottom:1px solid var(--re-line)}

/* 목차 */
.zb-toc{background:var(--re-surface);border:1px solid var(--re-line);border-radius:8px;padding:16px 18px;margin:24px 0}
.zb-toc b{display:block;font-size:12px;letter-spacing:.1em;color:var(--re-gold);margin-bottom:10px}
.zb-toc ol{margin:0 0 0 18px;padding:0;font-size:14px;color:var(--re-ink-soft)}
.zb-toc li{margin:5px 0}
.zb-toc a:hover{color:var(--re-point);text-decoration:underline}

/* 본문 — 생성 파이프라인 산출 HTML */
.zb-art__body h2{font-size:21px;font-weight:800;color:var(--re-navy);margin:38px 0 12px;
  padding-top:18px;border-top:1px solid var(--re-line-soft);scroll-margin-top:calc(var(--re-gnb-h) + 12px)}
.zb-art__body h3{font-size:16.5px;font-weight:700;margin:24px 0 8px}
.zb-art__body p{margin:12px 0;font-size:15.5px}
.zb-art__body ul,.zb-art__body ol{margin:12px 0 12px 20px;font-size:15.5px}
.zb-art__body li{margin:6px 0}
.zb-art__body img{border-radius:8px;margin:18px 0}
.zb-art__body a{color:var(--re-point);text-decoration:underline}

.zb-tablewrap{overflow-x:auto;margin:18px 0}
.zb-art__body table{width:100%;border-collapse:collapse;font-size:14px;background:var(--re-surface)}
.zb-art__body th,.zb-art__body td{border:1px solid var(--re-line);padding:9px 12px;text-align:left}
.zb-art__body th{background:#eef0f3;font-weight:700;color:var(--re-navy)}

/* answer-first 블록 — 원고가 넣는 블록을 스타일링만 한다 */
.zb-art__body [data-testid="answer-first"],
.zb-art__body .osc-answer-first{
  background:var(--re-surface);border:1px solid var(--re-line);border-left:3px solid var(--re-point);
  border-radius:0 8px 8px 0;padding:16px 18px;margin:24px 0;font-size:15px;font-weight:600;color:var(--re-navy)}

/* 본문 CTA — 원고가 이미 삽입한다. 테마는 스타일만. */
.zb-art__body .osc-mid-cta,.zb-art__body .osc-soft-cta{
  background:var(--re-navy);color:#fff;border-radius:10px;padding:20px 22px;margin:32px 0;font-size:15px}
.zb-art__body .osc-mid-cta a,.zb-art__body .osc-soft-cta a{
  display:inline-block;margin-top:10px;background:var(--re-gold);color:var(--re-navy-deep);
  padding:10px 18px;border-radius:6px;font-weight:800;font-size:14.5px;text-decoration:none}

/* 출처 리스트 */
.zb-art__body .osc-sources{background:var(--re-surface);border:1px solid var(--re-line);
  border-radius:8px;padding:18px;margin-top:32px;font-size:13.5px;color:var(--re-ink-soft)}
.zb-art__body .osc-sources a{word-break:break-all}

/* 관련글 */
.zb-rel{padding:44px 0 0;margin-top:40px;border-top:1px solid var(--re-line)}
.zb-rel h2{font-size:18px;font-weight:800;color:var(--re-navy);margin-bottom:18px}
.zb-rel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ── 푸터 ── */
.zb-foot{background:var(--re-navy-deep);color:#c9ccd3;margin-top:56px;padding:30px 0}
.zb-foot__in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.zb-foot__legal{max-width:620px;line-height:1.6;opacity:.75;margin:0}
.zb-foot__meta{margin:0}
.zb-foot a{color:var(--re-gold)}

/* ── 반응형 ── */
@media (max-width:900px){
  .zb-grid,.zb-rel__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .zb-wrap{padding:0 18px}
  .zb-gnb__in{height:58px}
  .zb-brand__ko{font-size:17px}
  .zb-nav{gap:14px;font-size:13px}
  .zb-tel{font-size:13px}
  .zb-hero{padding:32px 0 24px}
  .zb-hero h1{font-size:23px}
  .zb-hero__lead{font-size:14px}
  /* 칩이 2줄이 되면 히어로가 밀린다 — 가로 스크롤로 한 줄 유지 */
  .zb-cats__in{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .zb-cats__in::-webkit-scrollbar{display:none}
  .zb-grid,.zb-rel__grid{grid-template-columns:1fr;gap:18px}
  .zb-art{padding:26px 0 0}
  .zb-art h1{font-size:22px}
  .zb-art__body h2{font-size:18px}
  .zb-art__body p,.zb-art__body ul,.zb-art__body ol{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .zb-chip{transition:none}
}