/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.0
*/

/* --- home layout --- */
/* 첫 화면 짜임새. 참고사이트 실측 구조를 옮긴 것이며, 색은 민트로 통일한다.
   ★배경 흐림 효과(backdrop-filter)는 쓰지 않는다 — 상단바에 걸면 모바일 메뉴가
     상단바 높이 안에 갇혀 안 펼쳐진다(2026-08-21에 5개 사이트에서 실제로 겪은 문제). */
:root{
  --brief-mint:#0E9E8F;
  --brief-deep:#0B4F47;
  --brief-soft:#E6F5F3;
  --brief-paper:#F7F4EE;
  --brief-edge:#E3DDCF;
  --brief-text:#3a3a3a;
  --brief-dim:#6b6b6b;
}

body.home{ background:var(--brief-paper); color:var(--brief-text); }
body.home *{ box-sizing:border-box; }

/* ---------- 상단 고정바 ---------- */
.brief-tapbox{ position:absolute; opacity:0; pointer-events:none; }
.brief-masthead{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--brief-edge);
}
.brief-masthead-in{
  max-width:1120px; margin:0 auto; padding:0 20px;
  height:64px; display:flex; align-items:center; justify-content:space-between;
}
.brief-wordmark{
  font-size:19px; font-weight:800; color:var(--brief-deep);
  text-decoration:none; letter-spacing:-.3px; word-break:keep-all;
}
.brief-links ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.brief-links a{
  font-size:15px; font-weight:600; color:var(--brief-text);
  text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;
}
.brief-links a:hover{ color:var(--brief-mint); border-bottom-color:var(--brief-mint); }
.brief-menutap{ display:none; }

/* ---------- 큰 인사말 ---------- */
.brief-cover{
  background:linear-gradient(180deg, var(--brief-soft) 0%, var(--brief-paper) 100%);
  border-bottom:1px solid var(--brief-edge);
}
.brief-cover-in{ max-width:840px; margin:0 auto; padding:64px 20px 58px; text-align:center; }
.brief-eyebrow{
  display:inline-block; margin:0 0 16px; padding:6px 15px;
  background:#fff; border:1px solid var(--brief-mint); border-radius:999px;
  font-size:13.5px; font-weight:700; color:var(--brief-mint); word-break:keep-all;
}
.brief-cover h1{
  margin:0 0 18px; font-size:38px; line-height:1.4; font-weight:800;
  color:var(--brief-deep); letter-spacing:-.6px; word-break:keep-all;
}
.brief-cover-sub{
  margin:0 auto 30px; max-width:640px;
  font-size:16.5px; line-height:1.8; color:var(--brief-dim); word-break:keep-all;
}
.brief-cover-sub strong{ color:var(--brief-deep); font-weight:700; }

.brief-find{ display:flex; gap:8px; max-width:560px; margin:0 auto; }
.brief-find input{
  flex:1; min-width:0; height:50px; padding:0 16px;
  border:1.5px solid var(--brief-edge); border-radius:10px;
  font-size:15px; background:#fff; color:var(--brief-text);
}
.brief-find input:focus{ outline:none; border-color:var(--brief-mint); }
.brief-find button{
  height:50px; padding:0 26px; border:0; border-radius:10px; cursor:pointer;
  background:var(--brief-mint); color:#fff; font-size:15.5px; font-weight:700;
}
.brief-find button:hover{ background:var(--brief-deep); }

