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

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

/* hidden 속성은 KRDS 의 display:inline-flex(.krds-btn 등)에 진다 — 표준 리셋 (WO-007: shell.js 가 자동 제출 버튼을 hidden 으로 숨긴다) */
[hidden] { display: none !important; }

/* 로고 — 이미지 없는 사이트는 사이트명 텍스트가 로고다. 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); }
/* 모바일 — 텍스트 로고가 PC 크기·nowrap 이면 헤더가 409px 를 요구해 375 폭에서 화면 밖으로 넘친다 (TST-001 S9) */
@media (max-width: 1023px) {
	#krds-header .header-branding .logo { min-width: 0; }
	#krds-header .header-branding .logo .logo-text { font-size: var(--krds-mobile-font-size-heading-small); white-space: normal; word-break: keep-all; }
	.page-title-wrap .h-tit { font-size: var(--krds-mobile-font-size-heading-large); }
}

/* 브레드크럼 — 헤더·본문(.inner)과 좌우를 맞춘다. KRDS 기본은 전폭이라 넓은 화면에서 왼쪽 끝에 붙는다 (TST-001 S5) */
#breadcrumb.krds-breadcrumb-wrap { box-sizing: border-box; width: 100%; max-width: var(--krds-contents-wrap-size); margin-left: auto; margin-right: auto; padding-left: var(--krds-contents-padding-x); padding-right: var(--krds-contents-padding-x); }

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

   ⚠️ 아래 클래스들은 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: var(--krds-pc-font-size-heading-large);   /* rem 금지 — KRDS 는 html 을 62.5% 로 둬 1.5rem 이 15px 이 된다 */
	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; }
/* LNB 없는 화면(1단 링크 메뉴의 페이지, 검색, 로그인, 오류, 자가진단)은 제목·폼·버튼도 본문과 같은 960 열에 —
   본문만 가운데면 제목이 왼쪽에 남아 "밀린 것"처럼 보인다 (TST-003 4-F 1) */
main#container > .inner:not(.sub-layout) > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.page-content[data-layout="map"] .map-frame { width: 100%; min-height: 360px; border: 0; }

/* 에디터 본문 요소 — 저장 시 EgovHtmlSanitizer 가 class 를 지우므로 본문은 클래스 없는 요소로 온다.
   KRDS 는 목록·표의 기본 모양을 지우고 컴포넌트 클래스에만 모양을 주므로, 그대로 두면 표에 선이 없고 목록에 글머리가 없다.
   직계 자식이면서 class 가 없는 요소만 잡는다 — KRDS 컴포넌트 마크업을 담은 본문(WebZan 이식분)은 건드리지 않는다. */
.page-content > :is(p, ul, ol, table, blockquote, h3, h4, h5):not([class]) { margin: 0 0 var(--krds-gap-5); }
.page-content > :is(h3, h4, h5):not([class]) { margin-top: var(--krds-gap-9); color: var(--krds-light-color-text-bolder); }
.page-content > :is(h3, h4, h5):not([class]):first-child { margin-top: 0; }
.page-content > h3:not([class]) { font-size: var(--krds-pc-font-size-heading-small); }
.page-content > h4:not([class]) { font-size: var(--krds-pc-font-size-heading-xsmall); }
.page-content > ul:not([class]),
.page-content > :is(ul, ol):not([class]) ul { padding-left: var(--krds-gap-6); list-style: disc; }
.page-content > ol:not([class]),
.page-content > :is(ul, ol):not([class]) ol { padding-left: var(--krds-gap-6); list-style: decimal; }
.page-content > :is(ul, ol):not([class]) li + li { margin-top: var(--krds-gap-2); }
.page-content > table:not([class]) { width: 100%; border-collapse: collapse; border-top: 2px solid var(--krds-light-color-border-gray-darker); }
.page-content > table:not([class]) caption { caption-side: top; padding-bottom: var(--krds-gap-2); text-align: left; color: var(--krds-light-color-text-subtle); font-size: var(--krds-pc-font-size-body-small); }
.page-content > table:not([class]) :is(th, td) { padding: var(--krds-padding-4) var(--krds-padding-5); border-bottom: 1px solid var(--krds-light-color-divider-gray-light); text-align: left; vertical-align: top; }
.page-content > table:not([class]) thead th { background: var(--krds-light-color-surface-gray-subtler); border-bottom-color: var(--krds-light-color-divider-gray); }
.page-content > blockquote:not([class]) { padding-left: var(--krds-gap-5); border-left: 4px solid var(--krds-light-color-divider-gray); color: var(--krds-light-color-text-subtle); }
.page-content > :not([class]) a:not([class]) { color: var(--krds-light-color-link-default); text-decoration: underline; text-underline-offset: var(--krds-font-underline-offset); }
.page-content > :not([class]) a:not([class]):hover { color: var(--krds-light-color-link-hover); }
@media (max-width: 768px) {
	.page-content > h3:not([class]) { font-size: var(--krds-mobile-font-size-heading-small); }
	.page-content > h4:not([class]) { font-size: var(--krds-mobile-font-size-heading-xsmall); }
	.page-content > table:not([class]) :is(th, td) { padding: var(--krds-padding-4); }
}

