@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700&display=swap&subset=korean');
@font-face {
    font-family: 'HanjinGroupSans';
    src: url('../fonts/HanjinGroupSans-Light_A.ttf') format('truetype');
    font-weight: 300; /* Light는 보통 300을 씁니다 */
    font-style: normal;
}

/* 2. Regular (기본 굵기) */
@font-face {
    font-family: 'HanjinGroupSans';
    src: url('../fonts/HanjinGroupSans-Regular_A.ttf') format('truetype');
    font-weight: 400; /* Regular는 400 또는 normal 입니다 */
    font-style: normal;
}

/* 3. Bold (두꺼운 굵기) */
@font-face {
    font-family: 'HanjinGroupSans';
    src: url('../fonts/HanjinGroupSans-Bold_A.ttf') format('truetype');
    font-weight: 700; /* Bold는 700 또는 bold 입니다 */
    font-style: normal;
}
html {box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body {
    font-family: 'HanjinGroupSans', -apple-system, sans-serif;
}
/** 일반 고객 예약 **/
body.reserve {position:relative;font-family:'HanjinGroupSans', sans-serif;padding:0;margin:0;font-size:14px;color:rgba(51,51,51,1);-webkit-font-smoothing:antialiased;}

body.reserve header {width:100%;height:45pt;line-height:45pt;position:relative;display:flex;justify-content:center;align-items:center;font-weight:700;}
body.reserve header img {position:absolute;left:20px;}

body.reserve section {padding:26px 30px;}

body.reserve .box-selectable {padding:10px;width:40%;border:1px solid rgb(175,175,175);color:rgb(175,175,175);display:flex;justify-content:center;align-items:center;}
body.reserve .box-selected {padding:10px;width:40%;background:rgb(98,181,229);color:#fff;display:flex;justify-content:center;align-items:center;}

body.reserve input {background:#fff;border:none;padding:0;}
body.reserve input:focus {outline:none;}
body.reserve input::placeholder {color:#c9c9c9;}

body.reserve select {padding:5px 10px;width:100%;height:45px;font-size:16px;color:rgb(119,119,119);background:unset;}

body.reserve div.row-titl {margin-top:22px;font-weight:700;}
body.reserve div.popup-titl {margin-top:20px; margin-left:5px; font-weight:700;}
body.reserve div.inp-border {border-bottom:1px solid rgb(225,225,225);}
body.reserve div.sel-border {margin-top:10px;}

body.reserve table {width:100%;}
body.reserve table th,td {text-align:center;font-size:12px;border:1px solid #c9c9c9;padding:12px 0;}
body.reserve table thead th {background:rgba(98, 181, 229, 1.0);color:#fff;font-weight:bold;border:1px solid rgba(98, 181, 229, 1.0);word-break:keep-all;}
body.reserve table thead th:nth-child(1) {background:#fff;color:rgba(51, 51, 51, 1.0);border-radius:15px 0 0 15px;}

body.reserve .ellipsis {text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:60%;}
body.reserve .ellipsis_no {white-space:normal;overflow:hidden;width:60%;}

.toast-message {position: fixed;bottom: -20rem;font-size: 16px;color: #fff;z-index: -9;width: 80%;max-width: 600px;background: rgba(0, 0, 0, 0.65);text-align: center;height: auto;min-height: 44px;line-height: 1.5;left: 0;right: 0;margin: auto;border-radius: 8px;padding: 10px 20px;word-wrap: break-word;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.toast-message.show {z-index:999;animation-name: toast-show;animation-duration: 1.6s;animation-iteration-count: 1;}
@keyframes toast-show {0% {bottom:-20px;}20%{bottom:2rem;}100% {bottom:2rem;}}

.popup {width:100vw;height:100vh;overflow-y:auto;position:fixed;top:0;left:0;right:0;background:#fff;display:none;}
.popup.show {display:inline-block;margin-top:0;z-index:99; animation-name: popup-show;animation-duration: .3s;animation-iteration-count: 1;animation-timing-function: ease-end;}
@keyframes popup-show {0% {margin-top:100vh;}100% {margin-top:0;}}

.popup .item {font-size:12px;word-break:keep-all;padding:14px 10px;margin-top:10px;border:1px solid rgb(206,206,206);display:flex;justify-content:space-between;align-items:center;}

#spinner > img {animation-name: spinner;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: linear;}
@keyframes spinner {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}

#fare-text {margin-top:10px;}

    /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: absolute; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }