@charset "utf-8";

/*-------------------------------------------------------------------------------------------------------------*/

/*인풋박스 정의*/
 input[type="text"] {
            width: 100%;
            max-width: 300px;
            padding: 10px 15px;
            font-size: var(--fz-15); 
            border: 1px solid var(--gray3); 
			background-color:var(--white);
            border-radius: 4px; /* 테두리 둥글게 */
            outline: none; /* 클릭 시 기본 파란 테두리 제거 */
            transition: border-color 0.2s; /* 부드러운 전환 */
        }
 input[type="text"]::placeholder {
  font-size: var(--fz-15); 
  font-family: 'SUIT Variable', sans-serif; 
  opacity: 1; /* 파이어폭스 등에서 반투명해지는 것 방지 */
}

        /* 입력창을 클릭(포커스)했을 때 스타일 변화 */
input[type="text"]:focus {
            border-color: var(--color-primary);  /* 파란색 테두리로 변경 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 은은한 그림자 */
        }

 input[type="password"] {
            width: 100%;
            max-width: 300px;
            padding: 10px 15px;
            font-size: var(--fz-15); 
            border: 1px solid var(--gray3); 
			background-color:var(--white);
            border-radius: 4px; /* 테두리 둥글게 */
            outline: none; /* 클릭 시 기본 파란 테두리 제거 */
            transition: border-color 0.2s; /* 부드러운 전환 */
        }
 input[type="password"]::placeholder {
  font-size: var(--fz-15); 
  font-family: 'SUIT Variable', sans-serif; 
  opacity: 1; /* 파이어폭스 등에서 반투명해지는 것 방지 */
}

        /* 입력창을 클릭(포커스)했을 때 스타일 변화 */
input[type="password"]:focus {
            border-color: var(--color-primary);  /* 파란색 테두리로 변경 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 은은한 그림자 */
        }


select {
            width: 100%;
            max-width: 100%;
            padding: 10px 15px;
            font-size: var(--fz-15); 
            border: 1px solid var(--gray3); 
			background-color:var(--white);
            border-radius: 4px; /* 테두리 둥글게 */
            outline: none; /* 클릭 시 기본 파란 테두리 제거 */
            transition: border-color 0.2s; /* 부드러운 전환 */
        }
select ::placeholder {
  font-size: var(--fz-15); 
  font-family: 'SUIT Variable', sans-serif; 
  opacity: 1; /* 파이어폭스 등에서 반투명해지는 것 방지 */
}


        /* 입력창을 클릭(포커스)했을 때 스타일 변화 */
select:focus {
            border-color: var(--color-primary);  /* 파란색 테두리로 변경 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 은은한 그림자 */
        }

textarea 
{
            width: 100%;
            max-width: 100%;
			height: 150px;       
            padding: 10px 15px;
            font-size: var(--fz-15); 
            border: 1px solid var(--gray3); 
			background-color:var(--white);
            border-radius: 4px; /* 테두리 둥글게 */
            outline: none; /* 클릭 시 기본 파란 테두리 제거 */
            transition: border-color 0.2s; /* 부드러운 전환 */
			box-sizing: border-box; 
}
textarea::placeholder {
  font-size: var(--fz-15); 
  font-family: 'SUIT Variable', sans-serif; 
  opacity: 1; /* 파이어폭스 등에서 반투명해지는 것 방지 */
}

        /* 입력창을 클릭(포커스)했을 때 스타일 변화 */
textarea:focus {
            border-color: var(--color-primary);  /* 파란색 테두리로 변경 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 은은한 그림자 */
        }
input[type="file"] {
            width: 100%;
            max-width: 100%;
            padding: 5px 15px;
            font-size: var(--fz-12); 
            border: 1px solid var(--gray3); 
			background-color:var(--white);
            border-radius: 4px; /* 테두리 둥글게 */
            outline: none; /* 클릭 시 기본 파란 테두리 제거 */
            transition: border-color 0.2s; /* 부드러운 전환 */
			margin-bottom:5px;
			box-sizing: border-box; 
        }

        /* 입력창을 클릭(포커스)했을 때 스타일 변화 */
