/* =====================================================================
   main.css — 메인 섹션 엔진·서브 LNB·검색 결과 규칙 (WO-016 이관 · DES-005 §7.2, E2)

   원본은 docs/planning/publish/PUB-main.css(TST-005 통과본). 둘이 어긋나면 이 파일이 정답.
   base.tag 가 krds.local.min.css → swiper-bundle.min.css → pattern-pages.css → theme-nlsc.css → main.css 순으로 로드한다.
   KRDS 공식 메인 패턴 CSS(krds/css/pattern/pattern-pages.css: .main-vban-wrap / .main-sect / .main-tit-wrap /
   .d-card / .news-list / .contents-wrap)가 프로젝트에 이미 있으므로 **그 위에 얹는 최소 규칙**만 둔다.
   섹션 컨테이너·히어로·카드·탭은 공식 클래스를 그대로 쓴다. 여기 있는 것은 공식에 없는 것뿐이다:
     · 폭 토큰(1380 — RPT-009 D1) · N분할 그리드 · 히어로 분할형 · 소개 카드 목록/원형 · 띠배너
     · 게시판 최신글 목록 · 서브 LNB 2열 레이아웃 · 검색 결과 강조
   ⚠️ KRDS 토큰만 참조 (CLAUDE.md §4-2). 인라인 style 금지. 값은 :root 토큰으로.
   ===================================================================== */

/* 폭·LNB 토큰(--krds-contents-size 1380, --nlsc-lnb-*)은 theme-nlsc.css :root 에 있다 (D1) */
:root {
	--nlsc-circle-size: 104px;
	--nlsc-hero-min-height: 420px;
}

/* ---------- 로고 — 시안 lockup "대통령직속 / 국민생명안전위원회" 2줄.
   KRDS `#krds-header .header-container .logo a` 가 height:100%(이미지 로고 기준)라 2줄 텍스트가 잘린다.
   같은 특이성으로는 경쟁이 남아 .header-container 를 포함해 확실히 이긴다 (TST-005 결함 수정) ---------- */
#krds-header .header-container .header-branding .logo { height: auto; }
#krds-header .header-container .header-branding .logo a { height: auto; min-height: 4.8rem; }
#krds-header .header-branding .logo .logo-text { display: block; line-height: 1.3; }
/* 이미지 로고 (사이트 설정) — 헤더 48px, 푸터 40px 기준. 반전 로고가 없으면 로고를 흰색으로 반전(logo-invert) */
#krds-header .header-branding .logo img { display: block; height: 4.8rem; width: auto; max-width: 100%; }
#krds-footer .f-logo img { display: block; height: 4rem; width: auto; }
#krds-footer .f-logo img.logo-invert { filter: brightness(0) invert(1); }

/* ---------- N분할 그리드 — 섹션 COL_CO(2/3/4) → data-cols. 모바일 1열 ---------- */
.main-grid { display: grid; gap: var(--krds-gap-6); margin: 0; padding: 0; list-style: none; }
.main-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.main-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.main-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.main-grid > li > a { display: block; color: inherit; text-decoration: none; }

/* ---------- HERO / CAROUSEL — 공식 .main-vban-wrap.bg 그대로. 슬라이드 이미지만 비율 고정 ---------- */
.main-vban-wrap .vb-swiper .swiper-slide .im img { width: 100%; height: auto; }
.main-vban-wrap .vb-swiper .swiper-slide .text .tit { color: var(--nlsc-primary); }

/* ---------- HERO / SPLIT — 카피 좌 · 비주얼 우 (시안 B형). 비주얼 아래 링크 슬롯(WITH_LINKS_AT) ---------- */
.main-hero-split .inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--krds-gap-8); align-items: center; min-height: var(--nlsc-hero-min-height); }
.main-hero-split .hero-copy .tit { font-size: var(--krds-pc-font-size-display-small); font-weight: var(--krds-font-weight-bold); line-height: 1.35; color: var(--nlsc-primary); }
.main-hero-split .hero-copy .txt { margin-top: var(--krds-gap-4); font-size: var(--krds-pc-font-size-body-large); color: var(--krds-light-color-text-subtle); }
.main-hero-split .hero-visual img { display: block; width: 100%; height: auto; border-radius: var(--krds-radius-large1); }
.main-hero-split .hero-links { margin-top: var(--krds-gap-5); }

