html{
	font-size:10px;
	* {
		font-size: 1.2rem;
		box-sizing: border-box;

	}
	br{
		display: block;
		content: "";
		margin-block: 8px;	
	}
}

body{
	margin:0;
	width:100%;
	height:100%;
}

body.domain_top{
	background: hsl(var(--col),0%,30%);
	.outer p:first-of-type{
		color: #fff;
		font-size: 1.6rem;
		font-weight: bold;
	}
	> main{
		display: flex;
		align-items: center;
		justify-content: center;
		height:900px;
	}
	> main > *{
		width:400px;
		display: flex;
		flex-wrap: wrap;
		gap:16px;
		padding:32px;
		background: hsl(var(--col),0%,40%);
		border-radius: 5px;
	}
	> main > * > *{
		width:100%;
		margin: 0;
		padding: 0;
	}
	> main form{
		display: flex;
		gap:16px;
		flex-wrap: wrap;
	}
	> main form > *{
		display: flex;
		flex-wrap: wrap;
		width:100%;
	}
	> main form > * > *:not(button){
		width: 100%;
	}
	> main form button{
		margin-inline: auto;
		border-radius: 5px;
		border: 1px solid #999;
		font-size: 1.4rem;
	}
	a.change{
		color: #ccc;
	}
	> main form .wrap > span:first-of-type{
		color: hsl(var(--col),0%,80%);
	}
	> main > form input[type=text],input[type=password]{
		width: 100%;
	}
	
}

body:not(.domain_top){
	background: hsl(var(--col),0%,90%);
}

body > header{
	background: #333;
	padding:16px;
	display: flex;
	justify-content:space-between;
	:not(a) {
		color: #fff;
		font-size: 1.4rem;
	}
	a {
		font-size: 1.2rem;
		padding: 4px 8px;
		background: #999;
		border-radius: 5px;
		color: #fff;
	}
}

body{
	gap:2.5vw;	
}


body > nav{
	z-index: 999;
	width: 200px;
	position: fixed;
	background: hsl(var(--col),0%,95%);
	padding: 16px 0 0;
	height: calc(100% - 59px);
	top: 59px;
	overflow-y: auto;
	* {
		font-size: 1.4rem;
	}
	&::-webkit-scrollbar{
		width: 4px;
	}
	&::-webkit-scrollbar-track{
		background-color: hsl(var(--col),0%,70%);
	}
	&::-webkit-scrollbar-thumb{
		background-color: hsl(var(--col-red),50%,45%);
	}
	> *{
		display: block;
		width:100%;
		font-size: 1.2rem;
	}
	> span{
		font-weight: bold;
	}
	:is(a, span){
		font-size: 1.2rem;
		display: block;
		padding:8px;
	}
	a:is(:hover){
		background:hsl(var(--col),0%,90%);
		color: hsl(var(--col-blue),75%,60%) !important;
		text-decoration: none;
	}
	a:is(.focus){
		background:hsl(var(--col),0%,20%);
		color: hsl(var(--col-yellow),90%,50%) !important;
		text-decoration: none;
		border-radius: 10px 0 0 10px;
	}
	> ul{
		padding-left: 8px;
	}
}

body > nav.close{
	width:calc(24px * 3);
	> p {
		display: none;
	}
}

body:not(.domain_top) > main{
	width: 98%;
	padding: 24px 0 0 240px;
	> * {
		width:auto;
		margin-bottom: 16px;
	}
	> :is(p, h1){
		margin-bottom: 8px;
	}
}


body > main{
	h1{
		font-size: 2rem;
		font-size:2rem;
	}
}

body.dashboard .isLinkMsg{
	padding: 16px;
	border: 4px solid hsl(var(--col-blue), 100%, 20%);
	border-radius: 5px;
	margin-block: 24px;
	background: hsl(var(--col-blue), 100%, 30%);
	* {
		color: hsl(var(--col), 0%, 97%);
		font-size: 1.6rem;
	}
	> *{
		margin-top: 16px;
	}
	h2 {
		font-size: 2rem;
		margin-top: 0;
		color: hsl(var(--col-blue), 100%, 97%);
		* {
			font-size: 2rem;
		}
	}
	a {
		color: hsl(var(--col-yellow), 100%, 60%);
	}
	span {
		color: hsl(var(--col-red), 100%, 75%);
		font-weight: bold;
	}
}

