/* 블로그 — 목록(`blog.html`)과 글 한 편(`blog/<slug>.html`).
   색·선·라운드는 `lp.css` 가 깐 역할 이름을 그대로 쓴다(여기에 색을 적지 않는다).
   제목 글꼴(Bricolage Grotesque)도 `lp.css` §제목 규칙에 이 파일의 제목들을 얹어 쓴다.
   좁을 때 기준은 미디어 쿼리가 아니라 `:root[data-lpw]` 다 — lp.js 가 **body 안쪽 폭**을
   재서 놓는 값이고, 보자기 도구 판이 열려 폭이 줄어도 랜딩이 같은 규칙으로 다시 놓인다. */

/* ---------- 함께 쓰는 것 ---------- */

/* 글 읽는 폭은 법적 문서(`.legal` 700)와 같다 — 한 사이트 안에서 읽는 자리의 폭은 하나다 */
.bl-wrap{max-width:calc(700px + var(--pad) * 2);margin:0 auto;padding:0 var(--pad);width:100%}
/* 목록 장은 **랜딩의 본문 폭**(1142)을 쓴다 : 읽는 폭(700)에 그림과 글을 나란히 놓으면 글 칸이 300 밖에 안 남는다 */
.bl-page{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}

/* 눈썹 + 날짜 한 줄. 목록의 카드와 글의 머리가 같은 꼴을 쓴다 */
.bl-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.bl-meta .dot{width:3px;height:3px;border-radius:var(--radius-full);background:var(--ink-4);flex:none}

/* ---------- 목록 ---------- */

.bl-head{padding-top:96px;padding-bottom:40px}   /* ⚠️ 좌우는 `.bl-page` 가 든다 — shorthand 로 적으면 그 여백이 지워진다 */
.bl-head h1{font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.6px;color:var(--ink);margin:0 0 12px}
.bl-head .lede{max-width:560px}

.bl-list{display:flex;flex-direction:column;gap:0;padding-bottom:120px}

/* 카드 한 장 = 그림 왼쪽 · 글 오른쪽. 칸 사이는 선 하나로만 가른다(랜딩의 비교 표와 같은 결) */
.bl-card{display:grid;grid-template-columns:460px minmax(0,1fr);gap:40px;align-items:start;
  padding:36px 0;border-top:1px solid var(--line);text-decoration:none}
.bl-card:first-child{border-top:0;padding-top:8px}
/* ⚠️ `height:auto` 가 있어야 `aspect-ratio` 가 선다 — html 의 `height="630"` 속성이 높이를 정해 버리면
   가로세로비는 무시된다. 속성은 글이 실리기 전 자리를 잡아 주느라 둔 것이라 지우지 않는다 */
.bl-card-thumb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:12px;
  background:var(--bg-sunken);transition:scale .25s var(--e-out)}
.bl-card:hover .bl-card-thumb{scale:1.015}
.bl-card h2{font-family:'Bricolage Grotesque',var(--font-sans);font-weight:500;font-size:28px;line-height:1.2;
  letter-spacing:-.4px;color:var(--ink);margin:12px 0 12px}
.bl-card p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0}
.bl-card .bl-more{display:inline-block;margin-top:14px;font-size:14px;color:var(--ink)}
.bl-card:hover .bl-more{color:var(--text-brand,var(--accent))}

/* ---------- 글 한 편 ---------- */

.post{padding:72px 0 0}
.post-head{padding-bottom:32px}
.post-head h1{font-family:'Bricolage Grotesque',var(--font-sans);font-weight:500;font-size:42px;line-height:1.12;
  letter-spacing:-.8px;color:var(--ink);margin:16px 0 0}
.post-back{font-size:13px;color:var(--ink-3);text-decoration:none}
.post-back:hover{color:var(--ink)}
.post-meta{margin-top:20px}
/* 썸네일은 글 머리 바로 아래 · 읽는 폭보다 넓게 선다(목록에서 보던 그림과 같은 장이다) */
.post-cover{max-width:calc(900px + var(--pad) * 2);margin:0 auto 48px;padding:0 var(--pad);width:100%}
.post-cover img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:16px;background:var(--bg-sunken)}

.post-body{padding-bottom:96px}
.post-body p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0 0 18px}
.post-body h2{font-family:'Bricolage Grotesque',var(--font-sans);font-weight:500;font-size:24px;line-height:1.3;
  letter-spacing:-.4px;color:var(--ink);margin:48px 0 14px}
.post-body h2:first-child{margin-top:0}
.post-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.post-body a:hover{color:var(--text-brand,var(--accent))}
.post-body strong{font-weight:600;color:var(--ink)}
/* 기운 글 뒤에는 숨을 조금 둔다(italic correction) : 닫는 따옴표가 오른쪽으로 누워서 다음 낱말과
   붙어 보인다(「…not different humans.”Remote Control」). 이 글은 원문 인용이 줄마다 섞여 있어 눈에 띈다 */
.post-body em{font-style:italic;padding-right:.08em}
.post-body code{font-family:var(--font-mono,ui-monospace,monospace);font-size:.92em;color:var(--ink);
  background:var(--bg-chip);border-radius:4px;padding:1px 5px}
/* 원문 인용 = 왼쪽 선 하나. 이 글은 인용이 주인공이라 글자를 본문보다 올리지 않고 색만 진하게 둔다 */
.post-body blockquote{margin:0 0 20px;padding:4px 0 4px 20px;border-left:2px solid var(--ink);
  font-size:17px;line-height:1.7;color:var(--ink)}
.post-body blockquote p:last-child{margin-bottom:0}
.post-body hr{border:0;height:1px;background:var(--line);margin:40px 0}

/* 글 끝의 한 줄 CTA — 랜딩의 `.final` 보다 작게, 읽는 폭 안에 선다 */
.post-cta{margin-top:48px;padding:28px 32px;border-radius:16px;background:var(--bg-sunken);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.post-cta p{margin:0;font-size:17px;line-height:1.6;color:var(--ink)}

/* ---------- 좁을 때 ---------- */

:root[data-lpw='m'] .bl-card{grid-template-columns:380px minmax(0,1fr);gap:32px}
:root[data-lpw='s'] .bl-head{padding-top:56px;padding-bottom:32px}
:root[data-lpw='s'] .bl-head h1{font-size:32px}
:root[data-lpw='s'] .bl-card{grid-template-columns:minmax(0,1fr);gap:16px;padding:28px 0}
:root[data-lpw='s'] .bl-card h2{font-size:22px;margin-top:0}
:root[data-lpw='s'] .post{padding-top:40px}
:root[data-lpw='s'] .post-head h1{font-size:30px;letter-spacing:-.5px}
:root[data-lpw='s'] .post-cover{margin-bottom:32px}
:root[data-lpw='s'] .post-cover img{border-radius:10px}
:root[data-lpw='s'] .post-body h2{font-size:21px;margin-top:36px}
:root[data-lpw='s'] .post-cta{padding:24px 20px}