/*
Theme Name: 출처 있는 생활정보 (chulcheo)
Author: 생활정보지기
Description: 출처 있는 생활정보 전용 테마 — 확정 시안 v9(branding_site/mockup)을 그대로 옮김. 밝은 화면 고정, 매거진형 홈(오른쪽 세로 사이드), 글 위 확인 상자·접은 목차·강조 상자.
Version: 1.0
Requires PHP: 8.0
Text Domain: chulcheo
*/

/* 레이아웃: 매거진형 생활 정보 사이트 — 머리(로고·검색) → 카테고리 메뉴(고정) → 홈: 대표 글 + 최근 글 → 카테고리별 3칸 묶음 → 푸터(필수 페이지).
   글 화면: 이동 경로 → 제목 → 작성자·날짜 → 대표 이미지 → 본문(요약 상자·목차·표·FAQ·출처) → 편집자 상자 → 같은 카테고리 글 */
:root {
  --bg: #f5f7f6;
  --paper: #ffffff;
  --ink: #1b2422;
  --muted: #5d6a66;
  --line: #e0e6e3;
  --teal: #0f5c55;
  --teal-ink: #0b4a44;
  --teal-soft: #e8f2f0;
  --gold: #a9853f;
  --thumb-a: #0f5c55;
  --thumb-b: #174f49;
  --warn-bg: #fff6e5; --warn-line: #d98a00;
  --tip-bg: #eef8f1; --tip-line: #2e9d5b;
  --sum-bg: #e8f2f0; --sum-line: #0f5c55;
  --font-head: "Noto Serif KR", "Nanum Myeongjo", serif;
  --font-body: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
/* 밝은 화면 하나로 고정 (10/19 사용자: 검정 배경 거부감 — 생활 정보 사이트·광고는 흰 바탕 기준) */
:root, :root[data-theme="dark"] { color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--teal-ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* 머리 */
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px 14px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 56px; width: auto; display: block; }
.brand .logo-dark { display: none; }
.tagline { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.search { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg); min-width: 0; flex: 0 1 300px; }
.search input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; padding: 8px 14px; min-width: 0; flex: 1; }
.search input:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 999px; }
.search button { border: 0; background: var(--teal); color: var(--paper); font: inherit; font-size: 14px; padding: 0 16px; cursor: pointer; }
.search-note { width: 100%; font-size: 13px; color: var(--muted); margin: 0; }

