/* 색상명칭 및 단순 https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81  */
/* 색표눌러서 좌표 https://www.html-color-codes.info/Korean/?  */ 
/* 색상선택도구 https://www.google.com/search?q=%EC%83%89%EC%83%81%EC%84%A0%ED%83%9D%EB%8F%84%EA%B5%AC&sca_esv=8957a51bd870705f&ei=4GP_ZuKUCsr81e8PmN__2AU&ved=0ahUKEwjihO2N5_OIAxVKfvUHHZjvH1sQ4dUDCA8&uact=5&oq=%EC%83%89%EC%83%81%EC%84%A0%ED%83%9D%EB%8F%84%EA%B5%AC&gs_lp=Egxnd3Mtd2l6LXNlcnAiEuyDieyDgeyEoO2DneuPhOq1rDIFEAAYgAQyCBAAGIAEGKIEMggQABiABBiiBEinVVC4J1j5U3AMeAGQAQOYAd4BoAGeHqoBBjAuMTUuNbgBA8gBAPgBAZgCFKAChgyoAgLCAgoQABiwAxjWBBhHwgIIEAAYgAQYsQPCAgsQABiABBixAxiDAcICBBAAGAPCAgsQLhiABBixAxiDAcICBRAuGIAEwgIOEC4YgAQYxwEYjgUYrwHCAgsQLhiABBjHARivAcICBxAAGIAEGArCAhQQABiABBjjBBi0AhjpBBjqAtgBAcICFBAuGIAEGOMEGLQCGOkEGOoC2AEBwgIREC4YgAQYsQMY0QMYgwEYxwHCAg4QLhiABBixAxjRAxjHAcICCBAuGIAEGLEDwgIaEC4YgAQYsQMYgwEYlwUY3AQY3gQY3wTYAQLCAgoQABiABBhDGIoFwgIGEAAYBRgewgIKEAAYBRgKGB4YD8ICCBAAGAUYHhgPmAMBiAYBkAYKugYECAEYB7oGBggCEAEYFJIHBjEyLjcuMaAHj4IB&sclient=gws-wiz-serp   */

/* 기본 리셋 */
* {
    /* margin: 0;  모든 요소의 기본 여백 제거 (기본값 8px 등) */
    margin: 5;
    padding: 1; /* 모든 요소의 기본 패딩 제거 (기본값 0px) */
    box-sizing: border-box; /* 너비와 높이를 계산할 때 패딩과 보더를 포함하여 계산 */
}

/* 본문 스타일 */
body {
    font-family: Arial, sans-serif; /* 기본 글꼴을 Arial로 설정, 대체 글꼴로 sans-serif 사용 */
    /* line-height: 1.6;  줄 간격을 1.6배로 설정 (가독성 향상) */
    line-height: 1.3;  /* 줄간격 1.5배 DRG white*/
    background-color: white; /* 배경색 DRG white*/
    /* color: #364861;  텍스트 색상을 DRG 아주어두운 진그레이파랑 */
    font-size: 16px; /* DRG 글자 크기를 16px로 설정 */  
}

/* 헤더 스타일 */
header {
    background: white; /* 헤더 배경색을 DRG WHITE */
    color: #ffffff; /* 헤더 텍스트 색상을 흰색으로 설정 */
    padding: 10px 0; /* 헤더 상하 패딩을 10px로 설정, 좌우는 0 */
    text-align: center; /* 텍스트를 중앙에 정렬 */
}

/* 큰 타이틀 내용 */
h1 {
    color: #456796; /* 텍스트 색상 DRG h1 */
    padding: 5px 0; /* 헤더 상하 패딩을 10px로 설정, 좌우는 0 */
    /* text-align: center;  텍스트를 중앙에 정렬 */
    text-align: center;
    font-size: 18px; /* DRG 글자 크기 */ 
    font-weight: bold;
}

