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

:root{
  --edu-navy:#3c3489;
  --edu-navy-deep:#2a2566;
  --edu-sky:#5b46e0;
  --edu-sky-light:#e6e0ff;
  --edu-text:#1c2b3a;
  --edu-muted:#5b6b7c;
  --edu-white:#ffffff;
  --edu-border:#e5e0f2;
}

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

/* ═══ 발행글 상단: 슬림 고정헤더 + 포스트 히어로 (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(--edu-border);
}
header.wp-block-template-part .wp-block-site-title{
  font-weight:800; letter-spacing:-.6px; color:var(--edu-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(--edu-sky); border-radius:2px; transition:width .22s ease;
}
header.wp-block-template-part .wp-block-navigation-item__content:hover::after{ width:100%; }

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

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

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

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

/* ★2026-07-21: edu-post-header도 edu-layout과 같은 원인(부모 constrained 규칙)으로
   본문보다 안쪽으로 밀려 보이던 정렬 어긋남 수정 */
.edu-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(--edu-sky) !important;
  box-shadow:0 1px 3px rgba(60,52,137,.08), 0 1px 2px rgba(60,52,137,.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(--edu-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(--edu-navy) !important; }
.toc li[style*="margin:6px 0 0 18px"] > a{ color:var(--edu-muted) !important; }
.toc a:hover{ color:var(--edu-sky) !important; }
.toc a span{ color:var(--edu-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(--edu-sky) !important;
  box-shadow:0 1px 3px rgba(60,52,137,.08), 0 1px 2px rgba(60,52,137,.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(--edu-muted) !important;
}
.related-links-box ul a,
div[style*="background:#f7f7f9"] ul a{
  color:var(--edu-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(--edu-sky) !important;
}

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

/* ★2026-07-21: 푸터가 본문과 같은 흰색이라 구분이 안 되던 문제 — 연한 브랜드
   틴트 배경 + 상단 경계선으로 구분. */
footer.wp-block-template-part{
  background:var(--edu-sky-light);
  border-top:1px solid var(--edu-border);
}

/* ★2026-07-21: '답글 남기기' 폼이 역할 대비 지나치게 큼 — 실제 규모에 맞게 압축. */
.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;
}

/* ═══════════════════════════════════════════════════════════════════
   랜딩(메인)페이지 디자인 — 2026-07-21 복원.
   원래 Astra "추가 CSS"(custom_css post, efk- 접두사)에 있던 것이 테마 교체로
   떨어져나가 랜딩이 '날 것'으로 보이던 문제 수정. 검색창 알약·버튼형 칩·
   3단 카드 갤러리를 그대로 되살리고, 상단 여백제거만 블록테마 구조에 맞게 번역.
   ═══════════════════════════════════════════════════════════════════ */

/* 페이지 제목 '홈' 숨김 (Astra .entry-header → 블록테마 post-title) */
body.home .wp-block-post-title{ display:none !important; }

/* 상단 여백 제거 — 헤더 바로 밑에 히어로가 붙도록 (Astra #content/.ast-container 번역) */
body.home main{ margin-top:0 !important; }
body.home main > .wp-block-group{ padding-top:0 !important; }
body.home .wp-block-post-content{ margin-top:0 !important; }

/* 히어로 */
.efk-hero{ padding:56px 24px 64px; }
.efk-hero .wp-block-cover__inner-container{ max-width:760px; margin:0 auto; width:100%; }

/* 검색창 알약 (중앙 정렬 + 흰 알약 + 퍼플 버튼) */
.efk-search-pill{ display:flex; align-items:center; background:#ffffff; border-radius:30px; padding:4px 4px 4px 22px; max-width:600px; margin:0 auto 18px; }
.efk-search-pill input[type=search]{ flex:1; border:none; outline:none; font-size:16px; height:46px; background:transparent; line-height:46px; }
.efk-search-pill button{ background:#3c3489; color:#ffffff; border:none; border-radius:26px; height:46px; padding:0 26px; font-size:15px; white-space:nowrap; cursor:pointer; font-weight:500; }
.efk-search-pill button:hover{ background:#2c2566; }

/* 히어로 내부 흰 칩 */
.efk-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:600px; margin:0 auto; }
.efk-chips a{ background:rgba(255,255,255,.16); color:#ffffff; padding:6px 16px; border-radius:18px; font-size:13px; text-decoration:none; }
.efk-chips a:hover{ background:rgba(255,255,255,.28); }

/* 카테고리 버튼 (정부지원금·보육돌봄·육아용품생활) — 살짝 각진 사각버튼 */
.efk-cat-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:700px; margin:28px auto 0; padding:0 16px; }
.efk-cat-chips a{ background:#f1eefc; color:#3c3489; padding:9px 18px; border-radius:8px; border:1px solid #e3ddf9; font-size:14px; font-weight:600; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
.efk-cat-chips a:hover{ background:#e3ddf9; border-color:#c9bff2; }

/* 카테고리 ↔ 갤러리 사이 소제목 + 연한 구분선 (자연스러운 분리) */
.efk-latest-head{ margin-top:36px !important; margin-bottom:22px !important; padding-top:26px; border-top:1px solid #ececec; font-size:18px; font-weight:700; color:#3c3489; }

/* 최신글 3단 카드 갤러리 */
.wp-block-latest-posts.is-grid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.wp-block-latest-posts.is-grid li{ width:auto !important; margin:0 !important; box-sizing:border-box; background:#ffffff; border:1px solid #ececec; border-radius:12px; box-shadow:0 2px 14px rgba(28,43,58,.06); padding:0 0 16px; overflow:hidden; display:flex; flex-direction:column; }
.wp-block-latest-posts__featured-image{ overflow:hidden; border-radius:0; margin:0; order:1; }
.wp-block-latest-posts__featured-image a{ display:block; }
.wp-block-latest-posts__featured-image img{ width:100%; aspect-ratio:1 / 1; height:auto; object-fit:cover; border-radius:0; display:block; transition:transform .35s ease; }
.wp-block-latest-posts__featured-image a:hover img{ transform:scale(1.08); }
.wp-block-latest-posts__post-title{ display:block; font-weight:700; font-size:16px; line-height:1.4; margin:14px 16px 6px; order:2; }
.wp-block-latest-posts__post-excerpt{ font-size:13px; color:#777; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 16px 6px; order:3; }
.wp-block-latest-posts__post-date{ color:#aaa; font-size:12px; margin:0 16px; order:4; margin-top:auto; padding-top:6px; }

@media (max-width:680px){
  .wp-block-latest-posts.is-grid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
}

/* === AUTOFARM ARTICLE FORMAT v2 : START === */
:root{
  --af-key:#503add;                /* ← 사이트별로 이 줄만 교체 */
  --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:#503add;
  --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){
  /* 칩이 많아지면 가로로 밀어서 볼 수 있게(줄바꿈으로 화면을 잡아먹지 않게) */
  .af-catnav{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .af-catnav::-webkit-scrollbar{ display:none; }
}

/* ---------- 목록 ---------- */
.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; }

/* ---------- 모바일 ---------- */
@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; }
}
/* === AUTOFARM ARCHIVE LIST v1 : END === */