/* =====================================================================
   theme-nlsc.css — 국민생명안전위원회 브랜드 테마
   
   ⚠️ krds_tokens.css 원본을 수정하지 않는다. 이 파일을 뒤에 얹어 토큰만 덮어쓴다.
      그래야 KRDS 버전을 올려도 테마가 살아남는다. (CLAUDE.md §0)
   
   ⚠️ HEX 는 시안 이미지에서 읽은 추정값이다. 원본 시안 확보 시 이 파일만 교체한다.
   
   ⚠️ 명도대비 실측 (WCAG 2.x / KWCAG 필수) — scripts 로 계산한 값이다:
        남색 #1B2B4B + 흰 글자   14.06:1  ✅
        진남색 #121E36 + 흰 글자 16.60:1  ✅
        골드 #D9A441 + 흰 글자    2.25:1  ❌ AA(4.5) 는 물론 큰글씨(3.0) 도 미달
        골드 #D9A441 + 남색 글자  6.25:1  ✅
        흰 배경 + 골드 글자       2.25:1  ❌  → 골드를 텍스트 색으로 쓰지 말 것

      시안에는 골드 버튼 위에 흰 글자가 올라가 있으나 그대로 쓰면 접근성 위반이다.
      골드 배경에는 반드시 남색 글자를 쓴다 — 아래 --nlsc-on-accent 가 그 규약이다.
   ===================================================================== */

:root {
	--nlsc-primary:        #1B2B4B;  /* 남색 — 헤더/푸터 배경 */
	--nlsc-primary-strong: #121E36;
	--nlsc-accent:         #D9A441;  /* 골드 — 버튼/포인트 */
	--nlsc-on-primary:     #FFFFFF;  /* 남색 위 글자 */
	--nlsc-on-accent:      #1B2B4B;  /* 골드 위 글자 — 흰색 금지(명도대비 미달) */

	/* 시안 폭 (RPT-009 D1 · DES-005 §7.2): 캔버스 1920 / 콘텐츠 1380 / 서브 LNB 248 + 여백 64 + 콘텐츠 1068.
	   KRDS 기본 1200 을 토큰으로만 바꾼다 (krds_tokens.css 원본 무수정). 관리자단은 .inner 를 쓰지 않아 영향 없음. */
	--krds-contents-size:      1380px;
	--krds-contents-wrap-size: 1428px;   /* 1380 + 좌우 padding 24 */
	--nlsc-lnb-width: 248px;
	--nlsc-lnb-gap:   64px;
}

/* =====================================================================
   사용자단 셸 — KRDS 는 #krds-masthead / #krds-header / #krds-footer **ID 셀렉터**로만 정의한다 (RPT-007 §0).
   브랜드 오버라이드도 같은 셀렉터 위에 얹는다. 배경을 통째로 덮지 않고 토큰만 바꾼다. (WO-011 · TST-003)
   ⚠️ 이전의 .krds-header/.krds-footer 규칙은 KRDS 미적용을 가리던 대체 스타일이었다 — 되살리지 말 것.
   ===================================================================== */

/* 마스트헤드 — 진남색 띠 */
#krds-masthead { background: var(--nlsc-primary-strong); }
#krds-masthead .nuri-txt { color: var(--nlsc-on-primary); }

/* 헤더 — 흰 배경 유지, 하단 골드 라인, 로고·GNB 남색 */
#krds-header .header-in { border-bottom: 3px solid var(--nlsc-accent); }
#krds-header .krds-main-menu .gnb-main-trigger { color: var(--nlsc-primary); }
#krds-header .utility-list .login-name { color: var(--krds-light-color-text-subtle); }
#krds-header .utility-list .logout-form { display: inline; margin: 0; }

/* 로고 — 시안 수령 전이라 이미지가 없다. KRDS 기본 로고 배경을 끄고 사이트명을 텍스트로 (이미지 확정 시 이 블록만 교체) */
#krds-header .header-branding .logo a,
#krds-footer .f-logo,
#krds-footer .krds-identifier .logo { background: none; width: auto; height: auto; }
#krds-header .header-branding .logo a { color: var(--nlsc-primary); text-decoration: none; }
.logo-text { font-size: var(--krds-pc-font-size-heading-medium); font-weight: var(--krds-font-weight-bold); }
#krds-footer .f-logo .logo-text,
#krds-footer .krds-identifier .logo .logo-text { font-size: var(--krds-pc-font-size-heading-xsmall); }
#krds-footer .f-logo .logo-text { color: var(--nlsc-on-primary); }

/* 푸터 — 남색 배경, 텍스트 흰색(대비 14:1). KRDS 원 선택자 특이성(#id + 클래스 3)에 맞춰야 이긴다 (TST-003).
   .krds-identifier 는 흰 카드라 내부 텍스트는 기본색 유지. */
