/* post.css — 포스팅 면의 공통 서식 [2026-08-09]
 *
 * 이 규칙들은 스물한 면의 인라인 `<style>` 에 **같은 것이 스물한 벌** 복사돼
 * 있었다. 말미 하나를 고치는 데 스물한 면을 훑어야 했고, 한 면이라도 빠지면
 * 그 면만 조용히 옛 모양으로 남았다. 다섯 회차를 그렇게 보냈다.
 *
 * 옮기면서 **캐스케이드를 한 칸도 건드리지 않았다.** 인라인은 tokens.css 뒤,
 * site.css 앞에 있었다. 이 파일을 정확히 그 자리에 건다 — site.css 로 합치면
 * 뒤에 오는 figures.css·post-shell.css·agentview.css 와의 우열이 뒤집힌다.
 *
 * 면마다 다른 것만 인라인에 남겼다(사진 도판·슬라이드 스트립·자리표시 상자).
 * 공통과 예외는 선택자가 겹치지 않는다 — 겹쳤다면 나누지 못했다.
 */

:root{
  --canvas:#F3F3EF; --surface:#FBFBF8; --ink:#17181A; --ink-muted:#5E6065;
  --ink-faint:#686A6F; --rule:#CFCFC8; --rule-strong:#17181A;
  --accent:#2457D6; --accent-hover:#163DA7; --inverse:#17181A; --inverse-ink:#F7F7F2;
  --font-display:"Iowan Old Style","Noto Serif CJK KR","AppleMyungjo","Nanum Myeongjo",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --font-mono:"SFMono-Regular","Roboto Mono","Noto Sans Mono CJK KR",monospace; --gutter:1rem; --micro:.6875rem; --meta:.75rem;
}
@media(min-width:48rem){:root{--gutter:2rem}}
@media(min-width:80rem){:root{--gutter:3rem}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font-body);font-size:1.0625rem;line-height:1.78;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  /* 한글은 어절 단위로 끊는다. 없으면 "묻/다"처럼 단어 중간에서 잘린다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{color:var(--accent-hover);text-decoration-thickness:.14em}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.5rem;z-index:9;background:var(--surface);
  padding:.5rem .75rem;border:1px solid var(--rule-strong)}
/* 선만 사용 — 헤더는 hairline 하나로 구분한다 */
.site-header{border-block-end:1px solid var(--rule)}
.site-header__in{
  width:min(100%,var(--shell));margin-inline:auto;padding-inline:var(--gutter);
  min-height:4.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.brand{
  font-family:var(--font-mono);font-size:var(--meta);font-weight:600;
  letter-spacing:.09em;text-decoration:none;color:var(--ink);
}
.meta-label{
  margin:0;font-family:var(--font-mono);font-size:var(--meta);font-weight:500;
  letter-spacing:.09em;color:var(--ink-muted);text-transform:uppercase;
}
main{width:min(100%,calc(var(--measure) + var(--gutter)*2));
  margin-inline:auto;padding-inline:var(--gutter)}
.head{padding-block:4rem 0;display:grid;gap:1.25rem}
.hero{margin:2rem 0 2.5rem}
.hero img{display:block;width:100%;border:1px solid var(--rule)}
/* 시리즈 배너. 텍스트 박스를 이미지에 굽지 않고 여기서 얹는다.
   그래야 글자가 선택·검색되고 확대해도 깨지지 않으며, 현재 글 표시와
   이동 링크를 붙일 수 있다. */
.banner{position:relative;margin:2.5rem 0}
.banner img{display:block;width:100%;border:1px solid var(--rule)}
.banner__cards{
  position:absolute;inset:auto 0 0 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:0 2.5%;
  margin:0;padding:0 3.5% 4%;list-style:none;
}
.banner__cards a,.banner__cards .card{
  display:grid;gap:.35rem;padding:.7rem .8rem;
  /* 사진 위에서 글자가 읽히려면 바탕이 필요하다. 그림자·블러 대신 종이색을
     또렷이 깔고 테두리는 선 하나로 둔다(7장 규범 유지). 각 카드가 눌러서
     읽는 개별 글임이 분명하도록 바탕을 진하게, '글 읽기 →'를 상시 노출한다. */
  border:1px solid rgba(23,24,26,.4);background:rgba(243,243,239,.94);
  text-decoration:none;color:var(--ink);
}
.banner__cards a{transition:border-color .15s ease-out,background .15s ease-out}
.banner__cards a:hover{border-color:var(--accent);background:rgba(243,243,239,.99)}
.banner__cards a:hover .t{text-decoration:underline;text-underline-offset:.16em}
.banner__cards .card{border-color:var(--rule-strong)}
.banner__cards .row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.banner__cards .n{font-family:var(--font-mono);font-size:var(--micro);
  letter-spacing:.08em;color:var(--accent)}
/* 눌러서 읽는 글임을 늘 알리는 표시. 현재 글 카드에는 붙이지 않는다 */
.banner__cards .go{font-family:var(--font-mono);font-size:var(--micro);
  font-weight:600;letter-spacing:.03em;color:var(--accent)}
.banner__cards a:hover .go{color:var(--accent-hover)}
.banner__cards .cur{font-family:var(--font-mono);font-size:var(--micro);
  letter-spacing:.03em;color:var(--ink-faint)}
/* 상위 목록으로 돌아가는 버튼. 브랜드명과 맨 아래 바에만 링크가 있으면
   찾지 못한다. 선만 쓰는 규범 안에서 버튼 형태로 세운다. */
.uplink{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;
  padding-inline:.9rem;border:1px solid var(--rule-strong);
  font-family:var(--font-mono);font-size:var(--micro);font-weight:600;
  letter-spacing:.08em;color:var(--ink);text-decoration:none;white-space:nowrap;
  transition:color .15s ease-out,border-color .15s ease-out;
}
.uplink:hover{border-color:var(--accent);color:var(--accent-hover)}
.uplink::after{content:"→"}
.uplink--head{border:0;padding-inline:0;color:var(--ink-muted);
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;font-size:var(--meta)}
.uplink--head:hover{border:0;color:var(--accent-hover)}
/* 글 제목이 카드의 주인공. 길이가 달라도 두 줄까지만 잡아 높이를 맞춘다 */
.banner__cards .t{font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:47.99rem){
  /* 좁은 화면에서 이미지 위에 얹으면 글자가 읽히지 않는다. 아래로 내린다 */
  .banner__cards{position:static;grid-template-columns:1fr;gap:.5rem;padding:.75rem 0 0}
  .banner__cards a,.banner__cards .card{background:none;border-color:var(--rule)}
}
.metarow{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem}
.metarow time{font-family:var(--font-mono);font-size:var(--meta);color:var(--ink-muted)}
/* 작성 주체 공개 — 색면 없이 1px 테두리와 마이크로 타입으로만 */
.authorship{
  display:inline-flex;align-items:center;min-height:1.5rem;padding-inline:.5rem;
  border:1px solid var(--rule-strong);color:var(--ink-muted);
  font-family:var(--font-mono);font-size:var(--micro);font-weight:600;
  letter-spacing:.08em;text-decoration:none;white-space:nowrap;
  transition:color .15s ease-out,border-color .15s ease-out;
}
.authorship:hover{border-color:var(--accent);color:var(--accent-hover)}
h1{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,3.6vw,3.3rem);line-height:1.15;letter-spacing:-.03em;
  text-wrap:balance;
}
/* 표제는 두 줄이다. 위가 시리즈 제목(큰 제목), 아래가 그 회차의 제목
   (중간 제목). 한 덩어리로 이어 놓으면 어디까지가 시리즈 이름인지
   읽히지 않아 글자체·크기·색을 나눈다. */
