/*
Theme Name: 혜택노트
Theme URI: https://hyetaekjiwon.com
Author: 혜택노트
Description: 혜택노트(hyetaekjiwon.com) 전용 테마. 정부지원금·복지 정보 사이트에 맞춰 헤더·홈·글 목록·본문을 직접 그립니다. 배포용이 아닙니다.
Version: 1.1.17
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyetaeknote
Tags: blog, custom-logo, translation-ready
*/

/*
 * 왜 테마를 직접 만들었나
 *
 *   Astra 위에서 화면을 바꾸려니 우회가 계속 늘었다. Astra 헤더를 CSS 로 감추고
 *   우리 헤더를 덧그리고, 홈은 template_include 로 가로채고, 홈에 계산기를 얹으려고
 *   자산 로딩 필터를 따로 만들었다. 우회 하나하나가 나중에 터질 자리다.
 *   실제로 허브 페이지가 CSS 없이 나가고, 홈 진단이 안 보이는 사고가 났다.
 *
 *   테마를 직접 가지면 그 우회가 전부 사라진다. 헤더는 header.php 에, 홈은
 *   front-page.php 에 있으면 된다. 같은 사장님이 운영하는 incomglobal.co.kr 도
 *   커스텀 테마 한 개로 돌고 있다.
 *
 * 무엇이 어디에 있나
 *
 *   화면(테마)   헤더·푸터·홈·글 목록·본문·검색·404
 *   기능(플러그인) 계산기(hyetaeknote-calc), 조회수 집계·리디렉션(hyetaeknote-home)
 *
 *   테마를 바꿔도 계산기와 리디렉션은 살아 있어야 하므로 플러그인에 남겨 뒀다.
 *
 * 이 파일에는 **기본 스타일**만 있다. 헤더·홈·카드 같은 우리 화면의 스타일은
 * assets/hn.css 에 있다(Astra 시절부터 쓰던 파일을 그대로 가져왔다).
 * Astra 가 대신 해 주던 타이포·본문·표 스타일이 이 파일의 내용이다.
 */

/* ─────────────── 토큰 ─────────────── */

:root {
    --hn-brand: #1e3a5f;
    --hn-ink: #1b2430;
    /* 2026-09-12 라이트하우스 접근성: #6b7683 은 연회색 배경(#f6f8fa·#f7f8fa)에서
       대비 4.34 로 기준(4.5) 미달이었다. 한 단계 진하게 해 네 배경 모두 통과시킨다
       (흰색 5.51 · 연회색 5.18 · 검색창 5.19 · 배지 4.96). */
    --hn-muted: #5f6a76;
    --hn-line: #e6e9ee;
    --hn-bg: #ffffff;
    --hn-soft: #f6f8fa;
    --hn-header-h: 68px;
    --hn-content: 760px;
    --hn-wide: 1160px;
}

/* ─────────────── 초기화 ─────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--hn-bg);
    color: var(--hn-ink);
    font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    word-break: keep-all;
    overflow-wrap: break-word;
}

img,
video,
iframe { max-width: 100%; height: auto; }

a { color: var(--hn-brand); }

a:hover { text-decoration: none; }

button,
input,
select,
textarea { font: inherit; }

/* 스크린리더 전용 */
.hn-sr-only,
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 키보드 사용자를 위한 본문 바로가기 */
.hn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--hn-brand);
    color: #fff;
}

.hn-skip:focus { left: 0; }

/* ─────────────── 뼈대 ─────────────── */

.hn-wrap {
    max-width: var(--hn-wide);
    margin: 0 auto;
    padding: 0 20px;
}

.hn-main { min-height: 50vh; }

/* 글·페이지 본문은 읽기 폭으로 좁힌다. 넓으면 한 줄이 길어 눈이 지친다. */
.hn-narrow {
    max-width: var(--hn-content);
    margin: 0 auto;
}

/* ─────────────── 글 본문 (Astra 가 하던 일) ─────────────── */

.hn-entry {
    padding: 34px 0 60px;
}

.hn-entry-title {
    margin: 0 0 10px;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.hn-entry-meta {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--hn-line);
    color: var(--hn-muted);
    font-size: 0.9em;
}

.hn-entry-meta a { color: inherit; }

/* 최종 수정일. 발행일보다 한 단계 진하게 — 이 글이 언제 손봤는지가 핵심 정보다. */
.hn-entry-updated {
    color: var(--hn-ink);
    font-weight: 600;
}

.hn-entry-thumb {
    margin: 0 0 26px;
}

.hn-entry-thumb img {
    width: 100%;
    border-radius: 12px;
}

.hn-content > *:first-child { margin-top: 0; }

.hn-content h2 {
    margin: 2.2em 0 0.7em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hn-brand);
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1.4;
}

