/* 선택자마다 main 접두가 있는 이유: system.css 의 `.nf-page main h2` 가 (0,1,2) 라
   `.ia-body h2` (0,1,1) 를 이긴다. 접두를 빼면 제목이 42px 로 돌아간다 */
/* 인사이트 목록 · 상세 조판.
   짜임 값(커버 16:8 · 본문 700 + 목차 220 · 간격 72)은 허브 상세와 같다 */
main .ia-wrap{max-width:calc(1080px + 2 * var(--gut));margin:0 auto;padding:clamp(36px,4vw,56px) var(--gut) clamp(72px,8vw,104px)}
main .ia-hd{max-width:820px;margin:0 auto;text-align:center}
main .ia-k{font-size:14px;font-weight:650;color:var(--nf-color-primary)}
main .ia-hd h1{margin-top:12px;font-size:clamp(34px,5vw,56px);font-weight:720;line-height:1.18;letter-spacing:-.045em;text-wrap:balance;color:var(--nf-color-heading)}
main .ia-lede{max-width:700px;margin:14px auto 0;color:var(--nf-color-bodyDimmed);font-size:18px;line-height:1.7;text-wrap:balance}
main .ia-meta{display:flex;justify-content:center;gap:10px;margin-top:14px;color:var(--nf-color-grey5);font-size:14px}
main .ia-meta :is(span,time)+:is(span,time)::before{content:'·';margin-right:10px}
main .ia-cover{display:block;width:100%;margin-top:32px;aspect-ratio:16/8;border-radius:var(--nf-radius-container);object-fit:cover;object-position:center 34%}
main .ia-layout{display:grid;grid-template-columns:minmax(0,700px) 220px;justify-content:center;gap:72px;margin-top:48px}
main .ia-body{min-width:0;color:var(--nf-color-body);word-break:keep-all}
/* 섹션 머리. 위에 선을 긋고 라임 점 하나를 올린다. 라임은 점으로만 쓴다(보드 규칙) */
.nf-page main .ia-body h2{position:relative;margin:84px 0 22px;padding-top:30px;font-size:28px;font-weight:700;
 line-height:1.35;letter-spacing:-.035em;scroll-margin-top:96px;color:var(--nf-color-heading);
 border-top:1px solid var(--nf-color-border)}
.nf-page main .ia-body h2::before{content:'';position:absolute;top:-3px;left:0;width:6px;height:6px;
 border-radius:50%;background:var(--nf-color-lime)}
main .ia-body>:first-child{margin-top:0}
/* 단락 사이는 적어도 한 줄. 18px 는 행간 31.5px 보다 좁아서 긴 글이 벽으로 보인다 */
/* 인용 · 그림 다음 단락은 p+p 가 아니라서 공통 16px 로 돌아간다. 전부에 건다 */
.nf-page main .ia-body p{margin-top:30px}
/* 첫 단락은 본문으로 들어가는 문이다. 한 단 키워 리드와 본문을 잇는다 */
main .ia-body>p:first-of-type{font-size:19px;line-height:1.72;color:var(--nf-color-heading)}
main .ia-src{color:var(--nf-color-grey5);font-size:15px;line-height:1.7}
/* 원문 지점 칩. 문장 끝에 붙되 읽는 줄을 끊지 않게 색과 밑줄을 뺀다 */
.nf-page main .ia-ts{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:var(--nf-radius-full);
 background:var(--nf-color-grey1);color:var(--nf-color-grey5);font-size:13px;font-weight:600;
 font-variant-numeric:tabular-nums;text-decoration:none;vertical-align:1px;white-space:nowrap;
 transition:background .16s linear,color .16s linear}