h1{display:grid;gap:.55rem;margin-block-start:.5rem}
/* 위가 시리즈 줄(작게), 아래가 그 회차의 제목(크게). 읽는 사람이 실제로 고른
   것은 이 한 편이므로 편 제목이 표제가 되고 시리즈는 소속을 알리는 줄로 둔다. */
/* 표제가 먼저 오고, 그 아래에 어느 시리즈의 몇 번째인지를 알리는 줄이 붙는다.
   위의 메타 줄과 떨어져 있어 강조색 회차 표기를 써도 서로 경쟁하지 않는다. */
.t-post{display:block}
/* 크기는 리드 문단과 같은 값을 쓴다. 이보다 작으면 표제에 딸린 줄이 아니라
   각주처럼 밀려 읽힌다(.lead와 같은 clamp를 의도적으로 공유한다). */
.t-series{display:block;font-family:var(--font-body);
  font-size:clamp(1.06rem,1.5vw,1.22rem);
  font-weight:600;line-height:1.5;letter-spacing:0;color:var(--ink-muted)}
.t-part{margin-inline-start:.5rem;font-family:var(--font-mono);font-size:var(--meta);
  font-weight:600;letter-spacing:.09em;color:var(--accent)}
.lead{
  margin:0;max-width:var(--measure);color:var(--ink-muted);
  font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62;
}
.series{
  margin:0;padding-block-start:1.25rem;border-block-start:1px solid var(--rule);
  color:var(--ink-faint);font-size:.875rem;line-height:1.7;font-style:italic;
}
.prose{padding-block-start:2.5rem;border-block-start:1px solid var(--rule);margin-block-start:2.5rem}
.prose p{margin:0 0 1.5rem;text-wrap:pretty}
.prose h2{
  margin:3.5rem 0 1rem;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.45rem,2vw,1.85rem);line-height:1.3;letter-spacing:-.02em;
  display:flex;gap:.75rem;align-items:baseline;
}
/* 시간의 이음선 — 순서 번호는 모노로 작게 */
.secnum{flex:none;font-family:var(--font-mono);font-size:var(--meta);
  color:var(--ink-faint);letter-spacing:.08em}