input[type="file"]:focus {
            border-color: var(--color-primary);  /* 파란색 테두리로 변경 */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* 은은한 그림자 */
        }



/*-------------------------------------------------------------------------------------------------------------*/
/*게시판 정의*/

.table_board {border-collapse:collapse;}
.table_board th {background-color:var(--gray1); border-top:1px solid var(--gray9); border-bottom:1px solid var(--gray3); padding:15px 0; font-size:var(--fz-15); text-align:center; color:var(--gray9); }
.table_board td {border-bottom:1px solid var(--gray3); padding:15px 0; font-size:var(--fz-15); text-align:center; color:var(--gray9); }
.table_board td:first-child span{color:var(--gray9); font-size:var(--fz-16); vertical-align:-2px;}
.table_board td i{font-style:normal; color: var(--color-primary); font-weight:var(--fw-bold); }
.table_board tbody tr:hover{background-color:var(--white);}
.table_board a:hover{text-decoration:underline; color: var(--color-primary);}
.table_board a span{font-size:var(--fz-16);vertical-align:-2px;}

.board_view {border:1px solid var(--gray2); padding:50px; }
.board_view h4{font-size:var(--fz-20); color:var(--gray9); }
.board_view h5{font-size:var(--fz-14); color:var(--gray5); margin:20px 0;}
.board_view hr{border: 0; height:0; border-top:1px solid var(--gray3); margin:25px 0}
.board_contents {font-size:var(--fz-16); color:var(--gray7); line-height:150%; margin-bottom:50px;}
.board_replay {border:1px solid var(--gray2); padding:20px; background-color:var(--white); font-size:var(--fz-16); color:var(--gray9); }

.page_num {display:flex; margin-top:30px; justify-content:center; gap:7px;}
.page_num a{display:block; font-size:var(--fz-14); color:var(--gray6); padding: 5px 10px 4px; border:1px solid var(--gray3); }
.page_num a span{ font-size:var(--fz-20); vertical-align:-5px;}
.page_num a:hover{font-weight:var(--fw-bold); color:var(--color-primary); border:1px solid var(--color-primary); }
.page_num .on{font-weight:var(--fw-bold); color:var(--color-primary); border:1px solid var(--color-primary); }


/* 깜빡이는 효과를 주는 CSS 클래스 */
        .blink {animation: blink-animation 1s steps(5, start) infinite; -webkit-animation: blink-animation 1s steps(5, start) infinite;   }
/* 애니메이션 동작 정의 (투명도를 1에서 0으로 반복) */
        @keyframes blink-animation { 
		   to {
                visibility: hidden;
            }
        }
        @-webkit-keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }

/*-------------------------------------------------------------------------------------------------------------*/

/*검색*/
.search-container {display: flex; justify-content: center; margin: 20px 0 0; width: 100%;}
.search-container form {display: flex; gap: 5px; align-items: center;  flex-wrap: nowrap; }
.search-select { width: auto; padding: 8px 12px; font-size: var(--fz-13);  border: 1px solid var(--gray4); border-radius: 4px; outline: none;}
.search-input { width: auto; padding: 8px 12px; font-size: var(--fz-13); border: 1px solid var(--gray4); border-radius: 4px; outline: none;}
.search-container button {
    white-space: nowrap; 
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;  
    font-size: var(--fz-14);   
    background-color: var(--black);  
    color: var(--white);  
    border: 1px solid var(--white);   
    border-radius: 4px;    
    cursor: pointer;
}
/*-------------------------------------------------------------------------------------------------------------*/

/*버튼 종류 정의*/
.buttons {text-align:right}
button { padding: 8px 16px;  font-size: var(--fz-14);   background-color: var(--black);  color: var(--white);  border: 1px solid var(--white);   border-radius: 4px;    cursor: pointer; }
button .material-symbols-outlined {font-size: var(--fz-18); vertical-align:-4px; margin-left:8px; }