/* ---------- 구역 공통 ---------- */
.brief-slab{ padding:62px 20px; }
.brief-slab-alt{ background:#fff; border-top:1px solid var(--brief-edge); border-bottom:1px solid var(--brief-edge); }
.brief-slab-in{ max-width:1080px; margin:0 auto; }
.brief-slab-tag{
  margin:0 0 8px; font-size:13.5px; font-weight:800; letter-spacing:.4px;
  color:var(--brief-mint); text-align:center;
}
.brief-slab-head{
  margin:0 0 38px; font-size:27px; font-weight:800; line-height:1.45;
  color:var(--brief-deep); text-align:center; word-break:keep-all;
}

/* ---------- 무엇을 다루나 4칸 ---------- */
.brief-quad{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.brief-quad-item{
  display:flex; flex-direction:column; gap:9px;
  background:#fff; border:1px solid var(--brief-edge); border-radius:14px;
  padding:26px 22px 22px; text-decoration:none; transition:border-color .15s, transform .15s;
}
.brief-quad-item:hover{ border-color:var(--brief-mint); transform:translateY(-2px); }
.brief-quad-name{ font-size:17.5px; font-weight:800; color:var(--brief-deep); word-break:keep-all; }
.brief-quad-desc{ font-size:14.5px; line-height:1.7; color:var(--brief-dim); word-break:keep-all; flex:1; }
.brief-quad-go{ font-size:13.5px; font-weight:700; color:var(--brief-mint); }
.brief-quad-go::after{ content:" →"; }

/* ---------- 최근 글 ---------- */
.brief-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.brief-tile{ background:var(--brief-paper); border:1px solid var(--brief-edge); border-radius:14px; overflow:hidden; }
.brief-tile > a{ display:block; text-decoration:none; color:inherit; height:100%; }
.brief-tile:hover{ border-color:var(--brief-mint); }
.brief-tile-pic{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--brief-soft); }
.brief-tile-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.brief-tile-body{ display:block; padding:18px 20px 20px; }
.brief-tile-name{
  display:block; font-size:16.5px; font-weight:700; line-height:1.5;
  color:var(--brief-deep); margin-bottom:8px; word-break:keep-all;
}
.brief-tile-cut{ display:block; font-size:14px; line-height:1.7; color:var(--brief-dim); margin-bottom:12px; }
.brief-tile-when{ display:block; font-size:12.5px; color:#9a9a9a; }
.brief-more{ margin:34px 0 0; text-align:center; }
.brief-more a{
  display:inline-block; padding:12px 32px; border-radius:999px;
  border:1.5px solid var(--brief-mint); color:var(--brief-mint);
  font-size:15px; font-weight:700; text-decoration:none;
}
.brief-more a:hover{ background:var(--brief-mint); color:#fff; }

/* ---------- 상황별로 보기 ---------- */
.brief-rail{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.brief-rail-item{
  background:#fff; border:1px solid var(--brief-edge); border-left:4px solid var(--brief-mint);
  border-radius:0 12px 12px 0; padding:20px 22px;
}
.brief-rail-name{ display:block; font-size:16px; font-weight:800; color:var(--brief-deep); margin-bottom:6px; word-break:keep-all; }
.brief-rail-desc{ display:block; font-size:14.5px; line-height:1.7; color:var(--brief-dim); word-break:keep-all; }
.brief-rail-note{ margin:26px 0 0; text-align:center; font-size:14.5px; color:var(--brief-dim); word-break:keep-all; }

/* ---------- 맺음 ---------- */
.brief-foot{ background:var(--brief-deep); color:#cfe6e2; padding:46px 20px 38px; }
.brief-foot-in{ max-width:1080px; margin:0 auto; text-align:center; }
.brief-foot-name{ margin:0 0 6px; font-size:18px; font-weight:800; color:#fff; }
.brief-foot-say{ margin:0 0 22px; font-size:14.5px; color:#a8ccc6; }
.brief-foot-links ul{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; list-style:none; margin:0 0 24px; padding:0; }
.brief-foot-links a{ font-size:14.5px; color:#cfe6e2; text-decoration:none; }
.brief-foot-links a:hover{ color:#fff; text-decoration:underline; }
.brief-foot-fine{
  margin:0 auto 18px; max-width:640px; font-size:13px; line-height:1.75;
  color:#8fbbb4; word-break:keep-all;
}
.brief-foot-copy{ margin:0; font-size:12.5px; color:#7aa9a2; }

/* ---------- 좁은 화면 ---------- */
@media (max-width:980px){
  .brief-quad{ grid-template-columns:repeat(2,1fr); }
  .brief-grid{ grid-template-columns:repeat(2,1fr); }
  .brief-rail{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .brief-cover-in{ padding:46px 20px 42px; }
  .brief-cover h1{ font-size:27px; }
  .brief-cover-sub{ font-size:15.5px; }
  .brief-slab{ padding:46px 18px; }
  .brief-slab-head{ font-size:22px; margin-bottom:28px; }
  .brief-quad, .brief-grid, .brief-rail{ grid-template-columns:1fr; }
  .brief-find{ flex-direction:column; }
  .brief-find button{ width:100%; }

  /* 상단바 메뉴 — 체크박스로 여닫는다. 자바스크립트 없이 동작한다.
     ★상단바에 흐림 효과가 없어야 이 펼침이 상단바 밖으로 나올 수 있다. */
  .brief-menutap{
    display:block; width:30px; height:24px; position:relative; cursor:pointer;
  }
  .brief-menutap span,
  .brief-menutap::before,
  .brief-menutap::after{
    content:""; position:absolute; left:0; width:100%; height:2.5px;
    background:var(--brief-deep); border-radius:2px; transition:.2s;
  }
  .brief-menutap::before{ top:3px; }
  .brief-menutap span{ top:11px; }
  .brief-menutap::after{ top:19px; }

  .brief-links{
    position:absolute; top:64px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--brief-edge);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .brief-links ul{ flex-direction:column; gap:0; padding:6px 20px 14px; }
  .brief-links li{ border-bottom:1px solid var(--brief-paper); }
  .brief-links a{ display:block; padding:14px 0; border-bottom:0; }
  .brief-tapbox:checked ~ .brief-masthead .brief-links{ max-height:70vh; overflow-y:auto; }
  .brief-tapbox:checked ~ .brief-masthead .brief-menutap span{ opacity:0; }
  .brief-tapbox:checked ~ .brief-masthead .brief-menutap::before{ top:11px; transform:rotate(45deg); }
  .brief-tapbox:checked ~ .brief-masthead .brief-menutap::after{ top:11px; transform:rotate(-45deg); }
}
/* --- /home layout --- */

/* --- article layout --- */
:root{
  --brief-key:#0E9E8F;                /* ← 사이트별로 이 줄만 교체 */
  --brief-keytext:#ffffff;
  /* ★CTA 버튼 색은 사이트 대표색(--brief-key)과 일부러 다르게 둔다(2026-07-29 미르 지시:
     "너무 똑같으면 별로"). 아래 2색이 1초 주기로 왕복하며 깜빡인다.
     ★참고사이트가 쓰던 코랄(#FF6B6B)은 일부러 피했다(2026-07-29 미르: "샘플과 너무 같으면 안 된다").
     사이트별 권장값 — homepricehub(파랑)·edukidsfund(보라): 앰버→딥오렌지
                      econolifehub(연두)·story(초록): 앰버→진자주
                      blog.automode(살구): 딥틸→네이비 */
  --brief-btnin:#F2994A;              /* CTA 깜빡임 A (앰버) */
  --brief-btnout:#D9552B;             /* CTA 깜빡임 B (딥오렌지) */
  /* ★2026-07-29 신설 — 대표색을 '글자색'으로 그대로 쓰면 밝은 사이트(연두·초록·살구)는
     흰 배경에서 대비 1.9~2.7:1로 거의 안 보인다. 배경·테두리엔 --brief-key, 글자엔 --brief-ink를 쓴다.
     ink 값은 대비 4.5:1(WCAG AA)을 넘도록 사이트별로 계산해 넣는다. */
  --brief-ink:#0B7A6E;
  --brief-tint:color-mix(in srgb, var(--brief-key) 10%, transparent);
  --brief-tint-2:color-mix(in srgb, var(--brief-key) 5%, transparent);
  --brief-shadow:color-mix(in srgb, var(--brief-key) 15%, transparent);
  --brief-dark:color-mix(in srgb, var(--brief-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(--brief-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(--brief-key),transparent);
  border-radius:4px; transition:all .3s ease;
}
.entry-content h3:hover::before{ height:28px; background:var(--brief-key); }

/* ---------- 강조 : 색으로만(굵기는 낮춤) ---------- */
.entry-content strong,.entry-content b{
  color:var(--brief-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(--brief-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(--brief-key) !important; color:var(--brief-keytext) !important;
}
.entry-content th{
  padding:14px 16px !important; text-align:center !important; font-weight:600 !important;
  color:var(--brief-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(--brief-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(--brief-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 .brief-thumb{ margin-top:0 !important; margin-bottom:34px !important; text-align:center; }
.entry-content .brief-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(--brief-shadow) !important;
}
/* ★2026-07-29 수정(미르 발견) — 데스크톱인데도 썸네일이 300px로 작게 나왔다.
   위 규칙(420px)이 다른 무언가에 우선순위로 지고 있어, 선택자를 figure까지 명시해
   확실히 이기게 한다. 배포 후 실제 화면에서 폭을 재서 확인할 것. */
.entry-content figure.brief-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 .brief-thumb img:not(.emoji):not(.wp-smiley),
  .entry-content figure.brief-thumb img:not(.emoji):not(.wp-smiley){ max-width:300px !important; }
}

/* ---------- 접히는 목차 (새 형식) ---------- */
.entry-content .brief-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 .brief-toc:hover{ box-shadow:0 8px 25px rgba(0,0,0,.15); transform:translateY(-3px); }
.entry-content .brief-toc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 25px; background:var(--brief-key); color:var(--brief-keytext);
  cursor:pointer; user-select:none; transition:background .3s ease;
}
.entry-content .brief-toc-head:hover{ background:var(--brief-dark); }
.entry-content .brief-toc-title{ font-size:1.15rem; font-weight:600; letter-spacing:.5px; }
.entry-content .brief-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 .brief-toc-body{
  background:#f8f9fa; overflow:hidden; max-height:2000px;
  transition:max-height .5s cubic-bezier(.5,0,.1,1);
}
.entry-content .brief-toc-body.brief-closed{ max-height:0; }
.entry-content .brief-toc-body.brief-open{ max-height:2000px; }
.entry-content .brief-toc-list{ padding:24px 25px; }
.entry-content .brief-toc-list ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
.entry-content .brief-toc-list li{ margin:0 0 14px !important; font-size:inherit !important; }
.entry-content .brief-toc-list li:last-child{ margin-bottom:0 !important; }
.entry-content .brief-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 .brief-toc-h2{
  color:#333 !important; background:rgba(0,0,0,.03); border-left:3px solid var(--brief-key);
}
.entry-content .brief-toc-h2:hover{
  color:var(--brief-ink) !important; background:rgba(0,0,0,.05);
  transform:translateX(5px); border-left-width:5px;
}
.entry-content .brief-toc-h2 span{ position:relative; padding-left:15px; }
.entry-content .brief-toc-h2 span::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--brief-key);
}
.entry-content .brief-toc-h3{
  margin-left:20px; color:#555 !important; padding-left:15px; border-left:1px dashed #aaa;
}
.entry-content .brief-toc-h3:hover{
  color:var(--brief-ink) !important; background:rgba(0,0,0,.03);
  border-left-color:var(--brief-key); transform:translateX(3px);
}
.entry-content .brief-toc-h3 span{ font-size:.95rem; font-weight:400; }
.entry-content .brief-toc-dot{ width:14px; height:14px; margin-right:8px; opacity:.6; flex-shrink:0; }
.entry-content .brief-toc-h3:hover .brief-toc-dot{ opacity:1; }

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

/* ---------- FAQ / 강조 인용 / 구분선 ---------- */
.entry-content .brief-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(--brief-tint) !important; border-left:4px solid var(--brief-key) !important;
  border-radius:0 6px 6px 0 !important; word-break:normal;
}
.entry-content .brief-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 .brief-pull{
  font-size:22px !important; font-weight:700 !important; line-height:1.6 !important;
  text-align:center; color:var(--brief-ink) !important;
  margin-top:36px !important; margin-bottom:36px !important;
  padding:0 20px !important; word-break:keep-all;
}
.entry-content hr.brief-rule{
  border:0; height:1px; margin:2em 0;
  background:linear-gradient(to right,var(--brief-key),transparent);
}

/* ---------- 함께 보면 좋은 글 (화살표 카드) ---------- */
.entry-content h2.brief-centered{ text-align:center !important; }
.entry-content h2.brief-centered::after{
  left:50%; transform:translateX(-50%) scaleX(.7); transform-origin:center;
}
.entry-content h2.brief-centered:hover::after{ transform:translateX(-50%) scaleX(1); }
.entry-content .brief-related-list{ display:flex; flex-direction:column; gap:15px; margin-top:36px; margin-bottom:36px; }
.entry-content .brief-related{
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  padding:20px 25px; border-radius:12px; background:#fff;
  border:3px solid var(--brief-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 .brief-related::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:var(--brief-key); border-radius:4px 0 0 4px;
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease-out;
}
.entry-content .brief-related:hover{ transform:translateX(5px); box-shadow:0 8px 20px var(--brief-shadow); }
.entry-content .brief-related:hover::before{ transform:scaleY(1); }
.entry-content .brief-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 .brief-related:hover .brief-related-title{ color:var(--brief-ink); }
.entry-content .brief-related-arrow{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:40px; border-radius:50%; color:var(--brief-key); transition:all .3s ease;
}
.entry-content .brief-related:hover .brief-related-arrow{ background:var(--brief-key); color:#fff; }
.entry-content .brief-related-arrow svg{ transition:transform .3s ease; }
.entry-content .brief-related:hover .brief-related-arrow svg{ transform:translateX(3px); }

/* ---------- 본문 중간 관련글 카드 ---------- */
.entry-content .brief-inline-card{
  display:flex; gap:16px; align-items:center; background:#fff;
  border:3px solid var(--brief-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 .brief-inline-card::before{
  content:""; position:absolute; left:0; top:0; height:100%; width:4px;
  background:var(--brief-key); border-radius:4px 0 0 4px;
  transform:scaleY(0); transform-origin:top; transition:transform .4s ease-out;
}
.entry-content .brief-inline-card:hover{ transform:translateX(5px); box-shadow:0 8px 20px var(--brief-shadow); }
.entry-content .brief-inline-card:hover::before{ transform:scaleY(1); }
.entry-content .brief-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 .brief-inline-card:hover .brief-inline-card-img{ transform:none; }
.entry-content .brief-inline-card-body{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.entry-content .brief-inline-card-label{
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--brief-ink);
}
.entry-content .brief-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 .brief-inline-card:hover .brief-inline-card-title{ color:var(--brief-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(--brief-key) !important; color:var(--brief-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(--brief-ink) !important; }

/* ---------- 관련글 상자 / 인라인 카드 ---------- */
.entry-content .related-links-box{
  background:#fff !important; border:3px solid var(--brief-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(--brief-shadow); }
.entry-content .inline-related-card{
  border:3px solid var(--brief-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(--brief-shadow) !important;
}

/* ---------- 새 글 전용 : 상단 요약 박스 / CTA 버튼 ---------- */
.entry-content .brief-intro{
  margin-top:0; margin-bottom:40px; padding:44px; background:var(--brief-key); color:var(--brief-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 .brief-intro:hover{ box-shadow:0 5px 15px rgba(0,0,0,.1); transform:translateY(-2px); }
/* ★2026-07-29 수정(미르 발견) — 요약박스 안의 굵은 글씨가 배경과 같은 색이라 안 보였다.
   본문 strong은 --brief-ink(어두운 브랜드색)를 쓰는데, 이 박스는 배경이 --brief-key라서
   edukidsfund처럼 두 값이 같은 사이트에선 글자가 완전히 사라졌다(대비 1:1).
   → 박스 안에서는 배경 위 글자색(--brief-keytext)으로 되돌리고, 밑줄로 강조를 살린다. */
.entry-content .brief-intro strong,.entry-content .brief-intro b{
  color:var(--brief-keytext) !important;
  box-shadow:inset 0 -2px 0 currentColor; padding:0 2px; border-radius:0;
}
.entry-content .brief-intro strong:hover,.entry-content .brief-intro b:hover{
  background:rgba(255,255,255,.18);
}
/* ★2026-07-29 수정(미르 발견) — 목차가 요약박스보다 42px 좁아 보였다.
   워드프레스가 두 박스에 같은 width(645px)를 주는데, 요약박스는 content-box라
   좌우 padding 44px가 폭에 더해져 실제로는 689px로 그려졌기 때문이다.
   → 두 박스 모두 border-box로 통일해 바깥 폭을 같게 만든다. */
.entry-content .brief-intro,.entry-content .brief-toc{ box-sizing:border-box !important; }
.entry-content .brief-cta-wrap{ display:flex; justify-content:center; margin-top:40px; margin-bottom:40px; }
.entry-content .brief-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(--brief-shadow);
  background-color:var(--brief-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(--brief-btnin); }
  30%{  background-color:var(--brief-btnin); }
  50%{  background-color:var(--brief-btnout); }
  70%{  background-color:var(--brief-btnin); }
  100%{ background-color:var(--brief-btnin); }
}
.entry-content .brief-cta:hover{
  animation:none; background-color:var(--brief-btnout);
  transform:translateY(-4px) scale(1.02); box-shadow:0 12px 25px var(--brief-shadow);
}
/* 움직임을 불편해하는 사용자 설정(접근성 표준)에서는 깜빡임을 끈다. */
@media (prefers-reduced-motion:reduce){
  .entry-content .brief-cta{ animation:none; background-color:var(--brief-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 .brief-intro{ padding:28px 22px; }
  .entry-content blockquote{ margin-top:28px !important; margin-bottom:28px !important; padding:20px 22px 20px 30px !important; }
}
/* --- /article layout --- */

/* ---------- 문단마다 박스 (2026-08-24) ----------
   대제목 하나가 카드 한 장. 카드 밖에 남는 것: 썸네일·고지문·요약박스·목차.
   본문을 감싸는 일은 발행 단계가 하고, 여기서는 보이는 모양만 담당한다. */
.entry-content .brief-card{
  background:#ffffff;
  border:1px solid #E6E2D8;
  border-radius:14px;
  padding:30px 30px 26px;
  margin:0 0 18px;
}
.entry-content .brief-card > :first-child{ margin-top:0 !important; }
.entry-content .brief-card > :last-child{ margin-bottom:0 !important; }
.entry-content .brief-card h2{ margin-top:0 !important; margin-bottom:18px !important; }
.entry-content .brief-card h3{ margin-top:30px !important; }
.entry-content .brief-card > h3:first-child{ margin-top:0 !important; }
.entry-content .brief-card .brief-table-wrap{ margin-bottom:0; }

@media (max-width:768px){
  .entry-content .brief-card{ padding:22px 18px 20px; border-radius:12px; margin-bottom:14px; }
  .entry-content .brief-card h2{ margin-bottom:15px !important; }
}

/* --- card headings ---
   카드 안 대제목은 미리보기에서 승인받은 모양으로 맞춘다:
   진한 민트 글자 + 민트 밑줄. 카드가 이미 경계를 만들어 주므로
   카드 밖에서 쓰던 그라데이션 막대는 카드 안에서만 끈다. */
.entry-content .brief-card h2{
  font-size:21px !important;
  color:var(--brief-deep) !important;
  padding-bottom:11px !important;
  border-bottom:2px solid var(--brief-mint) !important;
}
.entry-content .brief-card h2::after{ display:none !important; }
.entry-content .brief-card h3{
  font-size:18px !important;
  color:var(--brief-deep) !important;
}
/* 도입 문단 — 카드 앞에 놓이는 한 문장 */
.entry-content .brief-lead{
  font-size:17px; line-height:1.8; font-weight:500;
  color:var(--brief-deep); margin:0 0 22px; word-break:keep-all;
}
@media (max-width:768px){
  .entry-content .brief-card h2{ font-size:19px !important; }
  .entry-content .brief-lead{ font-size:15.5px; }
}
/* --- /card headings --- */