/* ---------- LINKS / IMAGE_CARD — 공식 d-card.line.d-row 위 이미지 비율·날짜.
   공식 d-row 는 im/in 사이 간격이 없다(헤드리스 실측) → gap 명시. 767 이하는 세로 쌓기 ---------- */
.main-grid .d-card.d-row, .main-board .d-card.d-row { gap: var(--krds-gap-5); align-items: center; }
.main-grid .d-card .in, .main-board .d-card .in { min-width: 0; }
.main-grid .d-card .im { flex: none; width: 40%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--krds-radius-medium2); background: var(--krds-light-color-surface-gray-subtler); }
.main-grid .d-card .im img { width: 100%; height: 100%; object-fit: cover; }
.main-grid .d-card .c-date { margin-bottom: var(--krds-gap-2); font-size: var(--krds-pc-font-size-body-small); color: var(--krds-light-color-text-subtle); }
.main-grid .d-card .c-tit .svg-icon { vertical-align: middle; }

/* ---------- INTRO / CARDS — 카드 안 항목 목록 · 각주 ---------- */
.main-intro-desc { margin-top: var(--krds-gap-3); color: var(--krds-light-color-text-subtle); }
.main-intro-list { margin: var(--krds-gap-4) 0 0; padding-left: 1.2em; list-style: disc; color: var(--krds-light-color-text-basic); }
.main-intro-list li + li { margin-top: var(--krds-gap-2); }
.main-foot-note { margin-top: var(--krds-gap-4); font-size: var(--krds-pc-font-size-body-small); color: var(--krds-light-color-text-subtle); }
.main-grid .d-card.is-intro { height: 100%; }
.main-grid .d-card.is-intro .c-tit { color: var(--nlsc-primary); }

/* ---------- INTRO / CIRCLES — 원형 3 (시안 B형) ---------- */
.main-circles { display: flex; flex-wrap: wrap; gap: var(--krds-gap-4); justify-content: center; margin: var(--krds-gap-5) 0 0; padding: 0; list-style: none; }
.main-circles li { display: flex; align-items: center; justify-content: center; width: var(--nlsc-circle-size); height: var(--nlsc-circle-size); border-radius: 50%; background: var(--krds-light-color-surface-gray-subtler); color: var(--nlsc-primary); font-weight: var(--krds-font-weight-bold); font-size: var(--krds-pc-font-size-body-small); text-align: center; }

/* ---------- STRIP — 띠배너 1행 ---------- */
.main-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--krds-gap-4); padding: var(--krds-padding-5) var(--krds-padding-6); border-radius: var(--krds-radius-medium2); background: var(--nlsc-primary); color: var(--nlsc-on-primary); text-decoration: none; }
.main-strip .strip-label { flex: none; padding: var(--krds-padding-1) var(--krds-padding-4); border-radius: var(--krds-radius-large2); background: var(--nlsc-on-primary); color: var(--nlsc-primary); font-weight: var(--krds-font-weight-bold); }
.main-strip .strip-tit { font-size: var(--krds-pc-font-size-heading-xsmall); font-weight: var(--krds-font-weight-bold); }
.main-strip .svg-icon { margin-left: auto; filter: brightness(0) invert(1); }

/* ---------- BOARDS / GRID — 게시판별 카드(제목 + 더보기 + 목록 5건) ---------- */
.main-board { display: flex; flex-direction: column; height: 100%; padding: var(--krds-padding-6); border: 1px solid var(--krds-light-color-divider-gray-light); border-radius: var(--krds-radius-medium2); background: var(--krds-light-color-surface-white); }
.main-board .main-tit-wrap { margin-bottom: var(--krds-gap-3); padding-bottom: var(--krds-gap-3); border-bottom: 1px solid var(--krds-light-color-divider-gray-light); }
.main-board .main-tit-wrap .tit { font-size: var(--krds-pc-font-size-heading-xsmall); }
.main-board-list { margin: 0; padding: 0; list-style: none; }
.main-board-list li + li { border-top: 1px solid var(--krds-light-color-divider-gray-light); }
.main-board-list a { display: flex; justify-content: space-between; gap: var(--krds-gap-4); padding: var(--krds-padding-3) 0; color: inherit; text-decoration: none; }
.main-board-list a:hover .tit, .main-board-list a:focus .tit { text-decoration: underline; }
.main-board-list .tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-board-list .date { flex: none; font-size: var(--krds-pc-font-size-body-small); color: var(--krds-light-color-text-subtle); }
.main-board .d-card .im { width: 45%; }