#krds-footer { background: var(--nlsc-primary); }
#krds-footer .f-menu a,
#krds-footer .f-btm .f-btm-text .f-copy,
/* f-info(주소·대표전화·팩스) — WO-016 에서 출력되기 시작. 기본색(검정)이 남색 위 저대비 (TST-016 결함 수정) */
#krds-footer .f-cnt .f-info,
#krds-footer .f-cnt .f-info .info-addr,
#krds-footer .f-cnt .f-info .info-cs li,
#krds-footer .f-cnt .f-link .link-go .krds-btn.text { color: var(--nlsc-on-primary); }
#krds-footer .f-menu a.point { color: var(--nlsc-on-primary); font-weight: var(--krds-font-weight-bold); }
/* svg-icon 은 background-image 라 color 가 안 먹는다 → 남색 위에서 흰색으로 (DES-003 D7) */
#krds-footer .f-cnt .svg-icon { filter: brightness(0) invert(1); }

/* 골드 배경 버튼은 반드시 남색 글자 */
.krds-btn.accent {
	background: var(--nlsc-accent);
	color: var(--nlsc-on-accent);
	border-color: var(--nlsc-accent);
}

/*
   골드는 배경/포인트로만 쓴다. 텍스트 색으로 쓰면 흰 배경 대비 2.25:1 로 미달한다.
   텍스트 강조가 필요하면 남색(--nlsc-primary)을 쓴다.
*/
.txt-accent { color: var(--nlsc-primary); }

/* =====================================================================
   공통 유틸리티

   ⚠️ 아래 클래스들은 KRDS 에 없다. 우리 화면이 쓰고 있는데 정의가 없어
      스타일이 전혀 적용되지 않고 있었다(WO-005 Phase 1 에서 발견).

      KRDS 에 있는 것은 절대 여기서 다시 정의하지 않는다 —
      form-group / form-tit / form-conts / form-hint / krds-form-check /
      krds-check-area / krds-input / krds-form-select / krds-btn /
      krds-table-wrap / tbl / krds-pagination / sr-only / btn-wrap 은 전부 KRDS 것이다.
      화면에서 그 이름을 쓰면 된다. (CLAUDE.md §4.3 — 컴포넌트를 발명하지 않는다)
   ===================================================================== */

/* 여백 — 화면에서 인라인 style 을 쓰지 않기 위한 최소 유틸 (CLAUDE.md §4.1) */
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* 표 셀 왼쪽 정렬.
   ⚠️ txt-left 는 KRDS 에 없다(krds.min.css·카탈로그 0건). WO-003 부터 표 제목 셀에 써 왔지만
      정의가 없어 효과가 없었다 — scripts/check_krds_classes.py 가 잡아냈다 (DES-002 A9). */
.txt-left { text-align: left; }

/* 표 열 폭 유틸 — 인라인 style="width:N%" 대체 (CLAUDE.md §4-1, DES-002 A5). 사용자단·관리자단 공용 */
.w-6p  { width: 6%; }
.w-8p  { width: 8%; }
.w-9p  { width: 9%; }
.w-10p { width: 10%; }
.w-11p { width: 11%; }
.w-12p { width: 12%; }
.w-13p { width: 13%; }
.w-14p { width: 14%; }
.w-16p { width: 16%; }
.w-18p { width: 18%; }
.w-20p { width: 20%; }
.w-22p { width: 22%; }
.w-24p { width: 24%; }
.w-30p { width: 30%; }

/* 페이지 제목 영역 */
.page-title-wrap { margin-bottom: 8px; }
.page-title-wrap .h-tit {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--krds-light-color-text-bolder);
}
.page-desc {
	margin-top: 4px;
	color: var(--krds-light-color-text-subtle);
}

/* 필수 표시 — aria-hidden 이라 시각 표현 전용 */
.required { color: var(--krds-color-light-danger-50); }

/* 경고 텍스트 */
.txt-danger { color: var(--krds-color-light-danger-50); font-weight: 600; }

/* 목록 상단 도구줄 */
.list-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.total-count { color: var(--krds-light-color-text-subtle); }
.total-count strong { color: var(--krds-light-color-text-bolder); }

/* 검색 영역 — 여러 조건을 한 줄에 놓는다 */
.search-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}
.search-row .form-group { margin: 0; }
.search-row .search-submit { flex: 0 0 auto; }

/* 값만 보여 주는 항목 (입력이 아닌 정보) */
.form-static { padding: 6px 0; }

/* 건너뛰기 링크는 KRDS 가 #krds-skip-link 로 제공한다 — 여기서 다시 만들지 않는다.
   표 안 인라인 폼(.inline-form)은 admin.css 에 있다. */

/* 메인 배너 */
.banner-list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}
.banner-list img { max-height: 60px; }

