/* 김작가의 세상 사는 이야기 — 공통 스타일 */
:root{
  --paper:#F7F2E8; --paper2:#FBF7EF; --ink:#2F2A24; --ink2:#5E5447; --ink3:#8C8274;
  --line:#E3D9C6; --brand:#B4703C; --olive:#7E8C58; --sun:#F2C078;
  --wrap:1100px;
  --serif:"Noto Serif KR",ui-serif,Georgia,serif;
  --sans:Pretendard,-apple-system,"Malgun Gothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ───────── 상단 바 ───────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,242,232,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:58px}
.nav .logo{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:-.02em}
.nav .logo span{color:var(--brand)}
.nav ul{display:flex;gap:18px;margin-left:auto;list-style:none;font-size:14.5px;color:var(--ink2)}
.nav ul a{padding:6px 2px;border-bottom:2px solid transparent}
.nav ul a:hover,.nav ul a.on{color:var(--ink);border-color:var(--brand)}

/* ───────── 히어로 (시안 A — 고향 능선) ───────── */
.hero{position:relative;height:clamp(400px,50vw,560px);overflow:hidden;
  background:linear-gradient(180deg,#FBF4E6 0%,#F6E8D2 55%,#F1DCC0 100%);
  border-bottom:1px solid var(--line)}
.hero svg.scene{position:absolute;inset:0;width:100%;height:100%}
.hero svg.grain{position:absolute;inset:0;width:100%;height:100%;
  opacity:.3;mix-blend-mode:multiply;pointer-events:none}
.hero .copy{position:relative;z-index:5;max-width:var(--wrap);margin:0 auto;
  padding:clamp(32px,4.2vw,56px) 24px 0}
.hero .kicker{font-size:13px;letter-spacing:.24em;color:var(--brand);font-weight:700;
  opacity:0;animation:up .9s .25s ease-out forwards}
.hero h1{font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(32px,5vw,58px);line-height:1.22;letter-spacing:-.03em;margin-top:14px;
  opacity:0;animation:up .9s .5s ease-out forwards}
.hero p{margin-top:16px;text-shadow:0 1px 0 rgba(251,244,230,.85);font-size:clamp(14px,1.5vw,17px);color:var(--ink2);line-height:1.75;
  opacity:0;animation:up .9s .75s ease-out forwards}
.hero .cta{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;
  opacity:0;animation:up .9s .95s ease-out forwards}
.hero .cta a{font-size:14.5px;font-weight:600;padding:11px 20px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper2);transition:.18s}
.hero .cta a.ghost{background:transparent;color:var(--ink)}
.hero .cta a:hover{transform:translateY(-2px)}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.sun{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0);opacity:.95}50%{transform:translateY(-10px);opacity:1}}
.ray{transform-origin:1068px 96px;animation:spin 72s linear infinite;opacity:.32}
@keyframes spin{to{transform:rotate(360deg)}}
.h1l{animation:sway 16s ease-in-out infinite}
.h2l{animation:sway 22s ease-in-out infinite reverse}
@keyframes sway{0%,100%{transform:translateX(0)}50%{transform:translateX(-14px)}}
.flock{animation:fly 19s linear infinite}
@keyframes fly{0%{transform:translate(-200px,70px)}100%{transform:translate(1360px,-50px)}}
.b{animation:flap 1.1s ease-in-out infinite}
.b:nth-child(2){animation-delay:.18s}.b:nth-child(3){animation-delay:.36s}
.b:nth-child(4){animation-delay:.1s}.b:nth-child(5){animation-delay:.5s}
@keyframes flap{50%{transform:scaleY(.45)}}
.leaf{animation:fall 11s linear infinite;opacity:0}
.leaf:nth-of-type(2){animation-delay:4s}.leaf:nth-of-type(3){animation-delay:7.5s}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}8%{opacity:1}
  100%{opacity:0;transform:translate(-70px,240px) rotate(300deg)}}
@media (prefers-reduced-motion:reduce){
  .sun,.ray,.h1l,.h2l,.flock,.b,.leaf,.hero .kicker,.hero h1,.hero p,.hero .cta{animation:none;opacity:1}
}

/* ───────── 글 목록 ───────── */
.sec{padding:54px 0 10px}
.sec-h{display:flex;align-items:flex-end;gap:14px;margin-bottom:24px}
.sec-h h2{font-family:var(--serif);font-size:23px;letter-spacing:-.02em}
.sec-h .cnt{font-size:13.5px;color:var(--ink3);padding-bottom:3px}
.sec-h .more{margin-left:auto;font-size:14px;color:var(--brand);font-weight:600;padding-bottom:3px}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--paper2);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 20px;display:flex;flex-direction:column;min-height:196px;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:#D2C3A6;
  box-shadow:0 10px 26px -14px rgba(47,42,36,.28)}