/* 카테고리 메뉴 (고정) */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.catnav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-bottom: 2px solid var(--teal); }
.catnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.catnav a { flex: none; padding: 12px 12px 10px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 15px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.catnav a:hover, .catnav a[aria-current="page"] { color: var(--teal-ink); border-bottom-color: var(--gold); }
.catnav .home-link { font-weight: 700; }
.catnav .spacer { flex: 1; }

main { padding-block: 28px 56px; }
.view { display: grid; gap: 28px; }

/* 홈 */
.trust { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: var(--teal-soft); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.trust strong { color: var(--teal-ink); }
.top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; }
.latest { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.latest h2 { font-family: var(--font-head); font-size: 1.1rem; margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.latest ol { list-style: none; margin: 0; padding: 0; display: grid; }
.latest li + li { border-top: 1px solid var(--line); }
.latest a { display: grid; gap: 2px; padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 500; line-height: 1.5; }
.latest a:hover { color: var(--teal-ink); }
.cat-block { display: grid; gap: 14px; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.cat-head h2 { font-family: var(--font-head); font-size: 1.35rem; margin: 0; }
.cat-head a { font-size: 14px; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* v7: 대표 글 아래 요약·함께 볼 글, 카테고리 = 큰 카드 1 + 글 목록 */
.lead-col { display: grid; gap: 18px; align-content: start; }
.lead-excerpt { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.sub-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--line); }
.sub-list a, .row-list a { display: grid; gap: 2px; padding: 12px 0; text-decoration: none; color: var(--ink); }
.sub-list strong, .row-list strong { font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.45; }
.sub-list a:hover strong, .row-list a:hover strong { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cat-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.row-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cat-row .row-list .kicker { display: none; }
.row-list li { border-bottom: 1px solid var(--line); }
.row-list li:first-child a { padding-top: 0; }
.row-list p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .cat-row, .sub-list { grid-template-columns: minmax(0, 1fr); } .sub-list li + li { border-top: 1px solid var(--line); } }

/* v8: 폭 1240, 홈 오른쪽 세로 사이드(최근 글·이달의 일정·기관 바로가기). 휴대폰은 대표 글 → 사이드 → 나머지 */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto 1fr;
  grid-template-areas: "lead side" "rest side"; gap: 28px 32px; }
.h-lead { grid-area: lead; } .h-lead .thumb.big { aspect-ratio: 2 / 1; } .h-rest { grid-area: rest; display: grid; gap: 28px; align-content: start; } 
.h-side { grid-area: side; display: grid; gap: 16px; align-content: start; }
.h-side .agencies { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; gap: 6px; }
.h-side .agencies h2 { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 4px; }
.h-side .agency-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.h-side .agency { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; border: 0; border-radius: 0; border-top: 1px solid var(--line); padding: 9px 0; background: none; }
.h-side .agency:first-child { border-top: 0; }
.h-side .agency span { text-align: right; }
.h-side .agency:hover b { text-decoration: underline; text-underline-offset: 3px; }
.h-rest .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "lead" "side" "rest"; }
  .h-side .agency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .h-side .agency:nth-child(2) { border-top: 0; }
}
@media (max-width: 520px) { .h-rest .guide-grid { grid-template-columns: minmax(0, 1fr); } .h-side .agency span { display: none; } }

/* 카드 */
.card-link { display: grid; gap: 10px; text-decoration: none; color: var(--ink); }
.card-link:hover h3 { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.card-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 8px; }
.card-body { display: grid; gap: 4px; }
.card h3 { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.45; margin: 0; text-wrap: balance; }
.card.lead h3 { font-size: clamp(1.3rem, 3vw, 1.75rem); }
.kicker { font-size: 12px; font-weight: 700; color: var(--teal-ink); letter-spacing: .03em; }
.date { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }

/* 대표 이미지 = 글자 카드 (AI 그림 아님) */
.thumb { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 10px; background: linear-gradient(140deg, var(--thumb-a), var(--thumb-b));
  display: grid; align-content: center; justify-items: center; gap: 6px; padding: 12px; text-align: center; overflow: hidden; }
.t-label { font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: .28em; color: #e8cf9c; }
.t-word { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: #ffffff; line-height: 1.25; word-break: keep-all; }
.t-rule { width: 38%; height: 2px; background: #c9a565; }
.thumb.big .t-label { font-size: 13px; }
.thumb.c2 { background: linear-gradient(140deg, #1d4f6b, #173f56); }
.thumb.c3 { background: linear-gradient(140deg, #2e3a4f, #232d3e); }
.thumb.c4 { background: linear-gradient(140deg, #4b3b2a, #3a2d20); }
.thumb.c5 { background: linear-gradient(140deg, #3f5a3a, #31482d); }
.thumb.big .t-word { font-size: clamp(1.6rem, 5vw, 2.6rem); }

/* 글·페이지 공통 */
.crumb { font-size: 14px; color: var(--muted); }
.crumb a { color: var(--muted); }
.page-title { font-family: var(--font-head); font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.35; margin: 0; text-wrap: balance; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.article-main { display: grid; gap: 18px; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px clamp(16px, 4vw, 40px); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.byline strong { color: var(--ink); font-weight: 500; }
.prose { max-width: 680px; overflow-wrap: break-word; }
.prose.page { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px clamp(16px, 4vw, 36px); max-width: 760px; }
.prose h2 { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.45; margin: 2em 0 .6em; padding-bottom: .3em; border-bottom: 2px solid var(--teal); text-wrap: balance; }
.prose h3 { font-size: 1.08rem; margin: 1.5em 0 .4em; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: .25em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 1em 0; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--teal-soft); font-weight: 700; white-space: nowrap; }
.prose em { color: var(--muted); font-size: 14px; }
.prose aside.callout { margin: 1.4em 0; padding: 1em 1.2em; border-left: 4px solid var(--line); border-radius: 8px; background: var(--bg); }
.prose aside.callout > :last-child { margin-bottom: 0; }
.prose aside.callout ul { margin-bottom: 0; }
.prose aside.callout-summary { background: var(--sum-bg); border-left-color: var(--sum-line); }
.prose aside.callout-tip { background: var(--tip-bg); border-left-color: var(--tip-line); }
.prose aside.callout-warning { background: var(--warn-bg); border-left-color: var(--warn-line); }
/* 코드가 만드는 목차 (본문의 「목차」 문단 + 목록) */
.prose p:has(> strong:only-child) + ul:has(a[href^="#"]) { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px 12px 2em; }
.checked { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px; background: var(--teal-soft); border-radius: 8px; padding: 10px 14px; }
.checked strong { color: var(--teal-ink); }
.checked span { color: var(--muted); }
.prose aside.callout-note { background: var(--teal-soft); border-left-color: var(--teal); font-size: 14px; }
.prose aside.callout-note strong { color: var(--teal-ink); }
.prose details { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px; margin: 0 0 1em; }
.prose details summary { cursor: pointer; font-weight: 700; }
.prose details ul { margin: 8px 0 0; }
.cat-desc { margin: -12px 0 0; color: var(--muted); max-width: 680px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 13px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 10px; }
.editor { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 18px; }
.editor img { width: 56px; height: 56px; border-radius: 12px; }
.editor p { margin: 0; font-size: 14px; color: var(--muted); }
.editor strong { color: var(--ink); }
.side { display: grid; gap: 20px; position: sticky; top: 70px; }
.side-box { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; }
.side-box h2 { font-family: var(--font-head); font-size: 1.05rem; margin: 0; }
.side-box p { margin: 0; font-size: 14px; color: var(--muted); }
.side-box .grid { grid-template-columns: 1fr; gap: 16px; }
.popular { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 14px; }
.popular a { color: var(--ink); text-decoration: none; }
.popular a:hover { color: var(--teal-ink); text-decoration: underline; }
.related h2 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 12px; }
.sample-note { background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 8px; }
.sample-note p { margin: 0; }

/* 자주 찾는 기관 (글자 버튼 — 기관 로고는 쓰지 않음) */
.agencies { display: grid; gap: 10px; }
.agencies h2, .guides h2 { font-family: var(--font-head); font-size: 1.15rem; margin: 0; }
.agency-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.agency { display: grid; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-decoration: none; color: var(--ink); }
.agency:hover { border-color: var(--teal); }
.agency:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.agency b { font-size: 15px; color: var(--teal-ink); }
.agency span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.agency-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.ag-sec { scroll-margin-top: 64px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.ag-sec:last-child { border-bottom: 0; }
.ag-go { font-weight: 700; }
/* 상황별 안내 */
.guides { display: grid; gap: 10px; }
.guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.guide { display: grid; gap: 6px; align-content: start; background: var(--teal-soft); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.guide:hover h3 { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.guide h3 { font-family: var(--font-head); font-size: 1.02rem; margin: 0; line-height: 1.45; }
.guide span { font-size: 13px; color: var(--muted); }
.steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.steps > li { counter-increment: st; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.steps > li::before { content: counter(st); font-family: var(--font-head); font-weight: 900; color: var(--teal-ink); font-size: 1.3rem; line-height: 1.4; }
.steps h3 { margin: 0 0 4px; font-size: 1.02rem; }
.steps p { margin: 0; font-size: 14px; color: var(--muted); }
.steps a { font-weight: 500; }
.guide-agencies { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-agencies a { font-size: 14px; border: 1px solid var(--teal); border-radius: 999px; padding: 4px 12px; text-decoration: none; color: var(--teal-ink); background: var(--paper); }
.prose aside.callout-note p + p { margin-top: 6px; }
.view h2.sub { font-family: var(--font-head); font-size: 1.1rem; margin: 8px 0 0; }
@media (max-width: 900px) { .agency-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .agency-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* 이달의 신청 일정 */
.side-stack { display: grid; gap: 16px; align-content: start; }
.cal-box { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; display: grid; gap: 8px; }
.cal-box h2 { font-family: var(--font-head); font-size: 1.05rem; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cal-box h2 a { font-family: var(--font-body); font-size: 13px; font-weight: 400; text-decoration: none; }
.cal-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cal-box li { display: grid; gap: 1px; font-size: 14px; }
.cal-box li span { font-size: 12.5px; color: var(--muted); }
.cal-box li.on span { color: var(--teal-ink); font-weight: 700; }
.sch-month { display: grid; gap: 10px; }
.sch-month h2 { font-family: var(--font-head); font-size: 1.2rem; margin: 6px 0 0; padding-bottom: 6px; border-bottom: 2px solid var(--teal); }
.sch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 820px; }
.sch { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.sch.done { opacity: .6; }
.sch-when { display: grid; gap: 2px; align-content: start; }
.sch-when b { font-variant-numeric: tabular-nums; }
.sch-when span { font-size: 13px; color: var(--teal-ink); font-weight: 700; }
.sch-what { display: grid; gap: 4px; min-width: 0; }
.sch-what h3 { margin: 0; font-size: 1.02rem; }
.sch-basis { font-size: 12.5px; color: var(--muted); }
.sch-note { font-size: 14px; }
.sch-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.sch-empty, .sch-foot { color: var(--muted); font-size: 14px; margin: 0; max-width: 820px; }
@media (max-width: 520px) { .sch { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* 푸터 */
footer { background: var(--paper); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
footer .wrap { display: grid; gap: 12px; padding-block: 28px 36px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-links.cats a { color: var(--muted); font-weight: 400; }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.foot-links a:hover { color: var(--teal-ink); text-decoration: underline; }
footer p { margin: 0; }

@media (max-width: 900px) {
  .article { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
}
@media (max-width: 760px) {
  .top { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .brand img { height: 44px; }
  .search { flex: 1 1 100%; }
}
@media (min-width: 761px) and (max-width: 900px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) { .card-link .thumb { transition: transform .2s ease; } .card-link:hover .thumb { transform: translateY(-2px); } }

/* ---- 워드프레스용 덧붙임 ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand-text { font-family: var(--font-head); font-weight: 900; font-size: 1.4rem; color: var(--ink); }
.brand-text b { color: var(--teal); }
.thumb-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--teal-soft); }
.h-lead .thumb-img { aspect-ratio: 16 / 9; }   /* 대표 이미지 카드는 16:9 — 2:1로 자르면 아래 「출처 있는 생활정보」가 잘림 */
.article-main .thumb-img { aspect-ratio: auto; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; }
.prose figure { margin: 1.4em 0; }
.prose figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 6px; }
.prose a { text-underline-offset: 3px; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.pager .page-numbers { min-width: 40px; text-align: center; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-decoration: none; color: var(--ink); }
.pager .current { background: var(--teal); color: var(--paper); border-color: var(--teal); }
.empty-note { background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 24px; color: var(--muted); }
.updated { color: var(--teal-ink); }
.search-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; }
.search-list li { border-bottom: 1px solid var(--line); }
.search-list a { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; color: var(--ink); }
.search-list strong { font-family: var(--font-head); font-size: 1.05rem; }
.search-list p { margin: 0; font-size: 14px; color: var(--muted); }
.prose .wp-block-table, .prose .wp-block-image { margin: 1em 0; }

/* 10/21 상위 글 비교 반영 */
.prose .thumb-img { margin: 1.2em 0; }
.prose aside.callout-link { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); font-size: 15px; }
.prose aside.callout-link a { font-weight: 700; }
.prose figure img { border: 1px solid var(--line); border-radius: 8px; display: block; margin: 0 auto; }
.prose figcaption { line-height: 1.5; }
@media (max-width: 760px) {
  /* 휴대폰: 글을 테두리 상자에 한 번 더 넣지 않고 화면 폭을 다 씀 (여백 두 겹 → 한 겹) */
  .article-main { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); border-left: 0; border-right: 0; border-radius: 0; padding: 22px max(16px, env(safe-area-inset-left, 0px)); }
  .page-title { font-size: 1.45rem; }
}