/* ---------- 서브 레이아웃 — LNB 248 + 64 + 콘텐츠 (시안 공통 레이아웃 서브) ---------- */
.sub-layout { display: grid; grid-template-columns: var(--nlsc-lnb-width) minmax(0, 1fr); column-gap: var(--nlsc-lnb-gap); align-items: start; }
.sub-layout .krds-side-navigation .lnb-tit { padding: var(--krds-padding-5) var(--krds-padding-6); border-radius: var(--krds-radius-medium2); background: var(--nlsc-primary); color: var(--nlsc-on-primary); text-align: center; }
.sub-layout .sub-content { min-width: 0; }
.sub-layout .sub-content .page-content { max-width: none; padding-left: 0; padding-right: 0; }
/* 시안 "Page Title" — KRDS h-tit 기본은 heading-small 이라 LNB 옆에서 작아 보인다 → heading-large 로 (검토 항목 L5) */
.sub-layout .sub-content .page-title-wrap .h-tit { font-size: var(--krds-pc-font-size-heading-large); }

/* ---------- 검색 결과 — 검색어 강조 · 상단 검색 폼 ---------- */
.sch-result-form .sch-input { max-width: 640px; }
/* c-tit 안의 <mark> 가 브라우저 기본(노랑)으로 남지 않게 c-txt 한정을 풀었다 (TST-005) */
.sch-result mark { padding: 0 0.1em; background: var(--krds-light-color-surface-gray-subtler); color: var(--nlsc-primary); font-weight: var(--krds-font-weight-bold); }
.sch-result .no-results { padding: var(--krds-padding-10) 0; text-align: center; color: var(--krds-light-color-text-subtle); }

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
	.main-grid[data-cols="3"], .main-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.main-hero-split .inner { grid-template-columns: 1fr; min-height: 0; }
	.sub-layout { grid-template-columns: 1fr; row-gap: var(--krds-gap-6); }
}
@media (max-width: 767px) {
	.main-grid[data-cols] { grid-template-columns: 1fr; }
	.main-grid .d-card.d-row, .main-board .d-card.d-row { flex-direction: column; align-items: stretch; }
	.main-grid .d-card .im, .main-board .d-card .im { width: 100%; }
	.sub-layout .sub-content .page-title-wrap .h-tit { font-size: var(--krds-mobile-font-size-heading-large); }
	.main-strip .svg-icon { margin-left: 0; }
}

/* ---------- 섹션 아이템 본문(에디터 HTML) — 소개 카드 목록 · 원형 3 · 히어로 자리표시자 (WO-017) ---------- */
.main-intro-body ul, .main-circles-body p { margin: var(--krds-gap-4) 0 0; }
.main-intro-body ul { padding-left: 1.2em; list-style: disc; color: var(--krds-light-color-text-basic); }
.main-intro-body li + li { margin-top: var(--krds-gap-2); }
.main-circles-body p { color: var(--krds-light-color-text-subtle); }
.main-circles-body ul { display: flex; flex-wrap: wrap; gap: var(--krds-gap-4); justify-content: center; margin: var(--krds-gap-5) 0 0; padding: 0; list-style: none; }
.main-circles-body li { display: flex; align-items: center; justify-content: center; width: var(--nlsc-circle-size); height: var(--nlsc-circle-size); border-radius: 50%; background: var(--krds-light-color-surface-gray-subtler); color: var(--nlsc-primary); font-weight: var(--krds-font-weight-bold); font-size: var(--krds-pc-font-size-body-small); text-align: center; }
.main-vban-wrap .vb-swiper .swiper-slide .im .thumb-placeholder,
.main-hero-split .hero-visual .thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--krds-radius-large1); background: var(--krds-light-color-surface-gray-subtler); color: var(--krds-light-color-text-subtle); }
.main-grid .d-card .c-txt p { margin: 0; }