/* =====================================================================
   shell.css — 사용자단 셸·화면 공통 구조 (사이트 중립 — WO-027)

   ⚠️ 브랜드(색·토큰 오버라이드)는 theme-{siteKey}.css 가 담당한다. 여기는
      모든 사이트가 공유하는 구조·유틸만 둔다. 원래 theme-nlsc.css 에 섞여
      있던 것을 분리했다 — 새 사이트에서 테마만 바꿔도 화면 구조가 유지되도록.
      (krdsdemo 시범에서 사이트맵·검색 패널·팝업 구조가 통째로 빠졌던 원인)
   ===================================================================== */

/* 로고 — 이미지 없는 사이트는 사이트명 텍스트가 로고다. KRDS 기본 샘플 로고 배경을 끈다
   (안 끄면 기본 KRDS 로고 이미지 위에 텍스트가 겹친다 — krdsdemo 실측) */
#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 { width: auto; }   /* KRDS 고정 폭(로고 이미지 기준)이 텍스트 로고를 줄바꿈시킨다 */
.logo-text { font-size: var(--krds-pc-font-size-heading-medium); font-weight: var(--krds-font-weight-bold); white-space: nowrap; }
#krds-footer .f-logo .logo-text,
#krds-footer .krds-identifier .logo .logo-text { font-size: var(--krds-pc-font-size-heading-xsmall); }

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

   ⚠️ 아래 클래스들은 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; }
}