/* =====================================================================
   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%; }

/* HTML 섹션 본문 — KRDS .main-sect .inner 는 flex 라 자식이 기본 min-width:auto 로 내용 폭까지 늘어난다.
   캐러셀(swiper-wrapper 는 슬라이드 합계 폭)이 든 본문이면 모바일에서 가로 스크롤이 생겼다(nlscs3 375px 에서 960px). */
.main-sect .inner > .page-content { min-width: 0; width: 100%; }

/* ---------- 서브 레이아웃 — 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); }
/* 기간 선택 줄 (WO-045) — 빠른 선택 3 + 날짜 2. 좁은 화면에서 줄바꿈 */
/* fieldset 은 flex 폼(sch-form-wrap) 안에서 내용 폭(402px)으로 커진다 → 폭을 명시하고 min-width 0 (375px 실측) */
.sch-result-form { flex-wrap: wrap; }
.sch-period { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: var(--krds-gap-4); width: 100%; max-width: 640px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sch-period .form-tit { margin: 0; padding: 0; }
.sch-period-quick { display: inline-flex; flex-wrap: wrap; gap: var(--krds-gap-2); }
.sch-period .input-group.range { flex: 1 1 280px; min-width: 0; }
.sch-period .input-group.range > li:not(.mark) { flex: 1 1 0; min-width: 0; }
.sch-period .input-group.range .krds-input { width: 100%; min-width: 0; }
/* 탭이 많으면(상위 메뉴 4개 + 전체) 래퍼가 내용 폭으로 커져 375px 에서 746px — 래퍼는 화면 폭에 묶고 목록(ul)이 가로 스크롤한다 (2026-10-29 nlsc-s3 실측) */
.sch-result .krds-tab-area, .sch-result .tab { min-width: 0; max-width: 100%; }
.sch-result .tab { width: 100%; }
.sch-result .tab .btn-tab { padding: 0 var(--krds-padding-6); }
.sch-result .tab .btn-tab .count { margin-left: var(--krds-gap-1); font-weight: var(--krds-font-weight-regular); }
.sch-result .no-results { padding: var(--krds-padding-10) 0; text-align: center; color: var(--krds-light-color-text-subtle); }

/* ---------- 위원회 일정 (WO-046) ---------- */
.schedule-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--krds-gap-3); }
.schedule-head .h-tit { margin: 0; }
.schedule-ym { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--krds-gap-2); }
.schedule-ym .krds-form-select { width: auto; }
/* KRDS .krds-table-wrap .tbl{min-width:73.2rem} — 달력은 7칸이 화면에 맞아야 한다(375px 실측 748px 넘침). 같은 특이도로 덮는다 */
.schedule-cal { table-layout: fixed; width: 100%; }
.krds-table-wrap .schedule-cal { min-width: 0; }
/* KRDS .krds-table-wrap .tbl.data td(가운데 정렬·패딩)보다 특이도를 높인다 */
.krds-table-wrap .tbl.schedule-cal th, .krds-table-wrap .tbl.schedule-cal td { text-align: left; vertical-align: top; }
.krds-table-wrap .tbl.schedule-cal td { height: 9.6rem; padding: var(--krds-padding-2); }
.schedule-cal .cal-num { display: inline-block; min-width: 2.4rem; font-weight: var(--krds-font-weight-bold); }
.schedule-cal .is-sun, .schedule-cal .is-sun .cal-num { color: var(--krds-light-color-text-danger); }
.schedule-cal .is-sat, .schedule-cal .is-sat .cal-num { color: var(--krds-light-color-text-information); }
.schedule-cal .is-today { background: var(--krds-light-color-surface-primary-subtler); }
.schedule-cal .is-today .cal-num { text-decoration: underline; text-underline-offset: 0.3em; }
.schedule-cal .cal-items { margin: var(--krds-gap-1) 0 0; padding: 0; list-style: none; font-size: var(--krds-pc-font-size-body-small); }
.schedule-cal .cal-items li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--krds-light-color-text-subtle); }
.schedule-cal .cal-more { font-weight: var(--krds-font-weight-bold); }
.schedule-cn { margin: var(--krds-gap-1) 0 0; white-space: pre-line; color: var(--krds-light-color-text-subtle); }
.schedule-empty { padding: var(--krds-padding-10) 0; text-align: center; color: var(--krds-light-color-text-subtle); }

/* ---------- 반응형 ---------- */
@media (max-width: 767px) {
	.schedule-ym { order: 3; flex: 1 0 100%; justify-content: center; }
	.krds-table-wrap .tbl.schedule-cal th { padding: var(--krds-padding-1); text-align: center; }
	.krds-table-wrap .tbl.schedule-cal td { height: 5.6rem; padding: var(--krds-padding-1); text-align: center; }
	.schedule-cal .cal-items { display: none; }
	.schedule-cal .has-items .cal-num { border-bottom: 0.3rem solid var(--nlsc-primary); }
}
@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; }