/* ============================ 
   기본 스타일 
============================ */
html, body {
    width: 100%;
    height: 100%;
}

body, div, ul, li {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

/* ============================ 
   중앙 정렬을 위한 컨테이너 
============================ */
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    padding: 10px;
    box-sizing: border-box;
}

/* ============================ 
   탭 스타일 
============================ */
.tab-container {
    margin: 10px;
    margin-top: 150px;
    width: 100%;
    max-width: 800px;
    margin-bottom: 150px;
}

.tabnav {
    width: 70%;
    font-size: 0;
}

.tabnav li {
    display: inline-block;
    width: 50%;
    height: 20%;
    text-align: center;
}

.tabnav li a {
    position: relative;
    display: block;
    background: #f8f8f8;
    color: #000;
    padding: 0 10px;
    text-decoration: none;
    font-size: 16px;
}

.tabnav li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
}

.tabnav li a.active:before {
    background: #7ea21e;
}

.tabnav li a.active {
    border-bottom: 1px solid #fff;
}

.tabnav li a:hover,
.tabnav li a.active {
    background: #fff;
    color: #7ea21e;
}

.tab-content-container {
    width: 800px;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 10px;
    height: auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ============================ 
   기타 스타일 
============================ */
.dot-list li::before {
    content: '•';
    margin-right: 8px;
    color: #333;
}

.dot-list li {
    text-indent: -10px;
    margin-left: 10px;
}

.download-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    font-size: 16px;
    text-decoration: none;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #45a049;
}

/* ============================ 
   연구 논문 레이아웃 (수정됨)
============================ */
.paper-layout {
    display: flex;
    flex-direction: column; /* 메뉴 상단, 뷰어 하단 */
    gap: 0;
}

/* HTML의 class="paper-menu"와 매칭 */
.paper-menu {
    display: flex !important; /* 가로 배열 */
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 10px; /* 뷰어와의 간격 */
    gap: 5px; /* 버튼 사이 간격 */
}

.paper-btn {
    flex: 1; /* 버튼들이 공간을 균등하게 차지 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 60px;
	color: #666;
}

/* [추가] 마우스 호버 시 스타일 - style.css보다 우선 적용 */
.paper-btn:hover {
	background: #4169e1 !important;
    color: #f0f0f0 !important; 
    border-color: #4169e1 !important;
}

/* [추가] 호버 시 내부 strong, small 태그 색상도 함께 변경 */
.paper-btn:hover strong,
.paper-btn:hover small {
    color: #f0f0f0 !important;
}

/* 활성화된 버튼은 호버 시에도 흰색 글자 유지 */
.paper-btn.active:hover {
    color: #fff !important;
    background: #4169e1 !important;
}

/* [수정/추가] 버튼이 클릭되어 'active' 클래스가 붙었을 때의 기본 상태 */
.paper-btn.active {
    background: #45a049 !important; /* 클릭된 버튼의 배경색 (로얄 블루) */
    color: #ffffff !important;      /* 글자색 흰색 */
    
}

.paper-btn.active small {
    color: #eeeeee;
}

/* 뷰어 영역 스타일 추가 */
.paper-viewer {
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
}

/* 아이프레임 전체 크기 */
.full-frame {
    width: 100%;
    height: 900px; /* 논문 보기 편하도록 높이 고정 */
    border: none;
    display: block;
}

/* ============================ 
   모바일 대응 CSS 
============================ */
@media (max-width: 768px) {
    .tab-container {
        width: 100%;
        margin-top: 50px;
        padding: 10px;
    }

    .tabnav li {
        width: 100%;
        display: block;
    }

    .tabnav li a {
        padding: 10px;
        line-height: 1.2;
    }
}

/* 작은 화면 대응 */
@media (max-width: 400px) {
    .tab-content-container {
        padding: 5px !important;
    }

    /* PDF 뷰어 높이 조절 */
    .full-frame {
        height: 500px !important;
    }

    /* 메뉴 버튼을 세로로 변경 */
    .paper-menu {
        flex-direction: column;
        gap: 3px;
    }
    
    .paper-btn {
        width: 100%;
        min-height: auto;
        padding: 8px;
    }
}