a, a:link, a:visited, a:hover, a:active {
    color: inherit !important;      /* 색상을 주변 텍스트와 동일하게 고정 */
    text-decoration: none !important; /* 밑줄도 함께 제거 (선택 사항) */
    cursor: pointer;                /* 손가락 모양 아이콘은 유지하여 링크임을 표시 */
}

html {
    height: 100%;
    overflow: auto;
	padding: 0;
    margin: 0;  
	background-color: #212121;
	font-family: 'Pretendard', sans-serif;	
	color: white;
}

body {
	background-color: #212121;
    height: 100%;
	margin: 0;
	padding: 0;
	color: white;
}

/* 상단 고정 메뉴바 */
.fixed-header {
    position: fixed;   /* 화면에 고정 */
    top: 0;            /* 최상단에 밀착 */
    left: 0;           /* 왼쪽 밀착 */
    width: 100%;       /* 가로 꽉 채움 */
    height: 32px;      /* 메뉴바 높이 설정 */
    background-color: #1e2751; /* 배경색 (내용이 안 비치게) */
    z-index: 1000;     /* 다른 요소보다 항상 위에 있도록 설정 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 하단 그림자 (선택) */
    
	box-sizing: border-box; 
    /* 메뉴 내부 정렬을 위해 flex 사용 */
    display: flex;
    align-items: center;
	padding-left: 5px;
	padding-right: 15px;
}

/* 본문 내용 영역 */
.content {
    /* [매우 중요] 헤더 높이(60px)만큼 위 여백을 주어 내용이 가려지지 않게 함 */
	padding-left: 5px;
	padding-right: 15px;
    padding-top: 18px; 
    /*min-height: 100vh;*/ /* 스크롤 테스트를 위한 임시 높이 */
    background-color: #242424;
}

.button {
  text-decoration: none;
  color: white;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #0056b3;
  display: inline-block;
  text-align: center;
  transition: background-color 0.3s ease;
	min-width:50px;
	min-height:16px;
}

/* 마우스 오버 시 효과 */
.button:hover {
  background-color: #0056b3;
  /* 커서 모양 변경 */
  cursor: pointer;
}

/* 클릭(누르는) 중 효과 */
.button:active {
  background-color: #004085;
}

.button.s10 { font-size:10px;}
.button.s11 { font-size:11px;}
.button.s12 { font-size:12px;}
.button.s13 { font-size:13px;}
.button.s14 { font-size:14px;}
.button.s15 { font-size:15px;}
.button.s16 { font-size:16px;}
.button.s17 { font-size:17px;}
.button.s18 { font-size:18px;}

.button.w50 { width:50px;}
.button.w60 { width:60px;}
.button.w70 { width:70px;}
.button.w80 { width:80px;}
.button.w90 { width:90px;}
.button.w100 { width:100px;}

