@charset "UTF-8";
/* 국정성과 start */
	.achi_gallery_div{
      width: 100%;
      margin: 2rem 0;
    }

	/* 갤러리 리스트 레이아웃 */
    .achi_gallery_div ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      grid-auto-rows: 1fr;
      gap: 2rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .achi_gallery_div li {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      /* 테두리를 더 진하게 하고 선명한 그림자 추가 */
      border: 1px solid #D8D8D8;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

      display: flex;
      flex-direction: column;
      min-height: 360px;
    }

    .achi_gallery_div li:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 30px rgba(0, 56, 99, 0.15); /* 강조 색상 그림자 */
      /* border-color: #003863; */
    }

	/* 이미지 영역 공통 레이아웃 */
    .achi_noImgDiv {
      position: relative;
      width: 100%;
      height: 200px; 
      background-color: #fff; 
      overflow: hidden;
      flex-shrink: 0;
      border-bottom: 1px solid #e9ecef;
    }
    
    /* 실제 이미지 제어: 비율에 따른 자동 분기 */
    .achi_noImgDiv img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
      transition: transform 0.5s ease;
    }
    
	/* 이미지 영역 공통 레이아웃 */
    .achi_thumbImg {
      position: relative;
      width: 100%;
      height: 200px; 
      background-color: #fff; 
      overflow: hidden;
      flex-shrink: 0;
      border-bottom: 1px solid #e9ecef;
    }
    
    /* 대표 성과 라벨 스타일 - 그라데이션 적용 */
    .achi_thumbImg .badge {
      position: absolute;
      top: 8px;
      left: 8px;
      z-index: 10;
      /* 현재 색상을 유지하며 그라데이션 적용 */
      background: linear-gradient(135deg, rgba(0, 56, 99,0.85) 0%, rgba(1, 102, 255, 0.75) 100%);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      gap: 5px;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .achi_thumbImg .badge img {
      width: 15px; 
      height: 15px;
      object-fit: contain;
      margin-top: 2px;
    }

    /* 배경 레이어: 확대 이미지 + 검은색 반투명 음영 */
    .achi_thumbImg::before {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-image: var(--bg-url);
      background-size: cover;
      background-position: center;
      transform: scale(2); 
      z-index: 1;
    }

    .achi_thumbImg::after {
      content: "";
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 2;
    }

    /* 실제 이미지 제어: 비율에 따른 자동 분기 */
    .achi_thumbImg img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 3;
      transition: transform 0.5s ease;
      
      /* [핵심] 가로 세로 비율에 따른 자동 처리 */
      /* 기본적으로 contain으로 설정하여 세로 이미지를 대응하지만, 
         가로 세로 비율(aspect-ratio)이 1보다 크면(가로형) cover로 꽉 채웁니다. */
      object-fit: contain;
    }
    
    .achi_thumbImg .is-landscape {
        /* 가로 이미지일 때는 배경을 가리고 영역을 강제로 꽉 채움 */
        object-fit: cover;
     }

    .gallery_list li:hover .achi_thumbImg img {
      transform: scale(1.05);
    }

    .achi_txt_area {
		padding: 0 0.8rem;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	.achi_txt_area strong {
		display: block;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.2;
		margin: 1.7rem 0.2rem 0.6rem;
		color: #1a1d20;
		min-height: 46px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.achi_txt_area .info_row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.9rem 0.2rem 0;
		margin-top: auto;
	}

	.achi_txt_area .date,
	.achi_txt_area .no {
		font-size: 14px;
		color: #495057;
		font-weight: 400;
		line-height: 1.0;
	}

	.achi_txt_area .no {
		font-size: 15px;
		font-weight: 700;
	}

	.achi_txt_area .info_row_bt {
		display: flex;
		flex-wrap: wrap;									
		align-items: flex-start;
		gap: 0px 5px;
		min-height: 32px;
		padding: 0.7rem 0 0.7rem;
		/* background-image: linear-gradient(to right, #666 25%, rgba(255, 255, 255, 0) 0%); */
		background-position: bottom;
		background-size: 4px 1px;
		background-repeat: repeat-x;	
		border-bottom: 0.5px dashed #b4b4b4;
	}

	.achi_txt_area .info_row_bt span {
		flex: 0 0 calc((100% - (28px * 2)) / 4); 	
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		color: #666;
		font-weight: 500;									
		line-height: 1.3;
		box-sizing: border-box; 
		white-space: nowrap; 
	}
	
	/* 버튼 그룹 */
	.achi_btn_group {
		display: flex;
		flex-wrap: wrap; 
		padding: 1.0rem 0.8rem;
		gap: 7px;									
		background-color: #fff;
		min-height: 97px; 
		box-sizing: border-box;
		flex-shrink: 0;
		margin-top: auto;
	}

	.achi_btn_group button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 5px 5px;
		font-size: 15px;
		font-weight: 600;
		border-radius: 8px;
		cursor: pointer;
		transition: all 0.2s ease;
		white-space: nowrap;
		background-color: #003863;
		color: var(--white);
		border: 0.5px solid #003863;
		/* background-color: var(--white);
		color: #494949;
		border: 0.5px solid #b4b4b4; */
		/* border: 0.5px dashed gray; */
		/* border: 0.5px solid #D8D8D8; */
		box-sizing: border-box; 
	}

	.achi_btn_group button:first-child:nth-last-child(1) {
		flex: 0 0 100%;
	}

	.achi_btn_group button:first-child:nth-last-child(2),
	.achi_btn_group button:first-child:nth-last-child(2) ~ button {
		flex: 0 0 calc((100% - 7px) / 2);
	}

	.achi_btn_group button:first-child:nth-last-child(3),
	.achi_btn_group button:first-child:nth-last-child(3) ~ button {
		flex: 0 0 calc((100% - (7px * 2)) / 3);
	}

	.achi_btn_group button:first-child:nth-last-child(4) {
		flex: 0 0 100%;
	}
	
	.achi_btn_group button:first-child:nth-last-child(4) ~ button {
		flex: 0 0 calc((100% - (7px * 2)) / 3);
	}

	.achi_btn_group button:first-child:nth-last-child(5),
	.achi_btn_group button:first-child:nth-last-child(5) + button {
		flex: 0 0 calc((100% - 7px) / 2);
	}
	
	.achi_btn_group button:first-child:nth-last-child(5) ~ button:nth-child(n+3) {
		flex: 0 0 calc((100% - (7px * 2)) / 3);
	}

	.achi_btn_group button:first-child:nth-last-child(6),
	.achi_btn_group button:first-child:nth-last-child(6) ~ button {
		flex: 0 0 calc((100% - (7px * 2)) / 3);
	}

    /* 활성화 상태의 버튼 호버 효과 */
    .achi_btn_group button:not(:disabled):hover {
      /* background-color: #003863;
      color: var(--white);
      border-color: #003863; */
      background-color: var(--white);
      color: black;
      border: 0.5px solid #D8D8D8;
    }

     /* 비활성화 상태 - 더 확실하게 어둡게 */
    .achi_btn_group button:disabled {
      background-color: #e9ecef;
      color: #adb5bd;
      border-color: #dee2e6;
      cursor: not-allowed;
      transform: none !important;
      box-shadow: none !important;
    }

    .achi_btn_group svg {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      stroke-width: 2.5; /* 아이콘 선 두께 강화 */
    }

    /* 반응형 */
    @media (max-width: 768px) {
      body { padding: 20px 15px; }
      .gallery_list ul { grid-template-columns: 1fr; }
      .gallery_list li { min-height: auto; }
      .achi_btn_group svg { display: none; }
      .achi_btn_group button { font-size: 13px; }
    }
    
    @media screen and (max-width:480px){
      	.btn_achievement_open {
	      font-size: 11px !important;
	    }
    }
    
    .achi_desc {
    	width: 80%;
    }
    
    .achi_desc > p{
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    
    /* 2. 버튼 영역 디자인 */
    .button_section {
      text-align: center;
      margin-top: 1rem;
      /* border-bottom: 1px solid #D8D8D8; */
    }

    .section_label {
      font-size: 14px;
      color: #1a1d20;
      margin-bottom: 15px;
      font-weight: 700;
      display: block;
    }

    .button_container {
      display: flex;
      /* justify-content: center; */
      gap: 12px;
      flex-wrap: wrap;
      padding-top: 5px;
    }

    .btn_achievement_open {
      background: #fff;
      border: 1px solid #D8D8D8;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 700;
      transition: all 0.2s;
      font-size: 16px;
    }
	
	/* 중앙 레이어 모달 */
    .achievement_layer_wrap {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; 
      height: 100%;
      z-index: 3000;
    }

    .achievement_layer_dim {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .achievement_layer_content {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;
      max-width: 750px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      /* 화면 높이에 따라 모달 높이 제한 */
      max-height: 80vh; 
    }

    .layer_header {
      padding: 20px 25px;
      border-bottom: 1px solid #e9ecef;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0; /* 헤더 크기 고정 */
    }

    .layer_header h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 800;
      color: #003863;
    }

    .btn_layer_close {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #333;
    }

    .layer_body {
      padding: 20px;
      /* 목록이 많아질 경우 자동 스크롤 생성 */
      overflow-y: auto; 
      background: #fff;
      flex-grow: 1;
    }

    /* 레이어 목록 아이템 스타일 */
    .achievement_list_item {
      padding: 15px 20px;
      margin-bottom: 10px;
      border-radius: 4px;
      background: #f9fafb;
      border: 1px solid #eee; 
      display: flex;
      flex-direction: column;
      gap: 4px;
      /* cursor: pointer; */
      transition: border-color 0.2s, background-color 0.2s;
    }

    .achievement_list_item:hover,
    .achievement_list_item:focus-within {
      border-color: #003863; 
      background-color: #fff;
    }
    .achievement_list_item > a {
      outline: none;
      display: flex;
    }

    .lay_id_tag {
      font-size: 14px;
      font-weight: 700;
      color: #003863;
      min-width: 90px;
    }

    .lay_subject {
      font-weight: 700;
      font-size: 17px;
      color: #1a1d20;
      line-height: 1.4;
      margin-left: 1.5rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .layer_footer {
      padding: 15px 20px;
      border-top: 1px solid #e9ecef;
      flex-shrink: 0; /* 푸터 크기 고정 */
    }

    .btn_close_action {
      width: 100%;
      padding: 12px;
      background: #003863;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-weight: 700;
      cursor: pointer;
    }

    /* 스크롤바 디자인 (브라우저별 호환성 고려) */
    .layer_body::-webkit-scrollbar {
      width: 8px;
    }
    .layer_body::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }
    .layer_body::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 4px;
    }
    .layer_body::-webkit-scrollbar-thumb:hover {
      background: #999;
    }