.nf-page main .ia-ts:hover{background:var(--nf-color-primary);color:#fff}
main .ia-quote figcaption .ia-ts{margin-left:0;font-style:normal}
main .ia-src-head{max-width:700px;margin:18px auto 0;padding-top:16px;border-top:1px solid var(--nf-color-border);text-align:left;word-break:keep-all}
/* 화자 이름만 형광펜. 밑줄처럼 글자 아래 55~92% 구간만 칠한다 */
main .ia-src-head .mk{background:linear-gradient(transparent 55%,#E6F58A 55%,#E6F58A 92%,transparent 92%);
 color:#19334F;font-weight:600;padding:0 1px}
main .ia-body ol{margin:24px 0 0;padding:0;list-style:none;counter-reset:steps}
main .ia-body ol>li{position:relative;padding:20px 0 20px 54px;border-top:1px solid var(--nf-color-border);counter-increment:steps}
main .ia-body ol>li::before{content:'0' counter(steps);position:absolute;top:20px;left:0;color:var(--nf-color-primary);font-size:15px;font-weight:700}
main .ia-body ol>li b{display:block;margin-bottom:5px;font-size:18px}
main .ia-note{font-size:18px;line-height:1.75;margin-top:34px;padding:22px 24px;border-left:4px solid var(--nf-color-lime);background:var(--nf-color-limeLight);color:var(--nf-color-bodyDimmed)}
main .ia-note b{display:block;margin-bottom:6px;color:var(--nf-color-heading)}
/* 인용. 한글 해석이 본체이고 영문 원문이 근거다. 본문보다 안으로 들어가고
   왼쪽에 네이비 선을 둬서 「남이 한 말」임을 글자 크기가 아니라 자리로 알린다 */
main .ia-quote{margin:46px 0;padding:4px 0 4px 26px;border-left:2px solid var(--nf-color-primary)}
main .ia-quote blockquote{margin:0;font-size:21px;font-weight:450;line-height:1.62;
 letter-spacing:-.025em;color:var(--nf-color-heading);word-break:keep-all;text-wrap:pretty}
main .ia-quote figcaption{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 color:var(--nf-color-grey5);font-size:14.5px;line-height:1.6;font-style:italic}
/* 그림은 글의 쉼표다. 위아래를 단락보다 넓게 띄워 읽는 호흡을 끊어 준다 */
main .ia-fig{margin:52px 0}
main .ia-fig img{display:block;width:100%;border-radius:var(--nf-radius-150);
 background:var(--nf-color-grey1);box-shadow:inset 0 0 0 1px var(--nf-color-border)}
main .ia-fig figcaption{margin-top:12px;color:var(--nf-color-grey5);font-size:14px;line-height:1.6}
main .ia-fig figcaption span{display:block;margin-top:3px;color:var(--nf-color-grey4)}
main .ia-refs{margin-top:58px}
main .ia-refs h2{margin-bottom:14px}
main .ia-refs ul{margin:0;padding:0;list-style:none}
main .ia-refs ul{counter-reset:ref}
main .ia-refs li{position:relative;padding:14px 0 14px 30px;border-top:1px solid var(--nf-color-border);
 font-size:15px;line-height:1.6;counter-increment:ref}
main .ia-refs li::before{content:counter(ref);position:absolute;top:14px;left:0;
 color:var(--nf-color-grey4);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
main .ia-refs li span{display:block;margin-top:3px;color:var(--nf-color-grey5);font-size:14px}
main .ia-disclaim{margin-top:34px;padding-top:18px;border-top:1px solid var(--nf-color-border);color:var(--nf-color-grey5);font-size:14px;line-height:1.7}
main .ia-side{position:sticky;top:96px;align-self:start}
main .ia-side section{padding:18px 0;border-top:1px solid var(--nf-color-border);border-bottom:1px solid var(--nf-color-border)}
main .ia-side h2{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:var(--nf-color-grey5)}
main .ia-side a{display:block;margin-top:12px;padding-left:12px;border-left:2px solid transparent;
 color:var(--nf-color-bodyDimmed);font-size:14px;line-height:1.5;text-decoration:none;
 word-break:keep-all;transition:color .16s linear,border-color .16s linear}
main .ia-side a:hover{color:var(--nf-color-primary)}
/* 지금 읽는 자리. 글이 길어 목차가 길면 어디쯤인지가 안 보인다 */
main .ia-side a[aria-current="true"]{color:var(--nf-color-heading);font-weight:600;
 border-left-color:var(--nf-color-lime)}
main .ia-end{margin-top:72px;padding-top:30px;border-top:1px solid var(--nf-color-border)}
@media(max-width:900px){main .ia-layout{grid-template-columns:minmax(0,700px)}main .ia-side{display:none}}
@media(max-width:600px){
 main .ia-hd{text-align:left}
 main .ia-hd h1{font-size:32px}
 main .ia-lede{margin-top:12px;font-size:16px}
 main .ia-meta{flex-wrap:wrap;justify-content:flex-start;margin-top:12px}
 main .ia-cover{margin-top:24px;aspect-ratio:4/3}
 main .ia-layout{margin-top:34px}
 .nf-page main .ia-body h2{margin-top:60px;padding-top:24px;font-size:23px}
 main .ia-body>p:first-of-type{font-size:17px}
 main .ia-quote{margin:36px 0;padding-left:18px}
 main .ia-quote blockquote{font-size:18.5px}
 main .ia-fig{margin:40px 0}
}

/* 목록 */
main .il-hd{max-width:760px}
main .il-hd h1{margin:0;font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;line-height:1.24;letter-spacing:-.02em;color:var(--nf-color-heading)}
main .il-hd p{margin:14px 0 0;color:var(--nf-color-bodyDimmed);font-size:1rem;line-height:1.75}
main .il-lead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:stretch;margin-top:clamp(32px,4vw,48px);padding-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--nf-color-border);text-decoration:none;color:inherit}
main .il-lead img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--nf-radius-container)}
main .il-lead>span{display:flex;flex-direction:column;justify-content:center;padding:6px 0}
main .il-lead h2{margin:10px 0 0;font-size:28px;font-weight:700;line-height:1.3;letter-spacing:-.035em;text-wrap:balance;color:var(--nf-color-heading)}
main .il-lead p{margin:12px 0 0;font-size:1rem;line-height:1.7;color:var(--nf-color-bodyDimmed);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
main .il-lead:hover h2{color:var(--nf-color-primary)}
main .il-mt{display:block;margin-top:14px;font-size:14px;color:var(--nf-color-grey5)}
/* 글이 적을 때 1440 에서 마지막 열이 빈다. 그대로 둔다 (2026-11-03 타미).
   발행이 쌓이면 채워지므로 열 수나 대표 글 짜임을 건드리지 않는다 */
main .il-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,2.4vw,28px);margin-top:clamp(32px,4vw,48px)}
main .il-grid a{display:flex;flex-direction:column;text-decoration:none;color:inherit}
main .il-grid .il-mt{margin-top:auto;padding-top:12px}
main .il-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--nf-radius-150);background:var(--nf-color-grey1)}
main .il-grid b{display:block;margin-top:14px;font-size:18px;font-weight:650;line-height:1.4;letter-spacing:-.03em;color:var(--nf-color-heading);word-break:keep-all;text-wrap:balance}
main .il-grid p{margin:6px 0 0;font-size:.9375rem;line-height:1.6;color:var(--nf-color-bodyDimmed);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
main .il-grid a:hover b{color:var(--nf-color-primary)}
@media(max-width:700px){main .il-lead{grid-template-columns:1fr;gap:18px}main .il-lead h2{font-size:23px}}

/* readability.css 가 `main p` 와 그 안의 a 를 레이어 안 !important 로 고정한다.
   레이어 밖에서는 !important 를 써도 못 이기므로 같은 레이어에 얹는다 */
@layer nf-readability{
 .nf-page main .ia-body>p:first-of-type{font-size:19px!important;line-height:1.72!important}
 .nf-page main .ia-body p .ia-ts{font-size:13px!important;line-height:1.5!important;color:var(--nf-color-grey5)!important}
 .nf-page main .ia-body p .ia-ts:hover{color:#fff!important}
 @media(max-width:600px){.nf-page main .ia-body>p:first-of-type{font-size:17px!important}}
}