/* 기본 상태 */
.category {
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    display: block;
    color: #333; /* 기본 색상 */
    transform: scale(1); /* 기본 크기 */
    transition: transform 0.2s ease, color 0.2s ease; /* 부드러운 복귀를 위해 필수 */
}

/* 1. 마우스를 올렸을 때만 확대 (떼면 다시 위 기본 상태로 복귀) */
.category:hover {
    transform: scale(1.1); 
    color: #007BFF;
}

/* 클릭했을 때(Active) 효과도 함께 넣어주면 좋습니다 */
.category:active {
    transform: scale(1.05); /* 클릭하는 순간 살짝 눌리는 느낌 */
}

/* 2. 클릭하여 활성화된 상태 유지 (JS에서 클래스 추가 시) */
.category.active-menu {
    transform: scale(1.1) !important; 
    color: #007BFF !important;
    font-weight: bold;
}

.subcategory {
    display: none;
    margin-left: 15px;
    flex-direction: column;
}

a {
    text-decoration: none;
    color: #333;
    display: block;
    margin: 5px 0;
}

h2, h3 {
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

.term {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding: 5px 0;
}
.term a {
    text-decoration: none;
    color: #0073e6;
    display: inline; /* 하이퍼링크를 걸때마다, 줄바꿈이 발생해서 추가함 */
}
.term a:hover {
    text-decoration: underline;
}


.term1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-left: 1.5em;
}
.term1 a {
    text-decoration: none;
    color: #0073e6;
    display: inline; /* 하이퍼링크를 걸때마다, 줄바꿈이 발생해서 추가함 */
}
.term1 a:hover {
    text-decoration: underline;
}


.menu-separator {
    border-top: 2px solid #000;
    margin: 15px 0;
}
.comment-text {
    font-size: 14px;
    color: #ffffff !important; /* 글자색 흰색 강제 적용 */
}

/* 테이블 */
table {
    width: 100%; /* 테이블 너비 지정 (선택사항) */
    border-collapse: collapse; /* 테두리 겹침 방지 */
    overflow-x: auto; /* 반응형 */
    margin: 20px 0;
}
th, td { 
    border: 1px solid black;
    padding: 10px;
    text-align: left;
    word-break: break-word; /* 너무 많은 내용이 들어가는 셀은 줄바꿈 허용 */
}

th {  /* 헤더(th) */
    background-color: #f2f2f2;
    text-align: center; /* 헤더만 중앙 정렬 */
}

td {  /* 데이터 셀은 왼쪽 정렬 (가독성 확보) */
    text-align: left;
}

td:first-child { /* 첫 번째 열(구분)만 다시 중앙 정렬 */
    text-align: center;
}


.center-table th, .center-table td {
    text-align: center;
}

.center-table caption {
    text-align: left;
}


/* 버튼 */

.btn-link {
    display: inline-block;
    margin-top: 10px;         /* 버튼 상단 바깥 여백 */
    padding: 1px 2px;       /* 상하 여백 */
    background: #1e3c72;      /* 진청색 배경 */
    color: #ffffff !important; /* 글자색 흰색 강제 적용 */
    text-decoration: none;
    border-radius: 5px;

    /* 가독성 및 줄 간격 */
    line-height: 1.5;         /* 줄 간격을 1.5배(약 24px)로 설정하여 가독성 확보 */

    /* 단어 잘림 방지 핵심 설정 */
    word-break: keep-all;      /* 한글 단어가 중간에 잘리지 않게 함 */
    overflow-wrap: break-word; /* 아주 긴 단어의 경우 영역 밖으로 나가는 것 방지 */
    text-align: center;        /* 줄바꿈 시 글자들을 중앙으로 정렬 */
}

.btn-link:hover {
    /* 마우스를 올렸을 때 (Hover) */
    background: #2a5298;      /* 약간 더 밝은 청색 */
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px); /* 살짝 떠오르는 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 입체감 추가 */
}


.btn-link-red {
    display: inline-block;
    margin-top: 5px;         /* 버튼 상단 바깥 여백 */
    padding: 0px 2px;         /* 상하 여백 */
    background: #ffe5e5;         /* 배경 제거 */
    text-decoration: none;
    border-radius: 5px;

    /* 가독성 및 줄 간격 */
    line-height: 1.5;

    /* 단어 잘림 방지 */
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
}

.btn-link-red:hover {
    /* 마우스를 올렸을 때 */
    background: #ffcc66;          /* 연한 진홍색 배경 */
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-color: #a00000;
}