/* ══════════════════════════════════════════════════════════════
   멘즈와이 · MEN'S WHY — 디자인 시스템
   ────────────────────────────────────────────────────────────
   사진을 쓰지 않는 매거진이다. 사진 자리에 숫자와 활자를 놓는다.
   제목 Noto Serif KR 700 · 본문 Gothic A1 · 라벨 Azeret Mono · 워드마크 Archivo
   색은 전부 WCAG AA(4.5:1) 이상에서 고른 값이다. 임의로 밝히지 말 것.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 토큰 ──────────────────────────────────────── */
:root{
  /* 색 — 글자 3단(ink / mute / faint) 전부 본문·워시 배경에서 4.5:1 이상 */
  --paper:#FFFFFF;  --wash:#F5F5F2;  --soft:#EDEDEA;  --rule:#DCDCDA;
  --ink:#0C0D0F;    /* 19.4:1 제목·본문 */
  --mute:#53565D;   /*  7.4:1 부속 본문 */
  --faint:#6E7076;  /*  5.0:1 라벨·날짜 — 이보다 밝히면 AA를 벗어난다 */
  --accent:#C2261B; /*  5.9:1 강조. 한 화면에 한두 번 */
  --hit:#1E6B4F;    /*  6.4:1 확정·있음 */

  /* 글꼴 */
  --serif:"Noto Serif KR","AppleMyungjo","Nanum Myeongjo",serif;
  --sans:"Gothic A1","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"Azeret Mono",ui-monospace,monospace;
  --disp:"Archivo",sans-serif;

  /* 타입 스케일 — 9단. 새 값을 만들지 말고 여기서 고른다 */
  --t1:10px;                        /* 라벨 최소 */
  --t2:11.5px;                      /* 캡션 */
  --t3:13.5px;                      /* 부속 본문 */
  --t4:15.5px;                      /* 본문 */
  --t5:17px;                        /* 리드 문단 */
  --t6:20px;                        /* 소제목 */
  --t7:clamp(22px,2.6vw,27px);      /* 섹션 제목 */
  --t8:clamp(28px,3.8vw,44px);      /* 기사 제목 */
  --t9:clamp(34px,6vw,64px);        /* 표지 제목 */

  /* 간격 스케일 — 4px 기반 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* 폭 */
  --w-shell:1180px;
  --w-read:680px;   /* 기사 본문. 한글 한 줄 40자 안팎 */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101216; --wash:#171A1F; --soft:#1B1E24; --rule:#282C33;
  --ink:#ECEAE4; --mute:#B0B6BE; --faint:#7A838D;
  --accent:#F0503E; --hit:#56B489;}}
:root[data-theme="dark"]{
  --paper:#101216; --wash:#171A1F; --soft:#1B1E24; --rule:#282C33;
  --ink:#ECEAE4; --mute:#B0B6BE; --faint:#7A838D;
  --accent:#F0503E; --hit:#56B489;}

/* ── 2. 리셋 · 한글 조판 ──────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);margin:0;
  font-family:var(--sans);font-size:var(--t4);line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 어절 중간에서 줄이 끊기지 않게, 제목은 줄 길이를 고르게 */
h1,h2,h3,h4,p,li,dd,blockquote,.dek,.lede,.tt,.pc{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,.lede,.dek,.why{text-wrap:pretty}
.lead h1,.cover h1,.sub h2,.band-h h2,.corner-h h2,.art-h h1{text-wrap:balance}

/* ── 3. 상태 — 전 컴포넌트 공통 ───────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
a[href]{transition:color .12s ease}
/* 본문 안의 링크는 반드시 밑줄. 색만으로 링크를 알리지 않는다 */
.prose a[href],.stance a[href],.band-note a[href]{
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--faint)}
.prose a[href]:hover{text-decoration-color:var(--accent);color:var(--accent)}

/* ── 4. 레이아웃 ──────────────────────────────────── */
.shell{max-width:var(--w-shell);margin:0 auto;padding:0 var(--s5)}
.shell.read{max-width:var(--w-read)}

/* ── 5. 셸 — 고지 바 ──────────────────────────────── */
.topbar{background:var(--ink);color:var(--paper);padding:var(--s2) var(--s4);
  text-align:center;font-family:var(--disp);font-size:var(--t1);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;line-height:1.5}
.topbar span{opacity:.6}

/* ── 6. 셸 — 마스트헤드 ───────────────────────────── */
.head{border-bottom:1px solid var(--rule)}
.head .shell{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:var(--s4);padding-top:var(--s5);padding-bottom:var(--s5)}
.head .slot{display:flex;align-items:center;gap:var(--s3)}
.head .slot.r{justify-content:flex-end}
.wordmark{display:block;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,6.2vw,62px);letter-spacing:-.02em;line-height:.92;
  font-variation-settings:"wdth" 112;white-space:nowrap}
.wordmark .ko{display:block;font-family:var(--mono);font-size:var(--t1);font-weight:400;
  letter-spacing:.42em;margin-top:var(--s2);color:var(--faint);text-indent:.42em;
  font-variation-settings:normal}
.issue{font-family:var(--mono);font-size:var(--t1);letter-spacing:.1em;
  color:var(--faint);text-transform:uppercase;line-height:1.5}

/* 구독 버튼 — 사이트에서 가장 강한 행동 */
.btn-sub{font-family:var(--mono);font-size:var(--t2);letter-spacing:.12em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);
  padding:10px 16px;white-space:nowrap;border:1px solid var(--ink)}
