:root {
	--color-font-main: #303050;
}

* {
	font-size: 16px;
	margin   : 0;
	padding  : 0;
	color    : var(--color-font-main);
}

h1 {
	font-size: 1.5rem;
	padding  : 0.5rem;
}

h2 {
	padding-top: 0.5rem;
}

h3 {
	padding-top: 1rem;
}

button {
	cursor: pointer;
	&.select { border: 2px black solid; }
}

body {
	overflow      : hidden;
	width         : 100vw;
	height        : 100vh;
	display       : flex;
	flex-direction: column;
}

header {
	padding: 0.5rem;
	> div { margin-left: 2rem; }
}

#app {
	flex-grow: 1;
	overflow : hidden;
	display  : flex;
	padding  : 0.5rem;

	> main {
		overflow: auto;
	}
}

nav {
	flex-shrink : 0;
	overflow    : auto;
	margin-right: 0.5rem;

	> ul {
		list-style           : none;
		display              : grid;
		grid-template-columns: 1fr;
		gap                  : 0.5rem;
		padding              : 0.5rem;
		border               : 1px black solid;

		> li {
			> button {
				padding: 0.5rem;
				width  : 100%;
			}
		}
	}
}

main {
	flex-grow: 1;
	overflow: hidden;
	padding : 2rem;
	border  : 1px gray solid;
}

/* *** carousel *** */

.carousel {
	overflow     : hidden;
	height       : auto;
	border       : 3px black solid;
	border-radius: 0.5rem;

	> ul {
		list-style: none;
		display   : flex;

		> li {
			flex-shrink: 0;

			> img {
				width       : 100%;
				height      : 100%;
				aspect-ratio: 1;
				object-fit  : cover;
			}
		}
	}

	/* controlBar */
	> div {
		display    : flex;
		align-items: center;
		padding    : 0.5rem;

		> ul {
			list-style: none;
			display   : flex;

			> li {
				margin-right: 0.5rem;
				cursor      : pointer;

				&.select {
					color : red;
					cursor: auto;
				}
			}
		}

		/* controlButton */
		> button {
			margin-right: 0.5rem;
			padding     : 5px;
		}
	}
}

#sample_carousel1,
#sample_carousel2 {
	> ul {
		> li {
			width: calc(100% / 3);
		}
	}
}

#sample_carousel3 {
	> ul {
		> li {
			width: calc(100% / 5);
		}
	}
}

/* *** navigator_finder_simple *** */

.navigator_finder_simple {
	overflow: hidden;
	position: relative;
	display : flex;
	height  : 80%;
	border  : 1px gray solid;

	> .rapper {
		flex-grow     : 1;
		overflow      : hidden;
		display       : flex;
		flex-direction: column;
		border        : gray solid;
		border-width  : 0 1px 0 0;

		> .toolBar {
			flex-shrink: 0;
			display    : flex;
			padding    : 5px;

			> div {
				flex-grow: 1;
				display  : flex;

				> input {
					flex-grow: 1;
					padding  : 5px;
				}
			}

			> button {
				flex-shrink: 0;
				margin-left: 5px;
				padding    : 5px;
				width      : 2.5rem;
				height     : 2.5rem;
				cursor     : pointer;
			}
		}

		> .parentItems {
			flex-shrink: 0;
			overflow   : hidden;
			display    : flex;
			padding    : 5px;

			> ol {
				flex-grow : 1;
				display   : flex;
				list-style: none;

				> li {
					margin-right: 5px;
					padding     : 5px;
					border      : 1px gray solid;
					cursor      : pointer;
				}
			}

			> button {
				width : 2.5rem;
				height: 2.5rem;
				cursor: pointer;
			}
		}

		> .items {
			flex-grow: 1;
			overflow : auto;
			padding  : 5px;

			> table {
				width          : 100%;
				border         : 1px gray solid;
				border-collapse: collapse;

				tr:hover {
					background-color: #C0FFC0;
				}

				th {
					padding         : 5px;
					text-align      : left;
					background-color: #C0C0C0;

					&.sort {
						cursor: pointer;
					}
				}

				td {
					padding: 5px;
					border : 1px gray solid;
				}
			}
		}

		> .statusBar {
			flex-shrink : 0;
			padding     : 5px;
			border      : gray solid;
			border-width: 1px 0 0 0;
		}
	}
}

#navigator_search {
	flex-shrink   : 0;
	overflow      : hidden;
	display       : flex;
	flex-direction: column;
	width         : 400px;

	> .toolBar {
		flex-shrink : 0;
		padding     : 5px;
		border      : gray solid;
		border-width: 0 0 1px 0;

		> button {
			width : 2.5rem;
			height: 2.5rem;
			cursor: pointer;

			&:not(:first-child) {
				margin-left: 5px;
			}

			&.ignore {
				background-color: transparent;
			}
		}
	}

	> .parentItems {
		flex-shrink : 0;
		overflow    : auto;
		padding     : 5px;
		border      : gray solid;
		border-width: 0 0 1px 0;

		> ol {
			display   : flex;
			list-style: none;

			> li {
				padding: 5px;
				border : 1px gray solid;
				cursor : pointer;

				&:not(:first-child) {
					margin-left: 5px;
				}
			}
		}
	}

	> .items {
		flex-grow: 1;
		overflow : auto;

		> ul {
			list-style: none;
			padding   : 5px;

			> li {
				border: 1px gray solid;

				&:not(first-child) {
					margin-top: 5px;
					padding   : 5px;
				}
			}
		}
	}

	> .statusBar {
		flex-shrink : 0;
		padding     : 5px;
		border      : gray solid;
		border-width: 1px 0 0 0;
	}
}