/*
Theme Name: aimake.log
Description: AI 실전 제작 기록 블로그. 검정 에디토리얼. 시안(design/시안-블랙-*.html)을 그대로 이식.
Author: 재백
Version: 1.2.0
License: GPL v2 or later
Text Domain: aimakelog
*/

/* 아래 CSS는 시안 두 파일에서 가져온 것이다. 시안이 스펙이므로 임의로 바꾸지 않는다.
   글상세 쪽에서 홈과 겹치는 선택자(.head .wm .card .pill 등)는 충돌을 막기 위해 제거했다. */

/* ══════════════════════════════════════════════════════════════════
   aimakelog 디자인 토큰
   타입: 16px 기준. 아래 11단 외의 임의 크기 금지.
   간격: 4px 그리드. 아래 12단 외의 임의 여백 금지.
   모양: 카드·이미지 10px / 작은 썸네일 6px / 인터랙티브는 알약. 이 셋만.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* ── 색 ── */
  --bg:#050506;          /* 순수 #000 대신 미세 오프블랙 — 카드와의 깊이가 산다 */
  --surface:#101012;
  --surface-2:#17171a;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.26);
  --fg:#ffffff;
  --fg-sub:#9a9ea6;      /* 대비 6.4:1 · AA 통과 */
  --fg-faint:#7b7f87;    /* 대비 4.6:1 · AA 통과 (이전 #63666d는 3.1:1로 미달) */
  --logo-log:#7d818a;

  /* ── 타입 스케일 ── */
  --t-1:.75rem;   --t-2:.8125rem; --t-3:.875rem;  --t-4:1rem;
  --t-5:1.125rem; --t-6:1.25rem;  --t-7:1.5rem;   --t-8:1.875rem;
  --t-9:2.375rem; --t-10:3rem;    --t-11:3.75rem;
  --lh-tight:1.15; --lh-head:1.3; --lh-snug:1.45; --lh-body:1.8;

  /* ── 간격 스케일 (4px 그리드) ── */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.5rem; --s-8:3rem;
  --s-9:4rem;   --s-10:5rem;  --s-11:6rem;  --s-12:8rem;

  /* ── 모양 ── */
  --r-sm:6px; --r:10px; --r-pill:999px;

  /* ── 자간: 커질수록 좁힌다 ── */
  --tr-tight:-.04em; --tr-head:-.03em; --tr-body:-.02em; --tr-wide:.09em;

  --wrap:1200px; --gutter:var(--s-5);
  --sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:var(--t-4);line-height:var(--lh-snug);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none;display:block}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* 숫자와 뒤따르는 조사가 갈라지지 않게 (예: 80%를) */
.nb{white-space:nowrap}
.pill{display:inline-block;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:var(--s-1) var(--s-3);font-size:var(--t-1);font-weight:700;
  letter-spacing:var(--tr-wide);text-transform:uppercase;line-height:var(--lh-tight)}

/* ══ 상단 ══ */
.head{padding-top:var(--s-5)}
.head .row1{display:flex;align-items:center;gap:var(--s-5)}
.wm{font-size:var(--t-6);font-weight:800;letter-spacing:var(--tr-head);line-height:1}
.wm em{font-style:normal;color:var(--logo-log)}
/* 로고 커서: 계속 깜빡인다. prefers-reduced-motion 에서는 켜진 채 정지. */
.wm em::after{content:'';display:inline-block;width:.075em;height:.76em;
  background:currentColor;margin-left:.1em;vertical-align:-.04em;
  opacity:1;animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.search{flex:0 1 340px;display:flex;align-items:center;gap:var(--s-2);
  background:var(--surface-2);border:1px solid transparent;border-radius:var(--r-pill);
  padding:var(--s-2) var(--s-4);color:var(--fg-faint);font-size:var(--t-3);
  transition:border-color .18s}
.search:hover{border-color:var(--line)}
.search svg{flex:0 0 15px;opacity:.7}
.head .signin{margin-left:auto;font-size:var(--t-2);font-weight:700;
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--fg-sub);transition:color .18s}
.head .signin:hover{color:var(--fg)}
.head nav{display:flex;gap:var(--s-7);padding:var(--s-5) 0}
.head nav a{font-size:var(--t-3);font-weight:700;letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--fg-sub);transition:color .18s}
.head nav a:hover,.head nav a[aria-current]{color:var(--fg)}