.btn-sub:hover{background:var(--accent);border-color:var(--accent)}

/* ── 7. 셸 — 내비 ─────────────────────────────────── */
.nav{position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:2px solid var(--ink)}
.nav .shell{display:flex;gap:var(--s1);justify-content:center;flex-wrap:wrap;
  padding-top:0;padding-bottom:0}
.nav a{font-size:var(--t3);font-weight:700;letter-spacing:-.01em;padding:13px var(--s4);
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.nav a .en{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);display:block;font-weight:400;margin-top:1px}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav a[aria-current="page"] .en{color:var(--accent)}
/* 다섯 번째 칸은 글이 아니라 자료다. 구분선과 색으로 급을 나눈다 */
.nav a.tool{color:var(--mute);border-left:1px solid var(--rule);
  margin-left:var(--s2);padding-left:var(--s5)}
@media (max-width:640px){.nav a.tool{border-left:0;margin-left:0;padding-left:4px}}

/* ── 8. 활자 컴포넌트 ─────────────────────────────── */
.kicker{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);line-height:1.4;display:block}
.kicker.q{color:var(--faint)}
.meta{font-family:var(--mono);font-size:var(--t2);letter-spacing:.06em;
  color:var(--faint);font-variant-numeric:tabular-nums}
.meta b{font-weight:400;color:var(--mute)}
.dek{color:var(--mute);font-size:var(--t3);line-height:1.7}
.dek b{color:var(--ink);font-weight:700}
.lab{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}

/* ── 9. 섹션 머리 ─────────────────────────────────── */
.band{margin-top:var(--s8)}
.band-h{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:var(--s5)}
.band-h h2{font-family:var(--serif);font-size:var(--t7);font-weight:700;
  letter-spacing:-.02em;line-height:1.2}
