body { margin:0px; padding:0px; font-family: 'S-Core Dream 4' !important; background: var(--gray-secondary) !important;}

:root {
	--set-primary:#C00530;
	--set-primary-light:#FFE5EB;
	--set-primary-hover:#8c0020;
	--set-secondary:#FFE5EB;
	--gray-primary:#C4C4C4;
	--gray-secondary:#F5F5F5;
	--main-white:#ffffff;
	--text-gray-1:#898989;
	--text-dark:#505050;
	--light-gray:#D9D9D9;
	--primary-blue:#0265C1;
	--secondary-blue:#DAECFF;
	--trial-color-01:#8ae3dc6b;
	--trial-color-02:#cfe38a6b;
	--trial-color-03:#e38a8a6b;
	--trial-color-04:#8e8ae36b;
	--trial-color-05:#e38add6b;
}

.wrapper {
	background: var(--gray-secondary);
    padding-bottom: 100px;
    position: absolute;
    width: 100%;
}

.main-lib {
	margin:0px 0px;
}

.main-lib h1, .main-lib h2, .main-lib h3, .main-lib h4, .main-lib h5, .main-lib h6, .main-lib p {
	margin:0px;
	padding:0px;
	color:var(--text-dark);
	font-weight:600;
}

.top-title a, .top-title h1 a, .top-title h2 a .top-title h3 a, .top-title h4 a, .top-title h5 a, .top-title h6 a, .main-lib p a{
	text-decoration:none;
	color:var(--text-dark);
}

.main-lib h1 {
	font-size:24px;
}

.main-lib h2 {
	font-size:22px;
}

.main-lib h3 {
	font-size:20px;
}

.main-lib h4 {
	font-size:18px;
}

.main-lib h5 {
	font-size:16px;
}

.main-lib h6 {
	font-size:14px;
}

.main-lib p {
	
}

.top-title {
	padding:10px;
	display:flex;
	justify-content: space-between;
	gap:10px;
	align-items: center;
}

.top-title aside {
	font-weight:500;
	font-size:15px;
}

.white-card-container {
	background-color:var(--main-white);
	margin:10px;
	border-radius:15px;
}

.slider-container {
	background-color:var(--main-white);
	border-radius:15px;
	margin-bottom:10px;
}


.top-card {
	display:flex;
	justify-content: space-between;
	padding:20px;
}

.top-card h6 {
	color:var(--text-gray-1);
	font-weight:400;
	font-size:15px;
}

.middle-card {
	padding:20px;
}

.middle-card h3 {
	color:var(--text-dark);
	font-size:25px;
}

.middle-notice {
    display: flex;
    justify-content: center;
	align-items: center;
    gap: 15px;
    padding: 50px 20px;
}

.notice-icon {
	
}

.notice-data {
	
}

.notice-data h4 {
	font-size:22px;
	color:var(--text-dark);
}

.notice-data h4 a {
	text-decoration:none;
	color: var(--text-dark);
}

.notice-data h6 {
	font-weight:400;
	font-size:14px;
	margin-bottom:10px;
	color:var(--gray-primary);
}

.middle-alert {
	padding:80px 40px;
	text-align:center;
}

.middle-alert h4 {
	color:var(--set-primary);
}

.middle-para-info {
	text-align:center;
	padding:20px;
}

.middle-para-info p {
	color:var(--text-gray-1);
	font-size:15px;
	font-weight:400;
}

/*Slider CSS*/

