/* 키 색상은 동아일보 색 체계를 따른다: 본문 #111, 보조 #5a5a5a, 선 #e5e5e5.
   글자에는 청록을 쓰지 않고 중요도로만 나눈다: 제목·본문 --fg, 설명·인용 --sub, 메타·날짜·안내 --muted */
:root{
  --bg:#fff;--fg:#111;--sub:#5a5a5a;--muted:#767676;--line:#e5e5e5;--rule:#111;
  --accent:#008689;--ph:#f2f9f9;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121212;--fg:#ececec;--sub:#c9c9c9;--muted:#9b9b9b;--line:#2c2c2c;--rule:#e6e6e6;
    --accent:#2bb5b8;--ph:#1a2424;
  }
}
:root[data-theme="dark"]{
  --bg:#121212;--fg:#ececec;--sub:#c9c9c9;--muted:#9b9b9b;--line:#2c2c2c;--rule:#e6e6e6;
  --accent:#2bb5b8;--ph:#1a2424;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
/* 마우스를 올리면 색은 그대로 두고 흐리게(70%) 한다. 사진 링크는 흐리게 하지 않고 사진만 살짝 키운다. */
a{color:inherit;text-decoration:none;transition:opacity .2s}
a:hover{opacity:.7}
a.thumb:hover{opacity:1}
/* 기사 칸(.linkbox) 어디를 눌러도 기사로 간다: 제목 링크의 ::after가 칸 전체를 덮는다.
   칸 안의 다른 링크(메타의 댓글 수)만 그 위로 올린다. 칸에 마우스를 올리면 제목이 흐려지고 사진이 커진다. */
.linkbox{position:relative}
.linkbox :is(h1,h3) a::after,.archive .date::after{content:"";position:absolute;inset:0;z-index:1}
.linkbox .meta a{position:relative;z-index:2}
h1,h2,h3,h4,p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
code{font-size:.92em;padding:1px 5px;background:var(--ph);border-radius:3px}
.wrap{max-width:1312px;margin:0 auto;padding:0 16px}

/* 상단 유틸 바 */
.util{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px 0 0;font-size:13px;color:var(--muted)}
.util nav{display:flex;flex-wrap:wrap}
.util nav a+a::before{content:"";display:inline-block;width:1px;height:10px;background:var(--line);margin:0 10px;vertical-align:middle}

/* 마스트헤드 */
.masthead{display:flex;align-items:center;gap:40px;padding:18px 0 26px;border-bottom:3px solid var(--rule)}
.logo{display:block;flex:none;font-weight:800;font-size:40px;letter-spacing:-.045em;line-height:1}
.gnb{display:flex;gap:30px;flex:1;justify-content:center;font-size:16.5px;font-weight:700;white-space:nowrap}
.tools{display:flex;gap:20px;flex:none}
.tools svg{width:23px;height:23px;display:block}
/* 기사 페이지의 작은 상단: 동아일보 기사 페이지(높이 61px, 로고 24px, 아래 선 1px)와 뉴욕타임스 기사 페이지처럼
   유틸 바를 빼고 한 줄 약 58px로 줄인다. 지난 호·HN은 메뉴와 아이콘에, GitHub는 바닥글에 남아 있다.
   메뉴가 둘째 줄로 내려가는 1000px 아래에서는 메뉴를 빼고 로고와 아이콘만 둔다. */
header.compact .util{display:none}
header.compact .masthead{gap:32px;padding:16px 0 15px;border-bottom-width:1px}
header.compact .logo{font-size:26px}
header.compact .gnb{gap:24px;font-size:15px}
header.compact .tools svg{width:20px;height:20px}

.notice{margin-top:18px;padding:12px 16px;border:1px solid var(--line);background:var(--ph);font-size:14px;color:var(--sub)}
.empty{padding:96px 0;text-align:center;color:var(--muted);line-height:1.9}

/* 1면 톱 */
.top{display:grid;grid-template-columns:minmax(0,1fr) 328px;padding-bottom:28px}
.lead{padding-right:30px;border-right:1px solid var(--line)}
.side{padding-left:30px;padding-top:24px}
.hero h1{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.35;margin:24px 0 18px}
.hero-body{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:24px}
.thumb.hero-graphic{aspect-ratio:16/9}
.lede{font-size:15px;line-height:1.7;color:var(--sub)}
.lede-text{display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;overflow:hidden}
.lede p+p{margin-top:10px}
.lede-text p:first-child{font-weight:700;color:var(--fg)}
.lede .meta{margin-top:14px}
.subs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.sub{display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px}
.sub h3{font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.025em}
.sub p.desc{margin-top:6px;font-size:14px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card+.card{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.card .thumb{margin-bottom:12px}
.card h3{font-size:17px;font-weight:700;line-height:1.42;letter-spacing:-.03em;margin-top:4px}

/* 썸네일 */
/* 바탕(background-image)에는 그라데이션 패널 이미지가 깔리고(GradientLibrary),
   og 이미지가 있으면 그 위를 덮는다. og 이미지를 불러오지 못하면 패널이 드러난다.
   isolation은 og 이미지(z-index:1)가 .linkbox 제목 링크의 덮개 위로 올라오지 않게 한다. */
.thumb{position:relative;isolation:isolate;display:block;aspect-ratio:16/9;background:var(--ph) center/cover no-repeat;overflow:hidden}
.thumb img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.linkbox:hover .thumb img{transform:scale(1.03)}

.meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:1px;font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.meta a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.meta .site{font-weight:600}
.meta .stats{display:flex;flex-wrap:wrap;column-gap:10px;row-gap:1px}

/* 섹션 공통 */
.band{border-top:3px solid var(--rule);padding:26px 0 30px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.sec-head h2{font-size:23px;font-weight:800;letter-spacing:-.03em}
.sec-head .meta{margin:0}
.sec-head a.more{font-size:13px;color:var(--muted)}
.sec-head a.more::after{content:" ›"}

/* 사진기사 | 헤드라인 목록 | 오피니언 */
.band-3{display:grid;grid-template-columns:300px minmax(0,1fr) 328px}
.band-3>*{min-width:0}
.band-3 .col-a{padding-right:30px;border-right:1px solid var(--line)}
.band-3 .col-b{padding:0 30px;border-right:1px solid var(--line)}
.band-3 .col-c{padding-left:30px}
.photo-lead .thumb{margin-bottom:12px}
.photo-lead h3{font-size:17px;font-weight:700;line-height:1.45;letter-spacing:-.025em}
.photo-lead p.desc{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.headlines li{padding:11px 0;border-bottom:1px solid var(--line)}
.headlines li:first-child{padding-top:0}
.headlines h3{font-size:17px;font-weight:500;letter-spacing:-.03em;line-height:1.45}
.headlines .meta{margin-top:3px}
.briefs li{padding:11px 0;border-bottom:1px solid var(--line)}
.briefs li:first-child{padding-top:0}
.briefs h3{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.025em}

/* 테크·라이프 */
.split{display:grid;grid-template-columns:minmax(0,1fr) 328px}
.split>.main{padding-right:30px;border-right:1px solid var(--line);min-width:0}
.split>.aside{padding-left:30px;min-width:0}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid4 h3{font-size:15.5px;font-weight:700;line-height:1.45;letter-spacing:-.025em;margin-top:10px}
/* 사진 칸은 폭이 좁아 메타가 칸마다 한 줄·두 줄로 섞이므로, 출처를 늘 따로 한 줄에 두어 모양을 맞춘다 */
.grid4 .meta .site{flex-basis:100%}
.grid-next{margin-top:24px}
.textlist{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;margin-top:20px;border-top:1px solid var(--line)}
.band>.textlist{margin-top:0}
.textlist li{padding:11px 0;border-bottom:1px solid var(--line)}
.textlist h3{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.02em}
.textlist p.desc{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 많이 본 / 댓글 많은 */
.ranking li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.ranking li:first-child{padding-top:0}
.ranking .n{font-weight:800;font-size:17px;line-height:1.3;color:var(--muted)}
.ranking h3{font-size:15px;font-weight:500;line-height:1.45;letter-spacing:-.02em}
.ranking .meta{margin-top:3px;font-size:12px}
.aside .box+.box{margin-top:28px}
.jobs{border:1px solid var(--line);padding:18px}
.jobs+.jobs{margin-top:12px}
.jobs h3{font-size:16px;font-weight:700;line-height:1.45}
.jobs p.desc{font-size:13.5px;line-height:1.6;color:var(--muted);margin-top:6px}

/* 전체 순위 */
.fulllist{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
.fulllist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
.fulllist .n{font-weight:800;font-size:21px;line-height:1.2;color:var(--muted)}
.fulllist li:nth-child(-n+3) .n{color:var(--fg)}
.fulllist h3{font-size:16px;font-weight:600;line-height:1.45;letter-spacing:-.02em}
.fulllist .en{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.fulllist .meta{margin-top:4px;font-size:12px}

/* 지난 호 */
.archive{border-top:0}
.archive ol{border-top:1px solid var(--line)}
.archive li{display:flex;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.archive .date{flex:none;font-weight:800;font-size:18px}
.archive .headline{flex:1;min-width:0;font-size:15.5px;color:var(--sub)}
.archive .badge{flex:none;font-size:12px;color:var(--muted);border:1px solid var(--line);padding:2px 8px}

footer{border-top:3px solid var(--rule);padding:26px 0 48px;font-size:13px;line-height:1.7;color:var(--muted)}
footer .logo{width:fit-content;font-size:24px;margin-bottom:10px;color:var(--fg)}
.edition-date{margin-bottom:8px;font-size:13px;color:var(--sub)}
.repo-link{margin-top:6px}
.repo-link a{color:var(--fg);font-weight:600}
.edition-nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--fg)}
.edition-nav .to-top{margin-left:auto}

/* 반응형 */
@media (max-width:1180px){
  .gnb{gap:20px;font-size:15.5px}
  .band-3{grid-template-columns:260px minmax(0,1fr)}
  .band-3 .col-b{border-right:0;padding-right:0}
  .band-3 .col-c{grid-column:1/-1;padding:28px 0 0;margin-top:28px;border-top:1px solid var(--line)}
  .briefs{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .briefs li:nth-child(2){padding-top:0}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 오른쪽 칸(328px)이 남아 있는 좁은 데스크톱에서는 2–3위 글 칸이 110–200px까지 줄어 제목·메타가 여러 줄로 꺾인다.
   이 구간에서만 사진을 위로 올려 쌓는다. 1000px 아래에서는 다시 한 줄을 다 쓰므로 옆으로 둔다. */
@media (min-width:1001px) and (max-width:1180px){
  .sub{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media (max-width:1000px){
  .masthead{flex-wrap:wrap;gap:16px 24px}
  .gnb{order:3;flex-basis:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .tools{margin-left:auto}
  header.compact .gnb{display:none}
  .top,.split{grid-template-columns:minmax(0,1fr)}
  .lead,.split>.main{padding-right:0;border-right:0}
  .side{padding:28px 0 0;margin-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:24px}
  /* 아래로 내려온 4–5위는 2–3위(.sub)처럼 작은 사진 + 제목으로 둔다. 큰 사진 그대로면 더 높은 순위인 2–3위보다 커 보인다 */
  .card{display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px}
  .card+.card{margin-top:0;padding-top:0;border-top:0}
  .card .thumb{grid-row:span 2;margin-bottom:0}
  .card h3{margin-top:0}
  .split>.aside{padding:28px 0 0;margin-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:28px}
  .aside .box+.box{margin-top:0}
}
@media (max-width:720px){
  .logo{font-size:30px}
  header.compact .logo{font-size:22px}
  header.compact .masthead{padding:14px 0 13px}
  .gnb a[href="/editions"]{display:none}
  .hero h1{font-size:27px;margin:22px 0 16px}
  .hero-body,.subs,.textlist,.fulllist,.briefs{grid-template-columns:minmax(0,1fr)}
  .sub{grid-template-columns:128px minmax(0,1fr);gap:14px}
  .card{grid-template-columns:128px minmax(0,1fr);column-gap:14px}
  .sub h3,.card h3{font-size:16.5px}
  .sub p.desc{-webkit-line-clamp:2}
  .band-3{grid-template-columns:minmax(0,1fr)}
  .band-3 .col-a{padding-right:0;border-right:0;padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
  .band-3 .col-a:empty{display:none}
  .band-3 .col-b{padding:0}
  .briefs li:nth-child(2){padding-top:16px}
  .side,.split>.aside{grid-template-columns:minmax(0,1fr)}
  .aside .box+.box{margin-top:34px}
  .grid4{gap:20px 16px}
  .grid4 h3{font-size:15px}
  /* 두 칸짜리 사진 기사는 폭이 170px 남짓이라 시간까지 넣으면 숫자 줄도 꺾인다 */
  .grid4 .meta time{display:none}
  .archive li{flex-wrap:wrap;gap:4px 12px}
  .archive .headline{flex-basis:100%;order:3}
}

/* 중간 페이지: 요약(또는 HN 본문 번역)과 번역 댓글.
   폭·글자 크기는 동아일보 기사 페이지에 맞춘다: 본문 칼럼 684px, 제목 34px/1.4, 본문 18px/1.8, 자간 -0.3px.
   모바일(720px 이하)은 보통 사이트 크기로 줄인다: 제목 26px, 본문 16px/1.75, 댓글 15px */
/* 동아일보 기사 페이지와 같은 칸 배치: 왼쪽 232px(비워 둠) · 본문 684px · 오른쪽 300px. 본문 중심이 화면 중심 근처에 온다.
   화면이 좁아지면 비어 있는 왼쪽 칸부터 줄어든다. */
.story-page{display:grid;grid-template-columns:minmax(0,232px) 684px 300px;grid-template-areas:". head ." ". main right";column-gap:32px;row-gap:26px;justify-content:center;padding:32px 0 56px}
.article-head{grid-area:head;min-width:0}
.article{grid-area:main;min-width:0}
.story-right{grid-area:right;min-width:0}
.story-right .box+.box{margin-top:32px}
.ranking li.current h3{font-weight:700}
.ranking .pts{margin-top:2px;font-size:12.5px;color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--sub)}
.crumbs span{font-weight:500}
.crumbs span::before{content:"›";margin-right:8px;color:var(--muted);font-weight:400}
.article-head h1{font-size:34px;font-weight:700;line-height:1.4;margin:10px 0 10px}
.article-head .en{font-size:16px;color:var(--muted);line-height:1.5}
.article-head .meta{margin-top:16px;font-size:13px}
.btn{display:inline-flex;align-items:center;padding:10px 16px;border:1px solid var(--line);font-size:14px;font-weight:600}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.article-body{padding-top:26px;border-top:1px solid var(--line)}
.thumb.article-visual.no-image{aspect-ratio:5/1;margin:0 0 32px}
.article-visual.natural{margin:0 0 32px;text-align:center}
.article-visual.natural img{display:inline-block;vertical-align:top;max-width:100%;height:auto;max-height:440px;object-fit:cover}
.article-text h2,.comments h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.article-text h2{margin-bottom:16px}
.article-text .notice{margin:0 0 14px}
/* 요약 첫 문단(굵은 한 줄 요약)만 크게 쓴다. HN 본문 글의 "본문"(.full)은 첫 문단도 본문 크기로 둔다. */
.article-text .md:not(.full)>p:first-child{font-size:20px;line-height:1.6}
.article-text .body-head{margin-top:36px}
.md{font-size:18px;line-height:1.8;letter-spacing:-.3px;overflow-wrap:anywhere}
.md>*+*{margin-top:18px}
.md h1,.md h2,.md h3,.md h4{font-size:19px;font-weight:700;letter-spacing:-.02em;margin-top:30px}
.md ul,.md ol{padding-left:22px;list-style:revert}
.md li+li{margin-top:4px}
.md a{text-decoration:underline;text-underline-offset:3px}
.md code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--ph);padding:1px 5px;border-radius:3px}
.md pre{background:var(--ph);padding:12px 14px;overflow-x:auto;border-radius:4px;line-height:1.55}
.md pre code{background:none;padding:0}
.md blockquote{margin-left:0;border-left:3px solid var(--line);padding-left:12px;color:var(--sub)}

/* 본문 끝의 원문 링크: Slack 링크 미리보기처럼 왼쪽 띠 + 사이트 · 원제 · 설명 */
.unfurl{margin-top:40px;padding:2px 0 2px 16px}
.unfurl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px;background:var(--line)}
.unfurl-site{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--sub)}
.unfurl-site img{flex:none;border-radius:3px}
.unfurl h3{margin-top:4px;font-size:17px;font-weight:700;line-height:1.45;color:var(--fg)}
.unfurl-desc{margin-top:4px;font-size:15px;line-height:1.6;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.comments{margin-top:40px;padding-top:28px;border-top:3px solid var(--rule)}
.comments .notice{margin:0 0 12px}
.comment{margin-left:calc(min(var(--depth), 8) * 22px);padding:14px 0 14px 14px;border-left:2px solid var(--line);border-top:1px solid var(--line)}
.comment.root{padding-left:0;border-left:0}
.comment-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.comment-meta .by{font-weight:700;color:var(--sub)}
.comment-meta a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* HN처럼 [–]를 누르면 댓글을 접는다. 접힌 댓글은 메타 줄만 남기고, 딸린 답글은 스크립트가 hidden으로 숨긴다. */
.comment-meta .toggle{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:opacity .2s}
.comment-meta .toggle:hover{opacity:.7}
.comment.collapsed>:not(.comment-meta){display:none}
.comment.collapsed .comment-meta{margin-bottom:0}
.comment .md{font-size:16px;line-height:1.75}
.comment .md>*+*{margin-top:12px}
.deleted{font-size:14px;color:var(--muted);font-style:italic}
.more-comments{margin-top:18px;font-size:14px;font-weight:600}

.story-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.story-nav span{display:block;font-size:12.5px;color:var(--muted)}
.story-nav strong{display:block;margin-top:4px;font-size:15px;line-height:1.45}
.story-nav .next{text-align:right}
.story-nav .home{align-self:center;font-size:14px;font-weight:700}

@media (max-width:720px){
  .story-page{padding-top:20px}
  .crumbs{font-size:14px}
  .article-head h1{font-size:26px}
  .article-text .md:not(.full)>p:first-child{font-size:18px}
  .md{font-size:16px;line-height:1.75;letter-spacing:-.2px}
  .md>*+*{margin-top:16px}
  .md h1,.md h2,.md h3,.md h4{font-size:17px;margin-top:28px}
  .comment .md{font-size:15px;line-height:1.7}
  .comment{margin-left:calc(min(var(--depth), 6) * 12px);padding-left:10px}
  .story-nav{grid-template-columns:1fr 1fr}
  .story-nav .home{grid-column:1/-1;order:3;text-align:center}
}

/* 중간 페이지 반응형: 동아일보 칸 배치(232·684·300)가 들어가지 않는 1312px 아래에서는
   본문(최대 684px)을 가운데에 두고 오른쪽 목록은 본문 아래로 내린다. */
@media (max-width:1311px){
  .story-page{grid-template-columns:minmax(0,684px);grid-template-areas:"head" "main" "right"}
}