/* ══════════════════════════════════════════════════════════════
   멘즈와이 — 기사 페이지
   ────────────────────────────────────────────────────────────
   릴스에서 온 독자가 실제로 도착하는 화면이다. 여기가 본 화면이고,
   이 페이지가 해야 할 일은 단 하나 — 끝까지 읽게 하는 것.
   _mw.css 뒤에 불러온다. 토큰은 _mw.css의 것을 그대로 쓴다.
   ══════════════════════════════════════════════════════════════ */

/* ── 읽기 진행률 — 긴 글의 끝이 보이지 않으면 이탈한다 ── */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);
  z-index:60;transition:width .1s linear}

/* ── 슬림 헤더 — 기사에서는 제목이 먼저 보여야 한다 ──
   1면의 큰 워드마크를 쓰면 휴대폰에서 기사 제목이 화면 밖으로 밀린다. */
.abar{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:2px solid var(--ink)}
.abar .in{max-width:var(--w-shell);margin:0 auto;padding:0 var(--s5);
  display:flex;align-items:center;gap:var(--s4);min-height:46px}
.abar .home{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.01em;
  font-variation-settings:"wdth" 108;white-space:nowrap;padding:12px 0}
.abar nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.abar nav::-webkit-scrollbar{display:none}
.abar nav a{font-size:var(--t3);font-weight:700;padding:12px 10px;white-space:nowrap;
  letter-spacing:-.02em;color:var(--mute);border-bottom:2px solid transparent;
  margin-bottom:-2px}
.abar nav a:hover{color:var(--ink)}
.abar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.abar .sub-btn{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);padding:8px 12px;
  white-space:nowrap;margin-left:auto}
.abar .sub-btn:hover{background:var(--accent)}
@media (max-width:760px){
  .abar .in{padding:0 var(--s4);gap:var(--s3)}
  .abar .home{font-size:13.5px}
  .abar nav a{padding:12px 7px;font-size:12.5px}
  .abar .sub-btn{display:none}
}

/* ── 레이아웃 ───────────────────────────────────────
   본문은 한 줄 40자 안팎. 그보다 넓으면 눈이 줄을 놓친다. */
.wrap{max-width:var(--w-read);margin:0 auto;padding:0 var(--s5) var(--s9)}
.wrap>section,.wrap>.mast{max-width:100%}

/* ── 기사 마스트헤드 ────────────────────────────── */
.mast{padding:var(--s7) 0 0}
.subt{display:flex;flex-wrap:wrap;gap:6px var(--s4);align-items:baseline;
  margin-bottom:var(--s3)}
.subt h1{font-family:var(--serif);font-size:var(--t8);font-weight:700;
  letter-spacing:-.03em;line-height:1.2;width:100%}
.subt .by{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.lede{font-family:var(--serif);color:var(--mute);font-size:var(--t5);line-height:1.66;
  margin-top:var(--s4)}
.lede b,.lede strong{color:var(--ink);font-weight:700}
.mast .strip{margin-top:var(--s5);border-bottom:1px solid var(--rule)}

/* ── 섹션 머리 ─────────────────────────────────── */
section{margin-top:var(--s8)}
.sh{display:flex;align-items:baseline;gap:var(--s3);border-bottom:2px solid var(--ink);
  padding-bottom:9px;margin-bottom:var(--s4);flex-wrap:wrap}
.sh h2{font-family:var(--serif);font-size:var(--t6);font-weight:700;letter-spacing:-.02em}
.sh .n{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;color:var(--faint)}
.sh .r{margin-left:auto;font-family:var(--mono);font-size:var(--t1);letter-spacing:.08em;
  color:var(--faint);text-transform:uppercase}
.sub-note{color:var(--mute);font-size:var(--t3);margin-bottom:var(--s4)}
.sub-note b,.sub-note strong{color:var(--ink);font-weight:700}
p+p{margin-top:var(--s3)}
.mute{color:var(--mute)}
b,strong{font-weight:700}

/* ── 연표 표 ────────────────────────────────────── */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:var(--t3)}
th,td{text-align:left;padding:9px var(--s4) 9px 0;border-bottom:1px solid var(--rule);
  vertical-align:top}
th{font-family:var(--mono);font-size:var(--t1);font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--ink);
  white-space:nowrap}
/* 시점 칸이 좁으면 사실 칸과 붙어 보인다. 줄바꿈을 막고 간격을 준다 */
.scroll td:first-child{white-space:nowrap;font-family:var(--mono);font-size:var(--t2);
  color:var(--mute);padding-right:var(--s5);font-variant-numeric:tabular-nums}
td.n{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums;
  text-align:right;padding-right:0;color:var(--faint);font-size:var(--t1)}
code{font-family:var(--mono);font-size:var(--t2);background:var(--wash);padding:2px 6px}

/* ── 결정 — 이 기사의 본체. 결정 하나가 릴스 한 편 ── */
.decision{border-top:2px solid var(--ink);padding-top:var(--s4);margin-top:var(--s7);
  scroll-margin-top:60px}