.slider {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .slides {
      display: flex;
      transition: transform 0.4s ease;
      width: 100%;
    }

    .slide {
      width: 100%;
      flex-shrink: 0;
      box-sizing: border-box;
    }

    .slide-box {
		margin: 0 10px;;
    }

    .dots {
      text-align: center;
    }

    .dot {
      height: 15px;
      width: 15px;
      margin: 0 6px;
      display: inline-block;
      border-radius: 50%;
      cursor: pointer;
      transition: 0.3s;
      border: 2px solid var(--gray-primary);
    }

    .dot.active {
      background: var(--set-primary);
      border-color: var(--set-primary);
    }

.tab-wrapper {
        margin: 10px;
    }

    /* Tabs */
    .tabs {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
		justify-content: space-evenly;
    }

    .tab-btn {
        padding: 10px 20px;
        border-radius: 12px;
        border: none;
        background: var(--main-white);
        color: var(--text-gray-1);
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
    }

    .tab-btn.active {
        background: var(--set-primary);
        color: var(--main-white);
    }

    /* Content */
    .tab-content {
        display: none;
        background: var(--main-white);
        border-radius: 20px;
        padding: 0px 30px;
		max-height: 270px;
		overflow-x: scroll;
    }

    .tab-content.active {
        display: block;
    }

    /* Timeline style */
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*padding: 18px 0;
        border-bottom: 1px solid var(--text-dark)*/
    }

    .date {
        color: var(--text-gray-1);
		font-size: 13px;
		font-weight: 400;
    }
	
	.date:after {
		content:"";
		background:var(--set-primary);
		color:var(--main-white);
		display: inline-block;
		height: 10px;
		width: 10px;
		position: relative;
		text-align: center;
		right: -15px;
		border-radius: 10px;
	}

    .info {
        flex: 1;
		padding-left: 15px;
		padding-top: 15px;
		padding-bottom: 15px;
		margin-left: 10px;
		border-left: 1px solid var(--gray-primary);
    }

    .time {
        color: var(--text-gray-1);
        font-size: 11px;
		font-weight: 600;
    }

    .room {
        font-size: 17px;
        font-weight: bold;
    }
	
	.room-small {
        font-size: 14px;
        font-weight: bold;
    }

    .status {
        padding: 0px 14px;
		font-size: 13px;
		border-radius: 6px;
		border: 2px solid var(--set-primary);
		color:var(--set-primary);
		font-weight: 400;
    }

    .done {
        border: none;
		color: var(--text-gray-1);
		padding: 0;
    }
	
	.confirm {
		color:var(--set-primary);
		border: none;
		padding: 0;
	}
	
.bottom-card {
	border-top:1px solid var(--gray-primary);
	display:flex;
	justify-content: space-between;
	padding:20px;
}

.bottom-card h6 {
	color:var(--text-gray-1);
	font-weight:400;
	font-size:15px;
	margin-bottom:8px;
}

.bottom-card p {
	color: var(--text-dark);
    font-weight: 400;
    font-size: 14px;
	margin-top: -4px;
}

.bottom-card p span {
	color:var(--set-primary);
	font-weight: 600;
    font-size: 18px;
}

.button-container {
	display:flex;
	justify-content: space-evenly;
	padding:0px 10px;
	gap: 10px;
}

.button-container-full {
	display:flex;
	justify-content: space-evenly;
	gap: 10px;
}

a.primary-button, a.secondary-button {
	color:var(--main-white);
	padding:10px;
	text-align:center;
	font-weight:600;
	text-decoration:none;
	border-radius:15px;
	width:100%;
}

a.primary-button {
	background:var(--set-primary);
}

a.secondary-button {
	background:var(--gray-primary);
}

a.primary-button:hover {
	background:var(--set-primary-hover);
}

a.secondary-button:hover {
	background:var(--text-gray-1);
}

.bottom-card-icons {
	display:flex;
	justify-content: space-around;
	align-items:center;
	padding:20px;
}

.card-icon {
	text-align:center;
}

.card-icon a {
	text-decoration:none;
}

.card-icon figure {
	background:var(--set-primary-light);
    padding-top: 3px;
    height:60px;
    width: 60px;
    border-radius: 43px;		
}

.top-logo path, .card-icon path, a.nav-button path {
  fill: var(--set-primary);
}

