/* 중앙신문 웹 스타일
 *
 * 강조색은 #ea2121 하나다 — 2026-09-11 PC 시안의 값이다(섹션 상단 라인·라벨·
 * 호버·로고 점). 예전엔 #c00 이었는데 시안 라인과 나란히 두면 서로 다른
 * 빨강으로 보여 통일했다.
 *
 * layout.ejs 의 <style> 블록에 32KB 가 들어 있어 모든 페이지 HTML 에 그대로
 * 실려 나갔다. 외부 파일로 빼면 브라우저가 한 번 받아 캐시한다.
 *
 * 규칙 순서는 원본 그대로다. Responsive 미디어쿼리 하나가 기사·홈·헤더 규칙을
 * 함께 담고 있어, 페이지별로 쪼개면 캐스케이드 순서가 바뀐다.
 * 캐시 무효화는 <link> 의 ?v= (site.css 내용 해시)로 한다.
 */

/* ---- 선 색 토큰 (2026-09-25) ------------------------------------------------
   시안에는 회색 선이 **두 종류뿐**이다. Figma 의 Line SVG 와 프레임 테두리에서
   직접 읽은 값이다.
     --line      #EBEBEB  구분선(hairline). 목록 사이, 섹션 아래, 입력칸 테두리.
     --line-box  #CECECE  흰 배경 위 아웃라인 카드의 테두리(기자 카드 249:237).
   섹션을 여는 굵은 선은 강조색 #EA2121 3px 이고 토큰을 쓰지 않는다.
   🔴 예전엔 #e0e0e0·#eee·#ddd·#f0f0f0·#d1d1d1·#e5e5e5·#ccc 가 뒤섞여 있었다. */
