/* krds-gov-demo-common.css — KRDS 종합기관 홈페이지 데모(ProjectNo 32) 데모 전용 스타일 (WO-202).
   레이아웃 head 가 KRDS 공식 CSS(krds/css/*) 이후 로드.
   KRDS 는 컴포넌트(krds-btn/badge/table-wrap/pagination/step-wrap/accordion/tab-area/input/svg-icon 등)만 제공하고
   그리드·카드·섹션제목·게시판뷰·간격유틸 같은 프레젠테이션 유틸은 배포 CSS에 없음 → 데모가 쓰는 그 유틸들만 여기서 정의한다.
   (공식 컴포넌트 클래스는 재정의하지 않는다.) */

:root {
    --demo-accent: var(--krds-color-light-primary-50, #256ef4);
    --demo-line: #dfe1e5;
    --demo-ink: #1f2733;
    --demo-muted: #5b6675;
}

/* 세로 스크롤바 공간 항상 예약 — select 드롭다운 등 오버레이 열릴 때 스크롤바 토글로
   콘텐츠가 좌우로 흔들리는 현상 방지(공식 예제와 동일 동작). */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* 본문과 푸터(foot-quick) 사이 여백 — 너무 붙지 않도록. */
#krds-footer { margin-top: 80px; }

/* 나의 GOV 드롭다운 폭·줄바꿈 보정 — 공식 my-drop 폭 스타일이 #krds-header .header-container 스코프인데
   우리 헤더는 .inner 라 미적용 → 드롭다운이 좁아 텍스트가 줄바꿈되던 것. 폭 확보 + nowrap. */
#krds-header .my-drop .drop-menu { min-width: 268px; }
#krds-header .my-drop .drop-menu .my-name,
#krds-header .my-drop .drop-menu .my-time dt,
#krds-header .my-drop .drop-menu .drop-list .item-link,
#krds-header .my-drop .drop-menu .drop-bottom .krds-btn { white-space: nowrap; }
#krds-header .my-drop .drop-menu .my-time dd { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#krds-header .my-drop .drop-menu .drop-list .item-link { display: block; width: 100%; text-align: left; }
/* 상단 유틸 버튼 간격 + 유틸행↔액션행 간격. */
#krds-header .header-utility .utility-list { gap: 6px; }
#krds-header .header-utility { margin-bottom: 4px; }
/* 언어/지원 드롭다운도 줄바꿈 방지. */
#krds-header .header-utility .drop-menu .item-link { white-space: nowrap; }

/* foot-quick 전체화면 모달의 소속기관 링크 그리드(공식 pop-foot-links 는 배포 CSS 미포함). */
.pop-foot-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 28px; list-style: none; padding: 0; margin: 0; }
.pop-foot-links li a { display: inline-block; font-size: 17px; color: var(--demo-ink); position: relative; padding-left: 14px; text-decoration: none; }
.pop-foot-links li a::before { content: "·"; position: absolute; left: 2px; }
.pop-foot-links li a:hover { text-decoration: underline; }
@media (max-width: 768px) { .pop-foot-links { grid-template-columns: repeat(2, 1fr); } }

/* ── 그리드 ── */
.row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.row > [class*="col"] { padding: 0 8px; box-sizing: border-box; min-width: 0; }
.col { flex: 1 1 0; }
.col--2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col--3 { flex: 0 0 25%; max-width: 25%; }
.col--4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col--6 { flex: 0 0 50%; max-width: 50%; }
@media (max-width: 768px) { .col, [class*="col--"] { flex: 0 0 100%; max-width: 100%; } }