.card-icon figure img {
	width:30px;
}
.card-icon figure svg {
	width:30px;
}

.card-icon h6 {
	
}

.date-pill {
	display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    padding: 10px 20px;
    margin: 0px 10px;
    background-color: var(--set-primary);
    border-radius: 15px;
    color: var(--main-white);
}

.date-pill .label {
  font-size: 14px;
}

.date-pill .date {
  font-size: 16px;
  font-weight: 600;
  color:var(--main-white);
}

.date-pill .dash {
  margin: 0 10px;
  font-size: 26px;
  font-weight: 600;
}

.white-label {
	background:var(--main-white);
	border-radius: 15px;
	margin:10px;
	padding:20px;
}

.white-label a {
	text-decoration:none;
	color:var(--text-dark);
}

.sanc-data {
	display:flex;
	margin-bottom:15px;
	gap:10px;
}

.sanc-data label {
	color:var(--text-dark);
	font-weight:400;
	margin:0px;
	font-size: 12px;
}

.sanc-data h6 {
	color:var(--text-dark);
	font-weight:600;
    font-size: 18px;	
}

.sanc-data h6 span {
	color:var(--set-primary);
}

.sanc-data h5 {
	color:var(--text-gray-1);
	font-weight:600;
    font-size: 19px;
}

.sanc-data h5 span {
	color:var(--set-primary);
}

.sanc-data:last-child{
	margin-bottom:0px;
}

.sanc-details {
	display:flex;
	justify-content: space-between;
    align-items: center;
}

.sanc-info {
	text-align:center;
}

.sanc-info p {
	color:var(--text-gray-1);
	padding:10px 0px;
	font-weight:500;
}

.left-data {
	
}

.left-data h4 {
	color: var(--text-dark);	
}

.left-data p {
	font-size: 14px;
    font-weight: 400;
    color: var(--text-gray-1);	
}

.right-data {
	
}

.right-data h5 {
	font-weight: 500;
    font-size: 13px;
	color: var(--text-dark);
}

.right-data h5 a {
	text-decoration:none;
	color:var(--set-primary);
}

ul.slot-list {
	margin:20px 10px;
	padding:0px;
	overflow:auto;
}

ul.slot-list li {
	float:left;
	font-size:12px;
	color:var(--text-gray-1);
	list-style:none;
	margin-right:10px;
}

ul.slot-list li:before {
	content:"";
	display:block;
	float:left;
	height:13px;
	width:13px;
	margin-right:5px;
	margin-top:4px;
	border-radius:3px;
}

/* Specific background colors for nth-child */
ul.slot-list li:nth-child(1):before {
    background: var(--primary-blue) /* Green for "사용가능" */
}

ul.slot-list li:nth-child(2):before {
    background: var(--text-gray-1); /* Red for "사용중" */
}

.map-seating {
	margin:10px;
}

.map-seating img {
	width:100%;
}

.bottom-nav {
    position: fixed;
    width: 100%;
    bottom: 0px;
	z-index:2;	
}

.bottom-button {
	background:var(--main-white);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: 0px -1px 26px 0px var(--gray-primary);
}

/* random CSS names */
.znq-wrapper{width:100%;overflow:hidden; padding:10px 0;}

.znq-weekWrap{padding:10px 16px 16px 16px;border-bottom:2px solid var(--light-gray);width:100%;box-sizing:border-box;}

.znq-weekRow{display:flex;justify-content:space-between;color:var(--text-gray-1);font-weight:400;margin-bottom:10px;}

.znq-weekCell{flex:1;text-align:center;}

.znq-dateRow{display:flex;width:100%;}

.znq-dateItem{flex:1;display:flex;justify-content:center;}

.znq-dateCircle{width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:400;border:1px solid var(--gray-primary);color:var(--text-dark);background:var(--main-white);cursor:pointer;transition:all .2s;}

.znq-dateActive{background:var(--set-primary);color:var(--main-white);border:none;}

