/* 블로그 (10-16). index.html 의 종이 + 잉크 + 형광펜 토큰과 헤더를 그대로 쓴다.
   글 하나 = blog/{slug}.html 하나 + blog/index.html 목록에 한 줄. 빌드 도구는 없다 */
:root{
  --paper:#FCFCFA; --surface:#FFFFFF; --ink:#191611; --muted:#6E6759; --line:#E6E4DE; --h3-size:20px;
  --hl:#FBC4B0; --hl-soft:#FDE8E1; --coral:#EA4A2F;
  --font:'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,system-ui,sans-serif;
  --r:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
     font-size:16px;line-height:1.65;letter-spacing:-.01em;padding:0 20px 80px}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.25;word-break:keep-all;text-wrap:balance}
p{margin:0}
.narrow{max-width:680px;margin:0 auto}
.fine{font-size:13px;color:var(--muted);line-height:1.6}

/* 헤더와 푸터는 /app/site.css (공통) */

/* 목록 */
/* 블로그와 404 의 뼈대 (10-16). 본문이 짧아도 푸터가 화면 아래에 붙도록 본문이 남는 높이를 채운다.
   body.page 는 블로그 생성물과 404.html 에만 있다. 랜딩과 /app 은 이 파일을 쓰지 않는다 */
body.page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:0}
body.page>main{flex:1 0 auto;width:100%;padding-block:56px 80px}
body.page>footer.ft{width:100%}
.gallery-page{max-width:1040px;margin:0 auto}

/* 목록 — 갤러리. 모바일 1열, 태블릿 2열, 데스크톱 3열 */
.blog-head{padding-bottom:28px}
.blog-head h1{font-size:30px}
.posts{list-style:none;margin:0;padding:0;display:grid;gap:28px 20px;grid-template-columns:1fr}
@media(min-width:600px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.gallery-page .posts{grid-template-columns:repeat(3,1fr)}}
.card{display:grid;gap:10px;align-content:start}
.card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.card:hover img{border-color:var(--ink)}
.card h2{font-size:18px;line-height:1.35;word-break:keep-all;text-wrap:wrap}   /* 공통 h2 의 balance 를 끈다. 카드 폭을 다 쓰고 줄을 바꾼다 */
.card time{font-size:13px;color:var(--muted)}

/* 글 */
article.post{padding-block:0}
.post h1{font-size:28px}
.post time{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
.post .body{margin-top:32px;display:grid;gap:18px;font-size:17px;line-height:1.8;word-break:keep-all}
.post figure{margin:12px 0}
.post figure img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.post h2{margin-top:24px;font-size:var(--h3-size)}   /* 초안 ### 소제목. 참고한 논문, 함께 읽으면 좋은 글도 이 크기 하나로 맞춘다 (10-18 민희) */
.post ol{margin:0;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.6;word-break:break-word}
.post ol a{text-decoration:underline;text-underline-offset:3px}
/* 리포트로 이어지는 카드 (10-16). 문구는 scripts/build-blog.mjs CTA */
.cta-card{margin:16px 0 8px;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--hl-soft);display:grid;gap:8px;justify-items:start}
.cta-card h2{margin:0;font-size:20px}
.cta-card p{font-size:15px;color:var(--muted)}
.cta-card .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:8px;padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:700}
.cta-card .btn:hover{background:var(--coral)}
/* 참고한 연구: 눈에 띄지 않게 */
.refs{margin-top:16px;display:grid;gap:10px;color:var(--muted)}
.post .refs h2{margin:0;font-size:var(--h3-size);color:var(--ink)}
.post .refs ol{font-size:13px;line-height:1.6}
.related{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.post .related h2{margin:0 0 12px;font-size:var(--h3-size);color:var(--ink)}
.related-list{margin:0;padding-left:22px;display:grid;gap:8px;font-size:16px;line-height:1.6}
.related-list a{text-decoration:underline;text-underline-offset:3px}
.post .gap{margin:0}
@media(max-width:560px){.post h1{font-size:24px}.post .body{font-size:16px}}