/*
Theme Name: TwentyTwentyFive Child
Template: twentytwentyfive
Version: 1.0
*/

:root{
  --hph-navy:#0f2a4a;
  --hph-navy-deep:#0a1e36;
  --hph-sky:#3fa9f5;
  --hph-sky-light:#eaf5ff;
  --hph-text:#1c2b3a;
  --hph-muted:#5b6b7c;
  --hph-white:#ffffff;
  --hph-border:#dde6ee;
}

body{ color:var(--hph-text); background:var(--hph-white); }
a{ color:var(--hph-sky); }

.hph-hero{
  background:
    linear-gradient(135deg, rgba(15,42,74,.82) 0%, rgba(10,30,54,.88) 100%),
    url('/wp-content/uploads/2026/07/seoul-hero.jpg') center/cover no-repeat;
  color:#fff;
  padding:72px 24px 96px;
  text-align:center;
}
.hph-hero h1{
  font-size:clamp(28px,5vw,44px);
  margin:0 0 12px;
  font-weight:800;
}
.hph-hero p{
  font-size:18px;
  opacity:.85;
  margin:0 0 32px;
}
.hph-search{
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border-radius:14px;
  padding:10px;
  display:flex;
  gap:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.hph-search input[type=search]{
  flex:1;
  border:none;
  outline:none;
  padding:14px 16px;
  font-size:16px;
  border-radius:8px;
  color:var(--hph-text);
}
.hph-search button{
  background:var(--hph-sky);
  color:#fff;
  border:none;
  border-radius:8px;
  padding:14px 26px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
}
.hph-search button:hover{ background:#2f8fd8; }

.hph-badges{
  max-width:1080px;
  margin:-48px auto 64px;
  padding:0 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.hph-badge{
  background:#fff;
  border:1px solid var(--hph-border);
  border-radius:12px;
  padding:20px 16px;
  text-align:center;
  box-shadow:0 6px 18px rgba(15,42,74,.08);
}
.hph-badge .icon{ font-size:26px; margin-bottom:8px; }
.hph-badge .label{ font-size:14px; font-weight:700; color:var(--hph-navy); }

.hph-section{ max-width:1080px; margin:0 auto; padding:48px 24px; }
.hph-section h2{
  font-size:26px;
  font-weight:800;
  color:var(--hph-navy);
  text-align:center;
  margin:0 0 32px;
}

.hph-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}
.hph-post-card{
  border:1px solid var(--hph-border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
  display:block;
  box-shadow:0 2px 14px rgba(15,42,74,.06);
}
.hph-post-card:hover{ transform:translateY(-4px); box-shadow:0 12px 24px rgba(15,42,74,.12); }
.hph-post-card img{ width:100%; aspect-ratio:1 / 1; height:auto; object-fit:cover; background:var(--hph-sky-light); }
.hph-post-card .body{ padding:14px 16px; }
.hph-post-card .cat{ font-size:12px; font-weight:700; color:var(--hph-sky); }
.hph-post-card .title{ font-size:15px; font-weight:700; color:var(--hph-text); margin:6px 0 0; line-height:1.4; }

.hph-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.hph-step{ text-align:center; }
.hph-step .num{
  width:44px; height:44px; border-radius:50%;
  background:var(--hph-sky-light); color:var(--hph-navy);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; margin:0 auto 12px;
}
.hph-step .label{ font-size:14px; font-weight:700; color:var(--hph-navy); }
.hph-step .desc{ font-size:13px; color:var(--hph-muted); margin-top:4px; }

.hph-footer-cats{
  background:var(--hph-sky-light);
  padding:28px 24px;
  text-align:center;
}
.hph-footer-cats a{
  display:inline-block;
  margin:4px 8px;
  padding:8px 16px;
  background:#fff;
  border-radius:20px;
  color:var(--hph-navy);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  border:1px solid var(--hph-border);
}
.hph-footer-cats a:hover{ background:var(--hph-navy); color:#fff; }

@media (max-width:720px){
  .hph-badges{ grid-template-columns:repeat(2,1fr); }
  .hph-steps{ grid-template-columns:repeat(2,1fr); }
  .hph-search{ flex-direction:column; }
}

/* ═══ 발행글 상단: 슬림 고정헤더 + 포스트 히어로 (2026-07-21) ═══ */
.wp-site-blocks > header.wp-block-template-part{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--hph-border);
}
header.wp-block-template-part .wp-block-site-title{
  font-weight:800; letter-spacing:-.6px; color:var(--hph-navy);
}
header.wp-block-template-part .wp-block-navigation-item__content{
  position:relative; font-weight:600;
}
header.wp-block-template-part .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--hph-sky); border-radius:2px; transition:width .22s ease;
}
header.wp-block-template-part .wp-block-navigation-item__content:hover::after{ width:100%; }

.hph-post-header{ margin-bottom:6px; }
.hph-breadcrumb{ font-size:13px; color:var(--hph-muted); margin-bottom:20px; letter-spacing:-.2px; }
.hph-breadcrumb a{ color:var(--hph-muted); text-decoration:none; }
.hph-breadcrumb a:hover{ color:var(--hph-sky); }
.hph-cat-pill{
  display:inline-block; background:var(--hph-sky-light); color:var(--hph-navy);
  font-size:12.5px; font-weight:700; letter-spacing:-.2px;
  padding:6px 14px; border-radius:999px; text-decoration:none; margin-bottom:18px;
  transition:background .18s ease, color .18s ease;
}
.hph-cat-pill:hover{ background:var(--hph-sky); color:#fff; }
.hph-post-title{
  font-size:clamp(27px,3.4vw,38px); font-weight:800; line-height:1.34;
  letter-spacing:-.8px; color:var(--hph-text); margin:0 0 20px;
}
.hph-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px;
  font-size:13.5px; color:var(--hph-muted); letter-spacing:-.2px;
  padding-bottom:22px; border-bottom:1px solid var(--hph-border);
}
.hph-meta span{ display:inline-flex; align-items:center; }
.hph-ic{ width:15px; height:15px; margin-right:6px; opacity:.7; }

/* ═══ 발행글 2단 레이아웃: PC(본문+스티키 사이드바) → 모바일 1단 (2026-07-21) ═══ */
.hph-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:40px;
  align-items:start;
}
.hph-sidebar-inner{
  position:sticky;
  top:88px;
}
.hph-sidebar-inner .toc{ margin:0 0 20px !important; }
.hph-ad-slot{ display:none; }