/* ══ 히어로 ══ */
.hero{position:relative;aspect-ratio:16/6.4;min-height:360px;overflow:hidden;background:var(--surface)}
.hero .shot{position:absolute;inset:0}
.hero .shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.46) 46%,rgba(0,0,0,.14) 78%),
             linear-gradient(0deg,rgba(0,0,0,.58),rgba(0,0,0,0) 42%)}
.hero .copy{position:absolute;left:0;right:0;bottom:var(--s-8);z-index:3}
.hero h1{margin:var(--s-4) 0 var(--s-3);font-size:clamp(var(--t-8),3.1vw,var(--t-10));
  font-weight:800;letter-spacing:var(--tr-tight);line-height:var(--lh-tight);
  max-width:20ch;word-break:keep-all}
.hero p{margin:0;font-size:var(--t-4);color:var(--fg-sub);max-width:46ch;
  line-height:var(--lh-snug);word-break:keep-all}
.hero .pager{position:absolute;right:0;bottom:var(--s-9);z-index:4;
  display:flex;align-items:center;gap:var(--s-3);
  padding-right:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));
  font-family:var(--mono);font-size:var(--t-2);color:var(--fg-sub)}
.hero .pager button{background:none;border:none;color:var(--fg-sub);cursor:pointer;
  font-size:var(--t-5);line-height:1;padding:var(--s-1);transition:color .18s}
.hero .pager button:hover{color:var(--fg)}

/* 애드센스 승인 전에는 body[data-ads="off"] 로 전부 감춘다.
   승인되면 data-ads="on" 으로 바꾸고 .slot 안에 광고 코드를 넣으면 된다.
   자리(min-height)는 미리 잡혀 있으므로 켜도 레이아웃이 밀리지 않는다. */
[data-ads="off"] .ad{display:none}

/* ══════════════════════════════════════════════════════
   광고 슬롯 — 애드센스용. 높이를 미리 잡아 CLS를 막는다.
   슬롯이 비어도 레이아웃이 흔들리지 않도록 min-height 고정.
   ══════════════════════════════════════════════════════ */
.ad{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.ad .tag{font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint);
  letter-spacing:var(--tr-wide);text-transform:uppercase}
.ad .slot{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);display:grid;place-items:center;
  color:var(--fg-faint);font-family:var(--mono);font-size:var(--t-2);text-align:center;
  padding:var(--s-4)}
.ad-lead{margin:var(--s-9) 0}
.ad-lead .slot{min-height:90px}                          /* 970x90 / 728x90 */
.ad-infeed{grid-column:1/-1;margin:var(--s-2) 0}
.ad-infeed .slot{min-height:280px}                       /* 인피드 반응형 */
.ad-rect{margin:var(--s-9) 0 0}
.ad-rect .slot{min-height:280px;max-width:336px}         /* 336x280 */

/* ══ 인기 / 랭킹 ══ */
.pop{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-8);
  margin-top:var(--s-10)}
.tabs{display:flex;gap:var(--s-6);border-bottom:1px solid var(--line);padding-bottom:var(--s-3)}
.tabs button{background:none;border:none;padding:0;cursor:pointer;font:inherit;
  font-size:var(--t-6);font-weight:800;letter-spacing:var(--tr-body);
  color:var(--fg-faint);transition:color .18s}