.decision:first-of-type{margin-top:0}
.dnum{font-family:var(--mono);font-size:var(--t1);letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase}
.dtitle{font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:-.025em;
  margin-top:6px;line-height:1.35}
.step{display:flex;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--soft);
  align-items:baseline}
.step>.k{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);width:104px;flex:none;padding-top:4px}
.step>.v{flex:1;min-width:0}
.step>.v b{font-weight:700}
/* 4단의 마지막 「그래서 당신은」이 이 매체의 생사를 가른다. 눈에 띄게 둔다 */
.step:last-of-type>.k{color:var(--accent)}

/* ── 스펙 행 ────────────────────────────────────── */
.spec{border-top:1px solid var(--rule)}
.srow{display:flex;gap:var(--s4);padding:10px 0;border-bottom:1px solid var(--soft);
  font-size:var(--t3);align-items:baseline}
.srow>.k{font-family:var(--mono);font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);width:76px;flex:none;padding-top:3px}
.srow>.v{flex:1;min-width:0;color:var(--mute)}
.srow>.v b{color:var(--ink)}

/* ── 인용 ───────────────────────────────────────── */
.q{border-left:2px solid var(--accent);padding:2px 0 2px var(--s4);margin:var(--s4) 0}
.q p{font-family:var(--serif);font-size:var(--t5);line-height:1.62}
.who{display:block;font-family:var(--mono);font-size:var(--t1);letter-spacing:.08em;
  color:var(--faint);margin-top:6px}

/* ── 6축 — 「당신과 닮은 남자」 진단의 엔진 ─────── */
.sixaxis{display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.sixaxis>div{background:var(--paper);padding:var(--s3) var(--s4) var(--s4)}
.sixaxis .lab{display:block;margin-bottom:4px}
.axv{font-size:var(--t4);font-weight:700;line-height:1.4}
.axv small{display:block;font-size:var(--t2);font-weight:400;color:var(--mute);
  margin-top:2px;line-height:1.5}

/* 반전 블록 안의 라벨은 어두운 판 위에 온다. 본문색을 그대로 쓰면 읽히지 않는다 */
.inv .lab{color:var(--paper);opacity:.65}

/* ── 함께 보는 남자 · 출처 ──────────────────────── */
.rel{border-top:1px solid var(--rule)}
.rel a,.rel div{display:flex;gap:var(--s4);padding:11px 0;
  border-bottom:1px solid var(--soft);align-items:baseline}
.src{border-top:1px solid var(--rule);counter-reset:s}
.src li{display:flex;gap:var(--s3);padding:7px 0;border-bottom:1px solid var(--soft);
  font-size:var(--t3);color:var(--mute);align-items:baseline}
.src li::before{counter-increment:s;content:counter(s);font-family:var(--mono);
  font-size:var(--t1);color:var(--faint);width:20px;flex:none;
  font-variant-numeric:tabular-nums}

/* ── 주석 블록 ──────────────────────────────────── */
.note{border-left:1px solid var(--rule);padding:2px 0 2px var(--s4);margin:var(--s4) 0;
  color:var(--mute);font-size:var(--t3)}
.note b{color:var(--ink)}
.selv{border-left:2px solid var(--accent);padding:2px 0 2px var(--s4);margin:var(--s4) 0}
.selv p{font-size:var(--t3);color:var(--mute)}
.selv b{color:var(--ink)}

/* ── 기사 끝 동선 ───────────────────────────────── */
.wrap .nextup,.wrap .sub{margin-top:var(--s8)}
.wrap footer{margin-top:var(--s8);border-top:2px solid var(--ink);background:none;
  padding-top:var(--s4);font-size:var(--t2);color:var(--faint);line-height:1.8}
.wrap footer b{color:var(--mute);font-weight:400}

/* ══ 모바일 ════════════════════════════════════════ */
@media (max-width:640px){
  .sixaxis{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:0 var(--s4) var(--s8)}
  .mast{padding-top:var(--s6)}
  .step{flex-direction:column;gap:2px;padding:var(--s3) 0}
  .step>.k{width:auto;padding-top:0}
  .srow{flex-direction:column;gap:1px}
  .srow>.k{width:auto;padding-top:0}
  /* 연표 3열 표는 휴대폰에서 가로로 밀린다. 행 단위로 세운다 */
  .scroll{overflow-x:visible}
  .scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .scroll tr{display:block;padding:var(--s3) 0;border-bottom:1px solid var(--rule)}
  .scroll td{display:block;border:0;padding:0}
  .scroll td:first-child{font-family:var(--mono);font-size:var(--t1);
    letter-spacing:.1em;color:var(--faint);margin-bottom:3px;
    white-space:normal;padding-right:0}
  .scroll td.n{text-align:left;margin-top:4px}
  .dtitle{font-size:21px}
}