body {
	display: flex;
    flex-direction: column;
	min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: '맑은 고딕';
}

header {
    background-color: #f4f4f4;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

nav {
    display: flex;
    align-items: center;
    width: 100%;
}

nav a {
    text-decoration: none;
    color: #333;
    margin-right: 20px;
    font-size: 18px;
}

nav a.logo {
    font-size: 24px;
    font-weight: bold;
    margin-right: 40px;
}

nav a:hover {
    color: #007BFF;
}

#login-container {
    width: 400px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

#login-error {
    width: 100%;
    height: 70px;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	padding: 20px;
	gap: 20px;
}

.report-detail {
    display: flex;
    flex-direction: column;
    gap: 50px;
    margin: 10px;
	width: 750px;
}

.report-result-wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 버튼 스타일 */
	.button-container,
	#switch-buttons	{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

    #logout-button {
        width: 100px;
    }
	
	.tab-button {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		min-width: 60px;
		height: 35px;
		border-radius: 30px;
		border: 1px solid hsl(215, 15%, 82%);
		background-color: hsl(215, 15%, 97%);
		color: hsl(215, 15%, 22%);
		padding: 0 10px;
		margin: 5px 0;
		box-sizing: border-box;
		cursor: pointer;
	}
	
	.tab-button:hover,
	.tab-button:hover .number-button,
    #logout-button:hover	{
		background-color: hsl(215, 15%, 82%);
	}

	.tab-button.active {
		background-color: hsl(215, 15%, 82%);
	}

	.number-button {
		margin-right: 20px;
		border: none;
		border-radius: 100px;
		cursor: pointer;
	}
	
	.tab-button.active .number-button {
		background-color: hsl(215, 15%, 82%);
	}
	
	.tab-button:hover,
    .btn.reset-btn:hover,
    .btn.delete-btn:hover {
		border: 3px dashed black;
	}

	.tab-button .reset-button,
	.tab-button .close-button {
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		margin: 0;
	}

	.button-container .tab-button .reset-button {
		margin-right: 5px;
	}

	.button-container .tab-button .close-button {
		margin-left: 5px;
	}
	
	.switch-buttons {
		width: 20px;
	}

input:disabled {
    cursor:not-allowed;
}

.report-input-wrap {
    flex-direction: column;
    gap: 20px;
}

.report-input-wrap label,
.report-input-wrap input,
.report-input-wrap select {
    display: block;
    width: 160px;
    margin-bottom: 10px;
}

input[type="text"][name="customer-input"],
input[type="text"][name="salesperson-input"] {
	width: 160px;
}

/* 자동완성 */
    .custom-container {
        display: flex;
        flex-direction: row;
    }

    .autocomplete-wrapper {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 8px 12px;
        border: 1px solid hsl(215, 15%, 82%);
        border-radius: 20px;
        box-sizing: border-box;
        gap: 5px;
        font-size: 10pt;
    }

    #customer-input {
        padding-right: 50px;
    }

    .autocomplete-suggestion {
        display: flex;
        padding: 8px 14px;
        border-radius: 20px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
    }

    .autocomplete-suggestion.highlight {
        background-color: lightgray;
    }

    #enter-wrapper {
        border: none;
        border-radius: 10px;
        padding: 1px 12px;
        background-color: hsl(215, 15%, 75%);
        font-size: 8pt;
    }

.custom-select,
.custom-input,
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid hsl(215, 15%, 82%);
    border-radius: 30px;
    box-sizing: border-box;
}

.지원결과 > * {
    display: flex;
}

.지원결과 {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.지원결과-header {
    flex-direction: row;
    align-items: center;
}

.지원결과-wrap,
.고객사-그룹 {
    flex-direction: column;
    gap: 10px;
}

.지원결과-결과,
.지원결과-세부결과 {
    display: flex;
    align-items: center;
    gap: 10px;
}

#담당영업-등록-메시지 {
    display: flex;
	align-items: center;
    gap: 10px;
    background: none;
    border: none;
    color: #B80000;
}

#담당영업-등록-메시지 button {
    width: 60px;
    height: 35px;
    border: 1px solid hsl(355, 98%, 87%);
    background-color: hsl(355, 98%, 97%);
    border-radius: 30px;
    cursor: pointer;
    margin: 5px 0;
}

#담당영업-등록-메시지 button:hover {
    background-color: hsl(355, 98%, 87%);
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup h2,
.popup p {
	text-align: center;
	word-break: keep-all;
}

.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
    border-radius: 30px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    gap: 20px;
}

.popup-input {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.popup-input input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 30px;
    border: 1px solid #ddd;
}