/* 중 타이틀 내용 - 파랑*/
h2 {
    color: #5490e3; /* 텍스트 색상 DRG h2 */
    padding: 3px 5; /* 헤더 상하 패딩을 6px로 설정, 좌우는 0->5 */
    /* text-align: center;  텍스트를 중앙에 정렬 */
    text-align: left;
    font-size: 16px; /* DRG 글자 크기 */
    font-weight: bold;
}

/* 중 타이틀 내용 - 빨강*/
h3 {
    color: #c75734; /* 텍스트 색상 DRG h3 */
    padding: 3px 5; /* 헤더 상하 패딩을 6px로 설정, 좌우는 0->5 */
    /* text-align: center;  텍스트를 중앙에 정렬 */
    text-align: left;
    font-size: 16px; /* DRG 글자 크기 */ 
    font-weight: bold;
}

table {
    width: 100%;
    /* border-collapse: collapse;  DRG 테두리 겹침 방지 */
}

/* 특정 테이블에 대한 추가 스타일 */
table.no-border td {
    border: none; /* 기본 테두리 없음 */
    padding: 10px; /* 셀 안쪽 여백 */
}

td {
    border: 1px solid #EFFBFB; /* 테두리 DRG연파랑(13,1) */
    padding: 5px; /* 셀 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
}

.datagreen {
    color: green; /* tr 내 데이터 글자 색을 녹색으로 설정 */
}

th {
    border: 1px solid #EFFBFB; /* 테두리 DRG연파랑(13,1) */
    padding: 5px; /* 셀 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    
    background-color: #74a9b3; /* 헤더 배경색 DRG진그레이파랑 */
    color: white !important; /* 잘 안머거서, 강제로 글자 색을 흰색으로 설정 */
}

.headergreen {
    color: green; /* th 내 헤더 글자 색을 녹색으로 설정 */
}   

tr:nth-child(even) {
    background-color: #E0F8F7; /* 짝수 행 배경색 DRG연파랑(13,2) */
}

tr:hover {
    background-color: #CEF6CE; /* 마우스 오버 시 배경색 DRG연초록(9,3) */
} 

/* 특정 테이블의 짝수 행 배경색을 제거 */
.no-even-bg tr:nth-child(even) {
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

/* bgcolor 연한 4가지 색 */
/* 실제로는 안먹어서, 강제로 함 */
/* #F6CECE   연빨 */
/* #F5F6CE   연노 */
/* #CEF6CE   연초 */
/* #CEE3F6   연파 */

.bg_l_red {
    background-color: #F6CECE !important; /* 연한 빨강 색상 */
}

.bg_l_yellow {
    background-color: #F5F6CE; /* 연한 노량 색상 */
}

.bg_l_green {
    background-color: #CEF6CE; /* 연한 녹색 색상 */
}

.bg_l_blue {
    background-color: #CEE3F6; /* 연한 파랑 색상 */
}

/* 해당 방향 테두리선 t, b, r, l  4가지 */
.t-black {
    border-top: 2px solid black; /* 위쪽 테두리 검정색 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.t-red {
    border-top: 6px solid red; /* 아래쪽 테두리 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.r-black {
    border-right: 2px solid black; /* 오른쪽 테두리 검정색 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.r-red {
    border-right: 6px solid red; /* 아래쪽 테두리 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.l-black {
    border-left: 2px solid black; /* 왼쪽 테두리 검정색 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.l-red {
    border-left: 6px solid red; /* 아래쪽 테두리 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.b-black {
    border-bottom: 2px solid black; /* 아래쪽 테두리 검정색 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

.b-red {
    border-bottom: 6px solid red; /* 아래쪽 테두리 */
    background-color: transparent; /* 배경색을 투명으로 설정 */
}

input {
    font-size: 16px; /* DRG 글자 크기를 16px로 설정 */      
}   

/* form 스타일 */
form {
    width: 100%;
    /* border-collapse: collapse;  DRG 테두리 겹침 방지 */
    border: 2px solid #74a9b3; /* border : 2, form 네모 라인색 DRG진그레이파랑 */
    padding: 2px; /* 셀 안쪽 여백 */
    border-radius: 10px; /* 모서리 둥글게 */
    text-align: center; /* 텍스트 중앙 정렬 */   
}

/* 2025.03.26 add start */
.blue {
    color: blue;
}
.red {
    color: red;
}
.green {
    color: green;
}
.bold {
    font-weight: bold;
}
.small {
    font-size: 8px;
}
.underline {
    text-decoration: underline;
}

/* 
-- 그림자 효과 --
0은 그림자의 수평 오프셋입니다.
8px은 그림자의 수직 오프셋입니다.
30px은 그림자의 흐림 반경입니다.
rgba(0, 0, 0, 0.2)는 그림자의 색상과 투명도를 나타냅니다. 투명도를 높여 그림자를 더 뚜렷하게 만들었습니다.
*/

.container {
    // background-color: #f4f7fa; /* 배경색 : 아주 연한 파랑 */
    background-color: white; /* 배경색 : white */
    border-radius: 10px; /* 모서리 둥글게 */
    box-shadow: 4px 8px 30px rgba(0, 0, 0, 0.4); /* 그림자 효과를 더 강하게 */
    padding: 10px 5px;  /* 안쪽 여백 (위,아래 10, 좌,우 5) */
    width: 100%; /* 폼 너비 */
}
.container input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px; /* 입력 필드 모서리 약간 둥글게 */
}