.tabs button[aria-pressed=true]{color:var(--fg)}
.prow{display:flex;gap:var(--s-5);align-items:center;padding:var(--s-5) 0;
  border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow .th{display:block;flex:0 0 168px;aspect-ratio:16/7;overflow:hidden;
  border-radius:var(--r-sm);background:var(--surface)}
.prow .tx{flex:1;min-width:0}
.prow h4{margin:0;font-size:var(--t-4);font-weight:700;letter-spacing:var(--tr-body);
  line-height:var(--lh-snug);word-break:keep-all}
.prow .sub{margin:var(--s-2) 0 0;font-size:var(--t-3);color:var(--fg-sub);word-break:keep-all}
.prow .st{display:block;margin-top:var(--s-3);font-family:var(--mono);
  font-size:var(--t-1);color:var(--fg-faint)}
.rank h3{margin:0 0 var(--s-3);font-size:var(--t-6);font-weight:800;
  letter-spacing:var(--tr-body);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);
  display:flex;align-items:baseline}
.rank h3 .at{margin-left:auto;font-family:var(--mono);font-size:var(--t-1);
  color:var(--fg-faint);font-weight:400;letter-spacing:0}
.rank ol{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{counter-increment:r;border-bottom:1px solid var(--line)}
.rank li:last-child{border-bottom:none}
.rank a{display:flex;gap:var(--s-3);padding:var(--s-3) 0;align-items:baseline;transition:opacity .18s}
.rank a:hover{opacity:.65}
.rank a::before{content:counter(r);font-family:var(--mono);font-size:var(--t-2);
  font-weight:700;color:var(--fg-faint);flex:0 0 var(--s-4)}
.rank b{font-size:var(--t-3);font-weight:600;line-height:var(--lh-snug);
  letter-spacing:var(--tr-body);word-break:keep-all}
/* 사이드바 광고는 랭킹 아래에 붙어 따라온다 */
.rank .ad{margin-top:var(--s-7)}
.rank .ad .slot{min-height:600px}                        /* 300x600 하프페이지 */

/* ══ 섹션 제목 ══ */
.sec-head{text-align:center;padding:var(--s-11) 0 var(--s-7)}
.sec-head h2{margin:0;font-size:var(--t-7);font-weight:800;
  letter-spacing:var(--tr-body);line-height:var(--lh-head)}
.sec-head p{margin:var(--s-3) 0 0;font-size:var(--t-3);color:var(--fg-sub)}

/* ══ 글 그리드 ══ */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.card:hover{border-color:var(--line-strong)}
.card .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.card .pic img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.card:hover .pic img{transform:scale(1.04)}
.card .pic .pill{position:absolute;left:var(--s-3);bottom:var(--s-3);
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.32)}
.card .in{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;flex-direction:column;
  gap:var(--s-2);flex:1}
.card h3{margin:0;font-size:var(--t-4);font-weight:700;line-height:var(--lh-snug);
  letter-spacing:var(--tr-body);word-break:keep-all}
.card p{margin:0;font-size:var(--t-3);line-height:var(--lh-snug);color:var(--fg-sub);
  word-break:keep-all}
.card .foot{margin-top:auto;padding-top:var(--s-3);display:flex;align-items:center;
  font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint)}
.card .foot .rt{margin-left:auto}
.card.wide{grid-column:span 2;flex-direction:row}
.card.wide .pic{flex:0 0 52%;aspect-ratio:auto}
.card.wide .in{padding:var(--s-7) var(--s-8);justify-content:center;gap:var(--s-3)}
.card.wide h3{font-size:var(--t-7);line-height:var(--lh-head)}
.card.wide p{font-size:var(--t-4)}

/* ══ 더보기 / 푸터 ══ */
.more{display:flex;justify-content:center;padding:var(--s-9) 0 0}
.more a{border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:var(--s-3) var(--s-7);font-size:var(--t-3);font-weight:700;
  letter-spacing:var(--tr-wide);transition:background .2s,border-color .2s}