/* 검색 패널 — 관리자단과 같은 규칙. 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; }
}

/* 푸터 관련사이트 모달 (17_footer_shell) — KRDS 1.1.0 의 data-type=full 은 내부 패딩이 0 이라
   시안(가운데 정렬·큰 제목·불릿 4열·우상단 닫기) 레이아웃을 여기서 정의한다 */
.krds-modal[data-type="full"] .modal-content { max-width: 1380px; margin: 0 auto; padding: 96px 24px 64px; position: relative; }
.krds-modal[data-type="full"] .modal-title { font-size: var(--krds-pc-font-size-heading-large); font-weight: var(--krds-font-weight-bold); }
.krds-modal[data-type="full"] .modal-conts { margin-top: 40px; }
.krds-modal[data-type="full"] .btn-close { position: absolute; top: 40px; right: 24px; }
.pop-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; margin: 0; padding: 0; list-style: none; }
.pop-foot-links li { position: relative; padding-left: 14px; }
.pop-foot-links li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: var(--krds-light-color-text-basic); }
.pop-foot-links a { color: var(--krds-light-color-text-basic); text-decoration: none; font-size: var(--krds-pc-font-size-body-large); }
.pop-foot-links a:hover { color: var(--krds-light-color-action-primary-hover); text-decoration: underline; }
@media (max-width: 1024px) { .pop-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pop-foot-links { grid-template-columns: minmax(0, 1fr); } }

/* 푸터 연락 정보 목록(f-cs) — KRDS 번들에 dt/dd 세부 정의가 없어 보강 (남색 푸터 대비는 테마가 담당) */
#krds-footer .f-cs { display: flex; flex-wrap: wrap; gap: 12px 48px; margin: 16px 0 0; padding: 0; list-style: none; }
#krds-footer .f-cs dl { margin: 0; }
#krds-footer .f-cs .info-tit { font-size: var(--krds-pc-font-size-body-small); margin-bottom: 4px; }
#krds-footer .f-cs .info-conts { margin: 0; font-size: var(--krds-pc-font-size-body-medium); }

/* 푸터 KRDS 출처 표기(f-notice, WO-028 E4) — f-copy 아래 한 문장. 링크만 밑줄 */
#krds-footer .f-btm .f-btm-text { flex-wrap: wrap; }   /* KRDS 는 row·nowrap — 출처 문안이 셋째 줄로 내려오게 */
#krds-footer .f-btm .f-btm-text .f-notice { flex: 0 0 100%; width: 100%; margin: 0; font-size: var(--krds-pc-font-size-body-small); line-height: var(--krds-line-height-body-small, 1.5); color: var(--krds-light-color-text-subtle); }
#krds-footer .f-btm .f-btm-text .f-notice a { text-decoration: underline; color: inherit; }