/*
.container button {
    background-color: #31B404;  /* 버튼 배경색 DRG초록(8,10) */
    color: white;   /* 버튼 텍스트 색상 */
    border: none;   /* 테두리 없음 */
    padding: 5px 10px;  /* 버튼 안쪽 여백 (위,아래 5, 좌,우 10) */
    border-radius: 5px; /* 모서리 약간 둥글게 */
    cursor: pointer;   /* 커서 포인터로 변경 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
}
*/

.container button:hover {
    background-color: #0056b3; /* 버튼 호버 효과 */
}

/* 2025.03.26 add end */


/* form 스타일 (DRG td내 form 추가되어 input hidden사용시 테두리 안바뀌게위함) . -> class <form class="custon-form"> */
.custom-form {
    /* border: 1px solid #EFFBFB; 테두리 DRG연파랑(13,1) */
    border: none; /* 테두리 없음 */
}

/* 대진표.용 */
.bg-none-form {
    /* border: 1px solid #EFFBFB; 테두리 DRG연파랑(13,1) */
    border: none; /* 테두리 없음 */
    solid white; /* 테두리 흰색 */
}

/* td 스타일(.)(아직은 안씀)  . -> class 사용시 <td class="custon-td"> */
.custom-td {
    border: 2px solid #ff0000; /* 빨간색 테두리 */
    background-color: #f0f0f0; /* 연한 회색 배경 */
    text-align: left; /* 왼쪽 정렬 */
}

/* td id(#)(아직은 안씀.id는 페이지내 유일해야 하므로, 하나의요소에만 적용가능)  # -> id 사용시 <td id="unique-td"> */
#unique-td {
    border: 2px dashed #00ff00; /* 녹색 점선 테두리 */
    background-color: #e0e0e0; /* 연한 회색 배경 */
}