@media (max-width:1024px){
  .hph-layout{ grid-template-columns:1fr; gap:0; }
  .hph-sidebar{ display:none; }
}

/* ★2026-07-21: 부모 그룹의 is-layout-constrained(본문폭 제한+auto중앙정렬)이
   .hph-layout(일반 div)에도 적용돼 650px로 좁아지고 오른쪽으로 쏠려 보이던
   문제 수정. 명시적으로 제한 해제. */
.hph-layout{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ★2026-07-21: hph-post-header도 hph-layout과 같은 원인(부모 constrained 규칙)으로
   본문보다 안쪽으로 밀려 보이던 정렬 어긋남 수정 */
.hph-post-header{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* ★2026-07-21: 목차(.toc) 리디자인 — 회색 채움박스 → 흰 카드+얇은 포인트라인.
   본문 콘텐츠에 인라인 style로 이미 박혀있어(파이프라인이 생성 시점에 심음),
   !important로 덮어써야 실제로 이긴다. */
.toc{
  background:#fff !important;
  border:none !important;
  border-left:3px solid var(--hph-sky) !important;
  box-shadow:0 1px 3px rgba(15,42,74,.08), 0 1px 2px rgba(15,42,74,.04) !important;
  border-radius:6px !important;
}
.toc > p:first-child{
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  color:var(--hph-muted) !important;
}
.toc a{ transition:color .15s ease; }
.toc li{ transition:transform .15s ease; }
.toc li:hover{ transform:translateX(2px); }

/* ★2026-07-21: 목차 폰트 크기·컬러 조정 — 본문(li 인라인 style)에 font-size가
   박혀있어 li를 속성선택자로 짚어 !important로 덮어씀. 밝은 하늘색 텍스트 대신
   차분한 남색(대제목)/톤다운 회색(소제목)으로, 숫자만 포인트컬러 유지. */
.toc li[style*="margin-bottom:9px"]{ font-size:17px !important; margin-bottom:12px !important; }
.toc li[style*="margin:6px 0 0 18px"]{ font-size:15px !important; margin-top:8px !important; }
.toc li[style*="margin-bottom:9px"] > a{ color:var(--hph-navy) !important; }
.toc li[style*="margin:6px 0 0 18px"] > a{ color:var(--hph-muted) !important; }
.toc a:hover{ color:var(--hph-sky) !important; }
.toc a span{ color:var(--hph-sky) !important; }

/* ★2026-07-21: 하단 '함께 보면 좋은 글' 박스 — 목차와 동일한 톤(흰 카드+얇은
   포인트라인)으로 통일. 새 글은 .related-links-box 클래스로, 클래스 이름표가
   없는 기존 발행글은 인라인 style 값으로 속성선택자 매칭(임시 커버). */
.related-links-box,
div[style*="background:#f7f7f9"]{
  background:#fff !important;
  border:none !important;
  border-left:3px solid var(--hph-sky) !important;
  box-shadow:0 1px 3px rgba(15,42,74,.08), 0 1px 2px rgba(15,42,74,.04) !important;
  border-radius:6px !important;
}
.related-links-box > p:first-child,
div[style*="background:#f7f7f9"] > p:first-child{
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
  color:var(--hph-muted) !important;
}
.related-links-box ul a,
div[style*="background:#f7f7f9"] ul a{
  color:var(--hph-navy) !important;
  font-size:16px !important;
  font-weight:600 !important;
  transition:color .15s ease;
}
.related-links-box ul a:hover,
div[style*="background:#f7f7f9"] ul a:hover{
  color:var(--hph-sky) !important;
}

/* ★2026-07-21: 넓은 화면(대형 모니터)에서 .hph-layout이 화면 전체 폭으로
   퍼져(max-width:none), 본문 텍스트는 좁은 칸에 있는데 목차 사이드바만 화면
   오른쪽 끝까지 멀어져 보이던 문제 수정. 전체 폭 대신 적당한 최대폭(1200px)
   으로 다시 제한하고 중앙 정렬 — 부모 constrained 규칙(650px)보다는 넓게,
   완전 무제한(화면 전체)보다는 좁게. */
.hph-layout{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.hph-post-header{
  max-width:1200px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ★2026-07-21: 푸터가 본문과 같은 흰색이라 구분이 안 되던 문제 — 연한 브랜드
   하늘색 틴트 배경 + 상단 경계선으로 구분. 진한 남색 반전은 더 강한 대비지만
   글자색 전부 재조정 필요해 위험도가 커서, 절제된 톤(이미 쓰는 --hph-sky-light)
   으로 우선 적용. */
footer.wp-block-template-part{
  background:var(--hph-sky-light);
  border-top:1px solid var(--hph-border);
}

/* ★2026-07-21: '답글 남기기' 폼이 역할 대비 지나치게 큼(줄 8개짜리 넓은 텍스트칸+
   필드 사이 여백 과다+버튼도 큼) — 실제 규모에 맞게 압축. */
.wp-block-comments{ margin-top:32px !important; margin-bottom:32px !important; }
.comment-reply-title{ font-size:17px !important; margin-bottom:10px !important; }
#commentform p{ margin:0 0 12px !important; }
#commentform textarea{ height:90px !important; }
#commentform input[type=submit]{
  padding:8px 22px !important;
  font-size:14px !important;
}
.wp-block-post-comments-form{
  padding-top:16px !important;
  padding-bottom:16px !important;
}
/* =============================================================================
   오토팜 글 본문 형식 v2  (2026-07-28 신설 — 미르 확정)
   -----------------------------------------------------------------------------
   ★목적: 디자인을 글 본문에 박아 넣지 않고 테마에서 입힌다.
     기존 발행글에는 인라인 style이 이미 박혀 있으므로 !important로 덮어쓴다.
     → 글을 한 글자도 건드리지 않고 기존 글까지 새 형식으로 바뀐다.
     → 앞으로 디자인 수정은 이 파일 한 곳만 고치면 전체 반영된다.

   ★사이트별로 --af-key 한 줄만 바꿔서 각 자식테마 style.css 끝에 붙인다.
     edukidsfund #503add / econolifehub #8dcd55 / homepricehub #348ecf
     blog.automode #ea837a / story.blogyoung #59b219
     (값 출처: orchestrator._accent_hex — 카드뉴스와 같은 색을 쓴다)

   ★되돌리기: 이 블록(=== AUTOFARM ARTICLE FORMAT === 주석 사이)만 지우면 원상복구.
   ============================================================================= */

/* === AUTOFARM ARTICLE FORMAT v2 : START === */
:root{
  --af-key:#348ecf;                /* ← 사이트별로 이 줄만 교체 */
  --af-keytext:#ffffff;
  /* ★CTA 버튼 색은 사이트 대표색(--af-key)과 일부러 다르게 둔다(2026-07-29 미르 지시:
     "너무 똑같으면 별로"). 아래 2색이 1초 주기로 왕복하며 깜빡인다.
     ★참고사이트가 쓰던 코랄(#FF6B6B)은 일부러 피했다(2026-07-29 미르: "샘플과 너무 같으면 안 된다").
     사이트별 권장값 — homepricehub(파랑)·edukidsfund(보라): 앰버→딥오렌지
                      econolifehub(연두)·story(초록): 앰버→진자주
                      blog.automode(살구): 딥틸→네이비 */
  --af-btnin:#ea580c;              /* CTA 깜빡임 A (앰버) */
  --af-btnout:#b91c5c;             /* CTA 깜빡임 B (딥오렌지) */
  /* ★2026-07-29 신설 — 대표색을 '글자색'으로 그대로 쓰면 밝은 사이트(연두·초록·살구)는
     흰 배경에서 대비 1.9~2.7:1로 거의 안 보인다. 배경·테두리엔 --af-key, 글자엔 --af-ink를 쓴다.
     ink 값은 대비 4.5:1(WCAG AA)을 넘도록 사이트별로 계산해 넣는다. */
  --af-ink:#2a7ab4;
  --af-tint:color-mix(in srgb, var(--af-key) 10%, transparent);
  --af-tint-2:color-mix(in srgb, var(--af-key) 5%, transparent);
  --af-shadow:color-mix(in srgb, var(--af-key) 15%, transparent);
  --af-dark:color-mix(in srgb, var(--af-key), black 12%);
}

/* ---------- 본문 기본 ---------- */
/* ★2026-07-29 미르 지적 — 참고사이트(golifehack)는 본문에 word-break:keep-all을 쓰지 않는다.
   한글은 기본값(normal)이면 어느 글자에서든 줄이 바뀌어 각 줄이 오른쪽 끝까지 꽉 차므로,
   양쪽정렬이 아닌데도 양쪽정렬처럼 가지런해 보인다(마지막 줄만 자연스럽게 짧아짐).
   우리는 keep-all(낱말 안 쪼갬)을 써서 줄 끝이 들쭉날쭉했다 — 본문에서는 걷어낸다.
   ★단 제목·버튼·카드처럼 짧고 눈에 띄는 곳은 낱말이 잘리면 어색해서 keep-all을 유지한다.
   ★문단 아래 여백도 확대(미르: "따닥따닥 붙어 있어 답답하다"). */
.entry-content p{
  font-size:18px !important; line-height:1.8 !important;
  margin-bottom:2em !important; word-break:normal;
}
.entry-content li{ word-break:normal; }

/* ---------- 대제목 : 박스형 → 왼쪽에서 옅어지는 밑줄 ---------- */
.entry-content h2{
  font-size:32px !important; font-weight:800 !important; line-height:1.38 !important;
  margin-top:72px !important; margin-bottom:32px !important; padding:0 0 16px !important;
  background:none !important; border-left:none !important; border-radius:0 !important;
  position:relative; color:#1a1a1a; letter-spacing:-.02em; word-break:keep-all;
}
.entry-content h2::after{
  content:""; position:absolute; left:0; bottom:0; width:300px; max-width:100%; height:4px;
  background:linear-gradient(to right,var(--af-key),transparent); border-radius:2px;
  transform:scaleX(.7); transform-origin:left;
  transition:transform .5s cubic-bezier(.25,1,.5,1);
}
.entry-content h2:hover::after{ transform:scaleX(1); }

/* ---------- 소제목 : 박스형 → 왼쪽 세로 그라데이션 막대 ---------- */
.entry-content h3{
  font-size:24px !important; font-weight:700 !important; line-height:1.45 !important;
  margin-top:34px !important; margin-bottom:18px !important; padding:0 !important;
  background:none !important; border-left:none !important; border-radius:0 !important;
  display:flex; align-items:flex-start; gap:10px;
  color:#22222a; letter-spacing:-.01em; word-break:keep-all;
}
.entry-content h3::before{
  content:""; display:block; width:8px; height:24px; flex-shrink:0; margin-top:.3em;
  background:linear-gradient(to bottom,var(--af-key),transparent);
  border-radius:4px; transition:all .3s ease;
}
.entry-content h3:hover::before{ height:28px; background:var(--af-key); }

/* ---------- 강조 : 색으로만(굵기는 낮춤) ---------- */
.entry-content strong,.entry-content b{
  color:var(--af-ink) !important; font-weight:600 !important;
  padding:0 2px; border-radius:3px; transition:background .2s ease;
}
.entry-content strong:hover,.entry-content b:hover{ background:var(--af-tint); }

/* ---------- 표 : 라운드 + 컬러 헤더 ---------- */
/* ★2026-07-29 미르 피드백 "표 테두리가 잘 안 보인다" — 옅은 테두리 + 그림자 강화 */
.entry-content table{
  width:100% !important; margin-top:30px !important; margin-bottom:30px !important; border-collapse:collapse !important;
  border-radius:16px !important; overflow:hidden !important; font-size:.95rem !important;
  border:1px solid #dde2e8 !important;
  box-shadow:0 4px 16px rgba(20,30,45,.11) !important;
}
.entry-content table:hover{ box-shadow:0 8px 24px rgba(20,30,45,.16) !important; }
.entry-content thead,.entry-content thead tr{
  background:var(--af-key) !important; color:var(--af-keytext) !important;
}
.entry-content th{
  padding:14px 16px !important; text-align:center !important; font-weight:600 !important;
  color:var(--af-keytext) !important; background:transparent !important; border:none !important;
}
.entry-content td{
  padding:12px 16px !important; border:none !important;
  border-bottom:1px solid #e3e7ec !important; word-break:normal;
}
.entry-content tbody tr:last-child td{ border-bottom:none !important; }
.entry-content tbody tr{ transition:background .2s ease; }
.entry-content tbody tr:hover{ background:#f8f9fa; }

/* ---------- 인용구 : 왼쪽 굵은선 + 배경 따옴표 ---------- */
.entry-content blockquote{
  margin-top:36px !important; margin-bottom:36px !important; padding:24px 28px 24px 34px !important;
  background:#f8f9fa !important; border-left:4px solid var(--af-key) !important;
  border-radius:0 8px 8px 0 !important; position:relative; overflow:visible !important;
  font-style:italic; transition:all .3s ease;
}
.entry-content blockquote:hover{
  background:#f0f2f5 !important; transform:translateX(5px); box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.entry-content blockquote::before{
  content:'"'; position:absolute; top:0; left:12px; font-size:58px; line-height:1;
  color:var(--af-key); opacity:.2; font-family:Georgia,serif; pointer-events:none;
}
.entry-content blockquote p{ margin:0 0 8px !important; position:relative; z-index:1; }

/* ---------- 이미지 : 전부 가운데 정렬 ---------- */
.entry-content img:not(.emoji):not(.wp-smiley){
  max-width:100% !important; height:auto !important; display:block !important;
  margin-left:auto !important; margin-right:auto !important;
  border-radius:10px !important; box-shadow:0 3px 12px rgba(0,0,0,.08);
  transition:all .3s ease;
}
.entry-content img:not(.emoji):not(.wp-smiley):hover{ transform:scale(1.01); box-shadow:0 6px 15px rgba(0,0,0,.15); }

/* ★2026-07-29 미르 피드백 "카드뉴스 한 장이 비대하게 크다" —
   카드뉴스·차트는 1080×1080 정사각이라 폭 100%면 700×700으로 화면을 잡아먹는다.
   본문 이미지 최대 폭을 520px로 제한한다(썸네일 420 < 본문이미지 520 < 본문폭 700). */
.entry-content img:not(.emoji):not(.wp-smiley){ max-width:520px !important; }

/* ★2026-07-29 수정(미르 발견) — 홈 상단 커버 이미지가 위 520px 규칙에 걸려,
   블록(폭 1265px)을 꽉 채우지 못하고 520px짜리로 가운데에만 떠 있었다.
   커버 블록의 배경 이미지는 '블록을 꽉 채우는' 것이 정상 동작이므로 되돌린다.
   ★교훈: `.entry-content img` 같은 넓은 규칙은 글 본문뿐 아니라 홈·아카이브의
   블록 이미지까지 함께 잡는다. 이미지 규칙을 손볼 땐 홈 화면도 반드시 확인할 것. */
/* ★선택자에 :not() 2개를 그대로 달아둔 것은 우선순위 때문이다. 위 520px 규칙이
   `img:not(.emoji):not(.wp-smiley)`(클래스 3개)라, 이쪽도 같은 수 이상이어야 이긴다.
   (2026-07-29 실수 — 처음엔 :not 없이 썼다가 그대로 520px에 져서 안 고쳐졌다) */
.entry-content img.wp-block-cover__image-background:not(.emoji):not(.wp-smiley){
  max-width:none !important; width:100% !important; height:100% !important;
  object-fit:cover !important; border-radius:0 !important;
  box-shadow:none !important; margin:0 !important;
}
.entry-content img.wp-block-cover__image-background:not(.emoji):not(.wp-smiley):hover{
  transform:none !important; box-shadow:none !important;
}

/* 워드프레스가 이모지를 <img class="emoji">로 바꾸므로, 글자처럼 인라인 유지 */
.entry-content img.emoji,.entry-content img.wp-smiley{
  display:inline !important; width:1em !important; height:1em !important;
  margin:0 .07em !important; vertical-align:-.1em !important;
  border-radius:0 !important; box-shadow:none !important;
}

/* ---------- 본문 맨 위 썸네일 (2026-07-29 미르 요청) ---------- */
.entry-content .af-thumb{ margin-top:0 !important; margin-bottom:34px !important; text-align:center; }
.entry-content .af-thumb img:not(.emoji):not(.wp-smiley){
  width:100% !important; max-width:420px !important; aspect-ratio:1 / 1; object-fit:cover;
  border-radius:14px !important; margin:0 auto !important;
  box-shadow:0 6px 20px var(--af-shadow) !important;
}
/* ★2026-07-29 수정(미르 발견) — 데스크톱인데도 썸네일이 300px로 작게 나왔다.
   위 규칙(420px)이 다른 무언가에 우선순위로 지고 있어, 선택자를 figure까지 명시해
   확실히 이기게 한다. 배포 후 실제 화면에서 폭을 재서 확인할 것. */
.entry-content figure.af-thumb img:not(.emoji):not(.wp-smiley){
  width:100% !important; max-width:420px !important; height:auto !important;
}
@media (max-width:768px){
  .entry-content img:not(.emoji):not(.wp-smiley){ max-width:100% !important; }
  .entry-content .af-thumb img:not(.emoji):not(.wp-smiley),
  .entry-content figure.af-thumb img:not(.emoji):not(.wp-smiley){ max-width:300px !important; }
}

/* ---------- 접히는 목차 (새 형식) ---------- */
.entry-content .af-toc{
  margin-top:30px; margin-bottom:44px; border:1px solid #eaeaea; border-radius:12px; overflow:hidden;
  box-shadow:0 4px 15px rgba(0,0,0,.1); transition:all .3s ease;
}
.entry-content .af-toc:hover{ box-shadow:0 8px 25px rgba(0,0,0,.15); transform:translateY(-3px); }
.entry-content .af-toc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 25px; background:var(--af-key); color:var(--af-keytext);
  cursor:pointer; user-select:none; transition:background .3s ease;
}
.entry-content .af-toc-head:hover{ background:var(--af-dark); }
.entry-content .af-toc-title{ font-size:1.15rem; font-weight:600; letter-spacing:.5px; }
.entry-content .af-toc-icon{
  width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:6px solid currentColor; transition:transform .3s ease;
}
/* ★2026-07-29 수정(미르 발견: "목차가 안 열린다") — 기본값을 뒤집었다.
   이전에는 '닫힘'이 기본이고 JS가 af-open을 붙여야 열렸는데, 워드프레스가 본문의
   토글 <script>를 <p>로 감싸버려 JS가 통째로 죽어 있었다(→ 전 사이트 목차가 영영 닫힘).
   이제 CSS 기본이 '열림'이라 JS가 없거나 실패해도 목차는 항상 보인다.
   JS는 '접기'만 담당한다(af-closed를 붙였다 뗀다). af-open은 옛 글 호환용으로 남겨둔다. */
.entry-content .af-toc-body{
  background:#f8f9fa; overflow:hidden; max-height:2000px;
  transition:max-height .5s cubic-bezier(.5,0,.1,1);
}
.entry-content .af-toc-body.af-closed{ max-height:0; }
.entry-content .af-toc-body.af-open{ max-height:2000px; }
.entry-content .af-toc-list{ padding:24px 25px; }
.entry-content .af-toc-list ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.entry-content .af-toc-list li{ margin:0 0 14px !important; font-size:inherit !important; }
.entry-content .af-toc-list li:last-child{ margin-bottom:0 !important; }
.entry-content .af-toc-link{
  display:flex; align-items:center; padding:8px 12px; border-radius:6px;
  text-decoration:none !important; font-weight:500; word-break:keep-all; transition:all .25s ease;
}
.entry-content .af-toc-h2{
  color:#333 !important; background:rgba(0,0,0,.03); border-left:3px solid var(--af-key);
}
.entry-content .af-toc-h2:hover{
  color:var(--af-ink) !important; background:rgba(0,0,0,.05);
  transform:translateX(5px); border-left-width:5px;
}
.entry-content .af-toc-h2 span{ position:relative; padding-left:15px; }
.entry-content .af-toc-h2 span::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--af-key);
}
.entry-content .af-toc-h3{
  margin-left:20px; color:#555 !important; padding-left:15px; border-left:1px dashed #aaa;
}
.entry-content .af-toc-h3:hover{
  color:var(--af-ink) !important; background:rgba(0,0,0,.03);
  border-left-color:var(--af-key); transform:translateX(3px);
}
.entry-content .af-toc-h3 span{ font-size:.95rem; font-weight:400; }
.entry-content .af-toc-dot{ width:14px; height:14px; margin-right:8px; opacity:.6; flex-shrink:0; }
.entry-content .af-toc-h3:hover .af-toc-dot{ opacity:1; }

/* ---------- 표 가로 스크롤 상자 ---------- */
.entry-content .af-table-wrap{ overflow-x:auto; margin-top:30px; margin-bottom:30px; }
.entry-content .af-table-wrap table{ margin:0 !important; }

/* ---------- FAQ / 강조 인용 / 구분선 ---------- */
.entry-content .af-faq-q{
  font-size:18px !important; font-weight:700 !important; line-height:1.7 !important;
  margin-top:20px !important; margin-bottom:4px !important; padding:14px 18px !important;
  background:var(--af-tint) !important; border-left:4px solid var(--af-key) !important;
  border-radius:0 6px 6px 0 !important; word-break:normal;
}
.entry-content .af-faq-a{
  font-size:18px !important; line-height:1.85 !important;
  margin-top:0 !important; margin-bottom:26px !important;
  padding:14px 18px !important; background:#f8f8fb !important;
  border:1px solid #eaeaef !important; border-radius:6px !important; word-break:normal;
}
.entry-content .af-pull{
  font-size:22px !important; font-weight:700 !important; line-height:1.6 !important;
  text-align:center; color:var(--af-ink) !important;
  margin-top:36px !important; margin-bottom:36px !important;
  padding:0 20px !important; word-break:keep-all;
}
.entry-content hr.af-rule{
  border:0; height:1px; margin:2em 0;
  background:linear-gradient(to right,var(--af-key),transparent);
}

/* ---------- 함께 보면 좋은 글 (화살표 카드) ---------- */
.entry-content h2.af-centered{ text-align:center !important; }
.entry-content h2.af-centered::after{
  left:50%; transform:translateX(-50%) scaleX(.7); transform-origin:center;
}
.entry-content h2.af-centered:hover::after{ transform:translateX(-50%) scaleX(1); }
.entry-content .af-related-list{ display:flex; flex-direction:column; gap:15px; margin-top:36px; margin-bottom:36px; }
.entry-content .af-related{
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  padding:20px 25px; border-radius:12px; background:#fff;
  border:3px solid var(--af-shadow); box-shadow:0 3px 10px rgba(0,0,0,.05);
  text-decoration:none !important; position:relative; overflow:hidden; transition:all .3s ease;
}
.entry-content .af-related::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:var(--af-key); border-radius:4px 0 0 4px;
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease-out;
}
.entry-content .af-related:hover{ transform:translateX(5px); box-shadow:0 8px 20px var(--af-shadow); }
.entry-content .af-related:hover::before{ transform:scaleY(1); }
.entry-content .af-related-title{
  font-size:17px; font-weight:500; color:#333; line-height:1.45;
  flex:1; word-break:keep-all; transition:color .3s ease;
}
.entry-content .af-related:hover .af-related-title{ color:var(--af-ink); }
.entry-content .af-related-arrow{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; color:var(--af-key); transition:all .3s ease;
}
.entry-content .af-related:hover .af-related-arrow{ background:var(--af-key); color:#fff; }
.entry-content .af-related-arrow svg{ transition:transform .3s ease; }
.entry-content .af-related:hover .af-related-arrow svg{ transform:translateX(3px); }

/* ---------- 본문 중간 관련글 카드 ---------- */
.entry-content .af-inline-card{
  display:flex; gap:16px; align-items:center; background:#fff;
  border:3px solid var(--af-shadow); border-radius:12px; padding:16px 18px; margin-top:32px; margin-bottom:32px;
  box-shadow:0 3px 10px rgba(0,0,0,.05); text-decoration:none !important;
  position:relative; overflow:hidden; transition:all .3s ease;
}
.entry-content .af-inline-card::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:var(--af-key); border-radius:4px 0 0 4px;
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease-out;
}
.entry-content .af-inline-card:hover{ transform:translateX(5px); box-shadow:0 8px 20px var(--af-shadow); }
.entry-content .af-inline-card:hover::before{ transform:scaleY(1); }
.entry-content .af-inline-card-img{
  width:92px !important; height:92px !important; object-fit:cover;
  border-radius:8px !important; flex-shrink:0; margin:0 !important; box-shadow:none !important;
}
.entry-content .af-inline-card:hover .af-inline-card-img{ transform:none; }
.entry-content .af-inline-card-body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.entry-content .af-inline-card-label{
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--af-ink);
}
.entry-content .af-inline-card-title{
  font-size:16px; font-weight:700; color:#333; line-height:1.45;
  word-break:keep-all; transition:color .3s ease;
}
.entry-content .af-inline-card:hover .af-inline-card-title{ color:var(--af-ink); }