/* 전체메뉴 모달 — 사이트맵 그리드 재사용 + 페이지 폴백 링크 */
#popSitemap .sitemap-wrap { margin-top: 8px; }
#popSitemap .h-tit.sm { margin-bottom: 12px; }
.sitemap-page-link { margin-top: 40px; }

/* 언어 선택 화면 (U-00 · DES-001 §7.1 · WO-003 · 정답지 PUB-001). 본문은 base.tag 의 .inner 안이라 폭만 제한한다 */
.lang-select {
	margin: 0 auto;
	max-width: 640px;
	padding-top: var(--krds-gap-10);
	padding-bottom: var(--krds-gap-10);
}
.lang-select-tit {
	display: flex;
	flex-direction: column;
	gap: var(--krds-gap-2);
	margin-bottom: var(--krds-gap-8);
	text-align: center;
	font-weight: var(--krds-font-weight-bold);
	color: var(--krds-light-color-text-bolder);
}
.lang-select-tit [lang="ko"] { font-size: var(--krds-pc-font-size-heading-large); }
.lang-select-tit [lang="en"] { font-size: var(--krds-pc-font-size-heading-xsmall); color: var(--krds-light-color-text-subtle); font-weight: var(--krds-font-weight-regular); }

.lang-select-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--krds-gap-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.lang-select-list .krds-btn { width: 100%; min-height: 56px; }

@media (max-width: 767px) {
	.lang-select { padding-top: var(--krds-gap-8); padding-bottom: var(--krds-gap-8); }
	.lang-select-tit [lang="ko"] { font-size: var(--krds-mobile-font-size-heading-large); }
	.lang-select-tit [lang="en"] { font-size: var(--krds-mobile-font-size-heading-xsmall); }
	.lang-select-list { grid-template-columns: minmax(0, 1fr); }
}

/* 모바일 전체메뉴의 언어 목록 (WO-003) — KRDS gnb-utils 는 항목 2~3개 한 줄 기준이라 언어 6개가 잘린다 → 줄바꿈 */
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-utils .utility-list { flex-wrap: wrap; row-gap: var(--krds-gap-2); }
.krds-main-menu-mobile .gnb-wrap .gnb-header .gnb-utils .utility-list > li > strong { font-weight: var(--krds-font-weight-bold); }

/* =====================================================================
   언어별 글꼴 (WO-006 · DES-001 §7.3) — 화면을 복제하지 않고 :lang() 으로만 바꾼다.
   :lang() 은 lang 속성을 물려받은 모든 요소에 맞으므로 선택자 하나로 그 언어 화면 전체(입력·버튼 포함)에 적용된다.
   외국어 사이트 안에서 한국어로 대체된 문구는 <span lang="ko"> 라 :lang(ko) 로 돌아온다(cms:message 태그).
   · 크메르·라오: 자체 글꼴(Noto Sans Khmer / Lao). 시스템 글꼴 유무가 기기마다 다르다(TST-002 H1-5)
   · 베트남어·몽골어: Noto Sans — Pretendard GOV 서브셋에 베트남어 성조 글자·키릴 일부가 없어 단어 안에서 글꼴이 섞인다
   · 타갈로그는 기본 라틴이라 Pretendard GOV 그대로
   font-size 는 바꾸지 않는다 — :lang() 이 요소마다 맞아 em 단위가 중첩 배가된다.
   ===================================================================== */
:lang(km) { font-family: "Noto Sans Khmer", "Pretendard GOV", sans-serif; }
:lang(lo) { font-family: "Noto Sans Lao", "Pretendard GOV", sans-serif; }
:lang(vi),
:lang(mn) { font-family: "Noto Sans", "Pretendard GOV", sans-serif; }
:lang(ko) { font-family: var(--krds-font-family-base); }

/* =====================================================================
   자가진단 (U-30 · DES-003 · WO-008 — PUB-002 의 PUB-diag.css 를 옮김). 토큰만 쓴다.
   legend 는 KRDS 리셋이 sr-only 로 숨긴다 → 보이는 제목은 .form-tit (KRDS 폼 규약).
   ===================================================================== */