/* 국정성과 end */

/* 재해조사보고서 공개 화면 start */ 
    
    .b_tit a {
        display: flex;
        flex-direction: column; /* 위아래로 배치 */
        text-decoration: none;
        color: inherit;
        gap: 4px; /* 1행과 2행 사이 간격 */
    }

    /* 공통 말줄임 스타일 (1행 고정) */
    .line-row {
        display: -webkit-box;
        -webkit-line-clamp: 1;
    	-webkit-box-orient: vertical;
        white-space: break-spaces;    /* 한 줄로 강제 */
        overflow: hidden;       /* 넘치는 부분 숨김 */
        text-overflow: ellipsis; /* 말줄임표(...) */
        width: 100%;
    }

    /* 1행 스타일 (예: 카테고리/말머리) */
    .row-1 {
        font-size: 0.9em;
        /* color: #0066cc; */
        font-weight: normal;
    }

    /* 2행 스타일 (예: 실제 상세 제목) */
    .row-2 {
        font-size: 1em;
        color: #333;
    }

    /* 제목 셀 너비 확보 */
    td.txt_left {
        max-width: 400px; /* 적절한 최대 너비 설정 필요 */
    }
    
    .highlight {
    	font-weight: 800; 
    	color: #d34343;
    	/* font-style: italic; */
    }
    
    .board_search2 .col3 {
	    display: flex;
	    align-items: center;
	    width: 28.3%;
	    height: 3.2rem;
	}
	
	.form_select2 {
	    width: 50%;
	    min-width: 10rem;
    	height: 4.8rem;
    	border-color: #717171;
    	line-height: 4.5rem;
	}
	
	.form_select2 select{
		width:100%;padding:0 2.5rem 0 .5rem;border:1px solid #ddd;-webkit-transition:all 0.2s;transition:all 0.2s;color:#1d1d1d;border-radius:.6rem;
		height: 100%;
    	border-color: #717171;
	}
	
	.board_search2 .dsst_title2 {
	    padding-right: 2rem;
	    text-align: center;
	    width: 46%;
	}
	
	.custom_chk label {
		min-width: 70px;
	}
	
	.bg_cont_wrap .bg_cont_top {
		min-height: 0rem;
	}
	
	.board_search2 .form_select {
    	height: 3.2rem;
	}
	
	@media (max-width: 500px) {
		.board_search2 .col3 {
		    display: flow;
		    height: 5.5rem;
		}
		.form_select2 {
		    width: 100%;
		}
	}
