: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 {
	border: 1px gray solid;

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

		> input[type="text"] {
			padding: 5px;
			width  : 20rem;
		}

		> button {
			margin-left: 5px;
			padding    : 5px;
		}
	}

	> .parentItems {
		display              : grid;
		grid-template-columns: 1fr 4rem;
		gap                  : 5px;
		padding              : 5px;

		> ol {
			list-style: none;
			display   : flex;
			margin    : 0;
			padding   : 0;

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

	> .items {
		table {
			width       : 100%;
			border      : gray solid;
			border-width: 1px 0 1px 0;
		}

		th {
			padding         : 5px;
			background-color: lightgray;
			text-align      : left;
		}

		th.sort {
			cursor: pointer;
		}

		td {
			padding     : 5px;
			border      : gray solid;
			border-width: 1px 0 0 0;
			cursor      : pointer;
		}
	}

	> .statusBar {
		padding         : 5px;
		background-color: lightgray;
	}
}