@charset "utf-8";

/* ============================================================
   지방수사청 메인 전용 오버라이드 (local/main.html 에서만 로드)
   로드 순서 : default.css → content.css → main.css → popup.css → 이 파일

   규칙
   1. 모든 규칙은 반드시 `.local` 스코프로 시작한다 — 중수청(markup/)에 영향 차단.
   2. 모양이 같은 블록은 main.css 클래스를 그대로 재사용하고 여기 쓰지 않는다.
   3. 지방청에만 있는 새 섹션은 `local-` 프리픽스 클래스로 여기에만 작성한다.
   4. markup/resource/www/css/* (공통)는 지방청 작업에서 수정 금지 — 필요하면 담당자에게 요청.
   ============================================================ */

/********** 청별 로고 (기본 = 서울. 청별 6부 생성 시 로고 파일·기관명 치환) **********/
.local #krds-header .header-container .logo { width: 28.2rem; } /* 신규 지방청 로고 282x48 */
.local #krds-header .header-container .logo a { background-image: url(/resource/local/img/logo-seoul-7999cd0cfa299be5f21edf6c33c1deb6.svg); }
.local #krds-footer .f-logo { width: 28.2rem; background-image: url(/resource/local/img/logo-seoul-7999cd0cfa299be5f21edf6c33c1deb6.svg); }

