/* ============================================================
   와이작가의 글방 (블로그) — FireBook DS 톤. 공용 헤더/푸터는 ../site.css
   ============================================================ */
:root{
  --fire-50:#fef3eb; --fire-100:#fde2cf; --fire-300:#fbb27e; --fire-500:#f8914f; --fire-600:#ed7530; --fire-700:#c95c1e;
  --amber-50:#fff6ec; --amber-300:#feb06a; --amber-600:#c2761f;
  --slate-50:#f3f4f7; --slate-500:#5d6c89; --slate-600:#4d5a73;
  --green:#4f9d6b; --green-bg:#e7f3ec;
  --paper-0:#ffffff; --paper-50:#fbf6f3; --paper-100:#f5ece6; --paper-200:#ece0d8;
  --ink-900:#2b2522; --ink-700:#4a423d; --muted:#8b8178;
  --border:#ece0d8;
  --max:1120px;        /* 공용 헤더/푸터(site.css)는 사이트와 동일 폭 */
  --content:760px;     /* 블로그 본문은 읽기 좋은 좁은 폭 */
  --radius:16px;
  --shadow:0 10px 30px -16px rgba(122,57,23,.3);
  --font-display:"GmarketSans","Pretendard",sans-serif;
  --font-sans:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-serif:"Nanum Myeongjo","KoPubWorldBatang",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper-50);color:var(--ink-700);font-family:var(--font-sans);line-height:1.75;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased}
a{color:var(--fire-700)}
img{max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--content);margin:0 auto;padding:0 20px}

/* ---- 인트로 ---- */
.blog-intro{padding:54px 0 8px;text-align:center}
.blog-intro .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fire-600)}
.blog-intro .eyebrow::before,.blog-intro .eyebrow::after{content:"";width:16px;height:2px;background:var(--fire-500);border-radius:2px}
.blog-intro h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:-.03em;color:var(--ink-900);margin:14px 0 8px}
.blog-intro p{color:var(--ink-700);font-size:1.05rem;margin:0}

/* ---- 카테고리 필터 ---- */
.cat-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 8px}
.cat-chip{font-family:var(--font-sans);font-weight:600;font-size:.9rem;padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--paper-0);color:var(--ink-700);cursor:pointer;transition:all .15s}
.cat-chip:hover{border-color:var(--fire-300);color:var(--fire-700)}
.cat-chip.active{background:var(--fire-500);border-color:var(--fire-500);color:#fff}

/* ---- 글 목록 ---- */
.post-list{list-style:none;padding:0;margin:24px 0 64px;display:flex;flex-direction:column;gap:12px}
.post-card{display:block;padding:22px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--paper-0);transition:transform .15s,box-shadow .2s,border-color .2s}
.post-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--fire-300);text-decoration:none}
.post-card .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:8px}
.post-card h2{margin:0 0 6px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink-900);line-height:1.35}
.post-card p{margin:0;color:var(--ink-700);font-size:.96rem}
.empty,.loading{color:var(--muted);text-align:center;padding:48px 0}

/* 카테고리 태그 색상 */
.tag{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 10px;border-radius:999px}
.tag--slate{background:var(--slate-50);color:var(--slate-600)}
.tag--amber{background:var(--amber-50);color:var(--amber-600)}
.tag--fire{background:var(--fire-50);color:var(--fire-700)}
.tag--green{background:var(--green-bg);color:var(--green)}
.tag--muted{background:var(--paper-100);color:var(--ink-700)}

/* ---- 글 상세 ---- */
.article{padding:40px 0 72px}
.article-head{margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.article-head .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.article-head h1{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,5vw,2.4rem);letter-spacing:-.03em;line-height:1.25;color:var(--ink-900);margin:10px 0 12px}
.article-head .summary{color:var(--ink-700);margin:0;font-size:1.02rem}

.content{font-size:1.06rem;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
.content>*:first-child{margin-top:0}
.content h1,.content h2,.content h3,.content h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--ink-900);margin:1.8em 0 .6em;scroll-margin-top:76px}
.content h1{font-size:1.6rem}
.content h2{font-size:1.38rem;padding-bottom:.25em;border-bottom:1px solid var(--border)}
.content h3{font-size:1.18rem}
.content h4{font-size:1.04rem}
.content p{margin:1em 0}
.content a{text-decoration:underline;text-underline-offset:2px}
.content ul,.content ol{margin:1em 0;padding-left:1.5em}
.content li{margin:.35em 0}
.content blockquote{margin:1.4em 0;padding:6px 18px;border-left:4px solid var(--fire-500);background:var(--paper-100);border-radius:0 8px 8px 0;color:var(--ink-700);font-family:var(--font-serif)}
.content hr{border:none;border-top:1px solid var(--border);margin:2.4em 0}
.content img{border-radius:12px;display:block;margin:1.4em auto}
.content code{font-family:"SFMono-Regular",Consolas,"D2Coding",monospace;font-size:.9em;background:var(--paper-100);color:var(--fire-700);padding:.15em .4em;border-radius:5px}
.content pre{margin:1.4em 0;padding:16px 18px;background:var(--ink-900);border-radius:12px;overflow-x:auto;line-height:1.6}
.content pre code{background:none;color:#e8e4df;padding:0;font-size:.88rem}
.content table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem;display:block;overflow-x:auto}
.content th,.content td{border:1px solid var(--border);padding:9px 13px;text-align:left}
.content th{background:var(--paper-100);font-weight:700;color:var(--ink-900)}
.content del{color:var(--muted)}

.article-actions{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap}
.btn-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:999px;border:1px solid var(--border);background:var(--paper-0);color:var(--ink-900);text-decoration:none}
.btn-back:hover{border-color:var(--fire-300);color:var(--fire-700)}

@media (max-width:600px){
  .blog-intro{padding:36px 0 6px}
  .content{font-size:1.02rem}
  .post-card{padding:18px 18px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}