html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* 전체 높이를 100%로 설정 */
    display: flex;
    flex-direction: column;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* 헤더 스타일 */
header {
    height: 60px; /* 고정 높이 */
    background: #35424a;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
}

.tabs {
    display: flex;
    gap: 10px;
}

.tab-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    padding: 10px 15px;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    border-bottom: 2px solid #87CEEB;
    font-weight: bold;
}

.tab-content {
    display: none;
    padding: 20px;
}

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

/* 메인 콘텐츠 영역 */
main {
    flex: 1; /* 남은 공간을 차지하도록 설정 */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* 스크롤 가능 */
}

/* 푸터 스타일 */
footer {
    height: 40px; /* 고정 높이 */
    background-color: #f4f4f4;
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

.group-header {
    background-color: #90EE90;
    font-weight: bold;
    padding: 10px;
    display: flex;
    justify-content: space-between; /* 좌우로 요소 배치 */
    align-items: center; /* 수직 정렬 */
}

.law-header {
    font-weight: bold;
    padding: 10px;
}

/* 체크리스트 스타일 */
.group {
    margin-bottom: 30px;
}

.group-title {
    background-color: #90EE90;
    padding: 10px;
    margin: 0;
}

.law-title {
    background-color: #87CEEB;
    padding: 10px;
    margin: 0;
    display: flex;
    justify-content: space-between; /* 제목과 버튼을 양쪽 끝으로 배치 */
    align-items: center; /* 수직 정렬 */
}

.checklist-table {
    width: 100%;
    border-collapse: collapse;
}

.table-header {
    display: flex;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    font-weight: bold;
}

.table-row {
    display: flex;
    border: 1px solid #ddd;
    border-top: none;
    min-height: fit-content;
}

.col-category {
    width: 50%;
    padding: 10px;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: flex-start;
}

.col-content {
    width: 50%;
    padding: 10px;
    border-right: 1px solid #ddd;
}

.content-group {
    margin-bottom: 15px;
}

/* 체크박스 스타일 */
input[type="checkbox"] {
    width: 20px; /* 체크박스 크기 */
    height: 20px; /* 체크박스 크기 */
    margin: 0 10px 0 0; /* 체크박스와 텍스트 사이 여백 */
    cursor: pointer; /* 마우스 커서 변경 */
    accent-color: #87CEEB; /* 체크박스 선택 시 색상 */
    border: 2px solid #ddd; /* 체크박스 테두리 */
    border-radius: 4px; /* 체크박스 모서리 둥글게 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 체크박스 그림자 */
}

input[type="checkbox"]:hover {
    border-color: #87CEEB; /* 체크박스에 마우스를 올렸을 때 테두리 색상 */
    box-shadow: 0 0 5px rgba(135, 206, 235, 0.5); /* 체크박스에 마우스를 올렸을 때 그림자 */
}

input[type="checkbox"]:checked {
    background-color: #87CEEB; /* 체크박스 선택 시 배경색 */
    border-color: #87CEEB; /* 체크박스 선택 시 테두리 색상 */
    box-shadow: 0 0 5px rgba(135, 206, 235, 0.8); /* 체크박스 선택 시 그림자 */
}

/* 체크박스와 텍스트 정렬 */
.content-item {
    display: flex;
    align-items: center;
    gap: 10px; /* 체크박스와 텍스트 사이 간격 */
    margin-bottom: 10px; /* 항목 간 간격 */
    font-size: 16px; /* 텍스트 크기 */
    font-weight: bold; /* 텍스트 강조 */
}

.clause-items {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.clause-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.note-input {
    width: 100%;
    height: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    resize: none;
}

.note-input:focus {
    outline: none;
    border-color: #87CEEB;
    box-shadow: 0 0 5px rgba(135, 206, 235, 0.5);
}

.download-btn {
    position: relative;
    right: 40px;
    padding: 8px 16px;
    background-color: #87CEEB;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.download-btn:hover {
    opacity: 0.9;
}

.view-law-btn {
    margin-left: auto; /* 버튼을 우측으로 밀어냄 */
    padding: 5px 10px;
    background-color: #87CEEB;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.view-law-btn:hover {
    background-color: #4682B4;
}

.checklist-container {
    display: flex;
    gap: 20px;
    height: calc(100vh - 120px); /* 헤더와 여백을 제외한 높이 */
}

.checklist-main {
    flex-grow: 1;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: auto; /* 독립적인 스크롤 */
    max-height: 100%; /* 부모 높이에 맞춤 */
    width: 50%;
}

.group-name {
    font-weight: bold;
    font-size: 16px;
}

.law-header{
    background-color: #87CEEB;
}

.law-name {
    font-weight: bold;
    font-size: 16px;
}

.question-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question-left {
    flex: 1;
    text-align: left;
}

.question-right {
    flex: 0 0 auto;
    text-align: right;
}

.status-checked {
    color: green; /* 초록색 */
    font-weight: bold;
}

.status-unchecked {
    color: red; /* 빨간색 */
    font-weight: bold;
}

/* 법령 컨테이너 */
.law-container {
    width: 50%;
    border: 1px solid #ddd;
    padding: 10px;
    overflow-y: auto;
    max-height: 100%;
    box-sizing: border-box;
}

.law-container h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

#law-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* 드로어 스타일 */
.drawer {
    position: fixed;
    top: 0;
    left: -400px; /* 기본적으로 화면 밖에 숨김 */
    width: 430px;
    height: 100%;
    display: flex; /* 드로어를 분할하기 위해 flex 사용 */
    background-color: transparent;
    overflow: hidden;
    transition: left 0.3s ease;
    z-index: 1000;
}

.drawer.open {
    left: 0; /* 드로어가 열리면 화면 안으로 이동 */
}

/* 드로어 내용 영역 */
.drawer-content {
    background-color: white;
    
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 드로어 그림자 */
    flex: 1; /* 드로어의 대부분을 차지 */
    padding: 20px;
    overflow-y: auto;
}

/* 드로어 내부 리스트 스타일 */
.drawer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.drawer-content li {
    margin-bottom: 5px;
}

.drawer-content a {
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.drawer-content a:hover {
    text-decoration: underline;
}

/* 드로어 닫기 버튼 영역 */
.drawer-area {
    width: 30px; /* 닫기 버튼 영역의 너비 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-btn {
    top: 50%; /* 화면의 세로 중심 */
    background-color: #4682B4;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    width: 100%; /* 버튼이 영역 전체를 차지 */
    height: 60px; /* 버튼이 영역 전체를 차지 */
}

.drawer-btn:hover {
    background-color: #4682B4; /* 호버 시 배경색 변경 */
}

/* 토글 아이콘 스타일 */
.toggle-icon {
    margin-left: auto; /* 아이콘을 오른쪽 끝으로 정렬 */
    cursor: pointer; /* 클릭 가능한 커서 */
    font-size: 14px; /* 아이콘 크기 */
    color: #333; /* 기본 색상 */
    transition: transform 0.3s ease; /* 회전 애니메이션 */
}

.toggle-icon.expanded {
    transform: rotate(180deg); /* 펼쳐진 상태에서 아이콘 회전 */
}

/* 라벨과 입력 필드 스타일 */
#overview-content .content label {
    display: inline-block; /* 라벨을 고정된 너비로 설정 */
    width: 100px; /* 라벨 너비 */
    text-align: right; /* 텍스트를 오른쪽 정렬 */
    margin-right: 4px; /* 라벨과 필드 사이 간격 */
}

#overview-content .content input[type="text"] {
    height: 40px;
    width: 240px; /* 입력 필드 너비 */
    padding: 5px; /* 입력 필드 내부 여백 */
    border: 1px solid ; /* 테두리 스타일 */
    border-radius: 4px; /* 모서리 둥글게 */
    box-sizing: border-box; /* 패딩 포함 너비 계산 */
    font-size: 14px; /* 폰트 크기 */
}

/* 부모 요소에 상대 위치 설정 */
#overview-content .content {
    position: relative;
}