/* ---------- 목차 (기존 발행글용 — 옛 .toc 마크업) ---------- */
.entry-content .toc{
  background:#f8f9fa !important; border:1px solid #eaeaea !important;
  border-radius:12px !important; padding:0 !important; margin-top:30px !important; margin-bottom:40px !important;
  overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.08); transition:all .3s ease;
}
.entry-content .toc:hover{ box-shadow:0 8px 25px rgba(0,0,0,.13); transform:translateY(-3px); }
.entry-content .toc > p:first-child{
  background:var(--af-key) !important; color:var(--af-keytext) !important;
  margin:0 !important; padding:16px 25px !important;
  font-size:1.1rem !important; font-weight:600 !important; letter-spacing:.5px;
}
.entry-content .toc ul{ padding:20px 25px !important; margin:0 !important; }
.entry-content .toc ul ul{ padding:0 0 0 18px !important; }
.entry-content .toc a{ color:#333 !important; text-decoration:none !important; }
.entry-content .toc a:hover{ color:var(--af-ink) !important; }

/* ---------- 관련글 상자 / 인라인 카드 ---------- */
.entry-content .related-links-box{
  background:#fff !important; border:3px solid var(--af-shadow) !important;
  border-radius:12px !important; box-shadow:0 3px 10px rgba(0,0,0,.05);
  transition:all .3s ease;
}
.entry-content .related-links-box:hover{ box-shadow:0 8px 20px var(--af-shadow); }
.entry-content .inline-related-card{
  border:3px solid var(--af-shadow) !important; border-radius:12px !important;
  box-shadow:0 3px 10px rgba(0,0,0,.05) !important; transition:all .3s ease;
}
.entry-content .inline-related-card:hover{
  transform:translateX(5px); box-shadow:0 8px 20px var(--af-shadow) !important;
}

/* ---------- 새 글 전용 : 상단 요약 박스 / CTA 버튼 ---------- */
.entry-content .af-intro{
  margin-top:0; margin-bottom:40px; padding:44px; background:var(--af-key); color:var(--af-keytext);
  border-radius:16px; font-size:1.1rem; line-height:1.7; text-align:center;
  word-break:keep-all; box-shadow:0 3px 10px rgba(0,0,0,.05); transition:all .3s ease;
}
.entry-content .af-intro:hover{ box-shadow:0 5px 15px rgba(0,0,0,.1); transform:translateY(-2px); }
/* ★2026-07-29 수정(미르 발견) — 요약박스 안의 굵은 글씨가 배경과 같은 색이라 안 보였다.
   본문 strong은 --af-ink(어두운 브랜드색)를 쓰는데, 이 박스는 배경이 --af-key라서
   edukidsfund처럼 두 값이 같은 사이트에선 글자가 완전히 사라졌다(대비 1:1).
   → 박스 안에서는 배경 위 글자색(--af-keytext)으로 되돌리고, 밑줄로 강조를 살린다. */
.entry-content .af-intro strong,.entry-content .af-intro b{
  color:var(--af-keytext) !important;
  box-shadow:inset 0 -2px 0 currentColor; padding:0 2px; border-radius:0;
}
.entry-content .af-intro strong:hover,.entry-content .af-intro b:hover{
  background:rgba(255,255,255,.18);
}
/* ★2026-07-29 수정(미르 발견) — 목차가 요약박스보다 42px 좁아 보였다.
   워드프레스가 두 박스에 같은 width(645px)를 주는데, 요약박스는 content-box라
   좌우 padding 44px가 폭에 더해져 실제로는 689px로 그려졌기 때문이다.
   → 두 박스 모두 border-box로 통일해 바깥 폭을 같게 만든다. */
.entry-content .af-intro,.entry-content .af-toc{ box-sizing:border-box !important; }
.entry-content .af-cta-wrap{ display:flex; justify-content:center; margin-top:40px; margin-bottom:40px; }
.entry-content .af-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:90%; max-width:600px; min-height:76px; padding:18px 36px;
  color:#fff !important; font-weight:600;
  font-size:1.15rem; line-height:1.4; text-align:center; text-decoration:none !important;
  border-radius:50px; word-break:keep-all; box-shadow:0 4px 15px var(--af-shadow);
  background-color:var(--af-btnin);
  animation:afColorPulse 1s infinite ease-in-out;
  transition:transform .3s ease, box-shadow .3s ease;
}
/* 참고사이트와 같은 2색 왕복 깜빡임(1초 주기). 눈에 띄되 과하지 않게 4구간으로 나눈다. */
@keyframes afColorPulse{
  0%{   background-color:var(--af-btnin); }
  30%{  background-color:var(--af-btnin); }
  50%{  background-color:var(--af-btnout); }
  70%{  background-color:var(--af-btnin); }
  100%{ background-color:var(--af-btnin); }
}
.entry-content .af-cta:hover{
  animation:none; background-color:var(--af-btnout);
  transform:translateY(-4px) scale(1.02); box-shadow:0 12px 25px var(--af-shadow);
}
/* 움직임을 불편해하는 사용자 설정(접근성 표준)에서는 깜빡임을 끈다. */
@media (prefers-reduced-motion:reduce){
  .entry-content .af-cta{ animation:none; background-color:var(--af-btnout); }
}