/* 선을 긋지 않는다 — 포스팅이 끝나는 선은 아래 도구 줄이 진다.
   말미 위에 선을 그으면 편 목록·귀속이 본문과 다른 덩어리로 읽히고,
   정작 글과 사이트 인터페이스 사이에는 아무 경계도 없게 된다. */
/* 귀속 표기는 **한 장의 판**이다. 선 위에 남은 유일한 것이라 문단으로 두면
   본문 꼬리처럼 읽힌다. 도슨트 안내 박스와 같은 집안으로 맞춘다 —
   1px 실선 · 모서리 0 · 바탕은 지면색(칠하지 않고 테두리만 남는다). */
.foot{margin-block:4rem 2.5rem;display:block;
  padding:1.15rem 1.25rem;border:1px solid var(--rule);background:var(--canvas)}
/* 여백은 **한 자리에서만** 정한다. 앞서 `.foot p{margin:0}
` 이 형제 규칙보다
   특이도가 높아(0,1,1 > 0,1,0) 귀속문 위 여백을 조용히 0 으로 눌렀다. */
.foot > *{margin:0}
.foot > * + *{margin-block-start:1.75rem}
/* 두 귀속 문장은 한 덩어리다. 한글과 영어 사이는 바짝 붙인다 */
.foot .en{margin-block-start:.4rem}
.foot p{color:var(--ink-muted);font-size:.875rem;line-height:1.7}
.foot .en{font-family:var(--font-mono);font-size:var(--micro);
  letter-spacing:.04em;color:var(--ink-faint);line-height:1.8}
.serieslinks{display:grid;gap:.4rem}
.serieslinks a{display:block}
.serieslinks .self{color:var(--ink);text-decoration:none;cursor:default}
/* 바탕 자료 안내 — 목록 페이지, 포스팅 세 개, 바탕 자료 페이지가 함께 쓴다 */
.sources{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
@media(min-width:48rem){.sources{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 한 줄에 놓인 카드는 가장 긴 것에 높이를 맞춘다. align-content:start 로
   글자는 위에 붙이고 남는 높이는 아래를 비운다. */
.sources a{display:grid;gap:.3rem;align-content:start;height:100%;
  padding:.9rem 1rem;border:1px solid var(--rule);
  text-decoration:none;color:var(--ink)}
.sources a:hover{border-color:var(--accent)}
.sources .k{font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.09em;
  color:var(--accent);display:flex;justify-content:space-between;gap:.5rem}
.sources .t{font-size:.9375rem;font-weight:600;line-height:1.4}
.sources .s{font-size:.8125rem;line-height:1.55;color:var(--ink-muted)}
.site-footer{margin-block-start:5rem;background:var(--inverse);color:var(--inverse-ink)}
.site-footer__in{width:min(100%,var(--shell));margin-inline:auto;padding:2.5rem var(--gutter);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--micro);letter-spacing:.09em}
.site-footer a{color:var(--inverse-ink)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}