.band-h .en{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.band-h .more{margin-left:auto;font-family:var(--mono);font-size:var(--t2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.band-h .more:hover{color:var(--accent)}
.band-note{color:var(--mute);font-size:var(--t3);max-width:70ch;
  margin:calc(var(--s2) * -1) 0 var(--s5)}
.band-note b{color:var(--ink);font-weight:700}

/* ── 10. 타입 플레이트 — 사진 자리 ─────────────────
   그 편의 핵심 숫자 하나를 판에 앉힌다. 릴스 첫 3초 화면과 같은 형태. */
.plate{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;
  justify-content:space-between;padding:var(--s5);aspect-ratio:4/5;overflow:hidden}
.plate .pk{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;opacity:.6}
.plate .pn{font-family:var(--disp);font-weight:800;font-size:clamp(54px,7vw,104px);
  line-height:.86;letter-spacing:-.035em;font-variation-settings:"wdth" 88;
  font-variant-numeric:tabular-nums}
.plate .pn sub{font-family:var(--sans);font-size:.3em;font-weight:400;
  vertical-align:baseline;margin-left:var(--s1);opacity:.8}
.plate .pc{font-size:var(--t3);line-height:1.6;opacity:.82;max-width:26ch}
.plate.lite{background:var(--wash);color:var(--ink);border:1px solid var(--rule)}
.plate.lite .pk{color:var(--faint);opacity:1}
.plate.lite .pc{color:var(--mute);opacity:1}
a.plate:hover .pn{color:var(--accent)}

/* ── 11. 리드 기사 ────────────────────────────────── */
.lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-bottom:1px solid var(--rule)}
.lead .plate{aspect-ratio:auto;min-height:360px;padding:var(--s6)}
.lead .plate .pn{font-size:clamp(68px,9vw,132px)}
.lead .plate .pc{max-width:34ch;font-size:var(--t4)}
.lead .body{padding:var(--s6) 0 var(--s7) var(--s7);display:flex;
  flex-direction:column;justify-content:center}
.lead h1{font-family:var(--serif);font-weight:700;letter-spacing:-.03em;
  font-size:var(--t8);line-height:1.22;margin:var(--s3) 0 0}
.lead .dek{margin-top:var(--s4);font-size:var(--t4);max-width:44ch}
.lead .foot{margin-top:var(--s5);display:flex;align-items:center;gap:var(--s4);
  flex-wrap:wrap}
.lead .go{font-family:var(--mono);font-size:var(--t2);letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
.lead .go:hover{color:var(--accent)}

/* ── 12. 카드 ─────────────────────────────────────── */
.cards{display:grid;gap:var(--s7) var(--s6);
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.cards.c2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cards .plate{aspect-ratio:5/6}
.card{display:flex;flex-direction:column;min-width:0}
.card .plate{margin-bottom:var(--s4)}
.card h3{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.38;
  letter-spacing:-.02em;margin-top:7px}
.card .dek{margin-top:var(--s2)}
.card .meta{margin-top:var(--s3)}
.card:hover h3{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.card.flat .plate{display:none}
.card.flat{border-top:1px solid var(--rule);padding-top:var(--s3)}

/* ── 13. 칩 ───────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s3)}
.chip{font-family:var(--mono);font-size:var(--t1);letter-spacing:.04em;
  border:1px solid var(--rule);padding:3px 8px;color:var(--mute);white-space:nowrap}
.chip.on{border-color:var(--hit);color:var(--hit)}
.chip.red{border-color:var(--accent);color:var(--accent)}
.chip.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plate .chips .chip{border-color:currentColor;color:currentColor;opacity:.62}

/* ── 14. 코너 블록 ────────────────────────────────── */
.corner{border-top:2px solid var(--ink);padding-top:var(--s5);margin-top:var(--s7)}
.corner-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.corner-h h2{font-family:var(--serif);font-size:var(--t6);font-weight:700;
  letter-spacing:-.02em}
.corner-h .en{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}
.corner-h .more{margin-left:auto;font-family:var(--mono);font-size:var(--t2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.corner-h .more:hover{color:var(--accent)}
.corner .stance{color:var(--mute);font-size:var(--t3);margin:10px 0 var(--s5);
  max-width:64ch}
.corner .stance b{color:var(--ink);font-weight:700}

/* ── 15. 예고 목록 — 없는 것은 없다고 쓴다 ────────── */
.queue{border-top:1px solid var(--rule)}
.queue li{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;
  border-bottom:1px solid var(--soft)}
.queue .st{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);width:82px;flex:none;padding-top:3px}
.queue .tt{flex:1;min-width:0;font-size:var(--t3);color:var(--mute)}
.queue .tt b{color:var(--ink);font-weight:700}
.queue li.live .tt{color:var(--ink);font-size:var(--t4)}
.queue li.live .st{color:var(--accent)}

/* ── 16. 추천 카드 ────────────────────────────────── */
.picks{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pick{border:1px solid var(--rule);padding:var(--s5);display:flex;flex-direction:column}
.pick h3{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.02em}
.pick .n{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:var(--s4)}
.pick .n small{font-family:var(--sans);font-size:var(--t2);font-weight:400;
  color:var(--mute);margin-left:5px}
.pick p{color:var(--mute);font-size:var(--t3);margin-top:10px;flex:1}
.pick .links{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:5px}
.pick .links a{font-family:var(--mono);font-size:var(--t1);letter-spacing:.04em;
  border:1px solid var(--rule);padding:5px 9px;color:var(--mute)}
.pick .links a[href]:hover{border-color:var(--ink);color:var(--ink)}
.pick .links a:not([href]){color:var(--faint);border-style:dashed}
.pick.off{background:var(--wash)}
.pick.off h3,.pick.off .n{color:var(--faint)}

/* ── 17. 반전 블록 — 한 페이지에 하나 ─────────────── */
.inv{background:var(--ink);color:var(--paper);padding:var(--s6)}
.inv .kicker{color:var(--paper);opacity:.6}
.inv p{font-family:var(--serif);font-size:19px;line-height:1.6;font-weight:400;
  margin-top:var(--s3);max-width:52ch}
.inv p b{font-weight:700}

/* ── 18. 표지 · 데이터 스트립 ─────────────────────── */
.cover{border-bottom:2px solid var(--ink);padding:var(--s7) 0 var(--s5)}
.cover h1{font-family:var(--serif);font-weight:900;letter-spacing:-.035em;
  font-size:var(--t9);line-height:1.05}
.cover .en{font-family:var(--mono);font-size:var(--t1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);display:block;margin-bottom:var(--s4)}
.cover .lede{font-family:var(--serif);font-size:var(--t5);line-height:1.62;
  color:var(--mute);max-width:52ch;margin-top:var(--s5)}
.cover .lede b{color:var(--ink);font-weight:700}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  border-top:1px solid var(--rule);margin-top:var(--s5)}
.strip>div{padding:var(--s3) 0 var(--s1) var(--s4);border-left:1px solid var(--rule)}
.strip>div:first-child{border-left:0;padding-left:0}
.sk{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);display:block}
.sv{font-family:var(--disp);font-size:21px;font-weight:700;margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block}
.sv small{font-family:var(--sans);font-size:var(--t2);font-weight:400;color:var(--mute)}

/* ── 19. 축 (분류) · 단계 목록 ────────────────────── */
.axis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--rule)}
.axis>div{padding:var(--s4) var(--s5) var(--s5) 0;border-right:1px solid var(--rule)}
.axis>div:last-child{border-right:0}
.axis .num{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase}
.axis h3{font-family:var(--serif);font-size:16.5px;font-weight:700;margin:6px 0 7px;
  letter-spacing:-.01em}
.axis p{color:var(--mute);font-size:var(--t3)}
.axis .cnt{font-family:var(--mono);font-size:var(--t1);color:var(--faint);
  margin-top:10px;display:block}
.axis .cnt.on{color:var(--accent)}

.steps{border-top:1px solid var(--rule)}
.steps li{display:flex;gap:var(--s4);padding:var(--s3) 0;
  border-bottom:1px solid var(--soft);align-items:baseline}
.steps .k{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  color:var(--faint);width:92px;flex:none;padding-top:3px;text-transform:uppercase}
.steps .v{flex:1;min-width:0;font-size:var(--t3);color:var(--mute)}
.steps .v b{color:var(--ink);font-weight:700}

/* ── 20. 자료 선반 (추천 페이지) ──────────────────── */
.shelf{border-top:2px solid var(--ink);padding-top:var(--s5);margin-top:var(--s7)}
.shelf-h{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.shelf-h h2{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:-.025em}
.shelf-h .en{font-family:var(--mono);font-size:var(--t1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.shelf-h .tag{margin-left:auto;font-family:var(--mono);font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rule);
  padding:4px 9px;color:var(--mute)}
.shelf-h .tag.on{border-color:var(--hit);color:var(--hit)}
.shelf .why{font-family:var(--serif);font-size:var(--t5);line-height:1.62;
  color:var(--mute);max-width:56ch;margin:var(--s4) 0 var(--s5)}
.shelf .why b{color:var(--ink);font-weight:700}
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  border-top:1px solid var(--rule)}
.doc{display:block;padding:var(--s4) var(--s5) var(--s4) 0;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--soft)}
.doc:last-child{border-right:0}
.doc .dn{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
  color:var(--faint);text-transform:uppercase}
.doc h3{font-size:15.5px;font-weight:700;margin:5px 0;letter-spacing:-.01em}
.doc p{color:var(--mute);font-size:var(--t3);line-height:1.62}
.doc[href]:hover h3{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;color:var(--accent)}
.doc.none h3,.doc.none p{color:var(--faint)}

/* ── 21. 다음 읽을 것 — 기사 끝의 동선 ─────────────
   글이 끝난 자리에서 독자가 할 일은 둘뿐이다. 다음 한 편, 또는 구독. */
.nextup{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:var(--s6);border-top:2px solid var(--ink);padding-top:var(--s5);
  margin-top:var(--s8);align-items:center}
.nextup .plate{aspect-ratio:4/5}
.nextup h3{font-family:var(--serif);font-size:23px;font-weight:700;
  letter-spacing:-.025em;line-height:1.35;margin-top:10px}
.nextup .dek{margin-top:10px;font-size:var(--t4)}
.nextup .go{display:inline-block;margin-top:var(--s4);font-family:var(--mono);
  font-size:var(--t2);letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:2px}
.nextup:hover .go{color:var(--accent)}

/* ── 22. 뉴스레터 ─────────────────────────────────── */
.sub{border:2px solid var(--ink);padding:var(--s6);margin-top:var(--s8);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--s6);
  align-items:center}
.sub h2{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:-.025em;
  line-height:1.3;margin-top:10px}
.sub p{color:var(--mute);font-size:var(--t3);margin-top:var(--s3);max-width:46ch}
.sub .form{display:flex;flex-direction:column;gap:9px}
.sub input{font-family:var(--sans);font-size:var(--t4);padding:13px;
  border:1px solid var(--rule);background:var(--paper);color:var(--ink);width:100%}
.sub input::placeholder{color:var(--faint)}
.sub input:focus{border-color:var(--ink)}
.sub button{font-family:var(--mono);font-size:var(--t2);letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;
  padding:14px;cursor:pointer;width:100%}
.sub button:hover{background:var(--accent)}
.sub .fine{font-family:var(--mono);font-size:var(--t1);letter-spacing:.02em;
  color:var(--faint);line-height:1.6}

/* ── 23. 규칙 ─────────────────────────────────────── */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:1px solid var(--rule)}
.rules>div{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--rule)}
.rules>div:last-child{border-right:0}
.rules h3{font-size:var(--t4);font-weight:700;margin-bottom:7px}
.rules p{color:var(--mute);font-size:var(--t3)}