/* 버튼 스타일 */
button {
    background-color: #31B404; /* 버튼 배경색 DRG초록(8,10) */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}

button:hover {
    background-color: #088A08; /* 마우스 오버 시 버튼 배경색 DRG진초록(9,11) */
}

/* ---- (진주황) 결과창, 알람창 왔다갔다.버튼 */
.button-crossrtn {
    background-color: #DF7401; /* 버튼 배경색 DRG 진주황 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}

/* ---- (파랑) 표형식 결과창, 표형식 결과 일괄 입력.버튼 */
.button-tablertn {
    background-color: #0067a3; /* 버튼 배경색 DRG 파랑 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */  
}

/* ---- (회색) 표형식 결과창, 표형식 결과 일괄 입력.버튼 */
.button-tablertn2 {
    background-color: gray; /* 버튼 배경색 DRG 회색 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}

/* ----버튼  간의 간격을 최대로 양쪽으로 벌릴때 사용 start */
.button-container {
    display: flex;
    justify-content: space-between; /* 버튼 간의 공간을 최대한 벌림 */
    align-items: center; /* 세로 정렬 */
    width: 100%; /* 전체 폭 사용 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}

.button-left {
    margin-right: 10px; /* 버튼 간 간격 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}
/* ----버튼  간의 간격을 최대로 양쪽으로 벌릴때 사용 end */

/* 폼 코드 작게 왼쪽에 표현  */
.small-text {
    font-size: 2px;
    text-align: left;  
    margin: 0; /* 위아래 여백 제거 */    
}

.single-line {
    width: 100%; /* 너비를 100%로 설정 */
    border-top: 2px solid green; /* 상단 테두리 추가 (두께 3px, 색상 blue) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 음영 효과 추가 */
    margin: 20px 0; /* 위아래 여백 설정 */
}

.double-line {
    width: 100%; /* 너비를 100%로 설정 */
    border-top: 5px solid green; /* 상단 테두리 추가 (두께 3px, 색상 blue) */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 음영 효과 추가 */
    margin: 20px 0; /* 위아래 여백 설정 */
}


/* 별도의 상단버튼 으로 사용할때, 아래 하단에 리스트 폼이 있을때   */
.create-button-form {
    border: none; /* 테두리 제거 */
    text-align: left; /* 왼쪽 정렬 */
    margin-bottom: 10px; /* 아래쪽 여백 추가 */
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */    
}

/* 별도의 상단버튼 으로 사용할때, 아래 하단에 리스트 폼이 있을때   */
.create-button-form2 {
    border: none; /* 테두리 제거 */
    display: flex;
    justify-content: space-between; /* 버튼 간의 공간을 최대한 벌림 */
    align-items: center; /* 세로 정렬 */
    width: 100%; /* 전체 폭 사용 */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 1px 1px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
}

/* form 내 form 내.. 여러줄 안의 버튼(input button) 일때 >프로시져 호출 (button)과동일. 현재 안씀.  */
.input-multi-button {
    background-color: #31B404; /* 버튼 배경색 DRG초록(8,10) */
    color: white; /* 버튼 텍스트 색상 */
    border: none; /* 테두리 없음 */
    padding: 5px 10px; /* 버튼 안쪽 여백 */
    text-align: center; /* 텍스트 중앙 정렬 */
    text-decoration: none; /* 텍스트 장식 없음 */
    display: inline-block; /* 인라인 블록으로 설정 */
    font-size: 16px; /* 폰트 크기 */
    cursor: pointer; /* 커서 포인터로 변경 */
    border-radius: 6px; /* 모서리 둥글게 */
}

/* 링크 스타일 */
a {
    color: #35424a; /* 일반 링크 색상을 다크 블루 그레이로 설정 */
    text-decoration: none; /* 링크에 기본 밑줄 제거 */
}

a:hover {
    text-decoration: underline; /* 링크에 마우스를 올렸을 때 밑줄 추가 */
}


/* 카드 스타일 */
.card {
    background: white; /* 카드 배경색을 흰색으로 설정 */
    border: 1px solid #ddd; /* 카드 테두리를 연한 회색으로 설정 */
    border-radius: 5px; /* 카드 모서리를 5px 둥글게 설정 */
    padding: 10px; /* 카드 내부 패딩을 20px로 설정 */
    margin: 10px; /* 카드 외부 여백을 20px로 설정 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* 카드에 약한 그림자 추가 (x-offset, y-offset, blur-radius) */
}

/* 
.container2 {
    display: flex; /* 플렉스 박스를 사용하여 요소를 배치 */
    flex-wrap: wrap; /* 요소가 넘칠 경우 줄 바꿈 (다음 줄로 이동) */
    justify-content: space-between; /* 요소 간 간격을 균등하게 분배 */
    padding: 10px; /* 컨테이너 내부 패딩을 10px로 설정 */
}
*/

/* 반응형 디자인 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 화면이 좁을 때 요소 세로 방향으로 배치 */
    }
}