.popup-button {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn {
    width: 60px;
    height: 35px;
	border-radius: 30px;
	border: 1px solid hsl(215, 15%, 82%);
	background-color: hsl(215, 15%, 97%);
	color: hsl(215, 15%, 22%);
    cursor: pointer;
    margin: 5px 0;
}

#login-button {
    align-items: center;
    width: 100%;
}

#login-button:hover,
#logout-button:hover,
#add-work:hover,
#copy-button:hover,
#undo-button:hover,
#add-sales-btn:hover,
#cancel-add:hover,
#cancel-edit:hover,
#cancel-delete:hover,
.btn.add-support-result:hover {
	background-color: hsl(215, 15%, 82%);
}

#cancel-button,
#confirm-delete {
    border: 1px solid hsl(355, 98%, 87%);
    background-color: hsl(355, 98%, 97%);
}

#cancel-button:hover,
#confirm-delete:hover {
    background-color: hsl(355, 98%, 87%);
}

#complete-button,
#register-button,
#confirm-edit {
    border: 1px solid hsl(210, 100%, 80%);
    background-color: hsl(210, 100%, 96%);
    color: hsl(210, 100%, 38%);
}

#complete-button:hover,
#register-button:hover,
#confirm-edit:hover {
    background-color: hsl(210, 100%, 80%);
}

body.blurred {
    filter: blur(5px);
    pointer-events: none;
}

.업무보고표 table,
.report-result table {
    border-collapse: collapse;
}

.support-result-set {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 30px;
    background-color: hsl(215, 15%, 82%);
}

.support-result-set-num { flex-grow: 1; text-align: center; }
.support-result-input-wrap { flex-grow: 5; margin-top: 10px; }
.support-result-btn { flex-grow: 0.5;}

/* sales.html */
.search-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 30px;
}

#search-input {
	width: 200px;
}

/* 테이블 열의 고정 너비 설정 */
/* 첫 번째 열 너비 */
.sales-table th:nth-child(1),
.sales-table td:nth-child(1) {
    width: 300px;
	height:35px;
}
/* 두 번째 열 너비 */
.sales-table th:nth-child(2),
.sales-table td:nth-child(2) {
    width: 100px;
	height:35px;
	text-align: center;
}
/* 세 번째 열 너비 */
.sales-table th:nth-child(3),
.sales-table td:nth-child(3) {
    width: 36px;
	height:35px;
}

/* 드롭다운 오버레이*/
.dropdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1000;
}

.dropdown-menu {
    position: absolute;
	display: flex;
	flex-direction: row;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1001;
}

.dropdown-menu button {
    display: block;
    width: 100%;
    background: none;
    border: none;
	border-radius: 30px;
    padding: 8px 16px;
    text-align: left;
    cursor: pointer;
}

.dropdown-menu button:hover {
    background-color: #f4f4f4;
}

/* 페이지네이션 */
.page-number {
    cursor: pointer;
    margin: 0 5px;
    padding: 5px 15px;
    border-radius: 20px;
	border: 1px solid hsl(215, 15%, 82%);
	background-color: hsl(215, 15%, 97%);
	color: hsl(215, 15%, 22%);
}

.page-number.active,
.page-number:hover {
    background-color: hsl(215, 15%, 82%);
    font-weight: bold;
}

/* 드롭다운 메뉴의 기본 아이콘 스타일 */
.tab-button button .material-symbols-outlined,
.dropdown-menu button .material-symbols-outlined,
.support-result-btn .reset-btn,
.support-result-btn .delete-btn,
.report-result-button button .material-symbols-outlined {
    font-variation-settings: 'FILL' 0; /* 기본 상태 아이콘 */
}

/* 드롭다운 메뉴 아이콘 hover 시 스타일 변경 */
.tab-button button:hover .material-symbols-outlined,
.dropdown-menu button:hover .material-symbols-outlined,
.support-result-btn .reset-btn:hover,
.report-result-button button:hover .material-symbols-outlined {
    font-variation-settings: 'FILL' 1; /* hover 상태 아이콘 */
}

.more-icon {
	border-radius: 30px;
	border: none;
	background-color: white;
	cursor: pointer;
}

/* 메시지 출력 */
#notification {
	display: flex;
	width: 80%;
	height: 35px;
	border-radius: 30px;
	align-items: center;
	justify-content: center;
}
#notification.success {
	border: 1px solid hsl(144, 72%, 77%);
	background-color: hsl(144, 72%, 95%);
	color: hsl(144, 72%, 21%);
}

#notification.error {
	border: 1px solid hsl(355, 98%, 87%);
    background-color: hsl(355, 98%, 97%);
    color: hsl(355, 98%, 29%);
}