/* ── 24. 푸터 ─────────────────────────────────────── */
footer{margin-top:var(--s9);border-top:2px solid var(--ink);background:var(--wash)}
footer .shell{padding-top:var(--s6);padding-bottom:var(--s7);display:grid;
  gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer h4{font-family:var(--mono);font-size:var(--t1);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:var(--s3)}
footer li{font-size:var(--t3);padding:3px 0;color:var(--mute)}
footer li a:hover{color:var(--accent)}
footer .colophon{font-size:var(--t2);color:var(--faint);line-height:1.8;
  grid-column:1/-1;border-top:1px solid var(--rule);padding-top:var(--s5)}
footer .colophon b{color:var(--mute);font-weight:400}

/* ══ 25. 반응형 ════════════════════════════════════
   릴스에서 오는 독자는 대부분 휴대폰이다. 여기가 본 화면이다. */
@media (max-width:860px){
  .lead{grid-template-columns:1fr}
  .lead .plate{min-height:220px}
  .lead .body{padding:var(--s5) 0 var(--s6)}
  .nextup{grid-template-columns:1fr;gap:var(--s4)}
  .nextup .plate{aspect-ratio:16/9}
}
@media (max-width:760px){
  .sub{grid-template-columns:1fr;padding:var(--s5) var(--s4)}
}
@media (max-width:660px){
  .axis>div,.rules>div,.doc{border-right:0}
  .axis>div,.rules>div{border-bottom:1px solid var(--soft)}
}
@media (max-width:640px){
  :root{--t4:16.5px;--t3:14.5px;--s5:20px;--s6:26px;--s7:38px;--s8:50px;--s9:66px}
  .shell{padding:0 var(--s4)}
  /* 발행 정보가 워드마크를 눌러 좁히므로 모바일에선 내린다 */
  .head .shell{grid-template-columns:1fr auto;gap:var(--s3);
    padding-top:var(--s4);padding-bottom:var(--s4)}
  .head .slot:first-child{display:none}
  .wordmark{text-align:left;font-size:clamp(26px,8.6vw,40px)}
  .wordmark .ko{letter-spacing:.3em;text-indent:.3em;margin-top:6px}
  .btn-sub{padding:9px 12px;font-size:var(--t1)}
  /* 다섯 칸이 한 화면에 들어오도록 영문 보조 라벨을 내린다 */
  .nav .shell{justify-content:space-between;flex-wrap:nowrap;padding:0 var(--s3)}
  .nav a{padding:12px 4px;font-size:12.5px;letter-spacing:-.03em}
  .nav a .en{display:none}
  .queue li{flex-direction:column;gap:3px}
  .queue .st{width:auto;padding-top:0}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip>div{border-left:0;border-top:1px solid var(--soft);padding-left:0;
    padding-right:var(--s4)}
  .strip>div:nth-child(-n+2){border-top:0}
}

/* ── 26. 인물 이름 — 한글과 영문을 같이 쓴다 ────────
   실존 인물이므로 독자가 검색할 수 있어야 하고, 표기도 하나로 굳어야 한다. */
.name-line{font-size:var(--t3);font-weight:700;margin-top:6px;letter-spacing:-.01em;
  color:var(--ink)}
.en-name{font-family:var(--disp);font-weight:600;font-size:.86em;letter-spacing:.01em;
  color:var(--faint);margin-left:.35em;white-space:nowrap;
  font-variation-settings:"wdth" 100}
h1 .en-name{font-size:.46em;vertical-align:.16em}
h2 .en-name,h3 .en-name{font-size:.68em;vertical-align:.07em}
.queue .tt .en-name,.rel .en-name{font-size:.82em}
/* 어두운 판 위에서는 본문색을 그대로 쓰면 읽히지 않는다 */
.inv .en-name,.plate .en-name{color:var(--paper);opacity:.7}