.more a:hover{background:var(--surface-2);border-color:var(--fg)}
.foot-bar{border-top:1px solid var(--line);margin-top:var(--s-11);
  padding:var(--s-7) 0 var(--s-9);display:flex;align-items:center;gap:var(--s-5);
  flex-wrap:wrap;font-size:var(--t-3);color:var(--fg-faint)}
.foot-bar .wm{font-size:var(--t-4)}
.foot-bar .links{display:flex;gap:var(--s-5);margin-left:auto}
.foot-bar .links a{display:inline;color:var(--fg-sub)}
.foot-bar .links a:hover{color:var(--fg)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .wm em::after{opacity:1}}
@media(max-width:980px){
  .pop{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.wide{grid-column:span 2}
  .rank .ad .slot{min-height:280px}
}
@media(max-width:700px){
  :root{--gutter:var(--s-4)}
  .head .row1{flex-wrap:wrap}
  .search{flex:1 1 100%;order:3}
  .head nav{gap:var(--s-5);overflow-x:auto;padding-bottom:var(--s-4)}
  .hero{aspect-ratio:4/5;min-height:0}
  .hero .shot::after{background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.1) 60%)}
  .hero .pager{display:none}
  .grid{grid-template-columns:1fr}
  .card.wide{grid-column:span 1;flex-direction:column}
  .card.wide .pic{flex:none;aspect-ratio:16/10}
  .card.wide .in{padding:var(--s-4) var(--s-5) var(--s-5)}
  .card.wide h3{font-size:var(--t-6)}
  .sec-head{padding:var(--s-9) 0 var(--s-6)}
  .prow{gap:var(--s-4)}
  .prow .th{flex:0 0 108px}
  .prow .sub{display:none}
  .ad-lead .slot{min-height:100px}                       /* 320x100 */
}


/* ══════ 글 상세 (시안-블랙-글상세) ══════ */
/* 토큰은 홈(시안-블랙-2026-07-27.html)과 동일. 두 파일이 같은 값을 쓴다. */
:root{
  --bg:#050506; --surface:#101012; --surface-2:#17171a; --code-bg:#0b0b0d;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.26);
  --fg:#ffffff;
  --fg-body:#c5c8ce;     /* 본문 — 순백(21:1)은 검정 위에서 눈이 아프다 */
  --fg-sub:#9a9ea6;      /* 6.4:1 · AA */
  --fg-faint:#7b7f87;    /* 4.6:1 · AA */
  --logo-log:#7d818a;

  --t-1:.75rem;   --t-2:.8125rem; --t-3:.875rem;  --t-4:1rem;
  --t-5:1.125rem; --t-6:1.25rem;  --t-7:1.5rem;   --t-8:1.875rem;
  --t-9:2.375rem; --t-10:3rem;    --t-11:3.75rem;
  --lh-tight:1.15; --lh-head:1.3; --lh-snug:1.45; --lh-body:1.8;

  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:2.5rem; --s-8:3rem;
  --s-9:4rem;   --s-10:5rem;  --s-11:6rem;  --s-12:8rem;

  --r-sm:6px; --r:10px; --r-pill:999px;
  --tr-tight:-.04em; --tr-head:-.03em; --tr-body:-.02em; --tr-wide:.09em;

  --wrap:1200px; --gutter:var(--s-5);
  --sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
}
/* 숫자와 뒤따르는 조사가 갈라지지 않게 (예: 80%를) */
.nb{white-space:nowrap}
.progress{position:fixed;top:0;left:0;height:2px;background:var(--fg);width:0;z-index:80}
/* ══ 상단 ══ */
.head{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
  background:rgba(5,5,6,.86);backdrop-filter:blur(14px)}
/* ══ 커버 ══ */
.cover{position:relative;aspect-ratio:16/6;min-height:340px;overflow:hidden;background:var(--surface)}
.cover>img{width:100%;height:100%;object-fit:cover}
.cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.94) 4%,rgba(0,0,0,.34) 55%,rgba(0,0,0,.5) 100%)}
.cover .cap{position:absolute;left:0;right:0;bottom:var(--s-7);z-index:3}
.cover h1{margin:var(--s-4) 0 var(--s-3);font-size:clamp(var(--t-8),3.4vw,var(--t-9));
  font-weight:800;letter-spacing:var(--tr-tight);line-height:var(--lh-tight);
  max-width:24ch;word-break:keep-all}