.diag-item { margin-top: var(--krds-gap-6); padding-top: var(--krds-gap-6); border-top: 1px solid var(--krds-light-color-divider-gray-light); }
.diag-item:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.diag-item .form-tit { margin-bottom: var(--krds-gap-3); font-size: var(--krds-pc-font-size-body-large); font-weight: var(--krds-font-weight-bold); color: var(--krds-light-color-text-bolder); }
.diag-item .form-tit .krds-badge { margin-right: var(--krds-gap-2); vertical-align: middle; }
.diag-item .form-hint { margin-top: var(--krds-gap-2); }
.diag-item[aria-invalid="true"] { border-left: 4px solid var(--krds-light-color-border-danger); padding-left: var(--krds-gap-4); }
/* 결과 수준 블록 — 색(배경·테두리) + 글자 + 아이콘 셋으로 전달 (색만으로 구분하지 않는다) */
.diag-level { display: flex; gap: var(--krds-gap-5); align-items: flex-start; margin-top: var(--krds-gap-5); padding: var(--krds-gap-6); border: 1px solid var(--krds-light-color-border-gray-light); border-radius: var(--krds-radius-medium1); background: var(--krds-light-color-surface-gray-subtler); }
.diag-level img { flex: 0 0 64px; width: 64px; height: 64px; }
.diag-level-tit { margin: 0 0 var(--krds-gap-2); font-size: var(--krds-pc-font-size-heading-medium); font-weight: var(--krds-font-weight-bold); }
.diag-level-desc { margin: 0; font-size: var(--krds-pc-font-size-body-large); }
.diag-level.level-high { background: var(--krds-light-color-surface-danger-subtler); border-color: var(--krds-light-color-border-danger); }
.diag-level.level-high .diag-level-tit { color: var(--krds-light-color-text-danger); }
.diag-level.level-warn { background: var(--krds-light-color-surface-warning-subtler); border-color: var(--krds-light-color-border-warning); }
.diag-level.level-warn .diag-level-tit { color: var(--krds-light-color-text-warning); }
.diag-level.level-low { background: var(--krds-light-color-surface-success-subtler); border-color: var(--krds-light-color-border-success); }
.diag-level.level-low .diag-level-tit { color: var(--krds-light-color-text-success); }
.diag-areas li { display: flex; justify-content: space-between; align-items: center; gap: var(--krds-gap-3); }
@media (max-width: 767px) {
	.diag-item .form-tit { font-size: var(--krds-mobile-font-size-body-large); }
	/* TST-004 4-F 1: 결과 버튼은 모바일에서 세로 전폭 */
	#diag-result .btn-wrap { flex-direction: column; }
	#diag-result .btn-wrap .krds-btn { width: 100%; }
	.diag-level { flex-direction: column; }
	.diag-level-tit { font-size: var(--krds-mobile-font-size-heading-medium); }
	.diag-level-desc { font-size: var(--krds-mobile-font-size-body-large); }
}

/* ==========================================================================
   신고·상담 (U-41 ~ 48 · DES-002 §7 · WO-011 — PUB-report.css 를 옮김). 토큰만 쓴다.
   ========================================================================== */
.report-no { display: block; margin: var(--krds-gap-4) 0; font-size: var(--krds-pc-font-size-display-small); font-weight: var(--krds-font-weight-bold); letter-spacing: var(--krds-typo-letter-spacing-1); color: var(--krds-light-color-text-bolder); user-select: all; }
.report-urgent { margin-bottom: var(--krds-gap-6); }
.report-answer { white-space: pre-wrap; }
.masked { letter-spacing: var(--krds-typo-letter-spacing-1); }
.form-hint.is-error span { color: var(--krds-light-color-text-danger); }
@media (max-width: 767px) {
	.report-steps .btn-wrap { flex-direction: column; align-items: stretch; }
	.report-steps .btn-wrap .krds-btn { width: 100%; }
	.report-steps .btn-wrap .form-hint { width: 100%; }
}
@media (max-width: 1023px) {
	.report-no { font-size: var(--krds-mobile-font-size-display-small); }
}