:root{
	--col-link:#0044CC;

	--col1-10: hsl(30, 80%, 10%);
	--col1-20: hsl(30, 80%, 20%);
	--col1-30: hsl(30, 80%, 30%);
	--col1-40: hsl(30, 80%, 40%);
	--col1-50: hsl(30, 80%, 50%);
	--col1-60: hsl(30, 80%, 60%);
	--col1-70: hsl(30, 80%, 70%);
	--col1-80: hsl(30, 80%, 80%);
	--col1-85: hsl(30, 80%, 85%);
	--col1-90: hsl(30, 80%, 90%);
	--col1-95: hsl(30, 80%, 95%);
	--col1-97: hsl(30, 80%, 97%);

	--col-00: hsl(0, 0%, 0%);
	--col-05: hsl(0, 0%, 5%);
	--col-10: hsl(0, 0%, 10%);
	--col-20: hsl(0, 0%, 20%);
	--col-30: hsl(0, 0%, 30%);
	--col-40: hsl(0, 0%, 40%);
	--col-50: hsl(0, 0%, 50%);
	--col-60: hsl(0, 0%, 60%);
	--col-70: hsl(0, 0%, 70%);
	--col-80: hsl(0, 0%, 80%);
	--col-85: hsl(0, 0%, 85%);
	--col-90: hsl(0, 0%, 90%);
	--col-95: hsl(0, 0%, 95%);
	--col-97: hsl(0, 0%, 97%);
	--col-100: hsl(0, 0%, 99%);
}

html{
	font-size:10px;
	* {
		font-size: 1.6rem;
		color: var(--col1-20);
	}
	a {
		color: var(--col-100);
		&:hover, &:visited{
			color: var(--col-100);
		}
	}
}

body{
	background: var(--col-05);
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	width: 100%;
	position: relative;
	overflow-x: hidden;
	gap: 24px;
}

body > main{
	max-width: 1050px;
	width: 98%;
	margin: 16px auto;
}


body > main:is(.list, .detail) {
	:is(h1, h2) {
		font-size: 1.8rem;
		text-align: center;
		color: var(--col1-70);
	}
	table {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	table:not(:first-of-type) {
		margin-top: 32px;
	}
	table :is(thead, tbody) {
		width: 100%;
		tr {
			display: flex;
			width: 100%;
		}
		:is(th, td) {
			padding: 6px 8px;
			font-weight: normal;
			font-size: 1.4rem;
			* {
				font-size: 1.4rem;
			}
		}
		th {
			width: 50%;
			color: var(--col-95);
		}
		td {
			width: 25%;
		}
		.can {
			color: var(--col-20);
			font-weight: bold;
		}
		.cant {
			color: var(--col1-97);
		}

	}
	table thead tr {
		border-radius: 10px;
		background: var(--col1-50);
	}
	table tbody tr {
		background: var(--col1-60);
	}
	table tbody tr:nth-of-type(odd) {
		background: var(--col1-70);
	}
}

body > main:is(.detail) {
	h2 {
		margin-top: 24px;
	}
	table :is(thead, tbody) {
		th {
			width: 25%;
			color: var(--col1-20);
		}
		td {
			color: var(--col1-20);
			width: calc(75% / 2);
			flex-grow: 1;
		}
		.isStore {
			flex-wrap: wrap;
		}
		.isStore :is(th, td) {
			width: 100%;
			text-align: center;
			a {
				display: block;
				background: var(--col1-10);
				padding: 8px 16px;
				text-align: center;
				border-radius: 10px;
				color: var(--col-100);
				font-weight: bold;
				font-size: 1.6rem;
			}
		}
	}
	.review {
		* {
			color: var(--col1-97);
		}
	}
	.review p.at {
		width: 100%;
		border: 1px solid var(--col1-70);
		padding: 10px;
		border-radius: 5px;
		margin-top: 8px;
		font-size: 1.4rem;
		color: var(--col-90);
		time {
			display: block;
			font-size: 1.2rem;
			color: var(--col-70);
		}
	}
	.review > a {
		display: block;
		max-width: 300px;
		background: var(--col1-50);
		padding: 4px 16px;
		border-radius: 10px;
		margin: 24px auto;
		text-align: center;
		text-decoration: none;
		color: var(--col-100);
	}
	.review p.at:first-of-type{
		margin-top: 0;
	}
}