/*
Theme Name: 여행노트
Theme URI: https://yeohaengnote.com
Author: 여행노트
Description: 여행노트(yeohaengnote.com) 전용 테마. 국내 여행·등산 정보 사이트에 맞춰 헤더·홈·글 목록·본문을 직접 그립니다. 배포용이 아닙니다.
Version: 1.1.1
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: yeohaengnote
Tags: blog, custom-logo, translation-ready
*/

/*
 * 왜 테마를 직접 만들었나
 *
 *   site1(혜택노트)에서 먼저 겪은 것을 그대로 가져왔다. Astra 위에서 화면을 바꾸려면
 *   Astra 헤더를 CSS 로 감추고 우리 헤더를 덧그리고, 홈은 template_include 로
 *   가로채야 한다. 우회 하나하나가 나중에 터질 자리다.
 *
 *   site2 는 글이 67편인데 홈이 Astra 기본 목록이었다 — h1 조차 없었다.
 *   무엇을 하는 사이트인지 첫 화면이 말하지 않으면 글이 아무리 많아도 소용없다.
 *
 * 무엇이 어디에 있나
 *
 *   화면(테마)     헤더·푸터·홈·글 목록·본문·검색·404
 *   기능(플러그인) 여행 도구(yeohaengnote-tools) — 계산기·용어 사전·달력
 *
 *   테마를 바꿔도 도구는 살아 있어야 하므로 플러그인에 뒀다. site1 과 같은 경계다.
 *
 * site1 과 화면이 달라야 하는 이유
 *
 *   14개 사이트가 비슷하게 생기면 "한 공장에서 찍어낸 사이트"로 읽힌다(사장님 방침).
 *   그래서 골격만 공유하고 화면은 갈랐다:
 *     혜택노트  남색 · 흰 헤더 · 좌우 2단 히어로 · 가는 선으로 구역 구분 · panel 카드
 *     여행노트  진녹색 · 녹색 헤더 · 전면 능선 히어로 · 배경 띠 교차 · banner 카드
 *
 * 이 파일에는 기본 스타일만 있다. 헤더·홈·카드 같은 우리 화면의 스타일은
 * assets/yn.css 에 있다.
 */

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

:root {
    --yn-brand: #1f5132;        /* sites.json 의 site2 brand_color */
    --yn-brand-deep: #14361f;   /* 헤더·푸터처럼 넓은 면에 까는 짙은 쪽 */
    --yn-accent: #c2703d;       /* 황토. 녹색 위에서 유일하게 눈에 들어오는 강조색 */
    --yn-ink: #22271f;
    --yn-muted: #6d7570;
    --yn-line: #e4e7e2;
    --yn-bg: #ffffff;
    --yn-soft: #f7f6f2;         /* 크림. 구역 띠를 교차로 깔 때 쓴다 */
    --yn-header-h: 66px;
    --yn-content: 760px;
    --yn-wide: 1160px;
}

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

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

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

body {
    margin: 0;
    background: var(--yn-bg);
    color: var(--yn-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(--yn-brand); }

a:hover { text-decoration: none; }

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

/* 스크린리더 전용 */
.yn-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * 소제목 — site1 은 밑줄(border-bottom)을 그었다. 여기서는 왼쪽에 굵은 막대를 세운다.
 * 같은 글꼴·같은 크기라도 이 한 줄로 두 사이트가 다르게 읽힌다.
 */
.yn-content h2 {
    margin: 2.2em 0 0.7em;
    padding-left: 14px;
    border-left: 5px solid var(--yn-brand);
    font-size: 1.45em;
    font-weight: 800;
    line-height: 1.4;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/*
 * 표 — 이 사이트의 글은 코스·요금·소요시간 표가 핵심이다.
 * 좁은 화면에서 가로로만 스크롤하고 페이지 전체가 밀리지 않게 한다.
 * (표에 display:block 을 주면 머리글과 본문의 열이 어긋난다. site1 에서 실제로 겪었다.
 *  스크롤은 바깥 상자가 맡아야 한다.)
 */
.yn-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.95em;
}

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

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

.yn-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%; }

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

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

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

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

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

.yn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
}

/*
 * 카드 — sites.json 의 site2 card_style 이 banner 다.
 * 썸네일·본문 인포그래픽과 같은 이름을 쓰므로 화면 카드도 거기에 맞춘다:
 * 분류 이름을 사진 위에 띠로 얹는다. site1(panel)은 사진 아래 글자로 둔다.
 */
.yn-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--yn-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--yn-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.yn-card:hover {
    border-color: var(--yn-brand);
    box-shadow: 0 10px 24px rgba(20, 45, 28, 0.1);
    transform: translateY(-2px);
}

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

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

/*
 * 분류 띠. 사진이 있으면 사진 위에 얹고, 없으면 카드 흐름 안에 그대로 붙는다.
 * 두 경우를 CSS 로 가르지 않고 PHP 가 클래스를 달리 준다(yn_card 참고) —
 * 사진 없는 글에서 띠가 카드 밖으로 떠 버리는 사고를 막는다.
 */
.yn-card-cat {
    display: inline-block;
    padding: 5px 14px 5px 12px;
    border-radius: 0 999px 999px 0;
    background: var(--yn-brand);
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

.yn-card-cat--on-photo {
    position: absolute;
    left: 0;
    bottom: 12px;
}

.yn-card-cat--plain {
    align-self: flex-start;
    margin: 14px 0 -6px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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