/* Theme Name: NRS News Theme Theme URI: https://nrs.ppsa.or.kr Description: NRS Platform 공식 다국어 뉴스 FSE 블록 테마. 운영하시는 매체에 맞춰 NRS_Brand 헬퍼로 매체명·컬러를 설정 가능. NRS 플러그인 시스템과 완전히 통합됩니다. Version: 1.0.0 Requires at least: 6.9 Tested up to: 6.9 Requires PHP: 8.4 Author: PPSA (공공사업지원협회 — Public Project Support Association) Author URI: https://ppsa.or.kr License: GPL-2.0-or-later Text Domain: nrs-theme */ /* ★폭별 규칙(@media min-width·max-width)은 이 파일에 두지 않는다 — device/narrow.css(≤1023 공용)·desktop.css(≥1024)·tablet.css(768–1023)·mobile.css(≤767) 에 둔다. * B4(2026-09-15)에 이 파일의 폭 미디어를 모두 걷었다. 기기 파일은 번들 맨 뒤라, 같은 셀렉터를 여기서 폭 조건으로 고쳐도 기기 파일이 이긴다. * 남은 @media = 다크 모드·인쇄·screen 뿐. 상세: nrs-docs/knowledge/nrs_device_css_split.md */ /* ───────────────────────────────────────────────────────────────────────────── CSS 커스텀 속성 (디자인 토큰) ───────────────────────────────────────────────────────────────────────────── */ :root { /* 색상 */ --nrs-color-primary: #000080; /* 메인 컬러 (Navy) */ --nrs-color-accent: #800000; /* 강조색 (Maroon) */ --nrs-color-text: #1e1e1e; /* 본문 텍스트 */ --nrs-color-text-muted: var(--nrs-color-text); /* 보조 텍스트 — 2026-09-27 안 A: 본문 글색과 같게(옛 #555555 · 위계는 크기·굵기·여백) */ --nrs-color-border: #e2e4e7; /* 테두리 */ --nrs-color-bg: #ffffff; /* 배경 */ --nrs-color-bg-sub: #f6f7f7; /* 보조 배경 */ --nrs-color-caption: #333333; /* 캡션 */ --nrs-color-link: #000080; --nrs-color-link-hover: #800000; /* 타이포그래피 */ --nrs-font-body: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif; --nrs-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; --nrs-font-size-base: 15px; --nrs-font-size-sm: 14px; --nrs-font-size-xs: 12px; --nrs-font-size-lg: 18px; --nrs-font-size-xl: 22px; --nrs-font-size-2xl: 28px; --nrs-font-size-3xl: 36px; --nrs-line-height: 1.9; --nrs-line-height-heading: 1.3; /* 레이아웃 (v2.1.2 — 레이아웃 그리드 결정 반영) */ --nrs-max-width: 1100px; /* v2.2.0-102: 전체 컨테이너 폭 1100(운영자 규격: 780+20+300) */ --nrs-content-width: 680px; /* Round 19: 단일 컬럼 본문 텍스트 폭 (운영자 결정 680) */ --nrs-sidebar-width: 300px; /* 우측 영역 표준 폭 (LAYOUT_GRID_REQUIREMENTS §3.3) */ --nrs-gap: 20px; /* 영역 간 여백 표준 (v2.1.2: 24px → 20px) */ --nrs-gap-sm: 12px; --nrs-gap-lg: 40px; /* 헤더 */ /* 2026-09-20 운영자 지시("제호가 배치되는, 햄버거 메뉴가 있는 영역 … 지금의 1.3배로 해라"): 64 → 83px. */ --nrs-header-height: 83px; /* 썸네일 */ --nrs-thumb-ratio: 3/2; --nrs-thumb-w: 140px; --nrs-thumb-h: 105px; --nrs-thumb-bg: #c8d0d8; /* 반경 */ --nrs-radius: 2px; --nrs-radius-lg: 4px; /* 그림자 */ --nrs-shadow-sm: 0 1px 4px rgba(0,0,0,.08); --nrs-shadow: 0 2px 12px rgba(0,0,0,.12); --nrs-shadow-lg: 0 4px 24px rgba(0,0,0,.18); /* 전환 */ --nrs-transition: 0.2s ease; /* 글자 크기 조절 (5단계: -2 ~ +2 — 배율은 nrs-article.css) */ --nrs-article-font-scale: 1; } /* ─── 다크모드 ─────────────────────────────────────────────────────────────── */ /* 2026-09-27 공통 팔레트(WSL 다섯 시스템 같은 역할 · 같은 값 — 운영자 승인 시안 "⑥ NRS 앞면") · 흐린 글은 본문 글색(안 A). * 화면에서만(@media screen) — 브라우저가 다크여도 인쇄는 라이트(공통 설계 6). * 옛 값: 글 #e8e8e8 · 보조 · 캡션 #aaaaaa · 선 #333333 · 바탕 #121212 · 면 #1e1e1e · 링크 #5b9bd5. */ @media screen { [data-theme="dark"], .dark-mode { --nrs-color-text: #f1f5f9; --nrs-color-text-muted: var(--nrs-color-text); --nrs-color-border: #334155; --nrs-color-bg: #0f172a; --nrs-color-bg-sub: #1e293b; --nrs-color-caption: var(--nrs-color-text); --nrs-color-link: #93c5fd; --nrs-color-link-hover: #ff6b6b; } } @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nrs-color-text: #f1f5f9; --nrs-color-text-muted: var(--nrs-color-text); --nrs-color-border: #334155; --nrs-color-bg: #0f172a; --nrs-color-bg-sub: #1e293b; --nrs-color-caption: var(--nrs-color-text); --nrs-color-link: #93c5fd; --nrs-color-link-hover: #ff6b6b; } } /* ─── 리셋 및 기본 스타일 ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--nrs-font-size-base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--nrs-font-body); font-size: var(--nrs-font-size-base); line-height: var(--nrs-line-height); color: var(--nrs-color-text); background: var(--nrs-color-bg); transition: background var(--nrs-transition), color var(--nrs-transition); } img { max-width: 100%; height: auto; display: block; } a { color: var(--nrs-color-link); text-decoration: none; transition: color var(--nrs-transition); } a:hover { color: var(--nrs-color-link-hover); } /* ─── 레이아웃 ────────────────────────────────────────────────────────────── */ /* v2.1.2 (2026-05-22): 데스크탑 패딩 0 (1200px 안에서 영역 분할로 처리), 모바일은 12px 유지 (가독성·터치 영역). */ .nrs-container { max-width: var(--nrs-max-width); margin: 0 auto; padding: 0; } /* v2.2.0-272: 블록 '스크롤 따라다니기' — 페이지빌더 블록 설정의 sticky 토글. position:sticky 는 소속 영역(DOM 부모 컨테이너) 하단까지만 추종(영역 밖 미이탈). */ .nrs-sticky { position: sticky; top: var(--nrs-sticky-top, 8px); align-self: start; z-index: 10; } .nrs-layout { display: grid; grid-template-columns: 1fr var(--nrs-sidebar-width); gap: var(--nrs-gap-lg); align-items: start; } .nrs-layout--full { grid-template-columns: 1fr; } /* ─── 헤더 ────────────────────────────────────────────────────────────────── */ .nrs-header { position: sticky; top: 0; z-index: 100; background: var(--nrs-color-bg); /* v2.2.0-66: 메뉴바 아래 100% 너비 회색 실선 제거(운영자 지시) — border-bottom 삭제. */ box-shadow: var(--nrs-shadow-sm); } /* v2.2.0-66: 헤더 최상단 발행일시 바 — 제호 위, 우측 정렬, 하단 연한 회색 1200px 실선 (뉴스웍스 풍) */ .nrs-header-topbar { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; /* v2.2.0-115: 좌=언어전환, 우=발행일시 */ align-items: center; /* v2.2.0-132: 행 높이를 min-height 로 고정(+30% 유지) → 자식(zh 토글 박스)이 커져도 행 높이 불변. * 세로 패딩 0 + min-height 38 = 38px. 모든 언어 동일. * 2026-09-29: 아랫변 1px 옅은 회색 선(#eef0f2) 없앰 — 09-25 운영자 "제호 이미지 위 아래에 있는 회색 실선을 모두 제거해라"를 * PC 판(device/desktop.css)에만 넣어 태블릿·폰 언어 사이트에 남아 있던 것(운영자 "왜 다른 언어사이트 제호 이미지 위아래에 * 실선이 있지?" → 목업 승인). 이제 모든 폭 · 태블릿·폰 윗줄 높이 39 → 38px(PC 는 전부터 38). */ padding: 0; min-height: 38px; border-bottom: 0; } .nrs-header-topbar .nrs-header-date, .nrs-header-topbar .nrs-publish-date { margin: 0; font-size: 12px; color: var(--nrs-color-text); /* 2026-09-27 안 A(옛 #8a929b) */ line-height: 1.2; } /* v2.2.0-115: 헤더 최상단 좌측 언어 전환 (현재언어 | 다른언어). 구분자 '|' 연한 회색. */ .nrs-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; } .nrs-lang-switch__current { color: #333; font-weight: 600; } .nrs-lang-switch__link { color: var(--nrs-color-text); text-decoration: none; } /* 2026-09-27 안 A(옛 #5a626b) */ .nrs-lang-switch__link:hover { color: #1a4ea8; text-decoration: underline; } .nrs-lang-switch__sep { color: #ccc; } /* 연한 회색 구분 표식 */ /* v2.2.0-130: 중국어 简体|正體 세그먼트 토글 (zh 사이트, JS 주입). 언어 스위처 옆. * 운영자 지시: 글자 크기를 옆 언어선택 폰트(12px)와 동일하게. 선택 음영은 배경보다 살짝 진한 정도. * 행 높이 정합: 테두리를 inset box-shadow 로 그려 박스 레이아웃 높이에 더해지지 않게 함 * → 박스 높이 = 12×1.2 = 14.4px = 언어전환 텍스트와 동일 → zh 상단바 높이 타 언어와 동일. */ .nrs-zh-variant { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 4px 5px; /* v2.2.0-137: 글자 위아래 4px(박스 높이 +4px). 행 높이는 topbar min-height(38px) 로 고정 → 박스(≈22.4px)<38 이라 타 언어와 동일 */ font-size: 12px; /* 옆 언어선택(.nrs-lang-switch)과 동일 */ line-height: 1.2; background: #f1f3f5; /* 옅은 음영 박스 */ box-shadow: inset 0 0 0 1px #c2c9d2; /* 외곽선(레이아웃 높이 미반영) */ border-radius: 3px; } .nrs-zh-variant__opt { -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 1px 4px; /* v2.2.0-138: 세로 1px → 선택 음영 상하 1px씩 확대(행 높이는 topbar min-height 로 고정) */ font: inherit; line-height: 1.2; color: var(--nrs-color-text); /* 2026-09-27 안 A(옛 #8a929b) */ cursor: pointer; border-radius: 2px; } .nrs-zh-variant__opt:hover { color: var(--nrs-color-link); } .nrs-zh-variant__opt.is-active { /* 선택효과: 배경음영보다 조금 더 진한 음영 + 굵게 */ color: #333; background: #d3d9e0; font-weight: 600; } .nrs-zh-variant__sep { color: #ccc; } /* v2.2.0-146: 데스크탑=풀표기(正體/简体), 모바일=약식 첫 글자(正/简) */ .nrs-zh-variant__short { display: none; } .nrs-zh-variant--float { position: fixed; top: 8px; right: 8px; z-index: 9999; background: #fff; padding: 4px; border-radius: 3px; } /* v2.2.0-102: 헤더 내부 정렬을 1100으로 통일(토바 실선·제호·메뉴바 동일 폭) */ .nrs-header .nrs-container { max-width: 1100px; } /* 배너 구역 (헤더 위) */ .nrs-header-banner { background: var(--nrs-color-bg-sub); border-bottom: 1px solid var(--nrs-color-border); padding: 4px 0; text-align: center; } /* 헤더 내부 */ .nrs-header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nrs-header-height); gap: var(--nrs-gap); } .nrs-logo { font-size: var(--nrs-font-size-2xl); font-weight: 800; color: var(--nrs-color-primary); text-decoration: none; flex-shrink: 0; letter-spacing: -0.5px; } .nrs-logo:hover { color: var(--nrs-color-primary); } .nrs-logo img { height: 40px; width: auto; } /* 헤더 우측 도구 */ .nrs-header-tools { display: flex; align-items: center; gap: var(--nrs-gap-sm); flex-shrink: 0; } .nrs-header-meta { font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); } /* 검색 입력 (데스크탑) */ .nrs-search-form { display: flex; align-items: center; border: 1px solid var(--nrs-color-border); border-radius: 20px; overflow: hidden; background: var(--nrs-color-bg-sub); } .nrs-search-input { border: none; background: transparent; padding: 6px 14px; font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text); width: 180px; outline: none; } .nrs-search-btn { background: none; border: none; padding: 6px 12px; cursor: pointer; color: var(--nrs-color-text-muted); font-size: 16px; } /* 아이콘 버튼 (다크모드, 검색 토글) */ .nrs-icon-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--nrs-color-text-muted); font-size: 18px; line-height: 1; border-radius: var(--nrs-radius); transition: color var(--nrs-transition), background var(--nrs-transition); } .nrs-icon-btn:hover { color: var(--nrs-color-primary); background: var(--nrs-color-bg-sub); } /* GNB (데스크탑) */ .nrs-gnb { background: var(--nrs-color-primary); padding: 0; } .nrs-gnb-inner { display: flex; align-items: center; justify-content: space-between; } .nrs-gnb-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; } .nrs-gnb-nav > li { position: relative; } .nrs-gnb-nav > li > a { display: block; padding: 12px 18px; color: rgba(255,255,255,.9); font-size: var(--nrs-font-size-sm); font-weight: 600; white-space: nowrap; transition: background var(--nrs-transition), color var(--nrs-transition); } .nrs-gnb-nav > li > a:hover, .nrs-gnb-nav > li.current-menu-item > a { background: rgba(255,255,255,.15); color: #fff; } /* 드롭다운 */ .nrs-gnb-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--nrs-color-bg); border: 1px solid var(--nrs-color-border); box-shadow: var(--nrs-shadow); border-radius: 0 0 var(--nrs-radius) var(--nrs-radius); list-style: none; margin: 0; padding: 4px 0; z-index: 200; } .nrs-gnb-nav li:hover > .sub-menu { display: block; } .nrs-gnb-nav .sub-menu a { display: block; padding: 8px 16px; color: var(--nrs-color-text); font-size: var(--nrs-font-size-sm); } .nrs-gnb-nav .sub-menu a:hover { background: var(--nrs-color-bg-sub); } .nrs-gnb-date { font-size: var(--nrs-font-size-xs); color: rgba(255,255,255,.7); padding: 0 16px; flex-shrink: 0; } /* 햄버거 버튼 (모바일) */ .nrs-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--nrs-color-text); font-size: 22px; line-height: 1; } /* ─── 모바일 드로어 메뉴 ──────────────────────────────────────────────────── */ .nrs-drawer { position: fixed; top: 0; left: -100%; width: min(320px, 85vw); height: 100vh; background: var(--nrs-color-bg); box-shadow: var(--nrs-shadow-lg); z-index: 1000; overflow-y: auto; transition: left 0.3s ease; display: flex; flex-direction: column; } .nrs-drawer.is-open { left: 0; } .nrs-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; } .nrs-drawer-overlay.is-open { display: block; } .nrs-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--nrs-color-border); } .nrs-drawer-title { font-size: var(--nrs-font-size-lg); font-weight: 700; margin: 0; } .nrs-drawer-close { background: none; border: none; cursor: pointer; font-size: 24px; color: var(--nrs-color-text-muted); line-height: 1; } .nrs-drawer-links { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--nrs-color-border); font-size: var(--nrs-font-size-sm); } .nrs-drawer-links a { color: var(--nrs-color-text-muted); } .nrs-drawer-search { padding: 12px 16px; border-bottom: 1px solid var(--nrs-color-border); } .nrs-drawer-search .nrs-search-form { border-radius: 4px; width: 100%; } .nrs-drawer-search .nrs-search-input { width: 100%; } .nrs-drawer-nav { flex: 1; padding: 8px 0; list-style: none; margin: 0; } .nrs-drawer-nav > li > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: var(--nrs-font-size-base); font-weight: 600; color: var(--nrs-color-text); border-bottom: 1px solid var(--nrs-color-border); } .nrs-drawer-nav .sub-menu { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 8px 16px; gap: 4px; background: var(--nrs-color-bg-sub); } .nrs-drawer-nav .sub-menu a { display: block; padding: 6px 8px; font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text-muted); border-radius: var(--nrs-radius); } .nrs-drawer-nav .sub-menu a:hover { background: var(--nrs-color-border); color: var(--nrs-color-text); } .nrs-drawer-footer { padding: 12px 16px; border-top: 1px solid var(--nrs-color-border); font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text-muted); text-align: center; } /* ─── 티커 ────────────────────────────────────────────────────────────────── */ /* (PLUG-IN 06 CSS와 통합) */ /* ─── 홈 화면 섹션 ────────────────────────────────────────────────────────── */ .nrs-section { margin-bottom: var(--nrs-gap-lg); } .nrs-section-title { font-size: var(--nrs-font-size-xl); font-weight: 800; margin: 0 0 var(--nrs-gap) 0; padding-bottom: 10px; border-bottom: 3px solid var(--nrs-color-primary); display: flex; align-items: center; justify-content: space-between; color: var(--nrs-color-primary); } .nrs-section-more { font-size: var(--nrs-font-size-xs); font-weight: 400; color: var(--nrs-color-text-muted); } /* ─── 히어로 영역 ─────────────────────────────────────────────────────────── */ .nrs-hero { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--nrs-gap); margin-bottom: var(--nrs-gap-lg); } .nrs-hero-main { position: relative; } .nrs-hero-main img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--nrs-radius); } .nrs-hero-main-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(0,0,0,.8)); border-radius: 0 0 var(--nrs-radius) var(--nrs-radius); } .nrs-hero-main-title { font-size: var(--nrs-font-size-2xl); font-weight: 800; color: #fff; line-height: var(--nrs-line-height-heading); margin: 0; } .nrs-hero-main-subtitle { font-size: var(--nrs-font-size-sm); color: rgba(255,255,255,.8); margin: 6px 0 0; } /* 우측 사이드 기사 */ .nrs-hero-side { display: flex; flex-direction: column; gap: var(--nrs-gap-sm); } .nrs-hero-side-item { display: flex; gap: var(--nrs-gap-sm); } .nrs-hero-side-item img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--nrs-radius); flex-shrink: 0; } /* ─── 기사 카드 ───────────────────────────────────────────────────────────── */ .nrs-article-card { display: flex; align-items: center; /* v2.2.0-59: 섬네일·제목(1행/2행) 수직 중앙 정렬 */ gap: var(--nrs-gap-sm); padding: 14px 0; border-bottom: 1px solid var(--nrs-color-border); } .nrs-article-card:last-child { border-bottom: none; } .nrs-article-card:first-child { padding-top: 0; } .nrs-article-card__thumb { width: 140px; height: 94px; object-fit: cover; border-radius: var(--nrs-radius); flex-shrink: 0; } .nrs-article-card__body { flex: 1; min-width: 0; } .nrs-article-card__cat { display: inline-block; font-size: var(--nrs-font-size-xs); font-weight: 600; color: var(--nrs-color-accent); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .nrs-article-card__title { font-size: var(--nrs-font-size-base); font-weight: 700; line-height: var(--nrs-line-height-heading); margin: 0 0 6px 0; color: var(--nrs-color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-article-card__title a { color: inherit; } .nrs-article-card__title a:hover { color: var(--nrs-color-primary); } .nrs-article-card__excerpt { font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px 0; } .nrs-article-card__meta { display: flex; gap: 8px; font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); align-items: center; flex-wrap: wrap; } /* v2.2.0-72: 하단 메타 한 행 = 카테고리 · 발행일시 · 대표 등록자 성명 */ .nrs-article-card__meta .nrs-article-card__cat { margin: 0; } /* 메타 행 안에서는 하단 여백 제거(수직 중앙) */ .nrs-article-card__author { color: var(--nrs-color-text-muted); } /* ── v2.2.0-353: 기사 목록 메타(카테고리·발행일시·작성자) 위치/구분 프리셋 ────────────── * 블록 설정: showCat / showDate / showAuthor(출력 여부) + metaPlacement(위치). * 요소마다 안정 클래스(.nrs-article-card__cat / __date / __author) → 세부 배치는 블록별 CSS 로. * gap(요소 간격)·구분기호(--nrs-meta-sep)·정렬은 CSS 변수/헬퍼로 제어. */ .nrs-article-card__meta { column-gap: var(--nrs-meta-gap, 8px); } /* 구분기호: --nrs-meta-sep 에 '·' '|' 등 지정 시 요소 사이에 표시(미지정=gap만) */ .nrs-article-card__meta > * + *::before { content: var(--nrs-meta-sep, ""); margin-right: var(--nrs-meta-gap, 8px); color: var(--nrs-color-border, #ddd); } /* 제목 대비 위치(메타 래퍼는 본문 내 마지막 → order 로 제목 위/아래·인라인 제어) */ .nrs-article-card__body:has(.nrs-meta--above), .nrs-article-card__body:has(.nrs-meta--inline) { display: flex; flex-direction: column; } .nrs-meta--above { order: -1; } /* 제목 위 */ .nrs-meta--below { order: 50; } /* 제목/발췌 아래(기본) */ .nrs-meta--inline { order: -1; margin-bottom: 2px; } /* 제목 바로 위 한 줄(라벨형) */ /* 정렬: 일부 좌·일부 우(예: 카테고리 좌, 날짜 우) → 우측 요소에 nrs-meta--push 또는 블록별 margin-left:auto */ .nrs-meta--spread { width: 100%; justify-content: space-between; } .nrs-article-card__meta .nrs-meta--push { margin-left: auto; } /* 좌/우(제목 옆) 배치는 컨테이너 폭·디자인 의존 → 블록별 CSS 권장(.nrs-blk-{key} .nrs-article-card__meta{...}) */ /* v2.2.0-72: 기사 등급 배지를 제목 앞에 inline 배치 */ .nrs-article-card__title .nrs-grade-badge { margin-right: 6px; vertical-align: middle; } /* 기사 등급 배지 */ .nrs-grade-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; } .nrs-grade-headline { background: var(--nrs-color-accent); color: #fff; } .nrs-grade-important { background: var(--nrs-color-primary); color: #fff; } .nrs-grade-normal { display: none; } /* ─── 그리드 레이아웃 ─────────────────────────────────────────────────────── */ .nrs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nrs-gap); } .nrs-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nrs-gap); } /* ─── 인기기사 ────────────────────────────────────────────────────────────── */ .nrs-popular-list { list-style: none; margin: 0; padding: 0; } .nrs-popular-item { display: flex; gap: var(--nrs-gap-sm); align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--nrs-color-border); } .nrs-popular-item:last-child { border-bottom: none; } .nrs-popular-rank { font-size: var(--nrs-font-size-xl); font-weight: 900; color: var(--nrs-color-border); line-height: 1; width: 28px; flex-shrink: 0; } .nrs-popular-rank.rank-1, .nrs-popular-rank.rank-2, .nrs-popular-rank.rank-3 { color: var(--nrs-color-accent); } .nrs-popular-title { font-size: var(--nrs-font-size-sm); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-popular-thumb { width: 70px; height: 48px; object-fit: cover; border-radius: var(--nrs-radius); flex-shrink: 0; } /* ─── 사이드바 ────────────────────────────────────────────────────────────── */ .nrs-sidebar { position: sticky; top: calc(var(--nrs-header-height) + 16px); } .nrs-sidebar-widget { margin-bottom: var(--nrs-gap-lg); } .nrs-sidebar-widget-title { font-size: var(--nrs-font-size-base); font-weight: 800; margin: 0 0 var(--nrs-gap-sm) 0; padding-bottom: 8px; border-bottom: 2px solid var(--nrs-color-primary); color: var(--nrs-color-primary); } /* ─── 개별 기사 본문 ──────────────────────────────────────────────────────── */ .nrs-single-header { margin-bottom: var(--nrs-gap); } .nrs-single-cat { display: inline-block; font-size: var(--nrs-font-size-sm); font-weight: 700; color: var(--nrs-color-accent); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .nrs-single-title { /* vw = 창 폭의 1%. 판 고정(방문자가 '화면 환경'을 고름)에서는 창이 아니라 기둥 폭을 따라야 한다 * → --nrs-vw(= 기둥 폭 ÷ 100, blocks.css 판 고정 묶음). 자동·데스크탑 판에는 없으니 1vw 그대로(무회귀). */ font-size: clamp(22px, calc(3 * var(--nrs-vw, 1vw)), var(--nrs-font-size-3xl)); font-weight: 900; line-height: var(--nrs-line-height-heading); margin: 0 0 12px 0; color: var(--nrs-color-text); letter-spacing: -0.5px; } /* 부제목 영역 */ .nrs-subtitle-wrap { margin: 12px 0; border-left: 3px solid var(--nrs-color-primary); padding-left: 14px; } .nrs-subtitle { font-size: calc(var(--nrs-font-size-base) * var(--nrs-article-font-scale, 1)); color: var(--nrs-color-text-muted); line-height: 1.6; margin: 2px 0; transition: font-size 0.15s ease; } /* 기사 메타 바 — v2.2.0-22: 단일 기사(출력) 페이지 전용으로 스코프. * (종전 언스코프 .nrs-article-meta 가 기사목록·사이드바 메타로 누수해 발행일시>제목, * 가운데 점, 위아래 실선을 유발했다. .nrs-article-front/.nrs-article-root 하위로 한정.) */ .nrs-article-front .nrs-article-meta, .nrs-article-root .nrs-article-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--nrs-gap-sm); padding: 12px 0; border-top: 1px solid var(--nrs-color-border); border-bottom: 1px solid var(--nrs-color-border); flex-wrap: wrap; } .nrs-article-meta-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .nrs-article-meta-right { display: flex; align-items: center; gap: 6px; } /* 바이라인 */ .nrs-byline { display: flex; gap: 12px; font-style: normal; flex-wrap: wrap; } .nrs-author { display: flex; align-items: center; gap: 6px; font-size: var(--nrs-font-size-sm); } .nrs-author-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .nrs-author-name { font-weight: 600; color: var(--nrs-color-text); } .nrs-author-email { font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); } /* 도구 버튼 */ .nrs-tool-btn { background: none; border: 1px solid var(--nrs-color-border); border-radius: var(--nrs-radius); padding: 5px 10px; cursor: pointer; font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text-muted); display: inline-flex; align-items: center; gap: 4px; transition: all var(--nrs-transition); } .nrs-tool-btn:hover { border-color: var(--nrs-color-primary); color: var(--nrs-color-primary); } .nrs-tool-btn.is-active { border-color: var(--nrs-color-accent); color: var(--nrs-color-accent); } /* 글자 크기 컨트롤 ([-/+ 단계 표시]) */ .nrs-font-size-wrap { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--nrs-color-border); border-radius: var(--nrs-radius); padding: 0 4px; background: transparent; } .nrs-font-size-wrap .nrs-font-size-btn { background: none; border: 0; padding: 4px 8px; cursor: pointer; font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text); line-height: 1; } .nrs-font-size-wrap .nrs-font-size-btn:hover { color: var(--nrs-color-primary); } .nrs-font-size-wrap .nrs-font-size-btn:disabled { opacity: 0.35; cursor: not-allowed; } .nrs-font-size-wrap .nrs-font-step { display: inline-block; min-width: 22px; text-align: center; font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); user-select: none; font-variant-numeric: tabular-nums; } /* 히어로 이미지 */ .nrs-single-hero { margin: var(--nrs-gap) 0; } .nrs-single-hero img { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--nrs-radius); } /* ─── 기사 본문(.nrs-article-body) — v2.2.0-78: SSOT 일원화 ────────────────────── * 단일기사 본문 타이포(body·제목·부제·메타·p·h2·h3·인용·표·figure·figcaption)는 * 전부 nrs-article.css 가 단독 소유(원칙 P1). 종전 이 위치에 있던 중복 정의는 * nrs-article.css 가 항상 후순위·동등이상 명시도로 덮어써 사실상 죽은 규칙이었고, * 값이 미세하게 달라(예: body 16px vs 18px, 제목 line-height 1.35 vs 1.55) P1 위반이었다. * 고유 규칙(blockquote·table·figure img radius·figcaption:empty·스케일 transition)은 * nrs-article.css 로 이관 완료. 여기서는 정의하지 않는다. (css-conflict-scan.php 로 강제.) */ /* 언어 전환 버튼 */ .nrs-lang-switcher { display: flex; gap: 8px; flex-wrap: wrap; margin: var(--nrs-gap) 0; padding: var(--nrs-gap-sm) 0; border-top: 1px solid var(--nrs-color-border); border-bottom: 1px solid var(--nrs-color-border); } .nrs-lang-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 14px; border: 1px solid var(--nrs-color-primary); border-radius: 20px; font-size: var(--nrs-font-size-sm); color: var(--nrs-color-primary); font-weight: 600; transition: all var(--nrs-transition); } .nrs-lang-btn:hover { background: var(--nrs-color-primary); color: #fff; } /* 태그 */ .nrs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--nrs-gap) 0; } .nrs-tag { display: inline-block; padding: 3px 12px; background: var(--nrs-color-bg-sub); border: 1px solid var(--nrs-color-border); border-radius: 20px; font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); } .nrs-tag:hover { border-color: var(--nrs-color-primary); color: var(--nrs-color-primary); } /* ─── 기사 리스트 (목록·그리드 전환) ─────────────────────────────────────── */ .nrs-list-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nrs-gap-sm); } .nrs-list-title { font-size: var(--nrs-font-size-xl); font-weight: 800; margin: 0; color: var(--nrs-color-primary); } .nrs-view-toggle { display: flex; gap: 4px; } .nrs-view-btn { background: none; border: 1px solid var(--nrs-color-border); padding: 5px 8px; cursor: pointer; border-radius: var(--nrs-radius); font-size: 16px; color: var(--nrs-color-text-muted); transition: all var(--nrs-transition); } .nrs-view-btn.is-active { background: var(--nrs-color-primary); border-color: var(--nrs-color-primary); color: #fff; } /* 그리드 뷰 */ .nrs-article-list.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nrs-gap); } .nrs-article-list.is-grid .nrs-article-card { flex-direction: column; align-items: stretch; /* v2.2.0-59: 그리드 변형은 중앙정렬 제외(세로 카드 폭 유지) */ border: 1px solid var(--nrs-color-border); border-bottom: 1px solid var(--nrs-color-border); border-radius: var(--nrs-radius); padding: 0; overflow: hidden; } .nrs-article-list.is-grid .nrs-article-card__thumb { width: 100%; height: 160px; } .nrs-article-list.is-grid .nrs-article-card__body { padding: 12px; } /* ── 사이드바 인기/최신 (v2.2.0-60 운영자 설계 복원) ── * 인기: [순위] [제목 2줄] ……… [섬네일 72px·3:2] / 최신: [제목 2줄] … [섬네일 60px·3:2] * 카테고리·날짜·작성자 없음. 공통 nrs-thumb(300×200=3:2)를 CSS로 축소. 행 내용 수직 중앙. */ .nrs-side-popular .nrs-article-card, .nrs-side-recent .nrs-article-card { position: relative; align-items: center; /* 순위·제목·섬네일 수직 중앙(제목 1줄/2줄 모두) */ gap: 10px; padding: 7px 0; /* v2.2.0-62: 행 간격 축소(기본 14→7) */ border-bottom: 0; /* 전체폭 구분선 제거 → 아래 ::after 로 섬네일 제외 폭만 */ } /* v2.2.0-62: 행 구분 실선이 섬네일을 가로지르지 않도록 — 좌측(순위·제목)만, 섬네일 앞에서 끝남 */ .nrs-side-popular .nrs-article-card:not(:last-child)::after, .nrs-side-recent .nrs-article-card:not(:last-child)::after { content: ""; position: absolute; left: 0; bottom: 0; border-bottom: 1px solid var(--nrs-color-border, #e2e4e7); } .nrs-side-popular .nrs-article-card:not(:last-child)::after { right: 72px; } /* 섬네일 72px 폭 제외 */ .nrs-side-recent .nrs-article-card:not(:last-child)::after { right: 60px; } /* 섬네일 60px 폭 제외 */ .nrs-side-popular .nrs-article-card__num { order: 0; flex: 0 0 auto; min-width: 18px; font-size: 16px; font-weight: 800; line-height: 1.2; color: var(--nrs-color-primary, #0a3a6b); text-align: center; } .nrs-side-popular .nrs-article-card__body, .nrs-side-recent .nrs-article-card__body { order: 1; flex: 1 1 auto; min-width: 0; } .nrs-side-popular .nrs-article-card__thumb-link, .nrs-side-recent .nrs-article-card__thumb-link { order: 2; flex: 0 0 auto; display: block; line-height: 0; } .nrs-side-popular .nrs-article-card__thumb { width: 72px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--nrs-radius); } .nrs-side-recent .nrs-article-card__thumb { width: 60px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--nrs-radius); } /* v2.2.0-73: 최신뉴스 = 섬네일 좌 + 제목 우 (인기기사는 [순위][제목][섬네일우] 유지) */ .nrs-side-recent .nrs-article-card__thumb-link { order: 0; } .nrs-side-recent .nrs-article-card__body { order: 1; } /* 구분선이 좌측 섬네일(60px + gap 10px)을 가로지르지 않도록 좌측 70px 제외 */ .nrs-side-recent .nrs-article-card:not(:last-child)::after { left: 70px; right: 0; } .nrs-side-popular .nrs-article-card__title, .nrs-side-recent .nrs-article-card__title { margin: 0; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; /* 제목 최대 2줄, 넘으면 말줄임 */ -webkit-box-orient: vertical; overflow: hidden; } /* 인기기사 기간 탭(7일간/1개월간) — 제목 우측, 클릭 전환 (v2.2.0-61) */ .nrs-side-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } /* v2.2.0-62: 제목·탭 ↔ 기사 행 간격 */ .nrs-side-pop-tabbed .nrs-article-list__title { margin: 0; } /* 최신뉴스(탭 없음)도 제목 ↔ 행 간격 동일하게 */ .nrs-side-recent .nrs-article-list__title { margin-bottom: 14px; } .nrs-side-tabs { display: flex; gap: 4px; flex: 0 0 auto; } .nrs-side-tab { border: 1px solid var(--nrs-color-border, #e2e4e7); background: var(--nrs-color-bg, #fff); color: var(--nrs-color-text); /* 2026-09-27 안 A(옛 #6b7280) · 바탕은 다크에서 어둡게 */ font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 12px; cursor: pointer; } .nrs-side-tab.is-active { background: var(--nrs-color-primary, #0a3a6b); border-color: var(--nrs-color-primary, #0a3a6b); color: #fff; font-weight: 700; } .nrs-side-pop-panel[hidden] { display: none; } /* ── 아카이브 3종 선택형 리스트(뷰 토글: 텍스트/섬네일/카드) — v2.2.0-71 * nrs-theme/article-list {viewToggle:true} 의 .nrs-article-card 마크업 기준. * .nrs-list-viewbar/.nrs-lv-btn(CSS)·initListView(JS)는 기존 재사용. 모드 클래스가 * 붙은 토글 목록에만 적용 → 사이드바 등 다른 .nrs-article-card 무영향. */ .nrs-list-toggle-wrap .nrs-article-list .nrs-article-card { align-items: flex-start; } /* 섬네일형(card-list, 기본): 가로 카드(섬네일 좌 + 본문) — .nrs-article-card 기본 사용. */ .nrs-article-layout-card-list .nrs-article-card__thumb-link { display: block; } /* 텍스트형(simple-list): 섬네일·요약 숨김. 기사당 1행(제목 좌 · 메타 우 우측정렬). v2.2.0-73 */ .nrs-article-layout-simple-list .nrs-article-card__thumb-link { display: none; } .nrs-article-layout-simple-list .nrs-article-card__excerpt { display: none; } .nrs-article-layout-simple-list .nrs-article-card { padding: 10px 0; border-bottom: 0; /* 행별 실선 제거 — 아래 5묶음 구분선만 */ align-items: baseline; } .nrs-article-layout-simple-list .nrs-article-card__body { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .nrs-article-layout-simple-list .nrs-article-card__title { margin: 0; flex: 1 1 auto; min-width: 0; -webkit-line-clamp: 1; /* 제목 1행 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nrs-article-layout-simple-list .nrs-article-card__meta { flex: 0 0 auto; margin: 0; justify-content: flex-end; /* 카테고리·발행일시·대표등록자 우측 정렬 */ } /* 5개 묶음 사이에만 실선(6·11번째 위) → 15개 기준 중간 2개, 맨 위/아래 없음. * 페이저가 .nrs-article-list 마지막 자식이라 :last-child 의존 회피. */ .nrs-article-layout-simple-list .nrs-article-card:nth-child(5n+1):not(:first-child) { border-top: 1px solid var(--nrs-color-border); } /* 카드형(grid): 다열 그리드, 세로 카드(섬네일 풀폭 위 + 본문 아래). */ .nrs-article-layout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .nrs-article-layout-grid .nrs-article-card { flex-direction: column; align-items: stretch; border-bottom: 0; padding: 0; gap: 0; } .nrs-article-layout-grid .nrs-article-card__thumb-link { display: block; width: 100%; } .nrs-article-layout-grid .nrs-article-card__thumb { width: 100%; height: 160px; } .nrs-article-layout-grid .nrs-article-card__body { padding: 10px 0 0; } /* v2.2.0-72: 카드뉴스형 제목은 항상 2행 높이 확보 — 1행이면 둘째 행은 비워둠(카드 높이 정렬) */ .nrs-article-layout-grid .nrs-article-card__title { -webkit-line-clamp: 2; min-height: calc(var(--nrs-line-height-heading, 1.3) * 2em); } /* v2.2.0-72: 섬네일형 본문은 2행 끝까지 흐름 */ .nrs-article-layout-card-list .nrs-article-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-article-layout-grid .nrs-article-list__pager { grid-column: 1 / -1; } /* 페이저는 전열 폭 */ /* ── 보기 전환 목록(.nrs-list-toggle-wrap — 분류 · 검색 · 기자 · 보관함 화면)만 · 모든 기기 — 2026-10-02 운영자 지시 · 목업 v10 승인 ── * 기기별(제목 글자 크기 · 단 수 · 섬네일 크기 · 숨김)은 device/mobile · tablet · desktop.css 같은 묶음. 첫 화면 등 다른 기사 목록은 그대로. * ① 제목 줄 간격 = 기사 화면 제목과 같은 1.55(운영자 "기사 출력 페이지의 제목 행높이처럼 … 통일해라" — 기사 화면 값은 디자인 CSS(기사 화면 활성본)의 * 09-28 결정 "제목, 부제목, 본문, 이미지 캡션 모두 줄 간격은 1.55배로 통일하자"). 변수도 함께 바꿔 위 카드형 2행 높이 예약도 이 값을 따른다. * ② 카드형: 섬네일 1:1(블록 설정 '섬네일 비율 · 모양'을 정한 목록 .nrs-al--thumbstyled 은 그 값) · 요약 뺌. * ③ 섬네일형 요약 1행(폰은 mobile.css 가 뺌) — 디자인 CSS 의 요약 2행 규칙(body 를 붙여 씀)보다 세게 body 를 붙였다. * ④ 등급 배지: 긴 배지(헤드라인 · 중요)는 글자 아래에 맞춤(데스크톱 텍스트형 14px 에서 가운데 맞춤이면 1.4px 잘렸다 — 목업 실측). * 한 글자 배지(헤 · 중 — 도우미 nrs_get_grade_badge 의 data-short = 이름 첫 글자)는 카드형 = 모든 기기, 폰 = 모든 형식(mobile.css 에 같은 규칙). * 제목 글자 크기에 맞춘(em) 동그라미라 제목 줄(1.55em) 안에 든다(0.72 × 1.6 = 1.15em). 긴 이름은 그대로 두어 화면 읽기 프로그램이 읽고, * 글자만 안 보이게(-webkit-text-fill-color) — 한 글자는 배지 글자색을 그대로 따른다. */ .nrs-list-toggle-wrap .nrs-article-list .nrs-article-card__title { --nrs-line-height-heading: 1.55; line-height: 1.55; } /* 공동 바이라인(2026-10-03 v12) — 목록 블록이 등록자 2명 이상일 때 대표(__rep)와 전체(__all)를 함께 찍는다. 태블릿 · PC 는 대표만(지금과 같음) · 폰은 mobile.css 가 전체로. */ .nrs-article-card__all { display: none; } .nrs-list-toggle-wrap:not(.nrs-al--thumbstyled) .nrs-article-layout-grid .nrs-article-card__thumb { height: auto; aspect-ratio: 1 / 1; } .nrs-list-toggle-wrap .nrs-article-layout-grid .nrs-article-card__excerpt { display: none; } body .nrs-list-toggle-wrap .nrs-article-layout-card-list .nrs-article-card__excerpt { -webkit-line-clamp: 1; max-height: calc(1 * 1lh); } .nrs-list-toggle-wrap .nrs-article-card__title .nrs-grade-badge { vertical-align: text-bottom; } .nrs-list-toggle-wrap .nrs-article-layout-grid .nrs-article-card__title .nrs-grade-badge[data-short] { position: relative; box-sizing: border-box; width: 1.6em; height: 1.6em; padding: 0; overflow: hidden; font-size: 0.72em; line-height: 1.6em; white-space: nowrap; border-radius: 50%; vertical-align: middle; -webkit-text-fill-color: transparent; } .nrs-list-toggle-wrap .nrs-article-layout-grid .nrs-article-card__title .nrs-grade-badge[data-short]::before { content: attr(data-short); content: attr(data-short) / ""; /* 화면 읽기 프로그램은 긴 이름만(이 문법을 모르는 브라우저는 윗줄) */ position: absolute; inset: 0; line-height: 1.6em; text-align: center; -webkit-text-fill-color: currentColor; } /* ─── 페이지네이션 (v2.2.0-72) ──────────────────────────────────────────────── * 프런트·관리자 모든 페이지 선택을 운영자 정의 공유 컴포넌트 \NRS\Shared\Pagination * (.nrs-pagination__* — modules/01-shared/assets/css/pagination.css)으로 통일. * 옛 테마 자체 .nrs-pagination(a/span/.current, 38px) 규칙은 신 컴포넌트 마크업과 * 같은 .nrs-pagination 루트를 공유해 충돌하므로 제거(공유 CSS 가 스타일 담당). * 인쇄 시 숨김 규칙(.nrs-pagination)만 아래 print 섹션에 유지. */ .nrs-article-list__pager { margin-top: var(--nrs-gap-lg); } /* ─── 기자 아카이브 ───────────────────────────────────────────────────────── */ .nrs-author-profile { display: flex; gap: var(--nrs-gap); align-items: center; padding: var(--nrs-gap); background: var(--nrs-color-bg-sub); border-radius: var(--nrs-radius-lg); margin-bottom: var(--nrs-gap-lg); } .nrs-author-profile-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .nrs-author-profile-info { flex: 1; } .nrs-author-profile-name { font-size: var(--nrs-font-size-2xl); font-weight: 800; margin: 0 0 4px 0; } .nrs-author-profile-dept { font-size: var(--nrs-font-size-sm); color: var(--nrs-color-text-muted); } /* ─── 모바일 하단 고정 내비게이션 ────────────────────────────────────────── */ .nrs-mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nrs-mobile-nav-height); background: var(--nrs-color-bg); border-top: 1px solid var(--nrs-color-border); z-index: 100; box-shadow: 0 -2px 12px rgba(0,0,0,.1); } .nrs-mobile-nav-inner { display: flex; height: 100%; } .nrs-mobile-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--nrs-color-text-muted); font-size: 10px; text-decoration: none; transition: color var(--nrs-transition); cursor: pointer; background: none; border: none; padding: 0; } .nrs-mobile-nav-item:hover, .nrs-mobile-nav-item.is-active { color: var(--nrs-color-primary); } .nrs-mobile-nav-item .icon { font-size: 20px; } /* ─── 푸터 ────────────────────────────────────────────────────────────────── */ .nrs-footer { background: var(--nrs-color-bg-sub); border-top: 1px solid var(--nrs-color-border); padding: var(--nrs-gap-lg) 0 calc(var(--nrs-gap-lg) + var(--nrs-mobile-nav-height)); margin-top: var(--nrs-gap-lg); } .nrs-footer-sns { display: flex; gap: 12px; margin-bottom: var(--nrs-gap); flex-wrap: wrap; } .nrs-footer-sns a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--nrs-color-border); border-radius: 50%; color: var(--nrs-color-text-muted); font-size: 18px; transition: all var(--nrs-transition); } .nrs-footer-sns a:hover { background: var(--nrs-color-primary); color: #fff; } .nrs-footer-links { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--nrs-gap); font-size: var(--nrs-font-size-sm); } .nrs-footer-links a { color: var(--nrs-color-text-muted); } .nrs-footer-links a:hover { color: var(--nrs-color-primary); } .nrs-footer-info { font-size: var(--nrs-font-size-xs); color: var(--nrs-color-text-muted); line-height: 1.8; } .nrs-footer-meta { margin: 0 0 6px 0; } .nrs-footer-copyright { margin: 0; } /* B1: PC/모바일 토글 버튼 CSS 삭제 — 버튼은 v2.2.0-23 에 제거됨. */ /* ─── 404 페이지 ──────────────────────────────────────────────────────────── */ .nrs-404 { text-align: center; padding: 80px 0; } .nrs-404-code { font-size: 120px; font-weight: 900; color: var(--nrs-color-border); line-height: 1; margin: 0; } .nrs-404-title { font-size: var(--nrs-font-size-2xl); font-weight: 700; margin: 16px 0 8px; } .nrs-404-desc { color: var(--nrs-color-text-muted); margin-bottom: var(--nrs-gap); } /* (v2.2.0-101) '본문 바로가기' 스킵 링크 제거 — 운영자 지시. #main-content 앵커는 유지. */ /* ─── 인쇄 스타일 ─────────────────────────────────────────────────────────── */ @media print { .nrs-header, .nrs-gnb, .nrs-sidebar, .nrs-mobile-nav, .nrs-footer, .nrs-article-meta-right, .nrs-lang-switcher, .nrs-tags, .nrs-pagination { display: none !important; } .nrs-layout { grid-template-columns: 1fr; } .nrs-article-body { max-width: 100%; font-size: 12pt; } a { color: inherit; text-decoration: underline; } } /* ─── 기사 제목 태그 ([ ] 빨간 볼드) ─────────────────────────────────────── */ .nrs-title-tag { color: var(--nrs-color-accent); font-weight: 900; } /* ─── 썸네일 출력 박스 ────────────────────────────────────────────────────── */ .nrs-thumb { width: var(--nrs-thumb-w); height: var(--nrs-thumb-h); flex-shrink: 0; overflow: hidden; border-radius: var(--nrs-radius); background: var(--nrs-thumb-bg); display: flex; align-items: center; justify-content: center; aspect-ratio: var(--nrs-thumb-ratio); } .nrs-thumb img { height: var(--nrs-thumb-h); width: auto; max-width: var(--nrs-thumb-w); object-fit: cover; object-position: center top; display: block; } /* ─── 박스 제목 (파일 폴더 탭 스타일) ────────────────────────────────────── */ .nrs-box-title-wrap { display: flex; } .nrs-box-title-wrap.align-left { justify-content: flex-start; padding-left: 12px; } .nrs-box-title-wrap.align-center { justify-content: center; } .nrs-box-title-wrap.align-right { justify-content: flex-end; padding-right: 12px; } /* 상단 탭 */ .nrs-box-title-tab { display: inline-flex; align-items: center; justify-content: center; padding: 5px 16px; border-radius: 4px 4px 0 0; font-size: 13px; white-space: nowrap; position: relative; z-index: 1; margin-bottom: -2px; min-height: 28px; background: var(--nrs-color-primary); color: #fff; } /* 하단 탭 */ .nrs-box-title-tab.bottom { border-radius: 0 0 4px 4px; margin-bottom: 0; margin-top: -2px; } .nrs-box-body { border: 2px solid var(--nrs-color-primary); border-radius: 0 4px 4px 4px; overflow: hidden; } .nrs-box-body.tab-right { border-radius: 4px 0 4px 4px; } .nrs-box-body.tab-center { border-radius: 4px; } .nrs-box-body.tab-bottom { border-radius: 4px 4px 4px 0; } /* ─── SNS 공유 버튼 ───────────────────────────────────────────────────────── */ .nrs-sns-share { display: flex; gap: 6px; margin-bottom: 12px; position: relative; } .nrs-sns-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--nrs-radius); background: var(--nrs-color-bg-sub); border: 1px solid var(--nrs-color-border); cursor: pointer; position: relative; transition: background var(--nrs-transition); } .nrs-sns-btn:hover { background: var(--nrs-color-primary); } .nrs-sns-btn:hover svg { fill: #fff; } .nrs-sns-btn .nrs-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #333; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .nrs-sns-btn:hover .nrs-tooltip, .nrs-sns-btn.show-tooltip .nrs-tooltip { opacity: 1; } /* ─── 언어 전환 버튼 ─────────────────────────────────────────────────────── */ .nrs-lang-switcher { display: flex; gap: 6px; margin: 16px 0; } .nrs-lang-btn { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--nrs-color-primary); border-radius: var(--nrs-radius); font-size: 12px; font-weight: 700; color: var(--nrs-color-primary); transition: all var(--nrs-transition); } .nrs-lang-btn:hover { background: var(--nrs-color-primary); color: #fff; } /* ─── 속보 바 ────────────────────────────────────────────────────────────── */ .nrs-breaking-bar { background: var(--nrs-color-accent); color: #fff; padding: 6px 0; overflow: hidden; } .nrs-breaking-bar__inner { display: flex; align-items: center; gap: 12px; } .nrs-breaking-bar__label { background: #fff; color: var(--nrs-color-accent); font-weight: 900; font-size: 12px; padding: 2px 8px; flex-shrink: 0; } .nrs-breaking-bar__ticker { flex: 1; overflow: hidden; height: 1.4em; position: relative; } .nrs-breaking-bar__item { position: absolute; width: 100%; opacity: 0; transition: opacity 0.5s; } .nrs-breaking-bar__item.active { opacity: 1; } /* ─── 인기기사 박스 ──────────────────────────────────────────────────────── */ .nrs-popular__tabs { display: flex; border-bottom: 1px solid var(--nrs-color-border); margin-bottom: 8px; } .nrs-popular__tab { flex: 1; padding: 7px 0; text-align: center; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; transition: all var(--nrs-transition); } .nrs-popular__tab.active { color: var(--nrs-color-primary); font-weight: 700; border-bottom-color: var(--nrs-color-primary); } .nrs-popular__list { list-style: none; margin: 0; padding: 0; } .nrs-popular__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--nrs-color-border); } .nrs-popular__rank { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; flex-shrink: 0; } .nrs-popular__rank--top { color: var(--nrs-color-primary); } .nrs-popular__rank--normal { color: var(--nrs-color-text-muted); } .nrs-popular__thumb { width: 55px; height: 42px; flex-shrink: 0; overflow: hidden; border-radius: var(--nrs-radius); background: var(--nrs-thumb-bg); } .nrs-popular__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .nrs-popular__title { font-size: 13px; line-height: 1.4; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* Round 19 (2026-05-24): 글자 크기 7단계 스케일은 nrs-article.css 로 이전 (단일 출처). * 기존 등비수열(0.5, 0.63, 0.79, 1, 1.26, 1.59, 2) → 선형(0.5, 0.67, 0.83, 1, 1.17, 1.33, 1.5). * 운영자 결정: +3 = 150%, -3 = 50%. 모든 article 페이지 공통 사용. */ /* ─── GNB (상단 메뉴바) ──────────────────────────────────────────────────── */ .nrs-gnb { background: var(--nrs-color-primary); } .nrs-gnb__inner { display: flex; align-items: center; gap: 4px; padding: 0 var(--nrs-gap); max-width: var(--nrs-max-width); margin: 0 auto; } .nrs-gnb__item { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; padding: 10px 12px; transition: color var(--nrs-transition); white-space: nowrap; } .nrs-gnb__item:hover { color: #fff; } /* ─── 헤더 발행일시 ──────────────────────────────────────────────────────── */ .nrs-header-pubdate { font-size: 12px; color: #333333; margin-right: 12px; white-space: nowrap; } /* ─── 드로어 메뉴 (모바일) ───────────────────────────────────────────────── */ .nrs-drawer { position: fixed; top: 0; left: -320px; width: 300px; height: 100vh; background: var(--nrs-color-bg); box-shadow: var(--nrs-shadow-lg); z-index: 200; overflow-y: auto; transition: left 0.3s ease; padding: 16px; } .nrs-drawer.open { left: 0; } .nrs-drawer__search { margin-bottom: 16px; } .nrs-drawer__overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 199; display: none; } .nrs-drawer__overlay.open { display: block; } .nrs-drawer__menu { list-style: none; margin: 0; padding: 0; } .nrs-drawer__item { border-bottom: 1px solid var(--nrs-color-border); } .nrs-drawer__link { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; font-size: 15px; color: var(--nrs-color-text); } .nrs-drawer__sub { list-style: none; margin: 0; padding: 0 0 8px 16px; display: none; } .nrs-drawer__sub.open { display: block; } .nrs-drawer__sub-link { display: block; padding: 8px; font-size: 14px; color: var(--nrs-color-text-muted); } /* ════════════════════════════════════════════════════════════════════ * v2.2.0-13 — core/navigation 마크업 대응 + 마스트헤드 로고 정리 * 기존 GNB/푸터 메뉴 CSS 는 classic-menu(.sub-menu, > li > a) 기준이라 * 블록 테마의 core/navigation 출력(.nrs-block-navigation__*)에 적용되지 않아 * GNB 가 무스타일로 보였다. 아래에서 블록 마크업에 맞춰 스타일을 매핑한다. * ════════════════════════════════════════════════════════════════════ */ /* 마스트헤드 로고 (core/site-logo) — site_icon 로고를 적정 높이로 */ .nrs-block-site-logo.nrs-logo, .nrs-logo .nrs-block-site-logo { width: auto; } .nrs-logo img, .nrs-header-inner .nrs-block-site-logo img { height: 46px; width: auto; max-width: 220px; display: block; } /* 로고 영역 좌측 고정(도구가 좌측으로 쏠려 떠 보이는 현상 방지) */ .nrs-header-inner { min-height: var(--nrs-header-height); } .nrs-header-inner > .nrs-header-tools { margin-left: auto; } /* GNB — core/navigation 가로 메뉴바 (배경=primary, 흰색 링크) */ .nrs-gnb-nav.nrs-block-navigation, .nrs-gnb-nav .nrs-block-navigation__container { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .nrs-gnb-nav .nrs-block-navigation-item { position: relative; } .nrs-gnb-nav .nrs-block-navigation-item__content { display: block; padding: 12px 18px; color: rgba(255,255,255,.92); font-size: var(--nrs-font-size-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background var(--nrs-transition), color var(--nrs-transition); } .nrs-gnb-nav .nrs-block-navigation-item__content:hover, .nrs-gnb-nav .nrs-block-navigation-item.current-menu-item > .nrs-block-navigation-item__content { background: rgba(255,255,255,.16); color: #fff; } /* GNB 드롭다운(서브메뉴) */ .nrs-gnb-nav .nrs-block-navigation__submenu-container { background: var(--nrs-color-bg); border: 1px solid var(--nrs-color-border); box-shadow: var(--nrs-shadow); min-width: 190px; padding: 4px 0; } .nrs-gnb-nav .nrs-block-navigation__submenu-container .nrs-block-navigation-item__content { color: var(--nrs-color-text); padding: 8px 16px; font-weight: 500; } .nrs-gnb-nav .nrs-block-navigation__submenu-container .nrs-block-navigation-item__content:hover { background: var(--nrs-color-bg-sub); color: var(--nrs-color-primary); } /* GNB 내부 정렬 + 발행일시 우측 */ .nrs-gnb-inner { gap: 12px; } .nrs-gnb-inner .nrs-gnb-date { margin-left: auto; } /* 푸터 링크 (core/navigation) 가로 정렬 */ .nrs-footer-links .nrs-block-navigation__container { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; } .nrs-footer-links .nrs-block-navigation-item__content { color: var(--nrs-color-text-muted); font-size: var(--nrs-font-size-sm); text-decoration: none; } .nrs-footer-links .nrs-block-navigation-item__content:hover { color: var(--nrs-color-primary); } /* B1(2026-09-10): 죽은 서버판별 축(body.nrs-view-*)·PC/모바일 토글 CSS 제거. 근거·실측=CHANGELOG 2026-09-10 B1. ★B4(2026-09-15)부터 기기 분기는 device 폴더의 기기 파일(enqueue.php 가 판별해 싣는다)이다. 파일 머리말 참조. */ /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-19 — 페이지빌더 뉴스 그리드 (koit·cnpnews 풍) + 반응형 스택 * 렌더 훅: .nrs-zone--full/--split/.nrs-zone__area, * .nrs-article-list.nrs-article-layout-{headline|grid|card-list|simple-list}, * .nrs-article-item(>a>img.nrs-article-thumb + .nrs-article-body> * h4.nrs-article-title + .nrs-article-meta + p.nrs-article-excerpt), * h3.nrs-pb-block-title(.nrs-pb-title-bar 좌측 막대). * ════════════════════════════════════════════════════════════════════════ */ .nrs-page-builder-rendered { color: #1e1e1e; } .nrs-page-builder-rendered .nrs-article-list { list-style: none; margin: 0 0 8px; padding: 0; } .nrs-page-builder-rendered .nrs-article-item a { color: inherit; text-decoration: none; display: block; } .nrs-page-builder-rendered .nrs-article-title { font-weight: 700; line-height: 1.35; margin: 0; color: #1e1e1e; } .nrs-page-builder-rendered .nrs-article-item a:hover .nrs-article-title { color: #0a3a6b; } .nrs-page-builder-rendered .nrs-article-meta { font-size: 12px; color: #6b7280; margin-top: 4px; } .nrs-page-builder-rendered .nrs-article-excerpt { font-size: 14px; color: #4b5563; line-height: 1.55; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-page-builder-rendered .nrs-article-thumb { width: 100%; height: auto; display: block; border-radius: 3px; background: #f1f5f9; } /* 섹션 제목(left_bar) — koit 풍 파란 좌측 막대 */ .nrs-page-builder-rendered .nrs-pb-block-title { font-size: 19px; font-weight: 700; margin: 6px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #0a3a6b; display: flex; align-items: center; gap: 8px; } .nrs-page-builder-rendered .nrs-pb-title-bar { display: inline-block; width: 4px; height: 18px; background: #0a3a6b; border-radius: 1px; } /* headline = 히어로 (첫 항목 크게) */ .nrs-article-layout-headline .nrs-article-item { margin-bottom: 18px; } .nrs-article-layout-headline .nrs-article-item:first-child .nrs-article-title { font-size: 28px; line-height: 1.25; } .nrs-article-layout-headline .nrs-article-item:first-child .nrs-article-thumb { margin-bottom: 10px; } .nrs-article-layout-headline .nrs-article-item:not(:first-child) .nrs-article-title { font-size: 17px; } /* grid = koit 섹션 다열 그리드 */ .nrs-article-layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nrs-article-layout-grid .nrs-article-thumb { aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 8px; } .nrs-article-layout-grid .nrs-article-title { font-size: 16px; } /* card-list = cnpnews/아카이브 — 썸네일 좌 + 본문 우 (행) */ .nrs-article-layout-card-list .nrs-article-item { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eef0f2; } .nrs-article-layout-card-list .nrs-article-item > a { display: flex; gap: 16px; align-items: flex-start; } .nrs-article-layout-card-list .nrs-article-thumb { flex: 0 0 180px; width: 180px; aspect-ratio: 3 / 2; object-fit: cover; } .nrs-article-layout-card-list .nrs-article-text { flex: 1 1 auto; min-width: 0; } .nrs-article-layout-card-list .nrs-article-title { font-size: 18px; } /* simple-list = 사이드바 인기/텍스트 목록 (썸네일 숨김) */ .nrs-article-layout-simple-list .nrs-article-thumb { display: none; } .nrs-article-layout-simple-list .nrs-article-item { padding: 8px 0; border-bottom: 1px solid #eef0f2; } .nrs-article-layout-simple-list .nrs-article-title { font-size: 15px; font-weight: 500; } .nrs-article-layout-simple-list .nrs-article-excerpt { display: none; } /* cnpnews 풍 기자 프로필 헤더 (page-builder-host 가 profile 페이지 상단에 출력) */ .nrs-profile-header { display: flex; gap: 20px; align-items: center; max-width: 1280px; margin: 0 auto 24px; padding: 24px 0; border-bottom: 2px solid #0a3a6b; } .nrs-profile-header__avatar { flex: 0 0 auto; } .nrs-profile-header__avatar img, .nrs-profile-header__avatar .avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; } .nrs-profile-header__body { flex: 1 1 auto; min-width: 0; } /* v2.2.0-70 */ .nrs-profile-header__name { font-size: 24px; font-weight: 700; margin: 0 0 4px; } .nrs-profile-header__email { color: #0a3a6b; text-decoration: none; font-size: 14px; } .nrs-profile-header__meta { color: #6b7280; font-size: 13px; margin: 4px 0 0; } .nrs-profile-header__desc { color: #4b5563; font-size: 14px; margin: 8px 0 0; line-height: 1.6; } /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-20 — 아카이브 뷰 토글 바(텍스트/섬네일/카드) + 목록 마크업 디스코프 + 헤더 배치 * ════════════════════════════════════════════════════════════════════════ */ /* ── 베이스 목록 타이포(디스코프) — 폴백(.nrs-fb) 경로도 Edition 과 동일 렌더 ── * v2.2.0-19 규칙은 .nrs-page-builder-rendered 하위로 스코프돼 폴백 목록엔 적용되지 * 않으므로, 프리픽스 없는 베이스 규칙을 추가한다(레이아웃 .nrs-article-layout-* 는 이미 전역). */ .nrs-article-list { list-style: none; margin: 0 0 8px; padding: 0; } .nrs-article-item a { color: inherit; text-decoration: none; display: block; } .nrs-article-title { font-weight: 700; line-height: 1.35; margin: 0; color: #1e1e1e; } .nrs-article-item a:hover .nrs-article-title { color: #0a3a6b; } .nrs-article-meta { font-size: 12px; color: #6b7280; margin-top: 4px; } .nrs-article-excerpt { font-size: 14px; color: #4b5563; line-height: 1.55; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-article-thumb { width: 100%; height: auto; display: block; border-radius: 3px; background: #f1f5f9; } /* ── 뷰 토글 바 (목록 우측 상단, 3개 세그먼트 버튼) ── */ .nrs-list-viewbar { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin: 0 0 14px; } .nrs-lv-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; background: #fff; border: 1px solid #d1d5db; color: #6b7280; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .nrs-lv-btn:first-child { border-radius: 4px 0 0 4px; } .nrs-lv-btn:last-child { border-radius: 0 4px 4px 0; } .nrs-lv-btn + .nrs-lv-btn { margin-left: -1px; } .nrs-lv-btn svg { fill: currentColor; } .nrs-lv-btn:hover { color: #0a3a6b; border-color: #9ca3af; } .nrs-lv-btn[aria-pressed="true"] { color: #fff; background: var(--nrs-color-primary, #0a3a6b); border-color: var(--nrs-color-primary, #0a3a6b); position: relative; z-index: 1; } .nrs-lv-btn:focus-visible { outline: 2px solid var(--nrs-color-primary, #0a3a6b); outline-offset: 1px; } /* ── 헤더 배치 정비(v2.2.0-20): 로고 중앙 / 햄버거 좌 / 검색·도구 우 ── * 3분할 그리드로 가운데 칸에 로고를 두어 정확히 중앙 정렬, 좌·우 1fr 칸에 햄버거·도구. * .nrs-header-inner 는 nrs:group(layout:flex)이라 NRS 가 .nrs-container-*{display:flex} * 인라인 규칙을 style.css 뒤에 출력한다(동일 명시도·후순위로 우선). 따라서 .nrs-header * 접두로 명시도(0,2,0)를 올려 그리드가 확실히 적용되게 한다. */ .nrs-header .nrs-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .nrs-header .nrs-header-inner > .nrs-header-hamburger, .nrs-header .nrs-header-inner > .nrs-hamburger { grid-column: 1; justify-self: start; } .nrs-header .nrs-header-inner > .nrs-logo, .nrs-header .nrs-header-inner > .nrs-block-site-logo { grid-column: 2; justify-self: center; margin: 0; } .nrs-header .nrs-header-inner > .nrs-header-tools { grid-column: 3; justify-self: end; margin-left: 0; } /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-21 — 아카이브 880+사이드바 분할 · 3모드 디테일(텍스트 1행/카드 간격/카테고리 축소) * ════════════════════════════════════════════════════════════════════════ */ /* ── 메타·카테고리 라벨 축소(전 모드 공통, 명시도 0,2,0로 확실히) ── */ .nrs-article-list .nrs-article-meta { font-size: 12px; color: #6b7280; } .nrs-article-list .nrs-article-cat { font-size: 12px; font-weight: 600; color: var(--nrs-color-primary, #0a3a6b); } .nrs-article-list .nrs-article-byline, .nrs-article-list .nrs-article-date { font-weight: 400; } /* ── 텍스트(simple-list) = 기사당 1행: 제목 좌(줄임표) + 메타 우 인라인 ── */ .nrs-article-layout-simple-list .nrs-article-item { padding: 10px 0; border-bottom: 1px solid #eef0f2; } .nrs-article-layout-simple-list .nrs-article-item > a { display: block; } .nrs-article-layout-simple-list .nrs-article-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .nrs-article-layout-simple-list .nrs-article-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; margin: 0; } .nrs-article-layout-simple-list .nrs-article-meta { flex: 0 0 auto; margin: 0; white-space: nowrap; } .nrs-article-layout-simple-list .nrs-article-thumb, .nrs-article-layout-simple-list .nrs-article-excerpt { display: none; } /* ── 섬네일(card-list) 정돈 ── */ .nrs-article-layout-card-list .nrs-article-item { margin-bottom: 18px; padding-bottom: 18px; } .nrs-article-layout-card-list .nrs-article-thumb { flex: 0 0 200px; width: 200px; } .nrs-article-layout-card-list .nrs-article-title { font-size: 17px; } .nrs-article-layout-card-list .nrs-article-meta { margin-top: 6px; } .nrs-article-layout-card-list .nrs-article-excerpt { margin-top: 8px; } /* ── 카드(grid) 간격 확대(행 28·열 24) ── */ .nrs-article-layout-grid { gap: 28px 24px; } .nrs-article-layout-grid .nrs-article-item { margin: 0; padding: 0; border-bottom: 0; } .nrs-article-layout-grid .nrs-article-thumb { margin-bottom: 10px; } .nrs-article-layout-grid .nrs-article-title { font-size: 16px; } .nrs-article-layout-grid .nrs-article-text { padding-bottom: 4px; } /* ── 폴백 아카이브 분할(880 본문 + 20 + 300 사이드바) — Edition .nrs-zone--split 과 동일 비율 ── */ .nrs-fb--split { display: grid; grid-template-columns: minmax(0, 780px) 300px; gap: 20px; max-width: 1100px; margin: 0 auto; padding: 16px; align-items: start; } .nrs-fb--split .nrs-fb-main { min-width: 0; } .nrs-fb-heading { font-size: 20px; font-weight: 800; margin: 0 0 14px; } .nrs-fb-aside { min-width: 0; } .nrs-fb-aside-sec { margin-bottom: 24px; } /* ── 사이드바 섹션 제목 크기(블록 무관). 항목 디자인은 v2.2.0-23 블록별 variant 규칙 참조. ── */ .nrs-zone--split .nrs-zone__area:nth-child(2) .nrs-pb-block-title, .nrs-fb-aside .nrs-pb-block-title { font-size: 16px; } /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-27 — 비홈 전 페이지 출력 범위 = 880 메인 영역 안의 780px(중앙 정렬) * 운영자 지시: 단일기사(880 메인 → 780 내부 → 680 본문)와 동일하게, 카테고리·검색·기자(프로필)· * 단일기사 페이지의 기사 출력 범위도 880 칼럼은 유지하되 그 안의 **780px 영역(중앙 정렬)** 으로 한다. * 780 내부의 항목 정렬은 기존 규칙대로. **홈만 제외.** * 블록 wrapper 의 인라인 margin(`margin:Tpx 0 Bpx 0`) 을 이기려 좌우 auto 는 !important. * ════════════════════════════════════════════════════════════════════════ */ .nrs-page-builder-rendered[data-page-type="category"] .nrs-zone__area[data-area-index="0"] > .nrs-block, .nrs-page-builder-rendered[data-page-type="search"] .nrs-zone__area[data-area-index="0"] > .nrs-block, .nrs-page-builder-rendered[data-page-type="profile"] .nrs-zone__area[data-area-index="0"] > .nrs-block, .nrs-page-builder-rendered[data-page-type="single"] .nrs-zone__area[data-area-index="0"] > .nrs-block, .nrs-fb-main > * { width: 100%; /* flex 컬럼에서 좌우 auto 마진은 아이템을 콘텐츠 크기로 축소시키므로, 명시 width 로 880(가용폭)→max-width 780 까지 채워 정확히 780 중앙 정렬 */ max-width: 780px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-22 — [기능별 페이지 CSS] 기사 리스트 페이지 + 사이드바 (최종 권위 규칙) * 단일기사(.nrs-article-front)·프로필헤더(.nrs-profile-header)와 분리. 누수 차단. * 규칙: 제목 폰트 > 메타 폰트, 메타 테두리/패딩 0(단일기사 메타바와 분리), * 구분점은 CSS(span+span::before), 사이드바 폭 ≤300(줄바꿈). * ════════════════════════════════════════════════════════════════════════ */ /* ── 기사 리스트 공통(항목) ── */ .nrs-article-list { list-style: none; margin: 0; padding: 0; } .nrs-article-list .nrs-article-item { margin: 0; padding: 14px 0; border-bottom: 1px solid #eef0f2; } .nrs-article-list .nrs-article-item > a { color: inherit; text-decoration: none; } .nrs-article-list .nrs-article-title { font-weight: 700; line-height: 1.4; margin: 0; color: #1e1e1e; font-size: 16px; } .nrs-article-list .nrs-article-item a:hover .nrs-article-title { color: var(--nrs-color-primary, #0a3a6b); } /* 메타: 작은 회색 · 테두리/패딩 없음 · 구분점은 ::before(가운데 점/실선 누수 제거) */ .nrs-article-list .nrs-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0; border: 0 !important; padding: 0 !important; margin: 6px 0 0; font-size: 12px; color: #9aa1aa; line-height: 1.4; } .nrs-article-list .nrs-article-meta > span { font-size: 12px; } .nrs-article-list .nrs-article-meta > span + span::before { content: "·"; margin: 0 6px; color: #cbd5e1; } .nrs-article-list .nrs-article-cat { color: var(--nrs-color-primary, #0a3a6b); font-weight: 600; } .nrs-article-list .nrs-article-excerpt { font-size: 13px; color: #6b7280; line-height: 1.55; margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nrs-article-list .nrs-article-thumb { width: 100%; height: auto; display: block; border-radius: 3px; background: #f1f5f9; } /* simple-list(텍스트형·인기기사)는 항상 썸네일·발췌 숨김 — 위 베이스(display:block) 보다 뒤에 둬 우선 */ .nrs-article-layout-simple-list .nrs-article-thumb, .nrs-article-layout-simple-list .nrs-article-excerpt { display: none !important; } /* ── 메인 목록(880) 모드별 — 사이드바엔 미적용(아래에서 재정의) ── */ /* 텍스트(simple-list) = 기사당 1행: 제목 좌(줄임표) + 메타 우 */ .nrs-zone__area[data-area-index="0"] .nrs-article-layout-simple-list .nrs-article-text, .nrs-fb-main .nrs-article-layout-simple-list .nrs-article-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-simple-list .nrs-article-title, .nrs-fb-main .nrs-article-layout-simple-list .nrs-article-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 500; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-simple-list .nrs-article-meta, .nrs-fb-main .nrs-article-layout-simple-list .nrs-article-meta { flex: 0 0 auto; margin: 0; white-space: nowrap; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-simple-list .nrs-article-thumb, .nrs-zone__area[data-area-index="0"] .nrs-article-layout-simple-list .nrs-article-excerpt, .nrs-fb-main .nrs-article-layout-simple-list .nrs-article-thumb, .nrs-fb-main .nrs-article-layout-simple-list .nrs-article-excerpt { display: none; } /* 섬네일(card-list) */ .nrs-zone__area[data-area-index="0"] .nrs-article-layout-card-list .nrs-article-item > a, .nrs-fb-main .nrs-article-layout-card-list .nrs-article-item > a { display: flex; gap: 16px; align-items: flex-start; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-card-list .nrs-article-thumb, .nrs-fb-main .nrs-article-layout-card-list .nrs-article-thumb { flex: 0 0 200px; width: 200px; aspect-ratio: 3/2; object-fit: cover; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-card-list .nrs-article-text, .nrs-fb-main .nrs-article-layout-card-list .nrs-article-text { flex: 1 1 auto; min-width: 0; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-card-list .nrs-article-title, .nrs-fb-main .nrs-article-layout-card-list .nrs-article-title { font-size: 17px; } /* 카드(grid) 3열 + 넉넉한 간격 */ .nrs-zone__area[data-area-index="0"] .nrs-article-layout-grid, .nrs-fb-main .nrs-article-layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-grid .nrs-article-item, .nrs-fb-main .nrs-article-layout-grid .nrs-article-item { border-bottom: 0; padding: 0; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-grid .nrs-article-thumb, .nrs-fb-main .nrs-article-layout-grid .nrs-article-thumb { aspect-ratio: 3/2; object-fit: cover; margin-bottom: 10px; } .nrs-zone__area[data-area-index="0"] .nrs-article-layout-grid .nrs-article-title, .nrs-fb-main .nrs-article-layout-grid .nrs-article-title { font-size: 16px; } /* v2.2.0-24: 사이드바 인기기사/최신뉴스 블록 디자인은 블록 전용 스타일시트 * (plugins/nrs-platform/modules/12-block-manager/assets/css/article-blocks.css)로 이전. * 기사 블록 CSS 는 블록 시스템이 소유·관리하며 테마 페이지 CSS 에 두지 않는다(운영자 원칙). */ /* ── [페이지/레이아웃 CSS] 단일 기사(출력) 페이지 — 880 본문 + 300 사이드바 ── */ .nrs-single-split { display: grid; grid-template-columns: minmax(0, 780px) 300px; gap: 20px; max-width: 1100px; margin: 0 auto; align-items: start; } .nrs-single-split .nrs-single-main { min-width: 0; } .nrs-single-split .nrs-fb-aside { min-width: 0; } /* v2.2.0-23: 프론트 단일 기사 카드 외곽선·radius·그림자·카드 배경 모두 제거(요즘 안 쓰는 디자인). */ .nrs-single-main .nrs-wf-article-view__main, .nrs-single-main .nrs-article-front, .nrs-single-main .nrs-article-front.nrs-wf-article-view--front { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } .nrs-single-main .nrs-wf-article-view__main { padding: 0 !important; } /* ════════════════════════════════════════════════════════════════════════ * v2.2.0-22 — [기능별 페이지 CSS] 헤더/푸터 (정보통신신문 풍) + 슬림 검색 * ════════════════════════════════════════════════════════════════════════ */ /* ── 슬림 검색 박스 (NRS 검색 블록 재스타일 — 투박한 큰 버튼 제거) ── */ .nrs-header .nrs-search-form { border: 0; background: transparent; border-radius: 0; overflow: visible; } .nrs-header .nrs-search-form .nrs-block-search__inside-wrapper { display: flex; align-items: center; height: 34px; border: 1px solid #d8dde3; border-radius: 18px; background: #f7f8fa; overflow: hidden; padding: 0; transition: border-color .15s, background .15s; } .nrs-header .nrs-search-form .nrs-block-search__inside-wrapper:focus-within { border-color: var(--nrs-color-primary, #0a3a6b); background: #fff; } .nrs-header .nrs-search-form .nrs-block-search__input { border: 0; background: transparent; box-shadow: none; outline: none; height: 32px; margin: 0; padding: 0 6px 0 14px; width: 200px; font-size: 13px; color: #333; } .nrs-header .nrs-search-form .nrs-block-search__input::placeholder { color: #9aa1aa; } .nrs-header .nrs-search-form .nrs-block-search__button { margin: 0; border: 0; background: transparent; color: #6b7280; cursor: pointer; height: 32px; min-width: 0; padding: 0 12px 0 6px; font-size: 0; line-height: 32px; /* v2.2.0-65: 돋보기 아이콘 수직 중앙 (block+baseline → flex 중앙정렬로 교정) */ display: flex; align-items: center; justify-content: center; } .nrs-header .nrs-search-form .nrs-block-search__button:hover { color: var(--nrs-color-primary, #0a3a6b); } .nrs-header .nrs-search-form .nrs-block-search__button::before { content: "\1F50D"; font-size: 14px; } /* v2.2.0-141(가로 스크롤 버그): NRS 코어 `.nrs-block-search__label{width:100%}` 가 동일 명시도·후순위로 * `.screen-reader-text{width:1px}` 를 덮어, 시각 숨김 검색 라벨이 1100px(absolute)로 펼쳐져 화면 * 밖(우측)으로 튀어나가 문서 scrollWidth 가 2236px → 데스크탑 가로 스크롤바 발생. 명시도 한 단계 * 높여(0,2,0) 라벨이 스크린리더 전용 1px 로 유지되게 복원(시각 무변화·오버플로 제거). */ .nrs-block-search__label.screen-reader-text { width: 1px !important; } /* ─── v2.2.0-131: 홈 헤드라인 히어로(1) + 중요 2×2(4) (운영자 지시) ────────────── * 두 블록 모두 article-list 기반. 카드 = 섬네일 상단(풀폭) + 제목(2행 클램프) + 메타(카테고리·발행일시분·대표등록자). * .nrs-home-hero : 헤드라인 1기사 — 1단 전체 섬네일 + 큰 제목. * .nrs-home-important : 중요 4기사 — 2단 섬네일 2×2 그리드. * 제목 2행: 1행이면 1행 높이(min-height 미지정 → 자연 높이). */ .nrs-home-hero .nrs-article-card, .nrs-home-important .nrs-article-card { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border-bottom: 0; } .nrs-home-hero .nrs-article-card:first-child, .nrs-home-important .nrs-article-card:first-child { padding-top: 0; } .nrs-home-hero .nrs-article-card__thumb-link, .nrs-home-important .nrs-article-card__thumb-link { display: block; line-height: 0; } .nrs-home-hero .nrs-article-card__thumb, .nrs-home-important .nrs-article-card__thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--nrs-radius, 4px); } /* 제목 2행 클램프 */ .nrs-home-hero .nrs-article-card__title, .nrs-home-important .nrs-article-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; } /* 히어로: 큰 제목 + 큰 섬네일 */ .nrs-home-hero .nrs-article-card__title { font-size: 22px; line-height: 1.3; font-weight: 700; } .nrs-home-hero .nrs-article-card__thumb { aspect-ratio: 3 / 2; } /* 중요 2×2 그리드 (4개 = 2열×2행). className 은 .nrs-article-list 와 동일 요소에 부여됨. */ .nrs-home-important.nrs-article-list, .nrs-home-important .nrs-article-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; } .nrs-home-important .nrs-article-card__title { font-size: 16px; line-height: 1.35; font-weight: 700; } /* v2.2.0-140(운영자): 중요기사 섬네일 비율 3:2 (공통 16/9 규칙 위에 덮어씀). * 근거 = nrs-important 사본 규격 480×320(3:2, Thumbnail.php SIZE_MAP). */ .nrs-home-important .nrs-article-card__thumb { aspect-ratio: 3 / 2; } /* 메타 한 줄(카테고리·대표등록자) — 기존 .nrs-article-card__meta flex 그대로 사용. * v2.2.0-139(운영자): 헤드라인·중요 블록은 발행 연월일시분(