/* 추천 필드 스타일 */
.suggestions {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 1000;
    padding: 5px 0;
    display: none; /* 기본적으로 숨김 */
}

.suggestions div {
    padding: 5px 10px;
    cursor: pointer;
}

.suggestions div:hover {
    background-color: #f0f0f0;
}

.input-wrapper {
    position: relative;
    margin-bottom: 12px; /* 입력 필드 간 간격 */
}

.submit-btn {
    margin-top: 30px;
    margin-left: 30px;
    background-color: #87CEEB;
    color: white;
    width: 320px;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

/* content-wrapper 스타일 */
.content-wrapper {
    display: flex;
    justify-content: flex-start; /* 좌측 정렬 */
    align-items: flex-start; /* 수직 정렬 */
    gap: 20px; /* 요소 간 간격을 줄임 (기존 20px에서 10px으로 변경 가능) */
    padding: 10px; /* 내부 여백 */
}

/* 입력 데이터 미리보기 영역 스타일 */
.data-preview {
    width: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.data-preview h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

/* data-preview-list 스타일 */
.data-preview ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data-preview li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}

.data-preview li span:first-child {
    display: inline-block;
    width: 80px; /* 라벨 부분 고정 너비 */
    font-weight: bold;
    color: #333;
    text-align: right; /* 라벨 텍스트 오른쪽 정렬 */
}

.data-preview ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.data-preview li {
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
}