/**
 * NRS 테마 - 신규 블록 CSS
 * nrs-article-title-list, nrs-article-grid, nrs-article-tab,
 * nrs-article-postit, nrs-article-ticker, nrs-article-slider, nrs-article-split
 * Part of NRS Platform — Made by PPSA (공공사업지원협회)
 *
 * ★폭별 규칙(@media min/max-width)은 device 폴더의 기기 파일에 둔다(B4 2026-09-15 — 이 파일의 폭 미디어는 걷었다).
 */

/* ══════════════════════════════════════════════════════════════════════════════
   1. nrs-article-title-list (제목만 리스트)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-title-list {}

.nrs-title-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--nrs-color-border, #e2e4e7);
}
.nrs-title-list-item:last-child { border-bottom: none; }
.nrs-title-list-item:first-child { padding-top: 0; }

.nrs-title-list-rank {
    font-size: 20px;
    font-weight: 900;
    color: var(--nrs-color-border, #e2e4e7);
    line-height: 1;
    width: 28px;
    flex-shrink: 0;
    text-align: center;
}
.nrs-title-list-item--hl .nrs-title-list-rank { color: var(--nrs-color-accent, #e8280b); }

.nrs-title-list-body { flex: 1; min-width: 0; }

.nrs-title-list-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 2px;
}

.nrs-title-list-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nrs-color-text, #1e1e1e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nrs-title-list-title:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-title-list-date {
    font-size: 11px;
    color: var(--nrs-color-text-muted, #555);
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   2. nrs-article-grid (그리드)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-grid {
    display: grid;
    grid-template-columns: repeat( var(--nrs-grid-cols, 2), 1fr );
    gap: var(--nrs-gap, 24px);
}

.nrs-grid-item {}

.nrs-grid-thumb-link { display: block; overflow: hidden; border-radius: 4px; }
.nrs-grid-thumb { width: 100%; display: block; transition: transform 0.3s ease; }
.nrs-grid-thumb-link:hover .nrs-grid-thumb { transform: scale(1.03); }

.nrs-grid-body { padding: 10px 0 0; }

.nrs-grid-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 4px;
}

.nrs-grid-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nrs-grid-title a { color: var(--nrs-color-text, #1e1e1e); }
.nrs-grid-title a:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-grid-date {
    font-size: 11px;
    color: var(--nrs-color-text-muted, #555);
}

/* ══════════════════════════════════════════════════════════════════════════════
   3. nrs-article-tab (탭 박스)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-tab {}

.nrs-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--nrs-color-border, #e2e4e7);
    margin-bottom: 16px;
}

.nrs-tab-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nrs-color-text-muted, #555);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.nrs-tab-btn:hover { color: var(--nrs-color-primary, #0a3a6b); }
.nrs-tab-btn.is-active {
    color: var(--nrs-color-primary, #0a3a6b);
    border-bottom-color: var(--nrs-color-primary, #0a3a6b);
}

.nrs-tab-panel { display: none; }
.nrs-tab-panel.is-active { display: block; }

.nrs-tab-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nrs-color-border, #e2e4e7);
}
.nrs-tab-item:last-child { border-bottom: none; }
.nrs-tab-item:first-child { padding-top: 0; }

.nrs-tab-thumb-link { flex-shrink: 0; }
.nrs-tab-thumb {
    width: 90px;
    height: 62px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.nrs-tab-body { flex: 1; min-width: 0; }

.nrs-tab-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 2px;
}

.nrs-tab-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nrs-tab-title a { color: var(--nrs-color-text, #1e1e1e); }
.nrs-tab-title a:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-tab-date { font-size: 11px; color: var(--nrs-color-text-muted, #555); }
.nrs-tab-empty { color: var(--nrs-color-text-muted, #555); font-size: 14px; padding: 16px 0; }

/* ══════════════════════════════════════════════════════════════════════════════
   4. nrs-article-postit (포스트잇 카드)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-postit {
    display: grid;
    grid-template-columns: repeat( var(--nrs-postit-cols, 4), 1fr );
    gap: var(--nrs-gap-sm, 12px);
}

.nrs-postit-item {}

.nrs-postit-link {
    display: block;
    text-decoration: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--nrs-color-border, #e2e4e7);
    transition: box-shadow 0.2s ease;
}
.nrs-postit-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.nrs-postit-thumb {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
}

.nrs-postit-body {
    padding: 8px 10px 10px;
    background: var(--nrs-color-bg, #fff);
}

.nrs-postit-cat {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 3px;
}

.nrs-postit-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--nrs-color-text, #1e1e1e);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════════
   5. nrs-article-ticker (텍스트 뉴스바)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-ticker {}

.nrs-ticker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nrs-color-border, #e2e4e7);
}
.nrs-ticker-item:last-child { border-bottom: none; }
.nrs-ticker-item:first-child { padding-top: 0; }
.nrs-block-ticker--compact .nrs-ticker-item { padding: 5px 0; }

.nrs-ticker-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.nrs-ticker-cat {
    flex-shrink: 0;
    display: inline-block;
    padding: 1px 8px;
    background: var(--nrs-color-accent, #e8280b);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 3px;
}

.nrs-ticker-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--nrs-color-text, #1e1e1e);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nrs-ticker-title:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-ticker-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--nrs-color-text-muted, #555);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   6. nrs-article-slider (이미지 슬라이더)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--nrs-radius, 4px);
    background: #000;
}

.nrs-slider-track { position: relative; }

.nrs-slider-slide {
    display: none;
    position: relative;
}
.nrs-slider-slide.is-active { display: block; }

.nrs-slider-img-link { display: block; }
.nrs-slider-img { width: 100%; display: block; }

.nrs-slider-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 20px 24px;
    background: linear-gradient(transparent, rgba(0,0,0,.8));
}

.nrs-slider-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin-bottom: 6px;
    background: var(--nrs-color-accent, #e8280b);
    padding: 2px 8px;
    border-radius: 3px;
}

.nrs-slider-title {
    font-size: clamp(16px, calc(2.5 * var(--nrs-vw, 1vw)), 24px);   /* --nrs-vw: 판 고정 기둥 폭 ÷ 100(이 파일 끝 묶음) */
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nrs-slider-title a { color: #fff; }
.nrs-slider-title a:hover { text-decoration: underline; }

.nrs-slider-date { font-size: 12px; color: rgba(255,255,255,.7); }

/* 화살표 */
.nrs-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: none;
    font-size: 28px;
    padding: 8px 14px;
    cursor: pointer;
    z-index: 5;
    border-radius: 3px;
    line-height: 1;
    transition: background 0.2s ease;
}
.nrs-slider-arrow:hover { background: rgba(0,0,0,.75); }
.nrs-slider-prev { left: 8px; }
.nrs-slider-next { right: 8px; }