.cover .dek{margin:0;font-size:var(--t-4);color:var(--fg-sub);max-width:52ch;
  line-height:var(--lh-snug);word-break:keep-all}
/* 메타는 가운뎃점 대신 간격으로 나눈다 — 한 줄에 점 여러 개는 지저분하다 */
.cover .meta{margin-top:var(--s-5);display:flex;gap:var(--s-6);flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-1);color:var(--fg-sub)}
/* ══ 본문 레이아웃 ══ */
.body-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-9);
  padding-block:var(--s-9) var(--s-10);align-items:start}
article{max-width:720px;min-width:0}
/* min-width:0 이 없으면 코드블록이 칼럼을 밀어낸다 */

/* ══ 본문 타이포 ══ */
.prose{font-size:var(--t-5);line-height:var(--lh-body);color:var(--fg-body);word-break:keep-all}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 var(--s-5)}
.prose h2{margin:var(--s-11) 0 var(--s-4);padding-top:var(--s-6);
  border-top:1px solid var(--line);font-size:var(--t-7);font-weight:800;color:var(--fg);
  letter-spacing:var(--tr-head);line-height:var(--lh-head)}
.prose h3{margin:var(--s-8) 0 var(--s-3);font-size:var(--t-6);font-weight:700;
  color:var(--fg);letter-spacing:var(--tr-body);line-height:var(--lh-head)}
.prose strong{color:var(--fg);font-weight:700}
.prose a{color:var(--fg);border-bottom:1px solid var(--line-strong);transition:border-color .18s}
.prose a:hover{border-color:var(--fg)}
.prose ul,.prose ol{margin:0 0 var(--s-5);padding-left:var(--s-5)}
.prose li{margin-bottom:var(--s-3)}
.prose li::marker{color:var(--fg-faint)}
.prose blockquote{margin:var(--s-7) 0;padding:var(--s-5);background:var(--surface);
  border-left:2px solid var(--fg);border-radius:0 var(--r) var(--r) 0}
.prose blockquote p{margin:0;color:var(--fg);font-size:var(--t-6);
  font-weight:600;line-height:var(--lh-head)}
.prose figure{margin:var(--s-7) 0}
.prose figure img{width:100%;border:1px solid var(--line);border-radius:var(--r)}
.prose figcaption{margin-top:var(--s-3);font-family:var(--mono);
  font-size:var(--t-1);color:var(--fg-faint)}
.prose table{width:100%;border-collapse:collapse;margin:var(--s-7) 0;font-size:var(--t-3);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.prose thead{background:var(--surface-2)}
.prose th{text-align:left;font-weight:700;color:var(--fg)}
.prose th,.prose td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.prose tbody tr:last-child td{border-bottom:none}
.prose td:first-child{color:var(--fg)}
.prose pre{margin:var(--s-7) 0;max-width:100%;background:var(--code-bg);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-5);overflow-x:auto;
  font-family:var(--mono);font-size:var(--t-3);line-height:1.75;color:#d6d9df}
.prose pre .c{color:var(--fg-faint)}
.prose pre .k{color:var(--fg);font-weight:600}
.prose code:not(pre code){font-family:var(--mono);font-size:.86em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.14em .42em;color:var(--fg)}
/* 애드센스 승인 전에는 body[data-ads="off"] 로 전부 감춘다.
   승인되면 data-ads="on" 으로 바꾸면 된다. */
[data-ads="off"] .ad{display:none}
/* ══════════════════════════════════════════════════════
   광고 슬롯 — 높이를 미리 잡아 CLS를 막는다.
   본문 안 광고는 문단과 확실히 분리해 콘텐츠로 오인되지 않게 한다.
   ══════════════════════════════════════════════════════ */
.ad{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.ad-article{margin:var(--s-9) 0}
.ad-article .slot{min-height:280px}
.ad-end{margin:var(--s-9) 0 0}
.ad-end .slot{min-height:280px}
.side .ad{margin-top:var(--s-7)}
.side .ad .slot{min-height:600px}
/* ══ 사이드바 ══ */
.side{position:sticky;top:var(--s-10);display:flex;flex-direction:column;gap:var(--s-7)}
.toc h4,.mini h4{margin:0 0 var(--s-3);font-size:var(--t-1);font-weight:700;
  letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--fg-faint);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t}
.toc a{display:flex;gap:var(--s-3);padding:var(--s-2) 0;font-size:var(--t-3);
  line-height:var(--lh-snug);color:var(--fg-sub);transition:color .18s;word-break:keep-all}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);
  font-size:var(--t-1);color:var(--fg-faint);flex:0 0 var(--s-5);padding-top:.15em}
