/*
Theme Name: Haru Guide
Theme URI: https://haru-guide.165-245-176-5.sslip.io
Author: 하루생활 가이드
Description: 하루생활 가이드용 경량 편집형 테마. 외부 폰트·아이콘·스크립트 없음.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: haru-guide
*/

:root{
  --ivory:#faf6ec;
  --paper:#fffdf7;
  --navy:#14213d;
  --navy-soft:#3b4663;
  --green:#2f6b4f;
  --green-dark:#1f4d38;
  --green-tint:#e4efe6;
  --line:#ded8c6;
  --max:1080px;
  --read:700px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivory);color:var(--navy);
  font-family:"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif;
  font-size:17px;line-height:1.8;word-break:keep-all;overflow-wrap:break-word;
}
a{color:var(--green-dark);text-underline-offset:3px}
a:hover{color:var(--navy)}
a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;z-index:99}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* header */
.site-header{background:var(--navy);color:var(--ivory)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:18px;padding-bottom:18px}
.site-title{margin:0;font-size:1.3rem;font-weight:800;line-height:1.3}
.site-title a{color:var(--ivory);text-decoration:none;border-bottom:3px solid var(--green);padding-bottom:2px}
.site-desc{margin:4px 0 0;font-size:.85rem;color:#c9d0e0;line-height:1.5}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.main-nav a{color:var(--ivory);text-decoration:none;font-size:.95rem;font-weight:600;display:inline-block;padding:6px 0;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav .current a{border-bottom-color:#7fc29b;color:#fff}

/* category/tag strip */
.topic-bar{background:var(--paper);border-bottom:1px solid var(--line)}
.topic-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 10px;padding-top:10px;padding-bottom:10px;align-items:center;font-size:.85rem}
.topic-bar .label{font-weight:700;color:var(--navy-soft)}
.chip{display:inline-block;padding:2px 12px;border:1px solid var(--green);border-radius:99px;color:var(--green-dark);text-decoration:none;background:transparent;font-size:.85rem;line-height:1.7}
.chip:hover{background:var(--green);color:#fff}

main{padding:36px 0 56px}
.kicker{font-size:.8rem;font-weight:800;letter-spacing:.08em;color:var(--green);margin:0 0 6px}
.meta{font-size:.85rem;color:var(--navy-soft);margin:0;line-height:1.6}
.meta span+span::before{content:"·";margin:0 8px}

/* lead */
.lead{background:var(--navy);color:var(--ivory);padding:32px 28px;border-left:8px solid var(--green);margin-bottom:40px}
.lead .kicker{color:#8fd1a9}
.lead h2{margin:0 0 12px;font-size:clamp(1.5rem,4.5vw,2.2rem);line-height:1.35}
.lead h2 a{color:var(--ivory);text-decoration:none}
.lead h2 a:hover{text-decoration:underline}
.lead p{margin:0 0 14px;color:#dfe4ef}
.lead .meta{color:#b9c2d6}
.lead .more{color:#fff;font-weight:700}

.section-title{font-size:1.15rem;margin:0 0 16px;padding-bottom:8px;border-bottom:2px solid var(--navy)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--green);padding:20px;display:flex;flex-direction:column}
.card h3{margin:4px 0 10px;font-size:1.1rem;line-height:1.45}
.card h3 a{color:var(--navy);text-decoration:none}
.card h3 a:hover{color:var(--green-dark);text-decoration:underline}
.card p{margin:0 0 12px;font-size:.93rem;color:var(--navy-soft);line-height:1.7}
.card .meta{margin-top:auto}
.empty{background:var(--paper);border:1px dashed var(--line);padding:28px}

/* article */
.article{max-width:var(--read);margin:0 auto}
.article-head{margin-bottom:28px;padding-bottom:20px;border-bottom:2px solid var(--navy)}
.article-head h1{font-size:clamp(1.65rem,5vw,2.3rem);line-height:1.4;margin:0 0 14px}
.entry{font-size:1.06rem}
.entry h2{font-size:1.4rem;line-height:1.45;margin:2.2em 0 .6em;padding-left:12px;border-left:5px solid var(--green)}
.entry h3{font-size:1.15rem;margin:1.8em 0 .5em}
.entry p,.entry ul,.entry ol{margin:0 0 1.25em}
.entry li{margin-bottom:.4em}
.entry blockquote{margin:1.5em 0;padding:12px 20px;background:var(--green-tint);border-left:4px solid var(--green)}
.entry table{border-collapse:collapse;width:100%;font-size:.95rem;display:block;overflow-x:auto}
.entry th,.entry td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.entry th{background:var(--green-tint)}
.entry code{background:#efe9d8;padding:1px 6px;border-radius:3px;font-size:.92em}
.entry pre{background:var(--navy);color:var(--ivory);padding:14px;overflow-x:auto;line-height:1.6}
.entry pre code{background:none}
.notice{margin:36px 0 0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--navy);font-size:.9rem;color:var(--navy-soft);line-height:1.7}
.notice strong{color:var(--navy)}
.tag-row{margin-top:24px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:.88rem}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:36px;font-size:.92rem}
.post-nav a{font-weight:600}

.pagination{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.pagination .page-numbers{padding:4px 12px;border:1px solid var(--line);background:var(--paper);text-decoration:none}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* footer */
.site-footer{background:var(--navy);color:#c9d0e0;padding:28px 0;font-size:.88rem;line-height:1.7}
.site-footer a{color:var(--ivory)}
.footer-nav ul{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.site-footer p{margin:0 0 6px}

@media (max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  body{font-size:16.5px}
  .cards{grid-template-columns:1fr}
  .lead{padding:24px 18px;border-left-width:6px}
  main{padding:24px 0 40px}
  .site-header .wrap{padding-top:14px;padding-bottom:12px}
  .main-nav ul{gap:2px 16px}
}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s}}

/* 오류 제보 폼 */
.haru-fb{margin:24px 0}
.haru-fb-form{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--green);padding:20px}
.haru-fb-form label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
.haru-fb-form input[type=url],.haru-fb-form input[type=email],.haru-fb-form textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--navy-soft);background:#fff;color:var(--navy);border-radius:0}
.haru-fb-form textarea{resize:vertical;min-height:160px}
.haru-fb-consent label{font-weight:400;display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.6}
.haru-fb-consent input{margin-top:5px;flex:none;width:18px;height:18px}
.haru-fb-warn{font-size:.9rem;background:var(--green-tint);padding:10px 12px;border-left:4px solid var(--green)}
.haru-fb-btn{background:var(--navy);color:var(--ivory);border:0;padding:12px 26px;font:inherit;font-weight:700;cursor:pointer}
.haru-fb-btn:hover{background:var(--green-dark)}
.haru-fb-notice{padding:14px 16px;margin-bottom:18px;border-left:5px solid var(--green);background:var(--green-tint)}
.haru-fb-err{border-left-color:#a33a2a;background:#f8e6e1}
.haru-fb-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}

/* Approved A design, 2026-11-02: white and cobalt editorial */
:root{--ivory:#fff;--paper:#fff;--navy:#17191e;--navy-soft:#626975;--green:#2457e7;--green-dark:#1745c4;--green-tint:#f0f5ff;--line:#e0e4eb;--max:1160px;--read:740px}
body{background:#fff;color:#17191e;line-height:1.75}
.site-header{background:#fff;color:#17191e}
.site-header .wrap{min-height:110px;padding-top:24px;padding-bottom:24px}
.site-title{font-size:29px;letter-spacing:-1.2px;line-height:1.35}
.site-title a{color:#17191e;border:0;padding:0}
.site-title a:hover{color:#2457e7}
.site-desc{color:#626975;font-size:13px;margin-top:7px}
.main-nav a{color:#333a46;font-size:14px;padding:8px 0}
.main-nav a:hover,.main-nav .current a{color:#2457e7;border-bottom-color:#2457e7}
.topic-bar{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.topic-bar .wrap{gap:12px 28px;padding-top:14px;padding-bottom:14px}
.topic-bar .label{font-size:12px;color:#767d88;font-weight:400}
.chip{padding:0;border:0;border-radius:0;color:#353b46;font-size:14px;font-weight:600;background:none}
.chip:hover{background:none;color:#2457e7;text-decoration:underline}
main{padding:38px 0 54px}
.kicker{color:#2457e7;font-size:12px;letter-spacing:.02em}
.lead{display:grid;grid-template-columns:1.05fr 1fr;gap:38px;align-items:center;background:none;color:#17191e;padding:0;border:0;margin:0 0 46px}
.lead-story{min-width:0}
.lead .kicker{color:#2457e7;margin:0 0 14px}
.lead h2{font-size:clamp(28px,3.1vw,40px);line-height:1.3;letter-spacing:-1.4px;margin:0 0 18px}
.lead h2 a{color:#17191e}
.lead h2 a:hover{color:#2457e7;text-decoration:none}
.lead p{color:#626975;margin:0 0 18px;font-size:16px;line-height:1.75}
.lead .meta{color:#767d88;font-size:12px;margin:0}
.lead .more{color:#2457e7;font-size:14px;text-decoration:none;border-bottom:2px solid #2457e7;padding-bottom:5px;display:inline-block}
.haru-cover{display:block;overflow:hidden}
.haru-cover img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin:0}
.lead .haru-cover img{aspect-ratio:4/3;max-height:400px;object-fit:contain;background:#f5f6f8}
.lead:not(:has(.haru-cover)){grid-template-columns:1fr;max-width:800px}
.section-title{font-size:22px;letter-spacing:-.6px;border-bottom:0;border-top:2px solid #17191e;margin:0 0 24px;padding:20px 0 0}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.card{display:grid;grid-template-columns:175px minmax(0,1fr);gap:20px;background:none;border:0;padding:0}
.card .haru-cover img{height:140px;aspect-ratio:auto;object-fit:cover}
.card .card-copy{min-width:0}
.card h3{font-size:20px;letter-spacing:-.65px;line-height:1.45;margin:5px 0 10px}
.card h3 a{color:#17191e}
.card h3 a:hover{color:#2457e7}
.card p{font-size:13px;line-height:1.65;margin:0 0 10px}
.card .kicker{font-size:11px;font-weight:700;color:#2457e7;margin:0}
.card .meta{font-size:11px;color:#767d88}
.card:not(:has(.haru-cover)){grid-template-columns:1fr}
.article-head{border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:32px}
.article-head h1{letter-spacing:-1.2px;line-height:1.35;font-size:clamp(27px,4vw,38px)}
.article .meta{font-size:12px}
.entry h2{border-left:0;padding-left:0;padding-top:20px;border-top:1px solid var(--line);font-size:24px;letter-spacing:-.7px}
.entry h3{font-size:20px;letter-spacing:-.4px}
.entry p{color:#343b46}
.entry figure{margin:28px 0}
.entry figure img{display:block;max-height:480px;width:100%;object-fit:contain;background:#f5f6f8}
.entry figcaption{font-size:12px;line-height:1.7;color:#68717e;margin:12px 0}
.entry code{background:#f0f3f8}
.entry pre{background:#17191e;color:#fff}
.notice{background:#f7f9fc;border:0;border-top:2px solid #2457e7;padding:20px;font-size:13px}
.site-footer{background:#fff;color:#767d88;border-top:1px solid var(--line);font-size:12px;padding:24px 0 32px}
.site-footer a{color:#515c6d;text-decoration:none}.site-footer a:hover{color:#2457e7}
.haru-fb-form{border-top:2px solid #2457e7}.haru-fb-btn{background:#2457e7;color:#fff}.haru-fb-btn:hover{background:#1745c4}
@media(max-width:900px){.card{grid-template-columns:130px minmax(0,1fr);gap:14px}.card .haru-cover img{height:120px}.card h3{font-size:18px}.lead{gap:26px}.lead h2{font-size:30px}}
@media(max-width:640px){.wrap{padding-left:22px;padding-right:22px}.site-header .wrap{padding-top:22px;padding-bottom:16px;gap:15px;min-height:0}.site-title{font-size:26px}.site-desc{font-size:12px}.main-nav ul{gap:22px}.main-nav a{font-size:13px;padding:2px 0}.topic-bar .wrap{gap:12px 20px}.topic-bar .label{display:none}.chip{font-size:13px}main{padding-top:24px}.lead{grid-template-columns:1fr;gap:24px;padding:0;border:0;margin-bottom:36px}.lead h2{font-size:29px;line-height:1.4;letter-spacing:-1px}.lead .haru-cover img{max-height:280px;aspect-ratio:16/10}.lead p{font-size:15px}.cards{grid-template-columns:1fr;gap:26px}.card{grid-template-columns:120px minmax(0,1fr);gap:16px}.card .haru-cover img{height:120px}.card h3{font-size:18px}.card .meta{font-size:10px}.article-head h1{font-size:28px}.entry{font-size:16px}.entry h2{font-size:22px}.post-nav{flex-direction:column}.section-title{font-size:21px}.haru-fb-form{padding:16px}}