/* 닷 인디케이터 */
.nrs-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.nrs-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}
.nrs-slider-dot.is-active { background: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   7. nrs-article-split (섹션 분할 박스)
══════════════════════════════════════════════════════════════════════════════ */
.nrs-block-split {
    display: grid;
    grid-template-columns: var(--nrs-split-left, 60%) var(--nrs-split-right, 40%);
    gap: var(--nrs-gap, 24px);
    align-items: start;
}

/* 좌측 대표 기사 */
.nrs-split-main {}

.nrs-split-main-item { display: flex; flex-direction: column; }

.nrs-split-main-img-link { display: block; overflow: hidden; border-radius: 4px; }
.nrs-split-main-img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.nrs-split-main-img-link:hover .nrs-split-main-img { transform: scale(1.02); }

.nrs-split-main-body { padding: 12px 0 0; }

.nrs-split-main-cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 4px;
}

.nrs-split-main-title {
    font-size: clamp(16px, calc(2 * var(--nrs-vw, 1vw)), 20px);   /* --nrs-vw: 판 고정 기둥 폭 ÷ 100(이 파일 끝 묶음) */
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 8px;
}
.nrs-split-main-title a { color: var(--nrs-color-text, #1e1e1e); }
.nrs-split-main-title a:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-split-main-excerpt {
    font-size: 14px;
    color: var(--nrs-color-text-muted, #555);
    line-height: 1.6;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nrs-split-main-date { font-size: 12px; color: var(--nrs-color-text-muted, #555); }

/* 우측 보조 기사 */
.nrs-split-sub {}

.nrs-split-sub-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nrs-color-border, #e2e4e7);
}
.nrs-split-sub-item:first-child { padding-top: 0; }
.nrs-split-sub-item:last-child { border-bottom: none; }

.nrs-split-sub-thumb {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.nrs-split-sub-body { flex: 1; min-width: 0; }

.nrs-split-sub-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--nrs-color-accent, #e8280b);
    margin-bottom: 2px;
}

.nrs-split-sub-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nrs-split-sub-title a { color: var(--nrs-color-text, #1e1e1e); }
.nrs-split-sub-title a:hover { color: var(--nrs-color-primary, #0a3a6b); }

.nrs-split-sub-date { font-size: 11px; color: var(--nrs-color-text-muted, #555); }

/* ─── 단계 7 결정 3: 신규 5개 블록 CSS ────────────────────────────────────── */

/* ── nrs-breadcrumb ──────────────────────────────────────────────────────── */
.nrs-breadcrumb {
    margin: 16px 0;
    font-size: 12px;
}
.nrs-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nrs-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.nrs-breadcrumb__link {
    color: var(--nrs-color-text-muted, #6b7280);
    text-decoration: none;
}
.nrs-breadcrumb__link:hover {
    color: var(--nrs-color-primary, #2563eb);
    text-decoration: underline;
}
.nrs-breadcrumb__current {
    color: var(--nrs-color-text, #111827);
    font-weight: 500;
}
.nrs-breadcrumb__separator {
    color: var(--nrs-color-text-muted, #9ca3af);
    font-size: 11px;
}

/* ── nrs-article-tools ───────────────────────────────────────────────────── */
.nrs-article-tools {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.nrs-article-tools__group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
    margin-right: 4px;
    border-right: 1px solid var(--nrs-color-border, #e5e7eb);
}
.nrs-article-tools__btn {
    appearance: none;
    border: 1px solid var(--nrs-color-border, #d1d5db);
    background: var(--nrs-color-bg, #fff);
    color: var(--nrs-color-text, #374151);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.nrs-article-tools__btn:hover {
    background: var(--nrs-color-bg-hover, #f3f4f6);
    color: var(--nrs-color-primary, #2563eb);
}
.nrs-article-tools__btn:focus-visible {
    outline: 2px solid var(--nrs-color-primary, #2563eb);
    outline-offset: 1px;
}
.nrs-article-tools__btn--fs-small  { font-size: 11px; }
.nrs-article-tools__btn--fs-medium { font-size: 13px; }
.nrs-article-tools__btn--fs-large  { font-size: 15px; }
.nrs-article-tools__btn[aria-pressed="true"] {
    background: var(--nrs-color-primary, #2563eb);
    color: #fff;
    border-color: var(--nrs-color-primary, #2563eb);
}
.nrs-article-tools__notice {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    padding: 4px 8px;
    background: var(--nrs-color-text, #111827);
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
}

/* Round 19 (2026-05-24): body.nrs-fs-* 3단계 시스템 폐기.
 * 7단계 [data-font-size="-3..3"] 시스템으로 통합 — nrs-article.css 가 책임. */

/* ── nrs-category-badge ──────────────────────────────────────────────────── */
.nrs-category-badge {
    display: inline-block;
}
.nrs-category-badge__link,
.nrs-category-badge__text {
    display: inline-block;
    padding: 3px 10px;
    background: var(--nrs-color-primary, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.4;
}
.nrs-category-badge__link:hover {
    opacity: 0.85;
}

/* ── nrs-mobile-drawer ───────────────────────────────────────────────────── */
/* 슬라이드·열고 닫기 = 공용 \NRS\Shared\Drawer. 모양은 아래 '헤더 햄버거 서랍' 묶음 한 곳에 모았다
 * (2026-09-17 구성 재설계 때 섹션별 옛 규칙 — __section·__search input·__login·__menu 목록형 — 을 걷어 옮김). */

/* ── nrs-subtitle ────────────────────────────────────────────────────────── */
.nrs-subtitle {
    margin: 12px 0 20px;
}
.nrs-subtitle__line {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--nrs-color-text, #374151);
}
.nrs-subtitle__line:last-child {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   v2.2.0-251: 데모 구조 충실 재현용 레이아웃 확장(가산적).
   - grid/postit 컬럼은 --nrs-grid-cols / --nrs-postit-cols 가 이미 N 단 구동(데스크톱) +
     기존 반응형(@767→2단, @479→1단)으로 자동 축소 → 추가 CSS 불필요.
   - 아래는 신규: split 보조 그리드 / 멀티카드 슬라이더 / 제목목록 N-up.
══════════════════════════════════════════════════════════════════════════════ */

/* split 보조 기사 N단 그리드(subCols>0): 1大 + N小(예 2×2) */
.nrs-split-sub--grid {
    display: grid;
    grid-template-columns: repeat( var(--nrs-subcols, 2), 1fr );
    gap: var(--nrs-gap-sm, 12px);
    align-content: start;
}
.nrs-split-sub--grid .nrs-split-sub-item {
    border-bottom: none;
    padding: 0;
    flex-direction: column;
}
.nrs-split-sub--grid .nrs-split-sub-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }

/* 멀티카드 슬라이더(perView>1): 트랙을 가로 flex 로, perView 장씩 노출 + translateX 스크롤 */
.nrs-block-slider--multi { overflow: hidden; position: relative; }
.nrs-block-slider--multi .nrs-slider-track {
    display: flex;
    gap: 16px;
    transition: transform 0.4s ease;
    will-change: transform;
}
.nrs-block-slider--multi .nrs-slider-slide {
    display: block !important;   /* 단일모드의 display:none/.is-active 무력화 */
    flex: 0 0 calc( ( 100% - ( var(--nrs-slider-pv, 3) - 1 ) * 16px ) / var(--nrs-slider-pv, 3) );
    min-width: 0;
}
.nrs-block-slider--multi .nrs-slider-overlay { padding: 10px 12px; }

/* 제목 리스트 N-up 스트립(columns>1) */
.nrs-block-title-list--grid {
    display: grid;
    grid-template-columns: repeat( var(--nrs-tl-cols, 2), 1fr );
    gap: 4px 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   블록(박스) 제목 · AI 생성 기사 배지 — 2026-07-22 신설
   시각 마감: 젬마4(로컬 :8001) 작성 → Claude 감사·수정 후 적용.
   ★감사에서 제거한 젬마 원안의 결함(적용했다면 기능 파손):
     - `.nrs-ai-badge__text::before{content:'AI'}` → 마크업에 이미 'AI' 가 있어 "AIAI" 중복 출력
     - `.nrs-single-title{display:flex}` → 기사 제목 h1 을 flex 로 만들면 제목 안 [속보] 등
       인라인 span 이 별도 플렉스 아이템이 되어 줄바꿈이 깨진다(배지는 vertical-align 로 정렬)
     - `:root` 토큰 재정의·다크 오버라이드 → 테마 전역 색을 덮어써 사이트 전체 회귀 위험
     - `clip !important`(값 누락) / 존재하지 않는 수식자 `--list`(실제는 --title-list)
   ★다크모드는 테마 규약([data-theme="dark"]·.dark-mode + OS 설정)에 맞췄다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 블록(박스) 제목 — grid·title-list·postit·slider·split·tab·asset ── */
.nrs-block-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--nrs-color-text, #1e1e1e);
    margin: 24px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--nrs-color-primary, #000080);
}

/* 수식자별 미세 차이 — 여백·강조 정도만 */
.nrs-block-title--grid       { margin-top: 32px; }
.nrs-block-title--title-list { border-bottom-width: 1px; padding-bottom: 6px; }
.nrs-block-title--postit     { color: var(--nrs-color-accent, #800000); }
.nrs-block-title--slider     { margin-bottom: 8px; border-bottom-width: 1px; }
.nrs-block-title--tab        { border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; font-size: 18px; }
.nrs-block-title--asset      { color: var(--nrs-block-title-asset, #555); }

/* ── AI 생성 기사 배지 (기사 제목 h1 옆) ── */
.nrs-ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* h1 을 flex 로 바꾸지 않고 정렬 */
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: var(--nrs-color-primary, #000080);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* 스크린리더 전용 문구 — 시각적으로만 숨긴다(코어 .screen-reader-text 에 의존하지 않음). */
.nrs-ai-badge__sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── 다크모드 (테마 규약: 수동 토글 + OS 설정, 단 [data-theme="light"] 제외) · 화면에서만(2026-09-27 — 인쇄는 라이트) ── */
@media screen {
    [data-theme="dark"] .nrs-block-title--postit,
    .dark-mode .nrs-block-title--postit { color: #ff6b6b; }
    [data-theme="dark"] .nrs-block-title--asset,
    .dark-mode .nrs-block-title--asset { --nrs-block-title-asset: #b9bcc0; }
}
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nrs-block-title--postit { color: #ff6b6b; }
    :root:not([data-theme="light"]) .nrs-block-title--asset  { --nrs-block-title-asset: #b9bcc0; }
}

/* ── 헤더 햄버거 서랍(nrs-mobile-drawer) — 헤더 서랍에만 범위를 좁혀 덮는다 ──
 * [구조 2026-09-13] 공용 drawer.css 는 640px 이하에서만 작동하고 style.css 옛 .nrs-drawer 규칙과 겹친다. 폰은 폭과 무관하게 써야 한다(기기 기준).
 *   ★[hidden] 규칙 삭제 금지 — 없으면 PC 에서 투명 배경막이 클릭을 막는다.
 * [구성 2026-09-17] 운영자 "햄버거 메뉴 구성은 … 참고해라. 똑같이 만들라는 게 아니다. … 검색 영역은 1행인데 … 2행이다. 제대로 디자인하라"
 *   → 목업 승인("알아서 잘 적용해"): ① 머리줄(제호·로그인 아이콘·닫기) ② 검색 한 줄 어두운 띠 ③ 카테고리 2열
 *   ④ 회색 하단(화면 보기 3칸 알약·계정 줄·페이지 링크). 마크업 = blocks/nrs-mobile-drawer/render.php.
 *   규칙: 왼쪽 가장자리 하나(--nrs-drawer-edge) · 누르는 곳 44px 이상 · 검색 입력 16px(작으면 아이폰이 입력할 때 화면을 확대한다).
 * 색 = 테마 스위치 토큰(knowledge/nrs_dark_mode_two_switches.md §3). 검색 띠만 두 모드 모두 어두운 색이라 그 안 글자는 흰색 고정.
 * ★검색 폼 클래스에 nrs-search-form 을 쓰지 말 것 — device/narrow.css 가 1023px 이하에서 그 클래스를 숨긴다. */
.nrs-drawer.nrs-mobile-drawer { position: fixed; inset: 0; width: auto; height: auto; background: transparent; box-shadow: none; overflow: visible; z-index: 100000; display: block; pointer-events: none; transition: none; }
.nrs-drawer.nrs-mobile-drawer[hidden] { display: none; }
.nrs-drawer.nrs-mobile-drawer.is-open { pointer-events: auto; }
.nrs-drawer.nrs-mobile-drawer:not(.is-open) .nrs-drawer__backdrop,
.nrs-drawer.nrs-mobile-drawer:not(.is-open) .nrs-drawer__panel { pointer-events: none; }
.nrs-mobile-drawer { --nrs-drawer-edge: 20px; --nrs-drawer-searchbar: #212529; }
.nrs-mobile-drawer .nrs-drawer__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s ease; }
.nrs-mobile-drawer.is-open .nrs-drawer__backdrop { opacity: 1; }
/* 패널 바탕 = ④ 회색 하단 색(①~③은 각자 흰 바탕을 깐다). 앞줄은 color-mix 미지원 대비(같은 스위치 토큰). */
.nrs-mobile-drawer .nrs-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(84%, 320px); max-width: none; display: flex; flex-direction: column; background: var(--nrs-color-bg-sub); background: color-mix(in srgb, var(--nrs-color-text) 7%, var(--nrs-color-bg)); color: var(--nrs-color-text); box-shadow: var(--nrs-shadow-lg); transform: translateX(-100%); transition: transform .25s ease; }
.nrs-mobile-drawer.nrs-drawer--right .nrs-drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.nrs-mobile-drawer.is-open .nrs-drawer__panel { transform: translateX(0); }
.nrs-mobile-drawer .nrs-drawer__body { flex: 1; overflow-y: auto; padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.nrs-mobile-drawer__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ① 머리줄 — 제호(왼쪽) · 로그인 아이콘 · 닫기 */
.nrs-mobile-drawer .nrs-drawer__header { display: flex; align-items: center; gap: 2px; height: 60px; padding: 0 8px 0 var(--nrs-drawer-edge); background: var(--nrs-color-bg); border-bottom: 0; flex-shrink: 0; }
.nrs-mobile-drawer .nrs-drawer__title { margin: 0 auto 0 0; font-size: 16px; font-weight: 600; color: inherit; }
.nrs-mobile-drawer__brand { display: flex; align-items: center; min-width: 0; margin-right: auto; color: var(--nrs-color-primary); font-size: 19px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.2; text-decoration: none; }
.nrs-mobile-drawer__brand-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nrs-mobile-drawer__brand-img { display: block; width: auto; max-width: 100%; max-height: 26px; }
.nrs-mobile-drawer__iconbtn,
.nrs-mobile-drawer .nrs-drawer__close { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--nrs-color-text); font-size: 24px; line-height: 1; text-decoration: none; cursor: pointer; }
/* hover: drawer.css(늦게 실림)의 .nrs-drawer__close:hover{background:var(--nrs-bg-hover)}(공용 토큰)를 테마 토큰으로 덮는다(2026-09-13 발견). */
.nrs-mobile-drawer__iconbtn:hover,
.nrs-mobile-drawer .nrs-drawer__close:hover { background: var(--nrs-color-bg-sub); }
.nrs-mobile-drawer__icon { display: block; flex: none; }

/* ② 검색 — 한 줄 어두운 띠(입력 + 돋보기 버튼) */
.nrs-mobile-drawer__search { display: flex; align-items: stretch; height: 50px; margin: 0; background: var(--nrs-drawer-searchbar); }
.nrs-mobile-drawer__search:focus-within { box-shadow: inset 0 -2px 0 var(--nrs-color-accent); }
.nrs-mobile-drawer__search-input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 0 0 var(--nrs-drawer-edge); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff; font: inherit; font-size: 16px; line-height: normal; outline: none; -webkit-appearance: none; appearance: none; }
.nrs-mobile-drawer__search-input::placeholder { color: rgba(255, 255, 255, .6); opacity: 1; }
.nrs-mobile-drawer__search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nrs-mobile-drawer__search-btn { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; }
.nrs-mobile-drawer__search-btn:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

/* ③ 카테고리 — 2열. 긴 이름(es 등)은 칸 안에서 줄바꿈. 지금 보고 있는 분류 = 강조색. */
.nrs-mobile-drawer__nav { padding: 12px 0 14px; background: var(--nrs-color-bg); }
.nrs-mobile-drawer__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nrs-mobile-drawer__menu li { min-width: 0; margin: 0; border: 0; }
.nrs-mobile-drawer__menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px 8px var(--nrs-drawer-edge); color: var(--nrs-color-text); font-size: 16px; font-weight: 500; line-height: 1.35; text-decoration: none; word-break: keep-all; overflow-wrap: anywhere; }
.nrs-mobile-drawer__menu a:hover { background: var(--nrs-color-bg-sub); color: var(--nrs-color-text); }
.nrs-mobile-drawer__menu .current-menu-item > a,
.nrs-mobile-drawer__menu .current-menu-ancestor > a { color: var(--nrs-color-accent); font-weight: 700; }
/* 하위가 있는 1차: 두 칸을 다 쓰고, 하위는 그 아래 작은 2열. */
.nrs-mobile-drawer__menu .menu-item-has-children { grid-column: 1 / -1; }
.nrs-mobile-drawer__menu .sub-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 6px; padding: 0; list-style: none; }
.nrs-mobile-drawer__menu .sub-menu a { min-height: 40px; padding-left: calc(var(--nrs-drawer-edge) + 10px); color: var(--nrs-color-text-muted); font-size: 14px; font-weight: 400; }
/* [2026-09-28] 운영자 "햄버거 메뉴는 2차 카테고리까지 펼침 출력을 기본으로 해라 … 기본판과 공정경제 모두 동일 적용" ·
 *   "기사 전체, 오피니언 전체를 표시할 필요가 없다. 그냥 1차 카테고리를 누르면 거기로 진입하면 된다. 펼침, 접힘 버튼도 필요 없다"
 *   (09-25 의 '1차만 · 누르면 펼침(한 번에 하나) · OO 전체'를 바꿈) → 1차 = 한 줄에 하나(그 분류로 가는 링크) · 2차 = 그 아래 늘 펼친 2열. */
.nrs-mobile-drawer__menu > li { grid-column: 1 / -1; }
.nrs-mobile-drawer__menu > li + li { border-top: 1px solid var(--nrs-color-border); border-top-color: color-mix(in srgb, var(--nrs-color-text) 8%, transparent); }
.nrs-mobile-drawer__menu > li > a { font-weight: 700; }
.nrs-mobile-drawer__menu > li > .sub-menu { margin: 0; padding: 4px 0 6px; background: var(--nrs-color-bg-sub); }
/* 스크롤 막대는 그리지 않는다 — 2차를 늘 펼쳐 낮은 폰(예: 높이 700)에서는 밀어서 본다(09-28 목업 실측: 844 폰은 다 들어감). */
.nrs-mobile-drawer .nrs-drawer__body { scrollbar-width: none; }
.nrs-mobile-drawer .nrs-drawer__body::-webkit-scrollbar { display: none; }

/* ④ 회색 하단 — 화면 보기 · 계정 줄 · 페이지 링크 */
.nrs-mobile-drawer__util { padding: 24px var(--nrs-drawer-edge) 8px; }
.nrs-mobile-drawer__util > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nrs-mobile-drawer__caption { margin: 0 0 8px; color: var(--nrs-color-text-muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
/* 계정 줄·페이지 링크 — 가운데 정렬, 항목 사이는 간격으로만 나눈다. 세로 구분선은 줄이 바뀌면 다음 줄 머리에 남아서(적용 실측) 쓰지 않는다. */
.nrs-mobile-drawer__account { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 20px 0 0; font-size: 13px; line-height: 1.4; }
.nrs-mobile-drawer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--nrs-color-border); border-top-color: color-mix(in srgb, var(--nrs-color-text) 12%, transparent); font-size: 13px; line-height: 1.4; }
.nrs-mobile-drawer__account > a,
.nrs-mobile-drawer__links > a { padding: 10px 10px; color: var(--nrs-color-text-muted); text-decoration: none; }
.nrs-mobile-drawer__account > a:first-child { color: var(--nrs-color-text); font-weight: 600; }
.nrs-mobile-drawer__account > a:hover,
.nrs-mobile-drawer__links > a:hover { color: var(--nrs-color-text); text-decoration: underline; text-underline-offset: 3px; }

/* 다크 — 검색 띠는 패널(#121212)과 구분되게 한 단계 밝게 · 제호·지금 분류는 어두운 바탕에서 읽히는 색 */
@media screen {   /* 2026-09-27 화면에서만 — 인쇄는 라이트 */
    [data-theme="dark"] .nrs-mobile-drawer,
    .dark-mode .nrs-mobile-drawer { --nrs-drawer-searchbar: #2c3036; }
    [data-theme="dark"] .nrs-mobile-drawer__brand,
    .dark-mode .nrs-mobile-drawer__brand { color: var(--nrs-color-text); }
    [data-theme="dark"] .nrs-mobile-drawer__menu .current-menu-item > a,
    [data-theme="dark"] .nrs-mobile-drawer__menu .current-menu-ancestor > a,
    .dark-mode .nrs-mobile-drawer__menu .current-menu-item > a,
    .dark-mode .nrs-mobile-drawer__menu .current-menu-ancestor > a { color: var(--nrs-color-text); color: color-mix(in srgb, var(--nrs-color-accent) 40%, var(--nrs-color-text)); }
}
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nrs-mobile-drawer { --nrs-drawer-searchbar: #2c3036; }
    :root:not([data-theme="light"]) .nrs-mobile-drawer__brand { color: var(--nrs-color-text); }
    :root:not([data-theme="light"]) .nrs-mobile-drawer__menu .current-menu-item > a,
    :root:not([data-theme="light"]) .nrs-mobile-drawer__menu .current-menu-ancestor > a { color: var(--nrs-color-text); color: color-mix(in srgb, var(--nrs-color-accent) 40%, var(--nrs-color-text)); }
}

/* ── 검색 버튼(nrs-theme/search-button, 2026-09-25 운영자 "이것들보다 더 오른쪽에 검색 버튼을 만들어라" → 목업 승인) ──
 * 돋보기 원형 버튼 · 누르면 바로 아래(오른쪽 맞춤)에 검색창이 열린다(움직임 없음 — main.js initSearchButton).
 * 색은 메뉴 막대와 같다(라이트는 흰 바탕 · 다크는 이 파일 끝 2026-09-27 규칙 — 메뉴 막대도 다크에서 어두워졌다). 검색 칸 모양 = 헤더 검색 알약(style.css)과 같은 값.
 * ★폼 클래스에 nrs-search-form 을 쓰지 말 것 — device/narrow.css 가 1023px 이하에서 그 클래스를 숨긴다(기기별 표시는 블록 설정 체크로). */
.nrs-search-btn { position: relative; display: inline-flex; flex: none; align-items: center; }
.nrs-header .nrs-gnb-inner .nrs-search-btn { margin-left: auto; }
.nrs-search-btn__toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid #d8dde3; border-radius: 50%; background: #fff; color: #2b2f36; cursor: pointer; }
.nrs-search-btn__toggle:hover,
.nrs-search-btn__toggle[aria-expanded="true"] { color: var(--nrs-color-primary, #0a3a6b); border-color: var(--nrs-color-primary, #0a3a6b); }
.nrs-search-btn__toggle:focus-visible { outline: 2px solid var(--nrs-color-primary, #0a3a6b); outline-offset: 2px; }
.nrs-search-btn__icon { display: block; flex: none; }
.nrs-search-btn__pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; display: flex; gap: 6px; margin: 0; padding: 10px; background: #fff; border: 1px solid #d8dde3; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .10); }
.nrs-search-btn__pop[hidden] { display: none; }
.nrs-search-btn__input { width: 260px; height: 32px; box-sizing: border-box; margin: 0; padding: 0 12px; border: 1px solid #d8dde3; border-radius: 16px; background: #f7f8fa; color: #1f2328; font: inherit; font-size: 14px; }
.nrs-search-btn__input:focus { outline: none; border-color: var(--nrs-color-primary, #0a3a6b); background: #fff; }
.nrs-search-btn__submit { flex: none; white-space: nowrap; height: 32px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px; background: var(--nrs-color-primary, #0a3a6b); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nrs-search-btn__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ─── 다크 모드 — 블록 분류 라벨 글자색 (2026-09-13) ─────────────────────
 * 그리드·분할 블록의 분류 라벨(강조색)이 본문 배경(--nrs-bg-primary = 01-shared 스위치) 위에서 묻히던 것
 * (es 폰 판 홈 8개, 명암비 1.34). style.css 의 .nrs-article-card__cat 과 같은 스위치·같은 색 계산. 인쇄 제외.
 * ★이 블록을 밝은 상자 안에 두면 다크에서 글자가 옅어진다 — 그때는 상자 배경을 바꾸는 스위치에 맞춰 따로 둘 것.
 * 상세: knowledge/nrs_dark_mode_two_switches.md */
@media screen {
    body.nrs-scheme-dark .nrs-grid-cat,
    body.nrs-scheme-dark .nrs-split-main-cat,
    body.nrs-scheme-dark .nrs-split-sub-cat {
        color: var(--nrs-text-secondary);
        color: color-mix(in srgb, var(--nrs-color-accent) 40%, var(--nrs-text-primary));
    }
}
@media screen and (prefers-color-scheme: dark) {
    body.nrs-scheme-auto .nrs-grid-cat,
    body.nrs-scheme-auto .nrs-split-main-cat,
    body.nrs-scheme-auto .nrs-split-sub-cat {
        color: var(--nrs-text-secondary);
        color: color-mix(in srgb, var(--nrs-color-accent) 40%, var(--nrs-text-primary));
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * 화면 환경 버튼(nrs-theme/view-switcher) — "데스크탑 | 태블릿 | 모바일 ( · 원래대로 )"
 *   운영자 지시 2026-09-16 · 목업(헤더 상단 줄 = 언어 전환과 같은 모양, 서랍 안 = 메뉴 항목 크기)대로.
 *   자리: 헤더 상단 줄(.nrs-header-topbar — 데스크탑·태블릿) · 햄버거 서랍 안(.nrs-mobile-drawer__view — 모바일).
 *     모바일 판에서 상단 줄 사본은 device/mobile.css 가 숨긴다(ViewChoice::TOPBAR_CLASS 와 짝 — 한쪽만 고치면 갇힘 방지가 깨진다).
 *   색 = **둘레 글자색(currentColor)에서 만든다** — 고정색(목업의 #5a626b·#333·#ccc)을 박으면 다크 모드와
 *     어두운 띠 헤더(h-dark 템플릿, 흰 글자)에서 글자가 배경에 묻는다. 라이트 흰 바탕에서는 결과가 목업과 거의 같은 색이다
 *     (65% 회색 ≈ #6b6b6b). 다크 규칙 = knowledge/nrs_dark_mode_two_switches.md §3(글자색은 뒤 배경 스위치에 묶는다).
 *   푸터(.nrs-footer, 어두운 띠 고정색) 안에 두었을 때 = 법정정보와 같은 색(운영자가 푸터에 직접 넣는 경우 대비).
 *   ★2026-09-20 운영자 지시("글자 사이즈 등 스타일은 상단의 ko, en 등과 같이 하면 되잖아"): 고정 판이 줄어 보일 때
 *     글자를 배율만큼 키우던 --nrs-vs-zoom 을 없앴다(폰에서 유독 크게 튀어 보였다). 이제 늘 언어 전환과 같은 12px.
 * ════════════════════════════════════════════════════════════════════════ */
.nrs-view-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; line-height: 1.2; }
.nrs-view-switcher[hidden] { display: none !important; }
.nrs-view-switcher__label { opacity: .65; margin-right: 2px; }
.nrs-view-switcher__opt { appearance: none; background: none; border: 0; margin: 0; padding: .35em 0; font: inherit; color: inherit; opacity: .65; cursor: pointer; }
.nrs-view-switcher__opt:hover { opacity: 1; text-decoration: underline; }
.nrs-view-switcher__opt[aria-pressed="true"] { opacity: 1; font-weight: 600; }
.nrs-view-switcher__sep { opacity: .35; }
/* 2026-09-23 운영자 지시("데스크탑 헤더의 '데스크탑|태블릿|모바일' 을 헤더 오른쪽의 '발행일시, 로그인' 쪽에
 * 붙여라"): 18px → auto. 상단 줄은 flex + space-between 이라 여기에 auto 를 주면 **기기전환부터 오른쪽으로
 * 묶인다**(언어 전환만 왼쪽에 남는다). ★이 파일이 style.css 보다 **나중에** 실려 이긴다 — 같은 규칙을 두 곳에
 * 두지 않고 **블록 자신의 CSS 인 여기서만** 정한다. 발행일시와의 사이·구분선은 style.css 의 형제 규칙. */
.nrs-header-topbar .nrs-view-switcher { margin-left: auto; }
/* 서랍 안 — 3칸 알약(2026-09-17 서랍 재설계, 목업 승인). 흰 트랙(::before, 1행 전체) 위에 버튼 3개를 칸마다 겹쳐 놓고,
 * 지금 환경은 트랙 안쪽의 진한 알약. 트랙을 버튼마다 칠하면 눌린 칸 옆에 이음새가 보인다(목업 실측) → 트랙은 하나.
 * ★align-items: stretch 필수 — 위 기본 줄의 align-items: center 를 이어받으면 버튼·트랙 높이가 0/글자 높이로 줄어든다(목업 실측).
 * ★2026-09-20 운영자 지시로 '원래대로'는 뺐다(2행 링크 규칙도 삭제). */
.nrs-mobile-drawer__view .nrs-view-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 44px; align-items: stretch; gap: 0; font-size: 13px; line-height: 1.2; }
.nrs-mobile-drawer__view .nrs-view-switcher::before { content: ""; grid-row: 1; grid-column: 1 / -1; border-radius: 999px; background: var(--nrs-color-bg); }
.nrs-mobile-drawer__view .nrs-view-switcher__sep,
.nrs-mobile-drawer__view .nrs-view-switcher__label { display: none; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt { grid-row: 1; position: relative; z-index: 1; margin: 4px; padding: 0 2px; border-radius: 999px; opacity: 1; background: transparent; color: var(--nrs-color-text-muted); font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt[data-view="desktop"] { grid-column: 1; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt[data-view="tablet"] { grid-column: 2; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt[data-view="mobile"] { grid-column: 3; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt:hover { opacity: 1; color: var(--nrs-color-text); text-decoration: none; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt[aria-pressed="true"],
.nrs-mobile-drawer__view .nrs-view-switcher__opt[aria-pressed="true"]:hover { background: var(--nrs-color-text); color: var(--nrs-color-bg); font-weight: 700; text-decoration: none; }
.nrs-mobile-drawer__view .nrs-view-switcher__opt:focus-visible { outline: 2px solid var(--nrs-color-accent); outline-offset: 1px; }
.nrs-footer .nrs-view-switcher { margin-top: 14px; padding-top: 6px; border-top: 1px solid #2c3643; color: #8a929b; }
.nrs-footer .nrs-view-switcher__opt { color: #cbd2d9; }
.nrs-footer .nrs-view-switcher__opt[aria-pressed="true"] { color: #fff; }
.nrs-footer .nrs-view-switcher__label { color: #8a929b; }

/* ════════════════════════════════════════════════════════════════════════
 * 판 고정 — 방문자가 '화면 환경' 버튼으로 데스크탑·태블릿·모바일을 고른 상태
 *   (운영자 지시 2026-09-16 "버튼을 누르면 해당 환경용 테마로 바뀌도록").
 *
 * 한 판을 고르면 네 가지가 같이 고정된다:
 *   ① 테마 기기 CSS — inc/enqueue.php 가 그 판 파일만 폭 조건 없이(media=all) 싣는다
 *   ② 배치(블록 구성) — PageRenderer::detect_device → FrontRouter::pick_device_layout
 *   ③ 화면 폭 태그 — ViewChoice::viewport_content ('width=N')
 *   ④ 여기 — 넓은 창에서 그 판 폭 **기둥**으로 가운데 정렬.
 * ④가 없으면 PC 에서 "모바일"을 골라도 창 폭(1440 등)으로 퍼져 그 환경 화면이 아니다
 *   (PC 브라우저는 ③ 폭 태그를 무시한다 — 2026-09-15 실측).
 * 폰·태블릿 실물에서는 창 폭 ≤ 고정 폭이라 max-width 가 걸리지 않는다(그 기기에서는 무회귀).
 *
 * 색은 테마 스위치 토큰으로만(knowledge/nrs_dark_mode_two_switches.md §3) — 기둥 밖 바탕도 본문 글자·배경 토큰에서
 *   섞어 만든다. 그래서 다크 스위치를 켜면 기둥 안팎이 함께 어두워진다(별도 다크 규칙 불필요).
 * --nrs-view-fixed-width 는 선택 블록 설정값 — inc/enqueue.php 가 :root 인라인으로 내보낸다(설정값 하드코딩 금지).
 * ════════════════════════════════════════════════════════════════════════ */
body.nrs-view-fixed-tablet,
body.nrs-view-fixed-mobile {
    /* 기둥 밖 = 본문 글자색을 배경에 12% 섞은 회색(라이트 ≈ #e2e2e2 · 다크 ≈ #2d2d2d). 앞줄은 color-mix 미지원 대비. */
    background: #e3e6ea;
    background: color-mix(in srgb, var(--nrs-color-text) 12%, var(--nrs-color-bg));
    /* vw 글자 크기가 창이 아니라 기둥을 따르게(원본의 calc(N * var(--nrs-vw, 1vw))). 데스크탑 판·자동에는 두지 않는다 —
     * 그때는 기둥 = 창 폭이라 1vw 가 맞다(값을 넣으면 PC 에서 제목 크기가 달라진다). */
    --nrs-vw: calc(var(--nrs-view-fixed-width, 100vw) / 100);
}
body.nrs-view-fixed-tablet .nrs-site-blocks,
body.nrs-view-fixed-mobile .nrs-site-blocks {
    max-width: var(--nrs-view-fixed-width);
    margin-inline: auto;
    background: var(--nrs-color-bg, #fff);
    box-shadow: 0 0 0 1px var(--nrs-color-border, #d5d9de), 0 8px 32px rgba(0, 0, 0, .08);
}
/* 데스크탑 판: 창이 좁아도 PC 화면 그대로 — 줄이지 말고 가로로 밀어서 보게 한다. */
body.nrs-view-fixed-desktop .nrs-site-blocks { min-width: var(--nrs-view-fixed-width); }
/* 햄버거 서랍(위 .nrs-drawer.nrs-mobile-drawer — 창 전체를 덮는 position:fixed 층)은 판을 골라도 **창 왼쪽 끝**에서 연다.
 * ★기둥 폭·위치에 맞추지 말 것 — 2026-09-16 에는 기둥에 맞췄으나 운영자 지시로 없앴다(2026-09-26 "햄버거 버튼을 눌렀을 때 나오는 메뉴는
 *   화면 왼쪽 끝이어야지" → 데스크탑 판 · "태블릿·모바일 판도 화면 왼쪽 끝에서 열리게 해라"). */
/* 인쇄: 기둥·그림자·바깥 바탕 없이 종이 폭 그대로. */
@media print {
    body.nrs-view-fixed { background: transparent; }
    body.nrs-view-fixed .nrs-site-blocks { max-width: none; min-width: 0; box-shadow: none; background: transparent; }
}

/* ══ 내장 헤더·푸터 틀 색(2026-09-19, 운영자 "알아서 해라" = 목업대로) ══════════════════════════════
 * 새 사이트(기본판 p0000)에서 드러난 결함: 분류 메뉴 = 흰 바탕에 흰 글자 · 다크 푸터 = 어두운 띠에 어두운 글자.
 * ★틀(HeaderFooterTemplates)이 새로 붙이는 클래스에만 건다 → 이미 틀을 적용해 둔 편집판(공정경제 등)은 그대로.
 * 띠 색 = 테마 기본 색(--nrs-color-primary — 다크 모드에서도 같은 남색이라 흰 글자가 계속 보인다). */
.nrs-hf-gnb-band { background: var(--nrs-color-primary); }
/* 컴팩트 헤더(한 줄)의 분류 메뉴: 띠 없이 본문 글자색 — 다크 모드에서는 본문 글자색이 밝아진다. */
.nrs-hf-nav-plain .nrs-gnb-nav > li > a { color: var(--nrs-color-text); }
.nrs-hf-nav-plain .nrs-gnb-nav > li > a:hover,
.nrs-hf-nav-plain .nrs-gnb-nav > li.current-menu-item > a { color: var(--nrs-color-primary); background: transparent; }
/* 어두운 띠(다크 헤더·다크 푸터): 제호는 흰색(띠 글자색은 틀이 style 로 준다). */
.nrs-hf-dark .nrs-masthead__text { color: #ffffff; }

/* ─── 2026-09-27 다크 — 검색 단추 · 검색 창(⑥ — 메뉴 막대와 함께 다크에서 어둡게). 화면에서만(인쇄는 라이트). style.css 끝 ⑥ 블록과 같은 방식. ─── */
@media screen {
    [data-theme="dark"] .nrs-search-btn__toggle, .dark-mode .nrs-search-btn__toggle { background: var(--nrs-color-bg); border-color: #475569; color: var(--nrs-color-text); }
    [data-theme="dark"] .nrs-search-btn__toggle:hover, .dark-mode .nrs-search-btn__toggle:hover,
    [data-theme="dark"] .nrs-search-btn__toggle[aria-expanded="true"], .dark-mode .nrs-search-btn__toggle[aria-expanded="true"] { color: var(--nrs-color-link); border-color: var(--nrs-color-link); }
    [data-theme="dark"] .nrs-search-btn__pop, .dark-mode .nrs-search-btn__pop { background: var(--nrs-color-bg-sub); border-color: var(--nrs-color-border); }
    [data-theme="dark"] .nrs-search-btn__input, .dark-mode .nrs-search-btn__input,
    [data-theme="dark"] .nrs-search-btn__input:focus, .dark-mode .nrs-search-btn__input:focus { background: var(--nrs-color-bg); border-color: #475569; color: var(--nrs-color-text); }
}
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nrs-search-btn__toggle { background: var(--nrs-color-bg); border-color: #475569; color: var(--nrs-color-text); }
    :root:not([data-theme="light"]) .nrs-search-btn__toggle:hover,
    :root:not([data-theme="light"]) .nrs-search-btn__toggle[aria-expanded="true"] { color: var(--nrs-color-link); border-color: var(--nrs-color-link); }
    :root:not([data-theme="light"]) .nrs-search-btn__pop { background: var(--nrs-color-bg-sub); border-color: var(--nrs-color-border); }
    :root:not([data-theme="light"]) .nrs-search-btn__input,
    :root:not([data-theme="light"]) .nrs-search-btn__input:focus { background: var(--nrs-color-bg); border-color: #475569; color: var(--nrs-color-text); }
}

/* ─── 2026-09-27 검색 버튼 '가로로 펼치기'(블록 설정 openStyle=expand — 설정을 켠 블록에만) ───
 * 공정경제 운영자 "검색 버튼을 누르면 … 버튼이 횡으로 확장돼 거기서 검색 키워드를 입력한 다음 돋보기 버튼을 누르면 검색이 이뤄지도록" → 목업 승인.
 * 단추 왼쪽으로 입력칸이 0.2초 동안 늘어난다(닫을 때도 같게 — 움직임 줄이기 설정과 상관없이, 운영자 결정). 마크업 = render.php(.nrs-search-btn__box 안 입력 틀 → 단추) · 동작 = main.js.
 * ★위 다크 규칙보다 뒤에 두고 한 단계 세게(.nrs-search-btn.nrs-search-btn--expand) — 펼친 칸에 다크 테두리·바탕이 두 겹으로 생기지 않게. 색은 토큰(라이트·다크 자동). */
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__box { position: relative; display: inline-flex; align-items: center; }
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__toggle { position: relative; z-index: 2; }
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__pop,
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__pop[hidden] { display: flex; align-items: center; position: absolute; right: 0; top: 0; z-index: 1; box-sizing: border-box; width: 34px; height: 34px; margin: 0; padding: 0 38px 0 0; gap: 0; background: var(--nrs-color-bg, #fff); border: 1px solid var(--nrs-color-border, #d8dde3); border-radius: 17px; box-shadow: none; overflow: hidden; visibility: hidden; transition: width .2s ease, visibility 0s linear .2s; }
.nrs-search-btn.nrs-search-btn--expand.is-open .nrs-search-btn__pop { width: 280px; visibility: visible; transition: width .2s ease, visibility 0s; }
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__pop .nrs-search-btn__input { flex: 1 1 auto; min-width: 0; width: auto; height: 32px; margin: 0; padding: 0 4px 0 14px; border: 0; border-radius: 16px 0 0 16px; background: transparent; color: var(--nrs-color-text); font-size: 14px; opacity: 0; transition: opacity .15s ease; }
.nrs-search-btn.nrs-search-btn--expand.is-open .nrs-search-btn__pop .nrs-search-btn__input { opacity: 1; transition-delay: .08s; }
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__pop .nrs-search-btn__input:focus { outline: none; border: 0; background: transparent; color: var(--nrs-color-text); }
.nrs-search-btn.nrs-search-btn--expand .nrs-search-btn__submit { display: none; }
.nrs-search-btn.nrs-search-btn--expand.is-open .nrs-search-btn__toggle { border-color: transparent; background: none; color: var(--nrs-color-link); }

/* ─── 2026-09-27 기사 목록 '가로 넘김 단추'(블록 설정 navArrows — 켠 블록에만) ───
 * 공정경제 운영자(폰 기획·연재) "횡방향 스크롤바를 두지 말고, 동그라미 안에 >나 < 모양의 꺽쇠로 다른 콘텐츠를 볼 수 있도록" ·
 * "한번 > 아이콘을 누르면 … 끝까지 보여주고, <을 누르면 처음 상태로" → 목업 승인. 틀(.nrs-hnav)·보이기·넘기기 = main.js initHNav(목록이 넘칠 때만 보임).
 * 위치는 변수로 — 테마 CSS 가 배치에 맞게 준다: --nrs-hnav-top(단추 가운데 높이, 기본 = 목록 높이의 가운데) · --nrs-hnav-inset(좌우 끝에서, 기본 8px). 색은 토큰. */
.nrs-hnav { position: relative; }
.nrs-hnav__btn { position: absolute; top: var(--nrs-hnav-top, 50%); z-index: 3; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--nrs-color-border, #d8dde3); border-radius: 50%; background: var(--nrs-color-bg, #fff); color: var(--nrs-color-text, #1e1e1e); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); cursor: pointer; transform: translateY(-50%); -webkit-tap-highlight-color: transparent; }
.nrs-hnav__btn--prev { left: var(--nrs-hnav-inset, 8px); }
.nrs-hnav__btn--next { right: var(--nrs-hnav-inset, 8px); }
.nrs-hnav__btn[hidden] { display: none !important; }
.nrs-hnav__btn:focus-visible { outline: 2px solid var(--nrs-color-link, #000080); outline-offset: 2px; }
.nrs-hnav__btn svg { display: block; width: 18px; height: 18px; }

/* ─── 2026-09-28 기사 화면 '읽기 막대' · '구글 선호 출처 추가'(기사 보기 블록 설정 — 켠 곳에만) ───
 * 공정경제 운영자: 기사 화면에서만 아래로 읽으면 메뉴 막대가 숨고, 위로 스크롤하면 나타난다(데스크톱·태블릿 = 메뉴 막대 · 폰 = ☰·제호 줄)
 *   · 막대는 라이트·다크별 불투명 · 바이라인 줄 끝에 구글 선호 출처 추가 → 목업 승인.
 *   2026-10-02: 막대 안 · ☰ 서랍 안으로 기사 도구를 옮기던 규칙은 걷었다 — 도구는 늘 바이라인 · 날짜 줄 끝(아래 '기사 도구').
 *   표시 = ArticleViewPage(설정을 켰을 때만 data-nrs-reading-bar · .nrs-article-gpref) · 동작 = main.js initReadingBar.
 * 머리글을 붙이되(position: sticky) 막대 위쪽(윗줄·제호 줄 — 폰은 윗줄)만큼 위로 올려 막대만 화면 맨 위에 남기고, 숨길 때는 막대 높이만큼 더 올린다
 *   — transform 을 쓰면 머리글 안 서랍(position: fixed)의 기준이 바뀌어 쓰지 않는다.
 * ★이 파일은 기기 CSS(desktop.css 의 .nrs-region-header.nrs-gnb-fixed { top })·테마 CSS 보다 앞에 실린다 — 같은 세기면 진다.
 *   그래서 body 를 앞에 붙여 한 단계 세게 쓴다(싣는 순서와 상관없이). 색은 테마 토큰(라이트·다크가 따라간다). */
body .nrs-region-header.nrs-reading-bar { position: sticky; top: calc(-1 * var(--nrs-reading-offset, 0px)); z-index: 100; transition: top .2s ease; }
body .nrs-region-header.nrs-reading-bar.is-reading-hidden { top: calc(-1 * (var(--nrs-reading-offset, 0px) + var(--nrs-reading-bar-h, 64px) + 2px)); }
/* 막대 바탕 = 페이지 바탕 토큰 — 화면 위에 붙을 때 본문 글자가 비치지 않게(테마가 머리글 바탕을 걷어도 — 공정경제 운영자 09-28 "라이트, 블랙 테마별로 불투명") */
body .nrs-region-header.nrs-reading-bar .nrs-header-inner,
body .nrs-region-header.nrs-reading-bar .nrs-gnb { background: var(--nrs-bg-primary, #fff); }
/* (2026-10-02 걷음: 막대 안 도구 .is-in-bar · ☰ 서랍 안 '기사 도구' 칸 .nrs-reading-drawer-tools — 운영자 "햄버거 메뉴 안에서 이들 버튼은 빼라"
 *   · 결정 "PC 에서 메뉴 막대로 따라오는 것도 함께 없앤다".) */
/* 구글 선호 출처 추가 — 바이라인·날짜 줄 끝 알약 단추(ND·뉴스웍스와 같은 자리) */
body .nrs-article-gpref { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--nrs-color-border, #d1d5db); border-radius: 999px; background: var(--nrs-color-bg, #fff); color: var(--nrs-color-text, #111827); font-size: 12px; line-height: 1; white-space: nowrap; text-decoration: none; }
body .nrs-article-gpref:hover,
body .nrs-article-gpref:focus-visible { border-color: currentColor; text-decoration: none; }
.nrs-article-gpref__g { flex: 0 0 auto; width: 14px; height: 14px; }
.nrs-article-gpref__arrow { flex: 0 0 auto; width: 10px; height: 10px; opacity: .7; }

/* ─── 기사 도구 = 바이라인 · 날짜 줄 오른쪽 끝(2026-10-02) ───
 * 운영자 "개별기사 출력 페이지에 있는 인쇄, 글자 크기, sns 공유, 북마크 아이콘은 구글 선호 매체 추가가 있는 행의 오른쪽 끝으로 보내라.
 *   그리고 햄버거 메뉴 안에서 이들 버튼은 빼라." → 목업 승인. 마크업 = ArticleViewPage render_meta_info 끝(구글 단추 뒤 — render_article_tools).
 * 줄 = 가로 · 줄바꿈 허용(공정경제 테마 CSS 가 머리 부분에 같은 값을 이미 준다 — 거기선 그쪽이 이긴다).
 * ★09-29 결정 "수정일시의 위치가 변하면 안 된다(발행일시는 아래로 펼쳐지기만)": 칸을 모두 위에 붙이고(align-self — 줄의 가운데 맞춤보다 이긴다)
 *   날짜 윗줄 높이를 도구 단추 높이로 둔다(desktop.css · tablet.css — 폰은 날짜가 한 줄을 다 쓴다 · mobile.css) → 펼쳐도 아무것도 안 움직인다.
 *   구글 단추(28px)는 도구 단추(38px — 04-workflow article-view.css .nrs-qt-btn 과 짝 · 600px 이하 32px 는 mobile.css)와 가운데를 맞춘다. */
body .nrs-article-front .nrs-wf-article-meta { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 8px; }
body .nrs-wf-article-meta > .nrs-wf-article-dates,
body .nrs-wf-article-meta > .nrs-article-tools { align-self: flex-start; }
body .nrs-wf-article-meta > .nrs-article-tools { margin-left: auto; }
body .nrs-wf-article-meta:has(> .nrs-article-tools) > .nrs-article-gpref { margin-top: 5px; }   /* (38 − 28) ÷ 2 */