:root { --line:#ebebeb; --line-box:#cecece; }
.rss-feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin: 24px 0; }
.rss-feed { padding: 20px; border: 1px solid var(--line); min-width: 0; }
.rss-feed h2 { font-size: 18px; margin-bottom: 12px; }
.rss-feed a, .rss-feed button { display: inline-block; padding: 8px 12px; margin-right: 8px; border: 1px solid var(--line-box); background: #fff; font: inherit; cursor: pointer; }
.rss-feed input { display: block; width: 100%; margin-top: 12px; padding: 8px; border: 1px solid var(--line); font-size: 12px; }


* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', -apple-system,
                    system-ui, sans-serif; color: #333; background: #fff; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* Header — 2026-09-11 PC 시안(85:908).
   1행 48px: 날짜 / 로고(216x48 중앙) / 로그인·회원가입
   2행 55px: 메뉴(중앙, 간격 30) / 우측 끝 메뉴+검색 결합 아이콘
   하단 #ea2121 3px. 로고는 시안에서 내보낸 SVG 한 장이다(img/logo.svg). */
.header { background: #fff; border-bottom: 3px solid #ea2121; position: sticky; top: 0; z-index: 100; }
/* 🔴 시안 콘텐츠 폭은 1200 이다. 패딩이 안쪽을 깎으므로 max-width 를 1240 으로 둔다
   (좁은 화면에서는 패딩이 그대로 살아 있어야 해서 padding 을 없애지 않는다). */
.header-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.header-top { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr;
              align-items: start; padding-top: 12px; }
/* 상단행 글자 — PC(85:908)·태블릿(82:666) 둘 다 14px 이고 날짜만 Bold 다.
   15px/400 으로 들어가 있었다(2026-09-28 대조). */
.header-date { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; }
.logo { justify-self: center; display: block; line-height: 0; }
.logo-nav { display: none; }   /* 태블릿에서만 보인다 */
.logo img { display: block; width: 216px; height: 48px; }
.header-auth { justify-self: end; display: flex; align-items: center; gap: 15px;
               font-size: 14px; font-weight: 500; color: #111; white-space: nowrap; }
.header-auth a:hover { color: #ea2121; }
/* 로그인|회원가입 사이 구분선 — 시안 82:673 의 SVG 는 **#111 1px, 길이 13** 이다.
   테두리로 그리면 글자 높이(약 17)만큼 늘어나고 색도 --line(#ebebeb)이라 너무
   연했다. 가상요소로 길이를 13 에 고정한다. 좌우 여백은 그대로 15 씩이다
   (gap 15 + padding-left 15). */
.header-auth a + a { position: relative; padding-left: 15px; }
.header-auth a + a::before { content: ''; position: absolute; left: 0; top: 50%;
                             transform: translateY(-50%);
                             width: 1px; height: 13px; background: #111; }

/* Nav — 시안은 검정 바가 아니라 흰 배경 + 중앙 정렬이다. */
.nav { position: relative; min-height: 55px; display: flex; align-items: center; padding-right: 45px; }
.nav-menu { display: flex; justify-content: center; align-items: center; gap: 30px;
            flex: 1; flex-wrap: wrap; }
.nav a { color: #111; font-size: 17px; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; }
.nav-menu > a:hover, .nav-item > a:hover { color: #ea2121; }
/* 상단 메뉴에서 글자색을 따로 주는 항목. 지금은 '지역' 하나다
   (2026-09-30 클라이언트 요청 — constants.NAV_ACCENT 가 정한다).
   🔴 강조 빨강(#ea2121)과 **구별되는 주황**이어야 한다. 너무 붉으면 그냥
      hover 상태처럼 보인다. hover 도 제 색을 유지하도록 같이 눌러 둔다. */
.nav a.nav-accent, .nav-item > a.nav-accent { color: #f57200; }
.nav-menu > a.nav-accent:hover, .nav-item > a.nav-accent:hover { color: #d85f00; }
.nav-item { position: relative; }
.nav-item .sub-nav { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
                     background: #fff; min-width: 120px; z-index: 200; padding: 6px 0;
                     border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.nav-item:hover .sub-nav { display: block; }
.nav .sub-nav a { display: block; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.nav .sub-nav a:hover { background: #f5f5f5; color: #ea2121; }
/* 메뉴+검색 결합 아이콘(시안 82:686). 전체 카테고리 서랍을 연다. */
.nav-drawer-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
                  width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
                  padding: 0; color: #111; display: flex; align-items: center; justify-content: center; }
/* 🔴 mask 는 ::before 에 건다. 버튼 자체에 걸면 **포커스 링까지 마스크에 잘려**
   키보드로 어디 있는지 보이지 않는다(CSS Masking 은 요소 전체 렌더에 적용된다). */
.nav-drawer-btn::before {
    content: ''; width: 30px; height: 30px; background-color: currentColor;
    -webkit-mask: url(/img/icon-menu-search.svg) no-repeat center / 30px 30px;
            mask: url(/img/icon-menu-search.svg) no-repeat center / 30px 30px;
}
.nav-drawer-btn:hover { color: #ea2121; }
.nav-drawer-btn:focus-visible { outline: 2px solid #ea2121; outline-offset: 3px; border-radius: 2px; }

/* Content */
.container { max-width: 1240px; margin: 0 auto; padding: 20px; }

/* Main Grid */
.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }

/* Section */
/* 시안에는 섹션 카드가 없다 — 흰 배경 위에 구분선과 여백으로만 나눈다.
   섹션 사이 간격은 시안 어디서나 50 이다. */
.section { background: transparent; border-radius: 0; padding: 0; margin-bottom: 50px; }
/* 섹션 헤더 — 2026-09-11 PC 시안.
   구조는 시안이 어디서나 같다: 상단 빨간 라인(#EA2121 3px) → 15px → 제목(17px
   Bold, 자간 -0.4px, 높이 20px) → 8px → 화살표(8x14) → 15px → 콘텐츠.
   제목 색은 시안에서 검정/빨강이 섞여 있는데 섹션·코너 구분과 무관하다
   (포토·이슈PICK·지역 포커스는 검정, 오피니언·뉴데일리TV·섹션별뉴스는 빨강).
   규칙이 없으므로 기본은 검정으로 두고 빨강인 것에만 .is-accent 를 붙인다. */
.section-title { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: #111;
                 border-top: 3px solid #ea2121; padding-top: 15px; margin-bottom: 15px; }
.section-title.is-accent, .section-title.is-accent a { color: #ea2121; }
/* 🔴 목록/정보 화면의 **페이지 제목**은 선을 아래로 내린다(.is-under).
   위 규칙은 홈처럼 한 화면에 섹션이 여러 개 쌓일 때 "여기서 새 섹션이 시작된다"를
   알리는 선이다. 카테고리·전체뉴스·즐겨찾기·정보는 섹션이 하나뿐이라 그 선이
   화면 맨 위에 빨간 띠로 덩그러니 떠 보인다 — 제목 밑줄이 맞다.
   시안에 카테고리·검색 프레임이 없어(2026-09-28 확인) 홈 규칙을 끌어다 쓴 것이었다.
   간격은 그대로 뒤집는다 — 선↔제목 15, 선↔콘텐츠 15. */
.section-title.is-under { border-top: 0; padding-top: 0;
                          border-bottom: 3px solid #ea2121; padding-bottom: 20px; }
/* 🔴 페이지 제목은 **32px/44** 다(시안 `307:864`, PC-카테고리-type1).
   홈의 섹션 제목(17px)과 자리가 달라 크기도 다르다 — 화면의 이름이지 섹션 머리가 아니다.
   `.cat-head` 안에서도 같은 값을 쓴다. */
.section-title.is-under,
.cat-head .section-title { font-size: 32px; line-height: 44px; color: #000; }
/* 화살표는 링크인 헤더에만 붙는다 — 시안도 갈 곳이 없는 '실시간 인기뉴스'에는 없다.
   mask + currentColor 라 제목이 빨개지면 화살표도 같이 빨개진다(시안이 그렇다). */
.section-title a { display: inline-flex; align-items: center; gap: 8px; }
.section-title a::after {
    content: ''; width: 8px; height: 14px; flex: none; background-color: currentColor;
    -webkit-mask: url(/img/chevron-right.svg) no-repeat center / 8px 14px;
            mask: url(/img/chevron-right.svg) no-repeat center / 8px 14px;
}

/* Article Card */
.article-card { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.article-card:last-child { border-bottom: none; }
.article-card .thumb { width: 180px; min-width: 180px; height: 120px; background: #ddd; overflow: hidden; }
.article-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 썸네일 클릭 시 기사로 이동 (이미지를 감싼 링크) */
.thumb-link { display: block; }
.thumb-link img { display: block; }
.article-card .thumb .thumb-link { width: 100%; height: 100%; }
.article-card .info { flex: 1; }
.article-card .info h3 { font-size: 17px; line-height: 1.4; margin-bottom: 8px; }
.article-card .info h3 a:hover { color: #ea2121; }
.article-card .info p { font-size: 14px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .info .meta { font-size: 12px; color: #999; margin-top: 8px; }

/* Hero */
.hero { position: relative; border-radius: 4px; overflow: hidden; margin-bottom: 20px; background: #222; min-height: 400px; display: flex; align-items: flex-end; }
.hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.6; }
.hero .hero-content { position: relative; padding: 40px; color: #fff; }
.hero .hero-content h2 { font-size: 32px; line-height: 1.3; margin-bottom: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero .hero-content p { font-size: 16px; opacity: 0.9; }

/* Sidebar */
/* 사이드바도 카드가 아니다 — 시안 사이드바 블록은 폭 300 을 그대로 쓴다. */
/* 시안은 본문·사이드바 헤더가 모두 17px 이라 따로 줄이지 않는다. */
.ranking-list { counter-reset: rank; }
/* 시안(77:501 · 기사 240:9): [번호 + 제목] 좌 / 썸네일 90x60 우. 한 줄 높이 66.
   🔴 **번호는 원형 배지가 아니다.** 19px Bold 검정 **글자**다. 예전에는 22px 짜리
      검정/빨강 원 안에 흰 숫자 11px 을 넣고 있었는데 시안 어디에도 그런 배지가 없다.
      1~3위를 빨갛게 하던 규칙도 시안엔 없어서 같이 뺐다.
   번호↔제목 간격 10, 제목↔썸네일 간격 15 — 두 간격이 다르다. */
.ranking-list li { list-style: none; padding: 12px 0; border-bottom: 1px solid var(--line);
                   display: flex; align-items: flex-start; gap: 15px; }
.rank-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 22px;
              letter-spacing: -0.4px; color: #111;
              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 🔴 썸네일도 각진 사각이다(radius 없음). */
.rank-thumb { flex: none; width: 90px; aspect-ratio: 90 / 60;
              overflow: hidden; background: #eee; }
.rank-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ranking-list li::before { counter-increment: rank; content: counter(rank);
              flex: none; margin-right: -5px; /* 번호↔제목 10 = gap 15 - 5 */
              font-size: 19px; font-weight: 700; line-height: 23px; letter-spacing: -0.4px;
              color: #111; }
.ranking-list li a:hover { color: #ea2121; }

/* Footer */
/* Footer — 시안(85:904)은 검정이 아니라 밝은 회색 #f8f8f8 이다. */
.footer { background: #f8f8f8; color: #828282; padding: 60px 20px 50px; margin-top: 40px; }
.footer-inner { max-width: 1200px; margin: 0 auto; }   /* 풋터는 패딩이 .footer 에 있어 이미 1200 이다 */
/* 링크 줄(77:969): 14px, 간격 30(세로 15). 최종편집시간만 보통 굵기다. */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 30px;
                padding-top: 30px; border-top: 1px solid var(--line); margin-bottom: 31px;
                font-size: 14px; line-height: 16px; letter-spacing: -0.4px; }
.footer-links a { color: #111; font-weight: 700; }
.footer-links a:hover { color: #ea2121; }
.foot-lastedit { color: #111; }
/* 회사정보(77:979/77:983): 한 줄에 늘어놓고 넘치면 접는다 */
.footer-info { display: flex; flex-wrap: wrap; gap: 15px 30px; margin-bottom: 15px;
               font-size: 14px; line-height: 16px; letter-spacing: -0.4px; color: #828282; }
.footer-copy { font-size: 14px; line-height: 16px; letter-spacing: -0.4px; color: #111; margin-top: 16px; }

/* Article Detail */
.article-category { margin-bottom: 10px; }
.article-category a { display: inline-block; font-size: 13px; color: #ea2121; font-weight: 700; margin-right: 8px; }
.article-title { font-size: 28px; line-height: 1.4; margin-bottom: 12px; }
/* .article-subtitle 의 시안 규칙(240:121)은 아래 '부제' 블록에 있다. */
/* 부제는 CMS 리치텍스트라 안쪽에 <p> 가 들어온다. 기본 문단 여백이 겹치지
   않도록 죽이고, 마지막 문단만 아래 여백을 없앤다. */
.article-subtitle p { margin: 0 0 4px; }
.article-subtitle p:last-child { margin-bottom: 0; }
.article-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #999; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.article-meta .writer { color: #333; font-weight: 700; }
.article-meta .email { color: #999; }
.google-source-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid #e3e3e3; border-radius: 17px; text-decoration: none !important; color: #222 !important; font-size: 12px; font-weight: bold; white-space: nowrap; }
.google-source-btn:hover { background: #f5f5f5; border-color: var(--line); }
/* 그리드 아이템은 기본 min-width:auto 라 내용이 넓으면 트랙을 밀어낸다.
   1fr 컬럼이 컨테이너 밖으로 삐져나오는 전형적 원인이라 0 으로 막는다. */
.main-grid > * { min-width: 0; }
/* 기사 본문은 인라인 style="padding:30px" 로 박혀 있었다. 그러면 모바일에서
   미디어쿼리로 줄일 수 없어 좁은 화면에서 좌우 60px 을 먹는다. 클래스로 뺐다. */
.article-detail { padding: 30px; }
/* 본문 상자를 둘로 나눈 뒷부분(기자카드·박수·댓글). 사이드바를 사이에 끼우려고
   나눴다 — 좌우 패딩만 같게 두고 위아래는 비운다(나누기 전과 간격이 같아야 한다). */
.article-tail { padding: 0 30px 30px; }
.article-content { line-height: 1.85; font-size: 16px; word-break: keep-all; overflow-wrap: break-word; }
/* 🔴 단락 사이 한 줄 띄우기. 전역 리셋(`* { margin: 0 }`)이 <p> 의 기본 마진을
   지워 버려, 빈 문단 없이 <p>…</p><p>…</p> 로만 들어온 **이관 기사 8.6만건**이
   단락 구분 없이 통째로 붙어 나왔다. CMS 로 새로 쓴 기사는 단락 사이에
   빈 문단(<p>&nbsp;</p>)이 들어가 있어서 증상이 가려져 있었다.
   값은 '빈 줄 하나'와 같게 line-height(1.85)에 맞춘다 — 빈 문단을 걷어낸
   신규 기사(articleService.stripEmptyBlocks)와 간격이 달라지면 안 된다.
   em 이라 본문 글자크기 조절(--article-scale)을 따라간다. */
.article-content p { margin: 0 0 1.85em; }
/* 끝 여백만 지운다. 직계 자식으로 좁히지 않으면 <div> 로 감싼 블록 안의
   마지막 문단까지 마진을 잃어, 본문 중간에서 간격이 사라진다. */
.article-content > p:last-child { margin-bottom: 0; }
/* 본문에 들어온 넓은 요소가 레이아웃을 밀지 않도록 */
.article-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-content pre { max-width: 100%; overflow-x: auto; }
.article-content iframe, .article-content video, .article-content embed { max-width: 100%; }
.article-content img { max-width: 100%; height: auto; margin: 16px 0; }
.article-content figure { margin: 16px 0; max-width: 100%; }
.article-content figcaption { font-size: 13px; color: #888; margin-top: 6px; }
/* 좌우로 흘린 사진에 본문이 바로 붙지 않도록 여백을 준다.
   마크업이 두 가지다 — 마이그레이션분은 인라인 style="float:left",
   CMS 신규 저장분은 class="float-left"(writeArticles.js expandImagePlaceholders).
   둘 다 잡되, 인라인 float 이 실제로 적용되는 값이므로 속성 선택자를 뒤에 둬서
   우선하게 한다(특이도가 같아 순서로 갈린다). */
.article-content figure.float-center { margin: 16px auto; }
.article-content figure.float-left  { margin: 6px 20px 14px 0; }
.article-content figure.float-right { margin: 6px 0 14px 20px; }
.article-content figure[style*="float:left"],
.article-content figure[style*="float: left"]  { margin: 6px 20px 14px 0; }
.article-content figure[style*="float:right"],
.article-content figure[style*="float: right"] { margin: 6px 0 14px 20px; }
.article-content figure img { margin: 0; }
/* 흘린 사진이 본문 밖으로 삐져나오지 않게 */
.article-content::after { content: ""; display: block; clear: both; }
.article-tags { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }
.article-tags .tag { display: inline-block; background: #f0f0f0; padding: 5px 14px; border-radius: 20px; font-size: 13px; margin: 3px 3px 3px 0; color: #555; }
.article-tags .tag:hover { background: #e0e0e0; }
.article-related { margin-top: 30px; padding: 20px; background: #f9f9f9; border-radius: 4px; }
.article-related h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.article-related ul { list-style: none; }
.article-related li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.article-related li:last-child { border: none; }
.article-related li a:hover { color: #ea2121; }

/* ---- 댓글 (시안 253:323) --------------------------------------------------
   시안 수치를 그대로 옮겼다. 블록 사이 간격 30px, 블록 안 15px.
   🔴 선 색은 두 가지뿐이다 — 섹션을 여는 **#EA2121 3px**, 나머지 구분선 **#EBEBEB 1px**.
      (Figma 의 Line 14 / Line 21 SVG 에서 직접 읽은 값이다.)                */
.comment-section { margin-top:40px; padding-top:15px; border-top:3px solid #ea2121; }
.cmt-title { margin:0 0 30px; font-size:17px; font-weight:700; letter-spacing:-0.4px; color:#111; }
.cmt-n { color:#ea2121; }

/* 비로그인 안내 바 — 시안 253:313 */
.cmt-login { display:flex; align-items:center; justify-content:space-between;
    height:50px; padding:0 20px; box-sizing:border-box;
    background:#f5f5f5; border:1px solid #ebebeb; border-radius:10px; }
.cmt-login > span { font-size:14px; font-weight:500; line-height:20px;
    letter-spacing:-0.4px; color:#828282; }

/* 로그인 상태 입력폼 — 시안에 없어 안내 바의 색·라운드를 이어받았다. */
.cmt-write { background:#f5f5f5; border:1px solid #ebebeb; border-radius:10px; padding:15px; }
.cmt-write textarea { display:block; width:100%; box-sizing:border-box; border:0;
    background:transparent; resize:vertical; min-height:60px; padding:0;
    font-family:inherit; font-size:16px; line-height:1.6; color:#111; letter-spacing:-0.4px; }
.cmt-write textarea:focus { outline:0; }
.cmt-write textarea::placeholder { color:#828282; font-size:14px; }
.cmt-write-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:10px; }
.cmt-len { margin-right:auto; font-size:13px; color:#828282; letter-spacing:-0.4px; }
.cmt-len b { font-weight:700; color:#111; }

/* 등록 버튼 — 시안 253:306 (51x25, #111, r5, 흰색 16 Bold) */
.cmt-btn { display:inline-flex; align-items:center; justify-content:center;
    min-width:51px; height:25px; padding:0 12px; box-sizing:border-box;
    background:#111; color:#fff; border:0; border-radius:5px; cursor:pointer;
    font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-0.4px;
    line-height:1; text-decoration:none; }
.cmt-btn:hover { background:#ea2121; }
.cmt-btn.ghost { background:#fff; color:#828282; border:1px solid #ebebeb; }
.cmt-btn.ghost:hover { background:#f5f5f5; color:#111; }

/* 정렬 탭 — 시안 250:287 */
.cmt-sort { display:flex; gap:15px; align-items:center; margin-top:30px;
    padding-bottom:15px; border-bottom:1px solid #ebebeb; }
.cmt-sort a { font-size:14px; font-weight:700; line-height:20px; letter-spacing:-0.4px;
    color:#828282; text-decoration:none; }
.cmt-sort a.on { color:#ea2121; }

/* 댓글 항목 — 시안 253:321 */
.comment-list { margin:0; }
.comment-item { padding:30px 0; border-bottom:1px solid #ebebeb; }
.comment-item:first-child { padding-top:30px; }
.cmt-top { display:flex; align-items:flex-end; gap:15px; min-height:20px; }
.cmt-name { font-size:16px; font-weight:700; letter-spacing:-0.4px; color:#111; }
.cmt-date { font-size:14px; font-weight:500; line-height:20px; letter-spacing:-0.4px; color:#828282; }
.cmt-del { margin-left:auto; background:none; border:0; padding:0; cursor:pointer;
    font-family:inherit; font-size:14px; font-weight:500; line-height:20px;
    letter-spacing:-0.4px; color:#828282; }
.cmt-del:hover { color:#111; }
.cmt-body { margin:15px 0 0; font-size:16px; line-height:1.5; letter-spacing:-0.4px;
    color:#111; word-break:break-word; white-space:pre-wrap; }
.cmt-foot { display:flex; align-items:center; margin-top:15px; min-height:24px; }
.cmt-reply-btn { background:none; border:0; padding:0; cursor:pointer; font-family:inherit;
    font-size:14px; font-weight:500; line-height:20px; letter-spacing:-0.4px; color:#828282; }
.cmt-reply-btn:hover { color:#111; }

/* 추천/비추천 — 시안 250:286. 아이콘 24px + 숫자 14 Bold.
   🔴 아이콘 색을 CSS 로 바꿔야 해서 **mask** 로 넣는다. <img> 안의 currentColor 는
      바깥 CSS 를 못 따라온다(파일을 두 벌 두는 대신 한 벌로 끝낸다). */
.cmt-votes { display:flex; align-items:center; gap:15px; margin-left:auto; }
.cmt-vote { display:inline-flex; align-items:center; gap:5px; background:none; border:0;
    padding:0; cursor:pointer; font-family:inherit; }
.cmt-vote b { font-size:14px; font-weight:700; line-height:20px; letter-spacing:-0.4px; }
.cmt-vote i { display:block; width:24px; height:24px; background:currentColor;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:24px 24px; mask-size:24px 24px; }
.cmt-vote .ico-up { -webkit-mask-image:url(/img/article/thumb-up.svg); mask-image:url(/img/article/thumb-up.svg); }
.cmt-vote .ico-down { -webkit-mask-image:url(/img/article/thumb-down.svg); mask-image:url(/img/article/thumb-down.svg); }
/* 시안은 추천이 빨강, 비추천이 회색이다. */
.cmt-vote.up { color:#ea2121; }
.cmt-vote.down { color:#828282; }
/* 내가 누른 쪽은 알약 배경으로 구분한다(시안엔 상태 표기가 없다). */
.cmt-vote.voted { background:rgba(234,33,33,.08); border-radius:20px; padding:2px 10px 2px 6px; }
.cmt-vote.down.voted { background:rgba(130,130,130,.12); }

/* 답글 — 시안엔 없지만 기능이 있다. 들여쓰기만 주고 색은 그대로 쓴다. */
.comment-item.comment-reply { margin-left:30px; border-bottom:0; padding:20px 0 0;
    border-left:2px solid #ebebeb; padding-left:20px; }
.reply-form { display:none; margin-top:15px; background:#f5f5f5;
    border:1px solid #ebebeb; border-radius:10px; padding:15px; }
.reply-form.on { display:block; }
.reply-form textarea { display:block; width:100%; box-sizing:border-box; border:0;
    background:transparent; resize:vertical; padding:0; font-family:inherit;
    font-size:15px; line-height:1.6; color:#111; }
.reply-form textarea:focus { outline:0; }
.reply-form .comment-form-row { display:flex; gap:8px; margin-bottom:10px; }
.reply-form input { flex:1; min-width:0; height:34px; padding:0 12px; box-sizing:border-box;
    border:1px solid #ebebeb; border-radius:5px; background:#fff; font-size:14px; }

/* 댓글 펼치기 — 시안 269:730 */
.cmt-more { display:block; width:100%; height:50px; margin-top:30px; border:0;
    background:#f8f8fa; border-radius:10px; cursor:pointer; font-family:inherit;
    font-size:16px; font-weight:700; letter-spacing:-0.4px; color:#111; }
.cmt-more:hover { background:#f0f0f3; }
.comment-list.is-folded .comment-item:nth-child(n+4) { display:none; }

.no-comments { color:#828282; text-align:center; padding:30px 0; font-size:14px; }

/* Headline (배치 기사) */
.headline-area { display: grid; grid-template-columns: 1fr 380px; gap: 2px; margin-bottom: 20px; background: #fff; border-radius: 4px; overflow: hidden; }
.headline-main { position: relative; }
.headline-hero { display: block; position: relative; height: 100%; min-height: 420px; overflow: hidden; }
.headline-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.3s; }
.headline-hero:hover .headline-hero-img { transform: scale(1.03); }
.headline-hero-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: #fff; }
.headline-hero-text h2 { font-size: 26px; line-height: 1.35; margin-bottom: 8px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.headline-hero-text p { font-size: 14px; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-label { display: inline-block; font-size: 12px; color: #ea2121; font-weight: 700; margin-bottom: 4px; }
.headline-hero-text .cat-label { color: #ff6b6b; }
.headline-side { display: flex; flex-direction: column; }
.headline-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: 1; align-items: center; }
.headline-item:last-child { border-bottom: none; }
.headline-thumb { width: 120px; min-width: 120px; height: 80px; background: #eee; overflow: hidden; }
.headline-thumb img { width: 100%; height: 100%; object-fit: cover; }
.headline-info h3 { font-size: 15px; line-height: 1.4; }
.headline-info h3 a:hover { color: #ea2121; }
.headline-sub { display: flex; gap: 0; background: #fff; border-radius: 4px; margin-bottom: 20px; overflow: hidden; }
.headline-sub-item { flex: 1; padding: 14px 18px; border-right: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.headline-sub-item:last-child { border-right: none; }
.headline-sub-item a:hover { color: #ea2121; }

/* YouTube — '뉴데일리 TV'. 시안은 PC(77:487 300x168)·태블릿(458x256) 모두
   **헤더 + 큰 썸네일 하나**뿐이다. 예전 리드 1 + 가로 리스트 3 구조는 걷어냈다.
   목록은 CMS 가 Redis(youtube:main)에 채우고, 비면 섹션째 렌더되지 않는다.
   유튜브 썸네일은 16:9 와 4:3 이 섞여 오므로 aspect-ratio + object-fit:cover 로
   카드 높이를 고정한다. */
.youtube-lead { display: block; }
.youtube-thumb {
    display: block; position: relative; width: 100%; aspect-ratio: 300 / 168;
    overflow: hidden; background: #eee;
}
.youtube-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 재생 삼각형 — 이미지를 더 받지 않으려고 CSS 로 그린다. */
.youtube-thumb::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: translate(-40%, -50%);
    border-left: 18px solid rgba(255,255,255,.92);
    border-top: 12px solid transparent; border-bottom: 12px solid transparent;
    filter: drop-shadow(0 0 5px rgba(0,0,0,.55));
}
.youtube-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 10px; font-size: 17px; font-weight: 700; line-height: 26px;
    letter-spacing: -0.4px; color: #111;
}
.youtube-lead:hover .youtube-title { color: #ea2121; }

/* ── 홈 섹션 (2026-09-11 PC 시안) ───────────────────────────────────────
   시안의 자체 섹션명을 그대로 쓴다: 지역(local-focus) / 포토_인터뷰 / 섹션별뉴스.
   그리드 아이템에는 전부 min-width:0 을 준다 — 기본 min-width:auto 라
   긴 제목이 트랙을 밀어내 가로 스크롤이 생긴다(docs/50-운영/07-레이아웃-검사.md). */

/* 지역 포커스 — 인천 + 경기 5권역, 3열 × 2행 */
.local-focus { margin-top: 20px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 30px; }
.focus-card { min-width: 0; }
/* 시안(77:608): 썸네일 110x85 를 **왼쪽**에 두고 오른쪽에 권역명+제목,
   그 아래 카드 전체 폭으로 설명이 온다. 예전에는 썸네일이 카드 폭 전체였다. */
.focus-head { display: flex; gap: 15px; align-items: flex-start; }
/* 🔴 시안의 썸네일은 **각진 사각**이다(radius 없음). */
.focus-thumb { display: block; flex: none; width: 110px; aspect-ratio: 110 / 85;
               overflow: hidden; background: #eee; }
.focus-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.focus-head .focus-body { flex: 1; min-width: 0; }
.focus-body { padding-top: 0; }
/* 권역명 14px Bold 빨강 / 20px 행간, 제목 16px Bold / 22px (시안 77:618·77:612) */
.focus-label { display: inline-block; font-size: 14px; font-weight: 700; line-height: 20px;
               letter-spacing: -0.4px; color: #ea2121; margin-bottom: 4px; }
.focus-card h3 { font-size: 16px; font-weight: 700; line-height: 22px; letter-spacing: -0.4px;
                 color: #111;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.focus-card h3 a:hover { color: #ea2121; }
/* 구분선 아래 한 건 더 (시안 77:615). 카드 전체 폭이다. */
.focus-more { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
/* PC 인데 좁은 구간(986~1100)의 안전장치. 사이드바 300 을 뺀 본문이 730 까지
   줄어 3열 x 110px 썸네일이 무너진다. 태블릿(~985)은 시안이 따로 있어 제외한다. */
@media (min-width: 986px) and (max-width: 1100px) {
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
    .focus-head { display: block; }
    .focus-thumb { width: 100%; margin-bottom: 10px; }
}

/* .focus-card p (설명 문단)은 2026-09-25 에 제거했다 — 시안의 그 자리는
   설명이 아니라 같은 권역의 기사 한 건 더였다(.focus-more). */

/* 포토 / 인터뷰 — 좌 포토(대형+썸네일 3), 우 인터뷰 */
/* 시안 540.47 : 300.26 (약 1.8:1), 간격 30 */
.photo-interview { display: grid; grid-template-columns: minmax(0, 540fr) minmax(0, 300fr); gap: 30px; margin-top: 20px; }
.pi-photo, .pi-interview { min-width: 0; }
.pi-photo-body { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 20px; }
/* 시안: 포토 리드 420x265, 인터뷰 300x180 — 비율이 다르므로 따로 준다. */
.pi-lead { display: block; width: 100%; overflow: hidden; background: #eee; }
.pi-photo .pi-lead { aspect-ratio: 420 / 265; }
.pi-interview .pi-lead { aspect-ratio: 300 / 180; }
/* 🔴 이미지와 .pi-lead 사이에 <a class="thumb-link"> 가 하나 더 있다. 그 링크에
   높이를 주지 않으면 이미지 원본 높이만큼만 차지하고, 그러면 img 의 height:100%
   가 **링크**를 기준으로 풀려서 object-fit:cover 가 아무 일도 하지 않는다.
   (포토 리드가 390x293 칸에 390x206 으로 들어가 아래가 비었다.)
   인터뷰는 <a> 자체가 .pi-lead 라 이 문제가 없었다 — 그래서 한쪽만 깨져 보였다. */
.pi-lead .thumb-link { display: block; width: 100%; height: 100%; }
.pi-lead img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pi-thumbs { list-style: none; display: grid; grid-template-rows: repeat(3, 1fr); gap: 20px; }
.pi-thumbs a { display: block; width: 100%; height: 100%; overflow: hidden; background: #eee; }
/* 리드 높이(265)를 3등분하면 75 가 되어 시안의 100x75 와 맞는다. */
.pi-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 캡션·제목 19px Bold / 26px, 코너명 14px Bold 빨강 / 20px (시안 77:584 · 77:595).
   이미지와 15px, 코너명과 제목 사이 5px. */
.pi-caption { margin-top: 15px; font-size: 19px; font-weight: 700; line-height: 26px;
              letter-spacing: -0.4px; color: #111; }
.pi-caption a:hover, .pi-interview h3 a:hover { color: #ea2121; }
.pi-label { display: block; margin-top: 15px; font-size: 14px; font-weight: 700; line-height: 20px;
            letter-spacing: -0.4px; color: #ea2121; }
.pi-interview h3 { margin-top: 5px; font-size: 19px; font-weight: 700; line-height: 26px;
                   letter-spacing: -0.4px; color: #111; }

/* 섹션별뉴스 — 3열 × 2행 */
/* 섹션별뉴스 — 시안 `77:641` (2026-09-28 대조).
   한 칸은 [상단선 3px #EA2121 → 15 → 제목 17 Bold #EA2121 +chevron → 15 →
   썸네일 270x165 → 15 → 제목 → 15 → 선 1px #EBEBEB → 15 → 제목 → 15 → 선 → 15 → 제목].
   선 색은 Line32/Line34 SVG 의 stroke 에서 직접 읽었다.
   🔴 **열 간격 30, 행 간격 50 으로 다르다.** 시안의 두 행 사이가 50 이다.
   🔴 목록 제목은 다른 블록과 같은 16/22/-0.4px 다. 예전에 14/1.4 로 한 단계
      작게 들어가 있었다 — 모바일(193:1034)만 16/22 로 맞아 있었다. */
.section-news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                column-gap: 30px; row-gap: 50px; margin-top: 20px; }
.sn-col { min-width: 0; }
.sn-lead { display: block; width: 100%; aspect-ratio: 270 / 165; overflow: hidden; background: #eee; margin-bottom: 15px; }
.sn-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-list { list-style: none; }
/* 시안은 [제목 15 선 15 제목] 이라 선 위아래가 같다. 첫 항목 위와 마지막 아래는
   썸네일 margin-bottom·섹션 여백이 맡으므로 여기서 빼 준다. */
.sn-list li { padding: 15px 0; border-top: 1px solid var(--line);
              font-size: 16px; line-height: 22px; letter-spacing: -0.4px; color: #111; }
.sn-list li:first-child { border-top: 0; padding-top: 0; }
.sn-list li:last-child { padding-bottom: 0; }
.sn-list a:hover { color: #ea2121; }

/* 풋터 카테고리 맵 */
/* 카테고리 맵(77:858): 9열, 제목 17px ExtraBold #111, 항목 15px #828282 lh30 */
.foot-sitemap { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 42px;
                padding-bottom: 30px; }
.foot-col { min-width: 0; }
.foot-col-head { margin-bottom: 30px; }   /* 제목 줄. 태블릿에서는 아코디언 헤더가 된다 */
.foot-col ul { list-style: none; }
/* 중분류 14px Medium #828282, 항목 간격 30 (시안 77:861) */
.foot-col li { font-size: 14px; font-weight: 500; line-height: 30px; letter-spacing: -0.4px; }
.foot-col li a { color: #828282; }
.foot-col a:hover { color: #ea2121; }

@media (max-width: 690px) {
    .article-detail { padding: 16px; }
    .article-tail { padding: 0 16px 16px; }
    .article-grid .sidebar { padding-left:16px; padding-right:16px; }
    /* 좁은 화면에서 180px 사진을 흘리면 옆 글자가 두세 자씩 끊긴다.
       플로트를 풀고 가운데로 세운다. 인라인 style 로 들어온 float 도
       덮어야 해서 !important 를 쓴다. */
    .article-content figure[style*="float"],
    .article-content figure.float-left,
    .article-content figure.float-right {
        float: none !important;
        max-width: 100% !important;
        margin: 16px auto !important;
    }
    .article-content figure img { width: 100%; height: auto; }
    .main-grid { grid-template-columns: 1fr; }
    .headline-area { grid-template-columns: 1fr; }
    .headline-hero { min-height: 250px; }
    .headline-hero-text h2 { font-size: 20px; }
    .headline-sub { flex-direction: column; }
    .headline-sub-item { border-right: none; border-bottom: 1px solid var(--line); }
    .focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .photo-interview { grid-template-columns: 1fr; }
    .section-news { grid-template-columns: 1fr; }
    .article-card .thumb { width: 120px; min-width: 120px; height: 80px; }
    .article-card .info h3 { font-size: 15px; }
    /* 헤더 규칙은 여기에 없다. 2026-09-19 모바일 시안(194:1139)이 태블릿(82:666)과
       **완전히 같은 헤더**라 ~985 블록 하나로 처리한다(둘 다 133 = 18+30+55+30).
       옛 규칙은 날짜를 숨기고 로고를 1행으로 올린 뒤 카테고리를 가로 스크롤로
       흘렸다 — 모바일 시안이 비어 있던 동안의 임시 배치였다. */
}

/* ── 검색 ───────────────────────────────────────────── */
/* 검색창은 헤더에서 서랍 안으로 옮겼다(시안 헤더에는 검색창이 없다). */
/* (옛 .drawer-search 는 2026-09-21 에 .hm-search 로 대체했다 — 시안 수치가 달라졌다.) */

.search-head { padding: 8px 0 20px; }
.search-box { display: flex; gap: 0; max-width: 640px; margin: 0 auto; border: 2px solid #1a1a1a; border-radius: 4px; overflow: hidden; }
.search-box input { flex: 1; border: 0; outline: 0; padding: 12px 16px; font-size: 16px; }
.search-box button { border: 0; background: #1a1a1a; color: #fff; padding: 0 26px; font-size: 15px; font-weight: 700; cursor: pointer; }
.search-box button:hover { background: #ea2121; }
/* 검색범위 선택(통합·제목·본문·기자·태그). 입력창 왼쪽에 붙여 한 덩어리로 보이게 한다.
   `appearance:none` 이라 화살표를 직접 그린다 — 기본 화살표는 브라우저마다 크기가 달라
   높이 44px 를 맞추기 어렵다. */
.search-box .search-field {
    flex: 0 0 auto; border: 0; border-right: 1px solid var(--line); outline: 0;
    padding: 0 26px 0 14px; font-size: 15px; font-weight: 700; color: #1a1a1a;
    background: #f5f5f5; cursor: pointer; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.search-box .search-field:focus { background-color: #ececec; }

.search-summary { font-size: 15px; color: #333; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.search-summary strong { color: #ea2121; }
.search-count { color: #666; margin-left: 6px; }
.search-took { color: #bbb; font-size: 12px; margin-left: 8px; }
.search-degraded { display: inline-block; margin-left: 8px; font-size: 11px; color: #a60; background: #fff6e5; border: 1px solid #f0d9a8; border-radius: 3px; padding: 1px 6px; }

.search-filters { padding: 12px 0 4px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.filter-label { font-size: 12px; color: #999; margin-right: 4px; }
.filter-label-sort { margin-left: 16px; }
.chip { display: inline-block; font-size: 13px; color: #444; padding: 4px 11px; border: 1px solid var(--line-box); border-radius: 14px; background: #fff; }
.chip:hover { border-color: #ea2121; color: #ea2121; }
.chip.on { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.chip.on:hover { color: #fff; }
.chip em { font-style: normal; color: #999; font-size: 11px; margin-left: 2px; }
.chip.on em { color: #ccc; }

.article-card .info h3 mark,
.article-card .info p mark { background: #fff2a8; color: inherit; padding: 0 1px; }
.meta-cat { display: inline-block; color: #ea2121; font-weight: 700; margin-right: 8px; }
.meta-body { display: inline-block; font-size: 11px; color: #666; background: #f0f0f0; border-radius: 3px; padding: 1px 6px; margin-right: 8px; }
.meta-cat:hover { text-decoration: underline; }

.search-empty { text-align: center; padding: 64px 20px; }
.search-empty-title { font-size: 17px; color: #333; font-weight: 700; margin-bottom: 10px; }
.search-empty-desc { font-size: 14px; color: #888; line-height: 1.7; }

.pager { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 28px 0 8px; }
.pager a, .pager strong { min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 13px; border: 1px solid var(--line); border-radius: 3px; color: #444; }
.pager a:hover { border-color: #ea2121; color: #ea2121; }
.pager strong { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }

@media (max-width: 690px) {
    .footer { padding: 40px 16px 36px; }
    .footer-links, .footer-info { gap: 10px 18px; }
    .search-box input { font-size: 15px; padding: 10px 12px; }
    .search-box button { padding: 0 18px; }
    /* 모바일에선 셋이 한 줄에 들어가야 해 범위 선택을 좁힌다 */
    .search-box .search-field { padding: 0 22px 0 10px; font-size: 14px;
                                background-position: right 7px center; }
    .filter-label-sort { margin-left: 0; }
}

/* ═══ 전체메뉴(searchMenu) — 2026-09-21 시안 ════════════════════════════
   PC 227:650 / 태블릿 228:3089 / 모바일 227:3011 "…-메뉴펼침".
   ≡+돋보기 아이콘이 여는 **헤더 아래 전폭 패널**이고, 열리면 그 아이콘이 ✕ 가 된다.

   PC(986~)  패널 padding 50 0 · gap 30
             검색창 800x60 · radius 30 · #f9f9f9 + 1px #ebebeb · 좌 30 우 15 · 가운데
             메뉴 9열 grid gap 42 · pt 30
   ~985      검색창 전폭 60 · 아코디언(1차 행 py15, +/− 14x14, 펼치면 2열)
             패널 안에 자체 헤더(로고 + ✕, 아래 '로그인 ›')가 있다

   🔴 시안에 SNS 줄도 하단 로그인/회원가입 줄도 없다. 2026-09-19 안에는 SNS 가
      있었는데 빠졌다.                                                        */
.cat-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); opacity:0; visibility:hidden;
               transition:opacity .2s, visibility .2s; z-index:95; }
.cat-overlay.on { opacity:1; visibility:visible; }

/* 🔴 닫힌 패널은 visibility:hidden 이어야 한다. opacity:0 만으로는 안의 검색창·링크가
   **Tab 순서에 그대로 남는다**(aria-hidden 은 포커스를 막지 못한다). */
.header-menu { position:absolute; left:0; right:0; top:100%; background:#fff;
               border-bottom:1px solid var(--line); box-shadow:0 8px 16px rgba(0,0,0,0.08);
               opacity:0; visibility:hidden; transform:translateY(-8px);
               transition:opacity .2s, visibility .2s, transform .2s;
               max-height:calc(100vh - 100%); overflow-y:auto; }
.header-menu.on { opacity:1; visibility:visible; transform:translateY(0); }
/* 🔴 .nav .sub-nav 는 z-index:200 이라 패널(transform 으로 만든 스태킹 컨텍스트,
   z-index auto)보다 위에 그려진다. 열린 동안 아예 끈다. */
body.menu-open .nav .sub-nav { display:none !important; }
/* 열리면 여는 아이콘이 ✕ 로 바뀐다(시안). 같은 버튼이라 마스크만 갈아 끼운다. */
body.menu-open .nav-drawer-btn::before {
    -webkit-mask-image:none; mask-image:none; background-color:transparent;
    content:'✕'; color:#111; font-size:26px; line-height:30px; text-align:center;
}
.header-menu-inner { max-width:1240px; margin:0 auto; padding:50px 20px; }

/* ── 검색창 ─────────────────────────────────────────────────────────── */
/* 시안 227:649 — 800x60, radius 30, 배경 #F9F9F9 에 **1px #EBEBEB 테두리**.
   테두리가 빠져 있었고 배경도 한 톤 어두웠다(2026-09-28 대조).
   높이 60 은 전역 border-box 덕에 테두리를 더해도 그대로다. */
.hm-search { display:flex; align-items:center; gap:10px; width:800px; max-width:100%;
             height:60px; margin:0 auto; padding:0 15px 0 30px;
             background:#f9f9f9; border:1px solid var(--line); border-radius:30px; }
.hm-search input { flex:1; min-width:0; border:0; outline:0; background:transparent;
                   font-size:16px; line-height:22px; letter-spacing:-0.4px; color:#111; }
.hm-search input::placeholder { color:#828282; }
.hm-search button { flex:none; width:30px; height:30px; padding:0; border:0; cursor:pointer;
                    background:transparent; color:#111;
                    display:flex; align-items:center; justify-content:center; }
.hm-search button:hover { color:#ea2121; }

/* ── 메뉴 ───────────────────────────────────────────────────────────── */
/* 검색메뉴 맨 아래 SNS — 메뉴를 닫으면 링크도 숨겨진다. */
.hm-social { display: flex; align-items: center; justify-content: center; gap: 12px;
             margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.hm-social a { display: inline-flex; align-items: center; justify-content: center;
               width: 40px; height: 40px; border: 1px solid var(--line-box); border-radius: 50%; color: #111; }
.hm-social a:hover { color: #ea2121; border-color: #ea2121; }
.hm-social a:focus-visible { outline: 2px solid #ea2121; outline-offset: 3px; }
.hm-social svg { width: 20px; height: 20px; fill: currentColor; }
.hm-grid { display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:42px;
           padding-top:60px; align-items:start; }   /* 30(패널 gap) + 30(menu pt) */
.hm-col { min-width:0; }
.hm-col-head { margin-bottom:30px; }
.hm-head { display:block; font-size:16px; font-weight:800; line-height:22px;
           letter-spacing:-0.4px; color:#111; }
.hm-head:hover { color:#ea2121; }
.hm-toggle { display:none; }                        /* 토글은 좁은 화면에서만 */
.hm-subs { display:flex; flex-direction:column; gap:10px; }
.hm-subs a { font-size:14px; font-weight:500; line-height:20px; letter-spacing:-0.4px; color:#828282;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hm-subs a:hover { color:#ea2121; }

/* 패널 자체 헤더는 좁은 화면 전용이다. PC 는 위에 본래 헤더가 그대로 보인다. */
.hm-head-m { display:none; }

/* ── 태블릿·모바일 (~985) — 아코디언 ─────────────────────────────────── */
@media (max-width:985px) {
    /* 패널이 헤더 아래가 아니라 **화면 전체**를 덮는다(시안이 그렇다). */
    .header-menu { position:fixed; top:0; left:0; right:0; bottom:0;
                   max-height:none; border-bottom:0; box-shadow:none; z-index:120; }
    .header-menu-inner { padding:10px 20px 40px; }

    .hm-head-m { display:block; position:relative; }
    .hm-logo { display:block; line-height:0; padding:10px 0; }
    .hm-logo img { display:block; width:158px; height:35px; }
    /* ✕ — 패널 안에서는 본래 헤더가 안 보이므로 여기 따로 둔다. */
    .hm-close { position:absolute; right:0; top:13px; width:30px; height:30px;
                border:0; background:transparent; cursor:pointer; padding:0;
                color:#111; font-size:26px; line-height:30px; }
    .hm-close::before { content:'✕'; }
    .hm-close:hover { color:#ea2121; }
    .hm-close:focus-visible { outline:2px solid #ea2121; outline-offset:3px; border-radius:2px; }
    /* '로그인 ›' — 시안 227:3028. 16px Bold + 8x14 화살표 */
    .hm-auth-m { margin:8px 0 0; }
    .hm-auth-m a { display:inline-flex; align-items:center; gap:8px;
                   font-size:16px; font-weight:700; line-height:22px; color:#111; }
    .hm-auth-m a::after { content:''; width:8px; height:14px; flex:none;
                          background-color:currentColor;
                          -webkit-mask:url(/img/chevron-right.svg) no-repeat center / 8px 14px;
                                  mask:url(/img/chevron-right.svg) no-repeat center / 8px 14px; }

    .hm-search { width:100%; margin-top:34px; }

    /* 9열 → 아코디언. 행 하나가 .hm-col 이다.
       🔴 시안은 **첫 행 위에도 선이 있다**(Line 64). 아래 선만 두면 맨 위가 뚫린다.
       🔴 여백은 **margin** 이다. padding 으로 주면 테두리가 요소 맨 위에 그려져
          선이 검색창에 딱 붙고 34 가 선 아래로 간다(실측 0/35 였다).
          시안은 검색창 → 34 → 선 → 첫 행이다. PC 의 padding-top:60 도 끈다. */
    .hm-grid { display:block; margin-top:34px; padding-top:0;
               border-top:1px solid var(--line); }
    .hm-col { border-bottom:1px solid var(--line); }
    .hm-col-head { display:flex; align-items:center; justify-content:space-between;
                   gap:12px; margin-bottom:0; padding:15px 0; }
    /* 🔴 PC(194:1169)는 ExtraBold 800 인데 좁은 화면(228:3117)은 **Bold 700** 이다.
       같은 16/22/-0.4/#111 인데 굵기만 다르다. */
    .hm-col-head .hm-head { flex:1; min-width:0; font-weight:700; }
    /* +/− 토글. 이미지를 더 받지 않으려고 CSS 로 그린다(풋터와 같은 규약). */
    .hm-toggle { display:block; position:relative; flex:none; width:14px; height:14px;
                 border:0; background:transparent; cursor:pointer; padding:0; }
    /* 시안 228:3118 의 SVG 는 fill #DADADE 에 획 두께 2 다(접힘 14x14 +,
       펼침 14x2 −). 검정 1px 로 들어가 있었다. */
    .hm-toggle::before, .hm-toggle::after {
        content:''; position:absolute; left:50%; top:50%; background:#dadade;
        transform:translate(-50%,-50%);
    }
    .hm-toggle::before { width:14px; height:2px; }        /* 가로줄: 늘 보인다 */
    .hm-toggle::after  { width:2px; height:14px; }        /* 세로줄: 펼치면 사라진다 */
    .hm-toggle[aria-expanded="true"]::after { display:none; }
    .hm-toggle:focus-visible { outline:2px solid #ea2121; outline-offset:3px; }

    /* 하위는 접혀 있다가 2열로 펼쳐진다(시안 227:3057). */
    .hm-subs { display:none; }
    /* 시안 228:3140 — 열이 정확히 절반씩이고 **열 사이 여백이 없다**.
       위 15 는 행의 padding-bottom 이 대신하고, 아래는 30 이다.
       글자는 PC 와 같은 14/20 Medium 이라 여기서 덮을 것이 없다. */
    /* 🔴 기본 .hm-subs 는 flex 세로 `gap:10px` 라 **column-gap 10 이 남는다.**
          row-gap 만 다시 줘서는 안 지워진다 — 0 을 명시한다(시안은 열이 정확히 절반). */
    .hm-col.is-open .hm-subs { display:grid; grid-template-columns:1fr 1fr;
                               column-gap:0; row-gap:10px; padding:0 0 30px; }
}

@media (max-width:690px) {
    .header-menu-inner { padding:10px 20px 40px; }
    /* 시안(PC-카테고리-type1)은 PC 전용이다. 좁은 화면에서 32px 는 두 줄로 넘친다. */
    .section-title.is-under,
    .cat-head .section-title { font-size: 24px; line-height: 32px; }
    .subcat-nav { gap: 18px; }
    .subcat-chip { font-size: 15px; }
}

/* 회원 인증 폼 */
.auth-wrap { max-width:400px; margin:40px auto; padding:0 16px; }
.auth-title { font-size:24px; font-weight:800; text-align:center; margin-bottom:20px; }
.auth-desc { color:#666; font-size:14px; text-align:center; margin-bottom:16px; }
.auth-form { display:flex; flex-direction:column; gap:10px; }
.auth-form input { padding:13px 14px; border:1px solid var(--line); border-radius:6px; font-size:15px; }
.auth-form input:focus { border-color:#ea2121; outline:none; }
.auth-btn { padding:14px; background:#ea2121; color:#fff; border:none; border-radius:6px; font-size:16px; font-weight:700; cursor:pointer; margin-top:4px; }
.auth-btn:hover { background:#a00; }
.auth-links { display:flex; justify-content:center; gap:16px; margin-top:16px; font-size:13px; }
.auth-links a { color:#555; }
.auth-links a:hover { color:#ea2121; }
.auth-error { background:#fdecea; color:#c0392b; padding:11px 14px; border-radius:6px; font-size:14px; margin-bottom:14px; }
.auth-notice { background:#eef7ee; color:#2d8a34; padding:11px 14px; border-radius:6px; font-size:14px; margin-bottom:14px; }
.comment-asuser { padding:8px 0; font-size:14px; color:#333; }
.comment-asuser strong { color:#ea2121; }
.comment-login-hint { font-size:12px; color:#888; margin:4px 0 0; }
.comment-login-hint a { color:#ea2121; text-decoration:underline; }

/* 안내데스크(com) */
.com-wrap { display:flex; gap:30px; padding:30px 0 60px; }
.com-side { flex:0 0 180px; }
/* 묶음 제목(매체소개/고객센터/약관 및 정책). 첫 묶음만 위 여백이 없다. */
.com-side h3 { font-size:18px; font-weight:800; padding-bottom:12px; border-bottom:2px solid #ea2121; margin-bottom:10px; }
.com-side h3 + ul + h3 { margin-top:26px; }
.com-side ul { list-style:none; }
.com-side li a { display:block; padding:10px 8px; color:#444; border-bottom:1px solid var(--line); font-size:14px; }
.com-side li a:hover { color:#ea2121; }
.com-side li a.on { color:#ea2121; font-weight:700; }
.com-main { flex:1; min-width:0; }
.com-h { font-size:26px; font-weight:800; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid #222; }
.com-body { line-height:1.8; color:#333; font-size:15px; }
.com-body h2 { font-size:20px; font-weight:700; margin:24px 0 10px; }
.com-body h3 { font-size:17px; font-weight:700; margin:18px 0 8px; }
.com-body p { margin:8px 0; }
.com-body ul, .com-body ol { margin:8px 0 8px 20px; }
.com-body li { margin:4px 0; list-style:disc; }
.com-body table { border-collapse:collapse; width:100%; margin:12px 0; }
.com-body th, .com-body td { border:1px solid var(--line-box); padding:8px 10px; font-size:14px; }

/* ── 매체소개 4종 — 2026-09-21 『중앙신문_인사말_연혁_등등_260821.hwpx』 ──── */

/* 인사말: 표제·부제·서명 */
.com-lead { font-size:20px; font-weight:800; line-height:1.5; color:#111; margin:4px 0 12px; }
.com-sub  { font-size:16px; font-weight:700; color:#ea2121; margin-bottom:18px; }
.com-sign { margin-top:22px; font-weight:700; color:#111; }

/* 연혁: 연도 | 월+내용 2열. 연도가 같은 항목은 한 덩어리로 묶는다. */
.history { margin-top:10px; }
.hist-row { display:flex; gap:24px; padding:16px 0; border-top:1px solid var(--line); }
.hist-row:first-child { border-top:0; }
.hist-y { flex:none; width:72px; font-size:20px; font-weight:800; color:#ea2121; line-height:1.6; }
.hist-list { flex:1; min-width:0; margin:0; list-style:none; }
.history .hist-list li { margin:0 0 6px; list-style:none; display:flex; gap:10px; }
.history .hist-list li:last-child { margin-bottom:0; }
/* 월이 비는 줄(같은 달의 두 번째 항목)도 자리를 지켜 본문이 가지런히 선다. */
.hist-m { flex:none; width:32px; color:#888; font-weight:700; }

/* 조직도: 대표이사 → 위원회 → 3국. 표가 아니라 상자와 선으로 그린다. */
.orgchart { margin-top:14px; text-align:center; }
.org-box { display:inline-block; padding:10px 18px; border:1px solid var(--line-box); border-radius:6px;
           background:#fff; font-size:15px; font-weight:700; color:#111; }
.org-box small { display:block; font-size:12px; font-weight:400; color:#777; }
.org-ceo { background:#ea2121; border-color:#ea2121; color:#fff; padding:12px 28px; font-size:17px; }
.org-ceo small { color:rgba(255,255,255,.85); }
/* 대표이사 아래로 내려오는 세로선 */
.org-top { position:relative; padding-bottom:22px; }
.org-top::after { content:''; position:absolute; left:50%; bottom:0; width:1px; height:22px; background:#d1d1d1; }
.org-committee { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-bottom:22px;
                 position:relative; }
.org-committee::after { content:''; position:absolute; left:50%; bottom:0; width:1px; height:22px; background:#d1d1d1; }
.org-committee .org-box { font-weight:400; font-size:14px; color:#555; }
.org-divisions { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:flex-start; }
.org-div { flex:1 1 200px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.org-head { background:#f5f5f5; width:100%; }
.org-sub { font-weight:400; font-size:14px; }
.orgchart .org-depts { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px;
                       margin:4px 0 0; width:100%; }
.orgchart .org-depts li { list-style:none; margin:0; padding:7px 4px; border:1px solid var(--line-box);
                          border-radius:4px; font-size:13px; color:#444; }

/* 찾아오시는 길: 사옥 2개를 나란히 */
.way { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:14px; }
.way-item { border:1px solid var(--line-box); border-radius:8px; padding:18px 20px; }
.com-body .way-item h3 { margin:0 0 6px; font-size:17px; color:#ea2121; }
.way-zip { color:#888; font-size:13px; }
.way-item a { color:#ea2121; font-weight:700; }

/* 약관·정책 문서 공통 (윤리강령·편집규약·고충처리위원회) */
.com-date  { color:#888; font-size:13px; line-height:1.7; margin-bottom:14px; }
.com-empty { color:#666; text-align:center; padding:50px 0; line-height:2; }
.com-contact { background:#f8f8f8; border-left:3px solid #ea2121; padding:12px 16px; margin:14px 0; }
/* 목차 — 본문 절과 번호가 같아야 해서 ol 번호를 그대로 쓴다. */
.com-body .com-toc { margin:14px 0 24px; padding:16px 20px 16px 38px;
                     background:#f8f8f8; border-radius:6px; }
.com-body .com-toc li { list-style:decimal; margin:3px 0; color:#444; font-size:14px; }
/* 절 안의 항목은 불릿 대신 들여쓴 줄로 둔다 — 원문이 문단 나열이다. */
.com-body h3 + ul li, .com-body h3 + p + ul li { list-style:none; position:relative; padding-left:12px; }
.com-body h3 + ul li::before, .com-body h3 + p + ul li::before {
    content:''; position:absolute; left:0; top:11px; width:4px; height:4px;
    border-radius:50%; background:#c9c9c9;
}
.com-body h4 { font-size:15px; font-weight:700; margin:16px 0 6px; }

@media (max-width:690px) {
    .hist-row { flex-direction:column; gap:6px; }
    .hist-y { width:auto; font-size:18px; }
    .way { grid-template-columns:1fr; }
    .orgchart .org-depts { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.com-body th { background:#f7f7f7; }
/* 고객센터 폼 */
.cs-tabs { display:flex; gap:8px; margin-bottom:20px; }
.cs-tab { padding:10px 24px; border:1px solid var(--line-box); border-radius:6px; color:#555; font-weight:700; }
.cs-tab.on { background:#ea2121; color:#fff; border-color:#ea2121; }
.cs-desc { color:#777; font-size:14px; margin-bottom:14px; }
.cs-form { display:flex; flex-direction:column; gap:10px; max-width:640px; }
.cs-row { display:flex; gap:10px; }
.cs-row input { flex:1; }
.cs-form input, .cs-form textarea { padding:12px 14px; border:1px solid var(--line); border-radius:6px; font-size:15px; font-family:inherit; }
.cs-form input:focus, .cs-form textarea:focus { border-color:#ea2121; outline:none; }
.cs-asuser { font-size:14px; color:#333; padding:4px 0; }
.cs-asuser strong { color:#ea2121; }
.cs-btn { padding:14px; background:#ea2121; color:#fff; border:none; border-radius:6px; font-size:16px; font-weight:700; cursor:pointer; }
.cs-done { background:#eef7ee; color:#2d8a34; padding:12px 16px; border-radius:6px; margin-bottom:16px; }
.cs-error { background:#fdecea; color:#c0392b; padding:12px 16px; border-radius:6px; margin-bottom:16px; }
@media (max-width: 690px){ .com-wrap{flex-direction:column;} .com-side{flex:none;} }

/* ---- 기사 도구모음 (공유 / 즐겨찾기 / 인쇄 / 글자크기) ---- */
.article-tools { display:flex; align-items:center; justify-content:space-between; gap:12px;
                 flex-wrap:wrap; padding:10px 0 16px; }
.at-group { display:flex; align-items:center; gap:6px; }
.at-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px;
          min-width:34px; height:34px; padding:0 10px; border:1px solid var(--line); border-radius:6px;
          background:#fff; color:#555; font-size:13px; font-family:inherit; line-height:1;
          cursor:pointer; transition:border-color .15s, color .15s; }
.at-btn:hover { border-color:#ea2121; color:#ea2121; }
.at-btn[aria-pressed="true"] { border-color:#ea2121; background:#fff5f5; color:#ea2121; font-weight:700; }
.at-btn svg { width:15px; height:15px; fill:currentColor; }
.at-sep { width:1px; height:20px; background:#e5e5e5; margin:0 2px; }
.at-size-label { font-size:12px; color:#999; margin-right:2px; }
/* 글자크기: 본문에만 적용한다. 배율을 곱해 캡션·인용도 같이 커지게 한다 */
.article-content { font-size:calc(16px * var(--article-scale, 1)); }
.article-content figcaption { font-size:calc(13px * var(--article-scale, 1)); }
.at-toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%);
            background:rgba(0,0,0,.82); color:#fff; padding:11px 18px; border-radius:20px;
            font-size:14px; z-index:9999; opacity:0; pointer-events:none; transition:opacity .2s; }
.at-toast.on { opacity:1; }
@media (max-width: 690px){
    .article-tools { justify-content:flex-start; }
    .at-btn span { display:none; }        /* 모바일은 아이콘만 */
    .at-btn { padding:0; }
    .at-size-label { display:none; }
}

/* 인터넷신문윤리위원회 로고(`footer` 배너 슬롯). 홈 맨 아래 **오른쪽**에만 둔다
   (2026-09-29 요청). 예전에는 전 페이지 아래에 가운데로 넓게 깔렸다.
   🔴 슬롯 안의 <img> 가 `margin:0 auto` 라 가운데로 몰린다 — 여기서 되돌린다. */
/* 인터넷신문윤리위원회 로고. 풋터 회사정보 줄의 **맨 오른쪽**에 붙는다
   (2026-09-30 클라이언트 요청. 그 전에는 풋터 위에 따로 한 줄을 차지했다). */
.footer-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.footer-meta-text { min-width: 0; flex: 1 1 auto; }   /* min-width:0 이라야 주소가 넘칠 때 줄어든다 */
.foot-badge { flex: 0 0 auto; margin: 0 0 16px; }     /* copyright 줄 높이만큼 띄워 바닥을 맞춘다 */
/* 🔴 선택자에 `ad` 가 들어가면 안 된다. 광고차단기가 `.ad-slot` 을 통째로 숨겨
   **로고가 안 보였다**(2026-09-30). 마크업은 `slot-plain` 으로 바꿨다
   (news/lib/adRender.js 의 renderPlain). 기기 분기도 여기서 따로 맡는다 —
   `.ad-slot[data-dev~=..]` 규칙에 더는 걸리지 않기 때문이다. */
/* 🔴 로고가 **여럿**일 수 있다 — 인신위 + 한국인터넷신문협회처럼.
   예전엔 img 마다 `margin-left:auto` 로 오른쪽에 붙였는데, 그러면 블록이라
   하나씩 줄바꿈된다. flex 로 **한 줄에 나란히**, 오른쪽 끝 정렬로 둔다.
   개수가 늘어도 CSS 를 다시 손댈 필요가 없다. 좁으면 접힌다(flex-wrap). */
.foot-badge .slot-plain { display: none; margin: 0;
                          justify-content: flex-end; align-items: center;
                          gap: 14px; flex-wrap: wrap; }
.foot-badge .slot-plain > * { max-width: 100%; }
/* 🔴 로고마다 원본 크기가 다르다 — 인신위 120x23, 한국인터넷신문협회 270x78.
   그대로 두면 협회 로고가 인신위의 세 배 넘게 커서 한쪽만 도드라진다.
   **높이 상한**으로 맞춘다(너비는 auto 라 비율이 유지된다):
     인신위  120x23 → 그대로(상한 아래)
     협회    270x78 → 97x28
   ⚠ `height`(고정)가 아니라 `max-height` 다. 작은 로고를 억지로 키우면
     래스터라 흐려진다. */
.foot-badge .slot-plain img { margin: 0 !important; display: block;
                              max-width: 100%; height: auto; max-height: 28px; }
@media (min-width: 986px)  { .foot-badge .slot-plain[data-on~="pc"]     { display: flex; } }
@media (max-width: 985px) and (min-width: 691px)
                           { .foot-badge .slot-plain[data-on~="tablet"] { display: flex; } }
@media (max-width: 690px)  { .foot-badge .slot-plain[data-on~="mobile"] { display: flex; } }
/* 좁은 화면에서는 옆에 붙이지 않는다 — 주소가 두 글자씩 꺾인다. */
@media (max-width: 985px) {
    .footer-meta { display: block; }
    .foot-badge { margin: 20px 0 0; display: flex; justify-content: flex-end; }
}

/* ---- 즐겨찾기 목록 (/scrap) ---- */
.scrap-page { padding:24px 30px 30px; }
/* 제목과 '전체 삭제'가 한 행이다. 다른 페이지 제목은 h2 가 블록이라 밑줄이
   칼럼 전체를 긋는데, 여기서는 flex 아이템이라 글자 폭에서 끊긴다 —
   선을 행으로 올려 폭을 맞춘다. */
.scrap-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
              border-bottom:3px solid #ea2121; padding-bottom:15px; margin-bottom:15px; }
.scrap-head .section-title { margin-bottom:0; border-bottom:0; padding-bottom:0; }
.scrap-list { list-style:none; margin:16px 0 0; padding:0; border-top:2px solid #1a1a1a; }
.scrap-list li { display:flex; align-items:center; gap:12px; padding:14px 2px;
                 border-bottom:1px solid var(--line); }
.scrap-title { flex:1; min-width:0; font-size:16px; color:#222; line-height:1.5;
               overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
               -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.scrap-title:hover { color:#ea2121; }
.scrap-date { flex:none; font-size:13px; color:#999; }
.scrap-del { flex:none; border:1px solid var(--line-box); background:#fff; color:#888; cursor:pointer;
             border-radius:5px; padding:5px 9px; font-size:12px; font-family:inherit; }
.scrap-del:hover { border-color:#ea2121; color:#ea2121; }
.scrap-empty { padding:48px 0; text-align:center; color:#888; line-height:1.8; }
.scrap-note { margin-top:20px; padding-top:14px; border-top:1px solid var(--line);
              font-size:13px; color:#aaa; line-height:1.7; }
@media (max-width: 690px){ .scrap-page { padding:18px 16px 24px; } .scrap-date { display:none; } }

/* ---- 인쇄 ---- */
/* 별도 인쇄용 페이지를 두지 않고 기사 화면을 그대로 정리해서 찍는다.
   데일리안의 printPage.html 은 레이아웃 CSS 를 통째로 물고 있어 유지비가 컸다. */
@media print {
    header, footer, .sidebar, .article-tools, .article-related, .comment-section,
    .header-menu, .cat-overlay, .nav-drawer-btn, .google-source-btn, .article-tags,
    nav, .banner, iframe { display:none !important; }
    body { background:#fff; color:#000; font-size:11pt; }
    .container, .main-grid, .main-content, .article-detail {
        display:block !important; width:auto !important; max-width:none !important;
        margin:0 !important; padding:0 !important; box-shadow:none !important; border:0 !important; }
    .article-title { font-size:20pt; margin:0 0 8pt; }
    .article-subtitle { font-size:12pt; color:#333; }
    .article-meta { border-top:1px solid #000; border-bottom:1px solid #000;
                    font-size:9pt; color:#000; }
    .article-content { font-size:11pt !important; line-height:1.7; }
    /* 화면은 line-height 1.85 라 단락 마진도 1.85em 이다. 인쇄는 1.7 이므로
       여기서도 '한 줄'이 되도록 맞춘다. */
    .article-content p { margin-bottom:1.7em; }
    .article-content img, .article-content figure { max-width:100% !important; page-break-inside:avoid; }
    /* 인쇄물에는 출처가 남아야 한다 */
    .article-detail::after { content:"출처: 중앙신문 (www.jasm.co.kr)";
                             display:block; margin-top:14pt; padding-top:6pt;
                             border-top:1px solid #999; font-size:9pt; color:#333; }
    a[href]:after { content:""; }   /* URL 을 본문에 흘리지 않는다 */
}

/* ── 카테고리 페이지 (category.ejs 에서 옮김) ──────────── */
/* 카테고리 머리 — 시안 `308:881`. [제목 → 20 → 하위탭 → 20 → 빨강 3px] 한 덩어리다.
   선을 제목이 아니라 **블록 바닥**에 건다(예전에는 제목 밑줄이라 둘을 갈랐다). */
.cat-head { border-bottom: 3px solid #ea2121; padding-bottom: 20px; margin-bottom: 30px; }

/* ── 카테고리 화면 (시안 PC-카테고리-type1 `303:475`) ─────────────────────
   🔴 **모든 카테고리가 한 뷰를 쓴다.** 변형은 `layout` 하나로만 가른다 —
      지금은 오피니언만 곁블록이 붙는다(사설·최신칼럼·기자수첩).
      폭은 시안과 그대로 맞는다: 1200 = 본문 870 + 사이드바 300 + 간격 30. */

/* 블록 제목 — '사설 >' '최신칼럼 >' '기자수첩 >' (312:8 · 320:14 · 322:501).
   꺾쇠는 8x14 벡터인데, 아이콘 파일을 늘리지 않으려고 테두리로 그린다. */
.block-head { display: inline-flex; align-items: center; gap: 8px;
              font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: #000; }
.block-head .chev { width: 8px; height: 14px; flex: none; position: relative; }
.block-head .chev::before { content: ''; position: absolute; top: 3px; left: 0;
    width: 7px; height: 7px; border-right: 2px solid #111; border-top: 2px solid #111;
    transform: rotate(45deg); }
.block-head:hover, .block-head:hover .chev::before { color: #ea2121; border-color: #ea2121; }

/* ── 탑기사 (320:9) — 기본 [본문 20fr | 사진 22fr], 오피니언은 +[사설 15fr] ── */
.cat-top { display: grid; grid-template-columns: 20fr 22fr; gap: 30px;
           align-items: start; margin-bottom: 30px; }
.cat-top.has-side { grid-template-columns: 20fr 22fr 15fr; }
.cat-top-text { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
/* 제목 32/44 3줄 · 메인 기사 발췌 16/26 최대 8줄. */
.cat-top-text h3 { font-size: 32px; line-height: 44px; font-weight: 700;
                   letter-spacing: -0.4px; color: #000;
                   display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
                   overflow: hidden; }
.cat-top-text p { font-size: 16px; line-height: 26px; color: #828282; letter-spacing: -0.4px;
                  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
                  overflow: hidden; }
.cat-top-text:hover h3 { color: #ea2121; }
.cat-top-thumb { display: block; aspect-ratio: 22 / 10; overflow: hidden; background: #d9d9d9; }
.cat-top-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 사설 — 첫 건만 썸네일 105x80, 나머지는 제목만. 사이에 실선(312:15/312:18). */
.cat-top-side { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.ed-list { list-style: none; display: flex; flex-direction: column; gap: 15px; }
.ed-list li { display: flex; gap: 15px; align-items: flex-start; min-width: 0; }
.ed-list li + li { border-top: 1px solid var(--line); padding-top: 15px; }
.ed-thumb { flex: none; width: 105px; height: 80px; overflow: hidden; background: #d9d9d9; }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-title { flex: 1; min-width: 0; font-size: 19px; line-height: 26px; font-weight: 700;
            letter-spacing: -0.4px; color: #111;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ed-title:hover { color: #ea2121; }

/* ── 곁블록 공통 — 위에 빨강 3px, 제목, 내용 (322:502 의 Line 4) ── */
.op-block { border-top: 3px solid #ea2121; padding-top: 15px; margin-bottom: 30px; }
.op-block > .block-head { margin-bottom: 15px; }
.op-block .label { display: block; font-size: 14px; line-height: 20px; font-weight: 700;
                   letter-spacing: -0.4px; color: #ea2121;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-block .title { display: -webkit-box; font-size: 16px; line-height: 22px; font-weight: 700;
                   letter-spacing: -0.4px; color: #000;
                   -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.op-block .title:hover { color: #ea2121; }

/* 최신칼럼 (322:327) — 1200 전폭 3x3. 원형 기자사진 80.
   🔴 칸 사이 선은 **가로도 세로도** 시안에 있다(Line 72/76 · Line 21/75).
      가로선은 한 줄을 통째로 가로지른다 — 칸마다 그으면 세로 간격에서 끊긴다.
      그래서 줄 첫 칸에서 격자 폭만큼(300% + 두 칸 간격) 그린다. */
.op-columns .col-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
                        column-gap: 60px; row-gap: 30px; }
.op-columns .col-grid > li { position: relative; display: flex; gap: 15px; min-width: 0; }
.op-columns .col-grid > li:not(:nth-child(3n+1))::before {
    content: ''; position: absolute; left: -30px; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.op-columns .col-grid > li:nth-child(3n+1):not(:first-child)::after {
    content: ''; position: absolute; top: -15px; left: 0; width: calc(300% + 120px);
    border-top: 1px solid var(--line); }
.col-face { flex: none; width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
            background: #d9d9d9; }
.col-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

/* 기자수첩 (322:502) — 본문 컬럼(870) 안, 3장 나란히. 썸네일 270x150. */
.op-reporter .rep-row { list-style: none; display: flex; gap: 30px; align-items: flex-start; }
.op-reporter .rep-row > li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
.rep-thumb { display: block; aspect-ratio: 270 / 150; overflow: hidden; background: #d9d9d9; }
.rep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rep-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* ── 페이지네이션 (322:324) ─────────────────────────────────────────
   현재 페이지는 빨강 + 밑줄, 나머지는 #111. 화살표는 40 원형. */
.pagination { display: flex; justify-content: center; align-items: center; gap: 40px;
              padding: 30px 0; flex-wrap: wrap; }
.pg-num { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.4px; color: #111; }
.pg-num:hover { color: #ea2121; }
.pg-num.is-on { color: #ea2121; text-decoration: underline; text-underline-position: from-font; }
.pg-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
            display: flex; align-items: center; justify-content: center;
            font-size: 16px; color: #111; }
.pg-arrow:hover { border-color: #ea2121; color: #ea2121; }
.pg-arrow.is-off { color: #ccc; border-color: #eee; }

/* 🔴 사이드바 '많이 본 기사' 번호는 **이 화면에서만** 빨강이다(321:168).
   홈·기사·검색은 각자 시안(77:501 · 240:9)이 검정이라 건드리지 않는다.
   두 시안이 엇갈려 있어 한쪽으로 통일할지는 사람이 정해야 한다. */
.view-category .ranking-list li::before { color: #ea2121; }

/* 목록 카드 (322:537 의 870x150) — **카테고리 화면에만** 건다.
   🔴 `.article-card` 는 전체뉴스·검색도 쓴다. 그 두 화면은 시안이 따로 있어
      여기서 같이 바꾸면 안 된다. 그래서 `view-category` 로 가둔다. */
/* 🔴 시안의 리듬은 [실선 — 30 — 카드 150 — 30 — 실선] 이다(322:537 을 역산:
   높이 2170 = 카드 10x150 + 페이지네이션 40 + 간격 21x30). 실선은 첫 카드 **위에도**
   있고 마지막 카드 **아래에도** 있다. */
.view-category #articleList { border-top: 1px solid var(--line); }
.view-category .article-card { gap: 30px; padding: 30px 0; align-items: center;
                               border-bottom: 1px solid var(--line); }
.view-category .article-card:last-child { border-bottom: 1px solid var(--line); }
.view-category .article-card .thumb { width: 240px; min-width: 240px; height: 150px; }
.view-category .article-card .info h3 { font-size: 16px; line-height: 22px; font-weight: 700;
    letter-spacing: -0.4px; color: #000; margin-bottom: 15px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-category .article-card .info p { font-size: 14px; line-height: 20px; color: #828282;
    letter-spacing: -0.4px; -webkit-line-clamp: 3; }
.view-category .article-card .info .meta { font-size: 14px; line-height: 20px; color: #828282;
    font-weight: 500; letter-spacing: -0.4px; margin-top: 15px; }
.cat-head .section-title { border: 0; padding: 0; margin: 0; }
.cat-head .subcat-nav { margin: 20px 0 0; }
/* 하위 탭 — 칩이 아니라 **글자**다. 17px Bold #111, 항목 간격 30.
   시안에 활성 표시가 없어(고른 것이 없는 상태다) 강조색으로 집는다 —
   배경을 칠하던 빨간 알약은 시안의 판면 원칙과 맞지 않는다. */
.subcat-nav { display:flex; flex-wrap:wrap; gap:30px; margin:4px 0 16px; }
.subcat-chip { font-size:17px; font-weight:700; line-height:20px; letter-spacing:-0.4px;
               color:#111; background:none; padding:0; border-radius:0; }
.subcat-chip:hover { color:#ea2121; background:none; }
.subcat-chip.on { color:#ea2121; background:none; }
/* 🔴 옛 `.category-top*` (배지 TOP + 좌우 2단)은 2026-10-01 에 걷어냈다.
   오피니언 시안(`320:9`)이 탑기사를 [본문 | 사진 (| 사설)] 격자로 다시 잡았고,
   그 마크업이 `.cat-top` 이다. 뷰에서 쓰는 곳이 하나도 없어 규칙만 남아 있었다. */

/* ── 뷰의 인라인 style 을 걷어낸 것들 ─────────────────────
   style="..." 속성은 미디어쿼리로 덮을 수 없어 반응형에서 늘 발목을 잡는다.
   실제로 기사 본문의 style="padding:30px" 때문에 모바일이 깨진 적이 있다.
   선언은 원본 그대로 옮겼다. */

/* 목록 더보기 — category · newslist · search 공용.
   초기 display:none 은 JS 가 style.display 에 명시값을 넣어 덮는다. */
.empty-msg { color: #999; padding: 40px 0; text-align: center; }
.scroll-sentinel { height: 1px; }
.load-more-area { text-align: center; padding: 10px 0 40px; }
.load-more-btn { display: none; padding: 12px 40px; font-size: 15px; color: #ea2121; background: #fff; border: 1px solid #ea2121; border-radius: 4px; cursor: pointer; }
.load-more-spinner { display: none; color: #999; padding: 10px; }

/* 답글 폼 여닫기는 위 댓글 블록(.reply-form / .reply-form.on)에 있다.
   2026-09-25 시안 반영 때 .comment-depth-* · .reply-actions ·
   .comment-submit-btn 은 마크업에서 사라져 규칙도 같이 지웠다. */
.section-empty { padding: 40px; text-align: center; color: #999; }

/* 카테고리 제목 옆 중분류 */
.section-title .subname { color: #ea2121; }

/* 정보 페이지 */
.info-section { min-height: 400px; }
.info-body { padding: 20px 0; line-height: 1.8; }

/* 푸터에서 강조하는 링크(개인정보처리방침) */
/* 개인정보처리방침은 법령상 다른 항목보다 도드라져야 한다 */
.footer-links a.strong { color: #ea2121; }

/* 오피니언 / 기자수첩 — 2026-09-11 PC 시안 사이드바(77:526).
   리드는 이미지 + 필자명 + 제목, 이후는 필자명 + 제목만. 시안의 필자 사진은
   member 에 사진 컬럼이 없어 뺐다(뷰 주석 참조). */
.opinion-side .op-lead { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* 🔴 리드 이미지도 각진 사각이다(시안 77:531 에 radius 가 없다). */
.opinion-side .op-lead .thumb-link { display: block; margin-bottom: 14px; overflow: hidden; }
.opinion-side .op-lead img { width: 100%; aspect-ratio: 300 / 150; object-fit: cover; display: block; }
/* 리드 제목 19px Bold / 26px (시안 77:534) */
.opinion-side .op-lead h3 { font-size: 19px; font-weight: 700; line-height: 26px;
                            letter-spacing: -0.4px; color: #111; }
/* 필자·코너명 14px Bold 빨강 / 20px, 제목과 5px 띄운다 (시안 77:533) */
.op-label { display: block; font-size: 14px; font-weight: 700; line-height: 20px;
            letter-spacing: -0.4px; color: #ea2121; margin-bottom: 5px; }
.op-list { list-style: none; }
/* 시안: 필자 사진 60x60 원형. 오피니언은 오른쪽, 기자수첩은 왼쪽에 온다.
   사진을 안 올린 기자는 마크업째 빠지고 제목이 폭을 다 쓴다. */
.op-list li { padding: 13px 0; border-bottom: 1px solid var(--line);
              display: flex; align-items: flex-start; gap: 15px; }
.op-body { flex: 1; min-width: 0; }
.op-face { flex: none; width: 60px; height: 60px; border-radius: 50%;
           overflow: hidden; background: #eee; }
.op-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-list li:last-child { border-bottom: none; padding-bottom: 0; }
/* 목록 제목 16px Bold / 22px (시안 77:538). 600 이 아니라 700 이다. */
.op-list h3 { font-size: 16px; font-weight: 700; line-height: 22px;
              letter-spacing: -0.4px; color: #111; }
.op-list h3 a:hover, .opinion-side .op-lead h3 a:hover { color: #ea2121; }

/* 제휴지자체 — 2026-09-11 PC 시안(77:737).
   시안 값: 카드 #f5f5f5 / radius 15 / padding 30, 탭 h39 radius5 padding 8x10 gap20,
   활성 탭 bg·border #ea2121 흰 글씨 / 비활성 흰 배경 + #d1d1d1 테두리,
   콘텐츠 195 + 195 + 360 (gap 30), 카드 이미지 195x130 radius10.
   섹션 헤더(빨간 라인+제목)가 없는 블록이라 .section 을 쓰지 않는다. */
.partner-local { background: #f5f5f5; border-radius: 15px; padding: 30px; margin-bottom: 20px; }
.pl-tabs { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 30px; }
.pl-tab {
    display: inline-flex; align-items: center; gap: 30px;
    height: 39px; padding: 8px 10px; border-radius: 5px; cursor: pointer;
    background: #fff; border: 1px solid var(--line); color: #111;
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 22px;
    letter-spacing: -0.4px; white-space: nowrap;
}
/* 탭의 ↗ 도 시안에서 내보낸 SVG 다. currentColor 라 활성 탭에서 흰색이 된다. */
.pl-tab::after {
    content: ''; width: 13px; height: 13px; flex: none; background-color: currentColor;
    -webkit-mask: url(/img/arrow-ne.svg) no-repeat center / 13px 13px;
            mask: url(/img/arrow-ne.svg) no-repeat center / 13px 13px;
}
.pl-tab.is-on { background: #ea2121; border-color: #ea2121; color: #fff; }

/* 카드 2 + 리스트 1 의 3열. 시안 비율 195:195:360 이다.
   min-width:0 은 필수 — 기본 min-width:auto 라 긴 제목이 트랙을 밀어낸다. */
.pl-panel { display: grid; grid-template-columns: 195fr 195fr 360fr; gap: 30px; }
.pl-panel[hidden] { display: none; }   /* display:grid 가 기본 [hidden] 을 이긴다 */
.pl-panel > * { min-width: 0; }
.pl-card .pl-thumb { display: block; border-radius: 10px; overflow: hidden; margin-bottom: 15px; }
.pl-card .pl-thumb img { width: 100%; aspect-ratio: 195 / 130; object-fit: cover; display: block; }
.pl-card h3 { font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -0.4px; color: #111;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pl-card h3 a:hover, .pl-list a:hover { color: #ea2121; }
.pl-list { list-style: none; }
.pl-list li { padding: 8px 0; border-bottom: 1px solid #d9d9d9; }
.pl-list li:last-child { border-bottom: none; }
/* 시안은 리스트 제목이 한 줄 말줄임이다(whitespace-nowrap + ellipsis). */
.pl-list a { display: block; font-size: 16px; font-weight: 700; line-height: 26px;
             letter-spacing: -0.4px; color: #111;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 제목 앞의 [속보] 는 강조색으로 뺀다 (시안 77:414).
   renderer.js 의 newsTitle() 헬퍼가 이 span 을 붙인다. */
.t-breaking { color: #ea2121; }

/* ═══ 홈 상단 — 2026-09-11 PC 시안 ═══════════════════════════════════════
   속보바(77:1008) · 메인기사(77:393). 컨테이너 1200 기준 비율로 쓴다. */

/* LIVE 바: 배지 + 롤링 제목 + (우측) 인기태그. 시안 77:1008, 배경은 투명이다.
   2026-09-25 재확인 — **피그마가 갱신돼 배지 글자가 실제로 LIVE 로 바뀌었다.**
   그 전까지는 '속보' 배지 값을 임시로 쓰고 있었다. 지금 값은 시안 그대로다:
   배지 24px(3/2 상하 패딩 · 좌우 11 · r12), 인기태그 16px Bold + 8px 빨강 점.
   아래 구분선은 #EBEBEB 1px(Line 3). */
.live-bar { display: flex; align-items: center; gap: 10px; height: 50px;
            border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.live-badge { flex: none; background: #ea2121; color: #fff; font-size: 16px; font-weight: 700;
              line-height: 19px; padding: 3px 11px 2px; border-radius: 12px; }
/* 제목 10개를 겹쳐 놓고 하나만 보인다. 높이를 고정해야 전환 때 바가 흔들리지 않는다. */
.live-roll { position: relative; flex: 1; min-width: 0; height: 22px; }
.live-item { position: absolute; inset: 0; display: block;
             font-size: 16px; font-weight: 700; line-height: 22px; color: #111;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.live-item.is-on { opacity: 1; visibility: visible; }
.live-item:hover { color: #ea2121; }
/* 인기태그 — 시안 77:1004: 8px 원 + 텍스트, 항목 간격 20 */
.live-tags { flex: none; display: flex; align-items: center; gap: 20px; }
.live-tags a { display: inline-flex; align-items: center; gap: 8px;
               font-size: 16px; font-weight: 700; color: #111; white-space: nowrap; }
.live-tags a::before { content: ''; width: 8px; height: 8px; border-radius: 50%;
                       background: #ea2121; flex: none; }
.live-tags a:hover { color: #ea2121; }

/* 메인기사: 570.5 / 253.6 / 316.9 (합 1141 + gap 30 x 2) → 비율로 환산 */
/* 🔴 메인탑을 키우고 옆 두 줄을 줄였다(2026-09-29 요청).
   시안(77:393)은 570/254/317 이었는데, 탑기사에 본문 발췌가 들어가면서
   폭이 더 필요해졌다. 합(1141)은 그대로 두고 비율만 옮긴다. */
/* 왼쪽 탑기사 642 + 간격 30 + 카드 영역 528 (컨테이너 1200 기준).
   예전의 660/226/285 세 열에서 오른쪽 둘을 한 덩어리로 합친 값이다. */
.lead-area { display: grid; grid-template-columns: 660fr 542fr; gap: 30px; margin-bottom: 50px; }
.lead-area > * { min-width: 0; }
.lead-big .thumb-link { display: block; margin-bottom: 15px; }
.lead-big img { width: 100%; aspect-ratio: 570 / 352; object-fit: cover;
                object-position: center 35%; display: block; }
.lead-big h2 { font-size: 34px; font-weight: 700; line-height: 44px; letter-spacing: -0.4px; color: #111;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 탑기사 본문 발췌 — 제목보다 확실히 약하게. 3줄에서 자른다. */
.lead-big-text { margin-top: 12px; font-size: 16px; font-weight: 400; line-height: 26px;
                 letter-spacing: -0.4px; color: #555;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead-big-text a { color: inherit; }
.lead-big-text a:hover { color: #111; }
/* 옆 6건 — 2열 x 3행 카드 (2026-09-29).
   시안은 '가운데 2 + 우측 목록 4' 였는데, 탑기사에 본문 발췌가 붙어 왼쪽이 590px 로
   커지면서 옆 두 열 바닥에 145·177px 이 비었다(실측).
   🔴 행을 `1fr` 로 둔 것이 핵심이다 — 탑기사가 만든 행 높이를 3등분하므로
      발췌 줄 수나 제목 길이를 다시 손대도 **여백이 생기지 않는다.** 고정 px 로
      맞추면 그때마다 다시 틀어진다.
      단 행 높이는 두 열 중 **큰 쪽**이 정한다. 탑기사가 카드 쪽 최소치
      (3x120 + 50 = 410px)보다 짧으면 이번엔 탑기사 아래가 빈다 — 썸네일 없는
      탑기사(제목+발췌만)가 그렇다. 실제 탑기사는 이미지만 397px 라 걸리지 않는다.
   썸네일은 `flex: 1 1 0` 이라 카드에서 제목 2줄을 뺀 높이를 전부 가져간다
   (컨테이너 1200px 기준 카드 249x180 → 썸네일 249x120). */
/* minmax 의 120px 은 **바닥**이다 — 카드 높이는 탑기사에서 오는데, 탑기사에
   썸네일이 없거나(제목+발췌만) 아예 없으면 1fr 이 기댈 곳이 없어 카드 썸네일이
   몇 px 로 찌그러진다. 정상 상태(탑기사 590)에서는 1fr 이 180 이라 이 값은 걸리지 않는다. */
.lead-cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr;
              grid-auto-rows: minmax(120px, 1fr); gap: 25px 30px; }
.lead-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lead-card .thumb-link { display: block; flex: 1 1 0; min-height: 0;
                         overflow: hidden; margin-bottom: 12px; }
/* 🔴 **여기서 사진이 두 번 잘린다.** 원본은 와이드 썸네일 640x360(16:9)인데
   카드 칸은 249x120(약 2.07:1)이라 위아래를 또 깎는다. 기본 object-position 은
   center 라 정확히 한가운데가 남는데, 보도사진은 인물 얼굴이 대개 **위쪽**에 있어
   머리가 잘린다("중심점이 안 잡힌다", 2026-09-30 지적).
   살릴 영역을 위로 올려 얼굴을 남긴다. 풍경처럼 가운데가 주제인 사진도
   15% 이동이라 크게 어색하지 않다. */
.lead-card img { width: 100%; height: 100%; object-fit: cover;
                 object-position: center 35%; display: block; }
/* 옆 6건은 탑기사에 밀리도록 한 단계 낮춘다(19/700 → 17/500).
   썸네일이 없는 기사도 제목 밑줄이 옆 카드와 맞도록 margin-top: auto 를 둔다. */
.lead-card h3 { flex: none; margin-top: auto;
                font-size: 17px; font-weight: 500; line-height: 24px;
                letter-spacing: -0.4px; color: #111;
                display: -webkit-box; -webkit-line-clamp: 2;
                -webkit-box-orient: vertical; overflow: hidden; }
.lead-big h2 a:hover, .lead-card h3 a:hover { color: #ea2121; }

/* ═══ 중탑 목록 — 시안 77:775 / 77:814 ═════════════════════════════════
   2026-09-25 재확인으로 세 가지를 고쳤다. 전에는 메인기사 우측 목록(77:404)의
   값을 그대로 쓰고 있었는데 **중탑은 한 단계 작다**:
     제목 19px/26 → **16px/22**   썸네일 radius 10 → **없음(각진 사각)**
     세로 정렬 center → **flex-start**(시안이 items-start 다. 제목이 짧으면
     가운데 정렬은 썸네일과 첫 줄의 윗선이 어긋나 보인다)
   한 줄 = 썸네일 100x80(좌) + 15px + 제목. 줄 높이 80, 줄 간격 30(구분선이 가운데). */
.mid-list { list-style: none; }
.mid-list li { display: flex; align-items: flex-start; gap: 15px; min-width: 0;
               height: 80px; padding: 15px 0; box-sizing: content-box;
               border-bottom: 1px solid var(--line); }
.mid-list li:first-child { padding-top: 0; }
.mid-list .thumb-link { flex: none; width: 100px; height: 80px; overflow: hidden; }
.mid-list img { width: 100px; height: 80px; object-fit: cover; display: block; }
.mid-list h3 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 22px;
               letter-spacing: -0.4px; color: #111;
               /* 시안 77:451·85:884 의 제목 텍스트 높이가 전부 44 = 22x2 라 **2줄**이다.
                  예전에 3줄이었는데 모바일(1272행)만 2줄로 맞아 있었다. */
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mid-list h3 a:hover { color: #ea2121; }
/* 중탑2·중탑3: 2열 x 5행 (시안 85:884 / 77:814) */
/* 🔴 중탑을 여는 선은 **회색 3px** 이다(시안 Line 33 = #EBEBEB 3px).
   기사 화면의 섹션 상단선(빨강 3px)과 굵기는 같고 색이 다르다 — 헷갈리기 쉽다. */
.mid-block { border-top: 3px solid var(--line); padding-top: 30px; margin-bottom: 50px; }
.mid-two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.mid-two li:nth-child(2) { padding-top: 0; }          /* 2열이라 두 번째도 첫 줄이다 */
/* 마지막 줄만 선을 없앤다. 홀수 개면 마지막 한 칸뿐이라
   nth-last-child(-n+2) 로 두 개를 지우면 같은 줄의 앞 항목까지 어긋난다. */
.mid-two li:last-child { border-bottom: none; padding-bottom: 0; }
.mid-two li:nth-last-child(2):nth-child(odd) { border-bottom: none; padding-bottom: 0; }

/* ═══ 3면 + 중탑1 (시안 85:883) ════════════════════════════════════════ */
.top-block { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 50px; }
.top-block > * { min-width: 0; }
.tb-sec { padding-bottom: 15px; border-bottom: 1px solid var(--line); margin-bottom: 15px; }
.tb-sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* 🔴 리드는 **가운데 정렬**이다(시안 85:799 `items-center`). 바로 아래 중탑1
   (77:456)은 반대로 `items-start` 라 둘을 같이 두면 안 된다. */
.tb-sec-lead { display: flex; gap: 15px; align-items: center; }
/* 썸네일에 radius 가 없다 — 시안 전역 규칙(07-시안-대조 §1). */
.tb-sec-lead .thumb-link { flex: none; width: 100px; height: 80px; overflow: hidden; }
.tb-sec-lead img { width: 100px; height: 80px; object-fit: cover; display: block; }
.tb-sec-body { flex: 1; min-width: 0; }
.tb-sec-name { display: block; font-size: 14px; font-weight: 700; line-height: 20px; color: #ea2121;
               letter-spacing: -0.4px; margin-bottom: 5px; }
.tb-sec-body h3 { font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -0.4px; color: #111;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tb-sec-body h3 a:hover, .tb-sec-more a:hover { color: #ea2121; }
/* 불릿 2줄 (시안 85:797/85:798) — 5px 원 + 글자 16 Medium, 한 줄 말줄임.
   간격은 제목↔첫 줄 15, 줄↔줄 15 다. `li` 에 일괄 margin-top 을 주면 ul 의
   margin 과 상쇄(collapse)에 기대게 되므로 `li + li` 로 명시한다. */
.tb-sec-more { list-style: none; margin-top: 15px; }
.tb-sec-more li { position: relative; padding-left: 15px; line-height: 19px;
                  font-size: 16px; font-weight: 500; letter-spacing: -0.4px; color: #111;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-sec-more li + li { margin-top: 15px; }
/* 시안의 점은 #FF0000 인데 강조색은 어디서나 #EA2121 이다 — 이 점 하나만 순수
   빨강이라 시안 쪽 실수로 보고 토큰 색을 쓴다(5px 라 눈으로는 구분되지 않는다). */
.tb-sec-more li::before { content: ''; position: absolute; left: 0; top: 7px;
                          width: 5px; height: 5px; border-radius: 50%; background: #ea2121; }
.tb-list li:last-child { border-bottom: none; padding-bottom: 0; }

/* ═══ 이슈PICK (시안 77:471) ═══════════════════════════════════════════ */
.ip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 30px; }
.ip-card .thumb-link { display: block; margin-bottom: 15px; }
.ip-card img { width: 100%; aspect-ratio: 270 / 165; object-fit: cover; display: block; }
.ip-card h3 { font-size: 19px; font-weight: 700; line-height: 26px; letter-spacing: -0.4px; color: #111;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ip-card h3 a:hover { color: #ea2121; }

/* ═══ 태블릿 (985~691px) — 2026-09-14 시안 42:1346 ══════════════════════
   시안 아트보드 이름이 그대로 경계다: PC ~986 / 태블릿 985~691 / 모바일 690~320.
   콘텐츠는 945(985 - 좌우 20).

   PC 와 실제로 다른 것은 둘뿐이다:
     1. 사이드바가 없다 — 실시간인기뉴스·TV·오피니언·기자수첩이 본문 흐름
        중간(중탑2 다음)에 2열(458+30+458)로 깔린다.
     2. 메인기사 우측 4줄이 아래로 내려와 2열 x 2행이 된다.
   나머지 섹션은 폭만 넓어진 PC 구조라 fr 기반 그리드가 알아서 늘어난다. */

/* 사이드바 블록은 DOM 상 .main-content 안에 있다(태블릿 시안 위치).
   PC 에서는 그리드로 오른쪽 열에 다시 세운다 — .main-content 를 display:contents 로
   풀어야 그 자식들이 그리드 아이템이 되어 열 배치를 받을 수 있다. */
@media (min-width: 986px) {
    /* 🔴 row-gap 은 **0** 이다. 사이드바가 본문 전체 높이를 가로지르려면
       여러 행을 걸쳐야 하는데(아래 span), 행 사이마다 gap 이 들어가면 빈 행
       트랙 하나당 그만큼 공백이 쌓인다(2026-09-29 실측 29,830px).
       본문 블록 간격은 각 블록이 저마다 가진 margin 이 만든다(대부분 50px,
       지자체→포토처럼 20+20 인 곳도 있다) — 태블릿/모바일 블록 배치와 값이 같아진다. */
    .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
                 column-gap: 30px; row-gap: 0; align-items: start; }
    .home-grid .main-content { display: contents; }
    .home-grid .main-content > * { grid-column: 1; min-width: 0; }
    /* 🔴 `grid-row: 1` 만 주면 **첫 행이 사이드바 높이(약 2,300px)로 부풀어**
       3면+중큑1 아래에 1,800px 짜리 빈 공간이 생긴다(2026-09-29 실측 1,802px).
       `1 / -1` 은 암시적 행에서 안 먹으므로(-1 이 명시 그리드 끝을 가리킨다)
       span 으로 건넌다. 위 `row-gap: 0` 과 **짝**이다 — 한쪽만 되돌리면
       반대쪽 증상(맨 아래 3만 px / 중큑1 아래 1,800px)이 바로 돌아온다. */
    .home-grid .side-stack { grid-column: 2; grid-row: 1 / span 50; align-self: start;
                             display: block; min-width: 0; }
}

@media (max-width: 985px) {
    .container { padding: 20px; }

    /* ── 헤더 (시안 82:666) ───────────────────────────────────────────
       1행(18px): 날짜(좌) / 로그인·회원가입(우) — **로고가 없다**
       2행(55px): 로고 158x35(좌) / 메뉴+검색 아이콘(우)
       🔴 시안의 상단 메뉴 프레임(82:628)은 **자식이 없는 빈 껍데기**이고,
          로고(0~157.5)와 그 프레임 시작점(151)이 6.5px 겹친다 — 메뉴를 지우고
          그 자리에 로고를 옮긴 흔적이다. 그래서 태블릿에서는 카테고리 메뉴를
          감추고 서랍(≡+돋보기)으로만 들어간다. */
    /* 시안 치수: 1행 18 → (간격 30) → 2행 55 → (간격 30) → #ea2121 3px = 133.
       마지막 30 은 .header-inner 의 아래 패딩으로 준다(빨간 선은 .header 의 테두리다). */
    .header-inner { padding: 0 20px 30px; }
    .header-top { height: auto; padding: 0 0 30px; grid-template-columns: 1fr auto; }
    .logo-top { display: none; }
    .header-date { display: block; }
    .nav { min-height: 55px; padding-right: 0; justify-content: space-between; }
    .nav-menu { display: none; }
    .logo-nav { display: block; justify-self: start; }
    .logo-nav img { width: 158px; height: 35px; }
    .nav-drawer-btn { position: static; transform: none; }
    .home-grid { display: block; }
    /* 홈 외 페이지(카테고리·기사·검색)도 태블릿에서는 사이드바를 아래로 내린다 —
       본문이 330px 까지 눌리는 것을 막는다. */
    .main-grid { grid-template-columns: minmax(0, 1fr); }

    /* 메인기사: 리드 전폭 + 카드 3열 x 2행.
       시안(42:1346)은 리드 610 옆에 305 열을 두었지만, 6건을 한 덩어리로 합친 뒤로는
       거기에 카드 2열을 넣으면 폭이 137px 까지 눌려 모바일(315)보다 작아진다.
       아래로 내려 3열(295px)로 편다.
       행 높이는 auto 로 되돌린다 — PC 의 1fr 은 탑기사 높이에 맞추는 값이라
       리드가 위로 빠진 여기서는 의미가 없다. */
    .lead-area { grid-template-columns: minmax(0, 1fr); }
    .lead-cards { grid-template-columns: repeat(3, minmax(0, 1fr));
                  grid-auto-rows: auto; gap: 20px; }
    .lead-card .thumb-link { flex: none; aspect-ratio: 295 / 166; margin-bottom: 15px; }

    /* 사이드바 블록 — 좌: 인기뉴스 → TV / 우: 오피니언 → 기자수첩 */
    .side-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px;
                  margin-bottom: 50px; }
    .side-stack .popular-section { grid-column: 1; grid-row: 1; }
    .side-stack .youtube-section { grid-column: 1; grid-row: 2; }
    .side-stack .opinion-side    { grid-column: 2; grid-row: 1; }
    .side-stack .reporter-note   { grid-column: 2; grid-row: 2; }

    /* 지역은 시안 태블릿도 PC 와 같은 3열 가로 배치다. 썸네일만 119x85 로 커진다.
       🔴 비율도 PC(110x85=1.294)와 달라 1.4 다 — width 만 바꾸면 높이가 92 가 된다. */
    .focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 30px; }
    .focus-head { display: flex; }
    .focus-thumb { width: 119px; aspect-ratio: 119 / 85; margin-bottom: 0; }

    /* 🔴 리드가 610 이 아니라 전폭(945)이 됐으므로 시안의 610x370(1.649)을 그대로
       쓰면 사진 높이가 573px 라 첫 화면이 사진 한 장으로 덮인다. 모바일이
       650x350(1.86:1)으로 좁히는 것과 같은 이유로 배너 비율(2.2:1)로 자른다. */
    .lead-big img { aspect-ratio: 945 / 430; }

    /* 포토 썸네일: 시안 100x75, 리드 높이 295 를 3등분하려면 세로 간격이 35 다
       (3x75 + 2x35 = 295). PC 는 420x265 / 간격 20 이라 값이 다르다. */
    .pi-thumbs { gap: 35px; }

    /* 제휴지자체 카드: 시안 206 : 206 : 413 (PC 는 195 : 195 : 360) */
    .pl-panel { grid-template-columns: 206fr 206fr 413fr; }
}

/* ───────────────────────────────────────────────────────────────────
   🔴 여기부터가 모바일(~690) 블록이다. **태블릿(~985) 뒤에 와야 한다** —
      690px 에서는 두 미디어쿼리가 모두 참이라 뒤에 오는 쪽이 이긴다.
      앞에 두면 태블릿의 2열 규칙이 모바일 1열을 덮어쓴다(실제로 그랬다).
   ─────────────────────────────────────────────────────────────────── */

/* ═══ 모바일 홈 상단 (690~320px) — 2026-09-19 시안 81:625 ═══════════════
   시안 콘텐츠 폭은 650(690 − 좌우 20)이다. 아래 치수는 전부 그 기준이고,
   폭은 비율(aspect-ratio / %)로 옮겨 320까지 같은 모양이 나오게 했다.

   되풀이되는 형태가 셋뿐이다:
     · 리드      전폭 이미지 650x350 + 15 + 제목
     · 2열 카드  315 + 20 + 315, 이미지 315x178
     · 썸네일 줄 썸네일 120x75(좌) + 15 + 제목, 줄 py15 + 구분선          */
@media (max-width: 690px) {
    /* 속보바(193:1136) — 배지 + 제목 한 줄. 시안 글자는 16px 이다. */
    .live-bar { height: 54px; margin-bottom: 20px; }
    .live-item { font-size: 16px; }
    /* 좁은 화면에서는 태그가 제목을 밀어낸다. 시안 모바일에도 태그가 없다. */
    .live-tags { display: none; }

    /* ── 메인기사(186:5): 리드 → 2열 카드 2 → 썸네일 줄 4 ─────────────── */
    .lead-area { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
    /* 시안은 세 덩어리 사이에 실선이 있다. 덩어리가 빠져도 선이 뜨지 않도록
       '앞에 형제가 있을 때만' 붙인다. */
    .lead-area > * + * { border-top: 1px solid var(--line); padding-top: 20px; }
    .lead-big .thumb-link { margin-bottom: 15px; }
    .lead-big img { aspect-ratio: 650 / 350; }
    .lead-big h2 { font-size: 20px; line-height: 28px; }
    /* 시안 186:5 그대로 — 앞 두 장은 2열 카드(315x178), 나머지 네 장은 전폭
       썸네일 줄(썸네일 120x75 좌 + 제목). 카드 마크업이 [썸네일 → 제목] 순이라
       모바일 시안의 '썸네일 왼쪽'은 flex-direction: row 하나로 난다
       (예전 .lead-list 는 DOM 이 [제목 → 썸네일] 이라 row-reverse 를 써야 했다). */
    .lead-cards { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 20px; }
    .lead-card .thumb-link { flex: none; aspect-ratio: 315 / 178; margin-bottom: 15px; }
    .lead-card h3 { font-size: 17px; line-height: 24px; }
    .lead-card:nth-child(n+3) { grid-column: 1 / -1; flex-direction: row;
                                align-items: center; gap: 15px;
                                border-top: 1px solid var(--line); padding-top: 20px; }
    .lead-card:nth-child(n+3) .thumb-link { width: 120px; height: 75px;
                                            aspect-ratio: auto; margin-bottom: 0; }
    .lead-card:nth-child(n+3) h3 { flex: 1; margin-top: 0;
                                   font-size: 16px; line-height: 22px; }

    /* ── 3면(190:81): 썸네일 317.5 + 15 + [섹션명 / 제목 2줄], 3행 ────── */
    .top-block { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; }
    .tb-sec-lead { gap: 15px; align-items: flex-start; }
    .tb-sec-lead .thumb-link { width: 48.8%; height: auto; aspect-ratio: 317.5 / 198.4; }
    .tb-sec-lead img { width: 100%; height: 100%; }
    .tb-sec-body h3 { font-size: 17px; line-height: 26px; }
    .tb-sec-more { display: none; }   /* 모바일 시안에는 불릿 2줄이 없다 */

    /* ── 중탑(190:82 / 190:189 / 191:352 …) ───────────────────────────
       시안은 [리드 1 + 썸네일 줄 4] 를 한 덩어리로 보고, 중탑2·3은 그 덩어리가
       둘이다(각 5건). DOM 은 10건짜리 ul 하나라 1번째와 6번째를 리드로 세운다. */
    .mid-two { grid-template-columns: 1fr; column-gap: 0; }
    .mid-list li { height: 75px; padding: 15px 0; gap: 15px; }
    .mid-list .thumb-link, .mid-list img { width: 120px; height: 75px; }
    .mid-two li:nth-child(2) { padding-top: 15px; }        /* 1열이라 되돌린다 */
    .mid-two li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); padding-bottom: 15px; }
    .mid-two li:last-child { border-bottom: none; padding-bottom: 0; }

    .mid-two li:nth-child(1), .mid-two li:nth-child(6), .tb-list li:nth-child(1) {
        display: block; height: auto; padding: 0 0 20px; }
    .mid-two li:nth-child(6) { padding-top: 20px; border-top: 1px solid var(--line); }
    .mid-two li:nth-child(1) .thumb-link, .mid-two li:nth-child(6) .thumb-link,
    .tb-list li:nth-child(1) .thumb-link {
        width: 100%; height: auto; border-radius: 0; margin-bottom: 15px; }
    .mid-two li:nth-child(1) img, .mid-two li:nth-child(6) img,
    .tb-list li:nth-child(1) img {
        width: 100%; height: auto; aspect-ratio: 650 / 350; }
    .mid-two li:nth-child(1) h3, .mid-two li:nth-child(6) h3,
    .tb-list li:nth-child(1) h3 { font-size: 20px; line-height: 28px; }

    .mid-block { margin-bottom: 50px; padding-top: 20px; }

    /* ── 이슈PICK(190:188): 전폭 리드 + 2열 카드 2 ─────────────────────── */
    .ip-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .ip-card:first-child { grid-column: 1 / -1; padding-bottom: 20px;
                           border-bottom: 1px solid var(--line); }
    .ip-card:first-child img { aspect-ratio: 650 / 350; }
    .ip-card:first-child h3 { font-size: 20px; line-height: 28px; }
    .ip-card img { aspect-ratio: 315 / 178; }
    .ip-card h3 { font-size: 17px; line-height: 24px; }
}

/* 모바일(191:799): 탭 4개 한 줄 → 카드 2열(295 + 20) → 목록 4줄 전폭.
   회색 판 안쪽 여백이 20 이라 콘텐츠가 610 이 된다. */
@media (max-width: 690px) {
    .partner-local { padding: 20px; border-radius: 10px; }
    .pl-tabs { gap: 15px; margin-bottom: 20px; }
    .pl-tab { gap: 20px; padding: 8px 11px; font-size: 16px; }
    .pl-panel { grid-template-columns: 1fr 1fr; gap: 20px; }
    .pl-panel .pl-list { grid-column: 1 / -1; }
    .pl-card .pl-thumb img { aspect-ratio: 295 / 197; }
    .pl-card h3 { font-size: 17px; line-height: 26px; }
    .pl-list li { padding: 15px 0; }
    .pl-list a { font-size: 16px; line-height: 22px; }
}

/* ═══ 모바일 (690~320px) — 시안 81:625 의 나머지 섹션 ════════════════════
   블록 순서는 시안과 DOM 이 이미 같다(인기뉴스 → TV → 오피니언 → 기자수첩).
   태블릿의 2열만 1열로 풀고, 각 섹션 안쪽 치수를 시안에 맞춘다. */
@media (max-width: 690px) {
    .side-stack { grid-template-columns: 1fr; }
    .side-stack .popular-section { grid-column: 1; grid-row: 1; }
    .side-stack .youtube-section { grid-column: 1; grid-row: 2; }
    .side-stack .opinion-side    { grid-column: 1; grid-row: 3; }
    .side-stack .reporter-note   { grid-column: 1; grid-row: 4; }

    /* 실시간 인기뉴스(190:342): [순위 + 제목] 좌 / 썸네일 113x75 우, 줄 75 + py15.
       🔴 시안의 순위는 **맨숫자**다 — PC 의 동그란 배지가 아니다. */
    .ranking-list li { padding: 15px 0; gap: 10px; align-items: flex-start; }
    .ranking-list li::before { background: transparent; color: #111; width: 20px; height: auto;
                               border-radius: 0; display: block; font-size: 16px;
                               font-weight: 700; line-height: 22px; margin-top: 0; }
    .ranking-list li:nth-child(-n+3)::before { background: transparent; color: #ea2121; }
    .rank-title { line-height: 22px; -webkit-line-clamp: 3; font-size: 16px; }
    .rank-thumb { width: 113px; aspect-ratio: 113 / 75; }

    /* 뉴데일리 TV(190:343): 전폭 썸네일 하나. 시안에는 제목 줄이 없다. */
    .youtube-thumb { aspect-ratio: 650 / 360; }

    /* 오피니언(191:473): 리드 이미지 650x325 + [필자 / 제목], 이후 3줄.
       기자수첩은 같은 줄 구조인데 사진이 왼쪽이다(마크업이 이미 그렇다). */
    .opinion-side .op-lead img { aspect-ratio: 650 / 325; }
    .opinion-side .op-lead h3 { font-size: 20px; line-height: 26px; }
    .op-list li { padding: 15px 0; gap: 15px; }
    .op-list h3 { font-size: 17px; line-height: 22px; }

    /* 지역 포커스(191:800): 6행 세로. 3면과 같은 [썸네일 317.5 + 텍스트] 형태다.
       시안에는 카드 설명(p)이 없다. */
    .focus-grid { grid-template-columns: 1fr; gap: 0; }
    .focus-card { padding: 15px 0; border-bottom: 1px solid var(--line); }
    .focus-card:last-child { border-bottom: none; }
    .focus-head { display: flex; gap: 15px; align-items: flex-start; }
    .focus-thumb { width: 48.8%; aspect-ratio: 317.5 / 198.4; margin-bottom: 0; }
    .focus-label { font-size: 14px; margin-bottom: 5px; }
    .focus-card h3 { font-size: 17px; line-height: 26px; -webkit-line-clamp: 2; }
    .focus-card p { display: none; }

    /* 포토 / 인터뷰(191:831 / 193:863) — 포토는 PC 와 같은 [큰 사진 + 썸네일 3]
       구조다. 세로 썸네일이 리드 높이에 늘어나지 않게 행을 auto 로 둔다. */
    .photo-interview { grid-template-columns: 1fr; gap: 50px; }
    .pi-photo .pi-lead { aspect-ratio: 530 / 334; }
    .pi-thumbs { grid-template-rows: repeat(3, auto); align-content: start; gap: 20px; }
    .pi-thumbs a { height: auto; aspect-ratio: 100 / 75; }
    .pi-caption { font-size: 17px; line-height: 26px; }
    .pi-interview .pi-lead { aspect-ratio: 650 / 353; }
    .pi-interview h3 { font-size: 17px; line-height: 26px; }

    /* 섹션별뉴스(193:1034): 6블록 세로. 각 [제목 → 650x350 → 목록]
       타이포(16/22/15)는 2026-09-28 에 PC 도 같아져 여기서 덮을 것이 없다. */
    .section-news { grid-template-columns: 1fr; gap: 50px; }
    .sn-lead { aspect-ratio: 650 / 350; }
}

/* ═══ 풋터 — 좁은 화면(~985px) 아코디언 ══════════════════════════════════
   PC 의 9열 맵을 그대로 내리면 945px 에서 한 칸이 63px 밖에 안 돼
   '아시아/호주' 같은 항목이 글자 단위로 줄바꿈된다(실제로 그랬다). 9행 아코디언이다.

   🔴 **근거 시안이 바뀌었다 (2026-09-28).** 예전 태블릿 노드 `136:889` 는 삭제됐고
      지금은 `227:1352`(태블릿) / `193:1035`(모바일) 인데 **둘이 완전히 같다** —
      제목 '중앙신문 사이트맵'(y30) → 아코디언(y82) → ci 140x34(좌측 아래).
      옛 노드에는 상단 중앙 회색 로고가 있었고 제목이 없었다. 그 배치를 걷어낸다.
      그래서 태블릿·모바일을 한 블록으로 합쳤다.
   아코디언 자체는 전체메뉴 서랍과 **같은 컴포넌트**다(에셋까지 같다):
      행 52(py15) · 제목 16 Bold/22 · 토글 14x14 #DADADE 2px
      펼침 py15 · 2열(여백 없음) · 항목 14 Medium/20 #828282 · 행간 10
      (서랍만 펼침 아래가 30 이고 푸터는 15 다) */

/* 🔴 기본값은 미디어쿼리보다 **앞**에 둔다. 같은 특이도(0,1,0)라 순서가 이기는데,
   뒤에 두면 아래 max-width 블록의 display:block 을 덮어 모든 폭에서 사라진다. */
.foot-sitemap-title { display: none; }
/* 로고는 좁은 화면 시안에만 있다. PC 시안에서는 hidden 이었다. */
.foot-logo { display: none; }
.foot-logo img { display: block; width: 134px; height: 33px; }

/* PC 에서는 지금까지의 9열 그리드 그대로. 제목 행은 flex 래퍼가 하나 늘었다. */
/* 대분류 16px ExtraBold / 22px (시안 77:860) */
.foot-col-head > a { display: block; font-size: 16px; font-weight: 800; line-height: 22px;
                     letter-spacing: -0.4px; color: #111; }
.foot-toggle { display: none; }   /* 토글은 태블릿에서만 */

@media (max-width: 985px) {
    .footer { padding: 30px 20px 45px; }
    /* 로고는 DOM 상 사이트맵 **뒤**에 있고(탭 순서를 화면과 맞추려고)
       시안도 사이트맵 아래 왼쪽이다 — order 로 끌어올리지 않는다. */
    .footer-inner { display: flex; flex-direction: column; }
    .foot-sitemap-title { display: block; font-size: 17px; font-weight: 700;
                          line-height: 22px; letter-spacing: -0.4px; color: #111;
                          text-align: center; margin-bottom: 30px; }
    .foot-logo { display: block; width: 140px; margin: 30px 0 0; }
    .foot-logo img { width: 140px; height: 34px; }

    /* 9열 → 9행 */
    .foot-sitemap { display: block; padding-bottom: 0; border-top: 1px solid var(--line); }
    .foot-col { border-bottom: 1px solid var(--line); }
    .foot-col-head { display: flex; align-items: center; justify-content: space-between;
                     min-height: 52px; gap: 12px; }
    .foot-col-head { margin-bottom: 0; }
    .foot-col-head > a { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 22px; }

    /* +/− 토글. 이미지를 더 받지 않으려고 CSS 로 그린다. */
    /* 시안 SVG 는 14x14, fill #DADADE, 획 두께 2 다(서랍 토글과 같은 에셋). */
    .foot-toggle { display: block; position: relative; flex: none;
                   width: 14px; height: 14px; border: 0; background: transparent;
                   cursor: pointer; padding: 0; }
    .foot-toggle::before, .foot-toggle::after {
        content: ''; position: absolute; left: 50%; top: 50%; background: #dadade;
        transform: translate(-50%, -50%);
    }
    .foot-toggle::before { width: 14px; height: 2px; }          /* 가로줄: 늘 보인다 */
    .foot-toggle::after  { width: 2px; height: 14px; }          /* 세로줄: 펼치면 사라진다 */
    .foot-toggle[aria-expanded="true"]::after { display: none; }
    .foot-toggle:focus-visible { outline: 2px solid #ea2121; outline-offset: 2px; }

    /* 하위 목록은 접혀 있다가 2열로 펼쳐진다. 시안은 열이 정확히 절반씩이라
       **열 사이 여백이 없고**, 위아래 15 · 행간 10(항목 높이 20 → 간격 30)이다. */
    .foot-col ul { display: none; grid-template-columns: 1fr 1fr;
                   row-gap: 10px; padding: 15px 0; }
    .foot-col.is-open ul { display: grid; }
    .foot-col li { font-size: 14px; line-height: 20px; }
}

/* ═══ 모바일 풋터 (690~320px) — 시안 193:1035 ════════════════════════════
   태블릿(227:1352)과 **폭 말고는 같다.** 그래서 공통 규칙은 위 ~985 블록에 있고
   여기에는 남는 것이 없다. DOM 순서가 곧 시안 순서다(사이트맵 → ci 로고).

   🔴 법인명·등록번호·청소년보호책임자는 시안 값((주)중앙신문 / 경기 아 5145 /
      김현경)을 따르지 않는다. 법적 표기라 디자인을 근거로 바꾸지 않는다
      (docs/99-개발사-확인요청.md). 시안의 '이메일부단수집거부'도 오타다.      */

@media (max-width: 690px) {
    .footer { background: #f8f8fa; }

    /* 🔴 그리드 아이템은 기본이 min-width:auto 라 **내용보다 작아지지 않는다.**
       긴 제목 한 줄이 트랙을 밀어내 390px 화면에서 문서가 455px 로 벌어진 적이 있다
       (docs/50-운영/07-레이아웃-검사.md). 1열로 접은 그리드마다 받쳐 둔다. */
    .lead-area > *, .lead-cards > *, .top-block > *, .ip-grid > *, .mid-two > *,
    .focus-grid > *, .photo-interview > *, .pi-photo-body > *, .pl-panel > *,
    .section-news > *, .side-stack > *, .hm-grid > * { min-width: 0; }
}

/* ===== 배너 슬롯 =========================================================
   CMS(ad_slot)에 넣은 스크립트를 웹이 그 자리에 그대로 렌더한다.
   서버가 User-Agent 로 나누지 않고 **CSS 로** 기기를 가른다 — 같은 URL 이
   기기마다 다른 HTML 을 내보내면 캐시·CDN 이 섞인다.
   브레이크포인트는 이 파일의 다른 규칙과 같다: PC ≥986 / 태블릿 985~691 / 모바일 ≤690

   🔴 예약 높이(--ad-h-pc / --ad-h-m)를 주는 이유: 광고는 비동기라 늦게 뜬다.
      자리를 미리 잡지 않으면 광고가 로드되는 순간 본문이 아래로 밀린다(CLS).
      값은 슬롯마다 CMS 에서 입력받아 인라인 style 로 내려온다.        */
.ad-slot { display: none; margin: 20px 0; text-align: center; overflow: hidden; }
.ad-slot > * { max-width: 100%; }          /* 광고가 컨테이너를 넘지 못하게 */
.ad-slot img, .ad-slot iframe { max-width: 100%; height: auto; }
/* PPT 배너 노출 요청: 슬롯의 실제 폭에 따라 3/2/1개. 광고사 스크립트는 그대로 둔다.
   CMS가 함께 저장한 .jb-i[data-on] 스타일보다 구체적인 선택자로 순환 노출을 확장한다. */
.ad-slot.has-banner-strip[data-slot] { min-height: 0; }
.ad-slot .jb.jb-strip { display: grid; grid-template-columns: repeat(var(--banner-columns), minmax(0, 1fr));
                       align-items: center; gap: 24px; }
.ad-slot .jb.jb-strip > .jb-i { display: none; min-width: 0; }
.ad-slot .jb.jb-strip > .jb-i[data-visible] { display: block; }
.ad-slot .jb.jb-strip > .jb-i a { display: block; }

/* 기기 토큰이 맞는 구간에서만 보인다. data-dev="pc tablet mobile" 형태다. */
@media (min-width: 986px) {
    .ad-slot[data-dev~="pc"]     { display: block; min-height: var(--ad-h-pc, 0); }
}
@media (max-width: 985px) and (min-width: 691px) {
    .ad-slot[data-dev~="tablet"] { display: block; min-height: var(--ad-h-pc, 0); }
}
@media (max-width: 690px) {
    .ad-slot[data-dev~="mobile"] { display: block; min-height: var(--ad-h-m, 0); }
    /* 🔴 기사 본문 폭이 318px 이라 320 짜리 규격이 2px 넘친다. 잘리지 않게 가둔다. */
    .article-content .ad-slot { margin: 18px 0; }
}

/* 사이드바 하단은 긴 기사에서 따라다니게 한다(PC 만 — 태블릿 이하는 본문 아래로 내려간다) */
@media (min-width: 986px) {
    .ad-slot[data-slot$="_side3"], .ad-slot[data-slot="list_side2"] { position: sticky; top: 20px; }
}

/* 모바일 하단 고정.
   🔴 본문 마지막 줄을 가리므로 body 에 여백을 주고, 닫기 버튼을 반드시 둔다
      (구글 '간섭 광고' 정책). 기본 state=0 이라 CMS 에서 켜야 나온다. */
.ad-sticky { display: none; }
@media (max-width: 690px) {
    .ad-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
                 background: #fff; border-top: 1px solid var(--line); text-align: center;
                 padding: 4px 0; }
    .ad-sticky .ad-slot { display: block; margin: 0; }
    .ad-sticky-close { position: absolute; right: 4px; top: -26px; width: 24px; height: 24px;
                       border: 1px solid var(--line); border-radius: 12px; background: #fff;
                       color: #666; font-size: 15px; line-height: 1; cursor: pointer; }
    body.has-ad-sticky { padding-bottom: 62px; }
}

/* ==========================================================================
   기사 본문 (시안 228:3167 "PC-기사본문(~986px)")  2026-09-21
   --------------------------------------------------------------------------
   시안의 3단 구성: 좌측 도구 레일 70 · 본문 600 · 사이드바 300.
   이 사이트의 container 는 시안(1200)보다 넓어 본문 폭은 남는 만큼 늘린다 —
   폭을 600 으로 못박으면 넓은 화면에서 좌우가 휑해진다.
   🔴 이 블록은 파일 맨 끝이다. 안의 미디어쿼리가 앞선 985/690 블록보다 뒤에
      와야 태블릿 규칙이 모바일로 새지 않는다(홈에서 겪은 그 문제다).
   ========================================================================== */
.article-grid { grid-template-columns: 70px minmax(0, 1fr) 300px; }

/* 🔴 사이드바는 DOM 상 `.main-content` **안**, 관련기사와 기자 카드 사이다.
   모바일 시안(`278:320`)이 '정치 많이 본 기사'를 그 자리에 두기 때문이다.
   PC 에서는 오른쪽 열로 다시 세운다 — `.main-content` 를 display:contents 로
   풀어야 그 자식들이 그리드 아이템이 되어 열 배치를 받는다.
   홈(`.home-grid`)에서 쓴 것과 **같은 방식**이다. 두 곳이 갈리면 안 된다. */
@media (min-width: 986px) {
    .article-grid .main-content { display: contents; }
    .article-grid .main-content > * { grid-column: 2; min-width: 0; }
    /* 🔴 홈(`.home-grid`)과 **같은 규약**이다 — row-gap: 0 + span.
       `grid-row: 1` 만 주면 첫 행이 사이드바 높이로 부풀어 **짧은 기사일때
       본문 아래에 빈 공간**이 생기고, row-gap 을 두고 span 하면 빈 행 트랙마다
       gap 이 쌓여 댓글 아래에 3만 px 가 생긴다(2026-09-29 둘 다 실측). 둘은 짝이다. */
    .article-grid { row-gap: 0; }
    .article-grid .main-content > .sidebar {
        grid-column: 3; grid-row: 1 / span 50; align-self: start; display: block; min-width: 0; }
}

/* ---- 빵부스러기 (240:40) ---- */
.article-crumb { display:flex; align-items:center; gap:8px; margin-bottom:30px; }
.article-crumb a { font-size:17px; letter-spacing:-0.4px; color:#111; }
.article-crumb .crumb-top { font-weight:700; }
.article-crumb .crumb-sub { font-weight:500; }
.article-crumb a:hover { color:#ea2121; }
.article-crumb .crumb-sep { width:8px; height:14px; flex:none;
    background:url("/img/article/chevron.svg") no-repeat center / contain; }

/* ---- 제목·기자명 (240:43 / 240:45) ---- */
.article-detail .article-title { font-size:32px; line-height:44px; font-weight:700;
    letter-spacing:-0.4px; color:#000; margin:0 0 30px; }
.article-writer { font-size:16px; font-weight:700; letter-spacing:-0.4px; color:#111;
    margin-bottom:30px; }

/* ---- 일시 + 구글 버튼 (240:77) ---- */
.article-detail .article-meta { display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap; padding:0 0 30px; border:0; margin:0;
    border-bottom:1px solid #ebebeb; }
.article-detail .meta-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.meta-date { display:inline-flex; align-items:center; gap:8px; border:0; background:none;
    padding:0; font-family:inherit; font-size:14px; font-weight:500; line-height:20px;
    letter-spacing:-0.4px; color:#828282; cursor:pointer; }
.meta-date[disabled] { cursor:default; }
.meta-caret { width:14px; height:8px; flex:none; transition:transform .15s;
    background:url("/img/article/chevron.svg") no-repeat center / 8px 14px; transform:rotate(90deg); }
.meta-date[aria-expanded="true"] .meta-caret { transform:rotate(-90deg); }
.meta-dates { display:flex; gap:12px; font-size:14px; line-height:20px; color:#828282; }
.meta-dates[hidden] { display:none; }   /* display:flex 가 [hidden] 을 이긴다 — 위 .rail-pop 주석 참고 */
.article-detail .google-source-btn { height:30px; padding:0 15px; border:1px solid #ebebeb;
    border-radius:15px; gap:8px; font-size:14px; font-weight:700; color:#111 !important; }

/* ---- 좌측 도구 레일 (246:151) ---- */
.article-rail { grid-column:1; grid-row:1; align-self:start; position:sticky; top:90px;
    display:flex; flex-direction:column; align-items:center; gap:15px;
    width:70px; padding:35px 0; border:1px solid #ebebeb; border-radius:35px; background:#fff; }
.article-rail .rail-item { position:relative; }
.article-rail .rail-sep { width:50px; height:1px; background:#ebebeb; }
.rail-btn { display:flex; flex-direction:column; align-items:center; gap:5px;
    border:0; background:none; padding:0; cursor:pointer; font-family:inherit;
    font-size:14px; font-weight:500; line-height:20px; letter-spacing:-0.4px;
    color:#828282; text-decoration:none; white-space:nowrap; }
.rail-btn img, .rail-btn .rail-svg { width:28px; height:28px; display:block; }
.rail-btn .rail-svg { fill:#828282; }
.rail-btn:hover { color:#ea2121; }
.rail-btn:hover .rail-svg { fill:#ea2121; }
.rail-btn[aria-pressed="true"] { color:#ea2121; font-weight:700; }
.rail-btn[aria-pressed="true"] .rail-svg { fill:#ea2121; }
/* 팝오버는 레일 오른쪽으로 편다. 레일이 좁아 아래로 펴면 다음 항목을 덮는다.
   🔴 `display:flex` 는 `[hidden]` 의 display:none 과 명시도가 같고(0,1,0) 뒤에 와서
      **이긴다.** 그래서 hidden 을 걸어도 그대로 보인다 — 실제로 첫 렌더에서 공유·
      글자크기 팝오버가 제목을 가린 채 떠 있었다. 같은 함정이 .meta-dates 에도 있다.
      JS 는 el.hidden 만 만지므로 CSS 에서 반드시 되돌려 놔야 한다. */
.rail-pop { position:absolute; left:calc(100% + 10px); top:0; z-index:30;
    display:flex; gap:6px; padding:8px; background:#fff; border:1px solid #ebebeb;
    border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.09); }
.rail-pop[hidden] { display:none; }
.pop-btn { border:1px solid var(--line-box); border-radius:6px; background:#fff; color:#555;
    font-family:inherit; font-size:13px; line-height:1; padding:0 10px; height:32px;
    cursor:pointer; white-space:nowrap; }
.pop-btn:hover { border-color:#ea2121; color:#ea2121; }
.pop-btn[disabled] { opacity:.4; cursor:default; }
.pop-btn[disabled]:hover { border-color:var(--line-box); color:#555; }

/* ---- 저작권 문구 (247:152) ---- */
.article-copyright { margin:30px 0 0; font-size:14px; line-height:20px;
    letter-spacing:-0.4px; color:#828282; }

/* ---- 본문 특수 블록 (2026-09-27) ------------------------------------------
   CMS 기사작성의 내부부제·내부단락·박스1·박스2·말풍선·형광펜이 만드는 클래스다.
   🔴 **전에는 사이트에 아무 모양도 안 났다.** 에디터가 퀼 기본 태그(h1·h2·h3·pre·
      blockquote)를 빌려 쓰고 있었고, 웹 CSS 에는 그 규칙이 없어서 기자가 에디터에서
      본 모양과 독자가 보는 모양이 달랐다. 클래스 지정형으로 바꾸면서 같이 만든다.
   🔴 같은 값이 joongang_vue 의 writeArticles.scss 에도 있다 — 한쪽만 고치지 말 것.  */
.article-content .art-subhead {
    overflow: hidden;
    margin: 0 20px 0 3px;
    padding: 0 0 0 11px;
    font-weight: 700;
    border-left: 2px solid #141414;
}
.article-content .art-section {
    margin: 17px 0;
    padding: 15px 0;
    border-top: 1px solid #444446;
    border-bottom: 1px solid var(--line);
    font-size: 20px;
}
.article-content .art-box1 { border: 1px solid #a6a6a6; padding: 10px; }
.article-content .art-box2 { border: 2px solid #a6a6a6; padding: 10px; }
.article-content .art-bubble {
    background: #fff;
    border: 4px solid #d6d6d6;
    padding: 20px;
    margin-bottom: 45px;
    position: relative;
}
/* 말풍선 꼬리. 테두리 두 겹으로 그린다 — 외부 이미지를 받지 않는다. */
.article-content .art-bubble::before,
.article-content .art-bubble::after {
    content: ''; position: absolute; left: 40px; width: 0; height: 0; border-style: solid;
}
.article-content .art-bubble::before {
    bottom: -24px; border-width: 24px 20px 0 0;
    border-color: #d6d6d6 transparent transparent transparent;
}
.article-content .art-bubble::after {
    bottom: -17px; border-width: 18px 15px 0 0;
    border-color: #fff transparent transparent transparent;
}
/* 형광펜. 🔴 클래스 이름이 `highlight` 가 아니라 **`highlight-true`** 다 —
   퀼의 ClassAttributor 가 `키-값` 으로 붙이기 때문이다.

   데일리안에 이미 돌고 있는 구현을 그대로 가져왔다
   (dailian_www newCommon/css/media.css + newCommon/js/common.js 의
   highlightActivation). 값·방향을 바꾸지 않았다.
   🔴 **`.on` 이 붙어야 번진다.** CSS transition 은 값이 **변할 때만** 돈다 —
      CMS 쪽 옛 스타일은 transition 만 선언하고 background-position 을 바꾸는
      코드가 없어서 아무 일도 일어나지 않았다. */
.article-content .highlight-true {
    font-size: inherit;
    font-weight: bold;
    --hl-color: rgba(255, 255, 71, .4);

    background-image:
        linear-gradient(90deg, transparent 50%, var(--hl-color) 0);
    background-size: 200% 100%;
    background-position: 0 0;              /* 시작: 투명 절반이 보이는 상태 */
    transition: background-position 2s linear;
    -webkit-transition: background-position 2s linear;
}
.article-content .highlight-true.on {
    background-position: -100% 0;
}
/* 접근성: 모션 최소화 설정이면 애니메이션 없이 바로 칠해 보여 준다. */
@media (prefers-reduced-motion: reduce) {
    .article-content .highlight-true {
        transition: none;
        background-position: -100% 0;
    }
}

/* ---- 부제 (시안 240:121) ----
   좌측 빨강 3px 세로선 + 15px 간격. 글자는 16px Bold / 28px 행간.
   🔴 세로선은 border-left 로 긋는다 — 시안은 회전시킨 Line 이지만 결과가 같고,
      내용 높이에 맞춰 늘어나야 해서 이쪽이 맞다. */
.article-subtitle { margin:30px 0 0; padding-left:15px; border-left:3px solid #ea2121;
    font-size:16px; font-weight:700; line-height:28px; letter-spacing:-0.4px; color:#111; }

/* 본문 중간 소제목 (시안 240:119): 위 빨강 2px / 아래 회색 1px. */
.article-content h2 { margin:30px 0; padding:10px 0; font-size:16px; font-weight:700;
    line-height:22px; letter-spacing:-0.4px; color:#111;
    border-top:2px solid #ea2121; border-bottom:1px solid var(--line); }

/* ---- 관련 기사 (249:193) ---- */
/* 🔴 섹션을 여는 선은 **#EA2121 3px** 이다(시안 247:154). 댓글 섹션과 같은 규칙이고,
      항목 사이 구분선(#EBEBEB 1px)과 역할이 다르다. */
.article-detail .article-related { margin-top:40px; padding:0; background:none; border-radius:0;
    border-top:3px solid #ea2121; }
.article-detail .article-related h3 { font-size:17px; font-weight:700; letter-spacing:-0.4px;
    color:#111; margin:15px 0 20px; }
.article-detail .article-related ul { list-style:none; }
.article-detail .article-related li { display:flex; gap:15px; align-items:flex-start;
    padding:15px 0; border-bottom:1px solid var(--line); font-size:inherit; }
.article-detail .article-related li:first-child { padding-top:0; }
.rel-thumb { flex:none; width:120px; height:80px; background:#d9d9d9; overflow:hidden; }
.rel-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rel-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }
.rel-title { font-size:16px; line-height:22px; font-weight:700; letter-spacing:-0.4px; color:#111; }
.rel-title:hover { color:#ea2121; }
.rel-date { font-size:14px; line-height:20px; color:#828282; }

/* ---- 기자 카드 (249:237) ---- */
.author-card { margin-top:40px; border:1px solid var(--line-box); padding:30px; }
.author-head { display:flex; align-items:center; gap:15px; }
.author-photo { width:60px; height:60px; flex:none; border-radius:50%; object-fit:cover;
    background:#ebebeb; }
.author-photo-empty { display:flex; align-items:center; justify-content:center;
    font-size:22px; font-weight:700; color:#999; }
.author-who { min-width:0; }
.author-name { display:inline-flex; align-items:center; gap:8px; font-size:17px;
    font-weight:700; letter-spacing:-0.4px; color:#000; }
.author-sub { display:flex; align-items:center; gap:10px; margin-top:7px;
    font-size:14px; line-height:20px; letter-spacing:-0.4px; }
.author-dept { font-weight:700; color:#ea2121; }
.author-mail { font-weight:500; color:#111; word-break:break-all; }
.author-more { list-style:none; margin-top:15px; }
.author-more li { padding:15px 0; border-top:1px solid #ebebeb; }
.author-more a { font-size:16px; line-height:22px; font-weight:700; letter-spacing:-0.4px;
    color:#000; display:block; }
.author-more a:hover { color:#ea2121; }

/* ---- 사이드바 섹션별 많이 본 기사 (240:7) — 기사 상세에서만 빨강이다 ---- */
.article-grid .sidebar .section-title { color:#ea2121; }

@media (max-width:985px) {
    /* 레일을 놓을 자리가 없다. 본문 위 가로줄로 눕힌다. */
    .article-grid { grid-template-columns: minmax(0, 1fr); }
    /* 사이드바는 본문 상자(.article-detail) **밖**이라 좌우 패딩이 없다.
       그대로 두면 '많이 본 기사'만 30px 씩 튀어나온다(실측 x=20 vs 본문 x=50).
       같은 패딩을 줘서 줄을 맞춘다. 모바일은 아래에서 16 으로 덮는다. */
    .article-grid .sidebar { padding-left:30px; padding-right:30px; }
    .article-rail { grid-column:auto; grid-row:auto; position:static; flex-direction:row;
        flex-wrap:wrap; justify-content:flex-start; width:auto; gap:18px;
        padding:12px 16px; border-radius:12px; margin-bottom:20px; }
    .article-rail .rail-sep { width:1px; height:28px; }
    .rail-btn { flex-direction:row; gap:6px; font-size:13px; }
    .rail-btn img, .rail-btn .rail-svg { width:20px; height:20px; }
    /* 가로 레일에서는 아래로 펴야 화면 밖으로 안 나간다. */
    .rail-pop { left:0; top:calc(100% + 8px); }
    .article-detail .article-title { font-size:26px; line-height:36px; margin-bottom:20px; }
    .article-crumb, .article-writer { margin-bottom:20px; }
}

@media (max-width:690px) {
    /* 모바일 기사본문 시안 `297:67`(278:320) — 2026-09-29 대조.
       제목 24/32, 빵부스러기는 PC 와 같은 17px, 메타는 **한 줄**이다. */
    .article-detail .article-title { font-size:24px; line-height:32px; }
    /* 🔴 빵부스러기는 안 줄인다. 시안이 PC 와 같은 17px 다(`297:69`/`297:71`). */
    /* 🔴 메타는 세로로 쌓지 않는다 — 일시(좌)와 구글 버튼(우)이 한 줄에 마주 본다
       (`297:74`, 높이 30). 세로로 쌓으면 머리가 두 줄만큼 길어진다.
       버튼은 200x30 고정이고 일시는 말줄임이 있어 690px 에서도 한 줄에 들어간다. */
    .article-detail .article-meta { align-items:center; flex-direction:row; }
    .article-detail .meta-date { min-width:0; overflow:hidden; text-overflow:ellipsis; }
    .rel-thumb { width:100px; height:67px; }
    .rel-title { font-size:15px; line-height:21px; }
    .author-card { padding:20px; }
    .author-sub { flex-wrap:wrap; gap:4px 10px; }
    /* 팝오버가 좁은 화면에서 넘치지 않게 줄바꿈을 허용한다. */
    .rail-pop { flex-wrap:wrap; max-width:calc(100vw - 60px); }
}

/* 인쇄에서는 레일·기자카드를 뺀다(화면 도구다). */
@media print {
    .article-rail, .author-card, .clap-area, .article-crumb .crumb-sep { display:none !important; }
}

/* ---- 스크롤 시 상단 60px 바 + 읽기 진행바 (시안 228:3808 / 228:3827 / 228:3828) ----
   시안의 기사 화면 상단은 **로고 줄이 사라지고** 한 줄(60px)만 남아 기사 제목과
   ≡+돋보기 아이콘을 보여 준다. 그 아래로 7px 진행바가 깔린다.
   공유 헤더를 갈아엎지 않고, 기사 화면에서만 body 에 클래스를 붙여 접는다. */
.nav-article-title { display:none; }
.read-progress { position:absolute; left:0; right:0; bottom:-7px; height:7px;
    background:#f3f3f3; overflow:hidden; }
.read-progress i { display:block; height:100%; width:0; background:#ea2121;
    transition:width .08s linear; }
/* 진행바가 3px 빨간 테두리와 겹쳐 10px 띠가 되는 것을 막는다. */
body.article-page .header { border-bottom-width:0; }

/* 🔴 접힘은 **PC 전용**이다. 태블릿·모바일(~985)은 nav-menu 가 없고 로고가 2행에
   있어 제목을 넣을 자리가 없다. 여기서 규칙을 걸고 아래 폭에서 되돌리면, 되돌린
   값이 원래 값과 미세하게 달라 스크롤할 때 헤더가 들썩인다(min-height 5px 차이로
   실제로 그랬다). 애초에 min-width 로 가둬 둔다. */
@media (min-width:986px) {
    body.article-read .header-top { display:none; }
    body.article-read .nav { min-height:60px; }
    body.article-read .logo-nav { display:none; }
    /* 🔴 메뉴를 감추는 것은 **기사 화면뿐**이다. 그 자리에 기사 제목이 들어간다.
       카테고리(시안 `303:475`)는 접혀도 메뉴가 그대로 가운데 남는다 — 보여 줄
       제목이 없다. 예전에는 이 규칙이 body.article-read 전체에 걸려 있었다. */
    body.article-page.article-read .nav-menu { display:none; }
    /* 접힌 바 아래는 1px #EBEBEB 다(시안 `303:624` Line 3). 평소의 빨강 3px 이
       아니다. 기사 화면은 그 자리를 읽기 진행바가 대신한다. */
    body.nav-sticky.article-read .header { border-bottom:1px solid var(--line); }
    /* 🔴 **가운데 정렬이다.** 시안(228:3167)의 접힌 바는 가운데에 내용이 오고
          오른쪽 끝에 ≡+돋보기만 남는다. flex:1 로 늘리면 왼쪽 끝에 붙는 데다,
          .nav 의 padding-right:45px(서랍 버튼 자리) 때문에 가운데로 보이지도 않는다.
          .nav 가 position:relative 라 패딩 박스 기준으로 절대 가운데에 세운다. */
    body.article-read .nav-article-title { display:block; position:absolute;
        left:50%; transform:translateX(-50%); max-width:calc(100% - 140px);
        text-align:center; font-size:16px; font-weight:700; letter-spacing:-0.4px;
        color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---- 박수(공감) (시안 253:310) ----
   아이콘 39x40 + 그 아래 카운트 14px Bold #828282, 가운데 정렬.
   시안은 기자 카드와 댓글 사이에 홀로 놓인다. */
.clap-area { display:flex; justify-content:center; padding:40px 0; }
.clap-btn { display:flex; flex-direction:column; align-items:center; gap:8px;
    border:0; background:none; padding:8px 16px; cursor:pointer; font-family:inherit; }
.clap-ico { position:relative; display:block; width:39px; height:40px; }
.clap-btn img { width:39px; height:40px; display:block; transition:transform .15s; }
.clap-btn .clap-on { position:absolute; inset:0; opacity:0; }
/* 눌린 상태(시안 253:309)는 아이콘이 통째로 #EA2121 이다 — 두 장을 겹쳐 바꿔 낀다. */
.clap-btn[aria-pressed="true"] .clap-off { opacity:0; }
.clap-btn[aria-pressed="true"] .clap-on  { opacity:1; }
.clap-btn:hover .clap-ico { transform:scale(1.08); transition:transform .15s; }
.clap-btn[disabled] { cursor:default; opacity:.6; }
.clap-count { font-size:14px; font-weight:700; line-height:20px; letter-spacing:-0.4px;
    color:#828282; }
/* 이미 누른 상태는 카운트 색으로 알린다 — 아이콘이 단색 SVG 라 채움을 못 바꾼다. */
.clap-btn[aria-pressed="true"] .clap-count { color:#ea2121; }
.clap-btn.is-pop .clap-ico { animation:clap-pop .3s ease; }
@keyframes clap-pop {
    0% { transform:scale(1); } 45% { transform:scale(1.25); } 100% { transform:scale(1); }
}
/* 움직임을 줄이도록 설정한 사용자에게는 튀지 않게 한다. */
@media (prefers-reduced-motion: reduce) {
    .clap-btn img, .clap-btn .clap-ico, .clap-btn.is-pop .clap-ico { transition:none; animation:none; }
}

/* 화면에는 안 보이고 스크린리더만 읽는 텍스트. 이 파일에 없던 관용 클래스라 여기 둔다. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }