/* 뉴스 상세 화면이 함께 쓰는 규격입니다. pages.json 의 "css": "news-detail" 로 걸려 있습니다.
   아티클 화면의 서식을 그대로 가져오고, 원문으로 나가는 자리만 더했습니다.
   이 파일도 이 화면들에만 실리므로 #p- 접두사를 붙이지 않습니다. */

.ahead{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) 64px var(--s-xxxl)}
@media(max-width:900px){.ahead{padding:64px 24px 32px}}
.ahead .in{max-width:1152px;margin:0 auto}
.crumb{display:flex;gap:var(--s-xs);align-items:center;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:var(--s-xl)}
.crumb a{color:rgba(255,255,255,.5)}
.crumb a:hover{color:var(--on-dark)}
.amt{display:flex;gap:var(--s-sm);align-items:center;margin-bottom:var(--s-lg)}
.amt .dt{font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.amt .cat{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--on-dark);
  border:1px solid rgba(255,255,255,.4);padding:3px 8px;line-height:1}
.ahead h1{color:var(--on-dark);max-width:20ch}
.ahead .lede{font-size:19px;line-height:1.7;color:var(--on-dark-mute);max-width:62ch;margin-top:var(--s-xl)}
.abody{background:var(--canvas);padding:var(--s-xxxl) 64px var(--s-section)}
@media(max-width:900px){.abody{padding:40px 24px 64px}}
.abody .in{max-width:1152px;margin:0 auto;display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-xxxl)}
@media(max-width:1023px){.abody .in{grid-template-columns:1fr;gap:var(--s-xl)}}
.prose{max-width:68ch}
.prose h2{font-size:28px;line-height:1.15;margin:var(--s-xxxl) 0 var(--s-md)}
.prose h2:first-child{margin-top:0}
@media(max-width:767px){.prose h2{font-size:23px}}
.prose p{font-size:18px;line-height:1.8;color:var(--charcoal);margin-bottom:var(--s-md)}
.prose p b{color:var(--ink);font-weight:700}
.prose a.inl{color:var(--ink);font-weight:700;border-bottom:1px solid var(--stone)}
.prose a.inl:hover{border-bottom-color:var(--ink)}
.cite{margin-top:var(--s-xxxl);border-top:1px solid var(--hairline);padding-top:var(--s-md);
  font-size:12px;line-height:1.75;color:var(--ash)}
.crumb .cur{color:var(--on-dark)}
.crumb span[aria-hidden]{color:rgba(255,255,255,.25)}
.prose .cite{margin-top:var(--s-xxxl);border-top:1px solid var(--hairline);padding-top:var(--s-md);font-size:12px;line-height:1.75;color:var(--ash)}

/* ── 원문으로 ────────────────────────────────────────────
   본문이 끝나는 자리에 신문사 이름과 원문으로 가는 길을 둡니다. */
.origin{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxxl);padding-top:var(--s-md);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-sm) var(--s-md)}
.origin .paper{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:1px;transition:opacity .15s}
.origin .paper:hover{opacity:.6}
.origin .lb{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash);align-self:center}
.origin .meta{font-size:14px;line-height:1.6;color:var(--mute)}
.origin .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;
  color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;transition:opacity .15s}
.origin .go:hover{opacity:.6}
/* 바깥으로 나가는 길에는 ↗, 사이트 안으로 가는 길에는 → 를 씁니다. */
.origin .go::after{content:"\2192"}
.origin .go[target]::after{content:"\2197"}
@media(max-width:600px){.origin .go{margin-left:0}}

/* ── 다른 소식으로 ── */
.more-news{border-top:1px solid var(--hairline-strong);margin-top:var(--s-xxxl);padding-top:var(--s-md)}
.more-news .lb{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--ash)}
.more-news a{display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--s-md);align-items:baseline;
  padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}
.more-news a:last-child{border-bottom:0}
.more-news .h{font-size:17px;font-weight:700;line-height:1.4;color:var(--ink)}
.more-news .m{display:block;font-size:13px;font-weight:400;color:var(--mute);margin-top:3px}
.more-news a:hover .h{text-decoration:underline;text-underline-offset:4px}
.more-news .ar{color:var(--mute);justify-self:end}

/* 목차 없이 본문 한 칸만 씁니다. */
.abody .in{grid-template-columns:minmax(0,1fr)}