.toc a:hover,.toc a[aria-current]{color:var(--fg)}
.toc a[aria-current]::before{color:var(--fg)}
.mini a{display:flex;gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);align-items:center}
.mini a:last-child{border-bottom:none}
.mini .th{display:block;flex:0 0 62px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-sm);background:var(--surface)}
.mini .th img{width:100%;height:100%;object-fit:cover}
.mini b{font-size:var(--t-2);font-weight:600;line-height:var(--lh-snug);
  letter-spacing:var(--tr-body);word-break:keep-all}
/* ══ 작성자 ══
   1인 블로그에서 작성자 블록은 검색엔진이 보는 신뢰 신호이자
   구독 전환이 제일 잘 되는 자리다. 그래서 구독 버튼을 여기에 붙인다. */
.author{display:flex;gap:var(--s-5);align-items:center;margin-top:var(--s-7);
  padding:var(--s-5) var(--s-6);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
.author .ava{flex:0 0 64px;height:64px;border-radius:50%;overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line)}
.author .ava img{width:100%;height:100%;object-fit:cover}
.author .tx{min-width:0}
.author .lbl{font-family:var(--mono);font-size:var(--t-1);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--fg-faint)}
.author h4{margin:var(--s-1) 0 var(--s-2);font-size:var(--t-6);font-weight:800;
  letter-spacing:var(--tr-body);line-height:var(--lh-head)}
.author p{margin:0;font-size:var(--t-3);color:var(--fg-sub);
  line-height:var(--lh-snug);word-break:keep-all}
.author .links{display:flex;gap:var(--s-4);margin-top:var(--s-3);
  font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint)}
.author .links a{display:inline;transition:color .18s}
.author .links a:hover{color:var(--fg)}
.author .sub{margin-left:auto;flex:0 0 auto;border:1px solid var(--line-strong);
  border-radius:var(--r-pill);padding:var(--s-3) var(--s-5);font-size:var(--t-3);
  font-weight:700;letter-spacing:var(--tr-wide);transition:background .2s,border-color .2s}
.author .sub:hover{background:var(--surface-2);border-color:var(--fg)}
/* ══ 섹션 구분선 — 관련 글 앞에 한 번만 ══ */
.rule-mark{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-9)}
.rule-mark::before,.rule-mark::after{content:'';flex:1;height:1px;background:var(--line)}
.rule-mark span{font-family:var(--mono);font-size:var(--t-1);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--fg-faint)}
/* ══ 글 끝 ══ */
.tags{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-8)}
.tags .pill{color:var(--fg-sub);border-color:var(--line);text-transform:none;
  letter-spacing:0;font-weight:600;font-size:var(--t-2)}
.share{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);
  padding-top:var(--s-6);border-top:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint)}
.share button{background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--fg-sub);font:inherit;padding:var(--s-2) var(--s-4);cursor:pointer;
  transition:border-color .18s,color .18s}