.znq-weekCell{
flex:1;
text-align:center;
}

/* header navigation */
.znq-headbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;}
.znq-arrowBtn{width:52px;height:52px;border-radius:14px;border:none;font-size:22px;cursor:pointer;}
.znq-leftBtn{background:var(--gray-primary);color:var(--main-white);}
.znq-rightBtn{background:var(--set-primary);color:var(--main-white);}

.znq-title{font-size:22px;font-weight:700;color:var(--text-gray);}

/* table area */
.znq-gridWrap{display:flex;width:100%;overflow:hidden;font-size: 14px;}

/* fixed time column */
.znq-timeCol{min-width:90px;padding-left:10px;position:sticky;left:0;z-index:2;}

.znq-timeBox{
background:var(--main-white);
border-radius:16px;
padding:16px 10px;
margin:10px 0;
text-align:center;
font-weight:600;
color:var(--text-dark);
}

/* sliding columns */
.znq-slideArea{
display:flex;
width:100%;
padding:0 10px;
justify-content:flex-start;
}

.znq-col{
flex:1;
margin:0 6px;
min-width:0;
}



.znq-colHead{
background:var(--main-white);
border:1px solid var(--gray-primary);
border-radius:16px;
padding:14px;
text-align:center;
font-weight:500;
font-size: 12px;
margin-bottom:10px;
}

.znq-slot{
display:flex;
justify-content:center;
align-items:center;
border-radius:16px;
padding:16px 8px;
margin:10px 0;
font-weight:400;
text-decoration:none;
width:100%;
box-sizing:border-box;
}

.znq-open{
background:var(--secondary-blue);
color:var(--text-dark);
}

.znq-closed{
background:var(--light-gray);
color:var(--main-white);
pointer-events:none;
}

.znq-slideArea::-webkit-scrollbar{display:none;}


.grid-2x2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px;
 }

.textfield-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  border: 2px solid var(--light-gray);
  border-radius: 60px;
  padding: 7px 13px;
  transition: 0.25s ease;
  background: var(--main-white);
}

.textfield-icon {
  font-size: 22px;
  color: var(--text-dark);
  margin-right: 4px;
  transition: 0.25s ease;
}

.textfield-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
}

.textfield-wrap:focus-within {
  border-color: var(--set-primary);
}

/* Filled state */
.textfield-wrap.filled {
  border-color: var(--text-dark);
}

.textfield-wrap.filled .textfield-icon {
  color: var(--text-dark);
}

.textfield-wrap:focus-within .textfield-icon {
  color: var(--set-primary);
}



.textfield-wrap.active .textfield-icon {
  color: var(--set-primary);
}

.textfield-wrap.disabled {
  background: var(--gray-secondary);
  border-color: var(--light-gray);
}

.textfield-wrap.disabled .textfield-icon {
  color: var(--text-gray-1);
}

.textfield-wrap.disabled .textfield-input {
  color: var(--text-gray-1);
}

.flex-row {
  display: flex;
  gap: 20px;
}

.flex-row .textfield-wrap {
  flex: 1;
}

    

.modal-uv-body {
	padding: 20px 0px;
	text-align:center;
}

.modal-uv-body h5 {
	font-weight:600;
	font-size:18px;
	margin-top:15px;
	margin-bottom: 35px;
}

.modal-uv-body p {
	color:var(--text-gray-1);
}

.modal-uv-footer {
    padding: 30px;	
	text-align: center;
}

.modal-uv-footer a {
	padding: 10px 50px;
}

a.nav-button {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    text-decoration: none;
    width: 100%;
	padding: 20px 10px;	
}

a.nav-button:hover {
	background:var(--gray-secondary);
}

.bottom-notice {
	text-align:center;
	padding:10px 0px;
}

.bottom-notice p {
	font-size:15px;
	font-weight:500;
}

.sep {
	background: var(--light-gray);
    width: 2px;
    height: 50px;
}