.button.red { background-color:#900000; border: 1px solid #48252b;}
.button.red:hover { background-color:#e23838; border: 1px solid #48252b;}

.button.green { background-color:#054900; border: 1px solid #0a1b02;}
.button.green:hover { background-color:#2aa920; border: 1px solid #0a1b02;}

.button.blue { background-color:#4f5b93; border: 1px solid #252b48;}
.button.blue:hover { background-color:#98a3d7; border: 1px solid #252b48;}

.button.brown { background-color:#503100; border: 1px solid #2b1a00;}
.button.brown:hover { background-color:#957748; border: 1px solid #2b1a00;}


/* 셀렉트 */
select {
	border:1px solid #ccc;
	background:#fff;
	height:24px;
	padding-left:5px;
	border-radius:2px;
	font-size:13px;
	vertical-align:top;
	max-width:100%;
	border-radius: 5px;

}

.input {
	border:1px solid #ccc;
	height:22px;
	font-size:13px;
	padding: 1px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
}
input[type=checkbox]{width:20px;height:20px; vertical-align:middle;}
input[type=radio]{width:19px;height:19px; vertical-align:middle;}

input[type=submit] {
	cursor: pointer;
	border:4px #777777;
	background:#3d3d3d;
	height:34px;
	font-size:16px;
	text-align:center; color:#333;
	vertical-align:middle;
	border-radius:4px;
	min-width:100px;
	color: white;
}

textarea { box-sizing:border-box; padding:6px 9px; width:100%; font-size:13px; line-height:1.4; color:#333; border:1px #ccc solid; border-radius:2px; }
textarea::placeholder { color:#999; }

/* iframe 스타일 */
iframe {
	display: block; /* iframe은 기본적으로 inline 요소이므로 block으로 변경합니다 */
	height: 96vh; /* 뷰포트 높이의 100% */
	width: 99vw; /* 뷰포트 너비의 100% */
	border: none; /* 기본 테두리를 제거합니다 */
}

/* 화면 중앙에 배치된 레이어 */
.center_box {
  display: flex;
  justify-content: center; /* 수평 중앙 정렬 */
  align-items: center;     /* 수직 중앙 정렬 */
  height: 90vh;           /* 예시: 뷰포트 전체 높이 */
}

.box {
  min-width: 700px;
  min-height: 120px;
  background-color: #bababa;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden; /* 모서리 둥글게 처리된 부분의 내용이 넘치지 않도록 */
  color: #000000;
}

.box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #585858;
  padding: 10px 15px;
  font-size: 14px;
}

.box-title {
  opacity: 0.7;
}

.copy-icon {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.copy-icon:hover {
  opacity: 1;
}

.box-text {
  padding: 0px 15px 0px 15px;
  margin: 0; /* pre 태그의 기본 마진 제거 */
  overflow-x: auto; /* 내용이 길면 스크롤 생성 */
  font-size: 14px;
  line-height: 1.7;
  background-color: #bababa;
  white-space: pre-wrap; /* 줄바꿈 유지 */
}

.box-form {
	display: inline-block;
	text-align:left;
	min-width: 100px;
}


/* 부모 컨테이너 */
.container {
display: flex;       /* 가로 배치 시작 */
gap: 10px;          /* 레이어 사이의 간격 (선택 사항) */
width: 100%;        /* 전체 너비 */
}


/* 자식 레이어 (왼쪽) */
.left-layer {
flex: 1;            /* 남은 공간을 채움 (비율 조정 가능) */
 /*background-color: #f0f0f0; */
padding: 5px 0px 50px 0px;
}

/* 자식 레이어 (오른쪽) */
.right-layer {
flex: 0 ;            /* 왼쪽과 동일한 비율로 설정 */
 /*background-color: #e0e0e0; */
padding: 5px 30px 50px 0px;

}

/* 테이블 기본 설정 */
.board-table {
	width: 100%;
    border-collapse: collapse; /* 테두리 사이 간격 제거 */
    margin: 20px 0px;
    font-family: 'Pretendard', sans-serif; /* 현대적인 폰트 적용 */
}

/* 상단 제목(th) 영역 스타일 */
.board-table thead tr {
    background-color: #f8f9fa; /* 엑셀보다 세련된 연회색 배경 */
    border-top: 2px solid #333; /* 최상단 강조 선 */
    border-bottom: 1px solid #ddd; /* 제목과 본문 구분 선 */
}


.board-table th {
    padding: 12px;
    font-weight: 600;
    color: #444;
    text-align: center;
}

/* 본문 영역 스타일 */
.board-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #eee; /* 가로 구분선만 표시 */
    color: #666;
}

/* 좌우 선을 없애기 위해 세로 선(border-left/right)은 설정하지 않음 */

/* 제목 칸만 왼쪽 정렬 (가독성 증대) */
.board-table td.title {
    text-align: left;
    color: #333;
}

/* 마우스를 올렸을 때(Hover) 배경색 변경 */
.board-table tbody tr:hover {
    background-color: #f1f7ff; /* 은은한 하늘색으로 하이라이트 */
    transition: background-color 0.2s ease; /* 부드러운 변화 효과 */
}

.board-table tbody tr.my-exception {
    background-color: #dbdbdb; 
}

.board-table tbody tr.my-exception:hover {
    /*background-color: inherit; /* 원래의 스타일을 가져오고 hover 효과를 무시 */
    transition: none; /* 부드러운 변화 효과를 미적용 */
}

/* 링크 색상 제거 (이전에 드린 팁 적용) */
.board-table a {
    color: inherit;
    text-decoration: none;
}

/* 1. 행에 상대 위치(relative) 부여 */
.board-table tr {
  position: relative;
}

/* 2. 링크를 행 전체 크기로 확장 */
.board-table td a.stretched-link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1; /* 링크가 다른 td 위를 덮도록 설정 */
}


.password-container {
	position: relative;
}

.toggle-visibility {
	position: relative;
	transform: translateY(-50%);
	cursor: pointer;
}

table{
	margin: 20px 0px 20px 0px;
	font-family: 'Pretendard', sans-serif; /* 현대적인 폰트 적용 */
	border-collapse:collapse;
	min-width:300px;
}

td.leader {
  position:relative;
  padding:6px 0;          /* 위아래 여백 */
  white-space:nowrap;
}

td.leader::before{
  content:"";
  position:absolute;
  top:80%;
  left:0; right:0;
  border-bottom:1px dotted #666;  /* 점선 */
}

td.leader span{                   /* 실제 텍스트 */
  position:relative;              /* 배경에서 띄우기 */
  background:#fff;                /* 셀 배경색과 동일 */
  padding:0 6px;                  /* 양쪽에 여백을 줘 점선이 비도록 */
}