/* 관리자 배너 목록 썸네일 */
.banner-thumb { max-width: 120px; max-height: 48px; }

/* 팝업 — 열린 것만 보인다. KRDS modal 은 기본이 숨김이다.
   ⚠️ KRDS 는 display 외에 z-index:-1 / visibility:hidden / opacity:0 으로도 숨긴다
   (.krds-modal.shown 이 display, .krds-modal.in 이 나머지를 복구하는 2단 구조).
   display 만 복구하면 '투명 무클릭 레이어'가 되어 팝업이 안 보인다 — TST-011 결함 수정. */
.krds-modal.cms-popup { display: none; }
.krds-modal.cms-popup.is-open {
	display: block;
	z-index: 1010;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
/* 배경 dim — KRDS 는 .modal-back.in 으로 켠다. is-open 체계에 맞춰 동등 복구 (TST-011). */
.krds-modal.cms-popup.is-open .modal-back {
	display: block;
	z-index: 1000;
	visibility: visible;
}
.cms-popup-frame {
	width: 100%;
	min-height: 320px;
	border: 0;
}

/* =====================================================================
   메인 화면
   ⚠️ KRDS 에 있는 것은 여기서 다시 정의하지 않는다 —
      krds-tab-area / tab / tab-conts / btn-tab / krds-info-list 는 전부 KRDS 것이다.
   ===================================================================== */

.main-vision { padding: 32px 0; }
.vision-lead {
	margin-top: 8px;
	color: var(--krds-light-color-text-subtle);
	font-size: 1.125rem;
}

/* 최신소식 목록 — 제목과 날짜를 양끝에 둔다 */
.news-list li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
}
.news-subject {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.news-date {
	flex: 0 0 auto;
	color: var(--krds-light-color-text-subtle);
	font-size: 0.875rem;
}
.empty-msg {
	padding: 24px 0;
	color: var(--krds-light-color-text-subtle);
	text-align: center;
}

/* 주요 서비스 바로가기 */
.shortcut-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
}
.shortcut-list a {
	display: inline-block;
	padding: 12px 20px;
	border: 1px solid var(--krds-color-light-secondary-10);
	border-radius: 8px;
}

/* =====================================================================
   게시판·페이지·사이트맵 — 사용자단 커스텀 컨테이너 (DES-003 C 규칙, 토큰만)
   ===================================================================== */

/* 갤러리 카드 썸네일 슬롯 — 공식 structured_list 에 슬롯이 없어 card-top 안에 둔다 (D2).
   card-top 이 flex 라 width:100% 가 없으면 콘텐츠 크기로 줄어든다 (TST-003 B4) */
.card-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--krds-radius-medium2);
	background: var(--krds-light-color-surface-gray-subtler);
}
.card-thumb .thumb-image { width: 100%; height: 100%; object-fit: cover; }
/* 영상 글 배지 — 썸네일 위에 겹친다 (WO-019 · DES-006 §3.6) */
.card-thumb .thumb-badge {
	position: absolute;
	top: var(--krds-gap-3);
	left: var(--krds-gap-3);
	z-index: 1;
}

/* 영상 임베드 플레이어 — 상세 본문 위, 16:9 반응형. src 는 서버 템플릿(VideoEmbed)만 만든다 (WO-019) */
.video-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--krds-radius-medium2);
	background: var(--krds-light-color-surface-gray-subtler);
}
.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-link { display: flex; justify-content: flex-end; }
.thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--krds-light-color-text-subtle);
	font-size: var(--krds-pc-font-size-body-small);
}

/* 본문 컨테이너 — 콘텐츠 페이지(레이아웃 4종은 data-layout 속성만 다르다)와 게시글 상세가 공유 */
.page-content { max-width: 960px; margin: 0 auto; }
.page-content[data-layout="map"] .map-frame { width: 100%; min-height: 360px; border: 0; }

/* 검색 패널 — 관리자단과 같은 규칙. KRDS .form-group 은 width:100% 라 여기서만 폭을 되돌린다 */
.search-panel {
	background: var(--krds-light-color-surface-white);
	border: 1px solid var(--krds-light-color-divider-gray-light);
	border-radius: var(--krds-radius-medium2);
	padding: 16px 20px;
}
.search-panel .search-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.search-panel .form-group { width: auto; margin: 0; }
.search-panel .form-conts { width: auto; }
.search-panel .krds-input { width: 220px; }
.search-panel .search-submit { display: flex; gap: 4px; margin-left: auto; }

/* 사이트맵 */
.sitemap-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.h-tit.sm { font-size: var(--krds-pc-font-size-heading-xsmall); }

@media (max-width: 768px) {
	.search-panel .form-group,
	.search-panel .form-conts,
	.search-panel .krds-input { width: 100%; }
	.search-panel .search-submit { margin-left: 0; }
}