.card .meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3)}
.card .meta .tag{color:var(--olive);font-weight:700}
.card h3{font-family:var(--serif);font-size:19px;line-height:1.42;margin:11px 0 9px;
  letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .ex{font-size:14.2px;line-height:1.72;color:var(--ink2);word-break:keep-all;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--ink3)}

/* 맨 위 한 편 — 큰 카드 */
.card.lead{grid-column:1/-1;min-height:auto;padding:30px 32px 26px;
  background:linear-gradient(135deg,#FBF7EF 0%,#F8F0E0 100%)}
.card.lead h3{font-size:clamp(23px,3vw,31px);-webkit-line-clamp:3;margin:13px 0 12px}
.card.lead .ex{font-size:15.5px;-webkit-line-clamp:3}

/* 연도별 목록 */
.rows{border-top:1px solid var(--line)}
.row{display:flex;align-items:baseline;gap:16px;padding:15px 4px;border-bottom:1px solid var(--line)}
.row:hover{background:rgba(251,247,239,.9)}
.row .d{font-size:12.5px;color:var(--ink3);width:84px;flex:none;font-variant-numeric:tabular-nums}
.row .t{font-family:var(--serif);font-size:16.5px;letter-spacing:-.02em}
.row .n{margin-left:auto;font-size:12.5px;color:var(--ink3);flex:none}

/* 페이지 넘김 */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:44px 0 10px;flex-wrap:wrap}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--ink2);background:var(--paper2)}
.pager .cur{background:var(--ink);border-color:var(--ink);color:var(--paper2);font-weight:700}
.pager .gap{border:0;background:none}

/* ───────── 글 읽기 ───────── */
.post{max-width:720px;margin:0 auto;padding:44px 24px 0}
.post .back{font-size:13.5px;color:var(--ink3)}
.post .pmeta{margin-top:24px;font-size:13px;color:var(--ink3);display:flex;gap:9px;align-items:center}
.post h1{font-family:var(--serif);font-size:clamp(26px,3.6vw,36px);line-height:1.38;
  letter-spacing:-.03em;margin:14px 0 0;word-break:keep-all}
.post .rule{width:46px;height:3px;background:var(--brand);margin:26px 0 30px;border-radius:2px}
.post .body{font-family:var(--serif);font-size:17.6px;line-height:2.05;color:#363028;
  word-break:keep-all;overflow-wrap:break-word}
.post .body p{margin:0 0 1.35em}
.post .body p.poem{white-space:pre-line;line-height:1.85;padding-left:14px;
  border-left:2px solid var(--line);color:var(--ink2)}
.note{margin:36px 0 0;background:#FBF3E2;border:1px solid #EBD9B6;border-radius:12px;
  padding:16px 18px;font-size:13.8px;line-height:1.7;color:#6B5A3C}
.pnav{display:flex;gap:12px;margin:44px 0 0;border-top:1px solid var(--line);padding-top:22px}
.pnav a{flex:1;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper2)}
.pnav .lb{font-size:12px;color:var(--ink3)}
.pnav .tt{font-family:var(--serif);font-size:15.5px;margin-top:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pnav a.next{text-align:right}

/* ───────── 바닥 ───────── */
footer{margin-top:72px;border-top:1px solid var(--line);background:var(--paper2)}
footer .wrap{padding:34px 24px 44px;font-size:13.5px;color:var(--ink3);line-height:1.8}
footer .sig{font-family:var(--serif);color:var(--ink2);font-size:15px}
@media(max-width:620px){
  /* 상단바 — 제목·메뉴가 줄바꿈되지 않게 */
  .nav .wrap{gap:12px;padding:0 18px}
  .nav .logo{font-size:15px;white-space:nowrap}
  .nav ul{gap:14px;font-size:13.5px;white-space:nowrap}
  .nav ul li.home{display:none}            /* 로고가 홈 역할 */
  /* 히어로 — 능선 전체가 보이도록 아래 띠로 내린다 */
  .hero{height:auto;min-height:0;padding-bottom:44vw}
  .hero svg.scene{top:auto;bottom:0;height:auto;aspect-ratio:12/5}
  .hero .copy{padding:34px 20px 0}
  .hero h1{font-size:34px}
  .hero .cta{margin-top:20px}
}
@media(max-width:560px){
  .row .d{width:72px}
  .post .body{font-size:16.8px;line-height:1.95}
  .pnav{flex-direction:column}
}