.hn-content h3 {
    margin: 1.8em 0 0.6em;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.45;
}

.hn-content h4 {
    margin: 1.5em 0 0.5em;
    font-size: 1.05em;
    font-weight: 700;
}

.hn-content p { margin: 0 0 1.15em; }

.hn-content ul,
.hn-content ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.hn-content li { margin-bottom: 0.45em; }

.hn-content strong { font-weight: 700; }

.hn-content img { border-radius: 10px; }

.hn-content figure {
    margin: 1.6em 0;
}

.hn-content figcaption {
    margin-top: 8px;
    color: var(--hn-muted);
    font-size: 0.86em;
    text-align: center;
}

.hn-content blockquote {
    margin: 1.6em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--hn-brand);
    background: var(--hn-soft);
}

.hn-content blockquote p:last-child { margin-bottom: 0; }

.hn-content code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--hn-soft);
    font-size: 0.92em;
}

.hn-content hr {
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid var(--hn-line);
}

/*
 * 표 — 이 사이트의 글은 금액 표가 핵심이다.
 * 좁은 화면에서 가로로만 스크롤하고 페이지 전체가 밀리지 않게 한다.
 * (계산기 CSS 에서 표에 display:block 을 줬다가 머리글과 본문 열이 어긋난 적이 있다.
 *  스크롤은 바깥 상자가 맡아야 한다.)
 */
.hn-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.95em;
}

.hn-content th,
.hn-content td {
    border: 1px solid var(--hn-line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.hn-content thead th {
    background: var(--hn-soft);
    font-weight: 700;
    white-space: nowrap;
}

.hn-content table p { margin: 0; }

/* 워드프레스 기본 정렬 클래스 */
.alignleft { float: left; margin: 0.3em 1.4em 1em 0; }
.alignright { float: right; margin: 0.3em 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide,
.alignfull { max-width: 100%; }

/* ─────────────── 글 목록 ─────────────── */

.hn-archive { padding: 30px 0 60px; }

.hn-archive-head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hn-line);
}

.hn-archive-title {
    margin: 0 0 6px;
    font-size: 1.7em;
    font-weight: 800;
}

.hn-archive-sub {
    margin: 0;
    color: var(--hn-muted);
    font-size: 0.94em;
}

/* Astra 가 3열 9개로 보여주던 것을 그대로 맞춘다. */
.hn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
}

.hn-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hn-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--hn-bg);
    text-decoration: none;
    color: inherit;
}

.hn-card:hover { border-color: var(--hn-brand); }

.hn-card-thumb {
    display: block;
    aspect-ratio: 1200 / 700;
    background: var(--hn-soft);
    overflow: hidden;
}

.hn-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hn-card-body { padding: 16px 18px 20px; }

.hn-card-cat {
    display: block;
    margin-bottom: 6px;
    color: var(--hn-brand);
    font-size: 0.8em;
    font-weight: 700;
}

.hn-card-title {
    display: block;
    margin-bottom: 8px;
    font-size: 1.02em;
    font-weight: 700;
    line-height: 1.5;
}

.hn-card-date {
    display: block;
    color: var(--hn-muted);
    font-size: 0.84em;
}

/* 페이지 넘기기 */
.hn-pagination {
    margin: 40px 0 0;
    text-align: center;
}

.hn-pagination .page-numbers {
    display: inline-block;
    min-width: 40px;
    margin: 0 3px;
    padding: 9px 12px;
    border: 1px solid var(--hn-line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--hn-ink);
}

.hn-pagination .page-numbers.current {
    background: var(--hn-brand);
    border-color: var(--hn-brand);
    color: #fff;
    font-weight: 700;
}

.hn-pagination .page-numbers:hover { border-color: var(--hn-brand); }

/* ─────────────── 검색·404 ─────────────── */

.hn-notice {
    padding: 60px 0 80px;
    text-align: center;
}

.hn-notice h1 {
    margin: 0 0 12px;
    font-size: 1.8em;
    font-weight: 800;
}

.hn-notice p {
    margin: 0 auto 24px;
    max-width: 520px;
    color: var(--hn-muted);
}

.hn-notice-search {
    display: flex;
    max-width: 460px;
    margin: 0 auto 30px;
    border: 1px solid var(--hn-line);
    border-radius: 10px;
    overflow: hidden;
}

.hn-notice-search input {
    flex: 1;
    padding: 13px 15px;
    border: 0;
    outline: none;
}

.hn-notice-search button {
    padding: 0 20px;
    border: 0;
    background: var(--hn-brand);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .hn-entry-title { font-size: 1.55em; }
    .hn-content h2 { font-size: 1.28em; }
    .hn-grid { gap: 18px; }
}