@charset "utf-8";


/* 네비게이션 전체 컨테이너 */
    .view-nav-wrapper {
        background-color: #fff;
        margin-bottom: 30px;
    }

    .view-nav-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* 브레드크럼 스타일 (좌측) */
    .breadcrumbs {
        display: flex;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 14px;
        color: #888;
    }

    .breadcrumbs li { display: flex; align-items: center; }

    /* 구분자 (>) */
    .breadcrumbs li:not(:last-child)::after {
        content: '>';
        margin: 0 10px;
        font-size: 11px;
        color: #ccc;
        font-family: sans-serif;
    }

    .breadcrumbs a {
        text-decoration: none;
        color: #888;
        transition: color 0.2s;
    }

    .breadcrumbs a:hover { color: #333; }

    /* 현재 페이지 위치 강조 */
    .breadcrumbs .current-cat {
        color: #333;
        font-weight: 600;
    }

    /* 우측 제어 버튼 (목록으로 가기 등) */
    .nav-ctrl-right .btn-list {
        padding: 6px 15px;
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 13px;
        color: #666;
        text-decoration: none;
    }
    .nav-ctrl-right .btn-list:hover { background: #eee; color: #333; }

    /* 반응형 대응 */
    @media (max-width: 768px) {
        .view-nav-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
        .nav-ctrl-right { display: none; } /* 모바일에서 버튼 숨김 혹은 하단 배치 */
    }


/* 1. 컨테이너 및 제목 */
    .policy-container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
    .policy-container .main-title { font-size: 26px; font-weight: bold; margin-bottom: 40px; color: #111; }

    /* 2. 가로 2열 배열 핵심 (그리드) */
    .policy-container .wrap {
        display: grid !important;
        /* PC: 2열 고정 (1:1 비율) */
        grid-template-columns: repeat(2, 1fr) !important; 
        /* 섹션 사이 간격: 가로 80px, 세로 60px */
        column-gap: 80px !important;
        row-gap: 60px !important;
        /* 내용이 적어도 같은 행의 섹션 높이를 일치시킴 */
        align-items: stretch !important;
    }

    /* 3. 개별 섹션 레이아웃 (높이 균등화용 Flex) */
    .policy-container .section {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .policy-container .section h2 { font-size: 19px; font-weight: 700; margin-bottom: 20px; color: #000; }
    
    /* 리스트 영역: 남은 높이를 모두 차지하게 하여 하단 버튼 위치를 맞춤 */
    .policy-container .list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
    .policy-container .list li { margin-bottom: 12px; }
    .policy-container .list li a { text-decoration: none; color: #666; font-size: 15px; transition: 0.2s; }
    .policy-container .list li a:hover { color: #000; text-decoration: underline; }
	.policy-container .list li.empty {font-size: 15px; color: #666;}


    /* 4. 하단 버튼 (항상 섹션 바닥에 고정) */
    .policy-container .btn-more { 
        display: inline-block; 
        margin-top: 20px; 
        color: #3b82f6; 
        text-decoration: none; 
        font-weight: 600; 
        font-size: 14px;
        align-self: flex-start;
    }

    /* 5. 반응형: 모바일 (800px 이하일 때 한 줄로) */
    @media (max-width: 800px) {
        .policy-container .wrap {
            grid-template-columns: 1fr !important; /* 1열로 변경 */
            row-gap: 40px !important;
        }
        .policy-container .main-title { font-size: 22px; text-align: center; }
    }



	.list-container { max-width: 1000px; margin: 50px auto; padding: 0 20px; }

/* 상단 헤더 및 검색 */
.list-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; gap: 20px; }
.list-header h1 { font-size: 24px; font-weight: 800; }

.search-box { display: flex; gap: 5px; }
.search-box input { padding: 8px 15px; border: 1px solid #ddd; border-radius: 4px; width: 200px; }
.search-box button { padding: 8px 15px; background: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; }

/* 카테고리 탭 */
.category-tabs { display: flex; gap: 10px; margin-bottom: 30px; overflow-x: auto; padding-bottom: 5px; }
.tab-item { padding: 10px 20px; background: #fff; border: 1px solid #ddd; border-radius: 30px; text-decoration: none; color: #666; font-size: 14px; white-space: nowrap; }
.tab-item.active { background: #3b82f6; color: #fff; border-color: #3b82f6; font-weight: 600; }

/* 테이블 리스트 */
.board-list { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.board-list th { background: #f1f3f5; padding: 15px; font-size: 14px; border-bottom: 1px solid #dee2e6; }
.board-list td { padding: 15px; text-align: center; border-bottom: 1px solid #eee; font-size: 15px; }
.board-list .td-subject { text-align: left; font-weight: 500; }
.board-list .td-subject a { text-decoration: none; color: #333; }
.board-list .td-subject a:hover { text-decoration: underline; }
.board-list .version-tag { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057; }

/* 페이지네이션 */
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 40px; }
.pagination a { padding: 8px 12px; border: 1px solid #ddd; background: #fff; text-decoration: none; color: #666; border-radius: 4px; font-size: 14px; }
.pagination a.active { background: #333; color: #fff; border-color: #333; }

/* 반응형 처리 */
@media (max-width: 768px) {
	.list-header { flex-direction: column; align-items: flex-start; }
	
}



.view-container { max-width: 1200px; margin: 0 auto 30px auto; padding: 0 20px; }

/* 메인 레이아웃 (Grid 활용) */
.view-wrapper {
	display: grid;
	grid-template-columns: 1fr 300px; /* 좌측 본문 1 : 우측 리스트 300px */
	gap: 50px;
	align-items: start;
}

/* --- [좌측] 본문 영역 --- */
.view-content {
	/*border-top: 2px solid #333;*/
	padding-top: 0px;
}
.view-header { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.view-header h1 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.view-header .meta { color: #888; font-size: 14px; }
.view-header .version-label { display: inline-block; padding: 2px 10px; background: #3b82f6; color: #fff; border-radius: 4px; font-size: 13px; font-weight: 600; margin-right: 10px; }

.content-body { font-size: 16px; color: #444; min-height: 500px; }
/* 테이블 스타일 정제 (본문 내 테이블 대응) */
.content-body table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.content-body th, .content-body td { border: 1px solid #ddd; padding: 12px; text-align: left; vertical-align: middle; }
.content-body th { background: #f9f9f9; font-weight: 600; }

/* --- [우측] 사이드 리스트 --- */
.side-list {
	background: #f9f9f9;
	padding: 25px;
	border-radius: 8px;
	position: sticky; /* 스크롤 시 따라옴 */
	top: 20px;
}
.side-list h3 { font-size: 17px; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.side-list ul { list-style: none; }
.side-list li { margin-bottom: 12px; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
.side-list li:last-child { border: none; }
.side-list li a { text-decoration: none; color: #666; font-size: 14px; display: block; 
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 250px;
}
.side-list li a:hover { color: #000; font-weight: 500; }
.side-list li a.active { color: #3b82f6; font-weight: 700; }
.side-list li .v-tag { font-size: 12px; color: #999; margin-left: 5px; }

/* 반응형: 모바일 (900px 이하) */
@media (max-width: 900px) {
	.view-wrapper { grid-template-columns: 1fr; gap: 40px; }
	.side-list { position: static; }
	.side-list li a {width: 310px;}
}