/* 재해조사보고서 공개 화면 end */

/* 사전정보 공표 목록 start */
    .info_tab {
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        background: #ffffff;
    }

    /* 1. 상단 독자 배치의 '전체' 버튼 스타일 */
    .all-tab-container {
        width: 100%;
        border-bottom: 1px solid #e9ecef;
    }
    .all-tab-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 20px;
        text-decoration: none;
        color: #6c757d;
        background-color: #ffffff;
        transition: all 0.25s ease;
        box-sizing: border-box;
    }
    .all-tab-btn svg {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        stroke-width: 1.5;
        fill: none;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .all-tab-btn span {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    .all-tab-btn:hover {
        background-color: #f8f9fa;
        color: #003863;
    }
    .all-tab-btn:hover svg {
        transform: scale(1.1);
    }
    /* '전체' 버튼 활성화 스타일 */
    .all-tab-container.active .all-tab-btn {
        color: #ffffff;
        background-color: #003863;
    }

    /* 2. 하단 16개 탭 그리드 (4x4 구조) */
    .info_tab ul {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .info_tab ul li {
        position: relative;
        border-right: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
    }
    /* 우측 및 하단 테두리 정리 */
    .info_tab ul li:nth-child(4n) {
        border-right: none;
    }
    .info_tab ul li:nth-last-child(-n+4) {
        border-bottom: none;
    }
    .info_tab ul li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 18px 10px;
        text-decoration: none;
        color: #6c757d;
        transition: all 0.25s ease;
        text-align: center;
        height: 100%;
        box-sizing: border-box;
    }
    .info_tab ul li a svg {
        width: 28px;
        height: 28px;
        margin-bottom: 7px;
        stroke: currentColor;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .info_tab ul li a span {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        word-break: keep-all;
    }
    .info_tab ul li a:hover {
        background-color: #f8f9fa;
        color: #003863;
    }
    .info_tab ul li a:hover svg {
        transform: scale(1.05) translateY(-2px);
    }
    .info_tab ul li.active a {
        color: #ffffff;
        background-color: #003863;
        font-weight: 700;
    }
    
    /* 탭 아래 세부 내용 출력 영역 */
    .content_box {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e9ecef;
        padding: 30px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin-top: 15px;
        min-height: 150px;
    }
    #content-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 22px;
        font-weight: 700;
        color: #003863;
        margin-top: 0;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #e9ecef;
    }
    #content-title svg {
        width: 30px;
        height: 30px;
        stroke: currentColor;
        stroke-width: 1.8;
        fill: none;
    }
    #content-desc {
        font-size: 15px;
        line-height: 1.6;
        color: #495057;
        margin: 0;
    }

    /* 태블릿 사이즈: 4열 유지하되 패딩 축소 */
    @media (max-width: 1024px) {
        .info_tab ul { grid-template-columns: repeat(4, 1fr); }
        .info_tab ul li a { padding: 15px 5px; } 
        .info_tab ul li a svg { margin-bottom: 8px; width: 24px; height: 24px; }
        .info_tab ul li a span { font-size: 13px; }
    }
    /* 모바일 사이즈: 2열 구조 및 아이콘 간소화 */
    @media (max-width: 768px) {
        .info_tab ul { grid-template-columns: repeat(2, 1fr); }
        /* 모바일 보더 초기화 후 재조정 */
        .info_tab ul li {
            border-right: 1px solid #e9ecef;
            border-bottom: 1px solid #e9ecef;
        }
        .info_tab ul li:nth-child(2n) { border-right: none; }
        /* .info_tab ul li:nth-last-child(-n+2) { border-bottom: none; } */
        .info_tab ul li:nth-last-child(-n+4) { border-bottom: 1px solid #e9ecef; }
        
        .all-tab-btn { padding: 15px; }
        .all-tab-btn span { font-size: 15px; }
        
        .info_tab ul li a { 
            padding: 12px 10px; 
            min-height: 50px; 
        }
        .info_tab ul li a svg { 
            display: none; 
        }
        .info_tab ul li a span { 
            font-size: 13px;
            font-weight: 600;
        }
    }
/* 사전정보 공표 목록 end */

/* 크리에이터 협업 start */
	/* 배경 음영 처리 레이어 (Overlay) */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* 조금 더 짙은 음영 */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      display: none; /* 기본 숨김 */
    }

    /* 모달 컨텐츠 박스 */
    .modal-content {
      background-color: white;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      max-width: 500px;
      width: 90%;
    }

    /* 경고 메시지 스타일 */
    .warning-section {
      background-color: #f8f8f8;
      border-left: 4px solid #727272;
      padding: 15px;
      margin-bottom: 20px;
      text-align: left;
    }

    .warning-title {
      /* color: #e03131; */
      font-weight: bold;
      font-size: 2.1rem;
      margin-bottom: 8px;
      display: block;
    }

    .warning-text {
      font-size: 1.5rem;
      color: #495057;
      margin: 0;
    }

    /* 정보 확인 테이블 스타일 */
    .info-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 25px;
      font-size: 1.55rem;
    }

    .info-table th, .info-table td {
      padding: 12px;
      border-bottom: 1px solid #eee;
      text-align: left;
    }

    .info-table th {
      background-color: #f8f9fa;
      width: 30%;
      color: #666;
      font-weight: 600;
    }
    
    /* 비밀번호 표시 영역 스타일 */
    .pw-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .pw-toggle-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #888;
      display: flex;
      align-items: center;
      padding: 2px;
    }

    .pw-toggle-btn:hover {
      color: #333;
    }

    /* 버튼 그룹 */
    .button-group {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .cre-btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.2s;
    }

    .btn-submit {
      background-color: #246BEB;
      color: white;
      flex: 1;
    }

    .btn-cancel {
      background-color: #e9ecef;
      color: #495057;
      flex: 1;
    }

    .cre-btn:hover {
      opacity: 0.8;
    }
/* 크리에이터 협업 end */