/* ── 카드 (KRDS 미제공 → 데모 정의) ── */
.krds-card { display: block; height: 100%; border: 1px solid var(--demo-line); border-radius: 12px; background: #fff; transition: box-shadow .15s, border-color .15s; }
a.krds-card { text-decoration: none; color: inherit; }
a.krds-card:hover { border-color: var(--demo-accent); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.krds-card .card-body { padding: 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.krds-card .card-body .svg-icon { width: 32px; height: 32px; background-color: var(--demo-accent); }
.krds-card .card-body strong { font-size: 17px; color: var(--demo-ink); }
.krds-card .card-body p { font-size: 14px; color: var(--demo-muted); margin: 0; }
.krds-card .krds-badge { margin-bottom: 2px; }

/* ── 섹션 ── */
.home-section { margin-top: 8px; }
.home-section + .home-section { margin-top: 40px; }

/* ── 페이지 제목 ── */
.page-head { margin: 8px 0 20px; padding-bottom: 14px; border-bottom: 2px solid var(--demo-ink); }
.page-tit { font-size: 26px; font-weight: 700; color: var(--demo-ink); margin: 0; }
.page-desc { font-size: 15px; color: var(--demo-muted); margin: 8px 0 0; }
.h3-tit { font-size: 20px; font-weight: 700; color: var(--demo-ink); margin: 0 0 10px; }
.h4-tit { font-size: 17px; font-weight: 700; color: var(--demo-ink); margin: 0 0 8px; }

/* ── 폼 보조 ── */
.required { color: #d8392b; }
.form-hint { font-size: 13px; color: var(--demo-muted); margin: 6px 0 0; }

/* ── 검색 영역 ── */
.krds-search-area { background: #f5f7fa; border: 1px solid var(--demo-line); border-radius: 10px; padding: 16px; }
.krds-search-area .search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.krds-search-area .search-form .krds-input { flex: 1; min-width: 180px; }

/* ── 게시판 상세 ── */
.board-view { border-top: 2px solid var(--demo-ink); }
.board-view .view-head { padding: 18px 4px; border-bottom: 1px solid var(--demo-line); }
.board-view .view-info { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--demo-muted); }
.board-view .view-body { padding: 20px 4px; }
.board-view .view-file { padding: 14px 4px; border-top: 1px solid var(--demo-line); }
.board-view .view-nav { border-top: 1px solid var(--demo-line); padding-top: 12px; }

/* ── 알림 ── */
.critical-alerts { border: 1px solid #b3d4fc; background: #eef5ff; border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.critical-alerts p { margin: 0; }

/* ── 정보 리스트: 제목-날짜 분리 (krds-info-list 는 공식이나 title/date 정렬은 미제공) ── */
.krds-info-list li > a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.krds-info-list .title { flex: 1; }
.krds-info-list .date { color: var(--demo-muted); font-size: 13px; white-space: nowrap; }
.info-list li { padding: 8px 0; border-bottom: 1px solid var(--demo-line); }

/* ── 지도 플레이스홀더 ── */
.map-area.demo-map { background: #E6E8EA; height: 280px; display: flex; align-items: center; justify-content: center; color: #7d8590; }

/* ── 사이트맵 ── */
.krds-sitemap .h4-tit { border-bottom: 1px solid var(--demo-line); padding-bottom: 8px; }

/* ── 폼 버튼 정렬 ── */
.form-btn-wrap { display: flex; gap: 8px; justify-content: center; }
.form-btn-wrap.text-center { justify-content: center; }

/* [WO-212] 구 hand-authored 신청목록(sample_appl 재현) 검색/필터 오버라이드는 제거됨.
   공식 서비스 패턴 예제 32종이 pattern/output.css 로 .search-top-box/.filter-form/.filter-chip/
   .search-list-top/.w-sort-btn 을 정식 소유 → 데모 오버라이드가 오히려 레이아웃을 틀어지게 해(라벨 밀림 등)
   삭제. 데모 페이지엔 해당 클래스 사용처 없음(구 ApplyList 는 UI_PAT_* 로 대체). */

/* ── 간격/정렬 유틸 (KRDS 미제공분) ── */
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.text-left { text-align: left; }
.text-right { text-align: right; }