@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/* 1.전체 → 2.텍스트 → 3.링크 → 4.버튼 → 5.폼 → 6.이미지 → 7.테이블 → 8.기타 → 9.반응형 */

/* ------------------------------
   1. 전체
------------------------------ */

html, body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 1rem;  /* 12pt, 16px */
  background-color: #ffffff;
  color: #333333 ;
  max-width: 100%;
  height: 100%;
  margin: 0; /* 상, 우, 하, 좌 (시계 방향) */
  padding: 0;
  overflow-x: hidden; /* 가로 스크롤 금지 */
}


/* ------------------------------
   2. 텍스트
------------------------------ */
p	{ font-size: 1rem; }
div	{ font-size: 1rem; }

.warning {
   color: #CC3300;
   text-align: center;
   font-size: 1.1rem;
   font-weight: 700;
}

/* 작은 글씨 */
.small {
  font-size: 0.9rem;
  letter-spacing:-1px; 
  word-break:break-all;
}
.small.gray { color: #808080; }
.small.blue { color: #3165C6; }
.small.red { color: #CC3300; }
.small.green { color: #008000; }

/*	Heading */
h1	{ font-size: 145%; margin-bottom: .5em; text-align: center; word-break: keep-all;}
h2	{ font-size: 125%; margin-bottom: .5em; text-align: center; word-break: keep-all;}
h3	{ font-size: 110%; margin-bottom: .5em; }
h4	{ font-size: 105%; margin-bottom: .5em; }
h5	{ font-size: 100%; margin-bottom: .5em; }

.notice_title {
  color: #3165C6 ;
  font-weight: bold;
}

/* List */
ol	{ font-size: 12pt; margin-top: 0.5em;margin-bottom: 0.5em;  }
ul	{ font-size: 12pt; margin-top: 0.5em;margin-bottom: 0.5em;  }
li	{ font-size: 12pt; margin-top: 0.5em;margin-bottom: 0.5em;  }

fieldset{ 
  border:1px solid #C0C0C0; 
  padding:2px; 
  border-radius: 6px;
}

/* ------------------------------
   3. 링크
------------------------------ */
/* 하이퍼링크 스타일 */
a {
  color: #000000;
  text-decoration: underline;
  text-decoration-color: lightgray;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}
a:hover { 
  color: #000000 ;
  font-weight: bold;
  text-decoration: underline; 
  text-decoration-color: lightgray;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

.a_button {
 display: inline-block;
 padding: 8px 12px;
 text-decoration: none;
 background-color: #007bff;  /* 파란 배경 */
 color: white;      /* 흰 글씨 */
 border-radius: 5px;
 transition: background-color 0.2s;
}
.a_button:hover {
 background-color: #0056b3;  /* hover 시 진한 파랑 */
}
.a_button,
.a_button:link,
.a_button:visited,
.a_button:hover,
.a_button:active {
 color: white;
	text-decoration: none;
}

/* ------------------------------
   4. 버튼
------------------------------ */
/* 버튼 스타일 */
button, input[type="submit"], input[type="button"] {
  font-size: 1rem;
  display: block;
  width: auto;
  padding: 4px 12px;
  margin: 4px 4px; /* 위아래, 좌우 */
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  touch-action: manipulation;
  display: inline-block;
}
button:hover, input[type="submit"]:hover {
  background-color: #0056b3;
  transform: scale(1.03);
}
button:active, input[type="submit"]:active {
  background-color: #004494;
}

/* 이전 & 다음 버튼 */
.page_button {
 display: inline-flex;
 align-items: center;
 padding: 6px 14px;
 border: 2px solid #999;
 border-radius: 20px;
 background-color: #fff;
 color: #000;
 cursor: pointer;
 text-decoration: none;
 transition: background-color 0.2s;
 margin: 0 4px; /* 위아래, 좌우 */
}
.page_button:hover {
 background-color: #f2f2f2;
	text-decoration: none;
}
.page_button .arrow {
 font-weight: bold;
}
.page_button.prev .arrow {
 margin-right: 6px;
}
.page_button.next .arrow {
 margin-left: 6px;
}
.page_button,
.page_button:link,
.page_button:visited,
.page_button:hover,
.page_button:active {
	text-decoration: none;
}

/* ------------------------------
   5. 폼
------------------------------ */
/* 입력 필드 스타일 */
input, input[type="text"], input[type="password"], input[type="email"], input[type="file"], select, textarea {
  padding: 4px;
  /*margin: 4px 2px;  위아래, 좌우 */
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  transition: border-color 0.2s ease-in-out;
  display: inline-block;
}
input:focus, textarea:focus, select:focus {
  border-color: #007bff;
  outline: none;
}

form	 {
	margin-top: 0em;
	margin-bottom: 0em;
}

/* ------------------------------
   6. 이미지
------------------------------ */
img {
  max-width:700;
  height: auto;
  border-radius: 5px;
}

.margin_img {
  margin: 5px 5px; /* 위아래, 좌우 */
}

/* ------------------------------
   7. 테이블
------------------------------ */
/*	Table	*/
table {
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
  word-wrap: break-word; 
}

th, td {
  /*padding: 4px 2px;  상하 좌우 */
  word-wrap: break-word;
  white-space: normal;
 }

th {
  font-weight: 700;
}

/* 테이블 회색과 화이트 반복되게 스타일 */
.gray_white {
  border-collapse: collapse;
}
.gray_white tr:nth-child(odd) {
  background-color: #f2f2f2; /* 홀수 행 회색 */
}
.gray_white tr:nth-child(even) {
  background-color: white; /* 짝수 행 무색 */
}

/* 테이블 회색 줄 스타일 */
.gray_line {
  border-collapse: collapse;
}
.gray_line th,
.gray_line td {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #CCCCCC;
  padding: 3px;
}
.gray_line tr:first-child th,
.gray_line tr:first-child td {
  border-top: 1px solid #CCCCCC;
}
.gray_line.last_x tr:last-child td {
  border-bottom: none;
}

.no_style, .no_style td, .no_style th {
  border: none;
  padding: 0;
  background: transparent;
  font-size: inherit;
}

.vpad4_td, .vpad4_td td, .vpad4_td th {
  border: 0;
  padding: 4px 0px; /* 상하 좌우 */
  background: transparent;
  font-size: inherit;
  vertical-align: top;
}

.vpad2_td, .vpad2_td td, .vpad2_td th {
  border: 0;
  padding: 2px 0px; /* 상하 좌우 */
  background: transparent;
  font-size: inherit;
  vertical-align: top;
}

/* 파란 바탕에 흰 글자 TD 스타일 */
.blue_td {
  background-color: #3165C6;
  text-align: center;
  color: #ffffff;
  font-weight: 700;
  word-break: keep-all;
}
.blue_td.top {
  font-size: 1.4rem;
}

/* 회색 바탕에 검정 글자 TD 스타일 */
.gray_td {
  background-color: #f2f2f2;
  vertical-align: top;
  word-break: keep-all;
}

/* 연한 파란 바탕에 검정 글자 TD 스타일 */
.lightblue_td {
  background-color: #e6f0ff;
}
/* ------------------------------
   8. 기타
------------------------------ */

hr {
	border: 0;
	border-top: 1px dashed #aaa;
	margin: 15px 0;
}

/* ------------------------------
   9. 반응형
------------------------------ */

/* ------------------------------
   A. 상단 메뉴 (top.asp)
------------------------------ */
/* ===== 상단 로고와 사용자 메뉴 Styles  ===== */
/* 바깥 전체 영역 */
.banner-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #ccc;
  font-size: 13px;
  height: 48px;
}

/* 왼쪽: 배너 + 현재선택 묶음 */
.banner-inner {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding-left: 50px;
  padding-right: 50px;
  height: 100%;
}

.logo img {
  height: 40px;
  margin: 0;
  padding-right: 50px;
}

/* 현재 선택 텍스트 */
.current-menu {
  margin-left: 10px;
  white-space: nowrap;
}
.current-menu .menu-color {
  font-size: 1.2rem;
  font-weight: bold;
}

/* 오른쪽: 사용자 메뉴 */
.user-menu {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 6px 0 0;
  padding: 0;
}
.user-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  padding: 4px 6px;
  border-radius: 4px;
}
.user-menu li a:hover {
  background-color: #e3eaf2;
}

.banner-wrapper.menu1 { background-color: #EEF5FF; }
.banner-wrapper.menu2 { background-color: #F0F8F5; }
.banner-wrapper.menu3 { background-color: #FFF4F4; }
.banner-wrapper.menu4 { background-color: #F5F3FF; }
.banner-wrapper.menu5 { background-color: #F3FBF8; }
.banner-wrapper.menu6 { background-color: #FDF8EC; }
.banner-wrapper.menu7 { background-color: #F3F6FF; }
.banner-wrapper.menu8 { background-color: #FFFBE5; }

/* 텍스트 색 */
.banner-wrapper.menu1 .menu-color { color: #6699CC; }
.banner-wrapper.menu2 .menu-color { color: #3E9752; }
.banner-wrapper.menu3 .menu-color { color: #FE7070; }
.banner-wrapper.menu4 .menu-color { color: #666AC1; }
.banner-wrapper.menu5 .menu-color { color: #58B195; }
.banner-wrapper.menu6 .menu-color { color: #CC9933; }
.banner-wrapper.menu7 .menu-color { color: #336699; }
.banner-wrapper.menu8 .menu-color { color: #E3B600; }


/* ===== 상단 네비게이션 Top Menu Styles  ===== */
/* 상단 메뉴 전체 영역 */
.top-menu {
  display: flex;
  justify-content: center;
  background: #f6f6f6;
  border-bottom: 2px solid #ccc;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
}

/* 개별 메뉴 항목 */
.menu-item {
  position: relative;
  margin: 0;
}

/* 메뉴 상단 탭 링크 */
.menu-item > a {
  display: block;
  padding: 4px 40px;
  text-decoration: none;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  border-radius: 4px 4px 0 0;
  transition: background 0.2s;
  white-space: nowrap;
}

.menu-item > a:hover,
.menu-item > a.active {
  background-color: #e3eaf2;
  color: #1a4d8f;
}

/* 서브 메뉴 (기본 감춤) */
.tabmenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
  font-size: 15px;
  max-width: 100vw;
  overflow-x: auto;
}

/* hover 시에만 서브 메뉴 보이기 */
.menu-item:hover .tabmenu {
  display: flex;
}

/* 서브 메뉴 링크 */
.tabmenu a {
  padding: 2px 6px;
  min-width: 20px;
  text-align: center;
  text-decoration: none;
  color: #333;
  border-radius: 3px;
  transition: background 0.2s;
}

.tabmenu a:hover {
  background-color: #f0f0f0;
}

.tabmenu.menu3 { left: -200px; }
.tabmenu.menu4 { left: -250px; }
.tabmenu.menu5 { left: -150px; }
.tabmenu.menu6 { left: 10px; }
.tabmenu.menu7 { left: -50px; }
.tabmenu.menu8 { left: -550px; }

/* ---------------------------------------------
   B. 왼쪽 메뉴 페이지 (menu.asp)
---------------------------------------------- */

/* ===== 왼쪽 .menu_page 스타일 ===== */
/* 세로 스크롤 되지만 기본은 스크롤바 숨김 */
.menu_page {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;   /* Firefox */
  scrollbar-color: transparent transparent; /* 기본은 숨김 */
  -ms-overflow-style: -ms-autohiding-scrollbar; /* IE/Edge에서 자동 숨김 */
  transition: scrollbar-color 0.3s ease;
  margin: 5px 0px; /* 위아래, 좌우 */
}
/* Webkit (Chrome, Safari) - 기본은 숨김 */
.menu_page::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}
/* 마우스 올리면 스크롤바 표시 */
.menu_page:hover {
  scrollbar-color: #999 #f0f0f0; /* Firefox용 스크롤바 색상 보이게 */
}
.menu_page:hover::-webkit-scrollbar {
  background: #f0f0f0;
}
.menu_page:hover::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

/* 메뉴 페이지 전용 스타일 (공통) */
.menu_page .menu {
  width: 160px;
  border: 1px solid;
  border-right-width: 10px;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 6px;
}
/* legend 색상도 menu 내부에서만 상속 */
.menu_page .menu legend {
  color: inherit;
  text-align: center;  /* 가운데 정렬 */
  padding: 0;    /* 안쪽 여백 제거 */
  margin: 0;     /* 바깥 여백 제거 */
  line-height: 1.2;    /* 줄 간격 최소화 */
}
/* 메뉴 제목 링크 (글자 굵게, 밑줄 제거) */
.menu_page .menu_title {
  font-weight: bold;
  text-decoration: none;
}
/* menu1 ~ menu8 색상 적용 (fieldset과 제목 모두에 적용됨) */
.menu_page .menu1,
.menu_page .menu1 a.menu_title { color: #6699CC; border-color: #6699CC; }
.menu_page .menu2,
.menu_page .menu2 a.menu_title { color: #3E9752; border-color: #3E9752; }
.menu_page .menu3,
.menu_page .menu3 a.menu_title { color: #FE7070; border-color: #FE7070; }
.menu_page .menu4,
.menu_page .menu4 a.menu_title { color: #666AC1; border-color: #666AC1; }
.menu_page .menu5,
.menu_page .menu5 a.menu_title { color: #58B195; border-color: #58B195; }
.menu_page .menu6,
.menu_page .menu6 a.menu_title { color: #E3B600; border-color: #E3B600; }
.menu_page .menu7,
.menu_page .menu7 a.menu_title { color: #6F7DB0; border-color: #6F7DB0; }
.menu_page .menu8,
.menu_page .menu8 a.menu_title { color: #E3B600; border-color: #E3B600; }

/* 메뉴 제목 스타일 (기존 크기 유지 + 여백 최소화) */
.menu_page .menu h3 {
  margin: 0 0 6px 0;  /* 하단 여백만 살짝 */
  padding: 0;
  text-align: center;
  line-height: 1.3;
}

/* 메뉴 항목 리스트 */
.menu_page .menu ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

/* 항목 간격 최소화 (단, 가독성 유지) */
.menu_page .menu ul li {
  margin: 3px 0;
  line-height: 1.1;
}

/* 링크 스타일 */
.menu_page .menu ul li a {
  text-decoration: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

/* hover 시 효과 */
.menu_page .menu ul li a:hover {
  text-decoration: underline;
}

/* 메뉴 박스 여백 */
.menu_page .menu {
  padding: 8px;
  margin-bottom: 14px;
}

/* 링크에 패딩과 라운드 추가 */
.menu_page .menu ul li a {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* hover 시 배경 강조 효과 */
.menu_page .menu ul li a:hover {
  background-color: #f0f0f0;
  text-decoration: none; /* 밑줄 제거 */
}