@media (max-width:768px){
  .entry-content h2{ font-size:26px !important; margin-top:56px !important; margin-bottom:26px !important; }
  .entry-content h3{ font-size:21px !important; }
  .entry-content .af-intro{ padding:28px 22px; }
  .entry-content blockquote{ margin-top:28px !important; margin-bottom:28px !important; padding:20px 22px 20px 30px !important; }
}
/* === AUTOFARM ARTICLE FORMAT v2 : END === */

/* === AUTOFARM ARCHIVE LIST v1 : START ===
   카테고리·태그·검색 등 목록 페이지를 '제목 목록'으로 바꾼다. (2026-07-29 미르 확정)

   ★왜: 목록 페이지가 글 '전문'을 10개씩 통째로 뿌리고 있었다(실측 66,086px —
     화면 92개 분량 스크롤). 사용성도 최악이고, 같은 본문이 글 페이지와 목록
     페이지에 중복 존재해 SEO에도 불리했다.
   ★색은 글 형식 v2가 정의한 --af-key/--af-ink 변수를 그대로 쓴다(사이트별 자동).
   ★되돌리기: 이 블록만 지우고 자식테마 templates/archive.html을 삭제하면 원상복구.
   ============================================================================ */

/* ★제목: "[카테고리:]" 접두어는 functions.php 필터로 없앴다(미르 요청).
   대신 카테고리명 + 글 개수를 보여준다(네이버 목록의 "59개의 글"과 같은 방식). */