body:is(.tableView) .searchWrap{
	padding:8px 16px;
	gap:24px;
	margin-bottom: 24px;
	background: hsl(var(--col),0%,70%);
	border-radius: 5px;
	.items > *{
		border: 1px solid hsl(var(--col),0%,97%);
		padding:4px 16px;
	}
	label{
		padding-inline: 16px;
	}
	> select, .items > select {
		padding-block: 4px;
	}
	> form{
		display: flex;
		gap:8px;
	}
	> form input[type=text]{
		width:250px;
	}
	> form button{
		margin: 0;
		padding:2px 16px;
		background: hsl(var(--col-green), 75%,50%);
		font-size: 1.2rem;
		border-style:none ;
		color: #fff;
		border-radius: 5px;
	}
	a{
		display: flex;
		align-items: center;
		background: hsl(var(--col-skyblue), 90%,40%);
		color: #fff;
		padding-inline:24px;
		border-radius: 5px;
	}
	:is(.items){
		width:100%;
		display: flex;
		flex-wrap: wrap;
		gap:16px;
	}
	
}

body:is(.tableView) > main .wrap{
	background: #fff;
	padding:8px;
	.datas{
		overflow: auto;
		display: block;
	}
}

body:is(.tableView) > main .wrap .datas table{
	tr.header, tr.header th, tr .bg{
		background: hsl(var(--col),0%,40%);
		color: #fff;
		font-weight: normal;
	}
	tr.unBackGround, tr.unBackGround th{
		background: none;
		color: #000;
	}
	:is(th,td) {
		width:auto;
		border: 1px solid hsl(var(--col),0%,70%);
		margin: -1px 0 0 -1px;
		padding:4px 8px;
		word-wrap: normal;
	}
	.header :is(th){
		position: sticky;
		top: 0;
		left: 0;
	}
	:is(th,td).clmNumber{
		width:40px !important;
		text-wrap: nowrap;
	}
	tr:not(:first-of-type):hover{
		background: hsl(var(--col),0%,97%);
	}
}

.tableView .pager{
	margin-top: 24px;
	display: flex;
	gap: 8px;
	margin-top: 24px;
	justify-content: center;
	> * {
		border: 1px solid hsl(var(--col),75%,60%);
		padding: 4px 12px;
		border-radius: 5px;
		text-decoration: none;
	}
	> *.focus {
		background: hsl(var(--col),75%,60%);
		color: #fff;
	}
}

body:is(.isWorkIndex, .isMasterWorkFaqPost, .masterStoreFaqPost) > main .wrap .datas > table{
	> tbody{
		width: 100%;
	}
	> tbody > tr > :is(th,td){
		width: calc(100% / 3);
		vertical-align: top;
	}
	:is(input[type=text], input[type=number],textarea){
		width:100%;
	}
	
}

body:is(.isWorkIndex) > main .wrap .datas > table > tbody > tr > :is(th,td) th{
	width: 30%;
}

body:is(.isWorkIndex, .isMasterWorkFaqPost, .masterStoreFaqPost, .isMasterWorkItwPost, .isStoreDetail) > main .wrap .datas > table,
body:is(.isWorkIndex) > main .wrap .datas > table .isLabels{
	display: flex;
	flex-wrap: wrap;
	gap:8px;
}

body:is(.isWorkIndex) > main .wrap .datas > table .isLabels label{
	border: 1px solid hsl(var(--col),0%,90%);
	padding:4px 8px;
	border-radius: 5px;
}

body:is(.isWorkIndex,.isMasterWorkFaqPost,.masterStoreFaqPost,.isMasterWorkItwPost,.isStoreDetail) > main .wrap .datas > table img{
	width: 100%;
}

body:is(.isMasterWorkItwPost,.isStoreDetail) > main .wrap .datas > table{
	> tbody > tr > th{
		width:150px;
	}
	> tbody > tr > td{
		width:300px;
	}
}