/********** 메인비주얼 — 카피 두 줄 굵게 + 포인트 대시 **********/
.local .main-vi-tit { position: relative; padding-top: 2.8rem; font-weight: 700; }
.local .main-vi-tit::before { content: ""; position: absolute; top: 0; left: .2rem; width: 2.9rem; height: .3rem; border-radius: .2rem; background-color: #f44114; }

/********** 안내 + 알림소식 통합 섹션 **********/
/* 배경 — 중수청 사진 배경 대신 시안의 그라데이션 5겹(모서리 틴트 3 + 좌상단 블롭 2)을 CSS 로 재현 */
.local .sec02 { background: linear-gradient(197deg, rgba(184, 209, 255, .6) 0%, rgba(255, 255, 255, 0) 90%) -27px 71px / 228px 356px no-repeat, linear-gradient(230deg, rgba(184, 209, 255, .3) 5%, rgba(255, 255, 255, 0) 103%) 126px -41px / 188px 289px no-repeat, linear-gradient(-42deg, #ffe7e6 0%, rgba(255, 255, 255, 0) 17%), linear-gradient(257deg, #e6efff 5%, rgba(255, 255, 255, 0) 22%), linear-gradient(-57deg, rgba(255, 255, 255, 0) 60%, #dbe7ff 86%) #fff; }
/* SCI 워터마크는 지방청 시안에 없음 */
.local .sec02::before { content: none; }
.local .local-about-flex { display: flex; gap: 4rem; }
.local .about-col { display: flex; flex-direction: column; gap: 2.4rem; flex: 0 0 58rem; min-width: 0; }

/* 안내 카드 — photo-card 변형 : 세로 네이비 그라데이션 + 상단 텍스트 + 좌하단 버튼 */
.local .photo-card { display: flex; flex-direction: column; flex: 1; min-height: 45rem; border-radius: 12px; }
.local .photo-card .img-wrap img { object-position: center bottom; }
/* 시안의 네이비 그라데이션은 사진 "뒤" 배경 — 사진 위에 보이는 오버레이는 검정 .7 세로 그라데이션 */
.local .photo-card .img-wrap::after { background: linear-gradient(180deg, rgba(0, 0, 0, .7) 27%, rgba(0, 0, 0, 0) 56%); }
.local .photo-card .txt-wrap { position: relative; left: auto; top: auto; padding: 4rem 4rem 0; }
.local .photo-card .txt-wrap .big-tit { display: block; margin-top: .8rem; font-weight: 700; font-size: 3.8rem; }
.local .photo-card .btn-detail { left: 4rem; right: auto; bottom: 4rem; color: #fff; background-color: rgba(0, 0, 0, .5); border: 0; }
.local .photo-card .btn-detail .svg-icon { background-color: #fff; }
.local .photo-card:hover .btn-detail { background-color: rgba(0, 0, 0, .7); }

/* 민원 바로가기 — go-card 변형 : 설명 없는 축소형, 가로 2단 */
.local .card-wrap { flex-direction: row; gap: 1.6rem; width: auto; }
.local .go-card { min-height: 0; gap: 1.2rem; padding: 1.6rem 2.4rem 1.6rem 1.4rem; border: 1px solid var(--krds-color-light-gray-30, #b1b8be); border-radius: 6px; box-shadow: none; }
.local .go-card:hover,
.local .go-card:focus { border-color: var(--krds-color-light-secondary-60, #063a74); }
.local .go-card .ico-box { width: 7rem; height: 7rem; margin: 0; transform: none; border-radius: 0; }
.local .go-card .ico-box img { width: 100%; }
.local .go-card .tit { font-size: 1.9rem; color: var(--krds-color-light-gray-90, #1e2124); }
.local .go-card .btn-go { width: 2.4rem; height: 2.4rem; border: 0; }
.local .go-card .btn-go .svg-icon { width: 2.4rem; height: 2.4rem; }
.local .go-card:hover .btn-go,
.local .go-card:focus .btn-go { background-color: transparent; }
.local .go-card:hover .btn-go .svg-icon,
.local .go-card:focus .btn-go .svg-icon { background-color: var(--gray-17); }

/* 알림소식 — KRDS 언더라인 탭 + 세로 카드 리스트 (sec03 다크밴드와 별개) */
.local .local-notice { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.local .local-notice .notice-head { display: flex; align-items: center; justify-content: space-between; padding: .4rem 0 1.2rem; }
.local .local-notice .notice-tab { display: flex; gap: .8rem; }
.local .local-notice .notice-tab button { display: flex; align-items: center; justify-content: center; min-width: 5.6rem; height: 4rem; padding: 0 .4rem; border-bottom: 3px solid transparent; font-weight: 700; font-size: 1.7rem; color: var(--krds-color-light-gray-70, #464c53); }
.local .local-notice .notice-tab li.on button { color: var(--krds-color-light-primary-50, #256ef4); border-bottom-color: var(--krds-color-light-primary-50, #256ef4); }
.local .local-notice .btn-more { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background-color: #fff; border-radius: 50%; }
.local .local-notice .btn-more .svg-icon { width: 2.4rem; height: 2.4rem; }
.local .local-notice .notice-panel { display: none; }
.local .local-notice .notice-panel.on { display: block; }
.local .notice-list { display: flex; flex-direction: column; gap: 1.6rem; }
.local .notice-item { display: flex; flex-direction: column; gap: 1.2rem; min-height: 20rem; padding: 2rem; background-color: #fff; border: 1px solid var(--krds-color-light-gray-20, #cdd1d5); }
.local .notice-item:hover,
.local .notice-item:focus { border-color: var(--krds-color-light-primary-50, #256ef4); }
.local .notice-item .cate { align-self: flex-start; display: inline-flex; align-items: center; height: 2.4rem; padding: 0 .8rem; background-color: var(--krds-color-light-primary-5, #ecf2fe); border-radius: 4px; font-size: 15px; color: var(--krds-color-light-primary-60, #0b50d0); }
.local .notice-item .tit { align-self: flex-start; font-weight: 700; font-size: 1.9rem; line-height: 1.5; color: var(--krds-color-light-gray-90, #1e2124); }
.local .notice-item:hover .tit,
.local .notice-item:focus .tit { background-color: var(--krds-color-light-primary-10, #d8e5fd); text-decoration: underline; }
.local .notice-item .desc { font-size: 1.7rem; line-height: 1.5; color: var(--krds-color-light-gray-70, #464c53); }
.local .notice-item .date { margin-top: auto; font-size: 1.7rem; color: var(--krds-color-light-gray-70, #464c53); }

@media only screen and (max-width: 1200px) {
	.local .local-about-flex { flex-direction: column; }
	.local .about-col { flex: none; width: 100%; }
	.local .photo-card { min-height: 40rem; }
}
@media only screen and (max-width: 767px) {
	.local .photo-card { min-height: 32rem; }
	.local .photo-card .txt-wrap { padding: 2.4rem 2.4rem 0; }
	.local .photo-card .txt-wrap .big-tit { font-size: 2.8rem; }
	.local .photo-card .btn-detail { left: 2.4rem; bottom: 2.4rem; }
	.local .card-wrap { flex-direction: column; }
	.local .local-notice .notice-head { flex-wrap: wrap; gap: .8rem; }
	.local .notice-item { min-height: 0; }
}