/* IPWiki — 위키백과식 경량 뷰어 (화이트 테마, 모바일 반응형) */
:root{
  --fw-green:#4b7a3f; --fw-green-dark:#33562b; --fw-ink:#202122; --fw-muted:#5b6168;
  --fw-line:#d3d7dd; --fw-soft:#eef4ea; --fw-bg:#ffffff; --fw-link:#1a5fb4;
  --fw-box:#f7f9f6; --fw-side:#fafbfc;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fw-bg); color:var(--fw-ink);
  font-family:"Malgun Gothic","맑은 고딕","Noto Sans KR",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.7;
}
a{color:var(--fw-link); text-decoration:none}
a:hover{text-decoration:underline}

/* ── 헤더: 화이트, 취지 카피 2줄 ── */
.fw-header{border-bottom:1px solid rgba(127,214,240,.22); background:#0E1C2C}
.fw-header-in{max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:8px 16px}
.fw-menu-toggle{border:1px solid var(--fw-line); background:#fff; border-radius:6px; width:34px; height:34px;
  font-size:16px; cursor:pointer; color:var(--fw-green-dark); flex:0 0 auto}
.fw-menu-toggle:hover{background:var(--fw-soft)}
.fw-logo{display:inline-flex; align-items:center; gap:9px; font-size:25px; font-weight:800; color:#fff; white-space:nowrap; flex:0 0 auto; text-decoration:none}
.fw-logo:hover{text-decoration:none}
.fw-logo-img{height:38px; width:auto; display:block}
.fw-mission{flex:1 1 auto; margin:0; font-size:12.5px; line-height:1.45; color:var(--fw-muted); min-width:0}
.fw-mission b{color:var(--fw-green-dark); font-weight:700}
.fw-search{flex:1 1 360px; max-width:460px; min-width:200px}
.fw-search-row{display:flex; gap:6px}
.fw-search input{flex:1 1 auto; width:100%; padding:8px 12px; border:1px solid var(--fw-line); border-radius:6px; font-size:14px}
.fw-search-btn{flex:0 0 auto; width:40px; border:1px solid var(--fw-green); background:var(--fw-green); color:#fff; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.fw-search-btn:hover{background:var(--fw-green-dark); border-color:var(--fw-green-dark)}
.fw-msg{font-size:12px; color:#c0392b; margin-top:4px; line-height:1.4}
.fw-result{border-bottom:1px solid var(--fw-line); padding:9px 0}
.fw-result h3{margin:0 0 3px; font-size:17px; color:var(--fw-green-dark)}
.fw-result p{margin:0; color:var(--fw-muted); font-size:14px}

/* ── 3열 레이아웃 (좌 메뉴 / 중 본문 / 우 그래프+엣지) ── */
.fw-wrap{max-width:1280px; margin:0 auto; display:grid;
  grid-template-columns:198px minmax(0,1fr) 256px; gap:22px; padding:18px 16px; align-items:start}
.fw-side{font-size:13.5px}
.fw-side-title{font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--fw-muted);
  border-bottom:1px solid var(--fw-line); padding-bottom:4px; margin:0 0 8px}
.fw-side.left{grid-column:1; grid-row:1; position:sticky; top:64px; max-height:calc(100vh - 64px); overflow-y:auto; overscroll-behavior:auto}

/* 좌측 메뉴 (접기 가능) */
.fw-menu details{margin:1px 0}
.fw-menu summary{cursor:pointer; padding:5px 8px; border-radius:6px; font-weight:700; font-size:13px;
  color:var(--fw-green-dark); list-style:none; user-select:none}
.fw-menu summary::-webkit-details-marker{display:none}
.fw-menu summary::before{content:"▸"; display:inline-block; width:1em; color:#687078}
.fw-menu details[open]>summary::before{content:"▾"}
.fw-menu summary:hover{background:var(--fw-soft)}
.fw-menu .cnt{color:#687078; font-weight:400; font-size:11px}
.fw-menu ul{list-style:none; margin:1px 0 5px; padding:0 0 0 16px}
.fw-menu li{margin:1px 0}
.fw-menu li a{display:block; padding:4px 8px; border-radius:5px; color:var(--fw-ink); font-size:12.5px; line-height:1.35}
.fw-menu li a:hover{background:var(--fw-soft); color:var(--fw-green-dark); text-decoration:none}
.fw-menu li a.cur{background:var(--fw-soft); color:var(--fw-green-dark); font-weight:700}
.fw-new-badge{display:none; color:#c62828; font-weight:700; font-size:11px}
.fw-new-badge.is-today{display:inline}
.fw-menu li.empty{color:#687078; font-size:12px; padding:3px 8px}
body.menu-collapsed .fw-side.left{display:none}
body.menu-collapsed .fw-wrap{grid-template-columns:minmax(0,1fr) 256px}
body.menu-collapsed .fw-main{grid-column:1}
body.menu-collapsed .fw-side.right{grid-column:2}

/* ── 본문 (대16·중14·소12 약 2pt 간격은 인쇄용; 웹 가독성 위해 px로 매핑, 단계 ~2pt) ── */
.fw-main{grid-column:2; grid-row:1; min-width:0}
.fw-toc{background:var(--fw-side); border:1px solid var(--fw-line); border-radius:6px;
  padding:8px 12px; margin:0 0 16px; font-size:13.5px; display:inline-block; min-width:240px}
.fw-toc .fw-toc-title{margin:0 0 4px; font-size:12px; color:var(--fw-muted); font-weight:700}
.fw-toc ul{list-style:none; margin:0; padding:0}
.fw-toc li{margin:2px 0}
.fw-toc a{color:var(--fw-link)}                 /* 목차도 링크처럼 보이게 */
.fw-toc a:hover{text-decoration:underline}
.fw-toc li.tl2>a{font-weight:700}               /* 하위가 있는 상위 항목 강조 */
.fw-toc li.tl3{padding-left:14px}               /* 하위 항목 들여쓰기 */
.fw-main h1{font-size:23px; font-weight:800; border-bottom:2px solid var(--fw-line); padding-bottom:7px; margin:0 0 13px; line-height:1.3}     /* 대제목 ≈17pt */
.fw-main h2{font-size:20.5px; font-weight:700; border-bottom:1px solid var(--fw-line); padding-bottom:4px; margin:24px 0 10px}              /* 중제목 ≈15pt (−≈2.5px≈≈2pt) */
.fw-main h3{font-size:18px; font-weight:700; margin:18px 0 7px; color:var(--fw-green-dark)}                                                /* 소제목 ≈13.5pt (−≈2.5px≈2pt) */
.fw-section-no{color:#687078}
.fw-main p{margin:0 0 13px}
.fw-main p.fw-q{margin:14px 0 2px}          /* QnA 질문 */
.fw-main p.fw-a{margin:0 0 8px; color:#333} /* QnA 답 — 질문 바로 아래 줄 */
.fw-main ul,.fw-main ol{margin:0 0 13px; padding-left:22px}
.fw-main li{margin:4px 0}
/* 표: 맨 왼쪽·맨 오른쪽 외곽선만 트임(open), 내부 세로줄·가로줄은 유지 */
.fw-main table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.6; margin:0 0 16px}
.fw-main th,.fw-main td{border:1px solid #ddd; padding:8px 10px; text-align:left; vertical-align:top}
.fw-main th{background:var(--fw-soft); font-weight:700; text-align:center}
.fw-main tr>:first-child{border-left:none}   /* 맨 왼쪽 트임 */
.fw-main tr>:last-child{border-right:none}   /* 맨 오른쪽 트임 */
.fw-box{background:var(--fw-box); border-left:4px solid var(--fw-green); padding:13px 15px; margin:15px 0; border-radius:5px}
.fw-original{background:#fbfbf6; border:1px solid #e4e1d0; padding:12px 14px; margin:14px 0; border-radius:5px; font-size:14.5px}
.fw-original .tag{display:inline-block; font-size:11px; font-weight:700; color:#8a6d00; background:#fff4d6; padding:1px 8px; border-radius:10px; margin-bottom:6px}
.fw-src{font-weight:700; font-size:13px; color:#7a6a2a; margin:0 0 8px}
.fw-meta{color:var(--fw-muted); font-size:12.5px; margin:18px 0 0; border-top:1px solid var(--fw-line); padding-top:10px}

/* ── 우측: 미니 그래프 + 엣지 ── */
.fw-side.right{grid-column:3; grid-row:1; position:sticky; top:64px}
.fw-graphbox{background:#fff; border:1px solid var(--fw-line); border-radius:8px; padding:10px; margin-bottom:14px}
.fw-graphbox svg{width:100%; height:auto; display:block; background:#fff; border-radius:4px}
.fw-full-graph{position:relative; width:100%; aspect-ratio:248/192; display:flex;
  align-items:center; justify-content:center; background:#fff; border-radius:4px}
.fw-full-graph-object{position:absolute; inset:0; width:100%; height:100%; border:0}
.fw-full-graph-fallback{font-size:12px}
.fw-graphbox .gnode-c{fill:var(--fw-green); stroke:#fff; stroke-width:1.5}
.fw-graphbox .gnode-n{fill:var(--fw-green); stroke:#fff; stroke-width:0.7}
.fw-graphbox .gedge{stroke:var(--fw-green); stroke-width:1.6; opacity:.5}
.fw-graphbox .gedge2{stroke:#9bbf90; stroke-width:0.5; opacity:.55}
.fw-graphbox .gdot{fill:var(--fw-green)}
.fw-graphbox a:hover .gdot{fill:var(--fw-green-dark)}
.fw-graphbox text{font-size:9.5px; fill:#202122; font-weight:600; paint-order:stroke; stroke:#fff; stroke-width:2.4px; stroke-linejoin:round}
.fw-graphbox text.c{fill:#fff; font-weight:800; paint-order:stroke; stroke:#000; stroke-width:2.2px; stroke-linejoin:round}
.fw-graphbox a:hover .gnode-n{fill:var(--fw-green-dark)}
.fw-graphbox a:hover text{fill:var(--fw-green-dark)}
.fw-edges ul{list-style:none; margin:0; padding:0}
.fw-edges li{margin:5px 0; padding-left:14px; position:relative; line-height:1.4}
.fw-edges li::before{content:"→"; position:absolute; left:0; color:var(--fw-green)}
.fw-edges .rel{display:block; font-size:11px; color:var(--fw-muted)}

/* ── 푸터 ── */
.fw-footer{border-top:1px solid var(--fw-line); background:var(--fw-side); margin-top:28px}
.fw-footer-in{max-width:1280px; margin:0 auto; padding:18px 16px; font-size:13px; color:var(--fw-muted)}
.fw-footer a{color:var(--fw-muted)} .fw-footer a:hover{color:var(--fw-green-dark)}
.fw-footer .links{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:8px}
.fw-disclaimer{font-size:12px; line-height:1.6; margin:4px 0}
.fw-ad{margin:16px 0}

/* 긴 URL·긴 토큰이 화면 밖으로 밀려나지 않게(모바일 "콘텐츠가 화면보다 넓음" 방지) */
.fw-main{overflow-wrap:break-word}
.fw-main a{overflow-wrap:anywhere}

/* ── 반응형 ── */
@media(max-width:1040px){
  .fw-wrap{grid-template-columns:180px minmax(0,1fr); }
  .fw-side.right{grid-column:1 / -1; position:static; display:grid; grid-template-columns:1fr 1fr; gap:14px}
  body.menu-collapsed .fw-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .fw-mission{display:none}
  /* 헤더: 좁은 화면에서 검색창을 둘째 줄로 내려 가로 넘침 제거 */
  .fw-header-in{flex-wrap:wrap; row-gap:6px}
  .fw-search{flex:1 1 100%; max-width:none; min-width:0; order:3}
  .fw-logo{font-size:21px} .fw-logo-img{height:32px}
  .fw-wrap{grid-template-columns:minmax(0,1fr); gap:14px}
  .fw-main{grid-column:1; grid-row:1}
  .fw-side.left{grid-column:1; grid-row:2; position:static; max-height:none; overflow:visible}
  /* 모바일은 그래프만 숨기고, 연결된 문서 목록은 탐색 경로로 유지한다. */
  .fw-side.right{grid-column:1; grid-row:3; grid-template-columns:1fr}
  .fw-graphbox{display:none}
  body.menu-collapsed .fw-side.right{grid-column:1; grid-row:2}
  .fw-main h1{font-size:22px} .fw-main h2{font-size:18.5px} .fw-main h3{font-size:16.5px}
  /* 표: 좁은 화면에서는 표 자체가 가로 스크롤(본문 가로 넘침 방지) */
  .fw-main table{display:block; overflow-x:auto}
  /* 탭 타깃 확대(클릭 요소 간격) */
  .fw-menu li a{padding:8px 10px}
  .fw-menu summary{padding:8px 10px}
  .fw-footer .links{row-gap:10px}
  .fw-footer .links a{padding:4px 2px}
  .fw-edges li{margin:9px 0}
  .fw-toc{display:block; min-width:0}
}

/* [SEO·성능] 2026-07-30 — 좌측 메뉴 개편.
   다른 분류는 전체 목록을 렌더하지 않고 "분류 링크" 한 줄로 둔다(문서 12 §3 문제 A).
   현재 분류의 펼친 목록(summary)과 시각적으로 같은 위계로 보이게 맞춘다. */
.fw-menu .fw-cat-link{margin:1px 0}
.fw-menu .fw-cat-link>a{display:block; padding:5px 8px; border-radius:6px; font-weight:700;
  font-size:13px; color:var(--fw-ink); line-height:1.35}
.fw-menu .fw-cat-link>a::before{content:"▸"; display:inline-block; width:1em; color:#687078}
.fw-menu .fw-cat-link>a:hover{background:var(--fw-soft)}
/* 전체 글 목록 페이지: 분류별 목록을 읽기 편한 2열로(넓은 화면에서만) */
.fw-body .cnt{color:#687078; font-weight:400; font-size:.8em}
@media (min-width:900px){
  .fw-body h2+ul{columns:2; column-gap:28px}
}
/* 전체 글 목록: 제목 + 한 줄 설명 (2026-07-30) */
.fw-artlist{list-style:none; padding-left:0; margin:.4em 0 1.2em}
.fw-artlist>li{margin:0 0 .85em; padding-left:0}
.fw-artlist>li>a{font-weight:600; display:block; line-height:1.4}
.fw-artlist .fw-li-desc{display:block; color:#5f6368; font-size:.9em; line-height:1.5; margin-top:.15em}
@media (min-width:900px){ .fw-body .fw-artlist{columns:2; column-gap:32px} }


/* ── 언론사형 개편 (2026-08-20) — 상단 분류 탭 + 뉴스 프론트 카드 ───────────
   외부 라이브러리 0 · CSS 전환만(트래픽 무증가). 대표 이미지는 네이버 홈판 규격 1:1. */
.fw-cattabs{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #e4dfd3;
  box-shadow:0 1px 4px rgba(58,55,48,.06)}
.fw-cattabs-in{max-width:1280px;margin:0 auto;padding:8px 14px;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fw-cattabs-in::-webkit-scrollbar{display:none}
.fw-cattabs a{flex:none;padding:7px 14px;border-radius:20px;font-size:14px;font-weight:600;
  color:#3E3A33;text-decoration:none;background:#F4F0E6;transition:background .18s,color .18s,transform .18s}
.fw-cattabs a:hover{background:#E4EED2;transform:translateY(-1px)}
.fw-cattabs a.on{background:#2F7D32;color:#fff}

.nf-chip{display:inline-block;background:#2F7D32;color:#fff;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:12px;margin-bottom:8px}
.nf-chip.sm{background:#E4EED2;color:#2F7D32;margin:0 8px 0 0;font-size:11px;padding:2px 8px;vertical-align:1px}
.nf-hero{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:20px;align-items:center;
  background:#FBF8F0;border:1px solid #E7E1D2;border-radius:14px;padding:16px;margin:14px 0}
.nf-hero-media img,.nf-card img,.nf-cathero img{width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:10px;display:block;background:#EFEAD9}
.nf-hero-title{display:block;font-size:1.45em;font-weight:800;line-height:1.32;color:#232019;
  text-decoration:none;margin:2px 0 8px}
.nf-hero-title:hover{color:#2F7D32}
.nf-hero-desc{color:#5A554C;font-size:.95em;line-height:1.55;margin:0}
.nf-recent{list-style:none;padding:10px 4px;margin:0 0 6px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px 18px;border-bottom:1px solid #EDE7D8}
.nf-recent a{text-decoration:none;color:#3E3A33;font-weight:600}
.nf-recent a:hover{color:#2F7D32}
.nf-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin:18px 0}
.nf-sec-h{display:flex;align-items:baseline;justify-content:space-between;font-size:1.06em;
  border-bottom:2px solid #2F7D32;padding-bottom:6px;margin:0 0 10px}
.nf-sec-h a{color:#232019;text-decoration:none}
.nf-more{font-size:.78em;font-weight:600;color:#7A8471 !important}
.nf-card{position:relative;display:block;border-radius:10px;overflow:hidden;text-decoration:none;
  box-shadow:0 2px 8px rgba(58,55,48,.10);transition:transform .18s,box-shadow .18s}
.nf-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(58,55,48,.18)}
.nf-card-title{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;
  font-weight:700;font-size:.98em;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(20,18,12,.78))}
.nf-noimg{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,#E4EED2,#F6ECD2);color:#4E7A3A;font-weight:800;font-size:1.2em}
.nf-list{list-style:none;margin:10px 0 0;padding:0}
.nf-list li{padding:5px 0;border-bottom:1px dashed #EDE7D8;font-size:.94em}
.nf-list a{color:#3E3A33;text-decoration:none}
.nf-list a:hover{color:#2F7D32}
.nf-cathero{max-width:420px;margin:10px 0 14px}
.nf-when{color:#9aa08e;font-size:.82em;margin-left:8px}
.nf-row{margin-bottom:4px}
@media (max-width:720px){
  .nf-hero{grid-template-columns:1fr}
  .nf-sections{grid-template-columns:1fr}
  .fw-cattabs{top:0}
}
/* 오늘의 영상 히어로(NYT식) + 의견 CTA (2026-08-20) */
.nf-video .nf-hero-media{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#1B2A4A}
.nf-video .fw-ytplay{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:transparent}
.nf-video .fw-ytplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.nf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:48px;
  border-radius:12px;background:#FF0000;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .18s}
.nf-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);
  width:0;height:0;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.fw-ytplay:hover .nf-play{background:#e60000}
.nf-video{grid-template-columns:minmax(280px,460px) 1fr}
.nf-hero-ctas{margin:12px 0 0}
.nf-hero-cta{display:inline-block;background:#2F7D32;color:#fff;font-weight:700;font-size:.92em;
  padding:8px 18px;border-radius:22px;text-decoration:none;margin-right:8px;transition:transform .18s,box-shadow .18s}
.nf-hero-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(47,125,50,.3)}
.nf-hero-cta.ghost{background:#fff;color:#2F7D32;border:2px solid #B9CDA0}
.fw-comment-cta{margin:2em 0 0;padding:14px 18px;background:#FBF8F0;border:1px solid #E7E1D2;border-radius:10px;font-size:.93em}
@media (max-width:720px){.nf-video{grid-template-columns:1fr}}
/* 포털 레이아웃 — 홈·분류·자료실은 사이드바 없는 풀폭 (2026-08-20) */
body.portal .fw-side{display:none !important}
body.portal .fw-wrap{display:block;max-width:1180px;margin:0 auto;padding:0 16px}
body.portal .fw-main{max-width:none;width:auto}
/* (제거됨 2026-08-20: 분류 목록 ul을 오폭 — toc는 .fw-toc 규칙이 담당) */
body.portal .nf-sections{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
body.portal .fw-toc{display:none !important}
/* NYT식 상단 영상 배너 + BBC식 3단 그리드 (2026-08-20) */
.nf-band{display:grid;grid-template-columns:minmax(300px,4fr) 6fr;margin:14px 0 22px;
  border-radius:6px;overflow:hidden;box-shadow:0 3px 14px rgba(27,42,74,.18)}
.nf-band-media{position:relative;aspect-ratio:16/9;background:#1B2A4A}
.nf-band-media .fw-ytplay{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:transparent}
.nf-band-media .fw-ytplay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nf-band-panel{background:#1B2A4A;color:#fff;padding:26px 32px;display:flex;flex-direction:column;justify-content:center}
.nf-band-kicker{color:#3EC6D9;font-weight:800;font-size:.85em;letter-spacing:.06em;margin-bottom:8px}
.nf-band-title{font-size:1.5em;font-weight:800;line-height:1.3;margin:0 0 10px;color:#fff}
.nf-band-desc{color:#C9D4E6;font-size:.95em;line-height:1.55;margin:0;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nf-band-panel .nf-hero-cta{background:#3EC6D9;color:#12203C}
.nf-band-panel .nf-hero-cta.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.nf-bbc{display:grid;grid-template-columns:3fr 5fr 4fr;gap:22px;padding-bottom:18px;border-bottom:2px solid #232019}
.nf-col-sub{display:flex;flex-direction:column;gap:16px}
.nf-sub,.nf-main{display:block;text-decoration:none;color:#232019}
.nf-sub img,.nf-main img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;background:#EFEAD9}
.nf-sub .nf-noimg,.nf-main .nf-noimg{aspect-ratio:16/10;border-radius:4px}
.nf-sub-title{display:block;font-weight:700;font-size:.98em;line-height:1.35;margin:8px 0 4px}
.nf-main-title{display:block;font-weight:800;font-size:1.2em;line-height:1.3;margin:12px 0 8px}
.nf-main-desc{display:block;color:#5A554C;font-size:.95em;line-height:1.55;margin-bottom:6px}
.nf-sub:hover .nf-sub-title,.nf-main:hover .nf-main-title,.nf-col-heads a:hover{color:#2F7D32}
.nf-col-heads{list-style:none;margin:0;padding:0}
.nf-col-heads li{padding:12px 0;border-bottom:1px solid #EDE7D8}
.nf-col-heads li:first-child{padding-top:2px}
.nf-col-heads a{display:block;text-decoration:none;color:#232019;font-weight:700;line-height:1.4;margin-bottom:4px}
.nf-headmeta{font-size:.82em;color:#9aa08e}
@media (max-width:900px){
  .nf-band{grid-template-columns:1fr}
  .nf-bbc{grid-template-columns:1fr;border-bottom:0}
  .nf-col-main{order:-1}
}
.nf-h1{font-size:1em;color:#9aa08e;font-weight:700;margin:10px 0 2px;letter-spacing:.04em}
/* NYT식 상단 존 v3 + 5열 카드 줄 (2026-08-20) */
.nf-bbc{grid-template-columns:3.2fr 3.2fr 4.6fr}
.nf-txt-t{display:block;text-decoration:none;color:#232019;font-weight:800;font-size:1.02em;line-height:1.35;margin-bottom:4px}
.nf-txt-t:hover{color:#2F7D32}
.nf-txt-d{color:#5A554C;font-size:.88em;line-height:1.5;margin:0 0 4px}
.nf-row5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:20px 0;border-bottom:1px solid #EDE7D8}
.nf-mini{display:block;text-decoration:none;color:#232019}
.nf-mini img,.nf-mini .nf-noimg{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:#EFEAD9;font-size:.95em}
.nf-mini-t{display:block;font-weight:700;font-size:.9em;line-height:1.35;margin:8px 0 4px}
.nf-mini:hover .nf-mini-t{color:#2F7D32}
@media (max-width:900px){.nf-row5{grid-template-columns:repeat(2,1fr)}}
/* NYT식 분류 목록 행 (2026-08-20) */
.nyt-list{list-style:none;margin:14px 0 0;padding:0}
.nyt-row{display:grid;grid-template-columns:1fr 180px;gap:22px;align-items:start;
  padding:20px 0;border-bottom:1px solid #EDE7D8}
.nyt-t{display:block;text-decoration:none;color:#232019;font-weight:800;font-size:1.15em;line-height:1.35;margin:2px 0 6px}
.nyt-t:hover{color:#2F7D32}
.nyt-d{color:#5A554C;font-size:.94em;line-height:1.55;margin:0}
.nyt-thumb img,.nyt-thumb .nf-noimg{width:120px;height:120px;aspect-ratio:1/1;object-fit:cover;border-radius:4px;display:block;font-size:.85em}
/* 전용 이미지가 없는 행 — 썸네일 칸 없이 글자가 전체 폭을 쓴다(2026-08-23) */
.nyt-row.no-thumb{grid-template-columns:1fr}
@media (max-width:720px){.nyt-row{grid-template-columns:1fr 92px}.nyt-row.no-thumb{grid-template-columns:1fr}.nyt-thumb img,.nyt-thumb .nf-noimg{width:92px;height:92px}}

/* P0 수정(코덱스 리뷰 2026-08-20): 스티키 단일 소유(탭만) · 포털 무동작 햄버거 제거 */
body.portal .fw-menu-toggle{display:none}
/* 1:1 대표 이미지 + 썸네일식 키워드 오버레이 (2026-08-20 사용자 확정) */
.nf-media{display:block;position:relative;overflow:hidden;border-radius:4px}
.nf-media img{display:block}
.nf-main .nf-media img,.nf-main .nf-media .nf-noimg{aspect-ratio:1/1}
.nf-kw{position:absolute;left:12px;right:12px;bottom:10px;color:#fff;font-weight:900;
  font-size:1.6em;line-height:1.22;letter-spacing:-.01em;word-break:keep-all;
  -webkit-text-stroke:6px rgba(22,20,14,.85);paint-order:stroke fill;
  text-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none}
.nf-mini .nf-kw{font-size:1.02em;-webkit-text-stroke:4px rgba(22,20,14,.85);left:8px;right:8px;bottom:7px}
.nyt-thumb .nf-kw{font-size:.92em;-webkit-text-stroke:4px rgba(22,20,14,.85);left:8px;right:8px;bottom:6px}
/* 헤더 로고 중앙·검색 우측 + 배너 높이 일치 + 홈 인라인 탭 (2026-08-20) */
.fw-header-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.fw-menu-toggle{justify-self:start}
.fw-logo{justify-self:center;grid-column:2}
.fw-search{justify-self:end;grid-column:3;width:min(360px,100%)}
body.portal .fw-header-in{grid-template-columns:1fr auto 1fr}
.nf-band-media{aspect-ratio:auto;min-height:280px}
.nf-band{align-items:stretch}
.nf-inline{border-top:1px solid #e4dfd3;margin:0 0 6px}
@media (max-width:900px){
  .fw-header-in{grid-template-columns:auto 1fr}
  .fw-logo{grid-column:1;justify-self:start}
  .fw-search{grid-column:2;width:100%}
  .nf-band-media{min-height:220px}
}
/* 네이버 뉴스식 분류 목록 — 좌 가로 썸네일 (2026-08-20) */
.nyt-row{grid-template-columns:176px 1fr;gap:18px;padding:16px 0}
.nyt-thumb img,.nyt-thumb .nf-noimg{width:176px;height:118px;aspect-ratio:3/2;object-fit:cover;border-radius:6px}
.nyt-t{font-size:1.08em;margin:0 0 5px}
.nyt-d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nyt-meta{margin:6px 0 0;color:#9aa08e;font-size:.85em}
.nyt-meta .nf-chip{margin-left:8px}
@media (max-width:720px){.nyt-row{grid-template-columns:120px 1fr}.nyt-thumb img,.nyt-thumb .nf-noimg{width:120px;height:80px}}
/* 아티클 목차 접힘 — 탭→제목→요약 우선 (2026-08-20) */
.fw-toc-fold{margin:6px 0 16px;border:1px solid #E7E1D2;border-radius:8px;padding:8px 14px;background:#FBF8F0}
.fw-toc-fold summary{cursor:pointer;font-weight:700;color:#4E7A3A;font-size:.92em}
.fw-toc-fold .fw-toc{border:0;padding:6px 0 0;margin:0;background:transparent}
/* 아티클 레이아웃 — 좌 메뉴·미니그래프 제거, 우측은 연결 문서만 (2026-08-20 사용자 확정) */
/* ★ 2026-08-23 사용자 지시 — 아티클에도 좌측 패널을 되살린다.
   그 분류에 무슨 글이 있는지 보여야 독자가 다음 글로 넘어간다(회유율 1.53 → 개선 목표).
   8/20 에 뺐던 이유(전 노드 목록이 HTML 의 65%)는 이미 해소됐다 —
   지금은 **현재 분류만** 펼치고 나머지는 분류 링크 한 줄이라 분량이 작다. */
body.article .fw-side.left{display:block}
body.article .fw-wrap{grid-template-columns:198px minmax(0,1fr) 256px}
body.article .fw-main{grid-column:2}
body.article .fw-side.right{grid-column:3}
/* ★ 2026-08-23 버그 수정 — 좌측 메뉴를 숨겼는데 .fw-main{grid-column:2} 가 그대로 남아
   본문이 우측 256px 칸으로 밀리고 왼쪽이 통째로 비어 있었다. 아티클에서는 1열로 되돌린다. */

body.article .fw-graphbox{display:none !important}
/* (제거 2026-08-23 — 뒤에 남아 3열 규칙을 덮고 있었다) */
body.article .fw-menu-toggle{display:none}
/* 5열 카드 정방형 강제 — 래퍼에 aspect 부여 (2026-08-20 최종 수정) */
.nf-row5 .nf-media{aspect-ratio:1/1;width:100%}
.nf-row5 .nf-media img,.nf-row5 .nf-media .nf-noimg{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
/* ★ 모바일 360px 실기 검증 수정 (2026-08-20) — 후행 규칙이 미디어쿼리를 덮던 문제 해결.
   이 블록은 파일 최하단에 두어 항상 마지막에 적용된다. */
@media (max-width:900px){
  .nf-bbc{grid-template-columns:1fr !important;gap:18px}
  .nf-band{grid-template-columns:1fr !important}
  .nf-band-media{min-height:0;aspect-ratio:16/9}
  .nf-band-panel{padding:18px 16px}
  .nf-band-title{font-size:1.18em;word-break:keep-all}
  .nf-band-desc{font-size:.9em}
  .nf-row5{grid-template-columns:repeat(2,1fr) !important}
  .nf-sections{grid-template-columns:1fr !important}
  .nf-recent{grid-template-columns:1fr}
  .nf-kw{font-size:1.05em;-webkit-text-stroke:4px rgba(22,20,14,.85)}
  /* 헤더: 로고 + 검색 2행 배치(검색창 잘림 방지) */
  .fw-header-in{grid-template-columns:1fr;row-gap:8px;padding:8px 12px}
  .fw-logo{grid-column:1;justify-self:start}
  .fw-search{grid-column:1;justify-self:stretch;width:100%}
  .fw-search-row{display:flex;gap:6px}
  .fw-search input{flex:1;min-width:0}
  body.portal .fw-wrap,body.article .fw-wrap{padding:0 12px}
  body.article .fw-wrap{grid-template-columns:1fr}
  body.article .fw-side.right{margin-top:18px}
}
@media (max-width:420px){
  .nf-row5{grid-template-columns:1fr !important}
  .nyt-row{grid-template-columns:96px 1fr;gap:12px}
  .nyt-thumb img,.nyt-thumb .nf-noimg{width:96px;height:96px;aspect-ratio:1/1}
  .nyt-t{font-size:1em}
}
/* 가로 넘침 전역 가드 (360px 실기 검증 — 2026-08-20) */
html,body{max-width:100%;overflow-x:hidden}
.fw-wrap,.fw-main,#fw-main-body{min-width:0;max-width:100%}
.fw-main img,#fw-main-body img{max-width:100%;height:auto}
/* ★ 2026-08-23 사용자 지시 — 본문 그림이 폭을 다 먹으면 글이 안 보이고 그림만 보인다.
   figure 를 좁게 가두고 가로 중앙 정렬한다. 안의 img 는 max-width:100% 라 따라 줄어든다
   (인라인 style 과 싸우지 않는 방식). 화면이 좁으면 화면 폭을 넘지 않는다. */
.fw-main figure,#fw-main-body figure{max-width:min(340px,100%);margin-left:auto;margin-right:auto;text-align:center}
.fw-main figure figcaption,#fw-main-body figure figcaption{font-size:.86em;color:var(--fw-muted,#8a8477);margin-top:6px;line-height:1.5}
/* 본문에 직접 놓인 그림(figure 없이)도 같은 상한 */
.fw-main > p > img,#fw-main-body > p > img{max-width:min(340px,100%);display:block;margin:0 auto}
.nf-band,.nf-bbc,.nf-row5,.nf-sections,.nf-media{min-width:0;max-width:100%}
.nf-band-panel{min-width:0}
.nf-main,.nf-mini,.nf-sub,.nyt-txt{min-width:0}
#fw-main-body table{display:block;overflow-x:auto;max-width:100%}
/* ★ 모바일 가로 넘침 진짜 원인 수정 (2026-08-20 실측):
   .fw-header-in 의 3열 그리드(1fr auto 1fr)가 모바일에서도 유지돼 최소 폭 ~550px 를 강제했다.
   (body.portal 선택자가 특이도상 미디어쿼리를 이겨 단일열 규칙이 무시됨.) 아래로 확정 무력화. */
@media (max-width:900px){
  .fw-header-in,
  body.portal .fw-header-in,
  body.article .fw-header-in{grid-template-columns:1fr !important;row-gap:8px}
  .fw-search{max-width:none !important;min-width:0 !important;flex:1 1 auto !important}
}
/* '다음에 읽을 글' 카드 — 회유율 개선(2026-08-20, GA4 사용자당 1.53 → 목표 2.0+) */
.rel-wrap{margin:2.4em 0 0;padding-top:1.4em;border-top:3px solid #232019}
.rel-h{font-size:1.15em;margin:0 0 14px;border:0;padding:0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{display:block;text-decoration:none;color:#232019}
.rel-card .nf-media{aspect-ratio:1/1;border-radius:6px}
.rel-card .nf-media img,.rel-card .nf-media .nf-noimg{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.rel-t{display:block;font-weight:700;font-size:.96em;line-height:1.35;margin:8px 0 4px}
.rel-card:hover .rel-t{color:#2F7D32}
.rel-d{display:block;color:#5A554C;font-size:.85em;line-height:1.5}
.rel-m{display:block;margin-top:5px;font-size:.78em;color:#9aa08e}
@media (max-width:900px){.rel-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:420px){.rel-grid{grid-template-columns:1fr}}
/* 과업 허브 + breadcrumb (2026-08-20) */
.fw-bc{font-size:.86em;color:#7A8471;margin:0 0 10px}
.fw-bc a{color:#4E7A3A;text-decoration:none} .fw-bc a:hover{text-decoration:underline}
.bc-sep{margin:0 7px;color:#c3cbb6} .bc-cur{color:#9aa08e}
.hub-start h2{font-size:1.05em;border-bottom:2px solid #2F7D32;padding-bottom:6px;margin:18px 0 10px}
.hub-first{background:#FBF8F0;border-radius:8px;padding:14px !important}
.hub-groups{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;margin:22px 0 8px}
.hub-g h3{display:flex;align-items:baseline;gap:8px;font-size:1em;margin:0 0 6px;
  border-bottom:1px solid #E7E1D2;padding-bottom:5px}
.hub-g .cnt{font-size:.78em;color:#9aa08e;font-weight:600}
.hub-more{margin-left:auto;font-size:.76em;color:#7A8471 !important;text-decoration:none}
.hub-g .nyt-row{padding:9px 0;grid-template-columns:74px 1fr;gap:12px}
.hub-g .nyt-thumb img,.hub-g .nyt-thumb .nf-noimg{width:74px;height:74px;aspect-ratio:1/1}
.hub-g .nyt-t{font-size:.95em;margin:0 0 3px}
.hub-g .nyt-d{display:none}
.hub-g .nyt-meta{display:none}
@media (max-width:900px){.hub-groups{grid-template-columns:1fr}}

/* 리드 문단(첫 ## 앞 본문) — 답 먼저(AEO A-1). 2026-08-20 컴파일러 유실 수정과 함께 신설 */
.fw-lead{margin:0 0 1.1em}
.fw-lead p{font-size:1.06em;line-height:1.85}
.fw-lead p:first-child{font-weight:500}


/* ══════════════════════════════════════════════════════════════════
   ★ 그림 비중 축소 (사용자 지시 2026-08-23)
   "그림이 항상 자리 많이 차지 하지 않게" — 글이 주인공이고 그림은 거드는 자리.
   목록·카드의 그림을 작게 고정하고, 그림이 없는 항목은 글자가 폭을 다 쓴다.
   ══════════════════════════════════════════════════════════════════ */

/* 히어로 — 그림 칸을 340px → 200px 로 */
.nf-hero{grid-template-columns:minmax(140px,200px) 1fr;gap:16px}

/* 상단 큰 기사 2편 — 정사각/16:10 대신 납작하게, 높이 상한 */
.nf-main .nf-media img,.nf-main img{aspect-ratio:16/9;max-height:190px;object-fit:cover}
.nf-sub img{aspect-ratio:16/9;max-height:120px;object-fit:cover}

/* 5열 균일 카드 — 정사각 대신 납작하게 */
/* (2026-08-24 제거 — 1:1 표준과 모순) */

/* 관련 글 카드 */
.rel-card .nf-media{aspect-ratio:16/9;max-height:110px}

/* 분류 허브 카드 */
.nf-card img,.nf-cathero img{aspect-ratio:16/9;max-height:150px;object-fit:cover}

/* 목록 썸네일 — 120 → 96px */
.nyt-thumb img{width:96px;height:96px}
@media (max-width:720px){.nyt-row{grid-template-columns:1fr 76px}.nyt-thumb img{width:76px;height:76px}}

/* 본문 그림 — 이미 340px 상한. 캡션이 그림보다 커 보이지 않게 */
.fw-main figure,#fw-main-body figure{max-width:min(320px,100%)}


/* ══════════════════════════════════════════════════════════════
   ★ 아티클 3열 폭 (사용자 지시 2026-08-23)
   좌측 메뉴는 전체의 20% 를 넘지 않고, 가운데 본문이 60% 이상을 갖는다.
   모바일에서는 **본문이 항상 먼저** 보이고 메뉴는 본문 뒤로 내려간다.
   이 블록은 파일 맨 끝에 두어 앞선 규칙을 확실히 덮는다.
   ══════════════════════════════════════════════════════════════ */
body.article .fw-wrap{grid-template-columns:minmax(0,20%) minmax(0,60%) minmax(0,20%)}
body.article .fw-side.left{grid-column:1;grid-row:1;max-width:100%;overflow-wrap:break-word}
body.article .fw-main{grid-column:2;grid-row:1}
body.article .fw-side.right{grid-column:3;grid-row:1}

/* 좌측 메뉴 글자 — 좁은 칸에서 넘치지 않게 */
body.article .fw-side.left .fw-menu{font-size:.86em;line-height:1.45}
body.article .fw-side.left a{overflow-wrap:anywhere}

@media (max-width:900px){
  /* 태블릿 — 우측(연결 문서)을 아래로 내리고 본문 폭을 넓힌다 */
  body.article .fw-wrap{grid-template-columns:minmax(0,22%) minmax(0,78%)}
  body.article .fw-side.right{grid-column:1 / -1;grid-row:2}
}
@media (max-width:720px){
  /* 모바일 — 한 줄. **본문이 맨 위**, 그다음 연결 문서, 메뉴는 맨 아래 */
  body.article .fw-wrap{grid-template-columns:minmax(0,1fr)}
  body.article .fw-main{grid-column:1;grid-row:1}
  body.article .fw-side.right{grid-column:1;grid-row:2}
  body.article .fw-side.left{grid-column:1;grid-row:3;border-top:1px solid #EDE7D8;padding-top:14px}
}


/* ══════════════════════════════════════════════════════════════
   ★ 가운데 본문 단독 스크롤 (사용자 지시 2026-08-23)
   좌측 메뉴처럼 본문도 제 칸 안에서 스크롤한다. 세 칸이 각자 스크롤하므로
   읽는 동안 좌우 패널이 사라지지 않는다.
   **모바일(720px 이하)에서는 끄고 페이지 전체 스크롤로 되돌린다** —
   좁은 화면에서 칸 안 스크롤은 손가락 조작을 방해한다.
   ══════════════════════════════════════════════════════════════ */
body.article .fw-main{
  position:sticky; top:64px;
  max-height:calc(100vh - 64px);
  overflow-y:auto; overscroll-behavior:auto;
  padding-right:10px;
}
/* 스크롤바를 얇고 눈에 덜 띄게 */
body.article .fw-main::-webkit-scrollbar{width:9px}
body.article .fw-main::-webkit-scrollbar-thumb{background:#DCD5C4;border-radius:6px}
body.article .fw-main::-webkit-scrollbar-track{background:transparent}
body.article .fw-main{scrollbar-width:thin;scrollbar-color:#DCD5C4 transparent}

/* 우측도 길면 스스로 스크롤 */
body.article .fw-side.right{max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:auto}

@media (max-width:720px){
  /* 모바일 — 칸 안 스크롤을 끄고 본문이 페이지와 함께 흐르게 */
  body.article .fw-main,
  body.article .fw-side.right,
  body.article .fw-side.left{position:static;max-height:none;overflow:visible;padding-right:0}
}


/* ══════════════════════════════════════════════════════════════
   ★ 3열 독립 스크롤 확정 (사용자 지시 2026-08-23)
   1) 상단 로고 헤더와 분류 탭은 **항상 화면에 붙어 있다**
   2) 좌·중앙·우 세 패널이 **각자 세로 스크롤**한다
   3) 본문 그림은 본문 폭의 **40%** 로 가운데 맞춤
   4) 모바일에서는 전부 풀고 본문이 맨 위에서 페이지와 함께 흐른다
   ══════════════════════════════════════════════════════════════ */

/* ① 헤더 + 탭 고정 — 탭은 헤더 높이(약 92px)만큼 내려 붙는다 */
.fw-header{position:sticky;top:0;z-index:50}
.fw-cattabs{position:sticky;top:92px;z-index:45;background:#fff;border-bottom:1px solid #e4dfd3}

/* ② 세 패널 독립 스크롤 — 고정 영역(헤더+탭 ≈ 140px) 아래로 화면을 채운다 */
body.article .fw-side.left,
body.article .fw-main,
body.article .fw-side.right{
  position:sticky; top:140px;
  max-height:calc(100vh - 150px);
  overflow-y:auto; overscroll-behavior:auto;
}
body.article .fw-main{padding-right:12px}
body.article .fw-side.left::-webkit-scrollbar,
body.article .fw-main::-webkit-scrollbar,
body.article .fw-side.right::-webkit-scrollbar{width:9px}
body.article .fw-side.left::-webkit-scrollbar-thumb,
body.article .fw-main::-webkit-scrollbar-thumb,
body.article .fw-side.right::-webkit-scrollbar-thumb{background:#DCD5C4;border-radius:6px}
body.article .fw-side.left,body.article .fw-main,body.article .fw-side.right{
  scrollbar-width:thin;scrollbar-color:#DCD5C4 transparent}

/* ③ 본문 그림 — 본문 폭의 40%, 가운데 맞춤 */
body.article .fw-main figure,
body.article #fw-main-body figure{max-width:40%;margin-left:auto;margin-right:auto;text-align:center}
body.article .fw-main figure img,
body.article #fw-main-body figure img{width:100%;height:auto}

/* ④ 모바일 — 고정·독립 스크롤 해제, 본문이 맨 위 */
@media (max-width:720px){
  .fw-cattabs{top:0}
  body.article .fw-side.left,
  body.article .fw-main,
  body.article .fw-side.right{position:static;max-height:none;overflow:visible;padding-right:0}
  body.article .fw-main figure,
  body.article #fw-main-body figure{max-width:min(320px,100%)}
}

/* 좌측 패널 머리 — 지금 보고 있는 분류 이름(2026-08-23) */
.fw-menu-head{font-weight:700;font-size:.95em;color:#232019;padding:2px 0 8px;
  margin-bottom:6px;border-bottom:1px solid #EDE7D8}
.fw-menu-head .cnt{color:#8a8477;font-weight:500;font-size:.9em}

/* ── 좌측 패널 항목 — 대표 이미지 + 제목 + 요약 (2026-08-23 사용자 지시) ──
   이미지 폭은 화면의 7% 를 넘지 않는다. 이미지가 없는 글은 글자만 전체 폭을 쓴다. */
.fw-menu .fw-mi{list-style:none;margin:0;padding:0}
.fw-menu .fw-mi > a{display:flex;gap:8px;align-items:flex-start;padding:7px 0;
  border-bottom:1px dotted #EDE7D8;text-decoration:none}
.fw-mi-th{width:7vw;max-width:60px;min-width:38px;aspect-ratio:1/1;object-fit:cover;
  border-radius:4px;flex:0 0 auto;background:#EFEAD9}
.fw-mi-tx{min-width:0;display:block}
.fw-mi-t{display:block;font-size:.9em;line-height:1.35;color:#232019;font-weight:600;
  overflow-wrap:anywhere}
.fw-mi-d{display:block;font-size:.8em;line-height:1.4;color:#8a8477;margin-top:3px}
.fw-menu .fw-mi > a.cur .fw-mi-t{color:#2F7D32}
.fw-menu .fw-mi > a:hover .fw-mi-t{color:#2F7D32}
@media (max-width:720px){.fw-mi-th{width:56px;max-width:56px}}

/* ══ 상단 고정 막대 실측(2026-08-23) ══════════════════════════════
   헤더·분류탭 높이를 손으로 박아 두었더니 실제 높이와 어긋나
   좌·우 패널 머리가 탭에 가려졌다. 값은 스크립트가 재어 넣는다. */
:root{--fw-hdr:72px; --fw-tabs:53px; --fw-bar:calc(var(--fw-hdr) + var(--fw-tabs))}
.fw-cattabs{top:var(--fw-hdr)}
body.article .fw-side.left,
body.article .fw-main,
body.article .fw-side.right{
  top:calc(var(--fw-bar) + 10px);
  max-height:calc(100vh - var(--fw-bar) - 20px);
  scroll-padding-top:12px}
body.article .fw-main{padding-top:4px}

/* ══ 대표 이미지는 16:9 (2026-08-23 사용자 지시) ══════════════════
   정사각형은 세로를 너무 먹는다. 목록·카드에서는 가로형으로. */
.fw-mi-th{aspect-ratio:16/9;width:7vw;max-width:76px;min-width:52px}
.nyt-thumb{aspect-ratio:16/9;width:120px;height:auto}
@media (max-width:720px){
  .fw-cattabs{top:0}
  body.article .fw-side.left, body.article .fw-main, body.article .fw-side.right{
    top:auto;max-height:none}
  .fw-mi-th{width:84px;max-width:84px}}

/* ══ 홈도 좌측 분류 패널을 쓴다(2026-08-23 사용자 지시) ══════════
   종전에는 body.portal 에서 좌·우를 통째로 숨겨 홈에만 패널이 없었다.
   본문 폭 비율은 아티클과 같게 유지한다. */
body.portal .fw-side.left{display:block !important}
body.portal .fw-wrap{display:grid;gap:26px;max-width:1400px;grid-template-columns:minmax(0,20%) minmax(0,80%)}
body.portal .fw-main{grid-column:2}
body.portal .fw-side.left{position:sticky;top:calc(var(--fw-bar) + 10px);
  max-height:calc(100vh - var(--fw-bar) - 20px);overflow-y:auto;overscroll-behavior:auto}
/* 접기 버튼이 사라졌으므로 옛 접힘 규칙도 무력화한다 */
body.menu-collapsed .fw-side.left{display:block}
body.menu-collapsed .fw-wrap{grid-template-columns:minmax(0,20%) minmax(0,60%) minmax(0,20%)}
body.menu-collapsed .fw-main{grid-column:2}
body.menu-collapsed .fw-side.right{grid-column:3}
@media (max-width:900px){
  body.portal .fw-wrap{grid-template-columns:1fr}
  body.portal .fw-main{grid-column:1;grid-row:1}
  body.portal .fw-side.left{grid-column:1;grid-row:2;position:static;max-height:none;overflow:visible}}

/* ══ 그림 비율 표준(2026-08-23 사용자 확정) ═══════════════════════
   아티클 그림 = 1:1  → 그 기사의 썸네일
   카테고리 대표 이미지 = 16:9 → 그 분류의 썸네일
   앞선 규칙이 아티클 썸네일까지 16:9로 자르고 있어 되돌린다. */
.fw-mi-th{aspect-ratio:1/1;width:auto;height:52px;max-width:52px;min-width:52px}
.nyt-thumb{aspect-ratio:1/1;width:96px;height:96px}
.nyt-thumb img{aspect-ratio:1/1;width:96px;height:96px;object-fit:cover}
.nf-main img,.nf-mini img{aspect-ratio:1/1;object-fit:cover}
/* 분류 대표(16:9) — 홈 분류 카드·바둑판 전용(분류 본문 히어로 금지) */
.cat-hero img,.nf-cat img,.fw-cathead img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}
@media (max-width:720px){
  .fw-mi-th{height:48px;max-width:48px;min-width:48px}
  .nyt-thumb,.nyt-thumb img{width:76px;height:76px}}

@media (max-width:900px){body.portal .fw-wrap{display:block}}

/* ══ 오늘의 영상 밴드 — 높이는 유튜브 썸네일이 정한다(2026-08-23) ══
   종전에는 우측 글·버튼이 썸네일보다 길어 아래에 남색 여백이 생겼다.
   패널을 절대배치로 띄워 행 높이 계산에서 빼면, 밴드 높이 = 16:9 썸네일 높이. */
.nf-band{display:block;position:relative;background:#1B2A4A;overflow:hidden}
.nf-band-media{width:40%;aspect-ratio:16/9 !important;min-height:0 !important;height:auto}
.nf-band-panel{position:absolute;top:0;right:0;bottom:0;left:40%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(14px,2vw,28px) clamp(16px,2.2vw,32px);overflow:hidden}
.nf-band-title{font-size:clamp(1.05em,1.5vw,1.5em);margin:0 0 8px}
.nf-band-desc{-webkit-line-clamp:3;line-clamp:3;margin:0 0 12px}
.nf-band-panel .nf-hero-cta{padding:8px 16px;font-size:.92em}
@media (max-width:900px){
  .nf-band-media{width:100%}
  .nf-band-panel{position:static;left:auto;padding:18px 16px}
  .nf-band-desc{-webkit-line-clamp:4;line-clamp:4}}

/* 밴드 패널 내부 — 잘린 글이 버튼에 겹치지 않게 각 조각의 몫을 정한다 */
.nf-band-kicker{flex:none}
.nf-band-title{flex:none;font-size:clamp(1em,1.35vw,1.35em);line-height:1.28}
.nf-band-desc{flex:0 1 auto;min-height:0;overflow:hidden;
  -webkit-line-clamp:2;line-clamp:2;margin:0 0 14px}
.nf-band-panel .nf-hero-cta,.nf-band-cta,.nf-band-panel .nf-btns{flex:none}
@media (max-width:900px){.nf-band-desc{-webkit-line-clamp:4;line-clamp:4;overflow:visible}}

/* ══ 목록 행 — 대표 이미지(1:1) 왼쪽, 제목·요약 오른쪽 (2026-08-23) ══
   과업 그룹에서 요약을 숨기고 있었고, 이미지 없는 행이 좁은 썸네일 칸을
   그대로 물려받아 제목이 세로로 찌그러졌다. 둘 다 바로잡는다. */
.nyt-row{grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:start}
.nyt-row.no-thumb{grid-template-columns:minmax(0,1fr) !important}
.nyt-thumb,.nyt-thumb img{width:96px;height:96px;aspect-ratio:1/1;object-fit:cover;border-radius:5px}
.nyt-txt{min-width:0}
.nyt-t{display:block;line-height:1.35;overflow-wrap:anywhere}
.nyt-d{display:-webkit-box !important;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;margin:4px 0 0;font-size:.9em;color:#6b6559}
.hub-g .nyt-row{grid-template-columns:74px minmax(0,1fr);gap:12px;padding:10px 0}
.hub-g .nyt-row.no-thumb{grid-template-columns:minmax(0,1fr) !important}
.hub-g .nyt-thumb,.hub-g .nyt-thumb img{width:74px;height:74px}
.hub-g .nyt-d{display:-webkit-box !important;-webkit-line-clamp:2;line-clamp:2;font-size:.86em}
@media (max-width:720px){
  .nyt-row{grid-template-columns:76px minmax(0,1fr) !important;gap:10px}
  .nyt-row.no-thumb{grid-template-columns:minmax(0,1fr) !important}
  .nyt-thumb,.nyt-thumb img{width:76px;height:76px}}

/* ══ 대표 이미지가 없는 글의 자리 — 키워드 타일(2026-08-23 사용자 지시) ══
   칸을 비우면 줄이 어긋난다. 같은 크기 타일에 그 글의 키워드만 적는다. */
.nyt-ph{display:flex;align-items:center;justify-content:center;text-align:center;
  width:96px;height:96px;box-sizing:border-box;padding:6px;border-radius:5px;
  background:#F4F0E4;border:1px solid #E2DBC8;color:#6E6754;
  font-size:12px;font-weight:700;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
.hub-g .nyt-ph{width:74px;height:74px;font-size:11px}
.nyt-row.no-thumb{grid-template-columns:96px minmax(0,1fr) !important}
@media (max-width:720px){.nyt-ph{width:76px;height:76px;font-size:11px}}

/* 좌측 패널 썸네일 — 패널 폭(전체 20%)의 3분의 1, 곧 화면의 약 7% (2026-08-23) */
.fw-mi-th{width:7vw;max-width:96px;min-width:64px;height:auto;aspect-ratio:1/1}
.fw-menu .fw-mi > a{gap:10px}
@media (max-width:900px){.fw-mi-th{width:84px;max-width:84px;min-width:84px}}

.fw-mi-ph{display:flex;align-items:center;justify-content:center;text-align:center;
  box-sizing:border-box;padding:5px;border-radius:4px;background:#F4F0E4;
  border:1px solid #E2DBC8;color:#6E6754;font-size:11px;font-weight:700;
  line-height:1.22;word-break:keep-all;overflow-wrap:anywhere}

/* ══ 목록 행 썸네일 = 행 폭의 30% (2026-08-23 사용자 지시) ══════════
   고정 px 로는 좁은 2열 그룹에서 그림이 너무 작아 무엇인지 알아볼 수 없다.
   비율로 잡아 어느 폭에서나 식별 가능한 크기를 지킨다. */
.nyt-row,.hub-g .nyt-row{grid-template-columns:30% minmax(0,1fr) !important;gap:14px}
.nyt-thumb{width:100%;height:auto;aspect-ratio:1/1;display:block}
.nyt-thumb img,.hub-g .nyt-thumb img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}
.nyt-ph,.hub-g .nyt-ph{width:100%;height:100%;aspect-ratio:1/1;font-size:clamp(11px,1vw,14px)}
.hub-g .nyt-thumb{width:100%;height:auto}
@media (max-width:720px){
  .nyt-row,.hub-g .nyt-row{grid-template-columns:30% minmax(0,1fr) !important;gap:10px}}

/* 썸네일 = 행 폭의 30%, 다만 넓은 1열에서는 200px 상한 —
   좁은 곳은 식별성, 넓은 곳은 글의 숨 쉴 자리(2026-08-23) */
.nyt-row,.hub-g .nyt-row{grid-template-columns:minmax(0,30%) minmax(0,1fr) !important}
.nyt-thumb{max-width:200px}
.nyt-row > .nyt-txt{align-self:start}

/* ══ 홈 상단 존 — 빈 공백을 남기지 않는다(2026-08-23 사용자 지시) ══════
   우측 텍스트 기사를 4→3 으로 줄이고, 좌측 큰 기사가 열 높이를 채우게 한다.
   그림이 없는 기사는 요약을 더 보여 주어 스스로 높이를 만든다. */
.nf-bbc{align-items:stretch}
.nf-main{display:flex;flex-direction:column;height:100%}
.nf-main-desc{flex:1 1 auto;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.nf-main.no-img .nf-main-desc{-webkit-line-clamp:9;line-clamp:9}
.nf-main.no-img .nf-main-title{font-size:1.28em;line-height:1.3}
.nf-col-heads{align-self:stretch}
.nf-col-heads li{display:flex;flex-direction:column;justify-content:flex-start}
@media (max-width:900px){
  .nf-main,.nf-main-desc{height:auto}
  .nf-main-desc,.nf-main.no-img .nf-main-desc{-webkit-line-clamp:3;line-clamp:3}}

/* 홈 큰 기사 — 그림이 없으면 같은 크기의 키워드 타일로 자리를 채운다 */
.nf-main-ph{display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;aspect-ratio:16/9;border-radius:6px;background:#F4F0E4;
  border:1px solid #E2DBC8;color:#6E6754;font-size:clamp(15px,1.6vw,22px);
  font-weight:800;line-height:1.25;word-break:keep-all;margin-bottom:10px}
.nf-main-desc{flex:0 0 auto}
.nf-main{justify-content:flex-start}

/* 큰 기사 안의 칩·날짜가 열 폭만큼 늘어나지 않게 */
.nf-main > .nf-chip,.nf-main > .nf-when{align-self:flex-start}
.nf-main .nf-chip{display:inline-block;width:auto}

/* ══ 오늘의 영상 밴드 — 설명 2줄 보장·버튼 축소·아래 배치(2026-08-23 사용자 지시) ══
   종전에는 설명이 flex 수축에 밀려 둘째 줄이 반쯤 잘렸다.
   각 조각에 고정 몫을 주고 남는 공간은 버튼 위 여백으로 보낸다. */
.nf-band-panel{justify-content:flex-start;padding-top:clamp(12px,1.6vw,22px)}
.nf-band-kicker{margin-bottom:6px}
.nf-band-title{flex:none;font-size:clamp(.98em,1.25vw,1.28em);line-height:1.3;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;margin:0 0 8px}
.nf-band-desc{flex:none;display:-webkit-box !important;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;overflow:hidden;
  min-height:calc(1.55em * 2);margin:0}
.nf-band-panel .nf-hero-ctas,.nf-band-panel p:last-child{margin-top:auto;margin-bottom:0}
.nf-band-panel .nf-hero-cta{padding:5px 14px;font-size:.85em;line-height:1.4}
@media (max-width:900px){
  .nf-band-panel{padding:16px}
  .nf-band-title,.nf-band-desc{-webkit-line-clamp:3;line-clamp:3}
  .nf-band-panel .nf-hero-ctas{margin-top:12px}}

/* ══ 홈 큰 기사 미디어 — 칸은 16:9 높이 유지, 1:1 그림은 높이에 맞춰 가운데
   (2026-08-23 사용자 지시: 아티클 그림이 1:1이라 전폭으로 놓으면 세로가 너무 큼) ══ */
.nf-main .nf-media{display:flex;justify-content:center;align-items:center;
  width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:6px;
  background:#F1EDE0;margin-bottom:10px;position:relative}
.nf-main .nf-media img{height:100%;width:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:0}
/* 키워드 타일(그림 미도착)은 종전대로 칸 전체 */
.nf-main .nf-main-ph{margin-bottom:10px}

/* ══ 홈도 패널별 독립 스크롤(2026-08-23 사용자 지시) — 아티클과 동일 규칙 ══ */
body.portal .fw-side.left,
body.portal .fw-main{
  position:sticky;top:calc(var(--fw-bar) + 10px);
  max-height:calc(100vh - var(--fw-bar) - 20px);
  overflow-y:auto;overscroll-behavior:auto;align-self:start}
body.portal .fw-main{padding-right:6px}
@media (max-width:900px){
  body.portal .fw-side.left,body.portal .fw-main{
    position:static;max-height:none;overflow:visible;padding-right:0}}

/* 목록 설명 — 그림(최대 200px) 옆 공백을 채우는 만큼 줄 수 확대(2026-08-23) */
.nyt-d{-webkit-line-clamp:5 !important;line-clamp:5 !important;font-size:.92em;line-height:1.6}
.hub-g .nyt-d{-webkit-line-clamp:3 !important;line-clamp:3 !important}
@media (max-width:720px){.nyt-d{-webkit-line-clamp:3 !important;line-clamp:3 !important}}

/* ══ 최소 글씨 크기 — 고령 독자 기준(2026-08-23 사용자 확정) ══════════
   Word 11pt ≈ 15px 를 사이트 전역 하한으로 한다. 일반보다 한 단계 크게. */
body{font-size:17px}
/* 위에서 11~14px 로 지정된 보조 텍스트 전부 15px 이상으로 상향 */
.fw-meta,.nf-when,.nyt-meta,.nf-chip,.nf-chip.sm,.nf-headmeta,
.fw-mi-t,.fw-mi-d,.fw-mi-ph,.nyt-ph,.hub-g .nyt-ph,
.fw-menu-head,.fw-menu-head .cnt,.fw-artdate,.fw-artdate span,
.fw-toc,.fw-toc a,.fw-src,.fw-menu a,.fw-menu li,
.nf-txt-d,.nf-band-kicker,.fw-cattabs a{font-size:15px !important}
.nyt-d,.fw-mi-d,.nf-band-desc,.nf-main-desc{font-size:15.5px !important;line-height:1.6}
.nyt-t,.nf-txt-t{font-size:17px !important}
.fw-mi-t{font-size:15.5px !important;line-height:1.4}
/* 본문은 body 상속(17px) — 표·인용도 하한 보장 */
.fw-main table,.fw-original,.fw-collapse{font-size:15.5px !important}
@media (max-width:720px){body{font-size:16.5px}}

/* ══ 본문 최소 12pt(16px) — 2026-08-23 사용자 확정. 좌측 메뉴 패널은 현행 유지 ══ */
.fw-main{font-size:17px}
.fw-main p,.fw-main li,.fw-main td,.fw-main th,
.fw-main .fw-original,.fw-main .fw-collapse,.fw-main table{font-size:16px !important}
.fw-main .fw-lead{font-size:17px !important}
.nyt-d{font-size:16px !important}
.nyt-t{font-size:17.5px !important}
.fw-main .fw-meta,.fw-main .nyt-meta,.fw-main .nf-when,.fw-main .nf-chip,
.fw-artdate,.fw-artdate span{font-size:16px !important}
.fw-main .fw-src,.fw-main .fw-q,.fw-main .fw-a{font-size:16px !important}
/* 좌측 패널(.fw-side.left)은 위 규칙에 안 걸린다 — 15~15.5px 현행 유지 */

/* ══ 우측 엣지 패널 — 연결 이유 한 줄 위, 제목 아래. 글씨 상향(2026-08-23) ══ */
.fw-edges .edge-list{list-style:none;margin:0;padding:0}
.fw-edges .edge-list li{margin:0 0 14px;padding-bottom:12px;border-bottom:1px dotted #EDE7D8}
.fw-edges .rel-why{display:block;font-size:14px;color:#8a8477;margin-bottom:4px;line-height:1.4}
.fw-edges .edge-list a{font-size:16px;font-weight:600;line-height:1.45;color:#1a5c9e;
  display:block;overflow-wrap:anywhere}
.fw-side.right,.fw-side.right a,.fw-side.right li{font-size:16px}
.fw-side.right .fw-side-title{font-size:16px;font-weight:700}

/* 우측 엣지 패널 가독성 — 제목 굵게·줄간격 1.5(2026-08-23) */
.fw-edges .edge-list a{font-weight:700;line-height:1.5;color:#232019}
.fw-edges .edge-list a:hover{color:#2F7D32}
.fw-edges .rel-why{line-height:1.5;font-size:14.5px;margin-bottom:5px}
.fw-side.right,.fw-side.right li{line-height:1.5}
.fw-edges .edge-list li{margin-bottom:16px;padding-bottom:14px}

/* ══ 본문 그림 = 본문 폭의 60~80%·가로 중앙(2026-08-23 사용자 확정) ══
   인포그래픽 내부 글씨가 읽혀야 한다. 종전 40% 규칙을 대체한다. */
body.article .fw-main figure{max-width:75%;margin-left:auto;margin-right:auto;text-align:center}
body.article .fw-main figure img{width:100%;height:auto}
body.article .fw-main figure figcaption{font-size:15px;color:#8a8477;line-height:1.5;margin-top:6px}
@media (max-width:720px){body.article .fw-main figure{max-width:100%}}

/* 엣지 방향 표시 — 화살표가 눈에 들어오게 */
.fw-edges .rel-why{color:#2F7D32;font-weight:600;letter-spacing:.01em}

/* 본문 그림·유튜브 임베드 = 75% 가로 중앙 — 컴파일러가 심은 인라인 margin(1.4em 0)이
   좌우를 0으로 만들어 왼쪽에 붙던 것을 !important 로 이긴다(2026-08-23) */
body.article .fw-main figure{
  max-width:75% !important;margin-left:auto !important;margin-right:auto !important}
.zz-dead-embed{
  display:block;max-width:75%;margin:1.2em auto}
body.article .fw-main .fw-ytfacade img{width:100%;height:auto}
@media (max-width:720px){
  body.article .fw-main figure{max-width:100% !important}
  body.article .fw-main .fw-ytfacade,
  .zz-dead-embed{max-width:100%}}

/* 썸네일 칸 = min(30%, 200px) — 상한 때문에 그림과 글 사이가 벌어지던 것 봉합(2026-08-23) */
.nyt-row,.hub-g .nyt-row{grid-template-columns:min(30%,200px) minmax(0,1fr) !important;gap:16px}
.nyt-thumb{max-width:none;width:100%}
@media (max-width:720px){
  .nyt-row,.hub-g .nyt-row{grid-template-columns:min(30%,110px) minmax(0,1fr) !important;gap:10px}}

/* 본문 유튜브 임베드 래퍼(클래스 없는 인라인 div) — 75%·가로 중앙(2026-08-23) */
.zz-dead-embed{
  max-width:75% !important;margin:1.2em auto !important}
@media (max-width:720px){
  .zz-dead-embed{max-width:100% !important}}

/* ★ 긴급 수정(2026-08-23) — 유튜브 임베드 75% 축소 시 썸네일 잘림.
   원인: 래퍼의 padding-bottom:56.25%(인라인)는 부모 폭 기준이라, 폭만 75%로
   줄이면 상자가 4:3으로 길어져 16:9 썸네일이 크롭된다.
   해법: 패딩 트릭을 끄고 aspect-ratio 로 상자 자체를 16:9로 고정 — 전부 보인다. */
.zz-dead-embed{
  padding-bottom:0 !important;height:auto !important;
  aspect-ratio:16/9;max-width:75% !important;margin:1.2em auto !important}
.zz-dead-embed{
  position:static !important;width:100% !important;height:100% !important;display:block}
@media (max-width:720px){
  .zz-dead-embed{max-width:100% !important}}

/* 유튜브 임베드 캡션 — 임베드 바로 다음 문단은 가운데(2026-08-23) */
body.article .fw-main div[style*="aspect-ratio:16/9"] + p{
  text-align:center;color:#6b6559;font-size:15px}

/* 파사드 재생 버튼 = 유튜브 공식 느낌의 빨간 둥근 사각 + 흰 삼각(2026-08-23 사용자 지시) */
.fw-ytfacade .nf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border-radius:12px;background:#FF0000;
  box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .15s}
.fw-ytfacade .nf-play::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-38%,-50%);border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff}
.fw-ytfacade .fw-ytplay:hover .nf-play{transform:translate(-50%,-50%) scale(1.08);background:#e60000}

/* 대표 이미지 우하단 수정일 칩 — HTML 오버레이(2026-08-23 사용자 제안) */
.nf-media{position:relative;display:block}
.nf-imgdate{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:10px;
  background:rgba(20,18,12,.62);color:#fff;font-size:13px;font-weight:600;
  letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* 하단 「다음 한 걸음」 — 1개 카드 가로형(2026-08-23 역할 분리) */
.rel-grid.one{grid-template-columns:1fr !important}
.rel-card.rel-one{display:grid;grid-template-columns:min(30%,200px) minmax(0,1fr);gap:16px;
  align-items:center;padding:14px;border:1px solid #E7E1D2;border-radius:10px;background:#FCFAF4}
.rel-card.rel-one .nf-media{margin:0}
.rel-card.rel-one .rel-why{display:block;color:#2F7D32;font-weight:700;font-size:15px;margin-bottom:4px}
.rel-card.rel-one .rel-t{font-size:18px;font-weight:700;line-height:1.4}
.rel-card.rel-one .rel-d{display:block;margin-top:4px;color:#6b6559;font-size:15.5px;line-height:1.55}
.rel-more{font-size:14.5px;color:#8a8477;margin:8px 2px 0}
@media (max-width:720px){.rel-card.rel-one{grid-template-columns:96px minmax(0,1fr);gap:10px}}

/* 패널 바닥에서 바깥 페이지(사이트 푸터)로 스크롤이 이어지게 — 법적 고지 도달 보장(2026-08-23) */

/* 의견 상자 앞 유튜브 채널 배너 — 작은 16:9 느낌 카드(2026-08-24 사용자 제안) */
.fw-yt-banner{display:flex;align-items:center;gap:12px;max-width:340px;
  padding:12px 16px;margin:20px 0 10px;border:1px solid #E2DBC8;border-radius:10px;
  background:#FCFAF4;text-decoration:none;color:#232019}
.fw-yt-banner:hover{border-color:#FF0000;background:#FFF8F6}
.fw-yt-banner img{border-radius:6px;flex:none}
.ytb-play{flex:none;width:40px;height:28px;border-radius:8px;background:#FF0000;position:relative}
.ytb-play::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}
.ytb-t{font-size:15px;line-height:1.35}
.ytb-t small{color:#8a8477;font-size:13px}

/* 유튜브 채널 링크 — 아이콘형으로 축소(2026-08-24 사용자 확정): 로고+빨간 플레이만 */
.fw-yt-banner{max-width:none;width:fit-content;padding:8px 12px;gap:9px;margin:18px 0 8px}
.fw-yt-banner .ytb-t{display:none}
.ytb-play{width:36px;height:25px}

/* ══ 유튜브 카드 + 의견 상자 = 한 행(2026-08-24 사용자 확정) ══════════
   왼쪽 = 16:9 비율 링크 카드(좁게) · 오른쪽 = 의견 상자(글씨 한 단계 작게) */
.fw-cta-row{display:flex;gap:14px;align-items:stretch;margin:22px 0 10px}
.fw-cta-row .fw-yt-banner{flex:0 0 210px;aspect-ratio:16/9;margin:0;
  flex-direction:column;justify-content:center;text-align:center;gap:7px;padding:10px}
.fw-cta-row .fw-yt-banner .ytb-t{display:block;font-size:14px;line-height:1.3}
.fw-cta-row .fw-yt-banner .ytb-t small{font-size:12.5px}
.fw-cta-row .fw-comment-cta{flex:1;margin:0;font-size:14.5px !important;line-height:1.6}
.fw-cta-row .fw-comment-cta strong{font-size:14.5px}
@media (max-width:720px){
  .fw-cta-row{flex-direction:column}
  .fw-cta-row .fw-yt-banner{flex:none;aspect-ratio:auto;flex-direction:row;width:fit-content}}

/* 푸터 = 본문 패널 안(2026-08-24 사용자 확정) — 본문을 끝까지 스크롤해야 나타난다.
   패널 폭에 맞게 여백 정리, 위쪽 구분선으로 본문과 경계 */
.fw-main .fw-footer{margin:34px -6px 0;padding:22px 4px 10px;border-top:2px solid #E2DBC8;background:transparent}
.fw-main .fw-footer-in{max-width:none;padding:0}

/* 푸터 줄간격 1.2(2026-08-24 사용자 확정) — 본문(1.6~1.7)과 달리 고지문은 촘촘하게 */
.fw-main .fw-footer, .fw-main .fw-footer p, .fw-main .fw-footer .links,
.fw-main .fw-footer-in{line-height:1.2}
.fw-main .fw-footer p{margin:6px 0}

/* 푸터 잘림 방지(2026-08-24) — 스크롤 패널 바닥 여백을 확보해 마지막 줄까지 보이게 */
body.article .fw-main, body.portal .fw-main{
  max-height:calc(100vh - var(--fw-bar) - 26px);
  padding-bottom:56px; box-sizing:border-box}
.fw-main .fw-footer{padding-bottom:26px}

/* 푸터 글씨 = 본문(16px)보다 두 단계 작게 → 14px (2026-08-24 사용자 확정) */
.fw-main .fw-footer, .fw-main .fw-footer p, .fw-main .fw-footer a,
.fw-main .fw-footer .links a{font-size:14px !important}

/* ══ 분류 탭 고정 복원(2026-08-24) ══════════════════════════════════
   본문 패널 안에 있는 탭(nf-inline·홈)은 고정 기준이 패널이므로 top:0 —
   패널 꼭대기(=헤더 바로 아래)에 붙는다. 틈 없이 이전과 같은 모습.
   페이지 레벨 탭(아티클·분류 페이지)은 종전 규칙(top:헤더 높이) 유지. */
.fw-main .fw-cattabs{top:0 !important}

/* 내용 없는 그래프 틀은 상자째 숨김(2026-08-24 고정 페이지 정리) */
.fw-graphbox:empty{display:none;border:0;padding:0;margin:0}

/* ══ 홈 = 아티클과 같은 3단(2026-08-24 사용자 확정) ══════════════════
   좌 20(분류 메뉴) · 중 60(본문) · 우 20(광고 예약 — 지금은 유튜브 아이콘 2개만) */
body.portal .fw-side.right{display:block !important;position:sticky;
  top:calc(var(--fw-bar) + 10px);max-height:calc(100vh - var(--fw-bar) - 20px);
  overflow-y:auto;align-self:start}
body.portal .fw-wrap{grid-template-columns:minmax(0,20%) minmax(0,60%) minmax(0,20%)}
body.portal .fw-main{grid-column:2}
body.portal .fw-side.right .fw-graphbox{display:none}
.fw-side-icons{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.fw-side-icons .fw-yt-banner{margin:0}
.ytb-sub{font-size:14.5px;font-weight:700;color:#232019}
@media (max-width:900px){
  body.portal .fw-wrap{grid-template-columns:1fr}
  body.portal .fw-main{grid-column:1;grid-row:1}
  body.portal .fw-side.right{grid-column:1;grid-row:2;position:static;max-height:none}
  body.portal .fw-side.left{grid-row:3}}

.fw-side-note{font-size:14.5px;line-height:1.55;color:#6b6559;margin:4px 0 0}

/* 그래프 틀 — 요소가 하나도 없으면(공백만) 상자째 숨김 */
.fw-graphbox:not(:has(*)){display:none}

/* 홈 5열 작은 카드 — 그림 1:1 확정·오버레이 없음(2026-08-24 겹침 수정) */
.nf-mini .nf-media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:6px}
.nf-mini .nf-media img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.nf-mini .nf-kw,.nf-mini .nf-imgdate{display:none}
.nf-mini-t{display:block;margin-top:8px;line-height:1.4}

/* 작은 카드 1:1 최종 강제(2026-08-24) — 앞선 16:9 일괄 규칙을 이긴다 */
.nf-mini .nf-media{aspect-ratio:1/1 !important;height:auto !important;width:100% !important}
.nf-mini .nf-media img,.nf-mini img{aspect-ratio:1/1 !important;width:100% !important;
  height:100% !important;object-fit:cover !important}

.nf-mini .nf-media img,.nf-mini img{max-height:none !important}

/* 분류 탭 — 잘라내지 않고 줄바꿈으로 전부 표시(2026-08-24). 높이는 실측 스크립트가 반영 */
.fw-cattabs-in{flex-wrap:wrap;overflow-x:visible;row-gap:6px}
@media (max-width:720px){.fw-cattabs-in{flex-wrap:nowrap;overflow-x:auto}} /* 모바일은 스와이프 유지 */

/* ══ 탭 한 줄(PC) — 10 대분류 체계(2026-08-24 사용자 확정) ══════════ */
@media (min-width:721px){
  .fw-cattabs-in{flex-wrap:nowrap;overflow-x:visible;justify-content:center}
  .fw-cattabs a{font-size:13px;padding:6px 11px}}

/* 채널 아이콘 카드 라벨(2026-08-24) — 바로가기임이 글씨로 보이게 */
.ytb-label{font-size:14px;font-weight:700;line-height:1.3;color:#232019;margin-left:2px}
.fw-yt-banner:hover .ytb-label{color:#c00}

/* 탭 글씨 한 단계 크게·굵게(2026-08-24 사용자 확정) — 한 줄 유지 */
@media (min-width:721px){
  .fw-cattabs a{font-size:14.5px;font-weight:700;padding:6px 12px}}
/* 자료실 표 — 60% 컬럼에서 칸이 좁아지는 문제: 표를 가로 스크롤 없이 꽉, 줄바꿈 허용 */
body.article .fw-main table{width:100%;table-layout:auto}
body.article .fw-main td,body.article .fw-main th{word-break:keep-all;overflow-wrap:anywhere;padding:9px 10px}

/* ══ 아티클 제목은 어디서나 굵게(2026-08-24 사용자 확정) ══════════ */
.nf-main-title,.nf-mini-t,.nf-txt-t,.nyt-t,.rel-t,.fw-mi-t,
.fw-edges .edge-list a,.nf-sec li a,.nf-card-t{font-weight:700 !important}

/* ══ 헤더 로고 무대 — 지식그래프 상징(2026-08-24 사용자 확정) ══════════
   높이 150%(로고 공간 56→84px). 인라인 SVG 3층 + 마우스 시차 = 3차원감.
   외부 요청 0·약 4KB — 속도 영향 사실상 없음. */
.fw-logo-stage{position:relative;width:460px;max-width:100%;height:84px;
  display:flex;align-items:center;justify-content:center;justify-self:center;grid-column:2}
.kg-stage-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kg-b,.kg-m,.kg-f{transition:transform .35s ease-out;will-change:transform}
.fw-logo-stage .fw-logo{position:relative;z-index:2;font-size:27px}
.fw-logo-stage .fw-logo-img{height:46px;width:46px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.9))}
.fw-logo-stage .fw-logo span{text-shadow:0 0 8px #fff,0 0 16px #fff}
.kg-sun circle:first-child{animation:kg-glow 5s ease-in-out infinite}
@keyframes kg-glow{0%,100%{fill-opacity:.85}50%{fill-opacity:.55}}
@media (prefers-reduced-motion: reduce){.kg-sun circle:first-child{animation:none}
  .kg-spark{display:none}}
@media (max-width:720px){
  .fw-logo-stage{height:56px;width:100%}
  .kg-stage-svg{opacity:.45}
  .fw-logo-stage .fw-logo-img{height:38px;width:38px}}

/* ══ 분류 탭 = 지식 노드(2026-08-24 사용자 확정) ══════════════════════
   칩 하나하나가 결정화된 노드: 앞에 노드 점, 칩들을 잇는 엣지 선,
   선택된 분류는 위 로고 그래프에서 줄기가 내려와 닿는다. 가독성 우선(글씨 불변). */
.fw-cattabs{overflow:visible}
.fw-cattabs-in{position:relative;padding-top:14px;padding-bottom:9px}
/* 칩들을 관통하는 엣지 선 — 뒤에 깔린다 */
.fw-cattabs-in::before{content:"";position:absolute;left:24px;right:24px;top:calc(50% + 2px);
  height:1px;background:linear-gradient(90deg,transparent,rgba(27,42,74,.16) 8%,
  rgba(27,42,74,.16) 92%,transparent);z-index:0}
.fw-cattabs a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px}
/* 노드 점 — 비어 있는 결정(테두리) */
.fw-cattabs a::before{content:"";width:7px;height:7px;border-radius:50%;
  border:1.6px solid #7fa06f;background:#fff;flex:none;transition:all .18s}
.fw-cattabs a:hover::before{background:#3EC6D9;border-color:#3EC6D9}
/* 선택된 분류 = 채워진 결정 + 위 그래프에서 내려오는 줄기 */
.fw-cattabs a.on::before{background:#fff;border-color:#fff}
.fw-cattabs a.on{overflow:visible}
.fw-cattabs a.on::after{content:"";position:absolute;left:50%;top:-14px;width:1.5px;height:14px;
  background:linear-gradient(180deg,rgba(62,198,217,.0),#3EC6D9);transform:translateX(-50%)}
/* 로고 무대 바닥 중앙 — 아래로 내려가는 잔뿌리(탭과 이어지는 암시) */
.fw-logo-stage::after{content:"";position:absolute;left:50%;bottom:-8px;width:1.5px;height:10px;
  background:linear-gradient(180deg,#3EC6D9,rgba(62,198,217,0));transform:translateX(-50%)}
/* 홈 칩(첫 노드)은 뿌리색 */
.fw-cattabs a:first-child::before{border-color:#2F7D32;background:#2F7D32}
@media (max-width:720px){
  .fw-cattabs-in{padding-top:8px}
  .fw-cattabs a.on::after{display:none}
  .fw-cattabs a::before{width:6px;height:6px}}

/* 공식 카피(2026-08-24 사용자 확정) — 받침 자리 전용, 과시 없이 */
.nf-tagline{color:#7fa06f;font-size:15.5px;margin:-6px 0 14px;letter-spacing:.01em}

/* 무대 폭 확장 — 애니메이션 영역 460→640px(2026-08-24) */
@media (min-width:900px){.fw-logo-stage{width:640px}}

/* ══ 무대 전폭 확장(2026-08-24) — 헤더 왼쪽 끝 ~ 검색창 직전 ══════════ */
@media (min-width:900px){
  .fw-header-in{position:relative;min-height:84px}
  .fw-logo-stage{position:absolute !important;left:14px !important;right:352px !important;
    top:0 !important;bottom:0 !important;width:auto !important;max-width:none !important;
    height:auto !important;grid-column:auto !important}
  .fw-search{position:relative;z-index:3}
}

/* ══ 무대 = 헤더 전폭(2026-08-24 사용자 확정) — 검색창도 그래프 위에 ══ */
@media (min-width:900px){
  .fw-logo-stage{left:0 !important;right:0 !important}
  .fw-search{z-index:3}
  .fw-search input{background:rgba(255,255,255,.92)}
}

/* r3 on-site article imagery loads the manifest-verified 1080x1080 derivative
   directly. The 1080x1350 master is reserved for OG/X/JSON-LD metadata. */
.nf-media.is-cardnews,
.nf-main .nf-media.is-cardnews,
.nf-mini .nf-media.is-cardnews,
.nf-card .nf-media.is-cardnews,
.rel-card .nf-media.is-cardnews{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:1/1 !important;
  overflow:hidden;
  background:#0E1C2C;
}
.nf-media.is-cardnews > img,
.nf-main .nf-media.is-cardnews > img,
.nf-mini .nf-media.is-cardnews > img,
.nf-card .nf-media.is-cardnews > img,
.rel-card .nf-media.is-cardnews > img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0;
}
.nf-media.is-cardnews .nf-kw{display:none !important}

.nyt-thumb.is-cardnews,
.hub-g .nyt-thumb.is-cardnews{
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  aspect-ratio:1/1 !important;
  overflow:hidden;
  background:#0E1C2C;
}
.nyt-thumb.is-cardnews .nf-media.is-cardnews,
.nyt-thumb.is-cardnews img,
.hub-g .nyt-thumb.is-cardnews img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
}

.fw-mi-th.is-cardnews{
  height:auto !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  background:#0E1C2C;
}

body.article .fw-main figure.fw-cardnews-hero,
body.article #fw-main-body figure.fw-cardnews-hero{
  display:block;
  width:min(620px,100%) !important;
  max-width:min(620px,100%) !important;
  aspect-ratio:1/1 !important;
  margin:20px auto 26px !important;
  text-align:center;
  overflow:hidden;
  border-radius:8px;
  background:#0E1C2C;
  box-shadow:0 10px 28px rgba(14,28,44,.14);
}
body.article .fw-main figure.fw-cardnews-hero img,
body.article #fw-main-body figure.fw-cardnews-hero img{
  display:block;
  width:100% !important;
  height:100% !important;
  aspect-ratio:1/1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:0;
}

/* r4 list prose and workflow state are separate visual fields. */
.fw-state-badge{
  display:inline-block;
  margin-left:7px;
  padding:1px 7px;
  border:1px solid #b9c8d8;
  border-radius:999px;
  background:#edf3f8;
  color:#40566d;
  font-size:12px !important;
  font-weight:700;
  line-height:1.45;
  vertical-align:middle;
}
.fw-mi-tx>.fw-state-badge{margin:3px 0 0}
.fw-mi-d{
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden;
}
.nyt-d,.hub-g .nyt-d{
  -webkit-line-clamp:3 !important;
  line-clamp:3 !important;
}
.fw-artlist .fw-state-badge{margin:3px 0 0 7px}
.fw-artlist .fw-li-desc{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

/* ── 2026-09-02: 1:1 표시·우측 썸네일·분류 바둑판 ── */
.nf-media.is-cardnews img{aspect-ratio:1/1;object-fit:cover}
.fw-cardnews-hero img{max-width:none;width:100%;height:100%;border-radius:8px;display:block;margin:0 auto}
.nf-col-heads li{display:flex;gap:10px;align-items:flex-start}
.nf-col-heads .nf-media{flex:0 0 84px;width:84px}
.nf-col-heads .nf-media img{width:84px;height:84px;object-fit:cover;border-radius:6px}
.nf-txt-body{flex:1;min-width:0}
.nf-catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 0;border-bottom:1px solid #EDE7D8}
.nf-cattile{display:block;border-radius:8px;overflow:hidden}
.nf-cattile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:transform .25s}
.nf-cattile:hover img{transform:scale(1.03)}
@media (max-width:900px){.nf-catgrid{grid-template-columns:repeat(2,1fr)}}

/* ── 2026-09-02: 좌측 분류 카드(16:9+설명) · 우측 열 텍스트좌/썸네일우 ── */
.fw-catcard{display:flex;gap:12px;align-items:flex-start;text-decoration:none;color:#232019;margin:0 0 8px;padding:8px 0;border-bottom:1px solid #EDE7D8}
.fw-catcard img{flex:0 0 56%;width:56%;height:auto;aspect-ratio:16/9;object-fit:contain;display:block;border-radius:6px}
.fw-catcard-x{flex:1 1 auto;min-width:0}
.fw-catcard-t{display:block;font-weight:800;line-height:1.3;font-size:1.12em;color:var(--fw-green-dark)}
.fw-catcard-t .cnt{font-weight:600;color:#8a8471;font-size:.85em}
.fw-catcard-d{display:block;color:#4c473e;font-size:.98em;line-height:1.5;margin-top:4px}
.fw-catcard:hover .fw-catcard-t{color:#2F7D32}
.nf-col-heads li{display:flex;flex-direction:row;gap:12px;align-items:flex-start}
.nf-col-heads .nf-txt-body{flex:1 1 auto;min-width:0;order:1}
.nf-col-heads .nf-media{flex:0 0 140px;width:140px;order:2}
.nf-col-heads .nf-media img{width:140px;height:140px;object-fit:cover;border-radius:8px;aspect-ratio:1/1}