body:is(.masterStoreMoveCost) textarea{
	min-width: 500px;
	height:150px;
}

body:is(.storePrices) > main .wrap .datas table{
	tr:nth-of-type(odd){
		background: hsl(var(--col),0%,95%);
	}
	:is(th,td){
		width:200px;
	}
	td:last-of-type{
		width:600px;
	}
}

body:is(.isGirlPost) > main .wrap .datas{
	overflow-x: unset;
}

body:is(.isGirlPost) > main .wrap .datas > table{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	> :is(thead, tbody, tfoot) {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	> :is(thead, tbody, tfoot) tr{
		display: flex;
		flex-wrap: wrap;
	}
	> :is(thead, tbody) tr.title{
		width: 100%;
	}
	> :is(thead) tr:not(.title) {
		gap: 4px;
		width: calc((100% - 20px) / 6);

	}
	> :is(thead, tbody) tr.title > th{
		width: 100%;
		background: #666;
		padding-block: 8px;
		color: #fff;
	}
	> :is(tbody, thead) img{
		width:100%;
	}
	> :is(thead) tr:not(.title) > :is(th, td){
		width: 100%;
	}
	> tbody th{
		background: #666;
		color: #fff;
		font-weight: normal;
	}
	> tbody > tr:not(.style, .title){
		width: 100%;
		td {
			flex-grow: 1;
		}
		th {
			width: 200px;
		}
		:is(input[type=text], textarea) {
			width: 100%;
		}
	}
	> tbody tr.style {
		width: calc(100% / 7);
		th {
			width: 40%;
		}
		td {
			width: 60%;
		}
		:is(input[type=number], input[type=text]) {
			width: 100%;
		}
	}
	> tfoot :is(tr, th, td){
		width: 100%;
		border: none;
		text-align: center;
		button {
			margin-inline: auto;
		}
	}
}

body:is(.isGalSort) > main .sortOuter{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	> li{
		border: 1px solid hsl(var(--col),0%,90%);
		padding:4px 16px;
		border-radius: 10px;
		cursor: pointer;
	}
}

body:is(.storeReserveDetail) > main .wrap .datas > table{
	width:100%;
	table{
		width:100%;
	}
}
body:is(.storeReserveDetail, .storeRatingPost) > main .wrap .datas > table{
	> tbody > tr > :is(th,td){
		width: calc(100% / 3);
		max-width: 400px;
		vertical-align: top;
	}
	> tbody > tr > :is(th,td) textarea{
		width:100%;
	}
}

body:is(.storeReserveDetail) #asyncMessage{
	> .items{
		overflow-y: scroll;
		height:500px;
		padding-inline: 8px;
	}
	> .items p{
		display: block;
		width:70%;
		background: hsl(var(--col),0%,90%);
		padding:4px 8px;
		border-radius: 5px;
		margin-right: auto;
		margin-bottom: 16px;
	}
	> .items p span{
		display: block;
		color: hsl(var(--col),0%,40%);
	}
	> .items .isStore{
		margin-left: auto;
		margin-right: 0;
	}
}


body:is(.storeNewsPost) > main .wrap .datas > table{
	th{
		width:20%;
		min-width: 200px;
	}
	td{
		width:40%;
		min-width: 400px;
	}
	img{
		width:150px;
	}
	:is(input[type=text],textarea){
		width: 100%;
	}	
}


:is(.cityTableOuter, .categoryTableOuter) {
	overflow-x: unset;
	> table{
		display: flex;
		flex-wrap: wrap;
		width: 90%;
	}
	> table :is(tbody, thead) {
		width: 100%;
	}
	> table :is(tbody, thead) tr {
		width: 100%;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	> table :is(tbody, thead) tr th {
		width: 100% !important;
	}
	> table :is(tbody){
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}
	> table :is(tbody) tr td{
		width: calc((100% - 20px) / 5);
	}
	> table :is(tbody) td.submit{
		width: 100% !important;
		text-align: center;
		border: none;
	}
}