@charset "utf-8";

/*
 * File       : rwd-reservation.css
 * Author     : STUDIO-JT (JSH)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 680px
 * 02) 1024px
 */



/* **************************************** *
 * 680px
 * **************************************** */
@media(min-width: 680px){

    /* 장소예약 - LIST */
    .jt-reservation-calendar__header { margin-bottom: 2.4rem; }
    .jt-reservation-calendar__col { padding-bottom: 0.6rem; }
    .jt-reservation-calendar__col > li { padding: 0.6rem 1.2rem; }
    .jt-reservation-calendar__row { margin-top: 0.6rem; }
    .jt-reservation-calendar__row > li { padding-top: 4rem; }

    /* 장소예약 - FORM */
    .jt-reservation-choices__time-table { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .jt-reservation-choices__time-table > li:nth-child(4n+1):not(:first-child):not(:last-child) > label > span { left: -0.5rem; transform: translateX(-50%); }
    .jt-reservation-choices__time-table > li:nth-child(4n):not(:first-child):not(:last-child) > label:last-child:after { display: none; }
    .jt-reservation-choices__time-table > li:nth-child(5n+1):not(:first-child):not(:last-child) > label > span { left: 0; transform: none; }
    .jt-reservation-choices__time-table > li:nth-child(5n):not(:first-child):not(:last-child) > label:last-child:after { content: attr(data-etime); display: block; right: 0; }

    html.ios .jt-reservation-choices__type > li.jt-reservation-choices__type--disabled:before { top: calc(50% - 0.2rem); }

}



/* **************************************** *
 * 1024px
 * **************************************** */
@media (min-width: 1024px){

    /* 장소예약 - 반복요소 */
    .jt-reservation-refer { bottom: 3.2em; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.04em; border: none; }
    .jt-reservation-refer > span { padding-right: 2.9rem; position: relative; }
    .jt-reservation-refer > span:before,
    .jt-reservation-refer > span:after { position: absolute; top: 0.6rem; right: 0; content: '\e903'; font-family: 'jt-font'; font-size: 1.4rem; color: #222; }
    .jt-reservation-refer > span:after { opacity: 0; transform: translateX(-10px); }
    html.desktop .jt-reservation-refer:hover > span:before { opacity: 0; transform: translateX(10px); transition: all .2s cubic-bezier(0.47, 0, 0.75, 0.72) 0s; }
    html.desktop .jt-reservation-refer:hover > span:after { opacity: 1; transform: translateX(0); transition: all .3s cubic-bezier(0, 0, 0.2, 1) .3s; }

    .jt-reservation-refresh__action { margin: 0; padding: 0.8rem 2.8rem 0.8rem 0; position: absolute; right: 0; bottom: 1.5rem; font-size: 1.6rem; font-weight: 500; line-height: 1.62; color: #222; transition: color .3s; }
    .jt-reservation-refresh__action:after { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); transition: color .3s; }
    html.desktop .jt-reservation-refresh__action:hover, html.desktop .jt-reservation-refresh__action:hover:after { color: #0f4c82; }

    .jt-reservation-notice { margin-top: 4.6rem; padding: 3.2rem 4rem; }
    .jt-reservation-notice li { font-size: 1.6rem; line-height: 1.62; }
    .jt-reservation-notice ul li:before { top: 1.1rem; }

    .jt-reservation-info { padding: 3.2rem 4rem; }
    .jt-reservation-info > li { gap: 1.6rem; }
    .jt-reservation-info > li > * { font-size: 1.6rem; line-height: 1.62; }
    .jt-reservation-info > li > span:after { height: 1.2rem; right: -0.9rem; top: 0.8rem; }
    .jt-accordion .jt-reservation-info > li p { line-height: 1.62; }

    /* 장소예약 - LIST */
    body.page-template-adminstration-reservation .article_body > .wrap > .jt-separator:first-child { margin-top: 0; }
    body.page-template-adminstration-reservation .jt-list-nothing { padding-top: 16rem; padding-bottom: 0; }

    .jt-reservation-calendar__gotoday { margin-left: 1.9rem; padding: 0.7rem 3rem; font-size: 1.6rem; line-height: 1.62; }
    html.ios .jt-reservation-calendar__gotoday { padding-bottom: 0.8rem; }

    .jt-reservation-calendar { margin-top: 0; }
    .jt-reservation-calendar__header { margin-bottom: 2.4rem; }
    .jt-reservation-calendar__date { font-size: 2.4rem; line-height: 1.33; }
    .jt-reservation-calendar__btn { width: 4.6rem; height: 4.6rem; }
    .jt-reservation-calendar__prev { left: -1rem; }
    .jt-reservation-calendar__next { right: -1em; }
    .jt-reservation-calendar__btn:after { font-size: 1.6rem; transition: color .3s; }
    html.desktop .jt-reservation-calendar__btn:hover:after { color: #0f4c82; }
    .jt-reservation-calendar__list { border: solid #ddd; border-width: 0.1rem 0.1rem 0.1rem 0; }
    .jt-reservation-calendar__list > ul { gap: 0; }
    .jt-reservation-calendar__list > ul > li { text-align: left; }
    .jt-reservation-calendar__col { padding-bottom: 0; border-bottom: none; }
    .jt-reservation-calendar__col > li { font-size: 1.4rem; line-height: 1.71; background: #f8f8f8; border-left: 0.1rem solid #ddd; }
    .jt-reservation-calendar__row { margin-top: 0; }
    .jt-reservation-calendar__row > li { padding-top: 8rem; border-top: 0.1rem solid #ddd; border-left: 0.1rem solid #ddd; }
    .jt-reservation-calendar__row > li > a { display: block; width: auto; height: auto; margin: 0; padding: 1rem 1.2rem; top: -0.1rem; left: -0.1rem; right: -0.1rem; bottom: -0.1rem; font-size: 1.5rem; line-height: 1.6; border-radius: 0; transform: none; z-index: 1; }
    .jt-reservation-calendar__row > li.jt-reservation-calendar--today a { border-color: #0F4C82; }

    .jt-reservation-calendar__info { margin-top: 2.4rem; font-size: 1.5rem; line-height: 1.6; }
    
    .jt-reservation-refresh { padding-top: 5.2rem; padding-bottom: 2.4rem; }
    .jt-reservation-refresh__title { font-size: 2.8rem; }

    .jt-reservation-filter { margin-bottom: 0; }
    .jt-reservation-filter:after { content: ''; display: table; clear: both; }

    .jt-reservation-filter__search { float: right; margin-bottom: 0; width: 34rem; }
    .jt-reservation-filter__search .jt-form__field,
    html.android .jt-reservation-filter__search .jt-form__field { height: 5.6rem; padding: 1.6rem 4.4rem; background: #F8F8F8; border: none; }
    .jt-reservation-filter__search .jt-form__clear-btn { right: 1.1rem; top: 50%; transform: translateY(-50%); }
    .jt-reservation-filter__submit { left: 1.2rem; }

    .jt-reservation-filter__select { float: left; display: flex; flex-wrap: nowrap; gap: 1rem; }
    .jt-reservation-filter__select > li { width: 17rem; }
    .jt-reservation-filter__select > li:last-child { width: 5.6rem; }

    .jt-reservation-filter__select .selectric { transition: border .2s; }
    .jt-reservation-filter__select .selectric .label { height: calc(5.6rem - 2px); font-size: 1.5rem; line-height: calc(5.6rem - 2px); }
    .jt-reservation-filter__select .selectric .button { width: calc(5.6rem - 2px); height: calc(5.6rem - 2px); }
    .jt-reservation-filter__select .selectric-items li { padding-top: 1.6rem; padding-bottom: 1.6rem; font-size: 1.5rem; word-break: break-all; }
    .jt-reservation-filter__select .selectric-items, 
    .jt-reservation-filter__select .selectric-scroll { width: 100% !important; }
    .jt-reservation-filter__select .selectric-focus .selectric,
    .jt-reservation-filter__select .selectric-hover .selectric,
    .jt-reservation-filter__select .selectric-open .selectric { border-color: #0f4c82; }
    html.mobile .jt-reservation-filter__select .jt-selectric__wrap,
    html.mobile .jt-reservation-filter__select .selectric-wrapper { height: 100%; }
    html.mobile .jt-reservation-filter__select .jt-selectric__wrap:before,
    html.mobile .jt-reservation-filter__select .selectric-hide-select.selectric-is-native:before { top: 2.6rem; }
    html.mobile .jt-reservation-filter__select .selectric-hide-select.selectric-is-native select { height: 5.6rem; padding: 0 3.4rem 0 1.4rem; font-size: 1.5rem; line-height: 5.6rem; }
    html.mobile .jt-reservation-filter__select .jt-selectric__wrap > select { height: 5.6rem; font-size: 1.5rem; }
    html.mobile .jt-reservation-filter__select .selectric-wrapper.selectric-jt-selectric .selectric .label { height: calc(5.6rem - 2px); line-height: calc(5.6rem - 2px); }

    .jt-reservation-filter__select-refresh { width: 100%; height: 5.6rem; margin: 0; padding: 0; text-align: center; background: #0f4c82; border: 0.1rem solid #0f4c82; cursor: pointer; }
    .jt-reservation-filter__select-refresh:before { font-family: 'jt-font'; content: '\e925'; font-size: 1.8rem; line-height: 5.6rem; color: #fff; }

    .jt-reservation-filter__chosen { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 2.4rem; padding-left: 4.4rem; position: relative; clear: both; }
    .jt-reservation-filter__chosen > b { position: absolute; top: 2.8rem; left: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.6; letter-spacing: -0.025em; color: #222; }
    .jt-reservation-filter__chosen > [data-type="reservation-type"] { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .jt-reservation-filter__chosen > [data-type="reservation-type"] > button { margin: 0; padding: 0.8rem 1.3rem; position: relative; font-size: 1.3rem; line-height: 1; letter-spacing: -0.025em; font-weight: 500; color: #666; background: #f6f6f6; border: none; border-radius: 9.9rem; outline: none; cursor: pointer; transition: background .3s, color .3s; }
    html.desktop .jt-reservation-filter__chosen > [data-type="reservation-type"] > button:hover { background: rgba(108, 155, 197, .2); }
    .jt-reservation-filter__chosen > [data-type="reservation-type"] > button.selected,
    html.desktop .jt-reservation-filter__chosen > [data-type="reservation-type"] > button.selected:hover { color: #fff; background: #0F4C82; }
    html.ios .jt-reservation-filter__chosen > [data-type="reservation-type"] > button { padding-bottom: 0.9rem; }

    .jt-reservation-program-notice { margin: 5.2rem 0 2.6rem; }
    .jt-reservation-type { gap: 1.2rem; margin: 0; padding: 0; background: transparent; border: none; }
    .jt-reservation-type > span { font-size: 1.5rem; line-height: 1.6; }
    .jt-reservation-program-notice .jt-reservation-refresh__action { padding-right: 2.8rem; bottom: inherit; font-size: 1.6rem; }
    .jt-reservation-program-notice .jt-reservation-refresh__action:after { font-size: 1.8rem; }

    .jt-reservation-program { margin: 0; border-top: 0.1rem solid #222; }
    .jt-reservation-program__item { padding: 4rem 25rem 4rem 0; position: relative; }
    .jt-reservation-program__item + .jt-reservation-program__item { border-top: none; }
    .jt-reservation-program__item:last-child { border-bottom: 0.1rem solid #ddd; }
    .jt-reservation-program__head { margin-bottom: 3rem; gap: 1.2rem; align-items: center; }
    .jt-reservation-program__head > * { width: 100%; }
    .jt-reservation-program__title { padding-right: 0; font-size: 2.4rem; line-height: 1.33; }
    .jt-reservation-program__capacity { top: 0.1rem; font-size: 1.6rem; line-height: 1.62; }

    .jt-reservation-program__time { display: inline-block; }
    .jt-reservation-program__time-item:nth-child(2) { margin-top: 1.8rem; padding-top: 1.8rem; }
    .jt-reservation-program__time-item > b { font-size: 1.5rem; line-height: 1.6; }
    .jt-reservation-program__time-table { grid-template-columns: repeat(20, minmax(0, 3.4rem)); }
    .jt-reservation-program__time-table > li { margin-bottom: 2.7rem; }
    .jt-reservation-program__time-table > li > span, 
    .jt-reservation-program__time-table > li:after { font-size: 1.4rem; line-height: 1.71; }
    .jt-reservation-program__time-table > li:nth-child(13) > span { transform: translateX(-50%); }
    .jt-reservation-program__time-table > li:nth-child(12),
    .jt-reservation-program__time-table > li:nth-child(13) { border-radius: 0; }
    .jt-reservation-program__time-table > li:nth-child(12):after { display: none; }
    .jt-reservation-program__button { width: 21rem; margin-top: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    .jt-reservation-program__button .jt-btn__basic { padding: 1.6rem 1rem; font-size: 1.6rem; line-height: 1.62; }    
    html.ios .jt-reservation-program__button .jt-btn__basic { padding-top: 1.5rem; padding-bottom: 1.7rem; }

    /* 장소예약 - FORM */
    .jt-reservation-notice + .jt-reservation-locaform { margin-top: 2rem; }
    .jt-reservation-locaform:first-child { margin-top: 4.6rem; }
    .jt-reservation-locaform .jt-accordion__title { padding: 3.2rem 4rem; }
    .jt-reservation-locaform .jt-accordion__questions { font-size: 1.6rem; line-height: 1.62; }
    .jt-reservation-locaform .jt-accordion__control { right: 3.3rem; }
    .jt-reservation-locaform .jt-accordion__control:after { font-size: 1.2rem; }
    .jt-reservation-locaform .jt-accordion__content { margin-top: -2.5rem; padding-bottom: 2.5rem; }
    .jt-reservation-locaform .jt-accordion__content-inner { padding-left: 4rem; padding-right: 4rem; }

    #jt-reservation-register { max-width: inherit; }
    #jt-reservation-register .jt-sub-title { padding-bottom: 2.4rem; margin-bottom: 4rem; border-bottom: 0.1rem solid #222; }
    #jt-reservation-register .jt-form__wrap { max-width: 64rem; }

    .jt-reservation-choices__head { padding-bottom: 2.4rem; margin-bottom: 4rem; border-bottom: 0.1rem solid #222; }

    .jt-reservation-choices__type { position: relative; right: inherit; top: inherit; gap: 1.2rem; }
    .jt-reservation-choices__type > li { font-size: 1.5rem; line-height: 1.6; }
    .jt-reservation-choices__type > li.jt-reservation-choices__type--disabled { padding-left: 1.4rem; }
    .jt-reservation-choices__type > li.jt-reservation-choices__type--disabled:before { top: calc(50% - 0.15rem); }
    html.ios .jt-reservation-choices__type > li.jt-reservation-choices__type--disabled:before { top: calc(50% - 0.15rem); }

    .jt-reservation-choices__helper { font-size: 1.5rem; line-height: 1.6; margin-top: 0; padding-bottom: 2.4rem; }

    .jt-reservation-choices__info { padding: 3.2rem 4rem; margin-bottom: 5.2rem; font-size: 1.6rem; line-height: 1.62; }

    .jt-reservation-choices__time-table { grid-template-columns: repeat(14, minmax(calc(8rem + 1px), 1fr)); }
    .jt-reservation-choices__time > li > b { font-size: 1.5rem; line-height: 1.6; }
    .jt-reservation-choices__time-table > li { grid-template-columns: repeat(2, minmax(4rem, 1fr)); }
    .jt-reservation-choices__time-table > li > label { padding-top: 92.5%; margin-bottom: 2.1rem; }
    .jt-reservation-choices__time-table > li > label:after, 
    .jt-reservation-choices__time-table > li > label > span { font-size: 1.4rem; line-height: 1.5rem; top: calc(100% + 0.3rem); }
    .jt-reservation-choices__time-table > li:nth-child(5n+1):not(:first-child):not(:last-child) > label > span { left: -0.5rem; transform: translateX(-50%); }
    .jt-reservation-choices__time-table > li:nth-child(5n):not(:first-child):not(:last-child) > label:last-child:after { display: none; }

    #jt-reservation-register .jt-form__clear-btn { top: 1.3rem; }

    /* 장소예약 - COMPLETE */
    body.page-template-adminstration-reservation-complete .jt-form__btn-wrap { margin-top: 6rem; font-size: 0; text-align: center; } 
    body.page-template-adminstration-reservation-complete .jt-form__btn { display: inline-block; width: 21rem; height: auto; font-size: 1.6rem; line-height: 1.62; }
    body.page-template-adminstration-reservation-complete .jt-form__btn:first-child { margin-bottom: 0; margin-right: 1rem; }

    /* 마이페이지 - 예약현황 */
    .jt-my-reservation { margin: 0; }
    .jt-my-reservation__item + .jt-my-reservation__item { border-top: none; }
	.jt-my-reservation__info { padding: 4rem 22rem 4rem 0; }
	.jt-my-reservation__info li { grid-template-columns: 12rem calc(100% - 12rem); font-size: 1.6rem; line-height: 1.75; }

	.jt-my-reservation__buttons { position: absolute; right: 0; top: 50%; border: none; transform: translateY(-50%); }
	.jt-my-reservation__button { min-width: 18.2rem; padding: 1.5rem 1rem 1.7rem; font-size: 1.6rem; line-height: 1.75; background: #eaeaea; transition: background .3s; }
	html.desktop .jt-my-reservation__button:hover { background: #d2d2d2; }

}