.af-archive .af-archive-title{
  margin:0 0 6px !important; word-break:keep-all; line-height:1.3;
}
.af-archive .af-archive-name{
  font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:#1a1a1a;
}
.af-archive .af-archive-count{
  font-size:.88rem; font-weight:500; color:#9a9aa2; margin-left:12px;
  vertical-align:middle;
}
.af-archive .af-archive-title::after{
  content:""; display:block; width:52px; height:4px; border-radius:2px;
  background:var(--af-key,#888); margin-top:14px;
}
.af-archive .af-archive-desc{ color:#6b6b70; font-size:.95rem; margin:0 0 6px; }

/* ---------- 카테고리 이동 칩 (미르 요청 — 카테고리 간 전환) ---------- */
/* ★칩 줄 아래 얇은 구분선(2026-07-29 미르 제안) — 칩은 '이동 도구', 그 아래는 '내용'이라
   성격이 달라서 선으로 한 번 끊어주면 시선이 정리된다. */
.af-catnav{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0 0 24px; padding-bottom:18px; border-bottom:1px solid #ececf0;
}
.af-catnav .af-cat{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px;
  border:1px solid #e4e4ea; background:#fff;
  font-size:.92rem; font-weight:500; color:#4a4a52;
  text-decoration:none !important; transition:all .18s ease; white-space:nowrap;
}
.af-catnav .af-cat:hover{
  border-color:var(--af-key,#888); color:var(--af-ink,#333);
  transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.af-catnav .af-cat.is-on{
  background:var(--af-key,#555); border-color:var(--af-key,#555);
  color:var(--af-keytext,#fff); font-weight:600;
}
.af-catnav .af-cat-n{
  font-size:.78rem; opacity:.65; font-variant-numeric:tabular-nums;
}
@media (max-width:600px){
  /* ★2026-07-29 미르 지적("카테고리가 짤림 현상") — 처음엔 가로 스크롤로 만들었는데,
     칩이 3~4개뿐이라 잘린 것처럼만 보였다. 줄바꿈이 맞다. */
  .af-catnav{ flex-wrap:wrap; overflow-x:visible; padding-bottom:14px; gap:7px; }
  .af-catnav .af-cat{ padding:8px 13px; font-size:.87rem; }
}

/* ---------- 목록 ---------- */
.af-archive .af-list{ margin-top:26px; }
.af-archive .af-list-body{
  display:block !important; margin:0 !important; padding:0 !important;
  list-style:none !important;
}
.af-archive .af-list-body > li{ margin:0 !important; padding:0 !important; }
.af-archive .af-list-body > li::marker{ content:""; }

.af-archive .af-row{
  display:flex !important; align-items:center; gap:18px;
  padding:18px 14px; margin:0 !important;
  border-bottom:1px solid #ececf0; border-radius:12px;
  transition:background .18s ease, transform .18s ease;
}
.af-archive .af-row:hover{ background:#f7f7fa; transform:translateX(3px); }

/* 썸네일 — 정사각 고정(우리 썸네일이 1:1이라 잘리지 않는다) */
.af-archive .af-row-thumb{ flex:0 0 auto; margin:0 !important; }
.af-archive .af-row-thumb img{
  width:92px !important; height:92px !important; aspect-ratio:1/1;
  object-fit:cover; border-radius:12px !important; display:block;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
}

.af-archive .af-row-body{ flex:1 1 auto; min-width:0; }
.af-archive .af-row-title{
  font-size:1.06rem !important; font-weight:600 !important; line-height:1.5 !important;
  margin:0 0 8px !important; word-break:keep-all;
}
.af-archive .af-row-title a{
  color:#1a1a1a !important; text-decoration:none !important;
  /* 두 줄까지만 보이고 넘치면 … 으로 자른다(줄이 들쭉날쭉해지지 않게) */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.af-archive .af-row:hover .af-row-title a{ color:var(--af-ink,#333) !important; }
.af-archive .af-row-date{
  font-size:.83rem !important; color:#9a9aa2 !important; margin:0 !important;
}

/* ---------- 페이지 번호 ---------- */
.af-archive .af-pager{
  margin-top:34px !important; gap:6px !important; flex-wrap:wrap;
}
.af-archive .af-pager .page-numbers,
.af-archive .af-pager .wp-block-query-pagination-previous,
.af-archive .af-pager .wp-block-query-pagination-next{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border:1px solid #e4e4ea; border-radius:10px;
  font-size:.92rem; color:#4a4a52; text-decoration:none !important;
  transition:all .18s ease;
}
.af-archive .af-pager a:hover{
  border-color:var(--af-key,#888); color:var(--af-ink,#333); background:#fafaff;
}
.af-archive .af-pager .page-numbers.current{
  background:var(--af-key,#555); border-color:var(--af-key,#555);
  color:var(--af-keytext,#fff); font-weight:600;
}
.af-archive .af-empty{ color:#8a8a92; padding:40px 0; text-align:center; }

/* ---------- 글 하단 '같은 카테고리 다른 글' (목록보다 작게) ---------- */
.af-more{
  margin:46px auto 0; max-width:645px;
  padding-top:30px; border-top:1px solid #ececf0;
}
.af-more-head{
  font-size:1.06rem !important; font-weight:700 !important; margin:0 0 16px !important;
  display:flex; align-items:baseline; gap:8px; color:#1a1a1a;
}
.af-more-head-sub{ font-size:.86rem; font-weight:500; color:#9a9aa2; }
.af-more-list{
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.af-more-list li{ margin:0 !important; padding:0 !important; }
.af-more-list li::marker{ content:""; }
.af-more-list a{
  display:flex; align-items:center; gap:14px;
  padding:11px 10px; border-radius:10px;
  text-decoration:none !important; color:inherit;
  transition:background .16s ease;
}
.af-more-list a:hover{ background:#f7f7fa; }
.af-more-thumb{
  flex:0 0 auto; width:56px !important; height:56px !important;
  object-fit:cover; border-radius:9px !important; display:block;
  box-shadow:0 1px 5px rgba(0,0,0,.08);
}
.af-more-noimg{ background:#f0f0f4; border-radius:9px; }
.af-more-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.af-more-title{
  font-size:.95rem; font-weight:500; line-height:1.45; color:#2a2a30;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;   /* 1줄 고정 */
}
.af-more-list a:hover .af-more-title{ color:var(--af-ink,#333); }
.af-more-date{ font-size:.78rem; color:#a3a3ab; }
.af-more-all{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  padding:10px 18px; border-radius:999px; border:1px solid #e4e4ea;
  font-size:.9rem; color:#4a4a52; text-decoration:none !important;
  transition:all .18s ease;
}
.af-more-all::after{ content:"→"; }
.af-more-all:hover{
  border-color:var(--af-key,#888); color:var(--af-ink,#333); background:#fafaff;
}

/* ---------- 이전 글 / 다음 글 카드 ---------- */
.af-postnav{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  max-width:645px; margin:34px auto 0;
}
.af-nav-card{
  display:flex; align-items:center; gap:12px;
  padding:14px; border:1px solid #ececf0; border-radius:14px;
  text-decoration:none !important; color:inherit; background:#fff;
  transition:all .18s ease; min-width:0;
}
.af-nav-card:hover{
  border-color:var(--af-key,#888); background:#fafaff;
  transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.af-nav-next{ flex-direction:row-reverse; text-align:right; }
.af-nav-thumb{
  flex:0 0 auto; width:52px !important; height:52px !important;
  object-fit:cover; border-radius:10px !important; display:block;
}
.af-nav-noimg{ background:#f0f0f4; }
.af-nav-body{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.af-nav-label{
  font-size:.76rem; font-weight:600; color:var(--af-ink,#666);
  letter-spacing:.02em;
}
.af-nav-prev .af-nav-label::before{ content:"← "; }
.af-nav-next .af-nav-label::after{ content:" →"; }
.af-nav-title{
  font-size:.92rem; line-height:1.45; color:#2a2a30;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.af-nav-card:hover .af-nav-title{ color:var(--af-ink,#333); }

/* ★2026-07-29 미르 발견 — 데스크톱에서 본문만 왼쪽으로 치우쳐 보이던 문제.
   글 레이아웃이 '본문 + 사이드바 300px' 2단인데, 사이드바(광고 자리)가 아직 비어 있다.
   그래서 본문은 왼쪽 열에 갇히고, 그 바깥에 있는 하단 목록·댓글은 페이지 중앙에 놓여
   서로 어긋나 보였다. 광고를 넣기 전까지는 1단으로 두어 본문을 화면 중앙에 맞춘다.
   ★애드센스 승인 후 사이드바에 광고를 넣을 때 이 규칙만 지우면 2단으로 돌아간다.
   ★글 페이지(.single)에만 적용한다 — 같은 접두어를 홈 레이아웃에도 쓰는 사이트가 있다. */
.single .sty-layout,.single .edu-layout,.single .eco-layout,
.single .hph-layout,.single .amo-layout{
  grid-template-columns:1fr !important; gap:0 !important;
}
.single .sty-sidebar,.single .edu-sidebar,.single .eco-sidebar,
.single .hph-sidebar,.single .amo-sidebar{ display:none !important; }

/* 글 페이지 상단 카테고리 칩은 본문 폭에 맞춘다 */
.single .af-catnav{ max-width:645px; margin-left:auto; margin-right:auto; }

/* ★★★2026-07-29 모바일 정렬 수정 (미르 지적: "중앙에 균형 있게 정렬되지 않는다")
   증상: 화면 375px인데 본문(.entry-content)이 477px로 102px 넘쳐, 가로 스크롤이 생기고
        본문만 오른쪽으로 밀려 하단 목록·이전다음 카드와 어긋나 보였다.
   원인: 글 레이아웃이 grid인데 `1fr`은 최소폭이 '내용 크기'라 자식이 컨테이너를 넘길 수 있고,
        본문 블록이 alignfull이라 부모 여백을 뚫는 계산까지 겹쳤다.
   처방: 좁은 화면에서 grid 열을 minmax(0,1fr)로 바꿔 자식이 컨테이너를 넘지 못하게 하고,
        본문의 alignfull 마진을 무효화한다. (실측: 본문 477px → 315px, 가로 스크롤 사라짐) */
@media (max-width:1024px){
  .edu-layout,.eco-layout,.hph-layout,.amo-layout,.sty-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .edu-article,.eco-article,.hph-article,.amo-article,.sty-article{
    min-width:0 !important; max-width:100% !important;
  }
  .entry-content.alignfull{
    width:auto !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
  }
  /* ★본문은 좌우 여백이 있는데(글자가 left 60에서 시작) 하단 목록·이전다음·칩은
     그 여백이 없어 left 30에서 시작했다 — 딱 30px씩 어긋나 보이던 원인.
     워드프레스가 쓰는 여백 변수를 그대로 받아 본문과 같은 선에 맞춘다.
     ★좌우만 지정한다 — margin/padding 단축속성을 쓰면 위아래 여백까지 덮어써서
       레이아웃이 깨진다(2026-07-28에 실제로 겪은 사고). */
  .single .af-catnav,.af-more,.af-postnav{
    box-sizing:border-box;
    padding-left:var(--wp--style--root--padding-left,30px);
    padding-right:var(--wp--style--root--padding-right,30px);
  }
}

/* ---------- 모바일 ---------- */
@media (max-width:600px){
  .af-archive .af-row{ gap:13px; padding:15px 8px; }
  .af-archive .af-row-thumb img{ width:72px !important; height:72px !important; }
  .af-archive .af-row-title{ font-size:.99rem !important; }
  .af-more-thumb{ width:48px !important; height:48px !important; }
  .af-more-title{ font-size:.9rem; }
  /* 좁은 화면에서는 이전/다음 카드를 위아래로 */
  .af-postnav{ grid-template-columns:1fr; }
  .af-nav-next{ flex-direction:row; text-align:left; }
}
/* === AUTOFARM ARCHIVE LIST v1 : END === */