.share button:hover{border-color:var(--line-strong);color:var(--fg)}
.nextprev{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);margin-top:var(--s-7)}
.nextprev a{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s-4) var(--s-5);transition:border-color .2s}
.nextprev a:hover{border-color:var(--line-strong)}
.nextprev .lbl{font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint)}
.nextprev b{display:block;margin-top:var(--s-2);font-size:var(--t-3);font-weight:700;
  line-height:var(--lh-snug);letter-spacing:var(--tr-body);word-break:keep-all}
.nextprev .r{text-align:right}
.more-sec{border-top:1px solid var(--line);padding:var(--s-9) 0 var(--s-11)}
.more-sec .rule-mark{margin:0 0 var(--s-6)}
@media(max-width:1000px){.body-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
.side{position:static;order:-1}
.side .ad{display:none}
/* 모바일에선 본문 내 광고만 남긴다 */
  .more-grid{grid-template-columns:1fr}}
@media(max-width:700px){.cover{aspect-ratio:3/4}
.prose{font-size:var(--t-4)}
.nextprev{grid-template-columns:1fr}
.author{flex-wrap:wrap;gap:var(--s-4);padding:var(--s-5)}
.author .ava{flex:0 0 48px;height:48px}
.author .sub{margin-left:0;width:100%;text-align:center}
.prose table{display:block;overflow-x:auto}}
/* ══════════════════════════════════════════════════════════
   테마 보정 — 시안(정적 HTML)에 없던 것만 최소로 더한다
   ══════════════════════════════════════════════════════════ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--s-4);top:var(--s-4);z-index:999;background:var(--fg);
  color:var(--bg);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm)}
/* 검색은 시안에선 장식이었지만 실제로는 폼이다 */
.head .search input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--fg);font:inherit;font-size:var(--t-3);padding:0}
.head .search input::placeholder{color:var(--fg-faint)}
.head .search:focus-within{border-color:var(--line-strong)}
.hero h1 a{color:inherit;text-decoration:none}
.author .tx{flex:1;min-width:0}
/* 커버 이미지가 없는 글 */
.cover--plain{aspect-ratio:auto;min-height:0;background:var(--surface);
  border-bottom:1px solid var(--line);padding:var(--s-9) 0 var(--s-8)}
.cover--plain::after{display:none}
.cover--plain .cap{position:static}
/* 404·검색 빈 상태 */
.plain{padding:var(--s-11) 0;max-width:60ch}
.plain h1{font-size:var(--t-8);font-weight:800;color:var(--fg);letter-spacing:var(--tr-tight);
  line-height:var(--lh-tight);margin:0 0 var(--s-4)}
.plain p{color:var(--fg-sub);margin:0 0 var(--s-6)}
/* 페이지네이션 */
.pagination{display:flex;gap:var(--s-3);justify-content:center;padding:var(--s-9) 0 var(--s-11);flex-wrap:wrap}
.pagination a,.pagination .current{border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:var(--s-3) var(--s-7);font-size:var(--t-3);font-weight:700;color:var(--fg);
  letter-spacing:var(--tr-wide)}
.pagination .current{background:var(--fg);color:var(--bg)}

/* ── 참고 문헌 ── 본문 끝의 출처 표기. 한 줄 문장 대신 라벨/제목/메타 3층 구조 */
.prose .refs{margin:var(--s-9) 0 0;padding:var(--s-5) var(--s-6);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;gap:var(--s-2)}
.prose .refs .lbl{font-family:var(--mono);font-size:var(--t-1);letter-spacing:var(--tr-wide);
  text-transform:uppercase;color:var(--fg-faint)}
.prose .refs a{color:var(--fg);font-weight:600;font-size:var(--t-4);line-height:var(--lh-snug);
  border-bottom:none;word-break:keep-all}
.prose .refs a:hover{text-decoration:underline;text-underline-offset:3px}
.prose .refs .meta{font-family:var(--mono);font-size:var(--t-1);color:var(--fg-faint)}