/*로그인*/
.login .wrap { padding: 150px 32px 0; box-sizing: border-box; }
.login .login-util { display: flex;  justify-content: center; align-items: center; margin-top: 50px; }
.login .login-util a { position: relative; margin: 0 20px; font-size: 20px; font-weight: 400; color: #333; text-align: center; letter-spacing: -0.5px; }
.login .login-util a:after { content: ''; display: block; position: absolute; top: calc(50% - 9px); right: -21px; width: 1px; height: 18px; background: #ddd; }
.login .login-util a:last-child:after { display: none; }


/*회원가입*/
.sign .wrap { padding: 60px 32px; box-sizing: border-box; }


/*아이디 및 비밀번호 찾기*/
.find .wrap { padding: 60px 32px; box-sizing: border-box; }
.find .frm .top-frm { margin-bottom: 60px; font-size: 20px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.5px; }


/*사장님 한마디*/
.notice .wrap { padding: 50px 32px; box-sizing: border-box; }


/*메뉴 등록*/
.menu .wrap { padding: 100px 32px; box-sizing: border-box; }

/*calendar style*/
.calendar-control { display: flex; justify-content: center; align-items: center; margin-bottom: 30px; }
.calendar-control .btn-calendar { width: 40px; height: 40px; border: none; background: none; }
.calendar-control .btn-calendar img { width: 14px; }
.calendar-control .yyyymm { margin: 0 20px; font-size: 34px; font-weight: 500; color: #333; text-align: center; }

.calendar { width: 100%; border-collapse: collapse; }
.calendar thead th { width: 14.28%; height: 50px; padding: 0; border-left: 1px solid #008dce; border-right: 1px solid #008dce; box-sizing: border-box; background: #03a9f4; font-size: 16px; font-weight: 500; color: #fff; }

.calendar tbody tr { border-bottom: 1px solid #eaeaea; box-sizing: border-box; }
.calendar tbody td { width: 14.28%; padding: 0; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; box-sizing: border-box; }
.calendar tbody td .day { display: flex; justify-content: center; align-items: center; position: relative; height: 30px; border-bottom: 1px solid #eaeaea; box-sizing: border-box; background: #f9f9f9; font-size: 14px; font-weight: 400; color: #666; }
.calendar tbody td .inp-group-menu { height: 400px; }
.calendar tbody td .inp-group-menu > div { height: 33.33%; border-bottom: 1px dashed #eaeaea; box-sizing: border-box; }
.calendar tbody td .inp-group-menu > div:last-child { border-bottom: none; }
.calendar tbody td .inp-group-menu .tit { display: flex; justify-content: center; align-items: center; height: 30px; font-size: 13px; font-weight: 400; color: #666; text-align: center; }
.calendar tbody td .inp-group-menu textarea { width: 100%; height: calc(100% - 30px); padding-bottom: 10px; border: none; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #333; text-align: center; }
.calendar tbody td .inp-group-menu textarea:focus { background: #e5f7ff; }

.calendar tbody td.inactive { opacity: 0.4; cursor: not-allowed; }
.calendar tbody td.inactive .inp-group-menu textarea { cursor: not-allowed; }

.calendar .btn-print { display: flex; justify-content: center; align-items: center; position: absolute; height: 22px; padding: 0 6px; border: none; border-radius: 6px; box-sizing: border-box; background: #03a9f4; color: #fff; }
.calendar .btn-print-week { left: 5px; }
.calendar .btn-print-day { right: 5px; }

.origin-info { margin-top: 30px; }
.origin-info .tit { margin-bottom: 5px; font-size: 13px; font-weight: 500; color: #333; }
.origin-info .txt { font-size: 12px; font-weight: 400; color: #666; line-height: 18px; }
.origin-info .txt textarea { width: 100%; height: 95px; padding: 10px; border: 1px solid #eaeaea; box-sizing: border-box; font-size: 12px; font-weight: 400; color: #666; line-height: 18px; }


/*메뉴 프린트*/
.menu-print .calendar thead th,
.menu-print .calendar tbody td { width: 13.142%; }
.menu-print .calendar thead th:first-child,
.menu-print .calendar tbody td:first-child { width: 8%; }

.menu-print .calendar tbody td { vertical-align: baseline; }
.menu-print .calendar tbody td:first-child { vertical-align: middle; }
.menu-print .calendar tbody tr:not(:first-child) td { height: 100px; }
.menu-print .calendar tbody td .day { border-bottom: none; }
.menu-print .calendar tbody td .txt { padding: 10px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #333; text-align: center; line-height: 18px; }

.menu-print-v1 .wrap { width: 100%; margin: 0 auto; padding: 0 !important; }
.menu-print-v1 .calendar thead th,
.menu-print-v1 .calendar tbody td { width: 70%; }
.menu-print-v1 .calendar thead th:first-child,
.menu-print-v1 .calendar tbody td:first-child { width: 30%; }
.menu-print-v1 .calendar tbody td:first-child .txt { padding: 20px; box-sizing: border-box; font-size: 36px; line-height: unset; }
.menu-print-v1 .calendar tbody td:last-child .txt { display: flex; justify-content: center; align-items: center; height: 100%; padding: 20px; box-sizing: border-box; font-size: 36px; line-height: 65px; }


/*메인*/
.main .wrap { padding: 60px 32px; box-sizing: border-box; }
.main .sec { margin-bottom: 80px; }
.main .sec:last-child { margin-bottom: 0; }
.main .top-section { margin-bottom: 20px; }
.main .top-section .tit { font-size: 24px; font-weight: 600; color: #000; letter-spacing: -0.5px; }

.count-group { display: flex; flex-wrap: wrap; margin: -10px; }
.count-group .card { width: 50%; padding: 10px; box-sizing: border-box; }
.count-group .txt-group { display: flex; flex-direction: column; justify-content: space-between; height: 120px; padding: 20px 24px 16px 24px; border: 1px solid #eee; border-radius: 10px; box-sizing: border-box; }
.count-group .txt-group .tit { font-size: 16px; font-weight: 500; color: #333; letter-spacing: -0.5px; }
.count-group .txt-group .num { font-size: 36px; font-weight: 700; color: #000; text-align: right; letter-spacing: -1px; }
.count-group .card:last-child .txt-group { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); box-sizing: border-box; background: #f9f9f9; }
.count-group .card:last-child .txt-group .tit { font-weight: 700; }
.count-group .card:last-child .txt-group .num { font-size: 42px; color: #e91e63; }

.list-ranking-like { display: flex; flex-wrap: wrap; margin: -10px; margin-top: 40px; }
.list-ranking-like > li { width: 33.33%; margin-bottom: 40px; padding: 10px; box-sizing: border-box; }
.list-ranking-like .card { display: flex; flex-direction: column; justify-content: space-between; position: relative; height: 100%; padding: 50px 25px 30px; border: 1px solid #eee; border-radius: 6px 6px 20px 6px; box-sizing: border-box; }
.list-ranking-like .ranking-num { display: flex; justify-content: center; align-items: center; position: absolute; top: -25px; left: 20px; width: 50px; height: 50px; border-radius: 15px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.15); box-sizing: border-box; background: #333; font-size: 16px; font-weight: 400; color: #fff; }
.list-ranking-like .ranking-num .tit { font-size: 14px; font-weight: 400; color: #fff; }
.list-ranking-like .ranking-num span { margin-right: 1px; font-size: 24px; vertical-align: -1px; }

.list-ranking-like .menu-group .menu { font-size: 16px; font-weight: 400; color: #000; letter-spacing: -0.28px; line-height: 24px; }
.list-ranking-like .menu-group .menu p { position: relative; padding-left: 15px; box-sizing: border-box; }
.list-ranking-like .menu-group .menu p:before { content: '·'; position: absolute; top: 0; left: 0; }

.list-ranking-like .like-count { display: flex; justify-content: center; align-items: center; height: 40px; margin-top: 20px; border-radius: 6px; box-sizing: border-box; background: #e91e63; font-size: 14px; font-weight: 500; color: #fff; }
.list-ranking-like .like-count img { margin-right: 4px; }

.list-ranking-like > li:nth-child(n+1):nth-child(-n+3) .ranking-num { background: #e91e63; color: #fff; }


/*QR*/
.qr .wrap { padding: 50px 0; box-sizing: border-box;}
.qr-group { position: relative; width: 362px; height: 663px; margin: 0 auto; }
.qr-group .bg { display: block; width: 100%; margin: 0 auto; }
.qr-group .img-qr { position: absolute; top: 248px; left: 0; right: 0; width: 250px; height: 250px; margin: 0 auto; background: #fff; transform: translateX(-5px); }


@media only screen and (max-width: 1280px) {
	/*메뉴 등록*/
	.calendar .btn-print { display: none; }
}


@media only screen and (max-width: 720px) {
	/*로그인*/
	.login .wrap { padding: 100px 20px 0; box-sizing: border-box; }
	.login .login-util { margin-top: 40px; }
	.login .login-util a { margin: 0 15px; font-size: 13px; letter-spacing: -0.36px; }
	.login .login-util a:after { top: calc(50% - 6px); right: -16px; width: 1px; height: 12px; }
	
	/*회원가입*/
	.sign .wrap { padding: 40px 20px; box-sizing: border-box; }
	
	/*아이디 및 비밀번호 찾기*/
	.find .wrap { padding: 40px 20px; box-sizing: border-box; }
	.find .frm .top-frm { margin-bottom: 40px; font-size: 14px; letter-spacing: -0.4px; }
	
	/*사장님 한마디*/
	.notice .wrap { padding: 30px 20px; box-sizing: border-box; }
	
	/*메뉴 등록*/
	.menu .wrap { padding: 40px 20px; box-sizing: border-box; }
	
	.calendar-control .btn-calendar { width: 30px; height: 30px; }
	.calendar-control .btn-calendar img { width: 8px; }
	.calendar-control .yyyymm { margin: 0 10px; font-size: 24px; }
	
	/*메인*/
	.main .wrap { padding: 40px 20px; box-sizing: border-box; }
	.main .sec { margin-bottom: 40px; }
	.main .top-section { margin-bottom: 15px; }
	.main .top-section .tit { font-size: 18px; }
	
	.count-group { margin: -8px; }
	.count-group .card { padding: 8px; box-sizing: border-box; }
	.count-group .txt-group { height: 27.778vw; padding: 18px 20px 12px 18px; border-radius: 8px; box-sizing: border-box; }
	.count-group .txt-group .tit { font-size: 14px; }
	.count-group .txt-group .num { font-size: 28px; }
	.count-group .card:last-child .txt-group { box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05); box-sizing: border-box; }
	.count-group .card:last-child .txt-group .num { font-size: 32px; }
	
	.list-ranking-like { margin: -8px; margin-top: 40px; }
	.list-ranking-like > li { width: 50%; padding: 8px; box-sizing: border-box; }
	.list-ranking-like .card { padding: 45px 20px 20px; box-sizing: border-box; }
	
	.list-ranking-like .menu-group .menu { font-size: 14px; line-height: 20px; }
	
	/*QR*/
	.qr-group { zoom: 0.6; }
}


/*프린트 영역*/
@media print {
	/*QR*/
	#wrap.qr { min-height: auto; padding: 0; box-shadow: none; }
	.qr .header,
	.qr .m-gnb,
	.qr .btn-floating-bottom { display: none; }
	
	/*메뉴 프린트*/
	#wrap.menu-print { justify-content: center; padding: 0; box-shadow: none; }
	.menu-print .header,
	.menu-print .m-gnb,
	.menu-print .btn-floating-bottom { display: none; }
	.menu-print .wrap { padding: 32px; box-sizing: border-box; }
	.menu-print .calendar-control .yyyymm { font-size: 30px; }
}